/*
 * ss-reference-polish.css — LOADED LAST (priority 1001)
 * ─────────────────────────────────────────────────────
 * v3: rewritten as ONE consistent layer. The old file had three stacked
 * "corrections" fighting each other (that is why some text looked small
 * and some bold). Now:
 *   • Part 1  site-wide font + star colours
 *   • Part 2  front-page / single-product spacing (unchanged behaviour)
 *   • Part 3  SHOP PAGE — token-driven (one type scale, two weights)
 */
/*
 * Reference polish
 * Visual-only overrides for the supplied Instrument Sans / black-star / compact-shop
 * reference. Loaded last so the existing theme and WooCommerce behavior stay
 * intact.
 */

/* Instrument Sans site-wide. Keep icon fonts and WooCommerce's star glyph untouched. */
html body,
html body :not(i):not(svg):not(code):not(pre):not(.star-rating):not(.star-rating *):not(.dashicons):not([class*="fa-"]):not([class*="icon"]):not([class*="Icon"]):not([class*="material-icons"]):not(.ss-ic) {
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
html body #lk-header,
html body #lk-header :not(i):not(svg):not(code):not(pre):not(.star-rating):not(.star-rating *):not(.dashicons):not([class*="fa-"]):not([class*="icon"]):not([class*="Icon"]):not([class*="material-icons"]):not(.ss-ic) {
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
html body button,
html body input,
html body select,
html body textarea,
html body option,
html body ::placeholder,
html body #lk-header button,
html body #lk-header input,
html body #lk-header select,
html body #lk-header textarea,
html body #lk-header option,
html body #lk-header ::placeholder {
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* WooCommerce review controls retain their dedicated star font. */
html body .woocommerce .star-rating,
html body .woocommerce .star-rating::before,
html body .woocommerce .star-rating span::before,
html body .woocommerce p.stars a::before {
    font-family: star, WooCommerce, sans-serif !important;
}

/* One restrained black/gray star treatment for all rating displays. */
html body .ss-fcard-stars,
html body .ss-pcard-rating,
html body .ss-review-stars,
html body .ss-tm-stars,
html body .ss-tm-rating {
    align-items: center;
    gap: 4px !important;
}
html body .ss-fcard-stars-icons,
html body .ss-pcard-stars,
html body .ss-review-stars,
html body .ss-tm-stars,
html body .ss-tm-rating {
    color: var(--ss-ink) !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}
html body .ss-fcard-stars-icons .ss-star,
html body .ss-pcard-stars .ss-star {
    font-size: 12px !important;
    line-height: 1 !important;
}
html body .ss-fcard-stars-icons .ss-star.is-full,
html body .ss-fcard-stars-icons .ss-star.is-half,
html body .ss-pcard-stars .ss-star--full {
    color: var(--ss-ink) !important;
}
html body .ss-fcard-stars-icons .ss-star.is-empty,
html body .ss-pcard-stars .ss-star--empty {
    color: var(--ss-border) !important;
}
html body .ss-fcard-stars-icons .ss-star.is-half {
    background: linear-gradient(90deg, var(--ss-ink) 50%, var(--ss-border) 50%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html body .ss-fcard-stars-num,
html body .ss-fcard-stars-count,
html body .ss-pcard-rating-num {
    font-size: 10.5px !important;
    line-height: 1 !important;
}
html body .ss-fcard-stars-num { color: var(--ss-ink) !important; }
html body .ss-fcard-stars-count { color: var(--ss-ink) !important; }

/* WooCommerce ratings: muted unfilled stars, black filled stars, same scale. */
html body .woocommerce .star-rating {
    color: var(--ss-border) !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}
html body .woocommerce .star-rating span,
html body .woocommerce .star-rating span::before {
    color: var(--ss-ink) !important;
}
html body .woocommerce p.stars a,
html body .woocommerce p.stars a::before,
html body .woocommerce p.stars.selected a:not(.active),
html body .woocommerce p.stars.selected a.active,
html body .woocommerce p.stars:hover a {
    color: var(--ss-ink) !important;
}
html body .woocommerce p.stars a:hover ~ a,
html body .woocommerce p.stars.selected a.active ~ a {
    color: var(--ss-border) !important;
}
html body .fm-avg-star,
html body .fm-bd-star {
    width: 13px !important;
    height: 13px !important;
    fill: var(--ss-ink) !important;
}
html body .fm-avg-star.empty { fill: var(--ss-border) !important; }


/* 2026 premium storefront pass — spacing and hierarchy only. */
:root {
    --ss-page-max: 1440px;
    --ss-page-pad: clamp(16px, 3vw, 40px);
    --ss-control-h: 46px;
    --ss-type-body: 16px;
}
html body { font-size: var(--ss-type-body); line-height: 1.5; letter-spacing: 0 !important; }
html body h1, html body h2, html body h3, html body h4,
html body p, html body a, html body button, html body input, html body select { letter-spacing: 0 !important; }
html body .col-full { max-width: var(--ss-page-max); padding-inline: var(--ss-page-pad); }
html body #ss-front .ss-fp-container { max-width: var(--ss-page-max) !important; padding-inline: var(--ss-page-pad) !important; }
html body .ss-sec-head { margin-bottom: 20px !important; align-items: end; }
html body .ss-sec-eyebrow { color: var(--ss-muted) !important; margin-bottom: 8px !important; }
html body .ss-sec-title { font-size: clamp(28px, 3vw, 42px) !important; font-weight: 500 !important; line-height: 1.12 !important; }
html body .ss-sec-all { font-size: 14px !important; font-weight: 500 !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; }
html body .ss-fcard, html body .ss-cat-card { border-radius: 8px !important; box-shadow: none !important; transition: transform .2s ease, box-shadow .2s ease !important; }
html body .ss-fcard:hover, html body .ss-cat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--ss-ink) 7%, transparent) !important; }
html body .ss-fcard-name, html body .ss-fcard-name a { font-weight: 500 !important; }
html body .ss-add-round, html body .single_add_to_cart_button, html body .button.alt { min-height: var(--ss-control-h) !important; border-radius: 999px !important; font-weight: 500 !important; letter-spacing: 0 !important; box-shadow: none !important; }
html body .fm-product-main { max-width: var(--ss-page-max) !important; margin-inline: auto !important; padding-inline: var(--ss-page-pad) !important; }
html body .fm-product-title { font-weight: 500 !important; line-height: 1.12 !important; letter-spacing: 0 !important; }
html body .fm-product-price { font-weight: 500 !important; }
html body .fm-product-gallery, html body .fm-summary { border-radius: 8px !important; }
@media(max-width:768px){
    :root { --ss-page-pad: 16px; --ss-type-body: 15px; }
    html body .ss-sec-head { margin-bottom: 14px !important; }
    html body .ss-sec-title { font-size: 26px !important; }
    html body .ss-fcard:hover, html body .ss-cat-card:hover { transform: none; box-shadow: none !important; }
}
@media(prefers-reduced-motion:reduce){html body .ss-fcard,html body .ss-cat-card{transition:none!important}}



