/* ==========================================================================
   FarmaPret — Design System
   Concept: "farmacie deschisa, lumina verde". Verde smarald in gradient cu
   efect subtil de glow/neon, alb imaculat, bleu marin extrem de discret.
   Paleta: verde (sanatate, #1 in farmaciile RO) + alb (puritate) + navy (incredere).
   ========================================================================== */

:root{
  /* --- Verde (culoarea principala, in gradient) --- */
  --green:       #0bbf7a;   /* verde smarald viu (glow) */
  --green-2:     #07a76a;   /* verde mediu */
  --accent:      #07976a;   /* verde de actiune (butoane, linkuri) */
  --accent-dk:   #057253;   /* hover, profund */
  --green-deep:  #043c30;   /* verde foarte inchis (header, text pe verde) */
  --accent-bg:   #e6f7ef;   /* fundal verde foarte pal */
  --accent-bg2:  #d3f1e3;   /* fundal verde pal 2 */
  /* gradient semnatura + glow */
  --grad: linear-gradient(135deg, #0bbf7a 0%, #07a76a 55%, #058a63 100%);
  --grad-soft: linear-gradient(135deg, #13d488 0%, #08b074 100%);
  --glow: 0 0 0 1px rgba(11,191,122,.18), 0 8px 24px -6px rgba(7,151,106,.45);
  --glow-strong: 0 0 24px -2px rgba(11,191,122,.55), 0 8px 30px -8px rgba(7,151,106,.5);

  /* --- Alb imaculat / neutre --- */
  --paper:      #ffffff;   /* card / suprafata, alb pur */
  --bg:         #f4faf7;   /* fundal pagina, alb cu suflu verde imperceptibil */
  --line:       #e3efe9;   /* borduri hairline verzui */
  --ink:        #0a1f1a;   /* text principal, aproape negru-verzui */
  --ink-soft:   #51635c;   /* text secundar */

  /* --- Bleu marin (DISCRET, doar accente: focus, taguri info) --- */
  --navy:       #123a5e;   /* bleu marin profund */
  --navy-soft:  #2b6695;   /* bleu mediu */
  --navy-bg:    #eaf2f8;   /* fundal bleu foarte pal */
  --focus:      #1f7ac0;   /* inel focus accesibil (nota de albastru) */

  /* --- Pret / reducere --- */
  --price:      #c23517;   /* rosu-caramiziu cald pt pret */
  --gold:       #e8a200;   /* best deal */

  --r: 14px;
  --r-sm: 9px;
  --r-lg: 20px;
  --shadow: 0 1px 2px rgba(10,31,26,.04), 0 8px 22px rgba(10,31,26,.05);
  --shadow-lg: 0 4px 14px rgba(10,31,26,.07), 0 24px 50px rgba(10,31,26,.10);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  font-feature-settings:"ss01","cv05"; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-dk); text-decoration:underline; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 20px; }

/* ---------- Header (stil Dr. Max: 2 randuri) ---------- */
.site-header{ position:sticky; top:0; z-index:60; background:var(--paper); box-shadow:0 1px 0 var(--line); }
/* rand 1: logo + search mare + actiuni */
.header-top{ display:flex; align-items:center; gap:22px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800;
  font-size:23px; color:var(--ink); letter-spacing:-.02em; flex:0 0 auto; }
.brand:hover{ text-decoration:none; }
.brand .mark{ width:38px; height:38px; flex:0 0 38px; object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(7,151,106,.3)); }
.brand .b-name b{ color:var(--accent); font-weight:800; position:relative; }
/* la hover pe logo, "Pret" se taie cu rosul din paleta */
.brand .b-name b::after{ content:""; position:absolute; left:-2px; right:-2px; top:52%;
  height:2.5px; background:var(--price); border-radius:2px; transform:scaleX(0);
  transform-origin:left; transition:transform .25s ease; }
.brand:hover .b-name b::after{ transform:scaleX(1); }

/* search bar mare (eroul, ca la Dr. Max) */
.header-search{ flex:1; max-width:680px; position:relative; }
.header-search form{ display:flex; align-items:center; background:var(--paper);
  border:2px solid var(--accent); border-radius:999px; padding:0 6px 0 20px;
  box-shadow:var(--glow); transition:box-shadow .2s; }
.header-search form:focus-within{ box-shadow:var(--glow-strong); }
.header-search .s-ico{ width:20px; height:20px; flex:0 0 20px; color:var(--accent); opacity:.8; }
.header-search input{ flex:1; height:50px; border:0; background:transparent;
  padding:0 12px; font-size:16px; color:var(--ink); }
