.visually-hidden,.storefront-page-h1.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mod-pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 0;scroll-padding-inline:8px}
.mod-pills::-webkit-scrollbar{height:0;background:transparent}
.mod-pill{flex-shrink:0;padding:5px 12px;border:1px solid #ddd;border-radius:16px;font-size:.78rem;cursor:pointer;white-space:nowrap;transition:all .15s;background:#fff;color:#333;font-family:inherit;line-height:inherit}
button.mod-pill{appearance:none;-webkit-appearance:none}
.mod-pill.active{background:#005BFF;color:#fff;border-color:#005BFF}
.mod-pill:hover:not(.active){border-color:#005BFF;color:#005BFF}
.mod-pill--single{cursor:default}
.apparel-color-chip{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:5px 12px 5px 6px;border:1px solid #ddd;border-radius:16px;font-size:.78rem;cursor:pointer;white-space:nowrap;background:#fff;color:#333;transition:all .15s}
.apparel-color-chip.active{border-color:#005BFF;box-shadow:0 0 0 2px rgba(0,91,255,.15);font-weight:600}
.apparel-color-chip.is-disabled{opacity:.45;pointer-events:none}
.apparel-color-dot{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex-shrink:0}
.mod-pill.is-disabled{opacity:.45;pointer-events:none}
.product-card__image-wrap .product-card__reviews{position:absolute;top:8px;left:8px;z-index:5;margin:0;width:auto;max-width:calc(100% - 16px);font-size:.72rem;color:#555;cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;gap:4px;flex-wrap:nowrap;line-height:1.2;text-align:left;padding:4px 9px;border:1px solid rgba(0,0,0,.12);border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 1px 3px rgba(0,0,0,.08);pointer-events:auto;white-space:nowrap}
.product-card__image-wrap .product-card__reviews:hover{color:var(--primary,#005BFF);border-color:rgba(0,91,255,.35)}
.product-card__reviews-stars{color:#ffb300;font-size:.8rem;line-height:1;flex-shrink:0}
.product-card__reviews-meta{color:#888;font-weight:500;font-size:.68rem}
.cart-btn-wrap{position:relative}
.cart-qty-row{display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--primary,#005BFF);border-radius:6px;padding:4px 8px;min-height:38px;height:38px;box-sizing:border-box}
.cart-in-label{color:#fff;font-size:.78rem;font-weight:500;display:flex;align-items:center;gap:4px;white-space:nowrap}
.cart-qty-ctrl{display:flex;align-items:center;background:rgba(255,255,255,.15);border-radius:5px;overflow:visible}
.cart-qty-ctrl button{width:32px;height:30px;border:none;background:rgba(255,255,255,.2);color:#fff;font-size:1.15rem;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;z-index:5}
.cart-qty-ctrl button:hover{background:rgba(255,255,255,.25)}
.cart-qty-ctrl button:active{background:rgba(255,255,255,.5)}
.cart-qty-ctrl .qty-val{min-width:28px;text-align:center;color:#fff;font-size:.9rem;font-weight:700;padding:0 2px}
.preorder-btn{background:#FF9800!important;color:#fff!important;border:2px solid transparent!important}
.preorder-btn:hover{background:#F57C00!important}
.out-of-stock-btn{background:#ffcdd2!important;color:#999!important;border:2px solid transparent!important;cursor:not-allowed;pointer-events:none}
.product-card .cart-add-btn{min-height:38px;height:38px;box-sizing:border-box;padding-top:0;padding-bottom:0;line-height:1.2}
@media(max-width:500px){
/* Карточки витрины — те же высоты/отступы, что у модального окна */
.product-card .mod-pill{padding:8px 16px;font-size:.88rem}
.product-card .cart-add-btn{font-size:1rem!important;padding-left:12px!important;padding-right:12px!important}
.product-card .cart-in-label{font-size:.88rem}
}
.page-loading-bar{position:fixed;top:0;left:0;width:0;height:3px;background:var(--primary,#005BFF);z-index:99999;transition:width .3s ease;pointer-events:none}
.page-loading-bar.active{width:70%;transition:width 1.5s ease-out}
.page-loading-bar.done{width:100%;transition:width .2s ease;opacity:0;transition:width .2s ease,opacity .3s .2s ease}
.storefront-scroll-sentinel{height:1px;margin:0;padding:0;pointer-events:none;visibility:hidden;overflow:hidden}
.mob-home-scroll-sentinel{height:1px;margin:0;padding:0;pointer-events:none;flex-shrink:0;overflow:hidden}
#mobile-catalog{display:none}
#mobile-catalog[data-ssr]{display:none}

/* Desktop (>640px): категории — см. css/style.css (.category-nav) */
@media(min-width:641px){
#mobile-catalog{display:none!important}
#mob-index-scroll{overflow:visible!important;scroll-snap-type:none!important}
}

/* Mobile (<=640px) */
@media(max-width:640px){
/* Витрина «все категории»: высота экрана — иначе #mob-index-scroll растёт с контентом, скролл на window, scroll-snap не работает (только при .all-cats, не ломаем одну категорию) */
html.page-index-html:has(body.page-index.all-cats){height:100dvh;max-height:100dvh}
body.page-index.all-cats{height:100dvh;max-height:100dvh;min-height:100dvh}
body.page-index.all-cats .page-index-shell{flex:1 1 0;min-height:0}
html:not(.page-index-html),body:not(.page-index){overflow-x:hidden}
#mobile-catalog[data-ssr]{display:block}
.header__logo{overflow:hidden}
.header__logo img{max-height:calc(var(--header-height) - 16px);max-width:120px;width:auto;height:auto;object-fit:contain}

body.all-cats .product-grid{display:none!important}
body.all-cats .pagination-toolbar{display:none!important}
body:not(.all-cats) .product-grid{grid-template-columns:1fr!important;gap:12px!important}
body:not(.all-cats) .product-card__image-wrap{height:0;padding-bottom:100%}

#mobile-catalog{padding:0 4px}
/* Горизонтальный паддинг main — для full-bleed карусели (margin-left карусели) */
body.page-index .page-index-shell>.mob-index-scroll>main.container{--main-pad-x:16px}
/* С нижней панелью чуть уже поля main — меньше «белого» слева относительно контента */
body.page-index.site-mobile-bar-on .page-index-shell>.mob-index-scroll>main.container{padding:12px 8px 16px!important;--main-pad-x:8px}
.mob-cat-section{margin-bottom:28px}
body.page-index.all-cats #mob-index-scroll{
  flex:1 1 0;
  min-height:0;
  min-width:0;
  /* Высоту задаёт flex-цепочка: html/body 100dvh → shell → здесь flex-basis 0 + overflow. max-height:100dvh на #mob-index-scroll давал больше родителя (без учёта футера) — артефакты iOS */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  /* mandatory: нужны snap-точки и у последней секции, и у футера — иначе скролл отпружинивает назад */
  scroll-snap-type:y mandatory;
}
/* Расширяем горизонтальный clip у вертикального скролла — иначе режутся full-bleed карусели (~10vw «хвосты» с 80vw карточкой) */
@supports (overflow-clip-margin:0px){
body.page-index.all-cats #mob-index-scroll{
  overflow-x:clip;
  overflow-clip-margin:0 12vw 0 12vw;
}
}
body.page-index.all-cats #mob-index-scroll>main.container{overflow-x:visible}
body.page-index.all-cats #mobile-catalog{overflow:visible}
body.page-index.all-cats #mob-index-scroll #home-banner-wrap,
body.page-index.all-cats #mob-index-scroll .mob-cat-section{
  scroll-snap-align:start;
}
/* Главная (моб.): чуть ниже ряд чипов; ближе первый заголовок категории к баннеру */
body.page-index .index-top-sticky .category-nav{padding:6px 0}
body.page-index .index-top-sticky .category-nav__list{padding:3px 8px}
body.page-index .index-top-sticky .category-nav__pill{
  min-height:36px;
  padding:5px 11px;
  font-size:.82rem;
}
body.page-index.all-cats #mob-index-scroll .home-banner-wrap{margin-bottom:6px}
body.page-index.all-cats #mob-index-scroll > main.container{padding:8px 12px 14px!important;--main-pad-x:12px}
body.page-index.all-cats #mob-index-scroll #mobile-catalog .mob-cat-section:first-child .mob-cat-header{padding-top:4px}
.mob-cat-header{padding:12px 4px 8px}
.mob-cat-header h3{font-size:1.05rem;font-weight:700;margin:0;color:#1a1a2e}
.mob-cat-empty{padding:16px 4px;color:#999;font-size:.9rem;font-style:italic}
/* Карусель на всю ширину экрана: выход из padding main + #mobile-catalog; «хвосты» соседей у краёв без белой «дыры» */
.mob-cat-carousel{
  --mob-carousel-card-w:80vw;
  display:flex;
  gap:12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 0;
  width:100vw;
  max-width:100vw;
  box-sizing:border-box;
  margin-left:calc(-1 * (var(--main-pad-x, 16px) + 4px));
  scroll-snap-type:x mandatory;
  scroll-padding-inline:max(0px,calc((100vw - var(--mob-carousel-card-w)) / 2));
  overscroll-behavior-x:contain;
}
body.page-index.site-mobile-bar-on .mob-cat-carousel{--mob-carousel-card-w:70vw}
.mob-cat-carousel::-webkit-scrollbar{display:none}
/* Одна карточка в категории — без горизонтальной прокрутки и клонов, по центру */
.mob-cat-carousel--single{
  width:100%;
  max-width:100%;
  margin-left:0;
  scroll-padding-inline:0;
  overflow-x:visible;
  scroll-snap-type:none;
  justify-content:center;
  gap:0;
  padding-left:0;
  padding-right:0;
  overscroll-behavior-x:auto;
  -webkit-overflow-scrolling:auto;
}
.mob-carousel-item{
  flex:0 0 var(--mob-carousel-card-w);
  max-width:var(--mob-carousel-card-w);
  scroll-snap-align:center;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
/* height:100% ломал flex+превью: разная «высота фото» в карусели */
.mob-carousel-item .product-card{width:100%;min-height:0}
#mobile-catalog .product-card__image-wrap{width:100%;max-width:100%}

.mob-single-cat-list{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.mob-single-card{width:100%}
.mob-single-card .product-card{width:100%}
/* В сетке витрины у .product-card height:100% + 1fr для ровных рядов; в вертик. списке это ломает расчёт высоты (часто «прыгает» первая карточка) */
body:not(.all-cats) .mob-single-card .product-card{
height:auto;
min-height:0;
grid-template-rows:auto auto;
align-content:start;
}
body:not(.all-cats) .mob-single-card .product-card__image-wrap{height:0;padding-bottom:100%}
}
/* Главная: карточки на мобильной витрине на ~5% компактнее (без нижней панели в режиме одной категории — там полная ширина) */
@media(max-width:768px){
body.page-index .product-grid > .product-card{width:95%;max-width:95%;justify-self:center;box-sizing:border-box}
body.page-index .mob-single-card .product-card{width:95%;max-width:95%;margin-left:auto;margin-right:auto;box-sizing:border-box}
body.page-index.site-mobile-bar-on:not(.all-cats) .product-grid > .product-card,
body.page-index.site-mobile-bar-on:not(.all-cats) .mob-single-card .product-card{
width:100%;
max-width:100%;
}
}
/* Sticky footer: футер у нижнего края экрана при малом контенте */
body.page-index{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
/* Одна категория на мобилке: не min-height:100dvh — dvh пересчитывается при скрытии адресной строки и даёт ощущение, что «первая карточка прыгает». svh = small viewport (как при открытой панели) */
@media(max-width:640px){
body.page-index:not(.all-cats){min-height:100vh;min-height:100svh}
}
.page-index-shell{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0}
.page-index-shell>.mob-index-scroll{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0}
/* Главная «все категории»: футер внутри #mob-index-scroll — snap start = вторая «ступень» после последней категории */
body.page-index.all-cats #mob-index-scroll > .site-chrome--footer{
  flex-shrink:0;
  margin-top:auto;
  scroll-snap-align:start;
}
body.page-index.all-cats #mob-index-scroll > .site-chrome--footer .site-footer{
  margin-top:0;
  padding-top:28px;
}
/* flex-grow у main на десктопе — «липкий» низ при малом контенте; на моб. см. @media ниже */
.page-index-shell>.mob-index-scroll>main.container{flex:1 1 auto;min-height:0;min-width:0}
@media(max-width:640px){
body.page-index .page-index-shell>.mob-index-scroll>main.container{flex:0 0 auto;min-height:0}
}
/*
 * overflow-x:hidden на html/body ломает position:sticky (scroll containment).
 * clip не создаёт scrollport — липкая шапка снова работает относительно окна.
 */
/* Старые WebKit: overflow-x:hidden на предке ломает sticky — по умолчанию visible, clip только где поддерживается */
html.page-index-html,body.page-index{overflow-x:visible}
@supports (overflow:clip){
html.page-index-html,body.page-index{overflow-x:clip}
/* «Все категории»: full-bleed карусель (100vw + отриц. margin) выходит за padding — clip на body/html обрезал боковые «хвосты» */
html.page-index-html:has(body.page-index.all-cats),body.page-index.all-cats{overflow-x:visible}
}
/* Вертикальный snap только внутри #mob-index-scroll (не на html) — баннер/«Наверх» без конфликтов */
/* Шапка + категории — один липкий блок ( -webkit- для старых iOS/Android WebKit ) */
.index-top-sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--card);align-self:flex-start;width:100%;flex-shrink:0}
.index-top-sticky .header{position:relative;top:auto;z-index:auto}
.index-top-sticky .category-nav{position:relative;top:auto;z-index:auto}
.home-banner-wrap{margin-bottom:12px;padding:0 4px;max-width:100%}
.home-banner-wrap--multi .home-banners-viewport{overflow:hidden;position:relative;width:100%}
.home-banner-wrap--multi .home-banners-outer-track{--outer-strip-w:0px;display:flex;flex-direction:row;flex-wrap:nowrap;gap:0;align-items:stretch;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
@media (prefers-reduced-motion:no-preference){.home-banner-wrap--multi.anim-ready-outer .home-banners-outer-track{animation-name:homeBannerOuterLoop;animation-duration:var(--outer-loop-duration,22s);animation-timing-function:linear;animation-iteration-count:infinite}}
.home-banner-wrap.home-banner-paused.anim-ready-outer .home-banners-outer-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.home-banner-wrap--multi .home-banners-outer-track{animation:none!important}}
@keyframes homeBannerOuterLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--outer-strip-w)),0,0)}}
.home-banner-wrap--multi .home-banner-block{flex:0 0 auto;flex-shrink:0;margin-bottom:0!important}
.home-banner-block{width:fit-content;max-width:100%;margin-bottom:12px}
.home-banner-block:last-child{margin-bottom:0}
.home-banner-wrap--multi .home-banner-block:last-child{margin-bottom:0}
.home-banner-carousel{position:relative;height:300px;width:fit-content;max-width:100%;border-radius:12px;overflow:hidden;background:#f0f0f0;box-shadow:0 1px 6px rgba(0,0,0,.08)}
.home-banner-track{position:relative;z-index:1;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:0;height:100%;min-height:0}
.home-banner-slide{position:relative;box-sizing:border-box;overflow:hidden;min-height:0;align-self:stretch}
.home-banner-carousel:not(.home-banner-carousel--loop) .home-banner-track{width:fit-content}
.home-banner-carousel:not(.home-banner-carousel--loop) .home-banner-slide{flex:0 0 auto;min-width:0;width:auto}
.home-banner-carousel:not(.home-banner-carousel--loop) .home-banner-slide a,.home-banner-carousel:not(.home-banner-carousel--loop) .home-banner-slide .home-banner-nolink{display:block;height:100%;width:auto;line-height:0}
.home-banner-carousel:not(.home-banner-carousel--loop) .home-banner-slide img,.home-banner-carousel:not(.home-banner-carousel--loop) .home-banner-slide__img{height:100%;width:auto;max-height:100%;max-width:100%;object-fit:contain;object-position:center;display:block}
.home-banner-carousel--loop .home-banner-track{--strip-w:0px;display:flex;flex-direction:row;flex-wrap:nowrap;gap:0;align-items:stretch;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
@media (prefers-reduced-motion:no-preference){.home-banner-carousel--loop.anim-ready .home-banner-track{animation-name:homeBannerStripLoop;animation-duration:var(--banner-loop-duration,22s);animation-timing-function:linear;animation-iteration-count:infinite}}
.home-banner-wrap.home-banner-paused .home-banner-carousel--loop.anim-ready .home-banner-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.home-banner-carousel--loop .home-banner-track{animation:none!important}}
@keyframes homeBannerStripLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--strip-w)),0,0)}}
.home-banner-carousel--vertical.home-banner-carousel--loop .home-banner-track{flex-direction:column;--strip-h:0px}
@media (prefers-reduced-motion:no-preference){.home-banner-carousel--vertical.home-banner-carousel--loop.anim-ready .home-banner-track{animation-name:homeBannerStripLoopV}}
@keyframes homeBannerStripLoopV{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-1 * var(--strip-h)),0)}}
.home-banner-carousel--fade .home-banner-track{position:relative;height:100%;width:fit-content}
.home-banner-carousel--fade .home-banner-slide{position:absolute;inset:0;opacity:0;animation-name:homeBannerFadeSlot;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes homeBannerFadeSlot{0%,100%{opacity:0;pointer-events:none}8%,35%{opacity:1;pointer-events:auto}42%{opacity:0;pointer-events:none}}
.home-banner-carousel--slide_in .home-banner-track{will-change:transform}
.home-banner-block--enter{animation:homeBannerEnter .65s ease-out both}
@keyframes homeBannerEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.home-banner-block--enter,.home-banner-carousel--fade .home-banner-slide{animation:none!important;opacity:1!important;transform:none!important;pointer-events:none!important}.home-banner-carousel--fade .home-banner-slide:last-child{pointer-events:auto!important}}
.home-banner-carousel--loop .home-banner-slide{flex:0 0 auto;flex-shrink:0;height:100%;display:flex;align-items:stretch;justify-content:center}
.home-banner-carousel--loop .home-banner-slide a,.home-banner-carousel--loop .home-banner-slide .home-banner-nolink{display:block;height:100%;width:auto;line-height:0;flex:0 0 auto}
.home-banner-carousel--loop .home-banner-slide img,.home-banner-carousel--loop .home-banner-slide__img{height:100%;width:auto;max-height:100%;object-fit:contain;object-position:center;display:block}
.home-banner-carousel--loop .home-banner-track{pointer-events:none}
.home-banner-carousel--loop .home-banner-slide,.home-banner-carousel--loop .home-banner-slide a,.home-banner-carousel--loop .home-banner-slide .home-banner-nolink{pointer-events:auto}
.home-banner-carousel--slide_in .home-banner-track{pointer-events:none}
.home-banner-carousel--slide_in .home-banner-slide,.home-banner-carousel--slide_in .home-banner-slide a,.home-banner-carousel--slide_in .home-banner-slide .home-banner-nolink{pointer-events:auto}
.home-banner-nav{position:absolute;top:0;bottom:0;width:min(48px,14vw);min-width:44px;max-width:56px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;padding:0;background:rgba(0,0,0,.18);color:#fff;opacity:.35;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .2s,background .2s}
.home-banner-nav i{font-size:1rem;line-height:1;pointer-events:none}
.home-banner-nav:hover,.home-banner-nav:focus{background:rgba(0,0,0,.32);opacity:.85;outline:none}
.home-banner-nav:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(0,91,255,.55)}
.product-card[role="button"]:focus-visible{outline:2px solid var(--primary,#005BFF);outline-offset:2px}
.pagination__ellipsis{display:inline-flex;align-items:center;padding:0 6px;color:var(--text-muted,#888);user-select:none}
.home-banner-nav--prev{left:0}
.home-banner-nav--next{right:0}
.home-banner-nav--outer{z-index:6}