/*
  Sonlum header (assets/nav.css, paired with assets/nav.js).

  One row: leaf and wordmark, the text-only nav, then the store button, WhatsApp and bag. 60px at the top of the page,
  48px once scrolled (owner, 25 Oct 2026: about 30% smaller than the first pass). The morph is transforms only: the
  white surface scales on Y, the row's pieces rise 6px, the wordmark fades and slides out and the nav glides in beside
  the leaf. The header box keeps its 60px in the page flow.
  (The toolbar itself is never transformed: a transformed ancestor would trap the phone sheet, which is position: fixed.)

  Desktop dropdowns: Huel's mega-menu pattern with the owner's changes (numbers in reports/ui/nav-port.md):
  a full-width white panel under the bar with 8px bottom corners and a soft shadow, height and opacity over 300ms
  ease-out, content that cross-fades between triggers, one sliding 2px underline, and a 50% black, 8px blur dimmer.
  Phones: a 56px bar and a full-height sheet that slides in from the start edge.
*/

html { scroll-padding-top: 60px; }

.sn-header {
  --sn-bg: #ffffff;
  --sn-fg: #141414;
  --sn-accent: #2a0912;
  --sn-grey: #6e6e6e;         /* idle triggers and group labels */
  --sn-link-hover: #4b4b4b;   /* panel links on hover */
  --sn-fill: rgba(20, 20, 20, .05);    /* soft hover fills instead of borders */
  --sn-fill-2: rgba(20, 20, 20, .08);  /* pressed */
  --sn-soft: #f6f5f3;
  --sn-pad: 32px;             /* page gutter; the panel content lines up with the leaf */
  --sn-h: 60px;               /* expanded bar */
  --sn-rise: 0px;             /* 0 expanded, -6px compact (keeps the row centred in 48px) */
  --sn-bar: 60px;             /* the bar's visible bottom: where the panel hangs */
  --sn-morph: 260ms;
  --sn-ease: cubic-bezier(.65, 0, .35, 1);   /* the morph */
  --sn-ui: cubic-bezier(.4, 0, .2, 1);       /* colours, underline, chevron, dimmer */
  --sn-out: cubic-bezier(.2, .8, .2, 1);     /* content settling in */
  --sn-sheet: cubic-bezier(.32, .72, 0, 1);  /* the phone sheet */
  --sn-s: 1;                  /* writing direction sign for x offsets */
  position: sticky;
  top: 0;
  z-index: 40;
  display: block;   /* the page's own desktop rule makes every <header> a padded flex row */
  padding: 0;
  gap: 0;
  height: var(--sn-h);
  background: transparent;
  color: var(--sn-fg);
  font-family: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
[dir="rtl"] .sn-header {
  --sn-s: -1;
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}
.sn-header[data-compact="true"] { --sn-rise: -6px; --sn-bar: 48px; }
.sn-header:not([data-ready]) *, .sn-header:not([data-ready]) *::before, .sn-header:not([data-ready]) *::after { transition: none !important; }
.sn-header *, .sn-header *::before, .sn-header *::after { box-sizing: border-box; }
.sn-header button, .sn-header summary { font: inherit; color: inherit; cursor: pointer; }
.sn-header a, .sn-header button, .sn-header summary { touch-action: manipulation; }
.sn-header button { appearance: none; background: transparent; border: 0; margin: 0; }
.sn-header a, .sn-header a:hover { text-decoration: none; }
.sn-header ul { list-style: none; margin: 0; padding: 0; }
.sn-header p { margin: 0; }
/* The page styles every <details> and <summary> as its FAQ accordion; undo that here. */
.sn-header details { border: 0; }
.sn-header summary {
  min-height: 0; padding: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit;
  color: inherit; justify-content: flex-start; list-style: none;
}
.sn-header summary::after { content: none; }
.sn-header summary::-webkit-details-marker { display: none; }
.sn-header nav {
  /* The page styles every <nav> as its old link row; undo that here. */
  display: block; justify-content: initial; gap: 0; padding: 0; height: auto; overflow: visible;
  white-space: normal; font-size: inherit; line-height: inherit;
}
.sn-header :focus { outline: none; }
.sn-header :focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; border-radius: 6px; }
.sn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sn-header .sn-svg { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Surface and shadow: 60 to 48 with transforms only */
.sn-surface {
  position: absolute; top: 0; left: 0; right: 0; height: 60px;
  background: var(--sn-bg);
  transform-origin: 50% 0;
  transition: transform var(--sn-morph) var(--sn-ease);
  pointer-events: none;
}
.sn-seam {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: transparent;   /* no hairline: the bar sits on white, and lifts with a soft shadow once compact */
  transform: translateY(59px);
  box-shadow: 0 10px 24px -10px rgba(20, 20, 20, 0);
  transition: transform var(--sn-morph) var(--sn-ease), box-shadow var(--sn-morph) var(--sn-ease);
  pointer-events: none;
}
.sn-header[data-compact="true"] .sn-surface { transform: scaleY(.8); }
.sn-header[data-compact="true"] .sn-seam { transform: translateY(47px); box-shadow: 0 10px 24px -10px rgba(20, 20, 20, .16); }
.sn-header[data-mega-open="true"] .sn-seam { box-shadow: none; }

/* Toolbar: brand at the start, actions at the end */
.sn-toolbar {
  position: relative; z-index: 1;
  height: 60px; display: flex; align-items: center; gap: 16px; padding: 0 var(--sn-pad);
}
.sn-header .sn-brand {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0; flex-shrink: 0;
  color: var(--sn-fg); pointer-events: auto;
  translate: 0 var(--sn-rise);
  transition: translate var(--sn-morph) var(--sn-ease);
}
.sn-header .sn-brand img {
  display: block; width: 19px; height: 22px; max-width: none; object-fit: contain;
  transform-origin: 50% 50%;
  transition: scale var(--sn-morph) var(--sn-ease);
}
.sn-header[data-compact="true"] .sn-brand img { scale: .92; }
.sn-wordmark {
  font-family: 'Inter', system-ui, sans-serif;  /* the brand name stays Latin on the Arabic page */
  font-size: 16.5px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--sn-fg);
  white-space: nowrap; direction: ltr; unicode-bidi: isolate;
  transition: opacity var(--sn-morph) var(--sn-ease), translate var(--sn-morph) var(--sn-ease);
}
.sn-header[data-compact="true"] .sn-wordmark { opacity: 0; translate: calc(-6px * var(--sn-s)) 0; }
.sn-crumb { display: none; }  /* the breadcrumb is retired in this design; nav.js keeps it current */

