/* ==========================================================================
   WOW24 — home layout B · Vitrina (design sandbox, arturas@dinamikus.lt only)
   Markup: resources/views/frontend/home/designs/home-b.blade.php
           resources/views/frontend/home/designs/card-b.blade.php
   Shared base (switching, slider fade, .hx resets): home-designs.css
   Global tokens (--x1..x8, --t-*, --ink…): site-designs.css

   Written as a small design system so it can later style the whole site:
     1. tokens      B scale: type, rhythm, gutters (fluid, three steps)
     2. base        scoped resets against production p, span, a, headings, ul styles
     3. type        display · h1 · h2 · lede · body · caption · eyebrow
     4. components  arrow · button · more-link · card · index list · zoom · head
     5. sections    hero · doors · spread · categories · top row · gift · seo
     6. responsive  ≤1199 · ≤991 · ≤767
     7. motion      prefers-reduced-motion
   Rules: black & white only, square corners, Jost. Large type is weight 200,
   body is 400, captions are uppercase 11px tracked. One motion idiom only:
   the slow image zoom on image-led links (.hxb-zoom).
   ========================================================================== */

/* ============================================================ 1. tokens */
html.pdpx-page-home[data-pdp-design="b"] .hx-b{
    /* type — fluid between 390 and 1440 viewports */
    --b-display: clamp(36px, 2.1vw + 28px, 60px);   /* gift, one per page */
    --b-h1:      clamp(32px, 1.6vw + 24px, 48px);   /* section + spread titles */
    --b-door:    clamp(26px, 1.2vw + 21px, 40px);   /* door titles */
    --b-h2:      clamp(24px, .7vw + 20px, 30px);    /* index names, SEO h1 */
    --b-h3:      clamp(17px, .3vw + 16px, 20px);    /* tile labels */
    --b-lede:    17px;
    --b-body:    15px;
    --b-small:   14px;
    --b-caption: 11px;

    --b-track-display: -.025em;
    --b-track-caption: .16em;

    /* rhythm */
    --b-gutter:  var(--x6);        /* page side padding */
    --b-gap:     var(--x6);        /* grid gap between large blocks */
    --b-gap-sm:  var(--x4);        /* grid gap between cards / tiles */
    --b-sec:     120px;            /* between sections */
    --b-sec-sm:  var(--x8);        /* hero → doors */
    --b-max:     calc(1440px - 2 * var(--b-gutter));  /* content grid */
    /* distance from a section's edge to the viewport edge (cqw = .hx-b content box,
       so no 100vw scrollbar overflow); used by the hero and the scroll row */
    --b-bleed:   calc(max(0px, (100cqw - var(--b-max)) / 2) + var(--b-gutter));

    /* tone */
    --b-plate:       var(--surface);  /* product display plate */
    --b-plate-hover: #eceef0;
    --b-focus:       var(--ink);

    display:block; width:100%; max-width:none; align-self:stretch; box-sizing:border-box;
    margin:0; padding:0 var(--b-gutter); container-type:inline-size;
    font-family:'Jost',sans-serif; font-size:var(--b-body); line-height:1.6; color:var(--ink);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ============================================================== 2. base */
.hx-b :is(h1,h2,h3,p,a,span,strong,b,i,li,ul,figure,button,nav){ font-family:inherit; }
.hx-b :is(h1,h2,h3){ font-weight:200; letter-spacing:var(--b-track-display); }
.hx-b ul{ list-style:none; margin:0; padding:0; }
.hx-b li{ margin:0; padding:0; }
.hx-b figure{ margin:0; }
.hx-b svg{ display:block; flex:0 0 auto; }
.hx-b a:hover{ color:inherit; }
/* focus: ink ring (production kills outlines with !important; the sandbox ring is green) */
html[data-pdp-design="b"] .hx-b :is(a,button):focus-visible{
    outline:1px solid var(--b-focus) !important; outline-offset:4px !important;
}
.hx-b .hxb-sec{ max-width:var(--b-max); margin-top:var(--b-sec); margin-left:auto; margin-right:auto; }

/* ============================================================== 3. type */
.hx-b .hxb-display{
    font-size:var(--b-display); font-weight:200; line-height:1.04;
    letter-spacing:var(--b-track-display); text-wrap:balance;
}
.hx-b .hxb-h1{
    font-size:var(--b-h1); font-weight:200; line-height:1.06;
    letter-spacing:var(--b-track-display); text-wrap:balance; overflow-wrap:break-word;
}
.hx-b .hxb-h2{
    font-size:var(--b-h2); font-weight:200; line-height:1.2; letter-spacing:-.015em; text-wrap:balance;
}
.hx-b .hxb-lede{
    font-size:var(--b-lede); line-height:1.6; color:var(--ink2); max-width:40ch; text-wrap:pretty;
}
.hx-b .hxb-body{
    font-size:var(--b-body); line-height:1.7; color:var(--muted); max-width:64ch; text-wrap:pretty;
}
.hx-b .hxb-caption,
.hx-b .hxb-eyebrow{
    font-size:var(--b-caption); font-weight:500; line-height:1.4;
    letter-spacing:var(--b-track-caption); text-transform:uppercase; color:var(--muted);
}

/* ======================================================== 4. components */
/* 4.1 arrow — square, hairline, thin-line icon */
.hx-b .hxb-arrows{ display:flex; align-items:center; gap:var(--x2); flex:0 0 auto; }
.hx-b .hxb-arrow{
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; margin:0; padding:0; cursor:pointer;
    background:transparent; color:var(--ink); border:1px solid var(--rule); border-radius:0;
    transition:border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.hx-b .hxb-arrow:hover:not(:disabled){ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.hx-b .hxb-arrow:disabled{ opacity:.3; cursor:default; }
.hx-b .hxb-arrow svg{ width:20px; height:20px; }

/* 4.2 button — one outline button for the whole layout */
.hx-b .hxb-btn{
    display:inline-flex; align-items:center; justify-content:center; min-height:var(--ctl);
    padding:0 var(--x7); border:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink);
    font-size:var(--t-sm); font-weight:500; letter-spacing:var(--b-track-caption); text-transform:uppercase; line-height:1;
    transition:background-color .2s ease, color .2s ease;
}
.hx-b .hxb-btn:hover{ background:var(--ink); color:var(--paper); }

/* 4.3 more-link — caption type, hairline underline, arrow */
.hx-b .hxb-more{
    display:inline-flex; align-items:center; gap:var(--x3); min-height:44px;
    font-size:var(--t-sm); font-weight:500; letter-spacing:var(--b-track-caption); text-transform:uppercase; color:var(--ink);
    background:linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;
}
.hx-b .hxb-more svg{ width:18px; height:18px; transition:transform .2s ease; }
.hx-b .hxb-more:hover svg{ transform:translateX(3px); }

/* 4.4 card — grey display plate; photos with different whitespace are
   contained in the same padded box and multiplied onto the plate, so white
   backgrounds disappear and every product sits at a similar optical size. */
.hx-b .hxb-card{ display:flex; flex-direction:column; min-width:0; color:var(--ink); }
.hx-b .hxb-card-plate{
    position:relative; display:block; aspect-ratio:1 / 1; overflow:hidden;
    background:var(--b-plate); transition:background-color .3s ease;
}
.hx-b .hxb-card.is-tall .hxb-card-plate{ aspect-ratio:3 / 4; }
.hx-b .hxb-card-plate img{
    position:absolute; inset:11%; width:78%; height:78%; max-width:none;
    object-fit:contain; mix-blend-mode:multiply;
}
.hx-b .hxb-card.is-tall .hxb-card-plate img{ inset:13% 9%; width:82%; height:74%; }
.hx-b .hxb-card:hover .hxb-card-plate{ background:var(--b-plate-hover); }
.hx-b .hxb-card-body{ display:flex; flex-direction:column; flex:1 1 auto; padding-top:var(--x4); }
.hx-b .hxb-card-brand{
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:var(--b-caption); font-weight:500; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.hx-b .hxb-card-name{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin-top:var(--x1); min-height:calc(2 * 1.45em);
    font-size:var(--b-small); font-weight:400; line-height:1.45; color:var(--ink);
    overflow-wrap:anywhere;
}
.hx-b .hxb-card:hover .hxb-card-name{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.hx-b .hxb-card-price{
    display:block; margin-top:auto; padding-top:var(--x2);
    font-size:var(--t-lg); font-weight:300; line-height:1.3; font-variant-numeric:tabular-nums; color:var(--ink);
}
/* focus ring on the plate: rows clip anything drawn outside the card */
html[data-pdp-design="b"] .hx-b .hxb-card:focus-visible{ outline:0 !important; }
html[data-pdp-design="b"] .hx-b .hxb-card:focus-visible .hxb-card-plate{ outline:1px solid var(--b-focus); outline-offset:-1px; box-shadow:inset 0 0 0 3px var(--paper); }

/* 4.5 index — caption column + names set large and light (brands, categories).
   The signature B element. */
.hx-b .hxb-index{
    display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:var(--x5) var(--b-gap);
    padding-top:var(--x6); border-top:1px solid var(--rule);
}
.hx-b .hxb-index-head{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--x2); padding-top:var(--x3); }
.hx-b .hxb-index-all{
    font-size:var(--b-small); line-height:1.4; color:var(--ink);
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--rule);
    transition:text-decoration-color .2s ease; display:inline-flex; align-items:center; min-height:44px;
}
.hx-b .hxb-index-all:hover{ text-decoration-color:var(--ink); }
.hx-b .hxb-index-list{ display:flex; flex-wrap:wrap; gap:0 var(--x6); }
.hx-b .hxb-index-list li{ max-width:100%; }
.hx-b .hxb-index-list a{
    display:inline-block; min-width:44px; min-height:44px; padding:var(--x1) 0;
    font-size:var(--b-h2); font-weight:200; line-height:1.3; letter-spacing:-.015em; color:var(--ink2);
    overflow-wrap:break-word; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px;
    text-decoration-color:transparent; transition:color .2s ease, text-decoration-color .2s ease;
}
.hx-b .hxb-index-list a:hover{ color:var(--ink); text-decoration-color:var(--ink); }
/* phones: the brand list under each world shows 5 names; "Visi prekės ženklai" links to the rest */
@media (max-width:767px){
    .hx-b .hxb-spread-brands .hxb-index-list li:nth-child(n+6){ display:none; }
}

/* 4.6 zoom — the one motion idiom: slow scale on image-led links */
.hx-b .hxb-zoom{ overflow:hidden; background:var(--surface); }
.hx-b .hxb-zoom img{ transition:transform 1.1s cubic-bezier(.19,1,.22,1); }
.hx-b a.hxb-zoom:hover img,
.hx-b a:hover > .hxb-zoom img{ transform:scale(1.03); }

/* 4.7 section head — title left, controls right, shared baseline */
.hx-b .hxb-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:var(--x5);
    margin-bottom:var(--x6);
}

/* ========================================================== 5. sections */
/* 5.1 hero — on the content grid, like every other section (image capped at
   ~3/4 of the viewport height on wide, short screens) */
.hx-b .hxb-hero{ width:100%; max-width:var(--b-max); margin:var(--x5) auto 0; }
.hx-b .hxb-hero .hx-slides{ width:100%; max-height:max(440px, 74vh); margin:0 auto; background:var(--surface); }
.hx-b .hxb-hero-bar{
    display:flex; align-items:center; gap:var(--x5);
    padding:var(--x4) 0 0;
}
.hx-b .hxb-caption{
    flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:clamp(20px, .6vw + 16px, 28px); font-weight:200; letter-spacing:-.01em; line-height:1.2; color:var(--ink) !important;
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:transparent;
    transition:text-decoration-color .2s ease;
}
.hx-b .hxb-caption:hover{ text-decoration-color:var(--ink); }
.hx-b .hxb-count{
    display:flex; align-items:center; gap:var(--x2); white-space:nowrap;
    font-size:var(--t-sm); font-weight:400; letter-spacing:.12em; color:var(--muted); font-variant-numeric:tabular-nums;
}
.hx-b .hxb-count b{ font-weight:500; color:var(--ink); }
.hx-b .hxb-count i{ display:block; width:1px; height:12px; background:var(--rule); transform:skewX(-20deg); }
.hx-b .hxb-progress{ position:relative; flex:1 1 auto; height:1px; background:var(--rule); overflow:hidden; }
.hx-b .hxb-progress i{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--ink); }

