/* ==================================================================
   Тема «Одежда» — дизайн-система витрины.
   Один шрифт (IBM Plex Mono), два цвета, один серый. Ни рамок, ни теней,
   ни скруглений: иерархия — размером, регистром, прозрачностью.
   Разделы: токены · база · движение · шапка · поиск · фильтры · сетка ·
   карточка · списки · кнопки · формы · чекаут · кабинет · документы ·
   подвал · диалоги · WooCommerce-совместимость.
   ================================================================== */
:root{
  --ink:#000; --paper:#fff;
  --grey:#6e6e6e; --grey-2:#b0b0b0; --err:#c0342b; --line:#d9d9d9; --line-2:#ececec;
  --dim:.2; --nav-h:64px; --gap:16px; --pad:16px; --cols:6;
  --t:340ms; --t-slow:680ms; --spin-t:6s; --ease:cubic-bezier(.32,.72,0,1); --ease-io:cubic-bezier(.5,.05,.2,1);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}
@media (max-width:1024px){:root{--cols:4}}
@media (max-width:768px){:root{--cols:3}}
[data-zoom="in"]{--cols:3}
@media (max-width:768px){[data-zoom="in"]{--cols:2}}

/* ---------- база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font:400 16px/24px var(--mono); text-transform:uppercase; -webkit-font-smoothing:antialiased; min-height:100vh}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; text-transform:inherit}
img,svg{display:block; max-width:100%; height:auto}
input,select,textarea{font:inherit; color:inherit; text-transform:none}
[hidden]{display:none!important}
:focus-visible{outline:1px solid var(--ink); outline-offset:3px}
.sr,.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip:focus{position:fixed; left:16px; top:16px; width:auto; height:auto; clip:auto; z-index:200; background:var(--paper); padding:8px 12px}
.dim{opacity:var(--dim)} .grey{color:var(--grey)} .small{font-size:14px; line-height:20px} /* Схема мерок: колонка документа — 640px, рядом с рисунком текст становится
   слишком узким, поэтому схема стоит над шагами и по центру. */
.meas{margin:16px 0 8px}
.meas__fig{margin:0 auto 24px; max-width:300px}
.meas__fig svg{width:100%; height:auto; display:block; font-family:inherit}
.doc .meas__steps{list-style:none; margin:0; padding:0; counter-reset:m; display:grid; gap:14px}
.doc .meas__steps li{counter-increment:m; position:relative; padding-left:30px; margin:0}
.doc .meas__steps li::before{content:counter(m); position:absolute; left:0; top:0; color:var(--grey); font-variant-numeric:tabular-nums}
.meas__steps b{font-weight:500}
@media (max-width:480px){.meas__fig{max-width:240px}}
.tiny{font-size:11px; line-height:16px}
.lc{text-transform:none} .num{font-variant-numeric:tabular-nums} .hide{display:none!important}
.ico{width:24px; height:24px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none}
.ico--s{width:20px; height:20px}
::selection{background:var(--ink); color:var(--paper)}

/* ---------- движение ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:260ms var(--ease-io) both vt-out}
::view-transition-new(root){animation:400ms var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0; transform:translateY(8px)}}
.nav{view-transition-name:nav}
::view-transition-group(nav){animation-duration:0s}
.progress{position:fixed; left:0; top:0; height:2px; width:0; background:var(--ink); z-index:300; opacity:0; transition:width 700ms var(--ease),opacity 220ms}
.progress.is-on{opacity:1; width:70%}
.progress.is-done{width:100%; opacity:0; transition:width 220ms var(--ease),opacity 380ms 200ms}
.fade-up{animation:fade-up var(--t-slow) var(--ease) both}
@keyframes fade-up{from{opacity:0; transform:translateY(12px)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes tile-in{from{opacity:0; transform:translateY(14px)}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- шапка ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:90; height:var(--nav-h); background:var(--paper); padding:12px var(--pad); display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.nav__l{display:flex; align-items:center; gap:12px; justify-self:start}
.nav__c{display:flex; align-items:center; gap:16px; justify-self:center}
.nav__r{display:flex; align-items:center; gap:20px; justify-self:end}
.nav button,.nav a{display:inline-flex; align-items:center; justify-content:center; min-height:40px; transition:opacity var(--t)}
.nav__zoom{width:24px; height:40px; position:relative}
.nav__zoom .ico{transition:transform 560ms var(--ease)}
[data-zoom="in"] .nav__zoom .ico{transform:rotate(45deg)}
.nav__cnt{position:absolute; top:6px; right:-8px; font-size:10px; line-height:14px; min-width:14px; text-align:center; display:inline-block}
.nav__cnt.bump{animation:bump 560ms var(--ease)}
.nav__icon{position:relative}
.nav__icon:hover .ico{transform:translateY(-1px)}
.nav__icon .ico{transition:transform var(--t) var(--ease)}
@media (max-width:768px){.nav__c{gap:12px}.nav__r{gap:14px}}
@media (max-width:480px){.nav{padding:12px; grid-template-columns:auto 1fr auto; gap:8px}.nav__c{gap:10px; font-size:13px}.nav__r{gap:10px}.nav__cnt{right:-6px}}

.logo{height:14px; width:auto; display:block}
.nav__logo{margin-left:4px; color:var(--ink); transition:opacity var(--t)}
.nav__logo:hover{opacity:.6}
.nav__logo .logo path{stroke-dasharray:60; stroke-dashoffset:0}
.foot__logo{display:inline-block; margin-bottom:20px; color:var(--ink)}
.foot__logo .logo{height:18px; margin:0 auto}
@media (max-width:480px){.logo{height:12px}.nav__l,.nav__r{gap:8px}}

/* ---------- панель поиска ---------- */
.srch{position:fixed; left:0; right:0; top:var(--nav-h); z-index:85; background:var(--paper); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity var(--t),transform var(--t) var(--ease); padding:0 var(--pad) 16px}
.srch.is-open{transform:none; opacity:1; pointer-events:auto}
.srch__in{width:100%; height:48px; border:0; border-bottom:1px solid var(--ink); padding:0; background:transparent; text-transform:uppercase; outline:0; font-size:16px; border-radius:0; -webkit-appearance:none}
.srch__in::placeholder{color:var(--grey-2); text-transform:uppercase}
.srch__in::-webkit-search-cancel-button{-webkit-appearance:none}
.srch__hint{font-size:10px; line-height:15px; color:var(--grey); margin-top:6px}
.srch__res{margin-top:8px; display:grid}
.srch__row{display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center; padding:6px 0; transition:opacity var(--t); animation:fade-up 300ms var(--ease) both}
.srch__row:hover{opacity:.6}
.srch__row img{width:40px; height:40px}
.srch__row .sku{color:var(--grey); font-size:14px}
.srch__none{padding:12px 0; color:var(--grey); font-size:14px; line-height:20px}
.srch__none b{color:var(--ink); font-weight:500}

/* ---------- страница ---------- */
.page{padding-top:var(--nav-h); min-height:100vh; display:flex; flex-direction:column; transition:padding var(--t)}
.page__body{flex:1}

