/* ============================================================================
   MACHRUN — APEX × WOOCOMMERCE
   ----------------------------------------------------------------------------
   All shop / cart / checkout / single-product chrome, restyled to the
   Apex system. Scoped to .woocommerce / .woocommerce-page (set by WC on
   every relevant page) plus a few Flatsome-specific selectors that wrap
   product cards (.product-small, .box, .box-image, .box-text).

   Loaded AFTER machrun-apex.css. !important is used judiciously where
   Flatsome's parent CSS has higher specificity by default.
   ========================================================================== */

/* ============================================================
 * 1. PAGE SURFACES — kill white backgrounds across shop pages.
 * ============================================================ */
body.woocommerce,
body.woocommerce-page,
.woocommerce-account .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    background: var(--mr-bg) !important;
    color: var(--mr-ink);
}

.woocommerce .page-wrapper,
.woocommerce-page .page-wrapper,
.woocommerce #main,
.woocommerce-page #main,
.woocommerce #content,
.woocommerce-page #content {
    background: var(--mr-bg);
    color: var(--mr-ink);
}

/* ============================================================
 * 2. SHOP ARCHIVE — Apex page header above the loop, hairline grid
 *    of product cards. Hook a header in via PHP later if wanted;
 *    for now restyle what Flatsome / WC currently renders.
 * ============================================================ */

/* Shop / category page title — Flatsome usually renders this as
   .shop-page-title or .page-title-inner; restyle to Apex. */
.woocommerce .shop-page-title,
.woocommerce-page .shop-page-title,
.woocommerce h1.page-title,
.woocommerce-page h1.page-title {
    font-family: var(--mr-font-display);
    text-transform: uppercase;
    font-size: clamp(36px, 5vw, 64px);
    line-height: .92;
    color: var(--mr-ink-2);
    letter-spacing: .005em;
    margin: 0 0 24px;
}

/* Result count + sort dropdown — mono labels */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
    font-family: var(--mr-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mr-muted);
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    background: var(--mr-panel-2);
    color: var(--mr-ink);
    border: 1px solid var(--mr-line-btn);
    border-radius: 0;
    font-family: var(--mr-font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 10px 14px;
}

/* Breadcrumbs (Flatsome / WC default) — give them their own
   bar above the shop title so navigation back is obvious. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb,
.woocommerce-breadcrumb,
.shop-page-title .breadcrumbs {
    font-family: var(--mr-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--mr-muted) !important;
    margin: 0 !important;
    padding: 24px var(--mr-gutter) !important;
    border-bottom: 1px solid var(--mr-line);
    background: var(--mr-bg);
    display: block;
}
.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a,
.woocommerce-breadcrumb a,
.shop-page-title .breadcrumbs a {
    color: var(--mr-ink-2) !important;
    -webkit-text-fill-color: var(--mr-ink-2) !important;
    text-decoration: none !important;
    transition: color .15s var(--mr-ease);
}
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
    color: var(--mr-accent) !important;
    -webkit-text-fill-color: var(--mr-accent) !important;
}
/* Separator (default WC uses /, Flatsome may use › ) */
.woocommerce .woocommerce-breadcrumb .breadcrumb-separator,
.woocommerce-breadcrumb .delimiter { color: var(--mr-muted-3) !important; padding: 0 6px; }

/* ============================================================
 * 3. PRODUCT GRID — hairline grid, no gaps, 3-up desktop.
 *    Targets BOTH core WC markup (ul.products) AND Flatsome's
 *    wrapping markup (.products .row .col).
 * ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin: 0 !important;
    padding: 0;
    width: auto !important;
    background: var(--mr-panel);
    border: 1px solid var(--mr-line-strong);
}

/* Flatsome wraps products in .row / .col — collapse padding so
   the hairline grid stays tight. */
.woocommerce .products.row,
.woocommerce-page .products.row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 !important;
    margin: 0 !important;
}
.woocommerce .products.row > .col,
.woocommerce-page .products.row > .col {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}

/* Quick View hover bar (Flatsome's .image-tools.grid-tools)
   Defaults to a cyan-slate strip — restyle to Apex dark with
   mono cream text, no red text leak. */
.woocommerce .product-small .image-tools,
.woocommerce .product-small .grid-tools,
.woocommerce .product-small .image-tools.grid-tools,
.woocommerce-page .product-small .image-tools,
.woocommerce-page .product-small .grid-tools {
    background: rgba(12, 12, 13, 0.85) !important;
    color: var(--mr-ink) !important;
    border: none !important;
    border-radius: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
}
.woocommerce .product-small .image-tools a,
.woocommerce .product-small .grid-tools a,
.woocommerce .product-small .image-tools .quick-view,
.woocommerce .product-small a.quick-view,
.woocommerce-page .product-small a.quick-view {
    background: transparent !important;
    color: var(--mr-ink) !important;
    -webkit-text-fill-color: var(--mr-ink) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-block;
    text-decoration: none !important;
    transition: color .15s var(--mr-ease);
}
.woocommerce .product-small .image-tools a:hover,
.woocommerce .product-small a.quick-view:hover {
    color: var(--mr-accent) !important;
    -webkit-text-fill-color: var(--mr-accent) !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* Image-tools small variant (the top-right wishlist/compare buttons) */
.woocommerce .product-small .image-tools.is-small a,
.woocommerce .product-small .image-tools.is-small .button {
    background: rgba(12, 12, 13, 0.85) !important;
    color: var(--mr-ink) !important;
    border: 1px solid var(--mr-line-btn) !important;
    border-radius: 0 !important;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.woocommerce .product-small .image-tools.is-small a:hover {
    background: var(--mr-accent) !important;
    color: var(--mr-on-accent) !important;
    border-color: var(--mr-accent) !important;
}

/* ---- Product card chrome (Flatsome's .product-small / .box) ---- */
.woocommerce .product-small,
.woocommerce-page .product-small,
.woocommerce .product-small.box,
.woocommerce-page .product-small.box {
    background: var(--mr-panel) !important;
    border: 1px solid var(--mr-line-strong) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: 100%;
}
.woocommerce .product-small .box-image,
.woocommerce-page .product-small .box-image {
    background: var(--mr-panel-2);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.woocommerce .product-small .box-image img,
.woocommerce-page .product-small .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--mr-ease);
}
.woocommerce .product-small:hover .box-image img,
.woocommerce-page .product-small:hover .box-image img { transform: scale(1.04); }

.woocommerce .product-small .box-text,
.woocommerce-page .product-small .box-text {
    padding: 22px !important;
    background: var(--mr-panel);
    text-align: left !important;
}

/* Product card title */
.woocommerce .product-small .name a,
.woocommerce-page .product-small .name a,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--mr-font-body) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    color: var(--mr-ink-2) !important;
    text-transform: none !important;
    letter-spacing: 0;
    margin: 10px 0 16px !important;
    min-height: 40px;
}
.woocommerce .product-small .name a:hover,
.woocommerce-page .product-small .name a:hover { color: var(--mr-accent) !important; }

/* Product card category label — Flatsome renders this as
   .category small / .product-category. Apex eyebrow style. */
.woocommerce .product-small .category,
.woocommerce-page .product-small .category,
.woocommerce ul.products li.product .product-category,
.woocommerce-page ul.products li.product .product-category {
    font-family: var(--mr-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--mr-muted) !important;
    display: block;
    margin-bottom: 6px;
}

/* ============================================================
 * 4. PRICES — Anton active, mono strikethrough.
 * ============================================================ */
