/* Readex Pro (SIL Open Font License), self-hosted. */
/* arabic */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/readex-pro-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/readex-pro-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/readex-pro-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Boxora storefront — sand + petrol, from the Boxora Design System. Logical properties only (RTL-first). */
:root {
  --bg: #ece6db; --surface-1: #faf8f4; --surface-2: #e4ddd0; --surface-3: #d8cfbf;
  --line: #dcd3c3; --line-strong: #a89d89;
  --ink: #1a1a1a; --ink-2: #4f4a42; --ink-3: #6b6458; --on-ink: #faf8f4;
  --accent: #0f5257; --accent-hover: #0a3d41; --accent-tint: #d4e5e2; --accent-ink: #0f5257; --on-accent: #ffffff;
  --gold: #f6b240; --on-gold: #3d2600; --logo-black: #000000;
  --sold: #a3271c; --sold-tint: #f4dcd6; --success: #1f7a4c;
  --shadow-card: 0 1px 2px rgba(26,26,26,.05), 0 14px 32px -18px rgba(60,45,20,.28);
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --pill: 999px;
  --font: "Readex Pro", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1416; --surface-1: #152022; --surface-2: #1d2b2d; --surface-3: #263638;
    --line: #2a3a3c; --line-strong: #4c6365;
    --ink: #f2eee6; --ink-2: #c3bdb1; --ink-3: #949d97; --on-ink: #0e1416;
    --accent: #5db8b3; --accent-hover: #7fcbc6; --accent-tint: #173b3c; --accent-ink: #8fd3ce; --on-accent: #052524;
    --sold: #ff8a7d; --sold-tint: #3a1f1c; --success: #5fd49a;
    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -18px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 130px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
:lang(ar) body, [dir="rtl"] body { font-size: 17px; line-height: 1.75; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
::selection { background: var(--accent-tint); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.muted { color: var(--ink-3); }
.ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
bdi { unicode-bidi: isolate; white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .arrow, [dir="rtl"] .arrow-back { transform: scaleX(-1); }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--on-ink); padding: 8px 14px; border-radius: var(--pill); }
.skip:focus { top: 8px; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hp { position: absolute; inset-inline-start: -9999px; }

/* Header: the logo's black band */
.masthead { position: sticky; top: 0; z-index: 20; }
.topbar { background: var(--logo-black); color: #f2eee6; padding-top: env(safe-area-inset-top, 0px); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.topbar__logo img { height: 36px; width: auto; }
.topbar__nav { display: flex; align-items: center; gap: 6px; }
.topbar__nav form { margin: 0; }
.topbar__visit, .topbar__lang { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--pill);
  color: #f2eee6; text-decoration: none; font: 500 14px/1 var(--font); background: transparent; border: 0; cursor: pointer; }
.topbar__visit { background: #f2eee6; color: #0b0b0c; }
.topbar__visit:hover { background: #fff; }
.topbar__lang:hover { background: rgba(255,255,255,.12); }
@media (max-width: 420px) { .topbar__visit span { display: none; } .topbar__visit { padding: 0; width: 44px; justify-content: center; } .topbar__logo img { height: 30px; } }

/* Buttons */
.btn { --h: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 0 22px;
  border-radius: var(--pill); border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; font: 500 15px/1 var(--font);
  color: var(--ink); background: transparent; transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease); }
:lang(ar) .btn { font-size: 16px; }
.btn:active { transform: scale(.97); }
.btn--sm { --h: 40px; padding: 0 16px; font-size: 14px; }
.card__foot .btn--icon { --h: 44px; }
.btn--lg { --h: 54px; padding: 0 26px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--icon { width: var(--h); padding: 0; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--outline { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-ink); }
.btn--outline:hover { background: var(--accent-tint); }
.btn--soft { background: var(--surface-2); }
.btn--soft:hover { background: var(--surface-3); }

/* Tags */
.tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: var(--pill); font: 500 12px/1 var(--font);
  white-space: nowrap; background: var(--surface-1); color: var(--ink); }
:lang(ar) .tag { font-size: 13px; }
.tag .ico { width: 14px; height: 14px; }
.tag--deal { background: var(--gold); color: var(--on-gold); }
.tag--new { background: var(--accent-tint); color: var(--accent-ink); }
.tag--quiet { background: var(--surface-2); color: var(--ink-2); }
.tag--sold { background: var(--sold-tint); color: var(--sold); }

/* Price */
.price { display: grid; gap: 1px; }
.price__line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price__now { font: 600 22px/1.2 var(--font); font-variation-settings: "HEXP" 20; }
.price__was { font-size: 14px; color: var(--ink-3); text-decoration: line-through; }
.price__save { font-size: 14px; font-weight: 500; color: var(--accent-ink); }
.price__syp { font-size: 13px; line-height: 1.5; color: var(--ink-3); direction: rtl; unicode-bidi: isolate; justify-self: start; }
.price--big .price__now { font-size: 32px; }

/* Sections */
.section { padding-block: 40px; }
.section--tight { padding-block: 8px 16px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 20px; }
.section__head h2 { font-size: clamp(24px, 3.2vw, 34px); font-variation-settings: "HEXP" 20; }

/* Promises */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 26px; border-radius: var(--r-lg); background: var(--surface-1); }
.promise { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.promise__icon, .guarantee__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); }
.promise h2 { font-size: 16px; margin-block: 2px 4px; }
.promise p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) { .promises { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .promises { grid-template-columns: 1fr; padding: 20px; gap: 18px; } }

/* Category tiles */
.cats { display: flex; gap: 14px; overflow-x: auto; padding-block: 4px 18px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; display: grid; justify-items: center; gap: 8px; width: 80px; background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 13px/1.3 var(--font); color: var(--ink-2); text-align: center; }
:lang(ar) .cat { font-size: 14px; }
.cat__tile { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-1); color: var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.cat__tile .ico { width: 28px; height: 28px; stroke-width: 1.5; }
.cat:hover .cat__tile { transform: translateY(-2px); }
.cat[aria-pressed="true"] { color: var(--ink); }
.cat[aria-pressed="true"] .cat__tile { background: var(--ink); color: var(--on-ink); }
.cat small { display: block; font-size: 11px; color: var(--ink-3); }

/* Product grid + rail */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 23%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block-end: 8px; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
@media (max-width: 680px) { .rail { grid-auto-columns: 62%; gap: 10px; } }
.empty { padding: 32px; text-align: center; color: var(--ink-3); background: var(--surface-1); border-radius: var(--r-lg); }

/* Product card */
.card { display: flex; flex-direction: column; min-width: 0; background: var(--surface-1); border-radius: var(--r-lg); padding: 8px;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.card[hidden] { display: none; }
.card__link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.card__media { position: relative; aspect-ratio: 1; border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; display: grid; place-items: center; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.ico--placeholder { width: 34%; height: auto; stroke-width: 1; color: var(--ink-3); }
.card__tags { position: absolute; inset-block-start: 10px; inset-inline: 10px; display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.card__count { position: absolute; inset-block-end: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
  border-radius: var(--pill); background: var(--surface-1); font-size: 12px; color: var(--ink-2); }
.card__count .ico { width: 14px; height: 14px; }
.card__body { display: grid; gap: 2px; padding: 12px 8px 4px; }
.card__brand { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.card__name { font-size: 15px; font-weight: 500; line-height: 1.45; }
:lang(ar) .card__name { font-size: 16px; line-height: 1.6; }
.card__foot { display: flex; align-items: end; justify-content: space-between; gap: 8px; padding: 8px 8px 4px; margin-block-start: auto; }
.card--sold .card__media img, .card--sold .ico--placeholder, .card--sold .price { opacity: .45; }
@media (max-width: 680px) {
  .card { padding: 6px; border-radius: 16px; }
  .card__body { padding: 10px 6px 2px; }
  .card__foot { padding: 6px 6px 2px; flex-wrap: wrap; }
  .card__tags { inset-block-start: 8px; inset-inline: 8px; }
  .price__now { font-size: 19px; }
}

/* Guarantee band */
.guarantee { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 28px; border-radius: var(--r-lg); background: var(--accent); color: var(--on-accent); }
.guarantee__icon { width: 56px; height: 56px; background: rgba(255,255,255,.14); color: inherit; }
.guarantee__icon .ico { width: 28px; height: 28px; }
.guarantee h2 { font-size: clamp(22px, 3vw, 30px); margin-block-end: 8px; }
.guarantee p { max-width: 70ch; opacity: .92; }
@media (prefers-color-scheme: dark) { .guarantee__icon { background: rgba(0,0,0,.14); } }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .reviews { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; } .review { scroll-snap-align: start; } }
.review { margin: 0; padding: 22px; border-radius: var(--r-lg); background: var(--surface-1); display: grid; gap: 12px; align-content: start; min-width: 0; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }
.stars .off { color: var(--surface-3); }
.review blockquote { margin: 0; font-size: 16px; line-height: 1.7; }
.review figcaption { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
.review figcaption b { display: block; color: var(--ink); font-weight: 500; font-size: 14px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-tint); color: var(--accent-ink); font-weight: 600; }
.review-form { margin-block-start: 20px; }
.review-form > summary { list-style: none; display: inline-flex; }
.review-form > summary::-webkit-details-marker { display: none; }
.review-form[open] > summary { margin-block-end: 16px; }

/* Forms */
.form { display: grid; gap: 14px; max-width: 640px; }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.form input:not([type=radio]):not([type=checkbox]):not([type=file]), .form select, .form textarea, .search {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--surface-1);
  color: var(--ink); font: 400 16px/1.5 var(--font); }
.form input:focus, .form select:focus, .form textarea:focus, .search:focus { outline: none; border-color: var(--accent); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stars-input { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
[dir="rtl"] .stars-input { flex-direction: row-reverse; }
.stars-input legend { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-block-end: 6px; }
.stars-input input { position: absolute; opacity: 0; }
.stars-input label { cursor: pointer; color: var(--surface-3); }
.stars-input label .ico { width: 32px; height: 32px; fill: currentColor; stroke: none; }
.stars-input input:checked ~ label, .stars-input label:hover, .stars-input label:hover ~ label { color: var(--gold); }
.stars-input input:focus-visible + label { outline: 2px solid var(--accent); border-radius: 4px; }
.note { padding: 12px 16px; border-radius: var(--r-md); font-size: 15px; }
.note--ok { background: var(--accent-tint); color: var(--accent-ink); }
.note--err { background: var(--sold-tint); color: var(--sold); }

/* FAQ */
.faq { display: grid; gap: 8px; max-width: 860px; }
.faq details { background: var(--surface-1); border-radius: var(--r-md); padding: 0 20px; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 18px; cursor: pointer; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform .25s var(--ease); color: var(--ink-3); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq details p { padding-block-end: 18px; color: var(--ink-2); max-width: 70ch; }

/* Visit */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 32px; border-radius: var(--r-lg); background: var(--surface-1); align-items: center; }
.visit h2 { font-size: clamp(26px, 3.5vw, 38px); font-variation-settings: "HEXP" 20; }
.visit__text > p { margin-block: 10px 20px; color: var(--ink-2); }
.visit dl { margin: 0 0 24px; display: grid; gap: 14px; }
.visit dt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.visit dt .ico { width: 16px; height: 16px; color: var(--accent-ink); }
.visit dd { margin: 2px 0 0; font-weight: 500; }
.visit__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.visit__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); }
@media (max-width: 820px) { .visit { grid-template-columns: 1fr; padding: 22px; } .visit .row .btn { flex: 1 1 auto; } }

/* Product page */
.crumbs { padding-block: 18px 0; }
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; padding-block: 16px 24px; }
.gallery { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-1); }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center; display: grid; place-items: center; background: var(--surface-2); }
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.gallery .card__tags { inset-block-start: 14px; inset-inline: 14px; }
.gallery__dots { position: absolute; inset-block-end: 14px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; }
.gallery__dots button { width: 8px; height: 8px; border-radius: var(--pill); border: 0; padding: 0; background: var(--line-strong); cursor: pointer; transition: width .2s var(--ease); }
.gallery__dots button[aria-current="true"] { width: 22px; background: var(--ink); }
.pdp__info { display: grid; gap: 14px; position: sticky; top: 140px; }
.pdp__info h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.35; }
.pdp__box { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface-1); display: grid; gap: 4px; }
.pdp__box h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.pdp__box p { font-size: 14px; color: var(--ink-2); }
.pdp__box--accent { background: var(--accent-tint); }
.pdp__box--accent h2, .pdp__box--accent p { color: var(--accent-ink); }
.pdp__h { font-size: 17px; margin-block-start: 8px; }
.pdp__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pdp__features li { display: flex; gap: 10px; align-items: start; }
.pdp__features .ico { color: var(--accent-ink); margin-block-start: 4px; width: 18px; height: 18px; }
.pdp__desc { color: var(--ink-2); }
.pdp__code { font-size: 13px; }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; gap: 20px; } .pdp__info { position: static; } }
.empty-page { text-align: center; display: grid; gap: 14px; justify-items: center; padding-block: 80px; }

