/**
 * Porcusorul Pofticios — theme overrides (per-client CSS)
 *
 * Copiat din tema donfood (etalonul CloudShop, cerere user 2026-07-29) si adaptat.
 * Meniul mobil (slide din dreapta, grid 2 coloane de categorii, zero blur) vine
 * de la donfood si ramane identic — e exact ce s-a cerut.
 *
 * Incarcat dupa toate CSS-urile shared + dupa :root inline din layout.php,
 * deci tot ce pun aici castiga cascada.
 *
 * Ultima modificare: 2026-08-11 19:50
 * Modificari:
 *   2026-08-11 19:50 — Textul SELECTAT devine alb: regula shared foloseste --color-white,
 *                       care pe tema dark e suprafata cardului, nu alb => selectia iesea
 *                       text inchis pe rosu. Acum --color-on-primary (bloc la finalul fisierului).
 *   2026-08-11 19:35 — Banda de sub hero scoasa DE PE poza: ::after trecut din absolute in
 *                       flux (display:block dupa .hero-slides) => sta lipita SUB slider, poza
 *                       ramane intreaga. Aura doar in jos.
 *   2026-08-11 19:20 — Delimitarea de sub HERO devine banda de brand (gradient rosu,
 *                       aprins in mijloc, stins spre capete). Acelasi principiu ca
 *                       BrandUnderline din aplicatia mobila.
 *   2026-08-02 12:30 — BREADCRUMBS proprii (bloc la finalul fisierului): nivelul CURENT era
 *                       INVIZIBIL pe tema dark (mostenea --bs-secondary-color de la Bootstrap);
 *                       acum e ALB pe pastila brandului. Plus banda pill, iconita pe fiecare
 *                       nivel dupa data-crumb si chevron auriu in loc de slash.
 *   2026-07-29 14:15 — Fork din tema donfood pentru Porcusorul Pofticios; logo
 *                       PATRAT (1367x1393) => --logo-height 54px si --logo-scale 1
 *                       (trucul donfood cu scale 1.55 sparge header-ul la un logo
 *                       care nu e lat).
 * Istoric donfood (pastrat pentru context):
 *   2026-05-12 15:15 — Scos backdrop-ul intunecat (body.menu-open::before) — meniul mobil
 *                       apare normal, restul site-ului ramane vizibil in spatele lui
 *                       (cerere user: „sa apar meniul normal si sa fie restul cum este acuma").
 *   2026-05-12 15:08 — FIX REAL la „meniul mobil arata blur/intunecat": .site-navbar e
 *                       position:sticky cu z-index 1000 (stacking context). Panel-ul
 *                       z 9995 era doar in contextul navbar-ului (1000) si trecea SUB
 *                       backdrop-ul body::before (z 9990). Solutie: body.menu-open
 *                       .site-navbar z-index 9999 — ridica intreg stacking-ul navbar-ului
 *                       peste backdrop.
 *   2026-05-12 14:58 — Mobile menu: kill toate blur/backdrop-filter pe .navbar-menu si
 *                       descendants cu super-specificity.
 *   2026-05-12 14:50 — Header shift 15% to left on desktop (lg+): transform:translateX(-15%)
 *                       pe .site-navbar > .container. Aplicat doar pe min-width:992px.
 *   2026-05-01 14:30 — Mobile menu rescris complet: slide din DREAPTA (thumb-friendly),
 *                       categorii shop vizibile direct ca grid 2-col compact, items
 *                       compact, ZERO blur pe backdrop, gradient burgundy pe header
 *                       panel, footer CTA "Comanda online".
 *   2026-04-29 15:40 — .product-card SOLID: padding 0 (poza edge-to-edge sus,
 *                       border-radius doar top), body padding propriu. Hover:
 *                       grow scale(1.025) + lift translateY(-8px) + shadow rosu mai puternic.
 *   2026-04-23 21:40 — Creare initiala: logo mare, header distinct pe toate
 *                       paginile, FAQ fundal dark, hero dots pe primary.
 */

/* ==========================================================================
   1. Logo dimensions — logo mare, dar header NU creste in inaltime
   --------------------------------------------------------------------------
   Logo-ul se incadreaza in bara; padding-ul navbar-inner e redus ca header-ul
   sa ramana compact si consistent pe toate paginile.
   ========================================================================== */
:root {
  /* Logo-ul Porcusorului e aproape PATRAT (1367x1393), spre deosebire de cel lat
     de la donfood — deci NU se aplica trucul cu scale 1.55 (ar iesi 105px inaltime
     si ar sparge header-ul). Inaltime fizica moderata, scale 1. */
  --logo-height: 54px;
  --logo-height-mobile: 44px;
  --logo-scale: 1;
  --logo-scale-mobile: 1;
}

/* Header stays compact; logo "sare" vizual peste limite folosind transform:scale
   — scale nu afecteaza layout, deci header-ul ramane la aceeasi inaltime. */
body .site-navbar .navbar-inner {
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
  min-height: 76px;
  overflow: visible;
}

body .site-navbar {
  overflow: visible !important;
}

body .navbar-logo {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: visible;
}

body .navbar-logo img {
  height: var(--logo-height, 68px);
  width: auto;
  object-fit: contain;
  display: block;
  transform: scale(var(--logo-scale, 1));
  transform-origin: left center;
  transition: transform 0.25s ease;
}

@media (max-width: 767.98px) {
  body .site-navbar .navbar-inner {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    min-height: 58px;
  }
  body .navbar-logo img {
    height: var(--logo-height-mobile, 52px);
    transform: scale(var(--logo-scale-mobile, 1));
  }
}

/* ==========================================================================
   2. Header / navbar — distinct fata de body dark, CONSISTENT pe toate paginile
   --------------------------------------------------------------------------
   Body bg = #1A1A1D (color-bg). Header il fac mai DARK (var(--color-bg)) + bottom
   accent rosu subtil si shadow premium, ca sa "sar a" de pe dark-ul paginii.
   `body .site-navbar` forteaza peste orice override per-pagina.
   ========================================================================== */
body .site-navbar {
  background-color: var(--color-bg) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  /* NU aplicam backdrop-filter aici: creeaza containing block pentru position:fixed
     din interior (ex: .navbar-search-overlay), blocand overlay-ul la dimensiunile
     header-ului in loc de tot ecranul. */
}

body .site-navbar.navbar-scrolled {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}

/* Hover/active pe nav links — mai clar pe dark */
.nav-link:hover {
  color: var(--color-primary) !important;
}
.nav-link.active {
  color: var(--color-primary) !important;
}

/* NU aplicam „header shift left 15%" (tweak specific donfood, moștenit din fork):
   pe Porcusorul Pofticios logo-ul e pătrat și translateX(-15%) îl scotea COMPLET
   în afara ecranului pe desktop (pe mobil se vedea, fiindca regula era doar >=992px).
   Prins la QA vizual cu screenshot real, 2026-07-29. */

/* Mini-cart dropdown si nav-dropdown — bg dark cu border subtil */
.nav-dropdown,
.mini-cart {
  background-color: var(--color-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}
.nav-dropdown-item {
  color: var(--color-text) !important;
}
.nav-dropdown-item:hover {
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
  color: var(--color-primary-light) !important;
}

/* ==========================================================================
   3. FAQ section (avea inline style="background:var(--color-white)" in home.php) + alte
      sectiuni cu fundal albit
   ========================================================================== */
.section-faq,
section.section-faq {
  background: var(--color-bg) !important;
  color: var(--color-text);
}
.section-faq .faq-item,
.section-faq details,
.section-faq summary {
  background-color: var(--color-white) !important;
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   4. Hero slider — dots si arrows mai evidenti pe dark
   ========================================================================== */
.hero-dot {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-dot.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary);
  transform: scale(1.2);
}
.hero-arrow {
  background: color-mix(in srgb, var(--color-bg) 70%, transparent) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-arrow:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary);
}

/* Hero slide text shadow pe poze intense */
.hero-title,
.hero-subtitle {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
/* Overlay mai blând pe stanga (text readable) + aproape transparent pe dreapta */
.hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}
/* Pozele sa fie vizibile, nu filtrate */
.hero-slide-image {
  filter: brightness(0.95) saturate(1.1);
}

/* --------------------------------------------------------------------------
   Delimitarea de sub hero = BANDA DE BRAND, nu linie (acelasi principiu ca
   BrandUnderline din aplicatia mobila): gradient in culoarea identitatii, mai
   aprins in mijloc si stins spre margini.
   ATENTIE (cerere user): banda NU sta PESTE poza — e in FLUX, imediat sub
   slider si lipita de el. Deci ::after e `display:block` static (nu absolute),
   asezat dupa .hero-slides in interiorul sectiunii; poza ramane neatinsa.
   Aura e trasa doar in JOS, in sectiunea urmatoare, ca sa nu atinga imaginea.
   -------------------------------------------------------------------------- */
.hero-section::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary) 28%, transparent) 0%,
    var(--color-primary) 50%,
    color-mix(in srgb, var(--color-primary) 28%, transparent) 100%
  );
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

@media (max-width: 767.98px) {
  .hero-section::after {
    height: 3px;
  }
}

/* Button pe slide: invatam btn-light sa fie "brand" pe dark hero */
.hero-content .btn-light {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary, #fff) !important;
  border-color: var(--color-primary) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  padding: 0.875rem 1.75rem !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 35%, transparent);
  transition: all 0.25s ease;
}
.hero-content .btn-light:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-on-primary, #fff) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

/* ==========================================================================
   5. Categorii — card dark (nu #f3f4f6), icon rosu mare, hover primary
   --------------------------------------------------------------------------
   home.php are inline <style> cu background:#f3f4f6. Il suprascriem aici.
   ========================================================================== */
.section-categories {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-white) 50%, transparent) 100%
  ) !important;
}

.section-categories .category-card {
  background: linear-gradient(
    145deg,
    var(--color-white) 0%,
    var(--color-white) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.3s ease !important;
}

.section-categories .category-card:hover {
  background: linear-gradient(
    145deg,
    var(--color-white) 0%,
    var(--color-white) 100%
  ) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--color-primary) 25%, transparent), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-8px) !important;
}

/* Cand nu exista imagine pe categorie, iconul rosu Fa sa fie mare & centrat */
.section-categories .category-card .category-card-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.section-categories .category-card .category-card-icon i {
  font-size: 3.75rem !important;
  color: var(--color-primary) !important;
  filter: drop-shadow(0 4px 16px color-mix(in srgb, var(--color-primary) 40%, transparent));
  transition: transform 0.3s ease, color 0.3s ease;
}
.section-categories .category-card:hover .category-card-icon i {
  transform: scale(1.12);
  color: var(--color-primary-light) !important;
}

