/* ============================================================
   TOYOMI · КАТАЛОГ
   Свои элементы управления вместо системных: чекбоксы, выпадающий
   список, чипсы. Системные ломают типографику и сразу выдают шаблон.
============================================================ */

/* шапка sticky и уже в потоке — запас под неё не нужен, это была пустота в 104px */
body.dark .page-top{padding:clamp(26px,3vw,42px) 0 clamp(24px,2.8vw,34px)}
body.dark .page-top h1{font-size:clamp(30px,4.2vw,62px);line-height:.96;letter-spacing:-.045em;
  max-width:none;margin:0}
.page-top .crumbs{margin-bottom:14px}
.page-top .pt-row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.page-top .cnt b{color:var(--ink);font-family:var(--display);font-weight:700;
  font-variant-numeric:tabular-nums}

.cat-search{display:inline-flex;align-items:center;gap:10px;background:var(--surface);
  border:1.5px solid var(--hairline);border-radius:99px;padding:0 20px;height:50px;
  min-width:min(320px,100%);color:var(--ink-muted);
  transition:border-color .22s var(--e-quart),box-shadow .22s var(--e-quart)}
.cat-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(107,63,228,.13)}
.cat-search input{border:0;background:none;outline:none;font:500 15.5px/1 var(--text);
  color:var(--ink);width:100%;padding:0}
.cat-search input::placeholder{color:var(--ink-muted)}
.cat-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ---------- раскладка ---------- */
.cat-layout{display:grid;grid-template-columns:264px minmax(0,1fr);
  gap:clamp(22px,2.6vw,44px);align-items:start;
  padding-top:clamp(24px,3vw,44px);padding-bottom:clamp(40px,5vw,80px)}
.cat-main{min-width:0}

/* ---------- панель фильтров ---------- */
.filters{position:sticky;top:88px;max-height:calc(100vh - 108px);overflow:auto;
  padding-right:6px;scrollbar-width:thin}
.filters::-webkit-scrollbar{width:6px}
.filters::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:99px}
.filters-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--hairline)}
.filters-head > span{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
.f-reset{background:none;border:0;padding:0;cursor:pointer;font:600 13.5px/1 var(--text);
  color:var(--ink-muted);opacity:0;pointer-events:none;transition:opacity .22s,color .2s}
.cat.has-filters .f-reset{opacity:1;pointer-events:auto}
.f-reset:hover{color:var(--brand)}
.f-reset:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.sheet-close{display:none}

.fgroup{padding:16px 0;border-bottom:1px solid var(--hairline)}
.fgroup:last-child{border-bottom:0}
.fgroup h3{font:600 12.5px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);margin:0 0 12px}

/* чипсы */
.fchips{display:flex;flex-wrap:wrap;gap:7px}
.fchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface);
  border:1.5px solid var(--hairline);border-radius:99px;padding:8px 14px;cursor:pointer;
  font:600 13.5px/1 var(--text);color:var(--ink);
  transition:transform .18s var(--e-quart),background-color .22s,border-color .22s,color .22s,opacity .22s}
.fchip .fc-n{font-weight:500;font-size:11.5px;color:var(--ink-muted);
  font-variant-numeric:tabular-nums;transition:color .22s}
.fchip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.fchip[aria-pressed="true"] .fc-n{color:rgba(255,255,255,.72)}
.fchip.is-empty{opacity:.42}
.fchip:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media (hover:hover){.fchip:hover{border-color:var(--brand);transform:translateY(-1px)}}

/* свои чекбоксы */
.fopt{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;
  font:500 14.5px/1.3 var(--text);color:var(--ink);transition:opacity .22s}
.fopt input{position:absolute;opacity:0;width:0;height:0}
.fbox{flex:none;width:20px;height:20px;border-radius:7px;background:var(--surface);
  border:1.8px solid var(--hairline);position:relative;
  transition:background-color .2s var(--e-quart),border-color .2s,transform .22s var(--ease-pop)}
