/* ==========================================================================
   Basman Watches — UI system  ("Case & Dial")
   --------------------------------------------------------------------------
   Single source of truth for storefront styling. Layered on Bootstrap 5.3
   and driven by the Store Settings CSS variables that base.html injects
   (--primary-color, --accent-color, --button-color, ...), so the admin
   colour picker keeps working.

   Replaces the ~380 lines of product-card CSS that were pasted separately
   into search.html, categories.html and fav.html. Card markup now lives in
   one place too: templates/_product_card.html.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Warm neutrals. The old palette was cool (#f7f7f9 / #eef0f3), which made
     the logo's antique gold read as dirty. These are the same values with
     the blue pulled out. */
  --ink:              #1a1917;
  --ink-body:         #3d3b37;
  --ink-muted:        #857f74;
  --ink-faint:        #a5a096;

  --page:             #f7f5f1;
  --surface:          #ffffff;
  --surface-warm:     #fdfcfa;
  --mat:              #f4f1ec;   /* image frames, inputs at rest */
  --line:             #e8e4dc;
  --line-strong:      #d8d3ca;

  --gold:             #c08a2e;   /* from logo.png — buy actions only */
  --gold-ink:         #9a6b1e;   /* same hue, darkened for text on white */
  --steel:            #4d80a8;   /* from logo.png — informational states */
  --danger:           #b4433c;
  --success:          #2e7d57;

  /* The heart button's own translucent chip (.heart, .rx-heart-lg in
     item.js) sits over a product photo, not the page background - it
     used to stay a fixed near-white regardless of theme for that reason,
     which read as "stuck light" once everything else around it went
     dark. Themed like everything else now: a light frosted chip in light
     mode, a dark one in night mode, both dark enough/light enough that
     --ink-muted reads clearly on either. */
  --chip-bg:          rgba(253, 252, 250, 0.94);

  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        16px;
  --radius-pill:      999px;

  --shadow-xs:        0 1px 2px rgba(26, 25, 23, 0.04);
  --shadow-sm:        0 2px 8px rgba(26, 25, 23, 0.06);
  --shadow-md:        0 10px 30px rgba(26, 25, 23, 0.09);
  --shadow-lg:        0 20px 56px rgba(26, 25, 23, 0.16);

  --ease:             cubic-bezier(0.22, 1, 0.36, 1);

  /* .rx-mobile-dock's own rendered height (it's flush against the true
     viewport bottom now, no floating offset - see the Navigation
     section). Single source of truth so anything else pinned to the
     bottom of a mobile screen (page padding, a page's own fixed action
     bar) sits right at the dock's top edge - flush, merging into it -
     rather than guessing a bigger number and leaving a visible gap. */
  --mobile-dock-clearance: 64px;

  /* The fixed site header (.sh) doesn't reserve its own space in normal
     flow, so body adds it back as padding: one row on phones, two rows
     (64px bar + 44px nav + 1px border) on desktop. */
  --mobile-topbar-height: 63px;
  --desktop-nav-height: 109px;

  --font-display:     'Spectral', Georgia, 'Times New Roman', serif;
  --font-ui:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-ar:          'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-he:          'Noto Sans Hebrew', 'Segoe UI', Tahoma, sans-serif;

  /* Legacy aliases — older templates still reference these. */
  --surface-muted:    var(--mat);
  --border-subtle:    var(--line);
  --text-heading:     var(--ink);
  --text-body:        var(--ink-body);
  --text-muted:       var(--ink-muted);
}

/* ---------- 1b. Night mode ------------------------------------------------
   Three real states, not two: an explicit choice from the toggle in the
   nav stamps data-theme="dark"/"light" on <html> (see the inline script
   in base.html, which also reads/writes it so a reload doesn't flash the
   wrong theme) and wins outright; with no explicit choice the site
   follows the OS/browser preference via prefers-color-scheme. Every
   component below is styled through these tokens already - nothing
   needs its own dark-mode rule as long as it never hardcodes a color
   that should have come from one of them.

   Not a flat inversion: ink and gold are both warmed and brightened a
   touch so gold buy-buttons keep reading as gold (not muddy) on a
   near-black ground, and danger/success are brightened the same way so
   status text stays legible on dark surfaces. --chip-ink/--chip-ink-active
   above are deliberately NOT redefined here - see their comment. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --ink:              #d9d1c3;
    --ink-body:         #b3a996;
    --ink-muted:        #7d7566;
    --ink-faint:        #544e42;

    --page:             #131110;
    --surface:          #1e1b17;
    --surface-warm:     #221e19;
    --mat:              #28241d;
    --line:             #362f26;
    --line-strong:      #453c30;

    --gold:             #dba84e;
    --gold-ink:         #e8c07a;
    --steel:            #6ea5c9;
    --danger:           #d97468;
    --success:          #4caf7d;

    --chip-bg:          rgba(30, 27, 23, 0.82);
  }
}

html[data-theme="dark"] {
  --ink:              #d9d1c3;
  --ink-body:         #b3a996;
  --ink-muted:        #7d7566;
  --ink-faint:        #544e42;

  --page:             #131110;
  --surface:          #1e1b17;
  --surface-warm:     #221e19;
  --mat:              #28241d;
  --line:             #362f26;
  --line-strong:      #453c30;

  --gold:             #dba84e;
  --gold-ink:         #e8c07a;
  --steel:            #6ea5c9;
  --danger:           #d97468;
  --success:          #4caf7d;

  --chip-bg:          rgba(30, 27, 23, 0.82);
}

/* ---------- 2. Base ----------------------------------------------------- */

html {
  scroll-behavior: smooth;
  background: var(--page);
}

body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bootstrap's own .text-muted reads var(--bs-secondary-color), a fixed
   gray Bootstrap defines itself and this file never touches - it doesn't
   move with night mode like every other text color here does. Several
   back-office pages (banners, item options, item images, admin) lean on
   this class for hint/helper text, so this one override fixes all of
   them at once rather than needing a per-page token swap. */
.text-muted { color: var(--ink-muted) !important; }

/* Arabic gets a face drawn to match Inter's weights, for both UI and
   display — Spectral has no Arabic coverage, and the previous setup fell
   through to Inter's thin Arabic. base.html adds .lang-ar to <body>. */
body.lang-ar,
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3,
body.lang-ar h4, body.lang-ar h5, body.lang-ar h6,
body.lang-ar .page-title,
body.lang-ar .navbar-brand,
body.lang-ar input, body.lang-ar select, body.lang-ar textarea, body.lang-ar button {
  font-family: var(--font-ar);
}

/* Hebrew - same reasoning as .lang-ar above, its own face since Hebrew and
   Arabic don't share a script/font. */
body.lang-he,
body.lang-he h1, body.lang-he h2, body.lang-he h3,
body.lang-he h4, body.lang-he h5, body.lang-he h6,
body.lang-he .page-title,
body.lang-he .navbar-brand,
body.lang-he input, body.lang-he select, body.lang-he textarea, body.lang-he button {
  font-family: var(--font-he);
}

h1, h2, .page-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--ink);
}

h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}

h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.05rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.875rem; }

p { line-height: 1.68; }

a {
  color: var(--primary-color, var(--ink));
  text-decoration: none;
  transition: color 0.15s var(--ease);
}

a:hover { color: var(--gold-ink); }

code, kbd, samp,
.tabular { font-variant-numeric: tabular-nums; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  opacity: 1;
  margin: 32px 0;
}

::selection { background: rgba(192, 138, 46, 0.22); }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--mat); }
*::-webkit-scrollbar-thumb {
  background-color: var(--line-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--mat);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--ink-faint); }

/* ---------- 3. Bootstrap 4 → 5 shims ------------------------------------
   base.html now loads Bootstrap 5.3 CSS to match the 5.3 JS that was
   already loaded (the two were on different major versions). These two
   classes are the only BS4-era names still emitted anywhere: .close is
   generated at runtime by showMessage() in index.js, and .sr-only survives
   in the unused home.html carousel. Both are one-liners, so shimming them
   is cheaper and safer than editing generated markup. */

.close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 0.35rem;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  margin-inline-start: auto;
}
.close:hover { opacity: 1; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. Page scaffolding ----------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin: 36px 0 24px;
}

.page-head-text { min-width: 0; }

.page-title {
  margin: 0 0 6px;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

.page-sub {
  margin: 0;
  font-size: 0.925rem;
  color: var(--ink-muted);
}

.section-heading { margin: 56px 0 28px; }

.section-heading .eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 8px;
}

.section-heading h2 { margin: 0; }

.section-heading p {
  color: var(--ink-muted);
  max-width: 60ch;
  margin: 10px 0 0;
}

/* ---------- 5. Buttons -------------------------------------------------- */

.btn,
button,
.add-to-cart-btn,
.btn-save,
.btn-sm-dark {
  font-family: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  letter-spacing: 0.005em;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease),
              transform 0.12s var(--ease), box-shadow 0.15s var(--ease),
              opacity 0.15s var(--ease);
}

.btn:hover, button:hover { transform: translateY(-1px); }
.btn:active, button:active { transform: translateY(0); }

/* Gold is the buy action and nothing else. Gold-on-ink clears 5.6:1; the
   previous orange-on-white price text sat at 2.3:1. */
.add-to-cart-btn,
.btn-buy {
  background: var(--accent-color, var(--gold));
  color: var(--ink);
  padding: 8px 16px;
  font-size: 0.8rem;
}

.add-to-cart-btn:hover,
.btn-buy:hover { filter: brightness(1.06); box-shadow: var(--shadow-sm); }

.add-to-cart-btn:disabled,
.add-to-cart-btn[disabled] {
  background: var(--mat) !important;
  color: var(--ink-faint) !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary,
.btn-dark {
  background-color: var(--button-color, var(--ink)) !important;
  border-color: var(--button-color, var(--ink)) !important;
  color: #fff;
  padding: 10px 20px;
}

.btn-primary:hover, .btn-dark:hover { filter: brightness(1.14); box-shadow: var(--shadow-sm); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 9px 19px;
  font-size: 0.875rem;
}

.btn-outline:hover { background: var(--mat); }

.btn-success { background-color: var(--success) !important; color: #fff; }
.btn-secondary { background-color: var(--mat) !important; color: var(--ink) !important; }
.btn-danger { background-color: var(--danger) !important; color: #fff; }

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- 6. Forms ---------------------------------------------------- */

.form-control,
.form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="date"], input[type="file"], select, textarea {
  font-family: inherit;
  font-size: 0.925rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--ink-faint); }

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(192, 138, 46, 0.16) !important;
  outline: none;
}

.form-label,
label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-body);
  margin-bottom: 6px;
}

.field-error {
  color: var(--danger);
  font-size: 0.8rem;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.field-valid { border-color: var(--success) !important; }

.field-hint {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: 5px;
}

/* ---------- 7. Product card --------------------------------------------
   One definition, used by _product_card.html on /search, /categories,
   /myFav and the /categories/<id>/items AJAX fragment. */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 20px;
  align-items: start;
}

/* Below this, auto-fill's 214px minimum only ever fits one column - force
   two fixed columns instead so phones get a real grid, not a single wide
   card per row. */
@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* The photo runs edge to edge at the top of the card; corner shape comes
   from the theme preset (--pf-card-r). */
.item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--pf-card-r);
  overflow: hidden;
  cursor: pointer;
  text-align: start;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.item-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.22);
}

.item-card:focus-within { outline: 2px solid var(--accent-color); outline-offset: 2px; }

.item-media {
  position: relative;
  overflow: hidden;
  background: var(--mat);
  aspect-ratio: 4 / 5;
}

.item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

.item-card:hover .item-image { transform: scale(1.05); }

.badges {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.badge {
  display: inline-block;
  border-radius: var(--pf-badge-r);
  padding: 4px 9px;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: none;
}

.new-badge { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.sold-badge { background: var(--surface); color: var(--danger); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.off-badge { background: var(--accent-color); color: var(--accent-ink); }

/* The heart keeps its .heart class and .heart-tooltip child: index.js's
   toggleFavorite(heartIcon, itemId, lang) toggles .favorited on this
   element and writes into .heart-tooltip. Removing either breaks it. */
.heart {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--ink-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: color 0.15s var(--ease), transform 0.15s var(--ease), background-color 0.15s var(--ease);
}

.heart:hover { background: var(--surface-warm); color: var(--ink); transform: scale(1.08); }
.heart.favorited { color: var(--danger); }

.heart-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 7px);
  inset-inline-end: 0;
  background: var(--ink);
  color: var(--surface-warm);
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.688rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}

.heart:hover .heart-tooltip { visibility: visible; opacity: 1; }

/* Quick add: a round "+" on the photo's bottom corner. It keeps the
   .add-to-cart-btn class and handleAddToCartClick() wiring - items with
   options still open the options picker first. */
.item-card .add-to-cart-btn {
  position: absolute;
  bottom: 10px;
  inset-inline-end: 10px;
  z-index: 4;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--pf-r-icon);
  background: var(--button-color);
  color: var(--button-ink);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s var(--ease);
}

.item-card .add-to-cart-btn:hover { transform: scale(1.1); filter: brightness(1.08); box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.4); }
.item-card .add-to-cart-btn:active { transform: scale(0.94); }

.item-details {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
}

.item-category {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Two lines instead of a one-line ellipsis: "Navy Dial Automatic 40mm" and
   "…42mm" are otherwise indistinguishable in a grid. */
.item-title {
  font-family: var(--pf-ui);
  font-size: 0.925rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

.item-price-row { margin-top: 2px; }

.item-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}

.item-price,
.discounted-price {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.discounted-price { color: var(--accent-color); }

.original-price {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* Sold out: the photo dims, the quick-add button is replaced by the badge. */
.item-card.is-sold-out .item-image { opacity: 0.55; filter: grayscale(0.4); }

/* A lone card in an otherwise-empty grid row - either it's genuinely the
   only card (:only-child) or JS marked it .is-solo because filtering left
   just one visible among hidden siblings (search.html) - spans the full
   row and centers instead of sitting stranded against one edge. */
.product-grid > .item-card:only-child,
.product-grid > .item-card.is-solo {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 260px;
}

@media (max-width: 560px) {
  .item-details { padding: 10px 11px 12px; gap: 3px; }
  .item-category { font-size: 0.62rem; }
  .item-title { font-size: 0.82rem; min-height: 2.6em; }
  .item-price, .discounted-price { font-size: 0.9rem; }
  .original-price { font-size: 0.7rem; }
  .item-card .add-to-cart-btn { width: 36px; height: 36px; bottom: 8px; inset-inline-end: 8px; }
  .heart { width: 30px; height: 30px; top: 8px; inset-inline-end: 8px; }
  .badges { top: 8px; inset-inline-start: 8px; }
}

/* ---------- 8. Filter rail (search + categories) ------------------------ */

.browse-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.browse-rail {
  flex: 0 0 252px;
  position: sticky;
  top: 88px;
}

.browse-results {
  flex: 1;
  min-width: 0;
}

.rail-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
}

.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.rail-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.rail-clear {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold-ink);
  cursor: pointer;
}

.rail-clear:hover { text-decoration: underline; transform: none; }

.rail-group-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}

.rail-group + .rail-group { margin-top: 22px; }

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.8438rem;
  font-weight: 400;
  color: var(--ink-body);
  cursor: pointer;
  margin: 0;
  transition: background-color 0.12s var(--ease);
}

.filter-option:hover { background: var(--mat); }

.filter-option input { flex-shrink: 0; accent-color: var(--gold); width: 15px; height: 15px; }
.filter-option input:checked ~ .filter-option-name { font-weight: 600; color: var(--ink); }
.filter-option-name { flex: 1; min-width: 0; }
.filter-option-count { font-size: 0.75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.filter-options-scroll {
  max-height: 268px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 -4px;
  padding: 0 4px;
}

.price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-row input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.price-row span { color: var(--ink-faint); font-size: 0.8125rem; }

/* Search field */
.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.search-field:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(192, 138, 46, 0.16);
}

.search-field i, .search-field svg { color: var(--ink-faint); flex-shrink: 0; font-size: 0.875rem; }

.search-input {
  border: none !important;
  outline: none;
  background: none;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}

.search-input:focus { box-shadow: none !important; }

.search-clear {
  background: var(--mat);
  border: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: var(--ink-muted);
  font-size: 0.625rem;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  margin-inline-start: auto;
}

.search-clear.is-visible { display: flex; }
.search-clear:hover { background: var(--line-strong); color: var(--ink); transform: none; }

/* Results toolbar + active-filter chips */
.results-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  min-height: 30px;
}

.result-count {
  font-size: 0.8438rem;
  color: var(--ink-muted);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.results-divider { width: 1px; height: 16px; background: var(--line-strong); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 0.7812rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.chip:hover { background: var(--mat); transform: none; }
.chip i { font-size: 0.5625rem; color: var(--ink-faint); }

/* Mobile: rail becomes a sheet behind one obvious trigger */
.filter-trigger {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--surface-warm);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.filter-trigger-count {
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--radius-pill);
  min-width: 17px; height: 17px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.6562rem;
  font-weight: 700;
}

.filter-trigger-count.is-visible { display: inline-flex; }

.rail-close {
  display: none;
  background: var(--mat);
  border: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

@media (max-width: 860px) {
  .browse-layout { display: block; }

  .filter-trigger { display: inline-flex; }
  .rail-close { display: flex; align-items: center; justify-content: center; }

  .browse-rail {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1102;
    flex: none;
    top: auto;
    transform: translateY(101%);
    transition: transform 0.3s var(--ease);
    max-height: 84vh;
    overflow-y: auto;
  }

  .browse-rail.is-open { transform: translateY(0); }

  .browse-rail .rail-card {
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding: 18px 18px 28px;
    box-shadow: 0 -12px 40px rgba(26, 25, 23, 0.22);
  }

  .rail-scrim {
    position: fixed;
    inset: 0;
    z-index: 1101;
    background: rgba(26, 25, 23, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease);
  }

  .rail-scrim.is-open { opacity: 1; pointer-events: auto; }

  .search-field { max-width: none; }
  .filter-options-scroll { max-height: 40vh; }
}

/* ---------- 9. Category tiles / two-pane browse ------------------------- */

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-list-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.12s var(--ease), border-color 0.12s var(--ease);
}

.category-list-item:hover { background: var(--mat); }

.category-list-item.active {
  background: var(--mat);
  border-color: var(--line-strong);
}

.category-list-item img {
  width: 36px; height: 36px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--mat);
}

.category-list-item-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8438rem;
  font-weight: 400;
  color: var(--ink-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-list-item.active .category-list-item-name { font-weight: 600; color: var(--ink); }
.category-list-item-count { font-size: 0.75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------- 10. Empty states -------------------------------------------- */

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 24px;
  color: var(--ink-muted);
}

.empty-state .empty-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--mat);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
}

.empty-state h4 { color: var(--ink); margin: 0 0 6px; }

.empty-state p {
  margin: 0 auto;
  max-width: 42ch;
  font-size: 0.925rem;
  line-height: 1.65;
}

.empty-state .btn-primary,
.empty-state .btn-buy { margin-top: 22px; }

/* Legacy alias used by fav.html/orders before this pass. */
.no-orders-message { text-align: center; padding: 60px 20px; color: var(--ink-muted); font-size: 0.975rem; }