/* Titlul categoriei cu overlay darker + typography lift */
.section-categories .category-card .category-card-title {
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--color-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 55%, transparent) 55%,
    color-mix(in srgb, var(--color-bg) 0%, transparent) 100%) !important;
  padding: 2.5rem 0.75rem 1.1rem !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   6. Blog / Category / generic page hero — eliminam albul mostenit unde este
   ========================================================================== */
.breadcrumb,
.breadcrumb a {
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
}

/* ==========================================================================
   6.5 BESTSELLERS — fundal cinematic cu blur si overlay in loc de gradient
   ========================================================================== */
.section-products.section-bg-gradient {
  position: relative;
  background: var(--color-bg) !important;
  /* `clip` in loc de `hidden`: taie fundalul blurat din ::before la fel, DAR nu
     creeaza container de derulare — cu `hidden` sectiunea inghitea gestul de
     scroll pe mobil in zonele fara card. */
  overflow: clip;
  isolation: isolate;
}
.section-products.section-bg-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/uploads/home/bestsellers-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(12px) brightness(0.45) saturate(1.1);
  transform: scale(1.08); /* elimina marginile blur */
  z-index: -2;
}
.section-products.section-bg-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--color-primary) 10%, transparent) 0%,
      color-mix(in srgb, var(--color-bg) 85%, transparent) 65%,
      color-mix(in srgb, var(--color-bg) 96%, transparent) 100%
  );
  z-index: -1;
}
.section-products.section-bg-gradient .section-title,
.section-products.section-bg-gradient .section-subtitle {
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}

/* ==========================================================================
   6.6 STORY SECTION — "Povestea noastra"
   ========================================================================== */
.section-story {
  padding: 6rem 0;
  background: var(--color-bg);
}
.story-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.story-image-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  aspect-ratio: 4 / 5;
}
.story-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.story-image-wrap:hover .story-image {
  transform: scale(1.05);
}
.story-image-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-primary) 22%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.story-content {
  padding: 1rem 0;
}
.story-title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}
.story-text {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}
.story-btn {
  padding: 0.95rem 2rem !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 32%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.story-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* ==========================================================================
   6.7 CATERING SECTION — mozaic 2 imagini + listă beneficii
   ========================================================================== */
.section-catering {
  padding: 6rem 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-white) 100%);
  position: relative;
}
.section-catering::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 50%, transparent), transparent);
}
.catering-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.catering-content .section-badge {
  margin-bottom: 1rem;
}
.catering-title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.08;
  margin-bottom: 1.25rem;
}
.catering-text {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}
.catering-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1rem;
}
.catering-features li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.98rem;
  color: var(--color-text);
}
.catering-features li i {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}
.catering-btn {
  padding: 0.95rem 2rem !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 32%, transparent);
}
.catering-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.catering-mosaic {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
}
.catering-img-1,
.catering-img-2 {
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}
.catering-img-1 {
  width: 68%;
  height: 68%;
  top: 0;
  right: 0;
  z-index: 2;
}
.catering-img-2 {
  width: 58%;
  height: 58%;
  bottom: 0;
  left: 0;
  border: 4px solid var(--color-bg);
  z-index: 3;
}
.catering-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.catering-mosaic:hover .catering-img-1 img,
.catering-mosaic:hover .catering-img-2 img {
  transform: scale(1.06);
}

/* ==========================================================================
   6.8 RESPONSIVE — story + catering pe mobil (WOW, nu ramane rupt)
   ========================================================================== */
@media (max-width: 991.98px) {
  .story-grid,
  .catering-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .section-story,
  .section-catering {
    padding: 4rem 0;
  }
  .catering-mosaic {
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }
  .catering-features {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   6.9 ANIMATII SCROLL REVEAL — fade-in cinematic pentru toate sectiunile
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hover feedback pe butoanele primary — translateY DOAR pe butoanele standalone.
   In .input-group (ex: cupon "Aplica", newsletter, search inline) butonul trebuie
   sa ramana aliniat cu input-ul pe orizontala, deci folosim brightness+shadow. */
.btn-primary {
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, filter 0.22s ease !important;
}
.btn-primary:hover {
  transform: translateY(-2px);
}
/* Exceptii: in input-group sau cand au clasa .btn-inline, nu ridica butonul */
.input-group .btn-primary:hover,
.input-group-append .btn-primary:hover,
.btn-primary.btn-inline:hover {
  transform: none !important;
  filter: brightness(1.1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* ==========================================================================
   6.10 BLOG PAGES — hero dark cu accent rosu + cards dark
   ========================================================================== */
.blog-hero {
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-white) 50%, var(--color-bg) 100%) !important;
  position: relative;
}
.blog-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, transparent 55%);
  pointer-events: none;
}
.blog-hero-title,
.blog-hero-subtitle,
.blog-hero-stat-number,
.blog-hero-stat-label {
  position: relative;
  z-index: 1;
}
/* Blog hero re-suprafatat: textele urmeaza tema */
.blog-hero-title { color: var(--color-text) !important; }
.blog-hero-subtitle { color: color-mix(in srgb, var(--color-text) 80%, transparent) !important; }
.blog-hero-stat-label { color: color-mix(in srgb, var(--color-text) 55%, transparent) !important; }
.blog-hero .breadcrumb-item, .blog-hero .breadcrumb-item a,
.blog-hero .breadcrumb-item + .breadcrumb-item::before { color: color-mix(in srgb, var(--color-text) 70%, transparent) !important; }
.blog-hero .breadcrumb-item.active { color: color-mix(in srgb, var(--color-text) 90%, transparent) !important; }
.blog-hero-stats {
  position: relative;
  z-index: 1;
}
.blog-card {
  background: linear-gradient(145deg, var(--color-white), var(--color-white)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease !important;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary) !important;
  box-shadow: 0 20px 45px color-mix(in srgb, var(--color-primary) 25%, transparent), 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.blog-card-title a {
  color: var(--color-text) !important;
}
.blog-card-title a:hover {
  color: var(--color-primary) !important;
}
.blog-card-excerpt {
  color: var(--color-text-secondary) !important;
}
.blog-card-category {
  background: var(--color-primary) !important;
  color: #fff !important;
}
/* Blog filter chips */
.blog-filter-item,
.blog-filter-link {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text) !important;
}
.blog-filter-item:hover,
.blog-filter-link:hover,
.blog-filter-item.active,
.blog-filter-link.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

/* ==========================================================================
   6.11 NEWSLETTER — butonul "Aboneaza-te" cu culori din identitate
   --------------------------------------------------------------------------
   Bug shared: butonul avea background alb si culoare `--color-primary-dark`
   care pe unele setari ajungea sa fie alb-pe-alb. Folosim identitate donfood
   clar: bg alb cu text rosu (contrast max pe sectiunea red newsletter),
   hover cu bg primary-dark + text alb.
   ========================================================================== */
.newsletter-submit {
  background: var(--color-on-primary, #fff) !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-on-primary, #fff) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-shadow: none !important;
}
.newsletter-submit-text {
  color: var(--color-primary) !important;
  font-weight: 800 !important;
}
.newsletter-submit i {
  color: var(--color-primary) !important;
}

.newsletter-submit:hover {
  background: var(--color-primary-dark) !important;
  color: var(--color-on-primary, #fff) !important;
  border-color: var(--color-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.newsletter-submit:hover .newsletter-submit-text,
.newsletter-submit:hover i {
  color: #ffffff !important;
}

/* ==========================================================================
   6.12 ABOUT PAGE — carduri categorii + imagini cu glow + hover move
   ========================================================================== */
/* Cards categorii din pagina /despre-noi (cele 8 din grid) */
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"],
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"] {
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.35, 1),
              box-shadow 0.45s ease,
              border-color 0.35s ease !important;
  position: relative;
  overflow: hidden;
}
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"]::before,
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"]::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--color-primary) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 0%, transparent) 40%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: inherit;
}
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"]:hover,
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"]:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: var(--color-primary) !important;
  box-shadow:
    0 20px 45px color-mix(in srgb, var(--color-primary) 28%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
}
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"]:hover::before,
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"]:hover::before {
  background: radial-gradient(ellipse at 50% 0%,
    color-mix(in srgb, var(--color-primary) 20%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 0%, transparent) 60%);
  opacity: 1;
}
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"] i,
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"] i {
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.35, 1), filter 0.4s ease;
}
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"]:hover i,
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"]:hover i {
  transform: scale(1.18) translateY(-3px);
  filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--color-primary) 55%, transparent));
}

/* Imaginile mari din despre-noi (burger, ingrediente fresh, chef) */
.page-despre-noi img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.35, 1),
              box-shadow 0.45s ease !important;
  will-change: transform;
}
.page-despre-noi img:hover {
  transform: scale(1.025) translateY(-6px);
  box-shadow:
    0 30px 70px color-mix(in srgb, var(--color-primary) 22%, transparent),
    0 15px 40px rgba(0, 0, 0, 0.7) !important;
}

/* ==========================================================================
   6.13 BLOG FILTER CHIPS — WOW state of the art pe tema dark
   --------------------------------------------------------------------------
   Cheile: `.blog-filters-section` (bg banda cu gradient alb urat) +
   `.blog-filter-btn` (chipset). Scoatem gradientul alb, punem glassmorphism +
   gradient red activ + count badge.
   ========================================================================== */
.blog-filters-section {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  padding: 1.5rem 0 1.75rem !important;
  margin-bottom: 1rem !important;
  /* NU sticky — in shared CSS era position:sticky + top:73px, dar asta o
     aducea peste breadcrumbs cand scrollai pe pagina single-articol. */
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}
.blog-grid-section {
  padding-top: 1rem !important;
}
.blog-filters-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.blog-filters {
  position: relative;
  z-index: 2;
  gap: 0.65rem !important;
}

.blog-filter-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: var(--color-text) !important;
  padding: 0.65rem 1.35rem !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  transition: all 0.32s cubic-bezier(0.25, 1, 0.35, 1) !important;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
}
.blog-filter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
  border-radius: inherit;
}
.blog-filter-btn > * {
  position: relative;
  z-index: 1;
}
.blog-filter-btn:hover {
  transform: translateY(-3px) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary, #fff) !important;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 28%, transparent),
              0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}
.blog-filter-btn:hover::before {
  opacity: 0.15;
}
.blog-filter-btn.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border-color: transparent !important;
  color: var(--color-on-primary, #fff) !important;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--color-primary) 50%, transparent),
    0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px) !important;
  font-weight: 700 !important;
}
.blog-filter-btn.active::before {
  opacity: 0;
}

