/* Components — v1.5. Mobile 390px is the design target.
   Quiet luxury: whitespace, photography, one authoritative header system
   (defined at the end of this file — nothing above may style the header). */

/* ---------- Drawer ---------- */
.m-drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: min(330px, 86vw); z-index: 60;
  background: var(--m-bg);
  box-shadow: var(--m-shadow);
  display: flex; flex-direction: column;
  overflow-y: auto;
  /* Closed by default. Never rely on [hidden]: any display rule beats it. */
  --m-drawer-x: 100%; /* RTL: parked off the RIGHT edge (v0.4 had the sign inverted — it slid in from the left) */
  transform: translateX(var(--m-drawer-x));
  visibility: hidden;
  transition:
    transform var(--m-t-base) var(--m-ease-exit),
    visibility 0s var(--m-t-base);
}
html[dir="ltr"] .m-drawer { --m-drawer-x: -100%; }
@media (min-width: 800px) { .m-drawer { width: 360px; } }
.m-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--m-t-base) var(--m-ease),
    visibility 0s;
}
.m-drawer__close {
  align-self: flex-end;
  width: var(--m-touch); height: var(--m-touch);
  margin: var(--m-sp-2);
  background: none; border: 0; font-size: 26px; line-height: 1;
  border-radius: var(--m-r-s);
}
.m-drawer__list { list-style: none; margin: 0; padding: 0 var(--m-sp-5) var(--m-sp-6); }
.m-drawer__list a {
  display: block; padding: 14px 0;
  text-decoration: none; font-size: var(--m-fs-m);
  border-bottom: 1px solid var(--m-line);
}
.m-drawer__list li:first-child a { font-family: var(--m-font-display); font-weight: 700; color: var(--m-primary); }
.m-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(var(--m-text-rgb), .42);
  opacity: 0; visibility: hidden;
  transition: opacity var(--m-t-base) var(--m-ease), visibility 0s var(--m-t-base);
}
.m-scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--m-t-base) var(--m-ease), visibility 0s; }

/* ---------- Buttons ---------- */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--m-touch);
  padding: 11px 26px;
  border-radius: var(--m-r-s);
  border: 1px solid transparent;
  font-weight: 700; font-size: var(--m-fs-base);
  text-decoration: none; text-align: center;
  transition: transform var(--m-t-fast) var(--m-ease), box-shadow var(--m-t-fast) var(--m-ease), background-color var(--m-t-fast) var(--m-ease);
}
.m-btn:active { transform: scale(.975); }
.m-btn--primary { background: var(--m-primary); color: var(--m-on-primary); box-shadow: var(--m-shadow-s); }
.m-btn--primary:hover { background: var(--m-primary); }
/* Hover/active darkening is an @supports ENHANCEMENT everywhere in this
   file. It can NEVER be a second declaration in the same rule: a
   declaration containing var() is assumed valid at parse time, wins the
   cascade and throws the static away, then fails substitution — leaving
   the property at its initial value (background -> transparent), not at
   the fallback. DS-17. */
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-btn--primary:hover { background: color-mix(in srgb, var(--m-primary) 88%, var(--m-text) 12%); }
}
.m-btn--ghost { background: transparent; border-color: var(--m-line-strong); }
.m-btn--light { background: var(--m-bg); color: var(--m-text); }
.m-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* ---------- Heroes ---------- */
.m-hero--split {
  display: grid; gap: var(--m-sp-5); align-items: center;
  max-width: var(--m-container); margin-inline: auto;
  padding: var(--m-sp-5) var(--m-sp-4) var(--m-sp-6);
}
.m-hero--split .m-hero__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--m-r-l);
  box-shadow: var(--m-shadow), var(--m-ring);
}
.m-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--m-fs-xs); font-weight: 700;
  color: var(--m-primary);
  background: var(--m-primary-soft);
  padding: 6px 14px; border-radius: var(--m-r-pill);
  margin-bottom: var(--m-sp-3);
}
.m-hero__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--m-primary);
}
.m-hero__title { font-size: var(--m-fs-xxl); }
.m-hero__sub { color: var(--m-muted); font-size: var(--m-fs-m); max-width: 34ch; margin-bottom: var(--m-sp-4); }
.m-hero__actions { display: flex; align-items: center; gap: var(--m-sp-4); flex-wrap: wrap; }

@media (min-width: 800px) {
  .m-hero--split { grid-template-columns: 1fr 1.05fr; padding-block: var(--m-sp-6) var(--m-sp-7); }
  .m-hero--split .m-hero__body { order: -1; padding-inline-end: var(--m-sp-5); }
}

.m-hero--bleed {
  min-height: 64vh;
  background-size: cover; background-position: center;
  background-color: var(--m-surface-2);
  display: grid; align-items: end;
}
.m-hero--bleed-plain {
  background-image:
    radial-gradient(80% 90% at 15% 0%, rgba(var(--m-accent-rgb), .3), transparent 60%),
    linear-gradient(200deg, var(--m-primary), var(--m-primary));
}
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-hero--bleed-plain {
    background-image:
      radial-gradient(80% 90% at 15% 0%, rgba(var(--m-accent-rgb), .3), transparent 60%),
      linear-gradient(200deg, color-mix(in srgb, var(--m-primary) 88%, var(--m-text)), var(--m-primary));
  }
}
.m-hero--bleed .m-hero__overlay {
  width: 100%;
  background: linear-gradient(to top, rgba(var(--m-text-rgb), .72), transparent 78%);
  color: #fff;
  padding: var(--m-sp-8) var(--m-sp-4) var(--m-sp-6);
}
.m-hero--bleed .m-hero__inner { max-width: var(--m-container); margin-inline: auto; }
.m-hero--bleed .m-hero__sub { color: rgba(255,255,255,.86); }
/* §3.4d: full-bleed renders the eyebrow now (it always offered the field and
   never printed it). The base pill is brand-on-tint, which is built for a
   light page; inside this variant it sits on a dark scrim over an unknown
   photo, so it joins the overlay's white type system the way __sub already
   does rather than staying a bright chip on someone's product shot. */
.m-hero--bleed .m-hero__eyebrow {
  color: #fff;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(2px);
}
.m-hero--bleed .m-hero__eyebrow::before { background: #fff; }

.m-hero--editorial {
  background:
    radial-gradient(90% 70% at 85% 0%, var(--m-accent-wash), transparent 60%),
    linear-gradient(180deg, var(--m-surface-2), var(--m-bg) 85%);
  text-align: center;
  padding: var(--m-sp-8) var(--m-sp-4) var(--m-sp-7);
}
.m-hero--editorial .m-hero__body { max-width: 640px; margin-inline: auto; }
.m-hero--editorial .m-hero__title { font-size: clamp(2.4rem, 9vw, 3.6rem); }
.m-hero--editorial .m-hero__sub { margin-inline: auto; }
.m-hero--editorial .m-hero__actions { justify-content: center; }

/* ---------- Product grid & cards ---------- */
.m-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--m-sp-5) var(--m-sp-3);
}
@media (min-width: 800px) { .m-grid { grid-template-columns: repeat(4, 1fr); gap: var(--m-sp-6) var(--m-sp-5); } }

.m-card__link { display: block; text-decoration: none; }
.m-card__media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--m-r);
  background: var(--m-surface-2);
  box-shadow: var(--m-ring);
}
.m-card__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform var(--m-t-base) var(--m-ease); }
.m-card__link:hover .m-card__media img { transform: scale(1.035); }
.m-card__link:hover .m-card__media { box-shadow: var(--m-ring), var(--m-shadow-s); }
.m-card__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: var(--m-sp-3);
  font-size: var(--m-fs-s); line-height: 1.5;
  min-height: calc(2 * 1.5em);
}
.m-card__price { display: block; margin-top: 2px; font-weight: 700; font-family: var(--m-font-display); font-variant-numeric: tabular-nums; }
.m-card__price del { color: var(--m-muted); font-weight: 400; font-family: var(--m-font-text); font-size: .85em; margin-inline-start: 8px; }
.m-card__price ins { text-decoration: none; color: var(--m-primary); }

/* shade micro-dots on cards with colour variants */
.m-card__dots { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.m-card__dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--dot);
  box-shadow: inset 0 0 0 1px rgba(var(--m-text-rgb), .18);
}
.m-card__dots i.is-light {
  box-shadow: inset 0 0 0 1px rgba(var(--m-text-rgb), .42);
}
.m-card__dots small { font-size: var(--m-fs-xs); color: var(--m-muted); line-height: 1; }

.m-card--framed .m-card__link {
  background: var(--m-bg);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-l);
  padding: var(--m-sp-2);
  transition: border-color var(--m-t-fast) var(--m-ease), box-shadow var(--m-t-fast) var(--m-ease);
}
.m-card--framed .m-card__link:hover { border-color: var(--m-line-strong); box-shadow: var(--m-shadow-s); }
.m-card--framed .m-card__media { border-radius: var(--m-r-s); box-shadow: none; }
.m-card--framed .m-card__body { padding: var(--m-sp-2) var(--m-sp-2) var(--m-sp-1); display: block; }

.m-card--tall .m-card__link { position: relative; }
.m-card--tall .m-card__media img { aspect-ratio: 4/5; }
.m-card--tall .m-card__scrim {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--m-sp-6) var(--m-sp-3) var(--m-sp-3);
  border-radius: 0 0 var(--m-r) var(--m-r);
  background: linear-gradient(to top, rgba(var(--m-text-rgb), .68), transparent);
  color: #fff;
}
.m-card--tall .m-card__name { color: #fff; min-height: 0; margin-top: 0; }
.m-card--tall .m-card__price, .m-card--tall .m-card__price ins { color: #fff; }
/* Tall cards float their shade dots in the same corner the heart now owns, so
   they drop below it rather than under it. */
.m-card--tall .m-card__dots {
  position: absolute; z-index: 2; margin: 0;
  inset-inline-end: var(--m-card-inset);
  top: calc(var(--m-card-inset) + var(--m-wish-size) + var(--m-sp-1));
}

.m-badge {
  position: absolute; top: var(--m-sp-2); inset-inline-start: var(--m-sp-2); z-index: 2;
  font-size: var(--m-fs-xs); font-weight: 700;
  padding: 4px 12px; border-radius: var(--m-r-pill);
}

/* ---------- Home sections ---------- */
.m-cats__grid, .m-featured, .m-related, .m-quotes__row, .m-insta__grid, .m-story,
.m-proof__head {
  max-width: var(--m-container); margin-inline: auto; padding-inline: var(--m-sp-4);
}
.m-cats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--m-sp-3); }
@media (min-width: 800px) { .m-cats__grid { grid-template-columns: repeat(4, 1fr); gap: var(--m-sp-4); } }
.m-cats__tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--m-r); text-decoration: none;
  background: var(--m-surface-2);
}
.m-cats__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform var(--m-t-base) var(--m-ease); }
.m-cats__tile:hover .m-cats__img { transform: scale(1.04); }
.m-cats__ph {
  aspect-ratio: 1/1; display: grid; place-content: center;
  font-family: var(--m-font-display); font-size: 3rem; font-weight: 700;
  color: var(--m-primary); background: var(--m-accent-wash);
}
.m-cats__name {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--m-sp-5) var(--m-sp-3) var(--m-sp-3);
  background: linear-gradient(to top, rgba(var(--m-text-rgb), .62), transparent);
  color: #fff; font-weight: 700;
}

.m-story { display: grid; gap: var(--m-sp-5); align-items: center; }
@media (min-width: 800px) { .m-story { grid-template-columns: 1fr 1.1fr; } }
.m-story__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--m-r-l); box-shadow: var(--m-ring); }
.m-story .m-section__title { text-align: start; }
.m-story__text { color: var(--m-muted); max-width: 52ch; }

.m-trust { background: var(--m-surface); border-block: 1px solid var(--m-line); padding-block: var(--m-sp-6); }
.m-trust__list {
  list-style: none; margin: 0 auto; padding: 0 var(--m-sp-4);
  max-width: var(--m-container);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--m-sp-4) var(--m-sp-5);
}
@media (min-width: 800px) { .m-trust__list { grid-template-columns: repeat(4, 1fr); } }
.m-trust__list li { display: flex; align-items: center; gap: var(--m-sp-3); font-size: var(--m-fs-s); font-weight: 400; }
.m-trust__list svg {
  flex: none; color: var(--m-primary);
  background: var(--m-primary-soft);
  width: 40px; height: 40px; padding: 9px; border-radius: var(--m-r-pill);
}

.m-quotes__row { display: grid; gap: var(--m-sp-4); }
@media (min-width: 800px) { .m-quotes__row { grid-template-columns: repeat(3, 1fr); } }
.m-quote {
  margin: 0; position: relative;
  background: var(--m-bg); border: 1px solid var(--m-line); border-radius: var(--m-r-l);
  padding: var(--m-sp-5);
}
.m-quote::before {
  content: "\201D";
  position: absolute; top: 6px; inset-inline-start: var(--m-sp-4);
  font-family: var(--m-font-display); font-size: 3rem; line-height: 1;
  color: var(--m-accent);
}
.m-quote blockquote { margin: var(--m-sp-4) 0 var(--m-sp-3); }
.m-quote figcaption { color: var(--m-muted); font-size: var(--m-fs-s); }

.m-insta__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m-sp-2); }
.m-insta__grid a { border-radius: var(--m-r-s); overflow: hidden; display: block; }
.m-insta__grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform var(--m-t-base) var(--m-ease); }
.m-insta__grid a:hover img { transform: scale(1.05); }
.m-insta .m-section__title a { text-decoration: none; color: var(--m-primary); }

