/* Alex_bes😈 — patriotic UA theme (flag blue #0057B7 + yellow #FFD700, вишиванка ornament). Previous theme: css/style.prev.css */
:root{
  --bg:#062457; --bg2:#051d47; --surface:#0a2c66; --surface2:#0f3a80; --line:#2a5aa8;
  --blue:#0057b7; --blue2:#1a73e0; --yellow:#ffd700; --yellow2:#f5c400; --yellow-hi:#ffe54d;
  --text:#ffffff; --text2:#e3ecfb; --muted:#b4c7e6; --navy-text:#062457;
  --orn-band:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2713%27 viewBox=%270 0 20 13%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%270%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%272%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%274%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%276%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%278%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2710%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2712%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2714%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2716%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2718%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%276%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2710%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2714%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%279%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2711%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%278%27 y=%274%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2710%27 y=%274%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%2712%27 y=%274%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%270%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%277%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%279%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%2711%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%2713%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%270%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%271%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%276%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%278%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%2710%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2712%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%2714%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2719%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%270%27 y=%277%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%277%27 y=%277%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%279%27 y=%277%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%2711%27 y=%277%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%2713%27 y=%277%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%278%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2710%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%239cc8ff%27/%3E%3Crect x=%2712%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%279%27 y=%279%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2711%27 y=%279%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%276%27 y=%2710%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2710%27 y=%2710%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2714%27 y=%2710%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%270%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%272%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%274%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%276%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%278%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2710%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2712%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2714%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2716%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%2718%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3C/svg%3E");
  --orn-div:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%275%27 viewBox=%270 0 10 5%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%272%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%271%27 y=%271%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%272%27 y=%271%27 width=%271%27 height=%271%27 fill=%27%235aa2ff%27/%3E%3Crect x=%273%27 y=%271%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%277%27 y=%271%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%270%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%271%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%235aa2ff%27/%3E%3Crect x=%273%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%235aa2ff%27/%3E%3Crect x=%274%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%276%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%277%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%235aa2ff%27/%3E%3Crect x=%278%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%271%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%272%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%235aa2ff%27/%3E%3Crect x=%273%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%277%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3Crect x=%272%27 y=%274%27 width=%271%27 height=%271%27 fill=%27%23FFD700%27/%3E%3C/svg%3E");
  --radius:16px; --frame:linear-gradient(180deg,var(--blue2),var(--yellow));
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font:15px/1.5 var(--font);color:var(--text2);background:var(--bg);
  background-image:radial-gradient(900px 500px at 10% -10%,rgba(18,70,160,.55),transparent 60%),
                   radial-gradient(700px 420px at 95% 0%,rgba(12,45,110,.5),transparent 60%),
                   radial-gradient(800px 500px at 50% 110%,rgba(150,115,0,.18),transparent 60%);
  background-attachment:fixed;min-height:100vh;padding-bottom:calc(68px + env(safe-area-inset-bottom))}
a{color:var(--yellow);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
.emo{font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;font-weight:400}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)} .small{font-size:13px}
[hidden]{display:none!important}

.uastripe{height:4px;background:linear-gradient(90deg,var(--blue) 50%,var(--yellow) 50%)}
/* header */
.hdr{position:sticky;top:0;z-index:40;background:rgba(8,18,38,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:16px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);min-width:0}
.brand:hover{text-decoration:none}
.brand__logo{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 2px var(--yellow),0 0 18px rgba(255,215,0,.35);flex:none}
.brand__txt{display:flex;flex-direction:column;min-width:0}
.brand__name{font-weight:800;font-size:21px;letter-spacing:.2px;white-space:nowrap;text-shadow:0 0 14px rgba(255,215,0,.35)}
.brand__sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{flex:1;max-width:460px;margin-left:auto}
.search input{width:100%;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:0 14px 0 38px;font:inherit;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a0b2ce' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
.search input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,215,0,.18)}
.hdr__nav{display:flex;align-items:center;gap:6px}
.hdr__nav a{color:var(--text2);padding:9px 12px;border-radius:10px;font-weight:600}
.hdr__nav a:hover,.hdr__nav a.on{background:var(--surface2);text-decoration:none;color:var(--text)}
.cartbtn{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:12px;border:0;font-weight:700;color:var(--navy-text);
  background:linear-gradient(180deg,var(--yellow-hi),var(--yellow2));box-shadow:0 4px 16px rgba(255,215,0,.25)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--blue);color:#fff;font-size:12px;line-height:20px;text-align:center;font-weight:800}
.cartbtn .badge{position:absolute;top:-7px;right:-7px;box-shadow:0 0 0 2px var(--bg)}

/* intro + chips */
.main{padding-top:18px}
.intro h1{margin:6px 0 2px;color:var(--text);font-size:28px}
.intro p{margin:0 0 14px;color:var(--muted)}
.chips{display:none;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;margin:0 -16px;padding-left:16px;padding-right:16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--text2);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;white-space:nowrap}
.chip.on{background:linear-gradient(180deg,var(--yellow-hi),var(--yellow2));color:var(--navy-text);border-color:transparent}
.chip small{opacity:.7;margin-left:4px}

