/* ==========================================================================
   Ben's Toy Chest - shared stylesheet
   Rebuilt from the live Duda site (www.benstoychest.com), 2026-09-15.
   Tokens below were measured off the live page, not guessed.
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   Live: Orbitron 700 for h1/h2, Fredoka 400 for everything else (h3, body,
   nav, buttons, labels). Both are SIL OFL Google faces; self-hosted latin
   subsets (Fredoka variable 400..600, 29KB; Orbitron 700, 6.5KB).            */
@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/fredoka-var.woff2') format('woff2-variations'),
       url('/fonts/fredoka-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('/fonts/orbitron-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Fallback metrics so the swap does not reflow. */
@font-face {
  font-family: 'Fredoka Fallback';
  src: local('Arial');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Orbitron Fallback';
  src: local('Arial Black'), local('Arial');
  size-adjust: 128%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* Duda theme colors from the live site:
     --color_1 #ffffff  white text
     --color_2 #d3d3d3  light gray (h3, labels, sub copy)   14.0:1 on black
     --color_3 #26a9e5  brand blue accent                    7.9:1 on black
     --color_4 #1a1b1f  panel
     --color_5 #2d2e32  panel-2
     --color_6 #414246  line
     --color_7 #2253a1  deep blue (unused on the page)                        */
  --black: #000;
  --panel: #1a1b1f;
  --panel-2: #2d2e32;
  --line: #414246;
  --ink: #fff;
  --muted: #d3d3d3;
  --blue: #26a9e5;
  --blue-deep: #2253a1;
  /* Filled buttons: live painted white on --blue (2.66:1, fails AA at 18px).
     A near-black label on the same blue is 6.66:1. The button keeps its
     brand color; the label is dark.                                          */
  --btn-ink: #0b1a22;
  /* Form fields: live were white with a #666 border and black text.          */
  --field-bg: #fff;
  --field-ink: #111;
  --field-line: #666;

  --display: 'Orbitron', 'Orbitron Fallback', Arial, sans-serif;
  --font: 'Fredoka', 'Fredoka Fallback', Arial, sans-serif;

  --container: 1200px;    /* Duda column wrapper measured 1200 at 1440 */
  --gutter: 24px;
  --header-h: 96px;
  --radius: 10px;         /* live button radius */
  --radius-lg: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 18px;              /* live p: 18px / 27px */
  line-height: 1.5;
  color: var(--ink);
  background: var(--black);
}
img, video { max-width: 100%; height: auto; display: block; }
h1, h2 { margin: 0 0 .5em; font-family: var(--display); font-weight: 700; line-height: 1.3; color: var(--ink); }
h1 { font-size: 36px; line-height: 1.5; }   /* live 36/54 */
h2 { font-size: 40px; line-height: 1.5; }   /* live 40/60 */
h3 { margin: 0 0 .5em; font-family: var(--font); font-weight: 400; font-size: 32px; line-height: 1.5; color: var(--muted); }  /* live 32/48 */
h4 { margin: 0 0 .5em; font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--ink); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: .35em; font-size: 16px; line-height: 1.5; }  /* live li 16/24 */
strong { font-weight: 600; }
a { color: var(--blue); }
.accent { color: var(--blue); }
.eyebrow { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .6em; }