/* ══════════════════════════════════════════════════════════════════
   SITE-WIDE TYPOGRAPHY SAFETY NET  (every page: front, shop, product,
   cart, checkout, account, header)
   ──────────────────────────────────────────────────────────────────
   Source CSS was also normalised to the same rules (only weights 400/500,
   no text under 14px except tiny badges at 12px, no ALL-CAPS labels).
   This block guarantees it even where a plugin/builder adds its own CSS.
   ══════════════════════════════════════════════════════════════════ */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body strong, html body b, html body th, html body dt, html body legend,
html body .woocommerce-loop-product__title, html body .product_title, html body .entry-title {
    font-weight: 500 !important;
}
/* Section labels ("Browse", "Our story"…): quiet 14px text, not tiny tracked caps */
html body [class*="eyebrow"] {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}
html body .ss-sec-title { font-weight: 500 !important; letter-spacing: -0.015em !important; line-height: 1.12 !important; }

/* ══════════════════════════════════════════════════════════════════
   SHOP / COLLECTION PAGE — single source of truth
   ──────────────────────────────────────────────────────────────────
   Reference: Local theme (Shopify) collection page.
   Rules that make it look "polished":
     1. ONE type scale:  14 / 16 / 18 / 24 / 56  (nothing else on this page)
     2. TWO weights:     400 (everything) and 500 (product title, active chip)
     3. ONE spacing scale: 4 / 8 / 12 / 16 / 24 / 32  (multiples of 4)
     4. ONE muted colour and ONE line colour.
   To retune the whole page, change the variables just below — do NOT add
   new font-size / font-weight values in individual selectors.
   ══════════════════════════════════════════════════════════════════ */
:root {
    --ss-t-sm: 14px;                      /* smallest text (counts, notes) */
    --ss-t-md: 16px;                      /* body, filters, chips, meta */
    --ss-t-lg: 18px;                      /* price, section names, buttons */
    --ss-t-xl: 24px;                      /* product title */
    --ss-t-h1: clamp(36px, 4.2vw, 56px);  /* page heading */
    --ss-w-reg: 400;
    --ss-w-med: 500;
    --ss-c-ink: var(--ss-ink);
    --ss-c-muted: var(--ss-ink);
    --ss-c-line: var(--ss-cream);
    --ss-sp-1: 4px;  --ss-sp-2: 8px;  --ss-sp-3: 12px;
    --ss-sp-4: 16px; --ss-sp-5: 24px; --ss-sp-6: 32px;
    --ss-shop-pad: clamp(16px, 2.4vw, 40px);
    --ss-shop-max: 1500px;
    /* card scale (overridden on small screens further below) */
    --ssc-card-title: var(--ss-t-xl);
    --ssc-card-price: var(--ss-t-lg);
    --ssc-card-sub:   var(--ss-t-md);
    --ssc-card-star:  18px;
    --ssc-card-btn-h: 50px;
    --ssc-card-btn-f: var(--ss-t-lg);
    --ssc-card-pad:   var(--ss-sp-5);
}

/* ── Header: compact breadcrumb ── */
html body .ssc-header {
    width: 100% !important;
    max-width: var(--ss-shop-max) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: var(--ss-sp-5) var(--ss-shop-pad) var(--ss-sp-3) !important;
    display: block !important;
    box-sizing: border-box !important;
}
html body .ssc-eyebrow {
    margin: 0 !important;
    color: var(--ss-c-ink) !important;
    font-size: var(--ss-t-md) !important;
    font-weight: var(--ss-w-reg) !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}
html body .ssc-title {
    margin: 0 !important;
    color: var(--ss-c-ink) !important;
    font-size: var(--ss-t-h1) !important;
    font-weight: var(--ss-w-reg) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.1 !important;
}
html body .ssc-subtitle {
    display: block !important;
    max-width: none !important;
    margin: var(--ss-sp-4) 0 0 !important;
    color: var(--ss-c-muted) !important;
    font-size: var(--ss-t-md) !important;
    font-weight: var(--ss-w-reg) !important;
    line-height: 1.4 !important;
}

/* ── Category chips + sort ── */
html body .ssc-filter-bar {
    position: relative !important;
    top: auto !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ss-c-line) !important;
    background: var(--ss-white) !important;
}
html body .ssc-filter-inner {
    width: 100% !important;
    max-width: var(--ss-shop-max) !important;
    margin: 0 auto !important;
    padding: var(--ss-sp-3) var(--ss-shop-pad) var(--ss-sp-4) !important;
    gap: var(--ss-sp-2) !important;
    box-sizing: border-box !important;
}
html body .ssc-chip {
    min-height: 44px;
    padding: 0 var(--ss-sp-4) !important;
    gap: var(--ss-sp-2) !important;
    border: 1px solid var(--ss-c-line) !important;
    border-radius: 999px !important;
    color: var(--ss-c-ink) !important;
    font-size: var(--ss-t-md) !important;
    font-weight: var(--ss-w-reg) !important;
    line-height: 1 !important;
}
html body .ssc-chip:hover { border-color: var(--ss-c-ink) !important; }
html body .ssc-chip.is-active {
    border-color: var(--ss-c-ink) !important;
    background: var(--ss-c-ink) !important;
    color: var(--ss-white) !important;
    font-weight: var(--ss-w-med) !important;
}
html body .ssc-chip-count {
    font-size: var(--ss-t-sm) !important;
    font-weight: var(--ss-w-reg) !important;
    opacity: .6 !important;
}
html body .ssc-sort-select {
    min-height: 44px;
    min-width: 168px !important;
    padding: 0 40px 0 20px !important;
    border: 1px solid var(--ss-c-line) !important;
    border-radius: 999px !important;
    color: var(--ss-c-ink) !important;
    font-size: var(--ss-t-md) !important;
    font-weight: var(--ss-w-reg) !important;
}
html body .ssc-mobile-filter-btn {
    min-height: 44px;
    padding: 0 20px !important;
    border: 1px solid var(--ss-c-ink) !important;
    font-size: var(--ss-t-md) !important;
    font-weight: var(--ss-w-reg) !important;
}
html body .ssc-mobile-filter-badge { font-size: var(--ss-t-sm) !important; font-weight: var(--ss-w-med) !important; }

