/* ==================================================
   1. BASIC RESET
================================================== */

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


/* Smooth scrolling when clicking navigation links */

html {
    scroll-behavior: smooth;
}


/* ==================================================
   2. ENTIRE WEBSITE
================================================== */

body {
    background-color: #ffffff;

    color: #111111;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-weight: 400;
}



/* ==================================================
   3. NAVIGATION
================================================== */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 25px 35px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 100;

    background-color: #ffffff;
}


/* HeeTheOne */

.logo {
    font-size: 18px;

    font-weight: 500;

    letter-spacing: 0px;

    text-decoration: none;

    color: inherit;
}


/* PRODUCT / LOOKS container */

.nav-links {
    display: flex;

    gap: 30px;
}


/* Navigation text */

.nav-links a {
    color: inherit;

    text-decoration: none;

    font-size: 11px;

    font-weight: 400;

    letter-spacing: 0.5px;

    transition: opacity 0.3s ease;
}


/* Navigation hover */

.nav-links a:hover {
    opacity: 0.5;
}



/* ==================================================
   4. HERO / HOME PAGE
================================================== */

.hero {
    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;
}


/* SOHEE'S WARDROBE */

.hero h1 {
    font-size: clamp(40px, 6vw, 120px);

    font-weight: 500;

    letter-spacing: 0em;

    line-height: 0.9;
}


/* VIEW LOOKS */

.view-button {
    display: inline-block;

    margin-top: 35px;

    color: inherit;

    text-decoration: none;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 1px;

    border-bottom: 1px solid currentColor;

    padding-bottom: 4px;

    transition: opacity 0.3s ease;
}


/* VIEW LOOKS hover */

.view-button:hover {
    opacity: 0.5;
}



/* ==================================================
   5. LOOKS SECTION
================================================== */

.looks {
    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;
}



/* ==================================================
   6. LOOK CAROUSEL
================================================== */

.look-carousel {
    width: 100%;

    display: flex;

    align-items: center;

    overflow: hidden;

    cursor: grab;

    touch-action: pan-y;
}


/* Cursor while dragging */

.look-carousel.dragging {
    cursor: grabbing;
}



/* ==================================================
   7. LOOK TRACK
================================================== */

.look-track {
    display: flex;

    align-items: center;

    /*
    CHANGE THIS VALUE
    to control space between images
    */

    gap: 30px;

    width: max-content;

    will-change: transform;

    user-select: none;
}



/* ==================================================
   8. INDIVIDUAL LOOK
================================================== */

.look {
    /*
    CHANGE THIS VALUE
    to control image width
    */

    flex: 0 0 18vw;
}



/* ==================================================
   9. LOOK IMAGE
================================================== */

.look-image {
    width: 100%;

    /*
    Image ratio:
    width : height = 9 : 16
    */

    aspect-ratio: 9 / 16;

    overflow: hidden;
}


/* Actual image */

.look-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    display: block;

    pointer-events: none;

    transition: transform 0.6s ease;
}



/* ==================================================
   10. IMAGE HOVER
================================================== */

.look:hover .look-image img {
    transform: scale(1.025);
}


/* Remove zoom while dragging */

.look-carousel.dragging .look-image img {
    transform: scale(1);
}





/* ==================================================
   12. MOBILE
================================================== */

@media (max-width: 768px) {

    /* =========================
       NAVIGATION
    ========================= */

    .navbar {
        padding: 20px 18px;
    }


    .logo {
        font-size: 16px;
    }


    .nav-links {
        gap: 14px;
    }


    .nav-links a {
        font-size: 10px;
        letter-spacing: 0.3px;
    }



    /* =========================
       HERO
    ========================= */

    .hero {
        padding: 0 18px;
    }


    .hero h1 {
        font-size: 12vw;

        font-weight: 500;

        letter-spacing: 0;

        line-height: 0.95;
    }


    .view-button {
        margin-top: 28px;

        font-size: 9px;
    }



    /* =========================
       LOOKS
    ========================= */

    .look {
        flex: 0 0 42vw;
    }


    .look-track {
        gap: 15px;
    }


    }