/* ---------- Shop ---------- */
.m-shop { padding-block: var(--m-sp-5) var(--m-sp-7); }
.m-shop__head { margin-bottom: var(--m-sp-5); }
.m-chips {
  display: flex; gap: var(--m-sp-2); overflow-x: auto;
  padding: 2px 2px var(--m-sp-3);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  mask-image: linear-gradient(to left, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.m-chips::-webkit-scrollbar { display: none; }
.m-chip {
  flex: none; padding: 8px 18px;
  border: 1px solid var(--m-line-strong); border-radius: var(--m-r-pill);
  background: var(--m-bg); text-decoration: none; font-size: var(--m-fs-s); font-weight: 400;
  transition: background-color var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease);
}
.m-chip:hover { background: var(--m-surface-2); }
.m-chip.is-active { background: var(--m-primary); border-color: var(--m-primary); color: var(--m-on-primary); }
.m-empty {
  text-align: center; color: var(--m-muted);
  padding-block: var(--m-sp-8);
  display: grid; justify-items: center; gap: var(--m-sp-3);
}
.m-empty__title {
  font-family: var(--m-font-display); font-weight: 700;
  font-size: var(--m-fs-l); color: var(--m-text); margin: 0;
}
.m-empty .m-btn { margin-top: var(--m-sp-2); }

/* Pagination lives in ONE place: the v1.3.0 block near the end of this
   file (the old base-layer pagination and refine's re-skin collapsed
   into it — Phase 2.5 PL-21). */

/* ---------- Product page ---------- */
.m-product {
  display: grid; gap: var(--m-sp-5);
  max-width: var(--m-container); margin-inline: auto;
  padding: var(--m-sp-4) var(--m-sp-4) var(--m-sp-6);
}
@media (min-width: 800px) { .m-product { grid-template-columns: 1.05fr 1fr; gap: var(--m-sp-7); align-items: start; padding-top: var(--m-sp-6); } }

.m-product__track {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  border-radius: var(--m-r-l);
  box-shadow: var(--m-ring);
  scrollbar-width: none;
}
.m-product__track::-webkit-scrollbar { display: none; }
.m-product__slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.m-product__slide img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.m-product__thumbs { display: flex; gap: var(--m-sp-2); margin-top: var(--m-sp-3); overflow-x: auto; scrollbar-width: none; }
.m-product__thumbs::-webkit-scrollbar { display: none; }
.m-product__thumb {
  flex: none; width: 62px; height: 62px; padding: 0;
  border: 2px solid transparent; border-radius: var(--m-r-s);
  overflow: hidden; background: none; opacity: .75;
  transition: opacity var(--m-t-fast) var(--m-ease), border-color var(--m-t-fast) var(--m-ease);
}
.m-product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-product__thumb.is-active { border-color: var(--m-primary); opacity: 1; }

.m-product__title { font-size: var(--m-fs-xl); margin-bottom: var(--m-sp-2); }
.m-product__price { font-family: var(--m-font-display); font-size: var(--m-fs-l); font-weight: 700; margin-bottom: var(--m-sp-3); font-variant-numeric: tabular-nums; }
.m-product__price del { color: var(--m-muted); font-family: var(--m-font-text); font-weight: 400; font-size: var(--m-fs-base); margin-inline-start: 10px; }
.m-product__price ins { text-decoration: none; color: var(--m-primary); }
.m-product__delivery {
  display: flex; align-items: center; gap: 10px;
  color: var(--m-muted); font-size: var(--m-fs-s);
  margin: calc(-1 * var(--m-sp-2)) 0 var(--m-sp-4);
}
.m-product__delivery::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--m-accent);
  box-shadow: inset 0 0 0 1px rgba(var(--m-text-rgb), .22);
}
.m-product__excerpt { color: var(--m-muted); margin-bottom: var(--m-sp-4); }

.m-swatches { border: 0; padding: 0; margin: 0 0 var(--m-sp-5); }
.m-swatches__label { font-weight: 700; padding: 0; margin-bottom: var(--m-sp-3); display: block; }
.m-swatches__chosen { color: var(--m-muted); font-weight: 400; }
.m-swatches__row { display: flex; flex-wrap: wrap; gap: var(--m-sp-3); }
.m-swatch { position: relative; }
.m-swatch input { position: absolute; opacity: 0; inset: 0; }
.m-swatch__chip {
  display: block; width: 42px; height: 42px; border-radius: 50%;
  background: var(--chip);
  box-shadow: inset 0 0 0 2px var(--m-bg), 0 0 0 1.5px var(--m-line-strong);
  transition: box-shadow var(--m-t-fast) var(--m-ease), transform var(--m-t-fast) var(--m-ease);
}
.m-swatch:hover .m-swatch__chip { transform: scale(1.06); }
.m-swatch:active .m-swatch__chip {
  transform: scale(.92);
  box-shadow: inset 0 2px 6px rgba(var(--m-text-rgb), .35),
              inset 0 0 0 2px var(--m-bg), 0 0 0 1.5px var(--m-line-strong);
}
/* Near-white shades need a firmer ring or they vanish into porcelain. */
.m-swatch__chip--light {
  box-shadow: inset 0 0 0 2px var(--m-bg),
              0 0 0 1.5px rgba(var(--m-text-rgb), .45);
}
.m-swatch input:checked + .m-swatch__chip--light {
  box-shadow: inset 0 0 0 3px var(--m-bg), 0 0 0 2.5px var(--m-primary);
}
.m-swatch input:checked + .m-swatch__chip {
  box-shadow: inset 0 0 0 3px var(--m-bg), 0 0 0 2.5px var(--m-primary);
}
.m-swatch input:focus-visible + .m-swatch__chip,
.m-swatch input:focus-visible + .m-swatch__pill { outline: 2px solid var(--m-primary); outline-offset: 3px; }
.m-swatch__pill {
  display: block; padding: 9px 18px; min-height: 42px;
  border: 1.5px solid var(--m-line-strong); border-radius: var(--m-r-pill);
  font-weight: 400;
  transition: background-color var(--m-t-fast) var(--m-ease), border-color var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease);
}
.m-swatch input:checked + .m-swatch__pill { background: var(--m-primary); border-color: var(--m-primary); color: var(--m-on-primary); }

.m-buy__row { display: flex; gap: var(--m-sp-3); align-items: stretch; margin-block: var(--m-sp-4) var(--m-sp-5); }
.m-buy__submit {
  flex: 1; min-inline-size: 0;
  min-height: 52px; font-size: var(--m-fs-m);
  white-space: nowrap; /* «أضيفي للسلة» never wraps into a square again */
}
.m-buy__stock { color: var(--m-primary); font-size: var(--m-fs-s); font-weight: 700; }

/* Quantity: buttons-plus-field, one quiet pill; the CTA keeps the stage */
.m-qty {
  flex: none; display: flex; align-items: stretch;
  border: 1.5px solid var(--m-line-strong); border-radius: var(--m-r-s);
  background: var(--m-bg); overflow: hidden;
}
.m-qty input {
  width: 3.2ch; min-height: 0; min-width: 44px;
  text-align: center; border: 0; padding: 0;
  background: transparent; color: var(--m-text);
  -moz-appearance: textfield; appearance: textfield;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.m-qty input::-webkit-outer-spin-button, .m-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-qty input:focus { outline: none; box-shadow: none; background: var(--m-surface-2); }
.m-qty__btn {
  width: var(--m-touch); min-height: 48px;
  border: 0; background: transparent;
  font-size: var(--m-fs-l); line-height: 1; color: var(--m-muted);
  transition: background-color var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease);
}
.m-qty__btn:hover { background: var(--m-surface); color: var(--m-text); }
.m-qty__btn:active { background: var(--m-surface-2); }
.m-qty__btn:disabled { opacity: .3; background: transparent; cursor: default; }

.m-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--m-touch); padding: 10px 20px;
  border: 1.5px solid var(--m-wa); border-radius: var(--m-r-s);
  color: var(--m-wa-deep); font-weight: 700; text-decoration: none;
  transition: background-color var(--m-t-fast) var(--m-ease);
}
.m-whatsapp:hover { background: var(--m-wa-wash); }
body > .m-whatsapp {
  position: fixed; bottom: var(--m-sp-4); inset-inline-start: var(--m-sp-4); z-index: 30;
  background: var(--m-wa); color: #fff; border: 0; box-shadow: var(--m-shadow);
}
@media (max-width: 799px) {
  body.single-product > .m-whatsapp,
  body.woocommerce-cart > .m-whatsapp,
  body.woocommerce-checkout > .m-whatsapp { bottom: calc(var(--m-fabclear) + env(safe-area-inset-bottom)); }
}

.m-product__trust {
  list-style: none; margin: var(--m-sp-5) 0; padding: var(--m-sp-4) 0;
  border-block: 1px solid var(--m-line);
  display: grid; gap: var(--m-sp-2);
  font-size: var(--m-fs-s); color: var(--m-muted);
}
.m-product__trust li { padding-inline-start: 22px; position: relative; }
/* ONE marker, and it is a tick. The old pairing was a 9px dot here plus a
   ::marker tick in refine.css: two mechanisms on one <li>, neither cancelling
   the other, so modern engines drew both and old WebViews drew only the dot.
   The ::before survives because it is a real box that can be aligned, it is
   already inside the reserved 22px gutter, and it works everywhere.

   PHYSICAL borders, deliberately, and the only such exception in this file:
   transform: rotate() does NOT flip with direction, so a logical-border tick
   mirrors into a backwards glyph in RTL. A checkmark must look the same in
   both directions. Its POSITION stays logical. */
.m-product__trust li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: .45em;
  width: 5px; height: 9px; border-radius: 0;
  border-right: 2.2px solid var(--m-primary);
  border-bottom: 2.2px solid var(--m-primary);
  transform: rotate(45deg);
}
.m-product__desc { margin-top: var(--m-sp-4); color: var(--m-text); }
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-product__desc { color: color-mix(in srgb, var(--m-text) 88%, var(--m-bg)); }
}

.m-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 35;
  display: flex; align-items: center; justify-content: space-between; gap: var(--m-sp-3);
  /* Pinned to the token the FAB clearance is derived from, so the two cannot
     drift apart the way a bare 86px and a 73px bar did. */
  min-block-size: var(--m-sticky-h); box-sizing: border-box;
  padding: var(--m-sp-3) var(--m-sp-4);
  padding-bottom: calc(var(--m-sp-3) + env(safe-area-inset-bottom));
  background: rgba(var(--m-bg-rgb), .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--m-line);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform var(--m-t-base) var(--m-ease-exit), visibility 0s var(--m-t-base);
}
.m-sticky.is-on {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--m-t-base) var(--m-ease), visibility 0s;
}
.m-sticky .m-btn { flex: 1; min-height: 48px; white-space: nowrap; }
.m-sticky__price { font-family: var(--m-font-display); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 800px) { .m-sticky { display: none; } }

/* Buy buttons while the add-to-cart submit navigates */
.m-btn.is-busy { opacity: .7; }

/* Variation image swap: a breath, not a blink */
.m-product__slide img { transition: opacity var(--m-t-base) var(--m-ease); }
.m-product__slide img.is-swapping { opacity: .3; }

/* ---------- Nudge ---------- */

/* ===================================================================
   Commerce pages — scoped to Woo's BODY classes so nothing ever leaks
   into the product page again (the v0.3 `.woocommerce` scope matched
   <body> on every shop page; that was the buy-row blow-up).
   =================================================================== */

/* Notices + price atoms: element-scoped, safe everywhere */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
  list-style: none; margin: 0 0 var(--m-sp-4); padding: var(--m-sp-3) var(--m-sp-4);
  border-radius: var(--m-r-s); border: 1px solid transparent; font-size: var(--m-fs-s);
}
.woocommerce-error { background: var(--m-danger-bg); color: var(--m-danger-ink); }
.woocommerce-message, .woocommerce-info { background: var(--m-surface); border-color: var(--m-line); }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
  float: none; margin-inline-start: var(--m-sp-3);
  color: var(--m-primary); font-weight: 700; text-decoration: none;
}
.woocommerce-Price-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The wide canvas cart/checkout/account render on */
.m-woopage { padding-block: var(--m-sp-5) var(--m-sp-7); }
.m-woopage .m-title { margin-bottom: var(--m-sp-5); }

/* ---- Shared form language (cart + checkout + account only) ---- */
body.woocommerce-cart .form-row, body.woocommerce-checkout .form-row, body.woocommerce-account .form-row { margin: 0 0 var(--m-sp-4); }
body.woocommerce-cart .form-row label, body.woocommerce-checkout .form-row label, body.woocommerce-account .form-row label {
  display: block; font-weight: 700; font-size: var(--m-fs-s); margin-bottom: 6px;
}
body.woocommerce-checkout .form-row .required { color: var(--m-primary); text-decoration: none; }
body.woocommerce-cart input[type=text], body.woocommerce-cart input[type=number],
body.woocommerce-checkout input[type=text], body.woocommerce-checkout input[type=tel],
body.woocommerce-checkout input[type=email], body.woocommerce-checkout input[type=password],
body.woocommerce-checkout textarea, body.woocommerce-checkout select,
body.woocommerce-account input[type=text], body.woocommerce-account input[type=tel],
body.woocommerce-account input[type=email], body.woocommerce-account input[type=password] {
  width: 100%; min-height: var(--m-touch);
  padding: 10px 14px;
  border: 1.5px solid var(--m-line-strong); border-radius: var(--m-r-s);
  background: var(--m-bg); color: var(--m-text);
  transition: border-color var(--m-t-fast) var(--m-ease), box-shadow var(--m-t-fast) var(--m-ease);
}
body.woocommerce-cart input:focus, body.woocommerce-checkout input:focus,
body.woocommerce-checkout textarea:focus, body.woocommerce-checkout select:focus,
body.woocommerce-account input:focus {
  border-color: var(--m-primary);
  box-shadow: 0 0 0 3px rgba(var(--m-primary-rgb), .18);
  outline: none;
}
body.woocommerce-checkout ::placeholder { color: var(--m-muted); opacity: .8; }

/* THE select — one direction-agnostic treatment (PL-23's currentColor recipe).
   The old data-URI chevron hardcoded a grey stroke that ignored the store's
   palette entirely, and only survived the token-clone scan because css-scan
   blanks url() bodies; it also needed a second html[dir="ltr"] rule to move
   the arrow back. Logical properties do that for free. */
.m-cosel { position: relative; display: block; }
.m-cosel select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; }
.m-cosel::after {
  content: ""; position: absolute; inset-inline-end: 15px; top: 50%;
  width: 9px; height: 9px; margin-top: -5px; pointer-events: none;
  border-inline-end: 1.8px solid currentColor; border-block-end: 1.8px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}

/* Primary commerce buttons — only on commerce pages */
body.woocommerce-cart .button, body.woocommerce-checkout .button, body.woocommerce-account .button,
.wc-proceed-to-checkout a.checkout-button, #place_order {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--m-touch);
  padding: 12px 26px; border: 0; border-radius: var(--m-r-s);
  background: var(--m-primary); color: var(--m-on-primary);
  font-weight: 700; text-decoration: none; text-align: center;
  box-shadow: var(--m-shadow-s);
  transition: background-color var(--m-t-fast) var(--m-ease), transform var(--m-t-fast) var(--m-ease);
}
body.woocommerce-cart .button:hover, body.woocommerce-checkout .button:hover,
.wc-proceed-to-checkout a.checkout-button:hover, #place_order:hover {
  background: var(--m-primary);
}
@supports (color: color-mix(in srgb, red 50%, red)) {
  body.woocommerce-cart .button:hover, body.woocommerce-checkout .button:hover,
  .wc-proceed-to-checkout a.checkout-button:hover, #place_order:hover {
    background: color-mix(in srgb, var(--m-primary) 88%, var(--m-text) 12%);
  }
}
body.woocommerce-cart .button:active, #place_order:active { transform: scale(.985); }

/* ---- Cart ---- */
body.woocommerce-cart table.shop_table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--m-line); border-radius: var(--m-r); overflow: hidden;
}
body.woocommerce-cart table.shop_table th, body.woocommerce-cart table.shop_table td {
  padding: var(--m-sp-3) var(--m-sp-4); text-align: start;
  border-bottom: 1px solid var(--m-line); background: var(--m-bg); vertical-align: middle;
}
body.woocommerce-cart table.shop_table thead th { background: var(--m-surface); font-size: var(--m-fs-s); }
/* The one thumbnail surface in the theme that used to set a width and nothing
   else, so a portrait photo rendered 64x96 beside three square ones. Cards are
   aspect-ratio 1/1, the drawer is 58x58 cover, the checkout summary 44x44
   cover. object-fit cannot distort whatever the store's own crop setting
   produces, which is exactly why the crop belongs at the display layer. */
