:root{
      --white:#ffffff;
      --green:#194b30;
      --green2:#123c27;
      --red:#c61d22;
      --section-green-dark:#194b30;
      --section-red-dark:#c61d22;
      --gold:#c7a35a;

      --ink:#0a2214;
      --muted: rgba(10,34,20,.78);

      --radius:22px;
      --radius2:30px;

      --stroke: rgba(10,34,20,.10);
      --shadow: 0 18px 60px rgba(10,34,20,.14);

      --maxW: 1200px;
      --pad: 18px;

      --heroPattern: url("/IMAGINI/background2.svg");

      /* Switch limba (global, ca sa-l putem centra perfect cu tags) */
      --lang-h: 32px;
      --lang-w: 60px;
      --lang-p: 3px;

      /* Nav accents */
      --nav-gasesti: rgba(198,29,34, .92);
      --nav-gasesti-hover: rgba(198,29,34, .96);
      --nav-gasesti-active-bg: rgba(198,29,34, .06);
      --nav-gasesti-active-border: rgba(198,29,34, .22);

      --nav-retete: rgba(25,75,48, .92);
      --nav-retete-hover: rgba(25,75,48, .96);
      --nav-retete-active-bg: rgba(25,75,48, .06);
      --nav-retete-active-border: rgba(25,75,48, .22);
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; }

    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
      color: var(--ink);

      background-color: #f7faf7;
      background-image: var(--heroPattern);
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
      background-repeat: no-repeat;

      scroll-snap-type: y proximity;
      scroll-behavior: auto;
      overflow-x:hidden;
      overflow-y:auto;
    }

body::before{ content:none; }

    body.autoScroll{ scroll-snap-type: none !important; }

    a{ color: inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }
    button{ font: inherit; }
    .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    /* Sectiuni */
    section{
      min-height: 100svh;
      height: auto;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      position: relative;
      overflow: clip;
      z-index:1;
    }
    .container{
      width: min(var(--maxW), 100%);
      min-height: 100svh;
      height: auto;
      margin: 0 auto;
      padding: var(--pad);
      position: relative;
      z-index: 2;
    }

    /* Themes */
    /* Acasă și Rețete continuă aceeași imagine globală din body folosită
       de Produse, Noutăți și Unde ne găsești. */
    .theme-green{
      background: transparent;
      isolation: isolate;
    }
    .theme-green::before{ content:none; }

    /* Secțiunea „De ce” lasă vizibil același fundal verde fix al paginii. */
    .theme-red{
      background: transparent;
      isolation: isolate;
    }
    .theme-red::before{ content:none; }

/* Pagini "deschise": folosesc fundalul global (mai inchis cu tenta verde) din body,
   fara overlay pe section => dispare linia dintre pagini */