.woocommerce .price,
.woocommerce-page .price,
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--mr-font-display) !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
    color: var(--mr-ink) !important;
    text-transform: none;
}
.woocommerce .price del,
.woocommerce-page .price del,
.woocommerce ins { background: transparent !important; }
.woocommerce .price del span,
.woocommerce-page .price del span,
.woocommerce .price del .amount,
.woocommerce-page .price del .amount {
    font-family: var(--mr-font-mono) !important;
    font-size: 12px !important;
    color: var(--mr-muted-3) !important;
    text-decoration: line-through;
    font-weight: 500 !important;
}
.woocommerce .price ins,
.woocommerce-page .price ins {
    text-decoration: none;
    color: var(--mr-ink) !important;
}

/* ============================================================
 * 5. SALE BADGE — sharp red tab pinned top-left.
 *    .onsale is WC default, .badge is Flatsome equivalent.
 * ============================================================ */
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce .product .onsale,
.woocommerce-page .product .onsale,
.woocommerce .badge .badge-inner.on-sale,
.product-small .callout .badge {
    background: var(--mr-accent) !important;
    color: var(--mr-on-accent) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px 11px !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    line-height: 1 !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
}

/* ============================================================
 * 6. ADD-TO-CART BUTTONS on cards
 *    Override the chrome-suppression rule from style.css for cards.
 * ============================================================ */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce .product-small .button,
.woocommerce-page .product-small .button,
.woocommerce a.add_to_cart_button,
.woocommerce-page a.add_to_cart_button,
.woocommerce a.button.product_type_simple,
.woocommerce a.button.product_type_variable,
.woocommerce a.button.product_type_grouped {
    background: var(--mr-accent) !important;
    color: var(--mr-on-accent) !important;
    border-radius: 0 !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    margin-top: 8px !important;
    display: inline-flex !important;
    align-items: center;
}
.woocommerce a.added_to_cart {
    background: transparent !important;
    color: var(--mr-ink) !important;
    border-bottom: 1px solid var(--mr-line-btn) !important;
    padding: 6px 0 !important;
    font-size: 11px !important;
    margin-top: 8px !important;
    margin-left: 12px !important;
}

/* ============================================================
 * 7. SINGLE PRODUCT PAGE
 *    Gallery left, buy-box right on --mr-panel.
 * ============================================================ */
.woocommerce div.product,
.woocommerce-page div.product { background: var(--mr-bg); padding: 32px 0; }

.woocommerce div.product .product-title,
.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title {
    font-family: var(--mr-font-display) !important;
    text-transform: uppercase;
    font-size: clamp(28px, 4vw, 48px) !important;
    line-height: 1 !important;
    color: var(--mr-ink-2) !important;
    margin-bottom: 16px !important;
    letter-spacing: .005em;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce-page div.product .woocommerce-product-details__short-description {
    color: var(--mr-ink-2);
    font-family: var(--mr-font-body);
    font-size: 17px;
    line-height: 1.55;
}

/* Gallery thumbnails */
.woocommerce div.product .images,
.woocommerce-page div.product .images { border: 1px solid var(--mr-line-strong); }
.woocommerce div.product .flex-control-thumbs { gap: 8px; padding-top: 8px; }
.woocommerce div.product .flex-control-thumbs li img {
    border-radius: 0 !important;
    border: 1px solid var(--mr-line);
    opacity: .8;
}
.woocommerce div.product .flex-control-thumbs li img.flex-active { opacity: 1; border-color: var(--mr-accent); }

/* Buy box panel */
.woocommerce div.product .summary,
.woocommerce-page div.product .summary {
    background: var(--mr-panel);
    padding: 32px;
    border: 1px solid var(--mr-line-strong);
}

/* Tabs nav — mono labels, red active underline */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-page div.product .woocommerce-tabs ul.tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--mr-line) !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce-page div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--mr-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--mr-ink-2) !important;
    padding: 14px 22px !important;
    display: block;
    border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--mr-ink) !important;
    border-bottom-color: var(--mr-accent) !important;
}

/* ============================================================
 * 8. CART PAGE
 * ============================================================ */
.woocommerce-cart .woocommerce h1,
.woocommerce-cart .entry-title {
    font-family: var(--mr-font-display);
    text-transform: uppercase;
    font-size: clamp(32px, 4vw, 56px);
    color: var(--mr-ink-2);
}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table,
.woocommerce table.shop_table_responsive,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
    background: var(--mr-panel) !important;
    color: var(--mr-ink) !important;
    border: 1px solid var(--mr-line) !important;
    border-radius: 0 !important;
    border-collapse: collapse;
}
.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td {
    background: transparent !important;
    color: var(--mr-ink-2) !important;
    border-color: var(--mr-line) !important;
    font-family: var(--mr-font-body);
    padding: 16px !important;
}
.woocommerce table.shop_table th {
    font-family: var(--mr-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--mr-muted) !important;
}
.woocommerce table.shop_table tr.cart_item:hover { background: var(--mr-panel-2) !important; }

.woocommerce .cart-collaterals h2 {
    font-family: var(--mr-font-display);
    text-transform: uppercase;
    color: var(--mr-ink-2);
}

.woocommerce-cart-form .product-thumbnail img,
.woocommerce-cart .product-thumbnail img {
    border: 1px solid var(--mr-line);
    border-radius: 0 !important;
}

/* Cart remove "×" */
.woocommerce a.remove {
    color: var(--mr-accent) !important;
    background: transparent !important;
    border-radius: 0;
    text-decoration: none;
    font-family: var(--mr-font-display);
    font-size: 20px;
}
.woocommerce a.remove:hover { color: var(--mr-ink) !important; background: var(--mr-accent) !important; }

/* Coupon form */
.woocommerce .coupon input[name="coupon_code"] {
    background: var(--mr-panel-2) !important;
    color: var(--mr-ink) !important;
    border: 1px solid var(--mr-line-btn) !important;
    border-radius: 0 !important;
    padding: 12px !important;
    font-family: var(--mr-font-body);
}

/* ============================================================
 * 7b. SINGLE PRODUCT — extras: sticky bar, stock pill, tabs,
 *     social share row, express-pay button suppression.
 * ============================================================ */

/* Stock indicator — restyle the green "1 in stock" pill */
.woocommerce div.product p.stock,
.woocommerce div.product .stock,
.woocommerce div.product .stock.in-stock,
.woocommerce div.product .stock.out-of-stock,
.woocommerce-page div.product .stock {
    display: inline-block;
    background: transparent !important;
    border: 1px solid var(--mr-line-btn) !important;
    border-radius: 0 !important;
    color: var(--mr-ink-2) !important;
    -webkit-text-fill-color: var(--mr-ink-2) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
    margin: 6px 0 14px !important;
}
.woocommerce div.product .stock.in-stock { color: var(--mr-ink) !important; -webkit-text-fill-color: var(--mr-ink) !important; border-color: var(--mr-line-btn) !important; }
.woocommerce div.product .stock.out-of-stock { color: var(--mr-accent) !important; -webkit-text-fill-color: var(--mr-accent) !important; border-color: var(--mr-accent) !important; }

/* Tab nav — kill Flatsome's blue+red double-line stripes */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li a::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
    text-align: left !important;
    border-top: none !important;
}
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .wc-tab {
    background: transparent !important;
    color: var(--mr-ink-2) !important;
    padding: 24px 0 !important;
}

/* Social share row — Flatsome's .social-icons.share-icons.
   Render as a SINGLE horizontal bordered container with internal
   dividers, sitting below the buy box on every screen. Override
   Flatsome's circle+outline default with higher-specificity rules. */
