/* ============================================================
   Lampa — blue tech identity (accent #3972c0)
   ============================================================ */
:root {
  color-scheme: light; /* stops a browser set to "always dark" from re-colouring our own light theme */
  /* color — Lampa: clean tech blue */
  --bg: #ffffff; --bg-alt: #f2f5fb; --surface: #ffffff;
  --text: #20272b; --text-muted: #8c7c84; --text-muted-2: #a8b1b9;
  --accent: #3972c0; --accent-hover: #2c5fa3; --accent-tint: rgba(57, 114, 192, .08);
  --cta: #3972c0; --cta-hover: #2c5fa3;
  --sale: #dc2626; --sale-bg: #fef2f2;
  --gold: #c99a52; --gold-soft: #f3e6cf; --brown-deep: #3972c0;
  --success: #16a34a; --success-bg: #e7f6ec;
  --danger: #dc2626; --danger-bg: #fef2f2;
  --warn: #b45309; --warn-bg: #fdf0d9;
  --border: #e3eaf1;
  /* shape — soft & modern (rounded, not sharp) */
  --radius: 10px; --radius-lg: 16px; --radius-sm: 7px; --pill: 980px;
  --shadow: 0 2px 12px rgba(57, 114, 192, .07);
  --shadow-hover: 0 10px 28px rgba(57, 114, 192, .14);
  --ring: 0 0 0 3px rgba(57, 114, 192, .22);
  /* chrome */
  --nav-bg: rgba(255, 255, 255, .88); --blur: saturate(180%) blur(20px);
  --container: 1024px; --container-text: 692px; --container-grid: 1280px;
  /* type */
  --font-sans: "Montserrat Arabic", "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 17px; line-height: 1.65; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -.015em; margin: 0 0 14px; }
h2 { font-size: clamp(32px, 4.5vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -.012em; margin: 0 0 8px; }
h3 { font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; }
.lead { font-size: 21px; line-height: 1.4; font-weight: 400; color: var(--text-muted); margin: 0; }
.eyebrow { font-size: 19px; font-weight: 600; color: var(--accent); letter-spacing: .004em; margin: 0 0 8px; }
.hairline { height: 0; border: 0; border-block-start: .5px solid var(--border); margin: 0; }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.tabnum { font-variant-numeric: tabular-nums; }

/* ----------------------------- layout helpers */
.container { max-inline-size: var(--container); margin-inline: auto; padding-inline: 22px; }
.section { padding-block: 80px; background: var(--bg); }
.section--alt { background: var(--bg-alt); }
.section__head { text-align: center; margin-block-end: 48px; }
.section__head .lead { max-inline-size: 600px; margin: 10px auto 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mt-2 { margin-block-start: 12px; } .mt-3 { margin-block-start: 22px; } .mb-2 { margin-block-end: 12px; }

/* ----------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 24px; border: none; border-radius: var(--pill);
  font: 400 17px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, transform .1s ease, box-shadow .2s ease;
}
.btn--primary, .btn-primary, .btn-accent { background: var(--cta); color: #fff; font-weight: 700; }
.btn--primary:hover, .btn-primary:hover, .btn-accent:hover { background: var(--cta-hover); color: #fff; }
.btn--secondary, .btn-ghost { background: var(--bg-alt); color: var(--text); }
.btn--secondary:hover, .btn-ghost:hover { background: #ececec; }
.btn--lg, .btn-lg { padding: 14px 28px; font-size: 19px; min-height: 50px; }
.btn--block, .btn-block { width: 100%; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn[disabled] { opacity: .45; pointer-events: none; }

.link { display: inline-flex; align-items: center; color: var(--accent); font-size: 17px; text-decoration: none; white-space: nowrap; }
.link::after { content: "\00A0\203A"; transition: margin-inline-start .2s ease; }
.link:hover { text-decoration: underline; }
.link:hover::after { margin-inline-start: 2px; }
[dir=rtl] .link::after { content: "\00A0\2039"; }

/* ----------------------------- nav */
.nav {
  position: sticky; inset-block-start: 0; z-index: 9000;
  display: flex; align-items: center; gap: 24px; height: 48px; padding-inline: 22px;
  background: var(--nav-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-block-end: .5px solid var(--border);
}
.nav__brand { font-size: 17px; font-weight: 600; letter-spacing: .02em; color: var(--text); display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px rgba(94, 46, 18, .25); }
.brand-mark img { width: 24px; height: 24px; object-fit: contain; }
.nav__brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
/* footer brand logo lockup */
.footer__logo { width: 96px; height: 96px; border-radius: 16px; background: var(--accent); display: grid; place-items: center; margin-block-end: 14px; box-shadow: var(--shadow); }
.footer__logo img { width: 70px; height: 70px; object-fit: contain; }
.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a { font-size: 12px; color: var(--text-muted); transition: color .2s ease; }
.nav__links a:hover { color: var(--text); }
.nav__right { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
.nav__search { position: relative; display: flex; align-items: center; }
.nav__search svg { position: absolute; inset-inline-start: 11px; color: var(--text-muted-2); pointer-events: none; }
.input--search { border: 0; border-radius: var(--pill); background: var(--bg-alt); color: var(--text); padding: 6px 14px 6px 32px; font-size: 12px; width: 170px; height: 30px; outline: none; }
.input--search:focus { box-shadow: 0 0 0 3px var(--accent-tint); }
.nav__cta { font-size: 12px; color: var(--accent); white-space: nowrap; }
.nav__menu { display: none; background: none; border: 0; color: var(--text); cursor: pointer; }
[dir=rtl] .nav__search svg { inset-inline-start: auto; inset-inline-end: 11px; }
[dir=rtl] .input--search { padding: 6px 32px 6px 14px; }

/* ----------------------------- hero */
.hero { text-align: center; padding-block: 90px 80px; padding-inline: 22px; background: var(--bg); }
.hero .lead { max-inline-size: 600px; margin: 0 auto 28px; }
.hero__actions { display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero__visual {
  margin: 56px auto 0; background: var(--bg-alt); border-radius: var(--radius-lg);
  max-inline-size: 980px; padding: 40px 28px; display: grid; gap: 14px;
}
.hero__chip { display: flex; align-items: center; gap: 16px; background: var(--surface); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); text-align: start; }
.hero__chip .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--bg-alt); display: grid; place-items: center; font-size: 1.5rem; }
.hero__chip .m { flex: 1; } .hero__chip .m .t { font-weight: 600; } .hero__chip .m .s { color: var(--text-muted); font-size: 14px; }
.hero__chip .p { font-weight: 600; }

/* ----------------------------- product grid + card */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 10px; max-inline-size: var(--container-grid); margin-inline: auto; padding-inline: 12px; }
.card {
  background: var(--surface); border-radius: var(--radius-lg); padding: 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card__media { position: relative; aspect-ratio: 4/3; width: 100%; display: grid; place-items: center; background: var(--bg-alt); border-radius: var(--radius); margin-block-end: 16px; font-size: 44px; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media .badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--pill); letter-spacing: .02em; }
.card__media .stockchip { position: absolute; inset-block-end: 10px; inset-inline-end: 10px; background: rgba(255,255,255,.92); color: var(--text-muted); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--pill); }
.card__media .stockchip.out { color: var(--danger); }
.card__eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.card__title { font-size: 18px; font-weight: 700; letter-spacing: 0; margin: 0; line-height: 1.35; }
.card__price { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; margin: 2px 0 0; }
.card__actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-block-start: 14px; width: 100%; }
.card__actions .btn { flex: 1; }

/* ----------------------------- shop filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-block-end: 40px; }
.tag { display: inline-block; border-radius: var(--pill); background: var(--surface); border: .5px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; padding: 6px 15px; cursor: pointer; transition: all .2s ease; }
.tag:hover { border-color: var(--text-muted); }
.tag--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-inline-size: 900px; margin: 0 auto 30px; padding-inline: 22px; }
/* status chip variants (admin + order) */
.tag.delivered, .tag.success { background: var(--success-bg); border-color: transparent; color: var(--success); cursor: default; }
.tag.paid { background: var(--accent-tint); border-color: transparent; color: var(--accent); cursor: default; }
.tag.pending { background: var(--warn-bg); border-color: transparent; color: var(--warn); cursor: default; }
.tag.failed { background: var(--danger-bg); border-color: transparent; color: var(--danger); cursor: default; }

/* ----------------------------- product detail */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; padding-block: 80px; }
.product__media { position: sticky; inset-block-start: 80px; background: var(--bg-alt); border-radius: var(--radius-lg); aspect-ratio: 3/4; display: grid; place-items: center; font-size: 96px; overflow: hidden; }
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__info .price { font-size: 28px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin: 6px 0 18px; display: flex; align-items: baseline; gap: 14px; }
.product__info .desc { color: var(--text-muted); white-space: pre-wrap; font-size: 17px; }
.product__info .desc--clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.desc-toggle { background: none; border: none; padding: 0; margin-block-start: 4px; color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; }
.desc-toggle:hover { text-decoration: underline; }
.buy-box { background: var(--surface); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); margin-block-start: 24px; }
.buy-box label { display: block; font-size: 14px; font-weight: 600; color: var(--text-muted); margin-block-end: 8px; }
.buy-box .note { color: var(--text-muted); font-size: 14px; margin-block-start: 12px; text-align: center; }
.feature-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.feature-list li { display: flex; align-items: center; gap: 8px; }
.feature-list li::before { content: "\2713"; color: var(--accent); font-weight: 600; }
.trust { display: flex; gap: 20px; flex-wrap: wrap; margin-block-start: 20px; }
.trust .t { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 13px; }
.trust .t svg { color: var(--text-muted-2); }

/* delivery / warranty signal chips (PDP) */
.signal-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.signal { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--text-muted); background: var(--bg-alt); border-radius: var(--pill); padding: 6px 13px; }
.signal svg { color: var(--text-muted-2); }
.signal--ok { color: var(--success); background: var(--success-bg); }
.signal--ok svg { color: var(--success); }
.signal--shield { color: var(--accent); background: var(--accent-tint); }
.signal--shield svg { color: var(--accent); }

/* card delivery label */
.card__deliver { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 2px 0 0; }
.card__deliver--ok { color: var(--success); }

/* Lampa guarantee box + trust strip */
.guarantee { display: flex; align-items: flex-start; gap: 12px; margin-block-start: 20px;
  background: linear-gradient(135deg, var(--accent-tint), rgba(176,125,75,.10));
  border: 1px solid var(--gold-soft); border-radius: var(--radius-lg); padding: 16px 18px; }
.guarantee__badge { flex: none; display: inline-grid; place-items: center; inline-size: 42px; block-size: 42px;
  border-radius: 50%; background: var(--accent); color: #fff; }
.guarantee__title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--brown-deep); }
.guarantee__desc { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.trust-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; margin-block-start: 16px; }
.trust-strip .ts { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.trust-strip .ts svg { flex: none; color: var(--accent); }

/* store-wide social-proof band (home) */
.proof-band { padding: 24px 20px 0; }
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-inline-size: var(--container-grid);
  margin: 0 auto; }
.proof__item { display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.proof__ic { font-size: 26px; line-height: 1; flex: none; }
.proof__t { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text); }
.proof__s { font-size: 12.5px; color: var(--text-muted); margin-block-start: 2px; }
@media (max-width: 860px) { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .proof { grid-template-columns: 1fr; } .trust-strip { grid-template-columns: 1fr; } }

/* confirm receipt / report a problem (order page) */
.confirm-box { margin-block-start: 22px; padding: 18px; background: var(--bg-alt); border-radius: var(--radius-lg); text-align: center; }
.confirm-q { font-weight: 700; margin: 0 0 12px; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: flex-start; }
.confirm-done { display: inline-flex; align-items: center; gap: 8px; color: var(--success); font-weight: 700; background: var(--success-bg); padding: 10px 16px; border-radius: var(--pill); }
.confirm-done svg { color: var(--success); }
.report-d { text-align: start; }
.report-d > summary { list-style: none; cursor: pointer; }
.report-d > summary::-webkit-details-marker { display: none; }
.report-form { display: flex; flex-direction: column; gap: 8px; margin-block-start: 10px; min-inline-size: 260px; }
.issue-note { margin-block-start: 12px; color: var(--warn); background: var(--warn-bg); padding: 12px 14px; border-radius: var(--radius); font-size: 14px; }

/* warranty pill + dispute reason chips + clean-source trust (market-gap pass) */
/* manual payment "how to pay" panel */
.pay-amount { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-start: 14px; padding: 14px 16px; background: var(--accent-tint); border-radius: var(--radius-lg); }
.pay-amount__label { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.pay-amount__val { font-size: 26px; font-weight: 800; color: var(--accent); }
.pay-rails { display: flex; flex-direction: column; gap: 10px; margin-block-start: 14px; }
.pay-rail { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.pay-rail__head { font-weight: 700; margin-block-end: 6px; }
.pay-rail__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-rail__row .copy-btn { min-height: auto; padding: 4px 10px; font-size: 12px; }
.pay-amount .copy-btn { min-height: auto; padding: 5px 12px; font-size: 12px; }
.pay-review { margin-block-start: 14px; padding: 14px 16px; background: var(--bg-alt); border-radius: var(--radius-lg); font-size: 14px; line-height: 1.6; }

.warranty-pill { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 14px; padding: 8px 14px; border-radius: var(--pill); background: var(--success-bg); color: var(--success); font-weight: 700; font-size: 14px; }
.warranty-pill svg { flex: none; }
.warranty-pill--off { background: var(--bg-alt); color: var(--text-muted); }
.report-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 4px; }
.reason-chip { position: relative; cursor: pointer; }
.reason-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.reason-chip span { display: inline-block; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--pill); font-size: 13px; font-weight: 600; background: var(--surface); transition: .15s; }
.reason-chip input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); }
.trust-line { display: flex; align-items: flex-start; gap: 8px; color: var(--success); background: var(--success-bg); padding: 10px 13px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; margin-block-start: 10px; }
.trust-line svg { flex: none; margin-block-start: 1px; }
.allin-line { color: var(--text-muted); font-size: 13px; margin: 8px 0 0; display: flex; align-items: center; gap: 6px; }
.antiphish { border: 1px dashed var(--border); border-radius: var(--radius); padding: 12px 14px; margin-block-start: 18px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.antiphish b { color: var(--text); }
.meta-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; }
.meta-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--pill); background: var(--bg-alt); color: var(--text); font-size: 12.5px; font-weight: 600; }
.meta-badge--safe { background: var(--success-bg); color: var(--success); }

/* sale price, review histogram/sort, store reply, secure checklist (market-gap #2) */
.compare-at { color: var(--text-muted); text-decoration: line-through; font-size: .8em; margin-inline-start: 8px; font-weight: 600; }
.off-badge { display: inline-block; background: var(--danger); color: #fff; font-size: .72em; font-weight: 800; padding: 2px 8px; border-radius: var(--pill); margin-inline-start: 6px; vertical-align: middle; }
.rating-hist { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 14px; max-inline-size: 360px; }
.hist-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.hist-star { inline-size: 28px; color: var(--text-muted); }
.hist-bar { flex: 1; block-size: 8px; background: var(--bg-alt); border-radius: 999px; overflow: hidden; }
.hist-bar > span { display: block; block-size: 100%; background: var(--gold, #b07d4b); border-radius: 999px; }
.hist-n { inline-size: 26px; text-align: end; }
.review-sort { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
.review-sort .chip { font-size: 13px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--pill); color: var(--text-muted); background: var(--surface); }
.review-sort .chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.store-reply { margin-block-start: 8px; padding: 10px 13px; background: var(--accent-tint); border-radius: var(--radius); font-size: 13.5px; }
.store-reply b { color: var(--accent); }
.secure-box { margin-block-start: 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.secure-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.secure-list label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.45; }
.secure-list input { margin-block-start: 3px; inline-size: 17px; block-size: 17px; flex: none; accent-color: var(--accent); }
.secure-list input:checked + span { color: var(--text-muted); text-decoration: line-through; }
.secure-box--shared { background: var(--warn-bg, #fbf3e6); border-color: var(--gold, #b07d4b); }
.secure-list--dont li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; }
.dont-x { color: var(--danger, #1f1eb3); font-weight: 800; flex: none; }
.variant-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 16px; }
.variant { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: .15s; }
.variant.on, .variant:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.variant input { accent-color: var(--accent); flex: none; }
.variant__name { font-weight: 600; }
.variant__price { margin-inline-start: auto; font-weight: 700; }
.variant.is-out { opacity: .55; cursor: not-allowed; }
.variant.is-out .variant__price { color: var(--text-muted); font-weight: 600; }
.about-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 26px; }
.about-stat { flex: 1; min-inline-size: 130px; background: var(--bg-alt); border-radius: var(--radius); padding: 16px; text-align: center; }
.about-stat b { display: block; font-size: 26px; color: var(--accent); }
.about-stat span { font-size: 13px; color: var(--text-muted); }

/* customer accounts: login + account page */
.auth-wrap { max-inline-size: 460px; margin: 0 auto; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.auth-form { margin-block-start: 16px; display: flex; flex-direction: column; gap: 10px; }
.auth-form label { font-weight: 600; font-size: 14px; color: var(--text-muted); }
.account-wrap { max-inline-size: 760px; margin: 0 auto; }
.acc-orders { display: flex; flex-direction: column; gap: 12px; }
.acc-order { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.acc-order__title { font-weight: 700; }
.acc-order__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* wishlist heart */
.card { position: relative; }
.wish { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-end: 10px;
  inline-size: 34px; block-size: 34px; display: inline-grid; place-items: center; cursor: pointer;
  border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--text-muted);
  box-shadow: 0 2px 8px rgba(74,40,16,.12); transition: transform .15s ease, color .15s ease; }
.wish:hover { transform: scale(1.08); color: var(--accent); }
.wish.on { color: var(--accent); }
.wish.on svg { fill: var(--accent); }

/* PDP back button — opposite corner from the wishlist heart, so a shopper who
   tapped into a product (from the deals rail, shop, or search) always has an
   obvious way back, even inside chrome-less webviews (e.g. WhatsApp browser). */
.pdp-back { position: absolute; z-index: 3; inset-block-start: 10px; inset-inline-start: 10px;
  inline-size: 36px; block-size: 36px; display: inline-grid; place-items: center; cursor: pointer;
  border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--text);
  box-shadow: 0 2px 8px rgba(74,40,16,.12); transition: transform .15s ease; }
.pdp-back:hover { transform: scale(1.08); }
html[data-theme="dark"] .pdp-back { background: rgba(24, 35, 40, .92); color: var(--text-muted); }
.wish-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-block-end: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--pill);
  padding: 9px 16px; font-weight: 600; font-size: 14px; color: var(--text); font-family: inherit; transition: all .15s ease; }
.wish-btn:hover { border-color: var(--accent); color: var(--accent); }
.wish-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.wish-btn.on svg { fill: var(--accent); }
.wish-btn__added { display: none; }
.wish-btn.on .wish-btn__add { display: none; }
.wish-btn.on .wish-btn__added { display: inline; }
.pdp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-block-end: 18px; }
.pdp-actions .wish-btn { margin-block-end: 0; }

/* add-to-cart on cards */
.card__actions { display: flex; gap: 8px; align-items: stretch; }
.card__actions .btn--primary { flex: 1; }
.card__addcart { flex: none; padding-inline: 12px; display: inline-grid; place-items: center; }

/* nav cart button + count badge */
.nav__cart { position: relative; background: none; border: none; cursor: pointer; color: var(--text);
  display: inline-grid; place-items: center; padding: 6px; border-radius: 8px; }
.nav__cart:hover { color: var(--accent); }
.nav__cart-count { position: absolute; inset-block-start: -2px; inset-inline-end: -2px; min-inline-size: 17px; block-size: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }

/* cart drawer */
/* The cart must sit ABOVE everything — the sticky header (z 9000), WhatsApp float
   (9400), cookie bar (9500) and the mobile bottom-nav (60) all used to render on
   TOP of the drawer, cutting off its top items and overlapping the checkout. */
.cart-overlay { position: fixed; inset: 0; background: rgba(40,20,8,.4); z-index: 9600; }
.cart-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 9601; inline-size: min(400px, 92vw);
  background: var(--bg); box-shadow: -8px 0 40px rgba(74,40,16,.18); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease; padding: 18px; overflow-y: auto; }
