/* ============================================================
   Fresh Life — "the store, online"
   Chrome (header/hero/contact/footer) = the black fascia of the
   real storefront. Body = the warm oak interior. Palette sampled
   from the shop photography: fascia black, oak shelving, the
   sign's green + swoosh orange, shelf-tag gold.
   ============================================================ */

:root {
  /* From the storefront sign */
  --fascia:   #141816;   /* fascia near-black (green undertone) */
  --fascia-2: #1D2320;   /* raised surfaces on dark */
  --green:    #8FB847;   /* brand green (logo) */
  --green-vivid: #7FC94E;/* sign green for dark surfaces */
  --green-d:  #5F8429;   /* readable green on paper */
  --orange:   #F58220;   /* the swoosh — primary CTA */
  --orange-d: #DD6F12;

  /* From the shelves */
  --gold:     #F2C653;   /* shelf price-tag yellow */
  --gold-d:   #D9A521;
  --oak:      #EFE6D2;   /* shelf wood, light */
  --oak-d:    #D9C9A7;   /* shelf wood, shaded */
  --teal:     #2BB7A9;
  --teal-d:   #1E8479;
  --coral:    #F2674E;
  --violet:   #8E6FD6;
  --sky:      #3FA7D6;

  /* Neutrals */
  --ink:      #23302B;
  --ink-soft: #5B6862;
  --paper:    #FAF8F3;   /* warm interior white */
  --surface:  #FFFFFF;
  --line:     #E9E2D2;   /* warm hairline */
  --on-dark:  #C9D3CC;   /* body text on fascia */
  --on-dark-soft: #97A49C;

  /* System */
  --radius:  20px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow:  0 14px 34px -16px rgba(24, 30, 27, 0.30);
  --shadow-sm: 0 6px 18px -12px rgba(24, 30, 27, 0.28);
  --maxw:    1180px;
  --ease:    cubic-bezier(.22,.61,.36,1);

  --font-head: "Baloo Bhaijaan 2", "Tajawal", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", "Tajawal", system-ui, sans-serif;
}

[lang="ar"] { --font-body: "Tajawal", system-ui, sans-serif; }

/* Arabic readability: more leading, a touch larger body text, and no
   letter-spacing (it breaks Arabic's joined letters). */
[lang="ar"] body { line-height: 1.85; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { line-height: 1.45; }
[lang="ar"] .hero p.lead { font-size: clamp(1.12rem, 1.7vw, 1.3rem); line-height: 2; }
[lang="ar"] .about p { font-size: 1.16rem; line-height: 2.05; }
[lang="ar"] .pdp-desc { line-height: 2.05; }
[lang="ar"] .hero h1, [lang="ar"] .pdp-title,
[lang="ar"] .eyebrow, [lang="ar"] .filter-label, [lang="ar"] .pdp-cat, [lang="ar"] .pdp-swatch-tag { letter-spacing: normal; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.08; color: var(--ink); }
section { scroll-margin-top: 84px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green-d);
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--gold-d); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; line-height: 1.3;
  padding: 13px 26px; border-radius: var(--radius-pill);
  cursor: pointer; border: 2px solid transparent;
  transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s, border-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange); color: #1A130A; box-shadow: 0 10px 24px -10px rgba(245,130,32,.55); }