.sn-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; min-width: 0; }
.sn-header .sn-actions > * { translate: 0 var(--sn-rise); transition: translate var(--sn-morph) var(--sn-ease), background-color .2s var(--sn-ui), width var(--sn-morph) var(--sn-ease); }
.sn-header .sn-actions > .sn-mobile { translate: none; }   /* its summary rises instead, so the fixed sheet is not trapped */
.sn-header .sn-mobile > summary { translate: 0 var(--sn-rise); transition: translate var(--sn-morph) var(--sn-ease), background-color .2s var(--sn-ui); }

/* Store button: flag and label, folding to the flag; no border, a soft fill on hover */
.sn-header .sn-lang {
  display: flex; align-items: center; justify-content: flex-start;
  width: var(--sn-lang-w, auto); height: 36px; padding: 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--sn-fg); overflow: hidden; flex-shrink: 0; pointer-events: auto;
}
.sn-header .sn-flag { display: block; flex: none; width: 20px; height: 20px; margin: 0 8px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06); }
.sn-lang-text {
  flex: none; white-space: nowrap; padding-inline-end: 12px; font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  transition: opacity var(--sn-morph) var(--sn-ease);
}
[dir="rtl"] .sn-lang-text { letter-spacing: 0; }
.sn-header[data-compact="true"] .sn-lang { width: 36px; }
.sn-header[data-compact="true"] .sn-lang-text { opacity: 0; }

.sn-header .sn-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--sn-fg); flex-shrink: 0; pointer-events: auto; }
.sn-icon[hidden] { display: none; }
.sn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sn-icon svg.wa-glyph { width: 17px; height: 17px; fill: currentColor; stroke: none; }
#headBag svg { width: 21px; height: 21px; translate: 0 -1px; }   /* the bag's path sits low and narrow in its box; match the WhatsApp glyph's weight */
/* Safari ignores display: grid on <summary>, which left the burger 13px off centre; pin it to the box's centre instead. */
.sn-header .sn-mobile > summary .sn-burger { position: absolute; inset: 0; margin: auto; }
@media (hover: hover) {
  .sn-header .sn-lang:hover, .sn-header .sn-icon:hover, .sn-header .sn-mobile > summary:hover { background: var(--sn-fill); }
}
.sn-header .sn-lang:active, .sn-header .sn-icon:active, .sn-header .sn-mobile > summary:active { background: var(--sn-fill-2); }

