/* ============================================================
   Toy Town Store — storefront design system
   Mobile-first. Premium children's-brand palette, used generously
   as section/card fills (not just accent borders), with a bento-style
   category system and a signature Smart Minds / Strong Bodies split.
   ============================================================ */

:root{
  --coral:#FF5C7C;         /* accent — creative activities, decorative highlights */
  --coral-dark:#E11D48;
  --orange:#FF7A00;        /* CTAs, outdoor play, promotions */
  --teal:#2563EB;          /* primary brand blue — nav, buttons, "Smart Minds" */
  --teal-dark:#1D4ED8;
  --sky:#38BDF8;            /* play, open spaces, soft backgrounds */
  --yellow:#FFD60A;         /* happiness, highlights, selected states */
  --green:#20C978;          /* physical development, movement, "Strong Bodies" */
  --lavender:#7C3AED;       /* creativity, imagination, premium sections */
  --navy:#172554;           /* deep ink — text */
  --ink:#172554;
  --muted:#5B5A78;
  --bg:#FFF4D6;             /* warm cream background */
  --bg-blue:#E0F2FE;        /* light blue section/card background */
  --bg-yellow:#FFF3B0;      /* soft yellow section/card background */
  --bg-coral:#FFE4E6;       /* soft coral section/card background */
  --bg-green:#DCFCE7;       /* soft green section/card background */
  --bg-lavender:#F3E8FF;    /* soft purple section/card background */
  --bg-peach:#FFEDD5;       /* light orange section/card background */
  --card:#FFFDF9;           /* warm near-white — not pure #FFFFFF — for small readability surfaces */
  --border:#F0DFC0;
  --success:#22C55E;
  --danger:#DC2626;
  --warn:#D97706;
  --radius-sm:8px;
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 2px 8px rgba(23,37,84,.07);
  --shadow:0 8px 24px rgba(23,37,84,.12);
  --shadow-lg:0 20px 48px rgba(23,37,84,.18);
  --container:1280px;
  --font-head:'Baloo 2', 'Nunito', sans-serif;
  --font-body:'Nunito', system-ui, sans-serif;
  /* Type scale — every font-size on the page should resolve to one of these. */
  --fs-2xs:.7rem;   /* count pills, tiny badges */
  --fs-xs:.8rem;    /* labels, chips, eyebrows — never below 12px */
  --fs-sm:.85rem;   /* secondary text, small buttons */
  --fs-base:1rem;   /* body copy, inputs */
  --fs-md:1.05rem;  /* lead paragraphs */
  --fs-lg:1.15rem;  /* h3 */
  --muted-on-dark:#C9D0E0; /* body text on the navy footer */
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-head);margin:0 0 .4em;line-height:1.15;color:var(--navy);letter-spacing:-.01em;}
h1{font-size:2rem;font-weight:800;}
h2{font-size:1.5rem;font-weight:700;}
h3{font-size:var(--fs-lg);font-weight:700;}
h4{font-size:1rem;font-weight:700;}
p{margin:0 0 1em;color:var(--muted);line-height:1.6;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:1rem;}

.container{max-width:var(--container);margin:0 auto;padding:0 20px;}

/* ---------- Global keyframes (used sparingly — micro-interactions, not bling) ---------- */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-12px) rotate(3deg);}}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:999px;border:none;font-weight:800;
  font-size:var(--fs-base);cursor:pointer;transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-3px);}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 6px 18px rgba(251,113,133,.35);}