/* ---------- сетка ---------- */
.grid{display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:var(--gap); align-content:start; padding:0 var(--pad) 32px; transition:opacity var(--t)}
.grid.is-loading{opacity:.35; pointer-events:none}
.tile{display:flex; flex-direction:column; align-items:center; width:100%; text-align:center; position:relative; animation:tile-in 620ms var(--ease) both; animation-delay:min(calc(var(--i,0) * 32ms),500ms)}
.tile__img{width:100%; aspect-ratio:1/1; display:block; position:relative; transition:transform var(--t) var(--ease); overflow:hidden}
.tile:hover .tile__img{transform:scale(1.02)}
.tile__img img{width:100%; height:100%; object-fit:contain}
.tile__img2{position:absolute; inset:0; opacity:0; transition:opacity 560ms var(--ease)}
.tile:hover .tile__img2{opacity:1}
.tile__label{width:100%; line-height:24px; position:relative; height:48px}
.tile__sku,.tile__meta{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity var(--t)}
.tile__meta{color:var(--grey); font-size:14px; line-height:20px}
.tile__sizes{position:absolute; left:0; right:0; top:0; opacity:0; transition:opacity var(--t); font-size:14px; line-height:24px; letter-spacing:.08em}
.tile__sizes s{opacity:var(--dim); text-decoration:none}
@media (hover:hover){.tile:hover .tile__sku{opacity:0}.tile:hover .tile__sizes{opacity:1}}
.tile__fav{position:absolute; top:4px; right:4px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--t)}
.tile:hover .tile__fav,.tile__fav.is-on,.tile__fav:focus-visible{opacity:1}
.tile__fav.is-on .ico{fill:var(--ink)}
.tile__fav.is-pop .ico{animation:pop 560ms var(--ease)}
@media (hover:none){.tile__fav{opacity:1}}
.tile--out .tile__img{opacity:.35}
.tile__tag{position:absolute; top:8px; left:8px; font-size:10px; line-height:15px; color:var(--grey)}
.grid:has(> .grid__empty){flex:none}
.grid__empty{grid-column:1/-1; text-align:center; padding:80px 16px 48px; color:var(--grey); font-size:14px; line-height:20px}
.grid__empty b{color:var(--ink); font-weight:500; display:block; margin-bottom:8px}
.grid__more{grid-column:1/-1; text-align:center; padding:24px 0}
@media (max-width:520px){.tile__meta s{display:none}}

/* ---------- карточка ---------- */
.pv{display:flex; flex-direction:column; align-items:center; padding:0 var(--pad) 48px; font-weight:500}
.pv__stage{position:relative; width:min(560px,100%); aspect-ratio:1/1; margin:0 auto; display:flex; align-items:center; justify-content:center}
.pv__stage img{width:100%; height:100%; object-fit:contain}
.pv__swap{position:absolute; inset:0; opacity:0; transition:opacity 480ms var(--ease); pointer-events:none}
.pv__swap.is-in{opacity:1}
.pv__arrow{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; display:flex; align-items:center; justify-content:center; transition:opacity var(--t),transform var(--t) var(--ease)}
.pv__arrow--l{left:-64px} .pv__arrow--r{right:-64px}
.pv__arrow:hover{transform:translateY(-50%) scale(1.15)}
.pv__arrow.is-off{opacity:var(--dim); pointer-events:none}
@media (max-width:760px){.pv__arrow--l{left:-8px}.pv__arrow--r{right:-8px}}
.pv__peek{position:absolute; top:0; width:100%; height:100%; opacity:.15; pointer-events:none; display:none; transition:opacity var(--t)}
@media (min-width:1440px){.pv__peek{display:block}.pv__peek--l{right:calc(100% + 120px)}.pv__peek--r{left:calc(100% + 120px)}}
.pv__dots{display:flex; gap:8px; justify-content:center; height:16px; align-items:center; margin-top:4px}
.pv__dots button{width:24px; height:24px; border-radius:50%; padding:10px; background:var(--grey-2); background-clip:content-box; transition:background-color var(--t),transform var(--t)} /* точка 4px, область нажатия 24px */
.pv__dots button.is-on{background-color:var(--ink); transform:scale(1.4)}
.pv__colors{display:flex; gap:12px; justify-content:center; margin-top:8px; height:24px; align-items:center}
.pv__colors button{width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.15); opacity:.45; position:relative; transition:opacity var(--t),transform var(--t) var(--ease)}
.pv__colors button.is-on{opacity:1; transform:scale(1.25)}
.pv__colors button::before{content:''; position:absolute; inset:-16px} /* область нажатия 44px */
.pv__colors button:hover{opacity:1}
.pv__lines{display:flex; flex-direction:column; align-items:center; text-align:center; width:min(528px,100%); margin-top:8px}
.pv__lines > *{width:100%; min-height:24px}
.pv__sku{position:relative; height:24px; font-size:16px; font-weight:500}
.pv__sku span{position:absolute; inset:0; transition:opacity var(--t),visibility var(--t),transform var(--t) var(--ease)}
.pv__sku span.is-hid{opacity:0; visibility:hidden; transform:translateY(4px)}
.pv__price{margin-top:24px; position:relative; height:24px; display:flex; justify-content:center; align-items:center; gap:20px} /* кнопки по бокам цены не наезжают на длинную цену со скидкой */
.pv__price s{color:var(--grey); margin-right:12px; font-weight:400}
.pv__price .side{position:static; flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--grey); opacity:0; transition:opacity var(--t),transform var(--t) var(--ease); transform:scale(.6)}
.pv__price .side--l{right:calc(50% + 72px)} .pv__price .side--r{left:calc(50% + 72px)}
.pv.is-sizing .pv__price .side{opacity:1; transform:none}
.pv__price .side:hover{color:var(--ink)}
.pv__split{font-size:14px; line-height:20px; color:var(--grey); margin-top:4px; font-weight:400}
.pv__act{position:relative; height:48px; margin-top:24px; display:flex; align-items:center; justify-content:center}
.pv__plus{width:24px; height:48px; display:flex; align-items:center; justify-content:center; transition:opacity var(--t),transform 400ms var(--ease)}
.pv__plus:hover .ico{transform:rotate(90deg)}
.pv__plus .ico{transition:transform 560ms var(--ease)}
.pv.is-sizing .pv__plus{opacity:0; pointer-events:none; transform:scale(.4) rotate(45deg)}
.pv__fav{position:absolute; right:calc(50% - 96px); top:12px; width:24px; height:24px; transition:opacity var(--t)}
.pv__fav.is-on .ico{fill:var(--ink)}
.pv__fav.is-pop .ico{animation:pop 560ms var(--ease)}
.pv.is-sizing .pv__fav{opacity:0; pointer-events:none}
.pv__sizes{position:absolute; inset:0; display:flex; justify-content:center; opacity:0; pointer-events:none; transition:opacity var(--t)}
.pv.is-sizing .pv__sizes{opacity:1; pointer-events:auto}
.pv__size{width:66px; height:48px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; position:relative; transform:translateX(var(--tx0,0)); transition:transform 500ms var(--ease),opacity var(--t)}
.pv.is-sizing .pv__size{transform:none} /* inline --tx0 задаёт старт «из плюса», здесь — разлёт по местам */
.pv__size .ru{line-height:24px; transition:transform var(--t) var(--ease)}
.pv__size:hover .ru{transform:translateY(-2px)}
.pv__size .int{font-size:10px; line-height:14px; color:var(--grey); transition:color var(--t)}
.pv__size:hover .int{color:var(--grey)}
.pv__size.is-out .ru{opacity:var(--dim); text-decoration:line-through}
.pv__size.is-low .int::after{content:' · 1 шт'; color:var(--grey)}
.pv__size.is-on .ru{text-decoration:underline; text-underline-offset:4px}
.pv__status{margin-top:8px; min-height:24px; color:var(--grey); font-weight:400; transition:opacity var(--t)}
.pv__status a,.pv__status button{text-decoration:underline; text-underline-offset:4px; color:var(--ink)}
.pv__status form{display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap}
.pv__status input{height:32px; border:0; border-bottom:1px solid var(--ink); outline:0; width:180px; padding:0 4px; background:transparent}
.pv__lines > .pv__info-btn{width:auto; margin-top:24px; height:24px; align-self:center}
.pv__info{width:min(528px,100%); margin-top:16px; text-align:center; font-weight:400; display:grid; gap:24px; overflow:hidden; max-height:0; opacity:0; transition:max-height 600ms var(--ease),opacity var(--t)}
.pv__info.is-open{max-height:3000px; opacity:1}
.pv__info h4{font-weight:500; margin-bottom:4px}
.pv__info .grey{color:var(--grey)}
.pv__desc p{margin-bottom:8px}
.pv__delivery{display:grid; gap:2px; font-size:14px; line-height:20px}
.pv__delivery .row{display:flex; justify-content:space-between; gap:12px}
.pv__meas{width:100%; border-collapse:collapse; font-size:14px; line-height:20px}
.pv__meas th,.pv__meas td{padding:4px 8px; border-bottom:1px solid var(--line-2); font-weight:400; text-align:center}
.pv__meas th{color:var(--grey)}
.pv__meas tr{transition:background var(--t)}
.pv__meas tr.is-on td{font-weight:500}
.pv__rel{width:100%; margin-top:48px}
.pv__rel h4{text-align:center; font-weight:400; color:var(--grey); font-size:14px; margin-bottom:12px}
.pv__rel .grid{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap); padding:0} /* меньше шести похожих — ряд остаётся по центру */
.pv__rel .tile{width:calc((100% - 5 * var(--gap)) / 6)}
@media (max-width:768px){.pv__rel .tile{width:calc((100% - 2 * var(--gap)) / 3)}}

