*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#07100a;--bg2:#0c1a0f;--sur:rgba(141,198,63,.06);--sur2:rgba(141,198,63,.10);
--brd:rgba(141,198,63,.18);--brd2:rgba(141,198,63,.34);--txt:#e8f0e0;
--muted:rgba(220,240,210,.62);--g:#8DC63F;--gd:#6a9e28;--y:#F5E100;--err:#ff5c5c;
--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;--h-btn:44px;--t:.25s}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:80px}
body{background:radial-gradient(900px 420px at 50% -10%,rgba(141,198,63,.09),transparent 70%),var(--bg);
color:var(--txt);font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
padding-bottom:60px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:99;padding:12px 20px;
background:var(--y);color:#07100a;font-weight:800;text-decoration:none}
.skip-link:focus{left:0}
:where(a,button,input,[tabindex]):focus-visible{outline:3px solid var(--y);outline-offset:2px;border-radius:4px}

header{position:sticky;top:0;z-index:30;background:rgba(7,16,10,.94);
backdrop-filter:blur(12px);border-bottom:1px solid var(--brd)}
.hin{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.hin img{height:38px;width:auto;border-radius:9px}
.hin .back{color:var(--g);text-decoration:none;font-weight:700;font-size:14px;
min-height:var(--h-btn);display:inline-flex;align-items:center}
.hin .cart{margin-left:auto;position:relative;min-width:var(--h-btn);min-height:var(--h-btn);
border-radius:var(--r-md);background:var(--sur);border:1px solid var(--brd);
display:grid;place-items:center;font-size:18px;cursor:pointer;text-decoration:none}
.hin .cart b{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
border-radius:10px;background:var(--y);color:#0b1a0d;font-size:11px;font-weight:800;
display:none;place-items:center}
.hin .cart b.on{display:grid}

main{max-width:1100px;margin:0 auto;padding:22px 20px 0}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--g)}
.crumbs span{margin:0 6px;opacity:.5}

.p-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:860px){.p-grid{grid-template-columns:1fr;gap:26px}}

.pg-main{border-radius:var(--r-lg);border:1px solid var(--brd);background:var(--sur);
overflow:hidden;aspect-ratio:1;display:grid;place-items:center}
.pg-main img{width:100%;height:100%;object-fit:cover;display:block}
.pg-main.pg-empty{font-size:96px;opacity:.7;aspect-ratio:16/10}
.pg-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;
scrollbar-width:thin}
.pg-thumb{flex:none;width:72px;height:72px;padding:0;border-radius:var(--r-md);
border:2px solid var(--brd);background:var(--sur);cursor:pointer;overflow:hidden;
transition:var(--t)}
.pg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pg-thumb.on{border-color:var(--g)}
.pg-thumb:hover{border-color:var(--brd2)}

.p-brand{font-size:12.5px;font-weight:800;color:var(--g);letter-spacing:.06em;
text-transform:uppercase;margin-bottom:8px}
h1{font-size:clamp(23px,3.4vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1.25;
margin-bottom:18px}
.p-price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.p-price{font-size:34px;font-weight:900;color:var(--y);line-height:1}
.p-old{font-size:18px;color:var(--muted);text-decoration:line-through}
/* #ef5f5f давав контраст 3.2:1 — білий текст на ньому не читався */
.p-off{padding:4px 10px;border-radius:var(--r-pill);background:#c62828;color:#fff;
font-size:13px;font-weight:800}
.p-stock{font-size:14px;margin-bottom:22px}
.p-stock.in{color:var(--g)}
.p-stock.out{color:var(--err)}

.p-buy{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.qty{display:flex;align-items:center;background:var(--sur);border:1px solid var(--brd);
border-radius:var(--r-md);overflow:hidden}
.qty button{width:44px;height:var(--h-btn);border:none;background:none;color:var(--g);
font-size:20px;font-weight:800;cursor:pointer}
.qty button:hover{background:var(--sur2)}
.qty span{min-width:42px;text-align:center;font-weight:800}
.btn-buy{flex:1;min-width:220px;min-height:var(--h-btn);padding:13px 26px;border:none;
border-radius:var(--r-md);background:linear-gradient(135deg,var(--g),var(--gd));
color:#08150a;font-weight:800;font-size:16px;cursor:pointer;transition:var(--t)}
.btn-buy:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.btn-buy:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.p-hint{font-size:13.5px;color:var(--muted);margin-bottom:26px}

.p-desc{border-top:1px solid var(--brd);padding-top:22px}
.p-desc h2{font-size:16px;font-weight:800;margin-bottom:12px;color:var(--muted);
text-transform:uppercase;letter-spacing:.04em}
.p-desc p{color:#dbe7d2;margin-bottom:12px}
.p-empty-desc{color:var(--muted);font-style:italic}
.p-facts{list-style:none;margin-top:18px;display:grid;gap:10px}
.p-facts li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#dbe7d2}
.p-facts .ic{flex:none;width:22px;text-align:center}

.related{margin-top:60px;border-top:1px solid var(--brd);padding-top:34px}
.related h2{font-size:clamp(19px,3vw,25px);font-weight:800;margin-bottom:20px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.rel-card{border:1px solid var(--brd);border-radius:var(--r-lg);background:var(--sur);
padding:14px;text-decoration:none;color:var(--txt);transition:var(--t);display:block}
.rel-card:hover{border-color:var(--brd2);transform:translateY(-3px)}
.rel-img{height:120px;border-radius:var(--r-md);background:var(--sur2);overflow:hidden;
display:grid;place-items:center;font-size:40px;margin-bottom:10px}
.rel-img img{width:100%;height:100%;object-fit:cover}
.rel-name{font-size:14px;line-height:1.35;margin-bottom:6px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rel-price{font-weight:900;color:var(--y)}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:200;
padding:14px 24px;border-radius:var(--r-md);background:rgba(12,26,15,.98);
border:1px solid var(--brd2);font-size:14.5px;font-weight:600;
box-shadow:0 12px 40px rgba(0,0,0,.5);transition:transform var(--t);max-width:92vw}
.toast.show{transform:translate(-50%,0)}

footer{max-width:1100px;margin:56px auto 0;padding:24px 20px 0;
border-top:1px solid var(--brd);color:var(--muted);font-size:13.5px}
footer a{color:var(--g);min-height:var(--h-btn);display:inline-flex;align-items:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
html{scroll-behavior:auto}}