/* ── Tokens ────────────────────────────────────────────────── */

/* Colours are keyed to the logo: a white-on-black wordmark with a spring-cyan
   accent. The cyan is too light to read on white, so the light theme borrows a
   deepened version of it and the dark theme uses the logo's own. */

:root {
  color-scheme: light;

  --bg: #f7f8f9;
  --bg-grad: radial-gradient(1200px 400px at 50% -160px, #d9f6f1 0%, transparent 70%);
  --surface: #ffffff;
  --surface-2: #f2f4f6;
  --surface-3: #e7eaee;
  --text: #12161a;
  --text-muted: #5b646d;
  --text-subtle: #6b757e;
  --border: #e3e7eb;
  --border-strong: #cfd6dd;

  --accent: #07786a;
  --accent-hover: #065f55;
  --accent-soft: #dcf4f0;
  --accent-contrast: #ffffff;

  --green: #0f7a4f;
  --green-bg: #d8f3e6;
  --red: #c02626;
  --red-bg: #fde5e5;
  --stock-urgent: #b91c1c;
  --stock-urgent-contrast: #ffffff;
  --deal: #ad390d;
  --deal-bg: #fff0e4;
  --deal-solid: #b94010;
  --deal-contrast: #ffffff;
  --deal-border: #e7b08c;

  --wa: #25d366;
  --wa-dark: #1da851;

  --ring: rgba(7, 120, 106, .35);
  --ring-offset: var(--bg);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 22, 26, .05);
  --shadow: 0 4px 14px rgba(18, 22, 26, .07);
  --shadow-md: 0 10px 30px rgba(18, 22, 26, .10);
  --shadow-lg: 0 24px 70px rgba(18, 22, 26, .22);

  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0b0c;
  --bg-grad: radial-gradient(1200px 420px at 50% -180px, #0d3b36 0%, transparent 70%);
  --surface: #141517;
  --surface-2: #1b1d20;
  --surface-3: #25282c;
  --text: #f2f4f5;
  --text-muted: #9aa3ab;
  --text-subtle: #838c94;
  --border: #232629;
  --border-strong: #343a3f;

  --accent: #2bf5e0;
  --accent-hover: #6ffae9;
  --accent-soft: #0c2a27;
  --accent-contrast: #06231f;

  --green: #4ade80;
  --green-bg: #12301f;
  --red: #f87171;
  --red-bg: #331616;
  --stock-urgent: #f87171;
  --stock-urgent-contrast: #360c0c;
  --deal: #ffb781;
  --deal-bg: #352316;
  --deal-solid: #ffb781;
  --deal-contrast: #301608;
  --deal-border: #805131;

  --wa: #25d366;
  --wa-dark: #1da851;

  --ring: rgba(43, 245, 224, .45);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 6px 20px rgba(0, 0, 0, .45);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, .5);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .65);
}

/* ── Base ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-image: var(--bg-grad);
  background-repeat: no-repeat;
  background-attachment: fixed;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

body.modal-open { overflow: hidden; }

img { display: block; max-width: 100%; }
svg { display: block; }

a { color: inherit; text-decoration: none; }

button, input, select { font: inherit; color: inherit; }

/* Several components below set an explicit `display`, which would otherwise beat
   the UA's `[hidden] { display: none }` and leave hidden elements taking space. */
[hidden] { display: none !important; }

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

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

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

.skip-link {
  position: fixed; inset-inline-start: 50%;
  top: 0; transform: translate(-50%, -110%);
  z-index: 2000;
  padding: .6rem 1.1rem;
  background: var(--accent); color: var(--accent-contrast);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: .875rem; font-weight: 600;
  transition: transform .18s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; }