/* 5.2 doors — typographic contents of the three worlds (the photos live in
   the spreads only): ink rule, number + down arrow, light title, line, brands */
.hx-b .hxb-doors{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 var(--b-gap); margin-top:var(--b-sec-sm); }
/* categories now follow the hero directly: they take the tight gap the doors had */
.hx-b .hxb-hero + .hxb-cats{ margin-top:var(--b-sec-sm); }
.hx-b .hxb-cats + .hxb-doors{ margin-top:var(--b-sec); }
.hx-b .hxb-doors--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.hx-b .hxb-doors--1{ grid-template-columns:minmax(0,1fr); }
.hx-b .hxb-door{
    display:flex; flex-direction:column; align-items:flex-start; min-width:0;
    padding:var(--x4) 0 var(--x2); border-top:1px solid var(--ink); color:var(--ink);
}
.hx-b .hxb-door-top{ display:flex; align-items:center; justify-content:space-between; align-self:stretch; margin-bottom:var(--x7); }
.hx-b .hxb-door-num{
    font-size:var(--b-caption); font-weight:500; line-height:1.4; letter-spacing:var(--b-track-caption);
    font-variant-numeric:tabular-nums; color:var(--ink);
}
.hx-b .hxb-door-top svg{ width:20px; height:20px; transition:transform .25s ease; }
.hx-b .hxb-door:hover .hxb-door-top svg{ transform:translateX(4px); }
.hx-b .hxb-door-title{
    max-width:100%; font-size:var(--b-door); font-weight:200; line-height:1.08; letter-spacing:var(--b-track-display);
    text-wrap:balance; overflow-wrap:break-word;
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px; text-decoration-color:transparent;
    transition:text-decoration-color .2s ease;
}
.hx-b .hxb-door:hover .hxb-door-title{ text-decoration-color:var(--ink); }
.hx-b .hxb-door-sub{ margin-top:var(--x3); font-size:var(--b-body); line-height:1.5; color:var(--ink2); }
.hx-b .hxb-door-brands{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin-top:var(--x1); font-size:var(--b-small); line-height:1.5; color:var(--muted);
}