body.woocommerce-cart .product-thumbnail img {
  inline-size: 64px; block-size: 64px;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--m-r-s);
}
body.woocommerce-cart td.product-name a { text-decoration: none; }
body.woocommerce-cart a.remove {
  display: grid; place-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: var(--m-muted) !important; text-decoration: none;
  font-size: 20px; line-height: 1;
  transition: background-color var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease);
}
body.woocommerce-cart a.remove:hover { background: var(--m-danger-bg); color: var(--m-danger-ink) !important; }
body.woocommerce-cart td.actions { background: var(--m-surface); }
body.woocommerce-cart td.actions .coupon { display: flex; gap: var(--m-sp-2); float: none; }
body.woocommerce-cart td.actions .coupon input { max-width: 220px; }
body.woocommerce-cart td.actions .coupon .button { background: var(--m-bg); color: var(--m-text); box-shadow: var(--m-ring); }
body.woocommerce-cart button[name="update_cart"] {
  background: transparent; box-shadow: none; color: var(--m-primary);
  margin-top: var(--m-sp-3);
}
body.woocommerce-cart button[name="update_cart"]:disabled { opacity: .45; background: transparent; }

/* Mobile: line items become cards, not a squeezed table */
@media (max-width: 699px) {
  body.woocommerce-cart table.shop_table, body.woocommerce-cart tbody { display: block; border: 0; }
  body.woocommerce-cart thead { display: none; }
  /* v1.8.2 — the controls get their own line.
     The three-column shape put the stepper and the line total side by side in
     what is left after a 76px thumbnail: about 230px at 390px, against a
     stepper plus a `white-space: nowrap` total that need roughly that much.
     It fit until a cart crossed six figures, and then the total — which is
     justify-self:end — was clipped at the inline edge. Shrinking the stepper
     bought single-digit pixels and was the wrong lever twice.
     Stacking gives that line the full card width (~300px at 360px against a
     132px stepper), so the slack is tens of pixels rather than none, and the
     stepper goes back to full size: bigger touch target, one less variant,
     and no input squeezed into a box too short for its own line box. */
  body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a bare `1fr` is minmax(AUTO, 1fr), whose
       automatic minimum is the column's min-content — and .product-name
       carries a 200px min-width for the desktop table, which floored this
       column at 200px and overflowed the card by ~49px at 390px no matter
       what else was in the row. That, not the stepper, is what clipped the
       line total: it was measured at "76px 200px 78.78px" in a 330px box. */
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name   remove"
      "thumb price  price"
      "qty   qty    subtotal";
    gap: 4px var(--m-sp-3); align-items: center;
    border: 1px solid var(--m-line); border-radius: var(--m-r);
    padding: var(--m-sp-3); margin-bottom: var(--m-sp-3);
    background: var(--m-bg);
  }
  body.woocommerce-cart tr.woocommerce-cart-form__cart-item td { display: block; padding: 0; border: 0; background: none; }
  body.woocommerce-cart td.product-thumbnail { grid-area: thumb; }
  body.woocommerce-cart td.product-thumbnail img { inline-size: 76px; block-size: 76px; }
  /* The track minimum above is only half of it: a grid ITEM can still overflow
     its track, so the desktop 200px floor has to stand down here too. */
  body.woocommerce-cart td.product-name { grid-area: name; min-width: 0; font-size: var(--m-fs-s); line-height: 1.5; }
  body.woocommerce-cart td.product-remove { grid-area: remove; justify-self: end; }
  body.woocommerce-cart td.product-price { grid-area: price; color: var(--m-muted); font-size: var(--m-fs-s); }
  /* The controls line: a hairline and a little air separate it from the
     product it belongs to, so the card reads as "what it is" then "what you
     are doing with it". */
  body.woocommerce-cart td.product-quantity,
  body.woocommerce-cart td.product-subtotal {
    margin-block-start: var(--m-sp-3);
    padding-block-start: var(--m-sp-3);
    border-block-start: 1px solid var(--m-line);
  }
  body.woocommerce-cart td.product-quantity { grid-area: qty; justify-self: start; }
  body.woocommerce-cart td.product-subtotal { grid-area: subtotal; justify-self: end; align-self: center; font-weight: 700; font-family: var(--m-font-display); }
  body.woocommerce-cart td.actions { display: block; border: 0; border-radius: var(--m-r); padding: var(--m-sp-3); }
}

/* (The `.cart_collaterals` underscore-typo block is gone — Woo outputs
   `cart-collaterals` with a hyphen; refine.css owns the real one. PL-19.) */
body.woocommerce-cart .cart_totals h2 { font-size: var(--m-fs-m); margin: 0 0 var(--m-sp-3); }
body.woocommerce-cart .cart_totals table { width: 100%; }
body.woocommerce-cart .cart_totals th, body.woocommerce-cart .cart_totals td {
  padding: 8px 0; text-align: start; border-bottom: 1px solid var(--m-line); background: none;
}
body.woocommerce-cart .cart_totals tr:last-child > * { border-bottom: 0; font-family: var(--m-font-display); font-size: var(--m-fs-m); }
body.woocommerce-cart .wc-proceed-to-checkout { padding-top: var(--m-sp-4); }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; min-height: 52px; font-size: var(--m-fs-m); }

/* Empty cart */
.cart-empty.woocommerce-info {
  background: transparent; border: 0; text-align: center;
  font-family: var(--m-font-display); font-weight: 700;
  font-size: var(--m-fs-l); color: var(--m-text);
  padding-block: var(--m-sp-7) var(--m-sp-2);
}
.return-to-shop { text-align: center; margin-bottom: var(--m-sp-7); }

/* ---- Checkout: one calm column (the theme owns this markup since 3.1) ---- */
.m-cofm__h { font-size: var(--m-fs-m); margin: var(--m-sp-5) 0 var(--m-sp-3); }
.m-cofm__details .col-1, .m-cofm__details .col-2 { min-width: 0; }

/* Single column wins (Baymard). The one exception earns its breakpoint: on a
   480px+ phone the phone number and the governorate are both short, and
   pairing them removes a whole scroll step from the four-row form.
   (The old .form-row-first/-last pair is gone with the last-name field.) */
@media (min-width: 480px) {
  .woocommerce-billing-fields__field-wrapper {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--m-sp-4);
  }
  .woocommerce-billing-fields__field-wrapper > * { grid-column: 1 / -1; }
  .woocommerce-billing-fields__field-wrapper > #billing_phone_field { grid-column: 1; }
  .woocommerce-billing-fields__field-wrapper > #billing_governorate_field { grid-column: 2; }
  /* Both children of the pair, so the line spans under them. */
  .woocommerce-billing-fields__field-wrapper > .m-codelivery { grid-column: 1 / -1; }
}

/* The order summary. Its root class is a Woo fragment key — see
   woocommerce/checkout/review-order.php. */
body.woocommerce-checkout table.shop_table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--m-line); border-radius: var(--m-r); overflow: hidden;
}
body.woocommerce-checkout table.shop_table th, body.woocommerce-checkout table.shop_table td {
  padding: var(--m-sp-3) var(--m-sp-4); text-align: start;
  border-bottom: 1px solid var(--m-line); background: var(--m-bg);
}
body.woocommerce-checkout table.shop_table tr:last-child > * { border-bottom: 0; }
body.woocommerce-checkout table.shop_table tfoot .order-total td,
body.woocommerce-checkout table.shop_table tfoot .order-total th {
  font-family: var(--m-font-display); font-size: var(--m-fs-m); background: var(--m-surface);
}
.m-cosum .product-thumbnail { width: 56px; padding-inline-end: 0; }
.m-cosum .product-thumbnail img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--m-r-s); display: block; }
.m-cosum .product-name { font-size: var(--m-fs-s); line-height: 1.5; }
.m-cosum .product-total, .m-cosum tfoot td { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-cosum .product-quantity { color: var(--m-muted); font-weight: 400; }
.m-cosum .variation { margin: 2px 0 0; font-size: var(--m-fs-xs); color: var(--m-muted); }
.m-cosum .variation dt, .m-cosum .variation dd { display: inline; margin: 0; }
.m-cosum tr.matjari-eta td {
  text-align: start; color: var(--m-muted); font-size: var(--m-fs-s);
  background: var(--m-surface); padding-top: 0;
}

/* The live delivery line, right under the governorate select and OUTSIDE both
   AJAX fragments so nothing can clobber it. */
.m-codelivery {
  margin: calc(-1 * var(--m-sp-2)) 0 var(--m-sp-4);
  padding: 10px var(--m-sp-4);
  border-radius: var(--m-r-s);
  background: var(--m-primary-soft);
  font-size: var(--m-fs-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.m-codelivery--nozones { background: var(--m-surface); font-weight: 400; }
.m-codelivery__free { font-weight: 700; }
.m-conote { margin: calc(-1 * var(--m-sp-3)) 0 var(--m-sp-4); font-size: var(--m-fs-xs); color: var(--m-muted); }

/* Inline phone error. Our own state class — Woo's .woocommerce-invalid is
   rewritten by wc_checkout_form on the next keystroke. */
.m-cophone-err {
  margin: calc(-1 * var(--m-sp-3)) 0 var(--m-sp-4);
  padding: 8px var(--m-sp-3); border-radius: var(--m-r-s);
  background: var(--m-danger-bg); color: var(--m-danger-ink);
  font-size: var(--m-fs-sm); font-weight: 700;
}
.form-row.m-invalid input.input-text { border-color: var(--m-danger-ink); }

/* The note, behind a disclosure so it never costs one of the four rows. */
.m-conote-toggle { margin-block: var(--m-sp-4); }
.m-conote-toggle__sum {
  cursor: pointer; font-weight: 700; font-size: var(--m-fs-sm);
  color: var(--m-primary); min-height: var(--m-touch);
  display: flex; align-items: center;
}
.m-conote-toggle[open] .m-conote-toggle__sum { margin-bottom: var(--m-sp-2); }

/* One gateway is a statement, not a choice: the radio stays in the DOM
   (WC_Checkout rejects a POST with no payment_method) and is collapsed. */
.wc_payment_methods--single .wc_payment_method > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.wc_payment_methods--single .wc_payment_method > label { display: flex; align-items: center; gap: 8px; min-height: var(--m-touch); }
.m-copay__none { font-size: var(--m-fs-s); }

/* Room for the sticky bar: it must never sit over the note or the terms box. */
@media (max-width: 799px) {
  body.woocommerce-checkout form.checkout { padding-bottom: calc(var(--m-fabclear) + env(safe-area-inset-bottom)); }
}

/* The submit bar. Geometry AND the reveal are .m-sticky's: checkout.js toggles
   .is-on from an IntersectionObserver on #place_order, so the bar slides away
   the moment the real button is on screen and both are never up at once. It
   must NOT pin itself visible here — that silently outranks .is-on and the
   observer would run correctly while changing nothing (scenario 46, K13). */
/* justify-content moved to the base .m-sticky in §3.2 — both bars are
   money-at-one-end, CTA-at-the-other, so it belongs there. */
.m-sticky--co__total {
  font-family: var(--m-font-display); font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.m-sticky--co__go { flex: 0 1 auto; min-width: 46%; }

#payment {
  background: var(--m-surface); border: 1px solid var(--m-line);
  border-radius: var(--m-r-l); padding: var(--m-sp-5); margin-top: var(--m-sp-4);
}
#payment ul.wc_payment_methods { list-style: none; margin: 0 0 var(--m-sp-4); padding: 0; }
#payment .wc_payment_method { padding: var(--m-sp-2) 0; }
#payment .wc_payment_method label { font-weight: 700; }
#payment .payment_box {
  background: var(--m-bg); border-radius: var(--m-r-s);
  padding: var(--m-sp-3) var(--m-sp-4); margin-top: var(--m-sp-2);
  font-size: var(--m-fs-s); color: var(--m-muted);
}
#payment input[type=radio] { accent-color: var(--m-primary); margin-inline-end: 8px; }
#place_order { width: 100%; min-height: 54px; font-size: var(--m-fs-m); }
/* (.matjari-delivery-estimate is gone: core's estimate paragraph hung off
   woocommerce_review_order_before_payment, inside the payment fragment Woo
   replaces on every totals refresh — so it vanished at the exact moment the
   buyer chose her governorate. The ETA is now a row inside the summary table,
   .m-cosum tr.matjari-eta.) */
.matjari-hidden { display: none !important; }

/* Checkout in flight: on-brand, never a raw white flash */
body.woocommerce-checkout .blockUI.blockOverlay, body.woocommerce-cart .blockUI.blockOverlay {
  position: absolute; inset: 0;
  background: rgba(var(--m-bg-rgb), .7) !important;
  backdrop-filter: blur(2px);
  opacity: 1 !important;
}
body.woocommerce-checkout .blockUI.blockOverlay::after, body.woocommerce-cart .blockUI.blockOverlay::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--m-line-strong);
  border-top-color: var(--m-primary);
  animation: m-spin 0.7s linear infinite;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

/* (The .woocommerce-thankyou-order-received and .woocommerce-order-overview
   rules are gone: both are emitted only by checkout/order-received.php and
   Woo's stock thankyou.php, and the theme renders neither — it owns
   thankyou.php and emits .m-thanks__*. Same dead-layer class as PL-18/19.) */

/* (Footer styles live in the v0.5 "pro footer" block below + refine.css —
   the abandoned first-iteration footer that matched no markup is gone.
   PL-18.) */

/* ---------- Content pages (About, policies — the merchant's own words) -- */
.m-page { max-width: 72ch; padding-block: var(--m-sp-6) var(--m-sp-7); }
.m-page .m-title {
  position: relative; padding-bottom: var(--m-sp-3); margin-bottom: var(--m-sp-5);
}
.m-page .m-title::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 74px; height: 8px;
  background:
    radial-gradient(circle 4px at 5px 4px,  var(--m-primary) 98%, transparent),
    radial-gradient(circle 4px at 21px 4px, var(--m-primary) 98%, transparent),
    radial-gradient(circle 4px at 37px 4px, var(--m-accent) 98%, transparent),
    radial-gradient(circle 4px at 53px 4px, var(--m-accent) 98%, transparent),
    radial-gradient(circle 4px at 69px 4px, var(--m-accent) 98%, transparent);
  background-repeat: no-repeat;
}
/* The graded primary->accent dot strip needs channel maths; without it
   the five dots still read as a two-tone strip. */
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-page .m-title::after {
    background:
      radial-gradient(circle 4px at 5px 4px,  var(--m-primary) 98%, transparent),
      radial-gradient(circle 4px at 21px 4px, color-mix(in srgb, var(--m-primary) 70%, var(--m-accent)) 98%, transparent),
      radial-gradient(circle 4px at 37px 4px, color-mix(in srgb, var(--m-primary) 40%, var(--m-accent)) 98%, transparent),
      radial-gradient(circle 4px at 53px 4px, var(--m-accent) 98%, transparent),
      radial-gradient(circle 4px at 69px 4px, color-mix(in srgb, var(--m-accent) 60%, var(--m-bg)) 98%, transparent);
    background-repeat: no-repeat;
  }
}
.m-page h2 { font-size: var(--m-fs-l); margin-top: var(--m-sp-6); }
.m-page h3 { font-size: var(--m-fs-m); margin-top: var(--m-sp-5); }
.m-page p, .m-page li { font-size: var(--m-fs-m); line-height: 1.9; }
.m-page a { color: var(--m-primary); text-underline-offset: 4px; }
.m-page img { border-radius: var(--m-r-l); box-shadow: var(--m-ring); margin-block: var(--m-sp-4); }
.m-page ul, .m-page ol { padding-inline-start: var(--m-sp-5); }
.m-page blockquote {
  margin: var(--m-sp-5) 0; padding: var(--m-sp-3) var(--m-sp-5);
  border-inline-start: 3px solid var(--m-accent);
  background: var(--m-surface); border-radius: 0 var(--m-r-s) var(--m-r-s) 0;
  color: var(--m-muted);
}