.btn-primary:hover{background:var(--coral-dark);box-shadow:0 10px 24px rgba(225,29,72,.4);}
.btn-secondary{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.3);}
.btn-secondary:hover{background:var(--teal-dark);}
.btn-outline{background:transparent;color:var(--navy);border:2px solid var(--border);}
.btn-outline:hover{border-color:var(--coral);color:var(--coral);}
.btn-block{width:100%;}
.btn-sm{padding:8px 16px;font-size:var(--fs-sm);}
.btn[disabled]{background:var(--border);color:var(--muted);box-shadow:none;opacity:1;cursor:not-allowed;}
.btn[disabled]:hover{transform:none;background:var(--border);}
.btn-white{background:#fff;color:var(--navy);}
.btn-white:hover{background:var(--navy);color:#fff;}

/* ---------- Announcement bar ---------- */
.announce-bar{background:linear-gradient(90deg,var(--teal),var(--teal-dark));padding:9px 0;}
.announce-inner{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 20px;overflow-x:auto;white-space:nowrap;
}
.announce-pill{
  background:rgba(255,255,255,.16);color:#fff;font-size:var(--fs-xs);font-weight:700;
  padding:5px 14px;border-radius:999px;flex-shrink:0;
}
.announce-inner .announce-pill:nth-child(2){display:none;}
.announce-inner a.announce-pill{background:var(--yellow);color:var(--navy);}
@media(min-width:760px){
  .announce-inner{justify-content:center;}
  .announce-inner .announce-pill:nth-child(2){display:inline-block;}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:106;background:rgba(255,247,230,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
/* backdrop-filter above creates a new stacking context, which traps the mobile
   drawer's z-index:110 *inside* the header's own stacking context — without
   this, .nav-backdrop (z-index:105, a sibling of <header> at the body level)
   would render above the whole header including the open drawer, so every tap
   on a drawer link would land on the backdrop instead and silently do nothing.
   106 just needs to clear .nav-backdrop's 105. */
.header-inner{display:flex;align-items:center;gap:16px;padding:12px 20px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:var(--navy);margin-right:auto;flex-shrink:0;}
.brand-mark{font-size:1.6rem;line-height:1;display:inline-block;}
.brand-logo{height:26px;width:auto;max-width:150px;object-fit:contain;display:block;flex-shrink:0;}
.brand-name{white-space:nowrap;}
/* The main site header gets a larger, more prominent mark + wordmark than the
   shared default above — the primary, most-viewed brand placement. Footer/admin
   keep the smaller default size, since this scale would overwhelm those more
   compact layouts. align-items:center on .header-inner keeps the nav/search/
   cart vertically centered regardless of how tall the logo is. */
.site-header .brand{font-size:27px;gap:14px;}
.site-header .brand-mark{font-size:4.2rem;}
.site-header .brand-logo{height:76px;max-width:210px;}
@media(max-width:768px){
  .site-header .brand{font-size:24px;gap:10px;}
  .site-header .brand-mark{font-size:3.4rem;}
  .site-header .brand-logo{height:60px;max-width:190px;}
}
.main-nav{display:none;align-items:center;gap:20px;font-weight:700;}
.main-nav a{padding:6px 0;position:relative;color:var(--navy);white-space:nowrap;}
.main-nav a:hover{color:var(--coral);}
.main-nav a.active{color:var(--teal);}
.main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--teal);border-radius:2px;}
.nav-dropdown{position:relative;cursor:pointer;font-weight:700;white-space:nowrap;}
.nav-dropdown .chev{font-size:.7em;}
.dropdown-panel{
  /* top:100% (not "100% + gap") so the panel's own box touches the trigger with
     zero dead space — the old 14px gap sat outside any hoverable box, so moving
     the mouse from the trigger toward the panel crossed a dead zone and lost
     :hover before ever reaching it. The same visual offset is recreated with
     padding-top instead, which — unlike a gap or margin — is still part of the
     panel's hoverable box. */
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:24px 10px 10px;min-width:220px;display:grid;gap:2px;
  opacity:0;visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  max-height:60vh;overflow-y:auto;
}
.nav-dropdown:hover .dropdown-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown-panel a{padding:8px 12px;border-radius:10px;font-weight:600;}
.dropdown-panel a:hover{background:var(--bg);color:var(--coral);}

.dropdown-panel-visual{grid-template-columns:repeat(3,1fr);gap:6px;min-width:380px;max-width:460px;}
.dropdown-cat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;text-align:center;font-size:var(--fs-xs);}
.dropdown-cat-thumb{
  width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.dropdown-cat-thumb img{width:100%;height:100%;object-fit:cover;}

/* Mega menu — categories grouped by play world */
.dropdown-mega{grid-template-columns:repeat(3,1fr);gap:16px;min-width:640px;max-width:760px;padding:16px;}
.dropdown-mega-group{border-left:3px solid var(--group-accent,var(--teal));padding:2px 0 4px 12px;}
.dropdown-mega-head{
  display:flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:800;
  color:var(--group-accent,var(--teal));font-size:var(--fs-sm);margin-bottom:8px;
}
.dropdown-mega-cats{display:flex;flex-direction:column;gap:1px;}
.dropdown-mega-cats a{font-size:var(--fs-xs);padding:3px 0;color:var(--navy);font-weight:600;border-radius:0;}
.dropdown-mega-cats a:hover{color:var(--group-accent,var(--teal));background:transparent;}
@media(max-width:960px){.dropdown-mega{min-width:0;max-width:none;}}
body.nav-open .dropdown-mega{grid-template-columns:1fr;}

.header-actions{display:flex;align-items:center;gap:14px;}
.search-form{display:none;align-items:center;background:#fff;border:2px solid var(--border);border-radius:999px;padding:6px 6px 6px 18px;transition:border-color .15s ease,box-shadow .15s ease;}
.search-form:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-form input{border:none;outline:none;background:transparent;width:220px;font-size:var(--fs-base);}
@media(min-width:1180px){.search-form input{width:280px;}}
.search-form button{background:none;border:none;font-size:1rem;padding:6px 10px;}
.cart-link{position:relative;font-size:1.3rem;transition:transform .2s ease;}
.cart-link:hover{transform:scale(1.15) rotate(-8deg);}
.cart-badge{
  position:absolute;top:-8px;right:-10px;background:var(--coral);color:#fff;
  font-size:var(--fs-2xs);font-weight:800;border-radius:999px;min-width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  box-shadow:0 2px 8px rgba(251,113,133,.5);
}
.nav-toggle{background:none;border:none;font-size:1.5rem;color:var(--navy);}

@media(min-width:960px){
  .main-nav{display:flex;}
  .search-form{display:flex;}
  .nav-toggle{display:none;}
}

/* Between the mobile drawer breakpoint and full desktop width, the header has
   logo + 7 nav links + search + cart all in one row. Measured directly (real
   overflow only starts below ~1100px — above that, the row fits comfortably
   even with a normal-sized nav font, since .container's own 1280px cap means
   1100px+ has plenty of margin regardless of viewport). Two sub-tiers: a
   genuinely cramped one (960–1099, phones-in-landscape/small tablets) and a
   comfortable one (1100–1919) that no longer needs to be squeezed at all. */
@media(min-width:1160px) and (max-width:1919px){
  .site-header .brand{font-size:18px;gap:8px;}
  .site-header .brand-mark{font-size:2.6rem;}
  .site-header .brand-logo{height:40px;max-width:120px;}
  .main-nav{gap:8px;font-size:.85rem;}
  .search-form input{width:130px;}
}
@media(min-width:960px) and (max-width:1159px){
  .site-header .brand{font-size:16px;gap:6px;}
  .site-header .brand-mark{font-size:2.3rem;}
  .site-header .brand-logo{height:34px;max-width:100px;}
  .main-nav{gap:5px;font-size:.66rem;}
  .search-form input{width:55px;}
}

/* Mobile drawer */
body.nav-open .main-nav{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  position:fixed;top:0;right:0;height:100vh;width:78vw;max-width:320px;
  background:#fff;padding:80px 24px 24px;box-shadow:var(--shadow-lg);
  z-index:110;animation:slideIn .25s ease;overflow-y:auto;
}
body.nav-open .main-nav a,
body.nav-open .nav-dropdown{width:100%;padding:12px 0;border-bottom:1px solid var(--border);}
body.nav-open .dropdown-panel{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;padding:4px 0 0 12px;display:none;}
body.nav-open .nav-dropdown.open .dropdown-panel{display:grid;}
body.nav-open .dropdown-panel-visual{grid-template-columns:repeat(2,1fr);min-width:0;max-width:none;}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(31,42,68,.4);z-index:105;}
body.nav-open .nav-backdrop{display:block;}

/* ---------- Hero slider ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.hero-slider{position:relative;padding-bottom:20px;}
.hero-slide-stage{position:relative;overflow:hidden;min-height:560px;}
@media(min-width:860px){.hero-slide-stage{min-height:600px;}}

.hero-slide{
  position:absolute;inset:0;display:flex;align-items:center;padding:40px 0 60px;
  background:linear-gradient(155deg, var(--slide-tint) 0%, var(--bg) 55%, var(--bg-blue) 100%);
  opacity:0;visibility:hidden;transition:opacity .5s ease;
}
.hero-slide.active{position:relative;opacity:1;visibility:visible;}

.hero-grid{display:grid;gap:36px;align-items:center;width:100%;}
.hero-eyebrow{
  display:inline-block;color:var(--slide-accent);font-weight:800;letter-spacing:.06em;
  font-size:var(--fs-xs);text-transform:uppercase;margin-bottom:14px;
  background:#fff;padding:6px 14px;border-radius:999px;box-shadow:var(--shadow-sm);
}
.hero-heading{font-size:clamp(2.25rem, 4vw + 1rem, 5rem);line-height:1.05;margin:0 0 .4em;}
.hero-support{max-width:46ch;font-size:var(--fs-md);}
.hero-actions{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap;}

/* ---------- "Proudly Presented By" maker banner (homepage, below header) ----------
   Dark navy panel — the same "premium contrast" surface already used for the
   Smart Minds / Strong Bodies panels — instead of a pastel tint that competed
   with the hero slides right underneath it. */
.maker-banner{background:var(--navy);text-align:center;padding-top:40px;padding-bottom:40px;overflow:hidden;}
.maker-banner .hero-eyebrow{color:var(--navy);background:var(--yellow);}
.maker-banner-name{
  font-family:var(--font-head);font-weight:800;font-size:clamp(1.85rem,1.8vw + 1.35rem,2.9rem);
  margin:6px 0 10px;letter-spacing:-.01em;color:#fff;
  background:linear-gradient(100deg,#fff 38%,var(--yellow) 50%,#fff 62%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:makerPopIn .9s cubic-bezier(.34,1.56,.64,1) both, makerShimmer 2.8s ease-in-out infinite 1s;
}
.maker-banner-sub{color:rgba(255,255,255,.75);font-weight:600;max-width:60ch;margin:0 auto;font-size:var(--fs-md);}
@keyframes makerPopIn{
  0%{opacity:0;transform:scale(.7) translateY(14px);}
  60%{opacity:1;transform:scale(1.06) translateY(-2px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes makerShimmer{
  0%{background-position:120% 0;}
  100%{background-position:-20% 0;}
}
@media(prefers-reduced-motion:reduce){.maker-banner-name{animation:none;-webkit-text-fill-color:#fff;}}

/* ---------- Floating WhatsApp button (site-wide, every page) ---------- */
.whatsapp-float{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform .2s ease,box-shadow .2s ease;
}
.whatsapp-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.3);}
@media(max-width:640px){.whatsapp-float{right:16px;bottom:16px;width:52px;height:52px;}}

.instagram-float{
  position:fixed;right:24px;bottom:94px;z-index:90;
  width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform .2s ease,box-shadow .2s ease;
}
.instagram-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.3);}
@media(max-width:640px){.instagram-float{right:16px;bottom:78px;width:52px;height:52px;}}

/* ---------- "Our Clients" logo strip (site-wide, above the footer) ---------- */
.clients-strip{background:#fff;padding:40px 0 44px;text-align:center;overflow:hidden;}
.clients-strip-heading{font-size:clamp(1.5rem,1.5vw + 1rem,2.2rem);margin-bottom:24px;}
.clients-marquee{overflow:hidden;}
.clients-marquee-track{display:flex;width:max-content;align-items:center;animation:marqueeScroll 30s linear infinite;}
.clients-logo{display:inline-flex;align-items:center;justify-content:center;padding:0 32px;flex-shrink:0;}
.clients-logo img{height:56px;width:auto;max-width:160px;object-fit:contain;transition:transform .2s ease;}
.clients-logo img:hover{transform:scale(1.08);}
@media(prefers-reduced-motion:reduce){.clients-marquee-track{animation:none;overflow-x:auto;}}

/* ---------- "Our Esteemed Customers" full listing page ---------- */
.clients-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(min-width:640px){.clients-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:960px){.clients-grid{grid-template-columns:repeat(4,1fr);}}
.clients-grid-item{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.clients-grid-item img{height:64px;width:100%;object-fit:contain;}
.clients-grid-item span{font-size:var(--fs-sm);font-weight:700;color:var(--navy);}

/* ---------- "Projects in Major Cities" page ---------- */
.city-project-group{margin-bottom:48px;}
.city-project-heading{
  font-family:var(--font-head);font-weight:800;color:var(--navy);
  font-size:var(--fs-lg);margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--border);
}
.city-project-grid{display:grid;grid-template-columns:1fr;gap:28px;}
@media(min-width:640px){.city-project-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1100px){.city-project-grid{grid-template-columns:repeat(3,1fr);}}
.city-project-card{
  background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  overflow:hidden;display:flex;flex-direction:column;
}
.city-project-photo{
  position:relative;width:100%;min-height:340px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:14px;
}
.city-project-photo img{width:100%;height:100%;max-height:480px;object-fit:contain;}
.city-project-zoomable{cursor:zoom-in;}
.city-project-card span{padding:14px 18px 18px;font-weight:700;color:var(--navy);font-size:var(--fs-md);text-align:center;}
.hero-actions .btn-primary{background:var(--slide-accent);box-shadow:0 10px 24px color-mix(in srgb, var(--slide-accent) 40%, transparent);}
.hero-actions .btn-primary:hover{background:color-mix(in srgb, var(--slide-accent) 80%, black);}
.hero-actions .btn-outline{background:#fff;}

.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:260px;}
.hero-shape{position:absolute;border-radius:50%;opacity:.55;z-index:0;}
.hero-shape-1{
  width:210px;height:210px;top:-30px;left:-10px;animation:floaty 6s ease-in-out infinite;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--slide-accent) 35%, white) 0%, var(--slide-accent) 55%, color-mix(in srgb, var(--slide-accent) 70%, black) 100%);
  box-shadow:0 16px 30px rgba(0,0,0,.16);
}
.hero-shape-2{width:130px;height:130px;background:color-mix(in srgb, var(--slide-accent) 70%, white);bottom:-10px;right:0;animation:floaty 7s ease-in-out infinite reverse;}
.hero-shape-3{width:60px;height:60px;background:var(--slide-accent);top:40%;right:-14px;opacity:.4;animation:floaty 5s ease-in-out infinite;}
.hero-shape-cube{
  position:absolute;width:52px;height:52px;top:8%;left:32%;z-index:0;border-radius:14px;
  background:var(--slide-accent);transform:rotate(18deg);
  box-shadow:inset -6px -6px 0 rgba(0,0,0,.14), 0 12px 22px rgba(0,0,0,.16);
  animation:floaty 5.5s ease-in-out infinite reverse;
}
@media(max-width:640px){.hero-shape-3,.hero-shape-cube{display:none;}}

.hero-photo-wrap{position:relative;width:100%;max-width:520px;z-index:1;}
.hero-photo{
  width:100%;aspect-ratio:6/5;object-fit:cover;border-radius:32px;
  box-shadow:var(--shadow-lg);border:6px solid #fff;
  background:var(--bg-blue);
}
.hero-badge{
  position:absolute;left:20px;bottom:-18px;background:#fff;border-radius:16px;
  padding:10px 16px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:var(--fs-sm);color:var(--navy);
}
.hero-badge .hb-icon{
  width:34px;height:34px;border-radius:50%;background:var(--slide-accent);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;
}

@media(min-width:860px){
  .hero-grid{grid-template-columns:1fr 1.05fr;}
}

/* Numbered world-selector rail */
.hero-rail{
  position:relative;z-index:5;display:flex;gap:4px;overflow-x:auto;
  background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);
  padding:8px;margin-top:16px;
}
@media(min-width:860px){.hero-rail{margin-top:-30px;}}
.hero-rail-item{
  flex:1;min-width:130px;display:flex;flex-direction:column;gap:4px;
  padding:10px 14px;border-radius:14px;border:none;background:transparent;
  text-align:left;cursor:pointer;transition:background .2s ease;font-family:inherit;
}
.hero-rail-item:hover{background:var(--bg);}
.hero-rail-item.active{background:color-mix(in srgb, var(--rail-accent) 14%, white);}
.hero-rail-num{font-family:var(--font-head);font-weight:800;font-size:var(--fs-xs);color:var(--rail-accent);}
.hero-rail-label{font-weight:800;font-size:var(--fs-sm);color:var(--navy);white-space:nowrap;}
.hero-rail-track{display:block;height:3px;background:var(--border);border-radius:999px;overflow:hidden;margin-top:2px;}
.hero-rail-fill{display:block;height:100%;width:0;background:var(--rail-accent);}
.hero-rail-item.active .hero-rail-fill{animation:heroProgress 6s linear forwards;}
@keyframes heroProgress{from{width:0;}to{width:100%;}}
@media(prefers-reduced-motion:reduce){.hero-rail-item.active .hero-rail-fill{animation:none;width:100%;}}

/* ---------- Section headings ---------- */
.section{padding:64px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:32px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.75rem, 2vw + 1.25rem, 3rem);}
.section-head p{margin:0;font-size:var(--fs-md);}

