/* Storefront — sits on top of the Webflow CSS bundle. The Webflow body
   background is var(--blue) = #383353 with white text in sections; we
   re-use those tokens here so dynamic pages feel native.

   Typography: YekanBakh (already declared in rtl.css) for Persian,
   Lato (already declared in local-fonts.css) for English. We force
   them onto our dynamic-page elements so the storefront feels like
   a real product, not a Bootstrap clone. */

:where(html[lang="fa"]) body,
:where(html[lang="fa"]) .shop-main,
:where(html[lang="fa"]) .shop-topbar,
:where(html[lang="fa"]) .shop-button,
:where(html[lang="fa"]) .shop-input,
:where(html[lang="fa"]) .shop-textarea,
:where(html[lang="fa"]) input,
:where(html[lang="fa"]) select,
:where(html[lang="fa"]) textarea,
:where(html[lang="fa"]) button {
  font-family: "YekanBakh", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", sans-serif !important;
}

/* Webflow's coolmix.webflow.css applies `font-family: League Gothic` to
   every h1–h6 and `system-ui` to every <p>. Those direct rules beat the
   inherited Persian font from `.shop-main`, so headings/paragraphs in
   the dynamic pages render in League Gothic on FA pages. Force YekanBakh
   on every text element inside the storefront when the page is FA. */
:where(html[lang="fa"]) .shop-main h1,
:where(html[lang="fa"]) .shop-main h2,
:where(html[lang="fa"]) .shop-main h3,
:where(html[lang="fa"]) .shop-main h4,
:where(html[lang="fa"]) .shop-main h5,
:where(html[lang="fa"]) .shop-main h6,
:where(html[lang="fa"]) .shop-main p,
:where(html[lang="fa"]) .shop-main span,
:where(html[lang="fa"]) .shop-main div,
:where(html[lang="fa"]) .shop-main label,
:where(html[lang="fa"]) .shop-main strong,
:where(html[lang="fa"]) .shop-main a {
  font-family: "YekanBakh", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", sans-serif !important;
}
/* Keep monospace where explicitly opted-in (order codes, IBAN, payment
   ids). These elements set their own font-family inline; respect it. */
:where(html[lang="fa"]) .shop-main [style*="ui-monospace"],
:where(html[lang="fa"]) .shop-main code,
:where(html[lang="fa"]) .shop-main kbd,
:where(html[lang="fa"]) .shop-main pre {
  font-family: ui-monospace, "Menlo", "Consolas", monospace !important;
}
:where(html[lang="en"]) body,
:where(html[lang="en"]) .shop-main {
  font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", sans-serif;
}
/* Webflow's coolmix.webflow.css forces League Gothic on every h1-h6.
   That's tuned for the Webflow hero/marquee letter widths and would
   overflow if we yanked it globally (see "League Gothic → system-font"
   note further down). But on EN dynamic pages (.shop-main scope —
   cart, checkout, panel, FAQ, contact, privacy/terms) headings render
   in plain prose flow, so the condensed display face reads as harsh.
   Override to the platform's system stack instead. */
:where(html[lang="en"]) .shop-main h1,
:where(html[lang="en"]) .shop-main h2,
:where(html[lang="en"]) .shop-main h3,
:where(html[lang="en"]) .shop-main h4,
:where(html[lang="en"]) .shop-main h5,
:where(html[lang="en"]) .shop-main h6 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif !important;
}
.shop-main, .shop-main p, .shop-main label, .shop-main h1, .shop-main h2 {
  letter-spacing: 0;
}

:root {
  --shop-blue: #383353;
  --shop-blue-soft: #4b466b;
  --shop-green: #08b669;
  --shop-green-deep: #069358;
  --shop-tan-light: #ccc6bb;
  --shop-tan-lightest: #f7f5f2;
  --shop-tan-dark: #b8aea7;
  --shop-card-bg: #f7f5f2;
  --shop-card-border: rgba(255,255,255,.18);
  --shop-text: #2a2540;
  --shop-text-muted: #7a7693;
  --shop-radius: 14px;
  --shop-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* ---------- Unified topbar (Webflow + dynamic pages) ----------
   One header for the whole site — same markup is rendered by
   `base.html` on dynamic pages and injected by `scripts/patch_pages.py`
   on Webflow static pages, so users see a consistent bar everywhere.

   Layout: 3-zone flex (start / logo / end). The logo is absolutely
   centred on the **viewport** so left/right nav widths never shift
   it. The bar uses `dir="rtl|ltr"` from the page locale, so flex
   start/end naturally flip between FA (start=right) and EN
   (start=left) — cart/account icons land on the locale's "end"
   side, the AI + Products links on the locale's "start" side. */
.shop-topbar {
  position: sticky !important;
  top: 0;
  z-index: 100;
  background: #e3dfd6 !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  /* override anything Webflow's `.transparent.w-nav` sets when our
     topbar is dropped into a Webflow page in place of the old nav */
  color: var(--shop-blue);
}
.shop-topbar-inner {
  position: relative;            /* anchor for absolutely-centred logo */
  max-width: 80rem;
  margin: 0 auto;
  padding: .55rem 1rem;
  min-height: 56px;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  gap: .5rem;
}
.shop-topbar-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  pointer-events: auto;
  z-index: 1;                    /* keep clickable above the nav rows */
  line-height: 0;
}
.shop-topbar-logo img {
  height: 30px;
  width: auto;
  display: block;
}
.shop-topbar-nav {
  display: flex !important;
  align-items: center;
  gap: .25rem;
  flex: 1 1 0;
  min-width: 0;                  /* prevent overflow pushing logo */
}
.shop-topbar-nav-start { justify-content: flex-start; }
.shop-topbar-nav-end   { justify-content: flex-end; }

.shop-topbar-link {
  color: var(--shop-blue) !important;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem .7rem;
  border-radius: 10px;
  transition: background .15s, color .15s;
}
.shop-topbar-link:hover,
.shop-topbar-link:focus-visible {
  background: rgba(56,51,83,.08);
  color: var(--shop-green-deep) !important;
}
.shop-topbar-ai svg { width: 16px; height: 16px; }
.shop-topbar-ai {
  background: linear-gradient(135deg, rgba(8,182,105,.12), rgba(56,51,83,.08));
}
.shop-topbar-ai:hover { background: linear-gradient(135deg, rgba(8,182,105,.22), rgba(56,51,83,.12)); }

.shop-topbar-icon-link {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--shop-blue) !important;
  text-decoration: none !important;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.shop-topbar-icon-link:hover,
.shop-topbar-icon-link:focus-visible {
  background: rgba(56,51,83,.1);
  color: var(--shop-green-deep) !important;
}
.shop-topbar-icon-link svg { width: 22px; height: 22px; display: block; }

/* Language toggle in the desktop nav — same look as `.shop-topbar-link`
   but with a small globe glyph + a 2-letter code. The mobile drawer
   carries its own version with a longer accessible label. */
.shop-topbar-lang { gap: .35rem; }
.shop-topbar-lang svg { width: 16px; height: 16px; }
.shop-topbar-lang span {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Desktop / mobile reveal helpers for the topbar. We use a single
   breakpoint (720px) so desktop = profile icon visible, mobile =
   hamburger visible. Inside the mobile drawer we re-show items. */
.shop-mobile-only { display: none !important; }
@media (max-width: 720px) {
  .shop-desktop-only { display: none !important; }
  .shop-mobile-only  { display: inline-flex !important; }
}

/* ---------- Mobile drawer ----------
   Slides down from below the topbar when the hamburger is tapped.
   `hidden` attribute = closed; `[data-open]` (set by JS) = open. */
.shop-mobile-menu {
  display: none;
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  padding: .35rem;
  z-index: 99;
}
.shop-mobile-menu[data-open] { display: block; }
.shop-mobile-menu-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  color: var(--shop-blue) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: .98rem;
  border-radius: 10px;
}
.shop-mobile-menu-link:hover,
.shop-mobile-menu-link:focus-visible {
  background: rgba(56,51,83,.06);
  color: var(--shop-green-deep) !important;
}
.shop-mobile-menu-link + .shop-mobile-menu-link {
  border-top: 1px solid rgba(0,0,0,.04);
}
.shop-mobile-menu-link svg { width: 22px; height: 22px; flex: 0 0 auto; }
/* `[hidden]` on the panel: only respected when JS hasn't toggled
   `data-open` (so the panel is closed). The two states must coexist
   without conflicting. */
[hidden][data-shop-menu-panel]:not([data-open]) { display: none; }

/* Page body — no need to clear an absolute header anymore. */
.shop-main {
  padding: 1.75rem 1.25rem 4rem;
  min-height: 70vh;
  color: var(--shop-tan-lightest);
}
.shop-container { max-width: 56rem; margin: 0 auto; }

/* Section heading for our pages — mirrors the look of Webflow heroes */
.shop-page-title {
  font-size: 1.9rem;
  margin: 0 0 1.25rem;
  color: #fff;
  letter-spacing: -.01em;
  font-weight: 700;
}
.shop-subtitle { color: var(--shop-tan-light); margin: -0.6rem 0 1rem; font-size: .95rem; }

.shop-card {
  background: var(--shop-card-bg);
  color: var(--shop-text);
  border-radius: var(--shop-radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shop-shadow);
}
.shop-card + .shop-card { margin-top: 1rem; }
.shop-card h2 {
  font-size: 1.15rem; margin: 0 0 .85rem;
  color: var(--shop-blue); font-weight: 700;
}
.shop-empty-hint { color: var(--shop-text-muted); margin: 0; }