/* Side-logo nav: declared, not accidental */

/* ---------- 404 ---------- */
.m-404 { text-align: center; padding-block: var(--m-sp-8); }
.m-404 .m-btn { margin-top: var(--m-sp-3); }

/* =====================================================================
   v0.5 — the self-managed store: notices, search, mini-cart, popups,
   the pro footer, and the shared section library.
   ===================================================================== */

/* ---------- Store notice (vacation / service lock) ---------- */
.m-notice {
  background: var(--m-surface-2);
  border-block: 1px solid var(--m-line);
  text-align: center;
  padding: var(--m-sp-4);
}
.m-notice p { margin: 0; font-weight: 700; }
.m-notice__date { display: block; font-weight: 400; color: var(--m-muted); font-size: var(--m-fs-s); margin-top: 2px; }
.m-notice--lock { background: var(--m-primary-soft); }

/* ---------- Drawer search ---------- */
.m-drawer__search {
  display: flex; gap: 8px;
  padding: var(--m-sp-4) var(--m-sp-4) var(--m-sp-2);
}
.m-drawer__search input[type="search"] {
  flex: 1; min-height: var(--m-touch);
  padding: 8px 14px;
  border: 1.5px solid var(--m-line-strong); border-radius: var(--m-r-pill);
  background: var(--m-bg); color: var(--m-text); font: inherit;
  transition: border-color var(--m-t-fast) var(--m-ease), box-shadow var(--m-t-fast) var(--m-ease);
}
.m-drawer__search input:focus {
  outline: none; border-color: var(--m-primary);
  box-shadow: 0 0 0 3px rgba(var(--m-primary-rgb), .16);
}
.m-drawer__search button {
  width: var(--m-touch); border: 0; border-radius: var(--m-r-pill);
  background: var(--m-primary-soft); color: var(--m-primary); cursor: pointer;
  display: grid; place-content: center;
  transition: background-color var(--m-t-fast) var(--m-ease);
}
.m-drawer__search button:hover { background: var(--m-primary-soft); }
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-drawer__search button:hover { background: color-mix(in srgb, var(--m-primary) 18%, var(--m-bg)); }
}
.m-drawer__page a { color: var(--m-muted); }

/* ---------- Promo countdown chip ---------- */
.m-countdown {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: rgba(255,255,255,.16);
  border-radius: var(--m-r-pill);
  padding: 1px 10px;
  margin-inline-start: 8px;
  font-size: var(--m-fs-xs);
}
.m-countdown:empty { display: none; }

/* ---------- Mini-cart drawer ---------- */
.m-minicart {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: min(370px, 92vw); z-index: 70;
  background: var(--m-bg);
  box-shadow: var(--m-shadow);
  display: flex; flex-direction: column;
  --m-drawer-x: 100%;
  transform: translateX(var(--m-drawer-x));
  visibility: hidden;
  transition: transform var(--m-t-base) var(--m-ease-exit), visibility 0s var(--m-t-base);
}
html[dir="ltr"] .m-minicart { --m-drawer-x: -100%; }
.m-minicart.is-open {
  transform: translateX(0); visibility: visible;
  transition: transform var(--m-t-base) var(--m-ease), visibility 0s;
}
.m-scrim--mini { z-index: 65; }
.m-minicart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--m-sp-4) var(--m-sp-5);
  border-bottom: 1px solid var(--m-line);
  font-family: var(--m-font-display); font-size: var(--m-fs-m);
}
.m-minicart__close {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--m-surface); color: var(--m-text);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: background-color var(--m-t-fast) var(--m-ease);
}
.m-minicart__close:hover { background: var(--m-surface-2); }
#m-minicart-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.m-minicart__empty { text-align: center; color: var(--m-muted); padding: var(--m-sp-8) var(--m-sp-5); display: grid; justify-items: center; gap: var(--m-sp-3); }

/* Inset, not padding: refine.css styles this as a rounded tinted CARD, and
   #m-minicart-body has no inline padding of its own (the item list and the
   foot each carry theirs). Without the margin the card butted against both
   drawer edges, its border-radius was cropped out of sight, and it read as a
   full-bleed unstyled band. The padding that used to be here was dead — the
   skin layer overrides it. */
#m-minicart-body > .m-freebar { margin: var(--m-sp-3) var(--m-sp-5) 0; }
.m-freebar p { margin: 0 0 6px; font-size: var(--m-fs-s); font-weight: 700; color: var(--m-primary); }
.m-freebar.is-done p { color: var(--m-success-ink, var(--m-primary)); }
.m-freebar__track {
  display: block; height: 7px; border-radius: 4px;
  background: var(--m-surface-2); overflow: hidden;
}
.m-freebar__track i {
  display: block; block-size: 100%;
  background: linear-gradient(90deg, var(--m-primary), var(--m-accent));
  border-radius: 4px;
  transition: inline-size var(--m-t-base) var(--m-ease);
}

.m-minicart__items {
  list-style: none; margin: 0; padding: var(--m-sp-3) var(--m-sp-5);
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: var(--m-sp-3);
}
.m-minicart__item { display: flex; gap: var(--m-sp-3); align-items: center; }
.m-minicart__thumb img { width: 58px; height: 58px; object-fit: cover; border-radius: var(--m-r-s); box-shadow: var(--m-ring); }
.m-minicart__meta { flex: 1; min-width: 0; font-size: var(--m-fs-s); line-height: 1.55; }
.m-minicart__name { display: block; font-weight: 700; }
.m-minicart__variant { display: block; color: var(--m-muted); font-size: var(--m-fs-xs); }
.m-minicart__line { display: block; color: var(--m-muted); font-variant-numeric: tabular-nums; }
/* A <button> since §3.2 (Woo's remove URL carried a nonce into cacheable
   HTML), so it resets the UA button skin here in the BASE rule rather than
   inheriting one and only looking right on hover — the Phase 2.5 lesson. */
.m-minicart__remove {
  width: 32px; height: 32px; display: grid; place-content: center; flex: none;
  background: none; border: 0; cursor: pointer;
  border-radius: 50%; color: var(--m-muted); text-decoration: none; font-size: 18px;
  transition: background-color var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease), opacity var(--m-t-fast) var(--m-ease);
}
.m-minicart__remove:hover { background: var(--m-danger-bg); color: var(--m-danger-ink); }
.m-minicart__foot {
  padding: var(--m-sp-4) var(--m-sp-5) calc(var(--m-sp-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--m-line);
  display: grid; gap: var(--m-sp-3);
}
.m-minicart__subtotal { display: flex; justify-content: space-between; margin: 0; font-family: var(--m-font-display); font-weight: 700; font-size: var(--m-fs-m); }
.m-minicart__checkout { min-height: 50px; }
.m-minicart__cartlink { text-align: center; color: var(--m-muted); font-size: var(--m-fs-s); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Popups: sheet / card / banner ---------- */
.m-popup { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.m-popup[hidden] { display: none; }
.m-popup__panel {
  position: absolute; pointer-events: auto;
  background: var(--m-bg); box-shadow: var(--m-shadow);
  transition: transform var(--m-t-base) var(--m-ease), opacity var(--m-t-base) var(--m-ease);
}
.m-popup__close {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2;
  /* DS-12: was 38px, under the 44px floor on the one control a visitor who
     does not want the popup has to hit. */
  width: var(--m-touch); height: var(--m-touch); border: 0; border-radius: 50%;
  background: var(--m-surface-2);
  color: var(--m-bg); font-size: 20px; line-height: 1; cursor: pointer;
}
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-popup__close { background: color-mix(in srgb, var(--m-bg) 82%, var(--m-text)); }
}
.m-popup__img { width: 100%; max-height: 190px; object-fit: cover; display: block; }
.m-popup__body { padding: var(--m-sp-5); display: grid; gap: var(--m-sp-2); justify-items: start; }
/* DS-15, and wider than it was filed. The close button is 44px at a 10px inset,
   so it needs 54px of clearance; the body's own 24px never gave it any, and on
   sheet and card the button lands on the first line whenever popup.image is
   empty. The heading takes the clearance rather than the body, because widening
   the body's end padding would shove the CTA 56px off the edge too. */
.m-popup__heading { margin: 0; font-family: var(--m-font-display); font-weight: 700; font-size: var(--m-fs-l); padding-inline-end: var(--m-sp-7); }
.m-popup__text { margin: 0; color: var(--m-muted); }

.m-popup--sheet .m-popup__panel {
  inset-inline: 0; bottom: 0;
  border-radius: var(--m-r-l) var(--m-r-l) 0 0;
  transform: translateY(102%);
  padding-bottom: env(safe-area-inset-bottom);
}
.m-popup--sheet.is-open .m-popup__panel { transform: translateY(0); }
@media (min-width: 700px) { .m-popup--sheet .m-popup__panel { inset-inline: auto; inset-inline-start: var(--m-sp-5); bottom: var(--m-sp-5); width: 400px; border-radius: var(--m-r-l); } }

.m-popup--card .m-popup__scrim {
  position: absolute; inset: 0; pointer-events: auto;
  background: rgba(var(--m-text-rgb), .42);
  opacity: 0; transition: opacity var(--m-t-base) var(--m-ease);
}
.m-popup--card.is-open .m-popup__scrim { opacity: 1; }
.m-popup--card .m-popup__panel {
  inset: 0; margin: auto; height: fit-content;
  width: min(420px, calc(100vw - 2 * var(--m-sp-4)));
  border-radius: var(--m-r-l);
  transform: scale(.94); opacity: 0;
}
.m-popup--card.is-open .m-popup__panel { transform: scale(1); opacity: 1; }

.m-popup--banner .m-popup__panel {
  inset-inline: 0; top: 0;
  transform: translateY(-102%);
  border-bottom: 1px solid var(--m-line);
}
.m-popup--banner.is-open .m-popup__panel { transform: translateY(0); }
/* DS-15's own rule. It was a PHYSICAL four-value shorthand (36px on the right,
   16px on the left) while the close button is positioned LOGICALLY, so in RTL
   — every Arabic visitor, i.e. the default — the button sat over the text on
   the 16px side. Logical now, and 56px rather than 36px because 36px did not
   clear a 44px button even in LTR. */
.m-popup--banner .m-popup__body { padding-block: var(--m-sp-3); padding-inline: var(--m-sp-4) var(--m-sp-7); display: flex; align-items: center; gap: var(--m-sp-4); flex-wrap: wrap; }
.m-popup--banner .m-popup__heading { font-size: var(--m-fs-base); padding-inline-end: 0; }
.m-popup--banner .m-popup__text { font-size: var(--m-fs-s); }
.m-popup--banner .m-btn { min-height: 40px; padding-block: 6px; }

/* ---------- WhatsApp buy button ----------
   Deep green under white text: bright #1faa53 was 3.03:1 with white —
   failed contrast and read as blank in daylight. The bright green stays
   for icons/borders/the FAB (graphics need only 3:1). PL-28 + UX fix. */
.m-btn--wa { background: var(--m-wa-deep); color: #fff; box-shadow: var(--m-shadow-s); }
.m-btn--wa:hover { background: #126833; } /* --m-wa-deep at 85% toward black */
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-btn--wa:hover { background: color-mix(in srgb, var(--m-wa-deep) 85%, #000); }
}
.m-buy__wa { width: 100%; margin-bottom: var(--m-sp-4); gap: 9px; }
.m-product__lowstock {
  display: inline-block;
  color: var(--m-danger-ink); background: var(--m-danger-bg);
  font-size: var(--m-fs-xs); font-weight: 700;
  border-radius: var(--m-r-pill); padding: 3px 12px;
  margin: 0 0 var(--m-sp-3);
}

/* ---------- The pro footer ---------- */
.m-footer { background: var(--m-surface); border-top: 1px solid var(--m-line); margin-top: var(--m-sp-8); }
.m-footer__grid {
  max-width: var(--m-container); margin-inline: auto;
  padding: var(--m-sp-7) var(--m-sp-4) var(--m-sp-5);
  display: grid; gap: var(--m-sp-6);
}
@media (min-width: 800px) { .m-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--m-sp-5); } }
.m-footer__brand { font-family: var(--m-font-display); font-weight: 700; font-size: var(--m-fs-l); margin: 0 0 var(--m-sp-2); }
.m-footer__tagline { color: var(--m-muted); margin: var(--m-sp-2) 0 0; max-width: 34ch; }
.m-footer__head { font-weight: 700; font-size: var(--m-fs-s); margin: 0 0 var(--m-sp-2); }
.m-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.m-footer__col a { color: var(--m-muted); text-decoration: none; transition: color var(--m-t-fast) var(--m-ease); }
.m-footer__col a:hover { color: var(--m-primary); }
.m-footer__plain { color: var(--m-muted); }
.m-footer__bar {
  border-top: 1px solid var(--m-line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--m-sp-3); flex-wrap: wrap;
  max-width: var(--m-container); margin-inline: auto;
  padding: var(--m-sp-3) var(--m-sp-4);
  font-size: var(--m-fs-xs); color: var(--m-muted);
}
.m-footer__cod::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--m-accent); margin-inline-end: 7px;
  box-shadow: inset 0 0 0 1px rgba(var(--m-text-rgb), .22);
}
.m-footer__credit strong { color: var(--m-text); font-weight: 700; }

/* ---------- Section library ---------- */
.m-richtext { max-width: 72ch; }
.m-richtext__body { color: var(--m-muted); font-size: var(--m-fs-m); line-height: 1.9; }

.m-imgtext { display: grid; gap: var(--m-sp-5); align-items: center; }
@media (min-width: 800px) {
  .m-imgtext { grid-template-columns: 1fr 1fr; gap: var(--m-sp-7); }
  .m-imgtext--flip .m-imgtext__media { order: 2; }
}
.m-imgtext__media img { width: 100%; border-radius: var(--m-r-l); box-shadow: var(--m-ring); aspect-ratio: 4/3; object-fit: cover; background: var(--m-surface-2); }
.m-imgtext__body p { color: var(--m-muted); }
.m-imgtext__body .m-btn { margin-top: var(--m-sp-2); }

.m-trio__grid { display: grid; gap: var(--m-sp-4); }
@media (min-width: 700px) { .m-trio__grid { grid-template-columns: repeat(3, 1fr); } }
.m-trio__cell {
  text-align: center; padding: var(--m-sp-5) var(--m-sp-4);
  background: var(--m-surface); border-radius: var(--m-r-l);
}
.m-trio__icon {
  display: inline-grid; place-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--m-primary-soft); color: var(--m-primary);
  margin-bottom: var(--m-sp-3);
}
.m-trio__cell h3 { margin: 0 0 4px; font-size: var(--m-fs-base); }
.m-trio__cell p { margin: 0; color: var(--m-muted); font-size: var(--m-fs-s); }

