/* ================================================================
   static/css/homev2_preview.css — homepage v2 skin (preview-gated).
   Round-2 of the §3.8b homepage port; spec = the 2026-07-24 design-duel
   synthesis (docs/session-notes/2026-07-24-homepage-design-duel-finalspec.json).
   ?v=1 — BUMP ON EVERY EDIT (static-asset cache-buster trap).
   LOAD ORDER CONTRACT (load-bearing — several overrides win specificity
   TIES by source order): the <link> for THIS file is emitted in
   home_bands.tpl top slot AFTER the category_v2.css link AND AFTER the
   inline preview <style> block. Never move it earlier.
   Scopes: .homev2-skin = frozen arhitect bands (CSS-only restyle);
           .homev2-band / #homev2-promo = scv2-owned homepage bands.
   Tokens duplicated from category_v2.css L21-32 (that file is frozen —
   zero edits allowed; values include the 2026-07-23 AA-corrected
   --scv2-ok:#13753E).
   !important census (each annotated inline): only where an INLINE style
   or a legacy !important must be beaten — review photo bg, review quote
   font-size, rating margins, nth-of-type overlay belt-and-braces.
   ================================================================ */
.homev2-skin,.homev2-band{
  --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:#13753E; --scv2-okbg:#E8F5EC; --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);
  --hv2-gutter:25px; /* = .container/header padding (breakpoint-invariant) = category-v2 gutter */
  --hv2-band:40px;   /* inter-band rhythm */
  --hv2-pair:18px;   /* heading→band + paired-band gap */
  color:var(--scv2-ink);
}
@media(min-width:768px){.homev2-skin,.homev2-band{--hv2-band:56px}}

/* ── item 0: deliberate top air; no margin-collapse ever again ───── */
#mainContentWrapper{padding-top:16px}
.homev2-skin{display:flow-root;padding-left:var(--hv2-gutter);padding-right:var(--hv2-gutter)}

/* ── item 1: ONE vertical rhythm (owl) + named pair exceptions ───── */
.homev2-skin>*{margin-top:0;margin-bottom:0}
.homev2-skin>*+*{margin-top:var(--hv2-band)}
.homev2-skin>.hpa-grid-services{margin-top:12px}               /* hero's caption strip */
.homev2-skin>.homev2-revhead+.hpa-cat-row{margin-top:var(--hv2-pair)}
.homev2-skin>#homev2-promo+.hpa-grid-2{margin-top:var(--hv2-pair)} /* deals zone */
.homev2-skin>.hpa-h1+*{margin-top:var(--hv2-pair)}             /* H1 heads Populare */
/* scv2 bands INSIDE the skin: drop the category-page band fence — owl rules */
.homev2-skin .scv2-band{border-top:none;margin-top:0;padding-top:0}
/* scv2 bands OUTSIDE the skin (#homev2-lower + any fallback position) */
#mainContentWrapper>.homev2-band{margin-top:var(--hv2-band);margin-bottom:48px;
  padding-left:var(--hv2-gutter);padding-right:var(--hv2-gutter)}

/* ── item 6: flatten Bootstrap .container; container-owl + pairs ─── */
.homev2-skin .container{max-width:none;width:auto;margin:0;padding:0}
.homev2-skin .container>*{margin-top:0;margin-bottom:0}
.homev2-skin .container>*+*{margin-top:var(--hv2-band)}
.homev2-skin .container>.fillWidth_banner+.hpa-products{margin-top:14px} /* AlphaTheta campaign unit */
.homev2-skin .container>h1.hpa-h1+*{margin-top:var(--hv2-pair)}          /* voucher heading→grid */
/* full-bleed exemption: banners pull to the 1440-sheet edge */
.homev2-skin>.hpa-banners-1,.homev2-skin>.hpa-grid-2,
.homev2-skin .container>.fillWidth_banner,.homev2-skin .container>.hpa-grid-3{
  margin-left:calc(-1*var(--hv2-gutter));margin-right:calc(-1*var(--hv2-gutter))}

/* ── kill every legacy dark band slab (style_tiles.css #262626/27) ── */
.homev2-skin .hpa-banners-1,.homev2-skin .hpa-cat-row,
.homev2-skin .hpa-grid-2,.homev2-skin .grayBg-light{background:transparent}

/* ── item 4: typography ──────────────────────────────────────────── */
/* band heading recipe = scv2 h2 (24/800 + 46x4 magenta dash):
   .hpa-h2 "Cele mai populare" + voucher h1 (visually demoted).
   NO margin-top declared here — the owl/pair rules own it (a margin
   shorthand here was a verified bug in two drafts). */