/* Count badge din filter chips (cifra de lângă nume categorie) */
.blog-filter-count {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-secondary) !important;
  font-size: 0.72rem !important;
  padding: 0.1rem 0.5rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  min-width: 1.4rem;
  text-align: center;
  transition: all 0.3s ease;
}
.blog-filter-btn:hover .blog-filter-count {
  background: rgba(255, 255, 255, 0.2) !important;
  color: var(--color-on-primary, #fff) !important;
}
.blog-filter-btn.active .blog-filter-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: var(--color-on-primary, #fff) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   6.14 BUTOANE GLOBALE — unificate cu identitate (roșu + hover WOW)
   ========================================================================== */
/* Primary buttons — red cu glow hover + lift */
.btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border: none !important;
  color: var(--color-on-primary, #fff) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 0.8rem 1.75rem !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 28%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.35, 1) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* stacking context — ::before ramane sub text fara sa afecteze body */
}
.btn-primary::before,
.btn.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1; /* sub textul direct al butonului (text nodes nu accepta z-index) */
  border-radius: inherit;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
  transform: scale(1.025) !important;
  color: var(--color-on-primary, #fff) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 38%, transparent),
              0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.btn-primary:hover::before,
.btn.btn-primary:hover::before {
  opacity: 1;
}
.btn-primary:active {
  transform: scale(0.98) !important;
}

/* ==========================================================================
   Outline buttons — fix hover invisible pe dark theme
   --------------------------------------------------------------------------
   Ambele butoane (Aplica cupon, Continua cumparaturile) foloseau
   `color: #fff` pe hover dar aparent alt rule (Bootstrap default sau alt
   override) impingea inapoi culoarea initiala. Fortam cu specificitate
   mai mare pe element+class + rgba explicit.
   ========================================================================== */
a.btn-outline-primary,
button.btn-outline-primary,
.btn.btn-outline-primary,
.btn-outline-primary,
.btn-outline {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.5rem !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}
a.btn-outline-primary:hover,
a.btn-outline-primary:focus,
a.btn-outline-primary:active,
button.btn-outline-primary:hover,
button.btn-outline-primary:focus,
button.btn-outline-primary:active,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
  text-decoration: none !important;
}
a.btn-outline-primary:hover *,
a.btn-outline-primary:focus *,
button.btn-outline-primary:hover *,
button.btn-outline-primary:focus *,
.btn-outline-primary:hover *,
.btn-outline-primary:focus * {
  color: #ffffff !important;
}

/* ==========================================================================
   Product page — icoane & share WOW pe dark
   --------------------------------------------------------------------------
   Stock badge: icon alb pe fundal rosu (era rosu pe rosu, invizibil).
   Trust badges: iconitele raman rosii dar lucesc putin.
   Social share: butoane colorate reale (Facebook albastru, WhatsApp verde,
   Copy gri) cu text alb si glow la hover — pe dark arata elegant.
   ========================================================================== */

/* Stock "Disponibil" / "In stoc" — text/icon tematic pe chip translucid */
.product-stock-status {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
  color: var(--color-text) !important;
}
.product-stock-status i,
.product-stock-status .fa-circle-check,
.product-stock-status .fa-circle-xmark,
.product-stock-status [class*="fa-"] {
  color: var(--color-text) !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary) 50%, transparent));
}

/* ==========================================================================
   Universal — orice element cu BG ROSU (primary, danger, sale, gradient)
   are TOATE iconitele si TEXTUL FORTATE ALBE pe donfood
   ========================================================================== */
.product-add-to-cart,
.product-add-to-cart i,
.product-add-to-cart [class*="fa-"],
.product-add-to-cart [class*="icon-"],
.product-add-to-cart span,
#addToCartBtn,
#addToCartBtn i,
#addToCartBtn [class*="fa-"],
#addToCartBtn [class*="icon-"],
#addToCartBtn span {
  color: #ffffff !important;
}
.btn-primary,
.btn-primary i,
.btn-primary [class*="fa-"],
.btn-primary [class*="icon-"],
.btn-add-to-cart,
.btn-add-to-cart i,
.btn-add-to-cart [class*="fa-"],
.btn-add-to-cart [class*="icon-"],
.btn-add-cart,
.btn-add-cart i,
.btn-add-cart [class*="fa-"],
.btn-add-cart [class*="icon-"],
.btn-danger,
.btn-danger i,
.btn-danger [class*="fa-"],
.btn-danger [class*="icon-"],
.product-card-badge.badge-sale,
.product-card-badge.badge-sale i,
.product-card-badge.badge-sale::before,
.product-card-badge.badge-new,
.product-card-badge.badge-new i,
.product-card-badge.badge-new::before,
.cs-toast-success,
.cs-toast-success i,
#placeOrderBtn,
#placeOrderBtn i,
#placeOrderBtn [class*="fa-"],
#placeOrderBtn [class*="icon-"],
#checkoutBtn,
#checkoutBtn i,
.product-card-overlay .btn,
.product-card-overlay .btn i,
.product-card-overlay .btn [class*="fa-"],
.product-card-overlay .btn [class*="icon-"],
.cross-sell-add,
.cross-sell-add i,
.checkout-trust-item.bg-primary i,
.swal2-confirm,
.swal2-confirm i {
  color: #ffffff !important;
}

/* Pe Stock badge (rosu translucid) — icon alb cu glow */
.product-stock-status,
.product-stock-status i,
.product-stock-status [class*="fa-"],
.product-stock-status [class*="icon-"] {
  color: var(--color-text) !important;
}
.product-stock-status.out-of-stock {
  background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent) !important;
  border-color: color-mix(in srgb, var(--color-text-secondary) 35%, transparent) !important;
  color: var(--color-text-light) !important;
}
.product-stock-status.out-of-stock i { color: var(--color-text-light) !important; filter: none; }

/* Trust badges (transport / retur / securizata / calitate) — icon rosu cu glow */
.product-trust-badges .trust-badge i,
.product-features-list li i {
  color: var(--color-primary) !important;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-primary) 30%, transparent));
}

/* Social share — buttons WOW cu branduri reale */
.social-share-label { color: var(--color-text-light) !important; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.social-share-label i { color: var(--color-primary) !important; margin-right: 0.35rem; }
.social-share-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }

.social-share-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  cursor: pointer;
}
.social-share-btn i { color: #ffffff !important; font-size: 0.95rem; }
.social-share-btn span { color: #ffffff !important; }

/* Facebook blue */
.social-share-facebook {
  background: linear-gradient(135deg, #1877f2, #0b5fcc) !important;
  border-color: #1877f2 !important;
}
.social-share-facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.45) !important;
}

/* WhatsApp green */
.social-share-whatsapp {
  background: linear-gradient(135deg, #25d366, #1aaa50) !important;
  border-color: #25d366 !important;
}
.social-share-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45) !important;
}

/* Copy link — outline rosu din identitate */
.social-share-copy {
  background: transparent !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.social-share-copy i,
.social-share-copy span { color: var(--color-primary) !important; }
.social-share-copy:hover {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
}
.social-share-copy:hover i,
.social-share-copy:hover span { color: #ffffff !important; }

/* ==========================================================================
   Admin dashboard — status bar SOLID dark, fara gradient
   ========================================================================== */
.dashboard-status-bar {
  background: var(--color-white) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  color: var(--color-border) !important;
}
.dashboard-status-bar i,
.dashboard-status-bar [class*="fa-"],
.dashboard-status-bar [class*="icon-"] {
  color: var(--color-primary) !important;
}
.dashboard-status-bar strong,
.dashboard-status-bar .text-muted,
.dashboard-status-bar small {
  color: var(--color-border) !important;
}

/* ==========================================================================
   PRODUCT CARDS — WOW state-of-the-art pe donfood (dark cinematic)
   --------------------------------------------------------------------------
   Tema: card cinematic cu gradient subtil, hover cu glow rosu, categorie
   subliniata, titlu bold luminos, pret prominent cu accent rosu, separatoare
   subtile între secțiuni, padding generos.
   ========================================================================== */
.product-card {
  background: var(--color-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  /* SOLID card — fara padding interior, totul edge-to-edge intr-un singur container */
  padding: 0 !important;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  position: relative;
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--color-primary) 0%, transparent) 0%, transparent 55%);
  transition: background 0.4s ease;
  z-index: 0;
}
.product-card:hover {
  /* Grow + lift — usor scale up si translatie sus */
  transform: translateY(-8px) scale(1.025);
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
  box-shadow: 0 24px 52px color-mix(in srgb, var(--color-primary) 28%, transparent),
              0 10px 22px rgba(0, 0, 0, 0.6);
}
.product-card:hover::before {
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 60%);
}

/* ==========================================================================
   Product image — fill edge-to-edge la marginile cardului, rotunjit doar sus
   ========================================================================== */
.product-card .product-card-image {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  overflow: hidden !important;
  position: relative;
  /* Rotunjit doar sus — partea de jos se contopeste cu body-ul (continuu cu cardul) */
  border-radius: 16px 16px 0 0 !important;
  aspect-ratio: 1 / 1;
  box-shadow: none !important;
}
.product-card .product-card-image > a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0 !important;
}
.product-card .product-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  /* Baseline scale — imaginile au fundal negru propriu cu margini, scale-ul ascunde marginile
     si face cardul sa para complet ocupat de produs si in normal state */
  transform: scale(1.06);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
  border-radius: 16px 16px 0 0 !important;
}
.product-card:hover .product-card-image img {
  /* Hover: zoom suplimentar peste baseline — efect cinematic clar, dar nu prea mult */
  transform: scale(1.14);
  filter: saturate(1.08) brightness(1.02);
}
/* Glow subtil ambient peste imagine la hover */
.product-card .product-card-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-primary) 0%, transparent) 0%, color-mix(in srgb, var(--color-primary) 10%, transparent) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
.product-card:hover .product-card-image::before {
  opacity: 1;
}
/* Fade inferior — mascheaza tranzitia dintre placeholder si body
   (placeholder PNG are propriu fundal, body are var(--color-white) — fade-ul le uneste) */
.product-card .product-card-image::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, var(--color-white) 90%, var(--color-white) 100%);
  pointer-events: none;
  z-index: 3;
}

/* ==========================================================================
   Badges (Nou / Bestseller / Sale) — WOW glass chips, distinct, animate
   --------------------------------------------------------------------------
   Inainte erau lipite intr-un dreptunghi negru in colt. Acum: chip-uri
   plutitoare separate, fiecare cu glassmorphism + iconita + culoare distincta.
   Animate la entry (fade slide).
   ========================================================================== */
