/*
Theme Name:  Blocksy Child
Theme URI:
Description: Child theme for Blocksy — Essentials Clothing Store
Author:      Essentials Clothing
Template:    blocksy
Version:     1.0.36
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-child
*/


/* ============================================================
   == Global / Design Tokens
   ============================================================ */


:root {
    --color-dark:   #111111;
    --color-white:  #ffffff;
    --color-light:  #f5f5f5;
    --color-accent: #c9a96a;
    /* Body font: Lato (enqueued in functions.php). Feeds Blocksy's own var. */
    --theme-font-family: 'Lato', Arial, Helvetica, sans-serif;
}

body {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
}


/* ============================================================
   == Header
   ============================================================ */

/* Logo — split into two lines: ESSENTIALS large, CLOTHING small */
.ct-header .site-title a {
    display: inline-block;
    line-height: 1.2;
    font-size: 0;
    color: transparent;
}
.ct-header .site-title a::before {
    content: "ESSENTIALS";
    display: block;
    font-size: 28px;
    color: var(--color-dark);
    font-family: Poppins, sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.ct-header .site-title a::after {
    content: "FEAR OF GOD";
    display: block;
    font-size: 12px;
    color: var(--color-dark);
    font-family: Poppins, sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: center;
}

/* Nav links — uppercase, spaced, medium weight, black */
.ct-header .ct-menu-link {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-dark) !important;
    text-decoration: none !important;
}

/* Nav stays black on hover — Blocksy native indicator handles the underline */
.ct-header li:hover > .ct-menu-link,
.ct-header li.current-menu-item > .ct-menu-link,
.ct-header li.current-menu-ancestor > .ct-menu-link {
    color: var(--color-dark) !important;
}

/* Prevent nav from collapsing into More dropdown */
.ct-header .ct-nav .ct-more-nav-items { display: none !important; }
.ct-header .ct-nav .ct-nav-links > li.more-items-holder { display: none !important; }

/* Utility items — dim SVG icons on hover only, don't touch the element itself */
.ct-header-search:hover svg,
.ct-header-cart:hover svg {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.ct-header-account:hover .ct-label {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

/* Wishlist heart — dark, no underline */
.ct-header a[href*="wishlist"],
.ct-header .ct-header-text a {
    color: var(--color-dark) !important;
    text-decoration: none !important;
    font-size: 22px !important;
    line-height: 1;
    transition: color 0.2s ease;
}
.ct-header a[href*="wishlist"]:hover,
.ct-header .ct-header-text a:hover {
    color: #4a4a4a !important;
    text-decoration: none !important;
}

/* Cart price — smaller than cart icon */
.ct-header .ct-cart-total,
.ct-header .woocommerce-Price-amount,
.ct-header .ct-label[data-price="yes"] {
    font-size: 11px !important;
}

/* Cart and search icons — consistent size */
.ct-header-cart .ct-icon-container svg,
.ct-header-search .ct-icon-container svg {
    width: 20px !important;
    height: 20px !important;
}

/* Top announcement bar — dark background, white text */
.ct-header [data-row="top"] {
    background: var(--color-dark);
    color: var(--color-white);
    font-size: 13px;
    text-align: center;
    padding: 8px 0;
}


/* ============================================================
   == Hero
   ============================================================ */

/* Hide page title on homepage */
.home .entry-header,
.home .page-title,
.home h1.entry-title {
    display: none !important;
}

/* Hide the page title on the About page (id 98) — ported from Customizer CSS */
.page-id-98 .entry-header,
.page-id-98 h1.page-title {
    display: none !important;
}


/* ============================================================
   == Category Grid
   ============================================================ */

/* Home category product rows ([products] shortcodes): product shown in full,
   scaled to fit with gray breathing room around it (matches the Best Selling
   cards / the reference), + a grid, never a slider. */
.home ul.products li.product img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
    background: var(--color-light);
}
@media (max-width: 767px) {
    .home ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px 12px !important;
        overflow: visible !important;
    }
    .home ul.products li.product {
        flex: none !important;
        width: auto !important;
        margin: 0 !important;
        scroll-snap-align: none !important;
    }
}



