/* ===== design-v4 shared system ===== */
/* ============ BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#1A1A1A;--ink2:#3A3B3D;--muted:#8A8B8D;--border:#E5E5E5;--bg2:#F7F7F7;
  --accent:#F97316;--accent-dark:#EA580C;
  --r1:#A34D5D;--r2:#CF8347;--r3:#E0C65F;--r4:#93C262;--r5:#6BB2E4;--r6:#6E6EAA;--r7:#9365A6;
  --container:1366px;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#fff;color:var(--ink2);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:var(--container);margin:0 auto;padding:0 16px}
@media(min-width:1080px){.wrap{padding:0 32px}}
.rainbow-line{height:2px;background:linear-gradient(90deg,var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r7))}
h1,h2,h3{color:var(--ink);letter-spacing:-.01em}
.sec{padding:56px 0}
@media(min-width:1080px){.sec{padding:80px 0}}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:28px}
.sec-title{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em}
.sec-link{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;border-bottom:1px solid var(--border);padding-bottom:2px;transition:.2s}
.sec-link:hover{color:var(--accent);border-color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;border-radius:10px;padding:13px 26px;transition:.2s;line-height:1.2}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid #CFCFCF}
.btn-ghost:hover{border-color:var(--ink)}

/* ============ PROMO TOPBAR ============ */
.promobar{background:var(--ink);color:#fff;font-size:13px}
.promobar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;min-height:38px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.promobar a{color:var(--accent);font-weight:600}
.promobar a:hover{text-decoration:underline}

/* ============ TOPBAR ============ */
.topbar{border-bottom:1px solid var(--border)}
.topbar .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.logo img{width:126px;height:auto}
.contact-dd{display:none;position:relative;margin-left:22px}
@media(min-width:1080px){.contact-dd{display:block}}
.contact-dd>button{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink);padding:8px 12px;border-radius:8px;transition:.15s;cursor:pointer;background:none}
.contact-dd>button:hover{background:var(--bg2)}
.contact-dd>button .chev{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;transition:transform .2s}
.contact-dd.open>button .chev{transform:rotate(180deg)}
.contact-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.12);padding:10px;min-width:230px;z-index:80}
.contact-dd.open .contact-menu{display:block}
.contact-menu a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink);transition:.15s;white-space:nowrap}
.contact-menu a:hover{background:var(--bg2)}
.cd-ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cd-ic svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topnav{display:none;align-items:center;gap:4px;margin-left:auto}
.topnav a{font-size:14px;font-weight:600;color:var(--ink2);padding:8px 12px;border-radius:8px;transition:.15s}
.topnav a:hover{color:var(--ink);background:var(--bg2)}
.topnav a.hl{color:#DC2626}
.more{position:relative}
.more>button{font-size:14px;font-weight:600;color:var(--ink2);padding:8px 12px;border-radius:8px}
.more>button:hover{background:var(--bg2)}
.more-menu{position:absolute;top:calc(100% + 6px);right:0;left:auto;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.10);padding:8px;min-width:240px;display:none;z-index:60}
.more.open .more-menu{display:block}
.more-menu a{display:block;font-size:14px;padding:9px 12px;border-radius:8px}
.more-menu a:hover{background:var(--bg2);color:var(--ink)}
.top-actions{margin-left:auto;display:none;align-items:center;gap:2px}
.top-actions a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--ink2);padding:6px 12px;border-radius:8px;position:relative}
.top-actions a:hover{color:var(--ink);background:var(--bg2)}
.top-actions svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.count{position:absolute;top:0;right:6px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.burger{margin-left:auto;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px}
.burger:hover{background:var(--bg2)}
.burger svg{width:24px;height:24px;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;fill:none}
@media(min-width:1080px){.topnav,.top-actions{display:flex}.burger{display:none}}

/* mobile nav */
.mobilenav{display:none;border-bottom:1px solid var(--border);background:#fff}
.mobilenav.open{display:block}
.mobilenav a{display:block;padding:13px 16px;font-size:15px;font-weight:600;color:var(--ink2);border-bottom:1px solid #F0F0F0}
.mobilenav a:last-child{border-bottom:none}
@media(min-width:1080px){.mobilenav{display:none!important}}

/* ============ CATALOG ROW ============ */
.catrow{border-bottom:1px solid var(--border);background:#fff;position:relative;z-index:50}
.catrow .wrap{display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px}
.cat-btn{display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;padding:12px 20px;border-radius:10px;transition:.2s;white-space:nowrap}
.cat-btn:hover{background:var(--accent-dark)}
.cat-btn svg{width:18px;height:18px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round}
.cat-btn .chev{width:14px;height:14px;transition:transform .2s}
.cat-btn.open .chev{transform:rotate(180deg)}
.search{flex:1;display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg2);transition:.2s}
.search:focus-within{border-color:var(--ink);background:#fff}
.search input{flex:1;border:none;outline:none;background:transparent;font:inherit;font-size:14px;padding:12px 16px;color:var(--ink);min-width:0}
.search button{display:flex;align-items:center;background:transparent;padding:12px 14px;transition:.2s}
.search button:hover{background:#EDEDED}
.search svg{width:18px;height:18px;stroke:var(--ink2);stroke-width:2;fill:none;stroke-linecap:round}
.cat-acts{display:none;align-items:center;gap:10px;margin-left:auto;margin-right:6px}
@media(min-width:1080px){.cat-acts{display:flex}}
.cat-acts a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--ink2);padding:6px 12px;border-radius:8px;position:relative;transition:.15s}
.cat-acts a:hover{color:var(--ink);background:var(--bg2)}
.cat-acts svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cat-acts .count{position:absolute;top:0;right:8px;background:var(--accent);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.cart-link{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--ink);border:1px solid var(--border);border-radius:10px;padding:11px 18px;position:relative;transition:.2s;white-space:nowrap}
.cart-link:hover{border-color:var(--ink)}
.cart-link svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cart-label{display:none}
@media(min-width:1080px){.cart-label{display:inline}}

/* ============ MEGAMENU ============ */
.megamenu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 24px 48px rgba(0,0,0,.10);z-index:55}
.megamenu.open{display:block}
.mega-inner{max-width:var(--container);margin:0 auto;padding:32px;display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:1080px){.mega-inner{grid-template-columns:repeat(4,1fr)}}
.mega-col-title{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border);white-space:nowrap}
.mega-col-title:hover{color:var(--accent)}
.mega-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mega-col a.item{display:block;font-size:14px;color:var(--ink2);padding:7px 0;transition:.15s}
.mega-col a.item:hover{color:var(--accent);padding-left:4px}

/* ============ HERO SLIDER ============ */
.hero{padding:20px 0 0}
@media(min-width:1080px){.hero{padding:28px 0 0}}
.hero-frame{position:relative;border-radius:20px;overflow:hidden;background:var(--bg2)}
.slides{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.slide{flex:0 0 100%;display:grid;min-height:440px;padding:36px 24px 72px}
@media(min-width:1080px){.slide{grid-template-columns:1.05fr .95fr;gap:40px;min-height:480px;padding:0 64px;align-items:center}}
.slide-copy{display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:560px}
.slide-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:20px;padding:7px 14px;width:fit-content}
.slide-eyebrow .dot{width:7px;height:7px;border-radius:50%}
.slide h1,.slide .h1{font-size:clamp(30px,4.6vw,52px);font-weight:900;line-height:1.06;letter-spacing:-.025em;color:var(--ink)}
.slide p{font-size:clamp(14px,1.4vw,17px);color:var(--ink2);max-width:460px}
.slide-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.slide-visual{display:none;align-items:center;justify-content:center;position:relative;min-height:340px}
@media(min-width:1080px){.slide-visual{display:flex}}
.visual-ring{position:absolute;width:340px;height:340px;border-radius:50%;opacity:.5}
.bottles{display:flex;gap:20px;align-items:flex-end;position:relative}
.bottle{width:104px;border-radius:14px 14px 10px 10px;background:#fff;box-shadow:0 24px 44px rgba(0,0,0,.12);padding:0 0 14px;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.bottle .cap{width:34px;height:26px;background:var(--ink);border-radius:5px 5px 0 0;margin:0 auto}
.bottle .neck{width:46px;height:22px;background:linear-gradient(#EDEDED,#fff)}
.bottle .label{width:100%;margin-top:10px;padding:16px 8px;text-align:center;border-top:3px solid;border-bottom:3px solid}
.bottle .label b{display:block;font-size:11px;letter-spacing:.14em;color:var(--ink)}
.bottle .label span{display:block;font-size:12px;font-weight:700;margin-top:3px}
.bottle.tall{padding-top:0;height:270px}
.bottle.short{height:236px;width:92px}
.carton{width:150px;height:240px;border-radius:12px;background:#DCE8F4;box-shadow:0 24px 44px rgba(0,0,0,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px}
.carton b{font-size:22px;font-weight:900;color:#1F3A5F;letter-spacing:-.02em}
.carton i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.12em;color:#1F3A5F;border:2px solid #1F3A5F;border-radius:4px;padding:3px 8px}
.carton span{font-size:12px;color:#3A5A80;font-weight:600}
.promo-chip{position:absolute;top:-8px;right:-18px;background:var(--accent);color:#fff;border-radius:50%;width:84px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;box-shadow:0 12px 24px rgba(249,115,22,.4);transform:rotate(8deg)}
.promo-chip b{font-size:20px;line-height:1}
.promo-chip span{font-size:10px;font-weight:700;letter-spacing:.06em}
.hero-nav{position:absolute;bottom:22px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between}
@media(min-width:1080px){.hero-nav{left:64px;right:64px}}
.dots{display:flex;gap:8px}
.dots button{width:28px;height:4px;border-radius:2px;background:#D9D9D9;transition:.25s;padding:0}
.dots button.on{background:var(--ink);width:44px}
.arrows{display:flex;gap:8px}
.arrows button{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:.2s;font-size:18px;color:var(--ink)}
.arrows button:hover{border-color:var(--ink)}

/* ============ PARTNERS STRIP ============ */
.partners{border-bottom:1px solid var(--border)}
.partners .wrap{display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px}
.partners-label{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.partners a{font-size:16px;font-weight:800;letter-spacing:-.01em;color:#B5B6B8;transition:.2s}
.partners a:hover{color:var(--ink)}
.partners a.more-brands{font-size:13px;font-weight:700;color:var(--accent)}

/* ============ BESTSELLER TABS ============ */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{font-size:14px;font-weight:700;padding:10px 18px;border-radius:24px;border:1px solid var(--border);color:var(--ink2);transition:.2s;background:#fff}
.tabs button:hover{border-color:var(--ink);color:var(--ink)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.strip-wrap{position:relative;margin-top:26px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 12px)/2);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 0 24px;margin:-10px 0 -20px}
.strip::-webkit-scrollbar{display:none}
.strip>*{scroll-snap-align:start}
@media(min-width:700px){.strip{grid-auto-columns:calc((100% - 32px)/3);gap:16px}}
@media(min-width:1080px){.strip{grid-auto-columns:calc((100% - 80px)/5);gap:20px}}
.strip-arrows{position:absolute;top:-64px;right:0;display:none;gap:8px}
@media(min-width:1080px){.strip-arrows{display:flex}}
.strip-arrows button{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:17px;color:var(--ink);transition:.2s}
.strip-arrows button:hover{border-color:var(--ink)}

/* ============ PRODUCT CARD ============ */
.pcard{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:box-shadow .25s,transform .25s,border-color .25s}
.pcard:hover{border-color:#D4D4D4;box-shadow:0 16px 36px rgba(0,0,0,.08);transform:translateY(-3px)}
.pcard .imgbox{position:relative;background:var(--bg2);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:18px}
.pcard .imgbox img{max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s}
.pcard:hover .imgbox img{transform:scale(1.04)}
.badge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;letter-spacing:.08em;border-radius:6px;padding:4px 8px;color:#fff;background:var(--ink)}
.badge.hit{background:var(--accent)}
.badge.new{background:var(--r4)}
.badge.top{background:var(--ink)}
.wish-btn{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;z-index:2;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.wish-btn:hover{border-color:var(--accent)}
.wish-btn svg{width:16px;height:16px;stroke:var(--ink2);fill:none;stroke-width:2;transition:.2s}
.wish-btn.on{background:var(--accent);border-color:var(--accent)}
.wish-btn.on svg{stroke:#fff;fill:#fff}
.pcard .body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.pcard .brand{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pcard .name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.pcard .sub{font-size:12px;color:var(--muted)}
.pcard .buy{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.pcard .price{font-size:17px;font-weight:800;color:var(--ink);line-height:1.1}
.pcard .vol{font-size:11.5px;color:var(--muted);margin-top:2px}
.addbtn{width:40px;height:40px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);font-size:20px;font-weight:600;color:var(--ink);transition:.2s;flex-shrink:0;line-height:1}
.addbtn:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ============ CATEGORIES ============ */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:700px){.cats{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:1080px){.cats{grid-template-columns:repeat(6,1fr);gap:20px}}
.ccard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 18px;display:flex;flex-direction:column;gap:12px;transition:.25s;position:relative;overflow:hidden}
.ccard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c,var(--accent));opacity:0;transition:.25s}
.ccard:hover{border-color:#D4D4D4;box-shadow:0 12px 28px rgba(0,0,0,.07);transform:translateY(-3px)}
.ccard:hover::after{opacity:1}
.ccard .icon{width:44px;height:44px;border-radius:12px;background:var(--bg2);display:flex;align-items:center;justify-content:center}
.ccard .icon svg{width:22px;height:22px;stroke:var(--c,var(--ink));stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ccard b{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.ccard span{font-size:12px;color:var(--muted);line-height:1.4}

/* ============ BRANDS GRID ============ */
.brands-sec{background:var(--bg2)}
.bgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:700px){.bgrid{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:1080px){.bgrid{grid-template-columns:repeat(5,1fr);gap:20px}}
.bcard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:6px;transition:.25s}
.bcard:hover{box-shadow:0 12px 28px rgba(0,0,0,.07);transform:translateY(-3px);border-color:#D4D4D4}
.bcard .bname{font-size:19px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.bcard .bcat{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.bcard .bcat i{width:7px;height:7px;border-radius:50%;font-style:normal;flex-shrink:0}
.bcard .bmeta{font-size:12.5px;font-weight:600;color:var(--ink2);margin-top:6px}
.bcard .bdesc{font-size:12.5px;color:var(--muted);line-height:1.45}

/* ============ ABOUT ============ */
.about-grid{display:grid;gap:36px}
@media(min-width:1080px){.about-grid{grid-template-columns:1.1fr .9fr;gap:80px;align-items:start}}
.about-eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.about-grid h2{font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:16px}
.about-grid p{font-size:15px;max-width:560px;margin-bottom:12px}
.about-extra{display:none}
.about-extra.open{display:block}
.show-more{font-size:14px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--border);padding-bottom:2px;transition:.2s}
.show-more:hover{color:var(--accent);border-color:var(--accent)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:700px){.stats{gap:16px}}
.stat{background:var(--bg2);border-radius:14px;padding:26px 22px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--c)}
.stat b{display:block;font-size:clamp(28px,3vw,38px);font-weight:900;letter-spacing:-.03em;color:var(--ink);line-height:1}
.stat span{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-top:8px}

/* ============ CLIENTS MARQUEE ============ */
.clients-sec{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 0;overflow:hidden}
.clients-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.clients-head h2{font-size:17px;font-weight:800}
.clients-head span{font-size:13px;color:var(--muted);font-weight:600}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:12px;animation:scroll 42s linear infinite;flex-shrink:0;padding-right:12px}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-100%)}}
.client{font-size:14px;font-weight:700;color:var(--ink2);background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:10px 20px;white-space:nowrap}
.client.rest{background:#fff;color:var(--muted)}

/* ============ NEWS ============ */
.news-grid{display:grid;gap:16px}
@media(min-width:1080px){.news-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.ncard{border:1px solid var(--border);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:12px;transition:.25s;background:#fff;position:relative;overflow:hidden}
.ncard:hover{box-shadow:0 14px 32px rgba(0,0,0,.08);transform:translateY(-3px);border-color:#D4D4D4}
.ncard.promo{background:var(--ink);border-color:var(--ink)}
.ncard.promo .ntitle{color:#fff}
.ncard.promo .ndate{color:rgba(255,255,255,.55)}
.ncard.promo::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#FDBA74)}
.ntype{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:5px 10px;width:fit-content}
.ntype.t-promo{background:var(--accent);color:#fff}
.ntype.t-recipe{background:#EEF4E8;color:#4D7A2E}
.ntype.t-hub{background:var(--bg2);color:var(--ink2)}
.ndate{font-size:12.5px;font-weight:600;color:var(--muted)}
.ntitle{font-size:17px;font-weight:800;color:var(--ink);line-height:1.35;letter-spacing:-.01em;flex:1}
.ncta{font-size:14px;font-weight:700;color:var(--accent);margin-top:4px}
.ncard:hover .ncta{text-decoration:underline}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:#fff;margin-top:40px}
.foot-grid{display:grid;gap:36px;padding:56px 0 40px}
@media(min-width:1080px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;padding:72px 0 48px}}
.foot-brand .wordmark{font-size:22px;font-weight:900;letter-spacing:.02em}
.foot-brand .wordmark em{font-style:normal;background:linear-gradient(90deg,var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r7));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 2px}
.foot-brand p{font-size:13.5px;color:rgba(255,255,255,.55);margin-top:14px;max-width:300px;line-height:1.6}
.foot-col h4{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:16px}
.foot-col a{display:block;font-size:14px;color:rgba(255,255,255,.78);padding:5px 0;transition:.15s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;font-size:12.5px;color:rgba(255,255,255,.4)}

/* ===== design-v4 reskin — restyles existing legacy classes to match the new system (no markup changes) ===== */
.wrap,.inner{max-width:1366px}
h1,h2,h3{letter-spacing:-.01em}
.sec-title,.pg-title,.page-title{letter-spacing:-.02em!important;font-weight:800!important}

/* product cards — both naming variants (.pcard-en on home-style cards, .pcard-sub on listing/brand cards) */
.pcard{border:1px solid var(--border)!important;border-radius:14px!important;overflow:hidden;transition:box-shadow .25s,transform .25s,border-color .25s!important;background:#fff}
.pcard:hover{border-color:#D4D4D4!important;box-shadow:0 16px 36px rgba(0,0,0,.08)!important;transform:translateY(-3px)}
.pcard-img{background:var(--bg2)!important}
.pcard-img img{mix-blend-mode:multiply}
.pcard-badge,.badge,.b-hit,.b-new,.b-sale,.b-top{border-radius:6px!important;font-weight:800!important;letter-spacing:.06em!important}
.pcard-badge.badge-hit,.badge.b-hit,.b-hit{background:var(--accent)!important}
.pcard-badge.badge-new,.badge.b-new,.b-new{background:#93C262!important}
.pcard-badge.badge-sale,.badge.b-sale,.b-sale{background:var(--accent)!important}
.pcard-brand{color:var(--muted)!important;font-weight:800!important;letter-spacing:.09em!important}
.pcard-name{color:var(--ink)!important;font-weight:700!important}
.pcard-en,.pcard-sub{color:var(--muted)!important}
.pcard-price{color:var(--ink)!important;font-weight:800!important}
.pcard-vol{color:var(--muted)!important}
.pcard-add{border-radius:10px!important;background:var(--bg2)!important;border:1px solid var(--border)!important;transition:.2s!important}
.pcard-add:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}

/* category tiles / subnav tiles */
.cat-card,.subnav-tile{border:1px solid var(--border)!important;border-radius:14px!important;transition:.25s!important;background:#fff}
.cat-card:hover,.subnav-tile:hover{border-color:#D4D4D4!important;box-shadow:0 12px 28px rgba(0,0,0,.07)!important;transform:translateY(-3px)}
.cat-name,.subnav-tile-name{color:var(--ink)!important;font-weight:700!important}

/* brand cards */
.brand-card{border:1px solid var(--border)!important;border-radius:14px!important;transition:.25s!important;background:#fff}
.brand-card:hover{border-color:#D4D4D4!important;box-shadow:0 12px 28px rgba(0,0,0,.07)!important;transform:translateY(-3px)}
.bc-name{color:var(--ink)!important;font-weight:900!important;letter-spacing:-.02em!important}

/* news cards */
.news-card{border:1px solid var(--border)!important;border-radius:16px!important;transition:.25s!important;background:#fff}
.news-card:hover{border-color:#D4D4D4!important;box-shadow:0 14px 32px rgba(0,0,0,.08)!important;transform:translateY(-3px)}
.news-title{color:var(--ink)!important;font-weight:800!important;letter-spacing:-.01em!important}
.news-link{color:var(--accent)!important;font-weight:700!important}

/* buttons */
.btn-gold,.add-cart,.ingredient-buy-btn,.fbt-cta{background:var(--accent)!important;border-radius:10px!important;font-weight:700!important;transition:.2s!important}
.buy-now{background:transparent!important;color:var(--ink)!important;border:1.5px solid var(--ink)!important;border-radius:10px!important;font-weight:700!important;transition:.2s!important}
.buy-now:hover{background:var(--bg2)!important}
.buy-block{margin-bottom:12px!important}
.btn-gold:hover,.add-cart:hover,.ingredient-buy-btn:hover,.fbt-cta:hover{background:var(--accent-dark)!important}
.btn-ghost{border-radius:10px!important}

/* filter sidebar */
.sf-title,.sidebar-title{color:var(--ink)!important;font-weight:800!important;letter-spacing:.04em!important}
.sf-opt{border-radius:8px!important}
.sf-opt:hover{background:var(--bg2)!important}
.filter-tag,.tag-pill{border-radius:20px!important;font-weight:700!important}
.pg-btn,.pagination a,.pagination button{border-radius:8px!important;transition:.2s!important}

/* SEO / callout blocks */
.seo-block{background:var(--bg2)!important;border-radius:14px!important}
.highlight-box{background:#FFF7ED!important;border:1px solid #FED7AA!important;border-radius:10px!important;color:#7C2D12!important}

/* product detail: gallery, specs, tabs, variants, qty */
.gallery-main{border-radius:14px!important;background:var(--bg2)!important}
.gallery-thumbs .thumb{border-radius:10px!important;border:1px solid var(--border)!important}
.specs-table{border-radius:12px!important;overflow:hidden}
.tabs-nav{border-bottom:1px solid var(--border)!important}
.tab-btn{font-weight:700!important}
.tab-btn.active,.tab-btn.on{color:var(--ink)!important;border-color:var(--ink)!important}
.variant-group .vol-btn{border-radius:8px!important;border:1px solid var(--border)!important;transition:.2s!important}
.variant-group .vol-btn:hover,.variant-group .vol-btn.on{border-color:var(--ink)!important}
.qty-ctrl{border-radius:8px!important;border:1px solid var(--border)!important}

.fbt-box{border-radius:14px!important;border:1px solid var(--border)!important}
.recipe-cta-card{border-radius:14px!important;border:1px solid var(--border)!important;transition:.25s!important}
.recipe-cta-card:hover{transform:translateY(-3px)!important;box-shadow:0 14px 32px rgba(0,0,0,.08)!important}

/* recipe article pages */
.article-cover,.rc-img{border-radius:16px!important}
.ingredients-box{border-radius:14px!important;border:1px solid var(--border)!important}
.ingredient-row{border-radius:10px!important}
.step-num{background:var(--accent)!important;color:#fff!important;font-weight:800!important}
.related-card{border-radius:14px!important;border:1px solid var(--border)!important;transition:.25s!important}
.related-card:hover{transform:translateY(-3px)!important;box-shadow:0 14px 32px rgba(0,0,0,.08)!important}

/* hero / page-hero blocks */
.hero,.page-hero{border-radius:20px!important}
.h-name,.bc-name{letter-spacing:-.02em!important}

/* ===== design-v4 extended shared components ===== */

/* ============ ХАБ КАТЕГОРІЇ ============ */
.crumbs{font-size:13px;color:var(--muted);padding:20px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--ink2);transition:.15s}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:#C9C9C9}
.page-head{padding:18px 0 28px}
.page-head h1{font-size:clamp(26px,3.4vw,38px);font-weight:900;letter-spacing:-.025em}
.page-head .meta{font-size:14px;color:var(--muted);margin-top:6px;font-weight:600}
/* плитки підкатегорій */
.scats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:44px}
@media(min-width:700px){.scats{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:1080px){.scats{grid-template-columns:repeat(6,1fr);gap:20px}}
.scard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;transition:.25s;position:relative;overflow:hidden}
.scard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c,var(--accent));opacity:0;transition:.25s}
.scard:hover{border-color:#D4D4D4;box-shadow:0 14px 30px rgba(0,0,0,.08);transform:translateY(-3px)}
.scard:hover::after{opacity:1}
.scard-img{background:var(--bg2);border-radius:10px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:12px}
.scard-img img{max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s}
.scard:hover .scard-img img{transform:scale(1.06)}
.scard b{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;flex:1}
.scard-cta{font-size:12px;font-weight:700;color:var(--muted);transition:.15s}
.scard:hover .scard-cta{color:var(--accent)}
/* розкладка листингу */
.listing{display:grid;gap:28px;padding-bottom:64px}
@media(min-width:1080px){.listing{grid-template-columns:264px 1fr;gap:36px;align-items:start}}
.filters{background:#fff;border:1px solid var(--border);border-radius:14px;padding:6px 20px 20px;display:none}
.filters.open{display:block}
@media(min-width:1080px){.filters{display:block;position:sticky;top:16px}}
.filters-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid var(--border);border-radius:10px;padding:12px;font-weight:700;font-size:14px;color:var(--ink)}
@media(min-width:1080px){.filters-toggle{display:none}}
.fgroup{border-bottom:1px solid #F0F0F0;padding:16px 0}
.fgroup:last-child{border-bottom:none;padding-bottom:0}
.fgroup-title{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.fprice{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink)}
.fprice input{width:80px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;color:var(--ink);text-align:center;outline:none}
.fprice input:focus{border-color:var(--ink)}
.fcheck{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2);padding:5px 0;cursor:pointer;user-select:none}
.fcheck:hover{color:var(--ink)}
.fcheck input{display:none}
.fcheck .box{width:18px;height:18px;border:1.5px solid #CFCFCF;border-radius:5px;flex-shrink:0;position:relative;transition:.15s;background:#fff}
.fcheck input:checked+.box{background:var(--accent);border-color:var(--accent)}
.fcheck input:checked+.box::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.clear-filters{font-size:13px;font-weight:700;color:var(--muted);margin-top:16px;border-bottom:1px solid var(--border);padding-bottom:1px;transition:.15s}
.clear-filters:hover{color:var(--accent);border-color:var(--accent)}
/* сортування + сітка */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.found{font-size:14px;color:var(--ink2)}
.found b{color:var(--ink)}
.sort{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.sort select{font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);border:1px solid var(--border);border-radius:8px;padding:9px 12px;background:#fff;outline:none;cursor:pointer}
.sort select:hover{border-color:var(--ink)}
.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.plist{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:1080px){.plist{grid-template-columns:repeat(4,1fr);gap:20px}}
.badge.pure{background:var(--r4)}
/* пагінація */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:36px}
.pager a,.pager span{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);font-size:14px;font-weight:700;color:var(--ink2);transition:.2s;padding:0 8px}
.pager a:hover{border-color:var(--ink);color:var(--ink)}
.pager .cur{background:var(--ink);border-color:var(--ink);color:#fff}
/* про розділ */
.seo-block{background:var(--bg2);border-radius:16px;padding:28px 24px;margin-bottom:64px}
@media(min-width:1080px){.seo-block{padding:36px 40px}}
.seo-block h2{font-size:16px;font-weight:800;margin-bottom:10px}
.seo-block p{font-size:14px;color:var(--ink2);max-width:740px;margin-bottom:10px}

/* unified add-to-cart "+": visible box by default, orange on hover (sitewide) */
.pcard-add,.addbtn{background:var(--bg2)!important;border:1px solid var(--border)!important;color:var(--ink)!important;border-radius:10px!important;cursor:pointer!important;transition:.2s!important}
.pcard-add:hover,.addbtn:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.psc-add:hover{background:var(--accent)!important}