/* ============================================================================
   minicom-theme.css — "Minicom" commerce re-skin (FINAL layer)
   ----------------------------------------------------------------------------
   Goal: re-dress Horns & Heritage in the clean, modern furniture-store template
   from the reference screenshot — white canvas, light-grey section bands, a
   black header/footer, square minimalist product cards, a warm-yellow primary
   CTA, near-black secondary buttons, and uppercase Poppins headings.

   SAFETY / RECOVERABILITY
   - EVERY rule is gated under  html[data-mc="on"]  so the whole layer toggles
     off by removing the data-mc flag (or this <link>); the Nature-Leaf look
     returns untouched.
   - Loaded LAST (after nl-theme.css) so it wins on source order; selectors
     match the gated specificity of the layers they refine, plus !important
     only where a prior layer used !important.
   - NO content, prices, products, units, cart, checkout, login, membership,
     tours or WhatsApp markup is touched — visual wrapper only.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · PALETTE — re-token to white / grey / black / yellow. Cascades into every
   existing var() usage so the whole site re-colours from these lines.
   --------------------------------------------------------------------------- */
html[data-mc="on"] {
  /* Surfaces */
  --bg-main:       #FFFFFF;   /* clean white page                          */
  --bg-secondary:  #F5F5F3;   /* light neutral section band                */
  --bg-alt:        #F0F0EC;   /* slightly warmer grey band                 */
  --bg-card:       #FFFFFF;   /* white cards                               */
  --bg-footer:     #181818;   /* near-black header strip + footer          */

  /* Brand → near-black is the structural colour (headings, titles, accents) */
  --primary-green:   #1C1C1C;
  --secondary-green: #333333;
  --accent-green:    #1C1C1C;

  /* Accents */
  --terracotta:  #D9472B;   /* warm red — used for prices & links          */
  --rust:        #B23A22;
  --gold:        #FFB400;   /* warm yellow — primary CTA + rating stars     */
  --gold-dark:   #E69E00;
  --cream:       #1C1C1C;   /* "on-button" text now reads dark on yellow    */

  /* Primary commerce CTA (add-to-cart / checkout) → warm yellow            */
  --gold-cta:      #FFB400;
  --gold-cta-dark: #E69E00;

  /* Text */
  --text-primary:   #1A1A1A;
  --text-secondary: #5C5C58;
  --text-muted:     #9A9A94;
  --text-on-dark:   #EDEDEA;

  /* UI */
  --border-soft:       #EAEAE6;
  --shadow-card:       0 2px 10px rgba(20, 20, 20, 0.05);
  --shadow-card-hover: 0 12px 30px rgba(20, 20, 20, 0.10);
  --shadow-dropdown:   0 10px 28px rgba(20, 20, 20, 0.12);

  /* Type — Poppins everywhere (body + headings). No serif in the template.  */
  --sans:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-mc="on"] body { background: var(--bg-main); font-family: var(--sans); color: var(--text-primary); }

/* Decorative sepia photo backdrop muddies the clean white canvas — hide it. */
html[data-mc="on"] .hh-photo-backdrop { display: none !important; }

/* Headings: Poppins, tight, near-black (no italic serif flourishes) */
html[data-mc="on"] h1,
html[data-mc="on"] h2,
html[data-mc="on"] h3,
html[data-mc="on"] h4 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
html[data-mc="on"] em { font-style: normal; }

/* ---------------------------------------------------------------------------
   2 · HEADER — slim black top bar + clean white nav
   --------------------------------------------------------------------------- */
html[data-mc="on"] .topbar {
  background: #181818;
  color: #EDEDEA;
  letter-spacing: 0.01em;
}
html[data-mc="on"] .topbar .dot { background: var(--gold); }

html[data-mc="on"] .nav {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 1px 0 rgba(20,20,20,0.02);
}
html[data-mc="on"] .nav .menu-link {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2A2A28;
}
html[data-mc="on"] .nav .menu-link:hover { color: var(--terracotta); }