.product-card-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  display: flex !important;
  flex-direction: row !important;  /* badge-urile UNA LANGA ALTA, nu stacked */
  gap: 0.35rem;
  align-items: center;
  pointer-events: none;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.product-card-badge {
  position: static !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.7rem !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  /* FARA backdrop-filter — crea efect de "card" in spate; folosim culori solide */
  border: 0;
  transform: translateX(-4px);
  opacity: 0;
  animation: cardBadgeIn 0.45s ease forwards;
  pointer-events: auto;
}
.product-card-badge::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.6rem;
}
/* Stagger animation pentru cele 3 badge-uri */
.product-card-badge:nth-child(1) { animation-delay: 0.05s; }
.product-card-badge:nth-child(2) { animation-delay: 0.15s; }
.product-card-badge:nth-child(3) { animation-delay: 0.25s; }
@keyframes cardBadgeIn {
  to { transform: translateX(0); opacity: 1; }
}

/* NOU — verde solid */
.product-card-badge.badge-new {
  background: var(--color-success) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-success) 40%, transparent);
}
.product-card-badge.badge-new::before { content: '\f005'; color: #ffffff; }

/* BESTSELLER — gold solid */
.product-card-badge.badge-bestseller {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 80%, var(--color-white)), var(--color-warning)) !important;
  color: var(--color-white) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-warning) 50%, transparent);
}
.product-card-badge.badge-bestseller::before { content: '\f521'; color: var(--color-white); }

/* SALE — rosu solid */
.product-card-badge.badge-sale {
  background: linear-gradient(135deg, var(--color-danger), color-mix(in srgb, var(--color-danger) 85%, var(--color-text) 15%)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 50%, transparent);
  font-size: 0.7rem !important;
  padding: 0.35rem 0.7rem !important;
}
.product-card-badge.badge-sale::before { content: '\f02b'; color: #ffffff; }

/* ORGANIC — verde leaf solid */
.product-card-badge.badge-organic {
  background: var(--color-success) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-success) 40%, transparent);
}
.product-card-badge.badge-organic::before { content: '\f06c'; color: #ffffff; }

/* Wishlist heart — buton glass cerc, top-right */
.product-card .product-card-wishlist {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  z-index: 3;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  cursor: pointer;
}
.product-card .product-card-wishlist:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  transform: scale(1.1);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.product-card .product-card-wishlist.is-favorite,
.product-card .product-card-wishlist[data-favorite="1"] {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}
.product-card .product-card-wishlist.is-favorite i,
.product-card .product-card-wishlist[data-favorite="1"] i {
  font-weight: 900;
}
/* Overlay "Adauga in cos" — banda de jos peste imagine, vizibil pe hover.
   Fara fundal/chenar suplimentar — doar butonul plutind peste imagine. */
.product-card .product-card-overlay {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  top: auto !important;
  padding: 0 0.75rem 0.85rem 0.75rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  pointer-events: none;
}
.product-card:hover .product-card-overlay {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}
/* Buton ÎN overlay — gradient rosu plin, lizibil */
.product-card .product-card-overlay .btn,
.product-card .product-card-overlay .btn-add-cart,
.product-card .product-card-overlay .btn-pick-variant {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 85%, var(--color-text) 15%)) !important;
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0.55rem 1.25rem !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  width: auto !important;
  height: auto !important;
  backdrop-filter: none !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.product-card .product-card-overlay .btn:hover,
.product-card .product-card-overlay .btn-add-cart:hover,
.product-card .product-card-overlay .btn-pick-variant:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-danger) 65%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 85%, var(--color-text) 15%), color-mix(in srgb, var(--color-primary) 75%, var(--color-text) 25%)) !important;
  color: #ffffff !important;
}
.product-card .product-card-overlay .btn i,
.product-card .product-card-overlay .btn span { color: #ffffff !important; }

/* Body — padding propriu (cardul nu mai are padding interior). Centrat pe orizontala */
.product-card .product-card-body {
  padding: 1rem 1rem 1.1rem !important;
  background: transparent !important;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center !important;     /* centrare orizontala items */
  text-align: center !important;
  gap: 0.55rem;
  border: 0 !important;
  margin: 0 !important;
}

/* Categoria — capitalizata, rosie, subtila, centrata */
.product-card .product-card-category {
  display: inline-block;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  position: relative;
  align-self: center;     /* centrat in body */
  text-align: center;
  transition: color 0.2s ease, letter-spacing 0.2s ease;
}
.product-card .product-card-category::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-primary);
  margin: 4px auto 0;     /* centrat sub categorie */
  border-radius: 2px;
  transition: width 0.3s ease;
}
.product-card:hover .product-card-category::after {
  width: 40px;
}

/* Titlu — urmareste tema (text pe suprafata cardului) */
.product-card .product-card-title {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--color-text) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.product-card .product-card-title a {
  color: var(--color-text) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.product-card .product-card-title a:hover {
  color: var(--color-primary) !important;
}

/* Pret — rosu prominent cu font mai mare, separator sus */
.product-card .product-card-price {
  background: transparent !important;
  padding: 0.5rem 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.product-card .product-card-price .current-price {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  letter-spacing: -0.01em;
  text-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.product-card .product-card-price .old-price {
  font-size: 0.85rem !important;
  color: var(--color-text-secondary) !important;
  text-decoration: line-through;
}
.product-card .product-card-price .price-prefix {
  font-size: 0.72rem !important;
  color: var(--color-text-light) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Button "Adauga in cos" din overlay — gradient rosu, padding generos */
.product-card .product-card-btn {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 85%, var(--color-text) 15%)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.65rem 1.25rem !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.product-card .product-card-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 55%, transparent) !important;
}

/* Reset agresiv — evita "pillele" vizibile pe cele 3 sectiuni din card */
.product-card .product-card-category,
.product-card .product-card-title,
.product-card .product-card-title a,
.product-card .product-card-price,
.product-card .product-card-price .current-price,
.product-card .product-card-price .old-price,
.product-card .product-card-price .price-prefix {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Pastram doar separatorul subtil pe pret */
.product-card .product-card-price {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.product-card .product-card-category,
.product-card .product-card-title,
.product-card .product-card-title a {
  border: 0 !important;
}

/* Coupon + Referral "Aplica" buttons din checkout — gradient rosu plin,
   nu outline (mai vizibil pe dark langa inputs).  */
#checkoutCouponBtn,
#checkoutReferralBtn,
#referralBtn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 0.4rem 0.9rem !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: all 0.25s ease !important;
}
#checkoutCouponBtn:hover,
#checkoutReferralBtn:hover,
#referralBtn:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
  transform: translateY(-1px);
}
#checkoutCouponBtn i,
#checkoutReferralBtn i,
#referralBtn i {
  color: #fff !important;
}

/* Add to cart buttons */
.btn-add-to-cart,
.product-card-btn,
.add-to-cart-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  color: #fff !important;
  border: none !important;
  transition: all 0.3s ease !important;
}
.btn-add-to-cart:hover,
.product-card-btn:hover,
.add-to-cart-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
}

/* Iconbuttons din navbar (search / account / wishlist / cart) */
.navbar-icon-btn {
  transition: all 0.25s ease !important;
}
.navbar-icon-btn:hover {
  color: var(--color-primary) !important;
  transform: translateY(-1px);
}

/* Cart button — pe dark theme icon-ul rosu este vizibil fara border permanent.
   Border apare doar la hover, sa nu pareze ca e selectat tot timpul. */
