/* ============================================================
   Magazin PSY — foaie de stil comuna (design system)
   Modelata pe paleta existenta (crem / teracota / lavanda),
   rafinata pentru consistenta si accesibilitate (WCAG AA).
   ============================================================ */

/* ---------- 1. Variabile de tema (design tokens) — paleta Mocart (albastru/bleumarin, alb curat) ---------- */
:root{
  /* Fundaluri */
  --bg:#ffffff;            /* alb curat */
  --bg-alt:#f5f7fa;        /* sectiuni alternante (gri-albastrui) */
  --surface:#ffffff;       /* carduri */

  /* Text */
  --ink:#0c2a4d;           /* titluri — bleumarin inchis */
  --ink-soft:#6b7280;      /* text secundar (gri) */
  --ink-muted:#9aa6b6;     /* text tertiar */

  /* Brand (albastru Mocart, ajustat pentru contrast cu alb) */
  --brand:#1690db;         /* primar */
  --brand-dark:#0f6fb0;    /* hover */
  --brand-soft:#e4f3fc;    /* fundaluri usoare brand */
  --bright:#38b6ff;        /* accent luminos (highlight) */
  --navy:#053262;          /* bleumarin profund */

  /* Cromatica header/footer */
  --header:#053262;        /* footer / topbar */
  --header-dark:#042a52;   /* topbar mai inchis */

  /* Accente functionale */
  --ok:#11b76b;            /* in stoc / succes */
  --warn:#fba707;          /* atentie / reducere */
  --danger:#fd6a6a;        /* eroare / stergere */

  /* Linii & raze & umbre */
  --line:#e7ebf1;
  --radius:14px;
  --radius-sm:8px;
  --radius-pill:999px;
  --shadow:0 8px 24px rgba(5,50,98,.08);
  --shadow-lg:0 16px 40px rgba(5,50,98,.14);

  /* Layout */
  --maxw:1180px;
  --gap:clamp(16px, 3vw, 32px);

  /* Focus vizibil (a11y) */
  --focus:#0f6fb0;

  /* Tipografie */
  --font-head:'Montserrat',system-ui,sans-serif;
  --font-body:'Roboto',system-ui,sans-serif;
}

/* ---------- 2. Reset & baza ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{width:100%;max-width:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:120px;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  width:100%;max-width:100%;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--brand-dark);}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.2;color:var(--ink);}
h1{font-size:clamp(28px,4vw,42px);font-weight:700;margin:0 0 .4em;}
h2{font-size:clamp(22px,3vw,32px);font-weight:700;margin:0 0 .5em;}
h3{font-size:clamp(18px,2.2vw,22px);font-weight:600;}
p{margin:0 0 1em;}

/* Accesibilitate: ascuns vizual, vizibil pentru cititoare de ecran */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0;}

/* Focus vizibil global (a11y) */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:4px;
}

/* Container utilitar */
.container,.page-wrap{
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,28px);
}

/* ---------- 3. Header (top bar + header principal + bara de categorii) ---------- */