@media (max-width: 560px) { .cart-drawer { inline-size: 100vw; } }  /* full-width on phones — no page bleed */
html[dir="rtl"] .cart-drawer { transform: translateX(-100%); }
.cart-drawer.open, html[dir="rtl"] .cart-drawer.open { transform: translateX(0); }
.cart-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-block-end: 14px; }
.cart-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.cart-items { display: flex; flex-direction: column; gap: 10px; }
.cart-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.cart-row__title { font-weight: 600; font-size: 14px; }
.cart-row__price { color: var(--text-muted); font-size: 13px; margin-block-start: 2px; }
.cart-qty { display: flex; align-items: center; gap: 4px; }
.cart-qty button { inline-size: 44px; block-size: 44px; border: 1px solid var(--border); background: var(--bg);
  border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text); }
.cart-qty__n { min-inline-size: 22px; text-align: center; font-weight: 600; }
.cart-rm { color: var(--danger) !important; border-color: transparent !important; }
.cart-empty { text-align: center; padding: 40px 0; }
.cart-foot { margin-block-start: auto; padding-block-start: 16px; }
.cart-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 18px; margin-block-end: 12px;
  font-family: var(--font-display); }
.cart-pm { margin-block-start: 8px; }

/* order line items */
.order-lines { margin-block-start: 16px; border-block-start: 1px solid var(--border); padding-block-start: 14px; }
.order-lines .label { font-weight: 700; font-size: 13px; color: var(--text-muted); margin-block-end: 8px; }
.order-line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding-block: 4px; }

/* instant search suggestions */
.nav__search { position: relative; }
.suggest { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 70;
  inline-size: max(100%, 300px); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-hover); overflow: hidden; }
.suggest__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--text);
  text-decoration: none; border-block-end: 1px solid var(--border); }
.suggest__item:last-child { border-block-end: none; }
.suggest__item:hover { background: var(--bg-alt); }
.suggest__ic { font-size: 18px; flex: none; }
.suggest__t { flex: 1; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest__p { color: var(--text-muted); font-size: 13px; flex: none; }

/* product gallery (PDP) */
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 12px; }
.thumb { inline-size: 64px; block-size: 64px; padding: 0; border: 2px solid var(--border); border-radius: 10px;
  overflow: hidden; cursor: pointer; background: var(--bg-alt); }
.thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.thumb[hidden] { display: none; }  /* colour filter hides other colours' photos */
.thumb.on { border-color: var(--accent); }

/* shop secondary filter row (price + in-stock) */
.shop-filters2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 22px; }
.shop-filters2 .filter-label { font-size: 14px; font-weight: 600; margin-inline-end: 4px; }

/* shop colour + size facet rows */
.facet-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-block-end: 12px; }
.facet-row .filter-label { font-size: 14px; font-weight: 600; padding-block-start: 6px; flex: none; }
.cfacets { display: flex; flex-wrap: wrap; gap: 7px; }
.cfacet { display: inline-flex; align-items: center; gap: 7px; min-block-size: 36px; padding: 5px 12px 5px 6px;
  border: .5px solid var(--border); border-radius: var(--pill); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; transition: all .2s ease; }
.cfacet:hover { border-color: var(--text-muted); }
.cfacet__dot { width: 18px; height: 18px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.cfacet--active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.cfacet--active .cfacet__dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
/* Multi-select facets: a real (screen-reader-visible) checkbox, hidden visually
   so the existing pill styling reads the same as the old single-select links. */
.facet-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.cfacet:focus-within, .size-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.size-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.size-chip { display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 40px; padding: 7px 12px;
  border: .5px solid var(--border); border-radius: 9px; background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; transition: all .2s ease; }
.size-chip:hover { border-color: var(--text-muted); }
.size-chip--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pay-badge--cod { background: var(--accent); color: #fff; border-color: transparent; }

/* store-credit wallet */
.wallet-card { display: flex; justify-content: space-between; align-items: center; margin-block: 16px;
  background: linear-gradient(135deg, var(--accent-tint), rgba(176,125,75,.12));
  border: 1px solid var(--gold-soft); border-radius: var(--radius-lg); padding: 16px 20px; }
.wallet-card__label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.wallet-card__bal { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--brown-deep); margin-block-start: 2px; }
.wallet-history { margin-block-end: 8px; }
.wallet-ledger { margin-block-start: 10px; display: flex; flex-direction: column; gap: 6px; }
.wallet-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-block-end: 1px solid var(--border); }
.wallet-opt { display: flex; align-items: center; gap: 8px; margin-block-start: 12px; font-weight: 600; font-size: 14px;
  color: var(--accent); background: var(--accent-tint); padding: 10px 14px; border-radius: var(--radius); cursor: pointer; }

/* order-tracking timeline (stepper) */
.track-head { margin: 0 0 4px; }
.track-eta { color: var(--text-muted); font-size: 14px; margin: 0 0 6px; line-height: 1.5; }
.stepper { list-style: none; margin: 16px 0; padding: 0; }
.step { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-block-end: 18px; }
.step:last-child { padding-block-end: 0; }
.step__dot { flex: none; inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--border); background: var(--surface); color: #fff; z-index: 1; }
.step:not(:last-child)::before { content: ""; position: absolute; inset-block-start: 24px; inset-block-end: 2px;
  inset-inline-start: 12px; inline-size: 2px; background: var(--border); }
.step--done .step__dot { background: var(--success); border-color: var(--success); }
.step--done::before { background: var(--success); }
.step--active .step__dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.step--active .step__label { color: var(--accent); font-weight: 700; }
.step__body { display: flex; flex-direction: column; gap: 2px; padding-block-start: 2px; }
.step__label { font-weight: 600; }
.step--todo .step__label { color: var(--text-muted-2); }
.step__ts { font-size: 12px; color: var(--text-muted); }
.track-terminal { text-align: center; padding: 8px 0 4px; }
.track-terminal .tt-ic { inline-size: 52px; block-size: 52px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 26px; margin-block-end: 10px; }
.track-terminal--refunded .tt-ic { background: var(--warn-bg); color: var(--warn); }
.track-terminal--cancelled .tt-ic { background: var(--bg-alt); color: var(--text-muted); }

/* admin gallery management */
.gallery-admin { display: flex; flex-wrap: wrap; gap: 12px; }
.gallery-admin__item { position: relative; inline-size: 90px; block-size: 90px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.gallery-admin__item img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.gallery-admin__del { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; inline-size: 22px; block-size: 22px;
  border: none; border-radius: 50%; background: rgba(44, 42, 180, .92); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }

/* ----------------------------- inputs */
.input { width: 100%; border: .5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 12px 14px; font-family: inherit; font-size: 17px; transition: border-color .2s ease, box-shadow .2s ease; }
.input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
textarea.input { resize: vertical; min-height: 120px; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; }

/* ----------------------------- order / delivery */
.order-wrap { max-inline-size: 560px; margin-inline: auto; padding-block: 80px; }
.order-card { background: var(--surface); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); text-align: center; }
.success-badge { width: 64px; height: 64px; border-radius: 50%; background: var(--success-bg); display: grid; place-items: center; color: var(--success); margin: 0 auto 18px; }
.order-card .lead { margin-block-end: 6px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 26px 0; text-align: start; font-size: 15px; }
.kv .k { color: var(--text-muted); }
.kv .v { font-weight: 600; text-align: end; }
.deliver { margin-block-start: 24px; text-align: start; }
.deliver .label { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-block-end: 10px; }
.cred-box { position: relative; background: var(--bg-alt); border-radius: var(--radius); padding: 18px 18px; padding-inline-end: 70px; font: 15px/1.6 var(--font-mono); font-variant-numeric: tabular-nums; text-align: start; word-break: break-word; white-space: pre-wrap; }
.cred-box .copy-btn { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; min-height: auto; padding: 6px 12px; font-size: 13px; }

/* ----------------------------- flash + banner */
.flash { padding: 13px 16px; border-radius: var(--radius); margin: 16px 0; font-size: 15px; font-weight: 500; }
.flash.error { background: var(--danger-bg); color: var(--danger); }
.flash.success { background: var(--success-bg); color: var(--success); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }
.promo-bar { background: var(--bg-alt); color: var(--text-muted); text-align: center; font-size: 12px; padding: 9px 16px; border-block-end: .5px solid var(--border); }
.promo-bar a { color: var(--accent); }

/* ----------------------------- footer */
.footer { background: var(--bg-alt); padding-block: 40px; padding-inline: 22px; border-block-start: .5px solid var(--border); }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; max-inline-size: var(--container-grid); margin-inline: auto; }
.footer__intro { max-inline-size: 300px; }
.footer__head { font-size: 13px; font-weight: 600; color: var(--text); margin-block-end: 12px; }
.footer__link { display: block; font-size: 12px; color: var(--text-muted-2); line-height: 2; }
.footer__link:hover { color: var(--text); text-decoration: underline; }
.footer__bottom { max-inline-size: var(--container-grid); margin: 24px auto 0; padding-block-start: 18px; border-block-start: .5px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-muted-2); }

/* ----------------------------- admin (shared primitives, light) */
.admin-shell { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - 48px); }
.admin-side { background: var(--bg-alt); border-inline-end: .5px solid var(--border); padding: 26px 16px; }
.admin-side h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted-2); margin: 0 0 10px; font-weight: 600; }
.admin-side a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 15px; margin-block-end: 3px; transition: background .15s, color .15s; }
.admin-side a:hover, .admin-side a.active { background: var(--surface); color: var(--text); }
.admin-main { padding: 36px 40px; max-width: 1080px; }
.admin-main h1 { font-size: 34px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-block-end: 26px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; }
.stat .n { font-size: 34px; font-weight: 600; letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--text-muted); font-size: 13px; margin-block-start: 2px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-block-end: 22px; }
.panel h3 { margin: 0 0 14px; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: start; padding: 12px 14px; border-block-end: 1px solid var(--border); }
.table th { color: var(--text-muted); font-weight: 600; }
.table tr:last-child td { border-block-end: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row { margin-block-end: 16px; }
.form-row.full { grid-column: 1 / -1; }
.form-row label { display: block; font-size: 14px; font-weight: 600; color: var(--text-muted); margin-block-end: 6px; }
.login-wrap { max-inline-size: 400px; margin: 90px auto; }

/* ----------------------------- responsive */
@media (max-width: 980px) {
  .product { grid-template-columns: 1fr; gap: 32px; padding-block: 48px; }
  .product__media { position: relative; inset-block-start: auto; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { border-inline-end: none; border-block-end: .5px solid var(--border); display: flex; flex-wrap: wrap; gap: 4px; }
  .admin-side h3 { width: 100%; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: 56px; }
  .hero { padding-block: 64px 56px; }
}
@media (max-width: 740px) {
  .nav__links { display: none; }
  .nav__search:not(.nav__search--m) { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .admin-main { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card:hover { transform: none; }
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ============================================================
   Professional-upgrade components
   ============================================================ */

/* form select */
.select { border: .5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 10px 14px; font-family: inherit; font-size: 15px; cursor: pointer; }
.select:focus { outline: 0; border-color: var(--accent); }

/* star ratings */
.stars { display: inline-flex; align-items: center; gap: 1px; color: #e3a008; line-height: 1; }
.stars .star { color: var(--border); }
.stars .star.on { color: #f5a623; }
.stars--sm { font-size: 13px; }
.stars--md { font-size: 18px; }
.stars__n { color: var(--text-muted); font-size: .82em; margin-inline-start: 5px; }
.card__sold { font-size: 12px; color: var(--text-muted); margin: 0; }

/* recent-sales ticker */
.ticker { overflow: hidden; border-block: .5px solid var(--border); background: var(--surface); padding: 10px 0; }
.ticker__track { display: inline-flex; gap: 40px; white-space: nowrap; animation: ticker 30s linear infinite; }
.ticker__item { font-size: 13px; color: var(--text-muted); font-weight: 500; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* shop toolbar + sort */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-inline-size: var(--container-grid); margin: 0 auto 36px; padding-inline: 22px; }
.shop-toolbar .filters { margin: 0; justify-content: flex-start; }
.sort-form { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* coupon */
.coupon-row { display: flex; gap: 8px; }
.coupon-row .input { flex: 1; }
.coupon-result { margin-block-start: 10px; font-size: 14px; font-weight: 600; }
.coupon-result.ok { color: var(--success); }
.coupon-result.bad { color: var(--danger); }

/* reviews */
.reviews { padding-block: 40px; border-block-start: .5px solid var(--border); margin-block-start: 20px; }
.review-list { display: flex; flex-direction: column; gap: 18px; }
.review { background: var(--surface); border: .5px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review__body { margin: 8px 0 0; color: var(--text); }
.review__photos { display: flex; gap: 8px; margin-block-start: 10px; flex-wrap: wrap; }
.review-photo { inline-size: 64px; block-size: 64px; object-fit: cover; border-radius: 8px;
  cursor: zoom-in; border: .5px solid var(--border); }
.review-photo-add { display: flex; align-items: center; gap: 7px; margin-block-start: 10px;
  font-size: 13.5px; color: var(--text-muted); cursor: pointer; width: fit-content; }
.review-photo-add input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); }
.review-photo-add:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.verified { font-size: 12px; font-weight: 600; color: var(--success); background: var(--success-bg); padding: 2px 8px; border-radius: var(--pill); }

/* Product Q&A */
.qa { padding-block: 40px; border-block-start: .5px solid var(--border); }
.qa-list { display: flex; flex-direction: column; gap: 14px; margin-block-end: 20px; }
.qa-item { background: var(--surface); border: .5px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.qa-q { margin: 0; font-weight: 600; }
.qa-a { margin: 8px 0 0; color: var(--text); }
.qa-badge { display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--bg-alt); color: var(--text-muted); font-size: 12px; font-weight: 800; margin-inline-end: 4px; }
.qa-badge--a { background: var(--accent-tint); color: var(--accent); }
.qa-ask summary { list-style: none; width: fit-content; }
.qa-ask summary::-webkit-details-marker { display: none; }
.qa-form { display: flex; flex-direction: column; gap: 10px; margin-block-start: 12px; max-inline-size: 520px; }
.review-cta { margin-block-start: 22px; padding: 18px; border-radius: var(--radius); background: var(--bg-alt); }
.review-cta .label { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-block-end: 10px; }
.rating-input { display: inline-flex; gap: 4px; margin-block-end: 10px; font-size: 26px; cursor: pointer; }
.rating-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-input .star { color: var(--border); transition: color .15s; }
.rating-input label:hover .star, .rating-input .star.on { color: #f5a623; }

/* legal / prose pages */
.legal { max-inline-size: var(--container-text); margin-inline: auto; padding-inline: 22px; }
.legal h1 { margin-block-end: 8px; }
.legal h3 { margin-block: 28px 8px; }
.legal p { color: var(--text); }
.legal .lead { margin-block-end: 8px; }

/* FAQ accordion */
.accordion { margin-block-start: 28px; border-block-start: .5px solid var(--border); }
.accordion details { border-block-end: .5px solid var(--border); }
.accordion summary { cursor: pointer; padding: 20px 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--text-muted); font-weight: 400; font-size: 24px; }
.accordion details[open] summary::after { content: "−"; }
.accordion details p { margin: 0 0 20px; color: var(--text-muted); }

/* newsletter (footer) */
.newsletter { display: flex; gap: 8px; margin-block-start: 14px; max-inline-size: 300px; }
.newsletter .input { padding: 9px 12px; font-size: 14px; }
.newsletter .btn { min-height: auto; padding: 9px 16px; }

/* payment strip */
.pay-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-inline-size: var(--container-grid); margin: 28px auto 0; padding: 16px 0 0; border-block-start: .5px solid var(--border); font-size: 12px; color: var(--text-muted-2); }
.pay-badge { border: .5px solid var(--border); border-radius: 6px; padding: 4px 10px; font-weight: 600; color: var(--text-muted); background: var(--surface); }

/* cookie banner */
.cookie { position: fixed; inset-block-end: 16px; inset-inline: 16px; max-inline-size: 560px; margin-inline: auto; background: var(--text); color: #fff; border-radius: var(--radius); padding: 16px 18px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-hover); z-index: 9500; font-size: 14px; }
.cookie[hidden] { display: none; }
.cookie .link { color: #6cb6ff; }
.cookie .btn { white-space: nowrap; min-height: auto; padding: 8px 18px; }

/* dashboard chart + two-col */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-block: 8px; }
.chart__bar { flex: 1; display: flex; align-items: flex-end; min-width: 3px; }
.chart__fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; transition: height .3s ease; min-height: 4px; }
.chart__bar:hover .chart__fill { background: var(--accent-hover); }

/* admin order actions */
.order-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-actions form { margin: 0; }
.linkbtn { background: none; border: 0; color: var(--accent); font-size: 14px; cursor: pointer; padding: 0; font-family: inherit; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--danger); }
.note-details summary { list-style: none; }
.note-details summary::-webkit-details-marker { display: none; }
.note-form { display: flex; gap: 6px; margin-block-start: 8px; }
.note-form .input { font-size: 13px; padding: 6px 10px; }
.admin-side__logout { background: none; border: 0; color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 9px 12px; font-family: inherit; width: 100%; text-align: start; border-radius: var(--radius-sm); }
.admin-side__logout:hover { background: var(--surface); color: var(--text); }

@media (max-width: 740px) {
  .two-col { grid-template-columns: 1fr; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; }
}

/* payment method selector */
.paymethods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block-start: 8px; }
.paymethod { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.paymethod input { accent-color: var(--accent); margin: 0; }
.paymethod:hover { border-color: var(--text-muted); }
.paymethod:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.paymethod .pm-ic { font-size: 20px; }
.paymethod .pm-t { font-size: 14px; font-weight: 600; line-height: 1.2; }
.paymethod .pm-t small { font-weight: 400; color: var(--text-muted); font-size: 11px; }
@media (max-width: 420px) { .paymethods { grid-template-columns: 1fr; } }

/* language toggle */
.lang-toggle { font-size: 12px; color: var(--text-muted); white-space: nowrap; font-weight: 500; }
.lang-toggle:hover { color: var(--text); }
@media (max-width: 740px) { .lang-toggle { display: none; } }
/* RTL: nudge the search icon already handled via logical props */

/* product image upload preview */
.img-preview { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-block-end: 10px; background: var(--bg-alt); }
input[type=file].input { padding: 9px 12px; font-size: 14px; cursor: pointer; }

/* setup / settings status */
.setup-status { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 16px 22px; }
.setup-stat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--pill); font-size: 14px; border: 1px solid var(--border); background: var(--surface); }
.setup-stat .dot2 { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted-2); }
.setup-stat.on { background: var(--success-bg); border-color: transparent; color: var(--success); }
.setup-stat.on .dot2 { background: var(--success); }
.setup-stat.off { color: var(--text-muted); }
.badge-status { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--pill); margin-inline-start: 8px; vertical-align: middle; }
.badge-status.ok { background: var(--success-bg); color: var(--success); }
.badge-status.no { background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border); }

