/* ==========================================================================
   Smart Miswak — Components
   Logical properties throughout (RTL Arabic default, FR mirrors free)
   ========================================================================== */

/* ---------- Buttons — clay is the only CTA color ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 15px 32px;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform .2s var(--ease-out-quart), background-color .2s var(--ease-out-quart), color .2s var(--ease-out-quart), border-color .2s var(--ease-out-quart), opacity .2s var(--ease-out-quart);
  white-space: nowrap;
  min-width: 0;
}
.btn-chevron{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sage-700);
  font-weight: 600;
  font-size: 0.95rem;
}
.btn-chevron:hover{ text-decoration: underline; text-underline-offset: 4px; }
html[dir="rtl"] .btn-chevron svg{ transform: scaleX(-1); }
.btn-primary{ background: var(--clay); color: var(--paper); }
.btn-primary:hover{ background: var(--clay-700); }
.btn-secondary{ background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-secondary:hover{ background: var(--ink); color: var(--paper); }
.btn-on-dark{ background: var(--clay); color: var(--paper); }
.btn-ghost{ background: transparent; color: var(--sage-700); padding-inline: 2px; text-underline-offset: 5px; }
.btn-ghost:hover{ text-decoration: underline; }
.btn-block{ width: 100%; }
.btn:disabled{ opacity: .5; cursor: not-allowed; }
.btn:active{ transform: scale(0.98); }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(97% 0.012 85 / 0.9);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--color-border);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-4);
}
.nav-logo{ display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; flex-shrink: 0; }
.nav-middle{ position: relative; flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-links{ display: flex; gap: var(--space-6); font-size: 0.95rem; font-weight: 500; transition: opacity .25s var(--ease-out-quart); }
.nav.has-buybar .nav-links{ opacity: 0; pointer-events: none; }
.nav-links a{ opacity: .8; transition: opacity .2s var(--ease-out-quart); position: relative; }
.nav-links a:hover{ opacity: 1; }
.nav-utility{ display: flex; align-items: center; gap: var(--space-4); }
.nav-icon-btn{ position: relative; display: inline-flex; padding: var(--space-2); font-size: 1.1rem; }
.cart-count{
  position: absolute;
  top: 0; inset-inline-end: 0;
  background: var(--clay);
  color: var(--paper);
  font-size: 0.65rem;
  min-width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.cart-count[hidden]{ display: none; }
.btn[hidden]{ display: none; }
.lang-switch{ display: flex; gap: var(--space-1); font-size: 0.78rem; font-weight: 600; border: 1px solid var(--color-border); border-radius: 20px; padding: 3px; }
.lang-switch button{ padding: 5px 12px; border-radius: 20px; opacity: .55; transition: all .2s var(--ease-out-quart); }
.lang-switch button.active{ opacity: 1; background: var(--ink); color: var(--paper); }
.nav-mobile-toggle{ display: none; font-size: 1.3rem; }

/* ---------- Nav buy-bar — Apple's condensed "you're already looking at
   this product" bar that swaps in for the nav links once you've scrolled
   past the main add-to-cart. Product pages only. ---------- */
.nav-buybar{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .3s var(--ease-out-quart), transform .3s var(--ease-out-quart);
}
.nav-buybar.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
.nav-buybar-name{ font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.nav-buybar-price{ color: var(--color-text-muted); font-size: 0.9rem; white-space: nowrap; }
.nav-buybar .btn{ padding: 9px 22px; font-size: 0.85rem; }
@media (max-width: 720px){ .nav-buybar-name{ display: none; } }

@media (max-width: 860px){
  .nav-links{ display: none; }
  .nav-mobile-toggle{ display: inline-flex; }
  /* The condensed top buy-bar doesn't have room to fit price + button next
     to the logo and utility icons at this width — its content overflows
     onto them. The sticky bottom add-to-cart bar (below) takes over the
     same job on these widths instead. */
  .nav-buybar{ display: none; }
}

/* ---------- Hero — asymmetric, not a 50/50 split ---------- */
.hero{ padding-block: var(--space-8) var(--space-9); overflow: hidden; }
.hero-grid{
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-6);
  align-items: center;
}
.hero-grid > *{ min-width: 0; }
.hero-copy{ padding-block: var(--space-5); }
.hero-copy .eyebrow{ display: block; margin-bottom: var(--space-3); }
.hero-copy h1{ margin-bottom: var(--space-5); }
.hero-copy p{ font-size: 1.1rem; }
.hero-cta{ display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.hero-visual{
  aspect-ratio: 4/5;
  position: relative;
  transform: rotate(-2deg) translateX(var(--hero-visual-shift, 6%));
}
html[dir="rtl"] .hero-visual{ --hero-visual-shift: -6%; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order: -1; transform: none; aspect-ratio: 16/10; }
}