/* ── Buttons ──────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.1rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease);
}
.btn:active { transform: scale(.97); }

.btn-ghost {
  background: var(--surface); color: var(--text-muted);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

.btn-whatsapp, .btn-whatsapp-sm {
  background: var(--wa); color: #fff;
  box-shadow: 0 1px 2px rgba(16, 185, 90, .28);
}
.btn-whatsapp:hover, .btn-whatsapp-sm:hover {
  background: var(--wa-dark);
  box-shadow: 0 4px 14px rgba(16, 185, 90, .32);
}
.btn-whatsapp-sm { font-size: .82rem; padding: .5rem .9rem; }

.btn-whatsapp {
  width: 100%; padding: .8rem 1.2rem;
  font-weight: 700; font-size: .95rem;
}

.wa-icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.btn-whatsapp .wa-icon { width: 19px; height: 19px; }

.btn-add, .btn-cart {
  background: var(--accent); color: var(--accent-contrast);
}
.btn-add:hover, .btn-cart:hover { background: var(--accent-hover); }
.card__foot .btn-add, .modal-actions .btn-add {
  width: 100%; min-height: 44px; white-space: normal;
}
.cart-toggle { flex-shrink: 0; min-height: 38px; padding: .5rem .75rem; }
.cart-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cart-count { font-size: .75rem; font-variant-numeric: tabular-nums; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.icon-btn .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: none; }
html[data-theme="dark"] .icon-moon { display: block; }

/* ── Header ───────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* The wordmark sits INSIDE the logo's corner brackets, as in the footer lockup.
   The brackets are drawn with borders rather than the logo's exact chevron
   path: at header size the wordmark is a single ~5.8:1 line, and the logo's
   frame is 1.74:1, so the real path would have to be stretched flat. Fixed-size
   corners also stay put when the name changes length between languages. */
/* Shop names vary in length and this is a multi-tenant header, so the wordmark
   yields first: it ellipsises instead of pushing the nav off a narrow screen.
   The floor matters as much as the ellipsis — .brand-frame cannot shrink below
   its own padding, so a .brand allowed to reach zero width left the frame
   hanging out of it and sitting on top of the nav. */
.brand {
  position: relative;
  display: inline-flex; align-items: center;
  min-width: 4.5rem;
  font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--accent);
}
/* Shop names vary in length and this is a multi-tenant header, so the wordmark
   yields first: it ellipsises instead of pushing the nav off a narrow screen. */
.brand-frame {
  position: relative; display: inline-block;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .42rem .8rem;
}
.brand-frame::before, .brand-frame::after,
.brand::before, .brand::after {
  content: ""; position: absolute; width: 15px; height: 9px;
  border: 2px solid currentColor; pointer-events: none;
}
/* Top-left and bottom-right come off .brand-frame, the other two off .brand,
   since an element only has two pseudo-elements to spend. */
