/* ============================================================
   GYAANSHALA — BRAND LAYER (tokens + shared primitives)
   indigo dye · haldi (turmeric) · neem · bandhani rose

   Ported from the design artifacts in
   ~/Documents/BRAND PRESETS/GyaanShala/0.Main Site Assets/.

   SCOPED UNDER .gsx, per docs/superpowers/specs/2026-08-28-brand-rebuild-design.md.
   The legacy Bootstrap/theme bundle keeps loading on every page -- the modals,
   common scripts and roughly forty untouched pages depend on it -- so nothing
   here may apply globally. A rule that escapes .gsx restyles pages nobody has
   looked at.

   This file deliberately carries NO chrome (header/footer). The brand rebuild
   replaces those four files as one unit; defining chrome here as well would
   leave two sources for the same bar.
   ============================================================ */

.gsx{
  --ink:#101A33; --ink-2:#1B2749; --indigo:#26407E; --indigo-soft:#3C5AA6;
  --haldi:#F5B301; --haldi-soft:#FFD75E; --haldi-wash:#FFF4D3;
  --neem:#1B6E52; --neem-wash:#E4F1EA; --rose:#C2456B;
  --paper:#F8F8F4; --paper-2:#EFEEE7; --white:#fff;
  --line:rgba(16,26,51,.13); --line-strong:rgba(16,26,51,.24); --line-dark:rgba(255,255,255,.16);
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --deva:"Tiro Devanagari Hindi","Nirmala UI",serif;
  --wrap:1200px; --r-s:8px; --r-m:14px; --r-l:22px;
  --shadow-s:0 1px 2px rgba(16,26,51,.06),0 4px 14px rgba(16,26,51,.06);
  --shadow-m:0 2px 6px rgba(16,26,51,.07),0 18px 44px rgba(16,26,51,.11);
  --booti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23F5B301' stroke-width='1.1' opacity='.5'%3E%3Cpath d='M22 8c4 5 6 9 6 12s-2.7 6-6 6-6-3-6-6 2-7 6-12z'/%3E%3Cpath d='M22 26v9'/%3E%3Ccircle cx='22' cy='38' r='2'/%3E%3C/g%3E%3C/svg%3E");

  font-family:var(--body);
  font-size:16.5px;
  line-height:1.62;
  font-weight:450;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.gsx *,.gsx *::before,.gsx *::after{box-sizing:border-box}
.gsx img{max-width:100%;display:block}
.gsx a{color:inherit;text-decoration:none}
.gsx button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.gsx h1,.gsx h2,.gsx h3,.gsx h4{
  font-family:var(--display);margin:0;line-height:1.06;letter-spacing:-.03em;font-weight:800;color:var(--ink)}
.gsx p{margin:0}
.gsx :focus-visible{outline:3px solid var(--haldi);outline-offset:3px;border-radius:4px}

.gsx .gs-wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
@media(max-width:640px){.gsx .gs-wrap{width:min(100% - 28px,var(--wrap))}}

.gsx .deva{font-family:var(--deva)}
.gsx .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-size:11.5px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--neem)}
.gsx .eyebrow::before{content:"";width:20px;height:1.5px;background:currentColor;flex:none}

/* ---------- buttons ---------- */
.gsx .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;
  border-radius:100px;font-weight:700;font-size:15px;letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  border:1.5px solid transparent;text-align:center;text-decoration:none}