/* 3a. Top bar */
.topbar{background:var(--header-dark);color:#e9e6f0;font-size:13.5px;}
.topbar .wrap{max-width:var(--maxw);margin:0 auto;padding:8px clamp(16px,4vw,28px);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.topbar a{color:#e9e6f0;text-decoration:none;}
.topbar a:hover{color:#fff;}
.topbar .tb-left,.topbar .tb-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.topbar .tb-item{display:inline-flex;align-items:center;gap:6px;}

/* 3b. Header principal */
.site-header{position:sticky;top:0;z-index:200;background:var(--surface);box-shadow:0 2px 14px rgba(5,50,98,.08);}
.site-header .wrap{max-width:var(--maxw);margin:0 auto;padding:14px clamp(16px,4vw,28px);display:flex;align-items:center;gap:22px;}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;}
.brand img{height:112px;width:auto;display:block;}
@media (max-width:560px){ .brand img{height:74px;} }
.brand-name{font-family:var(--font-head);font-weight:800;font-size:23px;color:var(--ink);display:inline-flex;gap:5px;letter-spacing:.3px;}
.brand-accent{color:var(--brand);}

/* cautare */
.header-search{flex:1;display:flex;max-width:560px;border:2px solid var(--brand);border-radius:var(--radius-pill);overflow:hidden;background:#fff;}
.header-search input{flex:1;min-width:0;border:none;padding:11px 18px;font-size:15px;outline:none;background:transparent;color:var(--ink);}
.header-search button{border:none;background:var(--brand);color:#fff;padding:0 22px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.header-search button:hover{background:var(--brand-dark);}

/* actiuni: cont / favorite / cos */
.header-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;margin-left:auto;}
.h-action{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);text-decoration:none;font-size:12px;white-space:nowrap;}
.h-action .ic{font-size:21px;line-height:1;}
.h-action:hover{color:var(--brand);}
.h-action .count{position:absolute;top:-7px;right:-11px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* 3c. Bara de categorii */
.mainnav{background:var(--bg-alt);border-top:1px solid var(--line);position:relative;z-index:150;}
.mainnav .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,28px);display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.mainnav a{display:inline-block;padding:14px 18px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;border-bottom:3px solid transparent;transition:color .2s,border-color .2s,background .2s;}
.mainnav a:hover,.mainnav a.active{color:var(--brand-dark);border-color:var(--brand);}

/* Hamburger — buton real, focusabil */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;border:none;border-radius:var(--radius-sm);
  background:var(--brand-soft);color:var(--brand-dark);cursor:pointer;flex-shrink:0;
}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--brand-dark);position:relative;}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:24px;height:2px;background:var(--brand-dark);transition:.3s;
}
.nav-toggle span::before{top:-7px;}
.nav-toggle span::after{top:7px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* Responsive header */
@media (max-width:860px){
  .site-header .wrap{flex-wrap:wrap;gap:12px;}
  .header-search{order:3;flex-basis:100%;max-width:100%;}
  .topbar .tb-left .tb-hide{display:none;}
  .nav-toggle{display:inline-flex !important;}
  .mainnav .wrap{flex-direction:column;align-items:stretch;padding-top:6px;padding-bottom:6px;}
  /* Meniul mobil = panou fixat sub header (apare corect si cand pagina e derulata) */
  .mainnav{position:fixed;top:var(--nav-top,130px);left:0;right:0;z-index:199;max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--surface)!important;box-shadow:0 16px 30px rgba(5,50,98,.16);}
  .mainnav.open{max-height:560px;overflow-y:auto;}
  .mainnav a{border-bottom:1px solid var(--line);}
}

/* ---------- 4. Butoane ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 30px;border-radius:var(--radius-pill);border:2px solid transparent;
  font-family:var(--font-body);font-weight:600;font-size:16px;line-height:1;
  text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s,color .2s;
}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-2px);box-shadow:var(--shadow);}
.btn-outline{background:transparent;color:var(--brand-dark);border-color:var(--brand);}
.btn-outline:hover{background:var(--brand);color:#fff;transform:translateY(-2px);}
.btn-ghost{background:var(--brand-soft);color:var(--brand-dark);}
.btn-ghost:hover{background:#cfe7f8;}
.btn-block{width:100%;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;}

/* ---------- 5. Carduri ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;transition:transform .25s,box-shadow .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}

/* ---------- 6. Formulare ---------- */
label{display:block;font-weight:600;margin-bottom:6px;color:var(--ink);}
input,select,textarea{
  width:100%;padding:12px 14px;font-family:var(--font-body);font-size:16px;
  color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .2s,box-shadow .2s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(181,101,29,.18);
}
::placeholder{color:var(--ink-muted);}
.field-error{color:var(--danger);font-size:14px;margin-top:4px;}

