/* ===========================================================================
   AUSMart — design system

   Colours sampled from the AUSMart mark:

     Blue    #17324D  — the shopping bag and the A. Surfaces, headings, hero,
                        footer, default button.
     Slate   #586B7F  — the ger. Secondary text and quiet chrome.
     Gold    #F5B942  — the kangaroo and the flight trail. A pale butter
                        yellow: it works as a FILL, never as text on white.

   Two contrast rules this palette forces:
     · Gold #F5B942 on white is 1.4:1 — invisible. Gold text uses #8E6B26 (5.1:1).
     · Gold fills carry deep-blue #112437 text (7.1:1), never white.

   Mobile-first: every layout starts single-column and widens at 720/1024px.
   =========================================================================== */

:root{
  /* ===== AUSMart brand palette ==========================================
     Burnt Orange  #E85D2A   primary action
     Warm Gold     #F5B942   accent
     Deep Navy     #17324D   structure, dark surfaces
     Warm White    #FAF9F6   page and section backgrounds
     Soft Grey     #EEF1F3   subtle fills
     Text          #20262E   body copy

     The six brand hexes are used exactly as given. The extra tokens below
     are derived from them for states and for text legibility — the two that
     matter are --brand-deep and --gold-dark, because white on #E85D2A is
     only 3.48:1 and anything on #F5B942 is worse. Neither brand colour is
     safe behind small white text, so buttons use the derived shades and the
     pure hexes carry the large, decorative work.
     ===================================================================== */

  /* --- burnt orange ---------------------------------------------------- */
  --brand:       #E85D2A;   /* as specified — fills, icons, accents        */
  --brand-2:     #F0764A;   /* lift on dark surfaces                        */
  --brand-deep:  #C85024;   /* button bg: white on it is 4.54:1            */
  --brand-text:  #B8471F;   /* orange as text on white or a tint           */
  --brand-soft:  #FDEFEA;   /* tint                                         */

  /* --- deep navy: surfaces, headings, structure ------------------------ */
  --ink:        #17324D;
  --ink-2:      #274563;
  --ink-deep:   #112437;
  --ink-soft:   #586B7F;
  --muted:      #5D7082;    /* 4.51:1 even on soft grey                     */
  --text:       #20262E;

  --line:       #E3E7EA;
  --line-soft:  #EEF1F3;
  --surface:    #FFFFFF;
  --mist:       #FAF9F6;    /* warm white                                   */
  --mist-2:     #EEF1F3;    /* soft grey                                    */

  /* --- legacy aliases, kept so older rules keep working ---------------- */
  --teal:       #17324D;
  --teal-dark:  #274563;
  --teal-deep:  #112437;
  --teal-soft:  #EEF1F3;

  /* --- warm gold ------------------------------------------------------- */
  --gold:       #F5B942;
  --gold-dark:  #8E6B26;    /* gold as text: 4.53:1 on the tint             */
  --gold-soft:  #FEF5E5;

  --ok:         #17795F;
  --warn:       #8E6B26;
  --danger:     #B3352F;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(23,50,77,.07), 0 1px 3px rgba(23,50,77,.05);
  --shadow:    0 2px 8px rgba(23,50,77,.08), 0 8px 24px rgba(23,50,77,.07);
  --shadow-lg: 0 8px 30px rgba(23,50,77,.12), 0 24px 60px rgba(23,50,77,.10);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --maxw: 1200px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.2; letter-spacing:-.02em; font-weight:650; }