.navbar-icon-btn.cart-btn {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid transparent !important;
}
.navbar-icon-btn.cart-btn:hover {
  background-color: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.navbar-icon-btn.cart-btn:hover .badge {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}
.navbar-icon-btn.cart-btn i {
  color: inherit !important;
}
/* Cand suntem efectiv pe pagina /cos/ — atunci aratam border activ */
body[data-page="cart"] .navbar-icon-btn.cart-btn,
.navbar-icon-btn.cart-btn.active {
  border-color: var(--color-primary) !important;
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}

/* Search overlay — fortam acoperire totala (header + main + footer).
   Default-ul se poate pierde pe dark theme din cauza z-index-ului navbar-ului. */
.navbar-search-overlay {
  z-index: 9999 !important;
  background: rgba(0, 0, 0, 0.78) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  width: 100vw !important;
  height: 100vh !important;
}
/* Dark input pe peste-overlay */
.navbar-search-overlay .navbar-search-input {
  background: color-mix(in srgb, var(--color-bg) 95%, transparent) !important;
  color: var(--color-text) !important;
  border-color: var(--color-primary) !important;
}
.navbar-search-overlay .navbar-search-input::placeholder {
  color: color-mix(in srgb, var(--color-text) 55%, transparent) !important;
}

/* Hero slider arrows + dots au deja styling — polish hover */
.hero-arrow {
  transition: all 0.3s ease !important;
}
.hero-arrow:hover {
  transform: translateY(-50%) scale(1.1) !important;
}

/* Contact form submit */
#contactSubmitBtn,
.contact-submit-btn,
button[type="submit"] {
  transition: all 0.3s ease !important;
}

/* ==========================================================================
   6.15 CATEGORY HERO — dark minimalist (shop + categorie), donfood-only
   --------------------------------------------------------------------------
   Old version avea 2 radial ellipses + dots pattern + text gradient pink —
   arata SF/kitsch. Rewrite complet: card dark clean, un singur glow subtil
   top-right, text alb curat, count badge rosu plin.
   ========================================================================== */
.category-hero {
  padding: 1rem 0 2rem !important;
}
.category-hero-inner {
  background: linear-gradient(145deg, var(--color-white) 0%, var(--color-bg) 70%, var(--color-white) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 20px 50px -20px color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
  overflow: hidden;
  isolation: isolate;
}
/* Un singur glow subtil sus-dreapta, fara ellipses si fara dots */
.category-hero-inner::before {
  content: '';
  position: absolute;
  top: -40px !important;
  right: -40px !important;
  width: 320px !important;
  height: 320px !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 55%) !important;
  border-radius: 50% !important;
  z-index: 0;
  pointer-events: none;
}
.category-hero-inner::after {
  display: none !important;
}
/* Override: pe donfood, .has-random-bg foloseste imaginea random ca FUNDAL FULL-CARD,
   peste TOT cardul, vizibil clar dar putin intunecat ca text-ul sa fie lizibil.
   Overlay subtil pe stanga (zona text) pentru contrast, dreapta = imagine vizibila. */
.category-hero.has-random-bg .category-hero-inner::after {
  display: block !important;
  position: absolute !important;
  /* Override decorative dots din shop.css care setau width:220px / height:220px / bottom:-60px / left:-60px */
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  background-image: var(--hero-random-bg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: saturate(1) brightness(0.45) !important;
  transform: scale(1.03) !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* Parent: overlay UNIFORM peste tot cardul, suficient cat sa lizibilizeze textul DAR sa
   se distinga si imaginea peste tot. Stanga putin mai dark (acolo e text-ul). */
.category-hero.has-random-bg .category-hero-inner {
  background:
    linear-gradient(95deg, color-mix(in srgb, var(--color-bg) 72%, transparent) 0%, color-mix(in srgb, var(--color-bg) 55%, transparent) 50%, color-mix(in srgb, var(--color-bg) 40%, transparent) 100%),
    linear-gradient(145deg, var(--color-white) 0%, var(--color-bg) 70%, var(--color-white) 100%) !important;
}

/* Pe LIGHT: badge-ul CATEGORIE mai pregnant (mixul cu alb era pt dark) */
body.theme-light .category-hero .category-hero-badge {
  color: color-mix(in srgb, var(--color-primary) 85%, var(--color-text)) !important;
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent) !important;
}

/* Pe LIGHT: poza NU se mai intuneca (era brightness .45 pt text alb pe dark) — devine pala peste fundalul deschis, textul inchis ramane lizibil */
body.theme-light .category-hero.has-random-bg .category-hero-inner::after {
  filter: saturate(1.05) brightness(1.02) !important;
  opacity: 0.30 !important;
}
body.theme-light .category-hero.has-random-bg:hover .category-hero-inner::after {
  filter: saturate(1.1) brightness(1.02) !important;
  opacity: 0.40 !important;
}

/* Pe LIGHT: val mai opac pe zona de text (pe dark raman 72/55/40 originale) */
body.theme-light .category-hero.has-random-bg .category-hero-inner {
  background:
    linear-gradient(95deg, color-mix(in srgb, var(--color-bg) 90%, transparent) 0%, color-mix(in srgb, var(--color-bg) 74%, transparent) 50%, color-mix(in srgb, var(--color-bg) 48%, transparent) 100%),
    linear-gradient(145deg, var(--color-white) 0%, var(--color-bg) 70%, var(--color-white) 100%) !important;
}

.category-hero.has-random-bg:hover .category-hero-inner::after {
  filter: saturate(1.15) brightness(0.6) !important;
  transform: scale(1) !important;
  transition: filter 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.category-hero.has-random-bg:hover .category-hero-inner {
  border-color: color-mix(in srgb, var(--color-primary) 42%, transparent) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 30px 70px -20px color-mix(in srgb, var(--color-primary) 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent),
    inset 0 0 100px color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
  transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease !important;
}
.category-hero-content,
.category-hero-image {
  position: relative;
  z-index: 2;
}

/* Badge discret rosu pal */
.category-hero .category-hero-badge {
  display: inline-flex !important;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  color: color-mix(in srgb, var(--color-primary) 45%, var(--color-white) 55%) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
}

/* Titlu — alb curat, fara gradient text */
.category-hero-title {
  font-size: clamp(2.4rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 0.75rem !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--color-text) !important;
  color: var(--color-text) !important;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Descriere gri deschis */
.category-hero-desc {
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  color: color-mix(in srgb, var(--color-text) 92%, transparent) !important;
  max-width: 640px;
  margin: 0 0 1.25rem !important;
  text-shadow: none !important;
}

.category-hero-meta {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.category-hero-count {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 85%, var(--color-text) 15%)) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
  color: var(--color-on-primary, #fff) !important;
}

/* Imaginea categoriei (daca exista) — fara rotate pe hover */
.category-hero-image img {
  filter: drop-shadow(0 16px 32px color-mix(in srgb, var(--color-primary) 25%, transparent));
  transition: transform 0.35s ease;
}
.category-hero-image:hover img {
  transform: scale(1.03);
}

/* ==========================================================================
   6.16 PRICE SLIDER — fix pt donfood (default native track + border vizibile)
   --------------------------------------------------------------------------
   Pe tema dark, input[type=range] native arata cu white box + red border.
   Suprimam COMPLET default-urile: track, progress, border, outline, focus.
   ========================================================================== */
.price-slider-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}
.price-slider-input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.price-slider-input::-webkit-slider-runnable-track {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: 24px;
}
.price-slider-input::-moz-range-track {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.price-slider-input::-moz-range-progress {
  background: transparent !important;
}
.price-slider-input::-ms-track {
  background: transparent !important;
  border-color: transparent !important;
  color: transparent !important;
}
.price-slider-input::-ms-fill-lower,
.price-slider-input::-ms-fill-upper {
  background: transparent !important;
}

/* Track wrapper: vizibil mai clar pe dark (mai multa opacitate) */
.price-slider-track {
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   6.17 FORM CHECKBOX + FORM SWITCH — comportament complet pe dark theme
   --------------------------------------------------------------------------
   CHECKBOX standard (.form-check-input NU are .form-switch parent):
     - off: border gri, bg transparent
     - on:  bg rosu + checkmark alb la mijloc
   SWITCH (.form-switch .form-check-input):
     - off: track transparent, thumb gri la stanga
     - on:  track rosu, thumb alb la dreapta
   Fiecare stare (hover/focus inclusiv dupa toggle) e declarata explicit ca sa
   nu existe "buline fantoma" din combinatii defaults Bootstrap + overrides.
   SVG-uri inline ca data:uri — fara dependinte externe.
   ========================================================================== */

/* ---- Base (toate, CHECKBOX + SWITCH) ---- */
.form-check-input {
  background-color: color-mix(in srgb, var(--color-text) 6%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, var(--color-text) 25%, transparent) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-position 0.15s ease !important;
}
.form-check-input:hover { border-color: var(--color-primary) !important; }
.form-check-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
}

/* ---- CHECKBOX STANDARD (NOT form-switch) ---- */
/* Off: fara background-image, doar border */
.form-check-input[type="checkbox"]:not(.form-switch .form-check-input) {
  background-image: none !important;
}
/* On: bg rosu + checkmark alb la mijloc */
.form-check-input[type="checkbox"]:checked:not(.form-switch .form-check-input) {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3E%3C/svg%3E") !important;
  background-size: 70% 70% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.form-check-input[type="checkbox"]:checked:focus:not(.form-switch .form-check-input) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}

/* ---- RADIO (tot checkbox style la noi, dar pastram cerc) ---- */
.form-check-input[type="radio"]:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
}

/* ---- FORM SWITCH (track + thumb) ---- */
/* Off: track transparent-ish, thumb gri stanga */
.form-switch .form-check-input {
  width: 2em !important;
  height: 1em !important;
  background-color: color-mix(in srgb, var(--color-text) 8%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, var(--color-text) 25%, transparent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba%28255,255,255,0.7%29'/%3E%3C/svg%3E") !important;
  background-position: left center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.form-switch .form-check-input:hover {
  background-color: color-mix(in srgb, var(--color-text) 12%, transparent) !important;
  border-color: var(--color-primary) !important;
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba%28255,255,255,0.7%29'/%3E%3C/svg%3E") !important;
  background-position: left center !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
}
/* On: track rosu, thumb alb dreapta */
.form-switch .form-check-input:checked,
.form-switch .form-check-input:checked:focus,
.form-switch .form-check-input:checked:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !important;
  background-position: right center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
}

/* ==========================================================================
   6.18 ACCOUNT PAGE (contul meu) — polish dark + meniu lateral modern
   --------------------------------------------------------------------------
   Bug-uri shared: .account-nav-link.active are gradient brown→mint green urât
   pe donfood; dash-card-header albastru deschis; text rgb(100,116,139) ilizibil.
   Aici overrides complete pe dark.
   ========================================================================== */

/* Sidebar: card dark rotunjit */
.account-section .col-lg-3 > .bg-white,
.account-section .col-lg-3 > [class*="bg-"],
.account-section .account-sidebar-card,
.account-section .card {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  color: var(--color-text) !important;
}

/* User header din sidebar */
.account-user,
.account-user + * {
  color: var(--color-text) !important;
}
.account-user .text-muted,
.account-section .text-muted {
  color: var(--color-text-secondary) !important;
}

/* Nav items — meniu lateral modern */
.account-nav-link {
  color: color-mix(in srgb, var(--color-text) 75%, transparent) !important;
  border-left: 3px solid transparent !important;
  border-radius: 10px !important;
  padding: 0.7rem 0.95rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.2rem;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.35, 1) !important;
  background: transparent !important;
}
.account-nav-link i {
  color: color-mix(in srgb, var(--color-text) 55%, transparent) !important;
}
.account-nav-link:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
  color: var(--color-primary-light) !important;
  border-left-color: var(--color-primary) !important;
  transform: translateX(2px);
}
.account-nav-link:hover i {
  color: var(--color-primary) !important;
}
.account-nav-link.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, color-mix(in srgb, var(--color-primary) 6%, transparent) 100%) !important;
  color: var(--color-text) !important;
  border-left-color: var(--color-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 18%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
}
.account-nav-link.active i {
  color: var(--color-primary) !important;
}
.account-nav-link.text-danger {
  color: var(--color-primary-light) !important;
}
.account-nav-link.text-danger:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
  color: var(--color-primary-light) !important;
}

/* Stats cards (Comenzi / Favorite / Adrese / Cheltuit) */
.account-section .dash-stat-card,
.account-section .stat-card,
.account-section [class*="bg-primary-lightest"],
.account-section [class*="bg-light"] {
  background: linear-gradient(145deg, var(--color-white), var(--color-white)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  color: var(--color-text) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.account-section .dash-stat-card:hover,
.account-section .stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary) !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

/* Dashboard card (Comenzi recente + altele) */
.dash-card {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  color: var(--color-text) !important;
  overflow: hidden;
}
.dash-card-header {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
  color: var(--color-text) !important;
  padding: 1rem 1.25rem !important;
}
.dash-card-header h5 {
  color: var(--color-text) !important;
  font-weight: 700 !important;
}

/* Tabele din account */
.account-section .table,
.dash-orders-table {
  color: var(--color-text) !important;
}
.account-section .table thead th,
.dash-orders-table thead th {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--color-text-secondary) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.account-section .table tbody td,
.dash-orders-table tbody td {
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--color-text) !important;
  padding: 0.9rem 0.75rem !important;
}
.account-section .table-hover tbody tr:hover,
.dash-orders-table tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
}
.dash-orders-table tbody td[style*="color:#64748b"] {
  color: var(--color-text-secondary) !important;
}