.fbox::after{content:'';position:absolute;left:6px;top:2.5px;width:5px;height:10px;
  border:2.4px solid #fff;border-top:0;border-left:0;border-radius:1px;
  transform:rotate(42deg) scale(0);transform-origin:center;
  transition:transform .24s var(--ease-snap-click)}
.fopt input:checked + .fbox{background:var(--brand);border-color:var(--brand)}
.fopt input:checked + .fbox::after{transform:rotate(42deg) scale(1)}
.fopt input:focus-visible + .fbox{outline:3px solid var(--brand);outline-offset:3px}
.ftx{flex:1;min-width:0}
.fopt .n{font-size:12px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.fopt.is-empty{opacity:.42}
@media (hover:hover){.fopt:hover .fbox{border-color:var(--brand)}}

.filters-foot{display:none}

/* ---------- строка над сеткой ---------- */
.cat-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:clamp(14px,1.8vw,22px);min-height:44px}
.applied{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--t-lav);
  color:var(--ink);border-radius:99px;padding:7px 8px 7px 14px;font:600 13px/1 var(--text);
  animation:pillIn .32s var(--ease-pop) both}
@keyframes pillIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.pill button{width:20px;height:20px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(43,26,74,.1);color:var(--ink);font-size:14px;line-height:1;
  display:grid;place-items:center;transition:background-color .2s,transform .2s}