/* ---------- Category discovery chips ---------- */
.cat-chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.cat-chip{
  padding:9px 18px;border-radius:999px;background:#fff;border:2px solid var(--border);
  font-weight:700;font-size:var(--fs-sm);color:var(--navy);transition:all .2s ease;
}
.cat-chip:hover,.cat-chip.active{border-color:var(--teal);color:var(--teal);background:var(--bg-blue);}

.cat-card.chip-pulse{animation:cardPulse .7s ease 2;}
@keyframes cardPulse{0%,100%{box-shadow:var(--shadow-sm);}50%{box-shadow:0 0 0 10px color-mix(in srgb, var(--cat-accent) 30%, transparent);}}
@media(prefers-reduced-motion:reduce){.cat-card.chip-pulse{animation:none;outline:3px solid var(--cat-accent);outline-offset:2px;}}

/* ---------- Category bento grid ---------- */
.cat-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;grid-auto-flow:dense;}
@media(min-width:640px){.cat-bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(160px,auto);}}

.cat-card{
  --cat-accent:var(--teal);--cat-tint:var(--bg-blue);
  display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--cat-tint);box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease;position:relative;
}
.cat-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 36px -12px color-mix(in srgb, var(--cat-accent) 50%, transparent);
}
.cat-card:hover .cat-thumb img{transform:scale(1.08);}
.cat-card:hover .cat-arrow{transform:translateX(5px);}
.cat-card:hover .cat-blob{transform:scale(1.15);opacity:.5;}