/* Empty state */
.account-section .text-muted,
.account-section p[style*="color:#64748b"],
.dash-card p[style*="color:#64748b"] {
  color: var(--color-text-secondary) !important;
}
.dash-card .fa-box-open {
  color: color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
}

/* Titlu "Bun venit, Nume!" */
.account-section h1,
.account-section h2,
.account-section h3,
.account-section h4,
.account-section h5 {
  color: var(--color-text) !important;
}

/* Outline-primary buttons din account */
.account-section .btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid var(--color-primary) !important;
  color: var(--color-primary-light) !important;
}
.account-section .btn-outline-primary:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* Avatar wrapper în sidebar (cercul alb cu user) */
.account-user img,
.account-user .avatar,
.account-section .rounded-circle {
  border: 3px solid color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Badges status comandă pe dark */
.account-section .badge {
  padding: 0.4rem 0.7rem !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   6.19 ACCOUNT STAT CARDS — 4 chestii de sus (Comenzi/Favorite/Adrese/Cheltuit)
   ========================================================================== */
.account-stat-card {
  background: linear-gradient(145deg, var(--color-white), var(--color-white)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  color: var(--color-text) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.account-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary) !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}
.account-stat-value {
  color: var(--color-text) !important;
  font-weight: 800 !important;
}
.account-stat-label {
  color: var(--color-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Icon box din stat cards — inlocuim hardcoded light bg (color-mix(in srgb, var(--color-info) 7%, var(--color-white)), color-mix(in srgb, var(--color-danger) 7%, var(--color-white)), color-mix(in srgb, var(--color-warning) 7%, var(--color-white))) */
.account-stat-icon[style*="#eff6ff"],
.account-stat-icon[style*="#fef2f2"],
.account-stat-icon[style*="#fffbeb"],
.account-stat-icon[style*="var(--color-primary-lightest)"] {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  color: var(--color-primary) !important;
}

/* ==========================================================================
   6.20 SELECT2 PE FRONTEND (checkout + account addresses) — dark theme
   --------------------------------------------------------------------------
   Dropdown + optiuni + search input, toate pe dark. Optiuni hover/selected
   cu rosu identity. Folosit la Judet/Oras in formularul adresa.
   ========================================================================== */
.select2-container--default .select2-dropdown,
.select2-dropdown {
  background: var(--color-bg) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-search__field {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
  color: var(--color-text) !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.5rem !important;
  width: calc(100% - 1rem) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}
.select2-container--default .select2-results__option,
.select2-results__option {
  color: var(--color-text) !important;
  padding: 0.65rem 1rem !important;
  background: transparent !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-results__option[aria-selected="true"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
  color: color-mix(in srgb, var(--color-text) 30%, transparent) !important;
}
/* Selected option fara hover */
.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
  color: #fff !important;
  font-weight: 600;
}
/* Selection (pill-ul cu valoarea aleasa) — transparent, bordered */
.select2-container--default .select2-selection--single {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: color-mix(in srgb, var(--color-text) 45%, transparent) !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
}
/* Scrollbar in dropdown optiuni */
.select2-container--default .select2-results__options::-webkit-scrollbar {
  width: 8px;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius: 4px;
}

/* ==========================================================================
   6.21 CART TABLE (Cos de cumparaturi) — tabel dark + text readable
   ========================================================================== */
.cart-table,
.cart-section table,
.page-cart table {
  color: var(--color-text) !important;
  background: transparent !important;
}
.cart-table thead th,
.cart-section table thead th,
.page-cart table thead th {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
  color: var(--color-text-secondary) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.cart-table tbody tr,
.cart-section table tbody tr,
.page-cart table tbody tr {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.cart-table tbody td,
.cart-section table tbody td,
.page-cart table tbody td {
  color: var(--color-text) !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  padding: 1rem 0.75rem !important;
  vertical-align: middle !important;
}

/* Product title + price in cart row — forteaza visibilitatea */
.cart-table .cart-product-title,
.cart-table .product-title,
.cart-table a[href*="/produs/"],
.cart-section .cart-product-title,
.cart-section .product-title,
.cart-section a[href*="/produs/"] {
  color: var(--color-text) !important;
  font-weight: 600;
}
.cart-table .cart-product-title:hover,
.cart-section .cart-product-title:hover {
  color: var(--color-primary) !important;
}
.cart-table .cart-price,
.cart-table .product-price,
.cart-section .cart-price,
.cart-section .product-price {
  color: var(--color-text) !important;
  font-weight: 600;
}

/* Box sumar comanda din cart */
.cart-summary,
.cart-sidebar-card,
.order-summary {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--color-text) !important;
  border-radius: 14px;
}

/* ==========================================================================
   6.22 CHECKOUT — payment method cards + terms row + toate zonele albe
   ========================================================================== */
/* Payment method cards (Plata cu cardul / Plata ramburs) */
.checkout-payment-method,
label.checkout-payment-method {
  background: linear-gradient(145deg, var(--color-white), var(--color-white)) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--color-text) !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}
.checkout-payment-method *,
label.checkout-payment-method * {
  color: inherit !important;
}
.checkout-payment-method strong,
.checkout-payment-method .fw-bold {
  color: var(--color-text) !important;
  font-weight: 700;
}
.checkout-payment-method small,
.checkout-payment-method .text-muted {
  color: var(--color-text-secondary) !important;
}
.checkout-payment-method:hover {
  border-color: var(--color-primary) !important;
  background: linear-gradient(145deg, var(--color-white), var(--color-bg)) !important;
}
.checkout-payment-method.selected {
  border-color: var(--color-primary) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 15%, transparent) 0%, color-mix(in srgb, var(--color-primary) 5%, transparent) 100%) !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 28%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, transparent) !important;
}

/* Termeni row (avea inline style="background:var(--color-bg)") */
.checkout-step[style*="background:#f8fafc"],
.checkout-step[style*="background: #f8fafc"] {
  background: linear-gradient(145deg, var(--color-white), var(--color-white)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  color: var(--color-text) !important;
}
.checkout-step[style*="background:#f8fafc"] .form-check-label,
.checkout-step[style*="background: #f8fafc"] .form-check-label {
  color: var(--color-text) !important;
}

/* Alte zone albe din checkout (step-uri cu bg alb) */
.checkout-step:not([class*="selected"]),
.checkout-left-column .bg-white,
.checkout-left-column [style*="background:#fff"],
.checkout-left-column [style*="background: #fff"],
.checkout-left-column [style*="background:#ffffff"] {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  color: var(--color-text) !important;
}

/* Inputs din checkout pe dark */
#checkoutForm input.form-control,
#checkoutForm textarea.form-control,
#checkoutForm select.form-control,
.checkout-form input,
.checkout-form textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text) !important;
}
#checkoutForm input.form-control::placeholder,
#checkoutForm textarea.form-control::placeholder,
.checkout-form input::placeholder,
.checkout-form textarea::placeholder {
  color: color-mix(in srgb, var(--color-text) 40%, transparent) !important;
}
#checkoutForm input.form-control:focus,
#checkoutForm textarea.form-control:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
  color: var(--color-text) !important;
}

/* Input-group-text (addon cu icon in formulare) */
.checkout-form .input-group-text,
#checkoutForm .input-group-text {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-secondary) !important;
}

/* Icon prepend pentru select2 (Judet/Oras) — la fel dark ca input-group-text */
#checkoutForm .select2-icon-prepend,
.select2-icon-prepend {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: none !important;
  color: var(--color-text-secondary) !important;
}
#checkoutForm .select2-icon-prepend i,
.select2-icon-prepend i {
  color: var(--color-text-secondary) !important;
}
/* Cand select2 e open/focus, prepend-ul se evidentiaza cu red border la fel */
#checkoutForm .select2-icon-wrapper:has(.select2-container--open) .select2-icon-prepend,
#checkoutForm .select2-icon-wrapper:has(.select2-container--focus) .select2-icon-prepend {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
#checkoutForm .select2-icon-wrapper:has(.select2-container--open) .select2-icon-prepend i,
#checkoutForm .select2-icon-wrapper:has(.select2-container--focus) .select2-icon-prepend i {
  color: var(--color-primary) !important;
}

/* ==========================================================================
   7. Footer — pastram separat de body (subtil mai dark)
   ========================================================================== */