.pill button:hover{background:var(--brand);color:#fff;transform:rotate(90deg)}
.pill button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pill-clear{background:none;border:0;cursor:pointer;font:600 13px/1 var(--text);
  color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px;padding:7px 4px}
.pill-clear:hover{color:var(--brand)}
.pill-clear:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* свой выпадающий список */
.sel{position:relative;flex:none}
.sel-btn{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;
  background:var(--surface);border:1.5px solid var(--hairline);border-radius:99px;
  font:600 14px/1 var(--text);color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:border-color .22s,background-color .22s}
.sel-btn svg{transition:transform .28s var(--e-quart)}
.sel.open .sel-btn{border-color:var(--brand)}
.sel.open .sel-btn svg{transform:rotate(180deg)}
.sel-btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media (hover:hover){.sel-btn:hover{border-color:var(--brand)}}
.sel-list{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:230px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:18px;
  padding:6px;margin:0;list-style:none;box-shadow:0 18px 46px rgba(43,26,74,.14);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:opacity .22s var(--e-quart),transform .28s var(--ease-pop)}
.sel.open .sel-list{opacity:1;transform:none;pointer-events:auto}
.sel-list li{padding:10px 14px;border-radius:12px;cursor:pointer;
  font:500 14px/1.2 var(--text);color:var(--ink);transition:background-color .16s}
.sel-list li[aria-selected="true"]{background:var(--t-lav);font-weight:600}
.sel-list li:hover{background:var(--t-lav)}
.sel-list li:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* ---------- сетка ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:clamp(12px,1.4vw,22px)}
.cat-grid.fresh > .card{animation:cardIn .5s var(--e-expo) both;animation-delay:var(--d,0ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.card.is-out{opacity:.62}
.card.is-out .ph img{filter:grayscale(.55)}
.tag.out{background:var(--ink);color:#fff}
.add.is-off{background:var(--hairline);color:var(--ink-muted);cursor:not-allowed}

/* скелетон загрузки: собран из классов карточки, поэтому высота совпадает
   и сетка не прыгает при подмене (было CLS 0,42) */
.card.skel{pointer-events:none;animation:skelIn .35s var(--e-expo) both;animation-delay:var(--d,0ms)}
@keyframes skelIn{from{opacity:0}to{opacity:1}}
.card.skel .ph{padding:0}
.card.skel .card-b > *{min-height:1em}
.sk{display:block;width:100%;height:1em;border-radius:6px;
  background:linear-gradient(100deg,var(--hairline) 30%,#F4F0FB 48%,var(--hairline) 66%);
  background-size:280% 100%;animation:skelShine 1.4s linear infinite}
.card.skel .ph .sk{height:100%;border-radius:0}
.card.skel .add{background:none;border:0}
.card.skel .add .sk{border-radius:50%;height:100%}
.sk.w95{width:95%}.sk.w60{width:60%}.sk.w45{width:45%}.sk.w40{width:40%}.sk.w30{width:30%}
.card.skel h3 .sk{margin-bottom:5px}
@keyframes skelShine{from{background-position:180% 0}to{background-position:-80% 0}}

/* пустое состояние */
.cat-empty{text-align:center;padding:clamp(40px,7vw,90px) 20px;
  display:flex;flex-direction:column;align-items:center;gap:12px}
.cat-empty svg{animation:emptyFloat 3.4s var(--e-quart) infinite}
@keyframes emptyFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.cat-empty h2{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,28px);
  letter-spacing:-.02em;color:var(--ink);margin:6px 0 0}
.cat-empty p{color:var(--ink-muted);margin:0 0 10px;max-width:42ch}

.more-wrap{display:flex;justify-content:center;margin-top:clamp(24px,3vw,44px)}
.more-btn[hidden]{display:none}

/* ---------- телефон: шторка ---------- */
.cat-fab{display:none}
.cat-scrim{position:fixed;inset:0;z-index:98;background:rgba(43,26,74,.42);
  opacity:0;pointer-events:none;transition:opacity .3s var(--e-quart);
  backdrop-filter:blur(2px)}
.cat.sheet-open .cat-scrim{opacity:1;pointer-events:auto}

@media (max-width:900px){
  .cat-layout{grid-template-columns:1fr}
  .filters{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:99;
    max-height:88svh;background:var(--surface);border-radius:26px 26px 0 0;
    padding:0 18px calc(env(safe-area-inset-bottom,0px) + 92px);
    transform:translateY(101%);transition:transform .42s var(--e-expo);
    box-shadow:0 -20px 60px rgba(43,26,74,.2);overscroll-behavior:contain}
  .cat.sheet-open .filters{transform:none}
  .filters-head{position:sticky;top:0;background:var(--surface);z-index:2;
    padding:18px 0 12px;margin:0}
  .filters-head::before{content:'';position:absolute;left:50%;top:7px;width:40px;height:4px;
    border-radius:99px;background:var(--hairline);transform:translateX(-50%)}
  .sheet-close{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
    background:var(--t-lav);border:0;color:var(--ink);cursor:pointer}
  .sheet-close:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
  .filters-foot{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;
    padding:12px 18px calc(env(safe-area-inset-bottom,0px) + 14px);
    background:var(--surface);border-top:1px solid var(--hairline);
    transform:translateY(101%);transition:transform .42s var(--e-expo);z-index:100}
  .cat.sheet-open .filters-foot{transform:none}
  .filters-foot .btn{flex:1;height:50px}
  .filters-foot .btn-ghost{flex:0 0 38%}

  .cat-fab{display:inline-flex;align-items:center;gap:8px;position:fixed;
    left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%);
    z-index:96;height:50px;padding:0 22px;border:0;border-radius:99px;
    background:var(--ink);color:#fff;font:600 15px/1 var(--text);cursor:pointer;
    box-shadow:0 12px 30px rgba(43,26,74,.3)}
  .cat-fab b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
    border-radius:99px;background:var(--brand);font-size:12px;font-weight:700}
  .cat-fab b:empty{display:none}
  .cat.sheet-open .cat-fab{opacity:0;pointer-events:none}
  .cat-bar{position:sticky;top:64px;z-index:20;background:var(--canvas);
    padding:10px 0;margin-bottom:8px}
}
@media (max-width:560px){
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .page-top .pt-row{gap:14px}
  .cat-search{width:100%;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .cat-grid.fresh > .card,.pill,.skel,.cat-empty svg{animation:none}
  .sk-ph,.sk-l{animation:none}
}

/* ============================================================
   КАРТКА ТОВАРУ
============================================================ */
.pd-top{padding:clamp(18px,2.4vw,30px) 0 0}
.pd-page .crumbs{font-size:13.5px;color:var(--ink-muted);margin:0}
.pd-page .crumbs a{color:var(--ink-muted)}
.pd-page .crumbs a:hover{color:var(--brand)}

/* 🔴 В stage.css у .pd стоит СОКРАЩЁННЫЙ padding с нулями по бокам —
   он затирал отступы .wrap, и галерея уезжала в самый край экрана. */
.pd{padding:clamp(16px,2vw,26px) var(--gutter) clamp(40px,5vw,70px)}
.pd-cat{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);margin-bottom:12px}
body.dark .pd-info h1{font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:clamp(25px,3vw,44px);line-height:1.04;letter-spacing:-.035em;
  margin:0 0 16px;text-wrap:balance}

/* цена крупнее заголовка — она главный ответ на странице товара */
body.dark .pd-price{align-items:baseline;gap:14px;margin:20px 0 6px;flex-wrap:wrap}
body.dark .pd-price .now{font-family:var(--display);font-weight:800;
  font-size:clamp(34px,4.2vw,54px);letter-spacing:-.04em;line-height:1;color:var(--ink)}
body.dark .pd-price s{font-size:clamp(16px,1.5vw,20px);color:var(--ink-muted)}
body.dark .pd-price .save{background:var(--bubble);color:var(--ink);font-size:13.5px;font-weight:700;
  border-radius:99px;padding:6px 12px;letter-spacing:0}
.pd-price s[hidden],.pd-price .save[hidden]{display:none}

.pd-meta b.ok{color:#0B7F78}
.pd-meta b.no{color:#C22B55}

/* галерея отделена от фона тинтом, а не висит на кремовом */
body.dark .gal-main{background:var(--t-lav);border:0;border-radius:clamp(20px,2.4vw,32px);
  padding:clamp(18px,3vw,44px);transition:background-color .42s var(--e-quart)}
body.dark .gal-main img{transition:transform .5s var(--e-expo)}
body.dark .gal-main img.swapped{animation:pdSwap .5s var(--e-expo)}
@keyframes pdSwap{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
body.dark .thumb{border:1.5px solid var(--hairline);border-radius:16px;padding:8px;
  transition:border-color .22s,transform .22s var(--e-quart)}
body.dark .thumb[aria-pressed="true"]{border-color:var(--brand);border-width:2px}
@media (hover:hover){body.dark .thumb:hover{transform:translateY(-2px);border-color:var(--brand)}}

.opt-row{display:flex;align-items:center;gap:14px;margin:16px 0}
.opt-row > span{font-size:14px;color:var(--ink-muted);font-weight:600}
.sw-lg{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.sw-lg[aria-pressed="true"]{border-color:var(--ink)}
.opt-row[hidden]{display:none}

body.dark .qty{background:var(--surface);border:1.5px solid var(--hairline);border-radius:99px}
body.dark .qty button{width:46px;height:54px;background:none;border:0;cursor:pointer;
  font-size:20px;color:var(--ink);display:grid;place-items:center}
body.dark .qty output{min-width:34px;text-align:center;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.qty button:focus-visible{outline:3px solid var(--brand);outline-offset:-3px;border-radius:50%}
.pd-buy{display:flex;gap:12px;margin:22px 0;flex-wrap:wrap}
.pd-buy .btn{flex:1;min-width:220px;height:54px}

body.dark .warn{background:var(--t-lemon);border:1px solid #EBD48A;color:var(--ink);
  border-radius:18px;padding:14px 18px}
.warn[hidden]{display:none}

body.dark .pd-facts dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;
  margin:0;font-size:14.5px}
body.dark .pd-facts dt{color:var(--ink-muted)}
body.dark .pd-facts dd{margin:0;font-weight:600;text-align:right;color:var(--ink)}

/* липкая панель покупки на телефоне */
.pd-bar{display:none}
@media (max-width:860px){
  .pd{grid-template-columns:1fr;gap:26px}
  .gal{grid-template-columns:1fr}
  .thumbs{flex-direction:row;order:2;overflow:auto;padding-bottom:4px}
  .thumbs .thumb{flex:0 0 64px}
  .pd-buy .btn{min-width:0}
  .pd-bar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:var(--surface);border-top:1px solid var(--hairline);
    padding:11px 16px calc(env(safe-area-inset-bottom,0px) + 12px);
    transform:translateY(102%);transition:transform .38s var(--e-expo);
    box-shadow:0 -8px 30px rgba(43,26,74,.12)}
  .pd-page.bar-on .pd-bar{transform:none}
  .pb-price{font-family:var(--display);font-weight:800;font-size:21px;color:var(--ink);
    white-space:nowrap}
  .pd-bar .btn{flex:1;height:48px}
}
@media (prefers-reduced-motion:reduce){
  body.dark .gal-main img.swapped{animation:none}
}

/* ============================================================
   КОШИК І ОФОРМЛЕННЯ
============================================================ */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(22px,2.8vw,44px);align-items:start;
  padding:clamp(24px,3vw,40px) 0 clamp(50px,6vw,90px)}
.cart-left{min-width:0}

.cart-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--hairline);margin-bottom:6px}
.cart-head b{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
.cart-clear{background:none;border:0;cursor:pointer;font:600 13.5px/1 var(--text);
  color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px;
  /* WCAG 2.5.8: зона натискання не менша за 24px, інакше на телефоні не влучиш */
  min-height:24px;padding:4px 2px}
.cart-clear:hover{color:#C22B55}
.cart-clear:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.cart-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--hairline);
  animation:cardIn .46s var(--e-expo) both;animation-delay:var(--d,0ms)}
.cart-row.gone{animation:rowOut .26s var(--e-quart) forwards}
@keyframes rowOut{to{opacity:0;transform:translateX(-24px);max-height:0;padding:0;margin:0}}
.cart-row .pic{display:block;width:96px;height:96px;border-radius:18px;background:var(--t-lav);
  padding:9px;overflow:hidden}
.cart-row .pic img{width:100%;height:100%;object-fit:contain}
.cr-b{min-width:0}
.cr-b h3{margin:0 0 4px;font:500 15.5px/1.32 var(--text)}
.cr-b h3 a{color:var(--ink);text-decoration:none}
.cr-b h3 a:hover{color:var(--brand)}
.cr-b .meta{display:block;font-size:12.5px;color:var(--ink-muted);margin-bottom:10px}
.cr-ctl{display:flex;align-items:center;gap:10px}
.qty-sm{height:38px}
body.dark .qty-sm button{width:34px;height:36px;font-size:17px}
body.dark .qty-sm output{min-width:26px;font-size:14.5px}
.cr-del{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--hairline);
  background:var(--surface);color:var(--ink-muted);cursor:pointer;display:grid;place-items:center;
  transition:border-color .2s,color .2s,background-color .2s}