.cat-blob{
  position:absolute;width:130px;height:130px;border-radius:38% 62% 63% 37%/41% 44% 56% 59%;
  background:var(--cat-accent);opacity:.28;top:-30px;right:-30px;z-index:0;
  filter:blur(2px);transition:transform .4s ease, opacity .4s ease;
}

.cat-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;flex-shrink:0;z-index:1;}
.cat-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.cat-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.6rem;background:#fff;}
.cat-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column;gap:6px;position:relative;z-index:1;}
.cat-top-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cat-name{font-family:var(--font-head);font-weight:800;font-size:var(--fs-md);color:var(--navy);}
.cat-count{font-size:var(--fs-2xs);font-weight:800;color:var(--navy);background:#fff;padding:3px 9px;border-radius:999px;flex-shrink:0;white-space:nowrap;}
.cat-desc{font-size:var(--fs-sm);color:var(--muted);margin:0;flex:1;}
.cat-tag{
  display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;color:var(--navy);
  background:#fff;padding:4px 10px;border-radius:999px;width:fit-content;
}
.cat-arrow-btn{
  margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:var(--fs-sm);
  color:#fff;background:var(--cat-accent);padding:9px 16px;border-radius:999px;width:fit-content;
}
.cat-arrow{transition:transform .2s ease;}

/* Featured (bento hero) tile — spans 2x2 on tablet+ */
.cat-card.featured{grid-column:span 2;grid-row:span 1;}
@media(min-width:640px){
  .cat-card.featured{grid-column:span 2;grid-row:span 2;}
  .cat-card.featured .cat-thumb{aspect-ratio:auto;flex:1;}
  .cat-card.featured .cat-body{padding:22px 26px 26px;}
  .cat-card.featured .cat-name{font-size:1.5rem;}
  .cat-card.featured .cat-desc{font-size:var(--fs-md);}
}

/* ---------- Play Worlds — asymmetric editorial grid ---------- */
.world-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;grid-auto-flow:dense;}
@media(min-width:760px){.world-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(180px,auto);}}
.world-grid .cat-card{grid-column:span 2;}
.world-grid .cat-card .cat-world-icon{
  position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:var(--shadow-sm);
}
@media(min-width:760px){
  .world-grid .cat-card.world-lg{grid-column:span 2;grid-row:span 2;}
  .world-grid .cat-card.world-lg .cat-thumb{aspect-ratio:auto;flex:1;}
  .world-grid .cat-card.world-lg .cat-body{padding:22px 26px 26px;}
  .world-grid .cat-card.world-lg .cat-name{font-size:1.5rem;}
  .world-grid .cat-card.world-sm{grid-column:span 1;grid-row:span 1;}
  .world-grid .cat-card.world-wide{
    grid-column:span 4;display:flex;flex-direction:row;align-items:stretch;
  }
  /* A fixed height here (not aspect-ratio + stretch) — a percentage height on
     the <img> can't reliably resolve against a stretched flex item with no
     explicit height of its own, so the image was falling back to its natural
     size instead of filling the row, leaving the row taller than either side
     actually needed (hence the dead space on both the image and text side). */
  .world-grid .cat-card.world-wide .cat-thumb{aspect-ratio:auto;flex:0 0 42%;height:320px;}
  .world-grid .cat-card.world-wide .cat-body{flex:1;justify-content:center;}
}

/* ---------- Scrolling brand marquee ---------- */
.marquee{overflow:hidden;background:var(--yellow);padding:16px 0;}
.marquee-track{display:flex;width:max-content;animation:marqueeScroll 24s linear infinite;}
.marquee-track span{
  display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:800;
  font-size:clamp(1rem,1.5vw,1.35rem);color:var(--navy);padding:0 24px;white-space:nowrap;
}
.marquee-track span::after{content:"●";margin-left:24px;opacity:.45;font-size:.7em;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;overflow-x:auto;}}

/* ---------- Smart Minds / Strong Bodies — one connected ecosystem, not two boxes ---------- */
.smart-strong-section{position:relative;overflow:hidden;}
.smart-strong{display:grid;grid-template-columns:1fr;}
@media(min-width:860px){.smart-strong{grid-template-columns:1fr 1fr;min-height:580px;}}

.ss-panel{
  padding:56px 36px;position:relative;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;justify-content:center;
}
.ss-content{position:relative;z-index:1;}

/* Layered backgrounds: diagonal identity color + a soft top-right highlight for
   depth + a navy vignette in the far corner — no more flat single-gradient panel. */
