/* ===== DESIGN TOKENS ===== */
:root {
/* Premium radius scale (Stripe/Linear/Vercel) — geometric, sober, nu bubble-y.
   Xs=4px (input-uri, micro-elemente), 6px (butoane standard, badges, chip-uri),
   8px (carduri, dropdowns, panouri), 10px (modals, panouri majore). */
--si-radius-xs: .25rem;
--si-radius: .375rem;
--si-radius-lg: .5rem;
--si-radius-xl: .625rem;
--si-radius-pill: 50rem;
--si-transition: .18s cubic-bezier(.4,0,.2,1);
--si-transition-slow: .3s cubic-bezier(.4,0,.2,1);
--si-accent: #8C1913;
--si-accent-hover: #A41E18;
--si-accent-soft: rgba(140,25,19,.07);
--si-accent-soft-hover: rgba(140,25,19,.13);
--si-success: #178841;
--si-success-soft: rgba(23,136,65,.10);
--si-warning: #eab308;
--si-warning-soft: rgba(234,179,8,.1);
--si-danger: #ef4444;
--si-danger-soft: rgba(239,68,68,.08);
--si-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

/* ===== LIGHT THEME ===== */
/* Paleta inspirata din Stripe/Linear: fundal gri rece, surface alb pur,
   border-uri vizibile (~10 unitati contrast), shadow-uri cu nuanta rece
   pentru depth real. */
[data-bs-theme="light"] {
--si-bg: #eef0f5;
--si-bg-elevated: #e4e7ee;
--si-surface: #ffffff;
--si-surface-hover: #f7f8fc;
--si-border: #d4d7e0;
--si-border-subtle: #e5e7ee;
--si-text: #0f172a;
--si-text-secondary: #475569;
--si-text-muted: #5a6d87;
--si-badge-bg: #eef0f5;
--si-toolbar-bg: #ffffff;
--si-sidebar-bg: #ffffff;
--si-chip-bg: #eef0f5;
--si-trust-bg: linear-gradient(135deg, #ffffff 0%, #f5f6fa 100%);
--si-compare-bg: rgba(255,255,255,.96);
--si-breadcrumb-color: #5a6d87;
--si-shadow-xs: 0 1px 2px rgba(15,23,42,.06);
--si-shadow-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
--si-shadow: 0 4px 12px rgba(15,23,42,.09), 0 2px 4px rgba(15,23,42,.05);
--si-shadow-lg: 0 10px 30px rgba(15,23,42,.11), 0 4px 12px rgba(15,23,42,.06);
--si-shadow-xl: 0 20px 50px rgba(15,23,42,.13), 0 6px 16px rgba(15,23,42,.08);
--si-card-img-bg: #f1f3f8;
--si-topbar-bg: rgba(255,255,255,.88);
--si-topbar-border: rgba(15,23,42,.10);
--si-skeleton-base: #dee1ea;
--si-skeleton-shine: #eef0f5;
/* Pe alb, accent-soft trebuie putin mai vizibil ca pe dark
   ca hover-urile sa nu treaca neobservate */
--si-accent-soft: rgba(140,25,19,.07);
--si-accent-soft-hover: rgba(140,25,19,.13);
/* Rail burgundy pentru decoratiuni laterale (ex. left-rail la grupurile
   de facete). Pe alb, varianta diluata din brand color e lizibila. */
--si-accent-rail: rgba(140,25,19,.28);
/* Text accent: pe alb, brand color-ul direct functioneaza — pastram. */
--si-accent-text: var(--si-accent);
/* Tag highlight bg pentru spec-tag-urile bifate pe cardul produsului. Pe
   alb, accent-soft existent are contrast suficient. */
--si-accent-tag-soft: var(--si-accent-soft);
/* Neutral CTA bg (ex. .si-btn-alert pentru produse fara stoc). Trebuie
   suficient de inchis ca textul alb sa atinga 4.5:1; nu folosim
   --si-text-muted pentru ca acela este pentru text, nu pentru fundal. */
--si-btn-neutral-bg: #475569;
--si-btn-neutral-bg-hover: #334155;
/* Sidebar filter hover bg (mai inchis decat accent-soft generic pentru ca pe
   alb burgundy 7% e prea subtil pe valori). Scoped strict pe .si-filter-option
   si .si-filter-parent-row — alte hover-uri (search, chip-uri) raman pe
   --si-accent-soft. */
--si-filter-hover-bg: rgba(140,25,19,.12);
}

/* ===== DARK THEME ===== */
[data-bs-theme="dark"] {
--si-bg: #0c0d12;
--si-bg-elevated: #14151d;
--si-surface: #191b25;
--si-surface-hover: #1f2231;
--si-border: #262938;
--si-border-subtle: #1f222f;
--si-text: #f0f1f5;
--si-text-secondary: #9ba1b5;
--si-text-muted: #82889f;
--si-badge-bg: #1e2130;
--si-toolbar-bg: #191b25;
--si-sidebar-bg: #191b25;
--si-chip-bg: #1e2130;
--si-trust-bg: linear-gradient(135deg, #191b25 0%, #161822 100%);
--si-compare-bg: rgba(25,27,37,.94);
--si-breadcrumb-color: #82889f;
--si-shadow-xs: 0 1px 2px rgba(0,0,0,.2);
--si-shadow-sm: 0 1px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
--si-shadow: 0 2px 8px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
--si-shadow-lg: 0 8px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
--si-shadow-xl: 0 20px 50px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
--si-card-img-bg: #12141c;
--si-topbar-bg: rgba(25,27,37,.88);
--si-topbar-border: rgba(255,255,255,.06);
--si-skeleton-base: #262938;
--si-skeleton-shine: #2e3145;
/* Pe fundal inchis, burgundy-ul brand (#8C1913) la alpha mic se topeste in
   bg si nu mai e perceptibil. Folosim un coral derivat (HSL lighten al
   aceluiasi hue) la alpha ridicat — ramane in familia "burgundy lifted"
   dar are contrast real fata de #191b25. */
--si-accent-rail: rgba(224,119,112,.55);
/* Pe dark, brand color-ul solid e prea apropiat ca luminanta de bg pentru
   text — folosim aceeasi familie coral, solid (fara alpha), ca sa treaca
   bine contrastul AA. Pastreaza identitatea de brand. */
--si-accent-text: #d97870;
/* Spec-tag highlight bg pe dark: coral lifted la alpha mic (.12) — vizibil
   peste #191b25 dar subtil ca sa nu compete cu textul tag-ului. */
--si-accent-tag-soft: rgba(224,119,112,.12);
/* Sidebar filter hover bg pe dark: coral lifted la alpha .16 — vizibil clar
   peste #191b25 (~ratio 1.3-1.4 fata de surface) fara sa devina agresiv.
   Burgundy soft la alpha .07 (default light) se topeste in bg pe dark. */
--si-filter-hover-bg: rgba(224,119,112,.16);
/* Pe dark, verdele saturat #22c55e are contrast suficient peste card-uri
   inchise. Pe light am cobort la #178841 ca sa atinga AA peste alb;
   restauram aici varianta brand-iconica strict pentru dark. */
--si-success: #22c55e;
--si-success-soft: rgba(34,197,94,.10);
/* Neutral CTA bg pentru dark — alegem o nuanta mai inchisa decat
   text-muted (folosit acum strict pentru text) ca text-ul alb pe el
   sa pastreze 4.5:1. */
--si-btn-neutral-bg: #3a4054;
--si-btn-neutral-bg-hover: #4a5168;
}

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: var(--si-font);
background: var(--si-bg);
color: var(--si-text);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

/* ===== TOPBAR ===== */
.si-topbar {
background: var(--si-topbar-bg);
border-bottom: 1px solid var(--si-topbar-border);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
padding: .65rem 0;
position: sticky;
top: 0;
z-index: 1040;
}

/* Mobile warning strip — sticky cu topbar la viewport <1020px ca sa
   semnaleze ca pagina nu e optimizata. Sits inside .si-topbar (deci
   beneficiaza de sticky-ul existent) sus de topbar-row pentru
   prominenta. Hidden by default; CSS media query il afiseaza. */
.si-mobile-warning {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .38rem .85rem;
  background: rgba(248, 165, 35, .14);
  border-bottom: 1px solid rgba(248, 165, 35, .35);
  color: #8b6500;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .015em;
  text-align: center;
  line-height: 1.35;
}
.si-mobile-warning i { font-size: .9rem; opacity: .9; }
/* v375: deprecated — mobile UX is now built. Warning stays hidden. The
   narrow 992-1019px tablet band that used to see it also passes. */
[data-bs-theme="dark"] .si-mobile-warning {
  background: rgba(245, 185, 66, .1);
  border-bottom-color: rgba(245, 185, 66, .25);
  color: #f5b942;
}

/* B2B-only notice strip — sits directly under the topbar. Subtle
   brand-tinted background, small caps text, briefcase glyph in accent.
   Not sticky: scrolls away with the page so it's visible at entry but
   doesn't fight the topbar on long scrolls. */
.si-notice {
  background: var(--si-accent-soft);
  border-bottom: 1px solid var(--si-border-subtle);
  color: var(--si-text);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
[data-bs-theme="dark"] .si-notice {
  color: var(--si-text-muted);
}
.si-notice-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .42rem 0;
  font-weight: 500;
}
.si-notice i {
  font-size: .82rem;
  color: var(--si-accent);
  opacity: .85;
  letter-spacing: 0;
}
@media (max-width: 575.98px) {
  .si-notice { font-size: .62rem; letter-spacing: .05em; }
  .si-notice-inner { padding: .38rem 0; gap: .4rem; }
}
.si-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
transition: var(--si-transition);
line-height: 0;
}
.si-logo:hover { opacity: .88; }
.si-logo-img {
display: block;
height: 36px;
width: auto;
max-width: 180px;
object-fit: contain;
}

/* Topbar row: logo | search (centered) | actions. Grid so the search
   stays visually centered regardless of the side-content widths.
   Middle column is sized via --si-search-w so we can expand it on focus
   through :has() on the row, instead of an `auto` column that wouldn't
   honor the child's max-width transition. @property declares the
   custom prop as a <length> so the transition actually animates
   instead of snapping. */
@property --si-search-w {
  syntax: '<length>';
  inherits: true;
  initial-value: 440px;
}
.si-topbar-row {
  --si-search-w: 440px;
  display: grid;
  grid-template-columns: 1fr var(--si-search-w) 1fr;
  align-items: center;
  gap: 1.25rem;
  transition: --si-search-w 240ms cubic-bezier(.4,0,.2,1);
}
.si-topbar-row:has(.si-search:focus-within) { --si-search-w: 560px; }
.si-topbar-row > :first-child { justify-self: start; }
.si-topbar-row > .si-search   { justify-self: stretch; }
.si-topbar-row > :last-child  { justify-self: end; }

/* ===== HEADER SEARCH PILL ===== */
.si-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 999px;
  transition:
    max-width 240ms cubic-bezier(.4,0,.2,1),
    border-color 180ms ease,
    box-shadow 220ms ease,
    background 180ms ease;
  min-width: 0;
}
.si-search:hover { border-color: var(--si-accent-rail); }
.si-search:focus-within {
  max-width: 560px;
  border-color: var(--si-accent);
  background: var(--si-bg-elevated);
  box-shadow:
    0 4px 18px rgba(140,25,19,.10),
    0 0 0 4px rgba(140,25,19,.08);
}
[data-bs-theme="dark"] .si-search:focus-within {
  box-shadow:
    0 4px 18px rgba(224,119,112,.18),
    0 0 0 4px rgba(224,119,112,.12);
}
.si-search-icon {
  font-size: 1rem;
  color: var(--si-text-muted);
  opacity: .65;
  margin-right: 10px;
  transition: opacity 180ms ease, color 180ms ease, transform 180ms ease;
  flex: 0 0 auto;
}
.si-search:focus-within .si-search-icon {
  opacity: 1;
  color: var(--si-accent);
  transform: scale(1.05);
}
.si-search-input {
  border: 0;
  background: transparent;
  outline: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: .85rem;
  color: var(--si-text);
  font-family: inherit;
  padding: 0;
  /* Webkit search clear button hidden — we control state via JS. */
}
.si-search-input::-webkit-search-decoration,
.si-search-input::-webkit-search-cancel-button,
.si-search-input::-webkit-search-results-button,
.si-search-input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
.si-search-placeholder {
  position: absolute;
  left: calc(14px + 1rem + 10px); /* padding + icon + margin */
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  color: var(--si-text-muted);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity 180ms ease;
  letter-spacing: .005em;
}
.si-search:focus-within .si-search-placeholder,
.si-search.has-value .si-search-placeholder {
  opacity: 0;
}
/* Blinking caret appended to the typewriter text by JS via :after content;
   simpler than managing it through innerText so the caret never disappears
   between schedule ticks. */
.si-search-placeholder::after {
  content: '|';
  margin-left: 1px;
  color: var(--si-accent);
  font-weight: 400;
  animation: si-search-caret 1s steps(2, start) infinite;
}
@keyframes si-search-caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/* Submit CTA — visible at rest, primary brand color. No-op for now;
   wired to a /cauta page in a later iter. The pill itself focuses the
   input on click, so this button currently bubbles that same behavior. */
.si-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  margin-left: 8px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  background: var(--si-accent);
  border: 1px solid var(--si-accent);
  border-radius: var(--si-radius-pill);
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  user-select: none;
  white-space: nowrap;
}
.si-search-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(140,25,19,.28);
  filter: brightness(1.06);
}
.si-search-submit:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(140,25,19,.2);
  filter: brightness(.98);
}
.si-search-submit:focus-visible {
  outline: 2px solid var(--si-accent);
  outline-offset: 2px;
}
[data-bs-theme="dark"] .si-search-submit:hover {
  box-shadow: 0 6px 16px rgba(224,119,112,.32);
}

/* Reduced-motion users: no caret blink, no expansion. */
@media (prefers-reduced-motion: reduce) {
  .si-search-placeholder::after { animation: none; opacity: .5; }
  .si-search,
  .si-search:focus-within { transition: none; }
  .si-search-panel { transition: opacity 100ms ease !important; transform: none !important; }
}

/* ── Search dropdown panel (iter 2 — visual only) ──
   Slides down + fades in on focus. Frosted glass effect via
   backdrop-filter for a premium "floats over content" feel. All items
   are decorative for now; iter 3+ will wire suggestion/quick-filter
   navigation. */
.si-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--si-bg-elevated);
  border: 1px solid var(--si-border-subtle);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.05);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  padding: .75rem;
  z-index: 1050;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.4,0,.2,1);
}
[data-bs-theme="dark"] .si-search-panel {
  box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
}
.si-search:focus-within .si-search-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.si-search-section + .si-search-section {
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid var(--si-border-subtle);
}
.si-search-section-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--si-text-muted);
  padding: 0 .5rem .4rem;
}

.si-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: 0 .35rem;
}
.si-search-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  font-size: .76rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--si-text);
  background: var(--si-surface);
  border: 1px solid var(--si-border-subtle);
  border-radius: 999px;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}
.si-search-chip i { font-size: .85rem; opacity: .65; transition: opacity 150ms ease, color 150ms ease; }
.si-search-chip:hover {
  border-color: var(--si-accent);
  color: var(--si-accent);
  background: var(--si-accent-soft);
  transform: translateY(-1px);
}
.si-search-chip:hover i { opacity: 1; color: var(--si-accent); }

.si-search-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  text-decoration: none;
  color: var(--si-text);
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}
.si-search-item:hover { background: var(--si-accent-soft); color: var(--si-accent); }
.si-search-item-icon {
  font-size: 1rem;
  color: var(--si-text-muted);
  flex: 0 0 auto;
  transition: color 150ms ease;
}
.si-search-item:hover .si-search-item-icon { color: var(--si-accent); }
.si-search-item span { flex: 1; }
.si-search-item-arrow {
  font-size: .8rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  flex: 0 0 auto;
}
.si-search-item:hover .si-search-item-arrow { opacity: 1; transform: translateX(0); }

.si-search-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .75rem;
  font-size: .8rem;
  color: var(--si-text-muted);
  font-style: italic;
}
.si-search-empty i { font-size: .9rem; opacity: .6; }