/* ---------- 11. Account / profile ---------------------------------------- */

.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 56px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.panel-title { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0; }

.identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.identity-avatar {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-color, var(--gold));
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
}

.identity-name { font-size: 1.0625rem; font-weight: 600; color: var(--ink); margin: 0; }
.identity-mail { font-size: 0.8438rem; color: var(--ink-muted); margin: 2px 0 0; word-break: break-all; }

.detail-list { display: flex; flex-direction: column; gap: 0; }

.detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.detail-row:last-child { border-bottom: none; }

.detail-key {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-muted);
  flex-shrink: 0;
  margin: 0;
}

.detail-val {
  font-size: 0.9375rem;
  color: var(--ink);
  text-align: end;
  word-break: break-word;
  margin: 0;
}

.detail-val.is-empty { color: var(--ink-faint); font-style: italic; }

/* Narrow screens: a long email against a right-aligned column breaks
   mid-word. Stacking the pair keeps it readable. */
@media (max-width: 420px) {
  .detail-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .detail-val { text-align: start; }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.form-field { display: flex; flex-direction: column; }
.form-field.is-full { grid-column: 1 / -1; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.form-fieldset { border: none; padding: 0; margin: 28px 0 0; }

.form-fieldset legend {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0;
  margin-bottom: 4px;
  float: none;
  width: auto;
}

@media (max-width: 780px) {
  .account-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 12. Alerts ---------------------------------------------------- */

.alert {
  display: flex;
  align-items: center;
  gap: 12px;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md);
  font-size: 0.925rem;
  font-weight: 500;
  padding: 13px 18px;
}

.alert-success { background: #e8f2ec; color: #1f5a3e; }
.alert-danger { background: #f8e9e8; color: #8f302a; }
.alert-warning { background: #fbf1e0; color: #7a5410; }

/* ---------- 13. Tables (reports, admin) ----------------------------------- */

table th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

table td { font-size: 0.9rem; color: var(--ink-body); }
table tr { transition: background-color 0.12s var(--ease); }
table tbody tr:hover { background: var(--mat); }

/* ---------- 14. Motion ----------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.fade-in-up { animation: fadeInUp 0.42s var(--ease) both; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.skeleton {
  background: linear-gradient(90deg, var(--mat) 25%, var(--surface-warm) 37%, var(--mat) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.skeleton-card { height: 260px; border-radius: var(--radius-lg); }
.skeleton-line { height: 13px; margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 15. Back to top ----------------------------------------------- */

#btn-back-to-top {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px; /* right in Arabic/Hebrew, left in English */
  z-index: 1040;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink) !important;
  color: #fff;
  border: none;
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
}

#btn-back-to-top:hover { background: var(--gold) !important; color: var(--ink); }

@media (max-width: 991.98px) {
  #btn-back-to-top { bottom: 92px; }
}

/* ==========================================================================
   16. Dialogs and toasts
   .cop-* is every modal on the site: the "choose options" popup (index.js
   openCartOptionsModal), the confirm dialogs (index.js confirmDialog and
   the React pages' ConfirmModal, role="alertdialog") and the iOS install
   help. Centered on desktop, a bottom sheet on phones.
   ========================================================================== */

body.cop-modal-open { overflow: hidden; }

.cop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 10, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: cop-fade-in 0.2s ease;
}

@keyframes cop-fade-in { from { opacity: 0; } to { opacity: 1; } }

.cop-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border-radius: calc(var(--pf-card-r) * 1.4 + 6px);
  padding: 22px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
  text-align: start;
  animation: cop-pop-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cop-pop-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }

.cop-handle { display: none; }

.cop-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cop-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.45; }

.cop-close-btn {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--mat);
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cop-close-btn:hover { background: var(--line-strong); color: var(--ink); transform: none; }

/* ---- Choose-options popup ---- */
.cop-product { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.cop-product-img { width: 64px; height: 74px; flex: 0 0 auto; border-radius: min(var(--pf-card-r), 12px); object-fit: cover; background: var(--mat); }
.cop-product-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cop-product-cat { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.cop-product-name { font-family: var(--pf-display); font-size: 1.15rem; font-weight: var(--pf-t-w); text-transform: var(--pf-t-case); letter-spacing: var(--pf-t-track); color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cop-product-link { font-size: 0.8rem; font-weight: 600; color: var(--accent-color) !important; text-decoration: underline; text-underline-offset: 3px; }
.cop-product .cop-close-btn { align-self: flex-start; }

.cop-group { margin-top: 16px; }
.cop-label { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 9px; }
.cop-label-value { color: var(--ink); font-weight: 700; }
.cop-label-value:not(:empty)::before { content: ": "; color: var(--ink-muted); font-weight: 400; }
.cop-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }

.cop-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--pf-r);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem; font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.cop-pill:hover:not(:disabled) { border-color: var(--ink); transform: none; }
.cop-pill.is-selected { background: var(--ink); border-color: var(--ink); color: var(--page); }
.cop-pill-price { font-size: 0.75rem; opacity: 0.72; font-variant-numeric: tabular-nums; }

.cop-opt-card {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 4px; padding-inline-end: 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--pf-r);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cop-opt-card:hover:not(:disabled) { border-color: var(--ink); transform: none; }
.cop-opt-card.is-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cop-opt-card-img-wrap { width: 36px; height: 36px; flex: 0 0 auto; border-radius: min(var(--pf-r), 50%); overflow: hidden; background: var(--mat); }
[data-preset="fashion"] .cop-opt-card-img-wrap { border-radius: 0; }
.cop-opt-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cop-opt-card-name { font-size: 0.85rem; font-weight: 600; }
.cop-sold-out { cursor: not-allowed !important; opacity: 0.45; text-decoration: line-through; }
.cop-sold-out img { filter: grayscale(1); }

.cop-unavailable-msg { margin: 14px 0 0; padding: 10px 12px; border-radius: min(var(--pf-r), 10px); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: 0.85rem; font-weight: 600; }

.cop-buy { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cop-qty { display: inline-flex; align-items: center; height: 44px; border: 1.5px solid var(--line-strong); border-radius: var(--pf-r); overflow: hidden; }
.cop-qty button { width: 40px; height: 100%; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 0.72rem; cursor: pointer; }
.cop-qty button:hover:not(:disabled) { background: var(--mat); transform: none; }
.cop-qty button:disabled { opacity: 0.3; cursor: not-allowed; }
.cop-qty-value { min-width: 28px; text-align: center; font: 700 0.95rem var(--font-ui); font-variant-numeric: tabular-nums; }
.cop-total-price { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.cop-total-price span { font-size: 0.75rem; color: var(--ink-muted); }
.cop-total-price strong { font: 700 1.4rem var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }

.cop-confirm-btn {
  width: 100%;
  height: 52px;
  margin-top: 16px;
  border: 0;
  border-radius: var(--pf-r);
  background: var(--button-color);
  color: var(--button-ink);
  font-size: 1rem;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.cop-confirm-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.cop-confirm-btn:disabled { background: var(--mat); color: var(--ink-faint); cursor: not-allowed; }

/* iOS "add to home screen" help (base.html) reuses .cop-group rows. */
.cop-modal[role="dialog"]:not(.cop-options) .cop-group { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 0.92rem; }

/* ---- Confirm dialogs ----
   Every "Are you sure?" on the site has this structure: header (title +
   close) and .rx-confirm-actions. The selectors are a notch more specific
   than the React pages' own copies so this one look wins everywhere. */
.cop-modal[role="alertdialog"] { max-width: 400px; padding: 28px 24px 22px; text-align: center; }
.cop-modal[role="alertdialog"]::before {
  content: "\f128";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  color: var(--accent-color);
  font-size: 1.3rem;
}
.cop-modal[role="alertdialog"].is-danger::before { content: "\f2ed"; font-weight: 400; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.cop-modal[role="alertdialog"] .cop-modal-header { justify-content: center; margin-bottom: 20px; }
.cop-modal[role="alertdialog"] .cop-modal-title { font-size: 1.05rem; }
.cop-modal[role="alertdialog"] .cop-close-btn { position: absolute; top: 14px; inset-inline-end: 14px; }
.cop-modal[role="alertdialog"] .rx-confirm-actions { display: flex; gap: 10px; margin: 0; }
.cop-modal[role="alertdialog"] .rx-confirm-cancel-btn,
.cop-modal[role="alertdialog"] .rx-confirm-actions > button:first-child:not(.cop-confirm-btn) {
  flex: 1; height: 48px; margin: 0; padding: 0 14px;
  border: 1.5px solid var(--line-strong) !important; border-radius: var(--pf-r) !important;
  background: var(--surface) !important; color: var(--ink) !important;
  font-weight: 700; font-size: 0.92rem; cursor: pointer;
}
.cop-modal[role="alertdialog"] .rx-confirm-actions .cop-confirm-btn { flex: 1; width: auto !important; height: 48px; margin: 0 !important; font-size: 0.92rem; }
.cop-modal[role="alertdialog"].is-danger .cop-confirm-btn { background: var(--danger); color: #fff; }

/* ---- Phones: bottom sheets ---- */
@media (max-width: 640px) {
  .cop-overlay { align-items: flex-end; padding: 0; }
  .cop-modal {
    max-width: none;
    max-height: 88vh;
    border-radius: 24px 24px 0 0;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    animation: cop-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-preset="fashion"] .cop-modal { border-radius: 0; }
  .cop-handle { display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 4px auto 14px; }
  .cop-modal[role="alertdialog"] { max-width: none; padding-top: 26px; }
}

@keyframes cop-sheet-in { from { transform: translateY(100%); } to { transform: none; } }

/* ---- Toasts (showMessage in index.js) ---- */
.toast-stack {
  position: fixed;
  z-index: 1300;
  top: calc(var(--desktop-nav-height) + 14px);
  inset-inline-end: 20px;
  width: min(380px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-msg {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px 15px 14px;
  padding-inline: 14px 10px;
  border: 1px solid var(--line);
  border-radius: min(var(--pf-card-r), 16px);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast-msg.is-in { opacity: 1; transform: none; }
.toast-msg.is-leaving { opacity: 0; transform: translateY(-6px) scale(0.98); }

.toast-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; }
.toast-msg.is-success .toast-icon { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.toast-msg.is-error .toast-icon { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.toast-msg.is-info .toast-icon { background: color-mix(in srgb, var(--accent-color) 16%, transparent); color: var(--accent-color); }
.toast-text { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 500; line-height: 1.45; }
.toast-action { flex: 0 0 auto; font-size: 0.85rem; font-weight: 700; color: var(--accent-color) !important; white-space: nowrap; }
.toast-action:hover { text-decoration: underline; }
.toast-close { flex: 0 0 28px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); font-size: 0.75rem; cursor: pointer; }
.toast-close:hover { background: var(--mat); color: var(--ink); transform: none; }

/* Time left before it closes; pauses with the toast on hover. */
.toast-bar { position: absolute; bottom: 0; inset-inline: 0; height: 3px; transform-origin: var(--toast-origin, left); animation: toast-time linear forwards; }
[dir="rtl"] .toast-bar, body[style*="rtl"] .toast-bar { --toast-origin: right; }
.toast-msg:hover .toast-bar { animation-play-state: paused; }
.toast-msg.is-success .toast-bar { background: var(--success); }
.toast-msg.is-error .toast-bar { background: var(--danger); }
.toast-msg.is-info .toast-bar { background: var(--accent-color); }
@keyframes toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 991.98px) {
  .toast-stack { top: auto; bottom: calc(var(--mobile-dock-clearance, 64px) + 12px); inset-inline: 12px; width: auto; flex-direction: column-reverse; }
  .toast-msg { transform: translateY(10px); }
  .toast-msg.is-leaving { transform: translateY(8px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .cop-overlay, .cop-modal, .toast-msg { animation: none; transition: none; }
  .toast-bar { animation: none; display: none; }
}

/* ==========================================================================
   17. Navigation — desktop bar, mobile top bar, mobile dock, account sheet.
   Moved out of base.html's inline <style> so there is one place to edit it.
   Colours still come from the Store Settings variables base.html injects.
   ========================================================================== */

/* ---- Site header (.sh) ----
   One component for every screen size. Which parts show is decided by a
   container query on .sh-scope rather than a media query, so Settings'
   live preview can render this exact component at phone width inside a
   desktop page. Colors come from the Store Settings variables; type and
   corner shape from the active theme preset (section 19). Fixed rather
   than sticky - position:sticky never held through a real scroll here. */
.sh-scope { container: sh / inline-size; }

.sh-fixed {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
}

body { padding-top: var(--desktop-nav-height); }

.sh,
.rx-mobile-dock {
  --sh-line:  color-mix(in srgb, var(--header-text-color) 12%, transparent);
  --sh-hover: color-mix(in srgb, var(--header-text-color) 8%, transparent);
  --sh-field: color-mix(in srgb, var(--header-text-color) 6%, var(--header-bg-color));
}

.sh {
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  font-family: var(--pf-ui);
  border-bottom: 1px solid var(--sh-line);
  transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}

/* Once the page scrolls, the bar lifts off the content: a soft shadow and
   a frosted, slightly see-through ground instead of a hard edge. */
.sh.is-scrolled {
  background-color: color-mix(in srgb, var(--header-bg-color) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.35);
}

.sh-main {
  max-width: 1320px;
  margin: 0 auto;
  height: 64px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.sh-brand { display: flex; align-items: center; }
.sh-brand img { height: 40px; width: auto; display: block; transition: transform 0.25s var(--ease); }
.sh-brand:hover img { transform: scale(1.04); }

.sh-search {
  position: relative;
  width: 100%;
  max-width: 560px;
  justify-self: center;
  margin: 0;
}

.sh-search i {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  opacity: 0.5;
  pointer-events: none;
}

.sh .sh-search input {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  padding-inline-start: 42px;
  font-size: 0.9rem;
  color: var(--header-text-color);
  background: var(--sh-field);
  border: 1px solid transparent !important;
  border-radius: var(--pf-r) !important;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.sh .sh-search input::placeholder { color: var(--header-text-color); opacity: 0.5; }
.sh .sh-search input::-webkit-search-cancel-button { filter: grayscale(1); }

.sh .sh-search input:focus {
  background: var(--header-bg-color);
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 20%, transparent) !important;
}

.sh-tools { display: flex; align-items: center; gap: 4px; justify-self: end; }

.sh-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  border-radius: var(--pf-r-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--header-text-color) !important;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), transform 0.12s var(--ease);
}

.sh-icon:hover { background: var(--sh-hover); }
.sh-icon:active { transform: scale(0.92); }

.sh-badge {
  position: absolute;
  top: 1px;
  inset-inline-end: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-color);
  color: var(--accent-ink);
  font: 700 0.62rem/17px var(--font-ui);
  text-align: center;
  box-shadow: 0 0 0 2px var(--header-bg-color);
}

/* base.html's script adds .is-bumped whenever the count changes. */
.sh-badge.is-bumped { animation: sh-bump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sh-bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

.sh-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  margin-inline-end: 4px;
  border: 1px solid var(--sh-line);
  border-radius: var(--pf-r);
  background: none;
  color: var(--header-text-color);
  font: 600 0.78rem var(--font-ui);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}

.sh-chip:hover { background: var(--sh-hover); }
.sh-chip > .fa-globe { opacity: 0.7; }
.sh-chip-caret { font-size: 0.55rem; opacity: 0.55; transition: transform 0.2s var(--ease); }
.sh-chip[aria-expanded="true"] .sh-chip-caret { transform: rotate(180deg); }

.sh-avatar-btn { border: 0; background: none; padding: 3px; margin-inline-start: 4px; border-radius: 50%; cursor: pointer; }

.sh-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 0.85rem var(--font-ui);
  box-shadow: 0 0 0 2px var(--header-bg-color), 0 0 0 3.5px color-mix(in srgb, var(--accent-color) 45%, transparent);
  transition: box-shadow 0.2s var(--ease);
}

.sh-avatar-btn:hover .sh-avatar { box-shadow: 0 0 0 2px var(--header-bg-color), 0 0 0 4px var(--accent-color); }

.sh-login {
  height: 40px;
  padding: 0 20px;
  margin-inline-start: 8px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--pf-r);
  background: var(--accent-color);
  color: var(--accent-ink) !important;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: filter 0.18s var(--ease), transform 0.12s var(--ease);
}

.sh-login:hover { filter: brightness(1.08); }
.sh-login:active { transform: scale(0.97); }

/* Second row: home, the store's own categories, then account/admin. */
.sh-nav {
  max-width: 1320px;
  margin: 0 auto;
  height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* align-items: center - Playful's links are shorter pills than the row,
   and without it a menu link sat at the top of its wrapper, higher than
   the plain links beside it. */
.sh-nav > .dropdown { display: flex; align-items: center; height: 100%; }
.sh-nav-spacer { flex: 1; }

.sh-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  color: var(--header-text-color) !important;
  opacity: 0.7;
  font-family: var(--pf-ui);
  font-size: var(--pf-nav-size);
  font-weight: var(--pf-nav-w);
  text-transform: var(--pf-case);
  letter-spacing: var(--pf-track);
  white-space: nowrap;
  transition: opacity 0.18s var(--ease);
}

.sh-link > i { font-size: 0.85em; opacity: 0.8; }
.sh-link:hover, .sh-link.is-active, .sh-link[aria-expanded="true"] { opacity: 1; }

/* ::before, not ::after - Bootstrap draws .dropdown-toggle's caret there. */
.sh-link::before {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-color);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}

.sh-link:hover::before { transform: scaleX(0.35); }
.sh-link.is-active::before { transform: scaleX(1); }
.sh-link.dropdown-toggle::after { margin-inline-start: 2px; opacity: 0.6; }
.sh-link-admin { color: var(--accent-color) !important; opacity: 1; }

/* Menus opened from the header. */
.sh-menu-label {
  padding: 8px 12px 4px;
  font: 700 0.65rem var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.sh .dropdown-item { display: flex; align-items: center; gap: 10px; }
.sh .dropdown-item > i { width: 16px; text-align: center; font-size: 0.85rem; color: var(--ink-muted); }
.sh-prefs-menu { min-width: 220px !important; }
.sh-prefs-menu .dropdown-item { justify-content: space-between; }
.sh-prefs-menu .dropdown-item.is-current { color: var(--ink); font-weight: 600; }
.sh-prefs-menu .dropdown-item.is-current > i { color: var(--accent-color); }
.sh-cur-sym { display: inline-block; min-width: 26px; font-weight: 600; color: var(--ink-muted); }
.sh-account-menu { min-width: 250px !important; }
.sh .dropdown-item.is-danger, .sh .dropdown-item.is-danger > i { color: var(--danger); }

.sh-account-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.sh-account-id strong { color: var(--ink); font-size: 0.9rem; }
.sh-account-id span { color: var(--ink-muted); font-size: 0.78rem; word-break: break-all; }

/* Category links: long names are cut with "…" (full name on hover). */
.sh-link-cat {
  display: inline-block;
  max-width: 170px;
  line-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-link-cat::before { bottom: 0; }

/* "More" holds whatever categories the bar has no room for: the bar shows
   five on a wide screen, three on a narrower one, none below that - and
   the menu lists exactly the rest (every category is rendered in it; the
   ones already in the bar are hidden). */
.sh-more { display: none; }
.sh-more.has-gt5 { display: flex; }
.sh .sh-more-menu { max-height: min(60vh, 440px); overflow-y: auto; min-width: 220px !important; }
.sh .sh-more-menu .sh-more-i1, .sh .sh-more-menu .sh-more-i2, .sh .sh-more-menu .sh-more-i3,
.sh .sh-more-menu .sh-more-i4, .sh .sh-more-menu .sh-more-i5 { display: none; }

@container sh (max-width: 1220px) {
  .sh-link-cat:nth-of-type(n+6) { display: none; }
  .sh-more.has-gt3 { display: flex; }
  .sh .sh-more-menu .sh-more-i4, .sh .sh-more-menu .sh-more-i5 { display: flex; }
}

@container sh (max-width: 1080px) {
  .sh-link-cat { display: none; }
  .sh-more { display: flex; }
  .sh .sh-more-menu .sh-more-i1, .sh .sh-more-menu .sh-more-i2, .sh .sh-more-menu .sh-more-i3 { display: flex; }
}

/* Phone/tablet: logo and utilities only - search, sections and the
   account menu live in the bottom dock and account sheet instead. */
@container sh (max-width: 991.98px) {
  .sh-main { height: 62px; padding: 0 12px 0 14px; grid-template-columns: auto 1fr; gap: 10px; }
  .sh-brand img { height: 32px; }
  .sh-search, .sh-nav, .sh-wide-only { display: none !important; }
  .sh-chip { height: 34px; padding: 0 10px; }
}

/* ---- Night mode toggle ----
   Sits in the same .sh-icon slot as the other header icons, so it needs
   no size or placement rules of its own - only the icon's own morph
   animation. currentColor picks up --header-text-color from .sh-icon, same
   as every icon beside it, so it follows whatever header colors the
   admin has set instead of a hardcoded tone.

   The sun becomes the moon rather than being swapped for it: an SVG
   <mask> cuts a circle out of the sun's disc, and that cutout circle
   slides in from off to the side as the rays retract, revealing a
   crescent instead of presenting a second unrelated icon. Which state
   is active is driven by the same data-theme attribute/prefers-color-
   scheme pair as every color token above - no separate state to keep in
   sync. */
.theme-toggle-btn { border: none; background: none; cursor: pointer; touch-action: manipulation; }

/* Hidden until the browser fires beforeinstallprompt (base.html's inline
   script reveals it then) - most browsers/platforms never fire that event
   (already installed, iOS Safari, unsupported browser), so this stays
   hidden there rather than showing a button that would do nothing. */
.install-app-btn { display: none; border: none; background: none; cursor: pointer; }
.theme-toggle-btn svg { width: 20px; height: 20px; overflow: visible; }

.theme-toggle-rays line {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  transform-origin: 12px 12px;
  transition: opacity 0.35s var(--ease), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle-body { fill: currentColor; }

.theme-toggle-cutout {
  transform: translate(9px, -9px) scale(0.4);
  transform-origin: 12px 12px;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle-rays line { opacity: 0; transform: scale(0.3); }
  html:not([data-theme="light"]) .theme-toggle-cutout { transform: translate(3px, -4px) scale(1); }
}

html[data-theme="dark"] .theme-toggle-rays line { opacity: 0; transform: scale(0.3); }
html[data-theme="dark"] .theme-toggle-cutout { transform: translate(3px, -4px) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-rays line, .theme-toggle-cutout { transition: none; }
}

/* Suppresses the View Transitions API's own default cross-fade so it
   doesn't play underneath/against the circular reveal that
   toggleThemeMode() in base.html drives manually via the Web Animations
   API on this exact pseudo-element. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Left with animation:none like the two above, this group's own default
   transition finishes (~0.25s) well before the 650ms clip-path reveal
   toggleThemeMode() drives on ::view-transition-new(root) - the browser
   then tears the whole transition down as "done", so the circle freezes
   mid-sweep and everything outside it snaps straight to the new theme.
   Matching this duration to that animation's keeps the transition alive
   until the reveal actually finishes. */
::view-transition-group(root) {
  animation-duration: 650ms;
}

/* Dropdowns. Bootstrap's Popper placement never detects RTL here — it keys
   off document.dir, and this site only sets the CSS `direction` property.
   Every dropdown opts out via data-bs-display="static" and is positioned
   with logical properties, which do respect `direction`. */
.dropdown-menu {
  min-width: 200px !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  inset-inline-start: 0 !important;
  inset-inline-end: unset !important;
  left: unset !important;
  right: unset !important;
  margin: 0 !important;
  text-align: start;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
}

.dropdown-menu-end {
  inset-inline-start: unset !important;
  inset-inline-end: 0 !important;
}

.dropdown-item {
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-body);
}

.dropdown-item:hover { background: var(--mat); color: var(--ink); }

.dropdown-item.active-link,
.dropdown-item-report.active-link {
  background-color: var(--ink) !important;
  color: #fff !important;
  font-weight: 600;
}

.dropdown-divider { border-top: 1px solid var(--line); margin: 5px 4px; }

.navbar-brand img { transition: transform 0.2s var(--ease); }
.navbar-brand:hover img { transform: scale(1.03); }

/* ---- Mobile dock ----
   Sticky, not fixed - and positioned in base.html right before the footer,
   so it pins to the screen bottom while there's page below it and then
   settles into place flush above the footer instead of covering it.
   (position:sticky genuinely holds here, unlike on the top bar.) */
.rx-mobile-dock {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 1000;
  background-color: var(--header-bg-color) !important;
  border-radius: 22px 22px 0 0;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -1px 0 var(--sh-line), 0 -10px 28px -8px rgba(0, 0, 0, 0.28);
}

/* 44px minimum touch target on every dock item. */
.rx-dock-item {
  color: var(--header-text-color) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 58px;
  min-height: 48px;
  padding: 2px 4px;
  font-family: var(--pf-ui);
  font-size: 0.65rem;
  font-weight: 600;
  border: none;
  background: none;
  opacity: 0.62;
  transition: opacity 0.18s var(--ease), transform 0.12s var(--ease);
}

/* The icon sits in a pill that fills with the accent when active. */
.rx-dock-item i {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.rx-dock-item:active { transform: scale(0.92); }

/* One predictable height - a label like "الرئيسية" must not wrap. */
.rx-dock-item span { white-space: nowrap; }

.rx-dock-item.active-link { opacity: 1; }
.rx-dock-item.active-link i {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  color: var(--accent-color);
}

@media (max-width: 991.98px) {
  .rx-mobile-dock { display: flex; }
  body { padding-top: var(--mobile-topbar-height); }
  /* A short page (404, empty cart...) still fills the screen, so the footer
     starts below the fold and the dock sits at the bottom, not mid-screen. */
  #main-content-container:has(> *) { min-height: calc(100svh - var(--mobile-topbar-height) - var(--mobile-dock-clearance)); }
}

/* ---- Account bottom sheet ---- */

.rx-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(26, 25, 23, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}

.rx-sheet-overlay.is-open { opacity: 1; pointer-events: auto; }

.rx-account-sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1101;
  background: var(--surface-warm);
  color: var(--ink-body);
  border-radius: 22px 22px 0 0;
  max-height: 88vh;
  overflow-y: auto;
  padding: 10px 18px 26px;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease);
}

.rx-account-sheet.is-open { transform: translateY(0); }

.rx-sheet-handle {
  width: 38px; height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
  margin: 6px auto 18px;
}

.rx-sheet-identity {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 4px 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.rx-sheet-avatar {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-color, var(--gold));
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
}

.rx-sheet-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 12px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink) !important;
}

button.rx-sheet-link { width: 100%; border: 0; background: none; text-align: start; cursor: pointer; }
.rx-sheet-link:hover { background: var(--mat); color: var(--ink) !important; }
.rx-sheet-link i { width: 20px; text-align: center; color: var(--ink-muted); font-size: 0.9375rem; }
.rx-sheet-link.is-danger, .rx-sheet-link.is-danger i { color: var(--danger) !important; }

/* Admin and Reports collapse behind one row each: 14 flat links became 4
   for shoppers, with everything still one tap away for admins. */
.rx-sheet-group { border: none; }

.rx-sheet-group > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 12px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.rx-sheet-group > summary::-webkit-details-marker { display: none; }
.rx-sheet-group > summary:hover { background: var(--mat); }
.rx-sheet-group > summary i:first-child { width: 20px; text-align: center; color: var(--ink-muted); font-size: 0.9375rem; }
.rx-sheet-group > summary .rx-sheet-group-label { flex: 1; }

.rx-sheet-group > summary .rx-sheet-chevron {
  font-size: 0.6875rem;
  color: var(--ink-faint);
  transition: transform 0.2s var(--ease);
}

.rx-sheet-group[open] > summary .rx-sheet-chevron { transform: rotate(90deg); }

.rx-sheet-group-body {
  padding-inline-start: 34px;
  display: flex;
  flex-direction: column;
}

.rx-sheet-group-body .rx-sheet-link { font-size: 0.9rem; font-weight: 400; min-height: 42px; }

.rx-sheet-divider { height: 1px; background: var(--line); margin: 10px 6px; }

/* ==========================================================================
   19. Site footer (.sf)
   Same idea as the header: colors from Store Settings, type and shape from
   the theme preset, layout from a container query so Settings' preview
   can show it at phone width.
   ========================================================================== */
.sf-scope { container: sf / inline-size; flex-shrink: 0; }

.sf {
  --sf-muted: color-mix(in srgb, var(--footer-text-color) 64%, transparent);
  --sf-line:  color-mix(in srgb, var(--footer-text-color) 14%, transparent);
  position: relative;
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  font-family: var(--pf-ui);
  padding: 60px 0 0;
}

/* A hairline of the store's accent along the top edge. */
.sf::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-color) 20%, var(--accent-color) 80%, transparent);
  opacity: 0.85;
}

.sf-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.sf-logo img { height: 46px; width: auto; display: block; }

.sf-tagline {
  margin: 16px 0 0;
  max-width: 36ch;
  color: var(--sf-muted);
  font-size: 0.9rem;
  line-height: 1.75;
  text-wrap: pretty;
}

.sf-social { display: flex; gap: 10px; margin-top: 22px; }

.sf-social a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--sf-line);
  border-radius: var(--pf-r-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-text-color) !important;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.sf-social a:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-ink) !important;
  transform: translateY(-3px);
}