/* ---------- 7. Badge-uri / etichete ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;}
.badge-ok{background:#e3f2e8;color:var(--ok);}
.badge-soft{background:var(--brand-soft);color:var(--brand-dark);}

/* ---------- 7b. Banda de incredere (livrare / retur / plata / suport) ---------- */
.trust-strip{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.trust-strip .wrap{max-width:var(--maxw);margin:0 auto;padding:26px clamp(16px,4vw,28px);display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.trust-item{display:flex;align-items:center;gap:14px;}
.trust-item .ic{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-size:22px;}
.trust-item h5{margin:0;font-family:var(--font-head);font-size:15px;color:var(--ink);}
.trust-item p{margin:2px 0 0;font-size:13px;color:var(--ink-soft);}
@media (max-width:780px){.trust-strip .wrap{grid-template-columns:1fr 1fr;gap:18px;}}
@media (max-width:440px){.trust-strip .wrap{grid-template-columns:1fr;}}

/* iconite plata in footer */
.pay-icons{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;}
.pay-icons span{background:#fff;color:#222;border-radius:6px;padding:4px 9px;font-size:11px;font-weight:800;letter-spacing:.4px;font-family:var(--font-head);}

/* ---------- 8. Footer (clase prefixate sf- pentru a nu intra in conflict cu CSS-ul vechi din pagini) ---------- */
.site-footer{background:var(--header);color:#f3f3f7;margin-top:60px;}
.site-footer .sf-grid{
  max-width:var(--maxw);margin:0 auto;padding:48px clamp(16px,4vw,28px) 28px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;
}
.site-footer h4{color:#fff;font-size:16px;margin:0 0 14px;letter-spacing:.3px;}
.site-footer a{color:#e3e1ec;text-decoration:none;}
.site-footer a:hover{color:#fff;text-decoration:underline;}
.site-footer .sf-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.site-footer .sf-logo img{height:120px;width:auto;margin-bottom:12px;background:#fff;border-radius:16px;padding:10px;}
.site-footer p{color:#d9d7e4;margin:0 0 8px;font-size:14.5px;}
.sf-contact-row{display:flex;gap:8px;}
.sf-contact-row strong{color:#fff;font-weight:600;min-width:74px;}
.sf-social{display:flex;gap:12px;margin-top:14px;}
.sf-social a{
  width:42px;height:42px;border-radius:var(--radius-pill);background:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,transform .2s;
}
.sf-social a:hover{background:var(--brand);transform:translateY(-2px);}
.sf-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;opacity:.92;}
.sf-trust span{font-size:13px;color:#e7e5f0;display:inline-flex;align-items:center;gap:6px;}
.sf-bottom{
  border-top:1px solid rgba(255,255,255,.16);
  padding:18px clamp(16px,4vw,28px);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;font-size:14px;color:#cfcde0;
}
.sf-bottom a{color:#e3e1ec;}
.sf-legal{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- 8b. Grila de produse + card (colectie / produse) ---------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
  width:100%;max-width:var(--maxw);margin:0 auto;
}
@media (max-width:1100px){ .product-grid{grid-template-columns:repeat(3,1fr);gap:20px;} }
@media (max-width:820px){ .product-grid{grid-template-columns:repeat(2,1fr);gap:16px;} }
@media (max-width:520px){ .product-grid{grid-template-columns:repeat(2,1fr);gap:12px;} }
.product-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow);
  transition:transform .28s ease, box-shadow .28s ease;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.product-card .pc-media{
  position:relative;display:block;
  aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);
}
.product-card .pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease;}
.product-card:hover .pc-media img{transform:scale(1.06);}
.product-card .pc-flag{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 12px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:600;backdrop-filter:blur(4px);
}
.product-card .pc-flag.in{background:rgba(46,125,79,.92);color:#fff;}
.product-card .pc-flag.out{background:rgba(120,108,98,.92);color:#fff;}
.product-card .pc-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.product-card .pc-cat{
  font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--brand);
}
.product-card .pc-title{
  font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--ink);margin:0;line-height:1.25;
}
.product-card .pc-desc{
  font-size:13px;color:var(--ink-soft);margin:0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-card .pc-foot{
  margin-top:auto;padding-top:12px;display:flex;flex-direction:column;align-items:stretch;gap:9px;
  border-top:1px solid var(--line);
}
.product-card .pc-price{font-family:var(--font-head);font-weight:700;font-size:17.5px;color:var(--brand-dark);line-height:1.1;white-space:nowrap;}
.product-card .pc-price small{display:block;font-size:10px;font-weight:500;color:var(--ink-muted);letter-spacing:.3px;text-transform:uppercase;margin-top:2px;white-space:normal;}
.product-card .pc-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:9px 12px;border-radius:var(--radius-pill);
  background:var(--brand);color:#fff;text-decoration:none;font-weight:600;font-size:14px;
  white-space:nowrap;transition:background .2s,transform .2s;border:none;cursor:pointer;
}
.product-card .pc-cta:hover{background:var(--brand-dark);transform:translateY(-1px);}
.product-card .pc-cta.ghost{background:var(--brand-soft);color:var(--brand-dark);}
.product-card .pc-cta.ghost:hover{background:#cfe7f8;}

/* Bara de filtre (pill) */
.filter-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 38px;max-width:var(--maxw);padding:0 16px;}
.filter-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px 10px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.filter-chip .chip-n{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:var(--radius-pill);background:var(--brand-soft);color:var(--brand-dark);
  font-size:12px;font-weight:700;transition:background .2s,color .2s;
}
.filter-chip:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 6px 16px rgba(5,50,98,.10);}
.filter-chip.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 8px 18px rgba(22,144,219,.28);}
.filter-chip.active .chip-n{background:rgba(255,255,255,.25);color:#fff;}

.collection-empty{text-align:center;color:var(--ink-soft);padding:50px 20px;font-size:17px;}

/* Titlu de sectiune (cu accent) */
.section-head{text-align:center;max-width:720px;margin:0 auto 40px;}
.section-head .eyebrow{display:block;margin-bottom:10px;}
.section-h2{position:relative;display:inline-block;font-family:var(--font-head);font-weight:800;font-size:clamp(28px,3.6vw,42px);color:var(--ink);padding-bottom:16px;margin:.1em 0 .35em;letter-spacing:-.3px;}
.section-h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:70px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--bright));}
.section-head .lead{font-size:clamp(16px,1.6vw,18.5px);color:var(--ink-soft);}

/* Placi de categorie */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;max-width:var(--maxw);margin:0 auto;}
.cat-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s;box-shadow:var(--shadow);}
.cat-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--brand);}
.cat-tile-img{width:120px;height:120px;border-radius:50%;overflow:hidden;background:var(--bg-alt);border:3px solid var(--brand-soft);}
.cat-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.cat-tile:hover .cat-tile-img img{transform:scale(1.08);}
.cat-tile-name{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);line-height:1.2;}
.cat-tile-count{font-size:12.5px;color:var(--brand-dark);font-weight:600;}
.collection-head{text-align:center;max-width:720px;margin:0 auto;padding:clamp(36px,6vw,60px) 16px 24px;}
.collection-head h1{margin:.2em 0 .35em;}