/* ── Body layout: sidebar + grid ── */
html body .ssc-body {
    width: 100% !important;
    max-width: var(--ss-shop-max) !important;
    margin: 0 auto !important;
    padding: 0 var(--ss-shop-pad) !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    gap: var(--ss-sp-6) !important;
    box-sizing: border-box !important;
}

/* ── Sidebar ── */
html body .ssc-sidebar {
    padding: var(--ss-sp-5) 0 var(--ss-sp-6) !important;
    border-right: 0 !important;
}
html body .ssc-sidebar-clear-all { margin-bottom: var(--ss-sp-3) !important; }
html body .ssc-sidebar-title-main {
    color: var(--ss-c-ink) !important;
    font-size: var(--ss-t-lg) !important;
    font-weight: var(--ss-w-med) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body .ssc-clear-all-link {
    color: var(--ss-c-muted) !important;
    font-size: var(--ss-t-sm) !important;
    font-weight: var(--ss-w-reg) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
html body .ssc-filter-section {
    padding: var(--ss-sp-4) 0 var(--ss-sp-5) !important;
    border-top: 1px solid var(--ss-c-line) !important;
}
html body .ssc-fs-header { margin-bottom: var(--ss-sp-3) !important; }
html body .ssc-fs-name {
    color: var(--ss-c-ink) !important;
    font-size: var(--ss-t-lg) !important;
    font-weight: var(--ss-w-reg) !important;
}
html body .ssc-fs-action { font-size: var(--ss-t-md) !important; color: var(--ss-c-muted) !important; }
html body .ssc-check-list { gap: var(--ss-sp-3) !important; }
html body .ssc-check-item { gap: var(--ss-sp-3) !important; }
html body .ssc-check-item input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
}
html body .ssc-check-label {
    color: var(--ss-c-ink) !important;
    font-size: var(--ss-t-md) !important;
    font-weight: var(--ss-w-reg) !important;
    line-height: 1.3 !important;
}
html body .ssc-check-count {
    color: var(--ss-c-muted) !important;
    font-size: var(--ss-t-sm) !important;
    font-weight: var(--ss-w-reg) !important;
}
html body .ssc-weight-chips { gap: var(--ss-sp-2) !important; }
html body .ssc-weight-chip {
    min-height: 40px;
    padding: 0 var(--ss-sp-4) !important;
    border: 1px solid var(--ss-c-line) !important;
    font-size: var(--ss-t-md) !important;
    font-weight: var(--ss-w-reg) !important;
    line-height: 1 !important;
}
html body .ssc-weight-chip:hover { border-color: var(--ss-c-ink) !important; }
html body .ssc-weight-chip.is-active {
    border-color: var(--ss-c-ink) !important;
    background: var(--ss-c-ink) !important;
    color: var(--ss-white) !important;
}
html body .ssc-active-pill { font-size: var(--ss-t-sm) !important; font-weight: var(--ss-w-reg) !important; }
html body .ssc-apply-btn {
    min-height: 50px;
    font-size: var(--ss-t-md) !important;
    font-weight: var(--ss-w-med) !important;
    letter-spacing: 0 !important;
}

/* ── Product heading + grid ── */
html body .ssc-content { padding: var(--ss-sp-3) 0 0 !important; }
html body .ssc-results-bar { display: flex !important; }
html body #ss-shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--ss-sp-5) !important;
    align-items: stretch !important;
}
@media (min-width: 1024px) and (max-width: 1199px) {
    :root {
        --ssc-card-title: 18px;
        --ssc-card-price: 16px;
        --ssc-card-pad: 12px;
    }
}
html body .ssc-page-btn {
    width: 44px; height: 44px;
    font-size: var(--ss-t-md) !important;
    font-weight: var(--ss-w-reg) !important;
}
html body .ssc-page-btn.is-active { font-weight: var(--ss-w-med) !important; }
html body .ssc-no-products { font-size: var(--ss-t-md) !important; font-weight: var(--ss-w-reg) !important; }

/* ── PRODUCT CARD (shop grid) ──
   Order inside card: image → price → title → category → stars → button.
   Every size below comes from the --ssc-card-* variables above. */
html body #ss-shop-grid .ss-fcard , html body .ss-shop-grid--front .ss-fcard , html body .ss-card-wrap--related .ss-fcard {
    min-width: 0;
    height: 100% !important;
    border: 1px solid var(--ss-c-line) !important;
    border-radius: 12px !important;
    background: var(--ss-white) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color .18s ease !important;
}
html body #ss-shop-grid .ss-fcard:hover , html body .ss-shop-grid--front .ss-fcard:hover , html body .ss-card-wrap--related .ss-fcard:hover {
    border-color: var(--ss-border) !important;
    box-shadow: none !important;
    transform: none !important;
}
html body #ss-shop-grid .ss-fcard .ss-fcard-img, html body .ss-shop-grid--front .ss-fcard .ss-fcard-img, html body .ss-card-wrap--related .ss-fcard .ss-fcard-img,
html body #ss-shop-grid .ss-fcard a.ss-fcard-img , html body .ss-shop-grid--front .ss-fcard a.ss-fcard-img , html body .ss-card-wrap--related .ss-fcard a.ss-fcard-img {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    background: var(--ss-white) !important;
}
html body #ss-shop-grid .ss-fcard .ss-fcard-img img , html body .ss-shop-grid--front .ss-fcard .ss-fcard-img img , html body .ss-card-wrap--related .ss-fcard .ss-fcard-img img {
    padding: var(--ss-sp-4) !important;
    object-fit: contain !important;
}
html body #ss-shop-grid .ss-fcard .ss-fcard-body , html body .ss-shop-grid--front .ss-fcard .ss-fcard-body , html body .ss-card-wrap--related .ss-fcard .ss-fcard-body {
    gap: var(--ss-sp-2) !important;
    padding: var(--ss-sp-2) var(--ssc-card-pad) var(--ssc-card-pad) !important;
}