.gsx .btn-primary{background:var(--haldi);color:var(--ink);box-shadow:0 4px 0 #C98F00}
.gsx .btn-primary:hover{background:var(--haldi-soft);transform:translateY(-2px);box-shadow:0 6px 0 #C98F00}
.gsx .btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 #C98F00}
.gsx .btn-ink{background:var(--ink);color:var(--white)}
.gsx .btn-ink:hover{background:var(--indigo);transform:translateY(-2px);color:var(--white)}
.gsx .btn-ghost-dark{border-color:rgba(255,255,255,.4);color:var(--white)}
.gsx .btn-ghost-dark:hover{background:rgba(255,255,255,.1);border-color:var(--white);color:var(--white)}
.gsx .btn-ghost{border-color:var(--line-strong);color:var(--ink);background:var(--white)}
.gsx .btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.gsx .btn-sm{padding:10px 18px;font-size:14px}
.gsx .btn-lg{padding:17px 30px;font-size:16.5px}
.gsx .btn-block{width:100%}
.gsx .btn[disabled],.gsx .btn.is-disabled{opacity:.45;pointer-events:none}

/* Motion is decoration here; anybody who has asked for less should get none. */
@media(prefers-reduced-motion:reduce){
  .gsx *,.gsx *::before,.gsx *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   APPENDED — chrome + remaining shared primitives
   (.superpowers/sdd/2026-08-28-brand-rebuild/task-2-brief.md, Task 3
   dependency, controller ruling logged 2026-08-28)

   Everything above this line is untouched from the sibling's commit
   (ea85475). Everything below extends the SAME vocabulary: unprefixed
   class names taken from docs/design/artifacts/gyaanshala-homepage.html,
   scoped with a leading `.gsx `, tokens staying exactly where they
   already live (on `.gsx`, not `:root` — this file's own scoping test,
   application/controllers/Gstest.php::test_dashboard_css_is_scoped_and_responsive,
   fails on any top-level selector that isn't `.gsx`-prefixed, `:root`
   included). No `gsx-btn`/`gsx-card`/`gsx-sechead` names are introduced.
   Chrome CSS only — the chrome MARKUP (header.php / header_lg_device.php
   / header_sm_device.php / footer.php) is Task 3's job; these are the
   classes that markup will hang off.
   ============================================================ */

/* ---------- top bar ---------- */
.gsx .topbar{background:var(--ink);color:rgba(255,255,255,.82);font-size:13px}
.gsx .topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px}
.gsx .topbar-l{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.gsx .topbar a:hover{color:var(--haldi-soft)}
.gsx .topbar-r{display:flex;align-items:center;gap:14px}
/* the educators' CTA in the top strip: a haldi pill, kept on every width */
.gsx .topbar .topbar-cta{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;
  background:var(--haldi);color:var(--ink);font-weight:700;font-size:12.5px;line-height:1.2;white-space:nowrap;
}
.gsx .topbar .topbar-cta:hover{background:var(--haldi-soft);color:var(--ink)}
/* ---------- top bar on phones ----------
   It wrapped onto two lines (phone + selects, then the CTA) and the right
   block still ran 9px past the viewport, clipping the language select and the
   social icon. One line: phone as an icon-only tap target, the CTA, and the
   currency select. Email, language and social already have .hide-sm; that
   rule was scoped to .topbar-l, so the right-hand ones never hid. */
@media(max-width:640px){
  .gsx .topbar-in{flex-wrap:nowrap;gap:8px;min-height:38px}
  .gsx .topbar-l{flex-wrap:nowrap;gap:8px;min-width:0}
  .gsx .topbar-r{flex:none;gap:8px}
  .gsx .topbar .tel-num{display:none}
  .gsx .topbar-l a[href^="tel:"]{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;font-size:15px}
  .gsx .topbar .topbar-cta{padding:5px 11px;font-size:12px}
  .gsx .mini-select{padding:4px 8px;font-size:12px}
}
.gsx .mini-select{
  background:transparent;color:inherit;border:1px solid var(--line-dark);
  border-radius:100px;padding:3px 10px;font-size:12.5px;font-family:var(--body);
}
.gsx .mini-select option{color:var(--ink)}
@media(max-width:860px){.gsx .topbar .hide-sm{display:none}}

/* ---------- header / nav ---------- */
.gsx .hdr{
  position:sticky;top:0;z-index:80;background:rgba(248,248,244,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.gsx .hdr-in{display:flex;align-items:center;gap:26px;min-height:72px}
.gsx .brand{display:flex;align-items:baseline;gap:10px;flex:none}
.gsx .brand-mark{
  font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.045em;
}
.gsx .brand-mark span{color:var(--haldi);-webkit-text-stroke:.6px var(--ink)}
.gsx .brand-tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--neem)}
@media(max-width:1040px){.gsx .brand-tag{display:none}}

.gsx .nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.gsx .nav-link{
  padding:9px 14px;border-radius:100px;font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;transition:background .15s;
}
.gsx .nav-link:hover{background:var(--paper-2)}
.gsx .nav-link.is-active{background:var(--ink);color:#fff}
.gsx .nav-actions{display:flex;align-items:center;gap:10px;flex:none}

.gsx .cart-btn{position:relative;padding:9px 12px;border-radius:100px}
.gsx .cart-btn:hover{background:var(--paper-2)}
.gsx .cart-count{
  position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 4px;
  background:var(--rose);color:#fff;border-radius:100px;font-size:11px;font-weight:700;
  display:grid;place-items:center;line-height:1;
}

/* mega menu */
.gsx .has-mega{position:relative}
.gsx .mega{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(92vw,720px);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--shadow-m);padding:22px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;
  opacity:0;visibility:hidden;transition:.2s ease;
}
.gsx .has-mega:hover .mega,.gsx .has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.gsx .mega h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--neem);font-family:var(--body);font-weight:700;margin-bottom:8px}
.gsx .mega a.mega-item{display:block;padding:8px 10px;border-radius:var(--r-s);font-size:14.5px;font-weight:500;line-height:1.35}
.gsx .mega a.mega-item:hover{background:var(--haldi-wash)}
.gsx .mega-all{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:700;font-size:14.5px;color:var(--indigo)}

.gsx .burger{display:none;width:44px;height:44px;border-radius:12px;place-items:center}
.gsx .burger:hover{background:var(--paper-2)}
.gsx .burger i{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.gsx .burger i::before,.gsx .burger i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.gsx .burger i::before{top:-6px}
.gsx .burger i::after{top:6px}

@media(max-width:1024px){
  .gsx .nav{display:none}
  .gsx .burger{display:grid}
  .gsx .nav-actions .btn-login{display:none}
}

.gsx .mobile-nav{
  display:none;border-top:1px solid var(--line);background:var(--white);
  padding:16px 0 26px;
}
.gsx .mobile-nav.open{display:block}
.gsx .mobile-nav a{display:block;padding:11px 4px;font-weight:600;border-bottom:1px solid var(--line)}
.gsx .mobile-nav .m-sub a{font-weight:500;font-size:14.5px;padding-left:16px;color:var(--ink-2);border-bottom:0}
.gsx .mobile-nav h4{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--neem);font-family:var(--body);margin:18px 0 6px}

/* ---------- footer ---------- */
.gsx .ftr{background:var(--ink);color:rgba(255,255,255,.72);padding:72px 0 0;font-size:15px}
.gsx .ftr h4{
  font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--haldi);margin-bottom:18px;
}
.gsx .ftr-top{display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1.4fr;gap:44px;padding-bottom:52px}
@media(max-width:1000px){.gsx .ftr-top{grid-template-columns:1fr 1fr;gap:38px}}
@media(max-width:600px){.gsx .ftr-top{grid-template-columns:1fr}}
.gsx .ftr ul{list-style:none;margin:0;padding:0}
.gsx .ftr li{margin-bottom:11px;line-height:1.45}
.gsx .ftr a:hover{color:var(--haldi-soft)}
.gsx .ftr .brand-mark{color:#fff;font-size:27px}
.gsx .ftr-blurb{margin-top:16px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.62);max-width:38ch}
.gsx .sub-form{display:flex;gap:8px;margin-top:6px}
.gsx .sub-form input{
  flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid var(--line-dark);
  border-radius:100px;padding:12px 18px;color:#fff;font:inherit;font-size:14.5px;
}
.gsx .sub-form input::placeholder{color:rgba(255,255,255,.45)}
.gsx .ftr-legal{
  border-top:1px solid var(--line-dark);padding:26px 0 34px;
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  font-size:13.5px;color:rgba(255,255,255,.55);
}
.gsx .ftr-legal nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.gsx .ftr-org{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--r-m);
  padding:16px 18px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.6);margin-top:18px;
}
.gsx .ftr-org b{color:rgba(255,255,255,.86);font-weight:700}
/* footer on phones: links were 21px-tall tap targets; give each a real hit
   area without changing the desktop rhythm */