/* ---------- Color panel — the photography stand-in ----------
   No illustrated icons, no fake floating-product renders. Until real
   photography exists, each panel honestly shows the product's actual
   colourway as a tonal swatch (the way a fashion site shows fabric colour
   before shoot assets land) — one confident block of color, tagged, not
   a decorative graphic pretending to be something it isn't. */
.color-panel{
  width: 100%;
  height: 100%;
  min-height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(155deg,
    color-mix(in oklch, var(--panel-color, var(--stone)) 100%, white 20%),
    color-mix(in oklch, var(--panel-color, var(--stone)) 100%, black 10%));
  animation: panel-fade-in .4s var(--ease-out-quart);
}
@keyframes panel-fade-in{ from{ opacity: 0; } to{ opacity: 1; } }

.product-photo-wrap{
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-2);
  animation: panel-fade-in .4s var(--ease-out-quart);
}
.product-photo{ width: 100%; height: 100%; object-fit: cover; display: block; }

.color-panel-tag{
  margin: var(--space-3);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}
html[dir="rtl"] .color-panel-tag{ letter-spacing: 0.01em; text-transform: none; }

/* ---------- Section headings ---------- */
.section-head{ max-width: 640px; margin-block-end: var(--space-7); }
.section-head.center{ text-align: center; margin-inline: auto; }

/* ---------- Editorial list — replaces icon-card feature grids ---------- */
.editorial-list{ border-block-start: 1px solid var(--color-border); }
.editorial-row{
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-block-end: 1px solid var(--color-border);
}
.editorial-row-head{ display: flex; align-items: baseline; gap: var(--space-4); }
.editorial-index{ font-family: var(--font-display); font-size: 1.1rem; color: var(--sage-500); }
.editorial-row-head h3{ margin: 0; }
.editorial-row p{ margin: 0; color: var(--color-text-muted); }
@media (max-width: 760px){
  .editorial-row{ grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ---------- Flagship / Ionic feature section — full Committed-green moment ---------- */
/* The flagship box already reads as a strong visual break on its own —
   the full section padding stacked on both sides of it (its wrapping
   section's own padding, plus the next section's) left an oversized dead
   gap of cream space between the green box and whatever follows. */
section:has(.flagship){ padding-block-end: var(--space-6); }
.flagship{ background: linear-gradient(175deg, var(--sage-900), var(--sage-700)); color: var(--text-on-dark); border-radius: var(--radius-lg); }
.flagship .container{ padding-block: var(--space-8); }
.flagship-grid{ display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-7); align-items: center; }
.flagship-grid > *{ min-width: 0; }
.flagship .eyebrow{ color: var(--sage-300); }
.flagship h2{ color: var(--text-on-dark); }
.flagship p{ color: var(--text-on-dark-muted); }
.flagship-benefits{ margin: var(--space-5) 0; display: grid; gap: var(--space-3); }
.flagship-benefits li{ display: flex; gap: var(--space-3); font-size: 0.98rem; color: var(--text-on-dark); border-block-start: 1px solid oklch(96% 0.012 85 / 0.14); padding-block-start: var(--space-3); }
.flagship-benefits li:first-child{ border-block-start: none; padding-block-start: 0; }
.price-row{ display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-5) 0; }
.price{ font-family: var(--font-display); font-size: 1.7rem; }
.price-note{ font-size: 0.8rem; color: var(--color-text-muted); }
.flagship .price-note{ color: var(--text-on-dark-muted); }
@media (max-width: 860px){ .flagship-grid{ grid-template-columns: 1fr; } }