.cr-del:hover{border-color:#E8A3B8;color:#C22B55;background:#FFF0F4}
.cr-del:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.cr-p{text-align:right}
.cr-p .pr{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);white-space:nowrap}
.cr-p small{display:block;font-size:12px;color:var(--ink-muted);margin-top:2px}

/* ---------- форма ---------- */
.checkout{margin-top:clamp(28px,3.4vw,44px)}
.cart-page.is-empty .checkout{display:none}
.checkout h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.4vw,30px);
  letter-spacing:-.03em;color:var(--ink);margin:0 0 20px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:16px;min-width:0}
.fld label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-muted);margin-bottom:7px}
.fld label i{font-style:normal;font-weight:400;opacity:.8}
.fld input{width:100%;height:52px;padding:0 18px;border-radius:15px;
  border:1.5px solid var(--hairline);background:var(--surface);color:var(--ink);
  font:500 15.5px/1 var(--text);outline:none;
  transition:border-color .2s var(--e-quart),box-shadow .2s var(--e-quart)}
.fld input::placeholder{color:#A79FC0}
.fld input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(107,63,228,.13)}
.fld-err{display:block;font-size:12.5px;color:#C22B55;margin-top:6px;min-height:0;
  opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s var(--e-quart)}
.fld.has-err input{border-color:#E23D6B;background:#FFF6F8}
.fld.has-err input:focus{box-shadow:0 0 0 4px rgba(226,61,107,.14)}
.fld.has-err .fld-err{opacity:1;transform:none}
.fld.has-err input{animation:shakeF .34s var(--e-quart)}
@keyframes shakeF{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.fset{border:0;padding:0;margin:0 0 20px}
.fset legend{font-size:13.5px;font-weight:600;color:var(--ink-muted);margin-bottom:10px;padding:0}
.radio{display:flex;align-items:center;gap:12px;padding:13px 16px;margin-bottom:8px;cursor:pointer;
  border:1.5px solid var(--hairline);border-radius:16px;background:var(--surface);
  transition:border-color .2s,background-color .2s,transform .18s var(--e-quart)}
.radio input{position:absolute;opacity:0;width:0;height:0}
.rbox{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--hairline);
  position:relative;transition:border-color .2s}
.rbox::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--brand);
  transform:scale(0);transition:transform .26s var(--ease-snap-click)}
