/* ============================================================
   qrv3 — ajustări fără rebuild (încărcat după bundle-ul principal)
   ============================================================ */

/* 1) Eticheta detaliată ANPC (ingrediente + aditivi + valori
   nutriționale, inclusiv kJ și fibre) e randată acum în cardul
   "Ingrediente" direct din api.php. Ascundem cardul vechi de
   nutriție, care conținea butonul "Vezi eticheta completă" și
   textul standard ANPC. E singurul <div> cu buton bg-muted/30
   ca fiu direct (unic în bundle). */
div:has(> button.bg-muted\/30) {
  display: none !important;
}

/* 2) Lista de preparate: la selectarea unei categorii, aplicația
   face scrollIntoView({block:"start"}) pe secțiune, dar cele două
   bare sticky (header top-0 ~180px + bara de categorii top-[180px]
   ~101px) o acopereau, tăind primul preparat. Rezervăm spațiu cât
   ambele bare, ca secțiunea să înceapă sub ele. */
.space-y-8 > div {
  scroll-margin-top: 296px;
}

/* ============================================================
   AJUSTĂRI VIZUALE (design) — cerute punctual
   ============================================================ */

/* D1) Hero — banda de sus (cover/poză) mai înaltă, iar cardul COBORÂT sub ea,
   ca poza de prezentare să se vadă deasupra cardului (suprapunere mică jos). */
.h-\[280px\] { height: 380px !important; }              /* înălțimea benzii cover */
.max-w-lg.-mt-16 { margin-top: -60px !important; }       /* cardul coborât — poza se vede deasupra */

/* D2) Hero — logo (1/4) și nume (3/4) pe ACELAȘI RÂND, aliniate vertical la centru.
   Rândul antet `flex items-start gap-4 mb-4` (logo | nume) rămâne rând. */