.si-search-footer {
  margin-top: .65rem;
  padding: .65rem .75rem 0;
  border-top: 1px solid var(--si-border-subtle);
  font-size: .72rem;
  color: var(--si-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}
.si-search-footer kbd {
  background: var(--si-bg);
  border: 1px solid var(--si-border-subtle);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .65rem;
  font-weight: 600;
  color: var(--si-text);
  font-family: inherit;
}
.si-search-footer-sep { opacity: .4; margin: 0 .15rem; }

/* Section label cu butonul "Sterge tot" la dreapta (recent searches) */
.si-search-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* WIP variant: aceeasi paleta galbena ca banner-ul de pe /compara
   ("Pagina in lucru"). Icon-ul de cone-striped semnaleaza progres. */
.si-search-section-wip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #c89200;
  letter-spacing: .05em;
}
[data-bs-theme="dark"] .si-search-section-wip { color: #f5b942; }
.si-search-section-wip i { font-size: .85rem; }
.si-search-recent-clear {
  border: 0;
  background: transparent;
  color: var(--si-text-muted);
  font-size: .65rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 150ms ease;
}
.si-search-recent-clear:hover { color: var(--si-accent); }

/* Recent chips: smaller pills cu icon clock */
.si-search-recent { padding: 0 .35rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.si-search-recent-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  font-size: .76rem;
  text-decoration: none;
  color: var(--si-text);
  background: var(--si-bg);
  border: 1px solid var(--si-border-subtle);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
  font-family: inherit;
}
.si-search-recent-item i { font-size: .8rem; opacity: .55; }
.si-search-recent-item:hover {
  border-color: var(--si-accent);
  color: var(--si-accent);
  background: var(--si-accent-soft);
}
.si-search-recent-item:hover i { opacity: 1; color: var(--si-accent); }

/* Results mode: produsele afisate ca rows cu thumb stanga + titlu/pret */
.si-search-results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .25rem .5rem .5rem;
  font-size: .72rem;
  color: var(--si-text-muted);
  letter-spacing: .03em;
}
.si-search-results-meta strong { color: var(--si-text); font-weight: 700; }
.si-search-result {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .55rem;
  text-decoration: none;
  color: var(--si-text);
  border-radius: 8px;
  transition: background 150ms ease;
}
.si-search-result:hover { background: var(--si-accent-soft); }
.si-search-result-img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--si-border-subtle);
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.si-search-result-img img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.si-search-result-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.si-search-result-title {
  font-size: .82rem;
  font-weight: 500;
  color: var(--si-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-search-result:hover .si-search-result-title { color: var(--si-accent); }
.si-search-result-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  color: var(--si-text-muted);
}
.si-search-result-price { color: var(--si-accent-text); font-weight: 600; }
.si-search-result-stock {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.si-search-result-stock i { font-size: .45rem; }
.si-search-result-stock.in   { color: #16a34a; }
.si-search-result-stock.out  { color: var(--si-text-muted); opacity: .7; }
.si-search-results-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 1.5rem 1rem;
  font-size: .85rem;
  color: var(--si-text-muted);
  font-style: italic;
}
.si-search-results-empty i { font-size: 1rem; opacity: .55; }

/* Skeleton loader pentru rezultate (in timpul fetch) */
.si-search-result-skel {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .55rem;
}
.si-search-result-skel-img {
  width: 44px; height: 44px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--si-border-subtle), var(--si-bg), var(--si-border-subtle));
  background-size: 200% 100%;
  animation: si-search-shimmer 1.4s infinite linear;
}
.si-search-result-skel-line {
  flex: 1;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--si-border-subtle), var(--si-bg), var(--si-border-subtle));
  background-size: 200% 100%;
  animation: si-search-shimmer 1.4s infinite linear;
}
@keyframes si-search-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .si-search-result-skel-img,
  .si-search-result-skel-line { animation: none; }
}

@media (max-width: 767.98px) {
  /* Cand pill-ul mobil e focus-within, panel-ul ar trebui sa coboare
     plin pe latimea ecranului. Pe iter 1 pill devine 100% width pe
     focus, deci panel-ul mosteneste latimea natural. */
  .si-search-panel { left: -8px; right: -8px; }
}

/* Mobile compact: pill se restrange la icon-only (38x38). Tap pe pill
   expandeaza la full width inline (push-uieste theme toggle in jos vizual
   in iter 2 daca avem nevoie de overlay; pentru iter 1 acceptam ca pe
   smartphone search-ul nu e centered ci ramane vizibil ca icon). */
@media (max-width: 767.98px) {
  .si-search { max-width: 40px; padding: 0; justify-content: center; }
  .si-search:focus-within { max-width: 100%; padding: 0 14px; justify-content: flex-start; }
  .si-search-icon { margin-right: 0; }
  .si-search:focus-within .si-search-icon { margin-right: 10px; }
  .si-search-input,
  .si-search-placeholder,
  .si-search-submit { display: none; }
  .si-search:focus-within .si-search-input { display: block; }
  .si-search:focus-within .si-search-submit { display: inline-flex; }

  /* CRITICAL: the desktop grid reserves 440px for the search column
     via --si-search-w. On mobile the pill collapses to 40px visually
     but the column stayed 440px → ~400px ghost space pushed the right
     zone off-viewport. Override --si-search-w to 40px to match the
     visible pill, then on focus expand via 1fr so typing has room. */
  .si-topbar-row { --si-search-w: 40px; }
  .si-topbar-row:has(.si-search:focus-within) {
    grid-template-columns: minmax(0, auto) 1fr auto;
  }
}

/* ===== THEME TOGGLE ===== */
.si-theme-toggle {
display: inline-flex;
align-items: center;
gap: .2rem;
background: var(--si-chip-bg);
border: 1px solid var(--si-border);
border-radius: var(--si-radius-pill);
padding: .2rem;
transition: var(--si-transition);
}
.si-theme-toggle .toggle-option {
padding: .35rem .75rem;
border-radius: var(--si-radius-pill);
font-size: .75rem;
font-weight: 600;
color: var(--si-text-muted);
transition: var(--si-transition);
border: none;
background: transparent;
line-height: 1;
cursor: pointer;
letter-spacing: .01em;
display: inline-flex;
align-items: center;
gap: .35rem;
}
.si-theme-toggle .toggle-option.active {
background: var(--si-surface);
color: var(--si-text);
box-shadow: var(--si-shadow-sm);
}

/* Header compare button — pill cu icon + counter, vizibil doar cand
   exista produse in compare set. Counter actualizat de JS din MX. */
.si-header-compare {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border: 1px solid var(--si-border-subtle);
  background: var(--si-surface);
  color: var(--si-text);
  border-radius: 999px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 500;
  transition: var(--si-transition);
}
.si-header-compare[hidden] { display: none; }
.si-header-compare:hover {
  border-color: var(--si-accent);
  color: var(--si-accent);
  background: var(--si-accent-soft);
}
.si-header-compare i { font-size: .95rem; }
.si-header-compare-count {
  background: var(--si-accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 .35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@media (max-width: 575.98px) {
  .si-header-compare {
    padding: .3rem .55rem;
    font-size: .75rem;
  }
  .si-header-compare-count { min-width: 16px; height: 16px; font-size: .65rem; }

  /* Mobile: theme toggle collapses to icon-only buttons so the right
     edge of the topbar respects the viewport. Text labels reveal again
     at >=576px. Sun/moon glyphs stay legible at 14px. */
  .si-theme-toggle .toggle-option { padding: .4rem .55rem; gap: 0; }
  .si-theme-toggle .toggle-option i { font-size: .95rem; }
  .si-theme-toggle .toggle-label { display: none; }

  /* Tighten the gap between compare + theme toggle, and the grid gap
     between logo | search | actions, so the row fits without overflow
     even at 320px-class viewports. The `!important` overrides Bootstrap
     .gap-3 on the wrapping flex (Bootstrap utilities ship !important). */
  .si-topbar-row { gap: .6rem; }
  .si-topbar-row > div.d-flex { gap: .45rem !important; }
}

/* ===== BREADCRUMB ===== */
.si-breadcrumb {
padding: 1.15rem 0 0;
}
.si-breadcrumb .breadcrumb {
margin: 0;
font-size: .78rem;
font-weight: 500;
}
.si-breadcrumb .breadcrumb-item a {
color: var(--si-breadcrumb-color);
text-decoration: none;
transition: var(--si-transition);
}
.si-breadcrumb .breadcrumb-item a:hover {
color: var(--si-accent);
}
.si-breadcrumb .breadcrumb-item.active {
color: var(--si-text-secondary);
font-weight: 600;
}
.si-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
color: var(--si-border);
content: "›";
font-size: .9rem;
font-weight: 400;
}

/* ===== CATEGORY HEADER (split layout) =====
   Stanga: text compact (~2 carduri produs latime), dreapta: banner.
   Inaltimea totala ramane "ingusta" — banner-ul foloseste aspect-ratio
   adaptat per breakpoint, nu inaltime fixa, ca sa nu impinga vertical.
   Sub 992px (sub lg) coloanele stack-uiesc natural (Bootstrap col-lg-X). */
.si-category-header {
  padding: 1.25rem 0 1rem;
}
.si-category-header .si-cat-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.si-category-header h1 {
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -.04em;
  margin: 0 0 .4rem;
  line-height: 1.15;
  color: var(--si-text);
}
.si-category-header .si-subtitle {
  font-size: .88rem;
  color: var(--si-text-muted);
  margin: 0;
  line-height: 1.55;
  font-weight: 400;
}
.si-category-header .si-cat-banner {
  display: flex;
}

/* Banner placeholder.
   Aspect ratios per breakpoint matcheaza sursele recomandate:
     desktop  1200x200 (6:1)
     tablet    768x260 (~2.95:1)
     mobile    390x220 (~1.77:1) */
.si-category-header .si-banner {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius-xl);
  overflow: hidden;
  background: var(--si-trust-bg);
  box-shadow: var(--si-shadow-xs);
  aspect-ratio: 1200 / 200;
  text-decoration: none;
  transition: var(--si-transition);
}
.si-category-header .si-banner-link:hover {
  box-shadow: var(--si-shadow-sm);
  transform: translateY(-1px);
}
@media (max-width: 991.98px) and (min-width: 768px) {
  .si-category-header .si-banner { aspect-ratio: 768 / 260; }
}
@media (max-width: 767.98px) {
  .si-category-header .si-banner { aspect-ratio: 390 / 220; }
}
.si-category-header .si-banner img,
.si-category-header .si-banner picture,
.si-category-header .si-banner picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}
.si-banner-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  color: var(--si-text-muted);
}
.si-banner-placeholder .bi {
  font-size: 1.8rem;
  opacity: .35;
  line-height: 1;
}
.si-banner-dim {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--si-text-secondary);
  display: none;
}
.si-banner-dim-desktop { display: inline; }
@media (max-width: 991.98px) and (min-width: 768px) {
  .si-banner-dim-desktop { display: none; }
  .si-banner-dim-tablet  { display: inline; }
}
@media (max-width: 767.98px) {
  .si-banner-dim-desktop, .si-banner-dim-tablet { display: none; }
  .si-banner-dim-mobile { display: inline; }
}
.si-banner-note {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

/* ===== TRUST BAR ===== */
.si-trust-bar {
background: var(--si-trust-bg);
border: 1px solid var(--si-border);
border-radius: var(--si-radius-xl);
padding: 1rem 1.5rem;
margin-bottom: 1.25rem;
box-shadow: var(--si-shadow-xs);
}
.si-trust-item {
display: flex;
align-items: center;
gap: .6rem;
font-size: .78rem;
font-weight: 500;
color: var(--si-text-secondary);
}
.si-trust-icon {
width: 2rem;
height: 2rem;
border-radius: var(--si-radius);
background: var(--si-accent-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.si-trust-icon i {
font-size: 1rem;
color: var(--si-accent);
}

/* ===== QUICK FILTER CHIPS ===== */
.si-quick-filters {
display: flex;
flex-wrap: wrap;
gap: .45rem;
padding-bottom: 1.35rem;
}
.si-chip {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .42rem .9rem;
border-radius: var(--si-radius-pill);
font-size: .76rem;
font-weight: 600;
background: var(--si-surface);
color: var(--si-text-secondary);
border: 1px solid var(--si-border);
text-decoration: none;
transition: var(--si-transition);
cursor: pointer;
white-space: nowrap;
box-shadow: var(--si-shadow-xs);
letter-spacing: .01em;
}
.si-chip:hover {
border-color: var(--si-accent);
color: var(--si-accent);
background: var(--si-accent-soft);
box-shadow: var(--si-shadow-sm);
}
.si-chip.active {
background: var(--si-accent);
color: #fff;
border-color: var(--si-accent);
box-shadow: 0 2px 8px rgba(140,25,19,.3);
}
.si-chip i { font-size: .82rem; opacity: .8; }
.si-chip.active i { opacity: 1; }
.si-chip .si-chip-count {
font-size: .65rem;
opacity: .7;
font-weight: 500;
}

/* ===== SIDEBAR ===== */
.si-sidebar {
background: var(--si-sidebar-bg);
border: 1px solid var(--si-border);
border-radius: var(--si-radius-xl);
padding: 0;
box-shadow: var(--si-shadow-sm);
/* JS-managed positioning. We use position:fixed with top/left/width/max-height
   recomputed each scroll frame so the sidebar:
     1. Sits in its natural in-flow position before sticky engages (scrollY≈0)
     2. Locks to stickyTop when scrolled past the row's start
     3. STAYS at stickyTop even when the row's bottom would have pushed a
        regular position:sticky element off the screen — premium UX, the
        filter panel never disappears mid-page.
   Internal scroll behaves identically to before (overflow-y:auto + max-height).
   Width and left are synced to the col-lg-3 wrapper so layout matches stretched-
   col Bootstrap behavior even though sidebar is removed from flow. */
position: fixed;
overflow-y: auto;
overflow-x: hidden;
/* Fallback if JS hasn't run yet (initial paint): fall back to sticky. */
top: calc(var(--mx-topbar-h, 56px) + 8px);
max-height: calc(100vh - var(--mx-topbar-h, 56px) - 24px);
}
/* Until JS sets explicit width/left, fall back to sticky inside the col so
   nothing breaks during the first paint frame. The .mx-fixed-ready class is
   added by JS once the width/left/top have been applied. */
.si-sidebar:not(.mx-fixed-ready) {
position: sticky;
}
.si-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--si-border);
/* Sticky in the sidebar's internal scroll context: the "Filtre" header,
   selection counter, and Reset button stay pinned at the top while the
   facet list scrolls underneath. Solid bg + z-index so content scrolling
   past doesn't show through. */
position: sticky;
top: 0;
z-index: 5;
background: var(--si-sidebar-bg);
}

.si-sidebar-header h6 {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
margin: 0;
color: var(--si-text-muted);
display: flex;
align-items: center;
gap: .4rem;
}
.si-sidebar-header .si-filter-badge {
background: var(--si-accent);
color: #fff;
font-size: .6rem;
font-weight: 700;
padding: .12rem .4rem;
border-radius: var(--si-radius-pill);
line-height: 1.3;
}
.si-sidebar-header .si-clear-btn {
font-size: .72rem;
color: var(--si-accent-text);
text-decoration: none;
font-weight: 600;
cursor: pointer;
transition: var(--si-transition);
letter-spacing: .01em;
display: inline-flex;
align-items: center;
gap: .25rem;
}
.si-sidebar-header .si-clear-btn:hover {
color: var(--si-danger);
}

/* Accordion filters */
.si-sidebar .accordion-item {
border: none;
border-bottom: 1px solid var(--si-border-subtle);
background: transparent;
}
.si-sidebar .accordion-item:last-child { border-bottom: none; }
.si-sidebar .accordion-button {
background: transparent;
font-size: .8rem;
font-weight: 600;
color: var(--si-text);
padding: .9rem 1.25rem;
box-shadow: none;
letter-spacing: .005em;
}
.si-sidebar .accordion-button::after {
/* Use the bootstrap-icons font glyph (bi-chevron-down, U+F282) instead
   of an SVG background-image. Same icon family as the parent-toggle and
   "Arata toate" expand button — uniform look across all sidebar arrows.
   Font glyphs are hinted, so they render crisper at 16px than a
   filled-glyph SVG which anti-aliases to gray on its diagonal edges.
   Bootstrap's `:not(.collapsed)::after { transform: rotate(...) }` still
   applies, so the chevron-down rotates to chevron-up when facet opens. */
content: '\F282';
font-family: 'bootstrap-icons';
font-size: .85rem;
line-height: 1;
width: auto;
height: auto;
background-image: none;
color: var(--si-text);
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: transform var(--si-transition);
}
.si-sidebar .accordion-button:not(.collapsed)::after { opacity: 1; }
.si-sidebar .accordion-button:not(.collapsed) {
background: transparent;
color: var(--si-text);
}
.si-sidebar .accordion-button:hover { color: var(--si-accent); }

/* Facet section grouping — wraps multiple related facets under one label
   ("Specificații procesor", "Specificații display", etc.). Premium hierarchy
   via three signals: (1) header in mixed case + accent color + optional icon;
   (2) thin burgundy rail on the left of the group body so it's obvious which
   facets belong to the group; (3) generous margin after the group so the next
   ungrouped facet starts in a fresh vertical zone. No uppercase, no loud
   borders — restraint over decoration. */
.si-sidebar .si-facet-group {
  margin: .35rem 0 1.1rem;
}
.si-sidebar .si-facet-group:last-child {
  margin-bottom: .25rem;
}
.si-sidebar .si-facet-group-header {
  display: flex; align-items: center; gap: .55rem;
  padding: .9rem 1.25rem .45rem;
  color: var(--si-accent-text);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  user-select: none;
}
.si-sidebar .si-facet-group-header .bi {
  font-size: 1rem;
  flex: 0 0 auto;
}
.si-sidebar .si-facet-group-body {
  border-left: 2px solid var(--si-accent-rail);
  /* Rail-ul si tot continutul grupului impins la stanga cu ~11px (era 1.25rem)
     ca sa lase loc pentru valori lungi, fara sa atingem partea dreapta unde
     sunt counts si chevron. */
  margin-left: .55rem;
  padding-left: .15rem;
}
/* Inside a group, keep the same subtle bottom divider between members as
   between ungrouped facets. When all members are collapsed the group body
   would otherwise look like one undifferentiated block; the divider gives
   each closed facet its own visible row. The left rail still binds them
   as belonging to the same group. */
/* Tighten leading space when the very first sidebar item is a group. */
.si-sidebar .accordion-flush > .si-facet-group:first-child {
  margin-top: 0;
}
.si-sidebar .accordion-flush > .si-facet-group:first-child .si-facet-group-header {
  padding-top: .25rem;
}
.si-sidebar .accordion-body {
padding: 0 1.25rem 1rem;
}
/* In interiorul grupurilor reducem padding-left ca checkbox-urile, textul si
   header-ele facetelor sa fie deplasate spre stanga (catre rail-ul grupului).
   Padding-right ramane 1.25rem ca counts si chevron sa pastreze pozitia
   actuala (aliniere cu facetele neincadrate). */
.si-sidebar .si-facet-group-body .accordion-body {
padding-left: .5rem;
}
/* Acelasi shift la stanga si pentru header-ul facetei (textul "Placa Video"
   etc.) in interiorul grupurilor. Chevron-ul (::after) ramane la dreapta
   pentru ca padding-right e neschimbat. */
.si-sidebar .si-facet-group-body .accordion-button {
padding-left: .5rem;
}

/* Filter search input */
.si-filter-search-wrap {
position: relative;
margin-bottom: .65rem;
}
.si-filter-search-wrap i {
position: absolute;
left: .65rem;
top: 50%;
transform: translateY(-50%);
font-size: .72rem;
color: var(--si-text-muted);
pointer-events: none;
}
.si-filter-search {
width: 100%;
padding: .45rem .75rem .45rem 1.85rem;
border: 1px solid var(--si-border);
border-radius: var(--si-radius);
font-size: .75rem;
font-family: var(--si-font);
background: var(--si-bg);
color: var(--si-text);
outline: none;
transition: var(--si-transition);
}
.si-filter-search:focus {
border-color: var(--si-accent);
box-shadow: 0 0 0 3px var(--si-accent-soft);
}
.si-filter-search::placeholder {
color: var(--si-text-muted);
font-weight: 400;
}

/* Filter options */
.si-filter-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: .18rem .4rem;
border-radius: var(--si-radius-xs);
transition: var(--si-transition);
margin: 0 -.4rem;
}
.si-filter-option:hover {
background: var(--si-filter-hover-bg);
}
.si-filter-option label {
display: flex;
align-items: center;
gap: .5rem;
font-size: .78rem;
/* Text-ul valorii foloseste --si-text (negru-slate pe light, aproape alb pe
   dark) — diferit de count-uri care raman pe text-secondary, pentru o
   ierarhie clara: numele valorii prima, count-ul secundar.
   font-weight 500 aliniaza grosimea cu .si-filter-parent-row ca strokes-ul
   sa nu varieze intre valori si parinti (perceput ca "alta nuanta de negru"). */
color: var(--si-text);
cursor: pointer;
font-weight: 500;
transition: var(--si-transition);
width: 100%;
margin: 0;
}
/* Text ia spatiul intermediar, impinge count-ul spre dreapta. min-width: 0
   permite truncare in caz de label lung; count primeste margin-left auto ca
   backup pentru browsere vechi. */
.si-filter-option label .si-filter-text {
flex: 1 1 auto;
min-width: 0;
}
.si-filter-option label .si-filter-count {
flex: 0 0 auto;
margin-left: auto;
}
.si-filter-option:hover label { color: var(--si-text); }
.si-filter-option .form-check-input {
width: .9rem;
height: .9rem;
margin: 0;
border-color: var(--si-border);
border-width: 1.5px;
cursor: pointer;
transition: var(--si-transition);
border-radius: .25rem;
}
.si-filter-option .form-check-input:checked,
.si-filter-option .form-check-input:indeterminate {
background-color: var(--si-accent);
border-color: var(--si-accent);
box-shadow: 0 1px 3px rgba(140,25,19,.3);
}
.si-filter-option .form-check-input:focus {
box-shadow: 0 0 0 2px var(--si-accent-soft);
}
.si-filter-count {
font-size: .65rem;
color: var(--si-text-muted);
font-weight: 500;
background: var(--si-badge-bg);
padding: .1rem .4rem;
border-radius: var(--si-radius-pill);
min-width: 1.6rem;
text-align: center;
line-height: 1.5;
}
/* Pe dark, counts cu o nuanta mai deschisa pentru lizibilitate optima
   pe panel-urile inchise. Folosim text-secondary (gri-deschis) in loc de
   text-muted (gri foarte inchis). */
[data-bs-theme="dark"] .si-filter-count {
color: var(--si-text-secondary);
}
/* Pe light, fundalul gri al badge-ului adauga zgomot vizual peste sidebar-ul
   alb si concureaza cu textul facetei. Lasam doar numarul, fara pill — mai
   curat, mai premium. Padding/min-width raman ca sa pastreze alinierea la
   dreapta a count-urilor. Vizam si parent-count-ul — are propria regula cu
   `background: var(--si-badge-bg)` si specificitate mai mare.
   Culoarea text-secondary aliniaza count-urile cu textul valorilor (acelasi
   ton) in loc de muted (gri-deschis care arata sters). */
[data-bs-theme="light"] .si-filter-count,
[data-bs-theme="light"] .si-filter-parent .si-filter-count-parent {
background: transparent;
color: var(--si-text-secondary);
}

/* Lista de optiuni in sidebar: cand are 13+ randate, ascundem default ce e
   peste pozitia 12, dar pastram vizibile valorile bifate oriunde s-ar afla
   (excepetia :not(:has(input:checked))). Userul foloseste butonul expand
   pentru a vedea toate. Bifatele raman in canonical sort_order. */
.si-filter-options-list { display: block; }
/* v348: also exclude .is-few-values (set by JS when visibleDirect < 13).
   Bug: when context filters hid most of the first 12 DOM children (via
   `hidden` attribute), the few visible rows could land at nth-child >= 13
   and disappear. Example: brand=apple alone left only 4 visible procesor
   values at DOM positions 19-22 — they vanished under this rule. */
.facet-section:not(.is-expanded):not(.is-search-expanded):not(.is-few-values) .si-filter-options-list:has(> .si-filter-option:nth-child(13)) > .si-filter-option:nth-child(n+13):not(:has(input:checked)) {
display: none;
}

/* Symmetric to the expand-button rule: if the rendered options list has fewer
   than 13 items (e.g. context filters reduced the facet's visible values),
   hide the search-wrap too. The server still gates rendering by facetValueCount
   > 12 (no point ever for tiny facets); this CSS rule covers the runtime case
   where filtering shrinks an originally-large facet below the threshold.
   v288: also hide when the runtime visible count drops below 13 due to
   row-pruning (mallistix-new.js toggles .is-few-values per facet-section). */
.accordion-body:not(:has(> .si-filter-options-list > .si-filter-option:nth-child(13))) > .si-filter-search-wrap,
.facet-section.is-few-values .si-filter-search-wrap {
display: none;
}
.facet-section.is-few-values .si-filter-expand {
display: none !important;
}

/* Buton expand: ascuns implicit, apare doar daca lista alaturata are 13+ copii.
   Vizual continua lista — fara separator, padding similar cu .si-filter-option,
   doar cu text muted ca afordanta. Hover -> accent. Chevron animat la rotatie
   cand sectiunea trece in .is-expanded. */
.si-filter-expand {
display: none;
width: 100%;
align-items: center;
justify-content: center;
gap: .35rem;
padding: .35rem .4rem;
margin: 0 -.4rem;
background: transparent;
border: 0;
color: var(--si-text-muted);
font-size: .72rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
border-radius: var(--si-radius-xs);
transition: var(--si-transition);
}
/* Butonul apare doar daca exista cel putin o valoare nebifata pe pozitia 13+
   (adica ceva ce AR FI ascuns in starea colapsata). Daca toate valorile 13+
   sunt bifate, nu mai e nimic de ascuns -> buton inutil, ramane hidden.
   NOTA: :has() nu poate fi nested in alt :has(); de aceea check-ul de uncheck
   e pe input:not(:checked) direct, nu pe :not(:has(input:checked)). */
.si-filter-options-list:has(> .si-filter-option:nth-child(n+13) input:not(:checked)) + .si-filter-expand {
display: inline-flex;
}
.si-filter-expand:hover {
color: var(--si-accent);
background: var(--si-accent-soft);
}
.si-filter-expand:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--si-accent-soft);
}
.si-filter-expand i {
font-size: .82rem;
transition: transform .25s cubic-bezier(.4,0,.2,1);
/* Match the accordion + parent-toggle chevron tone (--si-text) so all
   sidebar arrows read with the same weight. Text label keeps its own
   muted color from the button rule. */
color: var(--si-text);
}
.si-filter-expand-count {
color: var(--si-text-secondary);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.facet-section.is-expanded .si-filter-expand i {
transform: rotate(180deg);
}

/* Price range */
.si-price-range {
display: flex;
align-items: center;
gap: .45rem;
}
.si-price-range input {
width: 100%;
padding: .45rem .65rem;
border: 1px solid var(--si-border);
border-radius: var(--si-radius);
font-size: .75rem;
font-family: var(--si-font);
background: var(--si-bg);
color: var(--si-text);
outline: none;
transition: var(--si-transition);
font-weight: 500;
text-align: center;
}
.si-price-range input:focus {
border-color: var(--si-accent);
box-shadow: 0 0 0 3px var(--si-accent-soft);
}
.si-price-range span {
color: var(--si-text-muted);
font-size: .75rem;
font-weight: 500;
flex-shrink: 0;
}

/* Filter footer */
.si-sidebar-footer {
padding: .85rem 1.25rem;
border-top: 1px solid var(--si-border-subtle);
text-align: center;
}
.si-sidebar-footer .si-apply-btn {
width: 100%;
padding: .55rem;
border: none;
border-radius: var(--si-radius);
font-size: .78rem;
font-weight: 600;
font-family: var(--si-font);
background: var(--si-accent);
color: #fff;
cursor: pointer;
transition: var(--si-transition);
box-shadow: 0 1px 3px rgba(140,25,19,.2);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem;
}
.si-sidebar-footer .si-apply-btn:hover {
background: var(--si-accent-hover);
box-shadow: 0 4px 12px rgba(140,25,19,.3);
}

/* ===== STICKY: toolbar + active filters raman vizibile la scroll lung pe produse.
   Inaltimi calculate dinamic in app.js (--mx-topbar-h, --mx-sortbar-h) ca sa
   fie precis chiar daca topbar/toolbar isi schimba inaltimea. */
#sortBar {
position: sticky;
top: var(--mx-topbar-h, 56px);
z-index: 1030;
background: var(--si-bg);
padding-top: .35rem;
margin-top: -.35rem;
box-shadow: 0 4px 10px -6px rgba(15,23,42,.08);
}
[data-bs-theme="dark"] #sortBar {
box-shadow: 0 4px 10px -6px rgba(0,0,0,.45);
}
.si-active-filters {
position: sticky;
top: calc(var(--mx-topbar-h, 56px) + var(--mx-sortbar-h, 80px));
z-index: 1020;
background: var(--si-bg);
padding: .35rem 0;
margin-bottom: .35rem;
}
/* Pe mobile bara active e oricum hidden (vezi @media); sticky-ul nu deranjeaza */

/* ===== TOOLBAR ===== */
.si-toolbar {
position: relative;
background: var(--si-toolbar-bg);
border: 1px solid var(--si-border);
border-radius: var(--si-radius-xl);
padding: .65rem 1.15rem;
margin-bottom: .65rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .5rem;
box-shadow: var(--si-shadow-xs);
}
.si-toolbar-left,
.si-toolbar-right {
display: flex;
align-items: center;
gap: .65rem;
}
.si-toolbar-divider {
width: 1px;
height: 1.2rem;
background: var(--si-border);
}
/* Segmented control pentru sortare. Pill absolut-pozitionat aluneca cu
   transform/width controlate din JS (latimile chip-urilor difera dupa text).
   Container-ul are isolation: izolam stacking-context-ul ca pill-ul cu
   z-index:0 sa nu fie afectat de elementele din afara componentei. */
.si-sort-segmented {
position: relative;
display: inline-flex;
align-items: stretch;
background: var(--si-bg);
border: 1px solid var(--si-border);
border-radius: var(--si-radius-pill);
padding: 3px;
gap: 2px;
isolation: isolate;
font-family: var(--si-font);
}
.si-sort-pill {
position: absolute;
top: 3px;
left: 0;
height: calc(100% - 6px);
width: 0;
background: var(--si-accent);
border-radius: var(--si-radius-pill);
z-index: 0;
box-shadow:
  0 2px 8px rgba(140,25,19,.32),
  0 1px 2px rgba(140,25,19,.18);
transform: translate3d(0,0,0);
transition:
  transform .28s cubic-bezier(.4,0,.2,1),
  width .28s cubic-bezier(.4,0,.2,1);
will-change: transform, width;
}
.si-sort-segmented[data-pill-init="0"] .si-sort-pill {
opacity: 0;
}
.si-sort-chip {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: .3rem;
background: transparent;
border: 0;
padding: .35rem .8rem;
font-size: .76rem;
font-weight: 500;
color: var(--si-text-muted);
border-radius: var(--si-radius-pill);
cursor: pointer;
transition: color .22s cubic-bezier(.4,0,.2,1);
white-space: nowrap;
font-family: inherit;
}
.si-sort-chip i {
font-size: .8rem;
line-height: 1;
}
.si-sort-chip:hover { color: var(--si-text-secondary); }
.si-sort-chip.is-active {
color: #fff;
}
.si-sort-chip.is-active:hover { color: #fff; }
.si-sort-chip:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--si-accent-soft);
}
[data-bs-theme="dark"] .si-sort-pill {
box-shadow:
  0 4px 12px rgba(140,25,19,.42),
  0 1px 2px rgba(0,0,0,.3);
}

.si-sort-select {
padding: .38rem .85rem .38rem .65rem;
border: 1px solid var(--si-border);
border-radius: var(--si-radius);
font-size: .76rem;
font-family: var(--si-font);
font-weight: 500;
background: var(--si-bg);
color: var(--si-text);
outline: none;
cursor: pointer;
transition: var(--si-transition);
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .65rem center;
padding-right: 2rem;
}
.si-sort-select:focus {
border-color: var(--si-accent);
box-shadow: 0 0 0 3px var(--si-accent-soft);
}
.si-view-toggle .btn {
padding: .35rem .55rem;
border: 1px solid var(--si-border);
background: transparent;
color: var(--si-text-muted);
font-size: .85rem;
line-height: 1;
transition: var(--si-transition);
}
/* Hover: doar pe butonul care NU e cel activ (data-mx-view) */
[data-mx-view="grid"] .si-view-toggle .btn[data-view="list"]:hover,
[data-mx-view="list"] .si-view-toggle .btn[data-view="grid"]:hover {
color: var(--si-text-secondary);
background: var(--si-accent-soft);
}
/* Stil "activ" pentru butonul corespunzator view-ului curent;
   nu depinde de clasa .active (care vine din server-side render),
   asa elimina flash-ul la swap AJAX. */
[data-mx-view="grid"] .si-view-toggle .btn[data-view="grid"],
[data-mx-view="list"] .si-view-toggle .btn[data-view="list"] {
background: var(--si-accent);
border-color: var(--si-accent);
color: #fff;
box-shadow: 0 1px 4px rgba(140,25,19,.3);
}


/* Fixed page width: the whole shop (topbar, breadcrumb, banner, trust bar,
   quick-filter chips, filters + products, footer) is centered in a 1720px
   column with 40px side padding, giving ~1640px of usable content. Every
   shared strip uses .container-fluid.px-lg-4, so one rule aligns them all;
   full-bleed strip backgrounds stay edge-to-edge while only the inner
   container caps. Admin views don't use px-lg-4, so they're untouched.
   px-lg-4 only applies from >= 992px, so this matches that breakpoint. */
@media (min-width: 992px) {
  .container-fluid.px-lg-4 {
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
    /* !important beats Bootstrap's .px-lg-4 padding utility (itself !important),
       so content is exactly 1720 - 2*40 = 1640px wide. */
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* Filters column widened by 50px on desktop (>= xl); the products column
   absorbs the same 50px, so the two still sum to 100% of the row and the
   grid stays 5-up (each card just loses ~10px). Base split is Bootstrap's
   col-xl-2 / col-xl-10 (16.6667% / 83.3333%). ID keeps it above the grid
   classes. Below xl the col-lg split is untouched. */
@media (min-width: 1200px) {
  #mxnew-root .si-sidebar-col {
    flex: 0 0 calc(16.6667% + 50px);
    width: calc(16.6667% + 50px);
    max-width: calc(16.6667% + 50px);
  }
  #mxnew-root .si-products-col {
    flex: 0 0 calc(83.3333% - 50px);
    width: calc(83.3333% - 50px);
    max-width: calc(83.3333% - 50px);
  }
}

.si-results-count {
font-size: .76rem;
color: var(--si-text-muted);
font-weight: 500;
}
.si-results-count strong {
color: var(--si-text-secondary);
font-weight: 700;
/* tabular-nums: largime fixa per cifra, ca rolling counter-ul sa nu jiggle
   orizontal cand cifrele au glyph-uri de latime diferita (ex: 1 vs 4).
   min-width + text-align right rezerva slotul pentru ~4 cifre, asa "produse"
   ramane fix in pagina indiferent daca afisam 1 sau 3410. */
font-variant-numeric: tabular-nums;
display: inline-block;
min-width: 4ch;
text-align: right;
transition: color .25s cubic-bezier(.4,0,.2,1);
}
.si-results-count strong.is-counting {
color: var(--si-accent);
}

/* v310: grey-out for values that BECOME unavailable on a filter click while
   they were visible ABOVE the click point. Keeps the layout stable so the
   clicked row doesn't visually jump upward when other facets shrink.
   Below the click (and rows that were never visible), still hide as before. */
.si-filter-option.is-unavailable,
.si-filter-parent.is-unavailable {
opacity: 0.4;
pointer-events: none;
transition: opacity .15s ease;
}
.si-filter-option.is-unavailable .si-filter-count,
.si-filter-parent.is-unavailable .si-filter-count-parent {
color: var(--si-text-muted);
}

/* v300: post-swap acknowledgment cues. Both effects are GPU-only
   (transform + opacity) so they don't pull layout/paint into the
   measured pill timing — the previous fade attempt (v270) cost 25ms
   because the browser had to re-layout 43 cards; this one mutates only
   the foreground batch (≤10 cards) and uses transforms exclusively. */
.si-toolbar-sweep {
position: absolute;
left: 0; bottom: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--si-accent) 50%, transparent 100%);
pointer-events: none;
opacity: 0;
transform-origin: center;
border-radius: 1.5px;
}

@keyframes si-card-just-swapped {
  0%   { opacity: 0; transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0); }
}
.si-products-grid > .just-swapped > .si-product-card {
animation: si-card-just-swapped 30ms cubic-bezier(.25,.1,.25,1) both;
animation-delay: var(--swap-delay, 0ms);
will-change: opacity, transform;
}

/* Respect users that opt out of motion. */
@media (prefers-reduced-motion: reduce) {
  .si-products-grid > .just-swapped > .si-product-card { animation: none; }
}

/* ===== ACTIVE FILTER CHIPS ===== */
/* ===== ACTIVE FILTERS — pillule grupate per facetă + dropdown ===== */
.si-active-filters {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .65rem;
}
.si-active-filters-label {
font-size: .7rem;
font-weight: 600;
color: var(--si-text-muted);
text-transform: uppercase;
letter-spacing: .06em;
flex: 0 0 auto;
}
/* Wrapper scroll cu sageti circulare + fade gradient pe margini.
   `flex: 0 1 auto` + `min-width: 0` = ia exact spatiul conținutului cand
   incape, shrinks cand depaseste; asta plaseaza "Sterge toate" direct dupa
   ultimul chip (no overflow) sau fix la dreapta (overflow). */
.si-active-filters-scroll-wrap {
position: relative;
flex: 0 1 auto;
min-width: 0;
display: flex;
align-items: center;
}
/* Fade gradient: textul "se topeste" spre sageata (premium polish) */
.si-active-filters-scroll-wrap::before,
.si-active-filters-scroll-wrap::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 38px;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity var(--si-transition);
}
.si-active-filters-scroll-wrap::before {
left: 0;
background: linear-gradient(to right, var(--si-bg) 15%, transparent 100%);
}
.si-active-filters-scroll-wrap::after {
right: 0;
background: linear-gradient(to left, var(--si-bg) 15%, transparent 100%);
}
.si-active-filters-scroll-wrap[data-fade="left"]::before,
.si-active-filters-scroll-wrap[data-fade="both"]::before { opacity: 1; }
.si-active-filters-scroll-wrap[data-fade="right"]::after,
.si-active-filters-scroll-wrap[data-fade="both"]::after { opacity: 1; }

.si-active-filters-scroll {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: .4rem;
overflow-x: auto;
overflow-y: hidden;
padding: .2rem 0 .35rem;
scroll-behavior: smooth;
/* Scroll bar nativ ASCUNS — premium feel, control prin sageti */
scrollbar-width: none;
-ms-overflow-style: none;
}
.si-active-filters-scroll::-webkit-scrollbar { display: none; }

/* Sageti circulare premium: apar doar cand exista scroll posibil pe directie */
.si-active-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--si-surface);
border: 1px solid var(--si-border);
color: var(--si-text-secondary);
font-size: .8rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
box-shadow: var(--si-shadow);
transition: var(--si-transition);
padding: 0;
}
.si-active-arrow:hover {
color: var(--si-accent);
border-color: var(--si-accent);
box-shadow: var(--si-shadow-lg);
transform: translateY(-50%) scale(1.05);
}
.si-active-arrow.left { left: 2px; }
.si-active-arrow.right { right: 2px; }
.si-active-arrow[hidden] { display: none; }

/* Pillule per facetă (grupeaza toate valorile bifate ale facetei).
   IMPORTANT: nu pun `overflow: hidden` aici — ar clipsa `.dropdown-menu`
   care iese in jos. Border-radius e aplicat separat pe toggle si X. */
.si-active-pill {
display: inline-flex;
flex: 0 0 auto;
align-items: stretch;
background: var(--si-chip-bg);
border: 1px solid var(--si-border);
border-radius: var(--si-radius-pill);
transition: var(--si-transition);
line-height: 1;
}
.si-active-pill:hover {
border-color: var(--si-accent);
background: var(--si-accent-soft);
}
.si-active-pill-toggle {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .4rem .65rem .4rem .85rem;
border: none;
background: transparent;
color: var(--si-text-secondary);
font-family: var(--si-font);
font-size: .74rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
max-width: 300px;
line-height: 1.3;
border-radius: var(--si-radius-pill) 0 0 var(--si-radius-pill);
}
.si-active-pill-toggle::after { display: none; } /* dezactivam caret-ul Bootstrap */
.si-active-pill-toggle .pill-facet {
font-weight: 700;
color: var(--si-text);
}
.si-active-pill-toggle .pill-sep { opacity: .4; }
.si-active-pill-toggle .pill-values {
font-weight: 500;
color: var(--si-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
max-width: 190px;
}
.si-active-pill-toggle .pill-caret {
font-size: .65rem;
opacity: .5;
margin-left: .15rem;
transition: transform var(--si-transition);
}
.si-active-pill-toggle[aria-expanded="true"] .pill-caret {
transform: rotate(180deg);
opacity: .85;
}

/* Buton X: elimina intreaga facetă (hard-nav la URL server-calculat) */
.si-active-pill-x {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 .7rem;
border-left: 1px solid var(--si-border);
color: var(--si-text-muted);
text-decoration: none;
font-size: .95rem;
transition: var(--si-transition);
border-radius: 0 var(--si-radius-pill) var(--si-radius-pill) 0;
}
.si-active-pill:hover .si-active-pill-x { border-left-color: var(--si-accent); }
.si-active-pill-x:hover {
background: var(--si-danger-soft);
color: var(--si-danger);
}

/* Dropdown-ul care oglindeste facetă (ca sidebar, dar inline in bara) */
.si-active-dropdown-menu {
min-width: 280px;
max-width: 360px;
max-height: 420px;
overflow-y: auto;
padding: .65rem;
background: var(--si-surface);
border: 1px solid var(--si-border);
border-radius: var(--si-radius-lg);
box-shadow: var(--si-shadow-lg);
margin-top: .35rem;
}
.si-active-dropdown-menu .si-filter-search-wrap { margin: 0 0 .55rem; }
.si-active-dropdown-menu .si-filter-option { margin: 0; }
.si-active-dropdown-menu hr.dropdown-divider {
margin: .45rem 0;
border-color: var(--si-border-subtle);
opacity: 1;
}
.si-active-section-label {
font-size: .62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--si-text-muted);
padding: .2rem .25rem .35rem;
}
.si-active-empty-state {
padding: 1.1rem .5rem;
text-align: center;
font-size: .75rem;
color: var(--si-text-muted);
}
.si-active-empty-state i { margin-right: .3rem; }

.si-clear-all-btn {
font-size: .72rem;
color: var(--si-text-muted);
text-decoration: none;
cursor: pointer;
align-self: center;
font-weight: 500;
transition: var(--si-transition);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .2rem;
}
.si-clear-all-btn:hover { color: var(--si-danger); }

/* ===== PRODUCT CARD ===== */
.si-product-card {
background: var(--si-surface);
border: 1px solid var(--si-border);
border-radius: var(--si-radius-xl);
overflow: hidden;
transition: var(--si-transition-slow);
display: flex;
flex-direction: column;
height: 100%;
box-shadow: var(--si-shadow-xs);
}
.si-product-card:hover {
/* Light: shadow mai evident, cu spread real */
box-shadow:
    0 14px 38px rgba(15,23,42,.14),
    0 4px 12px rgba(15,23,42,.08);
border-color: rgba(140,25,19,.25);
transform: translateY(-3px);
}
/* Dark: shadow neagra dispare pe panel dark — folosesc "glow" cu accent
   albastru subtle (tehnica Linear/Vercel pe dark mode) combinat cu shadow
   neagra mai puternica. Cardul pare iluminat din spate cand userul hover. */
[data-bs-theme="dark"] .si-product-card:hover {
box-shadow:
    0 14px 40px rgba(140,25,19,.22),
    0 4px 14px rgba(0,0,0,.55),
    0 0 0 1px rgba(140,25,19,.12);
border-color: rgba(140,25,19,.40);
}

/* Card image */
.si-card-img-wrap {
position: relative;
background: var(--si-card-img-bg);
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.si-card-img-wrap::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: var(--si-border-subtle);
}
.si-card-img-wrap img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: var(--si-transition-slow);
border-radius: var(--si-radius);
/* White frame around the actual product pixels: 7px breathing room between
   the laptop content and the rounded border. Padding extends the img element
   beyond the content area; explicit white background fills that frame on
   both light and dark themes (product PNGs are designed on white anyway). */
padding: 7px;
background-color: #fff;
}
/* Pe light, sidebar-ul cardului are deja background alb si zona imaginii cu
   gri introduce un bloc vizual greu peste un card altfel curat. Eliminam bg
   ca imaginea sa "pluteasca" pe acelasi fundal cu textul. Dark pastreaza
   fundalul pentru contrast cu frame-ul alb al imaginii. */
[data-bs-theme="light"] .si-card-img-wrap {
background: transparent;
}
.si-product-card:hover .si-card-img-wrap img {
transform: scale(1.04);
}
/* Pe dark, img iese ca un thumbnail in relief pe panelul dark */
[data-bs-theme="dark"] .si-card-img-wrap img {
border: 1px solid rgba(0,0,0,.15);
box-shadow: 0 4px 16px rgba(0,0,0,.30), 0 1px 4px rgba(0,0,0,.20);
}

/* ── Hover gallery (zone-based image preview + dots indicator) ──
   Only applied when the wrap has .has-gallery (server stamp, when the
   product has at least one extra image). Dots are invisible by default
   and fade in on hover, mirroring the premium "show on intent" pattern
   used by Aritzia / ASOS / Zalando. JS handles the actual image swap;
   markup + CSS live here so the visual structure works even before JS
   loads (graceful degradation: just no swap, dots hidden anyway). */
.si-card-img-wrap.has-gallery img {
transition: transform .3s cubic-bezier(.4,0,.2,1), opacity 180ms ease;
}
.si-card-dots {
position: absolute;
left: 50%; bottom: 10px;
transform: translateX(-50%);
display: flex; align-items: center; gap: 4px;
opacity: 0;
transition: opacity 180ms ease;
pointer-events: none;
z-index: 2;
}
.si-product-card:hover .si-card-img-wrap.has-gallery .si-card-dots {
opacity: 1;
}
.si-card-dot {
width: 4px; height: 4px;
border-radius: 999px;
background: var(--si-text-secondary);
opacity: .45;
transition: width 180ms ease, opacity 180ms ease, background 180ms ease;
}
.si-card-dot.active {
width: 14px;
opacity: 1;
background: var(--si-accent);
}

/* ── Compare toggle (top-right of image, ghost icon) ──
   Premium "show on intent" pattern: button is invisible at rest, fades
   in on card hover. Click toggles the active state -- icon stays visible
   on cards already in the compare set, even without hover, so the user
   sees at a glance which products are selected. Iter 1 keeps the state
   purely in-memory in JS (no persistence yet); iter 3 will persist it. */
.si-card-compare {
position: absolute;
top: 10px; right: 10px;
width: 32px; height: 32px;
border: 1px solid var(--si-border-subtle);
border-radius: 50%;
background: rgba(255,255,255,.85);
color: var(--si-text);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease;
z-index: 3;
}
[data-bs-theme="dark"] .si-card-compare {
background: rgba(0,0,0,.55);
border-color: rgba(255,255,255,.15);
}
.si-card-compare i { font-size: .95rem; line-height: 1; }
.si-product-card:hover .si-card-compare,
.si-card-compare.is-active {
opacity: 1;
pointer-events: auto;
}
.si-card-compare:hover {
background: var(--si-accent-soft);
border-color: var(--si-accent-rail);
transform: scale(1.06);
}
/* Active state declared AFTER the dark-theme base so it wins the cascade
   on both themes (same specificity, later rule). */
.si-card-compare.is-active,
[data-bs-theme="dark"] .si-card-compare.is-active {
background: var(--si-accent);
border-color: var(--si-accent);
color: #fff;
box-shadow: 0 1px 4px rgba(140,25,19,.3);
}
.si-card-compare.is-active:hover,
[data-bs-theme="dark"] .si-card-compare.is-active:hover {
background: var(--si-accent-hover);
}
@media (max-width: 767.98px) {
  /* No hover on touch devices -- always visible at half-opacity so the
     affordance is discoverable on tap. Active state stays full opacity. */
  .si-card-compare { opacity: .55; pointer-events: auto; }
}

/* ── Floating compare tray ──
   Slides up from bottom when the user adds at least one product. Sits
   above all page content via z-index. Compact, premium: thumbnails
   left-aligned, primary CTA + clear-all on the right. */
.si-compare-tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  background: var(--si-bg-elevated);
  border-top: 1px solid var(--si-border-subtle);
  box-shadow: 0 -8px 28px rgba(0,0,0,.10);
  transform: translateY(100%);
  transition: transform 250ms cubic-bezier(.4,0,.2,1);
  padding: .75rem 1rem;
}
[data-bs-theme="dark"] .si-compare-tray {
  box-shadow: 0 -8px 28px rgba(0,0,0,.55);
}
.si-compare-tray.is-open {
  transform: translateY(0);
  /* v399: prevent native browser scroll from hijacking the swipe-down
     gesture on iOS Safari. Without this, the page tried to scroll on
     vertical drag before our touchmove handler could preventDefault. */
  touch-action: none;
}
.si-compare-tray[hidden] { display: none; }

/* v401: desktop compact compare bar — 300px wide, bottom-right anchored,
   ~4px gap before the #backToTop button (which sits at right:1.5rem with
   width:2.75rem → its left edge is at offset 68px, so we anchor our bar
   at right: calc(1.5rem + 2.75rem + 4px) = ~72px). Slides up from bottom
   (same translateY animation as mobile). Mobile keeps the full-width strip. */
@media (min-width: 992px) {
  .si-compare-tray {
    left: auto;
    right: calc(1.5rem + 2.75rem + 2px);
    width: 580px;
    border-top-left-radius: var(--si-radius-xl);
    border-top-right-radius: var(--si-radius-xl);
    border-left: 1px solid var(--si-border-subtle);
    border-right: 1px solid var(--si-border-subtle);
    box-shadow: 0 -12px 32px rgba(0,0,0,.12);
  }
  [data-bs-theme="dark"] .si-compare-tray {
    box-shadow: 0 -12px 32px rgba(0,0,0,.55);
  }
}
.si-compare-tray-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.si-compare-tray-items {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.si-compare-tray-item {
  position: relative;
  width: 60px; height: 60px;
  border: 1px solid var(--si-border-subtle);
  border-radius: var(--si-radius);
  background: #fff;
  /* overflow:visible so the X badge can sit outside the tile -- the img
     is object-fit:contain and stays within the padded area, so we don't
     need clipping for the image to look right. */
  overflow: visible;
  flex: 0 0 auto;
  animation: siCompareTrayItemIn 220ms cubic-bezier(.4,0,.2,1);
}
.si-compare-tray-item img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
  border-radius: var(--si-radius);
}
.si-compare-tray-item-remove {
  position: absolute;
  top: -5px; right: -5px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 0;
  background: var(--si-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform 120ms ease, background 120ms ease;
}
.si-compare-tray-item-remove:hover {
  background: var(--si-accent-hover);
  transform: scale(1.1);
}
.si-compare-tray-item-remove i { font-size: .65rem; font-weight: 700; }
.si-compare-tray-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}
.si-compare-tray-clear {
  background: transparent;
  border: 0;
  color: var(--si-text-muted);
  font-size: .82rem;
  padding: .4rem .65rem;
  cursor: pointer;
  border-radius: var(--si-radius-xs);
  transition: var(--si-transition);
}
.si-compare-tray-clear:hover {
  color: var(--si-accent);
  background: var(--si-accent-soft);
}
.si-compare-tray-cta {
  background: var(--si-accent);
  color: #fff;
  border: 0;
  padding: .55rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--si-radius);
  cursor: pointer;
  transition: var(--si-transition);
  box-shadow: 0 1px 4px rgba(140,25,19,.3);
}
.si-compare-tray-cta:hover:not(:disabled) {
  background: var(--si-accent-hover);
}
.si-compare-tray-cta:disabled {
  opacity: .55;
  cursor: not-allowed;
}
/* v410: white-bg count badge on the in-bar CTA — matches the desktop
   collapsed pill's count badge for visual consistency. */
.si-compare-tray-cta-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .35rem;
  margin-left: .15rem;
  border-radius: 999px;
  background: #fff;
  color: var(--si-accent);
  font-size: .68rem;
  font-weight: 800;
}
.si-compare-tray-toast {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--si-accent);
  color: #fff;
  font-size: .82rem;
  padding: .55rem 1rem;
  border-radius: var(--si-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  white-space: nowrap;
}
.si-compare-tray-toast.is-visible {
  opacity: 1;
}
@keyframes siCompareTrayItemIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
@media (max-width: 575.98px) {
  .si-compare-tray { padding: .5rem .75rem; }
  .si-compare-tray-item { width: 48px; height: 48px; }
  .si-compare-tray-clear { font-size: .76rem; padding: .3rem .5rem; }
  .si-compare-tray-cta { font-size: .8rem; padding: .45rem .8rem; }
}

/* v394 iter3 / v409: chevron-down dismiss handle — top-center of the tray.
   Originally mobile-only; v409 enables it on desktop too (the compact
   bottom-right bar now auto-hides like mobile, leaving a collapsed pill). */
.si-compare-tray {
  padding-top: 1.5rem;
}
.si-compare-tray-dismiss {
  display: flex;
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 22px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--si-text-secondary);
  cursor: pointer;
  padding: 0;
  z-index: 1;
}
.si-compare-tray-dismiss .bi {
  font-size: 1.1rem;
  font-weight: 700;
  -webkit-text-stroke: .4px currentColor;
}
.si-compare-tray-dismiss:hover { color: var(--si-text); }
.si-compare-tray-dismiss:active { transform: translateX(-50%) scale(0.92); }

/* v409: desktop collapsed pill — shown bottom-right (left of #backToTop)
   when the compare bar is collapsed but products are still in compare.
   Click → reopens the full bar (persist). Desktop only. */
.si-compare-desktop-pill { display: none; }
@media (min-width: 992px) {
  .si-compare-desktop-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    position: fixed;
    bottom: 1.5rem;
    right: calc(1.5rem + 2.75rem + 10px);
    z-index: 1039;
    padding: .55rem .9rem;
    border: 1px solid var(--si-accent);
    border-radius: 999px;
    background: var(--si-accent);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(140,25,19,.3);
    transition: filter .12s, transform .12s;
  }
  .si-compare-desktop-pill:hover { filter: brightness(1.1); }
  .si-compare-desktop-pill:active { transform: scale(0.97); }
  .si-compare-desktop-pill[hidden] { display: none; }
  .si-compare-desktop-pill .bi { font-size: 1rem; }
  .si-compare-desktop-pill .si-compare-desktop-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #fff;
    color: var(--si-accent);
    font-size: .68rem;
    font-weight: 800;
  }
}

/* ── Compare page ── */
.si-compare-page { max-width: 1400px; }
.si-compare-wip {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1rem;
  background: linear-gradient(90deg, rgba(255,193,7,.10), rgba(255,193,7,.04));
  border: 1px solid rgba(255,193,7,.35);
  border-radius: var(--si-radius);
  margin-bottom: 1.5rem;
  color: var(--si-text);
}
.si-compare-wip i { font-size: 1.4rem; color: #c89200; flex: 0 0 auto; line-height: 1.2; }
[data-bs-theme="dark"] .si-compare-wip i { color: #f5b942; }
.si-compare-wip strong { font-weight: 700; }
.si-compare-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  color: var(--si-text);
}
.si-compare-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--si-text-muted);
}
.si-compare-empty i { font-size: 3rem; opacity: .35; display: block; margin-bottom: .75rem; }
.si-compare-empty-link {
  display: inline-block;
  margin-top: .75rem;
  color: var(--si-accent-text);
  text-decoration: none;
  font-weight: 600;
}
.si-compare-empty-link:hover { text-decoration: underline; }

.si-compare-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.si-compare-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.si-compare-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.si-compare-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.si-compare-grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767.98px) {
  .si-compare-grid[data-count="3"],
  .si-compare-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
  .si-compare-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

.si-compare-col {
  background: var(--si-surface);
  border: 1px solid var(--si-border-subtle);
  border-radius: var(--si-radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.si-compare-col-img {
  background: #fff;
  border: 1px solid var(--si-border-subtle);
  border-radius: var(--si-radius-xs);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: .75rem;
  overflow: hidden;
}
.si-compare-col-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.si-compare-col-title {
  font-size: .82rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--si-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 3);
}
.si-compare-col-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--si-accent-text);
}
.si-compare-col-stock {
  font-size: .76rem;
  color: var(--si-text-muted);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.si-compare-col-stock i { font-size: .55rem; }

.si-compare-table-wrap {
  border: 1px solid var(--si-border-subtle);
  border-radius: var(--si-radius);
  overflow: hidden;
  background: var(--si-surface);
}
.si-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  table-layout: fixed;
}
.si-compare-table tr + tr { border-top: 1px solid var(--si-border-subtle); }
.si-compare-table th,
.si-compare-table td {
  padding: .65rem .85rem;
  vertical-align: top;
  word-break: break-word;
}
.si-compare-table th {
  width: 200px;
  text-align: left;
  font-weight: 600;
  color: var(--si-text-muted);
  background: var(--si-bg);
  border-right: 1px solid var(--si-border-subtle);
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
}
.si-compare-table th i { color: var(--si-accent); font-size: .95rem; flex: 0 0 auto; }
.si-compare-table td {
  color: var(--si-text);
}
.si-compare-table tr.is-diff td { font-weight: 500; }
.si-compare-table tr.is-diff th { box-shadow: inset 3px 0 0 var(--si-accent); }
.si-compare-table tr.is-same td { color: var(--si-text-muted); }
@media (max-width: 575.98px) {
  .si-compare-table th { width: 130px; font-size: .72rem; padding: .5rem .55rem; }
  .si-compare-table td { font-size: .76rem; padding: .5rem .55rem; }
}
.si-compare-legend {
  font-size: .76rem;
  color: var(--si-text-muted);
  margin: .85rem 0 0;
  display: flex; align-items: center; gap: .85rem;
}
.si-compare-legend-dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: .35rem;
}
.si-compare-legend-dot.is-diff { background: var(--si-accent); }
.si-compare-legend-dot.is-same { background: var(--si-border); }
.si-compare-empty-specs {
  text-align: center;
  color: var(--si-text-muted);
  padding: 2rem 1rem;
}

/* Card badge */
.si-card-badge {
position: absolute;
top: .75rem;
left: .75rem;
padding: .22rem .6rem;
border-radius: var(--si-radius);
font-size: .64rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
line-height: 1.5;
}
.si-card-badge.sale {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #fff;
box-shadow: 0 2px 6px rgba(239,68,68,.3);
}
.si-card-badge.new {
background: linear-gradient(135deg, var(--si-accent) 0%, #B8221A 100%);
color: #fff;
box-shadow: 0 2px 6px rgba(140,25,19,.3);
}
.si-card-badge.top {
background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
color: #1a1d26;
box-shadow: 0 2px 6px rgba(234,179,8,.3);
}
.si-card-badge.stock-low {
background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
color: #fff;
box-shadow: 0 2px 6px rgba(239,68,68,.3);
}

/* Wishlist button */
.si-card-wishlist {
position: absolute;
top: .75rem;
right: .75rem;
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
background: var(--si-surface);
border: 1px solid var(--si-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--si-text-muted);
font-size: .85rem;
cursor: pointer;
transition: var(--si-transition);
box-shadow: var(--si-shadow-xs);
opacity: 0;
transform: scale(.85);
}
.si-product-card:hover .si-card-wishlist {
opacity: 1;
transform: scale(1);
}
.si-card-wishlist:hover {
color: var(--si-danger);
border-color: var(--si-danger);
background: var(--si-danger-soft);
}

/* Card body */
.si-card-body {
padding: 1rem 1.15rem .75rem;
flex: 1;
display: flex;
flex-direction: column;
}
.si-card-title {
/* Narrow system-font stack for product titles — fits more characters per
   line so long laptop names ("Laptop Asus VivoBook 15 OLED, AMD Ryzen 7
   5800H, 15.6inch FHD, RAM 16GB, SSD 512GB...") wrap less aggressively.
   Falls back to the default UI font when no condensed variant is available;
   the slight negative letter-spacing keeps the look premium even in fallback. */
font-family: 'Arial Narrow', 'Helvetica Neue Condensed', 'Avenir Next Condensed',
             'Liberation Sans Narrow', 'Nimbus Sans Narrow', 'Ubuntu Condensed',
             system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-stretch: condensed;
letter-spacing: -0.005em;
font-size: .9rem;
font-weight: 700;
color: var(--si-text);
margin-bottom: .65rem;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: -.01em;
text-decoration: none;
transition: color .12s;
}
a.si-card-title:hover { color: var(--si-accent); }
/* Image is a link to the product detail page; keep it a plain block. */
.si-card-img-link { display: block; }

/* Card specs */
.si-card-specs {
display: flex;
flex-wrap: wrap;
gap: .25rem;
margin-bottom: .65rem;
}
.si-spec-tag {
display: inline-flex;
align-items: center;
gap: .22rem;
padding: .2rem .45rem;
border-radius: var(--si-radius-xs);
font-size: .65rem;
font-weight: 500;
background: var(--si-badge-bg);
/* v390: light = pure black for max readability; dark gets a slight lift
   over --si-text-secondary (#9ba1b5) so the spec tags feel one step
   brighter than the count text. Highlight variant overrides below. */
color: #000;
line-height: 1.4;
letter-spacing: .005em;
}
[data-bs-theme="dark"] .si-spec-tag {
color: #c0c5d4;
}
.si-spec-tag i { font-size: .68rem; opacity: .45; }
/* Spec value matches an active filter selection — visual confirmation of
   why this card was returned. Theme-aware tokens: tag-soft bg (subtle on
   both themes), accent-text color (burgundy on light, coral lifted on dark
   for AA contrast). Icon opacity bumped to .7 for slightly stronger weight. */
.si-spec-tag.highlight {
background: var(--si-accent-tag-soft);
color: var(--si-accent-text);
}
.si-spec-tag.highlight i { opacity: .7; }

/* Card pricing */
.si-card-pricing {
margin-top: auto;
padding-top: .7rem;
border-top: 1px solid var(--si-border-subtle);
}
.si-price-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .15rem;
}
.si-price-current {
font-size: 1.25rem;
font-weight: 800;
color: var(--si-accent-text);
letter-spacing: -.025em;
line-height: 1.2;
}
.si-price-old {
font-size: .76rem;
color: var(--si-text-muted);
text-decoration: line-through;
margin-left: .3rem;
font-weight: 400;
}
.si-price-discount {
display: inline-flex;
align-items: center;
font-size: .65rem;
font-weight: 700;
color: var(--si-danger);
background: var(--si-danger-soft);
padding: .1rem .4rem;
border-radius: var(--si-radius-xs);
margin-left: .25rem;
letter-spacing: .02em;
}
.si-stock {
font-size: .7rem;
font-weight: 600;
margin-top: .3rem;
display: flex;
align-items: center;
gap: .3rem;
}
.si-stock i { font-size: .72rem; }
.si-stock.in-stock { color: var(--si-success); }
.si-stock.low-stock { color: var(--si-warning); }
.si-stock.out-of-stock { color: var(--si-danger); }
/* "Indisponibil momentan" — muted gray, NOT alarming red. Premium restraint:
   the product isn't available right now, but the message stays factual
   instead of shouting at the user. */
.si-stock.not-available { color: var(--si-text-muted); }

/* Card actions */
.si-card-actions {
display: flex;
gap: .4rem;
padding: .6rem 1.15rem 1rem;
}
.si-btn-cart {
flex: 1;
padding: .55rem .85rem;
border: none;
border-radius: var(--si-radius);
font-size: .76rem;
font-weight: 600;
font-family: var(--si-font);
background: var(--si-accent);
color: #fff;
cursor: pointer;
transition: var(--si-transition);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem;
letter-spacing: .01em;
box-shadow: 0 1px 3px rgba(140,25,19,.2);
}
.si-btn-cart:hover {
background: var(--si-accent-hover);
box-shadow: 0 4px 12px rgba(140,25,19,.3);
transform: translateY(-1px);
}
/* Stock-alert variant — same shape as .si-btn-cart but neutral grey.
   The product is unavailable so the CTA shouldn't compete with the
   accent burgundy of in-stock products. */
