/* ============================================================
   ILCATO — catalog + product page
   ============================================================ */

/* ---- catalog head -------------------------------------------------- */
/* «Назад в каталог» над крошками на карточке товара (просьба юзера 2026-07-03);
   href дополняет product.js категорией товара (catalog.html?cat=...) */
.back-to-cat{display:inline-flex;align-items:center;gap:.6em;margin-top:20px;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--ink-2);transition:color .3s}
.back-to-cat__arr{font-size:1.25em;line-height:1;transition:transform .35s var(--ease)}
.back-to-cat:hover{color:var(--accent)}
.back-to-cat:hover .back-to-cat__arr{transform:translateX(-4px)}
.back-to-cat + .crumbs{padding-top:12px}
.crumbs{padding-top:14px;font-size:var(--fs-xs);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
/* «Главная» (и другие ссылки в крошках) — mixed-case подчёркнутые, как на savage.ru;
   текущий раздел (span) остаётся капсом от .crumbs{text-transform:uppercase} */
.crumbs a{transition:color .3s;text-transform:none;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 .6em}

/* Компактная шапка каталога в стиле savage.ru: небольшой заголовок, тесные отступы,
   чипы сразу под заголовком (юзер 2026-07-07) */
/* Заголовок каталога скрыт визуально (юзер 2026-07-07), но ОСТАЁТСЯ в DOM (sr-only)
   ради SEO/скринридеров — там динамический H1 раздела. Видно: крошки → чипы. */
.catalog-head{padding:0}
.catalog-head h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.catalog-head p{color:var(--muted);margin-top:.4rem;font-size:var(--fs-sm);max-width:60ch}

/* ---- toolbar ------------------------------------------------------- */
/* НЕ sticky: панель фильтров уезжает вместе со страницей (просьба юзера 2026-07-03) */
.cat-bar{
  background:var(--cream);
  border-block:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:14px 0;
}
.cat-bar__wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}
.filter-btn{display:inline-flex;align-items:center;gap:.7em;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.filter-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.cat-count{font-size:var(--fs-sm);color:var(--muted)}
.cat-count b{color:var(--ink);font-weight:500}
.cat-bar__right{display:flex;align-items:center;gap:clamp(1rem,2vw,1.8rem)}
.grid-switch{display:flex;align-items:center;gap:4px}
.grid-switch button{display:grid;place-items:center;padding:7px 8px;border-radius:8px;color:var(--ink);opacity:.45;transition:opacity .25s,background .25s}
.grid-switch button:hover{opacity:.85}
.grid-switch button.is-on{opacity:1;background:var(--cream-2)}
.grid-switch svg{width:26px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
@media (max-width:860px){ .grid-switch{display:none} }
.sort{position:relative}
.sort__btn{display:inline-flex;align-items:center;gap:.6em;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.sort__btn::after{content:"";width:5px;height:5px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg);margin-left:2px;transition:transform .3s}
.sort.is-open .sort__btn::after{transform:rotate(225deg)}
.sort__menu{position:absolute;right:0;top:calc(100% + 10px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);min-width:220px;padding:6px;box-shadow:0 24px 40px -28px rgba(27,25,22,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;z-index:5}
.sort.is-open .sort__menu{opacity:1;visibility:visible;transform:none}
.sort__menu button{display:block;width:100%;text-align:left;padding:11px 14px;font-size:var(--fs-sm);border-radius:2px;transition:background .25s,color .25s}
.sort__menu button:hover,.sort__menu button.is-active{background:var(--cream-2);color:var(--accent)}

/* active category chips (quick filter) */
.cat-chips{display:flex;gap:8px;flex-wrap:wrap;padding:16px 0 6px}
.cat-chips a{padding:9px 16px;border:1px solid var(--line-2);border-radius:40px;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);transition:all .3s var(--ease)}
.cat-chips a:hover{border-color:var(--accent);color:var(--accent)}
.cat-chips a.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* крупные карточки «как WB cardsize=big» при 4 в ряду: контейнеры каталога шире
   стандартных 1360px (просьба юзера 2026-07-04); футер/шапка вне main не трогаются */
@media (min-width:861px){
  body[data-page="catalog"] main .container{max-width:min(1850px, 100%)}
}

/* ---- grid ---------------------------------------------------------- */
.catalog-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:60px 30px;   /* как на главной (.home-cards): ряды 60, колонки 30 (юзер 2026-07-07) */
  padding:clamp(1.6rem,1rem + 1.6vw,2.8rem) 0 var(--section-y);
}
/* каталог во всю ширину, как слайды на главной — чтобы размер карточек совпадал */
body[data-page="catalog"] .container{max-width:none;padding-inline:clamp(16px,4.7vw,110px)}
@media (min-width:861px){
  .catalog-grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .catalog-grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .catalog-grid.cols-4{grid-template-columns:repeat(4,1fr)}
}
.catalog-grid .prod-card{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.catalog-grid .prod-card.is-in{opacity:1;transform:none}
.catalog-empty{padding:5rem 0;text-align:center;color:var(--muted)}
.catalog-empty h3{font-size:1.6rem;color:var(--ink);margin-bottom:.6rem}

/* ---- filter drawer (from left) ------------------------------------- */
.filter-overlay{position:fixed;inset:0;z-index:70;background:rgba(27,25,22,.42);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;backdrop-filter:blur(1.5px)}
.filter-overlay.is-on{opacity:1;visibility:visible}
.filter-drawer{position:fixed;top:0;left:0;bottom:0;z-index:80;width:min(400px,100vw);background:var(--paper);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .55s var(--ease);box-shadow:30px 0 60px -40px rgba(27,25,22,.6)}
.filter-drawer.is-open{transform:none}
.filter-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);border-bottom:1px solid var(--line)}
.filter-drawer__head h3{font-size:1.4rem;font-weight:500}
.filter-drawer__body{flex:1;overflow-y:auto;padding:8px var(--gutter)}
.filter-group{padding:22px 0;border-bottom:1px solid var(--line)}
.filter-group h4{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:16px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:9px 15px;border:1px solid var(--line-2);border-radius:40px;font-size:var(--fs-sm);cursor:pointer;transition:all .25s var(--ease);user-select:none}
.chip:hover{border-color:var(--accent)}
.chip.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sw-row{display:flex;gap:12px;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.12);cursor:pointer;position:relative;transition:transform .25s}
.sw:hover{transform:scale(1.08)}
.sw.is-on::after{content:"";position:absolute;inset:-5px;border:1.5px solid var(--accent);border-radius:50%}
.price-row{display:flex;align-items:center;gap:12px}
.price-row input{width:100%;height:46px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--radius);font-size:var(--fs-sm)}
.price-row input:focus{outline:none;border-color:var(--accent)}
.filter-drawer__foot{padding:18px var(--gutter) calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:12px;background:var(--cream)}
.filter-drawer__foot .btn{flex:1}