.brand-frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.brand-frame::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.brand::before { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.brand::after  { bottom: 0; left: 0; border-right: 0; border-top: 0; }

.header-nav { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* ── Products header ──────────────────────────────────────── */

/* The page is a catalogue, so the title is one row rather than a hero block:
   everything above the grid should be something the shopper can act on. */
.products {
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: 5rem;
}

.products-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.products-header h1 {
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.3;
}
.result-count { font-size: .875rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

.toolbar { display: flex; gap: .6rem; margin-bottom: .85rem; }

.search { position: relative; flex: 1; min-width: 0; }

.search-icon {
  position: absolute; inset-inline-start: .85rem; top: 50%;
  translate: 0 -50%;
  width: 17px; height: 17px; pointer-events: none;
  fill: none; stroke: var(--text-subtle); stroke-width: 1.9;
}

.search-input {
  width: 100%; height: 44px;
  padding: 0 2.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search-input::placeholder { color: var(--text-subtle); }
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.search-input::-webkit-search-cancel-button { display: none; }

.search-clear {
  position: absolute; inset-inline-end: .4rem; top: 50%; translate: 0 -50%;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%;
  color: var(--text-subtle); font-size: 1.3rem; line-height: 1;
  cursor: pointer;
}
.search-clear:hover { background: var(--surface-2); color: var(--text); }

.select-wrap { position: relative; display: inline-flex; }
.select {
  appearance: none; -webkit-appearance: none;
  height: 44px; padding-inline: .9rem 2.2rem;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500;
  cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.select:hover { border-color: var(--border-strong); }
.select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.select-chevron {
  position: absolute; inset-inline-end: .7rem; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; pointer-events: none;
  fill: none; stroke: var(--text-subtle); stroke-width: 2;
}

/* ── Chips ────────────────────────────────────────────────── */

.chips {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-bottom: .85rem;
  /* Once the row scrolls sideways on a phone, reaching the end must not also
     start scrolling the page behind it. */
  overscroll-behavior-inline: contain;
}

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 500; white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease),
              border-color .15s var(--ease), transform .1s var(--ease);
}
.chip:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 600;
}
.chip-count {
  font-size: .72rem; font-variant-numeric: tabular-nums;
  opacity: .65;
}

.stock-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1.25rem;
  padding: .4rem .8rem .4rem .5rem;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 500; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.stock-toggle:hover { background: var(--surface-2); color: var(--text); }
.stock-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong); border-radius: 6px;
  background: var(--surface);
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.stock-check svg { width: 13px; height: 13px; stroke: transparent; stroke-width: 3; }
.stock-toggle[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
  font-weight: 600;
}
.stock-toggle[aria-pressed="true"] .stock-check { background: var(--accent); border-color: var(--accent); }
.stock-toggle[aria-pressed="true"] .stock-check svg { stroke: var(--accent-contrast); }

/* ── Grid + card ──────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  --img-dim: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
  }
}

.card__open {
  display: block; width: 100%;
  background: none; border: 0; padding: 0;
  text-align: start; cursor: pointer; color: inherit;
}
.card__open::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: var(--radius);
}
.card__open:focus-visible { outline: none; }
.card__open:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }

.card__media {
  position: relative; display: block;
  aspect-ratio: 4 / 3; overflow: hidden;
  /* White in light mode so the many studio shots on white disappear into the
     tile instead of floating as grey rectangles. */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* contain, not cover: a cropped shot can hide the model name or cut the box in
   half, and the customer is trying to identify an exact part. */
.card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: .55rem;
  filter: var(--img-dim) brightness(var(--img-bright, 1));
  transition: transform .45s var(--ease);
}
@media (hover: hover) { .card:hover .card__media img { transform: scale(1.05); } }

.card__body { display: block; padding: .95rem 1rem .75rem; }

.card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .94rem; font-weight: 600; line-height: 1.4;
  margin-bottom: .45rem;
  /* Reserve both clamped lines so prices align across a row of cards whether a
     name wraps to one line or two. */
  min-height: 2.8em;
}

/* Keep last-unit urgency with the product name, not over the photo or mixed
   into the price. A separate line leaves long names readable on narrow cards. */
.card__heading {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .4rem; margin-bottom: .65rem;
}
.card__heading .card__title { min-height: 0; margin-bottom: 0; width: 100%; }
.card .card__heading .badge { position: static; max-width: 100%; }

.card__price {
  /* Flex rather than a margin so the struck-through original price keeps its gap
     from the new one in RTL too, where a margin-inline-end would land outside. */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem;
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card__price .sale {
  text-decoration: line-through; color: var(--text-subtle);
  font-weight: 500; font-size: .95rem;
}
.card__alt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem;
  font-size: .82rem; font-weight: 500; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: .2rem;
}

/* Real reductions get a warm accent, without changing normal-price products. */
.card--sale { border-color: var(--deal-border); }
@media (hover: hover) { .card--sale:hover { border-color: var(--deal); } }
.card--sale .card__body {
  background: linear-gradient(135deg, var(--deal-bg), var(--surface) 85%);
}
.card--sale .card__price { gap: .3rem .65rem; }
.card--sale .card__price .price-current { font-size: 1.55rem; font-weight: 800; line-height: 1.2; }
.sale { text-decoration-thickness: 1.5px; }
.card__alt .sale, .modal-price-alt .sale { color: var(--text-subtle); font-size: .8rem; }
.price-current, .sale { unicode-bidi: isolate; }
.sale-savings {
  display: block; width: fit-content; max-width: 100%;
  margin-top: .6rem; padding: .35rem .6rem;
  border-radius: 7px; background: var(--deal-bg); color: var(--deal);
  font-size: .8rem; font-weight: 700; line-height: 1.5;
}
.deal-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .35rem .6rem; border-radius: 7px;
  background: var(--deal-solid); color: var(--deal-contrast);
  font-size: .75rem; font-weight: 800; line-height: 1.4;
}
.card__media .deal-badge { position: absolute; top: .65rem; inset-inline-end: .65rem; z-index: 2; }