.m-statsrow { background: var(--m-primary); border-radius: var(--m-r-l); color: var(--m-on-primary); padding: var(--m-sp-6) var(--m-sp-4); }
.m-statsrow__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--m-sp-5) var(--m-sp-3); text-align: center; }
@media (min-width: 700px) { .m-statsrow__grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } }
.m-statsrow__cell { font-size: var(--m-fs-s); opacity: .92; }
.m-statsrow__cell span {
  display: block; font-family: var(--m-font-display); font-weight: 700;
  font-size: var(--m-fs-xl); font-variant-numeric: tabular-nums; opacity: 1;
}

.m-faq { max-width: 760px; }
.m-faq__item { border-bottom: 1px solid var(--m-line); }
.m-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--m-sp-3);
  padding: var(--m-sp-4) 2px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--m-fs-m);
}
.m-faq__item summary::-webkit-details-marker { display: none; }
.m-faq__sign { position: relative; width: 18px; height: 18px; flex: none; color: var(--m-primary); }
.m-faq__sign::before, .m-faq__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; border-radius: 2px;
  transition: transform var(--m-t-fast) var(--m-ease);
}
.m-faq__sign::before { width: 16px; height: 2.4px; }
.m-faq__sign::after { width: 2.4px; height: 16px; }
.m-faq__item[open] .m-faq__sign::after { transform: rotate(90deg); }
.m-faq__a { padding: 0 2px var(--m-sp-4); color: var(--m-muted); }

.m-quotebig { text-align: center; max-width: 680px; margin-inline: auto; }
.m-quotebig__img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: var(--m-ring); margin-bottom: var(--m-sp-3); }
.m-quotebig blockquote {
  margin: 0; font-family: var(--m-font-display); font-weight: 700;
  font-size: var(--m-fs-l); line-height: 1.7;
}
.m-quotebig figcaption { margin-top: var(--m-sp-3); color: var(--m-muted); }

.m-ctaband {
  background: var(--m-primary); color: var(--m-on-primary);
  border-radius: var(--m-r-l); text-align: center;
  padding: var(--m-sp-7) var(--m-sp-4);
}
.m-ctaband h2 { margin: 0 0 var(--m-sp-2); font-size: var(--m-fs-xl); }
.m-ctaband p { margin: 0 0 var(--m-sp-4); opacity: .92; }
.m-ctaband--soft { background: var(--m-accent-wash); color: var(--m-text); }

.m-offer { background: var(--m-primary); border-radius: var(--m-r-l); color: var(--m-on-primary); }
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-offer { background: linear-gradient(120deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 72%, var(--m-accent))); }
}
.m-offer__inner { padding: var(--m-sp-6) var(--m-sp-5); display: grid; gap: var(--m-sp-2); justify-items: start; }
.m-offer__inner h2 { margin: 0; font-size: var(--m-fs-xl); }
.m-offer__inner p { margin: 0; opacity: .92; }
.m-offer__count { margin: 4px 0 var(--m-sp-2); font-size: var(--m-fs-m); padding: 4px 16px; }
@media (min-width: 700px) { .m-offer__inner { justify-items: center; text-align: center; } }

.m-spot { position: relative; border-radius: var(--m-r-l); overflow: hidden; min-height: 380px; display: grid; align-items: end; background: var(--m-surface-2); }
.m-spot__media { position: absolute; inset: 0; }
.m-spot__media img { width: 100%; height: 100%; object-fit: cover; }
.m-spot__panel {
  position: relative; z-index: 1;
  background: linear-gradient(to top, rgba(var(--m-text-rgb), .78), transparent);
  color: #fff; padding: var(--m-sp-7) var(--m-sp-5) var(--m-sp-5);
  display: grid; gap: var(--m-sp-2); justify-items: start;
}
.m-spot__panel h2 { margin: 0; font-size: var(--m-fs-xl); }
.m-spot__panel p { margin: 0; opacity: .95; max-width: 44ch; }

.m-catrail__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--m-sp-3); }
.m-catrail__all { color: var(--m-primary); font-weight: 700; font-size: var(--m-fs-s); text-decoration: none; }
.m-catrail__track {
  list-style: none; margin: 0; padding: 2px 2px var(--m-sp-3);
  display: flex; gap: var(--m-sp-3); overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.m-catrail__cell { flex: 0 0 46%; scroll-snap-align: start; }
@media (min-width: 700px) { .m-catrail__cell { flex-basis: 240px; } }
.m-catrail__cell .m-card { height: 100%; }

.m-lookbook__grid { display: grid; gap: var(--m-sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .m-lookbook__grid { grid-template-columns: repeat(3, 1fr); } }
.m-lookbook__grid figure { margin: 0; }
.m-lookbook__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--m-r); box-shadow: var(--m-ring); background: var(--m-surface-2); }
.m-lookbook__grid--4 { grid-template-columns: repeat(2, 1fr); }

.m-delivtable table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--m-line); border-radius: var(--m-r); overflow: hidden; }
.m-delivtable th, .m-delivtable td { padding: var(--m-sp-3) var(--m-sp-4); text-align: start; border-bottom: 1px solid var(--m-line); background: var(--m-bg); }
.m-delivtable thead th { background: var(--m-surface); font-size: var(--m-fs-s); }
.m-delivtable tr:last-child > * { border-bottom: 0; }
.m-delivtable td { font-variant-numeric: tabular-nums; }
.m-delivtable__free { font-weight: 700; color: var(--m-primary); margin: var(--m-sp-3) 0 0; }
.m-delivtable__note { color: var(--m-muted); font-size: var(--m-fs-xs); margin: 4px 0 0; }

.m-contactblock__grid { display: grid; gap: var(--m-sp-3); }
@media (min-width: 700px) { .m-contactblock__grid { grid-template-columns: repeat(3, 1fr); } }
.m-contactblock__cell {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  background: var(--m-surface); border-radius: var(--m-r-l);
  padding: var(--m-sp-5) var(--m-sp-4);
  color: var(--m-text); text-decoration: none;
  transition: transform var(--m-t-fast) var(--m-ease), box-shadow var(--m-t-fast) var(--m-ease);
}
a.m-contactblock__cell:hover { transform: translateY(-2px); box-shadow: var(--m-shadow-s); }
.m-contactblock__cell span:last-child { color: var(--m-muted); font-size: var(--m-fs-s); }
.m-contactblock__icon, .m-contactblock__cell > svg { color: var(--m-primary); }
.m-contactblock__cell--wa > svg { color: var(--m-wa); }


/* Config pages: hero head shares the .m-page title motif */
.m-cfgpage { padding-block: var(--m-sp-6) 0; }
.m-cfgpage .m-title { position: relative; padding-bottom: var(--m-sp-3); }
.m-cfgpage .m-title::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 74px; height: 8px;
  background:
    radial-gradient(circle 4px at 5px 4px,  var(--m-primary) 98%, transparent),
    radial-gradient(circle 4px at 21px 4px, var(--m-primary) 98%, transparent),
    radial-gradient(circle 4px at 37px 4px, var(--m-accent) 98%, transparent),
    radial-gradient(circle 4px at 53px 4px, var(--m-accent) 98%, transparent),
    radial-gradient(circle 4px at 69px 4px, var(--m-accent) 98%, transparent);
  background-repeat: no-repeat;
}
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-cfgpage .m-title::after {
    background:
      radial-gradient(circle 4px at 5px 4px,  var(--m-primary) 98%, transparent),
      radial-gradient(circle 4px at 21px 4px, color-mix(in srgb, var(--m-primary) 70%, var(--m-accent)) 98%, transparent),
      radial-gradient(circle 4px at 37px 4px, color-mix(in srgb, var(--m-primary) 40%, var(--m-accent)) 98%, transparent),
      radial-gradient(circle 4px at 53px 4px, var(--m-accent) 98%, transparent),
      radial-gradient(circle 4px at 69px 4px, color-mix(in srgb, var(--m-accent) 60%, var(--m-bg)) 98%, transparent);
    background-repeat: no-repeat;
  }
}
.m-checkout-reassure { color: var(--m-muted); margin: calc(-1 * var(--m-sp-3)) 0 var(--m-sp-5); }

/* ==================================================================
   v1.2.0 — the premium pass.
   Quiet luxury: whitespace does the talking, ornament retired,
   photography forward, interactions calm and confident.
   ================================================================== */

/* Section rhythm: rooms, not corridors. */
@media (min-width: 1000px) {
  /* (the old `.m-section { padding-block: 96px }` here was dead —
     refine's unconditional clamp() always won by document order) */
  .m-hero + .m-section, .m-section:first-child { padding-block-start: 72px; }
}

/* Sale badge: a fact, not a firework. */
.m-badge--sale {
  background: var(--m-text); color: var(--m-bg);
  font-size: var(--m-fs-xs); font-weight: 700; letter-spacing: .01em;
  padding: 5px 10px; border-radius: var(--m-r-s);
  font-variant-numeric: tabular-nums;
}
/* §3.6a. The other two states one badge slot can be in — matjari_card_badge()
   picks exactly one, so these never share a corner and none of this needs
   :has() (DS-17 rules that out on the WebViews this fleet still serves).
   Sold out is deliberately quiet and deliberately opaque: it sits on a
   photograph, and a translucent chip over an unknown image is unreadable. */
.m-badge--out {
  background: rgba(var(--m-text-rgb), .82); color: var(--m-bg);
  font-size: var(--m-fs-xs); font-weight: 700;
  padding: 5px 10px; border-radius: var(--m-r-s);
}
.m-badge--new {
  background: var(--m-primary); color: var(--m-on-primary);
  font-size: var(--m-fs-xs); font-weight: 700;
  padding: 5px 10px; border-radius: var(--m-r-s);
}
/* The whole card reads as unavailable, not just its corner. The class is
   WooCommerce's own (wc_product_class), so there is no second source of truth
   about what is in stock. */
.m-card.outofstock .m-card__media img { opacity: .62; }

/* Quick add on cards. */
.m-card__quick {
  position: absolute; inset-inline-end: 10px; bottom: 10px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--m-bg); color: var(--m-text);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 16px -6px rgba(var(--m-text-rgb), .45);
  transition: transform var(--m-t-fast) var(--m-ease), background var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease), opacity var(--m-t-base) var(--m-ease);
}
.m-card__quick:hover { background: var(--m-primary); color: var(--m-on-primary); transform: scale(1.06); }
.m-card__quick:active { transform: scale(.94); }
.m-card__quick.is-busy { pointer-events: none; }
.m-card__quick.is-busy > svg { opacity: 0; }
.m-card__quick.is-busy::after {
  content: ""; position: absolute; inline-size: 15px; block-size: 15px;
  border: 2px solid rgba(var(--m-text-rgb), .25);
  border-top-color: var(--m-text);
  border-radius: 50%;
  animation: m-quick-spin 620ms linear infinite;
}
.m-card__quick.is-done { background: var(--m-primary); color: var(--m-on-primary); }
.m-card__quick.is-done > svg { opacity: 0; }
.m-card__quick.is-done::after {
  content: ""; position: absolute;
  inline-size: 6px; block-size: 11px; margin-block-start: -2px;
  border: 2px solid currentColor; border-block-start: 0; border-inline-start: 0;
  transform: rotate(45deg);
}
@keyframes m-quick-spin { to { transform: rotate(360deg); } }
/* Not a twin of the add button: a variable product goes to its own page to
   pick options, and wearing the same plus glyph was the whole reason tapping
   it read as "nothing happened". */
.m-card__quick--go {
  pointer-events: none;
  width: auto; height: auto; padding: 7px 12px;
  border-radius: var(--m-r-pill);
  background: rgba(var(--m-bg-rgb), .92);
  color: var(--m-text);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--m-fs-2xs); font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 16px -6px rgba(var(--m-text-rgb), .45), var(--m-ring);
}
[dir="rtl"] .m-card__quick--go svg { transform: scaleX(-1); }
@media (hover: hover) and (min-width: 800px) {
  .m-card__quick { opacity: 0; transform: translateY(6px); }
  /* .is-busy / .is-done must be in this list or the press state is literally
     invisible on desktop: it would be opacity .55 of an element at opacity 0. */
  .m-card__link:hover .m-card__quick,
  .m-card__quick:focus-visible,
  .m-card__quick.is-busy,
  .m-card__quick.is-done { opacity: 1; transform: none; }
}

/* ≈USD — quiet, secondary, ltr. */
.m-usd { color: var(--m-muted); font-weight: 500; font-size: .78em; font-family: var(--m-font-text); white-space: nowrap; }

/* The retired divider becomes a hairline breath. (Merged with the old
   base-layer rule it used to override — Phase 2.5 PL-22.) */
.m-divider { display: grid; place-content: center; padding-block: var(--m-sp-6); }
.m-divider__rule { border: 0; height: 1px; max-width: 220px; margin-inline: auto; background: var(--m-line-strong); }

/* Zoom signpost on the product gallery. */
.m-product__gallery { position: relative; }
.m-product__zoomhint {
  position: absolute; z-index: 2; inset-inline-start: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--m-r-pill);
  background: rgba(var(--m-bg-rgb), .82);
  backdrop-filter: blur(6px);
  color: var(--m-text); font-size: var(--m-fs-xs); font-weight: 600;
  pointer-events: none;
}

/* ---------- Lightbox ---------- */
.m-lightbox {
  position: fixed; inset: 0; z-index: 220;
  background: var(--m-text);
  opacity: 0; pointer-events: none;
  transition: opacity var(--m-t-base) var(--m-ease);
}
@supports (color: color-mix(in srgb, red 50%, red)) {
  .m-lightbox { background: color-mix(in srgb, var(--m-text) 92%, #000); }
}
.m-lightbox.is-open { opacity: 1; pointer-events: auto; }
.m-lightbox__track {
  height: 100%; display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.m-lightbox__track::-webkit-scrollbar { display: none; }
.m-lightbox__cell {
  flex: 0 0 100%; height: 100%; scroll-snap-align: center;
  display: grid; place-items: center; overflow: hidden;
  padding: 48px 8px;
}
.m-lightbox__cell img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  user-select: none; cursor: zoom-in;
  transition: none;
}
.m-lightbox__cell.is-zoomed { display: block; overflow: auto; padding: 0; cursor: grab; }
.m-lightbox__cell.is-zoomed img { max-width: none; max-height: none; width: 230%; cursor: zoom-out; }
.m-lightbox__close {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(var(--m-bg-rgb), .16);
  color: var(--m-bg); font-size: 26px; line-height: 1; cursor: pointer;
}
.m-lightbox__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(var(--m-bg-rgb), .14);
  color: var(--m-bg); font-size: 30px; line-height: 1; cursor: pointer;
  display: none;
}
.m-lightbox__arrow--prev { inset-inline-start: 14px; }
.m-lightbox__arrow--next { inset-inline-end: 14px; }
@media (hover: hover) and (min-width: 800px) { .m-lightbox__arrow { display: grid; place-items: center; } }
.m-lightbox__count {
  position: absolute; bottom: 16px; inset-inline: 0; text-align: center;
  color: rgba(var(--m-bg-rgb), .85);
  font-size: var(--m-fs-s); font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ---------- Order tracking ---------- */
.m-track {
  background: var(--m-surface); border: 1px solid var(--m-line);
  border-radius: var(--m-r-l); padding: var(--m-sp-5);
  margin-bottom: var(--m-sp-6);
}
.m-track__title { font-size: var(--m-fs-l); margin-bottom: 4px; }
.m-track__sub { color: var(--m-muted); font-size: var(--m-fs-s); margin-bottom: var(--m-sp-4); }
.m-track__row { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 10px; }
@media (max-width: 699px) { .m-track__row { grid-template-columns: 1fr; } }
.m-track__row input {
  border: 1px solid var(--m-line-strong); border-radius: var(--m-r-s);
  padding: 12px 14px; font: inherit; background: var(--m-bg); color: var(--m-text);
  min-height: var(--m-touch);
}
.m-track__row input:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 1px; }
.m-track__err { color: var(--m-danger-ink); font-size: var(--m-fs-s); margin-top: 10px; }
.m-track__result { margin-top: var(--m-sp-5); }
.m-track__meta { color: var(--m-muted); font-size: var(--m-fs-s); margin-bottom: var(--m-sp-4); }
.m-steps { display: grid; gap: 0; }
.m-steps li {
  list-style: none; position: relative;
  padding-inline-start: 34px; padding-block: 10px;
  color: var(--m-muted);
}
.m-steps li::before {
  content: ""; position: absolute; inset-inline-start: 8px; top: 16px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--m-bg); border: 2px solid var(--m-line-strong);
}
.m-steps li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 13px; top: 30px; bottom: -8px;
  width: 2px; background: var(--m-line);
}
.m-steps li.is-done { color: var(--m-text); font-weight: 600; }
.m-steps li.is-done::before { background: var(--m-primary); border-color: var(--m-primary); }
.m-steps li.is-done:not(:last-child)::after { background: var(--m-primary); }
.m-steps li.is-now { color: var(--m-primary); font-weight: 700; }

