/* =====================================================================
   AUTORING v2 — інженерний стиль: графіт + синій логотипу. Шар поверх ar-theme.css
   ===================================================================== */
html[data-theme],html:not([data-theme]){
  --bg:#111316;--bg2:#15181B;--bg3:#0E1013;--card:#181B1F;--field:#181B1F;--line:#22262B;--line2:#2F343B;--line3:#3A4048;
  --text:#EEF0F2;--text2:#C4C9CF;--muted:#A3A9B1;--muted2:#8A9099;--accent:#0066E0;--accent-ink:#4DA3FF;--on-accent:#FFFFFF;
  --ok:#3DD68C;--warn:#F5B451;--bad:#FF6B6B;--well:#EEF2F7;--blue:#0A7CFF;--glow:rgba(10,124,255,.28);--logo-ink:#FFFFFF;--logo-blue:#0A7CFF;
  --toast:#EEF0F2;--on-toast:#111316;--shadow:0 18px 40px -18px rgba(0,0,0,.7);--grid:#1D2125;color-scheme:dark}
html[data-theme="light"]{
  --bg:#F4F5F7;--bg2:#FFFFFF;--bg3:#ECEEF1;--card:#FFFFFF;--field:#F4F5F7;--line:#E2E5EA;--line2:#D3D7DE;--line3:#B5BBC4;
  --text:#111316;--text2:#3A4048;--muted:#5A616B;--muted2:#6B727C;--accent:#0066E0;--accent-ink:#0058C4;--on-accent:#FFFFFF;
  --ok:#0F7A45;--warn:#9A5A00;--bad:#C0283C;--well:#EEF2F7;--blue:#0A7CFF;--glow:rgba(0,102,224,.16);--logo-ink:#111316;--logo-blue:#0A7CFF;
  --toast:#111316;--on-toast:#FFFFFF;--shadow:0 16px 36px -20px rgba(17,19,22,.3);--grid:#E6E9ED;color-scheme:light}

/* типографіка */
body.arx{font-family:Onest,system-ui,-apple-system,'Segoe UI',sans-serif!important}
body.arx h1,body.arx h2,body.arx h3,body.arx h4{font-weight:700}
.x-h1,.x-h2,.x-hero h1{font-family:Geologica,Onest,sans-serif;letter-spacing:-.02em!important}
.x-hero h1{font-weight:700!important}
.x-mono,.x-eyebrow,.x-card-code{font-family:'JetBrains Mono',ui-monospace,monospace}
.x-eyebrow{letter-spacing:.06em;text-transform:uppercase;font-size:12px!important;font-weight:500!important;border-radius:4px!important}
.x-eyebrow i{border-radius:1px!important;background:var(--blue)!important;box-shadow:none!important}

/* кнопки й поля */
.x-btn{font-weight:600;letter-spacing:0}
.x-btn--accent:hover{filter:none;background:#0B74F5}
.x-catbtn{background:transparent!important;color:var(--text)!important;border:1px solid var(--line3)!important;font-weight:600}
.x-catbtn:hover{border-color:var(--blue)!important}
.x-chip{border-radius:6px!important;font-weight:500}
.x-badge{border-radius:4px!important;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase}

/* сітка-креслення під першим екраном */
main#content{overflow-x:clip}
.x-hero{position:relative;isolation:isolate}
.x-hero::before{content:"";position:absolute;z-index:-1;top:-40px;bottom:-40px;left:50%;width:100vw;transform:translateX(-50%);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}

/* шапка: 7 розділів + «Ще», «Акції» праворуч, телефон на мобільному */
.x-cats .x-wrap{flex-wrap:wrap!important;overflow:visible!important}
.x-cats .x-cats-more{background:none;border:0;padding:0;color:var(--text);font:inherit;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.x-cats .x-cats-more:hover{color:var(--accent-ink)}
.x-cats a.sale{margin-left:auto;color:var(--accent-ink)!important}
.x-show-m{display:none!important}
@media (max-width:760px){
  .x-show-m{display:inline-flex!important;border-color:var(--blue)!important;color:var(--accent-ink)!important}
  .x-icons .x-theme{display:none!important}
  .x-cats .x-wrap{flex-wrap:nowrap!important;overflow-x:auto!important}
  .x-cats a.sale{margin-left:0}
}

/* підбір: марка → модель → рік → діаметр */
.x-pick2{max-width:640px;padding:22px;border-radius:10px;border:1px solid var(--line2);background:var(--card)}
.x-pick2 .x-pick-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.x-pick2 .x-pick-top b{margin:0;font-size:17px;font-weight:700}
.x-pick2 .x-pick-top span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.x-pick2 form{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;align-items:end}
.x-pick2 label{display:flex;flex-direction:column;gap:7px;margin:0;min-width:0;font-size:12px;font-weight:600;color:var(--muted)}
.x-pick2 label>span{display:flex;align-items:center;gap:8px}
.x-pick2 label i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-style:normal;font-size:11px;font-weight:700;font-family:'JetBrains Mono',ui-monospace,monospace}
.x-pick2 select{width:100%;min-width:0;height:52px;padding:0 12px;border-radius:6px;background:var(--bg);border:1px solid var(--line3);color:var(--text);font:inherit;font-weight:500;font-size:15px}
.x-pick2 select:disabled{opacity:.55;cursor:not-allowed}
.x-pick2 form .x-btn{grid-column:1/-1;height:54px;font-size:16px}
.x-pick-msg{margin:12px 0 0;padding:10px 12px;border-radius:6px;border:1px dashed var(--line3);font-size:14px;color:var(--text2)}
.x-pick-msg a{color:var(--accent-ink);font-weight:600}
.x-pick-pop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;font-size:13px;color:var(--muted)}
.x-pick-pop a{display:inline-flex;gap:6px;align-items:center;min-height:36px;padding:0 12px;border-radius:6px;border:1px solid var(--line2);color:var(--text);font-weight:500}
.x-pick-pop a:hover{border-color:var(--blue)}
.x-pick-pop small{color:var(--muted);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px}
@media (max-width:600px){.x-pick2{padding:16px}.x-pick2 form{grid-template-columns:1fr!important}}

/* =====================================================================
   v2 · сторінки: картки, каталог, товар, кошик, оформлення, підвал
   ===================================================================== */
/* загальні форми */
.x-btn{border-radius:6px!important;font-weight:600!important}
.x-btn--ghost:hover{border-color:var(--blue)!important}
.x-h1,.x-h2,.x-info h1,.x-cat-head h1{font-family:Geologica,Onest,sans-serif!important;font-weight:700!important;letter-spacing:-.02em!important}
.x-h2{font-weight:600!important}
.x-sec-h .x-h2{font-size:clamp(26px,3vw,36px)}
.x-crumbs{font-size:13px}
.x-crumbs li+li::before{content:'/';color:var(--line3)}
.x-chip{border-radius:6px!important;min-height:44px;padding:0 14px!important;font-weight:500!important;background:var(--card)!important}
.x-chip:hover{border-color:var(--blue)!important}
.x-chip b{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500!important;font-size:12px}

/* картка товару */
.x-grid{gap:14px}
.x-card{border-radius:8px!important;border-color:var(--line2)!important;transition:border-color .15s!important}
.x-card:hover{border-color:var(--blue)!important;transform:none!important}
.x-card-img{margin:12px 12px 0!important;border-radius:6px!important}
.x-card .x-wish{top:20px!important;right:20px!important;width:36px!important;height:36px!important;border-radius:6px!important;box-shadow:none!important;border:1px solid var(--line2)!important}
.x-card-body{padding:12px 14px 14px!important;gap:7px!important}
.x-card-code{color:var(--accent-ink)!important;font-size:11px!important;letter-spacing:.06em;text-transform:uppercase}
.x-card-name{font-weight:600!important;font-size:14px!important}
.x-feat{font-weight:500!important;color:var(--muted)!important}
.x-fit{font-weight:600!important}
.x-stock{font-weight:500!important;font-size:12px!important}
.x-price b{font-family:Geologica,Onest,sans-serif;font-weight:700!important;font-size:20px!important;letter-spacing:-.01em}
.x-buy{height:44px!important;border-radius:6px!important;font-weight:600!important}
.x-buy:hover{background:#0B74F5}
.x-buy--alt{background:transparent!important;border:1px solid var(--line3)!important;color:var(--text)!important}
.x-cmp{border-radius:6px!important}
.x-badge{left:8px!important;top:8px!important;padding:3px 7px!important;border-radius:4px!important;background:var(--bg)!important;color:var(--text)!important;border:1px solid var(--line3)!important;font-size:10px!important}
.x-badge--sale{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important}
.x-badge--hit{color:var(--accent-ink)!important;border-color:var(--blue)!important}

/* каталог */
.x-cat-head small{font-size:13px!important}
.x-side .box,.x-toolbar{border-radius:8px!important}
.x-side h4{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px!important;font-weight:500!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important}
.x-side li a{border-radius:6px!important;font-weight:500!important}
.x-side li a.on{background:var(--bg)!important;box-shadow:inset 2px 0 0 var(--blue)}
.x-check{font-weight:500!important}
.x-check b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px!important}
.x-range input,.x-toolbar select{border-radius:6px!important;font-weight:500!important}
.x-pager .pagination>li>a,.x-pager .pagination>li>span{border-radius:6px!important;font-family:'JetBrains Mono',ui-monospace,monospace}

/* товар */
.x-main-img{border-radius:10px!important;box-shadow:none!important}
.x-thumbs button{border-radius:6px!important;border-width:1px!important}
.x-thumbs button.on{border-color:var(--blue)!important;box-shadow:0 0 0 1px var(--blue)}
.x-tag{border-radius:4px!important;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500!important;font-size:11px!important;letter-spacing:.04em;text-transform:uppercase}
.x-info h1{font-size:clamp(24px,2.4vw,32px)!important;line-height:1.2!important}
.x-specs,.x-buybox,.x-compat-card,.x-combo-sum,.x-ship,.x-cart-list,.x-cart-sum,.x-co-card{border-radius:10px!important}
.x-specs dd{font-weight:600!important}
.x-buybox{border-color:var(--line3)!important}
.x-bigprice b{font-family:Geologica,Onest,sans-serif;font-weight:700!important;letter-spacing:-.02em}
.x-qty{border-radius:6px!important;border-color:var(--line3)!important}
.x-qty input{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500!important}
.x-buy2 button{border-radius:6px!important;font-weight:500!important}
.x-buy2 button.on{border-color:var(--blue)!important}
.x-tabs{border-radius:8px!important;padding:4px!important}
.x-tabs button{border-radius:6px!important;font-weight:600!important}
.x-compat-card .h{font-weight:700!important}
.x-combo-row img,.x-crow-img{border-radius:6px!important}
.x-combo-sum b{font-family:Geologica,Onest,sans-serif;font-weight:700!important}

/* кошик і оформлення */
.x-cart-sum dl div.grand dd{font-family:Geologica,Onest,sans-serif;font-weight:700!important;font-size:24px}
.x-co-card-h h2{font-family:Onest,sans-serif!important;font-weight:600!important}
.x-co-n{width:auto!important;height:auto!important;background:none!important;color:var(--accent-ink)!important;border-radius:0!important;font-family:'JetBrains Mono',ui-monospace,monospace!important;font-weight:500!important;font-size:14px!important;padding-top:3px}
.x-f label{font-weight:500!important;font-size:13px!important}
.x-f input,.x-co-comment textarea{border-radius:6px!important;border-color:var(--line3)!important;background:var(--bg)!important;height:52px}
.x-co-comment textarea{height:auto}
.x-co-opt{border-radius:8px!important}
.x-co-opt:has(input:checked){border-color:var(--blue)!important;background:rgba(10,124,255,.08)!important}
.x-co-opt b{font-weight:600!important}

/* підвал */
.x-foot{background:var(--bg3)!important}
.x-foot h4{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px!important;font-weight:500!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important}
.x-foot .big{font-family:Geologica,Onest,sans-serif;font-weight:600!important}
.x-foot .copy{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px!important;letter-spacing:.04em}

/* =====================================================================
   v2 · правки за відгуком: більше фото, менше дрібного шуму, крупніше меню
   ===================================================================== */
/* перший екран: фото товару велике, без кілець і плаваючих підписів */
@media (min-width:901px){.x-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:48px!important;align-items:start!important}}
.x-hero-vis{max-width:none!important;width:100%!important;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--line2);background:var(--well)}
.x-hero-vis::before,.x-hero-vis::after{display:none!important}
.x-hero-vis img{left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important;object-fit:contain!important;background:var(--well)}
.x-hero-vis .x-hero-tag.t1,.x-hero-vis .x-hero-tag.t2{display:none!important}
.x-hero-vis .x-hero-tag.t3{left:16px!important;bottom:16px!important;padding:10px 16px!important;border-radius:6px!important;box-shadow:none!important;font-weight:600!important;font-size:14px}
@media (max-width:900px){.x-hero-vis{margin-top:8px}}
/* менше дрібних підписів у підборі */
.x-pick2 .x-pick-top span{display:none}
.x-pick2 .x-pick-top b{font-size:19px!important}
.x-pick2 label{font-size:13px!important;color:var(--text2)!important}
@media (max-width:760px){.x-pick-pop{display:none!important}}
/* верхнє меню: крупніше й вільніше */
.x-cats .x-wrap{gap:10px 32px!important;min-height:56px!important}
.x-cats a,.x-cats .x-cats-more{font-size:15px!important;font-weight:600!important}
/* дрібні виправлення */
.x-bigprice b span{font:inherit!important;color:inherit!important}
.x-foot nav span:last-child{white-space:pre-line}

