/* =========================================================
   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: #2C2D2D;         /* text, primary buttons */
  --oud: #111111;         /* accent: links, focus (monochrome) */
  --gilt: #A3896C;        /* 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; }
/* (2026-11-04, from PiXiU; the user: "i want owner to add more than one image, and i want him to choose there order") the
   product's photos in order: 1 is the main photo (shop cards, first on the product page). Arrows move a photo, a mouse
   can also drag it; x removes it. */
.pf-photos { justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 719px) { .pf-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-ph { position: relative; margin: 0; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--photo, var(--card)); border: 1px solid var(--line); }
.pf-ph[draggable="true"] { cursor: grab; }
.pf-ph img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pf-ph.main { border: 2px solid var(--ink); }
.pf-ph.pf-none, .pf-ph.pf-wait { display: flex; align-items: center; justify-content: center; }
.pf-ph.pf-none { grid-column: 1 / -1; width: 140px; }
.pf-ph.pf-wait::after { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink); animation: pfspin .8s linear infinite; }
@keyframes pfspin { to { transform: rotate(360deg); } }
.ph-n { position: absolute; top: 6px; inset-inline-start: 6px; height: 22px; min-width: 22px; padding: 0 7px; border-radius: 999px; background: rgba(17, 13, 75, .78); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.pf-ph.main .ph-n { background: var(--ink); }
.pf-ph button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pf-ph button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pf-ph button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.pf-ph .ph-x { position: absolute; top: 5px; inset-inline-end: 5px; color: #B42318; }
.ph-mv { position: absolute; bottom: 6px; inset-inline: 6px; display: flex; justify-content: space-between; align-items: center; }
.ph-mv button[disabled] { visibility: hidden; }
.ph-main { align-self: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; }
html[dir="rtl"] .ph-mv svg { transform: scaleX(-1); }   /* earlier = toward photo 1, on the right in Arabic */
.pf-ph.dragging { opacity: .35; }
.pf-ph.drop { outline: 2px dashed var(--ink); outline-offset: 2px; }
.pf-upload.is-full { display: none; }
.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: 220px 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; }
  /* (2026-11-04, from PiXiU) inside a department card: the name over the full width, then the price with Edit and up / down on its right */
  .staff-body .dept .pcard { grid-template-columns: 64px 1fr auto; grid-template-areas: "thumb main main" "thumb price act"; gap: 8px 12px; }
  .staff-body .dept .pcard .pc-actions { display: flex; align-items: center; gap: 6px; }
  .staff-body .dept .pc-main > b { font-size: 17px; line-height: 1.2; }
}

/* 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-04, from PiXiU) Staff > Products: one card per department (the user: "make separation between brands look clear
   and professional and fix these, they look ugly"). A tinted head with an ink bar, the department's name and "N products", then its
   products as rows with a thin line between them. Edit and up / down are icon buttons of one colour and size. */
.staff-body .dept { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(17, 13, 75, .05); }
.staff-body .dept-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0;
  padding: 12px 14px 12px 20px; background: var(--staff-bg); border-bottom: 1px solid var(--line); }