/* ---------- My Account, dressed for the house ---------- */
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 var(--m-sp-6); }
.woocommerce-MyAccount-navigation li { list-style: none; }
.woocommerce-MyAccount-navigation a {
  display: block; padding: 9px 16px; border-radius: var(--m-r-pill);
  border: 1px solid var(--m-line-strong); text-decoration: none;
  color: var(--m-text); font-size: var(--m-fs-s); font-weight: 600;
  transition: background var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease), border-color var(--m-t-fast) var(--m-ease);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover { background: var(--m-text); border-color: var(--m-text); color: var(--m-bg); }
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: var(--m-fs-s); }
.woocommerce-orders-table th { text-align: start; color: var(--m-muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--m-line-strong); }
.woocommerce-orders-table td { padding: 14px 12px; border-bottom: 1px solid var(--m-line); }

/* v1.2.1 hardening */
.m-badge--sale { direction: ltr; unicode-bidi: isolate; }
.m-related { grid-template-columns: repeat(auto-fit, minmax(190px, 250px)); justify-content: center; }
body.admin-bar .m-drawer, body.admin-bar .m-minicart, body.admin-bar .m-lightbox { inset-block-start: 32px; }
/* 782px is WordPress's admin-bar breakpoint — a WP constant, never part
   of the design scale (DS-11 exception, allowlisted in the tests). */
@media (max-width: 782px) { body.admin-bar .m-drawer, body.admin-bar .m-minicart, body.admin-bar .m-lightbox { inset-block-start: 46px; } }

/* ==================================================================
   v1.3.0 — visitor currency, filters, wishlist, RTL pagination.
   ================================================================== */


/* Prices in the visitor's chosen currency. */
.m-price-approx { font-weight: 700; }
.m-price-org { color: var(--m-muted); font-weight: 400; font-size: .8em; }
.m-price-org del, .m-price-org ins { color: inherit; text-decoration-color: currentColor; }
.m-curnote {
  background: var(--m-surface); border: 1px dashed var(--m-line-strong);
  border-radius: var(--m-r-s); padding: 9px 14px; margin-bottom: var(--m-sp-4);
  color: var(--m-muted); font-size: var(--m-fs-s);
}

/* The shop toolbar. */
.m-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: var(--m-sp-4);
}
.m-toolbar__count { color: var(--m-muted); font-size: var(--m-fs-s); margin-inline-end: auto; }
.m-toolbar__filter {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--m-line-strong); background: var(--m-bg); color: var(--m-text);
  border-radius: var(--m-r-pill); padding: 9px 15px; min-height: var(--m-touch);
  font: inherit; font-size: var(--m-fs-s); font-weight: 600; cursor: pointer;
  position: relative;
  transition: border-color var(--m-t-fast) var(--m-ease), background var(--m-t-fast) var(--m-ease);
}
.m-toolbar__filter:hover { border-color: var(--m-text); }
.m-toolbar__dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--m-primary); }
.m-toolbar__filter.has-active .m-toolbar__dot { display: block; }
/* THE sort select — one merged rule (PL-23): refine's skin used to win
   at equal specificity and erase the 44px touch target; its currentColor
   chevron replaces the hardcoded-grey SVG data-URI for good. */
.m-sort { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.m-sort select {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--m-line-strong); background: var(--m-bg); color: var(--m-text);
  border-radius: var(--m-r-pill); padding: 8px 36px 8px 18px; min-height: var(--m-touch);
  font: inherit; font-size: var(--m-fs-sm); font-weight: 700; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
[dir="rtl"] .m-sort select { padding: 8px 18px 8px 36px; background-position: 20px 55%, 15px 55%; }

/* Filter panel.

   THE OPEN UX NOTE ("the filter panel is misaligned"), and it is one
   declaration. Measured at 777px RTL before the fix: the trigger's inline-end
   edge sat at x=184 while the panel's was at x=226 and its body ran 462px away
   toward the opposite side of the row — because the count carries
   `margin-inline-end: auto`, which pushes the trigger to the toolbar's
   inline-END, while a block in flow anchors to the container's inline-START.
   The same container mismatch §3.2 measured on the preferences popover.

   `margin-inline-start: auto` puts this panel's inline-end edge on the
   container's inline-end edge, and archive-product.php renders the trigger LAST
   in the toolbar so that edge is the trigger's too. One shared edge at every
   width, in both directions, with no positioning, no containing block and no
   magic number — and below 520px it is simply full width, which is what it
   always was on a phone and why the note reads as a desktop complaint.

   Absolute positioning against the trigger was tried first and rejected by
   measurement: inside a flex item the panel is sized by the item, so between
   700 and 799px it collapsed to 353px in the middle of the row, and at exactly
   700px a 520px panel hung 20px past the container in RTL and 4px past the
   VIEWPORT in LTR. */
.m-filter {
  background: var(--m-bg); border: 1px solid var(--m-line-strong);
  border-radius: var(--m-r-l); padding: var(--m-sp-5);
  margin-bottom: var(--m-sp-5); margin-inline-start: auto;
  display: grid; gap: 14px; max-width: 520px;
  box-shadow: var(--m-shadow-s);
}
.m-filter__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-filter__label { font-weight: 700; font-size: var(--m-fs-s); min-width: 44px; }
.m-filter__row input[type="number"] {
  width: 110px; direction: ltr; text-align: center;
  border: 1px solid var(--m-line-strong); border-radius: var(--m-r-s);
  padding: 9px 10px; font: inherit; background: var(--m-bg); color: var(--m-text);
}
.m-filter__dash { color: var(--m-muted); }
.m-filter__check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--m-fs-s); font-weight: 600; }
.m-filter__check input { position: absolute; opacity: 0; pointer-events: none; }
.m-filter__check i {
  width: 21px; height: 21px; border-radius: 7px; flex: none;
  border: 1.6px solid var(--m-line-strong); background: var(--m-bg);
  display: grid; place-items: center;
  transition: background var(--m-t-fast) var(--m-ease), border-color var(--m-t-fast) var(--m-ease);
}
.m-filter__check input:checked + i { background: var(--m-primary); border-color: var(--m-primary); }
.m-filter__check input:checked + i::after {
  content: ""; width: 11px; height: 6px;
  border-inline-start: 2.2px solid var(--m-on-primary); border-block-end: 2.2px solid var(--m-on-primary);
  transform: rotate(-45deg) translateY(-1px);
}
.m-filter__actions { display: flex; align-items: center; gap: 14px; }
.m-filter__clear { color: var(--m-muted); font-size: var(--m-fs-s); }

/* ---------- §3.6a: the category's own page, the attribute axes, share ------ */

/* The category hero. She can set a picture per category (§3.4c) and until now
   only the home tiles read it, so the page the tile links to ignored it. */
.m-cathero {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--m-sp-4); align-items: center;
  margin-block: var(--m-sp-3) var(--m-sp-4);
}
.m-cathero--text { grid-template-columns: minmax(0, 1fr); }
.m-cathero__media {
  inline-size: 96px; block-size: 96px; border-radius: var(--m-r);
  overflow: hidden; background: var(--m-surface-2);
}
.m-cathero__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.m-cathero__text { color: var(--m-muted); font-size: var(--m-fs-s); }
.m-cathero__text p { margin: 0; }
.m-cathero__text p + p { margin-block-start: var(--m-sp-2); }
@media (min-width: 700px) {
  .m-cathero { grid-template-columns: 132px minmax(0, 1fr); gap: var(--m-sp-5); }
  .m-cathero__media { inline-size: 132px; block-size: 132px; }
}

/* Attribute filter chips. Links, not checkboxes: WooCommerce reads
   `filter_pa_x` as one comma-separated string (see matjari_shop_axis_url). */
.m-axes { display: grid; gap: var(--m-sp-3); margin-bottom: var(--m-sp-5); }
.m-axes__row { display: grid; gap: var(--m-sp-2); }
.m-axes__label { font-weight: 700; font-size: var(--m-fs-s); }
.m-axes__chips {
  display: flex; gap: var(--m-sp-2); overflow-x: auto;
  padding: 2px 2px var(--m-sp-2);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.m-axes__chips::-webkit-scrollbar { display: none; }
.m-swatchchip {
  flex: none; display: inline-flex; align-items: center; gap: var(--m-sp-2);
  min-height: var(--m-touch); padding: 6px 16px;
  border: 1px solid var(--m-line-strong); border-radius: var(--m-r-pill);
  background: var(--m-bg); color: var(--m-text); text-decoration: none;
  font-size: var(--m-fs-s); white-space: nowrap;
  transition: background-color var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease), border-color var(--m-t-fast) var(--m-ease);
}
.m-swatchchip:hover { border-color: var(--m-text); }
.m-swatchchip.is-active { background: var(--m-primary); border-color: var(--m-primary); color: var(--m-on-primary); }
.m-swatchchip__dot {
  inline-size: 16px; block-size: 16px; border-radius: 50%; flex: none;
  background: var(--dot, var(--m-surface-2));
}
/* A pale shade needs a ring or it is a hole in the chip — the same rule
   .m-swatch__chip--light already follows on the product page. */
.m-swatchchip__dot.is-light { box-shadow: inset 0 0 0 1px var(--m-line-strong); }
.m-swatchchip.is-active .m-swatchchip__dot { box-shadow: inset 0 0 0 1px var(--m-on-primary); }

/* The product page's details block (§3.6b): the promises the store makes and
   the description she wrote, as one thing rather than three loose siblings
   below the button. */
.m-product__details {
  margin-block-start: var(--m-sp-5);
  border-block-start: 1px solid var(--m-line);
  padding-block-start: var(--m-sp-5);
  display: grid; gap: var(--m-sp-4);
}
.m-product__desch {
  font-family: var(--m-font-display); font-weight: 700;
  font-size: var(--m-fs-m); margin: 0 0 var(--m-sp-2);
}
/* The WhatsApp button and share sit on one row; share never competes with it
   for width, because one of them is a way to buy and the other is not. */
.m-product__actions { display: flex; align-items: center; gap: var(--m-sp-3); flex-wrap: wrap; }
.m-product__actions .m-buy__wa { flex: 1 1 auto; }
.m-product__share { flex: 0 0 auto; }
/* The scarcity line, whichever side computed it. */
.m-buy__stock.is-low { color: var(--m-danger-ink); font-weight: 700; }

/* Share: one control, two consumers (the wishlist here, the product page). */
.m-share {
  display: inline-flex; align-items: center; gap: var(--m-sp-2);
  min-height: var(--m-touch); padding: 8px 18px;
  border: 1px solid var(--m-line-strong); border-radius: var(--m-r-pill);
  background: var(--m-bg); color: var(--m-text); cursor: pointer;
  font: inherit; font-size: var(--m-fs-s); font-weight: 600;
  transition: border-color var(--m-t-fast) var(--m-ease), background-color var(--m-t-fast) var(--m-ease);
}
.m-share:hover { border-color: var(--m-text); background: var(--m-surface-2); }
.m-share:active { transform: scale(.98); }
.m-shop__share { margin-block: var(--m-sp-3) var(--m-sp-2); }

/* Wishlist hearts. */
.m-wish {
  border: 0; background: var(--m-bg); color: var(--m-text); cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  transition: color var(--m-t-fast) var(--m-ease), transform var(--m-t-fast) var(--m-ease);
}
.m-wish svg path { transition: fill var(--m-t-fast) var(--m-ease); }
.m-wish.is-in { color: var(--m-wish); }
.m-wish.is-in svg path { fill: currentColor; }
.m-wish.is-pop { animation: m-wishpop .32s var(--m-ease); }
@keyframes m-wishpop { 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* Opposite corner from .m-badge, which keeps inline-start. See the
   --m-card-inset note beside .m-card. */
.m-wish--card {
  position: absolute; inset-inline-end: var(--m-card-inset); top: var(--m-card-inset); z-index: 2;
  width: var(--m-wish-size); height: var(--m-wish-size);
  box-shadow: 0 3px 12px -5px rgba(var(--m-text-rgb), .45);
}
.m-wish--page { width: 42px; height: 42px; background: var(--m-surface); flex: none; }
.m-product__titlerow { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }

/* Pagination that reads with the page — the ONE rule set (PL-21:
   refine's skin folded in; 42px boxes restored to the 44px target). */
.woocommerce-pagination { margin-top: var(--m-sp-6); text-align: center; }
.woocommerce-pagination ul {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  list-style: none; padding: 0; margin: 0;
}
.woocommerce-pagination .page-numbers {
  display: grid; place-items: center;
  min-width: var(--m-touch); height: var(--m-touch); padding: 0 6px;
  border: 1.5px solid var(--m-line-strong); border-radius: var(--m-r);
  color: var(--m-text); text-decoration: none; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease), border-color var(--m-t-fast) var(--m-ease);
}
.woocommerce-pagination a.page-numbers:hover { border-color: var(--m-text); }
.woocommerce-pagination .page-numbers.current { background: var(--m-text); border-color: var(--m-text); color: var(--m-bg); }
.woocommerce-pagination .page-numbers.dots { border: 0; min-width: 20px; }
.m-page-arrow { display: grid; place-items: center; }
.m-page-arrow--prev svg { transform: scaleX(-1); }
[dir="rtl"] .m-page-arrow--prev svg { transform: none; }
[dir="rtl"] .m-page-arrow--next svg { transform: scaleX(-1); }