@media(max-width:768px){
  .gsx .ftr{padding-top:52px}
  .gsx .ftr-top{gap:30px;padding-bottom:36px}
  .gsx .ftr li{margin-bottom:2px}
  .gsx .ftr li a,.gsx .ftr-legal nav a{display:inline-block;padding:7px 0;min-height:32px}
  .gsx .ftr-legal{padding:20px 0 28px;gap:10px 20px}
  .gsx .sub-form .btn{min-height:44px}
}

/* ---------- eyebrow: dark-background modifier the dashboard didn't need ---------- */
.gsx .eyebrow.on-dark{color:var(--haldi-soft)}

/* ---------- section heading (kicker + heading pattern) ---------- */
.gsx .sec-head{max-width:62ch;margin-bottom:44px}
.gsx .sec-head h2{font-size:clamp(30px,3.7vw,46px);margin-top:14px}
.gsx .sec-head p{margin-top:16px;font-size:17px;color:var(--ink-2);opacity:.82;max-width:56ch}

/* ---------- badge (pill, hero-style) ---------- */
.gsx .badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border:1px solid var(--line-dark);border-radius:100px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.05);
}

/* ---------- course card ---------- */
.gsx .course-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;transition:.22s ease;
}
.gsx .course-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--line-strong)}
/* Course thumbnails are authored square (1:1) -- a 16/9 box cropped ~44% of
   every one. The box now matches the artwork; nothing is cut off. */
