* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background: #0b0b0d;
    color: #f5f5f5;
}

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

button {
    font: inherit;
}

.container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}


/* HEADER */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
    min-height: 82px;

    display: flex;
    align-items: center;
    gap: 40px;
}

.logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 5px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;

    margin-left: auto;
}

.main-nav a {
    font-size: 13px;
    color: #c9c9cd;
    transition: 0.2s;
}

.main-nav a:hover {
    color: #ffffff;
}

.header-actions {
    display: flex;
    gap: 8px;
}

.header-actions button {
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    padding: 8px;
}

.menu-toggle {
    display: none;

    margin-left: auto;

    background: transparent;
    color: #fff;

    border: 0;

    font-size: 24px;
}


/* HERO */

.hero {
    min-height: 760px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(117, 92, 255, 0.22),
            transparent 33%
        ),
        radial-gradient(
            circle at 60% 100%,
            rgba(255, 255, 255, 0.06),
            transparent 30%
        ),
        #0b0b0d;
}

.hero-content {
    padding-top: 80px;
}

.eyebrow {
    margin: 0 0 20px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #8f84ff;
}

.hero h1 {
    max-width: 820px;

    margin: 0;

    font-size: clamp(
        52px,
        7vw,
        104px
    );

    line-height: 0.95;
    letter-spacing: -5px;
}

.hero h1 span {
    color: #88888e;
}

.hero-description {
    max-width: 540px;

    margin: 32px 0;

    color: #aaaab0;

    font-size: 18px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 12px;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 52px;

    padding: 0 24px;

    border-radius: 4px;

    font-size: 14px;
    font-weight: 700;
}

.button-primary {
    background: #ffffff;
    color: #111111;
}

.button-secondary {
    border:
        1px solid rgba(255, 255, 255, 0.18);

    color: #ffffff;
}


/* SECTIONS */

.section {
    padding: 110px 0;
}

.section-dark {
    background: #111114;
}

.section-heading {
    margin-bottom: 46px;
}

.section-heading h2 {
    margin: 0;

    font-size: clamp(
        38px,
        5vw,
        64px
    );

    letter-spacing: -2px;
}


/* CATEGORIES */

.category-grid {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);

    gap: 16px;
}

.category-card {
    min-height: 240px;

    padding: 28px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #111114;

    transition:
        transform 0.25s,
        border-color 0.25s;
}

.category-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(143, 132, 255, 0.6);
}

.category-number {
    font-size: 11px;
    letter-spacing: 2px;

    color: #77777d;
}

.category-card h3 {
    margin: 0 0 10px;

    font-size: 28px;
}

.category-card p {
    max-width: 380px;

    margin: 0;

    color: #88888e;

    line-height: 1.6;
}

.category-arrow {
    align-self: flex-end;

    font-size: 28px;
}


/* PRODUCTS */

.product-grid {
    display: grid;

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

    gap: 20px;
}

.product-card {
    background: #17171b;
}

.product-image {
    aspect-ratio: 1 / 1.05;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle,
            #33333a,
            #18181c 70%
        );

    color: #6f6f77;

    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.product-info {
    padding: 22px;
}

.product-category {
    margin:
        0 0 8px;

    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    color: #77777f;
}

.product-info h3 {
    margin: 0;

    font-size: 20px;
}

.product-bottom {
    margin-top: 22px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-price {
    font-size: 18px;
    font-weight: 700;
}

.old-price {
    margin-right: 7px;

    text-decoration: line-through;

    color: #707078;

    font-size: 13px;
}

.stock {
    font-size: 11px;

    color: #9b9ba2;
}


/* FOOTER */

.site-footer {
    padding: 70px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    color: #88888e;
}

.footer-logo {
    margin-bottom: 20px;

    color: #ffffff;

    font-weight: 800;
    letter-spacing: 5px;
}

.copyright {
    margin-top: 40px;

    font-size: 12px;
}


/* 404 */

.error-page {
    min-height: 80vh;

    display: flex;
    align-items: center;

    padding: 140px 0;
}

.error-code {
    margin: 0;

    font-size: 120px;
    font-weight: 800;

    color: #24242a;
}

.error-page h1 {
    max-width: 700px;

    font-size: 52px;
}


/* RESPONSIVE */

@media (max-width: 960px) {

    .main-nav {
        display: none;

        position: absolute;

        top: 82px;
        left: 20px;
        right: 20px;

        padding: 25px;

        background: #151518;

        flex-direction: column;
        align-items: flex-start;
    }

    .main-nav.is-open {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    .header-actions {
        display: none;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .container {
        width:
            min(100% - 28px, 1240px);
    }

    .hero {
        min-height: 680px;
    }

    .hero h1 {
        letter-spacing: -3px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .section {
        padding: 75px 0;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   STAGE 2 SHOP STYLES
   ========================================================= */


/* SHOP HERO */

.shop-hero {
    padding: 180px 0 85px;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(117, 92, 255, 0.18),
            transparent 35%
        ),
        #0b0b0d;

    border-bottom:
        1px solid rgba(
            255,
            255,
            255,
            0.07
        );
}

.shop-hero h1 {
    margin: 0;

    font-size: clamp(
        58px,
        7vw,
        98px
    );

    line-height: 0.95;

    letter-spacing: -5px;
}

.shop-intro {
    max-width: 580px;

    margin-top: 28px;

    color: #929299;

    font-size: 17px;

    line-height: 1.7;
}


/* SHOP */

.shop-section {
    padding: 45px 0 120px;

    background: #111114;
}

.shop-toolbar {
    margin-bottom: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    color: #85858d;

    font-size: 13px;
}

.shop-toolbar strong {
    color: #fff;
}

.sort-form {
    display: flex;

    align-items: center;

    gap: 12px;
}

.sort-form label {
    font-size: 12px;

    color: #77777f;
}

.sort-form select {
    min-width: 210px;

    padding: 13px 42px 13px 15px;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 3px;

    outline: none;

    background: #17171b;

    color: #fff;

    cursor: pointer;
}

.shop-product-grid {
    align-items: stretch;
}


/* PRODUCT CARD */

.product-card {
    position: relative;

    overflow: hidden;
}

.product-image {
    position: relative;

    overflow: hidden;

    transition: 0.3s;
}

.product-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.2),
            transparent 40%
        );

    opacity: 0;

    transition: 0.3s;
}

.product-card:hover .product-image::after {
    opacity: 1;
}

.product-image-placeholder {
    width: 110px;

    height: 110px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 50%;

    font-size: 42px;

    font-weight: 700;

    color: rgba(
        255,
        255,
        255,
        0.16
    );
}

.sale-badge {
    position: absolute;

    top: 18px;

    left: 18px;

    padding: 7px 10px;

    z-index: 2;

    background: #fff;

    color: #111;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;
}

.stock.in_stock {
    color: #b2b2b8;
}

.stock.pre_order {
    color: #d5c58e;
}

.stock.out_of_stock {
    color: #77777d;
}


/* PAGINATION */

.pagination {
    margin-top: 65px;

    min-height: 50px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 20px;
}

.pagination > div:last-child {
    text-align: right;
}

.pagination-nav {
    color: #aaaab1;

    font-size: 13px;
}

.pagination-pages {
    display: flex;

    align-items: center;

    gap: 7px;
}

.pagination-pages a {
    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.11
        );

    font-size: 12px;

    color: #aaaab2;
}

.pagination-pages a.active {
    border-color: #fff;

    background: #fff;

    color: #111;
}


/* EMPTY */

.empty-state {
    padding: 100px 20px;

    text-align: center;
}

.empty-state h2 {
    margin-bottom: 10px;

    font-size: 38px;
}

.empty-state p {
    margin-bottom: 30px;

    color: #818188;
}


/* PRODUCT PAGE */

.product-page {
    min-height: 100vh;

    padding: 140px 0 120px;

    background: #0d0d10;
}

.back-to-shop {
    display: inline-block;

    margin-bottom: 35px;

    color: #888890;

    font-size: 13px;
}

.back-to-shop:hover {
    color: #fff;
}

.product-layout {
    display: grid;

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

    gap: 80px;

    align-items: start;
}

.product-main-image {
    aspect-ratio: 1 / 1;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            #34343e,
            #18181d 67%
        );

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.06
        );
}

.product-main-image::before {
    content: "";

    position: absolute;

    width: 55%;

    height: 55%;

    border-radius: 50%;

    background:
        rgba(
            126,
            111,
            255,
            0.09
        );

    filter: blur(60px);
}

.product-page-placeholder {
    position: relative;

    z-index: 2;

    width: 180px;

    height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 50%;

    color: rgba(
        255,
        255,
        255,
        0.15
    );

    font-size: 72px;

    font-weight: 800;
}

.product-details {
    padding-top: 25px;
}

.product-details h1 {
    margin: 0 0 18px;

    font-size: clamp(
        46px,
        5vw,
        72px
    );

    line-height: 0.98;

    letter-spacing: -4px;
}

.product-sku {
    margin: 0;

    color: #686870;

    font-size: 11px;

    letter-spacing: 1px;
}

.product-page-price {
    margin: 38px 0 18px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 30px;

    font-weight: 700;
}

.product-page-price .old-price {
    font-size: 16px;
}

.product-stock-status {
    margin-bottom: 32px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #a2a2a9;

    font-size: 13px;
}

.status-dot {
    width: 7px;

    height: 7px;

    display: inline-block;

    border-radius: 50%;

    background: #d8d8dc;
}

.quantity-row {
    margin-bottom: 14px;
}

.quantity-row label {
    display: block;

    margin-bottom: 9px;

    color: #787880;

    font-size: 11px;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}

.quantity-row input {
    width: 100px;

    height: 50px;

    padding: 0 14px;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.13
        );

    border-radius: 3px;

    outline: none;

    background: #17171b;

    color: #fff;

    font-size: 14px;
}

.add-cart-button {
    width: 100%;

    margin-top: 3px;

    border: 0;

    cursor: pointer;
}

.sold-out-button {
    width: 100%;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.1
        );

    background: #17171b;

    color: #77777f;

    cursor: not-allowed;
}

.product-description {
    margin-top: 48px;

    padding-top: 28px;

    border-top:
        1px solid rgba(
            255,
            255,
            255,
            0.08
        );
}

.product-description h2 {
    margin:
        0
        0
        14px;

    font-size: 16px;
}

.product-description p {
    margin: 0;

    color: #8d8d95;

    line-height: 1.8;

    font-size: 14px;
}

.product-meta {
    margin-top: 32px;

    border-top:
        1px solid rgba(
            255,
            255,
            255,
            0.08
        );
}

.product-meta > div {
    padding: 15px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid rgba(
            255,
            255,
            255,
            0.08
        );
}

.product-meta span {
    color: #707078;

    font-size: 12px;
}

.product-meta strong {
    font-size: 12px;

    font-weight: 500;

    color: #b5b5ba;
}


/* RESPONSIVE STAGE 2 */

@media (max-width: 950px) {

    .product-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .product-details {
        padding-top: 0;
    }

}


@media (max-width: 600px) {

    .shop-hero {
        padding:
            145px
            0
            60px;
    }

    .shop-hero h1 {
        letter-spacing: -3px;
    }

    .shop-toolbar {
        align-items: flex-start;

        flex-direction: column;
    }

    .sort-form {
        width: 100%;

        align-items: flex-start;

        flex-direction: column;
    }

    .sort-form select {
        width: 100%;
    }

    .pagination {
        grid-template-columns: 1fr;

        justify-items: center;
    }

    .pagination > div:last-child {
        text-align: center;
    }

    .product-page {
        padding:
            120px
            0
            80px;
    }

    .product-details h1 {
        letter-spacing: -2px;
    }

}



/* =========================================================
   STAGE 3 - FILTERS AND PRODUCT DETAILS
   ========================================================= */

.header-action {
    color: #fff;
    font-size: 14px;
}

.shop-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 42px;
    align-items: start;
}

.shop-sidebar {
    position: sticky;
    top: 25px;
}

.filter-form {
    border:
        1px solid
        rgba(255,255,255,0.08);

    background: #141417;
}

.filter-header {
    padding: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);
}

.filter-header h2 {
    margin: 0;

    font-size: 16px;
}

.clear-filters {
    color: #74747c;
    font-size: 11px;
}

.clear-filters:hover {
    color: #fff;
}

.filter-group {
    padding: 20px 22px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);
}

.filter-title {
    display: block;

    margin-bottom: 12px;

    color: #85858e;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.filter-group select,
.search-field input,
.price-fields input {
    width: 100%;

    height: 43px;

    border:
        1px solid
        rgba(255,255,255,0.11);

    border-radius: 2px;

    outline: none;

    background: #101013;

    color: #fff;

    padding: 0 12px;

    font-size: 12px;
}

.filter-group select:focus,
.search-field input:focus,
.price-fields input:focus {
    border-color:
        rgba(255,255,255,0.4);
}

.search-field {
    position: relative;
}

.search-field input {
    padding-right: 46px;
}

.search-field button {
    width: 42px;

    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;

    border: 0;

    background: transparent;

    color: #fff;

    cursor: pointer;
}

.price-fields {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;
}

.price-fields > div {
    position: relative;
}

.price-fields span {
    position: absolute;

    top: 50%;
    left: 11px;

    transform:
        translateY(-50%);

    color: #66666e;

    font-size: 11px;
}

.price-fields input {
    padding-left: 25px;
}

.filter-button {
    width:
        calc(100% - 44px);

    height: 46px;

    margin: 20px 22px;

    border: 0;

    border-radius: 2px;

    background: #fff;

    color: #111;

    font-weight: 700;

    cursor: pointer;
}

.filter-button:hover {
    opacity: 0.9;
}

.shop-main {
    min-width: 0;
}

.shop-main .shop-product-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.active-filters {
    margin: -8px 0 24px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.active-filters span {
    padding: 7px 10px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    color: #85858d;

    font-size: 10px;
}

.active-filters strong {
    color: #c5c5ca;
}

.breadcrumbs {
    margin-bottom: 35px;

    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    color: #65656d;

    font-size: 11px;
}

.breadcrumbs a:hover {
    color: #fff;
}

.product-short-description {
    max-width: 520px;

    color: #929299;

    font-size: 15px;

    line-height: 1.7;
}

.product-content-section {
    margin-top: 110px;

    padding:
        65px 0;

    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 80px;

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);
}

.product-content-section h2 {
    margin: 0;

    font-size:
        clamp(38px, 4vw, 58px);

    letter-spacing: -2px;
}

.product-content-section > p {
    margin: 0;

    max-width: 700px;

    color: #96969e;

    font-size: 16px;

    line-height: 1.9;
}

.product-specifications {
    padding: 80px 0;
}

.product-specifications h2 {
    margin: 0 0 38px;

    font-size: 42px;

    letter-spacing: -2px;
}

.specifications-grid {
    display: grid;

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

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    border-left:
        1px solid
        rgba(255,255,255,0.08);
}

.specifications-grid > div {
    min-height: 110px;

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right:
        1px solid
        rgba(255,255,255,0.08);

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);
}

.specifications-grid span {
    color: #66666e;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}

.specifications-grid strong {
    font-size: 18px;
}

.related-products {
    padding: 60px 0 100px;

    border-top:
        1px solid
        rgba(255,255,255,0.08);
}

.related-products .product-grid {
    grid-template-columns:
        repeat(4, 1fr);
}


@media (max-width: 1100px) {

    .shop-layout {
        grid-template-columns:
            220px minmax(0,1fr);

        gap: 25px;
    }

    .shop-main .shop-product-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .related-products .product-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 800px) {

    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        position: static;
    }

    .product-content-section {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .specifications-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .shop-main .shop-product-grid {
        grid-template-columns: 1fr;
    }

    .price-fields {
        grid-template-columns: 1fr 1fr;
    }

    .specifications-grid {
        grid-template-columns: 1fr;
    }

    .related-products .product-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   STAGE 4 CART
   ========================================================= */


.header-action {
    border: 0;
    padding: 0;

    background: transparent;

    color: #fff;

    font: inherit;

    cursor: pointer;
}


/* MINI CART */

.cart-panel-open {
    overflow: hidden;
}

.mini-cart-backdrop {
    position: fixed;

    inset: 0;

    z-index: 90;

    background:
        rgba(0, 0, 0, 0.65);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s,
        visibility 0.25s;
}

.mini-cart-backdrop.is-open {
    opacity: 1;

    visibility: visible;
}

.mini-cart {
    width: min(
        440px,
        100%
    );

    height: 100vh;

    position: fixed;

    top: 0;
    right: 0;

    z-index: 100;

    display: flex;

    flex-direction: column;

    background: #111114;

    border-left:
        1px solid
        rgba(255,255,255,0.1);

    transform:
        translateX(100%);

    transition:
        transform 0.3s ease;
}

.mini-cart.is-open {
    transform:
        translateX(0);
}

.mini-cart-header {
    min-height: 82px;

    padding: 0 25px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);
}

.mini-cart-header h2 {
    margin: 0;

    font-size: 19px;
}

.mini-cart-close {
    width: 40px;

    height: 40px;

    border: 0;

    background: transparent;

    color: #fff;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;
}

.mini-cart-content {
    min-height: 0;

    flex: 1;

    display: flex;

    flex-direction: column;
}

.mini-cart-items {
    padding: 10px 25px;

    flex: 1;

    overflow-y: auto;
}

.mini-cart-item {
    padding: 17px 0;

    display: grid;

    grid-template-columns:
        62px
        minmax(0,1fr)
        auto;

    gap: 14px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);
}

.mini-cart-image {
    width: 62px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            #34343b,
            #1a1a1f
        );

    color:
        rgba(255,255,255,0.22);

    font-size: 24px;

    font-weight: 800;
}

.mini-cart-item-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 7px;
}

.mini-cart-item-info strong {
    overflow: hidden;

    color: #f0f0f2;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    text-overflow:
        ellipsis;
}

.mini-cart-item-info span {
    color: #777780;

    font-size: 11px;
}

.mini-cart-line-total {
    font-size: 12px;

    color: #c3c3c8;
}

.mini-cart-footer {
    padding: 25px;

    border-top:
        1px solid
        rgba(255,255,255,0.08);
}

.mini-cart-subtotal {
    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    color: #9b9ba3;

    font-size: 13px;
}

.mini-cart-subtotal strong {
    color: #fff;

    font-size: 20px;
}

.mini-cart-view,
.mini-cart-checkout {
    width: 100%;

    margin-top: 9px;
}

.mini-cart-empty {
    min-height: 100%;

    padding: 45px 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 20px;

    text-align: center;

    color: #85858d;
}


/* CART PAGE */

.cart-page {
    min-height: 90vh;

    padding:
        165px 0
        120px;

    background: #0d0d10;
}

.cart-heading {
    margin-bottom: 55px;
}

.cart-heading h1 {
    margin: 0;

    font-size:
        clamp(
            54px,
            7vw,
            90px
        );

    line-height: 0.95;

    letter-spacing: -5px;
}

.flash-message {
    margin-bottom: 25px;

    padding: 15px 18px;

    border:
        1px solid
        rgba(255,255,255,0.1);

    font-size: 13px;
}

.flash-message.success {
    background:
        rgba(255,255,255,0.04);

    color: #d4d4d8;
}

.flash-message.error {
    background:
        rgba(180,50,50,0.08);

    border-color:
        rgba(255,100,100,0.2);

    color: #d9a6a6;
}

.cart-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        360px;

    gap: 55px;

    align-items: start;
}

.cart-products {
    min-width: 0;
}

.cart-table-header {
    padding-bottom: 15px;

    display: grid;

    grid-template-columns:
        minmax(300px,1fr)
        110px
        110px
        110px;

    gap: 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.09);

    color: #62626b;

    font-size: 10px;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.cart-item {
    padding: 25px 0;

    display: grid;

    grid-template-columns:
        minmax(300px,1fr)
        110px
        110px
        110px;

    gap: 18px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);
}

.cart-product-main {
    display: flex;

    align-items: center;

    gap: 20px;
}

.cart-product-image {
    width: 100px;

    height: 115px;

    flex:
        0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            #34343b,
            #19191e
        );

    color:
        rgba(255,255,255,0.18);
}

.cart-product-image span {
    font-size: 34px;

    font-weight: 800;
}