.woocommerce div.product .summary div.social-icons.share-icons,
.woocommerce div.product div.social-icons.share-icons,
div.social-icons.share-icons {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 0 !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    list-style: none;
    background: var(--mr-panel) !important;
    border: 1px solid var(--mr-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    align-items: stretch;
    width: auto;
    max-width: 100%;
}
/* Beat .button.circle.is-outline (which renders as a circle) */
.woocommerce div.product .summary div.social-icons.share-icons a.button,
.woocommerce div.product div.social-icons.share-icons a.button,
.woocommerce div.product div.social-icons.share-icons a.icon.button,
.woocommerce div.product div.social-icons.share-icons a.icon.button.circle,
.woocommerce div.product div.social-icons.share-icons a.icon.button.circle.is-outline,
div.social-icons.share-icons > a {
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid var(--mr-line) !important;
    border-radius: 0 !important;
    color: var(--mr-ink-2) !important;
    -webkit-text-fill-color: var(--mr-ink-2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background-color .15s var(--mr-ease), color .15s var(--mr-ease);
    min-width: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.woocommerce div.product div.social-icons.share-icons a:last-child { border-right: none !important; }
.woocommerce div.product div.social-icons.share-icons a:hover {
    background: var(--mr-accent) !important;
    color: var(--mr-on-accent) !important;
    -webkit-text-fill-color: var(--mr-on-accent) !important;
}
.woocommerce div.product div.social-icons.share-icons a i {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    margin: 0 !important;
    font-size: 14px;
}

/* Social icons stay as a horizontal grouped row below the buy box —
   simpler and more reliable than a desktop-grid approach. The earlier
   right-aligned-vertical grid layout didn't land cleanly. */

/* Express pay buttons (WooPayments / Stripe Payment Request / Apple
   Pay / Google Pay / Afterpay / Onelink) — non-functional on the
   staging clone because we blocked their outbound API calls. Hide
   both the buttons AND their wrappers (a wrapper without a button
   still renders an empty bordered box on the page).
   This was the "inner box" mystery — .wcpay-payment-request-wrapper
   held a 48px Stripe iframe and was missed from the previous list. */
.wc-stripe-payment-request-wrapper,
#wc-stripe-payment-request-wrapper,
.wc-stripe-payment-request-button,
#wc-stripe-payment-request-button,
.wcpay-payment-request-wrapper,
.wcpay-payment-request-wrapper *,
#wcpay-payment-request-button,
.wcpay-payment-request-button,
.wc-block-components-express-payment-area,
.wc-block-components-express-payment,
.payment-request-button-element,
.apple-pay-button,
[class*="onelink"],
.afterpay-paragraph,
.afterpay-link,
.product-page-price ~ .afterpay-paragraph { display: none !important; }

/* The "Pay with Onelink" green button specifically (whatever
   plugin emits it tends to use a green branded surface). Catch
   any bright-green button blocks that aren't ours. */
.woocommerce div.product .wc-pay-now-button,
.woocommerce div.product .alt-pay-button,
.woocommerce div.product .express-checkout,
.woocommerce div.product div[style*="background:#"][style*="green"],
.woocommerce div.product div[style*="background-color:#"][style*="green"] { display: none !important; }

/* ============================================================
 * 7c. INLINE BUY BOX  +  SCROLL-STICKY BAR
 *     Flatsome's "Quick Add" feature reuses .sticky-add-to-cart
 *     markup as the inline buy CTA (inside .summary). My older
 *     rules styled it for the compact-sticky context only, which
 *     made the inline version cramped. Two layouts now:
 *
 *      A) Inline — when nested inside .summary → spacious panel
 *         buy box, hide redundant img/title/price (already shown
 *         elsewhere on the page).
 *      B) Sticky — when Flatsome's JS clones / promotes to
 *         position:fixed (no .summary ancestor) → compact bar
 *         with thumb + name + price + qty + CTA.
 * ============================================================ */

/* --------- A) INLINE BUY BOX (inside .summary) ---------
   Style the WRAPPER only (panel + border + padding).
   The INNER .sticky-add-to-cart is transparent passthrough so
   there's no nested double border. */
.woocommerce div.product .summary .sticky-add-to-cart-wrapper {
    background: var(--mr-panel) !important;
    border: 1px solid var(--mr-line) !important;
    border-radius: 0 !important;
    padding: 24px !important;
    margin: 18px 0 18px !important;
    box-shadow: none !important;
    position: static !important;
    width: 100% !important;
    display: block !important;
}
.woocommerce div.product .summary .sticky-add-to-cart-wrapper > .sticky-add-to-cart {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Reset margins on the form so the buy box panel sits flush */
.woocommerce div.product .summary form.cart {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide the redundant thumbnail / title / duplicate price block
   inside the inline buy box — those are already visible above. */
.woocommerce div.product .summary .sticky-add-to-cart .sticky-add-to-cart-img,
.woocommerce div.product .summary .sticky-add-to-cart .product-title-small,
.woocommerce div.product .summary .sticky-add-to-cart .sticky-add-to-cart__product .price-wrapper {
    display: none !important;
}
.woocommerce div.product .summary .sticky-add-to-cart__product {
    display: none !important; /* whole left cluster is redundant inline */
}

/* The action cluster — qty stepper + Add to basket button.
   Button is FULL WIDTH so the panel doesn't have huge empty
   space on the right. */
.woocommerce div.product .summary .sticky-add-to-cart {
    display: flex !important;
    gap: 14px !important;
    align-items: stretch;
    flex-wrap: nowrap;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce div.product .summary .sticky-add-to-cart .quantity {
    flex: 0 0 auto;
    margin: 0 !important;
}
.woocommerce div.product .summary .sticky-add-to-cart .single_add_to_cart_button,
.woocommerce div.product .summary .sticky-add-to-cart > .button,
.woocommerce div.product .summary .sticky-add-to-cart .add_to_cart_button {
    background: var(--mr-accent) !important;
    color: var(--mr-on-accent) !important;
    -webkit-text-fill-color: var(--mr-on-accent) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: 16px 24px !important;
    box-shadow: none !important;
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
}

/* --------- B) SCROLL-STICKY BAR (Flatsome's .sticky-add-to-cart--active) ---------
   Flatsome's woocommerce.js adds class `sticky-add-to-cart--active`
   to the inner .sticky-add-to-cart when scrolled past the wrapper,
   and `has-sticky-product-cart` to <body>. We use those for the
   compact bottom bar style. */
.sticky-add-to-cart.sticky-add-to-cart--active {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    background: var(--mr-bg) !important;
    color: var(--mr-ink) !important;
    border-top: 1px solid var(--mr-line) !important;
    border-bottom: none !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4) !important;
    padding: 12px var(--mr-gutter) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 16px;
    width: 100%;
}
/* When promoted, show the thumbnail + title + price + qty + button */
.sticky-add-to-cart.sticky-add-to-cart--active .sticky-add-to-cart__product {
    display: flex !important;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}
.sticky-add-to-cart.sticky-add-to-cart--active .sticky-add-to-cart-img {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    border: 1px solid var(--mr-line) !important;
    border-radius: 0 !important;
    flex: 0 0 48px;
}
.sticky-add-to-cart.sticky-add-to-cart--active .product-title-small {
    display: block !important;
    font-family: var(--mr-font-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--mr-ink) !important;
    -webkit-text-fill-color: var(--mr-ink) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sticky-add-to-cart.sticky-add-to-cart--active .price-wrapper,
.sticky-add-to-cart.sticky-add-to-cart--active .price-wrapper * {
    display: inline !important;
    color: var(--mr-ink) !important;
    -webkit-text-fill-color: var(--mr-ink) !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    font-family: var(--mr-font-display) !important;
    font-size: 18px !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.sticky-add-to-cart.sticky-add-to-cart--active .single_add_to_cart_button,
.sticky-add-to-cart.sticky-add-to-cart--active .button {
    flex: 0 0 auto;
    padding: 12px 22px !important;
    min-width: 0 !important;
    font-size: 12px !important;
}
.sticky-add-to-cart.sticky-add-to-cart--active .quantity {
    flex: 0 0 auto;
}
/* Pad page bottom so floating bar doesn't cover content */
body.has-sticky-product-cart { padding-bottom: 80px; }
@media (max-width: 549px) {
    .sticky-add-to-cart.sticky-add-to-cart--active .product-title-small { font-size: 12px !important; }
    .sticky-add-to-cart.sticky-add-to-cart--active .sticky-add-to-cart-img { width: 40px !important; height: 40px !important; flex: 0 0 40px; }
    .sticky-add-to-cart.sticky-add-to-cart--active .single_add_to_cart_button { padding: 10px 14px !important; font-size: 11px !important; }
}

/* ============================================================
 * 7d. PRODUCT GALLERY — main image + thumbnail strip.
 *     Force thumbnails visible at all desktop widths and give
 *     them an Apex treatment (square, hairline border, red
 *     active). Flatsome's gallery uses .flickity-page-dots or
 *     .flex-control-thumbs depending on config.
 * ============================================================ */
.woocommerce div.product .images,
.woocommerce-page div.product .images { border: 1px solid var(--mr-line-strong) !important; padding: 0 !important; }

/* Thumb nav — bottom strip */
.woocommerce div.product .flex-control-thumbs,
.woocommerce div.product .flex-control-nav,
.woocommerce-page div.product .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 8px 0 0 !important;
    margin: 0 !important;
    list-style: none;
    visibility: visible !important;
    opacity: 1 !important;
}
.woocommerce div.product .flex-control-thumbs li {
    width: calc(20% - 5px) !important;
    margin: 0 !important;
    list-style: none;
}
.woocommerce div.product .flex-control-thumbs li img,
.woocommerce-page div.product .flex-control-thumbs li img {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0 !important;
    border: 1px solid var(--mr-line) !important;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity .15s var(--mr-ease), border-color .15s var(--mr-ease);
}
.woocommerce div.product .flex-control-thumbs li img:hover { opacity: 1; }
.woocommerce div.product .flex-control-thumbs li img.flex-active {
    opacity: 1;
    border-color: var(--mr-accent) !important;
}

/* Flatsome's Flickity-based gallery thumbnail row */
.woocommerce div.product .product-gallery-slider-nav,
.woocommerce div.product .product-gallery-slider-nav .flickity-page-dots,
.woocommerce-product-gallery .flickity-page-dots {
    display: flex !important;
    visibility: visible !important;
}
.woocommerce-product-gallery .flickity-prev-next-button {
    background: rgba(12,12,13,0.7) !important;
    color: var(--mr-ink) !important;
    border-radius: 0 !important;
    width: 36px;
    height: 36px;
}
.woocommerce-product-gallery .flickity-prev-next-button:hover {
    background: var(--mr-accent) !important;
}

/* Disable Flatsome's responsive hide-for-* on the gallery nav at
   desktop sizes — it can leave the thumbnail strip hidden between
   850-1080px. */
@media (min-width: 550px) {
    .woocommerce-product-gallery .flex-control-thumbs,
    .woocommerce-product-gallery .flex-control-nav,
    .woocommerce-product-gallery .product-thumbnails {
        display: flex !important;
        visibility: visible !important;
    }
}

/* ============================================================
 * 8b. CART TABLE — restore sane column widths and word-wrap.
 *     Flatsome ships `word-break: break-all` on .product-name
 *     which makes long titles render one character per line.
 * ============================================================ */
.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-cart-form table.shop_table {
    table-layout: auto !important;
    width: 100% !important;
}
.woocommerce-cart .woocommerce td.product-name,
.woocommerce-cart-form td.product-name {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    width: auto !important;
    min-width: 240px !important;
    text-align: left !important;
    padding-left: 24px !important;
}
.woocommerce-cart .woocommerce td.product-name a,
.woocommerce-cart-form td.product-name a,
.woocommerce-cart .woocommerce td.product-name strong,
.woocommerce-cart-form td.product-name strong {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    display: inline !important;
    font-family: var(--mr-font-body) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--mr-ink) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.woocommerce-cart .woocommerce td.product-name a:hover,
.woocommerce-cart-form td.product-name a:hover { color: var(--mr-accent) !important; }

/* Update cart / continue shopping buttons in the cart actions row */
.woocommerce-cart .woocommerce .actions .button,
.woocommerce-cart-form .actions button,
.woocommerce-cart-form input[name="update_cart"],
.woocommerce-cart-form button[name="update_cart"] {
    background: var(--mr-accent) !important;
    color: var(--mr-on-accent) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 22px !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}
.woocommerce-cart .woocommerce .return-to-shop .button,
.woocommerce-cart .woocommerce a.button.wc-backward {
    background: transparent !important;
    color: var(--mr-ink) !important;
    border: 1px solid var(--mr-line-btn) !important;
    border-radius: 0 !important;
    padding: 14px 22px !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}
.woocommerce-cart .woocommerce a.button.wc-backward:hover { background: var(--mr-ink) !important; color: var(--mr-on-accent) !important; border-color: var(--mr-ink) !important; }

/* ---- BASKET TOTALS panel — make values visible + readable ---- */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals { width: 100%; }

.woocommerce .cart_totals,
.woocommerce-cart .cart_totals {
    background: var(--mr-panel) !important;
    border: 1px solid var(--mr-line) !important;
    padding: 0 !important;
}
.woocommerce .cart_totals h2 {
    padding: 18px 22px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--mr-line) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--mr-ink) !important;
}
.woocommerce .cart_totals table.shop_table {
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
    border: none !important;
    border-bottom: 1px solid var(--mr-line) !important;
    background: transparent !important;
    padding: 16px 22px !important;
    vertical-align: top !important;
}
.woocommerce .cart_totals table.shop_table th {
    width: 50% !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--mr-muted) !important;
    text-align: left !important;
}
.woocommerce .cart_totals table.shop_table td {
    text-align: right !important;
}
.woocommerce .cart_totals table.shop_table tr:last-child th,
.woocommerce .cart_totals table.shop_table tr:last-child td {
    border-bottom: none !important;
}
/* Force the amount values visible. Flatsome / a plugin uses the
   `-webkit-text-fill-color: transparent` + `background-clip: text`
   gradient trick on prices, which renders the digits invisible on
   our dark background. Reset every property that could be hiding
   the text, then re-color. */
.woocommerce .cart_totals td,
.woocommerce .cart_totals td *,
.woocommerce .cart_totals .amount,
.woocommerce .cart_totals .amount *,
.woocommerce .cart_totals bdi,
.woocommerce .cart_totals bdi *,
.woocommerce .cart_totals .woocommerce-Price-amount,
.woocommerce .cart_totals .woocommerce-Price-currencySymbol {
    color: var(--mr-ink) !important;
    -webkit-text-fill-color: var(--mr-ink) !important;
    background: transparent !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: var(--mr-font-body) !important;
}

/* Re-apply red accent on the Order Total row only */
.woocommerce .cart_totals .order-total .amount,
.woocommerce .cart_totals .order-total .amount *,
.woocommerce .cart_totals .order-total bdi,
.woocommerce .cart_totals .order-total bdi *,
.woocommerce .cart_totals .order-total .woocommerce-Price-currencySymbol {
    color: var(--mr-accent) !important;
    -webkit-text-fill-color: var(--mr-accent) !important;
    font-family: var(--mr-font-display) !important;
    font-size: 22px !important;
}

/* Apply the same fix to the cart line-item subtotals and prices */
.woocommerce td.product-subtotal,
.woocommerce td.product-subtotal *,
.woocommerce td.product-price,
.woocommerce td.product-price *,
.woocommerce td.product-subtotal .amount,
.woocommerce td.product-subtotal bdi,
.woocommerce td.product-price .amount,
.woocommerce td.product-price bdi {
    color: var(--mr-ink) !important;
    -webkit-text-fill-color: var(--mr-ink) !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    opacity: 1 !important;
}

/* Shop product card prices — apply same fix so they're never hidden */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price *,
.woocommerce ul.products li.product .price bdi,
.woocommerce .product-small .price,
.woocommerce .product-small .price *,
.woocommerce .product-small .price bdi,
.woocommerce div.product p.price,
.woocommerce div.product p.price *,
.woocommerce div.product span.price,
.woocommerce div.product span.price * {
    color: var(--mr-ink) !important;
    -webkit-text-fill-color: var(--mr-ink) !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    opacity: 1 !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del *,
.woocommerce .product-small .price del,
.woocommerce .product-small .price del *,
.woocommerce div.product .price del,
.woocommerce div.product .price del * {
    color: var(--mr-muted-3) !important;
    -webkit-text-fill-color: var(--mr-muted-3) !important;
}

/* Shipping methods inside totals */
.woocommerce .cart_totals .shipping ul#shipping_method,
.woocommerce ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce ul#shipping_method li {
    padding: 6px 0;
    color: var(--mr-ink-2) !important;
}
.woocommerce ul#shipping_method li label {
    color: var(--mr-ink-2) !important;
    font-family: var(--mr-font-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.woocommerce .shipping-calculator-button {
    color: var(--mr-accent) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* Proceed to checkout block */
.woocommerce .cart_totals .wc-proceed-to-checkout {
    padding: 16px 22px !important;
}
.woocommerce .cart_totals .checkout-button { margin: 0 !important; }

/* Sensible column proportions */
.woocommerce-cart-form th.product-remove,
.woocommerce-cart-form td.product-remove   { width: 48px !important; }
.woocommerce-cart-form th.product-thumbnail,
.woocommerce-cart-form td.product-thumbnail { width: 96px !important; }
.woocommerce-cart-form th.product-price,
.woocommerce-cart-form td.product-price     { width: 120px !important; }
.woocommerce-cart-form th.product-quantity,
.woocommerce-cart-form td.product-quantity  { width: 180px !important; }
.woocommerce-cart-form th.product-subtotal,
.woocommerce-cart-form td.product-subtotal  { width: 120px !important; }

/* Product thumbnail (cart) — square, hairline framed, no rounded corners */
.woocommerce-cart-form td.product-thumbnail img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    border: 1px solid var(--mr-line) !important;
    border-radius: 0 !important;
}

/* ============================================================
 * 9. CHECKOUT PAGE
 * ============================================================ */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce form .form-row legend {
    font-family: var(--mr-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mr-muted);
}

.woocommerce form .form-row input.input-text,
.woocommerce-page form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.select2-container .select2-selection,
.select2-container--default .select2-selection--single {
    background: var(--mr-panel-2) !important;
    color: var(--mr-ink) !important;
    border: 1px solid var(--mr-line-btn) !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    font-family: var(--mr-font-body) !important;
    font-size: 15px !important;
    transition: border-color .15s var(--mr-ease);
    box-shadow: none !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--mr-accent) !important; outline: none; }

/* Checkout review panel */
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
    background: var(--mr-panel) !important;
    color: var(--mr-ink) !important;
    border: 1px solid var(--mr-line) !important;
    border-radius: 0 !important;
}
.woocommerce-checkout #order_review_heading {
    font-family: var(--mr-font-display);
    text-transform: uppercase;
    border-bottom: none !important;
    padding-bottom: 12px;
}

/* Payment methods */
.woocommerce-checkout #payment {
    background: var(--mr-panel) !important;
    border: 1px solid var(--mr-line) !important;
    border-radius: 0 !important;
    color: var(--mr-ink);
}
.woocommerce-checkout #payment ul.payment_methods {
    background: var(--mr-panel-2) !important;
    border-bottom-color: var(--mr-line) !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
    color: var(--mr-ink-2);
    font-family: var(--mr-font-body);
}
.woocommerce-checkout #payment div.payment_box {
    background: var(--mr-bg) !important;
    color: var(--mr-ink-2);
}
.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--mr-bg) !important;
}