/* price: current price first, old price struck-through after it */
html body #ss-shop-grid .ss-fcard .ss-fcard-price , html body .ss-shop-grid--front .ss-fcard .ss-fcard-price , html body .ss-card-wrap--related .ss-fcard .ss-fcard-price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: var(--ss-sp-3) !important;
    min-height: 0 !important;
    margin: 0 !important;
    color: var(--ss-c-ink) !important;
    font-size: var(--ssc-card-price) !important;
    font-weight: var(--ss-w-reg) !important;
    line-height: 1.25 !important;
}
html body #ss-shop-grid .ss-fcard .ss-fcard-price ins , html body .ss-shop-grid--front .ss-fcard .ss-fcard-price ins , html body .ss-card-wrap--related .ss-fcard .ss-fcard-price ins { order: 1; }
html body #ss-shop-grid .ss-fcard .ss-fcard-price del , html body .ss-shop-grid--front .ss-fcard .ss-fcard-price del , html body .ss-card-wrap--related .ss-fcard .ss-fcard-price del { order: 2; }
html body #ss-shop-grid .ss-fcard .ss-fcard-price .woocommerce-Price-amount, html body .ss-shop-grid--front .ss-fcard .ss-fcard-price .woocommerce-Price-amount, html body .ss-card-wrap--related .ss-fcard .ss-fcard-price .woocommerce-Price-amount,
html body #ss-shop-grid .ss-fcard .ss-fcard-price ins, html body .ss-shop-grid--front .ss-fcard .ss-fcard-price ins, html body .ss-card-wrap--related .ss-fcard .ss-fcard-price ins,
html body #ss-shop-grid .ss-fcard .ss-fcard-price del , html body .ss-shop-grid--front .ss-fcard .ss-fcard-price del , html body .ss-card-wrap--related .ss-fcard .ss-fcard-price del {
    font-size: inherit !important;
    font-weight: var(--ss-w-reg) !important;
}
html body #ss-shop-grid .ss-fcard .ss-fcard-price del, html body .ss-shop-grid--front .ss-fcard .ss-fcard-price del, html body .ss-card-wrap--related .ss-fcard .ss-fcard-price del,
html body #ss-shop-grid .ss-fcard .ss-fcard-price del .woocommerce-Price-amount , html body .ss-shop-grid--front .ss-fcard .ss-fcard-price del .woocommerce-Price-amount , html body .ss-card-wrap--related .ss-fcard .ss-fcard-price del .woocommerce-Price-amount {
    color: var(--ss-c-muted) !important;
}

/* title */
html body #ss-shop-grid .ss-fcard .ss-fcard-name, html body .ss-shop-grid--front .ss-fcard .ss-fcard-name, html body .ss-card-wrap--related .ss-fcard .ss-fcard-name,
html body #ss-shop-grid .ss-fcard .ss-fcard-name a , html body .ss-shop-grid--front .ss-fcard .ss-fcard-name a , html body .ss-card-wrap--related .ss-fcard .ss-fcard-name a {
    margin: 0 !important;
    color: var(--ss-c-ink) !important;
    font-size: var(--ssc-card-title) !important;
    font-weight: var(--ss-w-med) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
}

/* stars: black stars + small count (rating number hidden, like the reference) */
html body #ss-shop-grid .ss-fcard .ss-fcard-stars , html body .ss-shop-grid--front .ss-fcard .ss-fcard-stars , html body .ss-card-wrap--related .ss-fcard .ss-fcard-stars {
    gap: var(--ss-sp-2) !important;
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}
html body #ss-shop-grid .ss-fcard .ss-fcard-stars-icons, html body .ss-shop-grid--front .ss-fcard .ss-fcard-stars-icons, html body .ss-card-wrap--related .ss-fcard .ss-fcard-stars-icons,
html body #ss-shop-grid .ss-fcard .ss-fcard-stars-icons .ss-star , html body .ss-shop-grid--front .ss-fcard .ss-fcard-stars-icons .ss-star , html body .ss-card-wrap--related .ss-fcard .ss-fcard-stars-icons .ss-star {
    font-size: var(--ssc-card-star) !important;
    line-height: 1 !important;
}
html body #ss-shop-grid .ss-fcard .ss-fcard-stars-icons , html body .ss-shop-grid--front .ss-fcard .ss-fcard-stars-icons , html body .ss-card-wrap--related .ss-fcard .ss-fcard-stars-icons { gap: 2px !important; }
html body #ss-shop-grid .ss-fcard .ss-fcard-stars-num , html body .ss-shop-grid--front .ss-fcard .ss-fcard-stars-num , html body .ss-card-wrap--related .ss-fcard .ss-fcard-stars-num { display: none !important; }
html body #ss-shop-grid .ss-fcard .ss-fcard-stars-count , html body .ss-shop-grid--front .ss-fcard .ss-fcard-stars-count , html body .ss-card-wrap--related .ss-fcard .ss-fcard-stars-count {
    color: var(--ss-c-muted) !important;
    font-size: var(--ss-t-sm) !important;
    font-weight: var(--ss-w-reg) !important;
}

/* button: always pinned to the bottom so every card lines up */
html body #ss-shop-grid .ss-fcard .ss-fcard-actions , html body .ss-shop-grid--front .ss-fcard .ss-fcard-actions , html body .ss-card-wrap--related .ss-fcard .ss-fcard-actions {
    margin: auto 0 0 !important;
    padding: var(--ss-sp-3) 0 0 !important;
}
html body #ss-shop-grid .ss-fcard .ss-add-round.ss-product-link , html body .ss-shop-grid--front .ss-fcard .ss-add-round.ss-product-link , html body .ss-card-wrap--related .ss-fcard .ss-add-round.ss-product-link {
    min-height: var(--ssc-card-btn-h) !important;
    padding: 0 var(--ss-sp-5) !important;
    border: 1px solid var(--ss-c-ink) !important;
    background: transparent !important;
    color: var(--ss-c-ink) !important;
    font-size: var(--ssc-card-btn-f) !important;
    font-weight: var(--ss-w-reg) !important;
    line-height: 1 !important;
}
html body #ss-shop-grid .ss-fcard .ss-add-round.ss-product-link:hover, html body .ss-shop-grid--front .ss-fcard .ss-add-round.ss-product-link:hover, html body .ss-card-wrap--related .ss-fcard .ss-add-round.ss-product-link:hover,
html body #ss-shop-grid .ss-fcard .ss-add-round.ss-product-link:focus-visible , html body .ss-shop-grid--front .ss-fcard .ss-add-round.ss-product-link:focus-visible , html body .ss-card-wrap--related .ss-fcard .ss-add-round.ss-product-link:focus-visible {
    background: var(--ss-c-ink) !important;
    color: var(--ss-white) !important;
}