.header-search input:focus{ outline:none; }
.header-search button{ border:0; background:var(--grad); color:#fff; font-weight:700;
  font-size:15px; height:40px; padding:0 22px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; gap:7px; box-shadow:var(--glow); transition:filter .15s; }
.header-search button:hover{ filter:brightness(1.06); }

/* actiuni dreapta (telefon, harta) */
.header-actions{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.header-actions a{ display:flex; align-items:center; gap:10px; color:var(--ink);
  font-size:14px; font-weight:600; }
.header-actions a:hover{ color:var(--accent); text-decoration:none; }
.header-actions .ha-ico{ width:38px; height:38px; border-radius:50%; background:var(--accent-bg);
  display:flex; align-items:center; justify-content:center; color:var(--accent-dk); flex:0 0 38px; }
.header-actions .ha-ico svg{ width:19px; height:19px; }
.header-actions .ha-txt{ display:flex; flex-direction:column; line-height:1.25; }
.header-actions .ha-sub{ font-size:11px; color:var(--ink-soft); font-weight:500; }
.header-actions .ha-main{ font-size:14px; color:var(--ink); font-weight:700; }

/* rand 2: bara verde de navigare cu mega-meniu */
.nav-bar{ background:var(--grad); box-shadow:0 4px 12px -4px rgba(4,60,48,.3); position:relative; z-index:40; }
.nav-bar .nav-inner{ display:flex; align-items:stretch; gap:2px; }
.nav-cats{ display:flex; align-items:center; gap:9px; padding:0 22px; height:52px;
  background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:16px; cursor:pointer;
  border:0; position:relative; }
.nav-cats:hover{ background:rgba(255,255,255,.26); }
.nav-cats svg{ width:18px; height:18px; }
.nav-links{ display:flex; align-items:center; gap:4px; flex-wrap:nowrap; overflow:hidden; }
.nav-links a{ color:#fff; font-size:15px; font-weight:600; padding:0 16px; height:52px;
  display:flex; align-items:center; opacity:.96; }
.nav-links a:hover{ background:rgba(255,255,255,.15); text-decoration:none; opacity:1; }
.nav-promo{ margin-left:auto; display:flex; align-items:center; gap:8px; padding:0 22px;
  background:rgba(255,255,255,.12); color:#fff; font-weight:700; font-size:14px; }

/* MEGA MENU categorii — lista verticala curata (stil Dr.Max/referinta) */
.megamenu{ position:absolute; left:0; right:0; top:100%; background:var(--paper);
  box-shadow:var(--shadow-lg); border-top:1px solid var(--line); z-index:55;
  display:none; padding:18px 0; }
.megamenu.open{ display:block; }
.megamenu .mm-head{ font-family:var(--f-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); padding:0 4px 10px; font-weight:600; }
.megamenu .mm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px 28px; }
.megamenu a{ display:flex; align-items:center; gap:14px; padding:13px 14px;
  border-radius:var(--r-sm); color:var(--ink); font-weight:600; border:1px solid transparent;
  transition:background .12s, border-color .12s; }
.megamenu a:hover{ background:var(--accent-bg); border-color:var(--accent-bg2);
  color:var(--accent-dk); text-decoration:none; }
.megamenu a .mm-ico{ width:42px; height:42px; border-radius:11px; background:var(--accent-bg);
  display:flex; align-items:center; justify-content:center; flex:0 0 42px; }
.megamenu a .mm-ico svg{ width:23px; height:23px; color:var(--accent); }
.megamenu a .mm-tx{ flex:1; display:flex; flex-direction:column; line-height:1.25; }
.megamenu a .mm-n{ font-size:12px; color:var(--ink-soft); font-weight:500; }
.megamenu a .mm-arrow{ color:var(--ink-soft); flex:0 0 auto; opacity:.5; }
.megamenu a:hover .mm-arrow{ opacity:1; color:var(--accent); }
.nav-overlay{ position:fixed; inset:0; background:rgba(10,31,26,.25); z-index:54; display:none; }
.nav-overlay.open{ display:block; }

/* ---------- Hero + search ---------- */
.hero{ padding:80px 0 40px; text-align:center; position:relative; display:flow-root; }
.hero h1{ font-family:var(--f-display); font-weight:600; font-size:clamp(34px,5vw,52px);
  line-height:1.08; letter-spacing:-.02em; margin:0 0 14px; color:var(--ink); }
.hero p.lead{ font-size:clamp(17px,2vw,20px); color:var(--ink-soft);
  max-width:560px; margin:0 auto 32px; }

.searchbox{ max-width:660px; margin:0 auto; position:relative; }
.searchbox form{ display:flex; align-items:center; background:var(--paper); border:2px solid var(--accent);
  border-radius:999px; box-shadow:var(--glow-strong); padding-left:22px; padding-right:4px; }
.searchbox form:focus-within{ box-shadow:0 0 34px -2px rgba(11,191,122,.6), 0 10px 34px -8px rgba(7,151,106,.5); }
.searchbox .s-ico{ width:22px; height:22px; color:var(--accent); flex:0 0 22px; }
.searchbox input{ flex:1; min-width:0; border:0; padding:20px 14px; font-size:19px;
  font-family:var(--f-body); background:transparent; color:var(--ink); }
.searchbox input:focus{ outline:none; }
.searchbox button{ border:0; background:var(--grad); color:#fff; font-weight:700;
  font-size:17px; padding:0 30px; height:52px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; gap:8px; transition:filter .15s; flex:0 0 auto; }
.searchbox button:hover{ filter:brightness(1.06); }
.search-hint{ margin-top:16px; font-size:14px; color:var(--ink-soft); }
.search-hint a{ font-weight:600; }

/* live suggestions */
.suggestions{ position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); overflow:hidden; text-align:left; display:none; z-index:20; }
.suggestions.open{ display:block; }
.suggestions a{ display:flex; align-items:center; gap:12px; padding:12px 18px;
  color:var(--ink); border-bottom:1px solid var(--line); }