.radio input:checked ~ .rbox{border-color:var(--brand)}
.radio input:checked ~ .rbox::after{transform:scale(1)}
.radio:has(input:checked){border-color:var(--brand);background:var(--t-lav)}
.radio input:focus-visible ~ .rbox{outline:3px solid var(--brand);outline-offset:3px}
.rtx{display:flex;flex-direction:column;gap:1px;min-width:0}
.rtx b{font-weight:600;font-size:14.5px;color:var(--ink)}
.rtx small{font-size:12.5px;color:var(--ink-muted)}
@media (hover:hover){.radio:hover{border-color:var(--brand)}}

.checkout-go{width:100%;height:58px;font-size:16px;margin-top:6px}
.checkout-go:disabled{opacity:.5;cursor:not-allowed}
.checkout-go b{font-weight:800}
.checkout-note{font-size:12.5px;color:var(--ink-muted);margin:12px 0 0;text-align:center}
.checkout-note a{color:var(--brand)}

/* ---------- итог ---------- */
.cart-sum{position:sticky;top:96px;background:var(--surface);border:1px solid var(--hairline);
  border-radius:24px;padding:22px}
.cart-sum h3{font-family:var(--display);font-weight:700;font-size:18px;margin:0 0 16px;color:var(--ink)}
.cart-sum dl{display:grid;grid-template-columns:1fr auto;gap:9px 12px;margin:0 0 14px;font-size:14.5px}
.cart-sum dt{color:var(--ink-muted)}
.cart-sum dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--hairline)}
.cart-total span{font-size:14.5px;color:var(--ink-muted)}
.cart-total b{font-family:var(--display);font-weight:800;font-size:26px;color:var(--ink)}
.ship-bar{height:7px;border-radius:99px;background:var(--hairline);overflow:hidden;margin:16px 0 8px}
.ship-bar i{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--mint),var(--brand));transition:width .5s var(--e-expo)}
.ship-hint{font-size:12.5px;color:var(--ink-muted);margin:0}
.ship-hint.ok{color:#0B7F78;font-weight:600}
.sum-trust{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--hairline)}
.sum-trust span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted)}
.sum-trust svg{width:16px;height:16px;color:var(--mint);flex:none}
.cart-page.is-empty .cart-sum{display:none}