/* Hidden until the install prompt is available (see .install-app-btn). */
.sf-install {
  display: none;
  width: max-content;
  align-items: center;
  gap: 10px;
  height: 42px;
  margin-top: 22px;
  padding: 0 18px;
  border: 1px solid var(--sf-line);
  border-radius: var(--pf-r);
  background: none;
  color: var(--footer-text-color);
  font: 600 0.85rem var(--pf-ui);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.sf-install:hover { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 10%, transparent); }

.sf-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.sf-col h6 {
  margin: 0 0 6px;
  color: var(--footer-text-color);
  font-family: var(--pf-display);
  font-size: var(--pf-h-size);
  font-weight: var(--pf-h-w);
  text-transform: var(--pf-h-case);
  letter-spacing: var(--pf-h-track);
}

.sf-col a {
  color: var(--sf-muted) !important;
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

.sf-col a:hover { color: var(--footer-text-color) !important; text-decoration-color: var(--accent-color); }

.sf-pay { display: flex; flex-wrap: wrap; gap: 8px; align-self: stretch; }

.sf-pay span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--sf-line);
  border-radius: var(--pf-r);
  font-size: 0.8rem;
  color: var(--footer-text-color);
}

.sf-pay i { color: var(--accent-color); }
.sf-pay .sf-secure i { font-size: 1.05rem; }
.sf-col a.sf-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.sf-wa i { font-size: 1.05rem; color: #25d366; }

.sf-bottom {
  max-width: 1320px;
  margin: 52px auto 0;
  padding: 20px 24px 22px;
  border-top: 1px solid var(--sf-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 0.8rem;
  color: var(--sf-muted);
}

.sf-credit { color: var(--sf-muted) !important; transition: color 0.2s var(--ease); }
.sf-credit:hover { color: var(--footer-text-color) !important; }

@container sf (max-width: 900px) {
  .sf-grid { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .sf-brand { grid-column: 1 / -1; }
  .sf-col:last-child { grid-column: 1 / -1; }
}

@container sf (max-width: 520px) {
  .sf { padding-top: 42px; }
  .sf-grid { padding: 0 18px; }
  .sf-bottom { margin-top: 36px; flex-direction: column; text-align: center; padding-inline: 18px; }
}

/* ==========================================================================
   20. Theme presets
   html[data-preset] comes from StoreSetting.theme_preset. A preset only
   decides typography and shape - every color stays the owner's own from
   Store Settings (choosing a preset there just pre-fills those pickers).
   Arabic and Hebrew get faces that actually carry their scripts, and
   never letter-spacing or uppercase.
   ========================================================================== */
/* Every preset sets every variable: Settings' preview nests one preset
   inside the page's own, so nothing may be left to inherit. */
html, [data-preset="luxury"] {
  --pf-card-r:  6px;
  --pf-badge-r: 3px;
  --pf-cat-r:   50%;
  --pf-t-size:  2.1rem;
  --pf-t-w:     600;
  --pf-t-case:  none;
  --pf-t-track: 0;
  --pf-display: 'Cormorant Garamond', 'Spectral', Georgia, serif;
  --pf-ui:      var(--font-ui);
  --pf-r:       3px;
  --pf-r-icon:  50%;
  --pf-nav-size: 0.72rem;
  --pf-nav-w:   600;
  --pf-case:    uppercase;
  --pf-track:   0.14em;
  --pf-h-size:  1.3rem;
  --pf-h-w:     600;
  --pf-h-case:  none;
  --pf-h-track: 0;
}

[data-preset="playful"] {
  --pf-card-r:  22px;
  --pf-badge-r: 999px;
  --pf-cat-r:   30%;
  --pf-t-size:  1.65rem;
  --pf-t-w:     800;
  --pf-t-case:  none;
  --pf-t-track: 0;
  --pf-display: 'Baloo Bhaijaan 2', 'Inter', sans-serif;
  --pf-ui:      'Baloo Bhaijaan 2', 'Inter', sans-serif;
  --pf-r:       999px;
  --pf-r-icon:  50%;
  --pf-nav-size: 0.95rem;
  --pf-nav-w:   700;
  --pf-case:    none;
  --pf-track:   0;
  --pf-h-size:  1.15rem;
  --pf-h-w:     800;
  --pf-h-case:  none;
  --pf-h-track: 0;
}

[data-preset="fashion"] {
  --pf-card-r:  0;
  --pf-badge-r: 0;
  --pf-cat-r:   0;
  --pf-t-size:  1.1rem;
  --pf-t-w:     800;
  --pf-t-case:  uppercase;
  --pf-t-track: 0.12em;
  --pf-display: 'Archivo', 'Inter', sans-serif;
  --pf-ui:      'Archivo', 'Inter', sans-serif;
  --pf-r:       0;
  --pf-r-icon:  0;
  --pf-nav-size: 0.78rem;
  --pf-nav-w:   700;
  --pf-case:    uppercase;
  --pf-track:   0.08em;
  --pf-h-size:  0.75rem;
  --pf-h-w:     800;
  --pf-h-case:  uppercase;
  --pf-h-track: 0.14em;
}

[data-preset="clean"] {
  --pf-card-r:  14px;
  --pf-badge-r: 999px;
  --pf-cat-r:   50%;
  --pf-t-size:  1.45rem;
  --pf-t-w:     700;
  --pf-t-case:  none;
  --pf-t-track: 0;
  --pf-display: var(--font-ui);
  --pf-ui:      var(--font-ui);
  --pf-r:       10px;
  --pf-r-icon:  50%;
  --pf-nav-size: 0.875rem;
  --pf-nav-w:   500;
  --pf-case:    none;
  --pf-track:   0;
  --pf-h-size:  0.8rem;
  --pf-h-w:     600;
  --pf-h-case:  uppercase;
  --pf-h-track: 0.08em;
}


/* Each preset's own page neutrals (background, cards, image mats, lines),
   light and dark. Luxury keeps the warm defaults from section 1. These are
   style, not brand - the owner's colors from Settings stay on top. */
[data-preset="playful"] {
  --page: #fff8ef; --surface: #ffffff; --surface-warm: #fffdf9; --mat: #fff0e2; --line: #f1e6f0; --line-strong: #e4d6e6;
}
[data-preset="fashion"] {
  --page: #ffffff; --surface: #ffffff; --surface-warm: #ffffff; --mat: #f3f2f0; --line: #e8e8e8; --line-strong: #d4d4d4;
}
[data-preset="clean"] {
  --page: #f5f7fa; --surface: #ffffff; --surface-warm: #ffffff; --mat: #eef2f7; --line: #e3e8ef; --line-strong: #cfd7e2;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"])[data-preset="playful"], html:not([data-theme="light"]) [data-preset="playful"] {
    --page: #141127; --surface: #1d1838; --surface-warm: #211b40; --mat: #272148; --line: #2e2852; --line-strong: #3b3466; --chip-bg: rgba(29, 24, 56, 0.85);
  }
  html:not([data-theme="light"])[data-preset="fashion"], html:not([data-theme="light"]) [data-preset="fashion"] {
    --page: #0a0a0a; --surface: #111111; --surface-warm: #141414; --mat: #1a1a1a; --line: #262626; --line-strong: #333333; --chip-bg: rgba(17, 17, 17, 0.85);
  }
  html:not([data-theme="light"])[data-preset="clean"], html:not([data-theme="light"]) [data-preset="clean"] {
    --page: #0f1318; --surface: #151a21; --surface-warm: #181e26; --mat: #1b212a; --line: #252c36; --line-strong: #323b47; --chip-bg: rgba(21, 26, 33, 0.85);
  }
}
html[data-theme="dark"][data-preset="playful"], html[data-theme="dark"] [data-preset="playful"] {
  --page: #141127; --surface: #1d1838; --surface-warm: #211b40; --mat: #272148; --line: #2e2852; --line-strong: #3b3466; --chip-bg: rgba(29, 24, 56, 0.85);
}
html[data-theme="dark"][data-preset="fashion"], html[data-theme="dark"] [data-preset="fashion"] {
  --page: #0a0a0a; --surface: #111111; --surface-warm: #141414; --mat: #1a1a1a; --line: #262626; --line-strong: #333333; --chip-bg: rgba(17, 17, 17, 0.85);
}
html[data-theme="dark"][data-preset="clean"], html[data-theme="dark"] [data-preset="clean"] {
  --page: #0f1318; --surface: #151a21; --surface-warm: #181e26; --mat: #1b212a; --line: #252c36; --line-strong: #323b47; --chip-bg: rgba(21, 26, 33, 0.85);
}

/* Arabic / Hebrew: real script faces, no tracking or case games. */
html[lang="ar"], html[lang="ar"] [data-preset],
html[lang="he"], html[lang="he"] [data-preset] {
  --pf-case: none; --pf-track: 0; --pf-h-case: none; --pf-h-track: 0; --pf-t-case: none; --pf-t-track: 0;
}

html[lang="ar"][data-preset="luxury"], html[lang="ar"] [data-preset="luxury"],
html[lang="ar"][data-preset="clean"], html[lang="ar"] [data-preset="clean"] {
  --pf-display: var(--font-ar); --pf-ui: var(--font-ar); --pf-nav-size: 0.9rem; --pf-h-size: 1rem; --pf-t-size: 1.6rem;
}

html[lang="ar"][data-preset="playful"], html[lang="ar"] [data-preset="playful"] {
  --pf-display: 'Baloo Bhaijaan 2', var(--font-ar); --pf-ui: 'Baloo Bhaijaan 2', var(--font-ar);
}

html[lang="ar"][data-preset="fashion"], html[lang="ar"] [data-preset="fashion"] {
  --pf-display: 'Noto Kufi Arabic', var(--font-ar); --pf-ui: 'Noto Kufi Arabic', var(--font-ar); --pf-nav-size: 0.82rem; --pf-h-size: 0.9rem; --pf-t-size: 1.25rem;
}

html[lang="he"], html[lang="he"] [data-preset] {
  --pf-display: var(--font-he); --pf-ui: var(--font-he); --pf-nav-size: 0.9rem; --pf-h-size: 1rem; --pf-t-size: 1.6rem;
}

/* Playful: the active nav item is a soft filled pill, not an underline. */
[data-preset="playful"] .sh-link { height: 34px; margin: 0 2px; border-radius: 999px; }
[data-preset="playful"] .sh-link-cat { line-height: 34px; }
[data-preset="playful"] .sh-link::before { display: none; }
[data-preset="playful"] .sh-link:hover { background: var(--sh-hover); }
[data-preset="playful"] .sh-link.is-active { background: color-mix(in srgb, var(--accent-color) 16%, transparent); color: var(--header-text-color) !important; }

/* Fashion: hard edges, a full-height underline flush with the bar. */
[data-preset="fashion"] .sh-link::before { inset-inline: 12px; height: 2px; border-radius: 0; background: var(--header-text-color); }
[data-preset="fashion"] .sf::before { background: var(--footer-text-color); opacity: 0.12; height: 1px; }

/* ==========================================================================
   21. Account area - /Profile, /orders, /myFav share one layout: the
   _account_nav.html sidebar (chips on phones) beside the page's content.
   ========================================================================== */
.acc-page { padding: 30px 0 64px; }
.acc-title {
  margin: 0 0 22px;
  font-family: var(--pf-display);
  font-size: calc(var(--pf-t-size) * 1.2);
  font-weight: var(--pf-t-w);
  text-transform: var(--pf-t-case);
  letter-spacing: var(--pf-t-track);
  color: var(--ink);
}
.acc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.acc-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.acc-nav {
  position: sticky; top: calc(var(--desktop-nav-height) + 20px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--pf-card-r); padding: 16px;
}
.acc-id { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.acc-avatar { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--accent-color); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font: 700 1.1rem var(--font-ui); }
.acc-id-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-id-text strong { color: var(--ink); font-size: 0.95rem; }
.acc-id-text span { color: var(--ink-muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-links { display: flex; flex-direction: column; gap: 2px; }
.acc-links a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: min(var(--pf-r), 12px); color: var(--ink-muted) !important; font-size: 0.92rem; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; }
.acc-links a i { width: 18px; text-align: center; }
.acc-links a:hover { background: var(--mat); color: var(--ink) !important; }
.acc-links a.is-active { background: color-mix(in srgb, var(--accent-color) 12%, transparent); color: var(--ink) !important; font-weight: 700; }
.acc-links a.is-active i { color: var(--accent-color); }
.acc-links a.is-danger { color: var(--danger) !important; margin-top: 6px; }
.acc-links a.is-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

.acc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--pf-card-r); padding: 22px 24px; }
.acc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.acc-card-title { margin: 0; font-family: var(--pf-display); font-size: calc(var(--pf-t-size) * 0.72); font-weight: var(--pf-t-w); text-transform: var(--pf-t-case); letter-spacing: var(--pf-t-track); color: var(--ink); }
.acc-card-sub { margin: 4px 0 0; color: var(--ink-muted); font-size: 0.85rem; }

.acc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--pf-r); font-size: 0.875rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.acc-btn-outline { border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.acc-btn-outline:hover { border-color: var(--ink); transform: none; }
.acc-btn-solid { border: 0; background: var(--button-color); color: var(--button-ink) !important; }
.acc-btn-solid:hover { filter: brightness(1.08); }

.acc-notice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--pf-card-r); background: color-mix(in srgb, var(--accent-color) 12%, transparent); color: var(--ink); font-size: 0.9rem; }
.acc-notice > i { color: var(--accent-color); font-size: 1.1rem; }
.acc-notice span { flex: 1; }
.acc-notice button { border: 0; background: none; color: var(--accent-color); font-weight: 700; cursor: pointer; padding: 0; }

