/* ===========================================================
   AmpleCart — premium.css
   A purely visual layer on top of style.css.

   COLOUR RULE: this file introduces NO new colours. Every value
   below is either an existing token from style.css (--brand,
   --magenta, --marigold, --teal, --ink, --line...) or plain
   white/black at low opacity used to create gloss and glass.
   Nothing here changes layout behaviour that JavaScript depends on.
   =========================================================== */

:root {
  /* Gloss recipes built from tokens that already exist */
  --gloss-white:  linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 100%);
  --gloss-sheen:  linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 52%);
  --glass-bg:     rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.65);
  --ring-brand:   0 0 0 1px rgba(109, 40, 217,.10);
  --edge-top:     inset 0 1px 0 rgba(255,255,255,.85);
  --edge-bottom:  inset 0 -1px 0 rgba(109, 40, 217,.06);
}

/* ===========================================================
   1. HEADER — glossy, glassy, premium
   =========================================================== */

.offer-strip {
  position: relative;
  overflow: hidden;
}
.offer-strip::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--gloss-sheen);
  pointer-events: none;
}

.site-header {
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 100%);
  backdrop-filter: saturate(185%) blur(18px);
  -webkit-backdrop-filter: saturate(185%) blur(18px);
  box-shadow: var(--edge-top), var(--edge-bottom);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255,255,255,.9);
  box-shadow: var(--edge-top), 0 10px 30px rgba(24, 17, 38,.10);
}

/* Brand mark gets a glossy dome */
.brand-mark {
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.45);
}
.brand-mark::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 52%;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0));
  border-radius: 13px 13px 40% 40%;
  pointer-events: none;
}
.brand-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Search field: inset glass */
.search-input {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,250,254,.95));
  box-shadow: inset 0 1px 2px rgba(24, 17, 38,.06);
}
.search-input:focus {
  box-shadow: 0 0 0 4px rgba(109, 40, 217,.12), inset 0 1px 2px rgba(24, 17, 38,.04);
}
.search-submit {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(109, 40, 217,.28), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Header action buttons: crafted pill on hover */
.action-link {
  position: relative;
  border-radius: 14px;
}
.action-link::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--gloss-white);
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity .22s var(--ease);
  pointer-events: none;
}
.action-link:hover::before {
  opacity: 1;
  border-color: var(--line);
  box-shadow: 0 4px 14px rgba(24, 17, 38,.08), var(--edge-top);
}
.action-link > * { position: relative; z-index: 1; }

/* Category nav: glossy chips with an active indicator */
.header-nav {
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(246,244,251,.92));
  border-top-color: rgba(233,228,244,.9);
}
.nav-chip {
  position: relative;
  border: 1px solid transparent;
  transition: all .22s var(--ease);
}
.nav-chip:hover {
  background: var(--gloss-white);
  border-color: var(--line);
  box-shadow: 0 4px 12px rgba(24, 17, 38,.07), var(--edge-top);
  transform: translateY(-1px);
}
.nav-chip.active {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(109, 40, 217,.30), inset 0 1px 0 rgba(255,255,255,.3);
}
/* Active underline indicator */
.nav-chip.active::after {
  content: '';
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -7px; width: 22px; height: 3px; border-radius: 99px;
  background: var(--grad-brand);
}
.chip-offer {
  border-color: rgba(214, 169, 40,.18);
}
.chip-offer:hover {
  background: var(--magenta);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(214, 169, 40,.28);
}

/* Dropdown: frosted glass */
.account-menu {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-color: var(--glass-border);
  box-shadow: 0 18px 46px rgba(24, 17, 38,.18), var(--edge-top);
}
.account-menu .dropdown-item { transition: all .18s var(--ease); }
.account-menu .dropdown-item:hover { transform: translateX(2px); }

/* Mobile menu + drawers: glass */
.mobile-menu, .cart-drawer, .filters.offcanvas {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.menu-link { transition: all .18s var(--ease); }
.menu-link:hover { transform: translateX(3px); }

/* ===========================================================
   2. BUTTONS & CARDS — gloss without changing colour
   =========================================================== */

.btn-brand, .btn-accent {
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-brand::after, .btn-accent::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0));
  pointer-events: none;
}
.btn-ghost {
  background: var(--gloss-white);
  box-shadow: var(--sh-sm), var(--edge-top);
}

.p-card {
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
  box-shadow: var(--sh-sm), var(--edge-top);
}
.p-card:hover {
  box-shadow: var(--sh-lg), var(--edge-top), var(--ring-brand);
}
.p-badge, .summary-card, .co-card, .acct-card, .adm-card {
  box-shadow: var(--sh-sm), var(--edge-top);
}

/* ===========================================================
   3. SECTION HEADINGS — a subtle premium flourish
   =========================================================== */

.sec-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2.2rem;
}
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .9rem;
  border-radius: var(--r-pill);
  background: var(--brand-light);
  border: 1px solid rgba(109, 40, 217,.14);
  color: var(--brand);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: .8rem;
}
.sec-eyebrow i { color: var(--marigold); }
.sec-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.18;
  margin-bottom: .6rem;
}
.sec-title .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-sub { color: var(--muted); font-size: .96rem; margin: 0; }

.sec-rule {
  width: 62px; height: 4px; border-radius: 99px;
  background: var(--grad-brand);
  margin: .9rem auto 0;
}

/* ===========================================================
   4. ABOUT US
   =========================================================== */

.about-sec { padding: 3rem 0 1rem; }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
}
.about-copy .sec-head { text-align: left; margin-left: 0; }
.about-copy .sec-rule { margin-left: 0; }
.about-copy p { color: var(--ink-2); line-height: 1.8; }

.about-points {
  list-style: none; padding: 0; margin: 1.4rem 0 0;
  display: grid; gap: .8rem;
}
.about-points li {
  display: flex; gap: .8rem; align-items: flex-start;
  font-size: .92rem; color: var(--ink-2);
}
.about-points .pt-ico {
  width: 34px; height: 34px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-light);
  color: var(--brand);
  border: 1px solid rgba(109, 40, 217,.12);
  box-shadow: var(--edge-top);
}
.about-points strong { display: block; color: var(--ink); font-size: .95rem; }

/* Glass visual panel */
.about-visual {
  position: relative;
  border-radius: var(--r-lg);
  padding: 2rem;
  background: var(--grad-brand);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  min-height: 300px;
  display: grid; align-content: center; gap: 1rem;
}
.about-visual::before {
  content: '';
  position: absolute; width: 320px; height: 320px; border-radius: 50%;
  top: -130px; right: -110px;
  background: radial-gradient(circle, rgba(245,158,11,.42), transparent 68%);
}
.about-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--gloss-sheen);
  opacity: .45;
  pointer-events: none;
}
.about-stat {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.about-stat b {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1.2;
}
.about-stat span { color: rgba(255,255,255,.86); font-size: .84rem; }

/* ===========================================================
   5. VISION & MISSION CARDS
   =========================================================== */

.vm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}
.vm-card {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.8rem;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,250,254,.92));
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm), var(--edge-top);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.vm-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-brand);
  opacity: .9;
}
.vm-card::after {
  content: '';
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  top: -110px; right: -90px;
  background: radial-gradient(circle, rgba(109, 40, 217,.09), transparent 70%);
  pointer-events: none;
  transition: transform .5s var(--ease);
}
.vm-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg), var(--edge-top), var(--ring-brand);
  border-color: transparent;
}
.vm-card:hover::after { transform: scale(1.35); }
.vm-card.is-mission::before { background: var(--grad-teal); }
.vm-card.is-mission::after { background: radial-gradient(circle, rgba(13,148,136,.10), transparent 70%); }

.vm-ico {
  width: 60px; height: 60px; border-radius: 18px;
  display: grid; place-items: center;
  font-size: 1.4rem; color: #fff;
  background: var(--grad-brand);
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.32);
  margin-bottom: 1.1rem;
  position: relative; z-index: 1;
}
.vm-card.is-mission .vm-ico {
  background: var(--grad-teal);
  box-shadow: 0 10px 26px rgba(13,148,136,.28), inset 0 1px 0 rgba(255,255,255,.32);
}
.vm-card h3 { font-size: 1.25rem; margin-bottom: .5rem; position: relative; z-index: 1; }
.vm-card p { color: var(--ink-2); line-height: 1.8; margin: 0; position: relative; z-index: 1; }
.vm-list {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; gap: .55rem; position: relative; z-index: 1;
}
.vm-list li {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .89rem; color: var(--ink-2);
}
.vm-list i { color: var(--brand); margin-top: .25rem; font-size: .8rem; }
.vm-card.is-mission .vm-list i { color: var(--teal); }

/* ===========================================================
   6. SOCIAL ICONS
   =========================================================== */

.social-row {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: .9rem; padding: 0; list-style: none;
}
.social-btn {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  transition: all .24s var(--ease);
  position: relative; overflow: hidden;
}
.social-btn::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  pointer-events: none;
}
.social-btn:hover {
  color: #fff;
  transform: translateY(-3px);
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(109, 40, 217,.4);
}
/* Not-yet-configured icons stay visible but inert */
.social-btn.is-idle {
  opacity: .45;
  cursor: default;
}
.social-btn.is-idle:hover {
  transform: none;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
  color: rgba(255,255,255,.82);
}

/* ===========================================================
   7. FOOTER
   =========================================================== */

.site-footer {
  position: relative;
  /* var(--ink) already resolves to the XTEND dark tone, so this needed
     no colour change — only the second radial highlight, which was
     still the old gold (#D6A928-ish) rather than the new magenta accent. */
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(109, 40, 217, .32), transparent 62%),
    radial-gradient(700px 340px at 88% 0%, rgba(217, 70, 239, .18), transparent 62%),
    var(--ink);
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand);
}
.footer-col h3 {
  position: relative;
  padding-bottom: .6rem;
}
.footer-col h3::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 26px; height: 2px; border-radius: 99px;
  background: var(--grad-brand);
}
.footer-col a {
  display: inline-flex; align-items: center; gap: .4rem;
  transition: all .2s var(--ease);
}
.footer-col a::before {
  content: '';
  width: 0; height: 1px; background: var(--marigold);
  transition: width .22s var(--ease);
}
.footer-col a:hover::before { width: 10px; }

.footer-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.8);
  font-size: .78rem; font-weight: 600;
  margin-top: .9rem;
}
.footer-badge i { color: var(--marigold); }

/* ===========================================================
   8. LEGAL / CONTENT PAGES
   =========================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-brand);
  color: #fff;
  padding: 2.8rem 0;
  margin-bottom: 2rem;
}
.page-hero::before {
  content: '';
  position: absolute; width: 380px; height: 380px; border-radius: 50%;
  top: -170px; right: -110px;
  background: radial-gradient(circle, rgba(245,158,11,.36), transparent 66%);
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--gloss-sheen); opacity: .4; pointer-events: none;
}
.page-hero .inner { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: .4rem; }
.page-hero p { color: rgba(255,255,255,.88); margin: 0; max-width: 46rem; }
.page-hero .updated {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1rem; padding: .35rem .85rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  font-size: .78rem; font-weight: 600;
  backdrop-filter: blur(8px);
}

.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-bottom: 3rem;
}
.legal-toc {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: linear-gradient(180deg, #fff, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem;
  box-shadow: var(--sh-sm), var(--edge-top);
}
.legal-toc h2 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin-bottom: .7rem;
}
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; display: grid; gap: .1rem; }
.legal-toc a {
  display: block; padding: .45rem .6rem; border-radius: 9px;
  font-size: .85rem; color: var(--ink-2); font-weight: 500;
  transition: all .18s var(--ease);
}
.legal-toc a:hover { background: var(--brand-light); color: var(--brand); transform: translateX(2px); }

.legal-body {
  background: linear-gradient(180deg, #fff, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  box-shadow: var(--sh-sm), var(--edge-top);
}
.legal-block { padding-bottom: 1.6rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.legal-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legal-block h2 {
  display: flex; align-items: center; gap: .7rem;
  font-size: 1.15rem; margin-bottom: .7rem;
  scroll-margin-top: 110px;
}
.legal-num {
  width: 30px; height: 30px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brand-light); color: var(--brand);
  font-size: .84rem; font-weight: 800;
  border: 1px solid rgba(109, 40, 217,.12);
}
.legal-block p, .legal-block li { color: var(--ink-2); line-height: 1.8; }
.legal-block ul { padding-left: 1.1rem; }
.legal-block li { margin-bottom: .45rem; }

.legal-note {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--brand-light);
  border: 1px solid rgba(109, 40, 217,.14);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  margin-top: 1.2rem;
}
.legal-note i { color: var(--brand); margin-top: .2rem; }
.legal-note p { margin: 0; font-size: .89rem; }

.contact-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem; margin-top: 1rem;
}
.contact-item {
  display: flex; gap: .75rem; align-items: center;
  padding: .95rem 1rem;
  border-radius: var(--r);
  background: linear-gradient(180deg, #fff, var(--surface-2));
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm), var(--edge-top);
}
.contact-item i {
  width: 38px; height: 38px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-light); color: var(--brand);
  border: 1px solid rgba(109, 40, 217,.12);
}
.contact-item span { font-size: .74rem; color: var(--muted); display: block; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.contact-item strong { font-size: .9rem; color: var(--ink); font-weight: 600; }
.contact-item a { color: var(--ink); }
.contact-item a:hover { color: var(--brand); }

/* ===========================================================
   9. RESPONSIVE
   =========================================================== */

@media (max-width: 991.98px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .about-visual { min-height: 220px; order: -1; }
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .legal-toc { position: static; }
  .legal-toc ol { display: flex; flex-wrap: wrap; gap: .35rem; }
  .legal-toc a { background: var(--surface-2); border: 1px solid var(--line); font-size: .8rem; }
}

@media (max-width: 767.98px) {
  .vm-grid { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .vm-card { padding: 1.5rem 1.3rem; }
  .vm-ico { width: 52px; height: 52px; font-size: 1.2rem; }
  .about-sec { padding: 2rem 0 .5rem; }
  .about-visual { padding: 1.4rem; }
  .page-hero { padding: 2rem 0; margin-bottom: 1.4rem; }
  .legal-body { padding: 1.3rem; }
  .legal-block h2 { font-size: 1.05rem; }
  .sec-head { margin-bottom: 1.6rem; }
  .social-row { justify-content: flex-start; }
  .nav-chip.active::after { display: none; }
}

@media (max-width: 414px) {
  .social-btn { width: 38px; height: 38px; font-size: .92rem; }
  .about-stat b { font-size: 1.35rem; }
}

/* Respect reduced-motion, matching style.css */
@media (prefers-reduced-motion: reduce) {
  .vm-card:hover, .social-btn:hover, .nav-chip:hover,
  .footer-col a:hover, .menu-link:hover { transform: none; }
}

/* ===========================================================
   10. FIXES
   =========================================================== */

/* --- The products-page "broken CSS" ---------------------------------
   #gridSkeleton carries the [hidden] attribute but also .p-grid, and
   .p-grid sets display:grid — which beats the browser's built-in
   [hidden]{display:none}. Result: eight grey shimmer cards rendered
   permanently under the real products. Same story for #cartDrawerFoot.
   One rule fixes every case, now and in future.
   JS is unaffected: it toggles the same attribute it always did.        */
[hidden] { display: none !important; }

/* ===========================================================
   11. HEADER — compact search, tidy button, left-aligned menu
   =========================================================== */

/* Menu: flush-left with the container, evenly spaced */
.nav-scroller {
  justify-content: flex-start;
  gap: .3rem;
  padding-left: 0;
  padding-right: 0;
}
.header-nav .container { display: flex; }
.nav-chip { padding: .42rem .95rem; letter-spacing: .01em; }

/* Header row: logo left, search left-of-centre, actions right */
.header-inner { gap: 18px; }
.header-search { margin-right: auto; }

/* ===========================================================
   12. PRICE FILTER — stop long amounts breaking the sidebar
   =========================================================== */
.price-presets { gap: .3rem; }
.price-presets .chip {
  font-size: .72rem;
  padding: .22rem .5rem;
  white-space: nowrap;
}
.price-inputs input { font-size: .9rem; padding: 0 .4rem; }

/* ===========================================================
   13. PRODUCTS WITH NO PRICE
   =========================================================== */
.price-ask {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--brand);
}