/* Drawer: the "me" links + roomier steppers. */
.m-drawer__list--me { border-top: 1px solid var(--m-line); margin-top: var(--m-sp-3); padding-top: var(--m-sp-3); }
.m-drawer__list--me a { color: var(--m-muted); font-size: var(--m-fs-s); }
[data-mini-qty] button { min-width: 34px; min-height: 34px; font-size: 1.05rem; }

/* ==================================================================
   v1.5.0 — THE header system. The only place header rules may live.
   Scoped under .m-header so no stray selector can ever outrank it.
   Three zones on a strict grid · icon cluster · gear preferences ·
   sticky with quiet compaction · four styles.
   ================================================================== */
.m-header {
  position: sticky; top: 0; z-index: 55;
  background: rgba(var(--m-bg-rgb), .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--m-t-base) var(--m-ease), box-shadow var(--m-t-base) var(--m-ease);
}
.m-header.is-scrolled {
  border-bottom-color: var(--m-line);
  box-shadow: 0 6px 22px -18px rgba(var(--m-text-rgb), .55);
}
body.admin-bar .m-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .m-header { top: 46px; } }

/* Variant geometry, expressed by re-pointing the tokens on the body class the
   body_class filter already emits — never by adding another rule. Anything
   that has to clear the header reads --m-header-clear and stays correct for
   all four variants, which is how the editorial nav stopped hiding the cart
   totals underneath itself. The -sm and -row values sit inside the media
   query because that is where today's behaviour already differed: the
   compacted editorial height was desktop-only while its rest height was not. */
body.admin-bar { --m-header-top: 32px; }
@media (max-width: 782px) { body.admin-bar { --m-header-top: 46px; } }
body.nav--editorial { --m-header-h: 74px; }
@media (min-width: 1000px) {
  body.nav--editorial   { --m-header-h-sm: 58px; --m-header-row: 44px; }
  body.nav--logo-center { --m-header-row: 44px; }
}

.m-header .m-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px;
  max-width: var(--m-container); margin-inline: auto;
  min-height: var(--m-header-h); padding-inline: clamp(14px, 4vw, 28px);
  transition: min-height var(--m-t-base) var(--m-ease);
}
.m-header.is-scrolled .m-nav { min-height: var(--m-header-h-sm); }

.m-header .m-nav__group { display: inline-flex; align-items: center; gap: 4px; justify-self: start; min-width: 0; }
.m-header .m-nav__group--icons { justify-self: end; gap: 0; }

.m-header .m-nav__brand {
  grid-column: 2; justify-self: center;
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--m-text); min-width: 0;
}
.m-header .m-nav__brand img { max-height: 40px; width: auto; display: block; transition: max-height var(--m-t-base) var(--m-ease); }
.m-header.is-scrolled .m-nav__brand img { max-height: 34px; }
.m-header .m-nav__wordmark {
  font-family: var(--m-font-display); font-weight: 800;
  font-size: clamp(1.1rem, 3.4vw, 1.45rem);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Icons: uniform circles, badges that never collide with neighbours. */
.m-header .m-nav__icon {
  position: relative; display: grid; place-items: center;
  width: var(--m-touch); height: var(--m-touch);
  color: var(--m-text); text-decoration: none;
  background: none; border: 0; cursor: pointer; border-radius: 50%;
  transition: background var(--m-t-fast) var(--m-ease);
}
.m-header .m-nav__icon:hover { background: var(--m-surface-2); }
/* The ONE cart/wishlist badge rule (refine's losing layer folded in —
   grid centering was its only live contribution. Phase 2.5 PL-24). */
.m-header .m-nav__count {
  position: absolute; top: 4px; inset-inline-end: 3px;
  min-width: 17px; height: 17px; padding-inline: 4px;
  display: grid; place-content: center;
  border-radius: var(--m-r-pill);
  background: var(--m-primary); color: var(--m-on-primary);
  font-size: var(--m-fs-2xs); font-weight: 700;
  box-shadow: 0 0 0 2px var(--m-bg);
}
@media (max-width: 479px) {
  .m-header .m-nav__icon--search, .m-header .m-nav__icon--account { display: none; }
}

.m-header .m-nav__burger {
  width: var(--m-touch); height: var(--m-touch);
  display: grid; place-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; border-radius: 50%;
}
.m-header .m-nav__burger span { width: 20px; height: 1.8px; background: var(--m-text); border-radius: 2px; }
.m-header .m-nav__burger:hover { background: var(--m-surface-2); }

/* Inline links (desktop): growing underline, current scope marked. */
.m-header .m-nav__links { display: none; list-style: none; margin: 0; padding: 0; }
.m-header .m-nav__links a {
  position: relative; display: block; padding: 8px 2px;
  color: var(--m-text); text-decoration: none;
  font-size: var(--m-fs-s); font-weight: 600; white-space: nowrap;
}
.m-header .m-nav__links a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 1.6px;
  background: currentColor; transform: scaleX(0); transform-origin: center;
  transition: transform var(--m-t-base) var(--m-ease);
}
.m-header .m-nav__links a:hover::after, .m-header .m-nav__links a.is-current::after { transform: scaleX(1); }
.m-header .m-nav__links a.is-current { color: var(--m-primary); }
@media (min-width: 1000px) {
  .m-header .m-nav__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); min-width: 0; }
}

/* Style: side. */
.m-header .m-nav--side { grid-template-columns: auto 1fr auto; }
.m-header .m-nav--side .m-nav__brand { grid-column: auto; justify-self: start; }
.m-header .m-nav--side .m-nav__links { justify-content: center; }
@media (min-width: 1000px) { .m-header .m-nav--side .m-nav__burger { display: none; } }

/* Style: split — the flagship. */
.m-header .m-nav--split .m-nav__group:first-child { gap: clamp(14px, 2.2vw, 28px); }
@media (min-width: 1000px) { .m-header .m-nav--split .m-nav__burger { display: none; } }

/* Style: editorial. Its taller row comes from body.nav--editorial re-pointing
   --m-header-h above, so the sticky offsets learn about it too. */
.m-header .m-nav--editorial .m-nav__wordmark { font-size: clamp(1.3rem, 4vw, 1.8rem); }
.m-header .m-nav--editorial .m-nav__brand img { max-height: 48px; }
.m-header .m-nav__linkrow { display: none; }
@media (min-width: 1000px) {
  .m-header .m-nav__linkrow {
    display: flex; justify-content: center;
    border-top: 1px solid var(--m-line);
    max-width: var(--m-container); margin-inline: auto;
    padding-inline: clamp(14px, 4vw, 28px);
  }
  .m-header .m-nav__linkrow .m-nav__links { display: flex; }
  .m-header.is-scrolled .m-nav--editorial .m-nav__brand img { max-height: 36px; }
}

/* ---------- Preferences: language + currency, anchored to their trigger ----
   It used to be positioned against .m-header, which is full-bleed, while the
   trigger sits inside .m-nav (max-width 1200px, centred). On a 1600px screen
   that opened the panel roughly 220px away from the button that owns it, and
   below the whole header stack — promo bar and store notice included. It is
   now inside a wrapper with its trigger, so it can only ever open beside it.
   The max-inline-size is what keeps it on screen at 390px in either
   direction: pinned to the trigger's edge, it can only grow inward. */
.m-header .m-nav__prefs { position: relative; display: inline-flex; }
.m-header .m-nav__icon--prefs {
  width: auto; min-width: var(--m-touch);
  grid-auto-flow: column; gap: 5px;
  padding-inline: 8px; border-radius: var(--m-r-pill);
}
.m-header .m-nav__prefsnow { font-size: var(--m-fs-2xs); font-weight: 700; color: var(--m-muted); }
@media (max-width: 479px) { .m-header .m-nav__prefsnow { display: none; } }
.m-header .m-prefs {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  z-index: 60; min-inline-size: 220px;
  max-inline-size: min(280px, calc(100vw - 32px));
  background: var(--m-bg); border: 1px solid var(--m-line-strong);
  border-radius: var(--m-r-l); padding: 16px;
  box-shadow: var(--m-shadow);
  display: grid; gap: 14px;
}
.m-prefs__row { display: grid; gap: 7px; }
.m-prefs__label { font-size: var(--m-fs-xs); font-weight: 700; color: var(--m-muted); }
.m-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
  background: var(--m-surface-2); border-radius: var(--m-r-pill); padding: 3px;
}
.m-seg a {
  display: grid; place-items: center; padding: 8px 12px;
  border-radius: var(--m-r-pill); text-decoration: none;
  color: var(--m-muted); font-size: var(--m-fs-s); font-weight: 700;
  transition: background var(--m-t-fast) var(--m-ease), color var(--m-t-fast) var(--m-ease);
}
/* Brand-coloured, not ink-on-paper: a two-choice pill that fills with the
   text colour reads as a light/dark switch, which is exactly how the founder
   read it. Tokens only, so the palette census stays green. */
.m-seg a.is-active { background: var(--m-primary); color: var(--m-on-primary); }
.m-seg a:not(.is-active):hover { color: var(--m-text); }

/* ---------- Announcement: one calm line ---------- */
.m-promo {
  background: var(--m-primary); color: var(--m-on-primary);
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 6px 14px;
  padding: 9px clamp(14px, 4vw, 28px); text-align: center;
  font-size: var(--m-fs-s); font-weight: 600;
}
.m-promo a { color: inherit; text-decoration: none; }
.m-promo .m-countdown {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .82em;
  background: rgba(255,255,255,.16);
  padding: 3px 10px; border-radius: var(--m-r-pill);
}

/* v1.5.1 audit fixes */
/* The card's two corner occupants. Badge and heart both used to sit at
   top-inline-start with equal z-index and the heart later in the DOM, so it
   painted on top of the sale flag; and the framed override moved the heart to
   16px/16px, which is EXACTLY where that variant's 8px link padding puts the
   badge — it made them coincide rather than separating them. Opposite corners,
   with the inset as a token so the framed case re-points it instead of
   carrying a magic pair. Stacking them instead would need :has() to know
   whether a badge exists at all, which is the selector class DS-17 exists to
   avoid on old Android WebViews. */
.m-card { position: relative; --m-card-inset: 10px; --m-wish-size: 36px; }
.m-card--framed { --m-card-inset: 16px; }
.m-drawer__list--me li:first-child a { font-family: var(--m-font-text); font-weight: 600; color: var(--m-muted); }
[dir="ltr"] .m-lightbox__arrow--prev svg { transform: scaleX(-1); }
[dir="rtl"] .m-lightbox__arrow--next svg { transform: scaleX(-1); }
.m-track__notice {
  margin-top: var(--m-sp-4); padding: 10px 14px;
  background: var(--m-accent-wash); border-radius: var(--m-r-s);
  font-size: var(--m-fs-s);
}

/* ==================================================================
   v1.8.0 (§3.2) — the drawer as the cart.
   ================================================================== */

/* The page-path placeholder. The real cart never renders into cacheable
   HTML, so this is what the drawer holds until the fragment lands. */
.m-minicart__skeleton { display: grid; gap: 12px; padding: var(--m-sp-4); }
.m-minicart__skeleton span {
  display: block; block-size: 58px; border-radius: var(--m-r-s);
  background: var(--m-surface-2);
}
.m-minicart__empty { display: grid; gap: var(--m-sp-4); justify-items: center; padding: var(--m-sp-6) var(--m-sp-4); text-align: center; }

/* The unit price, so the stepper and the line total read as arithmetic. */
.m-minicart__unit { font-size: var(--m-fs-2xs); color: var(--m-muted); }

/* 44px hit areas without changing what anything looks like: the qty buttons
   are 26px and the remove is 32px, both well under one thumb. */
.m-minicart__qty button, .m-minicart__remove { position: relative; }
.m-minicart__qty button::after { content: ""; position: absolute; inset: -9px; }
.m-minicart__remove::after { content: ""; position: absolute; inset: -6px; }

/* The cart page's stepper is server-rendered around Woo's own .quantity div
   now (cart.js used to yank the bare input out of it at runtime), so the
   standalone-input skin has to stand down inside the pill or the field draws
   a second border within the first. */
.m-qty .quantity { display: flex; margin: 0; }
.m-woopage .m-qty .quantity .qty { border: 0; border-radius: 0; min-height: 48px; background: transparent; }

/* (v1.8.1's `.m-qty--compact` is gone in 1.8.2. Shrinking the stepper was the
   wrong lever: the cart row overflowed by single-digit pixels, so a smaller
   control only moved the point at which a bigger total clipped, and squeezing
   a 17px/1.8 line box into a 32px border-box left the number itself trimmed.
   The row stacks now, which gives that line the whole card width.) */

/* «تحديث السلة» is the no-JS update path and must never be deleted — a
   JS-dead phone has nothing else. It is hidden only once the AJAX stepper has
   actually bound (minicart.js adds .is-live), and minicart.js takes the class
   back off the moment a quantity request fails, so the classic button returns
   exactly when it is needed again. */
.woocommerce-cart-form.is-live button[name="update_cart"] { display: none; }
/* The list scrolls, not the locked page behind it. */
.m-minicart__items { overscroll-behavior: contain; }
.m-minicart__item.is-going { opacity: .45; transition: opacity var(--m-t-fast) var(--m-ease); }

/* Undo. Server-rendered inside the fragment, so the next repaint cannot wipe
   it; its expiry is an animation rather than a timer, so the node being new
   on every render restarts it and the visible window always matches
   MATJARI_UNDO_TTL. */