.ss-panel.ss-minds{
  --panel-tint:var(--bg-blue);
  background:
    radial-gradient(circle at 82% 6%, rgba(255,255,255,.14) 0%, transparent 42%),
    radial-gradient(circle at 4% 96%, rgba(23,37,84,.32) 0%, transparent 55%),
    linear-gradient(160deg, var(--teal) 0%, var(--lavender) 100%);
}
.ss-panel.ss-bodies{
  --panel-tint:var(--bg-green);
  background:
    radial-gradient(circle at 82% 6%, rgba(255,255,255,.16) 0%, transparent 42%),
    radial-gradient(circle at 4% 96%, rgba(23,37,84,.28) 0%, transparent 55%),
    linear-gradient(160deg, var(--green) 0%, var(--orange) 100%);
}
@media(min-width:860px){
  /* At the seam only, let a hint of the opposite world's color bleed in —
     a soft transition instead of a hard vertical line between two boxes. */
  .ss-panel.ss-minds{
    background:
      linear-gradient(to right, transparent 90%, rgba(32,201,120,.22) 100%),
      radial-gradient(circle at 82% 6%, rgba(255,255,255,.14) 0%, transparent 42%),
      radial-gradient(circle at 4% 96%, rgba(23,37,84,.32) 0%, transparent 55%),
      linear-gradient(160deg, var(--teal) 0%, var(--lavender) 100%);
  }
  .ss-panel.ss-bodies{
    background:
      linear-gradient(to left, transparent 90%, rgba(37,99,235,.20) 100%),
      radial-gradient(circle at 82% 6%, rgba(255,255,255,.16) 0%, transparent 42%),
      radial-gradient(circle at 4% 96%, rgba(23,37,84,.28) 0%, transparent 55%),
      linear-gradient(160deg, var(--green) 0%, var(--orange) 100%);
  }
}

/* Extremely subtle abstract shapes behind the text — building-block/puzzle motif
   for Smart Minds, ring/motion motif for Strong Bodies. Never competes with copy. */
.ss-panel.ss-minds::before{
  content:"";position:absolute;top:8%;right:6%;width:110px;height:110px;
  background:rgba(255,255,255,.07);border-radius:26px;transform:rotate(16deg);z-index:0;
}
.ss-panel.ss-minds::after{
  content:"";position:absolute;bottom:10%;right:22%;width:38px;height:38px;
  background:rgba(255,255,255,.10);border-radius:10px;transform:rotate(-12deg);z-index:0;
}
.ss-panel.ss-bodies::before{
  content:"";position:absolute;top:6%;right:8%;width:150px;height:150px;
  border:16px solid rgba(255,255,255,.08);border-radius:50%;z-index:0;
}
.ss-panel.ss-bodies::after{
  content:"";position:absolute;bottom:8%;right:24%;width:54px;height:54px;
  background:rgba(255,255,255,.09);border-radius:50% 50% 50% 4px;transform:rotate(-24deg);z-index:0;
}

.ss-panel h3{font-size:clamp(1.85rem,1.8vw + 1.35rem,2.9rem);font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:-.01em;}
.ss-panel p{max-width:44ch;color:rgba(255,255,255,.88);}
.ss-icon-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.ss-icon-pill{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);
  padding:6px 13px;border-radius:999px;font-size:var(--fs-xs);font-weight:700;color:#fff;
}

/* Category cards — premium navigation cards, not generic pill buttons */
.ss-chip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px;}
@media(min-width:520px){.ss-chip-grid{grid-template-columns:repeat(3,1fr);}}
.ss-chip{
  display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;
  padding:8px 14px 8px 8px;font-size:var(--fs-xs);font-weight:700;color:var(--navy);
  min-height:56px;box-shadow:0 4px 14px rgba(23,37,84,.16);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ss-chip:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(23,37,84,.24);}
.ss-chip-icon{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:var(--panel-tint);display:flex;align-items:center;justify-content:center;
}
.ss-chip-icon img{width:100%;height:100%;object-fit:cover;}
.ss-chip span:last-child{line-height:1.25;}

/* CTA — premium, same design system, strong contrast, hover-ready */
.ss-cta{
  margin-top:28px;padding:15px 30px;font-size:var(--fs-base);
  box-shadow:0 10px 26px rgba(0,0,0,.2);
}
.ss-cta:hover{box-shadow:0 16px 34px rgba(0,0,0,.28);}
.ss-cta-arrow{display:inline-block;transition:transform .2s ease;}
.ss-cta:hover .ss-cta-arrow{transform:translateX(4px);}

/* Center connector — the bridge between the two worlds, not a decorative star.
   In flow (stacked, overlapping both panels) on mobile; pinned to the seam on desktop. */
.ss-connector{position:relative;z-index:3;width:108px;height:108px;margin:-26px auto;display:block;}
@media(min-width:860px){
  .ss-connector{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:136px;height:136px;margin:0;
  }
}
.ss-connector svg{width:100%;height:100%;filter:drop-shadow(0 10px 22px rgba(23,37,84,.3));}