.homev2-skin .hpa-h2,.homev2-skin .container h1.hpa-h1{position:relative;
  margin-bottom:16px;padding:14px 0 0;background:transparent;text-align:left;
  font-size:24px;font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--scv2-ink)}
.homev2-skin .hpa-h2::before,.homev2-skin .container h1.hpa-h1::before{content:'';
  position:absolute;top:0;left:0;width:46px;height:4px;border-radius:2px;background:var(--scv2-accent)}
/* page H1 (direct skin child only) = scv2 pagehead: 33/800 ink, NO dash */
.homev2-skin>.hpa-h1{position:static;margin-bottom:0;padding:0;background:transparent;
  text-align:left;font-size:33px;font-weight:800;line-height:1.2;letter-spacing:-.025em;color:var(--scv2-ink)}
@media(max-width:991px){.homev2-skin>.hpa-h1{font-size:26px}}
@media(max-width:640px){.homev2-skin .hpa-h2,.homev2-skin .container h1.hpa-h1{font-size:20px}}

/* ── services strip (frozen markup; centered = intentional) ──────── */
.homev2-skin .hpa-grid-services{padding:0;column-gap:8px}
.homev2-skin .service-box{margin:0 16px;padding:6px 0}
.homev2-skin .service-box h3{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--scv2-ink)}
.homev2-skin .service-box h3 .fa{color:var(--scv2-deep);font-size:15px;margin-right:5px}
.homev2-skin .service-box:hover h3,.homev2-skin .service-box:focus h3{color:var(--scv2-deep)} /* kills #ea2a8d */
.homev2-skin .service-box p{padding:5px 0 0;margin:0;font-size:12.5px;line-height:1.5;color:var(--scv2-soft)}

/* ── item 2: review strip → white v2 testimonial cards ───────────── */
.homev2-skin .hpa-cat-row{margin-bottom:0;padding:0;
  grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;row-gap:14px}