/* ==================================================
   13. LOOKBOOK PAGE
================================================== */

.lookbook-page {
    width: 100%;

    padding: 120px 35px 80px;
}


/* =========================
   LOOKBOOK GRID
========================= */

.lookbook-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 50px 50px;

    /*
    Controls the overall width
    of the Lookbook.

    Smaller value = smaller images
    */

    max-width: 1100px;

    margin: 0 auto;
}


/* =========================
   INDIVIDUAL LOOK
========================= */

.lookbook-item {
    display: block;

    width: 100%;

    text-decoration: none;

    color: inherit;

    overflow: hidden;
}


/* =========================
   LOOKBOOK IMAGE
========================= */

.lookbook-item img {
    width: 100%;

    /*
    All images on the LOOKS page
    use a 3:4 ratio.
    */

    aspect-ratio: 3 / 4;

    object-fit: cover;

    object-position: center center;

    display: block;

    transition:
        transform 0.6s ease;
}


/* =========================
   IMAGE HOVER
========================= */

.lookbook-item:hover img {
    transform: scale(1.02);
}



/* ==================================================
   14. LOOKBOOK MOBILE
================================================== */

@media (max-width: 768px) {


    .lookbook-page {
        padding:
            90px
            18px
            50px;
    }


    .lookbook-grid {

        /*
        Mobile stays as
        a two-column layout.
        */

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            20px
            20px;

        /*
        On mobile the grid can
        use the available width.
        */

        max-width: none;

        margin: 0;
    }


}


/* ==================================================
   15. LOOK DETAIL PAGE
================================================== */

.look-detail-page {
    width: 100%;

    min-height: 100vh;

    /*
    Move the whole detail page upward.
    */

    padding: 85px 35px 60px;
}


/* =========================
   BACK
========================= */

.look-detail-back {
    display: inline-block;

    color: inherit;

    text-decoration: none;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.5px;

    /*
    Space between BACK
    and the main content.
    */

    margin-bottom: 25px;

    transition: opacity 0.3s ease;
}


.look-detail-back:hover {
    opacity: 0.5;
}



/* =========================
   MAIN CONTENT
========================= */

.look-detail-content {
    width: 100%;

    /*
    Wider than before so the
    product area can be larger.
    */

    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    /*
    Give the product side
    more horizontal space.
    */

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 70px;

    /*
    Image and LOOK title
    start at the same height.
    */

    align-items: start;
}



/* =========================
   MAIN LOOK IMAGE
========================= */

.look-detail-image {
    width: 100%;

    max-width: 450px;

    /*
    Left aligned.
    No additional upward offset
    is needed anymore.
    */

    margin: 0 auto 0 0;

    overflow: hidden;
}


.look-detail-image img {
    width: 100%;

    aspect-ratio: 3 / 4;

    object-fit: cover;

    object-position: center center;

    display: block;
}



/* =========================
   PRODUCT AREA
========================= */

.look-detail-info {
    width: 100%;
}


/* LOOK TITLE / DATE */

.look-detail-info h1 {
    font-size: 18px;

    font-weight: 500;

    letter-spacing: 0;

    text-align: center;

    /*
    h1 has no top margin,
    so its top aligns with
    the main image.
    */

    margin: 0 0 30px;
}



/* =========================
   PRODUCT GRID
========================= */

.look-product-grid {
    width: 100%;

    display: grid;

    /*
    Desktop:
    three products per row.
    */

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        45px
        25px;
}



/* =========================
   PRODUCT CARD
========================= */

.look-product-card {
    display: block;

    width: 100%;

    color: inherit;

    text-decoration: none;
}



/* =========================
   PRODUCT IMAGE
========================= */

.look-product-image {
    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    margin-bottom: 15px;
}


.look-product-image img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center center;

    display: block;

    transition: transform 0.5s ease;
}



/* =========================
   PRODUCT TEXT
========================= */

.look-product-text {
    text-align: center;
}


