/* ════════════════════════════════════════════════════════════════════════════
   elfauno — front-end public (redesign 2026-08).

   Fișier de sine stătător: își declară proprii tokeni și NU mai depinde de
   style.css. Separarea e intenționată — style.css + admin666666.css rămân ale
   adminului, iar redesignul public schimbă paleta și tipografia din temelii.

   Tokenii vin din design system-ul „Organic" al machetei: rampe generate în
   OKLCH pe o singură scară de luminozitate, deci treapta N a oricărui rol se
   potrivește vizual cu treapta N a celorlalte.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:      #EFE9E4;
  --divider: color-mix(in srgb, #201e1d 16%, transparent);

  --n-100: #f9f4ed;  --n-200: #eee7db;  --n-300: #dcd3c4;
  --n-400: #c0b6a5;  --n-500: #a19786;  --n-600: #82796a;
  --n-700: #645c50;  --n-800: #474238;  --n-900: #2e2b25;

  --a-100: #fff2eb;  --a-200: #ffe1d0;  --a-300: #ffc6a5;
  --a-400: #f6a06b;  --a-500: #d67f48;  --a-600: #b2622d;
  --a-700: #8c491a;  --a-800: #643312;  --a-900: #402310;
  --accent: #c67139;

  --g-100: #f0fae1;  --g-200: #e1eecc;  --g-300: #ccdbb2;
  --g-400: #aebf92;  --g-500: #8fa073;  --g-600: #728157;
  --g-700: #56633f;  --g-800: #3d472b;  --g-900: #272e1b;

  --rose: #d97a8f;

  --font-h:    'Figtree', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;

  --r-sm: 8px;  --r-md: 16px;  --r-lg: 28px;  --r-pill: 999px;

  --sh-sm: 0 1px 2px   color-mix(in srgb, #2e2b25 14%, transparent);
  --sh-md: 0 3px 10px  color-mix(in srgb, #2e2b25 16%, transparent);
  --sh-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);

  --maxw: 1280px;
  --pad:  44px;
}

/* ── Bază ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--n-900);
  font-family: var(--font-body); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-h); font-weight: 800; letter-spacing: -.02em;
  color: var(--n-900); margin: 0; text-wrap: pretty;
}
h1 { font-size: 48px; line-height: 1.1; }
h2 { font-size: 34px; line-height: 1.15; }
h3 { font-size: 23px; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--a-700); }
img { max-width: 100%; }
button { font: inherit; }

/* Secțiunile de conținut se centrează singure; benzile full-bleed (hero, band,
   footer) își gestionează propria lățime. */
main > * { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
main > .full { max-width: none; padding-inline: 0; }

/* Eticheta de câmp — coloana vertebrală a redesignului: fiecare dată (gramaj,
   magazin, preț) e anunțată explicit, nu ghicită din context. */
.flabel, .section-label {
  font: 500 12px var(--font-h); letter-spacing: .1em;
  text-transform: uppercase; color: var(--n-600);
}
.muted { color: var(--n-700); }
/* Ascuns vizual, citit de screen reader (legendele fieldset-urilor de filtre,
   unde <summary> poartă deja numele grupului pe ecran). */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── Antet ────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--n-100); border-bottom: 1px solid var(--n-300);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 32px; padding: 20px var(--pad);
}
.brand-lockup { display: flex; align-items: center; gap: 14px; flex: none; }
.brand-lockup img { height: 46px; width: auto; display: block; }
.beta-pill {
  font: 500 12px var(--font-h); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--a-300);
  border-radius: var(--r-lg); padding: 3px 8px; white-space: nowrap;
}
.nav-links { display: flex; gap: 20px; font-size: 18px; white-space: nowrap; }
.nav-links a { color: var(--n-900); }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header-link { font-size: 17px; color: var(--n-700); white-space: nowrap; }

/* ── Căutare ──────────────────────────────────────────────────────────────── */
.search { position: relative; }
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--n-300);
  border-radius: var(--r-pill); padding: 9px 9px 9px 22px;
}
.search-box:focus-within { border-color: var(--accent); }
.search-prompt { display: none; }
.search-input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 18px; color: var(--n-900);
}
.search-input::placeholder { color: var(--n-600); }
.search-clear {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin-right: -2px;
  border: 0; border-radius: 50%; background: none;
  color: var(--n-600); cursor: pointer;
}
.search-clear:hover { background: var(--n-200); color: var(--n-900); }
.search-clear[hidden] { display: none; }
.search-submit {
  flex: none; border: 0; cursor: pointer;
  background: var(--a-700); color: var(--n-100);
  font-size: 17px; padding: 11px 26px; border-radius: var(--r-pill);
}
.search-submit:hover { background: var(--a-800); }

.search--nav { margin-left: auto; width: 420px; flex: none; }
.has-hero-search .search--nav { display: none; }

.search--hero { max-width: 720px; margin: 0 auto; }
.search--hero .search-box { background: var(--n-100); box-shadow: var(--sh-lg); padding: 9px 9px 9px 26px; }
.search--hero .search-input { font-size: 20px; }
.search--hero .search-submit { font-size: 19px; padding: 15px 34px; }

/* Validare submit gol — search.js pune .is-invalid și o scoate pe animationend,
   deci numele keyframe-ului („search-invalid") e un contract cu JS-ul. */
