@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --color-primary: #415167;
    --color-accent: #c7a17a;
    --color-accent-light: #f9f5e8;
    --color-gray-dark: #151d28;
    --color-gray-dark-rgb: 21, 29, 40;
    --color-gray-medium: #232b38;
    --color-gray-light: #edf0f5;
    --color-bg-primary: #f9fbff;
    --color-bg-white: #fff;

    --font-family-montserrat: 'Montserrat', sans-serif;
    --font-family-nunito: 'Nunito', sans-serif;

    --font-header-large: 900 54px/70px var(--font-family-montserrat);
    --font-header-medium: 900 30px/34px var(--font-family-montserrat);
    --font-title: 700 24px/28px var(--font-family-nunito);
    --font-subtitle: 600 20px/24px var(--font-family-nunito);
    --font-price: 600 20px/24px var(--font-family-nunito);
    --font-body: 400 16px/20px var(--font-family-nunito);
    --font-description: 300 16px/20px var(--font-family-nunito);
    --font-button: 700 16px/20px var(--font-family-nunito);
    --font-cart-count: 400 12px/16px var(--font-family-nunito);
    --font-copyright: 300 italic 16px/20px var(--font-family-nunito);

    scroll-behavior: smooth;
    background-color: var(--color-bg-primary);
    color: var(--color-primary);
    font-family: var(--font-family-nunito);
    font-weight: 400;
}

@media (max-width: 720px), (max-height: 720px) {
    :root {
        --font-header-large: 900 30px/34px var(--font-family-montserrat);
    }
}