/* Floating WhatsApp */
.fab { position: fixed; z-index: 30; inset-block-end: calc(18px + env(safe-area-inset-bottom, 0px)); inset-inline-end: max(18px, env(safe-area-inset-right, 0px));
  display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 22px 0 18px; border-radius: var(--pill); text-decoration: none;
  background: var(--accent); color: var(--on-accent); font: 500 16px/1 var(--font); box-shadow: 0 10px 28px -10px rgba(10,61,65,.6);
  transition: transform .2s var(--ease), background-color .2s var(--ease); }
.fab:hover { background: var(--accent-hover); transform: translateY(-2px); }
.fab .ico { width: 26px; height: 26px; }
@media (max-width: 520px) { .fab { width: 58px; height: 58px; padding: 0; justify-content: center; } .fab span { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Section nav: second row of the sticky masthead */
.secnav { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-block-end: 1px solid var(--line); }
.secnav__in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.secnav__in::-webkit-scrollbar { display: none; }
.secnav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--pill); text-decoration: none;
  font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color .2s var(--ease), color .2s var(--ease); }
.secnav a:hover { background: var(--surface-2); color: var(--ink); }
.secnav a[aria-current="true"] { background: var(--ink); color: var(--on-ink); }

/* Extra button tones for dark panels */
.btn--sand { background: #faf8f4; color: #0a3d41; }
.btn--sand:hover { background: #fff; }
.btn--ghost { box-shadow: inset 0 0 0 1.5px rgba(250,248,244,.55); color: #faf8f4; }
.btn--ghost:hover { background: rgba(250,248,244,.1); box-shadow: inset 0 0 0 1.5px #faf8f4; }

/* Hero: a petrol stage with real deals */
.hero { padding-block: 20px 8px; }
.hero__panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center;
  min-height: 520px; padding: 56px 48px; border-radius: 28px; background: #0f5257; color: #faf8f4; isolation: isolate; }
.hero__panel::before { content: ""; position: absolute; z-index: -1; inset-inline-end: -12%; inset-block-start: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(127,203,198,.35), transparent 70%); }
.hero__panel::after { content: ""; position: absolute; z-index: -1; inset-inline-start: -10%; inset-block-end: -45%; width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246,178,64,.16), transparent 70%); }
.hero h1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.2; font-weight: 700; font-variation-settings: "HEXP" 25; letter-spacing: -.01em; }
:lang(en) .hero h1 { line-height: 1.04; font-variation-settings: "HEXP" 40; }
.hero__text > p { margin-block: 18px 28px; font-size: 18px; font-weight: 300; color: rgba(250,248,244,.86); max-width: 50ch; }
:lang(ar) .hero__text > p { font-size: 19px; }
.hero__facts { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: rgba(250,248,244,.8); }
.hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.hero__facts .ico { width: 18px; height: 18px; color: #7fcbc6; }
.hero__stage { position: relative; height: 440px; }
.deal__img .ico--placeholder { width: 40%; margin: auto; height: 100%; color: #a89d89; }
.deal__img:has(.ico--placeholder) { display: grid; background: #f0ebdf; }
.deal--brand .deal__img { display: grid; place-items: center; background: #fff; }
.deal--brand .deal__img img { width: 70%; height: auto; object-fit: contain; }
.deal { position: absolute; width: 56%; display: grid; gap: 10px; padding: 10px 10px 14px; border-radius: 22px; background: #faf8f4; color: #1a1a1a; text-decoration: none;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.55); transition: transform .4s var(--ease); }
.deal:hover { transform: translateY(-6px) rotate(0deg) !important; }
.deal__img { aspect-ratio: 1; border-radius: 14px; background: #fff; overflow: hidden; display: block; }
.deal__img img { width: 100%; height: 100%; object-fit: contain; }
.deal__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding-inline: 4px; }
.deal__brand { font-size: 12px; font-weight: 500; color: #6b6458; }
.deal__price { font-weight: 600; font-size: 17px; }
.deal__price s { font-weight: 400; font-size: 13px; color: #6b6458; }
.deal__tag { position: absolute; inset-block-start: 18px; inset-inline-start: 18px; }
.deal--0 { inset-inline-end: 4%; inset-block-start: 0; z-index: 3; transform: rotate(-3deg); }
.deal--1 { inset-inline-start: 0; inset-block-start: 22%; width: 46%; z-index: 2; transform: rotate(4deg); }
.deal--2 { inset-inline-end: 30%; inset-block-end: -4%; width: 40%; z-index: 1; transform: rotate(-6deg); }
.brands { margin-block-start: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.brands__track { display: flex; width: max-content; }
.brands ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 44px; padding-inline-end: 44px; }
.brands { padding-block: 22px 6px; }
.brands li { display: grid; place-items: center; height: 40px; }
.brands img { height: 30px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .62; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.brands li:hover img { filter: none; opacity: 1; }
@media (prefers-color-scheme: dark) { .brands img { filter: grayscale(1) invert(1) brightness(1.3); opacity: .55; } }
@media (max-width: 860px) {
  .hero__panel { grid-template-columns: 1fr; padding: 32px 22px 28px; min-height: 0; gap: 26px; border-radius: 24px; }
  .hero__stage { height: 300px; }
  .hero .row .btn { flex: 1 1 auto; }
  .deal { padding: 7px 7px 10px; border-radius: 18px; }
  .deal__price { font-size: 15px; }
  .deal--2 { display: none; }
  .brands img { height: 24px; }
}

/* Footer */
.footer { background: var(--logo-black); color: #b9b2a5; margin-block-start: 48px; padding-block: 56px calc(24px + env(safe-area-inset-bottom, 0px)); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; }
.footer__brand p { margin-block: 16px 18px; font-size: 14px; line-height: 1.8; max-width: 38ch; }
.footer h2 { font-size: 14px; font-weight: 600; color: #f2eee6; margin-block-end: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.footer a { color: #d8d2c6; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__contact li { display: flex; gap: 10px; align-items: start; }
.footer__contact .ico { width: 18px; height: 18px; color: #7fcbc6; margin-block-start: 3px; }
.footer__social { display: flex; gap: 8px; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.footer__social a:hover { background: rgba(255,255,255,.16); }
.footer__bottom { margin-block-start: 40px; padding-block-start: 20px; border-block-start: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12px; color: #8f897e; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .footer { padding-block-end: calc(96px + env(safe-area-inset-bottom, 0px)); } }

.small { font-size: 13px; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block: 4px 12px; }
.filters__search { flex: 1 1 260px; position: relative; display: flex; align-items: center; }
.filters__search .ico { position: absolute; inset-inline-start: 16px; color: var(--ink-3); pointer-events: none; }
.filters__search input { width: 100%; min-height: 48px; padding-inline: 46px 16px; border-radius: var(--pill); border: 1.5px solid transparent; background: var(--surface-1); color: var(--ink); font: 400 16px/1.4 var(--font); }
.filters__search input:focus { outline: none; border-color: var(--accent); }
.filters__select { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 16px 6px; border-radius: var(--pill); background: var(--surface-1); font-size: 13px; color: var(--ink-3); }
.filters__select select { appearance: none; border: 0; background: transparent; color: var(--ink); font: 500 15px/1 var(--font); min-height: 46px; padding-inline: 4px 26px; cursor: pointer;
  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='%236b6458' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; }
[dir="rtl"] .filters__select select { background-position: left 8px center; }
.filters__select:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.filters__select select:focus { outline: none; }
.brandchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px 18px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.brandchips::-webkit-scrollbar { display: none; }
.brandchip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding-inline: 16px 12px; border-radius: var(--pill); border: 1.5px solid transparent;
  background: var(--surface-1); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.brandchip img { height: 20px; width: auto; max-width: 92px; object-fit: contain; }
.brandchip .brandname { font: 600 14px/1 var(--font); color: var(--ink); }
.brandchip small { font-size: 11px; color: var(--ink-3); background: var(--surface-2); border-radius: var(--pill); padding: 3px 7px; }
.brandchip:hover { border-color: var(--line-strong); }
.brandchip[aria-pressed="true"] { border-color: var(--ink); background: #fff; }
.brandchip[aria-pressed="true"] small { background: var(--ink); color: var(--on-ink); }
@media (prefers-color-scheme: dark) { .brandchip img { filter: grayscale(1) invert(1) brightness(1.4); } .brandchip[aria-pressed="true"] { background: var(--surface-3); border-color: var(--ink); } }
.empty { display: grid; justify-items: center; gap: 14px; }
.empty[hidden] { display: none; }

/* How it works: a line that fills as you scroll, steps light up in turn */
.how { position: relative; padding: 28px; border-radius: var(--r-lg); background: var(--surface-1); }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.how__line { position: absolute; inset-inline: calc(28px + 28px); top: calc(28px + 27px); height: 3px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.how__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; }
[dir="rtl"] .how__fill { transform-origin: right; }
.how__step { display: grid; gap: 14px; align-content: start; }
.how__icon { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 6px var(--surface-1); }
.how__icon .ico { width: 26px; height: 26px; }
.how__step h3 { font-size: 17px; margin-block-end: 4px; }
.how--js .how__step h3, .how--js .how__step p { color: var(--ink-3); transition: color .5s var(--ease); }
.how--js .how__icon { transform: scale(.78); background: var(--surface-2); color: var(--ink-3); transition: transform .5s cubic-bezier(.34,1.8,.64,1), background-color .4s var(--ease), color .4s var(--ease); }
.how--js .how__step.is-on h3 { color: var(--ink); }
.how--js .how__step.is-on p { color: var(--ink-2); }
.how--js .how__step.is-on .how__icon { transform: scale(1); background: var(--accent); color: var(--on-accent); }
.how__step p { font-size: 14px; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 860px) {
  .how ol { grid-template-columns: 1fr; gap: 26px; }
  .how__line { inset-inline: auto; inset-inline-start: calc(28px + 26px); top: 56px; bottom: 56px; width: 3px; height: auto; }
  .how__fill { transform-origin: top; }
  [dir="rtl"] .how__fill { transform-origin: top; }
  .how__step { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
}

/* Wish list */
.wish { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; padding: 32px; border-radius: var(--r-lg); background: var(--accent-tint); }
.wish h2 { font-size: clamp(24px, 3vw, 32px); color: var(--accent-ink); }
.wish__text p { margin-block-start: 10px; color: var(--ink-2); max-width: 42ch; }
.wish__form { max-width: none; }
.wish .form input:not([type=radio]):not([type=checkbox]), .wish .form select { background: var(--surface-1); border-color: transparent; }
@media (max-width: 820px) { .wish { grid-template-columns: 1fr; padding: 22px; gap: 18px; } }

/* Visit map */
.visit__map { border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); min-height: 340px; height: 100%; }
.visit__map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
@media (prefers-color-scheme: dark) { .visit__map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.6); } }

/* Product page actions */
.pdp__actions { display: grid; gap: 10px; }
.pdp__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pdp__pair .btn { min-height: 48px; }

/* Smooth scrolling (Lenis). Same as lenis.css minus its iframe rule, so the shop map stays clickable. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Hamburger menu: phones only, and only when JS is running (otherwise the section strip stays visible) */
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.1); color: #f2eee6; transition: background-color .2s var(--ease); }
.menu-btn:hover { background: rgba(255,255,255,.18); }
.menu-btn .ico { width: 22px; height: 22px; }
.menu-btn .ico--close, .masthead.is-open .menu-btn .ico--open { display: none; }
.masthead.is-open .menu-btn .ico--close { display: block; }
.secnav__cta { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }
  html.js .menu-btn { display: grid; }
  html.js .topbar__lang { padding: 0 12px; }
  html.js .secnav { display: none; }
  html.js .masthead.is-open .secnav {
    display: block; position: absolute; inset-inline: 0; top: 100%;
    max-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-block-end: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(0,0,0,.45);
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.js .masthead.is-open .secnav__in { flex-direction: column; gap: 2px; overflow: visible; padding-block: 12px 8px; }
  html.js .masthead.is-open .secnav a { min-height: 54px; padding: 0 18px; border-radius: var(--r-md); font-size: 18px; justify-content: flex-start; }
  html.js .masthead.is-open .secnav__cta { display: grid; gap: 10px; padding-block: 8px 20px; }
  html.js .masthead.is-open .secnav__cta .btn { min-height: 52px; }
  html.js .masthead.is-open::after { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(10, 20, 22, .45); }
}
.footer__bottom .footer__credit { color: #f2eee6; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(242,238,230,.35); text-underline-offset: 3px; }
.footer__bottom .footer__credit:hover { text-decoration-color: currentColor; }