.cart-product-main h3 {
    margin: 4px 0 7px;

    font-size: 17px;
}

.cart-product-universe {
    margin: 0;

    color: #777780;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}

.cart-product-sku {
    margin: 0 0 12px;

    color: #62626a;

    font-size: 10px;
}

.cart-remove {
    padding: 0;

    border: 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.25);

    background: none;

    color: #8b8b93;

    font-size: 11px;

    cursor: pointer;
}

.cart-remove:hover {
    color: #fff;
}

.cart-item-price,
.cart-line-total {
    color: #d2d2d5;

    font-size: 13px;
}

.cart-line-total {
    font-weight: 600;
}

.cart-item-quantity input {
    width: 75px;

    height: 44px;

    padding: 0 10px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    background: #151519;

    color: #fff;

    text-align: center;
}

.cart-mobile-label {
    display: none;
}

.cart-actions {
    padding-top: 24px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}

.continue-shopping {
    color: #85858d;

    font-size: 12px;
}

.continue-shopping:hover {
    color: #fff;
}

.update-cart-button {
    min-height: 45px;

    padding: 0 20px;

    border:
        1px solid
        rgba(255,255,255,0.14);

    background: transparent;

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;
}

.update-cart-button:hover {
    background:
        rgba(255,255,255,0.05);
}


/* ORDER SUMMARY */

.cart-summary {
    position: sticky;

    top: 30px;

    padding: 30px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    background: #141417;
}

.cart-summary h2 {
    margin: 0 0 28px;

    font-size: 20px;
}

.summary-line {
    margin: 15px 0;

    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    gap: 20px;

    color: #92929a;

    font-size: 12px;
}

.summary-line strong {
    color: #fff;
}

.summary-muted {
    max-width: 130px;

    color: #65656d;

    text-align: right;
}

.summary-divider {
    height: 1px;

    margin: 25px 0;

    background:
        rgba(255,255,255,0.08);
}

.summary-total {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    font-size: 17px;
}

.summary-total strong {
    font-size: 25px;
}

.summary-tax-note {
    margin: 18px 0 25px;

    color: #62626a;

    font-size: 10px;

    line-height: 1.6;
}

.checkout-button {
    width: 100%;
}

.secure-checkout {
    margin-top: 17px;

    color: #606068;

    font-size: 9px;

    letter-spacing: 1px;

    text-align: center;

    text-transform: uppercase;
}


/* EMPTY CART */

.cart-empty {
    padding: 100px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    border:
        1px solid
        rgba(255,255,255,0.07);
}

.cart-empty-icon {
    width: 90px;

    height: 90px;

    margin-bottom: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 50%;

    color:
        rgba(255,255,255,0.15);

    font-size: 26px;
}

.cart-empty h2 {
    margin: 0;

    font-size: 32px;
}

.cart-empty p {
    max-width: 420px;

    margin: 15px 0 28px;

    color: #77777f;

    line-height: 1.7;
}


/* CHECKOUT PLACEHOLDER */

.checkout-preview-page {
    min-height: 100vh;

    padding:
        170px 0
        120px;

    background: #0d0d10;
}

.checkout-preview {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        400px;

    gap: 80px;

    align-items: start;
}

.checkout-preview h1 {
    max-width: 700px;

    margin: 0 0 25px;

    font-size:
        clamp(
            52px,
            6vw,
            82px
        );

    letter-spacing: -4px;

    line-height: 0.98;
}

.checkout-preview > div > p:not(.eyebrow) {
    max-width: 600px;

    margin-bottom: 30px;

    color: #8a8a92;

    line-height: 1.8;
}

.checkout-preview-summary {
    padding: 28px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    background: #141417;
}

.checkout-preview-summary h2 {
    margin:
        0
        0
        25px;

    font-size: 20px;
}

.checkout-preview-item {
    padding: 14px 0;

    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);

    color: #85858d;

    font-size: 12px;
}

.checkout-preview-item strong {
    color: #d2d2d6;
}


/* RESPONSIVE CART */

@media (max-width: 1050px) {

    .cart-layout {
        grid-template-columns:
            1fr 320px;

        gap: 30px;
    }

    .cart-table-header {
        display: none;
    }

    .cart-item {
        grid-template-columns:
            1fr
            100px
            80px;

        gap: 12px;
    }

    .cart-product-main {
        grid-column:
            1 / -1;
    }

    .cart-mobile-label {
        display: none;
    }

    .checkout-preview {
        grid-template-columns:
            1fr 340px;

        gap: 35px;
    }

}


@media (max-width: 780px) {

    .cart-layout,
    .checkout-preview {
        grid-template-columns:
            1fr;
    }

    .cart-summary {
        position: static;
    }

}


@media (max-width: 600px) {

    .cart-page {
        padding:
            135px 0
            80px;
    }

    .cart-heading {
        margin-bottom: 35px;
    }

    .cart-heading h1 {
        letter-spacing: -3px;
    }

    .cart-item {
        grid-template-columns:
            1fr 1fr;

        padding: 25px 0;
    }

    .cart-product-main {
        grid-column:
            1 / -1;
    }

    .cart-item-price,
    .cart-item-quantity,
    .cart-line-total {
        margin-bottom: 12px;
    }

    .cart-line-total {
        grid-column:
            1 / -1;
    }

    .cart-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .update-cart-button {
        width: 100%;
    }

    .mini-cart {
        width: 100%;
    }

    .checkout-preview-page {
        padding:
            135px 0
            80px;
    }

}



/* =========================================================
   STAGE 5 CHECKOUT
   ========================================================= */

.real-checkout-page {
    min-height: 100vh;

    padding:
        125px 0
        100px;

    background: #0d0d10;
}

.checkout-topbar {
    padding-bottom: 25px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);

    color: #676770;

    font-size: 11px;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}

.back-to-cart {
    color: #8e8e96;

    text-transform: none;

    letter-spacing: 0;
}

.back-to-cart:hover {
    color: #fff;
}

.checkout-layout {
    padding-top: 55px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        420px;

    gap: 80px;

    align-items: start;
}

.checkout-heading {
    margin-bottom: 55px;
}

.checkout-heading h1 {
    max-width: 750px;

    margin: 0;

    font-size:
        clamp(
            50px,
            6vw,
            82px
        );

    line-height: 0.98;

    letter-spacing: -4px;
}

.checkout-form-section {
    padding:
        40px 0;

    border-top:
        1px solid
        rgba(255,255,255,0.08);
}

.checkout-section-title {
    margin-bottom: 30px;

    display: flex;

    gap: 18px;

    align-items: flex-start;
}

.checkout-section-title > span {
    width: 32px;

    height: 32px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,0.12);

    color: #74747d;

    font-size: 10px;
}

.checkout-section-title h2 {
    margin:
        0
        0
        6px;

    font-size: 19px;
}

.checkout-section-title p {
    margin: 0;

    color: #6e6e76;

    font-size: 12px;
}

.checkout-fields {
    margin-bottom: 16px;

    display: grid;

    grid-template-columns: 1fr;

    gap: 16px;
}

.checkout-fields.two {
    grid-template-columns:
        1fr 1fr;
}

.checkout-field label {
    display: block;

    margin-bottom: 8px;

    color: #8c8c94;

    font-size: 10px;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}

.checkout-field label span {
    margin-left: 5px;

    color: #55555d;

    text-transform: none;

    letter-spacing: 0;
}

.checkout-field input,
.checkout-field select {
    width: 100%;

    height: 52px;

    padding: 0 14px;

    border:
        1px solid
        rgba(255,255,255,0.11);

    border-radius: 2px;

    outline: 0;

    background: #131317;

    color: #fff;

    font-size: 13px;
}

.checkout-field input:focus,
.checkout-field select:focus {
    border-color:
        rgba(255,255,255,0.4);
}

.field-error {
    display: block;

    margin-top: 7px;

    color: #d28f8f;

    font-size: 10px;
}

.payment-placeholder {
    min-height: 100px;

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 18px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    background: #121216;
}

.payment-placeholder > div:first-child {
    width: 58px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,0.12);

    color: #85858d;

    font-size: 9px;

    letter-spacing: 1px;
}

.payment-placeholder > div:last-child {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.payment-placeholder strong {
    font-size: 12px;
}

.payment-placeholder span {
    max-width: 500px;

    color: #6a6a72;

    font-size: 11px;

    line-height: 1.5;
}

.place-order-button {
    width: 100%;

    height: 58px;

    margin-top: 20px;

    border: 0;

    border-radius: 2px;

    background: #fff;

    color: #111;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;
}

.place-order-button:hover {
    opacity: 0.92;
}

.checkout-terms {
    max-width: 520px;

    margin: 15px auto 0;

    color: #55555d;

    font-size: 9px;

    line-height: 1.5;

    text-align: center;
}


/* CHECKOUT SUMMARY */

.checkout-order-summary {
    position: sticky;

    top: 25px;

    padding: 28px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    background: #141417;
}

.checkout-order-summary h2 {
    margin: 0 0 25px;

    font-size: 19px;
}

.checkout-order-items {
    margin-bottom: 25px;
}

.checkout-order-item {
    padding: 15px 0;

    display: grid;

    grid-template-columns:
        60px
        minmax(0,1fr)
        auto;

    gap: 13px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}

.checkout-order-image {
    width: 60px;

    height: 68px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            #34343c,
            #19191e
        );

    color:
        rgba(255,255,255,0.2);
}

.checkout-order-image span {
    font-size: 22px;

    font-weight: 800;
}

.checkout-order-image em {
    width: 20px;

    height: 20px;

    position: absolute;

    top: -7px;

    right: -7px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eee;

    color: #111;

    font-size: 9px;

    font-style: normal;

    font-weight: 700;
}

.checkout-order-item > div:nth-child(2) {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;
}

.checkout-order-item strong {
    overflow: hidden;

    font-size: 11px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.checkout-order-item span {
    color: #696971;

    font-size: 9px;
}

.checkout-order-item b {
    color: #c4c4ca;

    font-size: 11px;
}

.checkout-summary-lines {
    padding: 10px 0 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);
}

.checkout-summary-lines > div {
    padding: 7px 0;

    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    color: #85858d;

    font-size: 11px;
}

.checkout-summary-lines strong {
    color: #c9c9ce;

    font-weight: 500;
}

.checkout-grand-total {
    padding: 22px 0;

    display: flex;

    justify-content:
        space-between;

    align-items: center;
}

.checkout-grand-total span {
    font-size: 13px;
}

.checkout-grand-total strong {
    font-size: 25px;
}

.checkout-summary-notes {
    padding-top: 18px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    border-top:
        1px solid
        rgba(255,255,255,0.08);
}

.checkout-summary-notes span {
    padding: 6px 8px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    color: #5f5f67;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* ORDER SUCCESS */

.order-success-page {
    min-height: 100vh;

    padding:
        155px 0
        110px;

    background: #0d0d10;
}

.order-success-hero {
    max-width: 820px;

    margin: 0 auto 70px;

    text-align: center;
}

.order-success-icon {
    width: 70px;

    height: 70px;

    margin:
        0 auto
        28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius: 50%;

    font-size: 25px;
}

.order-success-hero h1 {
    margin:
        0
        0
        22px;

    font-size:
        clamp(
            50px,
            6vw,
            78px
        );

    line-height: 1;

    letter-spacing: -4px;
}

.order-success-hero > p:not(.eyebrow) {
    max-width: 600px;

    margin:
        0 auto
        30px;

    color: #85858d;

    line-height: 1.7;
}

.order-number-box {
    display: inline-flex;

    padding: 14px 18px;

    align-items: center;

    gap: 15px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    background: #141417;
}

.order-number-box span {
    color: #696971;

    font-size: 10px;
}

.order-number-box strong {
    font-size: 12px;

    letter-spacing: 0.5px;
}

.order-success-grid {
    display: grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap: 25px;
}

.order-success-card {
    padding: 30px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    background: #131316;
}

.order-success-card h2 {
    margin:
        0
        0
        25px;

    font-size: 19px;
}

.success-order-item {
    padding: 17px 0;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);
}

.success-order-item > div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.success-order-item strong {
    font-size: 12px;
}

.success-order-item span {
    color: #717179;

    font-size: 10px;
}

.success-order-item b {
    font-size: 12px;
}

.success-totals {
    padding-top: 18px;
}

.success-totals > div {
    padding: 7px 0;

    display: flex;

    justify-content:
        space-between;

    color: #85858d;

    font-size: 11px;
}

.success-totals strong {
    color: #d2d2d6;
}

.success-totals .success-total {
    margin-top: 12px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    color: #fff;

    font-size: 15px;
}

.success-total strong {
    font-size: 22px;
}

.order-success-card p {
    margin: 7px 0;

    color: #898991;

    font-size: 12px;

    line-height: 1.6;
}

.order-success-card .delivery-name {
    color: #fff;

    font-weight: 700;
}

.order-status-row {
    margin-top: 20px;

    padding-top: 15px;

    display: flex;

    justify-content:
        space-between;

    border-top:
        1px solid
        rgba(255,255,255,0.06);

    color: #77777f;

    font-size: 10px;

    text-transform: uppercase;
}

.order-status-row strong {
    color: #d0d0d5;
}

.order-success-actions {
    margin-top: 35px;

    display: flex;

    justify-content: center;

    gap: 10px;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .checkout-layout {
        grid-template-columns:
            minmax(0,1fr)
            340px;

        gap: 35px;
    }

}


@media (max-width: 760px) {

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-order-summary {
        position: static;
    }

    .order-success-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .real-checkout-page {
        padding:
            115px 0
            70px;
    }

    .checkout-layout {
        padding-top: 35px;
    }

    .checkout-fields.two {
        grid-template-columns: 1fr;
    }

    .checkout-heading h1,
    .order-success-hero h1 {
        letter-spacing: -2px;
    }

    .order-success-page {
        padding:
            130px 0
            80px;
    }

    .order-success-actions {
        flex-direction: column;
    }

    .order-success-actions .button {
        width: 100%;
    }

}


/* =========================================================
   STAGE 7 STOREFRONT PHOTO CSS
   ========================================================= */

.product-image {
    overflow: hidden;
}

.product-card-photo {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

.product-card:hover
.product-card-photo {
    transform:
        scale(1.035);
}


.product-main-image.has-photo {
    padding: 0;

    background: #111114;
}

.product-main-photo {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


.product-thumbnails {
    margin-top: 12px;

    display: grid;

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

    gap: 10px;
}

.product-thumbnail {
    aspect-ratio: 1 / 1;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    background: #141417;

    cursor: pointer;

    opacity: 0.65;

    transition:
        opacity 0.2s,
        border-color 0.2s;
}

.product-thumbnail:hover,
.product-thumbnail.active {
    opacity: 1;

    border-color:
        rgba(255,255,255,0.5);
}

.product-thumbnail img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


@media (max-width: 600px) {

    .product-thumbnails {
        grid-template-columns:
            repeat(4,1fr);
    }

}


/* =========================================================
   STAGE 10A PUBLIC PAGES + FOOTER
   ========================================================= */

.content-page {
    min-height: 70vh;

    padding:
        170px 0
        120px;

    background: #0d0d10;
}

.content-page-heading {
    max-width: 900px;

    margin-bottom: 70px;
}

.content-page-heading h1 {
    margin: 0;

    font-size:
        clamp(
            56px,
            7vw,
            100px
        );

    line-height: 0.95;

    letter-spacing: -5px;
}

.content-page-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 760px)
        minmax(0, 320px);

    gap: 90px;

    align-items: start;
}

.content-page-body {
    color: #a0a0a8;

    font-size: 16px;

    line-height: 2;
}

.contact-information {
    padding: 25px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    background: #141417;
}

.contact-information h2 {
    margin:
        0
        0
        25px;

    font-size: 18px;
}

.contact-information > div {
    padding: 15px 0;

    display: flex;

    flex-direction: column;

    gap: 7px;

    border-top:
        1px solid
        rgba(255,255,255,0.07);
}

.contact-information span {
    color: #67676f;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.contact-information a,
.contact-information strong {
    color: #d4d4d8;

    font-size: 13px;

    font-weight: 500;
}


/* FOOTER */

.site-footer {
    padding:
        75px 0
        25px;

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    background: #0a0a0c;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap: 60px;
}

.footer-brand {
    max-width: 330px;
}

.footer-logo {
    display: inline-block;

    margin-bottom: 20px;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: 5px;
}

.footer-brand p {
    color: #686870;

    font-size: 13px;

    line-height: 1.7;
}

.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}

.footer-column h3 {
    margin:
        0
        0
        8px;

    color: #55555d;

    font-size: 9px;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.footer-column a {
    color: #8c8c94;

    font-size: 12px;

    line-height: 1.5;
}

.footer-column a:hover {
    color: #fff;
}

.footer-bottom {
    margin-top: 65px;

    padding-top: 22px;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid
        rgba(255,255,255,0.07);

    color: #505058;

    font-size: 10px;
}


@media (max-width: 900px) {

    .content-page-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

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

        gap: 45px;
    }

}


@media (max-width: 550px) {

    .content-page {
        padding:
            135px 0
            80px;
    }

    .content-page-heading {
        margin-bottom: 45px;
    }

    .content-page-heading h1 {
        letter-spacing: -3px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
    }

}



/* =========================================================
   STAGE 11 LIVE SEARCH CSS
   ========================================================= */

body.search-is-open {
    overflow: hidden;
}


.search-overlay {
    position: fixed;

    inset: 0;

    z-index: 9999;

    visibility: hidden;

    overflow-y: auto;

    background:
        rgba(8,8,10,0.985);

    opacity: 0;

    transform:
        translateY(-10px);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s;
}


.search-overlay.is-open {
    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);
}


.search-overlay-inner {
    width:
        min(
            1400px,
            calc(100% - 80px)
        );

    min-height: 100%;

    margin: 0 auto;

    padding:
        32px 0
        80px;
}


.search-overlay-top {
    display: flex;

    align-items: center;

    justify-content:
        space-between;
}


.search-overlay-logo {
    color: #fff;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 5px;
}


.search-close {
    position: relative;

    width: 48px;

    height: 48px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius: 50%;

    background: none;

    cursor: pointer;

    transition:
        border-color 0.2s,
        transform 0.2s;
}


.search-close:hover {
    border-color:
        rgba(255,255,255,0.5);

    transform:
        rotate(5deg);
}


.search-close span {
    position: absolute;

    top: 50%;

    left: 50%;

    width: 17px;

    height: 1px;

    background: #fff;
}


.search-close span:first-child {
    transform:
        translate(-50%,-50%)
        rotate(45deg);
}


.search-close span:last-child {
    transform:
        translate(-50%,-50%)
        rotate(-45deg);
}


.search-interface {
    width:
        min(
            1050px,
            100%
        );

    margin:
        105px auto 0;
}


.search-eyebrow {
    margin:
        0 0
        25px;

    color: #62626b;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.search-input-wrap {
    position: relative;

    border-bottom:
        1px solid
        rgba(255,255,255,0.22);
}


.live-search-input {
    width: 100%;

    height: 110px;

    padding:
        0
        90px
        0
        0;

    border: 0;

    outline: 0;

    background: transparent;

    color: #fff;

    font-family: inherit;

    font-size:
        clamp(
            36px,
            5vw,
            72px
        );

    font-weight: 500;

    letter-spacing: -3px;
}


.live-search-input::placeholder {
    color: #34343a;
}


.live-search-input::-webkit-search-cancel-button {
    display: none;
}


.search-key {
    position: absolute;

    top: 50%;

    right: 0;

    transform:
        translateY(-50%);

    padding:
        6px 8px;

    border:
        1px solid
        rgba(255,255,255,0.1);

    color: #55555d;

    font-size: 9px;

    letter-spacing: 1px;
}


.search-state {
    padding:
        34px 0;

    color: #606068;

    font-size: 13px;
}


.search-results {
    margin-top: 18px;

    border-top:
        1px solid
        rgba(255,255,255,0.07);
}


.live-search-result {
    min-height: 118px;

    padding: 15px 0;

    display: grid;

    grid-template-columns:
        86px
        minmax(0,1fr)
        160px;

    gap: 22px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);

    transition:
        padding 0.2s,
        background 0.2s;
}


.live-search-result:hover {
    padding-left: 12px;

    padding-right: 12px;

    background:
        rgba(255,255,255,0.025);
}