/* 5.3 spread — photo + text with 6 products (3×2), flipped every other; brand index spans below */
.hx-b .hxb-spread{
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    grid-template-areas:"img text" "index index";
    gap:var(--x7) var(--x8); align-items:center; scroll-margin-top:var(--x5);
}
.hx-b .hxb-spread.is-flip{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"text img" "index index"; }
/* lean: no products to show, so the photo gives up height to the text */
.hx-b .hxb-spread.is-lean{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.hx-b .hxb-spread.is-lean .hxb-spread-img{ aspect-ratio:1 / 1; }
.hx-b .hxb-spread-img{ grid-area:img; aspect-ratio:4 / 5; overflow:hidden; background:var(--surface); }
/* with products the photo runs the full height of the text column, so the
   pair reads as one block at every desktop width (no floating photo at 1024) */
@media (min-width:992px){
.hx-b .hxb-spread:not(.is-lean) .hxb-spread-img{ align-self:stretch; aspect-ratio:auto; min-height:420px; }
}
.hx-b .hxb-spread-img img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.hx-b .hxb-spread-text{ grid-area:text; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.hx-b .hxb-spread-text .hxb-eyebrow + .hxb-h1{ margin-top:var(--x4); }
.hx-b .hxb-spread-text .hxb-lede{ margin-top:var(--x4); }
.hx-b .hxb-quad{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--x5) var(--b-gap-sm);
    align-self:stretch; margin-top:var(--x6);
}
.hx-b .hxb-quad--1{ grid-template-columns:minmax(0,1fr); max-width:34%; }
.hx-b .hxb-quad--2{ max-width:67%; grid-template-columns:repeat(2, minmax(0,1fr)); }
.hx-b .hxb-quad--4{ max-width:67%; grid-template-columns:repeat(2, minmax(0,1fr)); }
.hx-b .hxb-spread-text .hxb-more{ margin-top:var(--x6); }
.hx-b .hxb-spread-brands{ grid-area:index; }

/* 5.4 categories — 1 big + 4 mosaic, the rest as an index */
.hx-b .hxb-mosaic{
    display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:repeat(2, minmax(0,1fr)); gap:var(--b-gap-sm);
    aspect-ratio:2 / 1; max-height:760px;
}
.hx-b .hxb-mosaic--1{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); aspect-ratio:21 / 9; }
.hx-b .hxb-mosaic--2,
.hx-b .hxb-mosaic--3{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.hx-b .hxb-mosaic--2 .hxb-tile:not(.is-big){ grid-row:1 / span 2; }
.hx-b .hxb-mosaic--4 .hxb-tile:last-child{ grid-column:2 / span 2; }
.hx-b .hxb-tile{ position:relative; display:block; min-height:0; color:var(--ink); }
.hx-b .hxb-tile.is-big{ grid-row:1 / span 2; }
.hx-b .hxb-tile img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.hx-b .hxb-tile-label{
    position:absolute; left:0; bottom:0; max-width:calc(100% - var(--x6));
    padding:var(--x3) var(--x4) var(--x2); background:var(--paper); color:var(--ink);
    font-size:var(--b-h3); font-weight:300; line-height:1.25; letter-spacing:-.005em; overflow-wrap:break-word;
}
.hx-b .hxb-tile.is-big .hxb-tile-label{
    padding:var(--x4) var(--x5) var(--x3); font-size:var(--b-h2); font-weight:200; letter-spacing:-.015em;
}
/* category without a photo: an empty plate carrying its name, set large */
.hx-b .hxb-tile.is-blank{ background:var(--surface); transition:background-color .3s ease; }
.hx-b .hxb-tile.is-blank:hover{ background:var(--b-plate-hover); }
.hx-b .hxb-tile.is-blank .hxb-tile-label{
    padding:var(--x5); background:transparent; font-size:var(--b-h2); font-weight:200; letter-spacing:-.015em; line-height:1.15;
}
.hx-b .hxb-cats-more{ margin-top:var(--x7); }

/* 5.5 Dienos TOP — tall cards, row bleeds to the page edge so the peek reads */
.hx-b .hxb-row{
    --cols:4.4;
    display:grid; grid-auto-flow:column; gap:var(--b-gap-sm);
    grid-auto-columns:calc((100% - var(--b-bleed) - (var(--cols) - 1) * var(--b-gap-sm)) / var(--cols));
    margin-right:calc(var(--b-bleed) * -1); padding-right:var(--b-gutter); scroll-padding-left:0;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
}
.hx-b .hxb-row::-webkit-scrollbar{ display:none; }
.hx-b .hxb-row > .hxb-card{ scroll-snap-align:start; }
.hx-b .hxb-top.hx-no-scroll .hxb-arrows{ display:none; }
/* desktop: whole cards inside the page width (a card cut at the screen edge read as
   "doesn't fit"); arrows page through. Phones/tablets keep the edge-bleed peek. */
@media (min-width:992px){
    .hx-b .hxb-row{
        --cols:5;
        grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--b-gap-sm)) / var(--cols));
        margin-right:0; padding-right:0;
    }
}
@media (min-width:992px) and (max-width:1199px){
    .hx-b .hxb-row{ --cols:4; }
}