.si-btn-cart.si-btn-alert {
background: var(--si-btn-neutral-bg);
box-shadow: none;
}
.si-btn-cart.si-btn-alert:hover {
background: var(--si-btn-neutral-bg-hover);
box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.si-btn-icon {
width: 2.25rem;
height: 2.25rem;
border: 1px solid var(--si-border);
border-radius: var(--si-radius);
background: transparent;
color: var(--si-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .82rem;
cursor: pointer;
transition: var(--si-transition);
flex-shrink: 0;
}
.si-btn-icon:hover {
border-color: var(--si-accent);
color: var(--si-accent);
background: var(--si-accent-soft);
}

/* ===== COMPACT DENSITY =====
   Strange tighter pe TOATE elementele majore din card. Tranzitiile pe
   padding/margin/font-size dau efect de "morph" smooth cand toggle-ul
   se schimba. Functioneaza si in grid view, si in list view. */
.si-product-card,
.si-card-img-wrap,
.si-card-img-wrap img,
.si-card-body,
.si-card-title,
.si-card-specs,
.si-spec-tag,
.si-card-pricing {
transition:
  padding .25s cubic-bezier(.4,0,.2,1),
  margin .25s cubic-bezier(.4,0,.2,1),
  font-size .25s cubic-bezier(.4,0,.2,1),
  gap .25s cubic-bezier(.4,0,.2,1),
  min-height .25s cubic-bezier(.4,0,.2,1),
  max-height .25s cubic-bezier(.4,0,.2,1),
  border-color .2s, box-shadow .2s, transform .2s, color .2s, background .2s;
}
/* Grid tops out at 5 products per row (.si-col-xxl-5 = 20% from >= 1400px in
   app-new.css). The page is capped at 1720px, so 5-up holds on every desktop
   width; no wider override. */

/* ===== LIST VIEW ===== */
[data-mx-view="list"] .si-products-grid .col-sm-6,
[data-mx-view="list"] .si-products-grid .col-xl-4,
[data-mx-view="list"] .si-products-grid .col-xxl-3 {
flex: 0 0 100%;
max-width: 100%;
}
[data-mx-view="list"] .si-products-grid .si-product-card {
flex-direction: row;
}
[data-mx-view="list"] .si-products-grid .si-card-img-wrap {
width: 285px;
flex-shrink: 0;
}
[data-mx-view="list"] .si-products-grid .si-card-img-wrap::after { display: none; }
[data-mx-view="list"] .si-products-grid .si-card-body { padding: 1rem 1.25rem; }
[data-mx-view="list"] .si-products-grid .si-card-actions {
flex-direction: column;
justify-content: center;
padding: 1rem;
border-left: 1px solid var(--si-border-subtle);
min-width: 160px;
}
[data-mx-view="list"] .si-products-grid .si-btn-cart {
  width: 100%;
  /* In list view .si-card-actions becomes flex-direction:column, so the
     base `flex:1` would make the cart button stretch vertically to fill
     the available column height. Pin it to its natural height instead. */
  flex: 0 0 auto;
}
[data-mx-view="list"] .si-products-grid .si-btn-icon {
width: 100%;
height: auto;
padding: .45rem;
}

/* ===== SKELETON CARDS ===== */
@keyframes si-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.si-skeleton {
background: linear-gradient(90deg, var(--si-skeleton-base) 25%, var(--si-skeleton-shine) 50%, var(--si-skeleton-base) 75%);
background-size: 200% 100%;
animation: si-shimmer 1.8s ease-in-out infinite;
border-radius: var(--si-radius-xs);
}
.si-skeleton-card {
background: var(--si-surface);
border: 1px solid var(--si-border);
border-radius: var(--si-radius-xl);
overflow: hidden;
}
.si-skeleton-card .si-skel-img {
width: 100%;
height: 190px;
}
.si-skeleton-card .si-skel-body { padding: 1rem 1.15rem; }
.si-skeleton-card .si-skel-brand {
width: 35%;
height: .55rem;
margin-bottom: .55rem;
}
.si-skeleton-card .si-skel-title {
width: 80%;
height: .7rem;
margin-bottom: .45rem;
}
.si-skeleton-card .si-skel-title-2 {
width: 55%;
height: .7rem;
margin-bottom: .75rem;
}
.si-skeleton-card .si-skel-specs {
display: flex;
flex-wrap: wrap;
gap: .25rem;
margin-bottom: .75rem;
}
.si-skeleton-card .si-skel-spec {
width: 5.5rem;
height: 1.2rem;
border-radius: var(--si-radius-xs);
}
.si-skeleton-card .si-skel-price {
width: 40%;
height: 1.1rem;
margin-top: .75rem;
border-top: 1px solid var(--si-border-subtle);
padding-top: .7rem;
}
.si-skeleton-card .si-skel-actions {
padding: .6rem 1.15rem 1rem;
display: flex;
gap: .4rem;
}
.si-skeleton-card .si-skel-btn {
flex: 1;
height: 2.25rem;
border-radius: var(--si-radius);
}
.si-skeleton-card .si-skel-btn-sm {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--si-radius);
flex-shrink: 0;
}

/* Skeleton pe LIST VIEW — replica forma .si-product-card in row */
[data-mx-view="list"] .si-skeleton-card {
flex-direction: row;
}
[data-mx-view="list"] .si-skeleton-card .si-skel-img {
width: 220px;
height: auto;
min-height: 200px;
flex: 0 0 auto;
}
[data-mx-view="list"] .si-skeleton-card .si-skel-body {
flex: 1 1 auto;
padding: 1rem 1.25rem;
}
[data-mx-view="list"] .si-skeleton-card .si-skel-actions {
flex-direction: column;
border-left: 1px solid var(--si-border-subtle);
padding: 1rem;
flex: 0 0 auto;
min-width: 12rem;
gap: .5rem;
}
[data-mx-view="list"] .si-skeleton-card .si-skel-btn { width: 100%; height: 2.25rem; }
[data-mx-view="list"] .si-skeleton-card .si-skel-btn-sm { width: 100%; height: 2.25rem; }
/* Card actions on list view sunt sub body pe layout-ul flex; le pun ca sibling al body in skeleton */
[data-mx-view="list"] .si-skeleton-card { display: flex; }

/* ===== EMPTY STATE ===== */
.si-empty-state {
text-align: center;
padding: 4rem 2rem;
background: var(--si-surface);
border: 1px solid var(--si-border);
border-radius: var(--si-radius-xl);
box-shadow: var(--si-shadow-xs);
}
.si-empty-state-icon {
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
background: var(--si-accent-soft);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
}
.si-empty-state-icon i {
font-size: 1.8rem;
color: var(--si-accent);
opacity: .7;
}
.si-empty-state h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--si-text);
margin-bottom: .4rem;
}
.si-empty-state p {
font-size: .82rem;
color: var(--si-text-muted);
max-width: 380px;
margin: 0 auto .85rem;
line-height: 1.6;
}
.si-empty-state .si-reset-btn {
padding: .5rem 1.25rem;
border: 1px solid var(--si-border);
border-radius: var(--si-radius);
font-size: .78rem;
font-weight: 600;
font-family: var(--si-font);
background: var(--si-surface);
color: var(--si-text-secondary);
cursor: pointer;
transition: var(--si-transition);
display: inline-flex;
align-items: center;
gap: .35rem;
}
.si-empty-state .si-reset-btn:hover {
border-color: var(--si-accent);
color: var(--si-accent);
}

/* ===== COMPARE BAR ===== */
.si-compare-bar {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--si-compare-bg);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid var(--si-border);
box-shadow: var(--si-shadow-xl);
padding: .75rem 0;
z-index: 1050;
}
.si-compare-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.si-compare-items {
display: flex;
gap: .55rem;
align-items: center;
}
.si-compare-label {
font-size: .75rem;
color: var(--si-text);
white-space: nowrap;
font-weight: 700;
letter-spacing: -.01em;
display: flex;
align-items: center;
gap: .4rem;
}
.si-compare-label .badge-count {
font-size: .62rem;
font-weight: 700;
background: var(--si-accent);
color: #fff;
padding: .15rem .4rem;
border-radius: var(--si-radius-pill);
}
.si-compare-item {
display: flex;
align-items: center;
gap: .45rem;
padding: .35rem .65rem;
background: var(--si-badge-bg);
border: 1px solid var(--si-border);
border-radius: var(--si-radius);
transition: var(--si-transition);
}
.si-compare-item:hover { border-color: var(--si-accent); }
.si-compare-item img {
width: 28px;
height: 28px;
object-fit: contain;
}
.si-compare-item span {
font-size: .72rem;
font-weight: 500;
color: var(--si-text-secondary);
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.si-compare-item .bi-x-lg {
cursor: pointer;
color: var(--si-text-muted);
font-size: .6rem;
transition: var(--si-transition);
padding: .2rem;
border-radius: 50%;
}
.si-compare-item .bi-x-lg:hover {
color: var(--si-danger);
background: var(--si-danger-soft);
}
.si-compare-slot-empty {
width: 155px;
height: 40px;
border: 1.5px dashed var(--si-border);
border-radius: var(--si-radius);
display: flex;
align-items: center;
justify-content: center;
font-size: .68rem;
color: var(--si-text-muted);
font-weight: 500;
transition: var(--si-transition);
cursor: pointer;
}
.si-compare-slot-empty:hover {
border-color: var(--si-accent);
color: var(--si-accent);
background: var(--si-accent-soft);
}
.si-compare-actions {
display: flex;
gap: .45rem;
align-items: center;
}
.si-btn-compare {
padding: .5rem 1.35rem;
border: none;
border-radius: var(--si-radius);
font-size: .78rem;
font-weight: 600;
font-family: var(--si-font);
background: var(--si-accent);
color: #fff;
cursor: pointer;
transition: var(--si-transition);
box-shadow: 0 2px 6px rgba(140,25,19,.25);
display: inline-flex;
align-items: center;
gap: .35rem;
letter-spacing: .01em;
}
.si-btn-compare:hover {
background: var(--si-accent-hover);
box-shadow: 0 4px 12px rgba(140,25,19,.35);
}
.si-btn-compare-clear {
padding: .5rem .85rem;
border: 1px solid var(--si-border);
border-radius: var(--si-radius);
font-size: .76rem;
font-weight: 500;
font-family: var(--si-font);
background: transparent;
color: var(--si-text-secondary);
cursor: pointer;
transition: var(--si-transition);
}
.si-btn-compare-clear:hover {
border-color: var(--si-danger);
color: var(--si-danger);
}

/* ===== PAGINATION ===== */
.si-pagination {
padding: 2.5rem 0 5rem;
display: flex;
justify-content: center;
}
.si-pagination .page-link {
border: 1px solid var(--si-border);
color: var(--si-text-secondary);
font-size: .78rem;
font-weight: 500;
padding: .42rem .78rem;
border-radius: var(--si-radius) !important;
margin: 0 .15rem;
background: var(--si-surface);
transition: var(--si-transition);
font-family: var(--si-font);
}
.si-pagination .page-link:hover {
background: var(--si-accent-soft);
border-color: var(--si-accent);
color: var(--si-accent);
}
.si-pagination .page-item.active .page-link {
background: var(--si-accent);
border-color: var(--si-accent);
color: #fff;
box-shadow: 0 2px 6px rgba(140,25,19,.3);
}
.si-pagination .page-item.disabled .page-link { opacity: .4; }

/* ===== OFFCANVAS (Mobile Filters) ===== */
.si-offcanvas {
max-width: 320px;
background: var(--si-sidebar-bg);
border-right: 1px solid var(--si-border);
}
.si-offcanvas .offcanvas-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--si-border);
}
.si-offcanvas .offcanvas-title {
font-size: .82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--si-text);
}
.si-offcanvas .btn-close {
font-size: .65rem;
opacity: .5;
}
[data-bs-theme="dark"] .si-offcanvas .btn-close {
filter: invert(1);
}
.si-offcanvas .offcanvas-body {
padding: 0;
}
.si-offcanvas .offcanvas-footer {
padding: .85rem 1.25rem;
border-top: 1px solid var(--si-border);
display: flex;
gap: .45rem;
}
.si-offcanvas .offcanvas-footer .si-apply-btn {
flex: 1;
padding: .6rem;
border: none;
border-radius: var(--si-radius);
font-size: .8rem;
font-weight: 600;
font-family: var(--si-font);
background: var(--si-accent);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: .3rem;
}
.si-offcanvas .offcanvas-footer .si-reset-btn-sm {
padding: .6rem .85rem;
border: 1px solid var(--si-border);
border-radius: var(--si-radius);
font-size: .78rem;
font-weight: 500;
font-family: var(--si-font);
background: transparent;
color: var(--si-text-secondary);
cursor: pointer;
}

/* ===== MOBILE FILTER BUTTON ===== */
.si-mobile-filter-btn {
display: none;
width: 100%;
padding: .7rem 1rem;
border: 1px solid var(--si-border);
border-radius: var(--si-radius-xl);
background: var(--si-surface);
color: var(--si-text);
font-size: .82rem;
font-weight: 600;
font-family: var(--si-font);
cursor: pointer;
margin-bottom: .75rem;
align-items: center;
justify-content: center;
gap: .45rem;
box-shadow: var(--si-shadow-xs);
transition: var(--si-transition);
}
.si-mobile-filter-btn:hover {
border-color: var(--si-accent);
color: var(--si-accent);
}
.si-mobile-filter-btn .si-badge-num {
font-size: .62rem;
font-weight: 700;
background: var(--si-accent);
color: #fff;
padding: .1rem .4rem;
border-radius: var(--si-radius-pill);
}

/* ===== RESPONSIVE ===== */
/* Rebalansare sidebar vs grid produse la rezoluții mari */
@media (min-width: 1400px) {
.si-sidebar-col {
    flex: 0 0 auto;
    width: 19%;
}
.si-products-col {
    flex: 0 0 auto;
    width: 81%;
}
}
@media (min-width: 1700px) {
.si-sidebar-col {
    width: 17%;
}
.si-products-col {
    width: 83%;
}
}
@media (max-width: 991.98px) {
.si-sidebar-col { display: none; }
.si-mobile-filter-btn { display: inline-flex; }
.si-category-header h1 { font-size: 1.65rem; }
.si-compare-bar { display: none; }
.si-active-filters { display: none; }
[data-mx-view="list"] .si-products-grid .si-product-card { flex-direction: column; }
[data-mx-view="list"] .si-products-grid .si-card-img-wrap {
    width: 100%;
}
[data-mx-view="list"] .si-products-grid .si-card-actions {
    flex-direction: row;
    border-left: none;
    min-width: 0;
    border-top: 1px solid var(--si-border-subtle);
}
}
@media (max-width: 575.98px) {
.si-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: .55rem .85rem;
}
.si-toolbar-left, .si-toolbar-right { justify-content: space-between; }
.si-toolbar-divider { display: none; }
.si-trust-bar .row > div + div { margin-top: .5rem; }
.si-category-header h1 { font-size: 1.4rem; }
.si-quick-filters { gap: .35rem; }
.si-chip { padding: .35rem .7rem; font-size: .72rem; }
.si-active-filters-label { display: none; }
/* Hide per-page selector on phones — fits awkwardly in the sortbar
   and 12/page default is fine for mobile. localStorage value (if any
   carried over from desktop) still applies; just no UI to change here. */
#perPageSelect { display: none; }

/* Hide grid/list toggle on phones — industry standard (Amazon, ASOS,
   Apple, Zalando, etc. all skip it on mobile). On <=575px the single
   column already IS a list visually; the toggle's flex-direction
   override is a no-op since cards stack vertically regardless. Toggle
   reappears at >=576px (tablet up) where the distinction is meaningful. */
.si-view-toggle { display: none; }
}

/* ── Scrollbars ──────────────────────────────────────────────────────────────
   Firefox on Linux uses GTK overlay scrollbars by default — they expand on
   hover and turn the OS accent color (blue) when dragged. Our overrides:
     scrollbar-width: thin   → no more hover-expand
     scrollbar-color         → forces our colors instead of OS blue
   Hover state stays the same as resting (per design); only when the user is
   actively pressing the thumb (mouse-down → drag → release) does the thumb
   flash burgundy, then return to neutral gray on release.
   `*` is fine here — these properties are no-ops on non-scroll elements. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--si-text-muted) transparent;
}
/* NOTE: a previous *:active rule that switched scrollbar-color to burgundy
   during drag was dropped — `:active` matches every ancestor of any clicked
   element, so clicking a facet button or checkbox briefly recoloured ALL
   scrollbars on the page (the "orange flash"). The win wasn't worth the
   distraction. The drag color stays muted gray on Firefox/Chrome 121+; on
   Chrome we still get a true scrollbar-only burgundy via the webkit-specific
   `::-webkit-scrollbar-thumb:active` rule below, which targets the thumb
   element directly and never fires for content clicks. */

/* Chrome/Edge/Safari (WebKit/Blink) — same visual as Firefox `scrollbar-width:
   thin`. Default width on these browsers is ~12-15px (chunky); we bring it
   down to 4px so vertical and horizontal tracks read as a slim guideline
   rather than a UI element. The sidebar keeps its even slimmer 3px override.
   Hover stays the same as resting; only the pressed/dragging thumb shifts to
   brand color. */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--si-text-muted);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:active { background: var(--si-accent); }

.si-sidebar::-webkit-scrollbar { width: 3px; }

/* Selection color */
::selection {
background: rgba(140,25,19,.15);
color: inherit;
}

/* ===== BACK TO TOP =====
   Buton circular fixat in dreapta jos, apare cand userul a scrollat peste prag.
   Glass-morphism in repaus (blur + bg semi-transparent), accent solid cu glow
   la hover. Pe AJAX swap, butonul traieste in afara #ajax-root deci starea
   este pastrata. JS adauga .is-visible cand window.scrollY > 400px. */
/* v391: hidden on mobile — the new mobile UX has its own sticky top bar
   that's always visible, and the bottom sticky filter button already
   competes for that bottom-right corner real estate. */
@media (max-width: 991.98px) {
  #backToTop { display: none !important; }
}
#backToTop {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
border: 1px solid var(--si-border);
background: color-mix(in srgb, var(--si-bg) 78%, transparent);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
color: var(--si-accent);
font-size: 1.05rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1040;
box-shadow: var(--si-shadow-lg);
opacity: 0;
transform: translateY(.65rem) scale(.92);
pointer-events: none;
transition:
  opacity .25s cubic-bezier(.4,0,.2,1),
  transform .25s cubic-bezier(.4,0,.2,1),
  background-color .2s ease,
  color .2s ease,
  border-color .2s ease,
  box-shadow .2s ease;
}
#backToTop.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
#backToTop:hover {
background: var(--si-accent);
color: #fff;
border-color: var(--si-accent);
box-shadow:
  0 14px 32px rgba(140,25,19,.38),
  0 4px 10px rgba(140,25,19,.22);