.live-search-result-media {
    width: 86px;

    height: 86px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            #24242a,
            #111114
        );

    color: #393940;

    font-size: 25px;

    font-weight: 800;
}


.live-search-result-media img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


.live-search-result-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 9px;
}


.live-search-result-meta {
    overflow: hidden;

    color: #66666f;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.live-search-result-name {
    overflow: hidden;

    color: #dedee2;

    font-size: 19px;

    font-weight: 500;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.live-search-result-price {
    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    gap: 9px;
}


.live-search-result-price strong {
    color: #fff;

    font-size: 14px;

    font-weight: 600;
}


.live-search-result-price del {
    color: #5d5d65;

    font-size: 11px;
}


.search-view-all {
    margin-top: 30px;

    padding: 18px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,0.12);

    color: #aaaab1;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.4px;

    transition:
        color 0.2s;
}


.search-view-all:hover {
    color: #fff;
}


.search-view-all span {
    font-size: 20px;
}


@media (max-width: 700px) {

    .search-overlay-inner {
        width:
            calc(100% - 36px);

        padding-top: 20px;
    }


    .search-interface {
        margin-top: 70px;
    }


    .live-search-input {
        height: 80px;

        padding-right: 55px;

        font-size: 38px;

        letter-spacing: -2px;
    }


    .search-key {
        display: none;
    }


    .live-search-result {
        grid-template-columns:
            68px
            minmax(0,1fr);

        min-height: 96px;

        gap: 15px;
    }


    .live-search-result-media {
        width: 68px;

        height: 68px;
    }


    .live-search-result-name {
        font-size: 15px;
    }


    .live-search-result-price {
        grid-column: 2;

        justify-content:
            flex-start;

        margin-top: -7px;
    }

}



/* =========================================================
   STAGE 12 BROWSE CSS
   ========================================================= */

.browse-page {
    min-height: 75vh;
    padding: 165px 0 120px;
    background: #0d0d10;
}

.browse-hero {
    max-width: 900px;
    margin-bottom: 70px;
}

.browse-eyebrow {
    margin: 0 0 22px;
    color: #686870;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.browse-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(58px, 8vw, 116px);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -6px;
}

.browse-description {
    max-width: 650px;
    margin: 32px 0 0;
    color: #777780;
    font-size: 15px;
    line-height: 1.8;
}

.browse-count {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #56565f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.browse-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 40px 18px;
}

.browse-product-card {
    display: block;
}

.browse-product-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at 50% 42%,
            #29292f,
            #121215 65%
        );
}

.browse-product-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.browse-product-card:hover
.browse-product-media img {
    transform: scale(1.035);
}

.browse-product-media > span {
    color: rgba(255,255,255,.12);
    font-size: 60px;
    font-weight: 800;
}

.browse-stock {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 9px;
    background: rgba(10,10,12,.85);
    color: #aaaab2;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
}

.browse-product-info {
    padding-top: 17px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.browse-product-info > div {
    min-width: 0;
}

.browse-product-info span {
    display: block;
    margin-bottom: 7px;
    color: #5f5f68;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.browse-product-info h2 {
    margin: 0;
    color: #d8d8dc;
    font-size: 15px;
    font-weight: 500;
}

.browse-product-info > strong {
    flex: 0 0 auto;
    color: #d8d8dc;
    font-size: 13px;
    font-weight: 600;
}

.browse-group-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.browse-group-card {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.08);
    background: #121215;
    transition:
        transform .25s ease,
        border-color .25s ease;
}

.browse-group-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.2);
}

.browse-group-media {
    aspect-ratio: 16 / 11;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle,
            #2a2a30,
            #131316
        );
}

.browse-group-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.browse-group-card:hover
.browse-group-media img {
    transform: scale(1.04);
}

.browse-group-media > span {
    color: rgba(255,255,255,.14);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 3px;
}

.browse-group-info {
    min-height: 185px;
    padding: 24px;
}

.browse-group-info > span {
    color: #5d5d66;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.browse-group-info h2 {
    margin: 12px 0;
    color: #e5e5e8;
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -1px;
}

.browse-group-info p {
    margin: 0 0 22px;
    color: #707078;
    font-size: 12px;
    line-height: 1.6;
}

.browse-group-info strong {
    display: block;
    margin-top: 22px;
    color: #9c9ca4;
    font-size: 11px;
    font-weight: 600;
}

.browse-empty {
    padding: 80px 30px;
    border: 1px solid rgba(255,255,255,.08);
    text-align: center;
}

.browse-empty h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 28px;
}

.browse-empty p {
    color: #707078;
    font-size: 13px;
}

.browse-empty a {
    display: inline-block;
    margin-top: 20px;
    color: #d0d0d5;
    font-size: 12px;
}

@media (max-width: 950px) {

    .browse-product-grid,
    .browse-group-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}

@media (max-width: 600px) {

    .browse-page {
        padding: 135px 0 80px;
    }

    .browse-hero {
        margin-bottom: 45px;
    }

    .browse-hero h1 {
        letter-spacing: -4px;
    }

    .browse-product-grid,
    .browse-group-grid {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   HERO BUTTON STYLE FIX
   ========================================================= */

.hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}

.hero-buttons a {
    min-height: 64px;

    padding: 0 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,0.18);

    color: #fff;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.hero-buttons a:first-child {
    border-color: #fff;

    background: #fff;

    color: #0d0d10;
}

.hero-buttons a:first-child:hover {
    background: #e7e7e9;

    border-color: #e7e7e9;

    transform: translateY(-2px);
}

.hero-buttons a:last-child {
    background: transparent;

    color: #fff;
}

.hero-buttons a:last-child:hover {
    border-color: rgba(255,255,255,0.55);

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

    transform: translateY(-2px);
}


@media (max-width: 600px) {

    .hero-buttons {
        gap: 10px;
    }

    .hero-buttons a {
        min-height: 56px;

        padding: 0 22px;

        font-size: 14px;
    }

}


/* =========================================================
   STAGE 13B2 STOREFRONT CSS
   ========================================================= */

.homepage-root {
    width: 100%;

    display: flex;

    flex-direction: column;
}

.homepage-root > section {
    width: 100%;
}

.home-collection-grid {
    display: grid;

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

    gap: 18px;
}

.home-collection-card {
    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    background: #111114;
}

.home-collection-media {
    aspect-ratio: 16 / 11;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            #29292f,
            #121215
        );
}

.home-collection-media img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

.home-collection-card:hover
.home-collection-media img {
    transform:
        scale(1.04);
}

.home-collection-media > span {
    color:
        rgba(255,255,255,0.13);

    font-size: 44px;

    font-weight: 800;
}

.home-collection-content {
    min-height: 170px;

    padding: 22px;
}

.home-collection-content > span {
    color: #606069;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.home-collection-content h3 {
    margin:
        10px 0;

    color: #e0e0e4;

    font-size: 22px;

    font-weight: 500;
}

.home-collection-content p {
    margin:
        0 0
        20px;

    color: #707078;

    font-size: 12px;

    line-height: 1.6;
}

.home-collection-content strong {
    color: #9b9ba3;

    font-size: 11px;

    font-weight: 600;
}

.home-collections-empty {
    padding: 45px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    color: #686870;

    font-size: 12px;

    text-align: center;
}