/* ---------------------------------------------------------------- */
/* PRODUCT PAGE                                                      */
/* ---------------------------------------------------------------- */
.product{padding-top:22px}
/* minmax(0,…) обязателен: голый fr = min-width:auto, и лента миниатюр (min-content)
   раздувает колонку шире вьюпорта — на мобиле страница ездила по горизонтали */
.product__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:clamp(1.6rem,0.6rem + 3vw,4.5rem);align-items:start}
.product__gallery{display:block;position:sticky;top:calc(var(--header-h) + 18px)} /* фото на месте, текст листается (как LR) */
/* галерея «как на WB»: колонка миниатюр слева + большое фото.
   ВАЖНО: высоту задаёт ТОЛЬКО фото (aspect-ratio 3/4 от ширины колонки);
   миниатюры — абсолютной колонкой со скроллом, иначе при 10+ миниатюрах
   они растягивали ряд грида, а фото раздувалось по ширине за рамки колонки */
.pgal{position:relative;padding-left:86px}
.pgal__main{aspect-ratio:3/4;width:100%}
.pgal__main:hover .card-nav{opacity:1}
.pgal__main .card-dashes{display:none}
.pgal__thumbs{position:absolute;left:0;top:0;bottom:0;width:74px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:none}
.pgal__thumbs::-webkit-scrollbar{display:none}
.pgal__thumb{position:relative;flex:0 0 auto;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;border:1px solid transparent;opacity:.6;transition:opacity .3s,border-color .3s;background:var(--cream-2);cursor:pointer}
.pgal__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pgal__thumb:hover{opacity:1}
.pgal__thumb.is-on{opacity:1;border-color:var(--ink)}
.pgal__play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.2)}
.pgal__play svg{width:20px;height:20px;fill:currentColor}
.product__info{position:static}
.product__info .eyebrow{margin-bottom:12px;display:block}
/* название ЦЕЛИКОМ (без троеточия) и обычным гротеском, как текст по всему проекту
   (просьба юзера 2026-07-04; отменяет прежний однострочный ellipsis) */
