/* NitroLavka — єдиний файл стилів (дизайн «ТИП 2», світлий стрітвір) */
:root{
  --bg:#EFEEEA; --ink:#111111; --accent:#FF4D00; --card:#FFFFFF; --line:#DDDBD5; --line2:#C9C7C0;
  --muted:#55534E; --text2:#3A3935; --ok:#1D6B2F; --err:#B33A00;
  /* поверхні та службові кольори (темна тема перевизначає їх нижче) */
  --hover:rgba(17,17,17,.06); --hdr-bg:rgba(239,238,234,.94); --ph:#E4E2DC; --ink-hover:#000;
  --shadow:var(--ink);                      /* «жорстка» тінь карток (меню мов, вхід, «Дякуємо») */
  --panel:#111111; --panel-line:#3A3935;    /* темні панелі: верхня смуга, підвал, бігучий рядок, «Ваше замовлення» */
  --on-panel:#EFEEEA; --on-panel-2:#C9C7C0; --on-panel-3:#B9B7B0; --on-panel-4:#8E8C86;
  --on-accent:#111111;                      /* текст на помаранчевому — завжди темний */
  --err-bg:#FFE7DC; --err-tx:#8A2E00; --bad-bg:#FFF4EF;
  color-scheme:light;
  --display:'Archivo Black', 'Arial Black', Impact, sans-serif;
  --sans:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* ---------- темна тема: html[data-theme=dark] (ставить скрипт у <head> до відмальовки) ---------- */
html[data-theme=dark]{
  --bg:#111111; --ink:#EFEEEA; --card:#1B1B1A; --line:#2E2D2A; --line2:#4A4944;
  --muted:#A9A79F; --text2:#CFCDC6; --ok:#5CC27A; --err:#FF7A45;
  --hover:rgba(239,238,234,.08); --hdr-bg:rgba(17,17,17,.92); --ph:#232321; --ink-hover:#fff;
  --shadow:#3A3935;
  --panel:#1B1B1A; --panel-line:#3A3935;
  --err-bg:#3A1A0C; --err-tx:#FFB394; --bad-bg:#2A1710;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100vh;overflow-x:hidden}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--ink-hover)}
img{max-width:100%}
button{font-family:var(--sans)}
[hidden]{display:none !important}
.sr{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.wrap{max-width:1400px;margin:0 auto;padding-left:24px;padding-right:24px}
input[type=checkbox],input[type=radio]{accent-color:var(--ink);width:18px;height:18px;margin:0;flex:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- верхня смуга ---------- */
.topbar{background:var(--panel);color:var(--on-panel);font-size:13px;font-weight:500;letter-spacing:.08em}
.topbar .wrap{padding-top:10px;padding-bottom:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px;text-transform:uppercase}
.topbar .dot{color:var(--accent)}

/* ---------- шапка ---------- */
.hdr{position:sticky;top:0;z-index:20;background:var(--hdr-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.hrow{max-width:1400px;margin:0 auto;padding:14px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.logo{font-family:var(--display);font-size:28px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.logo span,.logo-big span{color:var(--accent)}
.nav{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 420px}
.nav a{display:inline-flex;align-items:center;height:40px;padding:0 12px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-radius:999px}
.nav a:hover{background:var(--hover)}
.nav a.on{background:var(--ink);color:var(--bg);font-weight:700;padding:0 14px}
.search{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:var(--card);border:2px solid var(--ink);border-radius:999px;flex:0 1 280px}
.search input{background:transparent;border:0;outline:none;color:var(--ink);font:inherit;font-size:14px;width:100%;min-width:0}
.search input::-webkit-search-cancel-button{cursor:pointer}
.lang{position:relative}
.hbtn{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 14px;background:transparent;border:2px solid var(--ink);border-radius:999px;cursor:pointer;font:700 14px var(--sans);color:var(--ink);letter-spacing:.06em}
.hbtn.round{width:44px;padding:0}
.hbtn.acc{padding:0 16px 0 6px;gap:10px;letter-spacing:0}
.hbtn.acc .ava{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:800}
.cartbtn{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:var(--ink);color:var(--bg);border-radius:999px;font-weight:700;font-size:14px}
.cartbtn:hover{color:var(--bg)}
.cartbtn.bump{animation:bump .35s}
@keyframes bump{50%{transform:scale(1.12)}}
.langmenu{position:absolute;right:0;top:54px;z-index:40;min-width:240px;padding:8px;background:var(--card);border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--shadow);display:flex;flex-direction:column;gap:4px}
.langmenu[hidden]{display:none}
.langmenu button.l{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:10px;font:500 14px var(--sans);cursor:pointer;text-align:left;border:0;background:transparent;color:var(--ink)}
.langmenu button.l:hover{background:var(--bg)}
.langmenu button.l[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.langmenu button.l b{width:30px;font-weight:800}
.langmenu .other{border-top:1px solid var(--line);margin-top:4px;padding:10px 4px 2px;display:flex;flex-direction:column;gap:8px}
.langmenu .other>span{font-size:12px;color:var(--muted)}
.langmenu .other form{display:flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 12px;border:1px solid var(--line2);border-radius:999px}
.langmenu .other input{background:transparent;border:0;outline:none;font:inherit;font-size:14px;width:100%;color:var(--ink);min-width:0}
.langmenu .other button{height:32px;padding:0 10px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font:700 12px var(--sans);cursor:pointer}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:60px;padding:0 32px;background:var(--ink);color:var(--bg);border:0;border-radius:999px;font:700 16px var(--sans);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.btn:hover{color:var(--bg)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:0 28px}
.btn.orange{background:var(--accent);color:var(--on-accent)}
.btn.sm{height:44px;padding:0 20px;font-size:14px;text-transform:none;letter-spacing:0}
.chip{height:44px;padding:0 18px;border-radius:999px;font:700 14px var(--sans);cursor:pointer;background:transparent;color:var(--ink);border:2px solid var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.link-u{font-weight:700;font-size:15px;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:2px}

/* ---------- заголовки ---------- */
.h2{margin:0;font-family:var(--display);font-size:clamp(36px,9vw,56px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.sechead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px}
.crumbs{margin:0 0 10px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--ink)}

/* ---------- головна: hero ---------- */
.hero{padding-top:40px;padding-bottom:32px}
.hero-row{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.hero-l{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:8px 0}
.hero-l>div:first-child{display:flex;flex-direction:column;gap:20px}
.tag{align-self:flex-start;display:inline-flex;align-items:center;height:32px;padding:0 14px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px}
.h1{margin:0;font-family:var(--display);font-size:clamp(56px,13vw,112px);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;overflow-wrap:anywhere}
.h1 span{color:var(--accent)}
.lead{margin:0;font-size:19px;line-height:1.5;color:var(--text2);max-width:480px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hgrid{flex:1 1 560px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:260px 260px;gap:12px}
.tile{position:relative;overflow:hidden;border-radius:22px;display:block;background:var(--ph)}
.tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tile:hover img{transform:scale(1.04)}
.hgrid .tile:first-child{grid-row:span 2}
.tile .pill{position:absolute;left:14px;bottom:14px;background:var(--bg);padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px;text-transform:uppercase;max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trust{margin-top:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.trust>div{display:flex;align-items:center;gap:12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;min-width:0}
.trust i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--panel);border:1px solid var(--panel-line);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;font-style:normal}
.trust div>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.trust b{font-weight:800;font-size:14px}
.trust small{font-size:13px;color:var(--muted);line-height:1.3}

/* бігучий рядок */
.run-wrap{background:var(--panel);color:var(--on-panel);overflow:hidden;border-top:2px solid var(--panel-line);border-bottom:2px solid var(--panel-line)}
.run{display:flex;width:max-content;animation:nlrun 38s linear infinite;padding:18px 0}
.run span{font-family:var(--display);font-size:34px;text-transform:uppercase;padding:0 22px;white-space:nowrap}
.run span::after{content:"✱";color:var(--accent);padding-left:44px}
@keyframes nlrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.run{animation:none}}

/* категорії */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.cats .tile{aspect-ratio:3/4}
.cats .tile img{opacity:.9}
.cbar{position:absolute;left:0;right:0;bottom:0;padding:16px;display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:space-between;align-items:flex-end;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff}
.cname{font-family:var(--display);font-size:22px;text-transform:uppercase;line-height:1}
.ccount{font-size:13px;font-weight:600;opacity:.85}

/* як замовити, знайти, підписка */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.how>div{background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:10px}
.how .n{font-family:var(--display);font-size:56px;line-height:1;color:var(--accent)}
.how b{font-weight:800;font-size:20px}
.how p{margin:0;font-size:15px;color:var(--text2);line-height:1.5}
.find{background:var(--accent);color:var(--on-accent);border-radius:28px;padding:48px;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.find>div{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:14px}
.find h2{margin:0;font-family:var(--display);font-size:clamp(34px,8vw,52px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;white-space:pre-line}
.find p{margin:0;font-size:18px;line-height:1.5;max-width:560px}
.find .btn{height:64px}
.sub{background:var(--card);border:2px solid var(--ink);border-radius:28px;padding:40px 48px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.sub>div{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:8px}
.sub h2{margin:0;font-family:var(--display);font-size:clamp(28px,6vw,40px);line-height:1;text-transform:uppercase}
.sub p{margin:0;font-size:16px;color:var(--text2);line-height:1.5}
.sub form{flex:1 1 380px;min-width:0;display:flex;flex-wrap:wrap;gap:10px}
.sub label{flex:1 1 220px;display:flex;align-items:center;height:56px;padding:0 20px;border:2px solid var(--ink);border-radius:999px}
.sub input{background:transparent;border:0;outline:none;font:inherit;font-size:15px;width:100%;color:var(--ink)}
.sub button{flex:0 0 auto;height:56px;padding:0 28px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);font:700 15px var(--sans);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.sub .ok{font-weight:800;font-size:18px;color:var(--ok)}
.sub .bad{flex-basis:100%;font-size:13px;color:var(--err);font-weight:600}

/* ---------- картка товару (спільна) ---------- */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.grid.auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{position:relative;background:var(--card);border-radius:22px;overflow:hidden;border:1px solid var(--line);min-width:0}
.card>a{display:flex;flex-direction:column;color:var(--ink);height:100%}
.card .ph{position:relative;aspect-ratio:1;background:var(--ph);overflow:hidden}
.card .ph img{display:block;width:100%;height:100%;object-fit:cover}
.badge-new{position:absolute;top:12px;left:12px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:11px;letter-spacing:.1em;padding:6px 10px;border-radius:999px}
.card .txt{padding:14px 72px 16px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.card .br{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.card .nm{font-size:14px;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
.card .pr{font-size:18px;font-weight:800;margin-top:4px}
.fav{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:999px;border:2px solid var(--ink);background:var(--card);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.fav[aria-pressed=true]{background:var(--accent)}
.fav[aria-pressed=true] path{fill:var(--on-accent);stroke:var(--on-accent)}
.add{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font:700 20px var(--sans);cursor:pointer;transition:background .2s;padding:0}
.card:hover .add{background:var(--accent);color:var(--on-accent)}
.add.in{background:var(--accent);color:var(--on-accent)}
.empty{grid-column:1/-1;padding:40px 24px;background:var(--card);border:2px dashed var(--line2);border-radius:22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.empty b{font-weight:800;font-size:20px}
.empty span{font-size:15px;color:var(--text2)}

/* ---------- підвал ---------- */
.ftr{background:var(--panel);color:var(--on-panel);margin-top:0;border-top:1px solid var(--panel-line)}
.ftr .wrap{padding-top:48px;padding-bottom:96px;display:flex;flex-direction:column;gap:32px}
.logo-big{font-family:var(--display);font-size:clamp(34px,11vw,72px);max-width:100%;overflow-wrap:anywhere;line-height:.9;letter-spacing:-.03em}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;font-size:14px;color:var(--on-panel-3)}
.fcols>div{display:flex;flex-direction:column;gap:10px}
.fcols b{color:var(--on-panel);font-weight:800}
.fcols a{color:var(--on-panel-3)}.fcols a:hover{color:var(--on-panel)}
.fcopy{font-size:13px;color:var(--on-panel-4)}

/* плаваюча кнопка і тост */
.chatbtn{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 16px;background:var(--ink);color:var(--bg);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-weight:700;font-size:15px}
.chatbtn:hover{color:var(--bg)}
.chatbtn{transition:transform .25s,opacity .25s}
.chatbtn.away{transform:translateY(120px);opacity:0;pointer-events:none}
/* на оформленні кнопка не потрібна і закривала підсумок */
.page-checkout .chatbtn{display:none}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 20px;background:var(--ink);color:var(--bg);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-weight:600;font-size:14px;max-width:calc(100vw - 24px);animation:nltoast .25s ease-out}
.toast span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.toast a{color:var(--on-accent);background:var(--accent);padding:8px 14px;border-radius:999px;font-weight:800;white-space:nowrap;flex:none}
@keyframes nltoast{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ---------- каталог ---------- */
.page{max-width:1400px;margin:0 auto;padding:28px 24px 80px}
.cat-h1{margin:0;font-family:var(--display);font-size:clamp(40px,10vw,64px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere}
.cat-h1 small{font-family:var(--sans);font-size:18px;font-weight:600;color:var(--muted);letter-spacing:0;text-transform:none;white-space:nowrap}
.sortl{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
select.pill,.sortl select{height:44px;padding:0 16px;background:var(--card);border:2px solid var(--ink);border-radius:999px;font:inherit;color:var(--ink);max-width:100%}
.cat-row{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.fbtn{display:none;flex:1 1 100%;align-items:center;justify-content:center;gap:10px;height:52px;background:var(--ink);color:var(--bg);border:0;border-radius:999px;font:700 15px var(--sans);cursor:pointer}
.filters{flex:1 1 250px;max-width:290px;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:24px}
.filters fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.filters legend{font-weight:800;font-size:13px;letter-spacing:.12em;margin-bottom:10px;padding:0}
.filters .bsearch{display:flex}
.filters .bsearch input{flex:1;min-width:0;height:40px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;font:inherit;font-size:14px;color:var(--ink);background:var(--bg)}
.bchk{display:flex;align-items:center;gap:10px;min-height:36px;padding:0;background:transparent;border:0;font:600 15px var(--sans);color:var(--ink);cursor:pointer;width:100%}
.bchk .cb{flex:none;width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:var(--card);border:2px solid var(--ink);color:var(--ink)}
.bchk[aria-checked=true] .cb{background:var(--ink);color:var(--bg)}
.bchk .bn{flex:1;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bchk .bc{color:var(--muted);font-size:13px;font-weight:500}
.bmore{align-self:flex-start;background:none;border:0;padding:4px 0;font:700 14px var(--sans);border-bottom:2px solid var(--ink);cursor:pointer;color:var(--ink)}
.prow{display:flex;gap:8px;align-items:center}
.prow label{flex:1;min-width:0}
.prow input{width:100%;height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;font:inherit;color:var(--ink);background:var(--card)}
.ccats{display:flex;flex-wrap:wrap;gap:6px}
.ccats button{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;font:600 13px var(--sans);background:transparent;color:var(--ink);cursor:pointer}
.ccats button[aria-pressed=true]{background:var(--ink);color:var(--bg);font-weight:700}
.goods{flex:999 1 560px;min-width:0}
.more-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:36px}
.more-row small{font-size:13px;color:var(--muted)}
.more-row .btn{height:56px;padding:0 36px;font-size:15px}

/* ---------- товар ---------- */
.prod{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.gal{flex:1 1 560px;min-width:0;position:relative}
.gal .main{position:relative;border-radius:28px;border:2px solid var(--ink);overflow:hidden;background:var(--ph);aspect-ratio:1}
.gal .main img{display:block;width:100%;height:100%;object-fit:cover}
/* маленьке фото: реальний розмір по центру, без розтягування */
.gal .main img.nat{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.gal .badge-new{top:18px;left:18px;font-size:12px;padding:8px 12px}
.gal .arr{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:999px;border:2px solid var(--ink);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;font:700 20px var(--sans);color:var(--ink)}
.gal .arr.l{left:14px}.gal .arr.r{right:14px}
.gal .cnt{position:absolute;left:16px;bottom:16px;background:var(--bg);padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px}
.thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.thumbs button{flex:none;width:72px;height:72px;padding:0;border-radius:14px;border:2px solid transparent;overflow:hidden;cursor:pointer;background:none}
.thumbs button[aria-current=true]{border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.gal .note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.pinfo{flex:1 1 400px;max-width:540px;min-width:0;display:flex;flex-direction:column;gap:22px}
.pinfo .top{display:flex;flex-direction:column;gap:10px}
.pinfo .pbrand{font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;align-self:flex-start}
.pinfo h1{margin:0;font-family:var(--display);font-size:clamp(32px,8vw,46px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere}
.pinfo .sku{font-size:13px;color:var(--muted)}
.pinfo .ccode{font-size:14px;font-weight:700;color:var(--ink)}
.card .code{font-size:12px;color:var(--muted);letter-spacing:.02em}
.pinfo .price{margin:0;font-family:var(--display);font-size:40px}
.sizes{border:0;padding:0;margin:0;min-width:0}
.sizes legend{font-size:14px;font-weight:600;margin-bottom:12px;padding:0}
.sizes legend b{font-weight:800}.sizes legend em{font-style:normal;font-weight:500;color:var(--muted)}
.sizes .list{display:flex;flex-wrap:wrap;gap:8px}
.sizes .list button{min-width:58px;height:50px;padding:0 12px;border-radius:999px;font:700 15px var(--sans);cursor:pointer;background:var(--card);color:var(--ink);border:2px solid var(--ink)}
.sizes .list button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.sizes.err .list button{border-color:var(--err)}
.sizes p{margin:12px 0 0;font-size:13px;color:var(--muted)}
.sizes .errmsg{color:var(--err);font-weight:700}
.sizes .tg-ask{display:inline-flex;align-items:center;gap:8px;margin-top:12px;height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-weight:700;text-decoration:none}
.sizes .tg-ask svg{flex:none}
.line .size-later{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:var(--accent)}
.buy{display:flex;flex-wrap:wrap;gap:10px}
.buy .btn{flex:1 1 240px;height:62px}
.buy .fav{position:static;width:62px;height:62px;flex:none}
.pfacts{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.45}
.pfacts>div{display:flex;gap:12px}
.pfacts svg{flex:none;margin-top:1px}
.similar{margin-top:64px}
.similar h2{margin:0 0 20px;font-family:var(--display);font-size:40px;line-height:1;text-transform:uppercase}

/* ---------- форми (оформлення, кабінет, вхід) ---------- */
.fld{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;min-width:0}
.fld input,.fld textarea,.fld select{height:50px;padding:0 18px;border:2px solid var(--ink);border-radius:999px;font:inherit;font-weight:400;font-size:15px;color:var(--ink);background:var(--card);width:100%;min-width:0}
.fld textarea{height:auto;padding:12px 18px;border-radius:18px;resize:vertical}
.fld.bad input,.fld.bad textarea{border-color:var(--err);background:var(--bad-bg)}
.fld .hint{font-weight:400;font-size:12px;color:var(--muted)}
.fld .req{color:var(--err)}
.fld .okmark{font-weight:600;font-size:12px;color:var(--ok)}
.box{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;margin:0;min-width:0}
.box legend{float:left;width:100%;padding:0;margin:0 0 4px;font-size:20px;font-weight:800}
.box h2{margin:0;font-size:20px;font-weight:800}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px}
.col{display:flex;flex-direction:column;gap:14px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px}
.opt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:68px;padding:12px 16px;border-radius:16px;font:500 15px var(--sans);cursor:pointer;text-align:left;background:var(--card);color:var(--ink);border:2px solid var(--line2)}
.opt b{font-weight:700}
.opt small{font-size:13px;color:var(--muted)}
.opt[aria-checked=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.opt[aria-checked=true] small{color:var(--line2)}
.opt.slim{min-height:56px;font-weight:600}
.note-p{margin:0;font-size:13px;color:var(--muted)}
.prefill{margin:0 0 28px;display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;max-width:100%}
.prefill i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.prefill.off i{background:var(--accent)}
.prefill a{font-weight:700;border-bottom:1.5px solid var(--ink)}
.formerr{margin:0;padding:12px 16px;border-radius:16px;background:var(--err-bg);color:var(--err-tx);font-weight:600;font-size:14px}
.formerr[hidden]{display:none}

/* оформлення */
.co-h1{margin:0 0 8px;font-family:var(--display);font-size:clamp(36px,10vw,56px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.co-back{display:inline-block;margin:0 0 14px;font-weight:600;font-size:15px}
.co-row{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.co-form{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:18px}
.summary{flex:1 1 300px;min-width:0;position:sticky;top:96px;background:var(--panel);color:var(--on-panel);border:1px solid var(--panel-line);border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:16px}
.summary h2{margin:0;font-family:var(--display);font-size:26px;text-transform:uppercase}
.line{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.line img{width:64px;height:64px;object-fit:cover;border-radius:14px;flex:none;align-self:flex-start}
.line .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.line .mid b{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.line .mid a{color:var(--on-panel-2)}.line .mid a:hover{color:var(--on-panel)}
.line>.qty{flex-basis:100%;display:flex;align-items:center;gap:4px;padding-left:76px}
.line .qty button.q{flex:none;width:40px;height:40px;border-radius:999px;border:1px solid var(--on-panel-4);background:transparent;color:var(--on-panel);font:700 18px var(--sans);cursor:pointer}
.line .qty span{flex:none;min-width:22px;text-align:center;font-weight:700}
.line .qty .del{margin-left:auto;padding:0;min-height:40px;background:transparent;border:0;color:var(--on-panel-2);font:500 13px var(--sans);text-decoration:underline;cursor:pointer}
.line select{height:32px;padding:0 8px;border-radius:999px;border:1px solid var(--on-panel-4);background:var(--panel);color:var(--on-panel);color-scheme:dark;font:600 13px var(--sans);align-self:flex-start}
.line select.bad{border-color:var(--accent);color:var(--accent)}
.line .sum{font-weight:800;white-space:nowrap;align-self:flex-start}
.summary .empty-c{margin:0;color:var(--on-panel-2)}
.summary .empty-c a{color:var(--accent);font-weight:700}
.totals{border-top:1px solid var(--panel-line);padding-top:14px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.totals>div{display:flex;justify-content:space-between;gap:12px;color:var(--on-panel-2)}
.totals .big{font-family:var(--display);font-size:28px;margin-top:6px;color:var(--on-panel)}
.summary .btn{height:62px;font-weight:800}
.summary .btn:disabled,.m-confirm .btn:disabled{background:var(--panel-line);color:var(--on-panel-3);opacity:1;cursor:not-allowed}
.sum-toggle{display:none}
.sum-body{display:flex;flex-direction:column;gap:16px}
.m-confirm{display:none}
.co-empty{flex:999 1 560px;min-width:0;background:var(--card);border:2px dashed var(--line2);border-radius:28px;padding:48px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.co-empty h2{margin:0;font-family:var(--display);font-size:clamp(32px,8vw,48px);line-height:1;text-transform:uppercase}
.summary p.s{margin:0;font-size:13px;color:var(--on-panel-2);line-height:1.5}
.done-box{background:var(--card);border:2px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--shadow);padding:32px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:640px}
.done-box h2{margin:0;font-family:var(--display);font-size:clamp(28px,7vw,40px);text-transform:uppercase;line-height:1}
.done-box p{margin:0;font-size:16px;line-height:1.5}

/* вхід */
.auth{max-width:1400px;margin:0 auto;padding:48px 24px 80px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;justify-content:center}
.authcard{flex:1 1 480px;max-width:540px;min-width:0;background:var(--card);border:2px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--shadow);padding:36px;display:flex;flex-direction:column;gap:22px}
.tabs{display:flex;background:var(--bg);border-radius:999px;padding:4px}
.tabs button{flex:1;height:48px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:600 15px var(--sans);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--bg);font-weight:700}
.authcard h1{margin:0;font-family:var(--display);font-size:clamp(30px,8vw,40px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.sso{display:flex;flex-direction:column;gap:10px}
.sso>button{display:flex;align-items:center;justify-content:center;gap:12px;height:54px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font:700 15px var(--sans);color:var(--ink);cursor:pointer;padding:0 16px}
.sso>button.dark{background:var(--ink);color:var(--bg)}
.phonebox{display:flex;gap:8px;flex-wrap:wrap;padding:12px;background:var(--bg);border-radius:18px}
.phonebox[hidden]{display:none}
.phonebox label{flex:1 1 200px;display:flex;min-width:0}
.phonebox input{flex:1;min-width:0;height:48px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;font:inherit;font-size:15px;background:var(--card);color:var(--ink)}
.phonebox input.bad{border-color:var(--err)}
.phonebox button{height:48px;padding:0 20px;background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;font:700 14px var(--sans);cursor:pointer}
.phonebox p{margin:0;flex-basis:100%;font-size:13px;color:var(--muted)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line2)}
.chkl{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.chkl.bad{color:var(--err)}
.authcard .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.authcard .row a,.authcard .row button.lnk{font-weight:600;background:none;border:0;padding:0;font-size:14px;cursor:pointer;color:var(--ink);text-decoration:underline}
.authcard .btn{height:58px}
.perks{flex:1 1 320px;max-width:420px;min-width:0;background:var(--accent);color:var(--on-accent);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:18px}
.perks h2{margin:0;font-family:var(--display);font-size:30px;line-height:1;text-transform:uppercase}
.perks div{display:flex;gap:12px;align-items:flex-start}
.perks i{flex:none;width:28px;height:28px;border-radius:50%;background:#111111;color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-style:normal}
.perks span{font-size:16px;line-height:1.45}
.infomsg{margin:0;padding:12px 16px;border-radius:16px;background:var(--bg);font-size:14px;line-height:1.45}

/* кабінет */
.acc{max-width:1400px;margin:0 auto;padding:36px 24px 80px;display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.accnav{flex:1 1 240px;max-width:280px;display:flex;flex-direction:column;gap:6px}
.accnav p{margin:0 0 8px;font-family:var(--display);font-size:26px;line-height:1;text-transform:uppercase}
.accnav a{display:flex;align-items:center;height:48px;padding:0 18px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap}
.accnav a:hover{background:var(--hover)}
.accnav a.on{background:var(--ink);color:var(--bg)}
.accnav a.out{color:var(--err-tx);margin-top:10px}
.accmain{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:20px}
.accmain h1{margin:0;font-family:var(--display);font-size:clamp(30px,8vw,48px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.accmain .lead2{margin:0;font-size:16px;color:var(--text2)}
.accmain section.box{display:flex;flex-direction:column;gap:16px;padding:26px}
.accmain section.box h2{float:none;margin:0}
.selrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px}
.selrow select{height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;font:inherit;background:var(--card);color:var(--ink)}
.chkrow{display:flex;gap:10px;align-items:center;font-size:15px;min-height:32px}
.saverow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.saverow span{font-size:14px;color:var(--text2)}
.orders{display:flex;flex-direction:column;gap:12px}
.order{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 20px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.order .imgs{display:flex;gap:6px}
.order .imgs img{width:48px;height:48px;border-radius:12px;object-fit:cover}
.order b{font-weight:800}
.order .st{display:inline-flex;height:28px;align-items:center;padding:0 12px;border-radius:999px;background:var(--bg);font-size:13px;font-weight:700}
.addr{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:14px 18px;border:2px solid var(--line2);border-radius:16px}
.addr.def{border-color:var(--ink)}
.addr .acts{display:flex;gap:12px}
.addr .acts button{background:none;border:0;font:600 14px var(--sans);text-decoration:underline;cursor:pointer;color:var(--ink)}
.addlink{align-self:flex-start;font-weight:700;font-size:14px;border:0;border-bottom:2px solid var(--ink);background:none;padding:0 0 2px;cursor:pointer;color:var(--ink)}

/* інфо-сторінки */
.info h1{margin:0 0 16px;font-family:var(--display);font-size:clamp(36px,9vw,56px);line-height:.95;text-transform:uppercase}
.info p{font-size:17px;line-height:1.6;color:var(--text2);max-width:720px}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .wrap,.page{padding-left:16px;padding-right:16px}
  .hrow{gap:6px;padding:10px 14px}
  .logo{flex:1 1 auto;font-size:17px}
  .search{order:10;flex:1 1 100%}
  .nav{order:11;min-width:0;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;flex:none}
  .hide-m{display:none !important}
  .hbtn,.cartbtn{height:40px;padding:0 9px;min-width:40px}
  .hbtn.round{width:40px}
  .hbtn.acc{padding:0 4px}
  .hbtn.acc .ava{width:28px;height:28px}
  .langmenu{right:-60px;min-width:220px}
  .grid,.grid.auto{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cbar{padding:12px;flex-direction:column;align-items:flex-start}
  .cname{font-size:17px}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust>div{padding:12px;gap:8px}
  .trust i{width:32px;height:32px;font-size:11px}
  .tile .pill{font-size:11px;padding:6px 10px;left:10px;bottom:10px;max-width:calc(100% - 20px)}
  .card .txt{padding:10px 12px 56px}
  .card .pr{font-size:16px}
  .add{width:38px;height:38px;right:10px;bottom:10px}
  .fav{width:36px;height:36px;top:8px;right:8px}
  .badge-new{top:8px;left:8px}
  .hgrid{grid-template-rows:200px 200px}
  .hero-l,.hgrid{flex-basis:100%}
  .btn{height:54px;padding:0 22px;font-size:15px}
  .btn.ghost{padding:0 20px}
  .sub{padding:28px 20px}
  .find{padding:28px 20px}
  .find .btn{height:56px}
  .run span{font-size:26px}
  .fbtn{display:flex}
  .filters{display:none;max-width:none;position:static;max-height:none;flex-basis:100%}
  .filters.open{display:flex}
  .sortl{width:100%;justify-content:space-between}
  .gal,.pinfo{flex-basis:100%}
  .gal .main{border-radius:22px}
  .gal .arr{width:40px;height:40px}
  .pinfo .price{font-size:34px}
  .similar h2{font-size:30px}
  .box{padding:18px}
  .summary{position:static;padding:20px;border-radius:22px;order:-1;flex-basis:100%;gap:14px}
  .summary>h2,.summary .d-confirm{display:none}
  .sum-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:28px;padding:0;background:none;border:0;color:var(--on-panel);font:800 16px var(--sans);text-align:left;cursor:pointer}
  .sum-toggle .chev{transition:transform .2s;font-size:14px}
  .summary:not(.collapsed) .sum-toggle .chev{transform:rotate(180deg)}
  .summary.collapsed .sum-body{display:none}
  .summary.is-empty .sum-body{display:none}
  .sum-body{display:flex;flex-direction:column;gap:16px}
  .m-confirm{display:flex;flex-direction:column;gap:12px;background:var(--panel);color:var(--on-panel);border:1px solid var(--panel-line);border-radius:22px;padding:20px}
  .m-confirm .big{display:flex;justify-content:space-between;font-family:var(--display);font-size:26px}
  .m-confirm .btn{height:58px;font-weight:800}
  .m-confirm .s{margin:0;font-size:13px;color:var(--on-panel-2);line-height:1.5}
  .co-empty{padding:32px 20px}
  .authcard{padding:22px;box-shadow:5px 5px 0 var(--shadow)}
  .auth{padding:28px 16px 80px}
  .acc{padding:24px 16px 80px}
  .accnav{max-width:none;flex-basis:100%;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px}
  .accnav p{display:none}
  .accnav a{height:42px;padding:0 14px;font-size:14px}
  .accnav a.out{margin-top:0}
  .chatbtn{width:48px;height:48px;padding:0;justify-content:center;right:12px;bottom:12px}
  .chatbtn svg{width:20px;height:20px}
  .ftr .wrap{padding-bottom:88px}
  .toast{bottom:80px}
}

/* ---------- захист фото від простого збереження (див. також js/core.js) ----------
   Повністю заборонити неможливо (скриншот), але правий клік / перетягування / довге натискання
   на телефоні не дають «Зберегти зображення». Прозорий шар поверх фото — браузер не бачить картинку під пальцем/курсором. */
.card .ph img,.gal img,.tile img,.thumbs img,.checkout .line img,.imgs img,img.nl-prot{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.card .ph::after,.gal .main::after,.tile::after,.thumbs button::after{content:"";position:absolute;inset:0;z-index:1;background:transparent;-webkit-touch-callout:none}
.thumbs button{position:relative}
.tile>:not(img),.gal .main>:not(img),.card .ph>:not(img){z-index:2}

/* ---------- Україна: оформлення з Новою поштою ---------- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.opts4{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.opt-l{font-style:normal;font-weight:500;color:var(--muted);font-size:12px}
.eur-ref{margin:0;font-size:13px;color:var(--muted);line-height:1.4}
.eur-ref b{color:var(--ink);font-weight:700}
.m-confirm .eur-ref,.summary .eur-ref,#summary .eur-ref{color:var(--on-panel-3)}.m-confirm .eur-ref b,.summary .eur-ref b,#summary .eur-ref b{color:var(--on-panel);font-size:15px}
.formerr{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.formerr .tg-ask{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-weight:700;text-decoration:none}
.formerr small{font-weight:500;color:var(--err-tx)}
.thanks .ord-no{font-size:20px!important;font-weight:800}
.pfacts small{color:var(--muted);font-size:12px}

/* «Написати нам» — меню контактів */
button.chatbtn{border:0;cursor:pointer;font-family:inherit}
.chatmenu{position:fixed;right:16px;bottom:84px;z-index:31;display:flex;flex-direction:column;gap:2px;min-width:220px;padding:12px;background:var(--bg);border:2px solid var(--ink);border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.chatmenu[hidden]{display:none}
.chatmenu b{font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px 8px;color:var(--muted)}
.chatmenu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;font-weight:700;color:var(--ink)}
.chatmenu a:hover,.chatmenu a:focus-visible{background:var(--ink);color:var(--bg)}
.coin-row{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.coin-row select{height:48px;border:2px solid var(--ink);border-radius:999px;padding:0 16px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;max-width:320px}
@media (max-width:640px){.chatmenu{right:12px;bottom:72px;left:12px}}

/* ---------- перемикач теми (шапка) ---------- */
.themebtn svg{display:block}
.themebtn .i-sun{display:none}
html[data-theme=dark] .themebtn .i-sun{display:block}
html[data-theme=dark] .themebtn .i-moon{display:none}
/* у темній темі «нативні» елементи (випадаючі списки, автозаповнення) — теж темні */
html[data-theme=dark] select option{background:var(--card);color:var(--ink)}
html[data-theme=dark] input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 40px var(--card) inset}
/* дуже вузькі телефони (360–400 px): логотип і кнопки шапки компактніше, щоб усе влазило в один ряд */
@media (max-width:400px){
  .hrow{gap:4px;padding:10px 10px}
  .logo{font-size:15px}
  .hbtn,.cartbtn{height:36px;min-width:36px;padding:0 7px}
  .hbtn.round{width:36px}
  .hbtn svg{width:18px;height:18px}
  .cartbtn{gap:5px}
  .nav{margin:0 -10px;padding:0 10px}
}

/* верхня смуга на телефоні: обидва тексти, кожен своїм рядком */
@media (max-width:760px){.topbar{font-size:11.5px;letter-spacing:.06em}.topbar .wrap{gap:2px 12px;padding-top:7px;padding-bottom:7px;text-align:center}}