html.lenis { 
    height: auto; 
}
.lenis.lenis-smooth { 
    scroll-behavior: auto; 
}
.lenis.lenis-smooth [data-lenis-prevent] { 
    overscroll-behavior: contain; 
}
.lenis.lenis-stopped { 
    overflow: hidden; 
}
.lenis.lenis-scrolling iframe { 
    pointer-events: none; 
}
::-webkit-scrollbar { 
    width: 0px; 
    background: transparent; 
}

body { 
    background-color: #F9F8F4; 
    color: #2C2B29; 
    overflow-x: hidden; 
}

#horizontal-scroll {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
}

#horizontal-track {
    max-width: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    will-change: transform;
}

#horizontal-track:active {
    cursor: grabbing;
}

.img-wrap { 
    overflow: hidden; 
}
.img-wrap img { 
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}
.group:hover .img-wrap img { 
    transform: scale(1.08); 
}

#loader { 
    transition: opacity 1s ease, visibility 1s ease; 
}

#navbar {
    height: 100px;
    min-height: 100px;
}

/* Navbar solid state styling */
.nav-scrolled {
    background-color: #F9F8F4;
    color: #2C2B29 !important;
    border-bottom: 1px solid #E8E5DF;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.outline-text {
    color: transparent;
    -webkit-text-stroke: 1px #B5967E;
}
/* =========================================================
   TERRA HAVEN PRODUCT SYSTEM
   ========================================================= */


/* PRODUCT CARD IMAGE */

.product-image-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #E8E5DF;
    position: relative;
}


.product-main-image {
    transition:
        transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.product-card:hover .product-main-image {
    transform: scale(1.06);
}


/* HOVER BUTTON */

.product-hover-button {
    position: absolute;

    left: 50%;

    bottom: 1rem;

    transform:
        translateX(-50%)
        translateY(20px);

    width: 90%;

    opacity: 0;

    transition:
        all 0.45s ease;
}


.product-card:hover .product-hover-button {
    transform:
        translateX(-50%)
        translateY(0);

    opacity: 1;
}


/* IMAGE COUNT */

.image-count-badge {
    position: absolute;

    bottom: 12px;

    right: 12px;

    background: rgba(255,255,255,0.9);

    padding: 6px 10px;

    font-size: 10px;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: #2C2B29;
}


/* =========================================================
   MODALS
   ========================================================= */

.modal-open {
    overflow: hidden;
}


.product-modal-panel,
.category-modal-panel {
    position: relative;

    border: 1px solid #E8E5DF;
}

.oil-variety-editorial {
    border-bottom: 1px solid #E8E5DF;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    margin-bottom: 2.5rem;
    padding: 0 0 2.5rem;
}

.oil-variety-copy {
    align-self: center;
}

.terra-editorial-video {
    background: #2C2B29;
    display: block;
    height: auto;
    max-height: 42rem;
    object-fit: cover;
    width: 100%;
}

.oil-promo-section {
    background: #E8E5DF;
    padding: 6rem 1.5rem;
    position: relative;
}

.oil-promo-inner {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 7vw, 7rem);
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    margin: 0 auto;
    max-width: 80rem;
}

.oil-promo-video {
    max-height: 38rem;
}

@media (max-width: 767px) {
    .oil-variety-editorial,
    .oil-promo-inner {
        grid-template-columns: 1fr;
    }

    .oil-promo-section {
        padding: 4rem 1.5rem;
    }
}


/* PRODUCT DETAIL */

.product-detail-gallery {
    background: #E8E5DF;
    padding: 1rem;
}


.product-large-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #E8E5DF;
}


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

    height: 100%;

    object-fit: cover;

    display: block;
}


/* GALLERY ARROWS */

.gallery-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 42px;

    height: 42px;

    background: rgba(255,255,255,0.92);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #2C2B29;

    z-index: 5;

    transition:
        all 0.25s ease;
}


.gallery-arrow:hover {
    background: #B5967E;

    color: white;
}


.gallery-arrow-left {
    left: 16px;
}


.gallery-arrow-right {
    right: 16px;
}


/* THUMBNAILS */

.product-thumbnails {
    display: flex;

    gap: 10px;

    margin-top: 10px;

    overflow-x: auto;

    padding-bottom: 2px;
}


.product-thumbnail {
    width: 78px;

    height: 78px;

    flex-shrink: 0;

    overflow: hidden;

    border: 1px solid transparent;

    background: #F9F8F4;

    cursor: pointer;

    transition: all 0.25s ease;
}


.product-thumbnail img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.product-thumbnail.active {
    border-color: #B5967E;
}


/* PRODUCT INFO */

.product-detail-info {
    padding: 2rem;
}


@media (min-width: 768px) {

    .product-detail-info {
        padding: 4rem;
    }

}


/* OPTION BUTTON */

.option-button {
    border: 1px solid #D7D2CA;

    background: #F9F8F4;

    padding: 0.7rem 1.1rem;

    font-size: 0.75rem;

    letter-spacing: 0.05em;

    transition: all 0.25s ease;
}


.option-button:hover {
    border-color: #B5967E;
}


.option-button.selected {
    border-color: #B5967E;

    background: #B5967E;

    color: white;
}


/* QUANTITY */

.quantity-control {
    display: inline-flex;

    border: 1px solid #D7D2CA;

    align-items: center;
}


.quantity-control button {
    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;
}


.quantity-control button:hover {
    background: #E8E5DF;
}


.quantity-control span {
    width: 45px;

    text-align: center;

    font-size: 0.9rem;
}