main p a:not(.btn), main li a:not(.btn) {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
main p a:not(.btn):hover, main li a:not(.btn):hover { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main p a:not(.btn), main li a:not(.btn) { text-decoration-color: currentColor; }
}

.ui-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--blue); color: var(--btn-ink); padding: 8px 14px; border-radius: 6px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* --- Layout --------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: 900px; }
.section { padding: 72px 0; position: relative; }
.section--tight { padding: 36px 0; }
.section--flush-top { padding-top: 0; }
.section--center { text-align: center; }
.section--center .btn-row { justify-content: center; }
.section--photo { background-size: cover; background-position: center; }
.section--photo::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.section--photo > .container { position: relative; }
.section--tron { background: var(--black) url('/images/black-tron-1536w.webp') center / cover no-repeat; }
.section--tron::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.section--tron > .container { position: relative; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.split--wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.grid--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.grid--auction { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.media img, .media video { width: 100%; }
.media--frame { background: #fff; padding: 8px; }
.media--frame img { border-radius: 8px; }

/* Bordered panel, as on the About rows */
.panel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; background: rgba(26, 27, 31, .35); }
.panel .media { border-radius: 12px; }

/* --- Buttons -------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: 10px 26px;
  font: inherit; font-size: 18px; line-height: 1.2;
  color: var(--btn-ink); background: var(--blue);
  border: 1px solid var(--blue); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}
.btn:hover { background: #4fbdf0; border-color: #4fbdf0; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(38, 169, 229, .35); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn--outline { background: rgba(0, 0, 0, .25); color: var(--ink); border-color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: var(--btn-ink); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }
/* [hidden] loses to the author display above; this rule is load-bearing. */
.btn[hidden] { display: none; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* No backdrop-filter. It makes the header a containing block for its own
     position:fixed children, so the mobile drawer's inset resolves against the
     76px header box and opens 0px tall (jumbomenu.md rule 3). Shipped that way
     on 2026-10-02 and caught before launch. The background is opaque instead. */
  background: #07080a;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.logo img { width: 170px; height: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; align-items: center; }
.nav__link { color: var(--ink); text-decoration: none; font-size: 18px; letter-spacing: .03em; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s, color .2s; }
.nav__link:hover, .nav__link:focus-visible { color: var(--blue); }
.nav__link.is-active { border-bottom-color: var(--blue); }
.burger { display: none; background: none; border: 0; color: var(--ink); padding: 8px; cursor: pointer; font-size: 28px; line-height: 1; }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden; background: var(--black); }
.hero__media { position: absolute; inset: 0; }
/* Poster and video stack in the SAME box. Without absolute positioning the
   video lands below the poster, clipped by the hero's overflow, and plays
   where nobody can see it (shipped that way on 2026-09-15). */
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .15) 100%); }
.hero__inner { position: relative; padding-top: 48px; padding-bottom: 48px; max-width: var(--container); }
.hero__copy { max-width: 620px; }
.hero__copy h1 { margin-bottom: .6em; }
.hero__lines p { margin: 0; font-size: 18px; color: var(--muted); }
.hero .btn-row { margin-top: 22px; }
.hero__social { display: flex; gap: 12px; margin-top: 22px; }
.social-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--panel-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background .2s, color .2s; }
.social-btn:hover { background: var(--blue); color: var(--btn-ink); }
.social-btn .ui-icon { width: 18px; height: 18px; }

/* --- Franchise strip ------------------------------------------------------ */
.franchise-copy { max-width: 760px; margin: 0 auto 32px; }
.strip { position: relative; }
.strip__track {
  /* No scroll-behavior:smooth here: with mandatory snap it makes Chrome
     perform a scroll before first paint and the page then reports NO LCP
     at all (Lighthouse NO_LCP). The JS passes behavior:'smooth' per call. */
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 14px; scrollbar-width: none;
}
.strip__track::-webkit-scrollbar { display: none; }
.strip__item { flex: 0 0 249px; scroll-snap-align: start; border-radius: 12px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: transform .2s, border-color .2s; }
.strip__item:hover { transform: translateY(-3px); border-color: var(--blue); }
.strip__item img { width: 100%; aspect-ratio: 249 / 203; object-fit: cover; }
.strip__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.strip__btn:hover { background: var(--blue); color: var(--btn-ink); }
.strip__btn .ui-icon { width: 22px; height: 22px; }
.strip__btn--prev { left: -8px; }
.strip__btn--next { right: -8px; }

/* --- Featured product + gallery cards ------------------------------------ */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 56px; }
.feature h3 { color: var(--ink); }
.photo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.photo-card { background: var(--panel); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; }
.photo-card img { width: 100%; aspect-ratio: 357 / 400; object-fit: cover; }
.photo-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.photo-card__body h4 { margin: 0; font-weight: 400; font-size: 20px; color: var(--muted); }
.photo-card__body .btn { align-self: flex-start; margin-top: auto; }