/* ===========================================================
   14. GOAL CARD (About page)
   =========================================================== */
.vm-card.is-goal::before { background: var(--grad-accent); }
.vm-card.is-goal::after { background: radial-gradient(circle, rgba(245,158,11,.12), transparent 70%); }
.vm-card.is-goal .vm-ico {
  background: var(--grad-accent);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(214, 169, 40,.26), inset 0 1px 0 rgba(255,255,255,.32);
}
.vm-card.is-goal .vm-list i { color: var(--marigold); }
.vm-grid.vm-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
  .vm-grid.vm-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .vm-grid.vm-three { grid-template-columns: minmax(0, 1fr); }
}


/* ===========================================================
   15. SEARCH BAR — consolidated
   -----------------------------------------------------------
   This lives at the end of the last stylesheet on purpose.
   responsive.css hides .search-submit below 992px, so any change
   here has to be deliberate about the cascade rather than
   accidentally overriding it. The icon is an inline SVG rather
   than a Font Awesome glyph, so the button can never render as
   an empty circle if the icon font is slow or blocked.
   =========================================================== */

.header-search {
  max-width: 420px;          /* was stretching the whole header */
  flex: 1 1 260px;
  margin-right: auto;        /* keeps the menu left-aligned */
}

/* The button sits inside the field, so the leading icon is redundant */
.header-search .search-icon { display: none; }

.header-search .search-input {
  height: 42px;
  padding-left: 18px;
  padding-right: 48px;       /* reserves room for the round button */
  font-size: 16px;           /* below 16px iOS zooms on focus */
  border-radius: var(--r-pill);
}
.header-search .search-input::placeholder { font-size: .84rem; }

/* Compact round button, shown at every width */
.header-search .search-submit {
  display: grid;
  place-items: center;
  position: absolute;
  top: 4px; bottom: 4px; right: 4px; left: auto;
  width: 36px; height: auto; padding: 0;
  border: none; border-radius: 50%;
  font-size: 0;              /* hides the word "Search" */
  overflow: hidden;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E"),
    linear-gradient(120deg, var(--brand) 0%, var(--emerald) 52%, var(--magenta) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 15px 15px, cover;
  box-shadow: 0 3px 10px rgba(109, 40, 217,.30), inset 0 1px 0 rgba(255,255,255,.30);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.header-search .search-submit::before,
.header-search .search-submit::after { content: none; }
.header-search .search-submit:hover {
  transform: scale(1.06);
  box-shadow: 0 5px 14px rgba(109, 40, 217,.4), inset 0 1px 0 rgba(255,255,255,.3);
}

/* Suggestions dropdown lines up with the narrower field */
.search-suggest { border-radius: var(--r); }

@media (max-width: 991.98px) {
  .header-search { max-width: none; flex: 1 1 auto; }
  /* responsive.css hides the button here; we keep it, so the padding
     it needs has to be restored explicitly. */
  .header-search .search-submit { display: grid; }
  .header-search .search-input { height: 40px; padding-right: 46px; padding-left: 16px; }
  .header-search .search-submit { width: 34px; }
}

@media (max-width: 414px) {
  .header-search .search-input { height: 38px; padding-right: 42px; padding-left: 14px; font-size: 16px; }
  .header-search .search-input::placeholder { font-size: .78rem; }
  .header-search .search-submit { width: 31px; background-size: 13px 13px, cover; }
}

@media (max-width: 320px) {
  .header-search .search-input { padding-right: 38px; }
  .header-search .search-submit { width: 28px; }
}

/* ===========================================================
   16. FILTER PANEL (#filterPanel) — the products-page breakage
   -----------------------------------------------------------
   The panel is markup `class="filters offcanvas-lg offcanvas-start"`,
   which makes Bootstrap treat it as a drawer below 992px and as a
   normal block above. Two of Bootstrap's own rules fight our styles:

     @media (min-width: 992px) {
       .offcanvas-lg { background-color: transparent !important; }
       .offcanvas-lg .offcanvas-body { display: flex; padding: 0; }
     }

   `display:flex` defaults to row, so the four filter blocks lined up
   SIDE BY SIDE inside a 268px column — that is the broken layout — and
   the transparent background removed the white card. Below 992px our
   own `.filters { position: static }` beat Bootstrap's `position:fixed`,
   so the drawer could not slide.

   Fixed with #id specificity so nothing has to change in the markup,
   the JS, or Bootstrap itself.
   =========================================================== */

/* ---- Desktop and laptop: a normal sticky sidebar card ---- */
@media (min-width: 992px) {
  #filterPanel.offcanvas-lg {
    background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm), var(--edge-top);
    position: sticky;
    top: calc(var(--header-h) + 60px);
    visibility: visible;
    transform: none;
  }
  /* Undo Bootstrap's flex row and restore the padding it zeroes out */
  #filterPanel .offcanvas-body {
    display: block;
    flex-grow: 0;
    padding: 1.1rem;
    overflow-y: visible;
    background-color: transparent !important;
  }
  #filterPanel .offcanvas-header { display: none; }
}

/* ---- Below 992px: a proper slide-out drawer again ---- */
@media (max-width: 991.98px) {
  #filterPanel.offcanvas-lg {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 1045;
    display: block;              /* beats .filters:not(.show):not(.offcanvas){display:none} */
    width: 88vw;
    max-width: 340px;
    border-radius: 0;
    border: none;
    box-shadow: 0 18px 46px rgba(24, 17, 38,.18);
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
  #filterPanel .offcanvas-body {
    display: block;
    padding: 1.1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #filterPanel .offcanvas-header {
    display: flex;
    border-bottom: 1px solid var(--line);
  }
  /* The filter scroll area should not fight the drawer's own scrolling */
  #filterPanel .filter-scroll { max-height: none; overflow: visible; }
}

/* Blocks stack vertically at every width, whatever Bootstrap does */
#filterPanel .filter-block { width: auto; display: block; }
#filterPanel .filter-form { display: block; }

/* ===========================================================
   17. HORIZONTAL MENU — premium rail, right aligned
   -----------------------------------------------------------
   The chips now sit inside a glass capsule pushed to the right
   edge of the container. Colours are unchanged: the rail is white
   at low opacity, and the active pill uses the existing brand
   gradient.
   =========================================================== */

.header-nav {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,244,251,.96));
  border-top: 1px solid rgba(233,228,244,.9);
}
.header-nav .container {
  display: flex;
  justify-content: flex-end;     /* right alignment */
  padding-block: .55rem;
}

.nav-scroller {
  display: flex;
  justify-content: flex-end;
  overflow: visible;             /* the Legal dropdown must escape */
  padding: 0;
}

/* The capsule */
.nav-rail {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .3rem;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,250,254,.9));
  border: 1px solid var(--line);
  box-shadow:
    0 6px 18px rgba(24, 17, 38,.07),
    var(--edge-top),
    inset 0 -1px 0 rgba(109, 40, 217,.05);
  position: relative;
}

/* Chips inside the rail */
.header-nav .nav-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .855rem;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}
.header-nav .nav-chip i:not(.chev) {
  font-size: .82rem;
  opacity: .65;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.header-nav .nav-chip .chev { font-size: .58rem; opacity: .45; margin-left: .1rem; }

.header-nav .nav-chip:hover {
  color: var(--brand);
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 4px 12px rgba(24, 17, 38,.09), var(--edge-top);
  transform: translateY(-1px);
}
.header-nav .nav-chip:hover i:not(.chev) { opacity: 1; transform: scale(1.06); }

/* Active pill — brand gradient, glossy top edge */
.header-nav .nav-chip.active {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow:
    0 6px 16px rgba(109, 40, 217,.32),
    inset 0 1px 0 rgba(255,255,255,.30);
  transform: none;
}
.header-nav .nav-chip.active i:not(.chev) { opacity: .95; }
.header-nav .nav-chip.active::after { display: none; }   /* the old underline */
.header-nav .nav-chip.active:hover { color: #fff; transform: translateY(-1px); }

/* Divider before the Legal group */
.nav-sep {
  width: 1px;
  height: 20px;
  margin: 0 .35rem;
  background: linear-gradient(180deg, transparent, var(--line-2), transparent);
  flex: none;
}

/* Legal dropdown */
.nav-drop { position: relative; }
.nav-drop-menu {
  margin-top: .55rem;
  min-width: 240px;
  border-radius: var(--r);
}
.nav-drop-btn[aria-expanded="true"] {
  color: var(--brand);
  background: var(--brand-light);
  border-color: rgba(109, 40, 217,.16);
}
.nav-drop-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-drop-btn .chev { transition: transform .2s var(--ease); }

/* Narrow desktops: let the rail scroll rather than wrap */
@media (max-width: 1100px) {
  .nav-rail { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav-rail::-webkit-scrollbar { display: none; }
  .header-nav .nav-chip { padding: .5rem .85rem; font-size: .82rem; }
}

/* ===========================================================
   18. HEADER REFINEMENT — logo area, spacing, dropdowns, mobile
   -----------------------------------------------------------
   Marketplace-style header: logo left, search beside it, actions
   right, menu rail right-aligned underneath. Gradient is used only
   for the active pill, hover accents and the brand mark — the
   header itself stays light so it reads as premium, not flashy.
   =========================================================== */

.site-header {
  box-shadow: var(--edge-top), 0 1px 0 rgba(233,228,244,.9);
}
.header-inner {
  min-height: 74px;
  gap: 20px;
  align-items: center;
}

/* ---- Logo ---- */
.brand { flex: none; gap: .6rem; }

.brand:hover 
.brand-image .brand-mark, .brand-image .brand-text { display: none; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; }
.brand-text { font-size: 1.22rem; letter-spacing: -0.02em; }

/* ---- Action icons on the right ---- */
.header-actions { gap: 2px; }
.action-link {
  padding: .55rem .7rem;
  font-size: .855rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}
.action-icon { font-size: 1.05rem; }

/* ---- Dropdowns: compact, rounded, soft ---- */
.account-menu, .nav-drop-menu {
  padding: .45rem;
  min-width: 226px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 16px 40px rgba(24, 17, 38,.16), var(--edge-top);
  animation: dropIn .22s var(--ease);
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.account-menu .dropdown-item, .nav-drop-menu .dropdown-item {
  padding: .55rem .75rem;
  border-radius: 10px;
  font-size: .87rem;
  font-weight: 500;
  color: var(--ink-2);
}
.account-menu .dropdown-item i, .nav-drop-menu .dropdown-item i {
  width: 17px; font-size: .84rem; opacity: .7;
}
.account-menu .dropdown-item:hover, .nav-drop-menu .dropdown-item:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
  transform: translateX(2px);
}
.account-menu .dropdown-item:hover i, .nav-drop-menu .dropdown-item:hover i { opacity: 1; }
.menu-hello {
  padding: .45rem .75rem .5rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--muted);
}
.dropdown-divider { margin: .35rem .25rem; border-color: var(--line); }

/* ---- Mobile header ---- */
@media (max-width: 991.98px) {
  .header-inner { min-height: 62px; gap: 10px; }
  
  .brand-mark { width: 36px; height: 36px; border-radius: 12px; font-size: .95rem; }
  .burger {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--gloss-white);
    border: 1px solid var(--line);
    box-shadow: var(--sh-sm), var(--edge-top);
  }
  .action-link { padding: .5rem .45rem; }
}

@media (max-width: 414px) {
  .header-inner { gap: 8px; }
  
  .brand-mark { width: 33px; height: 33px; }
  .brand-text { font-size: 1.02rem; }
}

@media (max-width: 360px) {
  
  .brand-text { display: none; }   /* mark only, so the menu never overflows */
}

/* ---- Cart page sign-in note ---- */
.checkout-signin-note {
  margin: .6rem 0 0;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
}
.checkout-signin-note i { color: var(--brand); }
.checkout-signin-note a { font-weight: 600; }

/* ===========================================================
   19. PAYMENT FLOW — login, payment screen, receipt
   Existing tokens only; no new colours.
   =========================================================== */
.pay-wrap { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 1.5rem; align-items: start; }
.pay-card, .pay-side {
  background: linear-gradient(180deg, #fff, var(--surface-2));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2rem; box-shadow: var(--sh), var(--edge-top);
}
.pay-side { padding: 1.3rem; position: sticky; top: calc(var(--header-h) + 20px); }
.pay-side h2 { font-size: 1.05rem; }
.pay-order-no { font-size: .82rem; color: var(--muted); margin-bottom: .8rem; }
.pay-side-note { font-size: .8rem; color: var(--muted); margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); }

/* On a page like /auth, there is no order-summary sidebar at all — only
   the .pay-card. With the grid-column fix above, that card would now
   correctly fall into the wide left column alone, but left un-styled
   that means stretching to fill however wide that column happens to
   be, which reads as an oddly wide login form rather than a fixed
   problem. Capped and centred so it reads as a normal card. */
.pay-wrap:not(:has(.pay-side)) .pay-card {
  grid-column: 1 / -1;
  max-width: 640px;
  margin: 0 auto;
}

.pay-card h1 { font-size: 1.5rem; margin-bottom: .35rem; }
.pay-sub { color: var(--muted); margin-bottom: 1.4rem; }
.pay-lock {
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;
  background: var(--grad-brand); color: #fff; font-size: 1.25rem;
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.3); margin-bottom: 1rem;
}
.pay-card .field { margin-bottom: 1rem; }
.pay-note {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .8rem; color: var(--muted); margin: 1.2rem 0 0;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.pay-note i { color: var(--brand); margin-top: .15rem; }

.pay-alert {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--danger-soft); border: 1px solid #FCA5A5; color: #991B1B;
  padding: .8rem 1rem; border-radius: var(--r); margin-bottom: 1rem; font-size: .87rem;
}
.pay-alert i { margin-top: .15rem; }

.pay-facts { display: grid; gap: .1rem; margin: 0 0 1.4rem; }
.pay-facts > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.pay-facts > div:last-child { border-bottom: none; }
.pay-facts dt { color: var(--muted); font-size: .84rem; margin: 0; }
.pay-facts dd { margin: 0; font-weight: 600; font-size: .88rem; text-align: right; word-break: break-all; }
.pay-facts .pay-amount dd {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--brand);
}
.pay-facts-wide > div { padding: .7rem 0; }

.pay-hint { font-size: .82rem; color: var(--muted); text-align: center; margin: .8rem 0 1rem; }

.pay-status {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem 1rem; border-radius: var(--r); font-size: .89rem; font-weight: 600;
  background: var(--brand-light); border: 1px solid rgba(109, 40, 217,.14); color: var(--brand-dark);
}
.pay-status.is-success { background: var(--ok-soft); border-color: #86EFAC; color: #15803D; }
.pay-status.is-failed  { background: var(--danger-soft); border-color: #FCA5A5; color: #991B1B; }
.pay-timer { text-align: center; font-size: .8rem; color: var(--muted); margin-top: .7rem; }
.pay-timer span { font-weight: 700; color: var(--ink); }

.pay-success { text-align: center; padding: 1.4rem 0 2rem; }
.pay-success h1 { font-size: 1.8rem; }
.pay-pending-ico, .pay-failed-ico {
  width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 1rem;
  display: grid; place-items: center; font-size: 2rem; color: #fff;
}
.pay-pending-ico { background: linear-gradient(135deg, #D97706, #E58A24); box-shadow: 0 12px 30px rgba(217,119,6,.32); }
.pay-failed-ico  { background: linear-gradient(135deg, #DC2626, var(--magenta)); box-shadow: 0 12px 30px rgba(220,38,38,.30); }
.mt-2 { margin-top: .5rem; }

@media (max-width: 991.98px) {
  .pay-wrap { grid-template-columns: minmax(0,1fr); }
  .pay-side { position: static; order: -1; }
}
@media (max-width: 767.98px) {
  .pay-card { padding: 1.3rem; }
  .pay-facts > div { flex-direction: column; gap: .15rem; }
  .pay-facts dd { text-align: left; }
}

/* ---- Authentication choice: two premium cards ---- */
.auth-choice {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 1rem;
  align-items: stretch;
  margin: 1.6rem 0 .4rem;
}
.auth-card {
  display: flex; flex-direction: column;
  padding: 1.7rem 1.4rem;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(251,250,254,.94));
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm), var(--edge-top);
  text-align: center;
  position: relative; overflow: hidden;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s;
}
.auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand); opacity: .9;
}
.auth-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg), var(--edge-top), var(--ring-brand);
  border-color: transparent;
}
.auth-ico {
  width: 62px; height: 62px; border-radius: 20px; margin: 0 auto 1rem;
  display: grid; place-items: center; font-size: 1.35rem; color: #fff;
  background: var(--grad-brand);
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.3);
}
.auth-ico-new { color: var(--ink); background: var(--grad-accent); box-shadow: 0 10px 26px rgba(214, 169, 40,.26), inset 0 1px 0 rgba(255,255,255,.3); }
.auth-card h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.auth-card p { color: var(--muted); font-size: .89rem; line-height: 1.65; margin-bottom: 1.2rem; flex: 1; }