/* Desktop nav row: text-only triggers, one sliding underline */
.sn-header .sn-nav {
  position: absolute; top: 0; z-index: 2;
  inset-inline-start: calc(var(--sn-pad) + 19px + var(--sn-wm, 72px) + 14px);  /* text sits 26px after the wordmark */
  height: 60px; width: max-content;
  pointer-events: auto;
  transform: translate(0, var(--sn-rise));
  transition: transform var(--sn-morph) var(--sn-ease);
}
.sn-header[data-compact="true"] .sn-nav { transform: translate(calc(var(--sn-wm, 72px) * -1 * var(--sn-s)), var(--sn-rise)); }
.sn-header .sn-list { position: relative; display: flex; align-items: stretch; gap: 2px; height: 100%; width: max-content; }
.sn-item { position: relative; display: flex; height: 100%; flex-shrink: 0; }
.sn-header .sn-trigger {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 100%; padding: 0 12px;
  white-space: nowrap; color: var(--sn-grey);
  font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -.01em;
  transition: color .2s var(--sn-ui);
}
[dir="rtl"] .sn-header .sn-trigger { font-size: 14.5px; letter-spacing: 0; }
.sn-header .sn-trigger[aria-expanded="true"],
.sn-header .sn-list:not([data-open]) .sn-trigger[aria-current] { color: var(--sn-fg); }
@media (hover: hover) {
  .sn-header .sn-trigger:hover { color: var(--sn-fg); }
}
.sn-header .sn-trigger:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: -12px; border-radius: 6px; }
.sn-header svg.sn-chev { width: 10px; height: 10px; stroke-width: 2.25; margin-top: 1px; transition: rotate .2s var(--sn-ui); }
.sn-header .sn-trigger[aria-expanded="true"] svg.sn-chev { rotate: 180deg; }
.sn-ink {
  position: absolute; left: 0; bottom: 0; z-index: 1;   /* on the bar's bottom edge, as on Huel (owner, 25 Oct 2026) */
  width: 100px; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--sn-fg);
  transform-origin: 0 0;
  transform: translate3d(var(--sn-ink-x, 0px), 0, 0) scaleX(var(--sn-ink-w, 0));
  translate: 0 var(--sn-ink-y, 0px);
  opacity: 0;
  transition: transform .32s var(--sn-ui), opacity .2s var(--sn-ui), translate var(--sn-morph) var(--sn-ease);
  pointer-events: none;
}
.sn-ink.is-on { opacity: 1; }
/* The nav rises 6px with the row, so its bottom lands 6px under the 48px bar: lift the line the rest of the way,
   on the morph's own timing so it stays on the bar's edge throughout. */
.sn-header[data-compact="true"] .sn-ink { --sn-ink-y: -6px; }

/* Referral pill (owner, 25 Oct 2026): a slanted parallelogram like a "NEW" tag. The fill lives on a skewed ::before,
   so the label stays upright and the box never changes size. A one-off diagonal shine sweeps across on hover or
   keyboard focus: it is a band in the fill's own background, so the skewed, rounded shape clips it for free. */