@media (max-width: 360px) {
    :root {
        --font-header-large: 900 24px/28px var(--font-family-montserrat);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

img {
    max-width: none;
}

/* HEADER */

.header {
    height: 100vh;
    display: flex;
    margin-left: 17%;
}

@media (max-width: 380px) {
    .header {
        margin-left: 8%;
    }
}

.header__logo-slogan {
    display: flex;
    flex-direction: column;
}

.header__logo {
    margin-top: 4rem;
    object-fit: none;
}

.header__slogan {
    margin-top: auto;
    margin-bottom: 2rem;
    margin-right: 1rem;

    font: var(--font-header-large);
    text-transform: uppercase;
}

.header__slogan-highlight-wrapper {
    position: relative;
}

.header__slogan-highlight {
    box-sizing: content-box;
    position: absolute;
    left: -1rem;
    padding: 0 1rem;
    background-color: var(--color-accent);
    color: var(--color-bg-primary);
}

.header__nav-wrapper {
    display: flex;
    width: 100%;
    background-image: url("../assets/img/header-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.header__nav {
    margin-left: auto;
    padding: 4rem 3rem 2rem 3rem;
    background-color: var(--color-primary);
    color: var(--color-bg-primary);
}

@media (max-width: 720px) {
    .header__nav {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .header__nav {
        padding: 4rem 1rem 2rem 1rem;
    }
}

@media (max-width: 380px) {
    .header__nav {
        padding: 4rem 0rem 2rem 0rem;
    }
}

.nav__cart {
    margin-left: 1rem;
    position: relative;
}

.nav__cart-icon {
    position: absolute;
}

.nav__cart-count {
    position: absolute;
    left: 10px;
    top: -10px;
    width: 16px;
    font: var(--font-cart-count);

    background-color: var(--color-accent);
    border-radius: 50%;
    text-align: center;
}

.nav__list {
    margin-top: 10rem;
}

@media (max-height: 720px) {
    .nav__list {
        margin-top: 4rem;
    }
}

.nav__link {
    display: block;
    padding: 1rem;
    text-transform: uppercase;
}

.nav__link--active {
    font-weight: 700;
}

.nav__link:hover {
    background-image: linear-gradient(rgb(0 0 0/10%), rgb(0 0 0/10%));
}

.nav__link:active {
    background-image: linear-gradient(rgb(0 0 0/20%), rgb(0 0 0/20%));
}

/* SECTIONS */

.section {
    padding: 6rem 0;
}

.hgroup {
    display: table;
    margin: 0px auto 0px auto;
    padding: 0.25rem;
    background-color: var(--color-bg-primary);
    margin-bottom: 6rem;
    text-align: center;
}

.hgroup__eyebrow {
    font: var(--font-subtitle);
}

.hgroup__heading {
    margin-top: 0.5rem;
    font: var(--font-header-medium);
    text-transform: uppercase;
}

/* FEATURES */

.features__list {
    margin: 0 8rem;
    display: flex;
    gap: 2rem;
    justify-content: space-around;
    text-align: center;
    flex-wrap: wrap;
}

.feature {
    max-width: 15rem;
}

.feature__title {
    margin-top: 2rem;
    font: var(--font-title);
}

.feature__body {
    margin-top: 1rem;
    font: var(--font-body);
}

/* PRODUCTS */

.products {
    background-image: linear-gradient(var(--color-primary), var(--color-primary));
    background-repeat: no-repeat;
    background-size: 25% 100%;
}

.products__list-wrapper {
    overflow: hidden;
    position: relative;
}

.products__list-wrapper::after {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-size: 10% 100%;
    pointer-events: none;
}

.products__list {
    display: grid;
    margin-left: 10%;
    padding-bottom: 1rem;
    padding-right: 15%;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    row-gap: 1rem;
    column-gap: 1rem;
    overflow: scroll;
    scrollbar-width: none;
}

@media (max-width: 720px) {
    .products__list {
        margin-left: 5%;
        grid-template-rows: repeat(1, auto);
    }
}

.product {
    /* FIXME: Couldn't figure out how to make the product card take up enough space */
    min-width: 36rem;
    display: flex;
    background-color: var(--color-bg-white);
    box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

@media (max-width: 720px) {
    .product {
        min-width: 20rem;
        flex-direction: column;
    }
}

.product__info {
    padding: 2rem;
}

.product__price {
    font: var(--font-subtitle);
    color: var(--color-accent);
}

.product__name {
    margin-top: 1rem;
    font: var(--font-title);
    color: var(--color-gray-medium);
}

.product__description {
    margin-top: 2rem;
    font: var(--font-body);
    color: var(--color-gray-dark);
}

.product__buttons {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

/* TODO: add color changes on hover etc. */
.product__button {
    padding: 1rem;
	border: none;
    border-radius: 100vmax;
    cursor: pointer;
    font: var(--font-button);
    text-transform: uppercase;
}

.product__button:hover {
    background-image: linear-gradient(rgb(0 0 0/10%), rgb(0 0 0/10%));
}

.product__button:active {
    background-image: linear-gradient(rgb(0 0 0/20%), rgb(0 0 0/20%));
}

.product__buy {
    background-color: var(--color-accent);
    color: var(--color-bg-primary);
}

.product__details {
    margin: 0 auto;
    background: none;
    color: var(--color-primary);
}

/* GIFTSETS */

.giftset {
    background-image: linear-gradient(var(--color-gray-light), var(--color-gray-light));
    background-repeat: no-repeat;
    background-size: 80% 100%;
}

.giftset .hgroup {
    background: none;
}

.tabs {
    display: flex;
    margin-left: 25%;
    margin-right: 10%;
    background-color: var(--color-bg-white);
}

@media (max-width: 1080px) {
    .tabs {
        margin-right: 5%;
    }
}

@media (max-width: 900px) {
    .tabs {
        margin-top: 22rem;
        margin-left: 5%;
    }
}

@media (max-width: 640px) {
    .tabs {
        margin-top: 18rem;
    }
}

@media (max-width: 480px) {
    .tabs {
        flex-direction: column;
    }
}

@media (max-width: 360px) {
    .tabs {
        margin-top: 12rem;
    }
}

.tabs__panel {
    display: none;
}

.tabs__panel--active {
    display: flex;
}

.tabs__panel-content {
    position: relative;
    margin-left: 30%;
    padding: 4rem 2rem;
}

@media (max-width: 900px) {
    .tabs__panel-content {
        margin-left: 0;
    }
}

.tabs__panel-image {
    position: absolute;
    top: calc(50% + 28px);
    transform: translateY(-50%);
    left: -30rem;
}

@media (max-width: 1080px) {
    .tabs__panel-image {
        left: -26rem;
    }
}

@media (max-width: 900px) {
    .tabs__panel-image {
        top: initial;
        top: -20rem;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 640px) {
    .tabs__panel-image {
        top: -16rem;
        width: 360px;
    }
}

@media (max-width: 360px) {
    .tabs__panel-image {
        top: -10rem;
        width: 240px;
    }
}

.tabs__panel-price {
    font: var(--font-price);
    color: var(--color-accent);
}

.tabs__panel-name {
    margin-top: 0.5rem;
    font: var(--font-title);
}

.tabs__panel-description {
    margin-top: 0.5rem;
    font: var(--font-body);
}

.tabs__panel-properties {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.tabs__panel-property {
    display: flex;
    flex: 1;
    white-space: nowrap;
}

.tabs__panel-property-type-value {
    margin-left: 0.5rem;
}

.tabs__panel-property-type {
    font: var(--font-description);
}

.tabs__panel-property-value {
    font: var(--font-body);
}

.tabs__list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 480px) {
    .tabs__list {
        flex-direction: row;
    }
}

.tabs__tab {
    padding: 1rem 2rem;
    flex: 1;
    border: none;
    background-color: var(--color-gray-light);
    font: var(--font-title);
    color: var(--color-primary);
    cursor: pointer;
}

.tabs__tab--active {
    background-color: var(--color-bg-white);
    color: var(--color-primary);
}

.tabs__tab:not(.tabs__tab--active):hover {
    background-image: linear-gradient(rgb(0 0 0/10%), rgb(0 0 0/10%));
}

.tabs__tab:not(.tabs__tab--active):active {
    background-image: linear-gradient(rgb(0 0 0/20%), rgb(0 0 0/20%));
}

/* COMBOS */

.combos {
    background-image: linear-gradient(var(--color-primary), var(--color-primary));
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-size: 20% 100%;
}

@media (max-width: 720px) {
    .combos {
        background-size: 10% 100%;
    }
}

.combos__list {
    display: flex;
    overflow: scroll;
    scrollbar-width: none;
    gap: 2rem;
    margin-left: 10%;
}

.combo {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-white);
    box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.combo--active {
    opacity: 1;
}

.combo__image {
    background-color: var(--color-gray-light);
}

.combo__content {
    padding: 2rem;
    flex: 1;
}

.combo__price {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.combo__price-current {
    font: var(--font-price);
    color: var(--color-accent);
}

.combo__price-previous {
    font: var(--font-description);
    text-decoration: line-through;
    color: var(--color-primary);
}

.combo__name {
    margin-top: 0.5rem;
    font: var(--font-title);
    white-space: nowrap;
}

.combo__description {
    margin-top: 0.5rem;
    font: var(--font-description);
}

/* CUSTOMERS */

.customers {
    background-image: linear-gradient(var(--color-gray-light), var(--color-gray-light));
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-size: 20% 100%;
}

@media (max-width: 720px) {
    .customers {
        background-size: 10% 100%;
    }
}

.customers__masonry {
    margin-left: 8%;
    margin-right: 25%;
}

@media (max-width: 720px) {
    .customers__masonry {
        margin-right: 15%;
    }
}

@media (max-width: 720px) {
    .customers__masonry {
        /* --font-body: 400 12px/16px var(--font-family-nunito); */
    }
}

.masonry-grid__container {
    margin-top: 1rem;
    column-count: 3;
    column-gap: 24px;
}

@media (max-width: 1080px) {
    .masonry-grid__container {
        column-count: 2;
    }
}

@media (max-width: 640px) {
    .masonry-grid__container {
        column-count: 1;
    }
}

.masonry-item {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease;
}

.masonry-item__image {
    max-width: 100%;
}

.masonry-item__title {
    font: var(--font-title);
}

.masonry-item__text {
    margin-top: 0.5rem;
    font: var(--font-body);
}

/* FOOTER */

.footer {
    padding: 1rem 0;
    background-color: var(--color-gray-light);
    font: var(--font-copyright);
    text-align: center;
}