@keyframes search-invalid {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.search-box.is-invalid { animation: search-invalid .4s ease-in-out; border-color: var(--a-600); }

/* Typeahead — clasele de mai jos sunt generate de search.js. */
.search-sug {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--n-100); border: 1px solid var(--n-300);
  border-radius: var(--r-md); box-shadow: var(--sh-lg); overflow: hidden;
}
.search-sug[hidden] { display: none; }
.search-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--n-200); color: var(--n-900);
}
.search-row:last-of-type { border-bottom: 0; }
.search-row.is-active, .search-row:hover { background: var(--a-100); color: var(--n-900); }
.search-thumb {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-sm);
  background: var(--n-200); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.search-thumb img { width: 100%; height: 100%; object-fit: contain; }
.search-meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.search-name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-type { font-size: 13px; color: var(--n-600); }
.search-price {
  margin-left: auto; font-family: var(--font-h); font-weight: 800;
  font-size: 17px; color: var(--n-900); white-space: nowrap;
}
.search-foot { display: block; padding: 12px 16px; font-size: 15px; color: var(--a-800); background: var(--g-100); }
.search-foot:hover { background: var(--g-200); color: var(--a-800); }
.search-empty { padding: 14px 16px; font-size: 15px; color: var(--n-600); }

/* ── Butoane și pastile ───────────────────────────────────────────────────── */
.btn {
  display: inline-block; text-align: center; cursor: pointer;
  border-radius: var(--r-pill); font-size: 17px; padding: 13px 28px;
  border: 1px solid transparent; white-space: nowrap;
}
.btn--primary { background: var(--a-700); color: var(--n-100); }
.btn--primary:hover { background: var(--a-800); color: var(--n-100); }
.btn--ghost { border-color: var(--n-900); color: var(--n-900); }
.btn--ghost:hover { background: var(--n-200); color: var(--n-900); }
.btn--muted { border-color: var(--n-300); color: var(--n-700); pointer-events: none; }
.btn--block { display: block; width: 100%; }
.btn--lg { font-size: 19px; padding: 15px 32px; }