.suggestions a:last-child{ border-bottom:0; }
.suggestions a:hover{ background:var(--accent-bg); text-decoration:none; }
.suggestions .tag{ font-size:12px; color:var(--accent); background:var(--accent-bg);
  padding:2px 8px; border-radius:999px; margin-left:auto; white-space:nowrap; }
.suggestions .s-sym .tag{ color:#7a4f00; background:#fdf0d5; }

/* ---------- Chips / quick categories ---------- */
.chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:28px 0 0; }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px;
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  font-size:14px; font-weight:500; color:var(--ink); }
.chip:hover{ border-color:var(--accent); color:var(--accent-dk); text-decoration:none;
  box-shadow:var(--glow); background:var(--accent-bg); }

/* ---------- Sections ---------- */
section.block{ padding:48px 0; }
.eyebrow{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 8px; font-weight:600; }
h2.sec{ font-family:var(--f-display); font-weight:600; font-size:clamp(24px,3vw,32px);
  letter-spacing:-.01em; margin:0 0 6px; }
.sec-sub{ color:var(--ink-soft); margin:0 0 24px; font-size:16px; }

/* ---------- Product / offer grid ---------- */
.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s;
  display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none; }
.card .brand-tag{ font-size:12px; color:var(--ink-soft); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; }
.card h3{ font-size:16px; margin:6px 0 12px; color:var(--ink); line-height:1.35; font-weight:600; }
.card .price-row{ margin-top:auto; display:flex; align-items:baseline; gap:8px; }
.card .price{ font-family:var(--f-mono); font-size:22px; font-weight:600; color:var(--price); }
.card .price small{ font-size:13px; color:var(--ink-soft); font-weight:400; }
.card .from{ font-size:12px; color:var(--ink-soft); }
.card .offers-n{ font-size:13px; color:var(--accent); margin-top:8px; font-weight:500; }

/* ---------- Price comparison table (core feature) ---------- */
.compare{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); }
.compare table{ width:100%; border-collapse:collapse; }
.compare th{ text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); padding:14px 16px; border-bottom:1px solid var(--line);
  background:var(--bg); font-weight:600; }