/* Place Order button */
.woocommerce #place_order,
.woocommerce-page #place_order,
.woocommerce .checkout-button,
.woocommerce a.checkout-button {
    background: var(--mr-accent) !important;
    color: var(--mr-on-accent) !important;
    border-radius: 0 !important;
    border: none !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: 18px 28px !important;
    width: 100% !important;
    box-shadow: none !important;
}
.woocommerce #place_order:hover { filter: brightness(1.08); }

/* When Flatsome hides the qty stepper (single-item / max=1
   products), it adds `.hidden` to the wrapper. Honour that
   so the empty bordered shell doesn't render. */
.woocommerce .quantity.hidden,
.woocommerce-page .quantity.hidden,
.cart .quantity.hidden,
.sticky-add-to-cart .quantity.hidden { display: none !important; }

/* ============================================================
 * 10. QUANTITY INPUTS — square, no border-radius.
 *    Flatsome injects +/- buttons around the input via JS;
 *    style all three so the row reads as one unit and the
 *    number in the middle is visible against the dark panel.
 * ============================================================ */
.woocommerce .quantity,
.woocommerce-page .quantity,
.woocommerce-cart-form .quantity,
.cart .quantity {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    background: var(--mr-panel-2);
    border: 1px solid var(--mr-line-btn);
    border-radius: 0;
    overflow: hidden;
}
.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty,
.woocommerce input[type="number"].qty,
.woocommerce-cart-form input.qty,
.cart input.qty {
    background: var(--mr-panel-2) !important;
    color: var(--mr-ink) !important;
    border: none !important;
    border-radius: 0 !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 42px !important;
    line-height: 42px !important;
    text-align: center !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    box-shadow: none !important;
    -webkit-text-fill-color: var(--mr-ink) !important; /* Safari */
    opacity: 1 !important;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.woocommerce .quantity button,
.woocommerce .quantity .minus,
.woocommerce .quantity .plus,
.cart .quantity button,
.cart .quantity .minus,
.cart .quantity .plus {
    background: var(--mr-panel) !important;
    color: var(--mr-ink) !important;
    border: none !important;
    border-radius: 0 !important;
    width: 38px !important;
    height: 42px !important;
    padding: 0 !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.woocommerce .quantity .minus { border-right: 1px solid var(--mr-line) !important; }
.woocommerce .quantity .plus  { border-left:  1px solid var(--mr-line) !important; }
.woocommerce .quantity button:hover { background: var(--mr-accent) !important; color: var(--mr-on-accent) !important; }

/* ============================================================
 * 11. ACCOUNT / MY ACCOUNT
 * ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--mr-panel);
    border: 1px solid var(--mr-line);
    padding: 24px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    font-family: var(--mr-font-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mr-ink-2);
    padding: 10px 0;
    display: block;
    border-bottom: 1px solid var(--mr-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: var(--mr-accent); }

/* ============================================================
 * 12. NOTICES — info / success / error banners
 * ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
    background: var(--mr-panel) !important;
    color: var(--mr-ink) !important;
    border: 1px solid var(--mr-line) !important;
    border-left: 3px solid var(--mr-accent) !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
    font-family: var(--mr-font-body);
    font-size: 14px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--mr-accent) !important; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: 16px; }

/* WC demo store notice (the yellow "Dismiss" bar at the top) */
.woocommerce-store-notice,
p.demo_store {
    background: var(--mr-slate, #1f2a2e) !important;
    color: var(--mr-mist, #c9c4bb) !important;
    border-top: 2px solid var(--mr-accent) !important;
    font-family: var(--mr-font-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.woocommerce-store-notice__dismiss-link { color: var(--mr-accent) !important; }

/* ============================================================
 * 13. PAGINATION — Flatsome wraps WC's pagination with
 *     ul.page-numbers.nav-pagination. Target both class sets
 *     and give the block proper breathing room above + below.
 * ============================================================ */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
    margin: 48px 0 80px !important;
    padding: 0 var(--mr-gutter) !important;
    display: block !important;
    text-align: center !important;
    overflow: visible !important;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul.nav-pagination,
.woocommerce nav.woocommerce-pagination ul.page-numbers.nav-pagination {
    border: none !important;
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: inline-block;
    line-height: 1;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span {
    background: var(--mr-panel) !important;
    color: var(--mr-ink-2) !important;
    -webkit-text-fill-color: var(--mr-ink-2) !important;
    border: 1px solid var(--mr-line) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    line-height: 42px !important;
    text-align: center !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a:hover {
    background: var(--mr-ink) !important;
    color: var(--mr-on-accent) !important;
    -webkit-text-fill-color: var(--mr-on-accent) !important;
    border-color: var(--mr-ink) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current,
.woocommerce nav.woocommerce-pagination ul li .page-number.current {
    background: var(--mr-accent) !important;
    color: var(--mr-on-accent) !important;
    -webkit-text-fill-color: var(--mr-on-accent) !important;
    border-color: var(--mr-accent) !important;
}
/* Next / Prev arrow icons (Flatsome uses <i class="icon-angle-right">) */
.woocommerce nav.woocommerce-pagination ul li a i,
.woocommerce nav.woocommerce-pagination ul li a [class*="icon-"] {
    font-size: 16px !important;
    line-height: 1 !important;
    vertical-align: middle;
    color: inherit !important;
}

/* ============================================================
 * 14. RELATED / UP-SELLS section
 *     Flatsome ships these as a 6-column Flickity slider, which
 *     makes the cards/images tiny. PHP filter already drops the
 *     count to 4; here we ALSO force the row into a static grid
 *     so the slider's transform/positioning doesn't leave the
 *     cells stacked oddly.
 * ============================================================ */
.woocommerce .related h2,
.woocommerce .related h3,
.woocommerce .upsells h2,
.woocommerce .upsells h3,
.woocommerce-page .related h2,
.woocommerce-page .upsells h2,
.woocommerce .product-section-title-related,
.woocommerce .product-section-title-upsells {
    font-family: var(--mr-font-display) !important;
    text-transform: uppercase !important;
    font-size: clamp(24px, 3vw, 36px) !important;
    color: var(--mr-ink) !important;
    -webkit-text-fill-color: var(--mr-ink) !important;
    margin: 48px 0 24px !important;
    letter-spacing: .005em !important;
}

/* Defeat Flickity slider — render related/upsells as a static grid */
.woocommerce .related .row.slider,
.woocommerce .related .row.row-slider,
.woocommerce .upsells .row.slider,
.woocommerce .upsells .row.row-slider {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    transform: none !important;
}
.woocommerce .related .flickity-viewport,
.woocommerce .upsells .flickity-viewport {
    height: auto !important;
    overflow: visible !important;
}
.woocommerce .related .product-small,
.woocommerce .upsells .product-small {
    transform: none !important;
    position: relative !important;
    left: 0 !important;
    width: auto !important;
    margin: 0 !important;
}
.woocommerce .related .flickity-prev-next-button,
.woocommerce .upsells .flickity-prev-next-button,
.woocommerce .related .flickity-page-dots,
.woocommerce .upsells .flickity-page-dots { display: none !important; }

/* Ensure the related card image fills the cell at proper size */
.woocommerce .related .product-small .box-image,
.woocommerce .upsells .product-small .box-image {
    aspect-ratio: 1 / 1;
    width: 100%;
}
.woocommerce .related .product-small .box-image img,
.woocommerce .upsells .product-small .box-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    max-width: none !important;
}

@media (max-width: 900px) {
    .woocommerce .related .row.slider,
    .woocommerce .upsells .row.slider {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ============================================================
 * 15. DARK-ON-DARK SWEEP
 *    Force readable text colour for every element on the cart,
 *    checkout, and account pages. Flatsome / WC bake in dark
 *    text colours that fight a dark page. Use :is() to keep
 *    the selector flat. Prices, badges, accents are exempted
 *    via their own (more specific) rules above.
 * ============================================================ */
/* Scoped to .woocommerce ancestor so the Apex header / ticker /
   footer chrome (which renders on every page) is NOT affected. */
.woocommerce :is(p, li, ul, ol, dl, dt, dd, span, small, em, strong, label, legend, address, blockquote, figcaption, td, th),
form.woocommerce-cart-form :is(p, li, td, th, span, label, dl, dt, dd, small),
form.checkout :is(p, li, td, th, span, label, dl, dt, dd, small),
#order_review :is(p, li, td, th, span, label, dl, dt, dd, small) {
    color: var(--mr-ink-2);
}

/* Headings get the brighter ink for hierarchy. */
.woocommerce :is(h1, h2, h3, h4, h5, h6) {
    color: var(--mr-ink);
}

/* In-text links: Apex red */
.woocommerce a:not(.button):not(.mr-btn):not(.remove):not(.wc-block-components-button):not(.mr-nav__link):not(.mr-logo) {
    color: var(--mr-accent);
}
.woocommerce a:not(.button):not(.mr-btn):not(.remove):not(.wc-block-components-button):not(.mr-nav__link):not(.mr-logo):hover {
    color: var(--mr-ink);
}

/* Select2 dropdown options (used by checkout country/state) */
.select2-container .select2-dropdown,
.select2-container .select2-results,
.select2-container .select2-results__option {
    background: var(--mr-panel-2) !important;
    color: var(--mr-ink) !important;
    border: 1px solid var(--mr-line-btn) !important;
    border-radius: 0 !important;
}
.select2-container .select2-results__option--highlighted {
    background: var(--mr-accent) !important;
    color: var(--mr-on-accent) !important;
}
.select2-container .select2-selection__rendered {
    color: var(--mr-ink) !important;
    line-height: 1.5 !important;
}
.select2-container .select2-selection__arrow b { border-top-color: var(--mr-ink) !important; }
.select2-search--dropdown .select2-search__field {
    background: var(--mr-bg) !important;
    color: var(--mr-ink) !important;
    border: 1px solid var(--mr-line-btn) !important;
}

/* "Click here to enter your code" / coupon trigger on checkout */
.woocommerce-checkout .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: var(--mr-panel) !important;
    color: var(--mr-ink-2) !important;
    border-left: 3px solid var(--mr-accent) !important;
}
.woocommerce-checkout .woocommerce-info a { color: var(--mr-accent) !important; }

/* Login form on checkout if guest */
.woocommerce-form-login {
    background: var(--mr-panel) !important;
    border: 1px solid var(--mr-line) !important;
    padding: 24px !important;
}
.woocommerce-form-login .form-row label { color: var(--mr-muted) !important; }

/* ============================================================
 * 16. EMPTY CART STATE — Apex-friendly empty state
 *    Replaces the default tiny "Your basket is currently empty"
 *    message with a centred Anton headline + ghost CTA.
 * ============================================================ */
.woocommerce .wc-empty-cart-message,
.woocommerce-cart .wc-empty-cart-message {
    background: transparent !important;
    border: none !important;
    padding: 80px 24px 24px !important;
    text-align: center;
}
.woocommerce .wc-empty-cart-message .woocommerce-info,
.woocommerce-cart .wc-empty-cart-message .woocommerce-info {
    background: transparent !important;
    border: none !important;
    color: var(--mr-ink) !important;
    font-family: var(--mr-font-display) !important;
    font-size: clamp(32px, 5vw, 56px) !important;
    line-height: 1 !important;
    letter-spacing: .005em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center;
    max-width: 600px;
}
.woocommerce .wc-empty-cart-message .woocommerce-info::before,
.woocommerce-cart .wc-empty-cart-message .woocommerce-info::before { display: none !important; }
.woocommerce .wc-empty-cart-message .message-wrapper { background: transparent !important; }

.woocommerce .return-to-shop,
.woocommerce-cart .return-to-shop {
    text-align: center;
    padding: 32px 24px 96px !important;
    background: transparent !important;
}
.woocommerce .return-to-shop .button,
.woocommerce-cart .return-to-shop .button,
.woocommerce .return-to-shop a.button {
    background: transparent !important;
    color: var(--mr-ink) !important;
    border: 1px solid var(--mr-line-btn) !important;
    border-radius: 0 !important;
    padding: 16px 28px !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    display: inline-block;
}
.woocommerce .return-to-shop .button:hover { background: var(--mr-ink) !important; color: var(--mr-on-accent) !important; border-color: var(--mr-ink) !important; }

/* ============================================================
 * 17. SHOP — KILL EMPTY SIDEBAR + force full-width content
 *    layout regardless of what Flatsome / WC default to.
 * ============================================================ */
/* Hide the sidebar on contexts where we don't want filters:
   single product, cart, checkout, account. Keep it on shop
   archive + product categories + tags so the filters show. */
body.single-product .col.large-3,
body.woocommerce-cart .col.large-3,
body.woocommerce-checkout .col.large-3,
body.woocommerce-account .col.large-3,
body.woocommerce-cart aside.shop-sidebar,
body.woocommerce-checkout aside.shop-sidebar,
body.woocommerce-account aside.shop-sidebar { display: none !important; }

/* On shop / category / tag archives, MAKE SURE the sidebar
   column shows even though Flatsome hides it on medium. */
body.post-type-archive-product .col.large-3.hide-for-medium,
body.tax-product_cat .col.large-3.hide-for-medium,
body.tax-product_tag .col.large-3.hide-for-medium,
body.woocommerce-shop .col.large-3.hide-for-medium {
    display: block !important;
}

/* ============================================================
 * Apex styling for the WC filter widgets in the shop sidebar.
 * Targets WC's native classes (.widget_price_filter,
 * .widget_product_categories, .widget_layered_nav_filters)
 * since the widgets render via the WP widgets system.
 * ============================================================ */
#shop-sidebar {
    background: var(--mr-bg) !important;
    padding: 0 !important;
}
#shop-sidebar > p { display: none !important; }
#shop-sidebar .widget,
.shop-container .widget.woocommerce {
    background: var(--mr-panel) !important;
    border: 1px solid var(--mr-line) !important;
    padding: 18px 20px !important;
    margin: 0 0 12px !important;
    color: var(--mr-ink-2) !important;
    box-shadow: none !important;
}
#shop-sidebar .widget-title,
#shop-sidebar .widget-title.shop-sidebar,
.shop-container .widget .widget-title {
    font-family: var(--mr-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--mr-muted) !important;
    -webkit-text-fill-color: var(--mr-muted) !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
    border: none !important;
}
#shop-sidebar .is-divider,
.shop-container .widget .is-divider { display: none !important; }

/* Price slider widget */
#shop-sidebar .widget_price_filter .price_slider_wrapper { padding: 0; }
#shop-sidebar .widget_price_filter .price_slider {
    background: var(--mr-panel-2) !important;
    height: 4px !important;
    border-radius: 0 !important;
    border: 1px solid var(--mr-line);
    margin: 16px 0;
}
#shop-sidebar .widget_price_filter .ui-slider-range {
    background: var(--mr-accent) !important;
    height: 4px;
}
#shop-sidebar .widget_price_filter .ui-slider-handle {
    background: var(--mr-ink) !important;
    border: 1px solid var(--mr-ink) !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 0 !important;
    top: -6px !important;
    margin-left: -7px;
}
#shop-sidebar .widget_price_filter .price_slider_amount {
    color: var(--mr-ink-2) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 14px !important;
}
#shop-sidebar .widget_price_filter .price_label { color: var(--mr-ink) !important; }
#shop-sidebar .widget_price_filter .button {
    background: var(--mr-accent) !important;
    color: var(--mr-on-accent) !important;
    -webkit-text-fill-color: var(--mr-on-accent) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    margin-left: auto;
}

/* Categories widget */
#shop-sidebar .widget_product_categories ul.product-categories,
#shop-sidebar .widget_product_categories ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#shop-sidebar .widget_product_categories li.cat-item {
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.05);
    list-style: none !important;
}
#shop-sidebar .widget_product_categories li.cat-item:last-child { border-bottom: none; }
#shop-sidebar .widget_product_categories li a {
    color: var(--mr-ink-2) !important;
    -webkit-text-fill-color: var(--mr-ink-2) !important;
    font-family: var(--mr-font-body) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: inline-block;
}
#shop-sidebar .widget_product_categories li a:hover { color: var(--mr-accent) !important; -webkit-text-fill-color: var(--mr-accent) !important; }
#shop-sidebar .widget_product_categories li.current-cat > a { color: var(--mr-accent) !important; -webkit-text-fill-color: var(--mr-accent) !important; font-weight: 600; }
#shop-sidebar .widget_product_categories .count {
    color: var(--mr-muted) !important;
    -webkit-text-fill-color: var(--mr-muted) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 11px !important;
    margin-left: 6px;
}
#shop-sidebar .widget_product_categories .children {
    padding-left: 14px !important;
    margin-top: 6px !important;
}

