/**
 * La Grecu — theme overrides (sistem de design „Taverna Egeeană")
 *
 * Fișierul a pornit ca temă Solo Pizza (maro+portocaliu, copiată din lapascan) și a fost
 * rescris peste pe identitatea grecească: albastru egeean + turcoaz + alb cicladic,
 * Cormorant Garamond peste DM Sans, meandrul grecesc ca motiv-semnătură.
 * Variabilele vechi --sp-* sunt păstrate ca alias-uri către paletă (vezi ~linia 131).
 *
 * Ultima modificare: 2026-10-07 21:00
 * Modificari:
 *   2026-10-07 21:00 — Mobil: fara sagetile slider-ului (stateau peste text), text de banner mai mic; sigla din bara de admin fixata la 20px; mini-cos: hover lizibil pe „Vezi cosul" + efect pe „Finalizează"
 *   2026-10-07 15:00 — Antet: sigla putin mai mare (92px pe laptop, 76px intre 992 si 1199px)
 *   2026-10-07 14:00 — Antet: iconitele stau iar langa hamburger pe tableta/mobil; butonul „Vezi cosul" din mini-cos isi recapata chenarul. Sigla 80px, meniu cu MAJUSCULE pe toata latimea, telefon (din Setari → Contact) ca pastila langa iconite, cosul mereu vizibil (degradare pe trepte); scoasa regula moarta de sigla „La Pa"
 *   2026-09-24 23:30 — Slider Acasa: scos stratul inchis (scrim) de peste poza; textul pe o pastila mata doar sub el
 *   2026-09-24 20:30 — Grila pe doua coloane a optiunilor restransa la modul `card` (`:not(.is-list)`): la `list` coloanele vin din setarea grupului
 */

/* === FONTS === Outfit (body) + Poppins (headings) — incarcate from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ============================================================================
   1. Logo + Header — bold, distinctiv, sticky elegant
   ============================================================================ */
:root {
  --logo-height: 92px;
  --lg-hdr-pad-y: 8px;
  --sp-brown: var(--color-primary);
  --sp-brown-dark: var(--color-primary-dark);
  --sp-brown-light: var(--color-primary-light);
  --sp-brown-lightest: var(--color-primary-lightest);
  --sp-orange: var(--color-accent);
  --sp-orange-dark: color-mix(in srgb, var(--color-accent) 88%, #000);
  --sp-orange-light: color-mix(in srgb, var(--color-accent) 80%, var(--color-white));
  --sp-orange-lightest: color-mix(in srgb, var(--color-accent) 12%, var(--color-white));
  --sp-shadow-sm: 0 2px 8px color-mix(in srgb, var(--color-primary) 6%, transparent), 0 1px 3px rgba(0,0,0,0.04);
  --sp-shadow-md: 0 8px 24px color-mix(in srgb, var(--color-primary) 10%, transparent), 0 2px 6px rgba(0,0,0,0.05);
  --sp-shadow-lg: 0 20px 50px color-mix(in srgb, var(--color-primary) 15%, transparent), 0 6px 16px rgba(0,0,0,0.06);
  --sp-shadow-xl: 0 30px 80px color-mix(in srgb, var(--color-primary) 20%, transparent), 0 10px 24px rgba(0,0,0,0.08);
  --sp-shadow-orange: 0 12px 28px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

body {
  background: var(--color-white);
  color: var(--color-text);
  font-family: 'Outfit','Inter',sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section-title, .hero-title, .page-title {
  font-family: 'Poppins','Outfit',sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

/* Header — pe TOATA latimea ferestrei, un singur padding lateral (inainte: container 1280 +
   navbar-inner 1280 + padding dublu ⇒ sigla impinsa spre centru, iar meniul, care nu se putea
   ingusta, impingea iconitele + cosul in afara ecranului sub ~1640px; body overflow-x:clip le
   taia invizibil). Meniul se poate acum ingusta (min-width:0) si degradeaza pe trepte. */
.site-navbar {
  background: var(--color-white) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary-dark) 5%, transparent);
  transition: box-shadow 0.3s ease;
}
.site-navbar.scrolled,
.site-navbar.navbar-scrolled { box-shadow: 0 4px 24px color-mix(in srgb, var(--color-primary-dark) 12%, transparent); }

body .site-navbar > .container { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
body .site-navbar .navbar-inner {
  max-width: 1760px;
  margin: 0 auto;
  padding: var(--lg-hdr-pad-y) clamp(14px, 2.2vw, 44px) !important;
  gap: clamp(10px, 1.4vw, 28px) !important;
  min-width: 0;
}

/* Sigla mai mare, cu margini negative ca bara sa nu creasca mult */
body .site-navbar .navbar-logo { flex: 0 0 auto !important; display: block; line-height: 0; }
body .site-navbar .navbar-logo img,
body .site-navbar .logo img {
  height: var(--logo-height) !important;
  max-height: none !important;
  width: auto !important;
  max-width: none !important;
  margin-block: calc(var(--lg-hdr-pad-y) * -1) !important;
  display: block !important;
  object-fit: contain;
}
body .site-navbar .navbar-icons { flex: 0 0 auto !important; }
/* doar pe desktop: sub 992px ramane margin-left:auto din navbar.css (iconitele langa hamburger) */
@media (min-width: 992px) {
  body .site-navbar .navbar-inner { justify-content: flex-start !important; }
  body .site-navbar .navbar-icons { margin-left: 0 !important; }
}

/* Meniul main — link-uri BOLD, fara border-bottom portocaliu */
/* :where(:not(.btn)) — butoanele din mini-cos (stau tot in .site-navbar) isi pastreaza chenarul
   si culoarea; :where tine specificitatea veche, ca regulile iconitelor sa castige in continuare */
body .site-navbar .navbar-menu a,
body .site-navbar a:where(:not(.btn)),
body .site-navbar .nav-link {
  font-weight: 700 !important;
  color: var(--color-text) !important;
  transition: color 0.2s ease;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
}
body .site-navbar .nav-link { background: transparent !important; }
/* „Vezi cosul" din mini-cos: main.css pune .btn{border:none}, outline-ul are nevoie de chenar explicit */
body .mini-cart-actions .btn { transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important; }
body .mini-cart-actions .btn-outline-success { border: 1.5px solid var(--color-primary) !important; color: var(--color-primary) !important; background: transparent !important; }
/* hover: plin in culoarea magazinului, text pe culoarea de contrast (inainte ramanea albastru pe albastru) */
body .mini-cart-actions .btn-outline-success:hover,
body .mini-cart-actions .btn-outline-success:focus-visible { background: var(--color-primary) !important; color: var(--color-on-primary) !important; }
/* „Finalizează": la hover se inchide la culoare, se ridica putin si capata umbra (inainte nu avea niciun efect) */
body .mini-cart-actions .btn-success:hover,
body .mini-cart-actions .btn-success:focus-visible {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary-dark) 35%, transparent) !important;
}
body .site-navbar .navbar-menu a:hover,
body .site-navbar .nav-link:hover { color: var(--sp-orange) !important; }
body .site-navbar .navbar-menu .active,
body .site-navbar .navbar-menu a.active,
body .site-navbar .nav-link.active,
body .site-navbar a.active {
  color: var(--sp-orange) !important;
  font-weight: 800 !important;
}
body .site-navbar .nav-link.active::after,
body .site-navbar .navbar-menu a.active::after { content: none !important; display: none !important; }

/* Desktop: MAJUSCULE mari, itemi distribuiti pe spatiul liber, telefon ca pastila langa iconite */
@media (min-width: 992px) {
  body .site-navbar .navbar-menu {
    flex: 1 1 auto !important; min-width: 0 !important;
    display: flex !important; align-items: center; justify-content: flex-end;
    gap: clamp(10px, 1.2vw, 24px);
  }
  body .site-navbar .navbar-nav { flex: 1 1 auto; min-width: 0; justify-content: space-evenly; gap: 2px; }
  body .site-navbar .nav-link {
    position: relative;
    font-family: 'Poppins','Outfit',sans-serif !important;
    font-size: clamp(13px, .5vw + 8.5px, 17px) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .04em !important;
    line-height: 1.2;
    padding: 10px clamp(6px, .55vw, 12px) !important;
    gap: 6px;
    border-radius: 10px;
    white-space: nowrap;
  }
  body .site-navbar .nav-link .nav-icon { color: var(--color-accent); font-size: 1.05em; margin: 0; }
  body .site-navbar .nav-link::after {
    content: ""; display: block; position: absolute;
    left: clamp(6px, .55vw, 12px); right: clamp(6px, .55vw, 12px); bottom: 4px;
    height: 2px; border-radius: 2px; background: var(--color-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .26s cubic-bezier(.22,.9,.3,1);
  }
  body .site-navbar .nav-link:hover::after { transform: scaleX(1); }

  /* Telefonul vine din Setari → Contact (header.php) — aici doar il aratam si pe desktop */
  body .site-navbar .navbar-menu .navbar-menu-call {
    display: inline-flex !important; align-items: center; gap: 8px; flex: 0 0 auto;
    padding: 5px 16px 5px 5px; border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 9%, var(--color-white)) !important;
    border: 1.5px solid color-mix(in srgb, var(--color-accent) 35%, transparent) !important;
    color: var(--color-primary-dark) !important;
    font-family: 'Poppins','Outfit',sans-serif; font-weight: 800 !important; font-size: 15px;
    letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap;
    text-decoration: none !important;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  body .site-navbar .navbar-menu .navbar-menu-call:hover {
    background: color-mix(in srgb, var(--color-accent) 16%, var(--color-white)) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-primary-dark) !important;
    transform: translateY(-1px);
  }
  body .site-navbar .navbar-menu-call-ico {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent);
    font-size: 0; flex: 0 0 auto;
  }
  body .site-navbar .navbar-menu-call-ico::before { content: "\e133"; font-family: 'lucide'; font-size: 16px; line-height: 1; }
}
/* Trepte de degradare — cosul ramane MEREU vizibil */
@media (min-width: 992px) and (max-width: 1599.98px) {
  body .site-navbar .nav-link .nav-icon { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  body .site-navbar .navbar-menu .navbar-menu-call { padding: 5px; }
  body .site-navbar .navbar-menu-call-num { display: none; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root { --logo-height: 76px; --lg-hdr-pad-y: 6px; }
  body .site-navbar .nav-link { font-size: 13px !important; letter-spacing: .02em !important; padding: 8px 5px !important; }
  body .site-navbar .navbar-icon-btn { padding: 6px 5px !important; }
}

/* Bara de top "Suntem inchisi" */
.top-bar,
.order-hours-bar,
.notice-bar {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%) !important;
  color: #fff;
}
.top-bar .badge,
.order-hours-bar .badge {
  background: var(--sp-orange);
  color: #fff;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ============================================================================
   2. Hero — bold gradient overlay, CTA portocaliu cu pulse glow
   ============================================================================ */
.hero-section,
#heroSlider {
  position: relative;
  overflow: hidden;
}

/* Slider — slides stacked absolute, fade between (else only first one is visible
   pe lapascan din cauza shared CSS care le lasa relative one-below-another).
   Inaltime: 50vh (era 78vh — redus cu ~35% la cererea user-ului) */
body .hero-section,
body #heroSlider {
  position: relative !important;
  min-height: 50vh;
  height: 50vh;
  overflow: hidden;
}
body .hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}
body body .hero-slide {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 50vh !important;
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  pointer-events: none;
}
body .hero-slide.active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2;
  pointer-events: auto;
}

body .hero-slide-image,
body .hero-slide img.hero-slide-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 50vh !important;
  object-fit: cover;
  filter: brightness(0.85) saturate(1.15);
}
body .hero-section .hero-content {
  padding: 2rem 0;
}
body .hero-section .hero-title {
  font-size: clamp(1.8rem, 4vw, 3.5rem) !important;
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary-dark) 78%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 55%, transparent) 40%,
    rgba(0,0,0,0.25) 70%,
    color-mix(in srgb, var(--color-accent) 30%, transparent) 100%);
  display: flex; align-items: center;
}

.hero-content {
  max-width: 640px;
  padding: 4rem 0;
  color: #FFFFFF;
}
.hero-content::before {
  content: '🔥 Cuptor pe lemne · Aluat 48h';
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-orange-light);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.hero-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(2.5rem, 5.5vw, 4.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  color: #FFFFFF !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
  letter-spacing: -0.03em;
}

.hero-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
  margin-bottom: 2rem;
  max-width: 560px;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-actions .btn,
.hero-actions a.btn,
.hero-actions .btn-light {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  padding: 1rem 2.25rem !important;
  border-radius: 999px !important;
  box-shadow: var(--sp-shadow-orange) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-actions .btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--color-accent) 50%, transparent) !important;
}
.hero-actions .btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.hero-actions .btn:hover::after { transform: translateX(100%); }

/* Hero arrows — pastreaza translateY(-50%) baseline, scale on hover via child */
.hero-arrow,
.hero-arrow-prev,
.hero-arrow-next {
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #FFFFFF !important;
  width: 56px; height: 56px;
  border-radius: 50% !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: absolute;
}
.hero-arrow:hover {
  background: var(--sp-orange) !important;
  border-color: var(--sp-orange) !important;
  border-width: 2px !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
/* Scale the SVG inside the button — buton stays in place, doar iconul si lumina cresc */
.hero-arrow svg,
.hero-arrow-prev svg,
.hero-arrow-next svg {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
}
.hero-arrow:hover svg {
  transform: scale(1.25) !important;
}
/* Pulse ring effect — un cerc subtil pulsator pe hover */
.hero-arrow::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.hero-arrow:hover::before {
  inset: -8px;
  border-color: rgba(255, 255, 255, 0.4);
}
.hero-dots { bottom: 30px; }
.hero-dot {
  background: rgba(255,255,255,0.4) !important;
  width: 10px; height: 10px;
  border-radius: 50%;
  transition: all 0.25s ease;
}
.hero-dot.active {
  background: var(--sp-orange) !important;
  width: 32px; border-radius: 6px;
}

/* ============================================================================
   3. Categorii — cards premium cu emoji pizza, hover dramatic
   ============================================================================ */
.section-categories {
  background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--color-accent) 5%, var(--color-white)) 100%);
  padding: 5rem 0;
}

.section-categories .section-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--sp-brown-dark);
}
.section-categories .section-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0.5rem auto 3rem;
}

.categories-grid {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 1rem 0;
}
.categories-grid::-webkit-scrollbar { display: none; }

/* ============================================================================
   CATEGORY CARDS — clean design, imagine mare top + title navy + count orange
   ============================================================================ */
.category-card {
  flex: 0 0 220px !important;
  scroll-snap-align: start;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 0 1.25rem !important;
  background: var(--color-white) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary-dark) 6%, transparent) !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease !important;
  cursor: pointer;
  min-height: 0 !important;
  text-align: center;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary-dark) 7%, transparent),
              0 2px 6px rgba(0,0,0,0.03) !important;
  isolation: isolate;
}

.category-card:hover {
  transform: translateY(-6px) !important;
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent) !important;
  box-shadow: 0 20px 44px color-mix(in srgb, var(--color-primary-dark) 15%, transparent),
              0 8px 18px color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
}

/* Gradient line top — apare la hover */
.category-card::before {
  content: '' !important;
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sp-brown) 0%, var(--sp-orange) 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;
}
.category-card:hover::before { transform: scaleX(1); }
.category-card::after { display: none !important; }

/* IMAGE container — top mare 180px */
body .section-categories .category-card .category-card-icon {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 180px !important;
  flex: 0 0 180px !important;
  display: block !important;
  background: linear-gradient(135deg, var(--sp-brown-lightest) 0%, var(--sp-orange-lightest) 100%) !important;
  border-radius: 20px 20px 0 0 !important;
  margin: 0 0 0.85rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 4rem !important;
  transition: none !important;
}

/* Imagine — fill + zoom subtle hover */
body .section-categories .category-card .category-card-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.category-card:hover .category-card-icon img {
  transform: scale(1.08) !important;
}

/* Emoji fallback (cand NU exista img) */
body .section-categories .category-card .category-card-icon:not(:has(img))::before {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  z-index: 1;
}
body .section-categories .category-card .category-card-icon:has(img)::before {
  display: none !important;
  content: none !important;
}
.category-card[href*="/categorie/pizza"] .category-card-icon::before { content: '🍕'; }
.category-card[href*="/categorie/garnituri"] .category-card-icon::before { content: '🍟'; }
.category-card[href*="/categorie/salate"] .category-card-icon::before { content: '🥗'; }
.category-card[href*="/categorie/sosuri"] .category-card-icon::before { content: '🥫'; }
.category-card[href*="/categorie/racoritoare"] .category-card-icon::before { content: '🥤'; }
.category-card[href*="/categorie/crispy"] .category-card-icon::before { content: '🍗'; }
.category-card-icon i { display: none !important; }

/* TITLE — navy bold sub imagine, static (NU overlay) */
body .section-categories .category-card .category-card-title.category-card-title {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  display: block !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  color: var(--sp-brown-dark) !important;
  margin: 0 0 0.55rem !important;
  background: none !important;
  padding: 0 1rem !important;
  text-shadow: none !important;
  z-index: auto;
  text-align: center;
  letter-spacing: -0.01em;
  transition: color 0.3s ease !important;
}
.category-card:hover .category-card-title.category-card-title {
  color: var(--sp-orange-dark) !important;
}

/* COUNT pill — orange centrat sub titlu */
body .section-categories .category-card .category-card-count {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  margin: 0 auto !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 40%, transparent) !important;
  z-index: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  white-space: nowrap;
}
.category-card:hover .category-card-count {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-accent) 55%, transparent) !important;
}

/* Responsive — pe mobile cards un pic mai mici */
@media (max-width: 767.98px) {
  .category-card {
    flex: 0 0 180px !important;
  }
  body .section-categories .category-card .category-card-icon {
    height: 150px !important;
    flex: 0 0 150px !important;
  }
  body .section-categories .category-card .category-card-title.category-card-title {
    font-size: 1.02rem !important;
  }
}

/* ============================================================================
   4. Section header — section badge + title aligned
   ============================================================================ */
.section-header { margin-bottom: 3rem; }

.section-badge {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sp-orange) !important;
  background: var(--sp-orange-lightest) !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  margin-bottom: 1rem !important;
}

/* TOATE section-titles brand navy (var(--color-primary-dark)) — selectoare comprehensive
   pentru a invinge orice override mai specific cu !important */