.theme-white{
  background: transparent;
}
.theme-white::before{
  content: none !important; /* elimina pseudo-elementul care produce "cusatura" */
}

    /* Card */
    .card{
      min-height: calc(100svh - var(--pad) - var(--pad));
      height: auto;
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.88);
      box-shadow: var(--shadow);
      overflow:hidden;
      position: relative;
      z-index:2;
    }
    .theme-white .card{
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.58);
      backdrop-filter: blur(8px);
    }

    /* Reusable */
    .cardGlassDark{
      background: rgba(0,0,0,.10) !important;
      border-color: rgba(255,255,255,.16) !important;
    }
    .panelGlass{
      background: rgba(255,255,255,.10) !important;
      border-color: rgba(255,255,255,.18) !important;
    }

    /* Desktop menu */
    .sidenav{
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 60;
      width: 196px;
      max-height: calc(100vh - 32px);
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 10px;
      border-radius: 22px;
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(10,34,20,.10);
      box-shadow: 0 18px 60px rgba(10,34,20,.18);
      backdrop-filter: blur(10px);
    }

    /* === LIMBA (CENTRAT PERFECT) === */
    .langToggle{
      width: 100%;
      display:flex;
      align-items:center;
      justify-content:center; /* IMPORTANT: centrare pe latime */
      gap: 10px;
      padding: 8px 10px;
      margin: 2px auto 10px;
      border-radius: 16px;
      background: rgba(10,34,20,.04);
      border: 1px solid rgba(10,34,20,.08);
      user-select:none;
    }
    .langTag{
      width: 28px;
      height: var(--lang-h);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 12px;
      font-weight: 1100;
      letter-spacing: .6px;
      color: rgba(10,34,20,.65);
      cursor:pointer;
      line-height: 1;
    }
    .langTag.active{
      color: rgba(10,34,20,.92);
    }
    .drawer .langToggle{
      margin: 2px 0 10px;
      background: rgba(10,34,20,.03);
    }

    /* RO/EN language switch - FIX (knob centrat pe orice telefon) */
    .langSwitch{
      width: var(--lang-w);
      height: var(--lang-h);
      position: relative;
      display: inline-block;
      flex: 0 0 auto;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .langSwitch input{
      position: absolute;
      inset: 0;
      opacity: 0;
      margin: 0;
      cursor: pointer;
      z-index: 2;
    }
    .langSlider{
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: rgba(10,34,20,.16);
      box-shadow:
        inset 0 0 0 1px rgba(10,34,20,.14),
        0 12px 28px rgba(10,34,20,.12);
      transition: background .16s ease, box-shadow .16s ease;
      pointer-events: none;
    }
    .langSlider::before{
      content: "";
      position: absolute;
      top: var(--lang-p);
      bottom: var(--lang-p);
      left: var(--lang-p);
      width: calc(var(--lang-h) - (var(--lang-p) * 2));
      border-radius: 999px;
      background: rgba(255,255,255,.98);
      box-shadow:
        inset 0 0 0 1px rgba(10,34,20,.10),
        0 16px 40px rgba(10,34,20,.18);
      transform: translateX(0);
      transition: transform .16s ease;
      will-change: transform;
    }
    .langSwitch input:checked + .langSlider{
      background: rgba(198,29,34,.22);
      box-shadow:
        inset 0 0 0 1px rgba(198,29,34,.30),
        0 12px 28px rgba(198,29,34,.10);
    }
    .langSwitch input:checked + .langSlider::before{
      transform: translateX(calc(var(--lang-w) - var(--lang-h)));
    }
    .langSwitch input:focus-visible + .langSlider{
      outline: 3px solid rgba(199,163,90,.55);
      outline-offset: 3px;
    }
    .langToggle:hover .langSlider{
      box-shadow:
        inset 0 0 0 1px rgba(199,163,90,.26),
        0 12px 28px rgba(10,34,20,.12);
    }

    .navList{ display:flex; flex-direction:column; gap:8px; }
    .navLink{
      display:flex; align-items:center; gap:10px;
      padding: 10px 12px;
      border-radius: 16px;
      background: rgba(10,34,20,.04);
      border: 1px solid rgba(10,34,20,.08);
      font-weight: 1100;
      color: var(--ink);
      transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
      user-select:none;
    }
    .navLink i{
      width: 18px;
      color: var(--green2);
      filter: drop-shadow(0 8px 18px rgba(10,34,20,.10));
    }
    .navLink:hover{
      transform: translateY(-1px);
      border-color: rgba(199,163,90,.26);
      background: rgba(199,163,90,.10);
    }
    .navLink.active{
      background: rgba(198,29,34,.10);
      border-color: rgba(198,29,34,.22);
    }
    .navLink.active i{ color: var(--red); }

    /* Nav accents: gasesti + retete */
    .navLink[data-target="gasesti"],
    .drawer .navLink[href="#gasesti"]{
      background: var(--nav-gasesti);
      border-color: var(--nav-gasesti);
      color: #fff;
    }
    .navLink[data-target="gasesti"] i,
    .drawer .navLink[href="#gasesti"] i{ color: currentColor; }
    .navLink[data-target="gasesti"].active{
      background: var(--nav-gasesti-active-bg);
      border-color: var(--nav-gasesti-active-border);
      color: var(--red);
    }
    .navLink[data-target="gasesti"].active i{ color: currentColor; }
    .navLink[data-target="gasesti"]:hover{
      background: var(--nav-gasesti-hover);
      border-color: var(--nav-gasesti-hover);
      color: #fff;
    }

    .navLink[data-target="retete"],
    .drawer .navLink[href="#retete"]{
      background: var(--nav-retete);
      border-color: var(--nav-retete);
      color: #fff;
    }
    .navLink[data-target="retete"] i,
    .drawer .navLink[href="#retete"] i{ color: currentColor; }
    .navLink[data-target="retete"].active{
      background: var(--nav-retete-active-bg);
      border-color: var(--nav-retete-active-border);
      color: rgba(25,75,48,.98);
    }
    .navLink[data-target="retete"].active i{ color: currentColor; }
    .navLink[data-target="retete"]:hover{
      background: var(--nav-retete-hover);
      border-color: var(--nav-retete-hover);
      color: #fff;
    }

    /* Legătura către producător păstrează forma rotunjită și verdele mărcii. */
    .producerNav{
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(25,75,48,.14);
    }
    .producerCaption{
      margin: 0 0 8px;
      color: #315c40;
      font-size: .875rem;
      font-weight: 500;
      line-height: 1.35;
      text-align: center;
    }
    .producerBtn{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 999px;
      background: linear-gradient(135deg, #316c44, #194b30);
      color: #fff;
      -webkit-text-fill-color: #fff;
      color-scheme: only light;
      box-shadow: 0 5px 14px rgba(25,75,48,.14), inset 0 1px 0 rgba(255,255,255,.12);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.25;
      text-align: center;
      text-decoration: none;
      touch-action: manipulation;
      transition: box-shadow .16s ease, border-color .16s ease;
    }
    .producerBtn:visited{
      color: #fff;
    }
    .producerBtn:hover{
      border-color: rgba(199,163,90,.65);
      box-shadow: 0 7px 18px rgba(25,75,48,.22), inset 0 1px 0 rgba(255,255,255,.16);
    }
    .producerBtn:focus-visible{
      outline: 2px solid #194b30;
      outline-offset: 3px;
    }
    .producerBtn:active{
      box-shadow: inset 0 2px 5px rgba(0,0,0,.18);
    }
    .producerBtn span{
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .producerExternalIcon{
      flex: 0 0 16px;
      color: inherit;
    }
    @media (prefers-reduced-motion: reduce){
      .producerBtn{ transition: none; }
    }

    /* Mobile button */
    .floatingMenuBtn{
      position: fixed;
      right: calc(16px + env(safe-area-inset-right));
      bottom: calc(16px + env(safe-area-inset-bottom));
      z-index: 55;
      width: 54px;
      height: 54px;
      border-radius: 999px;
      border: 1px solid rgba(10,34,20,.12);
      background: rgba(255,255,255,.92);
      box-shadow: 0 18px 60px rgba(10,34,20,.18);
      display:none;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .floatingMenuBtn i{ color: var(--green2); font-size: 18px; }

    .drawerBackdrop{
      position:fixed; inset:0;
      background: rgba(0,0,0,.30);
      backdrop-filter: blur(6px);
      z-index: 80;
      display:none;
      opacity:0;
      transition: opacity .18s ease;
    }
    .drawer{
      position:fixed;
      right: calc(12px + env(safe-area-inset-right));
      bottom: calc(12px + env(safe-area-inset-bottom));
      top: auto;

      width: min(78vw, 260px);
      max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      overflow-y: auto;
      overscroll-behavior: contain;
      border-radius: 22px;
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(10,34,20,.10);
      box-shadow: 0 18px 60px rgba(10,34,20,.20);
      padding: 10px;
      z-index: 90;

      display:none;
      opacity:0;
      transform: translateY(10px) scale(.98);
      transition: transform .18s ease, opacity .18s ease;
    }
    .drawer.open{ opacity:1; transform: translateY(0) scale(1); }
    .drawerBackdrop.open{ opacity:1; }

    .drawerTop{ display:flex; justify-content:flex-end; margin-bottom: 8px; }
    .closeBtn{
      width:38px; height:38px;
      border-radius: 14px;
      border:1px solid rgba(10,34,20,.12);
      background: rgba(10,34,20,.04);
      cursor:pointer;
      font-weight: 1100;
      color: var(--ink);
    }
    .drawer .navLink{ padding: 9px 10px; border-radius: 14px; }

    /* HERO */
    .heroGrid{
      height: 100%;
      display:grid;
      grid-template-columns: 0.95fr 1.1fr;
      gap: 16px;
      padding: 18px;
      align-items:center;
      position: relative;
      overflow: visible;
    }
    .heroLeft{
      display:flex;
      flex-direction:column;
      gap: 14px;
      justify-content:center;
      color: #fff;
      padding: 6px;
      max-width: 760px;
      position: relative;
      z-index: 1;
    }
    .brandRow{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap: 12px;
      flex-wrap:wrap;
      position: relative;
      overflow: visible;
    }
    .logoMain{ 
        width: 160px; filter: 
        drop-shadow(0 16px 30px rgba(0,0,0,.85)); 
        
    }
    .logoLink{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius: 18px;
      padding: 4px;
    }
    .logoLink .logoMain{
      transition: transform .18s ease, filter .18s ease;
      transform-origin: left center;
      cursor: pointer;
    }
    .logoLink:hover .logoMain{
      transform: scale(1.02);
      filter: drop-shadow(0 20px 40px rgba(0,0,0,.98));
    }
    .logoLink:focus-visible{
      outline: 3px solid rgba(199,163,90,.60);
      outline-offset: 6px;
    }

    .packshotMini{
      display:none;
      width: 210px;
      filter: drop-shadow(0 16px 28px rgba(0,0,0,.28));
      position: relative;
      z-index: 2;
      transition: transform .18s ease, z-index .18s ease;
      transform-origin: center;
    }
    .packshotMini.is-front{ z-index: 50; transform: scale(1.20); }

    .pillBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 10px 14px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.16);
      box-shadow: 0 12px 28px rgba(0,0,0,.18);
      transition: transform .14s ease, border-color .14s ease, background .14s ease;
      cursor:pointer;
      font-weight: 1100;
      color: #fff;
      white-space:nowrap;
    }
    .pillBtn:hover{
      transform: translateY(-1px);
      border-color: rgba(199,163,90,.45);
      background: rgba(255,255,255,.20);
    }

    .heroHeadline{
      margin:0;
      font-size: clamp(28px, 4.3vw, 54px);
      line-height: 1.02;
      letter-spacing: -0.6px;
      font-weight: 1200;
  /* Contur negru (merge peste tot) */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.90),
     1px -1px 0 rgba(0,0,0,.90),
    -1px  1px 0 rgba(0,0,0,.90),
     1px  1px 0 rgba(0,0,0,.90),
     0px  2px 10px rgba(0,0,0,.25); /* umbră fină (opțional) */
    }
    .heroHeadline .gold{ color: var(--gold); }
.heroSub{
  margin:0;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  max-width: 70ch;

  /* Contur negru (merge peste tot) */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.90),
     1px -1px 0 rgba(0,0,0,.90),
    -1px  1px 0 rgba(0,0,0,.90),
     1px  1px 0 rgba(0,0,0,.90),
     0px  2px 10px rgba(0,0,0,.25); /* umbră fină (opțional) */
}


    .bullets{
      display:flex;
      flex-direction:column;
      gap: 10px;
      margin-top: 4px;
      max-width: 640px;
    }
    .bulletLink{
      display:flex;
      gap: 12px;
      align-items:center;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 16px 44px rgba(0,0,0,.18);
      backdrop-filter: blur(10px);
      cursor:pointer;
      user-select:none;
      transition: transform .14s ease, border-color .14s ease, background .14s ease;
    }
    .bulletLink:hover{
      transform: translateY(-1px);
      border-color: rgba(199,163,90,.40);
      background: rgba(0,0,0,.22);
    }
    .bulletLink:focus-visible{
      outline: 3px solid rgba(199,163,90,.60);
      outline-offset: 4px;
    }
    .bulletLink img{ width: 49px; height: 49px; }
    .bulletLink strong{
      font-size: 16px;
      font-weight: 1200;
      letter-spacing:.2px;
      color: #fff;
        /* Contur negru (merge peste tot) */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.90),
     1px -1px 0 rgba(0,0,0,.90),
    -1px  1px 0 rgba(0,0,0,.90),
     1px  1px 0 rgba(0,0,0,.90),
     0px  2px 10px rgba(0,0,0,.25); /* umbră fină (opțional) */
    }
    .bulletLink small{
      display:block;
      margin-top: 2px;
      font-weight: 900;
      color: rgba(255,255,255,.88);
    }

    .heroRight{
      display:flex;
      align-items:center;
      justify-content:center;
      position: relative;
      z-index: 2;
      overflow: visible;
    }

    /* HERO - caserola 3D */
    .packStage{
      width: min(620px, 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      perspective: 1200px;
      position: relative;
    }
    .packStage::after{
      content:"";
      position:absolute;
      left: 50%;
      top: 60%;
      width: 86%;
      height: 34%;
      transform: translateX(-50%);
      background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent 70%);
      filter: blur(18px);
      opacity: 0 !important;
      pointer-events:none;
    }

    .pack3d{
      --w: clamp(280px, 52vw, 620px);
      --h: clamp(240px, 36vw, 400px);
      --d: 72px;

      width: var(--w);
      height: var(--h);
      position: relative;
      transform-style: preserve-3d;
      transform: translateZ(0) rotateY(-14deg) rotateX(6deg);
      will-change: transform, opacity;
      filter: drop-shadow(0 18px 55px rgba(0,0,0,.22)) !important;
      transition: opacity .18s ease, transform .18s ease;
    }
    .pack3d.fadeOut{
      opacity: 1;
      transform: translateZ(0) rotateY(-14deg) rotateX(6deg) scale(.985);
    }
    .packFace{
      position:absolute;
      left: 0; top: 0;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 26px;
      overflow:hidden;
    }
    .packFace.front{
      transform: translateZ(calc(var(--d) / 2));
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-color: transparent;
    }
    .packFace.back{
      transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
      background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.10));
      border-radius: 20px;
    }
    .packFace.left,
    .packFace.right{
      width: var(--d);
      height: 100%;
      left: calc(50% - (var(--d) / 2));
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.18));
    }
    .packFace.right{ transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
    .packFace.left{  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }

    .packFace.top,
    .packFace.bottom{
      width: 100%;
      height: var(--d);
      top: calc(50% - (var(--d) / 2));
      border-radius: 14px;
      background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(0,0,0,.10));
    }
    .packFace.top{    transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
    .packFace.bottom{ transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

    .packFace.front::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(115deg, rgba(255,255,255,.18), transparent 45%, rgba(0,0,0,.10));
      opacity: .06 !important;
      pointer-events:none;
    }

    @keyframes heroPackFloat{
      0%   { transform: rotateY(-18deg) rotateX(8deg) translateY(0px); }
      50%  { transform: rotateY(-14deg) rotateX(9deg) translateY(-6px); }
      100% { transform: rotateY(-18deg) rotateX(8deg) translateY(0px); }
    }
    .pack3d.autoFloat{ animation: heroPackFloat 5.6s ease-in-out infinite; }

    #acasa .card{ background: transparent !important; overflow: visible !important; }
    .packshotWrap{
      position: relative;
      z-index: 2;
      transform-origin: 60% 50%;
      transition: transform .18s ease, z-index .18s ease;
    }
    @media (hover:hover) and (pointer:fine){
      .packshotWrap:hover,
      .packshotWrap:focus-within{
        z-index: 50;
        transform: scale(1.12);
      }
    }
    .packshotWrap.is-front{ z-index: 50; transform: scale(1.10); }
    .packshotWrap.is-front .pack3d{ animation-play-state: paused; }

    /* DE CE (rosu) */
    .whyShell{
      height: 100%;
      padding: 18px;
      display:grid;
      grid-template-rows: auto clamp(240px, 34vh, 320px) 1fr;
      gap: 14px;
      color: #fff;
    }
    .whyHeader h2{
      margin:0;
      font-size: clamp(22px, 3.1vw, 40px);
      letter-spacing:-.3px;
      line-height:1.05;
      font-weight: 1200;
  /* Contur negru (merge peste tot) */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.90),
     1px -1px 0 rgba(0,0,0,.90),
    -1px  1px 0 rgba(0,0,0,.90),
     1px  1px 0 rgba(0,0,0,.90),
     0px  2px 10px rgba(0,0,0,.25); /* umbră fină (opțional) */
    }
    .whyHeader p{
      margin: 10px 0 0;
      font-size: 14px;
      line-height: 1.65;
      font-weight: 900;
      color: rgba(255,255,255,.92);
      max-width: 110ch;
        /* Contur negru (merge peste tot) */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.90),
     1px -1px 0 rgba(0,0,0,.90),
    -1px  1px 0 rgba(0,0,0,.90),
     1px  1px 0 rgba(0,0,0,.90),
     0px  2px 10px rgba(0,0,0,.25); /* umbră fină (opțional) */
    }

    .whyTop{
      display:grid;
      grid-template-columns: 1fr 320px;
      gap: 14px;
      align-items:stretch;
      min-height:0;
    }
    .whyVideoCard{
      border-radius: 22px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.10);
      box-shadow: 0 18px 60px rgba(0,0,0,.22);
      position:relative;
      min-height: 200px;
      backdrop-filter: blur(12px);
    }
    .whyVideo{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      background: rgba(255,255,255,.10);
    }

    .whyDock{
      position:absolute;
      left: 50%;
      bottom: 12px;
      transform: translateX(-50%);
      display:flex;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.18);
      backdrop-filter: blur(10px);
      box-shadow: 0 16px 44px rgba(0,0,0,.18);
    }
    .whyIconBtn{
      width: 44px; height: 44px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition: transform .14s ease, background .14s ease, border-color .14s ease;
    }
    .whyIconBtn i{ color: rgba(255,255,255,.92); font-size: 16px; }
    .whyIconBtn:hover{ transform: translateY(-1px); border-color: rgba(199,163,90,.45); }
    .whyIconBtn.active{
      background: rgba(255,255,255,.18);
      border-color: rgba(199,163,90,.55);
      outline: 2px solid rgba(199,163,90,.28);
    }

    .whySide{
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.12);
      box-shadow: 0 18px 60px rgba(0,0,0,.18);
      padding: 6px;
      backdrop-filter: blur(10px);
      display:flex;
      flex-direction:column;
      gap: 3px;
      min-width:0;
      min-height:0;
    }
    .whySideBtn{
      width:100%;
      text-align:left;
      padding: 12px 12px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.10);
      cursor:pointer;
      transition: transform .14s ease, border-color .14s ease, background .14s ease;
      color:#fff;
    }
    .whySideBtn:hover{ transform: translateY(-1px); border-color: rgba(199,163,90,.44); }
    .whySideBtn.active{
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.26);
      outline: 2px solid rgba(199,163,90,.25);
    }
    .whySideBtn .t{ display:flex; align-items:center; gap:10px; font-weight: 1200; letter-spacing:.1px; }
    .whySideBtn small{
      display:block;
      margin-top: 6px;
      font-weight: 900;
      color: rgba(255,255,255,.88);
      line-height:1.25;
    }

    .whyContent{
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.96);
      color: var(--ink);
      box-shadow: 0 18px 60px rgba(0,0,0,.18);
      overflow:auto;
      padding: 14px;
      min-height:0;
    }
    .whyBlock{
      border-radius: 18px;
      border: 1px solid rgba(10,34,20,.10);
      background: rgba(255,255,255,.96);
      padding: 12px;
      margin-bottom: 10px;
    }
    .whyBlock h3{ margin:0 0 8px; font-size: 16px; font-weight: 1200; letter-spacing:-.2px; }
    .whyBlock p{ margin:0; font-size: 14px; line-height: 1.65; font-weight: 900; color: rgba(10,34,20,.78); }
    .whyList{ margin: 10px 0 0; padding-left: 18px; color: rgba(10,34,20,.78); font-weight: 900; line-height:1.6; font-size: 14px; }
    .whyContent::-webkit-scrollbar{ width:10px; }
    .whyContent::-webkit-scrollbar-thumb{
      background: rgba(10,34,20,.18);
      border-radius: 99px;
      border: 2px solid rgba(255,255,255,.80);
    }

    /* White sections */
    .secPad{
      height: 100%;
      padding: 18px;
      display:flex;
      flex-direction:column;
      gap: 14px;
      position:relative;
      z-index:2;
    }
    .secHeader{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 12px;
      padding: 0 4px;
    }
    .secHeader h2{
      margin:0;
      font-size: clamp(22px, 2.8vw, 38px);
      font-weight: 1200;
      letter-spacing:-.3px;
    }
    .secHeader p{
      margin: 8px 0 0;
      font-size: 14px;
      line-height: 1.65;
      font-weight: 900;
      color: var(--muted);
      max-width: 80ch;
    }

    .pillBtnWhite{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 10px 14px;
      border-radius: 999px;
      border:1px solid rgba(10,34,20,.12);
      background: rgba(255,255,255,.92);
      box-shadow: 0 12px 28px rgba(10,34,20,.10);
      cursor:pointer;
      font-weight: 1100;
      color: var(--ink);
      transition: transform .14s ease, border-color .14s ease, background .14s ease;
    }
    .pillBtnWhite:hover{
      transform: translateY(-1px);
      border-color: rgba(199,163,90,.30);
      background: rgba(255,255,255,.98);
    }
    .pillBtnWhite.primary{
      background: linear-gradient(135deg, rgba(198,29,34,.92), rgba(198,29,34,.78));
      border-color: rgba(198,29,34,.20);
      color:#fff;
    }

    .panel{
      border-radius: 26px;
      border: 1px solid rgba(10,34,20,.10);
      background: rgba(255,255,255,.90);
      box-shadow: 0 18px 60px rgba(10,34,20,.12);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height:0;
    }
    .panelHead{
      padding: 14px;
      border-bottom:1px solid rgba(10,34,20,.08);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
    }
    .panelHead h3{ margin:0; font-size: 18px; font-weight: 1200; letter-spacing:-.2px; }
    .panelHead p{ margin: 8px 0 0; font-size: 13px; line-height: 1.55; font-weight: 900; color: rgba(10,34,20,.72); }
    .panelBody{ padding: 14px; overflow:auto; min-height:0; }

    /* PRODUSE */
    .carousel{
      flex: 1;
      min-height:0;
      border-radius: 26px;
      border: 1px solid rgba(10,34,20,.10);
      background: rgba(255,255,255,.90);
      box-shadow: 0 18px 60px rgba(10,34,20,.12);
      position:relative;
      overflow:hidden;
      touch-action: pan-y;
    }
    .carouselTrack{
      height:100%;
      display:flex;
      align-items:center;
      transition: transform .28s ease;
      will-change: transform;
    }
    .slide{
      min-width: 100%;
      padding: 18px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-items:center;
    }
    .slideMedia{
      border-radius: 22px;
      overflow:hidden;
      border: 1px solid rgba(10,34,20,.10);
      background: rgba(255,255,255,.96);
      box-shadow: 0 16px 44px rgba(10,34,20,.12);
      position:relative;
      cursor:pointer;
    }
    .slideMedia img{
      width:100%;
      height: clamp(220px, 40vh, 440px);
      object-fit: contain;
      background: rgba(255,255,255,.96);
      padding: 10px;
    }
    .slideText{ padding: 6px; min-width:0; }
    .prodName{
      margin:0;
      font-size: clamp(18px, 2.2vw, 30px);
      font-weight: 1200;
      letter-spacing:-.3px;
      line-height:1.08;
    }
    .prodDesc{
      margin: 10px 0 0;
      font-size: 14px;
      line-height: 1.65;
      font-weight: 900;
      color: rgba(10,34,20,.78);
      max-width: 70ch;
    }
    .badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(10,34,20,.10);
      background: rgba(255,255,255,.92);
      font-size: 12px;
      font-weight: 1100;
      color: var(--ink);
    }
    .badgeDot{
      width:8px; height:8px; border-radius:99px;
      background: var(--gold);
      box-shadow: 0 0 0 4px rgba(199,163,90,.16);
    }

    /* Stil comun pentru Produse, Noutăți, Rețete și galeria din popup.
       Culorile explicite și only light păstrează aspectul în dark mode;
       appearance elimină suprafața nativă gri a butonului. */
    .navArrow{
      -webkit-appearance: none;
      appearance: none;
      color-scheme: only light;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      width: 52px;
      height: 52px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.64);
      background: rgba(58,133,75,.82);
      color: #fff;
      -webkit-text-fill-color: #fff;
      box-shadow: 0 7px 20px rgba(10,34,20,.18), inset 0 1px 0 rgba(255,255,255,.20);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      line-height: 1;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
      pointer-events: auto;
    }
    .navArrow:hover{
      transform: translateY(-50%) scale(1.03);
      border-color: rgba(255,255,255,.92);
      background: rgba(50,116,68,.90);
      color: #fff;
    }
    .navArrow:focus-visible{
      outline: 2px solid #194b30;
      outline-offset: 3px;
      box-shadow: 0 0 0 3px #fff, 0 7px 20px rgba(10,34,20,.18);
    }
    .navArrow:active{
      transform: translateY(-50%) scale(.98);
      background: rgba(44,105,61,.94);
      color: #fff;
    }
    .navArrow.left{ left: 14px; }
    .navArrow.right{ right: 14px; }
    .chev{
      width: 12px;
      height: 12px;
      color: #fff;
      border-right: 3px solid currentColor;
      border-bottom: 3px solid currentColor;
      pointer-events: none;
    }
    .chev.left{ transform: rotate(135deg); margin-left: 4px; }
    .chev.right{ transform: rotate(-45deg); margin-right: 4px; }
    @media (prefers-reduced-motion: reduce){
      .navArrow{ transition: none; }
    }

    .dots{
      position:absolute;
      left: 0; right: 0; bottom: 14px;
      display:flex; align-items:center; justify-content:center; gap:8px;
      z-index: 10;
      pointer-events:auto;
    }
    .dotBtn{
      width:10px; height:10px;
      border-radius:999px;
      border: 1px solid rgba(10,34,20,.18);
      background: rgba(10,34,20,.10);
      cursor:pointer;
      opacity:.9;
    }
    .dotBtn.active{
      background: rgba(198,29,34,.78);
      border-color: rgba(198,29,34,.90);
      box-shadow: 0 0 0 4px rgba(198,29,34,.14);
      opacity: 1;
    }

    .slideMedia.noimg{
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 18px;
    }
    .imgFallback{
      width:100%;
      height: clamp(220px, 40vh, 440px);
      border-radius: 18px;
      border: 1px dashed rgba(10,34,20,.22);
      background: rgba(10,34,20,.03);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap: 10px;
      font-weight: 1100;
      color: rgba(10,34,20,.72);
    }
    .imgFallback i{ font-size: 22px; color: rgba(10,34,20,.55); }