.compare td{ padding:16px; border-bottom:1px solid var(--line); font-size:15px; vertical-align:middle; }
.compare tr:last-child td{ border-bottom:0; }
.compare tr.best{ background:linear-gradient(90deg, #fffaf0, transparent 60%); }
.compare .merchant{ font-weight:600; color:var(--ink); }
.compare .cell-price{ font-family:var(--f-mono); font-size:18px; font-weight:600; color:var(--price); white-space:nowrap; }
.compare .cell-price del{ color:var(--ink-soft); font-size:13px; font-weight:400; margin-left:6px; }
.compare .unit{ font-size:13px; color:var(--ink-soft); font-family:var(--f-mono); }
.badge{ display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.04em; }
.badge-best{ background:var(--gold); color:#3a2a00; }
.badge-stock{ background:var(--accent-bg); color:var(--accent-dk); }
.badge-out{ background:#fbe7e2; color:#9a2a0d; }
.btn-buy{ display:inline-flex; align-items:center; gap:6px; background:var(--grad);
  color:#fff; font-weight:700; font-size:14px; padding:10px 20px; border-radius:var(--r-sm);
  white-space:nowrap; box-shadow:0 4px 12px -4px rgba(7,151,106,.5); transition:filter .15s; }
.btn-buy:hover{ filter:brightness(1.07); color:#fff; text-decoration:none; }
.btn-buy.disabled{ background:var(--line); color:var(--ink-soft); pointer-events:none; }

/* ---------- Answer-first box (AEO) ---------- */
.answer-box{ background:var(--accent-bg); border:1px solid #c5e6db; border-left:4px solid var(--accent);
  border-radius:var(--r); padding:20px 24px; margin:0 0 28px; }
.answer-box .label{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-dk); font-weight:600; margin:0 0 8px; }
.answer-box p{ margin:0; font-size:17px; color:var(--ink); }

/* ---------- Content / article ---------- */
article.content h2{ font-family:var(--f-display); font-weight:600; font-size:26px;
  letter-spacing:-.01em; margin:36px 0 12px; }
article.content h3{ font-size:20px; margin:24px 0 8px; font-weight:600; }
article.content p{ margin:0 0 16px; }
article.content ul, article.content ol{ margin:0 0 16px; padding-left:24px; }
article.content li{ margin:0 0 8px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:13px; color:var(--ink-soft); padding:24px 0 0; }
.breadcrumb a{ color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb span{ margin:0 6px; opacity:.5; }

/* ---------- CTA / leadbox ---------- */
.leadbox{ background:var(--ink); color:#dce8e3; border-radius:var(--r); padding:32px;
  text-align:center; margin:36px 0; }
.leadbox h3{ font-family:var(--f-display); color:#fff; font-size:24px; margin:0 0 10px; font-weight:600; }
.leadbox p{ margin:0 0 18px; color:#aebfb8; }
.leadbox .btn-buy{ background:var(--accent); }

/* ---------- FAQ ---------- */
.faq dt{ font-weight:600; font-size:17px; margin:20px 0 6px; color:var(--ink); }
.faq dd{ margin:0 0 8px; color:var(--ink-soft); }

/* ---------- Disclaimer / disclosure ---------- */
.disclaimer{ font-size:13px; color:var(--ink-soft); background:#fbf7ed; border:1px solid #f0e6cf;
  border-radius:var(--r-sm); padding:12px 16px; margin:20px 0; }
.aff-disclosure{ font-size:12px; color:var(--ink-soft); margin:8px 0 0; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#9fb2ab; margin-top:64px; padding:48px 0 28px; font-size:14px; }
.site-footer h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 14px; }
.site-footer a{ color:#c2d2cc; }
.site-footer a:hover{ color:#fff; }
.footer-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-cols ul{ list-style:none; padding:0; margin:0; }
.footer-cols li{ margin:0 0 9px; }
.footer-legal{ border-top:1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:20px;
  font-size:12px; color:#7e928b; line-height:1.7; }

/* ---------- Cookie ---------- */
.cookie{ position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
  width:calc(100% - 32px); max-width:520px;
  background:var(--ink); color:#dce8e3; border-radius:var(--r); padding:18px 22px;
  box-shadow:var(--shadow-lg); z-index:100; font-size:14px; display:none; }
.cookie.show{ display:block; }
.cookie .row{ display:flex; gap:10px; margin-top:12px; }
.cookie button{ flex:1; border:0; border-radius:var(--r-sm); padding:10px; font-weight:600;
  cursor:pointer; font-size:14px; }
.cookie .accept{ background:var(--accent); color:#fff; }
.cookie .reject{ background:transparent; color:#dce8e3; border:1px solid rgba(255,255,255,.3); }

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .footer-cols{ grid-template-columns:1fr 1fr; gap:24px; }
  .header-search{ display:none; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .hero{ padding:48px 0 32px; }
  .site-header nav{ display:none; }
  .compare .hide-sm{ display:none; }
  .compare td, .compare th{ padding:12px 10px; }
  .searchbox button span{ display:none; }
  .searchbox button{ padding:0 22px; }
  .footer-cols{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   E-COMMERCE / SHOP LAYOUT (stil farmacie online)
   ========================================================================== */

/* layout cu sidebar */
.shop{ display:grid; grid-template-columns:240px 1fr; gap:28px; align-items:start;
  padding:24px 0 48px; }
.shop-aside{ position:sticky; top:80px; }
.shop-aside h3{ font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); margin:0 0 12px; font-weight:600; }
.cat-list{ list-style:none; margin:0 0 28px; padding:0; }
.cat-list li{ margin:0; }
.cat-list a{ display:flex; justify-content:space-between; align-items:center;
  padding:9px 12px; border-radius:var(--r-sm); color:var(--ink); font-size:15px; }
.cat-list a:hover{ background:var(--accent-bg); color:var(--accent-dk); text-decoration:none; }
.cat-list a.active{ background:var(--accent); color:#fff; font-weight:600; }
.cat-list a .n{ font-size:12px; color:var(--ink-soft); }
.cat-list a.active .n{ color:rgba(255,255,255,.8); }
.filter-group{ border-top:1px solid var(--line); padding-top:16px; margin-top:8px; }
.filter-group label{ display:flex; align-items:center; gap:8px; padding:6px 0;
  font-size:14px; color:var(--ink); cursor:pointer; }

/* toolbar listare */
.shop-toolbar{ display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.shop-toolbar .count{ font-size:14px; color:var(--ink-soft); }
.shop-toolbar select{ border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 12px; font-size:14px; background:var(--paper); color:var(--ink); }

/* grila produse stil shop */
.product-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.pcard{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .12s, transform .12s; position:relative; }
.pcard:hover{ box-shadow:var(--glow-strong); transform:translateY(-3px); text-decoration:none; border-color:var(--accent-bg2); }
.pcard .thumb{ aspect-ratio:1; background:var(--bg); display:flex; align-items:center;
  justify-content:center; border-bottom:1px solid var(--line); padding:14px; position:relative; }
.pcard .thumb svg{ width:60%; height:60%; opacity:.45; }
/* eticheta discreta forma produs (capsule/plic/etc) - colt opus fata de badge-ul farmacii */
.pc-forma{ position:absolute; top:8px; right:8px; z-index:2; font-size:10px; font-weight:700;
  letter-spacing:.02em; padding:3px 9px; border-radius:999px; background:var(--accent-bg);
  color:var(--accent-dk); border:1px solid var(--accent-bg2); backdrop-filter:blur(2px);
  text-transform:capitalize; box-shadow:0 1px 3px rgba(7,151,106,.12); }
.pcard .thumb img{ width:100%; height:100%; object-fit:contain; }
.pcard .pc-body{ padding:12px 14px; display:flex; flex-direction:column; flex:1; }
.pcard .pc-brand{ font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); font-weight:600; }
.pcard .pc-title{ font-size:14px; line-height:1.35; color:var(--ink); margin:4px 0 10px;
  font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard .pc-foot{ margin-top:auto; }
.pcard .pc-price{ font-family:var(--f-mono); font-weight:600; font-size:19px; color:var(--price); }
.pcard .pc-price small{ font-size:12px; color:var(--ink-soft); font-weight:400; }
.pcard .pc-old{ font-size:12px; color:var(--ink-soft); text-decoration:line-through; margin-left:5px; }
.pcard .pc-n{ font-size:12px; color:var(--accent); margin-top:3px; font-weight:500; }
.pc-badge{ position:absolute; top:8px; left:8px; font-size:10px; font-weight:700;
  padding:3px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.03em; z-index:2; }
.pc-badge.otc{ background:#e7f4ef; color:var(--accent-dk); }
.pc-badge.promo{ background:var(--price); color:#fff; }

/* ---------- PRODUCT DETAIL (stil farmacie) ---------- */
.pdp{ display:grid; grid-template-columns:380px 1fr; gap:36px; padding:24px 0 40px; align-items:start; }
.pdp-media{ position:sticky; top:80px; }
.pdp-image{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; padding:32px; }
.pdp-image svg{ width:55%; height:55%; opacity:.4; }
.pdp-image img{ width:100%; height:100%; object-fit:contain; }
.pdp-info h1{ font-family:var(--f-body); font-weight:600; font-size:24px; line-height:1.25;
  letter-spacing:-.01em; margin:0 0 6px; color:var(--ink); }
.pdp-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); margin:0 0 16px; }
.pdp-meta b{ color:var(--ink); font-weight:600; }
.pdp-rating{ font-size:13px; color:var(--ink-soft); margin:0 0 16px; }
.pdp-rating .stars{ color:#d8a200; letter-spacing:2px; }

/* price box afiliat */
.buybox{ background:var(--paper); border:1.5px solid var(--accent-bg2); border-radius:var(--r-lg);
  padding:22px; margin:0 0 20px; box-shadow:var(--glow); }
.buybox .bb-price{ font-family:var(--f-mono); font-size:32px; font-weight:600; color:var(--price); }
.buybox .bb-price small{ font-size:15px; color:var(--ink-soft); font-weight:400; }
.buybox .bb-old{ font-size:15px; color:var(--ink-soft); text-decoration:line-through; margin-left:8px; }
.buybox .bb-from{ font-size:13px; color:var(--ink-soft); margin:0 0 4px; }
.buybox .btn-offer{ display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--grad); color:#fff; font-weight:700; font-size:16px; padding:15px;
  border-radius:var(--r-sm); margin-top:14px; width:100%; box-shadow:var(--glow); transition:filter .15s; }
.buybox .btn-offer:hover{ filter:brightness(1.07); color:#fff; text-decoration:none; }
.buybox .bb-merchant{ font-size:13px; color:var(--ink-soft); text-align:center; margin-top:8px; }
.buybox .bb-compare-link{ display:block; text-align:center; margin-top:12px; font-size:14px; font-weight:500; }

/* tabs / sectiuni prospect */
.pdp-sections{ margin-top:8px; }
.pdp-section{ border:1px solid var(--line); border-radius:var(--r); margin-bottom:14px;
  background:var(--paper); overflow:hidden; }
.pdp-section > h2{ font-family:var(--f-body); font-size:17px; font-weight:600; margin:0;
  padding:16px 20px; background:var(--bg); border-bottom:1px solid var(--line); color:var(--ink); }
.pdp-section .body{ padding:18px 20px; }
.pdp-section .body p{ margin:0 0 12px; }
.pdp-section .body p:last-child{ margin:0; }
.spec-table{ width:100%; border-collapse:collapse; font-size:15px; }
.spec-table td{ padding:10px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.spec-table td:first-child{ color:var(--ink-soft); width:170px; font-weight:500; }
.spec-table tr:last-child td{ border-bottom:0; }
.prospect-note{ font-size:13px; color:var(--ink-soft); border-top:1px solid var(--line);
  margin-top:14px; padding-top:14px; }
.anmdmr{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500;
  color:var(--accent); }

/* mini price-compare strip on PDP */
.pricestrip{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper); }
.pricestrip .row{ display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border-bottom:1px solid var(--line); gap:12px; }
.pricestrip .row:last-child{ border-bottom:0; }
.pricestrip .row.best{ background:linear-gradient(90deg,#fffaf0,transparent 70%); }
.pricestrip .ps-merchant{ font-weight:600; font-size:15px; }
.pricestrip .ps-price{ font-family:var(--f-mono); font-weight:600; color:var(--price); font-size:17px; white-space:nowrap; }

@media (max-width:860px){
  .shop{ grid-template-columns:1fr; }
  .shop-aside{ position:static; }
  .cat-list{ display:flex; flex-wrap:wrap; gap:6px; }
  .cat-list a{ border:1px solid var(--line); }
  .filter-group{ display:none; }
  .pdp{ grid-template-columns:1fr; }
  .pdp-media{ position:static; max-width:320px; margin:0 auto; }
}

/* ---------- PDP: comparatie pusa sus (prima interactiune) ---------- */
.pdp-compare-top{ border:1.5px solid var(--accent-bg2) !important; box-shadow:var(--glow); }
.pdp-compare-top > h2{ background:var(--accent-bg) !important; color:var(--accent-dk) !important;
  display:flex; align-items:center; gap:8px; }
.pdp-compare-top > h2::before{ content:""; width:9px; height:9px; border-radius:50%;
  background:var(--green); box-shadow:0 0 8px 1px rgba(11,191,122,.7); flex:0 0 9px; }
.pdp-compare-top .pricestrip{ border:0; }
.pdp-compare-top .pricestrip .row{ padding:14px 4px; }
.pdp-compare-top .pricestrip .row.best{ background:linear-gradient(90deg,var(--accent-bg),transparent 75%);
  border-radius:10px; }

/* buybox: pret mai pregnant pe gradient subtil */
.buybox .bb-price{ color:var(--price); }
.buybox{ background:linear-gradient(180deg,#ffffff,#f7fcfa); }

/* badge "cel mai mic" pe gradient verde */
.badge-best{ background:var(--grad) !important; color:#fff !important;
  box-shadow:0 2px 8px -2px rgba(7,151,106,.5); }
.badge-stock{ background:var(--accent-bg); color:var(--accent-dk); }

/* answer-box: accent gradient pe bara stanga */
.answer-box{ border-left:4px solid transparent !important;
  border-image:var(--grad) 1; background:var(--accent-bg); }

/* link navy discret pt elemente "info" (ex. ANMDMR ramane verde; folosim navy doar la focus) */
:focus-visible{ outline-color:var(--focus); }

/* eyebrow pe gradient text */
.eyebrow{ color:var(--accent); }

/* footer: tenta verde-inchis premium */
.site-footer{ background:var(--green-deep); }
/* butonul hamburger — ascuns pe desktop, vizibil pe mobil (definit INAINTE de media query) */
.mobile-toggle{ display:none; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px; background:var(--accent-bg);
  border:0; cursor:pointer; flex:0 0 46px; color:var(--accent-dk); }
.mobile-toggle svg{ width:24px; height:24px; }

/* =========================================================
   RESPONSIVE — header & navigatie (mobil profesionist)
   ========================================================= */
@media (max-width:920px){
  .header-actions{ display:flex; order:1.5; margin-left:auto; }
  .header-actions a{ display:none; }   /* link comparare prețuri ascuns pe mobil */
  .nav-links{ display:none; }            /* linkurile trec in mega-meniu */
  .megamenu .mm-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:720px){
  /* Header pe 2 randuri: (logo + hamburger) apoi (search full-width) */
  .header-top{ flex-wrap:wrap; gap:12px 10px; padding:12px 0; }
  .brand{ font-size:20px; order:1; }
  .brand .mark{ width:34px; height:34px; flex:0 0 34px; }
  .header-search{ order:3; flex:1 1 100%; max-width:none; }
  .header-search form{ padding:0 5px 0 16px; }
  .header-search input{ height:46px; font-size:15px; }
  .header-search button{ height:36px; padding:0 16px; font-size:14px; }
  /* buton hamburger (mobil) apare in dreapta logo-ului */
  .mobile-toggle{ display:flex; order:2; margin-left:auto; }
  /* bara verde: doar butonul Categorii, full width */
  .nav-bar .nav-inner{ padding:0; }
  .nav-links{ display:none; }
  .nav-cats{ width:100%; justify-content:center; height:48px; border-radius:0;
    background:rgba(255,255,255,.14); }
  .nav-promo{ display:none; }
  .megamenu{ padding:14px 0; }
  .megamenu .mm-grid{ grid-template-columns:1fr; gap:4px; }
  .megamenu a{ padding:14px; }
}

@media (max-width:480px){
  .brand .b-name{ font-size:19px; }
  .header-search button span{ display:inline; }
}


/* ============ HOMEPAGE: sectiuni Oferte / Trending / Categorii ============ */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; }
.block-offers{ background:linear-gradient(180deg,#fff,#f7fcfa); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.block-trending{ }

/* card cu economie (badge -%) */
.pc-badge.save{ background:var(--price); color:#fff; box-shadow:0 2px 8px -2px rgba(194,53,23,.5); }
.pc-badge.multi{ background:var(--accent-bg); color:var(--accent-dk); }
.pc-save{ font-size:12.5px; color:var(--price); font-weight:700; margin:2px 0 0; }

/* grila categorii cu imagini WEBP */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cat-card{ display:block; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); color:var(--ink);
  transition:transform .14s, box-shadow .14s, border-color .14s; }
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--glow-strong);
  border-color:var(--accent-bg2); text-decoration:none; }
.cat-img{ aspect-ratio:3/2; overflow:hidden; background:var(--accent-bg); }
.cat-img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s; }
.cat-card:hover .cat-img img{ transform:scale(1.04); }
.cat-body{ padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.cat-name{ font-weight:700; font-size:17px; color:var(--ink); }
.cat-n{ font-size:13px; color:var(--ink-soft); background:var(--accent-bg);
  padding:3px 11px; border-radius:999px; font-weight:600; }

@media (max-width:900px){
  .cat-grid{ grid-template-columns:1fr 1fr; gap:14px; }
}
@media (max-width:560px){
  .cat-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .cat-name{ font-size:15px; }
  .cat-body{ padding:12px 13px; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ============ FAVORITE (fara cont) ============ */
/* buton inima header */
.ha-fav{ display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer;
  color:var(--ink); font-weight:600; position:relative; padding:0; font-family:inherit; }
.ha-fav:hover{ color:var(--accent); }
.ha-fav .ha-ico{ width:38px; height:38px; border-radius:50%; background:var(--accent-bg);
  display:flex; align-items:center; justify-content:center; color:var(--accent-dk); flex:0 0 38px; }
.ha-fav .ha-ico svg{ width:20px; height:20px; }
.ha-fav .ha-txt{ display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.ha-fav .ha-sub{ font-size:11px; color:var(--ink-soft); font-weight:500; }
.ha-fav .ha-main{ font-size:14px; color:var(--ink); font-weight:700; }
.fav-count{ position:absolute; top:-4px; left:28px; min-width:18px; height:18px; padding:0 5px;
  background:var(--price); color:#fff; font-size:11px; font-weight:700; border-radius:999px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(194,53,23,.5); }

/* inima pe card */
.pcard-wrap{ position:relative; }
.pc-fav{ position:absolute; top:10px; right:10px; z-index:5; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.95); border:1px solid var(--line); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  box-shadow:0 2px 8px rgba(10,31,26,.12); transition:transform .12s, color .12s, background .12s; }
.pc-fav:hover{ transform:scale(1.1); color:var(--price); }
.pc-fav svg{ width:19px; height:19px; transition:fill .12s; }
.pc-fav.is-fav{ color:var(--price); background:#fff; }
.pc-fav.is-fav svg{ fill:var(--price); stroke:var(--price); }
/* cand inima e in colt, eticheta forma se muta sa nu se suprapuna */
.pcard-wrap .pc-forma{ right:54px; }

/* inima pe pagina produs (buybox) */
.bb-fav{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-top:10px; padding:11px; background:#fff; border:1.5px solid var(--accent);
  color:var(--accent-dk); border-radius:12px; font-weight:600; font-size:14.5px; cursor:pointer;
  font-family:inherit; transition:background .12s; }
.bb-fav:hover{ background:var(--accent-bg); }
.bb-fav svg{ width:19px; height:19px; }
.bb-fav.is-fav{ background:var(--accent-bg); color:var(--price); border-color:var(--price); }
.bb-fav.is-fav svg{ fill:var(--price); stroke:var(--price); }

/* sertar favorite */
.fav-drawer-overlay{ position:fixed; inset:0; background:rgba(10,31,26,.4); z-index:90;
  opacity:0; visibility:hidden; transition:opacity .25s; }
.fav-drawer-overlay.open{ opacity:1; visibility:visible; }
.fav-drawer{ position:fixed; top:0; right:0; width:min(420px,100%); height:100%; background:var(--paper);
  z-index:91; box-shadow:-8px 0 32px rgba(10,31,26,.18); transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.fav-drawer.open{ transform:translateX(0); }
.fav-head{ display:flex; align-items:flex-start; justify-content:space-between; padding:22px 22px 16px;
  border-bottom:1px solid var(--line); flex:0 0 auto; }
.fav-head h2{ font-family:var(--f-display); font-weight:600; font-size:22px; margin:0; color:var(--ink); }
.fav-sub{ font-size:13px; color:var(--ink-soft); margin:4px 0 0; }
.fav-close{ width:38px; height:38px; border-radius:50%; background:var(--bg); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex:0 0 38px; }
.fav-close:hover{ background:var(--accent-bg); color:var(--accent-dk); }
.fav-list{ flex:1; overflow-y:auto; padding:12px 16px; }
.fav-item{ display:flex; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px;
  margin-bottom:10px; background:#fff; }
.fav-item-img{ width:64px; height:64px; flex:0 0 64px; border-radius:10px; background:var(--bg);
  overflow:hidden; display:flex; align-items:center; justify-content:center; }
.fav-item-img img{ width:100%; height:100%; object-fit:contain; }
.fav-item-img .ph{ width:30px; height:30px; opacity:.4; }
.fav-item-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fav-item-title{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fav-item-meta{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.fav-item-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:8px; }
.fav-item-price{ font-family:var(--f-mono); font-weight:600; color:var(--price); font-size:15px; }
.fav-item-go{ font-size:12px; font-weight:700; color:#fff; background:var(--grad); padding:6px 12px;
  border-radius:999px; white-space:nowrap; }
.fav-item-go:hover{ filter:brightness(1.06); text-decoration:none; }
.fav-item-rm{ background:none; border:0; cursor:pointer; color:var(--ink-soft); padding:4px;
  flex:0 0 auto; align-self:flex-start; }
.fav-item-rm:hover{ color:var(--price); }
.fav-item-rm svg{ width:16px; height:16px; }
.fav-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--ink-soft); padding:40px 30px; gap:6px; }
.fav-empty svg{ color:var(--line); margin-bottom:8px; }
.fav-empty p{ margin:0; font-size:15px; font-weight:600; color:var(--ink); }
.fav-empty-hint{ font-size:13px; font-weight:400 !important; color:var(--ink-soft) !important; }
.fav-foot{ flex:0 0 auto; border-top:1px solid var(--line); padding:16px 22px; background:var(--bg); }
.fav-total-row{ display:flex; align-items:center; justify-content:space-between; font-size:15px;
  color:var(--ink); margin-bottom:6px; }
.fav-total-row strong{ font-family:var(--f-mono); font-size:19px; color:var(--price); }
.fav-foot-note{ font-size:11px; color:var(--ink-soft); margin:0 0 12px; line-height:1.4; }
.fav-clear{ width:100%; padding:10px; background:#fff; border:1px solid var(--line); border-radius:10px;
  color:var(--ink-soft); font-weight:600; cursor:pointer; font-family:inherit; font-size:13px; }
.fav-clear:hover{ border-color:var(--price); color:var(--price); }

@media (max-width:720px){
  .ha-fav .ha-txt{ display:none; }     /* pe mobil doar inima */
  .fav-count{ left:24px; }
}