/* Cart button → square dark icon button like the template's toolbar icons */
html[data-mc="on"] .cart-btn { color: #1C1C1C; }
html[data-mc="on"] .cart-count {
  background: var(--gold) !important;
  color: #1C1C1C !important;
}

/* ---------------------------------------------------------------------------
   3 · BUTTONS — yellow primary, black secondary, outlined ghost
   --------------------------------------------------------------------------- */
html[data-mc="on"] .btn {
  border-radius: 4px;            /* template uses crisp, near-square corners */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
}
html[data-mc="on"] .btn-primary {
  background: var(--gold);
  color: #1C1C1C;
}
html[data-mc="on"] .btn-primary:hover {
  background: var(--gold-dark);
  color: #1C1C1C;
  box-shadow: 0 8px 18px rgba(255, 180, 0, 0.28);
}
html[data-mc="on"] .btn-secondary {
  background: #1C1C1C;
  color: #FFFFFF;
}
html[data-mc="on"] .btn-secondary:hover {
  background: #000000;
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(20, 20, 20, 0.22);
}
html[data-mc="on"] .btn-ghost {
  background: transparent;
  color: #1C1C1C;
  border: 1px solid #D8D8D2;
}
html[data-mc="on"] .btn-ghost:hover { border-color: #1C1C1C; color: #1C1C1C; }

/* Commerce CTAs (add-to-cart / checkout / modal add) → yellow on dark text */
html[data-mc="on"] .add-to-cart,
html[data-mc="on"] .cart-checkout,
html[data-mc="on"] .hh-modal-add {
  background: var(--gold) !important;
  color: #1C1C1C !important;
}
html[data-mc="on"] .add-to-cart:hover,
html[data-mc="on"] .cart-checkout:hover,
html[data-mc="on"] .hh-modal-add:hover {
  background: var(--gold-dark) !important;
  color: #1C1C1C !important;
}
html[data-mc="on"] .add-to-cart.added,
html[data-mc="on"] .hh-modal-add.added {
  background: #1C1C1C !important;
  color: #FFFFFF !important;
}

/* ---------------------------------------------------------------------------
   4 · SECTION HEADINGS — centered, uppercase, with a small kicker rule
   (matches the template's "HANDPICKED ELEGANCE" / "WHAT CUSTOMERS SAY")
   --------------------------------------------------------------------------- */
html[data-mc="on"] .section-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: 52px;
}
html[data-mc="on"] .section-head h2 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  position: relative;
  padding-bottom: 18px;
  max-width: 26ch;
}
html[data-mc="on"] .section-head h2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
}
html[data-mc="on"] .section-head p { max-width: 56ch; color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   5 · PRODUCT CARDS — square, minimal, light-grey image well (template look)
   --------------------------------------------------------------------------- */
html[data-mc="on"] .product-card {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  background: #FFFFFF;
}
html[data-mc="on"] .product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: #E0E0DA;
}
html[data-mc="on"] .product-img { background: #F4F4F1; }

/* Category tag chips → muted neutral, uppercase, like the template's labels */
html[data-mc="on"] .product-img .tag {
  background: rgba(28, 28, 28, 0.82);
  color: #FFFFFF;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-radius: 3px;
}
html[data-mc="on"] .tag.dairy,
html[data-mc="on"] .tag.meat,
html[data-mc="on"] .tag.gift,
html[data-mc="on"] .tag.cattle { background: rgba(28, 28, 28, 0.82); color: #FFFFFF; }

html[data-mc="on"] .product-body h3 {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1.05rem;
}
html[data-mc="on"] .product-body .desc { color: var(--text-secondary); }
html[data-mc="on"] .price {
  font-family: var(--sans);
  color: var(--terracotta);
  font-weight: 700;
}
html[data-mc="on"] .rating { color: var(--gold); }

/* Shop grid (nl-theme made these minimal image + name + Quick View) —
   keep that compact format but recolour the Quick View pill to dark/yellow. */
html[data-mc="on"] #shop .product-img {
  background: radial-gradient(120% 100% at 50% 0%, #F6F6F3 0%, #ECECE6 100%);
}
html[data-mc="on"] #shop .product-card { border-radius: 8px; }
html[data-mc="on"] #shop .product-img,
html[data-mc="on"] #shop .product-photo { border-radius: 6px; }
html[data-mc="on"] #shop .product-body h3 { color: var(--text-primary); }
html[data-mc="on"] .nl-quickview {
  background: #1C1C1C;
  color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.28);
}
html[data-mc="on"] #shop .product-card:hover .nl-quickview {
  background: var(--gold);
  color: #1C1C1C;
}
html[data-mc="on"] .nl-fav { color: #1C1C1C; }
html[data-mc="on"] .nl-fav.is-active { color: #fff; background: var(--terracotta); }

/* ---------------------------------------------------------------------------
   6 · FILTER TABS — minimal pills, active = solid black
   --------------------------------------------------------------------------- */
html[data-mc="on"] .tab {
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
}
html[data-mc="on"] .tab:hover { border-color: #1C1C1C; color: #1C1C1C; }
html[data-mc="on"] .tab.active,
html[data-mc="on"] #shop-tabs .tab.active {
  background: #1C1C1C;
  border-color: #1C1C1C;
  color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   7 · MEMBERSHIP TIERS — clean white cards, yellow "featured" accent
   --------------------------------------------------------------------------- */
html[data-mc="on"] .members { background: var(--bg-secondary); }
html[data-mc="on"] .tier {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
html[data-mc="on"] .tier.featured {
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(255, 180, 0, 0.16);
}
html[data-mc="on"] .tier .badge { background: var(--gold); color: #1C1C1C; }
html[data-mc="on"] .tier h3 { color: var(--text-primary); }
html[data-mc="on"] .tier .price-big { color: var(--text-primary); font-family: var(--sans); }
html[data-mc="on"] .tier ul li::before {
  border-left-color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------------------------------------------------------------------------
   8 · TOUR CARDS — keep photo overlays; restyle the floating price pill
   --------------------------------------------------------------------------- */
html[data-mc="on"] .tour-card { border-radius: 8px; }
html[data-mc="on"] .tour-card .price-pill {
  background: var(--gold);
  color: #1C1C1C;
  border-radius: 4px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   9 · BANDS — trust bar & marquee strip become light-grey template bands
   --------------------------------------------------------------------------- */
html[data-mc="on"] .trust-bar { background: var(--bg-secondary); border-block: 1px solid var(--border-soft); }
html[data-mc="on"] .trust-bar-inner { color: var(--text-secondary); }
html[data-mc="on"] .strip { background: #1C1C1C; color: #EDEDEA; }
html[data-mc="on"] .strip-inner span::before { background: var(--gold); }
html[data-mc="on"] .story { background: var(--bg-secondary); }

/* ---------------------------------------------------------------------------
   10 · FOOTER + FAB — black footer (already dark) refined; FAB → dark/yellow
   --------------------------------------------------------------------------- */
html[data-mc="on"] footer.footer { background: #181818; }
html[data-mc="on"] .footer a:hover { color: var(--gold); }
html[data-mc="on"] .footer .brand-mark { background: var(--gold); }

html[data-mc="on"] .chat-fab { background: #1C1C1C; color: #FFFFFF; box-shadow: 0 8px 24px rgba(20,20,20,0.4); }
html[data-mc="on"] .chat-fab:hover { box-shadow: 0 12px 32px rgba(20,20,20,0.5); }
html[data-mc="on"] .chat-fab .badge-n { background: var(--gold); color: #1C1C1C; }
html[data-mc="on"] .chat-header { background: #1C1C1C; color: #FFFFFF; }

/* Eyebrow chips (used in a few sub-sections) → light neutral */
html[data-mc="on"] .eyebrow {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-soft);
}

/* ===========================================================================
   11 · HERO — video removed; cinematic cross-fade slideshow of 4 cow photos
                behind the centered hero text + buttons.
   =========================================================================== */
html[data-mc="on"] section.hero {
  position: relative;
  min-height: clamp(420px, 66vh, 760px);
  background: #0E0E0C;            /* base behind photos while they load */
  padding: clamp(56px, 9vw, 120px) 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
html[data-mc="on"] section.hero .hero-scrim { display: none !important; }

/* Full-bleed slideshow layer */
html[data-mc="on"] .mc-hero-photos {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  display: block;
  pointer-events: none;
}
html[data-mc="on"] .mc-hero-photos .mc-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* slow elegant cross-fade + gentle Ken-Burns drift */
  transition: opacity 1.5s ease-in-out;
  transform: scale(1.06);
  animation: mc-hero-kenburns 16s ease-in-out infinite alternate;
  pointer-events: none;
  border-radius: 0;
  box-shadow: none;
}
html[data-mc="on"] .mc-hero-photos .mc-slide.is-active {
  opacity: 1;
}
@keyframes mc-hero-kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}

/* Dark overlay so the white hero text stays readable over any photo */
html[data-mc="on"] section.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.42) 100%),
    rgba(0, 0, 0, 0.35);
}

/* Hero content sits above the slideshow + overlay */
html[data-mc="on"] section.hero .container { position: relative; z-index: 2; }
html[data-mc="on"] .mc-hero-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
html[data-mc="on"] section.hero h1 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 22px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.45) !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  line-height: 1.08;
  margin: 0 0 30px;
}
html[data-mc="on"] section.hero h1 em { color: var(--gold) !important; font-style: normal; }
html[data-mc="on"] .mc-hero-head .hero-actions { justify-content: center; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html[data-mc="on"] .mc-hero-photos .mc-slide { animation: none; transform: none; }
}

/* ===========================================================================
   12 · HEADER 2.0 — screenshot-match: Logo · MENU · Search · Account/Wishlist/Cart
        + revealed nav-link panel. Sticky header. (FINAL refinement)
   =========================================================================== */
html[data-mc="on"] .nav { position: sticky; top: 0; z-index: 200; }
html[data-mc="on"] .nav-inner {
  gap: 18px;
  min-height: 84px;
  flex-wrap: nowrap;
}
html[data-mc="on"] .nav .brand { flex: 0 0 auto; }

/* --- MENU toggle (warm-yellow block, like the screenshot) --- */
html[data-mc="on"] .mc-menu-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 26px 0 22px;
  background: var(--gold);
  color: #1C1C1C;
  border: none;
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
html[data-mc="on"] .mc-menu-toggle:hover {
  background: var(--gold-dark);
  box-shadow: 0 8px 18px rgba(255, 180, 0, 0.30);
}
html[data-mc="on"] .mc-menu-toggle-icon {
  position: relative;
  width: 20px;
  height: 16px;
  display: inline-block;
}
html[data-mc="on"] .mc-menu-toggle-icon,
html[data-mc="on"] .mc-menu-toggle-icon span,
html[data-mc="on"] .mc-menu-toggle-icon::before,
html[data-mc="on"] .mc-menu-toggle-icon::after {
  box-sizing: border-box;
}
html[data-mc="on"] .mc-menu-toggle-icon span,
html[data-mc="on"] .mc-menu-toggle-icon::before,
html[data-mc="on"] .mc-menu-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #1C1C1C;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
html[data-mc="on"] .mc-menu-toggle-icon::before { top: 0; }
html[data-mc="on"] .mc-menu-toggle-icon span    { top: 7px; }
html[data-mc="on"] .mc-menu-toggle-icon::after  { top: 14px; }
/* X state when the menu is open */
html[data-mc="on"] .nav[data-menu="open"] .mc-menu-toggle-icon::before { transform: translateY(7px) rotate(45deg); }
html[data-mc="on"] .nav[data-menu="open"] .mc-menu-toggle-icon span    { opacity: 0; }
html[data-mc="on"] .nav[data-menu="open"] .mc-menu-toggle-icon::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Search bar --- */
html[data-mc="on"] .mc-search {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
  max-width: 720px;
  height: 52px;
}
html[data-mc="on"] .mc-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--border-soft);
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: #FFFFFF;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  outline: none;
}
html[data-mc="on"] .mc-search-input::placeholder { color: var(--text-muted); letter-spacing: 0.08em; }
html[data-mc="on"] .mc-search-input:focus { border-color: #C9C9C2; }
html[data-mc="on"] .mc-search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  background: var(--gold);
  color: #1C1C1C;
  border: none;
  border-radius: 0 6px 6px 0;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background .2s ease;
}
html[data-mc="on"] .mc-search-btn:hover { background: var(--gold-dark); }
html[data-mc="on"] .mc-search-btn svg { width: 18px; height: 18px; }

/* --- nav-cta: Account · Wishlist · Cart --- */
html[data-mc="on"] .nav-cta { flex: 0 0 auto; gap: 22px; align-items: center; }
html[data-mc="on"] .nav-cta .account-btn {
  border: none;
  background: transparent;
  padding: 0;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 600;
  font-size: 0.92rem;
  color: #1C1C1C;
}
html[data-mc="on"] .nav-cta .account-btn:hover { color: var(--terracotta); box-shadow: none; }

html[data-mc="on"] .mc-wishlist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1C1C1C;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
}
html[data-mc="on"] .mc-wishlist:hover { color: var(--terracotta); }
html[data-mc="on"] .mc-wishlist svg { width: 22px; height: 22px; }
html[data-mc="on"] .mc-wishlist.has-items svg { fill: var(--gold); stroke: var(--gold-dark); }
html[data-mc="on"] .mc-wishlist-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: #1C1C1C;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

html[data-mc="on"] .cart-btn { width: 30px; height: 30px; }
html[data-mc="on"] .cart-btn svg { width: 26px; height: 26px; }

/* Hide the old standalone hamburger — the MENU button now owns that role */
html[data-mc="on"] .hamburger { display: none !important; }

/* --- Revealed nav-link panel (dropdown below the sticky header) --- */
html[data-mc="on"] .nav .menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 14px 24px 18px;
  background: #FFFFFF;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 18px 34px rgba(20, 20, 20, 0.10);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
html[data-mc="on"] .nav[data-menu="open"] .menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* keep dropdowns opening downward inside the panel */
html[data-mc="on"] .nav .menu .dropdown { top: calc(100% + 6px); }

/* ===========================================================================
   13 · HERO 2.0 — two-column: text on a clean light canvas (left),
        slideshow contained in a rounded panel (right).
   =========================================================================== */
html[data-mc="on"] section.hero {
  position: relative;
  background: var(--bg-secondary);
  min-height: 0;
  padding: clamp(40px, 6vw, 88px) 0;
  display: block;
  overflow: visible;
  isolation: auto;
}
/* remove the full-bleed dark overlay used by the old full-screen hero */
html[data-mc="on"] section.hero::after { display: none !important; }

html[data-mc="on"] .mc-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
html[data-mc="on"] section.hero .mc-hero-head {
  text-align: left;
  max-width: none;
  margin: 0;
}
html[data-mc="on"] section.hero h1 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 0.005em;
  font-weight: 700;
  font-size: clamp(2.1rem, 3.8vw, 3.5rem);
  line-height: 1.08;
  margin: 0 0 18px;
}
html[data-mc="on"] section.hero h1 em { color: var(--gold) !important; }
html[data-mc="on"] .mc-hero-lede {
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 44ch;
}
html[data-mc="on"] section.hero .mc-hero-head .hero-actions {
  justify-content: flex-start;
  margin: 0;
  flex-wrap: wrap;
}

/* slideshow → contained rounded panel on the right */
html[data-mc="on"] .mc-hero-grid .mc-hero-photos {
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(20, 20, 20, 0.20);
}

@media (max-width: 900px) {
  html[data-mc="on"] .mc-hero-grid { grid-template-columns: 1fr; }
  html[data-mc="on"] section.hero h1 { text-align: left; }
  html[data-mc="on"] .mc-hero-grid .mc-hero-photos { aspect-ratio: 16 / 10; }
}

/* ===========================================================================
   14 · HEADER responsiveness — collapse search label, then search; MENU stays
   =========================================================================== */
@media (max-width: 1180px) {
  /* the base sheet hides .menu < 1180px; MENU toggle opens the mobile sheet */
  html[data-mc="on"] .nav-cta .mc-wishlist-label { display: none; }
  html[data-mc="on"] .mc-search { max-width: none; }
}
@media (max-width: 860px) {
  html[data-mc="on"] .mc-search-btn-label { display: none; }
  html[data-mc="on"] .mc-search-btn { padding: 0 16px; }
  html[data-mc="on"] .nav-cta .account-btn span:not(.avatar-ring) { display: none; }
}
@media (max-width: 680px) {
  html[data-mc="on"] .mc-search { display: none; }
  html[data-mc="on"] .mc-menu-toggle { padding: 0 18px; }
}
@media (max-width: 480px) {
  html[data-mc="on"] .mc-menu-toggle-label { display: none; }
  html[data-mc="on"] .mc-menu-toggle { padding: 0 14px; }
  html[data-mc="on"] .nav-inner { gap: 12px; min-height: 72px; }
}