.card__foot { position: relative; z-index: 2; padding: 0 1rem 1rem; margin-top: auto; }

/* Sold items stay orderable — people still ask "do you have one?" — but the card
   recedes so in-stock items read first. */
.card[data-availability="out of stock"] { --img-dim: grayscale(.6) opacity(.85); }
.card[data-availability="out of stock"] .card__title { color: var(--text-muted); }

/* Most hardware photography is shot on white, which glares against a dark UI. */
html[data-theme="dark"] .card { --img-bright: .92; }

/* ── Badge ────────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center;
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  line-height: 1.5;
}
.badge[data-status="in stock"] { background: var(--green-bg); color: var(--green); }
.badge[data-status="out of stock"] { background: var(--red-bg); color: var(--red); }
.badge--low-stock[data-status="in stock"] { background: var(--stock-urgent); color: var(--stock-urgent-contrast); }

.card .badge { position: absolute; top: .65rem; inset-inline-start: .65rem; z-index: 2; }

/* ── Skeleton ─────────────────────────────────────────────── */

.skeleton {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.skeleton__media { aspect-ratio: 4 / 3; }
.skeleton__line { height: 12px; border-radius: 999px; }
.skeleton__body { padding: .95rem 1rem 1rem; display: grid; gap: .5rem; }

.skeleton__media, .skeleton__line {
  background-image: linear-gradient(90deg,
    var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton__line.w-70 { width: 70%; }
.skeleton__line.w-45 { width: 45%; height: 18px; }

@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* ── Status + empty states ────────────────────────────────── */

.status {
  font-size: .9rem; color: var(--text-muted);
  padding: 2rem 0;
  text-align: center;
}
.status:empty { display: none; }
.status.error { color: var(--red); }
.status .retry-btn {
  display: inline-block; margin-top: .6rem;
  font-size: .875rem; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: none; font-weight: 600; cursor: pointer;
}

.empty {
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  padding: clamp(2.5rem, 8vw, 4.5rem) 1rem;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.empty-icon {
  width: 40px; height: 40px;
  fill: none; stroke: var(--text-subtle); stroke-width: 1.6;
}
.empty-text { color: var(--text-muted); font-size: .95rem; max-width: 34ch; }

/* ── Modal ────────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.75rem, 3vw, 2rem);
}
.modal[aria-hidden="true"] { display: none; }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 8, 9, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in .2s var(--ease);
}

.modal-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 880px;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modal-in .28s var(--ease);
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
}

.modal-close {
  position: absolute; top: .75rem; inset-inline-end: .75rem; z-index: 3;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.modal-close:hover { background: var(--surface); color: var(--text); }
.modal-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.modal-gallery {
  display: flex; flex-direction: column;
  background: var(--surface-2);
  min-width: 0;
}
.modal-main { flex: 1; display: flex; min-height: 0; background: var(--surface); }
/* Contain, matching the cards: the modal is the one place a shopper reads the
   model number off a shot, so cropping it here costs more than it saves. */
.modal-main img { width: 100%; height: 100%; object-fit: contain; padding: .55rem; }

.modal-thumbs {
  display: flex; gap: .45rem; padding: .6rem;
  overflow-x: auto; scrollbar-width: thin;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.modal-thumbs img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 8px; border: 2px solid transparent;
  cursor: pointer; flex-shrink: 0;
  transition: border-color .15s var(--ease), opacity .15s var(--ease);
  opacity: .7;
}
.modal-thumbs img:hover { opacity: 1; }
.modal-thumbs img.active { border-color: var(--accent); opacity: 1; }

.modal-info {
  display: flex; flex-direction: column; align-items: stretch; gap: .5rem;
  padding: 2rem 1.75rem 1.75rem;
  min-width: 0;
}
.badge-static { align-self: flex-start; }
.modal-badges { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.modal-panel--sale .spec:first-child {
  background: var(--deal-bg); border: 1px solid var(--deal-border);
  border-radius: var(--radius-sm); padding: .9rem;
}
.modal-name { font-size: clamp(1.15rem, 2.6vw, 1.4rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }

/* Label / value rows, the way an invoice or spec sheet reads. */
.specs { display: flex; flex-direction: column; margin-top: .25rem; }

.spec {
  display: grid;
  grid-template-columns: minmax(5.5rem, 30%) 1fr;
  gap: .25rem 1rem;
  align-items: baseline;
  padding: .7rem 0;
  border-top: 1px solid var(--border);
}
.spec:first-child { padding-top: .85rem; }

.spec__label {
  color: var(--text-subtle);
  font-size: .8rem; font-weight: 500;
}
.spec__value { min-width: 0; font-size: .92rem; }
.spec__value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; color: var(--text-muted);
  overflow-wrap: anywhere;
}
.spec__note { display: block; font-size: .72rem; color: var(--text-subtle); margin-top: .3rem; }

.modal-desc-block { border-top: 1px solid var(--border); margin-top: .35rem; padding-top: .9rem; }
.modal-subhead { font-size: .8rem; font-weight: 600; color: var(--text-subtle); margin-bottom: .4rem; }

.modal-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .65rem;
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.modal-price .sale {
  font-size: 1.05rem; font-weight: 500;
  color: var(--text-subtle); text-decoration: line-through;
}
.modal-price-alt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem;
  font-size: .88rem; font-weight: 500; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: .2rem;
}
.modal-panel--sale .modal-price .price-current { font-size: 1.85rem; line-height: 1.2; }
.modal-desc {
  color: var(--text-muted); font-size: .92rem; line-height: 1.65;
  white-space: pre-line; overflow-wrap: anywhere;
}
.modal-actions {
  display: flex; flex-direction: column; gap: .5rem;
  width: 100%; margin-top: auto; padding-top: 1rem;
}
.modal-actions .btn-whatsapp { width: 100%; }

/* ── Footer ───────────────────────────────────────────────── */

.site-footer {
  margin-top: auto;
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: .85rem;
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; }
.footer-brand { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* The full lockup, including the small "STORE" line, needs real width to read —
   this is why it lives in the footer and not in the header. */
.footer-logo { width: 148px; height: auto; flex-shrink: 0; }
.footer-inner .link { color: var(--accent); font-weight: 600; }
.footer-inner .link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Floating WhatsApp button (mobile) ────────────────────── */

.fab {
  position: fixed; z-index: 90;
  inset-inline-end: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: none; align-items: center; gap: .5rem;
  padding: .8rem 1.2rem;
  background: var(--wa); color: #fff;
  border-radius: var(--radius-pill);
  font-size: .88rem; font-weight: 700;
  box-shadow: 0 8px 28px rgba(16, 185, 90, .4);
  opacity: 0; visibility: hidden;
  translate: 0 12px;
  transition: opacity .22s var(--ease), translate .22s var(--ease),
              visibility .22s, background-color .15s var(--ease);
}
.fab:hover { background: var(--wa-dark); }
.fab .wa-icon { width: 19px; height: 19px; }
.fab.show { opacity: 1; visibility: visible; translate: 0 0; }
body.modal-open .fab { opacity: 0; visibility: hidden; }

/* The call button stacks directly above the WhatsApp one rather than sharing a
   wrapper, so it inherits .fab's scroll-reveal and mobile-only display for free.
   3.7rem clears the WhatsApp pill's own height plus the gap. */
.fab-call {
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.7rem);
  background: var(--accent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
.fab-call:hover { background: var(--accent); filter: brightness(1.08); }
.fab .call-icon { width: 18px; height: 18px; }

/* Call buttons read as part of the brand rather than as a second WhatsApp green,
   so they use the accent colour and a neutral shadow. */
.btn-call {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--accent); color: #fff;
  border: 0; cursor: pointer;
  text-decoration: none;
}
.btn-call:hover { filter: brightness(1.08); }
/* Matches .btn-whatsapp-sm's metrics without inheriting its green. */
.btn-call-sm { font-size: .82rem; padding: .5rem .9rem; }
/* The modal's WhatsApp button is full width, so the call button matches it
   rather than sitting small under a wide sibling. */
.modal-actions .btn-call { width: 100%; }
.call-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; flex-shrink: 0; }
.footer-contact { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.link-call { display: inline-flex; align-items: center; gap: .35rem; }

/* ── RTL ──────────────────────────────────────────────────── */

html[dir="rtl"] .card__open { text-align: right; }

/* ── Cart workflow (the catalogue/card design above is unchanged) ── */

body:has(.cart-dialog[open]) { overflow: hidden; }
.cart-dialog {
  width: min(520px, calc(100% - 24px)); max-width: none; max-height: 90dvh;
  margin: auto; padding: 24px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.cart-dialog::backdrop { background: rgba(6, 8, 9, .65); backdrop-filter: blur(6px); }
.cart-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cart-header h2 { font-size: 1.3rem; }
.cart-header .icon-btn { font-size: 1.4rem; }
.cart-line { padding-block: 18px; border-top: 1px solid var(--border); }
.cart-line h3 { font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.line-price { font-weight: 600; margin-top: 6px; }
.line-unavailable { color: var(--red); font-size: .85rem; margin-top: 6px; }
.quantity-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.quantity-controls .icon-btn, .quantity-controls input { width: 44px; height: 44px; }
.quantity-controls input { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); text-align: center; font-size: 16px; }
.quantity-controls .remove-item { margin-inline-start: auto; min-height: 44px; white-space: normal; }
.cart-subheading { padding-top: 18px; border-top: 1px solid var(--border); font-size: .9rem; }
.cart-total { font-weight: 700; font-size: 1.4rem; margin-top: 8px; }
.shopping-note { font-size: .85rem; line-height: 1.7; color: var(--text-muted); margin-block: 12px; }
.shopping-feedback { font-size: .85rem; line-height: 1.7; color: var(--accent); }
.shopping-feedback:empty { display: none; }
.cart-dialog #checkout { margin-block: 12px; min-height: 44px; white-space: normal; }
.cart-dialog #continueShopping { margin-top: 12px; min-height: 44px; width: 100%; }
.cart-dialog [aria-disabled="true"], .cart-dialog :disabled, #modalAdd:disabled { opacity: .5; cursor: not-allowed; }
.shopping-toast {
  position: fixed; z-index: 1100; bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); max-width: min(90vw, 480px);
  padding: 12px 20px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; text-align: center; transition: opacity .2s var(--ease);
}
.shopping-toast.show { opacity: 1; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
  /* The panel is height-capped and the page behind it is locked, so the panel
     itself has to be the scroll container. Without this, a long description
     pushes the WhatsApp button past 90dvh and there is no way to scroll to it. */
  .modal-panel {
    grid-template-columns: 1fr;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .modal-gallery { max-height: 42dvh; }
  .modal-main { aspect-ratio: 4 / 3; }
  .modal-info { padding: 1.25rem 1.1rem 1.5rem; gap: .4rem; }
  /* Sticky works now that the panel scrolls — the order button stays reachable
     however far the description runs. */
  .modal-actions {
    position: sticky; bottom: 0;
    padding-top: .75rem;
    background: linear-gradient(to top, var(--surface) 72%, transparent);
  }
}

@media (max-width: 720px) {
  .fab { display: inline-flex; }
  /* Two stacked FABs reach roughly 7.5rem up the screen. At the desktop 5rem the
     last row of cards sat permanently underneath them. */
  .products { padding-bottom: 9rem; }
  /* iOS Safari zooms the viewport when a focused field is under 16px, and only
     zooms back out on a double-tap — so tapping search used to leave the page
     magnified. Pin both fields to 16px. */
  .search-input, .select { font-size: 16px; }
  /* Fixed backgrounds are repainted every scroll frame on iOS, which reads as
     lag on a long catalogue. The gradient is cheap enough to attach normally. */
  body { background-attachment: scroll; }
  /* Wrapping chips pushed the first product down by a whole extra row on a
     phone, so they scroll sideways instead, bleeding to the screen edges. */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .85rem; }
  .card__body { padding: .75rem .8rem .6rem; }
  /* Two-column phone cards cannot fit long English stock + discount badges on
     one row. Keep both readable rather than shrinking their text. */
  .card--sale .badge { top: auto; bottom: .55rem; }
  .card__title { font-size: .875rem; -webkit-line-clamp: 2; }
  .card__price { font-size: 1rem; }
  .card__foot { padding: 0 .8rem .8rem; }
  .btn-whatsapp { padding: .7rem 1rem; font-size: .875rem; }
}

/* Pointer, not width: a small desktop window gets mouse-sized controls, a phone
   gets finger-sized ones. Chips and the stock toggle were ~32px tall, under the
   44px floor, which mis-taps rather than scrolls. */
@media (pointer: coarse) {
  .chip, .stock-toggle { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .modal-close { width: 44px; height: 44px; }
}

@media (max-width: 520px) {
  .toolbar { flex-wrap: wrap; }
  .search { flex-basis: 100%; }
  .select-wrap { flex: 1; }
  .select { width: 100%; }
  .header-nav { gap: .4rem; }
  /* Both order buttons go icon-only here. The nav does not shrink, so whatever
     these two keep costs the wordmark directly — at 320px "اتصل بنا" alone was
     93px of a 305px row. */
  .btn-whatsapp-sm span, .btn-call-sm span { display: none; }
  .btn-whatsapp-sm, .btn-call-sm { padding: .5rem .65rem; }
  .btn-whatsapp-sm .wa-icon, .btn-call-sm .call-icon { width: 18px; height: 18px; }
  #langToggle { padding-inline: .7rem; }
  .cart-label { display: none; }
  .cart-toggle { padding-inline: .6rem; }
  .brand { font-size: 1.08rem; }
}

/* At the narrowest phones the wordmark still cannot hold its full width with
   four controls beside it, and the wordmark is the one thing that identifies
   the shop. The call button is the one to lose: the floating button and the
   product modal both still offer the number. */
@media (max-width: 360px) {
  #headerCall { display: none; }
  /* Reclaim the last few pixels from the frame rather than the type — the
     wordmark is already at its smallest legible size here. */
  .brand-frame { padding-inline: .6rem; }
}

@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr; }
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover { transform: none; }
  .card:hover .card__media img { transform: none; }
}

@media print {
  .site-header, .fab, .toolbar, .chips, .stock-toggle, .modal, .cart-dialog, .shopping-toast { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; }
}
/* ── Legal pages ─────────────────────────────────────────────── */

.legal-body {
  max-width: 72ch;
  padding: 2.5rem 1.5rem 4rem;
  line-height: 1.7;
}
.legal-body h1 { font-size: 2rem; letter-spacing: -.02em; margin: 0 0 .35rem; }
.legal-body h2 { font-size: 1.05rem; margin: 2.2rem 0 .6rem; letter-spacing: -.01em; }
.legal-body p, .legal-body li { color: var(--text-muted); font-size: .95rem; }
.legal-body ul { padding-inline-start: 1.2rem; margin: .6rem 0; }
.legal-body li { margin-bottom: .5rem; }
.legal-body strong { color: var(--text); }
.legal-body a { color: var(--accent); font-weight: 600; }
.legal-updated { font-size: .85rem; color: var(--text-subtle); margin: 0 0 1rem; }