.chip { display: inline-block; font-size: 16px; color: var(--n-900); background: var(--n-200); border-radius: var(--r-sm); padding: 7px 14px; }
a.chip:hover { background: var(--n-300); color: var(--n-900); }
/* Gramajul are culoare proprie (verde-oliv) ca să fie recunoscut instant. */
.chip--vol { background: var(--g-100); color: var(--g-800); font-size: 15px; padding: 5px 11px; border-radius: 7px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pill {
  border: 1px solid var(--n-300); background: var(--n-100);
  border-radius: var(--r-pill); padding: 13px 26px;
  font-family: var(--font-h); font-weight: 800; letter-spacing: -.02em;
  font-size: 21px; color: var(--n-900);
}
.pill:hover { border-color: var(--accent); color: var(--n-900); }
.pill .n { font-family: var(--font-body); font-weight: 400; font-size: 15px; color: var(--n-600); }
.pill--sm { padding: 8px 16px; font-size: 17px; font-weight: 600; }

/* ── Poză cu siluetă de rezervă ───────────────────────────────────────────── */
/* Hotlink direct la poza magazinului; ce pică (CORP) se scoate din DOM și rămâne
   silueta SVG de dedesubt. Umple containerul, care dictează dimensiunea. */
.thumb {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.thumb-ph { height: 56%; width: auto; stroke: var(--n-400); stroke-width: 1.2; fill: none; }

/* ── Preț ─────────────────────────────────────────────────────────────────── */
.price {
  font-family: var(--font-h); font-weight: 800; letter-spacing: -.02em;
  color: var(--n-900); line-height: 1; white-space: nowrap;
}
.price-num { font-size: 34px; }
.price-cur { font-size: 20px; }
.price--sm .price-num { font-size: 26px; }  .price--sm .price-cur { font-size: 16px; }
.price--lg .price-num { font-size: 54px; }  .price--lg .price-cur { font-size: 26px; }
.price.faint { color: var(--n-500); }
.price-was { font-size: 17px; color: var(--n-700); text-decoration: line-through; padding-bottom: 4px; }
.save { font: 600 16px var(--font-h); color: var(--g-700); }

/* ── Sigla magazinului ────────────────────────────────────────────────────── */
.retailer-mark {
  width: 28px; height: 28px; flex: none; border-radius: 7px;
  background: var(--n-900); color: var(--n-100);
  font: 500 11px var(--font-h); display: flex; align-items: center; justify-content: center;
}
.retailer-mark--lg { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }

/* ── Stoc ─────────────────────────────────────────────────────────────────── */
.stock { font-size: 17px; color: var(--g-700); white-space: nowrap; }
.stock::before { content: '● '; }
.stock--low { color: var(--n-700); }  .stock--low::before { content: '○ '; }
.stock--out { color: var(--a-700); }  .stock--out::before { content: '✕ '; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  padding: 64px var(--pad) 56px; text-align: center;
  background: linear-gradient(180deg, var(--a-200) 0%, var(--n-100) 100%);
  border-bottom: 1px solid var(--n-300);
}
.hero-inner { max-width: var(--maxw); margin: 0 auto; }
.hero-eyebrow {
  font: 500 12px var(--font-h); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.hero h1 { font-size: 62px; line-height: 1.08; max-width: 820px; margin: 0 auto 18px; }
.hero p { font-size: 21px; line-height: 1.5; color: var(--n-700); margin: 0 auto 34px; max-width: 600px; text-wrap: pretty; }
.hero-stat { margin-top: 22px; font-size: 16px; color: var(--n-700); }
.hero-stat b { color: var(--n-900); }

/* Hero compact — categorie, branduri, rezultate */
.hero--sub { padding: 28px var(--pad) 22px; text-align: left; background: var(--n-100); }
.hero--sub h1 { font-size: 38px; line-height: 1.15; margin: 0 0 8px; max-width: none; }
.hero--sub p { font-size: 18px; margin: 0; max-width: 70ch; }
.hero--sub .search--hero { margin: 18px 0 0; }

/* ── Bandă de argumente ───────────────────────────────────────────────────── */
.band { background: var(--n-300); border-bottom: 1px solid var(--n-300); }
.band-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.band-cell { background: var(--n-100); padding: 26px 34px; }
.band-cell b { display: block; font-family: var(--font-h); font-weight: 800; letter-spacing: -.02em; font-size: 21px; margin-bottom: 6px; }
.band-cell span { font-size: 16.5px; line-height: 1.5; color: var(--n-700); }
.sec + .band { margin-top: 52px; border-top: 1px solid var(--n-300); }

/* ── Secțiuni ─────────────────────────────────────────────────────────────── */
.sec { padding-top: 52px; }
.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.sec-head .more { margin-left: auto; font-size: 17px; }
.sec-note { font-size: 17px; color: var(--n-700); }

/* ── Card de produs ───────────────────────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pcard {
  display: flex; flex-direction: column;
  background: var(--n-100); border: 1px solid var(--n-300);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); color: var(--n-900);
}
.pcard:hover { box-shadow: var(--sh-md); color: var(--n-900); }
.pcard-media { position: relative; height: 210px; background: var(--n-100); }
.pcard-badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--a-700); color: var(--n-100);
  font: 500 14px var(--font-h); padding: 5px 10px; border-radius: var(--r-sm);
}
.pcard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.pcard-brand { font: 500 12px var(--font-h); letter-spacing: .1em; text-transform: uppercase; color: var(--n-600); margin-bottom: 7px; }
.pcard-name { font-family: var(--font-h); font-weight: 800; letter-spacing: -.02em; font-size: 22px; line-height: 1.25; margin-bottom: 12px; }
.pcard-vols { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.pcard-price { display: flex; align-items: flex-end; gap: 9px; margin: auto 0 10px; }
.pcard-foot { display: flex; align-items: center; gap: 9px; padding-top: 14px; border-top: 1px solid var(--n-200); }
.pcard-foot .n { margin-left: auto; font-size: 16px; color: var(--n-700); }
.pcard-merchant { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Grilă de categorii ───────────────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.cat-card {
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--n-300); background: var(--n-100); color: var(--n-900);
}
.cat-card:hover { box-shadow: var(--sh-md); color: var(--n-900); }
.cat-art { display: block; height: 130px; }
.cat-art--1 { background: repeating-linear-gradient(135deg, var(--a-200) 0 9px, var(--a-100) 9px 18px); }
.cat-art--2 { background: repeating-linear-gradient(135deg, var(--g-200) 0 9px, var(--g-100) 9px 18px); }
.cat-art--3 { background: repeating-linear-gradient(135deg, var(--a-300) 0 9px, var(--a-100) 9px 18px); }
.cat-art--4 { background: repeating-linear-gradient(135deg, var(--g-300) 0 9px, var(--g-100) 9px 18px); }
.cat-art--0 { background: repeating-linear-gradient(135deg, var(--n-300) 0 9px, var(--n-200) 9px 18px); }
.cat-body { display: block; padding: 16px 18px 18px; }
.cat-title { display: block; font-family: var(--font-h); font-weight: 800; letter-spacing: -.02em; font-size: 23px; }
.cat-n { display: block; font-size: 16px; color: var(--n-700); margin-top: 4px; }
.cat-subs { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 15px; }
.cat-subs a { color: var(--n-700); }
.cat-subs a:hover { color: var(--accent); }

/* ── Cum funcționează ─────────────────────────────────────────────────────── */
.how { margin-top: 56px; background: var(--g-100); border-radius: var(--r-lg); padding: 44px 48px; }
.how p { font-size: 18px; color: var(--n-700); margin: 8px 0 32px; }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.how-n { font-family: var(--font-h); font-weight: 800; letter-spacing: -.02em; font-size: 40px; color: var(--accent); line-height: 1; margin-bottom: 12px; }
.how-t { font-size: 21px; margin-bottom: 7px; }
.how-d { font-size: 17px; line-height: 1.55; color: var(--n-700); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ── Despre noi ───────────────────────────────────────────────────────────── */
.story { max-width: 68ch; }
.story h2 { font-size: 28px; margin: 34px 0 14px; }
.story p { font-size: 19px; line-height: 1.65; margin: 0 0 22px; }
.story p:last-child { margin-bottom: 0; }

/* ── Rând de rezultat (căutare, categorie, brand) ─────────────────────────── */
.rlist { display: flex; flex-direction: column; gap: 14px; }
.rrow {
  display: grid; grid-template-columns: 120px 1fr 210px; gap: 22px; align-items: center;
  background: var(--n-100); border: 1px solid var(--n-300);
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-sm); color: var(--n-900);
}
.rrow:hover { box-shadow: var(--sh-md); color: var(--n-900); }
.rrow-media { height: 132px; border-radius: var(--r-md); background: var(--n-100); overflow: hidden; }
.rrow-fields { display: flex; gap: 14px; margin-bottom: 9px; flex-wrap: wrap; }
.rrow-field .flabel { display: block; font-size: 11px; margin-bottom: 3px; }
.rrow-field .v { font-size: 18px; }
.rrow-name { font-family: var(--font-h); font-weight: 800; letter-spacing: -.02em; font-size: 25px; line-height: 1.2; margin-bottom: 12px; }
.rrow-inline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rrow-inline > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rrow-inline .flabel { font-size: 11px; }
.rrow-right { text-align: right; }
.rrow-right .flabel { display: block; color: var(--g-700); font-size: 11px; margin-bottom: 5px; }
.rrow-unit { font-size: 16px; color: var(--n-700); margin: 6px 0 14px; }

/* ── Fir de navigare ──────────────────────────────────────────────────────── */
.breadcrumb { padding-top: 20px; padding-bottom: 4px; font-size: 16px; color: var(--n-700); }
.breadcrumb a { color: var(--n-700); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--n-400); margin: 0 4px; }
.breadcrumb > span:last-child { color: var(--n-900); }

/* ════════════════════════════════════════════════════════════════════════════
   Pagina de produs — machetele 3a (desktop) și 3b (mobil).

   Tokenii de mai jos sunt locali paginii: PDP-ul e mai deschis decât restul
   site-ului (fundal #f9f4ed cu suprafețe albe), corpul coboară la 15px și nicio
   greutate nu trece de 500 — ierarhia o dau dimensiunea și contrastul, nu
   bold-ul. `--pdp-accent` apare exclusiv pe CTA-uri, deci butonul „Vezi oferta"
   e singurul lucru colorat din pagină. Tokenii globali rămân neatinși: nicio
   altă pagină nu se schimbă.
   ════════════════════════════════════════════════════════════════════════════ */
.view-product {
  --pdp-bg: #f9f4ed;      --pdp-surface: #ffffff;  --pdp-subtle: #f2ece1;
  --pdp-txt: #2b2622;     --pdp-txt-2: #6b6259;    --pdp-muted: #948a7f;
  --pdp-accent: #7a3f1d;  --pdp-accent-h: #5f3016;
  --pdp-ok-bg: rgba(232, 242, 224, .4);  --pdp-ok: #3b6d11;  --pdp-warn: #854f0b;
  --pdp-line: rgba(43, 38, 34, .12);     --pdp-line-2: rgba(43, 38, 34, .28);
  --pdp-r: 8px;  --pdp-r-lg: 12px;

  background: var(--pdp-bg); color: var(--pdp-txt);
  font-family: var(--font-h); font-size: 15px;
}
.view-product .site-header { background: var(--pdp-surface); border-bottom-color: var(--pdp-line); }
.view-product h1, .view-product h2, .view-product h3 { color: var(--pdp-txt); font-weight: 500; letter-spacing: 0; }
.view-product h1 { font-size: 24px; line-height: 1.25; }
.view-product h2 { font-size: 18px; line-height: 1.3; }
.view-product h3 { font-size: 15px; line-height: 1.3; }
.view-product .sec { padding-top: 36px; }
.view-product .sec-head { margin-bottom: 10px; }
.view-product .breadcrumb { padding-top: 14px; padding-bottom: 0; font-size: 13px; color: var(--pdp-txt-2); }
.view-product .breadcrumb a { color: var(--pdp-txt-2); text-decoration: underline; }
.view-product .breadcrumb a:hover { color: var(--pdp-txt); }
.view-product .breadcrumb .sep { color: var(--pdp-muted); }
.view-product .breadcrumb > span:last-child { color: var(--pdp-txt); }

.phead { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; padding-top: 8px; }
.pgallery-main { height: 320px; border-radius: var(--pdp-r-lg); background: var(--pdp-subtle); overflow: hidden; }
.pgallery-init {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 96px; font-weight: 500; color: var(--pdp-muted);
}
.pgallery-note { font-size: 12px; color: var(--pdp-muted); margin-top: 8px; text-align: center; }
.peyebrow { font-size: 12px; letter-spacing: .04em; color: var(--pdp-txt-2); margin-bottom: 6px; }
.peyebrow a { color: inherit; text-decoration: underline; }
.peyebrow a:hover { color: var(--pdp-txt); }
/* Numele nu se trunchiază la primul rând — trei rânduri sunt suficiente pentru
   orice titlu real, al patrulea e semn că numele conține deja gramajul. */
.ptitle {
  font-size: 24px; margin-bottom: 10px; color: var(--pdp-txt);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ptags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.view-product .chip { font-size: 13px; background: var(--pdp-subtle); color: var(--pdp-txt); border-radius: var(--pdp-r); padding: 5px 11px; }
.view-product a.chip:hover { background: rgba(43, 38, 34, .1); color: var(--pdp-txt); }
.pabout-hero { margin-top: 4px; }
.pabout-hero h2 { margin-bottom: 10px; }

/* Bandă lipicioasă cu titlul — apare când h1-ul a ieșit din ecran (scriptul din
   pages/product.php pune `.is-on` și fixează `top` sub header-ul sticky).
   Ascunsă = trasă complet peste marginea de sus (`-100%`), ca la vulpavo: nu
   rămâne un strat invizibil peste conținut și nu depinde de tranziția pe
   `visibility`, care pe mobil o ținea nevăzută.
   `max-width/padding: 0` anulează regula `main > *`, altfel banda s-ar opri la
   1280px în loc să atingă marginile ecranului. z-index sub header (30), ca
   dropdown-ul de căutare să rămână deasupra. */
.pbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 25;
  max-width: none; padding: 0;
  background: var(--pdp-surface); border-bottom: 1px solid var(--pdp-line); box-shadow: var(--sh-sm);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.pbar.is-on { transform: translateY(0); opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .pbar { transition: none; } }
/* Înălțime fixă, nu dictată de conținut — `scroll-margin-top` de pe .ogrp
   depinde de ea (header + bandă). */
.pbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); height: 64px;
  display: flex; align-items: center; gap: 14px;
}
.pbar-media {
  width: 46px; height: 46px; flex: none; overflow: hidden;
  border: 1px solid var(--pdp-line); border-radius: var(--pdp-r); background: var(--pdp-subtle);
}
.pbar-txt { min-width: 0; }
.pbar-brand { display: block; font-size: 12px; letter-spacing: .04em; color: var(--pdp-txt-2); margin-bottom: 1px; }
.pbar-title {
  display: block; font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--pdp-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.price-note { font-size: 13px; color: var(--pdp-txt-2); margin: 10px 0 0; }

/* Selectorul de mărime — axa pe care se compară de fapt prețurile, deci urcă
   deasupra ofertelor. Activul se marchează prin fundal + bordură, nu prin bold:
   `box-shadow` interior ține îngroșarea în interiorul cutiei, ca trecerea de la
   1px la „2px" să nu mute chip-urile vecine. */
.vpick { margin-bottom: 20px; }
.vpick-label { font-size: 13px; color: var(--pdp-txt-2); margin-bottom: 8px; }
.vpick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vpick-item {
  display: block; min-width: 120px; padding: 10px 14px; color: var(--pdp-txt);
  background: var(--pdp-surface); border: 1px solid var(--pdp-line); border-radius: var(--pdp-r);
}
.vpick-item:hover { border-color: var(--pdp-line-2); color: var(--pdp-txt); }
.vpick-item.is-active {
  background: var(--pdp-subtle); border-color: var(--pdp-line-2);
  box-shadow: inset 0 0 0 1px var(--pdp-line-2);
}
.vpick-item.is-empty, .vpick-item.is-empty .vpick-v { color: var(--pdp-muted); }
.vpick-v { display: block; font-weight: 500; font-size: 15px; }
.vpick-c { display: block; font-size: 12px; color: var(--pdp-muted); margin-top: 2px; }
.vpick-p { display: block; font-size: 13px; color: var(--pdp-txt-2); margin-top: 4px; }
.vpick-best { display: block; font-size: 11px; color: var(--pdp-ok); margin-top: 4px; }

/* ── Tabelul de oferte ────────────────────────────────────────────────────── */
/* Listă densă cu hairline între rânduri, nu carduri rotunjite: comparația se
   face pe verticală, iar fiecare margine în plus e o pauză în citire. Bara de
   sortare stă lipită de cap, deci colțurile lor se închid una într-alta. */
.osec h2 { margin-bottom: 10px; }
.obar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--pdp-subtle); border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-r) var(--pdp-r) 0 0; padding: 8px 12px; font-size: 13px;
}
.obar-label { color: var(--pdp-txt-2); }
.obtn {
  border: 1px solid var(--pdp-line); background: none; color: var(--pdp-txt-2);
  border-radius: var(--pdp-r); padding: 5px 12px; font: inherit; cursor: pointer; white-space: nowrap;
}
.obtn:hover { border-color: var(--pdp-line-2); color: var(--pdp-txt); }
.obtn.is-on { background: var(--pdp-surface); border-color: var(--pdp-line-2); color: var(--pdp-txt); }