.auth-or {
  display: grid; place-items: center; position: relative; padding: 0 .2rem;
}
.auth-or::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2), transparent);
}
.auth-or span {
  position: relative; z-index: 1;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .35rem .7rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--muted);
}

.auth-back {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: none; padding: .2rem 0 .9rem; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: .85rem;
}
.auth-back:hover { color: var(--brand); }

.auth-swap { text-align: center; font-size: .86rem; color: var(--muted); margin: 1rem 0 0; }
.auth-swap button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--brand); font-weight: 700; font-size: .86rem; text-decoration: underline;
}
.auth-swap button:hover { color: var(--magenta); }

.auth-section-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 800; color: var(--muted); margin: 0 0 .8rem;
}

.auth-done { text-align: center; padding: 2.2rem 1rem; }
.auth-done-tick {
  width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 1.1rem;
  display: grid; place-items: center; font-size: 1.9rem; color: #fff;
  background: linear-gradient(135deg, #16A34A, #4ADE80);
  box-shadow: 0 12px 30px rgba(22,163,74,.32);
  animation: tickPop .45s var(--ease);
}
.auth-done h2 { font-size: 1.35rem; margin-bottom: .35rem; }
.auth-done p { color: var(--muted); margin-bottom: 1rem; }

.pay-pane { display: none; }
.pay-pane.is-active { display: block; animation: fadeIn .25s var(--ease); }

.pos-choice { display: flex; gap: .5rem; }
.pos-opt {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem .5rem; border: 1.5px solid var(--line-2); border-radius: 12px;
  background: var(--surface-2); cursor: pointer; font-size: .87rem; font-weight: 600;
  transition: all .18s var(--ease);
}
.pos-opt i { font-size: .72rem; opacity: .6; }
.pos-opt:hover { border-color: var(--brand); background: var(--brand-light); }
.pos-opt:has(input:checked) {
  border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(109, 40, 217,.1);
}
.pos-opt:has(input:checked) i { opacity: 1; color: var(--brand); }
.pos-opt input { accent-color: var(--brand); }

@media (max-width: 767.98px) {
  /* Stacked on mobile: card, OR, card */
  .auth-choice { grid-template-columns: minmax(0,1fr); gap: .8rem; }
  .auth-or { padding: .2rem 0; }
  .auth-or::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
  .auth-card { padding: 1.3rem 1.1rem; }
  .auth-ico { width: 54px; height: 54px; font-size: 1.2rem; }
  .auth-card p { margin-bottom: 1rem; }
}

/* Priced-on-request items */
.pdp-ask-note {
  font-size: .86rem; color: var(--muted); margin: -.3rem 0 1rem;
  padding: .8rem 1rem; border-radius: var(--r);
  background: var(--brand-light); border: 1px solid rgba(109, 40, 217,.12);
}

/* ---- Admin: API settings ---- */
.api-row {
  display: grid; grid-template-columns: 300px minmax(0,1fr);
  gap: 1rem; align-items: start;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.api-row:last-of-type { border-bottom: none; }
.api-row label { font-weight: 600; font-size: .88rem; color: var(--ink); margin: 0; }
.api-row label small { display: block; color: var(--muted); font-weight: 400; font-size: .78rem; margin-top: .2rem; line-height: 1.5; }
.api-badge {
  display: inline-block; margin-left: .35rem; padding: .1rem .45rem;
  border-radius: var(--r-pill); font-size: .66rem; font-weight: 700;
  background: var(--brand-light); color: var(--brand-dark); vertical-align: middle;
}
.api-badge-file { background: var(--line); color: var(--muted); }
.api-input { display: flex; gap: .6rem; align-items: center; }
.api-input input {
  flex: 1; min-width: 0; height: 40px; padding: 0 .8rem; font-size: .87rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface-2);
}
.api-input input:focus { outline: none; border-color: var(--brand); background: #fff; }
.api-reset {
  display: inline-flex; align-items: center; gap: .3rem; flex: none;
  font-size: .78rem; color: var(--muted); font-weight: 600; margin: 0; cursor: pointer;
}
.api-reset input { accent-color: var(--danger); }
.api-test-result {
  padding: .7rem .9rem; border-radius: var(--r); margin-bottom: 1rem;
  font-size: .85rem; font-weight: 500; word-break: break-word;
}
.api-test-result.is-pending { background: var(--brand-light); color: var(--brand-dark); }
.api-test-result.is-ok { background: var(--ok-soft); color: #15803D; border: 1px solid #86EFAC; }
.api-test-result.is-bad { background: var(--danger-soft); color: #991B1B; border: 1px solid #FCA5A5; }
@media (max-width: 767.98px) {
  .api-row { grid-template-columns: minmax(0,1fr); gap: .4rem; }
}

/* ===========================================================
   20. MOBILE UI/UX PASS
   -----------------------------------------------------------
   Driven by a measured audit rather than guesswork. The layout
   already had no horizontal scroll and no overflow at any width;
   what it did have was controls below a comfortable touch size.
   Measured offenders and their sizes at 390px:

     .btn-close                31x31   (13 of them)
     .p-wish                   32x32
     .btn in product cards    154x33
     .burger                   37x40
     .search-input            238x38
     .search-submit            31x30
     .action-link.cart-link    33x33
     checkbox / radio          16x16
     .chip.js-price-preset     85x27
     .pw-toggle                36x36

   Everything below is visual only: no markup behaviour, no JS
   hooks and no colours change.
   =========================================================== */

/* ---------- 20.1 Touch targets ---------- */
@media (max-width: 991.98px) {

  /* Bootstrap's close button in every offcanvas and modal */
  .btn-close {
    width: 40px; height: 40px;
    padding: 0; border-radius: 12px;
    background-color: var(--surface-2);
    background-size: 13px;
    border: 1px solid var(--line);
    opacity: .75;
  }
  .btn-close:hover { opacity: 1; background-color: var(--brand-light); }

  /* Wishlist heart on product cards */
  .p-wish { width: 40px; height: 40px; font-size: 1rem; }

  /* Add to cart / Buy now / Enquire */
  .p-actions .btn { min-height: 44px; padding-block: .6rem; font-size: .82rem; }

  /* Hamburger. flex: none matters — without it the header's flex layout
     squeezes the button down to 32px on a 320px screen. */
  .burger { width: 44px; height: 44px; flex: none; }

  /* Header search */
  .header-search .search-input { height: 46px; padding-right: 54px; font-size: 16px; }
  .header-search .search-submit { width: 40px; top: 3px; bottom: 3px; }
  /* The payment screen reuses .icon-btn outside the header */
  .pay-card .icon-btn, .auth-back { min-width: 44px; min-height: 44px; }

  /* Header icon actions get a real hit area without growing visually */
  .action-link { min-width: 44px; min-height: 44px; padding: .5rem .6rem; }
  .bn-item { min-height: 52px; }

  /* Show/hide password */
  .pw-toggle { width: 42px; height: 42px; right: 4px; }

  /* Filter price chips */
  .price-presets .chip { min-height: 40px; padding: .55rem .8rem; font-size: .78rem; }

  /* Quantity steppers */
  .qty-btn { width: 44px; height: 46px; font-size: 1.15rem; }
  .qty-input { height: 46px; width: 54px; }
}

/* ---------- 20.2 Form controls ---------- */
.field input:not([type=checkbox]):not([type=radio]),
.field select,
.field textarea,
.filter-search input,
.price-inputs input,
.adm-toolbar input,
.adm-toolbar select,
.api-input input {
  border-radius: 12px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 4px rgba(109, 40, 217,.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .75; }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

/* Selects get a consistent arrow rather than the browser's */
.field select, .adm-toolbar select, .map-row select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23756B92' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 12px;
}

/* Checkboxes and radios: bigger control, whole row is the target */
.check-row, .radio-row {
  min-height: 44px;
  padding: .5rem .55rem;
  gap: .65rem;
}
.check-row input, .radio-row input,
.field input[type=checkbox], .field input[type=radio] {
  width: 20px; height: 20px; flex: none; accent-color: var(--brand); cursor: pointer;
}

/* Validation states */
.field .is-invalid { border-color: var(--danger); background: var(--danger-soft); }
.field .is-invalid:focus { box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
.field-error { display: flex; align-items: center; gap: .35rem; }
.field-error::before { content: '\26A0'; font-size: .78rem; }

@media (max-width: 767.98px) {
  .field input:not([type=checkbox]):not([type=radio]),
  .field select, .field textarea {
    height: 48px; font-size: 16px;   /* 16px stops iOS zooming on focus */
    padding-inline: .9rem;
  }
  .field textarea { height: auto; padding-block: .8rem; }
  .field label { font-size: .86rem; margin-bottom: .4rem; }
  .form-grid { gap: 1rem; }
  .btn-lg { min-height: 50px; font-size: .95rem; }
  .co-card, .acct-card, .summary-card, .pay-card, .auth-card { padding: 1.15rem; }
}

/* ---------- 20.3 Modals and drawers ---------- */
.offcanvas, .modal-content {
  border: none;
  box-shadow: 0 -8px 40px rgba(24, 17, 38,.2);
}
.offcanvas-header, .modal-header {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.offcanvas-body, .modal-body {
  padding: 1.1rem;
  overscroll-behavior: contain;   /* stop scroll chaining to the page behind */
}
.offcanvas-backdrop.show { opacity: .45; backdrop-filter: blur(2px); }

@media (max-width: 767.98px) {
  .offcanvas-bottom { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 88vh; }
  .modal-dialog { margin: .75rem; }
  .modal-content { border-radius: var(--r-lg); }
  /* Never let a drawer sit under the phone's home indicator */
  .cart-drawer .offcanvas-body,
  .mobile-menu .offcanvas-body,
  .filters.offcanvas .offcanvas-body { padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)); }
}

/* ---------- 20.4 Mobile menu ---------- */
@media (max-width: 991.98px) {
  .mobile-menu { width: 88vw; max-width: 360px; }
  .menu-link {
    min-height: 48px;
    padding: .7rem .8rem;
    font-size: .92rem;
    border-radius: 12px;
  }
  .menu-link i { font-size: .9rem; }
  .menu-link:active { background: var(--brand-light); }
  .menu-user { min-height: 60px; }
  .menu-auth .btn { min-height: 46px; }

  /* Accordion group inside the mobile menu */
  .menu-acc {
    width: 100%;
    display: flex; align-items: center; gap: .7rem;
    min-height: 48px; padding: .7rem .8rem;
    background: none; border: none; border-radius: 12px;
    color: var(--ink-2); font-weight: 600; font-size: .92rem;
    font-family: inherit; text-align: left; cursor: pointer;
  }
  .menu-acc i:first-child { width: 18px; color: var(--muted); font-size: .85rem; }
  .menu-acc .acc-chev { margin-left: auto; font-size: .7rem; color: var(--muted); transition: transform .25s var(--ease); }
  .menu-acc[aria-expanded="true"] { background: var(--brand-light); color: var(--brand); }
  .menu-acc[aria-expanded="true"] .acc-chev { transform: rotate(180deg); }
  .menu-sub { padding-left: .6rem; border-left: 2px solid var(--line); margin: .2rem 0 .2rem .8rem; }
  .menu-sub .menu-link { min-height: 44px; font-size: .88rem; }
}

/* ---------- 20.5 Widgets and cards ---------- */
@media (max-width: 767.98px) {
  /* Stat and summary widgets go one per row, as specified */
  .stat-row, .adm-stats { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  /* Small related widgets may sit two-up where that reads better */
  .trust-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .trust-item { flex-direction: column; text-align: center; gap: .45rem; }
  .contact-card { grid-template-columns: minmax(0, 1fr); }
  .adm-stat { padding: .95rem; }
  .adm-stat .as-num { font-size: 1.45rem; }
}
@media (max-width: 380px) {
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 20.6 Tables ---------- */
.adm-table-wrap, .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r);
  scrollbar-width: thin;
}
/* A hint that there is more to the right, rather than a silent cut-off */
@media (max-width: 767.98px) {
  .adm-table-wrap { position: relative; }
  .adm-table-wrap::after {
    content: '';
    position: sticky; right: 0; top: 0; float: right;
    width: 26px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(246,244,251,.9));
    pointer-events: none;
  }
  .spec-table th { width: 40%; }
}

/* ---------- 20.7 Buttons ---------- */
.btn { -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px) scale(.985); }
@media (max-width: 767.98px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .success-actions .btn, .adm-head .btn { width: 100%; }
  .adm-head { flex-direction: column; align-items: stretch; gap: .7rem; }
  .adm-toolbar { flex-direction: column; align-items: stretch; }
  .adm-toolbar input, .adm-toolbar select, .adm-toolbar .btn { width: 100%; }
}

/* ---------- 20.8 Typography and spacing ---------- */
@media (max-width: 767.98px) {
  body { font-size: 15px; }
  h1 { line-height: 1.2; }
  .page-title { font-size: 1.35rem; }
  .section { padding: 1.6rem 0 .4rem; }
  .sec-title { font-size: 1.3rem; }
  .co-title { font-size: 1rem; }
  .legal-body { padding: 1.15rem; }
  .legal-block h2 { font-size: 1rem; gap: .55rem; }
  .legal-num { width: 26px; height: 26px; font-size: .78rem; }
}

/* ===========================================================
   21. ADMIN PANEL — mobile pass
   -----------------------------------------------------------
   The customer account panel and checkout measured clean, because
   they use the shared .field / .btn / card styles. The admin panel
   did not: it has its own header, toolbars and tables. Measured at
   390px before this section:

     44px of horizontal page scroll on API settings
     <code> holding the callback URL ran 44px past the viewport
     button.icon-btn.d-lg-none (menu toggle)   19x42  — flex squeeze
     button.btn-close                          16x6
     a.btn.btn-ghost (top bar)                 65x34
     input in .api-input                      185x21

   Tables are NOT in that list: they are wider than the screen by
   design and scroll inside .adm-table-wrap, so the page itself
   never scrolls sideways.
   =========================================================== */

/* Long URLs, tokens and log lines must wrap rather than push the page */
code, .adm-sub code, .legal-note code {
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.adm-card code {
  display: inline-block;
  padding: .12rem .4rem;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: .8rem;
}

@media (max-width: 991.98px) {
  /* Admin header: the menu toggle was being squeezed to 19px wide */
  .admin-top { min-height: 60px; gap: .6rem; padding: 0 .85rem; }
  .admin-top .icon-btn {
    flex: none;
    width: 44px; height: 44px;
    background: var(--gloss-white);
    border: 1px solid var(--line);
    box-shadow: var(--sh-sm), var(--edge-top);
  }
  .admin-top .btn { min-height: 40px; padding-inline: .8rem; }
  .admin-top-right { gap: .4rem; flex: none; }
  .admin-brand { font-size: .95rem; min-width: 0; }
  .admin-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-brand em { display: none; }

  /* Close button inside the admin drawer was collapsing to 16x6 */
  .offcanvas-header .btn-close { flex: none; width: 40px; height: 40px; }

  /* Admin side drawer */
  .admin-side.offcanvas { width: 82vw; max-width: 320px; }
  .admin-link { min-height: 48px; font-size: .92rem; }

  .admin-shell { padding: .85rem; gap: .85rem; }
  .admin-main { min-width: 0; }
}

@media (max-width: 767.98px) {
  /* API settings rows */
  .api-input { flex-direction: column; align-items: stretch; gap: .5rem; }
  .api-input input { height: 46px; font-size: 16px; }
  .api-reset { min-height: 40px; padding: .4rem .2rem; }
  .api-reset input { width: 20px; height: 20px; }
  .api-row label { font-size: .9rem; }
  .api-badge { display: inline-block; margin: .25rem 0 0 0; }

  /* Field mapping rows */
  .map-row select, .map-row input { height: 46px; font-size: 16px; }

  /* Tables: keep the horizontal scroll contained and readable */
  .adm-table { min-width: 560px; font-size: .82rem; }
  .adm-table th, .adm-table td { padding: .55rem .6rem; }
  .adm-table-wrap { margin-inline: -.15rem; }

  /* Stats and cards */
  .adm-card { padding: 1rem; }
  .adm-card h2 { font-size: 1rem; }
  .acct-card-head { flex-direction: column; align-items: stretch; gap: .6rem; }
  .acct-card-head .btn { width: 100%; }

  /* Logs and JSON blocks */
  .log-box, .json-box { font-size: .72rem; padding: .8rem; max-height: 50vh; }

  /* Admin login card */
  .admin-login { padding: 1.4rem; }
}

@media (max-width: 380px) {
  .admin-top .btn span { display: none; }   /* icon-only when space is tight */
  .adm-table { min-width: 520px; }
}

/* ---- 21.1 Admin controls: sizing that survives ----------------------
   The admin inputs kept measuring 18-21px tall even though a `height`
   was declared for them. Rather than keep chasing the cascade, these
   use min-height plus vertical padding, which produces the same result
   and cannot be defeated by a competing height declaration.          */
.adm-toolbar input,
.adm-toolbar select,
.api-input input,
.map-row input,
.map-row select,
.adm-card input[type="text"],
.adm-card input[type="search"],
.adm-card input[type="number"],
.adm-card select {
  min-height: 44px;
  padding-block: .55rem;
  line-height: 1.4;
}
.admin-top .btn, .adm-head .btn, .acct-card-head .btn, .js-api-test {
  min-height: 42px;
  min-width: 42px;
}
.adm-card .btn-sm, .adm-table .btn-sm { min-height: 40px; }

@media (max-width: 767.98px) {
  .adm-toolbar input, .adm-toolbar select,
  .api-input input, .map-row input, .map-row select {
    min-height: 48px;
    font-size: 16px;      /* keeps iOS from zooming when focused */
  }
  .js-api-test { width: 100%; }
}

/* ---- 21.2 Admin sidebar drawer -------------------------------------
   Same trap as #filterPanel earlier. The sidebar is
   class="admin-side offcanvas-lg offcanvas-start", so below 992px
   Bootstrap makes it position:fixed and slides it in. Our own
   `.admin-side { position: static }` in responsive.css overrode that,
   leaving an empty full-width grid row where the drawer should have
   been -- a large blank gap under the admin header on every page.
   #id specificity puts it back without touching Bootstrap or markup. */
@media (max-width: 991.98px) {
  #adminNav.offcanvas-lg {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 1045;
    width: 82vw; max-width: 320px;
    border: none; border-radius: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 18px 46px rgba(24, 17, 38,.18);
  }
  #adminNav .offcanvas-body { display: block; padding: .8rem; overflow-y: auto; }
  #adminNav .offcanvas-header { display: flex; border-bottom: 1px solid var(--line); }
  #adminNav .admin-nav { box-shadow: none; border: none; background: none; padding: 0; }
  /* One column, and no phantom row for the drawer */
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Already-signed-in banner on the choice screen ---- */
.auth-signed {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.2rem; margin-bottom: 1.1rem;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ok-soft), rgba(220,252,231,.6));
  border: 1px solid #86EFAC;
}
.auth-signed-ico {
  width: 44px; height: 44px; flex: none; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, #16A34A, #4ADE80);
  box-shadow: 0 6px 16px rgba(22,163,74,.28);
}
.auth-signed-body { flex: 1; min-width: 0; }
.auth-signed-body strong { display: block; font-size: .98rem; color: #14532D; }
.auth-signed-body small { color: #15803D; font-size: .8rem; }
.auth-signed-acts { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.auth-or-text {
  text-align: center; font-size: .8rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  margin: 0 0 .6rem;
}
@media (max-width: 767.98px) {
  .auth-signed { flex-direction: column; align-items: stretch; text-align: center; }
  .auth-signed-ico { margin: 0 auto; }
  .auth-signed-acts { flex-direction: column; }
  .auth-signed-acts .btn { width: 100%; }
}

.menu-note { font-size: .8rem; color: var(--muted); text-align: center; margin: .5rem 0 0; line-height: 1.5; }

/* ---- Checkout: what we already know about this member ----
   .checkout-layout is a two-column grid. This banner sits inside it, so
   without an explicit span it takes column 1 and pushes the form into the
   narrow 360px column meant for the summary. Span the full width. */
.checkout-layout > .mem-known { grid-column: 1 / -1; }
.mem-known {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .95rem 1.1rem; margin-bottom: 1.2rem;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--brand-light), rgba(241,233,254,.55));
  border: 1px solid rgba(109, 40, 217,.16);
}
.mem-known-ico {
  width: 42px; height: 42px; flex: none; border-radius: 13px;
  display: grid; place-items: center; color: #fff; font-size: 1.05rem;
  background: var(--grad-brand); box-shadow: var(--sh-brand);
}
.mem-known-body { flex: 1; min-width: 0; }
.mem-known-body strong { display: block; font-size: .95rem; color: var(--brand-dark); }
.mem-known-body small { color: var(--ink-2); font-size: .82rem; line-height: 1.5; }
.mem-known-switch {
  font-size: .8rem; font-weight: 700; color: var(--brand);
  text-decoration: underline; flex: none;
}
.fld-saved { color: var(--ok); font-size: .72rem; }
@media (max-width: 575.98px) {
  .mem-known { flex-direction: column; align-items: flex-start; text-align: left; }
  .mem-known-switch { align-self: flex-end; }
}

/* ---- Member panel ---- */
.mem-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.mem-head h1 { font-size: 1.6rem; margin-bottom: .2rem; }
.mem-sub { color: var(--muted); margin: 0; font-size: .9rem; }
.mem-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .85rem; margin-bottom: 1.2rem; }
.mem-stat {
  padding: 1.1rem 1.2rem; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff, var(--surface-2));
  border: 1px solid var(--line); box-shadow: var(--sh-sm), var(--edge-top);
}
.mem-stat span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--muted); }
.mem-stat strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--brand); }
.mem-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.mem-card {
  padding: 1.4rem; border-radius: var(--r-lg); margin-bottom: 1rem;
  background: linear-gradient(180deg, #fff, var(--surface-2));
  border: 1px solid var(--line); box-shadow: var(--sh-sm), var(--edge-top);
}
.mem-card h2 { font-size: 1.05rem; margin-bottom: .3rem; }
.mem-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.mem-note { font-size: .8rem; color: var(--muted); margin-bottom: 1rem; }
.mem-facts { margin: 0; }
.mem-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.mem-facts > div:last-child { border-bottom: none; }
.mem-facts dt { color: var(--muted); font-size: .84rem; margin: 0; }
.mem-facts dd { margin: 0; font-weight: 600; font-size: .88rem; text-align: right; }
.mem-missing { color: var(--muted); font-weight: 400; font-style: italic; }
.mem-address { font-style: normal; line-height: 1.8; font-size: .9rem; color: var(--ink-2); margin: 0; }
.mem-empty-inline { display: flex; gap: .7rem; align-items: center; color: var(--muted); font-size: .86rem; }
.mem-empty-inline i { font-size: 1.2rem; color: var(--line-2); }

.mem-orders { display: grid; gap: .85rem; }
.mem-order { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; background: #fff; }
.mo-top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.mo-num { font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; }
.mo-top small { display: block; color: var(--muted); font-size: .78rem; }
.mo-badges { display: flex; gap: .35rem; flex-wrap: wrap; }
.mo-items { list-style: none; padding: 0; margin: 0 0 .7rem; }
.mo-items li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.mo-items li:last-child { border-bottom: none; }
.mo-name { font-size: .88rem; }
.mo-name small { display: block; color: var(--muted); font-size: .76rem; }
.mo-amt { font-weight: 700; white-space: nowrap; }
.mo-foot { display: flex; justify-content: space-between; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .9rem; }
.mo-foot strong { color: var(--brand); font-size: 1.05rem; }

@media (max-width: 767.98px) {
  .mem-grid { grid-template-columns: minmax(0,1fr); }
  .mem-stats { grid-template-columns: minmax(0,1fr); }
  .mem-head { flex-direction: column; }
  .mem-head .btn { width: 100%; }
  .mem-facts > div { flex-direction: column; gap: .1rem; }
  .mem-facts dd { text-align: left; }
  .mem-card { padding: 1.1rem; }
}

/* Fields owned by the member panel, not editable here */
.field input.is-locked, .field select.is-locked {
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: not-allowed;
  border-style: dashed;
}
.field input.is-locked:focus { box-shadow: none; border-color: var(--line-2); }

/* ===========================================================
   22. ADMIN LAYOUT — desktop
   -----------------------------------------------------------
   Measured problems on a 1440px screen:
     * the offcanvas header ("Menu" + close button) was rendering
       on desktop, above the nav, where it means nothing
     * the mobile menu toggle was visible next to the brand
     * stat cards wrapped 6 + 1, leaving a lonely card on row two
   =========================================================== */
@media (min-width: 992px) {
  /* An offcanvas-lg is a plain block at lg and up, so its header must go */
  #adminNav .offcanvas-header { display: none !important; }
  .admin-top .icon-btn.d-lg-none,
  .admin-top .burger { display: none !important; }

  /* A real fixed sidebar: it stays put while the content scrolls */
  .admin-shell {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
    max-width: 1500px;
    margin-inline: auto;
    padding: 1.3rem 1.5rem 2.5rem;
  }
  .admin-side {
    position: sticky;
    top: 78px;                      /* clears the sticky top bar */
    align-self: start;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  /* Bootstrap keeps .offcanvas-body as display:flex even when an
     offcanvas-lg is behaving as a plain block at lg and up. That laid the
     menu out in a ROW, clipped at the sidebar width. Force a column. */
  #adminNav .offcanvas-body { display: block; padding: 0; overflow: visible; }
  #adminNav .admin-nav {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fff, var(--surface-2));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm), var(--edge-top);
    padding: .5rem;
  }
}

/* Nav items: one clear active state, comfortable rows */
.admin-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem; margin-bottom: .15rem;
  border-radius: 12px;
  color: var(--ink-2); font-weight: 600; font-size: .9rem;
  transition: all .18s var(--ease);
}
.admin-link i { width: 18px; text-align: center; font-size: .88rem; color: var(--muted); }
.admin-link:hover { background: var(--brand-light); color: var(--brand-dark); }
.admin-link:hover i { color: var(--brand); }
.admin-link.active {
  background: var(--grad-brand); color: #fff;
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.28);
}
.admin-link.active i { color: #fff; }

/* Top bar: nothing may overlap the brand */
.admin-top {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: .8rem;
  min-height: 62px; padding: 0 1.2rem;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.admin-brand {
  display: flex; align-items: center; gap: .6rem;
  min-width: 0; font-weight: 800; font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-top-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none; }

/* Stat cards: even rows at every width, no orphan */
.adm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: .9rem;
  margin-bottom: 1.2rem;
}
.adm-stat {
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff, var(--surface-2));
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm), var(--edge-top);
  min-width: 0;
}
.adm-stat .as-label {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700; color: var(--muted); margin-bottom: .3rem;
}
.adm-stat .as-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.6rem; font-weight: 800; line-height: 1.1;
}