/* 5.6 gift — a card: grey plate with an inset hairline frame */
.hx-b .hxb-gift-card{
    position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:clamp(56px, 7vw, 104px) var(--x6); background:var(--surface);
}
.hx-b .hxb-gift-card::before{
    content:""; position:absolute; inset:var(--x4); border:1px solid var(--rule); pointer-events:none;
}
.hx-b .hxb-gift-card > *{ position:relative; }
.hx-b .hxb-gift-card .hxb-display{ max-width:16ch; margin:var(--x4) auto var(--x6); }

/* 5.7 SEO — centred head, two-column link list */
.hx-b .hxb-seo{ max-width:1040px; margin-left:auto; margin-right:auto; margin-bottom:var(--x8); }
.hx-b .hxb-seo-head{ display:flex; flex-direction:column; align-items:center; gap:var(--x4); text-align:center; }
.hx-b .hxb-seo-head .hxb-h2{ max-width:30ch; color:var(--ink); }
.hx-b .hxb-seo-head .hxb-body{ margin:0 auto; }
.hx-b .hxb-seo-list{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--x7);
    margin-top:var(--x7); border-top:1px solid var(--rule);
}
.hx-b .hxb-seo-list a{ display:block; height:100%; padding:var(--x5) 0; border-bottom:1px solid var(--rule); color:var(--ink); }
.hx-b .hxb-seo-list strong{
    display:block; font-size:var(--t-lg); font-weight:400; line-height:1.35;
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:transparent;
    transition:text-decoration-color .2s ease;
}
.hx-b .hxb-seo-list span{ display:block; margin-top:var(--x1); font-size:var(--b-small); line-height:1.6; color:var(--muted); text-wrap:pretty; }
.hx-b .hxb-seo-list a:hover strong{ text-decoration-color:var(--ink); }