.otable {
  background: var(--pdp-surface); border: 1px solid var(--pdp-line); border-top: 0;
  border-radius: 0 0 var(--pdp-r-lg) var(--pdp-r-lg); overflow: hidden;
}
.ocols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 130px; gap: 12px 28px; align-items: center; }
.otable-head { padding: 8px 16px; border-bottom: 1px solid var(--pdp-line); font-size: 12px; color: var(--pdp-txt-2); }
.ta-r { text-align: right; }

/* ținta ancorelor din selectorul de mărime — lasă loc pentru header (109px) +
   banda cu titlul (65px), altfel grupul aterizează sub ele */
.ogrp { scroll-margin-top: 190px; }
.view-product .ogrp-h { margin: 0; font-size: 15px; font-weight: 400; }
.ogrp-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 16px; border: 0; border-bottom: 1px solid var(--pdp-line);
  background: none; font: inherit; color: var(--pdp-txt);
}
.ogrp.is-open .ogrp-btn { background: var(--pdp-subtle); }
.ogrp-chev { color: var(--pdp-txt-2); }
.ogrp-chev::before { content: '▸'; }
.ogrp.is-open .ogrp-chev::before { content: '▾'; }
.ogrp-from { font-size: 13px; color: var(--pdp-muted); }
.ogrp.is-open .ogrp-from, .ogrp:not(.is-open) .ogrp-body { display: none; }
.otable > .ogrp:last-child:not(.is-open) .ogrp-btn,
.otable > .ogrp:last-child > .ogrp-body > :last-child { border-bottom: 0; }