/* === PRODUSE: spatiu pentru sageti + poza mai la dreapta (doar caruselul principal) === */
#carousel .slide{
  /* lasa loc pentru sageti sa nu acopere poza */
  padding: 18px 86px 18px 86px;
}

#carousel .slideMedia{
  /* limita + muta putin poza spre dreapta */
  max-width: 560px;
  justify-self: start;
  margin-left: 12px;
  background: transparent !important;
}

/* Badge special pentru metoda recomandata */
.badge.badge--method{
  border-color: rgba(199,163,90,.38);
  background: linear-gradient(180deg, rgba(199,163,90,.18), rgba(255,255,255,.92));
}
.badge.badge--method .badgeDot{
  background: rgba(198,29,34,.86);
  box-shadow: 0 0 0 4px rgba(198,29,34,.14);
}

/* Mobil: nu mai fortam padding mare */
@media (max-width: 980px){
  #carousel .slide{ padding: 18px; }
  #carousel .slideMedia{
    max-width: 100%;
    margin-left: 0;
    justify-self: center;
  }
}

/* =========================
   NOUTĂȚI - CARUSEL (2 mobil / 6 desktop)
   Stil ca la Rețete
   ========================= */

#noutati .panel{
  flex: 1;
  min-height: 0;
}

/* IMPORTANT: panelBody trebuie să ocupe spațiul și să nu taie caruselul */
#noutati .panelBody{
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden; /* caruselul gestionează tot */
}

.newsCarousel{
  height: 100%;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.newsTrack{
  height: 100%;
  display: flex;
  align-items: stretch;
  transition: transform .28s ease;
  will-change: transform;
}

.newsSlide{
  min-width: 100%;
  height: 100%;
  padding: 14px 86px 44px; /* spațiu pt săgeți + dots */
}

.newsGrid{
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* desktop: 3 coloane */
  grid-auto-rows: 1fr;                  /* 2 rânduri => 6 carduri */
  gap: 14px;
  align-content: stretch;
}

/* Card (păstrează look-ul tău, dar forțăm comportamentul ca la Rețete) */
#noutati .newsCard{
  border-radius: 22px;
  border: 1px solid rgba(10,34,20,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(10,34,20,.10);
  overflow: hidden;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease;

  display: flex;
  flex-direction: column;
  min-height: 0;
}
#noutati .newsCard:hover{
  transform: translateY(-1px);
  border-color: rgba(199,163,90,.35);
}

#noutati .newsImg{
  width: 100%;
  height: 140px; /* desktop */
  object-fit: cover;
  background: rgba(10,34,20,.04);
  flex: 0 0 auto;
}

#noutati .newsBody{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

#noutati .newsTitle{
  margin: 0;
  font-size: 15px;
  font-weight: 1200;
  letter-spacing: -.2px;
}

#noutati .newsMeta{
  font-size: 12px;
  font-weight: 1000;
  color: rgba(10,34,20,.62);
}

#noutati .newsText{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 900;
  color: rgba(10,34,20,.78);

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  flex: 1 1 auto;
  min-height: 0;
}

/* Mobil: 2 carduri / pagină (1 coloană, 2 rânduri) */
@media (max-width: 980px){
  .newsSlide{
    padding: 12px 14px 44px; /* fără spațiu mare pt săgeți */
  }

  .newsGrid{
    grid-template-columns: 1fr;          /* 1 coloană */
    grid-template-rows: repeat(2, 1fr);  /* fix 2 rânduri => 2 carduri */
  }

  #noutati .navArrow{
    width: 46px;
    height: 46px;
  }
  #noutati .navArrow.left{ left: 10px; }
  #noutati .navArrow.right{ right: 10px; }

  #noutati .newsImg{ height: 92px; }
  #noutati .newsBody{ padding: 10px; gap: 6px; }
  #noutati .newsTitle{ font-size: 14px; }
  #noutati .newsText{ -webkit-line-clamp: 2; font-size: 12.5px; }
}


    /* Unde il gasesti */
    .findWrap{
      flex:1;
      min-height:0;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
    }
    .mapBox{
      border-radius: 22px;
      border:1px solid rgba(10,34,20,.10);
      background: rgba(255,255,255,.96);
      overflow:hidden;
      min-height: 320px;
      position:relative;
    }
    #map{ width:100%; height:100%; min-height: 320px; }
    .filterCard{
      border-radius: 22px;
      border:1px solid rgba(10,34,20,.10);
      background: rgba(255,255,255,.96);
      padding: 14px;
      display:flex;
      flex-direction:column;
    }
    .storeList{
      margin-top: 12px;
      border-top: 1px solid rgba(10,34,20,.08);
      padding-top: 12px;
      display:flex;
      flex-direction:column;
      gap: 10px;
      max-height: 280px;
      overflow:auto;
    }
    .storeItem{
      padding: 12px;
      border-radius: 18px;
      border:1px solid rgba(10,34,20,.10);
      background: rgba(255,255,255,.96);
    }
    .storeItem strong{ display:block; font-weight:1200; margin-bottom: 4px; }
    .storeItem small{ display:block; color: rgba(10,34,20,.65); font-weight:1000; line-height:1.5; }

    .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .field{ display:flex; flex-direction:column; gap:6px; margin-bottom: 10px; }
    label{ font-weight: 1200; color: rgba(10,34,20,.82); font-size: 13px; }
    input, textarea, select{
      width:100%;
      padding: 12px;
      border-radius: 16px;
      border:1px solid rgba(10,34,20,.12);
      background: rgba(10,34,20,.03);
      color: var(--ink);
      outline:none;
      font-weight: 900;
    }
    textarea{ min-height: 120px; resize: vertical; }

    .contactCard{
      margin-top: 12px;
      padding: 12px;
      border-radius: 18px;
      border: 1px solid rgba(10,34,20,.10);
      background: rgba(255,255,255,.96);
    }
    .contactCard strong{ display:block; font-weight: 1200; margin-bottom: 8px; }
    .contactRow{
      display:flex;
      align-items:flex-start;
      gap: 10px;
      padding: 6px 0;
      font-weight: 1000;
      color: rgba(10,34,20,.78);
      line-height: 1.5;
    }
    .contactRow i{ width: 16px; margin-top: 2px; color: var(--red); }
    .contactRow a:hover{ text-decoration: underline; }

    .siteFooter{
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(10,34,20,.10);
      background: rgba(255,255,255,.92);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
    }
    .siteFooter strong{ font-weight:1200; }
    .footerIcons{ display:flex; gap:10px; }
    .socialIcon{
      width: 40px; height: 40px;
      border-radius: 999px;
      border:1px solid rgba(10,34,20,.12);
      background: rgba(255,255,255,.92);
      display:flex; align-items:center; justify-content:center;
      box-shadow: 0 12px 28px rgba(10,34,20,.10);
      transition: transform .14s ease, border-color .14s ease;
      cursor:pointer;
    }
    .socialIcon i{ color: var(--red); }
    .socialIcon:hover{ transform: translateY(-1px); border-color: rgba(199,163,90,.30); }

    .contactIcon{ display:none; }
    @media (max-width: 980px){
      .contactCard{ display:none; }
      .contactIcon{ display:flex; }
    }

    /* MODALS */
    .modalBackdrop{
      position:fixed; inset:0;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(8px);
      z-index: 120;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 14px;
    }
    .modal{
      width: min(780px, 100%);
      border-radius: 26px;
      border:1px solid rgba(10,34,20,.12);
      background: rgba(255,255,255,.96);
      box-shadow: 0 18px 60px rgba(10,34,20,.24);
      overflow:hidden;
    }
    .modalHead{
      padding: 14px;
      border-bottom:1px solid rgba(10,34,20,.10);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
    }
    .modalHead h4{ margin:0; font-size: 18px; font-weight: 1200; }
    .modalHead p{ margin: 8px 0 0; font-size: 13px; font-weight: 900; color: rgba(10,34,20,.72); line-height:1.55; }
    .modalBody{ padding: 14px; }
    .modalFoot{
      padding: 14px;
      border-top:1px solid rgba(10,34,20,.10);
      display:flex;
      justify-content:flex-end;
      gap: 10px;
    }

/* =========================
   RETETE - CARUSEL (3 mobil / 6 desktop)
   ========================= */
#retete .panel{
  flex: 1;
  min-height: 0;
}

/* IMPORTANT: panelBody trebuie sa ocupe spatiul ramas, altfel se taie */
#retete .panelBody{
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden; /* caruselul gestioneaza tot */
}

.recipesCarousel{
  height: 100%;
  position: relative;
  overflow: hidden;
  touch-action: pan-y; /* permite scroll vertical pe pagina, swipe orizontal in carusel */
}

.recipesTrack{
  height: 100%;
  display: flex;
  align-items: stretch;
  transition: transform .28s ease;
  will-change: transform;
}

.recSlide{
  min-width: 100%;
  height: 100%;
  padding: 14px 86px 44px; /* spatiu pt sageti + dots */
}

.recipesGrid{
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* desktop: 3 coloane */
  grid-auto-rows: 1fr;                  /* 2 randuri -> 6 carduri */
  gap: 14px;
  align-content: stretch;
}

/* Card */
#retete .recipeCard{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  overflow: hidden;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease;

  display: flex;
  flex-direction: column;
  min-height: 0;
}
#retete .recipeCard:hover{
  transform: translateY(-1px);
  border-color: rgba(199,163,90,.40);
}

#retete .recipeImg{
  width: 100%;
  height: 140px; /* desktop */
  object-fit: cover;
  background: rgba(255,255,255,.08);
  flex: 0 0 auto;
}

#retete .recipeBody{
  padding: 12px;
  background: rgba(255,255,255,.92);
  color: var(--ink);

  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

#retete .recipeTitle{
  margin: 0;
  font-size: 15px;
  font-weight: 1200;
  letter-spacing: -.2px;
}

#retete .recipeText{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 900;
  color: rgba(10,34,20,.78);

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  flex: 1 1 auto;
  min-height: 0;
}

#retete .recipeActions{
  margin-top: auto;
  display: flex;
  gap: 10px;
}

#retete .recipeBtn{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,34,20,.12);
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 28px rgba(10,34,20,.10);

  font-weight: 1100;
  cursor: pointer;
  white-space: nowrap;
}

#retete .recipeBtn.likeActive{
  border-color: rgba(198,29,34,.30);
  box-shadow: 0 0 0 4px rgba(198,29,34,.12);
}

/* Mobil: 3 carduri / pagina (1 coloana, 3 randuri) */
@media (max-width: 980px){
  .recSlide{
    padding: 12px 14px 44px; /* sageti mai mici */
  }

  .recipesGrid{
    grid-template-columns: 1fr; /* 1 coloana */
    grid-template-rows: repeat(2, 1fr); /* fix 2 randuri */
  }

  #retete .navArrow{
    width: 46px;
    height: 46px;
  }
  #retete .navArrow.left{ left: 10px; }
  #retete .navArrow.right{ right: 10px; }

  #retete .recipeImg{ height: 92px; }
  #retete .recipeBody{ padding: 10px; gap: 6px; }
  #retete .recipeTitle{ font-size: 14px; }
  #retete .recipeText{ -webkit-line-clamp: 2; font-size: 12.5px; }

  #retete .recipeBtn{
    padding: 8px 10px;
    font-size: 12px;
  }
}

#retete .recipeCard{ position: relative; }

#retete .recipeLikeBadge{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,34,20,.12);
  box-shadow: 0 12px 28px rgba(10,34,20,.14);

  font-weight: 1200;
  color: rgba(10,34,20,.92);
  pointer-events: none; /* sa nu afecteze click-ul pe card */
}

#retete .recipeLikeBadge i{
  color: rgba(198,29,34,.92);
}

#retete .recipeLikeBadge.isLiked{
  box-shadow: 0 0 0 4px rgba(198,29,34,.12), 0 12px 28px rgba(10,34,20,.14);
  border-color: rgba(198,29,34,.28);
}

/* =========================
   LIKE ANIMATION (RETETE)
   ========================= */

#retete .recipeBtn{
  position: relative;
  overflow: visible; /* ca să se vadă particulele (inimioarele) */
  transform: translateZ(0);
}

#retete .recipeBtn i{
  transition: transform .18s ease, filter .18s ease;
}