/* layout */
.layout{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
.side{position:sticky;top:96px;background:var(--surface);border-radius:var(--radius);padding:14px;border:1px solid var(--line)}
.side__ttl{margin:2px 6px 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:10px;color:var(--text2);font-weight:600;font-size:14.5px}
.side li a:hover{background:var(--surface2);text-decoration:none}
.side li a.on{background:linear-gradient(90deg,rgba(0,110,230,.35),rgba(255,215,0,.12));color:var(--text);box-shadow:inset 3px 0 0 var(--yellow)}
.side li a span.n{color:var(--muted);font-weight:500}
.side__card{margin-top:14px;padding:12px;border-radius:12px;background:var(--surface2);display:flex;flex-direction:column;gap:6px}
.side__card p{margin:0;color:var(--text)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.toolbar h2{margin:0;color:var(--text);font-size:20px}
.sort{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.sort select{height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:0 10px;font:inherit}

/* grid & cards */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{position:relative;border-radius:var(--radius);padding:2px;background:var(--frame);box-shadow:0 8px 26px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 22px rgba(255,215,0,.18)}
.card__in{height:100%;display:flex;flex-direction:column;background:var(--surface);border-radius:calc(var(--radius) - 2px);overflow:hidden}
.card__media{position:relative}
.card__img{position:relative;display:block;aspect-ratio:1/1;background:#0b1a3a;cursor:pointer;border:0;padding:0;width:100%}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__add{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;border:0;background:linear-gradient(180deg,var(--yellow-hi),var(--yellow2));color:var(--navy-text);font-size:24px;font-weight:800;line-height:40px;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.card__add:active{transform:scale(.92)}
.card__body{display:flex;flex-direction:column;gap:8px;padding:12px 12px 14px;flex:1}
.card__cat{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card__name{color:var(--text);font-weight:700;font-size:15px;line-height:1.3;cursor:pointer;background:none;border:0;padding:0;text-align:left;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__name:hover{color:var(--yellow)}
.card__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.pill{display:inline-flex;align-items:baseline;gap:4px;padding:5px 12px;border-radius:999px;font-weight:800;font-size:16px;color:var(--navy-text);
  background:linear-gradient(180deg,var(--yellow-hi),var(--yellow2));box-shadow:0 0 0 1px rgba(255,244,170,.6) inset,0 0 14px rgba(255,215,0,.25);white-space:nowrap}
.pill small{font-size:11.5px;font-weight:700;opacity:.8}
.pill--ask{background:transparent;color:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--yellow);font-size:13.5px}
.uah{font-size:12px;color:var(--muted);width:100%}
.stock{font-size:12.5px;font-weight:700;color:var(--yellow);display:inline-flex;align-items:center;gap:6px}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
.stock--ask{color:var(--muted)} .stock--ask::before{background:var(--muted);box-shadow:none}
.stock--way{color:#7cc4ff} .stock--way::before{background:#7cc4ff;box-shadow:0 0 8px #7cc4ff}
.empty{padding:30px;text-align:center;color:var(--muted);background:var(--surface);border-radius:var(--radius)}

/* how */
.how{padding-top:40px;padding-bottom:30px}
.how h2{color:var(--text);font-size:26px;margin:0 0 16px}
.how__bot{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(90deg,rgba(0,87,183,.25),rgba(255,215,0,.08));color:var(--text2)}
.how__bot .btn{flex:none}
.steps{list-style:none;counter-reset:s;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.steps li{counter-increment:s;position:relative;padding:18px 16px 16px 16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.steps li::before{content:counter(s);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--navy-text);background:linear-gradient(180deg,var(--yellow-hi),var(--yellow2))}
.steps b{color:var(--text);font-size:16px}
.how__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.how__card{border-radius:var(--radius);padding:2px;background:var(--frame)}
.how__card>*{margin:0}
.how__card h3{background:var(--surface);border-radius:14px 14px 0 0;padding:16px 16px 6px;color:var(--text)}
.how__card ul{background:var(--surface);border-radius:0 0 14px 14px;padding:6px 16px 16px;list-style:none}
.contacts li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.contacts li:last-child{border:0}
.contacts span{color:var(--muted)}
.contacts a{font-weight:700;text-align:right;word-break:break-all}
.facts li{padding:7px 0 7px 22px;position:relative}
.facts li::before{content:"✓";position:absolute;left:0;color:var(--yellow);font-weight:800}

/* footer */
.ftr{border-top:1px solid var(--line);background:rgba(8,18,38,.7);padding:22px 0 26px;margin-top:10px}
.ftr__in{display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:center}
.ftr__brand{margin:0;color:var(--text);font-weight:800;font-size:18px}
.ftr p{margin:0}
.ftr__links{display:flex;flex-wrap:wrap;gap:14px}
.ftr .small{grid-column:1/-1}

/* tabbar (mobile) */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(8,18,38,.96);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns:repeat(4,1fr)}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;font-weight:600;color:var(--text2);background:none;border:0;padding:4px 0}
.tabbar a:hover{text-decoration:none}
.tabbar span{position:relative;font-size:20px;line-height:1.1;font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif}
.tabbar .badge{position:absolute;top:-6px;right:-14px;font-family:var(--font)}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modal__bg{position:absolute;inset:0;background:rgba(2,6,18,.72);backdrop-filter:blur(3px)}
.modal__box{position:relative;width:min(940px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:20px;background:var(--surface);
  box-shadow:0 0 0 2px transparent,0 30px 80px rgba(0,0,0,.6);border:2px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--frame) border-box}
.modal--cart .modal__box{width:min(620px,100%);padding:20px}
.modal__x{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:rgba(8,18,38,.8);color:var(--text);font-size:17px}
.pm{display:grid;grid-template-columns:1fr 1fr}
.pm__img{background:#0b1a3a;aspect-ratio:1/1}
.pm__img img{width:100%;height:100%;object-fit:cover}
.pm__info{padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px}
.pm__cat{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pm h2{margin:0;color:var(--text);font-size:22px;line-height:1.25;padding-right:30px}
.pm__desc{margin:0;color:var(--text2)}
.pm__note{margin:0;font-size:12.5px;color:var(--muted);border-left:3px solid var(--blue2);padding-left:10px}
.pm__note a{color:var(--muted);text-decoration:underline}
.vars{display:flex;flex-wrap:wrap;gap:8px}
.var{border:1px solid var(--line);background:var(--surface2);color:var(--text2);border-radius:12px;padding:8px 12px;font-weight:600;font-size:14px;text-align:left}
.var b{display:block;color:var(--yellow);font-size:15px}
.var.on{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,215,0,.25)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface2)}
.qty button{width:38px;height:40px;border:0;background:none;color:var(--text);font-size:20px}
.qty input{width:44px;height:40px;border:0;background:none;color:var(--text);text-align:center;font:inherit;font-weight:700;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{display:none}
.pm__buy{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 18px;border-radius:12px;border:0;font-weight:800;font-size:15px;text-decoration:none!important}
.btn--y{color:var(--navy-text);background:linear-gradient(180deg,var(--yellow-hi),var(--yellow2));box-shadow:0 6px 18px rgba(255,215,0,.25)}
.btn--b{color:#fff;background:linear-gradient(180deg,#1a7cf0,var(--blue))}
.btn--bot{color:#fff;background:linear-gradient(135deg,#1686f5,var(--blue));box-shadow:0 6px 18px rgba(0,87,183,.35),inset 0 0 0 1px rgba(255,255,255,.12)}
.btn--bot:hover{filter:brightness(1.1);text-decoration:none}
.btn--o{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--full{width:100%}

/* cart */
#cart-ttl{margin:0 0 14px;color:var(--text);font-size:22px}
.citems{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.citem{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:14px;background:var(--surface2)}
.citem img{width:64px;height:64px;border-radius:10px;object-fit:cover}
.citem__n{color:var(--text);font-weight:700;font-size:14px;line-height:1.3}
.citem__v{font-size:12.5px;color:var(--muted)}
.citem__p{font-weight:800;color:var(--yellow);font-size:14px}
.citem__r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.citem .qty button{width:30px;height:32px;font-size:17px}.citem .qty input{width:30px;height:32px}
.rm{border:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline}
.ctotal{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;border-top:1px solid var(--line);margin-bottom:6px;color:var(--text)}
.ctotal b{font-size:22px;color:var(--yellow)}
.cnote{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.cform label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.cform .full{grid-column:1/-1}
.cform input,.cform textarea{border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--text);padding:10px 12px;font:inherit;outline:none}
.cform input:focus,.cform textarea:focus{border-color:var(--yellow)}
.cactions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cactions .btn--full{grid-column:1/-1}
.cempty{text-align:center;padding:26px 10px;color:var(--muted)}
.cempty .emo{font-size:40px;display:block;margin-bottom:6px}
details.preview{margin-top:12px;font-size:13px;color:var(--muted)}
details.preview pre{white-space:pre-wrap;background:var(--bg2);padding:10px;border-radius:10px;color:var(--text2);font:12.5px/1.45 ui-monospace,Menlo,Consolas,monospace}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;background:var(--yellow);color:var(--navy-text);font-weight:700;padding:11px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100% - 32px);text-align:center}

/* responsive */
@media (max-width:1024px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{display:none}
  .chips{display:flex}
  .hdr__nav a{display:none}
}
@media (max-width:760px){
  body{font-size:14.5px}
  .hdr__in{flex-wrap:wrap;gap:10px}
  .brand__logo{width:44px;height:44px}
  .brand__name{font-size:18px}
  .search{order:3;flex-basis:100%;max-width:none}
  .search input{height:40px}
  .cartbtn{display:none}
  .tabbar{display:grid}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .intro h1{font-size:23px}
  .intro p{font-size:13.5px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card__body{padding:10px 10px 12px;gap:6px}
  .card__name{font-size:13.5px}
  .card__cat{font-size:10.5px}
  .pill{font-size:14.5px;padding:4px 10px}
  .pill--ask{font-size:12px}
  .stock{font-size:11.5px}
  .card__foot{flex-direction:column;align-items:flex-start;gap:5px}
  .card__add{width:36px;height:36px;line-height:36px;font-size:22px;right:8px;bottom:8px}
  .toolbar h2{font-size:17px}
  .sort span{display:none}
  .steps{grid-template-columns:1fr}
  .how__bot{align-items:stretch;flex-direction:column}
  .how__grid{grid-template-columns:1fr}
  .ftr__in{grid-template-columns:1fr}
  .modal{padding:0;align-items:flex-end}
  .modal__box{max-height:92vh;border-radius:20px 20px 0 0}
  .pm{grid-template-columns:1fr}
  .pm__img{aspect-ratio:4/3}
  .pm__img img{object-fit:contain}
  .pm__info{padding:16px 16px 22px}
  .modal--cart .modal__box{padding:16px 14px calc(18px + env(safe-area-inset-bottom))}
  .cform{grid-template-columns:1fr}
  .cactions{grid-template-columns:1fr}
}

.more{display:block;margin:20px auto 0;min-width:240px}
.more[hidden]{display:none}
.stock--out{color:#ff8a80} .stock--out::before{background:#ff8a80;box-shadow:none}

/* TDS (technical data sheet) block */
.tdsb{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;font-size:10.5px;font-weight:800;letter-spacing:.04em;line-height:17px;vertical-align:1px;color:var(--navy-text);background:linear-gradient(180deg,var(--yellow-hi),var(--yellow2))}
.tds{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(14,33,72,.9),rgba(9,22,50,.9));box-shadow:inset 3px 0 0 var(--yellow)}
.tds summary{cursor:pointer;list-style:none;padding:10px 14px;font-weight:800;color:var(--yellow);font-size:15px}
.tds summary::-webkit-details-marker{display:none}
.tds summary::after{content:"▾";float:right;color:var(--muted)}
.tds:not([open]) summary::after{content:"▸"}
.tds__dl{margin:0;padding:0 14px 6px;display:grid;gap:0}
.tds__dl>div{display:grid;grid-template-columns:1fr;gap:1px;padding:6px 0;border-top:1px solid rgba(28,53,102,.7)}
.tds__dl dt{color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tds__dl dd{margin:0;color:var(--text2);font-size:13.5px;line-height:1.45}
.tds__src{margin:0;padding:8px 14px 12px;font-size:12.5px;color:var(--muted);border-top:1px solid rgba(28,53,102,.7)}
.tds__src a{color:var(--yellow);font-weight:700;text-decoration:underline}
@media (min-width:761px){.pm__img{position:sticky;top:0;align-self:start}}


/* ================= UA patriotic layer ================= */
body{background-color:var(--bg);
  background-image:radial-gradient(1000px 520px at 12% -12%,rgba(0,87,183,.75),transparent 62%),
                   radial-gradient(760px 460px at 96% -4%,rgba(0,87,183,.55),transparent 60%),
                   radial-gradient(900px 520px at 50% 112%,rgba(255,215,0,.14),transparent 60%)}
.uastripe{height:6px;background:linear-gradient(180deg,var(--blue) 50%,var(--yellow) 50%)}
.hdr{background:rgba(5,29,71,.94);border-bottom:0}
.hdr::after{content:"";position:absolute;left:0;right:0;top:100%;height:13px;background:var(--bg2) var(--orn-band) repeat-x center/auto 13px;
  border-bottom:2px solid var(--yellow);box-shadow:0 6px 14px rgba(0,0,0,.25);pointer-events:none}
.main{padding-top:30px}
html{scroll-padding-top:104px}
/* logo: flag ring around the green-framed badge */
.brand__logo{padding:3px;background:conic-gradient(from -90deg,var(--blue) 0 50%,var(--yellow) 50% 100%);box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 0 16px rgba(255,215,0,.35)}
.brand__name{text-shadow:none}
.brand__name .ua-y{color:var(--yellow)}
.search input{background-color:#fff;color:#0a1f45;border-color:transparent;box-shadow:inset 0 -3px 0 var(--yellow)}
.search input::placeholder{color:#5b6f92}
.search input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,215,0,.45)}
.hdr__nav a:hover,.hdr__nav a.on{background:var(--blue);color:#fff}
.cartbtn{background:var(--yellow);box-shadow:0 4px 16px rgba(255,215,0,.3)}
.cartbtn .badge{box-shadow:0 0 0 2px var(--bg2)}

/* hero: intro card (flag graphic removed) */
.intro{position:relative;overflow:hidden;border-radius:18px;padding:20px 22px 22px;margin-bottom:14px;
  background:linear-gradient(180deg,#0a63cc 0%,var(--blue) 58%,#004a9e 100%);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.intro::before{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--yellow-hi),var(--yellow),var(--yellow2))}
.intro h1,.intro p{position:relative;z-index:1}
.intro h1{color:#fff;margin:0 0 4px}
.intro p{color:#eaf2ff;margin:0}

/* chips & side */
.chip{background:var(--blue);border-color:#2f73d0;color:#fff}
.chip small{opacity:.8}
.chip.on{background:var(--yellow);color:var(--navy-text);border-color:var(--yellow)}
.side{background:var(--surface);border-color:var(--line);border-top:4px solid var(--yellow)}
.side li a.on{background:var(--yellow);color:var(--navy-text);box-shadow:none}
.side li a.on span.n{color:var(--navy-text)}
.side__card{background:var(--blue)}
.side__card a{color:var(--yellow)}
.sort select{background:var(--surface2)}

/* cards */
.card{--frame:linear-gradient(180deg,var(--blue2) 0 50%,var(--yellow) 50% 100%)}
.card__in{background:var(--surface)}
.card__img,.pm__img{background:#0b1a3a}
.card__add{background:var(--yellow);box-shadow:0 0 0 2px var(--blue),0 4px 12px rgba(0,0,0,.4)}
.card__cat{color:var(--muted)}
.pill{background:var(--yellow);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}
.pill--ask{background:rgba(0,87,183,.55);color:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--yellow)}
.stock{color:#ffe34d}
.stock--way{color:#9fd0ff}
.tdsb{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 1px var(--yellow)}

/* section dividers */
.how{position:relative;padding-top:58px}
.how::before{content:"";position:absolute;left:16px;right:16px;top:18px;height:15px;background:var(--orn-div) repeat-x center/auto 15px;opacity:.9}
.how::after{content:"";position:absolute;left:50%;top:14px;width:46px;height:23px;margin-left:-23px;border-radius:3px;background:linear-gradient(180deg,var(--blue) 50%,var(--yellow) 50%);box-shadow:0 0 0 4px var(--bg)}
.steps li{background:var(--surface);border-top:4px solid var(--yellow)}
.steps li:nth-child(even){border-top-color:var(--blue2)}
.how__card{--frame:linear-gradient(180deg,var(--blue2),var(--yellow))}

/* footer band */
.ftr{position:relative;background:linear-gradient(180deg,#0050a8,#003d82);border-top:0;padding:40px 0 26px;margin-top:24px}
.ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:var(--bg2) var(--orn-band) repeat-x center/auto 16px;border-top:3px solid var(--yellow);border-bottom:3px solid var(--yellow)}
.ftr .muted{color:#d2e1f7}
.ftr__links a{color:var(--yellow);font-weight:600}
.ftr__ua{grid-column:1/-1;margin:6px 0 0!important;padding:10px 14px;border-radius:12px;text-align:center;font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--navy-text);
  background:linear-gradient(180deg,var(--yellow-hi),var(--yellow))}

/* tabbar */
.tabbar{background:var(--blue);border-top:3px solid var(--yellow)}
.tabbar a,.tabbar button{color:#fff}
.tabbar a.on{color:var(--yellow)}
.tabbar .badge{background:var(--yellow);color:var(--navy-text)}

/* modal / cart accents */
.modal__bg{background:rgba(2,12,34,.75)}
.modal__box{--frame:linear-gradient(180deg,var(--yellow),var(--blue2) 45%)}
.modal__x{background:var(--yellow);color:var(--navy-text);font-weight:800}
.pm__info{position:relative;padding-top:30px}
.pm__info::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--bg2) var(--orn-band) repeat-x left center/auto 10px;border-bottom:2px solid var(--yellow)}
.var{background:var(--surface2)}
.var.on{border-color:var(--yellow);background:var(--blue)}
.btn--y{background:var(--yellow);box-shadow:0 6px 18px rgba(255,215,0,.22)}
.btn--b{background:var(--blue);box-shadow:inset 0 0 0 1.5px #3f86e0}
.btn--o{color:#fff;box-shadow:inset 0 0 0 1.5px #3f7fd6;background:rgba(0,87,183,.25)}
.btn--o:hover{box-shadow:inset 0 0 0 1.5px var(--yellow)}
#cart-ttl{padding-bottom:14px;background:var(--orn-div) repeat-x left bottom/auto 10px}
.citem{background:var(--surface2);box-shadow:inset 3px 0 0 var(--yellow)}
.tds{background:linear-gradient(180deg,rgba(15,58,128,.9),rgba(10,44,102,.9))}
.tds__dl>div,.tds__src{border-top-color:rgba(42,90,168,.7)}
.toast{background:var(--yellow);box-shadow:0 0 0 2px var(--blue),0 10px 30px rgba(0,0,0,.5)}

@media (max-width:760px){
  .hdr::after{height:11px;background-size:auto 11px}
  .main{padding-top:24px}
  .intro{padding:16px 16px 18px}
  .ftr::before{height:20px;background-size:auto 14px}
}
.side{top:112px}
.how__card{padding:0;border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--frame) border-box}

/* categories as a tile grid (all visible at once) */
.chips{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;margin:0;padding:4px 0 14px}
.chip{display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:normal;line-height:1.2;border-radius:14px;padding:10px 12px;font-size:13.5px;min-height:48px;text-align:left}
.chip small{flex:none;background:rgba(255,255,255,.16);border-radius:999px;padding:2px 8px;margin-left:0;font-size:12px;opacity:1}
.chip.on small{background:rgba(6,36,87,.15)}
.chip[data-cat="all"]{grid-column:1/-1;justify-content:center;gap:10px}
@media (min-width:600px){.chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:899px){.chips{display:grid}}
/* 04.10: перша плитка «Усі товари» — на всю ширину; непарна остання — теж, щоб сітка не мала «дірки» */
@media (max-width:599px){.chips>.chip:last-child:nth-child(even){grid-column:1/-1}}
@media (min-width:600px) and (max-width:899px){.chips>.chip:last-child:nth-child(3n+2){grid-column:1/-1}}

/* spray gun specs: compact 2-column table */
.specs__dl>div{grid-template-columns:minmax(118px,38%) 1fr;gap:10px;align-items:baseline;padding:5px 0}
.specs__dl dt{font-size:11px;letter-spacing:.03em}
.specs__dl dd{font-size:13px}
@media(max-width:420px){.specs__dl>div{grid-template-columns:minmax(96px,36%) 1fr;gap:8px}}

/* pinned Telegram shop promo */
.tgpromo{display:flex;align-items:center;gap:10px;padding:7px 16px;background:linear-gradient(90deg,#0a5bc4,#1a73e0 55%,#0a5bc4);color:#fff;border-bottom:1px solid rgba(255,215,0,.55);justify-content:center}
.tgpromo:hover{text-decoration:none;filter:brightness(1.08)}
.tgpromo__ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#229ed9}
.tgpromo__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.tgpromo__txt b{font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgpromo__sub{font-size:12.5px;color:var(--yellow-hi);font-weight:600}
.tgpromo__go{flex:none;margin-left:6px;padding:6px 12px;border-radius:10px;font-weight:800;font-size:13px;color:var(--navy-text);background:linear-gradient(180deg,var(--yellow-hi),var(--yellow2))}
@media (max-width:760px){.tgpromo{justify-content:flex-start;padding:6px 12px}.tgpromo__go{margin-left:auto}}
@media (max-width:760px){.tgpromo__txt b{white-space:normal;font-size:13.5px}.tgpromo__sub{font-size:12px}.tgpromo__go{padding:6px 10px;font-size:12.5px}.tgpromo__ico{width:28px;height:28px}}

/* brand logos (Meiji / Palinal) above the intro: centered title, transparent logos straight on the navy bg */
.brands{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 16px}
.brands__ttl{margin:0;font-size:12.5px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);font-weight:800;text-align:center}
.brands__row{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:18px;justify-content:center;width:100%}
.brandcard{display:flex;align-items:center;justify-content:center;height:124px;padding:6px 12px;border-radius:16px;background:transparent;
  transition:transform .15s,background-color .15s,box-shadow .15s}
.brandcard img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transition:filter .15s}
.brandcard:hover{text-decoration:none;transform:translateY(-2px);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,215,0,.55)}
.brandcard:hover img{filter:brightness(1.06) drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.brandcard:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media (max-width:760px){
  .brands{gap:8px;margin-bottom:14px}
  .brands__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .brandcard{height:92px;padding:4px 6px;border-radius:14px}
}
@media (max-width:420px){.brands__ttl{letter-spacing:.08em}}
@media (hover:none){.brandcard:hover{transform:none;background:transparent;box-shadow:none}.brandcard:hover img{filter:none}}
/* blinking promo badge */
.pm__img{position:relative}
.promo{position:absolute;top:10px;left:10px;z-index:2;padding:6px 12px;border-radius:999px;font-weight:900;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#ff3b3b,#d10000);box-shadow:0 0 0 2px var(--yellow),0 4px 14px rgba(255,0,0,.55);animation:promoBlink 1s steps(1,end) infinite, promoPulse 1s ease-in-out infinite}
@keyframes promoBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes promoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (max-width:760px){.promo{font-size:12px;padding:5px 10px;top:8px;left:8px}}
/* gold «ХІТ» variant — same blink/pulse animation */
.promo--hit{color:var(--navy-text);background:linear-gradient(180deg,var(--yellow-hi),var(--yellow2));box-shadow:0 0 0 2px var(--navy-text),0 0 0 4px var(--yellow),0 4px 14px rgba(6,36,87,.45)}

/* ---- account (Firebase) ---- */
.acctbtn{display:flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:12px;border:0;font-weight:700;color:#fff;background:rgba(0,87,183,.35);box-shadow:inset 0 0 0 1.5px #3f7fd6;max-width:150px}
.acctbtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctbtn:hover{box-shadow:inset 0 0 0 1.5px var(--yellow)}
.acctbtn.on{color:var(--navy-text);background:var(--yellow);box-shadow:none}
/* 08.10: «Реєстрація» / ім’я під круглою кнопкою профілю; фото профілю в кружечку (js/fb.js) */
.acctbtn__ava{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;overflow:hidden}
.acctbtn__ava img{width:100%;height:100%;object-fit:cover;display:block}
.acctbtn__lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctbtn.has-photo{padding-left:6px}
.acctbtn.has-photo .acctbtn__ava{width:30px;height:30px;box-shadow:0 0 0 1.5px var(--yellow)}
.modal--acct .modal__box{width:min(480px,100%)}
#acctbody h2{margin:0 44px 6px 0;color:var(--text);font-size:21px}
.acct__lead{margin:0 0 14px;color:var(--muted);font-size:14px}
.acct__form{display:flex;flex-direction:column;gap:10px;margin:0 0 6px}
.acct__form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.acct__form input{border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--text);padding:11px 12px;font:inherit;outline:none}
.acct__form input:focus{border-color:var(--yellow)}
.acct__form.cform{display:grid;margin-top:6px}
.acct__sub{margin:0;color:var(--text);font-weight:700;font-size:14px}
.btn--g{color:#1f1f1f;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.acct__or{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--muted);font-size:12.5px}
.acct__or::before,.acct__or::after{content:"";flex:1;height:1px;background:var(--line)}
.acct__tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;background:var(--bg2);padding:4px;border-radius:12px}
.acct__tabs button{border:0;border-radius:9px;padding:9px;background:none;color:var(--text2);font-weight:700}
.acct__tabs button.on{background:var(--blue);color:#fff}
.acct__link{border:0;background:none;color:var(--yellow);font-weight:700;padding:4px 0;text-decoration:underline}
.acct__center{text-align:center;margin:6px 0 0}
.acct__msg{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:rgba(255,90,90,.15);color:#ffb4ab;font-size:13.5px}
.acct__msg.ok{background:rgba(80,200,120,.15);color:#a6f0bf}
.acct__who{display:flex;align-items:center;gap:12px;margin:8px 0 12px}
.acct__who b{display:block;color:var(--text);font-size:16px}
.acct__who span{color:var(--muted);font-size:13px;word-break:break-all}
.acct__ava{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--navy-text)!important;font-weight:800;font-size:20px!important}
.acct__ok{margin:0 0 6px;padding:10px 12px;border-radius:10px;background:rgba(0,87,183,.3);font-size:13.5px}
.acct__warn{margin:0 0 8px;padding:10px 12px;border-radius:10px;background:rgba(255,215,0,.12);color:var(--yellow-hi);font-size:13.5px}
.acct__acts{display:grid;gap:10px;margin-top:12px}
/* 08.10: заголовки з лінійними іконками, фото профілю (реєстрація + «Мій профіль») */
.acct__ttl{display:flex;align-items:center;gap:10px}
.acct__ttl svg{flex:none;color:var(--yellow)}
.acct__ok--ic{display:flex;align-items:flex-start;gap:8px}
.acct__ok--ic svg{flex:none;margin-top:1px;color:var(--yellow)}
.acct__acts .btn svg{vertical-align:-3px;margin-right:4px}
.avaf{display:flex;align-items:center;gap:14px;margin:6px 0 12px;padding:12px;border-radius:14px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.acct__form .avaf{margin:0 0 2px}
.avaf__pic{flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;overflow:hidden;color:var(--yellow);background:rgba(255,215,0,.06);box-shadow:inset 0 0 0 1.5px rgba(255,215,0,.55)}
.avaf__pic.has{background:#0b1524;box-shadow:0 0 0 2px var(--yellow)}
.avaf__pic img{width:100%;height:100%;object-fit:cover;display:block}
.avaf__txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.avaf__txt b{color:var(--text);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avaf__mail{color:var(--muted);font-size:12.5px;word-break:break-all}
.avaf__btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.avaf__btn,.acct__form .avaf__btn{position:relative;display:inline-flex;flex-direction:row;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:700;color:var(--navy-text);background:var(--yellow);cursor:pointer}
.avaf__btn--o,.acct__form .avaf__btn--o{color:var(--text2);background:transparent;box-shadow:inset 0 0 0 1px var(--line2,var(--line))}
.avaf__btn:hover{filter:brightness(1.06)}
.avaf__btn--o:hover{color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.avaf__btn:focus-within,.avaf__btn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.avaf__file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.avaf__note{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.4}
.avaf.busy{opacity:.6;pointer-events:none}
.avaf.busy .avaf__pic{animation:avapulse 1s ease-in-out infinite alternate}
@keyframes avapulse{from{opacity:1}to{opacity:.45}}
@media (max-width:380px){.avaf{gap:10px;padding:10px}.avaf__pic{width:60px;height:60px}}

/* ---- product gallery + videos ---- */
.gal__track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.gal__track::-webkit-scrollbar{display:none}
.gal__it{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.gal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:rgba(6,36,87,.75);color:#fff;font-size:26px;line-height:34px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.gal__nav--p{left:8px}.gal__nav--n{right:8px}
.gal__nav:hover{background:var(--blue)}
.gal__dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;justify-content:center;gap:6px;pointer-events:none}
.gal__dots button{pointer-events:auto;width:9px;height:9px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.55);box-shadow:0 0 0 1.5px rgba(6,36,87,.6)}
.gal__dots button.on{background:var(--yellow);width:22px;border-radius:5px}
.gal__cnt{position:absolute;right:10px;bottom:6px;z-index:2;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:rgba(6,36,87,.8);color:#fff}
@media (hover:none){.gal__nav{width:34px;height:34px;font-size:22px;line-height:30px;opacity:.85}}
.vids{margin:14px 0 4px}
.vids__ttl{margin:0 0 8px;color:var(--text);font-weight:800;font-size:16px}
.vids__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vitem{min-width:0}.vitem.is-on,.vitem--link{grid-column:1/-1}
.vid{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1.5px var(--line)}
.vid.is-on.vid--v{aspect-ratio:9/16;max-width:340px;margin:0 auto}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid__ph{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#111;color:#fff}
.vid__ph img{width:100%;height:100%;object-fit:cover;opacity:.85}
.vid__ph--tiktok{background:radial-gradient(circle at 30% 30%,#25f4ee55,transparent 50%),radial-gradient(circle at 70% 70%,#fe2c5566,transparent 50%),#010101}
.vid__ph--instagram{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888)}
.vid__ph--youtube{background:#1b1b1b}
.vid__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--navy-text);padding-left:2px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.vid__lbl{position:absolute;left:8px;bottom:8px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff}
.vid__ext{display:block;text-align:right;font-size:12px;margin:4px 2px 0}
.vid__link svg{width:18px;height:18px}
.vid__link{margin-bottom:6px}

/* home hero: Alex's bodywork banner + consultation button (replaced the blue "Каталог" intro card, 02.10.2026) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero{max-width:640px;margin:0 auto 16px}
.hero__frame{position:relative;overflow:hidden;border-radius:18px;padding-bottom:8px;
  background:linear-gradient(90deg,var(--yellow-hi),var(--yellow),var(--yellow2));box-shadow:0 10px 30px rgba(0,0,0,.3)}
.hero__img{display:block;width:100%;height:auto;aspect-ratio:1672/940;background:#111}
.hero__btn{display:flex;width:min(440px,100%);height:52px;margin:12px auto 0;font-size:16.5px}
.hero__btn:hover{filter:brightness(1.06)}
.hero__btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:760px){
  .hero{margin-bottom:14px}
  .hero__frame{border-radius:14px;padding-bottom:6px}
  .hero__btn{width:100%;margin-top:10px}
}

.moti__in{background:var(--surface);border-radius:14px;padding:20px 18px;text-align:center;height:100%;box-sizing:border-box}
.moti__logo{width:120px;height:120px;border-radius:50%;display:block;margin:0 auto 12px;box-shadow:0 0 0 3px var(--yellow),0 6px 20px rgba(0,0,0,.35)}
.moti h3{color:var(--text);margin:0 0 10px;font-size:20px}
.moti p{margin:0 0 10px;line-height:1.5;font-size:16px}
.moti__sign{color:var(--yellow);font-weight:800;margin-top:14px!important}

.chip[data-cat="sale"]:not(.on){background:linear-gradient(180deg,#e53935,#b71c1c);border-color:#ff6f61;color:#fff}
.chip[data-cat="sale"],.chip[data-cat="new"]{justify-content:center;gap:10px}

/* SEO: per-category intro line under the section title + short text block before the footer (02.10.2026) */
.catintro{margin:-6px 0 14px;color:var(--muted);font-size:14px;line-height:1.5;max-width:760px}
.seo{padding-top:6px;padding-bottom:26px}
.seo__card{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--frame) border-box}
.seo__card>h2{margin:0;padding:18px 18px 4px;color:var(--text);font-size:20px;line-height:1.3}
.seo__card>p{margin:0;padding:8px 18px 0;color:var(--text2);line-height:1.6;font-size:15px}
.seo__card>p:last-child{padding-bottom:18px}
.seo__card b{color:var(--text)}
@media (max-width:760px){.seo__card>h2{font-size:18px;padding:16px 16px 4px}.seo__card>p{padding:8px 16px 0;font-size:14.5px}.seo__card>p:last-child{padding-bottom:16px}}
/* SEO: collapsible full product list (generated by _work/seo_list.py) */
.seo__all{margin:12px 18px 18px;border-top:1px solid var(--line);padding-top:10px}
.seo__card>p:last-of-type{padding-bottom:0}
.seo__all summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;color:var(--yellow);font-weight:700;font-size:14.5px;padding:4px 0}
.seo__all summary::-webkit-details-marker{display:none}
.seo__all summary::before{content:"▸";display:inline-block;transition:transform .15s}
.seo__all[open] summary::before{transform:rotate(90deg)}
.seo__all summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:4px}
.seo__all h3{padding:0;background:none;border-radius:0;margin:12px 0 3px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.seo__all p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.seo__all p a{color:var(--text2)}
.seo__all p a:hover{color:var(--yellow)}
@media (max-width:760px){.seo__all{margin:10px 16px 16px}}
.seo__wrap>summary{cursor:pointer;list-style:none;color:var(--muted);font-size:13.5px;font-weight:600;padding:8px 2px;text-align:center;opacity:.8}
.seo__wrap>summary::-webkit-details-marker{display:none}
.seo__wrap>summary::after{content:" ▾"}
.seo__wrap[open]>summary::after{content:" ▴"}
.seo__wrap[open]>summary{margin-bottom:8px}
.promo--new{color:#eaffef;background:rgba(0,40,15,.85);border:2px solid #39ff14;text-transform:none;text-shadow:0 0 4px #39ff14,0 0 10px #39ff14;
  box-shadow:0 0 6px #39ff14,0 0 14px #39ff14,0 0 28px rgba(57,255,20,.7),inset 0 0 8px rgba(57,255,20,.6);animation:neonBlink 1s ease-in-out infinite, promoPulse 1s ease-in-out infinite}
@keyframes neonBlink{0%,100%{opacity:1;box-shadow:0 0 6px #39ff14,0 0 16px #39ff14,0 0 32px rgba(57,255,20,.8),inset 0 0 8px rgba(57,255,20,.6)}50%{opacity:.45;box-shadow:0 0 2px #39ff14,0 0 4px rgba(57,255,20,.4),inset 0 0 2px rgba(57,255,20,.3)}}
.chip[data-cat="new"]:not(.on){background:linear-gradient(180deg,#1fbf55,#0e8a3a);border-color:#39ff14;color:#fff;box-shadow:0 0 8px rgba(57,255,20,.45)}

/* prices in грн are longer: the product-modal price pill may wrap its label (price itself uses NBSP, never breaks) */
#pm .pill{white-space:normal;flex-wrap:wrap;max-width:100%;border-radius:18px;row-gap:0}
details.preview--top{margin:12px 0 10px}
details.preview--top>summary{cursor:pointer;display:inline-block;color:var(--yellow);font-weight:800;font-size:15px;padding:4px 0;animation:otBlink 1s steps(1,end) infinite}
details.preview--top[open]>summary{animation:none}
@keyframes otBlink{0%,100%{opacity:1}50%{opacity:.2}}

/* ---- spray-gun comparison: card/modal toggle, sticky bar, compare view (02.10.2026) ---- */
.cmpt{border:0;background:rgba(0,87,183,.3);color:var(--text2);box-shadow:inset 0 0 0 1.5px #3f7fd6;border-radius:10px;font-weight:700;font-size:12.5px;padding:6px 10px;line-height:1.2;text-align:center}
.cmpt:hover{box-shadow:inset 0 0 0 1.5px var(--yellow)}
.cmpt.on{background:var(--yellow);color:var(--navy-text);box-shadow:none}
.cmpt--card{width:100%;margin-top:2px}
.cmpt--pm{height:46px;padding:0 16px;font-size:14.5px;border-radius:12px}
.cmpbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom));z-index:44;display:flex;align-items:stretch;gap:2px;
  border-radius:14px;background:var(--yellow);box-shadow:0 0 0 2px var(--blue),0 10px 28px rgba(0,0,0,.45);overflow:hidden;max-width:calc(100% - 24px)}
.cmpbar button{border:0;background:none;color:var(--navy-text);font-weight:800}
.cmpbar__go{display:flex;align-items:center;gap:6px;padding:10px 14px 10px 16px;font-size:14.5px;white-space:nowrap}
.cmpbar__arr{margin-left:4px;padding:3px 9px;border-radius:9px;background:var(--navy-text);color:var(--yellow);font-size:13px}
.cmpbar__x{width:40px;font-size:15px;border-left:1px solid rgba(6,36,87,.25)!important}
.cmpbar__x:hover,.cmpbar__go:hover{background:var(--yellow-hi)}
body.has-cmpbar{padding-bottom:calc(68px + 64px + env(safe-area-inset-bottom))}
@media (min-width:761px){body.has-cmpbar .toast{bottom:calc(84px + env(safe-area-inset-bottom))}}
.modal--cmp .modal__box{width:min(1000px,100%);padding:20px}
#cmp-ttl{margin:0 44px 14px 0;color:var(--text);font-size:22px;padding-bottom:14px;background:var(--orn-div) repeat-x left bottom/auto 10px}
.cmp__hint{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:rgba(255,215,0,.12);color:var(--yellow-hi);font-size:13.5px}
.cmp{display:grid;grid-template-columns:minmax(130px,190px) repeat(var(--n),minmax(0,1fr));border-radius:14px;overflow:hidden;background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line)}
.cmp>div{padding:9px 12px;border-top:1px solid rgba(42,90,168,.7);min-width:0}
.cmp__l{color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(6,36,87,.35);display:flex;align-items:center}
.cmp__l--h,.cmp__h{border-top:0!important}
.cmp__v{color:var(--text);font-size:14px;line-height:1.4;border-left:1px solid rgba(42,90,168,.5);word-break:break-word}
.cmp__v--na{color:var(--muted);text-align:center}
.cmp__h{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px!important;border-left:1px solid rgba(42,90,168,.5);background:var(--surface)}
.cmp__img{display:block;width:100%;aspect-ratio:1/1;border:0;padding:0;border-radius:12px;overflow:hidden;background:#0b1a3a;cursor:pointer;box-shadow:0 0 0 2px var(--blue2)}
.cmp__img img{width:100%;height:100%;object-fit:cover}
.cmp__rm{position:absolute;top:6px;right:6px;z-index:2;width:28px;height:28px;border-radius:50%;border:0;background:var(--yellow);color:var(--navy-text);font-weight:800;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.cmp__cat{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp__name{background:none;border:0;padding:0;text-align:left;color:var(--text);font-weight:700;font-size:14px;line-height:1.3;cursor:pointer}
.cmp__name:hover{color:var(--yellow)}
.cmp__price{margin-top:auto}
.cmp__add{height:40px;padding:0 10px;font-size:14px;width:100%}
.cmp__note{margin:12px 0 10px}
.cmp__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
@media (max-width:760px){
  .cmpbar{bottom:calc(72px + env(safe-area-inset-bottom))}
  body.has-cmpbar .toast{bottom:calc(136px + env(safe-area-inset-bottom))}
  .modal--cmp .modal__box{padding:16px 10px calc(18px + env(safe-area-inset-bottom))}
  #cmp-ttl{font-size:19px;margin-left:4px}
  .cmp{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
  .cmp__l{grid-column:1/-1;padding:6px 10px!important;font-size:10.5px}
  .cmp__l--h{display:none!important}
  .cmp>div.cmp__v{padding:7px 8px;font-size:13px;border-top:0}
  .cmp__l+.cmp__v{border-left:0}
  .cmp__h{padding:8px!important}
  .cmp__l--h+.cmp__h{border-left:0}
  .cmp__name{font-size:12.5px}
  .cmp .pill{font-size:13px;padding:3px 8px}
  .cmp__add{height:36px;font-size:12.5px;padding:0 6px}
  .cmp .stock{font-size:11px}
  .cmp__acts .btn{flex:1}
  .cmpt--pm{flex:1 1 100%}
}
@media (min-width:761px){.cmp__img{max-width:170px}}
/* TikTok: бейдж на картці + обкладинка 9:16 у модалці */
.vidb{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;font-size:10.5px;font-weight:800;line-height:17px;vertical-align:1px;color:#fff;background:#111;box-shadow:inset 0 0 0 1px #fe2c55}
.vid--v{aspect-ratio:9/16}
.vid--v .vid__ph img{opacity:.92}
.vid.is-on.vid--v{max-width:340px}
.vid.is-on.vid--v iframe{background:#000}
.vids__list--v{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vids__list--v .vid__play{width:42px;height:42px}
.vids__list--v .vid__ext{text-align:center;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:clip}

/* ===== головний банер-карусель (02.10.2026): 🔧 кузовні роботи + 🔥 Акції + ✅ Новинки — обгортає старий .hero ===== */
.bnr__track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.bnr__track::-webkit-scrollbar{display:none}
.bnr__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column}
.bnr__slide .hero__btn{margin-top:auto}
.bnr__slide .hero__frame{margin-bottom:12px}
.bnr__tag{position:absolute;top:7px;right:8px;z-index:1;max-width:calc(100% - 16px);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.25;
  color:var(--navy-text);background:linear-gradient(180deg,var(--yellow-hi),var(--yellow2));box-shadow:0 2px 10px rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnr__promo{display:flex;flex-direction:column;aspect-ratio:1672/948;color:var(--text);padding:12px 14px 20px;
  background:radial-gradient(420px 220px at 100% 0%,rgba(255,215,0,.16),transparent 60%),linear-gradient(160deg,var(--surface2),var(--bg2) 75%);
  box-shadow:inset 0 0 0 1.5px var(--line),0 10px 30px rgba(0,0,0,.3)}
.bnr__promo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--yellow-hi),var(--yellow),var(--yellow2))}
.bnr__promo:hover{text-decoration:none}
.bnr__slide--new .bnr__promo{background:radial-gradient(420px 220px at 100% 0%,rgba(57,255,20,.12),transparent 60%),linear-gradient(160deg,var(--surface2),var(--bg2) 75%)}
.bnr__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.bnr__ttl{font-size:24px;font-weight:900;color:var(--yellow);text-shadow:0 0 14px rgba(255,215,0,.35)}
.bnr__slide--new .bnr__ttl{color:#7dff6a;text-shadow:0 0 12px rgba(57,255,20,.45)}
.bnr__sub{font-size:13.5px;color:var(--muted);font-weight:600}
.bnr__items{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.bnr__items--1{grid-template-columns:minmax(0,1fr)}
.bnr__items--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bnr__it{display:flex;flex-direction:column;gap:5px;min-height:0;min-width:0}
.bnr__it img{flex:1;min-height:0;width:100%;object-fit:contain;background:#fff;border-radius:10px;box-shadow:0 0 0 1.5px var(--line)}
.bnr__nm{font-size:12px;font-weight:700;line-height:1.25;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bnr__items--1 .bnr__it{flex-direction:row;align-items:center;gap:12px}
.bnr__items--1 .bnr__it img{flex:0 0 auto;height:100%;width:auto;aspect-ratio:1}
.bnr__items--1 .bnr__nm{font-size:16px;-webkit-line-clamp:4}
.bnr__dots{display:flex;justify-content:center;gap:4px;margin-top:6px}
.bnr__dot{width:28px;height:24px;padding:0;border:0;background:none;display:grid;place-items:center}
.bnr__dot::before{content:"";width:9px;height:9px;border-radius:999px;background:rgba(180,199,230,.45);transition:width .25s,background .25s}
.bnr__dot.on::before{width:22px;background:var(--yellow)}
.bnr__dot:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px;border-radius:8px}
@media (max-width:760px){
  .bnr__slide .hero__frame{margin-bottom:10px}
  .bnr__promo{padding:10px 12px 16px}
  .bnr__ttl{font-size:20px}
  .bnr__sub{font-size:12.5px}
  .bnr__items{gap:8px;margin-top:8px}
  .bnr__nm{font-size:11px}
  .bnr__items--1 .bnr__nm{font-size:14px}
  .bnr__tag{font-size:10.5px;padding:3px 8px;top:5px;right:6px}
}
@media (prefers-reduced-motion:reduce){.bnr__track{scroll-behavior:auto}.bnr__dot::before{transition:none}}

/* міні-плеєр «Радіо ROKS»: з 02.10.2026 (v2) — вкладка «Радіо» в нижньому меню + кнопка в шапці; стилі — в кінці файлу */

/* ===================== візуальне оновлення (03.10.2026) =====================
   2) однакова «рамка» для фото карток  3) спокійніші кольори  4) компактний блок брендів
   5) плавна поява карток  6) скелетон фото. Оригінали: _work/backup_visual/ */

/* --- 2) фото в картках: темна градієнтна рамка, квадрат, contain з відступом, внутрішня рамка --- */
.card{--frame:linear-gradient(180deg,#2f6fd0,#173f86 60%,#1d4a96)}
.card:hover{box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,215,0,.35)}
.card__img,.card__img:hover{aspect-ratio:1/1;padding:8px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 18%,#164a92 0%,#0b2a5e 48%,#061837 100%)}
.card__img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -24px 30px -18px rgba(0,0,0,.55);}
.card__img img{position:relative;z-index:0;width:100%;height:100%;object-fit:contain;border-radius:11px;
  box-shadow:0 0 0 1px rgba(150,190,255,.18),0 6px 16px rgba(0,0,0,.45);transition:opacity .35s ease,transform .25s ease}
.card:hover .card__img img{transform:scale(1.02)}
.card__img .promo{z-index:2}
@media (max-width:760px){.card__img{padding:6px}.card__img img{border-radius:9px}}

/* --- 6) скелетон: шимер у рамці, поки фото вантажиться; потім плавна поява. Розмір рамки зарезервовано aspect-ratio --- */
.card__img.is-ld img{opacity:0}
.card__img.no-fade img{transition:none}
.card__img::before{content:"";position:absolute;inset:8px;z-index:0;border-radius:11px;opacity:0;pointer-events:none;transition:opacity .3s ease;
  background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.10) 50%,rgba(255,255,255,0) 70%) 0 0/250% 100%,
             linear-gradient(180deg,#123b77,#0d2c5c)}
.card__img.is-ld::before{opacity:1;animation:skel 1.3s linear infinite}
@keyframes skel{from{background-position:130% 0,0 0}to{background-position:-130% 0,0 0}}
.card__img.is-err img{object-fit:contain;padding:18%;opacity:.55}
@media (max-width:760px){.card__img::before{inset:6px;border-radius:9px}}

/* --- 5) плавна поява карток (клас .rv-wait ставить лише JS з IntersectionObserver) --- */
.card.rv-wait{opacity:0;transform:translateY(16px)}
.card.rv-anim{transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .15s}

@media (prefers-reduced-motion:reduce){
  .card,.card.rv-anim,.card__img img{transition:none}
  .card.rv-wait{opacity:1;transform:none}
  .card:hover,.card:hover .card__img img{transform:none}
  .card__img.is-ld::before{animation:none;background:linear-gradient(180deg,#123b77,#0d2c5c)}
}
@media print{.card.rv-wait{opacity:1;transform:none}.card__img.is-ld img{opacity:1}}

/* --- 3) спокійніші кольори: жовтий лише для головних дій (В кошик, +, Купити, Оформити) --- */
.pill{color:var(--yellow-hi);background:rgba(255,215,0,.10);box-shadow:inset 0 0 0 1.5px rgba(255,215,0,.55)}
.pill small{opacity:.85}
.pill--ask{color:var(--yellow-hi);background:rgba(0,87,183,.35);box-shadow:inset 0 0 0 1.5px rgba(255,215,0,.4)}
.stock{color:var(--text2)}
.stock::before{background:#4fd27f;box-shadow:0 0 6px rgba(79,210,127,.7)}
/* категорії (мобільні плитки): темно-сині з тонкою рамкою; активна — синя з жовтою рамкою */
.chip{background:rgba(10,44,102,.85);border:1px solid #2a5aa8;color:var(--text2);box-shadow:none;transition:background-color .15s,border-color .15s}
.chip small{background:rgba(255,255,255,.10);color:var(--text2)}
.chip:hover{text-decoration:none;border-color:#4a86e0}
.chip.on{background:linear-gradient(180deg,#0b5fc4,#0050a8);color:#fff;border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow),0 4px 14px rgba(0,0,0,.25)}
.chip.on small{background:var(--yellow);color:var(--navy-text)}
/* «Акції» і «Новинки»: колір — лише рамка/акцент; активний стан — заливка */
.chip[data-cat="sale"]:not(.on){background:rgba(10,44,102,.85);border-color:#e5534b;color:#ffd6d3;box-shadow:inset 3px 0 0 #e5534b}
.chip[data-cat="sale"]:not(.on) small{background:rgba(229,83,75,.22);color:#ffd6d3}
.chip[data-cat="sale"].on{background:linear-gradient(180deg,#d83a32,#a91d18);border-color:#ff8a80;box-shadow:inset 0 0 0 1px #ff8a80,0 4px 14px rgba(0,0,0,.25)}
.chip[data-cat="sale"].on small{background:rgba(255,255,255,.2);color:#fff}
.chip[data-cat="new"]:not(.on){background:rgba(10,44,102,.85);border-color:#3fbf6a;color:#d5f7df;box-shadow:inset 3px 0 0 #3fbf6a}
.chip[data-cat="new"]:not(.on) small{background:rgba(63,191,106,.22);color:#d5f7df}
.chip[data-cat="new"].on{background:linear-gradient(180deg,#1e9e4b,#0e7a36);border-color:#7ee39f;box-shadow:inset 0 0 0 1px #7ee39f,0 4px 14px rgba(0,0,0,.25)}
.chip[data-cat="new"].on small{background:rgba(255,255,255,.2);color:#fff}
/* бічне меню (десктоп): активний пункт — синій з жовтою смужкою, а не жовта заливка */
.side li a.on{background:linear-gradient(90deg,rgba(0,110,230,.45),rgba(0,87,183,.18));color:#fff;box-shadow:inset 3px 0 0 var(--yellow)}
.side li a.on span.n{color:var(--yellow-hi)}

/* --- 4) компактний блок «Офіційні представники»: обидва логотипи в один рядок, ~60 px --- */
.brands{gap:6px;margin:0 0 12px}
.brands__ttl{font-size:11px;letter-spacing:.12em;font-weight:700;color:rgba(255,215,0,.85)}
.brands__row{grid-template-columns:repeat(2,minmax(0,240px));gap:14px}
.brandcard{height:84px;padding:4px 10px;border-radius:12px}
@media (max-width:760px){
  .main{padding-top:16px}
  .brands{gap:4px;margin-bottom:10px}
  .brands__ttl{font-size:10px;letter-spacing:.1em}
  .brands__row{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px;align-items:center}
  .brandcard{height:62px;padding:3px 6px;border-radius:10px}
}

/* --- «🧰 Ще купують разом» у картці товару (03.10.2026): горизонтальна стрічка 4–8 міні-карток --- */
.pm__info{min-width:0}
.rel{margin:6px 0 2px;min-width:0}
.rel__ttl{margin:0 0 8px;color:var(--text);font-weight:800;font-size:16px}
.rel__list{list-style:none;margin:0 -4px;padding:2px 4px 8px;display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,215,0,.45) transparent}
.rel__list::-webkit-scrollbar{height:5px}.rel__list::-webkit-scrollbar-thumb{background:rgba(255,215,0,.45);border-radius:3px}
.rel__it{position:relative;flex:0 0 132px;scroll-snap-align:start;border-radius:12px;background:var(--bg2);border:1px solid var(--line);overflow:hidden;transition:border-color .15s}
.rel__it:hover{border-color:var(--yellow)}
.rel__open{display:flex;flex-direction:column;width:100%;height:100%;padding:0 0 8px;margin:0;border:0;background:none;color:inherit;text-align:left}
.rel__open:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px;border-radius:12px}
.rel__img{position:relative;display:block;aspect-ratio:1/1;background:#0b1a3a}
.rel__img img{width:100%;height:100%;object-fit:cover}
.rel__tag{position:absolute;top:5px;left:5px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:var(--navy-text);background:var(--yellow)}
.rel__nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:7px 8px 4px;font-size:12.5px;line-height:1.3;font-weight:600;color:var(--text);min-height:2.6em}
.rel__pr{margin:auto 44px 0 8px;font-size:13px;font-weight:800;color:var(--yellow-hi);line-height:1.2}
.rel__pr small{display:block;font-size:10.5px;font-weight:600;color:var(--muted)}
.rel__add{position:absolute;right:6px;bottom:6px;width:32px;height:32px;padding:0;border-radius:50%;border:0;background:var(--yellow);color:var(--navy-text);font-size:21px;font-weight:800;line-height:32px;box-shadow:0 0 0 2px var(--blue),0 3px 10px rgba(0,0,0,.4)}
.rel__add:active{transform:scale(.9)}
@media (max-width:760px){.rel__it{flex-basis:124px}}

/* --- повноекранний перегляд фото з зумом (лайтбокс) --- */
.pm__img.is-zoomable{cursor:zoom-in}
.pm__zoom{position:absolute;left:10px;bottom:10px;z-index:3;width:36px;height:36px;padding:0;border-radius:50%;border:0;background:rgba(6,36,87,.8);color:#fff;font-size:19px;line-height:36px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.pm__zoom:hover{background:var(--blue)}
html.lb-on,html.lb-on body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:95;background:#020a1c;color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden;overscroll-behavior:contain}
.lb__track{display:flex;height:100%;will-change:transform;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.lb__track.is-drag{transition:none}
.lb__sl{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:56px 0 40px}
.lb__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center center;will-change:transform;cursor:zoom-in;-webkit-user-drag:none}
.lb__img.is-anim{transition:transform .25s ease}
.lb.is-zoom .lb__img{cursor:grab}
.lb.is-zoom .lb__nav,.lb.is-zoom .lb__hint{opacity:0;pointer-events:none}
.lb__top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:linear-gradient(rgba(1,6,18,.75),transparent);pointer-events:none}
.lb__top > *{pointer-events:auto}
.lb__cnt{font-size:14px;font-weight:800;padding:4px 12px;border-radius:999px;background:rgba(6,36,87,.85);box-shadow:inset 0 0 0 1.5px rgba(255,215,0,.5);color:var(--yellow-hi)}
.lb__cnt[hidden]{display:inline-block!important;visibility:hidden}
.lb__x{width:42px;height:42px;border-radius:50%;border:0;background:var(--yellow);color:var(--navy-text);font-size:19px;font-weight:800;box-shadow:0 0 0 2px var(--blue),0 4px 14px rgba(0,0,0,.5)}
.lb__x:focus-visible,.lb__nav:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(6,36,87,.8);color:#fff;font-size:30px;line-height:40px;font-weight:700;box-shadow:0 2px 12px rgba(0,0,0,.4);transition:opacity .2s}
.lb__nav:hover{background:var(--blue)}
.lb__nav--p{left:12px}.lb__nav--n{right:12px}
.lb__hint{position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));margin:0;text-align:center;font-size:12px;color:var(--muted);pointer-events:none;transition:opacity .2s}
@media (hover:none){.lb__nav{width:38px;height:38px;font-size:24px;line-height:34px;opacity:.8}}
@media (prefers-reduced-motion:reduce){
  .lb__track,.lb__img.is-anim,.lb__nav,.lb__hint,.rel__it{transition:none}
  .rel__add:active{transform:none}
}

/* ===================== PREMIUM-редизайн (03.10.2026) =====================
   Увесь шар обмежено body.prem (index.html). admin.html (body.admbody) цих правил не отримує.
   Шрифт: Manrope (variable 200–800), self-host /fonts, SIL OFL 1.1 (fonts/OFL.txt). Оригінали: _work/backup_premium/ */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-cyrillic-wght-normal.woff2) format("woff2-variations"),url(../fonts/manrope-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations"),url(../fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"),url(../fonts/manrope-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- 1) палітра: глибокий navy, жовтий лише для головних дій / активних станів, решта — білий і сірі --- */
body.prem{
  --bg:#08111f; --bg2:#0b1626; --surface:#0f1b2e; --surface2:#142338; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --blue:#1b2b44; --blue2:#24395a; --text:#f5f7fa; --text2:#c6cedb; --muted:#8a96a9; --navy-text:#08111f;
  --yellow:#ffd700; --yellow2:#f2c900; --yellow-hi:#ffe14d;
  --radius:18px; --frame:none;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  font:500 15px/1.6 var(--font);color:var(--text2);background:var(--bg);
  background-image:radial-gradient(1100px 560px at 50% -260px,rgba(40,70,120,.28),transparent 70%);background-attachment:fixed;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern" 1}
.prem h1,.prem h2,.prem h3{font-family:var(--font);letter-spacing:.015em;color:var(--text)}
.prem h2{font-weight:700} .prem h3{font-weight:650}
.prem a{color:var(--text)}
.prem a:hover{text-decoration:none;color:#fff}
.prem .wrap{padding:0 20px}
.prem .uastripe{height:3px;background:linear-gradient(90deg,#0057b7 50%,#ffd700 50%);opacity:.9}

/* --- шапка --- */
.prem .tgpromo{background:var(--bg2);border-bottom:1px solid var(--line);padding:8px 20px;gap:12px}
.prem .tgpromo:hover{filter:none;background:#0d1a2c}
.prem .tgpromo__ico{background:transparent;color:var(--text2);box-shadow:inset 0 0 0 1px var(--line2);width:28px;height:28px}
.prem .tgpromo__txt b{font-weight:650;font-size:13.5px;letter-spacing:.01em;color:var(--text)}
.prem .tgpromo__sub{color:var(--muted);font-weight:500;font-size:12px}
.prem .tgpromo__go{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2);font-weight:650;font-size:12.5px;padding:6px 14px;border-radius:999px}
.prem .hdr{background:rgba(8,17,31,.86);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--line)}
.prem .hdr::after{display:none}
.prem .hdr__in{padding-top:14px;padding-bottom:14px;gap:20px}
.prem .brand__logo{padding:0;background:none;box-shadow:0 0 0 1px var(--line2);width:46px;height:46px}
.prem .brand__name{font-weight:750;font-size:19px;letter-spacing:.03em;color:var(--text)}
.prem .brand__sub{color:var(--muted);font-size:12px;letter-spacing:.02em}
.prem .search input{background-color:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:none;border-radius:999px;height:44px;padding-left:42px;font-weight:500;background-position:15px center}
.prem .search input::placeholder{color:#7d899c}
.prem .search input:focus{border-color:rgba(255,215,0,.6);box-shadow:0 0 0 3px rgba(255,215,0,.12)}
.prem .hdr__nav{gap:4px}
.prem .hdr__nav a{color:var(--text2);font-weight:600;font-size:14px;letter-spacing:.01em;border-radius:999px;padding:9px 14px}
.prem .hdr__nav a:hover,.prem .hdr__nav a.on{background:rgba(255,255,255,.06);color:var(--text)}
.prem .acctbtn{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2);border-radius:999px}
.prem .acctbtn:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.prem .acctbtn.on{background:rgba(255,255,255,.08);color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,215,0,.6)}
.prem .cartbtn{background:var(--yellow);color:var(--navy-text);box-shadow:none;border-radius:999px;font-weight:700;padding:0 18px}
.prem .cartbtn .badge{background:var(--text);color:var(--navy-text);box-shadow:0 0 0 2px var(--bg)}
.prem .badge{font-family:var(--font)}
html:has(body.prem){scroll-padding-top:96px}

/* --- 3) простір і типографіка --- */
.prem .main{padding-top:32px}
.prem .toolbar{margin-bottom:22px}
.prem .toolbar h2{font-size:24px;font-weight:700;letter-spacing:.02em}
.prem .sort{color:var(--muted)}
.prem .sort select{background:var(--surface);border:1px solid var(--line);border-radius:999px;height:40px;padding:0 14px;font-weight:600}
.prem .catintro{color:var(--muted);margin:-10px 0 22px}
.prem .layout{gap:36px}
.prem .grid{gap:24px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.prem .more{margin-top:36px;border-radius:999px}
.prem .empty{background:var(--surface);border:1px solid var(--line)}

/* --- 4) банер: hero Meiji першим слайдом, далі кузовні роботи, Акції, Новинки --- */
.prem .hero{max-width:980px;margin:0 auto 40px}
.prem .hero__frame{border-radius:22px;padding-bottom:0;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.35)}
.prem .bnr__slide .hero__frame{margin-bottom:16px}
.prem .hero__img{aspect-ratio:1672/940}
.prem .hero__btn{width:min(360px,100%);height:52px;margin:0 auto;border-radius:999px;font-size:15.5px;font-weight:700;letter-spacing:.02em}
.prem .bnr__tag{top:12px;right:12px;padding:5px 12px;font-size:11.5px;font-weight:650;letter-spacing:.03em;color:var(--text);background:rgba(8,17,31,.72);box-shadow:inset 0 0 0 1px var(--line2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.prem .bnr__dots{margin-top:14px;gap:2px}
.prem .bnr__dot::before{width:6px;height:6px;background:rgba(255,255,255,.28)}
.prem .bnr__dot.on::before{width:22px;background:var(--yellow)}
/* слайд Meiji: фото справа, підпис ліворуч */
.prem .hm{display:block;aspect-ratio:1672/940;color:var(--text);isolation:isolate;
  background:radial-gradient(70% 90% at 78% 50%,#1b2a40 0%,#0c1626 60%,#08111f 100%)}
.prem .hm:hover{text-decoration:none;color:var(--text)}
/* показуємо лише різку центральну частину фото (x 176–624, y 120–780 з 800×800), без розмитих бічних смуг */
.prem .hm__pic{position:absolute;top:0;bottom:0;right:6%;aspect-ratio:448/660;overflow:hidden;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.prem .hm__img{position:absolute;left:-39.29%;top:-18.18%;width:178.57%;max-width:none;height:auto;aspect-ratio:1/1}
.prem .hm__txt{position:absolute;left:0;top:0;bottom:0;width:60%;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 0 0 56px}
.prem .hm__eyebrow{font-size:12px;font-weight:650;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow)}
.prem .hm__ttl{font-size:52px;line-height:1.04;font-weight:800;letter-spacing:.01em;color:#fff}
.prem .hm__jq{display:block;margin-top:8px;font-size:22px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--text2)}
.prem .hm__dot{display:none}
.prem .hm__nw{white-space:nowrap}
.prem .hm__line{max-width:380px;font-size:16px;line-height:1.55;font-weight:500;color:var(--text2)}
/* промо-слайди */
.prem .bnr__promo{background:linear-gradient(160deg,var(--surface2),var(--bg2) 80%);box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.35);padding:22px 24px 24px}
.prem .bnr__promo::after{display:none}
.prem .bnr__slide--new .bnr__promo{background:linear-gradient(160deg,var(--surface2),var(--bg2) 80%)}
.prem .bnr__ttl,.prem .bnr__slide--new .bnr__ttl{color:var(--text);text-shadow:none;font-weight:750;letter-spacing:.02em}
.prem .bnr__sub{color:var(--muted);font-weight:500}
.prem .bnr__items{gap:16px;margin-top:18px}
.prem .bnr__it img{border-radius:14px;box-shadow:none;background:#fff}
.prem .bnr__nm{font-weight:600;color:var(--text2)}

/* --- бренди --- */
.prem .brands{gap:14px;margin:0 0 40px}
.prem .brands__ttl{color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.24em}
.prem .brands__row{gap:28px}
.prem .brandcard{border-radius:16px}
.prem .brandcard:hover{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}

/* --- 6) блок довіри --- */
.prem .trust{margin:0 0 48px}
.prem .trust__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.prem .trust__it{min-width:0;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.prem .trust__it,.prem .trust__lnk{display:flex;align-items:flex-start;gap:14px;padding:20px}
.prem .trust__lnk{margin:-20px;flex:1;color:inherit;border-radius:18px;transition:background-color .15s}
.prem .trust__lnk:hover{background:rgba(255,255,255,.03);color:inherit}
.prem .trust__ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--yellow);box-shadow:inset 0 0 0 1px rgba(255,215,0,.35)}
.prem .trust__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.prem .trust__txt b{color:var(--text);font-weight:700;font-size:15.5px;line-height:1.3;letter-spacing:.01em}
.prem .trust__txt span{color:var(--muted);font-size:13px;line-height:1.45}

/* --- категорії (плитки на мобільному, бічне меню на десктопі) --- */
.prem .chips{gap:10px;padding:0 0 28px}
.prem .chip,.prem .chip[data-cat="sale"]:not(.on),.prem .chip[data-cat="new"]:not(.on){background:var(--surface);border:1px solid var(--line);color:var(--text2);box-shadow:none;border-radius:14px;font-weight:600;letter-spacing:.005em}
.prem .chip small,.prem .chip[data-cat="sale"]:not(.on) small,.prem .chip[data-cat="new"]:not(.on) small{background:rgba(255,255,255,.06);color:var(--muted);font-weight:600}
.prem .chip:hover{border-color:var(--line2)}
.prem .chip.on,.prem .chip[data-cat="sale"].on,.prem .chip[data-cat="new"].on{background:rgba(255,215,0,.08);color:var(--text);border-color:rgba(255,215,0,.75);box-shadow:none}
.prem .chip.on small,.prem .chip[data-cat="sale"].on small,.prem .chip[data-cat="new"].on small{background:var(--yellow);color:var(--navy-text)}
.prem .side{background:var(--surface);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:20px;padding:18px}
.prem .side__ttl{color:var(--muted);letter-spacing:.2em;font-weight:650;font-size:11px;margin:2px 10px 12px}
.prem .side li a{font-weight:550;color:var(--text2);border-radius:12px;padding:10px 12px}
.prem .side li a:hover{background:rgba(255,255,255,.04)}
.prem .side li a.on{background:rgba(255,255,255,.05);color:var(--text);box-shadow:inset 2px 0 0 var(--yellow)}
.prem .side li a.on span.n{color:var(--yellow)}
.prem .side li a span.n{color:var(--muted)}
.prem .side__card{background:transparent;border-top:1px solid var(--line);border-radius:0;margin-top:16px;padding:16px 10px 4px;gap:8px}
.prem .side__card a{color:var(--text2);font-weight:550}
.prem .side__card a:hover{color:var(--text)}

/* --- картки товарів --- */
.prem .card{padding:0;background:var(--surface);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s ease,box-shadow .2s ease}
.prem .card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line2),0 18px 40px rgba(0,0,0,.35)}
.prem .card__in{background:transparent;border-radius:20px}
.prem .card__img,.prem .card__img:hover{padding:10px;background:#0b1524}
.prem .card__img::after{box-shadow:none}
.prem .card__img img{border-radius:14px;box-shadow:none}
.prem .card__img::before{inset:10px;border-radius:14px;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 70%) 0 0/250% 100%,#111d30}
.prem .card__add{width:40px;height:40px;line-height:40px;right:16px;bottom:16px;background:var(--yellow);color:var(--navy-text);font-weight:600;font-size:24px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.prem .card__body{padding:14px 18px 20px;gap:10px}
.prem .card__cat{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.prem .card__name{font-weight:650;font-size:15px;line-height:1.38;letter-spacing:.005em}
.prem .card__name:hover{color:#fff}
.prem .card__foot{gap:8px}
.prem .pill{background:transparent;box-shadow:none;color:var(--text);padding:0;font-weight:750;font-size:17px;letter-spacing:.01em;border-radius:0}
.prem .pill small{color:var(--muted);font-weight:600;opacity:1}
.prem .pill--ask{color:var(--text2);font-weight:600;font-size:13px;padding:4px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2)}
.prem .uah{color:var(--muted)}
.prem .stock{color:var(--muted);font-weight:600;font-size:12px}
.prem .stock::before{width:6px;height:6px;background:#6fcf97;box-shadow:none}
.prem .stock--ask::before{background:var(--muted)}
.prem .stock--way::before{background:#9fb4d6}
.prem .stock--way{color:var(--muted)}
.prem .stock--out{color:#d9a3a0}.prem .stock--out::before{background:#d9a3a0}
.prem .tdsb,.prem .vidb{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2);font-weight:650;letter-spacing:.06em;border-radius:999px;padding:0 8px}
.prem .cmpt{background:transparent;color:var(--text2);box-shadow:inset 0 0 0 1px var(--line2);border-radius:999px;font-weight:600}
.prem .cmpt:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.prem .cmpt.on{background:rgba(255,215,0,.1);color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,215,0,.75)}

/* бейджі: ті самі підписи, але статичні й стримані (без неону та миготіння) */
.prem .promo,.prem .promo--new,.prem .promo--hit{animation:none;text-shadow:none;border:0;top:16px;left:16px;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.3;
  color:#fff;background:rgba(8,17,31,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.prem .promo--new{text-transform:none;letter-spacing:.03em}
.prem .promo--hit{color:var(--yellow);box-shadow:inset 0 0 0 1px rgba(255,215,0,.5)}
.prem .rel__tag{background:rgba(8,17,31,.78);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-weight:700}
.prem details.preview--top>summary{animation:none;color:var(--text2);font-weight:650;font-size:14px;letter-spacing:.01em;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.prem details.preview--top>summary:hover{color:var(--text)}

/* --- модалки --- */
.prem .modal__bg{background:rgba(3,7,14,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.prem .modal__box{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.prem .modal__x{background:rgba(255,255,255,.08);color:var(--text);font-weight:500;box-shadow:inset 0 0 0 1px var(--line2)}
.prem .modal__x:hover{background:rgba(255,255,255,.14)}
.prem .pm__info{padding:30px 30px 28px;gap:16px}
.prem .pm__info::before{display:none}
.prem .pm__cat{letter-spacing:.16em;font-weight:600;font-size:11px}
.prem .pm h2{font-size:24px;font-weight:750;letter-spacing:.015em;line-height:1.25}
.prem .pm__img,.prem .card__img.pm__img{background:#0b1524}
.prem #pm .pill{font-size:26px!important;padding:0!important}
.prem #pm .pill--ask{font-size:15px!important;padding:6px 14px!important}
.prem .pm__desc{line-height:1.7;color:var(--text2)}
.prem .pm__note{border-left:2px solid var(--line2)}
.prem .var{background:transparent;border:1px solid var(--line2);border-radius:14px;font-weight:600}
.prem .var b{color:var(--text)}
.prem .var.on{background:rgba(255,215,0,.07);border-color:rgba(255,215,0,.75);box-shadow:none}
.prem .qty{background:transparent;border:1px solid var(--line2);border-radius:999px}
.prem .btn{border-radius:999px;font-weight:700;letter-spacing:.015em}
.prem .btn--y{background:var(--yellow);color:var(--navy-text);box-shadow:none}
.prem .btn--y:hover{background:var(--yellow-hi)}
.prem .btn--b,.prem .btn--o{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.prem .btn--b:hover,.prem .btn--o:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);background:rgba(255,255,255,.03)}
.prem .btn--bot{background:#eef1f6;color:var(--navy-text);box-shadow:none}
.prem .btn--bot:hover{filter:none;background:#fff}
.prem .tds{background:var(--bg2);border:1px solid var(--line);box-shadow:none;border-radius:16px}
.prem .tds summary{color:var(--text);font-weight:700}
.prem .tds__dl>div,.prem .tds__src{border-top-color:var(--line)}
.prem .tds__src a{color:var(--text)}
.prem .gal__nav,.prem .pm__zoom{background:rgba(8,17,31,.72);box-shadow:inset 0 0 0 1px var(--line2)}
.prem .gal__dots button{background:rgba(255,255,255,.4);box-shadow:none;width:7px;height:7px}
.prem .gal__dots button.on{background:var(--yellow);width:20px}
.prem .gal__cnt{background:rgba(8,17,31,.78)}
.prem .vids__ttl,.prem .rel__ttl{font-weight:700;letter-spacing:.015em}
.prem .vid{box-shadow:inset 0 0 0 1px var(--line)}
.prem .rel__it{background:var(--bg2);border-color:var(--line);border-radius:14px}
.prem .rel__it:hover{border-color:var(--line2)}
.prem .rel__img{background:#0b1524}
.prem .rel__pr{color:var(--text)}
.prem .rel__add{box-shadow:0 3px 10px rgba(0,0,0,.35)}
.prem .rel__list{scrollbar-color:rgba(255,255,255,.2) transparent}
.prem .rel__list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
.prem .lb__cnt{background:rgba(8,17,31,.85);box-shadow:inset 0 0 0 1px var(--line2);color:var(--text)}
.prem .lb__x{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px var(--line2)}
.prem .lb__nav{background:rgba(8,17,31,.75)}
.prem .lb{background:#05090f}
.prem .toast{background:#eef1f6;color:var(--navy-text);box-shadow:0 14px 40px rgba(0,0,0,.5);border-radius:999px;font-weight:650}

/* --- 5) кошик: кроки, чисті позиції, рядок довіри --- */
.prem #cart-ttl{background:none;padding-bottom:0;margin:0 48px 18px 0;font-size:22px;font-weight:750;letter-spacing:.02em}
.prem .modal--cart .modal__box{padding:26px 26px 24px}
.prem .csteps{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;counter-reset:none}
.prem .csteps li{min-width:0}
.prem .cstep{width:100%;display:flex;align-items:center;gap:8px;padding:10px 0 0;border:0;background:none;color:var(--muted);font-weight:600;font-size:13px;letter-spacing:.02em;border-top:2px solid var(--line2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prem .cstep span{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11.5px;font-weight:700;box-shadow:inset 0 0 0 1px var(--line2);color:var(--muted)}
.prem .cstep.done{color:var(--text2);border-top-color:rgba(255,215,0,.45)}
.prem .cstep.done span{color:var(--text2);box-shadow:inset 0 0 0 1px rgba(255,215,0,.45)}
.prem .cstep.on{color:var(--text);border-top-color:var(--yellow)}
.prem .cstep.on span{background:var(--yellow);color:var(--navy-text);box-shadow:none}
.prem .csec{margin:0 0 22px}
.prem .csec__ttl{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:16px;font-weight:700;letter-spacing:.02em}
.prem .csec__ttl span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2)}
.prem .citems{gap:0;margin:0 0 6px;border-top:1px solid var(--line)}
.prem .citem{background:none;box-shadow:none;border-radius:0;padding:16px 0;border-bottom:1px solid var(--line);grid-template-columns:72px 1fr auto;gap:16px;align-items:start}
.prem .citem img{width:72px;height:72px;border-radius:14px;background:#0b1524}
.prem .citem__n{font-weight:650;font-size:14.5px;line-height:1.35}
.prem .citem__v{margin-top:2px}
.prem .citem__p{margin-top:6px;color:var(--text2);font-weight:600;font-size:13.5px}
.prem .citem__t{margin-top:2px;color:var(--text);font-weight:750;font-size:14.5px}
.prem .citem__r{gap:10px}
.prem .citem .qty{border-radius:999px}
.prem .rm{color:var(--muted);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.02em}
.prem .rm:hover{color:var(--text)}
.prem .ctotal{border-top:0;padding:16px 0 10px;margin-bottom:4px}
.prem .ctotal>span{font-weight:600;color:var(--text2)}
.prem .ctotal b{color:var(--text);font-size:24px;font-weight:800;letter-spacing:.01em}
.prem .cnote{color:var(--muted);line-height:1.55}
.prem .cform{gap:14px;margin-bottom:0}
.prem .cform label{font-weight:600;letter-spacing:.02em;color:var(--muted)}
.prem .cform input,.prem .cform textarea{background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font-weight:500}
.prem .cform input:focus,.prem .cform textarea:focus{border-color:rgba(255,215,0,.7);box-shadow:0 0 0 3px rgba(255,215,0,.1)}
.prem details.preview pre{background:var(--bg2);border:1px solid var(--line)}
.prem #cartbody .cactions .btn{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.prem #cartbody .cactions .btn:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.prem #cartbody .cactions .btn--bot{background:var(--yellow);color:var(--navy-text);box-shadow:none}
.prem #cartbody .cactions .btn--bot:hover{background:var(--yellow-hi)}
.prem #cartbody .cactions [data-send]{background:#eef1f6;color:var(--navy-text);box-shadow:none}
.prem #cartbody .cactions [data-send]:hover{background:#fff}
.prem .ctrust{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center}
.prem .ctrust li{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:.01em}
.prem .ctrust svg{flex:none;color:var(--yellow);opacity:.85}
.prem .cempty .btn{margin-top:4px}
.prem .acct__tabs button.on{background:rgba(255,255,255,.1)}
.prem .acct__ava{background:var(--yellow)}
.prem .acct__link{color:var(--text)}
.prem .acct__form input{background:var(--bg2);border:1px solid var(--line2);border-radius:12px}

/* порівняння */
.prem #cmp-ttl{background:none;padding-bottom:0;font-weight:750;letter-spacing:.02em}
.prem .cmp{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px}
.prem .cmp>div{border-top-color:var(--line)}
.prem .cmp__l{background:rgba(255,255,255,.02)}
.prem .cmp__v,.prem .cmp__h{border-left-color:var(--line)}
.prem .cmp__h{background:var(--surface2)}
.prem .cmp__img{box-shadow:inset 0 0 0 1px var(--line);background:#0b1524}
.prem .cmp__hint{background:rgba(255,255,255,.04);color:var(--text2)}
.prem .cmpbar{background:#eef1f6;box-shadow:0 14px 40px rgba(0,0,0,.5);border-radius:999px}
.prem .cmpbar__arr{background:var(--navy-text);color:#fff}
.prem .cmpbar__x:hover,.prem .cmpbar__go:hover{background:#fff}

/* --- як замовити / SEO --- */
.prem .how{padding-top:72px;padding-bottom:48px}
.prem .how::before,.prem .how::after{display:none}
.prem .how h2{font-size:28px;font-weight:750;letter-spacing:.02em;margin:0 0 24px}
.prem .how__bot{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px 20px;margin-bottom:24px;gap:18px}
.prem .steps{gap:16px;margin-bottom:24px}
.prem .steps li{background:var(--surface);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:20px;padding:24px 22px 22px;gap:8px}
.prem .steps li::before{background:none;color:var(--yellow);box-shadow:inset 0 0 0 1px rgba(255,215,0,.4);font-weight:700;width:34px;height:34px;margin-bottom:6px}
.prem .steps b{font-weight:700;letter-spacing:.01em}
.prem .how__grid{gap:16px}
.prem .how__card{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.prem .how__card h3{background:transparent;padding:22px 22px 6px;font-size:18px}
.prem .how__card ul{background:transparent;padding:6px 22px 18px}
.prem .contacts li{border-bottom:1px solid var(--line)}
.prem .contacts a{color:var(--text);font-weight:650}
.prem .moti__in{background:transparent;padding:28px 22px}
.prem .moti__logo{box-shadow:0 0 0 1px var(--line2)}
.prem .moti__sign{color:var(--text)}
.prem .seo{padding-bottom:40px}
.prem .seo__wrap>summary{color:var(--muted);font-weight:600;letter-spacing:.02em}
.prem .seo__card{background:var(--surface);border:1px solid var(--line)}
.prem .seo__card a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.prem .seo__all summary{color:var(--text)}
.prem .seo__all{border-top-color:var(--line)}

/* --- 7) темний преміум-футер --- */
.prem .ftr{background:#050b15;border-top:1px solid var(--line);padding:64px 0 36px;margin-top:24px;box-shadow:0 180px 0 0 #050b15}
.prem .ftr::before{display:none}
.prem .ftr__in{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px 48px;align-items:start}
.prem .ftr__logo{display:inline-flex;align-items:center;gap:14px;color:var(--text)}
.prem .ftr__logo img{width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 1px var(--line2)}
.prem .ftr__brand{font-weight:750;font-size:20px;letter-spacing:.03em;color:var(--text)}
.prem .ftr__line{margin:14px 0 0;color:var(--text2);font-size:14px;line-height:1.6;max-width:380px}
.prem .ftr__line.muted{margin-top:8px;color:var(--muted);font-size:13px}
.prem .ftr__h{margin:4px 0 16px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.22em;text-transform:uppercase}
.prem .ftr__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.prem .ftr__list a{color:var(--text2);font-weight:550;font-size:14px;word-break:break-word}
.prem .ftr__list a:hover{color:#fff}
.prem .ftr__bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:24px;border-top:1px solid var(--line)}
.prem .ftr__ua{margin:0!important;padding:0;background:none;color:var(--text2);font-size:13.5px;font-weight:650;letter-spacing:.04em;border-radius:0;text-align:left}
.prem .ftr .small{grid-column:auto;color:var(--muted);font-size:12.5px}

/* --- нижнє меню (мобільний): та сама висота, спокійні кольори --- */
.prem .tabbar{background:rgba(8,17,31,.96);border-top:3px solid #0d1828;box-shadow:0 -1px 0 var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.prem .tabbar a,.prem .tabbar button{color:var(--text2);font-weight:600;letter-spacing:.01em}
.prem .tabbar a.on{color:var(--yellow)}
.prem .tabbar .badge{background:var(--yellow);color:var(--navy-text)}

/* --- адаптив --- */
@media (max-width:1024px){
  .prem .trust__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prem .hm__ttl{font-size:42px}
  .prem .hm__jq{font-size:18px}
  .prem .hm__txt{padding-left:40px}
}
@media (max-width:760px){
  body.prem{font-size:14.5px}
  .prem .wrap{padding:0 16px}
  .prem .tgpromo{padding:7px 16px}
  .prem .hdr__in{padding-top:12px;padding-bottom:12px;gap:12px}
  .prem .brand__logo{width:40px;height:40px}
  .prem .brand__name{font-size:17px}
  .prem .main{padding-top:20px}
  .prem .hero{margin-bottom:32px}
  .prem .hero__frame{border-radius:18px}
  .prem .bnr__slide .hero__frame{margin-bottom:12px}
  .prem .hero__btn{width:100%;height:50px}
  .prem .hm__pic{right:2%}
  .prem .tgpromo__txt b{font-size:12.5px}
  .prem .tgpromo__sub{font-size:11.5px}
  .prem .hm__txt{width:57%;gap:7px;padding-left:18px}
  .prem .hm__eyebrow{font-size:8.5px;letter-spacing:.14em}
  .prem .hm__ttl{font-size:28px}
  .prem .hm__jq{margin-top:4px;font-size:10.5px;letter-spacing:.2em}
  .prem .hm__line{font-size:11.5px;line-height:1.45}
  .prem .bnr__promo{padding:14px 14px 16px}
  .prem .bnr__items{gap:10px;margin-top:10px}
  .prem .bnr__tag{top:8px;right:8px}
  .prem .brands{margin-bottom:28px;gap:10px}
  .prem .trust{margin-bottom:32px}
  .prem .trust__row{gap:10px}
  .prem .trust__it,.prem .trust__lnk{flex-direction:column;gap:8px;padding:14px 14px 16px}
  .prem .trust__lnk{margin:-14px -14px -16px}
  .prem .trust__ico{width:36px;height:36px}
  .prem .trust__ico svg{width:19px;height:19px}
  .prem .trust__txt b{font-size:14px}
  .prem .trust__txt span{font-size:12px}
  .prem .chips{gap:8px;padding-bottom:24px}
  .prem .toolbar{margin-bottom:16px}
  .prem .toolbar h2{font-size:19px}
  .prem .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .prem .card{border-radius:16px}
  .prem .card__in{border-radius:16px}
  .prem .card__img,.prem .card__img:hover{padding:6px}
  .prem .card__img img{border-radius:11px}
  .prem .card__img::before{inset:6px;border-radius:11px}
  .prem .card__add{width:36px;height:36px;line-height:36px;font-size:22px;right:12px;bottom:12px}
  .prem .card__body{padding:12px 12px 14px;gap:8px}
  .prem .card__cat{font-size:9.5px;letter-spacing:.1em}
  .prem .card__name{font-size:13.5px}
  .prem .pill{font-size:15px;padding:0}
  .prem .pill--ask{font-size:12px;padding:3px 10px}
  .prem .promo,.prem .promo--new,.prem .promo--hit{top:12px;left:12px;font-size:10px;padding:4px 9px}
  .prem .modal__box{border-radius:22px 22px 0 0;border-bottom:0}
  .prem .pm__info{padding:22px 18px 26px}
  .prem .pm h2{font-size:20px}
  .prem #pm .pill{font-size:22px!important}
  .prem .modal--cart .modal__box{padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
  .prem .citem{grid-template-columns:60px 1fr auto;gap:12px;padding:14px 0}
  .prem .citem img{width:60px;height:60px;border-radius:12px}
  .prem .cstep{font-size:12px;gap:6px}
  .prem .how{padding-top:48px;padding-bottom:36px}
  .prem .how h2{font-size:23px}
  .prem .steps li{padding:20px 18px}
  .prem .ftr{padding:48px 0 28px}
  .prem .ftr__in{grid-template-columns:1fr;gap:32px}
  .prem .ftr__bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){
  .prem .hm__line{display:none}
}
@media (prefers-reduced-motion:reduce){.prem .card,.prem .trust__lnk{transition:none}}

/* --- 02.10.2026: SVG-іконки замість емодзі (нижнє меню, контакти) + TG-плашка не закріплена --- */
/* TG-плашка тепер поза .hdr і прокручується разом зі сторінкою; .hdr лишається sticky */
.prem .tabbar .tab__ico{position:relative;display:block;width:24px;height:24px;font-size:0;line-height:0;font-family:var(--font);margin-bottom:1px}
.prem .tabbar .tab__ico svg{display:block;width:24px;height:24px}
.prem .tabbar a,.prem .tabbar button{gap:3px;-webkit-tap-highlight-color:transparent}
.prem .tabbar a.on,.prem .tabbar a.on .tab__ico{color:var(--yellow)}
.prem .tabbar .badge{position:absolute;top:-6px;right:-13px;box-shadow:0 0 0 2px #08111f}
.prem .contacts span{display:inline-flex;align-items:center;gap:9px}
.prem .contacts span svg{flex:none;color:var(--text2)}
.prem .btn--bot svg{flex:none}

/* --- 02.10.2026: «Радіо ROKS» (js/radio.js v2) — 5-та вкладка нижнього меню (мобільний) і компактна кнопка в шапці (десктоп).
   Плаваючої пілюлі більше немає. Гучність: на телефоні — кнопками телефону; на десктопі — повзунок під кнопкою 🔊 у шапці. --- */
.tabbar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.tabbar a,.tabbar button{white-space:nowrap;min-width:0}
.tabbar [hidden]{display:none!important}
.prem .tabbar .tab--radio[data-state="on"],.prem .tabbar .tab--radio[data-state="load"]{color:var(--yellow)}
.prem .tabbar .tab--radio[data-state="err"] .tab__ico{color:#ff8a8a}
.prem .tabbar button:focus-visible,.hradio button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;border-radius:10px}
/* міні-еквалайзер у куточку іконки (як бейдж кошика): видно лише коли грає / підключається */
.tab__ico .req,.hradio__ico .req{position:absolute;top:-3px;right:-9px;display:none;align-items:flex-end;gap:1.5px;height:10px;width:auto;font-size:0;line-height:0;pointer-events:none}
.req i{display:block;width:2.5px;height:100%;border-radius:1px;background:currentColor;transform-origin:50% 100%;transform:scaleY(.35)}
[data-state="on"] .tab__ico .req,[data-state="load"] .tab__ico .req,[data-state="on"] .hradio__ico .req,[data-state="load"] .hradio__ico .req{display:flex}
[data-state="on"] .req i{animation:req 1s ease-in-out infinite}
[data-state="on"] .req i:nth-child(2){animation-duration:.8s;animation-delay:-.35s}
[data-state="on"] .req i:nth-child(3){animation-duration:1.15s;animation-delay:-.6s}
[data-state="load"] .req i{animation:reqload 1.1s ease-in-out infinite}
[data-state="load"] .req i:nth-child(2){animation-delay:.15s}
[data-state="load"] .req i:nth-child(3){animation-delay:.3s}
@keyframes req{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes reqload{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  [data-state] .req i{animation:none!important;opacity:1}
  [data-state="on"] .req i:nth-child(1){transform:scaleY(.55)}
  [data-state="on"] .req i:nth-child(2){transform:scaleY(1)}
  [data-state="on"] .req i:nth-child(3){transform:scaleY(.75)}
}
/* 5 вкладок без обрізання підписів на вузьких екранах (360–380 px) */
@media (max-width:400px){
  .prem .tabbar{padding-left:2px;padding-right:2px}
  .prem .tabbar a,.prem .tabbar button{font-size:11px;letter-spacing:0}
}
@media (max-width:350px){.prem .tabbar a,.prem .tabbar button{font-size:10.5px;letter-spacing:-.01em}}

/* десктоп: компактна кнопка в шапці (поруч з «Увійти» / «Кошик») */
.hradio{position:relative;display:flex;align-items:center;height:42px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2,var(--line));color:var(--text);font-family:var(--font)}
.hradio[hidden]{display:none}
.hradio button{display:flex;align-items:center;justify-content:center;height:42px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hradio__btn{gap:13px;padding:0 10px 0 14px;font-size:14px;font-weight:650;letter-spacing:.01em;white-space:nowrap;border-radius:999px 0 0 999px}
.hradio__ico{position:relative;display:block;width:20px;height:20px;line-height:0}
.hradio__ico svg{display:block}
.hradio .hradio__ico .req{top:-4px;right:-8px;height:9px}
.hradio__volbtn{width:38px;padding:0 12px 0 6px;color:var(--text2);border-radius:0 999px 999px 0}
.hradio__volbtn:hover,.hradio__btn:hover{color:var(--yellow)}
.hradio__volbtn .hradio__mute{display:none}
.hradio__volbtn.is-mute .hradio__mute{display:inline}
.hradio__volbtn.is-mute .hradio__wave{display:none}
.hradio__volbtn[hidden]{display:none}
.hradio:has(.hradio__volbtn[hidden]) .hradio__btn{padding-right:14px;border-radius:999px}
.hradio__btn[data-state="on"],.hradio__btn[data-state="load"]{color:var(--yellow)}
.hradio:has([data-state="on"]){box-shadow:inset 0 0 0 1px rgba(255,215,0,.6)}
.hradio__btn[data-state="err"] .hradio__ico{color:#ff8a8a}
.hradio__vol{position:absolute;right:0;top:calc(100% + 8px);z-index:60;padding:10px 14px;border-radius:14px;background:rgba(8,17,31,.97);box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(0,0,0,.5)}
.hradio__vol[hidden]{display:none}
.hradio__vol input{display:block;width:170px;accent-color:var(--yellow)}
@media (max-width:1024px){.hradio__txt{display:none}.hradio__btn{padding:0 6px 0 14px}}
@media (max-width:760px){.hradio{display:none!important}}

/* шапка з пошуком відкріплена (03.10.2026) */
body.prem .hdr,.hdr{position:relative;top:auto}

/* слайд «Кузовні роботи»: «Як доїхати» — Google Maps (ST Service, смт Чагор), 03.10.2026 */
.bnr__map{position:absolute;right:12px;bottom:12px;z-index:1;display:flex;align-items:center;gap:8px;max-width:calc(50% - 12px);padding:7px 14px 7px 10px;border-radius:999px;
  color:var(--text);background:rgba(8,17,31,.78);box-shadow:inset 0 0 0 1px var(--line2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-decoration:none;transition:box-shadow .2s,background .2s}
.bnr__map:hover{text-decoration:none;color:var(--text);background:rgba(8,17,31,.9);box-shadow:inset 0 0 0 1px var(--yellow)}
.bnr__map:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.bnr__map-ico{flex:none;color:var(--yellow)}
.bnr__map-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.bnr__map-txt b{font-size:13px;font-weight:700;letter-spacing:.02em}
.bnr__map-smt{font-style:normal}
.bnr__map-txt span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .bnr__map{right:6px;bottom:6px;gap:6px;padding:5px 10px 5px 7px;max-width:calc(46% - 6px)}
  .bnr__map-ico{width:15px;height:15px}
  .bnr__map-txt b{font-size:11.5px}
  .bnr__map-txt span{font-size:9.5px}
  .bnr__map-smt{display:none}
}

/* ===== 03.10.2026: «Вибране», «Нещодавно переглянуті», «Поділитися», «Купити в один клік» ===== */
/* сердечко */
.favb{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;cursor:pointer;color:var(--text2);background:transparent;transition:color .15s,background .15s,box-shadow .15s,transform .15s}
.favb .i-fill{fill:transparent;transition:fill .15s}
.favb.is-on{color:var(--yellow)}
.favb.is-on .i-fill{fill:currentColor}
.favb:focus-visible,.pmt:focus-visible,.rv__card:focus-visible,.shr__it:focus-visible,.sheet__x:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.favb--card{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(8,17,31,.62);box-shadow:inset 0 0 0 1px var(--line2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.prem .favb--card{top:16px;right:16px}
.favb--card:hover{color:#fff;background:rgba(8,17,31,.82)}
.favb--card:active{transform:scale(.92)}
@media (max-width:760px){.favb--card,.prem .favb--card{top:12px;right:12px;width:34px;height:34px}}
/* інструменти в картці товару: вибране + поділитися */
.pm__tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:-4px}
.favb--pm,.pmt{height:36px;padding:0 14px 0 11px;border-radius:999px;font-size:13px;font-weight:650;letter-spacing:.01em;color:var(--text2);background:transparent;box-shadow:inset 0 0 0 1px var(--line2);display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer}
.favb--pm:hover,.pmt:hover{color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.favb--pm.is-on{color:var(--yellow);box-shadow:inset 0 0 0 1px rgba(255,215,0,.55);background:rgba(255,215,0,.06)}
/* «Купити в один клік» */
.btn--1c{background:transparent;color:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--yellow)}
.prem .btn--1c{background:transparent;color:var(--yellow);box-shadow:inset 0 0 0 1.5px rgba(255,215,0,.85)}
.btn--1c:hover,.prem .btn--1c:hover{background:rgba(255,215,0,.08)}
.btn svg{flex:none}
/* чіп «Вибране» */
.chip__fav{display:inline-flex;align-items:center;gap:6px}
.chip__fav svg{color:var(--yellow)}
.chip__fav .i-fill{fill:currentColor}
/* нещодавно переглянуті */
.rv{margin-top:8px;margin-bottom:28px}
.rv__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.rv__head h2{display:flex;align-items:center;gap:10px;margin:0;font-size:19px}
.rv__head h2 svg{color:var(--yellow)}
.rv__clr{border:0;background:none;color:var(--muted);font-size:13px;font-weight:600;padding:6px 2px;cursor:pointer}
.rv__clr:hover{color:var(--text)}
.rv{--rvpad:20px}
@media (max-width:760px){.rv{--rvpad:16px}}
.rv__list{list-style:none;margin:0 calc(-1 * var(--rvpad));padding:2px var(--rvpad) 10px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.rv__list::-webkit-scrollbar{display:none}
.rv__it{flex:0 0 150px;scroll-snap-align:start}
.rv__card{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;padding:8px 8px 12px;border:0;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:box-shadow .2s}
.rv__card:hover{box-shadow:inset 0 0 0 1px var(--line2)}
.rv__img{display:block;aspect-ratio:1;border-radius:11px;overflow:hidden;background:#0b1524}
.rv__img img{width:100%;height:100%;object-fit:cover}
.rv__n{font-size:12.5px;font-weight:650;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px}
.rv__p{font-size:13px;font-weight:750;color:var(--yellow);padding:0 2px;margin-top:auto}
@media (min-width:900px){.rv__it{flex-basis:170px}.rv__list{margin:0;padding:2px 0 10px}}
/* нижній аркуш */
.sheet{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
.sheet__bg{position:absolute;inset:0;background:rgba(3,7,14,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:shFade .2s ease}
.sheet__box{position:relative;width:100%;max-width:460px;max-height:calc(100% - 40px);overflow:auto;background:var(--surface);color:var(--text2);border-radius:24px 24px 0 0;box-shadow:0 0 0 1px var(--line),0 -20px 60px rgba(0,0,0,.5);padding:26px 22px calc(22px + env(safe-area-inset-bottom));animation:shUp .26s cubic-bezier(.2,.8,.2,1)}
@media (min-width:761px){.sheet{align-items:center}.sheet__box{border-radius:24px;padding-bottom:24px}}
@keyframes shUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes shFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet__box,.sheet__bg{animation:none}}
.sheet__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.07);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line2)}
.sheet__ttl{display:flex;align-items:center;gap:9px;margin:0 40px 6px 0;font-size:19px;font-weight:750;color:var(--text);line-height:1.3}
.sheet__ttl svg{color:var(--yellow)}
.sheet__sub{margin:0 0 16px;color:var(--muted);font-size:13.5px}
.sheet__url{margin:14px 0 0;font-size:12px;color:var(--muted);word-break:break-all}
/* меню «Поділитися» */
.shr{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shr__it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:86px;padding:12px 6px;border:0;border-radius:16px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font:inherit;font-size:12.5px;font-weight:650;text-align:center;cursor:pointer;text-decoration:none!important}
.shr__it svg{color:var(--yellow)}
.shr__it:hover{box-shadow:inset 0 0 0 1px var(--line2);color:#fff}
/* швидке замовлення */
.qk__item{display:flex;align-items:center;gap:12px;margin:14px 0 18px;padding:10px;border-radius:16px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.qk__item img{width:64px;height:64px;border-radius:11px;object-fit:cover;flex:none;background:#0b1524}
.qk__item b{display:block;color:var(--text);font-size:14px;font-weight:700;line-height:1.35}
.qk__item span{display:block;margin-top:3px;font-size:13px;color:var(--yellow);font-weight:700}
.qk__form{display:grid;gap:12px}
.qk__form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.qk__form input{height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--text);padding:0 14px;font:inherit;font-size:16px;outline:none}
.qk__form input:focus{border-color:var(--yellow)}
.qk__form input.is-bad{border-color:#ff8a8a}
.qk__err{margin:0;color:#ffb3b3;font-size:13px;font-weight:600}
.qk__go{margin-top:4px}
.qk__go:disabled{opacity:.7;cursor:progress}
.qk__note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.qk__done{display:grid;gap:10px;text-align:center;justify-items:center}
.qk__done .sheet__ttl{margin:0;justify-content:center}
.qk__done p{margin:0;line-height:1.55}
.qk__done .btn{width:100%}
.qk__done--err{text-align:left;justify-items:stretch}
.qk__done--err .sheet__ttl{justify-content:flex-start;margin-right:40px}
.qk__ok{color:var(--yellow);margin-top:4px}
.qk__no{font-size:13px;color:var(--muted)}
.qk__no b{color:var(--text);letter-spacing:.06em}
.qk__done p b{white-space:nowrap}

/* ===== банер «Кузовний ремонт»: відео з TikTok @alex_bespik (03.10.2026) =====
   телефон уже надрукований у відео (зліва внизу) — поверх нього прозора tel:-зона, без дублювання номера */
.bnr__vid{width:100%;height:auto;aspect-ratio:1672/940;object-fit:cover;object-position:50% 50%;background:#0b0f16 center/cover no-repeat} /* постер — атрибут poster, ставиться ліниво (index.html) */
.bnr__vid::-webkit-media-controls{display:none!important}
.bnr__tel{position:absolute;left:2.5%;top:75%;width:52%;height:17.5%;z-index:1;display:block;border-radius:999px;color:transparent;
  -webkit-tap-highlight-color:rgba(255,215,0,.18);transition:box-shadow .2s,background .2s}
.bnr__tel:hover{text-decoration:none;background:rgba(255,215,0,.06);box-shadow:inset 0 0 0 1px rgba(255,215,0,.55)}
.bnr__tel:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.bnr__tel-ico,.bnr__tel-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.bnr__tel{transition:none}}

/* ===== 03.10.2026: анімація банера (слайд Meiji з двома фарбопультами в 3D + Акції/Новинки; відео-слайд кузовних робіт не чіпаємо) =====
   .bnr--anim ставить js/app.js (лише без prefers-reduced-motion); .is-on — слайд у кадрі, знімається коли слайд пішов → анімація перезапускається.
   Лише transform/opacity (GPU). На десктопі з мишею js/app.js задає --mx/--my (-1…1) на .hero__frame → нахил сцени й паралакс шарів. */
@keyframes bnrIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes bnrInX{from{opacity:0;transform:translate3d(-22px,0,0)}to{opacity:1;transform:none}}
@keyframes bnrFade{from{opacity:0}to{opacity:1}}
@keyframes hmStageIn{0%{transform:translate3d(2%,0,-36px) rotateY(-15deg) rotateX(4deg)}100%{transform:translate3d(0,0,0) rotateY(-6deg) rotateX(2deg)}}
/* 03.10.2026 (швидкий перший екран): м'яка поява тексту без старту з opacity:0 — текст і фото видно з першого кадру, анімація лише «доводить» */
@keyframes hmTxtIn{from{opacity:.45;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes hmTxtInX{from{opacity:.45;transform:translate3d(-10px,0,0)}to{opacity:1;transform:none}}
@keyframes hmLogoIn{0%{opacity:0;transform:scale(.72) rotate(-8deg)}60%{opacity:1;transform:scale(1.07) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes hmSway{0%,100%{transform:rotateY(-6deg) rotateX(2deg)}50%{transform:rotateY(11deg) rotateX(-3deg)}}
@keyframes hmFloat{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-3.2%,0) rotate(-1.2deg)}}
@keyframes hmGlint{0%{transform:translate3d(-160%,0,0) rotate(18deg);opacity:0}5%{opacity:1}30%{transform:translate3d(300%,0,0) rotate(18deg);opacity:1}34%,100%{transform:translate3d(300%,0,0) rotate(18deg);opacity:0}}
@keyframes hmGlow{0%{opacity:0;transform:translate3d(6%,4%,0) scale(.9)}20%{opacity:1}100%{opacity:1;transform:translate3d(-7%,-5%,0) scale(1.08)}}
@keyframes hmRim{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes hmWave{0%,100%{transform:skewY(0) scaleX(1)}25%{transform:skewY(-6deg) scaleX(.94)}50%{transform:skewY(2deg) scaleX(.99)}75%{transform:skewY(4.5deg) scaleX(.96)}}
@keyframes hmFlagSh{from{transform:translateX(0)}to{transform:translateX(60px)}}
@keyframes hmLogo{0%{opacity:0;transform:translate3d(10px,0,0) scale(.86)}100%{opacity:1;transform:none}}
@keyframes bnrSheen{0%{transform:translate3d(-120%,0,0) skewX(-18deg);opacity:0}6%{opacity:1}30%{transform:translate3d(330%,0,0) skewX(-18deg);opacity:1}34%,100%{transform:translate3d(330%,0,0) skewX(-18deg);opacity:0}}
@keyframes bnrItIn{from{opacity:0;transform:translate3d(0,14px,-60px) rotateX(24deg)}to{opacity:1;transform:none}}

/* --- слайд Meiji: м'яке світіння фону (жовто-синє) --- */
.prem .hm::before{content:"";position:absolute;z-index:-2;top:-25%;right:-15%;width:85%;height:150%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,215,0,.18),rgba(255,215,0,.07) 45%,transparent 72%),radial-gradient(60% 50% at 30% 70%,rgba(64,120,220,.16),transparent 70%)}
.prem .hm__txt{transform:translate3d(calc(var(--mx,0) * -5px),calc(var(--my,0) * -4px),0);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
/* --- два фарбопульти: FINER-CORE × LIBERTY WALK (рожеве золото, позаду) і FINER-CORE Black Edition (попереду) --- */
.prem .hm__pic--duo{aspect-ratio:.74;right:1.5%;perspective:620px;perspective-origin:50% 45%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 100%)}
@media (min-width:761px){.prem .hm__pic--duo{aspect-ratio:.86;right:5%}}
/* контрове світло: тепле мідне за Liberty Walk, холодне за чорним глянцем; зсувається протилежно нахилу (паралакс) */
.prem .hm__pic--duo::before{content:"";position:absolute;inset:-6%;z-index:0;pointer-events:none;
  background:radial-gradient(34% 30% at 34% 32%,rgba(255,150,95,.34),rgba(220,120,80,.12) 55%,transparent 78%),
             radial-gradient(36% 30% at 66% 66%,rgba(120,165,255,.30),rgba(80,120,220,.10) 55%,transparent 80%);
  transform:translate3d(calc(var(--mx,0) * 8px),calc(var(--my,0) * 6px),0);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hm__tilt,.hm__stage{position:absolute;inset:0;z-index:1;transform-style:preserve-3d}
.hm__tilt{transform:rotateY(calc(var(--mx,0) * 9deg)) rotateX(calc(var(--my,0) * -6deg));transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hm__stage{transform:rotateY(-6deg) rotateX(2deg);transform-origin:50% 50%}
.hm__gun{position:absolute;display:block;transform-style:preserve-3d}
.hm__gun--lw{left:2%;top:8%;width:68%;transform:translate3d(0,0,-46px)}
.hm__gun--blk{right:0;bottom:5%;width:72%;transform:translate3d(0,0,34px)}
.hm__fl{position:relative;display:block}
.hm__g{display:block;width:100%;height:auto}
.hm__gun--lw .hm__g{filter:drop-shadow(0 0 5px rgba(255,160,110,.45)) drop-shadow(0 8px 14px rgba(0,0,0,.55)) brightness(.94)}
.hm__gun--blk .hm__g{filter:drop-shadow(0 0 3px rgba(150,185,255,.42)) drop-shadow(0 12px 16px rgba(0,0,0,.6))}
/* відблиск лише по металу: шар обрізаний альфою свого фото, смуга рухається transform-ом */
.hm__shine{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hm__gun--lw .hm__shine{-webkit-mask-image:url(../img/hero-liberty.webp?v=1);mask-image:url(../img/hero-liberty.webp?v=1)}
.hm__gun--blk .hm__shine{-webkit-mask-image:url(../img/hero-meiji-black.webp?v=1);mask-image:url(../img/hero-meiji-black.webp?v=1)}
.hm__shine::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;opacity:0}
.hm__gun--lw .hm__shine::before{background:linear-gradient(90deg,transparent 0,rgba(255,232,214,.10) 30%,rgba(255,244,232,.66) 50%,rgba(255,232,214,.10) 70%,transparent 100%)}
.hm__gun--blk .hm__shine::before{background:linear-gradient(90deg,transparent 0,rgba(220,232,255,.08) 32%,rgba(240,246,255,.55) 50%,rgba(220,232,255,.08) 68%,transparent 100%)}
/* прапор Японії біля «Офіційний представник» */
.prem .hm__flag{display:inline-block;width:18px;height:12px;margin:0 7px 0 0;vertical-align:-2px;border-radius:2px;
  box-shadow:0 0 0 .5px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.45);transform-origin:0 50%}
.prem .hm__flag svg{display:block;width:100%;height:100%}
/* логотип Meiji поруч із заголовком «Meiji» */
.prem .hm__brand{display:inline-flex;align-items:center;gap:.28em;white-space:nowrap}
.prem .hm__logo{display:block;position:relative;height:1.5em;aspect-ratio:400/252;width:auto}
/* бейдж Meiji шарами (03.10.2026): червоне коло, горила, напис meiji — горила рухається окремо всередині кола */
.prem .hm__lg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.prem .hm__lg--disc,.prem .hm__lg--word{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.prem .hm__lg--disc{transform-origin:63.9% 52%}
.prem .hm__lg--gor{transform-origin:63.9% 97%}
.prem .hm__lg-glow{position:absolute;left:25.9%;top:-8.5%;width:76%;height:121%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,40,30,.55),rgba(255,30,20,.18) 55%,transparent 75%)}
.prem .hm__lg-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:url(../img/meiji-logo-badge.webp?v=1) center/100% 100% no-repeat;mask:url(../img/meiji-logo-badge.webp?v=1) center/100% 100% no-repeat}
.prem .hm__lg-shine::before{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:26%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 30%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.12) 70%,transparent)}
@keyframes hmLogoPop{0%{opacity:0;transform:scale(.35) rotate(-14deg)}45%{opacity:1;transform:scale(1.16) rotate(4deg)}65%{transform:scale(.94) rotate(-1.5deg)}82%{transform:scale(1.03) rotate(.5deg)}100%{opacity:1;transform:none}}
/* «живий» цикл 3,6 с: два удари в груди (стиск + підйом), потім спокійне погойдування головою/тілом */
@keyframes hmGor{0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
  8%{transform:translate3d(0,-2.5%,0) scale(1.06,1.04)}13%{transform:translate3d(0,0,0) scale(.99,1.01)}
  19%{transform:translate3d(0,-2.5%,0) scale(1.06,1.04)}25%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-.6%,-1.6%,0) rotate(-2.2deg)}75%{transform:translate3d(.6%,-.8%,0) rotate(1.6deg)}}
@keyframes hmDisc{0%,25%,100%{transform:scale(1)}9%,20%{transform:scale(1.035)}}
@keyframes hmLgGlow{0%,30%,100%{opacity:0;transform:scale(.9)}9%,20%{opacity:.95;transform:scale(1.06)}14%{opacity:.5;transform:scale(1)}}
@keyframes hmLgShine{0%{transform:translate3d(-130%,0,0) skewX(-20deg);opacity:0}4%{opacity:1}22%{transform:translate3d(420%,0,0) skewX(-20deg);opacity:1}25%,100%{transform:translate3d(420%,0,0) skewX(-20deg);opacity:0}}
@media (max-width:760px){.prem .hm__flag{width:15px;height:10px;margin-right:5px;vertical-align:-1.5px}.prem .hm__logo{height:1.55em}}

/* --- запуск анімацій на активному слайді --- */
.bnr--anim .bnr__slide:not(.is-on) :is(.hm__eyebrow,.hm__ttl,.hm__line,.hm__pic,.hm__logo,.bnr__ttl,.bnr__sub,.bnr__it){opacity:0}
.bnr--anim .bnr__slide.is-on .hm__eyebrow{animation:hmTxtInX .45s cubic-bezier(.22,.61,.36,1) both}
.bnr--anim .bnr__slide.is-on .hm__ttl{animation:hmTxtIn .45s cubic-bezier(.22,.61,.36,1) .05s both}
.bnr--anim .bnr__slide.is-on .hm__logo{animation:hmLogoIn .55s cubic-bezier(.3,.7,.4,1) .12s both}
.bnr--anim .bnr__slide.is-on .hm__lg--gor{will-change:transform;animation:hmGor 3.6s ease-in-out .7s infinite}
.bnr--anim .bnr__slide.is-on .hm__lg--disc{animation:hmDisc 3.6s ease-in-out .7s infinite}
.bnr--anim .bnr__slide.is-on .hm__lg-glow{animation:hmLgGlow 3.6s ease-in-out .7s infinite}
.bnr--anim .bnr__slide.is-on .hm__lg-shine::before{animation:hmLgShine 7.2s cubic-bezier(.45,.05,.35,1) 1.4s infinite}
.bnr--anim .bnr__slide.is-on .hm__jq{animation:hmTxtIn .45s cubic-bezier(.22,.61,.36,1) .1s both}
.bnr--anim .bnr__slide.is-on .hm__line{animation:hmTxtIn .45s cubic-bezier(.22,.61,.36,1) .15s both}
.bnr--anim .bnr__slide.is-on .hm__flag{animation:hmWave 3.2s ease-in-out .3s infinite}
.bnr--anim .bnr__slide.is-on .hm__flag-sh{animation:hmFlagSh 2.4s linear .3s infinite}
.bnr--anim .bnr__slide.is-on .hm::before{animation:hmGlow 10s ease-out both alternate infinite}
/* фото фарбопультів (LCP) не ховаємо й не проявляємо з opacity:0 — малюється одразу; рух лише transform */
.bnr--anim .bnr__slide.is-on .hm__pic--pal{animation:bnrFade .6s ease-out both}
.bnr--anim .bnr__slide.is-on .hm__pic--duo::before{animation:hmRim 5s ease-in-out 1s infinite}
.bnr--anim .bnr__slide.is-on .hm__stage{will-change:transform;animation:hmStageIn .8s cubic-bezier(.2,.7,.25,1) both,hmSway 7s ease-in-out .8s infinite}
.bnr--anim .bnr__slide.is-on .hm__gun--blk .hm__fl{animation:hmFloat 5.2s ease-in-out 1s infinite}
.bnr--anim .bnr__slide.is-on .hm__gun--lw .hm__fl{animation:hmFloat 6.4s ease-in-out -2.2s infinite}
/* відблиск іде по обох корпусах кожні 3,5 с (двічі за цикл повороту сцени 7 с), по чорному — трохи пізніше, ніби світло пройшло через сцену */
.bnr--anim .bnr__slide.is-on .hm__gun--lw .hm__shine::before{animation:hmGlint 3.5s cubic-bezier(.45,.05,.35,1) .8s infinite}
.bnr--anim .bnr__slide.is-on .hm__gun--blk .hm__shine::before{animation:hmGlint 3.5s cubic-bezier(.45,.05,.35,1) 1.15s infinite}

/* --- Акції / Новинки: 3D-поява карток, нахил за мишею, відблиск по рамці --- */
.bnr__promo{isolation:isolate}
.prem .bnr__items{perspective:700px}
.prem .bnr__items>.bnr__it{transform-origin:50% 100%}
.prem .bnr__promo .bnr__items{transform:rotateY(calc(var(--mx,0) * 5deg)) rotateX(calc(var(--my,0) * -4deg));transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.prem .bnr__promo::before{content:"";position:absolute;z-index:2;top:0;bottom:0;left:0;width:28%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 45%,rgba(255,215,0,.10) 50%,rgba(255,255,255,.08) 55%,transparent)}
.bnr--anim .bnr__slide.is-on .bnr__ttl{animation:bnrInX .7s cubic-bezier(.22,.61,.36,1) .06s both}
.bnr--anim .bnr__slide.is-on .bnr__sub{animation:bnrIn .7s cubic-bezier(.22,.61,.36,1) .16s both}
.bnr--anim .bnr__slide.is-on .bnr__it{animation:bnrItIn .8s cubic-bezier(.22,.61,.36,1) .26s both}
.bnr--anim .bnr__slide.is-on .bnr__it:nth-child(2){animation-delay:.36s}
.bnr--anim .bnr__slide.is-on .bnr__it:nth-child(3){animation-delay:.46s}
.bnr--anim .bnr__slide.is-on .bnr__promo::before{animation:bnrSheen 6s cubic-bezier(.45,.05,.35,1) 1.1s infinite}

@media (prefers-reduced-motion:reduce){
  .bnr--anim .bnr__slide :is(.hm__eyebrow,.hm__ttl,.hm__jq,.hm__line,.hm__pic,.hm__logo,.hm__flag,.hm__flag-sh,.hm__stage,.hm__fl,.bnr__ttl,.bnr__sub,.bnr__it){animation:none!important;opacity:1!important}
  .bnr--anim .bnr__slide :is(.hm__eyebrow,.hm__ttl,.hm__jq,.hm__line,.hm__logo,.hm__flag,.hm__flag-sh,.hm__fl,.bnr__ttl,.bnr__sub,.bnr__it){transform:none!important}
  .prem .hm::before,.prem .bnr__promo::before,.hm__shine::before{animation:none!important;opacity:0!important}
  .prem .hm__lg,.prem .hm__lg-glow,.prem .hm__lg-shine::before{animation:none!important;transform:none!important}
  .prem .hm__lg-glow,.prem .hm__lg-shine::before{opacity:0!important}
  .prem .hm__pic--duo::before{animation:none!important}
  .prem .hm__txt,.hm__tilt,.prem .hm__pic--duo::before,.prem .bnr__promo .bnr__items{transition:none!important}
}

/* 03.10.2026: позначка «Ексклюзив 💎» + друга позначка під першою; рядок «Лімітована серія» в описі товару */
.promo.promo--n2{top:calc(16px + 30px)}
@media (max-width:760px){.promo.promo--n2{top:calc(12px + 26px)}}
.pm__ltd{display:block;margin:0 0 8px;font-weight:800;color:var(--yellow)}

/* 03.10.2026: «Ексклюзив 💎» — золотий неон; діамант крутиться (rotateY) і світить холодним неоном. Анімації — лише transform/opacity */
.promo.promo--excl,.prem .promo.promo--excl{display:inline-flex;align-items:center;gap:5px;text-transform:none;letter-spacing:.04em;font-weight:800;color:#ffd76a;
  background:rgba(10,8,4,.92);border:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(255,207,74,.95),inset 0 0 8px rgba(255,190,40,.28),0 0 6px rgba(255,196,48,.55),0 0 14px rgba(255,170,0,.28)}
.promo--excl::before{content:"";position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;opacity:.55;
  box-shadow:0 0 10px 1px rgba(255,200,60,.55),inset 0 0 10px rgba(255,200,60,.25)}
.promo__xt{position:relative;color:#ffd76a;
  text-shadow:0 0 1px #fff6d6,0 0 3px #ffe08a,0 0 7px rgba(255,200,60,.95),0 0 13px rgba(255,170,20,.75),0 0 22px rgba(255,150,0,.45)}
.promo__gem{position:relative;display:inline-block;width:1.35em;height:1.15em;perspective:60px;flex:none}
.promo__gem-in{position:absolute;inset:0;display:block;transform-style:preserve-3d;
  filter:drop-shadow(0 0 1.5px #e9fdff) drop-shadow(0 0 4px rgba(110,230,255,.95)) drop-shadow(0 0 8px rgba(70,200,255,.6))}
.promo__gem-in svg{display:block;width:100%;height:100%}
.promo__gem-glow{position:absolute;left:50%;top:50%;width:2.4em;height:2.4em;margin:-1.2em 0 0 -1.2em;border-radius:50%;pointer-events:none;opacity:.55;
  background:radial-gradient(closest-side,rgba(190,245,255,.75),rgba(90,215,255,.32) 45%,transparent 72%)}
@keyframes exclSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes exclCold{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:.95;transform:scale(1.12)}}
@keyframes exclFlicker{0%,18%,22%,62%,64%,70%,100%{opacity:1}20%{opacity:.72}63%{opacity:.82}67%{opacity:.9}}
@keyframes exclPulse{0%,100%{opacity:.35}50%{opacity:.85}}
.promo__gem-in{animation:exclSpin 2.8s linear infinite}
.promo__gem-glow{animation:exclCold 1.4s ease-in-out infinite}
.promo__xt{animation:exclFlicker 4.2s linear infinite}
.promo--excl::before{animation:exclPulse 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.promo__gem-in,.promo__gem-glow,.promo__xt,.promo--excl::before{animation:none!important}}
/* «💎 Ексклюзив» — окремий розділ поруч із «Новинки» (той самий вигляд чипа, що й «Акції»/«Новинки») */
.chip[data-cat="excl"]{justify-content:center;gap:10px}
/* кошик після замовлення: екран «Дякуємо!» + запит «Очистити кошик?» (03.10.2026) */
.cdone{text-align:center;padding:22px 6px 8px}
.cdone__ico{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;color:#7ee39f;background:radial-gradient(circle at 50% 40%,rgba(63,191,106,.22),rgba(63,191,106,.06) 70%);border:1px solid rgba(126,227,159,.45);box-shadow:0 0 22px rgba(63,191,106,.25);margin-bottom:12px;animation:cdonePop .5s cubic-bezier(.2,1.4,.4,1) both}
.cdone__t{margin:0 0 8px;font-size:19px;line-height:1.3;color:var(--text)}
.cdone__s{margin:0 auto 18px;max-width:34ch;color:var(--text2);font-size:14.5px;line-height:1.5}
.cdone .cactions{text-align:left}
@keyframes cdonePop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.cprompt{position:fixed;z-index:60;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:flex-start;padding:14px 14px 14px 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(14,34,74,.98),rgba(8,20,46,.98));border:1px solid rgba(255,215,0,.45);box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(16px);opacity:0;transition:transform .26s ease,opacity .26s ease}
.cprompt.on{transform:none;opacity:1}
.cprompt[hidden]{display:none}
.cprompt__ico{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--yellow);background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3)}
.cprompt__b{flex:1;min-width:0}
.cprompt__t{margin:0 0 2px;font-weight:700;font-size:15.5px;color:var(--text)}
.cprompt__s{margin:0 0 10px;font-size:13.5px;line-height:1.4;color:var(--text2)}
.cprompt__a{display:flex;gap:8px;flex-wrap:wrap}
.cprompt__a .btn{flex:1 1 120px;min-height:42px;padding:8px 12px;font-size:14px}
@media (min-width:761px){.cprompt{left:auto;right:24px;bottom:24px;width:390px}}
@media (prefers-reduced-motion:reduce){.cprompt{transition:none}.cdone__ico{animation:none}}
/* «Вибране» у нижньому меню (6 вкладок) */
.prem .tabbar .tab--fav.on .tab__heart{fill:currentColor;fill-opacity:.22}
.prem .tabbar .tab__ico.bump{animation:tabBump .6s cubic-bezier(.2,1.5,.4,1)}
.prem .tabbar .tab__ico.bump .badge{animation:tabBadge .6s ease}
@keyframes tabBump{0%{transform:scale(1)}30%{transform:scale(1.32)}55%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes tabBadge{0%,100%{transform:scale(1)}40%{transform:scale(1.35)}}
@media (max-width:400px){
  .prem .tabbar{padding-left:1px;padding-right:1px}
  .prem .tabbar a,.prem .tabbar button{font-size:10.5px;letter-spacing:-.01em}
  .prem .tabbar .badge{right:-11px}
}
@media (max-width:370px){.prem .tabbar a,.prem .tabbar button{font-size:10px;letter-spacing:-.02em}}
@media (max-width:330px){.prem .tabbar a,.prem .tabbar button{font-size:9.5px}}
@media (prefers-reduced-motion:reduce){.prem .tabbar .tab__ico.bump,.prem .tabbar .tab__ico.bump .badge{animation:none}}
/* ===== слайд PALINAL (2-й): прапор Італії, логотип з блиском, дві банки в 3D (тепле контурне світло) ===== */
.prem .hm--pal{background:radial-gradient(70% 90% at 78% 50%,#2a2216 0%,#141218 58%,#0a0d16 100%)}
.prem .hm--pal::before{background:radial-gradient(closest-side,rgba(255,196,0,.20),rgba(255,170,0,.07) 45%,transparent 72%),radial-gradient(60% 50% at 30% 70%,rgba(220,40,30,.16),transparent 70%)}
.prem .hm__pic--pal::before{background:radial-gradient(34% 30% at 32% 34%,rgba(255,200,70,.34),rgba(230,150,40,.12) 55%,transparent 78%),
  radial-gradient(36% 30% at 68% 64%,rgba(235,60,40,.30),rgba(200,40,30,.10) 55%,transparent 80%)}
.hm__can--pp{left:3%;top:9%;width:58%;transform:translate3d(0,0,-46px)}
.hm__can--sp{right:2%;bottom:5%;width:50%;transform:translate3d(0,0,34px)}
.hm__can--pp .hm__g{filter:drop-shadow(0 0 4px rgba(255,190,90,.5)) drop-shadow(0 8px 14px rgba(0,0,0,.55)) brightness(.86)}
.hm__can--sp .hm__g{filter:drop-shadow(0 0 4px rgba(255,170,70,.55)) drop-shadow(0 12px 16px rgba(0,0,0,.6))}
.hm__can--pp .hm__shine{-webkit-mask-image:url(../img/hero-pal-polypal.webp?v=1);mask-image:url(../img/hero-pal-polypal.webp?v=1)}
.hm__can--sp .hm__shine{-webkit-mask-image:url(../img/hero-pal-speed.webp?v=1);mask-image:url(../img/hero-pal-speed.webp?v=1)}
.hm__can--pp .hm__shine::before,.hm__can--sp .hm__shine::before{background:linear-gradient(90deg,transparent 0,rgba(255,236,200,.10) 30%,rgba(255,248,232,.66) 50%,rgba(255,236,200,.10) 70%,transparent 100%)}
.prem .hm--pal .hm__eyebrow{color:#ffd23c}
.prem .hm__plogo{position:relative;display:block;width:min(100%,300px);aspect-ratio:760/234;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.prem .hm__plogo img{display:block;width:100%;height:100%}
.prem .hm__plogo-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:url(../img/brand-palinal-t.webp?v=1) center/100% 100% no-repeat;mask:url(../img/brand-palinal-t.webp?v=1) center/100% 100% no-repeat}
.prem .hm__plogo-shine::before{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:26%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 30%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.14) 70%,transparent)}
.prem .hm--pal .hm__jq{letter-spacing:.16em;margin-top:10px}
@media (max-width:760px){.prem .hm__plogo{width:min(100%,168px)}.prem .hm--pal .hm__jq{margin-top:6px;font-size:9.5px;letter-spacing:.12em;line-height:1.35}}
.bnr--anim .bnr__slide:not(.is-on) .hm__plogo{opacity:0}
.bnr--anim .bnr__slide.is-on .hm__plogo{animation:hmLogoPop .9s cubic-bezier(.3,.7,.4,1) .3s both}
.bnr--anim .bnr__slide.is-on .hm__plogo-shine::before{animation:hmLgShine 6s cubic-bezier(.45,.05,.35,1) 1.5s infinite}
.bnr--anim .bnr__slide.is-on .hm__can--sp .hm__fl{animation:hmFloat 5.2s ease-in-out 1s infinite}
.bnr--anim .bnr__slide.is-on .hm__can--pp .hm__fl{animation:hmFloat 6.4s ease-in-out -2.2s infinite}
.bnr--anim .bnr__slide.is-on .hm__can--pp .hm__shine::before{animation:hmGlint 3.5s cubic-bezier(.45,.05,.35,1) 1.2s infinite}
.bnr--anim .bnr__slide.is-on .hm__can--sp .hm__shine::before{animation:hmGlint 3.5s cubic-bezier(.45,.05,.35,1) 1.55s infinite}
@media (prefers-reduced-motion:reduce){
  .bnr--anim .bnr__slide .hm__plogo{animation:none!important;opacity:1!important;transform:none!important}
  .prem .hm__plogo-shine::before{animation:none!important;opacity:0!important}
}
@media (min-width:761px){.prem .hm--pal .hm__jq{font-size:17px;letter-spacing:.14em}}

/* PALINAL: пігулка «Завод PALINAL» на карті */
.hm-palwrap{position:relative}
.hm-palwrap .bnr__map--pal{z-index:3}

/* ---------- «Підібрати фарбопульт» (#pick): стрічка під банером, CTA в категоріях фарбопультів, модалка-квіз ---------- */
.pickstrip,.pickcta{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none!important;border-radius:18px;
  background:linear-gradient(120deg,rgba(255,215,0,.10),rgba(255,255,255,.03) 45%,rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,215,0,.22),0 10px 30px rgba(0,0,0,.25);transition:box-shadow .2s,transform .2s}
.pickstrip{margin:14px 0 4px;padding:12px 16px}
.pickstrip:hover,.pickcta:hover{box-shadow:inset 0 0 0 1px rgba(255,215,0,.5),0 14px 36px rgba(0,0,0,.3);transform:translateY(-1px)}
.pickstrip__ic,.pickcta__ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--yellow);background:rgba(255,215,0,.08);box-shadow:inset 0 0 0 1px rgba(255,215,0,.25)}
.pickstrip__t,.pickcta__t{display:flex;flex-direction:column;min-width:0;line-height:1.3;text-align:left}
.pickstrip__t b,.pickcta__t b{font-size:15.5px;font-weight:800;color:var(--text)}
.pickstrip__t span,.pickcta__t span{font-size:13px;color:var(--muted)}
.pickstrip__go{margin-left:auto;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--navy-text);background:var(--yellow)}
.pickcta{width:100%;border:0;font:inherit;padding:12px 14px;margin:0 0 16px;cursor:pointer}
.pickcta__go{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:12px;font-weight:800;font-size:14px;color:var(--navy-text);background:var(--yellow)}
.modal--pick .modal__box{width:min(640px,100%);padding:24px 22px 22px}
.pk__ttl{margin:0 40px 14px 0;font-size:21px}
.pk__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pk__back{flex:none;width:38px;height:38px;border-radius:12px;border:0;display:grid;place-items:center;color:var(--text);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line2)}
.pk__back--ph{visibility:hidden}
.pk__prog{flex:1;display:flex;gap:6px}
.pk__prog span{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1)}
.pk__prog span.on{background:linear-gradient(90deg,var(--yellow2),var(--yellow-hi))}
.pk__cnt{flex:none;font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.02em}
.pk__q{margin:4px 0 14px;font-size:19px;line-height:1.3}
.pk__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk__opt{display:flex;align-items:center;gap:12px;min-height:74px;padding:12px;border:0;border-radius:16px;text-align:left;color:var(--text);
  background:linear-gradient(180deg,var(--surface2),var(--surface));box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .15s,transform .15s}
.pk__opt:hover{box-shadow:inset 0 0 0 1px rgba(255,215,0,.55);transform:translateY(-1px)}
.pk__opt.on{box-shadow:inset 0 0 0 1.5px var(--yellow),0 0 0 3px rgba(255,215,0,.12)}
.pk__ic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--yellow);background:rgba(255,215,0,.08);box-shadow:inset 0 0 0 1px rgba(255,215,0,.2)}
.pk__ot{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pk__ot b{font-size:15px;font-weight:800}
.pk__ot span{font-size:12.5px;color:var(--muted)}
.pk__note{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.pk__sum{margin:-6px 0 14px;font-size:14px;color:var(--text2)} .pk__sum b{color:var(--yellow)}
.pk__res{display:flex;flex-direction:column;gap:10px}
.pk__card{display:flex;gap:12px;padding:12px;border-radius:16px;background:linear-gradient(180deg,var(--surface2),var(--surface));box-shadow:inset 0 0 0 1px var(--line2)}
.pk__card--top{box-shadow:inset 0 0 0 1.5px rgba(255,215,0,.6),0 12px 30px rgba(0,0,0,.25)}
.pk__img{flex:none;width:92px;height:92px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#0b1626}
.pk__img img{width:100%;height:100%;object-fit:cover}
.pk__cb{min-width:0;flex:1}
.pk__name{display:block;padding:0;border:0;background:none;color:var(--text);font-weight:800;font-size:15px;line-height:1.3;text-align:left}
.pk__price{margin:6px 0}
.pk__facts{margin:0;padding:0;list-style:none;font-size:13px;color:var(--text2)}
.pk__facts li{display:flex;gap:8px} .pk__facts span{flex:none;width:58px;color:var(--muted)}
.pk__ok,.pk__miss{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:12.5px;line-height:1.35;font-weight:700}
.pk__ok{color:#5fd68f} .pk__miss{color:#f2b84b}
.pk__ok svg,.pk__miss svg{flex:none;margin-top:1px}
.pk__end{display:grid;gap:10px;margin-top:16px}
@media (max-width:760px){
  .pickstrip{margin:10px 0 2px;padding:10px 12px}
  .pickstrip__ic,.pickcta__ic{width:40px;height:40px}
  .modal--pick .modal__box{padding:18px 14px calc(18px + env(safe-area-inset-bottom))}
  .pk__opts{gap:8px} .pk__opt{flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:12px}
  .pk__ic{width:38px;height:38px}
  .pickcta__go{padding:0 12px}
}
.prem .pk__end .btn--bot{color:var(--navy-text)}
.pk__hint{margin:6px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted)}

/* ===== 03.10.2026: обертання 360° (лише для товарів зі справжньою серією кадрів p.spin) ===== */
.pm__360{position:absolute;left:54px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 10px;border:0;border-radius:999px;
  background:rgba(8,17,31,.78);color:var(--yellow);font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;box-shadow:inset 0 0 0 1px rgba(255,215,0,.42),0 2px 10px rgba(0,0,0,.35);cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,box-shadow .2s}
.pm__360:hover,.pm__360:focus-visible{background:rgba(8,17,31,.92);box-shadow:inset 0 0 0 1px var(--yellow),0 2px 12px rgba(0,0,0,.4)}
.pm__360 svg{flex:none}
.pm__img.is-spin .pm__360,.pm__img.is-spin .pm__zoom,.pm__img.is-spin .gal__nav,.pm__img.is-spin .gal__dots,.pm__img.is-spin .gal__cnt{visibility:hidden}
.spin{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background:radial-gradient(120% 90% at 50% 40%,#1b2433 0%,#0e141f 62%,#0a0f18 100%);outline:none}
.spin:focus-visible{box-shadow:inset 0 0 0 2px var(--yellow)}
.spin.is-drag{cursor:grabbing}
.spin__f{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.spin__bar{position:absolute;left:18%;right:18%;bottom:14px;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;transition:opacity .4s .3s}
.spin__bar i{display:block;height:100%;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s linear}
.spin.is-ready .spin__bar{opacity:0}
.spin__hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;white-space:nowrap;
  background:rgba(8,17,31,.72);color:#e9edf3;font-size:12.5px;font-weight:600;letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none;transition:opacity .35s}
.spin__hint svg{color:var(--yellow)}
.spin.is-used .spin__hint{opacity:0}
.spin__x{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:0;border-radius:999px;
  background:rgba(8,17,31,.8);color:#fff;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.05em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:pointer}
.spin__x:hover,.spin__x:focus-visible{box-shadow:inset 0 0 0 1px var(--yellow);color:var(--yellow)}
/* позначка на картці каталогу */
.spinb{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:4px 9px 4px 6px;border-radius:999px;
  background:rgba(8,17,31,.72);color:var(--yellow);font-size:11.5px;font-weight:700;letter-spacing:.06em;line-height:1;box-shadow:inset 0 0 0 1px rgba(255,215,0,.38);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.spinb svg{width:15px;height:15px}
.prem .spinb{left:16px;bottom:16px}
@media (max-width:760px){.spinb{font-size:10.5px;padding:3px 7px 3px 5px}.spinb svg{width:13px;height:13px}.prem .spinb{left:12px;bottom:12px}.pm__360{height:34px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.spin__bar,.spin__bar i,.spin__hint{transition:none}}

/* ===== 04.10.2026: «Фарба за кодом» (#code), «Поради малярам» на головній, 4-та колонка футера, липка панель замовлення в картці товару ===== */
.strips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 4px}
.strips .pickstrip{margin:0}
.modal--code .modal__box{width:min(680px,100%)}
.cs__sub{margin:-6px 40px 16px 0;color:var(--muted);font-size:14px;line-height:1.5}
.cs__sub a{color:var(--yellow);font-weight:700;white-space:nowrap}
.cs__form{display:grid;grid-template-columns:1.25fr 1fr auto;gap:10px;align-items:end}
.cs__f{display:flex;flex-direction:column;gap:6px;min-width:0}
.cs__f>span{font-size:12.5px;font-weight:700;color:var(--text2);letter-spacing:.02em}
.cs__f i{font-style:normal;color:var(--muted);font-weight:500}
.cs__f input{width:100%;min-width:0;height:50px;padding:0 14px;border:0;border-radius:14px;outline:none;background:rgba(255,255,255,.04);color:var(--text);font:inherit;font-size:16px;box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .15s}
.cs__f--code input{font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cs__f input::placeholder{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.cs__f input:focus{box-shadow:inset 0 0 0 1.5px var(--yellow),0 0 0 3px rgba(255,215,0,.12)}
.cs__go{height:50px;padding:0 20px}
.cs__ex{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;color:var(--muted)}
.cs__ex button{height:32px;padding:0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.04);color:var(--text2);font:inherit;font-size:13px;font-weight:700;letter-spacing:.03em;box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer}
.cs__ex button:hover,.cs__ex button:focus-visible{color:var(--text);box-shadow:inset 0 0 0 1px var(--yellow)}
.cs__res{margin-top:16px}
.cs__intro{margin:0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line);color:var(--text2);font-size:14px;line-height:1.55}
.cs__h{display:flex;align-items:flex-start;gap:8px;margin:2px 0 10px;font-size:16.5px;line-height:1.35}
.cs__h svg{flex:none;margin-top:1px;color:var(--yellow)}
.cs__h--sub{margin-top:18px;font-size:14.5px;color:var(--text2)}
.cs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cs__card{position:relative;display:flex;gap:12px;padding:12px 60px 12px 12px;border-radius:16px;background:linear-gradient(180deg,var(--surface2),var(--surface));box-shadow:inset 0 0 0 1px var(--line2)}
.cs__card .pk__img{width:78px;height:78px}
.cs__card--other{opacity:.8}
.cs__how{display:block;margin-bottom:3px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.cs__card--other .cs__how{color:#f2b84b}
.cs__card .pk__price small{font-size:12px}
.cs__card .stock{display:inline-block;margin-top:2px}
.cs__add{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:12px;display:grid;place-items:center;background:var(--yellow);color:var(--navy-text);cursor:pointer}
.cs__add:hover{background:var(--yellow-hi)}
.cs__warn,.cs__tip,.cs__wmini{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.cs__warn svg,.cs__tip svg,.cs__wmini svg{flex:none;margin-top:1px;color:var(--yellow)}
.cs__wmini{color:var(--text2);font-size:13px}
.cs__tip b,.cs__wmini b{color:var(--text)}
.cs__none{padding:16px;border-radius:16px;background:linear-gradient(120deg,rgba(255,215,0,.08),rgba(255,255,255,.02) 55%);box-shadow:inset 0 0 0 1px rgba(255,215,0,.25)}
.cs__none .cs__h{margin-bottom:8px}
.cs__none p{margin:0;color:var(--text2);font-size:14px;line-height:1.55}
.cs__acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.cs__acts .btn--full{grid-column:1/-1}
.prem .cs__acts .btn--bot{color:var(--navy-text)}
.cs__where{margin-top:18px;border-radius:16px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line2)}
.cs__where summary{display:flex;align-items:center;gap:10px;padding:14px 16px;font-weight:800;font-size:15px;cursor:pointer;list-style:none;border-radius:16px}
.cs__where summary::-webkit-details-marker{display:none}
.cs__where summary:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.cs__where summary svg:first-child{color:var(--yellow)}
.cs__where summary svg:last-child{margin-left:auto;color:var(--muted);transition:transform .2s}
.cs__where[open] summary svg:last-child{transform:rotate(180deg)}
#cs-wbody{padding:0 16px 16px}
.cs__car{display:block;width:100%;max-width:420px;height:auto;margin:0 auto 8px}
.cs__body{fill:rgba(255,255,255,.035);stroke:var(--text2);stroke-width:1.6;stroke-linejoin:round}
.cs__glass{fill:rgba(140,170,210,.08);stroke:var(--muted);stroke-width:1.2;stroke-linejoin:round}
.cs__line{fill:none;stroke:var(--muted);stroke-width:1.1;stroke-linecap:round;opacity:.7}
.cs__wh{fill:#0b1626;stroke:var(--text2);stroke-width:1.6}
.cs__spot circle{fill:#0b1626;stroke:var(--yellow);stroke-width:1.6}
.cs__spot text{fill:var(--yellow);font:800 11px var(--font)}
.cs__spot.on circle{fill:var(--yellow)}
.cs__spot.on text{fill:var(--navy-text)}
.cs__spots{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:13px;color:var(--text2)}
.cs__spots li{display:flex;align-items:center;gap:8px}
.cs__spots b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:var(--yellow);box-shadow:inset 0 0 0 1.4px var(--yellow)}
.cs__spots li.on{color:var(--text);font-weight:700}
.cs__spots li.on b{background:var(--yellow);color:var(--navy-text)}
.cs__mk{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.cs__mk li{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.45}
.cs__mk b{font-size:14px;color:var(--text)}
.cs__mk span{color:var(--text2)}
.cs__mk small{color:var(--muted);font-size:12px}
.cs__mk li.on{margin:0 -10px 4px;padding:10px;border-top-color:transparent;border-radius:12px;background:rgba(255,215,0,.06);box-shadow:inset 0 0 0 1px rgba(255,215,0,.32)}
.pickcta--q{margin:0 0 14px}
@media (max-width:760px){
  .strips{grid-template-columns:1fr;gap:8px;margin:10px 0 2px}
  .modal--code .modal__box{padding:18px 14px calc(18px + env(safe-area-inset-bottom))}
  .cs__sub{margin-right:36px;font-size:13.5px}
  .cs__form{grid-template-columns:1fr auto}
  .cs__f--code{grid-column:1/-1}
  .cs__go{padding:0 16px}
  .cs__acts{grid-template-columns:1fr}
  .cs__card{padding-right:56px}
  .cs__card .pk__img{width:66px;height:66px}
  .cs__spots{font-size:12.5px}
}

/* «Поради малярам» — секція на головній (генерує _work/gen_articles.py) */
.tips{margin-top:28px}
.tips__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.tips__head h2{display:flex;align-items:center;gap:10px;margin:0;font-size:22px}
.tips__head h2 svg{color:var(--yellow)}
.tips__all{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--yellow);white-space:nowrap}
.tips__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tips__list a{display:flex;align-items:center;gap:12px;height:100%;padding:14px;border-radius:16px;color:var(--text);background:linear-gradient(180deg,var(--surface2),var(--surface));box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .2s,transform .2s}
.tips__list a:hover{text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,215,0,.5);transform:translateY(-1px)}
.tips__list b{font-size:14.5px;line-height:1.35;font-weight:750}
.tips__ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--yellow);background:rgba(255,215,0,.08);box-shadow:inset 0 0 0 1px rgba(255,215,0,.22)}
@media (max-width:760px){
  .tips{margin-top:22px}
  .tips__head h2{font-size:19px}
  .tips__list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
  .tips__list::-webkit-scrollbar{display:none}
  .tips__list li{flex:0 0 76%;scroll-snap-align:start}
}
@media (min-width:761px){.prem .ftr__in{grid-template-columns:1.3fr 1fr 1.15fr 1fr;gap:40px 36px}}

/* картка товару: липка панель «ціна · Telegram · дзвінок · в кошик» (js/app.js pmBarHTML; ховається, коли основний блок «В кошик» на екрані) */
.pmbar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;margin:4px -18px -26px;padding:10px 18px calc(10px + env(safe-area-inset-bottom));
  background:rgba(15,27,46,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line2);box-shadow:0 -12px 26px rgba(0,0,0,.32);
  transition:transform .25s ease,opacity .25s ease,visibility .25s}
.pmbar.is-off{transform:translateY(110%);opacity:0;visibility:hidden;pointer-events:none}
.pmbar__pr{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pmbar__pr b{color:var(--yellow);font-size:17px;font-weight:800;white-space:nowrap}
.pmbar__pr span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmbar__ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.pmbar__ic:hover{text-decoration:none;color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
.pmbar__add{flex:none;height:44px;padding:0 16px}
@media (min-width:761px){.pmbar{margin:4px -30px -28px;padding:12px 30px}}
@media (max-width:360px){.pmbar__add span{display:none}.pmbar__add{width:44px;padding:0}}
@media (prefers-reduced-motion:reduce){.pmbar{transition:none}}

/* ===== категорії: SVG-іконки, плитки на головній, фільтр брендів фарбопультів (2026-10-04) ===== */
.cic{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--yellow)}
.cic svg{display:block}
.prem .side li a{justify-content:flex-start;align-items:center;gap:10px}
.prem .side li a .side__nm{flex:1;min-width:0;line-height:1.3}
.prem .side li a .cic{width:28px;height:28px;border-radius:9px;background:rgba(255,215,0,.07);box-shadow:inset 0 0 0 1px rgba(255,215,0,.16)}
.prem .side li a.on .cic{background:rgba(255,215,0,.16)}
.prem .chip{justify-content:flex-start;gap:10px}
.prem .chip .chip__nm{flex:1;min-width:0}
.prem .chip .cic{width:30px;height:30px;border-radius:10px;background:rgba(255,215,0,.07);box-shadow:inset 0 0 0 1px rgba(255,215,0,.16)}
.prem .chip[data-cat="all"]{justify-content:flex-start}
.prem .chip[data-cat="sale"],.prem .chip[data-cat="new"]{justify-content:flex-start}
.prem .chip[data-cat="sale"] .cic{color:#ff8a80;background:rgba(229,83,75,.1);box-shadow:inset 0 0 0 1px rgba(229,83,75,.3)}
.prem .chip[data-cat="new"] .cic{color:#6fdc95;background:rgba(63,191,106,.1);box-shadow:inset 0 0 0 1px rgba(63,191,106,.3)}
.prem .side li a[data-cat="sale"] .cic{color:#ff8a80}
.prem .side li a[data-cat="new"] .cic{color:#6fdc95}

.cattiles{margin:4px 0 30px}
.cattiles[hidden]{display:none}
.cattiles__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 14px}
.cattiles__hd h2{margin:0;font-size:22px}
.cattiles__all{font-size:14px;font-weight:600;color:var(--muted)!important}
.cattiles__all:hover{color:var(--yellow)!important;text-decoration:none}
.ctiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.ctile{display:flex;align-items:center;gap:14px;height:100%;min-height:76px;padding:14px 14px 14px 16px;border-radius:18px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--text)!important;transition:box-shadow .18s ease,transform .18s ease,background-color .18s ease}
.ctile:hover{text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,215,0,.55);background:var(--surface2);transform:translateY(-1px)}
.ctile .cic{width:46px;height:46px;border-radius:14px;background:linear-gradient(180deg,rgba(255,215,0,.12),rgba(255,215,0,.04));box-shadow:inset 0 0 0 1px rgba(255,215,0,.22)}
.ctile__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ctile__t b{font-size:14.5px;font-weight:650;line-height:1.3;color:var(--text)}
.ctile__t small{font-size:12.5px;color:var(--muted);font-weight:600}
.ctile__go{flex:none;color:var(--muted);opacity:.7;transition:transform .18s ease,color .18s ease}
.ctile:hover .ctile__go{color:var(--yellow);transform:translateX(2px);opacity:1}
@media (max-width:899px){.cattiles{display:none}} /* на мобільному ту саму роль виконує сітка #chips з іконками й кількістю */
@media (prefers-reduced-motion:reduce){.ctile,.ctile__go{transition:none}.ctile:hover{transform:none}}

.bbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}
.bbar[hidden]{display:none}
.bbar__l{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-right:4px}
.bbar__b{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  color:var(--text2)!important;font-weight:600;font-size:13.5px;line-height:1.2}
.bbar__b small{font-size:11.5px;color:var(--muted);background:rgba(255,255,255,.06);border-radius:999px;padding:1px 7px}
.bbar__b:hover{text-decoration:none;box-shadow:inset 0 0 0 1px var(--line2)}
.bbar__b.on{background:rgba(255,215,0,.08);box-shadow:inset 0 0 0 1px rgba(255,215,0,.75);color:var(--text)!important}
.bbar__b.on small{background:var(--yellow);color:var(--navy-text)}
@media (max-width:760px){.bbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 16px;padding:0 16px}.bbar::-webkit-scrollbar{display:none}.bbar__b{flex:none}}
@media (max-width:899px){
  .prem .chip{gap:8px;padding:9px 10px;font-size:13px;line-height:1.25}
  .prem .chip .cic{width:26px;height:26px;border-radius:8px}
  .prem .chip .cic svg{width:16px;height:16px}
  .prem .chip small{padding:2px 7px}
}
.results{min-width:0}
@media (max-width:760px){.bbar{max-width:calc(100% + 32px)}}
/* 08.10: мобільна кнопка профілю — після .prem-правил, щоб перекрити їх */
@media (max-width:760px){
  .hdr__nav{margin-left:auto;flex:none}
  .acctbtn,.prem .acctbtn,.prem .acctbtn.on,.acctbtn.on{flex-direction:column;justify-content:center;gap:3px;width:auto;height:auto;max-width:78px;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--text)}
  .acctbtn.has-photo{padding-left:0}
  .prem .acctbtn:hover{box-shadow:none}
  .acctbtn .acctbtn__ava,.acctbtn.has-photo .acctbtn__ava{width:38px;height:38px;color:var(--yellow);background:rgba(255,215,0,.06);box-shadow:inset 0 0 0 1.5px rgba(255,215,0,.7)}
  .acctbtn.on .acctbtn__ava{background:rgba(255,215,0,.1);box-shadow:inset 0 0 0 1.5px var(--yellow)}
  .acctbtn.has-photo .acctbtn__ava{background:#0b1524;box-shadow:0 0 0 1.5px var(--yellow)}
  .acctbtn:hover .acctbtn__ava{box-shadow:inset 0 0 0 1.5px var(--yellow)}
  .acctbtn.has-photo:hover .acctbtn__ava{box-shadow:0 0 0 1.5px var(--yellow)}
  .acctbtn .acctbtn__lbl{display:block;max-width:78px;font-size:10.5px;line-height:1.1;font-weight:700;letter-spacing:.03em;color:var(--text2)}
}
/* мобільна шапка: бренд займає залишок рядка (підпис «Meiji · Palinal…» обрізається трикрапкою), тож кнопка профілю
   з підписом «Реєстрація» лишається в тому самому рядку навіть на 360 px. Лише головна (статичні сторінки .pp мають свою шапку) */
@media (max-width:760px){body:not(.pp) .hdr .brand{flex:1 1 0;min-width:0}body:not(.pp) .hdr .brand__txt{min-width:0}body:not(.pp) .hdr .brand__name{overflow:hidden;text-overflow:ellipsis}}
/* 08.10.2026: один банер (кузовні роботи) — SVG-іконки замість емодзі в чипі й кнопці «Отримати консультацію» */
.bnr__tag{display:inline-flex;align-items:center;gap:5px}
.bnr__tag>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bnr__tag-ico{flex:none;width:1.25em;height:1.25em;margin-left:-2px}
.hero__btn-ico{flex:none;width:20px;height:20px}
/* 08.10.2026: «Поділитися розділом» у заголовку списку (посилання c/<cat>/ з og-карткою) */
.catshr{margin-left:auto;flex:none;height:38px;padding:0 14px 0 11px;border:0;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:650;color:var(--text2);background:transparent;box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer}
.catshr[hidden]{display:none}
.catshr:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--yellow2)}
.catshr:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.toolbar h2{min-width:0}
@media (max-width:640px){.catshr{width:38px;padding:0;justify-content:center}.catshr span{display:none}}

/* ===== 08.10.2026: знижки — нова ціна + стара перекреслена + бейдж «−N%» (js/app.js oldHTML / pillHTML) ===== */
.pbox{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;min-width:0}
.pold{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;line-height:1.2}
.pold s,.var__old,.rel__old,.rv__old,.pmbar__old{color:var(--muted);font-weight:600;text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(180,199,230,.7)}
.pold s{font-size:13px}
.pdisc{display:inline-block;padding:1px 6px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1.4;font-style:normal;
  color:#ffb3a7;background:rgba(255,107,91,.14);box-shadow:inset 0 0 0 1px rgba(255,138,122,.42)}
.prem .pill--sale{color:var(--text)}
.pold--pm{margin-left:12px;vertical-align:middle}
.pold--pm s{font-size:16px}
.pold--pm .pdisc{font-size:12.5px;padding:2px 8px;border-radius:7px}
.pold--sm{margin-left:8px}
.pold--sm s{font-size:12px}
.pold--sm .pdisc{font-size:10.5px;padding:0 5px}
.var__old{display:inline;font-size:12px;margin-left:4px}
.rel__old{font-size:11px;margin-left:2px}
.rv__old{font-size:11px;margin-left:4px}
.pmbar__old{font-size:12px;margin-left:6px}
.csave{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:-4px 0 8px;padding:9px 12px;border-radius:12px;
  background:rgba(255,107,91,.08);box-shadow:inset 0 0 0 1px rgba(255,138,122,.28);font-size:13.5px;color:var(--text2)}
.csave b{color:#ffb3a7;font-weight:800;white-space:nowrap}
.card__foot .pbox{max-width:100%}
@media (max-width:640px){
  .card__foot .pbox{flex-direction:column;align-items:flex-start;row-gap:3px}
  .card__foot .pold s{font-size:12px}
  .pold--pm{display:flex;margin:6px 0 0}
}
.citem__p .pold--sm{display:flex;width:max-content;margin:4px 0 0}
/* 08.10.2026: замовлення з кошика не збереглося — повідомлення з іншими способами (бот з кошиком, Telegram, дзвінок) */
.cfail{margin:0 0 14px;padding:14px;border-radius:16px;background:linear-gradient(180deg,rgba(255,215,0,.09),rgba(255,215,0,.03));border:1px solid rgba(255,215,0,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cfail__h{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.cfail__ico{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--yellow);background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3)}
.cfail__t{margin:2px 0 4px;font-size:16.5px;line-height:1.3;color:var(--text)}
.cfail__s{margin:0;font-size:14px;line-height:1.5;color:var(--text2)}
.cfail__a{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cfail__a .btn{min-height:46px;gap:8px}
.cfail__a .btn--full{grid-column:1/-1}
.prem #cartbody .cfail__a .btn--o{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.cfail__n{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.cfail__n a{color:var(--text);font-weight:700;text-decoration:none;white-space:nowrap}
.cfail__lnk{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--yellow);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:380px){.cfail__a{grid-template-columns:1fr}}

/* ---- contact strip under TG promo (mobile first; 08.10.2026) ---- */
.ctabar{background:var(--bg2);border-bottom:1px solid var(--line)}
.ctabar__in{display:flex;align-items:center;gap:6px;padding:6px 0;min-height:36px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctabar__a{display:inline-flex;align-items:center;gap:7px;flex:none;padding:6px 12px;border-radius:999px;color:var(--text);font-weight:650;font-size:13px;letter-spacing:.01em;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line2)}
.ctabar__a:hover{text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,215,0,.45);color:var(--text)}
.ctabar__a svg{flex:none;color:var(--text2)}
.ctabar__a--sec{color:var(--text2);font-weight:600;box-shadow:none;padding-left:8px;padding-right:8px}
.ctabar__a--sec:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.prem .ctabar{background:#0a1424}
@media (max-width:760px){
  .ctabar__in{gap:5px;padding:5px 0}
  .ctabar__a{font-size:12.5px;padding:5px 10px}
  .ctabar__a--sec span{max-width:4.5em;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:761px){
  .ctabar__in{justify-content:flex-end;gap:8px;padding:7px 0}
  .ctabar__a{font-size:13.5px}
}

/* 09.10.2026: емодзі в UI -> лінійні SVG-іконки (як у ctabar) */
.ico{display:inline-block;flex:none;vertical-align:-.16em;color:inherit}
.btn .ico,.ctabar__a .ico{vertical-align:middle}
.ico-ua{display:inline-block;flex:none;vertical-align:-.05em;border-radius:2px}
.cempty .cempty__ico{display:block;margin:0 auto 8px;color:var(--muted)}
.tds summary .ico,.vids__ttl .ico,.rel__ttl .ico{color:var(--yellow);margin-right:2px}
.promo .ico,.vidb .ico{vertical-align:-.12em}