/* sale badge: "4% OFF" pill  →  flat red "-4%" tag (top-right) */
html body #ss-shop-grid .ss-fcard .ss-fcard-badges-right , html body .ss-shop-grid--front .ss-fcard .ss-fcard-badges-right , html body .ss-card-wrap--related .ss-fcard .ss-fcard-badges-right { top: var(--ss-sp-3) !important; right: var(--ss-sp-3) !important; }
html body #ss-shop-grid .ss-fcard .ss-fcard-badge.ss-badge-sale , html body .ss-shop-grid--front .ss-fcard .ss-fcard-badge.ss-badge-sale , html body .ss-card-wrap--related .ss-fcard .ss-fcard-badge.ss-badge-sale {
    flex-direction: row !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
    background: var(--ss-badge-sale) !important;
    color: var(--ss-white) !important;
    font-size: var(--ss-t-sm) !important;
    font-weight: var(--ss-w-med) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
}
html body #ss-shop-grid .ss-fcard .ss-fcard-badge.ss-badge-sale em , html body .ss-shop-grid--front .ss-fcard .ss-fcard-badge.ss-badge-sale em , html body .ss-card-wrap--related .ss-fcard .ss-fcard-badge.ss-badge-sale em {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
}
html body #ss-shop-grid .ss-fcard .ss-fcard-badge.ss-badge-sale em::before , html body .ss-shop-grid--front .ss-fcard .ss-fcard-badge.ss-badge-sale em::before , html body .ss-card-wrap--related .ss-fcard .ss-fcard-badge.ss-badge-sale em::before { content: "\2212"; }
html body #ss-shop-grid .ss-fcard .ss-fcard-badge.ss-badge-sale small , html body .ss-shop-grid--front .ss-fcard .ss-fcard-badge.ss-badge-sale small , html body .ss-card-wrap--related .ss-fcard .ss-fcard-badge.ss-badge-sale small { display: none !important; }

/* ── Same weights on every other card (front page, related products) ── */
html body .ss-fcard .ss-fcard-price { font-weight: var(--ss-w-med) !important; }
html body .ss-fcard .ss-fcard-price del { font-weight: var(--ss-w-reg) !important; }
html body .ss-fcard .ss-fcard-stars-count { font-weight: var(--ss-w-reg) !important; }

/* ── Tablet ── */
@media (max-width: 1023px) {
    html body .ssc-body { grid-template-columns: 200px minmax(0, 1fr) !important; gap: var(--ss-sp-5) !important; }
    html body #ss-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--ss-sp-4) !important; }
}