.look-product-text h2 {
    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.3px;

    line-height: 1.2;

    margin-bottom: 6px;
}


.look-product-text p {
    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.2px;

    line-height: 1.3;
}



/* =========================
   PRODUCT HOVER
========================= */

.look-product-card:hover
.look-product-image img {
    transform: scale(1.025);
}


.look-product-card:hover
.look-product-text {
    opacity: 0.6;
}



/* ==================================================
   16. LOOK DETAIL MOBILE
================================================== */

@media (max-width: 768px) {


    .look-detail-page {

        /*
        Move the whole mobile
        detail page upward.
        */

        padding:
            70px
            18px
            50px;
    }


    /* =========================
       BACK
    ========================= */

    .look-detail-back {
        font-size: 9px;

        margin-bottom: 20px;
    }


    /* =========================
       MAIN CONTENT
    ========================= */

    .look-detail-content {
        display: block;

        max-width: none;
    }


    /* =========================
       MAIN LOOK IMAGE
    ========================= */

    .look-detail-image {

        /*
        Keep current mobile
        image size unchanged.
        */

        width: 65%;

        max-width: none;

        margin: 0 auto;
    }


    /* =========================
       PRODUCT AREA
    ========================= */

    .look-detail-info {
        width: 100%;

        /*
        Reduced from 50px.
        LOOK title/date is now
        closer to the main image.
        */

        margin-top: 25px;
    }


    /* LOOK TITLE / DATE */

    .look-detail-info h1 {
        font-size: 14px;

        text-align: center;

        margin:
            0
            0
            35px;
    }


    /* =========================
       PRODUCT GRID
    ========================= */

    .look-product-grid {

        /*
        Keep mobile products
        exactly two per row.
        */

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            40px
            20px;
    }


    /* =========================
       PRODUCT IMAGE
    ========================= */

    .look-product-image {
        margin-bottom: 12px;
    }


    /* =========================
       PRODUCT TEXT
    ========================= */

    .look-product-text h2 {
        font-size: 10px;

        margin-bottom: 5px;
    }


    .look-product-text p {
        font-size: 9px;
    }


}


/* ==================================================
   17. PRODUCT PAGE
================================================== */

.product-page {
    width: 100%;

    min-height: 100vh;

    padding:
        85px
        35px
        80px;
}



/* =========================
   BACK
========================= */

.product-back {
    display: inline-block;

    color: inherit;

    text-decoration: none;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.5px;

    margin-bottom: 45px;

    transition: opacity 0.3s ease;
}


.product-back:hover {
    opacity: 0.5;
}



/* =========================
   FILTER
========================= */

.product-filter {
    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    margin-bottom: 65px;
}


.product-filter-button {
    appearance: none;

    border: none;

    background: none;

    padding: 0;

    color: inherit;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.5px;

    cursor: pointer;

    opacity: 0.45;

    transition:
        opacity 0.3s ease;
}


.product-filter-button:hover {
    opacity: 1;
}


.product-filter-button.active {
    opacity: 1;
}



/* =========================
   PRODUCT GRID
========================= */

.product-grid {
    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    /*
    Desktop:
    four products per row.
    */

    grid-template-columns:
        repeat(4, 1fr);

    /*
    Generous spacing between
    products.
    */

    gap:
        75px
        45px;
}



/* =========================
   PRODUCT CARD
========================= */

.product-card {
    display: block;

    width: 100%;

    color: inherit;

    text-decoration: none;
}


.product-card.hidden {
    display: none;
}



/* =========================
   PRODUCT IMAGE
========================= */

.product-image {
    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    margin-bottom: 18px;
}


.product-image img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center center;

    display: block;

    transition:
        transform 0.5s ease;
}



/* =========================
   PRODUCT INFORMATION
========================= */

.product-info {
    text-align: center;
}


.product-info h2 {
    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.3px;

    line-height: 1.2;

    margin-bottom: 6px;
}


.product-info p {
    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.2px;

    line-height: 1.3;
}



/* =========================
   PRODUCT HOVER
========================= */