/* ---------- списки ---------- */
.list{width:min(720px,100%); margin:0 auto; padding:16px var(--pad) 48px}
.list--wide{width:100%} /* заголовок над сеткой выравниваем по её левому краю */
.list__h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; gap:16px}
.list__h h1{font-weight:500; font-size:16px}
.row{display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-2); animation:fade-up 620ms var(--ease) both}
.row img{width:96px; height:96px}
.row__t{display:grid; gap:2px; min-width:0}
.row__t .n{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row__t .m{color:var(--grey); font-size:14px; line-height:20px}
.row__r{display:grid; gap:4px; justify-items:end; text-align:right}
.row.is-out{opacity:0; transform:translateX(12px); transition:opacity var(--t),transform var(--t)}
.qty{display:inline-flex; align-items:center}
.qty button{width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--grey)}
.qty button:hover{color:var(--ink)}
.qty span,.qty input{min-width:20px; text-align:center}
.qi{width:40px; height:28px; border:0; padding:0; background:transparent; -moz-appearance:textfield; appearance:textfield; outline:0}
.qi::-webkit-outer-spin-button,.qi::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.row__x{color:var(--grey); font-size:14px}
.row__x:hover{color:var(--ink)}
select.csz,select.fsz{border:0; border-bottom:1px solid var(--ink); background:none; font:inherit; text-transform:uppercase; padding:0 16px 0 0; outline:0; border-radius:0; -webkit-appearance:none; appearance:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6 10l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/14px}
@media (max-width:520px){.row{grid-template-columns:72px 1fr}.row img{width:72px; height:72px}.row__r{grid-column:2; justify-items:start; text-align:left}}
.empty{text-align:center; padding:96px 16px; color:var(--grey); font-size:14px; line-height:20px}
.empty b{display:block; color:var(--ink); font-weight:500; margin-bottom:8px}
.empty a{text-decoration:underline; text-underline-offset:4px; color:var(--ink)}
.sum{display:grid; gap:4px; padding:16px 0; font-size:14px; line-height:20px}
.sum .r{display:flex; justify-content:space-between; gap:16px}
.sum .r.total{font-size:16px; line-height:24px; font-weight:500; padding-top:8px}
.free{font-size:14px; line-height:20px; color:var(--grey); padding:16px 0 4px}
.free i{display:block; height:2px; background:var(--line-2); margin-top:10px; position:relative; overflow:hidden}
.free i b{position:absolute; left:0; top:0; bottom:0; background:var(--ink); transition:width var(--t-slow) var(--ease)}
.cart__actions{display:flex; justify-content:flex-end; padding:8px 0}
.cart__coupon{padding:8px 0 0}

/* ---------- кнопки ---------- */
.btn,.button,.woocommerce-button,#place_order{display:flex; align-items:center; justify-content:center; width:100%; height:48px; background:var(--ink); color:var(--paper); padding:0 12px; border:1px solid var(--ink); transition:opacity var(--t),transform var(--t) var(--ease); text-transform:uppercase; font:inherit; cursor:pointer; text-decoration:none; border-radius:0}
.btn:hover,.button:hover,#place_order:hover{opacity:.75}
.btn:active,#place_order:active{transform:scale(.99)}
.btn[disabled],#place_order[disabled]{opacity:.3; pointer-events:none}
.btn--ghost{background:var(--paper); color:var(--ink)}
.btn--sm{height:40px; font-size:14px}
.lnk{text-decoration:underline; text-underline-offset:4px; transition:opacity var(--t)}
.lnk:hover{opacity:.6}