/* ---------- 8c. Pagina de produs (PDP) ---------- */
.pdp{
  display:grid;grid-template-columns:1.05fr 1fr;gap:42px;
  max-width:var(--maxw);margin:0 auto;padding:24px 16px 8px;align-items:start;
}
.pdp-breadcrumb{grid-column:1/-1;max-width:var(--maxw);margin:0 auto;padding:14px 16px 0;font-size:14px;color:var(--ink-soft);}
.pdp-breadcrumb a{color:var(--brand-dark);text-decoration:none;}
.pdp-breadcrumb a:hover{text-decoration:underline;}

.pdp-gallery{position:sticky;top:88px;}
.pdp-main{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);border:1px solid var(--line);box-shadow:var(--shadow);}
.pdp-main img{width:100%;height:100%;object-fit:cover;display:block;}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.pdp-thumb{width:74px;height:74px;border-radius:10px;overflow:hidden;border:2px solid var(--line);cursor:pointer;background:var(--bg-alt);padding:0;}
.pdp-thumb.active{border-color:var(--brand);}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;}

.pdp-info{display:flex;flex-direction:column;gap:14px;}
.pdp-cat{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--brand);}
.pdp-title{font-family:var(--font-head);font-weight:700;font-size:clamp(26px,3.4vw,38px);color:var(--ink);margin:0;line-height:1.15;}
.pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.pdp-price .now{font-family:var(--font-head);font-weight:700;font-size:32px;color:var(--brand-dark);}
.pdp-price .cerere{font-family:var(--font-head);font-weight:700;font-size:24px;color:var(--ink);}
.pdp-stock{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;}
.pdp-stock.in{color:var(--ok);}
.pdp-stock.out{color:var(--warn);}
.pdp-stock .dot{width:9px;height:9px;border-radius:50%;background:currentColor;}
.pdp-desc{color:var(--ink-soft);line-height:1.7;margin:0;}

.pdp-buy{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin-top:4px;}
.qty-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--radius-pill);overflow:hidden;background:#fff;}
.qty-stepper button{width:44px;height:52px;border:none;background:transparent;font-size:22px;cursor:pointer;color:var(--brand-dark);}
.qty-stepper button:hover{background:var(--brand-soft);}
.qty-stepper input{width:48px;height:52px;border:none;text-align:center;font-size:17px;font-weight:600;padding:0;background:transparent;}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pdp-addcart{flex:1;min-width:200px;font-size:17px;padding:0 28px;}

.pdp-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.pdp-spec{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px;}
.pdp-spec h4{margin:0 0 3px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-muted);}
.pdp-spec p{margin:0;font-weight:600;color:var(--ink);font-size:15px;}
.pdp-spec.full{grid-column:1/-1;}

.pdp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line);}
.pdp-trust div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;font-size:12.5px;color:var(--ink-soft);}
.pdp-trust .ic{font-size:22px;}
.pdp-secondary{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}

@media (max-width:860px){
  .pdp{grid-template-columns:1fr;gap:24px;}
  .pdp-gallery{position:static;}
  .pdp-trust{grid-template-columns:1fr 1fr;}
}