.product-card:hover
.product-image img {
    transform: scale(1.025);
}


.product-card:hover
.product-info {
    opacity: 0.6;
}



/* ==================================================
   18. PRODUCT PAGE MOBILE
================================================== */

@media (max-width: 768px) {


    .product-page {
        padding:
            70px
            18px
            50px;
    }


    /* =========================
       BACK
    ========================= */

    .product-back {
        font-size: 9px;

        margin-bottom: 35px;
    }


    /* =========================
       FILTER
    ========================= */

    .product-filter {
    justify-content: center;

    flex-wrap: wrap;

    gap:
        18px
        35px;

    margin-bottom: 45px;

    text-align: center;
}


    .product-filter-button {
        font-size: 9px;

        letter-spacing: 0.3px;
    }


    /* =========================
       PRODUCT GRID
    ========================= */

    .product-grid {

        /*
        Mobile:
        two products per row.
        */

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            45px
            20px;

        max-width: none;
    }


    /* =========================
       PRODUCT IMAGE
    ========================= */

    .product-image {
        margin-bottom: 12px;
    }


    /* =========================
       PRODUCT INFORMATION
    ========================= */

    .product-info h2 {
        font-size: 10px;

        margin-bottom: 5px;
    }


    .product-info p {
        font-size: 9px;
    }


}


/* ==================================================
   19. PRODUCT DETAIL PAGE
================================================== */

.product-detail-page {
    width: 100%;
    min-height: 100vh;

    padding:
        85px
        35px
        60px;
}



/* =========================
   BACK
========================= */

.product-detail-back {
    display: inline-block;

    color: inherit;

    text-decoration: none;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.5px;

    margin-bottom: 25px;

    transition: opacity 0.3s ease;
}


.product-detail-back:hover {
    opacity: 0.5;
}



/* =========================
   PRODUCT CONTENT
========================= */

.product-detail-content {
    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    display: block;
}



/* =========================
   PRODUCT IMAGE
========================= */

.product-detail-image {
    width: 100%;

    max-width: 500px;

    margin: 0 auto;
}


.product-detail-image img {
    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: contain;

    object-position: center center;

    display: block;
}



/* =========================
   PRODUCT INFORMATION
========================= */

.product-detail-info {
    width: 100%;

    max-width: 500px;

    margin:
        25px
        auto
        0;

    text-align: center;
}


.product-detail-info h1 {
    font-size: 18px;

    font-weight: 500;

    letter-spacing: 0.3px;

    line-height: 1.2;

    margin-bottom: 8px;
}


.product-detail-info p {
    font-size: 14px;

    font-weight: 400;

    letter-spacing: 0.2px;

    line-height: 1.4;
}



/* ==================================================
   20. PRODUCT DETAIL MOBILE
================================================== */

@media (max-width: 768px) {


    .product-detail-page {
        padding:
            70px
            18px
            50px;
    }


    /* BACK */

    .product-detail-back {
        font-size: 9px;

        margin-bottom: 25px;
    }


    /* PRODUCT CONTENT */

    .product-detail-content {
    width: 100%;

    max-width: none;

    margin-top: 50px;
}


    /* PRODUCT IMAGE */

    .product-detail-image {
        width: 75%;

        max-width: none;

        margin: 0 auto;
    }


    /* PRODUCT INFORMATION */

    .product-detail-info {
        width: 75%;

        max-width: none;

        margin:
            25px
            auto
            0;

        text-align: center;
    }


    .product-detail-info h1 {
        font-size: 16px;

        margin-bottom: 7px;
    }


    .product-detail-info p {
        font-size: 12px;
    }


}


/* ==================================================
   21. SEARCH
================================================== */


/* =========================
   PRODUCT SEARCH
========================= */

.product-search {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom: 35px;
}


.product-search input {
    width: 240px;

    padding:
        8px
        0;

    border: none;

    border-bottom:
        1px solid #111111;

    outline: none;

    background: transparent;

    color: #111111;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.5px;

    text-align: center;

    border-radius: 0;
}