/* ============================================================
   Polish pass — display font, mobile menu, visuals, social
   ============================================================ */
/* Editorial display: Playfair Display renders Latin glyphs; Arabic glyphs (no
   coverage in Playfair) fall through to El Messiri — an elegant Arabic display
   face. This is the single biggest "fashion boutique vs generic template" lever. */
:root { --font-display: "Montserrat Arabic", "Tajawal", sans-serif; }
[dir=rtl] { --font-display: "Montserrat Arabic", "Tajawal", sans-serif; }
h1, h2, h3, .nav__brand, .footer__head, .section__head h2, .hero h1 { font-family: var(--font-display); }
h1, .hero h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
.nav__brand { font-weight: 600; letter-spacing: .01em; }
.eyebrow { font-style: italic; font-weight: 500; font-family: var(--font-display); letter-spacing: .02em; }
[dir=rtl] .eyebrow { font-style: normal; }
[dir=ltr] h1, [dir=ltr] h2, [dir=ltr] h3 { letter-spacing: -.01em; }
[dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3, [dir=rtl] .hero h1 { letter-spacing: 0; line-height: 1.3; }

/* nav: larger logo, hamburger */
.brand-mark { width: 38px; height: 38px; border-radius: 10px; }
.brand-mark img { width: 27px; height: 27px; }
.nav { height: 56px; }
.nav__menu { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; }
.nav__menu:hover { background: var(--bg-alt); }

/* mobile drawer — a REAL fixed overlay (was position:sticky, which inserted
   ~1000px into the document flow: it jumped the page's scroll position on open
   and its opaque background painted over the fixed bottom nav). Mirrors the
   cart drawer's working fixed-overlay pattern so opening/closing never moves
   the page underneath, and the bottom nav / WhatsApp / cookie bar are all
   correctly covered (not fought with) while it's open. */
.nav__drawer-overlay { position: fixed; inset: 0; background: rgba(40,20,8,.4); z-index: 9600;
  opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.nav__drawer-overlay.show { opacity: 1; pointer-events: auto; }
.nav__drawer { display: none; }
.nav__drawer.open { display: block; position: fixed; inset-block-start: 56px; inset-block-end: 0;
  inset-inline: 0; z-index: 9601; background: var(--bg); box-shadow: var(--shadow-hover);
  padding: 12px 22px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto;
  -webkit-overflow-scrolling: touch; transform: translateY(-10px); opacity: 0;
  transition: transform .22s ease, opacity .22s ease; }
.nav__drawer.open.show { transform: none; opacity: 1; }
.nav__drawer-close { position: absolute; inset-block-start: 12px; inset-inline-end: 18px;
  background: var(--bg-alt); border: none; border-radius: 50%; width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer; color: var(--text-muted); z-index: 1; }
.nav__drawer a { display: block; padding: 13px 4px; font-size: 17px; font-weight: 600; color: var(--text); border-block-end: .5px solid var(--border); }
.nav__drawer a:last-child { border-block-end: 0; }
.nav__search--m { width: 100%; margin: 6px 0 8px; padding-inline-end: 44px; }
.nav__search--m .input--search { width: 100%; height: 42px; font-size: 15px; }
/* hamburger ↔ close icon morph: two stacked SVGs, cross-faded by aria-expanded */
.nav__menu svg.ic-close { display: none; }
.nav__menu[aria-expanded="true"] svg.ic-burger { display: none; }
.nav__menu[aria-expanded="true"] svg.ic-close { display: block; }

/* floating WhatsApp */
.wa-float { position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 9400;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 28px rgba(37,211,102,.45);
  transition: transform .15s ease; }
.wa-float:hover { transform: scale(1.08); }

/* Brand-aware SVG cover tiles (artwork.py) fill the media box edge-to-edge;
   the container's border-radius + overflow:hidden already frame/clip them. */
.tile-art { width: 100%; height: 100%; display: block; }
.card__media { font-size: 52px; }
.card__media > span { filter: drop-shadow(0 6px 12px rgba(94,46,18,.18)); }
.footer__tm { color: var(--text-muted-2); font-size: 11px; line-height: 1.5; text-align: center; max-inline-size: 760px; margin: 16px auto 0; opacity: .85; }

/* ── Uploaded photos: show the WHOLE image (no crop) over a blurred backdrop ── */
.media-photo { position: absolute; inset: 0; display: block; overflow: hidden; }
.media-photo::before { content: ""; position: absolute; inset: -8%; background: var(--img) center / cover no-repeat; filter: blur(20px) brightness(.62) saturate(1.15); transform: scale(1.12); }
.media-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ── Interactivity: keep the page alive with tasteful micro-motion ── */
.card { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover, .card.reveal:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.card__media { z-index: 0; }
.card__media .badge, .card__media .stockchip, .card .wish { z-index: 2; }
.card__media .tile-art, .card__media .media-photo img { transition: transform .45s ease; }
.card:hover .card__media .tile-art, .card:hover .card__media .media-photo img { transform: scale(1.06); }
/* shine sweep across the media on hover */
.card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); transform: translateX(-120%); transition: transform .65s ease; }
.card:hover .card__media::after { transform: translateX(120%); }
/* heart pop when saved */
@keyframes saba-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.wish.on svg, .wish-btn.on svg { animation: saba-pop .35s ease; }
/* add-to-cart tap pulse (class toggled in main.js) */
@keyframes saba-pulse { 0% { transform: scale(1); } 50% { transform: scale(.88); } 100% { transform: scale(1); } }
.added-pulse { animation: saba-pulse .3s ease; }
/* product page: subtle zoom on the main image */
.product__media .media-photo img { transition: transform .5s ease; }
.product__media:hover .media-photo img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .card:hover, .card.reveal:hover { transform: none; }
  .card__media::after, .card:hover .card__media .tile-art, .card:hover .card__media .media-photo img,
  .wish.on svg, .wish-btn.on svg, .added-pulse, .product__media:hover .media-photo img { animation: none; transform: none; transition: none; }
}

/* social row + brand-tile icons */
.socials { display: flex; gap: 10px; margin-block: 14px 4px; }
.social { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 18px; transition: transform .12s ease, border-color .15s; }
.social:hover { transform: translateY(-2px); border-color: var(--accent); }
.pay-badge--zc { background: var(--accent); color: #fff; border-color: transparent; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__search:not(.nav__search--m) { display: none; }
  .lang-toggle { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__cta { display: none; }
  .nav__brand { font-size: 16px; }
  .paymethods { grid-template-columns: 1fr; }
  .wa-float { inset-block-end: 16px; inset-inline-end: 16px; width: 52px; height: 52px; }
}

/* ═══ Easy-mode: simpler, bigger, friendlier for low-literacy buyers ═══ */

/* WhatsApp green action button (product "order on WhatsApp", order page proof) */
.btn--wa { background: #1faa54; color: #fff; }
.btn--wa:hover { background: #178a44; }

/* Header WhatsApp number — a real, visible human contact = trust */
.nav__wa { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: #fff; background: #1faa54; padding: 7px 13px; border-radius: var(--pill); white-space: nowrap; }
.nav__wa:hover { background: #178a44; }
@media (max-width: 560px) { .nav__wa .tabnum { display: none; } .nav__wa { padding: 9px; } }

/* Optional collapsible fields (email / coupon) — quiet "+ link" summary */
.opt-d { margin-block-start: 14px; }
.opt-d > summary { list-style: none; cursor: pointer; color: var(--accent); font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; }
.opt-d > summary::-webkit-details-marker { display: none; }
.opt-d > summary::before { content: "+"; font-weight: 800; font-size: 17px; }
.opt-d[open] > summary::before { content: "–"; }

/* Numbered pay steps 1-2-3 on the order page */
.pay-step { display: flex; gap: 14px; align-items: flex-start; margin-block-start: 16px;
  padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pay-step__n { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff;
  font-weight: 800; font-size: 19px; display: grid; place-items: center; }
.pay-step__body { flex: 1; min-width: 0; }
.pay-step__title { font-size: 18px; font-weight: 700; margin-block-end: 8px; }

/* Big, unmistakable copy buttons for the amount & number */
.copy-btn.btn--block { min-height: 50px; font-size: 16px; font-weight: 700; margin-block-start: 10px; }

/* Payment under-review summary card */
.pay-review { padding: 16px; background: var(--warn-bg); border-radius: var(--radius-lg); }
.pay-review__top { font-size: 18px; font-weight: 700; margin-block-end: 10px; }
.kv--tight { margin: 0; }

/* Inline field error next to the WhatsApp number */
.input--bad { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-bg) !important; }
.field-err { color: var(--danger); font-size: 14px; margin: 6px 0 0; text-align: start; }

/* Bigger touch targets + more legible Arabic on cheap phones */
.btn { min-height: 48px; }
.btn--lg, .btn-lg { min-height: 54px; }
[dir=rtl] body { font-size: 18px; line-height: 1.75; }
@media (max-width: 740px) {
  .input { padding: 14px; font-size: 16px; min-height: 52px; }
  input[type=file].input { min-height: 52px; }
  .paymethod { padding: 16px; }
  .pay-step { padding: 14px; }
}

/* ============================================================
   ✦ PREMIUM PASS — million-dollar craft (light theme)
   depth · hero · trust rail · proof · steps · cards · chrome
   Appended last so it wins the cascade. CSP-safe (CSS only).
   ============================================================ */
:root {
  /* cool premium base — Lampa tech blue */
  --bg: #f7fafd; --bg-alt: #e8f0f6; --surface: #ffffff;
  --border: #e1eaf0; --border-strong: #cedce6;
  /* layered, soft, expensive shadows — blue-tinted depth */
  --shadow-xs: 0 1px 2px rgba(20, 48, 80, .05);
  --shadow: 0 1px 2px rgba(20, 48, 80, .04), 0 10px 24px -10px rgba(40, 79, 120, .12);
  --shadow-md: 0 2px 6px rgba(20, 48, 80, .05), 0 18px 40px -14px rgba(40, 79, 120, .16);
  --shadow-hover: 0 6px 14px rgba(40, 79, 120, .07), 0 30px 60px -18px rgba(57, 114, 192, .22);
  --shadow-cta: 0 8px 22px -6px rgba(57, 114, 192, .42), 0 2px 6px rgba(57, 114, 192, .22);
  --ring: 0 0 0 4px rgba(57, 114, 192, .20);
  --accent-soft: rgba(57, 114, 192, .10);
  --grad-accent: linear-gradient(135deg, #4481d6 0%, var(--accent) 55%, #2c5d9c 100%);
  --grad-cta: linear-gradient(180deg, #4f84cf 0%, var(--accent) 100%);
}
html { scroll-behavior: smooth; }
::selection { background: rgba(57, 114, 192, .18); }
body { background:
  radial-gradient(1200px 420px at 50% -160px, rgba(57, 114, 192, .06), transparent 70%),
  var(--bg); }

/* refined type rhythm */
.eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.section__head .lead { font-size: 18px; }

/* ---- premium CTA: amber gradient + glow ---- */
.btn--primary, .btn-primary, .btn-accent {
  background: var(--grad-cta); color: #2a1a02; font-weight: 800;
  box-shadow: var(--shadow-cta); letter-spacing: .005em;
}
.btn--primary:hover, .btn-primary:hover, .btn-accent:hover {
  background: var(--accent-hover); color: #fff;
  box-shadow: 0 12px 30px -6px rgba(57, 114, 192, .5), 0 2px 6px rgba(57, 114, 192, .28);
  transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(0) scale(.98); }
/* ghost / secondary — quiet, refined */
.btn--ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs); font-weight: 700; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* ---- brand mark + nav polish ---- */
.nav { border-block-end: 1px solid var(--border); }
.brand-mark { background: var(--grad-accent); box-shadow: 0 4px 12px -2px rgba(57, 114, 192, .45); border-radius: 11px; }
.nav__brand { letter-spacing: .01em; }
.footer__logo { background: var(--grad-accent); }

/* ============================================================
   HERO — contained aurora, tight rhythm, integrated trust rail
   ============================================================ */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: 92px 76px;
  background:
    radial-gradient(58% 46% at 50% -6%, rgba(57, 114, 192, .13), transparent 68%),
    radial-gradient(40% 38% at 88% 4%, rgba(201,154,82,.10), transparent 66%),
    radial-gradient(40% 38% at 12% 8%, rgba(57, 114, 192, .07), transparent 66%),
    var(--bg);
}
/* faint dotted lattice for depth — masked to fade out */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(57, 114, 192, .10) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(62% 60% at 50% 28%, #000 0%, transparent 75%);
          mask-image: radial-gradient(62% 60% at 50% 28%, #000 0%, transparent 75%);
  opacity: .55;
}
.hero .eyebrow { display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--accent); padding: 7px 15px; border-radius: var(--pill);
  box-shadow: var(--shadow-xs); margin-block-end: 22px; }
.hero .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 4px var(--success-bg); }
.hero h1 { max-inline-size: 16ch; margin-inline: auto; }
.hero .lead { font-size: 20px; max-inline-size: 540px; margin: 0 auto 30px; }
.hero__actions { gap: 14px; }
.hero__trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; margin: 34px auto 0; padding: 0; max-inline-size: 720px; }
.hero__trust li { display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--text-muted); }
.hero__trust svg { flex: none; color: var(--accent); }
.hero__trust .ok { color: var(--success); }

/* ============================================================
   crafted SVG icon chips (replace emoji everywhere on home)
   ============================================================ */
.ic-chip { flex: none; display: inline-grid; place-items: center;
  inline-size: 48px; block-size: 48px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent); }
.ic-chip svg { inline-size: 24px; block-size: 24px; }
.ic-chip--gold { background: rgba(201,154,82,.14); color: var(--cta-hover); }
.ic-chip--green { background: var(--success-bg); color: var(--success); }

/* ---- social-proof band → premium cards ---- */
.proof-band { padding: 8px 20px 0; }
.proof { gap: 16px; padding-inline: 22px; }
.proof__item { border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.proof__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.proof__ic { display: inline-grid; place-items: center; inline-size: 46px; block-size: 46px;
  border-radius: 13px; background: var(--accent-soft); color: var(--accent); font-size: 0; }
.proof__ic svg { inline-size: 23px; block-size: 23px; }
.proof__t { font-size: 16px; }
.proof__s { font-size: 13px; }

/* ============================================================
   HOW IT WORKS — numbered steps with icon, connecting rail
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-inline-size: 1024px; margin-inline: auto; padding-inline: 22px; }
.step-card { position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px 22px; box-shadow: var(--shadow);
  text-align: start; transition: transform .25s ease, box-shadow .25s ease; }
.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step-card__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: 16px; }
.step-card__n { font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--accent); background: var(--accent-soft); inline-size: 30px; block-size: 30px;
  border-radius: 50%; display: grid; place-items: center; }
.step-card h3 { font-size: 20px; margin: 0 0 6px; }
.step-card p { margin: 0; font-size: 15px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ============================================================
   PRODUCT CARD — refined frame, depth, hairline
   ============================================================ */
.card { border: 1px solid var(--border); box-shadow: var(--shadow); padding: 16px; gap: 5px; }
.card:hover, .card.reveal:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.card__media { margin-block-end: 14px; box-shadow: inset 0 0 0 1px rgba(16,24,40,.04); }
.card__eyebrow { letter-spacing: .07em; color: var(--accent); opacity: .9; }
.card__title { font-size: 17px; }
.card__title a:hover { color: var(--accent); }
.card__price { font-size: 23px; }
.card__actions { gap: 8px; margin-block-start: 12px; }

/* product grid: center the tracks so a small catalog (even 2 items) reads as
   intentional & balanced instead of orphaned to one side. Fixed-max tracks
   (not 1fr) let justify-content actually center the row. */
.grid { grid-template-columns: repeat(auto-fill, minmax(258px, 300px)); justify-content: center; }

/* premium category chips */
.cat-chips { gap: 8px; }
.cat-chips .tag { padding: 8px 17px; box-shadow: var(--shadow-xs); }
.cat-chips .tag--active { box-shadow: 0 6px 16px -6px rgba(57, 114, 192, .5); }

/* refined section heads */
.section__head h2 { letter-spacing: -.01em; }
.section { padding-block: 76px; }
@media (max-width: 740px) { .section { padding-block: 52px; } .hero { padding-block: 60px 52px; } }

/* hairline divider helper for premium rhythm */
.soft-divide { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); max-inline-size: var(--container-grid); margin-inline: auto; }

/* premium error / empty pages */
.err-wrap { max-inline-size: 520px; margin-inline: auto; }
.err-ic { inline-size: 72px; block-size: 72px; border-radius: 20px; margin: 0 auto; }
.err-ic svg { inline-size: 36px; block-size: 36px; }
.err-code { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 9vw, 68px); line-height: 1; color: var(--accent); letter-spacing: -.02em; margin-block: 14px 2px; }
.err-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-block-start: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn--primary:hover, .proof__item:hover, .step-card:hover { transform: none; }
}

/* ============================================================
   PREMIUM FOOTER — deep-indigo anchor (luxury close)
   scoped entirely to .footer so it can't leak into the app
   ============================================================ */