/* The revenue bars were spilling past their card */
.rev-chart { display: flex; align-items: flex-end; gap: .5rem; height: 160px; overflow: hidden; padding-top: .5rem; }
.rev-bar { flex: 1; min-width: 0; border-radius: 8px 8px 0 0; background: var(--grad-brand); }

/* ---- Admin: settings screen ---- */
.set-intro { display: flex; gap: .8rem; align-items: flex-start; }
.set-intro i { color: var(--brand); font-size: 1.1rem; margin-top: .15rem; }
.set-intro p { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.6; }
.set-group { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; margin-bottom: 1rem; }
.set-group i { color: var(--brand); font-size: .95rem; }
.set-row {
  display: grid; grid-template-columns: 290px minmax(0, 1fr);
  gap: 1rem; align-items: start;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.set-row:last-of-type { border-bottom: none; }
.set-row > label { font-weight: 600; font-size: .89rem; color: var(--ink); margin: 0; }
.set-row > label small {
  display: block; font-weight: 400; font-size: .78rem;
  color: var(--muted); margin-top: .2rem; line-height: 1.5;
}
.set-input { display: flex; gap: .6rem; align-items: center; }
.set-input input, .set-input select, .set-input textarea {
  flex: 1; min-width: 0; min-height: 42px;
  padding: .5rem .8rem; font-size: .88rem;
  border: 1.5px solid var(--line-2); border-radius: 11px;
  background: var(--surface-2); color: var(--ink);
}
.set-input input:focus, .set-input select:focus, .set-input textarea:focus {
  outline: none; border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 4px rgba(109, 40, 217,.12);
}
.set-src {
  flex: none; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: .2rem .5rem; border-radius: var(--r-pill);
}
.set-src.is-db  { background: var(--ok-soft); color: #15803D; }
.set-src.is-def { background: var(--line); color: var(--muted); }

/* On/off switch */
.set-toggle { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; margin: 0; }
.set-toggle input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.set-switch {
  width: 46px; height: 26px; border-radius: 99px; flex: none;
  background: var(--line-2); position: relative; transition: background .22s var(--ease);
}
.set-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .22s var(--ease);
}
.set-toggle input:checked + .set-switch { background: var(--grad-brand); }
.set-toggle input:checked + .set-switch::after { transform: translateX(20px); }
.set-toggle input:focus-visible + .set-switch { box-shadow: 0 0 0 4px rgba(109, 40, 217,.18); }
.set-toggle-text { font-size: .85rem; font-weight: 600; color: var(--ink-2); }

.set-save { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.set-save span { font-size: .84rem; color: var(--muted); }

@media (max-width: 767.98px) {
  .set-row { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .set-input { flex-wrap: wrap; }
  .set-input input, .set-input select, .set-input textarea { min-height: 46px; font-size: 16px; }
  .set-save .btn { width: 100%; }
}

/* ===========================================================
   23. CHECKOUT ON A PHONE
   -----------------------------------------------------------
   responsive.css sets .checkout-side { order: -1 }, so the summary and
   the Place order button appeared BEFORE the address fields on a phone.
   Measured: summary at 210px, first field at 942px. The form comes
   first now, and a pinned bar keeps the total and button reachable.
   =========================================================== */
@media (max-width: 991.98px) {
  .checkout-layout > .checkout-main { order: 1; }
  .checkout-layout > .checkout-side { order: 2; }
  .checkout-layout > .mem-known     { order: 0; }
  .checkout-side .summary-card { position: static; }

  /* Room for the pinned bar, including the phone's home indicator */
  .page-checkout .checkout-layout { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* The bottom nav and the action bar cannot both own the bottom of the
     screen. Mid-purchase, the action bar wins. */
  .page-checkout .bottom-nav { display: none !important; }

  /* Fields fill their card, whatever grid span the markup gave them */
  .checkout-main .field input:not([type=checkbox]):not([type=radio]),
  .checkout-main .field select,
  .checkout-main .field textarea { width: 100%; }
  .checkout-main .form-grid { grid-template-columns: minmax(0, 1fr); }
  .checkout-main .form-grid > .field { grid-column: auto; width: 100%; }

  /* Tighter cards mean less scrolling */
  .checkout-main .co-card { padding: 1.05rem; margin-bottom: .8rem; }
  .co-title { font-size: 1rem; margin-bottom: .8rem; }
  .summary-card { padding: 1.05rem; }
  .co-items li { padding: .5rem 0; }
  .pay-method { padding: .8rem .9rem; min-height: 62px; }

  .co-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px rgba(24, 17, 38,.10);
  }
  .co-sticky-total { flex: none; line-height: 1.2; }
  .co-sticky-total small { display: block; font-size: .7rem; color: var(--muted); }
  .co-sticky-total strong {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem;
    font-weight: 800; color: var(--brand);
  }
  .co-sticky .btn { flex: 1; min-height: 48px; }
}

@media (min-width: 992px) { .co-sticky { display: none; } }

/* ---- Our own UPI payment panel: no third-party branding ---- */
.upi-pay { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; margin: 1.2rem 0; }
.upi-qr { text-align: center; }
.upi-qr > div {
  display: inline-block; padding: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm), var(--edge-top);
}
.upi-qr canvas, .upi-qr img { display: block; }
.upi-qr-note { font-size: .78rem; color: var(--muted); margin: .6rem 0 0; }
.upi-qr-fail { font-size: .82rem; color: var(--danger); margin: 0; max-width: 200px; }
.upi-apps-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--muted); margin: 0 0 .6rem;
}
.qr-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.qr-actions .btn { flex: 1 1 150px; min-height: 48px; }
.qr-shared { font-size: .8rem; color: var(--ok); font-weight: 600; margin: .6rem 0 0; }
.upi-help { font-size: .82rem; color: var(--muted); line-height: 1.6; margin: .8rem 0 0; }
.upi-help strong { color: var(--brand); }
#qrDownload { min-height: 48px; }
.upi-app {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .9rem; margin-bottom: .5rem;
  border: 1.5px solid var(--line-2); border-radius: 14px;
  background: linear-gradient(180deg, #fff, var(--surface-2));
  color: var(--ink); font-weight: 700; font-size: .9rem; min-height: 52px;
  transition: all .18s var(--ease);
}
.upi-app i { width: 26px; text-align: center; font-size: 1.05rem; color: var(--brand); }
.upi-app:hover { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); transform: translateY(-1px); }
.upi-app:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) {
  .upi-pay { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .upi-qr > div { padding: 10px; }
  .qr-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.qr-actions .btn { flex: 1 1 150px; min-height: 48px; }
.qr-shared { font-size: .8rem; color: var(--ok); font-weight: 600; margin: .6rem 0 0; }
.upi-help { font-size: .82rem; color: var(--muted); line-height: 1.6; margin: .8rem 0 0; }
.upi-help strong { color: var(--brand); }
#qrDownload { min-height: 48px; }
.upi-app { min-height: 54px; }
}

/* Money that has not actually arrived is shown apart from money that has */
.mem-stat-note, .as-note {
  display: block; font-style: normal; font-size: .72rem;
  color: var(--marigold); font-weight: 700; margin-top: .2rem;
}

/* ---- Coupons ---- */
.cp-box { padding-top: .6rem; margin-top: .3rem; border-top: 1px dashed var(--line); }
.cp-form { display: flex; gap: .45rem; }
.cp-form input {
  flex: 1; min-width: 0; height: 42px; padding: 0 .8rem;
  border: 1.5px dashed var(--line-2); border-radius: 11px;
  background: var(--surface-2); font-size: .88rem; text-transform: uppercase;
}
.cp-form input:focus { outline: none; border-color: var(--brand); border-style: solid; background: #fff; }
.cp-form .btn { flex: none; min-height: 42px; }
.cp-applied {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .75rem; border-radius: 11px;
  background: var(--ok-soft); border: 1px solid #86EFAC; color: #15803D; font-size: .85rem;
}
.cp-applied i { margin-right: .2rem; }
.cp-applied a { color: #15803D; font-size: 1.2rem; line-height: 1; text-decoration: none; padding: 0 .2rem; }
.cp-saving strong { color: var(--ok); }
.cp-error { color: var(--danger); font-size: .8rem; margin: .45rem 0 0; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.cp-grid .cp-wide { grid-column: 1 / -1; }
.cp-grid .field small { display: block; font-size: .74rem; color: var(--muted); margin-top: .2rem; }
.adm-table tr.is-off { opacity: .55; }
.badge-muted { background: var(--line); color: var(--muted); }

/* ---- Invoice ---- */
.inv-wrap { max-width: 860px; margin: 1.5rem auto; padding: 0 1rem; }
.inv-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-bottom: 1rem; }
.invoice {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2.2rem; box-shadow: var(--sh-sm);
}
.inv-head { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding-bottom: 1.2rem; border-bottom: 2px solid var(--line); margin-bottom: 1.2rem; }
.inv-head h1 { font-size: 1.35rem; margin-bottom: .3rem; }
.inv-addr, .inv-gstin { font-size: .82rem; color: var(--muted); margin: 0 0 .15rem; line-height: 1.55; }
.inv-meta { text-align: right; }
.inv-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--muted); }
.inv-no { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--brand); margin: .15rem 0 .5rem; }
.inv-meta dl { margin: 0; }
.inv-meta dl > div { display: flex; justify-content: flex-end; gap: .6rem; font-size: .82rem; }
.inv-meta dt { color: var(--muted); margin: 0; }
.inv-meta dd { margin: 0; font-weight: 700; }
.inv-parties { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; margin-bottom: 1.4rem; }
.inv-parties p { font-size: .86rem; line-height: 1.65; margin: .3rem 0 0; color: var(--ink-2); }
.inv-table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; }
.inv-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: .5rem .6rem; border-bottom: 1.5px solid var(--line); }
.inv-table td { padding: .6rem; border-bottom: 1px solid var(--line); font-size: .87rem; vertical-align: top; }
.inv-table td small { display: block; color: var(--muted); font-size: .74rem; }
.inv-table tfoot td { border-bottom: none; padding: .35rem .6rem; }
.inv-table .ta-r { text-align: right; } .inv-table .ta-c { text-align: center; }
.inv-discount td { color: var(--ok); }
.inv-total td { font-size: 1.05rem; font-weight: 800; border-top: 2px solid var(--line); padding-top: .6rem; }
.inv-total td:last-child { color: var(--brand); }
.inv-foot { border-top: 1px solid var(--line); padding-top: 1rem; }
.inv-foot p { font-size: .82rem; color: var(--muted); margin: 0 0 .3rem; }
.inv-note { font-size: .74rem; }

