/* Garinto, shared across pages: overlays (city, search, cart, menu, toast) and the building blocks of inner pages.
   Colours and type come from tokens.css + ghers.css. One radius scale: 6 (photos in grids), 12 (panels), 999 (pills). */

.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 100; padding: 10px 14px; border-radius: 6px; background: var(--encre); color: #f6f6f2; font: 500 14px/1 var(--font-text); }
.skip:focus { inset-block-start: 12px; }
html.is-locked { overflow: hidden; }
button.hh__icon { padding: 0; }
.hh__icon svg, .dlg__x svg, .qty svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hh__cart span[data-zero] { display: none; }
.hh__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.topbar__end { position: relative; align-items: center; }
.langs { position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0; z-index: 60; display: grid; min-inline-size: 160px; padding: 6px; border-radius: 12px; background: #f6f6f2; color: var(--encre); box-shadow: 0 18px 40px -16px rgba(0,0,0,.35); }
.langs a { padding: 10px 12px; border-radius: 8px; color: inherit; text-decoration: none; font: 400 15px/1 var(--font-text); }
.langs a:hover { background: var(--menthe); } .langs a[aria-current] { font-weight: 600; }
.langs a[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-text); }

/* ---------- dialogs ---------- */
dialog { color: var(--encre); }
.dlg { inline-size: min(560px, calc(100vw - 32px)); max-block-size: min(86vh, 760px); margin: auto; padding: 0; border: 0; border-radius: 16px; background: var(--chaux); box-shadow: 0 40px 100px -30px rgba(0,0,0,.45); overflow: auto; }
.dlg::backdrop, .sheet::backdrop { background: rgba(10,14,12,.42); backdrop-filter: blur(3px); }
.dlg[open] { animation: dlgIn .45s cubic-bezier(.16,1,.3,1); } .dlg[open]::backdrop { animation: fade .3s ease; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(18px) scale(.98); } } @keyframes fade { from { opacity: 0; } }
.dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 28px 0; }
.dlg__head h2 { margin: 0; font: 400 32px/1.1 var(--font-serif); letter-spacing: -.02em; }
.dlg__x { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background-color .25s; }
.dlg__x:hover { background: rgba(18,20,18,.06); }
.dlg__lede { margin: 8px 28px 0; font: 400 15px/1.5 var(--font-text); opacity: .7; }
.dlg__foot { margin: 0; padding: 0 28px 26px; font: 400 14px/1.5 var(--font-text); opacity: .75; }
.dlg__foot a { color: var(--zellige); }
.cities { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 20px 28px; }
.cities button { display: grid; gap: 4px; inline-size: 100%; padding: 12px 14px; border: 1px solid rgba(18,20,18,.12); border-radius: 10px; background: none; color: inherit; text-align: start; cursor: pointer; transition: border-color .2s, background-color .2s; }
.cities button:hover { border-color: rgba(18,20,18,.4); }
.cities button[aria-pressed="true"] { border-color: var(--zellige); background: var(--menthe); }
.cities span { font: 500 16px/1.1 var(--font-text); } .cities small { font: 400 13px/1.2 var(--font-text); opacity: .65; }