/* ---------- Inputs / form rows ---------- */
.shop-field {
  display: block; margin-bottom: 1rem;
}
.shop-field-label {
  display: block; font-size: .82rem; color: var(--shop-blue);
  margin-bottom: .35rem; font-weight: 600;
}
.shop-input, .shop-textarea {
  display: block; width: 100%; box-sizing: border-box;
  padding: .7rem .9rem;
  background: #fff; color: var(--shop-text);
  border: 1px solid #d6cfc4; border-radius: 10px;
  font: inherit; font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.shop-input:focus, .shop-textarea:focus {
  outline: 0; border-color: var(--shop-blue);
  box-shadow: 0 0 0 3px rgba(56,51,83,.12);
}
.shop-input.code {
  letter-spacing: .55rem; text-align: center; font-size: 1.4rem;
  font-family: ui-monospace, "Menlo", "Consolas", monospace;
}

/* ---------- Buttons ---------- */
.shop-button {
  appearance: none; border: 0; cursor: pointer;
  padding: .75rem 1.4rem; border-radius: 999px;
  font-size: 1rem; font-weight: 700; text-decoration: none; line-height: 1;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: filter .15s, transform .15s;
}
.shop-button.primary { background: var(--shop-green); color: #fff; }
.shop-button.primary:hover { filter: brightness(1.05); }
.shop-button.primary:active { transform: translateY(1px); }
.shop-button.primary:disabled { opacity: .5; cursor: not-allowed; }
.shop-button.ghost {
  background: transparent; color: var(--shop-blue);
  border: 1.5px solid var(--shop-blue);
}
.shop-button.ghost.on-blue { color: #fff; border-color: rgba(255,255,255,.6); }
.shop-button.danger { background: #b00020; color: #fff; }
.shop-link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--shop-blue); font: inherit; text-decoration: underline;
}
.shop-link-button:hover { color: var(--shop-green); }

/* ---------- Cart count badge ----------
   Sits over the cart icon. Hidden when count is 0. Uses logical
   `inset-inline-end` so it lands on the right in EN (LTR) and on
   the left in FA (RTL) automatically — no per-locale override. */
.shop-topbar-icon-link .shop-cart-count {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  background: var(--shop-green);
  color: #fff;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  display: none;
  box-sizing: border-box;
  pointer-events: none;
}
.shop-topbar-icon-link .shop-cart-count[data-has-items] { display: inline-block; }
[data-shop-cart-link], [data-shop-account-link] { white-space: nowrap; }

/* ---------- Buy block on product pages ----------
   The Webflow product page sets `--product-primary` (page bg),
   `--product-soft` (light tonal accent), `--product-dark`, and
   `--product-ink` (dark text) per product slug. We use those tokens so
   the block looks native in each colour scheme instead of dropping a
   white card on a coloured hero. */
.shop-buy-block {
  --buy-ink: var(--product-ink, #2a2540);
  --buy-soft: var(--product-soft, #f7f5f2);
  --buy-dark: var(--product-dark, #069358);
  --buy-primary: var(--product-primary, #08b669);

  margin: 2rem auto 1rem;
  padding: 1.4rem 1.5rem;
  max-width: 24rem;
  border-radius: 18px;
  background: var(--buy-soft);
  color: var(--buy-ink);
  text-align: center;
  display: grid;
  gap: .85rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.shop-buy-stock-row {
  display: flex; justify-content: center;
}
.shop-stock-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .8rem;
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  color: var(--buy-ink);
  letter-spacing: .01em;
}
.shop-stock-pill.in::before {
  content: ""; display: inline-block; width: .55rem; height: .55rem;
  border-radius: 50%; background: var(--buy-dark);
}
.shop-stock-pill.in { color: var(--buy-dark); }
.shop-stock-pill.out { color: #b00020; }
.shop-stock-pill.out::before {
  content: ""; display: inline-block; width: .55rem; height: .55rem;
  border-radius: 50%; background: #b00020;
}

.shop-buy-price-row {
  display: flex; align-items: baseline; justify-content: center; gap: .35rem;
}
.shop-price-line {
  font-size: 2rem; font-weight: 800; line-height: 1;
  color: var(--buy-ink);
}
.shop-price-suffix {
  font-size: .9rem; font-weight: 600;
  color: var(--buy-ink);
  opacity: .7;
}

.shop-buy-cta-row {
  display: flex; justify-content: center; align-items: stretch;
  gap: .6rem; flex-wrap: wrap;
}
.shop-buy-flash {
  min-height: 1rem; font-size: .82rem;
  color: var(--buy-dark); font-weight: 600;
}

/* Override .shop-button.primary inside the buy block to use the
   product's own primary colour for that "made for this product" feel. */
.shop-buy-block .shop-button.primary {
  background: var(--buy-dark);
  color: #fff;
  padding: .65rem 1.2rem;
}
.shop-buy-block .shop-button.primary:hover { filter: brightness(1.1); }

.shop-qty {
  display: inline-flex; align-items: stretch;
  background: rgba(255,255,255,.85);
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}
.shop-qty button {
  background: transparent; border: 0; padding: 0 .9rem; font-size: 1.1rem;
  cursor: pointer; color: var(--buy-ink); font-weight: 700;
}
.shop-qty button:hover { background: rgba(0,0,0,.06); }
.shop-qty input {
  width: 3rem; border: 0; text-align: center; font-size: 1rem;
  padding: .4rem 0; background: transparent; color: var(--buy-ink);
  -moz-appearance: textfield;
}
.shop-qty input::-webkit-outer-spin-button,
.shop-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Cart line items ---------- */
.shop-cart-line {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: .85rem; align-items: center;
  padding: .75rem 0; border-bottom: 1px solid rgba(0,0,0,.08);
}
.shop-cart-line:last-child { border-bottom: 0; }
.shop-cart-line img {
  width: 56px; height: 56px; object-fit: contain;
  border-radius: 10px; background: #fff;
}
.shop-cart-totals {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1rem; margin-top: .5rem;
  border-top: 2px solid rgba(0,0,0,.08);
  font-weight: 700; font-size: 1.1rem; color: var(--shop-blue);
}

/* Cart-line warning flags. Two intensities: amber for price/short,
   red for gone/unavailable. Sit under the title in the info column. */
.shop-cart-flags {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: .3rem;
}
.shop-cart-flag {
  display: inline-flex; align-items: center;
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; line-height: 1.4;
  border: 1px solid transparent;
}
.shop-cart-flag.warn {
  background: #fff8e1; border-color: #f1d27a; color: #5a4500;
}
.shop-cart-flag.error {
  background: #fdecea; border-color: #f1aaa1; color: #6a1414;
}
.shop-cart-blocked-hint {
  margin: .75rem 0 0; padding: .65rem 1rem;
  background: #fdecea; border: 1px solid #f1aaa1; color: #6a1414;
  border-radius: 10px; font-size: .9rem;
}
.shop-cart-line.is-stock-problem { background: rgba(253, 236, 234, .35); }

/* ---------- Flash messages ---------- */
.shop-flash {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; gap: .5rem;
}
.shop-flash li {
  padding: .65rem 1rem; border-radius: 10px;
  background: #fff8e1; border: 1px solid #f1d27a;
  color: #5a4500;
}
.shop-flash li.shop-flash-error { background: #fdecea; border-color: #f1aaa1; color: #6a1414; }
.shop-flash li.shop-flash-success { background: #dff5e2; border-color: #9ad29c; color: #0a4f1e; }

/* ---------- Address list ---------- */
.shop-addr-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .75rem;
}
.shop-addr-card {
  display: flex; justify-content: space-between; gap: .75rem;
  align-items: flex-start; flex-wrap: wrap;
  padding: 1rem 1.15rem; border-radius: 12px;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
}
.shop-badge {
  display: inline-block; padding: .15rem .55rem;
  background: var(--shop-green); color: #fff;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  margin-inline-start: .35rem;
}
.shop-badge.muted { background: var(--shop-tan-dark); color: #fff; }

/* ---------- Order list/detail ---------- */
.shop-order-row {
  display: flex; justify-content: space-between; gap: .5rem;
  align-items: center; flex-wrap: wrap;
  padding: 1rem 1.2rem; border-radius: 12px;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
}
.shop-status-badge {
  background: var(--shop-blue); color: #fff;
  padding: .12rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}
.shop-status-badge.success { background: var(--shop-green); }
.shop-status-badge.cancelled { background: #b00020; }

/* ---------- Auth dev panel ---------- */
.shop-dev-otp {
  margin-top: 1rem; padding: .75rem 1rem;
  border: 1px dashed var(--shop-green);
  background: #f0fff7; border-radius: 10px;
  color: var(--shop-green-deep); font-size: .9rem;
}
.shop-dev-otp code {
  display: inline-block; margin-inline-start: .5rem;
  padding: .15rem .55rem; border-radius: 6px;
  background: var(--shop-green); color: #fff;
  font-family: ui-monospace, monospace; font-weight: 700;
  letter-spacing: .15rem;
}

/* ---------- Shipping picker — provider cards with icon ---------- */
.shop-ship-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .65rem;
}
.shop-ship-card {
  position: relative;
  display: flex; align-items: stretch;
  padding: 0;
  border: 1.5px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.shop-ship-card:hover { border-color: var(--shop-blue); }
.shop-ship-card:has(input:checked) {
  border-color: var(--shop-green-deep);
  background: #f1faf4;
  box-shadow: 0 8px 22px rgba(8,182,105,.12);
}
.shop-ship-card label {
  display: flex; gap: .9rem; align-items: center;
  flex: 1; padding: 1rem 1.1rem; cursor: pointer;
}
.shop-ship-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.shop-ship-icon {
  flex: 0 0 48px; width: 48px; height: 48px;
  border-radius: 12px;
  background: #eef0f7;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--shop-blue);
}
.shop-ship-card:has(input:checked) .shop-ship-icon {
  background: var(--shop-green); color: #fff;
}
.shop-ship-icon svg { width: 24px; height: 24px; }
.shop-ship-body {
  flex: 1; min-width: 0;
}
.shop-ship-title {
  font-size: 1rem; font-weight: 700; color: var(--shop-blue);
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.shop-ship-meta {
  font-size: .82rem; color: var(--shop-text-muted);
  margin-top: .2rem;
}
.shop-ship-price {
  font-size: .9rem; font-weight: 700; color: var(--shop-green-deep);
  white-space: nowrap;
}
.shop-ship-price.cod { color: var(--shop-blue); font-weight: 600; }
.shop-ship-card .shop-ship-check {
  flex: 0 0 22px; width: 22px; height: 22px;
  border: 2px solid #d6cfc4; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  transition: border-color .15s, background .15s, color .15s;
}
.shop-ship-card:has(input:checked) .shop-ship-check {
  border-color: var(--shop-green-deep);
  background: var(--shop-green);
  color: #fff;
}

/* ---------- Day strip + time pills (slot picker) ---------- */
.shop-day-strip {
  display: flex; gap: .5rem;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: .5rem;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.shop-day-strip::-webkit-scrollbar { height: 6px; }
.shop-day-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 4px; }
.shop-day-pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex; flex-direction: column; align-items: center; gap: .15rem;
  min-width: 4.4rem;
  padding: .6rem .9rem;
  border: 1.5px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.shop-day-pill:hover { border-color: var(--shop-blue); }
.shop-day-pill[aria-pressed="true"] {
  border-color: var(--shop-green-deep);
  background: var(--shop-green);
  color: #fff;
  box-shadow: 0 6px 16px rgba(8,182,105,.25);
}
.shop-day-pill .shop-day-name {
  font-size: .82rem; font-weight: 700;
}
.shop-day-pill .shop-day-date {
  font-size: .74rem; opacity: .8;
}
.shop-day-pill[aria-pressed="true"] .shop-day-date { opacity: .95; }

.shop-time-pills {
  display: grid; gap: .55rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.shop-time-pill {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .8rem 1rem;
  border: 1.5px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-weight: 600; color: var(--shop-blue);
  transition: all .15s;
}
.shop-time-pill input { position: absolute; opacity: 0; pointer-events: none; }
.shop-time-pill:hover { border-color: var(--shop-blue); }
.shop-time-pill:has(input:checked) {
  border-color: var(--shop-green-deep);
  background: #e8f8ef;
  color: var(--shop-green-deep);
  box-shadow: 0 6px 16px rgba(8,182,105,.15);
}
.shop-time-pill .shop-time-label { font-size: 1.02rem; font-feature-settings: "tnum"; direction: ltr; }
.shop-time-pill .shop-time-icon {
  flex: 0 0 28px; width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.05);
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
}
.shop-time-pill:has(input:checked) .shop-time-icon {
  background: var(--shop-green); color: #fff;
}
.shop-day-empty {
  padding: 1.2rem; text-align: center; color: var(--shop-text-muted);
  background: #fafafa; border-radius: 12px;
  border: 1px dashed rgba(0,0,0,.08);
}

/* ---------- Sticky pay bar (mobile only) ---------- */
.shop-pay-bar {
  display: none;
}
@media (max-width: 720px) {
  .shop-pay-bar {
    display: flex;
    position: sticky; bottom: 0;
    margin: 1rem -1rem -3rem;
    padding: .75rem 1rem;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 -8px 24px rgba(0,0,0,.10);
    align-items: center; justify-content: space-between; gap: .75rem;
    z-index: 5;
  }
  .shop-pay-bar .shop-pay-total {
    font-size: 1.05rem; font-weight: 800; color: var(--shop-blue);
  }
  .shop-pay-bar .shop-pay-total-label {
    display: block; font-size: .72rem; font-weight: 500; color: var(--shop-text-muted);
  }
  .shop-pay-bar .shop-button.primary {
    flex: 1; max-width: 60%; justify-content: center;
  }
  /* The in-card pay button carries .shop-button.block (specificity 2)
     which forces display:flex, so hiding it on mobile needs the full
     triple-class selector to outrank that rule. */
  .shop-button.block.shop-pay-bar-spacer { display: none; }
}

/* ---------- Checkout summary rows ---------- */
.shop-summary-rows {
  display: grid; gap: .35rem;
  border-top: 1px solid rgba(0,0,0,.08); padding-top: .75rem;
}
.shop-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .95rem; color: var(--shop-blue);
}
.shop-summary-row.total {
  font-size: 1.1rem; font-weight: 700;
  border-top: 2px solid rgba(0,0,0,.08);
  padding-top: .55rem; margin-top: .25rem;
}

/* ---------- Province pills (address form) ---------- */
.shop-province-row {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.shop-province-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem;
  border: 1.5px solid #d6cfc4; border-radius: 999px;
  background: #fff; cursor: pointer;
  font-size: .92rem; color: var(--shop-blue);
}
.shop-province-pill:has(input:checked) {
  border-color: var(--shop-green-deep);
  background: #e8f8ef;
  color: var(--shop-green-deep);
  font-weight: 700;
}
.shop-province-pill input { accent-color: var(--shop-green-deep); }

/* ---------- Auth pages ---------- */
.shop-auth-card {
  max-width: 28rem; margin: 0 auto;
}
.shop-auth-card h1 { margin-top: 0; }
.shop-auth-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,.18);
  color: #fff;
  margin: 0 auto 1rem;
}
.shop-auth-icon svg { width: 28px; height: 28px; }
.shop-button.block { display: flex; width: 100%; justify-content: center; }
.shop-button svg { width: 18px; height: 18px; flex: 0 0 auto; }
.shop-otp-cells {
  display: flex; gap: .5rem; justify-content: center;
}
.shop-helper {
  font-size: .82rem; color: var(--shop-text-muted);
  margin-top: 1.1rem; line-height: 1.6;
}
.shop-helper a { color: var(--shop-blue); }

/* ---------- Account panel (/account) ----------
   Greeting hero with avatar bubble + tile grid for the three core
   shortcuts (orders / addresses / cart). Each tile is a single big
   click target; large icon on the locale's start side, a chevron on
   the end side that flips with `dir`. Logout sits below the grid as a
   ghost-styled danger button so it doesn't compete visually with the
   primary tiles.

   Logical properties (`margin-inline-end`, `inset-inline-end`) make the
   layout flip cleanly between RTL (FA) and LTR (EN) without a single
   per-locale override. */
.shop-account-hero {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.4rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  color: var(--shop-tan-lightest);
}
.shop-account-avatar {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--shop-green);
  color: #fff;
  box-shadow: 0 10px 24px rgba(8,182,105,.32);
}
.shop-account-avatar svg { width: 32px; height: 32px; }
.shop-account-avatar--ghost {
  background: rgba(255,255,255,.10);
  color: var(--shop-tan-lightest);
  box-shadow: none;
}
.shop-account-hero-text { min-width: 0; }
.shop-account-hero-title {
  margin: 0; font-size: 1.55rem; font-weight: 800; color: #fff;
  letter-spacing: -.01em;
}
.shop-account-hero-sub {
  margin: .35rem 0 0; font-size: .98rem;
  color: var(--shop-tan-light); line-height: 1.55;
}
.shop-account-hero-sub strong {
  color: #fff; font-weight: 700;
  unicode-bidi: plaintext;          /* keep phone numbers readable in RTL */
}

.shop-account-section-heading {
  font-size: .82rem; font-weight: 700;
  color: var(--shop-tan-light);
  text-transform: uppercase; letter-spacing: .12em;
  margin: 0 .3rem .7rem; opacity: .9;
}

.shop-account-tiles {
  list-style: none; padding: 0; margin: 0 0 1.6rem;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.shop-account-tile {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.15rem;
  background: var(--shop-card-bg);
  color: var(--shop-text);
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shop-shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.shop-account-tile:hover,
.shop-account-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--shop-green);
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
  outline: 0;
}
.shop-account-tile-icon {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: var(--shop-blue);
}
.shop-account-tile-icon svg { width: 28px; height: 28px; }
.shop-account-tile--orders    .shop-account-tile-icon { background: linear-gradient(135deg, #5a4dbf 0%, #383353 100%); }
.shop-account-tile--addresses .shop-account-tile-icon { background: linear-gradient(135deg, #08b669 0%, #069358 100%); }
.shop-account-tile--cart      .shop-account-tile-icon { background: linear-gradient(135deg, #f4a93c 0%, #d8801a 100%); }
.shop-account-tile--profile   .shop-account-tile-icon { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }

/* Soft inline banner shown on the panel when a logged-in user hasn't
   filled in their name yet. Links to /account/profile/. */
.shop-account-banner {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.1rem;
  margin-bottom: 1.2rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f0c14b;
  color: #7c2d12;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  transition: transform .12s, box-shadow .12s;
}
.shop-account-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 45, 18, .12);
}
.shop-account-banner-icon { width: 24px; height: 24px; flex: 0 0 auto; }
.shop-account-banner-icon svg { width: 100%; height: 100%; }
.shop-account-banner-text { flex: 1; }
.shop-account-banner-chev { width: 16px; height: 16px; opacity: .8; }
.shop-account-banner-chev svg { width: 100%; height: 100%; }

/* Hero icon variants reuse the tile gradient palette so the page-icon
   matches the corresponding tile back on /account/. */
.shop-account-avatar--orders    { background: linear-gradient(135deg, #5a4dbf 0%, #383353 100%); }
.shop-account-avatar--addresses { background: linear-gradient(135deg, #08b669 0%, #069358 100%); }
.shop-success-avatar { background: var(--shop-green); box-shadow: 0 12px 28px rgba(8,182,105,.36); }
.shop-pending-avatar { background: linear-gradient(135deg, #f4a93c 0%, #d8801a 100%); box-shadow: 0 12px 28px rgba(216,128,26,.32); }
.shop-success-code {
  margin: .55rem 0 0;
  font-family: ui-monospace, "Menlo", "Consolas", monospace !important;
  font-size: 1.35rem; font-weight: 800; letter-spacing: .04em;
  color: #fff;
  unicode-bidi: plaintext;
}
.shop-success-actions { gap: .55rem; flex-wrap: wrap; }
.shop-flash-error-inline {
  padding: .65rem 1rem; border-radius: 10px;
  background: #fdecea; border: 1px solid #f1aaa1; color: #6a1414;
  margin: 0 0 1rem;
}

.shop-account-tile-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: .15rem;
}
.shop-account-tile-title {
  font-size: 1.05rem; font-weight: 700; color: var(--shop-blue);
}
.shop-account-tile-sub {
  font-size: .85rem; color: var(--shop-text-muted); line-height: 1.45;
}
.shop-account-tile-chev {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--shop-blue); opacity: .55;
  transition: opacity .15s, transform .15s;
}
.shop-account-tile-chev svg { width: 18px; height: 18px; }
[dir="rtl"] .shop-account-tile-chev svg { transform: scaleX(-1); }
.shop-account-tile:hover .shop-account-tile-chev,
.shop-account-tile:focus-visible .shop-account-tile-chev {
  opacity: 1;
  transform: translateX(2px);
}
[dir="rtl"] .shop-account-tile:hover .shop-account-tile-chev,
[dir="rtl"] .shop-account-tile:focus-visible .shop-account-tile-chev {
  transform: translateX(-2px);
}

.shop-account-logout { margin: 0; }
.shop-account-logout-btn {
  background: transparent !important;
  color: #ff6b6b !important;
  border: 1.5px solid rgba(255,107,107,.55) !important;
}
.shop-account-logout-btn:hover {
  background: rgba(255,107,107,.10) !important;
  border-color: #ff6b6b !important;
}
.shop-account-logout-btn svg { width: 18px; height: 18px; }

/* Guest /account/ — single centered card, replaces the lopsided
   wide-hero + narrow-card combo. */
.shop-account-guest {
  max-width: 28rem;
  margin: 1.5rem auto 2rem;
  padding: 2rem 1.75rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  text-align: center;
  color: var(--shop-tan-lightest);
}
.shop-account-guest-icon {
  width: 80px; height: 80px;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  color: var(--shop-tan-lightest);
}
.shop-account-guest-icon svg { width: 38px; height: 38px; }
.shop-account-guest-title {
  margin: 0 0 .4rem;
  font-size: 1.55rem; font-weight: 800;
  color: #fff; letter-spacing: -.01em;
}
.shop-account-guest-lead {
  margin: 0 0 1.4rem;
  font-size: .98rem; line-height: 1.6;
  color: var(--shop-tan-light);
}
.shop-account-guest-perks {
  list-style: none; padding: 0;
  margin: 0 0 1.4rem;
  display: grid; gap: .55rem;
  text-align: start;
}
.shop-account-guest-perks li {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .8rem;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  font-size: .94rem;
  color: var(--shop-tan-lightest);
}
.shop-account-guest-perks svg {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  color: var(--shop-green);
}
.shop-account-guest-cta { width: 100%; }
.shop-account-guest-hint {
  margin: .9rem 0 0;
  font-size: .82rem; line-height: 1.6;
  color: var(--shop-tan-light);
}
@media (max-width: 720px) {
  .shop-account-guest { padding: 1.5rem 1.15rem; border-radius: 14px; }
  .shop-account-guest-icon { width: 64px; height: 64px; }
  .shop-account-guest-icon svg { width: 30px; height: 30px; }
  .shop-account-guest-title { font-size: 1.3rem; }
  .shop-account-guest-lead { font-size: .9rem; }
  .shop-account-guest-perks li { font-size: .88rem; padding: .55rem .7rem; }
}

/* ---------- Orders list (/account/orders/) ----------
   Same visual language as the account tiles but with a status icon on
   the start side and a 2-row body (code+status / date+total). */
.shop-order-list {
  list-style: none; padding: 0; margin: 0 0 1.4rem;
  display: grid; gap: .65rem;
}
.shop-order-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--shop-card-bg);
  color: var(--shop-text);
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.shop-order-item:hover,
.shop-order-item:focus-visible {
  transform: translateY(-2px);
  border-color: var(--shop-blue);
  box-shadow: 0 14px 30px rgba(0,0,0,.20);
  outline: 0;
}
.shop-order-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: var(--shop-blue);
}
.shop-order-icon svg { width: 24px; height: 24px; }
.shop-order-icon--cancelled { background: #b00020; }
.shop-order-icon--approved,
.shop-order-icon--delivered { background: var(--shop-green); }
.shop-order-icon--pending,
.shop-order-icon--awaiting,
.shop-order-icon--processing { background: linear-gradient(135deg, #5a4dbf 0%, #383353 100%); }

.shop-order-body {
  flex: 1 1 auto; min-width: 0;
  display: grid; gap: .25rem;
}
.shop-order-row1, .shop-order-row2 {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
}
.shop-order-code {
  font-weight: 700; color: var(--shop-blue);
  font-family: ui-monospace, "Menlo", "Consolas", monospace !important;
  letter-spacing: .02em;
  unicode-bidi: plaintext;
}
.shop-order-date { color: var(--shop-text-muted); font-size: .85rem; }
.shop-order-total { color: var(--shop-blue); font-weight: 600; font-size: .95rem; }
.shop-order-total strong { font-weight: 800; font-size: 1.05rem; }

/* ---------- Order detail (/account/orders/<code>/) ---------- */
.shop-order-hero { position: relative; }
.shop-order-hero-actions {
  margin-inline-start: auto;
  display: flex; align-items: center;
}
.shop-order-hero .shop-account-hero-title { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.shop-order-code--lg {
  font-family: ui-monospace, "Menlo", "Consolas", monospace !important;
  font-size: 1.35rem; letter-spacing: .03em;
  color: #fff;
  unicode-bidi: plaintext;
}
.shop-order-hero-date { color: var(--shop-tan-light); font-size: .9rem; }

.shop-order-card { background: var(--shop-card-bg); }
.shop-order-card + .shop-order-card { margin-top: 1rem; }
.shop-card-section-title {
  margin: 0 0 1rem;
  font-size: .8rem; font-weight: 700;
  color: var(--shop-text-muted);
  text-transform: uppercase; letter-spacing: .12em;
}

.shop-meta-grid {
  margin: 0; display: grid; gap: .6rem;
}
.shop-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
}
.shop-meta-row dt {
  margin: 0; color: var(--shop-text-muted);
  font-size: .9rem; font-weight: 500;
}
.shop-meta-row dd {
  margin: 0; color: var(--shop-blue);
  font-size: .95rem; font-weight: 600;
  unicode-bidi: plaintext;
}
.shop-mono { font-family: ui-monospace, "Menlo", "Consolas", monospace !important; }

.shop-order-items {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .85rem;
}
.shop-order-item-row {
  display: flex; align-items: center; gap: .9rem;
  padding-bottom: .85rem;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}
.shop-order-item-row:last-child { border-bottom: 0; padding-bottom: 0; }
.shop-order-item-img {
  flex: 0 0 56px; width: 56px; height: 56px;
  object-fit: cover; border-radius: 12px;
  background: #eee;
}
.shop-order-item-body { flex: 1 1 auto; min-width: 0; }
.shop-order-item-title { font-weight: 700; color: var(--shop-blue); }
.shop-order-item-meta { color: var(--shop-text-muted); font-size: .85rem; margin-top: .15rem; }
.shop-order-item-total {
  flex: 0 0 auto; font-weight: 700; color: var(--shop-blue);
  white-space: nowrap;
}

/* ---------- Addresses list (/account/addresses/) ---------- */
.shop-address-list {
  list-style: none; padding: 0; margin: 0 0 1.2rem;
  display: grid; gap: .85rem;
}
.shop-address-card {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.2rem;
  background: var(--shop-card-bg);
  color: var(--shop-text);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  transition: border-color .15s;
}
.shop-address-card--default {
  border-color: var(--shop-green);
  box-shadow: 0 8px 22px rgba(8,182,105,.18);
}
.shop-address-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #08b669 0%, #069358 100%);
}
.shop-address-icon svg { width: 22px; height: 22px; }
.shop-address-body { flex: 1 1 auto; min-width: 0; display: grid; gap: .35rem; }
.shop-address-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.shop-address-label { font-weight: 700; font-size: 1.05rem; color: var(--shop-blue); }
.shop-address-recipient { color: var(--shop-text); font-weight: 600; }
.shop-address-text { color: var(--shop-text-muted); font-size: .92rem; line-height: 1.6; }
.shop-address-coords {
  font-family: ui-monospace, monospace !important;
  font-size: .8rem; color: var(--shop-text-muted); opacity: .8;
  unicode-bidi: plaintext;
}
.shop-address-actions {
  margin-top: .5rem;
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.shop-address-actions form { margin: 0; }
.shop-button-sm {
  padding: .45rem .9rem; font-size: .82rem; min-height: 0;
}
.shop-account-cta-row {
  display: flex; justify-content: center;
  margin: 1.4rem 0 0;
}
.shop-account-cta-row .shop-button { box-shadow: 0 10px 24px rgba(8,182,105,.25); }
.shop-account-cta-row svg { width: 18px; height: 18px; }

/* ---------- Generic empty state (orders/addresses zero rows) ---------- */
.shop-empty-state {
  display: grid; gap: 1rem; justify-items: center;
  padding: 2.4rem 1.5rem;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 16px;
  text-align: center;
}
.shop-empty-state-icon {
  width: 72px; height: 72px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--shop-tan-light);
}
.shop-empty-state-icon svg { width: 36px; height: 36px; }
.shop-empty-state-text {
  margin: 0; color: var(--shop-tan-light); font-size: 1rem;
}

/* ---------- Mobile tweaks ----------
   Targets ≤ 720px (tablets+phones) and ≤ 420px (phones). Goals:
   • clear nav (absolute-positioned in Webflow CSS)
   • full-width controls / 44px+ touch targets
   • cart line stacks cleanly on narrow screens
   • buy block fills the column and stacks qty above CTA */
@media (max-width: 720px) {
  /* Topbar stays single-row on phones — logo absolute-centred, AI/products on
     the start side, cart/account icons on the end side. Smaller hit-targets
     but still ≥ 36px. */
  .shop-topbar-inner { padding: .4rem .6rem; min-height: 50px; gap: .25rem; }
  .shop-topbar-logo img { height: 26px; }
  .shop-topbar-link { padding: .4rem .55rem; font-size: .85rem; }
  .shop-topbar-link.shop-topbar-ai { padding: .35rem .55rem; }
  .shop-topbar-icon-link { width: 38px; height: 38px; }
  .shop-topbar-icon-link svg { width: 20px; height: 20px; }
  .shop-topbar-icon-link .shop-cart-count { min-width: 16px; height: 16px; line-height: 16px; font-size: .62rem; padding: 0 4px; }

  .shop-main { padding: 1.25rem 1rem 3rem; }
  .shop-page-title { font-size: 1.45rem; }
  .shop-card { padding: 1.15rem 1.15rem; border-radius: 12px; }
  .shop-auth-card { max-width: 100%; }

  /* buy block — full width, items stack on narrow screens */
  .shop-buy-block {
    max-width: 100%;
    margin: 1.5rem 0 1rem;
    padding: 1.2rem 1rem;
  }
  .shop-buy-block .shop-price-line { font-size: 1.7rem; }
  .shop-buy-cta-row {
    flex-direction: column-reverse;   /* CTA on top, qty below */
    align-items: stretch;
    gap: .55rem;
  }
  .shop-buy-cta-row > .shop-qty {
    align-self: center;
  }
  .shop-buy-block .shop-button.primary {
    width: 100%;                /* full-width primary action */
    justify-content: center;
    padding: .85rem 1rem;
    font-size: 1.05rem;
  }

  /* cart line stacks: image, then text under it; price+remove last */
  .shop-cart-line {
    grid-template-columns: 56px 1fr;
    grid-auto-rows: auto;
    column-gap: .75rem; row-gap: .25rem;
  }
  .shop-cart-line > :nth-child(3),
  .shop-cart-line > :nth-child(4) {
    grid-column: 2;
    justify-self: start;
  }

  /* address card: action row wraps onto its own line */
  .shop-addr-card { flex-direction: column; align-items: stretch; }
  .shop-order-row { align-items: stretch; }

  /* form inputs / buttons: bigger touch targets */
  .shop-input, .shop-textarea { padding: .8rem .9rem; font-size: 1rem; }
  .shop-button { padding: .85rem 1.4rem; min-height: 44px; }
  .shop-qty button { padding: 0 1.1rem; min-height: 44px; }
  .shop-qty input { width: 3.4rem; font-size: 1.05rem; }

  /* OTP code input: keep generous spacing on mobile */
  .shop-input.code { font-size: 1.55rem; letter-spacing: .45rem; }

  /* Account panel: hero shrinks slightly, tiles become single-column */
  .shop-account-hero { padding: 1.1rem 1.15rem; gap: .85rem; border-radius: 14px; }
  .shop-account-avatar { width: 54px; height: 54px; }
  .shop-account-avatar svg { width: 28px; height: 28px; }
  .shop-account-hero-title { font-size: 1.3rem; }
  .shop-account-hero-sub { font-size: .9rem; }
  .shop-account-tiles { grid-template-columns: 1fr; gap: .65rem; }
  .shop-account-tile { padding: .95rem 1rem; border-radius: 14px; }
  .shop-account-tile-icon { width: 48px; height: 48px; border-radius: 12px; }
  .shop-account-tile-icon svg { width: 24px; height: 24px; }
  .shop-account-tile-title { font-size: 1rem; }
  .shop-account-tile-sub { font-size: .82rem; }

  /* Orders list: shrink icon + tighten the two body rows */
  .shop-order-item { gap: .75rem; padding: .85rem .95rem; }
  .shop-order-icon { width: 42px; height: 42px; border-radius: 10px; }
  .shop-order-icon svg { width: 22px; height: 22px; }
  .shop-order-row1, .shop-order-row2 { gap: .35rem; }
  .shop-order-code { font-size: .92rem; }
  .shop-order-date { font-size: .8rem; }
  .shop-order-total { font-size: .9rem; }

  /* Order detail hero: cancel button drops to its own row under the title */
  .shop-order-hero { flex-wrap: wrap; }
  .shop-order-hero-actions { width: 100%; margin-inline-start: 0; margin-top: .5rem; }
  .shop-order-hero-actions .shop-button { width: 100%; justify-content: center; }
  .shop-order-code--lg { font-size: 1.1rem; }
  .shop-order-card { padding: 1.15rem 1.15rem; }
  .shop-order-item-img { flex: 0 0 48px; width: 48px; height: 48px; }
  .shop-order-item-row { gap: .7rem; }
  .shop-order-item-title { font-size: .95rem; }

  /* Addresses list: card shifts to single column with the icon centered */
  .shop-address-card { padding: 1rem 1.05rem; gap: .8rem; }
  .shop-address-icon { width: 40px; height: 40px; border-radius: 10px; }
  .shop-address-icon svg { width: 20px; height: 20px; }
  .shop-address-actions { width: 100%; }
  .shop-address-actions .shop-button-sm { flex: 1; justify-content: center; }

  /* Empty state shrinks too */
  .shop-empty-state { padding: 1.6rem 1.2rem; gap: .75rem; }
  .shop-empty-state-icon { width: 60px; height: 60px; }
  .shop-empty-state-icon svg { width: 30px; height: 30px; }
}

@media (max-width: 420px) {
  .shop-page-title { font-size: 1.3rem; }
  .shop-buy-block .shop-price-line { font-size: 1.5rem; }
  .shop-cart-totals { font-size: 1rem; }
  /* Below 420px, hide the "Products" text label so the logo stays centred
     with room to breathe — AI link still visible (small icon + 2 letters). */
  .shop-topbar-link:not(.shop-topbar-ai) { display: none; }
  .shop-topbar-logo img { height: 24px; }
  .shop-topbar-icon-link { width: 36px; height: 36px; }
}

/* ====================================================================
   Marketing pages — contact / privacy / terms
   Rendered through Django (see shop/marketing_*.html) on top of the
   Webflow CSS shell, so visuals stay consistent with the static site.
   ==================================================================== */

.shop-marketing-hero {
  margin: 1.5rem auto 1.75rem;
  padding: 2rem 1.75rem;
  max-width: 64rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(56,51,83,.92), rgba(35,32,53,.96));
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
  color: #fff;
}
.shop-marketing-hero-title {
  margin: 0 0 .55rem;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.shop-marketing-hero-lead {
  margin: 0 auto;
  max-width: 44rem;
  font-size: 1rem; line-height: 1.7;
  color: rgba(255,255,255,.78);
}

/* Contact: 2-column grid (info cards + form). Stacks on mobile. */
.shop-contact-grid {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto 2.5rem;
}
.shop-contact-cards {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 1rem;
}
/* Compact 2-column layout: icon on the inline-start side, title above
   value to its inline-end. The CTA (when present) sits centered on a
   full-width third row. Wholesale card overrides below place the lead
   paragraph + primary button across both columns. */
.shop-contact-card {
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .85rem;
  row-gap: .5rem;
  align-items: center;
}
.shop-contact-card-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--shop-green);
  color: #fff;
}
.shop-contact-card-icon svg { width: 22px; height: 22px; }
.shop-contact-card-title {
  grid-row: 1;
  grid-column: 2;
  align-self: end;
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--shop-tan-light);
}
.shop-contact-card-value {
  grid-row: 2;
  grid-column: 2;
  align-self: start;
  font-size: 1rem; font-weight: 600;
  color: #fff;
  text-decoration: none;
  unicode-bidi: plaintext;
}
a.shop-contact-card-value:hover { color: var(--shop-green); }

.shop-contact-card-action {
  grid-row: 3;
  grid-column: 1 / -1;
  margin-top: .85rem;
  display: block;
  padding: .65rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.shop-contact-card-action:hover {
  background: var(--shop-green);
  border-color: var(--shop-green);
}
/* Arrow icon inside CTA removed by request — the verb on the chip
   ("ارسال ایمیل" / "تماس بگیرید") is enough. */
.shop-contact-card-action svg { display: none; }

/* Wholesale / partnerships card — visually distinct from the small
   info cards above so it reads as a real CTA. Lead paragraph + the
   full-width primary button span both grid columns. */
.shop-contact-card--wholesale {
  background: linear-gradient(135deg, rgba(8,182,105,.16), rgba(8,182,105,.04));
  border: 1px solid rgba(8,182,105,.32);
  grid-template-rows: auto 1fr auto;
  row-gap: .6rem;
}
.shop-contact-card--wholesale .shop-contact-card-icon {
  grid-row: 1;
  align-self: center;
  background: var(--shop-green);
  box-shadow: 0 10px 24px rgba(8,182,105,.35);
}
.shop-contact-card--wholesale .shop-contact-card-title {
  grid-row: 1;
  align-self: center;
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.shop-contact-card-lead {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: .5rem 0 0;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--shop-tan-light);
}
.shop-contact-wholesale-cta {
  grid-row: 3;
  grid-column: 1 / -1;
  margin-top: .25rem;
}

/* Form sits next to the cards column. Tighter spacing + a slightly
   deeper glass background (vs the lighter cards) lets the two halves
   read as a related pair without competing for visual weight, and
   trims height so the row doesn't stretch the cards column. */
.shop-contact-form-wrap {
  padding: 1.25rem 1.35rem;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(40,32,68,.55) 0%, rgba(20,16,38,.35) 60%, rgba(15,12,32,.5) 100%);
  border: 1px solid rgba(255,255,255,.06);
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.shop-contact-form-wrap .shop-field-label { color: var(--shop-tan-lightest); }
.shop-contact-form-heading {
  margin: 0 0 .25rem;
  font-size: 1.2rem; font-weight: 800;
  color: #fff;
}
.shop-contact-form-intro {
  margin: 0 0 1rem;
  font-size: .9rem; color: var(--shop-tan-light);
}
.shop-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem .8rem;
}
.shop-field--full { grid-column: 1 / -1; }
.shop-field--captcha { grid-column: 1 / -1; }
.shop-captcha-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.shop-captcha-question {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem .9rem;
  background: #f2efe8;
  border: 1px solid #d6cfc4;
  border-radius: 10px;
  color: var(--shop-blue);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .03em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: none;
  white-space: nowrap;
  line-height: 1.2;
}
.shop-captcha-input {
  flex: 1 1 8rem;
  max-width: 11rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.shop-textarea {
  min-height: 7.5rem;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
}
/* Inside the (minimised) contact form, the textarea is the single
   tallest control. Trim its floor so the form stack stays close to
   the cards column height; users can still drag-resize taller. */
.shop-contact-form-wrap .shop-textarea { min-height: 5rem; }
.shop-contact-form-wrap .shop-input,
.shop-contact-form-wrap .shop-textarea { padding: .55rem .8rem; font-size: .94rem; }
.shop-contact-form-wrap .shop-field-label {
  margin-bottom: .5rem;
  font-size: .8rem;
}
.shop-contact-form-wrap .shop-contact-submit { padding: .65rem 1rem; font-size: .95rem; }
.shop-contact-required {
  margin: .7rem 0 0;
  font-size: .82rem; color: var(--shop-tan-light);
}
.shop-contact-submit { margin-top: .75rem; }

/* Legal documents (privacy / terms) */
.shop-doc {
  max-width: 50rem;
  margin: 0 auto 3rem;
  padding: 2rem 2.25rem;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--shop-tan-lightest);
  line-height: 1.85;
  font-size: .98rem;
}
.shop-doc h2 {
  margin: 1.6rem 0 .55rem;
  font-size: 1.15rem; font-weight: 700;
  color: #fff;
}
.shop-doc h2:first-child { margin-top: 0; }
.shop-doc p {
  margin: 0 0 1rem;
  color: var(--shop-tan-lightest);
}
.shop-doc-contact {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .92rem;
  color: var(--shop-tan-light);
}
/* Bullet list inside the doc body. The dark-on-light marker doesn't
   apply here — we're light text on a dark surface, so a tint of the
   page accent gives the bullets a soft anchor without competing
   with the heading hierarchy. */
.shop-doc ul {
  margin: .25rem 0 1.1rem 0;
  padding-inline-start: 1.4rem;
  color: var(--shop-tan-lightest);
}
.shop-doc ul li {
  margin-bottom: .35rem;
  line-height: 1.7;
}
.shop-doc ul li::marker { color: var(--shop-tan-light); }
/* Bottom contact row: short prompt + linked button to /contact. */
.shop-doc-cta {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.shop-doc-cta-text {
  margin: 0;
  flex: 1 1 16rem;
  font-size: .92rem;
  color: var(--shop-tan-light);
}
.shop-doc-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  background: var(--shop-green);
  border: 1px solid var(--shop-green);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.shop-doc-cta-button:hover {
  background: var(--shop-green-deep);
  border-color: var(--shop-green-deep);
}

/* ---------- FAQ page (per-section cream cards on dark page) ----------
   Each group has its title outside the card (white on dark) and a
   light card body using the same --shop-card-bg as the rest of the
   storefront. Q text is navy (--shop-blue); answers are deep-navy
   body text (--shop-text). Subtle divider between successive items
   keeps the card readable without competing with the title hierarchy. */
.shop-faq-page {
  max-width: 50rem;
  margin: 0 auto 3rem;
  display: grid;
  gap: 1.75rem;
}
.shop-faq-section {
  display: grid;
  gap: .7rem;
}
.shop-faq-group-title {
  margin: 0;
  padding: 0 .15rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #E3DFD6;
}
.shop-faq-card {
  background: #E3DFD6;
  color: var(--shop-text);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.shop-faq-item + .shop-faq-item {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(56,51,83,.15);
}
/* Accordion: <summary> is the visible question row; <p> answer is
   revealed when the user opens the <details>. The chevron sits on
   the inline-end side (left in RTL, right in LTR) and rotates 180°
   when open. */
.shop-faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .15rem 0;
  margin: 0;
}
.shop-faq-item > summary::-webkit-details-marker { display: none; }
.shop-faq-item > summary > h3 {
  flex: 1;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--shop-blue);
}
.shop-faq-item > summary::after {
  content: "";
  flex-shrink: 0;
  width: .55rem;
  height: .55rem;
  margin-top: .4rem;
  margin-inline-start: auto;
  border-right: 2px solid var(--shop-blue);
  border-bottom: 2px solid var(--shop-blue);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.shop-faq-item[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: .65rem;
}
.shop-faq-item > summary:focus-visible {
  outline: 2px solid var(--shop-blue);
  outline-offset: 4px;
  border-radius: 4px;
}
.shop-faq-card p {
  margin: .55rem 0 0;
  font-size: .96rem;
  line-height: 1.85;
  color: var(--shop-text);
}

/* The hero on /faq + /privacy + /terms pages is downsized to match
   the .shop-doc / faq-card column underneath (50rem), so the page
   reads as one consistent stack of equal-width panels rather than a
   wide hero floating above narrower cards. */
.shop-marketing-hero--faq,
.shop-marketing-hero--legal {
  margin: 1rem auto 1.5rem;
  padding: 1.5rem 1.75rem;
  max-width: 50rem;
  border-radius: 16px;
}
.shop-marketing-hero--faq .shop-marketing-hero-title,
.shop-marketing-hero--legal .shop-marketing-hero-title {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: #E3DFD6;
}
.shop-marketing-hero--faq .shop-marketing-hero-lead,
.shop-marketing-hero--legal .shop-marketing-hero-lead {
  font-size: .94rem;
  line-height: 1.65;
}

@media (max-width: 880px) {
  .shop-contact-grid { grid-template-columns: 1fr; gap: 1rem; }
  .shop-contact-form-wrap { padding: 1.4rem 1.15rem; }
  .shop-form-grid { grid-template-columns: 1fr; gap: .85rem; }
  .shop-marketing-hero { padding: 1.6rem 1.25rem; border-radius: 16px; margin: 1rem auto 1.25rem; }
  .shop-marketing-hero-lead { font-size: .94rem; }
  .shop-marketing-hero--faq,
  .shop-marketing-hero--legal { padding: 1.2rem 1.1rem; border-radius: 14px; }
  .shop-doc { padding: 1.6rem 1.35rem; border-radius: 14px; }
  .shop-doc h2 { font-size: 1.05rem; margin-top: 1.4rem; }
  .shop-faq-page { gap: 1.4rem; margin-bottom: 2rem; }
  .shop-faq-group-title { font-size: 1.12rem; }
  .shop-faq-card { padding: 1.2rem 1.1rem; border-radius: 14px; }
  .shop-faq-item + .shop-faq-item { margin-top: .8rem; padding-top: .8rem; }
  .shop-faq-item > summary > h3 { font-size: .98rem; }
  .shop-faq-card p { font-size: .93rem; line-height: 1.8; }
}
@media (max-width: 480px) {
  .shop-marketing-hero { padding: 1.25rem 1rem; }
  .shop-marketing-hero-title { font-size: 1.45rem; }
  .shop-marketing-hero-lead { font-size: .9rem; line-height: 1.65; }
  .shop-marketing-hero--faq,
  .shop-marketing-hero--legal { padding: 1rem .95rem; }
  .shop-marketing-hero--faq .shop-marketing-hero-title,
  .shop-marketing-hero--legal .shop-marketing-hero-title { font-size: 1.2rem; }
  .shop-contact-card { padding: .85rem .95rem; column-gap: .75rem; }
  .shop-contact-card-icon { width: 40px; height: 40px; }
  .shop-contact-card-icon svg { width: 20px; height: 20px; }
  .shop-contact-card-title { font-size: .76rem; }
  .shop-contact-card-value { font-size: .94rem; }
  .shop-contact-card-action { font-size: .82rem; padding: .5rem .8rem; }
  .shop-contact-card-lead { font-size: .88rem; }
  .shop-contact-form-wrap { padding: 1.2rem 1rem; border-radius: 14px; }
  .shop-contact-form-heading { font-size: 1.15rem; }
  .shop-contact-form-intro { font-size: .9rem; margin-bottom: 1.1rem; }
  .shop-doc { padding: 1.25rem 1rem; }
  .shop-doc { font-size: .94rem; line-height: 1.8; }
  .shop-doc h2 { font-size: 1rem; }
  .shop-faq-page { gap: 1.2rem; }
  .shop-faq-group-title { font-size: 1.05rem; }
  .shop-faq-card { padding: 1rem .95rem; }
}

/* ---------- Footer overrides ----------
   The Webflow export ships `.footer-grid-block:last-of-type{display:none}`
   to hide a placeholder column. Our footer keeps only one real
   .footer-grid-block (Pages), so without this override that rule would
   hide the Pages column completely. Long Persian phrases also need
   wrapping rather than nowrap. */
.footer-grid-large .footer-grid-block:last-of-type { display: flex !important; }
.footer-link-dark { white-space: normal; }
html[lang="fa"] .footer-link-dark { white-space: normal; line-height: 1.7; }

/* Inline legal links beside the copyright line. Single small strip,
   FA-aware so Persian "حریم خصوصی" / "قوانین و مقررات" wrap nicely
   instead of overflowing. */
.shop-footer-legal {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem .9rem;
  margin-inline-start: 1rem;
  font-size: .9rem;
}
.shop-footer-legal a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, opacity .2s;
}
.shop-footer-legal a:hover { color: #fff; opacity: 1; }
.shop-footer-legal-sep {
  color: rgba(255, 255, 255, .35);
  user-select: none;
}
html[lang="fa"] .shop-footer-legal { font-size: .92rem; }
html[lang="fa"] .shop-footer-legal a { font-family: var(--fa-font); }

@media (max-width: 720px) {
  .shop-footer-legal {
    margin-inline-start: 0;
    margin-top: .6rem;
    width: 100%;
    justify-content: flex-start;
  }
}

/* Ruby Noir's brand name is 9 characters with an embedded space, while
   Mintora/Citrina are 7 contiguous characters. The shared
   8.05svw rule from the Webflow CSS fits the 7-char names on one line
   but pushes "RUBY NOIR" into a 2-line wrap on standard desktop widths.
   Slightly tighter sizing + letter-spacing keeps it on one line without
   shrinking Mintora/Citrina, which already fit. */
html[data-wf-item-slug="ruby-noir"] body.product-page-body .product-page-h1 {
  font-size: clamp(2.4rem, 6.8svw, 7rem);
  letter-spacing: -0.01em;
}

/* Category-card visual parity for Ruby Noir.
   Base Webflow CSS scales it to .985 to compensate for taller jar art,
   but the latest art has Ruby Noir at content_h=921 versus Mintora 875
   and Citrina 884 — a ~5% size delta that .985 only halfway covers.
   Tighter scale brings it visually in line with the other two cards. */
.content-image.product-collection-image-front[src*="coolmix-ruby-noir-mocktail-jar.png"] {
  transform: scale(.955) !important;
}
.product-collection-card-wrapper:hover .content-image.product-collection-image-front[src*="coolmix-ruby-noir-mocktail-jar.png"] {
  transform: scale(.97) !important;
}

/* Granila has the same 921px content height as Ruby Noir (5.3% over
   the Mintora/Citrina/Melora reference of 875px), so it needs the same
   compensation on the category cards. Melora is already at 875 and
   doesn't need scaling. */
.content-image.product-collection-image-front[src*="coolmix-granila-mocktail-jar.png"] {
  transform: scale(.955) !important;
}
.product-collection-card-wrapper:hover .content-image.product-collection-image-front[src*="coolmix-granila-mocktail-jar.png"] {
  transform: scale(.97) !important;
}

/* EN category-card flavor line: the Webflow-baked inline styles render
   it at 2.7rem bold Scood, which forces longer phrases ("SourCherry &
   Cinnamon", "Vanilla & Pomegranate") onto two lines and makes those
   cards visually taller. Match FA's compact 1.4rem treatment so all 5
   cards line up regardless of phrase length.
   Scoped to html[lang="en"] + the category-list container so it doesn't
   touch the homepage product strip or FA pages. */
html[lang="en"] .product-categories-collection-list .price {
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* Firefox computes `height: 100%` on a flex-item <img> with no definite
   parent height as zero, collapsing the wave PNG to a sliver. Chrome
   falls back to intrinsic height. The fix has two parts:
   (a) give the marquee panel a definite cross-axis size — `aspect-ratio`
       on the panel itself, since panels live inside `.marquee-horizontal-
       wrap` with no defined height either; setting `min-height: 4vw`
       breaks the circular flex-height dependency without affecting the
       horizontal layout / animation.
   (b) override the `height: 100%` on the wave img with `height: auto +
       aspect-ratio` so the PNG renders proportional to whatever width
       the flex algorithm assigns it.
   Both rules target ONLY .divider-wave / marquee-divider, so other
   .content-image._100 uses elsewhere are untouched. */
.marquee-horizontal-wrap.alternate.divider .marquee-horizontal-panel-alternate-03 {
  min-height: 4vw;
}
.content-image._100.divider-wave {
  height: auto !important;
  width: auto !important;
  aspect-ratio: 7809 / 384;
}

/* Webflow only un-flips the horizontal-sticky scroll for html[lang="fa"];
   under RTL Arabic the panels render in reverse DOM order, putting
   panel-03 (blue) or panel-02 (pink) under the wave instead of panel-01.
   Generalize the override to all RTL locales. */
html[dir="rtl"] .horizontal-products-wrapper,
html[dir="rtl"] .scroll-track,
html[dir="rtl"] .marquee-horizontal-wrap,
html[dir="rtl"] .marquee-horizontal-wrap.alternate,
html[dir="rtl"] .marquee-horizontal-wrap.alternate.divider {
  direction: ltr;
}

/* NOTE: League Gothic → system-font replacement reverted — the Webflow
   layout was tuned for that font's condensed letter widths, so swapping
   in a wider system font causes hero/marquee overflow. To redo this
   properly we'd need to adjust container widths per-element, or pick a
   condensed system fallback (no universal one exists). Deferred. */

/* ============================================================
   AR mirror of Webflow rtl.css FA-only rules.
   Generated. Same selectors and bodies, only the locale
   prefix swapped (fa → ar). Font-family rules omitted.
   Source: app/webflow_static/assets/css/rtl.css
   ============================================================ */
html[lang="ar"] .ai-heading-fa {
  direction: rtl !important;
  text-transform: none !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(.2rem, 1vw, .65rem) !important;
  width: 100% !important;
  max-width: min(100%, 42rem) !important;
  margin-inline: auto !important;
  overflow: visible !important;
}
html[lang="ar"] .quality-heading-fa {
  font-size: 4.4rem !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  text-align: right !important;
  -webkit-text-stroke: .25px currentColor;
  text-shadow: 0 0 .01px currentColor;
}
html[lang="ar"] .occasion-heading-fa {
  font-size: 6.4rem !important;
  font-weight: 900 !important;
  line-height: .95 !important;
  -webkit-text-stroke: .25px currentColor;
  text-shadow: 0 0 .01px currentColor;
}
@media screen and (max-width: 767px) {
  html[lang="ar"] .ai-heading-fa {
    max-width: calc(100vw - 3rem) !important;
    gap: .25rem !important;
  }
  html[lang="ar"] .ai-heading-fa span {
    font-size: clamp(2.25rem, 11.4vw, 3.85rem) !important;
    line-height: 1.02 !important;
  }
  html[lang="ar"] .ai-heading-fa .subscribe-span-04 {
    font-size: clamp(2.35rem, 11.9vw, 4rem) !important;
  }
  html[lang="ar"] .quality-heading-fa {
    font-size: 4rem !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: right !important;
  }
  html[lang="ar"] .occasion-heading-fa {
    font-size: 5.6rem !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}
@media screen and (max-width: 479px) {
  html[lang="ar"] .quality-heading-fa {
    font-size: 2.8rem !important;
    text-align: right !important;
  }
  html[lang="ar"] .occasion-heading-fa {
    font-size: 3.2rem !important;
    text-align: center !important;
  }
}
html[lang="ar"] .details-container,
html[lang="ar"] .subscribe-details-grid,
html[lang="ar"] .subcribe-details-text-container {
  direction: rtl !important;
}
html[lang="ar"] .subcribe-details-text-container {
  text-align: right !important;
  justify-items: end !important;
  align-items: flex-end !important;
}
html[lang="ar"] .details-container .subscribe-icon-image {
  display: block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 4rem !important;
  filter: brightness(0) saturate(100%) invert(20%) sepia(72%) saturate(2201%) hue-rotate(342deg) brightness(89%) contrast(91%) !important;
}
html[lang="ar"] .subscribe-grid-h3 {
  width: 100% !important;
  font-weight: 900 !important;
}
html[lang="ar"] .subscribe-grid-h3 span[dir="ltr"] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block !important;
}
html[lang="ar"] .subscribe-details-paragraph {
  width: 100% !important;
  max-width: 20rem !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  font-weight: 700 !important;
  line-height: 1.85 !important;
}
@media screen and (max-width: 767px) {
  html[lang="ar"] .subscribe-details-paragraph {
    max-width: 12.8rem !important;
  }
  html[lang="ar"] .details-container {
    padding-inline: clamp(.9rem, 4vw, 1.25rem) !important;
    overflow: visible !important;
  }
  html[lang="ar"] .subscribe-details-grid {
    position: relative !important;
    grid-template-columns: 3.2rem minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, auto) !important;
    grid-template-areas:
      "Icon-1 Details-1"
      "Icon-2 Details-2"
      "Icon-3 Details-3" !important;
    column-gap: clamp(.85rem, 3.6vw, 1.35rem) !important;
    row-gap: clamp(2.1rem, 8vw, 3rem) !important;
    align-items: start !important;
    overflow: visible !important;
  }
  html[lang="ar"] .subscribe-details-grid::before {
    content: "";
    position: absolute;
    top: 1.15rem;
    bottom: 1.15rem;
    right: 1.6rem;
    width: 2px;
    background-color: #e3dfd6;
    opacity: .9;
    z-index: 0;
  }
  html[lang="ar"] .subscribe-line-container {
    display: none !important;
  }
  html[lang="ar"] .subscribe-icon-container {
    align-self: start !important;
    justify-self: center !important;
    position: relative !important;
    z-index: 2 !important;
  }
  html[lang="ar"] .subcribe-details-text-container,
  html[lang="ar"] .subcribe-details-text-container._01,
  html[lang="ar"] .subcribe-details-text-container._02,
  html[lang="ar"] .subcribe-details-text-container._03 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: .45rem !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  html[lang="ar"] .details-container .subscribe-icon-image {
    width: 3.2rem !important;
    max-width: 3.2rem !important;
    height: auto !important;
    flex: 0 0 auto !important;
    margin: 0 0 .1rem auto !important;
    padding: 0 !important;
    position: static !important;
  }
  html[lang="ar"] .subscribe-grid-h3 {
    max-width: 14rem !important;
    margin: 0 !important;
    font-size: clamp(1.65rem, 7.2vw, 2rem) !important;
    line-height: 1.16 !important;
  }
  html[lang="ar"] .subscribe-details-paragraph {
    max-width: 14rem !important;
    margin: 0 !important;
    font-size: clamp(.82rem, 3.45vw, .98rem) !important;
    line-height: 1.75 !important;
  }
}
html[lang="ar"] .paragraph,
html[lang="ar"] .small-paragraph,
html[lang="ar"] .footer-link-dark,
html[lang="ar"] .text-block,
html[lang="ar"] input.w-input,
html[lang="ar"] textarea.w-input {
  font-weight: 400;
}
html[lang="ar"] .nav-text-link,
html[lang="ar"] .nav-button,
html[lang="ar"] .general-button,
html[lang="ar"] .contact-us-button,
html[lang="ar"] .category-button,
html[lang="ar"] .field-label,
html[lang="ar"] .product-tab-title,
html[lang="ar"] .price,
html[lang="ar"] .product-flavor-text {
  font-weight: 600;
}
html[lang="ar"] .h1-heading.categories,
html[lang="ar"] .h1-heading.contact,
html[lang="ar"] .h1-heading._404,
html[lang="ar"] .h2-heading,
html[lang="ar"] .h3-heading,
html[lang="ar"] .footer-menu-title,
html[lang="ar"] .sales-heading,
html[lang="ar"] .party-jar-word {
  font-weight: 700;
}
html[lang="ar"] .footer-grid-block,
html[lang="ar"] .footer-text-box {
  text-align: right;
  direction: rtl;
}
html[lang="ar"] .footer-text-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
html[lang="ar"] body.product-page-body .small-paragraph,
html[lang="ar"] body.product-page-body .w-tab-pane,
html[lang="ar"] body.product-page-body .w-tab-pane p,
html[lang="ar"] body.product-page-body .tabs-pane,
html[lang="ar"] body.product-page-body .tabs-pane p,
html[lang="ar"] body.product-page-body .product-description-tabs p,
html[lang="ar"] body.product-page-body .product-information-text-box,
html[lang="ar"] body.product-page-body .product-information-text-box .small-paragraph,
html[lang="ar"] body.product-page-body .text-box,
html[lang="ar"] body.product-page-body .text-box .small-paragraph {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: embed;
}
html[lang="ar"] body.product-page-body .guide-copy,
html[lang="ar"][data-wf-item-slug] body.product-page-body .guide-copy {
  direction: rtl !important;
  text-align: right !important;
  text-align-last: right !important;
  unicode-bidi: plaintext;
  line-height: 2;
}
html[lang="ar"] body.product-page-body .mix-copy,
html[lang="ar"][data-wf-item-slug="citrina"] body.product-page-body .mix-copy,
html[lang="ar"][data-wf-item-slug="mintora"] body.product-page-body .mix-copy,
html[lang="ar"][data-wf-item-slug="ruby-noir"] body.product-page-body .mix-copy {
  direction: rtl !important;
  text-align: right !important;
  text-align-last: right !important;
}
html[lang="ar"] body.product-page-body .mix-copy-lead,
html[lang="ar"][data-wf-item-slug="citrina"] body.product-page-body .mix-copy-lead,
html[lang="ar"][data-wf-item-slug="mintora"] body.product-page-body .mix-copy-lead,
html[lang="ar"][data-wf-item-slug="ruby-noir"] body.product-page-body .mix-copy-lead {
  direction: rtl !important;
  display: block !important;
  text-align: right !important;
  white-space: normal;
}
html[lang="ar"] body.product-page-body .product-tab-title {
  direction: rtl;
  text-align: right;
}
html[lang="ar"] body.product-page-body .product-description-tabs {
  direction: rtl !important;
  --fa-product-tabs-right-shift: clamp(.55rem, 1.5vw, .75rem);
  width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
  text-align: right !important;
  transform: translateX(var(--fa-product-tabs-right-shift));
}
html[lang="ar"] body.product-page-body .product-description-tabs-menu {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 3.1vw, 23px);
}
html[lang="ar"] body.product-page-body .product-description-tab-link {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html[lang="ar"] body.product-page-body .w-tab-content,
html[lang="ar"] body.product-page-body .tabs-pane,
html[lang="ar"] body.product-page-body .tabs-pane .text-box,
html[lang="ar"] body.product-page-body .tabs-pane .small-paragraph {
  width: 100% !important;
  max-width: 100% !important;
}
html[lang="ar"] .section.hero,
html[lang="ar"] .marquees,
html[lang="ar"] .horizontal-products-container,
html[lang="ar"] .horizontal-products-wrapper,
html[lang="ar"] .scroll-track {
  direction: ltr;
}
@media screen and (max-width: 767px) {
  html[lang="ar"] .hero-heading-container {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }
  html[lang="ar"] .h1-heading.hero {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
@media screen and (max-width: 767px) {
  html[lang="ar"] .horizontal-products-container .product-image-container {
    transform: scale(1.15) !important;
    transform-origin: center center !important;
  }
  html[lang="ar"] .horizontal-products-container .product-flavor-text {
    display: block !important;
    width: max-content !important;
    min-width: 9.25rem !important;
    max-width: 72% !important;
    margin: .35rem 0 .85rem !important;
    direction: rtl !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  html[lang="ar"] .horizontal-products-container .product-button-container.home._02 {
    width: max-content !important;
    margin-top: 0 !important;
    justify-content: flex-start !important;
  }
  html[lang="ar"] .horizontal-products-container .product-button-container.home._02 .general-button {
    padding: .4rem .8rem !important;
    border-width: .1rem !important;
    font-size: 1.28rem !important;
    line-height: 1 !important;
    box-shadow: 3.2px 3.2px 0 .1rem #fff !important;
  }
  html[lang="ar"] .horizontal-products-container .panel-01 .general-button {
    background-color: #3bbc9a !important;
  }
  html[lang="ar"] .horizontal-products-container .panel-02 .general-button {
    background-color: #2bb673 !important;
  }
  html[lang="ar"] .horizontal-products-container .panel-03 .general-button {
    background-color: #206781 !important;
  }
}
@media screen and (max-width: 479px) {
  html[lang="ar"] .horizontal-products-container .product-button-container.home._02 .general-button {
    font-size: .96rem !important;
  }
}
html[lang="ar"] body.contact-page .h1-heading.contact,
html[lang="ar"] body.contact-page .paragraph {
  direction: rtl;
  text-align: center;
}
html[lang="ar"] .h1-heading._404,
html[lang="ar"] body .container._404 .paragraph {
  direction: rtl;
  text-align: center;
}
html[lang="ar"] .general-button,
html[lang="ar"] .nav-button,
html[lang="ar"] .contact-us-button,
html[lang="ar"] .w-commerce-commerceaddtocartbutton {
  letter-spacing: 0;
}
html[lang="ar"] .header-nav-container {
  direction: rtl;
}
html[lang="ar"] .navigation-menu,
html[lang="ar"] .nav-text-links-container,
html[lang="ar"] .nav-right-block {
  direction: rtl;
}
html[lang="ar"] .nav-text-link {
  direction: rtl;
  text-align: right;
}
html[lang="ar"] .nav-text-links-container.display-none-tablet {
  display: flex;
}
html[lang="ar"] .navigation-menu {
  min-width: 0;
  max-width: none;
  gap: 1.25rem;
}
html[lang="ar"] .navigation-menu .nav-text-link {
  white-space: nowrap;
  font-size: .95rem;
}
html[lang="ar"] .nav-text-links-container.display-none-tablet .nav-text-link {
  font-weight: 600;
  font-size: .92rem;
}
html[lang="ar"] .nav-right-block .nav-text-link {
  white-space: nowrap;
}
html[lang="ar"] .lang-switch {
  direction: ltr;
  unicode-bidi: embed;
  margin-left: .5rem;
  margin-right: 0;
}
html[lang="ar"] .header-nav .nav-text-links-container.display-none-tablet .nav-text-link {
  color: #383353 !important;
  font-weight: 800 !important;
}
html[lang="ar"] .header-nav .nav-text-link,
html[lang="ar"] .header-nav .nav-button.blue.general,
html[lang="ar"] .header-nav .lang-switch {
  font-weight: 800 !important;
}
html[lang="ar"] [role="banner"] .nav-text-link,
html[lang="ar"] [role="banner"] .nav-button.blue.general,
html[lang="ar"] [role="banner"] .lang-switch {
  font-weight: 800 !important;
}
html[lang="ar"] .footer-container,
html[lang="ar"] .footer-container.general,
html[lang="ar"] .footer-grid-large,
html[lang="ar"] .footer-grid-block,
html[lang="ar"] .footer-grid-block-small,
html[lang="ar"] .newsletter-legal-wrap {
  direction: rtl;
}
html[lang="ar"] .footer-grid-large {
  direction: rtl;
}
html[lang="ar"] .footer-grid-block {
  text-align: right;
}
html[lang="ar"] .footer-menu-title {
  text-align: right;
  direction: rtl;
}
html[lang="ar"] .footer-text-box {
  align-items: flex-end;
  text-align: right;
  direction: rtl;
}
html[lang="ar"] .footer-link-dark,
html[lang="ar"] .bottom-footer-link {
  text-align: right;
  direction: rtl;
}
html[lang="ar"] .footer-grid-block-small {
  direction: ltr;
}
html[lang="ar"] .footer-grid-large > .footer-grid-block:first-of-type,
html[lang="ar"] .footer-grid-large .footer-grid-block-small {
  transform: none;
}
@media (min-width: 768px) {
  html[lang="ar"] .footer-grid-large {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2rem;
  }
}
html[lang="ar"] .newsletter-legal-wrap .bottom-footer-link {
  text-align: right;
  direction: rtl;
}
html[lang="ar"] .newsletter-legal-wrap .bottom-footer-link .num,
html[lang="ar"] .newsletter-legal-wrap {
  direction: rtl;
}
@media (max-width: 991px) {
  html[lang="ar"] .nav-text-links-container.display-none-tablet {
    display: flex;
  }
}
@media (max-width: 767px) {
  html[lang="ar"] .header-nav-container {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    column-gap: .35rem;
    direction: ltr;
  }
  html[lang="ar"] .nav-right-block {
    display: contents !important;
  }
  html[lang="ar"] .tablet-menu-button-holder {
    grid-column: 5;
    grid-row: 1;
    order: initial;
    justify-self: end;
  }
  html[lang="ar"] .navigation-middle-block {
    grid-column: 4;
    grid-row: 1;
    order: initial;
    margin: 0 !important;
    justify-self: end;
  }
  html[lang="ar"] .nav-buttons-desktop {
    grid-column: 1 / 3;
    grid-row: 1;
    order: initial;
    justify-self: start;
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  html[lang="ar"] .nav-buttons-desktop .lang-switch {
    order: 1;
  }
  html[lang="ar"] .nav-buttons-desktop .nav-button:not(.lang-switch) {
    order: 2;
  }
  html[lang="ar"] .nav-buttons-desktop .nav-button.blue.general,
  html[lang="ar"] .nav-buttons-desktop .lang-switch {
    font-size: .78rem !important;
    font-weight: 900 !important;
  }
  html[lang="ar"] .newsletter-legal-wrap .bottom-footer-link {
    text-align: center;
  }
}
@media (max-width: 479px) {
  html[lang="ar"] .nav-text-links-container.display-none-tablet {
    /* Keep visible inside burger drawer; only hide if it duplicates */
  }
}
@media (max-width: 767px) {
  html[lang="ar"] .footer-grid-large > .footer-grid-block:nth-of-type(3) {
    align-items: stretch !important;
    text-align: right !important;
  }
  html[lang="ar"] .footer-grid-large > .footer-grid-block:nth-of-type(3) .footer-link-dark {
    text-align: right !important;
  }
}
html[lang="ar"] .footer-container.general {
  grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr) !important;
  grid-template-areas: "brand links" "legal links" !important;
  direction: ltr !important;
}
html[lang="ar"] .footer-grid-large {
  direction: rtl !important;
  justify-content: start !important;
}
html[lang="ar"] .footer-grid-block,
html[lang="ar"] .footer-grid-block-small {
  direction: rtl !important;
  text-align: right !important;
  align-items: flex-end !important;
}
html[lang="ar"] .footer-grid-block-small .social-link-large:nth-child(1)::after {
  content: "اینستاگرام" !important;
}
html[lang="ar"] .footer-grid-block-small .social-link-large:nth-child(2)::after {
  content: "یوتیوب" !important;
}
html[lang="ar"] .footer-text-box {
  align-items: flex-end !important;
  text-align: right !important;
  direction: rtl !important;
}
html[lang="ar"] .footer-grid-block-small .social-link-large {
  justify-content: flex-end !important;
}
html[lang="ar"] .newsletter-legal-wrap,
html[lang="ar"] .newsletter-legal-wrap .bottom-footer-link {
  direction: rtl !important;
  text-align: right !important;
  justify-content: flex-end !important;
}
html[lang="ar"] .footer-grid-large {
  direction: rtl !important;
  grid-template-columns: max-content max-content !important;
  column-gap: clamp(1.5rem, 5vw, 2.75rem) !important;
  justify-content: start !important;
  justify-self: end !important;
  width: auto !important;
}
html[lang="ar"] .footer-grid-block-small {
  grid-column: 2 !important;
  grid-row: 1 !important;
  order: 2 !important;
  direction: rtl !important;
  text-align: right !important;
  align-items: flex-end !important;
  justify-self: end !important;
  width: max-content !important;
  gap: .35rem !important;
}
html[lang="ar"] .footer-grid-large > .footer-grid-block:nth-of-type(2) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  order: 1 !important;
  direction: rtl !important;
  text-align: right !important;
  align-items: flex-end !important;
  justify-self: end !important;
  width: max-content !important;
  gap: .35rem !important;
}
html[lang="ar"] .footer-grid-block-small::before,
html[lang="ar"] .footer-menu-title,
html[lang="ar"] .footer-link-dark,
html[lang="ar"] .footer-grid-block-small .social-link-large {
  direction: rtl !important;
  text-align: right !important;
  width: 100% !important;
}
html[lang="ar"] .footer-grid-block-small .social-link-large {
  display: flex !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  align-items: center !important;
  line-height: 1.7 !important;
}
html[lang="ar"] .footer-grid-block-small .social-link-large::after {
  display: block !important;
  width: 100% !important;
  text-align: right !important;
}
html[lang="ar"] .footer-text-box {
  width: 100% !important;
  direction: rtl !important;
  text-align: right !important;
  align-items: flex-end !important;
}

/* End of generated AR mirror. */

/* Hide the homepage wave-divider marquee on phones — per user request,
   it adds noise on small screens. Stays on tablet+ (≥ 768px). */
@media screen and (max-width: 767px) {
  .marquees.divider,
  .marquee-main-content-container.divider,
  .marquee-horizontal-wrap.alternate.divider {
    display: none !important;
  }
}

/* Webflow's mobile cube-positioning rules are scoped to
   `html[data-wf-item-slug] body.product-page-body`, which only matches
   CMS-driven product pages. Our Django-rendered marketing pages
   (Melora, Granila) wrap their product hero in
   `[data-product-page]` but lack the wf attributes, so mobile leaves
   the side cube images mispositioned (overlapping the main jar).
   Re-declare the same rules under our own scope. */
@media screen and (max-width: 767px) {
  [data-product-page] .product-page-image-wrapper .image-wrapper.cube.product-page-01,
  [data-product-page] .product-page-image-wrapper .image-wrapper.cube.product-page-02 {
    width: 3.5rem !important;
  }
  [data-product-page] .product-page-image-wrapper .image-wrapper.cube.product-page-01 {
    inset: -5% auto auto 6% !important;
  }
  [data-product-page] .product-page-image-wrapper .image-wrapper.cube.product-page-02 {
    inset: auto 4% 0% auto !important;
  }
}

/* ============================================================
   Language switcher (4-locale)
   ============================================================
   The desktop switcher uses a native <details>/<summary> dropdown
   (no JS) revealing the 3 alternate locales. On mobile the menu
   panel hosts a pill row instead. */
.shop-lang-menu {
  position: relative;
  display: inline-block;
}
.shop-lang-menu > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.shop-lang-menu > summary::-webkit-details-marker { display: none; }
.shop-lang-menu-panel {
  position: absolute;
  top: calc(100% + .4rem);
  inset-inline-start: 0;
  z-index: 60;
  width: max-content;
  display: flex;
  flex-direction: column;
  padding: .35rem 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: .65rem;
  box-shadow: 0 .35rem 1.1rem rgba(0, 0, 0, .12);
}
[dir="rtl"] .shop-lang-menu-panel { inset-inline-start: auto; inset-inline-end: 0; }
.shop-lang-menu-item {
  padding: .55rem .95rem;
  color: #1a1a1a;
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.2;
  white-space: nowrap;
  text-align: start;
}
.shop-lang-menu-item:hover,
.shop-lang-menu-item:focus-visible {
  background: rgba(0, 0, 0, .055);
  outline: none;
}
.shop-mobile-lang-group {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .9rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: .4rem;
}
.shop-mobile-lang-header {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  opacity: .75;
}
/* SVG inside the lang-header needs an explicit size or the browser
   falls back to the CSS default (~300×150). Match the rest of the
   mobile-menu icons (22 × 22). */
.shop-mobile-lang-header svg { width: 18px; height: 18px; flex: 0 0 auto; }
.shop-mobile-lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.shop-mobile-lang-pill {
  padding: .42rem .8rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.1;
}
.shop-mobile-lang-pill:hover,
.shop-mobile-lang-pill:focus-visible {
  background: currentColor;
  color: #fff;
  outline: none;
}

/* ---- Product gallery (thumbnail strip below hero) ---------------- */
/* Injected by patch_pages.py:patch_product_gallery. Lives INSIDE
   .product-page-image-wrapper so it sits flush under the hero. Three
   thumbs at 52px each = ~180px wide — fits any viewport, never needs
   horizontal scroll. */

/* Webflow gives .product-image-lightbox `height: 100%` so it fills the
   image wrapper. With our strip added as a sibling INSIDE the wrapper,
   the lightbox tries to stretch past the image and the column-flex
   layout breaks (image collapses, strip ends up free-floating). Force
   the lightbox to take its natural image-driven height instead. */
.product-page-image-wrapper:has(> .cm-product-thumbs) .product-image-lightbox {
  height: auto;
  flex: 0 0 auto;
  width: 100%;
}
.product-page-image-wrapper:has(> .cm-product-thumbs) {
  align-items: stretch;
}

.cm-product-thumbs {
  display: flex;
  gap: .4rem;
  margin-top: .7rem;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 0;
  width: 100%;
}
.cm-product-thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: .45rem;
  background: transparent;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.cm-product-thumb:hover { opacity: .85; transform: translateY(-1px); }
.cm-product-thumb:focus-visible {
  outline: none;
  opacity: 1;
  border-color: rgba(90,77,191,.5);
}
.cm-product-thumb.is-active {
  opacity: 1;
  border-color: rgba(0,0,0,.18);
}
.cm-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: .35rem;
  pointer-events: none;
}
@media (max-width: 480px) {
  .cm-product-thumb { width: 46px; height: 46px; padding: 1px; }
  .cm-product-thumbs { gap: .3rem; margin-top: .5rem; }
}

/* cm-decor-hide-mobile — Webflow product-page decorative cubes overlap the
   main image once .product-page-image-wrapper goes full-width (<=991px).
   Ornamental; hidden on phones/tablets per product owner. */
@media screen and (max-width: 991px) {
  .product-page-image-wrapper .image-wrapper.cube.product-page-01,
  .product-page-image-wrapper .image-wrapper.cube.product-page-02 {
    display: none !important;
  }
}