/* ---------- Product grid & cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media(min-width:640px){.product-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:960px){.product-grid{grid-template-columns:repeat(4,1fr);}}

.product-card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
.product-thumb{position:relative;aspect-ratio:1/1;background:#F3F1EB;overflow:hidden;}
.product-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.product-thumb model-viewer{display:block;width:100%;height:100%;--poster-color:transparent;}
.product-card:hover .product-thumb img{transform:scale(1.07);}
.badge{position:absolute;top:10px;left:10px;background:var(--coral);color:#fff;font-size:var(--fs-xs);font-weight:800;padding:4px 10px;border-radius:999px;box-shadow:0 3px 10px rgba(251,113,133,.4);}
.badge-out{background:var(--muted);}
.badge-3d{left:auto;right:10px;background:var(--teal);}
.product-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.product-cat{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--teal-dark);font-weight:800;}
.age-pill{display:inline-flex;align-items:center;gap:4px;background:var(--bg);color:var(--navy);font-size:var(--fs-2xs);font-weight:700;padding:3px 9px;border-radius:999px;width:fit-content;}
.product-name{font-weight:700;font-size:var(--fs-base);color:var(--navy);line-height:1.3;}
.price-row{margin-top:auto;display:flex;align-items:baseline;gap:8px;}
.price-now{font-weight:800;color:var(--coral-dark);font-size:var(--fs-md);}
.price-old{text-decoration:line-through;color:var(--muted);font-size:var(--fs-sm);}
.product-card .btn{margin:0 14px 14px;}

/* ---------- Filters bar (shop page) ---------- */
.shop-layout{display:grid;gap:24px;}
@media(min-width:860px){.shop-layout{grid-template-columns:240px 1fr;align-items:start;}}
.filter-panel{background:var(--bg-lavender);border-radius:var(--radius-lg);padding:20px;}
.filter-panel h4{font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:12px;}
.filter-panel a{display:block;padding:9px 10px;border-radius:10px;font-weight:600;color:var(--navy);transition:background .15s ease,color .15s ease;}
.filter-panel a.active,.filter-panel a:hover{color:var(--lavender);background:#fff;}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.toolbar select{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:#fff;}
.empty-state{text-align:center;padding:60px 20px;color:var(--muted);}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:32px;flex-wrap:wrap;}
.pagination a,.pagination span{
  min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:#fff;border:1px solid var(--border);font-weight:700;
}
.pagination a:hover{border-color:var(--coral);color:var(--coral);}
.pagination .current{background:var(--coral);color:#fff;border-color:var(--coral);}

/* ---------- Product detail ---------- */
.product-detail{display:grid;gap:32px;}
@media(min-width:900px){.product-detail{grid-template-columns:1fr 1fr;}}
.gallery-main{
  position:relative;border-radius:var(--radius);overflow:hidden;background:#F3F1EB;
  aspect-ratio:1/1;cursor:zoom-in;
}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-hint{position:absolute;bottom:12px;right:12px;background:rgba(31,42,68,.7);color:#fff;font-size:.75rem;padding:5px 12px;border-radius:999px;}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;}
.gallery-thumbs img{width:72px;height:72px;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent;flex-shrink:0;}
.gallery-thumbs img.active{border-color:var(--coral);}

.gallery-tabs{display:flex;gap:8px;margin-bottom:12px;}
.gallery-tab{
  padding:9px 18px;border-radius:999px;border:1px solid var(--border);background:#fff;
  font-weight:700;font-size:.85rem;color:var(--muted);transition:all .15s ease;
}
.gallery-tab.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.model-view-box{
  position:relative;border-radius:var(--radius);overflow:hidden;background:#F3F1EB;
  aspect-ratio:1/1;
}
.model-view-box model-viewer{display:block;}
.model-view-box .gallery-hint{position:absolute;bottom:12px;right:12px;}

.detail-info h1{font-size:1.6rem;}
.detail-price{display:flex;align-items:baseline;gap:12px;margin:14px 0;}
.detail-price .price-now{font-size:1.9rem;}
.stock-pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;padding:6px 14px;border-radius:999px;background:#E9F8F0;color:var(--success);width:fit-content;}
.stock-pill.out{background:#FDECEA;color:var(--danger);}
.qty-row{display:flex;align-items:center;gap:14px;margin:22px 0;}
.qty-stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:999px;overflow:hidden;}
.qty-stepper button{width:38px;height:38px;background:#fff;border:none;font-size:1.1rem;font-weight:700;}
.qty-stepper input{width:44px;text-align:center;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);height:38px;}
.detail-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* Zoom lightbox */
.zoom-overlay{
  position:fixed;inset:0;background:rgba(20,20,30,.92);z-index:300;
  display:none;align-items:center;justify-content:center;touch-action:none;
}
.zoom-overlay.open{display:flex;animation:fadeIn .2s ease;}
.zoom-overlay img{max-width:92vw;max-height:88vh;object-fit:contain;cursor:zoom-in;transition:transform .15s ease;touch-action:none;}
.zoom-overlay img.zoomed{cursor:grab;}
.zoom-close{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.15);color:#fff;border:none;width:42px;height:42px;border-radius:50%;font-size:1.3rem;}
.zoom-hint-mobile{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:.8rem;opacity:.75;}

/* ---------- Cart ---------- */
.cart-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.cart-table th{text-align:left;font-size:.75rem;text-transform:uppercase;color:var(--muted);padding:14px 16px;border-bottom:1px solid var(--border);}
.cart-table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle;}
.cart-item-info{display:flex;align-items:center;gap:12px;}
.cart-item-info img{width:64px;height:64px;object-fit:cover;border-radius:10px;}
.cart-remove{color:var(--danger);font-weight:700;background:none;border:none;cursor:pointer;}
.cart-summary{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;color:var(--muted);}
.summary-row.total{font-weight:800;color:var(--navy);font-size:1.15rem;border-top:1px solid var(--border);margin-top:8px;padding-top:14px;}

@media(max-width:720px){
  .cart-table thead{display:none;}
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{display:block;width:100%;}
  .cart-table tr{padding:14px;border-bottom:8px solid var(--bg);}
  .cart-table td{border:none;padding:6px 0;}
  .cart-table td::before{content:attr(data-label);display:block;font-size:.7rem;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
}

/* ---------- Forms ---------- */
.form-card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);}
.form-grid{display:grid;gap:16px;}
@media(min-width:640px){.form-grid.cols-2{grid-template-columns:1fr 1fr;}}
.field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px;color:var(--navy);}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#fcfbf9;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(45,108,255,.15);}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:4px;}
.field-error{color:var(--danger);font-size:.8rem;margin-top:4px;}