@media print {
  .site-header, .header-nav, footer, .bottom-nav, .offer-strip, .no-print,
  .breadcrumbs, .co-sticky { display: none !important; }
  body { background: #fff; }
  .inv-wrap { margin: 0; padding: 0; max-width: none; }
  .invoice { border: none; box-shadow: none; padding: 0; border-radius: 0; }
  a[href]:after { content: none !important; }
}
@media (max-width: 575.98px) {
  .inv-parties { grid-template-columns: minmax(0,1fr); }
  .invoice { padding: 1.2rem; }
  .inv-meta { text-align: left; }
  .inv-meta dl > div { justify-content: flex-start; }
  /* The table itself, not just the sections around it. Scrolls inside
     its own box rather than pushing the whole page sideways, with a
     minimum width so cells stay legible instead of squeezing down to
     nothing. */
  .inv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1.2rem 1.2rem;
    padding: 0 1.2rem;
  }
  .inv-table { min-width: 560px; margin-bottom: 0; }
}
@media print {
  .inv-table-wrap { overflow: visible; margin: 0; padding: 0; }
  .inv-table { min-width: 0; }
}
.mem-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.dispatch-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.dispatch-form input {
  flex: 1; min-width: 220px; min-height: 44px; padding: .5rem .8rem;
  border: 1.5px solid var(--line-2); border-radius: 11px; background: var(--surface-2); font-size: .88rem;
}
.dispatch-form input:focus { outline: none; border-color: var(--brand); background: #fff; }
@media (max-width: 575.98px) { .dispatch-form input, .dispatch-form .btn { width: 100%; } }

/* ---- Gateway log ---- */
.gw-filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.gw-filters .chip {
  padding: .4rem .8rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 700;
  border: 1.5px solid var(--line-2); color: var(--ink-2); background: var(--surface-2);
}
.gw-filters .chip:hover { border-color: var(--brand); color: var(--brand); }
.gw-filters .chip.is-on { background: var(--grad-brand); color: #fff; border-color: transparent; }
.gw-msg { max-width: 280px; font-size: .82rem; }
.gw-msg details summary { cursor: pointer; color: var(--brand); font-size: .78rem; margin-top: .2rem; }
.gw-msg pre {
  white-space: pre-wrap; word-break: break-all; font-size: .72rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem; margin: .4rem 0 0; max-height: 200px; overflow: auto;
}
.badge-danger { background: var(--danger-soft); color: #991B1B; }
.mo-actions { display: flex; gap: .4rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.mo-actions .btn { flex: 1; }

/* ---- Gateway wallet ---- */
.wallet-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: .9rem; margin-bottom: 1.1rem; }
.wallet-balance {
  padding: 1.3rem 1.4rem; border-radius: var(--r-lg); color: #fff;
  background: var(--grad-brand); box-shadow: var(--sh-brand);
}
.wb-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .85; }
.wb-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2rem; font-weight: 800; line-height: 1.2; }
.wb-note { display: block; font-style: normal; font-size: .76rem; margin-top: .2rem; opacity: .9; }
.wb-warn { font-weight: 700; }
.wallet-forms { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.wallet-forms h2 { font-size: 1rem; margin-bottom: .8rem; }
.wallet-forms h2 i { color: var(--brand); font-size: .85rem; }
.wl-form .field { margin-bottom: .7rem; }
.wl-form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
.wl-form input {
  width: 100%; min-height: 44px; padding: .5rem .8rem; font-size: .9rem;
  border: 1.5px solid var(--line-2); border-radius: 11px; background: var(--surface-2);
}
.wl-form input:focus { outline: none; border-color: var(--brand); background: #fff; }
.wl-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.wl-filters input, .wl-filters select {
  min-height: 40px; padding: .4rem .7rem; font-size: .85rem;
  border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface-2);
}
.wl-filters input { max-width: 160px; }
.wl-cr { color: var(--ok); font-weight: 700; }
.wl-db { color: var(--danger); font-weight: 700; }
.wl-desc { max-width: 220px; font-size: .82rem; }
@media (max-width: 991.98px) {
  .wallet-top { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wallet-forms { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 575.98px) {
  .wallet-top { grid-template-columns: minmax(0,1fr); }
  .wl-filters input { max-width: none; flex: 1 1 140px; }
}
.wl-when { white-space: nowrap; font-size: .82rem; }
.wl-cr, .wl-db { white-space: nowrap; }
.adm-table td small { display: block; color: var(--muted); font-size: .72rem; font-weight: 400; }

/* ---- Dashboard: wallet widget ---- */
.wallet-widget {
  display: grid; grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 1.2rem; align-items: center;
}
.ww-balance {
  padding: 1.2rem 1.3rem; border-radius: var(--r-lg); color: #fff;
  background: var(--grad-brand); box-shadow: var(--sh-brand);
}
.ww-balance span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .85; }
.ww-balance strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.85rem; font-weight: 800; line-height: 1.2; }
.ww-balance em { display: block; font-style: normal; font-size: .74rem; margin-top: .25rem; opacity: .92; }
.ww-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; }
.ww-fact span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); }
.ww-fact strong { font-size: 1.05rem; font-weight: 800; }
.ww-fact small { display: block; font-size: .74rem; color: var(--muted); font-weight: 400; }
.ww-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
@media (max-width: 767.98px) {
  .wallet-widget { grid-template-columns: minmax(0, 1fr); }
  .ww-actions .btn { flex: 1; }
}
.gst-form { display: flex; gap: .25rem; align-items: center; }
.gst-form input {
  width: 68px; min-height: 34px; padding: .25rem .4rem; font-size: .8rem;
  border: 1.5px solid var(--line-2); border-radius: 8px; background: var(--surface-2);
}
.gst-form input[name=hsn_code] { width: 76px; }
.gst-form input:focus { outline: none; border-color: var(--brand); background: #fff; }
.gst-form button {
  min-height: 34px; padding: 0 .5rem; border: none; border-radius: 8px;
  background: var(--brand-light); color: var(--brand); cursor: pointer;
}
.gst-form button:hover { background: var(--grad-brand); color: #fff; }

/* ---- Member sign in ---- */
.home-login { padding: 1.4rem 0; }
.hl-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.3rem 1.5rem; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--brand-light), rgba(241,233,254,.5));
  border: 1px solid rgba(109, 40, 217,.16);
}
.hl-text h2 { font-size: 1.15rem; margin-bottom: .2rem; color: var(--brand-dark); }
.hl-text p { margin: 0; font-size: .88rem; color: var(--ink-2); }
.hl-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.hl-forgot { font-size: .84rem; color: var(--brand); text-decoration: underline; }

.auth-card {
  max-width: 460px; margin: 0 auto; padding: 2rem;
  background: linear-gradient(180deg, #fff, var(--surface-2));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-md), var(--edge-top);
}
.auth-head { text-align: center; margin-bottom: 1.4rem; }
.auth-ico {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto .8rem;
  display: grid; place-items: center; color: #fff; font-size: 1.3rem;
  background: var(--grad-brand); box-shadow: var(--sh-brand);
}
.auth-head h1 { font-size: 1.35rem; margin-bottom: .3rem; }
.auth-head p { margin: 0; font-size: .88rem; color: var(--muted); }
.auth-card .field { margin-bottom: 1rem; }
.auth-card label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.auth-card input {
  width: 100%; min-height: 48px; padding: .6rem .9rem; font-size: .95rem;
  border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface-2);
}
.auth-card input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(109, 40, 217,.12); }
.auth-error {
  padding: .6rem .8rem; margin: 0 0 .9rem; border-radius: 10px; font-size: .85rem;
  background: var(--danger-soft); color: #991B1B; border: 1px solid #FCA5A5;
}
.auth-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; font-size: .85rem; }
.auth-links a { color: var(--brand); }
.auth-note { margin-top: 1.1rem; font-size: .8rem; color: var(--muted); line-height: 1.6; text-align: center; }
.auth-body { font-size: .92rem; line-height: 1.7; color: var(--ink-2); }
.auth-steps { padding-left: 1.1rem; font-size: .88rem; line-height: 1.8; color: var(--ink-2); margin-bottom: 1.2rem; }
@media (max-width: 575.98px) {
  .auth-card { padding: 1.4rem; }
  .hl-inner { flex-direction: column; align-items: flex-start; }
  .hl-actions { width: 100%; }
  .hl-actions .btn { flex: 1; }
}

/* ===========================================================
   24. CREATE-ACCOUNT FORM
   -----------------------------------------------------------
   Measured: inputs were 180px wide inside a 734px form. The
   fields sit in .form-grid .field.col-6, but nothing gave the
   inputs a width, so they fell back to the browser default of
   about 20 characters regardless of the column they were in.
   =========================================================== */
/* Flex, not grid.
   The 12-track grid inherited from style.css would not resolve the spans
   here — a .col-6 kept measuring 180px inside a 734px, 12-column grid, so
   the field was landing on one track's worth of space rather than six.
   Two flexed columns need no track arithmetic and cannot drift. */
#memberRegisterForm .form-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.1rem;
  width: 100%;
}
#memberRegisterForm .form-grid > .field {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}
#memberRegisterForm .form-grid > .field.col-6 { flex: 1 1 calc(50% - .5rem); max-width: calc(50% - .5rem); }
#memberRegisterForm .form-grid > .field.col-4 { flex: 1 1 calc(33.333% - .67rem); max-width: calc(33.333% - .67rem); }