html[dir="rtl"] .staff-body .dept-head { padding: 12px 20px 12px 14px; }
.staff-body .dept-head::before { content: ""; position: absolute; top: 12px; bottom: 12px; inset-inline-start: 0; width: 4px; border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--ink); }
.staff-body .dept-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.staff-body .dept-name h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.staff-body .dept-count { flex: none; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.staff-body .dept-tools { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }
.staff-body .dept .pcard { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 12px 20px; }
.staff-body .dept .pcard + .pcard { border-top: 1px solid var(--line); }
.staff-body .dept-empty { margin: 14px; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; background: var(--staff-bg); }
.staff-body #dAdd { white-space: nowrap; }
.staff-body .dept-form { max-width: 480px; }
.staff-body .pc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ic-edit { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ic-edit:hover { border-color: var(--ink); }
.ic-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ic-btn { width: 32px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.ic-btn:hover:not(:disabled) { background: var(--staff-bg); }
.ic-btn:disabled { opacity: .25; cursor: default; }
:is(.ic-btn, .ic-edit):focus-visible { outline: 2px solid var(--viz-1); outline-offset: 2px; }
:is(.ic-btn, .ic-edit) svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
  .staff-body .dept-head { flex-wrap: wrap; }
  .staff-body .dept .pcard { padding: 12px 14px; }
}
.staff-body .dept-form .field input { width: 100%; }

/* ---------- DOUBLE A theme (this shop only) ----------
   The logo is a long thin wordmark, so it is kept low. The product photos are square scenes with the bottle in the
   middle: cards and the gallery are square and the pictures fill them from the centre. */
.logo img { height: 17px; }
.footer-logo img { height: 22px; }
.staff-top-inner > a img { height: 18px; width: auto; }
/* the footer is dark here: the policy links are light */
.legal-links a { color: rgba(255,255,255,.72); }
.legal-links a + a { border-inline-start-color: rgba(255,255,255,.22); }
@media (hover: hover) { .legal-links a:hover { color: #fff; } }
.legal-links a:focus-visible { outline-color: #fff; }
@media (min-width: 900px) { .logo img { height: 20px; } .footer-logo img { height: 26px; } }
.card-media { aspect-ratio: 1 / 1; }
.gallery-track > div { aspect-ratio: 1 / 1; }
.lb-slide img { object-position: 50% 50%; transform-origin: 50% 50%; }
.lb-thumb img { object-position: 50% 50%; }
/* the menu is dark here: its why-us lines are light */
.sm-values { border-top-color: rgba(255,255,255,.18); }
.sm-values div { color: rgba(255,255,255,.75); }
.sm-values svg { stroke: #fff; }
/* the long wordmark in the template's square logo boxes: the receipt, Staff's print and PDF heads */
#printArea .rc-shop img { width: 132px; height: auto; }
.print-head img, .pdf-head img { width: 120px; height: auto; }
/* a link to a part of a page (/info#use, /info#about) stops under the sticky header, not behind it */
.section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
/* keyboard focus on the dark bars */
.site-header :focus-visible, .bottom-nav :focus-visible, .staff-top :focus-visible { outline-color: #fff; }
/* the paused / opening-soon bar: darker words on the tan */
.pause-bar { color: #111; }
/* ---- the home page: this shop's photos have the bottle in the middle, so the heading must not lie on the photo ---- */
/* phones: the heading sits under the photo, in the page's own ink */
@media (max-width: 719px) {
  .lb-visual { display: flex; flex-direction: column; }
  .hero-lb h1 { position: static; order: 2; inset: auto; margin: 22px var(--gutter) 0; color: var(--ink); text-shadow: none;
    font-size: clamp(40px, 12vw, 56px); line-height: 1; }
  .hero-lb h1.split::after { background: var(--gilt); }
  .hero-lb .hero-copy { margin-top: 14px; }
}
/* tablets: two columns that fit (the template's right column was too wide for 720 to 960 px) */
@media (min-width: 720px) and (max-width: 959px) {
  .hero-lb .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(280px, 46%); column-gap: 28px; }
  .hero-lb h1 { font-size: clamp(40px, 6.2vw, 58px); margin-top: 2vh; }
  .hero-lb h1 .line2 { padding-inline-start: 1.6rem; }
  .hero-lb .hero-cta .btn { padding-inline: 16px; white-space: nowrap; }
  .lb-strip { margin-top: 22px; }
  .lb-thumb { width: 52px; }
}
/* Arabic: the heading's letters reach lower than Latin ones, so their mask and the line need more room */
html[lang="ar"] .hero h1 { line-height: 1.3; }
html[lang="ar"] .hero h1 .w { padding-bottom: .5em; margin-bottom: -.5em; }
/* the product gallery's dots stay visible on a white photo */
.dots span { box-shadow: 0 0 0 1px rgba(17,17,17,.28); }
/* bag, checkout and thank-you thumbnails: square, filled */
.line .thumb { aspect-ratio: 1 / 1; }
.line .thumb img { object-fit: cover; }
/* a price never breaks between the number and KD */
.price, .lb-price { white-space: nowrap; }
/* ---- Staff ---- */
/* the Customers PDF could not be built: the PDF library cannot read color-mix() colours. The same four tints, written
   out for this shop's header colour (#2C2D2D) */
.staff-body { --viz-1-deep: #252626; --viz-1-soft: #EAEAEA; --staff-bg: #F7F7F7; --line: #E6E6E6; }
/* products on a phone: a long price (a sale: price, old price, % off) wraps under itself and never pushes the Edit and
   move buttons off the card */
@media (max-width: 719px) {
  .pcard { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .pcard .pc-main { min-width: 0; }
  .pcard .pc-price { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
}
/* the photo that the shop page's cards show (photo 2) is marked in the product editor */
.pf-ph .ph-card { position: absolute; inset-inline-start: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; line-height: 1.5; pointer-events: none; }
/* ---- the home page film (data.js STORE.homeVideo): a square film, shown whole ---- */
.lb-film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: #9FD6E8; }
.lb-stage.film .lb-bars { display: none; }
.lb-stage.film { height: auto; min-height: 0; aspect-ratio: 1 / 1; }

/* ---- the home page follows the film (2026-11-11, the owner; pages.js homeFilm) ----
   The name and price bar is under the film. One fixed layer per scent lies behind the page and fades in when that scent
   is on screen; the header, the footer and the phone bar are glass over it, so everything takes the scent's colours. */
.home-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #9BD5EA; }
.home-bg i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.home-bg i.on { opacity: 1; }
.home-bg i[data-id="athar"] { background: linear-gradient(180deg, #9BD5EA 0%, #A8DDF0 50%, #8FCFE7 100%); }
/* Ghayma: its cream clouds on a pale sky */
.home-bg i[data-id="ghayma"] { background:
  radial-gradient(46% 15% at 12% 9%, rgba(255,255,255,.95), transparent 72%),
  radial-gradient(58% 17% at 88% 20%, rgba(228,203,180,.8), transparent 72%),
  radial-gradient(64% 19% at 16% 60%, rgba(232,210,190,.85), transparent 72%),
  radial-gradient(60% 16% at 84% 74%, rgba(255,255,255,.95), transparent 72%),
  radial-gradient(74% 20% at 40% 94%, rgba(226,201,177,.8), transparent 72%),
  linear-gradient(180deg, #FBF6F1 0%, #F1EBE6 42%, #E3EEF4 100%); }
.home-bg i[data-id="ulfa"] { background:
  radial-gradient(95% 42% at 50% 30%, rgba(122,124,66,.75), transparent 72%),
  linear-gradient(180deg, #454926 0%, #2D3018 56%, #17180C 100%); }
/* Wahj: the film's silver set with its beams of light */
.home-bg i[data-id="wahj"] { background:
  linear-gradient(118deg, transparent 8%, rgba(255,255,255,.34) 17%, transparent 27%, transparent 40%, rgba(255,255,255,.2) 50%, transparent 61%, transparent 72%, rgba(255,255,255,.12) 80%, transparent 89%),
  linear-gradient(160deg, #B5A39E 0%, #84746F 34%, #5F5350 68%, #3D3636 100%); }

body.home-film { background: #9BD5EA; transition: background-color 1.1s ease; --th-fg: #1E2B30; --th-soft: rgba(30,43,48,.84); --th-line: rgba(30,43,48,.2); --th-bar: rgba(155,213,234,.72); --th-glass: rgba(255,255,255,.42); --th-on: #fff; --th-logo: brightness(0); }
body.home-film[data-scent="ghayma"] { background: #F7F0E9; --th-fg: #4A3A2D; --th-soft: rgba(74,58,45,.88); --th-line: rgba(74,58,45,.2); --th-bar: rgba(249,243,237,.74); --th-glass: rgba(255,255,255,.55); --th-on: #fff; --th-logo: brightness(0); }
body.home-film[data-scent="ulfa"] { background: #2D3018; --th-fg: #fff; --th-soft: rgba(255,255,255,.78); --th-line: rgba(255,255,255,.24); --th-bar: rgba(58,62,32,.72); --th-glass: rgba(255,255,255,.12); --th-on: #2D3018; --th-logo: brightness(1); }
body.home-film[data-scent="wahj"] { background: #5F5350; --th-fg: #fff; --th-soft: rgba(255,255,255,.92); --th-line: rgba(255,255,255,.28); --th-bar: rgba(84,73,70,.8); --th-glass: rgba(255,255,255,.16); --th-on: #3D3636; --th-logo: brightness(1); }

/* the bars: glass over the layer */
body.home-film:not(.menu-open) .site-header { background: var(--th-bar); color: var(--th-fg); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
body.home-film .site-header { transition: background-color 1.1s ease, color 1.1s ease; }
body.home-film:not(.menu-open) .site-header .logo img { filter: var(--th-logo); }
body.home-film .site-header .logo img, body.home-film .footer-logo img { transition: filter 1.1s ease; }
body.home-film:not(.menu-open) .menu-btn { border-color: var(--th-soft); }
body.home-film:not(.menu-open) .menu-btn i { background: var(--th-fg); }
body.home-film .menu-btn { transition: background .25s, border-color 1.1s ease; }
body.home-film .site-header :focus-visible, body.home-film .bottom-nav :focus-visible, body.home-film .site-footer :focus-visible { outline-color: var(--th-fg); }
body.home-film .bottom-nav { background: var(--th-bar); box-shadow: 0 -1px 0 var(--th-line); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); transition: background-color 1.1s ease, box-shadow 1.1s ease; }
body.home-film .bottom-nav a { color: var(--th-soft); transition: color 1.1s ease; }
body.home-film .bottom-nav a[aria-current="page"] { color: var(--th-fg); }
body.home-film .site-footer { background: transparent; color: var(--th-soft); }
body.home-film .footer-logo img { filter: var(--th-logo); }
body.home-film .social a { color: var(--th-fg); border-color: var(--th-soft); transition: color 1.1s ease, border-color 1.1s ease, background .2s, transform .2s var(--ease); }
body.home-film .legal-links a { color: var(--th-soft); transition: color 1.1s ease, border-color 1.1s ease; }
body.home-film .legal-links a + a { border-inline-start-color: var(--th-line); }
@media (hover: hover) { body.home-film .legal-links a:hover { color: var(--th-fg); } body.home-film .social a:hover { background: var(--th-glass); border-color: var(--th-fg); } }

/* the page itself */
body.home-film main { color: var(--th-fg); transition: color 1.1s ease; }
body.home-film .lb-stage.film { background: transparent; }
body.home-film .lb-film { background: transparent; }
body.home-film .lb-go { background: var(--th-fg); color: var(--th-on); transition: background-color 1.1s ease, color 1.1s ease, transform .3s var(--ease); }
body.home-film .lb-pill:focus-visible { outline-color: var(--th-fg); }
body.home-film .hero .btn { background: var(--th-fg); border-color: var(--th-fg); color: var(--th-on); transition: background-color 1.1s ease, color 1.1s ease, border-color 1.1s ease, transform .1s; }
body.home-film .hero .btn-ghost { background: var(--th-glass); border-color: var(--th-line); color: var(--th-fg); }
body.home-film .lb-thumb:focus-visible { outline-color: var(--th-fg); }
body.home-film .hero-lb h1.split::after { background: var(--th-fg); }
@media (prefers-reduced-motion: reduce) { .home-bg i, body.home-film * { transition-duration: .01s !important; } }

/* phones: a short page. The film, its name and price bar, the four scents, the two buttons. The heading stays for
   screen readers and search engines only; the sentence is on the shop and Help pages */
@media (max-width: 719px) {
  body.home-film .hero-lb h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.home-film .hero.hero-lb { padding-bottom: 8px; }
  body.home-film .hero-lb .hero-inner { display: flex; flex-direction: column; }
  body.home-film .hero-lb .hero-copy { order: 3; margin-top: 14px; max-width: none; }
  body.home-film .hero-lb .hero-cta { margin-top: 0; }
  body.home-film .hero-lb .hero-cta .btn { flex: 1; }
  body.home-film .site-footer { padding: 22px 0 20px; }
  body.home-film .footer-brand { gap: 16px; }
}

/* (2026-11-11, the owner) "Powered by Control Z" under the policy links: the home, shop and bag pages */
.powered { font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.6); padding: 4px 8px; font-family: "Jost", sans-serif; }
.powered b { font-weight: 600; color: #fff; }
body.home-film .powered { color: var(--th-soft); transition: color 1.1s ease; }
body.home-film .powered b { color: var(--th-fg); transition: color 1.1s ease; }

/* review fixes (2026-11-11): the computer's menu links and the heading follow the scent too */
body.home-film:not(.menu-open) .desktop-nav a { color: var(--th-soft); transition: color 1.1s ease, border-color 1.1s ease; }
body.home-film:not(.menu-open) .desktop-nav a:hover, body.home-film:not(.menu-open) .desktop-nav a[aria-current="page"] { color: var(--th-fg); border-bottom-color: var(--th-fg); }
body.home-film .hero-lb h1 { color: var(--th-fg); transition: color 1.1s ease; }
/* the round menu open: the phone bar goes dark with the header */
body.home-film.menu-open .bottom-nav { background: var(--ink); box-shadow: 0 -1px 0 rgba(255,255,255,.14); }
body.home-film.menu-open .bottom-nav a { color: rgba(255,255,255,.7); }
body.home-film.menu-open .bottom-nav a[aria-current="page"] { color: #fff; }
/* phones, the product page: the footer's last links stay above the fixed "Add to bag" bar */
@media (max-width: 719px) { body[data-page="product"] .site-footer { padding-bottom: 96px; } }

/* ---- the home page, second pass (2026-11-11, the owner): the glass bar lies on the foot of the film with the name and
   the price only; the four scents are large pictures right under the film; "All over spray" closes the page ---- */
body.home-film .lb-row b { font-size: 25px; }
body.home-film .lb-price { font-size: 15px; }
body.home-film .lb-go { width: 42px; height: 42px; }
/* the four scents */
body.home-film .lb-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; overflow: visible; margin: 18px 0 0; padding: 0; }
body.home-film .lb-thumb, body.home-film .lb-thumb[aria-current="true"] { width: auto; aspect-ratio: auto; overflow: visible; display: grid; justify-items: center; gap: 8px; padding: 0; border-radius: 0;
  background: none; box-shadow: none; opacity: 1; transform: none; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
body.home-film .lb-ti { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: var(--th-glass);
  box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 10px 22px rgba(0,0,0,.12); transition: box-shadow .9s ease, transform .45s var(--ease); }
body.home-film .lb-thumb[aria-current="true"] .lb-ti { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--th-on), 0 0 0 3.5px var(--th-fg), 0 14px 26px rgba(0,0,0,.2); }
body.home-film .lb-thumb:active .lb-ti { transform: scale(.94); }
body.home-film .lb-ti img { transition: transform 1.2s var(--ease); }
body.home-film .lb-thumb[aria-current="true"] .lb-ti img { transform: scale(1.08); }
body.home-film .lb-tn { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; opacity: .66; transition: opacity .6s; }
html[lang="ar"] body.home-film .lb-tn { font-size: 15px; letter-spacing: 0; }
body.home-film .lb-thumb[aria-current="true"] .lb-tn { opacity: 1; font-weight: 600; }
body.home-film .lb-tp { display: block; width: 28px; height: 2px; border-radius: 2px; overflow: hidden; background: var(--th-line); opacity: 0; transition: opacity .6s; }
body.home-film .lb-thumb[aria-current="true"] .lb-tp { opacity: 1; }
body.home-film .lb-tp::after { content: ""; display: block; height: 100%; background: var(--th-fg); transform-origin: left center; transform: scaleX(var(--seg, 0)); }
html[dir="rtl"] body.home-film .lb-tp::after { transform-origin: right center; }
body.home-film .lb-thumb:focus-visible { outline: none; }
body.home-film .lb-thumb:focus-visible .lb-ti { outline: 2px solid var(--th-fg); outline-offset: 3px; }
/* "All over spray", between two fine lines */
.lb-tagline { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; font-family: "Jost", sans-serif; font-size: 11.5px; letter-spacing: .36em; text-transform: uppercase; white-space: nowrap;
  color: var(--th-soft, var(--muted)); transition: color 1.1s ease; }
.lb-tagline::before, .lb-tagline::after { content: ""; flex: 1; height: 1px; background: var(--th-line, var(--mist)); transition: background-color 1.1s ease; }
/* a soft light that drifts slowly behind the page */
.home-bg::after { content: ""; position: absolute; inset: -25%; background: radial-gradient(34% 24% at 50% 50%, rgba(255,255,255,.26), transparent 70%); animation: hfDrift 17s ease-in-out infinite alternate; }
@keyframes hfDrift { from { transform: translate(-20%, -14%); } to { transform: translate(20%, 16%); } }
/* the page arrives: the film settles, then the scents, the buttons and the line rise one after the other */
@keyframes hfIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes hfUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
body.home-film .lb-stage.film { animation: hfIn 1.1s var(--ease) both; }
body.home-film .lb-thumb { animation: hfUp .8s var(--ease) both; }
body.home-film .lb-thumb:nth-child(1) { animation-delay: .25s; }
body.home-film .lb-thumb:nth-child(2) { animation-delay: .33s; }
body.home-film .lb-thumb:nth-child(3) { animation-delay: .41s; }
body.home-film .lb-thumb:nth-child(4) { animation-delay: .49s; }
body.home-film .hero-cta { animation: hfUp .8s var(--ease) .6s both; }
body.home-film .lb-tagline { animation: hfUp .8s var(--ease) .72s both; }
@media (prefers-reduced-motion: reduce) { .home-bg::after, body.home-film .lb-stage.film, body.home-film .lb-thumb, body.home-film .hero-cta, body.home-film .lb-tagline { animation: none; } }
@media (max-width: 719px) {
  body.home-film .hero-copy > p:not(.lb-tagline) { display: none; }
  body.home-film .lb-strip { order: 2; }
  body.home-film .hero-lb .hero-copy { margin-top: 20px; }
}
@media (min-width: 720px) { body.home-film .lb-strip { grid-template-columns: repeat(4, 88px); } }

/* ---- the home page, third pass (2026-11-11, the owner): the film is a plain square; the name and price bar is a square
   band joined to its lower edge (no gap, no round corners), in a deeper tone of the scent on screen ---- */
body.home-film { --th-band: #7FC2DC; }
body.home-film[data-scent="ghayma"] { --th-band: #E9DACB; }
body.home-film[data-scent="ulfa"] { --th-band: #22250F; }
body.home-film[data-scent="wahj"] { --th-band: #453B38; }
body.home-film .lb-stage.film { border-radius: 0; }
body.home-film .lb-pill { position: relative; inset: auto; margin: 0; padding: 12px var(--gutter); border: 0; border-radius: 0; color: var(--th-fg); background: var(--th-band);
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color 1.1s ease, color 1.1s ease; }
html[dir="rtl"] body.home-film .lb-pill { padding: 12px var(--gutter); }
body.home-film .hero-lb .lb-pill { animation: hfIn 1.1s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { body.home-film .hero-lb .lb-pill { animation: none; } }
/* computers: the band closes the film's card */
@media (min-width: 720px) {
  body.home-film .lb-stage.film { border-radius: 28px 28px 0 0; }
  body.home-film .lb-pill { grid-column: 2; grid-row: 4; padding: 14px 22px; border-radius: 0 0 28px 28px; }
}

/* ---- the bar under the film is the bottle's own label (2026-11-11, the owner chose it from four looks; pages.js
   fillBars): the Latin name in wide capitals, a fine line, the Arabic name; the price and a small arrow under it, centred,
   on the page's own colour with a fine line under it ---- */
body.home-film .lb-pill, html body.home-film .lb-pill { display: block; padding: 0; background: transparent; color: var(--th-fg); }
body.home-film .lb-row { display: none; }
.bar-a { display: grid; justify-items: center; gap: 10px; padding: 22px var(--gutter) 20px; border-bottom: 1px solid var(--th-line); transition: border-color 1.1s ease; }
.lb-pill.swap .bar-a > * { animation: lbText .6s var(--ease) both; }
.lb-pill.swap .bar-a > :nth-child(2) { animation-delay: .08s; }
.ba-name { display: flex; align-items: center; gap: 16px; direction: ltr; }
.ba-name b { font-family: "Jost", sans-serif; font-weight: 500; font-size: 25px; letter-spacing: .34em; margin-inline-end: -.34em; line-height: 1; }
.ba-name i { width: 1px; height: 24px; background: currentColor; opacity: .35; }
.ba-ar { font-family: "Tajawal", sans-serif; font-weight: 500; font-size: 25px; line-height: 1; }
.ba-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .14em; font-weight: 500; }
.ba-go { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--th-line); transition: border-color 1.1s ease; }
.ba-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .ba-go svg { transform: scaleX(-1); }
@media (min-width: 720px) { body.home-film .lb-stage.film { border-radius: 28px; } }
/* ---- bug hunt 2 (2026-11-11) ---- */
/* the film and its name bar are one card (pages.js): on tablets and computers it fills the second column and the bar is
   joined to the film at every width and in Arabic */
.lb-card { display: block; min-width: 0; }
@media (min-width: 720px) {
  body.home-film .lb-card { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  body.home-film .lb-card .lb-stage.film { width: 100%; }
  body.home-film .lb-strip { grid-template-columns: repeat(var(--tn, 4), minmax(0, 88px)); }
}
@media (max-width: 719px) { body.home-film .lb-strip { grid-template-columns: repeat(var(--tn, 4), minmax(0, 1fr)); } }
/* nothing is written on the film any more, so the dark shade for white words goes (it muddied the bottles) */
body.home-film .lb-stage.film::after { display: none; }
/* the pause / play button: a dark glass that shows on the light scenes too */
body.home-film .lb-pause { color: #fff; background: rgba(20, 20, 20, .42); border-color: rgba(255, 255, 255, .5); }
body.home-film .lb-pause[hidden] { display: none; }
/* the page is never wider than a phone's screen while the film arrives */
body.home-film main { overflow-x: clip; }
/* a sold-out scent on the bar */
.ba-out { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
html[lang="ar"] .ba-out { letter-spacing: 0; font-size: 13px; }
/* the bag: a product that is no longer sold was left out */
.bag-gone { margin: 0 0 6px; padding: 10px 12px; border-radius: 12px; background: #FBF3E6; color: #6A4B12; font-size: 14px; }
/* the bag on a very narrow phone: a long price goes under the quantity, never off the edge */
.line-info { min-width: 0; }
.line-bottom { flex-wrap: wrap; gap: 6px 10px; }
/* Staff, product editor: the "Shop card" mark sits above the move buttons (the arrow covered it) */
.pf-ph .ph-card { bottom: 40px; }
/* Staff, Customers PDF: the footer line is not cut */
.pdf-foot { padding-bottom: 8px; }