.product__title{font-family:var(--text);font-size:clamp(1.35rem, 1.1rem + .9vw, 1.8rem);font-weight:500;line-height:1.3;overflow-wrap:break-word}
.product__art{font-size:var(--fs-xs);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-top:8px}
.product__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 14px;margin:12px 0 20px;font-size:1.5rem}
/* шрифт цены = как в карточках каталога (гротеск, не display-сериф) — просьба юзера */
.product__price .now{font-size:1.6rem;font-weight:500}
.product__price .old{color:var(--muted);text-decoration:line-through;font-size:1.2rem}
.product__price .save{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--sale);border:1px solid var(--sale);padding:4px 8px;border-radius:2px}
.product__block{padding:20px 0;border-top:1px solid var(--line)}
.product__block h4{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px;display:flex;justify-content:space-between}
.product__block h4 a{color:var(--accent);text-transform:none;letter-spacing:0;font-weight:400}
.size-guide-btn{color:var(--accent);text-transform:none;letter-spacing:0;font-weight:400;font-size:inherit;font-family:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.size-guide-btn:hover{color:var(--ink)}

/* ---- модалка «Таблица размеров» (PDP) ---- */
.sg-overlay{position:fixed;inset:0;z-index:120;background:rgba(27,25,22,.5);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(1.5px)}
.sg-overlay.is-open{opacity:1;visibility:visible}
.sg-modal{background:var(--paper);border-radius:var(--radius);width:min(720px,100%);max-height:88vh;display:flex;flex-direction:column;transform:translateY(12px);transition:transform .35s var(--ease);box-shadow:0 30px 70px -30px rgba(27,25,22,.6);overflow:hidden}
.sg-overlay.is-open .sg-modal{transform:none}
.sg-modal__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.sg-modal__head h3{font-family:var(--display);font-size:1.6rem;font-weight:500}
.sg-modal__x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:15px;color:var(--ink-2);background:#fff;transition:.25s}
.sg-modal__x:hover{border-color:var(--ink);color:var(--ink);transform:rotate(90deg)}
.sg-modal__body{padding:20px 24px 24px;overflow-y:auto;overscroll-behavior:contain}
.sg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sg-table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:440px}
.sg-table th,.sg-table td{border:1px solid var(--line);padding:10px 12px;text-align:center;white-space:nowrap}
.sg-table thead th{background:var(--cream-2);font-weight:600;color:var(--ink)}
.sg-table .sg-lbl{text-align:left;font-weight:500;background:var(--cream);position:sticky;left:0}
.sg-note{margin-top:14px;font-size:.82rem;color:var(--muted);line-height:1.5}
.size-row{display:flex;gap:8px;flex-wrap:wrap}
.size{min-width:52px;height:46px;padding:0 12px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--radius);font-size:var(--fs-sm);cursor:pointer;transition:all .25s var(--ease)}
.size:hover{border-color:var(--ink)}
.size.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.color-pick{display:flex;align-items:center;gap:12px}
.color-pick .sw.is-on::after{border-color:var(--ink)}
.color-name{font-size:var(--fs-sm);color:var(--ink-2)}
.product__actions{display:flex;gap:12px;margin:24px 0 8px}
.product__actions .btn{flex:1}
.add-fav{width:56px;flex:0 0 auto!important;border:1px solid var(--line-2);border-radius:var(--radius);display:grid;place-items:center;color:var(--ink-2);transition:all .3s}
.add-fav:hover{border-color:var(--sale);color:var(--sale)}
.add-fav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.size-hint{font-size:var(--fs-xs);color:var(--sale);margin-top:8px;min-height:1em}
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 0;text-align:left;font-size:var(--fs-body);font-weight:500}
.acc__q span{font-size:1.4rem;color:var(--muted);transition:transform .3s;line-height:1}
.acc__item.is-open .acc__q span{transform:rotate(45deg)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc__a.is-open{max-height:640px}
.acc__a p{padding:0 0 18px;color:var(--ink-2);font-size:var(--fs-sm);max-width:56ch}

/* стоимость доставки */
.ship-note{max-width:44ch}
.ship-calc{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}
.ship-calc .fld{display:flex;flex-direction:column;gap:4px}
.ship-calc .fld span{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ship-calc .fld input{border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent;padding:8px 0;font-size:var(--fs-body);font-family:inherit;color:var(--ink);transition:border-color .3s}
.ship-calc .fld input:focus{outline:none;border-color:var(--ink)}
.ship-calc__row{display:grid;grid-template-columns:1.7fr 1fr;gap:20px}
.ship-calc .btn{align-self:flex-start}
.ship-result{border-top:1px solid var(--line)}
.ship-opt{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.ship-opt span{flex:1}
.ship-opt em{font-style:normal;color:var(--muted);font-size:var(--fs-xs);white-space:nowrap}
.ship-opt b{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.ship-free{padding:12px 0 0!important;color:var(--muted)!important;font-size:var(--fs-xs)!important}

/* параметры модели */
.model-params{padding:2px 0 18px;display:flex;flex-direction:column;gap:9px;max-width:340px;list-style:none;margin:0}
.model-params li{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-sm);color:var(--ink-2)}
.model-params li b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* лайтбокс: полноэкранный просмотр фото с зумом */
.pgal__main .card-slide img{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:150;background:var(--paper);display:none}
.lb.is-on{display:block}
.lb__stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;touch-action:none}
.lb__stage img{max-width:min(86vw,900px);max-height:94vh;cursor:zoom-in;transition:transform .35s var(--ease),transform-origin .15s linear;user-select:none;-webkit-user-drag:none}
.lb__stage img.is-zoom{transform:scale(2.4);cursor:zoom-out}
.lb__close{position:absolute;top:18px;right:18px;z-index:5;width:44px;height:44px;border-radius:50%;background:var(--cream-2);display:grid;place-items:center;color:var(--ink-2);transition:color .3s}
.lb__close:hover{color:var(--sale)}
.lb__close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4}
.lb__thumbs{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;width:64px;max-height:calc(100vh - 60px);overflow-y:auto;scrollbar-width:none;z-index:4}
.lb__thumbs::-webkit-scrollbar{display:none}
.lb__thumb{flex:0 0 auto;aspect-ratio:3/4;border-radius:2px;overflow:hidden;border:1px solid transparent;opacity:.6;transition:opacity .3s,border-color .3s;background:var(--cream-2)}
.lb__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb__thumb:hover{opacity:1}
.lb__thumb.is-on{opacity:1;border-color:var(--ink)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;background:var(--cream-2);display:grid;place-items:center;color:var(--ink-2);transition:color .3s}
.lb__nav:hover{color:var(--ink)}
.lb__nav--prev{left:104px}
.lb__nav--next{right:26px}
.lb__nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.lb__count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:var(--fs-xs);letter-spacing:.12em;color:var(--muted);z-index:4;display:none;font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .lb__thumbs{display:none}
  .lb__nav--prev{left:12px}
  .lb__nav--next{right:12px}
  .lb__stage img{max-width:96vw}
  .lb__count{display:block}
}