#memberRegisterForm .field { margin-bottom: 0; }
#memberRegisterForm .field label {
  display: block; font-size: .84rem; font-weight: 600;
  color: var(--ink); margin-bottom: .3rem;
}
#memberRegisterForm .field input:not([type=radio]):not([type=checkbox]),
#memberRegisterForm .field select {
  width: 100%;                     /* the fix */
  min-height: 48px;
  padding: .6rem .9rem;
  font-size: .95rem;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
}
#memberRegisterForm .field input:focus,
#memberRegisterForm .field select:focus {
  outline: none; border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 4px rgba(109, 40, 217,.12);
}
#memberRegisterForm .field .input-wrap { position: relative; }
#memberRegisterForm .field .input-wrap input { padding-right: 2.8rem; }
#memberRegisterForm .pw-toggle {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer; padding: .35rem;
}
#memberRegisterForm .pw-toggle:hover { color: var(--brand); }

/* Position: two equal cards, not two cramped boxes */
#memberRegisterForm .pos-options,
#memberRegisterForm .radio-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
#memberRegisterForm .radio-card,
#memberRegisterForm .pos-option {
  display: flex; align-items: center; gap: .55rem;
  padding: .8rem .9rem; min-height: 52px;
  border: 1.5px solid var(--line-2); border-radius: 12px;
  background: var(--surface-2); cursor: pointer; font-size: .9rem; font-weight: 600;
  transition: all .18s var(--ease);
}
#memberRegisterForm .radio-card:hover { border-color: var(--brand); }
#memberRegisterForm .radio-card.is-on,
#memberRegisterForm .radio-card:has(input:checked) {
  border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark);
}
.auth-section-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--muted); margin: 1.4rem 0 .8rem;
}
.auth-section-label:first-of-type { margin-top: 0; }
#memberRegisterForm h1 { font-size: 1.4rem; margin-bottom: .3rem; }
#memberRegisterForm .pay-sub { color: var(--muted); font-size: .9rem; margin-bottom: 1.2rem; }
.auth-back {
  background: none; border: none; color: var(--brand); font-weight: 600;
  font-size: .86rem; padding: 0 0 .8rem; cursor: pointer;
}
.auth-ico-new { background: var(--grad-brand); }

@media (max-width: 767.98px) {
  /* One field per row on a phone. Two half-width boxes side by side are
     harder to fill in than one full-width box per line. */
  #memberRegisterForm .form-grid { gap: .85rem; }
  #memberRegisterForm .form-grid > .field.col-6,
  #memberRegisterForm .form-grid > .field.col-4 { flex: 1 1 100%; max-width: 100%; }
  #memberRegisterForm .field input:not([type=radio]):not([type=checkbox]),
  #memberRegisterForm .field select { min-height: 50px; font-size: 16px; }
  #memberRegisterForm h1 { font-size: 1.25rem; }
}

/* ===========================================================
   25. LOGO
   -----------------------------------------------------------
   One rule set, four places. Every logo is constrained by HEIGHT
   and given width:auto, so any shape fits without distortion —
   a wide banner, a square mark or a tall crest all scale to the
   space rather than stretching to fill it. object-fit:contain is
   the safety net if a browser sizes it differently.
   =========================================================== */





.mem-title { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }




@media (max-width: 767.98px) {
  /* The bigger desktop logo squeezed the phone search box to 70px, which
     is unusable. On a phone the logo is capped tighter so the search keeps
     a workable width. */
}

/* Printed invoices: keep the logo crisp and never let it break the page */
@media print {
  
}
.logo-preview {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--r);
  background: var(--surface-2); border: 1px dashed var(--line-2);
}
.logo-preview span { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--muted); }
.logo-preview img { height: 44px; width: auto; max-width: 240px; object-fit: contain; }
/* The register form is wider than the sign-in card: it has two columns */
.auth-card-wide { max-width: 620px; }

/* ===========================================================
   26. HEADER ALIGNMENT
   -----------------------------------------------------------
   The search box used to stretch from the logo across the whole
   middle of the header. Pushing it right groups it with the
   account and cart actions and gives the logo room to breathe.
   Only alignment and the logo's size change — no markup moves.
   =========================================================== */
@media (min-width: 992px) {
  .header-search {
    margin-left: auto;         /* pushes the search away from the brand */
    flex: 0 1 460px;
    max-width: 460px;
  }
  .header-actions { flex: none; }
}

/* Below 992px the search already drops to its own row, so it stays
   full width there — squeezing it right on a phone would make it
   unusable. */

/* Below 992px the search sits beside the brand and must not be crushed. */
@media (max-width: 991.98px) {
  .header-search { flex: 1 1 auto; min-width: 0; margin-left: .5rem; }
}
@media (max-width: 575.98px) {
  
  .header-inner { gap: 8px; }
}

/* On the very narrowest phones the logo, search and cart cannot all
   share one row. The logo shrinks further rather than the search, which
   has to stay usable. */
@media (max-width: 360px) {
  
  .header-inner { gap: 6px; }
  .header-search { margin-left: .3rem; }
}
/* The User ID is generated now, so a member may be seeing theirs for the
   first time. Make it easy to spot and copy. */
.mem-id {
  display: inline-block; padding: .1rem .45rem; border-radius: 7px;
  background: var(--brand-light); color: var(--brand-dark);
  font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: .01em;
  user-select: all;
}
.auth-ok {
  padding: .6rem .8rem; margin: 0 0 .9rem; border-radius: 10px; font-size: .85rem;
  background: var(--ok-soft); color: #15803D; border: 1px solid #86EFAC;
}

/* ---- Roles and admin users ---- */
.role-inline select {
  min-height: 36px; padding: .25rem .5rem; font-size: .84rem;
  border: 1.5px solid var(--line-2); border-radius: 9px; background: var(--surface-2);
}
.role-inline select:focus { outline: none; border-color: var(--brand); background: #fff; }
.role-form { margin-top: .4rem; }
.role-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem; margin-bottom: 1rem;
}
.role-form .field { margin-bottom: 0; }
.role-form label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .25rem; }
.role-form input, .role-form select {
  width: 100%; min-height: 44px; padding: .5rem .8rem; font-size: .9rem;
  border: 1.5px solid var(--line-2); border-radius: 11px; background: var(--surface-2);
}
.role-form input:focus, .role-form select:focus { outline: none; border-color: var(--brand); background: #fff; }
.field-hint { display: block; font-size: .74rem; color: var(--muted); margin-top: .25rem; }
.perm-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .5rem; margin-bottom: 1.1rem;
}
.perm-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem .8rem; border: 1.5px solid var(--line-2); border-radius: 11px;
  background: var(--surface-2); cursor: pointer; font-size: .86rem; font-weight: 600;
  transition: all .18s var(--ease);
}
.perm-item:hover { border-color: var(--brand); }
.perm-item i { color: var(--muted); font-size: .85rem; width: 16px; text-align: center; }
.perm-item input { width: 17px; height: 17px; accent-color: var(--brand); }
.perm-item:has(input:checked) { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.perm-item:has(input:checked) i { color: var(--brand); }
.role-matrix th { font-size: .68rem; }
.role-matrix td { font-size: .84rem; }
.role-yes { color: var(--ok); }
.role-no  { color: var(--line-2); }
.adm-table td small { display: block; color: var(--muted); font-size: .74rem; font-weight: 400; }
.d-inline { display: inline; }
.mt-4 { margin-top: 1.6rem; }
.denied-card { text-align: center; padding: 3rem 1.5rem; }
.denied-ico {
  width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 1rem;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--warn-soft); color: var(--warn);
}
.denied-card h1 { font-size: 1.3rem; margin-bottom: .5rem; }
.denied-card p { color: var(--muted); margin-bottom: 1.3rem; }
@media (max-width: 767.98px) {
  .role-matrix { min-width: 760px; }
}
.grant-cell form { display: inline; margin-left: .3rem; }
.grant-cell small { display: block; color: var(--muted); font-size: .72rem; margin-top: .2rem; }
.adm-note-lock {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .85rem; margin: 0 0 1rem;
  border-radius: 10px; font-size: .82rem;
  background: var(--warn-soft); color: #8A5510; border: 1px solid #E58A24;
}
.adm-note-lock i { font-size: .78rem; }