.sn-refer-item { display: flex; align-items: center; margin-inline-start: 8px; }
.sn-refer-item[hidden] { display: none; }
.sn-header .sn-refer {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 14px;
  color: var(--sn-fg); background: none;
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: -.01em; white-space: nowrap;
}
[dir="rtl"] .sn-header .sn-refer { font-size: 13.5px; letter-spacing: 0; }
.sn-refer::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 50%; height: 28px; margin-top: -14px;
  border-radius: 6px;
  background-color: #dcf3d2;
  /* the shine: a white band in the middle of a 300%-wide image, parked off the pill at either end */
  background-image: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .65) 50%, transparent 60%);
  background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0;
  transform: skewX(-12deg);
  transition: background-color .2s var(--sn-ui);
}
[dir="rtl"] .sn-refer::before {
  transform: skewX(12deg); background-position: 0 0;
  background-image: linear-gradient(80deg, transparent 40%, rgba(255, 255, 255, .65) 50%, transparent 60%);
}
@media (hover: hover) {
  .sn-header .sn-refer:hover::before { background-color: #cdeec1; }
  .sn-header .sn-refer:hover::before,
  .sn-header .sn-refer:focus-visible::before { background-position: 0 0; transition: background-position .6s ease-out, background-color .2s var(--sn-ui); }
  [dir="rtl"] .sn-header .sn-refer:hover::before,
  [dir="rtl"] .sn-header .sn-refer:focus-visible::before { background-position: 100% 0; }
}
.sn-header .sn-refer:focus-visible { outline: none; }
.sn-header .sn-refer:focus-visible::before { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sn-accent); }
.sn-header .sn-refer:active::before { background-color: #c2e8b4; }
/* Touch screens wide enough for the desktop row (tablets): a 44px hit area, the same 28px shape */
@media (pointer: coarse) {
  .sn-header .sn-refer { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-header .sn-refer:hover::before, .sn-header .sn-refer:focus-visible::before { background-position: 100% 0; }
  [dir="rtl"] .sn-header .sn-refer:hover::before, [dir="rtl"] .sn-header .sn-refer:focus-visible::before { background-position: 0 0; }
}

/* The mega panel */
.sn-mega {
  position: absolute; top: var(--sn-bar); left: 0; right: 0; z-index: 3;
  height: 0; overflow: hidden;
  visibility: hidden; opacity: 0;
  background: var(--sn-bg); color: var(--sn-fg);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 14px 24px -8px rgba(20, 20, 20, .14), 0 4px 6px -4px rgba(20, 20, 20, .08);
  transition: height .3s ease-out, opacity .3s ease-out, visibility .3s ease-out, top var(--sn-morph) var(--sn-ease);
  pointer-events: auto;
  -webkit-user-select: text; user-select: text;
}
/* Visible at once on open (keyboard focus can land in it); stays visible until the 300ms close has run. */
.sn-mega[data-open] {
  visibility: visible; opacity: 1;
  transition: height .3s ease-out, opacity .3s ease-out, visibility 0s, top var(--sn-morph) var(--sn-ease);
}
.sn-mega-stage { position: relative; }
.sn-mega-section {
  opacity: 1; transform: none;
  transition: opacity .24s var(--sn-ui), transform .32s var(--sn-out);
}
.sn-mega-section[hidden] { display: none; }
.sn-mega-section.is-in { opacity: 0; transform: translateY(-6px); transition: none; }
.sn-mega-section.is-out { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: none; transition: opacity .16s ease-in; pointer-events: none; }
.sn-mega-inner { display: flex; align-items: flex-start; gap: 48px; padding: 24px var(--sn-pad) 28px; }
.sn-mega-groups { flex: 1 1 auto; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: 64px; }
.sn-mega-group, .sn-sheet-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sn-mega-label, .sn-sheet-label {
  display: flex; align-items: center; gap: 8px; min-height: 28px;
  color: var(--sn-grey);
  font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -.01em;
}
[dir="rtl"] .sn-mega-label, [dir="rtl"] .sn-sheet-label { letter-spacing: 0; line-height: 22px; }
.sn-header svg.sn-gico { flex: none; width: 16px; height: 16px; fill: currentColor; stroke: none; }
.sn-header .sn-mega-links, .sn-header .sn-sheet-links { display: flex; flex-direction: column; padding-inline-start: 24px; }  /* text lines up under the label */
.sn-mega-links > li, .sn-sheet-links > li { display: flex; }
.sn-mega-links > li[hidden], .sn-sheet-links > li[hidden] { display: none; }
.sn-header .sn-mega-link {
  display: flex; align-items: center; min-height: 34px; color: var(--sn-fg);
  font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -.015em;
  transition: color .2s var(--sn-ui);
}
[dir="rtl"] .sn-header .sn-mega-link { line-height: 1.5; letter-spacing: 0; }
@media (hover: hover) {
  .sn-header .sn-mega-link:hover { color: var(--sn-link-hover); }
}
/* Photo tile: square photo, caption, and a "Shop now" link */
.sn-header .sn-mega-tile {
  flex: 0 1 420px; margin-inline-start: auto;
  display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px;
  color: var(--sn-fg);
}
.sn-mega-photo { display: block; width: 112px; height: 112px; overflow: hidden; border-radius: 10px; background: var(--sn-soft); }
.sn-mega-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sn-out); }
.sn-mega-caption { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sn-mega-tile-title { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.sn-mega-tile-text { color: var(--sn-grey); font-size: 13.5px; font-weight: 400; line-height: 1.45; letter-spacing: -.005em; }
.sn-mega-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
[dir="rtl"] .sn-mega-tile-title, [dir="rtl"] .sn-mega-tile-text, [dir="rtl"] .sn-mega-cta { letter-spacing: 0; }
.sn-header .sn-arrow { width: 15px; height: 15px; transition: translate .25s var(--sn-out); }
[dir="rtl"] .sn-header .sn-arrow { scale: -1 1; }
@media (hover: hover) {
  .sn-header .sn-mega-tile:hover .sn-mega-photo img { transform: scale(1.04); }
  .sn-header .sn-mega-tile:hover .sn-arrow { translate: calc(3px * var(--sn-s)) 0; }
}

/* The dimmer over the page, from the bar's visible bottom down */
.sn-dim {
  position: fixed; top: var(--sn-dim-top, 60px); left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  visibility: hidden; opacity: 0;
  transition: opacity .3s var(--sn-ui), visibility .3s var(--sn-ui);
  pointer-events: auto;
}
.sn-header[data-mega-open="true"] .sn-dim { visibility: visible; opacity: 1; }

/* Phone menu button: two lines that cross into an X */
.sn-mobile { display: none; }
.sn-header .sn-mobile > summary { position: relative; display: grid; place-items: center; width: 40px; height: 40px; list-style: none; border-radius: 999px; pointer-events: auto; }
.sn-burger { position: relative; display: block; width: 18px; height: 12px; }
.sn-burger i {
  position: absolute; left: 0; right: 0; height: 1.75px; border-radius: 2px; background: currentColor;
  transition: transform .3s var(--sn-sheet), top .3s var(--sn-sheet);
}
.sn-burger i:first-child { top: 2px; }
.sn-burger i:last-child { top: 8.25px; }
.sn-mobile[data-state="open"] .sn-burger i { top: 5.125px; }
.sn-mobile[data-state="open"] .sn-burger i:first-child { transform: rotate(45deg); }
.sn-mobile[data-state="open"] .sn-burger i:last-child { transform: rotate(-45deg); }

/* Phone sheet: full height under the bar, sliding in from the start edge */
.sn-header .sn-mobile-menu {
  position: fixed; top: var(--sn-sheet-top, 56px); left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  background: var(--sn-bg);
  padding: 8px env(safe-area-inset-right) calc(16px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  overflow: hidden;
  overscroll-behavior: contain;
  pointer-events: auto;
  transform: translateX(calc(-100% * var(--sn-s)));
  transition: transform .32s var(--sn-sheet);
  interpolate-size: allow-keywords;
}
.sn-mobile[data-state="open"] .sn-mobile-menu { transform: none; }
.sn-sheet-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0 8px; }
.sn-header .sn-sheet-row,
.sn-header .sn-acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 0 16px; border-radius: 12px;
  color: var(--sn-fg); font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; text-align: start;
}
[dir="rtl"] .sn-header .sn-sheet-row, [dir="rtl"] .sn-header .sn-acc > summary { letter-spacing: 0; }
.sn-header .sn-sheet-row:active, .sn-header .sn-acc > summary:active, .sn-header .sn-sheet-link:active { background: var(--sn-fill); }
.sn-header .sn-acc-chev { width: 18px; height: 18px; color: var(--sn-grey); transition: rotate .25s var(--sn-ui); }
.sn-acc[open] .sn-acc-chev { rotate: 180deg; }
.sn-acc::details-content { height: 0; overflow: clip; transition: height .3s var(--sn-sheet), content-visibility .3s allow-discrete; }
.sn-acc[open]::details-content { height: auto; }
.sn-acc-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; }
.sn-header .sn-sheet-link {
  display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 12px; margin-inline-start: -12px; border-radius: 10px;
  color: var(--sn-fg); font-size: 16px; font-weight: 500; letter-spacing: -.015em;
}
[dir="rtl"] .sn-header .sn-sheet-link { letter-spacing: 0; }
.sn-header .sn-mobile-menu [aria-current] { font-weight: 600; }
/* Referral row at the top of the sheet */
.sn-header .sn-sheet-refer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 4px 8px 8px; min-height: 56px; padding: 0 16px; border-radius: 12px;
  background: #dcf3d2; color: var(--sn-fg);
  font-size: 16px; font-weight: 600; letter-spacing: -.015em;
}
[dir="rtl"] .sn-header .sn-sheet-refer { letter-spacing: 0; }
.sn-header .sn-sheet-refer[hidden] { display: none; }
.sn-header .sn-sheet-refer:active { background: #c2e8b4; }
.sn-header .sn-sheet-refer .sn-arrow { width: 18px; height: 18px; }

/* The store row: language and country, at the bottom like Huel's drawer */
.sn-header .sn-sheet-store {
  flex: none; display: flex; align-items: center; gap: 12px;
  margin: 8px 16px 0; min-height: 64px; padding: 0 16px; border-radius: 14px;
  background: var(--sn-soft); color: var(--sn-fg); text-align: start;
}
.sn-header .sn-sheet-store:active { background: #efede9; }
.sn-sheet-flag { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06); }
.sn-sheet-store-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sn-sheet-store-label { color: var(--sn-grey); font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.sn-sheet-store-value { font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
.sn-header .sn-sheet-store-chev { width: 18px; height: 18px; color: var(--sn-grey); rotate: -90deg; }
[dir="rtl"] .sn-header .sn-sheet-store-chev { rotate: 90deg; }

@media (max-width: 1199px) {
  .sn-header { --sn-pad: 24px; }
  .sn-header .sn-trigger { padding: 0 11px; }
}
@media (max-width: 999px) {
  .sn-header { --sn-h: 56px; --sn-pad: 16px; --sn-rise: 0px; --sn-bar: 56px; }
  .sn-header[data-compact] { --sn-rise: 0px; }
  .sn-header .sn-surface, .sn-header[data-compact] .sn-surface { height: 56px; transform: none; }
  .sn-header .sn-seam, .sn-header[data-compact] .sn-seam { transform: translateY(55px); }
  .sn-header[data-compact="true"] .sn-seam { box-shadow: 0 10px 24px -10px rgba(20, 20, 20, .16); }
  .sn-toolbar { height: 56px; gap: 8px; }
  .sn-header .sn-brand img, .sn-header[data-compact] .sn-brand img { width: 21px; height: 24px; scale: none; }
  .sn-wordmark, .sn-header[data-compact="true"] .sn-wordmark { font-size: 17px; opacity: 1; translate: none; }
  .sn-header .sn-nav, .sn-mega, .sn-dim { display: none; }
  .sn-header .sn-lang { width: 40px; }
  .sn-header .sn-lang-text { opacity: 0; }
  .sn-actions { gap: 0; }
  .sn-mobile { display: block; }
  /* Touch: 44px targets, the gutter clears notches in landscape */
  .sn-toolbar { padding-inline: max(var(--sn-pad), env(safe-area-inset-left)) max(var(--sn-pad), env(safe-area-inset-right)); }
  [dir="rtl"] .sn-toolbar { padding-inline: max(var(--sn-pad), env(safe-area-inset-right)) max(var(--sn-pad), env(safe-area-inset-left)); }
  .sn-header .sn-brand { height: 44px; }
  .sn-header .sn-lang, .sn-header[data-compact="true"] .sn-lang { width: 44px; height: 44px; }
  .sn-header .sn-flag { margin: 0 12px; }
  .sn-header .sn-icon, .sn-header .sn-mobile > summary { width: 44px; height: 44px; }
  .sn-header .sn-toolbar { gap: 8px; }
  .sn-toolbar > .sn-actions { margin-inline-end: -6px; }  /* optical: the glyphs, not the hit areas, align to the gutter */
}
/* Wordmark only drops when the row truly cannot hold it (it fits down to 330px with 44px targets). */
@media (max-width: 329px) {
  .sn-wordmark { display: none; }
}
/* Desktop, and the nav would run into the actions: hand over to the menu button */
.sn-header[data-overflow="true"] .sn-nav,
.sn-header[data-overflow="true"] .sn-mega,
.sn-header[data-overflow="true"] .sn-dim { display: none; }
.sn-header[data-overflow="true"] .sn-mobile { display: block; }

@media (prefers-reduced-motion: reduce) {
  .sn-header, .sn-header *, .sn-header *::before, .sn-header *::after { transition: none !important; }
  .sn-acc::details-content { transition: none; }
}