.section-title,
body .section-title,
body h1.section-title, body h2.section-title, body h3.section-title,
body section h1.section-title, body section h2.section-title,
body .story-title,
body .section-bestsellers h2,
body .section-products h2,
body .section-recommended h2,
body .section-testimonials h2,
body .section-categories h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  color: var(--sp-brown-dark) !important;  /* brand navy, era var(--color-text) negru pur */
}
.section-subtitle {
  color: var(--color-text-secondary) !important;
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0.5rem auto 0;
}

/* ============================================================================
   5. Story section — split echilibrat 50/50, NU poză enormă verticală
   ============================================================================ */
.section-story {
  background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--color-accent) 5%, var(--color-white)) 100%);
  padding: 5rem 0;
}
.section-story .story-image,
.section-story img {
  max-height: 480px;
  width: 100%;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--sp-shadow-lg);
  transform: rotate(-1.5deg);
  transition: transform 0.4s ease;
}
.section-story .story-image:hover,
.section-story img:hover { transform: rotate(0deg) scale(1.02); }

.section-story .story-content { padding: 1rem 1rem 1rem 3rem; }
.section-story h2 {
  font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
  color: var(--sp-brown-dark);
  margin: 1rem 0 1.5rem;
}
.section-story p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}

.section-story .btn,
.section-story a.btn {
  background: var(--sp-brown) !important;
  color: #FFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  padding: 0.9rem 2rem !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
  transition: all 0.25s ease;
}
.section-story .btn:hover {
  background: var(--sp-brown-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
}

/* ============================================================================
   6. Benefits / USP bar — premium row cu iconițe portocalii
   ============================================================================ */
.benefits-bar,
.section-benefits {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--sp-brown-lightest) 100%) !important;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
  padding: 2.5rem 0 !important;
}
.benefits-bar .container > .row,
.benefits-bar .benefits-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .benefits-bar .container > .row,
  .benefits-bar .benefits-grid { grid-template-columns: 1fr 1fr !important; }
}

.benefit-item,
.benefits-bar .col,
.benefits-bar .col-md-3 {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  padding: 1rem !important;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: var(--sp-shadow-sm);
  transition: all 0.25s ease;
}
.benefit-item:hover,
.benefits-bar .col:hover {
  transform: translateY(-3px);
  box-shadow: var(--sp-shadow-md);
}

.benefit-item i,
.benefits-bar i,
.benefit-icon i {
  font-size: 1.75rem !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%);
  width: 52px; height: 52px;
  display: flex !important; align-items: center; justify-content: center;
  border-radius: 14px;
  flex-shrink: 0;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.benefit-item strong,
.benefits-bar strong {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  display: block;
  margin-bottom: 0.2rem;
}
.benefit-item .text-muted,
.benefits-bar .text-muted,
.benefits-bar small {
  color: var(--color-text-secondary) !important;
  font-size: 0.85rem;
}

/* Force visible title + count after icon (override inline rule from home.php
   `.section-categories .category-card .category-card-title { color: white }` —
   beat its specificity with `body` prefix → 0,3,1 > 0,3,0). */
/* (Vechile reguli pentru title static + count blue + disable ::after
   au fost eliminate pentru noul design WOW cu title overlay si gradient
   pe imagine — vezi sectiunea CATEGORY CARDS WOW de mai sus.) */
.section-categories .category-card-overlay { display: none !important; }

/* ============================================================================
   7. Product cards — premium cu shadow, hover lift, badge orange
   (clase reale: .product-card / .product-card-image / .product-card-body /
    .product-card-category / .product-card-title / .product-card-price /
    .product-card-badge / .product-card-wishlist / .product-card-overlay)
   ============================================================================ */
.section-products,
.section-bestsellers {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 5%, var(--color-white)) 0%, #FFFFFF 100%);
  padding: 5rem 0;
}

.product-card {
  background: var(--color-white) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white)) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: var(--sp-shadow-sm) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
}
.product-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: var(--sp-shadow-xl) !important;
  border-color: var(--sp-brown) !important;
}

/* Image wrapper */
.product-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--sp-brown-lightest) 0%, var(--sp-orange-lightest) 100%);
}
.product-card-image > a { display: block; width: 100%; height: 100%; }
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-card:hover .product-card-image img { transform: scale(1.07); }

/* Badges (top-left) */
.product-card-badges {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 3;
}
.product-card-badge {
  display: inline-block;
  padding: 5px 11px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 8px;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  backdrop-filter: blur(6px);
}
.product-card-badge.badge-bestseller {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%);
}
.product-card-badge.badge-new,
.product-card-badge.badge-featured {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%);
}

/* Wishlist heart (top-right) */
.product-card-wishlist {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.95) !important;
  border: none !important;
  border-radius: 50% !important;
  color: var(--sp-orange) !important;
  font-size: 1rem;
  display: flex !important; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--sp-shadow-sm);
  transition: all 0.2s ease;
  z-index: 3;
}
.product-card-wishlist:hover {
  background: var(--sp-orange) !important;
  color: #FFFFFF !important;
  transform: scale(1.1);
}

/* Overlay on hover (Add to cart / Alege variante) */
.product-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-dark) 0%, transparent) 0%, color-mix(in srgb, var(--color-primary-dark) 75%, transparent) 100%);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1.2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
.product-card-overlay > * { pointer-events: auto; }
.product-card:hover .product-card-overlay { opacity: 1; }
.product-card-overlay .btn,
.product-card-overlay a,
.product-card-overlay button {
  background: var(--sp-orange) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 0.7rem 1.5rem !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: var(--sp-shadow-orange);
}

/* Body */
.product-card-body { padding: 1.25rem 1.25rem 1.5rem !important; }

/* Reset any inherited "mini-card" styling on children (border, box-shadow,
   outline, background-image) that CSS shared applies to span-like elements. */
.product-card .product-card-body *,
.product-card-body h1,
.product-card-body h2,
.product-card-body h3,
.product-card-body h4,
.product-card-body span,
.product-card-body a,
.product-card-body div,
.product-card-body strong {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
}
.product-card-body { background: var(--color-white) !important; }

/* Category label */
.product-card-category {
  display: inline-block;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-brown) !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 0.5rem;
}
.product-card-category:hover { color: var(--sp-orange) !important; }

/* Title */
.product-card-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  margin: 0 0 0.75rem !important;
  min-height: 2.6rem;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.product-card-title a {
  color: var(--color-text) !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}
.product-card-title a:hover { color: var(--sp-brown) !important; }

/* Price */
.product-card-price {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-family: 'Poppins', sans-serif !important;
  margin-top: 0.5rem;
}
.product-card-price .price-prefix,
.product-card .price-prefix {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: var(--color-text-light) !important;
}
.product-card-price .price,
.product-card-price .product-card-price-value,
.product-card-price strong {
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  color: var(--sp-orange) !important;
}

/* Add-to-cart CTA inside card body */
.product-card .btn-add-cart,
.product-card .btn-primary,
.product-card-body .btn {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  border-radius: 12px !important;
  padding: 0.7rem 1.2rem !important;
  width: 100%;
  margin-top: 0.75rem;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 25%, transparent);
  transition: all 0.25s ease;
}
.product-card .btn-add-cart:hover {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-orange) !important;
}

/* CTA "Vezi toate produsele" */
.section-products .btn,
.section-bestsellers .btn,
.btn-see-all {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  padding: 1rem 2.25rem !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
  font-size: 1rem !important;
  transition: all 0.25s ease;
}
.section-products .btn:hover,
.btn-see-all:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-primary) 42%, transparent) !important;
}

/* ============================================================================
   8. Testimonials — cards premium cu citate, stele aurii
   ============================================================================ */
.section-testimonials {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sp-brown-lightest) 100%) !important;
  padding: 5rem 0;
}

.testimonial-card {
  background: var(--color-white) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white)) !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  box-shadow: var(--sp-shadow-md) !important;
  position: relative;
  transition: all 0.3s ease;
}
.testimonial-card::before {
  content: none;
  display: none;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sp-shadow-lg) !important;
  border-color: var(--sp-orange) !important;
}

.testimonial-card-stars { color: var(--color-warning); font-size: 1.1rem; }
.testimonial-card-stars .empty { color: var(--color-border); }
.testimonial-card-text {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--color-text) !important;
  margin: 1rem 0 1.5rem !important;
  font-style: normal !important;
  border: none !important;
  padding: 0 !important;
}
.testimonial-card-author {
  display: flex; align-items: center; gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
}
.testimonial-card-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-orange) 100%);
  color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
}
.testimonial-card-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--color-text);
}
.testimonial-card-location {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  display: flex; align-items: center; gap: 0.3rem;
}
.testimonial-card-location i { color: var(--sp-orange); }

/* ============================================================================
   9. Newsletter — fundal gradient hero-like cu CTA portocaliu
   ============================================================================ */
.newsletter-section {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 50%, var(--sp-orange-dark) 130%) !important;
  padding: 4rem 0 !important;
  position: relative;
  overflow: hidden;
  color: #FFF;
}
.newsletter-section::before {
  content: '🍕';
  position: absolute;
  font-size: 22rem;
  right: -3rem; top: 50%;
  transform: translateY(-50%) rotate(-15deg);
  opacity: 0.05;
  pointer-events: none;
}
.newsletter-section h2,
.newsletter-section .section-title {
  color: #FFFFFF !important;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
}
.newsletter-section p { color: rgba(255,255,255,0.9); }

.newsletter-section input[type=email],
.newsletter-section .newsletter-input {
  background: rgba(255,255,255,0.95) !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  padding: 1rem 1.5rem 1rem 3.25rem !important;
  font-size: 1rem !important;
  color: var(--color-text) !important;
}
.newsletter-section input[type=email]:focus,
.newsletter-section .newsletter-input:focus {
  border-color: var(--sp-orange) !important;
  outline: none;
  background: var(--color-white) !important;
}
.newsletter-section .newsletter-input-icon {
  left: 1.35rem !important;
  color: var(--sp-orange) !important;
}
.newsletter-section .btn,
.newsletter-section button[type=submit] {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  border: none !important;
  color: #FFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  padding: 1rem 2rem !important;
  border-radius: 999px !important;
  box-shadow: var(--sp-shadow-orange) !important;
}
.newsletter-section .btn:hover { transform: translateY(-2px); }

/* ============================================================================
   10. Footer — dark sleek cu accente portocalii
   ============================================================================ */
.site-footer,
.footer-section {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-dark) 40%, #000) 0%, color-mix(in srgb, var(--color-primary-dark) 22%, #000) 100%) !important;
  color: rgba(255,255,255,0.7);
  padding: 4rem 0 2rem !important;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sp-brown) 0%, var(--sp-orange) 100%);
}
.site-footer h3,
.site-footer h4,
.site-footer .footer-title {
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.site-footer a {
  color: rgba(255,255,255,0.7) !important;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}
.site-footer a:hover {
  color: var(--sp-orange) !important;
  padding-left: 6px;
}
.site-footer .social-link {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 0.5rem;
  transition: all 0.25s ease;
}
.site-footer .social-link:hover {
  background: var(--sp-orange);
  transform: translateY(-3px);
}
.site-footer .copyright,
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 2rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
}

/* ============================================================================
   BREADCRUMBS — WOW state of the art
   ============================================================================ */
body nav[aria-label="breadcrumb"] {
  margin: 1rem 0 1.5rem !important;
  padding: 0 !important;
}
body nav[aria-label="breadcrumb"] .breadcrumb {
  margin: 0 !important;
  list-style: none !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item {
  display: inline-flex !important;
  align-items: center;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item {
  padding-left: 0 !important;
}
/* ============================================================================
   BLOG ARTICLE — spacing redus header→imagine→primul paragraf
   ============================================================================ */
body .blog-article-header-section {
  padding-top: 0.5rem !important;
  padding-bottom: 0.75rem !important;
}
body .blog-article-title {
  margin-bottom: 0.6rem !important;
}
body .blog-article-meta {
  margin-bottom: 0 !important;
}
body .blog-article-image-section {
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
}
body .blog-article-content-section {
  padding-top: 0 !important;
}
body .blog-article-content-wrapper > *:first-child,
body .blog-content > *:first-child {
  margin-top: 0 !important;
}

/* ============================================================================
   CATEGORY HERO — WOW state-of-the-art design pentru LaPascan
   ============================================================================ */
body .category-hero.has-random-bg .category-hero-inner::after {
  display: none !important;
}
body .category-hero {
  padding: 0 !important;
  margin-bottom: 2rem !important;
}
body .category-hero .category-hero-inner {
  position: relative;
  background:
    radial-gradient(ellipse at 90% 10%, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 90%, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 45%, var(--color-primary-light) 100%) !important;
  border-radius: 32px !important;
  border: none !important;
  /* umbra era prea grea (45% opacitate, 60px blur) si facea o aureola urata
     in jurul cardului — user 2026-07-16. Acum: o singura umbra discreta. */
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--color-primary-dark) 22%, transparent) !important;
  overflow: hidden !important;
  isolation: isolate;
  padding: 3.5rem 3.5rem 3.5rem 4rem !important;
  min-height: 360px;
}
/* Decorative blob top-right — gradient portocaliu mare */
body .category-hero .category-hero-inner::before {
  content: '' !important;
  position: absolute;
  top: -150px !important;
  right: -150px !important;
  width: 450px !important;
  height: 450px !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 45%, transparent) 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 35%, transparent 70%) !important;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  filter: blur(20px);
  animation: spHeroPulse 8s ease-in-out infinite;
}
@keyframes spHeroPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.08) rotate(8deg); opacity: 0.85; }
}
/* Decorative dots pattern bottom-left */
body .category-hero .category-hero-inner {
  background-image:
    radial-gradient(ellipse at 90% 10%, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 90%, color-mix(in srgb, var(--color-primary) 40%, transparent) 0%, transparent 55%),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px),
    linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 45%, var(--color-primary-light) 100%) !important;
  background-size: auto, auto, 24px 24px, auto !important;
  background-position: center, center, 0 0, center !important;
}
/* Asigura ca tot continutul e peste decoratiuni */
body .category-hero .category-hero-content,
body .category-hero .category-hero-image {
  position: relative !important;
  z-index: 2 !important;
}

/* Badge "CATEGORIE" — pill rounded glassmorphism */
body .category-hero .category-hero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 16px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-bottom: 1.25rem !important;
}
body .category-hero .category-hero-badge i {
  color: var(--sp-orange) !important;
  font-size: 0.85rem !important;
}

/* Description sub titlu — alb vizibil pe fundal navy */
body .category-hero .category-hero-desc {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.1rem !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  margin: 0 0 1.5rem !important;
  max-width: 520px;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Title "Sosuri" — gradient text + huge */
body .category-hero .category-hero-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 1.5rem !important;
  background: none !important;
  color: #FFFFFF !important;
  background-image: linear-gradient(135deg, #FFFFFF 0%, color-mix(in srgb, var(--color-accent) 22%, var(--color-white)) 60%, color-mix(in srgb, var(--color-accent) 55%, var(--color-white)) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* Meta "10 produse" — pill orange gradient */
body .category-hero .category-hero-meta {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body .category-hero .category-hero-count {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  border-radius: 999px !important;
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--color-accent) 50%, transparent),
    0 4px 8px color-mix(in srgb, var(--color-accent) 25%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
  border: none !important;
}
body .category-hero .category-hero-count::before {
  content: "\e23d";
  font-family: 'lucide';
  font-weight: 900;
  font-size: 1rem;
}

/* Image — float continuu (always animated) + smooth pop pe hover */
@keyframes lpHeroImageFloat {
  0%   { transform: perspective(1400px) rotateX(6deg)  rotateY(-10deg) rotateZ(-3deg) translateY(0)    translateZ(0); }
  25%  { transform: perspective(1400px) rotateX(7deg)  rotateY(-12deg) rotateZ(-4deg) translateY(-6px) translateZ(8px); }
  50%  { transform: perspective(1400px) rotateX(5deg)  rotateY(-9deg)  rotateZ(-2deg) translateY(-10px) translateZ(4px); }
  75%  { transform: perspective(1400px) rotateX(7deg)  rotateY(-11deg) rotateZ(-3deg) translateY(-4px) translateZ(8px); }
  100% { transform: perspective(1400px) rotateX(6deg)  rotateY(-10deg) rotateZ(-3deg) translateY(0)    translateZ(0); }
}
body .category-hero .category-hero-image {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
body .category-hero .category-hero-image img {
  border-radius: 24px !important;
  box-shadow:
    0 14px 30px -12px rgba(0,0,0,0.28),
    0 0 0 6px rgba(255,255,255,0.95) !important;
  transform-style: preserve-3d;
  animation: lpHeroImageFloat 7s ease-in-out infinite;
  transition: box-shadow 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
}
body .category-hero:hover .category-hero-image img {
  animation-play-state: paused;
  animation: lpHeroImagePop 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  box-shadow:
    0 40px 80px -10px rgba(0,0,0,0.55),
    0 20px 40px -10px color-mix(in srgb, var(--color-accent) 55%, transparent),
    0 0 0 6px rgba(255,255,255,1),
    0 0 0 8px color-mix(in srgb, var(--color-accent) 35%, transparent),
    0 0 60px color-mix(in srgb, var(--color-accent) 40%, transparent) !important;
}
@keyframes lpHeroImagePop {
  0%   { transform: perspective(1400px) rotateX(6deg)  rotateY(-10deg) rotateZ(-3deg) translateY(0)    translateZ(0); }
  50%  { transform: perspective(1400px) rotateX(3deg)  rotateY(-5deg)  rotateZ(-1.5deg) translateY(-6px) translateZ(25px) scale(1.025); }
  100% { transform: perspective(1400px) rotateX(0deg)  rotateY(0deg)   rotateZ(0deg)   translateY(0)    translateZ(45px) scale(1.045); }
}
/* Shine effect — light sweep peste imagine la hover */
body .category-hero .category-hero-image::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%
  );
  border-radius: 24px;
  opacity: 0;
  transform: translateX(-100%) skewX(-15deg);
  transition: opacity 0.4s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: overlay;
}
body .category-hero:hover .category-hero-image::before {
  opacity: 1;
  transform: translateX(100%) skewX(-15deg);
  transition: opacity 0.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Glow ambiental sub imagine — se intensifica la hover */
body .category-hero .category-hero-image::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 10%; right: 10%;
  height: 50px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--color-accent) 55%, transparent) 0%, transparent 70%);
  filter: blur(25px);
  z-index: -1;
  transition: all 0.6s ease;
}
body .category-hero:hover .category-hero-image::after {
  bottom: -50px;
  left: 0%; right: 0%;
  height: 70px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--color-accent) 85%, transparent) 0%, transparent 65%);
  filter: blur(35px);
}

