/* =========================================================
   EL MADINA — The Original Nuts House, since 1952
   Design system + components. Plain CSS, no framework.
   ========================================================= */

:root {
  /* palette */
  --ivory: #F7F4ED;
  --cream: #EFE8DA;
  --paper: #F7F0E4;        /* matches the engraving paper */
  --offwhite: #FBFAF6;
  --dark: #141210;
  --brown: #4A3326;
  --cacao: #2A1D16;
  --gold: #B89B63;
  --gold-soft: rgba(184, 155, 99, .45);
  --muted: #6B6055;
  --taupe: #A39383;
  --border: rgba(20, 18, 16, .12);
  --border-strong: rgba(20, 18, 16, .28);

  /* type */
  --font: "Louis George Cafe", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brandfont: var(--font);
  --arabic: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --arabic-display: "Noto Kufi Arabic", var(--arabic);

  /* spacing */
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1320px;
  --section: clamp(56px, 7vw, 104px);
  --gap: clamp(16px, 2vw, 28px);
  --radius: 6px;     /* subtle rounded corners (cards, images, buttons, fields) */
  --radius-sm: 4px;  /* small elements: badges, inner gold frames */
  --radius-media: clamp(18px, calc(1.6vw + 8px), 26px); /* product & category images: large soft corners (26px on desktop) */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-h: 84px;
}

/* Louis George Café (Font/Louis_george): Light, Regular and Bold, each with its italic.
   Each face covers a weight range (Light 100–300, Regular 400–500, Bold 600–900) so every
   weight used below maps to a real file, without synthetic bolding. No Arabic letters:
   Arabic text keeps --arabic / --arabic-display. */
@font-face { font-family: "Louis George Cafe"; src: url("../Font/Louis_george/Louis%20George%20Cafe%20Light.ttf") format("truetype"); font-weight: 100 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Louis George Cafe"; src: url("../Font/Louis_george/Louis%20George%20Cafe.ttf") format("truetype"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Louis George Cafe"; src: url("../Font/Louis_george/Louis%20George%20Cafe%20Bold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Louis George Cafe"; src: url("../Font/Louis_george/Louis%20George%20Cafe%20Light%20Italic.ttf") format("truetype"); font-weight: 100 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Louis George Cafe"; src: url("../Font/Louis_george/Louis%20George%20Cafe%20Italic.ttf") format("truetype"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Louis George Cafe"; src: url("../Font/Louis_george/Louis%20George%20Cafe%20Bold%20Italic.ttf") format("truetype"); font-weight: 600 900; font-style: italic; font-display: swap; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--dark);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }

html[lang="ar"] body { font-family: var(--arabic); line-height: 1.85; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

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

.skip-link {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--dark); color: var(--ivory); font-size: 13px;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }

/* ---------- entrance animation (js/intro.js) ----------
   html.intro is set in <head> before anything is drawn: a plain cream cover hides the page until
   the scene is laid. If the script never runs, the cover goes away by itself after 4.5 s.
   Pieces are placed in px by the script and moved with the Web Animations API. */
html.intro:not(.intro-live)::before {
  content: ""; position: fixed; inset: 0; z-index: 1000; background: var(--ivory);
  animation: intro-safety .4s ease 4.5s forwards;
}
@keyframes intro-safety { to { opacity: 0; visibility: hidden; } }
.intro-screen { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: var(--ivory); cursor: default; }
.intro-screen__bg { position: absolute; inset: 0; opacity: 0; }
/* pages without the hero: the hero's paper and engraving, full screen */
.intro-screen__bg--page {
  background:
    radial-gradient(ellipse 34% 58% at 70% 50%, rgba(239, 232, 218, .95) 0%, rgba(247, 244, 237, .84) 55%, rgba(247, 244, 237, .78) 100%),
    var(--ivory) url("../assets/bg-desktop.webp") center / cover no-repeat;
}
@media (max-width: 760px) {
  .intro-screen__bg--page {
    background:
      radial-gradient(ellipse 70% 42% at 50% 60%, rgba(247, 244, 237, .95) 0%, rgba(247, 244, 237, .7) 60%, rgba(247, 244, 237, 0) 100%),
      var(--ivory) url("../assets/bg-mobile.webp") center / cover no-repeat;
  }
}
.intro-screen__logo { position: absolute; z-index: 5; transform-origin: 0 0; will-change: transform; }
.intro-screen__logo img { display: block; width: 100%; height: auto; }
.intro-bowl { position: absolute; will-change: transform, opacity; }
.intro-bowl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ---------- engraved illustrations in the paper ----------
   Light line drawings (assets/illustrations/bg, made from assets/illustrations) printed into the
   background of a section, behind its content: at the page edges, partly cut off, sizes varied.
   Add `deco deco--<name>` to a section. The layer spans the whole window width even when the
   section is a container. --k scales every drawing (smaller on tablet and phone). */
.deco { position: relative; isolation: isolate; --k: 1; }
/* (the window's width without its scrollbar: 100vw counts the scrollbar of desktop browsers and made the page
   ~8px wider than the screen; --scrollbar is measured by js/app.js) */
.deco::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%;
  width: calc(100vw - var(--scrollbar, 0px)); transform: translateX(-50%);
  background-repeat: no-repeat; pointer-events: none;
}
/* home */
.deco--cats::after {
  background-image: url("../assets/illustrations/bg/walnut.webp"), url("../assets/illustrations/bg/pistachio.webp");
  background-position: left calc(var(--k) * -86px) top calc(var(--k) * 24px), right calc(var(--k) * -58px) bottom calc(var(--k) * -18px);
  background-size: calc(var(--k) * 250px) auto, calc(var(--k) * 200px) auto;
}
.deco--latest::after {
  background-image: url("../assets/illustrations/bg/scatter-b.webp"), url("../assets/illustrations/bg/almond.webp");
  background-position: right calc(var(--k) * -200px) top calc(var(--k) * 40px), left calc(var(--k) * -40px) bottom calc(var(--k) * 30px);
  background-size: calc(var(--k) * 360px) auto, calc(var(--k) * 140px) auto;
}
.deco--featured::after {
  background-image: url("../assets/illustrations/bg/scatter-a.webp"), url("../assets/illustrations/bg/hazelnut.webp");
  background-position: left calc(var(--k) * -200px) top calc(var(--k) * 60px), right calc(var(--k) * -70px) bottom calc(var(--k) * 110px);
  background-size: calc(var(--k) * 380px) auto, calc(var(--k) * 210px) auto;
}
.deco--story::after {
  background-image: url("../assets/illustrations/bg/pecan.webp"), url("../assets/illustrations/bg/date.webp");
  background-position: right calc(var(--k) * -76px) bottom calc(var(--k) * -30px), left calc(var(--k) * -30px) top calc(var(--k) * 10px);
  background-size: calc(var(--k) * 230px) auto, calc(var(--k) * 120px) auto;
}
.deco--social::after {
  background-image: url("../assets/illustrations/bg/cashew.webp"), url("../assets/illustrations/bg/almond.webp");
  background-position: left calc(var(--k) * -70px) top calc(var(--k) * 30px), right calc(var(--k) * -24px) bottom calc(var(--k) * 16px);
  background-size: calc(var(--k) * 210px) auto, calc(var(--k) * 120px) auto;
}
/* about */
.deco--origins::after {
  background-image: url("../assets/illustrations/bg/walnut.webp"), url("../assets/illustrations/bg/date.webp");
  background-position: right calc(var(--k) * -100px) top calc(var(--k) * 10px), left calc(var(--k) * -36px) bottom calc(var(--k) * 20px);
  background-size: calc(var(--k) * 260px) auto, calc(var(--k) * 130px) auto;
}
.deco--range::after {
  background-image: url("../assets/illustrations/bg/scatter-a.webp"), url("../assets/illustrations/bg/pistachio.webp");
  background-position: left calc(var(--k) * -210px) bottom calc(var(--k) * -20px), right calc(var(--k) * -50px) top calc(var(--k) * 30px);
  background-size: calc(var(--k) * 360px) auto, calc(var(--k) * 170px) auto;
}
.deco--store::after {
  background-image: url("../assets/illustrations/bg/hazelnut.webp"), url("../assets/illustrations/bg/cashew.webp");
  background-position: right calc(var(--k) * -60px) top calc(var(--k) * -30px), left calc(var(--k) * -64px) bottom calc(var(--k) * -24px);
  background-size: calc(var(--k) * 190px) auto, calc(var(--k) * 200px) auto;
}
.deco--gifts::after {
  background-image: url("../assets/illustrations/bg/pecan.webp"), url("../assets/illustrations/bg/almond.webp");
  background-position: left calc(var(--k) * -70px) center, right calc(var(--k) * -20px) top calc(var(--k) * 40px);
  background-size: calc(var(--k) * 220px) auto, calc(var(--k) * 130px) auto;
}
/* shop: products and category lists (long pages), other categories, product page */
.deco--list::after {
  background-image:
    url("../assets/illustrations/bg/scatter-a.webp"), url("../assets/illustrations/bg/walnut.webp"),
    url("../assets/illustrations/bg/pistachio.webp"), url("../assets/illustrations/bg/scatter-b.webp"),
    url("../assets/illustrations/bg/hazelnut.webp"), url("../assets/illustrations/bg/pecan.webp"),
    url("../assets/illustrations/bg/almond.webp"), url("../assets/illustrations/bg/cashew.webp"),
    url("../assets/illustrations/bg/date.webp"), url("../assets/illustrations/bg/walnut.webp");
  background-position:
    left calc(var(--k) * -210px) top 420px, right calc(var(--k) * -110px) top 1350px,
    left calc(var(--k) * -80px) top 2350px, right calc(var(--k) * -200px) top 3250px,
    left calc(var(--k) * -90px) top 4350px, right calc(var(--k) * -90px) top 5350px,
    left calc(var(--k) * -44px) top 6350px, right calc(var(--k) * -80px) top 7300px,
    left calc(var(--k) * -40px) top 8300px, right calc(var(--k) * -110px) top 9300px;
  background-size:
    calc(var(--k) * 360px) auto, calc(var(--k) * 250px) auto, calc(var(--k) * 190px) auto, calc(var(--k) * 360px) auto,
    calc(var(--k) * 210px) auto, calc(var(--k) * 220px) auto, calc(var(--k) * 140px) auto, calc(var(--k) * 200px) auto,
    calc(var(--k) * 130px) auto, calc(var(--k) * 240px) auto;
}
/* the product list is shown with its products: while the catalogue is on its way the list area (count, search field,
   drawings) stays invisible — it would otherwise be seen moving down when the category video above it appears */
.deco--list:has(#shop-grid:empty) { visibility: hidden; }
.deco--more::after {
  background-image: url("../assets/illustrations/bg/pistachio.webp"), url("../assets/illustrations/bg/pecan.webp");
  background-position: left calc(var(--k) * -60px) bottom calc(var(--k) * -20px), right calc(var(--k) * -80px) top calc(var(--k) * 30px);
  background-size: calc(var(--k) * 190px) auto, calc(var(--k) * 220px) auto;
}
/* contact, checkout, 404 / offline */
.deco--contact::after {
  background-image: url("../assets/illustrations/bg/walnut.webp"), url("../assets/illustrations/bg/pistachio.webp");
  background-position: right calc(var(--k) * -110px) bottom calc(var(--k) * -10px), left calc(var(--k) * -60px) top calc(var(--k) * 40px);
  background-size: calc(var(--k) * 250px) auto, calc(var(--k) * 180px) auto;
}
.deco--contact-page::after {
  background-image: url("../assets/illustrations/bg/scatter-a.webp"), url("../assets/illustrations/bg/walnut.webp"), url("../assets/illustrations/bg/almond.webp");
  background-position: left calc(var(--k) * -190px) bottom calc(var(--k) * -30px), right calc(var(--k) * -130px) top calc(var(--k) * 10px), right calc(var(--k) * -30px) bottom calc(var(--k) * 40px);
  background-size: calc(var(--k) * 400px) auto, calc(var(--k) * 290px) auto, calc(var(--k) * 130px) auto;
}
.deco--status::after {
  background-image: url("../assets/illustrations/bg/scatter-b.webp"), url("../assets/illustrations/bg/scatter-a.webp");
  background-position: right calc(var(--k) * -150px) top calc(var(--k) * 30px), left calc(var(--k) * -150px) bottom calc(var(--k) * 10px);
  background-size: calc(var(--k) * 380px) auto, calc(var(--k) * 360px) auto;
}
@media (max-width: 1100px) { .deco { --k: .75; } }
/* phone: small, pushed to the edges and lighter, never behind the reading area */
@media (max-width: 700px) {
  .deco { --k: .48; }
  .deco::after { opacity: .7; }
}

/* ---------- typography ---------- */
.label, .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.eyebrow { display: inline-flex; align-items: center; gap: 14px; color: var(--brown); } /* no gold dashes (simplified design) */

.h1, .h2 {
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.06;
  color: var(--dark);
}
.h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
.h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); }
.h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
/* page titles « Nos produits », « El Madina, depuis 1952 », « Parlons-en »: custom font (Font/), bold.
   The font has no Arabic letters: Arabic titles keep their font (only the weight applies). */