.flex.items-start.gap-4.mb-4 {
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  text-align: left !important;
}
.flex.items-start.gap-4.mb-4 > div:first-child {   /* wrapperul logo-ului — 1/4, fără fundal */
  flex: 0 0 25% !important;
  width: 25% !important;
  max-width: 25% !important;
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.flex.items-start.gap-4.mb-4 > div:first-child img {
  width: 100% !important;
  height: auto !important;
  max-height: 80px !important;
  object-fit: contain !important;
}
.flex.items-start.gap-4.mb-4 > div:last-child {     /* blocul cu numele — 3/4 */
  flex: 1 1 auto !important;
  text-align: left !important;
}

/* D3) Iconițe colorate — iconițele gri (lucide `text-muted-foreground`)
   primesc culoarea de accent a brandului, ca cele de la Direcții/WiFi. */
svg.lucide.text-muted-foreground {
  color: var(--accent-foreground) !important;
}

/* D4) Hero — iconițele social (Facebook/Instagram/TikTok): mai mari
   (cerc 40px → 56px, iconiță 20px → 28px) ȘI în ton cu tema —
   fundal = accentul temei, iconiță = culoarea principală. Folosind
   variabile, se adaptează automat la fiecare preset. */
a[aria-label="Facebook"],
a[aria-label="Instagram"],
a[aria-label="TikTok"],
a[aria-label="Website"] {
  width: 3.5rem !important;
  height: 3.5rem !important;
  background: var(--accent) !important;
  color: var(--primary) !important;
}
a[aria-label="Facebook"] svg,
a[aria-label="Instagram"] svg,
a[aria-label="TikTok"] svg,
a[aria-label="Website"] svg {
  width: 1.75rem !important;
  height: 1.75rem !important;
  color: var(--primary) !important;
}

/* D4b) Hero — ascundem butonul de dark mode (la cererea userului). */
button[aria-label="Toggle dark mode"] { display: none !important; }

/* D5) Hero — cardurile de categorii cu poză: imaginea ocupă jumătatea
   de sus, pe toată lățimea, fără margini; numele în jumătatea de jos.
   Se aplică doar cardurilor cu imagine (cele cu emoji rămân la fel). */
.grid.grid-cols-3.gap-4 > a > div:has(> .overflow-hidden) {
  padding: 0 !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.grid.grid-cols-3.gap-4 > a > div > .overflow-hidden {
  width: 100% !important;
  height: 50% !important;
  flex: 0 0 50% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
}
.grid.grid-cols-3.gap-4 > a > div > .overflow-hidden img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.grid.grid-cols-3.gap-4 > a > div:has(> .overflow-hidden) > p {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* D5b) Carduri de categorii mai mari — 2 pe rând în loc de 3, cu poza
   proporțional mai mare. Numele rămâne în jumătatea de jos. */
.grid.grid-cols-3.gap-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.grid.grid-cols-3.gap-4 > a > div:has(> .overflow-hidden) > p {
  font-size: 15px !important;
  padding: 8px 6px !important;
}

/* D5d) Poza cardului de categorie — scoatem rotunjirea proprie a pozei.
   Vine din `#root .rounded-xl` = 22px (D10 claymorphism), care, fiind
   selector cu ID, bate `border-radius:0` din D5. O rescriem cu prefix
   `#root` (specificitate mai mare) → marginea de jos a pozei devine
   dreaptă. Colțurile de sus rămân rotunde: le taie `overflow:hidden`
   al cardului (rounded-2xl). */
#root .grid.grid-cols-3.gap-4 > a > div > .overflow-hidden {
  border-radius: 0 !important;
}

/* D5e) Cardurile de categorii — titlul mai sus, 2 rânduri rezervate pentru
   denumire și cardul un pic mai scurt. Renunțăm la pătratul forțat
   (aspect-ratio:1/1) care lăsa o jumătate goală sub poză: poza primește
   un raport fix 3/2, iar titlul stă imediat sub ea, pe max 2 rânduri
   (înălțime rezervată → ambele carduri de pe rând rămân egale). */
#root .grid.grid-cols-3.gap-4 > a > div:has(> .overflow-hidden) {
  aspect-ratio: auto !important;
}
#root .grid.grid-cols-3.gap-4 > a > div > .overflow-hidden {
  height: auto !important;
  flex: 0 0 auto !important;
  aspect-ratio: 3 / 2 !important;
}
#root .grid.grid-cols-3.gap-4 > a > div:has(> .overflow-hidden) > p {
  flex: 0 0 auto !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  text-align: center !important;
  box-sizing: border-box !important;
  /* 3 rânduri (3 × 15px × 1.3 ≈ 58.5px) + padding (14px) ≈ 72.5px.
     border-box include padding-ul în min-height, deci rezervăm ~4.5rem. */
  min-height: 4.5rem !important;
  line-height: 1.3 !important;
  padding: 8px 8px 6px !important;    /* titlul lipit de poză (mai sus) */
  margin: 0 !important;
}

/* D5c) Bara de categorii (Menu) — scoatem iconița de pe butonul „Toate"
   (celelalte categorii nu au iconiță). E primul buton din bara sticky
   `.px-4.py-3.overflow-x-auto` (unică), iconița e `span.text-2xl`. */
.px-4.py-3.overflow-x-auto > button:first-child > span.text-2xl {
  display: none !important;
}

/* D6) Cardul de preparat (lista de categorie): afișăm denumirea completă
   și exportul de meniu — varianta scurtă (ingrediente fără cantități),
   fără trunchiere, titlu mai mic. Titlul e `h3.line-clamp-1` (18px),
   descrierea `p.line-clamp-2`; scoatem line-clamp-ul de pe ambele.
   Textul vine din api.php (câmpul `description` = anpc_menu_short). */
a[href*="/product/"] h3.line-clamp-1 {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  font-size: 15px !important;     /* titlu mai mic (era 18px) */
  line-height: 1.3 !important;
}
a[href*="/product/"] p.line-clamp-2 {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
}

/* D7) Pagina de produs — secțiuni pliabile (details/summary) pentru
   „Declarație detaliată" și „Valori nutriționale". Ascundem markerul
   nativ și rotim chevronul propriu la deschidere. */