.footer {
  position: relative; isolation: isolate; color: #d6e1ec;
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(201,154,82,.12), transparent 55%),
    radial-gradient(70% 120% at 92% 0%, rgba(68, 129, 214, .20), transparent 55%),
    linear-gradient(180deg, #16283a 0%, #0f1d2a 60%, #0a141d 100%);
  border-block-start: 0; padding-block: 56px 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.footer .footer__logo { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.footer .footer__head { color: #fff; letter-spacing: .01em; }
.footer .footer__link { color: rgba(255,255,255,.6); transition: color .15s ease; }
.footer .footer__link:hover { color: #fff; text-decoration: none; }
.footer .footer__intro .footer__link { color: rgba(255,255,255,.72); }
.footer .socials .social { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.footer .socials .social:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.footer .newsletter .input {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff;
}
.footer .newsletter .input::placeholder { color: rgba(255,255,255,.5); }
.footer .newsletter .input:focus { border-color: rgba(123, 171, 232, .7); box-shadow: 0 0 0 3px rgba(123, 171, 232, .20); }
.footer .antiphish {
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.66); margin-block-start: 24px;
}
.footer .antiphish b { color: #fff; }
.footer .pay-strip { border-block-start: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); margin-block-start: 26px; }
.footer .pay-badge { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.78); }
.footer .pay-badge--zc { background: var(--cta); border-color: transparent; color: #2a1a02; font-weight: 800; }
.footer .pay-badge--cod { background: var(--accent); border-color: transparent; color: #fff; font-weight: 800; }
.footer .footer__tm { color: rgba(255,255,255,.42); }
.footer .footer__bottom { border-block-start: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); }

/* ============================================================
   ✦ DARK MODE — refined deep-indigo (opt-in via data-theme=dark)
   Cookie-driven: the server renders <html data-theme="dark"> so there's
   no flash. Token-level overrides + a few component-specific fixes.
   ============================================================ */
.theme-toggle { background: none; border: 0; cursor: pointer; color: var(--text-muted);
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; padding: 0;
  transition: color .15s ease, background-color .15s ease; }
.theme-toggle:hover { color: var(--accent); background: var(--bg-alt); }
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
@media (max-width: 560px) { .theme-toggle { width: 32px; height: 32px; } }

html[data-theme="dark"] {
  color-scheme: dark;
  /* warm plum night — rose brand in the dark (was SAABA navy/periwinkle) */
  --bg: #121a27; --bg-alt: #151e20; --surface: #192524;
  --text: #ecf2f7; --text-muted: #b9c7d3; --text-muted-2: #889ca9;
  --accent: #7babe8; --accent-hover: #93bdef; --accent-tint: rgba(123, 171, 232, .16); --accent-soft: rgba(123, 171, 232, .16);
  --cta: #7babe8; --cta-hover: #93bdef;
  --gold: #d8a861; --gold-soft: #2c3a3e; --brown-deep: #d3e2f1;
  --success: #34d399; --success-bg: rgba(52,211,153,.15);
  --danger: #718cfb; --danger-bg: rgba(113, 140, 251, .16);
  --warn: #fbbf24; --warn-bg: rgba(251,191,36,.15);
  --border: #2a353a; --border-strong: #37454d;
  --nav-bg: rgba(18, 26, 39, .94);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.45);
  --shadow: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px -10px rgba(0,0,0,.6);
  --shadow-md: 0 4px 10px rgba(0,0,0,.4), 0 20px 44px -14px rgba(0,0,0,.66);
  --shadow-hover: 0 8px 18px rgba(0,0,0,.45), 0 32px 64px -18px rgba(0,0,0,.72);
  --shadow-cta: 0 8px 22px -6px rgba(123, 171, 232, .42), 0 2px 6px rgba(123, 171, 232, .22);
  --ring: 0 0 0 4px rgba(123, 171, 232, .32);
  --grad-accent: linear-gradient(135deg, #7babe8 0%, #3972c0 55%, #23558a 100%);
}
html[data-theme="dark"] body {
  background: var(--bg);
}
html[data-theme="dark"] .hero {
  background:
    radial-gradient(58% 46% at 50% -6%, rgba(123, 171, 232, .18), transparent 68%),
    radial-gradient(40% 38% at 88% 4%, rgba(216,168,97,.10), transparent 66%),
    radial-gradient(40% 38% at 12% 8%, rgba(123, 171, 232, .10), transparent 66%),
    var(--bg);
}
html[data-theme="dark"] .hero::before {
  background-image: radial-gradient(rgba(123, 171, 232, .16) 1px, transparent 1.4px);
}
html[data-theme="dark"] .hero .eyebrow { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .nav { border-block-end-color: var(--border); }
html[data-theme="dark"] .promo-bar { background: var(--bg-alt); }
/* inputs/selects: lift off the page so fields read as fillable */
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] textarea.input { background: #121a1d; }
/* white stock pill → dark glass on dark cards */
html[data-theme="dark"] .card__media .stockchip { background: rgba(24, 35, 40, .92); color: var(--text-muted); }
html[data-theme="dark"] .card__media .stockchip.out { color: var(--danger); }
html[data-theme="dark"] .wish { background: rgba(24, 35, 40, .92); color: var(--text-muted); }
/* cookie banner stays a readable dark slab (it uses --text as bg in light) */
html[data-theme="dark"] .cookie { background: #1a252a; color: #fff; box-shadow: var(--shadow-hover); }
/* warm-tinted boxes → neutral indigo tint in dark */
html[data-theme="dark"] .guarantee,
html[data-theme="dark"] .wallet-card { background: var(--accent-tint); border-color: var(--border); }
/* dashed anti-phish dividers etc. inherit vars; flash messages inherit too */
html[data-theme="dark"] .pay-badge { color: var(--text-muted); }
/* the footer is already deep-indigo in BOTH themes — leave it as-is */


/* ============================================================
   Design tokens (append-only, last wins)
   Adds gaming-energy gradients, glow, and premium depth on top
   of the existing indigo(#1f3a8a)+amber(#f59e0b) trust base.
   Light values here; dark overrides in [data-theme=dark] block.
   ============================================================ */
:root {
  /* energetic-but-tasteful gradients — Lampa blue + amber */
  --grad-hero: linear-gradient(135deg, #2c5d9c 0%, var(--accent) 46%, #9abae8 140%);
  --grad-heading: linear-gradient(92deg, #2c5d9c 0%, var(--accent) 46%, #4481d6 118%);
  --grad-edge: linear-gradient(90deg, var(--accent), #4481d6);
  --grad-cta-sheen: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%);

  /* premium "expensive" shadows + brand glows — rose */
  --shadow-glow-accent: 0 18px 50px -18px rgba(57, 114, 192, .40);
  --shadow-glow-cta: 0 16px 40px -14px rgba(57, 114, 192, .45);
  --shadow-card-rise: 0 10px 22px rgba(40, 79, 120, .08), 0 34px 70px -22px rgba(57, 114, 192, .26);

  /* hero aurora colors (drive the animated glow) */
  --aurora-1: rgba(57, 114, 192, .16);
  --aurora-2: rgba(201,154,82,.12);
  --aurora-3: rgba(68, 129, 214, .14);

  /* media spotlight on product cards */
  --media-spot: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.7), transparent 60%);
  --media-spot-hot: radial-gradient(120% 95% at 50% -10%, rgba(57, 114, 192, .14), transparent 62%);

  /* motion system — consistent, snappy, premium */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.32,.64,1);
  --dur-fast: .16s; --dur-base: .24s; --dur-slow: .32s;
}

[data-theme="dark"] {
  --grad-hero: linear-gradient(135deg, #7babe8 0%, #3972c0 46%, #23558a 150%);
  --grad-heading: linear-gradient(92deg, #c2d8f5 0%, #a6c4ef 42%, #e7b07a 118%);
  --grad-edge: linear-gradient(90deg, #7babe8, #d8a861);
  --shadow-glow-accent: 0 18px 54px -16px rgba(0,0,0,.7);
  --shadow-glow-cta: 0 16px 42px -12px rgba(123, 171, 232, .5);
  --shadow-card-rise: 0 10px 24px rgba(0,0,0,.5), 0 36px 76px -22px rgba(0,0,0,.7);
  --aurora-1: rgba(123, 171, 232, .22);
  --aurora-2: rgba(216,168,97,.14);
  --aurora-3: rgba(68, 129, 214, .20);
  --media-spot: radial-gradient(120% 90% at 50% -10%, rgba(123, 171, 232, .14), transparent 60%);
  --media-spot-hot: radial-gradient(120% 95% at 50% -10%, rgba(123, 171, 232, .18), transparent 62%);
}

/* ============================================================
   Component polish (append-only)
   Safe to append: only adds depth/motion/glow; no layout changes.
   RTL-safe (logical props), dark-parity, reduced-motion guarded.
   ============================================================ */

/* ---------- HERO: breathing aurora + display H1 ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
/* animated conic glow that slowly breathes behind the headline.
   z-index keeps it under content & under the existing ::before lattice. */
.hero::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  inset-block-start: -38%; inset-inline-start: 50%; translate: -50% 0;
  inline-size: min(1100px, 130%); block-size: 720px; border-radius: 50%;
  background:
    radial-gradient(38% 42% at 32% 38%, var(--aurora-1), transparent 70%),
    radial-gradient(34% 38% at 70% 30%, var(--aurora-2), transparent 70%),
    radial-gradient(40% 42% at 52% 66%, var(--aurora-3), transparent 72%);
  filter: blur(14px); opacity: .9;
  animation: lampa-aurora 18s var(--ease-out) infinite alternate;
}
@keyframes lampa-aurora {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  100% { transform: translateY(22px) scale(1.08) rotate(8deg); }
}
/* display-grade headline; opt-in gradient accent via <span class="grad"> in H1 */
.hero h1 { font-weight: 800; letter-spacing: -.022em; }
.hero h1 .grad, .grad-text {
  background: var(--grad-heading); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* live pulse dot on the eyebrow already exists — add a soft ring pulse */
.hero .eyebrow::before { animation: lampa-pulse 2.4s var(--ease-out) infinite; }
@keyframes lampa-pulse {
  0%,100% { box-shadow: 0 0 0 4px var(--success-bg); }
  55%     { box-shadow: 0 0 0 7px color-mix(in srgb, var(--success) 14%, transparent); }
}

/* ---------- PRIMARY CTA: amber glow + shine sweep ---------- */
.btn--primary, .btn-primary, .btn-accent { position: relative; overflow: hidden; box-shadow: var(--shadow-glow-cta); }
.btn--primary::after, .btn-primary::after, .btn-accent::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grad-cta-sheen); background-size: 220% 100%;
  background-position: 180% 0; opacity: 0; transition: opacity var(--dur-fast) ease;
}
.btn--primary:hover::after, .btn-primary:hover::after, .btn-accent:hover::after {
  opacity: .9; animation: lampa-sheen .6s var(--ease-out);
}
@keyframes lampa-sheen { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.btn--primary:hover, .btn-primary:hover, .btn-accent:hover {
  box-shadow: 0 20px 46px -12px rgba(57, 114, 192, .5); transform: translateY(-2px);
}
/* ghost CTA: subtle indigo wash on hover */
.btn--ghost:hover, .btn-ghost:hover { box-shadow: var(--shadow-glow-accent); }
/* focus polish everywhere (a11y) */
.btn:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow-glow-cta); }

/* ---------- NAV: scrolled depth + animated link underline ---------- */
.nav { transition: box-shadow var(--dur-base) ease, background-color var(--dur-base) ease; }
.nav__links a { position: relative; }
.nav__links a::after {
  content: ""; position: absolute; inset-block-end: -3px; inset-inline-start: 0;
  inline-size: 100%; block-size: 2px; border-radius: 2px;
  background: var(--grad-edge); transform: scaleX(0); transform-origin: inline-start;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); }
[dir="rtl"] .nav__links a::after { transform-origin: inline-end; }
.brand-mark { transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) ease; }
.nav__brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); box-shadow: var(--shadow-glow-accent); }
.nav__cart-count { box-shadow: 0 0 0 3px var(--surface); }

/* ---------- PRODUCT CARD ---------- */
.card { position: relative; transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) ease, border-color var(--dur-base) ease; }
/* amber top-edge that ignites on hover */
.card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg);
  background: var(--grad-edge); opacity: 0; transition: opacity var(--dur-base) ease; z-index: 1;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-rise); }
.card:hover::before { opacity: 1; }
/* media: soft spotlight that warms to amber on hover; image gently scales */
.card__media { background-image: var(--media-spot); transition: background-image var(--dur-slow) ease; }
.card:hover .card__media { background-image: var(--media-spot-hot); }
.card__media img { transition: transform var(--dur-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.045); }
.card__media .badge { box-shadow: var(--shadow-glow-accent); background: var(--grad-accent); }
.card__price { letter-spacing: -.01em; }
/* add-to-cart icon button: spring press */
.card__addcart:active { transform: scale(.92); }

/* ---------- PROOF BAND: indigo-glow icons ---------- */
.proof__ic { box-shadow: inset 0 0 0 1px var(--border), 0 6px 16px -8px rgba(57, 114, 192, .35);
  transition: transform var(--dur-base) var(--ease-spring); }
.proof__item:hover .proof__ic { transform: translateY(-2px) scale(1.05); }
.proof__t { letter-spacing: -.005em; }

/* ---------- HOW IT WORKS: glow chips + connecting rail ---------- */
.steps { position: relative; }
.steps::before {
  content: ""; position: absolute; inset-block-start: 48px; inset-inline: 14%;
  block-size: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 18px);
}
@media (max-width: 760px) { .steps::before { display: none; } }
.step-card { z-index: 1; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease; }
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow-accent); }
.ic-chip { box-shadow: 0 6px 18px -8px rgba(57, 114, 192, .4); transition: transform var(--dur-base) var(--ease-spring); }
.step-card:hover .ic-chip { transform: scale(1.08) rotate(-4deg); }
.step-card__n { box-shadow: inset 0 0 0 1px var(--accent-soft); }

/* ---------- CATEGORY CHIPS: lively active state ---------- */
.cat-chips .tag { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) ease, background-color var(--dur-base) ease, color var(--dur-base) ease; }
.cat-chips .tag:hover { transform: translateY(-1px); }
.cat-chips .tag--active { background: var(--grad-accent); box-shadow: var(--shadow-glow-accent); }

/* ---------- PRODUCT DETAIL (CRO) buy-box lift ---------- */
.buy-box { box-shadow: var(--shadow-card-rise); }
.product__media .badge, .pay-amount__val { letter-spacing: -.01em; }

/* ============================================================
   RESPONSIVE — keep the energy calm on small screens
   ============================================================ */
@media (max-width: 740px) {
  .hero::after { block-size: 480px; filter: blur(10px); }
  .card:hover { transform: translateY(-4px); }
}

/* ============================================================
   ACCESSIBILITY — honor reduced motion (kills all the new motion)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .hero .eyebrow::before { animation: none; }
  .btn--primary:hover::after, .btn-primary:hover::after, .btn-accent:hover::after { animation: none; opacity: 0; }
  .card, .card:hover, .card__media img, .card:hover .card__media img,
  .step-card, .step-card:hover, .ic-chip, .step-card:hover .ic-chip,
  .proof__item:hover .proof__ic, .brand-mark, .nav__brand:hover .brand-mark,
  .btn--primary:hover, .btn-primary:hover, .btn-accent:hover,
  .cat-chips .tag:hover, .cat-chips .tag--active { transform: none; animation: none; }
  .nav__links a::after { transition: none; }
}

/* ============================================================
   Homepage trust sections (append-only)
   ============================================================ */
.guarantee-band { text-align: center; }
.guarantee-band .shield {
  inline-size: 52px; block-size: 52px; display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--success-bg); color: var(--success);
  margin-block-end: 16px; box-shadow: var(--shadow-glow-accent);
}
.guarantee-band h2 { margin: 0 0 10px; }
.guarantee-band p { max-inline-size: 620px; margin: 0 auto 20px; color: var(--text-muted); }

/* Hero sub-trust delivered line */
.hero__delivered { margin-block-start: 16px; font-size: 14px; color: var(--text-muted); }
.hero__delivered .tabnum { font-weight: 800; color: var(--text); }

/* Homepage reviews use the shared .grid; give cards a comfortable min */
.reviews-grid .review { text-align: start; box-shadow: var(--shadow); }