/* Responsive */
@media (max-width: 768px) {
  body .category-hero .category-hero-inner {
    padding: 2.5rem 1.5rem !important;
    min-height: auto;
    border-radius: 24px !important;
  }
  body .category-hero .category-hero-title {
    font-size: 2.2rem !important;
  }
  body .category-hero .category-hero-image img {
    transform: rotate(-2deg);
  }
}

/* Footer logo — scoatem brightness:10 (care albea logoul) + marim la 140px */
body .site-footer .footer-brand img,
body footer.site-footer .footer-brand img {
  height: 140px !important;
  width: auto !important;
  max-width: 380px;
  filter: none !important;
  display: block;
  margin-top: -32px !important;
  margin-bottom: -16px !important;
}
body .site-footer .footer-brand {
  margin-top: -16px !important;
  margin-bottom: 0.5rem !important;
}
/* Reduce padding-top general la primul col din footer cand contine logo */
body .site-footer .container > .row > [class*="col-"]:first-child {
  padding-top: 0 !important;
}
body .site-footer .footer-brand a {
  display: inline-block;
  padding: 0 !important;
  transition: transform 0.25s ease, filter 0.25s ease;
}
body .site-footer .footer-brand a:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--color-accent) 35%, transparent));
  padding-left: 0 !important;
}

/* ============================================================================
   11. Catering section — pizza events
   ============================================================================ */
.section-catering {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--sp-orange-lightest) 100%) !important;
  padding: 5rem 0;
}
.section-catering h2 {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  color: var(--color-text);
  margin-bottom: 1.25rem;
}
.section-catering .btn,
.section-catering a.btn-primary {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  border: none !important;
  color: #FFF !important;
  padding: 1rem 2rem !important;
  border-radius: 999px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: var(--sp-shadow-orange) !important;
}

/* ============================================================================
   12. WhatsApp bubble + scroll-to-top
   ============================================================================ */
.whatsapp-bubble,
.wa-bubble,
.scroll-top {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  transition: transform 0.25s ease;
}
.whatsapp-bubble:hover,
.scroll-top:hover { transform: scale(1.1); }
.scroll-top {
  background: var(--sp-brown) !important;
  color: #FFF !important;
}

/* ============================================================================
   13. Buttons generale — coherent peste tot
   ============================================================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%) !important;
  border: none !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 25%, transparent);
  transition: all 0.25s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--sp-brown-dark) 0%, var(--sp-brown) 100%) !important;
  transform: translateY(-2px);
}
.btn-orange,
.btn-cta {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFF !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: var(--sp-shadow-orange);
}

/* ============================================================================
   14. Cart drawer + buttons
   ============================================================================ */
.cart-drawer,
.cart-icon-badge {
  background: var(--sp-orange) !important;
  color: #FFF !important;
}

/* ============================================================================
   15. Page hero (Despre, Contact)
   ============================================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%);
  color: #FFF;
  padding: 4rem 0;
  text-align: center;
  margin-bottom: 3rem;
  border-radius: 24px;
  margin-top: 1.5rem;
}
.page-hero h1 {
  color: #FFFFFF !important;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}
.page-hero .lead {
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================================================
   16. Contact grid
   ============================================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}
.contact-card {
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--sp-shadow-sm);
  transition: all 0.3s ease;
}
.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sp-shadow-md);
  border-color: var(--sp-brown);
}
.contact-card .contact-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}
.contact-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}
.contact-card a {
  color: var(--sp-brown);
  font-weight: 700;
  text-decoration: none;
}
.contact-card a:hover { color: var(--sp-orange); }
.contact-card .muted {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-top: 0.5rem;
  display: block;
}

/* ============================================================================
   17. FAQ details
   ============================================================================ */
.faq-list { max-width: 800px; margin: 2rem auto; }
.faq-item {
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
  border-radius: 14px;
  padding: 1rem 1.5rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--sp-shadow-sm);
}
.faq-item summary {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.5rem 0;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--sp-orange);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0.75rem 0 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ============================================================================
   18. Reveal animations — DEZACTIVATE (cauzau opacitate redusa la sectiuni
   care nu intrau in viewport pe screenshot/scroll rapid)
   ============================================================================ */
body .reveal,
body .reveal:not(.visible),
body .reveal:not(.in-view) {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
body .reveal-stagger > * {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================================
   19. Order-hours notice cu pulse
   ============================================================================ */
@keyframes lp-pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 50%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-accent) 0%, transparent); }
}
.order-hours-bar .badge,
.notice-bar .countdown {
  animation: lp-pulse-orange 2s infinite;
}

/* ============================================================================
   ★★★  ADDENDUM v2 (2026-05-20 18:00) — Iterare 2 design WOW  ★★★
   Fix feedback user: story button centrat, mai mult portocaliu, texte negre
   pe albastru, product cards rotunde, footer dark forțat
   ============================================================================ */

/* --- STORY SECTION — text + buton centrate cu spațiu generos ----------------- */
body .section-story { padding: 6rem 0 !important; }
body .section-story .story-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center !important;
}
@media (max-width: 992px) {
  body .section-story .story-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
body .section-story .story-image-wrap { position: relative; }
body .section-story .story-image {
  border-radius: 28px !important;
  box-shadow: var(--sp-shadow-xl) !important;
  max-height: 520px;
  width: 100%;
  object-fit: cover;
  transform: rotate(-2deg);
}
body .section-story .story-image-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-accent) 25%, transparent), transparent 60%);
  filter: blur(40px);
  z-index: -1;
}
body .section-story .story-content {
  text-align: center !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem !important;
}
body .section-story .section-badge {
  margin-bottom: 1.25rem !important;
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  padding: 8px 20px !important;
  letter-spacing: 0.15em !important;
}
body .section-story .story-title,
body .section-story h2 {
  font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  color: var(--sp-brown-dark) !important;
  margin: 0 0 1.5rem !important;
  text-align: center !important;
  line-height: 1.1;
}
body .section-story .story-title::after {
  content: '';
  display: block;
  width: 80px; height: 4px;
  background: linear-gradient(90deg, var(--sp-brown), var(--sp-orange));
  border-radius: 999px;
  margin: 1.25rem auto 0;
}
body .section-story .story-text {
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  color: var(--color-text-secondary) !important;
  max-width: 540px;
  margin: 0 auto 2.5rem !important;
  text-align: center !important;
}
body .section-story .story-btn,
body .section-story a.btn-primary,
body .section-story .btn-lg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  padding: 1.1rem 2.5rem !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: var(--sp-shadow-orange) !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
body .section-story .story-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--color-accent) 50%, transparent) !important;
}
body .section-story .story-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
body .section-story .story-btn:hover::before { transform: translateX(100%); }

/* --- ORANGE EVERYWHERE — accent line sub fiecare section-title -------------- */
body .section-categories .section-title::after,
body .section-bestsellers .section-title::after,
body .section-products .section-title::after,
body .section-testimonials .section-title::after,
body .section-catering h2::after,
body .newsletter-section .section-title::after,
body .section-header .section-title::after {
  content: '';
  display: block;
  width: 72px; height: 4px;
  background: linear-gradient(90deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%);
  border-radius: 999px;
  margin: 1rem auto 0;
}

/* Section badges — toate cu gradient orange bold */
body .section-badge,
body .section-header .section-badge {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Nav hover orange + force no underline on active */
body .site-navbar a:hover,
body .navbar-menu a:hover {
  color: var(--sp-orange) !important;
}
body .navbar-menu a.active::after,
body .navbar-menu .active,
body .navbar-menu a.active,
body .site-navbar .nav-link.active {
  border-bottom: none !important;
  text-decoration: none !important;
  background: transparent !important;
}
body .navbar-menu a.active::after { content: none !important; display: none !important; }

/* --- TEXTE NEGRU pe sectiuni cu albastru deschis ---------------------------- */
body .section-products,
body .section-bestsellers,
body .section-testimonials {
  background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--color-accent) 7%, var(--color-white)) 100%) !important;
}
body .section-products .section-title,
body .section-bestsellers .section-title,
body .section-testimonials .section-title,
body .section-products .section-title,
body .section-recommended .section-title {
  color: var(--sp-brown-dark) !important;
}
body .section-products .section-subtitle,
body .section-bestsellers .section-subtitle,
body .section-testimonials .section-subtitle {
  color: var(--color-text) !important;
  font-weight: 500;
}

/* ============================================================================
   ★ PRODUCT CARDS WOW — inspirat donfood, light theme LaPascan
   - Solid edge-to-edge, padding 0
   - Imagine baseline scale(1.06), hover zoom scale(1.14)
   - Hover: lift + shadow orange + border orange + saturate boost
   - Badges glassmorphism chips
   - Fade inferior alb (mascheaza tranzitia poza/body)
   ============================================================================ */
body .product-card,
body article.product-card,
body div.product-card {
  background: var(--color-white) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary-dark) 6%, transparent), 0 2px 4px rgba(0,0,0,0.03) !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease,
              border-color 0.35s ease !important;
}
body .product-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 20px;
  pointer-events: none;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--color-accent) 0%, transparent) 0%, transparent 55%);
  transition: background 0.4s ease;
  z-index: 0;
}
body .product-card:hover {
  transform: translateY(-10px) scale(1.025);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent) !important;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--color-accent) 22%, transparent),
              0 12px 24px color-mix(in srgb, var(--color-primary) 10%, transparent),
              0 4px 8px rgba(0, 0, 0, 0.05) !important;
}
body .product-card:hover::before {
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--color-accent) 10%, transparent) 0%, transparent 60%);
}

/* --- Image edge-to-edge cu rotunjire doar sus + baseline scale ------------- */
body .product-card .product-card-image {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 5%, var(--color-white)) 0%, color-mix(in srgb, var(--color-accent) 12%, var(--color-white)) 100%) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  position: relative;
  border-radius: 20px 20px 0 0 !important;
  aspect-ratio: 1 / 1;
  box-shadow: none !important;
}
body .product-card .product-card-image > a {
  display: block;
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0 !important;
}
body .product-card .product-card-image img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transform: scale(1.06);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
  border-radius: 20px 20px 0 0 !important;
}
body .product-card:hover .product-card-image img {
  transform: scale(1.14);
  filter: saturate(1.12) brightness(1.03);
}
/* Subtle ambient glow over image on hover */
body .product-card .product-card-image::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-accent) 0%, transparent) 0%, color-mix(in srgb, var(--color-accent) 12%, transparent) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
body .product-card:hover .product-card-image::before { opacity: 1; }
/* Fade inferior alb — mascheaza tranzitia placeholder/body */
body .product-card .product-card-image::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 50px;
  background: linear-gradient(180deg, transparent 0%, #FFFFFF 90%, #FFFFFF 100%);
  pointer-events: none;
  z-index: 3;
}

/* --- Badges (Bestseller/New) — glassmorphism chips ------------------------- */
body .product-card .product-card-badges {
  position: absolute;
  top: 0.85rem; left: 0.85rem;
  z-index: 4;
  display: flex !important;
  flex-direction: row !important;
  gap: 0.35rem;
  background: transparent !important;
  pointer-events: none;
}
body .product-card .product-card-badge {
  display: inline-flex !important;
  align-items: center; gap: 5px;
  padding: 6px 13px !important;
  font-family: 'Poppins', sans-serif;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  border: 0 !important;
  outline: 0 !important;
  background-clip: padding-box !important;
  pointer-events: auto;
  text-shadow: none !important;
}
body .product-card .product-card-badge.badge-bestseller {
  background: var(--sp-orange) !important;
  background-image: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12) !important;
}
body .product-card .product-card-badge.badge-new,
body .product-card .product-card-badge.badge-featured {
  background: var(--sp-brown) !important;
  background-image: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12) !important;
}

/* --- Wishlist heart top-right --- */
body .product-card .product-card-wishlist {
  position: absolute; top: 0.85rem; right: 0.85rem;
  z-index: 4;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.95) !important;
  border: none !important;
  border-radius: 50% !important;
  color: var(--sp-orange) !important;
  font-size: 1rem;
  display: flex !important; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}
body .product-card .product-card-wishlist:hover {
  background: var(--sp-orange) !important;
  color: #FFFFFF !important;
  transform: scale(1.12);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* --- Overlay on hover — butonul apare DOAR la hover, ancorat JOS (banda, NU full).
       IMPORTANT: overlay-ul trebuie sa fie BANDA JOS (top:auto), nu pe toata poza.
       Daca acopera toata poza (inset:0) si devine pointer-events:auto la hover, fura
       click-ul de pe imagine (mousedown pe <img>, mouseup pe overlay => click pe
       .product-card-image, nu pe link => poza nu mai navigheaza la produs). Aliniat
       la donfood/cloudshopdemo (inset: auto 0 0 0). Butonul ramane la flex-end. */
body .product-card .product-card-overlay {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  inset: auto 0 0 0 !important;
  height: auto !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 0 1.75rem 0 !important;  /* era 1rem → 1.75rem ca buton sa NU fie taiat de info bar */
  opacity: 0 !important;               /* HIDDEN by default — apare DOAR la hover */
  transform: translateY(6px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  pointer-events: none;
  z-index: 4;
  border-radius: 0 !important;
}
body .product-card:hover .product-card-overlay {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}
/* Mask gradient subtil DOAR sub buton — pe ::after pentru a evita dunga */
body .product-card .product-card-overlay::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-text) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 0%, transparent) 20%,
    color-mix(in srgb, var(--color-text) 18%, transparent) 60%,
    color-mix(in srgb, var(--color-text) 42%, transparent) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
body .product-card:hover .product-card-overlay::after { opacity: 1; }

body .product-card .product-card-overlay > * { pointer-events: auto; }
body .product-card .product-card-overlay .btn,
body .product-card .product-card-overlay a,
body .product-card .product-card-overlay button {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-accent) 50%, transparent), 0 2px 6px rgba(0,0,0,0.15) !important;
  opacity: 0;
  transform: translateY(20px) !important;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease !important;
  white-space: nowrap;
  width: auto !important;
  max-width: 80% !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
body .product-card:hover .product-card-overlay .btn {
  opacity: 1;
  transform: translateY(0) !important;
}
body .product-card:hover .product-card-overlay .btn:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--color-accent) 70%, transparent), 0 4px 10px rgba(0,0,0,0.18) !important;
}

/* Imagine ramane mereu vizibila */
body .product-card .product-card-image,
body .product-card:hover .product-card-image {
  background: transparent !important;
  opacity: 1 !important;
  overflow: hidden;
}
body .product-card .product-card-image img {
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body .product-card:hover .product-card-image img {
  opacity: 1 !important;
  transform: scale(1.06) !important;
}

/* --- Body — category chip + title elegant + price ------------------------- */
body .product-card .product-card-body {
  padding: 1.4rem 1.4rem 1.5rem !important;
  text-align: center;
  background: var(--color-white);
  position: relative;
  z-index: 1;
}
/* Category — text simplu centrat, cu dash-uri pe ambele parti, NU link */
body .product-card .product-card-category,
body .product-card a.product-card-category {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  color: var(--sp-orange) !important;
  text-decoration: none !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 0 0.7rem !important;
  text-transform: uppercase;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  cursor: default !important;
  transform: none !important;
}
/* Dash-uri elegante stanga + dreapta */
body .product-card .product-card-category::before,
body .product-card .product-card-category::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, var(--sp-orange) 100%);
  vertical-align: middle;
  margin: 0 10px 3px 0;
  border-radius: 1px;
  opacity: 0.8;
}
body .product-card .product-card-category::after {
  background: linear-gradient(90deg, var(--sp-orange) 0%, transparent 100%);
  margin: 0 0 3px 10px;
}
body .product-card .product-card-category:hover {
  color: var(--sp-orange) !important;
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Title — color mai fina (slate dark blue) + hover underline orange */
body .product-card .product-card-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.12rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 0.9rem !important;
  text-align: center !important;
  min-height: auto !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  position: relative;
}
body .product-card .product-card-title a {
  color: var(--sp-brown-dark) !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--sp-orange), var(--sp-orange)) !important;
  background-size: 0% 2px !important;
  background-repeat: no-repeat !important;
  background-position: center 100% !important;
  padding-bottom: 3px;
  transition: color 0.25s ease, background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body .product-card .product-card-title a:hover {
  color: var(--sp-orange-dark) !important;
  background-size: 70% 2px !important;
}
body .product-card-price {
  justify-content: center !important;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed color-mix(in srgb, var(--color-accent) 25%, transparent) !important;
  display: flex !important;
}
body .product-card-price .price-prefix {
  color: var(--color-text-light) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  font-family: 'Outfit', sans-serif !important;
}
body .product-card-price .price,
body .product-card-price strong,
body .product-card-price .product-card-price-value {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: var(--sp-orange) !important;
  letter-spacing: -0.01em;
}

/* ============================================================================
   ★ USP/BENEFITS BAR WOW — cards premium, icon mare gradient, text aliniat
   ============================================================================ */
body .benefits-bar,
body .section-benefits {
  background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--color-accent) 5%, var(--color-white)) 100%) !important;
  padding: 4rem 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
}
body .benefits-bar .container > .row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  margin: 0 !important;
}
@media (max-width: 992px) {
  body .benefits-bar .container > .row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  body .benefits-bar .container > .row { grid-template-columns: 1fr !important; }
}
body .benefits-bar .col,
body .benefits-bar [class*="col-"] {
  flex: unset !important;
  max-width: unset !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;  /* defensive: previne shrink cu content lung */
  box-sizing: border-box !important;
  overflow: visible !important;
}
body .benefit-item {
  background: var(--color-white) !important;
  border: none !important;
  outline: none !important;
  border-radius: 20px !important;
  padding: 1.75rem 1.5rem !important;
  text-align: left;
  display: flex !important;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary-dark) 7%, transparent), 0 2px 6px rgba(0,0,0,0.025) !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
  height: 100% !important;
  min-height: 140px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
}
body .benefit-item-icon,
body .benefit-item > i:first-child,
body .benefit-item .benefit-icon,
body .benefits-bar i {
  flex-shrink: 0 !important;
}
body .benefit-item > div:not(.benefit-item-icon),
body .benefit-item > div:not([class*="-icon"]) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden;
}
body .benefits-bar .col,
body .benefits-bar [class*="col-"] {
  align-self: stretch !important;
  display: flex !important;
}
body .benefit-item::before { content: none !important; display: none !important; }
body .benefit-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--color-accent) 16%, transparent), 0 6px 14px rgba(0,0,0,0.06) !important;
}