details.anpc-acc {
  border-top: 1px solid var(--border);
}
details.anpc-acc:first-of-type {
  border-top: none;
}
summary.anpc-sum {
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
summary.anpc-sum::-webkit-details-marker {
  display: none;
}
summary.anpc-sum .anpc-chev {
  transition: transform 0.2s ease;
  color: var(--muted-foreground);
}
details.anpc-acc[open] > summary.anpc-sum .anpc-chev {
  transform: rotate(180deg);
}

/* D8) Pagina de produs — „Se potrivește cu": cardurile de produse
   asociate au titlul `h4.line-clamp-1` (un rând). Rezervăm 2 rânduri
   pentru denumire (clamp la 2 + înălțime minimă), ca numele lungi să
   încapă și prețurile să rămână aliniate. */
a[href*="/product/"] h4.line-clamp-1 {
  -webkit-line-clamp: 2 !important;
  min-height: 2.5rem !important;   /* 2 × line-height (text-sm ≈ 1.25rem) */
}

/* D9) Iconițe mai fine / mai abstracte: subțiem stroke-ul iconițelor SVG
   line (lucide) de la 2 la 1.5 — mai puțin „default bold", mai rafinat.
   Include și iconițele injectate din index.html (emoji → line-icon). */
svg.lucide { stroke-width: 1.5px !important; }
.qr-emoji-ico svg { stroke-width: 1.5; }
/* iconița lone (înlocuiește un emoji singur în chip) n-are nevoie de margine,
   distanța o dă gap-ul flex al chip-ului; în titluri svg-ul are text alături
   și își păstrează margin-right. */
.qr-emoji-ico > svg:only-child { margin-right: 0 !important; }

/* D10) Badge-uri de produs (Vegan/Picant/Nou/Chef-ului...) — fundal și text
   unificate în paletă în loc de curcubeu (bg-red-50/text-red-700 etc.);
   iconița (currentColor) devine verde, ca restul. */
span.inline-flex.rounded-full.text-xs.font-medium {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
}

/* D11) Hero — eliminăm elemente redundante:
   - cardul „Locație & Program" (avem deja butoanele Direcții + Sună)
   - caseta „Rețea WiFi / Parolă" (avem deja butonul WiFi)
   Scopat pe wrapperul hero (.max-w-lg.-mt-16, care NU apare pe pagina de
   produs), deci nu atinge cardurile similare de pe alte pagini. */
.max-w-lg.-mt-16 > .shadow-lg { display: none !important; }   /* cardul Locație & Program */
.max-w-lg.-mt-16 .px-6.pb-4   { display: none !important; }   /* caseta Rețea WiFi / Parolă */

/* D12) Hero — rafinări finale */

/* a) iconițe social: puțin spațiu deasupra */
.max-w-lg.-mt-16 .px-6.pb-6 { padding-top: 1rem !important; }

/* b) iconițe social: claymorphism — cercuri „umflate", moi, convexe.
   Umbră difuză jos-dreapta + reflex de lumină sus-stânga (exterior) și
   highlight interior sus + umbră interioară jos (aspect 3D de clay).
   `#root` ca să batem specificitatea regulii globale de claymorphism.
   Umbre moderate (nu 60px) — doar 2 iconițe statice, fără cost de scroll. */
#root .max-w-lg.-mt-16 .px-6.pb-6 a[aria-label] {
  background: #EDE4D4 !important;
  border-radius: 50% !important;
  box-shadow:
    6px 6px 13px rgba(53, 64, 36, .18),
    -5px -5px 11px rgba(255, 255, 255, .70),
    inset 3px 3px 6px rgba(255, 255, 255, .60),
    inset -4px -4px 7px rgba(53, 64, 36, .13) !important;
}
.dark #root .max-w-lg.-mt-16 .px-6.pb-6 a[aria-label] {
  background: #3E4A2A !important;
  box-shadow:
    6px 6px 13px rgba(0, 0, 0, .30),
    -5px -5px 11px rgba(255, 255, 255, .05),
    inset 3px 3px 6px rgba(255, 255, 255, .06),
    inset -4px -4px 7px rgba(0, 0, 0, .26) !important;
}