/* =====================================================================
   v2 · святкові банери: 3D-ілюстрації з анімацією замість векторів
   ===================================================================== */
.x-ssb{border-radius:10px!important}
.x-ssb h2{font-family:Geologica,Onest,sans-serif!important;font-weight:700!important}
.x-ssb-tag{border-radius:4px!important;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500!important}
.x-ssb .x-btn{border-radius:6px!important}
.x-s3d{position:relative;width:100%;max-width:250px;aspect-ratio:1/1;margin:0 auto}
.x-s3d::after{content:"";position:absolute;left:24%;right:24%;bottom:4%;height:7%;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(6px);animation:s3dShadow 4.8s ease-in-out infinite}
.x-s3d img{position:absolute;display:block;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35));user-select:none;pointer-events:none;will-change:transform}
.x-s3d .m{z-index:2;left:15%;top:10%;width:70%;animation:s3dFloat 4.8s ease-in-out infinite}
.x-s3d .a1{z-index:1;left:-2%;top:0;width:34%;animation:s3dDrift 6.2s ease-in-out infinite}
.x-s3d .a2{z-index:3;right:-2%;bottom:6%;width:30%;animation:s3dDrift 7.4s ease-in-out -3s infinite reverse}
@keyframes s3dFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes s3dShadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.8);opacity:.55}}
@keyframes s3dDrift{0%,100%{transform:translate(0,0) rotate(-10deg)}50%{transform:translate(8px,-14px) rotate(10deg)}}
@keyframes s3dSpin{to{transform:rotate(360deg)}}
@keyframes s3dBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(.97)}36%{transform:scale(1.08)}48%{transform:scale(1)}}
@keyframes s3dBat{0%,100%{transform:translate(0,0) rotate(-12deg) scaleY(1)}25%{transform:translate(10px,-10px) rotate(-4deg) scaleY(.82)}50%{transform:translate(18px,-4px) rotate(6deg) scaleY(1)}75%{transform:translate(8px,6px) rotate(-6deg) scaleY(.82)}}
@keyframes s3dDrive{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(4px,-3px) rotate(-1.5deg)}50%{transform:translate(0,-1px) rotate(0)}75%{transform:translate(-4px,-3px) rotate(1.5deg)}}
@keyframes s3dTwinkle{0%,100%{transform:scale(.8) rotate(0);opacity:.7}50%{transform:scale(1.1) rotate(12deg);opacity:1}}
@keyframes s3dSway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.x-s3d--halloween .a1{animation:s3dBat 2.6s ease-in-out infinite}
.x-s3d--ny .a2{animation:s3dSpin 14s linear infinite}
.x-s3d--love .m,.x-s3d--ua .a1,.x-s3d--ua .a2{animation:s3dBeat 2.4s ease-in-out infinite}
.x-s3d--ua .a2{animation-delay:-1.2s}
.x-s3d--love .a1{animation:s3dBeat 2.4s ease-in-out -.6s infinite}
.x-s3d--spring .a1,.x-s3d--easter .a2,.x-s3d--ua .m{transform-origin:50% 100%;animation:s3dSway 5s ease-in-out infinite}
.x-s3d--driver .m{animation:s3dDrive 1.6s ease-in-out infinite}
.x-s3d--driver::after{animation:none;left:18%;right:18%}
.x-s3d--driver .a2,.x-s3d--military .a2{animation:s3dTwinkle 2.8s ease-in-out infinite}
@media (max-width:760px){.x-ssb-art{width:170px!important}}
@media (prefers-reduced-motion:reduce){.x-s3d img,.x-s3d::after{animation:none!important}}

/* кошик на телефоні: сума рядка не обрізається */
@media (max-width:760px){
  .x-crow{grid-template-columns:72px minmax(0,1fr) auto!important}
  .x-crow-total{font-family:Geologica,Onest,sans-serif;font-weight:700!important}
  .x-crow-img{border-radius:6px!important}
}