/* ---- Reconciliation ---- */
.rec-banner {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1rem 1.2rem; border-radius: var(--r); margin-bottom: 1.1rem;
}
.rec-banner i { font-size: 1.15rem; margin-top: .1rem; }
.rec-banner strong { display: block; font-size: .95rem; }
.rec-banner span { font-size: .85rem; opacity: .9; }
.rec-ok   { background: var(--ok-soft);   color: #15803D; border: 1px solid #86EFAC; }
.rec-warn { background: var(--warn-soft); color: #8A5510; border: 1px solid var(--marigold); }
.rec-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .9rem; margin-bottom: 1.1rem;
}
.as-sub { font-size: .76rem; color: var(--muted); margin: .2rem 0 0; }
.as-bad { color: var(--danger); font-weight: 700; }
.rec-lbl { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; }
.rec-line { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; line-height: 1.6; margin: 0; }
.rec-good { color: var(--ok); }
.rec-bad  { color: var(--danger); }
.imp-bar {
  background: var(--marigold); color: var(--ink); font-size: .85rem; font-weight: 600;
  padding: .55rem 1rem; text-align: center;
}
.imp-bar a { color: var(--ink); text-decoration: underline; margin-left: .5rem; }

/* ---- Table search and export ---- */
.tt-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.tt-search { display: flex; align-items: center; gap: .5rem; position: relative; flex: 1 1 280px; }
.tt-search > i {
  position: absolute; left: 12px; color: var(--muted); font-size: .82rem; pointer-events: none;
}
.tt-search input[type=search] {
  flex: 1 1 auto; min-width: 0; min-height: 42px;
  padding: .5rem .8rem .5rem 2.2rem; font-size: .9rem;
  border: 1.5px solid var(--line-2); border-radius: 11px; background: var(--surface-2);
}
.tt-search input[type=search]:focus { outline: none; border-color: var(--brand); background: #fff; }
.tt-export { display: flex; gap: .4rem; }
@media (max-width: 575.98px) {
  .tt-bar { flex-direction: column; align-items: stretch; }
  .tt-export .btn { flex: 1; }
}
.tt-hint { font-size: .82rem; color: var(--muted); }

/* ===========================================================
   LOGO — one place, 100px everywhere
   -----------------------------------------------------------
   There were previously two competing sets of these rules in
   this file, which is why the size never behaved predictably.
   This is now the only one.

   Height is fixed and width is auto, so a wide wordmark, a
   square mark and a tall crest all render at 100px tall without
   being stretched. max-width only stops an extremely wide image
   from pushing everything else off the row.
   =========================================================== */
.brand-logo,
.brand-logo-dark,
.adm-logo,
.mem-logo,
.inv-logo {
  display: block;
  height: 100px;
  width: auto;
  object-fit: contain;
}

.brand-logo      { max-width: 420px; filter: drop-shadow(0 2px 6px rgba(24, 17, 38, .14)); }

/* Footer logo, on the dark background.
   You asked specifically for this to invert rather than sit on a white
   badge, so it does now. The caveat still applies: this only looks
   right if the logo file has a transparent background. If it has a
   solid white background instead, inverting turns that white into
   solid black around the mark. If that happens, the fix is the
   opt-out below — LOGO_DARK_URL — with a version of the logo made for
   a dark background, rather than trying to fix it with more CSS. */
.brand-logo-dark {
  height: 100px;
  max-width: 420px;
  filter: brightness(0) invert(1);
}
/* If a dedicated light-on-dark file is uploaded via LOGO_DARK_URL, it
   is assumed to already be footer-ready, so the invert is skipped. */
.brand-logo-dark.is-preset { filter: none; }
.adm-logo        { max-width: 360px; }
.mem-logo        { max-width: 360px; }
.inv-logo        { max-width: 380px; margin-bottom: .6rem; }

.brand:hover .brand-logo { transform: translateY(-1px); }

/* The bars that hold them have to be taller than 100px, or the logo
   overflows its own header. */
.header-inner  { min-height: 124px; }
.admin-topbar,
.adm-topbar,
.admin-brand   { min-height: 116px; }
.mem-title     { align-items: center; }

/* On a phone the logo and the search cannot share one row at this size,
   so the header wraps and the logo takes its own line. The search then
   keeps full width instead of being crushed to 70px. */
@media (max-width: 767.98px) {
  /* Two rows: menu, logo and cart together on the first; the search
     full-width on the second. The logo stays 100px and the search stays
     usable, which one row at this size cannot give you. */
  .header-inner   { flex-wrap: wrap; row-gap: 10px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .brand          { order: 2; flex: 1 1 auto; justify-content: center; min-width: 0; }
  .brand-logo     { max-width: min(240px, 58vw); margin: 0 auto; }
  .menu-toggle,
  .js-menu-open   { order: 1; flex: 0 0 auto; }
  .header-actions { order: 3; flex: 0 0 auto; margin-left: 0; }
  .header-search  { order: 4; flex: 1 1 100%; margin-left: 0; max-width: none; }
  .adm-logo, .mem-logo, .inv-logo { max-width: min(260px, 70vw); }
}

@media print {
  .inv-logo { height: 100px; max-width: 340px; }
}
.sponsor-note { display: block; font-size: .8rem; margin-top: .3rem; font-weight: 600; }
.sponsor-ok       { color: var(--ok); }
.sponsor-bad      { color: var(--danger); }
.sponsor-checking { color: var(--muted); font-weight: 400; }
.reset-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.reset-keep { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .9rem; line-height: 2; }
.reset-keep i { color: var(--ok); margin-right: .5rem; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #991B1B; color: #fff; }
#confirm { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: .04em; font-weight: 700; }
.danger-card { border-color: rgba(185,28,28,.28); }
.danger-card h2 { color: var(--danger); }
/* Member profile picture. Square and cropped, so a portrait or a landscape
   photo both sit neatly beside the heading rather than resizing the row. */
.mem-photo {
  width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--line);
  background: var(--surface-2);
}
@media (max-width: 575.98px) { .mem-photo { width: 52px; height: 52px; } }

/* ---- Pagination ---- */
.pg-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.pg-count { margin: 0; font-size: .85rem; color: var(--muted); }
.pg-count strong { color: var(--ink); }
.pg-links { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.pg-link {
  min-width: 38px; height: 38px; padding: 0 .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-size: .86rem; font-weight: 600; text-decoration: none;
  transition: all .16s var(--ease);
}
.pg-link:hover { border-color: var(--brand); color: var(--brand); }
.pg-link.is-on { background: var(--grad-brand); border-color: transparent; color: #fff; }
.pg-gap { padding: 0 .3rem; color: var(--muted); }
.pg-per { font-size: .85rem; color: var(--muted); }
.pg-per select {
  min-height: 38px; padding: .3rem .5rem; margin-left: .3rem;
  border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface-2);
  font-size: .85rem;
}
@media (max-width: 575.98px) {
  .pg-bar { justify-content: center; }
  .pg-count { flex: 1 1 100%; text-align: center; }
}

/* ---- Member list: orders and register date ---- */
.ta-nowrap { white-space: nowrap; }
.orders-pill {
  min-width: 40px; padding: .25rem .6rem; border-radius: 99px; cursor: pointer;
  border: 1.5px solid var(--line-2); background: var(--surface-2);
  font-size: .86rem; font-weight: 700; color: var(--ink); line-height: 1.3;
}
.orders-pill:hover { border-color: var(--brand); color: var(--brand); }
.orders-pill.is-open { background: var(--grad-brand); border-color: transparent; color: #fff; }
.orders-pill small { display: block; font-size: .64rem; font-weight: 600; opacity: .75; }
.orders-row > td { background: var(--surface-2); padding: 0 !important; }
.orders-inner { padding: 1rem 1.2rem; }
.orders-head { margin: 0 0 .6rem; font-size: .82rem; color: var(--muted); }
.orders-mini { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.orders-mini th {
  text-align: left; padding: .45rem .7rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line);
}
.orders-mini td { padding: .45rem .7rem; border-bottom: 1px solid var(--line); font-size: .84rem; }
.orders-mini tr:last-child td { border-bottom: none; }
.orders-more { margin: .7rem 0 0; font-size: .84rem; }

/* ---- Direct Selling Login ---- */
/* Specificity note: .header-nav .nav-chip earlier in this file is two
   classes, so a single .nav-chip-ds loses to it and the gold never showed.
   Matching that shape rather than reaching for !important. */
.header-nav .nav-chip.nav-chip-ds {
  background: var(--grad-accent);
  color: var(--ink);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(214, 169, 40, .35);
}
.header-nav .nav-chip.nav-chip-ds:hover {
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--sh-gold);
}
.header-nav .nav-chip.nav-chip-ds i:not(.ds-out) { color: var(--ink); opacity: 1; }
.ds-out { font-size: .62rem; opacity: .65; margin-left: .15rem; }
.menu-link-ds { color: var(--brand-dark); font-weight: 700; }
.mem-panel-btn { white-space: nowrap; }
.mem-panel-btn .ds-out { font-size: .6rem; opacity: .7; }
@media (max-width: 575.98px) { .mem-panel-btn { width: 100%; justify-content: center; } }

/* ---- Sales dashboard ---- */
.chart { width: 100%; height: 220px; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .linePath { fill: none; stroke: var(--emerald); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .pt { fill: #fff; stroke: var(--emerald); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-axis { display: flex; justify-content: space-between; font-size: .74rem;
  color: var(--muted); margin-top: .4rem; }
.chart-peak { font-weight: 700; color: var(--brand); }
.trend-up { color: var(--ok); font-weight: 700; }
.trend-down { color: var(--danger); font-weight: 700; }
.sales-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem; margin-bottom: 1rem; }
.bar { display: block; height: 5px; border-radius: 99px; background: var(--line);
  margin-top: .35rem; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--grad-brand); border-radius: 99px; }
.split-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden;
  background: var(--line); margin-bottom: .7rem; }
.split-rep { background: var(--grad-brand); }
.split-new { background: var(--magenta); }
.split-key { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .84rem;
  color: var(--ink-2); margin-bottom: .5rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-rep { background: var(--brand); }
.dot-new { background: var(--magenta); }
.pay-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center;
  gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.pay-row:last-child { border-bottom: none; }
.pay-name { font-size: .8rem; font-weight: 700; color: var(--muted); }
.pay-row .bar { margin-top: 0; height: 8px; }
.pay-val { font-size: .88rem; font-weight: 700; text-align: right; white-space: nowrap; }
.pay-val small { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
.hours { display: flex; align-items: flex-end; gap: 2px; height: 110px;
  padding: .4rem 0; border-bottom: 1px solid var(--line); }
.hour { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.hour > span { width: 100%; background: var(--grad-brand); border-radius: 3px 3px 0 0; min-height: 2px; }
@media (max-width: 575.98px) {
  .sales-cols { grid-template-columns: minmax(0, 1fr); }
  .pay-row { grid-template-columns: 60px 1fr auto; gap: .5rem; }
}

/* ---- Install prompt ---- */
.install-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1200;
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1rem; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--sh-lg); font-size: .88rem;
}
.install-bar span { flex: 1; }
.install-icon {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  object-fit: contain; background: var(--brand-light);
  padding: 4px;
}
.install-x { background: none; border: none; font-size: 1.3rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 .3rem; }
.install-x:hover { color: var(--ink); }
@media (min-width: 768px) { .install-bar { left: auto; max-width: 380px; } }

/* ===================================================================
   HERO SLIDER
   Slides are stacked and cross-faded rather than translated, so the
   section height is set by the tallest slide and never jumps.
/* ---- Trust bar ---- */
.trust-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust-rail {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; padding: 1.1rem 0;
}
.trust-item { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.trust-item i {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--brand-light); color: var(--brand);
}
.trust-item strong { display: block; font-size: .9rem; color: var(--ink); }
.trust-item span { display: block; font-size: .78rem; color: var(--muted); }

@media (max-width: 991.98px) {
  /* .hs-art and the grid-column layout this targeted belonged to the
     earlier two-column hero (text beside a boxed image), replaced when
     the hero became full-bleed. Left behind, this 2.4rem padding was
     the exact 77px gap sitting under every mobile slide even after
     the image itself was sized correctly — invisible in the CSS
     unless you go looking for a class, .hs-art, that no longer exists
     anywhere in the markup. Removed along with it. */
}
@media (max-width: 767.98px) {
  .hs-arrow { display: none; }
  /* This is the third separate place I found trying to set the
     slide's height for this same breakpoint (others were 420px and a
     conditional 0/480px rule elsewhere in this file) — three different
     values fighting over the same element depending on which one
     happened to load last. All three are gone now; the hero section
     below is the single place slide height is set. */
  /* Sideways scroll beats a cramped 2x2 grid at this width. */
  .trust-rail {
    display: flex; gap: .8rem; overflow-x: auto;
    scrollbar-width: none; padding: .9rem 16px;
  }
  .trust-rail::-webkit-scrollbar { display: none; }
  .trust-item { flex: 0 0 auto; }
  .trust-item span { display: none; }
}

/* ===================================================================
   PRODUCT CARDS
   The markup is untouched — every class below already existed. Only
   the appearance changes, so the wishlist, add-to-cart and buy-now
   handlers keep working exactly as they did.
   =================================================================== */
.p-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.p-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(24, 17, 38, .12);
}
.p-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--brand-light);
  display: grid; place-items: center;
  overflow: hidden;
}
.p-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.p-card:hover .p-media img { transform: scale(1.06); }

.p-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: .28rem .6rem; border-radius: 8px;
  background: var(--grad-accent); color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(249, 115, 22, .35);
}
.p-wish {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  color: var(--muted); cursor: pointer;
  transition: all .2s var(--ease);
}
.p-wish:hover { color: #E11D48; border-color: #FDA4AF; transform: scale(1.08); }
.p-wish.is-active { color: #E11D48; border-color: #FDA4AF; background: #FFF1F2; }
/* A small pop when it is switched on, so the click feels answered. */
.p-wish.is-active i { animation: wishPop .32s var(--ease); }
@keyframes wishPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.p-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.p-cat { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
.p-name {
  font-size: .95rem; font-weight: 700; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0;
}
.p-rating { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); }
.p-rating .stars { color: #F59E0B; }

.p-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.price-now { font-size: 1.25rem; font-weight: 800; color: var(--brand); letter-spacing: -.02em; }
.price-mrp { font-size: .85rem; color: var(--muted); text-decoration: line-through; }
.p-save { font-size: .74rem; font-weight: 800; color: #16A34A; }
.p-save-quiet { color: var(--muted); font-weight: 600; }
.p-actions { display: flex; gap: .5rem; margin-top: .7rem; }
.p-actions .btn { flex: 1; justify-content: center; }
.p-card.is-out { opacity: .72; }
.p-oos { font-size: .78rem; font-weight: 700; color: var(--danger); }

/* ===================================================================
   CART
   =================================================================== */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.4rem;
  align-items: start;
}
.cart-lines { display: flex; flex-direction: column; gap: .8rem; }
.cart-line {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .9rem 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cart-line:hover { border-color: var(--line-2); box-shadow: 0 4px 14px rgba(24, 17, 38, .06); }
.cl-thumb {
  width: 74px; height: 74px; border-radius: 12px;
  background: var(--brand-light); object-fit: cover; flex: none;
}
.cl-name { font-weight: 700; color: var(--ink); font-size: .95rem; }
.cl-sku, .cl-cat { font-size: .76rem; color: var(--muted); }
.cl-price, .cl-total { font-weight: 700; color: var(--ink); }
.cl-total { color: var(--brand); font-size: 1.05rem; }

.cart-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.2rem;
  position: sticky; top: calc(var(--header-h) + 16px);
  box-shadow: 0 4px 18px rgba(24, 17, 38, .05);
}
.cart-summary .btn-brand.btn-lg {
  font-size: 1rem; font-weight: 800; padding: .85rem 1rem;
  box-shadow: 0 6px 18px rgba(109, 40, 217, .3);
}
.cart-summary .btn-brand.btn-lg:hover { transform: translateY(-1px); }

/* ---- Checkout progress. Decoration only: it reads the page it is on
        and never changes where anything goes. ---- */
.co-steps {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 1.4rem; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
  /* This sits inside .pay-wrap, a two-column grid (wide form column +
     340px sidebar column). Without this, the steps bar was being
     auto-placed INTO the wide left column as if it were the form
     itself, which then pushed the actual login/register card into the
     340px sidebar slot — a squeezed card on the right with a large
     empty gap on the left where the sidebar would have been. Spanning
     both columns keeps it as a header bar above the real content,
     which is what it always visually looked like it already was. */
  grid-column: 1 / -1;
}
.co-steps::-webkit-scrollbar { display: none; }
.co-step {
  display: flex; align-items: center; gap: .5rem;
  font-size: .84rem; font-weight: 700; color: var(--muted);
  white-space: nowrap;
}
.co-step .n {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--line); color: var(--muted);
  font-size: .76rem; font-weight: 800;
}
.co-step.is-on { color: var(--brand); }
.co-step.is-on .n { background: var(--grad-brand); color: #fff; }
.co-step.is-done { color: #16A34A; }
.co-step.is-done .n { background: #16A34A; color: #fff; }
.co-sep { flex: 1 1 24px; min-width: 18px; height: 2px; background: var(--line); border-radius: 2px; }
.co-sep.is-done { background: #16A34A; }

/* ---- Empty cart ---- */
.cart-empty { text-align: center; padding: 3.5rem 1.5rem; }
.cart-empty-ico {
  width: 104px; height: 104px; margin: 0 auto 1.3rem;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 2.6rem; color: var(--brand);
  background: var(--brand-light);
}
.cart-empty h2 { font-size: 1.5rem; margin: 0 0 .5rem; color: var(--ink); }
.cart-empty p { color: var(--muted); margin: 0 auto 1.6rem; max-width: 420px; }

@media (max-width: 991.98px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}

/* ---- Empty states, shared by the cart, orders, wishlist and search.
        Restyled here rather than duplicated into each page, so all of
        them improve together. ---- */
.empty-state {
  text-align: center;
  padding: 3.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.empty-icon {
  width: 104px; height: 104px; margin: 0 auto 1.3rem;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 2.5rem; color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 0 0 10px rgba(234, 241, 254, .55);
}
.empty-state h2 { font-size: 1.45rem; font-weight: 800; color: var(--ink); margin: 0 0 .5rem; }
.empty-state p { color: var(--muted); margin: 0 auto 1.6rem; max-width: 430px; line-height: 1.7; }
.empty-state .btn-brand {
  padding: .8rem 1.8rem; font-size: .98rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(109, 40, 217, .28);
}
.empty-state .btn-brand:hover { transform: translateY(-1px); }

/* ===================================================================
   TOASTS AND MICRO-INTERACTIONS
   The toast system already existed and already fires on add-to-cart.
   Nothing here changes when or why it appears — only how it looks.
   =================================================================== */
/* The class is .toast-msg, and style.css already defines a toastIn
   keyframe — redefining it here would have silently overridden the
   original depending on load order. Appearance only. */
.toast-msg {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(24, 17, 38, .22);
  border: 1px solid rgba(255, 255, 255, .1);
  font-weight: 600;
  background: var(--navy-deep);
}
.toast-msg.toast-success { background: #15803D; }
.toast-msg.toast-error   { background: #B91C1C; }
.toast-msg.toast-warning { background: #B45309; }

/* The cart badge already updates itself; this just makes the change
   visible instead of silent. */
.js-cart-count { transition: transform .25s var(--ease); }
.js-cart-count.is-bumped { animation: badgeBump .4s var(--ease); }
@keyframes badgeBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Buttons answer a press rather than sitting inert. */
.btn { transition: transform .16s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.btn-brand:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(109, 40, 217, .28); }
.btn:active { transform: translateY(0) scale(.985); }
.js-add-cart.is-busy { opacity: .75; pointer-events: none; }

.qty-input { transition: border-color .18s var(--ease); }
.qty-input:focus { border-color: var(--brand); outline: none; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================================================================
   XTEND HEADER — structural rebuild
   New class names throughout (util-*, nav-tab, nav-tag), so nothing
   here can collide with or silently override the original .offer-strip
   / .nav-chip rules, which remain defined but unused by this header.
   =================================================================== */

/* ---- Utility bar: replaces the centred promo strip with a two-sided,
        left/right utility row — a different information pattern, not
        just a different colour. ---- */
.util-bar {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
}
.util-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .45rem 0;
}
.util-link { color: rgba(255, 255, 255, .82); display: inline-flex; align-items: center; gap: .4rem; }
.util-link:hover { color: #fff; }
.util-right { display: flex; align-items: center; gap: .7rem; }
.util-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .25); }

/* ---- Main header: boxed search instead of a pill, square submit
        button with an arrow instead of "Search" text. ---- */
.header-search .search-input { border-radius: 12px; }
.header-search .search-submit {
  border-radius: 10px; width: 42px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Category row: underline tabs plus two solid "tag" pieces that
        bookend the row, instead of a uniform strip of pill chips. ---- */
.nav-rail { display: flex; align-items: center; gap: .3rem; }

.nav-tag {
  flex: none; display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .8rem; border-radius: 8px;
  background: var(--brand-light); color: var(--brand-dark);
  font-size: .82rem; font-weight: 700;
  transition: background .18s var(--ease);
}
.nav-tag:hover { background: var(--line-2); color: var(--brand-dark); }

.nav-tab {
  flex: none; padding: .78rem .85rem; font-size: .85rem; font-weight: 600;
  color: var(--ink-2); border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav-tab:hover { color: var(--brand); }
.nav-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }
.nav-drop-btn { background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; }

.nav-tag-ds {
  margin-left: auto;
  background: var(--grad-accent); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  box-shadow: 0 3px 10px rgba(217, 70, 239, .3);
}
.nav-tag-ds:hover { color: #fff; }
.nav-tag-ds .ds-out { font-size: .62rem; opacity: .85; margin-left: .1rem; }

@media (max-width: 991.98px) {
  .util-right { display: none; }
}

/* ===================================================================
   HERO SLIDER — full-bleed rebuild
   The photo now covers the entire slide edge to edge; copy is laid
   over it with a scrim, rather than sitting beside a boxed image.
   Taller, closer to a full landing-page banner than a strip.
   =================================================================== */
.hero-full { position: relative; overflow: hidden; isolation: isolate; }
.hs-track { display: grid; }
.hs-slide {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease);
  display: flex; align-items: center;
}
.hs-slide.is-on { opacity: 1; visibility: visible; }

.hs-bg { position: absolute; inset: 0; z-index: 0; }
.hs-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------
   A FIXED HEIGHT, THE SAME WAY ON DESKTOP AND ON MOBILE.

   Not a pixel number — a fixed ASPECT RATIO, which is what "fixed
   height" has to mean for something that spans every screen width
   from a phone to a wide monitor. A raw pixel height doesn't survive
   that range; a ratio does, and it also happens to solve the two
   earlier problems at once:

     cropping (object-fit: cover on a box much taller than the photo)
     and
     stripes (object-fit: contain on a box much taller than the photo)

   both came from the box's shape not matching the photo's shape. 2:1
   is a close match for the actual banners in use, so "cover" now
   crops only a sliver at most, not a headline.

   This is the ONLY place slide height is set. Earlier passes had left
   three different, conflicting min-height rules scattered elsewhere in
   this file for the same breakpoint — all three are gone; this is the
   single source of truth now. */
.hs-slide.has-photo { aspect-ratio: 2 / 1; }

/* A slide with no photo has no natural shape to size itself by, so it
   still needs an explicit height — kept close to the same visual
   weight as the photo slides so the hero doesn't jump in height
   depending on which slide happens to be showing. */
.hs-slide:not(.has-photo) { min-height: 420px; }
@media (min-width: 992px) {
  .hs-slide:not(.has-photo) { min-height: 520px; }
}

/* A slide with no photo falls back to its flat tone gradient, applied
   to the slide itself rather than a background layer. */
.hs-slide:not(.has-photo) { background: var(--grad-brand); }
.hs-slide.slide-b:not(.has-photo) { background: linear-gradient(135deg, #3B0764 0%, #6D28D9 60%, #8B5CF6 100%); }
.hs-slide.slide-c:not(.has-photo) { background: linear-gradient(135deg, #240046 0%, #6D28D9 55%, #4F46E5 130%); }
.hs-slide.slide-d:not(.has-photo) { background: linear-gradient(135deg, #6D28D9 0%, #D946EF 60%, #F0ABFC 120%); }

/* Scrim: strong at the left where the copy sits, fading out to the
   right so the photo still shows through on that side. Works for both
   a photo slide and a flat-tone slide, so the text is always readable. */
.hs-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(20, 4, 46, .88) 0%, rgba(36, 0, 70, .62) 42%, rgba(36, 0, 70, .18) 75%);
}

/* A real photo has nothing left on it to protect — every line of copy
   was removed, and the CTA button carries its own white background, so
   it reads fine with no scrim at all. The heavy tint from above was
   sized for a slide that no longer has a headline behind it, and was
   making the photo look washed out and hazy rather than sharp. Cut
   back to a small vignette in the corner where the button sits, purely
   so a very light photo doesn't make a white button vanish. */
.hs-slide.has-photo .hs-scrim {
  background: linear-gradient(0deg, rgba(20, 4, 46, .30) 0%, transparent 28%);
}

/* Soft floating glow shapes — the "abstract purple elements" from the
   brief. Decorative only, aria-hidden, blurred circles that drift very
   slowly so the hero doesn't feel static even between slide changes. */
.hs-glow {
  position: absolute; z-index: 1; border-radius: 50%;
  filter: blur(60px); opacity: .5; pointer-events: none;
}
.hs-glow-a {
  width: 420px; height: 420px; right: -120px; top: -140px;
  background: radial-gradient(circle, #D946EF 0%, transparent 70%);
  animation: glowDrift 14s ease-in-out infinite;
}
.hs-glow-b {
  width: 320px; height: 320px; right: 10%; bottom: -160px;
  background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
  animation: glowDrift 18s ease-in-out infinite reverse;
}
/* These circles were designed to sit on a flat colour, giving it some
   life. Laid over an actual photograph they don't read as decoration —
   they read as a hazy smear across your picture. A real image already
   has its own visual interest, so the glow is dropped entirely rather
   than tinted down; there is no strength at which "blur over a photo"
   becomes a good look. */
.hs-slide.has-photo .hs-glow { display: none; }
@keyframes glowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, 25px) scale(1.08); }
}

.hs-inner { position: relative; z-index: 2; width: 100%; }
.hs-copy { color: #fff; max-width: 640px; }
.hs-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #E9D5FF;
  margin: 0 0 .8rem;
}
.hs-title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.08; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .9rem; color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.hs-sub {
  font-size: clamp(.98rem, 1.4vw, 1.12rem);
  line-height: 1.7; color: #E4D9F7; margin: 0 0 1.8rem;
  max-width: 540px;
}
.hs-cta { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.hs-cta .btn-brand {
  background: #fff; color: var(--brand-dark); border: none;
  padding: .95rem 1.9rem; font-size: 1rem; font-weight: 700;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.hs-cta .btn-brand:hover { background: #F3EFFF; color: var(--brand-dark); transform: translateY(-2px); }
.hs-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .86rem; font-weight: 600; color: #E9D5FF;
}
.hs-badge i { color: #4ADE80; }

.hs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%; z-index: 3;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.hs-arrow:hover { background: rgba(255, 255, 255, .28); transform: translateY(-50%) scale(1.06); }
.hs-prev { left: 22px; }
.hs-next { right: 22px; }

.hs-dots {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
  display: flex; justify-content: center; gap: .55rem;
}
.hs-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .4); border: none; cursor: pointer;
  transition: all .22s var(--ease);
}
.hs-dot.is-on { background: #fff; width: 30px; border-radius: 99px; }

@media (max-width: 991.98px) {
  .hs-glow-a, .hs-glow-b { display: none; }
}
@media (max-width: 767.98px) {
  .hs-arrow { display: none; }
  /* Slide height itself is set once, above, by aspect-ratio for photo
     slides and min-height for the flat-tone fallback — nothing further
     needed at this breakpoint. */
}

/* ===================================================================
   TRUST BAR — refreshed to match: icon circles get a glow ring, the
   whole strip sits on a very light lavender rather than plain white.
   =================================================================== */
.trust-bar { background: var(--brand-light); border-bottom: 1px solid var(--line); }
.trust-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.3rem 0; }
.trust-item { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.trust-item i {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: grid; place-items: center; font-size: 1.1rem;
  background: #fff; color: var(--brand);
  box-shadow: 0 0 0 6px rgba(109, 40, 217, .08), 0 6px 16px rgba(109, 40, 217, .12);
}
.trust-item strong { display: block; font-size: .92rem; color: var(--ink); }
.trust-item span { display: block; font-size: .8rem; color: var(--muted); }

@media (max-width: 767.98px) {
  .trust-rail {
    display: flex; gap: .8rem; overflow-x: auto;
    scrollbar-width: none; padding: .9rem 16px;
  }
  .trust-rail::-webkit-scrollbar { display: none; }
  .trust-item { flex: 0 0 auto; }
  .trust-item span { display: none; }
}

/* ===================================================================
   CATEGORY TILES — bigger icon, glow ring on hover, lift.
   =================================================================== */
.cat-tile { transition: transform .2s var(--ease); }
.cat-tile:hover { transform: translateY(-3px); }
.cat-icon {
  transition: box-shadow .22s var(--ease);
}
.cat-tile:hover .cat-icon { box-shadow: 0 0 0 8px rgba(109, 40, 217, .12); }

/* ===================================================================
   SINGLE-LINE HEADER — logo, menu, search and account/cart cluster
   all in one row on desktop, as requested. The separate nav row that
   used to sit under the main header is gone; its content moved inline.
   =================================================================== */
.header-inner-single { flex-wrap: nowrap; gap: 18px; }

.header-nav-inline {
  display: flex; align-items: center; gap: .2rem;
  flex: none; white-space: nowrap;
}
.header-nav-inline .nav-tag {
  flex: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .7rem; border-radius: 8px;
  background: var(--brand-light); color: var(--brand-dark);
  font-size: .78rem; font-weight: 700;
  transition: background .18s var(--ease);
}
.header-nav-inline .nav-tag:hover { background: var(--line-2); color: var(--brand-dark); }
.header-nav-inline .nav-tab {
  flex: none; padding: .5rem .6rem; font-size: .82rem; font-weight: 600;
  color: var(--ink-2); border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.header-nav-inline .nav-tab:hover { color: var(--brand); }
.header-nav-inline .nav-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }
.header-nav-inline .nav-drop-btn { background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.header-nav-inline .nav-tag-ds {
  background: var(--grad-accent); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  box-shadow: 0 2px 8px rgba(217, 70, 239, .28);
  padding: .38rem .7rem; font-size: .78rem;
}
.header-nav-inline .nav-tag-ds:hover { color: #fff; }

/* The search box shrinks first when the row is tight, since the menu
   and the logo need to stay legible; a narrower search bar is still
   fully usable, an abbreviated nav label often isn't. */
.header-inner-single .header-search { flex: 1 1 180px; min-width: 160px; max-width: 460px; }
.header-inner-single .header-actions { flex: none; }

/* Below the point where one line stops being realistic, the browser
   already switched to the hamburger + drawer (d-lg-none / d-lg-flex),
   so no extra rule is needed here — this covers the in-between widths
   where the row is present but tight. */
@media (max-width: 1300px) {
  .header-nav-inline .nav-tab { padding: .5rem .45rem; font-size: .8rem; }
  .header-inner-single .header-search { flex-basis: 140px; }
}

/* ===================================================================
   ABOUT PAGE — a more premium first impression, and vision/mission
   cards with the same glow treatment used on the trust bar and
   category tiles elsewhere, so the page reads as part of one design
   rather than a plain legal-page template reused as-is.
   =================================================================== */
.page-hero-about { padding: 3.4rem 0 3rem; }
.about-hero-facts {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: 1.4rem; position: relative; z-index: 1;
}
.about-hero-facts span {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  color: #fff; font-size: .85rem; font-weight: 600;
}
.about-hero-facts i { color: #E9D5FF; }

/* Vision/mission/goal cards: bigger icon with a glow ring to match the
   trust bar and category tiles, more lift on hover. */
.vm-ico {
  box-shadow: 0 0 0 8px rgba(109, 40, 217, .08);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.vm-card:hover .vm-ico { box-shadow: 0 0 0 10px rgba(109, 40, 217, .14); transform: scale(1.06); }
.vm-card.is-mission:hover .vm-ico { box-shadow: 0 0 0 10px rgba(79, 70, 229, .14); }
.vm-card.is-goal:hover .vm-ico { box-shadow: 0 0 0 10px rgba(245, 158, 11, .16); }

@media (max-width: 575.98px) {
  .about-hero-facts span { font-size: .8rem; padding: .45rem .85rem; }
}

/* Minimal slide copy — just the CTA, positioned lower since there is no
   headline above it to anchor the eye. */
.hs-copy-minimal { display: flex; align-items: flex-end; min-height: 100%; padding-bottom: 1rem; }
/* The CTA button, hidden as asked. display:none removes it from the
   accessibility tree too, not just the screen — there is no longer any
   way to act on a slide directly; someone can still reach Products
   through the main menu. */
.hs-copy-minimal { display: none; }

/* ---- Reset screen: catalogue opt-in checkbox ---- */
.chk-row {
  display: flex; align-items: center; gap: .6rem;
  font-size: .92rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.chk-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--danger);
  cursor: pointer;
}
.chk-count { font-weight: 400; color: var(--muted); font-size: .85rem; }

/* ===================================================================
   MEMBER PROFILE CARD
   =================================================================== */
.mem-profile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 1.2rem;
  box-shadow: var(--sh);
}
.mem-banner {
  height: 88px;
  background: var(--grad-brand);
  position: relative;
}
.mem-banner::after {
  /* A couple of soft glow blobs, echoing the hero — small enough here
     to read as texture rather than a repeat of the homepage. */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(220px 140px at 85% -20%, rgba(217, 70, 239, .35), transparent 70%),
    radial-gradient(180px 120px at 15% 120%, rgba(139, 92, 246, .3), transparent 70%);
}

.mem-profile-body {
  display: flex; align-items: flex-start; gap: 1.2rem;
  padding: 0 1.5rem 1.4rem;
  margin-top: -44px;
  position: relative;
}
.mem-avatar {
  width: 88px; height: 88px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 4px solid var(--surface);
  background: var(--surface-2);
  box-shadow: 0 4px 14px rgba(24, 17, 38, .18);
}
.mem-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-teal); color: #fff;
  font-size: 2.1rem; font-weight: 800;
}

.mem-profile-info { flex: 1; min-width: 0; padding-top: 50px; }
.mem-profile-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
}
.mem-profile-info h1 { font-size: 1.35rem; margin: 0 0 .4rem; }
.mem-profile-info .mem-sub {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0;
}
.mem-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .6rem; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .78rem; font-weight: 600; color: var(--ink-2);
}
.mem-badge i { color: var(--brand); font-size: .74rem; }

.mem-profile-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.mem-contact-row {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line);
}
.mem-contact {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .86rem; color: var(--ink-2); font-weight: 600;
}
.mem-contact i { color: var(--brand); width: 14px; text-align: center; }
.mem-contact.is-missing { color: var(--muted); font-weight: 500; font-style: italic; }
.mem-contact.is-missing i { color: var(--muted); }

.mem-grid-single { grid-template-columns: 1fr; }

@media (max-width: 575.98px) {
  .mem-banner { height: 64px; }

  /* The side-by-side layout (avatar left, name and badges to its
     right) was left-aligned in a way that read as lopsided on a
     narrow screen — a lot of empty space on the right, everything
     crowded left. Centred column instead: avatar on its own line
     above the banner's edge, name and every badge centred under it,
     matching how a profile card is normally laid out on mobile. */
  .mem-profile-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.1rem 1.2rem;
    gap: .6rem;
    margin-top: -36px;
  }
  .mem-avatar { width: 84px; height: 84px; }
  .mem-profile-info { padding-top: 0; width: 100%; }
  .mem-profile-top { flex-direction: column; align-items: center; gap: .8rem; }
  .mem-profile-info .mem-sub { justify-content: center; }
  .mem-profile-actions { width: 100%; flex-direction: column; }
  .mem-profile-actions .btn { flex: 1; justify-content: center; }
  .mem-contact-row { flex-direction: column; align-items: center; gap: .55rem; }
}


/* ---- Inventory ---- */
.stock-zero { color: var(--danger); }

/* ---- Product card, mobile 2-column grid ----
   A 2-per-row card is only ~170px wide, but was still carrying its
   full desktop column of content on top of two full-width stacked
   buttons: star rating, category, a 2-line name, price, a save line,
   then both buttons. That much stacked into that little width is what
   read as "thin" — a tall, narrow strip rather than a balanced card,
   even though the width itself is a completely ordinary 2-column
   layout. Placed here, not in responsive.css: this file loads last
   (style.css, then responsive.css, then premium.css) and already
   declares its own unscoped .p-rating and .p-name rules earlier in
   this same file, which would otherwise silently win over an earlier
   file's mobile override for the exact properties both declare —
   confirmed directly in a real browser before landing here, rather
   than assumed. The star rating is a stable pseudo-score generated
   client-side (see product_card.php), not real review data, so
   removing it on this one breakpoint costs nothing functional. */
@media (max-width: 767.98px) {
  .p-rating { display: none; }
  .p-name { margin: 0 0 .25rem; }
}

/* ---- Admin: homepage media (slider + popup uploads) ---- */
.hp-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.hp-media-preview {
  position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg, 12px); overflow: hidden;
  background: var(--surface-2, #F3F1FA); border: 1px solid var(--line); margin-bottom: .7rem;
}
.hp-media-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-media-preview-popup { aspect-ratio: 4/5; max-width: 280px; }
.hp-media-tag {
  position: absolute; top: 8px; left: 8px; background: rgba(26,19,48,.78); color: #fff;
  font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px;
}
.hp-media-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.hp-media-form input[type="file"] { flex: 1; min-width: 160px; font-size: .82rem; }
@media (max-width: 767.98px) {
  .hp-media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---- Storefront: promotional popup (Admin -> Homepage media) ---- */
.hp-popup-backdrop {
  position: fixed; inset: 0; z-index: 2000; background: rgba(20,14,38,.62);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  animation: hpPopupIn .2s ease both;
}
.hp-popup-backdrop.is-closing { animation: hpPopupOut .18s ease both; }
@keyframes hpPopupIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hpPopupOut { from { opacity: 1; } to { opacity: 0; } }
.hp-popup {
  position: relative; max-width: 420px; width: 100%; border-radius: var(--r-lg, 14px);
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); background: #fff;
  animation: hpPopupScale .22s ease both;
}
@keyframes hpPopupScale { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hp-popup img { width: 100%; height: auto; display: block; }
.hp-popup-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.hp-popup-close:hover { background: #fff; }
@media (max-width: 480px) {
  .hp-popup { max-width: 100%; }
}

/* ---- Admin sidebar: collapsible department groups ---- */
.admin-nav-group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer;
  padding: .6rem .85rem .4rem; margin-top: .3rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.admin-nav-group-toggle i { font-size: .7rem; transition: transform .18s var(--ease); }
.admin-nav-group-toggle.is-open i { transform: rotate(180deg); }
.admin-nav-group-toggle:hover { color: var(--brand); }
.admin-nav-group {
  max-height: 0; overflow: hidden;
  transition: max-height .22s var(--ease);
}
.admin-nav-group.is-open { max-height: 600px; }