/* =========================================================
   CART
   ========================================================= */

.cart-item {
    display: flex;

    gap: 14px;

    padding: 1rem 0;

    border-bottom: 1px solid #E8E5DF;

    position: relative;
}

.cart-summary {
    flex-shrink: 0;
    background: #F9F8F4;
}

.cart-item .quantity-control {
    border: 1px solid #E8E5DF;
    display: inline-flex;
    height: 30px;
}

.cart-quantity-button {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 30px;
}

.cart-quantity-button:hover {
    background: #E8E5DF;
}

.checkout-page {
    background: #F9F8F4;
    min-height: 100vh;
}

.checkout-panel {
    border: 1px solid #E8E5DF;
    background: rgba(255, 255, 255, 0.34);
}

.checkout-field {
    background: transparent;
    border: 1px solid #E8E5DF;
    padding: 0.8rem 0.9rem;
    width: 100%;
}

.checkout-field:focus {
    border-color: #B5967E;
    outline: none;
}

.checkout-field[aria-invalid="true"] {
    border-color: #B34D45;
}

.checkout-error {
    color: #B34D45;
    font-size: 0.75rem;
    min-height: 1rem;
}

.checkout-summary-item {
    border-bottom: 1px solid #E8E5DF;
    display: flex;
    gap: 0.9rem;
    padding: 1rem 0;
}

.checkout-summary-item img {
    flex: 0 0 64px;
    height: 64px;
    object-fit: cover;
    width: 64px;
}

@media (max-width: 640px) {
    #cart-drawer aside {
        max-width: none;
    }

    #cart-items {
        padding: 1.25rem;
    }

    .cart-summary {
        padding: 1.25rem;
    }
}


.cart-item img {
    width: 82px;

    height: 82px;

    object-fit: cover;

    flex-shrink: 0;
}


.remove-cart-item {
    position: absolute;

    top: 1rem;

    right: 0;

    font-size: 11px;

    color: rgba(44,43,41,0.5);

    transition: color 0.25s ease;
}


.remove-cart-item:hover {
    color: #B5967E;
}


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

@media (max-width: 640px) {

    .product-hover-button {
        position: relative;

        left: auto;

        bottom: auto;

        transform: none;

        opacity: 1;

        width: 100%;

        margin-top: 10px;
    }


    .product-hover-button button {
        width: 100%;
    }


    .product-detail-info {
        padding: 1.5rem;
    }


    .product-thumbnails {
        gap: 8px;
    }


    .product-thumbnail {
        width: 64px;

        height: 64px;
    }

}


/* =========================================================
   SMOOTH MODAL SCROLLBAR
   ========================================================= */

.product-modal-panel::-webkit-scrollbar,
.category-modal-panel::-webkit-scrollbar,
#cart-items::-webkit-scrollbar {
    width: 5px;
}


.product-modal-panel::-webkit-scrollbar-thumb,
.category-modal-panel::-webkit-scrollbar-thumb,
#cart-items::-webkit-scrollbar-thumb {
    background: #B5967E;
}


.product-modal-panel::-webkit-scrollbar-track,
.category-modal-panel::-webkit-scrollbar-track,
#cart-items::-webkit-scrollbar-track {
    background: #E8E5DF;
}
/* =========================================================
   MODAL / INTERNAL SCROLL FIX
   ========================================================= */

.category-modal-panel,
.product-modal-panel,
#cart-items {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}


/*
 * The category and product popups should receive
 * their own mouse-wheel / touchpad scrolling.
 */

.category-modal-panel,
.product-modal-panel {
    touch-action: pan-y;
}


/*
 * Prevent the popup from visually moving with
 * the background page.
 */

#category-modal,
#product-modal,
#cart-drawer {
    overscroll-behavior: contain;
}


/*
 * Keep the collection panel scrollable.
 */

.category-modal-panel {
    overflow-y: auto;
}


/*
 * Product details can also scroll independently.
 */

.product-modal-panel {
    overflow-y: auto;
}


/*
 * Cart items scroll independently.
 */

#cart-items {
    overflow-y: auto;
}
/* =========================================================
   TERRA HAVEN LOGO
   ========================================================= */


/* LOADING LOGO */

.terra-loader-logo {
    display: block;
    width: clamp(12rem, 22vw, 18rem);
    max-width: 85vw;
    height: auto;
    object-fit: contain;
}


/* NAVBAR LOGO */

.terra-navbar-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.terra-navbar-logo:hover {
    transform: translate(-50%, calc(-50% - 1px));
    opacity: 0.9;
}

.terra-navbar-right {
    margin-left: auto;
}

.terra-navbar-logo img {
    display: block;
    height: auto;
    object-fit: contain;
}

.terra-navbar-logo-img {
    width: clamp(9rem, 12vw, 11rem);
    max-width: 28vw;
    height: auto;
    display: block;
}


/* FOOTER LOGO */

.terra-footer-logo {
    display: block;
    width: clamp(12rem, 20vw, 16rem);
    max-width: 85vw;
    height: auto;
    object-fit: contain;
}


/* MOBILE */

@media (max-width: 640px) {

    .terra-loader-logo {
        width: min(13rem, 70vw);
    }

    .terra-footer-logo {
        width: min(13rem, 70vw);
    }
}

@media (max-width: 767px) {

    #navbar {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .terra-navbar-left,
    .terra-navbar-right {
        gap: 0.45rem;
        white-space: nowrap;
    }

    .terra-navbar-logo-img {
        width: min(6rem, 24vw);
        max-width: 24vw;
    }
}