.product-search input::placeholder {
    color: #111111;

    opacity: 0.45;
}


.product-search input::-webkit-search-cancel-button {
    appearance: none;
}



/* =========================
   LOOKS SEARCH
========================= */

.looks-search {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom: 55px;
}


.looks-search input {
    width: 240px;

    padding:
        8px
        0;

    border: none;

    border-bottom:
        1px solid #111111;

    outline: none;

    background: transparent;

    color: #111111;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.5px;

    text-align: center;

    border-radius: 0;
}


.looks-search input::placeholder {
    color: #111111;

    opacity: 0.45;
}


.looks-search input::-webkit-search-cancel-button {
    appearance: none;
}



/* =========================
   HIDDEN SEARCH RESULTS
========================= */

.lookbook-item.hidden {
    display: none;
}



/* ==================================================
   22. SEARCH MOBILE
================================================== */

@media (max-width: 768px) {


    .product-search {
        margin-bottom: 30px;
    }


    .product-search input {
        width: 190px;

        font-size: 9px;
    }


    .looks-search {
        margin-bottom: 40px;
    }


    .looks-search input {
        width: 190px;

        font-size: 9px;
    }


}


/* ==================================================
   23. STICKY PAGE CONTROLS
================================================== */


/* ==================================================
   PRODUCT STICKY CONTROLS
================================================== */

.product-controls {
    position: fixed;

    top: 65px;
    left: 0;

    z-index: 90;

    width: 100%;

    background-color: #ffffff;

    padding:
        20px
        35px
        25px;
}


.product-controls .product-back {
    margin-bottom: 25px;
}


.product-controls .product-search {
    margin-bottom: 30px;
}


.product-controls .product-filter {
    margin-bottom: 0;
}


.product-page {
    padding-top: 85px;
}


.product-grid {
    margin-top: 175px;
}


/* BACK */

.product-controls .product-back {
    margin-bottom: 25px;
}


/* SEARCH */

.product-controls .product-search {
    margin-bottom: 30px;
}


/* FILTER */

.product-controls .product-filter {
    margin-bottom: 0;
}



/* ==================================================
   LOOKS STICKY CONTROLS
================================================== */

.looks-controls {
    position: fixed;

    top: 65px;
    left: 0;

    z-index: 90;

    width: 100%;

    background-color: #ffffff;

    padding:
        20px
        35px
        25px;
}


.looks-controls .looks-search {
    margin-bottom: 0;
}


.lookbook-grid {
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
}


/* SEARCH */

.looks-controls .looks-search {
    margin-bottom: 0;
}



/* ==================================================
   STICKY CONTROLS MOBILE
================================================== */

@media (max-width: 768px) {


    /* =========================
       NAVBAR
    ========================= */

    .navbar {
        background-color: #ffffff;
    }



    /* =========================
       PRODUCT CONTROLS
    ========================= */

    .product-controls {
        top: 55px;

        padding:
            15px
            18px
            20px;
    }


    .product-controls .product-back {
        margin-bottom: 20px;
    }


    .product-controls .product-search {
        margin-bottom: 25px;
    }


    .product-controls .product-filter {
        margin-bottom: 0;
    }


    .product-grid {
        margin-top: 175px;
    }



    /* =========================
       LOOKS CONTROLS
    ========================= */

    .looks-controls {
        top: 55px;

        padding:
            15px
            18px
            20px;
    }


    .looks-controls .looks-search {
        margin-bottom: 0;
    }


    .lookbook-grid {
        margin-top: 65px;

        margin-left: 0;

        margin-right: 0;
    }


}


/* ==================================================
   BRAND NAME SIZE
================================================== */


/* PRODUCT PAGE + LOOK DETAIL */

.product-info h2,
.look-product-text h2 {
    font-size: 14px;
}


/* PRODUCT DETAIL */

.product-detail-info h1 {
    font-size: 20px;
}



/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .product-info h2,
    .look-product-text h2 {
        font-size: 12px;
    }

    .product-detail-info h1 {
        font-size: 18px;
    }

}