.orow { padding: 10px 16px; border-bottom: 1px solid var(--pdp-line); font-size: 15px; }
.orow--best { background: var(--pdp-ok-bg); }
.orow--extra { display: none; }
.ogrp.is-all .orow--extra { display: grid; }
.omerchant { display: flex; align-items: center; gap: 8px; min-width: 0; }
.view-product .retailer-mark { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; background: var(--pdp-txt-2); }
.orow--best .retailer-mark { background: var(--pdp-txt); }
.omerchant-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-product .stock { font-size: 12px; color: var(--pdp-txt-2); flex: none; }
.view-product .stock--out { color: var(--pdp-warn); }
/* Vechimea prețului, codificată semantic: sub 2 zile e fundal, peste o săptămână
   e avertisment — culoarea dublează textul, nu îl înlocuiește. */
.ofresh { font-size: 13px; color: var(--pdp-muted); }
.ofresh--mid { color: var(--pdp-txt-2); }
.ofresh--old { color: var(--pdp-warn); }
.oprice { text-align: right; white-space: nowrap; }
.orow--best .oprice { font-weight: 500; }
.obuy {
  display: block; text-align: center; white-space: nowrap;
  background: var(--pdp-accent); color: var(--pdp-surface);
  font-weight: 500; font-size: 13px; padding: 8px 0; border-radius: var(--pdp-r);
}
.obuy:hover { background: var(--pdp-accent-h); color: var(--pdp-surface); }
.obuy--out { background: none; color: var(--pdp-txt-2); border: 1px solid var(--pdp-line); padding: 7px 0; }
.obuy--out:hover { background: var(--pdp-subtle); color: var(--pdp-txt); }
.omore {
  display: block; width: 100%; padding: 10px 16px; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--pdp-line); background: none;
  font: inherit; font-size: 13px; color: var(--pdp-txt-2);
}
.omore:hover { background: var(--pdp-subtle); }
.oempty { padding: 12px 16px; font-size: 13px; color: var(--pdp-txt-2); border-bottom: 1px solid var(--pdp-line); }

