/* =========================================================
   SILLAGE  ·  mobile-first storefront styles
   Tokens live in :root. Change them to reskin the shop.
   ========================================================= */

:root {
  --porcelain: #FFFFFF;   /* page background: white, like the studio set */
  --ink: #111111;         /* text, primary buttons */
  --oud: #111111;         /* accent: links, focus (monochrome) */
  --gilt: #0041CD;        /* logo gold, saved hearts */
  --mist: #E4E6EA;        /* borders, dividers: cool grey */
  --card: #EDEFF2;        /* image background: pale concrete grey */
  --muted: #6B7078;
  --ok: #2F7A57;
  --warn: #B4531B;

  --display: "Cormorant Garamond", "Garamond", "Georgia", serif;
  --ui: "Jost", "Century Gothic", "Futura", Arial, sans-serif;

  --radius: 12px;
  --radius-sm: 10px;
  --gutter: 16px;
  --header-h: 58px;
  --bottomnav-h: 60px;
  --shadow: 0 10px 30px rgba(17,17,17,.08);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tile: 18px;                               /* the product card's corners */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: calc(var(--bottomnav-h) + var(--safe-b));
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 500; line-height: 1.05; letter-spacing: 0; }
h1 { font-size: 34px; }
h2 { font-size: 25px; }
h3 { font-size: 19px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--oud); outline-offset: 2px; }

.container { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1120px; margin: 0 auto; }
.section { padding-top: 32px; padding-bottom: 32px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.section-head a { font-size: 14px; color: var(--oud); border-bottom: 1px solid currentColor; padding-bottom: 1px; white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-weight: 500; letter-spacing: 0.01em; transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--mist); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-accent { background: var(--oud); border-color: var(--oud); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; position: relative;
}
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.desktop-only { display: none; }
.staff-btn { display: inline-flex; align-items: center; text-decoration: none; padding: 0 10px; border-style: dashed; }
.staff-btn:hover { background: rgba(255,255,255,.12); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink); color: #fff;
}
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 6px; }
.logo { margin-inline-end: auto; padding: 4px 0; display: flex; align-items: center; }
.logo img { height: 36px; width: auto; }
.cart-count {
  position: absolute; top: 5px; inset-inline-end: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--gilt); color: #111; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.cart-count:empty, .cart-count[data-zero] { display: none; }
.desktop-nav { display: none; }

/* ---------- round menu button + full-screen menu (2026-11-03) ----------
   The header's last button: three lines that turn into an X. The menu grows as a circle from it (clip-path) in the header
   colour: the page links, one pill per group, the language switch. The button has a fixed size and no words, so the header
   row never moves when the language changes. The header (z 40) stays above the menu (z 38), so the X stays where it was. */