#retete .recipeBtn.likeActive i{
  color: rgba(198,29,34,.96);
  filter: drop-shadow(0 10px 18px rgba(198,29,34,.22));
}

/* Counter mic în buton */
#retete .recipeBtn .likeBtnCount{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 6px 10px;
  border-radius: 999px;

  font-weight: 1200;
  font-size: 12px;
  line-height: 1;

  background: rgba(10,34,20,.06);
  border: 1px solid rgba(10,34,20,.10);
  color: rgba(10,34,20,.86);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#retete .recipeBtn.likeActive .likeBtnCount{
  background: rgba(198,29,34,.08);
  border-color: rgba(198,29,34,.22);
  box-shadow: 0 0 0 4px rgba(198,29,34,.10);
}

/* Buton pulse */
#retete .recipeBtn.likePunch{
  animation: likeBtnPop .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes likeBtnPop{
  0%   { transform: scale(1); }
  35%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Inima din buton “bouncy” */
#retete .recipeBtn.likePunch i{
  animation: heartBounce .55s cubic-bezier(.2,.9,.2,1);
}
@keyframes heartBounce{
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-2px) scale(1.18); }
  70%  { transform: translateY(0) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}

/* Badge pulse (numărul mare din colț) */
#retete .recipeLikeBadge.badgeBump{
  animation: badgeBump .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes badgeBump{
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Numărul (badge + buton) face “count pop” */
#retete .recipeLikeCount.countBump,
#retete .recipeBtn .likeBtnCount.countBump{
  animation: countPop .40s cubic-bezier(.2,.9,.2,1);
}
@keyframes countPop{
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  35%  { transform: translateY(-2px) scale(1.16); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Particule (inimioare) */
#retete .recipeBtn .likeParticle{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  user-select: none;

  font-size: 14px;
  font-weight: 1200;
  color: rgba(198,29,34,.92);

  filter: drop-shadow(0 12px 18px rgba(198,29,34,.20));
  opacity: 0;

  animation: particleFly var(--dur, 700ms) cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes particleFly{
  0%{
    opacity: 0;
    transform: translate(-50%,-50%) scale(.8) rotate(0deg);
  }
  15%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -26px)))
      scale(var(--s, 1.15))
      rotate(var(--r, 14deg));
  }
}

/* Respectă reduce motion */
@media (prefers-reduced-motion: reduce){
  #retete .recipeBtn.likePunch,
  #retete .recipeBtn.likePunch i,
  #retete .recipeLikeBadge.badgeBump,
  #retete .recipeLikeCount.countBump,
  #retete .recipeBtn .likeBtnCount.countBump,
  #retete .recipeBtn .likeParticle{
    animation: none !important;
  }
}

    /* Footer final */
    .mainFooter{
      scroll-snap-align: start;
      background: rgba(255,255,255,.86);
      border-top: 1px solid rgba(10,34,20,.10);
      padding: 18px 14px;
      position: relative;
      z-index: 200;
    }
    .footerInner{
      width: min(var(--maxW), 100%);
      margin: 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 14px;
      flex-wrap:wrap;
      text-align:center;
      font-weight: 1100;
      color: rgba(10,34,20,.78);
    }
    .footerSocial{ display:flex; gap: 10px; }
    .footerSocial a{
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border:1px solid rgba(10,34,20,.12);
      background: rgba(255,255,255,.92);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 12px 28px rgba(10,34,20,.10);
    }
    .footerSocial i{ color: var(--red); }

    /* Select2 */
    .select2-container{ width:100% !important; }
    .select2-container--default .select2-selection--single{
      height: 48px;
      border-radius: 16px;
      border: 1px solid rgba(10,34,20,.12);
      background: rgba(10,34,20,.03);
      display:flex;
      align-items:center;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
      line-height: 48px;
      padding-left: 12px;
      padding-right: 36px;
      font-weight: 900;
      color: rgba(10,34,20,.90);
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow{
      height: 48px;
      right: 10px;
    }
    .select2-dropdown{
      border-radius: 16px;
      border: 1px solid rgba(10,34,20,.12);
      overflow:hidden;
      box-shadow: 0 18px 60px rgba(10,34,20,.18);
    }
    .select2-results__options{
      max-height: 220px !important;
      overflow-y: auto !important;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field{
      border-radius: 12px;
      border: 1px solid rgba(10,34,20,.12);
      padding: 10px 12px;
      font-weight: 900;
    }
    .select2-container--open{ z-index: 9999; }

    /* Responsive */
    @media (max-width: 1050px){
      .sidenav{ display:none; }
      .floatingMenuBtn{ display:flex; }
    }
    @media (max-width: 980px){
      .heroGrid{ grid-template-columns: 1fr; }
      .heroRight{ display:none; }
      .packshotMini{ display:block; }

      .whyShell{ grid-template-rows: auto clamp(260px, 34vh, 360px) 1fr; }
      .whyTop{ grid-template-columns: 1fr; }
      .whySide{ display:none; }
      .whyDock{ display:flex; }

      .slide{ grid-template-columns: 1fr; }
      .findWrap{ grid-template-columns: 1fr; }
      .row{ grid-template-columns: 1fr; }
    }
    @media (min-width: 981px){
      .whyDock{ display:none; }
    }

    /* Perf mobil */
    @media (hover:none) and (pointer:coarse){
      .leaf{
        filter: none !important;
        mix-blend-mode: normal !important;
        opacity: .35;
      }
      .theme-white .card,
      .drawerBackdrop,
      .drawer,
      .whyVideoCard,
      .whyDock,
      .bulletLink,
      .recipeCard{
        backdrop-filter: none !important;
      }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; animation:none !important; }
      body{ scroll-snap-type: y proximity; }
    }
    
/* Banner imagine in fundal (Acasa) - cu valuri jos */
.heroWaveBanner{
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);

  /* ✅ mai lat */
  width: min(1280px, calc(100% - 24px));
  max-width: none;

  height: clamp(280px, 22vh, 310px);
  border-radius: 22px;

  /* background mutat pe <img> pentru LCP mai bun */
  background: none;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  opacity: .98;

  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}


/* Valuri jos: folosim mask (taie forma bannerului cu valuri) */
.heroWaveBanner{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20400'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0%2C0H1200V280c-150%2C60-300%2C-60-450%2C0s-300%2C60-450%2C0S150%2C340%2C0%2C280V0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;

  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20400'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0%2C0H1200V280c-150%2C60-300%2C-60-450%2C0s-300%2C60-450%2C0S150%2C340%2C0%2C280V0Z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Asigura ca tot ce e in hero e peste banner */
.heroLeft{ position: relative; z-index: 2; }
.heroRight{ position: relative; z-index: 2; }

/* Mobil: putin mai jos si mai mic */
@media (max-width: 980px){
  .heroWaveBanner{
    top: 12px;
    width: calc(100% - 16px);
    height: 130px;
    border-radius: 22px;
  }
}
  
  .heroWaveBanner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%; /* poti regla: 20% / 35% / 50% */
  display: block;
}

/* === VIDEO SOUND TOGGLE (De ce Vitall) === */
.whySoundBtn{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 6;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(0,0,0,.18);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.whySoundBtn i{
  color: rgba(255,255,255,.92);
  font-size: 16px;
}

.whyVideoCard.showSound .whySoundBtn{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* dacă autoplay cu sunet e blocat, evidențiem butonul */
.whySoundBtn.needsTap{
  border-color: rgba(199,163,90,.55);
  box-shadow: 0 0 0 6px rgba(199,163,90,.18), 0 16px 44px rgba(0,0,0,.18);
}

/* Sageti mai sus pe mobil (Noutati + Retete) */
@media (max-width: 980px){
  #noutati .newsCarousel .navArrow,
  #retete .recipesCarousel .navArrow{
    top: calc(50% - 20px); /* ajusteaza: 30px / 50px etc */
  }
}


/* =========================================================
   PUIUL VITALL - PROFESSIONAL POLISH 2026
   Focus: hero hover corect, responsive real, produse clare, noutati SQL
   ========================================================= */
:root{
  --vitall-glass-dark: rgba(5, 35, 19, .46);
  --vitall-glass-line: rgba(255,255,255,.18);
  --vitall-soft-shadow: 0 16px 34px rgba(0,0,0,.20);
  --vitall-premium-shadow: 0 22px 58px rgba(0,0,0,.26);
}

html{ -webkit-text-size-adjust: 100%; }
body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* HERO: elimina benzile/umbrele ciudate de la hover pe butoanele din stanga */
#acasa .bullets .bulletLink{
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,0,0,.24), rgba(7,64,34,.32));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.18);
  transform: translate3d(0,0,0);
  transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s ease, background .22s ease, box-shadow .22s ease;
  will-change: transform;
}
#acasa .bullets .bulletLink::before,
#acasa .bullets .bulletLink::after{
  content: none !important;
  display: none !important;
}
#acasa .bullets .bulletLink:hover{
  transform: translate3d(6px,-2px,0) !important;
  background: linear-gradient(135deg, rgba(0,0,0,.28), rgba(10,77,42,.40));
  border-color: rgba(199,163,90,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px rgba(0,0,0,.22) !important;
}
#acasa .bullets .bulletLink:active{ transform: translate3d(3px,0,0) !important; }
#acasa .bullets .bulletLink:focus-visible{
  outline: 3px solid rgba(199,163,90,.70);
  outline-offset: 4px;
}
#acasa .bullets .bulletLink img,
#acasa .bullets .bulletLink .whyMiniIcon{
  width: 58px;
  height: 58px;
  min-width: 58px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
}
#acasa .bullets .bulletLink img.hubbardRedbroIcon{
  width: 62px;
  height: 62px;
  min-width: 62px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 2px rgba(255,255,255,.70), 0 10px 22px rgba(0,0,0,.20);
}
#acasa .bullets .bulletLink strong{ letter-spacing: .2px; }

/* CTA hero */
#acasa .heroCtas,
#acasa .heroLeft > div:has(> a.pillBtn[href="#despre"]){
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 4px;
}
#acasa .heroCtas .pillBtn,
#acasa .heroLeft > div:has(> a.pillBtn[href="#despre"]) .pillBtn{
  min-height: 42px;
  padding: 11px 16px;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
#acasa .heroCtas .pillBtn:hover,
#acasa .heroLeft > div:has(> a.pillBtn[href="#despre"]) .pillBtn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.24);
  border-color: rgba(199,163,90,.52);
}

/* Hero produs: clar, fara fade peste caserola */
#acasa .packshotWrap{ transform: translate3d(24px, 18px, 0); }
#acasa .pack3d{
  --w: clamp(360px, 55vw, 690px);
  --h: clamp(250px, 37vw, 430px);
  filter: drop-shadow(0 30px 48px rgba(0,0,0,.24)) !important;
}
#acasa .packFace.front{
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}
#acasa .packFace.front::after{ opacity: 0 !important; display:none !important; }

/* De ce Vitall */
#despre .whySideImgIcon,
#despre .whyMiniIcon{
  width: 30px;
  height: 30px;
  min-width: 30px;
  object-fit: contain;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 1px rgba(255,255,255,.70), 0 8px 16px rgba(0,0,0,.16);
}
#despre .whyIconBtn .whyMiniIcon{ width: 34px; height: 34px; min-width: 34px; }
.vitallWhyPremiumBlock{
  border-color: rgba(199,163,90,.28) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,238,.96)) !important;
  box-shadow: 0 16px 36px rgba(10,34,20,.08);
}
.vitallWhyBadgeIcon{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  color: #fff;
  background: linear-gradient(135deg, rgba(25,75,48,.96), rgba(7,70,37,.96));
  border: 1px solid rgba(199,163,90,.55);
  box-shadow: 0 12px 26px rgba(25,75,48,.18);
}
.vitallWhyBadgeIcon i{ font-size: 21px; }
.vitallWhyBadgeIcon img{ width: 46px !important; height: 46px !important; min-width: 46px !important; }
.vitallWowCards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.vitallWowCards article{
  border-radius: 18px;
  border: 1px solid rgba(10,34,20,.10);
  background: rgba(255,255,255,.88);
  padding: 13px;
  box-shadow: 0 10px 26px rgba(10,34,20,.06);
}
.vitallWowCards i{ color: var(--red); margin-bottom: 8px; }
.vitallWowCards strong{ display:block; font-weight:1200; color: var(--ink); }
.vitallWowCards small{ display:block; margin-top:5px; line-height:1.45; font-weight:900; color: rgba(10,34,20,.68); }

/* Produse clare, fara fade vizual peste imagini */
#carousel .carouselTrack,
#prodCarousel .carouselTrack{ transition: transform .46s cubic-bezier(.22,1,.36,1); }
#carousel .slide{ opacity: 1 !important; }
#carousel .slideMedia,
#prodCarousel .slideMedia{
  border: 0 !important;
  background: radial-gradient(circle at 50% 54%, rgba(25,75,48,.10), transparent 58%), rgba(255,255,255,.96) !important;
  box-shadow: 0 20px 48px rgba(10,34,20,.12) !important;
}
#carousel .slideMedia img,
#prodCarousel .slideMedia img{
  background: transparent !important;
  opacity: 1 !important;
  object-fit: contain !important;
  filter: saturate(1.08) contrast(1.04) drop-shadow(0 24px 34px rgba(0,0,0,.18));
  transform: translateZ(0);
  image-rendering: auto;
}
#carousel .slideMedia img{ height: clamp(290px, 48vh, 520px) !important; padding: 2px !important; }
#prodCarousel .slideMedia img{ height: min(62vh, 520px) !important; padding: 0 !important; }
#carousel .slideMedia:hover img,
#prodCarousel .slideMedia:hover img{
  transform: translate3d(0,-4px,0) scale(1.025);
  filter: saturate(1.12) contrast(1.05) drop-shadow(0 30px 42px rgba(0,0,0,.21));
}
#carousel .productTagVitall{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-bottom:10px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(25,75,48,.08);
  border:1px solid rgba(25,75,48,.14);
  color: rgba(15,84,47,.96);
  font-size:12px;
  font-weight:1200;
  letter-spacing:.35px;
}
#carousel .prodName{ color:#123c27; }
#carousel .prodDesc{ font-size:15px; line-height:1.7; }
#carousel .badge{
  background: rgba(255,255,255,.94);
  border-color: rgba(25,75,48,.14);
  box-shadow: 0 10px 24px rgba(10,34,20,.06);
}