/* блок «Есть вопросы?» */
.ask{margin-top:28px}
.ask h4{font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:16px}
.ask__row{display:flex;gap:26px}
.ask__row a{color:var(--muted);transition:color .3s,transform .3s var(--ease)}
.ask__row a:hover{color:var(--accent);transform:translateY(-2px)}
.ask__row svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* блок похожих ниже (просьбы юзера: +15px, затем ещё +20px — не липнет к фото) */
.related{margin-top:35px}

/* пагинация каталога (десктоп, 24 карточки на страницу) */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;padding:36px 0 8px}
.pager:empty{display:none}
.pager button{min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:40px;font-size:var(--fs-sm);color:var(--ink-2);display:grid;place-items:center;transition:all .3s var(--ease);font-variant-numeric:tabular-nums}
.pager button:hover{border-color:var(--accent);color:var(--accent)}
.pager button.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager button:disabled{opacity:.35;pointer-events:none}
.pager__dots{min-width:26px;text-align:center;color:var(--muted)}
.pager svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
@media (max-width:860px){ .pager{display:none} }
.usp-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.usp{display:flex;align-items:center;gap:9px;font-size:var(--fs-xs);color:var(--muted)}
.usp svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.4;flex:0 0 auto}

.related{background:var(--cream)}