.acc-rows { display: flex; flex-direction: column; }
.acc-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.acc-row > span:first-child { color: var(--ink-muted); }
.acc-row > span:last-child { color: var(--ink); font-weight: 500; text-align: end; overflow-wrap: anywhere; }
.acc-row .is-empty { color: var(--ink-faint); font-style: italic; font-weight: 400; }

.acc-form { display: none; }
.acc-form.is-open { display: block; }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.acc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acc-field.is-full { grid-column: 1 / -1; }
.acc-field label { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--ink); letter-spacing: 0; text-transform: none; }
.acc-field input { height: 48px; background: var(--page) !important; border-radius: min(var(--pf-r), 12px) !important; }
.acc-field input[readonly] { color: var(--ink-muted); }
.acc-field small { color: var(--ink-muted); font-size: 0.78rem; }
.acc-pass { position: relative; }
.acc-pass input { width: 100%; padding-inline-end: 46px !important; }
.acc-pass button { position: absolute; inset-inline-end: 6px; top: 5px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); cursor: pointer; }
.acc-pass button:hover { background: var(--mat); color: var(--ink); transform: none; }
.acc-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.acc-strength { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 700; }
.acc-strength-bars { flex: 1; display: flex; gap: 4px; }
.acc-strength-bars span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.acc-strength[data-score="1"] { color: var(--danger); } .acc-strength[data-score="1"] .on { background: var(--danger); }
.acc-strength[data-score="2"] { color: #c2700e; } .acc-strength[data-score="2"] .on { background: #e08a1e; }
.acc-strength[data-score="3"] { color: #3f8f4f; } .acc-strength[data-score="3"] .on { background: #55a865; }
.acc-strength[data-score="4"] { color: var(--success); } .acc-strength[data-score="4"] .on { background: var(--success); }

.acc-count { color: var(--ink-muted); font-size: 0.9rem; margin-inline-start: 8px; font-family: var(--font-ui); text-transform: none; letter-spacing: 0; }

@media (max-width: 860px) {
  .acc-page { padding: 18px 0 40px; }
  .acc-title { margin-bottom: 14px; }
  .acc-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .acc-nav { position: static; padding: 0; border: 0; background: none; }
  .acc-id { padding: 0 0 14px; }
  .acc-links { flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px; }
  .acc-links::-webkit-scrollbar { display: none; }
  .acc-links a { flex: 0 0 auto; height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--pf-r); background: var(--surface); font-size: 0.85rem; }
  .acc-links a.is-active { background: var(--ink); border-color: var(--ink); color: var(--page) !important; }
  .acc-links a.is-active i { color: inherit; }
  .acc-links a.is-danger { margin-top: 0; border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
  .acc-card { padding: 18px 16px; }
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 18. Print ------------------------------------------------------ */

/* ==========================================================================
   22. Result pages - order placed (order_placed.html), card payment
   waiting / not completed (checkout_card_result.html) and the 404/500
   page (error.html): one centered card.
   ========================================================================== */
.rp-page { padding: 40px 0 72px; display: flex; justify-content: center; }
.rp-card { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pf-card-r); padding: 36px 28px 28px; text-align: center; box-shadow: var(--shadow-sm); }
.rp-icon { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; }
.rp-icon.is-success { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); animation: rp-pop .5s var(--ease) both; }
.rp-icon.is-warning { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-ink); }
.rp-icon.is-danger { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.rp-icon.is-muted { background: var(--mat); color: var(--ink-muted); }
@keyframes rp-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rp-code { font-family: var(--pf-display); font-size: clamp(4.5rem, 16vw, 6.5rem); font-weight: 700; line-height: 1; margin: 0 0 14px; color: var(--accent-color); letter-spacing: .04em; }
.rp-title { font-family: var(--pf-display); font-size: 1.45rem; font-weight: var(--pf-h-w); color: var(--ink); margin: 0 0 8px; text-wrap: balance; }
.rp-text { color: var(--ink-muted); font-size: .95rem; line-height: 1.65; margin: 0 auto 20px; max-width: 40ch; }

.rp-order-no { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--mat); color: var(--ink); border-radius: var(--radius-pill); padding: 8px 16px; font-size: .9rem; cursor: pointer; margin-bottom: 6px; }
.rp-order-no strong { font-variant-numeric: tabular-nums; }
.rp-order-no i { color: var(--ink-muted); }
.rp-order-no:hover i { color: var(--ink); }

.rp-track { list-style: none; display: flex; margin: 22px 0 4px; padding: 0; }
.rp-track li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rp-track li + li::before { content: ""; position: absolute; top: 11px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--line); }
.rp-track li.is-done::before, .rp-track li.is-current::before { background: var(--accent-color); }
.rp-track-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: .6rem; }
.rp-track li.is-done .rp-track-dot, .rp-track li.is-current .rp-track-dot { background: var(--accent-color); border-color: var(--accent-color); }
.rp-track li.is-current .rp-track-dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-color) 22%, transparent); }
.rp-track-label { font-size: .78rem; color: var(--ink-muted); line-height: 1.3; }
.rp-track li.is-done .rp-track-label { color: var(--ink); }
.rp-track li.is-current .rp-track-label { color: var(--ink); font-weight: 700; }

.rp-summary { text-align: start; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.rp-line { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rp-line img { width: 48px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); background: var(--mat); flex-shrink: 0; }
.rp-line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-line-name { color: var(--ink); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-line-meta { color: var(--ink-muted); font-size: .8rem; }
.rp-line-price { color: var(--ink); font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .9rem; color: var(--ink-muted); }
.rp-row span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-row.is-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.05rem; color: var(--ink); font-weight: 700; }

.rp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.rp-actions .acc-btn { width: 100%; height: 48px; border-radius: var(--radius-pill); font-size: .95rem; }
.rp-progress { height: 6px; border-radius: var(--radius-pill); background: var(--mat); overflow: hidden; }
.rp-progress span { display: block; height: 100%; width: 40%; background: var(--accent-color); border-radius: inherit; animation: rp-slide 1.4s ease-in-out infinite; }
@keyframes rp-slide { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.lang-ar .rp-progress span, .lang-he .rp-progress span { animation-name: rp-slide-rtl; }
@keyframes rp-slide-rtl { from { transform: translateX(110%); } to { transform: translateX(-260%); } }

.rp-search { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0 16px; height: 46px; background: var(--surface); color: var(--ink-muted); }
.rp-search:focus-within { border-color: var(--ink); }
.rp-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; outline: 0; color: var(--ink); font-size: .95rem; }
.rp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.rp-chips a { padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); color: var(--ink); font-size: .85rem; text-decoration: none; }
.rp-chips a:hover { border-color: var(--ink); }

@media (max-width: 640px) {
  .rp-page { padding: 18px 0 40px; }
  .rp-card { border: 0; box-shadow: none; background: transparent; padding: 20px 4px; }
  .rp-track-label { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-icon.is-success, .rp-progress span { animation: none; }
}

/* ==========================================================================
   23. Terms page (terms&conditions.html) and the iPhone install sheet
   (showIosInstallInstructions in base.html).
   ========================================================================== */
.lg-page { padding: 32px 0 72px; }
.lg-head { margin-bottom: 26px; }
.lg-title { font-family: var(--pf-display); font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: var(--pf-h-w); text-transform: var(--pf-h-case); letter-spacing: var(--pf-h-track); color: var(--ink); margin: 0 0 6px; }
.lg-date { color: var(--ink-faint); font-size: .85rem; margin: 0; }
.lg-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.lg-toc { position: sticky; top: calc(var(--desktop-nav-height) + 20px); display: flex; flex-direction: column; gap: 2px; padding-inline-end: 16px; border-inline-end: 1px solid var(--line); }
.lg-toc a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-muted); font-size: .88rem; text-decoration: none; }
.lg-toc a:hover { color: var(--ink); background: var(--mat); }
.lg-toc a.is-active { color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 11%, transparent); font-weight: 600; }
.lg-body { max-width: 68ch; }
.lg-body section { padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--desktop-nav-height) + 16px); }
.lg-body section:first-child { border-top: 0; padding-top: 0; }
.lg-body h2 { display: flex; align-items: baseline; gap: 10px; font-family: var(--pf-ui); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.lg-body h2 span { color: var(--accent-color); font-variant-numeric: tabular-nums; min-width: 1.2em; }
.lg-body p { color: var(--ink-body); line-height: 1.8; margin: 0; text-wrap: pretty; }
.lg-body p + p { margin-top: 12px; }
.lg-body strong { color: var(--ink); }
.lg-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lg-contact a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); color: var(--ink); font-size: .9rem; text-decoration: none; }
.lg-contact a:hover { border-color: var(--ink); }

@media (max-width: 991.98px) {
  .lg-page { padding-top: 20px; }
  .lg-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lg-toc { position: sticky; top: var(--mobile-topbar-height); z-index: 5; flex-direction: row; overflow-x: auto; gap: 8px; padding: 10px 0; margin: 0 -12px; padding-inline: 12px; border: 0; background: var(--page); scrollbar-width: none; }
  .lg-toc::-webkit-scrollbar { display: none; }
  .lg-toc a { flex-shrink: 0; white-space: nowrap; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 6px 14px; font-size: .82rem; }
  .lg-toc a.is-active { border-color: var(--accent-color); }
  .lg-body section { scroll-margin-top: calc(var(--mobile-topbar-height) + 64px); }
}

.ins-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ins-head img { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: var(--mat); padding: 6px; flex-shrink: 0; }
.ins-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.ins-why { font-size: .85rem; color: var(--ink-muted); margin: 2px 0 0; }
.ins-head .cop-close-btn { margin-inline-start: auto; align-self: flex-start; }
.ins-steps { list-style: none; margin: 10px 0 0; padding: 0; }
.ins-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink); }
.ins-steps b { color: var(--accent-color); }
.ins-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--mat); color: var(--steel); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.ins-icon.is-text { font-size: .78rem; font-weight: 700; color: var(--steel); }
.ins-ok { width: 100%; height: 48px; margin-top: 12px; border: 0; border-radius: var(--radius-pill); background: var(--button-color); color: var(--button-ink); font-weight: 700; font-size: .95rem; cursor: pointer; }
.ins-hint { display: none; text-align: center; color: var(--ink-muted); margin-top: 10px; font-size: 1.2rem; animation: ins-bob 1.4s ease-in-out infinite; }
@keyframes ins-bob { 50% { transform: translateY(5px); } }
@media (max-width: 640px) { .ins-hint { display: block; } }
@media (prefers-reduced-motion: reduce) { .ins-hint { animation: none; } }

/* ==========================================================================
   24. Admin dashboard (DashboardApp in react/admin.js). Built only from the
   store tokens, so every preset and custom color scheme applies; state
   colors (new / low stock / sold out / delivered) stay fixed so they keep
   their meaning, and always come with an icon or a word.
   ========================================================================== */
.db { padding: 26px 0 64px; display: flex; flex-direction: column; gap: 16px; }
.db-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--pf-card-r); padding: 18px; min-width: 0; }
@keyframes db-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.db-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.db-hello { font-family: var(--pf-display); font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: var(--pf-h-w); text-transform: var(--pf-h-case); letter-spacing: var(--pf-h-track); color: var(--ink); margin: 0; }
.db-date { color: var(--ink-muted); font-size: .9rem; margin: 4px 0 0; }
.db-quick { display: flex; gap: 8px; }
.db-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: .87rem; font-weight: 700; text-decoration: none; transition: border-color .2s var(--ease), filter .2s var(--ease); }
.db-btn:hover { border-color: var(--ink); color: var(--ink); }
.db-btn.is-solid { background: var(--button-color); color: var(--button-ink); border-color: transparent; }
.db-btn.is-solid:hover { filter: brightness(1.08); color: var(--button-ink); }