.m-minicart__undo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--m-sp-3);
  margin: var(--m-sp-3) var(--m-sp-4) 0;
  padding: 10px 14px; border-radius: var(--m-r-s);
  background: var(--m-surface-2); font-size: var(--m-fs-s);
  animation: m-undo-expire 60s linear forwards;
}
.m-minicart__undobtn {
  background: none; border: 0; cursor: pointer; padding: 6px 4px;
  color: var(--m-primary); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
@keyframes m-undo-expire {
  0%, 96% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Toasts. Errors only — a success is the drawer opening. Above the drawer
   (70) and the popup (80), below the lightbox (220). */
.m-toasts {
  position: fixed; z-index: 90;
  inset-inline: 0; bottom: calc(var(--m-fabclear) + env(safe-area-inset-bottom));
  display: grid; gap: 8px; justify-items: center;
  pointer-events: none; padding-inline: var(--m-sp-4);
}
/* With the drawer open the bottom of the screen belongs to its checkout
   button, so the toast moves out of the way rather than onto it. */
body.m-locked .m-toasts { bottom: auto; top: calc(var(--m-sp-4) + env(safe-area-inset-top)); }
.m-toast {
  max-inline-size: 30rem; padding: 11px 18px;
  border-radius: var(--m-r-pill);
  background: rgba(var(--m-text-rgb), .95); color: var(--m-bg);
  font-size: var(--m-fs-s); font-weight: 600; text-align: center;
  box-shadow: var(--m-shadow);
  animation: m-toast-in var(--m-t-base) var(--m-ease);
}
.m-toast.is-out { opacity: 0; transition: opacity var(--m-t-base) var(--m-ease); }
@keyframes m-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* The cart page's sticky bar needs no geometry of its own: the base class
   already carries the height, the space-between and the button's flex. What it
   must NOT do is pin itself visible — that silently outranks the .is-on the
   observer toggles, and correct JS would then change nothing on screen (the
   3.1 defect, one class name away), so there is deliberately no
   .m-sticky--cart rule here at all. */
@media (max-width: 799px) {
  body.woocommerce-cart .m-woopage { padding-bottom: calc(var(--m-fabclear) + env(safe-area-inset-bottom)); }
}

/* ==================================================================
   v1.9.0 (§3.3a) — the proof wall.
   ================================================================== */

/* Her real WhatsApp/Instagram screenshots as a swipeable rail. Same pure-CSS
   recipe as .m-catrail (no JS, no arrows, and therefore no RTL scroll
   arithmetic): the track runs full-bleed while .m-proof__head is container
   aligned via the shared width list above, so the rail keeps its
   "there is more" affordance at every width. */
.m-proof__sub { margin: 4px 0 0; color: var(--m-muted); font-size: var(--m-fs-s); }
.m-proof__track {
  list-style: none; margin: var(--m-sp-4) 0 0;
  padding-inline: var(--m-sp-4); padding-block: 2px var(--m-sp-3);
  display: flex; gap: var(--m-sp-3); overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-padding-inline-start: var(--m-sp-4);
  mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.m-proof__track::-webkit-scrollbar { display: none; }
/* 62% is deliberate peek: a half-visible next cell is what signals swipeable. */
.m-proof__cell { flex: 0 0 62%; scroll-snap-align: start; }
@media (min-width: 700px) { .m-proof__cell { flex-basis: 220px; } }

/* WhatsApp screenshots are about 9:19.5. A 1/1 crop decapitates them, and a
   full 9:19.5 cell is ~112px wide at 390px, too narrow to read. 3/5 is
   portrait enough to read as a phone screenshot and short enough that two
   fit. object-position: top is the load-bearing half — the PROOF is the
   contact name and the first message bubbles, which centre-cropping throws
   away. */
.m-proof__shot {
  margin: 0; overflow: hidden;
  background: var(--m-surface-2); border-radius: var(--m-r); box-shadow: var(--m-ring);
}
.m-proof__shot img {
  display: block; inline-size: 100%;
  aspect-ratio: 3/5; object-fit: cover; object-position: top;
}
.m-proof__cap { margin: var(--m-sp-2) 0 0; font-size: var(--m-fs-xs); color: var(--m-muted); }

/* ==================================================================
   v1.10.0 (§3.3b) — ratings and reviews.
   ================================================================== */

/* The star atom. One box, one --m-stars percentage, no ids, no per-instance
   SVG. mask-image applies to the element's whole painted subtree, so the
   ::before fill is star-shaped by the parent's mask; and because the fill is
   placed with inset-inline-start + inline-size it grows from the RIGHT in RTL
   without a single direction-specific rule.
   No mask support (the pre-2016 WebViews DS-17 exists for) means NO stars
   rather than a solid gold bar: .m-stars__n carries the number instead. */
.m-stars { display: none; }
.m-stars__n { font-variant-numeric: tabular-nums; font-weight: 700; }

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .m-stars {
    display: inline-block; position: relative; flex: none;
    inline-size: calc(var(--m-star-size) * 5);
    block-size: var(--m-star-size);
    vertical-align: -2px;
    background: var(--m-star-off);
    -webkit-mask-image: var(--m-star-mask); mask-image: var(--m-star-mask);
    -webkit-mask-size: var(--m-star-size) var(--m-star-size);
            mask-size: var(--m-star-size) var(--m-star-size);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  }
  .m-stars::before {
    content: ""; position: absolute; inset-block: 0;
    inset-inline-start: 0; inline-size: var(--m-stars, 0%);
    background: var(--m-star);
  }
  .m-stars__n { display: none; } /* the stars ARE the number when they render */
}
.m-stars--s { --m-star-size: 13px; }
.m-stars--l { --m-star-size: 18px; }
/* There is deliberately no --xl. The one element that wanted it is the review
   form's strip, and there the size is not a type-scale step but the TAP
   TARGET: it re-points --m-star-size from .m-revform__rate instead, and a
   modifier declared on the strip itself would outrank that. */

/* The card row renders for EVERY card when reviews are on, empty or not: a
   conditional element is what misaligns a grid of mixed products, and :has()
   is off the table for old WebViews. Same mechanism .m-card__name's
   min-height already uses. */
.m-card__rating {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; min-block-size: 18px;
  font-size: var(--m-fs-2xs); color: var(--m-muted);
  font-variant-numeric: tabular-nums;
}
/* Re-point the TOKENS, never the colours: a gold star on a photo scrim is
   unreadable anyway, and the mask machinery stays untouched. */
.m-card--tall .m-card__rating { --m-star: #fff; --m-star-off: rgba(255,255,255,.42); color: rgba(255,255,255,.85); }

.m-product__rating { display: flex; align-items: center; gap: var(--m-sp-2); margin: 0 0 var(--m-sp-2); }
.m-product__rating-link { display: inline-flex; align-items: center; gap: var(--m-sp-2); color: inherit; text-decoration: none; }
.m-product__rating-count { font-size: var(--m-fs-s); color: var(--m-muted); }
.m-product__rating--empty a { font-size: var(--m-fs-s); color: var(--m-primary); }

.m-reviews { max-width: var(--m-container); margin-inline: auto; padding-inline: var(--m-sp-4); }
.m-reviews__list { list-style: none; margin: 0 0 var(--m-sp-5); padding: 0; display: grid; gap: var(--m-sp-4); }
.m-rev { border-block-end: 1px solid var(--m-line); padding-block-end: var(--m-sp-4); }
.m-rev:last-child { border-block-end: 0; }
.m-rev__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--m-sp-2); }
.m-rev__who { font-weight: 700; }
.m-rev__badge {
  font-size: var(--m-fs-2xs); font-weight: 700; padding: 2px 8px;
  border-radius: var(--m-r-pill); background: var(--m-success-bg); color: var(--m-success-ink);
}
.m-rev__when { margin-inline-start: auto; font-size: var(--m-fs-xs); color: var(--m-muted); }
.m-rev__text { margin: var(--m-sp-2) 0 0; line-height: var(--m-lh-base); }
.m-rev__reply {
  margin: var(--m-sp-2) 0 0; padding: var(--m-sp-3);
  border-radius: var(--m-r-s); background: var(--m-surface-2); font-size: var(--m-fs-s);
}

/* The form. Stars first and biggest; the phone is last and optional. */
.m-revform { display: grid; gap: var(--m-sp-3); max-width: 44rem; }
.m-revform__title { margin: 0; font-size: var(--m-fs-m); }
/* ONE slot token for the whole rating input. The painted strip advances by
   its mask tile (mask-repeat: repeat-x, inline-size: calc(--m-star-size * 5)),
   so the TILE IS THE SLOT: point --m-star-size at --m-touch here, on the
   common ancestor of the strip and the hit boxes, and all three strips are
   the same five slots by construction rather than by two literals agreeing.
   They did not agree: a 5x32px strip under a 5x44px hit row diverged 12px per
   star, so tapping the 5th star selected 4 and slot 5 sat past the strip
   entirely. Derived from the TARGET, never the reverse: 44px is the fleet
   floor (AUDIT DS-12), so the star grows to the finger. */
.m-revform__rate {
  position: relative; border: 0; padding: 0; margin: 0;
  --m-star-size: var(--m-touch);
  min-block-size: var(--m-star-size);
}
.m-revform__hits { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: flex; }
/* The strip is an inline-block, so it sits in a line box whose descender
   space the absolutely-positioned hits do not have: measured at 390px, the
   fieldset came out 52.59px tall for a 44px row. Top-aligning it makes the
   box exactly the five slots it paints. (The star/ring alignment itself does
   NOT depend on this — measured 0 drift either way.) vertical-align is inert
   while .m-stars is display: none, so this is safe OUTSIDE @supports; a
   display override here would NOT be, it would paint a solid grey bar on the
   no-mask engines DS-17 exists for. */
.m-revform__rate .m-stars { vertical-align: top; }
.m-revform__star {
  min-inline-size: var(--m-star-size); min-block-size: var(--m-star-size);
  display: grid; place-items: center; cursor: pointer;
}
.m-revform__star input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
/* The ring frames the STAR, so the box is the slot: at 32px in a 44px slot it
   framed 6px off the thing it was pointing at. Adjacent rings touching is not
   a case: it is a radio group, only one is ever checked. */
.m-revform__starbox { inline-size: var(--m-star-size); block-size: var(--m-star-size); border-radius: var(--m-r-s); }
/* Visible confirmation of which star was tapped, with no :has() and no JS. */
.m-revform__star input:checked + .m-revform__starbox { box-shadow: inset 0 0 0 2px var(--m-primary); }
.m-revform__star input:focus-visible + .m-revform__starbox { box-shadow: 0 0 0 3px rgba(var(--m-text-rgb), .18); }
.m-revform__field { display: grid; gap: 4px; font-size: var(--m-fs-s); }
.m-revform__field small { color: var(--m-muted); font-size: var(--m-fs-xs); }
.m-revform__field input, .m-revform__field textarea {
  inline-size: 100%; min-block-size: var(--m-touch);
  padding: var(--m-sp-2) var(--m-sp-3);
  border: 1px solid var(--m-line-strong); border-radius: var(--m-r-s);
  background: var(--m-bg); color: var(--m-text); font: inherit;
  font-size: var(--m-fs-base); /* >=16px: anything smaller zooms iOS on focus */
}
.m-revform__hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.m-revform__err { margin: 0; color: var(--m-danger-ink); font-size: var(--m-fs-s); }
.m-revform__note, .m-revform__done { margin: 0; font-size: var(--m-fs-xs); color: var(--m-muted); }
.m-revform__done { padding: var(--m-sp-3); border-radius: var(--m-r-s); background: var(--m-success-bg); color: var(--m-success-ink); font-size: var(--m-fs-s); }

/* ==========================================================================
   My Account (§3.4d)

   Woo's own stylesheet is dequeued fleet-wide (functions.php's
   woocommerce_enqueue_styles => empty), which is WHY the stock account pages
   render as «nav buttons blank, English strings, LTR text inside the RTL
   layout»: there was never any CSS behind them. Everything below is the
   theme's own tokens, logical properties only.

   The last block styles markup this theme does NOT own — Woo's lost-password
   and reset-password forms, deliberately left to WooCommerce because their
   field names are a contract with WC_Form_Handler that cannot be verified from
   this repo. Styling them is how they stop looking abandoned without
   re-implementing a password flow.
   ========================================================================== */
.m-account { display: grid; gap: var(--m-sp-5); }
@media (min-width: 800px) {
  .m-account { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
}
.m-account__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--m-sp-2); }
@media (min-width: 800px) {
  .m-account__nav ul { flex-direction: column; flex-wrap: nowrap; }
}
.m-account__nav a {
  display: block; padding: var(--m-sp-3) var(--m-sp-4); min-block-size: var(--m-touch);
  border: 1px solid var(--m-line); border-radius: var(--m-r-s);
  background: var(--m-surface); color: var(--m-text); text-decoration: none;
  font-size: var(--m-fs-s); font-weight: 600;
  transition: background var(--m-t-fast) var(--m-ease), border-color var(--m-t-fast) var(--m-ease);
}
.m-account__nav a:hover { border-color: var(--m-primary); }
.m-account__nav .is-active a { background: var(--m-primary-soft); border-color: var(--m-primary); color: var(--m-primary); }
.m-account__body { min-inline-size: 0; }
.m-account__hello { display: grid; gap: var(--m-sp-3); justify-items: start; margin-block-end: var(--m-sp-5); }
.m-account__greet { font-family: var(--m-font-display); font-size: var(--m-fs-xl); margin: 0; }

.m-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m-sp-2); }
.m-orders__link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--m-sp-3); padding: var(--m-sp-3) var(--m-sp-4); min-block-size: var(--m-touch);
  border: 1px solid var(--m-line); border-radius: var(--m-r-s);
  background: var(--m-surface); color: var(--m-text); text-decoration: none;
}
.m-orders__link:hover { border-color: var(--m-primary); }
.m-orders__id { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-orders__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-2); color: var(--m-muted); font-size: var(--m-fs-xs); }
.m-orders__total { font-weight: 700; white-space: nowrap; }
.m-orders__state {
  padding: 2px 10px; border-radius: var(--m-r-pill);
  background: var(--m-surface-2); color: var(--m-text); font-weight: 600;
}
.m-orders__state--completed { background: var(--m-success-bg); color: var(--m-success-ink); }
.m-orders__state--cancelled,
.m-orders__state--returned,
.m-orders__state--no-answer { background: var(--m-danger-bg); color: var(--m-danger-ink); }
.m-orders__pager { display: flex; gap: var(--m-sp-3); margin-block-start: var(--m-sp-4); }

.m-vieworder { display: grid; gap: var(--m-sp-2); margin-block-end: var(--m-sp-4); }
.m-vieworder__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--m-sp-3); margin: 0; }
.m-vieworder__id { font-family: var(--m-font-display); font-size: var(--m-fs-l); font-weight: 700; }
.m-vieworder__date { color: var(--m-muted); font-size: var(--m-fs-s); }
.m-vieworder__state { justify-self: start; margin: 0; padding: 4px 14px; border-radius: var(--m-r-pill); font-weight: 700; }

.m-login { display: grid; gap: var(--m-sp-5); }
@media (min-width: 800px) {
  .m-login--both { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.m-login__card {
  display: grid; gap: var(--m-sp-3);
  padding: var(--m-sp-5); border: 1px solid var(--m-line); border-radius: var(--m-r);
  background: var(--m-surface);
}
.m-login__title { margin: 0; font-size: var(--m-fs-l); }
.m-login__note { margin: 0; color: var(--m-muted); font-size: var(--m-fs-s); }
.m-login__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m-sp-3); margin: 0; }
.m-login__remember { display: flex; align-items: center; gap: var(--m-sp-2); font-size: var(--m-fs-s); }
.m-login__lost { font-size: var(--m-fs-s); color: var(--m-primary); }

/* Shared field shape, ours and Woo's alike. 16px minimum on the input: below
   that iOS zooms the whole page on focus, which on a login form reads as the
   layout breaking. */
.m-field { display: grid; gap: 4px; margin: 0; font-size: var(--m-fs-s); }
.m-field input,
.woocommerce-ResetPassword .woocommerce-form-row input,
.woocommerce-ResetPassword .woocommerce-Input {
  inline-size: 100%; min-block-size: var(--m-touch);
  padding: var(--m-sp-2) var(--m-sp-3);
  border: 1px solid var(--m-line-strong); border-radius: var(--m-r-s);
  background: var(--m-bg); color: var(--m-text); font: inherit; font-size: var(--m-fs-base);
}
.woocommerce-ResetPassword { display: grid; gap: var(--m-sp-3); max-inline-size: 420px; }
.woocommerce-ResetPassword .woocommerce-form-row { display: grid; gap: 4px; margin: 0; font-size: var(--m-fs-s); }
.woocommerce-ResetPassword button {
  justify-self: start; min-block-size: var(--m-touch);
  padding: var(--m-sp-2) var(--m-sp-5); border: 0; border-radius: var(--m-r-pill);
  background: var(--m-primary); color: var(--m-on-primary); font: inherit; font-weight: 700; cursor: pointer;
}