/* Noutati: container pregatit pentru date din SQL, fara continut hardcodat in JS */
#noutati .panel{ flex:1; min-height:0; }
#noutati .panelBody{ flex:1; min-height:0; overflow:hidden; padding:0; }
#noutati .newsCard{
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(10,34,20,.10) !important;
  box-shadow: 0 16px 34px rgba(10,34,20,.10) !important;
}
#noutati .newsImg{ filter: saturate(1.08) contrast(1.03); }
#noutati .newsCard:hover{
  transform: translateY(-3px);
  border-color: rgba(199,163,90,.38) !important;
}

/* Desktop finetune */
@media (min-width: 981px){
  .container{ padding-right: clamp(18px, 9vw, 150px); }
  #acasa .heroGrid{ grid-template-columns: minmax(420px,.9fr) minmax(430px,1.1fr); }
  #acasa .heroLeft{ padding-left: 8px; }
  #carousel .slide{ padding: 18px 86px; grid-template-columns: minmax(420px, 1.12fr) minmax(330px, .88fr); }
  #carousel .slideMedia{ justify-self: center; max-width: 640px; }
}

/* Mobil si tableta: fara scroll-snap rigid, fara taiere de continut */
@media (max-width: 980px){
  body{ scroll-snap-type: none !important; overflow-y:auto; }
  section{
    height: auto !important;
    min-height: 100svh;
    overflow: visible;
    scroll-snap-align: none;
  }
  .container{
    height: auto;
    min-height: 100svh;
    padding: 10px;
  }
  .card{
    height: auto;
    min-height: calc(100svh - 20px);
    border-radius: 24px;
    overflow: visible;
  }
  .secPad{ min-height: calc(100svh - 20px); padding: 14px; }
  .secHeader{ align-items:flex-start; }
  .secHeader h2{ font-size: clamp(23px, 7vw, 34px); }
  .secHeader p{ font-size: 13.5px; line-height: 1.55; }

  #acasa .card{ min-height: calc(100svh - 20px); overflow:hidden !important; }
  #acasa .heroGrid{
    min-height: calc(100svh - 20px);
    padding: 12px;
    gap: 10px;
    align-content:center;
  }
  #acasa .heroWaveBanner{ height: clamp(116px, 20vh, 160px); opacity:.92; }
  #acasa .brandRow{ gap: 8px; align-items:center; }
  #acasa .logoMain{ width: clamp(80px, 26vw, 112px); }
  #acasa .packshotMini{
    display:block;
    width: min(54vw, 230px);
    max-height: 145px;
    object-fit: contain;
  }
  #acasa .heroHeadline{ font-size: clamp(30px, 10vw, 46px); line-height:1.02; }
  #acasa .heroSub{ font-size: 13.5px; line-height:1.52; }
  #acasa .bullets{ gap: 9px; }
  #acasa .bullets .bulletLink{ padding: 11px 12px; border-radius: 17px; }
  #acasa .bullets .bulletLink:hover{ transform: translate3d(0,-1px,0) !important; }
  #acasa .bullets .bulletLink img,
  #acasa .bullets .bulletLink img.hubbardRedbroIcon{ width: 48px; height:48px; min-width:48px; }
  #acasa .bullets .bulletLink strong{ font-size: 13.5px; }
  #acasa .bullets .bulletLink small{ font-size: 11px; }
  #acasa .heroCtas,
  #acasa .heroLeft > div:has(> a.pillBtn[href="#despre"]){ width:100%; }
  #acasa .heroCtas .pillBtn,
  #acasa .heroLeft > div:has(> a.pillBtn[href="#despre"]) .pillBtn{
    flex: 1 1 150px;
    padding: 10px 12px;
    font-size: 13px;
  }

  #despre .whyShell{
    height:auto;
    min-height: calc(100svh - 20px);
    padding: 14px;
    grid-template-rows: auto auto auto;
  }
  #despre .whyVideoCard{ min-height: clamp(210px, 36vh, 340px); }
  #despre .whyContent{ overflow: visible; max-height:none; }
  .vitallWowCards{ grid-template-columns: 1fr; gap: 10px; }

  #produse .carousel{ min-height: 680px; }
  #carousel .slide{
    grid-template-columns: 1fr;
    padding: 14px 14px 54px !important;
    gap: 10px;
    align-content: center;
  }
  #carousel .slideMedia{ max-width: 100%; margin-left:0; justify-self:center; }
  #carousel .slideMedia img{ height: clamp(245px, 37vh, 360px) !important; }
  #carousel .slideText{ text-align:center; }
  #carousel .productTagVitall{ margin-left:auto; margin-right:auto; }
  #carousel .badges{ justify-content:center; }
  .navArrow{ width: 46px; height: 46px; }
  .navArrow.left{ left: 10px; }
  .navArrow.right{ right: 10px; }

  #noutati .panel,
  #retete .panel{ min-height: 640px; }
  .newsSlide,
  .recSlide{ padding: 12px 12px 48px !important; }
  .newsGrid,
  .recipesGrid{ gap: 10px; }
  #noutati .newsImg,
  #retete .recipeImg{ height: 100px; }
  #noutati .newsTitle,
  #retete .recipeTitle{ font-size: 14px; }

  .findWrap{ grid-template-columns: 1fr; }
  .mapBox, #map{ min-height: 280px; }
  .siteFooter{ flex-direction: column; align-items:flex-start; }
  .footerIcons{ flex-wrap:wrap; }
}

@media (max-width: 520px){
  .drawer{ width: min(88vw, 300px); }
  #acasa .heroHeadline{ font-size: clamp(29px, 11vw, 42px); }
  #acasa .bullets .bulletLink{ gap: 10px; }
  #acasa .bullets .bulletLink strong{ font-size: 12.8px; }
  #produse .carousel{ min-height: 640px; }
  #carousel .slideMedia img{ height: clamp(220px, 34vh, 320px) !important; }
  #carousel .prodName{ font-size: 24px; }
  #carousel .prodDesc{ font-size: 13.5px; }
  .badge{ font-size: 11px; padding: 7px 9px; }
  #noutati .panel,
  #retete .panel{ min-height: 610px; }
}

@media (prefers-reduced-motion: reduce){
  #acasa .bullets .bulletLink,
  #carousel .slideMedia img,
  #prodCarousel .slideMedia img{ transition:none !important; }
}


/* =========================================================
   FIX 2026-06-30b
   - produse: folosim exact fisierele din IMAGINI/CASEROLE
   - hover butoane principale restaurat si controlat
   - Hubbard: icon special doar in hero; in sectiunea Despre respecta structura celorlalte iconite
   ========================================================= */

#acasa .heroCtas{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  margin-top:4px !important;
}
#acasa .heroCtas .pillBtn{
  position:relative;
  overflow:hidden;
  min-height:42px;
  padding:11px 16px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
  transform:translate3d(0,0,0);
  transition:transform .20s cubic-bezier(.22,1,.36,1), background .20s ease, border-color .20s ease, box-shadow .20s ease;
}
#acasa .heroCtas .pillBtn::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.30) 36%, transparent 64%);
  transform:translateX(-120%);
  transition:transform .42s ease;
  pointer-events:none;
}
#acasa .heroCtas .pillBtn:hover{
  transform:translate3d(0,-2px,0);
  background:linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.16));
  border-color:rgba(199,163,90,.62);
  box-shadow:0 16px 32px rgba(0,0,0,.22), 0 0 0 4px rgba(199,163,90,.10), inset 0 1px 0 rgba(255,255,255,.22);
}
#acasa .heroCtas .pillBtn:hover::after{ transform:translateX(120%); }
#acasa .heroCtas .pillBtn:active{ transform:translate3d(0,0,0) scale(.99); }

/* Hover curat pentru cele 3 butoane mari din stanga, fara umbre taiate sau benzi diagonale */
#acasa .bullets .bulletLink{
  overflow:hidden !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
#acasa .bullets .bulletLink:hover{
  transform:translate3d(4px,-2px,0) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.24), 0 0 0 4px rgba(199,163,90,.10), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#acasa .bullets .bulletLink:hover img{ transform:scale(1.04); }
#acasa .bullets .bulletLink img{ transition:transform .20s ease, filter .20s ease; }

/* Hubbard in HERO ramane badge special, ca in varianta initiala */
#acasa .bullets .bulletLink[data-why="hranire"] img.hubbardRedbroIcon{
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  padding:3px;
  border-radius:999px;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.72), 0 10px 22px rgba(0,0,0,.22) !important;
  object-fit:contain;
}

/* In DESPRE, sigla Hubbard nu mai este tratata ca badge separat; intra in structura celorlalte iconite */
#despre .whySideBtn .t{
  display:flex;
  align-items:center;
  gap:10px;
}
#despre .whySideBtn .t > i,
#despre .whySideBtn .t > .whySideImgIcon{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#despre .whySideBtn .t > .whySideImgIcon,
#despre .whyIconBtn > .whyMiniIcon{
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.18));
  object-fit:contain;
}
#despre .whyIconBtn > .whyMiniIcon{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
}
#despre .vitallWhyBadgeIcon .whySideImgIcon{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.20));
}

/* Imaginile din produse: continut clar, fara crop, cu fisierele exacte din folder */
#carousel .slideMedia img,
#prodCarousel .slideMedia img{
  image-rendering:auto;
  object-fit:contain !important;
  background:transparent !important;
  filter:drop-shadow(0 16px 22px rgba(10,34,20,.10));
}

@media (max-width: 980px){
  #acasa .heroCtas .pillBtn{ min-height:40px; padding:10px 14px; }
  #acasa .bullets .bulletLink[data-why="hranire"] img.hubbardRedbroIcon{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
  }
}


/* =========================================================
   PUIUL VITALL - FIXES C (retete + iconite Hubbard)
   ========================================================= */

/* RETETE: butoane vizibile corect, fara text taiat */
#retete .recipeActions{
  margin-top: auto;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#retete .recipeBtn{
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  gap: 6px;
  justify-content: flex-start;
  overflow: hidden;
  font-size: 13px;
}
#retete .recipeBtn i{
  flex: 0 0 auto;
}
#retete .recipeBtn .likeLabel,
#retete .recipeBtn[data-share="1"] span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#retete .recipeBtn .likeBtnCount{
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 28px;
  padding: 4px 8px;
  font-size: 11px;
}
@media (max-width: 980px){
  #retete .recipeActions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #retete .recipeBtn{
    padding: 8px 9px;
    font-size: 11.5px;
    gap: 5px;
  }
  #retete .recipeBtn .likeBtnCount{
    min-width: 24px;
    padding: 4px 6px;
    font-size: 10px;
  }
}

/* HERO: iconita Hubbard cu contur ca celelalte doua */
#acasa .bullets .bulletLink[data-why="hranire"] img.hubbardRedbroIcon{
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.98) !important;
  border: 2px solid rgba(198,163,90,.96) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.82),
    0 10px 22px rgba(0,0,0,.20) !important;
  object-fit: contain;
}

/* DE CE VITALL: iconita Hubbard aliniata vizual cu celelalte doua */
#despre .whySideBtn .t > .whySideImgIcon,
#despre .whyIconBtn > .whyMiniIcon{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  border-radius: 999px !important;
  background: rgba(255,255,255,.98) !important;
  border: 1.5px solid rgba(198,163,90,.94) !important;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.72),
    0 6px 14px rgba(0,0,0,.18) !important;
  padding: 2px !important;
  filter: none !important;
}
#despre .whySideBtn .t > .whySideImgIcon{
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}
#despre .whyIconBtn > .whyMiniIcon{
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

/* Continutul din blocul explicativ pastreaza iconita curata, nu foarte mare */
#despre .vitallWhyBadgeIcon .whySideImgIcon{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.98) !important;
  border: 1.5px solid rgba(198,163,90,.94) !important;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.72),
    0 8px 16px rgba(0,0,0,.20) !important;
  filter: none !important;
}


/* =========================================================
   PUIUL VITALL - FIXES D (adaptive recipe buttons + Hubbard contour)
   ========================================================= */

/* Butoane retete: daca textul nu incape, JS aplica .iconOnly */
#retete .recipeBtn.iconOnly{
  justify-content: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
#retete .recipeBtn.iconOnly .likeLabel,
#retete .recipeBtn.iconOnly .likeBtnCount,
#retete .recipeBtn.iconOnly[data-share="1"] span{
  display: none !important;
}
#retete .recipeBtn.iconOnly i{
  margin: 0 !important;
}

/* Hubbard in hero: contur apropiat de iconita verde */
#acasa .bullets .bulletLink[data-why="hranire"] img.hubbardRedbroIcon{
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  padding: 2px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 2px solid rgba(199,163,90,.98) !important;
  outline: 2px solid rgba(255,255,255,.98) !important;
  outline-offset: 1px !important;
  box-shadow:
    0 0 0 1px rgba(25,75,48,.20),
    0 10px 22px rgba(0,0,0,.20) !important;
  object-fit: contain !important;
}
@media (max-width: 980px){
  #acasa .bullets .bulletLink[data-why="hranire"] img.hubbardRedbroIcon{
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
  }
}


/* =========================================================
   PUIUL VITALL - FIXES E (like compact corect + Hubbard verde)
   ========================================================= */

/* Cand nu incape textul la retete: inima + contor, fara "Apre..." */
#retete .recipeBtn.iconOnly{
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
#retete .recipeBtn.iconOnly .likeLabel,
#retete .recipeBtn.iconOnly[data-share="1"] span{
  display: none !important;
}
#retete .recipeBtn.iconOnly .likeBtnCount{
  display: inline-flex !important;
  margin-left: 0 !important;
  min-width: 28px !important;
  padding: 4px 8px !important;
}
#retete .recipeBtn.iconOnly i{
  margin: 0 !important;
}

/* Hubbard: contur verde + auriu, asemanator iconitei de sus */
#acasa .bullets .bulletLink[data-why="hranire"] img.hubbardRedbroIcon{
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 54%, transparent 55%),
    #194b30 !important;
  border: 2px solid #c7a35a !important;
  outline: 2px solid rgba(255,255,255,.96) !important;
  outline-offset: -5px !important;
  box-shadow:
    0 0 0 2px rgba(199,163,90,.92),
    0 0 0 4px rgba(25,75,48,.92),
    0 10px 22px rgba(0,0,0,.22) !important;
  object-fit: contain !important;
}
#despre .whySideBtn .t > .whySideImgIcon,
#despre .whyIconBtn > .whyMiniIcon{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 54%, transparent 55%),
    #194b30 !important;
  border: 1.5px solid #c7a35a !important;
  outline: 1.5px solid rgba(255,255,255,.96) !important;
  outline-offset: -3px !important;
  box-shadow:
    0 0 0 1.5px rgba(199,163,90,.92),
    0 0 0 3px rgba(25,75,48,.92),
    0 6px 14px rgba(0,0,0,.18) !important;
}
@media (max-width: 980px){
  #acasa .bullets .bulletLink[data-why="hranire"] img.hubbardRedbroIcon{
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
  }
}


