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

:root {
  --porcelain: #FFFFFF;   /* page background: white, like the studio set */
  --ink: #111111;         /* text, primary buttons */
  --oud: #111111;         /* accent: links, focus (monochrome) */
  --gilt: #702925;        /* 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;
  --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;
}
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; }
.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(--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-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; }

/* ---------- 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; }


/* ---------- 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, .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 calc(24px + var(--safe-b)); 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 */
.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: 0; z-index: 35;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--mist); padding: 10px var(--gutter) calc(10px + var(--safe-b));
  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: 0; background: var(--porcelain); padding: 12px 0 calc(8px + var(--safe-b)); }
/* 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(--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; }
  .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; }
  .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; }

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

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

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

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

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

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

/* Header, bottom bar and footer buttons keep the English order in Arabic too; only the words change.
   (The page itself still reads right to left.) */
html[dir="rtl"] .header-inner, html[dir="rtl"] .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 { line-height: 1.2; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* this shop: the logo_black.png is square, so the packing slip and PDF logo boxes keep its shape */
.print-head img, .pdf-head img { object-fit: contain; }

/* =========================================================
   NEAT Fashion Line theme (2026-11-01, the owner asked: "match theme with my logo")
   The logo is a soft blush circle with thin black lines on white. Header, menu, footer and the phone bar take the
   blush with black words and the black logo (img/logo_lockup.png); the page stays white; buttons stay black; small
   accents are a deeper rose (--gilt). Staff keeps its dark header.
   ========================================================= */
:root {
  --blush: #ECDCD8;        /* the logo's circle */
  --blush-line: rgba(17,17,17,.12);
  --gilt: #93605A;         /* deeper rose: the heading line, saved hearts, the bag count (white text 5.2:1) */
  --mist: #EBE2DF;         /* warm borders */
  --card: #F6EFED;         /* a whisper of blush behind product photos */
  --muted: #6E6461;        /* warm grey text (5.5:1 on white) */
}
.site-header { background: var(--blush); color: var(--ink); box-shadow: 0 1px 0 var(--blush-line); }
.cart-count { background: var(--gilt); color: #fff; }
.pause-bar { color: #fff; }
.menu-btn { border-color: rgba(17,17,17,.55); }
.menu-btn i { background: var(--ink); }
body.menu-open .menu-btn { background: var(--ink); border-color: var(--ink); }
body.menu-open .menu-btn i { background: #fff; }
.site-menu { background: var(--blush); color: var(--ink); }
.sm-links a { color: var(--ink); }
.sm-lang { background: var(--ink); color: #fff; }
.site-menu :focus-visible, .menu-btn:focus-visible { outline-color: var(--ink); }
.site-footer { background: var(--blush); color: rgba(17,17,17,.7); }
.social a { color: var(--ink); border-color: rgba(17,17,17,.4); }
@media (hover: hover) { .social a:hover { background: rgba(17,17,17,.06); border-color: var(--ink); } }
.site-footer :focus-visible { outline-color: var(--ink); }
@media (min-width: 720px) {
  .desktop-nav a { color: rgba(17,17,17,.7); }
  .desktop-nav a:hover { color: var(--ink); border-bottom-color: rgba(17,17,17,.4); }
  .desktop-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
}

/* NEAT: 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%; }

/* NEAT: 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; }

/* NEAT: "More in <group>" on the product page (owner asked 2026-11-02: more professional, no scents under clothes).
   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; } }

/* NEAT: the home page rail (2026-11-08, the user: the home page like two Instagram rail posts, "only for clothes", then
   "Dara'a only"). The dara'a hang from a curved metal rail on the shop's blush (js/rail.js moves them; pages.js HOME fills
   it). The stage fills the phone screen under the header; words sit small at its top and bottom, as in the reference. Only
   transform and opacity move; the idle sway is this CSS animation, paused off screen, while dragging and for reduced motion. */
.rail-hero { padding-bottom: 0; }   /* no buttons under the rail (the user, 2026-11-08): the stage meets the footer */
/* the same blush runs from the rail into the footer; a hairline between them, like the one under the header */
body[data-page="home"] .site-footer { border-top: 1px solid rgba(17, 17, 17, .09); }
.rail-hero + .rail-hero { border-top: 1px solid rgba(17, 17, 17, .09); }   /* the same hairline between the two rails */
body[data-page="home"] #main { padding-bottom: 0; }
.rail-hero.is-empty .rail-stage { display: none; }
/* Each rail is a room (the user, later on 2026-11-08: "more professional and interesting ... better coloring and style"):
   a wall with the collection's word on it, a floor line the clothes hang just above, soft shadows on the floor, and the
   room's own light. Ramadhan: warm rose under a lantern glow. Winter: oat-rose in window daylight. Both floors end on the
   footer's blush. --rail-top and --floor-y (parts of the stage height) are read by rail.js. */
.rail-stage { --rail-top: .19; --floor-y: .84;
  --wall-hi: #EAD3CC; --wall: #F4E7E3; --wall-lo: #EFDFDA; --floor-hi: #E3CBC4; --floor-lo: #ECDCD8; --word: #E2C5BC;
  --light: radial-gradient(58% 46% at 50% 34%, rgba(255, 238, 220, .78), rgba(255, 238, 220, 0) 72%);
  position: relative; height: min(calc(100svh - var(--header-h) - 10px), 700px); min-height: 500px;
  overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; isolation: isolate;
  background: var(--light),
    linear-gradient(180deg, var(--wall-hi) 0%, var(--wall) 46%, var(--wall-lo) calc(var(--floor-at, var(--floor-y)) * 100% - 1%),
      var(--floor-hi) calc(var(--floor-at, var(--floor-y)) * 100% + 2.5%), var(--floor-lo) 100%); }   /* the floor ends on the footer's blush */
.rail-stage[data-family="winter"] { --wall-hi: #E8DDD8; --wall: #F3ECE8; --wall-lo: #EEE4DF; --floor-hi: #E1D3CC; --word: #DCCBC2;
  --light: linear-gradient(112deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .22) 30%, rgba(255, 255, 255, 0) 52%); }
/* the floor (rail.js puts the floor line, --floor-at, a little under the longest piece) and a soft shadow under each piece */
.rail-floor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rail-shadow { position: absolute; left: 0; top: 0; width: 100px; height: 18px; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(92, 52, 44, .4), rgba(92, 52, 44, .13) 62%, rgba(92, 52, 44, 0)); }
.rail-stage:focus { outline: none; }
.rail-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.rail-bar { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.rail-rod { fill: none; stroke-width: 5; stroke-linecap: round; }
.rail-shade { fill: none; stroke: rgba(80, 50, 44, .16); stroke-width: 8; filter: blur(4px); }
.rail-track { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; perspective: 1100px; }
.rail-piece { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.rp { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
.rp:focus { outline: none; }
.rp:focus-visible .rp-img { outline: 2px solid var(--ink); outline-offset: 6px; }
.rp-swing, .rp-sway { position: absolute; inset: 0; display: block; }
.rp-swing { will-change: transform; }
.rp-sway { animation: rpSway var(--sd, 4s) ease-in-out var(--sdelay, 0s) infinite alternate; }
@keyframes rpSway { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
.rail-stage.is-away .rp-sway, .rail-stage.is-dragging .rp-sway { animation-play-state: paused; }
.rail-still .rp-sway { animation: none; }
.rp-hanger { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.rp-hanger .hk { fill: none; stroke: #3A3431; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rp-hanger .hb { fill: none; stroke: #5E4535; stroke-width: 5; stroke-linecap: round; }
.rp-img { position: absolute; left: 0; display: block; max-width: none; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 16px 18px rgba(70, 40, 34, .2)); }
.rail-piece.is-frame .rp-img { object-fit: cover; object-position: 50% 0; border: 3px solid #fff; border-radius: 3px; filter: none;
  box-shadow: 0 14px 26px rgba(70, 40, 34, .22); }
/* the price tag on its string, next to the hook; it swings a little more than the piece (--tag from rail.js) */
.rp-tag { position: absolute; display: block; width: 0; height: 0; transform-origin: 0 0; transform: rotate(calc(var(--tag, 0deg) + 6deg)); }
.rp-tag i { position: absolute; left: 0; top: 0; width: 1px; height: 20px; background: rgba(58, 52, 49, .55); transform: rotate(-28deg); transform-origin: 50% 0; }
.rp-tag b { position: absolute; left: 7px; top: 16px; padding: 3px 6px 3px 9px; border-radius: 3px; background: #fff; color: var(--ink);
  font: 600 9px/1.15 var(--ui); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 2px 6px rgba(40, 25, 20, .14); }
.rp-tag b::before { content: ""; position: absolute; left: 3px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%;
  background: rgba(58, 52, 49, .45); }
/* the words: the collection's word large on the wall (behind the rail and the clothes; rail.js slides it with the rail,
   RailMath.wordX), and one small line at the top */
.rail-head { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.rail-word { position: absolute; left: 0; top: calc(var(--rail-top) * 100% - .62em); z-index: 0; display: inline-block;
  color: var(--word); font: 500 clamp(80px, 21.5vw, 250px)/1 var(--display); letter-spacing: -.01em; white-space: nowrap;
  will-change: transform; }
.rail-sub { position: absolute; top: 16px; left: var(--gutter); right: var(--gutter); z-index: 3; display: flex; align-items: center;
  gap: 9px; color: rgba(17, 17, 17, .74); font: 500 13px/1.2 var(--ui); }
.rail-sub i { width: 1px; height: 11px; background: currentColor; opacity: .4; }
/* the focused piece's name and price, on the floor under it */
.rail-info { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 20px; z-index: 3; text-align: center; opacity: 0;
  transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.rail-info.on { opacity: 1; transform: none; }
.rail-info b { display: block; margin-bottom: 5px; color: var(--ink); font: 600 23px/1.12 var(--display); }
.rail-info span { color: rgba(17, 17, 17, .66); font: 500 13px/1.2 var(--ui); letter-spacing: .02em; }
/* under the name and price: the button that opens the look-closer popup, the same as tapping the piece again (the user,
   2026-11-08: "add a button (Check this) or something similar ... more professional"). rail.js puts the block just under
   the tapped piece. */
.rail-go { display: flex; align-items: center; gap: 8px; width: max-content; min-height: 42px; margin: 14px auto 0; padding: 0 20px;
  border: 1px solid rgba(17, 17, 17, .8); border-radius: 999px; background: rgba(255, 255, 255, .42); color: var(--ink);
  font: 500 13px/1 var(--ui); letter-spacing: .02em; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, color .2s, transform .15s; }
.rail-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rail-go:hover { background: var(--ink); color: #fff; }
.rail-go:active { transform: scale(.97); }
.rail-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rail-info:not(.on) .rail-go { visibility: hidden; pointer-events: none; }
html[dir="rtl"] .rail-go svg { transform: scaleX(-1); }
@media (min-width: 720px) {
  .rail-stage { --rail-top: .2; --floor-y: .86; height: min(calc(100svh - var(--header-h) - 24px), 760px); }
  .rail-sub { top: 22px; font-size: 14px; }
  .rail-info b { font-size: 30px; }
}

/* NEAT: the moving shelf (2026-11-08, the user: "shelf moving containing the bags i have, name it the same name as the
   category"). Its room: the category's name on the wall, a blush lacquer shelf with brass brackets lit from above, the
   bags standing on it. rail.js (opts.shelf) slides the plank with the bags and puts each price on the shelf's edge.
   --shelf-y: the shelf's top line; --shelf-room: the wall word stays above this line. */
.rail-stage[data-kind="shelf"] { --shelf-y: .64; --shelf-room: .3; --floor-y: .87;
  --wall-hi: #E6D2CB; --wall: #F2E5E0; --wall-lo: #EDDDD8; --floor-hi: #E0C9C2; --word: #E0C4BB;
  --light: radial-gradient(46% 40% at 50% 47%, rgba(255, 243, 232, .9), rgba(255, 243, 232, 0) 70%);
  height: min(calc(100svh - var(--header-h) - 10px), 580px); min-height: 460px; }
/* the category's name in two lines on the wall (one text, so its Arabic is one word) */
.rail-stage[data-kind="shelf"] .rail-word { top: 14%; width: min-content; white-space: normal; font-size: clamp(58px, 16vw, 168px); line-height: .86; }
.shelf-plank { position: absolute; left: 0; z-index: 1; height: 0; will-change: transform; pointer-events: none; }
/* its top face catches the light; its front edge is the lacquer; its shadow falls on the wall under it */
.shelf-top { position: absolute; left: 0; right: 0; top: -7px; height: 7px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #E7D2CB, #F6ECE8); }
.shelf-edge { position: absolute; left: 0; right: 0; top: 0; height: 15px; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #FBF4F1 0, #D9BCB4 1.5px, #CDAAA1 60%, #BE998F 100%);
  box-shadow: 0 10px 18px -6px rgba(80, 48, 40, .34), 0 22px 30px -14px rgba(80, 48, 40, .22); }
.shelf-bracket { position: absolute; top: 15px; width: 3px; height: 26px; margin-left: -1.5px;
  background: linear-gradient(90deg, #A8894E, #D9BE86 45%, #9A7B43); box-shadow: 2px 3px 4px rgba(80, 48, 40, .2); }
/* each bracket ends in the round plate screwed to the wall */
.shelf-bracket::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E6CF9C, #B39459 55%, #8F713C); box-shadow: 1px 2px 3px rgba(80, 48, 40, .25); }
/* the bags' contact shadows sit on the shelf, under the pieces (the floor layer is under the track) */
.is-shelf .rail-shadow { background: radial-gradient(closest-side, rgba(60, 34, 28, .5), rgba(60, 34, 28, .16) 64%, rgba(60, 34, 28, 0)); }
.is-shelf .rail-floor { z-index: 2; }
.is-shelf .rail-track { z-index: 3; }
.is-shelf .rp-sway { animation: none; }                  /* a bag on a shelf stands still until the shelf moves */
.is-shelf .rp-img { filter: drop-shadow(10px 6px 14px rgba(70, 40, 34, .16)); }
/* a bag with no clean picture yet: its photo in a standing frame */
.is-shelf .rail-piece.is-frame .rp-img { object-position: 50% 70%; border: 5px solid #fff; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(60, 40, 34, .25), 8px 8px 16px rgba(70, 40, 34, .2); }
/* the price labels on the shelf's front edge (they move with it) */
.shelf-labels { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.shelf-label { position: absolute; left: 0; top: 0; padding: 1px 6px; border-radius: 2px; background: #FFFCFA; color: var(--ink);
  font: 600 8.5px/1.35 var(--ui); letter-spacing: .03em; white-space: nowrap; box-shadow: 0 1px 2px rgba(60, 34, 28, .2);
  transition: opacity .3s; will-change: transform; }
@media (min-width: 720px) {
  .rail-stage[data-kind="shelf"] { --shelf-y: .68; --shelf-room: .24; height: min(calc(100svh - var(--header-h) - 24px), 640px); }
  /* wide screens: the name on one line, above the bags */
  .rail-stage[data-kind="shelf"] .rail-word { top: 7%; width: auto; white-space: nowrap; font-size: clamp(72px, 7.6vw, 116px); line-height: 1; }
  .shelf-edge { height: 18px; }
  .shelf-bracket { top: 18px; height: 34px; }
  .shelf-label { font-size: 10px; padding: 2px 8px; }
}
/* the look-closer sheet for a bag (the user, 2026-11-08: only the bag, no photo beside it): the bag fills the room the
   words leave, whatever its shape (a bag with no picture yet shows its photo the same way) */
.rs-fig.is-bag { flex: 1 1 auto; min-height: 0; height: auto; }
.rs-fig.is-bag .rs-pic { position: absolute; inset: 4% 7% 7%; height: auto; display: block; }
.rs-fig.is-bag .rs-cut, .rs-fig.is-bag .rs-photo { width: 100%; height: 100%; max-height: none; object-fit: contain; aspect-ratio: auto;
  border-radius: 0; background: none; box-shadow: none; }
.rs-fig.is-bag .rs-cut { filter: drop-shadow(0 22px 26px rgba(70, 40, 34, .22)); }

/* NEAT: the rail's look-closer sheet (2026-11-08, phase 3; js/rail-sheet.js). A tall sheet on the rail's blush: the piece on
   its hook and the photo of it worn side by side (the user: "near each other without switching", no tabs, no bag icon at
   the top), "05 / 12", name, price, Add to bag (spinner, "Added" with a tick), the picture flying into View bag (with the
   bag count). Computer: a centred card (phase 4 gives wide screens the rack's own panel). */
/* every sheet has the same height (the user, 2026-11-08: "all popup windows to be the same size, match the first one"):
   the long belted coat's sheet, 86% of the phone screen; rail-sheet.js fits the pictures into the room the words leave */
.rail-sheet { height: min(86svh, 780px); max-height: none; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #F6EDEA 0%, #F4EAE7 55%, #EEE0DC 100%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
.rail-sheet .rs-top { display: flex; align-items: center; justify-content: flex-end; padding: 10px var(--gutter) 2px; }
.rs-close { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; border: 0; background: none; color: var(--ink);
  font: 500 13px var(--ui); cursor: pointer; }
.rs-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.rs-close:focus-visible, .rs-view:focus-visible, .rs-more:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 6px; box-shadow: none; }
.rs-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 var(--gutter) calc(20px + var(--safe-b)); }
/* the two pictures side by side: the piece (no hanger in the sheet, the user asked) and the worn photo, sized by
   rail-sheet.js so both dresses match; the height also shrinks with the screen width so both always fit */
/* the words and buttons: one block of a fixed height under the pictures (View bag sits beside Full details, so adding to
   the bag never changes it) */
.rs-info { display: flex; flex-direction: column; align-items: center; width: 100%; flex: none; }
.rs-links { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 36px; margin-top: 8px; }
.rs-links .rs-view, .rs-links .rs-more { margin-top: 0; }
.rs-fig { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 12px; width: 100%; flex: none;
  height: min(46svh, 430px, calc((100vw - 2 * var(--gutter) - 12px) * 1.15)); margin: 2px 0 14px; }
.rs-pic { position: relative; height: 100%; animation: rsIn .4s var(--ease) both; }
.rs-pic + .rs-pic { animation-delay: .06s; }
.rs-pic.is-cut { display: flex; flex-direction: column; align-items: center; }
.rs-cut { display: block; height: 100%; width: auto; filter: drop-shadow(0 18px 22px rgba(70, 40, 34, .2)); }
.rs-pic.is-photo { display: flex; align-items: flex-end; }
/* the worn photo: rail-sheet.js sizes it so her dress matches the hanging one (height and a top offset; her head may rise
   above the hanging dress's top) */
.rs-pic.is-worn { align-self: flex-start; display: block; flex: none; filter: drop-shadow(0 18px 22px rgba(70, 40, 34, .16)); }
.rs-worn { display: block; height: 100%; width: auto; }   /* the shadow is on its box: the fade mask below would cut it off */
/* a worn photo whose frame cut her (RAIL fade: "t" top, "b" bottom): that edge fades out instead of a hard line; rail-sheet.js
   sets where (--fb: the bottom fade starts under her hem, --ft: the top fade ends above her collar) */
.rs-pic.fade-b .rs-worn { -webkit-mask-image: linear-gradient(to bottom, #000 var(--fb, 84%), transparent); mask-image: linear-gradient(to bottom, #000 var(--fb, 84%), transparent); }
.rs-pic.fade-t .rs-worn { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--ft, 10%)); mask-image: linear-gradient(to bottom, transparent, #000 var(--ft, 10%)); }
.rs-pic.fade-tb .rs-worn { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--ft, 10%), #000 var(--fb, 84%), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--ft, 10%), #000 var(--fb, 84%), transparent); }
/* and a frame that cut her at the side (RAIL side: "l", "r"): on the box, so it adds to the top and bottom fade above */
.rs-pic.side-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 9%); mask-image: linear-gradient(to right, transparent, #000 9%); }
.rs-pic.side-r { -webkit-mask-image: linear-gradient(to left, transparent, #000 9%); mask-image: linear-gradient(to left, transparent, #000 9%); }
.rs-pic.side-lr { -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); }
.rs-photo { display: block; height: 100%; width: auto; aspect-ratio: 3 / 5; object-fit: cover; object-position: 50% 0;
  border-radius: 14px; background: #fff; box-shadow: 0 14px 30px rgba(70, 40, 34, .16); }
@keyframes rsIn { from { opacity: 0; transform: translateY(8px); } }
.rs-name { margin: 0; color: var(--ink); font: 600 25px/1.15 var(--display); }
.rs-price { margin: 6px 0 16px; color: var(--ink); font: 600 15px/1 var(--ui); }
.rs-add { width: 100%; max-width: 440px; min-height: 52px; border-radius: 999px; font-size: 15px; transition: background .25s, border-color .25s; }
.rs-add .rs-spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%;
  animation: rsSpin .7s linear infinite; }
.rs-add .rs-tick { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rs-add.is-busy { background: #8E8783; border-color: #8E8783; opacity: 1; }
.rs-add.is-busy .rs-spin { display: inline-block; }
.rs-add.is-done .rs-tick { display: inline-block; animation: rsTick .3s var(--ease) both; }
.rs-add:disabled:not(.is-busy) { background: #CFC6C3; border-color: #CFC6C3; color: #fff; }
@keyframes rsSpin { to { transform: rotate(360deg); } }
@keyframes rsTick { from { transform: scale(.4); opacity: 0; } }
.rs-view, .rs-more { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; color: var(--ink);
  font: 500 13px var(--ui); text-decoration: none; cursor: pointer; }
.rs-view { margin-top: 10px; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.rs-view[hidden], .rs-more[hidden] { display: none; }
.rs-view .cart-count { position: static; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 600 10.5px/18px var(--ui);
  text-align: center; }
.rs-view.bump .cart-count { animation: rsBump .38s var(--ease); }
@keyframes rsBump { 45% { transform: scale(1.35); } }
.rs-more { margin-top: 8px; color: var(--muted); font-size: 12px; }
.rs-view svg, .rs-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
html[dir="rtl"] .rs-view svg, html[dir="rtl"] .rs-more svg { transform: scaleX(-1); }
.rs-fly { position: fixed; z-index: 95; pointer-events: none; }
.rs-fly-img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 720px) {
  .rail-sheet { left: 50%; right: auto; width: min(520px, 92vw); height: min(86vh, 820px); transform: translate(-50%, 100%); }
  .rail-sheet.open { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .rail-sheet { transition: none; } .rs-pic, .rs-add.is-done .rs-tick { animation: none; } }

/* NEAT: the product page while it loads (2026-11-08, the user: the empty template showed "for 1 second" when opening a
   dara'a from the home page). The page waits for the server's product list (prices and stock it can trust). Until pages.js
   has filled it in (body.pdp-ready) the empty template stays hidden and a soft photo-shaped placeholder shimmers where the
   photo goes. If the page script ever fails, the page shows anyway after 6 s. */
body[data-page="product"]:not(.pdp-ready) #main,
body[data-page="product"]:not(.pdp-ready) #stickyBuy { visibility: hidden; animation: pdpReveal 0s 6s forwards; }
@keyframes pdpReveal { to { visibility: visible; } }
body[data-page="product"]:not(.pdp-ready)::after { content: ""; position: absolute; z-index: 1; top: calc(var(--header-h) + 12px);
  left: 0; right: 0; height: min(125vw, 64vh); pointer-events: none;
  background: linear-gradient(100deg, #F6EFED 30%, #FCF8F7 50%, #F6EFED 70%) 0 0 / 220% 100%;
  animation: pdpShimmer 1.3s linear infinite, pdpGone 0s 6s forwards; }
@keyframes pdpShimmer { to { background-position: -220% 0; } }
@keyframes pdpGone { to { opacity: 0; visibility: hidden; } }
@media (min-width: 720px) {
  body[data-page="product"]:not(.pdp-ready)::after { left: max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter)));
    right: auto; width: min(54vw, 600px); height: min(72vh, 720px); border-radius: 22px; top: calc(var(--header-h) + 28px); }
}
@media (prefers-reduced-motion: reduce) { body[data-page="product"]:not(.pdp-ready)::after { animation: pdpGone 0s 6s forwards; } }

/* NEAT: 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; }

/* NEAT: 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"] .rail-info 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"] .rail-info b { font-size: 20px; line-height: 1.3; }
html[lang="ar"] .rail-word { font-family: var(--ui); font-weight: 600; letter-spacing: 0; font-size: clamp(84px, 24vw, 220px); }
html[lang="ar"] .rail-stage[data-kind="shelf"] .rail-word { font-size: clamp(56px, 15vw, 150px); line-height: 1.2; }

/* NEAT: 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; }
}

/* =========================================================
   NEAT: Staff in the shop's own look (2026-11-02, the user: "make the staff panel theme match the real website theme").
   The shop's blush bar with the black logo on top (and the blush bottom bar on phones), a warm white page and warm lines
   like the shop's cards, black buttons as on the shop, and the deeper rose (--gilt) only for small accents: the New count,
   the top line of the sales boxes, the chart bars. English titles take the shop's serif; Arabic keeps Tajawal (the user's
   choice for Arabic titles).
   ========================================================= */
.staff-body { --staff-bg: #FBF7F6; --line: var(--mist); --viz-1-soft: var(--card); background: var(--staff-bg); }
.staff-top { background: var(--blush); border-bottom-color: var(--blush-line); color: var(--ink); box-shadow: 0 1px 0 var(--blush-line); }
.staff-top .staff-tag { border-color: rgba(17,17,17,.55); color: var(--ink); }
.staff-top .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(17,17,17,.55); }
.staff-top .btn-ghost:hover, .staff-top .btn-ghost:focus-visible { background: rgba(17,17,17,.06); border-color: var(--ink); color: var(--ink); }
.staff-top .staff-tabs button { color: rgba(17,17,17,.6); }
.staff-top .staff-tabs button:hover { color: var(--ink); }
.staff-top .staff-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.staff-top .pill { background: var(--gilt); color: #fff; }
.staff-top :focus-visible { outline-color: var(--ink); }
@media (max-width: 719px) {
  .staff-tabs { background: var(--blush); border-top: 1px solid var(--blush-line); }
  .staff-top .staff-tabs button { color: rgba(17,17,17,.5); }
  .staff-top .staff-tabs button.on { color: var(--ink); }
}
@media (hover: hover) and (pointer: fine) {
  .staff-body .staff-top .btn-ghost:not(:disabled):hover { background: rgba(17,17,17,.06); border-color: var(--ink); }
  .staff-body .staff-top .staff-tabs button:not(.on):hover { color: var(--ink); border-bottom-color: rgba(17,17,17,.3); }
  .staff-body :is(.ord, .ctk, .pcard):hover { border-block-color: #DCCFCB; border-inline-end-color: #DCCFCB; }
}
.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: #6F4540; }
.staff-body .bar i { background: var(--gilt); }
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; }
/* the cool greys of the template's Staff, warmed to the shop's blush-white (same jobs, same strength) */
.staff-body .ord-tabs { background: #F1E8E5; }
.staff-body :is(.ord-search button, .cpn-type, .cpn-more summary::before, .ctk-bar, .dlv-step button:active) { background: #F3EBE8; }
.staff-body :is(.drv-items li) { border-top-color: var(--mist); }
.staff-body .drv-card { border-color: var(--mist); }
.staff-body .wa-setup code { background: #F3EBE8; }
.staff-body .kw-map { background: #FBF7F6; }
.staff-body .kw-gov { fill: #EFE4E1; }
.staff-body .ctk-switch:not([aria-checked="true"]) .knob { background: #DCCFCB; }   /* off only: on stays green (red for Pause) */
@media (hover: hover) and (pointer: fine) { .staff-body .export-group button:hover { background: #F3EBE8; } }
/* (2026-11-02, the user) Staff > Delivery shows no setup cards (Your delivery, Payment, Order alerts): Control Z sets them.
   They are still drawn and hidden here, so the code that reads them keeps working; the red bar still tells real problems. */
.staff-body .setup-cards { display: none !important; }
/* (2026-11-02, the user: "make this extremly simple, no ASAP thing. just delivery fee and delivery period and date")
   Staff > Delivery shows only the fee, the time windows and the days to choose from. The rest (what customers see, Pause
   orders, the ASAP choice, earliest day, preparation time, minimum order, closed days and dates) is hidden: its saved
   value still applies and is kept when the owner saves. */
.staff-body .dlv-extra { display: none !important; }
@media (min-width: 720px) { .staff-body .dlv > .dlv-card:first-of-type { grid-column: 1 / -1; } }
/* (2026-11-02, the user) no "Updated · Kuwait time", Sound or Refresh line at the top of Staff (the sound is always on,
   the panel reads new orders by itself), and no small notes under the Delivery fee and Delivery times titles */
.staff-body .staff-bar { display: none !important; }
.staff-body .dlv .dlv-title .muted { display: none !important; }
.staff-body .dlv .dlv-title { align-items: center; }
/* (2026-11-02, the user) no "Payments are in test mode" and no "test orders" notes in Staff (Orders tab and Overview);
   test orders still stay out of the sales and the New count */
.staff-body .setup-banner.test-mode, .staff-body .setup-banner.test, .staff-body .ov-chip.test { display: none !important; }
.staff-body .ov-apart:not(:has(> :not(.ov-chip.test))) { display: none; }   /* nothing else in the row: no empty gap */
/* (2026-11-02, the user: "fix this") the phone bottom bar was cut for 6 tabs and this Staff has 5: an empty gap on one
   side. However many tabs there are, they now 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 now (New, Delivered, Cancelled): no "Waiting for payment" */
.staff-body .ord-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 720px) { .staff-body .ord-tabs { grid-template-columns: repeat(3, auto); } }
/* (2026-11-02, the user: "make this very simple") Coupons: a code, a discount (% or KD) and Create. Hidden: the three
   counts, the Random button, the optional limits (min order, expiry, max uses), the preview ticket, the hint under the
   button, and on each coupon the min-order / expiry line and "Unlimited". New coupons have no limits; a wrong code
   still gets its message when Create is pressed. */
.staff-body :is(.cpn-stats, #cRandom, .cpn-more, .cpn-preview, .cc-save .muted, .ctk-meta, .ctk-use .muted) { display: none !important; }
.staff-body .cpn-grid { grid-template-columns: 1fr !important; }
/* (2026-11-02) Staff > Products: the products under their departments. A department's head: its name, how many products,
   Edit and up / down. A product's card: its own Department menu. The department window: two names and the photo kind. */
.staff-body .dept { margin-top: 18px; }
.staff-body .dept-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.staff-body .dept-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.staff-body .dept-name h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
html:not([lang="ar"]) .staff-body .dept-name h3 { font-family: var(--display); font-size: 22px; font-weight: 600; }
.staff-body .dept-count { flex: none; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; text-align: center; }
.staff-body .dept-tools { display: flex; gap: 6px; flex: none; }
.staff-body .dept-tools .btn { min-width: 40px; }
.staff-body .dept-empty { margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; background: #fff; }
.staff-body .pc-dept { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 12px; color: var(--muted); }
.staff-body .pc-dept select { font: inherit; font-size: 13px; color: var(--ink); padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background-color: #fff; max-width: 100%; min-width: 0; }
.staff-body #dAdd { white-space: nowrap; }
.staff-body .dept-form { max-width: 480px; }
.staff-body .dept-form .field input { width: 100%; }
.staff-body .pc-dept { min-width: 0; }
.staff-body .pc-dept span { flex: none; }
.staff-body .pc-dept select { flex: 1 1 auto; width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (min-width: 720px) { .staff-body .pc-dept select { flex: 0 1 auto; width: auto; max-width: 260px; } }

/* Control Z (2026-11-08): the agency credit under the policy links */
.footer-credit { margin: 14px 0 0; font-size: 12px; opacity: .75; }
.footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }