/* =========================================================
   FORIT theme — paleta albastru/portocaliu (zenteko.com)
   Distinctă de default (mov/magenta). Modifică DOAR :root vars.
   ========================================================= */

/* ==== CRITICAL START ==== */

:root {
  /* Base neutrals */
  --bg: #F6F8FB;
  --bg-elev: #FFFFFF;
  --surface: #EEF3F9;
  --ink: #0F1E33;
  --ink-2: #2A3B55;
  --muted: #6B7688;
  --muted-2: #9AA3B2;
  --border: #DCE3ED;
  --border-strong: #C4CEDC;
  --hairline: #E9EEF5;

  /* Brand colors — ForIT albastru + portocaliu */
  --brand-blue: #1C4E8C;
  --brand-blue-dark: #123966;
  --brand-blue-light: #2D6BB8;
  --brand-orange: #F07A1A;
  --brand-orange-dark: #D5610A;

  /* Accent used across components = portocaliu (call-to-action) */
  --accent: #F07A1A;
  --accent-ink: #D5610A;
  --accent-soft: #FDEDDC;
  --accent-contrast: #FFFFFF;

  /* Semantics */
  --success: oklch(62% 0.14 150);
  --danger:  oklch(60% 0.20 25);
  --info:    oklch(60% 0.14 240);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Spacing base */
  --pad: 24px;

  /* Type */
  --f-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-serif: "Fraunces", "Instrument Serif", ui-serif, Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(14,17,22,0.04);
  --shadow-2: 0 6px 20px -8px rgba(14,17,22,0.12), 0 1px 2px rgba(14,17,22,0.04);
  --shadow-3: 0 18px 40px -18px rgba(14,17,22,0.22);

  /* Primary button — forit uses accent (orange) */
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-ink);

}