/* ======================================================== 6. responsive */
@media (max-width:1199px){
html.pdpx-page-home[data-pdp-design="b"] .hx-b{ --b-sec:96px; --b-gap:var(--x5); }
.hx-b .hxb-spread{ column-gap:var(--x7); }
}
/* tablet — spreads stack: photo, text, 4 products in a line, index */
@media (max-width:991px){
.hx-b .hxb-spread,
.hx-b .hxb-spread.is-flip,
.hx-b .hxb-spread.is-lean{ grid-template-columns:minmax(0,1fr); grid-template-areas:"img" "text" "index"; row-gap:var(--x6); }
.hx-b .hxb-spread-img,
.hx-b .hxb-spread.is-lean .hxb-spread-img{ aspect-ratio:3 / 2; }
.hx-b .hxb-door-top{ margin-bottom:var(--x6); }
.hx-b .hxb-quad{ grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:var(--x6); }
.hx-b .hxb-quad--1{ max-width:34%; }
.hx-b .hxb-index{ grid-template-columns:minmax(0,1fr); gap:var(--x3); }
.hx-b .hxb-index-head{ flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:var(--x5); padding-top:0; }
.hx-b .hxb-mosaic{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:none; aspect-ratio:auto; max-height:none; }
.hx-b .hxb-mosaic .hxb-tile{ grid-column:auto; grid-row:auto; aspect-ratio:1 / 1; }
.hx-b .hxb-mosaic .hxb-tile.is-big{ grid-column:1 / -1; aspect-ratio:16 / 9; }
.hx-b .hxb-mosaic--2 .hxb-tile:not(.is-big),
.hx-b .hxb-mosaic--4 .hxb-tile:last-child{ grid-column:1 / -1; aspect-ratio:16 / 9; }
.hx-b .hxb-row{ --cols:2.6; }
.hx-b .hxb-seo-list{ column-gap:var(--x5); }
}
/* phone */
@media (max-width:767px){
html.pdpx-page-home[data-pdp-design="b"] .hx-b{
    --b-gutter:var(--x4); --b-gap:var(--x3); --b-gap-sm:var(--x3); --b-sec:72px; --b-sec-sm:var(--x7);
    --b-lede:16px;
}
.hx-b .hxb-hero{ margin-top:var(--x3); }
.hx-b .hxb-hero-bar{ gap:var(--x4); padding-top:var(--x2); }
.hx-b .hxb-hero-bar .hxb-arrow{ width:44px; height:44px; border-color:transparent; }
.hx-b .hxb-hero-bar .hxb-arrows{ gap:0; margin-right:calc(var(--x3) * -1); }
/* doors become a ruled list: number · title + line · arrow */
.hx-b .hxb-doors,
.hx-b .hxb-doors--2{ grid-template-columns:minmax(0,1fr); gap:0; }
.hx-b .hxb-door{
    display:grid; grid-template-columns:28px minmax(0,1fr) auto; column-gap:var(--x3); align-items:baseline;
    padding:var(--x4) 0; border-top-color:var(--rule);
}
.hx-b .hxb-door:first-child{ border-top-color:var(--ink); }
.hx-b .hxb-door:last-child{ border-bottom:1px solid var(--rule); }
.hx-b .hxb-door-top{ display:contents; }
.hx-b .hxb-door-num{ grid-column:1; grid-row:1; }
.hx-b .hxb-door-top svg{ grid-column:3; grid-row:1 / span 2; align-self:center; }
.hx-b .hxb-door-title{ grid-column:2; grid-row:1; font-size:26px; line-height:1.15; }
.hx-b .hxb-door-sub{ grid-column:2; grid-row:2; margin-top:var(--x1); font-size:var(--b-small); color:var(--muted); }
.hx-b .hxb-door-brands{ display:none; }
.hx-b .hxb-spread.is-lean .hxb-spread-img{ aspect-ratio:4 / 3; }
.hx-b .hxb-tile.is-blank .hxb-tile-label{ padding:var(--x3) var(--x4); font-size:18px; font-weight:300; }
.hx-b .hxb-tile.is-big.is-blank .hxb-tile-label{ font-size:24px; font-weight:200; }
.hx-b .hxb-spread,
.hx-b .hxb-spread.is-flip{ row-gap:var(--x5); }
.hx-b .hxb-spread-img{ aspect-ratio:4 / 3; margin:0 calc(var(--b-gutter) * -1); }
/* phone: the 6 products become a swipe row instead of three rows of two */
.hx-b .hxb-quad,
.hx-b .hxb-quad--2,
.hx-b .hxb-quad--4{
    display:flex; gap:var(--x3); max-width:none; margin:var(--x5) calc(var(--b-gutter) * -1) 0; padding:0 var(--b-gutter) var(--x2);
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--b-gutter); overscroll-behavior-x:contain; scrollbar-width:none;
}
.hx-b .hxb-quad::-webkit-scrollbar{ display:none; }
.hx-b .hxb-quad > *{ flex:0 0 42%; scroll-snap-align:start; }
.hx-b .hxb-quad--1{ max-width:none; }
.hx-b .hxb-card-body{ padding-top:var(--x3); }
.hx-b .hxb-card-name{ font-size:13px; }
.hx-b .hxb-card-price{ font-size:15px; }
.hx-b .hxb-spread-text .hxb-more{ margin-top:var(--x4); }
.hx-b .hxb-index{ padding-top:var(--x5); }
.hx-b .hxb-index-list{ column-gap:var(--x5); }
.hx-b .hxb-index-list a{ font-size:22px; padding:var(--x2) 0; white-space:normal; }
.hx-b .hxb-head{ margin-bottom:var(--x5); }
.hx-b .hxb-mosaic .hxb-tile.is-big{ aspect-ratio:4 / 3; }
.hx-b .hxb-mosaic--2 .hxb-tile:not(.is-big),
.hx-b .hxb-mosaic--4 .hxb-tile:last-child{ aspect-ratio:4 / 3; }
.hx-b .hxb-tile-label{ max-width:calc(100% - var(--x3)); padding:var(--x2) var(--x3) 6px; font-size:14px; font-weight:400; }
.hx-b .hxb-tile.is-big .hxb-tile-label{ padding:var(--x3) var(--x4) var(--x2); font-size:22px; }
.hx-b .hxb-cats-more{ margin-top:var(--x6); }
.hx-b .hxb-row{ --cols:1.7; }
.hx-b .hxb-top .hxb-arrows{ display:none; }
.hx-b .hxb-gift{ margin-left:calc(var(--b-gutter) * -1); margin-right:calc(var(--b-gutter) * -1); }
.hx-b .hxb-gift-card{ padding:var(--x8) var(--x6); }
.hx-b .hxb-gift-card::before{ inset:var(--x3); }
.hx-b .hxb-btn{ width:100%; max-width:320px; padding:0 var(--x5); }
.hx-b .hxb-seo{ margin-bottom:var(--x7); }
.hx-b .hxb-seo-head{ align-items:flex-start; text-align:left; }
.hx-b .hxb-seo-list{ grid-template-columns:minmax(0,1fr); margin-top:var(--x6); }
.hx-b .hxb-seo-list a{ padding:var(--x4) 0; }
}