.db-alerts { display: flex; gap: 10px; flex-wrap: wrap; }
.db-alert { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: .9rem; text-decoration: none; transition: border-color .2s var(--ease); }
a.db-alert:hover { border-color: var(--line-strong); color: var(--ink); }
.db-alert > i { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82rem; flex-shrink: 0; }
.db-alert b { font-variant-numeric: tabular-nums; }
.db-alert .is-new { background: color-mix(in srgb, var(--steel) 15%, transparent); color: var(--steel); }
.db-alert .is-low { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-ink); }
.db-alert .is-out { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.db-alert.is-ok > i { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.db-go { color: var(--accent-color); font-weight: 700; }

.db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.db-kpi-label { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: .85rem; }
.db-kpi-label i { color: var(--accent-color); }
.db-kpi-value { font-size: 1.7rem; font-weight: 700; color: var(--ink); margin: 8px 0 6px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.db-kpi-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-muted); }
.db-delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 700; font-variant-numeric: tabular-nums; }
.db-delta i { font-size: .68rem; }
.db-delta.is-up { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.db-delta.is-down { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.db-row-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.db-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.db-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.db-head h2 { font-family: var(--pf-ui); font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; }
.db-head a { font-size: .85rem; font-weight: 700; color: var(--accent-color); text-decoration: none; }
.db-head a:hover { text-decoration: underline; }
.db-empty { color: var(--ink-muted); font-size: .9rem; margin: 0; }
.db-muted { color: var(--ink-muted); font-size: .82rem; }

.db-seg { display: inline-flex; background: var(--mat); border-radius: var(--radius-pill); padding: 3px; }
.db-seg button { border: 0; background: none; padding: 6px 14px; min-height: 32px; border-radius: var(--radius-pill); font-size: .82rem; color: var(--ink-muted); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.db-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-xs); }
.db-chart-sum { color: var(--ink-body); font-size: .9rem; margin: 0 0 10px; line-height: 1.6; }
.db-chart-plot { position: relative; height: 180px; }
.db-chart-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.db-gridline { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.db-area { fill: var(--accent-color); opacity: .12; }
.db-line { fill: none; stroke: var(--accent-color); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.db-line-prev { fill: none; stroke: var(--ink-faint); stroke-width: 1.8; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.db-dot { position: absolute; inset-inline-end: -5px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 22%, transparent); pointer-events: none; }
.db-axis { display: flex; justify-content: space-between; color: var(--ink-muted); font-size: .76rem; margin-top: 6px; }
.db-legend { display: flex; gap: 18px; color: var(--ink-muted); font-size: .78rem; margin-top: 8px; }
.db-legend span { display: inline-flex; align-items: center; gap: 6px; }
.db-key { display: inline-block; width: 18px; height: 3px; border-radius: 2px; background: var(--accent-color); }
.db-key.is-prev { height: 0; background: none; border-top: 2px dashed var(--ink-faint); }

.db-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.db-head + .db-item, .db-head + .db-empty + .db-item { border-top: 0; padding-top: 0; }
a.db-item:hover .db-name { text-decoration: underline; }
.db-thumb { width: 42px; height: 50px; border-radius: var(--radius-sm); object-fit: cover; background: var(--mat); flex-shrink: 0; }
.db-item-text { flex: 1; min-width: 0; font-size: .9rem; color: var(--ink); }
.db-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-item-text small { display: block; color: var(--ink-muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-item-text small.is-out { color: var(--danger); font-weight: 600; }
.db-bar { height: 6px; border-radius: 6px; background: var(--mat); overflow: hidden; margin-top: 6px; }
.db-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent-color); }
.db-bar.is-low span { background: var(--gold); }
.db-bar.is-out span { background: var(--danger); }
.db-num { font-weight: 700; color: var(--ink); font-size: .9rem; font-variant-numeric: tabular-nums; }
.db-link { font-size: .82rem; font-weight: 700; color: var(--accent-color); text-decoration: none; padding: 8px 2px; }

.db-table-wrap { overflow-x: auto; }
.db-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.db-table th { color: var(--ink-muted); font-weight: 600; font-size: .78rem; text-align: start; padding: 0 8px 8px; white-space: nowrap; text-transform: none; letter-spacing: normal; }
.db-table td { padding: 11px 8px; border-top: 1px solid var(--line); color: var(--ink); font-variant-numeric: tabular-nums; }
.db-table td a { color: var(--ink); font-weight: 700; text-decoration: none; }
.db-table td a:hover { color: var(--accent-color); }
.db-cust { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-amount { white-space: nowrap; }
.db-amount i { color: var(--ink-muted); margin-inline-start: 4px; }
.db-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.db-status .fa-circle { font-size: .42rem; }
.db-status.is-new { background: color-mix(in srgb, var(--steel) 14%, transparent); color: var(--steel); }
.db-status.is-way { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-ink); }
.db-status.is-done { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.db-status.is-canceled { background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger); }

@media (max-width: 1199.98px) { .db-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991.98px) {
  .db { padding-top: 16px; gap: 12px; }
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .db-row-2, .db-row-3 { grid-template-columns: minmax(0, 1fr); }
  .db-card { padding: 14px; }
  .db-kpi-value { font-size: 1.35rem; }
  .db-quick .db-btn { width: 42px; padding: 0; justify-content: center; }
  .db-quick .db-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .db-alert { width: 100%; }
  .db-go { margin-inline-start: auto; }
  .db-chart-plot { height: 140px; }
}
@media (max-width: 575.98px) { .db-hide-s { display: none; } }

/* ---- Dashboard motion: cards rise in one after another, the chart draws
   from the oldest day to today, bars grow, the new-orders bell rings.
   Entrances only (nothing loops except the bell while orders wait), and
   all of it is off for prefers-reduced-motion. ---- */
@media (prefers-reduced-motion: no-preference) {
  .db > *, .db-kpis > *, .db-row-2 > *, .db-row-3 > * { animation: db-rise .55s var(--ease) both; }
  .db > :nth-child(2) { animation-delay: 60ms; }
  .db-kpis > :nth-child(1) { animation-delay: 120ms; }
  .db-kpis > :nth-child(2) { animation-delay: 180ms; }
  .db-kpis > :nth-child(3) { animation-delay: 240ms; }
  .db-kpis > :nth-child(4) { animation-delay: 300ms; }
  .db > :nth-child(4) > :nth-child(1) { animation-delay: 360ms; }
  .db > :nth-child(4) > :nth-child(2) { animation-delay: 420ms; }
  .db > :nth-child(5) > :nth-child(1) { animation-delay: 480ms; }
  .db > :nth-child(5) > :nth-child(2) { animation-delay: 540ms; }
  .db-row-3 > :nth-child(1) { animation-delay: 600ms; }
  .db-row-3 > :nth-child(2) { animation-delay: 660ms; }
  .db-row-3 > :nth-child(3) { animation-delay: 720ms; }
  .db-alerts, .db-kpis, .db-row-2, .db-row-3 { animation: none; }

  .db-alert { animation: db-rise .5s var(--ease) both; }
  .db-alert:nth-child(2) { animation-delay: 80ms; }
  .db-alert:nth-child(3) { animation-delay: 160ms; }
  .db-delta { animation: db-pop .45s var(--ease) .9s both; }

  /* Chart: revealed in reading direction, area fades in, end dot pops. */
  .db-chart-plot svg { animation: db-reveal 1.1s cubic-bezier(.4, 0, .2, 1) .35s both; }
  [dir="rtl"] .db-chart-plot svg { animation-name: db-reveal-rtl; }
  .db-area { animation: db-fade .8s ease 1s both; }
  .db-dot { animation: db-pop .4s var(--ease) 1.4s both; }

  .db-bar span { transform-origin: left center; animation: db-grow .8s var(--ease) .5s both; }
  [dir="rtl"] .db-bar span { transform-origin: right center; }

  .db-alert .is-ringing { animation: db-ring .9s ease .8s 1, db-pulse 2.4s ease-out 2s infinite; }

  a.db-alert, .db-btn, a.db-item, .db-kpi { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), filter .2s var(--ease); }
  a.db-alert:hover, .db-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  a.db-item:hover .db-thumb { transform: scale(1.05); }
  .db-thumb { transition: transform .25s var(--ease); }
  .db-btn:active, a.db-alert:active { transform: translateY(0) scale(.98); }
}
@keyframes db-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes db-fade { from { opacity: 0; } }
@keyframes db-pop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes db-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes db-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes db-reveal-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes db-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
@keyframes db-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--steel) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }

/* ==========================================================================
   25. Admin products (react/products.js): .pl-* the list, .pe-* the editor.
   Store tokens only; stock states keep fixed colors plus an icon/word.
   ========================================================================== */
.pl, .pe { padding: 26px 0 64px; display: flex; flex-direction: column; gap: 16px; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pl-title { font-family: var(--pf-display); font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: var(--pf-h-w); text-transform: var(--pf-h-case); letter-spacing: var(--pf-h-track); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.pl-title span { font-family: var(--pf-ui); font-size: .95rem; color: var(--ink-muted); font-weight: 600; margin-inline-start: 6px; }

.pe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: .88rem; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color .2s var(--ease), filter .2s var(--ease), transform .15s var(--ease); }
.pe-btn:hover { border-color: var(--ink); color: var(--ink); }
.pe-btn:active { transform: scale(.98); }
.pe-btn.is-solid { background: var(--button-color); color: var(--button-ink); border-color: transparent; }
.pe-btn.is-solid:hover { filter: brightness(1.08); color: var(--button-ink); }
.pe-btn:disabled { opacity: .55; cursor: default; filter: none; transform: none; }
.pe-btn.is-sm { height: 36px; padding: 0 14px; font-size: .82rem; }
.pl-icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-icon-btn:hover { background: var(--mat); color: var(--ink); }

.pl-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pl-tabs::-webkit-scrollbar { display: none; }
.pl-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .86rem; cursor: pointer; }
.pl-tabs button span { font-size: .76rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pl-tabs button.is-on { background: var(--ink); color: var(--page); border-color: var(--ink); font-weight: 700; }
.pl-tabs button.is-on span { color: inherit; opacity: .75; }

.pl-card, .pe-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--pf-card-r); padding: 18px; min-width: 0; }
.pl-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-search { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-muted); }
.pl-search:focus-within { border-color: var(--ink); }
.pl-search input { flex: 1; min-width: 0; border: 0 !important; background: none !important; box-shadow: none !important; outline: 0; padding: 0; color: var(--ink); font-size: .9rem; }
.pl-tools select { height: 42px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: .86rem; max-width: 100%; }

.pl-list { display: flex; flex-direction: column; }
.pl-head, .pl-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, .8fr) 70px 130px; gap: 12px; align-items: center; }
.pl-head { padding: 0 8px 10px; color: var(--ink-muted); font-size: .78rem; font-weight: 600; }
.pl-row { padding: 10px 8px; border-top: 1px solid var(--line); cursor: pointer; border-radius: var(--radius-sm); transition: background .15s var(--ease); }
.pl-row:hover { background: var(--surface-warm); }
.pl-row.is-hidden .pl-prod, .pl-row.is-hidden .pl-c-price { opacity: .55; }
.pl-prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-prod img { width: 44px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; background: var(--mat); flex-shrink: 0; }
.pl-prod div { min-width: 0; }
.pl-prod a { display: block; color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-prod small { display: block; color: var(--ink-muted); font-size: .78rem; }
.pl-price { font-variant-numeric: tabular-nums; font-size: .9rem; white-space: nowrap; }
.pl-price b { color: var(--ink); }
.pl-price s { color: var(--ink-muted); font-size: .78rem; }
.pl-price em { font-style: normal; color: var(--accent-color); font-weight: 700; font-size: .76rem; }
.pl-stock { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.pl-stock i { font-size: .68rem; }
.pl-stock.is-ok { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.pl-stock.is-low { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-ink); }
.pl-stock.is-out { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.pl-c-opts { color: var(--ink-muted); font-size: .84rem; }
.pl-c-act { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pl-menu { position: relative; }
/* Each row is its own layer (entrance animation), so the row with an open
   menu goes on top - otherwise the rows below cover the menu and take its clicks. */
.pl-row:has(.pl-menu-list) { position: relative; z-index: 10; }
.pl-menu-list { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 30; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; flex-direction: column; animation: db-rise .18s var(--ease) both; }
.pl-menu-list a, .pl-menu-list button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; border-radius: var(--radius-sm); color: var(--ink); font-size: .88rem; text-align: start; text-decoration: none; cursor: pointer; }
.pl-menu-list a:hover, .pl-menu-list button:hover { background: var(--mat); color: var(--ink); }
.pl-menu-list i { width: 16px; color: var(--ink-muted); }
.pl-menu-list .is-danger, .pl-menu-list .is-danger i { color: var(--danger); }
.pl-empty, .pl-none { text-align: center; padding: 40px 16px; color: var(--ink-muted); }
.pl-empty > i { font-size: 2.2rem; color: var(--accent-color); margin-bottom: 12px; }
.pl-empty h2 { font-size: 1.2rem; color: var(--ink); margin: 0 0 6px; }
.pl-empty p, .pl-none p { margin: 0 0 16px; }

.pe-switch { position: relative; width: 44px; height: 26px; border: 0; border-radius: 99px; background: var(--line-strong); cursor: pointer; flex-shrink: 0; padding: 0; transition: background .2s var(--ease); }
.pe-switch span { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: inset-inline-start .2s var(--ease); }
.pe-switch.is-on { background: var(--success); }
.pe-switch.is-on span { inset-inline-start: 21px; }
.pe-switch:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

/* Editor */
.pe-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; color: var(--accent-color); font-weight: 700; font-size: .88rem; text-decoration: none; padding: 6px 0; }
.pe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pe-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pe-side { position: sticky; top: calc(var(--desktop-nav-height) + 16px); }
.pe-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pe-card-head h2 { font-family: var(--pf-ui); font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; }
.pe-hint { color: var(--ink-muted); font-size: .8rem; margin: 8px 0 0; line-height: 1.5; }
.pe-hint-top { margin: -6px 0 14px; }
.pe-locked { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px; border-radius: var(--radius-md); background: var(--mat); color: var(--ink-muted); font-size: .88rem; }
.pe-stack { display: flex; flex-direction: column; gap: 14px; }
.pe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pe-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.pe-field > span { font-size: .82rem; color: var(--ink-muted); font-weight: 600; }
.pe-field input, .pe-field select, .pe-field textarea, .pe-affix { width: 100%; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: min(var(--pf-r), 14px); background: var(--surface); color: var(--ink); font-size: .92rem; }
.pe-field textarea { padding: 12px 14px; line-height: 1.6; resize: vertical; }
.pe-field input:focus, .pe-field select:focus, .pe-field textarea:focus, .pe-affix:focus-within { border-color: var(--ink); outline: 0; box-shadow: none; }
.pe-affix { display: flex; align-items: center; gap: 8px; }
.pe-affix input { border: 0 !important; padding: 0 !important; min-height: 40px; box-shadow: none !important; background: none; font-variant-numeric: tabular-nums; }
.pe-affix em { font-style: normal; color: var(--ink-muted); }
.pe-narrow { max-width: 220px; }
.pe-pays { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--mat); color: var(--ink); font-size: .9rem; }
.pe-pays b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pe-pays em { font-style: normal; color: var(--success); font-weight: 700; font-size: .8rem; }

.pe-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.pe-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: min(var(--pf-card-r), 14px); overflow: hidden; background: var(--mat); border: 1px solid var(--line); }
.pe-photo.is-main { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.pe-photo img { width: 100%; height: 100%; object-fit: cover; }
.pe-photo-main { position: absolute; top: 8px; inset-inline-start: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: var(--accent-color); color: var(--accent-ink); font-size: .72rem; font-weight: 700; }
.pe-photo-star, .pe-photo-del { position: absolute; top: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-xs); }
.pe-photo-star { inset-inline-start: 8px; }
.pe-photo-del { inset-inline-end: 8px; }
.pe-photo-del:hover { color: var(--danger); }
.pe-photo-star:hover { color: var(--accent-color); }
.pe-drop { aspect-ratio: 4 / 5; border-radius: min(var(--pf-card-r), 14px); border: 2px dashed var(--line-strong); background: none; color: var(--ink-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; text-align: center; font-size: .8rem; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.pe-drop i { font-size: 1.5rem; color: var(--accent-color); }
.pe-drop:hover, .pe-drop.is-over { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 7%, transparent); }

.pe-toggle-label, .pe-switch-row { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: .86rem; margin: 0; cursor: pointer; }
.pe-switch-row { justify-content: space-between; color: var(--ink); font-size: .92rem; }
.pe-opt { padding: 14px 0; border-top: 1px solid var(--line); }
.pe-opt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pe-opt-name { border: 0; border-bottom: 1.5px dashed transparent; background: none; color: var(--ink); font-weight: 700; font-size: .95rem; padding: 4px 0; min-width: 0; flex: 1; outline: 0; }
.pe-opt-name:hover, .pe-opt-name:focus { border-bottom-color: var(--line-strong); }
.pe-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: .86rem; cursor: pointer; }
.pe-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.pe-chip em { font-style: normal; color: var(--accent-color); font-weight: 700; font-size: .76rem; }
.pe-chip > i { font-size: .62rem; color: var(--ink-faint); }
.pe-chip:hover { border-color: var(--ink); }
.pe-chip-add { display: inline-flex; align-items: center; min-height: 36px; border-radius: var(--radius-pill); border: 1.5px dashed var(--line-strong); padding-inline-start: 12px; }
.pe-chip-add input { border: 0 !important; background: none !important; box-shadow: none !important; outline: 0; width: 120px; padding: 0; font-size: .86rem; color: var(--ink); }
.pe-chip-add button { border: 0; background: none; color: var(--accent-color); font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; min-height: 34px; cursor: pointer; }
.pe-chip-add button:disabled { opacity: .45; cursor: default; }
.pe-add-type { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pe-add-type input { flex: 1 1 180px; min-height: 42px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: .9rem; }

.pe-combos { display: flex; flex-direction: column; }
.pe-combo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: .9rem; }
.pe-combo.is-head { border-top: 0; padding-top: 0; color: var(--ink-muted); font-size: .78rem; font-weight: 600; }
.pe-combo.is-total { font-weight: 700; }
.pe-combo.is-total b { font-variant-numeric: tabular-nums; min-width: 120px; text-align: center; }
.pe-step { display: inline-flex; align-items: center; height: 40px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; }
.pe-step.is-zero { border-color: color-mix(in srgb, var(--danger) 55%, var(--line-strong)); }
.pe-step button { width: 40px; height: 100%; border: 0; background: none; color: var(--ink); cursor: pointer; font-size: .72rem; }
.pe-step button:hover:not(:disabled) { background: var(--mat); }
.pe-step button:disabled { color: var(--ink-faint); cursor: default; }
.pe-step input { width: 46px; height: 100%; border: 0 !important; box-shadow: none !important; background: none; text-align: center; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield; }
.pe-step.is-zero input { color: var(--danger); }
.pe-step input::-webkit-outer-spin-button, .pe-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pe-danger { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pe-link { border: 0; background: none; padding: 6px 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .88rem; color: var(--accent-color); cursor: pointer; }
.pe-link.is-danger { color: var(--danger); }
.pe-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.pe-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pe-pick button { position: relative; aspect-ratio: 4 / 5; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--mat); cursor: pointer; }
.pe-pick button.is-on { border-color: var(--accent-color); }
.pe-pick img { width: 100%; height: 100%; object-fit: cover; }
.pe-pick i { position: absolute; top: 4px; inset-inline-end: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-color); color: var(--accent-ink); font-size: .6rem; display: flex; align-items: center; justify-content: center; }