/* ---------- пусто ---------- */
.empty{text-align:center;padding:clamp(40px,7vw,80px) 20px;display:flex;flex-direction:column;
  align-items:center;gap:12px}
.empty-art svg{width:clamp(140px,18vw,190px);height:auto;
  animation:emptyFloat 3.6s var(--e-quart) infinite}
.empty h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.6vw,30px);
  letter-spacing:-.03em;color:var(--ink);margin:6px 0 0}
.empty p{color:var(--ink-muted);margin:0 0 12px;max-width:44ch}

/* ---------- заказ принят ---------- */
.order-ok{max-width:640px;margin:0 auto;padding:clamp(36px,5vw,72px) 0 clamp(50px,6vw,90px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.ok-art svg{width:clamp(96px,12vw,130px);height:auto;
  animation:okPop .7s var(--ease-playful) both}
@keyframes okPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.order-ok h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.2vw,42px);
  letter-spacing:-.035em;color:var(--ink);margin:0}
.order-ok h2 em{font-style:normal;color:var(--brand)}
.order-ok p{color:var(--ink-muted);margin:0;max-width:48ch}
.ok-facts{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:14px 0 6px;
  width:100%;max-width:400px;text-align:left;font-size:14.5px}
.ok-facts dt{color:var(--ink-muted)}
.ok-facts dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}
.ok-facts dd b{font-family:var(--display);font-weight:800;font-size:18px}
.ok-go{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}