/* ── Despre produs + rezumat + istoric ────────────────────────────────────── */
.pdesc p { font-size: 15px; line-height: 1.5; color: var(--pdp-txt); margin: 0 0 10px; max-width: 70ch; }
.pdesc p:last-child { margin-bottom: 0; }
.pingredients { font-size: 15px; line-height: 1.5; color: var(--pdp-txt-2); margin-bottom: 8px; max-width: 70ch; }
.pingredients b { font-weight: 500; color: var(--pdp-txt); }
.pabout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; padding-top: 36px; align-items: start; }
.psum, .histblock {
  background: var(--pdp-surface); border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-r-lg); padding: 16px 18px;
}
.psum-title { font-weight: 500; font-size: 17px; margin-bottom: 10px; }
.psum-rows { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.psum-row { display: flex; justify-content: space-between; gap: 12px; }
.psum-row .k { color: var(--pdp-txt-2); flex: none; }
.psum-row .v { text-align: right; }
.histblock-txt { font-size: 13px; color: var(--pdp-txt-2); margin-top: 8px; }
.spark { width: 100%; height: 48px; display: block; }
.spark-area { fill: color-mix(in srgb, var(--pdp-ok) 14%, transparent); stroke: none; }
.spark-line { fill: none; stroke: var(--pdp-ok); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark-dot { fill: var(--pdp-ok); }

/* Cardurile din „Produse similare" împrumută suprafețele PDP-ului, ca secțiunea
   să nu pară lipită din altă pagină. */
.view-product .pcard { background: var(--pdp-surface); border-color: var(--pdp-line); border-radius: var(--pdp-r-lg); box-shadow: none; color: var(--pdp-txt); }
.view-product .pcard:hover { box-shadow: var(--sh-sm); color: var(--pdp-txt); }
.view-product .pcard-media { background: var(--pdp-subtle); height: 180px; }
.view-product .pcard-brand { font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--pdp-txt-2); margin-bottom: 4px; }
.view-product .pcard-name { font-weight: 500; letter-spacing: 0; font-size: 17px; margin-bottom: 10px; }
.view-product .pcard-foot { border-top-color: var(--pdp-line); }
.view-product .pcard-merchant, .view-product .pcard-foot .n { font-size: 13px; color: var(--pdp-txt-2); }
.view-product .price { font-weight: 500; letter-spacing: 0; color: var(--pdp-txt); }
.view-product .price-num { font-size: 22px; }
.view-product .price-cur { font-size: 15px; }
.view-product .chip--vol { background: var(--pdp-subtle); color: var(--pdp-txt-2); font-size: 12px; }

/* ── Filtre faceted ───────────────────────────────────────────────────────── */
/* Un <details> per facet, cu panoul flotant peste listă. Fără JS e un formular
   GET obișnuit cu buton; search.js îl trece pe auto-submit și ascunde butonul. */
.filters { margin-bottom: 20px; }
.filters.is-live .filters-go { display: none; }
.filters-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.facet-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }

/* `filters-toggle` grupează toate pilulele de facet sub un singur declanșator
   „Filtrează" pe mobil (regula din media query, ca la eMAG). Randat `open` din
   PHP — un <details> fără `open` are înălțime 0 în layout indiferent ce CSS
   forțează pe conținut, deci desktopul (care vrea pilulele mereu vizibile) NU
   poate „forța vizibil peste închis" prin CSS, trebuie să pornească genuin
   deschis. Aici doar ascundem summary-ul — conținutul e deja acolo. */
details.filters-toggle > summary { display: none; }