.pe-preview .pe-hint { margin: 0 0 10px; }
.pe-pcard { border-radius: var(--pf-card-r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.pe-pcard-img { position: relative; aspect-ratio: 4 / 5; background: var(--mat); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 2rem; }
.pe-pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pe-pcard-badge { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 9px; border-radius: var(--pf-badge-r, 99px); background: var(--accent-color); color: var(--accent-ink); font-size: .74rem; font-weight: 700; }
.pe-pcard-out { position: absolute; top: 10px; inset-inline-end: 10px; padding: 3px 9px; border-radius: var(--pf-badge-r, 99px); background: var(--surface); color: var(--ink); font-size: .72rem; font-weight: 700; }
.pe-pcard-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.pe-pcard-body small { color: var(--ink-muted); font-size: .72rem; text-transform: var(--pf-case); letter-spacing: var(--pf-track); }
.pe-pcard-body b { color: var(--ink); font-family: var(--pf-display); font-weight: var(--pf-t-w); font-size: 1rem; overflow-wrap: anywhere; }

.pe-bar { position: sticky; bottom: 14px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.pe-bar-state { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--success); }
.pe-bar.is-dirty .pe-bar-state { color: var(--gold-ink); }
.pe-bar-state .fa-circle { font-size: .5rem; }

@media (max-width: 991.98px) {
  .pl, .pe { padding-top: 16px; gap: 12px; }
  .pl-card, .pe-card { padding: 14px; }
  .pl-head { display: none; }
  .pl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prod vis" "price stock" "opts act"; row-gap: 8px; padding: 14px 4px; }
  .pl-prod { grid-area: prod; } .pl-c-vis { grid-area: vis; justify-self: end; } .pl-c-price { grid-area: price; }
  .pl-c-stock { grid-area: stock; justify-self: end; } .pl-c-opts { grid-area: opts; } .pl-c-act { grid-area: act; }
  .pl-c-act .pe-btn span { display: none; }
  .pl-c-act .pe-btn { width: 36px; padding: 0; }
  .pe-layout { grid-template-columns: minmax(0, 1fr); }
  .pe-side { position: static; order: 2; }
  .pe-bar { bottom: calc(var(--mobile-dock-clearance) + 10px); }
}
@media (max-width: 575.98px) {
  .pe-grid { grid-template-columns: minmax(0, 1fr); }
  .pe-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pl-tools select { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pe-card { animation: db-rise .45s var(--ease) both; }
  .pe-main > :nth-child(2) { animation-delay: 50ms; } .pe-main > :nth-child(3) { animation-delay: 100ms; }
  .pe-main > :nth-child(4) { animation-delay: 150ms; } .pe-main > :nth-child(5) { animation-delay: 200ms; }
  .pe-main > :nth-child(6) { animation-delay: 250ms; }
  .pe-bar { transition: box-shadow .25s var(--ease); }
  .pe-bar.is-dirty { box-shadow: var(--shadow-lg); }
}

/* ---- Products, second pass: stats, selection and bulk actions, quick stock,
   grid view; editor section menu, gallery, stock grid, page preview. ---- */
.pl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pl-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pf-card-r); text-align: start; color: var(--ink); font: inherit; }
.pl-stat > span { display: flex; align-items: center; gap: 7px; color: var(--ink-muted); font-size: .82rem; }
.pl-stat > span i { color: var(--accent-color); }
.pl-stat b { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pl-stat small { color: var(--ink-muted); font-size: .76rem; }
button.pl-stat { cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease); }
button.pl-stat:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.pl-stat.is-alert > span i { color: var(--gold); }

.pl-head, .pl-row { grid-template-columns: 28px minmax(0, 2.5fr) minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .8fr) 60px 84px; }
.pl-row.is-selected { background: color-mix(in srgb, var(--accent-color) 7%, transparent); }
.pl-check { width: 22px; height: 22px; padding: 0; border-radius: min(var(--pf-r), 6px); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: .66rem; transition: background .15s var(--ease), border-color .15s var(--ease); }
.pl-check.is-on { background: var(--accent-color); border-color: var(--accent-color); }
.pl-check:focus-visible, .pl-stock.is-editable:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.pl-c-sold { color: var(--ink-muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.pl-nophoto { width: 44px; height: 52px; border-radius: var(--radius-sm); border: 1.5px dashed var(--gold); color: var(--gold-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pl-warn { color: var(--gold-ink); font-weight: 700; }
.pl-stock.is-off { background: var(--mat); color: var(--ink-muted); }
.pl-stock.is-editable { border: 0; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 700; }
.pl-stock-pen { opacity: .55; font-size: .6rem !important; }
.pl-stock.is-editable:hover .pl-stock-pen { opacity: 1; }
.pl-layout { display: inline-flex; padding: 3px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); }
.pl-layout button { width: 36px; height: 34px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-muted); cursor: pointer; }
.pl-layout button[aria-pressed="true"] { background: var(--mat); color: var(--ink); }

.pl-pop-wrap, .pl-bulk-wrap { position: relative; display: inline-flex; }
.pl-pop { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 40; min-width: 230px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); color: var(--ink); display: flex; flex-direction: column; gap: 10px; font-size: .86rem; animation: db-rise .18s var(--ease) both; }
.pl-pop.is-up { top: auto; bottom: calc(100% + 10px); }
.pl-pop p { margin: 0; color: var(--ink-muted); font-size: .82rem; line-height: 1.5; }
.pl-pop-row { display: flex; align-items: center; gap: 8px; }
.pl-pop .pe-affix { width: 96px; min-height: 36px; }
.pl-pop select { min-height: 36px; padding: 0 10px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); }
.pl-row:has(.pl-pop), .pl-tile:has(.pl-pop), .pl-tile:has(.pl-menu-list) { position: relative; z-index: 10; }
.pl-menu-note { margin: 0; padding: 8px 10px; max-width: 240px; color: var(--ink-muted); font-size: .8rem; line-height: 1.5; }

.pl-bulk { position: sticky; bottom: 14px; z-index: 25; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--page); box-shadow: var(--shadow-lg); animation: db-rise .25s var(--ease) both; }
.pl-bulk b { padding: 0 10px; font-size: .86rem; }
.pl-bulk button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--page) 25%, transparent); background: none; color: inherit; font-size: .84rem; cursor: pointer; }
.pl-bulk button:hover { background: color-mix(in srgb, var(--page) 12%, transparent); }
.pl-bulk .pl-bulk-clear { margin-inline-start: auto; border: 0; opacity: .8; }
.pl-bulk .pl-pop { color: var(--ink); }
.pl-bulk .pl-pop button { border-color: transparent; }

.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.pl-tile { border: 1px solid var(--line); border-radius: var(--pf-card-r); background: var(--surface); cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.pl-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.pl-tile.is-selected { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color); }
.pl-tile.is-hidden .pl-tile-img img { opacity: .5; }
.pl-tile-img { position: relative; aspect-ratio: 4 / 5; background: var(--mat); border-radius: var(--pf-card-r) var(--pf-card-r) 0 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 2rem; }
.pl-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.pl-tile-check { position: absolute; top: 10px; inset-inline-start: 10px; }
.pl-tile-vis { position: absolute; top: 10px; inset-inline-end: 10px; }
.pl-tile-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.pl-tile-body > a { color: var(--ink); font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tile-body small { color: var(--ink-muted); font-size: .78rem; }
.pl-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }

/* Editor */
.pe-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pe-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pe-top-actions { display: flex; gap: 8px; }
.pe-btn-icon { width: 42px; padding: 0; }
.pe-layout { grid-template-columns: 180px minmax(0, 1fr) 290px; }
.pe-side-nav { position: sticky; top: calc(var(--desktop-nav-height) + 16px); }
.pe-nav { display: flex; flex-direction: column; gap: 2px; }
.pe-nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: min(var(--pf-r), 12px); color: var(--ink); font-size: .9rem; text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); }
.pe-nav a > i:first-child { width: 18px; color: var(--ink-muted); }
.pe-nav a:hover { background: var(--mat); color: var(--ink); }
.pe-nav a.is-on { background: color-mix(in srgb, var(--accent-color) 12%, transparent); color: var(--accent-color); font-weight: 700; }
.pe-nav a.is-on > i:first-child { color: var(--accent-color); }
.pe-nav-dot { margin-inline-start: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.pe-main .pe-card { scroll-margin-top: calc(var(--desktop-nav-height) + 16px); }
.pe-count { color: var(--ink-muted); font-size: .78rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pe-count b { color: var(--ink); }
.pe-field > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pe-field > span label { margin: 0; }
.pe-field .pe-link { padding: 0; font-size: .8rem; }
.pe-gap { margin-top: 14px; }
.pe-inline { display: flex; gap: 8px; align-items: center; }
.pe-inline input { flex: 1; min-width: 0; }

.pe-gallery { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr); gap: 12px; align-items: start; }
.pe-gallery.is-empty { grid-template-columns: minmax(0, 1fr) 140px; }
.pe-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pe-photo.is-big .pe-photo-main { top: auto; bottom: 10px; }
.pe-gallery.is-empty .pe-thumbs { grid-template-columns: minmax(0, 1fr); }

.pe-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; color: var(--ink-muted); font-size: .82rem; }
.pe-quick button, .pe-suggest button { min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: .8rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.pe-quick button[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); font-weight: 700; }
.pe-suggest { flex-basis: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-muted); font-size: .8rem; }
.pe-suggest button { border-style: dashed; }
.pe-suggest button:hover, .pe-quick button:hover { border-color: var(--ink); }

.pe-setall { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--ink-muted); font-size: .84rem; flex-wrap: wrap; }
.pe-setall input { width: 72px; min-height: 36px; padding: 0 10px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
.pe-matrix-wrap { overflow-x: auto; }
.pe-matrix { width: 100%; border-collapse: separate; border-spacing: 6px; font-size: .88rem; }
.pe-matrix th { color: var(--ink-muted); font-weight: 600; font-size: .8rem; text-align: center; white-space: nowrap; text-transform: none; letter-spacing: normal; }
/* The editor's save bar sits where the back-to-top button would. */
body:has(.pe-bar) #btn-back-to-top { display: none !important; }
.pe-matrix tbody th { text-align: start; color: var(--ink); font-weight: 700; }
.pe-matrix input { width: 100%; min-width: 64px; height: 42px; border: 1.5px solid var(--line-strong); border-radius: min(var(--pf-r), 12px); background: var(--surface); color: var(--ink); text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pe-matrix input::-webkit-outer-spin-button, .pe-matrix input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pe-matrix input:focus { border-color: var(--ink); outline: 0; }
.pe-matrix input.is-zero { border-color: color-mix(in srgb, var(--danger) 50%, var(--line-strong)); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); color: var(--danger); }
.pe-matrix-sum { text-align: center; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pe-matrix .is-total th, .pe-matrix .is-total td { padding-top: 4px; }
.pe-matrix-sum.is-grand { color: var(--ink); font-weight: 800; }
.pe-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--mat); color: var(--ink-muted); font-size: .84rem; line-height: 1.5; }

.pe-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; color: var(--ink-muted); font-size: .82rem; font-weight: 600; }
.pe-seg { display: inline-flex; background: var(--mat); border-radius: var(--radius-pill); padding: 3px; }
.pe-seg button { border: 0; background: none; padding: 5px 11px; border-radius: var(--radius-pill); font-size: .76rem; color: var(--ink-muted); cursor: pointer; }
.pe-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-xs); }
.pe-pcard-img.is-square { aspect-ratio: 1 / 1; }
.pe-pcard-body b.is-big { font-size: 1.1rem; }
.pe-pv-opt { margin-top: 8px; }
.pe-pv-opt small { display: block; margin-bottom: 5px; }
.pe-pv-opt div { display: flex; gap: 5px; flex-wrap: wrap; }
.pe-pv-opt button { min-height: 30px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: .78rem; cursor: pointer; }
.pe-pv-opt button[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }
.pe-pv-cta { margin-top: 12px; height: 40px; border-radius: var(--radius-pill); background: var(--button-color); color: var(--button-ink); display: flex; align-items: center; justify-content: center; font-size: .84rem; font-weight: 700; }
.pe-pv-cta.is-out { background: var(--mat); color: var(--ink-muted); }

.pe-bar-actions { display: flex; align-items: center; gap: 8px; }
.pe-kbd { font: inherit; font-size: .72rem; color: var(--ink-muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 7px; background: none; }

@media (max-width: 1199.98px) {
  .pe-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .pe-side-nav { grid-column: 1 / -1; position: sticky; top: calc(var(--desktop-nav-height) + 4px); z-index: 15; background: var(--page); padding: 6px 0; }
  .pe-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .pe-nav::-webkit-scrollbar { display: none; }
  .pe-nav a { flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 13px; background: var(--surface); }
  .pe-nav-dot { margin-inline-start: 2px; }
  .pe-main .pe-card { scroll-margin-top: calc(var(--desktop-nav-height) + 70px); }
}
@media (max-width: 991.98px) {
  .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pl-stat b { font-size: 1.2rem; }
  .pl-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "check prod vis" "check price stock" "check sold act"; }
  .pl-c-check { grid-area: check; align-self: start; padding-top: 14px; }
  .pl-c-sold { grid-area: sold; }
  .pl-c-opts { display: none; }
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pl-bulk { bottom: calc(var(--mobile-dock-clearance) + 10px); border-radius: var(--radius-md); }
  .pe-layout { grid-template-columns: minmax(0, 1fr); }
  .pe-side-nav { top: var(--mobile-topbar-height); }
  .pe-main .pe-card { scroll-margin-top: calc(var(--mobile-topbar-height) + 64px); }
  .pe-top-actions .pe-btn span { display: none; }
  .pe-top-actions .pe-btn { width: 42px; padding: 0; }
  .pe-kbd { display: none; }
  .pe-gallery { grid-template-columns: minmax(0, 1fr); }
  .pe-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  /* The status keeps one line; the buttons move under it when both don't fit. */
  .pe-bar { border-radius: var(--radius-md); padding: 10px 12px; flex-wrap: wrap; row-gap: 8px; }
  .pe-bar-state { font-size: .78rem; flex-shrink: 0; white-space: nowrap; }
  .pe-bar-actions { margin-inline-start: auto; }
}

/* ==========================================================================
   26. Admin manage orders (react/orders.js). Reuses the products page's
   .pl-* stats, tabs, tools, checks and bulk bar; .om-* is orders only.
   Stage colors are fixed (new steel, out gold, delivered green) and always
   come with an icon and a word.
   ========================================================================= */
.om { padding: 26px 0 64px; display: flex; flex-direction: column; gap: 14px; }
.om-i-new { color: var(--steel) !important; } .om-i-out { color: var(--gold) !important; } .om-i-done { color: var(--success) !important; }
.om-tools { margin-bottom: 0; }
.om-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.om-chips::-webkit-scrollbar { display: none; }
.om-chips button { flex: 0 0 auto; min-height: 34px; padding: 0 13px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .84rem; cursor: pointer; }
.om-chips button span { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.om-chips button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent-color) 55%, transparent); background: color-mix(in srgb, var(--accent-color) 12%, transparent); color: var(--accent-color); font-weight: 700; }

.om-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.om-status .fa-circle { font-size: .42rem; }
.om-status.is-new { background: color-mix(in srgb, var(--steel) 14%, transparent); color: var(--steel); }
.om-status.is-out { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-ink); }
.om-status.is-delivered, .om-status.is-completed { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.om-status.is-canceled { background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger); }
.om-pay { color: var(--ink-muted); font-size: .85rem; }
.om-pay.is-card { color: var(--success); }
.om-amount { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.om-thumbs { display: inline-flex; align-items: center; }
.om-thumbs img, .om-thumbs span { width: 28px; height: 32px; border-radius: 6px; object-fit: cover; border: 2px solid var(--surface); background: var(--mat); }
.om-thumbs > * + * { margin-inline-start: -9px; }
.om-thumbs span { display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; color: var(--ink-muted); font-weight: 700; }
.om-full { width: 100%; }

.om-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.om-layout.has-side { grid-template-columns: minmax(0, 1fr) 360px; }
.om-list { padding: 8px 12px; }
.om-head, .om-row-l { display: grid; grid-template-columns: 26px 78px minmax(0, 1.5fr) minmax(0, .9fr) 86px minmax(0, 1fr) minmax(0, 1.1fr) 150px; gap: 10px; align-items: center; }
.om-head { padding: 8px 6px 10px; color: var(--ink-muted); font-size: .76rem; font-weight: 600; }
.om-row-l { padding: 11px 6px; border-top: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s var(--ease); }
.om-row-l:hover { background: var(--surface-warm); }
.om-row-l.is-selected { background: color-mix(in srgb, var(--accent-color) 6%, transparent); }
.om-row-l.is-open { background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
.om-row-l:focus-visible, .om-card:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.om-c-id b, .om-c-cust b { display: block; color: var(--ink); font-size: .9rem; }
.om-c-id b { font-variant-numeric: tabular-nums; }
.om-c-id small, .om-c-cust small { display: block; color: var(--ink-muted); font-size: .74rem; text-align: start; }
.om-c-cust b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.om-c-city { color: var(--ink-muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-c-next { display: flex; justify-content: flex-end; }
.om-cards { display: none; }

.om-card { padding: 12px; border: 1px solid var(--line); border-radius: var(--pf-card-r); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.om-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.om-card.is-open { border-color: var(--accent-color); }
.om-card-top, .om-card-mid, .om-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.om-card-id { display: inline-flex; align-items: center; gap: 8px; }
.om-card-id b { color: var(--ink); font-variant-numeric: tabular-nums; }
.om-card-id small, .om-card-mid small { color: var(--ink-muted); font-size: .76rem; }
.om-card-mid > span:first-child { color: var(--ink); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.om-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.om-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--pf-card-r); background: color-mix(in srgb, var(--mat) 60%, transparent); border: 1px solid var(--line); min-width: 0; }
.om-col-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; }
.om-col-head b { color: var(--ink-muted); font-size: .84rem; font-variant-numeric: tabular-nums; }

.om-side { position: sticky; top: calc(var(--desktop-nav-height) + 16px); }
.om-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--pf-card-r); padding: 18px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - var(--desktop-nav-height) - 32px); overflow-y: auto; }
.om-panel.is-empty { align-items: center; justify-content: center; text-align: center; min-height: 260px; color: var(--ink-muted); }
.om-panel.is-empty i { font-size: 1.6rem; color: var(--ink-faint); }
.om-panel.is-empty p { margin: 0; }
.om-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.om-panel-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.om-panel-title b { font-family: var(--pf-display); font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.om-panel-head small { color: var(--ink-muted); font-size: .78rem; }
.om-canceled { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-weight: 700; }
.om-steps { list-style: none; display: flex; margin: 0; padding: 0; }
.om-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.om-steps li + li::before { content: ""; position: absolute; top: 11px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--line); }
.om-steps li.is-done::before, .om-steps li.is-current::before { background: var(--accent-color); }
.om-steps span { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: .6rem; }
.om-steps li.is-done span, .om-steps li.is-current span { background: var(--accent-color); border-color: var(--accent-color); }
.om-steps li.is-current span { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-color) 22%, transparent); }
.om-steps em { font-style: normal; font-size: .72rem; color: var(--ink-muted); line-height: 1.3; }
.om-steps li.is-done em, .om-steps li.is-current em { color: var(--ink); }
.om-steps li.is-current em { font-weight: 700; }
.om-panel .om-full { height: 44px; font-size: .9rem; }
.om-block { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: .9rem; }
.om-block h3 { font-family: var(--pf-ui); font-size: .78rem; font-weight: 600; color: var(--ink-muted); margin: 0 0 4px; }
.om-phone { color: var(--ink-muted); font-variant-numeric: tabular-nums; text-align: start; }
.om-addr { display: flex; gap: 6px; align-items: flex-start; font-size: .86rem; line-height: 1.5; }
.om-addr i { color: var(--ink-muted); margin-top: 4px; }
.om-contact { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.om-wa { color: #1f9d55; }
.om-wa:hover { color: #1f9d55; border-color: #1f9d55; }
.om-item { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.om-item img { width: 40px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; background: var(--mat); flex-shrink: 0; }
.om-item div { flex: 1; min-width: 0; }
.om-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-item small { display: block; color: var(--ink-muted); font-size: .76rem; }
.om-item b { font-variant-numeric: tabular-nums; font-size: .88rem; }
.om-row { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-muted); font-size: .84rem; padding: 2px 0; }
.om-row span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.om-row .is-save { color: var(--success) !important; }
.om-row.is-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-size: 1rem; font-weight: 800; }
.om-paybox { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-md); font-size: .88rem; }
.om-paybox.is-card, .om-paybox.is-done { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.om-paybox.is-cash { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold-ink); }
.om-paybox > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.om-paybox small { font-size: .76rem; font-weight: 600; opacity: .8; }
.om-paybox.is-refunded, .om-paybox.is-refund_pending { background: color-mix(in srgb, var(--steel) 13%, transparent); color: var(--steel); }
.om-paybox.is-refund_failed { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.om-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }

.om-sheet { position: fixed; inset: 0; z-index: 1150; background: rgba(10, 10, 10, .45); display: flex; align-items: flex-end; justify-content: center; animation: cop-fade-in .2s ease; }
.om-panel.is-sheet { width: 100%; max-width: 560px; max-height: 92vh; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); animation: cop-sheet-in .32s cubic-bezier(.22, 1, .36, 1); }

