/*
 * mc-ui-improvements.css — mattresscenter.com UX overhaul
 * Rev: 2026-06-01-v3
 * Fixes: filter bar warm theme, card trust, price display, CTA, sort row, dedup price filter, category tile
 */

/* ── 1. FILTER BAR: align to warm theme (overrides cold-blue inline CSS) ── */
.mc-cat-filter-bar {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
}
.mc-cfb-label {
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
}
.mc-cfb-chip {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  padding: 4px 11px !important;
  border-radius: 20px !important;
  transition: all .15s ease !important;
}
.mc-cfb-chip:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: var(--gold-light) !important;
}
.mc-cfb-chip-selected {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.mc-cfb-chip-selected:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
}
.mc-cfb-chip-custom {
  border-style: dashed !important;
  border-color: var(--gold-border) !important;
  color: var(--gold-text) !important; /* WCAG-AA: --gold is 3.9:1 on white; --gold-text is 5.5:1 (2026-06-24) */
}
.mc-cfb-chip-custom:hover {
  background: var(--gold-light) !important;
  border-style: solid !important;
}

/* Price filter: warm gold instead of sky blue */
.mc-pf-fill {
  background: var(--gold) !important;
}
.mc-pf-range::-webkit-slider-thumb {
  border-color: var(--gold) !important;
}
.mc-pf-range::-moz-range-thumb {
  border-color: var(--gold) !important;
}
.mc-pf-range::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 4px rgba(157,124,60,.18) !important;
}
.mc-pf-num:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(157,124,60,.12) !important;
}
.mc-pf-num {
  font-family: var(--font-body) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.mc-pf-apply {
  background: var(--ink) !important;
  border-radius: 20px !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.04em !important;
  font-size: 14px !important;
  padding: 6px 18px !important;
}
.mc-pf-apply:hover {
  background: var(--gold) !important;
}
.mc-pf-cur { color: var(--muted) !important; }
.mc-cfb-clear { color: var(--muted) !important; }
.mc-cfb-clear:hover { color: var(--warn) !important; }

/* ── 2. PRODUCT IMAGE: soften anatomical diagrams, improve layout ── */
.product-card__image {
  /* IMG_FIT_2026_06_03: square product images (800x800) were letterboxed in a 16/10 box
     ("not full width"); 1/1 lets contain fill the card width edge-to-edge with no crop. */
  aspect-ratio: 1/1 !important;
  background: var(--surface-2) !important;
  overflow: hidden !important;
}
/* Gradient at bottom of image gives depth, softens clinical cut-section look */
.product-card__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(to bottom, transparent 0%, rgba(250,247,242,.35) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Hover: show "View details" overlay */
.product-card__image::before {
  content: 'View Details \2192';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28,23,20,.45);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 2;
}
.product-card:hover .product-card__image::before {
  opacity: 1;
}
/* HOVER_SWAP_2026_06_03 (§26): when product has a 2nd gallery image, hover swaps
   to it (marketplace pattern) instead of the "View Details" text overlay. */
.product-card__image.has-alt-image::before { display: none; }
.product-card__image-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 6px;
  background: var(--surface-2);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 3;
  pointer-events: none;
}
.product-card:hover .product-card__image.has-alt-image .product-card__image-alt { opacity: 1; }
.product-card__image img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 6px !important;
  transition: transform .4s ease !important;
  background: var(--surface-2) !important;
}
.product-card:hover .product-card__image img {
  transform: scale(1.04) !important;
}

/* ── 3. PRODUCT CARD: better structure + trust signals ── */
.product-card {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
  background: var(--surface) !important;
  display: flex !important;
  flex-direction: column !important;
}
.product-card:hover {
  box-shadow: 0 8px 32px rgba(28,23,20,.12) !important;
  transform: translateY(-4px) !important;
  border-color: var(--gold-border) !important;
}
.product-card__body {
  padding: 16px 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}
.product-card__name {
  font-family: var(--font-head) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
}
.product-card__name:hover {
  color: var(--gold) !important;
}
.product-card__desc {
  font-size: 14px !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
}

/* ── 4. PRICE: larger, more visual weight ── */
.product-price-block {
  padding: 10px 0 4px !important;
  border-top: 1px solid var(--border) !important;
  margin-top: auto !important;
}
.price-main {
  font-family: var(--font-head) !important;
  font-size: 1.55rem !important;
  color: var(--text) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}
.price-from {
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}
.price-original {
  font-size: 14px !important;
  color: var(--muted) !important;
  text-decoration: line-through !important;
}