/* =========================================================
   PUIUL VITALL - IMAGINI PRODUSE OPTIMIZATE WEBP
   ========================================================= */
#carousel .slideMedia picture,
#prodCarousel .slideMedia picture{
  display:block;
  width:100%;
  height:100%;
}

#carousel .slideMedia,
#prodCarousel .slideMedia{
  background:transparent !important;
  isolation:isolate;
}

#carousel .slideMedia::before,
#carousel .slideMedia::after,
#prodCarousel .slideMedia::before,
#prodCarousel .slideMedia::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
}

#carousel .slideMedia img,
#prodCarousel .slideMedia img{
  display:block !important;
  width:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  image-rendering:auto;
  background:transparent !important;
  transform:translateZ(0);
}

#carousel .slideMedia img{
  height:clamp(290px, 48vh, 520px) !important;
  padding:2px !important;
}

#prodCarousel .slideMedia img{
  height:min(62vh, 520px) !important;
  padding:0 !important;
}

.packFace.front::after{
  opacity:0 !important;
}

/* Iconita Hubbard: foloseste varianta mica 64x64 daca exista, cu fallback in HTML/JS catre vechea imagine. */
#acasa .bullets .bulletLink[data-why="hranire"] img.hubbardRedbroIcon,
#despre .whySideBtn .t > .whySideImgIcon,
#despre .whyIconBtn > .whyMiniIcon,
#despre .vitallWhyBadgeIcon .whySideImgIcon{
  object-fit:contain !important;
}

@media (max-width:980px){
  #carousel .slideMedia img{
    height:clamp(220px, 34vh, 320px) !important;
  }
}


/* =========================================================
   Cookie info popups - DOAR Politica cookies / Termeni
   Nu modifica deloc toast-ul de cookies existent.
   ========================================================= */
.vitallInfoBackdrop{
  z-index: 240;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
}
.vitallInfoModal{
  width: min(820px, calc(100vw - 28px));
  max-height: calc(100svh - 34px);
  display:flex;
  flex-direction:column;
  border-radius: 30px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 28px 90px rgba(0,0,0,.34);
  overflow: hidden;
}
.vitallInfoBackdrop .vitallInfoHead{
  background:
    radial-gradient(360px 220px at 0% 0%, rgba(255,255,255,.18), transparent 62%),
    linear-gradient(135deg, rgba(25,75,48,.98), rgba(6,64,34,.98));
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.vitallInfoBackdrop .vitallInfoHead h4{
  margin:0;
  color:#fff;
  font-size: 20px;
  font-weight: 1200;
  letter-spacing: -.2px;
}
.vitallInfoBackdrop .vitallInfoHead p{
  color: rgba(255,255,255,.88);
  font-weight: 900;
}
.vitallInfoClose{
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.vitallInfoClose i{ color: currentColor; font-size: 15px; }
.vitallInfoBody{
  padding: 16px;
  overflow:auto;
}
.cookieInfoContent{ color: var(--ink); }
.cookieInfoContent .infoLead{
  margin:0 0 14px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(25,75,48,.08), rgba(199,163,90,.10));
  border: 1px solid rgba(25,75,48,.12);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 900;
  color: rgba(10,34,20,.76);
}
.cookieInfoContent .infoGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cookieInfoContent .infoGrid.twoCols{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cookieInfoContent .infoCard,
.cookieInfoContent .infoNote{
  border-radius: 20px;
  border: 1px solid rgba(10,34,20,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 28px rgba(10,34,20,.08);
  padding: 14px;
}
.cookieInfoContent .infoIcon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  margin-bottom: 10px;
  color:#fff;
  background: linear-gradient(135deg, rgba(198,29,34,.96), rgba(199,163,90,.92));
  box-shadow: 0 12px 24px rgba(198,29,34,.16);
}
.cookieInfoContent h5{
  margin: 0 0 7px;
  font-size: 14px;
  line-height:1.2;
  font-weight: 1200;
  color: var(--ink);
}
.cookieInfoContent p{
  margin:0;
  font-size: 13px;
  line-height:1.62;
  font-weight:900;
  color: rgba(10,34,20,.70);
}
.cookieInfoContent .infoNote{
  margin-top: 12px;
  background: rgba(25,75,48,.06);
}
/* Corectare poziționare switch-uri Preferințe cookie */
.cookieSwitch {
  position: relative !important;
  display: inline-block !important;

  width: 64px !important;
  height: 36px !important;
  flex: 0 0 64px !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Checkbox-ul invizibil, dar clickabil */
.cookieSwitch > input {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  opacity: 0;
  cursor: pointer;
}

/* Fundalul switch-ului */
.cookieSwitch > .cookieSlider {
  position: absolute !important;
  inset: 0 !important;

  width: auto !important;
  height: auto !important;

  border-radius: 999px !important;
  box-sizing: border-box;
}

/* Cercul alb */
.cookieSwitch > .cookieSlider::before {
  content: "";

  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  left: 4px !important;
  right: auto !important;

  width: 28px !important;
  height: 28px !important;

  margin: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box;

  transform: translate(0, -50%) !important;
  transition: transform 0.22s ease !important;
}

/* Poziția cercului când switch-ul este activ */
.cookieSwitch > input:checked + .cookieSlider::before {
  transform: translate(28px, -50%) !important;
}

/* Switch-ul blocat – cookies necesare */
.cookieSwitch.isLocked > input {
  cursor: not-allowed;
}
.vitallInfoFoot{
  background: rgba(10,34,20,.035);
  border-top: 1px solid rgba(10,34,20,.10);
}

/* Titlul din hero putin mai mic, fara sa afecteze cookie popup-ul. */
#acasa .heroHeadline{
  font-size: clamp(26px, 3.85vw, 48px);
}

@media (max-width: 980px){
  #acasa .heroHeadline{ font-size: clamp(27px, 8.7vw, 40px); }
  .cookieInfoContent .infoGrid,
  .cookieInfoContent .infoGrid.twoCols{ grid-template-columns: 1fr; }
  .vitallInfoBackdrop .vitallInfoHead h4{ font-size: 18px; }
}
@media (max-width: 520px){
  #acasa .heroHeadline{ font-size: clamp(26px, 9.5vw, 38px); }
}

/* =========================================================
   HERO - titlu mai mic (doar main.css)
   ========================================================= */
#acasa .heroHeadline{
  font-size: clamp(22px, 3.15vw, 39px) !important;
  line-height: 1.03;
  max-width: 520px;
}

@media (max-width: 980px){
  #acasa .heroHeadline{
    font-size: clamp(24px, 7.4vw, 34px) !important;
    max-width: 430px;
  }
}

@media (max-width: 520px){
  #acasa .heroHeadline{
    font-size: clamp(23px, 8.2vw, 31px) !important;
    max-width: 360px;
  }
}

/* =========================================================
   TEXTE APROBATE 02.09.2026
   Noutățile sunt afișate în carduri late, fără trunchiere.
   ========================================================= */
#noutati .newsGrid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}

#noutati .newsCard.is-static{
  cursor: default;
}

#noutati .newsCard.is-static:hover{
  transform: none;
  border-color: rgba(10,34,20,.10) !important;
}

#noutati .newsTitle{
  font-size: 16px;
  line-height: 1.3;
}

#noutati .newsText{
  display: block;
  overflow: visible;
  font-size: 14px;
  line-height: 1.62;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

#despre .vitallWhyPremiumBlock{
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 30px);
}

#despre .vitallWhyPremiumBlock p{
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.72;
}

@media (max-width: 980px){
  #noutati .newsGrid{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  #noutati .newsText{
    display: block;
    overflow: visible;
    font-size: 14px;
    -webkit-line-clamp: unset;
  }
}

/* =========================================================
   ICONITE MARKETING - meniu, titluri si De ce Puiul Vitall
   ========================================================= */
.marketingPictogram,
.whyClaimIcon{
  display:block;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.navLink{
  min-height:56px;
  padding:7px 10px;
  gap:9px;
}

.navPictogram{
  width:40px;
  height:40px;
  min-width:40px;
  flex:0 0 40px;
  filter:drop-shadow(0 5px 8px rgba(10,34,20,.16));
  transition:transform .18s ease, filter .18s ease;
}

.navLink:hover .navPictogram,
.navLink.active .navPictogram{
  transform:scale(1.06);
  filter:drop-shadow(0 7px 11px rgba(10,34,20,.22));
}

.secHeader h2,
.whyHeader h2{
  display:flex;
  align-items:center;
  gap:12px;
}

.sectionPictogram{
  width:60px;
  height:60px;
  min-width:60px;
  flex:0 0 60px;
  filter:drop-shadow(0 8px 14px rgba(10,34,20,.18));
}

#despre .whyHeader .sectionPictogram,
#retete .sectionPictogram{
  filter:drop-shadow(0 9px 15px rgba(0,0,0,.26));
}

#despre .whySideBtn{
  padding:10px 12px;
}

#despre .whySideBtn .t{
  display:flex;
  align-items:center;
  gap:12px;
  line-height:1.2;
}

#despre .whySideBtn .t > .whyClaimIcon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  flex:0 0 44px;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.22));
}

#despre .whySideBtn small{
  margin-left:56px;
  margin-top:3px;
}

#despre .whyIconBtn{
  width:58px;
  height:58px;
  flex:0 0 58px;
  padding:3px;
}

#despre .whyIconBtn > .whyClaimIcon{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.24));
}

#despre .whySideBtn .whyHubbardIcon,
#despre .whyIconBtn .whyHubbardIcon{
  border-radius:999px !important;
  background:rgba(255,255,255,.96) !important;
  padding:2px;
}

#despre .vitallWhyBadgeIcon{
  width:76px;
  height:76px;
  margin-bottom:10px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#despre .vitallWhyBadgeIcon > .whyClaimIcon{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 8px 14px rgba(10,34,20,.20));
}

#despre .vitallWhyBadgeIcon > .whyHubbardIcon{
  border-radius:999px !important;
  background:#fff !important;
  padding:3px;
}

@media (max-width: 980px){
  .drawer .navPictogram{
    width:38px;
    height:38px;
    min-width:38px;
    flex-basis:38px;
  }

  .sectionPictogram{
    width:52px;
    height:52px;
    min-width:52px;
    flex-basis:52px;
  }
}

@media (max-width: 520px){
  .drawer .navLink{
    min-height:54px;
  }

  .sectionPictogram{
    width:46px;
    height:46px;
    min-width:46px;
    flex-basis:46px;
  }

  #despre .whyHeader h2,
  .secHeader h2{
    gap:9px;
  }

  #despre .whyIconBtn{
    width:54px;
    height:54px;
    flex-basis:54px;
  }

  #despre .whyIconBtn > .whyClaimIcon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
  }

  #despre .vitallWhyBadgeIcon{
    width:68px;
    height:68px;
  }

  #despre .vitallWhyBadgeIcon > .whyClaimIcon{
    width:64px !important;
    height:64px !important;
    min-width:64px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .navPictogram{
    transition:none;
  }
}

/* =========================================================
   TIPOGRAFIE VITALL — inspirată din manșoanele de ambalaj
   Roboto Condensed păstrează aspectul compact al materialelor
   tipărite, iar fallback-urile mențin lizibilitatea fără CDN.
   ========================================================= */
:root{
  --font-vitall: "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
}

body,
button,
input,
select,
textarea{
  font-family: var(--font-vitall);
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

body{
  font-weight: 400;
  letter-spacing: .005em;
}

strong,
b{
  font-weight: 700;
}

/* Titlurile reproduc caracterul compact și ferm al ambalajului. */
.heroHeadline,
.whyHeader h2,
.secHeader h2,
.panelHead h3,
.modalHead h4,
.prodName,
#noutati .newsTitle,
#retete .recipeTitle,
.whyBlock h3,
.storeItem strong,
.contactCard strong,
.cookieInfoContent h5,
.vitallInfoBackdrop .vitallInfoHead h4{
  font-family: var(--font-vitall);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -.018em;
}

.heroHeadline{
  line-height: .98;
  letter-spacing: -.025em;
}

/* Contur mai fin, apropiat de textele albe imprimate pe roșu. */
#acasa .heroHeadline,
#despre .whyHeader h2{
  text-shadow:
    0 2px 0 rgba(5, 74, 40, .86),
    0 5px 16px rgba(0, 0, 0, .24);
}

#acasa .heroSub,
#acasa .bulletLink strong,
#despre .whyHeader p{
  text-shadow:
    0 1px 1px rgba(0, 0, 0, .72),
    0 4px 12px rgba(0, 0, 0, .20);
}

/* Meniu, butoane și etichete: greutate clară, fără aspect masiv. */
.navLink,
.pillBtn,
.pillBtnWhite,
.langTag,
label,
.badge,
#retete .recipeBtn,
.cookieBtn,
.cookieChoice{
  font-weight: 700;
  letter-spacing: .01em;
}

#acasa .bulletLink strong,
#despre .whySideBtn .t{
  font-weight: 800;
  letter-spacing: .005em;
}

/* Textele lungi rămân aerisite și ușor de citit inclusiv pe mobil. */
.heroSub,
.whyHeader p,
.secHeader p,
.panelHead p,
.prodDesc,
.whyBlock p,
.whyList,
#noutati .newsText,
#noutati .newsMeta,
#retete .recipeText,
.storeItem small,
.modalHead p,
.contactCard,
.cookieInfoContent p,
.cookieInfoContent .infoLead{
  font-weight: 500;
}

#acasa .bulletLink small,
#despre .whySideBtn small{
  font-weight: 600;
}

@media (max-width: 520px){
  .heroHeadline,
  .whyHeader h2,
  .secHeader h2{
    letter-spacing: -.014em;
  }
}

/* =========================================================
   UNDE NE GĂSEȘTI — hartă și locații din tabela HARTA
   ========================================================= */
