/* =========================================================
   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: #0B0B0B;         /* text, primary buttons */
  --oud: #111111;         /* accent: links, focus (monochrome) */
  --gilt: #F7691A;        /* logo gold, saved hearts */
  --mist: #E4E6EA;        /* borders, dividers: cool grey */
  --card: #EDEFF2;        /* image background: pale concrete grey */
  --muted: #6B7078;
  --ok: #2F7A57;
  --warn: #B4531B;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* staff products on phones: Edit and up / down in a small column on the right; price under the name */
@media (max-width: 719px) {
  .pcard { grid-template-columns: 64px 1fr auto; grid-template-areas: "thumb main act" "thumb price act"; align-items: center; }
  .pcard .pc-thumb { grid-area: thumb; }
  .pcard .pc-main { grid-area: main; align-self: end; }
  .pcard .pc-price { grid-area: price; grid-column: auto; align-self: start; font-size: 15px; }
  .pcard .pc-actions { grid-area: act; grid-column: auto; margin: 0; display: grid; grid-template-columns: 38px 38px; gap: 6px; align-self: center; }
  .pcard .pc-actions .btn { min-height: 38px; padding: 0; justify-content: center; font-size: 13px; }
  .pcard .pc-actions [data-pedit] { grid-column: 1 / -1; }
  /* (2026-11-04, from PiXiU) inside a department card: the name over the full width, then the price with Edit and up / down on its right */
  .staff-body .dept .pcard { grid-template-columns: 64px 1fr auto; grid-template-areas: "thumb main main" "thumb price act"; gap: 8px 12px; }
  .staff-body .dept .pcard .pc-actions { display: flex; align-items: center; gap: 6px; }
  .staff-body .dept .pc-main > b { font-size: 17px; line-height: 1.2; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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; }
/* always clear on the footer band (the user, 2026-11-14): white on the dark footer, ink on the light one */
.legal-links a { padding: 4px 12px; color: #fff; line-height: 1.3; }
.legal-links a + a { border-inline-start: 1px solid rgba(255,255,255,.35); }
@media (hover: hover) { .legal-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } }
.legal-links a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
[data-head="light"] .legal-links a, [data-head="light"] .legal-links a:hover { color: var(--ink); }
[data-head="light"] .legal-links a + a { border-inline-start-color: rgba(17,17,17,.3); }
[data-head="light"] .legal-links a:focus-visible { outline-color: var(--ink); }
.policy { padding-bottom: 36px; }
.policy-date { margin-top: 2px; }
.policy-sec { margin-top: 28px; }
.policy-sec h2 { font-size: 26px; margin: 0 0 8px; }
.policy-sec p { margin: 8px 0; line-height: 1.65; }
.policy-link { text-decoration: underline; text-underline-offset: 3px; }

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

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


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

/* (2026-11-02, the user) Staff for the owner is simple. Hidden for the owner, shown in setup mode (staff.html#setup, for
   Control Z; staff.js SETUP): the setup cards (Riders or Your delivery, Payment, Order alerts), the extra delivery settings
   (what customers see, Pause orders, the ASAP choice, days to choose from, earliest day, preparation time, minimum order,
   closed days and dates; their saved values still apply and are kept when the owner saves), and the test notes. Always
   hidden: the "Updated / Sound / Refresh" line (the sound is always on, Staff reads new orders by itself) and the small
   notes under the Delivery titles. The cards are always drawn, so the code that reads them keeps working. */
.staff-body:not(.setup-mode) .setup-cards { display: none !important; }
.staff-body:not(.setup-mode) .dlv-extra { display: none !important; }
@media (min-width: 720px) { .staff-body:not(.setup-mode) .dlv > .dlv-card:first-of-type { grid-column: 1 / -1; } }
.staff-body .staff-bar { display: none !important; }
.staff-body .dlv .dlv-title .muted { display: none !important; }
.staff-body .dlv .dlv-title { align-items: center; }
.staff-body:not(.setup-mode) :is(.setup-banner.test-mode, .setup-banner.test, .ov-chip.test) { display: none !important; }
.staff-body:not(.setup-mode) .ov-apart:not(:has(> :not(.ov-chip.test))) { display: none; }   /* nothing else in the row: no empty gap */
.staff-body .setup-flag { margin-top: 12px; }
.staff-body .setup-flag a { font-weight: 600; margin-inline-start: 6px; }
/* (2026-11-02, the user: "fix this") the phone's bottom bar: however many tabs there are, they share the whole width */
@media (max-width: 719px) {
  .staff-body .staff-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
/* (2026-11-02, the user) three order tabs (New, Delivered, Cancelled): no "Waiting for payment" */
.staff-body .ord-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 720px) { .staff-body .ord-tabs { grid-template-columns: repeat(3, auto); } }
/* (2026-11-02, the user: "make this very simple") Coupons: a code, a discount (% or KD) and Create. Hidden: the three
   counts, the Random button, the optional limits (min order, expiry, max uses), the preview ticket, the hint under the
   button, and on each coupon the min-order / expiry line and "Unlimited". New coupons have no limits; a wrong code
   still gets its message when Create is pressed. */
.staff-body :is(.cpn-stats, #cRandom, .cpn-more, .cpn-preview, .cc-save .muted, .ctk-meta, .ctk-use .muted) { display: none !important; }
.staff-body .cpn-grid { grid-template-columns: 1fr !important; }
/* (2026-11-04, from PiXiU) Staff > Products: one card per department (the user: "make separation between brands look clear
   and professional and fix these, they look ugly"). A tinted head with an ink bar, the department's name and "N products", then its
   products as rows with a thin line between them. Edit and up / down are icon buttons of one colour and size. */
.staff-body .dept { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(17, 13, 75, .05); }
.staff-body .dept-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0;
  padding: 12px 14px 12px 20px; background: var(--staff-bg); border-bottom: 1px solid var(--line); }
html[dir="rtl"] .staff-body .dept-head { padding: 12px 20px 12px 14px; }
.staff-body .dept-head::before { content: ""; position: absolute; top: 12px; bottom: 12px; inset-inline-start: 0; width: 4px; border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--ink); }
.staff-body .dept-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.staff-body .dept-name h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.staff-body .dept-count { flex: none; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.staff-body .dept-tools { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }
.staff-body .dept .pcard { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 12px 20px; }
.staff-body .dept .pcard + .pcard { border-top: 1px solid var(--line); }
.staff-body .dept-empty { margin: 14px; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; background: var(--staff-bg); }
.staff-body #dAdd { white-space: nowrap; }
.staff-body .dept-form { max-width: 480px; }
.staff-body .pc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ic-edit { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ic-edit:hover { border-color: var(--ink); }
.ic-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ic-btn { width: 32px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.ic-btn:hover:not(:disabled) { background: var(--staff-bg); }
.ic-btn:disabled { opacity: .25; cursor: default; }
:is(.ic-btn, .ic-edit):focus-visible { outline: 2px solid var(--viz-1); outline-offset: 2px; }
:is(.ic-btn, .ic-edit) svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
  .staff-body .dept-head { flex-wrap: wrap; }
  .staff-body .dept .pcard { padding: 12px 14px; }
}
.staff-body .dept-form .field input { width: 100%; }

/* ==== BONES HUB START (Downloads/BonesHub_intake/scripts/port_css.py writes this block) ==== */
/* =========================================================
   BONES Hub theme (2026-11-15): the colours of the owner's TikTok posts. Black, a warm cream, BONES orange #F7691A.
   Anton (tall, heavy, condensed: the posters' big letters) for headings, names and the stage's giant words; Jost for the
   rest. Arabic: Tajawal, with Lalezar (a heavy poster face) for headings. The header, menu and footer are black with the
   orange BONES HUB letters (img/logo_white.png is kept in colour on purpose).
   ========================================================= */
:root {
  --porcelain: #FBF7F1;          /* the light pages (bag, checkout, help, phone shop): a warm off-white */
  --card: #F1E8DC;               /* behind a photo: kraft cream */
  --mist: #E6DDD0;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
}
html[lang="ar"] { --display: "Lalezar", "Tajawal", "Segoe UI", Tahoma, sans-serif; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: .01em; }
html[lang="ar"] :is(h1, h2, h3, h4) { letter-spacing: 0; }
/* product names are English on both sides: always Anton */
.card-name, .line-name, .pdp-title h1, .hero-tag b, #heroName, .pick-row b,
html[lang="ar"] .card-name, html[lang="ar"] .line-name, html[lang="ar"] .pdp-title h1, html[lang="ar"] .hero-tag b, html[lang="ar"] #heroName {
  font-family: "Anton", "Impact", "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: .015em; text-transform: uppercase; }
.card-name { font-size: 18px; color: var(--ink) !important; }
/* the main button: BONES orange with black words (orange with white words is too faint to read) */
.btn { background: var(--gilt); border-color: var(--gilt); color: #0B0908; font-weight: 600; }
.btn:hover { background: #FF8A3D; border-color: #FF8A3D; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--mist); }
.btn-ghost:hover { background: transparent; border-color: var(--ink); }
.chip[aria-pressed="true"], .chip.active { background: var(--ink); color: var(--gilt); border-color: var(--ink); }
.card-add { background: var(--gilt); color: #0B0908; }
.announce { background: #0B0908; color: var(--gilt); }
/* the stage's small skull, the brand's mascot, in the top corner */
.ds-skull { position: absolute; z-index: 4; top: 4.5vh; left: var(--edge); width: 54px; height: auto; opacity: .92; pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(247, 105, 26, .35)); }
html[dir="rtl"] .ds-skull { left: auto; right: var(--edge); }
/* grind badge: Ground is the cream outline, Whole bean is orange */
.ds-badge[hidden] { display: none; }
/* the phone stage's name in the poster letters, like the PC */
.ms-name { font-family: "Anton", "Impact", "Arial Narrow", sans-serif; font-weight: 400; font-size: 30px; letter-spacing: .015em; text-transform: uppercase; line-height: 1.02; }

/* =========================================================
   PiXiU (ported to BONES Hub 2026-11-15) PC look (2026-10-31, the user: "design the website for pc view ... insane and very very creative, like the screen
   split"). Only html.desk: a wide screen with a mouse (entry.js, desk.js). The home page becomes a dark stage: one statue
   at a time between giant words (WebGL from img/stage/: it turns a little with the mouse, scrolling slices it along the
   shop's glowing line), then the two doors (Available | Pre-Order), the groups gallery that moves sideways, and dark cards
   that lean toward the mouse. Archivo at its narrowest heaviest (one fixed cut: the variable font's outlines show their
   inner seams when stroked) draws the giant words; Jost stays for everything else.
   ========================================================= */
@property --x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
html.desk, html.mob {          /* (the phone look, html.mob, shares these: touch.js) */
  --void: #0B0908;          /* the stage: warm black */
  --bone: #F4ECDF;          /* words on the stage: cream */
  --smoke: rgba(244, 236, 223, .62);
  --halo: #FF8A3D;          /* the glowing line: BONES orange */
  --wide: "Anton", "Impact", "Arial Narrow", sans-serif;
  --page-w: min(1180px, 100vw - 56px);
  --edge: max(28px, (100vw - 1180px) / 2);
}
.dstage, .ddoors, .dgroups { display: none; }
html.desk.desk-home .dstage, html.desk.desk-home .ddoors, html.desk.desk-home .dgroups { display: block; }
/* the phone's hero and group tiles never show on PC (desk.js puts the stage, doors and rooms in their place; html.desk-plain
   when it cannot); until the stage is in, the page waits hidden like every page's first frame (desk-wait, at most 2.5 s) */
html.desk:not(.desk-plain) body[data-page="home"] .hero, html.desk:not(.desk-plain) body[data-page="home"] .home-groups { display: none; }
html.desk.desk-wait body:is([data-page="home"], [data-page="product"]) > main { opacity: 0; }
html.desk.booting body[data-page="product"] .pdp-info { visibility: hidden; }
html.desk body[data-page="home"] { background: var(--void); color: var(--bone); }
html.desk body[data-page="home"] > main { padding-top: 0; }

/* ---- the stage ---- */
.dstage { position: relative; background: var(--void); color: var(--bone);
  height: calc(100vh - var(--header-h) + (var(--n, 1) - 1) * var(--step, 90vh) + 24vh); }
.ds-snap { position: absolute; left: 0; top: calc(var(--k) * var(--step, 90vh)); width: 1px; height: 1px; pointer-events: none; }
.ds-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden; isolation: isolate; }
/* the light: a cone from above, a pool on the floor, a fine grain over all */
.ds-light { position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none; transition: opacity .6s;
  background:
    conic-gradient(from 180deg at 50% -12%, transparent 157deg, rgba(247, 105, 26, .09) 168deg, rgba(255, 140, 60, .17) 180deg, rgba(247, 105, 26, .09) 192deg, transparent 203deg),
    radial-gradient(42% 15% at 50% 91%, rgba(247, 105, 26, .34), transparent 72%),
    radial-gradient(60% 55% at 50% 30%, rgba(140, 52, 8, .22), transparent 70%); }
.ds-pin::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ds-pin::after { content: ""; position: absolute; left: 8%; right: 8%; top: 90%; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 170, 110, .28) 30%, rgba(255, 170, 110, .28) 70%, transparent); }
.ds-gl, .ds-still { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.ds-still[hidden] { display: none; }
.ds-still { object-fit: contain; object-position: 50% 88%; padding: 10vh 0 9vh; }
/* the giant word behind the statue (an outline copy in front was tried: it read as lines across the faces) */
/* the names are English in both languages: always left to right (in Arabic the letters would line up backwards) */
.ds-word, .dx-word { direction: ltr; unicode-bidi: isolate; }
.ds-word { position: absolute; left: 0; right: 0; top: 43%; translate: 0 -50%; display: grid; justify-items: center; pointer-events: none;
  font-family: var(--wide); font-weight: 400; line-height: .78; letter-spacing: -.012em; white-space: nowrap; opacity: 0; }
.ds-word.back { z-index: 1; }
.ds-word .dw { grid-area: 1 / 1; display: block; overflow: hidden; padding: .07em .02em .05em; }
.ds-word i { display: inline-block; font-style: normal; transform-origin: 50% 100%; will-change: transform, opacity; }
.ds-word.back i { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, rgba(244, 236, 223, .96) 8%, rgba(255, 150, 80, .62) 55%, rgba(247, 105, 26, .14) 100%); }
.dw-probe { position: absolute; visibility: hidden; font-size: 100px; white-space: nowrap; }
/* the placard: what the piece is, its price, the way in */
.ds-card { position: absolute; z-index: 4; left: var(--edge); bottom: 6.5vh; width: min(360px, 28vw); display: grid; gap: 6px; }
html[dir="rtl"] .ds-card { left: auto; right: var(--edge); }
.ds-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--smoke); }
.ds-name { font-family: var(--wide); font-size: 34px; font-weight: 400; letter-spacing: .01em; text-transform: uppercase; line-height: 1.08; color: var(--bone); text-wrap: balance; }
.ds-name:hover { color: #fff; }
.ds-buy { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.ds-price { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.ds-badge { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 99px; border: 1px solid rgba(244, 236, 223, .38); color: var(--bone); }
.ds-badge.pre { border-color: transparent; background: #F7691A; color: #fff; }
.ds-go { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; height: 48px; padding: 0 22px 0 24px; border-radius: 99px;
  background: var(--gilt); color: #0B0908; font-weight: 600; transition: background .2s, gap .25s; }
.ds-go:hover { background: #FF8A3D; gap: 16px; }
.ds-go svg { width: 18px; height: 18px; }
html[dir="rtl"] .ds-go svg { transform: scaleX(-1); }
/* the rail: every piece on the stage, the one shown lit */
.ds-rail { position: absolute; z-index: 4; right: var(--edge); top: 50%; translate: 0 -50%; display: grid; gap: 10px;
  max-height: calc(100% - 96px); overflow: hidden; padding-inline-end: 12px; margin-inline-end: -12px; }   /* the padding keeps the lit line */
.ds-rail.long { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
html[dir="rtl"] .ds-rail { right: auto; left: var(--edge); }
.ds-rail button { position: relative; width: 52px; height: 70px; padding: 4px; border: 0; border-radius: 10px; background: rgba(244, 236, 223, .04); opacity: .42; transition: opacity .3s, background .3s; }
.ds-rail button img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.ds-rail button:hover { opacity: .8; }
.ds-rail button.on { opacity: 1; background: rgba(247, 105, 26, .14); }
.ds-rail button::after { content: ""; position: absolute; top: 14%; bottom: 14%; right: -10px; width: 2px; border-radius: 2px; background: var(--halo);
  box-shadow: 0 0 8px rgba(255, 120, 40, .9); transform: scaleY(0); transition: transform .35s var(--ease); }
html[dir="rtl"] .ds-rail button::after { right: auto; left: -10px; }
.ds-rail button.on::after { transform: scaleY(1); }
.ds-hint { position: absolute; z-index: 4; left: 50%; bottom: 2.4vh; translate: -50% 0; display: grid; justify-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .06em; color: var(--smoke); transition: opacity .4s; }
.ds-hint i { width: 1px; height: 34px; background: linear-gradient(var(--halo), transparent); transform-origin: top; animation: hintRun 1.8s var(--ease) infinite; }
@keyframes hintRun { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.dstage.moved .ds-hint { opacity: 0; }
/* reduced motion: scrolling does not change the piece (the rail does), so no "Scroll" hint (desk.js .is-fixed) */
.dstage.is-fixed .ds-hint { display: none; }

/* ---- the two doors: Available | Pre-Order, split by the glowing line; the side under the mouse opens wider ---- */
.ddoors { position: relative; height: calc(100vh - var(--header-h)); min-height: 560px; overflow: hidden; background: var(--void); color: var(--bone);
  --x: 50%; --s: 7vw; transition: --x .95s cubic-bezier(.65, 0, .25, 1); }
.ddoors[data-open="now"] { --x: 63%; }
.ddoors[data-open="pre"] { --x: 37%; }
.door { position: absolute; inset: 0; display: block; color: inherit; transition: filter .8s ease; }
.door-now { clip-path: polygon(0 0, calc(var(--x) + var(--s)) 0, calc(var(--x) - var(--s)) 100%, 0 100%);
  background: radial-gradient(60% 70% at 24% 100%, rgba(247, 105, 26, .34), transparent 70%), radial-gradient(50% 50% at 20% 0%, rgba(140, 52, 8, .25), transparent 70%), var(--void); }
.door-pre { clip-path: polygon(calc(var(--x) + var(--s)) 0, 100% 0, 100% 100%, calc(var(--x) - var(--s)) 100%);
  background: radial-gradient(60% 70% at 76% 100%, rgba(255, 120, 40, .36), transparent 70%), radial-gradient(50% 50% at 84% 0%, rgba(247, 105, 26, .22), transparent 70%), #140D09; }
html[dir="rtl"] .door-now { clip-path: polygon(100% 0, calc(100% - var(--x) - var(--s)) 0, calc(100% - var(--x) + var(--s)) 100%, 100% 100%); }
html[dir="rtl"] .door-pre { clip-path: polygon(0 0, calc(100% - var(--x) - var(--s)) 0, calc(100% - var(--x) + var(--s)) 100%, 0 100%); }
.ddoors[data-open="now"] .door-pre, .ddoors[data-open="pre"] .door-now { filter: brightness(.5) saturate(.7); }
.door-seam { position: absolute; inset: 0; z-index: 3; pointer-events: none; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)) drop-shadow(0 0 12px rgba(247, 105, 26, .9)); }
.door-seam i { position: absolute; inset: 0; background: var(--halo);
  clip-path: polygon(calc(var(--x) + var(--s) - 1px) 0, calc(var(--x) + var(--s) + 1px) 0, calc(var(--x) - var(--s) + 1px) 100%, calc(var(--x) - var(--s) - 1px) 100%); }
html[dir="rtl"] .door-seam i { clip-path: polygon(calc(100% - var(--x) - var(--s) - 1px) 0, calc(100% - var(--x) - var(--s) + 1px) 0, calc(100% - var(--x) + var(--s) + 1px) 100%, calc(100% - var(--x) + var(--s) - 1px) 100%); }
.door-word { position: absolute; z-index: 0; font-family: var(--wide); font-weight: 400; font-size: 21vw; line-height: .76; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.2px rgba(244, 236, 223, .14); white-space: nowrap; pointer-events: none; transition: -webkit-text-stroke-color .8s, transform 1.2s var(--ease); }
.door-now .door-word { left: -1vw; bottom: -2vh; }
.door-pre .door-word { right: -1vw; top: 1vh; }
html[dir="rtl"] .door-now .door-word { left: auto; right: -1vw; }
html[dir="rtl"] .door-pre .door-word { right: auto; left: -1vw; }
.ddoors[data-open="now"] .door-now .door-word, .ddoors[data-open="pre"] .door-pre .door-word { -webkit-text-stroke-color: rgba(255, 170, 110, .32); }
.door-trio { position: absolute; z-index: 1; bottom: 0; width: 46%; height: 66%; transition: transform 1s var(--ease); transform-origin: 50% 100%; }
.door-now .door-trio { left: 4%; }
.door-pre .door-trio { right: 4%; }
html[dir="rtl"] .door-now .door-trio { left: auto; right: 4%; }
html[dir="rtl"] .door-pre .door-trio { right: auto; left: 4%; }
/* each statue sized by its own outline (desk.js boxVars): its height --sh of the trio, its foot on the floor, its middle on --cx */
.door-trio img { --sh: 96%; --cx: 50%; position: absolute; left: var(--cx); height: calc(var(--sh) / var(--bh, 1)); bottom: calc((var(--by, 1) - 1) * var(--sh) / var(--bh, 1) + 3%);
  width: auto; max-width: none; translate: calc(var(--bx, .5) * -100%) 0; transition: transform 1s var(--ease), filter 1s; }
.door-trio .t0 { z-index: 2; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.door-trio .t1 { --sh: 72%; --cx: 18%; z-index: 1; filter: brightness(.72) saturate(.9); }
.door-trio .t2 { --sh: 72%; --cx: 82%; z-index: 1; filter: brightness(.72) saturate(.9); }
.ddoors[data-open="now"] .door-now .door-trio, .ddoors[data-open="pre"] .door-pre .door-trio { transform: scale(1.05); }
.ddoors[data-open="now"] .door-now .t1, .ddoors[data-open="pre"] .door-pre .t1 { transform: translateX(-8%); filter: brightness(.7); }
.ddoors[data-open="now"] .door-now .t2, .ddoors[data-open="pre"] .door-pre .t2 { transform: translateX(8%); filter: brightness(.7); }
.door-copy { position: absolute; z-index: 2; top: 9vh; display: grid; gap: 8px; width: min(400px, 30vw); }
.door-now .door-copy { left: var(--edge); }
.door-pre .door-copy { right: var(--edge); text-align: end; justify-items: end; }
html[dir="rtl"] .door-now .door-copy { left: auto; right: var(--edge); }
html[dir="rtl"] .door-pre .door-copy { right: auto; left: var(--edge); }
.door-copy small { font-size: 13px; color: var(--smoke); }
.door-copy b { font-family: var(--wide); text-transform: uppercase; font-size: clamp(52px, 5.4vw, 84px); font-weight: 500; line-height: .95; letter-spacing: -.01em; }
.door-copy > span { font-size: 16px; color: var(--smoke); max-width: 30ch; }
.door-copy em { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; height: 48px; padding: 0 22px 0 24px; border-radius: 99px; font-style: normal; font-weight: 500;
  background: var(--bone); color: #0B0908; transition: gap .25s, background .2s; }
.door-pre .door-copy em { justify-self: end; background: var(--bone); color: #0B0908; }
.door:hover .door-copy em { gap: 16px; }
.door-copy em svg { width: 18px; height: 18px; }
html[dir="rtl"] .door-copy em svg { transform: scaleX(-1); }
.door:focus-visible { outline: none; }
.door:focus-visible .door-copy em { outline: 2px solid var(--halo); outline-offset: 3px; }

/* ---- the groups gallery: scrolling down moves the rooms sideways (desk.js sets the height and the move) ---- */
.dgroups { position: relative; background: var(--void); color: var(--bone); }
.dg-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); min-height: 560px; overflow: hidden; display: flex; flex-direction: column; gap: 3vh; padding: 6vh 0 5vh; }
.dg-head { width: var(--page-w); margin: 0 auto; display: flex; align-items: baseline; justify-content: space-between; }
.dg-head h2 { font-size: 44px; font-weight: 500; color: var(--bone); }
.dg-head a { font-size: 14px; color: var(--halo); border-bottom: 1px solid currentColor; }
.dg-track { flex: 1; min-height: 0; display: flex; gap: 22px; padding-inline: var(--edge); will-change: transform; }
.dg-room { --off: 0; position: relative; flex: 0 0 auto; width: clamp(320px, 29vw, 460px); height: 100%; border-radius: 24px; overflow: hidden; isolation: isolate; color: var(--bone);
  background: radial-gradient(85% 55% at 50% 100%, color-mix(in srgb, var(--c) 62%, transparent), transparent 72%), linear-gradient(180deg, #18110D, #0E0A08);
  box-shadow: inset 0 0 0 1px rgba(255, 170, 110, .08); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .4s; }
.dg-room.lit { box-shadow: inset 0 0 0 1px rgba(255, 170, 110, .22); }
.dg-name { position: absolute; z-index: 0; top: 3%; left: 6%; right: -40%; font-family: var(--wide); font-weight: 400; font-size: clamp(90px, 9vw, 150px);
  line-height: .8; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px rgba(244, 236, 223, .2);
  transform: translateX(calc(var(--off) * -90px)); transition: -webkit-text-stroke-color .4s; }
html[dir="rtl"] .dg-name { left: -40%; right: 6%; text-align: right; }
.dg-room:hover .dg-name { -webkit-text-stroke-color: rgba(244, 236, 223, .4); }
/* the statue sized by its own outline (desk.js boxVars): 74% of the room tall, its foot near the bottom, its middle centred */
.dg-room img { --sh: calc(74% * min(1, .88 / var(--r, .7))); position: absolute; z-index: 1; left: 50%; height: calc(var(--sh) / var(--bh, .84)); bottom: calc((var(--by, 1) - 1) * var(--sh) / var(--bh, .84) + 1%);
  width: auto; max-width: none; translate: calc(var(--bx, .5) * -100%) 0;
  transform: translateX(calc(var(--off) * -70px)) scale(1); transform-origin: 50% 100%; transition: transform .7s var(--ease), filter .5s; filter: brightness(.86); }
.dg-room:hover img { transform: translateX(calc(var(--off) * -70px)) scale(1.045); filter: brightness(1.05); }
.dg-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 60px 22px 20px; display: grid; gap: 2px;
  background: linear-gradient(180deg, transparent, rgba(11, 9, 8, .78) 52%, rgba(11, 9, 8, .94)); }
.dg-copy b { font-size: 28px; font-weight: 500; line-height: 1.05; }
.dg-copy small { font-size: 13px; color: var(--halo); }
.dg-copy span { font-size: 14px; color: var(--smoke); }
.dg-room::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 170, 110, .16), transparent 42%); }
.dg-room.lit::after { opacity: 1; }
.dg-bar { width: var(--page-w); margin: 0 auto; height: 1px; background: rgba(255, 170, 110, .14); }
.dg-bar i { display: block; height: 100%; background: var(--halo); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 8px rgba(255, 120, 40, .9); }
html[dir="rtl"] .dg-bar i { transform-origin: right; }

/* ---- the rest of the home page on the dark: the featured pieces ---- */
html.desk body[data-page="home"] main > .section { padding-top: 12vh !important; padding-bottom: 10vh; }
html.desk body[data-page="home"] .section-head h2 { font-size: 44px; color: var(--bone); }
html.desk body[data-page="home"] .section-head a { color: var(--halo); }

/* ---- dark cards (home and shop on PC): the photo's black is the card, the statue floats; a light follows the mouse ---- */
html.desk body[data-page="home"] main .card { background: #17120E; border-color: rgba(255, 170, 110, .08); color: var(--bone); }
html.desk main .card { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .4s; }
html.desk main .card.lit { box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55); }
html.desk main .card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 170, 110, .16), transparent 40%); }
html.desk main .card.lit::after { opacity: 1; }
html.desk main .card.lit .card-media img { transform: scale(1.04); }
html.desk body[data-page="home"] main .card-body .price { color: var(--bone); }
html.desk body[data-page="home"] main .card-name { color: var(--bone) !important; }
html.desk body[data-page="home"] main .card-go { background: rgba(244, 236, 223, .1); color: var(--bone); }


/* ---- PC: the shop and product pages are dark too (the bag, checkout and help pages keep the cream) ---- */
html.desk body:is([data-page="product"], [data-page="shop"]) { background: var(--void); color: var(--bone); }
html.desk body:is([data-page="home"], [data-page="product"], [data-page="shop"]) main .card { background: #17120E; border-color: rgba(255, 170, 110, .08); color: var(--bone); }
html.desk body:is([data-page="product"], [data-page="shop"]) main .card-name { color: var(--bone) !important; }
html.desk body:is([data-page="product"], [data-page="shop"]) main .card-body .price { color: var(--bone); }
html.desk body:is([data-page="product"], [data-page="shop"]) main .card-go { background: rgba(244, 236, 223, .1); color: var(--bone); }
html.desk body:is([data-page="home"], [data-page="product"], [data-page="shop"]) main .card-add { background: var(--bone); color: #0B0908; }
html.desk body:is([data-page="product"], [data-page="shop"]) .crumbs { color: var(--smoke); }
html.desk body:is([data-page="product"], [data-page="shop"]) .crumbs a:hover { color: var(--bone); }
html.desk body:is([data-page="product"], [data-page="shop"]) .section-head h2 { font-size: 44px; color: var(--bone); }
html.desk body:is([data-page="product"], [data-page="shop"]) .section-head a { color: var(--halo); }
html.desk body:is([data-page="home"], [data-page="product"], [data-page="shop"]) main .btn { background: var(--bone); border-color: var(--bone); color: #0B0908; }
html.desk body:is([data-page="home"], [data-page="product"], [data-page="shop"]) main .btn:hover { background: #fff; border-color: #fff; }
html.desk body:is([data-page="home"], [data-page="product"], [data-page="shop"]) main .btn-ghost { background: transparent; color: var(--bone); border-color: rgba(244, 236, 223, .3); }
html.desk body:is([data-page="home"], [data-page="product"], [data-page="shop"]) main .btn-ghost:hover { background: rgba(244, 236, 223, .08); border-color: var(--bone); }

/* the shop list: title, tabs, chips and sort on the dark */
html.desk body[data-page="shop"] .shop-title h1 { color: var(--bone); font-size: 56px; }
html.desk body[data-page="shop"] .shop-count { color: var(--smoke); }
html.desk body[data-page="shop"] .sort-pill { background-color: rgba(244, 236, 223, .05); color: var(--bone); border-color: rgba(255, 170, 110, .2); }
html.desk body[data-page="shop"] .sort-pill option { background: #17120E; color: var(--bone); }
html.desk body[data-page="shop"] .chip { background: transparent; color: var(--bone); border-color: rgba(255, 170, 110, .2); }
html.desk body[data-page="shop"] .chip:hover { border-color: rgba(255, 170, 110, .5); }
html.desk body[data-page="shop"] .chip[aria-pressed="true"], html.desk body[data-page="shop"] .chip.active { background: var(--bone); color: #0B0908; border-color: var(--bone); }
html.desk body[data-page="shop"] .grid { gap: 22px; }
html.desk body[data-page="shop"] .empty { color: var(--smoke); }

/* the product page: the piece on a stage that fills the left of the screen, the details on the right */
html.desk body[data-page="product"] main.container { max-width: none; padding: 0; }
html.desk body[data-page="product"] .crumbs { position: absolute; z-index: 6; top: calc(var(--header-h) + 14px); left: var(--edge); right: 46%; padding: 0; }
html[dir="rtl"].desk body[data-page="product"] .crumbs { left: 46%; right: var(--edge); }
html.desk body[data-page="product"] .pdp { grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 600px); gap: 0; margin-top: 0; }
html.desk body[data-page="product"] .gallery { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); min-height: 560px; margin: 0; border-radius: 0; overflow: hidden;
  background: #120E0B; transition: background .9s ease; }
html.desk body[data-page="product"] .gallery.staged { background: var(--void); }
html.desk body[data-page="product"] .gallery-track { height: 100%; }
html.desk body[data-page="product"] .gallery-track > div { aspect-ratio: auto; height: 100%; }
html.desk body[data-page="product"] .gallery-track img { object-fit: contain; padding: 9vh 5vw 14vh; transition: opacity .55s ease; }
html.desk body[data-page="product"] .gallery.staged .gallery-track img { opacity: 0; }
html.desk body[data-page="product"] .dots { display: none; }
/* (2026-10-31 audit) the stage and its thumbnails are the PC look's only: a product page made narrower than 1100 px shows
   the phone gallery again, not the stage over it (desk.js stops drawing it too) */
.dx-stage, .dx-thumbs { display: none; }
html.desk .dx-stage { display: block; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
html.desk .gallery.staged .dx-stage { opacity: 1; }
.dx-stage .ds-light { opacity: 0; }
.dx-word { position: absolute; left: 0; right: 0; top: 40%; translate: 0 -50%; display: grid; justify-items: center; pointer-events: none;
  font-family: var(--wide); font-weight: 400; line-height: .8; letter-spacing: -.012em; white-space: nowrap; }
.dx-word .dl { display: block; overflow: hidden; padding: .06em .02em .03em; }
.dx-word i { display: inline-block; font-style: normal; transform: translateY(108%); transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 45ms);
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, rgba(244, 236, 223, .92) 8%, rgba(255, 150, 80, .56) 58%, rgba(247, 105, 26, .12) 100%); }
.dx-word.in i { transform: none; }
html.desk .dx-thumbs { position: absolute; z-index: 3; left: 50%; bottom: 3.2vh; translate: -50% 0; display: flex; gap: 10px; }
.dx-thumbs button { width: 54px; height: 76px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 170, 110, .18); background: #120E0B; opacity: .5; transition: opacity .25s, border-color .25s, transform .25s; }
.dx-thumbs button:hover { opacity: .85; transform: translateY(-2px); }
.dx-thumbs button.on { opacity: 1; border-color: var(--halo); box-shadow: 0 0 12px rgba(255, 120, 40, .45); }
.dx-thumbs img { width: 100%; height: 100%; object-fit: contain; }
/* (PiXiU (ported to BONES Hub 2026-11-15) 2026-11-05) the product's video on the product page: the second slide (phone) or view (PC); its thumbnail has a play sign */
html.desk body[data-page="product"] .pdp-info { width: 100%; max-width: 560px; padding-block: 52px 64px; padding-inline: clamp(36px, 3.6vw, 64px); }
html.desk body[data-page="product"] .pdp-title { padding-top: 0; }
html.desk body[data-page="product"] .pdp-title h1 { color: var(--bone) !important; font-size: 40px; font-weight: 500; line-height: 1.08; text-wrap: balance; }
html.desk body[data-page="product"] #pFamily, html.desk body[data-page="product"] .muted { color: var(--smoke); }
/* (2026-11-03) the white sheets (search, bag, choices) keep the cream pages' navy text on the dark PC pages: they took the
   page's cream words and could not be read */
:is(html.desk, html.mob) body:is([data-page="home"], [data-page="product"], [data-page="shop"]) .sheet { color: var(--ink); }
:is(html.desk, html.mob) body:is([data-page="home"], [data-page="product"], [data-page="shop"]) .sheet .muted { color: var(--muted); }
html.desk body[data-page="product"] .pdp-price { color: var(--bone); font-size: 26px; margin-top: 18px; }
html.desk body[data-page="product"] main .qty { background: transparent; border-color: rgba(244, 236, 223, .25); color: var(--bone); }
html.desk body[data-page="product"] details.acc, html.desk body[data-page="product"] details.acc:last-of-type { border-color: rgba(255, 170, 110, .14); }
html.desk body[data-page="product"] details.acc summary { color: var(--bone); }
html.desk body[data-page="product"] details.acc .acc-body { color: var(--smoke); }
html.desk body[data-page="product"] .specs > div { border-color: rgba(255, 170, 110, .1); }
html.desk body[data-page="product"] .specs span { color: var(--smoke); }
html.desk body[data-page="product"] .specs b { color: var(--bone); }   /* (2026-11-03) was the navy ink: unreadable on the dark page */
html.desk body[data-page="product"] main > .section { max-width: 1180px; margin: 0 auto; padding: 12vh 28px 10vh; }

/* =========================================================
   PiXiU phone look (2026-10-31, the user: "make the home page extremely creative for mobile view, following our pc style
   but i want it to be better logic for mobile! with better mobile interaction"). html.mob = everything that is not the PC
   look (entry.js, touch.js): the home page in the PC's dark stage style, made for the thumb. Nothing is pinned; the page
   scrolls as usual. The stage (a sideways swipe slices the statue along the line the finger draws, bars run like
   stories), the doors one above the other with the glowing line between them (it moves while the page scrolls, each
   door's word runs along it), the groups in a row the thumb swipes (the room in the middle steps forward).
   When there is nothing to show (html.mob-plain) the cream hero and group tiles stay.
   ========================================================= */
html.mob { --mnav: calc(var(--bottomnav-h) + var(--safe-b)); }
@media (min-width: 720px) { html.mob { --mnav: 0px; } }
.mstage, .mdoors, .mgroups { display: none; }
html.mob.mob-home .mstage, html.mob.mob-home .mdoors, html.mob.mob-home .mgroups { display: block; }
html.mob:not(.mob-plain) body[data-page="home"] .hero, html.mob:not(.mob-plain) body[data-page="home"] .home-groups { display: none; }
html.mob.mob-wait body[data-page="home"] > main { opacity: 0; }
html.mob:not(.mob-plain) body[data-page="home"] { background: var(--void); color: var(--bone); }

/* ---- the stage: the screen between the header and the bottom bar ---- */
.mstage { position: relative; height: calc(100svh - var(--header-h) - var(--mnav)); min-height: 500px; max-height: 1000px; overflow: hidden; isolation: isolate;
  background: var(--void); color: var(--bone); touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.mstage::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mstage::after { content: ""; position: absolute; left: 6%; right: 6%; top: calc(var(--floor, .72) * 100%); height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 170, 110, .3) 30%, rgba(255, 170, 110, .3) 70%, transparent); }
.mstage .ds-light { background:
    conic-gradient(from 180deg at 50% -10%, transparent 150deg, rgba(247, 105, 26, .1) 166deg, rgba(255, 140, 60, .19) 180deg, rgba(247, 105, 26, .1) 194deg, transparent 210deg),
    radial-gradient(52% 11% at 50% calc(var(--floor, .72) * 100% + 6%), rgba(247, 105, 26, .36), transparent 72%),
    radial-gradient(70% 45% at 50% 34%, rgba(140, 52, 8, .24), transparent 70%); }
.mstage .ds-still { top: 12%; height: calc((var(--floor, .72) - .12) * 100%); padding: 0; object-position: 50% 100%; }
.ms-word { top: var(--wy, 34%); }
/* the bars: one per piece, like stories; the shown piece's bar fills (touch.js sets --p) */
.ms-bars { position: absolute; z-index: 6; top: 4px; left: 12px; right: 12px; display: flex; gap: 4px; }
.ms-bars button { flex: 1; min-height: 26px; padding: 12px 2px; border: 0; background: none; }
.ms-bars i { position: relative; display: block; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(244, 236, 223, .18); }
.ms-bars i::after { content: ""; position: absolute; inset: 0; background: var(--bone); transform: scaleX(var(--p, 0)); transform-origin: left; }
html[dir="rtl"] .ms-bars i::after { transform-origin: right; }
/* the hint, until the first swipe: a spark runs the way the finger goes */
.ms-hint { position: absolute; z-index: 6; top: 40px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 99px;
  background: rgba(11, 9, 8, .55); border: 1px solid rgba(255, 170, 110, .16); font-size: 12.5px; color: var(--bone); white-space: nowrap; pointer-events: none; transition: opacity .5s, translate .5s; }
.ms-hint.gone { opacity: 0; translate: -50% -8px; }
.ms-hint i { position: relative; width: 34px; height: 1px; background: rgba(255, 170, 110, .28); }
.ms-hint i::after { content: ""; position: absolute; top: -2px; left: 100%; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255, 120, 40, .9); animation: msSwipe 1.9s var(--ease) infinite; }
html[dir="rtl"] .ms-hint i::after { animation-name: msSwipeR; }
@keyframes msSwipe { 0% { left: 100%; opacity: 0; } 15% { opacity: 1; } 70% { left: 0; opacity: 1; } 100% { left: 0; opacity: 0; } }
@keyframes msSwipeR { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 70% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* the placard: what the piece is, its price, the way in */
.ms-card { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: grid; gap: 3px; padding: 26px 20px 18px;
  background: linear-gradient(180deg, transparent, rgba(11, 9, 8, .72) 34%, rgba(11, 9, 8, .94)); }
.ms-card .ds-meta { align-items: center; font-size: 12.5px; }
.ms-card .ds-badge { font-size: 11.5px; padding: 2px 9px; }
.ms-name { font-size: 25px; font-weight: 500; line-height: 1.1; color: var(--bone); text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-buy { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ms-buy .ds-price { font-size: 17px; white-space: nowrap; }
.ms-go { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 20px; border-radius: 99px; flex: none;
  background: var(--gilt); color: #0B0908; font-size: 15px; font-weight: 600; transition: transform .15s; }
.ms-go:active { transform: scale(.96); }
.ms-go svg { width: 18px; height: 18px; }
html[dir="rtl"] .ms-go svg { transform: scaleX(-1); }
@media (min-width: 720px) {
  .ms-card { left: var(--gutter); right: auto; width: min(440px, 52vw); padding: 26px 0 30px; background: none; }
  .ms-name { font-size: 30px; }
  .ms-go { margin-inline-start: 18px; }
  html[dir="rtl"] .ms-card { left: auto; right: var(--gutter); }
}

/* ---- the doors: Available above, Pre-Order below; the glowing line between them rises toward the end of the line of
   reading (Arabic mirrors it); touch.js moves it (--y) while the page scrolls and sets the words' angle (--a) ---- */
.mdoors { --y: 50%; --s: 7%; --a: -.25rad; --ys: calc(var(--y) + var(--s)); --ye: calc(var(--y) - var(--s)); --pl: var(--ys); --pr: var(--ye);
  position: relative; height: calc(100svh - var(--header-h) - var(--mnav)); min-height: 540px; max-height: 1000px; overflow: hidden; background: var(--void); color: var(--bone); }
html[dir="rtl"] .mdoors { --pl: var(--ye); --pr: var(--ys); }
.md { position: absolute; inset: 0; display: block; color: inherit; -webkit-tap-highlight-color: transparent; }
.md-now { clip-path: polygon(0 0, 100% 0, 100% var(--pr), 0 var(--pl));
  background: radial-gradient(80% 42% at 50% var(--y), rgba(247, 105, 26, .34), transparent 70%), radial-gradient(60% 36% at 50% 0%, rgba(140, 52, 8, .24), transparent 70%), var(--void); }
.md-pre { clip-path: polygon(0 var(--pl), 100% var(--pr), 100% 100%, 0 100%);
  background: radial-gradient(80% 42% at 50% 100%, rgba(255, 120, 40, .36), transparent 70%), radial-gradient(70% 36% at 50% var(--y), rgba(247, 105, 26, .18), transparent 70%), #140D09; }
.md-seam { position: absolute; inset: 0; z-index: 3; pointer-events: none; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)) drop-shadow(0 0 12px rgba(247, 105, 26, .9)); }
.md-seam i { position: absolute; inset: 0; background: var(--halo);
  clip-path: polygon(0 calc(var(--pl) - 1px), 100% calc(var(--pr) - 1px), 100% calc(var(--pr) + 1px), 0 calc(var(--pl) + 1px)); }
/* each door's word lies along the line: Available on it, Pre-Order under it */
.md-word { position: absolute; z-index: 0; top: var(--ys); inset-inline-start: 0; padding-inline: 14px; font-family: var(--wide); font-weight: 400; font-size: 90px;
  line-height: .8; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.1px rgba(244, 236, 223, .15); pointer-events: none;
  transform-origin: 0 0; transition: -webkit-text-stroke-color .6s; }
html[dir="rtl"] .md-word { transform-origin: 100% 0; }
.md-now .md-word { transform: rotate(var(--a)) translateY(calc(-100% - 2px)); }
.md-pre .md-word { transform: rotate(var(--a)) translateY(8px); }
.mdoors[data-open="now"] .md-now .md-word, .mdoors[data-open="pre"] .md-pre .md-word { -webkit-text-stroke-color: rgba(255, 170, 110, .38); }
/* the three statues: Available's stand on the line, Pre-Order's on the floor; each sized by its own outline (boxVars) */
.md-trio { position: absolute; z-index: 1; width: 58%; max-width: 460px; }
.md-now .md-trio { inset-inline-end: 0; bottom: calc(100% - var(--y) + .4 * var(--s)); height: calc(var(--y) - .4 * var(--s) - 11%); }
.md-pre .md-trio { inset-inline-start: 0; bottom: 0; height: calc(100% - var(--y) - .4 * var(--s) - 6%); }
.md-trio img { --sh: 94%; --cx: 50%; position: absolute; left: var(--cx); height: calc(var(--sh) / var(--bh, 1)); bottom: calc((var(--by, 1) - 1) * var(--sh) / var(--bh, 1) + 2%);
  width: auto; max-width: none; translate: calc(var(--bx, .5) * -100%) 0; transition: filter .6s; }
.md-trio .t0 { --sh: calc(94% * min(1, .85 / var(--r, .7))); z-index: 2; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }
.md-trio .t1 { --sh: 68%; --cx: 14%; z-index: 1; filter: brightness(.72) saturate(.9); }
.md-trio .t2 { --sh: 68%; --cx: 86%; z-index: 1; filter: brightness(.72) saturate(.9); }
.mdoors[data-open="now"] .md-pre .t0, .mdoors[data-open="pre"] .md-now .t0 { filter: brightness(.6) saturate(.8); }
.md-copy { position: absolute; z-index: 2; display: grid; gap: 4px; width: min(54%, 380px); text-shadow: 0 1px 14px rgba(11, 9, 8, .9); }
.md-now .md-copy { top: 24px; inset-inline-start: var(--gutter); }
.md-pre .md-copy { bottom: 24px; inset-inline-end: var(--gutter); text-align: end; justify-items: end; }
.md-copy small { font-size: 12.5px; color: var(--smoke); }
.md-copy b { font-size: clamp(36px, 10.5vw, 64px); font-weight: 500; line-height: .95; letter-spacing: -.01em; }
.md-copy > span { font-size: 14px; line-height: 1.4; color: var(--smoke); }
.md-copy em { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; height: 44px; padding: 0 16px 0 18px; border-radius: 99px;
  font-style: normal; font-size: 15px; font-weight: 500; white-space: nowrap; text-shadow: none; background: var(--gilt); color: #0B0908; transition: transform .15s; }
.md-pre .md-copy em { justify-self: end; background: var(--bone); color: #0B0908; }
.md:active .md-copy em { transform: scale(.96); }
.md-copy em svg { width: 18px; height: 18px; }
html[dir="rtl"] .md-copy em svg { transform: scaleX(-1); }

/* ---- the groups: rooms in a row the thumb swipes; touch.js sets --off (how far from the middle) and --f (1 in the middle) ---- */
.mgroups { position: relative; background: var(--void); color: var(--bone); padding: 44px 0 30px; }
.mg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 var(--gutter); margin-bottom: 14px; }
.mg-head h2 { font-size: 30px; color: var(--bone); }
.mg-head a { font-size: 14px; color: var(--halo); border-bottom: 1px solid currentColor; }
.mg-track { --rw: min(74vw, 340px); display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px calc((100% - var(--rw)) / 2) 14px; }
.mg-track::-webkit-scrollbar { display: none; }
.mg-room { --f: 1; --off: 0; position: relative; flex: 0 0 var(--rw); height: min(calc(var(--rw) * 1.36), 64svh); scroll-snap-align: center; scroll-snap-stop: always;
  border-radius: 24px; overflow: hidden; isolation: isolate; color: var(--bone); -webkit-tap-highlight-color: transparent;
  background: radial-gradient(85% 55% at 50% 100%, color-mix(in srgb, var(--c) 62%, transparent), transparent 72%), linear-gradient(180deg, #18110D, #0E0A08);
  box-shadow: inset 0 0 0 1px rgba(255, 170, 110, calc(.06 + .14 * var(--f))); transform: scale(calc(.92 + .08 * var(--f))); opacity: calc(.5 + .5 * var(--f)); }
.mg-name { position: absolute; z-index: 0; top: 4%; inset-inline-start: 7%; font-family: var(--wide); font-weight: 400; font-size: calc(var(--rw) * .34);
  line-height: .8; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.1px rgba(244, 236, 223, calc(.1 + .2 * var(--f)));
  transform: translateX(calc(var(--off) * -70px)); }
.mg-room img { --sh: calc(72% * min(1, .98 / var(--r, .7))); position: absolute; z-index: 1; left: 50%; height: calc(var(--sh) / var(--bh, .84)); bottom: calc((var(--by, 1) - 1) * var(--sh) / var(--bh, .84) + 1%);
  width: auto; max-width: none; translate: calc(var(--bx, .5) * -100%) 0; transform-origin: 50% 100%;
  transform: translateX(calc(var(--off) * -40px)) scale(calc(.84 + .16 * var(--f))); filter: brightness(calc(.5 + .5 * var(--f))); }
.mg-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 56px 20px 18px; display: grid; gap: 2px;
  background: linear-gradient(180deg, transparent, rgba(11, 9, 8, .78) 52%, rgba(11, 9, 8, .94)); }
.mg-copy b { font-size: 26px; font-weight: 500; line-height: 1.05; }
.mg-copy small { font-size: 13px; color: var(--halo); }
.mg-copy span { font-size: 14px; color: var(--smoke); }
.mg-bar { margin: 4px var(--gutter) 0; height: 1px; background: rgba(255, 170, 110, .14); }
.mg-bar i { display: block; height: 100%; background: var(--halo); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 8px rgba(255, 120, 40, .9); }
html[dir="rtl"] .mg-bar i { transform-origin: right; }
/* a light under the finger (touch.js sets --lx --ly and .lit while the finger is down) */
.mg-room::after, html.mob body[data-page="home"] main .card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 170, 110, .2), transparent 45%); }
.mg-room.lit::after, html.mob body[data-page="home"] main .card.lit::after { opacity: 1; }

/* ---- the featured pieces on the dark ---- */
html.mob:not(.mob-plain) body[data-page="home"] main > .section { padding-top: 34px; }
html.mob:not(.mob-plain) body[data-page="home"] .section-head h2 { font-size: 30px; color: var(--bone); }
html.mob:not(.mob-plain) body[data-page="home"] .section-head a { color: var(--halo); }
html.mob:not(.mob-plain) body[data-page="home"] main .card { background: #17120E; border-color: rgba(255, 170, 110, .08); color: var(--bone); }
html.mob:not(.mob-plain) body[data-page="home"] main .card-name { color: var(--bone) !important; }
html.mob:not(.mob-plain) body[data-page="home"] main .card-body .price { color: var(--bone); }
html.mob:not(.mob-plain) body[data-page="home"] main .card-go { background: rgba(244, 236, 223, .1); color: var(--bone); }
html.mob:not(.mob-plain) body[data-page="home"] main .card-add { background: var(--bone); color: #0B0908; }

@media (prefers-reduced-motion: reduce) {
  .mg-room, .mg-room img, .mg-name { transform: none; opacity: 1; filter: none; }
  .ms-hint i::after { animation: none; left: 0; }
}
/* ---- BONES Hub fixes on top of the ported stage (bags are wider than statues) ---- */
.door-trio { height: 54%; width: 44%; }
.door-trio img { --sh: 92%; }
.door-trio .t1 { --sh: 74%; --cx: 16%; }
.door-trio .t2 { --sh: 74%; --cx: 84%; }
.door-copy { top: 7vh; }
.door-now .door-copy em { background: var(--gilt); color: #0B0908; }
.md-trio { width: 62%; }
.md-now .md-trio { height: calc(var(--y) - .4 * var(--s) - 17%); }
.md-pre .md-trio { height: calc(100% - var(--y) - .4 * var(--s) - 27%); width: 50%; }
.md-now .md-copy em { background: var(--gilt); color: #0B0908; }
.dg-room img { --sh: calc(58% * min(1, .88 / var(--r, .7))); }
.mg-room img { --sh: calc(56% * min(1, .98 / var(--r, .7))); }
.dg-room img { bottom: calc((var(--by, 1) - 1) * var(--sh) / var(--bh, .84) + 21%); }
.mg-room img { bottom: calc((var(--by, 1) - 1) * var(--sh) / var(--bh, .84) + 24%); }
.md-copy b { font-family: var(--wide); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
/* product names in black on the light pages (a yellow or pale bag colour could not be read on cream) */
.pdp-title h1 { color: var(--ink) !important; }

/* ==== BONES HUB END ==== */