/* ── 5. CTA BUTTON: urgent, premium ── */
.add-to-cart-btn,
.select-options-btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 12px 20px !important;
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
  border: none !important;
  margin-top: 4px !important;
}
.add-to-cart-btn:hover,
.select-options-btn:hover {
  background: var(--gold) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(157,124,60,.28) !important;
}
.wishlist-btn {
  background: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--muted) !important;
  padding: 9px 12px !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all .15s !important;
  flex-shrink: 0 !important;
}
.wishlist-btn:hover {
  border-color: var(--warn) !important;
  color: var(--warn) !important;
}
.wishlist-btn.is-saved {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
.wishlist-btn.is-saved:hover {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}
.card-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

/* ── card-view-link: demoted SECONDARY card CTA (task:mc-plp-dual-competing-ctas, 2026-07-09) ──
   mc-card-quickadd (mu-plugin, MC_CARD_QUICKADD_ENABLED=true, live) injects a full-width GOLD
   "Configure & add" PRIMARY button into .product-price-block. Without this rule the template's
   own "View WxH cm" anchor is ALSO a full-width filled black button (".add-to-cart-btn,
   .select-options-btn" block above) - two near-equal-weight buttons stacked on every card,
   proven live via Playwright bounding-rect (98x54 gold + 98x85 black). This demotes it to a
   plain inline text link - ONE clear primary (gold) per card. Compound selector (2 classes,
   0-2-0) + !important out-specifies the catch-all ".add-to-cart-btn, .select-options-btn"
   block above (1 class, also !important) - !important vs !important ties break on
   specificity, so this wins without touching the shared button styles other CTAs still use. */
.add-to-cart-btn.card-view-link,
.select-options-btn.card-view-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  min-height: 36px !important;
  padding: 8px 2px !important;
  background: transparent !important;
  color: var(--gold-text, #7a5c24) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  margin-top: 6px !important;
}
.add-to-cart-btn.card-view-link:hover,
.select-options-btn.card-view-link:hover {
  background: transparent !important;
  color: var(--gold-btn, #876829) !important;
  text-decoration: underline !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* ── 6. TRUST SIGNALS: on listing cards ── */
.mc-card-trust {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0 0;
  margin-top: 2px;
  border-top: 1px solid var(--border);
}
.mc-card-trust-pill .ok {
  color: #16a34a;
  font-weight: 700;
  font-size: 14px;
}

/* ── 8. FIRMNESS BAR: theme-aligned ── */
.firmness-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.firmness-bar__label {
  font-size: 14px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-family: var(--font-body) !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
}
.firmness-bar__track {
  flex: 1;
  height: 4px !important;
  background: var(--border) !important;
  border-radius: 2px !important;
}
.firmness-bar__fill {
  height: 100% !important;
  background: var(--gold) !important;
  border-radius: 2px !important;
  transition: width .3s ease !important;
}

/* ── 9. MATERIAL TAGS ── */
.material-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.material-tag {
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: 3px !important;
  padding: 2px 7px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ── 9b. FIT/BENEFIT = rank-1 persuasion, elevated above specs (CEO 2026-06-21: highlight by BUYER
   PRIORITY, not code logic). "Why this fits you" rendered at 0.82em UNDER a gold firmness bar — a
   spec out-shouting the buyer's decision driver. Lead with the benefit, give it the gold accent,
   and take the gold OFF the firmness SPEC bar (60-30-10: the 10% accent goes to the priority, not
   the spec). Honest: only the real fit reasons (mpro_fit_reasons_html) are shown, never invented. */
.mpro-fit-reasons {
  font-size: 0.92em !important;
  line-height: 1.5 !important;
  margin: 4px 0 6px !important;
  padding: 8px 11px !important;
  background: var(--gold-light) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 0 6px 6px 0 !important;
  list-style: none !important;
}
.mpro-fit-reasons .mpro-fit-head {
  font-size: 0.82em !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 0 3px !important;
}
.mpro-fit-reasons li:not(.mpro-fit-head) {
  font-size: 0.95em !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}
/* gold belongs to the benefit/priority now — neutralize it on the firmness SPEC bar */
.firmness-bar__fill { background: var(--muted) !important; }

/* ── 10. GRID LAYOUT: ensure 3 cols desktop ── */
ul.products, .mc-products-grid ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
}
ul.products li.product { padding: 0 !important; background: none !important; }
@media (max-width: 900px) {
  ul.products, .mc-products-grid ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 520px) {
  ul.products, .mc-products-grid ul.products {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .product-card__body { padding: 10px 12px 14px !important; gap: 6px !important; }
  .product-card__desc { display: none !important; }
  .mc-listing-trust-bar { gap: 14px; justify-content: flex-start; }
}

/* ── 11. HEADER PHONE: more visible ── */
.header-phone {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text) !important;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: all .15s;
  white-space: nowrap;   /* phone number stays on ONE row (CEO 2026-06-03) */
  flex-shrink: 0;        /* box never compresses inside .header-actions */
}
.header-phone__num { white-space: nowrap; }
/* Tight viewports: drop the phone number text to a tap-to-call icon so the
   one-row number never overflows the header (CEO: "if too much space remove icon"). */
@media (max-width: 600px) {
  .header-phone__num { display: none; }
}
.header-phone:hover {
  border-color: var(--gold);
  color: var(--gold) !important;
}
.header-phone__icon { font-size: 14px; }

/* ── 12. TRUST STRIP: ensure it renders ── */
.trust-strip {
  display: flex !important;
  background: var(--ink) !important;
  color: rgba(255,255,255,.78) !important;
  text-align: center !important;
  font-size: 14px !important;
  padding: 9px 24px !important;
  letter-spacing: 0.04em !important;
  justify-content: center !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
}

/* ── 13. DEDUP PRICE FILTER: hide price chip from mc-filter-bar (keep OLD bar dual-slider) ── */
/* mc-cat-filter-bar price slider uses mc_min_price/mc_max_price = WAPF-compatible */
/* mc-filter-bar price chip uses min_price/max_price = standard WC, broken for WAPF _price=0 */
.mc-filter-chip-wrap[data-filter="price"] {
  display: none !important;
}

/* ── 14. SORT ROW: layout fix (zero CSS before this) ── */
.mc-sort-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 16px !important;
  gap: 16px !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 20px !important;
}
.mc-result-count { flex: 1 !important; }
.mc-result-count p {
  margin: 0 !important;
  font-size: 15px !important;
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
}
.mc-sort-wrap { flex-shrink: 0 !important; }
.woocommerce-ordering { margin: 0 !important; }
.woocommerce-ordering select,
.mc-sort-wrap select {
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 7px 34px 7px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--text) !important;
  background-color: var(--surface) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239d7c3c' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  min-width: 200px !important;
  transition: border-color .15s !important;
}
.woocommerce-ordering select:hover,
.mc-sort-wrap select:hover {
  border-color: var(--gold) !important;
}

/* ── 14b. SORT INLINE NEXT TO PRICE + CENTER FILTER ROW (CEO 2026-06-03) ── */
.mc-sort-inline { flex-shrink: 0 !important; }
.mc-sort-inline select { min-width: 150px !important; }
@media (min-width: 901px) {
  /* center the filter chip group horizontally, matching the size-chip row above it */
  .mc-filter-inner { justify-content: center !important; }
  /* neutralise the right-push spacer so the group centres instead of left-aligning */
  .mc-filter-spacer { flex: 0 0 auto !important; min-width: 0 !important; }
}

/* ── 15. HIDE CATEGORY TILE: prevent "Be kategorijos" from occupying first grid slot ── */
ul.products > li.product-category,
.woocommerce ul.products > li.product-category,
.mc-products-grid ul.products > li.product-category {
  display: none !important;
  visibility: hidden !important;
}

/* ── 16. LISTING H1: visible + compact (was display:none) ────────────────────
   REVERSED 2026-07-09 (problem:mc-listing-h1-hidden). The old rule hid the H1
   on EVERY listing (/shop/, /product-category/*, /mattress-type/*) on the
   theory that "the nav menu shows the active category already". Measured live
   with CDP at 360/390/768: the H1 was display:none on all of them, so the page
   had no visible heading, screen readers skipped it (display:none is removed
   from the a11y tree), and search engines discount hidden headings. The nav is
   a link row, not a heading - it cannot replace an H1.
   Exactly one H1 exists per listing (archive-product.php emits it: facet,
   category, or shop title), so making it visible cannot duplicate.
   Sizing lives HERE (not mc-listing-h1.php, whose CSS only prints on
   is_product_category()) so /shop/ and /mattress-type/* get it too - otherwise
   they fall back to the 32px UA default. */
   !important is required, not sloppy: a bare element rule
   `h1{font-size:2rem!important}` exists at (max-width:767px), and an
   !important element rule beats a non-!important class rule. Without it the
   listing H1 renders at the 32px hero size on phones (measured via CDP). */
.mc-cat-h1,
.mc-cat-h1-tpl {
  display: block;
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  color: var(--text, #1c1714);
  margin: 6px 0 8px !important;
}
@media (max-width: 768px) {
  .mc-cat-h1,
  .mc-cat-h1-tpl {
    font-size: 17px !important;
    margin: 4px 0 6px !important;
  }
}

/* ── 16b. LISTING HEADER GUTTER (problem:mc-listing-header-no-gutter) ─────────
   `main.site-main` carries ZERO horizontal padding at every width (measured
   390/768/1280), so the H1 and the "Popular types" facet nav sit flush against
   the screen edge while everything below them (.mc-cat-filter-bar, the product
   cards) is inset by 16px. Match that same 16px so the listing header lines up
   with the content it heads, on phone AND desktop. */
.mc-cat-h1,
.mc-cat-h1-tpl,
nav.mc-facet-links {
  padding-left: 16px;
  padding-right: 16px;
}

/* ── 17. REMOVE REDUNDANT CATEGORY TABS NAV: nav menu already shows active category ── */
nav.mc-cat-nav {
  display: none !important;
}

/* ── 18. REMOVE DUPLICATE INLINE PRICE SLIDER: Price popup button in filter row covers this ── */
.mc-cfb-row-price {
  display: none !important;
}

/* ── 19. RESTORE PRICE POPUP BUTTON: override §13 hide - CEO wants Price in filter row ── */
/* §13 hid it because popup used min_price/max_price (WC-only). Now fixed to mc_min_price. */
.mc-filter-chip-wrap[data-filter=price] {
  display: flex !important;
}

/* ── 22. REMOVE FILTERWOO DUPLICATE PRICE CHIP from SIZE bar (CEO 2026-06-03) ── */
/* FilterForWoo plugin JS injects .mc-price-chip into .mc-cat-filter-bar independently.
   The attribute filter row already has the working [data-filter=price] chip (§19).
   Hiding the duplicate keeps ONE price control in the right place. */
.mc-cat-filter-bar .mc-price-chip {
  display: none !important;
}

/* ── 23. SIZE (W x L) custom-size filter — RESTORED (CEO 2026-06-03) ──
   Previously hidden; CEO wants custom width/length filtering back on the listing.
   Render it inline as a chip-styled control in the filter row. */
.mc-filter-bar .mc-size-always,
.mc-filter-inner .mc-size-always {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  position: relative;
}
.mc-size-always .size-ac-label-text {
  font-size: 15px;
  color: var(--text, #1c1714);
  font-weight: 600;
  white-space: nowrap;
}
.mc-size-always .size-ac-input {
  width: 130px;
  padding: 7px 10px;
  border: 1px solid var(--border, #e7e0d6) !important;
  border-radius: 999px !important;
  font-size: 15px;
  background: var(--surface) !important;
  color: var(--text, #1c1714) !important;
}
.mc-size-always .size-ac-input::placeholder { color: var(--muted, #6b6157); }
.mc-size-always .size-ac-input:focus {
  outline: none;
  border-color: var(--gold, #9d7c3c) !important;
}
/* the leftover legacy submit button beside the size input is redundant (autocomplete applies on select).
   NOTE: do NOT hide .size-ac-apply here - that is the in-dropdown custom-LENGTH Apply button the user
   must be able to click with the mouse (was hidden -> only Enter worked, CEO 2026-06-04). */
.mc-size-always button[type="submit"] { display: none !important; }

/* §20 CARD_V2_RATING_2026_06_01 — trust chips on listing cards */
.mc-card-trust{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:6px;}
.mc-trust-chip{font-size: 14px;color:#2d6a4f;font-weight:600;white-space:nowrap;}
.mc-trust-chip::before{margin-right:1px;}
.mc-card-trust .mc-stars{display:flex;align-items:center;}
.mc-card-trust .mc-stars .star-rating{font-size: 15px;}

/* Warranty chip */
.material-tag--warranty {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
  font-weight: 600;
}
.mc-warranty-chips {
  margin-top: 4px;
}

/* §21 SIZE-PILL_NOWRAP_2026_06_01 — prevent "160 x / 200 cm" line break on mobile */
.product-card__size-pill {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
}

/* §22 LOGO-SOLID_2026_06_01 — remove underline + enforce bold weight on text logo */
a.site-logo {
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* §23 PRODUCT-CAT-GHOST_2026_06_01 — WC injects a subcategory <li> as first grid child; suppress */
ul.products li.product-category {
  display: none !important;
}

/* §24 NAV-DROPDOWN_2026_06_01 — hover dropdown submenus for desktop nav */
.main-nav > li { position: relative; }
.main-nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--bg, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  padding: 8px 0;
  list-style: none;
  z-index: 999;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.main-nav > li:hover > .main-nav__sub { display: flex; }
.main-nav__sub li a {
  display: block;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted) !important;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.main-nav__sub li a:hover {
  color: var(--text) !important;
  background: rgba(0,0,0,.04);
}
.main-nav a.main-nav__cta {
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* §24 BRAND LOGO SIZE (CEO 2026-06-03) — constrain listing card brand logo to small badge.
   Default WP thumbnail (150x150) renders full-size and dwarfs the product image on mobile.
   Global eshop standard (Zalando, Coupang, Wildberries): brand as tiny text or <=20px logo. */
.brand-logo-img {
  max-height: 20px !important;
  max-width: 80px !important;
  width: auto !important;
  display: inline !important;
  vertical-align: middle !important;
  object-fit: contain !important;
}
.product-card__brand {
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}

/* §25 PRODUCT GALLERY PhotoSwipe (2026-06-03) */
.pswp-main-item { display: block; cursor: zoom-in; }
.single-product__main-img { width: 100%; border-radius: 8px; transition: opacity .2s; }
.pswp-main-item:hover .single-product__main-img { opacity: .92; }
.product-thumb-link {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .15s;
  cursor: pointer;
}
.product-thumb-link:hover,
.product-thumb-link.is-active { border-color: var(--gold); }
.product-thumb { width: 64px; height: 64px; object-fit: cover; display: block; }

/* §27 MOBILE_SUBMENU_2026_06_03: expandable subcategories in the mobile drawer */
.mobile-nav__group { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__group .mobile-nav__parent { flex: 1; }
.mobile-nav__expand {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted, #6b6157);
  transition: transform .25s ease, color .15s ease;
}
.mobile-nav__expand:hover { color: var(--gold, #9d7c3c); }
.mobile-nav__expand.is-open { transform: rotate(180deg); color: var(--gold, #9d7c3c); }
.mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 6px 16px;
  border-left: 2px solid var(--border, #e7e0d6);
  margin-left: 8px;
}
.mobile-nav__sub[hidden] { display: none; }
.mobile-nav__sub li { margin: 0; }
.mobile-nav__sub a {
  display: block;
  padding: 9px 8px;
  font-size: 14px;
  color: var(--muted, #6b6157);
  text-decoration: none;
  transition: color .15s ease;
}
.mobile-nav__sub a:hover { color: var(--gold, #9d7c3c); }

/* §28 BUTTON_HOVER_2026_06_03: consistent hover feedback on interactive controls */
.add-to-cart-btn,
.select-options-btn,
.price-quote-cta,
.wishlist-btn,
.main-nav__cta,
.mobile-nav__cta,
#search-toggle,
.cart-icon,
.header-phone {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.add-to-cart-btn:hover,
.select-options-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(28,23,20,.18); }
.main-nav__cta:hover,
.mobile-nav__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.price-quote-cta:hover { color: var(--gold, #9d7c3c); }
.wishlist-btn:hover { color: #e2766b; transform: scale(1.12); }
#search-toggle:hover,
.cart-icon:hover,
.header-phone:hover { color: var(--gold, #9d7c3c); transform: translateY(-1px); }
.cart-icon:hover { opacity: 1; }

/* §29 ACTIVE_CAT_2026_06_03: current category nav item highlighted in gold */
.main-nav__item--active > a {
  background: var(--gold, #9d7c3c);
  color: #fff !important;
  border-radius: 7px;
  padding: 7px 12px;
  font-weight: 700;
}
.main-nav__item--active > a:hover { filter: brightness(1.08); color: #fff !important; }

/* §30 BRAND_INLINE_2026_06_03: hide the orphan JS-injected Brand filter (.mc-brand-chip /
   .mc-brand-pick <details> that rendered on its own 2nd row). The inline gold Brand mc-chip
   between Thickness and Price replaces it (with a working pre_get_posts brand filter). */
.mc-brand-chip,
.mc-brand-pick { display: none !important; }

/* §31 FACET_COUNT_2026_06_03: an option that would yield 0 results given the current
   selection is dimmed + non-clickable (never a dead-end). Counts are contextual. */
.mc-filter-opt.mc-opt--disabled {
  opacity: .38;
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: line-through;
}
.mc-filter-opt.mc-opt--disabled .mc-opt-count { color: var(--muted, #6b6157); }

/* §32 SIZE_APPLY_HIDE_2026_06_04: the size autocomplete auto-navigates the moment a
   suggestion is picked, so the standalone persistent "Apply" button beside the input is
   redundant (and was rendering the Lithuanian "Pritaikyti" on this English site). Hide it.
   The in-dropdown custom-length Apply (.size-ac-apply) stays - that one submits the length. */
.size-ac-apply-main { display: none !important; }

/* §33 CHIP_PANEL_INLINE_OVERRIDE_2026_06_04 (CEO: "menu buttons don't do their job") ──
   ROOT CAUSE: the filter-mpro plugin JS sets inline style="display:none" on every
   .mc-chip-panel. Inline styles beat non-!important stylesheet rules, so the theme's
   class-based open (.mc-chip-wrap--open .mc-chip-panel{display:block}) could never win -
   the dropdowns toggled a class but stayed invisible. !important is the ONLY thing that
   overrides an inline style. This makes EVERY chip dropdown (Core/Top Layer/Cover/
   Warranty/Thickness/Brand/Price) actually open on click. Proven by real mouse test. */
.mc-filter-chip-wrap.mc-chip-wrap--open .mc-chip-panel { display: block !important; }
.mc-filter-chip-wrap.mc-chip-wrap--open .mc-chip-panel--grid { display: grid !important; }
/* closed panels stay hidden (theme opacity transition still applies for the fade) */
.mc-filter-chip-wrap:not(.mc-chip-wrap--open) .mc-chip-panel { display: none !important; }

/* In-dropdown custom-LENGTH Apply button: make it a real, visible, clickable button so the
   custom size can be applied with the MOUSE (was display:none -> only Enter worked). */
.size-ac-dropdown .size-ac-apply {
  display: block !important;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--gold, #9d7c3c);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.size-ac-dropdown .size-ac-apply:hover { background: #846628; }
.size-ac-dropdown .size-ac-length-input {
  width: calc(100% - 16px);
  margin: 8px 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--border, #e7e0d6);
  border-radius: 8px;
  font-size: 14px;
}
.size-ac-dropdown .size-ac-custom-hint { padding: 8px 10px 0; font-size: 14px; color: var(--muted, #6b6157); }

/* §34 MOBILE_FILTER_DRAWER_2026_06_04 (CEO mobile-first - CORRECTED):
   The previous §34 tried to cram 7 desktop chips into a 375px row AND hid the
   mobile Filter button (.mc-mobile-filter-btn). That was wrong twice over:
   (1) it never worked - the chips stay hidden because their `.container` wrapper
       is display:none on mobile (intended theme layout), which §34 did not override;
   (2) it broke the ONE working mobile path by hiding the drawer-open button.
   The theme already ships the correct mobile-first pattern: hide desktop chips,
   show a "Filters" button (#mc-filter-open) that opens #mc-filter-drawer - a real
   bottom-sheet rendering the same live category data as <a href> filter links
   (anchor navigation = works by tap, no JS dependency). Fix = stop fighting it:
   remove the harmful overrides so style.css:1824 (.mc-mobile-filter-btn{inline-flex})
   shows the button on mobile again. Desktop chips stay hidden on mobile (intended). */
@media (max-width: 767px) {
  /* Comfortable tap target for the drawer-open button (>=44px height, WCAG AA). */
  .mc-mobile-filter-btn { min-height: 44px; padding: 10px 18px; font-weight: 600; }
  /* Drawer filter options: full-width, comfortably tappable rows. */
  .mc-filter-drawer .mc-drawer-opt { min-height: 44px; display: flex; align-items: center; }
}

/* §35 MOBILE_HEADER_FIT_2026_06_04 (CEO ultracode UI/UX audit, live-measured):
   At 375px the header actions row (search + phone NUMBER text "+370 665 55500" +
   cart + burger, gap 20px) overflowed the viewport ~37-52px and pushed the
   hamburger menu button partially OFF-SCREEN (nav-burger right edge ~412 > 375),
   forcing a horizontal page scroll on home, category and product pages.
   Fix (live-measured: scrollW 360 == clientW 360, burger right 348, over=false):
   tighten action gaps, drop the long phone-NUMBER text first (the click-to-call icon
   stays = still one tap to call), and on the smallest phones drop the whole header
   phone block so the hamburger never clips (tap-to-call still in the menu + footer).
   The homepage AEO comparison table scrolls inside itself instead of widening the page.
   A body overflow-x: clip backstop guarantees no element can ever cause a sideways
   page scroll (clip keeps vertical sticky headers working, unlike overflow: hidden).
   No functionality removed. Verified at 375px + 1280px. */
/* !important throughout: the live theme sets these with higher specificity
   (.header-phone{display:flex}), so plain rules lose the cascade — verified live. */
body { overflow-x: clip !important; }
@media (max-width: 768px) {
  .header-actions { gap: 12px !important; }
}
@media (max-width: 520px) {
  .header-phone__num { display: none !important; }
  .header-actions { gap: 10px !important; }
  .header-inner { padding: 12px 12px !important; }
  /* Wide content tables scroll within themselves, never overflow the page. */
  .aeo-compare__table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100% !important; }
}
@media (max-width: 420px) {
  /* Smallest phones: drop the header phone block so the hamburger is always fully
     on-screen and tappable. Contact stays reachable via the menu, footer and the
     top trust strip. Proven to bring scrollWidth exactly to clientWidth (over=false). */
  .header-phone { display: none !important; }
}

/* §36 FILTER_BAR_CONTAIN_2026_06_04 (CEO ultracode UI/UX audit):
   Keep the category size-chip row and filter bar inside the viewport on mobile so the
   page never scrolls sideways. Chips wrap to new lines instead of forcing page width. */
.mc-cat-filter-bar { max-width: 100% !important; box-sizing: border-box !important; }
@media (max-width: 600px) {
  .mc-cfb-chips { flex-wrap: wrap !important; min-width: 0 !important; }
  .mc-cfb-row { min-width: 0 !important; }
}

/* §37 TAP_TARGETS_2026_06_04 (CEO ultracode UI/UX audit, WCAG 2.5.8):
   Comfortable 44px tap targets for theme-owned nav/header/modal controls. Header icon
   controls get tap HEIGHT only (vertical — never widens the row, so §35's no-overflow
   fix stays intact). Drawer/modal close+expand controls sit outside the constrained
   header row, so they take the full 44x44 safely. */
@media (max-width: 768px) {
  .header-actions > a,
  .header-actions > button,
  .nav-burger {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-nav__close,
  .mobile-nav__expand,
  .mc-cs-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* §38 CHECKOUT_TAP_TARGETS_2026-06-13 (live-shop audit, WCAG 2.5.8 / mobile CRO):
   The checkout form inputs/selects rendered at 31px tall on phones (<480px) - below the
   44px comfortable tap minimum, hurting completion on the revenue page. Scope: checkout
   page ONLY, <=480px, the standard WooCommerce billing/shipping text-like fields. Additive,
   vertical-only (does not widen rows, so the no-horizontal-overflow fixes stay intact). */
@media (max-width: 480px) {
  .woocommerce-checkout form.checkout .form-row input.input-text,
  .woocommerce-checkout form.checkout .form-row textarea,
  .woocommerce-checkout form.checkout .form-row select,
  .woocommerce-checkout #customer_details input.input-text,
  .woocommerce-checkout #customer_details textarea,
  .woocommerce-checkout #customer_details select {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* >=16px also prevents iOS zoom-on-focus */
  }
  /* select2 (country/state) single box matches the 44px field height */
  .woocommerce-checkout .select2-container .select2-selection--single {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
  }
}
/* Companion to the body overflow-x:clip backstop above (~line 850): residual horizontal
   overflow lives at the document (html) level + the position:fixed .mobile-nav off-canvas
   drawer (right:-100%), which body-level clip cannot contain. Root-element overflow-x:clip
   propagates to the viewport and clips the off-screen fixed drawer too. clip (never hidden)
   keeps the sticky header working. Backlog #21 follow-up, verified 375px overflow 0. */
html { overflow-x: clip !important; }

/* -- 12. TAP TARGETS: 44px min on the size filter chips (MC-004 2026-06-21, WCAG-AAA, mobile thumbs).
   The .mc-cfb-chip size chips were 26px (meets AA 24px, below AAA 44px). min-height + inline-flex
   centering gives a 44px tap target without a jarring pill restyle. Reversible (one block). -- */
.mc-cfb-chip { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* -- 13. BUYER PRIORITY (CEO 2026-06-22): card emphasis by purchase-decision rank, not code logic.
   rank-1 Recommended badge in the reserved gold accent (curated featured products only) + specs
   (firmness / materials) DEMOTED to rank 6 below the price + CTA, so the eye lands on fit + action,
   not raw data. Makes mattresscenter cards superior. Reversible (one block, mattresscenter-only). -- */
.product-card__body .mc-reco-badge { display: inline-block; background: var(--gold, #9d7c3c); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .03em; line-height: 1; padding: 4px 10px; border-radius: 999px; margin: 0 0 8px; text-transform: uppercase; }
.product-card__body .mc-card-specs { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border, #e4ddd3); }
.product-card__body .mc-card-specs .firmness-bar { margin: 0 0 6px; }
.product-card__body .mc-card-specs .material-tags { margin: 0; }

/* -- 14. MOBILE FLOATING-STACK COLLAPSE (problem:mobile-overlap, 2026-07-06).
   At 375px the right-edge bubble column (collapsed quiz moon bubble + WhatsApp + cart =
   3 x 44px + the kill-x, ~160px tall) sat ON TOP of the /sleep-quiz/ answer buttons and
   hovered over the PDP H1 zone (audit screenshots). Mobile-first rules, <=768px:
   (a) the moon quiz-launcher is hidden - redundant on mobile (the top trust-strip AND the
       nav CTA carry the quiz link on every page); the stack collapses to cart + WhatsApp,
       ONE aligned 44px right column (~96px). Thumb zone above stays clear.
   (b) page-top clean zone: main.js sets body.mc-at-top while scrollY <= 300, and the two
       bubbles fade out - so the H1 / hero is never overlapped at page load. FAIL-OPEN:
       without JS the class is never added and the bubbles simply stay visible.
   (c) sleep-quiz page: ZERO floating furniture over the quiz flow (attention rule -
       nothing may cover an answer button). Two selector paths because the page's stored
       template meta (page-quiz.php) is missing on live: the stale body class
       page-template-page-quiz + a :has() fallback on the template's own main.page-sleep-quiz.
   Reversible (one block). Desktop (>768px) unchanged. */
@media (max-width: 768px) {
  .mc-quiz-launcher { display: none !important; }
  .whatsapp-float { right: 14px; bottom: 66px; }
  .cc-cart-trigger, .whatsapp-float, .mc-chat-launcher { transition: opacity .25s ease, transform .25s ease; }
  body.mc-at-top .cc-cart-trigger,
  body.mc-at-top .whatsapp-float,
  body.mc-at-top .mc-chat-launcher {
    opacity: 0; pointer-events: none; transform: translateY(8px);
  }
  body.page-template-page-quiz .cc-cart-trigger,
  body.page-template-page-quiz .whatsapp-float,
  body.page-template-page-quiz .mc-chat-launcher,
  body.page-template-page-sleep-quiz .cc-cart-trigger,
  body.page-template-page-sleep-quiz .whatsapp-float,
  body.page-template-page-sleep-quiz .mc-chat-launcher { display: none !important; }
}
@media (max-width: 768px) {
  body:has(main.page-sleep-quiz) .cc-cart-trigger,
  body:has(main.page-sleep-quiz) .whatsapp-float,
  body:has(main.page-sleep-quiz) .mc-chat-launcher { display: none !important; }
}
/* Quiz page, ALL widths (problem:mobile-overlap follow-up): the scroll-revealed
   .sticky-cta-bar ("Live price on every mattress" -> /shop/) slid up OVER the quiz
   answer buttons (live probe: 15040px2 overlap with a .quiz-option at 375px). The
   quiz IS the conversion flow - no bar may cover or compete with it. Same dual
   selector paths as section 14 (stale template body class + :has fallback). */
body.page-template-page-quiz .sticky-cta-bar,
body.page-template-page-sleep-quiz .sticky-cta-bar { display: none !important; }
body:has(main.page-sleep-quiz) .sticky-cta-bar { display: none !important; }

/* -- 15. SLEEP ADVISOR ON-PAGE SHORTLIST (addon:sleep-advisor + problem:quiz-email-gate, 2026-07-06).
   The quiz result step now renders a LIVE best-fit shortlist on the page (sleep-advisor.js into
   #mc-adv-result) instead of the old email-only dead-end. Mobile-first inside the 640px quiz column:
   1 card per row at phone width, 2 from 560px. Brand tokens only; CTA uses --gold-btn (#876829,
   5.6:1 under white - the WCAG-safe gold from :root, NEVER raw --gold #9d7c3c for button bg).
   Cards are left-aligned inside the centered quiz section. Reversible (one block). -- */
.mc-adv { text-align: left; }
.mc-adv__headline { font-family: var(--font-head, Georgia, serif); font-size: clamp(22px, 4.5vw, 30px); color: var(--text, #1c1714); margin: 0 0 8px; text-align: center; }
.mc-adv__note { font-size: 14px; color: var(--muted, #6b5e52); margin: 0 0 24px; text-align: center; }
.mc-adv__cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 8px; }
@media (min-width: 560px) { .mc-adv__cards { grid-template-columns: 1fr 1fr; } }
.mc-adv__card { background: var(--surface, #fff); border: 1px solid var(--border, #e4ddd3); border-radius: var(--radius, 8px); box-shadow: var(--shadow-sm, 0 1px 6px rgba(28,23,20,0.06)); padding: 18px; display: flex; flex-direction: column; align-items: flex-start; }
.mc-adv__badge { display: inline-block; background: var(--gold-light, #f5ede0); color: var(--gold-text, #7a5c24); border: 1px solid var(--gold-border, #d4b88a); font-size: 14px; font-weight: 700; letter-spacing: .03em; line-height: 1; padding: 4px 10px; border-radius: 999px; margin: 0 0 10px; text-transform: uppercase; }
.mc-adv__name { font-family: var(--font-head, Georgia, serif); font-size: 19px; color: var(--text, #1c1714); margin: 0 0 4px; }
.mc-adv__price { font-size: 15px; font-weight: 600; color: var(--text, #1c1714); margin: 0 0 10px; }
.mc-adv__reasons { list-style: none; margin: 0 0 14px; padding: 0; }
.mc-adv__reasons li { font-size: 15px; color: var(--muted, #6b5e52); padding-left: 18px; position: relative; margin-bottom: 4px; }
.mc-adv__reasons li::before { content: '✓'; position: absolute; left: 0; color: var(--gold-text, #7a5c24); font-weight: 700; }
.mc-adv__cta { display: inline-block; margin-top: auto; background: var(--gold-btn, #876829); color: #fff; font-size: 15px; font-weight: 600; padding: 10px 18px; border-radius: var(--radius, 8px); text-decoration: none; }
.mc-adv__cta:hover { background: var(--accent, #1c1714); color: #fff; }
.mc-adv__empty { font-size: 14px; color: var(--muted, #6b5e52); text-align: center; }

/* Quiz page, ALL widths (addon:sleep-advisor pass, 2026-07-06): the conversion-flow
   zero-floating rule is width-independent - at 1920px the cart + WhatsApp bubbles were
   still visible on /sleep-quiz/ (section 14's kill lives only inside the <=768px media
   query; live headless probe confirmed both visible at 1920x1080). Same dual selector
   paths as section 14 (stale template body class + :has fallback). Reversible (one block). */
body.page-template-page-quiz .cc-cart-trigger,
body.page-template-page-quiz .whatsapp-float,
body.page-template-page-quiz .mc-quiz-launcher,
body.page-template-page-quiz .mc-chat-launcher,
body.page-template-page-sleep-quiz .cc-cart-trigger,
body.page-template-page-sleep-quiz .whatsapp-float,
body.page-template-page-sleep-quiz .mc-quiz-launcher,
body.page-template-page-sleep-quiz .mc-chat-launcher { display: none !important; }
body:has(main.page-sleep-quiz) .cc-cart-trigger,
body:has(main.page-sleep-quiz) .whatsapp-float,
body:has(main.page-sleep-quiz) .mc-quiz-launcher,
body:has(main.page-sleep-quiz) .mc-chat-launcher { display: none !important; }

/* -- 16. FIXED-OVERLAP RESIDUALS (problem:mc-sticky-cta-cart-overlap, 2026-07-06).
   Live fixed-overlap-probe (375x812, home+shop+quiz) found 9 residual overlaps after the
   d039d6f9e stack collapse. Three classes, three rules; JS twin in assets/js/main.js
   (initStickyCTA setBarVisible + initFloatReveal). Fail-open: without JS no class is ever
   added - header + bubbles simply stay visible as before. Reversible (one block). */
/* (a) One owner of the bottom strip, SITE-WIDE: while the scroll-revealed sticky-cta-bar is
   visible, main.js toggles body.mc-atc-on (the exact mechanism mc-sticky-atc.php uses on PDPs -
   its copy of this rule prints on is_product() only). Bubbles hide while the bar shows. */
body.mc-atc-on .mc-quiz-launcher,
body.mc-atc-on .scroll-top-btn,
body.mc-atc-on .cc-cart-trigger,
body.mc-atc-on .whatsapp-float,
body.mc-atc-on .mc-chat-launcher { display: none !important; }
/* (b) Footer clean zone (mirror of section 14's page-top clean zone): bubbles fade while the
   footer is on screen - they covered the Complianz manage-consent link + the credit link. */
.cc-cart-trigger, .whatsapp-float, .mc-chat-launcher { transition: opacity .25s ease, transform .25s ease; }
body.mc-at-bottom .cc-cart-trigger,
body.mc-at-bottom .whatsapp-float,
body.mc-at-bottom .mc-chat-launcher { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* -- 17. CART-BUBBLE COUNT GATE (problem:mc-desktop-floats-three). The floating .cc-cart-trigger
   (3rd-party mini-cart widget, no local source - server-injected markup, badge
   #cc-cart-trigger-badge) showing "0" is noise, not a helper: hidden site-wide whenever the
   cart is empty, shown only when it carries a real item count. #mc-float-declutter above
   already removes it unconditionally on home/cart/checkout/account (union of both rules - the
   count gate is what matters on PDP/PLP/blog, where no page-context rule already hides it). JS
   twin: assets/js/main.js initCartBubbleGate() watches the badge text and toggles
   body.mc-cart-empty. Fail-open: without JS the class is never added and the bubble stays
   visible (same pattern as section 14's initFloatReveal). Reversible (one block). */
body.mc-cart-empty .cc-cart-trigger { display: none !important; }
/* (c) Mobile smart-sticky header: hide on scroll DOWN, reveal on ANY scroll up / near top -
   the always-sticky header covered content links, a category card and a quiz answer button at
   scrolled positions (5 probe findings). Keeps web-project-standards #2 sticky convenience
   (one upward flick reveals it) and frees ~60px of the 375px viewport. Desktop unchanged. */
@media (max-width: 768px) {
  .site-header { transition: transform .22s ease; }
  body.mc-header-hide .site-header { transform: translateY(-105%); }
}