transform: translateY(-2px) scale(1.04);
}
#backToTop:active {
transform: translateY(0) scale(.98);
transition-duration: .08s;
}
#backToTop:focus-visible {
outline: none;
box-shadow:
  0 0 0 3px var(--si-accent-soft),
  var(--si-shadow-lg);
}
[data-bs-theme="dark"] #backToTop {
background: color-mix(in srgb, var(--si-bg) 70%, transparent);
}
[data-bs-theme="dark"] #backToTop:hover {
box-shadow:
  0 14px 32px rgba(140,25,19,.45),
  0 4px 10px rgba(0,0,0,.35);
}
@media (max-width: 575px) {
#backToTop {
  bottom: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: .95rem;
}
}
@media (prefers-reduced-motion: reduce) {
#backToTop,
#backToTop:hover,
#backToTop:active {
  transform: none;
  transition: opacity .2s linear;
}
}

/* ── Parent-child filter groups ── */
/* Override .si-filter-option flex so label + children stack vertically.
   Position-relative so the chevron toggle (now a sibling of the label)
   anchors to the parent box rather than the row. */
.si-filter-parent { display: block; padding: 0; position: relative; }
.si-filter-parent .si-filter-parent-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .32rem .4rem;
  margin: 0;
  font-size: .78rem;
  font-weight: 500;
  color: var(--si-text);
  cursor: pointer;
}
.si-filter-parent .si-filter-text { flex: 1 1 auto; min-width: 0; }
.si-filter-parent .si-filter-count-parent {
  font-size: .65rem;
  color: var(--si-text-muted);
  font-weight: 500;
  background: var(--si-badge-bg);
  padding: .1rem .4rem;
  border-radius: var(--si-radius-pill);
  min-width: 1.6rem;
  text-align: center;
  line-height: 1.5;
}
[data-bs-theme="dark"] .si-filter-parent .si-filter-count-parent {
  color: var(--si-text-secondary);
}
/* Pin the toggle close to the count pill — sits in the gap between count and scrollbar.
   The toggle is a sibling of the label (so clicking the row doesn't fire
   the chevron). To keep it vertically aligned with the count pill instead of
   drifting toward the bottom of the wrapper as children expand, we anchor it
   to the row's content area: row padding-top (.32rem) + half the line height
   minus half the icon height. */
.si-filter-parent-toggle {
  position: absolute;
  right: -7px;
  top: .47rem;
  height: .9rem;
  width: 1rem;
  line-height: 1;
  border: 0;
  background: transparent;
  /* Same color as the facet label (--si-text) so the chevron reads as a
     companion to the text rather than a louder secondary signal. Theme-
     aware automatically (no dark override needed). */
  color: var(--si-text);
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, transform .15s ease;
  z-index: 1;
}
.si-filter-parent-toggle .bi {
  font-size: 1rem;
  line-height: 1;
  font-weight: 900;
  /* Icon fonts ignore font-weight; thicken via text-stroke for a bolder look. */
  -webkit-text-stroke: .65px currentColor;
}
.si-filter-parent-toggle:hover { transform: scale(1.15); }

/* The wrapper itself must NOT receive the generic .si-filter-option:hover background,
   otherwise hovering the parent label tints the entire children area too. */
.si-filter-parent:hover { background: transparent; }
.si-filter-parent .si-filter-parent-row:hover {
  background: var(--si-filter-hover-bg);
  border-radius: var(--si-radius-xs);
}

/* Children container: indent + slim left border for visual nesting. */
.si-filter-children {
  margin-left: 1.1rem;
  padding-left: .4rem;
  border-left: 1px dashed var(--si-accent-rail);
}
.si-filter-children[hidden] { display: none; }
/* Tightened vertical padding for children — keeps the rhythm consistent with
   the new compact .si-filter-option spacing. */
.si-filter-child {
  padding-top: .22rem;
  padding-bottom: .22rem;
  margin-right: 0;
}

/* ===== Home stub — "Pagina in lucru". Restraint over decoration:
   - eyebrow letter-spacing for brand identity, not loud
   - title in fluid clamp() so it scales without breakpoints
   - subtle burgundy rail underneath, theme-aware via --si-accent-rail
   - vertical centering uses min-height referenced to viewport minus the
     header/footer band so it feels balanced on every screen size */
.si-home-stub {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Header + breadcrumb + footer band ~ 260px; offsets keeps the stub
     visually centered in the remaining viewport. */
  min-height: calc(100vh - 260px);
  padding: 3.5rem 0;
}
.si-home-stub-inner {
  text-align: center;
  max-width: 32rem;
  margin: 0 auto;
}
.si-home-stub-eyebrow {
  display: inline-block;
  color: var(--si-accent-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.si-home-stub-title {
  color: var(--si-text);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 .9rem;
}
.si-home-stub-sub {
  color: var(--si-text-muted);
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 2rem;
}
.si-home-stub-rule {
  width: 2.5rem;
  height: 2px;
  background: var(--si-accent-rail);
  margin: 0 auto;
  border-radius: 1px;
}

/* ============================================================
   v326 Iter 1: Mobile sticky bottom bar
   Visible only sub `lg` (< 992px). Replaces the in-toolbar mobile
   filter button + the toolbar's sort segmented chips on mobile.
   ============================================================ */
.mxnew-mobile-stickybar {
  display: none;
}
@media (max-width: 991.98px) {
  /* Hide old mobile UI — replaced by sticky bar */
  .si-mobile-filter-btn { display: none !important; }
  .si-toolbar { display: none !important; }
  .si-results-count { display: none !important; }

  /* Show sticky bar.
     v379 iter4: holds Filtre (stretches) + optional Compară pill (right).
     v393 iter2: switched grid → flex so the pill can show/hide cleanly
     and Filtre flex-grows to fill remaining space when the pill is hidden. */
  .mxnew-mobile-stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    gap: .5rem;
    background: var(--si-surface);
    border-top: 1px solid var(--si-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    padding: .5rem .65rem env(safe-area-inset-bottom);
  }
  .mxnew-mobile-stickybar .mxnew-msb-btn {
    flex: 1 1 auto;
  }
  /* v396: top-only rounded corners on bottom-bar buttons — premium tab
     look. Top-left + top-right rounded, bottom corners square so the bar
     reads as a strip with tabs anchored to its top edge. */
  .mxnew-mobile-stickybar {
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mxnew-mobile-stickybar .mxnew-msb-btn,
  .mxnew-mobile-stickybar .mxnew-msb-compare {
    border-radius: .85rem .85rem 0 0;
    /* v397: tighter vertical — both buttons feel less chunky. */
    padding-top: .45rem;
    padding-bottom: .45rem;
  }
  /* v393 iter2: Compară (N) pill — burgundy accent like the desktop CTA;
     hidden by default, JS reveals when compared.size > 0. */
  .mxnew-msb-compare {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .85rem;
    border: 1px solid var(--si-accent);
    border-radius: .65rem;
    background: var(--si-accent);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, transform .12s, box-shadow .12s;
  }
  .mxnew-msb-compare:hover { filter: brightness(1.1); }
  .mxnew-msb-compare:active { transform: scale(0.97); }
  .mxnew-msb-compare .bi { font-size: 1rem; }
  .mxnew-msb-compare .mxnew-msb-cmp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #fff;
    color: var(--si-accent);
    font-size: .68rem;
    font-weight: 800;
  }
  /* Padding bottom on body so content doesn't get hidden under sticky bar */
  body { padding-bottom: 60px; }

  /* v326 Iter 8: hide perPageSelect on mobile (fixed 24 per page) */
  #perPageSelect, .si-perpage-wrap { display: none !important; }

  /* Mobile pagination: hide middle numeric page items; keep only
     prev (first .page-item), the synthesized "N din M" pill, and next (last). */
  .si-pagination .pagination > .page-item {
    display: none;
  }
  .si-pagination .pagination > .page-item:first-child,
  .si-pagination .pagination > .page-item:last-child,
  .si-pagination .pagination > .page-item.mxnew-mobile-pageinfo {
    display: list-item;
  }
  .si-pagination .pagination {
    gap: .4rem;
  }
  .si-pagination .pagination > .page-item .page-link {
    border-radius: .55rem !important;
    min-width: 2.4rem;
    text-align: center;
    font-weight: 600;
  }
  .si-pagination .pagination > .page-item.mxnew-mobile-pageinfo .page-link {
    background: var(--si-accent-soft);
    color: var(--si-accent);
    border-color: transparent;
    cursor: default;
    pointer-events: none;
    min-width: 5.5rem;
  }
}
/* On lg+ desktop, hide the mobile-only "N din M" pill */
@media (min-width: 992px) {
  .si-pagination .pagination > .page-item.mxnew-mobile-pageinfo { display: none; }
}
.mxnew-msb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--si-text);
  font-size: .85rem;
  font-weight: 600;
  padding: .55rem .25rem;
  border-radius: var(--si-radius-md);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.mxnew-msb-btn:hover {
  background: var(--si-accent-soft);
  color: var(--si-accent);
}
.mxnew-msb-btn.is-active {
  background: var(--si-accent-soft);
  color: var(--si-accent);
}
.mxnew-msb-btn .bi {
  font-size: 1.05rem;
}
.mxnew-msb-btn.js-mxnew-msb-filters {
  font-weight: 700;
  background: var(--si-accent);
  color: var(--si-on-accent, #fff);
  border-color: var(--si-accent);
}
.mxnew-msb-btn.js-mxnew-msb-filters:hover {
  background: var(--si-accent);
  filter: brightness(1.1);
}
.mxnew-msb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .35rem;
  border-radius: 999px;
  /* v397: white circle + burgundy text — same style as the Compara pill
     count, for visual consistency. 1px burgundy border so it stays
     visible against the white bar surface on light theme. */
  background: #fff;
  color: var(--si-accent);
  border: 1px solid var(--si-accent);
  font-size: .68rem;
  font-weight: 800;
  margin-left: .15rem;
}
[data-bs-theme="dark"] .mxnew-mobile-stickybar {
  background: var(--si-surface);
}

/* ============================================================
   v326 Iter 2: Mobile bottom sheet + master-detail layout
   ============================================================ */
.mxnew-sheet {
  height: 85vh !important;
  border-top-left-radius: var(--si-radius-xl);
  border-top-right-radius: var(--si-radius-xl);
  /* v339: solid two-tone — master column = elevated bg (slight tint),
     detail column = surface (white / dark-surface). Active master item
     uses surface too, so it visually merges with the detail area. */
  background: var(--si-bg-elevated);
  display: flex;
  flex-direction: column;
  transition: height .22s cubic-bezier(.25,.1,.25,1);
}
/* v340: full-screen expanded state (toggled by swipe-up gesture). */
.mxnew-sheet.is-expanded-full {
  height: 100vh !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.mxnew-sheet-grip {
  display: flex;
  justify-content: center;
  padding: .4rem 0 .15rem;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.mxnew-sheet-grip:active { cursor: grabbing; }
.mxnew-sheet-grip > span {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--si-border);
  opacity: .6;
  pointer-events: none;
}
.mxnew-sheet-header {
  padding: .55rem 1rem .55rem 1rem;
  border-bottom: 1px solid var(--si-border-subtle);
  align-items: center;
  touch-action: pan-y;
  user-select: none;
}
.mxnew-sheet-title {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}
.mxnew-sheet-headerbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .4rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: var(--si-accent);
  color: var(--si-on-accent, #fff);
  font-size: .72rem;
  font-weight: 700;
}
.mxnew-sheet-chips {
  /* v364: hidden — chip pills in the sheet header were redundant with the
     selected values already visible in the detail column. Both themes. */
  display: none !important;
}

/* v375: on mobile (< lg) hide the marketing/discovery sections that don't
   fit phone screens — category banner, trust bar, decorative quick filter
   chips. Catalog goes straight to filters + product grid. Desktop intact.
   v400: also hide the global-header compare icon — the bottom-bar pill
   already shows "Compară (N)" prominently. */
@media (max-width: 991.98px) {
  .si-category-header,
  .si-trust-bar,
  .si-quick-filters,
  #mxHeaderCompare {
    display: none !important;
  }
  /* v381 iter6: mobile view-mode column widths. Default (list) = 1 card per
     row across all of < lg; .mxnew-mobile-grid-2col flips to 2 cards/row.
     The base .col-sm-6 rule kicks in at >=576px → we force-override here. */
  #mxnew-products > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #mxnew-products.mxnew-mobile-grid-2col > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* v382: trim container padding + card chrome on mobile so the product
     image fills more of the card (was 30px image-wrap padding eating ~60px
     of a 183px grid card → image only ~123px wide). New ratios:
       - container side padding 16px → 8px
       - image wrap padding 30px → 8px
       - image inner white frame 7px → 3px
       - card body side padding 1.15rem → .55rem */
  #mxnew-root.container-fluid {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  #mxnew-products .si-card-img-wrap {
    padding: 8px;
  }
  #mxnew-products .si-card-img-wrap img {
    padding: 3px;
  }
  #mxnew-products .si-card-body {
    padding: .65rem .55rem .5rem;
  }
  /* v384: shorten stock text on mobile — "În stoc furnizor — livrare 1-2
     zile" becomes just "În stoc furnizor". Suffix hidden via CSS so the
     server template + JS render share one source string. */
  #mxnew-products .si-stock-suffix {
    display: none;
  }
  /* v384: stretch action buttons further left/right + tighter inner padding
     so "Setează alertă stoc" fits on one line in grid 2-col mode. */
  #mxnew-products .si-card-actions {
    padding-left: .35rem;
    padding-right: .35rem;
    gap: .25rem;
  }
  #mxnew-products .si-btn-cart {
    padding-left: .35rem;
    padding-right: .35rem;
  }
}

/* v376: mobile-only H1 container — rendered server-side under breadcrumb
   only on phone UAs. Hidden on lg+ (covers the rare case of a desktop
   UA resized to mobile width — H1 already lives in the banner there). */
.si-mobile-pagetitle {
  display: none;
}
@media (max-width: 991.98px) {
  .si-mobile-pagetitle {
    display: block;
    padding: .55rem 0 .35rem;
  }
  .si-mobile-pagetitle h1 {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.2;
    color: var(--si-text);
  }
}

/* v377 iter2: top sticky bar under the H1 — will hold total count, price
   sort, list/grid toggle in later iters. Sticks below the global topbar
   via --mxnew-topbar-h (JS measures the topbar height on init/resize). */
.mxnew-mobile-topbar {
  display: none;
}
@media (max-width: 991.98px) {
  .mxnew-mobile-topbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: sticky;
    top: var(--mxnew-topbar-h, 56px);
    z-index: 1035;
    background: var(--si-bg-elevated);
    border-bottom: 1px solid var(--si-border-subtle);
    padding: .55rem .75rem;
    min-height: 48px;
  }
  /* v378 iter3: total count cell on the left of the bar */
  .mxnew-mobile-count {
    flex: 0 0 auto;
    font-size: .9rem;
    color: var(--si-text);
    font-variant-numeric: tabular-nums;
  }
  .mxnew-mobile-count strong {
    font-weight: 800;
    color: var(--si-text);
  }
  /* v379 iter4: actions cluster on the right (sort + grid toggle in iter 5).
     margin-left:auto pushes the group to the far right. */
  .mxnew-mobile-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .35rem;
  }
  .mxnew-mtb-btn {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .2rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--si-border);
    border-radius: 999px;
    color: var(--si-text-secondary);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .mxnew-mtb-btn:hover { background: var(--si-surface-hover); }
  /* v388: active = burgundy bg + white text on BOTH themes (was soft bg +
     accent-text color). Stronger visual cue, matches desktop CTA pattern. */
  .mxnew-mtb-btn.is-active {
    border-color: var(--si-accent);
    background: var(--si-accent);
    color: #fff;
  }
  .mxnew-mtb-btn .bi { font-size: .82rem; }
  /* v383: segmented group for the sort buttons — single outer border, split
     divider between children. Mirrors the list/grid .mxnew-mvt look. */
  .mxnew-mtb-group {
    display: inline-flex;
    border: 1px solid var(--si-border);
    border-radius: 999px;
    overflow: hidden;
  }
  .mxnew-mtb-group .mxnew-mtb-btn {
    border: none;
    border-radius: 0;
  }
  .mxnew-mtb-group .mxnew-mtb-btn + .mxnew-mtb-btn {
    border-left: 1px solid var(--si-border);
  }
  /* v380 iter5: segmented list/grid view toggle. Same outer style as the
     sort pill (rounded border, accent on active) but with split children. */
  .mxnew-mvt {
    display: inline-flex;
    border: 1px solid var(--si-border);
    border-radius: 999px;
    overflow: hidden;
    margin-left: .1rem;
  }
  .mxnew-mvt-btn {
    background: transparent;
    border: none;
    padding: .2rem .45rem;
    color: var(--si-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background .12s, color .12s;
  }
  .mxnew-mvt-btn + .mxnew-mvt-btn {
    border-left: 1px solid var(--si-border);
  }
  /* v388: active = burgundy bg + white text on both themes (same as sort) */
  .mxnew-mvt-btn.is-active {
    background: var(--si-accent);
    color: #fff;
  }
  .mxnew-mvt-btn .bi { font-size: .9rem; }
}

