:root{
  --bg:#f3f2ee; --card:#fff; --ink:#151515; --muted:#6c6b66; --line:#e3e1da;
  --dark:#000; --dark-2:#1f1f1f; --accent:#e5c55d; --accent-2:#d6b343;
  --winter:#2f6fdf; --studded:#1d3f9a; --summer:#e9820c; --allseason:#2a9a66; --red:#d63b2f;
  --r:14px; --r-sm:10px; --shadow:0 1px 2px rgba(0,0,0,.05),0 6px 24px rgba(0,0,0,.06);
  --font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --display:'Unbounded',var(--font);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}
h1{font-family:var(--display);font-weight:800;font-size:clamp(24px,4vw,36px);letter-spacing:-.01em}
h2{font-size:clamp(20px,2.6vw,26px);font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
.narrow{max-width:960px}
.narrow>h1,.narrow>.result h1{padding-top:24px}
.muted{color:var(--muted)}
[hidden]{display:none!important}

/* ---------- header ---------- */
.hdr{background:var(--dark);color:#fff;position:sticky;top:0;z-index:40}
.hdr__row{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo__mark{width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 2px #222}
.logo b{display:block;font-family:var(--display);font-size:21px;color:#fff;line-height:1}
.logo small{display:block;font-size:11px;color:#a8a8a8;margin-top:3px;white-space:nowrap}
.search{flex:1;display:flex;max-width:520px;background:#fff;border-radius:999px;overflow:hidden}
.search input{flex:1;border:0;padding:10px 16px;min-width:0;outline:0;color:var(--ink)}
.search button{border:0;background:var(--accent);padding:0 16px;cursor:pointer;color:var(--ink)}
.hdr__nav{display:flex;gap:4px}
.hdr__nav a{text-decoration:none;padding:8px 12px;border-radius:8px;color:#d9d9d9;font-weight:500;font-size:15px}
.hdr__nav a:hover,.hdr__nav a.on{color:#fff;background:var(--dark-2)}
.cartbtn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--dark-2);color:#fff;flex:none}
.cartbtn__n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:var(--ink);font-size:12px;font-weight:700;display:grid;place-items:center}
@media (max-width:900px){
  .hdr__nav{display:none}
  .hdr__row{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px 12px}
  .search{order:3;flex-basis:100%;max-width:none}
  .logo{flex:1}
}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-sm);background:var(--accent);color:var(--ink);font-weight:600;padding:10px 18px;cursor:pointer;text-decoration:none;transition:background .15s,transform .05s}
.btn:hover{background:var(--accent-2)}
.btn:active{transform:translateY(1px)}
.btn--big{padding:14px 22px;font-size:17px}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{background:#000}
.btn--ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{background:#fff}
.btn.added{background:var(--dark);color:#fff}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:13px;padding:3px 9px;border-radius:999px;background:var(--bg);color:#3a3a3a;display:inline-flex;align-items:center;gap:5px}
.chip--set{background:#fff6d6;font-weight:600}
.chip--size{background:var(--dark);color:#fff;font-weight:600;letter-spacing:.01em}
.chips--lg .chip{font-size:15px;padding:6px 12px}
.season--winter{color:var(--winter)}.season--winter-studded{color:var(--studded)}.season--summer{color:var(--summer)}.season--allseason{color:var(--allseason)}
.season-chip{background:#fff;box-shadow:inset 0 0 0 1.5px currentColor;font-weight:600}

/* ---------- hero ---------- */
.picker{background:#fff;color:var(--ink);border-radius:20px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.picker h2{font-size:20px}
.picker__size{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:end;gap:8px;margin-bottom:16px}
.picker__sep{font-family:var(--display);font-size:20px;padding-bottom:10px;color:var(--muted)}
.picker label{font-size:13px;color:var(--muted);display:grid;gap:4px}
select,input[type=number],input[type=search],input[type=text],input[type=tel],input[type=email],textarea,.co input{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:#fff;outline:0}
select:focus,input:focus,textarea:focus{border-color:var(--ink)}
.picker__season{border:0;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px}
.picker__season legend{font-size:13px;color:var(--muted);margin-bottom:6px}
.pill input{position:absolute;opacity:0}
.pill span{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;font-size:14px;font-weight:500}
.pill input:checked+span{background:var(--dark);color:#fff;box-shadow:none}
.pill input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.picker .btn{width:100%}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;padding-top:32px;padding-bottom:32px;gap:24px}}

/* ---------- blocks ---------- */
.block{padding:40px 16px 8px}
.block__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.block__head h2{margin:0}
.more{font-weight:600;text-decoration:none;white-space:nowrap}
.more:hover{text-decoration:underline}
.radii{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.radius{background:var(--card);border-radius:var(--r);padding:16px;text-decoration:none;box-shadow:var(--shadow);transition:transform .15s}
.radius:hover{transform:translateY(-2px)}
.radius b{display:block;font-family:var(--display);font-size:24px}
.radius span{font-size:13px;color:var(--muted)}
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.brand{display:flex;justify-content:space-between;align-items:center;background:var(--card);padding:12px 14px;border-radius:var(--r-sm);text-decoration:none;font-weight:600}
.brand small{color:var(--muted);font-weight:400}
.brand:hover{background:var(--dark);color:#fff}
.trust{background:var(--card);margin-top:48px;padding:40px 0}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.trust h3{font-size:17px;display:flex;gap:10px;align-items:center}
.trust h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent);flex:none}
.trust p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:900px){.trust__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trust__grid{grid-template-columns:1fr}}

/* ---------- product card ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:box-shadow .2s}
.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.06),0 14px 36px rgba(0,0,0,.1)}
.card__img{position:relative;aspect-ratio:4/3;background:#eceae4;display:block}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__noimg{display:grid;place-items:center;height:100%;color:var(--muted);font-size:14px;aspect-ratio:4/3;background:#eceae4;border-radius:var(--r)}
.card__badge{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;padding:2px 8px;border-radius:6px}
.card .season{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.card__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__price b{font-size:20px}
.card__price span{color:var(--muted);font-size:14px}
.card__price s{color:var(--muted);font-size:14px;margin-left:6px}
.card__title{text-decoration:none;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card__title:hover{text-decoration:underline}
.card .chips{margin-top:auto}
.btn--add{width:100%;margin-top:4px}

/* ---------- catalog ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--muted);padding:18px 0 8px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.cat__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cat__count{color:var(--muted)}
.cat{display:grid;grid-template-columns:270px 1fr;gap:24px;align-items:start;padding-bottom:40px}
.filters{background:var(--card);border-radius:var(--r);padding:16px;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto}
.filters fieldset{border:0;padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--line)}
.filters legend{font-weight:700;margin-bottom:8px}
.filters__top{display:none}
.check{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;font-size:15px}
.check input{width:18px;height:18px;accent-color:var(--ink);flex:none}
.check small{color:var(--muted);margin-left:auto}
.season-inline{display:inline-grid}
.filters__size,.filters__range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.filters__size label{font-size:13px;color:var(--muted);display:grid;gap:4px}
.tiles{display:flex;flex-wrap:wrap;gap:6px}
.tile input{position:absolute;opacity:0}
.tile span{display:block;padding:6px 10px;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;font-weight:600;font-size:14px}
.tile input:checked+span{background:var(--dark);color:#fff;box-shadow:none}
.tile input:focus-visible+span{outline:2px solid var(--ink)}
.filters__find{margin-bottom:8px}
.filters__list{max-height:280px;overflow:auto}
.filters__actions{display:grid;gap:8px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.toolbar__filters{display:none}
.toolbar__sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-left:auto}
.toolbar__sort select{width:auto;max-width:210px}
.toolbar{min-width:0}
.active{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;align-items:center}
.active__chip{background:var(--dark);color:#fff;text-decoration:none;font-size:14px;padding:5px 10px;border-radius:999px}
.active__chip span{opacity:.6;margin-left:4px}
.active__reset{font-size:14px;color:var(--muted);margin-left:6px}
.empty{background:var(--card);border-radius:var(--r);padding:40px;text-align:center}
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:28px}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--card);text-decoration:none;font-weight:600;padding:0 8px}
.pager a.on{background:var(--dark);color:#fff}
.pager span{background:none}
@media (max-width:900px){
  .cat{grid-template-columns:minmax(0,1fr)}
  .filters{position:fixed;inset:0;z-index:60;border-radius:0;max-height:none;top:0;transform:translateX(-100%);transition:transform .25s;padding-bottom:90px}
  .filters.open{transform:none}
  .filters__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:18px}
  .filters__close{border:0;background:var(--bg);width:40px;height:40px;border-radius:10px;font-size:18px;cursor:pointer}
  .filters__actions{position:fixed;left:0;right:0;bottom:0;background:#fff;padding:12px 16px;grid-template-columns:2fr 1fr;box-shadow:0 -4px 20px rgba(0,0,0,.08)}
  .toolbar__filters{display:inline-flex;flex:none}
  .toolbar__sort span{display:none}
  .toolbar__sort{min-width:0}
  .toolbar__sort select{max-width:100%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card__body{padding:10px}
  .card__price b{font-size:17px}
  .card .chip:not(.chip--size){display:none}
}

/* ---------- product page ---------- */
.pp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:start;margin-top:8px}
.gallery__main{position:relative;aspect-ratio:4/3;background:#e6e4dd;border-radius:var(--r);overflow:hidden;touch-action:pan-y}
.gallery__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .2s;cursor:zoom-in}
.gallery__main img.on{opacity:1}
.gallery__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:26px;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.gallery__nav--prev{left:12px}.gallery__nav--next{right:12px}
.gallery__counter{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;padding:3px 9px;border-radius:6px}
.gallery__thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.gallery__thumbs button{flex:none;width:84px;aspect-ratio:4/3;border:0;padding:0;border-radius:8px;overflow:hidden;cursor:pointer;opacity:.6;outline:2px solid transparent;outline-offset:-2px;background:#e6e4dd}
.gallery__thumbs button.on{opacity:1;outline-color:var(--ink)}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:100;display:grid;place-items:center;padding:16px}
.lightbox img{max-height:92vh;max-width:96vw;object-fit:contain}
.lightbox button{position:absolute;border:0;background:rgba(255,255,255,.15);color:#fff;width:48px;height:48px;border-radius:50%;font-size:26px;cursor:pointer}
.lightbox .lb-close{top:16px;right:16px}.lightbox .lb-prev{left:16px;top:50%}.lightbox .lb-next{right:16px;top:50%}
.buy{background:var(--card);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);position:sticky;top:84px}
.buy h1{font-size:clamp(22px,2.8vw,30px)}
.buy__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:18px 0}
.buy__price b{font-size:34px;font-family:var(--display);font-weight:800}
.buy__price span{color:var(--muted)}
.buy__price s{color:var(--muted)}
.buy__price em{font-style:normal;background:var(--red);color:#fff;font-weight:700;font-size:13px;padding:2px 7px;border-radius:6px}
.buy__qty{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qty{display:flex;align-items:center;background:var(--bg);border-radius:10px}
.qty button{width:40px;height:40px;border:0;background:none;font-size:20px;cursor:pointer}
.qty input{width:48px;border:0;background:none;text-align:center;font-weight:700;padding:0;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.buy__sum{color:var(--muted)}.buy__sum b{color:var(--ink)}
.buy__stock{color:var(--allseason);font-weight:600;margin:10px 0 0}
.buy__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.keyspecs{margin:0;display:grid;gap:0}
.keyspecs div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.keyspecs dt{color:var(--muted)}.keyspecs dd{margin:0;font-weight:600;text-align:right}
.tread{display:block;width:120px;height:6px;background:var(--bg);border-radius:3px;margin-top:5px;margin-left:auto;overflow:hidden}
.tread span{display:block;height:100%;background:var(--allseason);border-radius:3px}
.pickup{display:flex;gap:12px;background:var(--bg);border-radius:var(--r-sm);padding:12px 14px;margin-top:14px;font-size:14px}
.pickup b{display:block}.pickup span{color:var(--muted)}
.pp__info{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;margin-top:32px}
.specs,.desc{background:var(--card);border-radius:var(--r);padding:24px}
.specs dl{margin:0}
.specs div{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.specs div:last-child{border:0}
.specs dt{color:var(--muted)}.specs dd{margin:0;font-weight:500}
.desc__text{white-space:pre-line}
@media (max-width:900px){
  .pp,.pp__info{grid-template-columns:minmax(0,1fr);gap:16px}
  .buy{position:static;padding:18px}
  .gallery__main{margin:0 -16px;border-radius:0}
  .gallery__nav{display:none}
}

/* ---------- cart / checkout ---------- */
.citem{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;background:var(--card);border-radius:var(--r);padding:12px;margin-bottom:10px}
.citem img{width:96px;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:#eceae4}
.citem a{text-decoration:none;font-weight:600}
.citem__meta{font-size:14px;color:var(--muted)}
.citem__right{display:grid;justify-items:end;gap:8px}
.citem__rm{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;text-decoration:underline}
.ctotal{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--dark);color:#fff;border-radius:var(--r);padding:18px 20px;margin-top:14px}
.ctotal b{font-family:var(--display);font-size:26px}
@media (max-width:560px){.citem{grid-template-columns:72px 1fr}.citem img{width:72px}.citem__right{grid-column:1/-1;grid-template-columns:auto 1fr auto;justify-items:start;align-items:center}}
.checkout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;padding-bottom:40px}
.co{background:var(--card);border-radius:var(--r);padding:24px;display:grid;gap:14px}
.co fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.co legend{font-weight:700;font-size:18px;margin-bottom:6px}
.co label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.co .radio{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;color:var(--ink)}
.co .radio:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink)}
.co .radio input,.co .agree input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--ink);padding:0}
.co .radio span{display:grid}.co .radio small{color:var(--muted)}
.co .agree{display:flex;color:var(--ink)}
.co__errors{background:#fdecea;color:var(--red);border-radius:var(--r-sm);padding:12px 14px}
.co__summary{background:var(--card);border-radius:var(--r);padding:20px;position:sticky;top:84px}
.co__summary ul{list-style:none;padding:0;margin:0 0 12px}
.co__summary li b,.co__summary .sum span:last-child{white-space:nowrap}
.co__summary li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.co__summary .sum{display:flex;justify-content:space-between;font-size:20px;font-weight:700}
@media (max-width:900px){.checkout{grid-template-columns:minmax(0,1fr)}.co__summary{position:static;order:-1}}

/* ---------- result / prose ---------- */
.result{text-align:center;padding:48px 16px}
.result__icon{width:72px;height:72px;border-radius:50%;background:var(--allseason);color:#fff;font-size:36px;display:grid;place-items:center;margin:0 auto 18px}
.result__icon--fail{background:var(--red)}
.result__items{list-style:none;padding:0;max-width:480px;margin:20px auto;text-align:left;background:var(--card);border-radius:var(--r);padding:8px 18px}
.result__items li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.result__items li.total{border:0;font-size:18px}
.prose{padding-bottom:48px}
.prose h2{margin-top:1.4em}
.contacts div{display:grid;grid-template-columns:180px 1fr;padding:10px 0;border-bottom:1px solid var(--line)}
.contacts dt{color:var(--muted)}.contacts dd{margin:0;font-weight:600}
.map{margin-top:24px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#e6e4dd}
.map iframe{width:100%;height:100%;border:0}

/* ---------- footer ---------- */
.ftr{background:var(--dark);color:#bdbdbd;margin-top:56px;padding:40px 0 24px;font-size:15px}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.ftr__brand{font-family:var(--display);color:var(--accent);font-size:22px;margin-bottom:8px}
.ftr h4{color:#fff;margin:0 0 10px}
.ftr a{display:block;text-decoration:none;padding:3px 0}
.ftr a:hover{color:#fff}
.ftr__phone{font-size:20px;color:#fff;font-weight:700}
.ftr__legal{margin-top:28px;font-size:13px;color:#7d7d7d}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}

.toast{visibility:hidden;position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--dark);color:#fff;padding:12px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:200;transition:transform .25s;display:flex;gap:14px;align-items:center;max-width:calc(100vw - 32px)}
.toast.show{transform:translate(-50%,0);visibility:visible}
.toast a{color:var(--accent);font-weight:600}

/* admin */
.admin{padding:24px 0}
.aorder{background:var(--card);border-radius:var(--r);padding:16px;margin-bottom:12px;border-left:5px solid var(--line)}
.aorder--paid{border-color:var(--allseason)}.aorder--new,.aorder--awaiting_payment{border-color:var(--accent)}.aorder--cancelled{opacity:.6}
.aorder header{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.aorder .tag{background:var(--bg);padding:2px 8px;border-radius:6px;font-size:13px}
.aorder form{display:flex;gap:8px;align-items:center}.aorder select{width:auto}

.soldbox{display:grid;gap:4px;background:#fdecea;border-radius:var(--r-sm);padding:14px 16px;margin:6px 0 18px}
.soldbox b{color:var(--red);font-family:var(--display);font-size:22px}

/* ================= фирменный стиль: шины ================= */
.hdr__phone{display:grid;text-decoration:none;line-height:1.15;text-align:right;flex:none}
.hdr__phone b{color:#fff;font-size:16px}
.hdr__phone small{color:#9a9a9a;font-size:12px}
@media (max-width:1100px){.hdr__phone small{display:none}}
@media (max-width:900px){.hdr__phone{display:none}}

.hero{background:var(--dark);color:#fff;position:relative;overflow:hidden;padding-bottom:120px}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background:radial-gradient(circle at 85% 20%,#fff 0 1px,transparent 1.5px) 0 0/22px 22px}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;padding-top:56px;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,64px);line-height:1.02;letter-spacing:-.015em;margin-bottom:.4em;color:#fff}
.lead{font-size:18px;color:#cfcfcf;max-width:34em}
.hero__facts{list-style:none;padding:0;margin:30px 0 0;display:flex;gap:32px;flex-wrap:wrap}
.hero__facts li{display:grid;gap:4px;border-left:3px solid var(--accent);padding-left:12px}
.hero__facts b{font-family:var(--display);font-size:24px;color:#fff;line-height:1}
.hero__facts span{font-size:13px;color:#a8a8a8;line-height:1.35}
.picker__hint{margin:-4px 0 14px;color:var(--muted);font-size:14px}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;padding-top:32px;gap:28px}.hero{padding-bottom:96px}}

/* дорога со следом протектора + въезжающая шина */
.road{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none}
.road__track{position:absolute;left:0;bottom:22px;height:34px;width:calc(100% - 180px);
  background:
    repeating-linear-gradient(90deg,transparent 0 6px,#000 6px 8px),
    linear-gradient(transparent 0 15px,#000 15px 19px,transparent 19px),
    repeating-linear-gradient(120deg,#2b2b2b 0 9px,transparent 9px 18px),
    repeating-linear-gradient(60deg,#2b2b2b 0 9px,transparent 9px 18px);
  background-size:auto,auto,100% 50%,100% 50%;background-position:0 0,0 0,0 0,0 100%;background-repeat:repeat,repeat,repeat-x,repeat-x;
  border-radius:4px;opacity:.6;transform-origin:left;animation:track 2.4s cubic-bezier(.3,.6,.25,1) both}
.road__tire{position:absolute;right:40px;bottom:6px;width:150px;height:150px;animation:roll-in 2.4s cubic-bezier(.3,.6,.25,1) both}
.road__tire .tire{width:100%;height:100%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
@keyframes roll-in{from{transform:translateX(calc(-100vw + 160px)) rotate(-900deg)}to{transform:none}}
@keyframes track{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:900px){.road{height:96px}.road__tire{width:100px;height:100px;right:16px}.road__track{width:calc(100% - 110px);height:26px;bottom:16px}}

/* плитки диаметров — маленькие колёса */
.radii{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.radius{display:grid;justify-items:center;gap:8px;padding:16px 10px 14px;text-align:center}
.radius__tire{position:relative;width:84px;height:84px;display:grid;place-items:center}
.radius__tire .tire{position:absolute;inset:0;width:100%;height:100%;transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.radius__tire b{position:relative;font-family:var(--display);font-size:17px;color:#0d0d0d;background:var(--accent);border-radius:999px;padding:2px 8px;box-shadow:0 0 0 3px #0d0d0d}
.radius:hover .tire,.radius:focus-visible .tire{transform:rotate(180deg)}
.radius__count{font-size:13px;color:var(--muted)}
.tire--mini .tire__rim circle:nth-of-type(3){display:none}

/* преимущества */
.perks{background:#fff;margin-top:48px;padding:36px 0;border-top:6px solid var(--dark)}
.perks__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.perk{display:grid;gap:6px}
.perk b{font-size:17px;padding-left:18px;position:relative}
.perk b::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #000}
.perk span{color:var(--muted);font-size:15px}
@media (max-width:900px){.perks__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.perks__grid{grid-template-columns:1fr}}
.trust{display:none}

/* где мы */
.where{background:var(--dark);color:#fff;padding:56px 0;margin-top:0}
.where__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:36px;align-items:stretch}
.where h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,34px);margin-bottom:20px}
.where dl{margin:0;display:grid}
.where dl div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #262626}
.where dt{color:#9a9a9a}.where dd{margin:0;font-weight:600}
.where dd a{color:var(--accent);text-decoration:none}
.where__note{color:#bdbdbd;margin:18px 0}
.where__actions{display:flex;gap:10px;flex-wrap:wrap}
.btn--ghost-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #444}
.btn--ghost-dark:hover{background:#1f1f1f}
.where__map{border-radius:var(--r);overflow:hidden;min-height:360px;background:#1a1a1a;position:relative}
.where__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:900px){.where__map{min-height:0;height:340px}.where__grid{grid-template-columns:1fr}.where dl div{grid-template-columns:110px 1fr}}
.prose + .where{margin:8px 0 24px}

/* футер */
.ftr{margin-top:0}
.ftr__brand{display:flex;align-items:center;gap:10px;font-family:var(--display);color:#fff;font-size:22px;margin-bottom:10px}
.ftr__brand img{border-radius:50%}
.adm__logo{display:inline-flex;align-items:center;gap:8px}
.adm__logo img{border-radius:50%}

/* корзина: шина укатывается в иконку */
.fly-tire{position:fixed;z-index:300;width:34px;height:34px;pointer-events:none}
.fly-tire .tire{width:100%;height:100%}
.cartbtn.bump{animation:bump .45s ease}
@keyframes bump{30%{transform:scale(1.18)}60%{transform:scale(.94)}}

.card__img img{transition:transform .35s ease}
.card:hover .card__img img{transform:scale(1.03)}

@media (prefers-reduced-motion:reduce){
  .road__tire,.road__track{animation:none}
  .radius__tire .tire,.card__img img{transition:none}
  .fly-tire{display:none}
  .cartbtn.bump{animation:none}
}
.where__open{position:absolute;left:12px;bottom:12px;z-index:2;background:#000;color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:8px 12px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.where__open:hover{background:var(--accent);color:#000}

/* ================= анимации и удобство ================= */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
html{scroll-behavior:smooth;scroll-padding-top:84px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:#000}
:root{--ease:cubic-bezier(.22,.8,.24,1)}

/* шапка: тень и уплотнение при прокрутке */
.hdr{transition:box-shadow .25s}
.hdr__row{transition:height .25s var(--ease)}
.hdr--scrolled{box-shadow:0 6px 24px rgba(0,0,0,.35)}
@media (min-width:901px){.hdr--scrolled .hdr__row{height:58px}.hdr--scrolled .logo__mark{width:40px;height:40px}}
.logo__mark{transition:width .25s,height .25s,transform .6s var(--ease)}
.logo:hover .logo__mark{transform:rotate(-180deg)}
.hdr__nav a{position:relative}
.hdr__nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .25s var(--ease)}
.hdr__nav a:hover::after,.hdr__nav a.on::after{transform:scaleX(1)}
.search{transition:box-shadow .2s}
.search:focus-within{box-shadow:0 0 0 3px var(--accent)}
.search button{transition:background .15s}
.search button:hover{background:var(--accent-2)}

/* бургер и мобильное меню */
.burger{display:none;width:44px;height:44px;border:0;border-radius:12px;background:var(--dark-2);cursor:pointer;flex:none;padding:0;place-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){.burger{display:grid}}
.mnav{position:fixed;inset:0;z-index:39}
.mnav__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.mnav__panel{position:absolute;left:0;right:0;top:var(--hdr-h,112px);background:var(--dark);padding:8px 16px 20px;display:grid;gap:2px;transform:translateY(-12px);opacity:0;transition:transform .3s var(--ease),opacity .25s;border-radius:0 0 20px 20px;max-height:calc(100dvh - var(--hdr-h,112px));overflow:auto}
.mnav.open .mnav__backdrop{opacity:1}
.mnav.open .mnav__panel{transform:none;opacity:1}
.mnav__panel>a{color:#eee;text-decoration:none;font-size:18px;font-weight:600;padding:12px 4px;border-bottom:1px solid #1d1d1d;display:flex;align-items:center;gap:10px}
.mnav__panel>a.on{color:var(--accent)}
.mnav__panel>a .cartbtn__n{position:static}
.mnav__contacts{display:grid;gap:4px;color:#9a9a9a;font-size:14px;padding-top:14px}
.mnav__phone{color:#fff;font-size:20px;font-weight:700;text-decoration:none}
.mnav.open .mnav__panel>a{animation:rise .4s var(--ease) both}
.mnav.open .mnav__panel>a:nth-child(2){animation-delay:.04s}.mnav.open .mnav__panel>a:nth-child(3){animation-delay:.08s}
.mnav.open .mnav__panel>a:nth-child(4){animation-delay:.12s}.mnav.open .mnav__panel>a:nth-child(5){animation-delay:.16s}

/* кнопки */
.btn{position:relative;overflow:hidden;transition:background .15s,transform .15s var(--ease),box-shadow .2s}
.btn:not(.btn--ghost):not(.btn--ghost-dark):hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.btn:active{transform:translateY(1px) scale(.98);box-shadow:none}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none;opacity:0}
.btn:not(.btn--dark):not(.btn--ghost):not(.btn--ghost-dark):hover::after{animation:shine .7s ease;opacity:1}
@keyframes shine{to{left:130%}}
.btn.added{animation:pop .35s var(--ease)}
.btn:disabled{opacity:.6;cursor:wait}
@keyframes pop{40%{transform:scale(1.06)}}

/* появление при прокрутке */
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes fade{from{opacity:0}}

/* hero: поэтапное появление */
.hero h1,.hero .lead,.hero__facts li,.picker{animation:rise .8s var(--ease) both}
.hero .lead{animation-delay:.12s}
.hero__facts li:nth-child(1){animation-delay:.24s}.hero__facts li:nth-child(2){animation-delay:.32s}.hero__facts li:nth-child(3){animation-delay:.4s}
.picker{animation-delay:.2s}
.hero::after{content:"";position:absolute;width:520px;height:520px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(229,197,93,.18),transparent 65%);pointer-events:none;animation:glow 8s ease-in-out infinite alternate}
@keyframes glow{to{transform:translate(-80px,60px) scale(1.15)}}
.road__tire .tire{animation:spin-idle 6s linear 2.4s infinite paused}
.road__tire:hover .tire{animation-play-state:running}
@keyframes spin-idle{to{transform:rotate(360deg)}}
.picker select{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.picker select:hover{border-color:#bdbab0}
.pill span,.tile span{transition:background .15s,color .15s,box-shadow .15s,transform .15s}
.pill span:hover,.tile span:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pill input:checked+span,.tile input:checked+span{animation:pop .3s var(--ease)}

/* карточки */
.card{transition:box-shadow .25s,transform .25s var(--ease)}
.card:hover{transform:translateY(-4px)}
.card__img{overflow:hidden;background:linear-gradient(100deg,#eceae4 30%,#f6f5f1 50%,#eceae4 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
.card__img.ok{animation:none;background:#eceae4}
.card__img img.lazy{opacity:0;transition:opacity .4s,transform .35s ease}
.card__img img.lazy.ok{opacity:1}
@keyframes shimmer{to{background-position:-150% 0}}
.card:hover .card__img img{transform:scale(1.06)}
.card .season{transition:transform .4s var(--ease)}
.card:hover .season{transform:rotate(30deg) scale(1.08)}
.radius{transition:transform .25s var(--ease),box-shadow .25s}
.radius:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 14px 36px rgba(0,0,0,.1)}
.brand{transition:background .2s,color .2s,transform .2s var(--ease)}
.brand:hover{transform:translateY(-2px)}
.perk b::before{transition:transform .3s var(--ease)}
.perk:hover b::before{transform:scale(1.4)}

/* каталог */
.grid.loading{opacity:.45;pointer-events:none;transition:opacity .2s}
.cat__main{position:relative}
.cat__main.loading::after{content:"";position:absolute;left:50%;top:120px;width:44px;height:44px;margin-left:-22px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--ink);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.active__chip{transition:background .15s}
.active__chip:hover{background:var(--red)}
.pager a{transition:background .15s,color .15s,transform .15s}
.pager a:hover:not(.on){background:var(--accent);transform:translateY(-2px)}
.filters-backdrop{position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s}
.filters-backdrop.open{opacity:1;pointer-events:auto}
@media (max-width:900px){.filters{right:auto;width:min(420px,100%);transition:transform .35s var(--ease),box-shadow .35s}.filters.open{box-shadow:20px 0 60px rgba(0,0,0,.25)}.filters__actions{width:min(420px,100%)}}

/* карточка товара */
.gallery__main img{transition:opacity .35s ease,transform .5s var(--ease);transform:scale(1.02)}
.gallery__main img.on{transform:none}
.gallery__nav{transition:transform .15s,background .15s;opacity:.92}
.gallery__nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.gallery__thumbs button{transition:opacity .2s,outline-color .2s}
.gallery__thumbs button:hover{opacity:1}
.gallery__counter{transition:transform .2s}
.lightbox{animation:fade .25s ease both}
.lightbox img{animation:zoomin .3s var(--ease) both;touch-action:pan-y}
.lightbox img.swap{animation:none;opacity:0}
.lightbox img{transition:opacity .2s}
@keyframes zoomin{from{opacity:0;transform:scale(.94)}}
.lightbox button{transition:background .15s}
.lightbox button:hover{background:rgba(255,255,255,.3)}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#ddd;font-size:14px}
.tread span{transform-origin:left;animation:grow 1.1s var(--ease) .3s both}
@keyframes grow{from{transform:scaleX(0)}}
.qty button{transition:background .15s;border-radius:10px}
.qty button:hover{background:#e6e4dd}
.bump-num{animation:pop .3s var(--ease)}
.buybar{display:none}
@media (max-width:900px){
  .buybar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;padding:10px 16px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(0,0,0,.1);transform:translateY(110%);transition:transform .3s var(--ease)}
  .buybar.show{transform:none}
  .buybar__price b{font-family:var(--display);font-size:20px;display:block;line-height:1.1}
  .buybar__price span{font-size:13px;color:var(--muted)}
  .buybar .btn{padding:12px 22px}
}

/* корзина */
.citem{transition:opacity .3s,transform .3s var(--ease)}
.citem.out{opacity:0;transform:translateX(40px)}
.citem img{transition:transform .3s var(--ease)}
.citem:hover img{transform:scale(1.04)}

/* тост и «наверх» */
.toast{transition:transform .35s var(--ease)}
.totop{position:fixed;right:16px;bottom:20px;z-index:44;width:46px;height:46px;border:0;border-radius:50%;background:var(--accent);color:#000;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--accent-2)}
body.has-buybar .totop{bottom:86px}
body.has-buybar .toast{bottom:90px}

/* появление при прокрутке (в конце, чтобы перебить transition карточек; класс снимается после показа) */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)!important;transition-delay:calc(var(--i,0) * 60ms)!important}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}