@media(max-width:991px){.homev2-skin .hpa-cat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.homev2-skin .hpa-category.img-bg{
  background-image:none !important; /* beats the JS-written inline photo style */
  background-color:#fff;border:1px solid var(--scv2-line);
  border-radius:var(--scv2-radius);box-shadow:var(--scv2-shadow-card)}
.homev2-skin .hpa-cat-row .hpa-category .hpa-cat-content{
  background:none !important; /* belt-and-braces vs the 6 nth-of-type rgba overlays (0,4,0 tie) */
  position:relative;display:flex;flex-direction:column;height:100%;padding:18px 18px 16px}
/* proof → voice → attribution: stars first, cite pinned to bottom */
.homev2-skin .hpa-cat-row .ratingsContainer{order:-1;margin:0 0 8px}
.homev2-skin .hpa-cat-row .ratingContainerShowOnly{margin:0 !important} /* legacy uses !important margins */
.homev2-skin .hpa-cat-row .ratingContainerShowOnly span:before{font-size:15px} /* pseudo carries own size */
.homev2-skin .hpa-category .prodreview_quot{margin:0;padding:0 36px 0 0;border:0;background:none;
  display:flex;flex-direction:column;flex:1;color:var(--scv2-ink2);font-size:14px;line-height:1.55}
.homev2-skin .prodreview_quot>span{font-size:14px !important; /* beats inline font-size:126-142% */
  line-height:1.55;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.homev2-skin .hpa-cat-row .hpa-category a{color:var(--scv2-ink2);font-weight:400;font-size:14px;text-decoration:none}
.homev2-skin .hpa-cat-row .hpa-category a:hover,
.homev2-skin .hpa-cat-row .hpa-category a:focus{color:var(--scv2-ink);text-decoration:none}
.homev2-skin .hpa-cat-row .prodreview_quot cite{float:none;display:block;margin-top:auto;padding-top:10px;font-style:normal}
.homev2-skin .hpa-cat-row .prodreview_quot cite a{font-size:12.5px;font-weight:700;color:var(--scv2-soft)} /* (0,3,2) — outranks the 14px a-rule */
.homev2-skin .hpa-cat-row .prodreview_quot cite a:hover{color:var(--scv2-deep)}
.homev2-skin .prodreview_quot:after{color:var(--scv2-accent-soft);font-size:64px;font-style:normal;top:-4px;right:0;line-height:1}
@media(max-width:640px){ /* swipe row — v2 chip-row idiom; fixes the 7px squeeze */
  .homev2-skin .hpa-cat-row{display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:4px}
  .homev2-skin .hpa-cat-row::-webkit-scrollbar{display:none}
  .homev2-skin .hpa-cat-row .hpa-category{flex:0 0 82%;max-width:320px;scroll-snap-align:center}
}

/* ── item 5: product cards → scv2 anatomy. ALL overrides ride the
      FULL legacy chain — legacy compounds are (0,3,0)/(0,4,0) and beat
      shorter skin selectors regardless of load order. ─────────────── */
.homev2-skin .hpa-products{display:grid;padding:0;margin:0;column-gap:14px;row-gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media(max-width:575px){.homev2-skin .hpa-products{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;row-gap:10px}}
.homev2-skin .hpa-products .productLeadOuterContainer{position:relative;display:flex;flex-direction:column;
  width:100%;min-height:0;margin:0;padding:0 0 14px;background:#fff;
  border:1px solid var(--scv2-line);border-radius:var(--scv2-radius);box-shadow:var(--scv2-shadow-card);
  overflow:hidden;transition:box-shadow .18s,transform .18s,border-color .18s}
.homev2-skin .hpa-products .productLeadOuterContainer:hover{border-color:var(--scv2-line2);
  box-shadow:var(--scv2-shadow-pop);transform:translateY(-2px)}
.homev2-skin .hpa-products .productLeadOuterContainer:hover h5{color:var(--scv2-ink)} /* kills #ea2a8d flip */
@media(hover:none){.homev2-skin .hpa-products .productLeadOuterContainer:hover{
  box-shadow:var(--scv2-shadow-card);border-color:var(--scv2-line);transform:none}}
.homev2-skin .hpa-products .productLeadOuterContainer .tmb{width:auto;padding-bottom:61.8%;
  margin:10px 10px 0;background-color:#fff;background-size:contain;background-position:center}
.homev2-skin .hpa-products .productLeadOuterContainer .ratingsContainer{text-align:left;padding:0 14px;margin:6px 0 0;min-height:20px}
.homev2-skin .hpa-products .productLeadOuterContainer .ratingContainerShowOnly{margin:0 !important} /* counters legacy !important */
.homev2-skin .hpa-products .productLeadOuterContainer h5{padding:0 14px;margin:8px 0 6px;text-align:left;
  font-size:14px;font-weight:700;line-height:1.32;letter-spacing:-.01em;color:var(--scv2-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px}
.homev2-skin .hpa-products .productLeadOuterContainer h5 a{color:inherit}
.homev2-skin .hpa-products .productLeadOuterContainer .pricesContainer{position:static;width:auto;
  margin-top:auto;padding:6px 14px 0;text-align:left;font-size:18.5px;font-weight:800;
  letter-spacing:-.02em;color:var(--scv2-ink);font-variant-numeric:tabular-nums}
.homev2-skin .hpa-products .productLeadOuterContainer .pricesContainer .price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.homev2-skin .hpa-products .productLeadOuterContainer .pricesContainer .price span{font-size:12px;font-weight:700;color:var(--scv2-ink2)} /* Lei/Ft/€ from backend */
.homev2-skin .hpa-products .productLeadOuterContainer .pricesContainer sup{font-size:11px;top:-6px}
.homev2-skin .hpa-products .productLeadOuterContainer .pricesContainer .bonus{font-size:12.5px;font-weight:400;
  color:var(--scv2-soft);text-decoration:line-through} /* (0,5,0) beats legacy (0,4,0) */
.homev2-skin .hpa-products .productLeadOuterContainer .stockStatus{position:static;right:auto;bottom:auto;
  padding:4px 14px 0;text-align:left;font-size:12px;font-weight:700;color:var(--scv2-ok)}
.homev2-skin .hpa-products .productLeadOuterContainer .stockStatus span::before{content:'';display:inline-block;
  width:7px;height:7px;border-radius:50%;background:var(--scv2-ok);margin-right:6px;vertical-align:1px}
.homev2-skin .hpa-products .productLeadOuterContainer .bonusContainer{position:absolute;top:10px;left:10px;
  padding:4px 8px;font-size:11px;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--scv2-ink);border-radius:5px}

/* ── top brands: quiet hairline boxes, grayscale w/ hover reveal ─── */
.homev2-skin .hpa-top-brands{padding:0;column-gap:10px;grid-row-gap:10px}
.homev2-skin .hpa-top-brands .hpa-brand-box{background:#fff;border:1px solid var(--scv2-line);
  border-radius:var(--scv2-radius-sm);padding:10px;margin:0;transition:border-color .15s,box-shadow .15s}
.homev2-skin .hpa-top-brands .hpa-brand-box:hover{border-color:var(--scv2-line2);box-shadow:var(--scv2-shadow-card)} /* kills #ea2a8d border */
.homev2-skin .hpa-top-brands .hpa-brand-box:hover img{filter:none;-webkit-filter:none}

/* ── banners: white gaps + v2 radius (≥768 only; square at viewport edge) ── */
.homev2-skin .hpa-banners-1{padding:0;column-gap:10px;row-gap:10px}
.homev2-skin .hpa-grid-2,.homev2-skin .hpa-grid-3{padding:0;column-gap:10px;row-gap:10px}
.homev2-skin .hpa-grid-2 a,.homev2-skin .hpa-grid-3 a,.homev2-skin .fillWidth_banner a{display:block}
.homev2-skin .hpa-grid-2 img,.homev2-skin .hpa-grid-3 img,.homev2-skin .fillWidth_banner img{display:block;width:100%}
@media(min-width:768px){
  .homev2-skin .hpa-banners-1 .main-banner img,
  .homev2-skin .hpa-banners-1 .aux-banner1,.homev2-skin .hpa-banners-1 .aux-banner2,
  .homev2-skin .hpa-grid-2 a,.homev2-skin .hpa-grid-2 img,
  .homev2-skin .hpa-grid-3 a,.homev2-skin .hpa-grid-3 img,
  .homev2-skin .fillWidth_banner img{border-radius:var(--scv2-radius)}
  .homev2-skin .hpa-grid-2 a,.homev2-skin .hpa-grid-3 a{overflow:hidden}
  .homev2-skin .hpa-banners-1 .aux-banner1,.homev2-skin .hpa-banners-1 .aux-banner2{overflow:hidden}
}
/* <768px: kill the aux-banner white letterbox the white canvas exposed.
   Legacy grid fixes the aux row at 259px while the contain-fit bg image only
   needs ~w/1.83 — the slack was invisible on the old dark plum canvas, reads
   as dead white bands now (measured 375: box 183x259, image ~183x100; 760:
   375x259 vs ~205). auto rows + image-ratio boxes = zero slack. */
@media(max-width:767px){
  .homev2-skin .hpa-banners-1{grid-template-rows:auto auto}
  .homev2-skin .hpa-banners-1 .aux-banner1,
  .homev2-skin .hpa-banners-1 .aux-banner2{min-height:0;height:auto;aspect-ratio:183/100} /* legacy sets min-height:259px */
}

/* ── item 3: promo product strip (#homev2-promo — owned markup).
      Card internals reuse category_v2.css: .scv2-badge/-badge-promo,
      .scv2-cimg, .scv2-cbrand, .scv2-cprice, .scv2-pold, .scv2-pnow —
      the band carries .scv2 so tokens + those classes resolve free. ── */
.homev2-bandhead{display:flex;align-items:baseline;gap:14px;position:relative;padding-top:14px;margin-bottom:16px}
.homev2-bandhead::before{content:'';position:absolute;top:0;left:0;width:46px;height:4px;border-radius:2px;background:var(--scv2-accent)}
.homev2-bandhead h2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:0}
.homev2-seeall{margin-left:auto;font-size:13px;font-weight:700;color:var(--scv2-deep);text-decoration:none;white-space:nowrap}
.homev2-seeall:hover{color:var(--scv2-accent);text-decoration:underline;text-underline-offset:3px}
.homev2-pstrip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;padding:2px 2px 8px;scrollbar-width:thin}
.homev2-pcard{position:relative;flex:0 0 206px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;
  background:#fff;border:1px solid var(--scv2-line);border-radius:var(--scv2-radius);box-shadow:var(--scv2-shadow-card);
  padding:0 0 14px;color:var(--scv2-ink);text-decoration:none;transition:box-shadow .18s,transform .18s,border-color .18s}
.homev2-pcard:hover{box-shadow:var(--scv2-shadow-pop);border-color:var(--scv2-line2);transform:translateY(-2px);
  color:var(--scv2-ink);text-decoration:none}
@media(hover:none){.homev2-pcard:hover{box-shadow:var(--scv2-shadow-card);border-color:var(--scv2-line);transform:none}}
.homev2-pcard .scv2-cimg{display:block;border-radius:var(--scv2-radius) var(--scv2-radius) 0 0} /* chunk B emits a SPAN — aspect-ratio needs a block box */
.homev2-pcard .scv2-cimg picture{display:contents}
.homev2-pcard .scv2-cbrand{padding:0 14px}
.homev2-pname{font-size:13.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--scv2-ink);
  padding:0 14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.homev2-pcard .scv2-cprice{padding:0 14px;margin-top:auto}
@media(max-width:640px){
  .homev2-pcard{flex-basis:168px}
  .homev2-bandhead h2{font-size:20px}
  .homev2-pstrip{scrollbar-width:none}
  .homev2-pstrip::-webkit-scrollbar{display:none}
}

@media(prefers-reduced-motion:reduce){
  .homev2-skin *,.homev2-band *{transition:none !important;animation:none !important}
}
/* eof */