.facet { position: relative; }
.facet > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; -webkit-user-select: none; user-select: none;
  border: 1px solid var(--n-300); background: var(--n-100);
  border-radius: var(--r-pill); padding: 8px 18px;
  font-family: var(--font-h); font-weight: 600; font-size: 17px; color: var(--n-900);
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after { content: '▾'; font-size: 13px; color: var(--n-600); }
.facet > summary:hover, .facet[open] > summary { border-color: var(--accent); }
.facet-n {
  background: var(--a-700); color: var(--n-100); border-radius: var(--r-pill);
  font: 500 12px var(--font-h); padding: 2px 7px;
}
.facet-body {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  min-width: 270px; max-height: 340px; overflow-y: auto;
  margin: 0; padding: 8px; border: 1px solid var(--n-300); border-radius: var(--r-md);
  background: var(--n-100); box-shadow: var(--sh-lg);
}
.fopt {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 7px 10px; border-radius: var(--r-sm); font-size: 17px;
}
.fopt:hover { background: var(--a-100); }
.fopt input { flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.fopt-t { flex: 1; min-width: 0; }
.fopt-n { font-size: 15px; color: var(--n-600); }
.filters-go { padding: 9px 24px; }

.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 24px; }
.fchip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 16px;
  background: var(--a-100); border: 1px solid var(--a-300); color: var(--a-900);
  border-radius: var(--r-pill); padding: 5px 15px;
}
.fchip:hover { background: var(--a-200); color: var(--a-900); }
.fchip-clear { font-size: 16px; color: var(--n-700); text-decoration: underline; }

/* ── Note, gol, paginare ──────────────────────────────────────────────────── */
.searchnote { border-radius: var(--r-md); padding: 16px 20px; font-size: 17px; margin-bottom: 22px; }
.searchnote-warn { background: var(--a-100); border: 1px solid var(--a-300); color: var(--a-900); }
.searchnote-info { background: var(--g-100); border: 1px solid var(--g-300); color: var(--g-900); }
.searchnote a { color: var(--a-800); text-decoration: underline; }
.empty {
  background: var(--n-100); border: 1px solid var(--n-300); border-radius: var(--r-lg);
  padding: 40px; font-size: 19px; color: var(--n-700); text-align: center;
}
.metarow { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; font-size: 17px; color: var(--n-700); flex-wrap: wrap; }
.metarow b { color: var(--n-900); }
.metarow .r { margin-left: auto; }
.subcats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.pagination a, .pagination span {
  font-size: 17px; background: var(--bg); border: 1px solid var(--n-300);
  color: var(--n-900); border-radius: var(--r-pill); padding: 0 22px;
  height: 44px; display: flex; align-items: center;
}
.pagination a:hover { border-color: var(--accent); color: var(--n-900); }

.brandgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.brandgrid a {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--n-100); border: 1px solid var(--n-300); border-radius: var(--r-md);
  padding: 14px 18px; font-size: 18px; font-weight: 600; color: var(--n-900);
}
.brandgrid a:hover { border-color: var(--accent); color: var(--n-900); }
.brandgrid .n { margin-left: auto; font-size: 15px; font-weight: 400; color: var(--n-600); }

/* ── Subsol ───────────────────────────────────────────────────────────────── */
.site-footer { margin-top: 56px; background: var(--n-900); color: var(--n-200); padding: 46px var(--pad) 34px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 64px; flex-wrap: wrap; }
.footer-brand { max-width: 320px; }
.footer-brand img { height: 34px; width: auto; display: block; margin-bottom: 12px; }
.footer-brand p { font-size: 17px; line-height: 1.6; color: var(--n-300); margin: 0; }
.footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 17px; }
.footer-col h3 { font: 500 12px var(--font-h); letter-spacing: .1em; text-transform: uppercase; color: var(--n-400); margin-bottom: 5px; }
.footer-col a { color: var(--n-200); }
.footer-col a:hover { color: var(--a-300); }
.footer-note { margin-left: auto; max-width: 280px; font-size: 17px; line-height: 1.55; color: var(--n-300); }
.footer-note h3 { font: 500 12px var(--font-h); letter-spacing: .1em; text-transform: uppercase; color: var(--n-400); margin-bottom: 14px; }
.footer-bottom {
  max-width: var(--maxw); margin: 38px auto 0; padding-top: 20px;
  border-top: 1px solid var(--n-800); font-size: 15px; color: var(--n-400);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.footer-bottom .beta-pill { color: var(--n-400); border-color: var(--n-700); }

/* ════════════════════════════════════════════════════════════════════════════
   Responsive. Macheta e desenată la 1280 și la 390. Pe produs, tabelul își ține
   grila de 4 coloane până la 620px, unde fiecare ofertă se pliază pe două
   rânduri cu CTA lat (macheta 3b) — același DOM, doar altă așezare.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .pgrid, .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .pabout { grid-template-columns: minmax(0, 1fr) 300px; }
  .search--nav { width: 300px; }
  .hero h1 { font-size: 52px; }
}

@media (max-width: 980px) {
  :root { --pad: 24px; }
  .nav-links, .header-link { display: none; }
  .header-inner { gap: 16px; padding: 14px var(--pad); flex-wrap: wrap; }
  .brand-lockup img { height: 38px; }
  /* Fără hero de căutare în pagină (produs, brand) → bara din antet rămâne
     vizibilă, pe rând propriu, ca omul să nu se întoarcă la homepage ca să
     caute altceva. Antetul e deja `position: sticky`, deci rămâne fixă sus. */
  .search--nav { width: 100%; flex: 1 0 100%; margin: 0; }

  .hero { padding: 44px var(--pad) 40px; }
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 19px; }
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  .hero--sub h1 { font-size: 30px; }

  .band-inner { grid-template-columns: 1fr; }
  .band-cell { padding: 20px 24px; }
  .pgrid, .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .how { padding: 32px 26px; }
  .how-steps { grid-template-columns: 1fr; gap: 22px; }

  /* Imaginea nu mai ține o coloană proprie: se centrează la 240px, iar restul
     paginii se stivuiește în ordinea de citire din machetă. */
  .phead { grid-template-columns: 1fr; gap: 22px; }
  .pgallery { max-width: 240px; margin-inline: auto; }
  .pgallery-main { height: 240px; }
  .pgallery-init { font-size: 72px; }
  .pbar-inner { height: 52px; gap: 11px; }
  .pbar-media { width: 38px; height: 38px; }
  .pbar-title { font-size: 17px; }
  .ogrp { scroll-margin-top: 219px; }  /* header 151px (2 rânduri, cu căutarea) + bandă 52px */
  .pabout { grid-template-columns: 1fr; gap: 20px; }
  .footer-inner { gap: 32px; }
  .footer-note { margin-left: 0; }

  /* Rândul de rezultat: media stânga, prețul trece pe rândul de dedesubt. */
  .rrow { grid-template-columns: 96px 1fr; gap: 16px; }
  .rrow-media { height: 96px; }
  .rrow-name { font-size: 21px; }
  .rrow-right { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .rrow-right .flabel { margin-bottom: 0; }
  .rrow-unit { margin: 0; }
  .rrow-right .btn { margin-left: auto; }

  .obar { font-size: 12px; padding: 8px 10px; }

  /* Panoul flotant n-are unde să plutească pe un ecran îngust: fiecare facet
     devine un acordeon full width, în fluxul paginii. */
  .facet, .facet > summary, .filters-go { width: 100%; }
  .facet > summary { border-radius: var(--r-md); }
  .facet > summary::after { margin-left: auto; }
  .facet-body {
    position: static; min-width: 0; max-height: none;
    margin-top: 6px; box-shadow: none; background: var(--bg);
  }

  /* Ca la eMAG: „Filtrează" și „Ordonează" stau compacte, unul lângă altul —
     doar CE E ÎN INTERIORUL panoului „Filtrează" se stivuiește full width
     (regulile de mai sus, neschimbate pentru pilulele individuale de-acolo).
     search.js scoate `open`-ul randat de PHP la încărcare pe ecran îngust —
     de-acolo încolo e <details> nativ netrucat, doar summary-ul revine vizibil. */
  .filters-toolbar { flex-wrap: nowrap; }
  .filters-toolbar > .filters-toggle,
  .filters-toolbar > .facet--sort { flex: 1 1 0; min-width: 0; width: auto; }
  .filters-toolbar > .filters-toggle > summary,
  .filters-toolbar > .facet--sort > summary { justify-content: center; }
  details.filters-toggle > summary { display: flex; }
}