#gasesti{
  --find-green: #194b30;
  --find-green-dark: #123c27;
  --find-red: #c61d22;
  --find-gold: #c7a35a;
  --find-cream: #fffaf0;
}

#gasesti .findSectionCard{
  background:
    radial-gradient(700px 340px at 100% 0%, rgba(199,163,90,.15), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,251,248,.84));
  border-color: rgba(25,75,48,.16);
}

#gasesti .secPad{
  gap: 12px;
  padding: clamp(14px, 1.6vw, 20px);
}

#gasesti .secHeader{
  flex: 0 0 auto;
  align-items: center;
}

#gasesti .secHeader h2{
  color: var(--find-green-dark);
}

#gasesti .secHeader p{
  max-width: 720px;
  margin-top: 5px;
}

#gasesti .findHeaderBadge{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid rgba(25,75,48,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 10px 28px rgba(10,34,20,.08);
  color: var(--find-green-dark);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

#gasesti .findHeaderBadge i{
  color: var(--find-red);
  font-size: 15px;
}

#gasesti .findPanel{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(25,75,48,.14);
  border-radius: 26px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 20px 56px rgba(10,34,20,.12);
}

#gasesti .findToolbar{
  display: grid;
  grid-template-columns: minmax(200px, .65fr) minmax(520px, 1.35fr);
  align-items: center;
  gap: 18px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(25,75,48,.10);
  background:
    linear-gradient(100deg, rgba(25,75,48,.065), rgba(199,163,90,.07)),
    rgba(255,255,255,.82);
}

#gasesti .findToolbarIntro p{
  margin: 4px 0 0;
  color: rgba(10,34,20,.68);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

#gasesti .findEyebrow{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--find-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1.2;
  text-transform: uppercase;
}

#gasesti .findFilters{
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

#gasesti .field{
  min-width: 0;
  margin: 0;
  gap: 5px;
}

#gasesti .field label{
  color: rgba(8,77,42,.84);
  font-size: 12px;
  font-weight: 700;
}

#gasesti .field select{
  height: 44px;
  padding: 0 38px 0 12px;
  border-color: rgba(25,75,48,.17);
  border-radius: 13px;
  background: rgba(255,255,255,.96);
  color: var(--find-green-dark);
  font-weight: 600;
  cursor: pointer;
}

#gasesti .field select:focus-visible,
#gasesti .findResetBtn:focus-visible,
#gasesti .findContactBtn:focus-visible,
#gasesti .storeItem:focus-visible{
  outline: 3px solid rgba(198,29,34,.28);
  outline-offset: 2px;
}

#gasesti .findResetBtn{
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid rgba(25,75,48,.18);
  border-radius: 13px;
  background: var(--find-green);
  box-shadow: 0 9px 20px rgba(25,75,48,.17);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, opacity .16s ease;
}

#gasesti .findResetBtn:hover:not(:disabled){
  transform: translateY(-1px);
  background: var(--find-green-dark);
}

#gasesti .findResetBtn:disabled{
  opacity: .42;
  cursor: default;
  box-shadow: none;
}

#gasesti .findContent{
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(285px, .72fr);
}

#gasesti .mapPanel{
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-right: 1px solid rgba(25,75,48,.10);
}

#gasesti .mapPanelHead{
  flex: 0 0 auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px 10px;
}

#gasesti .mapPanelHead h3,
#gasesti .resultsHead h3{
  margin: 0;
  color: var(--find-green-dark);
  font-family: var(--font-vitall);
  font-weight: 800;
  letter-spacing: -.012em;
}

#gasesti .mapPanelHead h3{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
}

#gasesti .mapPanelHead h3 i{
  color: var(--find-red);
}

#gasesti .mapPanelHead p{
  margin: 3px 0 0;
  color: rgba(10,34,20,.64);
  font-size: 12px;
  font-weight: 600;
}

#gasesti .mapHint{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(10,34,20,.60);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

#gasesti .mapHint i{
  color: var(--find-gold);
}

#gasesti .mapBox{
  flex: 1 1 auto;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(25,75,48,.13);
  border-radius: 19px;
  background:
    radial-gradient(circle at 50% 50%, rgba(199,163,90,.12), transparent 58%),
    #edf4ef;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

#gasesti #map{
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #edf4ef;
  font-family: var(--font-vitall);
}

#gasesti .findLoading,
#gasesti .mapState{
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: rgba(8,77,42,.76);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

#gasesti .findSpinner{
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 3px solid rgba(25,75,48,.17);
  border-top-color: var(--find-red);
  border-radius: 50%;
  animation: findSpin .75s linear infinite;
}

@keyframes findSpin{
  to{ transform: rotate(360deg); }
}

#gasesti .resultsPanel{
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,250,240,.76), rgba(255,255,255,.88));
}

#gasesti .resultsHead{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 2px 10px;
}

#gasesti .resultsHead h3{
  margin-top: 2px;
  font-size: 17px;
}

#gasesti .storeCount{
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(25,75,48,.13);
  border-radius: 999px;
  background: var(--find-green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

#gasesti .storeList{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 5px 0 0;
  border: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(25,75,48,.30) transparent;
  scrollbar-width: thin;
}

#gasesti .storeList::-webkit-scrollbar{
  width: 7px;
}

#gasesti .storeList::-webkit-scrollbar-thumb{
  border-radius: 99px;
  background: rgba(25,75,48,.28);
}

#gasesti .storeItem{
  width: 100%;
  display: block;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(25,75,48,.12);
  border-radius: 15px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(10,34,20,.055);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

#gasesti .storeItem + .storeItem{
  margin-top: 8px;
}

#gasesti .storeItem:hover{
  transform: translateY(-1px);
  border-color: rgba(198,29,34,.28);
  box-shadow: 0 12px 25px rgba(10,34,20,.09);
}

#gasesti .storeItemTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

#gasesti .storeRetailer{
  color: var(--find-red);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#gasesti .storeArrow{
  color: rgba(25,75,48,.55);
  font-size: 10px;
}

#gasesti .storeItem strong{
  margin: 0 0 4px;
  color: var(--find-green-dark);
  font-size: 14px;
  line-height: 1.2;
}

#gasesti .storeItem small{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: rgba(10,34,20,.64);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
}

#gasesti .storeItem small i{
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--find-gold);
}

#gasesti .storeState{
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px;
  border: 1px dashed rgba(25,75,48,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.66);
  text-align: center;
}

#gasesti .storeState strong{
  color: var(--find-green-dark);
  font-size: 14px;
}

#gasesti .storeState small{
  max-width: 270px;
  color: rgba(10,34,20,.64);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

#gasesti .storeStateIcon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(198,29,34,.09);
  color: var(--find-red);
}

#gasesti .findContactBar{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(25,75,48,.10);
  border-radius: 14px;
  background: rgba(25,75,48,.055);
}

#gasesti .findContactCopy{
  min-width: 0;
}

#gasesti .findContactCopy strong,
#gasesti .findContactCopy a{
  display: block;
}

#gasesti .findContactCopy strong{
  color: var(--find-green-dark);
  font-size: 12.5px;
  font-weight: 800;
}

#gasesti .findContactCopy a{
  margin-top: 2px;
  overflow: hidden;
  color: rgba(10,34,20,.65);
  font-size: 10.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#gasesti .findContactBtn{
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(198,29,34,.17);
  border-radius: 10px;
  background: #fff;
  color: var(--find-red);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

/* Leaflet: controale și pinuri integrate în identitatea vizuală Vitall. */
#gasesti .leaflet-control-zoom{
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10,34,20,.18);
}

#gasesti .leaflet-control-zoom a{
  color: var(--find-green-dark);
}

#gasesti .leaflet-control-attribution{
  padding: 2px 6px;
  background: rgba(255,255,255,.82);
  font-size: 9px;
}

#gasesti .vitallMapMarkerWrap{
  border: 0;
  background: transparent;
}

#gasesti .vitallMapMarker{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  position: relative;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--find-red);
  box-shadow: 0 7px 16px rgba(10,34,20,.30);
  transform: rotate(-45deg);
}

#gasesti .vitallMapMarker::before{
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--find-green);
}

#gasesti .vitallMapMarker span{
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

#gasesti .leaflet-popup-content-wrapper{
  border: 1px solid rgba(25,75,48,.13);
  border-radius: 15px;
  box-shadow: 0 15px 38px rgba(10,34,20,.20);
}

#gasesti .leaflet-popup-content{
  margin: 13px 15px;
  font-family: var(--font-vitall);
}

#gasesti .vitallMapPopup span,
#gasesti .vitallMapPopup strong,
#gasesti .vitallMapPopup small{
  display: block;
}

#gasesti .vitallMapPopup span{
  margin-bottom: 3px;
  color: var(--find-red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#gasesti .vitallMapPopup strong{
  color: var(--find-green-dark);
  font-size: 14px;
  line-height: 1.25;
}

#gasesti .vitallMapPopup small{
  margin-top: 5px;
  color: rgba(10,34,20,.66);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}

#gasesti .select2-container--default .select2-selection--single{
  height: 44px;
  border-color: rgba(25,75,48,.17);
  border-radius: 13px;
  background: rgba(255,255,255,.96);
}

#gasesti .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 44px;
  color: var(--find-green-dark);
  font-weight: 600;
}

#gasesti .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 44px;
}

@media (max-width: 1060px){
  #gasesti .findToolbar{
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #gasesti .findToolbarIntro p{
    display: none;
  }
}

@media (max-width: 980px){
  #gasesti{
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  #gasesti .container,
  #gasesti .findSectionCard,
  #gasesti .secPad{
    height: auto;
    min-height: calc(100svh - 20px);
  }

  #gasesti .findPanel{
    overflow: visible;
  }

  #gasesti .findContent{
    grid-template-columns: 1fr;
  }

  #gasesti .mapPanel{
    border-right: 0;
    border-bottom: 1px solid rgba(25,75,48,.10);
  }

  #gasesti .mapBox,
  #gasesti #map{
    height: 430px;
    min-height: 430px;
  }

  #gasesti .resultsPanel{
    min-height: 390px;
  }

  #gasesti .storeList{
    max-height: 430px;
  }
}

@media (max-width: 680px){
  #gasesti .secHeader{
    align-items: flex-start;
  }

  #gasesti .findHeaderBadge,
  #gasesti .mapHint{
    display: none;
  }

  #gasesti .findToolbar{
    padding: 12px;
  }

  #gasesti .findFilters{
    grid-template-columns: 1fr;
  }

  #gasesti .findResetBtn{
    width: 100%;
  }

  #gasesti .mapBox,
  #gasesti #map{
    height: clamp(320px, 56vh, 400px);
    min-height: 320px;
  }

  #gasesti .mapPanel,
  #gasesti .resultsPanel{
    padding: 10px;
  }

  #gasesti .resultsPanel{
    min-height: 360px;
  }

  #gasesti .storeList{
    max-height: 400px;
  }
}

@media (max-height: 760px) and (min-width: 981px){
  #gasesti .secPad{
    padding: 12px;
    gap: 9px;
  }

  #gasesti .secHeader p,
  #gasesti .findToolbarIntro p{
    display: none;
  }

  #gasesti .findToolbar{
    padding-block: 9px;
  }

  #gasesti .mapPanel,
  #gasesti .resultsPanel{
    padding: 9px;
  }

  #gasesti .mapBox,
  #gasesti .findLoading,
  #gasesti .mapState{
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce){
  #gasesti .findSpinner{
    animation-duration: 1.5s;
  }

  #gasesti .storeItem,
  #gasesti .findResetBtn{
    transition: none;
  }
}

/* =========================================================
   PALETĂ ȘI LAYOUT RESPONSIV 2026-09
   Fundal exterior static, fără frunze animate. Culorile sunt
   limitate la containerele centrale și folosesc paleta aleasă.
   ========================================================= */
.theme-green,
.theme-red{
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.theme-green,
.theme-red{ background: transparent; }

.theme-green::before,
.theme-red::before{
  content: none !important;
  display: none !important;
}

.theme-white{
  background: transparent;
}

section{
  height: auto !important;
  min-height: 100svh;
  overflow: visible;
}

.container{
  height: auto !important;
  min-height: 100svh;
}

.card,
.heroGrid,
.secPad,
.whyShell{
  height: auto !important;
}

.card{
  min-height: calc(100svh - var(--pad) - var(--pad));
}

#acasa > .container > .card,
#produse > .container > .card,
#noutati > .container > .card,
#gasesti > .container > .card,
#retete > .container > .card{
  background: var(--section-green-dark) !important;
  border-color: rgba(255,255,255,.24) !important;
}

#despre > .container > .card{
  background: var(--section-red-dark) !important;
  border-color: rgba(255,255,255,.24) !important;
}

#acasa .bulletLink{
  background: var(--green2) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#acasa .bulletLink:hover{
  background: #0d321f !important;
}

#produse .secHeader h2,
#noutati .secHeader h2,
#gasesti .secHeader h2,
#retete .secHeader h2{
  color: #fff;
}

#produse .secHeader p,
#noutati .secHeader p,
#gasesti .secHeader p,
#retete .secHeader p{
  color: rgba(255,255,255,.90);
}

/* Carusel 2D cu un cadru stabil, independent de proporțiile fotografiilor. */
#acasa .heroGrid{
  min-height: max(calc(100svh - var(--pad) - var(--pad)), 760px);
  align-items: stretch;
}

#acasa .heroRight{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-block-start: clamp(7rem, 16vh, 10rem);
  perspective: none !important;
}

#acasa .heroProductCarousel{
  position: relative;
  display: block;
  width: min(100%, 760px);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 11;
  margin-inline: auto;
  isolation: isolate;
  overflow: visible;
  perspective: none !important;
  transform: none !important;
  animation: none !important;
}

#acasa .heroProductCarousel::before{
  content: "";
  position: absolute;
  inset: 18% 11% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.20), transparent 72%);
  filter: blur(24px);
  pointer-events: none;
}

#acasa .heroProductSlide{
  /* Inclusiv stratul invizibil rămâne în afara fluxului: imaginea verticală
     de grill nu mai poate mări rândul sau deplasa următoarea caserolă. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transform: none;
  transform-origin: center;
  filter: drop-shadow(0 24px 24px rgba(10,34,20,.28));
  transition: opacity 720ms ease;
  will-change: opacity;
  pointer-events: none;
}

#acasa .heroProductSlide.is-active{
  z-index: 2;
  opacity: 1;
}

#acasa .heroProductSlide.is-leaving{
  z-index: 1;
  opacity: 0;
}

#acasa .heroProductCarousel:focus-visible{
  outline: 3px solid rgba(255,255,255,.88);
  outline-offset: 8px;
  border-radius: 24px;
}

/* Conținutul poate crește la zoom fără să fie tăiat. */
#produse .secPad,
#noutati .secPad,
#retete .secPad{
  min-height: calc(100svh - var(--pad) - var(--pad));
}