@media (max-width:900px){
  .cart-layout{grid-template-columns:1fr}
  .cart-sum{position:static;order:-1}
  .cart-page.is-empty .cart-sum{display:none}
}
@media (max-width:560px){
  .f2{grid-template-columns:1fr}
  .cart-row{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .cart-row .pic{width:72px;height:72px;border-radius:14px}
  .cr-p{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:8px}
  .cr-p small{margin:0}
}
@media (prefers-reduced-motion:reduce){
  .cart-row,.cart-row.gone,.empty-art svg,.ok-art svg,.fld.has-err input{animation:none}
}

/* строка корзины — карточка, поэтому нужны боковые поля */
.cart-row{padding:16px 20px;border-bottom:0;background:var(--surface);
  border:1px solid var(--hairline);border-radius:20px;margin-bottom:10px}

/* ---------- панель списка желаний ---------- */
.wl-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--hairline);border-radius:20px;
  padding:14px 18px;margin-bottom:clamp(16px,2vw,24px)}
.wl-bar > span{font-size:15px;color:var(--ink-muted)}
.wl-bar b{font-family:var(--display);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.wl-acts{display:flex;gap:9px;flex-wrap:wrap}
.wl-bar[hidden],[data-wl-grid][hidden],[data-wl-empty][hidden]{display:none}
@media (max-width:560px){
  .wl-bar{flex-direction:column;align-items:stretch}
  .wl-acts .btn,.wl-acts .ws-btn{flex:1}
}

/* ============================================================
   КАБІНЕТ
============================================================ */
.acc-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px);
  margin-bottom:clamp(22px,3vw,38px)}
.acc-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:var(--surface);border:1.5px solid var(--hairline);border-radius:22px;
  padding:clamp(16px,1.8vw,22px);cursor:pointer;text-decoration:none;color:inherit;
  transition:border-color .22s,transform .2s var(--e-quart),background-color .22s}
.acc-tab b{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);margin-top:8px}
.acc-tab small{font-size:13px;color:var(--ink-muted)}
.acc-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:var(--t-lav);color:var(--brand)}
.acc-ico svg{width:20px;height:20px}
.acc-tab[aria-selected="true"]{border-color:var(--brand);background:var(--t-lav)}
.acc-tab[aria-selected="true"] .acc-ico{background:var(--brand);color:#fff}
.acc-tab:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media (hover:hover){.acc-tab:hover{border-color:var(--brand);transform:translateY(-3px)}}

.acc-panel[hidden]{display:none}
.acc-list{display:flex;flex-direction:column;gap:10px}
.acc-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:16px 20px}
.acc-row b{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--ink);display:block}
.acc-row .meta{display:block;font-size:13px;color:var(--ink-muted);margin-top:3px}
.acc-state{font-size:13px;font-weight:600;color:var(--brand);background:var(--t-lav);
  border-radius:99px;padding:6px 13px;white-space:nowrap}