/* Active filters widget */
#shop-sidebar .widget_layered_nav_filters ul.woocommerce-widget-layered-nav-list,
#shop-sidebar .widget_layered_nav_filters ul.chosen {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#shop-sidebar .widget_layered_nav_filters li {
    background: var(--mr-bg);
    border: 1px solid var(--mr-line);
    padding: 6px 10px !important;
    font-family: var(--mr-font-mono);
    font-size: 11px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mr-ink-2);
    list-style: none !important;
}
#shop-sidebar .widget_layered_nav_filters li a {
    color: var(--mr-accent) !important;
    -webkit-text-fill-color: var(--mr-accent) !important;
    text-decoration: none !important;
    margin-right: 4px;
    font-weight: 700;
}

/* Force the content column full width ONLY on contexts where
   the sidebar is hidden (single product / cart / checkout /
   account). On shop archive / category / tag — let Flatsome's
   default 9-3 grid work so the sidebar sits left of products. */
body.single-product .col.large-9,
body.woocommerce-cart .col.large-9,
body.woocommerce-checkout .col.large-9,
body.woocommerce-account .col.large-9 {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ============================================================
 * 18. CATEGORY CARDS — Flatsome renders categories as:
 *    <div class="product-category col product">
 *      <div class="col-inner">
 *        <a>
 *          <div class="box box-badge hover-dark">
 *            <div class="box-image"><img></div>
 *            <div class="box-text text-center">
 *              <div class="box-text-inner">
 *                <h5 class="header-title">Name</h5>
 *                <mark class="count">N Products</mark>
 *              </div>
 *            </div>
 *          </div>
 *        </a>
 *      </div>
 *    </div>
 *
 *    Target THIS markup, not the WC defaults.
 * ============================================================ */

/* Kill the row-level shadow/box utilities Flatsome adds */
.woocommerce .products.has-shadow,
.woocommerce .products.row-box-shadow-5,
.woocommerce .products.row-box-shadow-1-hover { box-shadow: none !important; }

/* Card wrapper */
.product-category.col,
.woocommerce .product-category.col,
.woocommerce-page .product-category.col {
    padding: 0 !important;
    margin: 0 !important;
    background: var(--mr-panel) !important;
    border: 1px solid var(--mr-line-strong) !important;
    border-radius: 0 !important;
    overflow: hidden;
}
.product-category.col .col-inner { padding: 0 !important; height: 100%; }
.product-category.col > .col-inner > a { display: block; position: relative; text-decoration: none; }

/* The .box.box-badge wrapper */
.product-category .box.box-badge,
.product-category .box {
    background: var(--mr-panel) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative;
    aspect-ratio: 1 / 1;
}

/* The image cell — fill the card, treat dark, hover zoom */
.product-category .box-image {
    background: var(--mr-panel-2) !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
}
.product-category .box-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    filter: brightness(0.78) saturate(0.85);
    transition: filter .3s var(--mr-ease), transform .5s var(--mr-ease);
}
.product-category:hover .box-image img,
.product-category .box.box-badge:hover img { filter: brightness(0.92) saturate(1); transform: scale(1.04); }