/* Icon — mare gradient cu shadow */
body .benefit-item-icon,
body .benefit-item > i:first-child,
body .benefit-item .benefit-icon,
body .benefits-bar i {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  width: 64px !important; height: 64px !important;
  min-width: 64px !important;
  border-radius: 18px !important;
  font-size: 1.75rem !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center; justify-content: center;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--color-accent) 35%, transparent), 0 4px 8px color-mix(in srgb, var(--color-accent) 15%, transparent);
  transition: transform 0.4s ease;
}
body .benefit-item-icon i {
  color: #FFFFFF !important;
  font-size: 1.75rem !important;
  background: none !important;
  width: auto !important; height: auto !important;
  box-shadow: none !important;
}
body .benefit-item:hover .benefit-item-icon,
body .benefit-item:hover > i:first-child {
  transform: rotate(-8deg) scale(1.08);
}

/* Text — title + subtext aliniate corect, fara wrapping nasol */
body .benefit-item > div:not(.benefit-item-icon) {
  flex: 1 1 auto;
  min-width: 0;
}
body .benefit-item-text,
body .benefit-item strong {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--color-text) !important;
  display: block;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}
body .benefit-item-subtext,
body .benefit-item .text-muted,
body .benefit-item small {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.4;
  display: block;
}

/* --- FOOTER — DARK FORCAT (override shared light bg cu maximum specificity) - */
html body footer.site-footer,
html body .site-footer,
body .footer-section,
.cloudshop-app body .site-footer {
  background: color-mix(in srgb, var(--color-primary-dark) 20%, #000) !important;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-dark) 35%, #000) 0%, color-mix(in srgb, var(--color-primary-dark) 15%, #000) 100%) !important;
  color: rgba(255,255,255,0.75) !important;
  padding: 5rem 0 2rem !important;
  position: relative !important;
}
html body footer.site-footer::before,
html body .site-footer::before {
  content: '' !important;
  position: absolute !important; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--sp-brown) 0%, var(--sp-orange) 100%) !important;
}
html body footer.site-footer h3,
html body footer.site-footer h4,
html body footer.site-footer .footer-title,
html body .site-footer h3,
html body .site-footer h4 {
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.5rem !important;
}
html body footer.site-footer p,
html body footer.site-footer span,
html body footer.site-footer li {
  color: rgba(255,255,255,0.75) !important;
}
html body footer.site-footer a {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  border: none !important;
  display: inline-block;
  transition: all 0.2s ease;
}
html body footer.site-footer a:hover {
  color: var(--sp-orange) !important;
  padding-left: 4px;
}
html body footer.site-footer .social-link,
html body footer.site-footer [class*="social"] a {
  background: rgba(255,255,255,0.08) !important;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 0.5rem;
  color: #FFFFFF !important;
}
html body footer.site-footer .social-link:hover {
  background: var(--sp-orange) !important;
  transform: translateY(-3px);
}
html body footer.site-footer .copyright,
html body footer.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.85rem;
}
html body footer.site-footer i {
  color: var(--sp-orange) !important;
}

/* --- TESTIMONIALS — quote mark portocaliu mai pronunțat -------------------- */
body .section-testimonials {
  background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--color-accent) 7%, var(--color-white)) 100%) !important;
}
/* Scoate quote mark mare deasupra stelelor (user request) */
body .testimonial-card::before,
body .testimonial-card::after {
  content: none !important;
  display: none !important;
}
body .testimonial-card-stars { color: var(--sp-orange) !important; }
body .testimonial-card-text { color: var(--color-text) !important; }
body .testimonial-card-author { border-top-color: color-mix(in srgb, var(--color-accent) 20%, transparent) !important; }

/* --- NEWSLETTER — emoji bigger + better gradient --------------------------- */
body .newsletter-section::before {
  font-size: 28rem !important;
  opacity: 0.08 !important;
  right: -6rem !important;
}

/* --- HEADER — active link only color change, NO underline / border --------- */
body .site-navbar a.active,
body .navbar-menu a.active,
body .site-navbar .nav-link.active {
  color: var(--sp-orange) !important;
  font-weight: 800 !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  text-decoration: none !important;
}
body .navbar-menu a.active::after,
body .site-navbar .nav-link.active::after,
body .site-navbar .nav-link.active::before {
  content: none !important;
  display: none !important;
}

/* --- HERO CTA — wider, more orange dominant -------------------------------- */
body .hero-content::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 95%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--color-accent) 88%, #000) 95%, transparent) 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* ============================================================================
   ★★★ ADDENDUM v3 (2026-05-21) — Polish global pe TOATE paginile ★★★
   Page hero h1/subtitle alb, navbar icons portocalii, cards icons orange,
   shop hero design, blog hero stats vizibile.
   ============================================================================ */

/* --- NAVBAR ACTION ICONS (search, account, wishlist, cart) → portocaliu, FĂRĂ chenar ---- */
body .site-navbar .navbar-icon-btn,
body .site-navbar .navbar-search-toggle,
body .site-navbar .navbar-account-btn,
body .site-navbar .navbar-favorites-btn,
body .site-navbar .navbar-cart-btn,
body .site-navbar .cart-btn {
  color: var(--sp-orange) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto; height: auto;
  padding: 6px 8px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
  box-shadow: none !important;
}
body .site-navbar .navbar-icon-btn:hover {
  background: transparent !important;
  color: var(--sp-orange-dark) !important;
  border: none !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}
body .site-navbar .navbar-icon-btn i,
body .site-navbar .navbar-icon-btn .icon-search,
body .site-navbar .navbar-icon-btn .icon-user,
body .site-navbar .navbar-icon-btn .icon-heart,
body .site-navbar .navbar-icon-btn .icon-shopping-cart {
  color: var(--sp-orange) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  stroke-width: 2.25 !important;
}
body .site-navbar .navbar-icon-btn:hover i { color: var(--sp-orange-dark) !important; }

/* Mini-cart "Coșul tău" header — navy */
body .mini-cart-dropdown .mini-cart-header,
body .mini-cart-dropdown .mini-cart-header *,
body .mini-cart-dropdown h5,
body .mini-cart-dropdown h6 {
  color: var(--sp-brown-dark) !important;
  font-weight: 800 !important;
}

/* Buton "Finalizează" din mini-cart dropdown — text ALB pe bg navy */
body .mini-cart-dropdown .btn-success,
body .mini-cart-dropdown a.btn-success,
body .mini-cart-dropdown button.btn-success,
body .mini-cart-checkout-btn,
body .mini-cart-dropdown [href*="checkout"],
body .mini-cart-dropdown [href*="finalizare"] {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-family: 'Poppins', sans-serif !important;
}
body .mini-cart-dropdown .btn-success:hover,
body .mini-cart-dropdown a.btn-success:hover,
body .mini-cart-dropdown .btn-success * {
  color: #FFFFFF !important;
}

/* Checkout step titles — navy */
body .checkout-step-title,
body .checkout-summary-title,
body .checkout-summary h5,
body .checkout-summary h6 {
  color: var(--sp-brown-dark) !important;
  font-weight: 800 !important;
}

/* Place order button (Plaseaza comanda) — text alb FORCAT */
body #placeOrderBtn,
body #placeOrderBtn *,
body button#placeOrderBtn,
body .btn-place-order {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* Cart count badge — pastreaza orange + alb bold si la hover */
body .site-navbar .navbar-icon-btn .badge,
body .site-navbar .navbar-icon-btn:hover .badge,
body .site-navbar .navbar-icon-btn:active .badge {
  background-color: var(--sp-orange) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
body .site-navbar .navbar-icon-btn:hover .badge {
  background-color: var(--sp-orange-dark) !important;
  transform: scale(1.05);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Cart count badge */
body .site-navbar .cart-count,
body .site-navbar .navbar-cart-count {
  background: var(--sp-brown) !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF;
  font-weight: 800;
}

/* --- PAGE HERO (Despre, Contact, FAQ, etc.) — fundal albastru, text alb ---- */
body .about-hero,
body .contact-hero,
body .page-hero-section,
body .blog-hero,
body .shop-hero {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%) !important;
  position: relative;
  overflow: hidden;
  padding: 5rem 0 6rem !important;
}
body .about-hero::after,
body .contact-hero::after {
  content: '🍕';
  position: absolute;
  font-size: 22rem;
  right: -3rem; top: 50%;
  transform: translateY(-50%) rotate(-15deg);
  opacity: 0.06;
  pointer-events: none;
}
body .about-hero .breadcrumb a,
body .about-hero .breadcrumb,
body .contact-hero .breadcrumb,
body .blog-hero .breadcrumb {
  color: rgba(255,255,255,0.85) !important;
}
body .about-hero-title,
body .contact-hero-title,
body h1.contact-hero-title,
body h1.about-hero-title,
body .blog-hero h1,
body .shop-hero h1,
body .page-hero h1,
.page-hero h1 {
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
  margin-bottom: 1.25rem !important;
}
body .about-hero-subtitle,
body .contact-hero-subtitle,
body .blog-hero p,
body .page-hero .lead {
  color: rgba(255,255,255,0.92) !important;
  font-size: 1.15rem !important;
  max-width: 640px;
  margin: 0 auto !important;
  text-align: center;
}
body .about-hero-badge,
body .contact-hero-badge {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  display: inline-flex !important;
  align-items: center; gap: 8px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 40%, transparent);
  margin-bottom: 1.5rem !important;
}

/* --- CONTACT PAGE — cards iconite portocalii ------------------------------- */
body .contact-cards-grid,
body .contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: -3rem auto 3rem;
  position: relative; z-index: 2;
}
body .contact-card {
  background: var(--color-white) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white)) !important;
  border-radius: 20px !important;
  padding: 2rem 1.5rem !important;
  text-align: center;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary-dark) 8%, transparent) !important;
  transition: all 0.3s ease;
}
body .contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
  border-color: var(--sp-orange) !important;
}
body .contact-card .contact-card-icon,
body .contact-card-icon,
body .contact-card-icon-wrap {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  width: 64px !important; height: 64px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 auto 1rem !important;
  font-size: 1.5rem !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
body .contact-card .contact-card-icon i {
  color: #FFFFFF !important;
  font-size: 1.5rem !important;
}
/* WhatsApp keeps green */
body .contact-card[data-type="whatsapp"] .contact-card-icon,
body .contact-card .contact-card-icon.whatsapp,
body .contact-card .contact-icon-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  box-shadow: 0 10px 24px rgba(37,211,102,0.35);
}
body .contact-card-title,
body .contact-card h3 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text) !important;
  margin: 0 0 0.5rem !important;
}
body .contact-card-value,
body .contact-card p {
  color: var(--color-text-secondary);
  font-weight: 600;
}
body .contact-card a {
  color: var(--sp-brown) !important;
  font-weight: 700;
  text-decoration: none !important;
}
body .contact-card a:hover { color: var(--sp-orange) !important; }

/* --- ABOUT page values cards → iconite portocalii -------------------------- */
body .about-value-card {
  background: var(--color-white) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white)) !important;
  border-radius: 20px !important;
  padding: 2rem 1.5rem !important;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary-dark) 6%, transparent);
}
body .about-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
  border-color: var(--sp-orange) !important;
}
body .about-value-icon {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  width: 72px !important; height: 72px !important;
  border-radius: 18px !important;
  margin: 0 auto 1.25rem !important;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 1.75rem !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
body .about-value-icon i { color: #FFFFFF !important; }
body .about-value-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  margin-bottom: 0.75rem !important;
}
body .about-value-text { color: var(--color-text-secondary) !important; }

/* About story highlights — check mark orange */
body .about-story-highlight-icon {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0.85rem !important;
  flex-shrink: 0;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--color-accent) 25%, transparent);
}
body .about-story-image-badge {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
}

/* About stats banner — accent orange */
body .about-stats {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%) !important;
  padding: 4rem 0 !important;
  position: relative;
  overflow: hidden;
}
body .about-stats::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 60%);
  pointer-events: none;
}
body .about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative; z-index: 2;
}
@media (max-width: 768px) { body .about-stats-grid { grid-template-columns: 1fr 1fr; } }
body .about-stat-item { text-align: center; }
body .about-stat-number {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  color: #FFFFFF !important;
  line-height: 1;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #FFFFFF 0%, color-mix(in srgb, var(--color-accent) 35%, var(--color-white)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body .about-stat-label {
  color: rgba(255,255,255,0.9) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
}

/* About certifications cards */
body .about-cert-card {
  background: var(--color-white) !important;
  border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white)) !important;
  padding: 2rem 1.5rem !important;
  text-align: center;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary-dark) 6%, transparent);
  transition: all 0.3s ease;
}
body .about-cert-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
  border-color: var(--sp-orange) !important;
}
body .about-cert-icon {
  background: linear-gradient(135deg, var(--sp-orange-lightest) 0%, color-mix(in srgb, var(--color-accent) 22%, var(--color-white)) 100%) !important;
  color: var(--sp-orange) !important;
  width: 64px !important; height: 64px !important;
  border-radius: 18px;
  margin: 0 auto 1rem !important;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 1.5rem;
  border: 2px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
}
body .about-cert-icon i { color: var(--sp-orange) !important; }
body .about-cert-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  margin-bottom: 0.5rem !important;
}
body .about-cert-text { color: var(--color-text-secondary) !important; font-size: 0.95rem; }

/* About story image (placeholder dimensions) */
body .about-story-image {
  background: linear-gradient(135deg, var(--sp-brown-lightest) 0%, var(--sp-orange-lightest) 100%) !important;
  border-radius: 28px;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 6rem;
  color: var(--sp-orange) !important;
  box-shadow: 0 20px 50px color-mix(in srgb, var(--color-primary) 15%, transparent);
  position: relative;
}
body .about-story-image i { color: var(--sp-orange) !important; }

/* --- SHOP page hero & sidebar -------------------------------------------- */
body .shop-hero,
body .shop-page-hero {
  background: linear-gradient(135deg, var(--sp-brown-lightest) 0%, color-mix(in srgb, var(--color-accent) 7%, var(--color-white)) 100%) !important;
  border-radius: 24px;
  padding: 3.5rem 2rem !important;
  margin: 1.5rem 0 2rem !important;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
}
body .shop-hero h1, body .shop-page-hero h1 {
  color: var(--color-text) !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
}
body .shop-hero p, body .shop-page-hero p { color: var(--color-text-secondary) !important; }
body .shop-hero .badge,
body .shop-hero .section-badge {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
body .shop-categories-sidebar,
body .shop-filter-card {
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary-dark) 4%, transparent);
}
body .shop-categories-sidebar a.active,
body .shop-categories-sidebar .category-link.active {
  background: linear-gradient(135deg, var(--sp-orange-lightest) 0%, color-mix(in srgb, var(--color-accent) 22%, var(--color-white)) 100%) !important;
  color: var(--sp-orange-dark) !important;
  border-radius: 12px;
}
body .shop-categories-sidebar .category-count.active {
  background: var(--sp-orange) !important;
  color: #FFFFFF !important;
}

/* --- BLOG page hero stats ------------------------------------------------ */
body .blog-hero .blog-stats,
body .blog-hero-stats {
  display: flex; justify-content: center; gap: 3rem;
  margin-top: 2rem;
}
body .blog-hero-stats > div, body .blog-hero .blog-stat {
  text-align: center;
}
body .blog-hero-stats .number,
body .blog-hero-stats .count,
body .blog-hero .stat-number {
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 2.5rem !important;
  display: block;
  background: linear-gradient(135deg, #FFFFFF 0%, color-mix(in srgb, var(--color-accent) 35%, var(--color-white)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body .blog-hero-stats .label,
body .blog-hero .stat-label {
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Blog category tabs */
body .blog-category-tabs button,
body .blog-category-tabs a,
body .blog-filter-tab {
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 600;
  transition: all 0.2s ease;
}
body .blog-category-tabs .active,
body .blog-category-tabs button.active,
body .blog-category-tabs a.active {
  background: linear-gradient(135deg, var(--sp-brown) 0%, var(--sp-brown-dark) 100%) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
body .blog-category-tabs a:hover { background: var(--sp-orange-lightest); color: var(--sp-orange-dark); }

/* Blog post card — rounded with orange accent */
body .blog-card,
body .blog-post-card {
  background: var(--color-white) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white)) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  transition: all 0.35s ease;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary-dark) 6%, transparent);
}
body .blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--sp-orange) !important;
  box-shadow: 0 20px 40px color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
}
/* Real category badge class is .blog-card-category (singular) — beat shared bg blue */
body .blog-card .blog-card-category,
body article.blog-card span.blog-card-category,
body .blog-card .blog-category-badge {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  background-color: var(--sp-orange) !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 45%, transparent) !important;
  border: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
body .blog-card h3, body .blog-card-title {
  font-family: 'Poppins', sans-serif !important;
  color: var(--color-text) !important;
}
body .blog-card-meta i { color: var(--sp-orange) !important; }
body .blog-card-meta { color: var(--color-text-secondary) !important; font-size: 0.85rem; }

/* --- BREADCRUMB inside dark hero --------------------------------------- */
body .about-hero .breadcrumb-item,
body .about-hero .breadcrumb-item a,
body .contact-hero .breadcrumb-item,
body .blog-hero .breadcrumb-item {
  color: rgba(255,255,255,0.8) !important;
}
body .about-hero .breadcrumb-item.active,
body .contact-hero .breadcrumb-item.active {
  color: #FFFFFF !important;
  font-weight: 700;
}

/* --- CONTACT form card -------------------------------------------------- */
body .contact-form-card {
  background: var(--color-white);
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
  padding: 2.5rem;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary-dark) 8%, transparent);
}
body .contact-form-card label,
body .contact-form .form-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
body .contact-form-card label i,
body .contact-form .form-label i {
  color: var(--sp-orange) !important;
}
body .contact-form input,
body .contact-form select,
body .contact-form textarea {
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease;
}
body .contact-form input:focus,
body .contact-form select:focus,
body .contact-form textarea:focus {
  border-color: var(--sp-orange) !important;
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
body .contact-form .btn-primary,
body .contact-form button[type="submit"] {
  background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
  border: none !important;
  padding: 0.85rem 2rem !important;
  border-radius: 999px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: var(--sp-shadow-orange) !important;
}

/* Contact map card + info card */
body .contact-info-card,
body .contact-map-card {
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white));
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary-dark) 6%, transparent);
}
body .contact-info-card .icon,
body .contact-info-card [class*="icon-"] {
  color: var(--sp-orange) !important;
}