/* search */
.dlg--search { inline-size: min(720px, calc(100vw - 24px)); margin-block-start: 10vh; }
.search { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 22px; border-block-end: 1px solid rgba(18,20,18,.1); }
.search > svg { inline-size: 22px; block-size: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .6; }
.search input { flex: 1; min-inline-size: 0; border: 0; background: none; font: 400 22px/1.2 var(--font-serif); color: inherit; outline: none; }
.search__res { padding: 14px 14px 18px; }
.search__k { margin: 4px 8px 10px; font: 500 13px/1 var(--font-text); opacity: .55; }
.search__p, .search__s { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.search__s { margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid rgba(18,20,18,.08); }
.search__p a, .search__s a { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.search__p a:hover, .search__s a:hover, .search__p a:focus-visible, .search__s a:focus-visible { background: var(--menthe); outline: none; }
.search__p img { inline-size: 48px; block-size: 56px; object-fit: cover; border-radius: 6px; }
.search__p b, .search__s b { display: block; font: 400 19px/1.2 var(--font-serif); }
.search__p small, .search__s small { font: 400 13px/1.3 var(--font-text); opacity: .62; }
.search__none { margin: 8px; font: 400 15px/1.5 var(--font-text); } .search__none a { color: var(--zellige); }

/* ---------- cart drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.drawer.is-open { pointer-events: auto; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(10,14,12,.42); opacity: 0; transition: opacity .4s ease; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; display: grid; grid-template-rows: auto 1fr auto; inline-size: min(460px, 100vw); background: var(--chaux); box-shadow: -30px 0 80px -30px rgba(0,0,0,.4); translate: 100% 0; transition: translate .6s cubic-bezier(.77,0,.18,1); }
[dir="rtl"] .drawer__panel { translate: -100% 0; }
.drawer.is-open .drawer__panel { translate: 0 0; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 14px; border-block-end: 1px solid rgba(18,20,18,.08); }
.drawer__head h2 { margin: 0; font: 400 28px/1 var(--font-serif); letter-spacing: -.02em; }
.drawer__body { overflow: auto; padding: 8px 24px 16px; overscroll-behavior: contain; }
.drawer__foot { padding: 16px 24px 22px; border-block-start: 1px solid rgba(18,20,18,.08); display: grid; gap: 12px; }
.drawer__foot:empty { display: none; }
.drawer__more { justify-self: center; font: 500 14px/1 var(--font-text); color: var(--encre); }
.empty { display: grid; justify-items: start; gap: 18px; padding-block: 32px; font: 400 17px/1.5 var(--font-text); }
.empty p { margin: 0; }
.free { padding-block: 12px 16px; }
.free p { margin: 0 0 8px; font: 400 14px/1.4 var(--font-text); }
.free__bar { display: block; block-size: 4px; border-radius: 99px; background: rgba(18,20,18,.1); overflow: hidden; }
.free__bar i { display: block; block-size: 100%; inline-size: var(--p); background: var(--zellige); border-radius: inherit; transition: inline-size .6s cubic-bezier(.16,1,.3,1); }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: start; padding-block: 14px; border-block-start: 1px solid rgba(18,20,18,.08); }
.line__pic img { inline-size: 72px; block-size: 88px; object-fit: cover; border-radius: 6px; display: block; }
.line__txt { display: grid; gap: 4px; min-inline-size: 0; }
.line__name { font: 400 20px/1.15 var(--font-serif); color: inherit; text-decoration: none; }
.line__opt { font: 400 13px/1.35 var(--font-text); opacity: .65; }
.line__price { font: 500 15px/1.2 var(--font-text); white-space: nowrap; }
.qty { display: inline-flex; align-items: center; justify-self: start; gap: 2px; margin-block-start: 6px; border: 1px solid rgba(18,20,18,.16); border-radius: 99px; }
.qty button { display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.qty button:hover { background: rgba(18,20,18,.06); }
.qty svg { inline-size: 16px; block-size: 16px; }
.qty span { min-inline-size: 22px; text-align: center; font: 500 14px/1 var(--font-text); }
.sum { display: grid; gap: 8px; margin: 0; font: 400 15px/1.4 var(--font-text); }
.sum > div { display: flex; justify-content: space-between; gap: 16px; }
.sum dt small { display: block; font-size: 13px; opacity: .6; }
.sum dd { margin: 0; white-space: nowrap; }
.sum__total { padding-block-start: 10px; border-block-start: 1px solid rgba(18,20,18,.1); font-weight: 600; font-size: 17px; }
.link-btn { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:focus-visible { outline: 2px solid var(--zellige); outline-offset: 2px; }
.b--wide { justify-content: center; inline-size: 100%; box-sizing: border-box; }
.b svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.b--dark-line { box-shadow: inset 0 0 0 1px rgba(18,20,18,.35); color: var(--encre); background: none; }
.b--dark-line:hover { box-shadow: inset 0 0 0 1px var(--encre); }
.b[disabled], .b[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- mobile menu ---------- */
.sheet { inline-size: 100vw; max-inline-size: 100vw; block-size: 100dvh; max-block-size: 100dvh; margin: 0; padding: 0; border: 0; background: var(--chaux); }
.sheet[open] { display: grid; grid-template-rows: auto 1fr auto; animation: sheetIn .5s cubic-bezier(.16,1,.3,1); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(-12px); } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; }
.sheet__head img { block-size: 26px; }
.sheet__nav { display: grid; align-content: start; padding: 24px 20px; }
.sheet__nav a { padding-block: 12px; font: 400 38px/1.05 var(--font-serif); letter-spacing: -.02em; color: inherit; text-decoration: none; border-block-end: 1px solid rgba(18,20,18,.08); }
.sheet__end { display: flex; justify-content: space-between; gap: 16px; padding: 20px; font: 400 15px/1 var(--font-text); }
.sheet__end a { color: inherit; }
.sheet .topbar__btn { color: var(--encre); }

/* ---------- toast ---------- */
.toast { position: fixed; z-index: 90; inset-block-end: 20px; inset-inline-start: 50%; translate: -50% 20px; display: flex; align-items: center; gap: 16px; max-inline-size: calc(100vw - 32px); padding: 14px 16px 14px 20px; border-radius: 12px; background: var(--encre); color: #f6f6f2; font: 400 15px/1.4 var(--font-text); box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s ease, translate .5s cubic-bezier(.16,1,.3,1); }
.toast.is-on { opacity: 1; translate: -50% 0; pointer-events: auto; }
.toast button { flex: none; padding: 8px 12px; border: 0; border-radius: 8px; background: #f6f6f2; color: var(--encre); font: 600 14px/1 var(--font-text); cursor: pointer; }

/* =====================================================================
   Inner pages: building blocks (use these instead of inventing new ones)
   ===================================================================== */
.wrap { padding-inline: clamp(20px, 3.4vw, 48px); }
.page { background: var(--chaux); }
.page-head { padding: clamp(40px, 8vh, 96px) clamp(20px, 3.4vw, 48px) clamp(28px, 5vh, 56px); display: grid; gap: 18px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 13px/1 var(--font-text); opacity: .65; }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; opacity: .6; }
.crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.h1 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-variation-settings: "opsz" 72; letter-spacing: -.035em; line-height: .98; font-size: clamp(48px, 7vw, 112px); }
.page-head .h1 { font-size: clamp(44px, 6vw, 96px); }
.lede { margin: 0; max-inline-size: 36em; font: 400 clamp(17px, 1.3vw, 20px)/1.55 var(--font-text); color: color-mix(in oklab, var(--encre) 76%, var(--chaux)); }
.block { padding: clamp(56px, 10vh, 120px) clamp(20px, 3.4vw, 48px); }
.block--green { background: var(--zellige); color: #f6f6f2; } .block--green .lede, .block--green .body { color: rgba(246,246,242,.78); }
.block--mint { background: var(--menthe); }
.block--soil { background: var(--sol); color: #f6f6f2; }
.h3 { margin: 0; font: 400 clamp(26px, 2.4vw, 36px)/1.12 var(--font-serif); letter-spacing: -.02em; }
.small { font: 400 13px/1.45 var(--font-text); opacity: .65; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.photo { border-radius: 12px; overflow: hidden; background: #e7e4dc; } .photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* forms */
.field { display: grid; gap: 8px; }
.field > span, .field > label, .legend { font: 500 14px/1.2 var(--font-text); }
.field small { font: 400 13px/1.4 var(--font-text); opacity: .62; }
.input, .select, .textarea { inline-size: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid rgba(18,20,18,.2); border-radius: 10px; background: #fff; color: var(--encre); font: 400 16px/1.3 var(--font-text); transition: border-color .2s, box-shadow .2s; }
.textarea { min-block-size: 120px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--zellige); box-shadow: 0 0 0 3px rgba(14,74,58,.15); }
.input[aria-invalid="true"] { border-color: #b4532f; }
.err { margin: 0; font: 500 13px/1.3 var(--font-text); color: #9c3f1f; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
/* choice pills (radio/checkbox styled) */
.choices { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid rgba(18,20,18,.2); border-radius: 99px; font: 500 15px/1 var(--font-text); transition: border-color .2s, background-color .2s, color .2s; }
.choice input:checked + span { background: var(--encre); border-color: var(--encre); color: #f6f6f2; }
.choice input:focus-visible + span { outline: 2px solid var(--zellige); outline-offset: 2px; }
.choice:hover input:not(:checked) + span { border-color: rgba(18,20,18,.5); }
/* option cards (bigger choices with a line of detail, e.g. size, pot, payment) */
.opts { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; }
.opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid rgba(18,20,18,.16); border-radius: 12px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt:hover { border-color: rgba(18,20,18,.42); }
.opt:has(input:checked) { border-color: var(--zellige); background: color-mix(in oklab, var(--menthe) 60%, #fff); box-shadow: inset 0 0 0 1px var(--zellige); }
.opt:has(input:focus-visible) { outline: 2px solid var(--zellige); outline-offset: 2px; }
.opt b { display: block; font: 500 15px/1.25 var(--font-text); } .opt small { display: block; font: 400 13px/1.35 var(--font-text); opacity: .65; }
.opt__end { font: 500 15px/1.2 var(--font-text); white-space: nowrap; }
.opt svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.opt__start { display: flex; align-items: center; gap: 14px; }
/* small info line with an icon */
.note { display: flex; align-items: flex-start; gap: 10px; margin: 0; font: 400 14px/1.45 var(--font-text); }
.note svg { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: var(--zellige); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.block--green .note svg, .block--soil .note svg { stroke: #9fd0b4; }
/* step list for processes */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(24px, 3vw, 48px); counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 10px; align-content: start; padding-block-start: 18px; border-block-start: 1px solid rgba(18,20,18,.2); }
.block--green .steps li { border-color: rgba(246,246,242,.25); }
.steps li::before { content: counter(s); font: 400 44px/1 var(--font-serif); opacity: .4; }
.steps b { font: 400 24px/1.15 var(--font-serif); font-weight: 400; } .steps p { margin: 0; font: 400 15px/1.5 var(--font-text); opacity: .78; }
/* FAQ */
.faq { border-block-start: 1px solid rgba(18,20,18,.15); }
.faq details { border-block-end: 1px solid rgba(18,20,18,.15); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 20px; cursor: pointer; list-style: none; font: 400 22px/1.25 var(--font-serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--font-text); transition: rotate .35s cubic-bezier(.16,1,.3,1); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details > div { padding-block-end: 22px; max-inline-size: 44em; font: 400 16px/1.6 var(--font-text); opacity: .8; }
/* sticky summary panel (cart, checkout, service quotes) */
.panel { position: sticky; top: 24px; display: grid; gap: 16px; padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 20px 50px -30px rgba(18,20,18,.35); }
.panel h2 { margin: 0; font: 400 26px/1.1 var(--font-serif); letter-spacing: -.015em; }
.price-big { font: 400 clamp(36px, 3.4vw, 52px)/1 var(--font-serif); letter-spacing: -.02em; }
/* product grid (cards come from Garinto.productCard) */
.grid-p { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 16px; }
@media (max-width: 1100px) { .grid-p { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grid-p { grid-template-columns: repeat(2, 1fr); gap: 36px 12px; } }
.prod { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 12px; }
.prod__pic { grid-column: 1 / -1; }
.prod__buy { justify-items: end; padding-block-start: 3px; }
@media (max-width: 600px) { .prod { grid-template-columns: 1fr; } .prod__buy { justify-items: start; padding: 0; } }
/* status pill */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: var(--menthe); color: var(--zellige); font: 500 13px/1 var(--font-text); }
.pill--soil { background: #efe3d6; color: #7a3a1e; }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
/* closed drawer: no shadow bleeding in from the right edge */
.drawer:not(.is-open) .drawer__panel { box-shadow: none; visibility: hidden; transition: translate .6s cubic-bezier(.77,0,.18,1), visibility 0s .6s; }
button.b { border: 0; cursor: pointer; }
/* the footer "reveal" (page lifts off a sticky footer) is for the home only; inner pages end normally */
body:not(.home) .ft { position: relative; z-index: 3; }
body:not(.home) main { min-block-size: 60vh; }
/* inner pages: the header sits in the flow (on the home it floats over the hero) */
body:not(.home) .hh { position: relative; inset: auto; }
body:not(.home) .page-head { padding-block-start: clamp(16px, 3vh, 40px); }
@media (max-width: 600px) { .toast { inset-inline: 16px; translate: 0 20px; max-inline-size: none; } .toast.is-on { translate: 0 0; } }
.b[aria-disabled="true"] { pointer-events: auto; cursor: not-allowed; }

/* ---------- first visit: which city? (bottom-left card) ---------- */
.ask-city { position: fixed; z-index: 70; opacity: 0; translate: 0 16px; transition: opacity .4s ease, translate .6s cubic-bezier(.16,1,.3,1); }
.ask-city.is-on { opacity: 1; translate: 0 0; }
.ask-city { inset-block-end: 20px; inset-inline-start: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; max-inline-size: min(420px, calc(100vw - 40px)); padding: 14px 14px 14px 18px; border-radius: 14px; background: #fff; color: var(--encre); box-shadow: 0 24px 60px -24px rgba(10,14,12,.45), 0 0 0 1px rgba(18,20,18,.06); }
.ask-city > svg { inline-size: 24px; block-size: 24px; fill: none; stroke: var(--zellige); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ask-city p { flex: 1; margin: 0; min-inline-size: 150px; font: 400 16px/1.3 var(--font-text); }
.ask-city .b { padding: 10px 14px; font-size: 14px; }
@media (max-width: 600px) { .ask-city { inset-inline: 12px; inset-block-end: 12px; max-inline-size: none; } }
/* quick add feedback on product cards */
.prod__add.is-added { background: var(--zellige); }

/* ---------- Arabic and right-to-left ---------- */
:lang(ar) { --font-serif: "Reem Kufi", "IBM Plex Sans Arabic", serif; }
:lang(ar) .h1, :lang(ar) .h2, :lang(ar) .h3 { letter-spacing: 0; line-height: 1.25; }
:lang(ar) body { line-height: 1.7; }
[dir="rtl"] .b svg use[href="#i-arrow"], [dir="rtl"] svg use[href="#i-arrow"] { transform: scaleX(-1); transform-origin: center; }
[dir="rtl"] .crumbs li + li::before { content: "\\"; }

/* ---------- hover and press feedback for every control that lacked it ---------- */
.b { transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease; }
.b:active { transform: translateY(1px) scale(.99); }
.b--light:hover { background: #fff; box-shadow: 0 8px 24px -12px rgba(0,0,0,.35); }
.b--line:hover { background: rgba(246,246,242,.1); }
.more, .link, .vis__more, .drawer__more { transition: opacity .2s ease, background-size .45s cubic-bezier(.16,1,.3,1); }
.more:hover, .link:hover, .vis__more:hover, .drawer__more:hover { opacity: .7; }
.hh__icon { border-radius: 50%; transition: background-color .25s ease; }
.hh__icon:hover { background: rgba(18,20,18,.06); }
.hh__brand { transition: opacity .25s ease; } .hh__brand:hover { opacity: .75; }
.prod__pic { transition: box-shadow .4s ease; } .prod:hover .prod__pic { box-shadow: 0 18px 40px -26px rgba(18,20,18,.5); }
.prod__meta h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.16,1,.3,1); }
.prod:hover .prod__meta h3 a { background-size: 100% 1px; }
.prod__add:hover { background: var(--zellige); }
.line__name:hover, .search__p a:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.langs a, .sheet__nav a { transition: background-color .2s ease, padding .3s cubic-bezier(.16,1,.3,1); }
.sheet__nav a:hover { padding-inline-start: 10px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--zellige); outline-offset: 3px; }
.block--green a:focus-visible, .block--green button:focus-visible, .ft a:focus-visible, .ft button:focus-visible { outline-color: #f6f6f2; }
/* phone numbers and e-mail addresses always read left to right, also on Arabic pages */
input[type="tel"], input[type="email"], .ltr { direction: ltr; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { text-align: right; }
/* toast: centred in both directions (inset-inline-start flips in Arabic, so centre with physical left) */
.toast { inset-inline-start: auto; left: 50%; }
@media (max-width: 600px) { .toast { left: 16px; right: 16px; } }

/* phones: nothing may widen the page sideways. The closed cart panel waits off-screen inside its fixed layer, so that layer clips it;
   overflow-x: clip (not hidden) keeps sticky sections working. */
html, body { overflow-x: clip; }
.drawer { overflow: hidden; }
.drawer:not(.is-open) { visibility: hidden; transition: visibility 0s .6s; }
.drawer.is-open { visibility: visible; transition: none; }

/* phones: a compact city question (one short block, buttons side by side) */
@media (max-width: 600px) {
  .ask-city { padding: 10px 12px; gap: 8px 10px; }
  .ask-city p { font-size: 14px; min-inline-size: 0; flex-basis: calc(100% - 40px); }
  .ask-city .b { flex: 1; justify-content: center; padding: 9px 10px; font-size: 13px; }
}
.wrap { max-inline-size: none; margin-inline: 0; }   /* inner pages share the home's full-width grid, so titles and content line up */
/* cart drawer: care suggestion */
.ups { margin-block-start: 8px; padding: 14px; border-radius: 12px; background: var(--menthe); }
.ups p { margin: 0 0 10px; font: 400 18px/1.2 var(--font-serif); }
.ups__row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding-block: 6px; }
.ups__row img { inline-size: 44px; block-size: 54px; object-fit: cover; border-radius: 6px; }
.ups__row b { display: block; font: 500 14px/1.2 var(--font-text); } .ups__row small { font: 400 13px/1.3 var(--font-text); opacity: .65; }
.ups__add { padding: 8px 12px; border: 0; border-radius: 99px; background: var(--encre); color: #f6f6f2; font: 600 13px/1 var(--font-text); cursor: pointer; transition: background-color .25s; }
.ups__add:hover { background: var(--zellige); }
/* product cards without a "real size" photo keep their photo on hover (a gentle zoom instead of an empty grey box) */
.prod:not(:has(.prod__b)):hover .prod__a { opacity: 1; transform: scale(1.03); }

/* ---------- dropdowns: one design for every select ---------- */
/* phones keep their own picker, restyled to match the fields */
select.select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23121412' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
[dir="rtl"] select.select { background-position: left 14px center; }
select.select:hover { border-color: rgba(18,20,18,.45); }
/* pointer devices: the designed list (assets/js/lib/dropdown.js) */
.dd { position: relative; display: block; }
.sort .dd, .rm__ch .dd { display: inline-block; }
.dd__native { position: absolute !important; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; pointer-events: none; }
.dd__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%; text-align: start; cursor: pointer; background-image: none !important; padding-inline-end: 14px !important; transition: border-color .2s, box-shadow .2s; }
.sort .dd__btn, .rm__ch .dd__btn { inline-size: auto; }
.dd__btn:hover { border-color: rgba(18,20,18,.45); }
.dd__btn:focus-visible, .dd.is-open .dd__btn { outline: none; border-color: var(--zellige); box-shadow: 0 0 0 3px rgba(14,74,58,.15); }
.dd__btn[aria-invalid="true"] { border-color: #b4532f; }
.dd__btn:disabled { opacity: .5; cursor: not-allowed; }
.dd__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__chev { flex: none; inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: rotate .35s cubic-bezier(.16,1,.3,1); }
.dd.is-open .dd__chev { rotate: 180deg; }
.dd__list { position: absolute; z-index: 40; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 100%; max-block-size: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; box-sizing: border-box; border-radius: 12px; background: #fff; color: var(--encre); box-shadow: 0 0 0 1px rgba(18,20,18,.08), 0 22px 50px -20px rgba(10,14,12,.4); outline: none; overscroll-behavior: contain; transform-origin: top; animation: ddIn .22s cubic-bezier(.16,1,.3,1); }
.dd.is-up .dd__list { inset-block-start: auto; inset-block-end: calc(100% + 6px); transform-origin: bottom; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.dd.is-up .dd__list { animation-name: ddUp; } @keyframes ddUp { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.dd__list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 8px; font: 400 15px/1.3 var(--font-text); white-space: nowrap; cursor: pointer; }
.dd__list li.is-active { background: var(--menthe); }
.dd__list li[aria-selected="true"] { font-weight: 600; }
.dd__list li svg { inline-size: 18px; block-size: 18px; fill: none; stroke: var(--zellige); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.dd__list li[aria-selected="true"] svg { opacity: 1; }
.dd__list li[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .dd__list { animation: none; } }
/* a send that failed: one plain line with the WhatsApp number (services-kit.js, forms talking to the server) */
.send-err { margin-block: 4px 12px; font-size: 14px; line-height: 1.45; }
.send-err a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
bdi[dir="ltr"] { white-space: nowrap; }