/* Disable Flatsome's hover-dark default overlay (cyan-ish dark wash) */
.product-category .box.hover-dark::after,
.product-category .box.hover-dark::before,
.product-category .box-image::after,
.product-category .box-image::before { display: none !important; }

/* OUR overlay — stronger bottom-anchored dark gradient so even
   light/white-background category images render readable text. */
.product-category .box::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg,
                       rgba(12,12,13,0)    0%,
                       rgba(12,12,13,0)   35%,
                       rgba(12,12,13,.65) 65%,
                       rgba(12,12,13,.95) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Add a dedicated dark band immediately behind the text overlay
   so titles always have a solid backdrop, regardless of image. */
.product-category .box-text {
    background: linear-gradient(180deg, transparent 0%, rgba(12,12,13,.92) 100%) !important;
    padding: 56px 22px 18px !important;
    inset: auto 0 0 0 !important;
}

/* The .box-text overlay — reposition to bottom-left over image,
   not stacked below it. Anton white title + red mono count. */
.product-category .box-text {
    position: absolute !important;
    inset: auto 22px 18px 22px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    z-index: 2 !important;
    pointer-events: none;
}
.product-category .box-text-inner { display: block; padding: 0 !important; }

/* Category name — Anton uppercase */
.product-category .box-text .header-title,
.product-category .box-text h2,
.product-category .box-text h3,
.product-category .box-text h4,
.product-category .box-text h5,
.product-category .box-text-inner > a {
    display: block !important;
    font-family: var(--mr-font-display) !important;
    text-transform: uppercase !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: var(--mr-ink) !important;
    -webkit-text-fill-color: var(--mr-ink) !important;
    letter-spacing: .01em !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-decoration: none !important;
    text-align: left !important;
}