@font-face {
  font-family: "This Appeal";
  src: url("../Font/ThisAppeal-FreeDemo.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
:is([data-page="products"], [data-page="about"], [data-page="contact"]) .page-hero .h1 { font-family: "This Appeal", var(--font); font-weight: 700; }
/* set like the « EL MADINA » of the logo: capitals, black, tall condensed letters with an open,
   even rhythm (gap ≈ half a letter). Lighter spacing on the longest title; the same amount before
   the text keeps it centred (letter-spacing also adds space after the last letter). */
[data-page="products"] .page-hero .h1 { --ls: .13em; }
[data-page="about"] .page-hero .h1 { --ls: .1em; }
[data-page="contact"] .page-hero .h1 { --ls: .14em; }
:is([data-page="products"], [data-page="about"], [data-page="contact"]) .page-hero .h1 {
  text-transform: uppercase; color: #0b0a09;
  letter-spacing: var(--ls); padding-inline-start: var(--ls);
  font-kerning: none; /* even spacing, like a logotype */
}
@media (max-width: 760px) {
  [data-page="products"] .page-hero .h1 { --ls: .09em; }
  [data-page="about"] .page-hero .h1 { --ls: .06em; }
  [data-page="contact"] .page-hero .h1 { --ls: .1em; }
}
@media (max-width: 360px) {
  [data-page="about"] .page-hero .h1 { --ls: .04em; }
}
html[lang="ar"] :is([data-page="products"], [data-page="about"], [data-page="contact"]) .page-hero .h1 { font-family: var(--arabic-display); --ls: 0; } /* spacing would break the joined Arabic letters */

.lead { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--muted); max-width: 52ch; }
.text { color: var(--muted); max-width: 54ch; }
.text + .text { margin-top: 1em; }

html[lang="ar"] .h1, html[lang="ar"] .h2, html[lang="ar"] .h3,
html[lang="ar"] .card__title, html[lang="ar"] .cat__title, html[lang="ar"] .pdp__title,
html[lang="ar"] .drawer__title, html[lang="ar"] .menu__nav a {
  font-family: var(--arabic-display);
  letter-spacing: 0;
  line-height: 1.35;
}
html[lang="ar"] .label, html[lang="ar"] .eyebrow, html[lang="ar"] .btn,
html[lang="ar"] .nav a, html[lang="ar"] .chip, html[lang="ar"] .badge,
html[lang="ar"] .card__add, html[lang="ar"] .link-arrow, html[lang="ar"] .link-btn,
html[lang="ar"] .footer__col h3,
html[lang="ar"] .ph__label, html[lang="ar"] .cat__subs a {
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--arabic);
}
html[lang="ar"] .label, html[lang="ar"] .eyebrow { font-size: 13px; }


/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px;
  padding: 14px 30px;
  background: var(--dark);
  color: var(--ivory);
  border: 1px solid var(--dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { background: var(--brown); border-color: var(--brown); }
.btn--ghost { background: transparent; color: var(--dark); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--dark); color: var(--ivory); border-color: var(--dark); }
.btn--light { background: var(--ivory); color: var(--dark); border-color: var(--ivory); }
.btn--light:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.btn--block { width: 100%; }
.btn.is-added { background: var(--gold); border-color: var(--gold); color: var(--dark); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color .3s var(--ease);
}
.link-arrow:hover { border-color: var(--dark); }
/* arrow icon: carousel buttons only (action links and buttons carry no arrow) */
.arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
[dir="rtl"] .arrow { transform: scaleX(-1); }

.link-btn {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--border-strong);
}
.link-btn:hover { color: var(--dark); }
button.link-btn { min-height: 24px; min-width: 24px; } /* (« Retirer », « Continuer mes achats »…: easy to touch, even with a short word) */

.icon-btn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--dark);
}
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* =========================================================
   Header
   ========================================================= */
/* the content of the pages comes with the catalogue, a moment after the first display: until then the footer
   stays below the screen instead of showing up and being pushed down (no jump, no layout shift) */
#main { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
/* the header is drawn by js/app.js: its place is kept from the first display (its bar + its 1px line), so the page
   does not move down when it appears */
#site-header:empty { display: block; min-height: calc(var(--header-h) + 1px); }
/* the parts filled with the catalogue (product page, product lists, checkout): while still empty they keep the
   screen's height, so the sections after them are not shown first and then pushed down */
#product:empty, #shop-grid:empty, #checkout:empty { min-height: calc(100svh - var(--header-h)); }
/* a text still to come (translations, category name, contact details) already takes its line */
[data-i18n]:empty::before, [data-site]:empty::before, #cat-title:empty::before, #cat-desc:empty::before, #crumb-cat:empty::before { content: "\00a0"; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  min-height: var(--header-h);
  background: rgba(247, 244, 237, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header.is-scrolled { border-color: var(--border); }

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-h);
  gap: 16px;
}