/* c) „Categorii": spațiu deasupra, fără icon pizza, text centrat + mai mare */
.max-w-lg.-mt-16 > .mt-6.mb-6 { margin-top: 2.25rem !important; }
.max-w-lg.-mt-16 h3.px-2 {
  text-align: center !important;
  font-size: 1.5rem !important;
}
.max-w-lg.-mt-16 h3.px-2 .qr-emoji-ico svg { display: none !important; }

/* D13) Feedback la apăsare — OPTIMIZAT pentru fluiditate pe mobil.
   Apăsare rapidă și subtilă (scale .96, .15s ease-out, fără overshoot).
   Doar pe butoane + iconițe (NU pe cardurile mari, care au umbre grele de
   claymorphism — scalarea lor re-randează umbra de 60px frame cu frame și
   provoacă jank; cardurile rămân pe animația ușoară din framer-motion). */
#root button,
#root a[aria-label],
#root [role="button"] {
  transition: transform .15s ease-out !important;
}
#root button:active,
#root a[aria-label]:active,
#root [role="button"]:active {
  transform: scale(.96) !important;
}

/* ============================================================
   TEMĂ „beige" (default global) — paletă Ivory beige (#F1E8D4) / Olive (#64712B)
   Rescriem toți tokenii de culoare. `!important` fiindcă tema
   per-restaurant injectează inline pe :root --primary/--ring/
   --sidebar-primary/--sidebar-ring. Aplicat GLOBAL (toate meniurile).
   .dark e după :root ca să câștige în dark mode.
   ============================================================ */
:root {
  --background: #F1E8D4 !important;            /* Ivory beige */
  --foreground: #3E4522 !important;            /* Olive închis (text) */
  --card: #FBF6EC !important;                  /* ivory deschis (peste beige) */
  --card-foreground: #3E4522 !important;
  --popover: #FBF6EC !important;
  --popover-foreground: #3E4522 !important;
  --primary: #64712B !important;    /* butoane/accent = Olive (bate inline-ul de brand al restaurantului) */
  --primary-foreground: #FAF5E9 !important;
  --secondary: #64712B !important;
  --secondary-foreground: #FAF5E9 !important;
  --muted: #E4D9C0 !important;
  --muted-foreground: #5E603D !important;       /* olive-taupe pt. text secundar */
  --accent: #ECE3D0 !important;
  --accent-foreground: #55622A !important;       /* iconițele (D3) devin olive */
  --destructive: #A23B2C !important;
  --destructive-foreground: #F5EFE4 !important;
  --border: rgba(62,69,34,.16) !important;
  --input: transparent !important;
  --input-background: #EFE6D4 !important;
  --switch-background: #CFC3A6 !important;
  --ring: #64712B !important;
  --sidebar: #FBF6EC !important;
  --sidebar-foreground: #3E4522 !important;
  --sidebar-primary: #64712B !important;
  --sidebar-primary-foreground: #FAF5E9 !important;
  --sidebar-accent: #ECE3D0 !important;
  --sidebar-accent-foreground: #55622A !important;
  --sidebar-border: rgba(62,69,34,.16) !important;
  --sidebar-ring: #64712B !important;
}
.dark {
  --background: #242813 !important;             /* Olive adâncit */
  --foreground: #F1E8D4 !important;             /* Ivory beige */
  --card: #3A421F !important;                   /* Olive */
  --card-foreground: #F1E8D4 !important;
  --popover: #3A421F !important;
  --popover-foreground: #F1E8D4 !important;
  --primary: #AEBD63 !important;     /* pe fundal închis, butoane olive luminat */
  --primary-foreground: #242813 !important;
  --secondary: #4A5527 !important;
  --secondary-foreground: #F1E8D4 !important;
  --muted: #333A1B !important;
  --muted-foreground: #BEB597 !important;
  --accent: #3B4421 !important;
  --accent-foreground: #F1E8D4 !important;
  --destructive: #C34B3B !important;
  --destructive-foreground: #F5EFE4 !important;
  --border: rgba(241,232,212,.16) !important;
  --input: rgba(241,232,212,.14) !important;
  --input-background: #313A1A !important;
  --switch-background: #58643A !important;
  --ring: #AEBD63 !important;
  --sidebar: #3A421F !important;
  --sidebar-foreground: #F1E8D4 !important;
  --sidebar-primary: #AEBD63 !important;
  --sidebar-primary-foreground: #242813 !important;
  --sidebar-accent: #3B4421 !important;
  --sidebar-accent-foreground: #F1E8D4 !important;
  --sidebar-border: rgba(241,232,212,.16) !important;
  --sidebar-ring: #AEBD63 !important;
}