@media (max-width: 991.98px) {
  .om { padding-top: 16px; gap: 12px; }
  .om-head, .om-row-l { display: none; }
  .om-list { padding: 0; background: none; border: 0; }
  .om-cards { display: flex; flex-direction: column; gap: 10px; }
  .om-board { grid-template-columns: minmax(0, 1fr); }
  .om-card-foot .pe-btn { flex: 0 1 220px; }
}

/* ==========================================================================
   27. Settings (settings.html). Same shell as the product editor (.pe-*):
   section menu, cards, save bar. The design block keeps its own styles in
   the template.
   ========================================================================== */
.st-sub { margin: 4px 0 0; color: var(--ink-muted); font-size: .9rem; }
.st-layout { grid-template-columns: 190px minmax(0, 1fr); }
.st .pe-bar { grid-column: 1 / -1; }
.st-mt0 { margin-top: 0 !important; }
.st-sub-h { font-family: var(--pf-ui); font-size: .92rem; font-weight: 700; color: var(--ink); margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.st-store { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.st-logo { display: flex; flex-direction: column; gap: 10px; }
.st-logo-box { aspect-ratio: 1 / 1; border-radius: var(--pf-card-r); border: 2px dashed var(--line-strong); background: var(--mat); display: flex; align-items: center; justify-content: center; padding: 18px; cursor: pointer; margin: 0; transition: border-color .2s var(--ease); }
.st-logo-box:hover { border-color: var(--accent-color); }
.st-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-ico { color: var(--ink-muted); width: 16px; text-align: center; }
.pe-field small.pe-hint { font-weight: 400; }

.st-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); margin: 0; cursor: pointer; }
.pe-card-head + .st-row, .st-list .st-row:first-child, .st-two .st-row:nth-child(2) { border-top: 0; }
.st-row.is-compact { padding: 10px 0; }
.st-row-ico, .st-sym { width: 40px; height: 40px; border-radius: min(var(--pf-r), 12px); background: var(--mat); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; }
.st-sym { width: auto; min-width: 40px; padding: 0 8px; font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }
.st-row:has(.st-switch:checked) .st-row-ico { background: color-mix(in srgb, var(--accent-color) 13%, transparent); color: var(--accent-color); }
.st-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-row-text b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink); font-size: .92rem; }
.st-row-text small { color: var(--ink-muted); font-size: .8rem; text-align: start; }
.st-badge { font-style: normal; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: .7rem; font-weight: 700; }
.st-badge.is-ok { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.st-badge.is-warn { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-ink); }
/* Card gateway picker under the card switch: one option per gateway. */
.st-gw { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 4px 0 14px; }
.st-gw-label { grid-column: 1 / -1; margin: 0; font-size: .8rem; font-weight: 700; color: var(--ink-muted); }
.st-gw-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.st-gw-opt:hover { border-color: var(--line-strong); }
.st-gw-opt:has(input:checked) { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 7%, var(--surface)); }
.st-gw-opt:has(input:disabled) { opacity: .55; cursor: default; }
.st-gw-opt input { accent-color: var(--accent-color); width: 18px; height: 18px; flex: none; margin: 0; }
.st-gw-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-gw-text b { font-size: .92rem; color: var(--ink); }
.st-gw-text small { font-size: .76rem; color: var(--ink-muted); }
.st-badge.is-off { background: var(--mat); color: var(--ink-muted); }
.st-badge.is-acc { background: color-mix(in srgb, var(--accent-color) 13%, transparent); color: var(--accent-color); }
.st-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.st-rates { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.st-rates .pe-hint { display: inline-flex; align-items: center; gap: 6px; }
.st-note-row { margin-top: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.st-note-row span { display: inline-flex; gap: 8px; align-items: center; }

/* A checkbox drawn as a switch: still a real checkbox, so the form posts
   exactly as before. */
.st-switch { appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 99px; background: var(--line-strong); cursor: pointer; flex-shrink: 0; transition: background .2s var(--ease); }
.st-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: inset-inline-start .2s var(--ease); }
.st-switch:checked { background: var(--success); }
.st-switch:checked::after { inset-inline-start: 21px; }
.st-switch:disabled { opacity: .5; cursor: not-allowed; }
.st-switch:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

.st-print { position: relative; display: block; margin: 0; border-radius: min(var(--pf-card-r), 14px); overflow: hidden; border: 1px solid var(--line); background: var(--mat); cursor: pointer; }
.st-print img { display: block; width: 100%; height: 90px; object-fit: cover; }
.st-print-btn { position: absolute; bottom: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: .78rem; font-weight: 700; box-shadow: var(--shadow-sm); }

/* The design block's old card styling, inside the new card. */
.st #design .hint { color: var(--ink-muted); font-size: .82rem; margin: 0 0 8px; }
.st .sp-preset[aria-pressed="true"] { border-color: var(--accent-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent); }
.st .sp-preset-check { background: var(--accent-color); color: var(--accent-ink); }

@media (max-width: 1199.98px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .st-store { grid-template-columns: minmax(0, 1fr); }
  .st-logo { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .st-logo-box { width: 96px; padding: 10px; }
  .st-logo .pe-hint { flex-basis: 100%; }
  .st-two { grid-template-columns: minmax(0, 1fr); }
  .st-two .st-row:nth-child(2) { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   28. Reports (react/reports.js). Shares the editor shell (.pe-*), stats
   (.pl-stat) and dashboard table/bars; .rp2-* is reports only.
   ========================================================================== */
.rp2-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px; }
.rp2-ranges { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.rp2-ranges button { flex: 0 0 auto; }
.rp2-period { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.rp2-dates { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.rp2-dates label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-muted); font-size: .82rem; }
.rp2-dates input { min-height: 38px; padding: 0 10px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); }
.rp2-grow { flex: 1; }
.rp2-filters select { min-height: 40px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: .84rem; max-width: 100%; }
.rp2-search { flex: 0 1 200px; height: 40px; }
.rp2 .pl-stat small.rp2-up { color: var(--success); font-weight: 700; }
.rp2 .pl-stat small.rp2-down { color: var(--danger); font-weight: 700; }

.rp2-chart svg { width: 100%; height: 150px; display: block; }
.rp2-bar { fill: var(--accent-color); opacity: .8; transition: opacity .15s var(--ease); }
.rp2-bar:hover { opacity: 1; }
.rp2-hbars { display: flex; flex-direction: column; gap: 8px; }
.rp2-hbar { display: grid; grid-template-columns: minmax(80px, 180px) minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: .86rem; color: var(--ink); }
.rp2-hbar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp2-hbar .db-bar { margin: 0; height: 12px; }
.rp2-hbar b { text-align: end; font-variant-numeric: tabular-nums; }

.rp2-table th { padding: 0; }
.rp2-table th button { display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 0 8px 10px; border: 0; background: none; color: var(--ink-muted); font: inherit; font-weight: 600; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.rp2-table th.is-num button { justify-content: flex-end; }
.rp2-table th[aria-sort="ascending"] button, .rp2-table th[aria-sort="descending"] button { color: var(--accent-color); }
.rp2-table th button i { font-size: .66rem; }
.rp2-table td { white-space: nowrap; }
.rp2-table .is-num { text-align: end; }
.rp2-table td.is-out { color: var(--danger); font-weight: 700; }
.rp2-table td.is-mut { color: var(--ink-faint); }
.rp2-table tfoot td { border-top: 2px solid var(--ink); font-weight: 800; padding-top: 12px; }
.rp2-more { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; color: var(--ink-muted); font-size: .82rem; }

@media (max-width: 767.98px) {
  .rp2-search { flex: 1 1 100%; }
  .rp2-filters select { flex: 1 1 140px; }
  .rp2-table, .rp2-table tbody, .rp2-table tfoot, .rp2-table tr { display: block; }
  .rp2-table thead { display: none; }
  .rp2-table tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .rp2-table tbody tr:first-child { border-top: 0; }
  .rp2-table td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; white-space: normal; text-align: end; }
  .rp2-table td::before { content: attr(data-label); color: var(--ink-muted); font-size: .78rem; text-align: start; }
  .rp2-table td:first-child { font-weight: 800; }
  .rp2-table tfoot tr { border-top: 2px solid var(--ink); margin-top: 6px; }
  .rp2-table tfoot td { border: 0; padding: 3px 0; }
  .rp2-table tfoot td.is-blank { display: none; }
  .rp2-table-card .db-table-wrap { overflow: visible; }
  .rp2-hbar { grid-template-columns: 90px minmax(0, 1fr) 40px; }
}

/* ==========================================================================
   29. Small admin pages (react/manage.js): banners, discount codes,
   categories & delivery areas, users. Shares .pe-* / .pl-* / .st-* pieces.
   ========================================================================== */
.mg-wide { flex: 1; }
.mg-mono { font-family: ui-monospace, 'Courier New', monospace; letter-spacing: .06em; }

/* Side panel (desktop) / bottom sheet (phone) */
.mg-sheet { position: fixed; inset: 0; z-index: 1150; background: rgba(10, 10, 10, .45); display: flex; justify-content: flex-end; animation: cop-fade-in .2s ease; }
.mg-sheet-panel { width: min(460px, 100%); height: 100%; background: var(--surface); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: mg-slide .28s var(--ease); }
[dir="rtl"] .mg-sheet-panel { animation-name: mg-slide-rtl; }
@keyframes mg-slide { from { transform: translateX(100%); } }
@keyframes mg-slide-rtl { from { transform: translateX(-100%); } }
.mg-sheet[dir="rtl"] { justify-content: flex-start; }
.mg-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.mg-sheet-head h2 { font-family: var(--pf-ui); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.mg-sheet-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.mg-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
@media (max-width: 767.98px) {
  .mg-sheet, .mg-sheet[dir="rtl"] { align-items: flex-end; justify-content: center; }
  .mg-sheet-panel { width: 100%; height: auto; max-height: 92vh; border-radius: 22px 22px 0 0; animation: cop-sheet-in .3s var(--ease); }
}
.mg-drop { position: relative; width: 100%; aspect-ratio: 12 / 5; border-radius: min(var(--pf-card-r), 14px); border: 2px dashed var(--line-strong); background: var(--mat); color: var(--ink-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; overflow: hidden; cursor: pointer; font-size: .86rem; }
.mg-drop.is-square { aspect-ratio: 4 / 3; }
.mg-drop > i { font-size: 1.6rem; color: var(--accent-color); }
.mg-drop small { font-size: .76rem; color: var(--ink-faint); }
.mg-drop.has-image { border-style: solid; }
.mg-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-drop:hover { border-color: var(--accent-color); }

/* Banners */
.mg-banners { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.mg-col { display: flex; flex-direction: column; gap: 10px; }
.mg-banner { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: grab; transition: box-shadow .2s var(--ease), opacity .2s var(--ease); }
.mg-banner.is-off img, .mg-banner.is-off .mg-banner-text { opacity: .55; }
.mg-banner.is-drag { opacity: .4; }
.mg-banner:has(.pl-menu-list) { position: relative; z-index: 10; }
.mg-grip { color: var(--ink-faint); }
.mg-pos { font-weight: 800; color: var(--ink-muted); width: 16px; font-variant-numeric: tabular-nums; }
.mg-banner img { width: 150px; aspect-ratio: 12 / 5; object-fit: cover; border-radius: min(var(--pf-r), 10px); background: var(--mat); flex-shrink: 0; }
.mg-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-banner-text b { color: var(--ink); font-size: .92rem; }
.mg-banner-text small { color: var(--ink-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-banner-text em { font-style: normal; color: var(--accent-color); font-size: .78rem; display: inline-flex; gap: 5px; align-items: center; }
.mg-banner-vis { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mg-banner-vis small { font-size: .7rem; color: var(--ink-muted); }
.mg-banner-preview { position: sticky; top: calc(var(--desktop-nav-height) + 16px); }
.mg-hero { position: relative; aspect-ratio: 12 / 5; border-radius: var(--pf-card-r); overflow: hidden; color: #fff; }
.mg-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-hero > div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 14px; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 70%); }
.mg-hero b { font-family: var(--pf-display); font-size: 1.15rem; }
.mg-hero span { font-size: .78rem; opacity: .9; }
.mg-hero em { font-style: normal; align-self: flex-start; margin-top: 6px; background: #fff; color: #111; border-radius: 99px; padding: 4px 12px; font-size: .72rem; font-weight: 700; }

/* Discount codes */
.mg-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mg-code { display: flex; padding: 0; overflow: hidden; }
.mg-code:has(.pl-menu-list) { position: relative; z-index: 10; overflow: visible; }
.mg-code.is-ended, .mg-code.is-paused { opacity: .7; }
.mg-code-value { width: 110px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; background: color-mix(in srgb, var(--accent-color) 10%, transparent); border-inline-end: 2px dashed var(--line-strong); }
.mg-code-value b { color: var(--accent-color); font-size: 1.45rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mg-code.is-ended .mg-code-value, .mg-code.is-paused .mg-code-value { background: var(--mat); }
.mg-code.is-ended .mg-code-value b, .mg-code.is-paused .mg-code-value b { color: var(--ink-muted); }
.mg-code-body { flex: 1; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.mg-code-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-code-top b { font-size: 1rem; color: var(--ink); }
.mg-code-body small { display: flex; align-items: center; gap: 7px; color: var(--ink-muted); font-size: .8rem; }
.mg-code-body small i { width: 14px; text-align: center; }
.mg-code-body .db-bar { margin: 2px 0; }
.mg-code-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.st-badge.is-new { background: color-mix(in srgb, var(--steel) 14%, transparent); color: var(--steel); }
.st-badge.is-owner { background: var(--ink); color: var(--page); }
.mg-seg { display: flex; }
.mg-seg button { flex: 1; }
.mg-code-row { align-items: flex-end; }
.mg-code-row .pe-field { flex: 1; }
.mg-summary { padding: 12px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-color) 9%, transparent); color: var(--ink); font-size: .88rem; line-height: 1.6; }
.mg-summary b { display: block; color: var(--accent-color); font-size: .76rem; margin-bottom: 2px; }

/* Categories & delivery */
.mg-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.mg-cat { padding: 0; overflow: hidden; text-align: start; cursor: pointer; display: flex; flex-direction: column; font: inherit; color: inherit; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.mg-cat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.mg-cat.is-sub { border-style: dashed; }
.mg-cat-img { position: relative; aspect-ratio: 4 / 3; background: var(--mat); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 1.8rem; }
.mg-cat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-cat-edit { position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: .72rem; box-shadow: var(--shadow-xs); }
.mg-cat-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.mg-cat-body b { color: var(--ink); font-size: .92rem; }
.mg-cat-body small { color: var(--ink-muted); font-size: .76rem; display: flex; gap: 6px; align-items: center; }
.mg-area { display: flex; flex-direction: column; }
.mg-area-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-area-head h2 { flex: 1; display: flex; gap: 8px; align-items: center; font-family: var(--pf-ui); font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; }
.mg-area-head h2 i { color: var(--accent-color); }
.mg-area-head .pe-opt-name { flex: 1; }
.mg-area:has(.pl-menu-list) { position: relative; z-index: 10; }
.mg-fee { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-muted); font-size: .82rem; }
.mg-fee .pe-affix { width: 120px; min-height: 40px; }
.mg-fee .pe-affix input { min-width: 0; width: 100%; }
@media (max-width: 576px) {
  /* Phones: name and menu on top, the fee on its own row below. */
  .mg-area-head .mg-fee { order: 1; flex-basis: 100%; justify-content: space-between; }
  .mg-fee .pe-affix { width: 150px; }
}
.mg-area .pe-chip { cursor: default; }
.mg-chip-x { border: 0; background: none; color: var(--ink-faint); padding: 0 2px; cursor: pointer; font-size: .7rem; }
.mg-chip-x:hover { color: var(--danger); }

/* Users */
.mg-avatar { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--accent-color) 14%, transparent); color: var(--accent-color); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; text-transform: uppercase; }
.mg-user-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mg-user-head b { display: block; color: var(--ink); font-size: .9rem; }
.mg-user-head small { display: block; color: var(--ink-muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.mg-users td { vertical-align: middle; }
.mg-users .is-num { text-align: end; }
.mg-users tr.is-blocked td { opacity: .6; }
.mg-users tr:has(.pl-menu-list) { position: relative; z-index: 10; }
.mg-user-act { text-align: end; width: 1%; }

@media (max-width: 991.98px) {
  .mg-banners { grid-template-columns: minmax(0, 1fr); }
  .mg-banner-preview { position: static; order: -1; }
  .mg-codes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .mg-banner { flex-wrap: wrap; }
  .mg-banner img { width: 110px; }
  .mg-pos { display: none; }
  .mg-code-value { width: 88px; }
  .mg-code-value b { font-size: 1.15rem; }
  .mg-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-users, .mg-users tbody, .mg-users tr { display: block; }
  .mg-users thead { display: none; }
  .mg-users tr { position: relative; padding: 12px 0; border-top: 1px solid var(--line); }
  .mg-users tbody tr:first-child { border-top: 0; }
  .mg-users td { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; border: 0; }
  .mg-users td[data-label]:not([data-label=""])::before { content: attr(data-label); color: var(--ink-muted); font-size: .78rem; }
  .mg-users td.mg-user-act { position: absolute; top: 12px; inset-inline-end: 0; width: auto; padding: 0; }
}

/* ==========================================================================
   30. Motion: store and admin animations (driven by index.js, orders.js,
   products.js and settings.html; all off with reduced motion)
   ========================================================================== */
/* Product cards rise in as they scroll into view. Fill "backwards" only,
   so the hover lift still works once the card has landed. */
.rise:not(.is-risen) { opacity: 0; }
.rise.is-risen { animation: mo-rise .5s var(--ease) backwards; }
@keyframes mo-rise { from { opacity: 0; transform: translateY(18px); } }

/* Photos fade in sharp once loaded. */
.img-fade { opacity: 0; filter: blur(12px); }
.img-fade.is-loaded { opacity: 1; filter: none; transition: opacity .5s ease, filter .6s ease, transform .6s var(--ease); }

/* Second photo on hover (computers only; phones keep the first photo). */
.item-media .item-image.item-image-alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease), transform .6s var(--ease); }
.item-card.is-sold-out .item-image-alt { display: none; }
@media (hover: hover) {
  .item-card:hover .item-image.item-image-alt { opacity: 1; }
}

/* The photo that flies into the bag, and the heart burst. */
.fly-to-cart { position: fixed; z-index: 9999; pointer-events: none; border-radius: 14px; background: var(--mat) center / cover no-repeat; box-shadow: var(--shadow-md); }
.heart-burst { position: fixed; z-index: 9999; width: 0; height: 0; pointer-events: none; }
.heart-burst span { position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; }

/* Quantities slide up or down. */
[data-roll] { display: inline-block; }

/* Order placed: the check draws itself. */
.rp-draw { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.rp-draw circle { stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 145; animation: mo-draw .55s .15s var(--ease) forwards; }
.rp-draw path { stroke-width: 4; stroke-dasharray: 32; stroke-dashoffset: 32; animation: mo-draw .35s .6s ease-out forwards; }
@keyframes mo-draw { to { stroke-dashoffset: 0; } }

/* Manage orders: a moved order slides away, then its new status pops. */
.om { --om-out: 40px; }
.om[dir="rtl"] { --om-out: -40px; }
.om-row-l.is-leaving, .om-card.is-leaving { overflow: hidden; pointer-events: none; animation: mo-leave .34s var(--ease) forwards; }
@keyframes mo-leave {
  0% { max-height: 200px; }
  55% { opacity: 0; transform: translateX(var(--om-out)); }
  100% { opacity: 0; transform: translateX(var(--om-out)); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-width: 0; }
}
.om-row-l.is-arrived, .om-card.is-arrived { animation: mo-glow 1.6s ease-out; }
@keyframes mo-glow { from { background-color: color-mix(in srgb, var(--accent-color) 14%, transparent); } }
.is-arrived .om-status { animation: mo-pop .5s var(--ease); }
@keyframes mo-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } }

/* Save buttons turn into "Saved" for a moment. */
.pe-btn.is-saved, .pe-btn.is-saved:disabled { background: var(--success); color: #fff; opacity: 1; }
.pe-btn.is-saved i { animation: mo-pop .4s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .rp-draw circle, .rp-draw path { animation: none; stroke-dashoffset: 0; }
  .pe-btn.is-saved i, .is-arrived .om-status, .om-row-l.is-arrived, .om-card.is-arrived { animation: none; }
  .item-media .item-image.item-image-alt { transition: none; }
}

/* ==========================================================================
   31. Page entrances and loading skeletons, like the dashboard: each block
   of a page rises in a moment after the one before, and pages that load
   their data show a page-shaped skeleton first (skeletonHTML() in
   index.js). Fill "backwards" only, so nothing keeps a transform after it
   lands (a transform would trap fixed sheets and undo hover lifts).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  :where(#main-content-container, .acc-layout, .acc-main, .rp-card, .rx-cart, .rx-cart-main, .rx-co-wrap,
         .rx-item-layout, .rx-item-info, .pl, .om, .mg, .rp2) > * { animation: db-rise .5s var(--ease) backwards; }
  :where(#main-content-container, .acc-layout, .acc-main, .rp-card, .rx-cart, .rx-cart-main, .rx-co-wrap,
         .rx-item-layout, .rx-item-info, .pl, .om, .mg, .rp2) > :where(:nth-child(2)) { animation-delay: 60ms; }
  :where(#main-content-container, .acc-layout, .acc-main, .rp-card, .rx-cart, .rx-cart-main, .rx-co-wrap,
         .rx-item-layout, .rx-item-info, .pl, .om, .mg, .rp2) > :where(:nth-child(3)) { animation-delay: 120ms; }
  :where(#main-content-container, .acc-layout, .acc-main, .rp-card, .rx-cart, .rx-cart-main, .rx-co-wrap,
         .rx-item-layout, .rx-item-info, .pl, .om, .mg, .rp2) > :where(:nth-child(4)) { animation-delay: 180ms; }
  :where(#main-content-container, .acc-layout, .acc-main, .rp-card, .rx-cart, .rx-cart-main, .rx-co-wrap,
         .rx-item-layout, .rx-item-info, .pl, .om, .mg, .rp2) > :where(:nth-child(5)) { animation-delay: 240ms; }
  :where(#main-content-container, .acc-layout, .acc-main, .rp-card, .rx-cart, .rx-cart-main, .rx-co-wrap,
         .rx-item-layout, .rx-item-info, .pl, .om, .mg, .rp2) > :where(:nth-child(6)) { animation-delay: 300ms; }
  :where(#main-content-container, .acc-layout, .acc-main, .rp-card, .rx-cart, .rx-cart-main, .rx-co-wrap,
         .rx-item-layout, .rx-item-info, .pl, .om, .mg, .rp2) > :where(:nth-child(n+7)) { animation-delay: 360ms; }
  .rx-summary { animation: db-rise .5s var(--ease) 120ms backwards; }

  /* Rows and cards in lists follow each other a little faster. */
  :where(.pl-list, .pl-grid, .om-list, .om-cards, .om-col, .mg-cats, .mg-codes, .mg-col, .rx-panel) > * { animation: db-rise .45s var(--ease) backwards; }
  :where(.pl-list, .pl-grid, .om-list, .om-cards, .om-col, .mg-cats, .mg-codes, .mg-col, .rx-panel) > :where(:nth-child(2)) { animation-delay: 40ms; }
  :where(.pl-list, .pl-grid, .om-list, .om-cards, .om-col, .mg-cats, .mg-codes, .mg-col, .rx-panel) > :where(:nth-child(3)) { animation-delay: 80ms; }
  :where(.pl-list, .pl-grid, .om-list, .om-cards, .om-col, .mg-cats, .mg-codes, .mg-col, .rx-panel) > :where(:nth-child(4)) { animation-delay: 120ms; }
  :where(.pl-list, .pl-grid, .om-list, .om-cards, .om-col, .mg-cats, .mg-codes, .mg-col, .rx-panel) > :where(:nth-child(5)) { animation-delay: 160ms; }
  :where(.pl-list, .pl-grid, .om-list, .om-cards, .om-col, .mg-cats, .mg-codes, .mg-col, .rx-panel) > :where(:nth-child(6)) { animation-delay: 200ms; }
  :where(.pl-list, .pl-grid, .om-list, .om-cards, .om-col, .mg-cats, .mg-codes, .mg-col, .rx-panel) > :where(:nth-child(7)) { animation-delay: 240ms; }
  :where(.pl-list, .pl-grid, .om-list, .om-cards, .om-col, .mg-cats, .mg-codes, .mg-col, .rx-panel) > :where(:nth-child(8)) { animation-delay: 280ms; }
  :where(.pl-list, .pl-grid, .om-list, .om-cards, .om-col, .mg-cats, .mg-codes, .mg-col, .rx-panel) > :where(:nth-child(9)) { animation-delay: 320ms; }
  :where(.pl-list, .pl-grid, .om-list, .om-cards, .om-col, .mg-cats, .mg-codes, .mg-col, .rx-panel) > :where(:nth-child(n+10)) { animation-delay: 360ms; }

  /* Product photos shimmer until they've loaded. */
  .item-media:has(> .img-fade:not(.is-loaded)), .rx-gallery-slide:has(> .img-fade:not(.is-loaded)) {
    background: linear-gradient(90deg, var(--mat) 25%, var(--surface-warm) 37%, var(--mat) 63%) 0 0 / 400% 100%;
    animation: db-shimmer 1.4s ease infinite;
  }
}

/* Skeleton pieces. */
/* Tinted from the text colour so it reads on any page ground, light or dark. */
.sk { --sk-a: color-mix(in srgb, var(--ink) 7%, transparent); --sk-b: color-mix(in srgb, var(--ink) 13%, transparent);
  display: block; border-radius: 10px; background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 37%, var(--sk-a) 63%); background-size: 400% 100%; animation: db-shimmer 1.4s ease infinite; }
.sk-page { display: flex; flex-direction: column; gap: 16px; }
.sk-title { height: 34px; width: min(260px, 60%); }
.sk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sk-tiles .sk { height: 88px; border-radius: var(--pf-card-r); }
.sk-bar { height: 46px; }
.sk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--pf-card-r); padding: 4px 18px; }
.sk-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; }
.sk-row + .sk-row { border-top: 1px solid var(--line); }
.sk-thumb { width: 44px; height: 44px; flex: none; }
.sk-lines .sk-thumb { width: 72px; height: 72px; }
.sk-text { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.sk-text .sk { height: 12px; width: 60%; }
.sk-text .sk + .sk { width: 35%; }
.sk-pill { width: 76px; height: 28px; flex: none; border-radius: 999px; }
.sk-track { height: 10px; margin: 6px 0 14px; }
.sk-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.sk-col { display: flex; flex-direction: column; gap: 16px; }
.sk-block { height: 170px; border-radius: var(--pf-card-r); }
.sk-block.is-tall { height: 280px; }
.sk-side { height: 420px; border-radius: var(--pf-card-r); }
@media (max-width: 900px) {
  .sk-split { grid-template-columns: minmax(0, 1fr); }
  .sk-side { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ==========================================================================
   32. Order notifications: the dashboard's "Order alerts on this phone" and
   the order-placed page's "Tell me when my order is out" (push.py).
   ========================================================================== */
.db-push, .rp-push { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--pf-card-r); background: var(--surface); }
.db-push > i, .rp-push > i { width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 12%, transparent); }
.db-push.is-on > i, .rp-push.is-on > i { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); }
.db-push-text, .rp-push-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.db-push-text b, .rp-push-text b { font-size: .92rem; color: var(--ink); }
.db-push-text small, .rp-push-text small { font-size: .8rem; color: var(--ink-muted); line-height: 1.5; }
.db-push .db-btn, .rp-push .acc-btn { flex: none; }
.rp-push { margin: 18px 0 4px; text-align: start; }
@media (max-width: 575.98px) {
  .db-push, .rp-push { flex-wrap: wrap; }
  .db-push .db-btn, .rp-push .acc-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   33. AI helpers: "Generate with AI" photos and "Write with AI" descriptions (react/ai.js)
   ========================================================================== */
.pe-photos-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pe-ai-btn { margin-top: 8px; align-self: flex-start; }
.pe-ai-btn i, .pe-ai .cop-modal-title i { color: var(--accent-color); }
.pe-ai { max-width: 560px; }
.pe-ai-body { display: flex; flex-direction: column; gap: 10px; }
.pe-ai-label { font-size: .82rem; color: var(--ink-muted); font-weight: 600; }
.pe-ai .pe-pick { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.pe-ai .pe-pick .pe-ai-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 4px; font-size: .72rem; line-height: 1.3; color: var(--ink-muted); }
.pe-ai .pe-pick .pe-ai-none > i { position: static; width: auto; height: auto; background: none; color: var(--accent-color); font-size: .95rem; }
.pe-ai .pe-quick { margin-top: 0; }
.pe-ai .pe-hint { margin: 0; }
.pe-ai-err { margin: 0; color: var(--danger, #c0392b); font-size: .82rem; }
.pe-ai-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pe-ai-results > * { aspect-ratio: var(--ai-ar, 4 / 5); border-radius: 12px; overflow: hidden; }
.pe-ai-res { position: relative; border: 2px solid transparent; background: var(--mat); animation: db-rise .35s ease both; transition: border-color .15s; }
.pe-ai-res.is-on { border-color: var(--accent-color); }
.pe-ai-sel { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.pe-ai-check { position: absolute; top: 8px; inset-inline-start: 8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .35); color: transparent; display: flex; align-items: center; justify-content: center; font-size: .7rem; transition: background .15s, color .15s; }
.pe-ai-res.is-on .pe-ai-check { background: var(--accent-color); border-color: var(--accent-color); color: var(--accent-ink); }
.pe-ai-zoom { position: absolute; bottom: 8px; inset-inline-end: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .8rem; }
.pe-ai-zoom:hover, .pe-ai-zoom:focus-visible { background: rgba(0, 0, 0, .75); }
.pe-ai-sel:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -4px; }
.pe-ai-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.pe-ai-results img, .pe-ai-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-ai-big { display: flex; flex-direction: column; gap: 10px; }
.pe-ai-big img { aspect-ratio: var(--ai-ar, 4 / 5); max-height: 60vh; object-fit: contain; background: var(--mat); border-radius: 12px; }
.pe-ai .pe-dialog-foot { flex-wrap: wrap; }
.pe-ai-big .pe-dialog-foot { margin-top: 4px; }
.pe-ai-big .pe-dialog-foot .pe-btn { flex: 1 1 auto; justify-content: center; }
.pe-ai.is-banner { max-width: 680px; }
.pe-ai.is-banner .pe-ai-results { grid-template-columns: 1fr; }
.pe-ai.is-banner .pe-ai-big img { max-height: none; }
.pe-desc-tools { display: inline-flex; align-items: center; gap: 12px; }
.pe-desc-tools .pe-link i { color: var(--accent-color); margin-inline-end: 4px; }
.pe-ai-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-ai-fact { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--mat); color: var(--ink-muted); font-size: .78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-ai-fact img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.pe-ai-text { padding: 12px 14px; border-radius: 12px; background: var(--mat); color: var(--ink); font-size: .92rem; line-height: 1.8; white-space: pre-line; animation: db-rise .3s ease both; }
.pe-ai-text .skeleton { display: block; height: 12px; margin: 8px 0; border-radius: 4px; }
.pe-ai-text .skeleton:nth-child(2) { width: 85%; }
.pe-ai-text .skeleton:nth-child(3) { width: 60%; }
@media (prefers-reduced-motion: reduce) { .pe-ai-res, .pe-ai-text { animation: none; } }

/* ==========================================================================
   34. Customer chat bubble (react/chat.js): bottom corner opposite the
   back-to-top arrow; a full-screen sheet on phones. Store colors via the
   theme tokens, so each store's bubble matches its own buttons.
   ========================================================================== */
.chat-fab { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 1045; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--button-color, var(--ink)); color: var(--button-ink, #fff); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; cursor: pointer; transition: transform .2s var(--ease, ease); animation: db-pop .4s ease .6s both; }
.chat-fab:hover { transform: scale(1.06); }
.chat-fab:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; }
.chat-panel { position: fixed; bottom: 92px; inset-inline-end: 24px; z-index: 1300; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; animation: cop-pop-in .22s ease both; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.chat-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent-color) 16%, transparent); color: var(--accent-color); }
.chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.chat-title b { font-size: .95rem; }
.chat-title small { font-size: .75rem; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-wa { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25d366; color: #fff; font-size: 1.15rem; }
.chat-head-wa:hover { color: #fff; filter: brightness(1.08); }
.chat-icon-btn { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; background: transparent; color: var(--ink-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-icon-btn:hover { background: var(--mat); color: var(--ink); }
.chat-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-row { display: flex; flex-direction: column; gap: 6px; }
.chat-row.is-user { align-items: flex-end; }
.chat-row.is-bot { align-items: flex-start; }
.chat-msg { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: .9rem; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; animation: db-rise .25s ease both; }
.chat-msg.is-bot { background: var(--mat); color: var(--ink); border-start-start-radius: 4px; align-self: flex-start; }
.chat-msg.is-user { background: var(--button-color, var(--ink)); color: var(--button-ink, #fff); border-start-end-radius: 4px; }
.chat-msg.is-error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.chat-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted); animation: chat-dot 1.2s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-cards { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: thin; }
.chat-card { flex: none; width: 132px; display: flex; flex-direction: column; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: .8rem; }
.chat-card:hover { border-color: var(--accent-color); color: var(--ink); }
.chat-card-img { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--mat); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.chat-card-img img { width: 100%; height: 100%; object-fit: cover; }
.chat-card b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-card-price { font-variant-numeric: tabular-nums; }
.chat-card-price s { color: var(--ink-muted); font-size: .75rem; }
.chat-card small { color: var(--danger); }
.chat-wa-inline { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: #25d366; color: #fff; font-size: .82rem; text-decoration: none; }
.chat-wa-inline:hover { color: #fff; filter: brightness(1.08); }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chat-quick button { min-height: 34px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong, var(--line)); background: var(--surface); color: var(--ink); font-size: .82rem; cursor: pointer; }
.chat-quick button:hover { border-color: var(--accent-color); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 16px; }
.chat-form input:focus { outline: 0; border-color: var(--ink); }
.chat-send { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--button-color, var(--ink)); color: var(--button-ink, #fff); cursor: pointer; }
.chat-send:disabled { opacity: .45; cursor: default; }
.chat-note { margin: 0; padding: 2px 14px 10px; font-size: .7rem; color: var(--ink-muted); text-align: center; }
@media (max-width: 991.98px) {
  .chat-fab { bottom: 92px; width: 52px; height: 52px; }
  /* Above the product page's buy bar and the cart's checkout bar, like back-to-top. */
  body:has(.rx-mobile-buybar) .chat-fab, body:has(.rx-cart-bar) .chat-fab { bottom: calc(var(--mobile-dock-clearance, 64px) + 82px); }
}
@media (max-width: 575.98px) {
  .chat-panel { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; animation-name: cop-sheet-in; }
  body.chat-is-open .chat-fab { display: none; }
  body.chat-is-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .chat-fab, .chat-panel, .chat-msg { animation: none; } .chat-typing span { animation: none; opacity: .6; } }
/* Admin assistant (react/admin-ai.js): a pill button on admin pages, a side panel (shares the chat-* pieces above). */
.aai-fab { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 1045; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--button-color, var(--ink)); color: var(--button-ink, #fff); box-shadow: var(--shadow-lg); font-weight: 700; font-size: .9rem; cursor: pointer; animation: db-pop .4s ease .4s both; }
.aai-fab:hover { filter: brightness(1.08); }
.aai-fab:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; }
body:has(.pe-bar) .aai-fab { bottom: 96px; } /* above the product editor's save bar */
.chat-panel.is-admin { top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 100vw); height: auto; border-radius: 0; border-width: 0; border-inline-start-width: 1px; animation-name: mg-slide; }
[dir="rtl"] .chat-panel.is-admin { animation-name: mg-slide-rtl; }
.chat-panel.is-admin .chat-avatar { border-radius: 10px; }
.chat-panel.is-admin .chat-msg { max-width: 94%; }
.aai-links { display: flex; flex-wrap: wrap; gap: 6px; }
.aai-links a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .8rem; text-decoration: none; }
.aai-links a:hover { border-color: var(--accent-color); color: var(--ink); }
.aai-links a i { color: var(--accent-color); }
@media (max-width: 991.98px) {
  .aai-fab { bottom: 92px; height: 44px; padding: 0 16px; }
  body:has(.pe-bar) .aai-fab { bottom: calc(var(--mobile-dock-clearance, 64px) + 84px); }
}
@media (max-width: 575.98px) {
  .chat-panel.is-admin { inset: 0; width: auto; border: 0; animation-name: cop-sheet-in; }
  .aai-fab span { display: none; }
  .aai-fab { width: 48px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .aai-fab { animation: none; } }
/* Admin: /chats (manage.js Chats) */
.mg-chats { padding: 6px; display: flex; flex-direction: column; }
.mg-chat-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: start; cursor: pointer; border-radius: 10px; }
.mg-chat-row:first-child { border-top: 0; }
.mg-chat-row:hover { background: var(--mat); }
.mg-chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-chat-main small { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-chat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.mg-chat-meta small { color: var(--ink-muted); font-size: .75rem; }
.mg-chat { display: flex; flex-direction: column; gap: 10px; }
.mg-chat .chat-msg { max-width: 92%; }
.mg-insights { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.mg-insight-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mg-insight-h { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.mg-topic { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; margin-bottom: 10px; font-size: .88rem; }
.mg-topic span i { color: var(--accent-color); width: 18px; margin-inline-end: 6px; }
.mg-topic b { font-variant-numeric: tabular-nums; }
.mg-topic .db-bar { grid-column: 1 / -1; margin-top: 0; }
.mg-insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mg-insight-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.mg-insight-list li:first-child { border-top: 0; }
.mg-insight-list li > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991.98px) { .mg-insight-cols { grid-template-columns: minmax(0, 1fr); } }
.mg-chat-products, .mg-chat-time { color: var(--ink-muted); font-size: .72rem; display: inline-flex; gap: 5px; align-items: center; }

@media print {
  .no-print, .sh-scope, .sf-scope, .rx-mobile-dock,
  #btn-back-to-top, .browse-rail, .filter-trigger { display: none !important; }
  body { background: #fff !important; padding-bottom: 0 !important; }
}