/* ---------- Payment / checkout instructions ---------- */
.payment-card{background:linear-gradient(135deg,#FFF1E6,#E7FBF6);border-radius:var(--radius-lg);padding:28px;border:3px dashed var(--coral);}
.payment-grid{display:grid;gap:10px;margin:18px 0;}
.payment-row{display:flex;justify-content:space-between;background:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow-sm);flex-wrap:wrap;gap:6px;}
.payment-row strong{color:var(--navy);}
.order-number-pill{display:inline-block;background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;font-weight:800;padding:8px 18px;border-radius:999px;letter-spacing:.03em;}

/* ---------- Alerts ---------- */
.alert{padding:14px 18px;border-radius:12px;margin-bottom:18px;font-weight:700;border-left:5px solid transparent;}
.alert-success{background:#E9F8F0;color:var(--success);border-left-color:var(--success);}
.alert-error{background:#FDECEA;color:var(--danger);border-left-color:var(--danger);}
.alert-info{background:#EAF3FF;color:var(--teal-dark);border-left-color:var(--teal);}

/* ---------- Trust strip — floating colorful cards ---------- */
.trust-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media(min-width:760px){.trust-strip{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1100px){.trust-strip{grid-template-columns:repeat(5,1fr);}}
.trust-item{
  --cat-accent:var(--teal);--cat-tint:var(--bg-blue);
  background:var(--cat-tint);border-radius:var(--radius-lg);padding:24px 20px;text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.trust-item:hover{transform:translateY(-6px);box-shadow:0 16px 32px -14px color-mix(in srgb, var(--cat-accent) 55%, transparent);}
.trust-item .icon{
  font-size:1.6rem;margin:0 auto 14px;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cat-accent);color:#fff;
  box-shadow:0 6px 16px color-mix(in srgb, var(--cat-accent) 45%, transparent);
}
.trust-item h3{font-size:var(--fs-base);margin-bottom:4px;}
.trust-item p{font-size:var(--fs-sm);margin:0;}

/* ---------- Promotional banner ---------- */
.promo-banner{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--teal),var(--lavender));
  padding:56px 32px;text-align:center;color:#fff;
}
.promo-banner::before,.promo-banner::after{
  content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14);
}
.promo-banner::before{width:220px;height:220px;top:-90px;left:-60px;}
.promo-banner::after{width:160px;height:160px;bottom:-70px;right:-30px;}
.promo-banner h2{color:#fff;font-size:clamp(1.75rem,2vw + 1.25rem,2.75rem);position:relative;z-index:1;}
.promo-banner p{color:rgba(255,255,255,.88);max-width:52ch;margin:0 auto 22px;position:relative;z-index:1;font-size:var(--fs-md);}
.promo-banner .btn{position:relative;z-index:1;}
.promo-banner .btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}
.promo-banner.promo-cta{background:linear-gradient(135deg,var(--orange),var(--coral));}

/* ---------- More Than Just Play ---------- */
.mtp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(min-width:760px){.mtp-grid{grid-template-columns:repeat(4,1fr);}}
.mtp-card{
  --cat-accent:var(--teal);--cat-tint:var(--bg-blue);
  background:var(--cat-tint);border-radius:var(--radius-lg);padding:26px 20px;text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.mtp-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px -14px color-mix(in srgb, var(--cat-accent) 55%, transparent);}
.mtp-icon{
  width:60px;height:60px;border-radius:50%;margin:0 auto 14px;background:var(--cat-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;
}
.mtp-card h3{font-size:var(--fs-lg);margin-bottom:6px;}
.mtp-card p{font-size:var(--fs-sm);margin:0;}

/* ---------- Footer ---------- */
.site-footer{background:linear-gradient(160deg,var(--navy) 0%,#2E1065 100%);color:var(--muted-on-dark);margin-top:60px;position:relative;overflow:hidden;}
.footer-blob{position:absolute;border-radius:50%;filter:blur(4px);opacity:.16;z-index:0;pointer-events:none;}
.footer-blob-1{width:340px;height:340px;background:var(--sky);top:-120px;left:-100px;}
.footer-blob-2{width:280px;height:280px;background:var(--coral);bottom:-100px;right:-70px;}
.footer-statement{position:relative;z-index:1;padding:52px 20px 0;text-align:center;}
.footer-statement h2{color:#fff;font-size:clamp(1.75rem,3vw + 1rem,3.25rem);margin:0;line-height:1.15;}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--teal) 0 25%,var(--yellow) 25% 50%,var(--coral) 50% 75%,var(--green) 75% 100%);
}
.footer-grid{display:grid;gap:32px;padding:52px 20px 32px;grid-template-columns:1fr;}
@media(min-width:760px){.footer-grid{grid-template-columns:repeat(4,1fr);}}
.footer-brand{color:#fff;margin-bottom:12px;}
.footer-tagline{color:var(--yellow);font-weight:700;font-size:var(--fs-sm);margin-bottom:14px;}
.footer-col h4{color:#fff;font-size:var(--fs-base);margin-bottom:12px;}
.footer-col a{display:block;padding:4px 0;color:var(--muted-on-dark);}
.footer-col a:hover{color:var(--yellow);}
.footer-col p{color:var(--muted-on-dark);font-size:var(--fs-sm);}
.footer-social{display:flex;gap:10px;flex-wrap:wrap;}
.footer-social-icon{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;background:rgba(255,255,255,.08);border-radius:50%;
  transition:background .2s ease,transform .2s ease;
}
.footer-social-icon:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:16px 0;text-align:center;font-size:var(--fs-xs);color:var(--muted-on-dark);opacity:.65;}

/* ---------- About page ---------- */
/* A slightly narrower, page-scoped centered container (1200px, not the
   sitewide 1280px) — every section on this page uses it so the whole page
   reads as one consistently centered column, not just the heading. */
.container-narrow{max-width:1200px;width:100%;margin-inline:auto;padding-inline:20px;}
@media(min-width:768px){.container-narrow{padding-inline:32px;}}

/* The sticky header got noticeably taller (a 3x-larger logo). Extra top padding
   plus scroll-margin-top keeps the "Native Group" heading clear of it, both on
   normal page load and if this section is ever scrolled/jumped to directly. */
.about-hero{padding-top:96px;scroll-margin-top:110px;}
@media(max-width:640px){.about-hero{padding-top:72px;}}

/* Two-column history layout. IMPORTANT: the two-column grid only ever applies
   via the .has-sidebar modifier, which PHP only adds when there is a real
   photo for the right column — so this can never end up with an empty
   second column pushing everything left. */
.about-layout{display:grid;gap:32px;align-items:start;}
.about-layout:not(.has-sidebar) .about-copy{max-width:72ch;margin-inline:auto;}
@media(min-width:768px){
  .about-layout.has-sidebar{grid-template-columns:repeat(2, minmax(0, 1fr));gap:48px;}
}
.about-copy p{font-size:var(--fs-md);line-height:1.75;max-width:75ch;}

.about-sidebar{display:flex;flex-direction:column;gap:20px;}
.about-photo-wrap{position:relative;}
/* Fixed height (not aspect-ratio, not height:auto) so a tall portrait can never
   dictate this column's height and drag the rest of the page down with it.
   object-fit crops instead of stretching. Taller than a typical landscape crop
   on purpose — shows more of the person/setting, not just a headshot strip. */
.about-photo{
  width:100%;height:520px;display:block;object-fit:cover;object-position:center top;
  border-radius:32px;box-shadow:var(--shadow-lg);border:6px solid #fff;background:var(--bg-blue);
}
@media(max-width:992px){.about-photo{height:460px;}}
@media(max-width:768px){.about-photo{height:420px;}}

/* "The Native Group Family" — its own full-width section below the
   History/Photo grid entirely (not a grid item inside it), same proven
   pattern as .introduction-section below. grid-column:1/-1 is a defensive
   no-op here since it isn't actually a grid child, kept in case that changes. */
.native-family-section{grid-column:1 / -1;}
.native-family-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px;margin-top:32px;}
@media(min-width:1200px){.native-family-grid{grid-template-columns:repeat(4, minmax(0, 1fr));}}
@media(max-width:768px){.native-family-grid{grid-template-columns:1fr;}}
.native-family-card{
  display:flex;align-items:center;gap:14px;background:#fff;
  border:1px solid rgba(23,37,84,.08);border-radius:16px;padding:20px 22px;
  box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease;
}
.native-family-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.native-family-icon{
  width:44px;height:44px;flex-shrink:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  background:linear-gradient(135deg,var(--navy),var(--orange));color:#fff;
}
.native-family-name{font-weight:700;color:var(--navy);font-size:var(--fs-sm);line-height:1.3;}

/* Introduction — a separate full-width section below the History/Companies
   grid entirely (not a grid item inside it), so it can never be squeezed
   into a narrow column. grid-column:1/-1 is a defensive no-op here since
   these sections aren't grid children, but kept in case that ever changes. */
.introduction-section{grid-column:1 / -1;}
.introduction-card{
  width:100%;max-width:none;padding:40px 48px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(24,44,95,.08);
  border-radius:24px;
  box-shadow:0 14px 40px rgba(24,44,95,.08);
}
.introduction-heading{margin-bottom:12px;font-size:clamp(1.6rem,1.8vw + 1.1rem,2.25rem);}
.introduction-lead{font-size:var(--fs-md);font-weight:700;color:var(--navy);max-width:70ch;margin-bottom:28px;}
.introduction-content{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:32px 48px;margin-bottom:32px;}
.introduction-content p{font-size:var(--fs-md);line-height:1.75;max-width:65ch;margin:0;}
.introduction-visit{
  display:flex;align-items:flex-start;gap:16px;background:var(--bg-peach);
  border-radius:var(--radius-lg);padding:22px 26px;margin-bottom:28px;
}
.introduction-visit-icon{font-size:1.5rem;flex-shrink:0;}
.introduction-visit strong{display:block;margin-bottom:4px;color:var(--navy);}
.introduction-visit p{margin:0;color:var(--muted);}
.introduction-signature{margin:0;color:var(--navy);font-weight:700;line-height:1.6;}
@media(max-width:768px){
  .introduction-content{grid-template-columns:1fr;}
  .introduction-card{padding:28px 22px;}
}

/* Legacy section — cream gradient with a barely-there dot pattern; the card
   itself is deliberately restrained (white, thin border, soft shadow) so the
   person's name is what draws the eye, not the chrome around it. */
.legacy-section{
  position:relative;overflow:hidden;padding:72px 0;grid-column:1 / -1;
  background:linear-gradient(165deg, var(--bg) 0%, var(--bg-peach) 55%, var(--bg-coral) 100%);
}
.legacy-section::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(23,37,84,.06) 1.5px, transparent 1.5px);
  background-size:22px 22px;
}
.legacy-section .container{position:relative;}

.about-legacy-card{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;
  background:#fff;border:1px solid rgba(23,37,84,.08);border-radius:28px;padding:44px 36px;
  box-shadow:0 20px 50px -20px rgba(23,37,84,.22);max-width:920px;margin:0 auto;
  transition:transform .3s ease, box-shadow .3s ease;
}
.about-legacy-card:hover{transform:translateY(-6px);box-shadow:0 28px 60px -18px rgba(23,37,84,.3);}
@media(min-width:768px){
  .about-legacy-card{
    display:grid;grid-template-columns:minmax(220px, 320px) minmax(0, 1fr);
    text-align:left;align-items:center;padding:48px 56px;gap:44px;
  }
}

.about-legacy-photo-wrap{
  flex-shrink:0;width:180px;height:180px;border-radius:50%;overflow:hidden;position:relative;
  margin-inline:auto;
  box-shadow:0 14px 34px rgba(23,37,84,.22), 0 0 0 4px var(--orange), 0 0 0 7px rgba(23,37,84,.08);
}
@media(min-width:768px){.about-legacy-photo-wrap{width:100%;max-width:240px;height:auto;aspect-ratio:1/1;margin-inline:0;}}
.about-legacy-photo{width:100%;height:100%;object-fit:cover;display:block;}
.about-legacy-monogram{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--orange));color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:2.75rem;letter-spacing:.02em;
}

.about-legacy-info{display:flex;flex-direction:column;align-items:center;min-width:0;}
@media(min-width:768px){.about-legacy-info{align-items:flex-start;}}
.about-legacy-eyebrow{
  margin:0 0 8px;font-size:var(--fs-sm);font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--orange);
}
.about-legacy-name{
  margin:0;font-size:clamp(2rem,2.6vw + 1.1rem,3.1rem);font-weight:800;
  color:var(--navy);line-height:1.15;
}
@media(min-width:768px){.about-legacy-name{max-width:15ch;}}
.about-legacy-accent{
  display:block;width:64px;height:5px;border-radius:999px;margin:12px auto 16px;
  background:linear-gradient(90deg,var(--navy),var(--orange));
}
@media(min-width:768px){.about-legacy-accent{margin:12px 0 16px;}}
.about-legacy-role{margin:0 0 22px;font-size:var(--fs-md);font-weight:600;color:var(--muted);}
.about-legacy-phone{
  display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;
  font-weight:800;font-size:var(--fs-base);padding:14px 30px;border-radius:999px;
  box-shadow:0 10px 26px rgba(23,37,84,.28);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.about-legacy-phone:hover{background:var(--coral);transform:translateY(-2px);box-shadow:0 14px 30px rgba(251,113,133,.4);}
.about-legacy-phone:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
.about-legacy-phone-icon{font-size:1.05rem;}

/* ---------- Page loader (brief branded splash while the page loads) ---------- */
.page-loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);transition:opacity .4s ease;
}
.page-loader-hide{opacity:0;pointer-events:none;}
.page-loader-mark{display:flex;flex-direction:column;align-items:center;gap:10px;}
.page-loader-emoji{font-size:4.5rem;line-height:1;animation:page-loader-pulse 1.1s ease-in-out infinite;}
.page-loader-logo{height:96px;width:auto;max-width:260px;object-fit:contain;animation:page-loader-pulse 1.1s ease-in-out infinite;}
.page-loader-name{font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:var(--navy);letter-spacing:.01em;}
@keyframes page-loader-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.14);}}
@media(prefers-reduced-motion:reduce){.page-loader-emoji{animation:none;}.page-loader{transition:none;}}