/* FAQ Q&A items */
body .faq-item,
body details.faq-item {
  background: var(--color-white) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-white)) !important;
  border-radius: 16px !important;
  padding: 1rem 1.5rem !important;
  margin-bottom: 0.75rem !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary-dark) 4%, transparent);
  transition: all 0.2s ease;
}
body .faq-item:hover {
  border-color: var(--sp-orange) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
body .faq-item summary,
body .faq-question {
  color: var(--color-text) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}
body .faq-item summary::after,
body .faq-toggle {
  color: var(--sp-orange) !important;
}

/* ============================================================================
   20. Mobile-specific polish
   ============================================================================ */
@media (max-width: 768px) {
  .hero-slide,
  .hero-slide-image { height: 70vh !important; min-height: 70vh; }
  .hero-content { padding: 2rem 0; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.5rem) !important; }
  .category-card { flex: 0 0 160px; min-height: 180px; }
  .category-card-icon::before { font-size: 2.8rem; }
  .section-story .story-content { padding: 2rem 1rem 0 1rem; }
  .product-card { border-radius: 16px !important; }
  .section-categories,
  .section-products,
  .section-bestsellers,
  .section-story,
  .section-testimonials,
  .section-catering { padding: 3rem 0 !important; }

  /* Benefits — compact pe mobil: section padding redus + gap mic intre carduri */
  body .benefits-bar,
  body .section-benefits {
    padding: 1.5rem 0 !important;
  }
  body .benefits-bar .container > .row {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }
  body .benefit-item {
    padding: 0.9rem 1rem !important;
    min-height: auto !important;
    border-radius: 14px !important;
    gap: 0.9rem !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary-dark) 6%, transparent), 0 1px 3px rgba(0,0,0,0.04) !important;
  }
  body .benefit-item-icon,
  body .benefit-item > i:first-child,
  body .benefit-item .benefit-icon,
  body .benefits-bar i {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 14px !important;
    font-size: 1.35rem !important;
  }
  body .benefit-item-icon i {
    font-size: 1.35rem !important;
  }
  body .benefit-item-text,
  body .benefit-item strong {
    font-size: 0.95rem !important;
    margin-bottom: 0.15rem !important;
  }
  body .benefit-item-subtext,
  body .benefit-item .text-muted,
  body .benefit-item small {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }
}

/* ============================================================================
   21. MOBILE MENU WOW — La Pascan (offcanvas dreapta, blue+orange premium)
   Pattern adaptat din DonFood, ajustat pentru identitate LaPascan
   ============================================================================ */
@media (max-width: 991.98px) {

  /* Hamburger button — accent portocaliu pe header alb. Cand meniul e deschis,
     butonul X devine FIXED in dreapta-sus (peste panel) ca user sa-l vada
     mereu, indiferent unde scrolleaza in menu */
  body .navbar-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, color-mix(in srgb, var(--color-accent) 14%, transparent) 100%) !important;
    border: 1.5px solid color-mix(in srgb, var(--color-accent) 25%, transparent) !important;
    border-radius: 12px !important;
    color: var(--sp-orange) !important;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    position: relative;
    z-index: 9999;
  }
  /* Cand meniul e deschis: X-ul fix in dreapta-sus, peste header panel */
  body.menu-open .navbar-menu-btn {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 10000 !important;
    background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
    border-color: var(--sp-orange) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
  body .navbar-menu-btn:hover,
  body .navbar-menu-btn:active,
  body .navbar-menu-btn.active {
    background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
    border-color: var(--sp-orange) !important;
    color: #FFFFFF !important;
    transform: scale(1.05);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  body .navbar-menu-btn .navbar-menu-icon-open,
  body .navbar-menu-btn .navbar-menu-icon-close {
    font-size: 22px;
    line-height: 1;
  }

  /* Body lock when menu open (fara backdrop dark) */
  body.menu-open { overflow: hidden; }
  body.menu-open::before { display: none !important; content: none !important; }
  body.menu-open .site-navbar { z-index: 9999 !important; }

  /* Kill backdrop-filter/blur ramase de la shared mobile-wow.css */
  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;
  }

  /* ----- Full-screen panel — ocupa intregul ecran pe mobil ----- */
  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: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--color-accent) 4%, var(--color-white)) 100%) !important;
    color: var(--sp-brown-dark) !important;
    z-index: 9995 !important;
    padding: 0 !important;
    transform: translateX(105%) !important;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
    border-left: none !important;
    box-shadow: 0 0 60px rgba(0,0,0,0.4);
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body .navbar-menu.open { transform: translateX(0) !important; }
  /* Scroll lock STRICT cand meniul e deschis — doar in interiorul lui */
  body.menu-open { overflow: hidden !important; height: 100dvh !important; touch-action: none !important; }
  body.menu-open html { overflow: hidden !important; }

  /* Header panel: gradient navy + logo LaPascan (pe stanga, big) */
  body .navbar-menu::before {
    content: '';
    display: block;
    width: 100%;
    height: 110px;
    background:
      url('/uploads/site/logo.png') no-repeat 18px center / auto 90px,
      radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--color-accent) 28%, transparent) 0%, transparent 55%),
      linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%);
    border-bottom: 4px solid var(--sp-orange);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18);
    flex-shrink: 0;
    position: relative;
  }

  /* Tag-line sub header */
  body .navbar-menu > .navbar-nav::before {
    content: 'Pizza la cuptor pe lemne · Aluat 48h';
    display: block;
    text-align: center;
    color: var(--sp-orange);
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 12px 16px 8px;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-accent) 22%, transparent);
    margin-bottom: 8px;
  }

  /* 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-accent) 35%, transparent);
    border-radius: 4px;
  }
  body .navbar-menu .nav-item {
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* nav-link — pill rounded cu icon stanga */
  body .navbar-menu .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    margin: 3px 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--sp-brown-dark) !important;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    border-radius: 12px !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
    position: relative;
    box-shadow: none !important;
    text-align: left !important;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  body .navbar-menu .nav-link .nav-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent) !important;
    color: var(--sp-orange) !important;
    border-radius: 10px !important;
    margin-right: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    flex-shrink: 0;
    transition: all 0.2s ease;
  }
  body .navbar-menu .nav-link:hover,
  body .navbar-menu .nav-link:active {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-accent) 28%, transparent) !important;
    color: var(--sp-orange-dark) !important;
    padding-left: 14px !important;
  }
  body .navbar-menu .nav-link:hover .nav-icon,
  body .navbar-menu .nav-link:active .nav-icon {
    background: var(--sp-orange) !important;
    color: #FFFFFF !important;
    transform: rotate(-6deg) scale(1.08);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
  /* Specificity boost pentru a invinge .site-navbar .nav-link.active (color: orange) */
  body .site-navbar .navbar-menu .nav-link.active,
  body .navbar-menu .nav-link.active {
    background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 45%, transparent) !important;
  }
  body .site-navbar .navbar-menu .nav-link.active .nav-icon,
  body .navbar-menu .nav-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
  }
  body .site-navbar .navbar-menu .nav-link.active *,
  body .navbar-menu .nav-link.active *,
  body .navbar-menu .nav-link.active span {
    color: #FFFFFF !important;
  }
  body .navbar-menu .nav-arrow {
    margin-left: auto;
    opacity: 0.45;
    transition: transform 0.25s;
  }

  /* Dropdown Shop: AUTO-EXPANDED in 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: 5px 4px 12px !important;
    padding: 5px 0 10px !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  /* Category card — compact 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-accent) 15%, transparent) !important;
    border-radius: 10px !important;
    color: var(--sp-brown-dark) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.18s ease;
    box-shadow: 0 2px 5px color-mix(in srgb, var(--color-primary-dark) 5%, transparent) !important;
    line-height: 1.15 !important;
    min-height: 46px;
  }
  body .navbar-menu .nav-dropdown-item .nav-dropdown-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
    color: var(--sp-orange) !important;
    border-radius: 8px !important;
    margin-right: 0 !important;
    font-size: 0.95rem !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;
  }
  body .navbar-menu .nav-dropdown-item:hover,
  body .navbar-menu .nav-dropdown-item:active {
    background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--color-accent) 35%, 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.28) !important;
    color: #FFFFFF !important;
  }

  /* Item parent Shop expanded — sageata in jos */
  body .navbar-menu .nav-item:has(> .nav-dropdown) > .nav-link .nav-arrow {
    transform: rotate(180deg);
    opacity: 0.6;
  }

  /* Footer panel: CTA telefon in meniul mobil = LINK REAL tel: (apelabil). Numarul e in HTML (header.php), din Setari → Contact → Telefon. */
  body .navbar-menu .navbar-menu-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 0 12px 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--sp-orange) 0%, var(--sp-orange-dark) 100%);
    color: var(--color-on-primary);
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.02rem;
    border-radius: 14px;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--color-accent) 45%, transparent);
    text-transform: none;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }

  /* Textul RAMANE ALB pe toate starile linkului (inclusiv :visited dupa apel + back — altfel portocaliu pe portocaliu = invizibil) */
  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);
  }

  /* Pe mobil, scoatem favoritele din header (deja in shared) si pastram doar
     search + cont + cos. Ajustam logo + iconite. */
  body .site-navbar .navbar-logo img {
    height: 56px !important;
    width: auto !important;
    max-height: 64px !important;
    margin-top: -8px !important;
    margin-bottom: -8px !important;
  }
  body .site-navbar .navbar-icons {
    gap: 4px !important;
  }
  body .site-navbar .navbar-icon-btn {
    width: 38px !important;
    height: 38px !important;
  }
}

/* Sub 480px: pastram FULL-SCREEN (era 92vw, dar user a cerut full-screen) */
@media (max-width: 480px) {
  body .navbar-menu {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  body .navbar-menu::before {
    height: 96px;
    background-size: auto 76px, auto, auto;
  }
}

/* Back-to-top size + z-index pe mobil (pozitia vine din admin settings via inline style) */
@media (max-width: 768px) {
  body .back-to-top {
    width: 42px !important;
    height: 42px !important;
    z-index: 998 !important;
  }
}

/* ============================================================================
   SOLO PIZZA — Hero fix (fara banda maro) + Info bar premium sub hero
   2026-06-18 — hero-section era mai inalt decat continutul static -> banda maro.
   ============================================================================ */
body .hero-section:has(.hero-static) {
  min-height: 0 !important;
  height: auto !important;
  background: var(--color-bg) !important;
}

/* INFO BAR (benefits) — strip maro premium, 4 beneficii cu icoane portocalii */
body .benefits-bar {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border: none !important;
  padding: 1.5rem 0 !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 14px 34px color-mix(in srgb, var(--color-primary-dark) 20%, transparent);
}
body .benefits-bar .container > .row,
body .benefits-bar .benefits-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;
}
body .benefits-bar [class*="col-"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  width: auto !important; max-width: none !important;
  flex: initial !important;
  padding: 0 0.3rem !important;
}
body .benefits-bar .benefit-item {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  padding: 0.35rem 0.4rem !important;
  transform: none !important;
}
body .benefits-bar .benefit-item:hover { transform: translateY(-2px) !important; }
body .benefits-bar .benefit-item-icon {
  flex-shrink: 0;
  width: 52px !important; height: 52px !important;
  display: flex !important; align-items: center; justify-content: center;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 88%, #000) 100%) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 42%, transparent);
}
body .benefits-bar .benefit-item-icon i {
  font-size: 1.45rem !important; color: #FFFFFF !important;
  background: none !important; width: auto !important; height: auto !important;
  box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
}
body .benefits-bar .benefit-item-text {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important; font-size: 1.0rem !important;
  color: #FFFFFF !important; margin-bottom: 1px;
}
body .benefits-bar .benefit-item-subtext {
  font-size: 0.82rem !important; color: rgba(255,255,255,0.80) !important; line-height: 1.3;
}
@media (max-width: 767.98px){
  body .benefits-bar .container > .row,
  body .benefits-bar .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 575.98px){
  body .benefits-bar .benefit-item-icon { width: 44px !important; height: 44px !important; }
  body .benefits-bar .benefit-item-icon i { font-size: 1.2rem !important; }
  body .benefits-bar .benefit-item-text { font-size: 0.9rem !important; }
  body .benefits-bar .benefit-item-subtext { font-size: 0.74rem !important; }
}

/* ============================================================================
   SOLO PIZZA — Slider hero: overlay mai lejer ca pozele food sa se vada
   2026-06-18 — overlay maro 0.78 acoperea complet poza. Acum gradient lateral.
   ============================================================================ */
body .hero-overlay {
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--color-text) 84%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--color-text) 85%, var(--color-primary-dark)) 50%, transparent) 38%,
      color-mix(in srgb, var(--color-text) 12%, transparent) 66%,
      color-mix(in srgb, var(--color-text) 0%, transparent) 100%) !important;
}
body .hero-slide-image,
body .hero-slide img.hero-slide-image {
  filter: brightness(0.95) saturate(1.12) !important;
}
/* asigura ca poza acopera tot, centrat */
body .hero-slide-image { object-position: center !important; }

/* ==========================================================================
   LA GRECU — SISTEM DE DESIGN „TAVERNA EGEEANA"  (rescris 2026-07-16)
   --------------------------------------------------------------------------
   Principii:
     · UN motiv semnatura — meandrul grecesc — folosit consecvent, dar RAR
     · Tipografie cu ierarhie clara: Cormorant Garamond (display, clasic grecesc)
       peste DM Sans (UI/text) — contrastul serif/sans da caracter
     · Adancime din umbre stratificate moi, nu din chenare peste tot
     · Paleta restransa: albastru egeean + turcoaz + alb cicladic + miere (rar)
     · Ritm generos: aer intre sectiuni, respiratie in jurul titlurilor
   ZERO hex hardcodat — totul din paleta (exceptie: umbre rgba negre).
   ========================================================================== */

:root {
    /* meandru (Greek key) — desenat cu currentColor via mask, ca sa se coloreze din paleta */
    --lg-meander-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='24' viewBox='0 0 84 24'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M3 21V3h16v12h-9v-6h5'/%3E%3Cpath d='M45 21V3h16v12h-9v-6h5'/%3E%3C/g%3E%3C/svg%3E");
    /* val egeean pentru separatoare de sectiune */
    --lg-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 12c15 0 15-8 30-8s15 8 30 8 15-8 30-8 15 8 30 8' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
    --lg-display: 'Cormorant Garamond', Georgia, serif;
}

/* banda de meandru reutilizabila — se coloreaza cu `color` */
.lg-meander-band {
    height: 24px;
    background-color: currentColor;
    -webkit-mask-image: var(--lg-meander-svg);
    mask-image: var(--lg-meander-svg);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ==========================================================================
   1. TIPOGRAFIE — display clasic pe titlurile mari
   ========================================================================== */
.hero-static-content h1,
.section-title,
.story-title,
.page-hero h1,
.newsletter-title {
    font-family: var(--lg-display) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.08;
}
.hero-static-content h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); }
.section-title          { font-size: clamp(2rem, 3.6vw, 3rem); }

/* eticheta mica de sectiune — versale rarefiate, flancata de meandru */
.section-badge,
.story-badge {
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* subtitlul sectiunii — masura de citire confortabila */
.section-subtitle {
    max-width: 58ch;
    margin-inline: auto;
    color: var(--color-text-secondary);
    font-size: 1.03rem;
    line-height: 1.65;
}

/* ==========================================================================
   2. HERO — cinematic, cu scrim si intrare lina
   ========================================================================== */
.hero-static { position: relative; overflow: hidden; }
.hero-static .hero-static-bg { transform: scale(1.04); animation: lgHeroDrift 22s ease-in-out infinite alternate; }
@keyframes lgHeroDrift { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.11) translate3d(-1.2%,0,0); } }

.hero-static .hero-static-bg::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 90% at 12% 50%,
            color-mix(in srgb, #000 74%, transparent) 0%,
            color-mix(in srgb, #000 52%, transparent) 42%,
            transparent 74%),
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, #000 42%, transparent) 100%);
}
.hero-static-content { animation: lgRise .9s cubic-bezier(.22,.9,.3,1) both; }
@keyframes lgRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero-static-content h1 { color: var(--color-white) !important; text-shadow: 0 3px 30px rgba(0,0,0,.45); }
.hero-static-content p {
    color: color-mix(in srgb, var(--color-white) 90%, transparent) !important;
    font-size: 1.12rem; line-height: 1.7; max-width: 46ch !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.hero-static-content .hero-highlight {
    background: color-mix(in srgb, var(--color-primary) 88%, #000);
    color: var(--color-white);
    padding: .06em .42em; border-radius: var(--border-radius-sm, 6px);
    box-shadow: 0 10px 30px rgba(0,0,0,.32);
}
/* CTA cu ridicare */
.btn-hero-static {
    letter-spacing: .06em; font-weight: 700;
    padding: .95rem 2.1rem;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--color-accent) 40%, transparent);
    transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.btn-hero-static:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--color-accent) 52%, transparent);
}

/* banda de meandru care inchide hero-ul */
.hero-section { position: relative; }
.hero-section::after {
    content: ""; display: block; height: 26px;
    background-color: var(--color-primary);
    opacity: .28;
    -webkit-mask-image: var(--lg-meander-svg); mask-image: var(--lg-meander-svg);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: center; mask-position: center;
}

/* ==========================================================================
   3. TITLURI DE SECTIUNE — linia devine meandru scurt, centrat
   ========================================================================== */
.section-title::after {
    content: "";
    display: block;
    width: 84px; height: 20px;
    margin: .85rem auto 0;
    background-color: var(--color-accent);
    opacity: .85;
    -webkit-mask-image: var(--lg-meander-svg); mask-image: var(--lg-meander-svg);
    mask-image: var(--lg-meander-svg);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: center; mask-position: center;
    border-radius: 0 !important;
    background-image: none !important;
}

/* ==========================================================================
   4. CARDURI CATEGORIE — cicladice: alb, umbra moale, zoom la poza
   ========================================================================== */