/* --- Video rows ------------------------------------------------------------ */
.video-block { max-width: 1100px; margin: 0 auto; }
.video-block video { width: 100%; border-radius: var(--radius-lg); background: #000; }

/* --- Shop list (four rows of thumb + copy) --------------------------------
   Live: copy column 42%, list column 58%.                                  */
.split--shop { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: start; }
.split--shop h2 { font-size: 32px; }
.shop-list { display: flex; flex-direction: column; }
.shop-row { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.shop-row:first-child { padding-top: 0; }
.shop-row:last-child { border-bottom: 0; }
.shop-row img { width: 100%; aspect-ratio: 280 / 335; object-fit: cover; border-radius: 12px; }
.shop-row h3 { font-size: 24px; margin-bottom: .4em; }
.shop-row p { font-size: 16px; }
.shop-row p { margin-bottom: .6em; }
.shop-row .tagline { color: var(--muted); font-size: 16px; }

/* --- Auctions ------------------------------------------------------------- */
.auction-copy h3 { color: var(--ink); }
.auction-slot h3 { font-size: 28px; }

/* --- Contact block --------------------------------------------------------- */
.contact-info { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.contact-info .ui-icon { width: 22px; height: 22px; color: var(--muted); }
.contact-info h3 { font-size: 24px; margin: 8px 0 4px; }
.contact-info p { margin: 0; font-size: 16px; }
.contact-info a { color: var(--ink); text-decoration: none; }
.contact-info a:hover { color: var(--blue); }

/* --- Forms ------------------------------------------------------------------ */
.form { display: grid; gap: 16px; }
.form > .btn { justify-self: start; min-width: 240px; }
#Sellers h2 { font-size: 32px; }
.form-fields { display: grid; gap: 16px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 16px; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--field-ink); background: var(--field-bg);
  border: 1px solid var(--field-line); border-radius: 4px; padding: 9px 12px; min-height: 42px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.field input::placeholder, .field textarea::placeholder { color: #777; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.checks label { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink); cursor: pointer; }
.checks input { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.form-note { font-size: 16px; color: var(--muted); }
.form-error, .form-success { display: none; padding: 14px 16px; border-radius: 8px; font-size: 16px; }
.form-error { background: #3a1416; color: #ffd3d3; border: 1px solid #7a2a2e; }
.form-success { background: #10303f; color: #d9f2ff; border: 1px solid var(--blue); }
.form-error.show, .form-success.show { display: block; }
.form-error a, .form-success a { color: inherit; }
.form-success h3 { font-size: 24px; color: var(--ink); margin-bottom: 6px; }
.form-success p { margin-bottom: 6px; }


/* --- Multi-step seller form ------------------------------------------------ */
.form--steps { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.steps__head h3 { margin-bottom: 12px; color: var(--ink); }
.steps__progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.steps__bar { display: block; height: 100%; width: 25%; background: var(--blue); transition: width .3s; }
.steps__count { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.step { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.step.is-current { display: grid; gap: 16px; }
.step__title { font-size: 22px; color: var(--ink); padding: 0; margin-bottom: 4px; }
.steps__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.steps__nav .btn { min-width: 160px; }
.steps__nav [data-step-next], .steps__nav [type="submit"] { margin-left: auto; }
.form--steps > .btn { display: none; }
.step__error { margin: 0; }
.field__hint { display: block; font-size: 13px; color: #9a9a9a; margin-top: 2px; }
.field__opt { color: #9a9a9a; font-size: 14px; }
.field__info { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 13px; color: var(--blue); text-decoration: none; }
.field__info:hover span { text-decoration: underline; }
.field__info .ui-icon { width: 15px; height: 15px; }

/* Photo attachments */
.photos__drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--blue); border-radius: 12px; background: rgba(38, 169, 229, .08); cursor: pointer; text-align: center; transition: background .2s; }
.photos__drop:hover, .photos__drop:focus-within { background: rgba(38, 169, 229, .16); }
.photos__drop .ui-icon { width: 34px; height: 34px; color: var(--blue); }
.photos__label { font-size: 18px; color: var(--ink); }
.photos__sub { font-size: 14px; color: var(--muted); }
.photos__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-top: 14px; }
.photos__grid:empty { display: none; }
.photos__item { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.photos__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.photos__remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.photos__remove:hover { background: #b3261e; }
.photos__error { margin-top: 10px; }
.checks-group .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Popup: "Got a Collection to Sell?" ----------------------------------- */
.popup { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .7); }
.popup.is-open { display: flex; }
/* No photo behind the popup: a large background image that appears at 2s
   became the page's LCP candidate on mobile and doubled the lab LCP. */
.popup__box { position: relative; width: min(640px, 100%); background: radial-gradient(120% 80% at 50% 0%, #0f2a3d 0%, var(--panel) 60%); border: 1px solid var(--blue); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.popup__inner { position: relative; padding: 40px 40px 32px; }
.popup__inner h2 { font-size: 30px; }
.popup__inner p, .popup__inner li { font-size: 16px; }
.popup__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; }
.popup__close:hover { background: var(--blue); color: var(--btn-ink); }
.popup__close .ui-icon { width: 18px; height: 18px; }

/* --- Footer ---------------------------------------------------------------- */
.site-footer { background: var(--black); border-top: 1px solid var(--line); padding: 56px 0 28px; font-size: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-logo img { width: 240px; height: auto; }
.footer-about { color: var(--muted); margin-top: 16px; max-width: 360px; }
.site-footer h3 { font-size: 20px; color: var(--ink); margin-bottom: 12px; }
.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-links li, .footer-contact li { margin-bottom: 8px; }
.footer-links a, .footer-contact a { color: var(--muted); text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover, .footer-links a.is-active { color: var(--blue); }
.footer-contact .ui-icon { color: var(--blue); margin-right: 8px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--muted); border-radius: 8px;
  border: 1px solid var(--line); transition: color .2s, border-color .2s; }
.socials a:hover, .socials a:focus-visible { color: var(--blue); border-color: var(--blue); }
.socials svg { width: 20px; height: 20px; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.footer-bottom a { color: var(--muted); }

/* --- Blog ------------------------------------------------------------------- */
.page-hero { padding: 72px 0 40px; text-align: center; }
.page-hero p { color: var(--muted); max-width: 640px; margin: 0 auto; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 32px; }
.filter-btn { font: inherit; font-size: 15px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.filter-btn.active, .filter-btn:hover { background: var(--blue); border-color: var(--blue); color: var(--btn-ink); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.post-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .2s, border-color .2s; }
.post-card:hover { transform: translateY(-3px); border-color: var(--blue); }
.post-card-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.post-card-cat { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.post-card-title { font-size: 21px; font-weight: 500; line-height: 1.3; }
.post-card-desc { color: var(--muted); font-size: 16px; margin: 0; }
.post-card-meta { color: var(--muted); font-size: 14px; margin-top: auto; }

.blog-post-hero { position: relative; padding: 48px var(--gutter) 24px; max-width: 1100px; margin: 0 auto; }
.blog-post-hero img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 28px; }
.blog-post-hero-content { max-width: 900px; }
.blog-post-cat { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; background: var(--blue); color: var(--btn-ink); margin-bottom: 14px; }
.blog-post-hero-content h1 { font-size: 34px; line-height: 1.35; margin-bottom: 14px; }
.post-meta { font-size: 15px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.post-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }

.blog-post-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; max-width: 1100px; margin: 0 auto; padding: 16px var(--gutter) 72px; }
.blog-article { font-size: 18px; line-height: 1.65; }
.blog-article h2 { font-size: 26px; line-height: 1.35; margin: 2em 0 .6em; }
.blog-article h3 { font-size: 22px; color: var(--ink); margin: 1.6em 0 .5em; }
.blog-article p { margin-bottom: 1.2em; }
.blog-article ul, .blog-article ol { margin: 0 0 1.2em 1.4em; }
.blog-article li { font-size: 18px; margin-bottom: .5em; }
.blog-article img { border-radius: 12px; margin: 1.5em 0; }
.blog-article blockquote { margin: 1.5em 0; padding: 12px 20px; border-left: 4px solid var(--blue); color: var(--muted); }
.blog-sidebar { display: flex; flex-direction: column; gap: 24px; }
.sidebar-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--panel); }
.sidebar-head { font-weight: 500; font-size: 18px; margin-bottom: 10px; }
.sidebar-body { display: flex; flex-direction: column; }
.sidebar-link { display: block; padding: 8px 0; font-size: 16px; color: var(--muted); border-bottom: 1px solid var(--line); text-decoration: none; }
.sidebar-link:last-child { border-bottom: 0; }
.sidebar-link:hover { color: var(--blue); }
.sidebar-cta { border-radius: 12px; padding: 24px; text-align: center; background: var(--panel); border: 1px solid var(--blue); }
.sidebar-cta-title { font-weight: 500; font-size: 20px; margin-bottom: 8px; }
.sidebar-cta p { font-size: 16px; color: var(--muted); }
.sidebar-cta .btn { margin-top: 12px; }

/* --- 404 -------------------------------------------------------------------- */
.error-page { min-height: 60vh; display: flex; align-items: center; text-align: center; }


/* --- FAQ accordion (landing pages) ----------------------------------------
   Native <details> so it works with JS off and the answers stay in the DOM
   for Google's FAQ parsing.                                                 */
.faq { display: grid; gap: 12px; margin-top: 24px; }
.faq__item { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.faq__item summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { display: inline; margin: 0; font-size: 20px; color: var(--ink); }
.faq__item summary::after {
  content: ''; position: absolute; right: 22px; top: 26px; width: 10px; height: 10px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg); transition: transform .2s;
}
.faq__item[open] summary::after { transform: rotate(225deg); top: 30px; }
.faq__item summary:hover h3 { color: var(--blue); }
.faq__item summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.faq__body { padding: 0 20px 20px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.faq__body a { color: var(--blue); }

/* Landing-page rhythm: the narrow measure reads long at 18px, so lists and
   ordered steps get a little more air than the home page sections. */
.page-hero h1 { font-size: 34px; }
.page-hero .btn-row { justify-content: center; }
main ol { padding-left: 1.3em; margin: 0 0 1em; }
main ol li { margin-bottom: .6em; font-size: 17px; line-height: 1.6; }
main .container.narrow ul li { font-size: 17px; line-height: 1.6; margin-bottom: .5em; }
@media (max-width: 600px) { .page-hero h1 { font-size: 24px; } .faq__item summary h3 { font-size: 18px; } }


/* --- Jumbo mega nav (jumbomenu.md) -----------------------------------------
   Header and footer are injected by components.js from one nav config. The
   panel mechanics below are the house pattern; the exact values matter.     */
.site-header .container { gap: 20px; }
.nav__list { gap: 22px; }
.nav .has-mega { position: relative; }
.nav .mega-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer;
  font-size: 18px; letter-spacing: .03em; padding: 6px 0;
  border-bottom: 2px solid transparent;
  -webkit-appearance: none; appearance: none;
  transition: color .2s, border-color .2s;
}
.nav .mega-trigger:hover, .nav .has-mega:focus-within .mega-trigger { color: var(--blue); }
.nav .mega-trigger.is-active { border-bottom-color: var(--blue); }
.nav .mega-trigger .caret {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .3s;
}
.nav .has-mega:hover .mega-trigger .caret,
.nav .has-mega:focus-within .mega-trigger .caret { transform: rotate(-135deg) translateY(0); }

.mega {
  display: block;              /* it is a <span>: without this the mobile accordion silently fails */
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65); padding: 28px 30px;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
}
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .3s ease, transform .3s ease;
}
/* HOVER BRIDGE: required, or the 18px gap closes the panel on the way to it. */
.mega::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 22px; }

.mega-cols { display: flex; gap: 40px; }
.mega--compact .mega-cols > .mega-col { min-width: 215px; }
.mega--services .mega-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 24px; }
.mega--services { min-width: 560px; }
.mega-col--wide { grid-column: 1 / -1; }

.mega-col-title {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.mega-links { display: flex; flex-direction: column; }
.mega-col a {
  display: flex; align-items: center; gap: 11px;
  font-size: 16px; color: var(--ink); text-decoration: none;
  padding: 7px 0; white-space: normal;
  transition: color .22s, padding-left .22s;
}
.mega-col a:hover { color: var(--blue); padding-left: 5px; }
.mega-ic { width: 19px; height: 19px; flex-shrink: 0; color: var(--blue); display: inline-flex; transition: transform .22s; }
.mega-ic svg { width: 19px; height: 19px; }
.mega-col a:hover .mega-ic { transform: scale(1.12); }

.mega-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
}
.mega-cta-txt { display: flex; flex-direction: column; gap: 3px; }
.mega-cta-txt strong { font-size: 16px; color: var(--ink); font-weight: 500; }
.mega-cta-txt span { font-size: 14px; color: var(--muted); }
.mega-cta-btn { white-space: nowrap; font-size: 16px; min-height: 42px; padding: 8px 20px; }

.header-cta { font-size: 16px; min-height: 42px; padding: 8px 20px; white-space: nowrap; }
.nav__drawer-foot { display: none; }
.nav__tel { color: var(--ink); text-decoration: none; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 12px; }  /* tel: is a conversion, give it a real tap target */

/* --- Mega nav: mobile accordion ------------------------------------------- */
@media (max-width: 1000px) {
  .header-cta { display: none; }
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 60;
    background: #07080a;
    transform: translateX(100%); transition: transform .25s; overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px; }
  .nav__link, .nav .mega-trigger {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 20px;
  }
  .nav .mega-trigger .caret { margin-right: 6px; }
  /* The desktop open-state selector outranks base .mega: reset it or the panel
     is shoved off-screen by the inherited translateX(-50%). */
  .has-mega .mega, .has-mega.open .mega,
  .has-mega:hover .mega, .has-mega:focus-within .mega {
    position: static; transform: none; left: auto;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: 0; box-shadow: none; padding: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .has-mega.open .mega { max-height: 1600px; }
  .mega::before { display: none; }
  .mega-cols, .mega--services .mega-cols { display: flex; flex-direction: column; gap: 4px; }
  .mega--services { min-width: 0; }
  .mega-col--wide { grid-column: auto; }
  .mega-col { padding: 10px 0 4px; }
  .mega-col-title { font-size: 11px; margin-bottom: 4px; padding-bottom: 6px; }
  .mega-col a { min-height: 44px; padding: 8px 0 8px 12px; font-size: 17px; }
  .mega-cta { flex-direction: column; align-items: stretch; margin-top: 14px; padding-top: 14px; }
  .mega-cta-txt { display: none; }
  .mega-cta-btn { display: flex; width: 100%; min-height: 50px; justify-content: center; }
  .nav__drawer-foot {
    display: flex; flex-direction: column; gap: 16px; align-items: center;
    padding: 28px 24px 48px; border-top: 1px solid var(--line); margin-top: 8px;
  }
  .nav__drawer-foot .btn { width: 100%; }
}

/* Four footer columns now that the nav config feeds a "sell by toy line" list. */
.footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.footer-contact .ui-icon { display: inline-flex; vertical-align: -.2em; }
.footer-contact .ui-icon svg { width: 16px; height: 16px; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

/* --- Scroll reveal (fails safe: only .reveal hides; JS removes it) --------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .grid--auction { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  h1 { font-size: 30px; }
  h2 { font-size: 30px; }
  h3 { font-size: 26px; }
  .section { padding: 56px 0; }
  .split, .split--wide-left, .feature { grid-template-columns: 1fr; gap: 28px; }
  .photo-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .shop-row { grid-template-columns: 1fr; }
  .shop-row img { max-width: 320px; aspect-ratio: 4 / 3; }
  .blog-post-wrap { grid-template-columns: 1fr; }
  .contact-info { grid-template-columns: 1fr; }
  .form-grid-2, .checks, .checks-group .checks { grid-template-columns: 1fr; }
  .form--steps { padding: 20px; }
  .steps__nav { flex-direction: column-reverse; }
  .steps__nav .btn { width: 100%; }
  .panel { padding: 26px; }
  .popup__inner { padding: 32px 22px 24px; }
}
@media (max-width: 1000px) {
  :root { --header-h: 76px; }
  .logo img { width: 130px; }
  .hero { min-height: 560px; }
  .hero__media::after { background: rgba(0, 0, 0, .6); }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  h1 { font-size: 24px; }            /* live m-font-size-24 */
  h2 { font-size: 24px; }
  h3 { font-size: 22px; }
  .strip__item { flex-basis: 200px; }
  .strip__btn { display: none; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn, .form > .btn { width: 100%; }
  .feature { margin-bottom: 40px; }
}

/* Legal pages (privacy, terms) */
.legal-page h1 { margin-bottom: .25em; }
.legal-page h2 { margin-top: 1.8em; }
.legal-page h3 { margin-top: 1.2em; font-size: 1.1rem; }
.legal-page ul, .legal-page ol { padding-left: 1.4em; margin: .6em 0 1em; }
.legal-page li { margin: .35em 0; }