.gsx .course-card-art{
  aspect-ratio:1/1;display:grid;place-items:center;position:relative;
  border-bottom:1px solid var(--line);
}
.gsx .course-card-art::before{
  content:"";position:absolute;inset:0;background-image:var(--booti);
  background-size:52px 52px;opacity:.32;mix-blend-mode:multiply;
}
.gsx .course-card-glyph{font-size:46px;position:relative;filter:saturate(1.05)}
.gsx .course-card-badge{
  position:absolute;top:12px;left:12px;z-index:2;background:var(--ink);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;
}
.gsx .course-card-body{padding:20px 20px 0;flex:1}
.gsx .course-card h3{font-size:19.5px;line-height:1.18;letter-spacing:-.028em}
.gsx .course-card h3 a:hover{color:var(--indigo)}
.gsx .course-card-meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;
  font-size:13px;color:var(--ink-2);opacity:.78;font-weight:550;
}
.gsx .course-card-out{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);list-style:none;padding-left:0}
.gsx .course-card-out li{
  font-size:14px;color:var(--ink-2);padding-left:22px;position:relative;margin-bottom:7px;line-height:1.45;
}
.gsx .course-card-out li::before{
  content:"";position:absolute;left:0;top:7px;width:11px;height:11px;
  border-radius:3px;background:var(--neem-wash);border:1.4px solid var(--neem);
}
.gsx .course-card-foot{
  padding:18px 20px;margin-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper);
}
.gsx .price{display:flex;align-items:baseline;gap:8px}
.gsx .price b{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.04em}
.gsx .price s{font-size:14px;color:var(--ink-2);opacity:.5}

/* ---------- legacy theme resets (promoted from gs-page-home.css, Task 4 review round) ----------
   These neutralize legacy theme selectors of the same names (custom.css's bare
   `.course-card{margin-top:-225px}`, a bare `.quote{position:absolute;...}`, and
   style.css's bare `.faq{padding:80px 0 30px;background-color:...}`) so any
   `.gsx` page using these shared class names is not silently overridden by the
   still-loaded legacy Bootstrap/theme bundle. Promoted here (rather than kept
   page-local) because more than one page now renders `.course-card`. */
.gsx .course-card{margin-top:0}
.gsx .quote{position:static}
.gsx .faq{padding:0;background:none}

/* ---------- card grid (promoted 2026-08-30) ----------
   `.grid` / `.grid-2` were declared per page (gs-page-courses.css,
   gs-page-cart.css) and nowhere else, so the landing page's "Learners also
   bought" block asked for a two-column grid and got a single stack of
   full-width cards, each with a page-wide square thumbnail. Shared card,
   shared grid. The page files keep their identical copies; nothing changes
   for them. */
.gsx .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gsx .grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.gsx .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.gsx .grid,.gsx .grid-2{grid-template-columns:1fr;gap:18px}}

/* The card's artwork is a link to the course everywhere it appears -- the
   image is the largest thing on the card and was the one part that did
   nothing when tapped. */