/* ============================================================
   D9) Tipografie — titlurile (h1–h4) cu Fraunces (serif premium);
   textul, butoanele, prețurile, tabelele rămân pe Inter. Fontul e
   încărcat prin <link> în index.html. `font-optical-sizing:auto`
   dă mai mult caracter titlurilor mari și menține lizibilitatea la
   cele mici.
   ============================================================ */
#root :is(h1, h2, h3, h4) {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-optical-sizing: auto;
}

/* ============================================================
   D14) Pagina de produs — butonul „Înapoi" identic cu titlul „Meniu"
   din antetul listei: același font serif (Fraunces), aceeași dimensiune
   (text-xl / 1.25rem) și aceeași greutate — h1 se randează la
   font-weight: medium (500) din regula de bază, nu 400. Textul a fost
   tradus în JS (Back → Înapoi). Scoatem și efectul de hover (bg-muted)
   ca butonul să arate ca un titlu simplu.
   ============================================================ */
#root .qr-back-label {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-optical-sizing: auto;
  font-size: 1.25rem !important;      /* text-xl, ca „Meniu" */
  line-height: 1.75rem !important;
  font-weight: 500 !important;        /* medium, exact ca h1 „Meniu" */
}
/* fără efectul de hover (fundalul bg-muted la trecerea mouse-ului) */
#root button:has(.qr-back-label):hover {
  background-color: transparent !important;
}

/* ============================================================
   D15) Cardul de preparat (lista de categorii) — reordonăm coloana de
   conținut ca la cardul de detaliu produs: denumire, apoi preț + gramaj
   la început, iar descrierea / badge-urile / alergenii dedesubt.
   Coloana `.flex-1.min-w-0` devine flex-column ca să putem folosi `order`.
   Scopat pe cardurile de listă (au wrapperul `.flex.gap-4.p-4`), deci NU
   atinge cardurile „Se potrivește cu" din pagina de produs.
   ============================================================ */
a[href*="/product/"] .flex.gap-4.p-4 > .flex-1.min-w-0 {
  display: flex !important;
  flex-direction: column !important;
}
/* 1) denumirea */
a[href*="/product/"] .flex-1.min-w-0 > .flex.items-start.justify-between.gap-2.mb-1 {
  order: 1 !important;
}
/* 2) preț + gramaj, imediat sub denumire */
a[href*="/product/"] .flex-1.min-w-0 > .flex.items-center.justify-between {
  order: 2 !important;
  margin-bottom: 0.5rem !important;
}
/* 3) descriere */
a[href*="/product/"] .flex-1.min-w-0 > p.line-clamp-2 {
  order: 3 !important;
}
/* 4) badge-uri + alergeni (păstrează ordinea lor din DOM) */
a[href*="/product/"] .flex-1.min-w-0 > .flex.gap-1.mb-2 {
  order: 4 !important;
}

/* ============================================================
   D10) CLAYMORPHISM — suprafețe „umflate", moi, foarte rotunde.
   Umbră dublă: highlight interior sus + umbră interioară jos
   (aspect 3D convex) + drop-shadow difuz în afară. Culorile
   umbrelor sunt derivate din tema Bone/Kombu. Light + dark.
   ============================================================ */

/* colțuri mai rotunde (clay = foarte rotund) */
#root .rounded-xl  { border-radius: 22px !important; }
#root .rounded-2xl { border-radius: 30px !important; }
#root .rounded-3xl { border-radius: 40px !important; }

/* --- carduri / suprafețe (bg-card) — puternic umflate --- */
#root .bg-card {
  border-color: transparent !important;
  box-shadow:
    0 32px 60px -20px rgba(53, 64, 36, 0.45),
    inset 0 12px 24px rgba(255, 255, 255, 0.78),
    inset 0 -18px 32px rgba(53, 64, 36, 0.16) !important;
}