/* ---------------------------------------------------------------- */
/* CART PAGE                                                         */
/* ---------------------------------------------------------------- */
.cartpage{padding-block:clamp(1.6rem,1rem + 1.6vw,3rem) var(--section-y)} /* НЕ шорткат padding: он обнулял боковые отступы .container */
.cartpage h1{font-size:var(--fs-h1);font-weight:500;margin-bottom:.4rem}
.cartpage__count{color:var(--muted);margin-bottom:2rem}
.cartpage__grid{display:grid;grid-template-columns:1.55fr 0.85fr;gap:clamp(1.6rem,0.6rem + 3vw,4rem);align-items:start}
.cart-rows{border-top:1px solid var(--line)}
.cart-row{display:grid;grid-template-columns:110px 1fr auto;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.cart-row__img{aspect-ratio:3/4;background:var(--cream-2);border-radius:var(--radius);overflow:hidden}
.cart-row__img img{width:100%;height:100%;object-fit:cover}
.cart-row__name{font-family:var(--display);font-size:1.35rem;font-weight:500}
.cart-row__meta{font-size:var(--fs-xs);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.cart-row__meta a{color:var(--accent)}
.cart-row__ctrls{display:flex;align-items:center;gap:20px;margin-top:16px}
.cart-row__right{text-align:right;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.cart-row__price{font-family:var(--display);font-size:1.35rem;font-weight:500}
.cart-row__x{color:var(--muted);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;transition:color .3s}
.cart-row__x:hover{color:var(--sale)}
.summary{position:sticky;top:calc(var(--header-h) + 20px);background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.summary h3{font-size:1.4rem;font-weight:500;margin-bottom:18px}
.summary__line{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;font-size:var(--fs-sm);color:var(--ink-2)}
.summary__line.total{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;font-size:1rem;color:var(--ink)}
.summary__line.total .v{font-family:var(--text);font-size:1.5rem;font-weight:600;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.promo{display:flex;gap:10px;margin:16px 0}
.promo input{flex:1;height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--radius);font-size:var(--fs-sm)}
.promo input:focus{outline:none;border-color:var(--accent)}
.summary__note{font-size:var(--fs-xs);color:var(--muted);margin-top:14px;text-align:center}
.cart-empty-page{text-align:center;padding:5rem 0}
.cart-empty-page svg{width:56px;height:56px;stroke:var(--line-2);fill:none;stroke-width:1.1;margin-bottom:1.2rem}
.cart-empty-page h2{font-size:1.9rem;font-weight:500;margin-bottom:.6rem}
.cart-empty-page p{color:var(--muted);margin-bottom:1.6rem}

/* checkout form */
.checkout{margin-top:1.4rem}
.checkout.is-hidden{display:none}
.field{margin-bottom:14px}
.field label{display:block;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input{width:100%;height:50px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--radius);font-size:var(--fs-sm)}
.field input:focus{outline:none;border-color:var(--accent)}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-tile{flex:1;min-width:120px;border:1px solid var(--line-2);border-radius:var(--radius);padding:12px 14px;cursor:pointer;font-size:var(--fs-sm);transition:all .25s}
.radio-tile input{position:absolute;opacity:0}
.radio-tile.is-on{border-color:var(--ink);background:var(--cream-2)}
.radio-tile small{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:3px}
.order-ok{text-align:center;padding:3rem 1rem}
.order-ok svg{width:64px;height:64px;stroke:var(--ok);fill:none;stroke-width:1.2;margin-bottom:1.2rem}
.order-ok h2{font-size:2rem;font-weight:500;margin-bottom:.6rem}

/* ---------------------------------------------------------------- */
/* INFO / «Покупателю»                                              */
/* ---------------------------------------------------------------- */
.info{padding-block:clamp(1.4rem,0.8rem + 1.6vw,2.6rem) var(--section-y)} /* НЕ шорткат padding: он обнулял боковые отступы .container */
.info h1{font-size:var(--fs-h1);font-weight:500;margin-bottom:clamp(1.4rem,0.8rem + 1.6vw,2.4rem)}
.info__grid{display:grid;grid-template-columns:270px 1fr;gap:clamp(1.6rem,0.6rem + 3vw,4.5rem);align-items:start}
.info__nav{position:sticky;top:calc(var(--header-h) + 20px)}
.info__nav a{display:block;padding:11px 0;font-size:var(--fs-sm);color:var(--ink-2);border-bottom:1px solid var(--line);transition:color .3s,padding-left .3s var(--ease)}
.info__nav a:hover{color:var(--accent);padding-left:6px}
.info__nav a.is-active{color:var(--ink);font-weight:500}
.info__nav a.is-active::before{content:"";display:inline-block;width:14px;height:1px;background:var(--accent);vertical-align:middle;margin-right:8px}
.info__body{max-width:760px;font-size:var(--fs-body);line-height:1.75;color:var(--ink-2)}
.info__body h2{font-family:var(--display);font-size:var(--fs-h3);color:var(--ink);margin:2.2rem 0 1rem;font-weight:500}
.info__body h2:first-child{margin-top:0}
.info__body p{margin-bottom:1rem}
.info__body ul.dot{margin:0 0 1.2rem;padding-left:0}
.info__body ul.dot li{position:relative;padding-left:22px;margin-bottom:.6rem}
.info__body ul.dot li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.info__body a.tlink{color:var(--accent);border-bottom:1px solid var(--line-2)}
.info__body strong{color:var(--ink);font-weight:600}
.info-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:1.4rem 0}
.info-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;margin:1.2rem 0}
.faq .acc__q{font-family:var(--display);font-size:1.2rem}
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:1.4rem 0}
.contacts-grid .info-card{margin:0}
.contacts-grid h4{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contacts-grid a{color:var(--ink);font-size:1.15rem}
.sizetable{width:100%;border-collapse:collapse;margin:1rem 0 1.4rem;font-size:var(--fs-sm)}
.sizetable th,.sizetable td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.sizetable th{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--cream)}
.sizetable td:first-child{font-weight:600;color:var(--ink)}
.sizetable tr:hover td{background:var(--cream)}
/* реквизиты (label / value) */
.reqs-table{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:var(--fs-sm)}
.reqs-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.reqs-table td:first-child{width:38%;color:var(--muted)}
.reqs-table td:last-child{color:var(--ink);font-weight:500}
@media (max-width:560px){ .reqs-table td:first-child{width:44%} }

@media (max-width:900px){
  .cartpage__grid{grid-template-columns:1fr}
  .summary{position:static}
  .info__grid{grid-template-columns:1fr}
  .info__nav{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:1.4rem;-webkit-overflow-scrolling:touch}
  .info__nav a{white-space:nowrap;border-bottom:0;border:1px solid var(--line-2);border-radius:40px;padding:9px 15px;font-size:var(--fs-xs)}
  .info__nav a.is-active::before{display:none}
  .contacts-grid,.info-cols{grid-template-columns:1fr}
}

@media (max-width:1080px){
  .catalog-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .product__grid{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .product__info{position:static}
  .product__gallery{position:static}
  .catalog-grid{grid-template-columns:repeat(2,1fr)}
  /* галерея: большое фото сверху (свайп + полоски), лента миниатюр под ним */
  .pgal{display:flex;flex-direction:column;gap:10px;padding-left:0}
  /* полоски-индикаторы в мобильной галерее убраны (просьба юзера 2026-07-04):
     позицию слайда показывает лента миниатюр под фото; свайп работает как раньше */
  .pgal__thumbs{position:static;width:auto;min-width:0;order:2;flex-direction:row;height:auto;overflow-x:auto;overflow-y:hidden;gap:8px;padding-bottom:2px}
  .pgal__thumb{width:54px}
}
@media (hover:none){
  .pgal__main .card-nav{display:none}
}
@media (max-width:520px){
  /* 1 товар на строку «как savage.ru» (юзер 2026-07-07); было 1fr 1fr / 36px 16px */
  .catalog-grid{grid-template-columns:1fr;gap:44px 16px}
  .cat-bar__wrap .cat-count{display:none}
}

/* ==== БЕЛЫЙ ФОН КАТАЛОГА (проба юзера 2026-07-04): страница, шапка, панель
   фильтров и мега-меню; футер (тёмный) и дровер фильтров (paper) не тронуты.
   История: белый уже пробовали 2026-07-02 и юзер отменял — теперь вернул сам ==== */
body[data-page="catalog"]{background:#fff}
body[data-page="catalog"] .site-header{background:#fff}
body[data-page="catalog"] .cat-bar{background:#fff}
body[data-page="catalog"] .drop{background:#fff}
/* + инфо-страницы «Покупателю» тоже на белом (юзер 2026-07-04) */
body[data-page="info"]{background:#fff}
body[data-page="info"] .site-header{background:#fff}
body[data-page="info"] .drop{background:#fff}
/* + страница товара тоже на белом (юзер 2026-07-04); .related имел свой cream-фон */
body[data-page="product"]{background:#fff}
body[data-page="product"] .site-header{background:#fff}
body[data-page="product"] .drop{background:#fff}
body[data-page="product"] .related{background:#fff}

/* ==== МОБИЛЬНЫЙ КАТАЛОГ «как savage.ru» (юзер 2026-07-07) ==================
   1) Чипсы категорий — одна строка с горизонтальной прокруткой во всю ширину
      экрана; обрезанная чипса у правого края подсказывает, что ряд листается.
   2) Фото в карточках листаются свайпом ровно по 1 слайду: нативный
      scroll-snap (слайды в ряд) вместо десктопного кроссфейда со стопкой
      absolute-слайдов; scroll-snap-stop:always = не больше слайда за жест.
   3) Точки-пагинация 4px под фото — JS (bindCardMedia) выносит .card-dashes
      из скроллера в .prod-card, иначе absolute-точки уезжали бы со слайдами.
   Откат: удалить блок + зеркальные ветки snap-режима в cards.js и подскролл
   чипсы в catalog.js; сетку ≤520px вернуть на 1fr 1fr (правило выше). ====== */
@media (max-width:860px){
  .cat-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(clamp(16px, 4.7vw, 110px) * -1);
    padding-inline:clamp(16px, 4.7vw, 110px)}
  .cat-chips::-webkit-scrollbar{display:none}
  .cat-chips a{flex:0 0 auto;white-space:nowrap}

  .catalog-grid .card-media{display:flex;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain}
  .catalog-grid .card-media::-webkit-scrollbar{display:none}
  .catalog-grid .card-media .card-slide{position:relative;inset:auto;
    flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;
    opacity:1;pointer-events:auto;transition:none}

  /* точки под фото; перебивают display:none из site.css (.prod-card .card-dashes) */
  .catalog-grid .prod-card > .card-dashes{display:flex;position:static;
    justify-content:center;gap:5px;margin-top:9px;left:auto;right:auto;bottom:auto}
  .catalog-grid .prod-card > .card-dashes i{flex:0 0 auto;width:4px;height:4px;
    border-radius:50%;background:var(--line-2)}
  .catalog-grid .prod-card > .card-dashes i.is-act{background:var(--ink)}
}