:root {
  --ink: #111111;
  --cream: #fff8ec;
  --cream-2: #f6ead8;
  --gold: #c99218;
  --gold-2: #f2c66d;
  --purple: #4b236a;
  --purple-2: #6d3a88;
  --green: #0b8d5a;
  /* "Dark chrome" background for header/nav/footer — a soft near-black
     rather than flat #000, which reads as cheap/harsh on screen; this is
     the same calibration used for premium dark UI generally (a hint of
     lift keeps it from looking like a rendering error on OLED displays). */
  --chrome-black: #0b0b0e;
  --chrome-black-2: #121216;
  --line: #0202021f;
  --shadow: 0 22px 70px rgba(0, 28, 27, 0.16);
  --radius: 22px;
  --font-display: "Cinzel", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(201,146,24,.14), transparent 34rem),
    linear-gradient(180deg, #fffaf1 0%, #fff7eb 45%, #f5ead9 100%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
.container { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.announcement {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--chrome-black);
  color: hwb(0 93% 5%);
  font-size: 14px;
  font-weight: 700;
}
.announcement span:not(:first-child)::before { content: "•"; margin-right: 20px; color: var(--gold-2); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: hsla(240, 20%, 94%, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.header-main {
  min-height: 84px;
  display: grid;
  grid-template-columns: 280px 1fr auto;
  gap: 28px;
  align-items: center;
}
/* Logo lockup used everywhere the logo appears (nav, footer, auth page) —
   fox emblem icon + live "Mystic Hollow" text, one shared class so it only
   ever needs styling in one place. Text is live HTML rather than baked into
   the emblem image, since the emblem file has "Hallow" misspelled in its own
   text (not used here — see assets/fox-emblem.png, the icon-only crop). */
.brand-logo-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo-icon { height: 58px; width: auto; display: block; }
.brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
}
.brand-wordmark-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-2);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.brand-wordmark-main {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
  margin-top: 2px;
}
/* index.html's own header has a light background (unlike the dark shared
   navbar used everywhere else), so the logo text needs dark colors here
   specifically — the base white/light-gold above stays correct for every
   other page using this same class. */
.site-header .brand-wordmark-sub { color: var(--gold); }
.site-header .brand-wordmark-main { color: var(--ink); }
.search {
  display: flex;
  align-items: center;
  background: #fffaf2;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.search input { width: 100%; padding: 16px 18px; border: 0; background: transparent; outline: 0; }
.search button { width: 52px; border: 0; background: transparent; font-size: 24px; cursor: pointer; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.icon-link, .cart-button { background: none; border: 0; cursor: pointer; display: flex; gap: 7px; align-items: center; font-weight: 800; color: var(--ink); }
.cart-button strong { background: var(--purple); color: white; min-width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; }
.mobile-menu { display: none; background: var(--purple); color: white; border: 0; padding: 10px 12px; border-radius: 10px; }
.main-nav { background: #111; border-top: none; }
/* Magic Madhouse-style spaced-out nav: generous padding, labels allowed to
   wrap to two lines instead of forcing everything onto one cramped line. */
.nav-inner { height: auto; display: flex; flex-wrap: nowrap; justify-content: space-between; column-gap: clamp(10px, 1.6vw, 28px); padding: 16px 0; align-items: flex-start; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.nav-inner > a { color: rgba(255,255,255,.85); text-decoration: none; white-space: normal; text-align: center; max-width: 120px; line-height: 1.3; }
.nav-inner > a:hover { color: var(--gold-2); }
.nav-inner > a.nav-sale { color: #f97316; }
.nav-inner .nav-drop { height: auto; align-items: flex-start; }
.nav-drop > a { color: rgba(255,255,255,.85); text-decoration: none; white-space: normal; text-align: center; max-width: 120px; line-height: 1.3; }
.nav-drop > a:hover, .nav-drop:hover > a { color: var(--gold-2); }
.pill { font-size: 10px; background: #0c4270; color: white; padding: 2px 7px; border-radius: 99px; margin-left: 4px; }

/* ---- Nav Dropdowns ---- */
.nav-drop { position: relative; display: flex; align-items: center; height: 44px; }
.nav-drop > a { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.nav-drop > a::after { content: '▾'; font-size: 9px; opacity: .6; }
.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 200px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  z-index: 200;
  padding: 6px 0;
  white-space: nowrap;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: 10px 18px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700; transition: background .12s; }
.nav-drop-menu a:hover { background: #f7f3eb; color: var(--purple); }
.nav-drop-menu .drop-divider { height: 1px; background: var(--line); margin: 4px 0; }
.nav-drop-menu .drop-all { color: var(--purple); font-weight: 900; border-top: 1px solid var(--line); margin-top: 4px; }

/* ---- Mega Menu (multi-column dropdown, e.g. "Trading Cards") ---- */
.nav-drop-menu.mega-panel {
  left: 0;
  transform: none;
  display: none;
  /* A too-large floor (minmax(126px,1fr)) once made the grid wider than the panel's max-width,
     pushing the promo column outside the panel's right edge. Dropping the floor to minmax(0,1fr)
     fixed that but overcorrected: columns could then shrink narrower than a single unbreakable
     word (e.g. "Collection", "Commander"), which overflowed sideways into the next column instead
     of wrapping — visible as overlapping text. 100px is wide enough for every word used in these
     columns, while 5×100 + gaps + the fixed promo column still fits inside max-width at every
     visible viewport (verified down to the 981px cutoff where the panel is hidden below). */
  grid-template-columns: 1fr 200px;
  gap: 0 20px;
  min-width: 700px;
  max-width: min(980px, calc(100vw - 32px));
  padding: 22px;
  white-space: normal;
}
.nav-drop:hover .nav-drop-menu.mega-panel,
.nav-drop:focus-within .nav-drop-menu.mega-panel { display: grid; }
.nav-drop-menu.mega-panel.mega-panel-3col { grid-template-columns: repeat(3, minmax(130px, 1fr)) 200px; min-width: 560px; }
/* Two-tier layout: franchises with real sub-category inventory get their own
   detailed column (title + Single Cards/Booster Boxes/etc.); franchises with
   nothing in stock yet to split into sub-categories get a single plain link
   instead, grouped into their own wrapping row below — mixing both kinds
   into one grid previously interleaved them unevenly (a tall 4-link column
   next to three single-line ones made the row heights wildly inconsistent). */
.mega-cols-main { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 0 20px; }
.mega-cols-slim { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); align-self: start; }
.mega-cols-slim a { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--ink) !important; padding: 0 !important; }
.mega-cols-slim a:hover { color: var(--purple) !important; background: none !important; }
.nav-drop-menu.mega-panel:not(.mega-panel-3col) .mega-promo { grid-column: 2; grid-row: 1 / span 2; }
.mega-col-title {
  display: block;
  padding: 2px 0 8px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--purple);
  border-bottom: 1px solid var(--line);
  white-space: normal;
}
.mega-panel a { padding-left: 2px; padding-right: 2px; }
.mega-promo {
  background: linear-gradient(135deg, var(--purple-2), var(--purple));
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.mega-promo-emoji { font-size: 20px; letter-spacing: 4px; line-height: 1; margin-bottom: 2px; }
.mega-promo strong { font-family: var(--font-display); font-size: 15px; line-height: 1.3; color: white !important; }
.mega-promo p { margin: 0; font-size: 12px; color: rgba(255,255,255,.75) !important; line-height: 1.5; }
.mega-promo a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  margin-top: 6px;
  background: var(--gold);
  color: var(--purple) !important;
  font-weight: 900 !important;
  font-size: 12px;
  padding: 9px 14px !important;
  border-radius: 9px;
  /* white-space:nowrap here forced "SHOP ALL TRADING CARDS →" to stay on one line even though
     it's wider than the 200px promo box, so it visually overflowed past the button's own edge
     instead of wrapping. Letting it wrap keeps the button's content inside its own bounds. */
  white-space: normal;
  line-height: 1.3;
}
.mega-promo a:hover { background: var(--gold-2) !important; }
/* Nav-collapse breakpoint — lower than it used to be, since the nav now
   wraps its labels onto a second line instead of needing to fit on one,
   so it only needs to collapse to the hamburger at genuinely narrow
   (tablet/phone) widths rather than every laptop-sized window. */
@media (max-width: 1050px) {
  .mobile-menu-btn { display: inline-flex; }
  .main-nav { display: none; }
  .main-nav.open { display: block; }
  .nav-inner { height: auto; flex-direction: column; align-items: flex-start; padding: 16px 0; gap: 14px; }
  .nav-drop-menu.mega-panel { display: none !important; }
}

.hero {
  margin-top: 34px;
  min-height: 330px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 76% 46%, rgba(242,198,109,.35), transparent 10rem),
    radial-gradient(circle at 52% 40%, rgba(32,139,133,.55), transparent 20rem),
    linear-gradient(110deg, rgba(0,22,23,.96) 0%, rgba(0,44,45,.9) 43%, rgba(1,25,27,.96) 100%);
  color: white;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 215, 125, .8) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 68%, rgba(255, 215, 125, .7) 0 2px, transparent 3px),
    radial-gradient(circle at 59% 22%, rgba(255, 215, 125, .7) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 76%, rgba(255, 215, 125, .9) 0 2px, transparent 3px);
  opacity: .75;
}
.hero-content { position: relative; z-index: 1; padding: clamp(34px, 6vw, 64px); }
.eyebrow { color: var(--gold-2); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.hero h1 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 62px); line-height: .98; margin: 0 0 16px; }
.hero h1 span { display: block; color: var(--gold-2); }
.hero p { max-width: 520px; color: #fff8df; line-height: 1.75; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin: 28px 0 24px; }
/* text-decoration + an explicit :visited override, not just relying on the
   global `a` reset — a <a class="btn"> left without these shows the
   browser's default visited-link styling (dark, underlined) the first time
   a customer comes back to a page with this button after they've already
   clicked through once, which an incognito/first-visit screenshot won't
   catch but a returning customer absolutely will. */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; padding: 14px 22px; font-weight: 900; border: 1px solid transparent; text-decoration: none; }
.btn-primary, .btn-primary:visited { background: linear-gradient(135deg, var(--purple), var(--purple-2)); color: white; box-shadow: 0 12px 28px rgba(75,35,106,.28); }
.btn-secondary, .btn-secondary:visited { border-color: var(--gold); color: #fff7d7; background: rgba(255,255,255,.05); }
.hero-trust { display: flex; gap: 20px; flex-wrap: wrap; color: var(--gold-2); font-size: 13px; font-weight: 900; }
.hero-art { position: relative; min-height: 300px; }
.hero-art::before, .hero-art::after {
  content: ""; position: absolute; inset: auto 0 0 auto;
  width: 72%; height: 100%;
  background: radial-gradient(ellipse at bottom, rgba(0,0,0,.38), transparent 60%);
}
.moon-door {
  position: absolute; right: 14%; top: 16%; width: 180px; height: 230px; border-radius: 48% 48% 10px 10px;
  background: linear-gradient(180deg, #1b1712, #0d100d);
  border: 2px solid rgba(242,198,109,.35);
  box-shadow: 0 0 60px rgba(242,198,109,.28), inset 0 0 30px rgba(242,198,109,.08);
  display: grid; place-items: center;
}
.moon-door span { width: 92px; height: 92px; border: 2px solid var(--gold-2); border-radius: 50%; display: grid; place-items: center; color: var(--gold-2); font-size: 54px; box-shadow: 0 0 30px rgba(242,198,109,.45); }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading h2 { font-family: var(--font-display); font-size: 28px; margin: 0; }
.section-heading a { color: var(--purple); font-weight: 900; }
.categories { margin-top: 34px; }
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.category-card { background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: 18px; padding: 18px; min-height: 150px; display: grid; align-content: start; gap: 10px; transition: .2s ease; }
.category-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.category-card small { color: #6b5d4c; font-weight: 800; }
.product-mini { width: 54px; height: 64px; border-radius: 8px; display: block; box-shadow: 0 12px 22px rgba(0,0,0,.18); }
.box-1 { background: linear-gradient(135deg, #154f4d, #ecbb4d 42%, #7a164f); }
.box-2 { background: linear-gradient(135deg, #25154c, #6f3f88, #d7ad4a); }
.box-3 { background: linear-gradient(135deg, #0b6771, #ddb55a, #513d7d); }
.tin { border-radius: 18px; background: linear-gradient(135deg, #05383a, #0a7882, #d8a83e); }
.sleeve { background: linear-gradient(135deg, #2b1a55, #0a6a65); }
.pack { background: linear-gradient(135deg, #efefe9, #2e6f77, #c63d79); }

.shop { display: grid; grid-template-columns: 260px 1fr; gap: 28px; margin-top: 38px; align-items: start; }
.filters { background: linear-gradient(180deg, var(--purple), var(--purple-2)); color: #fff8df; border-radius: 18px; padding: 20px; position: sticky; top: 148px; box-shadow: var(--shadow); }
.filters-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.filters h2 { font-size: 18px; margin: 0; }
.filters button { border: 0; background: none; color: var(--gold-2); cursor: pointer; font-weight: 800; }
fieldset { border: 0; border-top: 1px solid rgba(255,255,255,.14); padding: 18px 0; margin: 0; }
legend { font-weight: 900; margin-bottom: 12px; }
.filters label { display: block; margin: 9px 0; font-size: 14px; color: rgba(255,248,223,.9); }
.filters input[type="range"] { width: 100%; accent-color: var(--gold); }
.price-label { display: flex !important; justify-content: space-between; }
.product-heading { margin-top: 4px; }
.sort-label { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
select { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: white; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.product-card { background: rgba(255,255,255,.68); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 12px 35px rgba(0,0,0,.05); position: relative; }
.badge { position: absolute; top: 14px; left: 14px; background: var(--gold); color: white; font-size: 11px; font-weight: 900; padding: 5px 8px; border-radius: 99px; }
.badge.new { background: var(--green); }
.product-art { width: 100%; height: 160px; border-radius: 16px; margin-bottom: 14px; background: linear-gradient(135deg, #0b4042, #e2ba58 55%, #214f56); display: grid; place-items: center; overflow: hidden; }
.product-art::before { content: ""; width: 74%; height: 74%; border-radius: 14px; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.35), transparent 18px), linear-gradient(135deg, rgba(0,0,0,.22), rgba(255,255,255,.1)); border: 1px solid rgba(255,255,255,.24); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.product-card h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.3; }
.price { font-weight: 900; margin: 0 0 12px; }
.card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #6b5d4c; margin-bottom: 14px; }
.stars { color: #e6a400; letter-spacing: 1px; margin: 0; }
.stock { color: var(--green); font-weight: 900; }
.card-actions { display: grid; grid-template-columns: 1fr 44px; gap: 10px; }
.add-cart { border: 0; background: var(--purple); color: white; border-radius: 10px; font-weight: 900; cursor: pointer; padding: 12px; }
.wish { border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; }

.trust-strip { margin-top: 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: linear-gradient(135deg, var(--purple), var(--purple-2)); color: #fff8df; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.trust-strip article { padding: 24px; background: rgba(255,255,255,.03); }
.trust-strip span { color: var(--gold-2); font-size: 30px; }
.trust-strip h3 { margin: 8px 0 6px; }
.trust-strip p { margin: 0; color: rgba(255,248,223,.78); line-height: 1.55; }
.reviews { margin-top: 44px; margin-bottom: 46px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card { display: grid; grid-template-columns: 56px 1fr; gap: 14px; background: rgba(255,255,255,.68); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f3d8a0, #0b6865); color: white; font-weight: 900; font-size: 22px; }
.review-card strong span { color: #686153; font-size: 11px; margin-left: 6px; }
.review-card p { margin: 6px 0 0; line-height: 1.55; }

.site-footer { background: radial-gradient(circle at bottom left, rgba(201,146,24,.13), transparent 25rem), linear-gradient(180deg, var(--chrome-black-2), var(--chrome-black)); color: white; padding: 42px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr) 1.35fr; gap: 34px; }
.footer-brand img { width: 220px; height: 74px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.footer-grid h3 { color: var(--gold-2); margin-top: 0; }
.footer-grid a { display: block; color: rgba(255,255,255,.78); margin: 9px 0; }
.footer-grid p { color: rgba(255,255,255,.78); line-height: 1.65; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.newsletter form { display: flex; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; overflow: hidden; }
.newsletter input { width: 100%; padding: 13px; border: 0; outline: 0; }
.newsletter button { width: 48px; border: 0; background: var(--gold); color: white; font-weight: 900; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 34px; padding-top: 22px; display: flex; justify-content: space-between; gap: 18px; color: rgba(255,255,255,.72); }
.footer-bottom a { color: rgba(255,255,255,.8); }

.cart-drawer { position: fixed; inset: 0; background: rgba(0,0,0,.36); z-index: 30; display: none; justify-content: flex-end; }
.cart-drawer.open { display: flex; }
.cart-panel { width: min(420px, 100%); height: 100%; background: var(--cream); padding: 24px; box-shadow: -22px 0 60px rgba(0,0,0,.18); overflow: auto; }
.cart-head { display: flex; align-items: center; justify-content: space-between; }
.cart-head h2 { font-family: var(--font-display); }
.cart-head button { border: 0; background: var(--purple); color: white; width: 38px; height: 38px; border-radius: 50%; font-size: 24px; cursor: pointer; }
.cart-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-thumb { width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(135deg, #0b4042, #e2ba58); }
.cart-item button { border: 0; background: transparent; font-weight: 900; color: var(--purple); cursor: pointer; }
.cart-total { display: flex; justify-content: space-between; font-size: 20px; margin: 24px 0; }
.checkout { width: 100%; }

@media (max-width: 980px) {
  .announcement { gap: 8px; font-size: 12px; }
  .announcement span:not(:first-child)::before { margin-right: 8px; }
  .header-main { grid-template-columns: 1fr auto; gap: 14px; }
  .search { grid-column: 1 / -1; order: 3; }
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 120px; }
  .moon-door { width: 130px; height: 150px; right: 8%; top: -20px; opacity: .7; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .shop { grid-template-columns: 1fr; }
  .filters { position: static; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .container { width: min(100% - 24px, 1180px); }
  .announcement { flex-wrap: wrap; height: auto; padding: 8px 12px; }
  .header-actions span { display: none; }
  .hero-content { padding: 28px; }
  .hero-buttons { flex-direction: column; }
  .category-grid, .product-grid, .trust-strip, .footer-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .footer-bottom { flex-direction: column; }
}