/* ============================================================ 7. motion */
@media (prefers-reduced-motion:reduce){
.hx-b *,
.hx-b *::before,
.hx-b *::after{ transition-duration:0s !important; }
.hx-b a.hxb-zoom:hover img,
.hx-b a:hover > .hxb-zoom img,
.hx-b .hxb-more:hover svg{ transform:none; }
.hx-b .hxb-row{ scroll-behavior:auto; }
.hx-b .hxb-door:hover .hxb-door-top svg{ transform:none; }
}

/* hero stop/start (2026-09-21): same square as the arrows, pause bars ↔ play triangle */
.hx-b .hxb-play .hxb-ico-play{ display:none; }
.hx-b .hxb-play.is-stopped .hxb-ico-play{ display:block; }
.hx-b .hxb-play.is-stopped .hxb-ico-stop{ display:none; }
.hx-b .hxb-play[hidden]{ display:none !important; }

/* 5.6b gift — the designed banner image per language (2026-09-30) */
.hx-b .hxb-gift-banner{ display:block; position:relative; line-height:0; }
.hx-b .hxb-gift-banner img{ display:block; width:100%; height:auto; }
.hx-b .hxb-gift-banner:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.hx-b .hxb-gift-banner .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ==========================================================================
   Deal slide — kvepalusala's decant campaign as the first hero slide (2026-10-01, admin-only until approved).
   An HTML slide inside the 1920×853 hero frame: black campaign panel + a sideways row of deal cards
   (4 visible on desktop, 3 on tablet, ~2 on phones; 8 in the row). Phones: the frame turns square while
   a campaign runs (.has-deal), the brand photos are centre-cropped.
   ========================================================================== */