/* ---------- 9. Utilitare ---------- */
.section{padding:clamp(40px,7vw,72px) 0;}
.section-alt{background:var(--bg-alt);}
.text-center{text-align:center;}
.eyebrow{display:inline-block;color:var(--brand-dark);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;margin-bottom:10px;}
.lead{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:680px;}
.muted{color:var(--ink-soft);}

/* ---------- 10. Responsive ---------- */
@media (max-width:900px){
  .site-footer .sf-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .nav-toggle{display:inline-flex;}
  .main-nav{
    flex-direction:column;align-items:stretch;width:100%;
    max-height:0;overflow:hidden;transition:max-height .35s ease;order:3;gap:6px;
  }
  .main-nav.open{max-height:520px;margin-top:10px;}
  .main-nav a{text-align:center;padding:13px 16px;}
  .header-actions .header-phone{display:none;}
}
@media (max-width:560px){
  .site-footer .sf-grid{grid-template-columns:1fr;}
  .sf-bottom{flex-direction:column;text-align:center;}
}

/* ---------- 11. Dark mode (optional, pastrat din original) ---------- */
body.dark-mode{--bg:#15110e;--bg-alt:#1d1813;--surface:#231d18;--ink:#f3eadf;--ink-soft:#c9bcae;--line:#3a2f26;}
body.dark-mode .card{box-shadow:none;}

/* ---------- 12. Animatii (respectand prefer-reduced-motion) ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ============================================================
   12. Reset anti-conflict — forteaza chrome-ul nou (partials)
   peste regulile vechi 'header{}'/'footer{}' din CSS-ul inline al paginilor.
   ============================================================ */
.site-header{
  background:var(--surface)!important;
  color:var(--ink)!important;
  padding:0!important;
  display:block!important;
  position:sticky!important;
  top:0!important;
  box-shadow:0 2px 14px rgba(5,50,98,.08)!important;
}
.site-footer{
  background:var(--header)!important;
  color:#eef0f6!important;
  padding:0!important;
  text-align:left!important;
  display:block!important;
}
.topbar{background:var(--header-dark)!important;}
/* display:block -> regula veche 'nav{display:flex;justify-content:center}' din unele pagini
   nu mai transforma .wrap in flex-item (care se stranged si se centra -> meniul "sarea"). */
.mainnav{background:var(--bg-alt)!important;display:block!important;}

/* Bara de navigare — aspect CONSISTENT pe toate paginile.
   Bate regulile vechi 'nav a'/'nav a.active' din CSS-ul inline al paginilor
   (care faceau meniul sa arate/sa se mute diferit). Mai mare + aliniat la stanga. */
.mainnav .wrap{justify-content:flex-start !important;gap:6px !important;align-items:center !important;flex-wrap:wrap;}
.mainnav a{
  background:transparent !important;
  color:var(--ink) !important;
  font-size:16px !important;
  font-weight:600 !important;
  padding:12px 20px !important;
  margin:7px 0 !important;
  border:0 !important;
  border-radius:10px !important;
  transform:none !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  transition:background .25s ease,color .25s ease,transform .25s ease !important;
}
.mainnav a:hover,.mainnav a:focus-visible{
  background:var(--brand-soft) !important;
  color:var(--brand-dark) !important;
  transform:translateY(-1px) !important;
}
.mainnav a.active,.mainnav a.force-hover{
  background:var(--brand) !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(22,144,219,.28) !important;
}
/* Pastreaza latimea scrollbar-ului mereu rezervata -> chrome-ul nu mai sare orizontal intre pagini */
html{scrollbar-gutter:stable;}

/* ============================================================
   13. Pagina de produs — stil card curat (model trimis de client)
   ============================================================ */
.pdp-section{background:var(--bg-alt);padding-bottom:54px;}
.pdp-section .pdp{padding-top:10px;}
.pdp-info{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(22px,3vw,36px);
}
.pdp-title{font-size:clamp(28px,3.8vw,42px);font-weight:800;margin:0;letter-spacing:-.4px;}
.pdp-moreinfo{margin:-2px 0 2px;color:var(--ink-muted);font-size:14.5px;}
.pdp-sep{height:1px;background:var(--line);border:0;margin:8px 0;}
.pdp-price .now{font-size:clamp(28px,3.4vw,36px);}
.pdp-desc-label{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-muted);margin:0;}

/* ============================================================
   14. Sectiuni homepage modernizate: Ce oferim / Despre noi / Recenzii
   ============================================================ */