.category-card {
    background: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-radius: var(--border-radius-lg, 16px);
    overflow: hidden;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 8%, transparent);
    transition: transform .3s cubic-bezier(.22,.9,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.category-card-icon { overflow: hidden; }
.category-card-icon img {
    transition: transform .55s cubic-bezier(.22,.9,.3,1);
    width: 100%; height: 100%; object-fit: cover;
}
.category-card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
    box-shadow: 0 22px 48px color-mix(in srgb, var(--color-primary) 24%, transparent);
}
.category-card:hover .category-card-icon img { transform: scale(1.09); }
.category-card-title { font-weight: 700; letter-spacing: -0.2px; }
.category-card-count {
    background: color-mix(in srgb, var(--color-accent) 13%, var(--color-white));
    color: var(--color-primary-dark);
    font-weight: 600; letter-spacing: .01em;
}
/* sageti carusel — rotunde, egeene */
.section-categories .cat-nav {
    background: var(--color-white);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.section-categories .cat-nav:hover {
    background: var(--color-primary); color: var(--color-white);
}

/* ==========================================================================
   5. PRODUSE — pret ca „pastila de miere", ridicare la hover
   ========================================================================== */
.product-card, .product-item, .card-product {
    border-radius: var(--border-radius-lg, 16px);
    border: 1px solid color-mix(in srgb, var(--color-primary) 9%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 7%, transparent);
    transition: transform .3s cubic-bezier(.22,.9,.3,1), box-shadow .3s ease;
    overflow: hidden;
}
.product-card:hover, .product-item:hover, .card-product:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 46px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.product-card img, .product-item img { transition: transform .5s cubic-bezier(.22,.9,.3,1); }
.product-card:hover img, .product-item:hover img { transform: scale(1.06); }

/* ==========================================================================
   6. POVESTEA — poza cu rama offset (ca o fereastra cicladica)
   ========================================================================== */
.section-story { position: relative; }
.story-image, .section-story img {
    border-radius: var(--border-radius-lg, 16px);
    box-shadow: 0 26px 60px color-mix(in srgb, var(--color-primary) 26%, transparent);
}
.section-story .story-image-wrap, .section-story .col-lg-6:first-child { position: relative; }
.section-story .story-image-wrap::before {
    content: "";
    position: absolute; inset: 18px -18px -18px 18px;
    border: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
    border-radius: var(--border-radius-lg, 16px);
    z-index: 0; pointer-events: none;
}
.story-badge {
    background: color-mix(in srgb, var(--color-accent) 15%, var(--color-white));
    color: var(--color-primary-dark);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* ==========================================================================
   7. BENEFICII — banda egeeana cu filigran de meandru
   ========================================================================== */
.benefits-bar {
    position: relative;
    background: linear-gradient(135deg,
        var(--color-primary-dark) 0%,
        var(--color-primary) 45%,
        color-mix(in srgb, var(--color-primary) 62%, var(--color-accent)) 100%);
    overflow: hidden;
}
.benefits-bar::before {
    content: "";
    position: absolute; inset: 0;
    background-color: var(--color-white);
    opacity: .07;
    -webkit-mask-image: var(--lg-meander-svg); mask-image: var(--lg-meander-svg);
    -webkit-mask-repeat: repeat; mask-repeat: repeat;
    -webkit-mask-size: 84px 24px; mask-size: 84px 24px;
    pointer-events: none;
}
.benefits-bar .benefit-item { position: relative; z-index: 1; }
.benefit-item-icon {
    background: color-mix(in srgb, var(--color-white) 16%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent);
    color: var(--color-white) !important;
    backdrop-filter: blur(2px);
}

/* ==========================================================================
   8. FAQ — acordeon curat, accent egeean
   ========================================================================== */
.section-faq .accordion-item,
.section-faq .faq-item {
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
    border-radius: var(--border-radius, 10px) !important;
    background: var(--color-white);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 6%, transparent);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.section-faq .accordion-item:hover {
    border-color: color-mix(in srgb, var(--color-accent) 34%, transparent) !important;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.section-faq .accordion-button:not(.collapsed) {
    color: var(--color-primary-dark);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-white));
}

/* ==========================================================================
   9. NEWSLETTER — val egeean deasupra benzii
   ========================================================================== */
.newsletter-section { position: relative; }
.newsletter-section::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 16px;
    background-color: var(--color-white);
    opacity: .5;
    -webkit-mask-image: var(--lg-wave); mask-image: var(--lg-wave);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    pointer-events: none;
}

/* ==========================================================================
   10. HEADER — meniu cu subliniere care creste
   ========================================================================== */
.site-navbar .nav-link { position: relative; font-weight: 600; }
.site-navbar .nav-link::after {
    content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .35rem;
    height: 2px; border-radius: 2px;
    background: var(--color-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .26s cubic-bezier(.22,.9,.3,1);
}
.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after { transform: scaleX(1); }

/* ==========================================================================
   11. RITM — mai mult aer intre sectiuni
   ========================================================================== */
.section-categories, .section-story, .section-products, .section-faq { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* respectam preferinta de miscare redusa */
@media (prefers-reduced-motion: reduce) {
    .hero-static .hero-static-bg { animation: none; transform: none; }
    .hero-static-content { animation: none; }
    * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   12. MOBIL
   ========================================================================== */
@media (max-width: 767.98px) {
    .hero-static .hero-static-bg::after {
        background: linear-gradient(180deg,
            color-mix(in srgb, #000 34%, transparent) 0%,
            color-mix(in srgb, #000 68%, transparent) 100%);
    }
    .hero-static-content p { max-width: 100% !important; }
    .hero-section::after { height: 18px; -webkit-mask-size: 62px 18px; mask-size: 62px 18px; }
    .section-title::after { width: 62px; height: 16px; }
    .section-story .story-image-wrap::before { inset: 12px -12px -12px 12px; }
}

/* ==========================================================================
   13. BANNER DE CATEGORIE — decor grecesc (meandru + coloane de lumina)
   ========================================================================== */
.category-hero { position: relative; overflow: hidden; }
/* filigran de meandru peste tot banner-ul */
.category-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-color: var(--color-white);
    opacity: .10;
    -webkit-mask-image: var(--lg-meander-svg); mask-image: var(--lg-meander-svg);
    -webkit-mask-repeat: repeat; mask-repeat: repeat;
    -webkit-mask-size: 84px 24px; mask-size: 84px 24px;
    pointer-events: none; z-index: 0;
}
/* banda de meandru mai densa jos, ca un brau de amfora */
.category-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
    background-color: var(--color-white);
    opacity: .28;
    -webkit-mask-image: var(--lg-meander-svg); mask-image: var(--lg-meander-svg);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: center; mask-position: center;
    pointer-events: none; z-index: 1;
}
.category-hero-inner, .category-hero-content, .category-hero-image { position: relative; z-index: 2; }
.category-hero-title { font-family: var(--lg-display) !important; letter-spacing: -0.5px; }
.category-hero-badge {
    letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; font-weight: 700;
    background: color-mix(in srgb, var(--color-white) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-white) 30%, transparent);
    backdrop-filter: blur(3px);
}
.category-hero-count {
    background: color-mix(in srgb, var(--color-white) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent);
    backdrop-filter: blur(3px);
}
.category-hero-image img { border-radius: var(--border-radius-lg, 16px); }

/* ==========================================================================
   14. PAGINI DE CONTINUT (Despre noi, Contact, FAQ) — erau NESTILIZATE
   ========================================================================== */
.page-hero {
    text-align: center;
    padding-block: clamp(1.5rem, 4vw, 3rem);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.page-hero h1 { font-family: var(--lg-display) !important; font-weight: 700; margin-bottom: .75rem; }
.page-hero .lead {
    font-size: 1.15rem; line-height: 1.7; color: var(--color-text-secondary);
    max-width: 62ch; margin-inline: auto;
}
.page-section { margin-block: clamp(1.75rem, 4vw, 3rem); }
.page-section h2 {
    font-family: var(--lg-display) !important; font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    margin-bottom: .9rem; color: var(--color-primary-dark);
}
.page-section p { line-height: 1.8; color: var(--color-text); }

/* citat elegant, in stil clasic — inlocuieste blocul „footer" care mostenea
   stilurile footerului global si arata rupt */
.page-content blockquote, .page-section blockquote {
    position: relative;
    margin: 1.5rem 0;
    padding: 1.75rem 2rem 1.75rem 3.25rem;
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-white));
    border-left: 4px solid var(--color-accent);
    border-radius: var(--border-radius, 10px);
}
.page-content blockquote::before {
    content: "\201C";
    position: absolute; left: .85rem; top: .1rem;
    font-family: var(--lg-display); font-size: 4rem; line-height: 1;
    color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.page-content blockquote p {
    font-family: var(--lg-display); font-size: 1.35rem; line-height: 1.5;
    font-style: italic; color: var(--color-primary-dark); margin-bottom: .5rem;
}
.page-content blockquote cite, .page-content blockquote footer {
    display: block; font-style: normal; font-size: .9rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-text-secondary);
    background: none !important; padding: 0 !important; border: 0 !important;
}
/* lista de avantaje */
.features-list { list-style: none; padding-left: 0; }
.features-list li {
    position: relative; padding-left: 2rem; margin-bottom: .9rem; line-height: 1.7;
}
.features-list li::before {
    content: ""; position: absolute; left: 0; top: .45em;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.page-section ul:not(.features-list) li { line-height: 1.8; margin-bottom: .4rem; }

/* ==========================================================================
   BREADCRUMBS „A LA GRECU" — separator = MEANDRU (Greek key)
   --------------------------------------------------------------------------
   Inainte separatorul era o bulina portocalie mostenita din tema solopizza,
   complet straina de motivul-semnatura al sitului. Acum fiecare separator e
   o cheie de meandru, oglindita alternativ, ca sirul intreg sa se citeasca
   drept o banda greceasca continua: ⌐¬⌐¬. La hover peste breadcrumb, cheile
   se aprind pe rand (stagger), ca un val care trece prin banda.
   Totul din paleta, zero hex hardcodat.
   ========================================================================== */
:root {
}

@keyframes lgMeanderWave {
    0%, 100% { opacity: .6;  background-color: var(--color-accent); }
    45%      { opacity: 1;   background-color: var(--color-primary); }
}
/* varianta oglindita isi pastreaza oglindirea in timpul animatiei */
@keyframes lgMeanderWaveFlip {
    0%, 100% { opacity: .6;  background-color: var(--color-accent); transform: scaleX(-1); }
    45%      { opacity: 1;   background-color: var(--color-primary); transform: scaleX(-1); }
}

/* ==========================================================================
   15. FIX CRITIC — paginile de continut nu aveau CONTAINER
   --------------------------------------------------------------------------
   Masurat in browser: `main > nav.breadcrumb` si `main > .page-content` erau
   amandoua la x=0 cu latimea intregului viewport (2550px pe un ecran 2560) —
   fara `.container`, fara max-width, fara padding. De aceea „Despre noi" arata
   rupt: textul lipit de marginea ecranului, pe toata latimea monitorului.
   Cauza: templateul `about.php` din shared randeaza continutul intr-un `div`
   simplu, bazandu-se pe CSS-ul clientului pentru latime (override-ul solopizza,
   pe care l-am scos fiindca avea continut strain).
   ========================================================================== */
main > nav[aria-label="breadcrumb"],
main > .page-content {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}
main > .page-content {
    padding-block: clamp(1.5rem, 4vw, 2.75rem);
}
/* masura de citire confortabila pentru text lung */
main > .page-content p,
main > .page-content li { max-width: 72ch; }
main > .page-content .page-hero p,
main > .page-content .page-hero .lead { max-width: 62ch; margin-inline: auto; }

/* hero-ul paginii devine un card rotunjit, nu o banda taiata */
main > .page-content .page-hero {
    border-radius: var(--border-radius-lg, 16px);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ==========================================================================
   17. CAUTARE SHOP — fara eticheta de categorie sub camp (cerere user)
   ========================================================================== */
.product-search-card .psq-meta .psq-scope { display: none !important; }

/* centrarea efectiva a breadcrumb-ului/continutului: `margin-inline: auto` era
   anulat de o regula cu specificitate mai mare (masurat: nav avea max-width
   1120px dar ramanea la x=0). */
main > nav[aria-label="breadcrumb"],
main > .page-content {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   18. CURATENIE VIZUALA — umbre/aureole urate (masurate in browser)
   --------------------------------------------------------------------------
   · .category-hero-title avea `filter: drop-shadow(0 4px 12px rgba(0,0,0,.2))`
     => titlul aparea neclar, ca „scurs".
   · .category-hero-inner avea DOUA umbre suprapuse (0 25px 60px -10px + 0 12…)
     => aureola albastra in jurul cardului.
   · cardurile din sidebar aveau `0 6px 22px rgba(0,0,0,.1)` — prea greu.
   ========================================================================== */
.category-hero-title { filter: none !important; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.category-hero-inner {
    box-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary) 16%, transparent) !important;
}
.product-search-card,
.shop-sidebar .shop-sidebar-section {
    box-shadow: 0 1px 3px color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}
/* breadcrumb-ul de pe shop/categorie: aliniat STANGA, la fel ca bannerul */
.product-breadcrumbs-wrap .breadcrumb { justify-content: flex-start !important; padding-left: 0 !important; }

/* placeholderul din cautare sa incapa INTREG */
.psq-input { font-size: 0.78rem !important; padding-left: 34px !important; padding-right: 34px !important; }
.psq-input::placeholder { font-size: 0.78rem !important; }

/* starea de incarcare AJAX — discreta */
.product-search-card.psq-loading .psq-ico { opacity: .45; animation: lgPulse 1s ease-in-out infinite; }
@keyframes lgPulse { 50% { opacity: 1; } }

/* ==========================================================================
   20. BANNER CATEGORIE + CARD DE CAUTARE — curatenie finala (user 2026-07-16)
   ========================================================================== */
/* pastila „N produse" avea o aureola turcoaz puternica (0 12px 28px / .5) */
body .category-hero .category-hero-count {
    box-shadow: none !important;
    background: color-mix(in srgb, var(--color-white) 18%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--color-white) 30%, transparent) !important;
}
body .category-hero .category-hero-badge { box-shadow: none !important; }
body .category-hero .category-hero-desc { text-shadow: none !important; }

/* DECOR GRECESC vizibil pe bannerul de categorie (inainte era la 10% = invizibil) */
.category-hero::before { opacity: .18 !important; }
.category-hero::after  { opacity: .38 !important; height: 30px !important; }

/* --- Cardul de cautare: simplu, cu TITLU, ca restul cardurilor din sidebar --- */
.product-search-card {
    box-shadow: none !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-white);
    border-radius: var(--border-radius, 10px) !important;
    padding-top: .9rem !important;
}
.product-search-card::before {
    content: "CAUTĂ";
    display: block;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--color-text-secondary);
    padding-bottom: .6rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--color-border);
}
.psq-field .psq-input {
    box-shadow: none !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-bg) !important;
}
.psq-field .psq-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
}
/* contorul de rezultate ramane vizibil cat timp cautarea e activa */
.product-search-card .psq-meta { margin-top: .6rem; }
.product-search-card .psq-count {
    font-size: .8rem; font-weight: 600;
    color: var(--color-primary-dark);
}

/* ==========================================================================
   21. MOBIL — HERO HOME (rescris 2026-07-16)
   --------------------------------------------------------------------------
   DE CE nu functiona nimic pana acum: `site/templates/pages/home.php` are un
   bloc <style> INLINE in pagina, deci se aplica DUPA foaia de stil a temei,
   iar regulile lui mobile sunt cu `!important`:
       .hero-static            { min-height: 92vh !important; }   <- hero cat tot ecranul
       .hero-static-content h1 { color: var(--color-text) !important; }  <- text INCHIS
       .hero-static-content p  { color: var(--color-text-secondary) !important; }
   Textul inchis st� peste fotografie (bg-ul e position:absolute; inset:0)
   => ilizibil. Orice regula din tema cu aceeasi specificitate PIERDE.
   Solutie: selectori mai SPECIFICI (`body .hero-static .hero-static-content h1`
   = 0,2,2 bate 0,1,1) + `!important`.
   ========================================================================== */