.site-footer {
  padding-top: 1.5rem !important;
  padding-bottom: 1rem !important;
}
body.theme-dark .site-footer {
  background-color: var(--color-bg) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.site-footer .container > .row {
  padding-top: 0.75rem !important;
}
.site-footer .footer-bottom {
  padding-top: 1rem !important;
  margin-top: 1rem !important;
}

/* Footer logo — logo-ul Porcusorului e PATRAT, deci „scale trick"-ul donfood
   (height 80px x scale 1.6 = 128px vizual) il facea sa DEBORDEZE peste textul
   de sub el (transform:scale nu ocupa spatiu in layout, asa ca descrierea urca
   sub logo). Aici: inaltime reala, FARA scale — logo-ul isi tine locul lui.
   Prins pe viu 2026-07-30. */
.site-footer .footer-brand {
  overflow: visible !important;
  margin-bottom: 0.85rem !important;
}
.site-footer .footer-brand img {
  filter: none !important;
  height: 76px !important;
  max-height: 76px !important;
  width: auto !important;
  object-fit: contain;
  display: block;
  transform: none;
}

@media (max-width: 767.98px) {
  .site-footer {
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important;
  }
  .site-footer .footer-brand img {
    height: 62px !important;
    max-height: 62px !important;
    transform: none;
  }
}

/* ==========================================================================
   8. MOBILE MENU WOW — Don Food (state-of-the-art off-canvas DREAPTA)
   --------------------------------------------------------------------------
   Personalizare exclusivă donfood. Slide din DREAPTA (thumb-friendly), header
   gradient burgundy cu logo, items compact, categoriile shop vizibile direct
   ca grid 2-col cu icoane, footer cu telefon + CTA "Comandă online".
   FĂRĂ blur — backdrop solid întunecat, contrast clar cu panel-ul off-white.
   ========================================================================== */
@media (max-width: 991.98px) {

  /* --- Hamburger button — accent donfood, dreapta --- */
  body .navbar-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    color: #fff;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
    position: relative;
    z-index: 9999;
  }
  body .navbar-menu-btn:hover,
  body .navbar-menu-btn:active,
  body .navbar-menu-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: scale(1.04);
  }
  body .navbar-menu-btn .navbar-menu-icon-open,
  body .navbar-menu-btn .navbar-menu-icon-close {
    font-size: 22px;
    line-height: 1;
  }

  /* --- Body lock (FĂRĂ backdrop întunecat — restul site-ului ramane vizibil
     in spatele meniului, cerere user 2026-05-12 15:15) --- */
  body.menu-open { overflow: hidden; }
  body.menu-open::before { display: none !important; content: none !important; }

  /* --- FIX STACKING CONTEXT (CAUZA REALA a „blur-ului" pe meniu) ---
     .site-navbar este position:sticky cu z-index:1000 → creeaza stacking context.
     Panel-ul .navbar-menu (z-index 9995) era RELATIV la stacking context-ul
     navbar-ului (z 1000), deci backdrop-ul body::before (z 9990) il acoperea
     vizual cu color-mix(in srgb, var(--color-bg) 72%, transparent) → arata dark/„blurat" desi computed bg era
     off-white.
     Solutie: cand meniul e deschis, ridicam .site-navbar deasupra backdrop-ului. */
  /* Meniu FULL-SCREEN: site-header-ul e ASCUNS COMPLET cat e meniul deschis (butonul X e portat
     de main.js sub <body>, deci supravietuieste) -> zero dunga neagra / header dublat peste meniu. */
  html body.menu-open .site-navbar:not(#cs-x) {
    display: none !important;
  }
  /* Scroll lock STRICT: pagina din spate NU deruleaza sub meniul deschis (ca la solopizza/lapascan) */
  html body.menu-open {
    overflow: hidden !important;
    height: 100dvh !important;
    touch-action: none !important;
  }
  body.menu-open::before { display: none !important; content: none !important; }
  html body.menu-open .navbar-menu-btn:not(#cs-x) {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 10002 !important;
    pointer-events: auto !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
  }

  /* --- KILL ALL BLUR pe panel-ul de meniu si descendants ---
     Centura+brace: chiar daca shared mobile-wow.css aplica backdrop-filter, l-am
     omorat aici cu super-specificity. */
  html body .site-navbar .navbar-menu,
  html body.menu-open .navbar-menu {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    will-change: auto !important;
  }
  html body.menu-open .navbar-menu *,
  html body .site-navbar .navbar-menu * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  /* --- Full-screen panel — ocupa intregul ecran pe mobil (ca solopizza/lapascan) --- */
  body .navbar-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--color-white) !important;
    color: var(--color-text) !important;
    z-index: 9995 !important;
    padding: 0 !important;
    transform: translateX(105%) !important;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body .navbar-menu.open {
    transform: translateX(0) !important;
  }

  /* --- Header panel: gradient burgundy + logo donfood + texture pattern --- */
  body .navbar-menu::before {
    content: '';
    display: block;
    width: 100%;
    height: 96px;
    background:
      url('/uploads/site/logo.png') no-repeat 20px center / auto 60px,
      radial-gradient(circle at 90% 30%, rgba(255,255,255,0.12) 0%, transparent 50%),
      linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-bottom: 3px solid var(--color-primary-dark);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
    position: relative;
  }

  /* --- Tag-line sub header (era textul donfood „Pizza · Grătar · Smash Burger",
         schimbat pe specificul Porcusorului) --- */
  body .navbar-menu > .navbar-nav::before {
    content: 'Sandwich · Crispy · Wings';
    display: block;
    text-align: center;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 10px 16px 6px;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-primary) 18%, transparent);
    margin-bottom: 6px;
  }

  /* --- Lista items — compact, scroll intern --- */
  body .navbar-menu > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body .navbar-menu .navbar-nav {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 12px 16px !important;
    margin: 0 !important;
    list-style: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0 !important; /* CRITIC: fara asta flex-item-ul nu se comprima sub continut -> scroll mort -> butonul de apel e impins sub ecran */
    -webkit-overflow-scrolling: touch;
  }
  body .navbar-menu .navbar-nav::-webkit-scrollbar { width: 4px; }
  body .navbar-menu .navbar-nav::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 4px;
  }

  body .navbar-menu .nav-item {
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* nav-link — compact: 11px vertical, 12px horizontal */
  body .navbar-menu .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 14px !important;
    margin: 2px 0 !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    transition: all 0.18s ease;
    text-decoration: none !important;
    position: relative;
    box-shadow: none !important;
    text-align: left !important;
  }
  body .navbar-menu .nav-link .nav-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
    color: var(--color-primary) !important;
    border-radius: 8px !important;
    margin-right: 0 !important;
    font-size: 1rem !important;
    flex-shrink: 0;
    transition: all 0.18s ease;
  }
  body .navbar-menu .nav-link:hover,
  body .navbar-menu .nav-link:active {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
    color: var(--color-primary) !important;
  }
  body .navbar-menu .nav-link:hover .nav-icon,
  body .navbar-menu .nav-link:active .nav-icon {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: rotate(-4deg) scale(1.05);
  }
  body .navbar-menu .nav-link.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 38%, transparent) !important;
  }
  body .navbar-menu .nav-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
  }
  body .navbar-menu .nav-arrow {
    margin-left: auto;
    opacity: 0.4;
    transition: transform 0.2s;
  }

  /* --- Dropdown Shop: AUTO-EXPANDED + grid 2-col cu category cards --- */
  body .navbar-menu .nav-dropdown,
  body .navbar-menu .nav-dropdown-mega {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    margin: 4px 4px 10px !important;
    padding: 4px 0 8px !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  /* Category card — compact, vizual — icon + nume */
  body .navbar-menu .nav-dropdown-item,
  body .navbar-menu .nav-dropdown-mega a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 10px !important;
    margin: 0 !important;
    background: var(--color-white) !important;
    border: 1.5px solid color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
    border-radius: 9px !important;
    color: var(--color-text) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    line-height: 1.15 !important;
    min-height: 44px;
  }
  body .navbar-menu .nav-dropdown-item .nav-dropdown-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
    color: var(--color-primary) !important;
    border-radius: 7px !important;
    margin-right: 0 !important;
    font-size: 0.92rem !important;
    flex-shrink: 0;
    transition: all 0.18s ease;
  }
  body .navbar-menu .nav-dropdown-item span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body .navbar-menu .nav-dropdown-item small {
    display: none !important; /* (count) ascuns pentru compact */
  }
  body .navbar-menu .nav-dropdown-item:hover,
  body .navbar-menu .nav-dropdown-item:active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 32%, transparent) !important;
  }
  body .navbar-menu .nav-dropdown-item:hover .nav-dropdown-icon,
  body .navbar-menu .nav-dropdown-item:active .nav-dropdown-icon {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
  }

  /* --- Item parent „Shop" cu categorii expandate — afișează săgeata în jos --- */
  body .navbar-menu .nav-item:has(> .nav-dropdown) > .nav-link .nav-arrow {
    transform: rotate(180deg);
    opacity: 0.6;
  }

  /* --- Footer panel: buton de APEL real (tel:) — numarul din Setari → Contact → Telefon (in HTML, header.php), in rosul brandului --- */
  body .navbar-menu .navbar-menu-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 20px);
    margin: 0 10px 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-on-primary);
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: 12px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 42%, transparent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }
  /* Text ALB pe toate starile linkului (inclusiv :visited dupa apel + back) */
  body .navbar-menu .navbar-menu-call:link,
  body .navbar-menu .navbar-menu-call:visited,
  body .navbar-menu .navbar-menu-call:hover,
  body .navbar-menu .navbar-menu-call:focus,
  body .navbar-menu .navbar-menu-call:active,
  body .navbar-menu .navbar-menu-call span {
    color: var(--color-on-primary);
  }
}

/* Contur mai puternic pe LIGHT (pe dark ramane subtilul original .25) */
body.theme-light .form-check-input {
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent) !important;
}
/* Switch necheckat pe teme LIGHT: bulina inchisa (alb 0.7 din baza e pt dark) */
body.theme-light .form-switch .form-check-input:not(:checked) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba%280,0,0,0.45%29'/%3E%3C/svg%3E") !important;
}

/* Oferta homepage pe LIGHT: tenta din brand (inline-ul warning/success era gandit pt dark) */
body.theme-light .section-offer-n-plus-one {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-white)) 0%, color-mix(in srgb, var(--color-accent) 5%, var(--color-white)) 100%) !important;
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   SECTION HEADER LIGHT — ancorare vizuala pe teme deschise (2026-07-10)
   Pe dark, sectiunile au glow/fundal (design donfood). Pe light titlurile pareau
   „trantite" pe fundal gol → bara gradient brand sub titlu + glow subtil.
   ========================================================================== */
body.theme-light .section-header .section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.85rem;
}
body.theme-light .section-header .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
body.theme-light .section-categories {
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-primary) 5%, transparent) 0%, transparent 55%) !important;
}

/* ==========================================================================
   OFERTA N+1 EVIDENTIATA pe light — banda brand sus + rama + umbra din primary
   (echivalentul light al cardului donfood care iese in evidenta pe dark)
   ========================================================================== */
body.theme-light .section-offer-n-plus-one {
  position: relative;
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
  box-shadow:
    0 18px 44px -18px color-mix(in srgb, var(--color-primary) 30%, transparent),
    0 4px 16px color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}
body.theme-light .section-offer-n-plus-one::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
  z-index: 1;
}

/* ==========================================================================
   BREADCRUMBS — navigatie proprie, in paleta brandului (2026-08-02)

   Doua lucruri rezolvate:
   1. Nivelul CURENT (li.breadcrumb-item.active) mostenea culoarea Bootstrap
      (--bs-secondary-color, gri inchis) => pe tema DARK era practic invizibil;
      numele produsului se vedea doar cand il selectai cu mouse-ul.
   2. Separatorul era un slash sters. Acum: pastile, iconita pe fiecare nivel
      (dupa data-crumb emis de Seo::renderBreadcrumbs) si chevron auriu.

   Markup-ul vine din shared si NU se atinge:
     ol.breadcrumb > li.breadcrumb-item[data-crumb] > a      (nivelele parinte)
     ol.breadcrumb > li.breadcrumb-item.active[data-crumb]   (nivelul curent)

   Separatorul sta pe ::after al elementului ANTERIOR (nu pe ::before al celui
   urmator, cum face Bootstrap) tocmai ca ::before sa ramana liber pentru iconita
   nivelului curent, care nu are un <a> in interior.
   ========================================================================== */