.gsx a.course-card-art{display:grid;color:inherit;text-decoration:none}
/* NEW pill + launch date on fresh courses (2026-09-03) */
.gsx .course-card-art{position:relative}
.gsx .card-new{position:absolute;top:12px;left:12px;z-index:2;background:var(--haldi,#F5B301);color:var(--ink,#101A33);
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:99px;
  box-shadow:0 2px 8px rgba(16,26,51,.18)}
.gsx .card-launch{display:block;margin-top:6px;font-size:12px;font-weight:700;color:var(--neem,#1B6E52)}
.gsx a.course-card-art img{transition:transform .25s ease}
.gsx a.course-card-art:hover img{transform:scale(1.03)}

/* Compact variant for secondary listings (related courses on a course page):
   same card, tighter type and padding, so two sit side by side without
   dominating the page. */
.gsx .course-card.is-compact .course-card-body{padding:14px 16px 0}
.gsx .course-card.is-compact h3{font-size:16px;line-height:1.25}
.gsx .course-card.is-compact .course-card-foot{padding:12px 16px;margin-top:14px}
.gsx .course-card.is-compact .price b{font-size:20px}

/* ============================================================
   APPENDED — Task 3 review round
   (.superpowers/sdd/2026-08-28-brand-rebuild/task-3-report.md §"Fix report",
   controller authorisation logged 2026-08-28)

   Everything above this line is untouched. These rules exist because the
   Step 5 browser checkpoint found three things curl could not: the mega
   panel clipped off the viewport's left edge, the sticky header not
   sticking, and the burger painted 166px off the right edge of a 390px
   screen. Same convention as the rest of the file: every selector starts
   with `.gsx`, tokens stay on `.gsx`, no new `gsx-btn`/`gsx-card` names.
   ============================================================ */

/* ---------- header search ----------
   The artifact's header has no search box, so gs-brand.css had no primitive
   for one and the input rendered as a bare native field among pill buttons.
   At <=1024px it moves into the mobile nav (see .mobile-nav .hdr-search):
   left in the header row it pushed the cart, the sign-up button and the
   burger clean off a 390px screen. */
.gsx .hdr-search{display:flex;align-items:center;gap:8px;flex:0 1 260px;min-width:0}
/* The search box competing for the row squeezed the auth buttons until their
   labels broke across two lines ("Log / in"). Pills do not wrap. */
.gsx .hdr .btn{white-space:nowrap}
.gsx .hdr .nav-actions{flex:0 0 auto}
.gsx .hdr-search-input{
  flex:1;min-width:0;background:var(--white);border:1.5px solid var(--line);
  border-radius:100px;padding:10px 18px;font:inherit;font-size:14.5px;color:var(--ink);
}
.gsx .hdr-search-input::placeholder{color:rgba(16,26,51,.45)}
.gsx .hdr-search-input:focus{border-color:var(--neem);outline:0;box-shadow:0 0 0 3px var(--neem-wash)}

/* ---------- mega menu: keep the panel on screen ----------
   .mega is 720px wide and centres on its trigger. The artifact's nav sits
   far enough right for that to fit; this header's does not — measured at
   left:-33px, which clipped the "H" off "HOME BUSINESS". Anchor it to the
   trigger's left edge inside the header, and to the right edge for the
   trailing "More" dropdown, which sits close to the actions. */
.gsx .hdr .mega{left:0;transform:translateX(0) translateY(-6px)}
.gsx .hdr .has-mega:hover .mega,
.gsx .hdr .has-mega:focus-within .mega{transform:translateX(0) translateY(0)}
.gsx .hdr .has-mega-end .mega{left:auto;right:0}

/* ---------- sticky header ----------
   `position:sticky` only sticks inside its own parent's box. header.php wraps
   the chrome in `.gsx.gsx-hdrwrap` (deliberately, so the brand layer does not
   restyle ~40 unreviewed legacy pages), and that wrapper is only as tall as
   the chrome itself — so the header un-stuck immediately and scrolled away
   (measured top:-860 at scrollY 900). `display:contents` removes the wrapper's
   BOX without removing the element from the cascade: the `.gsx` tokens, font
   and colour still inherit, but `.hdr`'s containing block becomes the body
   again and it sticks for the whole page, exactly as in the artifact. */
.gsx.gsx-hdrwrap{display:contents}

/* ---------- mobile header row ---------- */
@media(max-width:1024px){
  .gsx .hdr-in .hdr-search{display:none}
}
@media(max-width:640px){
  .gsx .hdr-in{gap:12px}
  .gsx .hdr-in .brand img{height:34px;max-width:130px;object-fit:contain}
}
.gsx .mobile-nav .hdr-search{display:flex;margin:2px 0 16px;flex:1 1 auto}

/* ---------- two-row header ----------
   Row 1: brand · search · actions. Row 2: the navigation, full width. The nav
   used to share one row with a 260px search box, so at 1440px it wrapped onto
   two ragged lines and the search was squeezed into a slot. Flex `order` does
   the layout: the nav stays where it is in the DOM (brand → search → nav →
   actions, which is also the tab order) but paints last, on its own line. */
.gsx .hdr-in{flex-wrap:wrap;gap:0 22px;min-height:0}
.gsx .hdr-in .brand{order:1;min-height:68px;align-items:center}
.gsx .hdr-in .hdr-search{order:2}
.gsx .hdr-in .nav-actions{order:3;min-height:68px}
.gsx .hdr-in .nav{order:4;flex:0 0 100%;width:100%;margin-left:0;min-height:46px;border-top:1px solid var(--line);gap:2px}
.gsx .hdr-in .nav .nav-link{padding:7px 13px;font-size:14.5px}

/* the search bar: one pill, three parts — category select, text, button */
.gsx .hdr-in .hdr-search{
  flex:1 1 320px;max-width:640px;min-width:0;margin:0 auto;gap:0;align-items:stretch;
  background:var(--white);border:1.5px solid var(--line);border-radius:100px;overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
.gsx .hdr-in .hdr-search:focus-within{border-color:var(--neem);box-shadow:0 0 0 3px var(--neem-wash)}
.gsx .hdr-search-scope{
  flex:0 0 auto;max-width:200px;border:0;border-right:1px solid var(--line);border-radius:0;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%23101a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding:0 32px 0 16px;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);
  appearance:none;-webkit-appearance:none;cursor:pointer;
}
.gsx .hdr-search-scope:focus{outline:0;background-color:var(--haldi-wash)}
.gsx .hdr-in .hdr-search-input{border:0;border-radius:0;padding:11px 16px;font-size:15px;background:transparent}
.gsx .hdr-in .hdr-search-input:focus{border:0;box-shadow:none;outline:0}
.gsx .hdr-search-btn{
  flex:0 0 auto;border:0;background:var(--haldi);color:var(--ink);padding:0 20px;
  font:inherit;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
}
.gsx .hdr-search-btn:hover{background:var(--haldi-soft)}

/* the mobile panel gets the same bar, without the button label */
.gsx .mobile-nav .hdr-search{border:1.5px solid var(--line);border-radius:100px;overflow:hidden;background:var(--white);align-items:stretch;gap:0}
.gsx .mobile-nav .hdr-search-scope{max-width:42%}
.gsx .mobile-nav .hdr-search-input{border:0;border-radius:0;padding:11px 14px;min-width:0}
.gsx .mobile-nav .hdr-search-btn span{display:none}
.gsx .mobile-nav .hdr-search-btn{padding:0 16px}

/* Store mega-menu: collections (when the store has any), featured kits as
   cards, and a best-sellers list — or "new in" while nothing has sold. */
.gsx .mega-store{width:min(94vw,900px);grid-template-columns:1.5fr 1fr;gap:10px 28px}
.gsx .mega-store.has-collections{grid-template-columns:.8fr 1.5fr 1fr}
.gsx .mega-prods{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gsx .mega-prod{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-m);border:1px solid transparent}
.gsx .mega-prod:hover{background:var(--haldi-wash);border-color:var(--line)}
.gsx .mega-prod img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;border:1px solid var(--line);background:var(--paper)}
.gsx .mega-prod>span{min-width:0}
.gsx .mega-prod b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:600;line-height:1.3}
.gsx .mega-prod .price{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-top:2px}
.gsx .mega-prod .price s{color:var(--ink-2);font-weight:500;margin-left:6px}
.gsx .mega-store .mega-list .mega-prod{padding:6px 8px}
.gsx .mega-store .mega-list .mega-prod img{width:40px;height:40px}
.gsx .mega-promo{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px;padding:12px 14px;border-radius:var(--r-m);background:var(--ink);color:#fff;font-size:14px}
.gsx .mega-promo .btn{flex:none}
.gsx .mega-empty{font-size:14px;color:var(--ink-2);padding:8px 10px;margin:0}

@media(max-width:1024px){
  .gsx .hdr-in .nav{display:none}
  .gsx .hdr-in .brand,.gsx .hdr-in .nav-actions{min-height:64px}
}

/* Phones: brand + actions on ONE row, always. The 640px block further up
   (gap:12px) predates the two-row rules and loses to them by cascade order, so
   the row kept the 22px desktop gap and `flex-wrap:wrap` — under ~380px the
   brand filled row one and cart/Sign-up/burger dropped onto a second row.
   Declared here, AFTER every .hdr-in rule, so these win. `nowrap` is safe
   below 1024px: the nav (the only child that needs the second row) is
   display:none by the block above, and the search bar is hidden below 1024px
   too, so brand and nav-actions are the only children left. */
@media(max-width:640px){
  .gsx .hdr-in{flex-wrap:nowrap;gap:10px;justify-content:space-between}
  .gsx .hdr-in .brand,.gsx .hdr-in .nav-actions{min-height:58px}
  .gsx .hdr-in .brand img{height:30px;max-width:118px;object-fit:contain}
  .gsx .hdr-in .nav-actions{gap:7px}
  .gsx .hdr-in .nav-actions .btn{padding:10px 16px;font-size:14px}
}
@media(max-width:374px){
  .gsx .hdr-in{gap:8px}
  .gsx .hdr-in .brand img{max-width:106px}
  .gsx .hdr-in .nav-actions .btn{padding:9px 13px}
}

/* ---------- legacy count badge inside the new header ----------
   notifications.php (not a chrome file) renders <p class="menu_number">, whose
   only styling in style.css is scoped under `.menubar` — the section wrapper
   this header replaced. Without this the unread count rendered as a block
   under the bell instead of a corner badge. Same shape as the artifact's
   .cart-count so the three badges match. */
.gsx .menu_number{
  position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 4px;margin:0;
  background:var(--rose);color:#fff;border-radius:100px;font-size:11px;font-weight:700;
  display:grid;place-items:center;line-height:1;
}
.gsx .wisth_tgl_2div{position:relative}

/* ---- form input primitive (the auth page carried its own copy; the cart and
   any future .gsx form need it too) ---- */
.gsx .input,.gsx select.input,.gsx textarea.input{
  width:100%;background:var(--white);border:1.5px solid var(--line-strong);
  border-radius:var(--r-m);padding:13px 16px;font:inherit;font-size:15px;color:var(--ink);transition:.16s;
}
.gsx .input::placeholder{color:rgba(16,26,51,.42);text-transform:none;letter-spacing:0;font-weight:500}
.gsx .input:hover{border-color:rgba(16,26,51,.4)}
.gsx .input:focus{outline:0;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(38,64,126,.13)}

/* ---- header mini-cart / mini-wishlist dropdown. The legacy theme sized the
   thumbnail as a wide box and floated the remove badge over it; under the brand
   header those rules only half-apply. Course thumbnails are square. ---- */
/* The dropdown panel itself: the legacy sheet animates it but never paints a
   background under the brand header, so it showed the hero band through it. */
.gsx .wisth_tgl_2div .menu_pro_wish{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-m);min-width:320px;overflow:hidden;
  transition:opacity .18s ease,visibility .18s ease; /* legacy fade is .5s — too slow for a cart */
}
.gsx .wisth_tgl_2div .menu_pro_wish .overflow-control{max-height:360px;overflow-y:auto}
.gsx .wisth_tgl_2div .menu_pro_btn{padding:12px 14px;background:var(--paper)}
.gsx .wisth_tgl_2div .path_pos_wish-2{padding:0}
.gsx .wisth_tgl_2div .menu_pro_wish-f-b{padding:12px 14px;border-bottom:1px solid var(--line)}
.gsx .wisth_tgl_2div .menu_pro_wish-f-b a{display:block;color:inherit}
.gsx .wisth_tgl_2div .menu_pro_wish-flex{display:flex;gap:12px;align-items:flex-start}
.gsx .wisth_tgl_2div .menu_pro_wish-flex .img{
  position:relative;flex:0 0 56px;width:56px;height:56px;border-radius:10px;overflow:visible;
}
.gsx .wisth_tgl_2div .menu_pro_wish-flex .img img{
  width:56px;height:56px;border-radius:10px;object-fit:cover;display:block;border:1px solid var(--line);
}
.gsx .wisth_tgl_2div .menu_pro_wish-flex .cart-minus{
  position:absolute;top:-6px;right:-6px;width:20px;height:20px;line-height:20px;border-radius:50%;
  background:var(--rose);color:#fff;display:grid;place-items:center;font-size:9px;cursor:pointer;
  box-shadow:0 1px 3px rgba(16,26,51,.25);
}
.gsx .wisth_tgl_2div .menu_pro_wish-flex .cart-minus i{margin:0;font-size:9px}
.gsx .wisth_tgl_2div .menu_pro_wish-flex .text{flex:1;min-width:0}
.gsx .wisth_tgl_2div .menu_pro_wish-flex .text h4{
  font-family:var(--body);font-size:14px;font-weight:700;line-height:1.3;margin:0 0 3px;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gsx .wisth_tgl_2div .menu_pro_wish-flex .text p{font-size:12px;color:var(--ink-2);opacity:.75;margin:0 0 4px}
.gsx .wisth_tgl_2div .menu_pro_wish-flex .spandiv{display:flex;gap:8px;align-items:baseline;font-size:14px;font-weight:700;color:var(--neem)}
.gsx .wisth_tgl_2div .menu_pro_wish-flex .spandiv del{font-weight:500;color:var(--ink-2);opacity:.6;font-size:12px}
/* header mini-cart: two carts, one icon. A labelled section per cart and a
   footer button per cart that has something in it. */
.gsx .wisth_tgl_2div .mini-sec{padding:10px 14px 4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--neem);background:var(--paper);border-top:1px solid var(--line)}
.gsx .wisth_tgl_2div .mini-sec:first-child{border-top:0}
.gsx .wisth_tgl_2div .menu_pro_wish-flex .text .qty-note{font-size:12.5px;color:var(--ink-2);opacity:.75;margin-top:2px}
.gsx .wisth_tgl_2div .menu_pro_btn{display:flex;flex-direction:column;gap:8px}

/* ---------- exit-intent offer ----------
   In gs-brand.css because the popup renders from the shared layout on EVERY
   frontend page, and every page-specific sheet is by definition not loaded on
   most of them. NOT .gsx-scoped for the same reason: the popup is a child of
   <body>, outside any page's .gsx wrapper, so a .gsx prefix would style
   nothing. Every selector is gsxi- prefixed instead, which no other block
   uses. */
.gsxi[hidden]{display:none}
.gsxi{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.gsxi-scrim{position:absolute;inset:0;background:rgba(16,26,51,.62)}
.gsxi-card{
  position:relative;max-width:430px;width:100%;background:#fff;border-radius:18px;
  padding:34px 30px 26px;text-align:center;box-shadow:0 30px 70px rgba(16,26,51,.35);
}
.gsxi-x{position:absolute;top:10px;right:14px;font-size:26px;line-height:1;background:none;border:0;color:#8A94A6;cursor:pointer}
.gsxi-x:hover{color:#101A33}
.gsxi-badge{
  display:inline-block;background:#D9531E;color:#fff;font-weight:800;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin-bottom:14px;
}
.gsxi-card h2{font-size:25px;line-height:1.25;margin:0 0 10px;color:#101A33}
.gsxi-card p{font-size:15px;color:#5A6478;margin:0 0 20px;line-height:1.55}
.gsxi-code{
  display:flex;align-items:stretch;gap:0;margin:0 0 18px;border:2px dashed #C9D2E0;border-radius:12px;overflow:hidden;
}
.gsxi-code code{
  flex:1;padding:13px 10px;font-size:19px;font-weight:800;letter-spacing:.14em;
  color:#101A33;background:#F7F9FC;font-family:inherit;
}
.gsxi-copy{border:0;background:#101A33;color:#fff;padding:0 20px;font-weight:700;font-size:14px;cursor:pointer}
.gsxi-copy:hover{background:#1d2b4f}
.gsxi-cta{
  display:block;background:#D9531E;color:#fff;text-decoration:none;font-weight:750;
  padding:14px;border-radius:11px;font-size:15.5px;
}
.gsxi-cta:hover{background:#c04516;color:#fff}
.gsxi-no{display:block;width:100%;margin-top:12px;background:none;border:0;color:#8A94A6;font-size:13.5px;cursor:pointer;text-decoration:underline}
@media (max-width:480px){
  .gsxi-card{padding:28px 20px 20px}
  .gsxi-card h2{font-size:21px}
  .gsxi-code code{font-size:16px;letter-spacing:.1em}
}