.btn-primary:hover { background: var(--orange-d); color: #1A130A; }
/* Disabled — e.g. "Place order" greys out while the GPS is still searching, or while
   the order is saving. Declared after the variants; .btn:disabled (0,2,0) outranks
   .btn-primary/.btn-ghost (0,1,0), and .btn's `transition: background/color .2s` makes
   it fade rather than snap. */
.btn:disabled, .btn:disabled:hover {
  background: var(--line); color: var(--ink-soft); border-color: transparent;
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn-lg { padding: 15px 30px; font-size: 1.06rem; }

/* ---------------- Header — light chrome ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: transform .35s var(--ease);
}
/* Hide-on-scroll-down, reveal-on-scroll-up (toggled from app.js). */
.site-header.nav-hidden { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 74px; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 46px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { font-family: var(--font-body); font-weight: 500; font-size: .96rem; color: var(--ink); transition: color .2s; }
.site-nav a:hover { color: var(--green-d); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-btn {
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  padding: 8px 17px; border-radius: var(--radius-pill);
  border: 2px solid var(--oak-d); background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.lang-btn:hover { border-color: var(--green-d); color: var(--green-d); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; }

/* ---------------- Hero — light (warm paper, matches the body) ---------------- */
.hero {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(40px, 6.5vw, 84px) 0 clamp(48px, 7vw, 92px);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(30px, 5.5vw, 72px); align-items: center; }
.hero h1 {
  font-size: clamp(2.7rem, 6.2vw, 4.6rem);
  color: var(--ink); letter-spacing: -.015em;
  margin: 14px 0 0;
}
.hero-tagline { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.08rem, 1.9vw, 1.4rem); color: var(--green-d); margin-top: 10px; }
.hero p.lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink-soft); margin: 16px 0 30px; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* the hero "Our story" ghost button on light (the global .btn-ghost stays white for the dark contact section) */
.hero .btn-ghost { color: var(--ink); border-color: var(--oak-d); }
.hero .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

.hero-photo {
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 4.4; max-height: 540px; justify-self: end; width: 100%;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }

/* Entrance: one orchestrated rise, once. */
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes photoIn { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: riseIn .6s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: .07s; }
.hero-copy > *:nth-child(3) { animation-delay: .14s; }
.hero-copy > *:nth-child(4) { animation-delay: .21s; }
.hero-copy > *:nth-child(5) { animation-delay: .28s; }
.hero-photo { animation: photoIn .7s var(--ease) .12s both; }

/* Scroll reveals (elements get .reveal in HTML, .in from app.js) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------------- Shelf-tag rail (highlights) ---------------- */
.rail { background: linear-gradient(180deg, #F4ECDB, #EFE6D2); border-bottom: 1px solid #E2D5B9; }
.rail-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 40px 0 28px; }
.rail-track::before {
  content: ""; position: absolute; top: 22px; left: 6px; right: 6px; height: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #CDBE9E, #B3A17C);
}
.tag-card {
  position: relative; background: var(--surface);
  border: 1px solid #E4D9BF; border-top: 4px solid var(--gold);
  border-radius: 10px; padding: 13px 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  box-shadow: 0 8px 16px -10px rgba(90, 74, 40, .35);
}
.tag-card::before { content: ""; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 2px; height: 15px; background: #B3A17C; }
.tag-card .ic { width: 24px; height: 24px; flex: 0 0 auto; }
.tag-card b { color: var(--ink); font-weight: 600; }
.tag-card .num { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--green-d); line-height: 1; }

/* ---------------- The color walls ---------------- */
.walls { padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.walls-head { max-width: 640px; margin-bottom: 28px; }
.walls-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin: 12px 0 10px; }
.walls-head p { color: var(--ink-soft); }
.walls-scroll {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 20px;
  scrollbar-width: none;
}
.walls-scroll::-webkit-scrollbar { display: none; }
.wall {
  position: relative; flex: 0 0 auto;
  width: clamp(230px, 24vw, 300px); aspect-ratio: 3 / 4.1;
  border-radius: 22px; overflow: hidden;
  scroll-snap-align: start;
  background: var(--oak);
  box-shadow: var(--shadow-sm);
}
.wall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.wall:hover img { transform: scale(1.045); }
.wall figcaption {
  position: absolute; bottom: 12px; inset-inline-start: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.94); color: var(--ink);
  font-family: var(--font-head); font-weight: 600; font-size: .88rem;
  padding: 7px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.wall-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.wall-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--fascia); color: #fff; text-align: center;
  font-family: var(--font-head); font-weight: 600; font-size: 1.12rem;
  padding: 24px; transition: background .25s;
}
.wall-cta .wall-arrow { width: 34px; height: 34px; color: var(--orange); transition: transform .25s var(--ease); }
.wall-cta:hover { background: #1B211D; }
.wall-cta:hover .wall-arrow { transform: translateX(6px); }
[dir="rtl"] .wall-cta .wall-arrow { transform: scaleX(-1); }
[dir="rtl"] .wall-cta:hover .wall-arrow { transform: scaleX(-1) translateX(6px); }

/* ---------------- Products ---------------- */
.products { padding: clamp(26px, 3.5vw, 44px) 0 clamp(56px, 8vw, 96px); background: linear-gradient(180deg, #FFFDF8, var(--paper)); }
.products-head { text-align: center; max-width: 640px; margin: 0 auto 22px; }
.products-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin: 8px 0 8px; }
.products-head p { color: var(--ink-soft); }

.toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.search-box { position: relative; flex: 1 1 240px; max-width: 360px; }
.search-box input {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 13px 18px 13px 44px; border: 2px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); transition: border-color .2s;
}
[dir="rtl"] .search-box input { padding: 13px 44px 13px 18px; }
.search-box input:focus { outline: none; border-color: var(--orange); }
.search-box .si { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-soft); }
[dir="rtl"] .search-box .si { left: auto; right: 16px; }
.stock-filter { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: .92rem; color: var(--ink); user-select: none; }
.stock-filter input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-track { width: 40px; height: 23px; border-radius: var(--radius-pill); background: #DCD5C3; position: relative; transition: background .2s; flex: 0 0 auto; }
.sf-thumb { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.stock-filter input:checked + .sf-track { background: var(--green); }
.stock-filter input:checked + .sf-track .sf-thumb { transform: translateX(17px); }
[dir="rtl"] .stock-filter input:checked + .sf-track .sf-thumb { transform: translateX(-17px); }
.stock-filter input:focus-visible + .sf-track { outline: 3px solid var(--orange); outline-offset: 2px; }
.count { font-family: var(--font-body); font-weight: 500; color: var(--ink-soft); font-size: .95rem; }
.count b { color: var(--ink); font-weight: 700; }

/* ---- Filter panel (department -> category -> features) ---- */
.filter-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 2px 20px; margin-bottom: 24px; }
.filter-row { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; }
.filter-row + .filter-row { border-top: 1px solid var(--line); }
.filter-label { flex: 0 0 78px; padding-top: 6px; font-family: var(--font-body); font-weight: 600; font-size: .67rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.filters { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; }
/* Collapsible-filter affordances (mobile only — hidden on desktop). */
.fl-chev, .fl-count { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-weight: 500; font-size: .83rem;
  padding: 6px 13px; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--surface); color: var(--ink); border: 2px solid var(--line);
  transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.chip:hover { border-color: var(--chip, var(--green)); transform: translateY(-1px); }
.chip.is-active { background: var(--chip); border-color: var(--chip); color: #fff; }
.chip.is-active .chip-dot { background: #fff !important; }
.chip-dot { width: 9px; height: 9px; border-radius: 50%; }

/* department: fascia pills */
.chip-dept { font-weight: 600; }
.chip-dept:hover { border-color: var(--fascia); }
.chip-dept.is-active { background: var(--fascia); border-color: var(--fascia); color: #fff; }

/* size (shape) toggles — teal accent */
.chip-size:hover { border-color: var(--teal); }
.chip-size.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }

/* family brand tagline under the filter panel */
.family-tagline { text-align: center; color: var(--ink-soft); font-size: .95rem; margin: -8px auto 20px; max-width: 640px; }
.family-tagline[hidden] { display: none; }

/* features: lighter, icon-led toggles */
.chip-feat { font-size: .79rem; padding: 5px 11px; background: var(--paper); color: var(--ink-soft); }
.chip-feat .feat-ic { display: inline-flex; color: var(--ink-soft); }
.chip-feat .feat-ic svg { width: 15px; height: 15px; }
.chip-feat:hover { border-color: var(--green); color: var(--ink); transform: translateY(-1px); }
.chip-feat.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.chip-feat.is-active .feat-ic { color: #fff; }

@media (max-width: 680px) {
  .filter-panel { padding: 2px 16px; }
  .filter-row { flex-direction: column; gap: 9px; padding: 13px 0; }
  .filter-label { flex: none; padding-top: 0; }

  /* Collapsible filter rows: label = tappable header, chips drop down on tap. */
  .filter-row[data-collapsible] { gap: 0; }
  .filter-row[data-collapsible] > .filter-label {
    display: flex; align-items: center; gap: 8px; width: 100%;
    min-height: 40px; cursor: pointer; user-select: none;
  }
  .filter-row[data-collapsible] > .filter-label .fl-chev {
    display: inline-block; width: 16px; height: 16px; margin-inline-start: auto;
    color: var(--ink-soft); transition: transform .22s var(--ease); flex: none;
  }
  .filter-row[data-collapsible].is-open > .filter-label .fl-chev { transform: rotate(180deg); }
  .filter-row[data-collapsible] > .filter-label .fl-count:not([hidden]) {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--radius-pill); background: var(--green); color: #fff;
    font-size: .68rem; font-weight: 700; letter-spacing: 0;
  }
  .filter-row[data-collapsible] > .filters { display: none; margin-top: 9px; }
  .filter-row[data-collapsible].is-open > .filters { display: flex; }
}

/* per-item feature icons on cards */
.card-feats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.feat { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: #F2F0E6; color: var(--green-d); }
.feat svg { width: 14px; height: 14px; }
.badge-set { background: var(--fascia); color: #fff; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 18px; }
.card {
  display: flex; flex-direction: column; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card-media, .card-textlink { display: block; color: inherit; text-decoration: none; }
.card-media:focus-visible, .card-textlink:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.card-media { position: relative; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--accent) 8%, #fff); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: filter .25s var(--ease), opacity .25s var(--ease); }
/* Loading state while a tapped colour's photo decodes: blur the old photo + spin. */
.card-media.is-loading img { filter: blur(7px); opacity: .55; }
.card-media.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 3px solid rgba(255,255,255,.65); border-top-color: var(--green);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06); animation: fl-spin .7s linear infinite; pointer-events: none;
}
@keyframes fl-spin { to { transform: rotate(360deg); } }
.card-photos {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-weight: 600; font-size: .72rem;
  padding: 4px 9px; border-radius: var(--radius-pill); background: rgba(255,255,255,.93); color: var(--ink); box-shadow: var(--shadow-sm);
}
[dir="rtl"] .card-photos { left: auto; right: 10px; }
.card-photos svg { width: 13px; height: 13px; }
.card-out {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .72rem;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--fascia); color: #fff; box-shadow: var(--shadow-sm);
}
[dir="rtl"] .card-out { right: auto; left: 10px; }
.card-cat {
  position: absolute; bottom: 10px; left: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .72rem;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.93); color: var(--ink); box-shadow: var(--shadow-sm);
}
[dir="rtl"] .card-cat { left: auto; right: 10px; }
/* Body fills the (equal-height) card; the text link absorbs slack so the colour
   row + Add button pin to the bottom and line up horizontally across a row. */
.card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1 1 auto; }
.card-textlink { flex: 1 1 auto; }
/* TEMP: item-code pill for the owner's identification — safe to delete (this
   rule + the .card-code-pill span in app.js productCard). */
.card-code-pill { display: inline-block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700; font-size: .67rem; letter-spacing: .02em; color: var(--orange-d);
  background: #FCEEDD; border: 1px solid #F6D4AE; padding: 2px 8px; border-radius: var(--radius-pill); margin-bottom: 6px; }
.card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; min-height: 17px; }
.badge { font-family: var(--font-body); font-weight: 600; font-size: .65rem; padding: 3px 8px; border-radius: var(--radius-pill); }
.badge-bpa    { background: #EAF6E0; color: var(--green-d); }
.badge-turkey { background: #FBF1D2; color: #8A6300; }
.badge-new    { background: var(--coral); color: #fff; }
.card-title { font-family: var(--font-head); font-size: .97rem; font-weight: 600; line-height: 1.28; margin-bottom: 4px; }
.card-price { font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; color: var(--green-d); margin-bottom: 6px; }
.card-specs { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; }
.card-spec { display: flex; align-items: baseline; gap: 7px; font-size: .81rem; line-height: 1.28; }
.card-spec .cs-k { flex: 0 0 40px; color: var(--ink-soft); font-weight: 600; font-size: .67rem; text-transform: uppercase; letter-spacing: .04em; }
.card-spec .cs-v { color: var(--ink); font-weight: 600; }
.card-colors { display: flex; align-items: center; gap: 9px; }
.card-colors-label { font-size: .75rem; color: var(--ink-soft); }
.swatches { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.swatch { width: 16px; height: 16px; border-radius: 50%; position: relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 0 0 1px var(--line); }
.swatch.is-out { opacity: .45; }
.swatch.is-out::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: #E2483B;
  transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
/* Selectable colour swatch on cards (a button): first preselected, tap to change. */
.swatch-pick { width: 18px; height: 18px; padding: 0; border: 0; cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s; }
.swatch-pick:hover { transform: scale(1.12); }
.swatch-pick.is-sel { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--green-d); transform: scale(1.14); }
/* the "multicolour" cover dot (rainbow) */
.swatch-multi { background: conic-gradient(from 140deg, #F2674E, #F2C653, #8FB847, #2BB7A9, #3FA7D6, #8E6FD6, #F2674E); }
.swatch-pick:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.card-add-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 48px 0; font-size: 1.05rem; }

/* ---------------- About ---------------- */
.about { padding: clamp(64px, 9vw, 110px) 0; }
.about-grid2 { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.about .eyebrow { margin-bottom: 18px; }
.about p { color: var(--ink-soft); font-size: 1.08rem; }
.about-copy { max-width: 68ch; }
.about-copy p { margin-bottom: 1.1rem; line-height: 1.8; }
.about-copy strong { color: var(--ink); font-weight: 700; }
.about-copy .about-emphasis { font-family: var(--font-head); font-weight: 700; color: var(--green-d); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.25; margin: 1.5rem 0; }
.about-photo {
  position: sticky; top: 96px;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--oak-d); box-shadow: var(--shadow);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 3.6; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.stat { background: #FFFDF6; border: 1px solid var(--oak-d); border-radius: var(--radius); padding: 24px 18px; text-align: center; box-shadow: var(--shadow-sm); }
.stat .big { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--green-d); line-height: 1.15; }
.stat:nth-child(2) .big { color: var(--gold-d); }
.stat:nth-child(3) .big { color: var(--teal-d); }
.stat .lbl { display: block; margin-top: 6px; font-size: .92rem; color: var(--ink-soft); }

/* ---------------- Product page (PDP) ---------------- */
.pdp { padding: clamp(24px,4vw,40px) 0 clamp(56px,8vw,90px); }
.pdp-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--ink-soft); margin-bottom: 22px; transition: color .2s; }
.pdp-back:hover { color: var(--green-d); }
.pdp-back .back-ic { width: 18px; height: 18px; }
[dir="rtl"] .pdp-back .back-ic { transform: scaleX(-1); }
.pdp-loading, .pdp-notfound { color: var(--ink-soft); padding: 60px 0; text-align: center; font-size: 1.1rem; }
.pdp-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,60px); align-items: start; }
.pdp-gallery { position: sticky; top: 96px; }
.pdp-main { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pdp-main img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pdp-thumb { width: 74px; height: 74px; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: var(--surface); cursor: pointer; padding: 0; transition: border-color .2s; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover, .pdp-thumb.is-active { border-color: var(--green); }
.pdp-info { padding-top: 6px; }
.pdp-cat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 14px; }
.cat-dot2 { width: 11px; height: 11px; border-radius: 50%; }
.pdp-title { font-size: clamp(1.8rem,3.6vw,2.7rem); letter-spacing: -.015em; margin-bottom: 14px; }
.pdp-badges { margin-bottom: 18px; }
/* Price styled like the store's yellow shelf tags */
.pdp-price {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  color: var(--ink); background: var(--gold); padding: 4px 18px; border-radius: 10px;
  box-shadow: 0 6px 14px -8px rgba(217,165,33,.7); margin: 0 0 18px;
}
.pdp-spec { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 8px; }
.pdp-spec span { font-weight: 600; color: var(--ink); }
.pdp-colors { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 16px 0; }
.pdp-label { font-size: .95rem; color: var(--ink-soft); }
.pdp-colors .swatch { width: 22px; height: 22px; flex: 0 0 auto; }
/* Colours listed vertically — one per row */
.pdp-swatch-list { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 340px; }
.pdp-swatch-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: start;
  background: var(--surface); border: 1px solid var(--line); padding: 9px 13px; margin: 0; cursor: pointer;
  font: inherit; border-radius: 12px; transition: border-color .15s, background .15s; }
.pdp-swatch-item:hover { border-color: var(--oak-d); background: var(--paper); }
.pdp-swatch-item .swatch { transition: box-shadow .15s, transform .15s; }
.pdp-swatch-item.is-active { border-color: var(--green-d); background: color-mix(in srgb, var(--green) 8%, #fff); }
.pdp-swatch-item.is-active .swatch { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--green-d); transform: scale(1.1); }
.pdp-swatch-name { font-size: .9rem; font-weight: 600; color: var(--ink); }
.pdp-swatch-tag { margin-inline-start: auto; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  color: #E2483B; background: #FBEDED; border: 1px solid #F1C9C9; padding: 3px 9px; border-radius: 999px; }
.pdp-oos-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.pdp-oos-ph[hidden] { display: none; }
.pdp-oos-ph span { position: relative; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
  color: #fff; background: rgba(24,30,27,.9); padding: 10px 22px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.pdp-desc { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; margin: 18px 0 26px; max-width: 52ch; }
.pdp-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.pdp-feats { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.pdp-feat { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 500; font-size: .85rem; padding: 7px 12px; border-radius: var(--radius-pill); background: #F2F0E6; color: var(--green-d); }
.pdp-feat-ic { display: inline-flex; }
.pdp-feat-ic svg { width: 16px; height: 16px; }
.pdp-setnote { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: .92rem; color: var(--gold-d); background: #FBF1D2; padding: 8px 14px; border-radius: var(--radius-sm); margin: 18px 0 10px; }
.pdp-related { margin: 16px 0; }
.pdp-related .pdp-label { display: block; margin-bottom: 10px; }
.pdp-mini-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pdp-mini { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: inherit; transition: border-color .2s; max-width: 280px; }
[dir="rtl"] .pdp-mini { padding: 8px 8px 8px 14px; }
.pdp-mini:hover { border-color: var(--green); }
.pdp-mini img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.pdp-mini span { font-family: var(--font-body); font-weight: 500; font-size: .9rem; }
@media (max-width: 820px) {
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }

  /* Stacked on a phone, the colour picker sat far below the photo (after code /
     capacity / shape / features), so tapping a colour swapped an image that was
     already scrolled off-screen. Lift the swatches to just under the title+price,
     where the photo is still visible. Desktop is unaffected — there the gallery is
     sticky, so the photo follows the reader anyway. */
  .pdp-info { display: flex; flex-direction: column; }
  .pdp-info > * { order: 6; }   /* the rest keeps its DOM order, after the block below */
  .pdp-cat { order: 1; }
  .pdp-title { order: 2; }
  .pdp-badges { order: 3; }
  .pdp-price { order: 4; }
  .pdp-colors { order: 5; }
  /* these are inline-level normally; as flex items they'd stretch to full width
     (the price and set-note are coloured pills, so that would show). */
  .pdp-cat, .pdp-price, .pdp-setnote { align-self: flex-start; }
}

/* ---------------- Why ---------------- */
.why { padding: clamp(56px, 8vw, 100px) 0; background: linear-gradient(180deg, var(--paper), #FFFDF8); }
.why-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.why-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin-top: 12px; }
.why-head p { color: var(--ink-soft); margin-top: 12px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); }
.feature .fic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; color: #fff; }
.feature .fic svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.14rem; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.feature p { color: var(--ink-soft); font-size: .96rem; }

/* ---------------- Contact — back to the fascia ---------------- */
/* ===== Corporate / wholesale (B2B) ===== */
.corporate { padding: clamp(56px, 8vw, 100px) 0; background: var(--surface); border-top: 1px solid var(--line); }
.corporate-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.corporate .eyebrow { margin-bottom: 14px; }
.corporate h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 14px; }
.corp-lead { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.75; max-width: 54ch; }

.corp-points { list-style: none; margin: 26px 0 28px; padding: 0; display: grid; gap: 18px; }
.corp-points li { display: flex; gap: 14px; align-items: flex-start; }
.corp-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line); color: var(--green-d); }
.corp-ico svg { width: 21px; height: 21px; }
.corp-txt { display: block; }
.corp-txt b { display: block; font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 4px; }
.corp-txt span { display: block; color: var(--ink-soft); font-size: .95rem; line-height: 1.65; max-width: 48ch; }

.corp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.corp-cta[hidden] { display: none; }   /* `hidden` alone loses to display:flex */
/* the printed number doubles as tap-to-call on a phone */
.corp-number { text-decoration: none; color: var(--ink); line-height: 1.25; }
.corp-number-lbl { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 3px; }
.corp-number b { font-family: var(--font-head); font-size: 1.25rem; color: var(--green-d); white-space: nowrap;
  direction: ltr; unicode-bidi: embed; }   /* keep +961 ... LTR inside the Arabic page */
.corp-number:hover b { text-decoration: underline; }
.corp-note { display: block; margin-top: 16px; font-size: .82rem; color: var(--ink-soft); line-height: 1.55; max-width: 52ch; }

.corporate-photo { margin: 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--oak-d); box-shadow: var(--shadow); }
.corporate-photo img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.corporate-photo figcaption { padding: 13px 18px; background: var(--paper); font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }

@media (max-width: 820px) {
  .corporate-grid { grid-template-columns: 1fr; gap: 30px; }
  /* photo first on a phone: the branded cars are the credibility hook */
  .corporate-photo { order: -1; }
}

.contact { background: var(--fascia); color: #fff; padding: clamp(64px, 9vw, 110px) 0; }
.contact-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.contact .eyebrow { color: var(--gold); }
.contact .eyebrow::before { background: var(--gold); }
.contact h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 12px 0 14px; }
.contact p { color: var(--on-dark); max-width: 44ch; }
.contact-meta { margin-top: 16px; font-size: .95rem; color: var(--on-dark-soft); display: flex; align-items: center; gap: 8px; }
.contact-actions { display: flex; flex-direction: column; gap: 14px; }
.contact-actions .btn { justify-content: center; }
.contact-social { margin-top: 26px; }
.contact-social-label { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); font-weight: 700; margin-bottom: 12px; }
.contact-social-row { display: flex; flex-wrap: wrap; gap: 12px; }
.social-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: .98rem; color: #fff; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.social-btn svg { width: 22px; height: 22px; }
.social-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.28); filter: brightness(1.06); }
.social-btn.ig { background: linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); }
.social-btn.fb { background: #1877F2; }
.social-btn.tt { background: #111; border: 1px solid rgba(255,255,255,.22); }
.btn-wa { background: #25D366; color: #06351b; }
.btn-wa:hover { background: #1eb858; color: #06351b; }

/* ---------------- Footer (continues the fascia) ---------------- */
.site-footer { background: var(--fascia); border-top: 1px solid rgba(255,255,255,.09); padding: 36px 0 28px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-brand .tag { color: var(--on-dark); font-size: .95rem; }
.footer-meta { text-align: right; color: var(--on-dark-soft); font-size: .88rem; }
[dir="rtl"] .footer-meta { text-align: left; }
.footer-social { display: flex; gap: 10px; align-items: center; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--on-dark); background: rgba(255,255,255,.08); transition: background .18s ease, color .18s ease, transform .18s ease; }
.footer-social a:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { max-width: 480px; max-height: none; aspect-ratio: 4 / 3.4; justify-self: start; }
  .about-grid2 { grid-template-columns: 1fr; }
  .about-photo { position: static; max-width: 520px; }
  .about-photo img { aspect-ratio: 4 / 3.2; }
  .rail-track { grid-template-columns: 1fr 1fr; padding-top: 26px; }
  .rail-track::before { display: none; }
  .tag-card::before { display: none; }
  .contact-inner { grid-template-columns: 1fr; }
  .wall { width: clamp(220px, 38vw, 280px); }
}
@media (max-width: 680px) {
  .site-nav {
    position: absolute; top: 74px; inset-inline: 0; flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
    box-shadow: var(--shadow-sm);
  }
  .site-nav.is-open { max-height: 320px; }
  .site-nav a { padding: 14px 24px; width: 100%; border-bottom: 1px solid var(--line); color: var(--ink); }
  .nav-toggle { display: flex; }
  .stats { grid-template-columns: 1fr; }
  .rail-track { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tag-card { font-size: .85rem; padding: 11px 10px; }
  .wall { width: 74vw; }
  .hero-photo { justify-self: stretch; }

  /* Denser catalog: 2 cards per row, internals condensed. */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-body { padding: 9px 10px 10px; }
  .card-code-pill { font-size: .6rem; padding: 1px 6px; margin-bottom: 4px; }
  .card-badges { gap: 4px; margin-bottom: 4px; min-height: 0; }
  .badge { font-size: .58rem; padding: 2px 6px; }
  .card-title { font-size: .86rem; line-height: 1.22; margin-bottom: 2px; }
  .card-price { font-size: .98rem; margin-bottom: 4px; }
  .card-specs { gap: 1px; margin-bottom: 6px; }
  .card-spec { font-size: .72rem; gap: 5px; line-height: 1.2; }
  .card-spec .cs-k { flex-basis: 32px; font-size: .6rem; }
  /* Feature icons (microwave/freezer/…) dropped on mobile — non-essential, save space. */
  .card-feats { display: none; }
  .card-colors { gap: 5px; margin-bottom: 8px; }
  .card-colors-label { font-size: .68rem; }
  .swatches { gap: 5px; }
  .swatch { width: 14px; height: 14px; }
  .swatch-pick { width: 15px; height: 15px; }
  /* .card prefix raises specificity over the base .card-add defined later in the file. */
  .card .card-add { margin-top: 8px; padding: 7px 8px; font-size: .72rem; gap: 5px; }
  .card .card-add .cart-ic { width: 14px; height: 14px; }
}

/* ============================================================
   Basket — header button, add-to-basket, drawer, checkout,
   and the maintenance splash.
   ============================================================ */

/* Header cart button (light chrome) */
.cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--oak-d); background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.cart-btn:hover { border-color: var(--green-d); color: var(--green-d); }
.cart-btn svg { width: 21px; height: 21px; }
.cart-count {
  position: absolute; top: -5px; inset-inline-end: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: .7rem; line-height: 1;
  color: #1A130A; background: var(--orange); border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px -1px rgba(245,130,32,.6);
}
.cart-count[hidden] { display: none; }

/* Add-to-basket button on catalog cards (dark "store" pill, fills orange on hover) */
.card-add {
  width: 100%; margin-top: 12px; justify-content: center; gap: 8px;
  padding: 9px 14px; font-size: .86rem; font-weight: 600;
  background: var(--fascia); color: #fff; border-radius: var(--radius-pill); border: 2px solid var(--fascia);
}
.card-add:hover { background: var(--orange); border-color: var(--orange); color: #1A130A; }
/* "Choose a colour" state: multi-colour cover selected, no specific colour picked yet. */
.card-add.is-choose, .card-add:disabled {
  background: var(--surface); color: var(--ink-soft); border-color: var(--line);
  cursor: not-allowed; box-shadow: none;
}
.card-add.is-choose:hover, .card-add:disabled:hover { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.cart-ic { width: 17px; height: 17px; flex: 0 0 auto; }

/* PDP buy row: quantity stepper + add button */
.pdp-buy { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.qty-stepper {
  display: inline-flex; align-items: center; gap: 4px;
  border: 2px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); padding: 3px;
}
.qty-btn {
  width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer;
  font-size: 1.15rem; font-weight: 700; color: var(--ink); border-radius: 50%;
  display: grid; place-items: center; transition: background .15s;
}
.qty-btn:hover { background: var(--paper); }
.qty-n { min-width: 30px; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.pdp-add.is-disabled, .pdp-add:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Drawer ---- */
body.cart-open { overflow: hidden; }
.cart-backdrop { position: fixed; inset: 0; background: rgba(20,24,22,.5); z-index: 90; }
.cart-backdrop:not([hidden]) { animation: cartFade .25s var(--ease); }
.cart-drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 91;
  width: min(430px, 92vw); display: flex; flex-direction: column;
  background: var(--paper); box-shadow: -24px 0 60px -30px rgba(0,0,0,.5);
}
[dir="rtl"] .cart-drawer { box-shadow: 24px 0 60px -30px rgba(0,0,0,.5); }
/* the [hidden] attr must beat the .cart-drawer display:flex above, or close fails */
.cart-drawer[hidden], .cart-backdrop[hidden] { display: none; }
.cart-drawer:not([hidden]) { animation: cartSlide .3s var(--ease); }
@keyframes cartFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cartSlide { from { transform: translateX(100%); } to { transform: none; } }
[dir="rtl"] .cart-drawer:not([hidden]) { animation: cartSlideR .3s var(--ease); }
@keyframes cartSlideR { from { transform: translateX(-100%); } to { transform: none; } }
.cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 22px; background: var(--fascia); color: #fff; flex: 0 0 auto;
}
.cart-head h2 { color: #fff; font-size: 1.3rem; }
.cart-close { background: none; border: 0; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.cart-close:hover { color: var(--orange); }
.cart-body { flex: 1; overflow-y: auto; padding: 18px 22px 26px; }
.cart-empty { color: var(--ink-soft); text-align: center; padding: 48px 0; }

.cart-items { display: flex; flex-direction: column; gap: 14px; }
.cart-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: start; }
.cart-thumb { width: 60px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-name { font-family: var(--font-head); font-weight: 600; font-size: .95rem; line-height: 1.25; }
.cart-item-sub { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: .8rem; color: var(--ink-soft); }
.cart-swatch { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex: 0 0 auto; }
.cart-item-code { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; }
.cart-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cart-qty-btn { width: 26px; height: 26px; border: 1px solid var(--line); background: var(--surface); border-radius: 50%; cursor: pointer; font-size: 1rem; font-weight: 700; color: var(--ink); display: grid; place-items: center; }
.cart-qty-btn:hover { border-color: var(--green); }
.cart-qty-n { min-width: 20px; text-align: center; font-weight: 700; }
.cart-remove { margin-inline-start: 6px; background: none; border: 0; color: var(--coral); font-size: .78rem; font-weight: 600; cursor: pointer; padding: 0; }
.cart-remove:hover { text-decoration: underline; }
.cart-item-line { font-family: var(--font-head); font-weight: 700; color: var(--green-d); white-space: nowrap; }

.cart-subtotal { display: flex; align-items: center; justify-content: space-between; margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 1rem; }
.cart-subtotal b { font-family: var(--font-head); font-size: 1.3rem; color: var(--ink); }

.cart-form-title { font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 12px; }
.cart-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .9rem; color: var(--ink-soft); padding: 0; margin-bottom: 16px; }
.cart-back:hover { color: var(--green-d); }
[dir="rtl"] .cart-back-arrow { display: inline-block; transform: scaleX(-1); }
.cart-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
/* Anti-spam honeypot: hidden off-screen (not display:none, which some bots skip). Real customers never see or tab to it. */
.cart-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cart-field { display: flex; flex-direction: column; gap: 5px; }
.cart-field span { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.cart-field span em { font-weight: 400; font-style: normal; opacity: .8; }
.cart-field input, .cart-field textarea {
  font-family: var(--font-body); font-size: .95rem; padding: 10px 12px;
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
  transition: border-color .2s; width: 100%; resize: vertical;
}
.cart-field input:focus, .cart-field textarea:focus { outline: none; border-color: var(--orange); }
/* phone with a fixed +961 prefix */
.phone-field { display: flex; align-items: stretch; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.phone-field:focus-within { border-color: var(--orange); }
.phone-cc { display: flex; align-items: center; padding: 0 11px; background: var(--paper); color: var(--ink-soft); font-weight: 600; font-size: .92rem; border-inline-end: 2px solid var(--line); }
.phone-field input { flex: 1; min-width: 0; border: 0; border-radius: 0; padding: 10px 12px; font-family: var(--font-body); font-size: .95rem; background: transparent; color: var(--ink); }
.phone-field input:focus { outline: none; border: 0; }
[dir="rtl"] .phone-field { direction: ltr; }
.cart-place { width: 100%; margin-top: 6px; }

/* checkout: optional "share my location" */
.cart-geo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 14px; }
.cart-geo-btn { font-family: var(--font-body); font-weight: 600; font-size: .9rem; cursor: pointer;
  padding: 9px 14px; border-radius: var(--radius-pill); border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .2s, color .2s; }
.cart-geo-btn:hover { border-color: var(--green); color: var(--green-d); }
.cart-geo-btn:disabled { opacity: .6; cursor: default; }
.cart-geo-btn:disabled:hover { border-color: var(--line); color: var(--ink); }
.cart-geo-status { font-size: .85rem; font-weight: 600; color: var(--green-d); }
.cart-geo-hint { flex-basis: 100%; font-size: .78rem; color: var(--ink-soft); line-height: 1.45; }
.cart-geo-hint b { font-weight: 600; color: var(--ink); }
/* the GPS can take up to 10s — a spinner proves it's working, not stuck */
.geo-spin { display: inline-block; vertical-align: -2px; width: 13px; height: 13px; margin-inline-end: 7px;
  border: 2px solid var(--line); border-top-color: var(--green); border-radius: 50%;
  animation: geo-spin .7s linear infinite; }
@keyframes geo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .geo-spin { animation-duration: 2.4s; } }
/* a dropped/failed fix needs a full sentence, so it gets its own line */
.geo-warn { flex-basis: 100%; display: block; font-weight: 500; color: var(--coral); line-height: 1.45; }

/* checkout: subtotal + delivery breakdown, sitting just above the Total */
.cart-fee { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.cart-fee-row { display: flex; justify-content: space-between; gap: 12px;
  font-size: .92rem; color: var(--ink-soft); margin-bottom: 5px; }
.cart-fee-note { display: block; margin-top: 6px; font-size: .78rem; color: var(--ink-soft); line-height: 1.45; }

/* checkout: payment method (cash on delivery — the only option today) */
.cart-pay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 2px 0 12px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--line); }
.cart-pay-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.cart-pay-mode { font-size: .98rem; font-weight: 700; color: var(--ink); }
.cart-pay-note { flex-basis: 100%; font-size: .78rem; color: var(--ink-soft); line-height: 1.45; }

/* "Order through WhatsApp" — filled pill in WhatsApp green, matching .btn-primary's
   weight (same dark ink + tinted shadow) so the two read as one pair of choices. */
.cart-wa-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #25D366; color: #1A130A; border: 2px solid transparent;
  box-shadow: 0 10px 24px -10px rgba(37,211,102,.55); }
.cart-wa-btn:hover { background: #1DB954; color: #1A130A; }
.cart-wa-btn .wa-ico { width: 19px; height: 19px; flex: none; }
.cart-wa-hint { display: block; margin-top: 7px; font-size: .78rem; color: var(--ink-soft); line-height: 1.45; text-align: center; }
.cart-wa-send { width: 100%; margin: 4px 0 10px; text-decoration: none; }

/* clear-all (basket) — destructive, so it takes a second deliberate tap */
.cart-clearrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.cart-clear:hover { color: var(--coral); text-decoration: underline; }
/* The question takes its own line so the two buttons always sit together below it,
   with Cancel last (right). Keeps "Yes, clear" out of the spot "Clear all" occupied,
   at every width — otherwise on narrow drawers the row wraps and "Yes, clear" lands
   exactly under a double-tap. */
.cart-clear-q { flex-basis: 100%; font-size: .85rem; color: var(--ink-soft); }
.cart-clear-yes { font-family: var(--font-body); font-weight: 700; font-size: .85rem; cursor: pointer;
  border: 0; border-radius: var(--radius-pill); padding: 7px 16px; background: var(--coral); color: #fff; }
.cart-clear-yes:hover { filter: brightness(1.06); }

/* success panel */
.cart-success { text-align: center; padding: 20px 6px; }
.cart-success-check { width: 62px; height: 62px; margin: 6px auto 16px; border-radius: 50%; background: #EAF6E0; color: var(--green-d); display: grid; place-items: center; }
.cart-success-check svg { width: 32px; height: 32px; }
.cart-success h3 { font-family: var(--font-head); font-size: 1.4rem; margin-bottom: 8px; }
.cart-success-msg { color: var(--ink-soft); margin-bottom: 14px; }
.cart-success-ref { margin-bottom: 18px; font-size: .95rem; }
.cart-success-ref b { font-family: ui-monospace, Menlo, monospace; color: var(--ink); }
.cart-wa { width: 100%; }
.cart-success-alt { display: flex; justify-content: center; gap: 20px; margin-top: 14px; }
.cart-linkbtn { background: none; border: 0; color: var(--ink-soft); font-family: var(--font-body); font-weight: 600; font-size: .9rem; cursor: pointer; }
.cart-linkbtn:hover { color: var(--green-d); text-decoration: underline; }

/* toast */
.cart-toast {
  position: fixed; inset-inline: 0; bottom: 26px; margin-inline: auto; width: max-content; max-width: 86vw; z-index: 95;
  background: var(--fascia); color: #fff; font-weight: 600; font-size: .92rem;
  padding: 12px 22px; border-radius: var(--radius-pill); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.cart-toast.is-on { opacity: 1; transform: none; }

@media (max-width: 680px) {
  .cart-item { grid-template-columns: 52px 1fr auto; }
  .cart-thumb { width: 52px; height: 52px; }
}

/* ---- Maintenance splash ---- */
.maintenance-body { background: var(--fascia); color: #fff; min-height: 100vh; display: grid; place-items: center; }
.maintenance { text-align: center; padding: 40px 24px; max-width: 540px; }
.maintenance-logo { height: 64px; width: auto; margin: 0 auto 28px; }
.maintenance h1 { color: #fff; font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: 14px; }
.maintenance p { color: var(--on-dark); font-size: 1.1rem; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}