/* Product count badge */
.product-category .box-text mark.count,
.product-category .box-text .count,
.product-category mark {
    display: inline-block !important;
    background: transparent !important;
    color: var(--mr-accent) !important;
    -webkit-text-fill-color: var(--mr-accent) !important;
    font-family: var(--mr-font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* ============================================================
 * 18b. CHROME COLOUR RESET — final-pass safety net to make sure
 *      the logo, ticker, cart pill, and footer always render at
 *      their correct colours even if a sweep rule above leaks in.
 *      Loaded LAST so it wins specificity ties.
 * ============================================================ */
body.mr .mr-logo__mark,
body.mr .mr-logo__mark span,
body.mr .mr-ticker__item {
    color: var(--mr-on-accent) !important;
    -webkit-text-fill-color: var(--mr-on-accent) !important;
}
body.mr .mr-logo__tag {
    color: var(--mr-muted-2) !important;
    -webkit-text-fill-color: var(--mr-muted-2) !important;
}
body.mr .mr-nav__link {
    color: var(--mr-ink) !important;
    -webkit-text-fill-color: var(--mr-ink) !important;
}
body.mr .mr-nav__link.is-active {
    color: var(--mr-on-accent) !important;
    -webkit-text-fill-color: var(--mr-on-accent) !important;
}
body.mr .mr-cart__label { color: var(--mr-muted) !important; -webkit-text-fill-color: var(--mr-muted) !important; }
body.mr .mr-cart__count { color: var(--mr-on-accent) !important; -webkit-text-fill-color: var(--mr-on-accent) !important; }
body.mr .mr-header__cta { color: var(--mr-on-accent) !important; -webkit-text-fill-color: var(--mr-on-accent) !important; }
body.mr .mr-footer__wordmark { color: var(--mr-ink) !important; -webkit-text-fill-color: var(--mr-ink) !important; }
body.mr .mr-footer__wordmark .mr-accent-text { color: var(--mr-accent) !important; -webkit-text-fill-color: var(--mr-accent) !important; }
body.mr .mr-footer__mission { color: var(--mr-muted) !important; -webkit-text-fill-color: var(--mr-muted) !important; }
body.mr .mr-footer__label { color: var(--mr-muted-3) !important; -webkit-text-fill-color: var(--mr-muted-3) !important; }
body.mr .mr-footer__links a { color: var(--mr-ink-2) !important; -webkit-text-fill-color: var(--mr-ink-2) !important; }
body.mr .mr-footer__links a:hover { color: var(--mr-accent) !important; -webkit-text-fill-color: var(--mr-accent) !important; }
body.mr .mr-footer__sub { color: var(--mr-muted-3) !important; -webkit-text-fill-color: var(--mr-muted-3) !important; }

/* ============================================================
 * 19. SHOP polish — give cards better breathing room and a
 *    subtle hover state on the whole card.
 * ============================================================ */
.woocommerce .products,
.woocommerce-page .products { margin-top: 32px !important; }
.woocommerce .product-small.box { transition: border-color .15s var(--mr-ease); }
.woocommerce .product-small.box:hover { border-color: var(--mr-line-btn) !important; }

/* Wider gutter on shop title block */
.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header {
    padding: 48px var(--mr-gutter) 24px;
    border-bottom: 1px solid var(--mr-line);
}

/* Shop / Account / Cart / Checkout page padding overall (give
   sections room to breathe inside the Apex chrome) */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce,
.single-product .product { padding-left: var(--mr-gutter); padding-right: var(--mr-gutter); }

/* ============================================================
 * 18. RESPONSIVE — 2-up grid on mobile
 * ============================================================ */
@media (max-width: 900px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .products.row,
    .woocommerce-page .products.row {
        grid-template-columns: 1fr 1fr !important;
    }
    .woocommerce .product-small .box-text,
    .woocommerce-page .product-small .box-text { padding: 16px !important; }
    .woocommerce div.product .summary { padding: 22px; }
}
@media (max-width: 549px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .products.row,
    .woocommerce-page .products.row {
        grid-template-columns: 1fr !important;
    }
}