/* ==========================================================================
   КМТ · ОПТОВИЙ КАТАЛОГ — styles.css (фінальний макет для розробника)
   --------------------------------------------------------------------------
   Один адаптивний файл: спершу базові (десктопні) стилі, далі медіазапити
   за спаданням ширини. Контрольні точки:
     ≥1441 десктоп · ≤1440 ноутбук · ≤1280 планшет-альбом ·
     ≤1023 планшет (бургер+шухляди) · ≤767 телефон (скін застосунку) ·
     ≤359 вузький телефон
   Орієнтири за класами:
     .bar/.panel — шапка і мега-меню      .hero/.bslide — банер
     .pc — плитка товару                  .carou-* — каруселі головної
     .cat-layout/.tree/.side — каталог    .clist/.crow — вигляд «список»
     .prod/.buybox/.ladder — картка товару
     .order — панель замовлення           .drawer/.mbar — мобільні шухляди й таб-бар
     .demo/.vpwrap — службова демо-панель (у бойовій версії видаляється)
   ========================================================================== */
*::before{box-sizing:border-box}
*::after{box-sizing:border-box}
img{display:block;max-width:100%}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
input{font:inherit}
select{font:inherit}
::selection{background:var(--acc);color:#fff}
[data-theme="blue"]{--acc:#2159E8;--acc-d:#1745C4;--acc-soft:#E8EFFE;--acc2:#06A6D8;--hero1:#0C1B3D;--hero2:#12276B;--hero3:#0B1A3C;--heroGlow:rgba(6,166,216,.3);--pi-1:#8FB6FF;--pi-2:#2159E8;--pi-3:#D6E4FF}
[data-theme="orange"]{--acc:#F0591F;--acc-d:#CE4310;--acc-soft:#FFEEE4;--acc2:#FFA23D;--hero1:#2B1207;--hero2:#7E2E0C;--hero3:#24100A;--heroGlow:rgba(255,162,61,.32);--pi-1:#FFBC93;--pi-2:#F0591F;--pi-3:#FFE0CE}
.wrap{width:min(100% - 36px,var(--wrap));margin-inline:auto}
[hidden]{display:none !important}
.sec{padding:44px 0}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}
.sec-title{margin:0;font-size:clamp(20px,2.1vw,28px);font-weight:800;letter-spacing:-.025em;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sec-title .cnt{font:700 12px/1 var(--mono);color:var(--muted);background:var(--surf2);padding:6px 10px;border-radius:7px;letter-spacing:0}
.sec-sub{margin:5px 0 0;color:var(--muted);font-size:13.5px}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--acc);padding:9px 16px;border-radius:9px;border:1px solid var(--line);background:var(--surf);transition:.2s;white-space:nowrap}
.more:hover{border-color:var(--acc);background:var(--acc-soft)}
.tag{display:inline-flex;align-items:center;gap:7px;font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:7px;background:var(--acc-soft);color:var(--acc)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:11px;font-weight:800;font-size:14px;transition:.2s}
.btn-p{background:var(--acc);color:#fff}
.btn-p:hover{background:var(--acc-d)}
.btn-g{border:1px solid var(--line2);background:var(--surf)}
.btn-g:hover{border-color:var(--acc);color:var(--acc)}
.demo b{font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7C8899;padding:0 10px 0 8px}
.demo button{padding:9px 15px;border-radius:9px;font-weight:700;color:#B6C0D0;transition:.18s}
.demo button:hover{color:#fff;background:rgba(255,255,255,.09)}
.demo button.on{background:var(--acc);color:#fff}
.demo .sep{width:1px;height:24px;background:rgba(255,255,255,.14);margin:0 4px}
.demo .th{width:26px;height:26px;border-radius:8px;padding:0;border:2px solid transparent}
.demo .th.on{border-color:#fff}
.demo .th-b{background:#2159E8}
.demo .th-o{background:#F0591F}
.bar{background:var(--surf);height:var(--hdr);display:flex;align-items:center;border-bottom:1px solid var(--line)}
.logo-mark{width:36px;height:36px;border-radius:9px;background:linear-gradient(140deg,var(--acc2),var(--acc));display:grid;place-items:center}
.logo-mark i{width:14px;height:14px;border-radius:4px;border:3px solid #fff;display:block}
.logo-t b{display:block;font-size:20px;font-weight:900;letter-spacing:-.035em;line-height:1}
.logo-t span{display:block;font:600 7.5px/1 var(--mono);letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.nav-item{position:static;display:flex;align-items:center}
.nav-link{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;font-size:14px;font-weight:700;transition:.18s;white-space:nowrap}
.nav-item:hover .nav-link{background:var(--acc-soft);color:var(--acc)}
.chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.5}
.search:focus-within{border-color:var(--acc);background:#fff}
.search input::placeholder{color:var(--muted)}
.icn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;position:relative;border:1px solid var(--line);transition:.2s;flex:none}
.icn:hover{border-color:var(--acc);color:var(--acc)}
.dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--dan);color:#fff;font:800 10px/18px var(--mono);text-align:center;border:2px solid #fff}
.cart small{opacity:.78;font-weight:600}
.cart.pulse{animation:pp .45s}
.nav-item:hover .panel{opacity:1;visibility:visible;transform:none}
.rail a b{font:700 10.5px/1 var(--mono);color:var(--muted)}
.rail h5{margin:20px 0 7px 11px;font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rail .brand{font-weight:500}
.grp a i{font:600 10.5px/1.6 var(--mono);color:var(--muted);font-style:normal}
.mbrands span{padding:15px 20px;font-size:14px;font-weight:700;cursor:pointer;border-bottom:3px solid transparent;transition:.16s;white-space:nowrap}
.mbrands span:hover{color:var(--acc)}
.mbrands span.on{background:var(--surf);border-bottom-color:var(--acc);color:var(--acc)}
.timer{display:inline-flex;align-items:flex-start;gap:6px}
.timer .u{text-align:center}
.timer .u b{display:grid;place-items:center;min-width:44px;height:42px;border:2px solid var(--dan);border-radius:9px;font:800 20px/1 var(--mono);color:var(--dan);background:#fff;letter-spacing:-.02em}
.timer .u span{display:block;font:700 8.5px/1 var(--mono);letter-spacing:.1em;color:var(--muted);margin-top:5px;text-transform:uppercase}
.timer .cl{font:800 20px/42px var(--mono);color:var(--dan);opacity:.5}
.timer.sm .u b{min-width:32px;height:29px;font-size:14px;border-width:1.5px;border-radius:7px}
.timer.sm .u span{font-size:7px;margin-top:3px}
.timer.sm .cl{font-size:14px;line-height:29px}
.ladder{margin-top:14px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.ladder-h{display:grid;grid-template-columns:1.1fr 1fr .8fr;background:var(--surf2);font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ladder-h span{padding:9px 12px}
.ladder-r{display:grid;grid-template-columns:1.1fr 1fr .8fr;border-top:1px solid var(--line);font-size:13px;cursor:pointer;transition:.16s;text-align:left;width:100%}
.ladder-r:hover{background:var(--acc-soft)}
.ladder-r.on{background:var(--acc-soft)}
.ladder-r.on b{color:var(--acc)}
.pc:hover .pc-th svg{transform:scale(1.06)}
.bg.hit{background:var(--warn)}
.bg.new{background:var(--ok)}
.bg.sale{background:var(--dan)}
/* kmt5v2: бейдж залишку на фото (як було в старому дизайні) — багато/в наявності/закінчується */
.bg.lot{background:var(--acc)}
.bg.ok{background:var(--ok)}
.bg.low{background:var(--warn)}

/* Інформаційні сторінки (про компанію, доставка, гарантія тощо) — довільний HTML
   з адмінки/старого редактора, часто з інлайновими style="font-size:5px" і т.п.
   Примусово стандартизуємо типографіку - !important свідомо, інакше інлайн-стилі
   з тексту завжди переб'ють будь-яке наше правило */
.prose{max-width:820px;margin:8px 0 60px}
.prose *{font-family:inherit!important;line-height:1.75!important;font-size:14.5px!important;
  color:var(--ink2)!important;font-weight:400!important}
.prose{font-size:14.5px;line-height:1.75;color:var(--ink2)}
.prose h1,.prose h2{margin:32px 0 14px;font-size:22px!important;font-weight:800!important;
  letter-spacing:-.02em;color:var(--ink)!important}
.prose h3,.prose h4{margin:26px 0 10px;font-size:17px!important;font-weight:800!important;color:var(--ink)!important}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose a{color:var(--acc)!important;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--acc-d)!important}
.prose strong,.prose b{color:var(--ink)!important;font-weight:700!important}
.prose img{border-radius:var(--r-s);margin:8px 0;max-width:100%;height:auto!important}
.prose blockquote{margin:0 0 16px;padding:14px 18px;border-left:3px solid var(--acc);background:var(--surf2);border-radius:0 var(--r-s) var(--r-s) 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px}
.prose table th,.prose table td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.prose table th{background:var(--surf2);font-weight:700!important;color:var(--ink)!important}
.prose hr{border:0;border-top:1px solid var(--line);margin:26px 0}
/* Багато старого контенту без <p> — просто текст через <br>. Без явних параграфів
   типографіка вище не спрацює, тож даємо самому <br> робити відступ як у абзацу */
.prose br{display:block;content:"";margin-bottom:12px}
.prose u{text-decoration-color:var(--line2)}

/* kmt5v2: кошик — список товарів, блоки адреси/доставки/оплати, підсумок замовлення */
.warning{background:var(--dan-soft);color:var(--dan);border-radius:var(--r-s);padding:13px 16px;margin-bottom:16px;font-size:13.5px}
.notice-ok{background:var(--ok-soft);color:var(--ok);border-radius:var(--r-s);padding:13px 16px;margin-bottom:16px;font-size:13.5px}

.cart-items{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cart-ghead{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surf2);
  border-bottom:1px solid var(--line);font-size:13px;width:100%;border-left:0;border-right:0;border-top:0;
  text-align:left;cursor:pointer;font-family:inherit;color:inherit;transition:.14s}
.cart-ghead:hover{background:var(--surf3)}
.cart-ghead span{color:var(--muted);font:600 11.5px/1 var(--mono);margin-left:auto}
.cart-ghead::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);flex:none;transition:.16s}
.cart-ghead.on::after{transform:rotate(-135deg)}
.cart-item{display:grid;grid-template-columns:56px minmax(0,1fr) 90px auto 90px 28px;gap:14px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line)}
.cart-item:last-child{border-bottom:0}
.cart-th{width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--surf2);flex:none}
.cart-th img{width:100%;height:100%;object-fit:cover}
.cart-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.cart-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.cart-name:hover{color:var(--acc)}
.cart-model{font:600 11px/1 var(--mono);color:var(--muted)}
.cart-price{font-size:13.5px;font-weight:700;white-space:nowrap}
.cart-price.sale{color:var(--dan)}
.cart-oos{font-size:12px;color:var(--warn);font-weight:700;white-space:nowrap}
.cart-total{font-size:14px;font-weight:900;text-align:right;white-space:nowrap}
.cart-remove{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:.16s;flex:none}
.cart-remove:hover{background:var(--dan-soft);color:var(--dan)}
.cart-qty{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
/* .view - перегляд без степера/видалення (деталі замовлення) */
.cart-item.view{grid-template-columns:56px minmax(0,1fr) 90px 60px 90px}
@media(max-width:900px){
  .cart-item{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"th info remove" "th price price" "th qty total";row-gap:6px}
  .cart-item.view{grid-template-areas:"th info info" "th price price" "th qty total"}
  .cart-th{grid-area:th;width:44px;height:44px}
  .cart-info{grid-area:info}
  .cart-remove{grid-area:remove}
  .cart-price{grid-area:price}
  .qty{grid-area:qty}
  .cart-qty{grid-area:qty}
  .cart-total{grid-area:total}
}

.ckblock{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-top:16px}
.ckblock h3{margin:0 0 14px;font-size:15px;font-weight:800}
.ckblock .chk{padding:8px 0}
.ckform{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:6px 0 14px 26px}
.ckform input[type="text"],.ckform input[type="password"]{border:1px solid var(--line);border-radius:9px;padding:10px 13px;font-size:13.5px;background:var(--surf2)}
.ckform input[type="text"]:focus,.ckform input[type="password"]:focus{outline:none;border-color:var(--acc);background:var(--surf)}
.ckform input.underline-red{border-color:var(--dan);background:var(--dan-soft)}
.ckform .field-error{grid-column:1/-1;color:var(--dan);font-size:12px;margin-top:-6px}
@media(max-width:600px){.ckform{grid-template-columns:1fr}}
#ttn-block{display:flex;align-items:center;gap:12px;grid-template-columns:none}

/* kmt5v2: особистий кабінет (account/*) - боковe меню + контент, ckblock/ckform (див. вище) перевикористовуються для форм */
.acc-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}
@media(max-width:900px){.acc-layout{grid-template-columns:1fr}}
.acc-nav{display:flex;flex-direction:column;gap:2px;padding:10px}
.acc-nav a{display:flex;align-items:center;padding:11px 14px;font-size:13.5px;font-weight:700;border-radius:10px;transition:.15s;color:var(--ink2)}
.acc-nav a:hover{background:var(--surf2);color:var(--ink)}
.acc-nav a.on{background:var(--acc);color:#fff}
.acc-nav a.danger{color:var(--dan);margin-top:8px;border-top:1px solid var(--line);border-radius:0;padding-top:16px}
.acc-nav a.danger:hover{background:var(--dan-soft);color:var(--dan)}
.ckblock .hint{display:block;margin:-8px 0 14px 2px;font-size:12px;color:var(--muted)}
.ckform .flabel{grid-column:1/-1;margin:2px 0 -4px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.chklist{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 18px;border:1px solid var(--line);border-radius:9px;background:var(--surf2);padding:12px 14px}
.chklist .chk{padding:4px 0}

/* kmt5v2: сторінка "Замовлення оформлено" (checkout/success) */
.success-box{max-width:640px;margin:8px auto 60px;text-align:center;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:48px 36px}
.success-ic{width:74px;height:74px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-size:36px;font-weight:900;margin:0 auto 22px}
.success-box h1{margin:0 0 16px;font-size:clamp(22px,3vw,30px);font-weight:900;letter-spacing:-.03em}
.success-box .prose{text-align:left;margin:0 auto 28px;max-width:520px}
.success-box .btn{min-width:220px}
.acc-addr{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line)}
.acc-addr:last-of-type{border-bottom:0}
.acc-addr-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.acc-addr-n{font:600 11px/1 var(--mono);color:var(--muted)}
.acc-addr-t{font-size:13.5px;font-weight:700}
.exp-link{display:flex;gap:8px;margin-bottom:4px}
.exp-link input{flex:1;border:1px solid var(--line);border-radius:9px;padding:10px 13px;font-size:13px;background:var(--surf2);font-family:var(--mono);color:var(--ink2)}
.exp-actions{display:flex;gap:14px;margin:10px 0 12px;font-size:12.5px}
.exp-actions a{color:var(--acc);font-weight:700}
.exp-actions a:hover{text-decoration:underline}
.exp-groups{columns:3 220px;column-gap:16px}
.exp-group{break-inside:avoid;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px}
.exp-group>label{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;cursor:pointer}
.exp-list{list-style:none;margin:8px 0 0;padding:0}
.exp-list li{margin:5px 0}
.exp-list label{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer;color:var(--ink2)}
.exp-list .lvl3{padding-left:22px;color:var(--muted);font-size:12px}
.exp-group input[type="checkbox"],.exp-list input[type="checkbox"]{accent-color:var(--acc);width:15px;height:15px;flex:none}
@media(max-width:700px){.exp-groups{columns:1}}
#ttn-block .file_name{font-size:12px;color:var(--acc)}
.pc:hover .pc-acts{opacity:1;transform:none}
.pc-acts button:hover{color:var(--acc);border-color:var(--acc)}
.pc-brand b{color:var(--acc);text-transform:uppercase}
.pc-brand span{color:var(--muted)}
.pc-price .rrp s{color:var(--dan)}
.stock.low{color:var(--warn)}
.mult{color:var(--muted)}
.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pc:hover .add{background:var(--acc);color:#fff}
.promo{display:grid;grid-template-columns:1.3fr .7fr;gap:12px}
.pbox{position:relative;border-radius:18px;overflow:hidden;padding:32px 34px;min-height:230px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line)}
.pbox h3{margin:12px 0 0;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;line-height:1.1;font-weight:900}
.pbox p{margin:9px 0 0;font-size:13.5px;max-width:330px;opacity:.85}
.pbox .art{position:absolute;right:-2%;bottom:-8%;width:36%}
.pbox.a{background:linear-gradient(140deg,var(--hero1),var(--hero2));color:#fff;border-color:transparent}
.pbox.a .tag{background:rgba(255,255,255,.16);color:#fff}
.pbox.b{background:var(--surf)}
.pbox .btn{align-self:flex-start;margin-top:18px}
.pbox.a .btn{background:#fff;color:var(--ink)}
.br{height:70px;border:1px solid var(--line);border-radius:12px;background:var(--surf);display:grid;place-items:center;font-weight:800;font-size:14.5px;color:var(--muted);transition:.2s}
.br:hover{color:var(--acc);border-color:var(--acc);background:var(--acc-soft)}
.dealer{border-radius:20px;padding:44px 46px;background:linear-gradient(140deg,var(--hero1),var(--hero2));color:#fff;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;position:relative;overflow:hidden}
.dealer::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--heroGlow);right:-100px;top:-170px}
.dealer h3{margin:0;font-size:clamp(24px,2.9vw,38px);letter-spacing:-.035em;line-height:1.08;font-weight:900}
.dealer p{margin:11px 0 0;color:#AEC0DC;max-width:500px;font-size:14.5px}
.dform{position:relative;display:flex;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:7px;border-radius:13px}
.dform input{border:0;outline:none;background:none;padding:0 18px;width:240px;color:#fff}
.dform input::placeholder{color:#93A6C6}
.dform button{background:#fff;color:var(--ink);padding:14px 24px;border-radius:10px;font-weight:800}
footer{background:var(--ink);color:#94A3B8;margin-top:34px;padding:52px 0 24px;font-size:13.5px}
.f-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:34px}
footer h6{margin:0 0 14px;color:#fff;font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
footer li a{display:block;padding:5px 0;transition:.15s}
footer li a:hover{color:var(--acc2)}
.f-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.f-logo .logo-t b{color:#fff}
.f-contact b{display:block;color:#fff;font-size:19px;font-weight:800;letter-spacing:-.02em}
.f-soc{display:flex;gap:8px;margin-top:16px}
.f-soc a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.07);display:grid;place-items:center;transition:.2s}
.f-soc a:hover{background:var(--acc)}
.f-bot{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#64748B;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:16px 0}
.crumbs a:hover{color:var(--acc)}
.crumbs i{opacity:.5;font-style:normal}
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:18px}
.cat-head h1{margin:0;font-size:clamp(24px,3vw,36px);font-weight:900;letter-spacing:-.035em}
.cat-head p{margin:8px 0 0;color:var(--muted);font-size:14px;max-width:620px}
.subcats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.subcats a{padding:9px 15px;border-radius:9px;background:var(--surf);border:1px solid var(--line);font-size:13.5px;font-weight:600;transition:.18s}
.subcats a:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
.subcats a.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.subcats a b{font:700 10px/1 var(--mono);opacity:.6;margin-left:6px}
.fgrp:last-child{border-bottom:0}
.fgrp>b span{font:700 10px/1 var(--mono);color:var(--muted)}
.chk i{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line2);flex:none;display:grid;place-items:center;transition:.16s;font-size:11px;color:#fff;font-style:normal}
.chk input{display:none}
.chk input:checked+i{background:var(--acc);border-color:var(--acc)}
.chk input:checked+i::after{content:"✓"}
.chk u{margin-left:auto;font:600 10.5px/1 var(--mono);color:var(--muted);text-decoration:none}
.prange{display:flex;align-items:center;gap:8px}
.prange input{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--surf2);outline:none;font-size:13.5px}
.prange input:focus{border-color:var(--acc);background:#fff}
.prange span{color:var(--muted)}
.fbtns{padding:16px 18px;display:flex;gap:8px}
.fbtns .btn{flex:1;padding:11px;font-size:13px}
.toolbar .lbl{font-size:13px;color:var(--muted)}
.sel{border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:var(--surf2);font-size:13.5px;font-weight:600;outline:none;cursor:pointer}
.sel:focus{border-color:var(--acc)}
.vtog{margin-left:auto;display:flex;gap:2px;background:var(--surf2);border-radius:9px;padding:3px}
.vtog button{padding:7px 12px;border-radius:7px;font-size:13px;font-weight:700;color:var(--muted);transition:.16s}
.vtog button.on{background:var(--surf);color:var(--acc);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.fchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fchip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;background:var(--acc-soft);color:var(--acc);font-size:12.5px;font-weight:700}
.fchip button{color:var(--acc);opacity:.6;font-size:15px;line-height:1}
.fchip button:hover{opacity:1}
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:28px}
.pager a{min-width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surf);display:grid;place-items:center;font-weight:700;font-size:13.5px;padding:0 12px;transition:.18s}
.pager a:hover{border-color:var(--acc);color:var(--acc)}
.pager a.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.seo h2{margin:0 0 10px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.seo p{margin:0 0 10px;color:var(--ink2);font-size:13.5px;line-height:1.65}
.thumbs button.on{border-color:var(--acc)}
.gmain .badges{top:16px;left:16px}
.p-sub{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.p-sub .art{font:600 11.5px/1 var(--mono)}
.p-sub b{color:var(--acc);font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:.06em}
.bb-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bb-price .per{color:var(--muted);font-size:13px}
.bb-price .rrp{margin-left:auto;text-align:right;font-size:12px;color:var(--muted)}
.bb-price s.rrp{margin-left:0;text-align:left;font-size:15px}
.bb-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.bb-row:last-of-type{border-bottom:0}
.bb-row b{font-weight:700}
.bb-buy{display:flex;gap:10px;margin-top:16px}
.bb-buy .qty button{height:40px;width:40px}
.bb-buy .qty input{height:52px;width:52px;font-size:16px}
.bb-buy .add:hover{background:var(--acc-d)}
.bb-total{margin-top:12px;background:var(--acc-soft);border-radius:11px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between}
.bb-total span{font-size:13px;color:var(--ink2)}
.bb-note{margin-top:14px;display:grid;gap:9px}
.bb-note div{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink2)}
.bb-note i{font-style:normal;font-size:15px;line-height:1.2}
.colors{display:flex;gap:8px;margin-top:6px}
.colors button{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);transition:.18s;position:relative}
.colors button.on{border-color:var(--acc)}
.colors button:hover{transform:scale(1.08)}

/* kmt5v2: варіанти товару (кольори/дизайни) - у реальних даних це не колір, а фото
   готового варіанту на модель пристрою, тож замість кружечків .colors - ряд мініатюр */
.vitems{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.vitem{width:52px;height:52px;border-radius:12px;border:2px solid var(--line);overflow:hidden;position:relative;transition:.18s;flex:none}
.vitem img{width:100%;height:100%;object-fit:cover}
.vitem:hover{border-color:var(--line2)}
.vitem.on{border-color:var(--acc)}
.vitem b{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  background:var(--dan);color:#fff;font:800 10px/18px var(--mono);text-align:center;border:2px solid var(--surf)}

/* kmt5v2: «Оберіть модель пристрою» — заміна list__models_left */
.devsel{margin-top:24px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.devsel .tabs{margin:0 0 14px}
.devsel-list{display:flex;flex-wrap:wrap;gap:8px}
.devsel-list a{padding:8px 13px;border-radius:9px;background:var(--surf2);border:1px solid var(--line);font-size:13px;font-weight:600;transition:.16s}
.devsel-list a:hover{background:var(--acc);color:#fff;border-color:var(--acc)}

/* kmt5v2: «Доступні моделі для цього товару» — заміна .all-available-models.
   Групи по моделі, що згортаються/розгортаються (перша розгорнута, як у старому
   дизайні), всередині — та сама картка product_layout.php, що й у категорії */
.mgroup{border-bottom:1px solid var(--line)}
.mgroup:last-child{border-bottom:0}
.mgroup-h{display:flex;align-items:center;gap:10px;width:100%;padding:16px 4px;font-size:15px;font-weight:800;text-align:left}
.mgroup-h b{font:700 11px/1 var(--mono);color:var(--muted);background:var(--surf2);padding:4px 9px;border-radius:999px}
.mgroup-h::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);margin-left:auto;transition:.2s}
.mgroup-h.on::after{transform:rotate(-135deg)}
.mgroup-b{padding:4px 4px 22px}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:36px 0 0;flex-wrap:wrap}
.tabs button{padding:14px 20px;font-size:14.5px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:.18s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--acc);border-bottom-color:var(--acc)}
.tabpane{padding:26px 0}
.tabpane p{margin:0 0 12px;color:var(--ink2);line-height:1.7;max-width:820px;font-size:14px}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;max-width:900px}
.spec div{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.spec div span{color:var(--muted);min-width:180px}
.spec div b{font-weight:700}
.search input{border:0;background:none;outline:none;font-size:14px;width:100%;min-width:0}
.toast{position:fixed;right:20px;bottom:20px;z-index:210;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.tst{background:var(--ink);color:#fff;border-radius:12px;padding:13px 18px;font-size:13.5px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6);display:flex;align-items:center;gap:11px;animation:tin .3s;max-width:340px}
.tst b{color:var(--acc2)}
.tst .ok{width:24px;height:24px;border-radius:50%;background:var(--ok);display:grid;place-items:center;flex:none}
.tree>b{display:block;padding:14px 16px;font-size:13.5px;font-weight:800;border-bottom:1px solid var(--line);background:var(--surf2)}
.tnode>a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;transition:.15s}
.tnode>a:hover{background:var(--acc-soft);color:var(--acc)}
.tnode>a u{margin-left:auto;font:600 10px/1 var(--mono);color:var(--muted);text-decoration:none}
.tnode>a i{width:14px;font-style:normal;color:var(--muted);font-size:10px;transition:.18s}
.tnode.open>a{color:var(--acc);background:var(--acc-soft)}
.tnode.open>a i{transform:rotate(90deg)}
.tsub{display:none;padding:2px 0 6px 22px}
.tnode.open .tsub{display:block}
.tsub a{display:flex;padding:6px 10px;border-radius:7px;font-size:12.5px;color:var(--ink2)}
.tsub a:hover{color:var(--acc);background:var(--acc-soft)}
.tsub a.on{background:var(--acc);color:#fff;font-weight:700}
.tsub a u{margin-left:auto;font:600 10px/1 var(--mono);opacity:.6;text-decoration:none}
.fgrp{border-bottom:1px solid var(--line);padding:13px 15px}
.fgrp>b{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:12.5px;margin-bottom:9px}
.chk{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;padding:4px 0}
.side .fgrp:nth-of-type(n+5){display:none}
.order-h b{font-size:13.5px;font-weight:800}
.order-h span{font:700 10px/1 var(--mono);color:var(--acc);background:var(--acc-soft);padding:5px 9px;border-radius:6px}
.oi{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;transition:.15s}
.oi:hover{background:var(--surf2)}
.oi-th{width:38px;height:38px;border-radius:8px;background:var(--surf2);display:grid;place-items:center}
.oi-th svg{width:80%;height:80%}
.oi-n{font-size:12px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oi-q{font:600 10.5px/1 var(--mono);color:var(--muted);margin-top:4px;display:block}
.oi-s{text-align:right;font-size:13px;font-weight:800;white-space:nowrap}
.oi-s button{display:block;margin-top:4px;font-size:11px;color:var(--muted);font-weight:600}
.oi-s button:hover{color:var(--dan)}
.order-empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:12.5px}
.order-empty div{font-size:30px;margin-bottom:10px;opacity:.35}
.order-f{border-top:1px solid var(--line);padding:14px 16px;background:var(--surf2)}
.order-row{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;color:var(--ink2)}
.order-row.big{font-size:15px;font-weight:900;color:var(--ink);padding-top:9px;margin-top:6px;border-top:1px dashed var(--line2)}
.order-row.big b{color:var(--acc);font-size:20px;letter-spacing:-.03em}
.mins{margin:12px 0 0}
.mins-b{height:6px;border-radius:3px;background:var(--surf3);overflow:hidden}
.mins-b i{display:block;height:100%;background:var(--acc);border-radius:3px;transition:width .35s;width:0}
.mins-t{font:600 10.5px/1 var(--mono);color:var(--muted);margin-top:7px;display:block}
.mins.ok .mins-b i{background:var(--ok)}
.mins.ok .mins-t{color:var(--ok)}
.order-f .btn{width:100%;margin-top:12px;padding:13px}
#pg-home>.hero+.sec{padding-top:46px !important}
.grid{display:grid}
.brands{display:grid;gap:10px}
.cat-layout{display:grid;align-items:start;gap:18px}
.cat-grid{display:grid}
.cat-layout.nopanel{grid-template-columns:190px minmax(0,1fr)}
.cat-layout.nopanel .order{display:none}
/* kmt5v2: поки без панелі замовлення справа (окремий крок) */
.cat-layout.solo{grid-template-columns:minmax(0,1fr)}

/* kmt5v2: кошик — навпаки, широкий контент зліва + вузька sticky-панель замовлення
   справа, без фільтрів. .nopanel тут не підходить - вона розрахована на "вузько зліва
   (фільтри) + широко справа" і навіть примусово ховає .order (display:none) */
.cat-layout.ckwrap{grid-template-columns:minmax(0,1fr) 320px}
@media(max-width:1000px){.cat-layout.ckwrap{grid-template-columns:1fr}}
@media(max-width:1000px){.cat-layout.ckwrap .order{position:static}}

/* .cat-grid{repeat(4,1fr)} і брейкпоінти нижче були розраховані на 3-колоночний
   .cat-layout (фільтри + сітка + панель замовлення) - у нас панелі замовлення немає,
   місця для сітки більше, тож рахуємо колонки окремо під .nopanel/.solo (вищий
   пріоритет за голий .cat-layout - інакше мобільне згортання в 1 колонку на 1240px
   на них узагалі не спрацює) */
.cat-layout.nopanel .cat-grid,.cat-layout.solo .cat-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.cat-layout.nopanel .cat-grid,.cat-layout.solo .cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.cat-layout.nopanel .cat-grid,.cat-layout.solo .cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.cat-layout.nopanel{grid-template-columns:1fr}}
@media(max-width:900px){.cat-layout.nopanel .side{position:static}}

/* Пагінація: системний клас Pagination::render() віддає голі <a>/<b> в
   .links/.results, не нашу розмітку .pager a.on — підганяємо під той самий вигляд */
.pager .links{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pager .links a,.pager .links b{min-width:40px;height:40px;border-radius:10px;display:inline-flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13.5px;padding:0 12px}
.pager .links a{border:1px solid var(--line);background:var(--surf);color:inherit;transition:.18s}
.pager .links a:hover{border-color:var(--acc);color:var(--acc)}
.pager .links b{background:var(--acc);color:#fff}
.pager .results{text-align:center;color:var(--muted);font-size:12.5px;margin-top:8px}

/* Фільтри: чіп активного значення - <i> замість <button> (валідний HTML: <a> не може
   містити <button>), і поки не ховаємо групи після 4-ї - кнопки "показати ще" немає */
.fchip i{font-style:normal;color:var(--acc);opacity:.6;font-size:15px;line-height:1}
.fchip:hover i{opacity:1}
.side .fgrp:nth-of-type(n+5){display:block}
.pc-th svg{transition:.3s;width:86%;height:86%}
.badges{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:5px;z-index:2;top:12px;left:12px}
.bg{font:800 10px/1.3 var(--mono);letter-spacing:.06em;color:#fff;font-size:10.5px;padding:5px 10px;border-radius:7px}
.pc-acts{position:absolute;display:flex;flex-direction:column;gap:6px;z-index:2;opacity:0;transform:translateX(6px);transition:.2s;top:12px;right:12px}
.order-h{padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surf2);display:flex;align-items:center;justify-content:space-between;gap:8px}
.order-h .tog{width:26px;height:26px;border-radius:7px;background:var(--surf3);display:grid;place-items:center;color:var(--muted);font-size:12px;font-weight:800;transition:.16s;flex:none}
.order-h .tog:hover{background:var(--acc);color:#fff}
.order-show{position:fixed;right:20px;bottom:84px;z-index:150;display:none;align-items:center;gap:10px;background:var(--acc);color:#fff;padding:13px 19px;border-radius:13px;font-weight:800;font-size:13.5px;box-shadow:0 20px 40px -14px rgba(15,23,42,.65);transition:.18s}
.order-show:hover{background:var(--acc-d)}
.order-show b{background:rgba(255,255,255,.22);padding:3px 9px;border-radius:7px;font:800 12px/1.4 var(--mono)}
.tree ul{overflow:auto;padding:6px;max-height:520px}
.order-list{overflow:auto;padding:6px;max-height:400px}
.side .fgrp{padding:13px 14px}
header{position:fixed;top:0;left:0;right:0;z-index:90;box-shadow:none;transition:.3s}
header.solid{box-shadow:0 1px 0 var(--line)}
#pg-cat{padding-top:var(--hdrAll)}
#pg-prod{padding-top:var(--hdrAll)}
/* kmt5v2: інформаційні/текстові сторінки (про компанію, доставка тощо) - того самого
   рядка немає в макеті (там таких сторінок не було взагалі), той самий відступ під
   фіксовану шапку за аналогією з #pg-cat/#pg-prod */
#pg-info{padding-top:var(--hdrAll)}
header:not(.solid) .bar{background:transparent;border-bottom:1px solid rgba(255,255,255,.14)}
header:not(.solid) .nav-item:hover .nav-link{background:rgba(255,255,255,.17);color:#fff}
header:not(.solid) .search input{color:#fff}
header:not(.solid) .search input::placeholder{color:rgba(255,255,255,.62)}
header:not(.solid) .icn:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}
header:not(.solid) .dot{border-color:transparent}
header:not(.solid) .cart:hover{background:var(--acc2);color:#fff}
.carou-track>.pc{flex:0 0 calc((100% - (var(--per) - 1) * 18px) / var(--per));min-width:0}
.carou-btns{display:flex;gap:7px;margin-left:auto}
.carou-btns button{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--surf);display:grid;place-items:center;font-size:16px;color:var(--ink2);transition:.18s}
.carou-btns button:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.sec-head .more{margin-left:14px}
.carou-bar i{display:block;height:100%;border-radius:2px;background:var(--acc);transition:transform .62s cubic-bezier(.22,.72,.24,1);transform-origin:left center}
.gmain.zoomed svg{transform:scale(2.6);transition:transform .08s linear}
.gmain.zoomed .gzoom{opacity:0}
.gzoom{position:absolute;right:14px;bottom:14px;padding:8px 13px;border-radius:9px;background:var(--surf2);font-size:12px;font-weight:700;color:var(--muted);transition:opacity .2s}
.thumbs button:hover{border-color:var(--line2);transform:translateX(2px)}
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#0B1220}
.bslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s;z-index:1}
.bslide.on{opacity:1;visibility:visible;z-index:2}
.hero::before{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(80% 70% at 40% 40%,#000,transparent);content:none}
.hero::after{position:absolute;width:60vw;height:60vw;border-radius:50%;right:-14vw;top:-22vw;background:radial-gradient(circle,var(--heroGlow),transparent 62%);content:none}
.bphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bslide.on .bphoto{animation:bzoom 14s ease-out forwards}
.bfallback{position:absolute;inset:0;display:none}
.bslide.noimg .bphoto{display:none}
.bslide.noimg .bfallback{display:block}
.bfallback .sky{position:absolute;inset:0;background:radial-gradient(110% 80% at 70% 12%,var(--c) 0%,transparent 55%),
             linear-gradient(158deg,var(--a),var(--b))}
.bhint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;text-align:center;color:#fff;background:rgba(8,16,38,.5);backdrop-filter:blur(10px);border:1px dashed rgba(255,255,255,.4);border-radius:16px;padding:30px 38px;max-width:560px}
.bhint b{display:block;font-size:19px;font-weight:800;margin-bottom:10px}
.bhint code{display:inline-block;margin-top:12px;font:600 14px/1 ui-monospace,Consolas,monospace;background:rgba(255,255,255,.16);padding:9px 14px;border-radius:8px;letter-spacing:.02em}
.bhint span{display:block;font-size:13.5px;opacity:.82;line-height:1.55}
.bslide::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;transition:background .3s ease;background:linear-gradient(180deg,
      rgba(6,12,26,var(--scrim-t)) 0%,
      rgba(6,12,26,calc(var(--scrim-t) * .34)) 15%,
      rgba(6,12,26,0) 33%),
    linear-gradient(0deg,
      rgba(6,12,26,var(--scrim-b)) 0%,
      rgba(6,12,26,calc(var(--scrim-b) * .3)) 17%,
      rgba(6,12,26,0) 37%),
    rgba(6,12,26,var(--scrim-all))}
header:not(.solid) .logo-t b{color:#fff;text-shadow:0 1px 14px rgba(6,12,26,.6)}
header:not(.solid) .logo-t span{color:rgba(255,255,255,.62);text-shadow:0 1px 14px rgba(6,12,26,.6)}
header:not(.solid) .nav-link{color:#fff;text-shadow:0 1px 14px rgba(6,12,26,.6)}
header:not(.solid) .search{background:rgba(10,18,36,.42);border-color:rgba(255,255,255,.3)}
header:not(.solid) .search:focus-within{border-color:#fff;background:rgba(10,18,36,.6)}
header:not(.solid) .icn{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(10,18,36,.34)}
.demo{position:fixed;z-index:200;display:flex;align-items:center;gap:6px;background:#0F172A;color:#fff;padding:7px;border-radius:14px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);font-size:13px;left:auto;right:20px;bottom:116px;transform:none;transition:.22s;flex-wrap:wrap;max-width:min(92vw,620px)}
.demo .fab{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:rgba(255,255,255,.1);color:#fff;padding:0;flex:none}
.demo .fab:hover{background:var(--acc)}
.demo.mini{padding:6px;gap:0}
.demo.mini>*{display:none}
.demo.mini>.fab{display:grid}
.demo.onpage{bottom:18px}
html[data-bg="cloud"]{--bg:#F2F5FA;--surf:#FFFFFF;--surf2:#EAF0F7;--surf3:#DDE6F1;--line:#E2E9F2;--line2:#C9D5E4}
html[data-bg="paper"]{--bg:#F3F1E9;--surf:#FCFAF4;--surf2:#EBE7DB;--surf3:#DFDACB;--line:#E3DED0;--line2:#CBC4B1}
html[data-bg="sand"]{--bg:#F7F3ED;--surf:#FFFDFA;--surf2:#EFE8DE;--surf3:#E3DACC;--line:#E7DFD3;--line2:#D2C7B6}
html[data-bg="mint"]{--bg:#F0F5F2;--surf:#FBFDFC;--surf2:#E5EEE9;--surf3:#D6E3DC;--line:#DFE9E4;--line2:#C4D5CC}
html[data-bg="lavender"]{--bg:#F4F3FA;--surf:#FCFBFF;--surf2:#EBE9F5;--surf3:#DEDBEE;--line:#E4E1F0;--line2:#CBC6E0}
html[data-mode="dark"]{--bg:#0E1116;--surf:#161A21;--surf2:#1C212A;--surf3:#252B36;--ink:#E8ECF3;--ink2:#AAB4C2;--muted:#7A8698;--line:#242B36;--line2:#343D4B;--acc-soft:rgba(33,89,232,.16);--ok-soft:rgba(21,160,90,.16);--dan-soft:rgba(220,42,62,.16);--sh:0 16px 40px -18px rgba(0,0,0,.7);--shL:0 26px 60px -24px rgba(0,0,0,.85)}
html[data-mode="dark"][data-theme="orange"]{--acc-soft:rgba(240,89,31,.17)}
html[data-mode="dark"] .pc-th{background:var(--surf3)}
html[data-mode="dark"] .gmain{background:var(--surf2)}
html[data-mode="dark"] footer{background:#080B0F}
html[data-mode="dark"] .demo{background:#05070A}
html[data-mode="dark"] .seo{background:var(--surf)}
html[data-mode="dark"] .toolbar{background:var(--surf)}
body{overflow-x:clip;margin:0;background:var(--bg);color:var(--ink);font:400 14.5px/1.5 system-ui,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background .3s,border-color .3s,color .3s}
.side{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:sticky;top:calc(var(--hdrAll) + 14px);transition:background .3s,border-color .3s,color .3s}
.order{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);position:sticky;top:calc(var(--hdrAll) + 14px);overflow:hidden;transition:background .3s,border-color .3s,color .3s}
.toolbar{display:flex;align-items:center;gap:12px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;flex-wrap:wrap;padding:12px 16px;transition:background .3s,border-color .3s,color .3s}
.tree{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px;transition:background .3s,border-color .3s,color .3s}
.seo{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin-top:26px;transition:background .3s,border-color .3s,color .3s}
.empty-state{max-width:480px;margin:32px auto 60px;text-align:center;padding:48px 32px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r)}
.empty-state .ico{font-size:52px;line-height:1;margin-bottom:16px}
.empty-state h1{font-size:22px;margin:0 0 10px}
.empty-state p{color:var(--muted);margin:0 0 24px;font-size:14px;line-height:1.5}
:root{--acc:#2159E8;--acc-d:#1745C4;--acc-soft:#E8EFFE;--acc2:#06A6D8;--hero1:#0C1B3D;--hero2:#12276B;--hero3:#0B1A3C;--heroGlow:rgba(6,166,216,.3);--pi-1:#8FB6FF;--pi-2:#2159E8;--pi-3:#D6E4FF;--bg:#F5F7FB;--surf:#FFFFFF;--surf2:#EEF2F8;--surf3:#E3EAF4;--ink:#0F172A;--ink2:#3B4759;--muted:#7C8899;--line:#E1E7F0;--line2:#CBD5E4;--ok:#15A05A;--ok-soft:#E4F6EC;--warn:#E0821A;--dan:#DC2A3E;--dan-soft:#FDECEE;--top:34px;--hdr:64px;--mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;--sh:0 14px 34px -18px rgba(15,23,42,.32);--shL:0 22px 50px -24px rgba(15,23,42,.4);--pi-4:#FFFFFF;--pi-5:#33415C;--pi-6:#0F172A;--r:13px;--r-s:10px;--wrap:1840px;--scrim-t:.55;--scrim-b:.62;--scrim-all:.10;--hdrAll:64px}
.bar .wrap{position:relative;display:flex;align-items:center;height:100%;gap:14px}
.logo{display:flex;align-items:center;gap:10px;order:1;margin-right:4px}
.sbox{position:fixed;left:0;right:0;top:var(--hdrAll);z-index:96;display:none}
.sbox.on{display:block}
.sbox h6{margin:0 0 10px;font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sbox .row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sbox .row:last-child{margin-bottom:0}
.sbox .row a{padding:9px 14px;border-radius:999px;background:var(--surf2);font-size:13.5px;font-weight:600;transition:.16s}
.sbox .row a:hover{background:var(--acc);color:#fff}
.sbox .row a b{color:var(--muted);font:700 10px/1 var(--mono);margin-left:6px}
.sbox .row a:hover b{color:rgba(255,255,255,.75)}
.sveil{position:fixed;inset:0;background:rgba(8,14,28,.32);z-index:88;opacity:0;visibility:hidden;transition:.22s}
.sveil.on{opacity:1;visibility:visible}
.pick{position:relative;display:flex;align-items:center}
.pick>button{display:flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:13px;transition:.18s;white-space:nowrap}
.pick>button:hover{border-color:var(--acc);color:var(--acc)}
.pick>button i{font-style:normal;font-size:11px;opacity:.55;transition:.2s}
.pick.on>button{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.pick.on>button i{transform:rotate(180deg)}
.pick .menu{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;background:var(--surf);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shL);padding:6px;z-index:97;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.pick.on .menu{opacity:1;visibility:visible;transform:none}
.pick .menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:600;transition:.14s;text-align:left}
.pick .menu button:hover{background:var(--surf2)}
.pick .menu button.on{background:var(--acc);color:#fff}
.pick .menu button span{margin-left:auto;font:700 11px/1 var(--mono);opacity:.6}
.pick .rate{padding:10px 12px 6px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);margin-top:4px}
.pick .rate b{color:var(--ink)}
header:not(.solid) .pick>button{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(10,18,36,.34);text-shadow:0 1px 12px rgba(6,12,26,.6)}
.cart{font-weight:800;font-size:13.5px;flex:none;white-space:nowrap;position:relative;display:flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;border-radius:999px;background:var(--acc);color:#fff;transition:.22s;overflow:hidden}
.cart::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,
  rgba(255,255,255,0) 30%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 70%);transform:translateX(-120%);transition:none}
.cart.pulse::before{animation:shine .7s ease-out}
.cart .ic{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:16px;flex:none}
.cart .txt{display:flex;flex-direction:column;line-height:1.15}
.cart .txt b{font-size:15px;font-weight:900;letter-spacing:-.02em}
.cart .txt span{font-size:10.5px;opacity:.8;font-weight:600}
.cart:hover{background:var(--acc-d);transform:translateY(-1px)}
header:not(.solid) .cart{background:#fff;color:var(--ink)}
header:not(.solid) .cart .ic{background:var(--acc);color:#fff}
.panel-in{display:grid;grid-template-columns:230px 1fr;max-height:calc(100vh - var(--hdrAll) - 20px);overflow:hidden;position:relative;z-index:1}
.mseries span{font-size:13.5px;cursor:pointer;white-space:nowrap;position:relative;padding:11px 20px;border-radius:12px;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#CFD8E6;transition:.22s cubic-bezier(.2,.7,.2,1);overflow:hidden}
.mseries span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc2);transform:scaleX(0);transform-origin:left;transition:.28s}
.mseries span:hover{color:#fff;background:rgba(255,255,255,.16);transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.mseries span:hover::after{transform:scaleX(1)}
.mseries span.on{background:linear-gradient(96deg,var(--acc),var(--acc2));color:#fff;border-color:transparent;box-shadow:0 12px 24px -12px var(--acc)}
.harrow{position:absolute;top:50%;transform:translateY(-50%);z-index:9;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff;background:rgba(10,18,36,.3);border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(10px);transition:.22s;opacity:.75}
.harrow:hover{background:#fff;color:var(--ink);opacity:1;transform:translateY(-50%) scale(1.06)}
.harrow.l{left:26px}
.harrow.r{right:26px}
.hdots{position:absolute;left:0;right:0;bottom:26px;z-index:9;display:flex;justify-content:center;gap:9px}
.hdots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.26s;border:1px solid rgba(255,255,255,.5)}
.hdots i.on{width:34px;border-radius:999px;background:#fff}
.pc-th .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);backface-visibility:hidden}
.pc-th .ph.b{opacity:0;transform:scale(1.08)}
.pc:hover .pc-th .ph.a{opacity:0;transform:scale(1.08)}
.pc:hover .pc-th .ph.b{opacity:1;transform:scale(1)}
.pc-price .rrp{margin-left:auto;font:600 10.5px/1.35 var(--mono);color:var(--muted);text-align:right;font-size:11px;display:none !important}
.pc-meta .mult{display:none !important}
.pc-brand{display:flex;justify-content:space-between;font-size:11px;font:700 11px/1 var(--mono);letter-spacing:.05em}
.pc-meta{display:flex;align-items:center;font:600 10.5px/1 var(--mono);font-size:11.5px;justify-content:flex-start}
.stock{display:inline-flex;align-items:center;color:var(--ok);font:700 12px/1 system-ui;letter-spacing:0;gap:7px;text-transform:none}
.stock i{border-radius:50%;width:8px;height:8px;position:relative;background:var(--ok)}
.stock i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);animation:blip 1.8s ease-out infinite;opacity:0}
.stock.low i{background:var(--warn);border-color:var(--warn)}
.stock.low i::after{background:var(--warn);border-color:var(--warn)}
.qty{display:flex;align-items:center;overflow:hidden;flex:none;border-radius:999px;border:1.5px solid var(--line2);background:var(--surf);padding:3px;gap:2px;transition:.18s}
.qty:hover{border-color:var(--acc)}
.qty button{width:34px;height:34px;border-radius:50%;font-size:17px;font-weight:700;color:var(--ink2);display:grid;place-items:center;transition:.16s}
.qty button:hover{background:var(--acc);color:#fff}
.qty input{text-align:center;border:0;outline:none;background:none;-moz-appearance:textfield;width:40px;height:34px;font-size:14px;font-weight:800}
.add{flex:1;display:grid;place-items:center;height:42px;border-radius:999px;background:var(--acc);color:#fff;font-size:14.5px;font-weight:900;letter-spacing:-.02em;border:1.5px solid var(--acc);transition:.2s}
.add:hover{color:#fff;background:var(--acc-d);border-color:var(--acc-d);transform:translateY(-1px)}
.add.done{background:var(--ok);border-color:var(--ok)}
.pc-acts button{display:grid;place-items:center;color:var(--muted);transition:.18s;font-size:15px;border-radius:50%;width:36px;height:36px;border:1.5px solid rgba(15,23,42,.1);background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.badges .bg{border-radius:999px;padding:5px 12px;font-weight:900}
.gmain img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .22s ease-out;transform-origin:center}
.gmain.zoomed img{transform:scale(2.4);transition:transform .08s linear}
.gmain svg{width:66%;height:66%;transition:transform .22s ease-out;transform-origin:center center;will-change:transform;display:none}
.thumbs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumbs button svg{display:none}
.demo .grp2{display:flex;align-items:center;gap:5px}
.demo .bgdot{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0;transition:.16s}
.demo .bgdot:hover{transform:scale(1.14)}
.demo .bgdot.on{border-color:#fff}
.demo .mode{padding:9px 13px;border-radius:9px;font-weight:700;font-size:12.5px;color:#B6C0D0;transition:.18s;white-space:nowrap}
.demo .mode:hover{color:#fff;background:rgba(255,255,255,.09)}
.pc:hover{border-color:var(--acc);box-shadow:var(--shL);transform-origin:center bottom;transform:scaleY(1.012);z-index:8}
.grp a:hover{background:var(--acc);color:#fff;transform:translateX(3px);box-shadow:0 8px 18px -8px var(--acc);font-weight:700}
.grp a:hover i{color:rgba(255,255,255,.8)}
.rail a{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;font-size:13.5px;font-weight:600;transition:.15s;border-radius:10px}
.rail a:hover{background:var(--acc);color:#fff;transform:translateX(3px);box-shadow:0 8px 18px -8px var(--acc);font-weight:700}
.rail a:hover b{color:rgba(255,255,255,.8)}
.mlist a:hover{background:var(--acc);color:#fff;transform:translateX(3px);font-weight:700;box-shadow:0 8px 18px -8px var(--acc)}
.search.open{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);max-width:none;height:48px;z-index:98;background:var(--surf);border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.search .sclose{display:none;width:30px;height:30px;border-radius:50%;background:var(--surf2);color:var(--muted);font-size:15px;flex:none;align-items:center;justify-content:center;transition:.16s}
.search .sclose:hover{background:var(--dan);color:#fff}
.search.open .sclose{display:flex}
.sbox-in{margin:10px auto 0;background:var(--surf);border:1px solid var(--line);box-shadow:var(--shL);animation:sdrop .22s cubic-bezier(.2,.7,.2,1);width:min(100% - 36px,var(--wrap));border-radius:20px;padding:22px 26px}
.prod{display:grid;align-items:start;gap:44px;max-width:1560px;margin-inline:auto;justify-content:stretch}
.gal{display:grid;gap:16px}
.gmain{border:1px solid var(--line);display:grid;place-items:center;position:relative;cursor:zoom-in;overflow:hidden;background:var(--surf2);aspect-ratio:1;width:100%;border-radius:22px}
.thumbs{display:flex;flex-direction:column;gap:12px;max-height:620px;overflow-y:auto;padding-right:2px}
.thumbs button{border:1.5px solid var(--line);background:var(--surf);display:grid;place-items:center;transition:.18s;aspect-ratio:1;overflow:hidden;padding:0;position:relative;border-radius:16px;border-width:2px;flex-shrink:0}
.buybox{background:var(--surf);border:1px solid var(--line);position:sticky;top:calc(var(--hdrAll) + 14px);transition:background .3s,border-color .3s,color .3s;padding:26px 28px;border-radius:22px}
.p-title{margin:0;font-weight:900;letter-spacing:-.03em;line-height:1.22;font-size:clamp(22px,2.6vw,32px)}
.bb-price .opt{font-weight:900;letter-spacing:-.04em;font-size:42px}
.ladder-r span{padding:12px 14px}
.ladder-r b{font-weight:800;padding:12px 14px}
.bb-buy .add{height:52px;background:var(--acc);color:#fff;border-radius:11px;font-size:15px}
.bb-total b{font-weight:900;letter-spacing:-.03em;color:var(--acc);font-size:24px}
.carou{position:relative;display:flex;flex-direction:column}
.carou-bar{height:3px;border-radius:2px;background:var(--surf3);margin-top:18px;overflow:hidden;order:-1;margin:0 0 16px;pointer-events:none}
.carou-vp{overflow:hidden;padding:6px 2px 136px;margin:-6px -2px -136px;position:relative;z-index:2;pointer-events:none}
.carou-track{display:flex;gap:18px;will-change:transform;transition:transform .62s cubic-bezier(.22,.72,.24,1);pointer-events:auto}
.order-row.big.hit b{animation:tgt .5s ease-out}
.cart.hit{animation:tgt .5s ease-out}
.add.land{animation:landing .45s cubic-bezier(.3,1.5,.5,1);box-shadow:0 0 0 6px var(--acc-soft)}
.crow:last-child{border-bottom:0}
.crow-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.crow-th .b{opacity:0}
.crow:hover .crow-th .a{opacity:0}
.crow:hover .crow-th .b{opacity:1}
.crow-th .bg{position:absolute;top:5px;left:5px;z-index:2;font-size:8.5px;padding:2px 7px;border-radius:999px}
.crow-main{min-width:0}
.crow-brand{display:flex;gap:10px;font:700 10.5px/1 var(--mono);letter-spacing:.05em;margin-bottom:5px}
.crow-brand b{color:var(--acc);text-transform:uppercase}
.crow-brand span{color:var(--muted)}
.crow-name{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.crow-name:hover{color:var(--acc)}
.crow-tmr{margin-top:8px}
.crow-tmr .timer.sm .u b{min-width:34px;height:28px;font-size:14px;border-width:2px}
.crow-tmr .timer.sm .u span{font-size:7px}
.crow-tmr .timer.sm .cl{font-size:14px;line-height:28px}
.crow-stock{font:700 12px/1.4 system-ui}
.crow-stock .dot2{display:inline-flex;align-items:center;gap:7px;color:var(--ok)}
.crow-stock .dot2 i{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative}
.crow-stock .dot2 i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);animation:blip 1.8s ease-out infinite;opacity:0}
.crow-stock .dot2.low{color:var(--warn)}
.crow-stock .dot2.low i{background:var(--warn);border-color:var(--warn)}
.crow-stock .dot2.low i::after{background:var(--warn);border-color:var(--warn)}
.crow-tiers{display:flex;gap:7px}
.crow-tiers button{flex:1;background:var(--surf2);border:1.5px solid var(--line);border-radius:12px;padding:8px 4px;text-align:center;transition:.16s;min-width:0}
.crow-tiers button:hover{background:var(--surf);border-color:var(--acc);transform:translateY(-2px)}
.crow-tiers button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.crow-tiers span{display:block;font:700 9.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
.crow-tiers button.on span{color:rgba(255,255,255,.85)}
.crow-tiers b{display:block;font-size:14px;font-weight:900;margin-top:4px}
.crow-price{text-align:right;white-space:nowrap}
.crow-price b{font-size:21px;font-weight:900;letter-spacing:-.03em}
.crow-price span{font-size:11px;color:var(--muted);display:block;margin-top:2px}
.crow-act{display:flex;align-items:center;gap:9px}
.crow-act .qty{flex:none}
.crow-act .qty button{width:30px;height:30px}
.crow-act .qty input{width:38px;height:30px;font-size:13.5px}
.crow-act .add{flex:1;height:40px;font-size:13.5px;min-width:96px}
.clist.fx-row .crow{}
.clist.fx-wide .crow{grid-template-columns:132px minmax(0,1fr) 300px 168px;grid-template-areas:"th main tiers price" "th stock tiers act";gap:10px 18px;padding:16px}
.clist.fx-wide .crow-th{grid-area:th;align-self:start}
.clist.fx-wide .crow-main{grid-area:main}
.clist.fx-wide .crow-stock{grid-area:stock;align-self:start}
.clist.fx-wide .crow-tiers{grid-area:tiers}
.clist.fx-wide .crow-price{grid-area:price;align-self:end}
.clist.fx-wide .crow-act{grid-area:act;align-self:start}
.clist.fx-wide .crow-name{font-size:15px;-webkit-line-clamp:2}
.clist.fx-wide .crow-tiers button{padding:11px 4px}
.clist.fx-wide .crow-tiers b{font-size:15px}
.clist.fx-table .crow-tiers{display:contents}
.clist.fx-table .crow-act{display:contents}
.clist.fx-table .crow-price{display:none}
.clist.fx-table .crow-tiers button{border-radius:9px;padding:6px 3px}
.clist.fx-table .crow-tiers b{font-size:13px;margin-top:2px}
.clist.fx-table .crow-name{-webkit-line-clamp:1;font-size:13.5px}
.clist.fx-table .crow-tmr{display:none}
.clist.fx-table .crow-brand{margin-bottom:3px}
.clist.fx-table .crow-act .qty{width:100%}
.clist.fx-table .crow-act .add{width:100%;min-width:0;height:34px;font-size:12.5px}
.clist.fx-table .crow:nth-child(even){background:color-mix(in srgb,var(--surf2) 45%,transparent)}
.clist.fx-table .crow:hover{background:var(--acc-soft)}
.clist-foot b{font-size:19px;font-weight:900;letter-spacing:-.03em}
.clist-foot .btn{padding:12px 24px}
.lstfx{display:none;gap:2px;background:var(--surf2);border-radius:9px;padding:3px}
.lstfx.on{display:flex}
.lstfx button{padding:7px 13px;border-radius:7px;font-size:12.5px;font-weight:700;color:var(--muted);transition:.16s;white-space:nowrap}
.lstfx button:hover{color:var(--ink)}
.lstfx button.on{background:var(--surf);color:var(--acc);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.clist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--surf);box-shadow:var(--sh);overflow:visible}
.crow-head{display:none;gap:14px;padding:11px 16px;background:var(--surf2);border-bottom:1px solid var(--line);font:700 10px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);position:sticky;top:var(--hdrAll);z-index:5;border-radius:16px 16px 0 0}
.clist-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;background:var(--surf2);border-top:1px solid var(--line);flex-wrap:wrap;border-radius:0 0 16px 16px}
.clist>.crow:first-child{border-radius:16px 16px 0 0}
.crow{display:grid;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);transition:background .16s;position:relative}
.crow:hover{background:var(--acc-soft);z-index:20}
.crow-th{position:relative;border-radius:12px;overflow:hidden;background:var(--surf2);aspect-ratio:1;width:100%;transform-origin:left center;transition:transform .3s cubic-bezier(.2,.72,.24,1),box-shadow .3s,border-radius .3s;will-change:transform}
.crow-th:hover{z-index:40;box-shadow:0 26px 54px -16px rgba(15,23,42,.55),
  0 0 0 3px var(--surf);border-radius:14px}
.clist.fx-row .crow-th:hover{transform:scale(2.6)}
.clist.fx-wide .crow-th:hover{transform:scale(1.7)}
.clist.fx-table .crow-th:hover{transform:scale(3.6)}
.crow-th:hover .a{opacity:0}
.crow-th:hover .b{opacity:1}
.fly{position:fixed;z-index:300;pointer-events:none;display:grid;place-items:center;will-change:transform,opacity;width:74px;height:74px}
.fly svg{width:100%;height:100%;filter:drop-shadow(0 14px 26px rgba(15,23,42,.45))}
.fly .flyimg{width:100%;height:100%;border-radius:18px;overflow:hidden;border:3px solid #fff;box-shadow:0 16px 32px -10px rgba(15,23,42,.6);background:var(--surf2)}
.fly .flyimg img{width:100%;height:100%;object-fit:cover;display:block}
.pc-top{height:44px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line);background:var(--surf2);overflow:hidden}
.pc-top.meta{justify-content:space-between;padding:0 13px;font:700 10.5px/1 var(--mono);letter-spacing:.05em}
.pc-top.meta b{color:var(--acc);text-transform:uppercase}
.pc-top.meta span{color:var(--muted)}
.pc-top.tmr{background:var(--dan-soft);border-color:rgba(220,42,62,.28)}
html[data-mode="dark"] .pc-top{background:var(--surf3)}
html[data-mode="dark"] .pc-top.tmr{background:rgba(220,42,62,.16)}
.timer.xs{gap:4px}
.timer.xs .u b{min-width:29px;height:23px;font-size:13px;font-weight:900;border-width:2px;border-radius:6px;color:var(--dan);background:var(--surf)}
.timer.xs .u span{font-size:6.5px;font-weight:800;margin-top:2px;color:var(--muted);letter-spacing:.06em}
.timer.xs .cl{font-size:13px;line-height:23px;font-weight:900}
html[data-mode="dark"] .timer.xs .u b{background:var(--surf2)}
.pc-th .badges{top:12px}
.pc-th.has-tmr .badges{top:12px}
.pc-th .pc-acts{top:12px}
.pc-th.has-tmr .pc-acts{top:12px}
.pc-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:650;line-height:1.4;margin-top:-1px;min-height:38px;font-size:14px}
.pc-row{gap:11px;align-items:center;display:block}
.ptab button.on{background:var(--acc);color:#fff}
.ptab button{align-items:center;justify-content:space-between;gap:6px;display:block;width:100%;text-align:center;border-bottom:0;transition:.15s;padding:0;border-right:1.5px solid var(--line2)}
.ptab button:last-child{border-bottom:0;border-right:0}
.ptab button:hover{color:var(--acc);background:transparent}
.ptab button:hover span{background:var(--acc-soft);color:var(--acc)}
.ptab button:hover b{color:var(--acc)}
.ptab button.on span{background:var(--acc-d);color:#fff;border-bottom-color:var(--acc-d)}
.ptab button.on b{background:var(--acc);color:#fff}
html[data-mode="dark"] .ptab{background:var(--surf2)}
html[data-mode="dark"] .ptab span{background:var(--surf3)}
.pc-foot{padding-top:2px;margin-top:2px;display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;padding:0}
.pc-foot .qty{min-width:0;flex:none}
.pc-price{flex-wrap:wrap;align-items:baseline;gap:7px;margin-top:6px;display:block;flex:1;min-width:58px;margin:0;text-align:center;line-height:1.05}
.pc-price .disc{margin-bottom:5px;display:block;margin:0 auto 4px;padding:3px 11px;border-radius:999px;background:var(--dan-soft);color:var(--dan);font:900 15px/1.25 system-ui;width:max-content;letter-spacing:-.02em}
.pc-price .disc[hidden]{display:none}
.pc-price .opt{display:block;font-weight:900;letter-spacing:-.03em}
.pc-price .per{display:block;font-size:9.5px;color:var(--muted);margin-top:2px}
.pc{background:var(--surf);border:1px solid var(--line);display:flex;flex-direction:column;transition:background .3s,border-color .3s,color .3s;padding:14px;border-radius:20px;overflow:visible;position:relative;gap:10px;container-type:inline-size}
/* товар уже в кошику - картка трохи темніша (як .list-catalog_item.active у старій темі kmt5) */
.pc.in-cart{background:var(--surf2);border-color:var(--line2)}
.pc-foot .pc-price{order:-1;flex:1 0 100%;min-width:0;text-align:left;margin:0 0 4px}
.pc-foot .pc-price .opt{display:inline;font-size:20px}
.pc-foot .pc-price .per{display:inline;margin-left:5px;margin-top:0}
.pc-foot .pc-price .disc{display:inline-block;margin:0 6px 0 0;font-size:15px;vertical-align:middle}
.pc-foot .add{height:44px;padding:0 8px;font-size:13.5px}
.demo .fl{padding:9px 13px;border-radius:9px;font-weight:700;font-size:12.5px;color:#B6C0D0;transition:.18s;white-space:nowrap}
.demo .fl:hover{color:#fff;background:rgba(255,255,255,.09)}
.demo .fl b{color:#fff;font-weight:800}
.panel{left:0;right:0;top:var(--hdrAll);border-top:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:95;box-shadow:0 30px 70px -26px rgba(8,16,38,.6);position:fixed;overflow:hidden;background:var(--surf2);backdrop-filter:none}
.rail{padding:20px 16px;overflow:auto;max-height:calc(100vh - var(--hdrAll) - 20px);background:var(--surf2);backdrop-filter:none;border-right:1px solid var(--line)}
.panel-in .rail{background:var(--surf2);backdrop-filter:none;border-right:1px solid var(--line)}
.mlist .hd{break-inside:avoid;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;border-radius:12px;background:transparent;backdrop-filter:none;border:0;padding:0 0 8px;margin-bottom:8px}
.cols{display:flex;align-items:flex-start;gap:13px;overflow:auto;max-height:calc(100vh - var(--hdrAll) - 20px);background:var(--surf2);backdrop-filter:none;padding:18px 22px}
.colw{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.grp{border-radius:16px;background:transparent;backdrop-filter:none;border:0;box-shadow:none;padding:0;margin-bottom:8px}
.grp a{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink2);border-radius:9px;transition:.15s;font-weight:500;padding:4px 9px;margin-left:-9px}
.grp a.grp-h{display:block;font-size:14px;font-weight:800;color:var(--acc);padding:0 0 5px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);transition:.15s;margin-bottom:5px;margin-left:0}
.grp a.grp-h:hover{background:none;color:var(--acc-d);transform:none;box-shadow:none}
.mlist{columns:6;overflow:auto;max-height:calc(100vh - var(--hdrAll) - 190px);position:relative;z-index:1;background:var(--surf2);backdrop-filter:none;padding:16px 22px 20px;column-gap:12px}
.mlist a{display:block;font-size:13px;color:var(--ink2);margin-left:-9px;transition:.15s;border-radius:9px;background:transparent;backdrop-filter:none;margin:0 0 2px;padding:4px 9px}
.mseries{display:flex;flex-wrap:wrap;z-index:1;background:linear-gradient(100deg,var(--ink),color-mix(in srgb,var(--ink) 78%,var(--acc)));position:relative;gap:5px;padding:10px 22px}
.mbrands{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);position:relative;z-index:1;background:var(--surf2);backdrop-filter:none;padding:0 22px}
.ptab span{display:block;font:800 12px/1.2 var(--mono);color:var(--ink2);background:var(--surf3);border-bottom:1.5px solid var(--line2);white-space:nowrap;transition:.15s;padding:8px 3px;letter-spacing:0}
.ptab b{margin-top:5px;display:block;font-weight:900;letter-spacing:-.025em;white-space:nowrap;transition:.15s;padding:9px 3px}
.clist.fx-table .crow-head{display:grid;grid-template-columns:52px minmax(0,1fr) 100px 84px 84px 84px 84px 100px 112px}
.clist.fx-table .crow{padding:9px 16px;gap:12px;grid-template-columns:52px minmax(0,1fr) 100px 84px 84px 84px 84px 100px 112px}
.demo .pk{position:relative;display:flex;align-items:center}
.demo .pk-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;background:rgba(255,255,255,.08);color:#E6EBF3;font:700 12.5px/1 var(--mono)}
.demo .pk-btn:hover{background:rgba(255,255,255,.16);color:#fff}
.demo .pk-btn i{width:18px;height:18px;border-radius:6px;background:var(--acc);border:1.5px solid rgba(255,255,255,.5)}
.pk-pop{position:absolute;bottom:calc(100% + 12px);right:0;width:280px;background:var(--surf);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shL);padding:15px;display:none;z-index:210;text-align:left;color:var(--ink)}
.pk.on .pk-pop{display:block}
.pk-pop h6{margin:0 0 9px;font:800 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pk-sw{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.pk-sw button{width:28px;height:28px;border-radius:9px;border:2px solid transparent;padding:0;transition:.15s}
.pk-sw button:hover{transform:scale(1.12)}
.pk-sw button.on{border-color:var(--ink)}
.pk-row{display:flex;gap:7px;align-items:center}
.pk-hex{flex:1;min-width:0;border:1.5px solid var(--line2);border-radius:9px;padding:9px 11px;font:800 13px/1 var(--mono);text-transform:uppercase;outline:none;background:var(--surf2);color:var(--ink)}
.pk-hex:focus{border-color:var(--acc);background:var(--surf)}
.pk-hex.bad{border-color:var(--dan);background:var(--dan-soft)}
.pk-nat{width:38px;height:38px;flex:none;padding:0;border:0;background:none;cursor:pointer}
.pk-nat::-webkit-color-swatch-wrapper{padding:0}
.pk-nat::-webkit-color-swatch{border-radius:10px;border:1.5px solid var(--line2)}
.pk-nat::-moz-color-swatch{border-radius:10px;border:1.5px solid var(--line2)}
.pk-act{display:flex;gap:7px;margin-top:11px}
.pk-act button{padding:9px 12px;border-radius:9px;border:1.5px solid var(--line2);background:var(--surf);font-weight:800;font-size:12.5px;transition:.16s;white-space:nowrap;color:var(--ink)}
.pk-act button:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.pk-der{display:flex;gap:7px;align-items:center;padding:9px 11px;border-radius:10px;background:var(--surf2);margin-top:12px;font:700 9.5px/1 var(--mono);color:var(--muted)}
.pk-der i{width:20px;height:20px;border-radius:6px;flex:none;border:1px solid var(--line2)}
.pk-err{font-size:11.5px;color:var(--dan);margin-top:9px;display:none;line-height:1.4}
.pk-err.on{display:block}
html[data-mode="dark"] .pk-pop{background:var(--surf2)}
nav.main{display:flex;height:100%;min-width:0;order:2;margin:0}
.search{align-items:center;gap:9px;background:var(--surf2);border:1px solid transparent;padding:9px 14px;border-radius:999px;transition:width .28s cubic-bezier(.2,.7,.2,1),background .2s,border-color .2s;order:3;flex:1 1 auto;min-width:140px;margin-left:16px}
.tools{display:flex;align-items:center;gap:8px;min-width:0;order:4;margin-left:0}
.lang{display:inline-flex;background:var(--surf2);border:1px solid var(--line);border-radius:999px;padding:3px;flex:none}
.lang button{padding:8px 13px;border-radius:999px;font:800 12px/1 var(--mono);color:var(--muted);transition:.16s}
.lang button:hover{color:var(--ink)}
.lang button.on{background:var(--acc);color:#fff}
header:not(.solid) .lang{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
header:not(.solid) .lang button{color:rgba(255,255,255,.8)}
header:not(.solid) .lang button.on{background:#fff;color:var(--ink)}
html[data-mode="dark"] .lang{background:var(--surf3)}
.pc-th{display:grid;place-items:center;background:var(--surf2);position:relative;aspect-ratio:1;overflow:hidden;border-radius:14px;flex:1 1 auto;min-height:0;isolation:isolate}
.ptab{flex:none;display:grid;border:1.5px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--surf);grid-template-columns:repeat(4,1fr);margin-inline:auto}
.pc-foot .qty button{font-size:15px}
.pc-foot .qty input{font-size:13.5px}
.pc-th .tint{position:absolute;inset:0;opacity:0;mix-blend-mode:color;transition:.3s;pointer-events:none;z-index:1}
.pc-acts.pin{opacity:1;transform:none}
.cdrop{position:absolute;top:0;right:calc(100% + 9px);width:186px;background:var(--surf);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shL);padding:6px;display:none;z-index:9;text-align:left;cursor:default;max-height:248px;overflow-y:auto}
.cdrop.on{display:block}
.cdrop>b{display:block;font:800 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:5px 6px 8px}
.pc-acts .cdrop button{display:flex;width:100%;height:auto;align-items:center;border-radius:9px;font-size:12.5px;font-weight:700;text-align:left;border:0;background:none;justify-content:flex-start;transition:.14s;color:var(--ink);padding:4px;gap:9px}
.pc-acts .cdrop button:hover{background:var(--acc-soft);color:var(--acc);border:0}
.pc-acts .cdrop button.on{background:var(--acc);color:#fff}
.cthumb{position:relative;width:34px;height:34px;border-radius:8px;overflow:hidden;flex:none;border:1px solid var(--line);isolation:isolate}
.cthumb img{width:100%;height:100%;object-fit:cover}
.cthumb s{position:absolute;inset:0;mix-blend-mode:color;text-decoration:none}
.cdrop small{display:block;font:600 9.5px/1 var(--mono);color:var(--muted);margin-top:3px}
.cdrop button.on small{color:rgba(255,255,255,.75)}
html[data-mode="dark"] .cdrop{background:var(--surf2)}
.mdrop{position:absolute;top:0;right:calc(100% + 9px);width:210px;background:var(--surf);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shL);padding:6px;display:none;z-index:9;text-align:left;cursor:default;max-height:248px;overflow-y:auto}
.mdrop.on{display:block}
.mdrop>b{display:block;font:800 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:5px 6px 8px}
.pc-acts .mdrop button{display:flex;width:100%;height:auto;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;font-size:12.5px;font-weight:700;text-align:left;border:0;background:none;justify-content:space-between;transition:.14s;color:var(--ink)}
.pc-acts .mdrop button:hover{background:var(--acc-soft);color:var(--acc);border:0}
.pc-acts .mdrop button.on{background:var(--acc);color:#fff}
.mdrop button small{font:700 9.5px/1 var(--mono);color:var(--muted);flex:none}
.mdrop button.on small{color:rgba(255,255,255,.78)}
.pc-acts .mdrop button.all{justify-content:center;color:var(--acc);font-size:11.5px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;margin-top:4px;padding-top:9px}
html[data-mode="dark"] .mdrop{background:var(--surf2)}
.pc-model{display:flex;align-items:center;gap:6px;margin-top:-3px;padding:6px 10px;border-radius:9px;background:var(--surf2);border:1px dashed var(--line2);font:700 11px/1 var(--mono);color:var(--muted);width:max-content;max-width:100%;cursor:pointer;transition:.16s}
.pc-model:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.pc-model.set{border-style:solid;border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.pc-model span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(33,89,232,.15)}
.mnav{display:none}
.msearch{display:none}
.mbar{display:none}
.drawer{display:none}
.dveil{display:none}
.mfilt{display:none}
.vpwrap{position:fixed;inset:0;z-index:400;background:rgba(8,12,22,.82);backdrop-filter:blur(6px);display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px}
.vpwrap.on{display:flex}
.vpbar{display:flex;align-items:center;gap:8px;color:#fff;font:700 13px/1 system-ui}
.vpbar button{padding:9px 14px;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-weight:800;font-size:12.5px;transition:.16s}
.vpbar button:hover{background:rgba(255,255,255,.24)}
.vpbar button.on{background:var(--acc)}
.vpbar .x{margin-left:6px;background:rgba(255,255,255,.2)}
.vpdev{background:#0B0F1A;border-radius:34px;padding:10px;box-shadow:0 40px 90px -30px #000;max-height:calc(100vh - 120px);display:flex}
.vpdev iframe{border:0;border-radius:26px;background:#fff;display:block;max-height:calc(100vh - 140px)}
html[data-framed] .demo{display:none !important}
html[data-framed] .vpwrap{display:none !important}


/* ==========================================================================
   АДАПТИВ · ≤1340
   ========================================================================== */
@media(max-width:1340px){
  .search{}
}


/* ==========================================================================
   АДАПТИВ · ≤1180
   ========================================================================== */
@media(max-width:1180px){
  .search{}
}


/* ==========================================================================
   АДАПТИВ · ≤1499
   ========================================================================== */
@media(max-width:1499px){
  .cat-grid{}
}


/* ==========================================================================
   @media(max-width:1000px)
   ========================================================================== */
@media(max-width:1000px){
  .cat-grid{}
}


/* ==========================================================================
   АДАПТИВ · ≤1640 — дуже широкий десктоп стискається
   ========================================================================== */
@media(max-width:1640px){
  .grid{}
  .carou{}
}


/* ==========================================================================
   @media(max-width:900px)
   ========================================================================== */
@media(max-width:900px){
  .cat-grid{}
  .brands{}
  .promo{grid-template-columns:1fr}
  .dealer{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr}
  .search{}
  .gal{}
  .grid{}
  .carou{}
}


/* ==========================================================================
   АДАПТИВ · ≤1100
   ========================================================================== */
@media(max-width:1100px){
  .prod{}
}


/* ==========================================================================
   АДАПТИВ · ≤1600
   ========================================================================== */
@media(max-width:1600px){
  .search{}
}


/* ==========================================================================
   АДАПТИВ · ≤1400
   ========================================================================== */
@media(max-width:1400px){
  .grid{}
  .brands{}
  .cols{columns:4}
  .mlist{columns:5}
  .prod{gap:32px}
  .search{}
}


/* ==========================================================================
   АДАПТИВ · ≤1240
   ========================================================================== */
@media(max-width:1240px){
  .brands{}
  .cols{columns:3}
  .mlist{columns:4}
  .buybox{position:static}
  .side{position:static}
  .order{position:static;margin-top:16px}
  .grid{}
  .cat-layout{}
  .cat-grid{}
  .carou{}
  .prod{}
  .pick .lbl{display:none}
  .clist.fx-row .crow{grid-template-areas:none}
  .clist.fx-wide .crow{grid-template-columns:72px minmax(0,1fr);grid-template-areas:none;gap:10px}
  .clist.fx-row .crow>*:nth-child(n+3){grid-column:1/-1}
  .clist.fx-wide .crow>*:nth-child(n+3){grid-column:1/-1}
  .clist.fx-table .crow-head{display:none}
  .pc-row{flex-wrap:wrap}
  .ptab{}
}


/* ==========================================================================
   АДАПТИВ · ≤1320
   ========================================================================== */
@media(max-width:1320px){
  .pc-price{order:-1;flex:1 0 100%;text-align:left;margin-bottom:3px}
  .pc-price .disc{margin-left:0}
  .pc-price .per{display:inline;margin-left:5px}
  .pc-price .opt{display:inline}
  .pc-foot .add{}
}


/* ==========================================================================
   АДАПТИВ · ≤1500 — вужчий десктоп
   ========================================================================== */
@media(max-width:1500px){
  .nav-link{padding-left:12px;padding-right:12px}
  .cat-layout{}
  .cat-grid{}
  .search{}
  .search.open{}
  .clist.fx-row .crow{}
  .ptab{}
  .pc-price .opt{}
  .ptab b{}
  .ptab span{}
  .pc-foot .qty button{}
  .pc-foot .qty input{}
  .pc-foot .add{}
  .clist.fx-table .crow{grid-template-columns:46px minmax(0,1fr) 88px 76px 76px 76px 76px 92px 104px;gap:8px}
  .clist.fx-table .crow-head{grid-template-columns:46px minmax(0,1fr) 88px 76px 76px 76px 76px 92px 104px;gap:8px}
}


/* ==========================================================================
   АДАПТИВ · ≤1560
   ========================================================================== */
@media(max-width:1560px){
  .pc-foot .add{}
  .ptab span{}
  .ptab b{}
  .ptab{}
}


/* ==========================================================================
   СЕНСОРНІ ЕКРАНИ — прибираємо hover-ефекти
   ========================================================================== */
@media(hover:none){
  .pc:hover{transform:none;box-shadow:var(--sh)}
  .pc:hover .pc-th .ph.a{opacity:1;transform:none}
  .pc:hover .pc-th .ph.b{opacity:0}
}


/* ==========================================================================
   АДАПТИВ · ≤1440 — ноутбук
   ========================================================================== */
@media(max-width:1440px){
  .wrap{width:min(100% - 30px,var(--wrap))}
  .sec{padding:38px 0}
}


/* ==========================================================================
   АДАПТИВ · ≤1280 — планшет-альбом: 3 плитки, бічні колонки складаються
   ========================================================================== */
@media(max-width:1280px){
  .grid{}
  .cat-grid{}
  .cat-layout{}
  .cat-layout:not(.ckwrap) .order{display:none}
  .carou{}
  .hero{min-height:520px}
}


/* ==========================================================================
   АДАПТИВ · ≤359 — вузький телефон: одна плитка в ряд
   ========================================================================== */
@media(max-width:359px){
  .grid{}
  .cat-grid{}
  .carou-track>.pc{flex:0 0 82vw}
  .pc-name{font-size:13.5px;min-height:0}
  .ptab span{}
  .ptab b{}
  .brands{}
  .hero{}
}


/* ==========================================================================
   АДАПТИВ · ≤1023 — ПЛАНШЕТ: бургер, шухляди (меню/фільтри/кошик)
   ========================================================================== */
@media(max-width:1023px){
  :root{--hdr:60px;--hdrAll:60px}
  .wrap{width:min(100% - 24px,var(--wrap))}
  nav.main{display:none}
  .panel{display:none !important}
  .mnav{display:grid}
  .search{order:3;flex:1 1 auto;margin-left:10px;min-width:120px}
  .tools{gap:7px}
  .tools .icn{width:40px;height:40px}
  .cat-layout .side{display:none}
  .cat-layout:not(.ckwrap) .order{display:none}
  .mfilt{display:inline-flex}
  .grid{}
  .cat-grid{}
  .carou{}
  .buybox{position:static}
  .hero{height:auto;min-height:0}
  .sec{padding:30px 0}
  .demo{bottom:18px;max-width:min(94vw,560px)}
  .drawer{display:flex;position:fixed;top:0;bottom:0;left:0;width:min(88vw,340px);background:var(--surf);z-index:340;flex-direction:column;transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 60px -10px rgba(8,12,22,.5)}
  .drawer.on{transform:none}
  .dveil{display:block;position:fixed;inset:0;background:rgba(8,12,22,.52);z-index:335;opacity:0;visibility:hidden;transition:.25s}
  .dveil.on{opacity:1;visibility:visible}
  .drawer-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex:none}
  .drawer-h .x{margin-left:auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);font-size:16px}
  .drawer-b{flex:1;overflow-y:auto;padding:12px 12px calc(24px + env(safe-area-inset-bottom))}
  .dgrp{margin-bottom:6px}
  .dgrp>button{display:flex;width:100%;align-items:center;gap:10px;padding:12px 12px;border-radius:11px;font-size:14.5px;font-weight:700;text-align:left;transition:.14s}
  .dgrp>button:active{background:var(--acc-soft)}
  .dgrp>button u{margin-left:auto;font:700 11px/1 var(--mono);color:var(--muted);text-decoration:none}
  .dgrp>button i{font-style:normal;font-size:11px;color:var(--muted);transition:.2s}
  .dgrp.open>button{background:var(--acc-soft);color:var(--acc)}
  .dgrp.open>button i{transform:rotate(90deg)}
  .dsub{display:none;padding:2px 0 8px 12px;margin-left:12px;border-left:2px solid var(--line)}
  .dgrp.open .dsub{display:block}
  .dsub a{display:flex;padding:9px 10px;border-radius:9px;font-size:13.5px;gap:8px}
  .dsub a u{margin-left:auto;font:700 10.5px/1 var(--mono);color:var(--muted);text-decoration:none}
  .dsub a:active{background:var(--surf2)}
  .dsep{height:1px;background:var(--line);margin:10px 2px}
  .dlink{display:flex;align-items:center;gap:10px;padding:12px;border-radius:11px;font-size:14.5px;font-weight:700}
  .dlink:active{background:var(--surf2)}
  .drow{display:flex;gap:8px;padding:6px 2px 2px}
  .drow .lang{display:inline-flex}
  .drow .pick{display:inline-flex}
  .dfoot{margin-top:14px;padding:12px;border-radius:12px;background:var(--surf2);font-size:12.5px;color:var(--muted);line-height:1.6}
  .dfoot b{color:var(--ink);display:block;font-size:13.5px;margin-bottom:2px}
  .fdrawer{left:auto;right:0;transform:translateX(102%)}
  .fdrawer.on{transform:none}
  .drawer-b .side{display:block !important;position:static;width:auto;top:auto}
  .drawer-b .tree{margin-bottom:12px}
  .cdrawer{left:auto;right:0;transform:translateX(102%)}
  .cdrawer.on{transform:none}
  .drawer-b .order{display:block !important;position:static;width:auto;top:auto;border:0;background:none;padding:0}
  .prod{}
  .prod>div{min-width:0}
  .cat-layout{}
  .cat-layout>div{min-width:0}
}


/* ==========================================================================
   АДАПТИВ · ≤767 — ТЕЛЕФОН: скін застосунку, нижня панель, шторки
   ========================================================================== */
@media(max-width:767px){
  :root{--hdr:56px;--hdrAll:56px;--r:14px;--r-s:10px}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  input{font-size:16px}
  select{font-size:16px}
  textarea{font-size:16px}
  .bar{height:56px}
  nav.main{display:none}
  .panel{display:none !important}
  .search{}
  .logo{order:1;margin:0;gap:8px}
  .logo-mark{width:32px;height:32px;border-radius:8px}
  .logo-t b{font-size:17px}
  .logo-t span{display:none}
  .mnav{display:grid;order:0}
  .msearch{display:grid;order:2;margin-left:auto}
  .tools{order:4;gap:6px;margin:0}
  .tools .icn{display:none}
  .tools .pick{display:none}
  .tools .lang{display:none}
  .cart small{display:none}
  .search.open{display:flex;position:fixed;left:10px;right:10px;top:9px;bottom:auto;max-width:none;height:44px;transform:none;z-index:330;border-radius:12px}
  .sveil{z-index:325}
  .sbox{top:62px;z-index:326}
  .sbox-in{width:min(100% - 20px,560px);padding:16px;border-radius:16px}
  .sbox .row{gap:6px;margin-bottom:12px}
  .sbox h6{font-size:9.5px}
  .mbar-in{display:grid;grid-template-columns:repeat(4,1fr)}
  .mbar a.on{color:var(--acc)}
  .mbar .bdg{position:absolute;top:3px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--dan);color:#fff;font:800 9.5px/17px var(--mono);text-align:center;border:2px solid var(--surf)}
  .hero .bphoto{object-position:center}
  .carou-vp{overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0 8px;margin:0}
  .carou-vp::-webkit-scrollbar{display:none}
  .carou-track{transform:none !important;will-change:auto !important;transition:none !important;gap:10px;padding-right:10px}
  .carou-btns{display:none}
  .carou-bar{display:none}
  .brands{gap:8px}
  .cat-layout{gap:12px}
  .cat-layout .side{display:none}
  .cat-layout:not(.ckwrap) .order{display:none}
  .order-show{display:none}
  .toolbar .lbl{display:none}
  .toolbar .sel{flex:1;min-width:0;padding:9px 10px;font-size:13px}
  .vtog{display:none}
  .pager{gap:5px}
  .grid{}
  .cat-grid{}
  .pc-top{height:34px;padding:0 9px;border-radius:9px;font-size:9px}
  .timer.xs .u b{min-width:22px;height:19px;font-size:11px;border-width:1.5px}
  .timer.xs .u span{font-size:5.5px}
  .timer.xs .cl{font-size:11px;line-height:19px}
  .pc:hover{transform:none;box-shadow:var(--sh)}
  .pc-th .ph{border-radius:12px}
  .pc-th .tint{border-radius:12px}
  .pc-model{font-size:9.5px;padding:5px 8px;gap:4px;border-radius:8px}
  .stock{gap:5px}
  .stock i{width:6px;height:6px}
  .stock i::after{inset:-3px;border-width:1.5px}
  .ptab button:nth-child(2n){border-right:0}
  .ptab button:nth-child(-n+2){border-bottom:1.5px solid var(--line2)}
  .pc-foot .pc-price{order:-1;flex:none;width:auto;text-align:left;margin:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .pc-foot .pc-price .per{display:inline;margin:0;font-size:10px}
  .pc-foot .pc-price .disc{display:inline-block;margin:0;font-size:11.5px;padding:2px 8px}
  .cdrop.on{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:min(66vh,470px);border-radius:20px 20px 0 0;z-index:320;padding:8px 12px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -20px 44px -22px rgba(15,23,42,.7);animation:sheetup .26s cubic-bezier(.2,.7,.2,1)}
  .mdrop.on{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:min(66vh,470px);border-radius:20px 20px 0 0;z-index:320;padding:8px 12px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -20px 44px -22px rgba(15,23,42,.7);animation:sheetup .26s cubic-bezier(.2,.7,.2,1)}
  .cdrop.on::before{content:"";display:block;width:42px;height:4px;border-radius:999px;background:var(--line2);margin:2px auto 12px}
  .mdrop.on::before{content:"";display:block;width:42px;height:4px;border-radius:999px;background:var(--line2);margin:2px auto 12px}
  .cdrop.on>b{font-size:10px;padding:0 6px 10px}
  .mdrop.on>b{font-size:10px;padding:0 6px 10px}
  .pc-acts .cdrop.on button{padding:11px 10px;font-size:14px;border-radius:11px}
  .pc-acts .mdrop.on button{padding:11px 10px;font-size:14px;border-radius:11px}
  .cdrop.on .cthumb{width:42px;height:42px}
  .cdrop.on small{font-size:11px}
  .mdrop.on button small{font-size:11px}
  .prod{gap:16px}
  .gal{gap:10px}
  .thumbs{flex-direction:row;overflow-x:auto;gap:8px;order:2;scrollbar-width:none}
  .thumbs::-webkit-scrollbar{display:none}
  .thumbs button{width:62px;flex:none}
  .bb-buy .qty button{height:38px;width:38px}
  .ladder-r{padding:10px 12px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{padding:12px 14px;font-size:13.5px;white-space:nowrap}
  .spec{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;gap:20px}
  .dform{flex-wrap:wrap}
  .dform input{width:100%;padding:12px 14px}
  .promo{grid-template-columns:1fr}
  .demo{left:10px;right:10px;bottom:calc(70px + env(safe-area-inset-bottom));transform:none;max-width:none;max-height:52vh;overflow-y:auto;padding:7px;gap:5px}
  .demo>b{display:none}
  .demo>button{padding:8px 11px;font-size:12px}
  .demo .fl{padding:8px 11px;font-size:12px}
  .demo .mode{padding:8px 11px;font-size:12px}
  .demo.mini{left:auto;right:10px;padding:6px;max-height:none;overflow:visible}
  .pk-pop{width:min(90vw,300px);right:0;bottom:calc(100% + 10px)}
  .harrow{display:none}
  .toast{left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));align-items:stretch}
  .tst{max-width:none}
  .gzoom{display:none}
  .bb-buy .qty{flex:1 1 0;min-width:0}
  .bb-buy .qty input{height:46px;width:auto;flex:1;min-width:0}
  .bb-buy .add{height:46px;flex:1;min-width:0}
  .crow-act .qty input{min-width:0}
  .subcats{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .fchips{gap:6px;margin-bottom:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .subcats::-webkit-scrollbar{display:none}
  .fchips::-webkit-scrollbar{display:none}
  .crumbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .crumbs::-webkit-scrollbar{display:none}
  .crumbs a{white-space:nowrap;flex:none}
  .crumbs span{white-space:nowrap;flex:none}
  .crumbs i{white-space:nowrap;flex:none}
  .drawer .pick .menu{top:auto;bottom:calc(100% + 8px)}
  .wrap{width:min(100% - 28px,var(--wrap))}
  .sec{padding:16px 0}
  .sec-head{margin-bottom:10px;gap:8px}
  .sec-title{font-size:17px;gap:7px}
  .sec-title .cnt{font-size:9px;padding:3px 6px;border-radius:6px}
  .sec-sub{font-size:12px;margin-top:2px}
  .more{border:0;background:none;padding:0;font-size:13px}
  .more:hover{background:none}
  #pg-home{padding-top:var(--hdrAll)}
  .bar .wrap{gap:10px}
  .cart{font-size:12.5px;gap:6px;width:42px;height:42px;padding:0;border-radius:14px;justify-content:center;flex:none}
  .cart .ic{width:auto;height:auto;background:none;font-size:19px}
  .cart .txt{display:none}
  .cart::after{content:attr(data-n);position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--dan);color:#fff;font:800 10px/18px var(--mono);text-align:center;border:2px solid var(--surf)}
  .cart:not([data-n])::after{display:none}
  .cart[data-n="0"]::after{display:none}
  .hero{margin:10px 14px 0;border-radius:20px;height:auto;min-height:0;max-height:none;box-shadow:0 12px 26px -20px rgba(15,23,42,.5)}
  .hdots{bottom:10px;gap:7px}
  .hdots i{width:7px;height:7px;border:0}
  .hdots i.on{width:20px}
  .bhint{padding:14px 16px;max-width:86%}
  .bhint b{font-size:13.5px;margin-bottom:6px}
  .bhint span{font-size:10.5px}
  .bhint code{font-size:10.5px;padding:5px 8px;margin-top:8px}
  .pc{border:0;border-radius:18px;padding:10px;gap:7px;box-shadow:0 1px 3px rgba(15,23,42,.07)}
  html[data-mode="dark"] .pc{box-shadow:0 1px 3px rgba(0,0,0,.5)}
  .pc-th{overflow:visible;border-radius:12px;aspect-ratio:1;flex:none}
  .badges{gap:4px;top:6px;left:6px}
  .bg{border-radius:6px;font-size:8.5px;padding:3px 8px}
  .pc-acts{opacity:1;transform:none;top:6px;right:6px;gap:4px}
  .pc-acts>button{border-radius:9px;width:29px;height:29px;font-size:12px;border:0;background:rgba(255,255,255,.92)}
  .pc-acts>button[title="Порівняти"]{display:none}
  .pc-acts>button[title="Швидкий перегляд"]{display:none}
  .pc-brand{letter-spacing:.03em;font-size:9px}
  .pc-name{line-height:1.35;font-size:12.5px;min-height:32px}
  .pc-meta{font-size:10.5px}
  .ptab{grid-template-columns:repeat(2,1fr);border:0;background:none;gap:5px;border-radius:0;overflow:visible}
  html[data-mode="dark"] .ptab{background:none}
  .ptab button{border-right:1.5px solid var(--line2);border:0 !important;border-radius:11px;background:var(--surf2);padding:6px 3px}
  html[data-mode="dark"] .ptab button{background:var(--surf3)}
  .ptab span{background:none;border:0;padding:0 0 2px;font:700 10px/1.3 var(--mono);color:var(--muted)}
  html[data-mode="dark"] .ptab span{background:none}
  .ptab b{padding:0}
  .ptab button:hover span{background:none}
  .ptab button.on{background:var(--acc)}
  .ptab button.on span{background:none;color:rgba(255,255,255,.85);border:0}
  .ptab button.on b{background:none;color:#fff}
  .pc-foot{flex-direction:column;align-items:stretch;gap:6px}
  .pc-foot .pc-price .opt{display:inline;font-size:17px}
  .pc-foot .qty{width:100%;justify-content:space-between;border:0;background:var(--surf2);border-radius:12px}
  html[data-mode="dark"] .pc-foot .qty{background:var(--surf3)}
  .pc-foot .qty button{font-size:16px}
  .pc-foot .qty input{flex:1;min-width:0;font-size:14px;background:none}
  .pc-foot .add{height:40px;border-radius:12px;font-size:13px}
  .toolbar{padding:8px;gap:8px;flex-wrap:wrap;border:0;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,.07)}
  .subcats a{font-size:12.5px;white-space:nowrap;flex:none;border:0;border-radius:999px;padding:8px 13px;box-shadow:0 1px 2px rgba(15,23,42,.06)}
  .fchip{font-size:11.5px;padding:6px 9px;white-space:nowrap;flex:none;border-radius:999px}
  .mfilt{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1.5px solid var(--acc);color:var(--acc);background:var(--acc-soft);font-weight:800;font-size:13px;flex:none;border-radius:11px}
  .tree{border-radius:14px}
  .side{border-radius:14px}
  .seo{padding:16px;font-size:13px;border:0;box-shadow:0 1px 3px rgba(15,23,42,.07)}
  .pager a{min-width:36px;height:36px;font-size:13px;border:0;box-shadow:0 1px 2px rgba(15,23,42,.06)}
  .gmain{order:1;aspect-ratio:1;max-width:none;border:0;box-shadow:0 1px 3px rgba(15,23,42,.07)}
  .buybox{position:static;padding:14px;border:0;box-shadow:0 1px 3px rgba(15,23,42,.07)}
  .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--surf) 88%,transparent);backdrop-filter:blur(16px);border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:none}
  .mbar a{display:flex;flex-direction:column;align-items:center;font:700 10px/1 system-ui;color:var(--muted);position:relative;transition:.16s;font-size:10px;gap:4px;padding:8px 0 7px}
  .mbar a i{font-style:normal;font-size:0;line-height:0;height:23px;display:flex;align-items:center}
  .mbar a svg{width:23px;height:23px}
  .dealer{grid-template-columns:1fr;border-radius:18px;padding:22px 18px}
  .br{height:60px;border:0;box-shadow:0 1px 2px rgba(15,23,42,.06)}
  .carou-track>.pc{scroll-snap-align:start;flex:0 0 max(45vw,155px)}
  .carou-track .pc-foot .qty{display:none}
  .carou-track .pc-foot .add{display:none}
  .carou-track .pc-name{font-size:11.5px;min-height:30px}
  .carou-track .ptab span{font-size:9px}
  .carou-track .ptab b{font-size:12.5px;padding-top:1px}
  .carou-track .pc-foot{gap:2px}
  .carou-track .pc-foot .pc-price{margin:0}
  .carou-track .pc-foot .pc-price .opt{font-size:16px}
  .carou-track .pc-meta{font-size:9.5px}
}


/***************************************************************************
   ПЕРЕКРИТТЯ, ЗАЛЕЖНІ ВІД ПОРЯДКУ МЕДІА — винесені окремо свідомо:
   порядок рядків тут відтворює порядок каскаду оригіналу для
   властивостей, що задаються в кількох медіазапитах одразу.
   ************************************************************************/
.search{display:flex}
@media(max-width:1400px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1400px){.brands{grid-template-columns:repeat(6,1fr)}}
@media(max-width:1240px){.brands{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.brands{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.search{display:none}}
@media(max-width:900px){.gal{grid-template-columns:1fr}}
@media(max-width:1340px){.search{max-width:200px}}
@media(max-width:1180px){.search{display:none}}
@media(max-width:1500px){.cat-layout{grid-template-columns:206px minmax(0,1fr) 288px}}
@media(max-width:1500px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
.grid{grid-template-columns:repeat(5,1fr)}
.grid{gap:18px}
@media(max-width:1640px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1240px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
.brands{grid-template-columns:repeat(8,1fr)}
.cat-layout{grid-template-columns:190px minmax(0,1fr) 276px}
.cat-grid{grid-template-columns:repeat(4,1fr)}
.cat-grid{gap:18px}
@media(max-width:1499px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1240px){.cat-layout{grid-template-columns:1fr}}
@media(max-width:1240px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
.carou{--per:5}
@media(max-width:1640px){.carou{--per:4}}
@media(max-width:1240px){.carou{--per:3}}
@media(max-width:900px){.carou{--per:2}}
@media(max-width:1240px){.prod{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1500px){.search{width:230px}}
@media(max-width:1500px){.search.open{width:380px}}
.search.open{width:auto}
.prod{grid-template-columns:minmax(0,1fr) 560px}
.gal{grid-template-columns:96px minmax(0,1fr)}
@media(max-width:1400px){.prod{grid-template-columns:minmax(0,1fr) 460px}}
@media(max-width:1100px){.prod{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1600px){.search{width:420px}}
@media(max-width:1400px){.search{width:320px}}
.clist.fx-row .crow{grid-template-columns:76px minmax(0,1fr) 112px 296px 104px 232px}
@media(max-width:1500px){.clist.fx-row .crow{grid-template-columns:68px minmax(0,1fr) 100px 260px 96px 210px}}
@media(max-width:1500px){.clist.fx-row .crow{gap:10px}}
@media(max-width:1240px){.clist.fx-row .crow{grid-template-columns:72px minmax(0,1fr)}}
@media(max-width:1240px){.clist.fx-row .crow{gap:10px}}
@media(max-width:1500px){.ptab{width:126px}}
@media(max-width:1500px){.pc-price .opt{font-size:23px}}
@media(max-width:1240px){.ptab{width:100%}}
@media(max-width:1500px){.ptab b{font-size:15px}}
@media(max-width:1500px){.ptab span{font-size:10px}}
@media(max-width:1500px){.pc-foot .qty button{width:29px}}
@media(max-width:1500px){.pc-foot .qty button{height:29px}}
@media(max-width:1500px){.pc-foot .qty input{width:34px}}
@media(max-width:1500px){.pc-foot .qty input{height:38px}}
@media(max-width:1500px){.pc-foot .add{flex:0 1 146px}}
@media(max-width:1500px){.pc-foot .add{min-width:114px}}
.pc-foot .qty button{height:32px}
.pc-foot .qty input{height:40px}
.pc-price .opt{font-size:20px}
@media(max-width:1560px){.pc-foot .add{width:106px}}
@media(max-width:1320px){.pc-foot .add{flex:1}}
@media(max-width:1320px){.pc-foot .add{width:auto}}
@media(max-width:1320px){.pc-foot .add{min-width:120px}}
@media(max-width:1320px){.pc-foot .add{max-width:150px}}
.pc-foot .add{flex:1}
.pc-foot .add{width:auto}
.pc-foot .add{min-width:118px}
.pc-foot .add{max-width:152px}
.ptab span{font-size:14px}
.ptab b{font-size:18px}
@media(max-width:1560px){.ptab span{font-size:12.5px}}
@media(max-width:1560px){.ptab b{font-size:16px}}
.search{width:auto}
.search{max-width:none}
.ptab{width:88%}
@media(max-width:1560px){.ptab{width:94%}}
.pc-foot .qty button{width:32px}
.pc-foot .qty input{width:36px}
@media(max-width:1280px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1280px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1280px){.cat-layout{grid-template-columns:200px minmax(0,1fr)}}
@media(max-width:1280px){.carou{--per:3}}
@media(max-width:1023px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1023px){.grid{gap:14px}}
@media(max-width:1023px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1023px){.cat-grid{gap:14px}}
@media(max-width:1023px){.carou{--per:3}}
@media(max-width:1023px){.hero{aspect-ratio:16/10}}
@media(max-width:767px){.search{display:none}}
@media(max-width:767px){.search.open{width:auto}}
@media(max-width:767px){.brands{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.cat-layout{grid-template-columns:1fr}}
@media(max-width:767px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.grid{gap:10px}}
@media(max-width:767px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.cat-grid{gap:10px}}
@media(max-width:767px){.ptab{width:100%}}
@media(max-width:767px){.ptab span{font-size:11px}}
@media(max-width:767px){.pc-foot .qty input{width:auto}}
@media(max-width:767px){.pc-foot .add{width:100%}}
@media(max-width:767px){.pc-foot .add{max-width:none}}
@media(max-width:767px){.pc-foot .add{min-width:0}}
@media(max-width:767px){.pc-foot .add{flex:none}}
@media(max-width:767px){.prod{grid-template-columns:1fr}}
@media(max-width:767px){.gal{grid-template-columns:1fr}}
@media(max-width:359px){.grid{grid-template-columns:1fr}}
@media(max-width:359px){.grid{gap:10px}}
@media(max-width:359px){.cat-grid{grid-template-columns:1fr}}
@media(max-width:359px){.cat-grid{gap:10px}}
@media(max-width:359px){.ptab span{font-size:12px}}
@media(max-width:359px){.ptab b{font-size:17px}}
@media(max-width:359px){.brands{grid-template-columns:1fr}}
@media(max-width:359px){.hero{aspect-ratio:3/4}}
@media(max-width:1023px){.prod{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1023px){.cat-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:767px){.hero{aspect-ratio:16/10}}
@media(max-width:767px){.ptab b{font-size:14px}}
@media(max-width:767px){.pc-foot .qty button{width:36px}}
@media(max-width:767px){.pc-foot .qty button{height:36px}}
@media(max-width:767px){.pc-foot .qty input{height:36px}}

/* ================= container queries ================= */
@container (min-width:312px){
  .pc-foot .pc-price{order:0;flex:1 1 0;min-width:58px;text-align:center;margin:0}
  .pc-foot .pc-price .opt{display:block}
  .pc-foot .pc-price .per{display:block;margin-left:0;margin-top:2px}
  .pc-foot .pc-price .disc{margin:0 auto 3px}
  .pc-foot .add{flex:none;width:114px;min-width:0;max-width:none}
}

/* ================= keyframes ================= */
@keyframes pp{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}
@keyframes bzoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes sdrop{from{opacity:0;transform:translateY(-8px)}}
@keyframes shine{to{transform:translateX(120%)}}
@keyframes blip{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes tgt{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes landing{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes sheetup{from{transform:translateY(100%)}}

/* ==========================================================================
   kmt5v2 — довески поверх макета: іконки з макета були SVG, у нас поки
   емодзі (design.js), тож .mbar a i{font-size:0} їх ховав — компенсуємо.
   ========================================================================== */
.mbar a .mbi{font-size:19px;line-height:1;display:block;font-style:normal}

/* Мега-меню «Асортимент»: наведення на рубрику зліва ховає непідходящі категорії справа
   (логіку див. design.js) */
.js-mega-menu .is-hidden{visibility:hidden}
.rail a.is-active{background:var(--acc);color:#fff;transform:translateX(3px);box-shadow:0 8px 18px -8px var(--acc);font-weight:700}
.rail a.is-active b{color:rgba(255,255,255,.8)}

/* Блок переваг («Великий асортимент» / «Швидка доставка» тощо) — цього блоку немає в
   макеті new_design, контент реальний (адмінка), стиль мінімальний під загальну систему */
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.usp-i{padding:18px 20px;border-radius:16px;background:var(--surf);border:1px solid var(--line)}
.usp-i b{display:block;font-size:15px;font-weight:800;margin-bottom:6px}
.usp-i span{display:block;font-size:13px;color:var(--muted);line-height:1.5}
@media(max-width:900px){.usp{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.usp{grid-template-columns:1fr}}

/* kmt5v2: модалка логін/реєстрація/забув пароль (спільна оболонка, вміст підмінюється аяксом) */
.authov{position:fixed;inset:0;z-index:200;background:rgba(8,14,28,.5);opacity:0;visibility:hidden;
  transition:.2s;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
.authov.on{opacity:1;visibility:visible}
.authbox{background:var(--surf);border-radius:20px;box-shadow:var(--shL);width:100%;max-width:420px;
  padding:32px 30px;position:relative;transform:translateY(10px);transition:.2s;margin:auto}
.authov.on .authbox{transform:none}
.authclose{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;display:grid;
  place-items:center;color:var(--muted);font-size:15px;transition:.16s}
.authclose:hover{background:var(--surf2);color:var(--ink)}
.authbox h2{margin:0 0 18px;font-size:19px;font-weight:900;letter-spacing:-.02em;padding-right:20px}
.authbox p{margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.6}
.afield{margin-bottom:12px}
.afield input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13.5px;background:var(--surf2)}
.afield input:focus{outline:none;border-color:var(--acc);background:var(--surf)}
.afield.err input{border-color:var(--dan);background:var(--dan-soft)}
.afield .fe{color:var(--dan);font-size:12px;margin-top:5px}
.aflinks{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;margin:2px 0 18px}
.aflinks a{color:var(--acc);font-weight:600}
.aflinks a:hover{text-decoration:underline}
.afoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap}
.afoot a{font-size:12.5px;color:var(--ink2);font-weight:600}
.afoot a:hover{color:var(--acc)}
@media(max-width:480px){.authbox{padding:26px 20px}}

/* kmt5v2: курс валюти в шапці (як у старому дизайні - тільки для залогінених) */
.rate-badge{display:flex;align-items:center;gap:5px;height:40px;padding:0 13px;border-radius:10px;
  border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap;flex:none;cursor:default;user-select:none}
.rate-badge b{color:var(--ink);font-weight:800}
header:not(.solid) .rate-badge{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(10,18,36,.34)}
header:not(.solid) .rate-badge b{color:#fff}
@media(max-width:900px){.rate-badge{display:none}}

/* kmt5v2: карта сайту */
.sitemap-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.sitemap-cols .prose{max-width:none;margin:0}
.sitemap-cols .prose ul ul{margin-top:8px}
@media(max-width:800px){.sitemap-cols{grid-template-columns:1fr}}

/* kmt5v2: мега-меню "Прайси" - те саме дерево категорій, що й "Асортимент" (.rail/.cols/.colw/.grp
   вже стилізовані вище), тут лише іконка завантаження біля кожного пункту */
.panel.prices .rail a::after,
.panel.prices .grp a::after{content:"⬇";margin-left:auto;padding-left:10px;font-size:11px;color:var(--muted);flex:none}
.panel.prices .grp a.grp-h{display:flex;align-items:center;justify-content:space-between}
.panel.prices .grp a:hover::after{color:inherit}

/* kmt5v2: анімація "коробка" при доданні товару (як у макеті new_design) */
.fly{position:fixed;z-index:300;pointer-events:none;display:grid;place-items:center;will-change:transform,opacity;width:44px;height:44px}
.fly svg{width:100%;height:100%;filter:drop-shadow(0 14px 26px rgba(15,23,42,.45))}
.add.land{animation:landing .45s cubic-bezier(.3,1.5,.5,1);box-shadow:0 0 0 6px var(--acc-soft)}
@keyframes landing{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}