:root{
    --wrapper-w:1280px;
    --side-pad:20px;
    --accent: #00b4d8;
    --bg: #0f1724;
    --white: #ffffff;
    --header-h:90px;
    --golden: #c7a665;
}

html,body{height:100%;}
body{
    margin:0;
    font-family: 'Roboto', arial;
    background: white;
    color: #ffffff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding-left:var(--side-pad);
    padding-right:var(--side-pad);
    scroll-behavior:smooth;
    padding: 0;
}


.collection-wrap {
    
    .new-product {
        background: url(../../../images/new_product.png) center center no-repeat;
        background-size: contain;
        width: 140px;
        height: 140px;
        display: block;
        position: absolute;
        right: 40px;
        top: 40px;
        @media (max-width:1180px){
            width: 80px;
            height: 80px;
        }
    }

    section:nth-child(even) .wrap {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;

        .new-product {
            right: unset;
            left: 40px;
        }
    }
}
section.section.reversed .wrap {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}


.header-inner{
    margin:0 auto;
    width:100%;
    max-width:var(--wrapper-w);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:24px;
    height:100%;
    padding-left:12px;
    padding-right:12px;
    @media (max-width:680px){
        justify-content: center;
        flex-direction: column;
    }
}

.logo{display:flex;align-items:center;gap:12px}
.logo img{
    height:64px;
    width:auto;
    display:block;
    transition: 0.3s;
    @media (max-width:680px){
        height:40px;
        transition: 0.3s;
    }
}
.nav{
    margin-left:auto;
}

@media (max-width:680px){
    #siteHeader .nav {
        display: none;
    }
}
.nav ul{
    display:flex;gap:18px;list-style:none;margin:0;padding:0;
    position: relative;
    top: -3px;
}
.nav a{
    color: black;
    text-decoration: none;
    font-weight: 500;
    transition: 0.5s;
    font-size: 16px;
    font-family: times new roman;

    &:hover,
    &.active {
        transition: 0.5s;
        color: #ccc;
    }
}

/* header / logo */
.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--header-h);
    display:flex;
    align-items:center;
    z-index:60;
    pointer-events:auto;
    background: white;
    transition: 0.5s;
    @media (max-width:680px){
        height:calc(var(--header-h) - 20px);
    }
}
.site-header.hide{
    height:calc(var(--header-h) - 40px);
    transition: 0.5s;
    .logo img{
        height:40px;
        transition: 0.3s;
    }
    nav a {
        font-size: 14px;
    }
}


main{
    padding-top:var(--header-h - 40px);
    
    @media (max-width:680px){
        padding-top:calc(var(--header-h) - 60px);
    }
}

/* Hero / product section */
.section{
    position:relative;
    padding: 5vh 20px;
    min-height: calc(100vh - 10vh);
    overflow:hidden;
    display:flex;
    align-items:center;
    background:var(--bg);
}

/* background layer (image/video) */
.section .bg-layer{
    position:absolute;inset:0;z-index:0;overflow:hidden;
}
.bg-media{position:absolute;inset:-10%  -10%;height:120%;width:120%;object-fit:cover;transform:translateY(0);will-change:transform}
.bg-fallback{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.55) saturate(.95)}
.overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgb(128 128 128 / 12%), rgba(2, 6, 23, .55));
    z-index:1;
}

.section .wrap{
    position:relative;z-index:2;margin:0 auto;max-width:var(--wrapper-w);width:100%;display:flex;gap:40px;align-items:center;padding:60px 24px;
    @media (max-width:1040px){
        max-width: 680px;
    }
    @media (max-width:680px){
        padding: 40px 0px;
    }
}

.col{flex:1;min-width:260px}
.title {
    font-size: 20px;
    font-family: times new roma;
    font-style: italic;
    font-weight: 100;
    > span {
        font-style: normal;
        font-weight: 200;
        font-family: roboto;
    }
}
p.subtitle {
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.02;
    margin: 0 0 12px;
    text-transform: uppercase;
    font-weight: 500;
}
.lead {
    font-size: 14px;
    margin-bottom: 9px;
    font-weight: 300;
    strong {
        font-weight: 500;
    }
}
.meta{
    display:flex;
    gap:6px;
    align-items:center;
    @media (max-width:1180px){
        align-items: flex-start;
        flex-direction: column;
        margin-top: 16px;
    }
    @media (max-width:1040px){
        flex-direction: row;
        align-items:center;
    }
    @media (max-width:680px){
        align-items: flex-start;
        flex-direction: column;
        margin-top: 16px;
    }
}

.cta {
    display: inline-block;
    margin-top: 0;
    color: var(--golden);
    background: white;
    padding: 12px 18px;
    border-radius: 360px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.5s;

    &:hover,
    &.active {
        transition: 0.5s;
        background: var(--golden);
        color: black;
    }
    @media (max-width:680px){
        padding: 8px 14px;
        font-size: 14px;
    }
}


.vanilla_kiss_product {
    .cta {
        background: #fdabb7;
        color: black;
        &:hover,
        &.active {
            transition: 0.5s;
            background: #ed7a8b;
            color: black;
        }
    }
}
.santal_sea_product {
    .cta {
        background: #7fdfed;
        color: black;
        &:hover,
        &.active {
            transition: 0.5s;
            background: #4fb3c3;
            color: black;
        }
    }
}
.dark_chocolate_product {
    .cta {
        background: #ffffff;
        color: black;
        &:hover,
        &.active {
            transition: 0.5s;
            background: #cccccc;
            color: black;
        }
    }
}
.cacao_dream_product {
    .cta {
        background: #f3b1b2;
        color: black;
        &:hover,
        &.active {
            transition: 0.5s;
            background: #f08486;
            color: black;
        }
    }
}
.micellar_water_product {
    .cta {
        background: #80d6e3;
        color: black;
        &:hover,
        &.active {
            transition: 0.5s;
            background: #4ca3b1;
            color: black;
        }
    }
}
.peach_balm_product {
    .cta {
        background: #f3b1b2;
        color: black;
        &:hover,
        &.active {
            transition: 0.5s;
            background: #c2797a;
            color: black;
        }
    }
}
.spf_product {
    .cta {
        background: #fbaf11;
        color: black;
        &:hover,
        &.active {
            transition: 0.5s;
            background: #c48e1a;
            color: black;
        }
    }
}


.col-right{display:flex;justify-content:center;align-items:center}
.product-card {
    width: 100%;
    border-radius:4px;
    overflow: hidden;
    box-shadow: -16px 10px 60px rgb(0 0 0 / 24%);
    position: relative;
}
.product-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;display:block}

@media (max-width:1040px){
    .wrap{flex-direction:column;align-items:flex-start}
    .col-right{width:100%}
}

.muted{font-size:.95rem}

footer{
    padding:40px 20px 80px 20px;
    text-align:center;
    color: black;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 1rem;

    @media (max-width:680px){
        font-size: 10px;
    }

    .nav ul {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
        gap: 0;

        a {
            font-size: 12px;
            font-family: 'Roboto';
            font-weight: 300;
            text-transform: none;
        }

        li span.menu_sep_after {
            margin: 0 10px;
        }
    }

    .nav ul li:last-child .menu_sep_after {
        display: none;
    }
}
.logo-2 {
    margin-bottom: 10px;
}
.logo-2 img {
    width: 90px;
    @media (max-width:680px){
        height:40px;
    }
}