/* Master-detail body */
.mxnew-sheet-body {
  flex: 1;
  display: grid;
  /* v343/v352: shave master column to give value labels more room.
     v343 was -20px; v352 cuts another ~15px after real-phone testing. */
  grid-template-columns: calc(38% - 35px) calc(62% + 35px);
  padding: 0;
  overflow: hidden;
  min-height: 0;
}
.mxnew-sheet-master {
  /* v339: no border — color contrast (elevated vs surface) is the
     separator. Active item bg = surface, merges with detail column.
     v347: padding 0 — sticky active item must reach the exact top/bottom
     of the panel so scrolled rows don't leak above/below the white bg. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.mxnew-sheet-detail {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  /* v339: surface (pure white in light, darker surface in dark) — pairs
     with master column (elevated bg). Active master item shares this bg. */
  background: var(--si-surface);
}

/* Footer */
.mxnew-sheet-footer {
  padding: .65rem 1rem env(safe-area-inset-bottom);
  border-top: 1px solid var(--si-border-subtle);
  display: flex;
  gap: .5rem;
  align-items: center;
  background: var(--si-surface);
}
.mxnew-sheet-reset {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--si-border);
  color: var(--si-text);
  padding: .55rem .8rem;
  border-radius: var(--si-radius-md);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.mxnew-sheet-reset:hover { background: var(--si-accent-soft); color: var(--si-accent); }
.mxnew-sheet-apply {
  flex: 1;
  background: var(--si-accent);
  color: var(--si-on-accent, #fff);
  border: none;
  padding: .7rem 1rem;
  border-radius: var(--si-radius-md);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.mxnew-sheet-apply:hover { filter: brightness(1.05); }

/* MASTER column rows */
.mxnew-master-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .85rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  color: var(--si-text);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.25;
  user-select: none;
  position: relative;
  transition: background .15s ease;
}
.mxnew-master-item:hover { background: var(--si-surface-hover); }
/* v339: active facet bg matches detail column (--si-surface) — visually
   "extends" into the right column. Burgundy border-left keeps the accent.
   v343: sticky-top so the active facet stays pinned when scrolling the
   master column — never lose sight of which facet you're inside. */
.mxnew-master-item.is-active {
  /* v364: switch to --si-accent-text so dark mode gets the coral lift
     (#d97870) — pure burgundy was washing out on the dark surface. Light
     mode is unchanged (token resolves to --si-accent there). */
  border-left-color: var(--si-accent-text);
  background: var(--si-surface);
  color: var(--si-accent-text);
  position: sticky;
  top: 0;
  bottom: 0;
  z-index: 2;
}
.mxnew-master-item-label {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  min-width: 0;
}
.mxnew-master-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--si-accent);
  color: var(--si-on-accent, #fff);
  font-size: .68rem;
  font-weight: 700;
}
/* v355/v356: tiny accent dot indicator — replaces numeric badge on mobile.
   Pure visual cue: "this facet has selections". Count still visible in chip
   strip + Apply button total. Uses accent-text token for theme parity
   (burgundy on light, coral on dark).
   v356: absolutely positioned at max-right + vertical center — never
   competes with label for space; long labels can wrap to 2 lines freely. */
.mxnew-master-item-dot {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--si-accent-text);
}

/* GROUP header (master, iter 3) */
.mxnew-master-group {
  padding: 0;
}
.mxnew-master-group-header {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .65rem .85rem;
  cursor: pointer;
  color: var(--si-text-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  user-select: none;
}
.mxnew-master-group-header .bi-chevron-down { transition: transform .2s ease; }
.mxnew-master-group.is-collapsed .mxnew-master-group-header .bi-chevron-down { transform: rotate(-90deg); }
.mxnew-master-group-children { padding-left: 0; border-left: 0; margin-left: 0; }
.mxnew-master-group.is-collapsed .mxnew-master-group-children { display: none; }

/* v352: detail-column sticky top wraps the active facet name + (optional)
   search box. Single sticky container — no nested sticky conflicts. */
.mxnew-detail-top {
  position: sticky;
  top: 0;
  background: var(--si-surface);
  border-bottom: 1px solid var(--si-border-subtle);
  z-index: 2;
}
.mxnew-detail-active-name {
  padding: .55rem .85rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--si-accent-text);
  letter-spacing: .005em;
}
/* Search box is now inside .mxnew-detail-top, so it no longer needs its
   own sticky/background — just padding for the input frame. */
.mxnew-detail-search {
  padding: 0 .85rem .55rem;
}
.mxnew-detail-search input {
  width: 100%;
  border: 1px solid var(--si-border);
  border-radius: 999px;
  padding: .45rem .85rem;
  font-size: .85rem;
  background: var(--si-surface);
  color: var(--si-text);
}
.mxnew-detail-search input:focus {
  outline: none;
  border-color: var(--si-accent);
  box-shadow: 0 0 0 3px var(--si-accent-soft);
}

/* DETAIL: section separator (Bifate / Disponibile) */
.mxnew-detail-sep {
  padding: .5rem .85rem .25rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--si-text-muted);
}

/* DETAIL: value rows */
.mxnew-detail-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .85rem;
  cursor: pointer;
  user-select: none;
  font-size: .9rem;
  color: var(--si-text);
}
.mxnew-detail-row:hover { background: var(--si-accent-soft); }
.mxnew-detail-row input[type="checkbox"],
.mxnew-detail-row input[type="radio"],
.mxnew-detail-parent-row input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  /* v365: burgundy fill on both themes — pure brand color reads well on
     either bg (with white check auto-rendered by the browser). The active
     facet text + spinner border still use --si-accent-text for the dark-
     mode coral lift, but the checkbox stays solid brand color.
     v370: appearance:none + custom drawing — desktop uses Bootstrap's
     form-check-input which is appearance:none with .25rem rounded corners;
     mobile native checkboxes were sharper. Unify the look here so both
     viewports match. */
  accent-color: var(--si-accent);
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--si-border);
  border-radius: .25rem;
  background-color: transparent;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
  position: relative;
}
.mxnew-detail-row input[type="checkbox"]:checked,
.mxnew-detail-row input[type="radio"]:checked,
.mxnew-detail-parent-row input[type="checkbox"]:checked {
  background-color: var(--si-accent);
  border-color: var(--si-accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.mxnew-detail-row input[type="checkbox"][data-indeterminate="1"],
.mxnew-detail-parent-row input[type="checkbox"][data-indeterminate="1"] {
  background-color: var(--si-accent);
  border-color: var(--si-accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 10h10'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* v361: when a row is mid-swap (user just toggled), replace the checkbox
   with a small rotating spinner in the same slot. The class is set on
   click and dropped when MobileSheet.refresh() re-renders post-swap. */
.mxnew-detail-row.is-loading,
.mxnew-detail-parent-row.is-loading {
  position: relative;
}
.mxnew-detail-row.is-loading > input[type="checkbox"],
.mxnew-detail-parent-row.is-loading > input[type="checkbox"] {
  visibility: hidden;
}
.mxnew-detail-row.is-loading::before,
.mxnew-detail-parent-row.is-loading::before {
  content: '';
  position: absolute;
  left: .85rem;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border: 2px solid var(--si-border);
  /* v364: coral on dark, burgundy on light — same token as active facet */
  border-top-color: var(--si-accent-text);
  border-radius: 50%;
  animation: mxnew-row-spin .6s linear infinite;
}
.mxnew-detail-row.is-loading.is-child::before {
  left: 1.75rem; /* matches the .is-child indent */
}
@keyframes mxnew-row-spin { to { transform: rotate(360deg); } }

/* v371: desktop spinner mirror — same loading affordance as the mobile
   sheet (v361), applied to .si-filter-option rows + .si-filter-parent-row.
   Hides the checkbox while a swap is in flight; cleared by
   applySidebarCounts when the response lands. */
.si-filter-option.is-loading,
.si-filter-parent-row.is-loading {
  position: relative;
}
.si-filter-option.is-loading .form-check-input,
.si-filter-parent-row.is-loading .form-check-input {
  visibility: hidden;
}
.si-filter-option.is-loading::before,
.si-filter-parent-row.is-loading::before {
  content: '';
  position: absolute;
  left: .4rem;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--si-border);
  border-top-color: var(--si-accent-text);
  border-radius: 50%;
  animation: mxnew-row-spin .6s linear infinite;
}
.mxnew-detail-row-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mxnew-detail-row-count {
  flex: 0 0 auto;
  font-size: .78rem;
  color: var(--si-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* v341/v351/v353: mobile typography. Match eMAG-like readability:
   - .88rem (14px) text — same as v351
   - taller row padding (~.95rem ≈ 15px top/bottom) — was .55rem
   - counts get pill styling (gray bg, rounded, no border)
   - bigger checkboxes (scale 1.15 = ~18.5px effective)
   - desktop master keeps the compact .78rem (base rule). */
@media (max-width: 991.98px) {
  /* v359: bump to ~15px (.94rem) for real-phone readability. */
  .mxnew-sheet-master .mxnew-master-item,
  .mxnew-detail-row,
  .mxnew-detail-parent-row {
    font-size: .94rem;
    line-height: 1.3;
  }
  /* v359: master facet labels share the value-label typography — same
     condensed Arial Narrow stack + stretch + letter-spacing. Weight stays
     500 (default) / accent on active to keep the visual hierarchy. */
  .mxnew-sheet-master .mxnew-master-item-label {
    font-family: 'Arial Narrow', 'Helvetica Neue Condensed', 'Avenir Next Condensed',
                 'Liberation Sans Narrow', 'Nimbus Sans Narrow', 'Ubuntu Condensed',
                 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-stretch: condensed;
    letter-spacing: -0.005em;
  }
  /* v358: align value labels with the product-card title typography —
     same condensed font stack + weight 700 + tight letter-spacing. Size
     stays at the inherited .88rem so the master/detail layout balance
     doesn't shift.
     v363: tighter line-height so the label's line-box matches the count's
     visual box (Arial Narrow has tall ascenders that pushed the glyph up
     within a 1.3-multiplied box, making the label look higher than count). */
  .mxnew-sheet-detail .mxnew-detail-row-label {
    font-family: 'Arial Narrow', 'Helvetica Neue Condensed', 'Avenir Next Condensed',
                 'Liberation Sans Narrow', 'Nimbus Sans Narrow', 'Ubuntu Condensed',
                 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-stretch: condensed;
    letter-spacing: -0.005em;
    font-weight: 700;
    line-height: 1.15;
  }
  /* v353: airier vertical padding — facet + value rows feel less cramped.
     v356: padding-right .85rem reserves room for the absolutely-positioned
     dot indicator — the dot sits in this reserved slot, label never overlaps. */
  .mxnew-sheet-master .mxnew-master-item {
    padding: .95rem .85rem .95rem .2rem;
  }
  /* v354: prefix .mxnew-sheet-detail to win against the base rule (defined
     later in the file). Without it, base padding .55rem leaked back.
     v362: tighter horizontal spacing — give the value label more room.
     left padding -3px (.66rem), gap collapsed (handled by margin-right on
     checkbox), label-to-count down to 1px. */
  .mxnew-sheet-detail .mxnew-detail-row,
  .mxnew-sheet-detail .mxnew-detail-parent-row {
    padding: .95rem .85rem .95rem .66rem;
    gap: 0;
  }
  .mxnew-sheet-detail .mxnew-detail-row.is-child {
    padding-top: .95rem;
    padding-bottom: .95rem;
    padding-left: 1.56rem; /* keeps indent (-3px from 1.75rem) */
  }
  /* v362: 1px from end of label to opening paren of count */
  .mxnew-sheet-detail .mxnew-detail-row-count {
    margin-left: 1px;
  }
  /* v354: revert to plain (N) parens — labels now have room to extend,
     pill bg felt visually heavy. Simple muted parens read cleaner. */
  .mxnew-detail-row-count {
    font-size: .82rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--si-text-secondary);
  }
  /* v362/v370: explicit margin-right controls the distance from checkbox
     to label (gap is collapsed). Removed v353 transform:scale — v370
     custom-drawn checkbox already sized via width/height (1.15rem). */
  .mxnew-detail-row input[type="checkbox"],
  .mxnew-detail-row input[type="radio"],
  .mxnew-detail-parent-row input[type="checkbox"] {
    margin-right: .78rem;
  }
}
/* v352: pure black labels + values on light theme mobile (max readability).
   Dark theme keeps the muted-light tokens. Active facet text stays accent. */
@media (max-width: 991.98px) {
  [data-bs-theme="light"] .mxnew-sheet-master .mxnew-master-item:not(.is-active),
  [data-bs-theme="light"] .mxnew-sheet-detail .mxnew-detail-row,
  [data-bs-theme="light"] .mxnew-sheet-detail .mxnew-detail-row-label,
  [data-bs-theme="light"] .mxnew-sheet-detail .mxnew-detail-parent-row,
  :root:not([data-bs-theme="dark"]) .mxnew-sheet-master .mxnew-master-item:not(.is-active),
  :root:not([data-bs-theme="dark"]) .mxnew-sheet-detail .mxnew-detail-row,
  :root:not([data-bs-theme="dark"]) .mxnew-sheet-detail .mxnew-detail-row-label,
  :root:not([data-bs-theme="dark"]) .mxnew-sheet-detail .mxnew-detail-parent-row {
    color: #000;
  }
}

/* v365: dark-mode lift for the "surface" inside the sheet — the original
   --si-surface (#191b25) was too close to --si-bg-elevated (#14151d), so
   master vs detail looked almost identical. Skeleton-base (#262938) gives
   a clear +13 luminance bump on each channel, keeping the same "premium
   dark" character. Applied wherever we used surface inside the sheet. */
[data-bs-theme="dark"] .mxnew-sheet-detail,
[data-bs-theme="dark"] .mxnew-master-item.is-active,
[data-bs-theme="dark"] .mxnew-detail-top,
[data-bs-theme="dark"] .mxnew-detail-search input {
  background: #262938;
}
/* v367: search input border on dark — default --si-border (#262938) now
   matches the lifted detail bg, so the pill was invisible when unfocused.
   Use a lighter neutral so the outline reads clearly. */
[data-bs-theme="dark"] .mxnew-detail-search input {
  border-color: #4a5168;
}
/* v368/v369: focus ring on dark — base burgundy works visually, but
   --si-accent-soft (7% alpha) disappears on the lifted #262938 surface.
   Keep brand burgundy for the border + bump the soft ring to higher
   alpha so it actually reads. */
[data-bs-theme="dark"] .mxnew-detail-search input:focus {
  border-color: var(--si-accent);
  box-shadow: 0 0 0 3px rgba(140, 25, 19, .35);
}

/* v370: dark-mode unchecked checkbox border lift — default --si-border
   (#262938) coincides with the lifted detail bg, so the unchecked checkbox
   outline disappeared. Bump to a visible neutral.
   (v366 color-scheme:light hack no longer needed — v370 draws the checkbox
   via custom CSS, so platform light/dark rendering is irrelevant.) */
[data-bs-theme="dark"] .mxnew-detail-row input[type="checkbox"]:not(:checked),
[data-bs-theme="dark"] .mxnew-detail-row input[type="radio"]:not(:checked),
[data-bs-theme="dark"] .mxnew-detail-parent-row input[type="checkbox"]:not(:checked) {
  border-color: #4a5168;
}

/* v326 Iter 6: parent-child rows in detail column */
.mxnew-detail-parent {
  border-radius: .5rem;
  overflow: hidden;
}
.mxnew-detail-parent-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .85rem;
  cursor: pointer;
  border-radius: .5rem;
  transition: background .12s;
}
.mxnew-detail-parent-row:hover { background: var(--si-accent-soft); }
.mxnew-detail-parent-row input[type="checkbox"] {
  flex: 0 0 auto;
  pointer-events: none;
}
/* v336: children align with non-child rows — same padding-right so counts
   line up at exact right edge; only label gets a slim left indent. */
.mxnew-detail-parent-children {
  padding-left: 0;
  border-left: 0;
  margin-left: 0;
}
.mxnew-detail-row.is-child {
  padding-left: 1.75rem;
  padding-right: .85rem;
}

/* Chip in header strip (iter 4) */
.mxnew-sheet-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .55rem;
  margin-right: .35rem;
  background: var(--si-accent-soft);
  color: var(--si-accent);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.mxnew-sheet-chip .bi-x {
  font-size: .9rem;
  opacity: .7;
}