/* ============================================================
   MOBILE HEADER + COS — acelasi limbaj ca railul de pe desktop
   (<=1024px). Bara e railul intors pe orizontala: carbune, flacara
   in stanga, "MENIU" cu cele doua linii asimetrice si punga in
   dreapta. Cosul se deschide ca o foaie care urca de jos.
   Incarcat ultimul, dupa mobile-polish.css, ca sa nu depinda de
   ordinea regulilor mai vechi din site.css.
   ============================================================ */

@media (max-width: 1024px){

  /* ---------- Bara ---------- */
  .site-header.site-header--home{
    --bar-h: 56px;
    box-sizing: border-box;
    height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
    align-items: center;
    background: rgba(17,15,10,.93);
    border-bottom: 1px solid var(--line-dark);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease;
  }
  /* Firul ember de sub bara: cat din pagina a fost parcurs (site.js). */
  .site-header.site-header--home::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--ember-deep), var(--ember-bright));
    transform-origin: 0 50%;
    transform: scaleX(var(--pf-scroll, 0));
    transition: transform .15s linear, opacity .3s ease;
    pointer-events: none;
  }

  /* ---------- Flacara (acasa) ---------- */
  .site-header .brand-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    transition: scale .3s cubic-bezier(.22,1,.36,1);
    animation: pf-hdr-rise .9s cubic-bezier(.22,1,.36,1) .1s both;
  }
  .site-header .brand-link:hover{ opacity: 1; }
  .site-header .brand-link:active{ scale: .9; }
  .site-header .brand-flame{
    display: block;
    width: 19px;
    height: 30px;
    object-fit: contain;
    animation: header-flame-pulse 1.1s ease-in-out .75s 1;
  }

  /* ---------- Meniu: eticheta + doua linii, ca pe rail ---------- */
  .site-header .header-right{ gap: 0; }
  .site-header .nav-toggle{
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 10px 0 12px;
    color: var(--cream);
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle-label{
    display: grid;
    justify-items: end;
    height: 14px;
    overflow: hidden;
    font: 500 11px/14px var(--utility);
    letter-spacing: .2em;
    margin-right: -.2em;
    animation: pf-hdr-rise .8s cubic-bezier(.22,1,.36,1) .2s both;
  }
  .nav-toggle-word{
    grid-area: 1 / 1;
    display: block;
    transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .4s ease;
  }
  .nav-toggle-word + .nav-toggle-word{ transform: translateY(100%); opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-word{ transform: translateY(-100%); opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-word + .nav-toggle-word{ transform: none; opacity: 1; }

  .site-header .nav-toggle-bars{
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
  }
  /* Inchis -> deschis: liniile se aduna intai la mijloc, apoi se rotesc
     cu o mica depasire. Inapoi: rotirea se desface intai, apoi se despart. */
  .site-header .nav-toggle-bars span{
    position: absolute;
    left: 0;
    right: auto;
    top: 6px;
    width: 20px;
    height: 1.5px;
    border-radius: 0;
    background: currentColor;
    transition:
      transform .32s cubic-bezier(.22,1,.36,1),
      top .32s cubic-bezier(.22,1,.36,1) .2s,
      width .45s cubic-bezier(.22,1,.36,1) .12s,
      background-color .3s ease;
    animation: pf-hdr-draw .9s cubic-bezier(.22,1,.36,1) .3s both;
  }
  .site-header .nav-toggle-bars span + span{
    top: 13px;
    width: 14px;
    animation-delay: .4s;
  }
  .site-header .nav-toggle[aria-expanded="true"] .nav-toggle-bars span{
    top: 10px;
    width: 20px;
    transform: rotate(45deg);
    transition:
      top .26s cubic-bezier(.22,1,.36,1),
      width .26s cubic-bezier(.22,1,.36,1),
      transform .55s cubic-bezier(.34,1.56,.64,1) .18s,
      background-color .3s ease;
  }
  .site-header .nav-toggle[aria-expanded="true"] .nav-toggle-bars span + span{ transform: rotate(-45deg); }
  /* Apasarea schimba asimetria, exact ca hover-ul de pe rail. */
  .site-header .nav-toggle[aria-expanded="false"]:active .nav-toggle-bars span{ width: 14px; top: 5px; }
  .site-header .nav-toggle[aria-expanded="false"]:active .nav-toggle-bars span + span{ width: 20px; top: 14px; }

  /* ---------- Punga ---------- */
  .site-header .cart-link{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s ease, scale .3s cubic-bezier(.22,1,.36,1);
    animation: pf-hdr-rise .8s cubic-bezier(.22,1,.36,1) .3s both;
  }
  .site-header .cart-link::before{
    content: '';
    position: absolute;
    left: -4px;
    top: 13px;
    width: 1px;
    height: 18px;
    background: var(--line-dark);
  }
  .site-header .cart-link:active{ scale: .9; }
  .site-header .cart-link svg{
    width: 21px;
    height: 21px;
    overflow: visible;
    transform-origin: 50% 100%;
  }
  .site-header .cart-link .cart-bag-handle{
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1);
  }
  .site-header .cart-link[aria-expanded="true"] .cart-bag-handle{ transform: translateY(-1.5px) scaleY(1.15); }
  .site-header .cart-link .cart-badge{
    top: 5px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    box-shadow: 0 0 0 2px #110f0a;
    font-variant-numeric: tabular-nums;
  }
  /* Un produs aterizeaza: punga tresare si se aseaza. */
  .site-header .cart-link.is-cart-added svg{ animation: pf-bag-drop .75s cubic-bezier(.22,1,.36,1); }

  @media (hover: hover){
    .site-header .nav-toggle[aria-expanded="false"]:hover .nav-toggle-bars span{ width: 14px; top: 5px; background: var(--ember-bright); }
    .site-header .nav-toggle[aria-expanded="false"]:hover .nav-toggle-bars span + span{ width: 20px; top: 14px; }
    .site-header .cart-link:hover{ color: var(--ember-bright); }
  }
  .site-header .nav-toggle:focus-visible,
  .site-header .cart-link:focus-visible,
  .site-header .brand-link:focus-visible{ outline: 2px solid var(--ember); outline-offset: -4px; }

  /* ---------- Meniul deschis: bara ramane deasupra panoului ---------- */
  .site-header.site-header--home.menu-open{
    background: #110f0a;
    border-bottom-color: var(--line-dark);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header.site-header--home.menu-open::after{ opacity: 0; }
  .site-header.menu-open .brand,
  .site-header.menu-open .nav-toggle,
  .site-header.menu-open .cart-link{ position: relative; z-index: 210; }
  /* Butonul de meniu devine butonul de inchidere; × separat nu mai e necesar. */
  #siteNav.nav-open > .mobile-nav-close{ display: none; }

  /* Panoul se deruleaza de sub bara, de sus in jos, ca o cortina, si se
     strange inapoi in ea la inchidere. Bara ramane opaca deasupra, deci
     marginea cortinei porneste mereu din linia ei de jos. */
  #siteNav.nav-open{
    padding-top: calc(80px + env(safe-area-inset-top, 0px));
    animation: pf-mnav-curtain-down .62s cubic-bezier(.76,0,.24,1) both;
  }
  #siteNav.nav-open.is-closing{ animation: pf-mnav-curtain-up .42s cubic-bezier(.76,0,.24,1) .06s both; }
  /* Stratul opac din spate (mobile-polish.css) acopera zonele sigure iOS.
     Apare abia cand cortina a ajuns jos — altfel ar intuneca pagina dintr-o
     data si cortina nu s-ar mai vedea — si dispare cand ea incepe sa urce. */
  html.pf-mobile-menu-open body::after{ animation: pf-mnav-cover 0s linear .62s both; }
  html.pf-mobile-menu-closing body::after{ display: none; }

  #siteNav.nav-open > a,
  #siteNav.nav-open > .menu-discovery,
  #siteNav.nav-open > .nav-social,
  #siteNav.nav-open > .nav-lang-mobile{ animation: pf-mnav-rise .75s cubic-bezier(.22,1,.36,1) both; }
  #siteNav.nav-open > a:nth-of-type(1){ animation-delay: .16s; }
  #siteNav.nav-open > a:nth-of-type(2){ animation-delay: .22s; }
  #siteNav.nav-open > a:nth-of-type(3){ animation-delay: .28s; }
  #siteNav.nav-open > a:nth-of-type(4){ animation-delay: .34s; }
  #siteNav.nav-open > .menu-discovery{ animation-delay: .42s; }
  #siteNav.nav-open > .nav-lang-mobile{ animation-delay: .48s; }
  /* Iesirea: continutul se retrage intai, cortina urca imediat dupa. */
  #siteNav.nav-open.is-closing > a,
  #siteNav.nav-open.is-closing > .menu-discovery,
  #siteNav.nav-open.is-closing > .nav-social,
  #siteNav.nav-open.is-closing > .nav-lang-mobile{ animation: pf-mnav-out .2s cubic-bezier(.55,0,1,.45) both; }

  /* ---------- Cosul: foaie de jos ---------- */
  #pf-cart-dialog{
    --sheet-backdrop: 1;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: none;
    max-height: min(86dvh, 760px);
    overflow: hidden;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border: 0;
    border-top: 1px solid rgba(254,255,253,.12);
    border-radius: 24px 24px 0 0;
    background:
      radial-gradient(130% 70% at 100% 0%, rgba(240,145,63,.13) 0%, rgba(240,145,63,0) 52%),
      var(--charcoal);
    box-shadow: 0 -24px 70px rgba(0,0,0,.45);
    color: var(--cream);
  }
  #pf-cart-dialog[open]{ display: flex; flex-direction: column; }
  #pf-cart-dialog::backdrop{
    background: rgba(17,15,10,calc(.6 * var(--sheet-backdrop, 1)));
    backdrop-filter: blur(calc(4px * var(--sheet-backdrop, 1)));
    -webkit-backdrop-filter: blur(calc(4px * var(--sheet-backdrop, 1)));
  }
  .pf-cart-handle{
    position: relative;
    display: block;
    flex: none;
    width: 40px;
    height: 4px;
    margin: 10px auto 2px;
    border-radius: 4px;
    background: rgba(254,255,253,.3);
    touch-action: none;
  }
  /* Zona de prindere e mai mare decat liniuta vizibila. */
  .pf-cart-handle::before{ content: ''; position: absolute; inset: -14px -64px; }
  #pf-cart-dialog .pf-cart-head{
    flex: none;
    padding: 12px 20px 16px;
    touch-action: none;
  }
  #pf-cart-dialog .pf-cart-head h2{
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 30px/1.1 var(--editorial);
    letter-spacing: -.02em;
  }
  .pf-cart-count{
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ember);
    color: var(--charcoal);
    font: 600 11px/1 var(--utility);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }
  #pf-cart-dialog .pf-cart-close{
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font: 300 24px/1 var(--utility);
    cursor: pointer;
    transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .25s ease, color .25s ease;
  }
  #pf-cart-dialog .pf-cart-close:active{ transform: rotate(90deg) scale(.9); border-color: var(--ember); color: var(--ember-bright); }
  #pf-cart-dialog .pf-cart-items{
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--line-dark);
  }
  #pf-cart-dialog .pf-cart-row{
    grid-template-columns: 72px minmax(0,1fr) auto;
    gap: 14px;
    padding: 18px 0;
    overflow: hidden;
  }
  #pf-cart-dialog .pf-cart-row:last-child{ border-bottom: 0; }
  #pf-cart-dialog .pf-cart-row img{ width: 72px; height: 84px; border-radius: 6px; background: var(--charcoal-soft); }
  #pf-cart-dialog .pf-cart-row strong{ font: 400 21px/1.15 var(--editorial); letter-spacing: -.01em; }
  #pf-cart-dialog .pf-cart-row small{ margin-top: 6px; }
  #pf-cart-dialog .pf-cart-price{ font: 500 13px/1.4 var(--utility); font-variant-numeric: tabular-nums; color: var(--cream); }
  #pf-cart-dialog .pf-cart-remove{
    min-height: 40px;
    padding: 10px 0 0;
    font: 500 12px/1.4 var(--utility);
    text-decoration: underline;
    text-decoration-color: rgba(240,145,63,.45);
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .pf-cart-empty-mark{ display: block; width: 30px; height: 46px; object-fit: contain; margin: 32px auto 8px; }
  #pf-cart-dialog .pf-cart-empty{ margin: 0; padding: 8px 12px 32px; text-align: center; font: 400 19px/1.55 var(--editorial); }
  #pf-cart-dialog .pf-cart-total{
    flex: none;
    align-items: baseline;
    margin: 0;
    padding: 16px 20px 4px;
    border-top: 1px solid var(--line-dark);
  }
  #pf-cart-dialog .pf-cart-total span{ font: 500 11px/1 var(--utility); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-soft); }
  #pf-cart-dialog .pf-cart-total strong{ font: 400 28px/1.1 var(--editorial); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  #pf-cart-dialog .pf-cart-actions{
    flex: none;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 20px 20px;
  }
  #pf-cart-dialog .pf-cart-actions a{
    min-height: 52px;
    font: 500 13px/1 var(--utility);
    letter-spacing: .04em;
    color: var(--cream);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: scale .2s cubic-bezier(.22,1,.36,1), background-color .25s ease, border-color .25s ease;
  }
  #pf-cart-dialog .pf-cart-actions a:active{ scale: .98; }
  #pf-cart-dialog .pf-cart-actions .pf-cart-primary{ background: var(--cream); border-color: var(--cream); color: var(--charcoal); }
  #pf-cart-dialog .pf-cart-primary::after{ content: '→'; margin-left: 10px; display: inline-block; animation: pf-cart-nudge 1.8s ease-in-out infinite; }
  #pf-cart-dialog :is(a,button):focus-visible{ outline: 2px solid var(--ember-bright); outline-offset: 3px; }
}