/* ── Mobile (2-column grid, no sidebar) ── */
@media (max-width: 768px) {
    :root {
        --ssc-card-title: 20px;
        --ssc-card-price: var(--ss-t-md);
        --ssc-card-sub:   var(--ss-t-sm);
        --ssc-card-star:  16px;
        --ssc-card-btn-h: 44px;
        --ssc-card-btn-f: var(--ss-t-md);
        --ssc-card-pad:   var(--ss-sp-3);
    }
    html body .ssc-header { padding: var(--ss-sp-4) var(--ss-shop-pad) var(--ss-sp-3) !important; }
    html body .ssc-eyebrow { margin-bottom: 0 !important; font-size: var(--ss-t-sm) !important; }
    html body .ssc-body { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
    html body .ssc-content { padding-top: var(--ss-sp-2) !important; }
    html body #ss-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--ss-sp-3) !important; }
    html body #ss-shop-grid .ss-fcard .ss-fcard-img img { padding: var(--ss-sp-2) !important; }
    html body #ss-shop-grid .ss-fcard .ss-add-round.ss-product-link { padding: 0 var(--ss-sp-3) !important; }
    html body .ssc-chip { min-height: 40px; padding: 0 var(--ss-sp-4) !important; }
    html body .ssc-page-btn { width: 40px; height: 40px; }
}
@media (max-width: 400px) {
    :root { --ssc-card-title: 18px; }
    html body #ss-shop-grid { gap: var(--ss-sp-2) !important; }
}
@media (prefers-reduced-motion: reduce) {
    html body #ss-shop-grid .ss-fcard { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   SHARED PRODUCT CARD — image, title, price, and rating row
   Used on the homepage, shop grids, and single-product recommendations.
   ══════════════════════════════════════════════════════════════════ */
html body .ss-fcard {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
html body .ss-fcard:hover {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
html body .ss-fcard .ss-fcard-img,
html body .ss-fcard a.ss-fcard-img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: var(--ss-cream) !important;
}
html body .ss-fcard .ss-fcard-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 8px !important;
    object-fit: contain !important;
}
html body .ss-fcard .ss-fcard-body {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 14px 3px 0 !important;
}
html body .ss-fcard .ss-fcard-name,
html body .ss-fcard .ss-fcard-name a {
    display: -webkit-box !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--ss-ink) !important;
    font-family: inherit !important;
    font-size: clamp(16px, 1.35vw, 20px) !important;
    font-weight: 650 !important;
    line-height: 1.24 !important;
    letter-spacing: -.015em !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}
html body .ss-fcard .ss-fcard-name a:hover {
    color: var(--ss-ink) !important;
}
html body .ss-fcard .ss-fcard-price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-height: 0 !important;
    margin: 0 !important;
    color: var(--ss-ink) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
html body .ss-fcard .ss-fcard-from {
    display: inline !important;
    margin: 0 !important;
    color: var(--ss-ink) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    text-transform: lowercase !important;
}
html body .ss-fcard .ss-fcard-price .woocommerce-Price-amount,
html body .ss-fcard .ss-fcard-price ins,
html body .ss-fcard .ss-fcard-price ins .woocommerce-Price-amount {
    color: var(--ss-ink) !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}
html body .ss-fcard .ss-fcard-price ins {
    text-decoration: none !important;
}
html body .ss-fcard .ss-fcard-price del,
html body .ss-fcard .ss-fcard-price del .woocommerce-Price-amount {
    color: var(--ss-ink) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
html body .ss-fcard .ss-fcard-actions {
    display: none !important;
}
html body .ss-fcard .ss-fcard-stars {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
html body .ss-fcard a.ss-fcard-img:focus-visible,
html body .ss-fcard .ss-fcard-name a:focus-visible {
    outline: 2px solid var(--ss-ink) !important;
    outline-offset: 3px !important;
}
@media (max-width: 640px) {
    html body .ss-fcard .ss-fcard-img,
    html body .ss-fcard a.ss-fcard-img {
        border-radius: 20px !important;
    }
    html body .ss-fcard .ss-fcard-body {
        gap: 4px !important;
        padding: 11px 2px 0 !important;
    }
    html body .ss-fcard .ss-fcard-name,
    html body .ss-fcard .ss-fcard-name a {
        font-size: clamp(14px, 4vw, 18px) !important;
    }
    html body .ss-fcard .ss-fcard-price {
        font-size: 13px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   FESTIVE SWEETS PALETTE — berry red + warm honey gold, site-wide
   Loaded last from functions.php so it also harmonises legacy CSS.
   ══════════════════════════════════════════════════════════════════ */
:root {
    --ss-green: var(--ss-brand);
    --ss-darkgreen: var(--ss-brand-deep);
    --ss-green-deep: var(--ss-brand-deep);
    --ss-green-mid: var(--ss-brand);
    --ss-green-bright: var(--ss-brand);
    --ss-c-ink: var(--ss-ink);
    --ss-c-muted: var(--ss-muted);
    --ss-c-line: var(--ss-border);
    --fm-primary: var(--ss-brand);
    --fm-primary-dk: var(--ss-brand-deep);
    --fm-primary-soft: var(--ss-brand-soft);
    --fm-primary-10: color-mix(in srgb, var(--ss-brand) 10%, transparent);
    --fm-primary-30: color-mix(in srgb, var(--ss-brand) 30%, transparent);
    --fm-card: var(--ss-surface);
    --fm-cream: var(--ss-cream);
    --fm-muted: var(--ss-brand-soft);
    --fm-fg: var(--ss-ink);
    --sg: var(--ss-brand);
    --sgd: var(--ss-brand-deep);
    --sgl: var(--ss-brand);
    --sgp: var(--ss-brand-soft);
    --sgb: var(--ss-border-strong);
    --st: var(--ss-ink);
    --stm: var(--ss-ink-soft);
    --sts: var(--ss-muted);
    --sb: var(--ss-border);
    --sw: var(--ss-white);
    --sbg: var(--ss-site-background-color);
}

html body .site-content,
html body #content.site-content,
html body .site-main,
html body .site-content #primary,
html body .content-area,
html body.home #ss-front,
html body.single-product #primary {
    background-color: var(--ss-site-background-color) !important;
    color: var(--ss-ink) !important;
}
html body .site-content :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, label, legend, summary, .price, .product_title, .woocommerce-loop-product__title) {
    color: var(--ss-ink) !important;
}
html body .site-content a:not(.button):not([class*="btn"]):not(.wp-element-button):not(.wp-block-button__link):not(.wc-block-components-button):not(.ss-tr-shop):not(.ss-sw-btn):not(.ss-add-round) {
    color: var(--ss-ink-soft) !important;
}
html body .site-content a:not(.button):not([class*="btn"]):not(.wp-element-button):not(.wp-block-button__link):not(.wc-block-components-button):hover {
    color: var(--ss-brand) !important;
}

/* Theme-owned header stays light. The custom footer plugin is deliberately untouched. */
html body .site-header,
html body #masthead,
html body .storefront-primary-navigation,
html body .main-navigation,
html body .main-navigation ul.menu ul.sub-menu {
    background-color: var(--ss-surface) !important;
    color: var(--ss-ink) !important;
    border-color: color-mix(in srgb, var(--ss-brand) 16%, transparent) !important;
}
html body .site-header a,
html body #masthead a,
html body .main-navigation a,
html body .storefront-primary-navigation a {
    color: var(--ss-ink) !important;
}
html body .site-header a:hover,
html body #masthead a:hover,
html body .main-navigation a:hover,
html body .storefront-primary-navigation a:hover {
    color: var(--ss-brand) !important;
}
/* Warm surfaces, berry borders, and red purchase actions across WooCommerce. */
html body .ss-fcard,
html body .ss-pcard,
html body .ss-product-card,
html body .ss-tr-card,
html body .fm-summary,
html body .fm-product-gallery,
html body .ssc-prod-card,
html body .ss-prod-card,
html body .lk-auth-card,
html body .ss-card,
html body .ss-stat,
html body .ss-vorder-card,
html body .ss-form-wrap {
    background-color: var(--ss-surface) !important;
    border-color: color-mix(in srgb, var(--ss-brand) 18%, transparent) !important;
}
html body .site-content input,
html body .site-content select,
html body .site-content textarea {
    background-color: var(--ss-surface) !important;
    color: var(--ss-ink) !important;
    border-color: color-mix(in srgb, var(--ss-brand) 24%, transparent) !important;
}
html body .site-content input::placeholder,
html body .site-content textarea::placeholder {
    color: var(--ss-ink) !important;
}
html body .ss-btn-primary,
html body .ss-add-round:not(.is-oos),
html body .ss-fcard .ss-add-round:not(.is-oos),
html body .ss-pcard-cart-btn,
html body .ss-pcard-add-btn,
html body .ss-product-card .button,
html body .ssvc-add-btn,
html body .ss-atc-btn,
html body .single_add_to_cart_button,
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button,
html body .woocommerce a.button.alt,
html body .woocommerce button.button.alt,
html body .woocommerce input.button.alt,
html body .wc-proceed-to-checkout .checkout-button,
html body #place_order,
html body .sscc-btn-primary,
html body .ss-cart-checkout-btn,
html body .ss-checkout-place-order,
html body .ss-btn-green,
html body .ss-form-wrap button[type="submit"],
html body .ss-tr-more-btn,
html body .ss-signin-btn {
    background: var(--ss-brand) !important;
    color: var(--ss-cream) !important;
    border-color: var(--ss-brand) !important;
}
html body .ss-btn-primary:hover,
html body .ss-add-round:hover:not(.is-oos),
html body .single_add_to_cart_button:hover,
html body .woocommerce a.button:hover,
html body .woocommerce button.button:hover,
html body .woocommerce input.button:hover,
html body .ss-signin-btn:hover {
    background: var(--ss-brand-deep) !important;
    color: var(--ss-cream) !important;
    border-color: var(--ss-brand-deep) !important;
}

/* Storefront's custom shop, product, account, login, and checkout surfaces. */
html body .ssc-wrap,
html body .ssc-header,
html body .ssc-body,
html body .ssc-toolbar,
html body .ssc-filter-drawer,
html body .ssc-sort-select,
html body .ss-page-bg,
html body .lk-auth {
    background-color: var(--ss-site-background-color) !important;
    color: var(--ss-ink) !important;
}
html body .ssc-wrap :is(h1, h2, h3, h4, p, span, label, strong, small),
html body .ss-db,
html body .ss-pg,
html body .lk-auth :is(h1, h2, h3, h4, p, label, span) {
    color: var(--ss-ink) !important;
}
html body .ssc-cat-pill,
html body .ssc-weight-chip,
html body .ssc-page-btn,
html body .ssc-filter-chip {
    background-color: var(--ss-cream) !important;
    color: var(--ss-ink-soft) !important;
    border-color: color-mix(in srgb, var(--ss-brand) 24%, transparent) !important;
}
html body .ssc-cat-pill.is-active,
html body .ssc-weight-chip.is-active,
html body .ssc-page-btn.is-active {
    background-color: var(--ss-brand) !important;
    color: var(--ss-cream) !important;
    border-color: var(--ss-brand) !important;
}
html body .ss-banner {
    background: linear-gradient(130deg, var(--ss-brand-deep) 0%, var(--ss-brand) 65%, var(--ss-brand) 100%) !important;
    color: var(--ss-cream) !important;
}
html body .ss-banner :is(h1, h2, h3, p, span, a, strong) {
    color: var(--ss-cream) !important;
}
html body .lk-auth {
    --ink: var(--ss-ink) !important;
    --paper: var(--ss-cream) !important;
    --cream: var(--ss-cream) !important;
    --muted: var(--ss-muted) !important;
    --line: color-mix(in srgb, var(--ss-brand) 20%, transparent) !important;
    --brand: var(--ss-brand) !important;
    --sale: var(--ss-brand) !important;
}

/* Homepage: warm honey canvas, berry-red promos, and the requested Trending panel. */
html body.home #ss-front .ss-tr-wrap {
    background: var(--ss-brand) !important;
    border: 1px solid color-mix(in srgb, var(--ss-brand) 24%, transparent) !important;
}
html body.home #ss-front .ss-tr-title,
html body.home #ss-front .ss-tr-all,
html body.home #ss-front .ss-tr-all svg {
    color: var(--ss-cream) !important;
}
html body.home #ss-front .ss-tr-card {
    background: var(--ss-cream) !important;
    border: 1px solid color-mix(in srgb, var(--ss-cream) 80%, transparent) !important;
}
html body.home #ss-front .ss-tr-name,
html body.home #ss-front .ss-tr-price,
html body.home #ss-front .ss-tr-price .old {
    color: var(--ss-ink) !important;
}
html body.home #ss-front .ss-tr-price .sale {
    color: var(--ss-brand) !important;
}
html body.home #ss-front .ss-tr-shop {
    background: var(--ss-brand-soft) !important;
    color: var(--ss-brand-deep) !important;
}
html body.home #ss-front .ss-tr-shop:hover {
    background: var(--ss-brand-deep) !important;
    color: var(--ss-cream) !important;
}
html body.home #ss-front .ss-tr-more-btn {
    background: var(--ss-cream) !important;
    color: var(--ss-brand) !important;
    border: 1px solid var(--ss-cream) !important;
}
@media (max-width: 639px) {
    html body.home #ss-front .ss-tr-grid.is-collapsed > .ss-tr-card:nth-child(3)::after {
        background: linear-gradient(to bottom, color-mix(in srgb, var(--ss-brand) 0%, transparent), var(--ss-brand)) !important;
    }
}
html body.home #ss-front .ss-sw {
    background: linear-gradient(135deg, var(--ss-brand) 0%, var(--ss-brand-deep) 100%) !important;
}
html body.home #ss-front .ss-sw-h,
html body.home #ss-front .ss-sw-sub,
html body.home #ss-front .ss-sw-tag {
    color: var(--ss-cream) !important;
}
html body.home #ss-front .ss-sw-btn {
    background: var(--ss-cream) !important;
    color: var(--ss-brand) !important;
    border-color: var(--ss-cream) !important;
}
html body.home #ss-front .ss-dp-card:nth-child(odd) {
    background: var(--ss-brand) !important;
}
html body.home #ss-front .ss-dp-card:nth-child(even) {
    background: var(--ss-brand-soft) !important;
}
html body.home #ss-front .ss-dp-card:nth-child(odd) .ss-dp-title,
html body.home #ss-front .ss-dp-card:nth-child(odd) .ss-dp-btn {
    color: var(--ss-cream) !important;
}
html body.home #ss-front .ss-dp-card:nth-child(odd) .ss-dp-btn {
    background: var(--ss-brand-deep) !important;
}
html body.home #ss-front .ss-dp-card:nth-child(even) .ss-dp-title {
    color: var(--ss-ink) !important;
}
html body.home #ss-front .ss-dp-card:nth-child(even) .ss-dp-btn {
    background: var(--ss-brand) !important;
    color: var(--ss-cream) !important;
}
html body.home #ss-front .ss-signin,
html body.home #ss-front .ss-signin-body,
html body.home #ss-front .ss-tm-card,
html body.home #ss-front .ss-faq-wrap,
html body.home #ss-front .ss-faq-item {
    background-color: var(--ss-surface) !important;
    border-color: color-mix(in srgb, var(--ss-brand) 18%, transparent) !important;
}
html body.home #ss-front .text-ink\/70,
html body.home #ss-front .text-ink\/75,
html body.home #ss-front .text-ink\/80 {
    color: color-mix(in srgb, var(--ss-ink) 78%, transparent) !important;
}
html body.home #ss-front .text-accent {
    color: var(--ss-brand) !important;
}
html body.home #ss-front .bg-muted,
html body.home #ss-front .bg-accent {
    background: var(--ss-brand-soft) !important;
}
html body.home #ss-front .ss-pcard-title,
html body.home #ss-front .ss-pcard-price-new,
html body.home #ss-front .ss-fcard-name,
html body.home #ss-front .ss-fcard-name a,
html body.home #ss-front .ss-fcard-price,
html body.home #ss-front .ss-fcard-price .woocommerce-Price-amount,
html body.home #ss-front .ss-fc-tile h3,
html body.home #ss-front .ss-catpill-label {
    color: var(--ss-ink) !important;
}
html body.home #ss-front .ss-pcard-badge,
html body.home #ss-front .ss-badge-new,
html body.home #ss-front .ss-badge-best,
html body.home #ss-front .ss-badge-bestseller,
html body.home #ss-front .ss-fcard-badge {
    background: var(--ss-brand) !important;
    color: var(--ss-cream) !important;
}
html body .ss-fcard .ss-fcard-name,
html body .ss-fcard .ss-fcard-name a,
html body .ss-fcard .ss-fcard-price,
html body .ss-fcard .ss-fcard-price .woocommerce-Price-amount,
html body .ss-fcard .ss-fcard-price ins,
html body .ss-fcard .ss-fcard-price ins .woocommerce-Price-amount,
html body .ss-pcard-title,
html body .ss-pcard-price-new {
    color: var(--ss-ink) !important;
}
html body .ss-fcard .ss-fcard-price ins,
html body .ss-fcard .ss-fcard-price ins .woocommerce-Price-amount,
html body .ss-pcard-price-new {
    color: var(--ss-brand) !important;
}
html body .ss-fcard .ss-fcard-badge,
html body .ss-pcard-badge,
html body .ss-badge-new,
html body .ss-badge-best,
html body .ss-badge-bestseller {
    background: var(--ss-brand) !important;
    color: var(--ss-cream) !important;
}
html body .ss-fcard-stars-icons,
html body .ss-pcard-stars,
html body .ss-review-stars,
html body .ss-tm-stars,
html body .ss-tm-rating,
html body .woocommerce .star-rating span,
html body .woocommerce .star-rating span::before,
html body .woocommerce p.stars a,
html body .woocommerce p.stars a::before {
    color: var(--ss-brand) !important;
}
html body .ss-fcard-stars-icons .ss-star.is-empty,
html body .ss-pcard-stars .ss-star--empty,
html body .woocommerce .star-rating,
html body .woocommerce p.stars a:hover ~ a,
html body .woocommerce p.stars.selected a.active ~ a {
    color: var(--ss-cream) !important;
}
html body input[type="checkbox"],
html body input[type="radio"] {
    accent-color: var(--ss-brand) !important;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE GUTTERS + STRAY ELEMENTS
   ══════════════════════════════════════════════════════════════════ */
/* Black scrolling announcement strip: removed everywhere. */
html body .ss-marquee { display: none !important; }

/* Shop page on phones: ONE 16px margin (from .ssc-header / .ssc-body / chips),
   every parent-theme wrapper contributes 0. Full-bleed guard is a second line
   of defence in case any wrapper still carries padding. */
@media (max-width: 768px) {
    html body.ss-shop-page { overflow-x: hidden; }
    html body.ss-shop-page #content,
    html body.ss-shop-page .site-content,
    html body.ss-shop-page #primary,
    html body.ss-shop-page .content-area,
    html body.ss-shop-page .site-main,
    html body.ss-shop-page main,
    html body.ss-shop-page article,
    html body.ss-shop-page .hentry,
    html body.ss-shop-page .entry-content,
    html body.ss-shop-page .col-full {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
    }
    html body.ss-shop-page .ssc-wrap {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/* Site canvas follows Customizer, while cards, header and footer keep their own surfaces. */
html body, html body #page, html body #content, html body .site-content,
html body .site-main, html body .content-area, html body #primary,
html body.home #ss-front, html body.page-template-page-shop-custom .ssc-wrap,
html body.woocommerce-account .lk-auth {
    background-color: var(--ss-site-background-color) !important;
}
html body .site-header, html body #masthead, html body .storefront-primary-navigation {
    background-color: var(--ss-surface) !important;
}

/* The account area uses the site's warm honey surface rather than the configurable white canvas. */
html body.woocommerce-account .lk-acc { background-color:var(--ss-cream) !important; }

/* Pagination: explicit descendant inheritance beats the shop-wide span text rule. */
html body .ssc-wrap .ssc-pagination .ssc-page-btn {
    background: var(--ss-surface) !important;
    color: var(--ss-brand-deep) !important;
    border-color: var(--ss-border-strong) !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
html body .ssc-wrap .ssc-pagination .ssc-page-btn:hover:not(:disabled):not(.is-active) {
    background: var(--ss-brand-soft) !important;
    border-color: var(--ss-brand) !important;
    color: var(--ss-brand-deep) !important;
}
html body .ssc-wrap .ssc-pagination .ssc-page-btn.is-active {
    background: var(--ss-brand) !important;
    border-color: var(--ss-brand) !important;
    color: var(--ss-white) !important;
}
html body .ssc-wrap .ssc-pagination .ssc-page-btn .ssc-page-label {
    color: inherit !important;
}
html body .ssc-wrap .ssc-pagination .ssc-page-btn:focus-visible {
    outline: 2px solid var(--ss-brand) !important;
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    html body .ssc-wrap .ssc-pagination .ssc-page-btn { transition: none !important; }
}

/* Cart Block / Shiprocket: the checkout anchor is a button, not a normal
   content link. Keep its native surface, icons, branding and click behavior. */
html body.woocommerce-cart .wc-block-cart__submit-button,
html body.woocommerce-cart .wc-block-cart__submit-button:hover,
html body.woocommerce-cart .wc-block-cart__submit-button:focus,
html body.woocommerce-cart .wc-block-cart__submit-button:active,
html body.woocommerce-cart .wc-block-cart__submit-button .btn-text,
html body.woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text {
    color: var(--ss-white) !important;
    -webkit-text-fill-color: var(--ss-white) !important;
}

/* Match WooCommerce default white CTA text on the action label only. */
html body.woocommerce-cart .ss-cart-cta-label {
    color: var(--ss-cream) !important;
    -webkit-text-fill-color: var(--ss-cream) !important;
    font: 600 15px/1.2 "Instrument Sans", system-ui, sans-serif !important;
    white-space: nowrap !important;
}