#produse .carousel,
#noutati .panel,
#retete .panel{
  min-height: clamp(560px, 66vh, 760px);
}

#despre .whyShell{
  min-height: calc(100svh - var(--pad) - var(--pad));
  grid-template-rows: auto minmax(300px, 34vh) minmax(0, auto);
}

/* Aceste dimensiuni aparțin exclusiv variantei desktop. */
@media (min-width: 981px){
  #despre .whyTop{
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    min-height: 300px;
  }

  #despre .whySide{
    overflow: hidden;
  }

  #despre .whySideBtn{
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding: clamp(7px, 1.15vh, 10px) 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #despre .whySideBtn .t,
  #despre .whySideBtn small{
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #despre .whySideBtn .t{
    font-size: clamp(13px, 1.35vw, 16px);
  }

  #despre .whySideBtn small{
    font-size: clamp(10px, 1.05vw, 12px);
    line-height: 1.2;
  }
}

@media (max-height: 800px) and (min-width: 981px){
  #acasa .heroRight{
    padding-block-start: clamp(4.5rem, 11vh, 6.5rem);
  }

  #acasa .heroLeft{
    gap: 10px;
  }

  #acasa .bullets{
    gap: 8px;
  }

  #despre .whyShell{
    gap: 10px;
    padding: 12px;
  }

  #despre .whyHeader p{
    margin-top: 6px;
    line-height: 1.45;
  }
}

@media (max-width: 980px){
  body{
    background-attachment: scroll;
    scroll-snap-type: none !important;
  }

  #acasa .heroGrid{
    min-height: calc(100svh - 20px);
  }

  #acasa .heroRight{
    display: none;
    padding-block-start: 0;
  }

  #despre .whyShell{
    grid-template-rows: auto auto auto;
  }
}

@media (prefers-reduced-motion: reduce){
  #acasa .heroProductSlide{
    transition: opacity 160ms linear;
    transform: none !important;
  }
}

/* =========================================================
   CORECȚII CARUSELE ȘI HARTĂ 2026-09-07
   ========================================================= */
@media (min-width: 981px){
  /* Șase noutăți pe pagină: trei coloane și două rânduri. */
  #noutati .newsGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #noutati .newsImg{
    height: clamp(90px, 12vh, 115px);
  }

  #noutati .newsBody{
    padding: 10px;
    gap: 5px;
  }

  #noutati .newsTitle{
    font-size: 15px;
    line-height: 1.22;
  }

  #noutati .newsText{
    font-size: clamp(12px, 1.35vh, 14px);
    line-height: 1.45;
  }

  /* Harta rămâne încadrată într-un singur ecran, ca Noutăți. */
  #gasesti{
    height: 100svh !important;
    min-height: 720px;
    overflow: hidden;
  }

  #gasesti > .container{
    height: 100svh !important;
    min-height: 720px;
  }

  #gasesti > .container > .card{
    height: calc(100svh - var(--pad) - var(--pad)) !important;
    min-height: 684px;
    max-height: 960px;
    overflow: hidden !important;
  }

  #gasesti .secPad{
    height: 100% !important;
    min-height: 0;
    overflow: hidden;
  }

  #gasesti .findPanel{
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  #gasesti .findContent{
    min-height: 0;
    overflow: hidden;
  }

  #gasesti .mapPanel,
  #gasesti .resultsPanel{
    min-height: 0;
    overflow: hidden;
  }

  #gasesti .mapBox{
    flex: 1 1 0;
    height: auto !important;
    min-height: 0;
  }

  #gasesti #map{
    height: 100% !important;
    min-height: 0;
  }

  #gasesti .storeList{
    flex: 1 1 0;
    min-height: 0;
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

/* =========================================================
   ALINIERE PRODUSE, SUBTITLURI ȘI CTA 2026-09-08
   ========================================================= */

/* Conținutul fiecărui slide este centrat pe verticală în carusel.
   Poziționarea absolută face track-ul să preia înălțimea reală a panoului,
   inclusiv atunci când aceasta rezultă din flex/min-height. */
@media (min-width: 981px){
  #carousel .carouselTrack{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    align-items: stretch;
  }

  #carousel .slide{
    height: 100%;
    align-items: center;
    align-content: center;
  }
}

/* Subtitlurile secțiunilor sunt puțin mai mari și rămân responsive. */
#acasa .heroSub,
#despre .whyHeader p,
#produse .secHeader p,
#noutati .secHeader p,
#gasesti .secHeader p,
#retete .panelHead p{
  font-size: clamp(15px, 1.2vw, 17px);
}

/* Cele două butoane ocupă împreună lățimea celor trei casete de deasupra. */
#acasa .heroCtas{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100% !important;
  max-width: 640px;
  gap: 10px !important;
}

#acasa .heroCtas .pillBtn{
  width: 100%;
  min-width: 0;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

@media (max-width: 520px){
  #acasa .heroCtas{
    grid-template-columns: 1fr;
  }

  #acasa .heroSub,
  #despre .whyHeader p,
  #produse .secHeader p,
  #noutati .secHeader p,
  #gasesti .secHeader p,
  #retete .panelHead p{
    font-size: 15px;
  }
}

/* Video „De ce Puiul Vitall” pe telefon.
   Anulează coloana desktop de 280–320px care micșora videoclipul la o bandă. */
@media (max-width: 980px){
  #despre .whyTop{
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  #despre .whyVideoCard{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: clamp(210px, 56vw, 280px) !important;
    min-height: 210px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  #despre .whyVideo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #despre .whyDock{
    max-width: calc(100% - 20px);
    z-index: 3;
  }

  /* Meniul mobil rămâne deasupra footerului (footerul are z-index 200). */
  .floatingMenuBtn{
    z-index: 1000 !important;
    pointer-events: auto !important;
  }

  .drawerBackdrop{
    z-index: 1010 !important;
  }

  .drawer{
    z-index: 1020 !important;
  }
}

/* =========================================================
   CORECTII POZITIONARE 15.09.2026
   1) Hero desktop: titlu + subtitlu pe ambele coloane,
      casetele si produsul pe acelasi rand, CTA centrate dedesubt.
   2) Produse mobil: sageti jos, fara suprapunere peste text.
   3) Noutati mobil: card mai mare + sageti jos.
   ========================================================= */

/* 1. HERO - doar desktop */
@media (min-width: 981px){
  #acasa .heroGrid{
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto auto auto auto;
    align-content: center;
    align-items: start;
    column-gap: 22px;
    row-gap: 14px;
  }

  /* Copiii din heroLeft devin elemente ale gridului principal.
     Astfel titlul/subtitlul pot ocupa ambele coloane fara sa mutam HTML-ul. */
  #acasa .heroLeft{
    display: contents;
  }

  #acasa .brandRow{
    grid-column: 1;
    grid-row: 1;
    padding-left: 6px;
  }

  #acasa .heroHeadline{
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none !important;
    padding: 0 24px 0 6px;
    position: relative;
    z-index: 4;
  }

  #acasa .heroSub{
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    max-width: none !important;
    padding: 0 24px 0 6px;
    position: relative;
    z-index: 4;
  }

  #acasa .bullets{
    grid-column: 1;
    grid-row: 4;
    align-self: center;
    width: 100%;
    max-width: 640px;
    margin-top: 0;
    padding-left: 6px;
  }

  #acasa .heroCtas{
    grid-column: 1 / -1;
    grid-row: 5;
    justify-self: center;
    width: min(100%, 520px) !important;
    max-width: 520px;
    margin: 16px auto 0 !important;
    padding: 0;
    position: relative;
    z-index: 4;
  }

  /* Cele trei casete si fotografia au acelasi centru vertical.
     CTA-urile au rand separat si nu influenteaza pozitia produsului. */
  #acasa .heroRight{
    grid-column: 2;
    grid-row: 4;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
  }

  #acasa .heroProductCarousel{
    width: min(100%, 700px);
    margin: 0 auto;
  }
}

/* 2 + 3. CARUSELE - doar telefon/tableta */
@media (max-width: 980px){
  /* PRODUSE: rezervam zona de jos pentru controale */
  #carousel .slide{
    padding: 14px 14px 118px !important;
  }

  #carousel .navArrow,
  #carousel .navArrow:hover,
  #carousel .navArrow:active{
    top: auto !important;
    bottom: 54px !important;
    transform: none !important;
  }

  #carousel .navArrow.left{
    left: 18px !important;
  }

  #carousel .navArrow.right{
    right: 18px !important;
  }

  #carousel .dots{
    bottom: 18px !important;
  }

  /* NOUTATI: pe mobil JS-ul afiseaza deja 1 noutate/pagina.
     Folosim tot spatiul pentru acel card, nu doua randuri cu unul gol. */
  #noutati .panel{
    min-height: clamp(680px, 82svh, 780px) !important;
  }

  #noutati .panelBody,
  #noutati .newsCarousel,
  #noutati .newsTrack,
  #noutati .newsSlide,
  #noutati .newsGrid{
    min-height: 0;
  }

  #noutati .newsSlide{
    padding: 12px 12px 118px !important;
  }

  #noutati .newsGrid{
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch;
  }

  #noutati .newsCard{
    height: 100%;
    min-height: 0;
  }

  #noutati .newsImg{
    height: clamp(155px, 24vh, 210px) !important;
  }

  #noutati .newsBody{
    padding: 14px !important;
    gap: 9px !important;
  }

  #noutati .newsTitle{
    font-size: 16px !important;
  }

  #noutati .newsText{
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  #noutati .navArrow,
  #noutati .navArrow:hover,
  #noutati .navArrow:active{
    top: auto !important;
    bottom: 54px !important;
    transform: none !important;
  }

  #noutati .navArrow.left{
    left: 18px !important;
  }

  #noutati .navArrow.right{
    right: 18px !important;
  }

  #noutati .dots{
    bottom: 18px !important;
  }
}

/* =========================================================
   SAGETI RETETE MOBIL
   2026-09-14 v2
   ========================================================= */

/* TELEFON / TABLETA
   Retete: aceeasi pozitie a controalelor ca la Produse si Noutati. */
@media (max-width: 980px){
  #retete .recSlide{
    padding: 12px 12px 118px !important;
  }

  #retete .recipesCarousel .navArrow,
  #retete .recipesCarousel .navArrow:hover,
  #retete .recipesCarousel .navArrow:active{
    top: auto !important;
    bottom: 54px !important;
    transform: none !important;
  }

  #retete .recipesCarousel .navArrow.left{
    left: 18px !important;
  }

  #retete .recipesCarousel .navArrow.right{
    right: 18px !important;
  }

  #retete .recipesCarousel .dots{
    bottom: 18px !important;
  }
}

/* =========================================================
   HERO PRODUSE PE TELEFON - 08.10.2026
   - afiseaza caruselul din hero si pe telefon
   - logo in stanga + produs in dreapta, in acelasi rand
   - titlul, subtitlul, avantajele si CTA-urile raman dedesubt
   - imaginea din hero este apasabila si deschide produsul corespondent
   ========================================================= */

/* Pe toate rezolutiile, produsul din hero comunica faptul ca este interactiv. */
#acasa .heroProductCarousel{
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (max-width: 980px){
  /* Transformam hero-ul mobil intr-un grid clar:
     randul 1 = logo + produs,
     randurile urmatoare = titlu, subtitlu, avantaje, CTA. */
  #acasa .heroGrid{
    display: grid !important;
    grid-template-columns: minmax(0, .43fr) minmax(0, .57fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    column-gap: 8px !important;
    row-gap: 10px !important;
    align-content: start !important;
    align-items: start !important;
    padding: 12px !important;
    position: relative;
  }

  /* Copiii heroLeft devin elemente directe ale gridului, la fel ca pe desktop. */
  #acasa .heroLeft{
    display: contents !important;
  }

  /* Primul rand are suficienta inaltime pentru suprapunerea eleganta peste val. */
  #acasa .brandRow{
    grid-column: 1;
    grid-row: 1;
    min-height: clamp(205px, 50vw, 230px);
    width: 100%;
    padding: 0 !important;
    display: flex;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    position: relative;
    z-index: 5;
  }

  #acasa .logoMain{
    width: clamp(92px, 27vw, 118px) !important;
  }

  /* Caruselul care era ascuns pe mobil este acum in dreapta logo-ului. */
  #acasa .heroRight{
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    position: relative !important;
    align-self: end !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    height: clamp(104px, 28vw, 132px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 0 5px !important;
    margin: 0 !important;
    z-index: 6;
    overflow: visible !important;
  }

  #acasa .heroProductCarousel{
    width: min(100%, 238px) !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    isolation: isolate;
    border-radius: 18px;
    transition: transform .16s ease, filter .16s ease;
  }

  #acasa .heroProductCarousel::before{
    inset: 10% 6% 2% !important;
    filter: blur(14px) !important;
    opacity: .72;
  }

  #acasa .heroProductCarousel:active{
    transform: scale(.975) !important;
  }

  #acasa .heroProductSlide{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: drop-shadow(0 12px 13px rgba(10,34,20,.24)) !important;
  }

  /* Restul continutului continua pe toata latimea sub randul logo + produs. */
  #acasa .heroHeadline{
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #acasa .heroSub{
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #acasa .bullets{
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100% !important;
    max-width: none !important;
    margin-top: 2px !important;
    padding: 0 !important;
  }

  #acasa .heroCtas{
    grid-column: 1 / -1;
    grid-row: 5;
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
  }
}

/* Telefoane mai inguste: pastram produsul vizibil, fara sa strangem titlul. */
@media (max-width: 520px){
  #acasa .heroGrid{
    grid-template-columns: minmax(0, .44fr) minmax(0, .56fr) !important;
    column-gap: 5px !important;
  }

  #acasa .brandRow{
    min-height: clamp(195px, 52vw, 220px);
  }

  #acasa .heroRight{
    height: clamp(98px, 29vw, 124px) !important;
    padding-bottom: 4px !important;
  }

  #acasa .heroProductCarousel{
    width: min(100%, 220px) !important;
  }
}