.hx-b .hxb-deal{
    display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    background:var(--surface); color:var(--ink);
}
.hx-b .hxb-deal-panel{
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0;
    padding:clamp(24px, 3.2vw, 64px); background:var(--ink); color:var(--paper);
}
.hx-b .hxb-deal-eyebrow{
    margin:0; font-size:var(--b-caption); font-weight:500; letter-spacing:var(--b-track-caption);
    text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hx-b .hxb-deal-title{
    margin:var(--x3) 0 0; font-size:var(--b-h1); font-weight:200; line-height:1.05;
    letter-spacing:var(--b-track-display); color:var(--paper); overflow-wrap:anywhere;
}
.hx-b .hxb-deal-lede{ margin:var(--x3) 0 0; font-size:var(--b-body); line-height:1.5; color:rgba(255,255,255,.8); }
.hx-b .hxb-deal-cd{
    margin:var(--x5) 0 0; font-size:clamp(26px, 1.6vw + 18px, 44px); font-weight:300; line-height:1;
    font-variant-numeric:tabular-nums; letter-spacing:.02em; color:var(--paper);
}
.hx-b .hxb-deal-all{
    display:inline-flex; align-items:center; gap:var(--x2); min-height:var(--tap); margin-top:var(--x5);
    font-size:var(--t-sm); font-weight:500; letter-spacing:.16em; text-transform:uppercase;
    color:var(--paper); text-decoration:none; border-bottom:1px solid currentColor;
}
.hx-b .hxb-deal-all:hover,
.hx-b .hxb-deal-all:focus-visible{ color:rgba(255,255,255,.75); }

/* the card row: fills the frame's height, scrolls sideways */
.hx-b .hxb-deal-cards{
    --deal-n:4;
    display:grid; grid-auto-flow:column; align-items:stretch; min-width:0; min-height:0;
    grid-auto-columns:calc((100% - (var(--deal-n) - 1) * var(--x4)) / var(--deal-n));
    gap:var(--x4); padding:clamp(16px, 2vw, 40px); scroll-padding-inline:clamp(16px, 2vw, 40px);
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none;
    height:100%;
}
.hx-b .hxb-deal-cards::-webkit-scrollbar{ display:none; }
@media (hover:hover) and (pointer:fine){
    .hx-b .hxb-deal-cards{ cursor:grab; }
    .hx-b .hxb-deal-cards.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; }
    .hx-b .hxb-deal-cards.is-dragging .hxb-deal-card{ pointer-events:none; }
}
/* the row + its arrows; the arrows only on screens with a mouse (touch swipes the row) */
.hx-b .hxb-deal-rail{ position:relative; min-width:0; min-height:0; }
.hx-b .hxb-deal-nav{
    position:absolute; top:50%; z-index:4; display:none; align-items:center; justify-content:center;
    width:44px; height:44px; margin-top:-22px; padding:0; border:1px solid var(--ink); border-radius:0;
    background:var(--paper); color:var(--ink); cursor:pointer; transition:opacity .2s ease, background .2s ease, color .2s ease;
}
.hx-b .hxb-deal-nav.is-prev{ left:var(--x2); }
.hx-b .hxb-deal-nav.is-next{ right:var(--x2); }
.hx-b .hxb-deal-nav:hover,
.hx-b .hxb-deal-nav:focus-visible{ background:var(--ink); color:var(--paper); }
.hx-b .hxb-deal-nav[disabled]{ opacity:0; pointer-events:none; }
/* arrows dropped (owner 2026-10-01: drag instead) — .hxb-deal-nav styles kept unused */
.hx-b .hxb-deal-card{
    display:flex; flex-direction:column; min-width:0; min-height:0; scroll-snap-align:start;
    color:var(--ink); text-decoration:none;
}
.hx-b .hxb-deal-plate{
    position:relative; display:flex; align-items:center; justify-content:center;
    flex:1 1 auto; min-height:0; overflow:hidden; background:var(--paper);
}
.hx-b .hxb-deal-plate img{
    display:block; width:100%; height:100%; max-height:100%; object-fit:contain; padding:var(--x3);
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.hx-b .hxb-deal-card:hover .hxb-deal-plate img{ transform:scale(1.04); }
.hx-b .hxb-deal-pct{
    position:absolute; top:var(--x2); left:var(--x2); z-index:1; padding:3px var(--x2);
    background:var(--ink); color:var(--paper); font-size:var(--t-xs); font-weight:500; letter-spacing:.04em; line-height:1.4;
}
.hx-b .hxb-deal-body{ display:flex; flex-direction:column; flex:0 0 auto; padding-top:var(--x3); }
.hx-b .hxb-deal-brand{
    font-size:var(--b-caption); font-weight:500; letter-spacing:var(--b-track-caption); text-transform:uppercase;
    color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hx-b .hxb-deal-name{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin-top:var(--x1); min-height:calc(2 * 1.4em); font-size:var(--t-md); line-height:1.4; color:var(--ink);
}
.hx-b .hxb-deal-prices{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 var(--x2); margin-top:var(--x2); }
.hx-b .hxb-deal-from{ font-size:var(--b-caption); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.hx-b .hxb-deal-new{ font-size:16px; font-weight:500; color:var(--ink); }
.hx-b .hxb-deal-old{ font-size:var(--t-md); color:var(--muted); }
.hx-b .hxb-deal-card:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

@media (max-width:1199px){
    .hx-b .hxb-deal{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
    .hx-b .hxb-deal-cards{ --deal-n:3; }
    .hx-b .hxb-deal-title{ font-size:var(--b-door); }
}
@media (max-width:991px){
    .hx-b .hxb-deal-cards{ --deal-n:2.2; gap:var(--x3); padding:var(--x4); scroll-padding-inline:var(--x4); }
    .hx-b .hxb-deal-cd{ margin-top:var(--x4); }
    .hx-b .hxb-deal-all{ margin-top:var(--x3); }
    .hx-b .hxb-deal-name{ font-size:var(--t-sm); }
}
/* phones: square frame while a campaign runs; panel on top, cards below */
@media (max-width:767px){
    .hx-b .hxb-hero.has-deal .hx-slides{ aspect-ratio:1 / 1.12; max-height:none; }
    .hx-b .hxb-deal{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
    .hx-b .hxb-deal-panel{
        display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:var(--x1) var(--x4);
        padding:var(--x4) var(--x4) var(--x4);
    }
    .hx-b .hxb-deal-eyebrow{ grid-column:1 / -1; }
    .hx-b .hxb-deal-title{ grid-column:1; margin:0; font-size:24px; line-height:1.1; }
    .hx-b .hxb-deal-cd{ grid-column:2; grid-row:2; margin:0; font-size:20px; }
    .hx-b .hxb-deal-all{ grid-column:1 / -1; min-height:36px; margin-top:var(--x1); justify-self:start; }
    .hx-b .hxb-deal-cards{ --deal-n:2.3; gap:var(--x3); padding:var(--x3) var(--x4) var(--x4); scroll-padding-inline:var(--x4); }
    .hx-b .hxb-deal-body{ padding-top:var(--x2); }
    .hx-b .hxb-deal-new{ font-size:15px; }
    .hx-b .hxb-deal-lede{ display:none; }
    .hx-b .hxb-deal-plate{ min-height:96px; }
    .hx-b .hxb-deal-plate img{ padding:var(--x2); }
    .hx-b .hxb-deal-prices{ flex-wrap:nowrap; white-space:nowrap; }
    .hx-b .hxb-deal-old{ font-size:var(--t-xs); }
    .hx-b .hxb-deal-from{ display:none; }
    /* the bar carries a long campaign caption + 7 slides: the progress line goes, the arrows stay inside */
    .hx-b .hxb-hero.has-deal .hxb-progress{ display:none; }
}
@media (max-width:380px){
    .hx-b .hxb-hero.has-deal .hx-slides{ aspect-ratio:1 / 1.22; }
}
/* desktop: the frame is tall — 4:5 plates centred instead of tall thin boxes around small bottles.
   Exactly 4 whole cards: the side padding moves from the scrolling row to its wrapper (a scroller's padding
   shows the next card peeking in), and the row pages 4 by 4 by itself (home-designs.js rail autoplay). */
@media (min-width:1200px){
    .hx-b .hxb-deal-rail{ padding:0 clamp(16px, 2vw, 40px); }
    .hx-b .hxb-deal-cards{ align-items:center; padding-left:0; padding-right:0; scroll-padding-inline:0; }
    .hx-b .hxb-deal-plate{ flex:0 0 auto; aspect-ratio:4 / 5; }
}
/* photos with a light-grey background melt into the white plate */
.hx-b .hxb-deal-plate img{ mix-blend-mode:multiply; }
@media (prefers-reduced-motion:reduce){
    .hx-b .hxb-deal-plate img{ transition:none; }
}
/* campaign panel with the admin's background photo (Campaign Slide Background), overlay is inline */
.hx-b .hxb-deal-panel.has-bg{ background-color:var(--ink); background-size:cover; background-position:center; background-repeat:no-repeat; }
/* product-card area with the admin's background photo; light overlay inline (dark card text sits on it) */
.hx-b .hxb-deal-rail.has-bg{ background-color:var(--surface); background-size:cover; background-position:center; background-repeat:no-repeat; }
/* panel background: desktop image / phone image (own upload, automatic crop, or none = plain black), 2026-10-02 */
.hx-b .hxb-deal-panel.has-bg{ background-image:linear-gradient(rgba(17,18,20,.55), rgba(17,18,20,.55)), var(--deal-bg); }
@media (max-width:767px){
    .hx-b .hxb-deal-panel.has-bg{ background-image:linear-gradient(rgba(17,18,20,.55), rgba(17,18,20,.55)), var(--deal-bg-m, none); }
}
/* phones: smaller "Žiūrėti visus" link in the campaign panel (owner 2026-10-02) */
@media (max-width:767px){
    .hx-b .hxb-deal-all{ min-height:28px; gap:4px; font-size:10px; letter-spacing:.12em; }
    .hx-b .hxb-deal-all svg{ width:14px; height:14px; }
}
/* phones: the panel takes the phone image's own shape (1200×500) so the whole design shows, frame included —
   a fixed ~142 px height cropped it on wider phones (owner 2026-10-02). Grows if the text ever needs more room. */
@media (max-width:767px){
    .hx-b .hxb-deal-panel.has-bg{ aspect-ratio:1200 / 500; align-content:center; background-position:center; }
}
@media (max-width:380px){
    .hx-b .hxb-deal-panel.has-bg{ padding-top:var(--x3); padding-bottom:var(--x3); }
}