@media (max-width: 620px) {
  :root { --pad: 18px; }
  body { font-size: 16px; }
  .hero { padding: 34px var(--pad) 32px; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 17px; }
  .search--hero .search-box { padding: 7px 7px 7px 18px; }
  .search--hero .search-input { font-size: 17px; }
  .search--hero .search-submit { font-size: 16px; padding: 12px 18px; }
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  .pbar-inner { height: 48px; }
  .pbar-media { width: 34px; height: 34px; }
  .pbar-brand { display: none; }
  .pbar-title { font-size: 17px; }

  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pcard-media { height: 150px; }
  .pcard-body { padding: 12px 12px 14px; }
  .pcard-name { font-size: 17px; }
  .pcard-vols { gap: 5px; margin-bottom: 10px; }
  .pcard-merchant, .pcard-foot .n { font-size: 15px; }
  .price-num { font-size: 26px; }  .price-cur { font-size: 16px; }
  .price--lg .price-num { font-size: 40px; }  .price--lg .price-cur { font-size: 21px; }
  .cat-grid { gap: 12px; }
  .cat-art { height: 92px; }
  .cat-title { font-size: 19px; }
  .cat-subs { display: none; }
  .pill { padding: 10px 18px; font-size: 18px; }

  .rrow { grid-template-columns: 1fr; }
  .rrow-media { height: 180px; }
  .rrow-right .btn { width: 100%; margin-left: 0; }

  /* Macheta 3b (mobil 390): imaginea intră până la marginile ecranului,
     selectorul de mărime devine bandă cu scroll orizontal — pe două rânduri de
     chip-uri ofertele ar cădea complet sub linia de plutire — iar fiecare ofertă
     se pliază pe două rânduri, cu CTA pe toată lățimea. */
  .ptitle { font-size: 20px; }
  .phead { padding-top: 4px; gap: 16px; }
  .pgallery { max-width: none; margin-inline: calc(var(--pad) * -1); }
  .pgallery-main { height: 260px; border-radius: 0; }
  .pgallery-init { font-size: 80px; }
  .vpick-row {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  }
  .vpick-item { flex: none; min-width: 118px; scroll-snap-align: start; }

  .otable-head { display: none; }
  .ogrp-btn, .omore, .orow, .oempty { padding-inline: 14px; }
  .orow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .omerchant { grid-column: 1; grid-row: 1; }
  .oprice { grid-column: 2; grid-row: 1; }
  .ofresh { grid-column: 1 / -1; grid-row: 2; padding-left: 30px; font-size: 12px; }
  .obuy { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; padding: 10px 0; font-size: 14px; }
  .obuy--out { padding: 9px 0; }
  .how { padding: 26px 20px; }
  .story p { font-size: 17px; margin-bottom: 18px; }
  .cta-row .btn { flex: 1 0 100%; text-align: center; }
  .site-footer { padding: 32px var(--pad) 24px; }
  .footer-inner { flex-direction: column; gap: 24px; }
  .empty { padding: 26px 18px; font-size: 17px; }
}