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; 
}

.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 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;
}


/* 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-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;
    max-width: 220px;
    height: auto;
    object-fit: contain;
}


/* NAVBAR LOGO */

.terra-navbar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.terra-navbar-logo:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

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


/* FOOTER LOGO */

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


/* MOBILE */

@media (max-width: 640px) {

    .terra-loader-logo {
        max-width: 170px;
    }

    .terra-navbar-logo img {
        width: 115px;
    }

    .terra-footer-logo {
        width: 170px;
    }
}