@media (max-width: 900px) {

    .home-collection-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


@media (max-width: 600px) {

    .home-collection-grid {
        grid-template-columns: 1fr;
    }

}





/* NORMAL HOMEPAGE HERO */

.homepage-root .hero {
    min-height: calc(100vh - 82px);

    display: flex;
    align-items: center;

    padding: 55px 0 75px;
}

.homepage-root .hero .hero-content {
    width: 100%;

    position: static !important;

    top: auto !important;

    transform: none !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;
}

.homepage-root .hero .eyebrow {
    margin-top: 0;
}

@media (max-width: 900px) {

    .homepage-root .hero {
        min-height: calc(100vh - 72px);

        padding: 70px 0;
    }

}

@media (max-width: 600px) {

    .homepage-root .hero {
        min-height: auto;

        padding: 90px 0 80px;
    }

}



/* HERO CONTENT TOP OFFSET */

.homepage-root .hero .hero-content {
    padding-top: 80px !important;
}


.homepage-root .hero .hero-content {
    padding-top: 160px !important;
}


.hero-content {
    padding-top: 160px !important;
}



/* =========================================================
   STAGE 14A CONTACT CSS
   ========================================================= */

.contact-form-card {
    grid-column: 1 / -1;

    margin-top: 30px;

    padding: 35px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    background: #121215;
}

.contact-form-card h2 {
    margin: 8px 0 30px;

    color: #fff;

    font-size: 30px;

    letter-spacing: -1px;
}

.contact-form {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

.contact-form-grid {
    display: grid;

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

    gap: 16px;
}

.contact-form label {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.contact-form label > span {
    color: #707078;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
    width: 100%;

    border:
        1px solid
        rgba(255,255,255,0.1);

    outline: none;

    background: #0c0c0f;

    color: #fff;

    font: inherit;

    font-size: 14px;
}

.contact-form input {
    height: 54px;

    padding: 0 16px;
}

.contact-form textarea {
    padding: 16px;

    resize: vertical;

    line-height: 1.7;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color:
        rgba(255,255,255,0.35);
}

.contact-form button {
    align-self: flex-start;

    min-height: 58px;

    padding: 0 28px;

    border: 0;

    background: #fff;

    color: #0c0c0f;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;
}

.contact-alert {
    margin-bottom: 25px;

    padding: 15px 17px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    font-size: 12px;

    line-height: 1.6;
}

.contact-alert.success {
    background:
        rgba(82,155,104,0.08);
}

.contact-alert.error {
    background:
        rgba(190,79,79,0.08);
}

.contact-honeypot {
    position: absolute !important;

    left: -99999px !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;
}


@media (max-width: 650px) {

    .contact-form-card {
        padding: 24px;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   HEADER CONTACT + FOOTER FINAL
   ========================================================= */

.header-contact-link {
    white-space: nowrap;
}


/* FOOTER */

.site-footer {
    padding: 80px 0 0;

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    background: #09090b;
}


.footer-main {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.5fr)
        minmax(140px, .7fr)
        minmax(170px, .9fr)
        minmax(230px, 1.1fr);

    gap: 65px;
}


.footer-brand {
    max-width: 360px;
}


.footer-logo {
    display: inline-block;

    margin-bottom: 22px;

    color: #fff;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: 6px;
}


.footer-brand p {
    max-width: 310px;

    margin: 0;

    color: #74747d;

    font-size: 14px;

    line-height: 1.75;
}


.footer-contact-button {
    width: fit-content;

    min-height: 50px;

    margin-top: 28px;

    padding: 0 18px;

    display: inline-flex;

    align-items: center;

    gap: 35px;

    border:
        1px solid
        rgba(255,255,255,0.14);

    color: #d8d8dc;

    font-size: 12px;

    font-weight: 600;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.footer-contact-button:hover {
    background:
        rgba(255,255,255,0.05);

    border-color:
        rgba(255,255,255,0.35);
}


.footer-contact-button span {
    font-size: 18px;
}


.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
}


.footer-column h3 {
    margin: 0 0 12px;

    color: #55555e;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.footer-column > a {
    color: #9898a0;

    font-size: 13px;

    line-height: 1.4;

    transition:
        color .2s ease;
}


.footer-column > a:hover {
    color: #fff;
}


.footer-contact-column {
    gap: 20px;
}


.footer-contact-item {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.footer-contact-item > span {
    color: #56565f;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.footer-contact-item a,
.footer-contact-item strong {
    max-width: 260px;

    color: #aaaab2;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.55;

    word-break: break-word;
}


.footer-contact-item a:hover {
    color: #fff;
}


.footer-socials {
    margin-top: 4px;

    display: flex;

    flex-wrap: wrap;

    gap: 16px;
}


.footer-socials a {
    color: #777780;

    font-size: 11px;
}


.footer-socials a:hover {
    color: #fff;
}


.footer-bottom {
    margin-top: 75px;

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border-top:
        1px solid
        rgba(255,255,255,0.07);

    color: #4e4e56;

    font-size: 10px;
}


.footer-bottom-links {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 22px;
}


.footer-bottom-links a {
    color: #606069;

    transition:
        color .2s ease;
}


.footer-bottom-links a:hover {
    color: #aaaab2;
}


@media (max-width: 1000px) {

    .footer-main {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap: 50px 35px;
    }

}


@media (max-width: 600px) {

    .site-footer {
        padding-top: 60px;
    }


    .footer-main {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .footer-brand {
        max-width: none;
    }


    .footer-bottom {
        margin-top: 55px;

        padding: 22px 0;

        flex-direction: column;

        align-items: flex-start;
    }


    .footer-bottom-links {
        justify-content: flex-start;
    }

}



/* HEADER NAVIGATION SPACING FIX */

.site-header .container,
.site-header .header-inner,
header .container {
    display: flex;
    align-items: center;
}

.site-header nav,
header nav {
    display: flex;
    align-items: center;
    gap: 30px !important;
}

.site-header nav a,
header nav a {
    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap;

    font-size: 14px !important;
    line-height: 1;
}

.header-contact-link {
    margin: 0 !important;
}

.header-actions,
.site-header .header-actions {
    display: flex;
    align-items: center;

    gap: 24px !important;

    margin-left: 30px;
}

.header-actions a,
.header-actions button {
    margin: 0 !important;
    white-space: nowrap;
}


/* трохи більше відстані перед Cart */

.header-actions a:last-child,
.header-actions button:last-child {
    margin-left: 8px !important;
}


@media (max-width: 1100px) {

    .site-header nav,
    header nav {
        gap: 20px !important;
    }

    .header-actions,
    .site-header .header-actions {
        gap: 18px !important;
        margin-left: 20px;
    }

}



/* =========================================================
   STAGE 15 ORDER TRACKING
   ========================================================= */

.tracking-page {
    min-height: 80vh;

    padding:
        165px 0
        120px;

    background: #0d0d10;
}


.tracking-heading {
    max-width: 780px;

    margin-bottom: 60px;
}


.tracking-heading h1 {
    margin: 12px 0 24px;

    color: #fff;

    font-size:
        clamp(
            56px,
            7vw,
            96px
        );

    line-height: .95;

    letter-spacing: -5px;
}


.tracking-heading > p:last-child {
    max-width: 560px;

    color: #777780;

    font-size: 14px;

    line-height: 1.8;
}


.tracking-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, .75fr)
        minmax(0, 1.5fr);

    gap: 25px;

    align-items: start;
}


.tracking-form,
.tracking-result,
.tracking-placeholder {
    border:
        1px solid
        rgba(255,255,255,.08);

    background: #131316;
}


.tracking-form {
    padding: 28px;

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.tracking-field {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.tracking-field label {
    color: #686871;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.tracking-field input {
    width: 100%;

    height: 54px;

    padding: 0 15px;

    border:
        1px solid
        rgba(255,255,255,.1);

    outline: none;

    background: #0d0d10;

    color: #fff;

    font: inherit;

    font-size: 13px;
}


.tracking-field input:focus {
    border-color:
        rgba(255,255,255,.35);
}


.tracking-form button {
    min-height: 56px;

    margin-top: 4px;

    border: 0;

    background: #fff;

    color: #0d0d10;

    font: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;
}


.tracking-error {
    padding: 13px;

    border:
        1px solid
        rgba(190,80,80,.2);

    background:
        rgba(190,80,80,.07);

    color: #bc9696;

    font-size: 11px;

    line-height: 1.6;
}


.tracking-result {
    padding: 30px;
}


.tracking-order-top {
    padding-bottom: 25px;

    display: flex;

    justify-content: space-between;

    gap: 25px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.tracking-order-top > div,
.tracking-number,
.tracking-destination {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.tracking-order-top span,
.tracking-status-card > span,
.tracking-number span,
.tracking-destination span {
    color: #5d5d66;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


.tracking-order-top strong {
    color: #b8b8bf;

    font-size: 13px;
}


.tracking-status-card {
    padding: 35px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.tracking-status-card h2 {
    margin: 10px 0 0;

    color: #fff;

    font-size: 38px;

    font-weight: 500;

    letter-spacing: -1px;
}


.tracking-number {
    margin-top: 28px;
}


.tracking-number strong {
    color: #9a8fff;

    font-size: 14px;

    letter-spacing: .5px;
}


.tracking-meta-grid {
    padding: 25px 0;

    display: grid;

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

    gap: 15px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.tracking-meta-grid > div {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.tracking-meta-grid span {
    color: #62626b;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.tracking-meta-grid strong {
    color: #c5c5cb;

    font-size: 13px;
}


.tracking-items {
    padding: 28px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.tracking-items h3 {
    margin: 0 0 18px;

    color: #fff;

    font-size: 17px;
}


.tracking-item {
    min-height: 64px;

    padding: 12px 0;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    align-items: center;

    border-top:
        1px solid
        rgba(255,255,255,.055);
}


.tracking-item > div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.tracking-item strong {
    color: #c7c7cd;

    font-size: 13px;
}


.tracking-item span {
    color: #62626b;

    font-size: 10px;
}


.tracking-destination {
    padding-top: 25px;
}


.tracking-destination strong {
    color: #aaaab2;

    font-size: 13px;
}


.tracking-help {
    margin-top: 28px;

    display: inline-block;

    color: #85858e;

    font-size: 11px;
}


.tracking-help:hover {
    color: #fff;
}


.tracking-placeholder {
    min-height: 430px;

    padding: 50px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.tracking-placeholder > span {
    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 50%;

    color: #414149;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 2px;
}


.tracking-placeholder h2 {
    max-width: 340px;

    margin: 25px 0 12px;

    color: #b7b7be;

    font-size: 23px;

    font-weight: 500;

    line-height: 1.25;
}


.tracking-placeholder p {
    max-width: 330px;

    color: #62626b;

    font-size: 12px;

    line-height: 1.7;
}


@media (max-width: 800px) {

    .tracking-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 550px) {

    .tracking-page {
        padding:
            135px 0
            80px;
    }

    .tracking-heading {
        margin-bottom: 40px;
    }

    .tracking-heading h1 {
        letter-spacing: -3px;
    }

    .tracking-result,
    .tracking-form {
        padding: 22px;
    }

    .tracking-meta-grid {
        grid-template-columns: 1fr;
    }

    .tracking-order-top {
        flex-direction: column;
    }

}



/* =========================================================
   STAGE 15 ORDER TRACKING
   ========================================================= */

.tracking-page {
    min-height: 80vh;

    padding:
        165px 0
        120px;

    background: #0d0d10;
}


.tracking-heading {
    max-width: 780px;

    margin-bottom: 60px;
}


.tracking-heading h1 {
    margin: 12px 0 24px;

    color: #fff;

    font-size:
        clamp(
            56px,
            7vw,
            96px
        );

    line-height: .95;

    letter-spacing: -5px;
}


.tracking-heading > p:last-child {
    max-width: 560px;

    color: #777780;

    font-size: 14px;

    line-height: 1.8;
}


.tracking-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, .75fr)
        minmax(0, 1.5fr);

    gap: 25px;

    align-items: start;
}


.tracking-form,
.tracking-result,
.tracking-placeholder {
    border:
        1px solid
        rgba(255,255,255,.08);

    background: #131316;
}


.tracking-form {
    padding: 28px;

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.tracking-field {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.tracking-field label {
    color: #686871;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.tracking-field input {
    width: 100%;

    height: 54px;

    padding: 0 15px;

    border:
        1px solid
        rgba(255,255,255,.1);

    outline: none;

    background: #0d0d10;

    color: #fff;

    font: inherit;

    font-size: 13px;
}


.tracking-field input:focus {
    border-color:
        rgba(255,255,255,.35);
}


.tracking-form button {
    min-height: 56px;

    margin-top: 4px;

    border: 0;

    background: #fff;

    color: #0d0d10;

    font: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;
}


.tracking-error {
    padding: 13px;

    border:
        1px solid
        rgba(190,80,80,.2);

    background:
        rgba(190,80,80,.07);

    color: #bc9696;

    font-size: 11px;

    line-height: 1.6;
}


.tracking-result {
    padding: 30px;
}


.tracking-order-top {
    padding-bottom: 25px;

    display: flex;

    justify-content: space-between;

    gap: 25px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.tracking-order-top > div,
.tracking-number,
.tracking-destination {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.tracking-order-top span,
.tracking-status-card > span,
.tracking-number span,
.tracking-destination span {
    color: #5d5d66;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


.tracking-order-top strong {
    color: #b8b8bf;

    font-size: 13px;
}


.tracking-status-card {
    padding: 35px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.tracking-status-card h2 {
    margin: 10px 0 0;

    color: #fff;

    font-size: 38px;

    font-weight: 500;

    letter-spacing: -1px;
}


.tracking-number {
    margin-top: 28px;
}


.tracking-number strong {
    color: #9a8fff;

    font-size: 14px;

    letter-spacing: .5px;
}


.tracking-meta-grid {
    padding: 25px 0;

    display: grid;

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

    gap: 15px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.tracking-meta-grid > div {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.tracking-meta-grid span {
    color: #62626b;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.tracking-meta-grid strong {
    color: #c5c5cb;

    font-size: 13px;
}


.tracking-items {
    padding: 28px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.tracking-items h3 {
    margin: 0 0 18px;

    color: #fff;

    font-size: 17px;
}


.tracking-item {
    min-height: 64px;

    padding: 12px 0;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    align-items: center;

    border-top:
        1px solid
        rgba(255,255,255,.055);
}


.tracking-item > div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.tracking-item strong {
    color: #c7c7cd;

    font-size: 13px;
}


.tracking-item span {
    color: #62626b;

    font-size: 10px;
}


.tracking-destination {
    padding-top: 25px;
}


.tracking-destination strong {
    color: #aaaab2;

    font-size: 13px;
}


.tracking-help {
    margin-top: 28px;

    display: inline-block;

    color: #85858e;

    font-size: 11px;
}


.tracking-help:hover {
    color: #fff;
}


.tracking-placeholder {
    min-height: 430px;

    padding: 50px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.tracking-placeholder > span {
    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 50%;

    color: #414149;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 2px;
}


.tracking-placeholder h2 {
    max-width: 340px;

    margin: 25px 0 12px;

    color: #b7b7be;

    font-size: 23px;

    font-weight: 500;

    line-height: 1.25;
}


.tracking-placeholder p {
    max-width: 330px;

    color: #62626b;

    font-size: 12px;

    line-height: 1.7;
}


@media (max-width: 800px) {

    .tracking-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 550px) {

    .tracking-page {
        padding:
            135px 0
            80px;
    }

    .tracking-heading {
        margin-bottom: 40px;
    }

    .tracking-heading h1 {
        letter-spacing: -3px;
    }

    .tracking-result,
    .tracking-form {
        padding: 22px;
    }

    .tracking-meta-grid {
        grid-template-columns: 1fr;
    }

    .tracking-order-top {
        flex-direction: column;
    }

}



/* =========================================================
   STAGE 16 COOKIE CONSENT
   ========================================================= */

body.cookie-modal-open {
    overflow: hidden;
}


.cookie-consent {
    position: fixed;

    right: 24px;
    bottom: 24px;
    left: 24px;

    z-index: 10000;

    max-width: 1180px;

    margin: 0 auto;

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        rgba(15,15,18,.97);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.45);

    backdrop-filter:
        blur(18px);
}


.cookie-consent[hidden],
.cookie-settings-modal[hidden] {
    display: none !important;
}


.cookie-consent-inner {
    padding: 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}


.cookie-consent-copy {
    max-width: 720px;
}


.cookie-label {
    display: block;

    margin-bottom: 8px;

    color: #9185ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.6px;
}


.cookie-consent h2,
.cookie-settings-panel h2 {
    margin: 0;

    color: #fff;

    font-size: 22px;

    font-weight: 600;
}


.cookie-consent p {
    margin: 10px 0;

    color: #85858d;

    font-size: 12px;

    line-height: 1.65;
}


.cookie-consent-copy > a {
    color: #aaaab2;

    font-size: 10px;
}


.cookie-consent-actions,
.cookie-settings-actions {
    display: flex;

    align-items: center;

    gap: 10px;
}


.cookie-primary,
.cookie-secondary {
    min-height: 48px;

    padding: 0 18px;

    border:
        1px solid
        rgba(255,255,255,.15);

    font: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;
}


.cookie-primary {
    border-color: #fff;

    background: #fff;

    color: #0d0d10;
}


.cookie-secondary {
    background: transparent;

    color: #aaaab2;
}


.cookie-settings-modal {
    position: fixed;

    inset: 0;

    z-index: 10001;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;
}


.cookie-settings-backdrop {
    position: absolute;

    inset: 0;

    border: 0;

    background:
        rgba(0,0,0,.72);
}


.cookie-settings-panel {
    position: relative;

    z-index: 1;

    width:
        min(
            620px,
            100%
        );

    padding: 30px;

    border:
        1px solid
        rgba(255,255,255,.1);

    background: #131316;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.55);
}


.cookie-settings-top {
    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    gap: 20px;

    margin-bottom: 30px;
}


.cookie-settings-close {
    width: 38px;

    height: 38px;

    border:
        1px solid
        rgba(255,255,255,.1);

    background: transparent;

    color: #aaaab2;

    font-size: 22px;

    cursor: pointer;
}


.cookie-option {
    min-height: 105px;

    padding: 20px 0;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 25px;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}


.cookie-option strong {
    color: #dddde1;

    font-size: 14px;
}


.cookie-option p {
    max-width: 410px;

    margin: 7px 0 0;

    color: #73737c;

    font-size: 11px;

    line-height: 1.6;
}


.cookie-always-on {
    flex: 0 0 auto;

    color: #787881;

    font-size: 10px;
}


.cookie-toggle {
    position: relative;

    flex: 0 0 auto;

    width: 48px;

    height: 26px;
}


.cookie-toggle input {
    position: absolute;

    opacity: 0;
}


.cookie-toggle span {
    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius: 30px;

    background: #0d0d10;

    cursor: pointer;
}


.cookie-toggle span::after {
    content: '';

    position: absolute;

    top: 4px;
    left: 4px;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: #777780;

    transition:
        transform .2s ease,
        background .2s ease;
}


.cookie-toggle input:checked
+ span::after {
    transform:
        translateX(22px);

    background: #fff;
}


.cookie-settings-actions {
    margin-top: 25px;

    justify-content:
        flex-end;
}


.footer-cookie-settings {
    padding: 0;

    border: 0;

    background: transparent;

    color: #606069;

    font: inherit;

    font-size: 10px;

    cursor: pointer;
}


.footer-cookie-settings:hover {
    color: #aaaab2;
}


.legal-page {
    min-height: 75vh;

    padding:
        165px 0
        120px;

    background: #0d0d10;
}


.legal-container {
    max-width: 900px;
}


.legal-header {
    margin-bottom: 65px;
}


.legal-header h1 {
    margin: 12px 0 22px;

    color: #fff;

    font-size:
        clamp(
            55px,
            7vw,
            90px
        );

    letter-spacing: -5px;

    line-height: .95;
}


.legal-header > p:last-child {
    max-width: 600px;

    color: #777780;

    line-height: 1.8;
}


.legal-content {
    display: flex;

    flex-direction: column;
}


.legal-content section {
    padding: 30px 0;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}


.legal-content h2 {
    margin: 0 0 16px;

    color: #dddde2;

    font-size: 22px;
}


.legal-content p {
    margin: 0 0 14px;

    color: #777780;

    font-size: 13px;

    line-height: 1.8;
}


.legal-content a {
    color: #bbbcc3;
}


.legal-cookie-settings {
    min-height: 50px;

    padding: 0 18px;

    border:
        1px solid
        rgba(255,255,255,.18);

    background: transparent;

    color: #fff;

    font: inherit;

    font-size: 11px;

    cursor: pointer;
}


@media (max-width: 750px) {

    .cookie-consent {
        right: 12px;
        bottom: 12px;
        left: 12px;
    }


    .cookie-consent-inner {
        align-items: stretch;

        flex-direction: column;
    }


    .cookie-consent-actions {
        width: 100%;
    }


    .cookie-consent-actions button {
        flex: 1;
    }

}


@media (max-width: 550px) {

    .cookie-settings-panel {
        padding: 22px;
    }


    .cookie-option {
        align-items: flex-start;
    }


    .cookie-settings-actions {
        align-items: stretch;

        flex-direction: column-reverse;
    }


    .cookie-settings-actions button {
        width: 100%;
    }


    .legal-page {
        padding:
            135px 0
            80px;
    }

}



/* =========================================================
   STAGE 18 CHECKOUT LEGAL CONSENT
   ========================================================= */

.checkout-legal-consent {
    margin:
        25px 0
        20px;

    padding: 20px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.018);
}


.checkout-terms-checkbox {
    position: relative;

    display: flex;

    gap: 13px;

    align-items: flex-start;

    cursor: pointer;
}


.checkout-terms-checkbox input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.checkout-checkbox-box {
    position: relative;

    flex:
        0 0
        20px;

    width: 20px;

    height: 20px;

    margin-top: 1px;

    border:
        1px solid
        rgba(255,255,255,.25);

    background: #0d0d10;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.checkout-terms-checkbox
input:checked
+
.checkout-checkbox-box {
    border-color: #fff;

    background: #fff;
}


.checkout-terms-checkbox
input:checked
+
.checkout-checkbox-box::after {
    content: '';

    position: absolute;

    top: 3px;

    left: 6px;

    width: 5px;

    height: 9px;

    border:
        solid #0d0d10;

    border-width:
        0 2px 2px 0;

    transform:
        rotate(45deg);
}


.checkout-terms-checkbox
input:focus-visible
+
.checkout-checkbox-box {
    outline:
        2px solid
        rgba(255,255,255,.45);

    outline-offset: 3px;
}


.checkout-terms-text {
    color: #85858e;

    font-size: 12px;

    line-height: 1.65;
}


.checkout-terms-text a {
    color: #d2d2d7;

    text-decoration: underline;

    text-decoration-color:
        rgba(255,255,255,.25);

    text-underline-offset: 3px;
}


.checkout-terms-text a:hover {
    color: #fff;
}


.checkout-legal-note {
    margin:
        13px 0 0
        33px;

    color: #5e5e67;

    font-size: 10px;

    line-height: 1.6;
}


.checkout-legal-error {
    margin-bottom: 17px;

    padding: 12px 14px;

    border:
        1px solid
        rgba(190,80,80,.2);

    background:
        rgba(190,80,80,.07);

    color: #c99b9b;

    font-size: 11px;

    line-height: 1.6;
}


@media (max-width: 550px) {

    .checkout-legal-consent {
        padding: 17px;
    }


    .checkout-legal-note {
        margin-left: 0;
    }

}



/* =========================================================
   STAGE 18 CHECKOUT LEGAL CONSENT
   ========================================================= */

.checkout-legal-consent {
    margin:
        25px 0
        20px;

    padding: 20px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.018);
}


.checkout-terms-checkbox {
    position: relative;

    display: flex;

    gap: 13px;

    align-items: flex-start;

    cursor: pointer;
}


.checkout-terms-checkbox input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.checkout-checkbox-box {
    position: relative;

    flex:
        0 0
        20px;

    width: 20px;

    height: 20px;

    margin-top: 1px;

    border:
        1px solid
        rgba(255,255,255,.25);

    background: #0d0d10;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.checkout-terms-checkbox
input:checked
+
.checkout-checkbox-box {
    border-color: #fff;

    background: #fff;
}


.checkout-terms-checkbox
input:checked
+
.checkout-checkbox-box::after {
    content: '';

    position: absolute;

    top: 3px;

    left: 6px;

    width: 5px;

    height: 9px;

    border:
        solid #0d0d10;

    border-width:
        0 2px 2px 0;

    transform:
        rotate(45deg);
}


.checkout-terms-checkbox
input:focus-visible
+
.checkout-checkbox-box {
    outline:
        2px solid
        rgba(255,255,255,.45);

    outline-offset: 3px;
}


.checkout-terms-text {
    color: #85858e;

    font-size: 12px;

    line-height: 1.65;
}


.checkout-terms-text a {
    color: #d2d2d7;

    text-decoration: underline;

    text-decoration-color:
        rgba(255,255,255,.25);

    text-underline-offset: 3px;
}


.checkout-terms-text a:hover {
    color: #fff;
}


.checkout-legal-note {
    margin:
        13px 0 0
        33px;

    color: #5e5e67;

    font-size: 10px;

    line-height: 1.6;
}


.checkout-legal-error {
    margin-bottom: 17px;

    padding: 12px 14px;

    border:
        1px solid
        rgba(190,80,80,.2);

    background:
        rgba(190,80,80,.07);

    color: #c99b9b;

    font-size: 11px;

    line-height: 1.6;
}


@media (max-width: 550px) {

    .checkout-legal-consent {
        padding: 17px;
    }


    .checkout-legal-note {
        margin-left: 0;
    }

}



/* =========================================================
   CART ITEM REMOVE CONTROLS
   ========================================================= */

.mini-cart-item-wrap {
    position: relative;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.mini-cart-item-wrap
.mini-cart-item {
    border-bottom: 0 !important;
}


.mini-cart-remove-form {
    position: absolute;

    left: 145px;

    bottom: 25px;

    z-index: 3;

    margin: 0;
}


.mini-cart-remove-form button,
.checkout-order-remove-form button {
    padding: 0;

    border: 0;

    background: transparent;

    color: #74747d;

    font: inherit;

    font-size: 11px;

    line-height: 1;

    text-decoration: underline;

    text-underline-offset: 4px;

    cursor: pointer;

    transition:
        color .2s ease;
}


.mini-cart-remove-form button:hover,
.checkout-order-remove-form button:hover {
    color: #fff;
}


.checkout-order-remove-form {
    margin-top: 11px;
}


.checkout-order-remove-form button {
    font-size: 10px;
}


@media (max-width: 550px) {

    .mini-cart-remove-form {
        left: 125px;
    }

}



.mini-cart-item-wrap,
.checkout-order-item {
    position: relative;
}


.mini-cart-remove-form {
    position: absolute !important;

    top: 16px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 5;

    margin: 0 !important;
}


.checkout-order-remove-form {
    position: absolute;

    top: 14px;
    right: 0;

    z-index: 5;

    margin: 0 !important;
}


.mini-cart-remove-form button,
.checkout-order-remove-form button {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #66666f;

    font-size: 25px !important;
    font-weight: 300;
    line-height: 1;

    text-decoration: none !important;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}


.mini-cart-remove-form button:hover,
.checkout-order-remove-form button:hover {
    color: #fff;

    transform: scale(1.08);
}


/* залишаємо місце для хрестика */

.mini-cart-item {
    padding-right: 42px !important;
}


.checkout-order-item {
    padding-right: 42px;
}



/* CART PAGE REMOVE CROSS */

.cart-item,
.cart-row,
.cart-product-row {
    position: relative;
}


.cart-remove-cross,
.cart-remove {
    position: absolute !important;

    top: 18px !important;
    right: 0 !important;

    z-index: 5;

    margin: 0 !important;
}


.cart-remove-cross button,
.cart-remove button {
    width: 32px !important;
    height: 32px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #66666f !important;

    font-size: 27px !important;
    font-weight: 300 !important;
    line-height: 1 !important;

    text-decoration: none !important;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}


.cart-remove-cross button:hover,
.cart-remove button:hover {
    color: #fff !important;

    transform: scale(1.08);
}


/* щоб хрестик не накладався на Total */

.cart-item,
.cart-row,
.cart-product-row {
    padding-right: 45px;
}


/* CART REMOVE X */

.cart-remove button,
.cart-remove-cross button {
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}



/* FINAL CART REMOVE CROSS */

.cart-remove,
.cart-remove-cross,
form[action$="/cart/remove"] {
    text-decoration: none !important;
}

.cart-remove button,
.cart-remove-cross button,
form[action$="/cart/remove"] button {
    font-size: 0 !important;
    text-decoration: none !important;
}

.cart-remove button::after,
.cart-remove-cross button::after,
form[action$="/cart/remove"] button::after {
    content: "×";

    display: block;

    color: #777780;

    font-size: 28px;
    font-weight: 300;
    line-height: 1;

    text-decoration: none;
}

.cart-remove button:hover::after,
.cart-remove-cross button:hover::after,
form[action$="/cart/remove"] button:hover::after {
    color: #fff;
}



/* =========================================================
   BROWSE PAGES FINAL DESIGN
   Games / Movies & TV / Characters / Worlds / Collections
   ========================================================= */

.browse-page {
    width: 100%;

    min-height: 100vh;

    padding:
        165px 0
        120px;

    background: #0d0d10;
}


/* HERO */

.browse-hero {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    max-width: 980px;

    margin:
        0 0
        75px;
}


.browse-eyebrow {
    margin: 0 0 20px;

    color: #9285ff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.browse-hero h1 {
    margin: 0;

    color: #f5f5f7;

    font-size:
        clamp(
            72px,
            9vw,
            138px
        );

    font-weight: 700;

    line-height: .88;

    letter-spacing: -7px;
}


.browse-description {
    max-width: 720px;

    margin:
        32px 0
        0;

    color: #85858e;

    font-size: 17px;

    line-height: 1.75;
}


/* COUNT */

.browse-count {
    margin:
        0 0
        30px;

    padding:
        22px 0;

    border-top:
        1px solid
        rgba(255,255,255,.09);

    border-bottom:
        1px solid
        rgba(255,255,255,.09);

    color: #666670;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* PRODUCTS GRID */

.browse-product-grid {
    display: grid !important;

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

    gap:
        55px
        24px;
}


.browse-product-card {
    min-width: 0;

    display: block;

    color: inherit;

    text-decoration: none;
}


.browse-product-media {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1b1b21,
            #121217
        );
}


.browse-product-media img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .45s ease,
        opacity .3s ease;
}


.browse-product-card:hover
.browse-product-media img {
    transform: scale(1.025);

    opacity: .94;
}


.browse-product-media > span {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        rgba(255,255,255,.15);

    font-size: 60px;

    font-weight: 800;
}


.browse-stock {
    position: absolute;

    top: 18px;
    left: 18px;

    padding:
        8px
        11px;

    background:
        rgba(8,8,10,.88);

    color: #aaaab2;

    font-size: 9px;

    font-style: normal;

    font-weight: 800;

    letter-spacing: 1.2px;
}


/* PRODUCT INFO */

.browse-product-info {
    padding:
        18px 0
        0;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;
}


.browse-product-info > div {
    min-width: 0;
}


.browse-product-info span {
    display: block;

    margin-bottom: 8px;

    color: #666670;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.browse-product-info h2 {
    margin: 0;

    color: #e7e7ea;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.35;

    letter-spacing: -.35px;

    transition:
        color .2s ease;
}


.browse-product-card:hover
.browse-product-info h2 {
    color: #fff;
}


.browse-product-info > strong {
    flex: 0 0 auto;

    margin-top: 19px;

    color: #dedee2;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;
}


/* GROUP GRID */

.browse-group-grid {
    display: grid !important;

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

    gap: 22px;
}


.browse-group-card {
    overflow: hidden;

    display: block;

    border:
        1px solid
        rgba(255,255,255,.08);

    background: #121215;

    color: inherit;

    text-decoration: none;

    transition:
        border-color .25s ease,
        transform .25s ease;
}


.browse-group-card:hover {
    border-color:
        rgba(255,255,255,.18);

    transform:
        translateY(-3px);
}


.browse-group-media {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1c1c22,
            #111116
        );
}


.browse-group-media img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .45s ease;
}


.browse-group-card:hover
.browse-group-media img {
    transform: scale(1.035);
}


.browse-group-media > span {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        rgba(255,255,255,.14);

    font-size: 50px;

    font-weight: 800;

    letter-spacing: 3px;
}


.browse-group-info {
    min-height: 190px;

    padding: 25px;
}


.browse-group-info > span {
    color: #666670;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.browse-group-info h2 {
    margin:
        11px 0
        13px;

    color: #e7e7ea;

    font-size: 25px;

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -1px;
}


.browse-group-info p {
    margin:
        0 0
        20px;

    color: #71717a;

    font-size: 12px;

    line-height: 1.7;
}


.browse-group-info strong {
    display: inline-block;

    margin-top: 10px;

    color: #aaaab2;

    font-size: 11px;

    font-weight: 600;
}


/* EMPTY */

.browse-empty {
    padding:
        90px
        30px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background: #121215;

    text-align: center;
}


/* TABLET */

@media (max-width: 1050px) {

    .browse-product-grid,
    .browse-group-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .browse-hero h1 {
        letter-spacing: -5px;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .browse-page {
        padding:
            135px 0
            80px;
    }


    .browse-hero {
        margin-bottom: 50px;
    }


    .browse-eyebrow {
        margin-bottom: 15px;
    }


    .browse-hero h1 {
        font-size:
            clamp(
                54px,
                18vw,
                82px
            );

        letter-spacing: -4px;
    }


    .browse-description {
        margin-top: 24px;

        font-size: 14px;
    }


    .browse-product-grid,
    .browse-group-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .browse-product-info h2 {
        font-size: 18px;
    }

}



/* =========================================================
   BROWSE PRODUCT CARD - MATCH MAIN STORE CARDS
   ========================================================= */

.browse-product-card {
    display: flex !important;

    flex-direction: column;

    overflow: hidden;

    background: #151519 !important;

    color: inherit;

    text-decoration: none;

    transition:
        transform .25s ease,
        background-color .25s ease;
}


.browse-product-card:hover {
    transform: translateY(-3px);

    background: #18181d !important;
}


/* IMAGE */

.browse-product-media {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1 !important;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #202027,
            #15151b
        );
}


.browse-product-media img {
    width: 100% !important;

    height: 100% !important;

    display: block;

    object-fit: cover !important;

    object-position: center;

    transition:
        transform .4s ease;
}


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


.browse-product-media > span {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        rgba(255,255,255,.14);

    font-size: 64px;

    font-weight: 800;
}


/* INFO PANEL */

.browse-product-info {
    min-height: 245px;

    padding:
        38px
        42px
        34px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    justify-content: flex-start !important;

    gap: 0 !important;

    background: #151519;
}


.browse-product-universe {
    display: block;

    margin: 0 0 17px !important;

    color: #777781 !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    line-height: 1;

    letter-spacing: 2.6px !important;

    text-transform: uppercase;
}


.browse-product-info h2 {
    margin: 0 !important;

    color: #f3f3f5 !important;

    font-size:
        clamp(
            23px,
            2vw,
            30px
        ) !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

    letter-spacing: -1px !important;
}


.browse-product-bottom {
    width: 100%;

    margin-top: auto;

    padding-top: 42px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;
}


.browse-product-price {
    margin: 0 !important;

    color: #f4f4f6 !important;

    font-size: 29px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: -.8px;

    white-space: nowrap;
}


.browse-product-availability {
    color: #a1a1aa !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1.1;

    white-space: nowrap;
}


.browse-product-availability.out_of_stock {
    color: #74747d !important;
}


.browse-product-availability.pre_order {
    color: #aaa2ff !important;
}


/* прибираємо старий SOLD OUT badge зверху,
   бо статус тепер акуратно стоїть знизу */

.browse-product-media
.browse-stock {
    display: none !important;
}


/* GRID */

.browse-product-grid {
    grid-template-columns:
        repeat(3, minmax(0,1fr)) !important;

    gap:
        28px
        24px !important;
}


/* TABLET */

@media (max-width: 1050px) {

    .browse-product-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }


    .browse-product-info {
        padding:
            30px
            30px
            28px !important;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .browse-product-grid {
        grid-template-columns:
            1fr !important;
    }


    .browse-product-info {
        min-height: 215px;

        padding:
            28px
            26px
            26px !important;
    }


    .browse-product-bottom {
        padding-top: 32px;
    }


    .browse-product-price {
        font-size: 25px !important;
    }


    .browse-product-availability {
        font-size: 14px !important;
    }

}



/* =========================================================
   BROWSE CARD ADD TO CART
   ========================================================= */

.browse-product-card {
    display: flex !important;
    flex-direction: column !important;
}


.browse-product-link {
    flex: 1;

    display: flex;

    flex-direction: column;

    color: inherit;

    text-decoration: none;
}


.browse-product-link
.browse-product-info {
    flex: 1;
}


.browse-add-cart-form {
    width: 100%;

    margin: 0;

    padding:
        0 42px
        34px;

    background: #151519;
}


.browse-add-cart {
    width: 100%;

    min-height: 58px;

    padding:
        0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border:
        1px solid
        rgba(255,255,255,.16);

    background: transparent;

    color: #f4f4f5;

    font: inherit;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.browse-add-cart span {
    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.browse-add-cart strong {
    font-size: 22px;

    font-weight: 300;

    line-height: 1;
}


.browse-add-cart:hover {
    border-color: #fff;

    background: #fff;

    color: #0d0d10;
}


.browse-add-cart.disabled {
    margin:
        0 42px
        34px;

    width:
        calc(
            100% - 84px
        );

    justify-content: center;

    border-color:
        rgba(255,255,255,.07);

    color: #55555e;

    cursor: not-allowed;
}


.browse-add-cart.disabled:hover {
    background: transparent;

    color: #55555e;

    border-color:
        rgba(255,255,255,.07);
}


@media (max-width: 1050px) {

    .browse-add-cart-form {
        padding:
            0 30px
            28px;
    }


    .browse-add-cart.disabled {
        margin:
            0 30px
            28px;

        width:
            calc(
                100% - 60px
            );
    }

}


@media (max-width: 650px) {

    .browse-add-cart-form {
        padding:
            0 26px
            26px;
    }


    .browse-add-cart.disabled {
        margin:
            0 26px
            26px;

        width:
            calc(
                100% - 52px
            );
    }

}



/* =========================================================
   BROWSE AJAX CART BUTTON FINAL
   ========================================================= */

.browse-product-card {
    display: flex !important;

    flex-direction: column !important;

    background: #151519 !important;
}


.browse-product-link {
    flex: 1;

    display: flex;

    flex-direction: column;

    color: inherit;

    text-decoration: none;
}


.browse-product-info {
    flex: 1;
}


.browse-add-cart-form,
.browse-add-cart-disabled-wrap {
    width: 100%;

    margin: 0 !important;

    padding:
        0 42px
        34px;

    background: #151519;
}


.browse-add-cart {
    width: 100% !important;

    min-height: 60px;

    padding:
        0 20px !important;

    display: flex !important;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border:
        1px solid
        rgba(255,255,255,.18) !important;

    background:
        transparent !important;

    color:
        #f4f4f6 !important;

    font: inherit;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.browse-add-cart span {
    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.browse-add-cart strong {
    font-size: 22px;

    font-weight: 300;

    line-height: 1;
}


.browse-add-cart:hover:not(:disabled) {
    border-color:
        #fff !important;

    background:
        #fff !important;

    color:
        #0d0d10 !important;
}


.browse-add-cart.is-loading {
    opacity: .65;

    cursor: wait;
}


.browse-add-cart.is-added {
    border-color:
        #fff !important;

    background:
        #fff !important;

    color:
        #0d0d10 !important;
}


.browse-add-cart.is-error {
    border-color:
        rgba(220,110,110,.5)
        !important;

    color:
        #d99 !important;
}


.browse-add-cart.disabled {
    justify-content: center;

    opacity: .35;

    cursor: not-allowed;
}


@media (max-width: 1050px) {

    .browse-add-cart-form,
    .browse-add-cart-disabled-wrap {
        padding:
            0 30px
            28px;
    }

}


@media (max-width: 650px) {

    .browse-add-cart-form,
    .browse-add-cart-disabled-wrap {
        padding:
            0 26px
            26px;
    }

}



/* =========================================================
   SHOP PRODUCT CARD ADD TO CART
   ========================================================= */

.shop-product-grid .product-card {
    display: flex;
    flex-direction: column;
}


.shop-product-grid .product-info {
    flex: 1;
}


.shop-add-cart-form {
    width: 100%;

    margin: 0;

    padding:
        0 24px
        24px;

    background: #151519;
}


.shop-add-cart {
    width: 100%;

    min-height: 52px;

    padding: 0 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    border:
        1px solid
        rgba(255,255,255,.16);

    background: transparent;

    color: #f4f4f6;

    font: inherit;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        opacity .2s ease;
}


.shop-add-cart span {
    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.shop-add-cart strong {
    font-size: 21px;

    font-weight: 300;

    line-height: 1;
}


.shop-add-cart:hover:not(:disabled) {
    border-color: #fff;

    background: #fff;

    color: #0d0d10;
}


.shop-add-cart.is-loading {
    opacity: .6;

    cursor: wait;
}


.shop-add-cart.is-added {
    border-color: #fff;

    background: #fff;

    color: #0d0d10;
}


.shop-add-cart.is-error {
    border-color:
        rgba(220,100,100,.55);

    color: #d99;
}


.shop-add-cart.disabled {
    justify-content: center;

    opacity: .3;

    cursor: not-allowed;
}


@media (max-width: 700px) {

    .shop-add-cart-form {
        padding:
            0 20px
            20px;
    }

}



/* SHOP ADD TO CART FINAL OVERRIDE */

.shop-product-grid .product-card {
    display: flex !important;
    flex-direction: column !important;
    background: #151519;
}

.shop-product-grid .product-info {
    flex: 1;
}

.shop-add-cart-form {
    width: 100%;
    margin: 0 !important;
    padding: 0 24px 24px;
    background: #151519;
}

.shop-add-cart {
    width: 100% !important;
    min-height: 54px;

    padding: 0 18px !important;

    display: flex !important;
    align-items: center;
    justify-content: space-between;

    border: 1px solid rgba(255,255,255,.17) !important;
    background: transparent !important;

    color: #f5f5f7 !important;

    font: inherit;
    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.shop-add-cart span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.shop-add-cart strong {
    font-size: 22px;
    font-weight: 300;
}

.shop-add-cart:hover:not(:disabled),
.shop-add-cart.is-added {
    border-color: #fff !important;
    background: #fff !important;
    color: #0d0d10 !important;
}

.shop-add-cart.is-loading {
    opacity: .6;
}

.shop-add-cart.disabled {
    justify-content: center;
    opacity: .3;
    cursor: not-allowed;
}



/* =========================================================
   GROUP CARDS ADD TO CART
   ========================================================= */

.browse-group-card {
    display: flex !important;
    flex-direction: column !important;
}


.browse-group-link {
    flex: 1;

    display: flex;

    flex-direction: column;

    color: inherit;

    text-decoration: none;
}


.browse-group-link
.browse-group-info {
    flex: 1;
}


.browse-group-cart-form {
    width: 100%;

    margin: 0 !important;

    padding:
        0 25px
        25px;

    background: #121215;
}


.browse-group-add-cart {
    width: 100%;

    min-height: 56px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border:
        1px solid
        rgba(255,255,255,.17);

    background: transparent;

    color: #f4f4f6;

    font: inherit;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        opacity .2s ease;
}


.browse-group-add-cart span {
    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.browse-group-add-cart strong {
    font-size: 22px;

    font-weight: 300;

    line-height: 1;
}


.browse-group-add-cart:hover:not(:disabled),
.browse-group-add-cart.is-added {
    border-color: #fff;

    background: #fff;

    color: #0d0d10;
}


.browse-group-add-cart.is-loading {
    opacity: .6;

    cursor: wait;
}


.browse-group-add-cart.is-error {
    border-color:
        rgba(220,100,100,.55);

    color: #d99;
}


.browse-group-add-cart.disabled {
    justify-content: center;

    opacity: .3;

    cursor: not-allowed;
}


@media (max-width: 650px) {

    .browse-group-cart-form {
        padding:
            0 22px
            22px;
    }

}



/* =========================================================
   AJAX MINI CART REMOVE
   ========================================================= */

.mini-cart-item-wrap {
    transition:
        opacity .22s ease,
        transform .22s ease;
}


.mini-cart-item-wrap.is-removing {
    opacity: .28;

    transform:
        translateX(8px);

    pointer-events: none;
}


.mini-cart-remove-form button:disabled {
    opacity: .35;

    cursor: wait;
}



/* =========================================================
   MINI CART SHOW ALL ITEMS
   ========================================================= */

.mini-cart {
    display: flex !important;
    flex-direction: column !important;
}


.mini-cart-header {
    flex: 0 0 auto;
}


.mini-cart-content {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    scrollbar-width: thin;
}


.mini-cart-content::-webkit-scrollbar {
    width: 5px;
}


.mini-cart-content::-webkit-scrollbar-track {
    background: transparent;
}


.mini-cart-content::-webkit-scrollbar-thumb {
    background:
        rgba(255,255,255,.16);

    border-radius: 10px;
}



/* =========================================================
   FIXED HEADER
   ========================================================= */

.site-header {
    position: fixed !important;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 500;

    background:
        rgba(12,12,15,.92);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.site-header .container {
    min-height: 82px;
}


/* щоб при скролі меню завжди залишалось зверху */

body {
    overflow-x: hidden;
}



/* =========================================================
   MOBILE MENU FINAL
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        height: 82px;
    }


    .site-header .header-inner {
        position: relative;

        min-height: 82px;

        display: flex !important;

        align-items: center;

        justify-content: space-between;

        gap: 20px;
    }


    .site-header .logo {
        position: relative;

        z-index: 1003;

        flex: 0 0 auto;

        margin: 0;

        font-size: 19px;

        letter-spacing: 6px;

        white-space: nowrap;
    }


    .site-header .menu-toggle {
        position: relative;

        z-index: 1003;

        width: 46px;
        height: 46px;

        margin-left: auto;

        display: flex !important;

        align-items: center;

        justify-content: center;

        padding: 0;

        border: 0;

        background: transparent;

        color: #fff;

        font-size: 29px;

        font-weight: 300;

        line-height: 1;

        cursor: pointer;
    }


    .site-header .main-nav,
    .site-header .header-actions {
        display: none !important;
    }


    body.mobile-menu-open {
        overflow: hidden;
    }


    body.mobile-menu-open .site-header {
        background: #101013;
    }


    body.mobile-menu-open .site-header .main-nav {
        position: fixed;

        top: 82px;
        left: 0;
        right: 0;

        z-index: 1001;

        width: 100%;

        height: auto;

        display: flex !important;

        flex-direction: column;

        align-items: stretch;

        gap: 0 !important;

        padding:
            30px
            28px
            0;

        background: #131316;

        border-top:
            1px solid
            rgba(255,255,255,.07);
    }


    body.mobile-menu-open .site-header .main-nav a {
        width: 100%;

        min-height: 58px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin: 0 !important;

        padding: 0 !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.07);

        color: #d5d5da;

        font-size: 17px !important;

        font-weight: 500;

        line-height: 1;

        text-decoration: none;
    }


    body.mobile-menu-open .site-header .main-nav a::after {
        content: "→";

        color: #55555e;

        font-size: 16px;
    }


    body.mobile-menu-open .site-header .header-actions {
        position: fixed;

        top: 346px;
        left: 0;
        right: 0;

        z-index: 1002;

        width: 100%;

        display: flex !important;

        flex-direction: column;

        align-items: stretch;

        gap: 0 !important;

        margin: 0 !important;

        padding:
            0 28px
            30px;

        background: #131316;
    }


    body.mobile-menu-open
    .site-header
    .header-actions > * {
        width: 100%;

        min-height: 58px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin: 0 !important;

        padding: 0 !important;

        border: 0;

        border-bottom:
            1px solid
            rgba(255,255,255,.07);

        background: transparent;

        color: #d5d5da;

        font: inherit;

        font-size: 17px !important;

        font-weight: 500;

        text-align: left;

        text-decoration: none;

        cursor: pointer;
    }


    body.mobile-menu-open
    .site-header
    .header-actions > *::after {
        content: "→";

        color: #55555e;

        font-size: 16px;
    }


    body.mobile-menu-open
    .site-header
    .cart-toggle::after {
        content: none;
    }


    body.mobile-menu-open::before {
        content: "";

        position: fixed;

        inset: 82px 0 0;

        z-index: 999;

        background:
            rgba(0,0,0,.68);

        backdrop-filter:
            blur(3px);

        -webkit-backdrop-filter:
            blur(3px);
    }

}


@media (min-width: 901px) {

    .site-header .menu-toggle {
        display: none !important;
    }

}



/* =========================================================
   MOBILE MENU Z-INDEX FIX
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        z-index: 3000 !important;
    }


    body.mobile-menu-open::before {
        z-index: 2000 !important;
    }


    body.mobile-menu-open .site-header .main-nav {
        z-index: 3001 !important;

        filter: none !important;
        opacity: 1 !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    body.mobile-menu-open .site-header .header-actions {
        z-index: 3002 !important;

        filter: none !important;
        opacity: 1 !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    body.mobile-menu-open .site-header .main-nav a,
    body.mobile-menu-open .site-header .header-actions > * {
        filter: none !important;
        opacity: 1 !important;
    }

}



/* MOBILE CART MENU FIX */

@media (max-width: 900px) {

    body.mobile-menu-open
    .site-header
    .header-actions
    .cart-toggle {
        justify-content: flex-start !important;

        gap: 0 !important;

        white-space: nowrap;
    }


    body.mobile-menu-open
    .site-header
    .header-actions
    .cart-toggle span {
        display: inline !important;

        width: auto !important;

        margin: 0 !important;

        padding: 0 !important;
    }

}



/* =========================================================
   CART REAL PRODUCT IMAGES
   ========================================================= */

.mini-cart-image {
    overflow: hidden;
}


.mini-cart-image img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* cart page */

[class*="cart"][class*="image"] {
    overflow: hidden;
}


[class*="cart"][class*="image"] img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover;
    object-position: center;
}



/* CART PAGE REAL PRODUCT IMAGE */

.cart-item img,
.cart-row img,
.cart-product img,
.cart-product-row img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}



/* SHOPPING CART THUMBNAIL IMAGE FINAL */

.cart-real-image {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center !important;
}



/* CART IMAGE - REMOVE TOP/BOTTOM BARS */

.cart-product-image {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;

    display: block !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;
}


.cart-product-image > span {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    line-height: 0 !important;
}


.cart-product-image .cart-real-image {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;
}



/* =========================================================
   CONTACT PAGE FINAL DESIGN
   ========================================================= */

.contact-page {
    padding:
        150px 0
        110px !important;
}


.contact-page > .container {
    width:
        min(
            calc(100% - 80px),
            1440px
        ) !important;

    max-width:
        1440px !important;
}


/* HERO */

.contact-page
.content-page-heading {
    margin:
        0 0
        58px !important;

    padding:
        0 0
        42px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.contact-page
.content-page-heading
.eyebrow {
    margin:
        0 0
        20px !important;
}


.contact-page
.content-page-heading h1 {
    margin: 0 !important;

    font-size:
        clamp(
            64px,
            8vw,
            116px
        ) !important;

    line-height:
        .9 !important;

    letter-spacing:
        -.06em !important;
}


/* MAIN CONTACT GRID */

.contact-page
.content-page-layout {
    display: grid !important;

    grid-template-columns:
        minmax(0,1fr)
        minmax(330px,390px)
        !important;

    column-gap:
        clamp(
            50px,
            8vw,
            130px
        ) !important;

    row-gap:
        36px !important;

    align-items: start !important;
}


/* INTRO */

.contact-page
.content-page-body {
    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    max-width:
        720px;

    color:
        #9a9aa3 !important;

    font-size:
        17px !important;

    line-height:
        1.9 !important;
}


.contact-page
.content-page-body br {
    display: block;

    content: "";

    margin-top:
        20px;
}


/* CONTACT INFORMATION */

.contact-page
.contact-information {
    position:
        static !important;

    top:
        auto !important;

    align-self:
        start;

    margin:
        0 !important;

    padding:
        30px !important;

    border:
        1px solid
        rgba(255,255,255,.10)
        !important;

    background:
        #121216 !important;
}


.contact-page
.contact-information h2 {
    margin:
        0 0
        24px !important;

    padding-bottom:
        20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    color:
        #f2f2f4;

    font-size:
        20px !important;

    font-weight:
        650;
}


.contact-page
.contact-information > div {
    padding:
        17px 0 !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.contact-page
.contact-information > div:last-child {
    border-bottom:
        0;
}


.contact-page
.contact-information span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #5f5f68;

    font-size:
        9px !important;

    font-weight:
        800;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;
}


.contact-page
.contact-information a,
.contact-page
.contact-information strong {
    color:
        #d9d9de !important;

    font-size:
        14px !important;

    font-weight:
        500 !important;

    line-height:
        1.55;

    word-break:
        break-word;
}


.contact-page
.contact-information a:hover {
    color:
        #fff !important;
}


/* FORM CARD */

.contact-page
.contact-form-card {
    grid-column:
        1 / -1 !important;

    width:
        100%;

    margin:
        10px 0
        0 !important;

    padding:
        48px !important;

    border:
        1px solid
        rgba(255,255,255,.10)
        !important;

    background:
        #121216 !important;
}


.contact-page
.contact-form-card > .eyebrow {
    margin:
        0 0
        14px !important;
}


.contact-page
.contact-form-card > h2 {
    margin:
        0 0
        38px !important;

    color:
        #f4f4f6;

    font-size:
        clamp(
            36px,
            4vw,
            58px
        ) !important;

    font-weight:
        650;

    line-height:
        1;

    letter-spacing:
        -.045em;
}


/* FORM */

.contact-page
.contact-form {
    display:
        grid !important;

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

    gap:
        22px !important;
}


.contact-page
.contact-form-grid {
    grid-column:
        1 / -1;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;

    gap:
        22px !important;
}


.contact-page
.contact-form > label {
    grid-column:
        1 / -1;
}


.contact-page
.contact-form label {
    gap:
        10px !important;
}


.contact-page
.contact-form label > span {
    color:
        #696972 !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    letter-spacing:
        1.3px !important;
}


.contact-page
.contact-form input {
    height:
        58px !important;

    padding:
        0 18px !important;
}


.contact-page
.contact-form textarea {
    min-height:
        180px;

    padding:
        18px !important;

    resize:
        vertical;
}


.contact-page
.contact-form input,
.contact-page
.contact-form textarea {
    border:
        1px solid
        rgba(255,255,255,.11)
        !important;

    border-radius:
        0 !important;

    background:
        #0d0d10 !important;

    color:
        #f5f5f6 !important;

    transition:
        border-color .2s ease,
        background .2s ease;
}


.contact-page
.contact-form input:hover,
.contact-page
.contact-form textarea:hover {
    border-color:
        rgba(255,255,255,.20)
        !important;
}


.contact-page
.contact-form input:focus,
.contact-page
.contact-form textarea:focus {
    border-color:
        rgba(255,255,255,.55)
        !important;

    background:
        #101014 !important;
}


/* SEND BUTTON */

.contact-page
.contact-form button {
    grid-column:
        1 / -1;

    width:
        100%;

    min-height:
        62px !important;

    margin-top:
        4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #fff !important;

    background:
        #fff !important;

    color:
        #0d0d10 !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

    transition:
        background .2s ease,
        color .2s ease;
}


.contact-page
.contact-form button:hover {
    background:
        transparent !important;

    color:
        #fff !important;
}


/* TABLET */

@media (max-width: 900px) {

    .contact-page {
        padding:
            125px 0
            80px !important;
    }


    .contact-page
    .content-page-layout {
        grid-template-columns:
            1fr !important;

        gap:
            28px !important;
    }


    .contact-page
    .contact-information {
        width:
            100%;
    }


    .contact-page
    .contact-form-card {
        grid-column:
            1 !important;

        margin-top:
            10px !important;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .contact-page {
        padding:
            110px 0
            60px !important;
    }


    .contact-page > .container {
        width:
            calc(
                100% - 32px
            ) !important;
    }


    .contact-page
    .content-page-heading {
        margin-bottom:
            34px !important;

        padding-bottom:
            28px;
    }


    .contact-page
    .content-page-heading h1 {
        font-size:
            62px !important;
    }


    .contact-page
    .content-page-body {
        font-size:
            15px !important;
    }


    .contact-page
    .contact-information {
        padding:
            24px !important;
    }


    .contact-page
    .contact-form-card {
        padding:
            26px !important;
    }


    .contact-page
    .contact-form-card > h2 {
        margin-bottom:
            28px !important;

        font-size:
            36px !important;
    }


    .contact-page
    .contact-form,
    .contact-page
    .contact-form-grid {
        grid-template-columns:
            1fr !important;

        gap:
            18px !important;
    }

}



/* =========================================================
   FAQ PAGE
   ========================================================= */

.faq-page {
    padding:
        150px 0
        110px !important;
}


.faq-page > .container {
    width:
        min(
            calc(100% - 80px),
            1440px
        ) !important;

    max-width:
        1440px !important;
}


/* FAQ HERO */

.faq-page
.content-page-heading {
    margin:
        0 0
        0 !important;

    padding:
        0 0
        60px !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);
}


.faq-page
.content-page-heading
.eyebrow {
    margin:
        0 0
        20px !important;
}


.faq-page
.content-page-heading h1 {
    margin:
        0 !important;

    color:
        #f4f4f6;

    font-size:
        clamp(
            72px,
            9vw,
            128px
        ) !important;

    font-weight:
        650 !important;

    line-height:
        .86 !important;

    letter-spacing:
        -.065em !important;
}


/* RESET GENERAL CONTENT PAGE LAYOUT */

.faq-page
.content-page-layout {
    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* INTRO */

.faq-intro {
    max-width:
        620px;

    margin:
        0 0
        0 auto;

    padding:
        44px 0
        54px;
}


.faq-intro p {
    margin:
        0;

    color:
        #85858e;

    font-size:
        16px;

    line-height:
        1.7;
}


/* FAQ LIST */

.faq-list {
    width:
        100%;

    margin:
        0;

    border-top:
        1px solid
        rgba(255,255,255,.10);
}


.faq-item {
    width:
        100%;

    margin:
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

    background:
        transparent;
}


.faq-item summary {
    min-height:
        112px;

    padding:
        0 6px;

    display:
        grid;

    grid-template-columns:
        70px
        minmax(0,1fr)
        44px;

    align-items:
        center;

    gap:
        22px;

    list-style:
        none;

    color:
        #ededf0;

    cursor:
        pointer;

    user-select:
        none;

    transition:
        color .2s ease,
        padding .25s ease;
}


.faq-item summary::-webkit-details-marker {
    display:
        none;
}


.faq-item summary::marker {
    display:
        none;

    content:
        "";
}


.faq-item summary:hover {
    color:
        #fff;

    padding-left:
        14px;
}


/* NUMBER */

.faq-number {
    color:
        #55555e;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


/* QUESTION */

.faq-question {
    font-size:
        clamp(
            20px,
            2vw,
            28px
        );

    font-weight:
        580;

    line-height:
        1.25;

    letter-spacing:
        -.025em;
}


/* PLUS / MINUS */

.faq-toggle {
    position:
        relative;

    width:
        30px;

    height:
        30px;

    justify-self:
        end;
}


.faq-toggle::before,
.faq-toggle::after {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        18px;

    height:
        1px;

    background:
        #aaaab2;

    transform:
        translate(
            -50%,
            -50%
        );

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.faq-toggle::after {
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(90deg);
}


.faq-item[open]
.faq-toggle::after {
    opacity:
        0;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(0deg);
}


/* ANSWER */

.faq-answer {
    display:
        grid;

    grid-template-columns:
        70px
        minmax(0,1fr)
        44px;

    gap:
        22px;

    padding:
        0 6px
        42px;
}


.faq-answer > div {
    grid-column:
        2;

    max-width:
        820px;

    color:
        #92929b;

    font-size:
        15px;

    line-height:
        1.85;
}


/* OPEN STATE */

.faq-item[open]
summary {
    padding-bottom:
        8px;

    color:
        #fff;
}


.faq-item[open]
.faq-number {
    color:
        #8f7cff;
}


/* MOBILE */

@media (max-width: 700px) {

    .faq-page {
        padding:
            112px 0
            70px !important;
    }


    .faq-page > .container {
        width:
            calc(
                100% - 32px
            ) !important;
    }


    .faq-page
    .content-page-heading {
        padding-bottom:
            38px !important;
    }


    .faq-page
    .content-page-heading h1 {
        font-size:
            70px !important;
    }


    .faq-intro {
        max-width:
            none;

        margin:
            0;

        padding:
            30px 0
            38px;
    }


    .faq-item summary {
        min-height:
            92px;

        grid-template-columns:
            38px
            minmax(0,1fr)
            32px;

        gap:
            12px;

        padding:
            0 !important;
    }


    .faq-question {
        font-size:
            19px;
    }


    .faq-answer {
        grid-template-columns:
            38px
            minmax(0,1fr);

        gap:
            12px;

        padding:
            0 0
            30px;
    }


    .faq-answer > div {
        grid-column:
            2;

        font-size:
            14px;
    }


    .faq-toggle {
        width:
            26px;

        height:
            26px;
    }

}



/* =========================================================
   HOMEPAGE HERO PRODUCT SLIDER
   ========================================================= */

.hero-slider-layout {
    width: 100%;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(360px, .88fr);

    align-items: center;

    gap:
        clamp(
            50px,
            6vw,
            110px
        );
}


.hero-copy {
    min-width: 0;
}


.hero-slider-shell {
    position: relative;

    width: 100%;
    max-width: 520px;

    justify-self: end;
}


.hero-slider-shell::before {
    content: "";

    position: absolute;

    inset:
        24px
        -24px
        -24px
        24px;

    border:
        1px solid
        rgba(139,124,255,.20);

    pointer-events: none;
}


.home-hero-slider {
    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        #111116;

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.45);
}


.home-hero-slider::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    border:
        1px solid
        rgba(255,255,255,.04);

    pointer-events: none;
}


/* SLIDES */

.home-hero-slide {
    position: absolute;

    inset: 0;

    display: block;

    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.035);

    transition:
        opacity .65s ease,
        visibility .65s ease,
        transform 1s ease;

    pointer-events: none;
}


.home-hero-slide.is-active {
    opacity: 1;

    visibility: visible;

    transform:
        scale(1);

    pointer-events: auto;
}


.home-hero-slide img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


.home-hero-slide-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 35%,
            rgba(5,5,10,.32) 60%,
            rgba(5,5,10,.94) 100%
        );

    pointer-events: none;
}


/* CAPTION */

.home-hero-slide-caption {
    position: absolute;

    z-index: 3;

    left: 30px;

    right: 30px;

    bottom: 78px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
}


.home-hero-slide-caption > span {
    color:
        #9183ff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.home-hero-slide-caption > strong {
    max-width:
        90%;

    color:
        #fff;

    font-size:
        clamp(
            25px,
            2.2vw,
            36px
        );

    font-weight:
        650;

    line-height:
        1.05;

    letter-spacing:
        -.035em;
}


/* BOTTOM UI */

.home-hero-slider-ui {
    position: absolute;

    z-index: 6;

    left: 30px;

    right: 30px;

    bottom: 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.home-hero-slider-count {
    display: flex;

    align-items: center;

    gap: 7px;

    color:
        rgba(255,255,255,.42);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1px;
}


.home-hero-slider-count strong {
    color: #fff;

    font-size: 11px;

    font-weight: 700;
}


.home-hero-slider-dots {
    display: flex;

    align-items: center;

    gap: 8px;
}


.home-hero-slider-dot {
    width: 22px;

    height: 2px;

    padding: 0;

    border: 0;

    background:
        rgba(255,255,255,.26);

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;
}


.home-hero-slider-dot.is-active {
    width: 42px;

    background:
        #fff;
}


/* TABLET */

@media (max-width: 1100px) {

    .hero-slider-layout {
        grid-template-columns:
            minmax(0,1fr)
            minmax(320px,.75fr);

        gap: 45px;
    }


    .hero-slider-shell {
        max-width:
            430px;
    }

}


/* MOBILE */

@media (max-width: 850px) {

    .hero-slider-layout {
        grid-template-columns:
            1fr !important;

        gap:
            50px !important;

        padding-bottom:
            70px;
    }


    .hero-slider-shell {
        width: 100%;

        max-width:
            680px;

        justify-self:
            start;
    }


    .home-hero-slider {
        aspect-ratio:
            4 / 3;
    }


    .hero-slider-shell::before {
        inset:
            15px
            -15px
            -15px
            15px;
    }

}


/* SMALL MOBILE */

@media (max-width: 560px) {

    .home-hero-slider {
        aspect-ratio:
            4 / 5;
    }


    .home-hero-slide-caption {
        left: 20px;

        right: 20px;

        bottom: 68px;
    }


    .home-hero-slider-ui {
        left: 20px;

        right: 20px;

        bottom: 22px;
    }


    .home-hero-slide-caption > strong {
        font-size:
            25px;
    }

}



/* =========================================================
   HERO SLIDER LAYOUT FIX
   ========================================================= */

.hero .container.hero-content.hero-slider-layout {
    width: min(calc(100% - 80px), 1480px) !important;
    max-width: 1480px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-top: 150px !important;
    padding-bottom: 90px !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        500px !important;

    gap: 80px !important;

    align-items: center !important;
}


.hero-slider-layout .hero-copy {
    width: 100% !important;
    max-width: 800px !important;

    margin: 0 !important;
    padding: 0 !important;
}


.hero-slider-layout .hero-copy h1 {
    max-width: 800px !important;
}


.hero-slider-layout .hero-copy .hero-description {
    max-width: 650px !important;
}


.hero-slider-layout .hero-slider-shell {
    width: 100% !important;
    max-width: 500px !important;

    margin: 0 !important;

    justify-self: end !important;
}


.hero-slider-layout .home-hero-slider {
    width: 100% !important;

    aspect-ratio: 4 / 5 !important;

    max-height: 650px !important;
}


/* TABLET */

@media (max-width: 1150px) {

    .hero .container.hero-content.hero-slider-layout {
        width: min(calc(100% - 56px), 1100px) !important;

        grid-template-columns:
            minmax(0, 1fr)
            400px !important;

        gap: 48px !important;

        padding-top: 135px !important;
    }


    .hero-slider-layout .hero-slider-shell {
        max-width: 400px !important;
    }

}


/* MOBILE */

@media (max-width: 850px) {

    .hero .container.hero-content.hero-slider-layout {
        width: calc(100% - 32px) !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 48px !important;

        padding-top: 120px !important;
        padding-bottom: 70px !important;
    }


    .hero-slider-layout .hero-copy {
        max-width: none !important;
    }


    .hero-slider-layout .hero-slider-shell {
        width: 100% !important;
        max-width: 620px !important;

        justify-self: start !important;
    }


    .hero-slider-layout .home-hero-slider {
        aspect-ratio: 4 / 3 !important;
        max-height: none !important;
    }

}


/* SMALL MOBILE */

@media (max-width: 560px) {

    .hero-slider-layout .home-hero-slider {
        aspect-ratio: 4 / 5 !important;
    }

}



/* HOME HERO SLIDER INDICATORS SIZE */
[data-home-hero-slider] .hero-slider-progress,
[data-home-hero-slider] .hero-slider-pagination,
[data-home-hero-slider] .hero-slider-dots,
[data-home-hero-slider] .hero-slider-indicators,
[data-home-hero-slider] .home-hero-slider-progress,
[data-home-hero-slider] .home-hero-slider-dots {
    display: flex;
    align-items: center;
    gap: 14px;
}

[data-home-hero-slider] .hero-slider-progress button,
[data-home-hero-slider] .hero-slider-pagination button,
[data-home-hero-slider] .hero-slider-dots button,
[data-home-hero-slider] .hero-slider-indicators button,
[data-home-hero-slider] .home-hero-slider-progress button,
[data-home-hero-slider] .home-hero-slider-dots button,
[data-home-hero-slider] .hero-slider-dot,
[data-home-hero-slider] .hero-slider-indicator,
[data-home-hero-slider] .hero-slider-progress-item,
[data-home-hero-slider] .home-hero-slider-dot,
[data-home-hero-slider] .home-hero-slider-indicator {
    width: 78px !important;
    min-width: 78px !important;
    height: 6px !important;
    padding: 0 !important;
    border-radius: 999px !important;
}

[data-home-hero-slider] .hero-slider-progress button::before,
[data-home-hero-slider] .hero-slider-pagination button::before,
[data-home-hero-slider] .hero-slider-dots button::before,
[data-home-hero-slider] .hero-slider-indicators button::before,
[data-home-hero-slider] .home-hero-slider-progress button::before,
[data-home-hero-slider] .home-hero-slider-dots button::before {
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
}
/* END HOME HERO SLIDER INDICATORS SIZE */

/* HOME HERO MOBILE FIX */
@media (max-width: 767px) {
    .home-hero .container,
    .home-hero-inner,
    .home-hero-grid,
    .hero-layout,
    .hero-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    [data-home-hero-slider] {
        width: 100%;
        margin: 6px 0 2px;
    }

    [data-home-hero-slider] .hero-slide,
    [data-home-hero-slider] .home-hero-slide,
    [data-home-hero-slider] .hero-slider-card,
    [data-home-hero-slider] .home-hero-slider-card,
    [data-home-hero-slider] .hero-slider-item,
    [data-home-hero-slider] .home-hero-slider-item {
        min-height: auto;
    }

    .hero-actions,
    .home-hero-actions,
    .hero-buttons,
    .home-hero-buttons,
    .hero-cta,
    .home-hero-cta,
    [data-home-hero-actions] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        margin-top: 4px;
    }

    .hero-actions a,
    .home-hero-actions a,
    .hero-buttons a,
    .home-hero-buttons a,
    .hero-cta a,
    .home-hero-cta a,
    [data-home-hero-actions] a,
    .hero-actions button,
    .home-hero-actions button,
    .hero-buttons button,
    .home-hero-buttons button,
    .hero-cta button,
    .home-hero-cta button,
    [data-home-hero-actions] button {
        width: 100%;
        max-width: 100%;
        min-height: 56px;
        padding: 16px 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    [data-home-hero-slider] .hero-slider-progress,
    [data-home-hero-slider] .hero-slider-pagination,
    [data-home-hero-slider] .hero-slider-dots,
    [data-home-hero-slider] .hero-slider-indicators,
    [data-home-hero-slider] .home-hero-slider-progress,
    [data-home-hero-slider] .home-hero-slider-dots {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    [data-home-hero-slider] .hero-slider-progress button,
    [data-home-hero-slider] .hero-slider-pagination button,
    [data-home-hero-slider] .hero-slider-dots button,
    [data-home-hero-slider] .hero-slider-indicators button,
    [data-home-hero-slider] .home-hero-slider-progress button,
    [data-home-hero-slider] .home-hero-slider-dots button,
    [data-home-hero-slider] .hero-slider-dot,
    [data-home-hero-slider] .hero-slider-indicator,
    [data-home-hero-slider] .hero-slider-progress-item,
    [data-home-hero-slider] .home-hero-slider-dot,
    [data-home-hero-slider] .home-hero-slider-indicator {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 6px !important;
        padding: 0 !important;
        border-radius: 999px !important;
    }

    [data-home-hero-slider] .hero-slider-progress button::before,
    [data-home-hero-slider] .hero-slider-pagination button::before,
    [data-home-hero-slider] .hero-slider-dots button::before,
    [data-home-hero-slider] .hero-slider-indicators button::before,
    [data-home-hero-slider] .home-hero-slider-progress button::before,
    [data-home-hero-slider] .home-hero-slider-dots button::before {
        width: 100% !important;
        height: 100% !important;
        border-radius: 999px !important;
    }
}
/* END HOME HERO MOBILE FIX */


/* =========================================================
   HERO ALIGN TO SITE CONTAINER
   ========================================================= */

.hero .container.hero-content.hero-slider-layout {
    width: calc(100% - 80px) !important;
    max-width: 1280px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    grid-template-columns:
        minmax(0, 1fr)
        500px !important;

    gap: 70px !important;
}


@media (max-width: 1150px) {

    .hero .container.hero-content.hero-slider-layout {
        width: calc(100% - 56px) !important;
        max-width: 1280px !important;

        grid-template-columns:
            minmax(0, 1fr)
            400px !important;

        gap: 44px !important;
    }

}


@media (max-width: 850px) {

    .hero .container.hero-content.hero-slider-layout {
        width: calc(100% - 32px) !important;
        max-width: 1280px !important;

        grid-template-columns:
            1fr !important;

        gap: 42px !important;
    }

}



/* =========================================================
   HERO SLIDER - SHOW FULL PRODUCT IMAGE
   ========================================================= */

.hero-slider-layout .home-hero-slider {
    aspect-ratio: 1 / 1 !important;
    background: #07080a !important;
}


.home-hero-slide {
    background: #07080a !important;
}


.home-hero-slide img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: #07080a !important;

    transform: none !important;
}


/* прибираємо zoom ефект слайда */

.home-hero-slide,
.home-hero-slide.is-active {
    transform: none !important;
}


/* залишаємо затемнення тільки внизу під текстом */

.home-hero-slide-shade {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 50%,
            rgba(5,5,10,.20) 65%,
            rgba(5,5,10,.94) 100%
        ) !important;
}


/* MOBILE */

@media (max-width: 850px) {

    .hero-slider-layout .home-hero-slider {
        aspect-ratio: 1 / 1 !important;
    }

}


@media (max-width: 560px) {

    .hero-slider-layout .home-hero-slider {
        aspect-ratio: 1 / 1 !important;
    }

}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-page {
    padding:
        145px 0
        110px !important;
}


.about-page > .container {
    width:
        min(
            calc(100% - 80px),
            1280px
        ) !important;

    max-width:
        1280px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


/* TITLE */

.about-page
.content-page-heading {
    margin:
        0 !important;

    padding:
        0 0
        60px !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);
}


.about-page
.content-page-heading
.eyebrow {
    margin:
        0 0
        20px !important;
}


.about-page
.content-page-heading h1 {
    margin:
        0 !important;

    color:
        #f5f5f6;

    font-size:
        clamp(
            78px,
            8vw,
            122px
        ) !important;

    font-weight:
        650 !important;

    line-height:
        .9 !important;

    letter-spacing:
        -.065em !important;
}


/* MAIN */

.about-page
.content-page-layout {
    display:
        grid !important;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(340px,.85fr)
        !important;

    gap:
        clamp(
            60px,
            8vw,
            130px
        ) !important;

    align-items:
        start !important;

    padding:
        72px 0
        82px !important;

    margin:
        0 !important;
}


/* BODY TEXT */

.about-page
.content-page-body {
    width:
        100% !important;

    max-width:
        720px !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #96969f !important;

    font-size:
        18px !important;

    line-height:
        1.8 !important;
}


.about-page
.content-page-body p {
    margin:
        0 0
        32px !important;
}


.about-page
.content-page-body p:last-child {
    margin-bottom:
        0 !important;
}


.about-page
.content-page-body
.about-lead {
    color:
        #d8d8dc !important;

    font-size:
        clamp(
            23px,
            2.1vw,
            31px
        ) !important;

    font-weight:
        450;

    line-height:
        1.5 !important;

    letter-spacing:
        -.02em;
}


/* RIGHT FEATURE */

.about-showcase {
    position:
        relative;

    min-height:
        410px;

    padding:
        38px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:
        linear-gradient(
            145deg,
            #15151b 0%,
            #111116 60%,
            #171329 100%
        );

    overflow:
        hidden;
}


.about-showcase::before {
    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    right:
        -90px;

    top:
        -110px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(119,97,255,.18),
            rgba(119,97,255,0) 70%
        );

    pointer-events:
        none;
}


.about-showcase-number {
    position:
        absolute;

    top:
        30px;

    right:
        32px;

    color:
        rgba(255,255,255,.16);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;
}


.about-showcase
.eyebrow {
    margin:
        0 0
        17px;

    position:
        relative;

    z-index:
        1;
}


.about-showcase h2 {
    margin:
        0 0
        22px;

    position:
        relative;

    z-index:
        1;

    color:
        #f4f4f6;

    font-size:
        clamp(
            38px,
            3.6vw,
            54px
        );

    font-weight:
        630;

    line-height:
        1;

    letter-spacing:
        -.05em;
}


.about-showcase-text {
    max-width:
        360px;

    margin:
        0 0
        32px;

    position:
        relative;

    z-index:
        1;

    color:
        #84848d;

    font-size:
        14px;

    line-height:
        1.75;
}


.about-showcase-link {
    width:
        100%;

    min-height:
        58px;

    padding:
        0 18px;

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-top:
        1px solid
        rgba(255,255,255,.12);

    color:
        #f3f3f5;

    font-size:
        12px;

    font-weight:
        750;

    letter-spacing:
        .2px;

    text-decoration:
        none;
}


.about-showcase-link span {
    font-size:
        18px;

    transition:
        transform .2s ease;
}


.about-showcase-link:hover span {
    transform:
        translateX(5px);
}


/* VALUE CARDS */

.about-values {
    display:
        grid;

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

    border-top:
        1px solid
        rgba(255,255,255,.09);

    border-left:
        1px solid
        rgba(255,255,255,.09);
}


.about-value {
    min-height:
        260px;

    padding:
        30px;

    display:
        grid;

    grid-template-columns:
        36px
        1fr;

    gap:
        18px;

    border-right:
        1px solid
        rgba(255,255,255,.09);

    border-bottom:
        1px solid
        rgba(255,255,255,.09);

    background:
        #101014;
}


.about-value > span {
    color:
        #55555f;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;
}


.about-value
div > p:first-child {
    margin:
        0 0
        28px;

    color:
        #8778ff;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.6px;
}


.about-value h3 {
    margin:
        0 0
        18px;

    color:
        #eeeeF1;

    font-size:
        25px;

    font-weight:
        580;

    line-height:
        1.15;

    letter-spacing:
        -.03em;
}


.about-value-text {
    max-width:
        280px;

    margin:
        0;

    color:
        #76767f;

    font-size:
        13px;

    line-height:
        1.7;
}


/* TABLET */

@media (max-width: 900px) {

    .about-page
    .content-page-layout {
        grid-template-columns:
            1fr !important;

        gap:
            45px !important;
    }


    .about-showcase {
        min-height:
            330px;
    }


    .about-values {
        grid-template-columns:
            1fr 1fr;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .about-page {
        padding:
            112px 0
            70px !important;
    }


    .about-page > .container {
        width:
            calc(100% - 32px)
            !important;
    }


    .about-page
    .content-page-heading {
        padding-bottom:
            38px !important;
    }


    .about-page
    .content-page-heading h1 {
        font-size:
            64px !important;
    }


    .about-page
    .content-page-layout {
        padding:
            42px 0
            55px !important;

        gap:
            38px !important;
    }


    .about-page
    .content-page-body
    .about-lead {
        font-size:
            21px !important;
    }


    .about-page
    .content-page-body {
        font-size:
            15px !important;
    }


    .about-showcase {
        min-height:
            300px;

        padding:
            27px;
    }


    .about-showcase h2 {
        font-size:
            38px;
    }


    .about-values {
        grid-template-columns:
            1fr;
    }


    .about-value {
        min-height:
            220px;
    }

}

/* END ABOUT PAGE */


/* ABOUT SHOWCASE ADMIN IMAGE */

.about-showcase.has-image {
    background:
        #101014 !important;
}


.about-showcase-image {
    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    opacity:
        .52;
}


.about-showcase.has-image::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(8,8,12,.16) 0%,
            rgba(8,8,12,.38) 42%,
            rgba(8,8,12,.94) 100%
        );

    pointer-events:
        none;
}


.about-showcase.has-image
> *:not(.about-showcase-image) {
    position:
        relative;

    z-index:
        2;
}



/* =========================================================
   CONTACT PAGE TWO COLUMN LAYOUT
   ========================================================= */

.content-page-layout:has(.contact-form-card) {
    display: grid !important;

    grid-template-columns:
        minmax(300px, .72fr)
        minmax(0, 1.28fr) !important;

    grid-template-areas:
        "intro intro"
        "info form" !important;

    column-gap:
        28px !important;

    row-gap:
        48px !important;

    align-items:
        stretch !important;
}


/* INTRO TEXT */

.content-page-layout:has(.contact-form-card)
.content-page-body {
    grid-area:
        intro !important;

    width:
        100% !important;

    max-width:
        820px !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* CONTACT INFORMATION LEFT */

.content-page-layout:has(.contact-form-card)
.contact-information {
    grid-area:
        info !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        520px !important;

    margin:
        0 !important;

    padding:
        36px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-self:
        stretch !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    background:
        #111115 !important;
}


.content-page-layout:has(.contact-form-card)
.contact-information h2 {
    margin:
        0 0
        28px !important;

    padding-bottom:
        24px !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);

    font-size:
        25px !important;
}


.content-page-layout:has(.contact-form-card)
.contact-information > div {
    padding:
        22px 0 !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.content-page-layout:has(.contact-form-card)
.contact-information > div:last-child {
    border-bottom:
        0;
}


/* FORM RIGHT */

.content-page-layout:has(.contact-form-card)
.contact-form-card {
    grid-area:
        form !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        520px !important;

    margin:
        0 !important;

    padding:
        42px !important;

    align-self:
        stretch !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    background:
        #111115 !important;
}


.content-page-layout:has(.contact-form-card)
.contact-form-card > .eyebrow {
    margin:
        0 0
        14px !important;
}


.content-page-layout:has(.contact-form-card)
.contact-form-card > h2 {
    margin:
        0 0
        36px !important;

    font-size:
        clamp(
            38px,
            3.5vw,
            58px
        ) !important;

    line-height:
        1 !important;

    letter-spacing:
        -.045em !important;
}


/* FORM FIELDS */

.content-page-layout:has(.contact-form-card)
.contact-form {
    gap:
        18px !important;
}


.content-page-layout:has(.contact-form-card)
.contact-form-grid {
    gap:
        18px !important;
}


.content-page-layout:has(.contact-form-card)
.contact-form input {
    height:
        58px !important;
}


.content-page-layout:has(.contact-form-card)
.contact-form textarea {
    min-height:
        150px !important;

    resize:
        vertical;
}


.content-page-layout:has(.contact-form-card)
.contact-form button[type="submit"] {
    min-height:
        60px !important;

    margin-top:
        6px !important;
}


/* TABLET */

@media (max-width: 950px) {

    .content-page-layout:has(.contact-form-card) {
        grid-template-columns:
            1fr !important;

        grid-template-areas:
            "intro"
            "info"
            "form" !important;

        gap:
            28px !important;
    }


    .content-page-layout:has(.contact-form-card)
    .contact-information,
    .content-page-layout:has(.contact-form-card)
    .contact-form-card {
        min-height:
            0 !important;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .content-page-layout:has(.contact-form-card) {
        row-gap:
            22px !important;
    }


    .content-page-layout:has(.contact-form-card)
    .contact-information {
        padding:
            24px !important;
    }


    .content-page-layout:has(.contact-form-card)
    .contact-form-card {
        padding:
            26px !important;
    }


    .content-page-layout:has(.contact-form-card)
    .contact-form-card > h2 {
        font-size:
            38px !important;

        margin-bottom:
            28px !important;
    }

}



/* CONTACT AJAX FEEDBACK */

.contact-ajax-alert {
    margin:
        0 0
        24px !important;

    opacity:
        0;

    transform:
        translateY(-6px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.contact-ajax-alert.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


.contact-form button.is-loading {
    opacity:
        .65;

    cursor:
        wait !important;

    pointer-events:
        none;
}


.contact-form button:disabled {
    cursor:
        wait;
}



/* =========================================================
   SHOP AJAX LOADING
   ========================================================= */

#shop-products {
    transition:
        opacity .18s ease;
}


#shop-products.shop-is-loading {
    opacity:
        .42;

    pointer-events:
        none;

    cursor:
        wait;
}


#shop-products.shop-is-loading
.shop-product-grid {
    transform:
        translateY(3px);
}


.shop-product-grid {
    transition:
        transform .18s ease;
}



/* PRODUCT PAGE AJAX CART */

.add-to-cart-form
.add-cart-button {
    transition:
        opacity .2s ease,
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.add-to-cart-form
.add-cart-button.is-loading {
    opacity:
        .65;

    cursor:
        wait;
}


.add-to-cart-form
.add-cart-button.is-added {
    background:
        #ffffff;

    color:
        #0d0d10;

    border-color:
        #ffffff;
}


.add-to-cart-form
.add-cart-button.is-error {
    border-color:
        rgba(220,100,100,.7);

    background:
        rgba(220,100,100,.08);

    color:
        #efb0b0;
}


.product-cart-message {
    min-height:
        20px;

    margin-top:
        12px;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .2px;

    opacity:
        0;

    transform:
        translateY(-3px);

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.product-cart-message.success,
.product-cart-message.error {
    opacity:
        1;

    transform:
        translateY(0);
}


.product-cart-message.success {
    color:
        #9b90ff;
}


.product-cart-message.error {
    color:
        #e4a0a0;
}



/* =========================================================
   DIORAMA LUXURY OLIVE / CREAM THEME
   ========================================================= */

:root {
    --lux-olive: #443f26;
    --lux-olive-deep: #302e1b;
    --lux-olive-soft: #5a5535;

    --lux-cream: #f0e4d3;
    --lux-cream-soft: #f7efe3;
    --lux-cream-deep: #e4d5bd;

    --lux-gold: #dec88d;
    --lux-gold-deep: #ad9155;

    --lux-ink: #27251a;
    --lux-muted: #8b806e;

    --lux-border: rgba(93, 79, 45, .22);
    --lux-dark-border: rgba(222, 200, 141, .24);
}


/* GLOBAL */

html {
    background: var(--lux-cream);
}


body {
    background:
        var(--lux-cream) !important;

    color:
        var(--lux-ink) !important;
}


::selection {
    background:
        var(--lux-gold);

    color:
        var(--lux-olive-deep);
}


main {
    background:
        var(--lux-cream) !important;
}


main h1,
main h2,
main h3,
main h4 {
    color:
        var(--lux-olive-deep);
}


.eyebrow,
.product-category,
.browse-group-eyebrow,
.home-hero-slide-caption > span {
    color:
        var(--lux-gold-deep) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    background:
        rgba(48, 46, 27, .97) !important;

    border-bottom:
        1px solid
        rgba(222, 200, 141, .22) !important;

    box-shadow:
        0 8px 30px
        rgba(32, 30, 16, .12) !important;
}


.site-header .logo {
    color:
        var(--lux-cream) !important;

    letter-spacing:
        .26em !important;
}


.main-nav a,
.header-actions a,
.header-action,
.cart-toggle {
    color:
        rgba(240, 228, 211, .82) !important;
}


.main-nav a:hover,
.header-actions a:hover,
.header-action:hover,
.cart-toggle:hover {
    color:
        var(--lux-gold) !important;
}


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

.hero {
    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(103, 94, 57, .38),
            transparent 35%
        ),
        radial-gradient(
            circle at 60% 80%,
            rgba(222, 200, 141, .09),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #302e1b 0%,
            #443f26 55%,
            #34311d 100%
        ) !important;

    border-bottom:
        1px solid
        rgba(222, 200, 141, .24) !important;
}


.hero h1 {
    color:
        var(--lux-cream-soft) !important;
}


.hero .eyebrow {
    color:
        var(--lux-gold) !important;
}


.hero-description {
    color:
        rgba(240, 228, 211, .70) !important;
}


.hero-buttons a:first-child {
    background:
        var(--lux-cream) !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        var(--lux-cream) !important;
}


.hero-buttons a:first-child:hover {
    background:
        var(--lux-gold) !important;

    border-color:
        var(--lux-gold) !important;
}


.hero-buttons a:last-child {
    background:
        transparent !important;

    color:
        var(--lux-cream) !important;

    border-color:
        rgba(222, 200, 141, .52) !important;
}


.hero-buttons a:last-child:hover {
    border-color:
        var(--lux-gold) !important;

    color:
        var(--lux-gold) !important;
}


/* HERO SLIDER */

.hero-slider-shell::before {
    border-color:
        rgba(222, 200, 141, .32) !important;
}


.home-hero-slider {
    background:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(222, 200, 141, .34) !important;

    box-shadow:
        0 35px 80px
        rgba(30, 27, 13, .30) !important;
}


.home-hero-slide-caption > span {
    color:
        var(--lux-gold) !important;
}


.home-hero-slider-dot {
    background:
        rgba(240, 228, 211, .30) !important;
}


.home-hero-slider-dot.is-active {
    background:
        var(--lux-cream) !important;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

section:not(.hero) {
    border-color:
        var(--lux-border);
}


.section-heading h2,
.shop-heading h1,
.browse-heading h1 {
    color:
        var(--lux-olive-deep) !important;
}


.section-heading p,
.shop-heading p,
.browse-heading p {
    color:
        var(--lux-muted) !important;
}


/* =========================================================
   PRODUCT CARDS
   ========================================================= */

.product-card {
    background:
        var(--lux-cream-soft) !important;

    border:
        1px solid
        rgba(123, 104, 63, .18) !important;

    box-shadow:
        0 8px 28px
        rgba(68, 63, 38, .06) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}


.product-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(173, 145, 85, .42) !important;

    box-shadow:
        0 20px 46px
        rgba(68, 63, 38, .13) !important;
}


.product-image {
    background:
        var(--lux-olive-deep) !important;
}


.product-info {
    background:
        var(--lux-cream-soft) !important;
}


.product-info h3,
.product-info h3 a {
    color:
        var(--lux-olive-deep) !important;
}


.product-info .product-price,
.product-price {
    color:
        var(--lux-olive) !important;
}


.product-info .product-category,
.product-category {
    color:
        var(--lux-gold-deep) !important;
}


.product-card .old-price {
    color:
        rgba(68, 63, 38, .45) !important;
}


/* =========================================================
   ADD TO CART
   ========================================================= */

.shop-add-cart,
.browse-group-add-cart,
.add-cart-button,
.button-primary {
    background:
        var(--lux-olive) !important;

    color:
        var(--lux-cream-soft) !important;

    border-color:
        var(--lux-olive) !important;
}


.shop-add-cart:hover,
.browse-group-add-cart:hover:not(:disabled),
.add-cart-button:hover,
.button-primary:hover {
    background:
        var(--lux-gold) !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        var(--lux-gold) !important;
}


.shop-add-cart.is-added,
.browse-group-add-cart.is-added,
.add-cart-button.is-added {
    background:
        var(--lux-gold) !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        var(--lux-gold) !important;
}


/* =========================================================
   SHOP FILTERS
   ========================================================= */

.shop-sidebar,
.filters,
.filter-panel,
.shop-filters {
    background:
        #eadcc5 !important;

    border-color:
        rgba(93,79,45,.18) !important;

    color:
        var(--lux-olive-deep) !important;
}


.filter-form {
    color:
        var(--lux-olive-deep) !important;
}


.filter-form label,
.filter-title,
.filter-section-title {
    color:
        var(--lux-olive) !important;
}


.filter-form input,
.filter-form select {
    background:
        var(--lux-cream-soft) !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(93,79,45,.24) !important;
}


.filter-form input::placeholder {
    color:
        rgba(68,63,38,.48) !important;
}


.filter-form input:focus,
.filter-form select:focus {
    border-color:
        var(--lux-gold-deep) !important;
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

input,
textarea,
select {
    accent-color:
        var(--lux-gold-deep);
}


main input,
main textarea,
main select {
    background:
        var(--lux-cream-soft);

    color:
        var(--lux-olive-deep);

    border-color:
        rgba(93,79,45,.24);
}


main input::placeholder,
main textarea::placeholder {
    color:
        rgba(68,63,38,.46);
}


main input:focus,
main textarea:focus,
main select:focus {
    border-color:
        var(--lux-gold-deep);

    outline:
        none;
}


/* =========================================================
   PRODUCT PAGE
   ========================================================= */

.product-page {
    background:
        var(--lux-cream) !important;
}


.product-page h1 {
    color:
        var(--lux-olive-deep) !important;
}


.product-short-description,
.product-sku {
    color:
        var(--lux-muted) !important;
}


.product-page-price {
    color:
        var(--lux-olive-deep) !important;
}


.product-stock-status {
    color:
        var(--lux-olive-soft) !important;
}


.status-dot {
    background:
        var(--lux-gold-deep) !important;
}


.product-meta {
    border-color:
        var(--lux-border) !important;
}


.product-meta > div {
    border-color:
        var(--lux-border) !important;
}


.product-meta span {
    color:
        var(--lux-muted) !important;
}


.product-meta strong {
    color:
        var(--lux-olive-deep) !important;
}


/* =========================================================
   CONTENT / ABOUT / CONTACT / FAQ
   ========================================================= */

.content-page {
    background:
        var(--lux-cream) !important;
}


.content-page-heading h1 {
    color:
        var(--lux-olive-deep) !important;
}


.content-page-body {
    color:
        var(--lux-muted) !important;
}


.content-page-body strong {
    color:
        var(--lux-olive-deep) !important;
}


.contact-information,
.contact-form-card {
    background:
        var(--lux-cream-soft) !important;

    border-color:
        rgba(93,79,45,.20) !important;

    color:
        var(--lux-olive-deep) !important;
}


.contact-information h2,
.contact-form-card h2 {
    color:
        var(--lux-olive-deep) !important;
}


.contact-information > div {
    border-color:
        rgba(93,79,45,.16) !important;
}


.contact-information span {
    color:
        var(--lux-gold-deep) !important;
}


.contact-information strong,
.contact-information a {
    color:
        var(--lux-olive-deep) !important;
}


/* ABOUT */

.about-showcase {
    border-color:
        rgba(222,200,141,.30) !important;

    background:
        linear-gradient(
            145deg,
            #302e1b,
            #443f26
        ) !important;
}


.about-showcase h2 {
    color:
        var(--lux-cream-soft) !important;
}


.about-showcase-text {
    color:
        rgba(240,228,211,.66) !important;
}


.about-showcase-link {
    color:
        var(--lux-cream) !important;

    border-color:
        rgba(222,200,141,.32) !important;
}


.about-value {
    background:
        var(--lux-cream-soft) !important;

    border-color:
        rgba(93,79,45,.16) !important;
}


.about-value h3 {
    color:
        var(--lux-olive-deep) !important;
}


.about-value div > p:first-child {
    color:
        var(--lux-gold-deep) !important;
}


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

.cart-page {
    background:
        var(--lux-cream) !important;
}


.cart-item {
    border-color:
        var(--lux-border) !important;
}


.cart-product-image {
    background:
        var(--lux-olive-deep) !important;
}


.cart-product-universe {
    color:
        var(--lux-gold-deep) !important;
}


.cart-product-name,
.cart-item-price,
.cart-line-total {
    color:
        var(--lux-olive-deep) !important;
}


.cart-summary {
    background:
        var(--lux-cream-soft) !important;

    border-color:
        var(--lux-border) !important;

    color:
        var(--lux-olive-deep) !important;
}


.summary-line {
    border-color:
        var(--lux-border) !important;
}


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

.mini-cart {
    background:
        var(--lux-olive-deep) !important;

    color:
        var(--lux-cream) !important;

    border-color:
        rgba(222,200,141,.25) !important;
}


.mini-cart-header {
    border-color:
        rgba(222,200,141,.18) !important;
}


.mini-cart-header h2,
.mini-cart-item-info strong,
.mini-cart-footer strong {
    color:
        var(--lux-cream-soft) !important;
}


.mini-cart-item-wrap {
    border-color:
        rgba(222,200,141,.15) !important;
}


.mini-cart-item-info span {
    color:
        rgba(240,228,211,.56) !important;
}


.mini-cart-close,
.mini-cart-remove {
    color:
        var(--lux-gold) !important;
}


.mini-cart .button-primary {
    background:
        var(--lux-cream) !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        var(--lux-cream) !important;
}


/* =========================================================
   CHECKOUT
   ========================================================= */

.checkout-page {
    background:
        var(--lux-cream) !important;
}


.checkout-form-section,
.checkout-summary,
.order-summary {
    background:
        var(--lux-cream-soft) !important;

    border-color:
        var(--lux-border) !important;
}


.checkout-page h1,
.checkout-page h2,
.checkout-page h3 {
    color:
        var(--lux-olive-deep) !important;
}


/* =========================================================
   SEARCH OVERLAY
   ========================================================= */

.search-overlay {
    background:
        rgba(48,46,27,.98) !important;
}


.search-overlay input {
    color:
        var(--lux-cream-soft) !important;

    border-color:
        rgba(222,200,141,.35) !important;

    background:
        transparent !important;
}


.search-overlay input::placeholder {
    color:
        rgba(240,228,211,.40) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer,
footer {
    background:
        var(--lux-olive-deep) !important;

    color:
        rgba(240,228,211,.67) !important;

    border-color:
        rgba(222,200,141,.18) !important;
}


.site-footer h3,
.site-footer h4,
footer h3,
footer h4 {
    color:
        var(--lux-cream-soft) !important;
}


.site-footer a,
footer a {
    color:
        rgba(240,228,211,.70) !important;
}


.site-footer a:hover,
footer a:hover {
    color:
        var(--lux-gold) !important;
}


/* =========================================================
   GENERIC SECONDARY BUTTONS
   ========================================================= */

.button:not(.button-primary),
.button-secondary {
    border-color:
        rgba(68,63,38,.35);

    color:
        var(--lux-olive-deep);
}


.button:not(.button-primary):hover,
.button-secondary:hover {
    border-color:
        var(--lux-gold-deep);

    color:
        var(--lux-gold-deep);
}


/* =========================================================
   LUXURY DETAILS
   ========================================================= */

.product-card,
.contact-information,
.contact-form-card,
.cart-summary,
.checkout-form-section,
.checkout-summary {
    border-radius:
        0 !important;
}


.product-card::selection,
.contact-form-card::selection {
    background:
        var(--lux-gold);
}


a {
    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        opacity .2s ease;
}



/* =========================================================
   OLIVE / CREAM THEME — SECOND PASS
   FIX REMAINING OLD DARK SECTIONS
   ========================================================= */


/* =========================================================
   GLOBAL PAGE BACKGROUNDS
   ========================================================= */

body,
main,
.page-shell,
.shop-page,
.browse-page,
.collections-page,
.collection-page,
.product-page,
.cart-page,
.checkout-page,
.content-page {
    background: var(--lux-cream) !important;
    color: var(--lux-olive-deep) !important;
}


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

.shop-hero,
.shop-header,
.shop-intro,
.shop-page-header,
.shop-heading-section {
    background:
        linear-gradient(
            135deg,
            #443f26 0%,
            #302e1b 100%
        ) !important;

    border-color:
        rgba(222,200,141,.22) !important;
}


.shop-hero h1,
.shop-header h1,
.shop-intro h1,
.shop-page-header h1,
.shop-heading h1 {
    color:
        var(--lux-cream-soft) !important;
}


.shop-hero p,
.shop-header p,
.shop-intro p,
.shop-page-header p,
.shop-heading p {
    color:
        rgba(240,228,211,.68) !important;
}


.shop-hero .eyebrow,
.shop-header .eyebrow,
.shop-intro .eyebrow,
.shop-page-header .eyebrow {
    color:
        var(--lux-gold) !important;
}


/* =========================================================
   SHOP PRODUCTS AREA
   ========================================================= */

#shop-products,
.shop-section,
.shop-layout,
.shop-content,
.shop-products,
.shop-products-area {
    background:
        var(--lux-cream) !important;
}


.shop-toolbar,
.shop-results-head {
    color:
        var(--lux-olive-deep) !important;
}


.shop-toolbar select,
.shop-sort select {
    background:
        var(--lux-cream-soft) !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(93,79,45,.25) !important;
}


.shop-results-count,
.shop-toolbar span,
.shop-sort > span {
    color:
        var(--lux-muted) !important;
}


/* FILTER COLUMN */

.shop-sidebar,
.shop-filters,
.filters,
.filter-panel {
    background:
        #e9dcc7 !important;

    border-color:
        rgba(93,79,45,.18) !important;
}


.shop-sidebar *,
.shop-filters *,
.filters *,
.filter-panel * {
    border-color:
        rgba(93,79,45,.17);
}


.shop-sidebar h2,
.shop-sidebar h3,
.shop-filters h2,
.shop-filters h3,
.filters h2,
.filters h3,
.filter-panel h2,
.filter-panel h3 {
    color:
        var(--lux-olive-deep) !important;
}


.shop-sidebar label,
.shop-filters label,
.filter-section label {
    color:
        var(--lux-olive) !important;
}


.shop-sidebar a,
.shop-filters a {
    color:
        var(--lux-muted) !important;
}


.shop-sidebar input,
.shop-sidebar select,
.shop-filters input,
.shop-filters select {
    background:
        var(--lux-cream-soft) !important;

    color:
        var(--lux-olive-deep) !important;

    border:
        1px solid
        rgba(93,79,45,.22) !important;
}


.shop-sidebar button[type="submit"],
.shop-filters button[type="submit"],
.filter-form button[type="submit"] {
    background:
        var(--lux-olive) !important;

    color:
        var(--lux-cream-soft) !important;

    border-color:
        var(--lux-olive) !important;
}


.shop-sidebar button[type="submit"]:hover,
.shop-filters button[type="submit"]:hover,
.filter-form button[type="submit"]:hover {
    background:
        var(--lux-gold) !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        var(--lux-gold) !important;
}


/* =========================================================
   BROWSE PAGES
   GAMES / MOVIES / COLLECTIONS
   ========================================================= */

.browse-page,
.browse-page-header,
.browse-content,
.browse-section,
.browse-groups,
.collections-page {
    background:
        var(--lux-cream) !important;
}


.browse-heading,
.browse-hero,
.collection-heading {
    background:
        var(--lux-cream) !important;
}


.browse-heading h1,
.browse-hero h1,
.collection-heading h1 {
    color:
        var(--lux-olive-deep) !important;
}


.browse-heading p,
.browse-hero p,
.collection-heading p {
    color:
        var(--lux-muted) !important;
}


.browse-heading .eyebrow,
.browse-hero .eyebrow,
.collection-heading .eyebrow {
    color:
        var(--lux-gold-deep) !important;
}


.browse-count,
.browse-meta,
.browse-piece-count {
    color:
        var(--lux-muted) !important;

    border-color:
        rgba(93,79,45,.18) !important;
}


/* PRODUCT CARDS ON BROWSE PAGES */

.browse-page .product-card,
.collection-page .product-card,
.browse-products .product-card {
    background:
        var(--lux-cream-soft) !important;

    border-color:
        rgba(93,79,45,.20) !important;
}


.browse-page .product-info,
.collection-page .product-info {
    background:
        var(--lux-cream-soft) !important;
}


/* =========================================================
   COLLECTION GROUP CARDS
   ========================================================= */

.browse-group-card,
.collection-card,
.home-category-card,
.world-card,
.category-card {
    background:
        var(--lux-olive) !important;

    color:
        var(--lux-cream) !important;

    border-color:
        rgba(222,200,141,.28) !important;
}


.browse-group-card h2,
.browse-group-card h3,
.collection-card h2,
.collection-card h3,
.home-category-card h3,
.world-card h3,
.category-card h3 {
    color:
        var(--lux-cream-soft) !important;
}


.browse-group-card p,
.collection-card p,
.home-category-card p,
.world-card p,
.category-card p {
    color:
        rgba(240,228,211,.66) !important;
}


.browse-group-card .eyebrow,
.collection-card .eyebrow,
.home-category-card .eyebrow {
    color:
        var(--lux-gold) !important;
}


.browse-group-card:hover,
.collection-card:hover,
.home-category-card:hover,
.world-card:hover,
.category-card:hover {
    background:
        var(--lux-olive-deep) !important;

    border-color:
        var(--lux-gold) !important;
}


/* =========================================================
   HOMEPAGE NON-HERO SECTIONS
   ========================================================= */

.homepage-root,
#categories,
#featured,
#home-new-arrivals,
#home-collections {
    background:
        var(--lux-cream) !important;
}


#categories h2,
#featured h2,
#home-new-arrivals h2,
#home-collections h2 {
    color:
        var(--lux-olive-deep) !important;
}


#categories .section-heading p,
#featured .section-heading p,
#home-new-arrivals .section-heading p,
#home-collections .section-heading p {
    color:
        var(--lux-muted) !important;
}


/* =========================================================
   PRODUCT GRID OUTER BACKGROUND
   ========================================================= */

.product-grid,
.shop-product-grid,
.browse-product-grid,
.collection-products {
    background:
        transparent !important;
}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.content-page-layout:has(.contact-form-card) {
    background:
        transparent !important;
}


.content-page-layout:has(.contact-form-card)
.contact-information {
    background:
        var(--lux-olive) !important;

    color:
        var(--lux-cream) !important;

    border-color:
        rgba(222,200,141,.26) !important;
}


.content-page-layout:has(.contact-form-card)
.contact-information h2 {
    color:
        var(--lux-cream-soft) !important;

    border-color:
        rgba(222,200,141,.18) !important;
}


.content-page-layout:has(.contact-form-card)
.contact-information > div {
    border-color:
        rgba(222,200,141,.16) !important;
}


.content-page-layout:has(.contact-form-card)
.contact-information span {
    color:
        var(--lux-gold) !important;
}


.content-page-layout:has(.contact-form-card)
.contact-information strong,
.content-page-layout:has(.contact-form-card)
.contact-information a {
    color:
        var(--lux-cream-soft) !important;
}


.content-page-layout:has(.contact-form-card)
.contact-form-card {
    background:
        var(--lux-cream-soft) !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(93,79,45,.20) !important;
}


.content-page-layout:has(.contact-form-card)
.contact-form-card h2 {
    color:
        var(--lux-olive-deep) !important;
}


.content-page-layout:has(.contact-form-card)
.contact-form-card .eyebrow {
    color:
        var(--lux-gold-deep) !important;
}


.content-page-layout:has(.contact-form-card)
.contact-form input,
.content-page-layout:has(.contact-form-card)
.contact-form textarea {
    background:
        #fffaf1 !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(93,79,45,.22) !important;
}


.content-page-layout:has(.contact-form-card)
.contact-form button[type="submit"] {
    background:
        var(--lux-olive) !important;

    color:
        var(--lux-cream) !important;

    border-color:
        var(--lux-olive) !important;
}


/* =========================================================
   CHECKOUT PAGE
   ========================================================= */

.checkout-page,
.checkout-container,
.checkout-layout,
.checkout-main {
    background:
        var(--lux-cream) !important;
}


.checkout-header,
.checkout-topbar {
    color:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(93,79,45,.16) !important;
}


.checkout-page .eyebrow {
    color:
        var(--lux-gold-deep) !important;
}


.checkout-page h1 {
    color:
        var(--lux-olive-deep) !important;
}


.checkout-form,
.checkout-fields,
.checkout-form-section {
    background:
        var(--lux-cream-soft) !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(93,79,45,.19) !important;
}


.checkout-form-section h2,
.checkout-form-section h3 {
    color:
        var(--lux-olive-deep) !important;
}


.checkout-form-section p {
    color:
        var(--lux-muted) !important;
}


.checkout-form-section label {
    color:
        var(--lux-muted) !important;
}


.checkout-form-section input,
.checkout-form-section textarea,
.checkout-form-section select {
    background:
        #fffaf1 !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(93,79,45,.22) !important;
}


/* CHECKOUT ORDER SUMMARY */

.checkout-summary,
.order-summary,
.checkout-order {
    background:
        var(--lux-olive) !important;

    color:
        var(--lux-cream) !important;

    border-color:
        rgba(222,200,141,.24) !important;
}


.checkout-summary h2,
.checkout-summary h3,
.order-summary h2,
.order-summary h3,
.checkout-order h2,
.checkout-order h3 {
    color:
        var(--lux-cream-soft) !important;
}


.checkout-summary span,
.order-summary span,
.checkout-order span {
    color:
        rgba(240,228,211,.68) !important;
}


.checkout-summary strong,
.order-summary strong,
.checkout-order strong {
    color:
        var(--lux-cream-soft) !important;
}


.checkout-summary hr,
.order-summary hr,
.checkout-order hr {
    border-color:
        rgba(222,200,141,.18) !important;
}


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

.cart-page,
.cart-container,
.cart-layout,
.cart-main {
    background:
        var(--lux-cream) !important;
}


.cart-page h1,
.cart-page h2,
.cart-page h3 {
    color:
        var(--lux-olive-deep) !important;
}


.cart-item {
    background:
        transparent !important;

    border-color:
        rgba(93,79,45,.18) !important;
}


.cart-product-main {
    color:
        var(--lux-olive-deep) !important;
}


.cart-product-main a,
.cart-product-main strong {
    color:
        var(--lux-olive-deep) !important;
}


.cart-item input[type="number"] {
    background:
        var(--lux-olive) !important;

    color:
        var(--lux-cream-soft) !important;

    border-color:
        var(--lux-olive) !important;
}


.update-cart-button {
    background:
        var(--lux-olive) !important;

    color:
        var(--lux-cream) !important;

    border-color:
        var(--lux-olive) !important;
}


.cart-summary {
    background:
        var(--lux-cream-soft) !important;

    color:
        var(--lux-olive-deep) !important;
}


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

.mini-cart {
    background:
        var(--lux-olive-deep) !important;

    border-left:
        1px solid
        rgba(222,200,141,.28) !important;
}


.mini-cart-footer {
    background:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(222,200,141,.16) !important;
}


.mini-cart-footer .button,
.mini-cart-footer a {
    min-height:
        58px;
}


.mini-cart-footer .button:not(.button-primary),
.mini-cart-footer a:not(.button-primary) {
    background:
        transparent !important;

    color:
        var(--lux-cream) !important;

    border:
        1px solid
        rgba(222,200,141,.42) !important;
}


.mini-cart-footer .button-primary {
    background:
        var(--lux-cream) !important;

    color:
        var(--lux-olive-deep) !important;

    border:
        1px solid
        var(--lux-cream) !important;
}


/* =========================================================
   PRODUCT PAGE
   ========================================================= */

.product-page {
    background:
        var(--lux-cream) !important;
}


.product-page
.product-gallery,
.product-page
.product-main-image {
    background:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(93,79,45,.20) !important;
}


.product-page h1 {
    color:
        var(--lux-olive-deep) !important;
}


.product-page
.add-cart-button {
    background:
        var(--lux-olive) !important;

    color:
        var(--lux-cream-soft) !important;
}


/* =========================================================
   PRODUCT DETAILS / RELATED
   ========================================================= */

.product-content-section,
.product-specifications,
.related-products {
    background:
        var(--lux-cream) !important;

    border-color:
        rgba(93,79,45,.18) !important;
}


.product-content-section h2,
.product-specifications h2,
.related-products h2 {
    color:
        var(--lux-olive-deep) !important;
}


.specifications-grid > div {
    background:
        var(--lux-cream-soft) !important;

    border-color:
        rgba(93,79,45,.18) !important;
}


.specifications-grid span {
    color:
        var(--lux-gold-deep) !important;
}


.specifications-grid strong {
    color:
        var(--lux-olive-deep) !important;
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-page,
.faq-list,
.faq-section {
    background:
        var(--lux-cream) !important;
}


.faq-item,
.faq-card {
    background:
        var(--lux-cream-soft) !important;

    color:
        var(--lux-olive-deep) !important;

    border-color:
        rgba(93,79,45,.18) !important;
}


.faq-item h2,
.faq-item h3,
.faq-item summary,
.faq-card h3 {
    color:
        var(--lux-olive-deep) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background:
        var(--lux-olive-deep) !important;

    border-top:
        1px solid
        rgba(222,200,141,.20) !important;
}


/* =========================================================
   REMOVE OLD PURPLE ACCENTS
   ========================================================= */

.eyebrow,
.product-category,
.admin-eyebrow,
.home-hero-slide-caption > span,
.browse-group-eyebrow {
    color:
        var(--lux-gold-deep) !important;
}


.hero .eyebrow,
.site-footer .eyebrow,
.mini-cart .eyebrow,
.checkout-summary .eyebrow {
    color:
        var(--lux-gold) !important;
}


/* =========================================================
   LINES / BORDERS
   ========================================================= */

main hr {
    border-color:
        rgba(93,79,45,.18) !important;
}


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

@media (max-width: 850px) {

    .shop-hero,
    .shop-header,
    .shop-intro,
    .shop-page-header {
        background:
            var(--lux-olive) !important;
    }


    .shop-layout,
    .shop-content {
        background:
            var(--lux-cream) !important;
    }


    .content-page-layout:has(.contact-form-card)
    .contact-information {
        background:
            var(--lux-olive) !important;
    }


    .checkout-summary,
    .order-summary {
        background:
            var(--lux-olive) !important;
    }

}