.acc-state.ok{color:#0B7F78;background:var(--t-mint)}
.acc-sum{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);white-space:nowrap}
.acc-add{margin-top:clamp(18px,2.4vw,28px);background:var(--surface);
  border:1px solid var(--hairline);border-radius:22px;padding:clamp(18px,2.2vw,26px)}
.acc-add .btn{width:100%;max-width:260px}

.acc-bonus{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(18px,2.4vw,34px);
  align-items:start}
.bon-card{background:linear-gradient(150deg,#5E34D0,#452499);color:#fff;border-radius:24px;
  padding:26px;display:flex;flex-direction:column;gap:4px}
.bon-card span{font-size:14px;color:#E3DCF7}
.bon-card b{font-family:var(--display);font-weight:800;font-size:54px;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bon-card small{font-size:13.5px;color:#E3DCF7}
.bon-txt h3{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);margin:0 0 12px}
.bon-txt ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;
  color:var(--ink-muted);font-size:15px;line-height:1.5}
.bon-txt b{color:var(--ink)}

@media (max-width:860px){
  .acc-tabs{grid-template-columns:1fr 1fr}
  .acc-bonus{grid-template-columns:1fr}
  .acc-row{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
  .acc-sum{grid-column:2}
}
@media (max-width:520px){
  .acc-tabs{grid-template-columns:1fr}
  .acc-tab{flex-direction:row;align-items:center;gap:12px;padding:14px 16px}
  .acc-tab b{margin-top:0}
}

/* описание и путь категории на карточке товара */
.pd-desc{margin-top:clamp(20px,2.4vw,30px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--hairline)}
.pd-desc[hidden]{display:none}
.pd-desc h2{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.7vw,22px);
  color:var(--ink);margin:0 0 10px}
.pd-desc p{color:var(--ink-muted);font-size:15.5px;line-height:1.6;margin:0;max-width:64ch}
.pd-sc{font-size:12.5px;color:var(--ink-muted);margin:14px 0 0;opacity:.8}
.pd-sc:has(span:empty){display:none}
/* бренд в карточке сетки */
.card-b .brand{font-size:12px;color:var(--ink-muted);opacity:.85;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* если фото поставщика не отдалось — не показываем битую иконку */
.ph.no-img img{display:none}
.ph.no-img::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,var(--t-lav),var(--canvas))}

/* ── кабінет: вхід за телефоном і шапка «хто ви» ─────────────────────── */
.acc-login{background:var(--surface);border:1px solid var(--line);border-radius:24px;
  padding:clamp(22px,3vw,34px);max-width:520px}
.acc-login h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,28px);
  letter-spacing:-.03em;color:var(--ink);margin:0 0 8px}
.acc-login p{color:var(--ink-muted);font-size:15px;line-height:1.55;margin:0 0 14px}
.acc-login .acc-add{margin-top:0;background:transparent;border:0;padding:0}
.acc-note{color:var(--ink);background:#FFF6DA;border-radius:12px;padding:9px 13px}
.acc-me{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:14px;font-size:14.5px;color:var(--ink-muted)}
.acc-me span{font-weight:600;color:var(--ink)}

/* ── кошик: сходинка оплати, бонуси, залишок ─────────────────────────── */
.pay-note{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--ink);
  background:#FFF6DA;border-radius:12px;padding:10px 13px}
.bonus-row{margin-bottom:12px}
.bonus-row .rbox{border-radius:7px}
.cart-rest{margin:8px 0 0;font-size:14px;color:var(--ink-muted);line-height:1.5}