/* ---------- Color / variant swatches ---------- */
.swatch-row{ display: flex; gap: var(--space-3); margin-block: var(--space-4); flex-wrap: wrap; }
.swatch{ width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px oklch(20% 0.02 130 / 0.12); }
.swatch[aria-checked="true"], .swatch-item[aria-checked="true"] .swatch{ border-color: var(--sage-700); }
.swatch[data-color="pink"]{ background: #E8C7C2; }
.swatch[data-color="sky-blue"]{ background: #BFD6DE; }
.swatch[data-color="white"]{ background: #F3F1EA; }
.swatch[data-color="grey"]{ background: #C7C4BA; }
.swatch[data-color="green"]{ background: #A9B896; }
.swatch[data-color="black"]{ background: #3a3a35; }
.swatch[data-color="aqua"]{ background: #B7D8D3; }
.swatch[data-color="yellow"]{ background: #E7D8A0; }
.swatch.is-oos, .swatch-item.is-oos .swatch{ opacity: .3; cursor: not-allowed; }
.swatch.is-oos::after, .swatch-item.is-oos .swatch::after{
  content: "";
  position: absolute; inset: -2px;
  background: linear-gradient(to top right, transparent 47%, oklch(20% 0.02 130 / .5) 49%, oklch(20% 0.02 130 / .5) 51%, transparent 53%);
  border-radius: 50%;
}

/* ---------- Swatch grid — swatch + name label beneath, Apple colornav style ---------- */
.swatch-grid{ display: flex; gap: var(--space-4); flex-wrap: wrap; margin-block: var(--space-4); }
.swatch-item{ display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; background: none; border: none; padding: 0; }
.swatch-item .swatch{ width: 44px; height: 44px; }
.swatch-item-label{ font-size: 0.74rem; color: var(--color-text-muted); transition: color .15s var(--ease-out-quart), font-weight .15s; }
.swatch-item[aria-checked="true"] .swatch-item-label{ color: var(--ink); font-weight: 700; }
.swatch-item.is-oos{ cursor: not-allowed; }
.swatch-item.is-oos .swatch-item-label{ opacity: .4; text-decoration: line-through; }

/* ---------- Decision support — "need help choosing?" (inline, always expanded, sits under the buy button) ---------- */
.pdp-compare-static{
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-block: var(--space-5);
  background: var(--paper);
}
.decision-link-title{ font-weight: 700; font-size: 0.88rem; display: block; }
.decision-link-desc{ font-size: 0.78rem; color: var(--color-text-muted); }
.pdp-compare-block{ padding-block-start: var(--space-2); }
.pdp-compare-block h5{ font-size: 0.78rem; font-weight: 700; margin-block: var(--space-4) var(--space-3); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
html[dir="rtl"] .pdp-compare-block h5{ text-transform: none; letter-spacing: 0.01em; }
.pdp-compare-block h5:first-child{ margin-block-start: 0; }
.pdp-compare-scroll{ overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.pdp-compare-table{ width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.pdp-compare-table th, .pdp-compare-table td{ padding: 9px 11px; border-block-end: 1px solid var(--hairline); text-align: start; white-space: nowrap; }
.pdp-compare-table th{ font-weight: 700; background: var(--paper-2); }
.pdp-compare-table td:first-child, .pdp-compare-table th:first-child{ position: sticky; inset-inline-start: 0; background: var(--paper); font-weight: 600; white-space: normal; min-width: 108px; }
.pdp-compare-table th:first-child{ background: var(--paper-2); }
.pdp-compare-table tr:last-child td{ border-block-end: none; }
.pdp-compare-table td.is-current, .pdp-compare-table th.is-current{ background: color-mix(in oklch, var(--sage-500) 15%, var(--paper) 85%); color: var(--sage-700); font-weight: 700; }

/* ---------- Guarantee strip ---------- */
.guarantee-strip{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-block-start: var(--space-3);
}
.guarantee-strip svg{ color: var(--sage-700); flex-shrink: 0; }

/* ---------- HVCO email capture ---------- */
.hvco{
  background: var(--paper-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.hvco-form{ display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hvco-form input[type=email]{
  flex: 1;
  min-width: 220px;
  padding: 13px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 0.92rem;
}
.hvco-message{ font-size: 0.85rem; color: var(--sage-700); }

/* ---------- Trust bar — replaces the Visa/Mastercard/Apple Pay row this
   store doesn't need (COD only). Same visual slot ecommerce sites reserve
   for payment logos, filled with our actual trust signals instead. ---------- */
.trust-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-block: var(--space-4);
}
.trust-bar-item{ display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; }
.trust-bar-item svg{ color: var(--sage-700); flex-shrink: 0; }
.trust-bar.on-dark{ border: none; }
.trust-bar.on-dark .trust-bar-item{ color: var(--text-on-dark-muted); }
.trust-bar.on-dark .trust-bar-item svg{ color: var(--sage-300); }
.trust-bar.bordered{ border-block: 1px solid var(--color-border); }
.pdp-trust-bar{ justify-content: flex-start; gap: var(--space-4) var(--space-5); padding-block: var(--space-4) 0; }

/* ---------- COD badges / notices ---------- */
.cod-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.88rem;
}
.cod-badge strong{ font-weight: 700; color: var(--sage-700); }
.gift-badge{ width: 100%; background: color-mix(in oklch, var(--sage-500) 8%, var(--paper) 92%); align-items: flex-start; }
.gift-badge-icon{ font-size: 1.1rem; line-height: 1; }
.cod-note{ font-size: 0.8rem; color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------- Product shelf — the one legitimate card grid ---------- */
.product-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.product-card{
  background: var(--paper-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s var(--ease-out-quart), transform .25s var(--ease-out-quart);
}
.product-card:hover{ box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.product-card .color-panel, .product-card .product-photo-wrap{ aspect-ratio: 1/1; border-radius: 0; }
.product-card-body{ padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-card-name{ font-family: var(--font-display); font-size: 1.15rem; }
.product-card-desc{ font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.product-card-footer{ margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; padding-block-start: var(--space-2); }
.product-card-prices{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.product-card-price{ font-weight: 700; color: var(--sage-700); white-space: nowrap; }
.product-card-price-compare{ font-size: 0.85rem; font-weight: 500; color: var(--color-text-muted); text-decoration: line-through; white-space: nowrap; }
.product-card-media-wrap{ position: relative; }
@media (max-width: 960px){ .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .product-grid{ grid-template-columns: 1fr; } }

/* ---------- Promise band — one line, repeated CTA ---------- */
.promise-band{
  padding-block: var(--space-6);
  border-block: 1px solid var(--color-border);
}
.promise-band .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.promise-line{ font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 1.2vw + 0.8rem, 1.6rem); margin: 0; }

/* ---------- COD / delivery reassurance ---------- */
.reassure-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.reassure-item{ display: flex; align-items: center; gap: var(--space-3); }
.reassure-item svg{ color: var(--sage-700); flex-shrink: 0; }
.reassure-item p{ margin: 0; font-size: 0.92rem; font-weight: 600; }
@media (max-width: 760px){ .reassure-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .reassure-grid{ grid-template-columns: 1fr; } }

/* ---------- Final CTA ---------- */
.final-cta{ text-align: center; }
.final-cta h2{ margin-block-end: var(--space-5); }

/* ---------- Comparison grid — product-card columns, Apple "compare" pattern ----------
   Each product gets its own column (media + name + price up top, like Apple's
   dd-compare-grid), not a data table — reads as a product lineup, not a spec
   sheet, which fits since we don't have deep specs to fill table rows with. */
.compare-grid{
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block-end: var(--space-2);
  margin-inline: calc(var(--space-5) * -1);
  padding-inline: var(--space-5);
}
.compare-card{
  flex: 0 0 240px;
  scroll-snap-align: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
}
.compare-card.is-flagship{ border-color: var(--sage-500); border-width: 2px; }
.compare-card-media{ aspect-ratio: 1/1; }
.compare-card-body{ padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.compare-card-role{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage-700); }
html[dir="rtl"] .compare-card-role{ letter-spacing: 0.01em; text-transform: none; }
.compare-card-name{ font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.compare-card-desc{ font-size: 0.85rem; color: var(--color-text-muted); margin: 0; flex: 1; }
.compare-card-prices{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.compare-card-price{ font-weight: 700; color: var(--ink); font-size: 0.95rem; white-space: nowrap; }
.compare-card-price-compare{ font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); text-decoration: line-through; white-space: nowrap; }
.compare-card-link{ font-size: 0.82rem; font-weight: 600; color: var(--sage-700); }
.compare-card-link:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bundle / upsell ---------- */
.bundle-card{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.bundle-card > *{ min-width: 0; }
@media (max-width: 720px){ .bundle-card{ grid-template-columns: 1fr; } }

/* ---------- FAQ / accordion ---------- */
.accordion-item{ border-block-end: 1px solid var(--color-border); }
.accordion-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-size: 1.02rem;
  font-weight: 600;
  text-align: start;
}
.accordion-trigger .plus{ transition: transform .3s var(--ease-out-expo); font-size: 1.3rem; color: var(--sage-500); flex-shrink: 0; }
.accordion-trigger[aria-expanded="true"] .plus{ transform: rotate(45deg); }
.accordion-panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out-expo); }
.accordion-trigger[aria-expanded="true"] + .accordion-panel{ grid-template-rows: 1fr; }
.accordion-panel > div{ overflow: hidden; }
.accordion-panel p{ padding-block-end: var(--space-5); color: var(--color-text-muted); font-size: 0.94rem; max-width: 60ch; margin: 0; }

/* ---------- How it works ---------- */
.steps-row{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.step{ text-align: center; }
.step-num{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--sage-700);
  color: var(--text-on-dark);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-3);
  font-family: var(--font-display);
  font-size: 0.9rem;
}
.step p{ font-size: 0.85rem; margin: 0; }
@media (max-width: 720px){ .steps-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Testimonials ---------- */
.proof-pending{
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--sage-900);
  color: var(--text-on-dark-muted);
  padding-block: var(--space-8) var(--space-6);
  margin-block-start: var(--space-9);
}
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer-col h4{ color: var(--text-on-dark); font-size: 0.85rem; letter-spacing: 0.02em; margin-block-end: var(--space-4); font-family: var(--font-body); font-weight: 700; }
.footer-col li{ margin-block-end: var(--space-2); font-size: 0.9rem; }
.footer-col a:hover{ color: var(--text-on-dark); text-decoration: underline; }
.footer-bottom{
  border-block-start: 1px solid oklch(96% 0.012 85 / .14);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.78rem;
  opacity: .7;
}
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- Cart drawer ---------- */
.cart-drawer-overlay{
  position: fixed; inset: 0;
  background: oklch(20% 0.02 130 / 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out-quart);
  z-index: 200;
}
.cart-drawer-overlay.is-open{ opacity: 1; pointer-events: auto; }
.cart-drawer{
  position: fixed; top: 0; inset-inline-end: 0; bottom: 0;
  width: min(440px, 100vw);
  background: var(--paper);
  transform: translateX(100%);
  transition: transform .35s var(--ease-out-expo);
  z-index: 201;
  display: flex;
  flex-direction: column;
}
html[dir="rtl"] .cart-drawer{ transform: translateX(-100%); }
.cart-drawer.is-open{ transform: translateX(0); }
html[dir="rtl"] .cart-drawer.is-open{ transform: translateX(0); }
.cart-drawer-head{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-block-end: 1px solid var(--color-border); }
.cart-drawer-items{ flex: 1; overflow-y: auto; padding: var(--space-5); display: grid; gap: var(--space-4); }
.cart-upsell{ padding: var(--space-4); background: var(--paper-2); border-radius: var(--radius-md); }
.cart-upsell-label{ display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage-700); margin-block-end: var(--space-2); }
html[dir="rtl"] .cart-upsell-label{ letter-spacing: 0.01em; text-transform: none; }
.cart-upsell-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 0.88rem; }
.cart-line{ display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-3); align-items: center; }
.cart-line-media{ width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-2); }
.cart-line-photo{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line-name{ font-size: 0.92rem; font-weight: 700; }
.cart-line-variant{ font-size: 0.78rem; color: var(--color-text-muted); }
.cart-qty{ display: flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); }
.cart-line-nudge{ font-size: 0.76rem; color: var(--clay-700); margin-block-start: var(--space-2); font-weight: 600; }
.cart-qty button{ width: 22px; height: 22px; border: 1px solid var(--color-border); border-radius: 4px; }
.cart-empty{ text-align: center; color: var(--color-text-muted); padding-block: var(--space-8); padding-inline: var(--space-4); }
.cart-drawer-footer{ padding: var(--space-5); border-block-start: 1px solid var(--color-border); }
.cart-subtotal-row{ display: flex; justify-content: space-between; margin-block-end: var(--space-2); font-size: 0.9rem; color: var(--color-text-muted); }
.cart-delivery-row{ margin-block-end: var(--space-2); }
.cart-delivery-row .cart-line-nudge{ margin-block-start: 0; margin-block-end: var(--space-2); }
.cart-delivery-free{ color: var(--sage-700); font-weight: 700; }
.cart-total-row{ margin-block-end: var(--space-4); }
.cart-total-row-final{
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  border-block-start: 1px solid var(--hairline);
  padding-block-start: var(--space-3);
  margin-block-end: 0 !important;
}

/* ---------- Sticky mobile add to cart ---------- */
.sticky-atc{
  position: fixed; bottom: 0; inset-inline: 0;
  background: var(--paper);
  border-block-start: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  display: none;
  align-items: center;
  gap: var(--space-3);
  z-index: 90;
  box-shadow: 0 -6px 20px oklch(20% 0.02 130 / .08);
}
@media (max-width: 860px){
  .sticky-atc.is-visible{ display: flex; }
  body.has-sticky-atc{ padding-block-end: 76px; }
}
.sticky-atc-price{ font-weight: 700; white-space: nowrap; }

/* ---------- Forms ---------- */
.field{ margin-block-end: var(--space-4); }
.field label{ display: block; font-size: 0.85rem; margin-block-end: var(--space-2); font-weight: 600; }
.field input, .field select, .field textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.promo-status{ margin-block-start: var(--space-2); font-size: 0.8rem; font-weight: 600; }
.promo-status-ok{ color: var(--sage-700); }
.promo-status-error{ color: var(--red-ink, #b3413d); }

/* ---------- Toast ---------- */
.toast{
  position: fixed; bottom: var(--space-5); inset-inline-start: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: var(--paper);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out-quart), transform .25s var(--ease-out-quart);
  z-index: 300;
}
html[dir="rtl"] .toast{ transform: translateX(50%) translateY(10px); }
.toast.is-visible{ opacity: 1; transform: translateX(-50%) translateY(0); }
html[dir="rtl"] .toast.is-visible{ transform: translateX(50%) translateY(0); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size: 0.82rem; color: var(--color-text-muted); margin-block-end: var(--space-5); }
.breadcrumb a{ text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Narrow-viewport nav fit (placed last: wins same-specificity
   ties with the unconditional rules above it) ---------- */
@media (max-width: 400px){
  .nav-logo{ font-size: 1.05rem; }
  .lang-switch{ font-size: 0.7rem; }
  .lang-switch button{ padding: 4px 8px; }
  .nav{ gap: var(--space-2); }
  .nav-utility{ gap: var(--space-2); }
}