/* ============================================================
   == Featured Products / "Best Selling" carousel ([ec_bestsellers])
   ============================================================ */

.ec-bs {
    position: relative;
    max-width: 1200px;
    margin: 0 auto 44px;
}
.ec-bs-heading {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 26px;
}
.ec-bs-viewport { position: relative; }

.ec-bs-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.ec-bs-track::-webkit-scrollbar { display: none; }

/* Grid mode ([ec_bestsellers layout="grid"]) — same cards, no slide */
.ec-bs--grid .ec-bs-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    scroll-snap-type: none;
}
.ec-bs--grid .ec-bs-card { flex: none; }
@media (max-width: 1024px) { .ec-bs--grid .ec-bs-track { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .ec-bs--grid .ec-bs-track { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.ec-bs-card {
    flex: 0 0 calc(25% - 15px);
    scroll-snap-align: start;
    text-align: center;
    background: #fff;
}
@media (max-width: 1024px) { .ec-bs-card { flex-basis: calc(50% - 10px); } }
@media (max-width: 767px) {
    .ec-bs-track { gap: 14px; }
    .ec-bs-card { flex-basis: calc(50% - 7px); }   /* 2 cards per view, like the reference */
}

.ec-bs-media {
    position: relative;
    aspect-ratio: 1 / 1;               /* squarer tile, like the reference */
    background: var(--color-light);
}
.ec-bs-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;               /* show the whole product, scaled to fit */
    display: block;
    padding: 16px;                     /* gray breathing room around the product */
    box-sizing: border-box;
}
.ec-bs-badge {
    position: absolute;
    top: 12px;
    left: 0;
    background: #d87a31;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 10px;
    text-transform: uppercase;
}

/* Floating heart+cart pill on the right of the image (always visible) */
.ec-bs-actions {
    position: absolute;
    top: 12px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 9px;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.14);
}
.ec-bs-actions a { color: #111; line-height: 0; text-decoration: none; }
.ec-bs-actions svg { width: 20px; height: 20px; display: block; }
.ec-bs-actions .tinvwl_add_to_wishlist-text { display: none; }
.ec-bs-actions .tinv-wraper { position: static; margin: 0; height: auto; line-height: 0; }

/* TI renders its wishlist button as text here (no icon), so replace the
   clickable element with an SVG heart. The button still fires TI's add. */
.ec-bs-actions .tinv-wishlist a,
.ec-bs-actions .tinvwl_add_to_wishlist_button {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 0 !important;
    color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.ec-bs-actions .tinvwl-icon-heart,
.ec-bs-actions [class*="tinvwl-icon"]::before { display: none !important; }
.ec-bs-cart:hover { color: #d87a31; }

.ec-bs-title {
    display: block;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #333;
    text-decoration: none;
    margin: 14px 10px 6px;
}
.ec-bs-price { font-size: 15px; }
.ec-bs-price del .amount { color: #bbb; text-decoration: line-through; }
.ec-bs-price ins { text-decoration: none; }
.ec-bs-price ins .amount { color: #d87a31; font-weight: 600; }

/* Dots (the only navigation — arrows removed; swipe + dots like the reference) */
.ec-bs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.ec-bs-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
}
.ec-bs-dot.active { background: #111; }



/* ============================================================
   == Promo Banner / Brand Story
   ============================================================ */

.ec-brand-story {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.ec-brand-story__media img,
.ec-brand-story__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ec-brand-story__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 60px;
    background: var(--color-light);
}
.ec-brand-story__heading {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 20px;
}
.ec-brand-story__text p {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 16px;
}
.ec-brand-story__button {
    display: inline-block;
    margin-top: 10px;
    padding: 14px 32px;
    background: var(--color-dark);
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease;
}
.ec-brand-story__button:hover {
    background: #333;
}
@media (max-width: 767px) {
    .ec-brand-story {
        flex-direction: column;
    }
}


/* ============================================================
   == New Arrivals
   ============================================================ */


/* ============================================================
   == SEO Text Section
   ============================================================ */


/* ============================================================
   == Instagram Feed
   ============================================================ */

.ec-instagram-heading {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 24px;
}
.sb_instagram {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   == Trust Row
   ============================================================ */


/* ============================================================
   == Shop Toolbar
   ============================================================ */

/* Per-page switcher (markup output by functions.php) */
.ec-perpage a {
    font-size: 13px;
    text-transform: uppercase;
    color: #777;
    margin-right: 8px;
    text-decoration: none;
}
.ec-perpage a.active {
    color: #111;
    font-weight: 700;
}


/* ============================================================
   == Product Cards
   ============================================================ */

/* Grid — 4 columns desktop, 2 mobile, tight consistent gutters,
   capped width so cards stay compact on wide screens */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px 20px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 767px) {
    /* 2-col grid with white space on the sides (not edge-to-edge) */
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Icons hidden until the card is tapped once (tap JS adds .ec-tapped) */
    ul.products li.product .ec-card-actions { display: none; }
    ul.products li.product.ec-tapped .ec-card-actions { display: flex; }

    /* Mobile regular card: 3 minimal dark icons — heart | cart | search.
       The middle "Select options" button collapses into a cart icon so the
       row matches the reference (no wide orange button on mobile). */
    .ec-card-actions {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 22px;
    }
    .ec-card-actions .button.add_to_cart_button,
    .ec-card-actions .button.product_type_variable,
    .ec-card-actions a.button {
        flex: 0 0 auto !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: transparent !important;
        font-size: 0 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 24px 24px !important;
    }
    .ec-card-actions .yith-wcqv-button.ec-qv { width: 26px; height: 26px; }
    .ec-card-actions .yith-wcqv-button.ec-qv svg { width: 24px; height: 24px; }
    .ec-card-actions .tinvwl-icon-heart,
    .ec-card-actions [class*="tinvwl-icon"]::before { font-size: 24px !important; }

    /* White space on the sides of the Best Selling / category carousels too */
    .ec-bs {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Card base — white, centered, lift on hover */
ul.products li.product {
    background: #fff;
    position: relative;
    overflow: hidden; /* clips the zoomed image below to the card's edges */
    margin: 0 !important;
    text-align: center;
    transition: box-shadow .25s ease, transform .25s ease;
}
ul.products li.product:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

/* Consistent image ratio so cards never look oversized/uneven.
   Source photos have generous built-in whitespace around the garment, so
   `cover` alone barely crops it (box ratio is close to the photo's own
   ratio). A modest zoom crops into that padding so the product fills the
   tile, matching the reference — no new image files needed. */
ul.products li.product img {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: auto;
    object-fit: cover;
    background: var(--color-light);
    border-bottom: 1px solid transparent; /* reserved so hover adds no shift */
    transform: scale(1.28);
    transition: transform .35s ease, border-color .2s ease;
}
ul.products li.product:hover img {
    transform: scale(1.34);
}

/* Thin divider under the image on hover, like the reference card */
@media (min-width: 768px) {
    ul.products li.product:hover img {
        border-bottom-color: #e5e5e5;
    }
}

/* Hide the Blocksy "Categories" card layer (T-SHIRTS / HOODIES line).
   Blocksy wraps each card element in .entry-meta[data-id]; this id is the
   categories layer. Reference cards show no category under the price. */
[data-products] .product .entry-meta[data-id="vR1xnQtmPph0pfYAVDgew"] {
    display: none !important;
}

/* Title — Open Sans, dark, per reference spec */
ul.products li.product .woocommerce-loop-product__title {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #333;
    text-align: center;
    margin: 12px 10px 5px !important;
}

/* Prices — sale in orange, strikethrough in light grey */
ul.products li.product .price {
    font-size: 14px;
    text-align: center;
}
ul.products li.product .price del .amount {
    color: #bbb;
    text-decoration: line-through;
}
ul.products li.product .price ins {
    text-decoration: none;
}
ul.products li.product .price ins .amount {
    color: #d87a31;
    font-weight: 600;
}

/* Sale / sold-out badge — square, orange */
ul.products li.product .onsale {
    border-radius: 0;
    background: #d87a31;
    color: #fff;
    font-weight: 600;
    padding: 5px 10px;
    text-transform: uppercase;
}

/* ---- Hide the plugins'/theme's default loop buttons.
   We render our own row (.ec-card-actions) in functions.php so all
   three buttons live in one flex container and actually align.     ---- */
ul.products li.product .ct-woo-card-actions { display: none !important; }
ul.products li.product .yith-wcqv-button:not(.ec-qv) { display: none !important; }

/* ---- Our custom action row: wishlist | cart | quick view ---- */
.ec-card-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 12px 0 6px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

/* Reveal the action row on hover (desktop, like the reference).
   Touch devices have no hover, so keep it always visible under 768px. */
@media (min-width: 768px) {
    ul.products li.product .ec-card-actions {
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
    }
    ul.products li.product:hover .ec-card-actions {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Wishlist heart (TI) — icon only */
.ec-card-actions .tinv-wraper {
    position: static;
    margin: 0;
    height: auto;
    line-height: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.ec-card-actions .tinvwl_add_to_wishlist-text { display: none; }

/* Force the TI heart dark (it defaults to the theme accent/gold) and size it
   to match the reference outline heart. Once relocated into the row by JS,
   these rules apply. */
.ec-card-actions .tinv-wishlist a,
.ec-card-actions .tinvwl_add_to_wishlist_button,
.ec-card-actions .tinvwl-icon-heart,
.ec-card-actions .tinvwl-icon-heart::before,
.ec-card-actions [class*="tinvwl-icon"]::before {
    color: #333 !important;
}
.ec-card-actions .tinvwl-icon-heart,
.ec-card-actions [class*="tinvwl-icon"]::before {
    font-size: 20px !important;
}
.ec-card-actions .tinv-wishlist a:hover .tinvwl-icon-heart,
.ec-card-actions .tinv-wishlist a:hover .tinvwl-icon-heart::before { color: #d87a31 !important; }

/* Only ever show the wishlist heart INSIDE our action row. Hides TI's auto
   loop heart, which otherwise sits on the image over the -XX% badge. */
ul.products li.product .tinv-wraper { display: none !important; }
ul.products li.product .ec-card-actions .tinv-wraper { display: inline-flex !important; }

/* Center add-to-cart / select-options — orange text button that fills the
   row between the heart and the magnifier, matching the reference. */
.ec-card-actions .button.add_to_cart_button,
.ec-card-actions .button.product_type_variable,
.ec-card-actions a.button {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 22px;
    min-width: 150px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: #fff;
    background: #d87a31;
    border: 1px solid #d87a31;
    border-radius: 2px;
}
.ec-card-actions a.button:hover {
    background: #c56c26;
    border-color: #c56c26;
    color: #fff;
}

/* Desktop: hovering the button itself swaps the label for a minimal line
   cart icon (matching the thin magnifier style). Mobile keeps the text. */
@media (min-width: 768px) {
    .ec-card-actions a.button {
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
        transition: background-color .2s ease, color .15s ease;
    }
    .ec-card-actions a.button:hover {
        color: transparent;
        background-color: #c56c26;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
    }
}

/* Quick view (YITH) — magnifier icon only */
.ec-card-actions .yith-wcqv-button.ec-qv {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    background: none;
    border: none;
    color: #333;
    line-height: 0;
}
.ec-card-actions .yith-wcqv-button.ec-qv .ec-qv-label { display: none; }
.ec-card-actions .yith-wcqv-button.ec-qv .ec-qv-icon { display: block; }
.ec-card-actions .yith-wcqv-button.ec-qv:hover { color: #d87a31; }


/* ============================================================
   == Single Product
   ============================================================ */

/* Watching counter */
.ec-watching {
    font-size: 13px;
    color: #777;
    margin: 10px 0;
}
.ec-watching strong {
    color: var(--color-dark);
}

/* Size Guide trigger link */
.ec-size-guide-trigger {
    display: inline-block;
    font-size: 13px;
    color: var(--color-dark);
    text-decoration: underline;
    margin: 6px 12px 6px 0;
}
.ec-size-guide-trigger:hover {
    color: #e0862c;
}

/* Size Guide modal */
.ec-size-guide-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.ec-size-guide-modal.is-open {
    display: block;
}
.ec-size-guide-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}
.ec-size-guide-box {
    position: relative;
    background: #fff;
    max-width: 480px;
    margin: 8vh auto;
    padding: 30px;
    z-index: 1;
}
.ec-size-guide-box h3 {
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ec-size-guide-box table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ec-size-guide-box th,
.ec-size-guide-box td {
    border: 1px solid #e5e5e5;
    padding: 8px 10px;
    text-align: center;
}
.ec-size-guide-note {
    font-size: 12px;
    color: #777;
    margin-top: 14px;
    margin-bottom: 0;
}
.ec-size-guide-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-dark);
}

/* Share links */
.ec-share {
    font-size: 13px;
    color: #777;
    margin-top: 16px;
}
.ec-share a {
    color: var(--color-dark);
    text-decoration: none;
    margin-left: 10px;
}
.ec-share a:hover {
    color: #e0862c;
}


/* ============================================================
   == Variation Swatches (Size selector)
   ============================================================ */

.variations td.label label {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-dark);
}

.variable-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 20px;
    padding: 0;
    list-style: none;
}
.variable-items-wrapper .variable-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 0;
    background: #fff;
    color: var(--color-dark);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.variable-items-wrapper .variable-item:hover {
    border-color: var(--color-dark);
}
.variable-items-wrapper .variable-item.selected {
    border-color: var(--color-dark);
    color: var(--color-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 700;
}
.variable-items-wrapper .variable-item.disabled,
.variable-items-wrapper .variable-item.excluded {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

.reset_variations {
    display: inline-block;
    font-size: 12px;
    color: #777;
    text-decoration: underline;
    margin-top: 4px;
}


/* ============================================================
   == Mobile / Sticky Bottom Bar
   ============================================================ */

.ec-mobile-bar { display: none; }

@media (max-width: 767px) {
    .ec-mobile-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background: #fff;
        border-top: 1px solid #ececec;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
        padding: 8px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .ec-mobile-bar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 500;
        color: #111;
        text-decoration: none;
    }
    .ec-mobile-bar .ec-mobile-ico {
        position: relative;
        line-height: 0;
        color: #111;
    }
    .ec-mobile-bar .ec-mobile-count {
        position: absolute;
        top: -7px;
        right: -10px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #d87a31;
        color: #fff;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
    }
    /* keep the fixed bar from covering page content / footer */
    body {
        padding-bottom: 62px;
    }
}



/* ============================================================
   == Footer
   ============================================================ */

footer.ct-footer {
    background: var(--color-light);
}
footer.ct-footer .widget-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-dark);
    margin-bottom: 18px;
}
footer.ct-footer .widget-menu li {
    line-height: 2.2;
}
footer.ct-footer .widget-menu a {
    font-size: 14px;
    color: #333;
    text-decoration: none;
}
footer.ct-footer .widget-menu a:hover {
    color: #e0862c;
}
footer.ct-footer .ct-footer-copyright,
footer.ct-footer .ct-footer-socials {
    font-size: 13px;
}
footer.ct-footer > div:last-child .ct-container {
    align-items: center;
}