:root {
  --pp-crumb-sep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --pp-ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E");
  --pp-ic-shop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  --pp-ic-category: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Crect x='7' y='7' width='10' height='10' rx='2'/%3E%3C/svg%3E");
  --pp-ic-product: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M5.5 11v11'/%3E%3Cpath d='M20 2a4 4 0 0 0-4 4v6h4'/%3E%3Cpath d='M20 2v20'/%3E%3C/svg%3E");
  --pp-ic-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
}

body .product-breadcrumbs-wrap { padding-top: .35rem; }

/* --- banda --- */
body nav[aria-label="breadcrumb"] .breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .1rem;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: .35rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-white) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  box-shadow:
    0 10px 24px -18px rgba(0, 0, 0, .95),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 55%, transparent);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body nav[aria-label="breadcrumb"] .breadcrumb::-webkit-scrollbar { display: none; }

body nav[aria-label="breadcrumb"] .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 0;
}

/* --- separatorul Bootstrap, scos; al nostru sta pe ::after --- */
body nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
  content: none !important;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item:not(:last-child)::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin: 0 .05rem;
  background-color: color-mix(in srgb, var(--color-accent) 62%, transparent);
  -webkit-mask-image: var(--pp-crumb-sep);
          mask-image: var(--pp-crumb-sep);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}

/* --- nivelele parinte: pastile discrete --- */
body nav[aria-label="breadcrumb"] .breadcrumb-item > a {
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover,
body nav[aria-label="breadcrumb"] .breadcrumb-item > a:focus-visible {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  transform: translateY(-1px);
}

/* --- NIVELUL CURENT: alb, pe pastila brandului (bugul raportat) --- */
body nav[aria-label="breadcrumb"] .breadcrumb-item.active {
  gap: .36rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  color: var(--color-on-primary, #fff) !important;
  font-weight: 700;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 88%, #000),
    var(--color-primary));
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary) 90%, transparent);
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- iconita pe fiecare nivel, dupa data-crumb --- */
body nav[aria-label="breadcrumb"] .breadcrumb-item > a::before,
body nav[aria-label="breadcrumb"] .breadcrumb-item.active::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  opacity: .95;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item[data-crumb="home"] > a::before,
body nav[aria-label="breadcrumb"] .breadcrumb-item.active[data-crumb="home"]::before {
  -webkit-mask-image: var(--pp-ic-home); mask-image: var(--pp-ic-home);
}
body nav[aria-label="breadcrumb"] .breadcrumb-item[data-crumb="shop"] > a::before,
body nav[aria-label="breadcrumb"] .breadcrumb-item.active[data-crumb="shop"]::before {
  -webkit-mask-image: var(--pp-ic-shop); mask-image: var(--pp-ic-shop);
}
body nav[aria-label="breadcrumb"] .breadcrumb-item[data-crumb="category"] > a::before,
body nav[aria-label="breadcrumb"] .breadcrumb-item.active[data-crumb="category"]::before {
  -webkit-mask-image: var(--pp-ic-category); mask-image: var(--pp-ic-category);
}
body nav[aria-label="breadcrumb"] .breadcrumb-item[data-crumb="product"] > a::before,
body nav[aria-label="breadcrumb"] .breadcrumb-item.active[data-crumb="product"]::before {
  -webkit-mask-image: var(--pp-ic-product); mask-image: var(--pp-ic-product);
}
body nav[aria-label="breadcrumb"] .breadcrumb-item[data-crumb="page"] > a::before,
body nav[aria-label="breadcrumb"] .breadcrumb-item.active[data-crumb="page"]::before {
  -webkit-mask-image: var(--pp-ic-page); mask-image: var(--pp-ic-page);
}

/* --- intrare in scena, discreta, in cascada --- */
@keyframes ppCrumbIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
body nav[aria-label="breadcrumb"] .breadcrumb-item {
  animation: ppCrumbIn .34s cubic-bezier(.22, .9, .3, 1) both;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item:nth-child(1) { animation-delay: .02s; }
body nav[aria-label="breadcrumb"] .breadcrumb-item:nth-child(2) { animation-delay: .07s; }
body nav[aria-label="breadcrumb"] .breadcrumb-item:nth-child(3) { animation-delay: .12s; }
body nav[aria-label="breadcrumb"] .breadcrumb-item:nth-child(4) { animation-delay: .17s; }
body nav[aria-label="breadcrumb"] .breadcrumb-item:nth-child(n+5) { animation-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
  body nav[aria-label="breadcrumb"] .breadcrumb-item { animation: none; }
  body nav[aria-label="breadcrumb"] .breadcrumb-item > a { transition: none; }
  body nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover { transform: none; }
}

@media (max-width: 575.98px) {
  body nav[aria-label="breadcrumb"] .breadcrumb { padding: .3rem .4rem; }
  body nav[aria-label="breadcrumb"] .breadcrumb-item { font-size: .76rem; }
  body nav[aria-label="breadcrumb"] .breadcrumb-item > a { padding: .26rem .55rem; }
  body nav[aria-label="breadcrumb"] .breadcrumb-item.active { padding: .26rem .68rem; max-width: 22ch; }
  body nav[aria-label="breadcrumb"] .breadcrumb-item > a::before,
  body nav[aria-label="breadcrumb"] .breadcrumb-item.active::before { width: 13px; height: 13px; }
}

/* --------------------------------------------------------------------------
   BREADCRUMBS — derivarile DIRECTIONALE, scopate pe tema (regula ZONE)

   Banda si umbra sunt singurele lucruri care trebuie sa stie daca fundalul
   paginii e inchis sau deschis: „mai deschis"/„mai inchis" nu se poate exprima
   cu color-mix singur. Clasa vine din layout.php, calculata din luminanta lui
   `color_bg` (Identitate) — deci se muta singura daca clientul isi schimba paleta.

   Restul (culori, iconite, pastila activa) sunt deja pe paleta si nu au nevoie
   de scopare: pe dark `--color-white` e suprafata cardului, pe light e albul real.
   -------------------------------------------------------------------------- */

/* fundal inchis: banda e o suprafata RIDICATA fata de pagina + umbra neagra */
body.theme-dark nav[aria-label="breadcrumb"] .breadcrumb {
  background: color-mix(in srgb, var(--color-white) 72%, transparent);
  box-shadow:
    0 10px 24px -18px rgba(0, 0, 0, .95),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 55%, transparent);
}

/* fundal deschis: pe alb-pe-alb banda ar disparea → o COBORAM usor fata de pagina */
body.theme-light nav[aria-label="breadcrumb"] .breadcrumb {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-white));
  box-shadow:
    0 8px 20px -16px color-mix(in srgb, var(--color-text) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 90%, transparent);
}
body.theme-light nav[aria-label="breadcrumb"] .breadcrumb-item > a {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* --------------------------------------------------------------------------
   BREADCRUMBS — aer intre bara de meniu si banda de navigare
   Erau lipite (6px). Spatiul il da NAV-ul, nu wrapperul, ca sa iasa la fel pe
   toate paginile: produs/categorie/shop folosesc `.product-breadcrumbs-wrap`,
   iar despre-noi/paginile legale folosesc `.container.mt-3` (care are deja 16px).
   Blogul e exceptat — acolo banda sta in hero, care are propriul padding.
   -------------------------------------------------------------------------- */
body .product-breadcrumbs-wrap { padding-top: 0; }

body nav[aria-label="breadcrumb"] { margin-top: 1.15rem; }

body .container.mt-3 > nav[aria-label="breadcrumb"] { margin-top: .35rem; }

body .blog-hero nav[aria-label="breadcrumb"] { margin-top: 0; }

@media (max-width: 575.98px) {
  body nav[aria-label="breadcrumb"] { margin-top: .8rem; }
  body .container.mt-3 > nav[aria-label="breadcrumb"] { margin-top: .2rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO CATEGORIE — lizibilitate peste fotografie (cerere user 2026-08-02)
   Badge-ul „CATEGORIE" era roșu translucid cu text roșu-pal, iar descrierea
   folosea --color-text-secondary (gri) — ambele se pierdeau peste poză.
   Badge = bandă BRAND colorată → text alb mereu (excepție documentată în regula
   de zone). Descrierea preia --color-text: pe tema dark iese aproape albă, iar
   dacă vreodată se trece pe light rămâne închisă și lizibilă.
   ───────────────────────────────────────────────────────────────────────────── */
.category-hero .category-hero-badge,
body.theme-light .category-hero .category-hero-badge {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
}

.category-hero .category-hero-desc {
  color: var(--color-text) !important;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--color-bg) 75%, transparent);
}

/* ==========================================================================
   DESPRE NOI — fotografia localului, sus pe pagină (2026-08-06)
   Colțuri rotunde + umbră caldă în tonul brandului; pe mobil se strânge la un
   cadru mai pătrat, ca firma să rămână lizibilă și să nu se taie mașinile.
   ========================================================================== */
.page-despre-noi .about-photo {
    /* Fotografia are 680x510 — nu o intindem peste rezolutia ei reala, altfel se
       vede moale. O centram si o lasam sa respire. */
    margin: 0 auto 2.25rem;
    max-width: 720px;
    position: relative;
}
.page-despre-noi .about-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 58%;          /* păstrează firma și mașinile în cadru */
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    box-shadow:
        0 22px 48px -18px color-mix(in srgb, var(--color-primary) 55%, transparent),
        0 8px 20px -10px rgba(0, 0, 0, 0.45);
    transition: transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s ease;
}
.page-despre-noi .about-photo:hover img {
    transform: translateY(-4px);
    box-shadow:
        0 30px 60px -18px color-mix(in srgb, var(--color-primary) 65%, transparent),
        0 10px 24px -10px rgba(0, 0, 0, 0.5);
}
.page-despre-noi .about-photo figcaption {
    margin-top: .7rem;
    text-align: center;
    font-size: .82rem;
    color: var(--color-text-secondary);
}
@media (max-width: 767.98px) {
    .page-despre-noi .about-photo img {
        aspect-ratio: 5 / 4;
        border-radius: 16px;
    }
}

/* ==========================================================================
   Selectia de text — textul selectat ALB pe fundalul rosu
   --------------------------------------------------------------------------
   Regula shared (main.css) pune `color: var(--color-white)`, iar pe o tema DARK
   `--color-white` NU e alb, ci suprafata cardului (#242428) => textul selectat
   iesea inchis pe rosu, aproape ilizibil. Fundalul ramane cum e (primary);
   se schimba doar culoarea textului, pe `--color-on-primary` (calculata in
   layout.php din luminanta brandului, cu fallback alb).
   ========================================================================== */
::selection {
    color: var(--color-on-primary, #fff);
}
::-moz-selection {
    color: var(--color-on-primary, #fff);
}