/* ===== Ідеальна Ялинка — landing styles ===== */
:root{
  --green-900:#0d2a1a; --green-800:#123c25; --green:#14532d; --green-600:#1b6b3a;
  --gold:#c8a24a; --gold-2:#d8b869; --gold-dark:#a9852f;
  --ink:#16241c; --muted:#5c6b62; --line:#e7ece8;
  --bg:#ffffff; --bg-soft:#f6f8f6; --bg-cream:#faf7f0;
  --red:#c0392b; --white:#fff;
  --radius:18px; --radius-sm:12px; --nav-h:70px;
  --shadow:0 18px 50px rgba(13,42,26,.10); --shadow-sm:0 8px 24px rgba(13,42,26,.08);
  --ff-head:"Playfair Display",Georgia,serif; --ff-body:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{font-family:var(--ff-body);color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none}
h1,h2,h3,h4{font-family:var(--ff-head);line-height:1.15;font-weight:600}
a,button,[role=button],select,label[for],.product-card,.tab,.faq-q,.hero-dot,.reviews-dot,.nav-burger,.cart-btn,.qty-btn{cursor:pointer}
.container{width:min(1180px,92%);margin:0 auto}
.container-narrow{width:min(820px,92%)}
section,[id]{scroll-margin-top:calc(var(--promo-h) + var(--nav-h) + 12px)}
/* Browser surfaces themed from the palette — selection, focus ring, tap highlight. */
::selection{background:var(--green);color:#fff}
::-moz-selection{background:var(--green);color:#fff}
:focus-visible{outline:2px solid var(--green-600);outline-offset:2px;border-radius:6px}
html{-webkit-tap-highlight-color:rgba(20,83,45,.12)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.8rem;border-radius:100px;font-weight:700;font-size:1rem;transition:transform .2s,box-shadow .2s,background .2s;letter-spacing:.01em}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#3a2b06;box-shadow:0 10px 26px rgba(200,162,74,.38)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(200,162,74,.48)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.6);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-600)}
.btn-outline{border:1.5px solid var(--green);color:var(--green)}
.btn-block{width:100%}

/* Sections */
.section{padding:5rem 0}
.section-soft{background:var(--bg-soft)}
.section-green{background:linear-gradient(160deg,var(--green-900),var(--green-800));color:#fff}
.section-green .section-sub{color:rgba(255,255,255,.75)}
.section-head{text-align:center;max-width:640px;margin:0 auto 3rem}
.section-title{font-size:clamp(1.8rem,4vw,2.7rem);color:inherit}
.section-green .section-title{color:#fff}
.section-sub{color:var(--muted);margin-top:.7rem;font-size:1.05rem}
/* Highlighted savings amount inside a section subtitle (e.g. "до 2000 грн") */
.hl-save{display:inline-block;color:var(--red);font-weight:800;background:rgba(192,57,43,.09);padding:.05em .5em;border-radius:100px;white-space:nowrap}
.section-glow{height:1px;max-width:600px;margin:0 auto;background:linear-gradient(90deg,transparent,rgba(200,162,74,.35),var(--gold),rgba(200,162,74,.35),transparent);opacity:.5}

/* Snow effect — full-screen canvas, never intercepts clicks, sits under the sticky header/modals */
.snow-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:5}
@media (prefers-reduced-motion:reduce){.snow-canvas{display:none}}

/* Promobar */
.promobar{background:var(--green-900);color:#fbf4e2;overflow:hidden;font-size:.86rem;font-weight:500;white-space:nowrap;position:relative;z-index:60}
.promobar-track{display:inline-flex;align-items:center;gap:1.4rem;padding:.5rem 0;animation:marquee 28s linear infinite}
.promobar-item{display:inline-block}
.promobar-sep{color:var(--gold)}
.promobar .js-countdown{color:var(--gold-2);font-weight:800}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.scrolled{box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.55rem}
.brand-mark{color:var(--green);display:grid;place-items:center}
.brand-name{font-family:var(--ff-head);font-weight:700;font-size:1.2rem;color:var(--green-900);letter-spacing:.01em;text-transform:uppercase}
.nav-links{display:flex;gap:1.7rem}
.nav-links a{font-weight:600;font-size:.96rem;color:var(--ink);position:relative;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--green)}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-phone{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--green);font-size:.92rem}
.cart-btn{position:relative;color:var(--green-900);display:grid;place-items:center;width:42px;height:42px}
.cart-badge{position:absolute;top:2px;right:0;background:var(--red);color:#fff;font-size:.68rem;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.nav-burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center}
.nav-burger span{width:22px;height:2px;background:var(--green-900);border-radius:2px;transition:.3s}

/* Mobile menu */
.mobile-menu{position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100dvh;background:#fff;z-index:120;box-shadow:-10px 0 40px rgba(0,0,0,.15);transition:right .35s;display:flex;flex-direction:column;padding:1.2rem}
.mobile-menu.open{right:0}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.mm-close{font-size:2rem;line-height:1;color:var(--muted)}
.mm-links{display:flex;flex-direction:column;margin-top:1rem}
.nm-link{padding:.9rem .4rem;font-weight:600;border-bottom:1px solid var(--line)}
.nm-link.active{color:var(--green);box-shadow:inset 3px 0 0 var(--gold)}
.mm-socials{margin-top:auto;padding-top:1rem}
.mm-phone{font-weight:800;color:var(--green);font-size:1.1rem}
.mm-icons{display:flex;gap:.7rem;margin-top:.8rem}
.mm-icons a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff}
.overlay{position:fixed;inset:0;background:rgba(13,42,26,.5);z-index:110;opacity:0;visibility:hidden;transition:.3s}
.overlay.show{opacity:1;visibility:visible}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-slides{position:absolute;inset:0;display:flex;transition:transform .6s cubic-bezier(.6,0,.3,1);will-change:transform}
.hero-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.hero-slide img,.hero-slide .hero-video{width:100%;height:100%;object-fit:cover;display:block}
.hero-slide.active img{animation:heroZoom 9s ease forwards}
.hero-vbg{display:none}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,28,17,.82),rgba(9,28,17,.45) 55%,rgba(9,28,17,.25));pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:680px;padding:6rem 0}
.hero-badge{display:inline-block;background:rgba(200,162,74,.2);border:1px solid var(--gold);color:var(--gold-2);padding:.4rem 1rem;border-radius:100px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hero-title{font-size:clamp(2.3rem,5.4vw,4rem);margin:1.2rem 0;font-weight:700}
.hero-sub{font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,.9);max-width:560px}
.hero-rating{display:flex;align-items:center;gap:.55rem;margin-top:1.4rem;flex-wrap:wrap}
.hero-rating[hidden]{display:none}
.hr-stars{color:var(--gold-2);font-size:1.05rem;letter-spacing:.12em;line-height:1}
.hr-text{color:rgba(255,255,255,.92);font-size:.95rem}
.hr-text b{color:#fff;font-weight:800}
.hero-cta{display:flex;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.hero-dots{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;gap:.55rem;z-index:3}
.hero-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);transition:.3s}
.hero-dot.active{background:var(--gold-2);width:26px;border-radius:5px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:1.6rem;display:grid;place-items:center;backdrop-filter:blur(4px)}
.hero-arrow.prev{left:1.2rem}.hero-arrow.next{right:1.2rem}
.hero-arrow:hover{background:rgba(255,255,255,.28)}
.hero-scroll{position:absolute;bottom:1.2rem;right:1.4rem;z-index:3}
.hero-scroll span{display:block;width:22px;height:36px;border:2px solid rgba(255,255,255,.6);border-radius:12px;position:relative}
.hero-scroll span::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:var(--gold-2);border-radius:2px;animation:scrollBounce 1.5s infinite}
@keyframes scrollBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* Trust */
.trust{background:var(--green-900);color:#fff;padding:2.2rem 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:center}
.trust-value{display:block;font-family:var(--ff-head);font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:700;color:var(--gold-2)}
.trust-label{font-size:.85rem;color:rgba(255,255,255,.72)}

/* Product grid + cards */
/* Desktop: a 3-up grid so every model in a shelf is visible at once (few items per category).
   Phones collapse this into a 2-up swipe carousel with dots (see @media below). */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
/* Carousel dots — only shown on mobile when the grid becomes a horizontal carousel (see @media below) */
.catalog-dots{display:none}
.catalog-dots[hidden]{display:none}
.cat-dot{width:8px;height:8px;padding:0;border-radius:50%;border:none;background:var(--line);transition:.25s;cursor:pointer}
.cat-dot.active{background:var(--green);transform:scale(1.35)}
/* One catalog block per group: left-aligned title + product count on the left, carousel
   prev/next arrows on the right, sub-tabs, then the shelf.
   The three blocks alternate white / soft-cream bands (A·B·A) so each reads as its own shelf. */
.catalog-block{padding:3.4rem 0;position:relative}
.catalog-block:nth-of-type(even){background:var(--bg-cream)}
.cat-block-head{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.4rem;flex-wrap:wrap;margin:0 0 1.5rem}
.cat-block-heading{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.cat-block-head .section-title{margin:0;text-align:left;position:relative;padding-bottom:.55rem}
/* Short gold rule under each shelf title — the site's gold accent, scaled down. */
.cat-block-head .section-title::after{content:"";position:absolute;left:0;bottom:0;width:2.4rem;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.cat-count{font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
/* Carousel prev/next arrows — JS shows them only when the shelf overflows (i.e. the phone carousel). */
.catalog-nav{display:flex;gap:.55rem;align-items:center;flex:0 0 auto}
.catalog-nav[hidden]{display:none}
.cat-arrow{width:42px;height:42px;padding:0;border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--green);box-shadow:0 6px 18px rgba(13,42,26,.10);display:grid;place-items:center;cursor:pointer;transition:transform .18s,color .18s,background .18s,border-color .18s,opacity .18s;flex:0 0 auto}
.cat-arrow svg{width:20px;height:20px}
.cat-arrow:hover:not(:disabled){background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-1px)}
.cat-arrow:focus-visible{outline:2px solid var(--green-600);outline-offset:2px}
.cat-arrow:active{transform:scale(.92)}
.cat-arrow:disabled{opacity:.35;pointer-events:none}
.catalog-block .tabs{justify-content:flex-start;margin-bottom:1.7rem}
.product-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pc-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft)}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.product-card:hover .pc-media img{transform:scale(1.05)}
.pc-badge{position:absolute;top:.8rem;left:.8rem;padding:.32rem .8rem;border-radius:100px;font-size:.74rem;font-weight:800;color:#fff;background:var(--gold);z-index:2}
.pc-badge.green{background:var(--green-600)}.pc-badge.red{background:var(--red)}.pc-badge.dark{background:var(--green-900)}.pc-badge.gold{background:var(--gold-dark)}
.pc-disc{position:absolute;top:.8rem;right:.8rem;background:var(--red);color:#fff;font-weight:800;font-size:.78rem;padding:.3rem .6rem;border-radius:100px;z-index:2}
.pc-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.pc-height{font-size:.78rem;font-weight:700;color:var(--gold-dark);text-transform:uppercase;letter-spacing:.05em}
.pc-name{font-size:1.12rem;margin:.35rem 0 .4rem;color:var(--green-900)}
.pc-desc{font-size:.9rem;color:var(--muted);flex:1}
.pc-price{display:flex;align-items:baseline;gap:.6rem;margin:.8rem 0}
.pc-cur{font-family:var(--ff-head);font-size:1.5rem;font-weight:700;color:var(--green)}
.pc-old{color:#a9b3ac;text-decoration:line-through;font-size:.95rem}
.pc-save{font-size:.82rem;color:var(--red);font-weight:700;margin-bottom:.6rem}
.pc-actions{display:flex;gap:.5rem}
.pc-actions .btn{flex:1;padding:.7rem 1rem;font-size:.9rem}
.pc-detail{border:1.5px solid var(--line);border-radius:100px;width:46px;flex:0 0 46px;display:grid;place-items:center;color:var(--green)}
.pc-detail:hover{border-color:var(--green);background:var(--bg-soft)}
.pc-qty{display:flex;align-items:center;justify-content:space-between;flex:1;border:1.5px solid var(--green);border-radius:100px;overflow:hidden}
.pc-qty button{width:42px;height:40px;color:var(--green);font-size:1.3rem;font-weight:700}
.pc-qty span{font-weight:800}

/* Tabs */
/* Top-level catalog tabs (Ялинки / Іграшки / Гірлянди) */
/* Unified catalog: discount promo banner + cross-cutting quick-filter chips (all/sale/popular) */
.catalog-deal-banner{display:flex;align-items:center;gap:.9rem;width:100%;max-width:720px;margin:0 auto 1.3rem;padding:.85rem 1.3rem;border-radius:16px;border:1.5px solid rgba(200,162,74,.5);background:linear-gradient(100deg,rgba(200,162,74,.12),rgba(192,57,43,.06));text-align:left;transition:.2s}
.catalog-deal-banner:hover{border-color:var(--gold);box-shadow:0 10px 26px rgba(200,162,74,.22);transform:translateY(-1px)}
.catalog-deal-banner[hidden]{display:none}
.cdb-icon{font-size:1.6rem;line-height:1}
.cdb-text{display:flex;flex-direction:column;gap:.12rem;flex:1;min-width:0}
.cdb-title{font-family:var(--ff-head);font-size:1.05rem;color:var(--green-900);font-weight:700}
.cdb-sub{font-size:.85rem;color:var(--ink)}
.cdb-cta{flex:0 0 auto;font-weight:800;color:var(--green);font-size:.9rem;white-space:nowrap}
.catalog-specials{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
.spec-chip{padding:.6rem 1.35rem;border-radius:100px;border:1.5px solid var(--line);font-weight:700;font-size:.95rem;color:var(--green-900);background:#fff;transition:.2s;box-shadow:0 2px 8px rgba(13,42,26,.05);white-space:nowrap}
.spec-chip:hover:not(.active){border-color:var(--gold);color:var(--gold-dark)}
.spec-chip.active{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#3a2b06;border-color:var(--gold);box-shadow:0 8px 20px rgba(200,162,74,.32)}
.spec-chip[hidden]{display:none}
.catalog-groups[hidden]{display:none}
.catalog-groups{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.3rem}
.cat-group{padding:.8rem 1.9rem;border-radius:100px;border:1.5px solid var(--line);font-weight:700;font-size:1.02rem;color:var(--green-900);background:#fff;transition:.2s;box-shadow:0 2px 8px rgba(13,42,26,.05)}
.cat-group.active{background:linear-gradient(135deg,var(--green),var(--green-900));color:#fff;border-color:var(--green);box-shadow:0 10px 24px rgba(20,83,45,.28)}
.cat-group:hover:not(.active){border-color:var(--gold);color:var(--gold-dark)}
.tabs{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.4rem}
.tabs[hidden]{display:none}
.tab{padding:.5rem 1.15rem;border-radius:100px;border:1.5px solid var(--line);font-weight:600;font-size:.88rem;color:var(--ink);transition:.2s;background:#fff}
.tab.active{background:var(--green);color:#fff;border-color:var(--green)}
.tab:hover:not(.active){border-color:var(--green-600);color:var(--green)}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:-.4rem 0 2rem}
/* In-stock filter styled as a pill chip to match .cat-group / .tab buttons */
.cat-instock{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.15rem;border-radius:100px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:.9rem;color:var(--ink);cursor:pointer;user-select:none;transition:.2s;box-shadow:0 2px 8px rgba(13,42,26,.05)}
.cat-instock:hover{border-color:var(--green-600);color:var(--green)}
.cat-instock input{position:absolute;opacity:0;width:0;height:0}
.cat-instock .cb-box{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line);display:grid;place-items:center;transition:.2s;flex:none}
.cat-instock .cb-box svg{width:12px;height:12px;color:#fff;opacity:0;transition:.15s}
.cat-instock:has(input:checked){background:var(--green);border-color:var(--green);color:#fff}
.cat-instock:has(input:checked) .cb-box{border-color:#fff}
.cat-instock:has(input:checked) .cb-box svg{opacity:1}
.cat-instock:focus-within{outline:2px solid var(--green-600);outline-offset:2px}
.cat-sort{display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:600;color:var(--muted)}
.cat-sort select{padding:.55rem 2.3rem .55rem 1.15rem;border-radius:100px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:.9rem;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:0 2px 8px rgba(13,42,26,.05);transition:.2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230d2a1a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center}
.cat-sort select:hover{border-color:var(--green-600)}
.cat-sort select:focus-visible{outline:2px solid var(--green-600);outline-offset:1px}
@media(max-width:520px){.catalog-toolbar{justify-content:center;gap:.7rem}.cat-sort label{display:none}}
.catalog-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:2.5rem 1rem;font-size:1.02rem}
/* Showroom (video gallery «Ялинки наживо») */
.showroom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;max-width:840px;margin:0 auto}
.showroom-item{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow-sm)}
.showroom-item video{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.showroom-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(200,162,74,.92);color:#3a2b06;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:.25s}
.showroom-item.playing .showroom-play{opacity:0;pointer-events:none}
.showroom-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem;color:#fff;font-size:.92rem;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.7))}

/* Benefits */
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.benefit-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.benefit-icon,.how-icon,.delivery-icon,.guarantee-icon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(20,83,45,.08);color:var(--green);margin-bottom:1rem}
.benefit-icon svg,.how-icon svg,.delivery-icon svg,.guarantee-icon svg{width:26px;height:26px}
.benefit-card h3{font-size:1.15rem;color:var(--green-900);margin-bottom:.4rem}
.benefit-card p{color:var(--muted);font-size:.94rem}

/* How */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.how-step{position:relative;text-align:center;padding:1.4rem 1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius)}
.how-num{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--gold);color:#3a2b06;font-weight:800;display:grid;place-items:center;font-size:.9rem}
.section-green .how-icon{background:rgba(200,162,74,.16);color:var(--gold-2)}
.how-step h3{color:#fff;font-size:1.08rem;margin-bottom:.3rem}
.how-step p{color:rgba(255,255,255,.72);font-size:.9rem}


/* Reviews */
.reviews-carousel{display:flex;align-items:center;gap:.6rem}
.reviews-viewport{overflow:hidden;flex:1}
.reviews-track{display:flex;transition:transform .45s ease}
.review-card{flex:0 0 calc((100% - 3rem)/3);margin-right:1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.review-photo{aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft)}
.review-photo img{width:100%;height:100%;object-fit:cover}
.review-body{padding:1.1rem 1.2rem 1.3rem}
.review-stars{color:var(--gold);display:flex;gap:2px;margin-bottom:.5rem}
.review-text{font-size:.94rem;color:var(--ink)}
.review-name{margin-top:.8rem;font-weight:800;color:var(--green-900);display:flex;align-items:center;gap:.5rem}
.review-verified{font-size:.7rem;font-weight:700;color:var(--green-600);background:rgba(20,83,45,.1);padding:.15rem .5rem;border-radius:100px}
.rev-arrow{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);color:var(--green);font-size:1.5rem;display:grid;place-items:center;background:#fff}
.rev-arrow:hover{border-color:var(--green);background:var(--bg-soft)}
.reviews-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.6rem}
.reviews-dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.reviews-dot.active{background:var(--gold);width:24px;border-radius:5px}

/* Delivery */
.delivery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;max-width:900px;margin:0 auto}
.delivery-card{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.delivery-card h3{font-size:1.1rem;color:var(--green-900);margin-bottom:.25rem}
.delivery-card p{color:var(--muted);font-size:.92rem}
.delivery-icon{margin-bottom:0;flex:0 0 52px}

/* Certificate */
.cert-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center}
.cert-media img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%}
.cert-tag{display:inline-block;color:var(--gold-2);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;margin-bottom:.6rem}
.cert-lead{font-size:1.1rem;color:#fff;margin-bottom:.6rem}
.cert-body p{color:rgba(255,255,255,.82)}
.cert-list{list-style:none;margin:1.2rem 0 1.6rem;display:grid;gap:.6rem}
.cert-list li{position:relative;padding-left:1.8rem;color:rgba(255,255,255,.9)}
.cert-list li::before{content:"";position:absolute;left:0;top:.35rem;width:16px;height:16px;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}

/* Guarantee band */
.guarantee-band{background:var(--bg-cream);padding:2.6rem 0}
.guarantee-inner{display:flex;align-items:center;gap:1.4rem;justify-content:center;text-align:left;max-width:820px}
.guarantee-icon{flex:0 0 60px;width:60px;height:60px;margin:0;background:rgba(200,162,74,.14);color:var(--gold-dark)}
.guarantee-inner h3{color:var(--green-900);font-size:1.3rem}
.guarantee-inner p{color:var(--muted)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:.8rem}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.faq-q{width:100%;text-align:left;padding:1.1rem 1.3rem;font-weight:700;color:var(--green-900);font-size:1.02rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--ff-body)}
.faq-ic{position:relative;flex:0 0 20px;width:20px;height:20px}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--gold-dark);border-radius:2px;transition:.3s;top:50%;left:50%}
.faq-ic::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq-ic::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq-item.open .faq-ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 1.3rem 1.2rem;color:var(--muted)}

/* Order form */
.order-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-sm)}
.order-items{display:flex;flex-direction:column;gap:.8rem}
.order-item{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem}
.oi-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.oi-num{font-weight:700;color:var(--green-900);font-size:.9rem}
.oi-remove{color:var(--muted);font-size:1.3rem;line-height:1}
.oi-select{width:100%}
.oi-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;gap:1rem}
.qty-controls{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:100px;overflow:hidden;background:#fff}
.qty-btn{width:36px;height:34px;color:var(--green);font-size:1.2rem;font-weight:700}
.qty-value{min-width:30px;text-align:center;font-weight:800}
.oi-subtotal{font-weight:800;color:var(--green)}
.btn-add-item{width:100%;margin:.9rem 0;padding:.8rem;border:1.5px dashed var(--gold);border-radius:100px;color:var(--gold-dark);font-weight:700;background:#fff}
.btn-add-item:hover{background:var(--bg-cream)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{margin-top:1rem;display:flex;flex-direction:column}
.form-label{font-weight:600;font-size:.88rem;margin-bottom:.4rem;color:var(--ink)}
.form-input{padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-family:inherit;font-size:1rem;background:#fff;transition:border-color .2s;width:100%}
.form-input:focus{outline:none;border-color:var(--green-600)}
.form-input.error{border-color:var(--red)}
select.form-input,.oi-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b62' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:18px;padding-right:2.4rem}
.form-error{display:none;color:var(--red);font-size:.8rem;margin-top:.35rem}
.form-input.error~.form-error{display:block}
[hidden]{display:none !important}
.delivery-toggle{display:flex;gap:.5rem;margin-top:1.2rem}
.dt-btn{flex:1;padding:.7rem;border:1.5px solid var(--line);border-radius:100px;font-weight:600;font-size:.9rem;background:#fff}
.dt-btn.active{background:var(--green);color:#fff;border-color:var(--green)}
.np-field{position:relative}
.np-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);max-height:240px;overflow-y:auto;z-index:30;display:none;margin-top:4px}
.np-dropdown.open{display:block}
.np-opt{padding:.7rem 1rem;font-size:.92rem;border-bottom:1px solid var(--line)}
.np-opt:hover,.np-opt.active{background:var(--bg-soft)}
.np-err{display:none;color:var(--red);font-size:.8rem;margin-top:.3rem}
.np-err.show{display:block}
.order-total{margin-top:1.4rem;padding:1.2rem;background:var(--bg-cream);border-radius:var(--radius-sm)}
.ot-row{display:flex;justify-content:space-between;padding:.25rem 0;font-size:.95rem;color:var(--muted)}
.ot-save{color:var(--red);font-weight:700}
.ot-final{border-top:2px solid rgba(200,162,74,.3);margin-top:.4rem;padding-top:.7rem;font-size:1.25rem;font-weight:800;color:var(--green-900)}
.order-empty{text-align:center;color:var(--muted);margin-top:1rem;font-size:.92rem}
#submitBtn{margin-top:1.4rem}

/* Footer */
.footer{background:var(--green-900);color:rgba(255,255,255,.82);padding:3.4rem 0 1.6rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem}
.footer .brand-name{color:#fff}
.footer .brand-mark{color:var(--gold-2)}
.footer-brand p{margin:1rem 0;font-size:.92rem;max-width:340px}
.footer-socials{display:flex;gap:.6rem}
.footer-socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;transition:.2s}
.footer-socials a:hover{background:var(--gold);color:#3a2b06}
.footer-col h4{color:#fff;margin-bottom:1rem;font-size:1.05rem}
.footer-col a,.footer-col span{display:block;padding:.3rem 0;font-size:.92rem;color:rgba(255,255,255,.75)}
.footer-col a:hover{color:var(--gold-2)}
.footer-legal{margin-top:.8rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.7rem}
.footer-bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem;text-align:center}

/* Sticky CTA */
.sticky-cta{position:fixed;bottom:-90px;left:0;right:0;z-index:90;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.12);padding:.7rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:bottom .35s}
.sticky-cta.visible{bottom:0}
.sticky-from{font-weight:700;color:var(--green-900);font-size:.92rem}
.sticky-cta .btn{padding:.7rem 1.4rem}

/* Background music toggle */
.music-toggle{position:fixed;left:1.1rem;bottom:1.5rem;z-index:96;width:48px;height:48px;border-radius:50%;background:var(--gold);color:#3a2b06;display:grid;place-items:center;border:none;box-shadow:0 8px 22px rgba(200,162,74,.45);transition:transform .2s,background .2s}
.music-toggle[hidden]{display:none}
.music-toggle:hover{transform:scale(1.06)}
.music-toggle svg{width:22px;height:22px}
.music-toggle .mt-bars{display:none;align-items:flex-end;gap:2px;height:18px}
.music-toggle .mt-bars i{width:3px;background:currentColor;border-radius:2px;animation:mtbars 1s ease-in-out infinite}
.music-toggle .mt-bars i:nth-child(1){height:40%;animation-delay:-.2s}
.music-toggle .mt-bars i:nth-child(2){height:90%;animation-delay:-.5s}
.music-toggle .mt-bars i:nth-child(3){height:60%;animation-delay:-.1s}
.music-toggle .mt-bars i:nth-child(4){height:80%;animation-delay:-.4s}
.music-toggle.is-playing{background:var(--green);color:#fff}
.music-toggle.is-playing .mt-note{display:none}
.music-toggle.is-playing .mt-bars{display:flex}
@keyframes mtbars{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.music-toggle .mt-bars i{animation:none}}
.sticky-cta.visible ~ .music-toggle{bottom:calc(1.5rem + 66px)}
@media(min-width:1025px){.sticky-cta.visible ~ .music-toggle{bottom:1.5rem}}

/* Recent toast */
.recent-toast{position:fixed;bottom:1.5rem;left:1.1rem;z-index:88;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:.7rem 1rem;max-width:280px;display:flex;gap:.7rem;align-items:center;opacity:0;transform:translateY(20px);transition:.4s;pointer-events:none}
.recent-toast.show{opacity:1;transform:none}
.rt-dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--green-600);box-shadow:0 0 0 4px rgba(27,107,58,.15)}
.rt-text{font-size:.84rem;color:var(--ink);line-height:1.3}
.rt-text b{color:var(--green-900)}
.rt-city{color:var(--muted);font-size:.76rem}

/* Cart drawer */
.cart-drawer{position:fixed;top:0;right:-100%;width:min(420px,92%);height:100dvh;background:#fff;z-index:130;box-shadow:-10px 0 40px rgba(0,0,0,.2);transition:right .35s;display:flex;flex-direction:column}
.cart-drawer.open{right:0}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:1.3rem;border-bottom:1px solid var(--line)}
.cart-head h3{color:var(--green-900)}
.cart-close{font-size:2rem;line-height:1;color:var(--muted)}
.cart-body{flex:1;overflow-y:auto;padding:1rem 1.3rem}
.cart-line{display:flex;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--line);align-items:flex-start}
.cart-line img{width:64px;height:80px;object-fit:cover;border-radius:10px;flex-shrink:0}
.cl-info{flex:1;min-width:0}
.cl-name{font-weight:700;font-size:.94rem;color:var(--green-900);line-height:1.35}
.cl-price{color:var(--green);font-weight:700;font-size:.9rem;margin-top:.25rem}
.cl-remove{color:var(--muted);font-size:.8rem;text-decoration:underline;margin-top:.4rem}
.cl-remove:hover{color:var(--red)}
.cart-empty{text-align:center;color:var(--muted);padding:3rem 1rem}
.cart-foot{padding:1.2rem 1.3rem;border-top:1px solid var(--line)}
.cf-total{display:flex;justify-content:space-between;font-weight:800;font-size:1.15rem;color:var(--green-900);margin-bottom:1rem}

/* Modal */
.modal{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(13,42,26,.6);backdrop-filter:blur(2px)}
.modal-dialog{position:relative;background:#fff;border-radius:var(--radius);width:min(920px,94%);max-height:92svh;overflow:hidden;box-shadow:var(--shadow);animation:modalIn .3s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
/* Fixed to the viewport (child of .modal, not the scrolling dialog) → never clipped on iOS.
   White disc + dark glyph + ring/shadow → legible on the dark backdrop AND on light photos. */
.modal-close{position:fixed;top:1rem;right:1rem;font-size:1.85rem;line-height:1;color:var(--green-900);z-index:2147483647;width:44px;height:44px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.4),0 0 0 4px rgba(255,255,255,.12);transition:transform .12s,box-shadow .18s}
.modal-close:hover{transform:scale(1.05);box-shadow:0 8px 26px rgba(0,0,0,.5)}
.modal-body{display:grid;grid-template-columns:1fr 1fr;max-height:92svh;overflow-y:auto}
.mb-gallery{position:relative;background:#000}
.mb-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.mb-thumbs{position:absolute;bottom:.7rem;left:.7rem;display:flex;gap:.4rem}
.mb-thumb{width:48px;height:48px;border-radius:8px;overflow:hidden;border:2px solid transparent;opacity:.7}
.mb-thumb.active{border-color:var(--gold-2);opacity:1}
.mb-thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.mb-info{padding:2rem 1.8rem}
.mb-info h3{font-size:1.5rem;color:var(--green-900);margin-bottom:.5rem}
.mb-info .pc-price{margin:1rem 0}
.mb-specs{margin:1.2rem 0;border-top:1px solid var(--line);padding-top:1rem}
.mb-spec{display:flex;justify-content:space-between;padding:.5rem 0;font-size:.92rem;border-bottom:1px solid var(--line)}
.mb-spec span:first-child{color:var(--muted)}
.mb-spec span:last-child{font-weight:600;color:var(--green-900)}

/* Animations */
.anim{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}
.anim.visible{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}

/* Responsive */
@media(max-width:1024px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-phone span{display:none}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-brand p,.brand{justify-content:center;margin-inline:auto}
  .footer-socials{justify-content:center}
  .cert-wrap{grid-template-columns:1fr;gap:1.6rem}
  .how-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .section{padding:3.4rem 0}
  /* Quick-filter chips wrap so every chip (incl. "Популярні") stays visible — never cut off */
  .catalog-specials{flex-wrap:wrap;justify-content:center;gap:.5rem .6rem}
  .spec-chip{flex:0 0 auto}
  .cdb-cta{display:none}
  .benefits-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  /* Phone shelf: 2 cards/screen with a peek of the next — horizontal swipe carousel + dots.
     align-items:flex-start → each card is only as tall as its own content (no stretch gap). */
  .product-grid{
    display:flex;grid-template-columns:none;gap:1rem;align-items:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;scroll-padding-left:1rem;
    margin-left:-1rem;margin-right:-1rem;padding:.4rem 1rem 1.2rem;
    overscroll-behavior-x:contain;
  }
  .product-grid::-webkit-scrollbar{display:none}
  .product-grid>.product-card{flex:0 0 calc(50% - 1.2rem);scroll-snap-align:start}
  .product-grid>.catalog-empty{flex:1 0 100%}
  /* hover-lift is awkward mid-swipe on touch */
  .product-card:hover{transform:none}
  .catalog-dots{display:flex;justify-content:center;align-items:center;gap:.55rem;margin-top:1.2rem;flex-wrap:wrap}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .delivery-grid{grid-template-columns:1fr}
  .showroom-grid{grid-template-columns:1fr;max-width:420px}
  .review-card{flex:0 0 100%;margin-right:0}
  .reviews-track{gap:0}
  .modal-body{grid-template-columns:1fr}
  .mb-gallery img{aspect-ratio:1}
  .form-row{grid-template-columns:1fr}
  .hero-content{padding:4rem 0}
  .guarantee-inner{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  /* keep the swipe carousel (2-up) — no single-column fallback per client request */
  .benefits-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .benefit-card{padding:1.15rem .95rem;border-radius:14px}
  .benefit-card h3{font-size:1rem;margin-bottom:.25rem}
  .benefit-card p{font-size:.83rem;line-height:1.4}
  .benefit-icon{width:42px;height:42px;margin-bottom:.7rem}
  .hero-cta .btn{width:100%}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   vm-style product cards + carousel + size chips
   ============================================================ */
.product-card{position:relative}
.pc-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft)}
.pc-media img[data-cimg]{width:100%;height:100%;object-fit:cover;transition:opacity .25s ease,transform .5s ease}
.product-card:hover .pc-media img[data-cimg]{transform:scale(1.04)}
.pc-zoom{position:absolute;top:.7rem;right:.7rem;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(13,42,26,.5);color:#fff;display:grid;place-items:center;opacity:.85;transition:.25s;backdrop-filter:blur(3px)}
.product-card:hover .pc-zoom{opacity:1}
.pc-zoom svg{width:18px;height:18px}
.pc-yt{position:absolute;top:3rem;left:.8rem;z-index:3;width:40px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;display:grid;place-items:center;cursor:pointer;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));transition:transform .2s ease}
.pc-yt svg{width:40px;height:28px;display:block}
.pc-yt:hover{transform:scale(1.08)}
.pc-arrow{position:absolute;top:calc(50% - 12px);transform:translateY(-50%);z-index:3;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.82);color:var(--green-900);display:grid;place-items:center;opacity:.85;transition:.25s;box-shadow:var(--shadow-sm)}
.product-card:hover .pc-arrow{opacity:1}
.pc-arrow svg{width:15px;height:15px}
.pc-prev{left:.5rem}.pc-next{right:.5rem}
.pc-arrow:hover{background:#fff}
.pc-dots{position:absolute;bottom:.7rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:.4rem}
.pc-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);transition:.25s;cursor:pointer}
.pc-dot.active{background:var(--gold-2);width:18px;border-radius:4px}
.pc-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.pc-cat{font-size:.74rem;font-weight:700;color:var(--gold-dark);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.pc-name{font-size:1.15rem;margin-bottom:.4rem;color:var(--green-900)}
.pc-desc{font-size:.9rem;color:var(--muted);flex:1}
/* «Обрати колір» — appears on cards whose product has a colour axis; opens the picker in the modal */
.pc-color-btn{display:flex;align-items:center;gap:.55rem;width:100%;margin:.15rem 0 .7rem;padding:.5rem .65rem;border-radius:12px;background:var(--bg-soft);border:1.5px solid var(--line);color:var(--green-900);font-weight:600;font-size:.86rem;line-height:1;transition:border-color .18s,background .18s,transform .12s,box-shadow .18s}
.pc-color-btn:hover{border-color:var(--green);background:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,42,26,.08)}
.pc-color-btn:active{transform:translateY(0)}
.pc-color-btn svg{width:16px;height:16px;color:var(--green);flex:0 0 auto;margin-left:auto}
.pc-color-lbl{color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pc-color-dots{display:flex;align-items:center;gap:.25rem;flex:0 0 auto}
.pc-color-dots i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #fff,0 0 0 1px rgba(0,0,0,.14)}
.pc-color-more{font-size:.72rem;font-weight:700;color:var(--muted);margin-left:.12rem}
@media(max-width:768px){
  /* 2-up cards are too narrow for the full text — swatches + count + palette icon
     read clearly on their own; the "Обрати колір" label stays on wider screens. */
  .pc-color-btn{gap:.45rem;padding:.5rem .6rem;justify-content:center}
  .pc-color-lbl{display:none}
  .pc-color-dots{gap:.25rem}
  .pc-color-dots i{width:16px;height:16px}
  .pc-color-btn svg{width:16px;height:16px;margin-left:.1rem}
}
.color-swatches.flash{animation:swFlash 1.1s ease}
@keyframes swFlash{0%,100%{box-shadow:0 0 0 0 rgba(200,162,74,0)}30%{box-shadow:0 0 0 4px rgba(200,162,74,.35)}}
.pc-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.55rem 0 .55rem}
.pc-tag{font-size:.74rem;font-weight:600;color:var(--green);background:rgba(20,83,45,.08);border-radius:100px;padding:.28rem .7rem}
.pc-sizes{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.65rem}
.pc-size{padding:.34rem .7rem;border:1.5px solid var(--line);border-radius:100px;font-size:.82rem;font-weight:700;color:var(--ink);background:#fff;transition:.2s;min-width:44px}
.pc-size.active{background:var(--green);color:#fff;border-color:var(--green)}
.pc-size:hover:not(.active){border-color:var(--green-600);color:var(--green)}
.pc-price-row{display:flex;align-items:baseline;gap:.5rem;margin-top:.2rem;margin-bottom:.4rem;flex-wrap:wrap}
.pc-price{font-family:var(--ff-head);font-size:1.55rem;font-weight:700;color:var(--green);letter-spacing:.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.pc-price small{font-size:.85rem;font-weight:600;color:var(--muted)}
.pc-old{color:#a9b3ac;text-decoration:line-through;font-size:.95rem;font-weight:600}
.pc-old[hidden]{display:none}
.pc-save{font-size:.76rem;color:#fff;background:var(--red);font-weight:800;border-radius:7px;padding:.16rem .5rem;letter-spacing:.02em;line-height:1.25}
.pc-btns{display:flex;gap:.5rem;margin-top:auto}
.pc-btns .btn{flex:1;padding:.72rem 1rem;font-size:.92rem}
.pc-detail{flex:0 0 48px;width:48px;border:1.5px solid var(--line);border-radius:100px;display:grid;place-items:center;color:var(--green)}
.pc-detail svg{width:20px;height:20px}
.pc-detail:hover{border-color:var(--green);background:var(--bg-soft)}

/* ============================================================
   Product modal — slider + size table + specs
   ============================================================ */
.modal-overlay{position:absolute;inset:0;background:rgba(13,42,26,.62);backdrop-filter:blur(2px)}
.modal .modal-dialog{position:relative;background:#fff;border-radius:var(--radius);width:min(960px,94%);max-height:92svh;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;animation:modalIn .3s ease}
.modal-figure{position:relative;background:var(--bg-cream);overflow:hidden}
.modal-slider{overflow:hidden;height:100%}
.modal-track{display:flex;height:100%;transition:transform .4s ease}
.modal-track.single{transform:none!important}
.modal-slide{flex:0 0 100%;height:100%}
.modal-slide img{width:100%;height:100%;object-fit:contain;background:var(--bg-cream);aspect-ratio:4/5}
.modal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);color:var(--green-900);font-size:1.6rem;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.modal-prev{left:.7rem}.modal-next{right:.7rem}
.modal-thumbs{position:absolute;bottom:.7rem;left:.7rem;right:.7rem;display:flex;gap:.4rem;flex-wrap:wrap;z-index:4}
.modal-thumb{width:48px;height:48px;border-radius:8px;overflow:hidden;border:2px solid transparent;opacity:.75}
.modal-thumb.active{border-color:var(--gold-2);opacity:1}
.modal-thumb img{width:100%;height:100%;object-fit:cover}
.modal-body{display:block;padding:1.9rem 1.7rem;overflow-y:auto;max-height:92svh}
body.modal-open .sticky-cta{display:none!important}
/* Hide floating widgets (Orderli chat/phone, music toggle) while a fullscreen modal/lightbox
   is open — their very high z-index otherwise overlaps the gallery. Covers Orderli's various
   container shapes (iframe / div / custom element) case-insensitively. */
body.modal-open iframe[src*="orderli" i],
body.modal-open [id*="orderli" i],
body.modal-open [class*="orderli" i],
body.modal-open orderli-widget,
body.modal-open .music-toggle,
body.modal-open .recent-toast{display:none!important}
/* JS-detected third-party floating widgets (Orderli chat/phone) hidden while a modal is open */
.js-widget-hidden{display:none!important}
#modalOrderBtn{margin-top:1.3rem}
.size-table{align-items:flex-start}
.size-row{flex:0 0 auto}
.modal-cat{font-size:.76rem;font-weight:700;color:var(--gold-dark);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.modal-body h3{font-size:1.5rem;color:var(--green-900);margin-bottom:.5rem}
.modal-desc{color:var(--muted);font-size:.94rem;margin-bottom:1rem}
.modal-price-row{display:flex;align-items:baseline;gap:.7rem}
.modal-price{font-family:var(--ff-head);font-size:1.9rem;font-weight:700;color:var(--green)}
.modal-old{color:#a9b3ac;text-decoration:line-through;font-weight:600}
.modal-save{color:var(--red);font-weight:700;font-size:.9rem;margin-top:.3rem}
.size-table-title{font-weight:700;color:var(--green-900);margin:1.2rem 0 .5rem;font-size:.95rem}
.size-table{display:flex;flex-wrap:wrap;gap:.5rem}
.size-row{padding:.5rem 1rem;border:1.5px solid var(--line);border-radius:100px;font-weight:700;font-size:.9rem;background:#fff;color:var(--ink);transition:.2s}
.size-row.active{background:var(--green);color:#fff;border-color:var(--green)}
.size-row:hover:not(.active){border-color:var(--green-600);color:var(--green)}
/* Colour swatches (toy variation axis): a row of solid colour circles */
.size-table-title .ct-name{font-weight:600;color:var(--ink)}
.color-swatches{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.5rem}
.color-swatch{width:2.5rem;height:2.5rem;border-radius:50%;padding:0;cursor:pointer;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .12s,box-shadow .15s}
.color-swatch:hover{transform:scale(1.06)}
.color-swatch.active{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 2px #fff,0 0 0 4px var(--sw,var(--green))}
.modal-specs{margin:1.3rem 0;border-top:1px solid var(--line);padding-top:.8rem}
.modal-specs-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.5rem;font-weight:700}
.modal-specs-row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgba(20,83,45,.06);font-size:.9rem}
.modal-specs-label{color:var(--muted)}
.modal-specs-value{font-weight:600;color:var(--green-900);text-align:right}
.btn-lg{padding:.95rem 1.6rem;font-size:1.02rem}

/* ============================================================
   Order items (cart-line based) + cart size chip
   ============================================================ */
.order-item{position:relative;display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 2.6rem .8rem .8rem;box-shadow:var(--shadow-sm)}
.oi-img{width:66px;height:82px;object-fit:cover;border-radius:10px;flex-shrink:0}
.oi-main{flex:1;min-width:0}
.oi-name{font-weight:700;color:var(--green-900);font-size:.98rem;line-height:1.3}
.oi-size{display:inline-block;white-space:nowrap;font-size:.74rem;font-weight:800;color:#fff;background:var(--green);border-radius:100px;padding:.12rem .55rem;margin-left:.35rem;vertical-align:middle}
.oi-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.7rem}
.order-item .qty-controls{flex:0 0 auto}
.order-item .qty-btn{width:34px;height:34px;font-size:1.15rem}
.oi-subtotal{font-weight:800;color:var(--green);font-size:1.12rem;white-space:nowrap}
.oi-remove{position:absolute;top:.5rem;right:.5rem;width:30px;height:30px;color:var(--muted);font-size:1.25rem;line-height:1;border-radius:8px;display:grid;place-items:center}
.oi-remove:hover{background:#fde8e6;color:var(--red)}
@media(max-width:480px){
  .oi-subtotal{font-size:1.02rem}
  .oi-img{width:56px;height:70px}
  .order-item{gap:.7rem;padding-right:2.4rem}
}
.cl-size{display:inline-block;white-space:nowrap;vertical-align:middle;font-size:.72rem;font-weight:800;color:#fff;background:var(--green);border-radius:100px;padding:.12rem .5rem;margin-left:.35rem}

/* ============================================================
   Quality certificates gallery + lightbox
   ============================================================ */
.quality-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.quality-card{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);aspect-ratio:3/4;transition:transform .3s,box-shadow .3s;display:block;padding:0}
.quality-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.quality-card img{width:100%;height:100%;object-fit:cover}
.quality-zoom{position:absolute;top:.6rem;right:.6rem;width:34px;height:34px;border-radius:50%;background:rgba(13,42,26,.55);color:#fff;display:grid;place-items:center;opacity:0;transition:.25s;backdrop-filter:blur(3px)}
.quality-card:hover .quality-zoom{opacity:1}
.cert-lb{position:fixed;inset:0;z-index:2147483001;background:rgba(13,42,26,.9);display:none;align-items:center;justify-content:center;padding:2rem}
.cert-lb.open{display:flex}
.cert-lb img{max-width:min(600px,92%);max-height:92svh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cert-lb-close{position:absolute;top:1.2rem;right:1.4rem;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:2rem;line-height:1}
.cert-lb-close:hover{background:rgba(255,255,255,.28)}

/* ============================================================
   Overlap fix — keep contact bubble / toast clear of sticky CTA
   ============================================================ */
.sticky-cta.visible ~ .recent-toast{bottom:calc(1.5rem + 70px)}

@media(max-width:1024px){
  .quality-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  /* Whole dialog scrolls (photo + info together) so a tall natural-height photo never squeezes
     the info off-screen. overflow-x:hidden kills horizontal bleed; overflow-y:auto does the scroll.
     Close stays reachable via fixed X + backdrop tap + Escape. */
  .modal .modal-dialog{grid-template-columns:1fr;display:block;max-height:92svh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal-figure{display:flex;flex-direction:column;justify-content:center;background:var(--bg-cream);min-width:0;min-height:44svh}
  .modal-slider{overflow:hidden}
  .modal-track{height:auto;align-items:center}
  .modal-slide{height:auto;display:flex;align-items:center;justify-content:center}
  .modal-slide img{width:100%;height:auto;max-height:56svh;aspect-ratio:auto;object-fit:contain;background:var(--bg-cream);display:block}
  .modal-slide-video{height:auto;aspect-ratio:4/5;width:100%}
  /* Thumbnails + swipe are enough on touch — the floating arrows just hovered in empty space */
  .modal-arrow{display:none}
  .modal-thumbs{position:static;flex-wrap:nowrap;overflow-x:auto;gap:.4rem;padding:.55rem;background:#fff;border-top:1px solid var(--line)}
  .modal-thumb{flex:0 0 auto;width:52px;height:52px}
  .modal-body{min-width:0;max-height:none;overflow:visible;padding:1.3rem 1.3rem 1.6rem}
  /* Slightly larger tap target on touch; visuals inherit from the base rule above */
  .modal-close{top:.9rem;right:.9rem;width:46px;height:46px;font-size:1.9rem}
}
/* Default = full photo (contain, never cropped). Optional "fill" mode
   (effects.fillPhoto) crops the sides to fill the frame edge-to-edge. */
body.photo-fill .modal-slide img{object-fit:cover}
/* Desktop: fill the contain-margins with a soft blur of the current photo (JS sets --fig-bg),
   so there's no flat empty area. The sharp full photo sits on top; its letterbox is transparent. */
@media(min-width:769px){
  .modal-figure::before{content:"";position:absolute;inset:0;z-index:0;background:var(--fig-bg,none) center/cover no-repeat;filter:blur(30px) brightness(.72) saturate(1.15);transform:scale(1.18)}
  .modal-slider{position:relative;z-index:1}
  .modal-slide img{background:transparent}
}
body.photo-fill .modal-figure::before{display:none}
@media(max-width:480px){
  .quality-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .pc-btns .btn{font-size:.86rem}
}

/* ============================================================
   Card qty stepper + bag add button (Image #5 style)
   ============================================================ */
.pc-btns{display:flex;gap:.45rem;align-items:stretch;margin-top:auto}
.pc-step{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:13px;overflow:hidden;flex:0 0 auto;background:#fff}
.pc-step-btn{width:34px;min-height:48px;color:var(--green);font-size:1.25rem;font-weight:700;line-height:1;transition:background .18s}
.pc-step-btn:hover{background:var(--bg-soft)}
.pc-step-n{min-width:28px;text-align:center;font-weight:800;font-size:.98rem;color:var(--green-900)}
.pc-add{flex:1;padding:.6rem;min-width:0;border-radius:13px;min-height:48px;white-space:nowrap}
.pc-add svg{width:19px;height:19px;flex:0 0 auto}

/* ============================================================
   Hero banner (static promo image; replaces the video hero)
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-banner{position:relative;background:var(--green-900);line-height:0}
.hero-banner-link{display:block}
.hero-banner img{width:100%;height:auto;display:block}
/* On this page the hero is a light banner, so the header is solid from the top (not transparent-over-video). */
body.banner-hero .nav{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
body.banner-hero .nav .brand-name{color:var(--green-900)}
body.banner-hero .nav .brand-mark{color:var(--green)}
body.banner-hero .nav .nav-links a{color:var(--ink)}
body.banner-hero .nav .nav-links a.active{color:var(--green)}
body.banner-hero .nav .nav-links a::after{background:var(--gold)}
body.banner-hero .nav .nav-phone{color:var(--green)}
body.banner-hero .nav .cart-btn{color:var(--green-900)}
body.banner-hero .nav .nav-burger span{background:var(--green-900)}

/* ============================================================
   Transparent header at top → solid on scroll
   ============================================================ */
.nav{background:transparent;backdrop-filter:none;border-bottom:1px solid transparent;box-shadow:none;transition:background .3s,box-shadow .3s,border-color .3s}
.nav.scrolled{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
/* light text over hero when at top */
.nav .brand-name{color:#fff}
.nav .brand-mark{color:var(--gold-2)}
.nav .nav-links a{color:#fff}
.nav .nav-links a.active{color:var(--gold-2)}
.nav .nav-links a::after{background:var(--gold-2)}
.nav .nav-phone{color:#fff}
.nav .cart-btn{color:#fff}
.nav .nav-burger span{background:#fff}
/* restore dark once scrolled */
.nav.scrolled .brand-name{color:var(--green-900)}
.nav.scrolled .brand-mark{color:var(--green)}
.nav.scrolled .nav-links a{color:var(--ink)}
.nav.scrolled .nav-links a.active{color:var(--green)}
.nav.scrolled .nav-links a::after{background:var(--gold)}
.nav.scrolled .nav-phone{color:var(--green)}
.nav.scrolled .cart-btn{color:var(--green-900)}
.nav.scrolled .nav-burger span{background:var(--green-900)}
/* pull hero up under the transparent nav + top scrim for nav readability */
.hero{margin-top:calc(-1 * var(--nav-h))}
.hero-content{padding-top:calc(var(--nav-h) + 3rem)}
.hero-overlay{background:linear-gradient(180deg,rgba(9,28,17,.6) 0%,rgba(9,28,17,.18) 16%,transparent 30%),linear-gradient(90deg,rgba(9,28,17,.82),rgba(9,28,17,.45) 55%,rgba(9,28,17,.25))}

/* ============================================================
   Marquee (бігаюча доріжка) — always visible (sticky top)
   ============================================================ */
:root{--promo-h:40px}
/* Promo strip off (hidden) → no reserved space, so the sticky nav sits flush at the
   very top instead of leaving a 40px gap that content peeks through. */
body:has(#promobar[hidden]){--promo-h:0px}
.promobar{position:sticky;top:0;z-index:65;height:var(--promo-h);display:flex;align-items:center}
.promobar[hidden]{display:none}
.promobar-track{padding:0}
.nav{top:var(--promo-h)}

/* ============================================================
   Wider hero title (stretch across screen)
   ============================================================ */
.hero-content{max-width:min(1000px,92%)}
.hero-title{font-size:clamp(2.6rem,6.2vw,4.9rem);line-height:1.08}
.hero-sub{max-width:640px}
@media(max-width:768px){ .hero-title{font-size:clamp(2.1rem,8vw,3.2rem)} }

/* card add button with label (eye removed) */
.pc-add{flex:1;padding:.7rem .7rem;gap:.42rem}
.pc-add-lbl{font-size:.9rem;font-weight:800;white-space:nowrap}
/* Mobile: icon-only add-to-cart as a neat square; stepper flexes to fill, never cramped */
@media(max-width:768px){
  .pc-actions{gap:.4rem}
  /* Narrow 2-up cards: shrink the stepper so − 1 + all fit and the "+" is never clipped. */
  .pc-btns{gap:.3rem}
  .pc-step{flex:1 1 auto;min-width:0;border-radius:12px}
  .pc-step-btn{flex:1 1 0;width:auto;min-width:0;padding:0;min-height:46px;font-size:1.2rem}
  .pc-step-n{flex:1 1 auto;min-width:14px;font-size:.94rem}
  .pc-add{flex:0 0 42px;width:42px;min-width:42px;padding:0;min-height:46px;border-radius:12px;gap:0}
  .pc-add svg{width:20px;height:20px}
  .pc-add-lbl{display:none}
}
.pc-name{cursor:pointer}
.pc-name:hover{color:var(--green)}

/* mobile-menu social icons — brand colors (like the contact bubble) */
.mm-icons a{color:#fff}
.mm-tg{background:#229ED9}
.mm-ig{background:linear-gradient(45deg,#f09433 5%,#e6683c 30%,#dc2743 50%,#cc2366 75%,#bc1888 95%)}
.mm-fb{background:#1877F2}
.mm-icons a:hover{filter:brightness(1.08);transform:translateY(-2px)}
.mm-icons a{transition:.2s}

/* per-item discount in order list */
.oi-prices{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;text-align:right}
.oi-sum{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.oi-old{color:#a9b3ac;text-decoration:line-through;font-size:.82rem;font-weight:600;white-space:nowrap}
.oi-disc{background:var(--red);color:#fff;font-weight:800;font-size:.7rem;border-radius:100px;padding:.1rem .45rem}
.oi-save{color:var(--red);font-weight:700;font-size:.76rem;white-space:nowrap}

/* ============================================================
   Improved sticky "buy now" bar
   ============================================================ */
.sticky-cta{padding:.6rem 1.1rem;border-top:2px solid var(--gold);box-shadow:0 -8px 30px rgba(13,42,26,.16)}
.sticky-info{min-width:0}
.sticky-from{display:flex;flex-direction:column;gap:.05rem;line-height:1.18}
.sc-label{font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.sc-price{font-weight:800;color:var(--green-900);font-size:1.18rem;display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
.sc-old{color:#a9b3ac;text-decoration:line-through;font-size:.8rem;font-weight:600}
.sc-save{font-size:.72rem;color:var(--red);font-weight:700}
.sticky-cta .btn{padding:.82rem 1.7rem;white-space:nowrap;font-size:1rem}
.sticky-cta.has-cart{border-top-color:var(--green-600)}
@media(max-width:480px){ .sticky-cta .btn{padding:.78rem 1.3rem;font-size:.95rem} .sc-price{font-size:1.06rem} }

/* cart drawer footer savings */
.cf-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted);padding:.15rem 0}
.cf-old{text-decoration:line-through}
.cf-save{color:var(--red);font-weight:700}
.cf-total{margin-top:.4rem;padding-top:.6rem;border-top:2px solid rgba(200,162,74,.3)}

/* ============================================================
   Marquee — festive gold gradient (stands out over dark hero)
   ============================================================ */
.promobar{background:linear-gradient(90deg,#a9852f 0%,#c8a24a 26%,#e3c47f 50%,#c8a24a 74%,#a9852f 100%);color:#3a2b06;border-bottom:1px solid rgba(58,43,6,.22);box-shadow:0 2px 12px rgba(0,0,0,.18)}
.promobar-item{color:#3a2b06;font-weight:600}
.promobar-item b{color:#231a04;font-weight:800}
.promobar-sep{color:rgba(58,43,6,.4)}
.promobar .js-countdown{color:var(--green-900);font-weight:800}

/* ============================================================
   Hero feature badges (row of pills under CTA)
   ============================================================ */
.hero-feats{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}
.hero-feat{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;letter-spacing:.01em;color:#fff;background:rgba(200,162,74,.14);border:1px solid rgba(200,162,74,.5);border-radius:100px;padding:.48rem .95rem;backdrop-filter:blur(4px)}
.hero-feat svg{color:var(--gold-2);flex-shrink:0}
@media(max-width:480px){ .hero-feat{font-size:.74rem;padding:.4rem .78rem} }

/* ============================================================
   Reviews — richer cards (avatar, verified badge, photo tag)
   ============================================================ */
.review-card{transition:transform .3s,box-shadow .3s}
.review-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.review-photo{position:relative}
.review-tag{position:absolute;bottom:.6rem;left:.6rem;display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;color:#fff;background:rgba(13,42,26,.74);border-radius:100px;padding:.3rem .65rem;backdrop-filter:blur(3px)}
.review-tag svg{color:var(--gold-2)}
.review-body{display:flex;flex-direction:column}
.review-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem}
.review-avatar{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--green-600),var(--green));color:#fff;display:grid;place-items:center;font-family:var(--ff-head);font-weight:700;font-size:1.1rem}
.review-meta{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.review-name{margin-top:0;display:block;font-weight:800;color:var(--green-900);font-size:.98rem;line-height:1.2}
.review-verified{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;color:var(--green-600);background:none;padding:0;border-radius:0}
.review-verified svg{color:var(--green-600)}
.review-stars{margin-bottom:.55rem}
.review-stars svg{width:17px;height:17px}
.review-text{font-size:.94rem;color:var(--ink);line-height:1.55}

/* ============================================================
   Delivery — premium cards (filled icon, left accent, hover)
   ============================================================ */
.delivery-grid{gap:1.2rem}
.delivery-card{position:relative;padding:1.5rem 1.5rem 1.5rem 1.7rem;transition:transform .3s,box-shadow .3s,border-color .3s;overflow:hidden}
.delivery-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.delivery-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(200,162,74,.4)}
.delivery-icon{flex:0 0 54px;width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,var(--green-600),var(--green));color:#fff;box-shadow:0 8px 20px rgba(20,83,45,.28);margin-bottom:0}
.delivery-icon svg{width:26px;height:26px}
.delivery-card h3{font-size:1.14rem;color:var(--green-900);margin-bottom:.35rem}
.delivery-card p{color:var(--muted);font-size:.93rem;line-height:1.5}

/* ============================================================
   Order form — polish (steps, trust, segmented toggle, focus)
   ============================================================ */
.order-form{padding:1.8rem}
.form-step{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-head);font-weight:700;color:var(--green-900);font-size:1.1rem;margin:1.8rem 0 .8rem}
.form-step:first-child{margin-top:0}
.fs-num{flex:0 0 27px;width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,var(--green-600),var(--green));color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:800;font-family:var(--ff-body)}
.form-input:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(20,83,45,.1)}
.form-input.error:focus{box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.delivery-toggle{display:flex;gap:.25rem;margin-top:.3rem;background:var(--bg-soft);border:1px solid var(--line);border-radius:100px;padding:.25rem}
.dt-btn{flex:1;padding:.66rem;border:none;border-radius:100px;font-weight:700;font-size:.9rem;background:transparent;color:var(--muted);transition:.2s}
.dt-btn.active{background:var(--green);color:#fff;box-shadow:var(--shadow-sm)}
.order-total{background:#fff;border:1px solid var(--line)}
.ot-final{border-top:2px solid rgba(200,162,74,.35)}
.form-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem 1.5rem;margin-top:1.1rem}
.form-trust span{display:inline-flex;align-items:center;gap:.42rem;font-size:.82rem;font-weight:600;color:var(--muted)}
.form-trust svg{color:var(--green-600);flex-shrink:0}

/* ============================================================
   Section polish batch — benefits / trust / how / faq / footer
   ============================================================ */
/* Benefits — hover lift + icon fill on hover */
.benefit-card{transition:transform .3s,box-shadow .3s,border-color .3s}
.benefit-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(200,162,74,.35)}
.benefit-icon{transition:background .3s,color .3s}
.benefit-card:hover .benefit-icon{background:linear-gradient(135deg,var(--green-600),var(--green));color:#fff}

/* Trust bar — column dividers */
.trust{padding:2.4rem 0}
.trust-item{position:relative}
.trust-item:not(:last-child)::after{content:"";position:absolute;right:-.6rem;top:12%;height:76%;width:1px;background:rgba(255,255,255,.14)}
@media(max-width:768px){ .trust-item:not(:last-child)::after{display:none} }

/* How it works — dashed connector + hover */
.how-grid{position:relative}
.how-grid::before{content:"";position:absolute;top:0;left:14%;right:14%;height:2px;background:repeating-linear-gradient(90deg,rgba(200,162,74,.45) 0 7px,transparent 7px 15px);z-index:0}
@media(max-width:1024px){ .how-grid::before{display:none} }
.how-step{transition:transform .3s,box-shadow .3s}
.how-step:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.28)}

/* FAQ — open highlight */
.faq-item{transition:border-color .25s,box-shadow .25s}
.faq-item.open{border-color:rgba(200,162,74,.5);box-shadow:var(--shadow-sm)}
.faq-item.open .faq-q{color:var(--green)}
.faq-q:hover{color:var(--green)}

/* Footer — richer bg + social hover */
.footer{background:linear-gradient(180deg,var(--green-900) 0%,#081c11 100%)}
.footer-brand p{color:rgba(255,255,255,.72)}
.footer-socials a{transition:transform .2s,background .2s,color .2s}
.footer-socials a:hover{transform:translateY(-2px)}

/* ============================================================
   Footer — top feature row, icon contacts, bottom bar
   ============================================================ */
.footer-top{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;padding-bottom:2.2rem;margin-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.ft-feature{display:flex;align-items:center;gap:.8rem;text-align:left}
.ftf-ic{flex:0 0 46px;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(200,162,74,.14);color:var(--gold-2)}
.ft-feature b{display:block;color:#fff;font-size:.95rem;font-weight:700}
.ft-feature>div span{color:rgba(255,255,255,.6);font-size:.82rem}
.footer-col h4{position:relative;padding-bottom:.55rem}
.footer-col h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--gold)}
.footer-contacts .ft-contact{display:flex;align-items:center;gap:.55rem;padding:.35rem 0;color:rgba(255,255,255,.78);font-size:.92rem}
.footer-contacts .ft-contact svg{color:var(--gold-2);flex-shrink:0}
.footer-contacts a.ft-contact:hover{color:var(--gold-2)}
.footer-bottom{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.1);text-align:left}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;color:rgba(255,255,255,.6)}
.footer-legal{display:flex;gap:1.2rem;border:none;margin:0;padding:0}
.footer-legal a{color:rgba(255,255,255,.6);font-size:.84rem}
.footer-legal a:hover{color:var(--gold-2)}
@media(max-width:768px){
  .footer-top{grid-template-columns:repeat(2,1fr);gap:1rem}
  .footer-col h4::after{left:50%;transform:translateX(-50%)}
  .footer-contacts .ft-contact{justify-content:center}
  .footer-bottom-inner{flex-direction:column;text-align:center}
}
@media(max-width:480px){ .footer-top{grid-template-columns:1fr;max-width:280px;margin-inline:auto} }

/* ============================================================
   Transparent-nav readability (text over bright hero areas)
   ============================================================ */
.nav:not(.scrolled) .brand-name,
.nav:not(.scrolled) .nav-links a,
.nav:not(.scrolled) .nav-phone,
.nav:not(.scrolled) .cart-btn{text-shadow:0 1px 10px rgba(0,0,0,.6)}
.nav:not(.scrolled) .brand-mark{filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}
.nav:not(.scrolled) .nav-burger span{box-shadow:0 1px 4px rgba(0,0,0,.5)}
/* stronger top scrim so the transparent nav always has contrast */
.hero-overlay{background:linear-gradient(180deg,rgba(6,20,12,.72) 0%,rgba(6,20,12,.34) 15%,transparent 30%),linear-gradient(90deg,rgba(9,28,17,.82),rgba(9,28,17,.45) 55%,rgba(9,28,17,.28))}

/* ============================================================
   Feature strip under header (moved from footer)
   ============================================================ */
.feat-strip{background:#fff;border-bottom:1px solid var(--line);padding:1.3rem 0}
.feat-strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.fs-item{display:flex;align-items:center;gap:.85rem}
.fs-ic{flex:0 0 46px;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(20,83,45,.08);color:var(--green)}
.fs-item b{display:block;color:var(--green-900);font-size:.95rem;font-weight:700}
.fs-item>div span{color:var(--muted);font-size:.82rem}
@media(max-width:768px){ .feat-strip-grid{grid-template-columns:repeat(2,1fr);gap:1rem} }
@media(max-width:480px){ .feat-strip-grid{grid-template-columns:1fr;max-width:280px;margin:0 auto} }

/* ============================================================
   Sticky CTA — mobile only (hide on desktop)
   ============================================================ */
@media(min-width:1025px){
  .sticky-cta{display:none !important}
  .sticky-cta.visible ~ .recent-toast{bottom:1.5rem}
}

/* ============================================================
   Add-to-cart toast (near the header cart) + badge bump
   ============================================================ */
.cart-toast{position:fixed;top:calc(var(--promo-h) + var(--nav-h) + 10px);right:max(1rem,calc((100vw - 1180px)/2));z-index:125;max-width:320px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:14px;box-shadow:var(--shadow);padding:.8rem 1rem;display:flex;gap:.7rem;align-items:flex-start;opacity:0;transform:translateY(-14px);transition:opacity .3s,transform .3s;pointer-events:none}
.cart-toast.show{opacity:1;transform:none}
.ct-ic{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
.ct-text{font-size:.86rem;color:var(--ink);line-height:1.35;font-weight:500}
@media(max-width:768px){ .cart-toast{right:1rem;max-width:min(300px,86vw)} }
@keyframes cartBump{0%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.88)}100%{transform:scale(1)}}
.cart-badge.bump{animation:cartBump .45s ease}
.cart-btn.bump svg{animation:cartBump .45s ease}

/* ============================================================
   Value band — features row inside the trust band (merged)
   ============================================================ */
.trust-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;padding-bottom:1.8rem;margin-bottom:1.8rem;border-bottom:1px solid rgba(255,255,255,.12)}
.trust-feats.no-divider{padding-bottom:0;margin-bottom:0;border-bottom:0}
.tf-item{display:flex;align-items:center;gap:.85rem;text-align:left}
.tf-ic{flex:0 0 38px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(200,162,74,.14);color:var(--gold-2)}
.tf-ic svg{width:20px;height:20px}
.tf-item b{display:block;color:#fff;font-size:.95rem;font-weight:700}
.tf-item>div span{color:rgba(255,255,255,.62);font-size:.82rem}
@media(max-width:768px){ .trust-feats{grid-template-columns:repeat(2,1fr);gap:1.1rem} }
@media(max-width:480px){
  /* Compact green band: keep 2 columns instead of a tall single stack */
  .trust{padding:1.5rem 0}
  .trust-feats{grid-template-columns:repeat(2,1fr);gap:.8rem .7rem;padding-bottom:1.1rem;margin-bottom:1.1rem;max-width:none}
  .tf-item{gap:.6rem}
  .tf-ic{flex:0 0 32px;width:32px;height:32px;border-radius:9px}
  .tf-ic svg{width:17px;height:17px}
  .tf-item b{font-size:.85rem;line-height:1.2}
  .tf-item>div span{font-size:.75rem}
}

/* ============================================================
   "Як замовити" — cleaner hover on dark bg (gold border, no muddy shadow)
   ============================================================ */
.how-step{transition:transform .3s,background .3s,border-color .3s,box-shadow .3s}
.how-step:hover{transform:translateY(-6px);background:rgba(255,255,255,.09);border-color:rgba(200,162,74,.5);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.how-step:hover .how-icon{background:rgba(200,162,74,.28);color:var(--gold-2)}

/* ===== Product video slide (YouTube / uploaded) ===== */
.modal-slide-video{position:relative;background:#000;aspect-ratio:4/5;overflow:hidden}
.modal-slide-video video,.modal-slide-video iframe{width:100%;height:100%;display:block;border:0;object-fit:contain;background:#000}
.modal-slide-video .mv-poster{width:100%;height:100%;object-fit:cover}
.mv-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border:none;border-radius:50%;background:rgba(200,162,74,.94);color:#3a2b06;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.35);transition:transform .2s,background .2s}
.mv-play:hover{transform:scale(1.08);background:var(--gold-2)}
.mv-play svg{width:26px;height:26px;margin-left:3px}
.modal-thumb-video{position:relative}
.modal-thumb-video video,.modal-thumb-video img{width:100%;height:100%;object-fit:cover}
.modal-thumb-video .mt-play{position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);pointer-events:none}
.modal-thumb-video .mt-play::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff}

/* ===== Card discount line: −% tag + savings in UAH on one compact row ===== */
.pc-discount{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.pc-discount[hidden]{display:none}
.pc-save-uah{color:var(--red);font-weight:600;font-size:.8rem;margin:0}
.pc-save-uah:empty{display:none}

/* ===== Stock status ===== */
.pc-stock{display:inline-flex;align-items:center;gap:.42rem;font-size:.82rem;font-weight:700;margin-bottom:.65rem}
.pc-stock-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.pc-stock.in,.modal-stock.in{color:var(--green-600)}
.pc-stock.in .pc-stock-dot,.modal-stock.in .pc-stock-dot{background:var(--green-600);box-shadow:0 0 0 3px rgba(27,107,58,.15)}
.pc-stock.out,.modal-stock.out{color:#b0402f}
.pc-stock.out .pc-stock-dot,.modal-stock.out .pc-stock-dot{background:#b0402f;box-shadow:0 0 0 3px rgba(176,64,47,.15)}
.pc-add-out{width:100%;min-height:48px;border-radius:13px;background:#eceae5;color:#8a8a86;font-weight:700;cursor:not-allowed;border:1px solid var(--line)}
.pc-add-out:hover{transform:none;box-shadow:none}
.product-card.out-of-stock .pc-media img{filter:grayscale(.35);opacity:.85}
.modal-stock{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:700;margin-bottom:1rem}
.qty-btn:disabled{opacity:.35;cursor:not-allowed}
.cart-empty-btn{display:block;margin:1.4rem auto 0;padding:.75rem 1.6rem}
/* out-of-stock size chips / rows */
.pc-size.out{opacity:.55;text-decoration:line-through;position:relative}
.pc-size.out.active{opacity:.75;border-color:#b0402f;color:#b0402f}
.size-row.out{opacity:.6;text-decoration:line-through}
.size-row.out.active{border-color:#b0402f;color:#b0402f}
.size-row .sr-out{display:inline-block;margin-left:.4rem;font-size:.66rem;font-weight:700;color:#b0402f;text-decoration:none;vertical-align:middle}

/* ===== Brand confirm dialog (replaces window.confirm) ===== */
.confirm-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(13,42,26,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.confirm-overlay.show{opacity:1}
.confirm-box{background:#fff;border-radius:20px;max-width:380px;width:100%;padding:1.9rem 1.6rem 1.5rem;text-align:center;box-shadow:0 24px 70px rgba(13,42,26,.35);border-top:4px solid var(--gold);transform:translateY(14px) scale(.96);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.confirm-overlay.show .confirm-box{transform:translateY(0) scale(1)}
.confirm-ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto .9rem;border-radius:50%;background:linear-gradient(135deg,#fbeceb,#f7dcd9);color:#b0402f}
.confirm-ic svg{width:26px;height:26px}
.confirm-title{font-family:var(--ff-head);font-size:1.28rem;font-weight:700;color:var(--green-900);margin:0 0 .5rem}
.confirm-msg{color:var(--muted);font-size:.96rem;line-height:1.5;margin:0 0 1.4rem}
.confirm-actions{display:flex;gap:.7rem}
.confirm-actions .btn{flex:1;padding:.8rem 1rem;font-size:.95rem;font-weight:700;border-radius:12px}
.confirm-cancel{background:#f1f4f1;color:var(--green-900);border:1px solid var(--line)}
.confirm-cancel:hover{background:#e7ece8}
.confirm-ok{background:linear-gradient(135deg,#c0432f,#a4361f);color:#fff;box-shadow:0 10px 24px rgba(176,64,47,.35)}
.confirm-ok:hover{filter:brightness(1.06)}

/* ===== Cross-sell / up-sell ===== */
.xsell{margin-top:1.1rem;border-top:1px solid var(--line);padding-top:1rem}
.xsell-head{display:flex;flex-direction:column;gap:.12rem;margin-bottom:.75rem}
.xsell-title{font-family:var(--ff-head);font-weight:700;font-size:1.05rem;color:var(--green-900)}
.xsell-sub{font-size:.85rem;color:var(--muted)}
.xsell-track{display:flex;gap:.7rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.xsell-track::-webkit-scrollbar{height:6px}
.xsell-track::-webkit-scrollbar-thumb{background:rgba(13,42,26,.16);border-radius:3px}
.xs-card{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:box-shadow .2s,transform .2s}
.xs-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.xs-media{background:var(--bg-cream)}
.xs-media img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block}
.xs-info{display:flex;flex-direction:column;gap:.16rem;padding:.55rem .6rem .2rem;flex:1}
.xs-name{font-weight:600;font-size:.82rem;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.05em}
.xs-price{font-weight:700;font-size:.92rem;color:var(--green-600)}
.xs-price small{font-weight:600;font-size:.72rem}
.xs-price s{color:var(--muted);font-weight:500;font-size:.74rem;margin-left:.2rem}
.xs-add{margin:.45rem .5rem .6rem;display:inline-flex;align-items:center;justify-content:center;gap:.32rem;padding:.44rem;border-radius:10px;background:var(--green);color:#fff;font-weight:700;font-size:.8rem;border:none;transition:background .2s}
.xs-add svg{width:15px;height:15px}
.xs-add:hover{background:var(--green-900)}
.order-xsell{margin-top:.3rem}
.order-xsell:empty{display:none}
/* Up-sell nudge inside the product modal */
.modal-upsell{display:flex;align-items:center;gap:.6rem;width:100%;margin:.3rem 0 .7rem;padding:.62rem .8rem;border:1px dashed var(--gold);background:rgba(200,162,74,.09);border-radius:12px;text-align:left;color:var(--green-900);font-size:.88rem;cursor:pointer;transition:background .2s}
.modal-upsell:hover{background:rgba(200,162,74,.17)}
.modal-upsell .mu-ic{display:inline-flex;color:var(--gold-dark)}
.modal-upsell .mu-txt{flex:1;line-height:1.35}
.modal-upsell .mu-go{font-weight:700;color:var(--gold-dark);white-space:nowrap}/* Compact product cards on phones: no child stretches, content packs to the top. */
@media(max-width:768px){
  .catalog-block .product-card{align-self:flex-start}
  .catalog-block .pc-body{flex:0 0 auto;justify-content:flex-start}
  .catalog-block .pc-body>*{flex:0 0 auto}
  .catalog-block .pc-btns{margin-top:.6rem}
}

/* Compact product cards on phones: body is a normal block so nothing stretches. */
@media(max-width:768px){
  .catalog-block .product-card{align-self:flex-start}
  .catalog-block .pc-body{display:block}
  .catalog-block .pc-sizes{margin-bottom:.6rem}
  .catalog-block .pc-btns{display:flex;margin-top:.7rem}
}