/* Accent variations (data-accent on <html>) */
html[data-accent="orange"]  { --accent: #F07A1A; --accent-ink: #D5610A; --accent-soft: #FDEDDC; --accent-contrast: #fff; }
html[data-accent="blue"]    { --accent: #1C4E8C; --accent-ink: #123966; --accent-soft: #DEE8F5; --accent-contrast: #fff; }
html[data-accent="red"]     { --accent: oklch(60% 0.22 25);  --accent-ink: oklch(35% 0.14 25);  --accent-soft: oklch(96% 0.03 25);  --accent-contrast: #fff; }
html[data-accent="green"]   { --accent: oklch(62% 0.14 150); --accent-ink: oklch(35% 0.10 150); --accent-soft: oklch(96% 0.03 150); --accent-contrast: #fff; }
html[data-accent="purple"]  { --accent: oklch(60% 0.19 300); --accent-ink: oklch(35% 0.13 300); --accent-soft: oklch(96% 0.03 300); --accent-contrast: #fff; }
html[data-accent="ink"]     { --accent: #0F1E33;             --accent-ink: #0F1E33;            --accent-soft: #E3E9F1;            --accent-contrast: #fff; }

/* Dark mode */
html[data-dark="true"] {
  --bg: #0C0D10;
  --bg-elev: #15171C;
  --surface: #1B1D23;
  --ink: #F2F2F2;
  --ink-2: #D7D9DE;
  --muted: #9AA0AB;
  --muted-2: #6B6E77;
  --border: oklch(28% 0.004 80);
  --border-strong: oklch(38% 0.006 80);
  --hairline: oklch(22% 0.003 80);
  --accent-soft: oklch(25% 0.04 48);
  --shadow-2: 0 10px 30px -10px rgba(0,0,0,0.6);
  --shadow-3: 0 20px 50px -20px rgba(0,0,0,0.7);
}
html[data-dark="true"][data-accent="orange"] { --accent-soft: oklch(25% 0.04 48); }
html[data-dark="true"][data-accent="blue"]   { --accent-soft: oklch(25% 0.04 255); }
html[data-dark="true"][data-accent="red"]    { --accent-soft: oklch(25% 0.04 25); }
html[data-dark="true"][data-accent="green"]  { --accent-soft: oklch(25% 0.04 150); }
html[data-dark="true"][data-accent="purple"] { --accent-soft: oklch(25% 0.04 300); }
html[data-dark="true"][data-accent="ink"]    { --accent: #F2F2F2; --accent-ink: #F2F2F2; --accent-soft: #1E2025; --accent-contrast: #0E1116; }

/* Density */
html[data-density="compact"] { --pad: 16px; }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { min-height: 100%; }
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display:block; }

.container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.01em; }
.mono  { font-family: var(--f-mono); }

/* ---------- Top strip ---------- */
.topstrip {
  background: var(--ink);
  color: #E5E5E5;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.topstrip .inner {
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px var(--pad); gap: 24px;
}
.topstrip .left { display:flex; gap: 22px; flex-wrap: wrap; }
.topstrip .right { display:flex; gap: 18px; align-items:center; color:#fff; }
.topstrip a:hover { color: #fff; }
.topstrip .dot { width:4px; height:4px; background:var(--accent); border-radius:50%; display:inline-block; vertical-align: middle; margin-right: 6px; }

/* ---------- Header ---------- */
.header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(1.4) blur(8px);
}
/* Blue brand header (ForIT-style) */
html[data-header="blue"] .header {
  background: var(--brand-blue);
  border-bottom-color: var(--brand-blue-dark);
  color: #fff;
}
html[data-header="blue"] .header .navrow {
  background: var(--brand-blue-dark);
  border-top-color: rgba(255,255,255,0.08);
  margin: 0 calc(-1 * var(--pad));
  padding: 10px var(--pad);
}
html[data-header="blue"] .header .navrow a.nav-item { color: #E8EEF6; }
html[data-header="blue"] .header .navrow a.nav-item:hover { color: #fff; border-bottom-color: var(--brand-orange); }
html[data-header="blue"] .header .navrow a.nav-item.hot,
html[data-header="blue"] .header .navrow a.nav-item.hot-orange { color: #E8EEF6; }
html[data-header="blue"] .header .navrow .cats-btn {
  background: var(--brand-orange); color: #fff;
}
html[data-header="blue"] .header .navrow .cats-btn:hover { background: var(--brand-orange-dark); }
html[data-header="blue"] .header .tool-btn { color: #fff; }
html[data-header="blue"] .header .tool-btn:hover { background: rgba(255,255,255,0.08); }
html[data-header="blue"] .header .tool-btn .mini small { color: rgba(255,255,255,0.7); }
html[data-header="blue"] .header .navrow .mobile-info-btn { color: var(--ink); }
html[data-header="blue"] .header .navrow .mobile-info-btn:hover { background: var(--hairline); }
html[data-header="blue"] .search { background: #fff; border-color: transparent; }
html[data-header="blue"] .search .go { background: var(--brand-orange); color: #fff; }
html[data-header="blue"] .search .go:hover { background: var(--brand-orange-dark); }
html[data-header="blue"] .topstrip { background: var(--brand-blue-dark); }
html[data-header="blue"] .logo .logo-text .brand .for { color: #fff; }
html[data-header="blue"] .logo .logo-text .tagline { color: rgba(255,255,255,0.75); }
.header .row1 {
  display:grid; grid-template-columns: auto 1fr auto; align-items:center;
  gap: 28px; padding: 18px 0;
}
.header-tools { display:flex; align-items:center; gap: 6px; margin-left: auto; }
.logo {
  display:flex; align-items:center; gap:12px;
  letter-spacing: -0.01em;
}
.logo .mark {
  width:44px; height:54px; border-radius: 6px;
  background: var(--brand-orange);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position: relative;
  box-shadow: inset 0 0 0 2px var(--brand-orange-dark);
  flex-shrink: 0;
}
.logo .mark-img {
  height: 60px;
  width: auto;          /* păstrează aspect natural 4:5 al SVG-ului (400:500) */
  flex-shrink: 0;
  display: block;
}
@media (max-width: 640px) {
  .logo .mark-img { height: 44px; }
}
.logo .mark .device {
  width: 22px; height: 34px; border-radius: 3px;
  background: #fff;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top: 4px;
  position: relative;
}
.logo .mark .device::before {
  content:""; width: 4px; height: 10px;
  background: var(--brand-orange);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.logo .mark .device::after {
  content:""; position:absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-orange);
}
.logo-text { display:flex; flex-direction:column; line-height: 1; gap: 2px; }
.logo-text .brand {
  font-family: var(--f-serif); font-weight: 400; font-style: italic;
  font-size: 36px; letter-spacing: -0.02em; line-height: 0.95;
}
.logo-text .brand .for { color: var(--brand-blue); }
.logo-text .brand .it  { color: var(--brand-orange); }
.logo-text .tagline {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--brand-blue); text-transform: uppercase;
  margin-top: 4px;
}

/* Offcanvas — summary fully clickable for toggle (labels sunt acum <span>, nu <a>) */
.offcanvas .oc-item-branch { cursor: pointer; }
.offcanvas .oc-item-branch .oc-lbl { cursor: pointer; user-select: none; }

/* "Vezi toate în {Categorie}" — link primar, apare primul sub fiecare grup expandat */
.offcanvas .oc-see-all {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px 10px 48px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--hairline);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.offcanvas .oc-see-all:hover { background: var(--accent); color: #fff; }
.offcanvas .oc-see-all .icon { margin-left: auto; }

/* Account drawer (offcanvas dreapta, stil minicart) */
.account-backdrop {
  position: fixed; inset: 0;
  background: rgba(14,30,51,0.5);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
  z-index: 89;
}
.account-backdrop.open { opacity: 1; visibility: visible; }
.account-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 90vw;
  background: #fff; color: var(--ink);
  z-index: 90;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
  box-shadow: -20px 0 40px rgba(0,0,0,0.15);
}
.account-drawer.open { transform: translateX(0); }

.account-drawer .account-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.account-drawer .account-head h3 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
}
.account-drawer .x-btn {
  background: var(--surface);
  border: none;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink);
}
.account-drawer .x-btn:hover { background: var(--accent-soft); color: var(--accent-ink); }

.account-drawer .account-greet {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
}
.account-drawer .account-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.account-drawer .account-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.account-drawer .account-avatar.no-img { /* fallback after img error */ }
.account-drawer .account-greet-text small { display: block; color: var(--muted); font-size: 12px; }
.account-drawer .account-greet-text strong { display: block; font-size: 16px; color: var(--ink); }

.account-drawer .account-intro {
  padding: 18px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.account-drawer .account-intro p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

.account-drawer .account-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.account-drawer .acc-link {
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  font-size: 14px;
  color: var(--ink);
  transition: background .12s, color .12s;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}
.account-drawer .acc-link:last-child { border-bottom: none; }
.account-drawer .acc-link:hover { background: var(--surface); color: var(--accent-ink); }
.account-drawer .acc-link:hover .acc-icon { color: var(--accent-ink); }
.account-drawer .acc-link .acc-icon {
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.account-drawer .acc-link .acc-icon .icon svg { stroke-width: 1.8; }
.account-drawer .acc-link .acc-label { font-weight: 500; text-align: left; }
.account-drawer .acc-link .acc-chev { color: var(--muted-2); display: inline-flex; }
.account-drawer .acc-link.primary {
  display: flex;
  background: var(--accent); color: #fff;
  margin: 10px 14px;
  border-radius: var(--r-md);
  padding: 14px 18px;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  border-bottom: none;
}
.account-drawer .acc-link.primary .acc-icon { color: #fff; }
.account-drawer .acc-link.primary:hover { background: var(--accent-ink); color: #fff; }
.account-drawer .acc-link.primary.ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--border); margin-top: 0; }
.account-drawer .acc-link.primary.ghost:hover { background: #f8f9fb; color: var(--ink); border-color: var(--ink); }
.account-drawer .acc-link.primary.ghost .acc-icon { color: var(--ink); }

/* Logo on dark background (footer, hero) */
.logo.on-dark .logo-text .brand .for { color: #fff; }
.logo.on-dark .logo-text .tagline { color: rgba(255,255,255,0.7); }

.search {
  display:flex; align-items:center;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
  position: relative;
}
.search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.search .cat {
  font-size: 12px; color: var(--muted); padding-right: 14px;
  border-right: 1px solid var(--border); margin-right: 14px;
  display:flex; align-items:center; gap: 6px; cursor: pointer;
  user-select: none; white-space: nowrap;
}
.search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--ink); padding: 10px 0;
}
.search input::placeholder { color: var(--muted-2); }
.search .go {
  background: var(--ink); color: var(--bg); border: none;
  border-radius: 999px; padding: 10px 18px; font-weight: 600; cursor: pointer;
  display:flex; align-items:center; gap:8px; font-size: 13px;
}
.search .go:hover { background: var(--accent-ink); }

.header-tools { display:flex; align-items:center; gap: 6px; }
.tool-btn {
  background: transparent; border: none; color: var(--ink);
  padding: 10px 12px; border-radius: var(--r-md);
  display:flex; align-items:center; gap:10px; cursor: pointer;
  font-size: 13px; font-weight: 500;
  position: relative;
}
.tool-btn:hover { background: var(--surface); }
.tool-btn .mini { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; max-width: 140px; overflow: hidden; }
.tool-btn .mini small { font-size: 11px; color: var(--muted); font-weight:400; }
.tool-btn .mini span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-search-btn { display: none; }
.compare-tool-btn { display: inline-flex; }
@media (max-width: 900px) { .compare-tool-btn .mini { display: none; } }
.tool-btn .badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--accent); color: var(--accent-contrast);
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px;
  display:grid; place-items:center; padding: 0 5px;
}

.navrow {
  border-top: 1px solid var(--hairline);
  padding: 10px 0; display:flex; align-items:center; gap: 24px;
  overflow-x: auto; scrollbar-width: none;
}
.navrow::-webkit-scrollbar { display:none; }
.navrow .cats-btn {
  background: var(--ink); color: var(--bg);
  border: none; border-radius: var(--r-md);
  padding: 10px 16px; font-weight: 600; font-size: 13px;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  white-space: nowrap;
}
.navrow .cats-btn:hover { background: var(--accent-ink); }
.navrow a.nav-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
  padding: 6px 2px; border-bottom: 2px solid transparent;
  font-weight: 500;
}
.navrow a.nav-item:hover { border-bottom-color: var(--accent); color: var(--ink); }
.navrow a.nav-item.hot { color: var(--accent-ink); }
.navrow a.nav-item.hot::before { content:"●"; color: var(--accent); font-size: 8px; flex-shrink: 0; line-height: 1; }
.navrow a.nav-item.hot-orange { color: var(--brand-orange); }
.navrow a.nav-item.hot-orange::before { content:"●"; color: var(--brand-orange); font-size: 8px; flex-shrink: 0; line-height: 1; }
.nav-item-icon { display:inline-flex; align-items:center; width:14px; height:14px; flex-shrink:0; }
.nav-item-icon svg { width:100%; height:100%; }
.navrow a.nav-item:has(.nav-item-icon)::before { content: none; }
html[data-header="blue"] .header .navrow a.nav-item.hot::before { color: var(--accent); }
html[data-header="blue"] .header .navrow a.nav-item.hot-orange::before { color: var(--accent); }
.nav-spacer { flex: 1; }
.navrow .nav-items-end { flex: 0 0 auto; }
.mobile-info-btn { display: none; }
.navrow .mobile-info-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 14px; font-weight: 600; font-size: 13px; gap: 8px; white-space: nowrap; color: var(--ink); }
.navrow .mobile-info-btn:hover { background: var(--hairline); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap: 8px; justify-content: center;
  border: 1px solid transparent;
  padding: 12px 20px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-contrast); }
.btn.primary:hover { background: var(--accent-ink); color: #fff; }
.btn.ink { background: var(--ink); color: var(--bg); }
.btn.ink:hover { background: var(--accent-ink); color:#fff; }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost.light { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn.ghost.light:hover { background: rgba(255,255,255,0.1); }
.btn.outline { background: var(--bg-elev); color: var(--ink); border-color: var(--border-strong); }
.btn.outline:hover { border-color: var(--ink); }
.btn.lg { padding: 14px 22px; font-size: 14px; }

/* Above-the-fold: listing page header + layout */
h1,h2,h3,h4,h5,h6 { margin:0; font-weight:700; line-height:1.2; }
.crumbs { display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; padding:18px 0; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs .sep { color:var(--muted-2); }
.listing-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:8px 0 24px; flex-wrap:wrap; }
.listing-header h1 { font-family:var(--f-serif); font-size:56px; font-weight:400; margin:0; letter-spacing:-0.02em; line-height:1; }
.listing-header .desc { max-width:540px; font-size:14px; color:var(--muted); margin-top:8px; }
.listing-header .stat { font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; }
.listing-layout { display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:flex-start; }
@media (max-width:1200px) { .listing-layout { grid-template-columns:1fr !important; gap:16px; } }

/* Drawer/offcanvas hide — trebuie în critical ca să nu flickereze la load */
.cart-drawer { transform: translateX(100%); }
.account-drawer { transform: translateX(100%); }
.info-drawer { transform: translateX(100%); }
.offcanvas { transform: translateX(-100%); }
@media (max-width: 1200px) { .filters.filters-legacy { transform: translateX(-100%); } }
@media (max-width: 900px) {
  .topstrip { display: none; }
  .search { display: none; }
  .tool-btn .mini { display: none; }
  .mobile-search-btn { display: inline-flex !important; }
  .listing-header h1 { font-size: 36px; }
}
@media (max-width: 600px) {
  .listing-header h1 { font-size: 28px; }
  .listing-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==== CRITICAL END ==== */

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: #C7CAD1;
  padding: 60px 0 28px;
  margin-top: 60px;
}
.footer h5 {
  color: #fff; font-size: 13px; font-weight: 600;
  margin: 0 0 18px; letter-spacing: 0.02em;
}
.footer .cols {
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.footer .cols .col { display: flex; flex-direction: column; align-items: center; position: relative; }
.footer .cols .col + .col::before {
  content: "";
  position: absolute;
  left: -16px; top: 10%; bottom: 10%;
  width: 1px;
  background: rgba(255,255,255,0.08);
}
.footer h5 {
  color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 14px;
}
.footer a { display:block; color: #C7CAD1; padding: 6px 0; font-size: 13px; }
.footer a:hover { color: #fff; }

/* Footer widgets (col 1 = plăți, col 3 = ANPC, col 4 = social) */
.col-widget { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }

/* Plăți: SVG Mastercard + Visa + NETOPIA text badge — mari și lizibile pe footer dark */
.col-widget.pays {
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: #fff;
  padding: 12px 16px;
  border-radius: var(--r-md);
  margin-top: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.col-widget.pays .pay-svg {
  height: 34px; width: auto;
  /* SVG-urile sunt single-color — pe white bg lasăm culoarea originală (neagră) */
  color: #000;
}
.col-widget.pays .pay-logo.netopia {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: var(--f-mono);
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
  color: #1A4A8C; line-height: 1;
  padding: 6px 10px;
  border: 2px solid #1A4A8C;
  border-radius: 4px;
}
.col-widget.pays .pay-logo.netopia small {
  font-size: 8px; letter-spacing: 0.16em; margin-top: 3px; opacity: 0.85;
  font-weight: 700;
}
/* Oney (19.10): sigla verde pe fundalul alb, cu link la Termeni. Cu ea, cutia se strânge puţin ca
   să rămână pe UN rând şi în coloana îngustă de pe desktop (304px), nu doar pe telefon.
   Fără sigla Oney cutia rămâne exact cum era (:has). */
.footer .col-widget.pays .pay-oney { display: inline-flex; align-items: center; padding: 0; line-height: 0; }
.col-widget.pays .pay-oney .pay-svg.oney { height: 22px; width: auto; }
.col-widget.pays:has(.pay-oney) { gap: 8px; padding: 10px 12px; }
.col-widget.pays:has(.pay-oney) .pay-svg { height: 30px; }
.col-widget.pays:has(.pay-oney) .pay-logo.netopia { font-size: 11px; padding: 5px 7px; }

/* ANPC — imagini oficiale */
.col-widget.anpc { flex-direction: column; gap: 10px; width: 100%; max-width: 220px; }
.col-widget.anpc a { padding: 0; background: transparent; display: block; }
.col-widget.anpc img { width: 100%; height: auto; max-width: 200px; border-radius: 4px; display: block; margin: 0 auto; }

/* Social icons circle */
.col-widget.social { gap: 14px; margin-top: 20px; }
.col-widget.social a {
  display: inline-flex; width: 38px; height: 38px;
  align-items: center; justify-content: center;
  padding: 0;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  transition: background .15s;
}
.col-widget.social a:hover { background: var(--accent); }
.col-widget.social img { width: 20px; height: 20px; filter: invert(1) brightness(1.4); }
.footer .news {
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-lg);
  padding: 20px; margin-top: 16px;
  display:flex; gap: 6px;
}
.footer .news input {
  flex:1; background: transparent; border: 1px solid rgba(255,255,255,0.18);
  color: #fff; border-radius: var(--r-sm); padding: 10px 12px;
  font-family: inherit; font-size: 13px;
}
.footer .news input::placeholder { color: #6B6E77; }
.footer .news button {
  background: var(--accent); color: var(--accent-contrast);
  border: none; border-radius: var(--r-sm); padding: 10px 16px;
  font-weight: 600; cursor: pointer;
}
.footer .bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display:flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #6B6E77;
  flex-wrap: wrap; gap: 12px;
}

/* ---------- Cart drawer ---------- */
.cart-backdrop {
  position: fixed; inset: 0; background: rgba(14,17,22,0.4);
  backdrop-filter: blur(4px);
  z-index: 100; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.cart-backdrop.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 460px; max-width: 100vw; background: var(--bg);
  z-index: 101; transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction: column;
  box-shadow: var(--shadow-3);
}
.cart-drawer.open { transform: translateX(0); }
.cart-head { padding: 22px 24px; border-bottom: 1px solid var(--border); display:flex; align-items: center; justify-content: space-between; }
.cart-head h3 { font-family: var(--f-serif); font-size: 28px; font-weight: 400; margin: 0; letter-spacing: -0.01em; }
.cart-head .x-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: none; font-size: 18px; cursor: pointer; color: var(--ink); }
.cart-body { flex:1; overflow-y: auto; padding: 16px 24px; }
.cart-item {
  display:grid; grid-template-columns: 72px 1fr auto; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
}
.cart-item .img {
  width: 72px; height: 72px; border-radius: var(--r-md); background: #FFFFFF; overflow: hidden;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.cart-item .img img {
  width: 100%; height: 100%; object-fit: contain; padding: 4px;
}
.cart-item .img .ph {
  width:100%; height:100%;
  background: repeating-linear-gradient(135deg, rgba(14,17,22,0.06) 0 6px, rgba(14,17,22,0.02) 6px 12px);
}
.cart-item .title { font-size: 13px; font-weight: 500; line-height: 1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-item .opt { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--f-mono); letter-spacing: 0.04em; }
.cart-item .ctl-row { display:flex; align-items:center; justify-content: flex-start; gap: 12px; margin-top: 8px; }
.cart-item .qty-sm { display:flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.cart-item .qty-sm button { width: 26px; height: 26px; border: none; background: transparent; cursor: pointer; color: var(--ink); font-size: 14px; }
.cart-item .qty-sm input { width: 3ch; min-width: 3ch; max-width: 7ch; height: 26px; padding: 0; border: 0; background: transparent; font-size: 12px; font-weight: 600; text-align: center; color: inherit; font-family: inherit; -moz-appearance: textfield; cursor: text; }
.cart-item .qty-sm input::-webkit-outer-spin-button, .cart-item .qty-sm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item .qty-sm input:focus { outline: none; }
.cart-item .qty-sm:focus-within { border-color: var(--accent, #f97316); }
.cart-item .remove { background: none; border: none; color: var(--muted); font-size: 11px; cursor: pointer; padding: 0; text-decoration: underline; }
.cart-item .price-col { text-align: right; font-weight: 700; font-size: 14px; }
.cart-item .price-col .was { font-size: 11px; color: var(--muted); text-decoration: line-through; font-weight: 400; display:block; }

.cart-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.cart-empty .big { font-family: var(--f-serif); font-size: 32px; color: var(--ink); margin-bottom: 10px; }

.cart-foot { padding: 20px 24px; border-top: 1px solid var(--border); background: var(--bg-elev); }
.cart-foot .cart-row {
  display:flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; font-size: 13px; color: var(--muted);
  gap: 12px;
}
.cart-foot .cart-row > span:last-child { color: var(--ink); font-weight: 500; }
.cart-foot .cart-row.save > span:last-child { color: var(--accent-ink); font-weight: 600; }
.cart-foot .cart-row.total {
  color: var(--ink); font-size: 16px; font-weight: 700;
  padding: 12px 0; border-top: 1px solid var(--border);
  margin-top: 6px;
}
.cart-foot .cart-row.total > span:last-child {
  font-family: var(--f-sans); font-size: 20px; letter-spacing: -0.02em; color: var(--accent-ink);
}
.cart-foot .btn { width: 100%; margin-top: 10px; height: 50px; font-size: 14px; }
.cart-foot-tofav svg { color: var(--danger, #e53e3e); }

/* Cart alerts (stock removed, price changed) — folosit în cart page, drawer, checkout mini-cart */
.cart-alerts { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.cart-alerts--compact { gap: 8px; margin: 0 0 12px; }
.cart-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.cart-alerts--compact .cart-alert { padding: 10px 12px; font-size: 12px; border-radius: 8px; }
.cart-alert svg { flex-shrink: 0; margin-top: 1px; }
.cart-alert-text { flex: 1; min-width: 0; }
.cart-alert-text strong { display: block; font-weight: 600; margin-bottom: 4px; }
.cart-alert-text ul { margin: 0; padding-left: 18px; }
.cart-alert-text li { margin: 2px 0; word-break: break-word; }
.cart-alert--warn { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.cart-alert--warn svg { color: #dc2626; }
.cart-alert--info { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.cart-alert--info svg { color: #f97316; }

/* =========================================================
   Cart → Favorites — modal list-picker (native select + new-list input)
   Global (modalul se deschide din drawer pe orice pagină).
   ========================================================= */
.cf-label { display:block; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin:0 0 6px; }
.cf-input { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:10px; font:inherit; font-size:14px; color:var(--ink); background:#fff; box-sizing:border-box; }
.cf-input:focus { outline:none; border-color:var(--accent); }
.cf-listbox { width:100%; margin-top:8px; padding:4px; border:1px solid var(--border); border-radius:10px; font:inherit; font-size:14px; color:var(--ink); background:#fff; box-sizing:border-box; }
.cf-listbox:focus { outline:none; border-color:var(--accent); }
.cf-listbox option { padding:8px 10px; border-radius:6px; }
.cf-listbox option:checked { background:var(--accent-soft,#fff7ed); color:var(--ink); }
.cf-meta-row { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; }
.cf-count { font-size:12px; color:var(--muted); }
.cf-new-btn, .cf-back-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:12px; font-weight:600; background:transparent; color:var(--accent); border:1px solid var(--accent); border-radius:999px; cursor:pointer; font-family:inherit; }
.cf-new-btn:hover, .cf-back-btn:hover { background:var(--accent-soft,#fff7ed); }
.cf-back-btn { margin-top:10px; color:var(--muted); border-color:var(--border); }
.cf-back-btn:hover { color:var(--ink); background:var(--surface,#f7f7f7); border-color:var(--ink); }

/* ---------- Offcanvas mega-menu (Toate categoriile) ---------- */
.offcanvas-backdrop {
  position: fixed; inset: 0; background: rgba(14,17,22,0.45);
  z-index: 90; opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.offcanvas-backdrop.open { opacity: 1; pointer-events: auto; }
.offcanvas {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 340px; max-width: 92vw; background: #fff; color: var(--ink);
  z-index: 91; transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.35);
}
.offcanvas.open { transform: translateX(0); }
.offcanvas .oc-head {
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 20px; background: var(--brand-blue); color: #fff;
}
.offcanvas .oc-head h3 { margin:0; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.offcanvas .oc-head .x-btn {
  width:32px; height:32px; border:none; border-radius:6px;
  background: rgba(255,255,255,0.12); color:#fff; font-size:16px; cursor:pointer;
}
.offcanvas .oc-body { flex:1; overflow-y: auto; padding: 8px 0; }
.offcanvas .oc-item {
  display:flex; align-items:center; justify-content:space-between;
  padding: 13px 20px; font-size: 14px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; border-bottom: 1px solid var(--hairline);
}
.offcanvas .oc-item:hover { background: var(--surface); color: var(--brand-blue); }
.offcanvas .oc-item .chev { color: var(--muted-2); }
.offcanvas .oc-item .c { font-family: var(--f-mono); font-size: 10px; color: var(--muted); }
.offcanvas .oc-foot { padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .offcanvas { width: 86vw; } }
.tweaks-panel {
  position: fixed; right: 20px; bottom: 20px;
  width: 280px; z-index: 200;
  background: var(--bg-elev); color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--shadow-3);
  font-size: 13px;
}
.tweaks-panel.hidden { display: none; }
.tweaks-panel h4 { margin: 0 0 14px; font-size: 14px; font-weight: 700; display:flex; justify-content: space-between; align-items: center; }
.tweaks-panel h4 .tag { font-family: var(--f-mono); font-size: 10px; color: var(--muted); font-weight: 400; }
.tweaks-panel .row { margin-bottom: 14px; }
.tweaks-panel label { display:block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; font-weight: 600; }
.tweaks-panel .opts { display:flex; gap: 6px; flex-wrap: wrap; }
.tweaks-panel .opt {
  padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: 12px; cursor: pointer; background: var(--bg);
}
.tweaks-panel .opt.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tweaks-panel .sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.tweaks-panel .sw.on { border-color: var(--ink); transform: scale(1.1); }
.tweaks-panel .toggle { display:flex; align-items:center; justify-content: space-between; }
.tweaks-panel .toggle .sw-ui { width: 36px; height: 20px; background: var(--border-strong); border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; }
.tweaks-panel .toggle .sw-ui::after { content:""; position:absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.tweaks-panel .toggle .sw-ui.on { background: var(--ink); }
.tweaks-panel .toggle .sw-ui.on::after { transform: translateX(16px); }

/* ---------- Misc ---------- */
.icon { display:inline-flex; width: 18px; height: 18px; }
.icon svg { width:100%; height:100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Mobile (<= 900px) ---------- */
@media (max-width: 900px) {
  :root { --pad: 16px; }
  .topstrip { display: none; }
  .header .row1 { grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 0; }
  .logo-text .tagline { display: none; }
  .logo-text .brand { font-size: 24px; }
  .logo .mark { width: 36px; height: 44px; }
  .logo .mark .device { width: 18px; height: 28px; }
  .search { display: none; }
  .search.mobile-open {
    display: flex; position: fixed; top: 50%; left: 16px; right: 16px;
    transform: translateY(-50%);
    z-index: 1100; background: #fff; border-radius: 14px;
    padding: 10px; box-shadow: 0 8px 40px rgba(0,0,0,.3);
    align-items: center;
  }
  .search.mobile-open form { flex: 1; display: flex; gap: 0; }
  .search.mobile-open input { flex: 1; padding: 13px 14px; font-size: 15px; border: none; outline: none; min-width: 0; border-radius: 10px 0 0 10px; }
  .search.mobile-open .go { padding: 0 18px; border-radius: 0 10px 10px 0; font-size: 14px; }
  .search.mobile-open .cat { display: none; }
  .search-backdrop { display: none; position: fixed; inset: 0; z-index: 1099; background: rgba(0,0,0,.82); }
  .search-backdrop.visible { display: block; }
  .tool-btn .mini { display: none; }
  .tool-btn { padding: 8px 10px; }
  .header-tools { gap: 2px; }
  .mobile-search-btn { display: inline-flex !important; }

  .navrow { gap: 10px; padding: 8px 0; }
  html[data-header="blue"] .header .navrow { padding: 8px var(--pad); }
  .navrow a.nav-item { font-size: 12px; }
  .navrow .cats-btn { padding: 10px 14px; font-size: 12px; }
  .nav-info-items { display: none !important; }
  /* ...cu o exceptie: linkul evidentiat (Oferte). Ascunse fiind TOATE, campaniile n-aveau
     pe telefon nicio cale de acces din bara — nici macar in sertarul Info, care se ia din
     meniul "Mobile Info" si nu le contine. navrow are derulare orizontala, deci incape.
     Doar din primul grup: `nav-items-end` sunt linkuri de serviciu. (08.08.2026) */
  .navrow .nav-info-items:not(.nav-items-end) { display: flex !important; }
  .navrow .nav-info-items:not(.nav-items-end) > .nav-item:not(.hot):not(.hot-orange) { display: none !important; }
  .mobile-info-btn { display: inline-flex; }

  .header-tools { margin-left: auto; gap: 2px; justify-self: end; }
}

/* ---------- Tablet (<= 1100px, > 900px) ---------- */
@media (max-width: 1100px) and (min-width: 901px) {
  /* Cart drawer */
  .cart-drawer { width: 100vw; }

  /* Footer */
  .footer { padding: 40px 0 20px; margin-top: 32px; }
  .footer .cols { grid-template-columns: 1fr; gap: 24px; }

  /* Tweaks panel */
  .tweaks-panel { right: 10px; bottom: 10px; left: 10px; width: auto; }
}

/* ---------- Small phones (<= 420px) ---------- */
@media (max-width: 420px) {
  .logo-text .brand { font-size: 20px; }
}

/* ---------- Offcanvas recursiv ---------- */
.oc-branch { margin: 0; }
.oc-branch summary {
  list-style: none;
  cursor: pointer;
}
.oc-branch summary::-webkit-details-marker { display: none; }
.oc-item-branch .oc-chev {
  transition: transform 0.2s ease;
  color: var(--muted);
}
.oc-branch[open] > summary .oc-chev {
  transform: rotate(90deg);
  color: var(--accent);
}
.oc-branch[open] > summary {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.oc-branch[open] > summary .oc-lbl { color: var(--accent-ink); }

.oc-lbl {
  color: inherit; text-decoration: none;
}
.oc-lbl:hover { color: var(--accent-ink); }

.oc-icon {
  width: 28px; height: 28px;
  background: transparent;
  color: var(--brand-blue);
  display: grid; place-items: center;
}
.oc-icon .icon { width: 22px; height: 22px; }
.oc-icon .icon svg { stroke-width: 1.8; }

.oc-sub {
  background: var(--surface);
  border-left: 2px solid var(--border);
  margin-left: 18px;
  padding: 4px 0;
}
.oc-sub-2 {
  margin-left: 12px;
  background: var(--bg);
}
.oc-subitem {
  padding: 10px 16px !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--hairline);
}
.oc-subitem-2 {
  padding: 8px 14px !important;
  font-size: 12px !important;
  color: var(--muted);
}
.oc-subitem:last-child { border-bottom: none; }

.oc-branch-sub summary {
  padding: 10px 16px !important;
  font-size: 13px !important;
}

/* ==== Drawer lazy loader (minicart + account) ==== */
.drawer-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 40px 20px;
}
.drawer-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--line, #e5e7eb);
  border-top-color: var(--accent, #3b82f6);
  border-radius: 50%;
  animation: drawer-spin 0.8s linear infinite;
}
@keyframes drawer-spin { to { transform: rotate(360deg); } }

/* ---------- FOOTER breakpoints (standardizate) ---------- */
@media (max-width: 599.98px) {
  .footer .cols { grid-template-columns: 1fr !important; gap: 24px; }
  .footer .cols .col + .col::before { display: none; }
}
@media (min-width: 600px) and (max-width: 1199.98px) {
  .footer .cols { grid-template-columns: repeat(2, 1fr) !important; gap: 28px; }
  /* Divider doar între col.1↔col.2 pe același rând; ascunde celelalte */
  .footer .cols .col:nth-child(odd) + .col::before {
    /* nth-child nu merge aici direct — folosim approach reset + explicit */
  }
  .footer .cols .col + .col::before { display: none; }
}
@media (min-width: 1200px) {
  .footer .cols { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ---------- Navrow: nav-info buton portocaliu + collapse sub 760 ---------- */
.navrow { position: relative; overflow-x: clip; overflow-y: visible; }
.navrow .nav-items { display: flex; align-items: center; gap: 24px; flex: 1 1 auto; min-width: 0; }
.navrow .nav-items.nav-items-end { flex: 0 0 auto; }
.navrow .nav-info {
  display: none;
  background: var(--brand-orange);
  border: none;
  border-radius: 50%;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff;
  margin-left: auto;
  transition: background .15s, transform .1s;
}
.navrow .nav-info:hover { background: var(--brand-orange-dark); }
.navrow .nav-info:active { transform: scale(0.95); }

@media (max-width: 759.98px) {
  .navrow .nav-items { display: none; }
  .navrow .nav-info { display: inline-flex; }
}

/* ---------- Info drawer (offcanvas dreapta, ca account/cart) ---------- */
.info-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 120;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.info-backdrop.open { opacity: 1; visibility: visible; }
.info-drawer {
  position: fixed; top: 0; bottom: 0; right: 0;
  width: 360px; max-width: 92vw;
  background: #fff;
  z-index: 130;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.2);
  transform: translateX(100%); transition: transform .3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.info-drawer.open { transform: translateX(0); }
.info-drawer .info-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}
.info-drawer .info-head h3 {
  margin: 0; font-family: var(--f-serif); font-weight: 400;
  font-size: 22px; color: var(--ink);
}
.info-drawer .x-btn {
  background: var(--surface); border: 1px solid var(--border);
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer; color: var(--muted);
}
.info-drawer .x-btn:hover { background: var(--brand-orange); color: #fff; border-color: var(--brand-orange); }
.info-drawer .info-body { flex: 1; overflow-y: auto; padding: 8px 0 20px; }
.info-drawer .info-empty { padding: 40px 22px; color: var(--muted); text-align: center; }
.info-drawer .info-group { padding: 8px 0; }
.info-drawer .info-link {
  display: grid; grid-template-columns: 1fr 16px;
  align-items: center; gap: 14px;
  padding: 14px 22px;
  color: var(--ink); font-size: 14px; font-weight: 500;
}
.info-drawer .info-link:hover { background: var(--surface); color: var(--brand-orange-dark); }
.info-drawer .info-chev { color: var(--muted); }

/* Sticky footer — main grows to push footer down */
body > main { flex: 1 0 auto; }
body > footer { flex-shrink: 0; }


/* Ajax overlay + spinner (folosit de account-new.js, login etc.) */
.ajax_overlay { position: absolute; inset: 0; background: rgba(255,255,255,.75); border-radius: inherit; display: flex !important; align-items: center; justify-content: center; z-index: 10; backdrop-filter: blur(2px); }
.loader_ajax { display: block; width: 28px; height: 28px; border: 3px solid var(--border, #dce3ed); border-top-color: var(--accent, #f97316); border-radius: 50%; animation: spin-ajax .7s linear infinite; }
@keyframes spin-ajax { to { transform: rotate(360deg); } }


/* reCAPTCHA badge — ascuns, conform cerințelor Google trebuie menționat în UI */
.grecaptcha-badge { visibility: hidden !important; }

/* =========================================================
   fm-modal — sistem comun de modale (folosit din window.fmModal API)
   Mutat din product.css/reviews.css — modalele sunt globale, nu per-page.
   ========================================================= */
.fm-backdrop {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:1998; backdrop-filter:blur(3px);
}
.fm-backdrop.open { display:block; }
.fm-modal {
    display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
    width:95%; max-width:500px; max-height:90vh; overflow-y:auto;
    background:#fff; border-radius:16px; z-index:1999;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.fm-modal.open { display:block; }
.fm-modal.modal-lg { max-width:720px; }
.fm-modal.modal-xl { max-width:1100px; }
.fm-head {
    display:flex; justify-content:space-between; align-items:center;
    padding:20px 24px; border-bottom:1px solid var(--border);
}
.fm-head h3 { margin:0; font-family:var(--f-serif, 'Instrument Serif', serif); font-weight:400; font-size:20px; }
.fm-close {
    border:0; background:transparent; cursor:pointer;
    font-size:28px; line-height:1; color:var(--muted); padding:0; width:32px; height:32px;
}
.fm-close:hover { color:var(--ink); }
.fm-body { padding:20px 24px 24px; }
.fm-foot { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }
.fm-field { margin-bottom:14px; }
.fm-field label { display:block; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:0.04em; text-transform:uppercase; margin-bottom:6px; }
.fm-field input, .fm-field textarea, .fm-field select {
    width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
    font:inherit; font-size:14px; color:var(--ink); background:#fff;
}
.fm-field input:focus, .fm-field textarea:focus, .fm-field select:focus { outline:none; border-color:var(--accent); }
.fm-field textarea { resize:vertical; min-height:80px; }
.fm-note { font-size:12px; color:var(--muted); margin:12px 0; padding:10px 12px; background:var(--surface); border-radius:8px; }
.fm-error { color:#c00; font-size:13px; margin:8px 0; }
.fm-stars-input { display:flex; gap:4px; font-size:28px; cursor:pointer; color:#d1d5db; }
.fm-stars-input .fm-star { cursor:pointer; transition:color .1s; }
.fm-stars-input .fm-star.on { color:#fbbf24; }

@media (max-width: 600px) {
    .fm-modal { width:100%; max-height:100vh; top:auto; bottom:0; left:0; transform:none; border-radius:16px 16px 0 0; }
    .fm-head { padding:16px 20px; }
    .fm-body { padding:16px 20px 20px; }
}

/* GDPR cookie-consent banner */
.cookies-consent-wrap{position:fixed;left:0;right:0;bottom:0;z-index:9000;padding:16px;background:rgba(20,20,30,.96);color:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.25);}
.cookies-consent{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:18px;}
.cookies-consent-text{flex:1;min-width:260px;}
.cookies-consent-text strong{display:block;font-size:1.05em;margin-bottom:4px;}
.cookies-consent-text p{margin:0;font-size:.93em;opacity:.92;line-height:1.45;}
.cookies-consent-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cookies-consent-actions .btn{padding:10px 18px;}

/* Favorites */
.tool-icon-wrap { position: relative; display: inline-flex; }
.tool-icon-wrap .badge { position:absolute; top:-5px; right:-7px; min-width:16px; height:16px; padding:0 4px; font-size:10px; line-height:16px; border-radius:8px; background:var(--danger,#e53e3e); color:#fff; text-align:center; pointer-events:none; }
@keyframes fav-pop { 0%{transform:scale(1)} 40%{transform:scale(1.45)} 70%{transform:scale(.9)} 100%{transform:scale(1)} }
.p-fav.popping { animation: fav-pop .35s ease; }

/* Fav toast */
#fav-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#1e293b; color:#fff; padding:10px 18px; border-radius:8px; font-size:13px; box-shadow:0 4px 16px rgba(0,0,0,.18); opacity:0; transition:opacity .22s,transform .22s; pointer-events:none; z-index:9999; white-space:nowrap; display:flex; align-items:center; gap:8px; }
#fav-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#fav-toast svg { flex-shrink:0; }

/* Hide compare checkbox on search/home/non-category grids */
[data-list="search"] .p-compare,
[data-list="landing"] .p-compare,
[data-list="campaigns"] .p-compare,
[data-list="share-favorites"] .p-compare { display: none; }

/* ===== Chrome Zone Slideshow ===== */
.chrome-slideshow { position:relative; overflow:hidden; }
.chrome-slideshow .chrome-slides { position:relative; }
.chrome-slide { display:none; }
.chrome-slide.active { display:block; animation:chrome-fade .35s ease; }
@keyframes chrome-fade { from { opacity:0; } to { opacity:1; } }
.chrome-dots { display:flex; justify-content:center; gap:.4rem; padding:.5rem 0; }
.chrome-dot { width:8px; height:8px; border-radius:50%; border:none; padding:0;
  background:var(--muted-2); cursor:pointer; transition:background .2s; }
.chrome-dot.active, .chrome-dot:hover { background:var(--accent); }

/* ===== Error / 404 / coming-soon page + listing empty state ===== */
.error-page { padding: 80px 16px 100px; text-align: center; }
.error-page .container { max-width: 720px; margin: 0 auto; }
.listing-empty { padding: 40px 16px 60px; text-align: center; max-width: 720px; margin: 0 auto; }
.error-code {
  font-size: clamp(96px, 18vw, 200px);
  line-height: .9;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 8px;
  letter-spacing: -0.04em;
}
.listing-empty .error-code { font-size: clamp(64px, 12vw, 120px); }
.error-title {
  font-size: clamp(22px, 3.4vw, 32px);
  margin: 0 0 12px;
  color: var(--ink);
}
.error-message {
  font-size: 16px;
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.5;
}
.error-search {
  max-width: 480px;
  margin: 0 auto 28px;
}
.error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 520px) {
  .error-page { padding: 48px 16px 64px; }
  .listing-empty { padding: 24px 12px 40px; }
  .error-actions .btn { flex: 1; min-width: 130px; }
}


/* GDPR consent modal — preferinte (accordion nativ <details> + randuri toggle) */
.consent-prefs{display:flex;flex-direction:column;gap:10px}
.consent-group{border:1px solid var(--border,#e6e2dd);border-radius:12px;overflow:hidden;background:var(--card,#fff)}
.consent-group-head{cursor:pointer;padding:12px 16px;font-weight:600;color:var(--ink,#2a2a2a);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.consent-group-head::-webkit-details-marker{display:none}
.consent-group-head::after{content:"\25BE";font-size:1.25em;line-height:1;color:var(--muted);opacity:.8;transition:transform .2s}
.consent-group[open]>.consent-group-head::after{transform:rotate(180deg)}
.consent-group-body{padding:2px 16px 14px;font-size:.9em;color:var(--muted,#6b6b6b)}
.consent-intro{margin-bottom:8px}
.consent-intro ul{margin:6px 0 0;padding-left:18px}
.consent-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--border,#efece8)}
.consent-row-text{flex:1;line-height:1.4}
.consent-row-text strong{display:block;font-size:.82em;letter-spacing:.03em;color:var(--ink,#2a2a2a);margin-bottom:2px}
.consent-row-toggle{padding-top:2px}
.consent-row-toggle input{width:20px;height:20px;accent-color:var(--accent,#8a2be2);cursor:pointer}
/* Cookies preferences modal — mai lat, scrollbar discret, footer aerisit */
#fm-modal-cookies{max-width:640px}
#fm-modal-cookies .fm-body{padding:18px 22px 20px;min-height:240px}
#fm-modal-cookies .fm-foot{padding:16px 22px;gap:12px}
#fm-modal-cookies .fm-foot .btn{min-width:130px;padding:11px 20px;font-size:14px}
.fm-modal{scrollbar-width:thin;scrollbar-color:var(--border-strong,#cfc9c2) transparent}
.fm-modal::-webkit-scrollbar{width:8px}
.fm-modal::-webkit-scrollbar-track{background:transparent}
.fm-modal::-webkit-scrollbar-thumb{background:var(--border-strong,#cfc9c2);border-radius:8px;border:2px solid #fff}

/* Sertar info mobil — antet de grup (Informatii comenzi / Servicii clienti) */
.info-group-title{
  font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  opacity:.6; padding:.9rem 1rem .35rem;
}
.info-group + .info-group{ border-top:1px solid var(--border, rgba(0,0,0,.08)); margin-top:.25rem; }


/* Bandă de abonare în footer (19.09.2026). Text la stânga, câmp + buton la dreapta pe ecran
   mare; pe telefon una sub alta. Culorile vin din tokenii footerului, nu din valori proprii. */
.footer-nl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  align-items: center;
  gap: 18px 40px;
  padding: 0 0 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-nl .nl-form { max-width: none; display: contents; }
.footer-nl .nl-form__head { grid-column: 1; }
.footer-nl .nl-form__row  { grid-column: 2; margin: 0; }
.footer-nl .nl-form__note,
.footer-nl .nl-form__msg  { grid-column: 2; margin: 6px 0 0; font-size: 12px; opacity: .7; }
.footer-nl .nl-form__title { font-size: 1.05rem; margin-bottom: .2rem; }
.footer-nl .nl-form__sub   { margin: 0; }

@media (max-width: 860px) {
  .footer-nl { grid-template-columns: 1fr; }
  .footer-nl .nl-form__head,
  .footer-nl .nl-form__row,
  .footer-nl .nl-form__note,
  .footer-nl .nl-form__msg { grid-column: 1; }
  /* Pe telefon câmpul şi butonul stau unul sub altul: pe un rând, butonul ieşea din ecran. */
  .footer-nl .nl-form__input { flex: 1 1 100%; }
  .footer-nl .nl-form__btn { width: 100%; }
}


/* ===== Widget newsletter — mutat din pages.css pe 19.09.2026 ==============================
   De când stă şi în footer, widgetul apare pe ORICE pagină, nu doar pe cele care încarcă
   pages.css. Pe prima pagină ieşea nestilizat, cu tot cu capcana de boţi VIZIBILĂ. */
.nl-form { max-width: 34rem; }

.nl-form__title { font-size: 1.15rem; margin: 0 0 .35rem; }
.nl-form__sub   { margin: 0 0 1rem; opacity: .75; font-size: .92rem; line-height: 1.5; }

/* Eticheta există pentru cititoarele de ecran, dar nu se vede: câmpul are placeholder,
   iar un `display:none` ar scoate-o şi din accesibilitate. */
.nl-form__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.nl-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
}

.nl-form__input {
    flex: 1 1 14rem;
    min-width: 0;              /* fără el, un input flex nu se micşorează sub conţinut pe telefon */
    padding: .65rem .9rem;
    border: 1px solid var(--border-color, #d5d5d5);
    border-radius: .4rem;
    font-size: 1rem;
}
.nl-form__input:focus {
    outline: 2px solid var(--accent, #6b21a8);
    outline-offset: 1px;
}

.nl-form__btn {
    padding: .65rem 1.5rem;
    border: 0;
    border-radius: .4rem;
    background: var(--accent, #6b21a8);
    color: var(--accent-contrast, #fff);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap;
}
.nl-form__btn:hover:not(:disabled) { opacity: .9; }
.nl-form__btn:disabled { opacity: .6; cursor: default; }

/* 🔴 Capcana pentru boţi. NU `display:none` şi nici `visibility:hidden` — boţii buni le
   recunosc şi sar peste câmp. Se scoate din flux şi din ecran, dar rămâne „vizibil" tehnic. */
.nl-form__trap {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
}

.nl-form__note { font-size: .82rem; opacity: .65; margin: .7rem 0 0; line-height: 1.5; }

.nl-form__msg { margin: .7rem 0 0; font-size: .92rem; min-height: 1.2em; }
.nl-form__msg.is-ok   { color: #2e7d32; }
.nl-form__msg.is-fail { color: #c62828; }

/* Fereastra de rate 6x-60x (22.10) — produs şi checkout, deci aici, nu în product.css. */
.fin-modal-bg { position:fixed; inset:0; background:rgba(15,20,30,.55); z-index:9998; }
.fin-modal { position:fixed; z-index:9999; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; background:var(--surface, #fff); color:var(--ink); border-radius:var(--r-lg); box-shadow:var(--shadow-3); padding:16px 18px 18px; outline:none; }
.fin-modal-h { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:17px; margin-bottom:10px; }
.fin-modal-x { border:0; background:none; font-size:26px; line-height:1; cursor:pointer; color:var(--muted); padding:0 4px; }
.fin-modal-logos { display:flex; align-items:center; gap:14px; padding:10px; background:#fff; border-radius:var(--r-sm); margin-bottom:12px; }
.fin-modal-logos img { height:24px; width:auto; }
.fin-modal-lbl { font-size:13px; color:var(--muted); margin-bottom:6px; }
.fin-modal-per { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.fin-modal-per button { border:1px solid var(--border-strong); background:none; color:var(--ink); border-radius:999px; padding:6px 11px; font:inherit; font-size:13px; cursor:pointer; }
.fin-modal-per button.on { background:#8bbc06; border-color:#8bbc06; color:#fff; }
.fin-modal-tab { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:12px; }
.fin-modal-tab div { border:1px solid var(--border); border-radius:var(--r-sm); padding:10px; display:flex; flex-direction:column; gap:4px; }
.fin-modal-tab span { font-size:12px; color:var(--muted); }
.fin-modal-tab b { font-size:17px; }
.fin-modal-note { font-size:12px; color:var(--muted); margin:6px 0 0; line-height:1.45; }
@media (max-width:480px) { .fin-modal-tab { grid-template-columns:1fr; } .fin-modal-tab div { flex-direction:row; justify-content:space-between; align-items:baseline; } }

/* Pop-in-urile Oney (scriptul lor, 22.10): doar forma — colţuri rotunjite, umbră, fundal ca la
   fereastra Credex. Conţinutul şi culorile lor (aprobate de Oney) rămân neatinse.
   🔴 `!important` e necesar: stilurile lor Svelte pun ele `border-radius:0 !important` şi
   `padding:15px !important` pe dialog; clasa repetată ne dă specificitatea mai mare. */
.oney-modal.oney-modal.oney-modal { background:rgba(15,20,30,.55); }
.oney-modal .oney-modalDialog.oney-modalDialog { border-radius:var(--r-lg, 16px) !important; box-shadow:var(--shadow-3, 0 20px 50px rgba(0,0,0,.25)) !important; padding:22px 24px 24px !important; }
.oney-modal .oney-close.oney-close { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:background .15s; }
.oney-modal .oney-close.oney-close:hover { background:rgba(0,0,0,.06); }
.oney-modal .oney-pedagogicButton.oney-pedagogicButton { border-radius:999px; }
/* Indicatorul LOR dinaintea ferestrei — îl ţine pe al nostru (oney-widget.js); două nu. */
#showOneyWidgetAsModalBody.oney-loading { display:none !important; }
/* Fereastra de aşteptare (22.10): indicatorul până răspunde Oney; ratele 3x şi 4x alăturate unde încap. */
.fin-modal--wait { width:auto; min-width:220px; padding:8px 22px; }
.fin-spin { display:flex; align-items:center; justify-content:center; gap:10px; padding:26px 0; color:var(--muted); font-size:14px; }
.fin-spin::before { content:""; width:22px; height:22px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:fin-rot .8s linear infinite; flex:0 0 auto; }
@keyframes fin-rot { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fin-spin::before { animation-duration:2.4s; } }
.fin-modal:has(.fin-oney-sch) { width:min(800px, calc(100vw - 32px)); }   /* 3x+4x alăturate: „Lei" rămâne lângă sumă */
.fin-oney-sch { display:flex; flex-wrap:wrap; gap:20px; }
.fin-oney-sch > div { flex:1 1 320px; min-width:0; }
.fin-oney-sch > div:empty { display:none; }
.fin-oney-sch .oney-loadingCheckout { display:none; }   /* avem indicatorul nostru */