@media (max-width: 767.98px) {
    /* inaltime rezonabila, nu 92vh */
    body .hero-static {
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 5;
        max-height: 76vh;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        flex-direction: row !important;
    }
    /* scrim PUTERNIC ca textul alb sa fie lizibil peste poza */
    body .hero-static .hero-static-bg::after {
        background: linear-gradient(180deg,
            color-mix(in srgb, #000 18%, transparent) 0%,
            color-mix(in srgb, #000 46%, transparent) 45%,
            color-mix(in srgb, #000 82%, transparent) 100%) !important;
    }
    body .hero-static .container {
        position: relative; z-index: 3;
        padding-bottom: 1.75rem !important;
    }
    body .hero-static .hero-static-content {
        position: static !important;
        max-width: 100% !important;
        padding: 0 !important;
        text-align: left;
    }
    /* TEXT ALB — bate `color: var(--color-text) !important` din blocul inline */
    body .hero-static .hero-static-content h1 {
        color: var(--color-white) !important;
        font-size: clamp(1.9rem, 8.5vw, 2.5rem) !important;
        line-height: 1.08 !important;
        margin-bottom: .45rem !important;
        text-shadow: 0 2px 18px rgba(0,0,0,.5);
    }
    body .hero-static .hero-static-content h2 {
        font-size: clamp(1.15rem, 5.4vw, 1.5rem) !important;
        margin-bottom: .7rem !important;
    }
    body .hero-static .hero-static-content p {
        color: color-mix(in srgb, var(--color-white) 92%, transparent) !important;
        font-size: .95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.1rem !important;
        text-shadow: 0 2px 14px rgba(0,0,0,.55);
    }
    body .hero-static .btn-hero-static {
        padding: .8rem 1.6rem !important;
        font-size: .92rem !important;
        box-shadow: 0 10px 26px rgba(0,0,0,.35) !important;
    }
    /* banda de meandru mai subtire pe mobil */
    .hero-section::after { height: 20px; -webkit-mask-size: 64px 18px; mask-size: 64px 18px; }
    /* sectiunile nu mai au padding cat un ecran */
    .section-categories, .section-story, .section-products, .section-faq { padding-block: 2.25rem !important; }
}

/* ==========================================================================
   22. BREADCRUMBS — simple, fara capsula si fara pastile (rescris 2026-07-16)
   --------------------------------------------------------------------------
   Tema mostenita definea breadcrumb-ul ca o CAPSULA plutitoare (ol cu
   border-radius 999px + border turcoaz + umbra) in care FIECARE link era la
   randul lui o pastila (`padding: 4px 10px; border-radius: 999px`), iar itemul
   activ avea fundal colorat. Regulile aveau specificitate
   `body nav[aria-label="breadcrumb"] .breadcrumb…` = 0,2,2 — de aceea regulile
   mele scrise ca `.breadcrumb…` (0,1,0) NU au avut niciun efect, oricat de
   multe `!important` aveau. Rescrise AICI la aceeasi specificitate.
   ========================================================================== */
/* doar marginile VERTICALE — cele orizontale raman `auto` (centrarea paginii de
   continut), altfel breadcrumb-ul sare la marginea din stanga a ecranului. */
body nav[aria-label="breadcrumb"] {
    margin-top: .75rem !important;
    margin-bottom: 1rem !important;
}

/* icoanele din crumb-uri nu-si au rostul */
body nav[aria-label="breadcrumb"] .breadcrumb-item i,
body nav[aria-label="breadcrumb"] .breadcrumb-item svg { display: none !important; }

/* ==========================================================================
   23. MODELE TRADITIONALE GRECESTI (2026-07-16)
   --------------------------------------------------------------------------
   · Cardul de categorie avea un fundal de PUNCTE (radial-gradient 24px pe
     `.category-hero-inner` + inca un strat de puncte pe `::before`-ul lui).
     Inlocuit cu MEANDRU (Greek key) — modelul traditional grecesc.
   · Breadcrumbs: separatorul „/" inlocuit cu un semn de meandru.
   ========================================================================== */

/* separator mic de meandru pentru breadcrumbs */
:root {
    --lg-key-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'%3E%3Cpath d='M2 12V2h14v8H8V6h5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* --- Cardul de categorie: PUNCTE -> MEANDRU ------------------------------ */
body .category-hero .category-hero-inner {
    /* pastram doar gradientele de culoare, FARA stratul de puncte */
    background:
        radial-gradient(ellipse at 88% 12%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 52%),
        radial-gradient(ellipse at 10% 92%, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 48%, var(--color-primary-light) 100%) !important;
}
/* stratul de model: meandru repetat, discret dar VIZIBIL */
body .category-hero .category-hero-inner::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: none !important;
    background-color: var(--color-white) !important;
    opacity: .13 !important;
    -webkit-mask-image: var(--lg-meander-svg) !important;
    mask-image: var(--lg-meander-svg) !important;
    -webkit-mask-repeat: repeat !important; mask-repeat: repeat !important;
    -webkit-mask-size: 84px 24px !important; mask-size: 84px 24px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
/* brau de meandru mai dens jos, ca pe o amfora */
body .category-hero .category-hero-inner::after {
    content: "" !important;
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    height: 26px !important;
    background: none !important;
    background-color: var(--color-white) !important;
    opacity: .3 !important;
    -webkit-mask-image: var(--lg-meander-svg) !important;
    mask-image: var(--lg-meander-svg) !important;
    -webkit-mask-repeat: repeat-x !important; mask-repeat: repeat-x !important;
    -webkit-mask-position: center !important; mask-position: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
body .category-hero .category-hero-content,
body .category-hero .category-hero-image { position: relative; z-index: 2; }
/* stratul de meandru de pe wrapperul exterior nu mai e necesar (dubla modelul) */
.category-hero::before { opacity: 0 !important; }

/* ==========================================================================
   24. HERO SLIDER PREMIUM — scrim pentru lizibilitate (2026-07-16)
   Fotografiile de produs sunt deschise (farfurii albe, blat auriu), iar textul
   alb devenea ilizibil. Scrim dinspre stanga + intunecare generala usoara.
   ========================================================================== */
.hero-premium-slide { position: relative; }
/* 2026-09-24 (user): FARA strat inchis peste poza bannerului — poza ramane curata.
   Lizibilitatea titlului o da doar umbra textului (text-shadow, mai jos). */
.hero-premium-slide::after { content: none !important; display: none !important; }
/* Pastila mata DOAR sub textul bannerului (ca in aplicatie): poza ramane curata, titlul se citeste
   si pe pozele deschise. Doar cand slide-ul chiar are text. */
.hero-premium-slide .hps-content:has(.hps-title-1, .hps-title-2, .hps-subtitle) {
    display: inline-block;
    padding: 1.1rem 1.5rem !important;
    margin: 2.5rem 0;
    border-radius: 18px;
    background: rgba(0, 0, 0, .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hero-premium-slide .hps-content .hps-title-1 { margin-bottom: .2rem; }
@media (max-width: 767.98px) {
    .hero-premium-slide .hps-content:has(.hps-title-1, .hps-title-2, .hps-subtitle) {
        padding: .7rem 1rem !important;
        margin: 1rem 0;
        border-radius: 14px;
    }
    /* textul lung (ex. slide-ul cu promotiile) nu mai acopera jumatate din poza */
    body .hero-premium-slide .hps-content h1,
    body .hero-premium-slide .hps-content h2 { font-size: 1.3rem !important; line-height: 1.15 !important; }
    body .hero-premium-slide .hps-content p,
    body .hero-premium-slide .hps-content .hps-subtitle { font-size: .85rem !important; line-height: 1.4 !important; }
    /* pe telefon fara sageti, ca in designul comun (homepage.css): se derula cu degetul + punctele;
       tema le forta vizibile (display:flex !important) si stateau peste textul bannerului */
    body .hero-section .hero-arrow,
    body .hero-section .hero-arrow-prev,
    body .hero-section .hero-arrow-next { display: none !important; }
}
/* Bara de administrare (doar adminii logati): pe telefon regula comuna `img{height:auto}` din
   mobile-wow.css anula inaltimea de 20px a siglei => sigla iesea la marimea reala, peste antet */
body .admin-bar-logo img { height: 20px !important; width: auto !important; max-height: 20px !important; }
.hero-premium-slide > .container,
.hero-premium-slide .hero-content,
.hero-premium-slide .hero-slide-content { position: relative; z-index: 2; }
.hero-premium-slide h1, .hero-premium-slide h2, .hero-premium-slide p {
    text-shadow: 0 2px 20px rgba(0,0,0,.55);
}
/* sagetile: vizibile, in paleta */
.hero-arrow {
    background: color-mix(in srgb, var(--color-white) 20%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--color-white) 45%, transparent) !important;
    color: var(--color-white) !important;
    backdrop-filter: blur(4px);
    z-index: 5;
}
.hero-arrow:hover {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    transform: translateY(-50%) scale(1.06) !important;
}
/* punctele de navigatie */
.hero-dots { z-index: 5; }
.hero-dots button {
    background: color-mix(in srgb, var(--color-white) 55%, transparent) !important;
    border: 0 !important;
}
.hero-dots button.active { background: var(--color-accent) !important; }

/* centrarea breadcrumb-ului pe paginile de continut (Despre noi, Contact, FAQ):
   aceeasi latime si aceleasi margini ca blocul de continut de dedesubt. */
body main > nav[aria-label="breadcrumb"] {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: clamp(1rem, 4vw, 2rem) !important;
}

/* ==========================================================================
   25. PAGINI DE CONTINUT — coloana centrata (2026-07-16)
   Textul statea lipit de marginea din stanga a containerului larg, cu un gol
   mare in dreapta ("aruncat acolo"). Acum: bannerul ramane pe toata latimea
   (aliniat cu breadcrumb-ul), iar textul curge intr-o coloana CENTRATA, cu
   masura de citire confortabila. Titlurile de sectiune centrate, cu un mic
   meandru sub ele — aer si simetrie.
   ========================================================================== */
main > .page-content .page-section,
main > .page-content > p,
main > .page-content > ul,
main > .page-content > ol,
main > .page-content blockquote {
    max-width: 860px;
    margin-inline: auto;
}
main > .page-content .page-section p,
main > .page-content .page-section ul,
main > .page-content .page-section ol {
    max-width: 100%;
    margin-inline: 0;
}

/* titlurile sectiunilor: centrate, cu meandru dedesubt */
main > .page-content .page-section h2 {
    text-align: center;
    margin-bottom: 1.25rem;
}
main > .page-content .page-section h2::after {
    content: "";
    display: block;
    /* 3 chei de meandru, exact: latimea = 3 x mask-size, ca sa nu iasa taiate */
    width: 66px; height: 14px;
    margin: .7rem auto 0;
    background-color: color-mix(in srgb, var(--color-accent) 85%, transparent);
    -webkit-mask-image: var(--lg-key-sm); mask-image: var(--lg-key-sm);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: left center;  mask-position: left center;
    -webkit-mask-size: 22px 14px;   mask-size: 22px 14px;
}

/* citatul: centrat si mai aerisit */
main > .page-content blockquote { text-align: center; padding: 2rem 2.25rem 1.75rem; border-left: 0; border-top: 3px solid var(--color-accent); }
main > .page-content blockquote::before { position: static; display: block; margin-bottom: -1.25rem; }
main > .page-content blockquote p { max-width: 100%; }

/* listele centrate ca bloc, dar cu textul aliniat normal */
main > .page-content .features-list { display: inline-block; text-align: left; }
main > .page-content .page-section:has(.features-list) { text-align: center; }

@media (max-width: 767.98px) {
    main > .page-content .page-section h2 { text-align: left; }
    main > .page-content .page-section h2::after { margin-inline: 0; }
    main > .page-content blockquote { text-align: left; padding: 1.5rem 1.25rem; }
}

/* --- Cardul albastru de titlu (Despre noi / pagini de continut): model grecesc --- */
main > .page-content .page-hero { position: relative; overflow: hidden; }
main > .page-content .page-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-color: var(--color-white);
    opacity: .13;
    -webkit-mask-image: var(--lg-meander-svg); mask-image: var(--lg-meander-svg);
    -webkit-mask-repeat: repeat; mask-repeat: repeat;
    -webkit-mask-size: 84px 24px; mask-size: 84px 24px;
    pointer-events: none; z-index: 0;
}
main > .page-content .page-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
    background-color: var(--color-white);
    opacity: .3;
    -webkit-mask-image: var(--lg-meander-svg); mask-image: var(--lg-meander-svg);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: center; mask-position: center;
    pointer-events: none; z-index: 1;
}
main > .page-content .page-hero > * { position: relative; z-index: 2; }

/* ============================================================================
   BREADCRUMB PESTE BANDA DE BRAND — corectie de ZONA (2026-08-07)
   ============================================================================
   Problema: regula generica de mai sus
       body nav[aria-label="breadcrumb"] .breadcrumb-item a
   picteaza linkul in culoarea BRANDULUI. Pe fundal deschis e corect, dar in
   hero-urile colorate (blog, contact) textul iese EXACT peste banda de aceeasi
   culoare: contrast masurat 1.00, adica invizibil. Regula generica are
   specificitate (0,2,3) si bate fix-ul din blog.css (0,2,1).

   Aici schimbam DOAR CULORILE, nimic decorativ: fara pastile, fara fundaluri
   adaugate — altfel iese o casuta gri peste banda, exact ce nu vrem.
   Regula de fond: "SISTEMUL DE ZONE" din services/cloudshop/CLAUDE.md.
   ============================================================================ */

body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item,
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item a,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item a,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item a,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item a,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item a,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item a {
    color: color-mix(in srgb, var(--color-on-primary, #fff) 80%, transparent) !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* pagina curenta — se desprinde prin opacitate deplina si greutate, NU printr-o casuta */
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active {
    color: var(--color-on-primary, #fff) !important;
    font-weight: 700;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* iconita "acasa" — tot pe culoarea de contrast */
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item:first-child a::before,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item:first-child a::before,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item:first-child a::before,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item:first-child a::before,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item:first-child a::before,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item:first-child a::before {
    color: color-mix(in srgb, var(--color-on-primary, #fff) 85%, transparent) !important;
    background: none !important;
}

/* hover — doar textul se aprinde, fara pastila colorata din brand
   (brandul e chiar fundalul benzii, deci ar disparea) */
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
    color: var(--color-on-primary, #fff) !important;
    background: none !important;
    background-image: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover::before,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover::before,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover::before,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover::before,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover::before,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item a:hover::before {
    color: var(--color-on-primary, #fff) !important;
    background: none !important;
}

/* banda in sine: fara pastila de fundal si cu putin aer fata de marginea de sus */
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}

body .blog-hero nav[aria-label="breadcrumb"],
body .contact-hero nav[aria-label="breadcrumb"],
body .about-hero nav[aria-label="breadcrumb"],
body .page-hero nav[aria-label="breadcrumb"],
body .shop-hero nav[aria-label="breadcrumb"],
body .category-hero nav[aria-label="breadcrumb"] {
    margin: 0 0 1.25rem !important;
}

/* ============================================================================
   Slider Acasa — inaltimea de pe situl vechi (hps-lagrecu-height)
   Pe la-grecu.ro sliderul avea 600px; la 550px (implicitul CloudShop) pozele
   erau taiate si nu incapeau cum trebuie. Override DOAR la acest client —
   ceilalti raman pe 550px.
   ========================================================================= */
/* `!important`: `home.php` isi scrie stilurile intr-un <style> INLINE, randat dupa
   tema — fara asta override-ul de aici nu are nicio sansa (masurat: ramanea 550px). */
/* DOAR pe desktop. Pe mobil shared-ul foloseste 92vh — se adapteaza la ecran si e
   mai bun decat o inaltime fixa; un 600px fortat ACOLO ar fi micsorat sliderul
   (masurat pe 375x812: 92vh = 747px). */
@media (min-width: 768px) {
    .hero-section,
    .hero-section .hero-premium-slides,
    .hero-section .hero-premium-slide {
        min-height: 600px !important;
    }
}

/* Poza se aseaza pe CENTRU, nu pe dreapta: pe cadrele La Grecu subiectul
   (pizza, sandwich) e in mijloc, iar `center right` il taia. */
.hero-premium-slide .hps-bg {
    background-position: center center !important;
}


/* ============================================================================
   Optiuni pagina de produs — compacte, pe doua coloane (ca la La Pascan)
   ----------------------------------------------------------------------------
   Nucleul aseaza optiunile una sub alta (flex column, rand de 44px). La grupurile
   lungi — „Sosuri gratuite" are 11 optiuni, „Sosuri extra" 10 — pagina devenea un
   tub lung de derulat. Aici: grila EXPLICITA pe doua coloane (nu auto-fill: vrem
   fix doua), randuri si carduri mai stranse, pret mai discret.
   Pe telefon revin pe o coloana — doua ar taia numele.
   `!important` fiindca regulile de nucleu au aceeasi specificitate.
   ============================================================================ */

/* cardul grupului: mai putin aer in jur */
body .pog-block {
  padding: 8px 10px !important;
  border-radius: 10px !important;
}
body .product-option-groups { gap: 8px !important; }
body .pog-header { margin-bottom: 2px !important; }
body .pog-title { font-size: 0.84rem !important; }
body .pog-description { margin-bottom: 6px !important; }

/* optiunile: doua coloane — DOAR in modul `card`. La modul `list` (`.is-list`)
   coloanele vin din setarea grupului, asezate de nucleu (shop.css), nu din tema. */
body .pog-options {
  margin-top: 5px !important;
}
body .pog-options:not(.is-list) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  align-items: stretch !important;
}
body .pog-options.is-select-mode { display: none !important; }

body .pog-option {
  gap: 6px !important;
  padding: 5px 8px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
}
body .pog-option-body { gap: 6px !important; min-width: 0 !important; }
body .pog-option-name {
  min-width: 0 !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
}
body .pog-option-emoji { font-size: 0.95rem !important; }
body .pog-option-img,
body .pog-option-img.pog-option-img-placeholder {
  width: 20px !important;
  height: 20px !important;
}
body .pog-option input[type="radio"],
body .pog-option input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
}

/* pretul: mai mic si mai strans, ca sa nu inghita latimea numelui */
body .pog-option-price {
  padding: 2px 6px !important;
  border-radius: 8px !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
}

/* variantele (Dimensiune pizza) — aceeasi densitate */
body .variant-group { margin-bottom: 0.5rem !important; }
body .variant-option { padding: 6px 10px !important; min-height: 32px !important; }

@media (max-width: 768px) {
  body .pog-options:not(.is-list) { grid-template-columns: 1fr !important; }
  body .pog-option { min-height: 44px !important; }
  body .pog-option-name { font-size: 0.875rem !important; }
  body .pog-option-price { font-size: 0.75rem !important; }
}


/* ============================================================================
   Breadcrumb — hover: iconita NU mai dispare + aspect mai viu
   ----------------------------------------------------------------------------
   Din clona veche ramasese `… a:hover::before { color: #FFFFFF }`: la trecerea
   cu mouse-ul, casuta de la „Acasă" devenea alba pe fundal alb, adica disparea.
   Aici: pastila discreta in culoarea magazinului, text si iconita in primary,
   o ridicare de 1px si umbra fina. Zonele cu banda colorata (blog/contact/despre/
   categorie/shop) au reguli proprii, mai specifice, si raman neatinse.
   ============================================================================ */
body nav[aria-label="breadcrumb"] .breadcrumb-item a {
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
  color: var(--color-primary) !important;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 16%, transparent);
}
body nav[aria-label="breadcrumb"] .breadcrumb-item a:hover::before {
  color: var(--color-accent) !important;   /* iconita ramane VIZIBILA, in accentul marcii */
  transform: scale(1.08);
  transition: transform .18s ease, color .18s ease;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item a:active {
  transform: translateY(0);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  body nav[aria-label="breadcrumb"] .breadcrumb-item a,
  body nav[aria-label="breadcrumb"] .breadcrumb-item a:hover,
  body nav[aria-label="breadcrumb"] .breadcrumb-item a:hover::before { transition: none !important; transform: none !important; }
}

/* ============================================================================
   FINALIZARE + COS MAI COMPACTE PE DESKTOP (cerere user, 22 sep 2026)
   Aceleasi dimensiuni ca la Cetinis: campuri de 34px in loc de 42px, randuri si
   carduri mai stranse, cuponul la aceeasi inaltime, etichetele de la „Date
   facturare" (comutatoarele PF/PJ si adresa diferita) mai mici.
   `checkout.css` (comun) pune `#checkoutForm .form-control{min-height:42px!important}`;
   `.checkout-section` e PARINTELE formularului, deci `.checkout-section #checkoutForm`
   (1-2-0) bate `#checkoutForm` (1-1-0). Pe telefon NU coboram (46px = tinta de
   atingere + fara marirea automata din iOS).
   ============================================================================ */
@media (min-width: 768px) {
  .checkout-section #checkoutForm .form-control,
  .checkout-section #checkoutForm .form-select {
    min-height: 31px !important;
    padding: 3px 10px !important;
    font-size: 13px !important;
  }
  .checkout-section #checkoutForm .input-group-text {
    min-height: 31px !important;
    min-width: 31px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
  }
  .checkout-section #checkoutForm .select2-container--default .select2-selection--single {
    height: 31px !important;
    font-size: 13px !important;
  }
  .checkout-section #checkoutForm .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px !important;
    line-height: 29px;
  }
  .checkout-section #checkoutForm .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 29px !important;
  }
  .checkout-section #checkoutForm .select2-icon-prepend {
    min-height: 31px !important;
    width: 31px;
    font-size: 13px !important;
  }
  .checkout-section #checkoutForm textarea.form-control { min-height: 58px !important; }
  .checkout-section #checkoutForm .btn-infocui-lookup { padding: 4px 10px !important; font-size: 13px !important; }

  /* Cuponul din sumar: aceeasi inaltime ca restul campurilor */
  .checkout-section #checkoutCouponForm .form-control,
  .checkout-section #checkoutCouponForm .input-group-text,
  .checkout-section #checkoutCouponForm .btn {
    min-height: 31px !important;
    font-size: 12.5px !important;
  }
  .checkout-section #checkoutCouponForm .btn { padding: 4px 12px !important; }

  /* Randuri, etichete si carduri mai stranse — degeaba scazi casuta daca
     ramane acelasi gol intre randuri. */
  .checkout-section #checkoutForm .row.g-3 { --bs-gutter-y: 0.62rem; }
  .checkout-section #checkoutForm .row.g-2 { --bs-gutter-y: 0.48rem; }
  .checkout-section #checkoutForm .row.g-4 { --bs-gutter-y: 0.85rem; }
  /* `checkout.css` (comun) fixeaza marimea cu `!important` (0.72rem), asa ca
     aici e nevoie de aceeasi greutate ca sa putem cobori. */
  .checkout-section #checkoutForm .form-label {
    font-size: 10.6px !important;
    margin-bottom: 3px !important;
    letter-spacing: .045em;
  }
  .checkout-section .checkout-step { padding: .8rem 1rem; margin-bottom: .75rem !important; }
  .checkout-section .checkout-step-header { margin-bottom: .6rem; padding-bottom: .45rem; }
  .checkout-section .checkout-step-number { width: 24px !important; height: 24px !important; font-size: 11px !important; }
  .checkout-section .checkout-step-title { font-size: 13px !important; }

  /* Date facturare: etichetele comutatoarelor erau cat un titlu */
  .checkout-section #checkoutForm .form-switch .form-check-label { font-size: 13px; }
  .checkout-section #checkoutForm .form-switch.mb-3 { margin-bottom: 0.6rem !important; }

  /* Cos: cuponul si campurile de pe pagina coșului la aceeasi inaltime */
  .cart-section .cart-coupon .form-control,
  .cart-section .cart-coupon .btn {
    min-height: 34px !important;
    height: 34px;
    padding: 4px 12px !important;
    font-size: 13.5px !important;
  }
  .cart-section .cart-summary .form-control,
  .cart-section .cart-summary .form-select {
    min-height: 34px !important;
    padding: 5px 11px !important;
    font-size: 13.5px !important;
  }
}

/* ==========================================================================
   BREADCRUMBS „A LA GRECU" — pasul 2: iconita pe fiecare nivel + pagina
   curenta ca pastila PLINA (cerere user, 22 sep 2026, dupa modelul de la
   Porcusorul Pofticios, dar in paleta noastra si cu meandrul pastrat).
   --------------------------------------------------------------------------
   Ce se schimba fata de blocul de mai sus:
     · fiecare nivel primeste o iconita desenata (mask SVG, colorata din paleta)
       aleasa dupa `data-crumb` (home|shop|category|product|page), emis de
       Seo::renderBreadcrumbs — deci nu ghicim dupa pozitie;
     · pagina curenta nu mai e un chip palid, ci o pastila plina in albastrul
       marcii, cu text alb — se vede imediat unde esti;
     · intrarea in scena, in cascada, discreta.
   Ce NU se schimba: separatorul ramane cheia de MEANDRU (blocul de mai sus),
   cu oglindirea si valul de la hover. Bara rotunda ramane a temei.
   Iconita veche de „acasa" era pusa cu fontul lucide pe :first-child; o
   inlocuim cu mask, altfel ar fi iesit doua iconite pe acelasi nivel.
   ========================================================================== */
:root {
    --lg-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");
    --lg-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");
    --lg-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");
    --lg-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");
    --lg-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");
}

/* iconita pe fiecare nivel — forma din mask, culoarea din text */
body nav[aria-label="breadcrumb"] .breadcrumb-item > a::before,
body nav[aria-label="breadcrumb"] .breadcrumb-item.active::before {
    content: '' !important;
    flex: 0 0 auto;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 0;
    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 > a::before { color: var(--color-accent); }
body nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover::before { color: #FFFFFF !important; }

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(--lg-ic-home); mask-image: var(--lg-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(--lg-ic-shop); mask-image: var(--lg-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(--lg-ic-category); mask-image: var(--lg-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(--lg-ic-product); mask-image: var(--lg-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(--lg-ic-page); mask-image: var(--lg-ic-page);
}

/* PAGINA CURENTA — pastila plina in albastrul egeean, text alb */
body nav[aria-label="breadcrumb"] .breadcrumb-item.active {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 88%, #000),
        var(--color-primary)) !important;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary) 90%, transparent) !important;
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* intrarea in scena, in cascada */
@keyframes lgCrumbIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
body nav[aria-label="breadcrumb"] .breadcrumb-item {
    animation: lgCrumbIn .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(n+4) { animation-delay: .17s; }

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

@media (max-width: 575.98px) {
    body nav[aria-label="breadcrumb"] .breadcrumb-item > a::before,
    body nav[aria-label="breadcrumb"] .breadcrumb-item.active::before { width: 13px; height: 13px; }
    body nav[aria-label="breadcrumb"] .breadcrumb-item.active { padding: 4px 9px !important; max-width: 22ch; }
}

/* ==========================================================================
   BREADCRUMBS — MEANDRUL TRECE PE ::after (22 sep 2026)
   --------------------------------------------------------------------------
   De ce: separatorul de meandru statea pe ::before-ul nivelului URMATOR
   (sectiunea 23, scrisa cu `!important` peste tot), exact acolo unde vrem acum
   iconita nivelului. Un element are UN singur ::before, deci cele doua reguli
   se bateau pe acelasi loc si castiga separatorul: pagina curenta primea o
   cheie de meandru in loc de iconita ei, chiar in interiorul pastilei.
   Solutia: separatorul se muta pe ::after-ul nivelului ANTERIOR — asa sta
   INTRE pastile, iar ::before ramane liber pentru iconita. Cheile se oglindesc
   in continuare alternativ, ca sirul sa se citeasca drept banda continua.
   ========================================================================== */

/* 0. stingem divizorul „/" pe care Bootstrap il pune singur pe ::before-ul
      fiecarui nivel (`--bs-breadcrumb-divider`). Fara regula asta apare „/" pe
      langa meandru — verificat pe 22 sep 2026, dupa ce curatenia a scos vechile
      reguli care il acopereau din intamplare. Nivelul CURENT nu intra aici:
      la el ::before e iconita. */
body nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item:not(.active)::before {
    content: none !important;
}

/* 3. separatorul, mutat pe ::after-ul fiecarui nivel care nu e ultimul */
body nav[aria-label="breadcrumb"] .breadcrumb-item:not(:last-child)::after {
    content: '' !important;
    flex: 0 0 auto;
    display: inline-block !important;
    width: 18px;
    height: 14px;
    margin: 0 .5rem;
    background-color: color-mix(in srgb, var(--color-accent) 78%, transparent);
    -webkit-mask-image: var(--lg-key-sm);  mask-image: var(--lg-key-sm);
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
    -webkit-mask-position: center;   mask-position: center;
    -webkit-mask-size: contain;      mask-size: contain;
    transition: background-color .3s ease, opacity .3s ease;
}
/* o cheie din doua, oglindita → banda greceasca continua */
body nav[aria-label="breadcrumb"] .breadcrumb-item:nth-child(even):not(:last-child)::after {
    transform: scaleX(-1);
}
/* valul de la hover, pastrat: cheile se aprind pe rand */
body nav[aria-label="breadcrumb"] .breadcrumb:hover .breadcrumb-item:not(:last-child)::after {
    animation: lgMeanderWave 1.1s ease-in-out;
}
body nav[aria-label="breadcrumb"] .breadcrumb:hover .breadcrumb-item:nth-child(even):not(:last-child)::after {
    animation-name: lgMeanderWaveFlip;
}
body nav[aria-label="breadcrumb"] .breadcrumb:hover .breadcrumb-item:nth-child(2):not(:last-child)::after { animation-delay: .10s; }
body nav[aria-label="breadcrumb"] .breadcrumb:hover .breadcrumb-item:nth-child(3):not(:last-child)::after { animation-delay: .20s; }

@media (prefers-reduced-motion: reduce) {
    body nav[aria-label="breadcrumb"] .breadcrumb:hover .breadcrumb-item:not(:last-child)::after { animation: none; }
}

@media (max-width: 575.98px) {
    body nav[aria-label="breadcrumb"] .breadcrumb-item:not(:last-child)::after {
        width: 15px; height: 12px; margin: 0 .32rem;
    }
    body nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item.active::before {
        width: 13px !important; height: 13px !important;
    }
}

/* ==========================================================================
   BREADCRUMBS — CAPSULA SI STARILE PLINE (22 sep 2026, cerere user:
   „sa fie incercuit fain, sa se vada; la hover e sec de tot; cele active sa
   aiba si icoana cu alb")
   --------------------------------------------------------------------------
   DE CE BLOCUL ASTA EXISTA — doua lucruri gasite cu masuratoarea, nu ghicite:

   1. Capsula temei (blocul 1, ~linia 1239) era MOARTA. Blocul 22
      („rescris 2026-07-16, fara capsula si fara pastile", ~linia 4524) are
      EXACT acelasi selector si aceeasi specificitate (0,2,2), ambele cu
      `!important` — la egalitate decide ordinea in fisier, deci castiga cel de
      jos: `background: transparent`, `border: 0`, `box-shadow: none`,
      `border-radius: 0`, `padding: 0`. De aceea bara se masura complet
      transparenta, fara rama si fara umbra. Reparatia nu poate fi decat tot la
      final de fisier — specificitatea e deja la maxim util.

   2. Hover-ul era „sec" fiindcA pastila lui era doar `primary 10%` (aproape
      invizibila pe fundal deschis), iar iconita primise `#FFFFFF` — alb pe
      aproape-alb, adica iconita DISPAREA la hover. Acum hover-ul e o pastila
      PLINA in albastrul marcii: textul si iconita albe au pe ce sta
      (alb pe #0A6C90 = 6,4:1, mult peste pragul de 4,5:1).

   Paginile cu BANDA COLORATA (blog, despre, contact, shop, categorie, pagini)
   au propriul „sistem de zone": acolo textul e alb pe albastru, deci capsula
   deschisa ar fi ilizibila. Pentru ele, mai jos, o varianta translucida:
   capsula de sticla alba, iar pagina curenta = pastila ALBA cu text albastru.
   ========================================================================== */

/* ---------- 1. CAPSULA (pagini pe fundal deschis) ------------------------ */
body nav[aria-label="breadcrumb"] .breadcrumb {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: .1rem !important;
    width: fit-content;
    max-width: 100%;
    padding: .34rem .5rem !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,
        var(--color-white) 0%,
        color-mix(in srgb, var(--color-accent) 6%, var(--color-white)) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--color-accent) 26%, transparent) !important;
    box-shadow:
        0 8px 20px -14px color-mix(in srgb, var(--color-primary) 55%, transparent),
        inset 0 1px 0 var(--color-white) !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
body nav[aria-label="breadcrumb"] .breadcrumb::-webkit-scrollbar { display: none; }

/* ---------- 2. NIVELELE PARINTE: pastila discreta ------------------------ */
body nav[aria-label="breadcrumb"] .breadcrumb-item > a {
    display: inline-flex !important;
    align-items: center;
    gap: .34rem !important;
    padding: .28rem .7rem !important;
    border-radius: 999px !important;
    color: var(--color-text-secondary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color .18s ease, background-color .18s ease,
                box-shadow .18s ease, transform .18s ease !important;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item > a::before { color: var(--color-accent); }

/* ---------- 3. HOVER: pastila PLINA, se ridica, umbra sub ea ------------- */
body nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover,
body nav[aria-label="breadcrumb"] .breadcrumb-item > a:focus-visible {
    color: var(--color-white) !important;
    /* gradientul merge intre DOUA nuante inchise de albastru (nu porneste din
       turcoaz): alb pe #0A6C90 = 5,9:1, pe #075067 = 8:1 — amandoua peste 4,5:1.
       Cu turcoaz la un capat, albul ar fi cazut la 2,9:1, adica text greu de citit. */
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 100%) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--color-primary) 75%, transparent) !important;
}
/* cheia de meandru de dupa nivelul survolat se aprinde — sugereaza directia */
body nav[aria-label="breadcrumb"] .breadcrumb-item:hover:not(:last-child)::after {
    background-color: var(--color-accent) !important;
    opacity: 1 !important;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item > a:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px;
}
/* iconita devine alba — acum are pe ce sta (pastila plina), nu pe fundal deschis */
body nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover::before,
body nav[aria-label="breadcrumb"] .breadcrumb-item > a:focus-visible::before {
    color: var(--color-white) !important;
    background-color: currentColor !important;
    transform: none !important;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item > a:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 8px -6px color-mix(in srgb, var(--color-primary) 70%, transparent) !important;
}

/* ---------- 4. PAGINA CURENTA: pastila plina, cu inel ------------------- */
body nav[aria-label="breadcrumb"] .breadcrumb-item.active {
    box-shadow:
        0 8px 18px -9px color-mix(in srgb, var(--color-primary) 85%, transparent),
        0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent) !important;
}
body nav[aria-label="breadcrumb"] .breadcrumb-item.active::before,
body nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item.active::before {
    background-color: var(--color-white) !important;
    opacity: 1 !important;
}

/* ---------- 5. VARIANTA PE BANDA COLORATA (hero-uri) -------------------- */
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb {
    background: color-mix(in srgb, var(--color-white) 16%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--color-white) 32%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-white) 28%, transparent) !important;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    padding: .34rem .5rem !important;
    border-radius: 999px !important;
}
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a:hover {
    color: var(--color-white) !important;
    background: color-mix(in srgb, var(--color-white) 24%, transparent) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}
/* pagina curenta pe banda: pastila ALBA, text si iconita in albastrul marcii */
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active {
    background: var(--color-white) !important;
    background-image: none !important;
    color: var(--color-primary-dark) !important;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45) !important;
    text-shadow: none !important;
}
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active::before,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active::before,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active::before,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active::before,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active::before,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item.active::before {
    background-color: var(--color-primary-dark) !important;
}
/* meandrul dintre pasi, pe banda colorata: alb, nu turcoaz (se pierdea) */
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item:not(:last-child)::after,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item:not(:last-child)::after,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item:not(:last-child)::after,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item:not(:last-child)::after,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item:not(:last-child)::after,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item:not(:last-child)::after {
    background-color: color-mix(in srgb, var(--color-white) 70%, transparent) !important;
}
/* iconitele nivelelor parinte pe banda — albe, ca textul lor */
body .blog-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a::before,
body .contact-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a::before,
body .about-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a::before,
body .page-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a::before,
body .shop-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a::before,
body .category-hero nav[aria-label="breadcrumb"] .breadcrumb-item > a::before {
    background-color: currentColor !important;
    background-image: none !important;
    color: inherit !important;
}

/* ---------- 6. ecrane mici ---------------------------------------------- */
@media (max-width: 575.98px) {
    /* pe telefon NU derulam orizontal: pastila nivelului curent ramanea taiata
       la marginea capsulei si omul nu vedea unde e. Bara se rupe pe doua randuri,
       cu colturi mai potolite ca sa arate a caseta, nu a pastila intinsa. */
    body nav[aria-label="breadcrumb"] .breadcrumb {
        flex-wrap: wrap !important;
        overflow: visible !important;
        row-gap: .25rem !important;
        border-radius: 18px !important;
        padding: .32rem .45rem !important;
    }
    body nav[aria-label="breadcrumb"] .breadcrumb-item > a { padding: .24rem .55rem !important; }
    body nav[aria-label="breadcrumb"] .breadcrumb-item.active { max-width: 100% !important; }
}

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

/* ==========================================================================
   CASUTELE DE LA FINALIZARE — mai mici si mai ingrijite (user, 22 sep 2026:
   „mai mici campurile, mai simpatice")
   --------------------------------------------------------------------------
   Ce face blocul, pe scurt: colturi de 9px (in loc de pastila latita de 14px a
   temei), un fundal abia-abia mai rece decat albul ca sa se citeasca drept camp,
   casuta iconitei lipita de camp (acelasi fundal, fara linie intre ele) si un
   inel turcoaz la atingere. Toate culorile din paleta, zero hex fix.
   Doar pe ecrane late: pe telefon campurile raman mari, ca sa se poata atinge.
   ========================================================================== */
@media (min-width: 768px) {
  .checkout-section #checkoutForm .form-control,
  .checkout-section #checkoutForm .form-select,
  .checkout-section #checkoutForm .select2-container--default .select2-selection--single {
    border-radius: 9px !important;
    background-color: color-mix(in srgb, var(--color-accent) 4%, var(--color-white)) !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
  }
  .checkout-section #checkoutForm .form-control:hover,
  .checkout-section #checkoutForm .form-select:hover {
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent) !important;
  }
  .checkout-section #checkoutForm .form-control:focus,
  .checkout-section #checkoutForm .form-select:focus {
    background-color: var(--color-white) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
  }

  /* casuta iconitei: acelasi fundal ca al campului, fara linia dintre ele —
     altfel controlul se citeste ca doua bucati lipite */
  .checkout-section #checkoutForm .input-group-text {
    background-color: color-mix(in srgb, var(--color-accent) 7%, var(--color-white)) !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
    border-right: 0 !important;
    border-radius: 9px 0 0 9px !important;
    color: var(--color-primary) !important;
  }
  .checkout-section #checkoutForm .input-group > .input-group-text + .form-control {
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .checkout-section #checkoutForm .input-group:focus-within .input-group-text {
    border-color: var(--color-accent) !important;
    background-color: color-mix(in srgb, var(--color-accent) 12%, var(--color-white)) !important;
  }

  /* eticheta: mai mica, rarefiata, in albastrul potolit al temei */
  .checkout-section #checkoutForm .form-label {
    color: color-mix(in srgb, var(--color-text-secondary) 85%, transparent) !important;
    text-transform: uppercase;
    font-weight: 700 !important;
  }

  /* cardul pasului: colturi si umbra mai discrete, pe masura campurilor */
  .checkout-section .checkout-step {
    border-radius: 12px !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--color-primary) 7%, transparent) !important;
  }
}