/* ---- "or" divider between WhatsApp (primary) and on-site checkout ---- */
.pay-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--text-muted-2); font-size: 13px; font-weight: 700; }
.pay-or > span { flex: none; }
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---- Lampa: size×colour picker (PDP) ---- */
.picker { margin: 16px 0 4px; }
.picker__head { display: flex; align-items: center; gap: 10px; margin-block-end: 9px; }
.picker__label { font-weight: 700; font-size: 15px; }
.picker__chosen { color: var(--text-muted); font-size: 14px; }
.picker__guide { margin-inline-start: auto; font-size: 13px; cursor: pointer; background: none; border: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { inline-size: 44px; block-size: 44px; padding: 4px; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; transition: border-color .15s; }
.swatch > span { display: block; inline-size: 100%; block-size: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.swatch:hover { border-color: var(--border); }
.swatch.on { border-color: var(--text); }
/* Sold-out colour: was visually identical to an in-stock one — a shopper tapped
   it, then a size, only to find every size greyed out with no clue the COLOUR
   (not any particular size) was the problem. Stays tappable (she can still see
   the photo) but reads as unavailable at a glance. */
.swatch.is-out { opacity: .45; cursor: not-allowed; }
.swatch.is-out > span { position: relative; }
.swatch.is-out > span::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(to bottom right, transparent 46%, var(--danger) 49%, var(--danger) 51%, transparent 54%);
}
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.size-pill { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 46px; min-block-size: 44px; padding: 8px 14px; border: 1.5px solid var(--border); background: var(--surface, #fff); color: var(--text); border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; transition: .15s; }
.size-pill:hover:not(:disabled) { border-color: var(--text); }
.size-pill.on { border-color: var(--text); background: var(--text); color: var(--surface, #fff); }
.size-pill.is-out, .size-pill:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
/* available in another colour — still tappable; tapping switches the colour */
.size-pill.is-elsewhere:not(.on) { border-style: dashed; opacity: .7; }
.picker__err { color: var(--danger); font-size: 13.5px; margin: 9px 0 0; }

/* ---- Lampa: variant-aware cart rows ---- */
.cart-row { align-items: flex-start; gap: 10px; }
.cart-row__img { inline-size: 46px; block-size: 58px; object-fit: cover; border-radius: 8px; flex: none; background: var(--surface-2, #f3f3f3); }
.cart-row__opt { font-size: 12.5px; color: var(--text-muted); margin-block-start: 2px; }

/* ---- Lampa: checkout / bag page ---- */
.checkout { max-width: 980px; padding-block: 24px 60px; }
.checkout__h { font-size: 26px; margin: 0 0 18px; }
.checkout__grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
@media (min-width: 860px) { .checkout__grid { grid-template-columns: 1.4fr 1fr; } }
.ck-card { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-block-end: 16px; }
.ck-card__h { font-size: 17px; margin: 0 0 14px; }
.ck-field { margin-block-end: 12px; }
.ck-field label { display: block; font-size: 13px; font-weight: 600; margin-block-end: 6px; }
.ck-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ck-summary { position: sticky; top: 80px; }
.ck-lines { display: flex; flex-direction: column; gap: 12px; }
.ck-line { display: flex; align-items: center; gap: 10px; }
.ck-line__img { inline-size: 44px; block-size: 56px; object-fit: cover; border-radius: 8px; flex: none; background: var(--surface-2,#f3f3f3); }
.ck-line__info { flex: 1; min-width: 0; }
.ck-line__t { font-weight: 600; font-size: 14px; }
.ck-line__opt { font-size: 12.5px; color: var(--text-muted); }
.ck-line__q { font-size: 12.5px; }
.ck-line__capnotice { font-size: 12.5px; color: var(--warn); font-weight: 600; margin-block-start: 2px; }
.ck-line__p { font-weight: 700; white-space: nowrap; }
.ck-tot { display: flex; justify-content: space-between; margin-block-start: 10px; font-size: 14.5px; }
.ck-tot--grand { font-size: 18px; font-weight: 800; border-block-start: 1px solid var(--border); padding-block-start: 10px; margin-block-start: 12px; }

/* ============================================================
   Lampa — dense product cards + grid
   ============================================================ */
.card { position: relative; background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; transform: none; }
.card:hover { transform: none; box-shadow: none; }
.card__media { position: relative; display: block; aspect-ratio: 4/5; inline-size: 100%; background: var(--bg-alt); border-radius: var(--radius-sm); overflow: hidden; margin: 0; place-items: stretch; }
.card__media .media-photo { display: block; inline-size: 100%; block-size: 100%; }
.card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.card:hover .card__media img { transform: scale(1.045); }
.card .wish { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 2; inline-size: 30px; block-size: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: #222; display: grid; place-items: center; cursor: pointer; }
.card .wish.on { color: var(--sale); }
.card__add { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; z-index: 2; inline-size: 32px; block-size: 32px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.20); }
.card__add:hover { background: #000; color: #fff; }
.off-badge--corner { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 2; background: var(--sale); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 7px; border-end-end-radius: 6px; }
/* "نفذت الكمية" (owner request, 2026-07-17): WHITE text on a solid RED badge with
   a clear red border/outline, so it reads instantly even over a busy photo — not
   just colored text sitting on a translucent wash. Dimmed backdrop stays (so the
   whole photo recedes) but the label itself is now a high-contrast stamped badge. */
.card__soldout { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.45); }
.card__soldout > span { background: #1f45d2; color: #fff; border: 2px solid #1331a4; border-radius: 6px; padding: 6px 14px; font-weight: 800; font-size: 14px; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
html[data-theme="dark"] .card__soldout { background: rgba(12, 17, 20, .55); }
html[data-theme="dark"] .card__soldout > span { background: #3053e5; border-color: #8a9dff; }
/* The whole card recedes for a sold-out item — not just a small label sitting on
   the photo, which a shopper thumb-scrolling quickly can easily miss. */
.card.is-out .card__body { opacity: .5; }
.card__body { padding: 7px 2px 2px; }
.card__price { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.card__price .price--sale { color: var(--sale); }
.card__price .compare-at { font-size: 12px; font-weight: 500; color: var(--text-muted-2); text-decoration: line-through; margin: 0; }
.card__title { margin: 3px 0 0; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__title a { color: inherit; }
.card__rate { margin-block-start: 3px; font-size: 12px; }
@media (max-width: 520px) { .card__title { font-size: 12.5px; } .card__price { font-size: 15px; } }

/* ---- mobile bottom nav (SHEIN-style) ---- */
.botnav { display: none; }
@media (max-width: 860px) {
  .botnav { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
            background: #fff; border-block-start: 1px solid var(--border);
            padding-block: 6px; padding-block-end: max(6px, env(safe-area-inset-bottom)); }
  .botnav a, .botnav button { flex: 1; background: none; border: 0; display: flex; flex-direction: column;
            align-items: center; gap: 2px; font-size: 10px; color: var(--text-muted); cursor: pointer;
            text-decoration: none; position: relative; }
  .botnav a.on { color: #000; }
  .botnav svg { inline-size: 22px; block-size: 22px; }
  .botnav__badge { position: absolute; inset-block-start: -3px; inset-inline-start: 58%; background: var(--sale);
            color: #fff; font-size: 9px; min-inline-size: 15px; block-size: 15px; border-radius: 9px;
            display: grid; place-items: center; padding: 0 3px; }
  body { padding-block-end: 62px; }
  /* Lift the floating WhatsApp AND the cookie banner ABOVE the bottom nav so
     neither sits on top of the «حسابي» (account) tab and blocks the shopper
     from reaching her account. */
  .wa-float { inset-block-end: calc(74px + env(safe-area-inset-bottom)); }
  .cookie { inset-block-end: calc(70px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Lampa — homepage
   ============================================================ */
.benefits { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding: 16px 12px; border-block-end: 1px solid var(--border); }
.benefit { display: flex; align-items: center; gap: 9px; }
.benefit > span { font-size: 22px; }
.benefit b { display: block; font-size: 13px; }
.benefit small { color: var(--text-muted); font-size: 12px; }

.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px; max-inline-size: 760px; margin: 24px auto; padding-inline: 12px; }
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text); }
.cat-tile__ic { inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--bg-alt); display: grid; place-items: center; font-size: 28px; transition: background .2s; }
.cat-tile:hover .cat-tile__ic { background: #ececec; }
.cat-tile__t { font-size: 13px; font-weight: 600; }

.home-feed, .home-reviews { max-inline-size: var(--container-grid); margin-inline: auto; padding: 14px 0 40px; }
.home-feed__head { text-align: center; padding: 20px 12px 16px; }
.home-feed__head h2 { font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -.01em; }

/* Slim welcome strip — replaces the old full-bleed hero photo so the product
   grid greets the shopper immediately. Elegant, brand-warm, quiet. */
.welcome-strip { text-align: center; padding: 26px 20px 8px;
  background: radial-gradient(120% 140% at 50% -20%, var(--accent-tint) 0%, transparent 62%); }
.welcome-strip__kicker { font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent); font-weight: 800; margin: 0 0 8px; }
.welcome-strip__title { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 6vw, 40px); line-height: 1.12; letter-spacing: -.01em; margin: 0;
  color: var(--text); text-wrap: balance; }
.welcome-strip__title::after { content: ""; display: block; inline-size: 46px; block-size: 2px;
  margin: 14px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.home-feed--hero { padding-block-start: 10px; }
@media (max-width: 560px) { .welcome-strip { padding: 20px 16px 4px; } }

/* Homepage deals rail — every currently-discounted product gathered in one
   eye-catching band right at the top, so a shopper sees the savings before
   anything else. Warm sale/gold wash to stand apart from the plain grid below. */
.deals { background: linear-gradient(180deg, var(--sale-bg) 0%, var(--gold-soft) 100%);
  padding: 30px 0 42px; margin-block-end: 4px; }
.deals .sec-head__kick { color: var(--sale); }
.deals .sec-head__t::after { background: linear-gradient(90deg, var(--sale), var(--gold)); }
.deals__sub { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--text); }
.deals .grid { margin-block-start: 6px; }
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding-inline: 12px; }
.rev-card { background: var(--bg-alt); border-radius: 8px; padding: 16px; }
.rev-card p { margin: 8px 0; font-size: 14px; line-height: 1.5; }

/* ============================================================
   Lampa — professional polish (ui-ux-pro-max pass)
   ============================================================ */
.topbar { background: #000; color: #fff; text-align: center; font-size: 12px; letter-spacing: .02em; padding: 7px 12px; font-weight: 500; }

/* benefit SVG icons (no emoji) */
.benefit > svg { inline-size: 24px; block-size: 24px; color: var(--text); flex: none; }

/* category tiles rendered as round real photos */
.cat-tile__ic { background-size: cover; background-position: center; background-color: var(--bg-alt); }

/* polish: pointer + visible focus + subtle card frame + reduced-motion */
button, a, .card, .swatch, .size-pill, [data-add-cart], [data-cart-open], [role="button"] { cursor: pointer; }
a:focus-visible, button:focus-visible, .swatch:focus-visible, .size-pill:focus-visible, .card__media:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card__media { box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* primary buttons → Lampa blue (accent) */
.btn--primary, .btn-primary, .btn-accent { background: var(--cta) !important; color: #fff !important; box-shadow: none; }
.btn--primary:hover, .btn-primary:hover, .btn-accent:hover { background: var(--cta-hover) !important; color: #fff !important; }
.buy-box:empty { display: none; }

/* inline SVG icons (replace emoji-as-icons) — align to text, never shrink */
.ic { vertical-align: -.15em; flex: none; }
.meta-badge .ic { vertical-align: -.12em; }
.pm-ic { display: inline-flex; align-items: center; justify-content: center; }
.ck-card__h { display: flex; align-items: center; gap: 8px; }
.signal .ic, .btn .ic { vertical-align: -.12em; }

/* order confirmation success banner + next steps */
.order-success { background: linear-gradient(135deg, var(--accent-tint), rgba(57, 114, 192, .04));
  border: 1px solid rgba(57, 114, 192, .22); border-radius: var(--radius-lg, 16px);
  padding: 22px 22px 20px; margin-block-end: 16px; text-align: center; }
.order-success__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--accent);
  color: #fff; display: grid; place-items: center; margin: 0 auto 12px;
  box-shadow: 0 6px 18px rgba(57, 114, 192, .32); }
.order-success__h { margin: 0 0 4px; font-size: 22px; }
.order-success__sub { margin: 0; color: var(--text-muted); }
.next-steps { list-style: none; margin: 16px auto 0; padding: 0; max-inline-size: 420px; text-align: start; }
.next-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-block-start: 1px solid rgba(57, 114, 192, .12); font-size: 14.5px; line-height: 1.5; }
.next-steps li:first-child { border-block-start: 0; }
.next-steps .ns-n { flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
  display: grid; place-items: center; margin-block-start: 1px; }

/* PDP size guide */
.picker__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.size-guide-toggle { background: none; border: 0; cursor: pointer; font-size: 13px; padding: 0; display: inline-flex; align-items: center; gap: 5px; }
.size-guide { margin-block-start: 12px; }
.size-guide > summary { font-size: 13.5px; cursor: pointer; width: max-content; }
.size-table { width: 100%; border-collapse: collapse; margin-block-start: 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.size-table th, .size-table td { padding: 7px 8px; text-align: center; border-block-end: 1px solid var(--border); }
.size-table th { font-weight: 700; color: var(--text-muted); background: var(--surface); }
.size-table tbody tr:hover { background: var(--accent-tint); }
.size-note { margin-block-start: 10px; font-size: 12.5px; line-height: 1.55; }

/* ---- per-item fit guide (PDP, beside the size picker) ---- */
.fit-guide { display: flex; align-items: flex-start; gap: 10px; margin-block-start: 12px;
  padding: 11px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13.5px; line-height: 1.5; }
.fit-guide--warn { border-color: var(--accent); background:
  linear-gradient(135deg, var(--accent-tint), transparent 75%), var(--surface); }
.fit-guide__icon { flex: none; font-size: 16px; line-height: 1.3; }
.fit-guide__txt b { display: block; }
.fit-guide__model { display: block; font-size: 12.5px; margin-block-start: 2px; }
/* buyer fit-vote distribution (reviews section) */
.fit-hist { margin-block-start: 14px; max-inline-size: 420px; }
.fit-hist__title { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; }
.fit-hist__label { flex: none; inline-size: 110px; font-size: 12.5px; color: var(--text-muted); }
/* per-review fit tag */
.review-fit { font-size: 12px; color: var(--text-muted); background: var(--bg-alt);
  border-radius: 99px; padding: 2px 9px; white-space: nowrap; }

/* checkout delivery-guarantee trust strip */
.ck-trust { list-style: none; margin: 14px 0 0; padding: 12px 14px 4px; border-block-start: 1px solid var(--border); }
.ck-trust li { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; color: var(--text); }
.ck-trust .ic { color: var(--accent); }

/* ============================================================
   PREMIUM POLISH PASS — editorial fashion feel (2026-06-29)
   ============================================================ */
/* slow, elegant image zoom on product-card hover (desktop) */
.card__media img, .media-photo img { transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .2s ease; }
@media (hover: hover) { .card:hover .card__media img, .card:hover .media-photo img { transform: scale(1.05); } }
/* refined card typography */
.card__title { font-weight: 600; }
.card__eyebrow { letter-spacing: .14em; font-size: 11px; }
/* editorial section headings: a thin accent rule under centered heads */
.section__head h2 { position: relative; display: inline-block; }
.section__head h2::after { content: ""; display: block; width: 44px; height: 2px; background: var(--accent);
  margin: 14px auto 0; border-radius: 2px; }
/* more generous whitespace between sections (editorial breathing room) */
.section { padding-block: 64px; }
@media (max-width: 740px) { .section { padding-block: 44px; } }
/* refined primary button: subtle lift + letter-spacing */
.btn--primary { letter-spacing: .01em; }
.btn--primary:hover { transform: translateY(-1px); }

/* ---- brand logo image (replaces the S monogram) ---- */
.brand-logo { height: 42px; width: auto; display: block; }
@media (max-width: 560px) { .brand-logo { height: 36px; } }
.footer__logo-img { width: 160px; max-inline-size: 64%; height: auto; display: block; }


/* ============================================================
   ✦ ENGAGEMENT / RETENTION LAYER (2026-06-29)
   Honest scarcity · free-ship goal bar · toast · recently-viewed ·
   live delivery ticker · wishlist burst · welcome reward · fly-to-cart.
   Logical props (RTL-safe), token-driven (dark parity), reduced-motion guarded.
   ============================================================ */

/* ---------- toast stack ---------- */
#toast-stack {
  position: fixed; inset-block-end: calc(16px + env(safe-area-inset-bottom));
  inset-inline-start: 16px; z-index: 12000; display: flex; flex-direction: column;
  gap: 10px; pointer-events: none; max-inline-size: min(360px, 86vw);
}
.toast {
  display: flex; align-items: center; gap: 10px; pointer-events: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-hover);
  font-size: 14px; font-weight: 600; line-height: 1.4;
  animation: toast-in .26s var(--ease-spring) both;
}
.toast.is-out { animation: toast-out .22s var(--ease-out) forwards; }
.toast--success { border-inline-start-color: var(--success); }
.toast__ic { flex: none; inline-size: 20px; block-size: 20px; color: var(--accent); }
.toast--success .toast__ic { color: var(--success); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (max-width: 600px) { #toast-stack { inset-block-end: calc(72px + env(safe-area-inset-bottom)); } }

/* ---------- free-delivery goal bar (cart drawer) ---------- */
.goal { padding: 12px 4px 14px; }
.goal__msg { font-size: 12.5px; font-weight: 700; margin: 0 0 8px; color: var(--text);
  display: flex; align-items: center; gap: 6px; }
.goal__msg b { color: var(--accent); }
.goal__bar { block-size: 8px; border-radius: var(--pill); background: var(--bg-alt); overflow: hidden; }
.goal__fill { block-size: 100%; inline-size: 0%; border-radius: var(--pill);
  background: linear-gradient(90deg, var(--accent), var(--sale));
  transition: inline-size .55s var(--ease-out); }
[dir=rtl] .goal__fill { background: linear-gradient(270deg, var(--accent), var(--sale)); }
.goal.is-unlocked .goal__fill { background: linear-gradient(90deg, var(--success), #34d399); position: relative; }
.goal.is-unlocked .goal__msg { color: var(--success); }
.goal.is-unlocked .goal__msg b { color: var(--success); }
.goal.is-unlocked .goal__fill::after {
  content: ""; position: absolute; inset: 0; background: var(--grad-cta-sheen);
  background-size: 220% 100%; animation: lampa-sheen .9s var(--ease-out); }

/* ---------- honest scarcity chips ---------- */
.stockchip.low { color: var(--sale); font-weight: 800; background: var(--sale-bg); }
html[data-theme="dark"] .card__media .stockchip.low { background: rgba(68, 129, 214, .18); color: #a8c8f6; }
/* PDP size-level scarcity line */
.scarce { display: inline-flex; align-items: center; gap: 7px; margin-block-start: 12px;
  padding: 7px 13px; border-radius: var(--pill); background: var(--sale-bg); color: var(--sale);
  font-size: 13.5px; font-weight: 800; }
.scarce__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--sale);
  animation: lampa-pulse 1.6s var(--ease-out) infinite; }
@media (prefers-reduced-motion: reduce) { .scarce__dot { animation: none; } }

/* ---------- live delivery ticker: "live" badge ---------- */
.ticker { position: relative; }
.ticker__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  font-weight: 800; letter-spacing: .04em; color: var(--accent); text-transform: uppercase;
  padding-inline-end: 14px; margin-inline-end: 6px; }
.ticker__live::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(57, 114, 192, .5); } 100% { box-shadow: 0 0 0 8px rgba(57, 114, 192, 0); } }
@media (prefers-reduced-motion: reduce) { .ticker__live::before { animation: none; } }
.ticker__item b { color: var(--text); font-weight: 700; }

/* ---------- recently-viewed strip ---------- */
.rstrip { max-inline-size: var(--container-grid); margin: 8px auto 0; padding: 22px 12px 40px; }
.rstrip__head { display: flex; align-items: baseline; gap: 10px; padding-inline: 4px; margin-block-end: 14px; }
.rstrip__head h2 { font-size: 22px; font-weight: 700; margin: 0; }
.rstrip__head .muted { font-size: 13px; }
.rstrip__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-block-end: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rstrip__track::-webkit-scrollbar { display: none; }
.rcard { flex: 0 0 auto; inline-size: 150px; scroll-snap-align: start; color: inherit; }
.rcard__img { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt);
  box-shadow: var(--shadow); }
.rcard__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.rcard:hover .rcard__img img { transform: scale(1.05); }
.rcard__t { font-size: 13px; font-weight: 600; margin: 8px 2px 2px; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.rcard__p { font-size: 13px; font-weight: 800; color: var(--accent); margin: 0 2px; }

/* ---------- wishlist heart burst ---------- */
.wish { overflow: visible; }
.wish-burst { position: absolute; inset: 0; pointer-events: none; }
.wish-burst i { position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--accent);
  animation: wish-burst .55s var(--ease-out) forwards; }
@keyframes wish-burst { to { opacity: 0; transform: translate(var(--bx,0), var(--by,0)) scale(.2); } }

/* ---------- fly-to-cart ---------- */
.fly-img { position: fixed; z-index: 11000; border-radius: 10px; object-fit: cover;
  pointer-events: none; box-shadow: var(--shadow-hover);
  transition: transform .72s cubic-bezier(.5,-.2,.3,1), opacity .72s ease, inline-size .72s ease, block-size .72s ease; }

/* cart count bounce when items change */
.cart-bump { animation: saba-pop .4s var(--ease-spring); }

/* ---------- welcome reward modal ---------- */
.welcome-overlay { position: fixed; inset: 0; z-index: 12500; background: rgba(12, 27, 40, .55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .3s ease; }
/* CRITICAL: the `display:grid` above beats the UA `[hidden]{display:none}` (equal
   specificity, author wins), so without this the invisible (opacity:0) overlay
   would stay laid over the whole page and swallow every tap/keystroke. Force it
   gone when hidden, and never let it capture input unless it's actually shown. */
.welcome-overlay[hidden] { display: none !important; }
.welcome-overlay:not(.show) { pointer-events: none; }
.welcome-overlay.show { opacity: 1; pointer-events: auto; }
.welcome { position: relative; inline-size: min(420px, 100%); background: var(--surface);
  border-radius: var(--radius-lg); padding: 34px 28px 30px; text-align: center;
  box-shadow: 0 30px 90px -20px rgba(12, 27, 40, .55); border: 1px solid var(--border);
  transform: translateY(16px) scale(.97); transition: transform .34s var(--ease-spring); overflow: hidden; }
.welcome-overlay.show .welcome { transform: none; }
.welcome::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 5px;
  background: linear-gradient(90deg, var(--accent), var(--sale), var(--gold)); }
.welcome__close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
  inline-size: 32px; block-size: 32px; border-radius: 50%; border: 0; background: var(--bg-alt);
  color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.welcome__close:hover { background: var(--border); color: var(--text); }
.welcome__eyebrow { letter-spacing: .18em; text-transform: uppercase; font-size: 11px; font-weight: 800;
  color: var(--accent); margin: 0 0 8px; }
.welcome__gift { font-size: 44px; line-height: 1; margin-block-end: 12px; }
.welcome h2 { font-family: var(--font-display); font-size: 27px; line-height: 1.18; margin: 0 0 10px; }
.welcome p { color: var(--text-muted); font-size: 14.5px; margin: 0 auto 18px; max-inline-size: 30ch; }
.welcome__form { display: flex; flex-direction: column; gap: 10px; }
.welcome__form .input { text-align: center; }
.welcome__dismiss { background: none; border: 0; color: var(--text-muted-2); font-size: 13px;
  cursor: pointer; margin-block-start: 12px; }
.welcome__dismiss:hover { color: var(--text-muted); text-decoration: underline; }
.welcome__err { color: var(--danger); font-size: 13px; font-weight: 600; min-height: 1px; margin: 2px 0 0; }
/* success state */
.welcome__code { display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 6px auto 14px; padding: 12px 18px; border: 2px dashed var(--accent); border-radius: var(--radius);
  background: var(--accent-tint); }
.welcome__code code { font-family: var(--font-mono); font-size: 22px; font-weight: 800; letter-spacing: .08em;
  color: var(--accent); }
.welcome__copy { border: 0; background: var(--accent); color: #fff; border-radius: var(--pill);
  padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.welcome__copy:hover { background: var(--accent-hover); }
.welcome__count { font-weight: 800; color: var(--sale); font-variant-numeric: tabular-nums; }
.welcome__count-wrap { font-size: 13px; color: var(--text-muted); margin-block-end: 16px; }

/* ---------- complete the look (PDP cross-sell) ---------- */
.look { max-inline-size: var(--container); margin: 8px auto 0; padding: 8px 22px 4px; }
.look__head { display: flex; align-items: baseline; gap: 10px; margin-block-end: 16px; flex-wrap: wrap; }
.look__head h3 { font-family: var(--font-display); margin: 0; font-size: 24px; }
.look__head .muted { font-size: 14px; }
.look__rail { display: flex; gap: 14px; overflow-x: auto; padding-block-end: 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.look__rail::-webkit-scrollbar { display: none; }
.look-card { flex: 0 0 auto; inline-size: 162px; display: flex; flex-direction: column; }
.look-card__media { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-alt); box-shadow: var(--shadow); display: block; }
.look-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform .4s var(--ease-out); }
.look-card:hover .look-card__media img { transform: scale(1.05); }
.look-card__t { font-size: 13px; font-weight: 600; margin: 9px 2px 2px; color: var(--text);
  line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.look-card__p { font-size: 13.5px; font-weight: 800; color: var(--accent); margin: 0 2px 9px; }
.look-card__add { margin-block-start: auto; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: var(--pill); padding: 8px 0; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background-color var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease; }
.look-card__add:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.look-card__add:active { transform: scale(.97); }
.look__all { margin-block-start: 18px; }
@media (max-width: 600px) { .look-card { inline-size: 142px; } .look__head h3 { font-size: 21px; } }

/* ============================================================
   ✦ SHEIN-STYLE BROWSE LAYER (2026-06-29) — honest density
   category tab strip · grid colour dots · best-seller badges ·
   in-grid quick-add bottom sheet. RTL-safe, reduced-motion ok.
   ============================================================ */

/* ---------- sticky category tab strip ---------- */
.cat-strip { position: sticky; inset-block-start: 56px; z-index: 8500;
  background: var(--nav-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-block-end: .5px solid var(--border); }
.cat-strip__track { display: flex; gap: 4px; overflow-x: auto; padding: 4px 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; max-inline-size: var(--container-grid); margin-inline: auto; }
.cat-strip__track::-webkit-scrollbar { display: none; }
/* Trailing-edge fade — a visual cue that there's more to swipe. Only applied
   once JS confirms the strip actually overflows (.has-overflow), so a short
   list that already fits never gets a phantom fade over its last, fully-visible
   item. Mirrors the fade already used for .cfacets/.size-chips on the shop page. */
.cat-strip__track.has-overflow, .rstrip__track.has-overflow, .look__rail.has-overflow {
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}
html[dir="rtl"] .cat-strip__track.has-overflow, html[dir="rtl"] .rstrip__track.has-overflow,
html[dir="rtl"] .look__rail.has-overflow {
  -webkit-mask-image: linear-gradient(to left, #000 92%, transparent 100%);
          mask-image: linear-gradient(to left, #000 92%, transparent 100%);
}
.cat-strip__tab { flex: 0 0 auto; padding: 9px 12px 8px; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); white-space: nowrap; position: relative; transition: color .2s ease; }
.cat-strip__tab:hover { color: var(--text); }
.cat-strip__tab.on { color: var(--accent); font-weight: 800; }
.cat-strip__tab.on::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: 10px;
  block-size: 2.5px; background: var(--accent); border-radius: 3px; }
@media (max-width: 560px) { .cat-strip { inset-block-start: 56px; } .cat-strip__tab { font-size: 13px; padding-inline: 10px; } }

/* ---------- grid card: colour dots + meta badges ---------- */
.card__dots { display: flex; align-items: center; gap: 5px; margin-block-start: 7px; }
.card__dot { inline-size: 15px; block-size: 15px; border-radius: 50%; flex: none; cursor: pointer;
  background: var(--dot, #ccc); box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 1px var(--border);
  transition: transform .15s ease; padding: 0; border: 0; }
.card__dot:hover, .card__dot.on { transform: scale(1.22); box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 1.5px var(--accent); }
.card__dot-more { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-start: 6px; min-block-size: 18px; }
.hot-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800;
  color: var(--sale); background: var(--sale-bg); padding: 2px 7px; border-radius: var(--pill); }
.hot-tag--soft { color: var(--text-muted); background: var(--bg-alt); }
/* make the in-grid add button read as a primary quick-add */
.card__add { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -2px rgba(57, 114, 192, .5); }
.card__add:hover { background: var(--accent-hover); color: #fff; }
.card__add:active { transform: scale(.9); }

/* ---------- quick-add bottom sheet ---------- */
.qa-overlay { position: fixed; inset: 0; z-index: 12200; background: rgba(12, 27, 40, .5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .25s ease; }
.qa-overlay[hidden] { display: none !important; }
.qa-overlay:not(.show) { pointer-events: none; }
.qa-overlay.show { opacity: 1; pointer-events: auto; }
.qa-sheet { inline-size: min(560px, 100%); background: var(--surface);
  border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg);
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(12, 27, 40, .3);
  transform: translateY(100%); transition: transform .32s var(--ease-out); max-block-size: 88vh; overflow-y: auto; }
.qa-overlay.show .qa-sheet { transform: none; }
.qa__close { position: absolute; inset-block-start: 12px; inset-inline-end: 14px; inline-size: 34px; block-size: 34px;
  border: 0; border-radius: 50%; background: var(--bg-alt); color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.qa__head { display: flex; gap: 12px; align-items: center; color: inherit; margin-block-end: 16px; }
.qa__img { inline-size: 72px; block-size: 92px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-alt); flex: none; }
.qa__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.qa__head-t { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.qa__title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.qa__price { font-weight: 800; color: var(--accent); font-size: 17px; }
.qa__group { margin-block-end: 16px; }
.qa__label { font-size: 13px; font-weight: 700; margin-block-end: 9px; color: var(--text); }
.qa__label b { color: var(--text-muted); font-weight: 600; }
.qa__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.qa__swatch { inline-size: 34px; block-size: 34px; border-radius: 50%; cursor: pointer; padding: 0; border: 0;
  background: var(--sw, #ccc) center/cover; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--border); }
.qa__swatch.on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--accent); }
.qa__swatch.is-out { opacity: .45; cursor: not-allowed; position: relative; }
.qa__swatch.is-out::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(to bottom right, transparent 46%, var(--danger) 49%, var(--danger) 51%, transparent 54%);
}
.qa__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.qa__size { min-inline-size: 46px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; }
.qa__size.on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.qa__size[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.qa__size.is-elsewhere:not(.on) { border-style: dashed; opacity: .7; }
.qa__err { color: var(--danger); font-size: 13px; font-weight: 600; margin: 0 0 12px; }

/* ============================================================
   ✦ SHEIN-EXACT PRODUCT GRID (2026-06-29) — final authoritative
   layer (wins the cascade over the older padded/bordered card).
   Edge-to-edge 2-up, portrait image fills the tile, no card
   chrome, tight START-aligned text. Rose brand, RTL, dark parity.
   ============================================================ */
.grid {
  grid-template-columns: repeat(2, 1fr); gap: 4px; padding-inline: 4px;
  max-inline-size: var(--container-grid); margin-inline: auto; justify-content: stretch;
}
@media (min-width: 600px)  { .grid { grid-template-columns: repeat(3, 1fr); gap: 8px;  padding-inline: 8px;  } }
@media (min-width: 900px)  { .grid { grid-template-columns: repeat(4, 1fr); gap: 12px; padding-inline: 12px; } }
@media (min-width: 1240px) { .grid { grid-template-columns: repeat(5, 1fr); } }

/* card: no chrome — the image IS the card */
.card, html[data-theme="dark"] .card {
  background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0;
  text-align: start; align-items: stretch; gap: 0;
}
.card:hover, .card.reveal:hover { transform: none; box-shadow: none; }

.card__media {
  position: relative; aspect-ratio: 4/5; inline-size: 100%; display: block;
  border-radius: 5px; overflow: hidden; margin-block-end: 5px; background: var(--bg-alt); box-shadow: none;
}
.card__media-link { display: block; inline-size: 100%; block-size: 100%; }
.card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.media-photo, .media-photo img { position: absolute; inset: 0; }
.media-photo img { object-fit: cover; }       /* SHEIN: fill+crop, no letterbox */
.media-photo::before { display: none; }        /* drop the blurred backdrop */
.card:hover .card__media img, .card:hover .card__media .media-photo img, .card:hover .card__media .tile-art { transform: scale(1.04); }

/* tight, start-aligned text block (SHEIN order: price → title → colours → meta) */
.card__body { inline-size: 100%; padding: 0 3px; text-align: start; align-items: stretch; gap: 0; display: block; }
.card__price { display: flex; align-items: baseline; gap: 6px; justify-content: flex-start;
  font-size: 15px; font-weight: 800; color: var(--text); margin: 0; }
.card__price .price--sale { color: var(--sale); }
.card__price .compare-at { font-size: 11px; font-weight: 500; color: var(--text-muted-2); text-decoration: line-through; }
.card__title { font-size: 12.5px; font-weight: 500; color: var(--text-muted); line-height: 1.35; margin: 3px 0 0; text-align: start;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.card__title a { color: inherit; font-weight: 500; }
.card__dots { margin: 5px 0 0; justify-content: flex-start; }
.card__dot { inline-size: 13px; block-size: 13px; }
.card__meta { margin: 4px 0 2px; justify-content: flex-start; min-block-size: 0; }
.hot-tag { font-size: 10px; padding: 1px 6px; }

/* overlays now sit on the IMAGE (wish top-end, quick-add bottom-end) */
.card__media .wish { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; inset-block-end: auto; inset-inline-start: auto;
  inline-size: 30px; block-size: 30px; }
.card__media .card__add { position: absolute; inset-block-end: 7px; inset-inline-end: 7px; inset-block-start: auto; inset-inline-start: auto;
  inline-size: 30px; block-size: 30px; }
.card__media .off-badge--corner { font-size: 10px; padding: 2px 6px; }
.card__media .stockchip { inset-block-end: 7px; inset-inline-start: 7px; inset-inline-end: auto; font-size: 10px; padding: 3px 8px; }
@media (max-width: 600px) { .card__title { font-size: 12px; } .card__price { font-size: 14px; } }

/* ============================================================
   ✦ MAGNIFICENT POLISH (2026-06-29) — flagship craft floor.
   Mobile crispness · sticky-seam fix · add-to-bag moment ·
   contrast · de-emoji. Final layer; reduced-motion guarded.
   ============================================================ */
:root { --nav-h: 56px; --text-muted-2: #8a7681; }   /* lift the lightest text to legible contrast */

/* app-like taps: no grey flash, no double-tap zoom, real press feedback */
* { -webkit-tap-highlight-color: transparent; }
a, button, .tag, .chip, .swatch, .size-pill, .card__dot, .cat-strip__tab, .qa__swatch, .qa__size,
.botnav a, .botnav button, .card__add, .wish, [data-quickadd], .cfacet, .size-chip { touch-action: manipulation; }
.qa__size:active, .qa__swatch:active, .card__dot:active, .swatch:active, .size-pill:active,
.size-chip:active, .cfacet:active { transform: scale(.93); }
.botnav a:active, .botnav button:active { transform: scale(.94); opacity: .72; }

/* sticky-seam fix: category strip pins flush under the 56px nav */
.cat-strip, html[dir="rtl"] .cat-strip { inset-block-start: var(--nav-h); }
html { scroll-padding-block-start: calc(var(--nav-h) + 10px); }

/* add-to-bag MOMENT: scrim fades+blurs in lockstep, premium drawer easing, rows rise in */
.cart-overlay { background: rgba(12, 27, 40, .44); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s var(--ease-out); }
.cart-overlay.show { opacity: 1; }
.cart-drawer { transition: transform .34s var(--ease-out); }
.cart-drawer.open .cart-row { animation: cart-row-in .32s var(--ease-out) both; }
@keyframes cart-row-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* best-seller badge without an OS emoji — a clean pulsing rose dot */
.hot-tag.hot-tag--bs::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%;
  background: var(--sale); display: inline-block; margin-inline-end: 5px; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .qa__size:active, .qa__swatch:active, .card__dot:active, .swatch:active, .size-pill:active,
  .size-chip:active, .cfacet:active, .botnav a:active, .botnav button:active { transform: none; }
  .cart-drawer.open .cart-row { animation: none; }
}

/* ============================================================
   ✦ MAGNIFICENT POLISH — PHASE 2 (2026-06-29)
   Rose skeleton shimmer · sticky PDP buy bar.
   ============================================================ */
/* rose skeleton shimmer behind product images while they stream in */
.card__media::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 28%, rgba(57, 114, 192, .09) 50%, transparent 72%);
  background-size: 220% 100%; animation: skel 1.25s ease-in-out infinite; }
.card__media.is-loaded::before { display: none; }
.card__media-link, .card__media .media-photo, .card__media .tile-art { position: relative; z-index: 1; }
@keyframes skel { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* sticky mobile add-to-bag bar (PDP) — appears once the main button scrolls away */
.pdp-stickybuy { position: fixed; inset-inline: 0; inset-block-end: calc(62px + env(safe-area-inset-bottom));
  z-index: 70; display: none; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--nav-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-block-start: .5px solid var(--border); box-shadow: 0 -6px 22px rgba(12, 27, 40, .12);
  transform: translateY(130%); transition: transform .32s var(--ease-out); }
.pdp-stickybuy.show { transform: none; }
.pdp-stickybuy__img { inline-size: 40px; block-size: 50px; border-radius: 7px; object-fit: cover; flex: none; }
.pdp-stickybuy__price { font-weight: 800; color: var(--accent); font-size: 17px; white-space: nowrap; }
.pdp-stickybuy .btn { flex: 1; min-height: 46px; }
@media (max-width: 860px) { .pdp-stickybuy { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  .card__media::before { animation: none; }
}

/* ============================================================
   ✦ PDP IMAGE LIGHTBOX (2026-06-30) — flagship full-screen zoom.
   ============================================================ */
#pdp-photo { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(8, 15, 20, .93); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .26s var(--ease-out); }
/* CRITICAL: the base rule sets display:flex, which OVERRIDES the [hidden]
   attribute's display:none — without this the closed lightbox stays in the
   layout as an invisible, full-screen, click-eating overlay (z-index 95) that
   swallows every tap on the size/colour pickers. Force it truly gone when hidden. */
.lightbox[hidden] { display: none !important; }
.lightbox.show { opacity: 1; }
.lightbox__stage { max-inline-size: 96vw; max-block-size: 92vh; overflow: auto; -webkit-overflow-scrolling: touch;
  touch-action: pinch-zoom; border-radius: 10px; }
.lightbox__img { display: block; max-inline-size: 96vw; max-block-size: 92vh; object-fit: contain;
  -webkit-user-select: none; user-select: none; }
.lightbox__close { position: fixed; inset-block-start: max(14px, env(safe-area-inset-top)); inset-inline-end: 16px;
  inline-size: 44px; block-size: 44px; border-radius: 50%; border: none; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.16); display: grid; place-items: center; transition: background .15s; }
.lightbox__close:hover { background: rgba(255,255,255,.3); }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* ============================================================
   ✦ MAGNIFICENT LAYER — editorial homepage elevation (last layer, wins)
   Editorial section heads · imaged category tiles · refined benefits
   band · gentle reveals. Honest: real photos only.
   ============================================================ */

/* — Editorial section heads (kicker + serif title, centered) — */
.sec-head { text-align: center; margin: 0 auto 30px; padding-inline: 22px; max-inline-size: 720px; }
.sec-head__kick { display: block; font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-block-end: 9px; }
.sec-head__t { font-family: var(--font-display); font-size: clamp(27px, 4.6vw, 40px); font-weight: 600;
  line-height: 1.08; margin: 0; letter-spacing: -.01em; }
.sec-head__t::after { content: ""; display: block; inline-size: 46px; block-size: 2px; margin: 14px auto 0;
  background: linear-gradient(90deg, var(--accent), var(--gold, #c99a52)); border-radius: 2px; }

/* — Category tiles → large imaged editorial tiles with overlaid name — */
.cat-tiles { display: block !important; max-inline-size: 1120px; margin: 54px auto; padding-inline: 22px; }
.cat-tiles__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 14px; }
@media (min-width: 760px) { .cat-tiles__grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px; } }
.cat-tile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
  isolation: isolate; box-shadow: 0 3px 16px rgba(57, 114, 192, .08); color: #fff; }
.cat-tile__media { position: absolute; inset: 0; z-index: 0; background-image: var(--ci);
  background-size: cover; background-position: center 28%; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
/* Imageless categories: varied rose/plum tones + an elegant dress silhouette,
   so they read as designed editorial tiles — not missing photos. */
.cat-tile--plain { --g: linear-gradient(140deg, #bcd3ef 0%, #3972c0 100%); }
.cat-tile--plain:nth-of-type(5n+2) { --g: linear-gradient(140deg, #c2dce9 0%, #3a73a8 100%); }
.cat-tile--plain:nth-of-type(5n+3) { --g: linear-gradient(140deg, #f1cfbb 0%, #5680c0 100%); }
.cat-tile--plain:nth-of-type(5n+4) { --g: linear-gradient(140deg, #ddc6e2 0%, #4b898e 100%); }
.cat-tile--plain:nth-of-type(5n)   { --g: linear-gradient(140deg, #d1c6f3 0%, #506fb8 100%); }
.cat-tile--plain .cat-tile__media {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.78' stroke-width='1.15' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M9 3c0 1.6 1.3 2.6 3 2.6S15 4.6 15 3M9 3l-2.6 4.3c-.4.7-.2 1.5.5 1.9L9 10.4 7.4 21h9.2L15 10.4l2.1-1.2c.7-.4.9-1.2.5-1.9L15 3'/%3E%3C/svg%3E"),
    var(--g);
  background-repeat: no-repeat, no-repeat;
  background-position: center 38%, center;
  background-size: 62px auto, cover;
}
.cat-tile::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 36%, rgba(10, 18, 26, .18) 60%, rgba(10, 18, 26, .7) 100%); }
.cat-tile__t { position: absolute; z-index: 2; inset-block-end: 13px; inset-inline-start: 14px; inset-inline-end: 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.cat-tile:hover .cat-tile__media { transform: scale(1.075); }
.cat-tile:active { transform: scale(.985); }

/* — Curated collections / lookbook — */
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
  max-inline-size: 1120px; margin: 24px auto 0; padding-inline: 22px; }
.col-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  isolation: isolate; box-shadow: 0 3px 16px rgba(57, 114, 192, .08); color: #fff; }
.col-card__media { position: absolute; inset: 0; z-index: 0; background-image: var(--cc);
  background-size: cover; background-position: center 30%; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.col-card--plain .col-card__media { background-image: linear-gradient(140deg, #5680c0 0%, #4b898e 100%); }
.col-card::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 30%, rgba(10, 18, 26, .22) 58%, rgba(10, 18, 26, .74) 100%); }
.col-card__body { position: absolute; z-index: 2; inset-block-end: 14px; inset-inline: 16px; }
.col-card__t { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px;
  line-height: 1.15; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.col-card__sub { display: block; font-size: 13px; opacity: .92; margin-block-start: 3px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.col-card:hover .col-card__media { transform: scale(1.06); }
.col-card:active { transform: scale(.99); }

.col-hero { position: relative; border-radius: 18px; overflow: hidden; isolation: isolate;
  min-block-size: 220px; display: flex; align-items: flex-end; margin-block-end: 18px; color: #fff; }
.col-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--cc);
  background-size: cover; background-position: center 30%; }
.col-hero--plain::before { background-image: linear-gradient(135deg, #2c5d9c 0%, var(--accent) 55%, #9abae8 130%); }
.col-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 20%, rgba(10, 18, 26, .28) 55%, rgba(10, 18, 26, .72) 100%); }
.col-hero__inner { position: relative; z-index: 2; padding: 22px 24px; }
.col-hero__t { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 5vw, 42px);
  line-height: 1.08; margin: 6px 0 0; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.col-hero__sub { margin: 8px 0 0; font-size: 15px; opacity: .95; max-inline-size: 40rem; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.col-hero .sec-head__kick { color: #dcecff; }
@media (max-width: 560px) { .col-grid { padding-inline: 14px; grid-template-columns: 1fr 1fr; gap: 10px; }
  .col-hero__inner { padding: 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .col-card:hover .col-card__media { transform: none; } }

/* — Benefits band: refined, hairline dividers, gold-warm — */
.benefits { gap: 0; padding: 20px 12px; column-gap: 0; }
.benefit { padding-inline: clamp(14px, 3vw, 30px); position: relative; }
.benefit + .benefit::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 7px;
  inline-size: 1px; background: var(--border); }
.benefit b { font-size: 13.5px; }

/* — Feed rhythm — */
.home-feed { padding-block: 8px 24px; }
.home-feed .grid { margin-block-start: 4px; }
.home-reviews { padding-block-start: 14px; }

/* — Gentle on-load reveal (CSS-only, fail-safe: animation always runs) — */
@keyframes lampa-reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reveal { animation: lampa-reveal-up .75s var(--ease-out, cubic-bezier(.2,.7,.2,1)) both; }
.home-feed.reveal { animation-delay: .05s; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } .cat-tile:hover .cat-tile__media { transform: none; } }

/* ============================================================
   ✦ MAGNIFICENT LAYER — editorial CATALOG (shop / PLP) elevation
   Scoped to .shop-page. Honest empty state. RTL-safe · clamp · minmax.
   ============================================================ */
.shop-page.section { padding-block: clamp(26px, 5vw, 46px) clamp(48px, 8vw, 80px); }
.shop-page .sec-head { margin-block-end: clamp(20px, 3.4vw, 30px); }
.shop-page .shop-meta { text-align: center; margin: 0 auto clamp(22px, 3.6vw, 34px);
  font-size: 14px; color: var(--text-muted); letter-spacing: .01em; }
.shop-page .shop-meta b { color: var(--text); font-weight: 700; }
.shop-page .shop-meta__q { font-family: var(--font-display); font-style: italic; color: var(--accent); font-weight: 600; }

.shop-page .filter-panel {
  max-inline-size: var(--container-grid); margin: 0 auto clamp(22px, 3.6vw, 34px);
  padding: clamp(12px, 2vw, 16px) clamp(14px, 2.4vw, 20px);
  background: var(--surface); border: .5px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 4px 22px -14px rgba(57, 114, 192, .28); display: flex; flex-direction: column; gap: 0; }
.shop-page .filter-panel > .shop-toolbar,
.shop-page .filter-panel > .facet-row,
.shop-page .filter-panel > .shop-filters2 {
  max-inline-size: none; margin: 0; padding-block: clamp(9px, 1.6vw, 13px); padding-inline: 2px; }
.shop-page .filter-panel > * + * { border-block-start: .5px solid var(--border); }
.shop-page .filter-panel .filter-label { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; color: var(--text-muted); font-weight: 700; }
.shop-page .filter-panel .shop-toolbar { align-items: center; }
.shop-page .filter-panel .filters { gap: 8px; }

/* Declutter: colour & size facets stay on ONE tidy scrollable row inside the
   panel instead of wrapping into many rows (the main shop eyesore). */
.shop-page .facet-row { flex-wrap: nowrap; align-items: center; gap: 10px; }
.shop-page .cfacets, .shop-page .size-chips {
  flex: 1; min-inline-size: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-block-end: 3px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.shop-page .cfacets::-webkit-scrollbar, .shop-page .size-chips::-webkit-scrollbar { block-size: 5px; }
.shop-page .cfacets::-webkit-scrollbar-thumb, .shop-page .size-chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; }
.shop-page .cfacet, .shop-page .size-chip { flex: none; }

.shop-page .sort-form { gap: 9px; }
.shop-page .sort-form label { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; font-weight: 700; }
.shop-page .sort-form .select {
  padding-block: 9px; padding-inline: 13px 30px; font-size: 14px; font-weight: 600;
  border-radius: var(--pill); background-color: var(--bg-alt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c0396b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  appearance: none; -webkit-appearance: none; transition: border-color .18s ease, background-color .18s ease; }
html[dir="rtl"] .shop-page .sort-form .select { background-position: left 12px center; padding-inline: 30px 13px; }
.shop-page .sort-form .select:hover { background-color: var(--accent-tint); }

.shop-page .active-filters { max-inline-size: var(--container-grid); margin: 0 auto clamp(18px, 3vw, 28px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shop-page .active-filters__lead { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-inline-end: 2px; }
.shop-page .fchip { display: inline-flex; align-items: center; gap: 7px; padding-block: 6px; padding-inline: 13px 9px;
  border-radius: var(--pill); background: var(--accent-tint); border: .5px solid transparent; color: var(--accent);
  font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; transition: background-color .18s ease, transform .12s ease; }
.shop-page .fchip:hover { background: rgba(57, 114, 192, .15); }
.shop-page .fchip:active { transform: scale(.95); }
.shop-page .fchip__x { display: inline-grid; place-items: center; inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--accent); color: #fff; }
.shop-page .fchip__sw { inline-size: 13px; block-size: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); flex: none; }
.shop-page .fchip--clear { background: none; color: var(--text-muted); border-color: var(--border); padding-inline: 13px; }
.shop-page .fchip--clear:hover { background: var(--bg-alt); color: var(--text); border-color: var(--text-muted); }

.shop-page .grid { margin-block-start: 4px; }
.shop-page.reveal, .shop-page .grid.reveal { animation: lampa-reveal-up .7s var(--ease-out, cubic-bezier(.2,.7,.2,1)) both; }
.shop-page .grid.reveal { animation-delay: .05s; }

.shop-page .shop-empty { max-inline-size: 560px; margin: clamp(20px, 5vw, 48px) auto; padding: clamp(30px, 6vw, 52px) 26px; text-align: center;
  background: linear-gradient(150deg, var(--accent-tint), rgba(201,154,82,.10)); border: .5px solid var(--gold-soft); border-radius: var(--radius-lg); }
.shop-page .shop-empty__icon { inline-size: 56px; block-size: 56px; margin: 0 auto 16px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface); color: var(--accent); box-shadow: 0 6px 18px -8px rgba(57, 114, 192, .4); }
.shop-page .shop-empty__t { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 3.4vw, 26px); margin: 0 0 8px; line-height: 1.2; }
.shop-page .shop-empty__sub { color: var(--text-muted); font-size: 15px; margin: 0 auto 20px; max-inline-size: 38ch; }
.shop-page .shop-empty .btn { margin: 0 auto; }

@media (max-width: 740px) {
  .shop-page .filter-panel .shop-toolbar { flex-direction: column; align-items: stretch; }
  .shop-page .filter-panel .shop-toolbar .filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-block-end: 2px; }
  .shop-page .filter-panel .shop-toolbar .filters .tag { flex: none; }
  .shop-page .sort-form { justify-content: space-between; }
  .shop-page .sort-form .select { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-page.reveal, .shop-page .grid.reveal { animation: none; }
  .shop-page .fchip:active { transform: none; }
}

/* ============================================================
   ✦ MAGNIFICENT LAYER — PDP (product detail) elevation
   Luxury fashion PDP. VISUAL ONLY — no JS hooks touched.
   ============================================================ */
@media (min-width: 981px) { .product { gap: clamp(48px, 5.5vw, 76px); padding-block: clamp(48px, 7vw, 84px); } }
.product__media { border: 1px solid var(--border); box-shadow: 0 18px 48px -24px rgba(57, 114, 192, .28); }
.product__media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.thumbs { gap: 9px; }
.thumb { inline-size: 60px; block-size: 76px; border-width: 1.5px; border-radius: 12px; transition: border-color .18s var(--ease-out), transform .18s var(--ease-out); }
.thumb:hover { transform: translateY(-2px); }
.thumb.on { border-color: var(--accent); box-shadow: 0 4px 14px -6px rgba(57, 114, 192, .5); }

.product__info > h1 { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 38px) !important; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--text); margin-block: 8px 12px; }
.product__info > .card__eyebrow { letter-spacing: .14em; color: var(--accent); }

.product__info .price { gap: 12px 14px; flex-wrap: wrap; margin: 8px 0 16px; }
.product__info .price #pdp-price { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; color: var(--accent); line-height: 1; letter-spacing: -.01em; }
.product__info .price .compare-at { font-size: .56em; }
.product__info .price .off-badge { align-self: center; }
.product__info .price .tag { margin-inline-start: auto; align-self: center; }

.signal-row { gap: 8px 10px; margin: 6px 0 16px; }
.signal { padding-block: 7px; }
.product__info .desc { line-height: 1.7; margin-block: 18px; }

.picker { margin: 20px 0 6px; }
.picker__label { text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; }
.picker__chosen { font-weight: 600; color: var(--text); }
.size-guide-toggle { color: var(--accent); letter-spacing: .02em; }
.swatch { inline-size: 42px; block-size: 42px; }
.swatch.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.size-pill { border-radius: 12px; transition: border-color .15s var(--ease-out), background-color .15s var(--ease-out), color .15s var(--ease-out); }
.size-pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.size-pill:hover:not(:disabled):not(.on) { border-color: var(--accent); color: var(--accent); }

#add-to-bag.btn--primary, .pdp-actions .btn--primary { box-shadow: 0 12px 30px -12px rgba(57, 114, 192, .55); }
.wish-btn { border-radius: var(--pill); }
.guarantee { box-shadow: 0 6px 22px -14px rgba(57, 114, 192, .3); }

.sec-head--start { text-align: start; margin-inline: 0; padding-inline: 0; max-inline-size: none; margin-block-end: 22px; }
.sec-head--start .sec-head__t::after { margin-inline: 0; }

.look { margin-block-start: 44px; padding-block-start: 28px; border-block-start: 1px solid var(--border); }
.look-card__media { box-shadow: 0 10px 26px -16px rgba(57, 114, 192, .3); }
.look-card__add:hover { box-shadow: 0 8px 20px -10px rgba(57, 114, 192, .5); }

.reviews { padding-block: clamp(40px, 6vw, 56px); }
.rating-hist { gap: 7px; }
.hist-bar > span { background: linear-gradient(90deg, var(--gold, #c99a52), var(--accent)); }
.review { border-radius: var(--radius-lg); box-shadow: 0 4px 16px -12px rgba(57, 114, 192, .25); transition: box-shadow .2s var(--ease-out); }
.review:hover { box-shadow: 0 8px 24px -14px rgba(57, 114, 192, .35); }
.review-sort .chip.on { box-shadow: 0 4px 12px -6px rgba(57, 114, 192, .5); }

.section--alt .sec-head { margin-block-end: 36px; }
.pdp-stickybuy { border-block-start: 1px solid var(--border); box-shadow: 0 -8px 28px -16px rgba(57, 114, 192, .4); }

.look.reveal { animation-delay: .04s; }
.reviews.reveal { animation-delay: .06s; }
.section.reveal { animation-delay: .08s; }

@media (max-width: 600px) {
  .product__info > h1 { font-size: clamp(23px, 6.6vw, 30px) !important; }
  .product__info .price .tag { margin-inline-start: 0; }
  .thumb { inline-size: 52px; block-size: 66px; }
}

/* ============================================================
   ✦✦ MOBILE RESCUE LAYER (2026-06-30) — comprehensive mobile fixes
   from the full mobile audit. Append last → wins. RTL-safe logical
   props, brand vars, CSS-only (no JS/picker/cart touched).
   ============================================================ */

/* ---- GLOBAL: no page-level sideways scroll on mobile/tablet ---- */
@media (max-width: 860px) { html, body { overflow-x: clip; } }

/* ---- iOS auto-zoom guard: EVERY focusable text field >=16px on mobile ---- */
@media (max-width: 600px) {
  .nav__search--m .input--search,
  .input, .input--search, .select, textarea.input, input[type=file].input, .pay-input,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="password"], input[type="number"],
  textarea { font-size: 16px; }
}

/* ===== SHELL: header / nav / footer / bottom-nav ===== */
@media (max-width: 600px) {
  .nav { gap: 10px; padding-inline: 14px; }
  .nav__right { gap: 6px; min-inline-size: 0; }
  .nav__brand { min-inline-size: 0; }
  .brand-logo { height: 34px; }
  .nav__menu { width: 44px; height: 44px; }
  .nav__cart { padding: 10px; border-radius: 10px; }
  .theme-toggle { width: 44px; height: 44px; }
  .nav__wa { padding-inline: 11px; padding-block: 10px; min-block-size: 40px; }
}
@media (max-width: 430px) { .nav__wa { display: none; } }
@media (max-width: 360px) { .theme-toggle { display: none; } }
@media (max-width: 600px) {
  .newsletter { max-inline-size: 100%; flex-wrap: wrap; }
  .newsletter .input { flex: 1 1 160px; min-inline-size: 0; }
  .newsletter .btn { flex: 0 0 auto; }
  .footer { padding-inline: 16px; }
  .footer__bottom { gap: 6px; }
}
@media (max-width: 860px) { body { padding-block-end: calc(60px + env(safe-area-inset-bottom)); } }
@media (max-width: 380px) {
  .cookie { flex-direction: column; align-items: stretch; gap: 10px; text-align: start; }
  .cookie .btn { width: 100%; }
}

/* ===== HOME ===== */
@media (max-width: 600px) {
  .benefits { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 6px 14px 4px; max-inline-size: 520px; margin-inline: auto; }
  .benefit { inline-size: 100%; padding-inline: 4px; padding-block: 11px; gap: 12px; border-block-end: 1px solid var(--border); }
  .benefit:last-child { border-block-end: 0; }
  .benefit + .benefit::before { content: none; }
  .benefit > svg { inline-size: 22px; block-size: 22px; }
  .benefit b { font-size: 14px; }
  .benefit small { font-size: 12.5px; }
  .cat-tiles { padding-inline: 12px; margin-block: 30px; }
  .cat-tiles__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-tile__t { font-size: 16px; inset-block-end: 11px; inset-inline-start: 11px; inset-inline-end: 11px; }
  .sec-head { padding-inline: 14px; margin-block-end: 20px; }
  .sec-head__t { font-size: clamp(24px, 7vw, 32px); }
  .sec-head__t::after { margin-block-start: 11px; }
  .rstrip { padding: 18px 12px 32px; }
  .rstrip__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .rstrip__head h2 { font-size: 19px; }
  .home-reviews { padding-inline: 0; }
  .rev-grid { grid-template-columns: 1fr; gap: 10px; padding-inline: 12px; }
}
@media (max-width: 380px) {
  .cat-tiles { padding-inline: 10px; }
  .cat-tiles__grid { gap: 8px; }
}

/* ===== SHOP / catalog ===== */
@media (max-width: 600px) {
  .shop-page.section { padding-inline: 14px; }
  .shop-page .filter-panel { padding: 12px 12px; border-radius: var(--radius-lg); box-shadow: 0 3px 16px -12px rgba(57, 114, 192, .30); }
  .shop-page .filter-panel > .shop-toolbar,
  .shop-page .filter-panel > .facet-row,
  .shop-page .filter-panel > .shop-filters2 { padding-block: 10px; padding-inline: 0; }
  .shop-page .sort-form .select { font-size: 16px; padding-block: 10px; }
  .shop-page .sort-form { width: 100%; }
  .shop-page .facet-row { gap: 8px; }
  .shop-page .facet-row .filter-label { padding-block-start: 8px; }
  .shop-page .cfacets, .shop-page .size-chips { padding-inline-end: 6px;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%); mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
  html[dir="rtl"] .shop-page .cfacets, html[dir="rtl"] .shop-page .size-chips {
    -webkit-mask-image: linear-gradient(to left, #000 88%, transparent 100%); mask-image: linear-gradient(to left, #000 88%, transparent 100%); }
  .shop-page .cfacet { min-block-size: 44px; }
  .shop-page .active-filters { gap: 7px; }
  .shop-page .fchip { padding-block: 8px; }
  .shop-page .shop-empty { padding: 32px 20px; }
}
@media (max-width: 430px) {
  .shop-page.section { padding-inline: 12px; }
  .shop-page .filter-panel .filters .tag { padding: 7px 13px; }
  .shop-page .sec-head { padding-inline: 6px; }
  .shop-page .filter-panel .shop-toolbar .sort-form { gap: 6px; }
  .shop-page .filter-panel .shop-toolbar .sort-form .select { flex: 1 1 auto; min-inline-size: 0; }
}

/* ===== PDP hardening ===== */
.product { min-inline-size: 0; }
.product__info, .product__gallery { min-inline-size: 0; }
.product__info > * { min-inline-size: 0; }
.product__info .desc { overflow-wrap: anywhere; word-break: break-word; }
.size-guide .size-table { display: block; inline-size: 100%; max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
.size-guide > summary { inline-size: auto; max-inline-size: 100%; }
@media (max-width: 600px) {
  .container { padding-inline: 16px; }
  .swatch { inline-size: 44px; block-size: 44px; }
  .size-pill { min-block-size: 46px; }
  .product__info .price { row-gap: 8px; }
  .product__info .price .tag { margin-inline-start: 0; }
  .pdp-actions { gap: 10px; }
  .pdp-actions > .btn, .pdp-actions > #add-to-bag { flex: 1 1 100%; inline-size: 100%; }
  .pdp-actions .wish-btn { flex: 1 1 100%; inline-size: 100%; justify-content: center; }
}
@media (max-width: 860px) {
  body:has(.pdp-stickybuy) { padding-block-end: calc(124px + env(safe-area-inset-bottom)); }
  .pdp-stickybuy__price { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
  .pdp-stickybuy .btn { min-height: 48px; white-space: nowrap; }
  #toast-stack { inset-block-end: calc(132px + env(safe-area-inset-bottom)); }
}

/* ===== CART / CHECKOUT / ACCOUNT / ORDER / TRACK ===== */
@media (max-width: 600px) {
  .ck-row { grid-template-columns: 1fr; gap: 12px; }
  .checkout { padding-block: 16px 48px; }
  .checkout__h { font-size: 22px; }
  .ck-card { padding: 16px; }
  .ck-summary { position: static; top: auto; }
  .order-wrap { padding-block: 28px 40px; }
  .order-card { padding: 22px 18px; }
  .report-form { min-inline-size: 0; }
  .confirm-actions { width: 100%; }
  .confirm-actions > form { flex: 1 1 100%; }
  .confirm-actions > form .btn, .report-d, .report-d > summary { width: 100%; }
  .report-d > summary.btn { justify-content: center; }
  .kv { gap: 8px 12px; font-size: 14px; }
  .kv .v { min-inline-size: 0; overflow-wrap: anywhere; word-break: break-word; }
  .table { font-size: 13.5px; }
  .table th, .table td { padding: 9px 8px; }
  .table td { overflow-wrap: anywhere; word-break: break-word; }
  .acc-order { flex-direction: column; align-items: stretch; }
  .acc-order__actions { width: 100%; }
  .acc-order__actions .btn { flex: 1; }
  .auth-card { padding: 22px 18px; }
}
.cart-drawer { padding-block-end: calc(18px + env(safe-area-inset-bottom)); }
.pay-cardnum .pay-input { padding-inline-end: 78px; }

/* ---- Shop pagination (lighter pages → more load headroom) ---- */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:34px auto 8px;max-inline-size:var(--container-grid)}
.pager__btn{display:inline-flex;align-items:center;gap:5px;min-block-size:44px;padding:10px 20px;border-radius:var(--pill);
  border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:700;font-size:14px;text-decoration:none;transition:.15s}
.pager__btn:hover{border-color:var(--accent);color:var(--accent)}
.pager__btn.is-off{opacity:.38;pointer-events:none}
.pager__info{font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:13.5px}

/* ---- A11y polish (quality audit 2026-06-30): skip link, focus rings, tap targets ---- */
.skip-link{position:absolute;inset-inline-start:8px;inset-block-start:-56px;z-index:3000;
  background:var(--accent);color:#fff;padding:11px 18px;border-radius:0 0 12px 12px;
  font-weight:800;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:inset-block-start .16s ease}
.skip-link:focus{inset-block-start:0;outline:3px solid #fff;outline-offset:-1px}
.tag:focus-visible,.cfacet:focus-visible,.size-chip:focus-visible,.chip:focus-visible,
.cat-strip__tab:focus-visible,.thumb:focus-visible,.pager__btn:focus-visible,
.cart-close:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
/* accessible minimum tap target for colour facets */
.cfacet{min-block-size:44px}
.cfacet__dot{inline-size:22px;block-size:22px}

/* ============================================================
   ✦ BOLD PASS v53 — image-forward, SHEIN-grade storefront
   Styling only (markup unchanged). Appended last so it wins.
   ============================================================ */

/* —— product grid: denser, image-led —— */
.grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 26px 14px;
  justify-content: initial; }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
@media (max-width: 600px)  { .grid { grid-template-columns: 1fr 1fr; gap: 20px 10px; padding-inline: 10px; } }

/* —— product card: borderless, photo does the talking —— */
.grid .card, .card.reveal {
  border: 0; box-shadow: none; padding: 0; background: transparent;
  border-radius: 16px; gap: 0; overflow: visible;
}
.grid .card:hover, .card.reveal:hover { transform: none; box-shadow: none; border: 0; }
.grid .card .card__media {
  aspect-ratio: 4 / 5; border-radius: 16px; margin-block-end: 10px;
  box-shadow: none; background: var(--bg-alt);
  transition: box-shadow .25s ease;
}
.grid .card:hover .card__media { box-shadow: 0 14px 30px -14px rgba(57, 114, 192, .38); }
.grid .card .card__media img, .grid .card .media-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
}
.grid .card:hover .card__media img { transform: scale(1.055); }

/* body: left-aligned, tight rhythm */
.grid .card .card__body { text-align: start; align-items: stretch; padding: 0 3px; gap: 5px; }
.grid .card .card__price { display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-size: 17px; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.grid .card .card__price .compare-at { font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  text-decoration: line-through; opacity: .8; }
.grid .card .card__title { font-size: 13px; font-weight: 500; color: var(--text-muted);
  line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.grid .card .card__title a { color: inherit; }
.grid .card:hover .card__title a { color: var(--text); }

/* —— badges: bold, confident —— */
.off-badge--corner {
  inset-block-start: 10px; inset-inline-start: 10px; inset-inline-end: auto;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 12px;
  padding: 4px 8px; border-radius: 8px; letter-spacing: .01em;
  box-shadow: 0 4px 10px -4px rgba(57, 114, 192, .6);
  direction: ltr; /* render "-23%" cleanly, not "23%-" */
}
.grid .card .badge { inset-block-start: 10px; inset-inline-start: 10px;
  background: rgba(17,17,17,.82); backdrop-filter: blur(4px); color: #fff; font-weight: 700;
  font-size: 11px; padding: 4px 9px; border-radius: 8px; }
.grid .card .stockchip.low { inset-block-end: 10px; inset-inline-start: 10px; inset-block-start: auto;
  background: rgba(255,255,255,.92); color: var(--accent); font-weight: 800; font-size: 11px;
  padding: 4px 9px; border-radius: 8px; box-shadow: var(--shadow-xs); }

/* wish: clean white pill */
.grid .card .wish { inset-block-start: 9px; inset-inline-end: 9px; width: 34px; height: 34px;
  background: rgba(255,255,255,.94); border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 3px 10px -3px rgba(16,24,40,.28); color: var(--text); border: 0; }
.grid .card .wish:hover { color: var(--accent); transform: scale(1.08); }

/* quick-add: always-present rose action, bottom corner */
.grid .card .card__add { position: absolute; inset-block-end: 10px; inset-inline-end: 10px;
  width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, #4a85d8, var(--accent)); color: #fff;
  box-shadow: 0 8px 18px -6px rgba(57, 114, 192, .7); opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease; cursor: pointer; z-index: 3; }
.grid .card:hover .card__add, .grid .card:focus-within .card__add { opacity: 1; transform: none; }
@media (hover: none) { .grid .card .card__add { opacity: 1; transform: none; } }
.grid .card .card__add:hover { filter: brightness(1.06); }

/* colour dots on the card */
.grid .card .card__dots { gap: 5px; margin-block-start: 1px; }
.grid .card .card__dot { width: 15px; height: 15px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(16,24,40,.12) inset; }

/* —— primary buttons: bold gradient —— */
.btn--primary, .btn.btn--primary {
  background: linear-gradient(135deg, #4a85d8, var(--accent)); border: 0; font-weight: 800;
  letter-spacing: .005em; box-shadow: 0 10px 22px -10px rgba(57, 114, 192, .65);
}
.btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(57, 114, 192, .7); }

/* —— section headings: stronger presence —— */
.section__head h2, .section h2 { font-weight: 800; letter-spacing: -.02em; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; }

/* —— top promo bar: on-brand rose, not flat black —— */
.topbar, .promo-bar, .announce, .topband {
  background: linear-gradient(90deg, #1f4a7d, var(--accent) 55%, #1f4a7d);
  color: #fff; letter-spacing: .01em;
}

/* —— shop filter chips: cleaner, calmer —— */
.cfacet { border-radius: var(--pill); }
.cfacet--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cfacet--active .cfacet__name { color: #fff; }
.size-chip--active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* ============================================================
   FIX v54 — shop category filters never run off-screen
   (were 565px wide inside a 375px phone → last categories
   unreachable). Now a contained, swipeable single row.
   ============================================================ */
.shop-toolbar { min-inline-size: 0; max-inline-size: 100%; }
.shop-toolbar .filters {
  flex-wrap: nowrap; overflow-x: auto; min-inline-size: 0; max-inline-size: 100%;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-block-end: 4px; scroll-padding-inline: 14px;
}
.shop-toolbar .filters::-webkit-scrollbar { display: none; }
.shop-toolbar .filters > .tag { flex: 0 0 auto; }

/* ---- Saved address book (account page) ---- */
.addr-list { display: flex; flex-direction: column; gap: 10px; margin-block-start: 6px; }
.addr-card { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.addr-card--default { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-tint); }
.addr-card__name { font-weight: 700; font-size: 15px; }
.addr-card__line { font-size: 13.5px; margin-block-start: 3px; }
.addr-badge { display: inline-block; font-size: 11px; font-weight: 800; color: var(--accent);
  background: var(--accent-tint); padding: 1px 8px; border-radius: 99px; vertical-align: 1px; }
.addr-card__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex: none; }
.addr-card__actions .link { font-size: 13px; background: none; border: 0; cursor: pointer; padding: 0; }
.addr-form { display: flex; flex-direction: column; gap: 10px; max-inline-size: 520px; }

/* ---- Referral program card (account page) ---- */
.referral-card { margin-block-start: 20px; border: 1px solid var(--accent);
  border-radius: var(--radius-lg); padding: 20px; background:
  linear-gradient(135deg, var(--accent-tint), transparent 70%), var(--surface); }
.referral-card__title { font-size: 18px; font-weight: 800; }
.referral-card__sub { font-size: 14px; margin: 6px 0 0; color: var(--text); max-inline-size: 60ch; }
.referral-share { display: flex; gap: 8px; margin-block-start: 16px; flex-wrap: wrap; }
.referral-share__link { flex: 1 1 220px; min-inline-size: 0; font-size: 14px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt);
  color: var(--text); font-family: inherit; }
.referral-share__copy { flex: 0 0 auto; min-block-size: 44px; }
.referral-share__actions { margin-block-start: 10px; }
.referral-share__wa { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px;
  padding: 10px 18px; border-radius: var(--pill); background: #25d366; color: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none; }
.referral-share__wa:hover { filter: brightness(.96); }
.referral-stats { display: flex; gap: 10px; margin-block-start: 18px; }
.referral-stat { flex: 1; text-align: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 6px; }
.referral-stat b { display: block; font-size: 20px; line-height: 1.1; }
.referral-stat span { display: block; font-size: 12px; color: var(--text-muted); margin-block-start: 4px; }
.referral-card__fine { font-size: 12px; margin: 14px 0 0; }
@media (max-width: 520px) { .referral-stat b { font-size: 17px; } }

/* ---- loyalty tier card (account page) ---- */
.loyalty-card { margin-block-start: 12px; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); }
.loyalty-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.loyalty-badge { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 800;
  letter-spacing: .02em; color: #fff; padding: 3px 12px; border-radius: 99px; }
/* Fixed (not theme-var) backgrounds: each is ≥4.5:1 against the white badge
   text in BOTH light and dark themes (var(--accent) flips to a light pink in
   dark mode and would fail WCAG AA on 12.5px text). */
.loyalty-badge--bronze { background: #8a5a28; }
.loyalty-badge--silver { background: #62676f; }
.loyalty-badge--gold { background: #8a6a2f; }
.loyalty-badge--vip { background: #2e66b0; }
.loyalty-rate { font-size: 13.5px; font-weight: 700; }
.loyalty-bar { block-size: 8px; background: var(--bg-alt); border-radius: 999px;
  overflow: hidden; margin-block-start: 12px; }
.loyalty-bar > span { display: block; block-size: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold, #c99a52), var(--accent)); }
.loyalty-next { font-size: 12.5px; margin: 8px 0 0; }

/* ---- bundle box (اشتري الطقم ووفّري) — PDP ---- */
.bundle-box { margin: 30px 0; padding: 18px 18px 16px; border: 1.5px dashed var(--accent);
  border-radius: var(--radius-lg); background: var(--surface); }
.bundle-box__rail { display: flex; align-items: center; gap: 8px; overflow-x: auto;
  padding-block: 6px; -webkit-overflow-scrolling: touch; }
.bundle-card { flex: 0 0 auto; inline-size: 132px; }
.bundle-card__media { display: block; aspect-ratio: 4/5; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-alt); }
.bundle-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.bundle-card__t { display: block; font-size: 12.5px; font-weight: 600; margin-block-start: 6px;
  line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bundle-card__p { font-size: 12.5px; margin-block-start: 2px; }
.bundle-card--current .bundle-card__media { outline: 2px solid var(--accent); outline-offset: 1px; }
.bundle-box__plus { flex: 0 0 auto; font-size: 22px; font-weight: 800; color: var(--accent); }
.bundle-box__total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-block-start: 10px; font-size: 17px; }
.bundle-box__total b { font-size: 20px; }
.bundle-box__badge { font-size: 12.5px; font-weight: 800; color: #fff; background: #2e66b0;
  padding: 3px 12px; border-radius: 99px; }
.bundle-box__all { margin-block-start: 12px; }
.bundle-box__note { font-size: 12.5px; margin: 8px 0 0; }
@media (max-width: 520px) { .bundle-card { inline-size: 112px; } }

/* ---- background music controls + first-play hint ---- */
.music-toggle { inline-size: 100%; display: flex; align-items: center; gap: 10px;
  padding: 13px 4px; border: 0; border-block-end: .5px solid var(--border);
  background: transparent; color: var(--text); font: inherit; font-size: 17px;
  font-weight: 600; text-align: start; cursor: pointer; }
.music-toggle svg { flex: 0 0 auto; color: var(--accent); }
.nav__drawer > .music-toggle { min-block-size: 46px; padding-inline-end: 46px; }
.music-toggle__off { display: none; }
.music-toggle.is-off .music-toggle__on { display: none; }
.music-toggle.is-off .music-toggle__off { display: block; }
.music-hint { position: fixed; inset-block-start: 76px; inset-inline-end: 16px;
  z-index: 9550; max-inline-size: min(350px, calc(100vw - 32px)); display: flex;
  align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-hover); font-size: 13px; font-weight: 700; line-height: 1.55;
  opacity: 0; transform: translateY(-9px) scale(.9); transform-origin: top right;
  pointer-events: none; transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1); }
.music-hint[hidden] { display: none; }
.music-hint.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.music-hint__icon { inline-size: 34px; block-size: 34px; flex: 0 0 34px; display: grid;
  place-items: center; border-radius: 50%; color: #fff; background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .music-hint { transition: opacity .01ms linear; transform: none; }
}

/* Product cards: 25% smaller while preserving the existing column counts and
   4:5 media ratio at every breakpoint. */
.grid { inline-size: calc(82.5% + 39px); max-inline-size: min(1095px, calc(100% - 8px));
  column-gap: 16px; row-gap: 24px; padding-inline: 0; }
@media (min-width: 600px)  { .grid { inline-size: calc(82.5% + 122px); max-inline-size: min(1178px, calc(100% - 16px));
  column-gap: 48px; row-gap: 26px; padding-inline: 0; } }
@media (min-width: 900px)  { .grid { inline-size: calc(82.5% + 185px); max-inline-size: min(1241px, calc(100% - 24px));
  column-gap: 54px; row-gap: 28px; padding-inline: 0; } }
@media (min-width: 1240px) { .grid { inline-size: calc(82.5% + 266px); max-inline-size: min(1322px, calc(100% - 24px));
  column-gap: 60px; row-gap: 30px; } }

/* Product-card frame sampled from the supplied reference (#19222b). The
   shared .card macro is used by home, shop, category and related-product grids. */
.card, html[data-theme="dark"] .card {
  border: 2px solid transparent;
  background:
    linear-gradient(#19222b, #19222b) padding-box,
    linear-gradient(145deg,
      rgba(255, 255, 255, .28) 0%,
      rgba(255, 255, 255, .09) 34%,
      rgba(18, 26, 39, .72) 68%,
      rgba(123, 171, 232, .16) 100%) border-box;
  border-radius: 14px; padding: 6px 6px 10px; overflow: hidden;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .025);
}
.card__media { border-radius: 10px; }

/* ---- push opt-in (order page) ---- */
.push-optin { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-block-end: 14px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); }
.push-optin__txt { flex: 1 1 220px; }
.push-optin__txt b { font-size: 14.5px; }
.push-optin__txt p { font-size: 12.5px; margin: 4px 0 0; }
/* Homepage self-rotating 16:9 advertising cards. */
.promo-rotator {
  width: min(1120px, calc(100% - 24px));
  margin: 26px auto 34px;
}
.promo-rotator__title {
  margin: 0 0 18px;
  color: var(--text);
  text-align: center;
  font-size: clamp(24px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 1.25;
}
.promo-slider {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(#19222b, #19222b) padding-box,
    linear-gradient(145deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.12) 34%,
      rgba(18,26,39,.72) 68%,
      rgba(123,171,232,.18) 100%) border-box;
  box-shadow: 0 9px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.promo-slider:active { cursor: grabbing; }
.promo-slider__track { position: absolute; inset: 2px; overflow: hidden; border-radius: 14px; }
.promo-slide {
  position: absolute;
  inset: 0;
  transform: translateX(105%);
  transition: transform .72s cubic-bezier(.22,.72,.2,1);
  will-change: transform;
}
.promo-slide.is-active { transform: translateX(0); z-index: 2; }
.promo-slide.is-leaving { transform: translateX(-105%); z-index: 1; }
.promo-slide picture,
.promo-slide img { display: block; width: 100%; height: 100%; }
.promo-slide img { object-fit: cover; }
.promo-slider__dots {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  inset-block-end: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.promo-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 999px;
  background: rgba(18,26,39,.55);
  box-shadow: 0 2px 7px rgba(0,0,0,.28);
  cursor: pointer;
  pointer-events: auto;
  transition: width .25s ease, background .25s ease, transform .25s ease;
}
.promo-slider__dot.is-active {
  width: 25px;
  background: rgba(255,255,255,.95);
  transform: scaleY(1.06);
}
@media (max-width: 560px) {
  .promo-rotator { width: calc(100% - 20px); margin-block: 18px 28px; }
  .promo-rotator__title { margin-bottom: 12px; font-size: 25px; }
  .promo-slider { border-radius: 14px; }
  .promo-slider__track { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-slide { transition-duration: 0s; }
}
/* Product availability states + separate preorder basket. */
.availability-chip {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 4;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
.availability-chip--out { background:#dc2626; }
.availability-chip--low { background:#f97316; }
.availability-chip--available { background:#16a34a; }
.availability-chip--upcoming { background:#3972c0; }
.price .availability-chip { position:static; display:inline-flex; font-size:13px; }
.pdp-price-soon { font-weight:800; color:#8eb9f1; }
.card__price--upcoming { color:#8eb9f1; font-size:13px; font-weight:700; }
.card__add--preorder { background:#3972c0; color:#fff; }
.preorder-info { margin:0 16px 14px; padding:12px; border-radius:10px; background:rgba(57,114,192,.12); color:var(--text); font-size:13px; line-height:1.6; border:1px solid rgba(123,171,232,.22); }
.preorder-drawer .cart-row__info { padding-inline-end:6px; }
.preorder-drawer .cart-row__price { color:#8eb9f1; }
.preorder-wa { display:flex; align-items:center; justify-content:center; gap:8px; }