/* Elementele foii exista si pe desktop, dar panoul de acolo ramane neschimbat. */
@media (min-width: 1025px){
  .pf-cart-handle,
  .pf-cart-count,
  .pf-cart-empty-mark{ display: none; }
}

@keyframes pf-hdr-rise{ from{ opacity: 0; translate: 0 8px; } to{ opacity: 1; translate: 0 0; } }
@keyframes pf-hdr-draw{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }
@keyframes pf-mnav-rise{ from{ opacity: 0; transform: translateY(28px); } to{ opacity: 1; transform: none; } }
@keyframes pf-mnav-out{ to{ opacity: 0; transform: translateY(-10px); } }
@keyframes pf-mnav-curtain-down{ from{ clip-path: inset(0 0 100% 0); } to{ clip-path: inset(0 0 0 0); } }
@keyframes pf-mnav-curtain-up{ from{ clip-path: inset(0 0 0 0); } to{ clip-path: inset(0 0 100% 0); } }
@keyframes pf-mnav-cover{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes pf-bag-drop{
  0%{ transform: none; }
  28%{ transform: translateY(-5px) rotate(-7deg); }
  56%{ transform: translateY(1px) rotate(3deg) scale(1.04, .96); }
  78%{ transform: translateY(-1px) rotate(-1deg); }
  100%{ transform: none; }
}
@keyframes pf-cart-nudge{ 0%, 100%{ transform: translateX(0); } 50%{ transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce){
  .site-header .brand-link,
  .site-header .brand-flame,
  .nav-toggle-label,
  .site-header .nav-toggle-bars span,
  .site-header .cart-link,
  .site-header .cart-link svg,
  #siteNav.nav-open,
  #siteNav.nav-open > *,
  html.pf-mobile-menu-open body::after,
  #pf-cart-dialog .pf-cart-primary::after{ animation: none !important; }
  .site-header.site-header--home::after{ transition: none; }
}