.menu-btn { width: 40px; height: 40px; flex: none; margin-inline-start: 4px; padding: 0; display: grid; place-content: center; gap: 4px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.6); border-radius: 50%; background: transparent; transition: background .25s, border-color .25s; }
.menu-btn i { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: #fff; transition: transform .4s cubic-bezier(.7, 0, .2, 1), opacity .2s, background .25s; }
body.menu-open .menu-btn { background: #fff; border-color: #fff; }
body.menu-open .menu-btn i { background: var(--ink); }
body.menu-open .menu-btn i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
body.menu-open .menu-btn i:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
.site-menu { position: fixed; inset: 0; z-index: 38; overflow-y: auto; overscroll-behavior: contain; background: var(--ink); color: #fff; visibility: hidden;
  clip-path: circle(0 at var(--mx, calc(100% - 36px)) var(--my, 29px)); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s .6s; }
body.menu-open .site-menu { visibility: visible; clip-path: circle(150% at var(--mx, calc(100% - 36px)) var(--my, 29px)); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
body.menu-open { overflow: hidden; }
.site-menu-inner { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center;
  padding: calc(var(--header-h) + 24px) var(--gutter) calc(var(--bottomnav-h) + var(--safe-b) + 24px); }
.site-menu-inner > * { opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .45s var(--ease); }
body.menu-open .site-menu-inner > * { opacity: 1; transform: none; }
body.menu-open .site-menu-inner > :nth-child(1) { transition-delay: .2s; }
body.menu-open .site-menu-inner > :nth-child(2) { transition-delay: .27s; }
body.menu-open .site-menu-inner > :nth-child(3) { transition-delay: .34s; }
.sm-links { display: grid; gap: 14px; }
.sm-links a { font-family: var(--display); font-size: 40px; font-weight: 500; line-height: 1.2; color: #fff; }
.sm-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.sm-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 340px; }
.sm-groups a { padding: 8px 15px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; font-size: 13px; color: #fff; transition: background .2s; }
.sm-groups a:hover, .sm-groups a:focus-visible { background: rgba(255,255,255,.12); }
.sm-lang { height: 50px; min-width: 150px; padding: 0 28px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 600; transition: transform .2s; }
.sm-lang:active { transform: scale(.95); }
html[lang="ar"] .sm-lang { font-family: "Jost", sans-serif; }   /* it says "English" */
html[lang="ar"] .sm-links { gap: 18px; }
html[lang="ar"] .sm-links a { line-height: 1.45; }
.site-menu :focus-visible, .menu-btn:focus-visible { outline-color: #fff; }

/* announcement */
.announce { background: var(--ink); color: #fff; font-size: 12px; letter-spacing: .02em; text-align: center; padding: 8px var(--gutter); }
/* the owner paused orders (Staff > Delivery): above the header on every page */
.pause-bar { background: var(--gilt); color: var(--ink); font-weight: 500; }

/* ---------- bottom nav (mobile) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--ink);
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding-bottom: var(--safe-b); height: calc(var(--bottomnav-h) + var(--safe-b));
  box-shadow: 0 -1px 0 rgba(255,255,255,.12);   /* a thin line between the footer band and the phone bar (same colour) */
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; letter-spacing: .02em; color: rgba(255,255,255,.55); position: relative; min-height: 44px;
}
.bottom-nav a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.bottom-nav a[aria-current="page"] { color: #fff; }
.bottom-nav .cart-count { top: 6px; inset-inline-end: auto; inset-inline-start: calc(50% + 4px); }

/* ---------- search overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(30,22,38,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.overlay.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 70; background: #fff;
  transition: transform .25s ease;
}
.sheet-top { top: 0; left: 0; right: 0; transform: translateY(-100%); padding: 12px var(--gutter) 20px; border-bottom: 1px solid var(--mist); }
.sheet-right { top: 0; right: 0; bottom: 0; width: min(88vw, 400px); transform: translateX(100%); display: flex; flex-direction: column; }
.sheet-bottom { left: 0; right: 0; bottom: 0; transform: translateY(100%); max-height: 88vh; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; padding-bottom: var(--safe-b); }
.sheet.open { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gutter); border-bottom: 1px solid var(--mist); }
.sheet-body { overflow-y: auto; flex: 1; padding: var(--gutter); }
.sheet-foot { padding: 12px var(--gutter); border-top: 1px solid var(--mist); background: #fff; display: grid; gap: 8px; }

.search-row { display: flex; gap: 8px; align-items: center; }
.search-row input { flex: 1; }
.search-results { display: grid; gap: 6px; margin-top: 12px; }
.search-results a { display: flex; gap: 12px; align-items: center; padding: 8px; background: var(--card); border-radius: var(--radius); }
.search-results a .thumb { width: 48px; height: 56px; flex: none; background: var(--mist); border-radius: 8px; overflow: hidden; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 500; }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--mist); border-radius: var(--radius-sm);
  background: #fff; font-size: 16px; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 80px; }
.field input:focus, .field select:focus, .input:focus, .field textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
.field .error { color: var(--warn); font-size: 13px; display: none; }
.field.invalid input, .field.invalid select { border-color: var(--warn); }
.field.invalid .error { display: block; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* choice cards (radio) */
.choice { display: grid; gap: 10px; }
.choice label {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px;
  background: #fff; border: 1px solid var(--mist); border-radius: var(--radius); cursor: pointer;
}
.choice label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.choice .grow { flex: 1; }
.choice .price { font-weight: 600; font-size: 16px; margin-top: 2px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: 24px; padding-bottom: 14px; }   /* a little space under the buttons */
.hero-inner { position: relative; }
.hero h1 {
  font-size: clamp(40px, 11.5vw, 68px); font-weight: 500; line-height: .95; letter-spacing: -0.01em;
  position: relative; z-index: 1;
}
.hero h1 .line2 { display: block; padding-inline-start: 14vw; font-style: italic; }
/* the heading's words rise from their own masks, then a short accent line grows under it (pages.js, 2026-11-03). h1.pre keeps
   it hidden until the words are ready; if the script never runs it shows anyway after 1.4 s */
.hero h1.pre { opacity: 0; animation: heroShow 0s 1.4s forwards; }
@keyframes heroShow { to { opacity: 1; } }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .04em .16em; margin: -.1em -.04em -.16em; }
.hero h1 .wi { display: inline-block; opacity: 0; transform: translateY(105%) skewY(4deg); filter: blur(4px);
  transition: transform 1.05s cubic-bezier(.16, .84, .24, 1) var(--d), opacity .7s ease var(--d), filter .9s ease var(--d); }
.hero h1.in .wi { opacity: 1; transform: none; filter: none; }
.hero h1.split::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 16px; background: var(--gilt);
  transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.16, .84, .24, 1) .7s; }
html[dir="rtl"] .hero h1.split::after { transform-origin: right center; }
.hero h1.in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .hero h1.pre { opacity: 1; } .hero h1 .wi { filter: none; } }
.hero-art { margin: 18px calc(var(--gutter) * -1) 0; position: relative; z-index: 0; display: block; aspect-ratio: 8 / 9; overflow: hidden; background: var(--card); }
/* slideshow: the next photo glides in from the right, the old one glides out to the left */
.hero-slide { position: absolute; inset: 0; z-index: 0; transform: translateX(100%); transition: transform 1s cubic-bezier(.4, 0, .2, 1); }
.hero-slide.was { z-index: 1; transform: translateX(-100%); }
.hero-slide.on { z-index: 2; transform: translateX(0); }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.hero-tag.swap { animation: tagIn .8s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes tagIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.hero-tag { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; font-size: 13px; }
.hero-tag b { font-family: var(--display); font-size: 21px; font-weight: 600; }
.hero-copy { position: relative; z-index: 1; margin-top: -10px; max-width: 34ch; }
.hero-copy p { font-size: 15.5px; line-height: 1.55; }
.hero-cta { display: flex; gap: 10px; margin-top: 16px; margin-bottom: 6px; }

/* value row */
.value-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 22px 0 28px; margin-top: 6px; border-top: 1px solid var(--mist); }
.value-row div { display: grid; justify-items: center; text-align: center; gap: 6px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.value-row svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.4; }

/* ---------- chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px var(--gutter); margin: 0 calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--mist);
  background: #fff; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap;
}
.chip .dot { width: 10px; height: 10px; border-radius: 50%; }
.chip[aria-pressed="true"], .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- product card (2026-11-03, the tile card) ----------
   One white tile around the photo and the words, a thin line in the product's accent colour (--acc) under the photo, the
   name, then the price and a round button. Computers: the tile lifts and the photo zooms a little on hover. */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mist); border-radius: var(--tile); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card-media { position: relative; display: block; aspect-ratio: 2 / 3; background: var(--card); overflow: hidden; }
.card-media::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--acc, var(--gilt)); opacity: .9; }
.card-media img { transition: transform .7s var(--ease); }
.card-media svg, .card-media img { width: 100%; height: 100%; object-fit: cover; }
.card.is-out .card-media img { filter: grayscale(.6); opacity: .75; }
.badge {
  position: absolute; top: 10px; inset-inline-start: 10px; font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 999px; background: var(--ink); color: #fff;
}
.badge.sale { background: var(--oud); }
.badge.new { background: var(--gilt); color: #fff; }
.badge.limited { background: #B4531B; color: #fff; }
.badge.soldout { background: #6B7078; color: #fff; }
.wish {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.wish svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.6; }
.wish[aria-pressed="true"] svg { fill: var(--gilt); stroke: var(--gilt); }
.card-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }   /* the price row sits at the bottom: rows line up */
.card-name { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.12; }
.price { font-weight: 600; font-size: 16px; margin-top: 2px; }
.price del { color: var(--muted); font-weight: 400; margin-inline-start: 6px; font-size: .85em; white-space: nowrap; }
.price .from { color: var(--muted); font-weight: 400; font-size: 13px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.card-foot .price { margin: 0; font-size: 15.5px; }
.card-foot .price del { display: block; margin: 0; font-size: 12px; }
/* the round button: add to bag (a muted bag when sold out); on "noAdd" cards an arrow to the product */
.card-add, .card-go { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink); color: #fff; transition: transform .2s var(--ease), background .2s; }
.card-go { background: var(--card); color: var(--ink); }
.card-add svg, .card-go svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .card-go svg { transform: scaleX(-1); }
.card-add:active { transform: scale(.88); }
.card-add.is-off { background: var(--mist); color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,17,17,.1); border-color: transparent; }
  .card:hover .card-media img { transform: scale(1.05); }
  .card-add:not(.is-off):hover { background: color-mix(in srgb, var(--ink) 78%, #fff); }
}
/* cards fade up as they scroll into view (app.js adds .js-reveal, then .in, with a small stagger --d). An animation, not a
   transition, so the hover lift above still works once it is done. Off with reduced motion. */
.js-reveal [data-reveal]:not(.in) { opacity: 0; }
.js-reveal [data-reveal].in { animation: revealUp .6s var(--ease) var(--d, 0ms) backwards; }
@keyframes revealUp { from { opacity: 0; transform: translateY(18px); } }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars svg { width: 12px; height: 12px; fill: var(--gilt); }
.stars svg.off { fill: var(--mist); }

/* slider (horizontal product row) */
.slider { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px var(--gutter) 6px; margin: 0 calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); }
.slider::-webkit-scrollbar { display: none; }
.slider .card { flex: 0 0 46%; scroll-snap-align: start; }

/* categories */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cat-tile { display: grid; gap: 4px; color: var(--ink); }
.cat-tile .tile-img { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--card); margin-bottom: 6px; }
.cat-tile .tile-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile b { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1; }
.cat-tile > span:last-child { font-size: 12px; color: var(--muted); }

/* notes explorer */
.notes-explorer { background: var(--ink); color: #fff; padding-top: 32px; padding-bottom: 32px; }
.notes-explorer h2 { color: #fff; }
.notes-explorer .chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.notes-explorer .chip[aria-pressed="true"] { background: var(--gilt); color: var(--ink); border-color: var(--gilt); }
.notes-result { margin-top: 18px; display: grid; gap: 10px; }
.notes-result a { display: flex; align-items: center; gap: 12px; padding: 10px; background: rgba(255,255,255,.07); border-radius: var(--radius); }
.notes-result .thumb { width: 56px; height: 64px; flex: none; background: rgba(255,255,255,.08); border-radius: var(--radius); overflow: hidden; }
.notes-result .thumb img, .search-results .thumb img, .line .thumb img { width: 100%; height: 100%; object-fit: contain; }
.notes-result b { font-family: var(--display); font-weight: 500; font-size: 18px; display: block; }
.notes-result small { opacity: .75; }

/* brand story */
.story { background: var(--ink); color: #fff; padding-top: 40px; padding-bottom: 40px; }
.story h2 { color: #fff; font-size: 32px; font-weight: 500; max-width: 18ch; }
.story .ar { font-size: 20px; margin: 8px 0 16px; opacity: .85; direction: rtl; text-align: left; font-family: "Jost", "Segoe UI", Tahoma, sans-serif; }
.story p { max-width: 44ch; opacity: .85; }
.story .proof { color: var(--gilt); margin-top: 14px; }
.story img { height: 44px; width: auto; margin-bottom: 18px; }

/* promo banner */
.promo { border: 1px solid var(--ink); padding: 22px; display: grid; gap: 10px; background: #fff; }
.promo h2 { font-style: italic; font-weight: 500; }

/* reviews */
.review { background: var(--card); padding: 14px; border-radius: var(--radius); display: grid; gap: 6px; }
.review b { font-weight: 500; }

/* footer (2026-11-03): a band in the header colour with the white logo (to the home page) and ring social buttons */
.site-footer { background: var(--ink); color: rgba(255,255,255,.68); padding: 34px 0 24px; font-size: 13px; }
.site-footer h3 { font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.footer-cols { display: grid; gap: 22px; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-cols a { display: inline-block; min-height: 24px; }
.newsletter { display: flex; gap: 8px; }
.newsletter input { flex: 1; }
.site-footer .footer-cols { text-align: center; justify-items: center; }
.footer-brand { display: grid; justify-items: center; gap: 20px; }
.footer-logo { display: block; }
.footer-logo img { display: block; height: 52px; width: auto; }
.social { display: flex; gap: 12px; margin: 0; justify-content: center; }
.social a { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: transparent; border: 1.5px solid rgba(255,255,255,.45); transition: background .2s, border-color .2s, transform .2s var(--ease); }
.social svg { width: 19px; height: 19px; }
.social a:active { transform: scale(.92); }
@media (hover: hover) { .social a:hover { background: rgba(255,255,255,.12); border-color: #fff; } }
.site-footer :focus-visible { outline-color: #fff; }
/* every shop page (2026-11-03): some space between the page and the footer; on a short page (an empty bag) the footer still
   reaches the phone bar: the page is a column and main takes the room left */
body:not(.staff-body) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:not(.staff-body) > main { flex: 1 0 auto; width: 100%; padding-bottom: 36px; }
.pay-icons { display: flex; gap: 6px; margin-top: 8px; }
.pay-icons span { border: 1px solid var(--mist); border-radius: 3px; padding: 3px 8px; font-size: 11px; background: #fff; color: var(--ink); }

/* ---------- shop page ---------- */
/* the head (2026-11-03): the title and the item count with a small sort pill on one row, slim group chips (no dots) under it */
.shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 12px; }
.shop-title { display: grid; gap: 4px; min-width: 0; }
.shop-title h1 { margin: 0; font-size: 30px; line-height: 1; }
html[lang="ar"] .shop-title h1 { line-height: 1.3; }
.shop-count { font-size: 13px; color: var(--muted); }
.sort-pill { flex: none; height: 36px; max-width: 52%; padding: 0 32px 0 14px; border: 1px solid var(--mist); border-radius: 999px; font: inherit; font-size: 13px; color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 10px 6px;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
html[dir="rtl"] .sort-pill { padding: 0 14px 0 32px; background-position: left 13px center; }
.sort-pill:hover, .sort-pill:focus-visible { border-color: var(--ink); }
.shop-chips { gap: 6px; margin-bottom: 16px; }
.shop-chips[hidden] { display: none; }
.shop-chips .chip { min-height: 36px; padding: 0 14px; font-size: 13px; }
/* an older shop.html: its sort box sits in .shop-bar */
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 20px; }
.shop-bar select { min-height: 40px; padding: 0 12px; border: 1px solid var(--mist); border-radius: var(--radius-sm); background: #fff; font-size: 14px; }
.filter-btn { min-height: 44px; }
.filter-group { margin-bottom: 20px; }
.filter-group h4 { font-family: var(--ui); font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }

/* ---------- product page ---------- */
.gallery { position: relative; margin: 0 calc(var(--gutter) * -1); background: var(--card); }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track > div { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1; }
.gallery-track svg, .gallery-track img { width: 100%; height: 100%; object-fit: cover; }
.gallery-track > div { aspect-ratio: 4 / 5; }
.dots { bottom: 14px; }
.dots span { width: 7px; height: 7px; background: rgba(255,255,255,.7); }
.dots span.on { background: var(--ink); }
.gallery-track > div:has(img.wide) { aspect-ratio: 1066 / 904; }
.card-media img.wide, .tile-img img.wide, .line .thumb img.wide { object-fit: contain; }
.dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--mist); }
.dots span.on { background: var(--ink); }
.pdp-title { padding-top: 22px; }
.pdp-title h1 { font-size: 34px; font-weight: 600; }
.pdp-price { font-size: 22px; font-weight: 600; margin: 10px 0 4px; }
.pdp-price del { font-size: 16px; }
.save-tag { font-size: 13px; color: var(--oud); }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.size-btn {
  min-height: 56px; border: 1px solid var(--mist); background: #fff; border-radius: var(--radius);
  display: grid; justify-items: center; gap: 2px;
}
.size-btn b { font-weight: 500; }
.size-btn small { color: var(--muted); font-size: 12px; }
.size-btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.size-btn:disabled { opacity: .4; text-decoration: line-through; }
.stock { font-size: 14px; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.stock.low::before { background: var(--warn); }
.stock.out::before { background: var(--muted); }
.qty { display: inline-flex; border: 1px solid var(--mist); border-radius: var(--radius-sm); background: #fff; }
.qty button { width: 42px; height: 44px; border: 0; background: none; font-size: 19px; }
.qty output { width: 40px; display: grid; place-items: center; font-weight: 500; }
.buy-row { display: flex; gap: 12px; margin: 18px 0 10px; }
.buy-row .btn { flex: 1; }
.trust { display: grid; gap: 8px; margin: 16px 0; padding: 14px; background: var(--card); border-radius: var(--radius); font-size: 13.5px; }
.trust div { display: flex; gap: 12px; align-items: center; }
.trust svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.5; flex: none; }

.pyramid { display: grid; gap: 12px; margin: 12px 0 18px; }
.pyramid[hidden], .meter[hidden], #notesHead[hidden] { display: none; }   /* products with no perfume notes */
.pyramid div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
.pyramid span { font-size: 12px; color: var(--muted); }
.pyramid b { font-weight: 400; }
.meter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.meter div { background: var(--card); padding: 10px 12px; border-radius: var(--radius); font-weight: 500; font-size: 15px; }
.meter small { color: var(--muted); display: block; }
/* a product's "Details" rows (data.js specs: [label, value]); the box is hidden when a product has none */
details.acc[hidden] { display: none; }
.specs { display: grid; gap: 8px; }
.specs div { display: grid; grid-template-columns: minmax(84px, 36%) 1fr; gap: 12px; align-items: baseline; }
.specs span { font-size: 13px; }
.specs b { font-weight: 400; color: var(--ink); overflow-wrap: anywhere; }

details.acc { border-top: 1px solid var(--mist); }
details.acc:last-of-type { border-bottom: 1px solid var(--mist); }
details.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 50px; font-weight: 500; cursor: pointer; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; font-size: 22px; font-weight: 300; }
details.acc[open] summary::after { content: "\2212"; }
details.acc .acc-body { padding: 0 0 16px; color: var(--muted); font-size: 15px; }

.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + var(--safe-b)); z-index: 35;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--mist); padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 12px; transform: translateY(120%); transition: transform .25s;
}
.sticky-buy.show { transform: none; }
.sticky-buy .btn { flex: 1; }

/* ---------- cart ---------- */
.line { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--mist); }
.line .thumb { aspect-ratio: 4/5; background: var(--card); border-radius: var(--radius); overflow: hidden; }
.line .thumb svg { width: 100%; height: 100%; }
.line-info { display: grid; gap: 6px; align-content: start; }
.line-name { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.1; }
.line-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.remove { background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; min-height: 32px; padding: 0; }
.summary { display: grid; gap: 10px; padding: 18px 0; }
.summary div { display: flex; justify-content: space-between; }
.summary .total { font-size: 20px; font-weight: 600; border-top: 1px solid var(--mist); padding-top: 12px; margin-top: 4px; }
.ship-bar { height: 4px; background: var(--mist); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.ship-bar i { display: block; height: 100%; background: var(--oud); }
.cart-cta { position: sticky; bottom: calc(var(--bottomnav-h) + var(--safe-b)); background: var(--porcelain); padding: 12px 0 8px; }
/* an empty bag (2026-11-03): only the message and Start shopping */
.summary-wrap[hidden] { display: none; }
.cart-layout.is-empty { display: block; }
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; }

/* bundle picker */
.pick-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mist); }
.pick-row .thumb { width: 52px; height: 66px; flex: none; border-radius: 8px; overflow: hidden; background: var(--card); }
.pick-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pick-row .grow { flex: 1; }
.pick-row b { font-family: var(--display); font-size: 19px; font-weight: 600; }
.pick-row .qty button:disabled { opacity: .3; }
.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pick-foot .btn { flex: 1; }
.picks { display: block; margin-top: 2px; }

/* mini cart drawer */
.mini-lines { display: grid; align-content: start; }

/* ---------- checkout ---------- */
.checkout-summary { background: var(--card); border: 0; border-radius: var(--radius); margin: 14px 0 24px; }
.checkout-summary summary { list-style: none; display: flex; justify-content: space-between; padding: 14px; min-height: 52px; align-items: center; cursor: pointer; }
.checkout-summary summary::-webkit-details-marker { display: none; }
.checkout-summary .inner { padding: 0 14px 14px; border-top: 1px solid var(--mist); }
.steps { display: grid; gap: 26px; }
.step h2 { font-size: 21px; margin-bottom: 12px; }
.wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.wallets .btn { font-weight: 600; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--mist); }
.card-fields { display: none; padding: 4px 0 0; }
.card-fields.show { display: block; }
.secure { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 10px; }
.secure svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* confirmation */
.confirm { text-align: center; padding: 40px 0 20px; }
.confirm .check-ring { width: 76px; height: 76px; border-radius: 50%; background: rgba(47,122,87,.1); display: grid; place-items: center; margin: 0 auto 20px; }
.confirm .check-ring svg { width: 32px; height: 32px; stroke: var(--ok); fill: none; stroke-width: 2; }
.confirm h1 { font-size: 40px; font-style: italic; font-weight: 500; }
.order-box { background: var(--card); border: 0; border-radius: var(--radius); padding: 18px; margin: 22px 0; text-align: start; display: grid; gap: 12px; }
.order-box div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.order-box div span:first-child { color: var(--muted); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--bottomnav-h) + var(--safe-b) + 16px); transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow);
  opacity: 0; transition: opacity .2s, transform .2s; z-index: 80; pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* breadcrumbs */
.crumbs { font-size: 13px; color: var(--muted); padding: 14px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { min-height: 24px; }

/* ---------- Arabic ---------- */
html[lang="ar"] { --ui: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif; --display: "Amiri", "Traditional Arabic", serif; }
html[lang="ar"] body { letter-spacing: 0; }
html[lang="ar"] .hero h1 { font-size: clamp(44px, 12vw, 76px); line-height: 1.15; }
html[lang="ar"] .hero h1 .line2 { font-style: normal; }
html[lang="ar"] .card-name, html[lang="ar"] .line-name, html[lang="ar"] .pdp-title h1 { font-family: "Cormorant Garamond", "Garamond", serif; }
html[lang="ar"] .hero-tag b, html[lang="ar"] #heroName { font-family: "Cormorant Garamond", "Garamond", serif; }
html[lang="ar"] .btn, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea { letter-spacing: 0; }
html[lang="ar"] .price, html[lang="ar"] .pdp-price, html[lang="ar"] .summary, html[lang="ar"] .order-box div span:last-child { direction: rtl; unicode-bidi: plaintext; }
html[lang="ar"] .field input[inputmode="tel"], html[lang="ar"] .field input[type="email"], html[lang="ar"] #cardNo, html[lang="ar"] #cardExp, html[lang="ar"] #cardCvc { direction: ltr; text-align: right; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- tablet / desktop ---------- */
@media (min-width: 720px) {
  :root { --gutter: 28px; --header-h: 72px; }
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }
  .desktop-nav { display: flex; gap: 28px; margin: 0 auto; font-size: 15px; letter-spacing: .01em; }
  .desktop-nav a { min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; color: rgba(255,255,255,.85); transition: color .15s, border-color .15s; }
  .desktop-nav a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
  .desktop-nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
  .logo { margin-right: 0; }
  .logo img { height: 44px; }
  .desktop-only { display: inline-flex; }
  .header-inner { gap: 10px; }
  .btn { transition: background .15s, color .15s, transform .1s, box-shadow .15s; }
  .btn:hover { box-shadow: 0 6px 18px rgba(17,17,17,.14); }
  .btn-ghost:hover { border-color: var(--ink); background: #fff; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  h1 { font-size: 48px; }
  h2 { font-size: 34px; }

  /* home */
  .hero { padding-top: 56px; padding-bottom: 32px; }
  .hero-inner { display: grid; grid-template-columns: 1fr minmax(360px, 520px); grid-template-rows: 1fr 1fr; align-items: center; gap: 0 56px; }
  .hero h1 { align-self: end; margin-bottom: 18px; }
  .hero-copy { align-self: start; }
  .hero h1 { font-size: clamp(64px, 7.2vw, 108px); line-height: .92; }
  .hero h1 .line2 { padding-inline-start: 3.5rem; }
  .hero-art { margin: 0; width: 100%; max-width: none; aspect-ratio: 4 / 5; justify-self: end; grid-row: 1 / span 2; grid-column: 2; border-radius: 22px; box-shadow: 0 24px 60px rgba(17,17,17,.14); }
  .hero-copy { margin-top: 12px; max-width: 46ch; }
  .hero-copy p { font-size: 18px; }
  .hero-tag { font-size: 15px; margin-top: 4px; }
  .hero-tag b { font-size: 26px; }
  .hero-cta { gap: 14px; margin-top: 26px; }
  .hero-cta .btn { min-height: 52px; padding: 0 28px; font-size: 16px; }
  .value-row { padding: 36px 0 40px; gap: 24px; margin-top: 16px; }
  .value-row div { font-size: 14px; gap: 10px; color: var(--ink); }
  .value-row svg { width: 30px; height: 30px; }

  /* shop */
  .grid { grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
  .card-name { font-size: 21px; }
  .card-body { padding: 12px 14px 14px; }
  .shop-bar { margin: 8px 0 28px; }
  .shop-bar select { min-height: 44px; font-size: 15px; }
  .shop-head { gap: 24px; margin: 18px 0 16px; }
  .shop-title h1 { font-size: 44px; }
  .shop-chips { margin-bottom: 26px; }
  .shop-head .shop-bar { margin: 0; }
  .shop-head h1 { margin: 0 !important; }

  /* product */
  .pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 48px; align-items: start; margin-top: 8px; }
  .gallery { margin: 0; border-radius: 22px; overflow: hidden; position: sticky; top: calc(var(--header-h) + 20px); }
  .pdp-info { position: static; padding-top: 4px; }
  .pdp-title { padding-top: 0; }
  .pdp-title h1 { font-size: 44px; }
  .pdp-price { font-size: 26px; }
  .buy-row .btn { min-height: 52px; font-size: 16px; }
  .sticky-buy { display: none; }
  .slider .card { flex-basis: 30%; }

  /* bag, checkout, help */
  .cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
  .cart-layout .summary-wrap { position: sticky; top: calc(var(--header-h) + 20px); background: var(--card); border: 0; border-radius: var(--radius); padding: 10px 20px 20px; }
  .cart-cta { position: static; background: transparent; padding: 0; }
  .checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
  .checkout-summary { position: sticky; top: calc(var(--header-h) + 20px); order: 2; }
  .checkout-summary summary { pointer-events: none; }
  .checkout-summary .inner { display: block; }
  .toast { bottom: 32px; }
  .sheet-bottom { left: 50%; right: auto; width: min(560px, 92vw); transform: translate(-50%, 100%); border-radius: 22px 22px 0 0; }
  .map-sheet { top: auto; height: min(92vh, 820px); width: min(720px, 92vw); border-radius: 22px 22px 0 0; }
  .sheet-bottom.open { transform: translate(-50%, 0); }
  .site-footer { padding: 44px 0 30px; }
  .footer-logo img { height: 60px; }
  body:not(.staff-body) > main { padding-bottom: 56px; }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .slider .card { flex-basis: 22.5%; }
  .container { max-width: 1180px; }
}

/* ---------- checkout: pin on the map ---------- */
.pin-box { border: 1px dashed rgba(17,17,17,.35); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; }
/* checkout: delivery day and time window */
.when-asap { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line, #E3E6EB); border-radius: var(--radius); }
.when-pick { display: grid; gap: 8px; }
.when-asap[hidden], .when-pick[hidden], .when-none[hidden] { display: none; }
.when-label { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #555; margin-top: 4px; }
.when-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.when-days { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.when-days::-webkit-scrollbar { display: none; }
.when-chip { display: inline-grid; gap: 2px; justify-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid rgba(17,17,17,.25); border-radius: 10px; background: #fff; color: #111; font: inherit; font-size: 14.5px; cursor: pointer; white-space: nowrap; flex: none; }
.when-chip span { font-size: 12.5px; color: #6B7078; }
.when-chip[aria-checked="true"] { background: #111; border-color: #111; color: #fff; }
.when-chip[aria-checked="true"] span { color: rgba(255,255,255,.75); }
.when-pick.invalid .when-chips .when-chip { border-color: #C0392B; }
.when-pick .error { display: none; }
.when-pick.invalid .error { display: block; }
.pay-chip { justify-items: start; text-align: start; flex: 1 1 160px; }
#note { width: 100%; min-height: 84px; resize: vertical; font: inherit; }
.pin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pin-row.invalid { outline: 2px solid #C0392B; outline-offset: 6px; border-radius: 8px; }   /* Riders needs a pin for this address */
.pin-row .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.pin-ok { display: inline-flex; align-items: center; gap: 6px; color: #0a5a0a; }
.pin-ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#pinView { text-decoration: underline; }
.pin-actions { display: flex; gap: 8px; }
.map-sheet { top: 0; max-height: none; height: 100dvh; border-radius: 0; }
.map-sheet .sheet-body { padding: 0; position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.map-body { position: relative; flex: 1; min-height: 0; }
#pinMap { position: absolute; inset: 0; background: #E4E6EA; }
.locate-btn { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 500; min-height: 38px; padding: 0 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(17,17,17,.25); }
.locate-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.leaflet-container { font-family: var(--ui); }
.pin-link { display: inline-flex; align-items: center; gap: 6px; color: var(--viz-1-deep); text-decoration: underline; margin-top: 6px; }
.pin-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- staff panel ---------- */
/* Staff follows the shop's own colours (2026-11-03), never a fixed blue: charts and highlights in the header colour (--ink),
   light tints of it for the page, the inner boxes (--staff-bg) and the lines. A black shop gets black charts, a navy shop navy.
   A browser without color-mix keeps plain greys. */
.staff-body { padding-bottom: 40px; background: var(--staff-bg); --viz-1: var(--ink); --viz-1-deep: var(--ink); --viz-1-soft: #ECEDEF; --staff-bg: #F4F5F7; --ok: #008300; --ok-soft: #DDF2DD; --line: #E3E6EB; }
@supports (color: color-mix(in srgb, red, blue)) {
  .staff-body { --viz-1-deep: color-mix(in srgb, var(--ink) 85%, #000); --viz-1-soft: color-mix(in srgb, var(--ink) 10%, #fff);
    --staff-bg: color-mix(in srgb, var(--ink) 4%, #fff); --line: color-mix(in srgb, var(--ink) 12%, #fff); }
}
.staff-top .pill { background: var(--gilt); color: #111; }   /* the New count on the dark bar, like the shop's bag count */
.staff-body [hidden] { display: none !important; }
.staff-top { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.staff-top-inner { display: flex; align-items: center; gap: 12px; min-height: 60px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 0; }
.staff-top-inner > a img { height: 30px; width: auto; display: block; }
.staff-tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; border: 1px dashed var(--ink); border-radius: 999px; padding: 4px 10px; }
.signout-wrap { margin-inline-start: auto; position: relative; }
.signout-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 30; min-width: 170px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 24, 31, .12); padding: 6px; }
.signout-menu button { display: block; width: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 8px; color: var(--ink); }
.signout-menu button:hover, .signout-menu button:focus-visible { background: var(--staff-bg); }
.signout-menu #signOutAll { color: #B42318; }
.staff-tabs { display: flex; gap: 4px; order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
.staff-tabs::-webkit-scrollbar { display: none; }
.staff-tabs button { flex: 1 0 auto; padding: 0 10px; white-space: nowrap; min-height: 42px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; }
.staff-tabs button.on { color: var(--viz-1-deep); border-bottom-color: var(--viz-1); }
.pill { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--viz-1); color: #fff; font-size: 11px; line-height: 18px; margin-inline-start: 6px; text-align: center; }
.pill:empty { display: none; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.staff h1 { font-size: 30px; }
.staff-login { max-width: 400px; margin: 40px auto 0; }
.staff-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; margin: 14px 0 4px; }
.staff-bar .actions { flex-wrap: nowrap; margin-inline-start: auto; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--viz-1); border-radius: var(--radius); padding: 14px; display: grid; gap: 2px; box-shadow: 0 1px 2px rgba(17,17,17,.04); }
.kpi span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.kpi b { font-size: 24px; font-weight: 600; color: var(--viz-1-deep); }
.kpi small { color: var(--muted); font-size: 13px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 12px; background: #fff; box-shadow: 0 1px 2px rgba(17,17,17,.04); }
.panel h2 { font-family: var(--ui); font-size: 15px; font-weight: 600; margin: 0 0 10px; letter-spacing: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.panel-head h2 { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: #fff; }
.seg button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); padding: 6px 12px; border-radius: 999px; min-height: 30px; }
.seg button[aria-pressed="true"] { background: var(--viz-1); color: #fff; }
.grid-2 { display: grid; gap: 12px; }
.rows { display: grid; }
.rows > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rows > div:first-child { border-top: 0; }
.rows .rk { flex: 0 0 38%; }
.bar { position: relative; height: 6px; background: var(--line); border-radius: 3px; flex: 1; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--viz-1); border-radius: 3px; }
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut { width: 190px; height: 190px; flex: none; }
@media (max-width: 719px) { .donut { width: 150px; height: 150px; } .donut-wrap { gap: 16px; } }
.donut path { stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.donut-total { font-family: var(--ui); font-size: 22px; font-weight: 600; fill: var(--ink); }
.donut-legend b { color: var(--ink); }
.donut-legend { display: grid; gap: 8px; flex: 1; min-width: 0; }
.donut-legend > div { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.donut-legend .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid transparent; flex: none; }
.donut-legend .lk { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend b { min-width: 24px; text-align: end; }
.donut-legend .small { min-width: 34px; text-align: end; }
.chart { width: 100%; height: auto; display: block; }
.chart rect { fill: var(--viz-1); }
.chart .base { stroke: var(--line); stroke-width: 1; }
.chart text { font-size: 11px; fill: var(--muted); font-family: var(--ui); }
.chart text.val { fill: var(--viz-1-deep); font-weight: 600; }
.staff-filters { margin-top: 12px; }
.staff-filters .input { width: 100%; margin-bottom: 10px; }
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-row .chips { flex: 1; margin: 0; padding: 2px 0; }
.filter-row .chip { flex: none; }
@media (max-width: 719px) {                 /* phones: chips get their own row, Export sits under them */
  .filter-row .chips { flex: 1 1 100%; }
  .filter-row .export-group { margin-inline-start: auto; }
}
.export-group { display: inline-flex; align-items: center; gap: 4px; padding: 4px; padding-inline-start: 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; }
.export-group > span { margin-inline-end: 6px; }
.export-group button { border: 0; background: transparent; padding: 6px; border-radius: 999px; cursor: pointer; display: inline-flex; line-height: 0; }
.export-group button:hover { background: #F0F2F5; }
.export-group button:disabled { opacity: .45; cursor: default; }
.export-group .xls { width: 22px; height: 22px; display: block; }
/* printable customer report (rendered off-screen, then turned into a PDF) */
.pdf-host { position: absolute; left: -10000px; top: 0; width: 1062px; overflow: hidden; }
.pdf-report { width: 1062px; box-sizing: border-box; overflow: hidden; background: #fff; color: #111; font-family: "Jost", "Segoe UI", Arial, sans-serif; font-size: 11px; padding: 0 6px 0 0; }
.pdf-report table { table-layout: fixed; }
.pdf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 12px; }
.pdf-head h1 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; margin: 0 0 4px; font-weight: 600; }
.pdf-head p { margin: 0; color: #6B7078; font-size: 11px; }
.pdf-head img { height: 34px; width: 58px; flex: none; }
.pdf-report table { width: 100%; border-collapse: collapse; }
.pdf-report th { background: #111; color: #fff; text-align: left; padding: 7px 8px; font-weight: 600; font-size: 11px; white-space: nowrap; }
.pdf-report td { padding: 6px 8px; border-bottom: 1px solid #E3E6EB; vertical-align: top; }
.pdf-report tbody tr:nth-child(even) td { background: #F4F6F9; }
.pdf-report td.c, .pdf-report th.c { text-align: center; white-space: nowrap; }
.pdf-report td.r, .pdf-report th.r { text-align: right; }
.pdf-report .mut { color: #6B7078; font-size: 10px; }
.pdf-report tfoot td { border-top: 2px solid #111; border-bottom: 0; background: #E9EDF3; font-weight: 600; }
.pdf-foot { margin-top: 10px; font-size: 10px; color: #6B7078; text-align: right; }
.staff-filters .chip { min-height: 38px; padding: 0 14px; font-size: 13px; }
.staff-filters .chip .muted { font-size: 12px; }
.staff-filters .chip[aria-pressed="true"] { background: var(--viz-1); border-color: var(--viz-1); color: #fff; }
.staff-filters .chip[aria-pressed="true"] .muted { color: rgba(255,255,255,.75); }
.o-left .rows > div:first-child { border-top: 0; padding-top: 0; }
.o-total { border-top: 2px solid var(--ink) !important; margin-top: 4px; font-size: 15px; }
.o-right { display: grid; gap: 12px; align-content: start; }
.o-addr, .o-note { background: var(--staff-bg); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; font-size: 14px; }
.o-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.o-note { border-inline-start: 3px solid #eda100; }
.o-actions .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-inline-end: 6px; }
.odetail { display: grid; gap: 8px; font-size: 14px; }
.status { display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--mist); vertical-align: middle; }
.st-new { background: var(--viz-1-soft); color: var(--viz-1-deep); }
.st-confirmed { background: #DCE8F5; }
.st-shipped { background: #F3E7C9; }
.st-delivered { background: var(--ok-soft); color: #0a5a0a; }
.st-cancelled { background: #FBE3E3; color: #8a1f1f; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
.actions .btn[data-status="delivered"] { background: var(--ok); border-color: var(--ok); color: #fff; }
#openMap { background: var(--viz-1); border-color: var(--viz-1); }
#openMap:hover { background: var(--viz-1-deep); border-color: var(--viz-1-deep); }
.cc-list-title { font-family: var(--ui); font-size: 15px; font-weight: 600; margin: 22px 0 4px; }
/* products */
.pcard { display: grid; grid-template-columns: 64px 1fr; gap: 10px 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-top: 10px; box-shadow: 0 1px 2px rgba(17,17,17,.04); }
.pcard.is-hidden { opacity: .6; }
.pc-thumb { width: 64px; height: 84px; border-radius: 8px; overflow: hidden; background: var(--card); display: flex; align-items: center; justify-content: center; }
.pc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-nopic { font-size: 11px; color: var(--muted); text-align: center; padding: 6px; }
.pc-main { display: grid; gap: 4px; min-width: 0; }
.pc-main > b { font-family: var(--display); font-size: 20px; line-height: 1.1; }
.pc-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-price { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; font-size: 16px; }
.pc-off { color: #8a1f1f; font-weight: 500; }
.pc-actions { grid-column: 1 / -1; }
.pc-actions .btn[aria-label] { min-width: 40px; padding: 0; justify-content: center; }
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(17,17,17,.45); overflow-y: auto; padding: 12px; }
.modal-inner { background: #fff; border-radius: 16px; max-width: 760px; margin: 0 auto; padding: 16px; }
.pf-grid { display: grid; gap: 16px; margin-top: 12px; }
.pf-photo { display: grid; gap: 8px; justify-items: start; align-content: start; }
.pf-preview { width: 140px; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.pf-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-upload { cursor: pointer; }
.pf-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; min-height: 48px; align-items: center; }
.pf-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.pf-checks input { width: 18px; height: 18px; accent-color: var(--viz-1); margin: 0; }
.pf-final { display: flex; align-items: center; min-height: 48px; font-weight: 600; }
.pf-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.pf-foot #pfSave { background: var(--viz-1); border-color: var(--viz-1); }
.pf-foot #pfDelete { margin-inline-start: auto; }
#pfAccent { padding: 4px; height: 48px; }
.ccard { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 14px 20px; margin-top: 10px; box-shadow: 0 1px 2px rgba(17,17,17,.04); }
.ccard::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--ok); border-radius: var(--radius) 0 0 var(--radius); }
.ccard.is-inactive::before { background: #B5B9C0; }
.ccard.is-inactive .code { color: var(--muted); }
.cc-main { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.ccard .code { font-family: var(--ui); font-size: 17px; letter-spacing: .08em; }
.cc-col { display: grid; gap: 2px; font-size: 14px; }
.cc-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cc-col .bar { display: block; height: 6px; margin-top: 4px; max-width: 140px; }
.cc-actions { grid-column: 1 / -1; }
.cc-save { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#cSave { background: var(--viz-1); border-color: var(--viz-1); }
#cSave:hover { background: var(--viz-1-deep); border-color: var(--viz-1-deep); }
.btn-danger { color: #8a1f1f; }
.btn-danger:hover { border-color: #8a1f1f; }
.st-off { background: #ECEEF1; color: var(--muted); }
.map-modal { position: fixed; inset: 0; z-index: 60; background: rgba(17,17,17,.45); padding: 0; display: flex; flex-direction: column; }
.map-inner { background: #fff; flex: 1; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.map-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.map-head h2 { font-size: 22px; margin: 0; }
.map-head .actions { margin-inline-start: auto; }
.map-head .chip { min-height: 36px; padding: 0 12px; font-size: 13px; }
.kw-map { width: 100%; flex: 1; min-height: 0; display: block; margin: 10px 0 0; background: #F7F8FA; border-radius: 12px; touch-action: none; cursor: grab; user-select: none; }
.kw-map:active { cursor: grabbing; }
.zoom-btn { min-width: 40px; justify-content: center; font-size: 18px; padding: 0; }
.kw-gov { fill: #E4E6EA; stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.kw-govnames text { fill: #6B7078; font-family: var(--ui); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.kw-dot circle { fill: var(--viz-1); stroke: #fff; }
.kw-dot text { fill: #fff; font-family: var(--ui); font-weight: 600; text-anchor: middle; pointer-events: none; }
.kw-dot .kw-name { fill: var(--viz-1-deep); font-weight: 500; text-anchor: start; paint-order: stroke; stroke: #fff; stroke-linejoin: round; }
.map-gov h2 { display: flex; justify-content: space-between; gap: 10px; }
.map-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.map-area { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; background: var(--viz-1-soft); color: var(--viz-1-deep); font-size: 13px; }
.map-area b { font-weight: 500; }
.map-area.unknown { border: 1px dashed var(--muted); background: #fff; }
.row-2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.row-2 .field > .small { display: block; margin: -6px 0 12px; }
.wa-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 14px; margin-bottom: 12px; }
.wa-dot { width: 10px; height: 10px; border-radius: 50%; background: #c0392b; box-shadow: 0 0 0 4px rgba(192,57,43,.15); flex: none; }
.wa-status.is-on .wa-dot { background: #128C7E; box-shadow: 0 0 0 4px rgba(18,140,126,.15); }
.wa-status.is-wait .wa-dot { background: #eda100; box-shadow: 0 0 0 4px rgba(237,161,0,.18); }
.wa-tpls { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.wa-tpl { display: inline-flex; align-items: center; gap: 6px; }
.wa-tpl i { width: 8px; height: 8px; border-radius: 50%; background: #c0392b; }
.wa-tpl.ok i { background: #128C7E; } .wa-tpl.wait i { background: #eda100; }
.wa-tpls .small { flex-basis: 100%; }
.wa-status-text { flex: 1; min-width: 200px; }
.wa-status-actions { display: flex; gap: 6px; margin-inline-start: auto; }
.wa-connect { width: 100%; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; display: grid; gap: 4px; }
.wa-connect-grid { display: grid; gap: 0 12px; }
.wa-connect .field input { font-family: var(--ui); }
.wa-connect-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wa-connect-actions .small { flex: 1; min-width: 200px; }
@media (min-width: 720px) { .wa-connect-grid { grid-template-columns: 1.6fr 1fr; } }
.wa-setup { width: 100%; }
.wa-setup summary { cursor: pointer; font-weight: 500; color: var(--viz-1-deep); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.wa-setup summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.wa-setup[open] summary::before { transform: rotate(45deg); }
.wa-setup ol { margin: 10px 0 2px; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.wa-setup code { background: #F0F2F5; color: var(--ink); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.wa-layout { display: grid; gap: 12px; }
.wa-compose { display: grid; gap: 14px; }
.wa-drop { position: relative; display: grid; place-items: center; gap: 4px; text-align: center; padding: 26px 16px; border: 1.5px dashed #C9D1DB; border-radius: 12px; background: #FAFBFC; cursor: pointer; transition: border-color .15s, background .15s; }
.wa-drop:hover { border-color: var(--viz-1); background: var(--viz-1-soft); }
.wa-drop svg { width: 34px; height: 34px; fill: none; stroke: var(--viz-1); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.wa-drop input { position: absolute; opacity: 0; width: 0; height: 0; }
.wa-drop.has-img { padding: 10px; border-style: solid; background: #fff; grid-template-columns: auto 1fr; justify-items: start; gap: 14px; }
.wa-drop.has-img img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; }
.wa-drop-actions { display: flex; gap: 8px; }
.wa-msgfield textarea { width: 100%; font: inherit; font-size: 15px; line-height: 1.5; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; min-height: 160px; }
.wa-msgfield textarea:focus { outline: 2px solid var(--viz-1); outline-offset: 1px; border-color: transparent; }
.wa-msgmeta { display: flex; justify-content: space-between; margin-top: 6px; }
.wa-aside { display: grid; gap: 12px; align-content: start; }
.wa-phone { background: #E5DDD5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23d7cfc6'/%3E%3C/svg%3E"); border-radius: 14px; padding: 18px 16px; }
.wa-bubble { background: #fff; border-radius: 10px; border-top-left-radius: 2px; padding: 8px 10px 6px; max-width: 320px; box-shadow: 0 1px 1px rgba(0,0,0,.1); position: relative; font-size: 14px; line-height: 1.45; }
.wa-bubble::before { content: ""; position: absolute; top: 0; left: -7px; border: 7px solid transparent; border-top-color: #fff; border-right-color: #fff; }
.wa-bubble img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 7px; margin-bottom: 6px; }
.wa-bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.wa-bubble time { display: block; text-align: end; font-size: 11px; color: #8a8f95; margin-top: 2px; }
.wa-sendpanel { display: grid; gap: 12px; }
.wa-count { display: flex; align-items: center; gap: 12px; padding: 4px 0 2px; }
.wa-count b { font-size: 30px; line-height: 1; color: var(--viz-1-deep); }
.wa-count > span { font-size: 14px; line-height: 1.3; }
.wa-test { display: flex; gap: 8px; }
.wa-test input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.wa-test input:focus { outline: 2px solid var(--viz-1); outline-offset: 1px; border-color: transparent; }
.wa-send { background: #128C7E; border-color: #128C7E; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.wa-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-send:hover:not(:disabled) { background: #0f766a; border-color: #0f766a; }
.wa-progress { display: grid; gap: 6px; }
/* Arabic staff panel: the map and charts are drawn left to right (labels sit beside the bubbles) */
.staff-body svg { direction: ltr; }
/* Arabic staff panel: typed text (often English) keeps its own direction */
.staff-body input:not([type=checkbox]):not([type=radio]), .staff-body textarea, .staff-body select { unicode-bidi: plaintext; text-align: start; }
.vh-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pf-upload { position: relative; }
.pf-upload:focus-within { outline: 2px solid var(--viz-1); outline-offset: 2px; }
.wa-resume { display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; background: #FFF6E0; border-inline-start: 3px solid #eda100; font-size: 14px; }
.wa-resume .actions { margin-top: 6px; }
.wa-progress .bar { height: 8px; background: #E6EAF0; border-radius: 4px; overflow: hidden; display: block; }
.wa-progress .bar i { display: block; height: 100%; background: #128C7E; width: 0; transition: width .3s; }
.wa-row { display: grid; grid-template-columns: 1fr; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; align-items: center; }
.wa-row:first-of-type { border-top: 0; padding-top: 4px; }
.wa-row-when { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.wa-row-msg { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--muted); }
.wa-row-msg img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: none; }
.wa-row-n { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.wa-pill { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.wa-pill.ok { background: var(--ok-soft, #E3F5E6); color: var(--ok, #008300); }
.wa-pill.bad { background: #FDE8E6; color: #c0392b; }
@media (min-width: 720px) {
  .wa-layout { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .wa-row { grid-template-columns: 150px 1fr auto; }
}
.dl-preview { background: var(--staff-bg); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; font-size: 14px; margin-bottom: 14px; }
.dl-preview > div { display: flex; justify-content: space-between; gap: 10px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.row-3 .field:first-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .map-modal { padding: 16px; }
  .map-inner { width: 100%; max-width: 900px; margin: 0 auto; border-radius: 16px; padding: 16px 20px 20px; }
  .staff-top-inner { flex-wrap: nowrap; padding-top: 0; }
  .staff-tabs { width: auto; order: 0; margin-inline-start: 12px; }
  .staff-tabs button { flex: none; padding: 0 16px; min-height: 60px; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .chart { height: 200px; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .row-3 { grid-template-columns: 1fr 1fr 1fr; }
  .row-2 { grid-template-columns: 1fr 1fr; }
  .row-3 .field:first-child { grid-column: auto; }
  .odetail { grid-template-columns: 1fr 1fr; }
  .ccard { grid-template-columns: 1.3fr 1.1fr 1fr 1fr auto; gap: 16px; }
  .pcard { grid-template-columns: 64px 1.6fr 1fr auto; gap: 16px; }
  .pc-price, .pc-actions { grid-column: auto; }
  .pf-grid { grid-template-columns: 160px 1fr; }
  .cc-main, .cc-actions { grid-column: auto; }
  .cc-main { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* staff charts: phone and computer versions */
.hbars { display: grid; gap: 10px; margin-top: 6px; }
.hbars > div { display: grid; grid-template-columns: minmax(0, 36%) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.hbars .hk { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .bar { height: 10px; border-radius: 5px; }
.hbars .bar i { border-radius: 5px; }
.hbars b { min-width: 2.5em; text-align: end; font-variant-numeric: tabular-nums; color: var(--viz-1-deep); }
.chart.only-narrow text { font-size: 12px; }
@media (max-width: 719px) { .only-wide { display: none !important; } }
@media (min-width: 720px) { .only-narrow { display: none !important; } }

/* staff: orders (phone first) */
.ord-head { display: grid; gap: 10px; margin-top: 12px; }
.ord-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: #E8EBF0; border-radius: 12px; }
.ord-tabs button { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); min-height: 40px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background .15s, color .15s; }
.ord-tabs button b { font-size: 12px; font-weight: 600; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(17,17,17,.07); font-variant-numeric: tabular-nums; }
.ord-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(17,17,17,.12); }
.ord-tabs button[data-filter="new"] b { background: var(--viz-1); color: #fff; }
.ord-tabs button[data-filter="new"] b:is(:empty) { display: none; }
.ord-tools { display: flex; gap: 8px; align-items: center; }
.ord-search { flex: 1; position: relative; display: block; }
.ord-search > svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.ord-search input { width: 100%; min-height: 44px; padding: 0 40px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); }
.ord-search input::-webkit-search-cancel-button { display: none; }
.ord-search input:focus { outline: none; border-color: var(--viz-1); box-shadow: 0 0 0 3px var(--viz-1-soft); }
.ord-search button { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: #EEF0F3; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.ord-tool { width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ord-tool:disabled { opacity: .45; cursor: default; }
.ord-tool img { width: 22px; height: 22px; display: block; }
.ord-hint { margin: 14px 2px 0; font-size: 13px; color: var(--muted); }
#oList { margin-top: 12px; }
.ord { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(17,17,17,.04); }
.ord.is-new { border-inline-start: 3px solid var(--viz-1); }
.ord.is-delivered { border-inline-start: 3px solid var(--ok); }
.ord.is-cancelled { border-inline-start: 3px solid #C0392B; }
.ord.is-late { border-inline-start: 3px solid #C0392B; }
/* when to deliver: the line under an open order, and its editor */
.ord-when { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--viz-1-soft); color: var(--viz-1-deep); font-size: 12.5px; font-weight: 600; width: fit-content; font-variant-numeric: tabular-nums; }
.ord-when.asap { background: #FDF0D5; color: #8a5300; }
.ord-when.late { background: #FBE3DF; color: #8a1f1f; }
.o-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line, #E3E6EB); }
.o-when .late { color: #8a1f1f; font-weight: 600; }
.o-when .o-label { width: 100%; }
.o-when-form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.o-when-form select { flex: 1 1 140px; min-height: 38px; }
.dlv-times .dlv-sub { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: #555; }
.ord-main { display: grid; gap: 4px; width: 100%; text-align: start; background: none; border: 0; padding: 14px 16px 12px; font: inherit; color: inherit; cursor: pointer; }
.ord-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ord-name { font-size: 16px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-total { font-size: 16px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ord.is-cancelled .ord-total { text-decoration: line-through; color: var(--muted); }
.ord-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--muted); }
.ord-meta > span:not(.status):not(.ord-pin) + span:not(.status):not(.ord-pin)::before { content: "·"; margin-inline-end: 8px; }
.ord-pin { display: inline-flex; }
.ord-pin svg { width: 14px; height: 14px; fill: none; stroke: #d6336c; stroke-width: 2; }
.ord-chev { width: 18px; height: 18px; margin-inline-start: auto; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ord.open .ord-chev { transform: rotate(180deg); }
.ord-items { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-bar { display: flex; gap: 8px; padding: 0 16px 14px; }
.ord-ico { width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: #fff; }
.ord-ico svg, .ord-done svg, .ord-actions .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ord-done { flex: 1; min-height: 44px; justify-content: center; gap: 8px; background: var(--ok); border-color: var(--ok); color: #fff; border-radius: 12px; font-weight: 600; }
.ord-done svg { stroke-width: 2.6; }
.ord-body { border-top: 1px solid var(--line); padding: 14px 16px 16px; display: grid; gap: 12px; background: #FAFBFC; }
.ord-lines { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; }
.ord-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ord-actions .btn { gap: 6px; }
.ord-actions .btn-danger { margin-inline-start: auto; }
.ord-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 48px 16px; color: var(--muted); }
.ord-empty svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--ok-soft); fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ord-empty b { color: var(--ink); font-size: 16px; font-weight: 600; }
.ord-more { width: 100%; margin: 4px 0 16px; }
.undo-bar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 90;
  display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; white-space: nowrap; box-shadow: var(--shadow); transition: opacity .2s, transform .2s; }
.undo-bar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.undo-bar button { border: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-weight: 600; padding: 8px 16px; cursor: pointer; }
@media (min-width: 720px) {
  .ord-head { grid-template-columns: minmax(320px, 420px) 1fr; align-items: center; }
  .ord { display: grid; grid-template-columns: 1fr auto; }
  .ord-main { padding: 16px 20px; }
  .ord-bar { align-self: center; padding: 0 20px 0 0; }
  .ord-done { flex: 0 0 auto; padding: 0 22px; }
  .ord-body { grid-column: 1 / -1; grid-template-columns: 1.15fr 1fr; align-items: start; padding: 16px 20px 20px; }
  .ord-body .ord-actions { grid-column: 1 / -1; }
}

/* Header, bottom bar and footer buttons keep the English order in Arabic too; only the words change.
   (The page itself still reads right to left.) */
html[dir="rtl"] .header-inner, html[dir="rtl"] .bottom-nav, html[dir="rtl"] .site-footer .social, html[dir="rtl"] .staff-top-inner { direction: ltr; }
/* same height in both languages, so Arabic words cannot push the bar up or down */
.header-inner, .bottom-nav a { line-height: 1.2; }

.ord-share { cursor: pointer; }
.ord-share svg { stroke-width: 1.8; }

/* driver page (opened from a WhatsApp link) */
.drv-body { background: #F2F4F7; min-height: 100vh; color: #111; }
.drv-body.drv-has-bar { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
/* same dark bar and white logo as the shop header */
.drv-top { position: sticky; top: 0; z-index: 5; background: var(--ink); color: #fff; height: var(--header-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.drv-top img { height: 36px; width: auto; }
.drv-top-end { display: flex; align-items: center; gap: 12px; }
html[dir="rtl"] .drv-top { direction: ltr; }             /* logo left, button right in both languages, like the shop */
.drv-top .drv-meta { color: rgba(255,255,255,.8); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.drv { max-width: 560px; margin: 0 auto; padding: 14px var(--gutter) 20px; display: grid; gap: 12px; }
.drv svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drv-card { background: #fff; border: 1px solid #E6E9EE; border-radius: 16px; padding: 16px; display: grid; gap: 6px; box-shadow: 0 1px 2px rgba(17,17,17,.04); }
.drv-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6B7078; }
.drv-card h2 svg { width: 16px; height: 16px; }
.drv-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #6B7078; }
.drv-meta { color: #6B7078; font-size: 14px; }
.drv-meta.small { font-size: 13px; }
.drv-head-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.drv-head h1 { font-family: var(--ui); font-size: 22px; font-weight: 600; margin: 2px 0 0; letter-spacing: .01em; }
.drv-amount { text-align: end; }
.drv-amount b { font-size: 20px; font-variant-numeric: tabular-nums; }
.drv-name { font-size: 17px; }
.drv-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.drv-cbtn { min-height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; text-decoration: none; }
.drv-cbtn.call { background: #fff; color: #111; border: 1.5px solid #111; }
.drv-cbtn.wa { background: #25D366; color: #fff; border: 1.5px solid #25D366; }
.drv-addr { font-size: 16px; line-height: 1.45; }
.drv-map { margin-top: 8px; min-height: 48px; border-radius: 12px; background: #EEF4FD; color: #184f95; border: 1.5px solid #CFE0F7; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; text-decoration: none; }
.drv-items { list-style: none; margin: 0; padding: 0; display: grid; }
.drv-items li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #EEF0F3; }
.drv-items li:first-child { border-top: 0; padding-top: 2px; }
.drv-items li > span:last-child { display: grid; gap: 2px; }
.drv-items .qty { min-width: 34px; height: 26px; padding: 0 6px; border-radius: 8px; background: #F2F4F7; display: inline-grid; place-items: center; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.drv-note { border-inline-start: 3px solid #eda100; }
.drv-state { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-weight: 600; font-size: 15px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #E3E6EB; }
.drv-state.ok { background: #DDF2DD; border-color: #bfe3bf; color: #0a5a0a; }
.drv-state.warn { background: #FBE3E3; border-color: #f3c4c4; color: #8a1f1f; }
.drv-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 10; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid #E3E6EB; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); }
.drv-bar-in { max-width: 560px; margin: 0 auto; display: flex; gap: 10px; }
.drv-btn { flex: 1; min-height: 56px; border-radius: 14px; border: 0; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; }
.drv-btn svg { width: 20px; height: 20px; stroke-width: 2.4; }
.drv-btn.done { background: #0a7d25; }
.drv-btn:disabled { opacity: .55; cursor: default; }
/* when to deliver */
.drv-when b { font-size: 18px; font-variant-numeric: tabular-nums; }
.drv-when.asap b { color: #8a5300; }
.drv-when.late { border-color: #F0C2BA; background: #FDF3F1; }
.drv-when.late b { color: #8a1f1f; }

/* staff header: the same dark bar and white logo as the shop header */
.staff-top { background: var(--ink); border-bottom-color: var(--ink); color: #fff; }
.staff-top .staff-tag { border-color: rgba(255,255,255,.6); color: #fff; }
.staff-top .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.staff-top .btn-ghost:hover, .staff-top .btn-ghost:focus-visible { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.staff-top .staff-tabs button { color: rgba(255,255,255,.65); }
.staff-top .staff-tabs button:hover { color: #fff; }
.staff-top .staff-tabs button.on { color: #fff; border-bottom-color: #fff; }

/* staff sections: a bottom bar with icons on phones (like the shop's Home / Shop / Bag); top tabs on computers */
.staff-tabs svg { display: none; }
@media (max-width: 719px) {
  .staff-top-inner { padding-bottom: 8px; }
  .staff-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; width: auto; order: initial; gap: 0; overflow: visible;
    display: grid; grid-template-columns: repeat(6, 1fr); background: var(--ink); border-top: 1px solid rgba(255,255,255,.08);
    padding-bottom: var(--safe-b); }
  .staff-tabs[hidden] { display: none !important; }
  .staff-top .staff-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 62px; padding: 6px 2px; border-bottom: 0; font-size: 10.5px; line-height: 1.15; text-align: center; white-space: normal;
    color: rgba(255,255,255,.55); }
  .staff-top .staff-tabs button.on { color: #fff; border-bottom: 0; }
  .staff-tabs svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .staff-tabs .pill { position: absolute; top: 5px; inset-inline-start: calc(50% + 5px); margin: 0; }
  .staff-body { padding-bottom: calc(84px + var(--safe-b)); }
  .undo-bar { bottom: calc(78px + var(--safe-b)); }
}

/* staff products on phones: Edit and up / down in a small column on the right; price under the name */
@media (max-width: 719px) {
  .pcard { grid-template-columns: 64px 1fr auto; grid-template-areas: "thumb main act" "thumb price act"; align-items: center; }
  .pcard .pc-thumb { grid-area: thumb; }
  .pcard .pc-main { grid-area: main; align-self: end; }
  .pcard .pc-price { grid-area: price; grid-column: auto; align-self: start; font-size: 15px; }
  .pcard .pc-actions { grid-area: act; grid-column: auto; margin: 0; display: grid; grid-template-columns: 38px 38px; gap: 6px; align-self: center; }
  .pcard .pc-actions .btn { min-height: 38px; padding: 0; justify-content: center; font-size: 13px; }
  .pcard .pc-actions [data-pedit] { grid-column: 1 / -1; }
}

/* staff coupons: stat tiles, form with live preview, tickets */
.cpn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.cpn-head h2 { font-family: var(--ui); font-size: 20px; font-weight: 600; margin: 0; }
.cpn-head .btn svg, .cpn-form svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cpn-head .btn { gap: 6px; }
.cpn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.cpn-stats > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 2px; }
.cpn-stats b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cpn-stats span { font-size: 12px; color: var(--muted); }
.cpn-form .panel-head h2 { display: flex; align-items: center; gap: 8px; }
.cpn-grid { display: grid; gap: 16px; }
.cpn-fields { display: grid; gap: 4px; }
.cpn-code { display: flex; gap: 8px; }
.cpn-code input { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.cpn-code .btn { flex: none; gap: 6px; }
.cpn-type { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #EEF0F3; border-radius: 12px; margin-bottom: 8px; }
.cpn-type button { border: 0; background: transparent; min-height: 38px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; }
.cpn-type button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(17,17,17,.12); }
.cpn-value { position: relative; }
.cpn-value input { width: 100%; font-size: 18px; padding-inline-end: 48px; }
.cpn-value span { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.cpn-more { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }
.cpn-more summary { cursor: pointer; font-weight: 500; font-size: 14px; list-style: none; display: flex; align-items: center; gap: 6px; }
.cpn-more summary::-webkit-details-marker { display: none; }
.cpn-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #EEF0F3; font-weight: 600; }
.cpn-more[open] summary::before { content: "−"; }
.cpn-more .row-3 { margin-top: 10px; }
.cpn-preview { display: grid; gap: 6px; align-content: start; }
.cpn-list { display: grid; gap: 12px; margin-top: 14px; }
.ctk { position: relative; display: grid; grid-template-columns: 104px 1fr; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(17,17,17,.04); }
.ctk-stub { position: relative; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 16px 8px; background: var(--ink); color: #fff; text-align: center; }
.ctk-stub b { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.ctk-stub span { font-size: 11px; letter-spacing: .24em; opacity: .7; }
/* perforated edge with two notches, like a real ticket */
.ctk-stub::after { content: ""; position: absolute; inset-block: 10px; inset-inline-end: -1px; border-inline-end: 2px dashed rgba(255,255,255,.35); }
.ctk::before, .ctk::after { content: ""; position: absolute; inset-inline-start: 94px; width: 20px; height: 20px; border-radius: 50%; background: var(--staff-bg); border: 1px solid var(--line); z-index: 1; }
.ctk::before { top: -11px; } .ctk::after { bottom: -11px; }
.ctk.is-off .ctk-stub { background: #9AA0A8; }
.ctk.is-off .ctk-code { color: var(--muted); }
.ctk.is-preview { box-shadow: 0 8px 24px rgba(17,17,17,.08); }
.ctk-body { display: grid; gap: 8px; padding: 14px 16px 12px 22px; min-width: 0; }
.ctk-top { display: flex; align-items: center; gap: 8px; }
.ctk-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctk-top .status { margin-inline-start: auto; }
.ctk-icon { width: 34px; height: 34px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); }
.ctk-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctk-icon.danger { color: #B42318; }
.ctk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.ctk-meta b { color: var(--ink); font-weight: 600; }
.ctk-use { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.ctk-use b { color: var(--ink); }
.ctk-bar { flex: 1; max-width: 160px; height: 6px; border-radius: 3px; background: #EEF0F3; overflow: hidden; }
.ctk-bar i { display: block; height: 100%; background: var(--viz-1); border-radius: 3px; }
.ctk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.ctk-switch { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink); }
.ctk-switch .knob { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #D5D9DF; transition: background .2s; flex: none; }
.ctk-switch .knob::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start .2s; }
.ctk-switch[aria-checked="true"] .knob { background: var(--ok); }
.ctk-switch[aria-checked="true"] .knob::after { inset-inline-start: 19px; }
@media (min-width: 720px) {
  .cpn-grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .cpn-list { grid-template-columns: repeat(2, 1fr); }
}

/* staff delivery prices */
.dlv { display: grid; gap: 12px; margin-top: 12px; }
.dlv .panel { margin: 0; }
.dlv-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dlv-title h2 { margin: 0; font-size: 16px; }
.dlv-title .muted { display: block; }
.dlv-switch { margin-inline-start: auto; }
.dlv-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--viz-1-soft); color: var(--viz-1-deep); }
.dlv-ico.gift { background: #DDF2DD; color: #0a7d25; }
.dlv-ico.eye { background: #F2F4F7; color: var(--ink); }
.dlv-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dlv-sub { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.dlv-step { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; background: var(--staff-bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.dlv-step button { height: 56px; border: 0; background: #fff; font-size: 24px; font-weight: 500; color: var(--ink); cursor: pointer; }
.dlv-step button:active { background: #EEF0F3; }
.dlv-step b { text-align: center; font-size: 26px; font-variant-numeric: tabular-nums; }
.dlv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dlv-chips .chip { min-height: 36px; padding: 0 14px; font-size: 13px; }
.dlv-chips .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.dlv-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #F8F9FB; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; font-size: 14px; }
.dlv-arrow { color: var(--muted); }
html[dir="rtl"] .dlv-arrow { transform: scaleX(-1); }
.dlv-pill { margin-inline-start: auto; padding: 4px 10px; border-radius: 999px; background: var(--viz-1-soft); color: var(--viz-1-deep); font-weight: 600; font-size: 13px; }
.dlv-hint { display: grid; gap: 6px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.dlv-hint .bar { height: 6px; }
.dlv-note { margin: 0; padding: 12px; border-radius: 12px; font-weight: 600; }
.dlv-note.ok { background: #DDF2DD; color: #0a5a0a; }
.dlv-save.dirty { position: sticky; bottom: calc(76px + var(--safe-b)); z-index: 5; }
.dlv-save .btn { width: 100%; min-height: 50px; font-size: 16px; }
.dlv-save .btn:disabled { opacity: 1; background: #E4E7EC; border-color: #E4E7EC; color: var(--muted); }
@media (min-width: 720px) {
  .dlv { grid-template-columns: 1fr 1fr; align-items: start; }
  /* (final review) the fee and what customers see side by side, the delivery times across the page (no half-empty rows) */
  .dlv-save { grid-column: 1 / -1; }
  .dlv-times { grid-column: 1 / -1; }
  .dlv-save { position: static; }
  .dlv-save .btn { width: auto; min-width: 220px; }
}
/* Staff > Delivery times: pause orders (red while on), the note for customers, closed days and dates, preparation time */
.dlv-pause { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #F8F9FB; }
.dlv-pause > div { display: grid; gap: 2px; flex: 1; }
.dlv-pause.on { background: #FBE3DF; border-color: #F1C4BC; }
.dlv-pause.on b { color: #8a1f1f; }
.dlv-pause .ctk-switch[aria-checked="true"] .knob { background: #C0392B; }
.dlv-field { display: grid; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.dlv-field .input { font-weight: 400; }
.dlv-field[hidden], #dDaysBox[hidden], .dlv-help[hidden] { display: none; }
.dlv-times .dlv-help { margin: 2px 0 0; }
.dlv-times .dlv-step { margin-top: 10px; }
.dlv-prep b { font-size: 20px; }
.dlv-date { display: flex; gap: 8px; margin-top: 10px; }
.dlv-date .input { flex: 1; min-width: 0; min-height: 40px; padding: 6px 12px; font-size: 15px; }

/* staff broadcast: header chip, connection card, numbered steps, history cards */
.bc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: #FBE3E3; color: #8a1f1f; white-space: nowrap; }
.bc-chip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bc-chip.on { background: #DDF2DD; color: #0a5a0a; }
.bc-chip.wait { background: #FDF0D5; color: #8a5300; }
.wa-status { margin-top: 12px; padding: 16px; border-radius: 16px; gap: 12px 14px; box-shadow: 0 1px 2px rgba(17,17,17,.04); }
.wa-badge { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #25D366; color: #fff; }
.wa-status.is-off .wa-badge { background: #E9ECF1; color: #6B7078; }
.wa-status.is-wait .wa-badge { background: #FDF0D5; color: #8a5300; }
.wa-badge svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wa-status-text { display: grid; gap: 2px; }
.wa-status-text b { font-size: 15px; }
.wa-connect { gap: 8px; }
.wa-connect-actions { flex-direction: column; align-items: stretch; }
.wa-connect-actions .btn { width: 100%; min-height: 48px; background: #128C7E; border-color: #128C7E; }
.wa-connect-actions .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.wa-connect-actions .small { order: -1; background: var(--staff-bg); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.bc-step { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-inline-end: 8px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; vertical-align: 1px; }
.wa-layout { margin-top: 12px; }
.wa-layout .panel { margin: 0; border-radius: 16px; }
.wa-drop { grid-template-columns: auto 1fr; justify-items: start; text-align: start; padding: 14px 16px; gap: 2px 14px; border-radius: 14px; }
.wa-drop svg { grid-row: span 2; width: 40px; height: 40px; padding: 8px; margin: 0; border-radius: 12px; background: var(--viz-1-soft); }
.wa-msgfield textarea { border-radius: 14px; min-height: 170px; }
.wa-phone { border-radius: 14px; }
.wa-count { justify-content: flex-start; align-items: baseline; gap: 8px; background: var(--staff-bg); border-radius: 12px; padding: 12px 14px; }
.wa-count b { font-size: 28px; }
.wa-test input { min-height: 44px; border-radius: 12px; }
.wa-test .btn { min-height: 44px; }
.wa-send { min-height: 52px; font-size: 16px; border-radius: 14px; }
.wa-history { margin-top: 12px; border-radius: 16px; }
.wa-history .wa-row { background: #F8F9FB; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 8px; }
.wa-history .wa-row:first-of-type { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--line); }
@media (min-width: 720px) {
  .wa-connect-actions { flex-direction: row; align-items: center; }
  .wa-connect-actions .btn { width: auto; }
  .wa-connect-actions .small { order: 0; }
}

/* ============ staff: hover (mouse) and press (touch) feedback ============ */
.staff-body { -webkit-tap-highlight-color: transparent; }
.staff-body :is(.btn, .chip, .ord, .ord-ico, .ord-done, .ord-tool, .ord-tabs button, .ctk, .ctk-icon, .ctk-switch, .pcard, .kpi,
  .cpn-stats > div, .cpn-type button, .dlv-step button, .dlv-chips .chip, .staff-tabs button, .wa-drop, .wa-history .wa-row,
  .seg button, .panel, .signout-menu button, .export-group button) {
  transition: transform .16s ease, box-shadow .2s ease, background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}
/* press: everything you can tap shrinks a little */
.staff-body :is(.btn, .chip, .ord-ico, .ord-done, .ord-tool, .ctk-icon, .cpn-type button, .dlv-step button, .seg button, .export-group button):active:not(:disabled) { transform: scale(.96); }
.staff-body :is(.ord-main, .ctk-switch):active { opacity: .75; }
.staff-body .ord:active:not(:has(button:active, a:active)) { transform: scale(.992); }
.staff-body .staff-tabs button:active { transform: scale(.92); }
.staff-body .ord-tabs button:active { transform: scale(.96); }
.staff-body .dlv-step button:active { background: #E9ECF1; }
/* mouse only: hover lifts and highlights (touch screens keep only the press effect, so nothing gets stuck) */
@media (hover: hover) and (pointer: fine) {
  /* the coloured status edge stays: only the other three sides change colour */
  .staff-body :is(.ord, .ctk, .pcard):hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,17,17,.08); border-block-color: #D5D9DF; border-inline-end-color: #D5D9DF; }
  .staff-body :is(.kpi, .cpn-stats > div):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,17,17,.07); }
  .staff-body .ord-main:hover .ord-name { color: var(--viz-1-deep); }
  .staff-body .btn:not(.btn-ghost):not(:disabled):hover { filter: brightness(1.12); box-shadow: 0 6px 16px rgba(17,17,17,.14); }
  .staff-body .btn-ghost:not(:disabled):hover { background: var(--staff-bg); border-color: var(--ink); }
  .staff-body .staff-top .btn-ghost:not(:disabled):hover { background: rgba(255,255,255,.12); border-color: #fff; }
  .staff-body .btn-danger:not(:disabled):hover { background: #FDECEC; border-color: #B42318; color: #B42318; }
  .staff-body :is(.ord-ico, .ord-tool, .ctk-icon):hover { background: var(--staff-bg); border-color: var(--ink); transform: translateY(-1px); }
  .staff-body .ctk-icon.danger:hover { background: #FDECEC; border-color: #B42318; }
  .staff-body .ord-done:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0,131,0,.28); }
  .staff-body .chip:not([aria-pressed="true"]):hover { border-color: var(--ink); background: var(--staff-bg); }
  .staff-body :is(.ord-tabs, .cpn-type) button:not([aria-selected="true"]):not([aria-pressed="true"]):hover { color: var(--ink); background: rgba(255,255,255,.6); }
  .staff-body .dlv-step button:hover { background: var(--staff-bg); }
  .staff-body .ctk-switch:hover .knob { box-shadow: 0 0 0 4px rgba(0,131,0,.12); }
  .staff-body .wa-drop:hover { transform: translateY(-1px); }
  .staff-body .wa-history .wa-row:hover { background: #fff; box-shadow: 0 6px 16px rgba(17,17,17,.06); }
  .staff-body .staff-top .staff-tabs button:not(.on):hover { color: #fff; border-bottom-color: rgba(255,255,255,.35); }
  .staff-body .seg button:not([aria-pressed="true"]):hover { color: var(--ink); background: var(--staff-bg); }
  .staff-body .signout-menu button:hover { background: var(--staff-bg); }
  .staff-body .export-group button:hover { background: #F0F2F5; transform: translateY(-1px); }
}
/* phones: the bottom bar icon pops a little when you tap it */
@media (max-width: 719px) {
  .staff-body .staff-tabs button svg { transition: transform .18s ease; }
  .staff-body .staff-tabs button.on svg { transform: translateY(-1px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .staff-body * { transition: none !important; transform: none !important; }
}
#wcNote:empty { display: none; }

/* past broadcasts: card layout */
.wa-history .wa-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.wa-row-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.wa-row-when { gap: 10px; }
.wa-history .wa-row-msg { align-items: flex-start; color: var(--ink); line-height: 1.5; }
.wa-history .wa-row-msg img { width: 56px; height: 56px; border-radius: 10px; }
@media (min-width: 720px) { .wa-history .wa-row { grid-template-columns: 1fr; } }

/* past broadcasts: small pie with the delivered % and a tiny legend */
.wa-row-top { flex-wrap: nowrap; }
.wa-row-top .wa-row-when { flex: 1; min-width: 0; flex-wrap: wrap; }
.bc-pie { position: relative; width: 52px; height: 52px; flex: none; }
.bc-pie svg { width: 100%; height: 100%; transform: scaleX(1); }
.bc-pie b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bc-pie-legend { display: grid; gap: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bc-pie-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bc-pie-legend i { width: 8px; height: 8px; border-radius: 50%; }
.bc-pie-legend i.s { background: #128C7E; } .bc-pie-legend i.f { background: #D64545; } .bc-pie-legend i.r { background: #C9CED6; }
button.bc-chip { border: 0; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
button.bc-chip::after { content: "›"; margin-inline-start: 2px; font-size: 14px; line-height: 1; transition: transform .2s; }
button.bc-chip[aria-expanded="true"]::after { transform: rotate(90deg); }

/* Staff > Delivery > the Ctrl Z delivery company card */
.hub-form { display: flex; gap: 8px; margin-top: 10px; }
.hub-form .input { flex: 1; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.hub-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.hub-err { color: #8a1f1f; font-size: 13px; font-weight: 500; margin-top: 8px; min-height: 1em; }
.hub-card .actions { margin-top: 10px; }

/* checkout: the shop is not taking orders yet (no payment gateway or Riders set up) */
.closed-note { margin: 0 0 12px; padding: 12px 14px; border-radius: 8px; background: #FBF1EF; color: #8A1C12; font-weight: 600; font-size: 14px; }

/* Staff > Delivery: Riders and Payment setup (2026-10-30). The shop takes orders only when both are ready. */
.setup-cards { display: grid; gap: 14px; margin-bottom: 18px; }
.setup-card .dlv-title { align-items: center; }
.setup-card .dlv-title .bc-chip { margin-inline-start: auto; }
.setup-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line, #E3E6EB); }
.setup-step > div { display: grid; gap: 4px; flex: 1; }
.setup-step .btn { justify-self: start; margin-top: 4px; }
.setup-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C9CED6; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.setup-dot.ok { background: #1f7a3a; border-color: #1f7a3a; }
.setup-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 8px 0 4px; }
.setup-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.setup-form .wide { grid-column: 1 / -1; }
.setup-form label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.setup-form .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-map { height: 260px; margin: 6px 0 8px; border-radius: 10px; border: 1px solid var(--line, #E3E6EB); }
.setup-banner { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #FDF0D5; color: #6b4300; font-weight: 600; font-size: 14px; }
.setup-banner a { color: inherit; text-decoration: underline; margin-inline-start: 6px; }
@media (max-width: 560px) { .setup-form { grid-template-columns: 1fr; } }
/* Staff > Orders: where a paid order is with Riders */
.ord-when.riders { background: #E7F4EC; color: #1f5f36; }
/* a problem at Riders (refused, not sure, failed attempt, returned, closed...) is red on the closed card: this rule is more
   exact than the green one above, so it wins wherever it sits */
.ord-when.riders.late { background: #FBE3DF; color: #8a1f1f; }
.o-riders { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line, #E3E6EB); }
.o-riders a { color: inherit; }
.o-riders.bad b, .o-riders-err { color: #8a1f1f; }
.o-riders-err { flex-basis: 100%; font-size: 13px; font-weight: 600; }

/* checkout: the delivery price from Riders for this address, or why it cannot be delivered */
.quote-note { margin: -4px 0 12px; font-size: 14px; font-weight: 600; }
.quote-note.muted { color: var(--muted, #7A716A); font-weight: 500; }
.quote-note.ok { color: #1f5f36; }
.quote-note.bad { padding: 10px 12px; border-radius: 8px; background: #FBF1EF; color: #8A1C12; }
.setup-banner.bad { background: #FBE3DF; color: #8a1f1f; }
.banner-btn { border: 0; background: none; padding: 0; margin-inline-start: 6px; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Staff: the red bar on every tab when payments, Riders or emails have a problem, or the 5-minute job stopped (2026-10-30) */
.health-bar { display: grid; gap: 8px; margin: 12px 0 0; }
.health-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 10px; background: #FBE3DF; color: #8a1f1f; border: 1px solid #F0B9AF; }
.health-line > div { display: grid; gap: 3px; flex: 1 1 240px; min-width: 0; }
.health-line b { font-size: 15px; font-weight: 700; }
.health-line span { font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.health-line .btn { flex: none; background: #8a1f1f; border-color: #8a1f1f; color: #fff; }
.setup-card { scroll-margin-top: 84px; }
.setup-card.flash { box-shadow: 0 0 0 3px #E07A6A; transition: box-shadow .3s; }
.alerts-boxes { display: grid; gap: 8px; }
/* Staff > Orders: the refund of a paid order (due, then the record), and "Mark delivered anyway" for orders with Riders */
.o-refund { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line, #E3E6EB); }
.o-refund .o-label { width: 100%; }
.o-refund.bad .o-refund-due { color: #8a1f1f; }
.o-refund-how { flex-basis: 100%; color: #8a1f1f; font-weight: 500; }
.o-refund-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; width: 100%; }
.o-refund-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; flex: 1 1 100%; }
.ord-anyway { border: 0; background: none; padding: 8px 2px; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.ord-anyway:hover { color: var(--ink); }

/* ---------- wave 3 checkout (2026-10-30): the bag and the stock, refusals at Pay, a gift, the minimum order ---------- */
/* a toast wraps on a phone instead of running off the screen (a long one also stays longer: app.js) */
.toast { white-space: normal; width: max-content; max-width: min(520px, calc(100vw - 32px)); text-align: center; line-height: 1.4; border-radius: 16px; }
/* a bag line above the stock left: "Sold out", "Only 2 left"; the line stays until the customer changes it */
.line-short { color: #8A1C12; font-size: 13px; font-weight: 600; }
.line.is-short .thumb { opacity: .6; }
/* the bag: why Checkout is off (a line above the stock, or under the minimum order) */
.stop-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #FBF1EF; color: #8A1C12; font-weight: 600; }
.btn.is-off { opacity: .45; }
/* checkout: a refusal at Pay stays next to the button, and wraps */
.pay-note { overflow-wrap: anywhere; }
.pay-note a { color: inherit; text-decoration: underline; margin-inline-start: 4px; white-space: nowrap; }
.field-hint { margin-top: -2px; }
/* checkout: send to someone else */
.gift-box { margin-top: 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--card); }
.gift-check { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; min-height: 32px; }
.gift-check input { width: 20px; height: 20px; accent-color: var(--ink); }
#giftFields { margin-top: 12px; }
/* thank-you page: the code's discount */
.order-box .disc-row span:last-child { color: var(--oud); }
/* Staff order card: a gift's receiver (the buyer stays the customer) */
.o-gift { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.o-gift svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.o-gift a { color: inherit; }

/* ---------- wave3 staff (2026-10-30) ---------- */
/* Overview: the shop's state (four steps, each a button to its card) and the open problems */
.ov-status { margin-top: 12px; }
.ov-status h2 { margin-bottom: 8px; }
.ov-status .ov-sub { margin: 14px 0 8px; }
.ov-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .ov-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ov-step { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); cursor: pointer; }
.ov-step i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-weight: 700; font-size: 14px; color: #fff; background: #1f8a4c; }
.ov-step.warn i { background: #C98500; }
.ov-step.bad i { background: #B42318; }
.ov-step.bad { border-color: #F0B9AF; background: #FDF1EF; }
.ov-step span { display: grid; gap: 1px; min-width: 0; }
.ov-step b { font-size: 14px; font-weight: 600; }
.ov-step small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-probs { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-prob { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid #F0B9AF; background: #FBE3DF; color: #8a1f1f; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ov-prob b { font-size: 15px; }
.ov-none { display: flex; align-items: center; gap: 8px; margin: 0; color: #1f5f36; font-weight: 600; font-size: 14px; }
.ov-none i { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; background: #1f8a4c; color: #fff; font-size: 12px; }
.ov-title { font-family: var(--ui); font-size: 15px; font-weight: 600; margin: 18px 2px 0; }
.kpi small span { white-space: nowrap; }
.ov-apart { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.ov-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 12px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 500; border: 1px solid transparent; }
.ov-chip.bad { background: #FBE3DF; color: #8a1f1f; border-color: #F0B9AF; cursor: pointer; }
.ov-chip.test { background: #EEE8FA; color: #4b2a8a; border-color: #D5C8F2; }
.health-bar.flash { box-shadow: 0 0 0 3px #E07A6A; border-radius: 10px; transition: box-shadow .3s; }
/* Orders: test payments (violet), payments to check (red), waiting for payment (amber, dashed), never paid (grey) */
.ord.is-test { border-inline-start: 4px solid #7a5af0; }
.ord.is-review { border-inline-start: 4px solid #B42318; }
.ord.is-waiting { border-style: dashed; border-color: #E2B34B; background: #FFFBF1; }
.ord.is-unpaid { opacity: .8; border-style: dashed; }
.ord-when.test { background: #EEE8FA; color: #4b2a8a; }
.ord-when.wait { background: #FDF0D5; color: #7a4a00; }
.o-riders.wait b { color: #7a4a00; }
.o-riders.wait .small { flex-basis: 100%; color: var(--muted); }
.st-waiting { background: #FDF0D5; color: #7a4a00; }
.st-unpaid { background: #ECEEF1; color: var(--muted); }
.setup-banner.test { background: #EEE8FA; color: #4b2a8a; font-weight: 500; }
.ord-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ord-tabs button { padding: 4px 6px; line-height: 1.15; text-align: center; }
@media (max-width: 560px) { .ord-tabs button { flex-direction: column; gap: 3px; font-size: 12.5px; min-height: 52px; } }
.ord-menu-wrap { position: relative; flex: none; }
.ord-menu { min-width: 230px; }
.ord-tool svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ord-actions .btn svg { width: 16px; height: 16px; }
/* phone and right-to-left fixes: the day box of the time editor takes the whole row; key placeholders in the normal font */
@media (max-width: 560px) { .o-when-form select[data-slotday] { flex: 1 1 100%; } }
.hub-form .input::placeholder, input[type="password"]::placeholder { font-family: var(--ui); letter-spacing: normal; }
.ord-search input { text-overflow: ellipsis; }
/* the product editor: the most per day */
.pf-maxday { margin-top: 4px; }
.pf-maxday input { max-width: 180px; }
.pf-maxday .pf-help { display: block; margin-top: 4px; }
/* the prep list (on screen and printed), the password form */
.prep-day { padding: 12px 0; border-top: 1px solid var(--line); }
.prep-day:first-child { border-top: 0; }
.prep-day h3 { font-family: var(--ui); font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.prep-wins { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.prep-wins span { padding: 3px 10px; border-radius: 999px; background: var(--viz-1-soft); color: var(--viz-1-deep); font-size: 12.5px; font-weight: 600; }
.prep-day table, .slip table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prep-day th, .prep-day td, .slip th, .slip td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.prep-day th, .slip th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
html[lang="ar"] .prep-day th, html[lang="ar"] .slip th { letter-spacing: 0; }
.prep-day .n, .slip .n { text-align: end; width: 70px; }
.slip .box::after { content: ""; display: inline-block; width: 14px; height: 14px; border: 1.5px solid #111; border-radius: 3px; }
.pw-form { max-width: 440px; }
.pw-form .hub-err { min-height: 18px; }
.print-area { display: none; }
@media print {
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing { background: #fff !important; padding: 0 !important; }
  body.printing #printArea { display: block; color: #111; font-size: 13pt; }
  #printArea .print-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
  #printArea h1 { font-family: var(--ui); font-size: 18pt; margin: 0 0 8px; }
  #printArea .slip-to { display: grid; gap: 2px; margin: 8px 0 12px; padding: 8px 10px; border: 1px solid #999; border-radius: 6px; }
  #printArea .slip-note { margin-top: 10px; }
  #printArea .slip-foot { margin-top: 12px; color: #555; font-size: 10pt; }
  #printArea .prep-day { break-inside: avoid; }
  #printArea .setup-banner { background: none; border: 1px solid #999; }
}
.kpi small span { text-transform: none; letter-spacing: 0; font-size: inherit; color: inherit; }
@media (min-width: 720px) {
  .ord-head { grid-template-columns: auto 1fr; }
  .ord-tabs { grid-template-columns: repeat(4, auto); }
  .ord-tabs button { white-space: nowrap; padding: 4px 14px; }
}
@media (max-width: 560px) { .ord-tools { flex-wrap: wrap; justify-content: flex-end; } .ord-search { flex: 1 1 100%; } }
.ov-step small { white-space: normal; overflow: visible; }

/* ---------- wave3 riders (2026-10-30): next steps after a failed delivery, the address editor, the wallet alert,
   a late payment's new time, the owner's governorates, and the checkout map's "zoom in" note ---------- */
.o-next { display: grid; gap: 6px; padding: 12px 14px; margin: 4px 0 8px; border-radius: 10px; background: #FBE3DF; color: #8a1f1f; }
.o-next b { font-size: 15px; }
.o-next .small { color: #5c1a1a; }
.o-next-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.o-next-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.o-next-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.o-riders-line { flex-basis: 100%; }
.o-addr-edit { justify-self: start; margin-top: 6px; }
.o-addr.editing { gap: 6px; }
.o-addr-form { margin: 2px 0 0; }
.o-addr-form .input { min-height: 38px; }
.o-when.retime { background: #FBE3DF; border-radius: 10px; padding: 10px 12px; border-top: 0; margin: 4px 0; }
.o-when.retime .o-riders-err { flex-basis: 100%; }
.wallet-alert { display: grid; gap: 10px; }
.banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.banner-actions .btn { min-height: 36px; }
.setup-banner .banner-actions a.btn { color: #fff; text-decoration: none; margin-inline-start: 0; }
.gov-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.gov-checks .check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.pin-zoom-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500; margin: 0; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 999px;
  background: rgba(17,17,17,.86); color: #fff; font-size: 14px; text-align: center; box-shadow: 0 4px 14px rgba(17,17,17,.25); pointer-events: none; }
.pin-zoom-hint[hidden] { display: none; }

/* (2026-11-01) logos of any shape keep their shape in the packing slip and the PDF report */
.print-head img, .pdf-head img { object-fit: contain; }

/* =========================================================
   Light header (2026-11-01; first made for NEAT Fashion Line: "match theme with my logo"). Each shop picks its header in
   shop.json: "headTheme": "dark" (the template's dark bar and white logo, the default) or "light" (a soft colour from its
   logo, colors.head, with black words and the black logo: data.js STORE.logo.light). Every page's <html data-head="...">
   says which. The header, the round menu, the footer and the phone bar take it; the page stays white; buttons stay black.
   Staff follows the same choice (see "Staff in the shop's own look").
   ========================================================= */
:root { --head: #EEE7E2; --head-line: rgba(17,17,17,.12); }
[data-head="light"] .site-header { background: var(--head); color: var(--ink); box-shadow: 0 1px 0 var(--head-line); }
[data-head="light"] .cart-count { background: var(--gilt); color: #fff; }
[data-head="light"] .pause-bar { color: #fff; }
[data-head="light"] .menu-btn { border-color: rgba(17,17,17,.55); }
[data-head="light"] .menu-btn i { background: var(--ink); }
[data-head="light"] body.menu-open .menu-btn { background: var(--ink); border-color: var(--ink); }
[data-head="light"] body.menu-open .menu-btn i { background: #fff; }
[data-head="light"] .site-menu { background: var(--head); color: var(--ink); }
[data-head="light"] .sm-links a { color: var(--ink); }
[data-head="light"] .sm-groups a { border-color: rgba(17,17,17,.3); color: var(--ink); }
[data-head="light"] .sm-groups a:hover, [data-head="light"] .sm-groups a:focus-visible { background: rgba(17,17,17,.06); }
[data-head="light"] .sm-lang { background: var(--ink); color: #fff; }
[data-head="light"] .site-menu :focus-visible, [data-head="light"] .menu-btn:focus-visible { outline-color: var(--ink); }
[data-head="light"] .bottom-nav { background: var(--head); box-shadow: 0 -1px 0 var(--head-line); }
[data-head="light"] .bottom-nav a { color: rgba(17,17,17,.5); }
[data-head="light"] .bottom-nav a[aria-current="page"] { color: var(--ink); }
[data-head="light"] .site-footer { background: var(--head); color: rgba(17,17,17,.7); }
[data-head="light"] .social a { color: var(--ink); border-color: rgba(17,17,17,.4); }
@media (hover: hover) { [data-head="light"] .social a:hover { background: rgba(17,17,17,.06); border-color: var(--ink); } }
[data-head="light"] .site-footer :focus-visible { outline-color: var(--ink); }
@media (min-width: 720px) {
  [data-head="light"] .desktop-nav a { color: rgba(17,17,17,.7); }
  [data-head="light"] .desktop-nav a:hover { color: var(--ink); border-bottom-color: rgba(17,17,17,.4); }
  [data-head="light"] .desktop-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
}

/* photo fit per product group (data.js CATEGORIES photo; app.js pic() adds the class).
   person: model photos fill the frame, pinned to the top, so a head is never cut (only the feet can be).
   pack: products on white are shown whole, with white space around them, in every frame (no cut edges, nothing on the line). */
.card-media img.person, .gallery-track img.person, .hero-slide img.person, .tile-img img.person { object-position: 50% 0%; }
.card-media img.pack, .gallery-track img.pack, .hero-slide img.pack, .tile-img img.pack, .line .thumb img.pack {
  object-fit: contain; object-position: 50% 50%; background: #fff; padding: 9% 7%; }
.hero-slide img.pack { padding: 6% 10%; }

/* the three "why us" lines at the bottom of the round menu (data.js STORE.whyUs; owner asked 2026-11-01) */
.sm-values { width: 100%; max-width: 360px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; padding-top: 22px; border-top: 1px solid rgba(17,17,17,.15); }
.sm-values div { display: grid; justify-items: center; align-content: start; gap: 7px; text-align: center; font-size: 12px; line-height: 1.4; color: rgba(17,17,17,.75); }
.sm-values svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
body.menu-open .site-menu-inner > :nth-child(4) { transition-delay: .41s; }

/* "More in <group>" on the product page (2026-11-02: more professional; a clothing page never suggests a scent).
   Bigger cards that snap, round arrows like the menu button, a thin line that shows how far along the row you are,
   and the product's second photo on hover (devices that can hover only). */
.rel[hidden] { display: none; }
.rel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rel-head h2 { margin: 0; }
.rel-nav { display: flex; gap: 8px; flex: none; }
.rel-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(17,17,17,.55); background: #fff; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.rel-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .rel-btn svg { transform: scaleX(-1); }
@media (hover: hover) { .rel-btn:not(:disabled):hover { background: var(--ink); border-color: var(--ink); color: #fff; } }
.rel-btn:disabled { opacity: .28; cursor: default; }
.rel-btn:focus-visible, .rel-foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rel .slider .card { flex-basis: 62%; }
@media (min-width: 600px) { .rel .slider .card { flex-basis: 36%; } }
@media (min-width: 900px) { .rel .slider .card { flex-basis: 23.5%; } }
.rel-foot { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.rel-bar { flex: 1; height: 2px; background: var(--mist); border-radius: 2px; overflow: hidden; }
.rel-bar i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 2px; }
.rel-foot a { font-size: 14px; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; white-space: nowrap; }
.rel.rel-fits .rel-nav, .rel.rel-fits .rel-bar { visibility: hidden; }
.card-media img[data-alt] { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease), transform .7s var(--ease); }
@media (hover: hover) { .card:hover .card-media img[data-alt] { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .card-media img[data-alt] { transition: none; } }

/* the home page lookbook (2026-11-02, the user: "more professional, interactive, a wow to see").
   Stories form, as on Instagram and TikTok where these shops sell. The photo stage is the one bold thing on the page:
   bars that fill, a slow push-in on each photo, the next photo wiping in (the round menu's clip-path motion), a frosted
   product bar. Product-on-white slides sit on the pale card colour and turn the words dark. Phone: the heading lies on the photo. Desktop: heading,
   words and thumbnails on the left, the stage as a tall card on the right. */
.hero.hero-lb { padding-top: 0; padding-bottom: 30px; overflow: visible; }
.hero-lb .hero-inner { display: block; }
.lb-visual { position: relative; margin: 0 calc(var(--gutter) * -1); }
.lb-stage { --dur: 6000ms; position: relative; height: min(calc(100svh - 196px), 150vw); min-height: 460px; overflow: hidden;
  background: #2B2522; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; isolation: isolate; cursor: pointer; }
.lb-stage:focus { outline: none; }
.lb-stage:focus-visible { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--ink); }
.lb-slides { position: absolute; inset: 0; }
.lb-slide { position: absolute; inset: 0; margin: 0; visibility: hidden; }
.lb-slide.on { visibility: visible; z-index: 2; }
.lb-slide.out { visibility: visible; z-index: 1; animation: lbDim .95s cubic-bezier(.7, 0, .2, 1) both; }
.lb-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform-origin: 50% 8%; }
.lb-slide.on img { animation: lbPush var(--dur) linear both; }
.lb-slide.out img { transform: scale(1.1); }
@keyframes lbPush { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes lbDim { to { filter: brightness(.55); } }
.lb-slide.in-next { animation: lbWipeR .95s cubic-bezier(.7, 0, .2, 1) both; }
.lb-slide.in-prev { animation: lbWipeL .95s cubic-bezier(.7, 0, .2, 1) both; }
html[dir="rtl"] .lb-slide.in-next { animation-name: lbWipeL; }
html[dir="rtl"] .lb-slide.in-prev { animation-name: lbWipeR; }
@keyframes lbWipeR { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes lbWipeL { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* products on white ("pack" departments): the product on the pale card colour; the white of its photo melts into it */
.lb-slide.pack { background: radial-gradient(120% 75% at 50% 36%, #FCF7F5 0%, #EEDFDB 62%, #E4D0CB 100%); }
.lb-slide.pack img { object-fit: contain; object-position: 50% 28%; padding: 12% 15% 40%; mix-blend-mode: multiply; transform-origin: 50% 30%; }
/* shade for the white words on photos (top for the bars, bottom for the heading and the product bar) */
.lb-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity .6s;
  background: linear-gradient(to top, rgba(20,14,12,.74) 0%, rgba(20,14,12,.38) 30%, rgba(20,14,12,0) 58%),
              linear-gradient(to bottom, rgba(20,14,12,.38) 0%, rgba(20,14,12,0) 16%); }
.hero-lb.is-pack .lb-stage::after { opacity: 0; }

/* the bars */
.lb-bars { position: absolute; z-index: 5; top: 12px; inset-inline: 14px; display: flex; gap: 4px; pointer-events: none; }
.lb-bars span { flex: 1; height: 2.5px; border-radius: 3px; background: rgba(255,255,255,.34); overflow: hidden; transition: background .6s; }
.lb-bars i { display: block; height: 100%; width: 0; border-radius: inherit; background: #fff; transition: background .6s; }
.lb-bars .done i { width: 100%; }
.lb-bars .now i { animation: lbFill var(--dur) linear forwards; }
@keyframes lbFill { to { width: 100%; } }
.hero-lb.is-pack .lb-bars span { background: rgba(17,17,17,.14); }
.hero-lb.is-pack .lb-bars i { background: var(--ink); }
.lb-stage.paused .lb-bars .now i, .lb-stage.paused .lb-slide.on img { animation-play-state: paused; }
.lb-stage.single .lb-bars, .lb-stage.single .lb-pause { display: none; }

/* pause / play */
.lb-pause { position: absolute; z-index: 6; top: 24px; inset-inline-end: 12px; width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .3s, color .6s, border-color .6s; }
.lb-pause svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-pause .ic-play { fill: currentColor; stroke: none; display: none; }
.lb-stage.user-paused .lb-pause .ic-play { display: block; }
.lb-stage.user-paused .lb-pause .ic-pause { display: none; }
.lb-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-lb.is-pack .lb-pause { color: var(--ink); background: rgba(255,255,255,.55); border-color: rgba(17,17,17,.12); }

/* the heading lies on the photo (phone) */
.hero-lb h1 { position: absolute; z-index: 4; inset-inline: var(--gutter); bottom: 116px; margin: 0; color: #fff; pointer-events: none;
  font-size: clamp(46px, 13.5vw, 70px); line-height: .94; text-shadow: 0 2px 30px rgba(0,0,0,.22); transition: color .6s, text-shadow .6s; }
.hero-lb h1 .line2 { padding-inline-start: 11vw; }
.hero-lb h1.split::after { background: rgba(255,255,255,.9); margin-top: 14px; transition: background .6s, transform .9s cubic-bezier(.16, .84, .24, 1) .7s; }
.hero-lb.is-pack h1 { color: var(--ink); text-shadow: none; }
.hero-lb.is-pack h1.split::after { background: var(--gilt); }

/* the frosted product bar */
.lb-pill { position: absolute; z-index: 5; inset-inline: 12px; bottom: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 11px 12px 12px 18px; border-radius: 22px;
  color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); transition: background .6s, color .6s, border-color .6s; }
html[dir="rtl"] .lb-pill { padding: 11px 18px 12px 12px; }
.lb-kind { font-size: 12.5px; letter-spacing: .02em; opacity: .82; }
.lb-row { display: flex; align-items: center; gap: 12px; }
.lb-row b { flex: 1; min-width: 0; font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-price { font-size: 14px; font-weight: 500; white-space: nowrap; }
.lb-go { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); transition: background .6s, color .6s, transform .3s var(--ease); }
.lb-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .lb-go svg { transform: scaleX(-1); }
@media (hover: hover) { .lb-pill:hover .lb-go { transform: translateX(3px); } html[dir="rtl"] .lb-pill:hover .lb-go { transform: translateX(-3px); } }
.lb-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-lb.is-pack .lb-pill { color: var(--ink); background: rgba(255,255,255,.62); border-color: rgba(17,17,17,.08); }
.hero-lb.is-pack .lb-go { background: var(--ink); color: #fff; }
.hero-lb.is-pack .lb-pill:focus-visible { outline-color: var(--ink); }
.lb-pill.swap .lb-kind, .lb-pill.swap .lb-row b, .lb-pill.swap .lb-price { animation: lbText .6s var(--ease) both; }
.lb-pill.swap .lb-row b { animation-delay: .06s; }
.lb-pill.swap .lb-price { animation-delay: .12s; }
@keyframes lbText { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* words and buttons under the stage */
.hero-lb .hero-copy { margin-top: 22px; max-width: 40ch; }
.hero-lb .hero-cta { margin-top: 18px; }

/* thumbnails: jump to any piece */
.lb-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 24px calc(var(--gutter) * -1) 0; padding: 5px var(--gutter); scroll-padding-inline: var(--gutter); }
.lb-strip::-webkit-scrollbar { display: none; }
.lb-thumb { flex: none; width: 54px; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--card);
  opacity: .5; transition: opacity .3s, transform .3s var(--ease), box-shadow .3s; }
.lb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.lb-thumb img.pack { object-fit: contain; padding: 10%; background: #fff; }
.lb-thumb[aria-current="true"] { opacity: 1; transform: translateY(-2px); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
@media (hover: hover) { .lb-thumb:hover { opacity: 1; } }
.lb-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* reduced motion: no zoom, no wipe, no auto play (the pause button becomes a play button) */
@media (prefers-reduced-motion: reduce) {
  .lb-slide.on img, .lb-slide.in-next, .lb-slide.in-prev, .lb-slide.out, .lb-pill.swap .lb-kind, .lb-pill.swap .lb-row b, .lb-pill.swap .lb-price { animation: none; }
  .lb-slide.out { visibility: hidden; }
}

/* desktop: words on the left, the stage as a tall card on the right */
@media (min-width: 720px) {
  .hero.hero-lb { padding-top: 44px; padding-bottom: 56px; }
  .hero-lb .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 540px); grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 5vw, 72px); align-items: start; }
  .lb-visual { display: contents; }
  .hero-lb h1 { position: static; grid-column: 1; grid-row: 1; align-self: end; margin: 6vh 0 0; color: var(--ink); text-shadow: none;
    font-size: clamp(60px, 7.2vw, 108px); line-height: .92; }
  .hero-lb h1 .line2 { padding-inline-start: 3.5rem; }
  .hero-lb h1.split::after { background: var(--gilt); }
  .lb-stage { grid-column: 2; grid-row: 1 / span 3; height: auto; min-height: 0; aspect-ratio: 4 / 5; border-radius: 28px;
    box-shadow: 0 30px 70px rgba(43,37,34,.2); }
  .hero-lb .hero-copy { grid-column: 1; grid-row: 2; margin-top: 22px; max-width: 46ch; }
  .lb-strip { grid-column: 1; grid-row: 3; align-self: end; flex-wrap: wrap; overflow: visible; margin: 32px 0 0; padding: 5px 4px; }
  .lb-thumb { width: 62px; }
  .lb-pill { inset-inline: 16px; bottom: 16px; }
}

/* the policy links under the social icons, and the Refund / Terms and Conditions / Privacy Policy pages (2026-11-02) */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 2px; font-size: 13px; }
.legal-links a { padding: 4px 12px; color: rgba(17,17,17,.72); line-height: 1.3; }
.legal-links a + a { border-inline-start: 1px solid rgba(17,17,17,.22); }
@media (hover: hover) { .legal-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.legal-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.policy { padding-bottom: 36px; }
.policy-date { margin-top: 2px; }
.policy-sec { margin-top: 28px; }
.policy-sec h2 { font-size: 26px; margin: 0 0 8px; }
.policy-sec p { margin: 8px 0; line-height: 1.65; }
.policy-link { text-decoration: underline; text-underline-offset: 3px; }

/* in Arabic the product names are Arabic too (i18n.js), so they take the shop's Arabic font (Tajawal) at a medium
   weight, like the small group line under them (the user, 2026-11-02: "use this font for these titles"). The template kept
   the English serif for names, which has no Arabic letters, so a heavy system font showed instead. */
html[lang="ar"] .card-name, html[lang="ar"] .line-name, html[lang="ar"] .pdp-title h1,
html[lang="ar"] #heroName, html[lang="ar"] .lb-row b, html[lang="ar"] .pick-row b { font-family: var(--ui); font-weight: 500; letter-spacing: 0; }
html[lang="ar"] .pdp-title h1 { font-size: 30px; line-height: 1.3; }
html[lang="ar"] .card-name, html[lang="ar"] .line-name { font-size: 17px; line-height: 1.35; }
html[lang="ar"] .lb-row b { font-size: 20px; line-height: 1.3; }

/* the customer's receipt (Staff > Receipt, and the order email's receipt link), 2026-11-02: black on white only.
   One full A4 page (the user: "make it filled and completed as an A4"): a column as tall as the page inside its margins,
   the thank-you, QR and contacts pinned to the bottom. 266 mm fits both the print (@page 14 mm) and the PDF (14 mm). */
#printArea .rcpt { page: rcpt; box-sizing: border-box; display: flex; flex-direction: column; min-height: 266mm; max-width: 720px; margin: 0 auto;
  font-family: "Tajawal", Tahoma, Arial, sans-serif; color: #000; font-size: 11pt; line-height: 1.55; }
#printArea .rc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 2.5px solid #000; }
#printArea .rc-shop { display: flex; align-items: center; gap: 14px; }
#printArea .rc-shop img { width: 66px; height: 66px; object-fit: contain; filter: grayscale(1); }
#printArea .rc-shop div, #printArea .rc-title { display: grid; }
#printArea .rc-shop b { font-size: 19pt; }
#printArea .rc-title { text-align: left; }
#printArea .rc-title h1 { margin: 0; font-family: "Tajawal", Tahoma, Arial, sans-serif; font-size: 26pt; font-weight: 700; line-height: 1.3; }
#printArea .rc-title span { font-size: 10pt; color: #222; }
/* the four facts of the order in one ruled strip */
#printArea .rc-strip { display: grid; grid-template-columns: 1.5fr 1fr 1fr .7fr; margin: 16px 0 0; border: 1px solid #000; border-radius: 4px; }
#printArea .rc-strip > div { display: grid; gap: 1px; padding: 8px 12px; }
#printArea .rc-strip > div + div { border-right: 1px solid #000; }
#printArea .rc-strip span { font-size: 8.5pt; font-weight: 700; color: #333; }
#printArea .rc-strip b { font-size: 10.5pt; font-weight: 500; }
#printArea .rc-parties { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin: 14px 0 18px; }
#printArea .rc-parties > div { display: grid; align-content: start; gap: 2px; border: 1px solid #000; border-radius: 4px; padding: 10px 14px 12px; }
#printArea .rc-parties h3 { margin: 0 0 4px; padding-bottom: 5px; border-bottom: 1px solid #cfcfcf; font-family: inherit; font-size: 9pt; font-weight: 700; color: #222; }
#printArea .rc-big { font-size: 13pt; }
#printArea .rc-sub { display: block; font-size: 9pt; color: #333; }
#printArea .rc-items, #printArea .rc-sums { width: 100%; border-collapse: collapse; }
#printArea .rc-items th { padding: 7px 6px; background: none; border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; font-size: 9pt; font-weight: 700; text-align: right; }
#printArea .rc-items td { padding: 7px 6px; border-bottom: 1px solid #bdbdbd; vertical-align: top; }
#printArea .rc-unit { font-size: 9pt; color: #333; }
#printArea .rcpt .n { width: 92px; text-align: left; white-space: nowrap; }
#printArea .rcpt .no { width: 26px; text-align: center; color: #333; }
/* the money: the sums on the left, under the price columns (the paid box was removed, user 2026-11-02) */
#printArea .rc-money { display: flex; justify-content: flex-end; margin-top: 14px; }
#printArea .rc-sums { width: 48%; }
#printArea .rc-sums td { padding: 4px 6px; }
#printArea .rc-total td { padding-top: 9px; border-top: 2px solid #000; font-size: 13pt; font-weight: 700; }
#printArea .rc-giftnote { margin: 12px 0 0; font-size: 9.5pt; color: #333; }
#printArea .rc-fill { flex: 1 1 auto; min-height: 18px; }
/* the foot of the page: thank-you and QR, then the contacts */
#printArea .rc-foot { display: grid; gap: 0; padding-top: 14px; border-top: 2.5px solid #000; }
#printArea .rc-end { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#printArea .rc-thanks { display: grid; gap: 2px; }
#printArea .rc-thanks b { font-size: 14pt; }
#printArea .rc-thanks span { font-size: 10pt; color: #222; }
#printArea .rc-qr { display: grid; justify-items: center; gap: 3px; }
#printArea .rc-qr img { width: 84px; height: 84px; image-rendering: pixelated; }
#printArea .rc-qr span { font-size: 8.5pt; font-weight: 700; }
/* (2026-11-02) the shop's contacts: icon + text, thin black dividers between them */
#printArea .rc-contact { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; row-gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #cfcfcf; }
#printArea .rc-ct { display: inline-flex; direction: ltr; align-items: center; gap: 7px; padding: 0 16px; font-size: 10pt; font-weight: 500; line-height: 1.2; color: #000; }
#printArea .rc-ct + .rc-ct { border-right: 1px solid #000; }   /* the row runs right to left: the divider is on each next item's right */
#printArea .rc-ct svg { display: block; flex: none; }
@media print { @page { margin: 14mm 12mm; } }
/* the receipt always prints on A4 (a Letter printer would push its foot to a second page) */
@page rcpt { size: A4; margin: 14mm 12mm; }
/* receipt.html (the receipt link in the owner's order email): a white A4 sheet under a small bar; only the sheet prints */
.rc-page { margin: 0; min-height: 100vh; background: #EFEFED; }
.rc-page [hidden] { display: none !important; }
/* the PDF library (html2canvas) finds each font's baseline with a hidden div of a word and a 1 px picture on the page; the
   shop's "img { display: block }" moved that picture under the line, and every line of the PDF came out ~8 px low */
.rc-page > div[style*="visibility: hidden"] > img { display: inline; }
.rc-page .rc-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
  background: #fff; border-bottom: 1px solid #ddd; font-family: "Tajawal", Tahoma, Arial, sans-serif; font-size: 15px; color: #111; }
.rc-page #rcState.ok { font-weight: 700; }
.rc-page #rcState.err { font-weight: 700; color: #9B1C1C; }
.rc-page .rc-actions { display: flex; gap: 8px; }
.rc-page .rc-sheet { box-sizing: border-box; width: 794px; margin: 16px auto 32px; padding: 45px; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .12); }
@media print {
  .rc-page { background: #fff; }
  .rc-page .rc-bar { display: none; }
  .rc-page .rc-sheet { width: auto; margin: 0; padding: 0; box-shadow: none; zoom: 1 !important; }
}


/* =========================================================
   Staff in the shop's own look (2026-11-02, the user: "make the staff panel theme match the real website theme").
   Every shop: black buttons as on the shop, the accent colour (--gilt) only for small marks (the New count, the top line of
   the sales boxes, the chart bars), English panel titles in the shop's serif, Arabic titles in Tajawal. A dark-header shop
   keeps Staff's dark bar; a light-header shop gets the shop's light bar with the black logo on top (and on the phone's
   bottom bar), a white page warmed by the header colour, and its warm tints in place of Staff's cool greys.
   ========================================================= */
.staff-body .kpi { border-top-color: var(--gilt); }
.staff-body .chart rect, .staff-body .chart.only-narrow rect { fill: var(--gilt); }
.staff-body .chart text.val { fill: color-mix(in srgb, var(--gilt) 70%, #000); }
.staff-body .bar i { background: var(--gilt); }
.staff-top .pill { background: var(--gilt); color: #fff; }
html:not([lang="ar"]) .staff-body .panel h2, html:not([lang="ar"]) .staff-login h1 { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
html[lang="ar"] .staff-body .panel h2 { font-weight: 700; }
[data-head="light"] .staff-body { --staff-bg: color-mix(in srgb, var(--head) 20%, #fff); --line: var(--mist); --viz-1-soft: var(--card); background: var(--staff-bg); }
[data-head="light"] .staff-top { background: var(--head); border-bottom-color: var(--head-line); color: var(--ink); box-shadow: 0 1px 0 var(--head-line); }
[data-head="light"] .staff-top .staff-tag { border-color: rgba(17,17,17,.55); color: var(--ink); }
[data-head="light"] .staff-top .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(17,17,17,.55); }
[data-head="light"] .staff-top .btn-ghost:hover, [data-head="light"] .staff-top .btn-ghost:focus-visible { background: rgba(17,17,17,.06); border-color: var(--ink); color: var(--ink); }
[data-head="light"] .staff-top .staff-tabs button { color: rgba(17,17,17,.6); }
[data-head="light"] .staff-top .staff-tabs button:hover { color: var(--ink); }
[data-head="light"] .staff-top .staff-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
[data-head="light"] .staff-top :focus-visible { outline-color: var(--ink); }
@media (max-width: 719px) {
  [data-head="light"] .staff-tabs { background: var(--head); border-top: 1px solid var(--head-line); }
  [data-head="light"] .staff-top .staff-tabs button { color: rgba(17,17,17,.5); }
  [data-head="light"] .staff-top .staff-tabs button.on { color: var(--ink); }
}
@media (hover: hover) and (pointer: fine) {
  [data-head="light"] .staff-body .staff-top .btn-ghost:not(:disabled):hover { background: rgba(17,17,17,.06); border-color: var(--ink); }
  [data-head="light"] .staff-body .staff-top .staff-tabs button:not(.on):hover { color: var(--ink); border-bottom-color: rgba(17,17,17,.3); }
  [data-head="light"] .staff-body :is(.ord, .ctk, .pcard):hover { border-block-color: color-mix(in srgb, var(--head), #000 8%); border-inline-end-color: color-mix(in srgb, var(--head), #000 8%); }
  [data-head="light"] .staff-body .export-group button:hover { background: color-mix(in srgb, var(--head) 45%, #fff); }
}
/* a light-header shop: Staff's cool greys warmed by the header colour (same jobs, same strength) */
[data-head="light"] .staff-body .ord-tabs { background: color-mix(in srgb, var(--head) 55%, #fff); }
[data-head="light"] .staff-body :is(.ord-search button, .cpn-type, .cpn-more summary::before, .ctk-bar, .dlv-step button:active) { background: color-mix(in srgb, var(--head) 45%, #fff); }
[data-head="light"] .staff-body :is(.drv-items li) { border-top-color: var(--mist); }
[data-head="light"] .staff-body .drv-card { border-color: var(--mist); }
[data-head="light"] .staff-body .wa-setup code { background: color-mix(in srgb, var(--head) 45%, #fff); }
[data-head="light"] .staff-body .kw-map { background: color-mix(in srgb, var(--head) 20%, #fff); }
[data-head="light"] .staff-body .kw-gov { fill: color-mix(in srgb, var(--head) 65%, #fff); }
[data-head="light"] .staff-body .ctk-switch:not([aria-checked="true"]) .knob { background: color-mix(in srgb, var(--head), #000 8%); }   /* off only: on stays green (red for Pause) */

/* (2026-11-02, the user) Staff for the owner is simple. Hidden for the owner, shown in setup mode (staff.html#setup, for
   Control Z; staff.js SETUP): the setup cards (Riders or Your delivery, Payment, Order alerts), the extra delivery settings
   (what customers see, Pause orders, the ASAP choice, days to choose from, earliest day, preparation time, minimum order,
   closed days and dates; their saved values still apply and are kept when the owner saves), and the test notes. Always
   hidden: the "Updated / Sound / Refresh" line (the sound is always on, Staff reads new orders by itself) and the small
   notes under the Delivery titles. The cards are always drawn, so the code that reads them keeps working. */
.staff-body:not(.setup-mode) .setup-cards { display: none !important; }
.staff-body:not(.setup-mode) .dlv-extra { display: none !important; }
@media (min-width: 720px) { .staff-body:not(.setup-mode) .dlv > .dlv-card:first-of-type { grid-column: 1 / -1; } }
.staff-body .staff-bar { display: none !important; }
.staff-body .dlv .dlv-title .muted { display: none !important; }
.staff-body .dlv .dlv-title { align-items: center; }
.staff-body:not(.setup-mode) :is(.setup-banner.test-mode, .setup-banner.test, .ov-chip.test) { display: none !important; }
.staff-body:not(.setup-mode) .ov-apart:not(:has(> :not(.ov-chip.test))) { display: none; }   /* nothing else in the row: no empty gap */
.staff-body .setup-flag { margin-top: 12px; }
.staff-body .setup-flag a { font-weight: 600; margin-inline-start: 6px; }
/* (2026-11-02, the user: "fix this") the phone's bottom bar: however many tabs there are, they share the whole width */
@media (max-width: 719px) {
  .staff-body .staff-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
/* (2026-11-02, the user) three order tabs (New, Delivered, Cancelled): no "Waiting for payment" */
.staff-body .ord-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 720px) { .staff-body .ord-tabs { grid-template-columns: repeat(3, auto); } }
/* (2026-11-02, the user: "make this very simple") Coupons: a code, a discount (% or KD) and Create. Hidden: the three
   counts, the Random button, the optional limits (min order, expiry, max uses), the preview ticket, the hint under the
   button, and on each coupon the min-order / expiry line and "Unlimited". New coupons have no limits; a wrong code
   still gets its message when Create is pressed. */
.staff-body :is(.cpn-stats, #cRandom, .cpn-more, .cpn-preview, .cc-save .muted, .ctk-meta, .ctk-use .muted) { display: none !important; }
.staff-body .cpn-grid { grid-template-columns: 1fr !important; }
/* (2026-11-02) Staff > Products: the products under their departments. A department's head: its name, how many products,
   Edit and up / down (a product moves with Edit > Department). The department window: two names and the photo kind. */
.staff-body .dept { margin-top: 18px; }
.staff-body .dept-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.staff-body .dept-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.staff-body .dept-name h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
html:not([lang="ar"]) .staff-body .dept-name h3 { font-family: var(--display); font-size: 22px; font-weight: 600; }
.staff-body .dept-count { flex: none; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; text-align: center; }
.staff-body .dept-tools { display: flex; gap: 6px; flex: none; }
.staff-body .dept-tools .btn { min-width: 40px; }
.staff-body .dept-empty { margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; background: #fff; }
.staff-body #dAdd { white-space: nowrap; }
.staff-body .dept-form { max-width: 480px; }
.staff-body .dept-form .field input { width: 100%; }
/* =========================================================
   SHOP THEME (2026-10-31): the brand colours and fonts, and the SELESAO page layout (header with the centred name and a
   round menu button, slideshow home, chips and 2-column cards, swipe gallery with option chips). Colours from BRAND.md:
   Royal Blue buttons and links, Fresh Aqua accents, Deep Navy header / footer / bar / text, white cards, Mist page and
   photo background (the product photos are shot on the same Mist, so a photo never sits in a box of another colour).
   ========================================================= */
:root {
  --blue: #0041CD; --aqua: #02D2E1; --navy: #071B4D; --mistbg: #EAF6FB;
  --porcelain: #EAF6FB; --ink: #071B4D; --oud: #0041CD; --gilt: #02D2E1; --mist: #D3E5EE; --card: #EAF6FB; --muted: #586A86;
  --display: "Outfit", "Segoe UI", Arial, sans-serif; --ui: "Outfit", "Segoe UI", Arial, sans-serif;
  --radius: 16px; --radius-sm: 12px; --header-h: 64px; --bottomnav-h: 62px;
  --shadow: 0 10px 30px rgba(7,27,77,.10);
  --ease: cubic-bezier(.22, .8, .24, 1);
}
html[lang="ar"] { --ui: "Readex Pro", "Segoe UI", Tahoma, Arial, sans-serif; --display: "Readex Pro", "Segoe UI", Tahoma, Arial, sans-serif; }
html[lang="ar"] .card-name, html[lang="ar"] .line-name, html[lang="ar"] .pdp-title h1, html[lang="ar"] .hero-tag b, html[lang="ar"] #heroName { font-family: var(--display); }
body:not(.staff-body) { background: var(--mistbg); color: var(--navy); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.3; }
::selection { background: var(--aqua); color: var(--navy); }
.btn { background: var(--blue); border-color: var(--blue); color: #fff; border-radius: 999px; font-weight: 600; min-height: 48px; padding: 0 24px; }
.btn:hover { background: #0037AE; border-color: #0037AE; }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--mist); }
.btn-ghost:hover { background: #fff; border-color: var(--navy); }
.btn-light { background: #fff; color: var(--navy); border-color: #fff; }
.btn-light:hover { background: var(--aqua); border-color: var(--aqua); color: var(--navy); }
.btn:disabled { opacity: .4; }
.input, .field input, .field select, .field textarea { border-radius: 12px; }
.section-head a { color: var(--blue); }
.muted { color: var(--muted); }
/* a closed sheet is out of sight and cannot be reached with the keyboard */
.sheet { visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.sheet.open { visibility: visible; transition: transform .25s ease; }
.acc[hidden], .gal-nav[hidden], .opt-groups:empty, #aboutProof[hidden] { display: none; }

/* ---- header: the logo at the left, the name in the middle, search and the round menu button ---- */
.site-header { background: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.header-inner { position: relative; gap: 4px; }
.site-header .logo { margin-inline-end: auto; }
.site-header .logo img { height: 36px; width: auto; }
.brand-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
html[lang="ar"] .brand-name { font-size: 22px; letter-spacing: 0; }
.site-header .icon-btn { color: #fff; }
.cart-count { background: var(--aqua); color: var(--navy); }
.menu-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; display: inline-grid; place-content: center; gap: 4px; margin-inline-start: 4px; position: relative; z-index: 2; transition: background .2s, border-color .2s; }
.menu-btn i { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: #fff; transition: transform .35s var(--ease), opacity .2s; }
.menu-open .menu-btn { background: var(--aqua); border-color: var(--aqua); }
.menu-open .menu-btn i { background: var(--navy); }
.menu-open .menu-btn i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.menu-open .menu-btn i:nth-child(2) { opacity: 0; }
.menu-open .menu-btn i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
body.menu-open .site-header { z-index: 56; }
.site-menu { position: fixed; inset: 0; z-index: 55; background: var(--navy); color: #fff; overflow-y: auto; padding-top: calc(var(--header-h) + 64px); padding-bottom: 110px;
  clip-path: circle(0 at var(--mx, 92%) var(--my, 32px)); visibility: hidden; transition: clip-path .6s var(--ease), visibility 0s linear .6s; }
.menu-open .site-menu { clip-path: circle(150vmax at var(--mx, 92%) var(--my, 32px)); visibility: visible; transition: clip-path .6s var(--ease), visibility 0s; }
.site-menu-inner { display: grid; gap: 30px; }
.sm-links { display: grid; gap: 4px; }
.sm-links a { font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.25; color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s var(--ease), color .2s; }
.sm-links a[aria-current="page"], .sm-links a:hover { color: var(--aqua); }
.menu-open .sm-links a { opacity: 1; transform: none; }
.menu-open .sm-links a:nth-child(2) { transition-delay: .05s; } .menu-open .sm-links a:nth-child(3) { transition-delay: .1s; } .menu-open .sm-links a:nth-child(4) { transition-delay: .15s; }
.sm-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-groups a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 15px; }
.sm-groups a:hover { background: rgba(255,255,255,.16); }
.sm-groups i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sm-lang { justify-self: start; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; font-size: 15px; font-family: "Readex Pro", "Outfit", sans-serif; }
.sm-lang:hover { background: #fff; color: var(--navy); }
.pause-bar { background: var(--aqua); color: var(--navy); }

/* ---- bottom bar: Home, Shop, Bag on every page (phones: full width; computers: a small centred bar) ---- */
.bottom-nav { background: var(--navy); box-shadow: 0 -6px 24px rgba(7,27,77,.12); }
.bottom-nav a { color: rgba(255,255,255,.6); font-size: 11.5px; transition: color .2s; }
.bottom-nav a[aria-current="page"] { color: #fff; }
.bottom-nav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 3px 3px; background: var(--aqua); }

/* ---- home: two-line heading, the big slideshow, the sliding strip, then a row per category ---- */
.hero { padding-top: 22px; overflow: visible; }
.hero-h { font-size: clamp(36px, 10.6vw, 60px); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; color: var(--navy); animation: heroIn .9s var(--ease) both; }
.hero .hero-h .line2 { display: block; color: var(--blue); padding-inline-start: 0; font-style: normal; }
.hero-h::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 3px; background: var(--aqua); margin-top: 14px; margin-inline-start: auto; }
html[lang="ar"] .hero-h { font-size: clamp(34px, 10vw, 58px); line-height: 1.3; letter-spacing: 0; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-show { position: relative; margin: 18px calc(var(--gutter) * -1) 0; aspect-ratio: 4 / 5; max-height: 72vh; overflow: hidden; background: var(--mistbg); }
.show-track { position: absolute; inset: 0; }
.show-slide { position: absolute; inset: 0; display: block; opacity: 0; transform: scale(1.04); transition: opacity .9s ease, transform 1.6s var(--ease); }
.show-slide.on { opacity: 1; transform: none; z-index: 1; }
.show-slide img, .show-slide video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.show-slide.is-video video { object-position: 50% 42%; }
.show-tag { position: absolute; left: 14px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--navy); font-size: 13.5px; font-weight: 600; box-shadow: 0 6px 18px rgba(7,27,77,.12); }
html[dir="rtl"] .show-tag { left: auto; right: 14px; }
.show-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show-tag i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.show-dots { position: absolute; z-index: 3; right: 14px; top: 14px; display: flex; gap: 5px; direction: ltr; }
.show-dots button { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(7,27,77,.18); transition: background .3s, width .3s; position: relative; }
.show-dots button::after { content: ""; position: absolute; inset: -12px -2px; }
.show-dots button.on { width: 34px; background: var(--blue); }
.hero-copy { margin-top: 16px; max-width: none; }
.hero-sub { color: var(--muted); font-size: 15.5px; margin: 0 0 14px; }
.strip { overflow: hidden; margin: 0 calc(var(--gutter) * -1); padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.strip-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
html[dir="rtl"] .strip-track { animation-name: marqueeR; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marqueeR { to { transform: translateX(50%); } }
.strip-set { display: flex; gap: 10px; padding-inline-end: 10px; }
.strip-pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid rgba(7,27,77,.08); color: var(--navy); font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 12px rgba(7,27,77,.05); }
html[dir="rtl"] .strip-pill { padding: 5px 5px 5px 16px; }
.strip-img { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--mistbg); box-shadow: inset 0 0 0 2px var(--acc); flex: none; }
.strip-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transform-origin: 50% 58%; }
.hero-cta { margin-top: 18px; }
.hero-cta .btn { flex: 1; }
.value-row { border-top: 0; background: #fff; border-radius: 20px; padding: 18px 12px; margin-top: 26px; box-shadow: 0 6px 20px rgba(7,27,77,.05); }
.value-row div { color: var(--navy); font-size: 12px; }
.value-row svg { width: 26px; height: 26px; stroke: var(--blue); stroke-width: 1.5; }
.home-cat { padding-top: 34px; padding-bottom: 6px; }
.section-head h2 { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; }
.cat-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.brand-band { margin-top: 40px; background: var(--navy); color: #fff; padding: 44px 0; text-align: center; position: relative; overflow: hidden; }
.brand-band::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(2,210,225,.22), transparent 65%); top: -210px; right: -140px; pointer-events: none; }
.brand-band h2 { color: #fff; font-size: 30px; }
.brand-band p { color: rgba(255,255,255,.75); margin: 10px auto 18px; max-width: 34ch; }
.brand-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.brand-list span { padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-weight: 600; letter-spacing: .04em; font-size: 14px; }
.brand-list.light span { background: var(--mistbg); color: var(--navy); }

/* ---- reveal on scroll ---- */
[data-rv] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s var(--ease); }
[data-rv].rv-in { opacity: 1; transform: none; }

/* ---- product card: white card, the photo on Mist, a line in the category colour, name, options, price, round bag button ---- */
.grid { gap: 12px; }
.card { background: #fff; border-radius: 18px; overflow: hidden; gap: 0; border: 2px solid #C9DBF3; box-shadow: 0 4px 16px rgba(7,27,77,.06); transition: transform .35s var(--ease), box-shadow .35s, border-color .25s; }
/* owner 2026-11-02: every product card has a clear border, blue on hover */
.card:hover, .card:focus-within { border-color: var(--blue, #0041CD); }
.card-media { aspect-ratio: 3 / 4; border: 0; border-radius: 0; background: var(--mistbg); border-bottom: 3px solid var(--acc, var(--aqua)); }
.card-media img { object-fit: cover; }
.card.is-out .card-media img { opacity: .55; }
.card-body { padding: 10px 12px 12px; gap: 2px; align-content: start; }
.card-name { font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-meta { font-size: 12.5px; color: var(--muted); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.card-foot .price { font-size: 14.5px; margin: 0; min-width: 0; }
.soon { display: inline-block; color: var(--blue); font-weight: 600; font-size: 13px; }
.card-add, .card-go { flex: none; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; border: 0; display: inline-grid; place-items: center; background: var(--blue); color: #fff; transition: transform .2s, background .2s; }
.card-add svg, .card-go svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.card-go { background: var(--mistbg); color: var(--blue); }
html[dir="rtl"] .card-go svg { transform: scaleX(-1); }
.card-add.is-off { background: #C9D5DF; }
.card-add:active, .card-go:active { transform: scale(.92); }
.badge { background: var(--navy); top: 10px; inset-inline-start: 10px; }
.badge.soldout { background: #6E7F96; }
.slider { gap: 12px; padding-bottom: 14px; }
.slider .card { flex: 0 0 46%; }

/* ---- shop page ---- */
.crumbs { gap: 6px; font-size: 13px; padding-top: 16px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.crumbs span:last-child:not(:first-child) { color: var(--navy); }
.shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 10px 0 14px; }
.shop-title { min-width: 0; }
.shop-title h1 { font-size: 30px; line-height: 1.15; }
.shop-count { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.sort-pill { flex: none; min-height: 40px; max-width: 48%; padding: 0 34px 0 14px; border-radius: 999px; border: 1px solid var(--mist); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071B4D' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; color: var(--navy); font-size: 14px; -webkit-appearance: none; appearance: none; }
html[dir="rtl"] .sort-pill { padding: 0 14px 0 34px; background-position: left 12px center; }
.shop-chips { margin-bottom: 18px; }
.chip { min-height: 40px; border-color: rgba(7,27,77,.1); color: var(--navy); font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.more-row { text-align: center; padding: 24px 0 8px; }

/* ---- product page: back button, swipe gallery with arrows and dots, option chips ---- */
.pdp-top { display: flex; align-items: center; gap: 12px; padding-top: 12px; }
.pdp-top .crumbs { padding: 0; min-width: 0; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.back-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--mist); color: var(--navy); font-size: 14px; font-weight: 500; }
html[dir="rtl"] .back-btn { padding: 0 8px 0 14px; }
.back-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
html[dir="rtl"] .back-btn svg { transform: scaleX(-1); }
.pdp { margin-top: 12px; }
.gallery { background: var(--mistbg); }
.gallery-track > div { aspect-ratio: 3 / 4; }
.gallery-track img { object-fit: cover; }
.gal-nav { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--navy); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(7,27,77,.12); }
.gal-nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.gal-nav.prev { left: 10px; } .gal-nav.next { right: 10px; }
.dots span { width: 6px; height: 6px; background: rgba(7,27,77,.2); transition: width .3s, background .3s; }
.dots span.on { width: 18px; border-radius: 4px; background: var(--navy); }
.pdp-title { padding-top: 18px; }
.pdp-cat { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 5px 12px; border-radius: 999px; background: #fff; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.pdp-cat i { width: 8px; height: 8px; border-radius: 50%; }
.pdp-title h1 { font-size: 27px; line-height: 1.2; font-weight: 600; color: var(--navy); }
#pFamily { font-size: 15px; color: var(--blue); font-weight: 500; }
.pdp-price { font-size: 22px; margin: 12px 0 2px; }
.pdp-price .soon { font-size: 15px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(0,65,205,.2); }
.pdp-short { color: var(--muted); margin: 10px 0 0; }
.opt-groups { display: grid; gap: 16px; margin: 18px 0 6px; }
.opt-group h3 { font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
html[lang="ar"] .opt-group h3 { text-transform: none; letter-spacing: 0; font-size: 14px; }
.opt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(7,27,77,.12); background: #fff; color: var(--navy); font-size: 14.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: border-color .2s, background .2s, color .2s, transform .15s; }
.opt-chip:active { transform: scale(.96); }
.opt-chip.has-thumb { padding-inline-start: 4px; }
.opt-thumb { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--mistbg); flex: none; }
.opt-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transform-origin: 50% 60%; }
.opt-chip[aria-checked="true"] { border-color: var(--blue); background: rgba(0,65,205,.06); color: var(--blue); font-weight: 600; box-shadow: 0 0 0 1px var(--blue) inset; }
.opt-chip.is-out { color: var(--muted); }
.opt-chip.is-out > span:last-child { text-decoration: line-through; }
.stock { margin-top: 12px; }
.qty { border-radius: 999px; border-color: rgba(7,27,77,.12); }
.trust { background: #fff; border-radius: 18px; }
.trust svg { stroke: var(--blue); }
.pdp-acc { margin-top: 18px; }
details.acc { border-color: rgba(7,27,77,.1); }
details.acc summary { font-weight: 600; color: var(--navy); }
details.acc .acc-body { line-height: 1.6; }
.sticky-buy { background: rgba(255,255,255,.97); }
.sticky-info { display: grid; gap: 0; min-width: 0; max-width: 44%; }
.sticky-info .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-info .price { font-size: 15px; margin: 0; }

/* ---- bag, checkout, confirmation ---- */
.line .thumb, .search-results a .thumb, .pick-row .thumb { background: var(--mistbg); }
.line .thumb img, .search-results .thumb img { object-fit: cover; }
.line-name { font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.3; }
.line-opt { color: var(--blue); }
.cart-cta { background: var(--mistbg); }
.checkout-summary { background: #fff; border-radius: 18px; }
.when-chip { border-color: rgba(7,27,77,.15); color: var(--navy); border-radius: 12px; }
.when-chip[aria-checked="true"] { background: var(--navy); border-color: var(--navy); }
.search-results a { background: var(--mistbg); }
.toast { background: var(--navy); }

/* ---- help page ---- */
.help { max-width: 760px; }
.help-title { margin: 24px 0 8px; font-size: 34px; }
.help-sec { padding-top: 26px; padding-bottom: 0; }
.help-sec h2 { font-size: 22px; margin-bottom: 10px; }
.about-block { margin-top: 36px; padding: 32px 20px; background: #fff; border-radius: 24px; text-align: center; display: grid; justify-items: center; }
.about-block img { width: 64px; height: auto; margin-bottom: 14px; }
.about-block h2 { font-size: 24px; max-width: 22ch; }
.about-ar { font-family: "Readex Pro", sans-serif; font-size: 18px; color: var(--blue); margin: 8px 0 12px; }
html[lang="ar"] .about-ar { display: none; }
.about-block #aboutBody { color: var(--muted); max-width: 46ch; }
.follow-title { margin: 18px 0 10px; font-weight: 600; color: var(--navy); }
.about-block .brand-list { margin-bottom: 0; }
.follow-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.follow-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--mist); color: var(--navy); font-weight: 500; font-size: 14px; }
.follow-btn svg { width: 20px; height: 20px; }
.follow-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ---- footer: dark, the logo and name, round social buttons, Powered by Control Z ---- */
.site-footer { margin-top: 48px; background: var(--navy); color: rgba(255,255,255,.7); border-top: 0; padding-top: 36px; padding-bottom: 28px; }
body[data-page="home"] .site-footer { margin-top: 0; border-top: 1px solid rgba(255,255,255,.08); }
.site-footer .footer-cols { gap: 18px; }
.site-footer .footer-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.footer-logo img { height: 44px; width: auto; }
.site-footer .social { gap: 12px; margin: 0; }
.site-footer .social a { width: 46px; height: 46px; background: transparent; border: 1px solid rgba(255,255,255,.3); box-shadow: none; color: #fff; transition: background .2s, border-color .2s, transform .2s; }
.site-footer .social a:hover { background: var(--aqua); border-color: var(--aqua); color: var(--navy); transform: translateY(-2px); }
.site-footer .social svg { width: 21px; height: 21px; }
.site-footer .social .sc svg path { fill: currentColor; stroke: none; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 14px; }
.footer-links a { color: rgba(255,255,255,.8); min-height: 32px; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--aqua); }
.footer-copy { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.55); }
.powered { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); font-size: 12.5px; }
.powered b { color: #fff; font-weight: 600; }
.powered:hover { background: rgba(255,255,255,.12); }

/* ---- tablet and computer ---- */
@media (min-width: 720px) {
  :root { --header-h: 76px; }
  .site-header .logo img { height: 44px; }
  .brand-name { font-size: 30px; }
  .desktop-nav { margin: 0 6px 0 auto; gap: 22px; }
  .site-header .logo { margin-inline-end: 0; }
  .desktop-nav a { color: rgba(255,255,255,.8); }
  .desktop-nav a[aria-current="page"] { border-bottom-color: var(--aqua); }
  .sm-links a { font-size: 52px; }
  .site-menu-inner { max-width: 760px; }
  /* the bottom bar stays on computers too, as a small bar in the middle */
  .bottom-nav { display: grid; left: 50%; right: auto; bottom: 18px; width: 300px; height: 58px; padding: 0 6px; transform: translateX(-50%); border-radius: 999px; box-shadow: 0 14px 40px rgba(7,27,77,.28); }
  .bottom-nav a { min-height: 0; }
  .bottom-nav a[aria-current="page"]::before { display: none; }
  .bottom-nav a[aria-current="page"] { color: var(--aqua); }
  .bottom-nav .cart-count { top: 4px; }
  .site-footer { padding-bottom: 100px; }
  .toast { bottom: 96px; }
  .sticky-buy { display: none; }
  .hero { padding-top: 48px; padding-bottom: 8px; }
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); grid-template-rows: auto 1fr; gap: 0 56px; align-items: start; }
  .hero-h { grid-column: 1; grid-row: 1; align-self: end; margin-top: 40px; font-size: clamp(54px, 6.4vw, 92px); }
  html[lang="ar"] .hero-h { font-size: clamp(50px, 5.8vw, 84px); }
  .hero-h::after { margin-inline-start: 0; width: 84px; margin-top: 22px; }
  .hero-show { grid-column: 2; grid-row: 1 / span 2; margin: 0; border-radius: 28px; max-height: none; box-shadow: 0 30px 70px rgba(7,27,77,.16); }
  .hero-copy { grid-column: 1; grid-row: 2; margin-top: 22px; min-width: 0; }
  .hero-sub { font-size: 18px; max-width: 40ch; }
  .strip { margin: 0; }
  .hero-cta .btn { flex: none; min-width: 160px; }
  .value-row { padding: 26px 24px; }
  .value-row div { font-size: 14px; }
  .section-head h2 { font-size: 30px; }
  .slider .card { flex-basis: 30%; }
  .grid { gap: 22px 18px; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(7,27,77,.10); }
  .card-name { font-size: 17px; }
  .card-body { padding: 14px 16px 16px; }
  .shop-title h1 { font-size: 40px; }
  .shop-head { margin: 18px 0 18px; }
  .chips { margin: 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
  .gallery { border-radius: 26px; }
  .pdp-title h1 { font-size: 38px; }
  .brand-band { padding: 72px 0; }
  .brand-band h2 { font-size: 44px; }
  .about-block { padding: 44px; }
}
@media (min-width: 1024px) {
  .slider .card { flex-basis: 23%; }
}
@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none; }
  [data-rv] { opacity: 1; transform: none; }
  .show-slide { transition: none; }
}

/* WhatsApp checkout (2026-11-02): the thank-you page's green "Send order on WhatsApp" button */
.btn.wa-send { background: #25D366; border-color: #25D366; color: #fff; }
.btn.wa-send:hover { background: #1EBE5A; border-color: #1EBE5A; }
.btn.wa-send[hidden] { display: none; }

/* owner 2026-11-02: the Refund / Terms / Privacy links on the navy footer were dark on dark: light like the other footer text */
.site-footer .legal-links a { color: rgba(255,255,255,.78); }
.site-footer .legal-links a + a { border-inline-start-color: rgba(255,255,255,.28); }
@media (hover: hover) { .site-footer .legal-links a:hover { color: #fff; } }
.site-footer .legal-links a:focus-visible { outline-color: #fff; }

/* owner 2026-11-02 ("when i choose a product pop up a window then the product come"): the page's own content stays hidden
   until the header and the page are drawn (app.js adds .hp-ready), so a half-built page with the big bag bar never flashes.
   If a script ever fails, it shows anyway after 4 s. */
body:not(.staff-body):not(.hp-ready) > main, body:not(.staff-body):not(.hp-ready) .sticky-buy { visibility: hidden; animation: hpShow 0s linear 4s forwards; }
@keyframes hpShow { to { visibility: visible; } }