/* --- iconite line-art --- */
.ico{display:inline-block;vertical-align:middle;flex-shrink:0;}
.li-ic{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;}
.li-ic .ico{stroke-width:2.4;}

/* --- Ce facem (oferim) --- */
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:940px;margin:0 auto;align-items:stretch;}
.offer-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;transition:transform .25s,box-shadow .25s,border-color .25s;}
.offer-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--brand-soft);}
.offer-icon{width:56px;height:56px;border-radius:16px;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.offer-card h3{font-family:var(--font-head);font-size:18.5px;color:var(--ink);margin:0 0 18px;line-height:1.3;}
.offer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.offer-list li{display:flex;align-items:flex-start;gap:11px;color:var(--ink-soft);line-height:1.5;font-size:15px;}

/* --- Despre noi --- */
.about2-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:48px;align-items:center;max-width:var(--maxw);margin:0 auto;}
.about2-media{position:relative;}
.about2-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:block;aspect-ratio:4/5;object-fit:cover;}
.about2-media .about2-tag{position:absolute;left:18px;bottom:18px;right:18px;background:rgba(5,50,98,.86);color:#fff;border-radius:12px;padding:14px 18px;backdrop-filter:blur(4px);}
.about2-media .about2-tag strong{display:block;font-family:var(--font-head);font-size:16px;}
.about2-media .about2-tag span{font-size:13px;color:#dbe7f3;}
.about2-body .eyebrow{display:block;margin-bottom:8px;}
.about2-body h2{text-align:left;font-family:var(--font-head);font-weight:800;font-size:clamp(24px,2.8vw,34px);color:var(--ink);margin:0 0 14px;}
.about2-body .about2-lead{color:var(--ink-soft);line-height:1.75;margin:0 0 22px;font-size:15.5px;}
.about2-features{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 22px;}
.about2-features li{display:flex;align-items:flex-start;gap:10px;color:var(--ink);font-weight:500;font-size:14.5px;line-height:1.4;}
.about2-quote{border-left:4px solid var(--brand);background:var(--bg-alt);border-radius:0 12px 12px 0;padding:16px 20px;font-style:italic;color:var(--ink-soft);margin:0;line-height:1.7;}

/* --- Recenzii / Feedback --- */
.reviews-layout{display:grid;grid-template-columns:340px 1fr;gap:26px;max-width:var(--maxw);margin:0 auto;align-items:start;}
.review-cta{background:linear-gradient(165deg,var(--brand-soft),#fff 70%);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;position:sticky;top:140px;}
.review-cta-ic{width:56px;height:56px;border-radius:16px;background:#fff;color:var(--brand-dark);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);margin-bottom:16px;}
.review-cta h3{font-family:var(--font-head);font-size:19px;color:var(--ink);margin:0 0 8px;line-height:1.3;}
.review-cta>p{color:var(--ink-soft);font-size:14px;line-height:1.6;margin:0 0 18px;}
.review-cta-alt{font-size:12.5px;color:var(--ink-muted);text-align:center;margin:12px 0 0;}
.review-form{display:flex;flex-direction:column;gap:12px;}
.review-form textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-family:var(--font-body);font-size:14.5px;resize:vertical;background:#fff;color:var(--ink);}
.review-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,144,219,.12);}
.rating-pick{display:flex;gap:4px;}
.rating-pick .star{background:none;border:none;padding:2px;cursor:pointer;color:var(--line);line-height:0;transition:color .15s,transform .15s;}
.rating-pick .star.is-on{color:#fba707;}
.rating-pick .star.is-on .ico{fill:#fba707;}
.rating-pick .star:hover{transform:scale(1.12);}
.review-file{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--brand-dark);cursor:pointer;font-weight:600;border:1px dashed var(--line);border-radius:10px;padding:11px 12px;background:#fff;transition:border-color .2s;}
.review-file:hover{border-color:var(--brand);}
.reviews-col{min-width:0;}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.review-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:12px;}
.review-head{display:flex;align-items:center;gap:12px;}
.review-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--navy,#053262));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:18px;flex-shrink:0;}
.review-head .review-who{display:flex;flex-direction:column;line-height:1.2;}
.review-head strong{color:var(--ink);font-size:15px;}
.review-date{color:var(--ink-muted);font-size:12.5px;}
.review-stars{margin-left:auto;color:#fba707;display:inline-flex;gap:1px;}
.review-stars .ico{fill:#fba707;}
.review-msg{color:var(--ink-soft);line-height:1.6;margin:0;}
.review-images{display:flex;gap:8px;flex-wrap:wrap;}
.review-images img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line);}
.reviews-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink-soft);background:var(--bg-alt);border:1px dashed var(--line);border-radius:var(--radius);padding:48px 24px;min-height:220px;}
.reviews-empty .re-ic{width:64px;height:64px;border-radius:50%;background:#fff;color:var(--brand);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);margin-bottom:14px;}
.reviews-empty strong{color:var(--ink);font-family:var(--font-head);font-size:17px;display:block;margin-bottom:4px;}
.reviews-empty p{margin:0;font-size:14px;}
.alert-ok{max-width:680px;margin:0 auto 16px;background:#e3f7ec;color:#0c7a45;border:1px solid #bce6cf;border-radius:10px;padding:12px 16px;text-align:center;}
.alert-err{max-width:680px;margin:0 auto 16px;background:#fdeaea;color:#b23b3b;border:1px solid #f3c6c6;border-radius:10px;padding:12px 16px;text-align:center;}

@media (max-width:860px){
  .reviews-layout{grid-template-columns:1fr;}
  .review-cta{position:static;}
}
@media (max-width:760px){
  .about2-grid{grid-template-columns:1fr;gap:24px;}
  .about2-features{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .offer-grid{grid-template-columns:1fr;}
}

/* ============================================================
   14. Miscare & animatii — fluiditate (respecta prefers-reduced-motion)
   ============================================================ */
html{scroll-behavior:smooth;}

@media (prefers-reduced-motion: no-preference){
  /* Revelare la scroll: elementele marcate cu .reveal de JS apar lin */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
  .reveal.in{opacity:1;transform:none;}

  /* Intrare hero la incarcare */
  .hero-eyebrow,.hero h1,.hero .hero-lead,.hero p,.hero .hero-cta,.hero .btn{animation:heroIn .8s cubic-bezier(.22,.61,.36,1) both;}
  .hero h1{animation-delay:.08s;}
  .hero .hero-lead,.hero p{animation-delay:.16s;}
  .hero .hero-cta,.hero .btn{animation-delay:.24s;}
  @keyframes heroIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

  /* Micro-interactiuni suplimentare */
  .review-card{transition:transform .25s ease,box-shadow .25s ease;}
  .review-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
  .h-action{transition:color .2s ease,transform .2s ease;}
  .h-action:hover{transform:translateY(-1px);}
  .cat-tile,.product-card,.offer-card{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .25s ease;}
  .btn{transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;}
  .footer-social a,.sf-social a{transition:transform .2s ease,background .2s ease;}
}

/* Buton "inapoi sus" */
.to-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;border:none;background:var(--brand);color:#fff;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(5,50,98,.28);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease,background .2s ease;z-index:300;}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--brand-dark);transform:translateY(-2px);}
@media (max-width:560px){.to-top{right:14px;bottom:14px;width:42px;height:42px;}}

/* ============================================================
   15. Elemente "wow" — progres scroll, header shrink, geometrie sacra, quick-view
   ============================================================ */

/* Bara de progres la scroll (sus de tot) */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:1000;pointer-events:none;background:transparent;}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-bright,#38b6ff));box-shadow:0 0 8px rgba(22,144,219,.55);transition:width .08s linear;}

/* Header la scroll: DOAR umbra se schimba (fara modificare de inaltime -> fara tremur/salt) */
.site-header{transition:box-shadow .25s ease;}
.site-header.shrink{box-shadow:0 6px 24px rgba(5,50,98,.16)!important;}

/* Motiv geometrie sacra (rotire lenta, foarte subtil) */
.sacred-deco{position:absolute;pointer-events:none;color:var(--brand);opacity:.07;z-index:0;line-height:0;}
.sacred-deco svg{width:100%;height:100%;display:block;transform-origin:50% 50%;animation:sacredSpin 110s linear infinite;}
.sacred-deco.rev svg{animation-direction:reverse;animation-duration:150s;}
.sacred-deco.soft{opacity:.05;}
@keyframes sacredSpin{to{transform:rotate(360deg);}}
.has-deco{position:relative;overflow:hidden;}
.has-deco > .container{position:relative;z-index:1;}
@media (prefers-reduced-motion: reduce){ .sacred-deco svg{animation:none;} }

/* Card: a doua imagine la hover + buton quick-view */
.product-card .pc-media{position:relative;overflow:hidden;}
.pc-media-link{display:block;width:100%;height:100%;}
.pc-media .pc-img2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .55s ease;z-index:1;}
.product-card:hover .pc-media .pc-img2{opacity:1;}
.pc-quickview{position:absolute;left:50%;bottom:14px;transform:translate(-50%,18px);z-index:3;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:none;border-radius:999px;background:rgba(255,255,255,.96);color:var(--brand-dark);font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 8px 20px rgba(5,50,98,.20);opacity:0;transition:opacity .25s ease,transform .25s ease,background .2s ease;}
.pc-quickview:hover{background:var(--brand);color:#fff;}
.product-card:hover .pc-quickview{opacity:1;transform:translate(-50%,0);}
@media (hover:none){ .pc-quickview{display:none;} }

/* Quick-view modal */
.qv-overlay{position:fixed;inset:0;background:rgba(5,50,98,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1100;opacity:0;visibility:hidden;transition:opacity .25s ease;}
.qv-overlay.open{opacity:1;visibility:visible;}
.qv-modal{position:relative;background:var(--surface);border-radius:var(--radius);max-width:780px;width:100%;max-height:90vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 30px 80px rgba(5,50,98,.35);transform:translateY(18px) scale(.98);transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.qv-overlay.open .qv-modal{transform:none;}
.qv-modal .qv-img{background:var(--bg-alt);overflow:hidden;}
.qv-modal .qv-img img{width:100%;height:100%;object-fit:cover;min-height:280px;max-height:90vh;}
.qv-modal .qv-body{padding:30px 28px;display:flex;flex-direction:column;gap:12px;overflow:auto;}
.qv-modal .qv-cat{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--brand-dark);font-weight:700;}
.qv-modal .qv-title{font-family:var(--font-head);font-size:23px;color:var(--ink);margin:0;line-height:1.2;}
.qv-modal .qv-price{font-family:var(--font-head);font-size:22px;color:var(--brand-dark);font-weight:700;}
.qv-modal .qv-price small{display:block;font-size:11px;font-weight:500;color:var(--ink-muted);letter-spacing:.4px;text-transform:uppercase;}
.qv-modal .qv-desc{color:var(--ink-soft);font-size:14.5px;line-height:1.65;}
.qv-modal .qv-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.qv-close{position:absolute;top:14px;right:16px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink);font-size:22px;cursor:pointer;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:2;}
.qv-close:hover{background:#fff;color:var(--brand-dark);}
@media (max-width:600px){ .qv-modal{grid-template-columns:1fr;} .qv-modal .qv-img img{max-height:38vh;min-height:200px;} }

/* ============================================================
   16. Actiuni card produs (Vezi + Adauga) + toast cos
   ============================================================ */
.product-card .pc-actions{display:flex;gap:7px;}
.product-card .pc-actions .pc-cta{flex:1;padding-left:8px;padding-right:8px;font-size:12.5px;gap:5px;}
.product-card .pc-actions .pc-cta .ico{width:14px;height:14px;}
.product-card .pc-add{flex:1;margin:0;display:flex;}
.product-card .pc-add .pc-cta{width:100%;}

.col-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:1200;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:13px 20px;border-radius:var(--radius-pill);box-shadow:0 14px 32px rgba(5,50,98,.3);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease;font-size:14px;max-width:92vw;}
.col-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}
.col-toast .ct-ic{width:24px;height:24px;border-radius:50%;background:#1a9d54;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.col-toast .ct-ic .ico{stroke-width:2.6;}
.col-toast a{color:#9fd4ff;text-decoration:none;font-weight:700;white-space:nowrap;}

/* ============================================================
   17. Favorite (inimioara pe card + pagina favorite)
   ============================================================ */
.fav-btn{position:absolute;top:12px;right:12px;z-index:4;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(5,50,98,.16);transition:transform .2s ease,background .2s ease,color .2s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.fav-btn:hover{transform:scale(1.1);color:#e0436b;background:#fff;}
.fav-btn.is-fav{color:#e0436b;}
.fav-btn.is-fav .ico{fill:#e0436b;}
.fav-btn.pulsing{transform:scale(1.28);}
.fav-btn .ico{transition:fill .2s ease;}

.fav-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:56px 24px;text-align:center;max-width:560px;margin:30px auto;}
.fav-empty .fe-ic{width:74px;height:74px;border-radius:50%;background:var(--brand-soft);color:#e0436b;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.fav-empty h2{font-family:var(--font-head);color:var(--ink);margin:0 0 8px;font-size:21px;}
.fav-empty p{color:var(--ink-soft);margin:0 0 20px;}