/* ---------- формы ---------- */
.f h3,.f .woocommerce-billing-fields h3,.f .woocommerce-additional-fields h3,.co__h{font-weight:500; color:var(--ink); font-size:14px; line-height:20px; letter-spacing:.1em; margin:32px 0 16px}
.co__h{margin:16px 0 8px}
.f h3:first-child,.f .woocommerce-billing-fields h3:first-child{margin-top:0}
/* подпись поля; галочки .chk и .opt раскладываются сами и под это правило не попадают */
.f label:not(.chk):not(.opt),.f .form-row label:not(.chk):not(.opt){display:block; color:var(--grey); font-size:12px; line-height:18px; letter-spacing:.04em; margin-bottom:6px; text-transform:uppercase}
.f label .required,.f label .optional{display:none}
.f .fld,.f .form-row{margin:0 0 16px; position:relative; padding:0}
.f .woocommerce-input-wrapper{display:block}
.f input[type=text],.f input[type=tel],.f input[type=email],.f input[type=search],.f input[type=number],.f input[type=password],.f select,.f textarea,.f .input-text{width:100%; height:40px; border:1px solid var(--line); background:var(--paper); padding:0 12px; outline:0; transition:border-color var(--t); border-radius:0; -webkit-appearance:none; appearance:none; font:inherit; color:var(--ink)}
.f textarea{height:auto; padding:8px 12px; min-height:80px; resize:vertical}
.f select{background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6 10l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px; padding-right:36px; text-transform:uppercase}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink)}
.f input::placeholder,.f textarea::placeholder{color:var(--grey-2); text-transform:uppercase; font-size:14px}
.f input.is-err,.f .woocommerce-invalid input{border-color:var(--ink)}
.f .err{font-size:10px; line-height:15px; color:var(--ink); margin-top:4px}
.f .two{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:end}
@media (max-width:480px){.f .two{grid-template-columns:1fr}}
.chk{display:flex; gap:14px; align-items:center; font-size:12px; line-height:18px; color:var(--grey); margin:8px 0 20px; cursor:pointer; text-transform:uppercase; text-align:left}
.chk input{width:16px; height:16px; margin:0; flex:none}
.chk > span{flex:1}
.chk--top{align-items:flex-start}
.chk--top input{margin-top:1px}
.chk--m{font-size:14px; line-height:16px; color:var(--ink); margin:8px 0 20px}
.f .form-row.odz-chk label.checkbox{display:flex; gap:14px; align-items:flex-start; font-size:12px; line-height:18px; color:var(--grey); margin:8px 0 20px; cursor:pointer; text-transform:uppercase; text-align:left}
.f .form-row.odz-chk input{width:16px; height:16px; margin:1px 0 0; flex:none}
.f .form-row.odz-chk label.checkbox > span{flex:1}
.chk a,.f .form-row.odz-chk a{text-decoration:underline; color:var(--ink)}
.chk.is-err,.f .form-row.odz-chk.woocommerce-invalid label{color:var(--ink)}
.f .form-row.odz-chk{margin-bottom:0}
.f .form-row.odz-chk abbr{display:none}
.opt{display:grid; grid-template-columns:16px 1fr auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line-2); cursor:pointer; text-transform:uppercase; font-size:16px; color:var(--ink); margin:0}
.opt input{accent-color:#000; margin:0; width:16px; height:16px}
.opt .d{color:var(--grey); font-size:14px; line-height:20px; display:block; text-transform:uppercase}
.opt .p{text-align:right; white-space:nowrap}
.opt .p img{display:none}
.sugg{opacity:0; transform:translateY(-4px); transition:opacity var(--t),transform var(--t) var(--ease); position:absolute; left:0; right:0; top:100%; background:var(--paper); border:1px solid var(--line); border-top:0; z-index:5; max-height:200px; overflow:auto}
.sugg button{display:block; width:100%; text-align:left; padding:8px 12px; text-transform:uppercase; font-size:14px}
.sugg.is-open{opacity:1; transform:none}
.sugg button{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.sugg button i{font-style:normal; color:var(--grey-2); font-size:12px}
.sugg button:hover,.sugg button:focus,.sugg button.is-on{background:#f4f4f4; outline:0}
@keyframes zip-in{from{background:#f1f1f1}}
.f input.is-auto{animation:zip-in 1200ms var(--ease)}
.code{display:flex; gap:8px; justify-content:center}
.code input{width:44px; height:48px; text-align:center; font-size:20px; border:1px solid var(--line); outline:0; padding:0}
.code input:focus{border-color:var(--ink)}

/* ---------- чекаут ---------- */
.co{display:grid; grid-template-columns:minmax(0,368px) 320px; justify-content:center; align-content:start; gap:32px 48px; padding:16px var(--pad) 64px; margin:0}
.co__form{grid-column:1; min-width:0}
.co__side{grid-column:2; min-width:0; position:sticky; top:calc(var(--nav-h) + 24px); align-self:start}
.co__side .row{grid-template-columns:56px 1fr auto; padding:8px 0}
.co__side .row img{width:56px; height:56px}
.co__side .row__t .n{font-size:14px}
@media (max-width:1080px){.co{grid-template-columns:1fr; width:min(560px,100%); margin:0 auto}.co__form,.co__side{grid-column:1; max-width:none}.co__side{position:static}}
.timer{font-size:14px; line-height:20px; color:var(--grey); text-align:center; margin-bottom:24px}
.timer b{font-weight:500; color:var(--ink)}
.timer.is-warn b{text-decoration:underline; text-underline-offset:4px}
.pay-go{position:fixed; inset:0; z-index:200; background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:24px; animation:fade-up 300ms var(--ease) both}
/* Кольцо: серая окружность неподвижна, по ней едет залитая точка.
   Волосяную дугу нельзя вращать спокойно — при масштабе экрана 125 % или зуме
   браузера линия в 1 px становится дробной и каждый кадр переползает по
   субпикселям: получается дрожь. Заливка растрируется чисто при любом масштабе.
   Оборот за --spin-t, linear. Имя своё: у WooCommerce есть свои @keyframes spin. */
.spin{display:block; width:44px; height:44px}
.spin .arc{transform-origin:50% 50%; animation:odz-spin var(--spin-t) linear infinite}
@keyframes odz-spin{to{transform:rotate(360deg)}}
.pay-go #payStep{transition:opacity var(--t) var(--ease)}
.pay-go #payHint{transition:opacity var(--t) var(--ease)}
.pay-go.is-turn #payStep,.pay-go.is-turn #payHint{opacity:0}
@media (prefers-reduced-motion:reduce){:root{--spin-t:12s}.pay-go #payStep,.pay-go #payHint{transition:none}}
.woocommerce-checkout-review-order .ship{margin-top:8px}
.woocommerce-shipping-methods{display:grid}
#payment .payment_methods{display:grid; margin-bottom:24px}
#payment .payment_box{font-size:12px; line-height:18px; color:var(--grey); padding:8px 0 8px 28px; text-transform:none}
.blockUI.blockOverlay{background:var(--paper)!important; opacity:.55!important}
.woocommerce-NoticeGroup,.woocommerce-notices-wrapper{display:block}
.odz-note{margin:0 0 16px; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:14px; line-height:20px; color:var(--grey); animation:fade-up 520ms var(--ease) both}
.odz-note--err{color:var(--err); border-bottom-color:var(--err)}
.odz-invalid > label,.odz-invalid label.checkbox{color:var(--err)!important}
.odz-invalid > label:not(.checkbox)::after,.odz-invalid label.checkbox > span::after{content:' *'; color:var(--err)}
.odz-invalid input,.odz-invalid select,.odz-invalid textarea{border-color:var(--err)}
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-notices-wrapper{outline:0}
/* Уведомления над страницей идут в той же колонке, что и её заголовок,
   а не прилипают к левому краю экрана. */
.woocommerce > .woocommerce-notices-wrapper:not(:empty){width:min(720px,100%); margin:0 auto; padding:16px var(--pad) 0}
.page--account .woocommerce > .woocommerce-notices-wrapper:not(:empty),
.page--login .woocommerce > .woocommerce-notices-wrapper:not(:empty){width:min(880px,100%); padding-top:32px}
.woocommerce > .woocommerce-notices-wrapper:not(:empty) + .list,
.woocommerce > .woocommerce-notices-wrapper:not(:empty) + .acc{padding-top:8px}
.odz-note a,.odz-note .button{text-decoration:underline; text-underline-offset:4px; color:var(--ink)}
.odz-note .button{display:inline; width:auto; height:auto; padding:0; margin:0 0 0 8px; border:0; background:none; font:inherit; letter-spacing:inherit}
ul.woocommerce-error,ul.woocommerce-message,ul.woocommerce-info,.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{list-style:none; margin:0 0 16px; padding:0; font-size:14px; line-height:20px; animation:fade-up 300ms var(--ease) both}
ul.woocommerce-error li,ul.woocommerce-message li,ul.woocommerce-info li,.woocommerce-message,.woocommerce-info,.woocommerce-notice{padding:8px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line-2)}
ul.woocommerce-error li{color:var(--ink)}
.woocommerce-message .button,.woocommerce-info .button{display:inline-flex; width:auto; height:auto; padding:0; border:0; background:none; color:var(--ink); text-decoration:underline; text-underline-offset:4px; margin-right:12px}

/* ---------- кабинет ---------- */
.acc{display:grid; grid-template-columns:200px minmax(0,1fr); align-content:start; gap:64px; width:min(880px,100%); margin:0 auto; padding:32px var(--pad) 96px}
.acc__nav{display:grid; gap:10px; align-content:start; position:sticky; top:calc(var(--nav-h) + 32px)}
.acc__nav a{display:block; padding:0; font-size:14px; line-height:20px; transition:opacity var(--t)}
.acc__nav a.is-off{opacity:.45}
.acc__nav a:hover{opacity:1}
.acc__me{margin-top:24px; font-size:12px; line-height:18px; color:var(--grey); text-transform:none}
.acc__body{min-width:0; max-width:600px}
.acc__h{font-size:16px; font-weight:500; margin-bottom:24px}
.acc__body .empty{text-align:left; padding:8px 0 32px} /* пустой раздел выравниваем по заголовку, а не по центру колонки */
.acc__sec{margin-bottom:48px}
.acc__sec:last-child{margin-bottom:0}
.acc__sec h3{font-weight:500; color:var(--ink); font-size:14px; line-height:20px; letter-spacing:.1em; margin:0 0 16px; border-top:1px solid var(--line-2); padding-top:16px}
.acc__form .acc__sec:first-child h3,.acc__body > .acc__sec:first-child h3{border-top:0; padding-top:0}
.acc__note{color:var(--grey); font-size:12px; line-height:18px; margin:-8px 0 16px; max-width:420px}
.acc__form,.acc__danger,.addr__f{max-width:420px}
.acc__sec > :last-child{margin-bottom:0}
.acc__form .opt{font-size:14px; padding:12px 0}
.acc__save{margin-top:8px; width:auto; padding:0 32px}
.acc__danger{margin-top:64px}
.acc__danger h3{color:var(--grey)}
@media (max-width:720px){.acc{grid-template-columns:1fr; gap:24px; padding-top:24px}.acc__nav{position:static; display:flex; flex-wrap:wrap; gap:4px 20px}.acc__me{margin:0; width:100%}.acc__sec{max-width:none}}
.addr{display:grid; gap:0; margin-bottom:24px}
.addr__i{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:16px 0; border-top:1px solid var(--line-2); flex-wrap:wrap}
.addr__i:last-child{border-bottom:1px solid var(--line-2)}
.addr__t b{font-weight:500; display:block}
.addr__t .grey{font-size:14px; line-height:20px}
.addr__a{display:flex; gap:16px; align-items:center; font-size:14px; flex-wrap:wrap}
.addr__a form{display:inline}
.addr__def{color:var(--grey); font-size:12px; letter-spacing:.08em}
.addr__add{width:auto; padding:0 24px; display:inline-flex}
.addr__f{margin-top:32px}
.addr__f-a{display:flex; align-items:center; gap:24px; margin-top:8px}
.addr__f-a .btn{width:auto; padding:0 32px}
.addr-pick{margin:0 0 20px}
.addr-pick .opt{font-size:14px; padding:12px 0}
.ord__pages{display:flex; justify-content:center; gap:24px; align-items:center; margin:24px 0 8px}
.ordv__h{display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; padding-bottom:16px}
.ordv__h b{font-weight:500}
.ordv__h .grey{margin-left:12px; font-size:14px}
.ordv__st{font-size:14px}
.ordv__pay{width:auto; padding:0 32px; display:inline-flex; margin-top:24px}
.ordv__s{margin-top:24px}
.ordv__i:last-child{border-bottom:0}
.ordv__s h3{font-weight:500; color:var(--ink); font-size:14px; line-height:20px; letter-spacing:.1em; margin:0 0 12px; border-top:1px solid var(--line-2); padding-top:16px}
.ordv__s p{margin:0 0 4px; font-size:14px; line-height:20px}
.ordv__cols{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.ordv__i{display:grid; grid-template-columns:72px 1fr auto; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-2)}
.ordv__i img{width:72px; height:72px; object-fit:contain}
.ordv__i-t{display:grid; gap:2px; min-width:0}
.ordv__i-t .n{font-size:14px; line-height:20px}
.ordv__i-t .m{color:var(--grey); font-size:12px; line-height:18px}
.ordv__sum{margin-top:16px; display:grid; gap:4px}
.ordv__sum .r{display:flex; justify-content:space-between; gap:16px; font-size:14px; line-height:20px}
.ordv__sum .r.total{margin-top:8px; padding-top:8px; border-top:1px solid var(--line-2); font-weight:500}
.ordv__d{margin-top:16px; border-top:1px solid var(--line-2); padding:16px 0; border-bottom:1px solid var(--line-2)}
.ordv__d + .ordv__d{border-top:0; margin-top:0}
.ordv__d summary{cursor:pointer; font-size:14px; list-style:none; text-decoration:underline; text-underline-offset:4px}
.ordv__d summary::-webkit-details-marker{display:none}
.ordv__d[open] summary{margin-bottom:16px}
.ordv .ord__a{margin-top:32px}
@media (max-width:720px){.ordv__cols{grid-template-columns:1fr; gap:0}}
.ord{border-bottom:1px solid var(--line-2); padding:16px 0; animation:fade-up 620ms var(--ease) both}
.ord__h{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.ord__h .grey{font-size:14px}
.ord__list{margin:12px 0 4px}
.ord__list li{display:grid; grid-template-columns:48px minmax(0,1fr) auto auto; gap:16px; align-items:center; padding:6px 0}
.ord__im{width:48px; height:48px; display:block}
.ord__im img{width:48px; height:48px; object-fit:contain}
.ord__n{display:grid; gap:2px; min-width:0; font-size:14px; line-height:20px}
.ord__n .grey{font-size:12px; line-height:18px}
.ord__steps{display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:12px}
.ord__steps span{font-size:10px; line-height:15px; color:var(--grey); border-top:1px solid var(--line-2); padding-top:4px; transition:color var(--t),border-color var(--t)}
.ord__steps span.is-on{color:var(--ink); border-top-color:var(--ink)}
.ord__a{display:flex; gap:20px; margin-top:12px; font-size:14px; flex-wrap:wrap}
.woocommerce-address-fields .button{margin-top:8px; height:40px; font-size:14px}
.woocommerce-ResetPassword,.woocommerce-lost-password .woocommerce-form{max-width:368px; margin:0 auto; padding:64px var(--pad)}
.woocommerce-ResetPassword p{margin-bottom:16px; font-size:14px; color:var(--grey)}
.woocommerce-ResetPassword .form-row{margin-bottom:16px}
.woocommerce-ResetPassword label{display:block; color:var(--grey); font-size:14px; margin-bottom:6px}
.woocommerce-ResetPassword .input-text{width:100%; height:40px; border:1px solid var(--line); padding:0 12px; outline:0}
.woocommerce-ResetPassword .button{margin-top:8px}
.shop_table{width:100%; border-collapse:collapse; font-size:14px; line-height:20px; margin-bottom:24px}
.shop_table th,.shop_table td{padding:8px 0; border-bottom:1px solid var(--line-2); text-align:left; font-weight:400; vertical-align:top}
.shop_table th{color:var(--grey)}
.shop_table td:last-child,.shop_table th:last-child{text-align:right}
.woocommerce-order-pay .center,.order-pay{width:min(560px,100%); margin:0 auto; padding:16px var(--pad) 64px}
#order_review .shop_table{margin-bottom:0}

/* ---------- документы ---------- */
.ok-note,.err-note{font-size:14px; line-height:20px; padding:12px 0; border-bottom:1px solid var(--line-2); margin-bottom:16px}
.err-note{color:var(--err)}
.odz-contact{max-width:420px}
@media (max-width:560px){.odz-contact{max-width:none}}
.doc{width:min(640px,100%); margin:0 auto; padding:16px var(--pad) 64px; font-weight:400}
.doc h1{font-weight:500; font-size:16px; margin-bottom:24px}
.doc h2{font-weight:500; font-size:16px; margin:32px 0 8px}
.doc p{margin-bottom:12px}
.doc table{width:100%; border-collapse:collapse; font-size:14px; line-height:20px; margin:8px 0 16px}
.doc th,.doc td{padding:6px 8px; border-bottom:1px solid var(--line-2); text-align:left; font-weight:400}
.doc th:first-child,.doc td:first-child,.pv__meas th:first-child,.pv__meas td:first-child{padding-left:0}
.doc th:last-child,.doc td:last-child,.pv__meas th:last-child,.pv__meas td:last-child{padding-right:0}
@media (max-width:560px){.doc table{font-size:12px; line-height:16px}.doc th,.doc td{padding:6px 4px}}
.doc th{color:var(--grey)}
.doc td.num,.doc th.num{text-align:right; font-variant-numeric:tabular-nums}
.doc ul{padding-left:0; margin-bottom:12px}
.doc li{padding-left:20px; position:relative; margin-bottom:6px}
.doc li::before{content:'—'; position:absolute; left:0; color:var(--grey)}
.doc a{text-decoration:underline; text-underline-offset:4px}
.doc .grey{color:var(--grey)}

/* ---------- подвал ---------- */
.foot{padding:48px var(--pad) 32px; text-align:center; font-size:14px; line-height:20px}
.foot__links{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 0}
.foot__links a{color:var(--grey); padding:0 12px; transition:color var(--t)}
.foot__links a:hover{color:var(--ink)}
.foot__help{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 0; margin-top:8px}
.foot__help a{color:var(--grey); padding:0 12px; font-size:12px; line-height:18px; transition:color var(--t)}
.foot__help a:hover{color:var(--ink)}
.foot__req{margin-top:24px; color:var(--grey); font-size:11px; line-height:16px; text-transform:none}
.foot__req a{text-decoration:underline}

/* ---------- диалоги ---------- */
.nl{position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:min(488px,calc(100% - 32px)); z-index:70; background:var(--paper); box-shadow:0 0 0 1px var(--line-2); padding:16px 20px 24px; text-align:left; transition:transform var(--t-slow) var(--ease),opacity var(--t)}
.nl.is-hid{transform:translate(-50%,120%); opacity:0; pointer-events:none}
.nl h2{font-weight:400; font-size:16px; margin-bottom:12px}
.nl__x{position:absolute; top:8px; right:4px; width:40px; height:40px; display:flex; align-items:center; justify-content:center}
@media (max-width:560px){.nl__x{right:0}}
.nl input{width:100%; height:40px; border:1px solid var(--line); padding:0 12px; outline:0; border-radius:0; transition:border-color var(--t)}
.nl input:focus{border-color:var(--ink)}
.nl input::placeholder{color:var(--grey-2); text-transform:uppercase; font-size:14px}
.nl .chk{margin:8px 0 12px}
.cm{position:fixed; left:16px; bottom:16px; width:min(384px,calc(100% - 32px)); z-index:75; background:var(--paper); padding:20px; box-shadow:0 0 0 1px var(--line-2); font-size:13px; line-height:18px; transition:transform var(--t-slow) var(--ease),opacity var(--t)}
.cm.is-hid{transform:translateY(120%); opacity:0; pointer-events:none}
.cm h3{font-weight:500; font-size:14px; margin-bottom:10px}
.cm p{color:var(--grey); margin-bottom:14px}
.cm .btn{height:42px; font-size:13px; font-weight:500; margin-bottom:6px}
.cm__f{display:flex; justify-content:space-between; margin-top:12px; font-size:10px; color:var(--grey)}
.cm__f a{text-decoration:underline}
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,16px); z-index:120; background:var(--ink); color:var(--paper); padding:12px 20px; font-size:14px; line-height:20px; opacity:0; pointer-events:none; transition:opacity var(--t),transform var(--t) var(--ease); text-align:center; display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap; max-width:calc(100% - 32px)}
.toast.is-on{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.toast a{text-decoration:underline; text-underline-offset:4px}

/* ---------- центрированные страницы ---------- */
.center{width:min(368px,100%); margin:0 auto; padding:64px var(--pad) 32px; text-align:center}
.center h1{font-weight:500; font-size:16px; margin-bottom:24px}
.center .f{text-align:left}
.center p.grey{font-size:14px; line-height:20px; margin-bottom:24px}
.ok-mark{width:48px; height:48px; margin:0 auto 24px}
.ok-mark.pop path{stroke-dasharray:30; stroke-dashoffset:30; animation:draw 720ms var(--ease) 220ms forwards}
.receipt{border:1px solid var(--line); padding:16px; text-align:left; font-size:12px; line-height:18px; margin:24px 0; text-transform:none}
.receipt .r{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:baseline}
.receipt .r > span:last-child{white-space:nowrap; text-align:right}
.receipt .r.t{font-weight:500; border-top:1px solid var(--line-2); margin-top:8px; padding-top:8px}
.receipt .h{font-weight:500; margin-bottom:8px; text-transform:uppercase}
.receipt__f{margin-top:10px; padding-top:8px; border-top:1px solid var(--line-2); color:var(--grey); display:grid; gap:2px}
.tech{font-size:10px; line-height:15px; color:var(--grey); text-align:left; text-transform:none; margin-top:24px}
.tech b{font-weight:500; color:var(--ink)}

/* ---------- движение, часть вторая ---------- */
/* Логотип прорисовывается один раз за сессию. */
.is-first .nav__logo .logo path{stroke-dasharray:90; stroke-dashoffset:90; animation:draw 1050ms var(--ease) forwards}
.is-first .nav__logo .logo path:nth-child(2){animation-delay:80ms} .is-first .nav__logo .logo path:nth-child(3){animation-delay:160ms}
.is-first .nav__logo .logo path:nth-child(4){animation-delay:240ms} .is-first .nav__logo .logo path:nth-child(5){animation-delay:320ms}
/* Сцена карточки входит мягко, если не идёт морф из плитки. */
html:not(.vt) #img{animation:stage-in 820ms var(--ease) both}
@keyframes stage-in{from{opacity:0; transform:scale(.975)}}
/* Размеры разлетаются из «+» по очереди. */
.pv__size{opacity:0}
.pv.is-sizing .pv__size{opacity:1}
.pv.is-sizing .pv__size:nth-child(1),.pv.is-sizing .pv__size:nth-child(6){transition-delay:0ms}
.pv.is-sizing .pv__size:nth-child(2),.pv.is-sizing .pv__size:nth-child(5){transition-delay:40ms}
.pv.is-sizing .pv__size:nth-child(3),.pv.is-sizing .pv__size:nth-child(4){transition-delay:80ms}
/* Полёт товара в корзину. */
.fly{position:fixed; z-index:400; pointer-events:none; object-fit:contain; will-change:transform,opacity}
/* Выбранная опция доставки/оплаты. */
.opt{opacity:.72; transition:opacity var(--t),padding-left var(--t) var(--ease)}
.opt:hover,.opt:has(input:checked){opacity:1}
.opt:has(input:checked){padding-left:4px}
/* Ожидание при пересчёте и оплате — бегущая линия, а не пустой экран. */
/* Свой лоадер WooCommerce (loader.svg, оборот за 1 с с ускорением) заменён
   на то же кольцо, что на экране оплаты. !important — стили плагина грузятся позже. */
.blockUI.blockOverlay::before,.woocommerce .loader::before{width:32px!important; height:32px!important; margin:-16px 0 0 -16px!important; background:radial-gradient(circle 2.5px at 50% 2.5px, var(--ink) 99%, rgba(0,0,0,0) 100%)!important; border:0!important; border-radius:50%!important; animation:odz-spin var(--spin-t) linear infinite!important}
/* Разделы текстовых страниц появляются по очереди. */
.doc > *{animation:fade-up 560ms var(--ease) both}
.doc > :nth-child(2){animation-delay:40ms} .doc > :nth-child(3){animation-delay:80ms} .doc > :nth-child(4){animation-delay:120ms}
.doc > :nth-child(5){animation-delay:160ms} .doc > :nth-child(6){animation-delay:200ms} .doc > :nth-child(n+7){animation-delay:240ms}
/* Кнопки: короткое нажатие. */
.btn:active,.tile__fav:active,.pv__size:active{transform:scale(.97)}
/* Подчёркивание ссылок «выезжает». */
.lnk{text-decoration:none; background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px; transition:background-size var(--t) var(--ease),opacity var(--t)}
.lnk:hover{background-size:0 1px; opacity:1}

/* ---------- быстрый просмотр ---------- */
.qv{position:fixed; inset:var(--nav-h) 0 0 0; z-index:60; background:var(--paper); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.qv .pv{padding-top:8px}
html.qv-open{overflow:hidden}
html.qv-open .nav__zoom,html.qv-open #back{display:none}
html.qv-open .nav .nav__back--qv{display:inline-flex}
html.qv-open .nl{display:none}
::view-transition-group(*){animation-duration:500ms; animation-timing-function:cubic-bezier(.32,.72,0,1)}

/* ---------- лоск ---------- */
/* Видимый фокус — одинаковый на всём сайте. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--ink); outline-offset:3px; border-radius:1px}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:0}

/* Вход и другие короткие страницы стоят по центру экрана, а не липнут к шапке. */
.page--login .center{min-height:calc(100vh - var(--nav-h) - 280px); display:flex; flex-direction:column; align-items:center; justify-content:center}
.page--404 .center{padding:88px var(--pad) 40px}
.lgn-need{min-height:calc(100vh - var(--nav-h) - 220px); display:flex; flex-direction:column; align-items:center; justify-content:center}
.lgn-need .btn{margin-bottom:24px}
.lgn-alt{width:100%; text-align:left}
.lgn-alt summary{list-style:none; cursor:pointer; text-align:center; font-size:14px; color:var(--grey); text-decoration:underline; text-underline-offset:4px; transition:color var(--t)}
.lgn-alt summary::-webkit-details-marker{display:none}
.lgn-alt summary:hover,.lgn-alt[open] summary{color:var(--ink)}
.lgn-alt[open] summary{margin-bottom:24px}
.lgn-alt .f{animation:fade-up 560ms var(--ease) both} /* под формой ещё блок «популярное» — вертикально центрировать нечего */
.page--login [role=tabpanel],.page--login .f,.page--login .tabs,.page--login h1,.page--login p{width:min(320px,100%); margin-left:auto; margin-right:auto}
.page--login h1{margin-bottom:24px; letter-spacing:.1em}
.tabs{display:flex; justify-content:center; gap:24px; margin-bottom:24px}
.tab{padding-bottom:4px; border-bottom:1px solid var(--ink); transition:opacity var(--t),border-color var(--t)}
.tab.is-off{opacity:.45; border-bottom-color:transparent}
.tab:hover{opacity:1}

/* Заголовки страниц и разделов — общий ритм. */
.list__h h1,.acc__h,.doc h1,.center h1{letter-spacing:.1em}
.empty{padding:96px 16px; letter-spacing:.04em}
.empty b{margin-bottom:12px; letter-spacing:.08em}

/* Кнопки: одна высота, ровные буквы, мягкое нажатие. */
.btn,.button,#place_order{letter-spacing:.12em}
.btn--sm{height:40px; letter-spacing:.1em}

/* Подвал дышит. */
.foot{padding:64px var(--pad) 40px}
.foot__links{gap:8px 0; margin-top:4px}
.foot__help{margin-top:12px}
.foot__req{margin-top:32px}

/* Окно «что не так с заказом»: по центру, на телефоне — снизу. */
.dlg{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(6px); opacity:0; transition:opacity 320ms var(--ease)}
.dlg.is-on{opacity:1}
.dlg__w{background:var(--paper); border:1px solid var(--ink); padding:40px 32px 32px; width:min(420px,100%); text-align:center;
  transform:translateY(14px) scale(.985); transition:transform 460ms var(--ease)}
.dlg.is-on .dlg__w{transform:none}
.dlg h2{font-size:16px; font-weight:500; margin-bottom:24px; letter-spacing:.1em}
.dlg__l{list-style:none; display:grid; margin:0 0 28px; font-size:14px; line-height:20px; color:var(--err); text-align:left}
.dlg__l li{padding:10px 0; border-top:1px solid var(--line-2)}
.dlg__l li:last-child{border-bottom:1px solid var(--line-2)}
.dlg .btn{width:100%}
html.dlg-open{overflow:hidden}
@media (max-width:560px){
  .dlg{align-items:flex-end; padding:0}
  .dlg__w{width:100%; border:0; border-top:1px solid var(--ink); padding:24px 16px calc(24px + env(safe-area-inset-bottom)); transform:translateY(100%)}
}
/* Без JS сообщение остаётся в потоке — и должно занимать всю ширину, а не колонку сетки. */
.woocommerce-NoticeGroup,.co > .woocommerce-NoticeGroup-checkout{grid-column:1 / -1}

/* ---------- движение, часть третья: мелочи, которые делают сайт живым ---------- */
/* Свои галочки и радио: птичка рисуется, точка вырастает. Родные квадраты
   системой не анимируются, поэтому рисуем их сами. */
.opt input[type=checkbox],.chk input[type=checkbox],.f .form-row.odz-chk input[type=checkbox],
.woocommerce-shipping-methods input[type=radio],#payment input[type=radio]{
  appearance:none; -webkit-appearance:none; width:16px; height:16px; flex:none; margin:0; position:relative; cursor:pointer;
  border:1px solid var(--line); background:var(--paper); border-radius:0;
  transition:border-color var(--t),background-color var(--t)}
.woocommerce-shipping-methods input[type=radio],#payment input[type=radio]{border-radius:50%}
.opt input[type=checkbox]:hover,.chk input[type=checkbox]:hover,.f .form-row.odz-chk input[type=checkbox]:hover,
.woocommerce-shipping-methods input[type=radio]:hover,#payment input[type=radio]:hover{border-color:var(--ink)}
.opt input[type=checkbox]:checked,.chk input[type=checkbox]:checked,.f .form-row.odz-chk input[type=checkbox]:checked{background:var(--ink); border-color:var(--ink)}
.opt input[type=checkbox]::after,.chk input[type=checkbox]::after,.f .form-row.odz-chk input[type=checkbox]::after{
  content:''; position:absolute; left:5px; top:1.5px; width:4px; height:8px; border:solid var(--paper); border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) scale(.3); opacity:0; transition:transform 380ms var(--ease),opacity 200ms}
.opt input[type=checkbox]:checked::after,.chk input[type=checkbox]:checked::after,.f .form-row.odz-chk input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1); opacity:1}
.woocommerce-shipping-methods input[type=radio]:checked,#payment input[type=radio]:checked{border-color:var(--ink)}
.woocommerce-shipping-methods input[type=radio]::after,#payment input[type=radio]::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--ink); transform:scale(0); transition:transform 380ms var(--ease)}
.woocommerce-shipping-methods input[type=radio]:checked::after,#payment input[type=radio]:checked::after{transform:scale(1)}
.opt input:focus-visible,.chk input:focus-visible,#payment input:focus-visible,.woocommerce-shipping-methods input:focus-visible{outline:1px solid var(--ink); outline-offset:2px}
.odz-invalid input[type=checkbox]{border-color:var(--err)}

/* Списки въезжают по очереди: заказы, позиции заказа, адреса, избранное. */
.ordv__i,.addr__i,.list .row,.acc__sec,.ord{animation:fade-up 540ms var(--ease) both}
.ordv__i:nth-child(2),.addr__i:nth-child(2),.list .row:nth-child(2),.acc__sec:nth-child(2),.ord:nth-child(2){animation-delay:50ms}
.ordv__i:nth-child(3),.addr__i:nth-child(3),.list .row:nth-child(3),.acc__sec:nth-child(3),.ord:nth-child(3){animation-delay:100ms}
.ordv__i:nth-child(4),.addr__i:nth-child(4),.list .row:nth-child(4),.acc__sec:nth-child(4),.ord:nth-child(4){animation-delay:150ms}
.ordv__i:nth-child(n+5),.addr__i:nth-child(n+5),.list .row:nth-child(n+5),.acc__sec:nth-child(n+5),.ord:nth-child(n+5){animation-delay:200ms}

/* Полоса этапов заказа заполняется слева направо. */
.ord__steps span.is-on{animation:step-in 620ms var(--ease) both}
.ord__steps span:nth-child(2).is-on{animation-delay:90ms} .ord__steps span:nth-child(3).is-on{animation-delay:180ms}
.ord__steps span:nth-child(4).is-on{animation-delay:270ms} .ord__steps span:nth-child(5).is-on{animation-delay:360ms}
@keyframes step-in{from{color:var(--grey-2); border-top-color:var(--line-2)}}

/* Раскрывающиеся блоки (чек, форма возврата) появляются мягко. */
.ordv__d[open] > *:not(summary){animation:fade-up 520ms var(--ease) both}
.ordv__d summary{transition:opacity var(--t)}
.ordv__d summary:hover{opacity:.6}

/* Плитки проявляются по мере прокрутки — там, где браузер это умеет. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:769px){
    .grid .tile{animation:tile-in 680ms var(--ease) both; animation-timeline:view(); animation-range:entry 0% entry 34%; animation-delay:0s!important}
  }
}

/* Ожидание сетки: лёгкое дыхание вместо мёртвой полупрозрачности. */
.grid.is-loading{animation:breathe 1.5s var(--ease-io) infinite alternate}
@keyframes breathe{to{opacity:.2}}

/* Ghost-кнопка заливается чернилами, иконки шапки чуть подаются вперёд. */
.btn--ghost{transition:background var(--t),color var(--t),opacity var(--t),transform var(--t) var(--ease)}
.btn--ghost:hover{background:var(--ink); color:var(--paper); opacity:1}
.nav__icon .ico,.nav__zoom .ico,.nav__back .ico{transition:transform var(--t) var(--ease),opacity var(--t)}
.nav__icon:hover .ico{transform:translateY(-1px)}
.nav__back:hover .ico{transform:translateX(-2px)}
.foot__logo .logo{transition:opacity var(--t)}
.foot__logo:hover .logo{opacity:.6}

/* Поля отзываются на фокус: подпись приподнимается, рамка темнеет плавно. */
.f .fld,.f .form-row{transition:transform var(--t) var(--ease)}
.f label{transition:color var(--t)}
.f .fld:focus-within > label,.f .form-row:focus-within > label{color:var(--ink)}
.f input,.f select,.f textarea{transition:border-color var(--t),background var(--t)}

/* Карточка товара: фото чуть «дышит» при наведении на сцену. */
.pv__stage img{transition:transform 1000ms var(--ease)}
@media (hover:hover){.pv__stage:hover #img{transform:scale(1.015)}}

/* Строка избранного и заказа уходит плавно при удалении. */
.row.is-out,.ordv__i.is-out{opacity:0; transform:translateX(12px)}

/* Общий выключатель движения — последним, чтобы перекрывал всё выше. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important; animation-delay:0s!important; scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  ::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  @view-transition{navigation:none}
}
@media (max-width:480px){.pv__size{width:52px}}
.doc--lc p,.doc--lc li,.doc--lc td,.doc--lc th{text-transform:none}
.f .two--coupon{grid-template-columns:1fr auto}
.f .two--coupon .btn{width:auto; padding:0 24px}
.ord__list li > .num:last-child{font-size:14px; line-height:20px}
.ord__h .grey .num{color:var(--ink); font-weight:500}
.co__side .opt{font-size:14px}
#payment .place-order{margin-top:16px}
.co__side > .lnk{display:inline-block; margin-top:8px}
.grid__empty-f{width:min(368px,100%); margin:24px auto 0; text-align:left}
.pv__plus .small{text-decoration:underline; text-underline-offset:4px}
#nameL{font-weight:400}
.f input[type=email]::placeholder,.nl input::placeholder{text-transform:none}
@media (max-width:520px){.qty button:first-child{width:30px; justify-content:flex-start}}
.acc__verify{margin:-8px 0 24px}
.acc__verify .btn{width:auto; padding:0 24px; display:inline-flex; margin-bottom:12px}
.acc__verify .code{justify-content:flex-start}