h1{ font-size:clamp(2rem, 5vw, 3.1rem); letter-spacing:-.03em; }
h2{ font-size:clamp(1.4rem, 3vw, 2rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.narrow{ max-width:760px; }

/* --------------------------------------------------------------- utilities */
.muted{ color:var(--muted); }
/* Secondary body copy — descriptions, sub-headings, explanatory paragraphs.
   This exists as a class rather than an inline style so that surfaces which
   are not white (the glass sheets in the shopping centre) can restate it.
   An inline colour cannot be overridden by any stylesheet. */
.softtext{ color:var(--ink-soft); }
.small{ font-size:.875rem; }
.tiny{ font-size:.78rem; }
.center{ text-align:center; }
.mono{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.stack > * + *{ margin-top:12px; }
.row{ display:flex; gap:12px; align-items:center; }
.row-wrap{ flex-wrap:wrap; }
.spread{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.grow{ flex:1 1 auto; min-width:0; }
.hide{ display:none !important; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.section{ padding:clamp(38px, 6vw, 68px) 0; }
.section.tight{ padding:clamp(26px, 4vw, 42px) 0; }
.section.mist{ background:var(--mist); }
.section-head{ margin-bottom:24px; }
.section-head h2{ margin-bottom:6px; }
.eyebrow{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-dark); margin-bottom:10px;
}

/* ------------------------------------------------------------------ header */
.topbar{
  background:var(--ink); color:#D6DDE5; font-size:.8rem;
  padding:7px 0;
}
.topbar a{ color:#D6DDE5; opacity:.85; }
.topbar a:hover{ opacity:1; }

.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:18px; height:68px; }

/* The mark carries no lettering, so the wordmark beside it is set in type. */
.logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.logo img{ height:40px; width:auto; display:block; }
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-mark{
  font-size:1.34rem; font-weight:800; letter-spacing:-.035em; color:var(--ink);
}
.logo-mark .aus{ color:var(--ink); }
.logo-mark .mart{ color:var(--gold-dark); }
.logo-sub{
  font-size:.56rem; color:var(--muted); letter-spacing:.13em;
  text-transform:uppercase; white-space:nowrap; margin-top:3px;
}
/* on the petrol footer and admin rail the type flips */
.footer .logo img, .admin-side .logo img{ height:36px; }
.footer .logo-mark, .admin-side .logo-mark{ color:#fff; }
.footer .logo-mark .aus, .admin-side .logo-mark .aus{ color:#fff; }
.footer .logo-mark .mart, .admin-side .logo-mark .mart{ color:var(--gold); }
.footer .logo-sub{ color:#9AA9B8; }
@media (max-width:719px){
  .logo img{ height:34px; }
  .logo-mark{ font-size:1.18rem; }
}

.nav{ display:none; gap:2px; margin-left:8px; min-width:0; flex:0 1 auto; }
.nav a{
  padding:9px 10px; border-radius:var(--r-sm); font-size:.875rem; font-weight:520;
  color:var(--ink-soft); white-space:nowrap; flex:0 0 auto;
}
.nav a:hover{ background:var(--mist); color:var(--ink); }
.nav a.on{ color:var(--ink); font-weight:650; }

.header-actions{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  flex:0 0 auto; flex-wrap:nowrap;
}


.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 12px; border-radius:var(--r-sm);
  border:1px solid transparent; background:transparent; color:var(--ink-soft);
  font-size:.88rem; cursor:pointer; position:relative;
}
.icon-btn:hover{ background:var(--mist); color:var(--ink); }
.cart-count{
  position:absolute; top:3px; right:3px; min-width:17px; height:17px;
  background:var(--gold); color:var(--ink-deep); border-radius:9px;
  font-size:.66rem; font-weight:700; display:grid; place-items:center; padding:0 4px;
}

/* --------------------------------------------- language + currency pills */
/* One button each. It shows the current state; clicking flips it. No split
   toggles — those overlapped at header height and read as two live options. */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  /* min-height, not height. A fixed height clips its own contents the moment
     anything inside is taller than expected, and the thing inside here is an
     image whose size depends on an HTML attribute that CSS can override. */
  min-height:34px; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-size:.79rem; font-weight:680; letter-spacing:.02em;
  color:var(--ink-soft); white-space:nowrap; line-height:1;
  flex:0 0 auto; flex-shrink:0; word-break:keep-all;
  transition:.15s; box-sizing:border-box;
}
/* flag-only pill: square-ish, the flag does the talking */
.pill-flag{ padding:6px 10px; }

/* The flag is 80x40, so 2:1. Both dimensions are pinned in CSS rather than
   left to the width/height attributes on the <img>: those are presentational
   hints with almost no specificity, and `img{max-width:100%}` above is enough
   to disturb them. Pinned here, the flag is the same size everywhere and can
   never push a pill out of shape. */
.flag{
  display:block; height:13px; width:26px; max-width:none;
  border-radius:2px; flex:0 0 auto; object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
.pill .flag{ height:13px; width:26px; }
.pill:hover{ border-color:var(--ink); color:var(--ink); background:var(--mist); }
.pill:active{ transform:scale(.97); }

.pill-dark{
  background:transparent; border-color:rgba(255,255,255,.22); color:#B4BFCB;
}
.pill-dark:hover{ background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

@media (max-width:719px){
  /* the drawer carries these on small screens */
  .header-actions > .pill{ display:none; }
}

.burger{ display:inline-flex; }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:100; background:rgba(23,50,77,.42);
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.drawer.open{ opacity:1; pointer-events:auto; }
.drawer-panel{
  position:absolute; right:0; top:0; bottom:0; width:min(340px, 88vw);
  background:#fff; padding:20px; overflow-y:auto;
  transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; gap:6px;
}
.drawer.open .drawer-panel{ transform:none; }
.drawer-panel a{
  padding:13px 12px; border-radius:var(--r-sm); font-weight:560; font-size:1rem;
}
.drawer-panel a:hover{ background:var(--mist); }
.drawer-panel hr{ border:0; border-top:1px solid var(--line); margin:10px 0; }

/* The nav only unhides when the row can actually hold it. Mongolian labels
   are long; below this the burger menu carries them instead of the header
   silently clipping the last item. */
@media (min-width:1120px){
  .nav{ display:flex; }
  .burger{ display:none; }
}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:.94rem; font-weight:620; cursor:pointer; transition:.15s;
  white-space:nowrap; line-height:1.2;
}
.btn-primary{ background:var(--brand-deep); color:#fff; }
.btn-primary:hover{ background:var(--brand); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-brand{ background:var(--gold); color:var(--ink-deep); }
.btn-brand:hover{ background:#F7C55F; transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-outline{ background:#fff; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); background:var(--mist); }
.btn-ghost{ background:transparent; color:var(--ink-soft); }
.btn-ghost:hover{ background:var(--mist); color:var(--ink); }
.btn-lg{ padding:15px 30px; font-size:1rem; }
.btn-sm{ padding:8px 14px; font-size:.83rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* -------------------------------------------------------------------- forms */
.field{ margin-bottom:16px; }
.field label{
  display:block; font-size:.82rem; font-weight:620; color:var(--ink-soft);
  margin-bottom:6px; letter-spacing:.01em;
}
.field .hint{ font-size:.78rem; color:var(--muted); margin-top:5px; }
input[type=text],input[type=email],input[type=password],input[type=url],
input[type=number],input[type=date],input[type=tel],input[type=search],
select,textarea{
  width:100%; padding:12px 14px; font-size:.95rem; font-family:inherit;
  color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s;
}
textarea{ min-height:110px; resize:vertical; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(23,50,77,.13);
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237A8899' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.grid-2{ display:grid; grid-template-columns:1fr; gap:0 16px; }
@media (min-width:720px){ .grid-2{ grid-template-columns:1fr 1fr; } }
.checkbox{ display:flex; align-items:center; gap:9px; font-size:.9rem; }
.checkbox input{ width:auto; }

/* ------------------------------------------------------------------- alerts */
.alert{ padding:13px 16px; border-radius:var(--r-sm); font-size:.9rem; margin-bottom:16px; }
.alert-error{ background:#FDF0F0; color:var(--danger); border:1px solid #F3D6D6; }
.alert-ok{ background:#EDF7F1; color:var(--ok); border:1px solid #D2EADF; }
.alert-info{ background:var(--gold-soft); color:var(--gold-dark); border:1px solid #F0DFBB; }

/* ============================================================ HERO + SEARCH */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, #0E1F31 0%, #17324D 52%, #274563 100%);
  color:#fff; padding:clamp(48px,7vw,84px) 0 clamp(120px,14vw,170px);
}
/* Subtle horizon line — the only "Australian" flourish. */
.hero::after{
  content:""; position:absolute; left:-10%; right:-10%; bottom:-40%;
  height:70%; border-radius:50% 50% 0 0;
  background:radial-gradient(ellipse at 50% 0%, rgba(232,93,42,.34), transparent 62%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; max-width:800px; }
.hero h1{ color:#fff; margin-bottom:16px; }
.hero p.lede{ font-size:clamp(1rem,2vw,1.18rem); color:#B4BFCB; max-width:620px; margin-bottom:28px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.hero .btn-outline{ background:transparent; border-color:rgba(255,255,255,.32); color:#fff; }
.hero .btn-outline:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

/* the store-first search card — the centrepiece */
.searchcard{
  position:relative; z-index:5; margin-top:clamp(-104px,-11vw,-140px);
  background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  padding:clamp(20px,3vw,30px); border:1px solid var(--line-soft);
}
.searchcard .step{ margin-bottom:18px; }
.searchcard .step:last-child{ margin-bottom:0; }
.step-label{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-bottom:9px;
}

/* segmented consumer/business toggle */
.segmented{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  background:var(--mist-2); padding:4px; border-radius:var(--r);
}
.segmented button{
  padding:13px 10px; border:0; background:transparent; border-radius:9px;
  font-size:.9rem; font-weight:640; color:var(--ink-soft); cursor:pointer;
  transition:.15s; line-height:1.25;
}
.segmented button.on{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }

/* store picker */
.storepick{ position:relative; }
.storepick-btn{
  width:100%; display:flex; align-items:center; gap:13px; text-align:left;
  padding:13px 15px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; transition:.15s; min-height:62px;
}
.storepick-btn:hover{ border-color:var(--ink-soft); }
.storepick-btn.active{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(23,50,77,.12); }
.storepick-btn .caret{ margin-left:auto; color:var(--muted); flex:0 0 auto; }
.storepick-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); max-height:392px; overflow-y:auto; padding:6px;
}
.storepick-search{ padding:6px 6px 8px; position:sticky; top:0; background:#fff; }
.storepick-opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 12px; border:0; background:transparent; border-radius:var(--r-sm);
  cursor:pointer; font-size:.92rem;
}
.storepick-opt:hover{ background:var(--mist); }
.storepick-group{
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:12px 12px 5px;
}

.store-logo{
  width:42px; height:42px; flex:0 0 auto; border-radius:10px;
  background:var(--mist-2); display:grid; place-items:center; overflow:hidden;
  font-weight:750; font-size:.95rem; color:var(--ink-soft); letter-spacing:-.03em;
}
.store-logo img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.store-logo.lg{ width:56px; height:56px; border-radius:12px; font-size:1.2rem; }
.store-logo.sm{ width:34px; height:34px; border-radius:8px; font-size:.78rem; }

.searchrow{ display:flex; flex-direction:column; gap:10px; }
.searchrow input[type=search]{ height:56px; font-size:1rem; }
.searchrow .btn{ height:56px; }
@media (min-width:720px){
  .searchrow{ flex-direction:row; }
  .searchrow .grow{ flex:1; }
  .searchrow .btn{ flex:0 0 auto; padding-left:34px; padding-right:34px; }
}

.searchcard-foot{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
  font-size:.86rem; color:var(--muted);
}
.searchcard-foot a{ color:var(--gold-dark); font-weight:620; }
.searchcard-foot a:hover{ text-decoration:underline; }

/* --------------------------------------------------------------- store grid */
.storegrid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
}
.storecard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:16px; display:flex; flex-direction:column; gap:10px; transition:.16s;
  min-height:132px;
}
.storecard:hover{ border-color:var(--ink-soft); box-shadow:var(--shadow); transform:translateY(-2px); }
.storecard .name{ font-weight:640; font-size:.95rem; line-height:1.3; }
.storecard .cat{ font-size:.76rem; color:var(--muted); margin-top:auto; }

/* ------------------------------------------------------------- product grid */
.pgrid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(168px,1fr));
}
@media (min-width:720px){ .pgrid{ grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); } }
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:.16s;
}
.pcard:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--line); }
.pcard-img{
  aspect-ratio:1; background:var(--mist); display:grid; place-items:center;
  color:var(--muted); font-size:.75rem; position:relative; overflow:hidden;
}
.pcard-img img{ width:100%; height:100%; object-fit:contain; padding:14px; }
.pcard-body{ padding:13px 14px 15px; display:flex; flex-direction:column; gap:5px; flex:1; }
.pcard .brand{ font-size:.72rem; font-weight:680; color:var(--gold-dark); letter-spacing:.05em; text-transform:uppercase; }
.pcard .name{
  font-size:.88rem; font-weight:560; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pcard .price{ margin-top:auto; padding-top:8px; }
.pcard .price .mnt{ font-weight:720; font-size:1rem; }
.pcard .price .aud{ font-size:.76rem; color:var(--muted); }
.pcard .store{ font-size:.72rem; color:var(--muted); }

.badge{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.badge-gold{ background:var(--gold-soft); color:var(--gold-dark); }
.badge-teal{ background:var(--teal-soft); color:var(--teal-deep); }
.badge-grey{ background:var(--mist-2); color:var(--ink-soft); }
/* Indicative price. Deliberately quiet — this is a qualifier, not a warning.
   Shouting about it would make an honest catalogue look like a broken one. */
.badge-indicative{
  background:var(--gold-soft); color:var(--gold-dark);
  border:1px solid #F0DFBB; margin-left:6px;
}

/* The explanation that sits under an indicative price. It lives inside the
   pricebox, which keeps its light surface at every depth, so it uses the
   normal ink colours rather than the on-glass ones. */
.notice{
  margin-top:14px; padding:11px 13px;
  border-radius:var(--r-sm); font-size:.82rem; line-height:1.5;
}
.notice-indicative{
  background:var(--gold-soft); color:var(--ink-2);
  border:1px solid #F0DFBB;
}
.notice-indicative strong{ color:var(--gold-dark); }

/* The freight statement. Blue-grey rather than gold: this is not a warning
   about this particular item, it is how the service works, and it appears on
   every priced page. Making it shout would train customers to ignore it. */
.notice-freight{
  background:var(--mist); color:var(--ink-2);
  border:1px solid var(--line);
}
/* Louder than the standing freight note, because this one is about THIS item
   and the number involved is large. */
.notice-warn{
  background:var(--gold-soft); color:var(--ink-2);
  border:1px solid #F0DFBB;
}

/* ------------------------------------------------------------------ policy
   Long-form legal and FAQ pages. Reading a hundred numbered clauses is work,
   so the type is sized for reading rather than for scanning: a measure around
   68 characters, generous leading, and clear steps between the levels.        */
.doc{ font-size:.94rem; line-height:1.72; }
.doc > p{ margin:0 0 1em; max-width:68ch; }
.doc-h2{
  font-size:1.12rem; font-weight:650; letter-spacing:-.01em;
  margin:2.1em 0 .7em; padding-top:1.1em;
  border-top:1px solid var(--line);
}
.doc > .doc-h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.doc-h3{
  font-size:1rem; font-weight:620; margin:1.6em 0 .45em;
}
/* A question and its answer belong together; without this the answer drifts
   toward the next question and the page reads as a list of questions. */
.doc-h3 + p{ margin-top:0; }
.doc-list{ margin:0 0 1.2em; padding-left:1.35em; max-width:68ch; }
.doc-list li{ margin-bottom:.42em; }
.doc-note{
  margin:0 0 1.6em; padding:11px 13px;
  background:var(--mist-2); border-radius:var(--r-sm);
  font-size:.84rem; color:var(--ink-soft);
}
@media (max-width:719px){
  .doc{ font-size:.9rem; }
  .doc-h2{ margin-top:1.7em; }
}
.badge-ok{ background:#EDF7F1; color:var(--ok); }
.pcard-flag{ position:absolute; top:10px; left:10px; z-index:2; }

/* ------------------------------------------------------------------- panels */
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(18px,3vw,28px);
}
.panel + .panel{ margin-top:16px; }
.panel-mist{ background:var(--mist); border-color:transparent; }

.featurerow{
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:720px){ .featurerow{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .featurerow{ grid-template-columns:repeat(4,1fr); } }
.feature{ padding:22px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); }
.feature .num{
  width:34px; height:34px; border-radius:9px; background:var(--teal-soft);
  color:var(--teal-deep); display:grid; place-items:center; font-weight:750;
  font-size:.9rem; margin-bottom:13px;
}
.feature h3{ font-size:1rem; margin-bottom:6px; }
.feature p{ font-size:.88rem; color:var(--ink-soft); margin:0; }

/* -------------------------------------------------------------------- table */
.table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.table th{
  text-align:left; font-weight:650; font-size:.74rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); padding:10px 12px;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.table td{ padding:12px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.table tr:last-child td{ border-bottom:0; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ----------------------------------------------------------------- timeline */
.timeline{ position:relative; padding-left:28px; }
.timeline::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:var(--line);
}
.tl-item{ position:relative; padding-bottom:20px; }
.tl-item::before{
  content:""; position:absolute; left:-24px; top:5px; width:12px; height:12px;
  border-radius:50%; background:#fff; border:2px solid var(--line);
}
.tl-item.done::before{ background:var(--ok); border-color:var(--ok); }
.tl-item.current::before{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.tl-item .st{ font-weight:620; font-size:.94rem; }
.tl-item.pending .st{ color:var(--muted); font-weight:520; }
.tl-item .when{ font-size:.78rem; color:var(--muted); }

/* -------------------------------------------------------------------- price */
.pricebox{
  background:var(--mist); border-radius:var(--r-lg); padding:20px;
}
.priceline{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:.9rem; }
.priceline.total{
  border-top:1px solid var(--line); margin-top:8px; padding-top:14px;
  font-size:1.05rem; font-weight:720;
}
.price-hero{ font-size:1.9rem; font-weight:750; letter-spacing:-.02em; line-height:1.1; }
.price-sub{ font-size:.85rem; color:var(--muted); }

/* ------------------------------------------------------------------- footer */
.footer{ background:var(--ink); color:#9FB0C2; padding:52px 0 26px; margin-top:60px; font-size:.88rem; }
.footer h4{ color:#fff; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.footer a{ color:#9FB0C2; display:block; padding:4px 0; }
.footer a:hover{ color:#fff; }
.footer-grid{ display:grid; gap:30px; grid-template-columns:1fr; }
@media (min-width:720px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.footer-bottom{
  margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:12px 16px;
  justify-content:space-between; align-items:center; font-size:.8rem;
}
/* The language and currency switchers. align-items:center on the row is what
   was missing — the pills were stretching to the row's height and their
   contents ended up sitting off-centre inside the rounded shape. */
.footer-bottom .row{ align-items:center; }
.footer-bottom .pill{ min-height:32px; padding:6px 12px; }
@media (max-width:719px){
  .footer-bottom{ justify-content:flex-start; }
}

/* ================================================================== ADMIN */
.admin{ display:flex; min-height:100vh; background:var(--mist); }
.admin-side{
  width:222px; flex:0 0 222px; background:var(--ink); color:#B4BFCB;
  padding:18px 12px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.admin-side .logo-mark{ color:#fff; font-size:1.15rem; }
.admin-side .logo-mark .aus{ color:var(--teal); }
.admin-side nav{ margin-top:20px; display:flex; flex-direction:column; gap:1px; }
.admin-side nav a{
  padding:9px 12px; border-radius:var(--r-sm); font-size:.86rem; color:#B4BFCB;
}
.admin-side nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.admin-side nav a.on{ background:var(--gold); color:var(--ink-deep); font-weight:600; }
.admin-side .grp{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:#61748A; padding:16px 12px 6px;
}
.admin-main{ flex:1; min-width:0; padding:24px; }
.admin-head{ margin-bottom:22px; }
.admin-head h1{ font-size:1.5rem; margin-bottom:2px; }

.statgrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; }
.stat .n{ font-size:1.7rem; font-weight:750; letter-spacing:-.02em; }
.stat .l{ font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.card + .card{ margin-top:16px; }
.card h2{ font-size:1.05rem; margin-bottom:14px; }

.tabs{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:18px; }
.tabs a{
  padding:8px 14px; border-radius:999px; font-size:.85rem; font-weight:580;
  background:#fff; border:1px solid var(--line); color:var(--ink-soft);
}
.tabs a.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.tr-row td{ padding:8px; }
.tr-key{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.76rem; color:var(--gold-dark); }
.tr-row input{ padding:8px 10px; font-size:.86rem; }

.sticky-save{
  position:sticky; bottom:0; background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); border-top:1px solid var(--line);
  padding:12px 0; margin-top:18px; z-index:20;
}

/* ------------------------------------------------------- responsive tweaks */
@media (max-width:719px){
  .hero{ padding-bottom:130px; }
  .searchcard{ border-radius:var(--r-lg); }
  .admin{ flex-direction:column; }
  .admin-side{
    width:100%; flex:none; height:auto; position:relative;
    display:flex; align-items:center; gap:10px; overflow-x:auto; padding:12px;
  }
  .admin-side nav{ flex-direction:row; margin-top:0; }
  .admin-side .grp{ display:none; }
  .admin-main{ padding:16px; }
}

@media print{
  .header,.footer,.topbar,.drawer,.btn{ display:none !important; }
}

/* ------------------------------------------------- store switcher (search) */
/* Sits between the search box and the results: change retailer, keep query. */
.storebar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 0 4px;
}
.storebar-chips{
  display:flex; gap:8px; flex:1 1 auto; min-width:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:4px;
}
.storebar-chips::-webkit-scrollbar{ display:none; }

.chip{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:7px 15px 7px 8px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-size:.88rem; font-weight:560; color:var(--ink-soft);
  white-space:nowrap; transition:.15s; cursor:pointer;
}
.chip:hover{ border-color:var(--ink-soft); color:var(--ink); }
.chip.on{
  border-color:var(--gold-dark); color:var(--ink);
  background:var(--gold-soft); font-weight:680;
}
.chip .store-logo{ width:26px; height:26px; border-radius:7px; font-size:.66rem; }
.chip-clear{ padding:7px 16px; color:var(--muted); }

.chip-select{
  flex:0 0 auto; width:auto; min-width:170px;
  padding:9px 34px 9px 14px; font-size:.86rem; font-weight:560;
  border-radius:999px; border:1px solid var(--line);
}
.storebar-tools{ display:flex; gap:8px; flex:0 0 auto; }

@media (max-width:719px){
  .storebar{ gap:10px; }
  .storebar-tools{ width:100%; }
  .chip-select{ width:100%; }
}

/* --------------------------------------------- language + currency switch */
@media (max-width:1023px){
  .switch .lang.cur{ display:none; }   /* mobile uses the drawer controls */
}

/* the small "approx A$…" line under a converted price */
.price-alt{ font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.fx-note{
  display:flex; align-items:center; gap:7px;
  font-size:.78rem; color:var(--muted);
  padding:9px 12px; background:var(--mist); border-radius:var(--r-sm);
}
.fx-note .dot{
  width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 auto;
}
.fx-note.stale .dot{ background:var(--gold-dark); }

/* ------------------------------------------------------------- mega menu */
.catmenu{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:720px){ .catmenu{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .catmenu{ grid-template-columns:repeat(3,1fr); } }

.catblock{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:16px; display:flex; flex-direction:column; gap:12px;
}
.catblock-head{ display:flex; align-items:center; gap:12px; }
.catblock-head .name{ font-weight:650; font-size:1rem; display:block; }
.catblock-subs{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.catblock-subs a{ font-size:.85rem; color:var(--ink-soft); }
.catblock-subs a:hover{ color:var(--ink); text-decoration:underline; }
.catblock-stores{ margin-top:auto; padding-top:10px; border-top:1px solid var(--line-soft); }
.catblock-label{
  display:block; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}

/* ===========================================================================
   CATEGORY BAR + MEGA MENU
   A second row under the header. Categories live here rather than in the
   header itself because the header is already carrying the logo, language,
   currency, cart and account — and a mega panel needs the full page width.
   =========================================================================== */

.catbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60;
  display:none;                       /* desktop only; mobile uses the drawer */
}
@media (min-width:1200px){ .catbar{ display:block; } }
/* Secondary bar links only appear when there's genuinely room for them. */
.hide-1280{ display:none; }
@media (min-width:1440px){ .hide-1280{ display:flex; } }

/* The wrap is the positioning context so the mega panel lines up with the
   page gutter instead of spanning the whole viewport. */
.catbar-inner{ position:relative; display:flex; align-items:center; gap:2px; height:52px; }

.catbar-home{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; color:var(--ink-soft); flex:none;
}
.catbar-home:hover{ background:var(--mist); color:var(--ink); }

.catnav{
  display:flex; align-items:center; gap:1px;
  flex:1 1 auto; min-width:0;
}

.catnav-item{ display:flex; align-items:center; min-width:0; }

.catnav-link{
  display:flex; align-items:center; gap:3px;
  padding:8px 6px; border-radius:9px;
  font-size:.85rem; font-weight:530; color:var(--ink-deep);
  white-space:nowrap; transition:background .13s, color .13s;
  flex:none;                    /* labels are never truncated */
}
.catnav-link > .label{ white-space:nowrap; }
.catnav-link svg{ flex:none; }

/* No-JS fallback only. With JavaScript the script measures the real rendered
   widths and decides how many items fit; these blunt breakpoints exist so the
   row still can't overflow if the script never runs. */
.no-js .catnav-more{ display:none !important; }
@media (max-width:1319px){ .no-js .catnav-item:nth-child(n+10){ display:none; } }
@media (max-width:1259px){ .no-js .catnav-item:nth-child(n+9){ display:none; } }

.catnav-more[hidden]{ display:none; }
.catnav-more .catnav-link{ color:var(--ink-soft); }
.catnav-link svg{ opacity:.45; transition:transform .18s, opacity .13s; }
.catnav-item:hover .catnav-link,
.catnav-item:focus-within .catnav-link{
  background:var(--gold-soft); color:var(--gold-dark); font-weight:620;
}
.catnav-item:hover .catnav-link svg,
.catnav-item:focus-within .catnav-link svg{ transform:rotate(180deg); opacity:.8; }

.catbar-right{
  display:flex; align-items:center; gap:4px;
  flex:0 0 auto; margin-left:10px; padding-left:10px;
  border-left:1px solid var(--line-soft);
}
.catbar-link{
  display:flex; align-items:center; gap:6px;
  padding:8px 11px; border-radius:9px;
  font-size:.845rem; font-weight:520; color:var(--ink-soft); white-space:nowrap;
}
.catbar-link:hover{ background:var(--mist); color:var(--ink); }
.catbar-link svg{ opacity:.6; }

.catbar-pill{
  display:flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:999px;
  background:var(--ink-deep); color:#fff;
  font-size:.845rem; font-weight:620; white-space:nowrap;
  transition:background .15s;
}
.catbar-pill:hover{ background:var(--ink); color:#fff; }
.catbar-pill svg{ color:var(--gold); opacity:1; }

/* --- the panel ----------------------------------------------------------- */
.mega{
  position:absolute; left:0; right:0; top:100%;
  margin-top:6px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:70;
}
.catnav-item:hover > .mega,
.catnav-item:focus-within > .mega{ opacity:1; visibility:visible; transform:none; }

.mega-body{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
@media (min-width:1240px){ .mega-body{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }

.mega-col{ padding:22px 26px 24px; min-width:0; }
.mega-col + .mega-col{ border-left:1px solid var(--line-soft); }

.mega-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.mega-label{
  font-size:.685rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft);      /* --muted is 3.1:1 on white — fails AA at this size */
}
.mega-tag{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  background:var(--gold-soft); color:var(--gold-dark);
  font-size:.7rem; font-weight:650; white-space:nowrap;
}
.mega-tag .flag{ border-radius:2px; }

/* brand tiles */
.mega-brands{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
@media (max-width:1180px){ .mega-brands{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.btile{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px;
  border:1px solid var(--line); border-radius:11px;
  background:var(--surface); min-width:0;
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.btile:hover{
  border-color:var(--ink-2); box-shadow:var(--shadow-sm); transform:translateY(-1px);
}
.btile-name{
  font-size:.845rem; font-weight:560; color:var(--ink-deep);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.btile-au{ width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }

/* the logo tile — initials until a real logo is uploaded */
.blogo{
  flex:none; width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--mist); color:var(--ink);
  font-size:.68rem; font-weight:750; letter-spacing:.02em;
  overflow:hidden;
}
.blogo img{ width:100%; height:100%; object-fit:contain; padding:3px; }
.blogo.lg{ width:52px; height:52px; border-radius:13px; font-size:1.05rem; }
.blogo.xl{ width:74px; height:74px; border-radius:18px; font-size:1.5rem; }

/* subcategory list */
.mega-subs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px 18px; }
.mega-sub{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px;
  font-size:.855rem; color:var(--ink-deep); min-width:0;
}
.mega-sub span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mega-sub svg{ margin-left:auto; opacity:.3; flex:none; }
.mega-sub:hover{ background:var(--mist); color:var(--ink); }
.mega-sub:hover svg{ opacity:.7; }

.mega-stores{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }

/* footer strip */
.mega-foot{
  display:flex; align-items:center; gap:8px;
  padding:13px 26px;
  background:var(--mist);
  border-top:1px solid var(--line-soft);
  font-size:.855rem; font-weight:620; color:var(--gold-dark);
}
.mega-foot:hover{ background:var(--mist-2); color:var(--gold-dark); }
.mega-foot .arrow{ transition:transform .15s; }
.mega-foot:hover .arrow{ transform:translateX(3px); }
.mega-foot .tagline{
  margin-left:auto; font-weight:450; color:var(--ink); font-size:.8rem;
}

/* --- drawer: the same categories, stacked --------------------------------- */
.drawer-cat{ border-top:1px solid var(--line-soft); }
.drawer-cat summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding:11px 12px; border-radius:9px;
  font-size:.93rem; font-weight:560; color:var(--ink-deep);
}
.drawer-cat summary::-webkit-details-marker{ display:none; }
.drawer-cat summary::after{
  content:"+"; margin-left:auto; color:var(--muted); font-size:1.05rem; line-height:1;
}
.drawer-cat[open] summary::after{ content:"–"; }
.drawer-cat[open] summary{ color:var(--ink); background:var(--mist); }
.drawer-cat-body{ padding:2px 0 10px 12px; }
.drawer-cat-body a{ font-size:.87rem; padding:7px 12px; color:var(--ink-soft); }

/* ===========================================================================
   BRAND PAGES
   =========================================================================== */

.bgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; }

.bcard{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:20px 14px 16px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.bcard:hover{ border-color:var(--ink-2); box-shadow:var(--shadow); transform:translateY(-2px); }
.bcard .name{ font-weight:600; color:var(--ink-deep); font-size:.92rem; line-height:1.25; }
.bcard .meta{ font-size:.74rem; color:var(--ink-soft); }

.made-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  background:var(--gold-soft); color:var(--gold-dark);
  font-size:.7rem; font-weight:650; white-space:nowrap;
}
.made-badge .flag{ border-radius:2px; }

.brand-hero{
  display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap;
}
.brand-hero .grow{ min-width:240px; }

.brand-facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.fact{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:var(--mist); color:var(--ink);
  font-size:.775rem; font-weight:520;
}

.letterbar{ display:flex; flex-wrap:wrap; gap:4px; }
.letterbar a{
  display:flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 6px; border-radius:8px;
  font-size:.8rem; font-weight:620; color:var(--ink); background:var(--mist);
}
.letterbar a:hover{ background:var(--ink); color:#fff; }

/* ===========================================================================
   BRANDS PANEL — category rail on the left, brand tiles on the right.
   Used both in the header dropdown and, at wider spacing, on /brands.
   =========================================================================== */

/* The panel is anchored to the bar, not to the pill, so it can be full width
   without spilling off the right edge of the page. */
.mega-brandpanel{ margin-top:6px; }

.bpanel{ display:grid; grid-template-columns:196px minmax(0,1fr); }

.bpanel-side{
  padding:14px 10px; background:var(--surface);
  border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:1px;
}
.bpanel-cat{
  display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:9px;
  font-size:.855rem; font-weight:530; color:var(--ink-deep);
}
.bpanel-cat span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bpanel-count{
  margin-left:auto; flex:none;
  min-width:24px; height:20px; padding:0 6px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--mist); color:var(--ink);
  font-size:.68rem; font-weight:700;
}
.bpanel-cat:hover{ background:var(--mist); color:var(--ink); }
.bpanel-cat.on{
  background:var(--gold-soft); color:var(--gold-dark); font-weight:640;
}
.bpanel-cat.on .bpanel-count{ background:var(--gold); color:var(--gold-dark); }

.bpanel-main{ padding:18px 20px 20px; min-width:0; }
/* Only the active category's grid is shown. Without JS the first one stays
   visible, which is a working menu rather than an empty box. */
.bpanel-grid{ display:none; }
.bpanel-grid.on{ display:block; }

.bpanel-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
@media (max-width:1240px){ .bpanel-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* --- the same layout as a page, for /brands ------------------------------- */
.brandpage{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:900px){ .brandpage{ grid-template-columns:224px minmax(0,1fr); gap:24px; } }

.brandrail{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:10px; align-self:start;
}
@media (min-width:900px){ .brandrail{ position:sticky; top:64px; } }