/* ==========================================================================
   WOW24 — home layouts A / B (design sandbox, arturas@dinamikus.lt only)
   Markup: resources/views/frontend/home/designs/home-{a,b}.blade.php
   Loaded on "/" only (site-designs.blade.php adds html.pdpx-page-home).
   Black & white, square corners. Tokens (--x*, --t-*, --ink…) from site-designs.css.
     A · Kopėčios — store directory: category ladder beside the hero, joined grids,
                   the three worlds as one tabbed module.
     B · Vitrina  — magazine: image-led spreads, large light type, brands as names.
   Production CSS sets p/span/a/h* colour, size and margins globally, so text
   inside .hx gets explicit values.
   ========================================================================== */
/* ------------------------------------------------------------ switching ---- */
.hx{ display:none; }
html.pdpx-page-home:is([data-pdp-design="a"],[data-pdp-design="b"]) .homeMainContainer{ display:none !important; }
/* ---------------------------------------------------------- shared bits ---- */
.hx *,
.hx *::before,
.hx *::after{ box-sizing:border-box; }
.hx h1,
.hx h2,
.hx h3,
.hx p{ margin:0; padding:0; color:inherit; text-transform:none; }
.hx span,
.hx strong,
.hx b,
.hx i{ color:inherit; font-size:inherit; font-style:normal; }
.hx a{ color:inherit; text-decoration:none; }
.hx img{ display:block; max-width:100%; }
.hx button{ font-family:inherit; }
/* slider (both designs) */
.hx-slider{ position:relative; }
.hx-slides{ position:relative; aspect-ratio:1920/853; overflow:hidden; background:var(--surface); }
.hx-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s linear .6s; }
.hx-slide.is-on{ opacity:1; visibility:visible; transition:opacity .6s ease; z-index:1; }
.hx-slide img{ width:100%; height:100%; object-fit:cover; }
/* arrows (both designs) */
.hx-arrows{ display:flex; align-items:center; gap:var(--x2); }
.hx-arrow{
    display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; margin:0;
    background:var(--paper); color:var(--ink); border:1px solid var(--ink); border-radius:0;
    font-size:24px; line-height:1; cursor:pointer; transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.hx-arrow:hover:not(:disabled){ background:var(--ink); color:var(--paper); }
.hx-arrow:disabled{ opacity:.25; cursor:default; }
.hx-no-scroll .hx-arrow{ display:none; }
/* buttons */
.hx-btn{
    display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 var(--x6);
    border-radius:0; font-size:var(--t-sm); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    transition:background .15s ease, color .15s ease;
}
.hx .hx-btn-light{ background:var(--paper); color:var(--ink); }
.hx .hx-btn-light:hover{ background:#dfe1e4; }
.hx .hx-btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.hx .hx-btn-outline:hover{ background:var(--ink); color:var(--paper); }
.hx .hx-link{ display:inline-block; padding:var(--x1) 0; border-bottom:1px solid var(--ink); font-size:var(--t-base); letter-spacing:.02em; }
.hx .hx-link:hover{ border-bottom-width:2px; }
/* product card base */
.hx-card{ display:flex; flex-direction:column; min-width:0; }
.hx-card-img{ display:block; aspect-ratio:1/1; overflow:hidden; }
.hx-card-img img{ width:100%; height:100%; object-fit:contain; }
.hx .hx-card-brand{ display:block; }
.hx .hx-card-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hx .hx-card-price{ display:block; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce){
.hx-slide,
.hx-slide.is-on{ transition:none !important; }
}