/* --- butoane primare (Kombu, închise) — foarte bombate --- */
#root .bg-primary {
  border-color: transparent !important;
  box-shadow:
    0 22px 38px -10px rgba(53, 64, 36, 0.65),
    inset 0 9px 18px rgba(255, 255, 255, 0.30),
    inset 0 -14px 24px rgba(0, 0, 0, 0.35) !important;
}

/* --- pastile / chip-uri deschise (accent, muted, alergeni) --- */
#root .bg-accent,
#root .bg-muted,
#root [class*="bg-muted/"],
#root .bg-secondary {
  border-color: transparent !important;
  box-shadow:
    0 14px 26px -6px rgba(53, 64, 36, 0.30),
    inset 0 6px 12px rgba(255, 255, 255, 0.70),
    inset 0 -9px 16px rgba(53, 64, 36, 0.15) !important;
}

/* --- DARK MODE — highlight-uri mai discrete, adâncime mai mare --- */
.dark #root .bg-card,
#root.dark .bg-card,
.dark .bg-card {
  box-shadow:
    0 32px 60px -20px rgba(0, 0, 0, 0.70),
    inset 0 12px 24px rgba(255, 255, 255, 0.08),
    inset 0 -18px 32px rgba(0, 0, 0, 0.45) !important;
}
.dark .bg-primary {
  box-shadow:
    0 22px 38px -10px rgba(0, 0, 0, 0.70),
    inset 0 9px 18px rgba(255, 255, 255, 0.55),
    inset 0 -14px 24px rgba(53, 64, 36, 0.30) !important;
}
.dark .bg-accent,
.dark .bg-muted,
.dark [class*="bg-muted/"],
.dark .bg-secondary {
  box-shadow:
    0 14px 26px -6px rgba(0, 0, 0, 0.52),
    inset 0 6px 12px rgba(255, 255, 255, 0.07),
    inset 0 -9px 16px rgba(0, 0, 0, 0.42) !important;
}

/* ============================================================
   D16) Bara de filtre pe dietă (Vegan / Vegetarian / Fără gluten /
   Picant / De post / …) — pastile cu claymorphism ca bara de căutare:
   fundal muted, contur subtil și umbră convexă (highlight sus + umbră
   jos + drop-shadow difuz în afară). Offset-urile sunt proporțional
   mai mici decât la search (pastilele sunt scunde), dar aspectul
   „umflat" e același. Pastila selectată = fundal primar (Kombu) bombat.
   Scop: containerul `flex gap-2 overflow-x-auto pb-2 scrollbar-hide`
   e unic pentru rândul de diete (bara de categorii folosește
   gap-3 px-4 py-3, deci nu e atinsă).
   ============================================================ */
#root .flex.gap-2.overflow-x-auto.pb-2.scrollbar-hide > button {
  background-color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  box-shadow:
    inset 0 4px 8px rgba(255, 255, 255, 0.70),
    inset 0 -6px 12px rgba(53, 64, 36, 0.15) !important;
}
/* pastila selectată — fundal primar bombat (ca butoanele bg-primary) */
#root .flex.gap-2.overflow-x-auto.pb-2.scrollbar-hide > button.bg-primary {
  background-color: var(--primary) !important;
  border-color: transparent !important;
  color: var(--primary-foreground) !important;
  box-shadow:
    inset 0 5px 10px rgba(255, 255, 255, 0.28),
    inset 0 -8px 14px rgba(0, 0, 0, 0.32) !important;
}
/* dark mode — highlight discret, adâncime mai mare (ca D10 dark) */
.dark .flex.gap-2.overflow-x-auto.pb-2.scrollbar-hide > button {
  box-shadow:
    inset 0 4px 8px rgba(255, 255, 255, 0.07),
    inset 0 -6px 12px rgba(0, 0, 0, 0.42) !important;
}
.dark .flex.gap-2.overflow-x-auto.pb-2.scrollbar-hide > button.bg-primary {
  box-shadow:
    inset 0 5px 10px rgba(255, 255, 255, 0.50),
    inset 0 -8px 14px rgba(53, 64, 36, 0.30) !important;
}