/* ---------- Developer credit footer — separate from .site-footer, appended
   once via footer.php so it appears site-wide without duplicating anything. ---------- */
.rur-credit-footer{
  position:relative;background:linear-gradient(180deg,#0b0c10 0%,#050506 100%);
  padding:36px 20px;
}
.rur-credit-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rur-neon,#22D3EE) 50%,transparent);
  box-shadow:0 0 10px var(--rur-neon,#22D3EE);
}
.rur-credit-link{
  --rur-neon:#22D3EE;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  max-width:var(--container);margin:0 auto;text-decoration:none;
  transition:transform .25s ease;border-radius:16px;
}
.rur-credit-link:hover{transform:translateY(-2px);}
.rur-credit-link:focus-visible{outline:2px solid var(--rur-neon);outline-offset:6px;}
.rur-credit-logo{
  height:52px;width:auto;object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(34,211,238,.4));
  transition:filter .25s ease;
}
.rur-credit-link:hover .rur-credit-logo{filter:drop-shadow(0 0 16px rgba(34,211,238,.85));}
.rur-credit-mark{
  height:52px;width:52px;flex-shrink:0;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.35);
  color:var(--rur-neon);font-family:var(--font-head);font-weight:800;font-size:1.05rem;letter-spacing:.03em;
  box-shadow:0 0 14px rgba(34,211,238,.22);transition:box-shadow .25s ease;
}
.rur-credit-link:hover .rur-credit-mark{box-shadow:0 0 22px rgba(34,211,238,.5);}
.rur-credit-content{display:flex;flex-direction:column;gap:2px;}
.rur-credit-content span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.65);}
.rur-credit-content strong{
  font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:.02em;
  text-shadow:0 0 10px rgba(34,211,238,.45);transition:text-shadow .25s ease,color .25s ease;
}
.rur-credit-link:hover .rur-credit-content strong{color:var(--rur-neon);text-shadow:0 0 18px rgba(34,211,238,.9);}
.rur-credit-content small{font-size:.75rem;color:rgba(255,255,255,.55);font-weight:600;}
@media(max-width:640px){
  .rur-credit-footer{padding:28px 20px;}
  .rur-credit-link{flex-direction:column;text-align:center;gap:12px;}
  .rur-credit-logo,.rur-credit-mark{height:42px;}
  .rur-credit-mark{width:42px;font-size:.85rem;}
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- Misc ---------- */
.text-center{text-align:center;}
.mt-lg{margin-top:32px;}
.skeleton{background:linear-gradient(90deg,#eee,#f5f5f5,#eee);background-size:200% 100%;animation:shimmer 1.3s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}