.nav { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.nav a {
  position: relative;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding-block: 8px;
}
.nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transition: transform .35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.brand { display: block; justify-self: center; }
.brand img { height: 58px; width: auto; }

.header__actions { display: flex; align-items: center; justify-content: flex-end; gap: clamp(8px, 1.4vw, 20px); }

.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-btn {
  min-width: 36px; height: 32px; padding: 0 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.lang-btn--ar { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; }
.lang-btn:hover { color: var(--dark); }
.lang-btn[aria-pressed="true"] { color: var(--dark); border-color: var(--gold); }

.lang-select-wrap { display: none; }
.lang-select {
  appearance: none; -webkit-appearance: none;
  height: 36px; padding: 0 22px 0 10px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141210' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 6px center / 9px;
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  border-radius: var(--radius);
}
[dir="rtl"] .lang-select { padding: 0 10px 0 22px; background-position: left 6px center; }

.cart-count {
  position: absolute; top: 4px; inset-inline-end: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--dark); color: var(--ivory);
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 9px;
}

.burger { display: none; margin-inline-start: -10px; }

/* ---------- mobile menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 18, 16, .3);
  opacity: 0; transition: opacity .35s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__panel {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  padding: 18px var(--gutter) 32px;
  background: var(--ivory) url("../assets/bg-mobile.webp") center / cover;
  transform: translateX(-100%);
  transition: transform .45s var(--ease);
  overflow-y: auto;
}
.menu__panel::before {
  content: ""; position: absolute; inset: 0; background: rgba(247, 244, 237, .86); pointer-events: none;
}
.menu__panel > * { position: relative; }
[dir="rtl"] .menu__panel { transform: translateX(100%); }
.menu.is-open .menu__panel { transform: none; }
.menu__head { display: flex; align-items: center; justify-content: space-between; }
.menu__logo { height: 48px; width: auto; }
.menu__nav { display: flex; flex-direction: column; margin-top: clamp(40px, 10vh, 80px); }
.menu__nav a {
  padding: 16px 0;
  font-size: clamp(1.8rem, 8vw, 2.4rem); font-weight: 300; letter-spacing: -.02em;
  border-bottom: 1px solid var(--border);
}
.menu__nav a[aria-current="page"] { color: var(--brown); }
.menu__foot { margin-top: auto; padding-top: 40px; display: grid; gap: 14px; }
.lang-switch--menu .lang-btn { height: 40px; font-size: 13px; }
.menu__phone { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .08em; }
.menu__phone svg { width: 14px; height: 14px; fill: currentColor; opacity: .5; }

/* ---------- cart drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgba(20, 18, 16, .35);
  opacity: 0; transition: opacity .35s var(--ease);
}
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(440px, 100%);
  display: flex; flex-direction: column;
  background: var(--ivory);
  transform: translateX(100%);
  transition: transform .45s var(--ease);
}
[dir="rtl"] .drawer__panel { transform: translateX(-100%); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.drawer__title { font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; }
.drawer__close { margin-inline-end: -10px; }
.drawer__items { flex: 1; overflow-y: auto; padding: 8px 24px; }
.drawer__empty { display: grid; justify-items: center; gap: 20px; padding: 64px 0; text-align: center; color: var(--muted); }
.drawer__empty img { opacity: .35; }
.drawer__foot { padding: 20px 24px 24px; border-top: 1px solid var(--border); display: grid; gap: 14px; }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.drawer__total strong { font-size: 1.2rem; font-weight: 500; }
.drawer__note { font-size: 12px; color: var(--muted); }
.drawer__continue { justify-self: center; }

.line { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.line:last-child { border-bottom: 0; }
.line__media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.line__name { font-size: 15px; font-weight: 500; line-height: 1.35; margin-top: 2px; }
.line__price { font-size: 14px; color: var(--muted); margin-top: 4px; }
.line__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); height: 40px; }
.qty button { width: 38px; height: 100%; font-size: 16px; color: var(--dark); transition: background-color .2s; }
.qty button:hover { background: var(--cream); }
.qty input {
  width: 40px; height: 100%; border: 0; background: transparent; text-align: center;
  font-size: 14px; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* weight stepper [-] 100g [+] */
.qty--weight output { min-width: 56px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.qty button:disabled { color: var(--border-strong); cursor: default; background: transparent; }
.card .qty--weight { height: 30px; border-color: var(--border); }
.card .qty--weight button { width: 28px; font-size: 14px; }
.card .qty--weight output { min-width: 48px; font-size: 13px; }
.line .qty--weight output { min-width: 60px; }
.line__price .price { color: var(--dark); font-size: 14px; }

/* =========================================================
   Placeholders & media
   ========================================================= */
.media__img { width: 100%; height: 100%; object-fit: contain; }
.media__cover { width: 100%; height: 100%; object-fit: cover; }

.ph {
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  overflow: hidden;
}
.ph--paper { background: var(--paper); }
.ph--paper img {
  width: auto; height: auto;
  max-width: 72%; max-height: 72%;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  transition: transform .8s var(--ease);
}
.ph--large img { max-height: 78%; }

.ph__mark {
  width: 34%; aspect-ratio: 294 / 283;
  background: currentColor;
  -webkit-mask: url("../assets/mark.png") center / contain no-repeat;
  mask: url("../assets/mark.png") center / contain no-repeat;
  opacity: .85;
}
.ph__mark--ink { color: var(--taupe); opacity: .4; }
.ph__logo {
  width: 48%; aspect-ratio: 1067 / 661;
  background: currentColor;
  -webkit-mask: url("../assets/logo.png") center / contain no-repeat;
  mask: url("../assets/logo.png") center / contain no-repeat;
}
.ph__label {
  position: absolute; bottom: 7%; inset-inline: 10%;
  text-align: center;
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  opacity: .75;
}

/* chocolate: rich cacao tones with a gold almond mark */
.ph--cacao { color: var(--gold); background: radial-gradient(120% 90% at 50% 40%, #3A2A20 0%, var(--cacao) 70%); }
.ph--cacao .ph__label { color: #D9C6A2; }
.ph--lait { background: radial-gradient(120% 90% at 50% 40%, #7A5641 0%, #563A2A 75%); color: #E3CFA6; }
.ph--blanc { background: radial-gradient(120% 90% at 50% 40%, #FBF6EC 0%, #EDE2CE 80%); color: var(--gold); }
.ph--blanc .ph__label { color: var(--brown); }

/* gift boxes: plain ivory case (no frame) */
.ph--gift { background: linear-gradient(160deg, #FBF7EF 0%, #EFE6D4 100%); color: var(--dark); }
.ph--gift .ph__label { color: var(--brown); bottom: 13%; }
.ph--gift .ph__logo { opacity: .9; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  min-height: max(560px, calc(100svh - var(--header-h)));
  display: grid; align-items: center;
  padding: clamp(56px, 8vh, 96px) var(--gutter);
  background:
    radial-gradient(ellipse 34% 58% at 72% 50%, rgba(239, 232, 218, .95) 0%, rgba(247, 244, 237, .84) 55%, rgba(247, 244, 237, .78) 100%),
    var(--ivory) url("../assets/bg-desktop.webp") center / cover no-repeat;
  overflow: hidden;
}
@media (min-width: 961px) {
  [dir="rtl"] .hero {
    background:
    radial-gradient(ellipse 34% 58% at 28% 50%, rgba(239, 232, 218, .95) 0%, rgba(247, 244, 237, .84) 55%, rgba(247, 244, 237, .78) 100%),
    var(--ivory) url("../assets/bg-desktop.webp") center / cover no-repeat;
  }
}
/* text | rolling bowls */
.hero__grid {
  position: relative;
  width: 100%; max-width: var(--max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
  padding-inline: clamp(0px, 3vw, 40px);
}

.hero__content { position: relative; display: grid; justify-items: start; text-align: start; }
/* the official logo (assets/logo.png, transparent) in place of the old eyebrow / title / since lines */
.hero__logo { width: clamp(240px, 32vw, 460px); max-width: 100%; line-height: 0; }
.hero__logo img { display: block; width: 100%; height: auto; }
.hero__text {
  margin-top: 28px; max-width: 34ch;
  font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--brown);
  text-wrap: balance;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

/* ---------- rolling bowls ----------
   Every bowl sits in the centre of a square stage; initHero() (app.js) gives each one a seat
   (--x, --y in % of the stage, --s scale, --o opacity, --z layer). Changing seats is a
   transform transition, so the bowls travel around the carousel instead of fading. */
.hero__visual { position: relative; width: 100%; max-width: 640px; justify-self: center; container-type: inline-size; --dir: 1; }
[dir="rtl"] .hero__visual { --dir: -1; }
.hero__stage { position: relative; aspect-ratio: 1; --r: 0deg; --main: 64%; }
.hero__orbit {
  position: absolute; top: 9cqw; left: 9%; width: 82%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(74, 51, 38, .07); /* a faint neutral track for the bowls (was a gold double circle) */
}
.bowl {
  position: absolute; top: calc(50% - var(--main) / 2); left: calc(50% - var(--main) / 2); width: var(--main); aspect-ratio: 1;
  z-index: var(--z, 1);
  opacity: var(--o, 1);
  transform: translate(calc(var(--x, 0) * var(--dir) * 1cqw), calc(var(--y, 0) * 1cqw)) scale(var(--s, 1));
  transition: transform .9s cubic-bezier(.65, 0, .25, 1), opacity .7s var(--ease);
  will-change: transform;
}
.bowl__shadow {
  position: absolute; inset: 10% 2% -9% 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 51, 38, .3), rgba(74, 51, 38, .12) 60%, rgba(74, 51, 38, 0));
}
.bowl__float { position: absolute; inset: 0; animation: bowl-float 7s ease-in-out infinite; }
.bowl__spin {
  position: absolute; inset: 0;
  transform: rotate(calc(var(--r) * var(--dir)));
  transition: transform .9s cubic-bezier(.65, 0, .25, 1);
}
.bowl--box .bowl__spin { transform: none; } /* gift boxes slide, they do not roll */
.bowl img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.bowl img.is-raw {
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 96%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 96%, transparent 100%);
}
@keyframes bowl-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1.6%) rotate(1.2deg); }
}

.hero__label {
  position: relative; z-index: 5;
  margin-top: -13%;
  display: flex; justify-content: center; text-align: center;
  min-height: 5.2em;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.hero__label.is-swapping { opacity: 0; transform: translateY(6px); }
.hero__product { display: grid; justify-items: center; gap: 4px; max-width: 48cqw; }
.hero__product .label { color: var(--gold); font-size: 10.5px; }
.hero__name {
  font-family: var(--brandfont); font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
  text-wrap: balance;
}
.hero__product:hover .hero__name { color: var(--brown); }
.hero__product .card__price { justify-content: center; }
.hero__product .price { font-size: 15px; }


@media (prefers-reduced-motion: reduce) {
  .bowl, .bowl__spin, .hero__label { transition: none; }
  .bowl__float { animation: none; }
}

/* =========================================================
   Home sections
   ========================================================= */

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section-head > div { display: grid; gap: 18px; max-width: 720px; }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center > div { justify-items: center; }

/* ---------- home « Nos univers »: cover-flow carousel (initCatCarousel, app.js) ----------
   Every card sits in the middle of the stage and is moved to its seat by initCatCarousel
   (--x in card widths from the centre, --s scale, --ry turn, --z layer, --o opacity).
   Changing seats is a transform transition: the cards travel around the ring. */
.cat-carousel {
  --cw: 24cqw;                       /* width of a card (the centre one; its neighbours are scaled down) */
  --ch: 1;                           /* height of a card, in card widths */
  --dir: 1;
  position: relative; container-type: inline-size;
  perspective: 1600px; perspective-origin: 50% 45%;
  padding-block: 8px 18px;
}
[dir="rtl"] .cat-carousel { --dir: -1; }
.deco--cats { overflow-x: clip; } /* the outer cards may pass the screen edge: never a sideways scroll */
.cat-carousel::before { content: ""; display: block; height: calc(var(--cw) * var(--ch)); } /* the stage height */
/* a more compact section: less room around the title and the carousel */
[data-page="home"] main > .section.deco--cats { padding-block: clamp(24px, 3vw, 40px); }
[data-page="home"] .deco--cats .section-head { margin-bottom: clamp(12px, 1.6vw, 20px); }
[data-page="home"] .deco--cats .section-head > div { gap: 8px; }
.cat-slide {
  position: absolute; top: 8px; left: calc(50% - var(--cw) / 2); width: var(--cw); height: calc(var(--cw) * var(--ch));
  z-index: var(--z, 1); opacity: var(--o, 1);
  overflow: hidden; isolation: isolate; border-radius: 16px; background: var(--paper);
  transform: translateX(calc(var(--x, 0) * var(--cw) * var(--dir))) rotateY(calc(var(--ry, 0deg) * var(--dir))) scale(var(--s, 1));
  transition: transform 1.1s cubic-bezier(.65, 0, .25, 1), opacity .8s var(--ease), box-shadow 1.1s var(--ease);
  will-change: transform;
}
.cat-slide[data-seat="0"] { box-shadow: 0 28px 50px -28px rgba(42, 29, 22, .6); }
.cat-slide[data-seat="out"] { pointer-events: none; }
.cat-slide__media { position: absolute; inset: 0; display: block; }
.cat-slide__media > * { width: 100%; height: 100%; }
.cat-slide__media img { display: block; object-fit: cover; object-position: center; transition: transform 1.2s var(--ease); }
/* a soft dark veil for the white name; deeper on the cards further from the centre */
.cat-slide__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 48% at 50% 50%, rgba(20, 14, 10, .38), rgba(20, 14, 10, 0) 100%),
    linear-gradient(rgba(20, 14, 10, .1), rgba(20, 14, 10, .34));
}
.cat-slide__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(20, 14, 10, .32);
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.cat-slide[data-seat="1"] .cat-slide__media::before { opacity: .45; }
.cat-slide[data-seat="2"] .cat-slide__media::before, .cat-slide[data-seat="out"] .cat-slide__media::before { opacity: .8; }
.cat-slide[data-seat="0"]:hover .cat-slide__media img { transform: scale(1.04); }
.cat-slide__name {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 12px; text-align: center;
  font-family: var(--brandfont); font-weight: 600; text-transform: uppercase; color: #fff;
  font-size: clamp(1rem, 1.9vw, 1.7rem); letter-spacing: .24em; line-height: 1.3;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .35);
}
html[lang="ar"] .cat-slide__name { font-family: var(--arabic-display); letter-spacing: 0; text-transform: none; }
.cat-slide:focus-visible { outline: 2px solid #fff; outline-offset: -8px; }
/* tablet and phone: a larger centre card, the neighbours cut by the screen edges */
@media (max-width: 1023px) { .cat-carousel { --cw: 38cqw; --ch: 1.05; } }
@media (max-width: 640px) {
  .cat-carousel { --cw: 54cqw; --ch: 1.08; padding-block: 4px 12px; }
  .cat-slide { border-radius: 14px; }
  .cat-slide__name { font-size: 1.15rem; letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) { .cat-slide, .cat-slide__media img, .cat-slide__media::before { transition: none; } }

/* ---------- product grid & card ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) var(--gap);
}
.card { display: flex; flex-direction: column; min-width: 0; }
.card__media {
  position: relative; display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper);
}
.card__media .ph, .card__media .media__img, .card__media .media__photo { transition: transform .9s var(--ease); }
.card:hover .card__media .ph, .card:hover .card__media .media__img, .card:hover .card__media .media__photo { transform: scale(1.03); }

.badges {
  position: absolute; top: 12px; inset-inline-start: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  pointer-events: none;
}
.badges:empty { display: none; }
.badge {
  padding: 5px 10px;
  background: var(--ivory);
  color: var(--dark);
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.3;
}
.badge--new { color: var(--brown); box-shadow: inset 0 0 0 1px var(--gold-soft); }
/* discount: red corner ribbon across the top-right corner of the photo (clipped by its rounded frame) */
.ribbon {
  position: absolute; top: 0; inset-inline-end: 0; z-index: 2;
  width: 104px; height: 104px; overflow: hidden; pointer-events: none;
}
.ribbon > span {
  position: absolute; top: 22px; right: -34px; width: 150px;
  padding: 7px 0; text-align: center; direction: ltr;
  background: linear-gradient(180deg, #C8342A 0%, #A8211A 100%); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1;
  transform: rotate(45deg);
  box-shadow: 0 6px 12px -6px rgba(90, 14, 10, .55);
  border-block: 1px solid rgba(255, 255, 255, .28); /* fine inner stitching, like a ribbon */
}
[dir="rtl"] .ribbon > span { right: auto; left: -34px; transform: rotate(-45deg); }
@media (max-width: 760px) {
  .ribbon { width: 72px; height: 72px; }
  .ribbon > span { top: 15px; right: -30px; width: 112px; padding: 5px 0; font-size: 10px; letter-spacing: .06em; }
  [dir="rtl"] .ribbon > span { left: -30px; }
}
.badge--promo { background: var(--dark); color: var(--ivory); letter-spacing: .06em; direction: ltr; }
.badge--inline { align-self: center; font-size: 11px; }

/* real product photos (square crops) */
.media__photo { width: 100%; height: 100%; object-fit: cover; }
/* product cards: the whole photo, never cropped nor stretched */
.card__media .media__photo { object-fit: cover; object-position: center; } /* fills the rounded image frame */

/* prices: always "8.000 DT", kept left-to-right in Arabic */
.price, .price-old { direction: ltr; unicode-bidi: isolate; }
.price--promo { color: #8E2F21; }
.price-old { font-size: 13px; color: var(--taupe); white-space: nowrap; }
.card__price, .pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }

.chip__n { margin-inline-start: 8px; font-size: 10px; opacity: .55; letter-spacing: 0; }

.card__body { display: flex; flex-direction: column; flex: 1; padding-top: 18px; gap: 6px; }
.card__title { font-size: clamp(15px, 1.25vw, 17px); font-weight: 500; line-height: 1.35; letter-spacing: -.005em; }
.card__title a { transition: color .2s; }
.card__title a:hover { color: var(--brown); }
/* weight picker (products sold by 100g) or "per unit" note, just above the price */
.card__size { display: flex; align-items: center; min-height: 30px; margin-top: auto; padding-top: 10px; }
.card__size--unit { font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.card__size + .card__foot { margin-top: 0; padding-top: 10px; }
.price-unit { font-size: .8em; font-weight: 400; color: var(--muted); white-space: nowrap; }
.card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px;
  flex-wrap: wrap;
  margin-top: auto; padding-top: 14px;
}
.price { font-size: 15px; font-weight: 500; white-space: nowrap; }
/* "Ajouter" buttons (product cards, product page, gift box): black, white text */
.card__add, .buy [data-cart-add], [data-box-add] {
  background: #111111; color: #fff; border: 1px solid #111111;
}
.card__add {
  padding: 9px 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.card__add:hover, .buy [data-cart-add]:hover, [data-box-add]:not(:disabled):hover { background: #2B2B2B; border-color: #2B2B2B; color: #fff; }
.card__add.is-added, .buy [data-cart-add].is-added { background: var(--gold); border-color: var(--gold); color: var(--dark); }

.empty { grid-column: 1 / -1; padding: 64px 0; text-align: center; color: var(--muted); }

.center-cta { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 80px); }

/* ---------- heritage (Depuis 1952) ---------- */
.split {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap); align-items: center;
}
.split__media { grid-column: 1 / span 6; position: relative; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__body { grid-column: 8 / span 5; display: grid; gap: 22px; justify-items: start; }
.split--reverse .split__media { grid-column: 7 / span 6; order: 2; }
.split--reverse .split__body { grid-column: 1 / span 5; order: 1; }

.year {
  font-family: var(--brandfont); font-weight: 300;
  font-size: clamp(4.5rem, 11vw, 9rem); line-height: .85; letter-spacing: .04em;
  color: transparent; -webkit-text-stroke: 1px var(--gold);
}
.stats { display: flex; gap: clamp(24px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--border); width: 100%; }
.stat strong { display: block; font-family: var(--brandfont); font-size: 1.9rem; font-weight: 300; letter-spacing: .04em; }
.stat span { font-size: 12px; color: var(--muted); }

.media-caption {
  position: absolute; bottom: 18px; inset-inline-start: 18px;
  padding: 6px 12px; background: rgba(247, 244, 237, .9);
  font-family: var(--brandfont); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
}

/* ---------- coffrets ---------- */
.gifts { background: var(--cream); position: relative; overflow: hidden; }
.gifts__inner { position: relative; }
.gifts__head { text-align: center; display: grid; justify-items: center; gap: 22px; margin-bottom: clamp(48px, 6vw, 80px); }
.gifts__head .h2 { max-width: 16ch; }
.gifts__head .lead { text-align: center; }
.gifts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.gift { display: grid; gap: 22px; }
.gift__media { aspect-ratio: 5 / 4; overflow: hidden; }
.gift__media .ph { transition: transform 1.1s var(--ease); }
.gift:hover .gift__media .ph { transform: scale(1.02); }
.gift__body { display: grid; gap: 8px; text-align: center; justify-items: center; }
.gift__body h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 300; letter-spacing: -.01em; }
.gift__body p { color: var(--muted); }
.gifts .center-cta { margin-top: clamp(40px, 5vw, 64px); }
.ph--gift-dark { background: linear-gradient(160deg, #221812 0%, #120D0A 100%); color: var(--gold); }
.ph--gift-dark .ph__label { color: #D9C6A2; }

/* ---------- social gallery ---------- */
.social-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.social-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.social-tile > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.social-tile .ph img { max-width: 80%; max-height: 80%; }
.social-tile::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20, 18, 16, .0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F4ED' stroke-width='1.2'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4.5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E") center / 28px no-repeat;
  opacity: 0; transition: opacity .35s var(--ease), background-color .35s var(--ease);
}
.social-tile:hover::after, .social-tile:focus-visible::after { opacity: 1; background-color: rgba(20, 18, 16, .35); }
.social-tile:hover > img, .social-tile:focus-visible > img { transform: scale(1.04); }
/* Reel marker, as on Instagram */
.social-tile__type {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1;
  width: 20px; height: 20px; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(20, 18, 16, .45));
  transition: opacity .35s var(--ease);
}
.social-tile__type svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.social-tile:hover .social-tile__type { opacity: 0; }
/* tiles from « Contenus du site »: a video plays while hovered (no dark veil over it), a link without cover shows its site's mark */
.social-tile--video:hover::after { opacity: 0; }
.social-tile__ph { position: absolute; inset: 0; display: grid; place-items: center; background: #1B1612; color: rgba(247, 244, 237, .8); }
.social-tile__ph svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.2; }

/* ---------- home: compact rhythm & readable type ---------- */
[data-page="home"] .hero {
  min-height: clamp(520px, 78svh, 760px);
  padding-block: clamp(56px, 8vh, 96px);
}
[data-page="home"] .hero__text { font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 42ch; }
[data-page="home"] .hero__ctas { margin-top: 32px; }

[data-page="home"] main > .section { padding-block: clamp(32px, 4vw, 52px); }
[data-page="home"] main > .section:last-child { padding-bottom: clamp(48px, 6vw, 80px); }
[data-page="home"] .section-head { margin-bottom: clamp(24px, 3vw, 36px); gap: 16px 40px; }
[data-page="home"] .section-head > div { gap: 12px; }
[data-page="home"] .eyebrow { font-size: 12px; }
[data-page="home"] .h2 { font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; }
[data-page="home"] .text, [data-page="home"] .lead { font-size: 16px; }
[data-page="home"] .btn { font-size: 14px; letter-spacing: .12em; padding-inline: 28px; }
[data-page="home"] .link-arrow { font-size: 13px; letter-spacing: .14em; }
[data-page="home"] .center-cta { margin-top: clamp(24px, 3vw, 36px); flex-wrap: wrap; gap: 16px 40px; }
/* account handle inside an uppercase link: keep it as written (@elmadina.nuts) */
.link-arrow .handle { text-transform: none; letter-spacing: .04em; font-weight: 500; margin-inline-start: -4px; unicode-bidi: isolate; }

/* featured products: 4 / 2 / 1 columns */
[data-page="home"] .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) var(--gap); }
[data-page="home"] .card__title { font-size: clamp(15px, 1.3vw, 17px); }
[data-page="home"] .card .label { font-size: 11.5px; }
[data-page="home"] .price { font-size: 16px; }
[data-page="home"] .card__add { font-size: 12px; padding: 10px 14px; }

/* « Produits en promotion »: a full-width warm sand band, a shade deeper than the page (its colour is the separation) */
[data-page="home"] main > .promo-band {
  padding-block: clamp(52px, 6.5vw, 96px);
  background: linear-gradient(180deg, #F0E8D9 0%, #ECE3D1 100%);
}
[data-page="home"] .promo-band + .section { padding-top: clamp(52px, 6vw, 84px); } /* breathing room before « Produits en vedette » */

/* Nouveautés: horizontal rail of the same product cards, 4 / 3 / 2.5 / 2 / 1.5 visible */
:is(.latest, .promo-band) .section-head { align-items: flex-end; }
.latest .lead { max-width: 46ch; }
.rail {
  --per: 4;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  column-gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail > .card { scroll-snap-align: start; }
.rail:focus-visible { outline-offset: 8px; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.rail.is-dragging a { pointer-events: none; }

.rail__nav { display: flex; gap: 8px; }
.rail__btn {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--border); border-radius: 50%; color: var(--dark);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.rail__btn:hover:not(:disabled) { border-color: var(--dark); background: var(--dark); color: var(--ivory); }
.rail__btn:disabled { opacity: .35; cursor: default; }
.rail__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.rail__btn--prev .arrow { transform: scaleX(-1); }
[dir="rtl"] .rail__btn .arrow { transform: scaleX(-1); }
[dir="rtl"] .rail__btn--prev .arrow { transform: none; }

/* hairline showing where the visitor is along the rail */
.rail__progress { position: relative; height: 1px; margin-top: clamp(24px, 3vw, 32px); background: var(--border); overflow: hidden; }
.rail__progress i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--gold); transition: transform .3s var(--ease); }

@media (max-width: 1100px) { .rail { --per: 3; } }
@media (max-width: 960px) { .rail { --per: 2.5; } }
@media (max-width: 760px) {
  /* full-bleed rail: cards slide in from the screen edge */
  .rail {
    --per: 2; --gap: 14px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .rail__nav, .section-head > .rail__nav { display: none; } /* swipe on phones (beats .section-head > div) */
}
/* without it, mobile Chrome widens the whole page to the rail's full length (same as #new-grid below) */
@media (max-width: 960px) { .rail { contain: paint; } }
#promo-rail { contain: paint; } /* the promotion rail does it at every width (the document grew to its full length) */
@media (max-width: 560px) { .rail { --per: 1.5; } }
/* « Produits en promotion »: always 4 cards on one line on desktop */
@media (min-width: 961px) { #promo-rail { --per: 4; } }
@media (hover: none) { .rail { cursor: auto; } }

/* phone: « Produits en vedette » becomes the same one-line rail as « Nouveautés » and
   « Produits en promotion » (swipe, no scrollbar, the first card at the left edge); desktop keeps the grid */
@media (max-width: 760px) {
  [data-page="home"] #new-grid {
    --per: 2; --gap: 14px;
    display: grid; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
    gap: 0 var(--gap);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    contain: paint; /* without it, mobile Chrome widens the whole page to the row's full length */
  }
  [data-page="home"] #new-grid::-webkit-scrollbar { display: none; }
  [data-page="home"] #new-grid > .card { scroll-snap-align: start; }
}
@media (max-width: 560px) { [data-page="home"] #new-grid { --per: 1.5; } }
@media (prefers-reduced-motion: reduce) { .rail, .rail__progress i { scroll-behavior: auto; transition: none; } }

/* Notre histoire: image | text */
.story-home__inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.story-home__media {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--paper);
}
/* official logo (transparent PNG), never stretched */
.story-home__logo { width: 62%; max-width: 420px; height: auto; object-fit: contain; }
.story-home__body { display: grid; gap: 18px; justify-items: start; }
.story-home__body .text { max-width: 46ch; }

/* « Le cadeau sur mesure »: plain cream panel (no frame, no dividers) — text and button on one
   side, the gift-box photo filling the other side edge to edge; stacked on small screens */
.section.custom-box { padding-block: clamp(36px, 4.5vw, 64px); }
.custom-box__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  overflow: hidden;
  background: #F1EADC;
  border-radius: var(--radius);
}
.custom-box__body {
  display: grid; justify-items: start; align-content: center;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 72px);
}
/* hierarchy: discreet eyebrow → affirmed title → short, readable text */
.custom-box__body .eyebrow { font-size: 10.5px; letter-spacing: .28em; color: var(--muted); }
.custom-box__body .h2 {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.1;
}
.custom-box__body .text { margin-top: 16px; max-width: 44ch; font-size: 15.5px; line-height: 1.7; }
/* the three benefits: text only, three even columns */
.custom-box__perks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; width: 100%;
  margin: 28px 0 0; padding: 0; list-style: none;
  font-size: 14.5px; line-height: 1.45; color: var(--dark);
}
.custom-box__cta { margin-top: 32px; min-width: 240px; box-shadow: 0 14px 28px -18px rgba(20, 18, 16, .55); }
html[lang="ar"] .custom-box__perks { font-family: var(--arabic); }
.custom-box__media { position: relative; margin: 0; min-height: 100%; background: var(--paper); }
.custom-box__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
@media (max-width: 1080px) {
  .custom-box__perks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 760px) {
  /* stacked: photo on top (cropped landscape), then text centred, button full width */
  .custom-box__inner { grid-template-columns: minmax(0, 1fr); }
  .custom-box__media { order: -1; aspect-ratio: 4 / 3; min-height: 0; }
  .custom-box__body { justify-items: center; text-align: center; padding: 30px 20px 28px; }
  .custom-box__perks { justify-items: center; margin-top: 22px; }
  .custom-box__cta { width: 100%; max-width: 360px; min-width: 0; margin-top: 24px; }
}

@media (max-width: 960px) {
  [data-page="home"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* hero: text first, bowls below */
  .hero { background:
    radial-gradient(ellipse 70% 40% at 50% 72%, rgba(239, 232, 218, .95) 0%, rgba(247, 244, 237, .8) 60%, rgba(247, 244, 237, .72) 100%),
    var(--ivory) url("../assets/bg-desktop.webp") center / cover no-repeat; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(8px, 3vw, 24px); padding-inline: 0; }
  .hero__content { justify-items: center; text-align: center; }
  .hero__logo { width: clamp(250px, 72vw, 420px); }
  .hero__ctas { justify-content: center; }
  .hero__visual { max-width: 500px; }
}
@media (max-width: 760px) {
  [data-page="home"] .hero { min-height: clamp(480px, 72svh, 640px); }
  [data-page="home"] .hero__ctas { width: auto; }
  /* hero bowls: use the full screen width and a larger main bowl */
  [data-page="home"] .hero {
    background:
      linear-gradient(rgba(247, 244, 237, .78), rgba(247, 244, 237, .78)),
      var(--ivory) url("../assets/bg-mobile.webp") center / cover no-repeat;
  }
  .hero__visual { width: calc(100% + 2 * var(--gutter)); max-width: none; margin-inline: calc(-1 * var(--gutter)); }
  .hero__stage { --main: 70%; }
  .hero__product { max-width: 64cqw; }
  [data-page="home"] .grid { gap: 28px 14px; }
  .story-home__inner { grid-template-columns: minmax(0, 1fr); }
}
/* a phone held sideways (wide and short): text and bowls side by side, as on a computer, sized by the screen's
   height — otherwise the logo alone filled the screen and the bowls came far below */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 560px) {
  .hero, [data-page="home"] .hero { min-height: calc(100svh - var(--header-h)); padding-block: 20px; }
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; padding-inline: 0; }
  .hero__content { justify-items: start; text-align: start; }
  .hero__logo { width: min(32vw, 280px, 36svh * 1.61); }
  .hero__text { margin-top: 14px; }
  .hero__ctas { justify-content: flex-start; margin-top: 18px; }
  .hero__visual { width: min(100%, 78svh); max-width: none; margin-inline: auto; }
  .hero__product { max-width: 48cqw; }
}

/* =========================================================
   Inner pages
   ========================================================= */
.page-hero {
  position: relative;
  padding: clamp(52px, 7vw, 100px) 0 clamp(44px, 5.5vw, 76px);
  text-align: center;
  background:
    linear-gradient(rgba(247, 244, 237, .78), rgba(247, 244, 237, .78)),
    var(--ivory) url("../assets/bg-desktop.webp") center 40% / cover no-repeat;
  border-bottom: 1px solid var(--border);
}
.page-hero .container { display: grid; justify-items: center; gap: 18px; }
.page-hero .lead { text-align: center; }

/* 404 and offline pages (404.html, offline.html) */
.status-page {
  position: relative; display: grid; place-items: center;
  min-height: max(460px, calc(100svh - var(--header-h) - 120px));
  padding: clamp(64px, 10vw, 120px) var(--gutter);
  text-align: center;
}
.status-page__inner { position: relative; display: grid; justify-items: center; gap: 20px; }
.status-page__code {
  font-family: var(--brandfont); font-weight: 300;
  font-size: clamp(5.5rem, 16vw, 11rem); line-height: .9; letter-spacing: .08em; text-indent: .08em;
  color: var(--dark);
}
.status-page__icon { width: clamp(56px, 8vw, 76px); height: auto; fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; }
.status-page__title { text-wrap: balance; }
.status-page .lead { text-align: center; }
.status-page .btn { margin-top: 12px; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-block: 28px;
  font-size: 12px; color: var(--muted);
}
.crumbs a:hover { color: var(--dark); }
.crumbs [aria-current] { color: var(--dark); }

/* ---------- filters ---------- */
.filters { border-bottom: 1px solid var(--border); position: sticky; top: var(--header-h); z-index: 20; background: rgba(247, 244, 237, .96); }
.filters__row {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding-block: 16px;
}
.filters__row::-webkit-scrollbar { display: none; }
/* more tabs hidden on a side (set by syncChipRow, app.js): that side fades out */
.filters__row.more-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.filters__row.more-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.filters__row.more-start.more-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
[dir="rtl"] .filters__row.more-end:not(.more-start) { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); }
[dir="rtl"] .filters__row.more-start:not(.more-end) { -webkit-mask-image: linear-gradient(270deg, transparent, #000 48px); mask-image: linear-gradient(270deg, transparent, #000 48px); }
@media (max-width: 760px) {
  /* the tabs run to the screen edges instead of being cut at the page margin */
  .filters__row { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
.filters__row--sub { padding-top: 0; }
/* the category tabs arrive with the catalogue: their row already has the height of a tab (same padding, border, text) */
#cat-filters:empty::before {
  content: "\00a0"; padding-block: 10px; border: 1px solid transparent;
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
}
.chip {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.chip:hover { color: var(--dark); border-color: var(--border-strong); }
.chip[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--ivory); }
.filters__row--sub .chip { padding: 7px 14px; font-size: 10.5px; border-color: transparent; }
.filters__row--sub .chip[aria-pressed="true"] { background: transparent; color: var(--dark); border-color: transparent; border-bottom-color: var(--gold); }

.shop-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 28px; }
.shop-meta p { font-size: 13px; color: var(--muted); }
/* products page: search field (same look as the box picker's) */
.shop-search { flex: 0 1 300px; min-width: 0; }
.shop-search__input {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--offwhite); font-size: 14px; color: var(--dark);
}
.shop-search__input:focus { outline: none; border-color: var(--gold); }
.empty__action { margin-top: 12px; }
/* catalogue pages: « ‹ Précédent  1 2 … 4  Suivant › » under a long list (js/app.js, SHOP_PAGE_SIZE) */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px 14px; margin-top: clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); }
.pager[hidden] { display: none; }
.pager__pages { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pager__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
a.pager__link:hover { color: var(--dark); border-color: var(--border-strong); }
.pager__num { letter-spacing: .04em; font-size: 13px; padding: 0 6px; }
.pager__link.is-current { background: var(--dark); border-color: var(--dark); color: var(--ivory); }
.pager__link.is-off { opacity: .35; }
.pager__step > span[aria-hidden] { font-size: 16px; letter-spacing: 0; line-height: 1; }
.pager__gap { min-width: 20px; text-align: center; color: var(--muted); }
html[lang="ar"] .pager__link { letter-spacing: 0; }
@media (max-width: 560px) {
  .pager { gap: 6px; }
  .pager__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* arrows only */
  .pager__link { min-width: 40px; height: 40px; padding: 0 4px; }
  .pager__pages { gap: 4px; }
}
@media (max-width: 560px) {
  .shop-meta { flex-direction: column-reverse; align-items: stretch; padding-block: 20px; }
  .shop-search { flex-basis: auto; }
  .shop-search__input { font-size: 16px; } /* 16px: no zoom on iOS */
}

/* ---------- category page ---------- */
/* Text-only header: no illustration, the category name carries the section. */
.cat-hero { padding-block: clamp(8px, 2vw, 24px) clamp(48px, 6vw, 88px); }
/* (content from the top of its band: the title stays where it is when the description arrives with the catalogue, and
   sits at the same height in every category whatever the length of its description) */
.cat-hero__body {
  display: grid; gap: clamp(18px, 2vw, 26px); justify-items: start; align-content: start;
  min-height: clamp(220px, 26vw, 340px); padding-block: clamp(28px, 4vw, 56px);
  max-width: 820px;
}
.cat-hero__body .lead { max-width: 58ch; }

.other-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.other-cat { display: grid; gap: 14px; }
.other-cat__media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.other-cat__media .ph__label { display: none; }
.other-cat__media > img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* the category's cover, cropped like on the home page */
.other-cat__media > * { transition: transform .9s var(--ease); }
.other-cat:hover .other-cat__media > * { transform: scale(1.03); }
.other-cat__name { font-size: 1.1rem; font-weight: 400; }
.other-cat:hover .other-cat__name { color: var(--brown); }

/* ---------- product detail ---------- */
.pdp {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding-bottom: var(--section);
}
.pdp__gallery { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 12px; }
.pdp__main { position: relative; aspect-ratio: 1; background: var(--paper); overflow: hidden; }
.pdp__main .badges { top: 18px; inset-inline-start: 18px; }
/* discount ribbon on the large product photo: same ribbon as the cards, a size up */
.pdp__main .ribbon { width: 150px; height: 150px; }
.pdp__main .ribbon > span { top: 32px; right: -46px; width: 212px; padding: 10px 0; font-size: 15px; }
[dir="rtl"] .pdp__main .ribbon > span { left: -46px; }
@media (max-width: 760px) {
  .pdp__main .ribbon { width: 104px; height: 104px; }
  .pdp__main .ribbon > span { top: 22px; right: -34px; width: 150px; padding: 7px 0; font-size: 12px; }
  [dir="rtl"] .pdp__main .ribbon > span { left: -34px; }
}
.pdp__price .price-old { font-size: 1rem; }
.pdp__specs dd a { border-bottom: 1px solid var(--border-strong); }
.pdp__main .ph--paper img { max-width: 62%; max-height: 62%; }
.pdp__main .ph__mark { width: 26%; }
.pdp__main .ph__logo { width: 42%; }
.pdp__thumbs { display: flex; gap: 10px; }
.pdp__thumb { width: 84px; aspect-ratio: 1; background: var(--paper); border: 1px solid transparent; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--dark); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }

.pdp__info { display: grid; gap: 22px; padding-top: 8px; }
.pdp__info > .label a:hover { color: var(--dark); }
.pdp__title { font-size: clamp(2.1rem, 3.8vw, 3.3rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.08; }
.pdp__price { font-size: 1.35rem; font-weight: 500; }
.pdp__weight { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: -6px; }
.pdp__weight .price-unit { font-size: 1em; }
.pdp__amount { display: contents; }
.buy .qty--weight output { min-width: 72px; font-size: 15px; }
.pdp__desc { color: var(--muted); font-size: 1.02rem; max-width: 46ch; }

.buy { display: grid; gap: 14px; padding-top: 8px; }
.buy__qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.buy .qty { height: 50px; }
.buy .qty button { width: 46px; }
.buy .qty input { width: 48px; }

.pdp__assure { display: grid; gap: 8px; font-size: 13px; color: var(--brown); }
.pdp__assure li { display: flex; align-items: center; gap: 12px; }
.pdp__assure li::before { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex: 0 0 auto; }

.pdp__specs { border-top: 1px solid var(--border); padding-top: 22px; display: grid; gap: 14px; }
.pdp__specs dl > div {
  display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 16px;
  padding-block: 12px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.pdp__specs dt { color: var(--muted); }

.notfound { display: grid; justify-items: center; gap: 24px; text-align: center; }

/* ---------- about ---------- */
/* consecutive blocks share one gap instead of stacking two paddings */
.about-block + .about-block { padding-top: 0; }

/* image | text */
.about-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.about-split__media { position: relative; }
.about-split__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 620px; object-fit: cover; }
.about-split__media--square img { aspect-ratio: 1; max-height: none; }
.about-split--reverse .about-split__media { order: 2; }

/* Instagram Reel card (À propos): same size and corners as the picture it replaces (4:5, 620px max).
   The player is placed by initReels() (js/app.js) so the video covers the whole card:
   Instagram's header, footer and side bars stay outside the rounded frame. */
.about-reel {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; aspect-ratio: 4 / 5; max-height: 620px;
  border-radius: var(--radius); background: #111111;
}
/* Category Reel (BIO): between the category tabs and the products — text + Instagram's player
   in a large rounded frame (.about-reel: the player covers the frame, cover image as fallback) */
.cat-reel { padding-block: clamp(32px, 4.5vw, 64px) clamp(12px, 2vw, 28px); }
.cat-reel__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(28px, 6vw, 96px); align-items: center;
}
.cat-reel__body { display: grid; gap: 18px; justify-items: start; max-width: 520px; }
.about-reel.cat-reel__media { margin: 0; border-radius: 24px; }
@media (max-width: 760px) {
  .cat-reel__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about-reel.cat-reel__media { width: min(100%, 420px); justify-self: center; }
}

/* wide card (« La boutique »): same 16:10 frame as the picture it replaces; the caption stays on top */
.about-reel--wide { aspect-ratio: 16 / 10; max-height: none; }
.about-reel .media-caption { z-index: 2; pointer-events: none; }

/* square card (« Du fruit sec au coffret »): same 1:1 frame as the picture it replaces */
.about-reel--square { aspect-ratio: 1; max-height: none; }
.about-reel__poster { position: absolute; inset: 0; display: block; }
.about-reel .about-reel__poster img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: center; border-radius: 0; }
.about-reel__player { position: absolute; border: 0; display: block; background: transparent; opacity: 0; transition: opacity .4s var(--ease); }
.about-reel__player.is-ready { opacity: 1; }

/* « Contenus du site » (admin): the media of a section fills its frame, whatever the frame (Reel card,
   photo block, social tile) — image or video cropped like the photos, other sites' players inside */
.cms-media, [data-slot] .cms-media { /* (over the photo rules of these blocks: .about-split__media img…) */
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto;
  object-fit: cover; object-position: center; display: block; border-radius: 0;
}
video.cms-media { background: #111111; }
.custom-box__media .cms-media { object-position: 50% 55%; }
/* a section with no media today (admin: nothing active): its text alone, on the whole width */
.story-home__inner:has(> [data-slot][hidden]), .about-split:has(> [data-slot][hidden]),
.store:has(> [data-slot][hidden]), .custom-box__inner:has(> [data-slot][hidden]) { grid-template-columns: minmax(0, 1fr); } /* same framing as the original gift-box photo */
.cms-frame { position: absolute; inset: 0; overflow: hidden; background: #111111; }
.cms-frame .about-reel__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cms-frame__icon { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(247, 244, 237, .8); }
.cms-frame__icon svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.cms-frame .cms-embed { inset: 0; width: 100%; height: 100%; }
/* « Regarder sur Instagram » on a video played by the site itself: discreet, top corner (the player's controls are at the bottom) */
.cms-source {
  position: absolute; z-index: 2; inset-block-start: 12px; inset-inline-end: 12px;
  padding: 7px 12px; border-radius: 999px; background: rgba(20, 18, 16, .62); color: #F7F4ED;
  font-size: 12px; letter-spacing: .02em; line-height: 1.2; text-decoration: none; transition: background-color .2s;
}
.cms-source:hover, .cms-source:focus-visible { background: rgba(20, 18, 16, .85); }

/* home « Bannière de campagne » (Ramadan, Aïd, soldes…): the image at its own proportions, rounded like the other blocks */
.campaign { padding-block: clamp(20px, 3vw, 40px) 0; }
/* The banner (Contenus du site › « Bannière de campagne »), whatever picture is chosen: shown whole, at its own
   proportions, centred — as wide as the page allows but never wider than the picture itself, never taller than
   --campaign-h (the width shrinks instead: nothing is cut). The frame takes the picture's size. */
.campaign { --campaign-h: min(640px, 82svh); }
.campaign__media {
  position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper);
  width: fit-content; max-width: 100%; margin-inline: auto;
}
.campaign__img { display: block; width: auto; max-width: 100%; height: auto; max-height: var(--campaign-h); }
/* a video file: the width of the page, its picture whole inside (bands on its sides if needed) */
.campaign__media--video { width: 100%; }
video.campaign__img { width: 100%; object-fit: contain; background: #111111; }
/* another site's player (16:9): as large as the page allows within --campaign-h */
.campaign__media--frame { width: min(100%, var(--campaign-h) * 16 / 9); aspect-ratio: 16 / 9; }
.campaign__link { display: block; }
.campaign__cta { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; z-index: 2; padding: 10px 16px; background: rgba(247, 244, 237, .92); }
.about-split__body { display: grid; gap: 20px; justify-items: start; }
.about-split__body .text + .text { margin-top: -4px; }
.about-split__body .stats { margin-top: 10px; }
.about-split__body .link-arrow { margin-top: 6px; }


/* la boutique */
.store {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); /* the Reel ~58 %, the text ~42 % */
  gap: clamp(24px, 3vw, 44px); align-items: center;
  padding: clamp(20px, 3vw, 40px);
  background:
    linear-gradient(rgba(239, 232, 218, .9), rgba(239, 232, 218, .9)),
    var(--cream) url("../assets/bg-desktop.webp") center / cover no-repeat;
}
.store > * { position: relative; }
.store__media.about-reel--wide { aspect-ratio: 4 / 3; } /* taller than the other wide Reels: shows more of this vertical video */
.store__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 88%; }
.store__body { display: grid; gap: 18px; justify-items: start; padding-block: 12px; }
.store__body .text { color: var(--brown); }
.store__info { display: grid; width: 100%; border-top: 1px solid var(--border); }
.store__info li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--border); }
.store__info svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.3; margin-top: 3px; }
.store__info .label { margin-bottom: 2px; }
.store__info a { border-bottom: 1px solid var(--border-strong); }
.store__info a:hover { color: var(--brown); }
.store__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; }

