/* Category Page v2 — namespaced styles (P2). Loaded ONLY on v2 pages from
   templates6/category_v2/page.tpl with ?v=SC_CAT_V2_ASSET_VER (bump the
   constant on EVERY edit — static-asset delivery trap).
   Visual contract: docs/seo/prototype-category-v2/ (frozen, rounds 1-10).
   Every selector lives under .scv2 / .scv2-* so nothing collides with
   style_tiles.css / revamp.css (§6b rule 2). Legacy classes kept only where
   live JS handlers need them (.productLeadOuterContainer, .__productInCart,
   .__listViewAddToCart, .stockContainer, .ratingContainerShowOnly,
   #category_listing_cont, .stock_forecast_container).
   Design tokens (prototype README): ink #201D33 · ink-soft #6B6580 · line
   #E7E4EF · tint #F7F6FA · accent #D72680 / deep #B01560 · ok #1A8A4A on
   #E8F5EC · amber #9A6B14 · stars #F9BF3B (NEVER the amber stock token).
   Band cards (reused legacy product_list_short include, .minimalBox) keep
   their legacy internals — the v2 card restyle is scoped :not(.minimalBox). */

/* Tokens MUST also cover .scv2-sheet: the mobile sheets render OUTSIDE
   #scv2-root (siblings under #mainContentWrapper), and the filter form is
   MOVED into the sheet on open — without tokens there, var() borders/accents
   computed to nothing and the sheet checkboxes were invisible+unstyled
   (operator bug 2026-07-13). The reduced-motion rule already knew this. */
.scv2,.scv2-sheet{
  --scv2-ink:#201D33; --scv2-ink2:#3A3550; --scv2-soft:#6B6580;
  --scv2-line:#E7E4EF; --scv2-line2:#D8D4E4; --scv2-tint:#F7F6FA; --scv2-tint2:#EFEDF5;
  --scv2-accent:#D72680; --scv2-deep:#B01560; --scv2-accent-soft:#FBE9F3;
  --scv2-ok:#1A8A4A; --scv2-okbg:#E8F5EC; --scv2-amber:#9A6B14;
  --scv2-star:#F9BF3B;
  --scv2-radius:10px; --scv2-radius-sm:6px;
  --scv2-shadow-card:0 1px 2px rgba(32,29,51,.06);
  --scv2-shadow-pop:0 10px 30px rgba(32,29,51,.16);
  color:var(--scv2-ink);
  font-size:14px; line-height:1.45;
}
.scv2 h1,.scv2 h2,.scv2 h3,.scv2 h4{text-wrap:balance;margin:0}
.scv2 img{max-width:100%}

/* ── keyboard focus survives site resets (§6b rule 3) ─────────────────── */
/* .scv2-sheet variants: the filter/sort drawers render OUTSIDE #scv2-root and
   the form is MOVED into them, so a .scv2-scoped rule would not reach focused
   controls in the open drawer (same reason the token block covers .scv2-sheet). */
.scv2 a:focus-visible,.scv2 button:focus-visible,.scv2 input:focus-visible,.scv2 select:focus-visible,
.scv2-sheet a:focus-visible,.scv2-sheet button:focus-visible,.scv2-sheet input:focus-visible,.scv2-sheet select:focus-visible,
.scv2-chip:focus-visible,.scv2-pill:focus-visible{outline:2px solid #D72680 !important;outline-offset:2px}

/* ── page head + collapsible lede (§6b rule 8) ────────────────────────── */
.scv2-pagehead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:6px 0 2px}
.scv2-pagehead h1{font-size:33px;font-weight:800;letter-spacing:-.025em}
.scv2-cnt{font-size:13px;color:var(--scv2-soft);font-variant-numeric:tabular-nums}
.scv2-lede{max-width:72ch;color:var(--scv2-ink2);font-size:14px;margin:6px 0 0}
.scv2-ledetxt p{margin:0 0 8px}
.scv2-ledetxt p:last-child{margin-bottom:0}
.scv2-ledetxt.scv2-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.scv2-ledetxt.scv2-clamped p{margin:0}
.scv2-ledemore{background:none;border:0;padding:2px 0;margin:2px 0 0;color:var(--scv2-accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.scv2-ledemore:hover{color:var(--scv2-deep)}

/* ── chips (crawlable links) ──────────────────────────────────────────── */
/* ver 38 mobile UX (operator): the SWIPE STRIP is now the inner .scv2-chiprow
   (inside .scv2-chipwrap, which hosts the right-edge fade affordance); the
   Accesorii expander + Ghiduri sit outside it => own always-visible second row
   on mobile. Desktop: chipwrap+chiprow = display:contents, everything joins the
   one wrapped flex row (ver-31 look unchanged). overflow-y:hidden = wheel-latch
   pairing (ver 29). The fade hides at scroll-end via .scv2-atend (category_v2.js). */
.scv2-chips{padding:16px 0 4px}
.scv2-chiprow{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.scv2-chiprow::-webkit-scrollbar{display:none}
@media(max-width:991px){
.scv2-chipwrap{position:relative;display:block}
.scv2-chipwrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:56px;background:linear-gradient(to right,rgba(255,255,255,0),#fff 78%);pointer-events:none;opacity:1;transition:opacity .18s}
.scv2-chipwrap.scv2-atend::after{opacity:0}
.scv2-chips>.scv2-chip{margin:10px 8px 0 0}
.scv2-accx .scv2-chip{margin:8px 8px 0 0}
}
/* ver 33 (2026-07-22, C1 polish — operator pick): thumbs 30→42px so the product
   silhouette is recognizable pre-reading; border 1.5px line2 → 1px hairline #E7E4EF
   (keeps the clickable-pill affordance the borderless C2 variant lost). */
.scv2-chip{flex:none;display:flex;align-items:center;gap:7px;border:1px solid #E7E4EF;background:#fff;border-radius:99px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--scv2-ink2);text-decoration:none;transition:border-color .15s,background .15s}
.scv2-chip small{font-weight:600;color:var(--scv2-soft);font-variant-numeric:tabular-nums;font-size:12px}
/* Tibor #2: category thumbnail inside the chip (tile-band CDN asset, small) */
.scv2-chip img{width:42px;height:42px;object-fit:contain;flex:none;background:#fff;border-radius:50%;mix-blend-mode:multiply}
.scv2-chip-img{padding:4px 15px 4px 7px}
.scv2-chip:hover{border-color:var(--scv2-ink2);text-decoration:none;color:var(--scv2-ink)}
.scv2-chip-promo{color:var(--scv2-deep);border-color:var(--scv2-accent-soft);background:var(--scv2-accent-soft)}
/* ver 34-35 (2026-07-22 operator): Accesorii EXPANDER-CHIP — colored chip beside
   the subcat chips; click slides the accessory pills open inline to the right.
   .scv2-accx uses display:contents so the revealed pills join the SAME flex row
   (wrap on desktop, swipe on mobile); each pill animates in with a slide-right.
   Arrow rotates -> to v when open. scroll-margin = sticky-header clearance for
   the no-JS anchor fallback + the Ghiduri jump. */
.scv2-chip-acc{background:var(--scv2-accent-soft);border-color:var(--scv2-accent);color:var(--scv2-deep);font-weight:700}
.scv2-chip-acc:hover{background:var(--scv2-accent);border-color:var(--scv2-accent);color:#fff}
.scv2-acc-ar{display:inline-block;transition:transform .2s ease}
.scv2-chip-acc[aria-expanded="true"] .scv2-acc-ar{transform:rotate(90deg)}
.scv2-accx{display:contents}
.scv2-accx[hidden]{display:none}
.scv2-accx:not([hidden]) .scv2-chip{animation:scv2AccIn .22s ease both}
@keyframes scv2AccIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
#scv2-accessories,#scv2-guides{scroll-margin-top:84px}
/* David 2026-07-22 (ver 31): desktop shows ALL subcat chips — wrap, no slider
   (measured cid16 @1390px: 1945px of 3335px = 58% of the nav was hidden).
   Mobile keeps the swipe row (14 chips would stack ~8 rows at 375px). */
/* ver 38: base flex moved to .scv2-chiprow — desktop re-establishes the ONE
   wrapped row by flattening chipwrap/chiprow via display:contents. */
@media(min-width:992px){
.scv2-chips{display:flex;flex-wrap:wrap;gap:8px;overflow:visible}
.scv2-chipwrap,.scv2-chiprow{display:contents}
}

/* ── layout: rail + main ──────────────────────────────────────────────── */
.scv2-layout{padding:18px 0 0}
.scv2-rail{display:none}
@media(min-width:992px){
  .scv2-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:28px;align-items:start}
  .scv2-rail{display:block;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;padding-right:14px;scrollbar-width:thin;scrollbar-gutter:stable}
}

/* ── filter rail internals ────────────────────────────────────────────── */
.scv2-fgroup{border-top:1px solid var(--scv2-line);padding:13px 0}
.scv2-fgroup:first-of-type{border-top:none;padding-top:2px}
.scv2-fgroup h4{margin:0 0 9px}
/* keyboard-operable disclosure (WCAG 2.1.1): a real <button> inside the <h4>
   carries the interaction — Enter/Space toggle for free, aria-expanded synced
   in JS. Visually identical to the old click-only <h4> (full-width flex row). */
.scv2-fgt{display:flex;align-items:center;width:100%;margin:0;padding:0;border:0;background:none;font-family:inherit;font-size:11px;font-weight:800;line-height:inherit;text-transform:uppercase;letter-spacing:.11em;color:var(--scv2-ink);text-align:left;cursor:pointer;user-select:none}
.scv2-car{margin-left:auto;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--scv2-soft);transition:transform .18s}
.scv2-closed .scv2-car{transform:rotate(-90deg)}
.scv2-closed .scv2-fbody{display:none}
.scv2-fopt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;color:var(--scv2-ink2);cursor:pointer;user-select:none;margin:0;font-weight:400}
.scv2-fopt input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid var(--scv2-line2);border-radius:4px;margin:0;cursor:pointer;display:grid;place-items:center;flex:none;background:#fff;transition:background .12s,border-color .12s}
.scv2-fopt input[type="checkbox"]:checked{background:var(--scv2-accent);border-color:var(--scv2-accent)}
.scv2-fopt input[type="checkbox"]:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:none;border-right:none;transform:rotate(-45deg) translate(1px,-1px)}
.scv2-flabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scv2-n{margin-left:auto;font-size:12px;color:var(--scv2-soft);font-variant-numeric:tabular-nums;flex:none}
.scv2-fopt:hover{color:var(--scv2-ink)}
.scv2-zero{opacity:.38;pointer-events:none}
.scv2-fsearch{width:100%;border:1.5px solid var(--scv2-line);border-radius:var(--scv2-radius-sm);height:32px;padding:0 10px;font-size:13px;margin-bottom:8px;font-family:inherit}
.scv2-fsearch:focus{outline:none;border-color:var(--scv2-ink2)}
.scv2-frange{display:flex;gap:6px;align-items:center}
.scv2-frange select{max-width:46%;padding:.4rem .2rem;font-size:.8rem;border:1px solid var(--scv2-line2);border-radius:var(--scv2-radius-sm)}

/* ── toolbar / sorts / pills ──────────────────────────────────────────── */
.scv2-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.scv2-rescount{font-size:13px;color:var(--scv2-soft);font-variant-numeric:tabular-nums}
.scv2-rescount b{color:var(--scv2-ink);font-weight:800}
.scv2-sorts{display:flex;margin-left:auto;border:1.5px solid var(--scv2-line2);border-radius:99px;overflow:hidden}
.scv2-sorts button{border:none;background:#fff;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--scv2-ink2);cursor:pointer;border-left:1px solid var(--scv2-line)}
.scv2-sorts button:first-child{border-left:none}
.scv2-sorts button.on{background:var(--scv2-ink);color:#fff}
.scv2-gsort{font-size:12px;padding:4px;border:1px solid var(--scv2-line2);border-radius:var(--scv2-radius-sm)}
/* gestor-only catalog tools (2026-07-16): toolbar buttons + per-card cashcow badge.
   All gated on $gestor_userid in the templates -> never rendered for customers. */
.scv2-gbtn{display:inline-block;padding:4px 10px;font-size:12px;font-weight:600;color:#0c5460;background:#d1ecf1;border:1px solid #bee5eb;border-radius:var(--scv2-radius-sm);text-decoration:none;cursor:pointer;white-space:nowrap}
.scv2-gbtn:hover{background:#bee5eb;text-decoration:none;color:#0c5460}
.scv2-cimg .cashcow_container{position:absolute;left:6px;bottom:6px;z-index:5;font-size:12px;line-height:1.3;color:#333;background:rgba(255,255,255,.85);border-radius:4px;padding:1px 6px;cursor:pointer;display:flex;align-items:center;gap:3px}
.scv2-cimg .cashcow_container a{color:#333;text-decoration:none}
.scv2-pills{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 6px}
.scv2-pills:empty{padding:0}
.scv2-pill{display:inline-flex;align-items:center;gap:7px;background:var(--scv2-accent-soft);color:var(--scv2-deep);border:none;border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none}
.scv2-pill s{text-decoration:none;font-weight:800;font-size:14px;line-height:1}
.scv2-pill-clear{background:transparent;border:1.5px dashed var(--scv2-line2);color:var(--scv2-soft)}
.scv2-pill-clear:hover{text-decoration:none;color:var(--scv2-ink)}

/* ── grid ─────────────────────────────────────────────────────────────── */
.scv2 #category_listing_cont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px 0 0}
@media(min-width:576px){.scv2 #category_listing_cont{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(min-width:1200px){.scv2 #category_listing_cont{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.scv2 #category_listing_cont.scv2-busy{opacity:.45;pointer-events:none;transition:opacity .15s}
.scv2-empty{grid-column:1/-1;padding:40px 10px;color:var(--scv2-soft);text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}

/* ── card (keeps .productLeadOuterContainer for CAPI; full v2 restyle) ── */
.scv2 .productLeadOuterContainer:not(.minimalBox){position:relative;background:#fff;border:1px solid var(--scv2-line);border-radius:var(--scv2-radius);overflow:hidden;box-shadow:var(--scv2-shadow-card);display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s,border-color .18s;width:auto;margin:0;flex-basis:auto;min-height:0}
.scv2 .productLeadOuterContainer:not(.minimalBox):hover{box-shadow:var(--scv2-shadow-pop);border-color:var(--scv2-line2);transform:translateY(-2px)}
.scv2-cardlink{position:absolute;inset:0;z-index:1}
/* ── in-cart strip (ATC-feedback P0 2026-07-13): persistent state layer at the
   bottom edge of .scv2-cimg. jQuery slideDown/hide() manage the WRAPPER's
   display (slideDown ends at legacy display:block) — layout lives on the inner
   anchor, never flex the wrapper. All four offsets declared to neutralize the
   legacy style_tiles.css band rule (top:0;right:0;bottom:70%;left:0). ── */
.scv2 .__productInCart{position:absolute;top:auto;right:0;bottom:0;left:0;z-index:4;background:rgba(32,29,51,.92);color:#fff;border-radius:0;padding:0;font-size:12.5px;font-weight:700;line-height:1.2;box-shadow:0 -2px 10px rgba(32,29,51,.18);pointer-events:auto;text-align:left}
.scv2 .__productInCart.hidden{display:none}
.scv2 .scv2-pic-link{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:8px 12px;color:#fff;text-decoration:none}
.scv2 .scv2-pic-link:hover{color:#fff;text-decoration:none}
.scv2 .scv2-pic-left{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scv2 .scv2-pic-check{font-weight:800}
.scv2 .__productInCart .__count em{font-style:normal;font-weight:800;display:inline-block}
.scv2 .__productInCart .__count em.scv2-bump{animation:scv2-bump 260ms cubic-bezier(.34,1.56,.64,1)}
.scv2 .scv2-pic-cta{text-decoration:underline;text-underline-offset:2px;font-weight:800;white-space:nowrap}
@keyframes scv2-bump{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
/* ~158px cards on 2-col phones: the "in your cart" phrase would crush the
   count (HU/DE CTAs measured 100-130px) — keep "✓ N ×" + CTA, drop the phrase */
@media(max-width:479px){.scv2 .scv2-pic-txt{display:none}}
.scv2-cimg{position:relative;aspect-ratio:3/2;background:#fff;overflow:hidden}
@supports not (aspect-ratio:1){.scv2-cimg{padding-top:66.66%}}
.scv2-cimg img{width:100%;height:100%;object-fit:contain;display:block;padding:10px;box-sizing:border-box}
/* z-index:1 + LATER DOM order lifts the track above the stretched .scv2-cardlink
   (also z1, earlier sibling) so touch swipes reach the scroll-snap track — before
   this the link ate every pan and mobile galleries were dead (operator bug
   2026-07-13). Ties: badge z2, dots z2, arrows z3, heart/strip z4 all stay above.
   Image TAP navigation is re-provided by the delegated .scv2-gtrack click handler
   in category_v2.js (the link no longer receives clicks on gallery cards).
   touch-action:pan-x pan-y (NOT bare pan-x): pan-x alone let the horizontal
   gallery swipe work but REFUSED vertical pans, so a finger landing on a
   multi-image card couldn't scroll the PAGE (Tibor 2026-07-14). The track has no
   vertical overflow, so a vertical drag bubbles up to scroll the page while a
   horizontal drag still pans the gallery.
   overflow-y:hidden (2026-07-16, Tibor): overflow-x:auto alone makes the CSS spec
   COERCE overflow-y to compute as auto, turning the track into a 2-axis scroll
   container. On the bigger Promoții/band cards the inline <img> baseline gap adds
   ~6px of vertical overflow, so a desktop wheel/trackpad scroll with the cursor
   over the thumbnail LATCHED to the gallery instead of scrolling the page (touch
   was already fixed by pan-x pan-y; touch-action doesn't cover wheel). Forcing
   overflow-y:hidden makes it a horizontal-only scroller so vertical wheel bubbles
   to the page; img{display:block} removes the baseline gap that caused the 6px so
   nothing is clipped. The main grid had no vertical overflow, so it's unaffected. */
.scv2-gtrack{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;position:relative;z-index:1;touch-action:pan-x pan-y}
.scv2-gtrack::-webkit-scrollbar{display:none}
.scv2-gtrack img,.scv2-gtrack picture{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;height:100%}
.scv2-gtrack picture img{width:100%;display:block}
.scv2-badge{position:absolute;top:10px;left:10px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.05em;border-radius:5px;padding:4px 8px}
.scv2-badge-promo{background:var(--scv2-accent);color:#fff}
.scv2-badge-nou{background:var(--scv2-ink);color:#fff}
/* wishlist heart (Tibor #3): desktop hover-reveal, mobile always-visible,
   filled accent when the product is in the visitor's wishlist */
.scv2-wl{position:absolute;top:10px;right:10px;z-index:4;width:34px;height:34px;border-radius:50%;border:1px solid var(--scv2-line);background:rgba(255,255,255,.95);display:grid;place-items:center;cursor:pointer;color:var(--scv2-ink);opacity:0;transition:opacity .15s,transform .1s;pointer-events:auto;padding:0}
.scv2 .productLeadOuterContainer:hover .scv2-wl,.scv2 .productLeadOuterContainer:focus-within .scv2-wl{opacity:1}
.scv2-wl:active{transform:scale(.92)}
.scv2-wl svg{width:18px;height:18px;display:block}
.scv2-wl.scv2-wl-on{opacity:1;border-color:var(--scv2-accent)}
.scv2-wl.scv2-wl-on svg{fill:var(--scv2-accent);stroke:var(--scv2-accent)}
.scv2-gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:30px;height:30px;border-radius:50%;border:1px solid var(--scv2-line);background:rgba(255,255,255,.95);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s;color:var(--scv2-ink);font-size:16px;line-height:1}
.scv2-gprev{left:8px}.scv2-gnext{right:8px}
.scv2 .productLeadOuterContainer:hover .scv2-gnav,.scv2 .productLeadOuterContainer:focus-within .scv2-gnav{opacity:1}
/* Touch devices never grant the :hover that reveals the arrows, yet the opacity:0
   buttons stayed hit-testable at z3 above the track — an edge tap silently flipped
   the image (and left-edge wrapped to the LAST slide) instead of opening the PDP
   (audit 2026-07-13, confirmed). On touch the swipe track + dots + tap-to-open are
   the affordance, so drop the arrows entirely. */
@media(hover:none){
  .scv2-gnav{display:none}
  /* Kill the sticky-hover-first-tap trap (operator 2026-07-13): on a touch
     device the card's :hover state (border-color + lift) is applied by the
     FIRST tap and only the SECOND gesture pans the gallery. Neutralize the
     hover state to its rest values on touch so the first swipe scrolls
     immediately (paired with touch-action:pan-x pan-y on the track). Desktop
     (hover:hover) keeps the lift. */
  .scv2 .productLeadOuterContainer:not(.minimalBox):hover{box-shadow:var(--scv2-shadow-card);border-color:var(--scv2-line);transform:none}
}
.scv2-gdots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2;pointer-events:none}
.scv2-gdots i{width:6px;height:6px;border-radius:50%;background:var(--scv2-line2);transition:background .15s}
.scv2-gdots i.on{background:var(--scv2-ink)}
.scv2-cbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1;position:relative;z-index:2;pointer-events:none}
.scv2-cbody a,.scv2-cbody input,.scv2-cbody select,.scv2-cbody button{pointer-events:auto}
.scv2-cbrand{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--scv2-soft)}
.scv2 .productLeadOuterContainer h3.productName{font-size:14px;font-weight:700;line-height:1.32;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px;margin:0;padding:0}
.scv2-ctype{font-size:11.5px;color:var(--scv2-soft);margin-top:-3px}
.scv2-crating{display:flex;align-items:center;gap:5px;font-size:12px;min-height:16px}
.scv2-rscore{color:var(--scv2-soft);font-weight:700}
.scv2-rcount{color:var(--scv2-soft)}
.scv2-cspec{font-size:12px;color:var(--scv2-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em}
.scv2-cvars{display:flex;gap:6px;padding:2px 0;height:2.25rem;align-items:center}
.scv2-cvars a{width:36px;height:28px;border:1.5px solid var(--scv2-line);border-radius:5px;overflow:hidden;background:#fff;flex:none;position:relative;z-index:3}
.scv2-cvars a:hover{border-color:var(--scv2-ink2)}
.scv2-cvars img{width:100%;height:100%;object-fit:contain;padding:2px;box-sizing:border-box;background:#fff}
.scv2-vmore{display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--scv2-soft);text-decoration:none}
.scv2 .stockContainer.scv2-cstock{margin-top:auto;min-height:1.4rem;padding:0;border:none;background:none}
.scv2-stockline{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.scv2-stockline i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--scv2-soft)}
.scv2-stock-ok{color:var(--scv2-ok)}.scv2-stock-ok i{background:var(--scv2-ok)}
.scv2-stock-demo{color:#00838f}.scv2-stock-demo i{background:#00838f}
.scv2-stock-order{color:var(--scv2-amber)}.scv2-stock-order i{background:var(--scv2-amber)}
.scv2-gstock{font-size:10.5px;color:var(--scv2-soft);font-weight:600}
.scv2-cprice{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:1.6em}
.scv2-pold{font-size:12.5px;color:var(--scv2-soft);text-decoration:line-through;font-variant-numeric:tabular-nums}
.scv2-pnow{font-size:18.5px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--scv2-ink)}
.scv2-pnow small{font-size:12px;font-weight:700;color:var(--scv2-ink2);margin-left:2px}
.scv2-psave{font-size:11px;font-weight:700;background:var(--scv2-okbg);color:var(--scv2-ok);border-radius:4px;padding:2.5px 7px}
.scv2-pask{font-size:12px;color:var(--scv2-soft)}
.scv2-cacts{display:flex;gap:8px;padding:0 14px 14px;position:relative;z-index:3}
.scv2 .__listViewAddToCart.scv2-atc{position:static;flex:1;height:38px;border:none;border-radius:8px;background:var(--scv2-accent);color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,transform .1s;text-decoration:none;width:auto;margin:0;opacity:1;bottom:auto;right:auto}
.scv2 .__listViewAddToCart.scv2-atc:hover{background:var(--scv2-deep);text-decoration:none;color:#fff}
.scv2 .__listViewAddToCart.scv2-atc:active{transform:scale(.97)}
@media(min-width:761px){
  /* reserved action zone (§6b rule 6): permanent bottom space — the button
     NEVER overlays price/stock/content. Tibor #4 (2026-07-12): the button is
     now VISIBLE at rest in a quiet white/outline state (the reserved zone
     previously read as a weird void) and takes the accent fill when the CARD
     is hovered or focus-within; the button's own :hover keeps the deep shade.
     Mobile (<761px) untouched — always-visible accent via the base rule. */
  .scv2 .productLeadOuterContainer:not(.minimalBox){padding-bottom:52px}
  .scv2-cacts{position:absolute;left:0;right:0;bottom:0;padding:0 14px 14px}
  .scv2 .__listViewAddToCart.scv2-atc{background:#fff;color:var(--scv2-ink2);border:1.5px solid var(--scv2-line2);box-sizing:border-box;transition:background .15s,color .15s,border-color .15s,transform .1s}
  .scv2 .productLeadOuterContainer:hover .__listViewAddToCart.scv2-atc,.scv2 .productLeadOuterContainer:focus-within .__listViewAddToCart.scv2-atc{background:var(--scv2-accent);color:#fff;border-color:var(--scv2-accent)}
  .scv2 .productLeadOuterContainer .__listViewAddToCart.scv2-atc:hover{background:var(--scv2-deep);border-color:var(--scv2-deep);color:#fff}
}

/* ── ATC success morph (ATC-feedback P0 2026-07-13). MUST stay AFTER the
   >=761px hover rules above — the :hover/:focus-within twins tie at (0,6,0)
   and source order breaks the tie. Label via attr(): the legacy handler wipes
   and restores the button's innerHTML (site_tiles.js data-orig-html contract);
   classes + attributes on the <a> survive that, children do not. ── */
.scv2 .productLeadOuterContainer .__listViewAddToCart.scv2-atc.scv2-atc-added,
.scv2 .productLeadOuterContainer .__listViewAddToCart.scv2-atc.scv2-atc-added:hover,
.scv2 .productLeadOuterContainer:hover .__listViewAddToCart.scv2-atc.scv2-atc-added,
.scv2 .productLeadOuterContainer:focus-within .__listViewAddToCart.scv2-atc.scv2-atc-added{background:var(--scv2-ok);border-color:var(--scv2-ok);color:#fff;animation:scv2-atc-pop 220ms ease-out}
.scv2 .__listViewAddToCart.scv2-atc.scv2-atc-added>*{display:none}
.scv2 .__listViewAddToCart.scv2-atc.scv2-atc-added::before{content:"\2713";font-weight:800}
.scv2 .__listViewAddToCart.scv2-atc.scv2-atc-added::after{content:attr(data-added-label);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes scv2-atc-pop{0%{transform:scale(1)}35%{transform:scale(1.04)}100%{transform:scale(1)}}
.scv2-srlive{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}

/* ── load-more (P4, progressive enhancement over the crawlable pager) ─── */
.scv2-loadmorewrap{display:flex;flex-direction:column;align-items:center;gap:7px;padding:18px 0 0}
.scv2-loadmorewrap[hidden]{display:none}
.scv2-loadmore{min-width:230px;height:44px;padding:0 26px;border:1.5px solid var(--scv2-ink);border-radius:999px;background:#fff;color:var(--scv2-ink);font-size:14px;font-weight:800;cursor:pointer;transition:background .12s ease,color .12s ease}
.scv2-loadmore:hover{background:var(--scv2-ink);color:#fff}
.scv2-loadmore:disabled{opacity:.55;cursor:default}
.scv2-loadmore.scv2-loading{background:#fff;border-color:var(--scv2-line2);color:var(--scv2-soft)}
.scv2-lmcount{color:var(--scv2-soft);font-size:12.5px;font-variant-numeric:tabular-nums}

/* ── pager (prototype .pag look over the reused bootstrap markup) ─────── */
.scv2-pagerwrap{display:flex;justify-content:center;padding:22px 0 8px}
.scv2-pagerwrap .pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;border:none;background:none;box-shadow:none}
.scv2-pagerwrap .page-item{margin:0}
.scv2-pagerwrap .page-link{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:transparent;color:var(--scv2-soft);font-size:13px;font-variant-numeric:tabular-nums;padding:0;box-shadow:none}
.scv2-pagerwrap .page-link:hover{background:var(--scv2-tint2);color:var(--scv2-ink);text-decoration:none}
.scv2-pagerwrap .page-item.active .page-link{background:var(--scv2-ink);color:#fff;font-weight:800}
.scv2-pagerwrap .page-item.disabled .page-link{opacity:.35;pointer-events:none}

/* ── bands ────────────────────────────────────────────────────────────── */
/* merch-band delimitation (Tibor feedback #2 email, 2026-07-12): the bands
   reuse the grid card component, so without a visual fence "Top produse" read
   as row 13 of the filtered results. Each band gets a hairline top rule, more
   breathing room, and a larger accent-ticked heading. */
.scv2-band{padding:40px 0 0;margin-top:28px;border-top:1px solid var(--scv2-line)}
.scv2-band>h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px;position:relative;padding-top:14px}
.scv2-band>h2::before{content:'';position:absolute;top:0;left:0;width:46px;height:4px;border-radius:2px;background:var(--scv2-accent)}
/* strips carry the legacy .thumbs.thumbs-small classes (the reused
   product_list_short include expects them) — .scv2-prefixed selectors out-rank
   the legacy flex rules so the grid wins */
.scv2 .scv2-recstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:576px){.scv2 .scv2-recstrip{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(min-width:1000px){.scv2 .scv2-recstrip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .scv2 .scv2-recstrip.scv2-five{grid-template-columns:repeat(5,minmax(0,1fr))}} /* UI-test #11: explicit tracks */
.scv2 .scv2-recstrip .productLeadOuterContainer,.scv2 .scv2-recstrip .productLead{width:100%;margin:0;flex-basis:auto;max-width:none}
.scv2 .scv2-recstrip .productLeadOuterContainer img{width:100%;height:auto}
/* legacy minimalBox band card: .pricesContainer + .stockStatus are absolute-
   bottom (style_tiles) and expect the .thumbs min-height context — recreate
   the reserved space inside the grid cell */
.scv2 .scv2-recstrip .productLeadOuterContainer.minimalBox{position:relative;background:#fff;border:1px solid var(--scv2-line);border-radius:var(--scv2-radius);padding:12px 8px 64px;min-height:0}
.scv2-numwrap{position:relative;min-width:0}
.scv2-num{position:absolute;top:-9px;left:-9px;z-index:4;width:36px;height:36px;border-radius:10px;background:var(--scv2-ink);color:#fff;font-size:17px;font-weight:800;display:grid;place-items:center;box-shadow:0 3px 8px rgba(32,29,51,.28);pointer-events:none;font-variant-numeric:tabular-nums}
.scv2-num1{background:var(--scv2-accent)}
.scv2-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:576px){.scv2-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(min-width:1100px){.scv2-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
.scv2-tile{border:1px solid var(--scv2-line);border-radius:var(--scv2-radius);background:#fff;padding:14px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--scv2-ink);transition:box-shadow .15s,border-color .15s}
.scv2-tile:hover{box-shadow:var(--scv2-shadow-card);border-color:var(--scv2-line2);text-decoration:none}
.scv2-tile img{height:74px;width:auto;object-fit:contain;align-self:center;mix-blend-mode:multiply}
.scv2-tile b{font-size:13.5px;font-weight:700}
.scv2-tile small{font-size:12px;color:var(--scv2-soft);font-variant-numeric:tabular-nums}
.scv2-acc{display:flex;gap:10px;flex-wrap:wrap}
.scv2-acc a{border:1.5px solid var(--scv2-line2);border-radius:99px;padding:9px 17px;font-size:13px;font-weight:600;color:var(--scv2-ink2);text-decoration:none;background:#fff}
.scv2-acc a:hover{border-color:var(--scv2-ink2);text-decoration:none;color:var(--scv2-ink)}
/* Accesorii thumbnail boxes (operator round-11): compact tile variant —
   denser tracks, smaller image, name under it. */
.scv2 .scv2-tiles.scv2-tiles-sm{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:576px){.scv2 .scv2-tiles.scv2-tiles-sm{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:900px){.scv2 .scv2-tiles.scv2-tiles-sm{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1200px){.scv2 .scv2-tiles.scv2-tiles-sm{grid-template-columns:repeat(8,minmax(0,1fr))}}
.scv2-tile-sm{padding:10px;gap:6px;text-align:center;align-items:center}
.scv2-tile-sm img{height:56px;width:auto}
.scv2-tile-sm b{font-size:12px;font-weight:600;line-height:1.25;color:var(--scv2-ink2)}
.scv2-tile-sm:hover b{color:var(--scv2-ink)}
/* P5 utility tiles (Reduceri/Resigilate/Seturi/Ghid) — icon circle mirrors the
   74px form-tile image height so mixed rows stay aligned. */
.scv2-tuic{width:74px;height:74px;border-radius:50%;background:var(--scv2-accent-soft);color:var(--scv2-deep);display:flex;align-items:center;justify-content:center;align-self:center;flex:none}
/* ver 32 (2026-07-22): bold filled badge system for the utility tiles — replaces
   the anemic thin-stroke-on-pale-pink look (Muziker-register, brand palette).
   -mag/-dark = filled circle + white glyph; -seal = transparent container, the
   scalloped %-seal SVG is self-colored. Base .scv2-tuic kept as fallback. */
.scv2-tuic-mag{background:var(--scv2-accent);color:#fff}
.scv2-tuic-dark{background:var(--scv2-ink);color:#fff}
.scv2-tuic-seal{background:transparent}
.scv2-guides{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:761px){.scv2-guides{grid-template-columns:repeat(3,minmax(0,1fr))}}
.scv2-guide{position:relative;border-radius:var(--scv2-radius);overflow:hidden;color:#fff;padding:26px 26px 24px;min-height:130px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;text-decoration:none}
.scv2-guide:hover{text-decoration:none;color:#fff}
.scv2-g1{background:linear-gradient(118deg,#201D33 34%,#4A2050 78%,#B01560)}
.scv2-g2{background:linear-gradient(118deg,#241F38 40%,#1F3A57 100%)}
.scv2-g3{background:linear-gradient(118deg,#1E2A22 30%,#1A5A38 100%)}
.scv2-guide em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#E9A5C9}
.scv2-g2 em{color:#9CC4E8}.scv2-g3 em{color:#9CD8B4}
.scv2-guide b{font-size:18px;font-weight:800;letter-spacing:-.015em;max-width:24ch;line-height:1.25}
.scv2-brandstrip{display:flex;gap:10px;flex-wrap:wrap}
.scv2-brandstrip a{border:1px solid var(--scv2-line);border-radius:var(--scv2-radius-sm);background:#fff;padding:12px 20px;font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--scv2-soft);text-decoration:none;transition:color .15s,border-color .15s}
.scv2-brandstrip a:hover{color:var(--scv2-ink);border-color:var(--scv2-line2);text-decoration:none}
.scv2-consult{display:flex;gap:18px;align-items:center;background:var(--scv2-ink);color:#fff;border-radius:var(--scv2-radius);padding:20px 24px;flex-wrap:wrap;margin-top:34px}
.scv2-consult-ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none;color:#E9538F}
.scv2-consult b{font-size:16px;font-weight:800;display:block}
.scv2-consult small{color:#B9B2CC;font-size:12.5px}
.scv2-mails{margin-left:auto;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:#B9B2CC}
.scv2-mails a{color:#fff;text-decoration:none;font-weight:700}
.scv2-tel{font-size:19px;font-weight:800;color:#fff;text-decoration:none;letter-spacing:.01em}
.scv2-tel:hover{color:#fff;text-decoration:none}
.scv2-seo{background:var(--scv2-tint);border-radius:var(--scv2-radius);padding:28px 30px;margin-top:34px;font-size:13.5px;line-height:1.65;color:var(--scv2-ink2)}
.scv2-seo h2{font-size:17px;font-weight:800;margin:18px 0 8px}
.scv2-seo h2:first-child{margin-top:0}
.scv2-seo p{max-width:74ch;margin:0 0 10px}
.scv2-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:30px 0 6px}
/* center each item within its (wide) cell so the row reads balanced instead of
   left-hugging with big right-gaps at desktop (Tibor 2026-07-13) */
@media(min-width:761px){.scv2-trust{grid-template-columns:repeat(4,minmax(0,1fr))}.scv2-trust div{justify-content:center}}
.scv2-trust div{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:700;color:var(--scv2-ink2)}
.scv2-trust svg{flex:none;color:var(--scv2-deep)}

/* ── mobile bar + sheets (prototype rounds 4/9; shown only under .scv2-js) ─ */
.scv2-mbar{display:none}
.scv2-sheet{display:none}
/* lock the page behind an open sheet — without this the veil pan-scrolled the
   grid underneath via overscroll chaining (audit 2026-07-13). Toggled by
   openSheet/closeSheet; only ever added <992px where the sheets are reachable. */
body.scv2-body-lock{overflow:hidden}
@media(max-width:991px){
  .scv2-js-on .scv2-mbar{display:flex;position:sticky;bottom:0;z-index:40;background:#fff;border-top:1px solid #E7E4EF;padding:10px 14px;gap:10px;box-shadow:0 -6px 18px rgba(32,29,51,.07)}
  .scv2-mbar button{flex:1;height:42px;border-radius:9px;font-size:13.5px;font-weight:800;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .scv2-mb-f{border:none;background:#201D33;color:#fff}
  .scv2-mb-s{border:1.5px solid #D8D4E4;background:#fff;color:#201D33}
  /* z-index above the FrontApp launcher (#frontchat_launcher — fixed invisible
     60x318px strip at z-index 9999): at 1060 the sheet's close X rendered UNDER
     the launcher strip and every tap on it was swallowed (Tibor #6, 2026-07-12) */
  .scv2-js-on .scv2-sheet{display:block;position:fixed;inset:0;z-index:10050;pointer-events:none}
  .scv2-veil{position:absolute;inset:0;background:rgba(23,20,31,.5);opacity:0;transition:opacity .2s}
  .scv2-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;max-height:82vh;display:flex;flex-direction:column;transform:translateY(102%);transition:transform .25s cubic-bezier(.32,.72,.33,1)}
  .scv2-sheet.scv2-open{pointer-events:auto}
  .scv2-sheet.scv2-open .scv2-veil{opacity:1}
  .scv2-sheet.scv2-open .scv2-panel{transform:none}
  .scv2-ph{display:flex;align-items:center;padding:14px 18px 10px;border-bottom:1px solid #E7E4EF}
  .scv2-ph b{font-size:16px;font-weight:800}
  .scv2-ph button{margin-left:auto;border:none;background:#EFEDF5;border-radius:50%;width:30px;height:30px;font-size:15px;cursor:pointer;color:#201D33}
  .scv2-pb{overflow-y:auto;padding:4px 18px 12px}
  .scv2-pf{padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #E7E4EF}
  .scv2-apply{width:100%;height:46px;border:none;border-radius:10px;background:#D72680;color:#fff;font-size:14.5px;font-weight:800;cursor:pointer}
  .scv2-cimg{aspect-ratio:1/1}
  .scv2-wl{opacity:1} /* Tibor #3: visible by default on touch — no hover exists */
  .scv2-cbody{padding:10px 11px 11px}
  .scv2 .productLeadOuterContainer h3.productName{font-size:13px;min-height:35px}
  .scv2-pnow{font-size:16.5px}
  .scv2-cspec{display:none}
  .scv2-cacts{padding:0 11px 11px}
  .scv2 .__listViewAddToCart.scv2-atc{height:36px;font-size:12.5px}
  .scv2-pagehead h1{font-size:26px}
  .scv2-sorts{margin-left:0;width:100%;justify-content:stretch;display:none} /* mobile sorts live in the sheet */
}
.scv2-sortopts{padding:6px 8px calc(14px + env(safe-area-inset-bottom,0px))}
.scv2-sortopts button{display:flex;align-items:center;gap:12px;width:100%;border:none;background:none;padding:13px 10px;font-size:14.5px;font-weight:600;color:#201D33;cursor:pointer;border-radius:10px;text-align:left}
.scv2-sortopts button::before{content:'';width:18px;height:18px;border-radius:50%;border:2px solid #D8D4E4;flex:0 0 18px;box-sizing:border-box}
.scv2-sortopts button[aria-checked="true"]{background:#FBE9F3;color:#B01560}
.scv2-sortopts button[aria-checked="true"]::before{border-color:#D72680;border-width:5px;background:#fff}
.scv2-panel-compact{max-height:none}

/* ── desktop frame restyle (Tibor 2026-07-12) — v2 pages only (this file loads
   only on v2 renders). Sides go white instead of the plum body; the header band
   runs full-bleed while its content stays at container width. Overrides
   style_tiles.css: body.bg-main{#450b29} + .container,header{max-width:1440px}.
   The header bg was rgba(0,0,0,.8) COMPOSITED OVER the plum body — bake the
   effective color (#0e0208) solid, else a white body turns the header grey.
   Scoped >=1441px: below that the 1440px content column fills the viewport and
   the plum was never visible, so mobile/tablet render byte-identically. ── */
@media(min-width:1441px){
  body.bg-main{background-color:#fff}
  header.hidden-print{max-width:none;background:#0e0208}
  header.hidden-print>*{max-width:1440px;margin-left:auto;margin-right:auto}
}

@media print{.scv2-chips,.scv2-cacts,.scv2-mbar,.scv2-sheet{display:none !important}}
@media(prefers-reduced-motion:reduce){.scv2 *,.scv2-sheet *{transition:none!important;animation:none!important}}