.quote {
  text-align: center; display: grid; justify-items: center; gap: 24px;
  padding-block: clamp(56px, 7vw, 96px);
}
.quote blockquote {
  margin: 0; max-width: 24ch;
  font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.2;
}
html[lang="ar"] .quote blockquote { font-family: var(--arabic-display); line-height: 1.6; }

/* ---------- contact ---------- */
/* coordinates ~40 % | form ~60 %, both centred on the same line */
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.contact-info { display: grid; gap: clamp(22px, 2.5vw, 32px); }
.contact-info__title, .contact-form__title {
  font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; color: var(--dark);
}
html[lang="ar"] .contact-info__title, html[lang="ar"] .contact-form__title { font-family: var(--arabic-display); letter-spacing: 0; line-height: 1.4; }
.contact-list { display: grid; }
.contact-item { display: grid; grid-template-columns: 48px 1fr; gap: 22px; align-items: start; padding-block: clamp(22px, 2.4vw, 30px); border-bottom: 1px solid var(--border); }
.contact-item:first-child { border-top: 1px solid var(--border); }
/* contact icons (line icons after Lucide, ISC licence): dark brown strokes for contrast on the cream page,
   a thin muted-gold ring on a lighter disc */
.contact-item__icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px;
  border: 1px solid rgba(185, 154, 93, .7); border-radius: 50%; background: rgba(255, 255, 255, .55);
  color: var(--brown); transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.contact-item__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-item:hover .contact-item__icon { border-color: #B99A5D; background: #fff; }
.contact-item__body { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.contact-item .label { font-size: 12px; letter-spacing: .2em; color: var(--brown); }
.contact-item__value { font-size: clamp(1.15rem, 1.55vw, 1.4rem); font-weight: 400; letter-spacing: -.01em; color: var(--dark); overflow-wrap: anywhere; }
a.contact-item__value:hover { color: var(--brown); }
.contact-item__action {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: color .25s var(--ease);
}
.contact-item__action:hover { color: var(--dark); }
html[lang="ar"] .contact-item .label, html[lang="ar"] .contact-item__action { letter-spacing: 0; font-size: 13px; }

/* the form: a light paper sheet with a faint neutral edge, not a heavy card */
.contact-form {
  position: relative; gap: 30px;
  padding: clamp(28px, 4vw, 56px);
  background: rgba(251, 250, 246, .78);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.contact-form__head { display: grid; justify-items: start; gap: 16px; }
.contact-form .form__row { gap: 30px; }
.contact-form .field { gap: 10px; }
.contact-form .field label { font-size: 12px; color: var(--brown); }
.contact-form .field input, .contact-form .field textarea { padding: 18px 0; font-size: 17px; }
.contact-form .field textarea { min-height: 170px; }
.contact-form .form-status:empty { display: none; }
.contact-form__submit .btn { min-height: 58px; padding: 18px 48px; font-size: 13px; }

.form { display: grid; gap: 22px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
html[lang="ar"] .field label { letter-spacing: 0; font-size: 13px; }
.field input, .field textarea {
  width: 100%; padding: 14px 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0;
  font-size: 16px; transition: border-color .25s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #9E3B2B; }
.form-status { font-size: 14px; min-height: 1.4em; }
.form-status.is-error { color: #9E3B2B; }
.form-status.is-success { color: var(--brown); }
.order-note { padding: 16px 18px; background: var(--cream); font-size: 14px; color: var(--brown); border-inline-start: 2px solid var(--gold); }

/* =========================================================
   Stock states (catalogue from the admin panel)
   ========================================================= */
.catalog-error { margin-block: 24px; padding: 16px 18px; background: var(--cream); font-size: 14px; color: var(--brown); border-inline-start: 2px solid var(--gold); }
.card.is-soldout .card__media { opacity: .55; }
.card__size--out { color: #9E3B2B; }
.card__add:disabled { cursor: default; color: var(--muted); border-color: var(--border); background: transparent; }
.buy__out { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9E3B2B; }
.line__out { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9E3B2B; }
html[lang="ar"] .buy__out, html[lang="ar"] .line__out { letter-spacing: 0; }
/* « Plus que 4 pièces disponibles ! » (« Disponibilité affichée au client », set in the admin) */
.avail-few { display: flex; align-items: baseline; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.35; color: var(--brown); }
.avail-few::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-1px); }
.pdp__avail { font-size: 13px; padding-top: 4px; }
html[lang="ar"] .avail-few { letter-spacing: 0; }
@media (max-width: 560px) { .card__avail { font-size: 11px; gap: 6px; } }

/* =========================================================
   Checkout
   ========================================================= */
.page-hero--compact { padding-block: clamp(40px, 5vw, 64px) clamp(8px, 1vw, 12px); }
/* one column: 01 order details → 02 contact → 03 delivery address → confirm */
.checkout { display: grid; gap: clamp(44px, 5vw, 64px); max-width: 780px; margin-inline: auto; }
.checkout__step { display: grid; gap: 22px; margin: 0; padding: 0; border: 0; min-width: 0; }
.checkout__legend {
  display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 0 0 16px; margin: 0 0 4px;
  font-family: var(--brandfont); font-size: 13px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--dark);
  border-bottom: 1px solid var(--border);
}
.checkout__num { font-size: 12px; letter-spacing: .16em; color: var(--gold); }
html[lang="ar"] .checkout__legend { font-family: var(--arabic); letter-spacing: 0; font-size: 15px; }
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* 01 — the order, like a receipt */
.order-card { background: var(--offwhite); border: 1px solid var(--border); }
.order-lines { list-style: none; margin: 0; padding: 0; }
.order-line {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 18px clamp(16px, 2.5vw, 26px); border-bottom: 1px solid var(--border);
}
.order-line__media { display: block; width: 72px; aspect-ratio: 1; overflow: hidden; background: var(--paper); border: 1px solid var(--border); }
.order-line__media img, .order-line__media .ph { width: 100%; height: 100%; object-fit: cover; }
.order-line__media--box { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.order-line__media--box > span { display: block; overflow: hidden; background: var(--paper); }
.order-line__body { display: grid; gap: 6px; min-width: 0; }
.order-line__name { font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.order-line__parts { font-size: 12px; color: var(--muted); }
.order-line__details { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }
.order-line__detail > span:first-child { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-inline-end: 4px; }
html[lang="ar"] .order-line__detail > span:first-child { letter-spacing: 0; font-size: 12px; }
.order-line__detail .price { font-size: 13px; font-weight: 400; }
.order-line__total { font-size: 15px; font-weight: 600; white-space: nowrap; }
.order-card__totals { display: grid; gap: 10px; padding: 18px clamp(16px, 2.5vw, 26px) 22px; }
.checkout__edit { justify-self: end; }

/* 02 / 03 — fields in fine-lined boxes */
.checkout .field { gap: 10px; }
.checkout .field input, .checkout .field textarea, .checkout .field select, .checkout .phone-input {
  width: 100%; padding: 14px 16px; background: var(--offwhite); border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: 16px; color: var(--dark); transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.checkout .field textarea { min-height: 96px; }
.checkout .field input:focus, .checkout .field textarea:focus, .checkout .field select:focus, .checkout .phone-input:focus-within {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 155, 99, .14);
}
.checkout .field select {
  padding-inline-end: 44px; appearance: none; cursor: pointer;
  background: var(--offwhite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B6F63' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 16px;
}
[dir="rtl"] .checkout .field select { background-position: left 16px center; }
/* phone: +216 shown before the number, the visitor types only the 8 digits */
.checkout .phone-input { display: flex; align-items: stretch; padding: 0; }
.phone-input__prefix { display: flex; align-items: center; padding: 0 14px 0 16px; border-inline-end: 1px solid var(--border); font-size: 16px; color: var(--muted); }
.checkout .phone-input input { border: 0; background: transparent; box-shadow: none; }
.checkout .field.is-invalid input, .checkout .field.is-invalid textarea, .checkout .field.is-invalid select, .checkout .field.is-invalid .phone-input { border-color: #9E3B2B; }
.field__error { font-size: 13px; color: #9E3B2B; }

/* « Utiliser l'emplacement actuel » under « Adresse complète * » (the map: .locpick) */
.locate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.locate__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--dark); cursor: pointer; transition: border-color .2s, background-color .2s;
}
.locate__btn:hover, .locate__btn:focus-visible { border-color: var(--gold); background: rgba(184, 155, 99, .08); }
.locate__btn svg { width: 17px; height: 17px; fill: none; stroke: var(--brown); stroke-width: 1.5; }
.locate__note { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.locate__note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3F6B4A; }
.locate__remove { padding: 2px 0; border: 0; background: none; font: inherit; color: var(--brown); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* « Où devons-nous livrer ? »: map window — centred on a large screen, the whole screen on a phone */
.locpick { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .25s var(--ease); }
.locpick.is-open { opacity: 1; }
.locpick__scrim { position: absolute; inset: 0; background: rgba(20, 18, 16, .55); }
.locpick__panel {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(680px, 100%); height: min(760px, 100%); overflow: hidden;
  background: var(--ivory); border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(20, 18, 16, .6);
}
.locpick__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 16px 22px; border-bottom: 1px solid var(--border); }
.locpick__title { font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; }
.locpick__close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--dark); cursor: pointer; }
.locpick__close:hover { background: rgba(20, 18, 16, .06); }
.locpick__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.locpick__map { position: relative; min-height: 0; background: #E9E4D8; }
.locpick__canvas { position: absolute; inset: 0; }
.locpick.is-nomap .locpick__map { min-height: 120px; }
/* the pin stays in the middle; the map moves under it */
.locpick__pin { position: absolute; z-index: 500; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -100%); pointer-events: none; color: var(--dark); filter: drop-shadow(0 3px 4px rgba(20, 18, 16, .35)); }
.locpick__pin svg { width: 100%; height: 100%; fill: var(--gold); stroke: var(--dark); stroke-width: 1.2; }
.locpick__pin svg circle { fill: var(--ivory); }
.locpick.is-nomap .locpick__pin { display: none; }
.locpick__locate {
  position: absolute; z-index: 500; inset-inline: 50% auto; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; white-space: nowrap;
  border: 0; border-radius: 999px; background: var(--dark); color: var(--ivory); font: inherit; font-size: 14px; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(20, 18, 16, .7);
}
[dir="rtl"] .locpick__locate { transform: translateX(50%); }
.locpick__locate:disabled { opacity: .7; cursor: progress; }
.locpick__locate svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.locpick.is-nomap .locpick__locate { position: static; transform: none; margin: 16px auto; display: flex; width: fit-content; }
.locpick__foot { display: grid; gap: 10px; padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.locpick__status { font-size: 13px; color: var(--muted); min-height: 1.2em; }
.locpick__status.is-error { color: #9E3B2B; }
.locpick__address { font-size: 15px; line-height: 1.45; color: var(--dark); min-height: 1.45em; overflow-wrap: anywhere; }
.locpick .leaflet-container { font: inherit; background: #E9E4D8; }
@media (max-width: 760px) {
  .locpick { padding: 0; }
  .locpick__panel { width: 100%; height: 100%; border-radius: 0; }
}

/* confirm */
.checkout__confirm { display: grid; gap: 14px; justify-items: center; text-align: center; padding-top: 8px; }
.checkout__pay { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px; font-size: 14px; }
.checkout__missing { font-size: 13px; color: var(--muted); }
.checkout__submit { max-width: 440px; }
.checkout__submit.is-inactive, .checkout__submit:disabled { opacity: .38; cursor: not-allowed; }
.checkout__submit.is-inactive:hover, .checkout__submit:disabled:hover { background: var(--dark); border-color: var(--dark); }
.checkout__confirm .form-status:empty { display: none; }
/* « Échec de la commande »: the order was sent and not saved (cart and form kept) */
.order-failed {
  display: grid; gap: 8px; justify-items: center; width: 100%; max-width: 440px; padding: 18px 20px;
  border: 1px solid rgba(158, 59, 43, .35); border-radius: var(--radius, 6px); background: rgba(158, 59, 43, .05); text-align: center;
}
.order-failed__title { font-family: var(--brandfont); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #9E3B2B; }
html[lang="ar"] .order-failed__title { letter-spacing: 0; font-size: 14px; }
.order-failed__text { font-size: 14px; line-height: 1.55; color: var(--dark); }
.order-failed__wa { margin-top: 2px; }

.summary__meta { font-size: 12px; color: var(--muted); }
.order-done__wa { display: grid; gap: 8px; justify-items: center; max-width: 360px; width: 100%; margin-inline: auto; }
.summary__lines { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.summary__line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
.summary__name { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.summary__line .price { flex: 0 0 auto; }
.summary__name small { font-size: 12px; color: var(--muted); }
.summary__qty { font-size: 12px; color: var(--muted); }
.summary__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.summary__row--total { padding-top: 12px; border-top: 1px solid var(--border); font-size: 15px; }
.summary__row--total strong { font-size: 1.25rem; font-weight: 500; }
.summary__hint { font-size: 12px; color: var(--muted); }
.summary__pending { color: var(--muted); text-align: end; }
/* « Informations de livraison » written in the admin panel (cart drawer, checkout summary): its line breaks kept */
.delivery-info { font-size: 12.5px; line-height: 1.55; color: var(--muted); white-space: pre-line; overflow-wrap: break-word; } /* delivery before the Ville is chosen: « Selon la ville » */
.checkout-empty { display: grid; justify-items: center; gap: 22px; padding-block: 40px; text-align: center; color: var(--muted); }

.order-done { display: grid; gap: 18px; max-width: 640px; margin-inline: auto; text-align: center; }
.order-done .eyebrow { justify-content: center; }
.order-done .lead { margin-inline: auto; }
.order-done__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 0; border-block: 1px solid var(--border); }
.order-done__meta div { display: grid; gap: 4px; padding: 16px 8px; }
.order-done__meta div + div { border-inline-start: 1px solid var(--border); }
.order-done__meta dt { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.order-done__meta dd { margin: 0; font-size: 15px; font-weight: 500; }
.order-done__cancelled { color: #9E3B2B; font-weight: 600; }
.order-done__lines, .order-done .summary__row { text-align: start; }
.order-done .btn { justify-self: center; margin-top: 8px; }
/* « Commande envoyée ! »: shown only once the server has saved the order */
.order-done__status { display: grid; gap: 10px; justify-items: center; padding-bottom: 6px; }
.order-done__check { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); }
.order-done__check svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.order-done__number { font-size: 15px; color: var(--muted); }
.order-done__number strong { color: var(--dark); font-weight: 600; letter-spacing: .04em; }
.order-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 8px 0; list-style: none; counter-reset: step; }
.order-steps li { position: relative; display: grid; justify-items: center; gap: 8px; font-size: 12px; color: var(--muted); counter-increment: step; }
.order-steps li::before {
  content: counter(step); display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--border-strong); border-radius: 50%; font-size: 12px; background: var(--ivory);
}
.order-steps li.is-done::before { content: "✓"; background: var(--gold); border-color: var(--gold); color: var(--dark); }
.order-steps li.is-current { color: var(--dark); font-weight: 600; }
.order-steps li.is-current::before { background: var(--dark); border-color: var(--dark); color: var(--ivory); }

@media (max-width: 560px) {
  .order-line { grid-template-columns: 60px minmax(0, 1fr); gap: 6px 14px; align-items: start; }
  .order-line__media { width: 60px; grid-row: span 2; }
  .order-line__total { grid-column: 2; }
  .checkout__edit { justify-self: center; }
  .checkout__submit { max-width: none; }
  .order-done__meta { grid-template-columns: minmax(0, 1fr); }
  .order-done__meta div + div { border-inline-start: 0; border-top: 1px solid var(--border); }
  .order-steps { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .order-steps li { grid-template-columns: 28px 1fr; align-items: center; justify-items: start; }
}

.map-section { padding-bottom: var(--section); }
/* store card | live Google map */
.map {
  position: relative;
  display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
  min-height: clamp(340px, 30vw, 420px);
  background:
    linear-gradient(rgba(239, 232, 218, .86), rgba(239, 232, 218, .86)),
    url("../assets/bg-desktop.webp") center / cover;
  border: 1px solid var(--border);
  overflow: hidden;
}
.map__pin {
  position: relative; display: grid; place-content: center; justify-items: center; gap: 10px;
  text-align: center; padding: 32px 24px;
}
.map__pin svg { width: 30px; height: 30px; fill: none; stroke: var(--brown); stroke-width: 1.2; margin-bottom: 4px; }
.map__name { font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; color: var(--dark); }
.map__hours { font-size: 14px; color: var(--muted); }
.map__pin .link-arrow { margin-top: 10px; }
.map__frame {
  display: block; width: 100%; height: 100%; min-height: inherit; border: 0;
  border-inline-start: 1px solid var(--border);
  background: var(--paper);
  filter: grayscale(.35) sepia(.12);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  position: relative;
  background: var(--dark);
  color: rgba(247, 244, 237, .72);
  padding-top: clamp(48px, 6vw, 72px);
  overflow: hidden;
  font-size: 14px;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/bg-desktop.webp") center / cover no-repeat;
  filter: invert(1) sepia(.4);
  opacity: .045;
  pointer-events: none;
}
.site-footer .container { position: relative; }
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 32px var(--gap);
  padding-bottom: clamp(32px, 4vw, 48px);
}
.footer__brand { display: grid; gap: 18px; justify-items: start; align-content: start; }
.footer__brand img { width: 150px; height: auto; }
.footer__brand p { max-width: 34ch; }
.socials { display: flex; gap: 6px; margin-inline-start: -10px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ivory); opacity: .75; transition: opacity .2s, color .2s; }
.socials a:hover { opacity: 1; color: var(--gold); }
.socials svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.socials a[aria-label="Facebook"] svg, .socials a[aria-label="TikTok"] svg { fill: currentColor; stroke: none; }
.socials a[aria-label="TikTok"] svg { width: 17px; height: 17px; }

.footer__col { display: grid; gap: 12px; align-content: start; }
.footer__col h3 {
  margin-bottom: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.footer__col a { transition: color .2s; width: fit-content; }
.footer__col a:hover { color: var(--ivory); }
.ltr-inline { unicode-bidi: isolate; }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  padding-block: 24px 28px;
  border-top: 1px solid rgba(247, 244, 237, .12);
  font-size: 12px; color: rgba(247, 244, 237, .5);
}
.footer__credit { letter-spacing: .02em; }
.footer__credit a { color: rgba(247, 244, 237, .7); text-decoration: none; transition: color .2s; }
.footer__credit a:hover { color: var(--ivory); }
.footer__heart { color: #e25555; display: inline-block; animation: heartbeat 1.2s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.2); } 28% { transform: scale(1); } 42% { transform: scale(1.15); } 56% { transform: scale(1); } }
.lang-switch--footer .lang-btn { color: rgba(247, 244, 237, .5); }
.lang-switch--footer .lang-btn:hover, .lang-switch--footer .lang-btn[aria-pressed="true"] { color: var(--ivory); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   Custom gift box builder (Coffrets › Coffrets personnalisés)
   ========================================================= */
.box-wrap { grid-column: 1 / -1; }
.box {
  position: relative;
  padding: clamp(32px, 4.5vw, 64px) clamp(16px, 4vw, 56px);
  background:
    linear-gradient(rgba(239, 232, 218, .86), rgba(239, 232, 218, .86)),
    var(--cream) url("../assets/bg-desktop.webp") center / cover no-repeat;
}
.box > * { position: relative; }
.box__head { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: clamp(22px, 3vw, 40px); }
.box__head .lead { text-align: center; max-width: 52ch; }

/* slots on the left, the summary beside them (wide screens) or below (phones, tablets) */
.box__layout { display: grid; gap: clamp(18px, 2.6vw, 36px); max-width: 1080px; margin-inline: auto; align-items: start; }

/* ---- the 4 slots: always 2 × 2 ---- */
.box__slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin: 0; padding: 0; list-style: none; }
.slot {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--offwhite); border: 1px solid var(--border);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.slot:hover { border-color: var(--border-strong); }
.slot.is-target { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 155, 99, .22); }
.slot__num {
  position: absolute; top: 10px; inset-inline-start: 12px; z-index: 1;
  font-family: var(--brandfont); font-size: 12px; letter-spacing: .22em; color: var(--gold);
}
/* empty slot: the whole tile is one button */
.slot__empty {
  position: relative; flex: 1; width: 100%;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  aspect-ratio: 10 / 11; padding: 22px 12px;          /* was 3 / 4: about 15–18 % lower */
  text-align: center; color: var(--brown); cursor: pointer;
}
.slot__empty:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.slot__empty .slot__num { top: 16px; inset-inline-start: 18px; }
.slot__plus {
  display: grid; place-items: center;
  width: 48px; height: 48px; border: 1px solid var(--gold); border-radius: 50%;
  font-size: 22px; font-weight: 300; line-height: 1; color: var(--gold);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.slot__empty:hover .slot__plus, .slot__empty:focus-visible .slot__plus { background: var(--dark); border-color: var(--dark); color: var(--ivory); transform: scale(1.06); }
.slot__cta { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
/* filled slot: photo (a button: replace), name, price and format, actions */
.slot__media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); cursor: pointer; }
.slot__media > :not(.slot__num) { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.slot__media:hover > :not(.slot__num) { transform: scale(1.03); }
.slot__media:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.slot__media .slot__num { top: 8px; padding: 3px 7px; background: rgba(247, 244, 237, .92); border-radius: var(--radius-sm); }
.slot__body { display: flex; flex-direction: column; flex: 1; gap: 4px; min-width: 0; padding: 12px 14px 12px; }
.slot__name { font-size: 14.5px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slot__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; }
.slot__price .card__price { margin: 0; }
.slot__format { font-size: 12px; color: var(--muted); }
.slot__actions { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: auto; padding-top: 6px; }
.slot__actions .link-btn { padding-block: 6px; }

/* ---- summary ---- */
.box__summary {
  display: grid; gap: 12px; min-width: 0;
  padding: clamp(16px, 2vw, 24px); background: rgba(250, 248, 243, .92); border: 1px solid var(--border);
}
.box__progress { display: grid; gap: 10px; }
.box__count { font-size: 14px; color: var(--muted); }
.box__count strong {
  display: inline-block; margin-inline-end: 6px;
  font-family: var(--brandfont); font-size: 1.5rem; font-weight: 300; letter-spacing: .08em; color: var(--dark);
}
.box__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.box__bar i { height: 3px; border-radius: 2px; background: var(--border-strong); transition: background-color .4s var(--ease); }
.box__bar i.is-on { background: var(--gold); }
.box__lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-strong); }
.box__line {
  display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding-block: 8px; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.box__line.is-empty { display: block; padding: 0; }
.box__line-pick {
  display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); align-items: center; gap: 10px;
  width: 100%; padding-block: 8px; text-align: start; color: var(--taupe); cursor: pointer;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.box__line-pick:hover, .box__line-pick:focus-visible { color: var(--dark); background: rgba(184, 155, 99, .08); }
.box__line-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.box__lnum { font-family: var(--brandfont); font-size: 12px; letter-spacing: .16em; color: var(--gold); }
.box__lthumb { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper); }
.box__lthumb > * { width: 100%; height: 100%; object-fit: cover; }
.box__lthumb .ph__label { display: none; }
.box__lthumb--empty { display: grid; place-items: center; border: 1px dashed var(--border-strong); background: transparent; color: var(--gold); font-size: 18px; font-weight: 300; }
.box__lname { min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.box__lname small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.is-empty .box__lname { font-style: italic; }
.box__lprice { font-weight: 500; white-space: nowrap; }
.box__lactions { display: flex; }
.box__icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--muted);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.box__icon:hover, .box__icon:focus-visible { color: var(--dark); background: rgba(184, 155, 99, .14); }
.box__icon:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.box__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.box__checkout { display: grid; gap: 10px; padding-top: 4px; }
.box__total, .box__dock-info { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.box__total > span, .box__dock-total { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.box__total em, .box__dock-total em { font-style: normal; letter-spacing: .08em; color: var(--gold); margin-inline-start: 6px; }
.box__total strong { font-size: 1.6rem; font-weight: 500; line-height: 1.1; }
/* products and « Frais de coffret » above the total (when the admin sets a fee) */
.box__amounts { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.box__amounts > div { display: flex; justify-content: space-between; gap: 12px; }
.box__amounts .price { color: var(--dark); white-space: nowrap; }
.box__dock-fee { display: block; font-size: 11px; color: var(--muted); }
.box__note { text-align: center; font-size: 13px; color: var(--brown); }
.box__note--ok { color: var(--dark); }
.box__note--ok::before { content: "✓ "; color: var(--gold); font-weight: 700; }
.box__note .link-btn { font-size: 10.5px; letter-spacing: .12em; padding-block: 4px; }
.box .btn:disabled { opacity: .35; cursor: not-allowed; }
.box .btn:disabled:hover { background: var(--dark); border-color: var(--dark); }
.box .btn.is-added:disabled { opacity: 1; background: var(--gold); border-color: var(--gold); color: var(--dark); }
.box.is-complete .box__cta:not(:disabled) { box-shadow: 0 12px 26px -16px rgba(42, 29, 22, .7); animation: box-ready .5s var(--ease); }
@keyframes box-ready { from { transform: scale(.98); } to { transform: none; } }
.box__fine { text-align: center; font-size: 12px; color: var(--muted); }
/* phone / tablet bar: shown only when the summary sits below the slots (see the media queries) */
.box__dock { display: none; }

@media (min-width: 900px) {
  .box__layout { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); }
  .box__summary { position: sticky; top: calc(var(--header-h) + 76px); } /* below the sticky tabs */
}
@media (max-width: 899px) {
  .box__layout { max-width: 560px; }
  .box__checkout { display: none; }     /* the dock below takes its place */
  .box__dock {
    display: grid; gap: 8px; padding: 12px clamp(14px, 3vw, 20px) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--offwhite); border: 1px solid var(--border);
    margin-top: calc(-1 * clamp(18px, 2.6vw, 36px) - 1px);   /* joined to the summary card */
  }
  .box__dock-info strong { font-size: 1.35rem; font-weight: 500; }
  .box__dock .box__note { font-size: 12.5px; }
  /* while products are being chosen, the total and the button stay in view (within the builder only) */
  .box.has-items .box__dock { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -12px 24px -20px rgba(42, 29, 22, .5); }
}

html[lang="ar"] .slot__name, html[lang="ar"] .picker__title {
  font-family: var(--arabic-display); letter-spacing: 0; line-height: 1.4;
}
html[lang="ar"] .slot__cta, html[lang="ar"] .box__total span {
  font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none;
}

/* product picker */
.picker { position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); }
.picker__scrim {
  position: absolute; inset: 0; background: rgba(20, 18, 16, .45);
  opacity: 0; transition: opacity .3s var(--ease);
}
.picker__panel {
  position: relative;
  width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--ivory);
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.picker.is-open .picker__scrim { opacity: 1; }
.picker.is-open .picker__panel { opacity: 1; transform: none; }
.picker__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px clamp(18px, 3vw, 32px) 16px; border-bottom: 1px solid var(--border);
}
.picker__head .label { color: var(--gold); }
.picker__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 300; letter-spacing: -.01em; line-height: 1.2; }
.picker__close { margin-inline-end: -10px; }
.picker__tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 14px clamp(18px, 3vw, 32px); border-bottom: 1px solid var(--border);
}
.picker__filters { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.picker__filters::-webkit-scrollbar { display: none; }
.picker__search {
  flex: 0 1 260px; min-width: 0; height: 42px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--offwhite); font-size: 14px;
}
.picker__search:focus { outline: none; border-color: var(--gold); }
.picker__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px clamp(18px, 3vw, 32px) 32px; }
.picker__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px var(--gap); }
.pick .card__add:disabled { cursor: default; color: var(--muted); border-color: var(--border); background: transparent; }
.pick.is-used .card__media { opacity: .5; }

/* cart line for a custom box: 2 × 2 mosaic of its products */
.line__media--box { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); align-self: start; }
.line__media--box > span { display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.line__box { margin-top: 6px; display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.line__box li { display: flex; gap: 8px; }
.line__box li::before { content: ""; flex: 0 0 auto; width: 4px; height: 4px; margin-top: .65em; background: var(--gold); transform: rotate(45deg); }
.line__box a:hover { color: var(--dark); }
/* custom box with a fee: its products, the fee, the box total (same look as .line__price) */
.line__fees { margin-top: 6px; display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.line__fees > div { display: flex; justify-content: space-between; gap: 12px; }
.line__fees dd { margin: 0; white-space: nowrap; }
.line__fees .price { color: var(--dark); font-size: 13px; }
.line__fees-total { padding-top: 3px; color: var(--dark); }
.line__fees-total .price { font-size: 14px; font-weight: 600; }

.pick__format { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 960px) {
  .picker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .box { padding: 26px 12px 18px; }
  .box::before { inset: 6px; }
  .box__head { gap: 8px; margin-bottom: 18px; }
  .box__head .lead { font-size: 14.5px; }
  .box__slots { gap: 10px; }
  .slot__empty { padding: 16px 8px; gap: 10px; }
  .slot__empty .slot__num { top: 12px; inset-inline-start: 14px; }
  .slot__plus { width: 44px; height: 44px; font-size: 20px; }
  .slot__cta { font-size: 10px; letter-spacing: .12em; }
  .slot__body { padding: 10px 10px 8px; gap: 3px; }
  .slot__body .label { display: none; }            /* the name and the price are what matter on a phone */
  .slot__name { font-size: 13.5px; }
  .slot__price { font-size: 13px; }
  .slot__actions { gap: 0 12px; padding-top: 2px; }
  .slot__actions .link-btn { font-size: 10px; letter-spacing: .1em; padding-block: 8px; }
  .box__summary { padding: 14px 12px; gap: 10px; }
  .box__line { grid-template-columns: 20px 36px minmax(0, 1fr) auto; gap: 8px; }
  .box__line-pick { grid-template-columns: 20px 36px minmax(0, 1fr); gap: 8px; }
  .box__lthumb { width: 36px; height: 36px; }
  .box__lactions { grid-column: 3 / -1; justify-content: flex-end; margin-top: -6px; }
  .box__icon { width: 40px; height: 36px; }
  .picker { padding: 0; }
  .picker__panel { height: 100%; }
  .picker__head { padding: 14px 16px 12px; }
  .picker__tools { padding: 10px 16px; gap: 10px; }
  .picker__search { flex: 1 1 100%; font-size: 16px; } /* 16px: no zoom on iOS */
  .picker__body { padding: 16px 16px 24px; }
  .picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  :root { --header-h: 68px; }
  .nav, .lang-switch:not(.lang-switch--menu):not(.lang-switch--footer) { display: none; }
  .burger { display: inline-grid; justify-self: start; }
  .lang-select-wrap { display: block; }
  .header__inner { gap: 8px; }
  .brand img { height: 44px; }
  .header__actions { gap: 4px; }

  .split__media, .split--reverse .split__media { grid-column: 1 / -1; order: 0; }
  .split__body, .split--reverse .split__body { grid-column: 1 / -1; order: 1; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { position: static; }

  .cat-hero__body { min-height: 0; }
  .other-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contact-grid { grid-template-columns: 1fr; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-split, .store { grid-template-columns: minmax(0, 1fr); }
  .about-split--reverse .about-split__media { order: 0; }
  .about-split__media img { aspect-ratio: 3 / 2; max-height: none; }
  /* a vertical video stays vertical: 4:5, centred, not a thin landscape strip */
  .about-reel { width: min(100%, 460px); margin-inline: auto; max-height: none; }
  .about-reel--wide { width: 100%; margin-inline: 0; } /* the shop frame keeps its full width, as the picture did */
  .about-split__media--square img { aspect-ratio: 4 / 3; }
  .store__body { padding-inline: 8px; }
  .map { grid-template-columns: minmax(0, 1fr); }
  .map__frame { height: 320px; min-height: 0; border-inline-start: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .hero {
    background:
      radial-gradient(ellipse 70% 42% at 50% 50%, rgba(247, 244, 237, .95) 0%, rgba(247, 244, 237, .7) 60%, rgba(247, 244, 237, 0) 100%),
      var(--ivory) url("../assets/bg-mobile.webp") center / cover no-repeat;
  }
  .hero__ctas { flex-direction: column; align-items: stretch; width: min(100%, 320px); }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; }
  .card__body { padding-top: 14px; }
  .card__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .card__add { text-align: center; padding: 10px 8px; }
  .badges { top: 8px; inset-inline-start: 8px; } .badge { padding: 4px 8px; font-size: 9px; }

  .gifts__grid { grid-template-columns: 1fr; gap: 48px; }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }

  .form__row { grid-template-columns: 1fr; }
  .map__frame { height: 280px; }
  .contact-grid { gap: 48px; }
  .contact-item { grid-template-columns: 42px 1fr; gap: 16px; }
  .contact-item__icon { width: 42px; height: 42px; }
  .contact-form { padding: 26px 20px; }
  .contact-form__submit .btn { width: 100%; }

  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .pdp__specs dl > div { grid-template-columns: 1fr; gap: 2px; }
  .stats { gap: 20px; }
}
/* tablet and phone (up to 1100px, where the brand takes the whole width): the whole footer centred —
   logo, description, icons, each group in its column, copyright and languages one under the other */
@media (max-width: 1100px) {
  .footer__brand { justify-items: center; text-align: center; }
  .footer__brand .socials { margin-inline-start: 0; } /* (no offset: the icons sit in the middle) */
  .footer__col { justify-items: center; text-align: center; }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; }
}
/* phone: the brand on the whole width, then the groups on two even columns, aligned at the top
   (left: El Madina, Catégories — right: Contact) */
@media (max-width: 560px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding-bottom: 28px; }
  .footer__brand { grid-column: 1 / -1; gap: 14px; }
  .footer__top > .footer__col:nth-child(2) { grid-column: 1; grid-row: 2; } /* El Madina */
  .footer__top > .footer__col:nth-child(3) { grid-column: 1; grid-row: 3; } /* Catégories */
  .footer__top > .footer__col:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; } /* Contact, at the top of the right column */
  /* links: 25px high to touch (padding), the same look (the gap is smaller by as much) */
  .footer__col { gap: 4px; font-size: 13px; min-width: 0; }
  .footer__col h3 { margin-bottom: 6px; font-size: 10.5px; letter-spacing: .18em; }
  .footer__col a { padding-block: 2px; max-width: 100%; overflow-wrap: anywhere; } /* a long e-mail wraps instead of leaving the column */
  .footer__bottom { padding-block: 20px 24px; }
}

/* small phones: every product list keeps 2 products per line, with a narrower gap */
@media (max-width: 360px) {
  .grid, [data-page="home"] .grid { gap: 28px 10px; }
}
/* phone: product lists, 2 per line — everything shrinks to fit a half-width card */
@media (max-width: 760px) {
  .grid .card { min-width: 0; }
  .grid .card__title { font-size: .95rem; overflow-wrap: anywhere; }
  .grid .card__foot > *, .grid .card__price { min-width: 0; }

  /* every product card (shop, categories, home rails, box picker): everything under the photo
     centred, like the full-width button */
  .card .card__body { align-items: center; text-align: center; }
  .card .card__title { overflow-wrap: break-word; text-wrap: balance; } /* whole words, even lines */
  .card .card__size,
  .card .card__price { justify-content: center; }
  .card .card__foot { align-self: stretch; text-align: center; }
}

@media (max-width: 380px) {
  .brand img { height: 38px; }
  .chip { padding: 9px 14px; }
  /* cart drawer: smaller photo, and « Retirer » goes under the stepper when the line is too narrow */
  .drawer__head, .drawer__foot { padding-inline: 20px; }
  .drawer__items { padding-inline: 20px; }
  .line { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .line__row { flex-wrap: wrap; gap: 8px 12px; }
}

@media (hover: none) {
  .card:hover .card__media .ph, .card:hover .card__media .media__img, .card:hover .card__media .media__photo,
  .cat-slide:hover .cat-slide__media img, .other-cat:hover .other-cat__media > *,
  .cat__media:hover .media__cover, .cat__media:hover .ph { transform: none; }
}

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

/* =========================================================
   Rounded corners — subtle (6px) on every framed element.
   Circles (arrow buttons, counters) keep their shape; panels
   attached to the screen edge (cart drawer, mobile menu) and
   underline-only fields stay straight.
   ========================================================= */
.btn, .card__add, .chip, .qty, .lang-select,
.line__media, .line__media--box,
.pdp__main, .pdp__thumb, .social-tile,
.slot, .slot__media, .map, .box, .story-home__media, .gift__media,
.split__media img, .about-split__media img, .store__media img,
.order-card, .order-line__media, .picker__panel, .catalog-error, .order-note,
.checkout .field input, .checkout .field textarea, .checkout .field select, .checkout .phone-input {
  border-radius: var(--radius);
}
/* content drawn inside a rounded frame is clipped to it */
.qty, .slot, .pdp__thumb, .order-card, .line__media--box, .order-line__media--box { overflow: hidden; }
/* product & category card images: large soft corners on the image frame only (text and button stay outside);
   isolation keeps the corners clean while the photo zooms on hover (Safari) */
.card__media, .other-cat__media {
  border-radius: var(--radius-media); overflow: hidden; isolation: isolate;
}
.badge, .pdp__thumb img { border-radius: var(--radius-sm); }
.checkout .phone-input input { border-radius: 0; }
@media (max-width: 760px) {
  .picker__panel { border-radius: 0; } /* full screen on phones */
}