/* =========================================================
   Вёрстка по БЭМ. Каждый блок самостоятелен и не знает
   о соседях: никаких вложенных селекторов вида .a .b,
   никаких отступов «наружу» у блока — ими управляет родитель.
   Элемент: block__element. Модификатор: block--modifier.
   ========================================================= */

:root{
  --sand:#F2EFE6;
  --paper:#FBF9F4;
  --paper-hi:#FFFDF8;
  --ink:#17150F;
  --mute:#6E685B;
  --jade:#1E5C48;
  --jade-dk:#153F31;
  --brass:#A8823A;
  --red:#9B3226;
  --line:#DDD7C8;

  --font-display:"Spectral",Georgia,serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --gutter:22px;
  --w-page:1120px;
  --w-text:680px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  /* плавный переход по якорям: «Наверх», ссылки на разделы товара */
  scroll-behavior:smooth;
  scroll-padding-top:20px;
}
body{
  background:var(--sand);
  color:var(--ink);
  font:400 16px/1.6 var(--font-body);
  min-height:100vh;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}

/* =================== skip-link =================== */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  padding:12px 18px;
  background:var(--jade);
  color:#F6F4EC;
  text-decoration:none;
  border-radius:0 0 3px 0;
}
.skip-link:focus{left:0}

/* =================== container =================== */
.container{
  width:100%;
  max-width:var(--w-page);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{/*max-width:var(--w-text)*/}

/* =================== section =================== */
.section{padding-block:clamp(30px,6vw,52px)}
.section--tight{padding-block:clamp(20px,4vw,30px)}
.section--last{padding-bottom:clamp(44px,9vw,84px)}
.section__title{
  font:400 clamp(23px,3.4vw,28px)/1.2 var(--font-display);
  letter-spacing:-.01em;
}
.section__text{
  margin-top:12px;
  max-width:62ch;
  color:var(--mute);
}
.section__body{margin-top:clamp(18px,3vw,26px)}

/* =================== heading =================== */
.heading{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em}
.heading--1{font-size:clamp(29px,5.4vw,44px);line-height:1.08}
.heading--2{font-size:clamp(23px,3.4vw,28px);line-height:1.2}
.heading--3{font-size:clamp(19px,2.4vw,22px);line-height:1.25}

/* =================== text =================== */
.text{color:var(--mute)}
.text--lead{
  margin-top:14px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(16px,2vw,17.5px);
  line-height:1.5;
  /*max-width:52ch;*/
}
.text--measure{max-width:62ch}

/* =================== button =================== */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 26px;
  border-radius:3px;
  font:500 15.5px/1 var(--font-body);
  text-decoration:none;
  text-align:center;
  transition:background-color .18s ease,border-color .18s ease,opacity .18s ease;
}
.button--primary{background:var(--jade);color:#F6F4EC}
.button--primary:hover{background:var(--jade-dk)}
.button--primary:disabled{opacity:.55;cursor:default}
.button--ghost{
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
}
.button--ghost:hover{border-color:var(--ink)}
.button--block{width:100%}
.button--small{min-height:42px;padding:0 18px;font-size:14px}

/* =================== divider =================== */
.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  max-width:var(--w-page);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.divider::before,.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.divider__dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--brass);
  opacity:.65;
}

/* =================== logo =================== */
.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.logo__mark{
  width:34px;
  height:34px;
  flex:none;
  transition:transform .3s ease;
}
.logo:hover .logo__mark{transform:rotate(30deg)}
.logo__text{
  font:700 13px/1 var(--font-mono);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.logo--small .logo__mark{width:28px;height:28px}
.logo--small .logo__text{font-size:12px}

@media (max-width:380px){
  .logo__mark{width:28px;height:28px}
  .logo__text{font-size:12px;letter-spacing:.18em}
}

/* =================== site-header =================== */
.site-header{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  max-width:var(--w-page);
  margin-inline:auto;
  padding:20px var(--gutter) 10px;
}
.site-header__logo{margin-right:12px}
.site-header__lang{margin-left:4px}
.site-header__badge{
  font:400 11px/1 var(--font-mono);
  letter-spacing:.08em;
  color:var(--brass);
  border:1px solid var(--brass);
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.site-header__burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  padding:0 9px;
  margin-left:auto;
}
.site-header__burger-line{
  display:block;
  height:1.5px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;
}
.site-header__burger--open .site-header__burger-line:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.site-header__burger--open .site-header__burger-line:nth-child(2){opacity:0}
.site-header__burger--open .site-header__burger-line:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* =================== site-nav =================== */
.site-nav{
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:auto;
}
.site-nav__link{
  position:relative;
  padding:4px 0;
  font-size:14.5px;
  color:var(--mute);
  text-decoration:none;
  transition:color .15s ease;
}
.site-nav__link:hover{color:var(--ink)}
.site-nav__link--current{color:var(--ink)}
.site-nav__link--current::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--jade);
}

/* =================== site-footer =================== */
.site-footer{
  max-width:var(--w-page);
  margin:clamp(40px,7vw,72px) auto 0;
  padding-inline:var(--gutter);
  border-top:1px solid var(--line);
}
.site-footer__grid{
  display:grid;
  gap:26px 20px;
  padding-block:30px 24px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.site-footer__col{
  display:flex;
  flex-direction:column;
  gap:9px;
  align-items:flex-start;
}
.site-footer__logo{margin-bottom:2px}
.site-footer__note{
  font-size:14px;
  line-height:1.55;
  color:var(--mute);
}
.site-footer__title{
  margin-bottom:2px;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.site-footer__link{
  font-size:14.5px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
  /* Длинное название категории здесь переносится, а не растягивает
     страницу вбок: на телефоне это была горизонтальная прокрутка. */
  overflow-wrap:anywhere;
}
.site-footer__link:hover{border-bottom-color:var(--line)}
.site-footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding-block:14px 26px;
  border-top:1px solid var(--line);
  font:400 11px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
}
.site-footer__top-link{color:var(--mute);text-decoration:none}
.site-footer__top-link:hover{color:var(--ink)}

/* =================== hero =================== */
.hero{padding-block:clamp(26px,5vw,44px) clamp(10px,2vw,16px)}
.hero__title{/*max-width:16ch*/}
.hero__text{margin-top:16px;} /*max-width:52ch*/
.hero__action{margin-top:clamp(20px,3vw,28px)}

/* =================== breadcrumbs =================== */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  list-style:none;
  font:400 11px/1.4 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
}
.breadcrumbs__item{display:flex;align-items:center;gap:8px}
.breadcrumbs__item::after{content:"/";opacity:.6}
.breadcrumbs__item:last-child::after{content:none}
.breadcrumbs__link{color:var(--mute);text-decoration:none}
.breadcrumbs__link:hover{color:var(--ink)}
.breadcrumbs__current{color:var(--ink)}

/* =================== category-grid =================== */
.category-grid{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  /* auto-fit, а не auto-fill: пустые колонки схлопываются и не показывают
     фон-разделитель серой полосой, когда категория всего одна. */
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

/* =================== category-card =================== */
.category-card{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:22px 20px 20px;
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  transition:background-color .22s ease,transform .22s ease;
}
.category-card:hover{background:var(--paper-hi);transform:translateY(-2px)}
.category-card__title{
  font:400 21px/1.25 var(--font-display);
  letter-spacing:-.01em;
}
.category-card__text{
  font-size:14.5px;
  line-height:1.55;
  color:var(--mute);
}
.category-card__count{
  font:400 11px/1 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
}
.category-card__more{
  margin-top:auto;
  padding-top:12px;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--jade);
}

/* =================== product-grid =================== */
.product-grid{
  display:grid;
  gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}

/* =================== product-card =================== */
.product-card{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  transition:border-color .18s ease,transform .18s ease;
}
.product-card:hover{border-color:var(--jade);transform:translateY(-2px)}
.product-card__link{
  display:flex;
  flex-direction:column;
  flex:1;
  color:var(--ink);
  text-decoration:none;
}
.product-card__media{
  /* display обязателен: у строчного span пропорция и height:100% не работают */
  display:block;
  position:relative;
  aspect-ratio:4/3;
  background:var(--sand);
  overflow:hidden;
}
.product-card__image{
  width:100%;
  height:100%;
  object-fit:cover;
}
.product-card__placeholder{
  display:grid;
  place-items:center;
  height:100%;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
}
.product-card__badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(251,249,244,.93);
  font:400 10.5px/1 var(--font-mono);
  letter-spacing:.08em;
  color:var(--brass);
}
.product-card__body{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:15px 16px 17px;
  flex:1;
}
.product-card__title{
  font:400 18px/1.25 var(--font-display);
  letter-spacing:-.01em;
}
.product-card__text{
  font-size:13.5px;
  line-height:1.5;
  color:var(--mute);
}
.product-card__price{
  display:flex;
  align-items:baseline;
  gap:9px;
  margin-top:auto;
  padding-top:10px;
  font:700 16px/1 var(--font-mono);
  letter-spacing:-.02em;
}
.product-card__old{
  font-weight:400;
  font-size:13px;
  color:var(--mute);
  text-decoration:line-through;
}

/* =================== product =================== */
.product{
  display:grid;
  gap:clamp(22px,4vw,40px);
  align-items:start;
  padding-block:clamp(10px,2vw,18px);
}
/* min-width:0 обязателен: без него колонка грида не сжимается
   уже минимальной ширины содержимого, а лента превью из шести
   снимков задаёт ей 376px и выталкивает страницу за экран. */
.product__media{position:relative;min-width:0}
.product__body{display:flex;flex-direction:column;min-width:0}
.product__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:clamp(22px,3vw,30px);
}
.product__note{
  margin-top:16px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--mute);
}
@media (min-width:900px){
  .product{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .product__media{position:sticky;top:24px}
  .product__actions{flex-direction:row;flex-wrap:wrap}
  .product__action{flex:1 1 200px}
}

/* =================== gallery =================== */
.gallery{display:block;min-width:0}
.gallery:focus-visible{outline:2px solid var(--jade);outline-offset:4px;border-radius:3px}

.gallery__stage{
  position:relative;
  aspect-ratio:4/5;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.gallery--empty .gallery__stage{aspect-ratio:4/3}

.gallery__item{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .35s ease;
}
.gallery__item--active{opacity:1}

.gallery__empty{
  display:grid;
  place-items:center;
  height:100%;
  padding:20px;
  text-align:center;
  font:400 12px/1.5 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
}

/* стрелки поверх снимка */
.gallery__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(251,249,244,.92);
  color:var(--ink);
  font-size:24px;
  line-height:1;
  box-shadow:0 2px 10px rgba(23,21,15,.14);
  opacity:0;
  transition:opacity .2s ease,background-color .15s ease;
}
.gallery__arrow--prev{left:12px}
.gallery__arrow--next{right:12px}
.gallery__arrow:hover{background:var(--paper-hi)}
.gallery:hover .gallery__arrow,
.gallery__arrow:focus-visible{opacity:1}

.gallery__counter{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(23,21,15,.62);
  color:#F6F4EC;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.06em;
}

/* лента превью: прокручивается сама, страницу не растягивает */
.gallery__thumbs{
  display:flex;
  gap:8px;
  margin-top:10px;
  min-width:0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:2px;
}
.gallery__thumbs::-webkit-scrollbar{display:none}
.gallery__thumb{
  flex:0 0 68px;
  width:68px;
  scroll-snap-align:center;
  aspect-ratio:1/1;
  padding:0;
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  background:var(--paper);
  opacity:.62;
  transition:opacity .15s ease,border-color .15s ease;
}
.gallery__thumb:hover{opacity:1}
.gallery__thumb--active{opacity:1;border-color:var(--jade)}
.gallery__thumb-image{width:100%;height:100%;object-fit:cover}

/* =================== price =================== */
.price{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-top:clamp(18px,3vw,26px);
}
.price__current{
  font:700 clamp(27px,4vw,33px)/1 var(--font-mono);
  letter-spacing:-.03em;
}
.price__currency{font:400 15px/1 var(--font-mono);color:var(--mute)}
.price__old{font:400 16px/1 var(--font-mono);color:var(--mute)}
.price__discount{
  padding:5px 9px;
  border-radius:999px;
  background:var(--jade);
  color:#F6F4EC;
  font:700 11.5px/1 var(--font-mono);
  letter-spacing:.04em;
}

/* =================== picker =================== */
.picker{margin-top:clamp(18px,3vw,26px)}
.picker__label{
  display:block;
  margin-bottom:10px;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.picker__list{display:flex;gap:8px;flex-wrap:wrap}
.picker__option{
  padding:11px 17px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--paper);
  font-size:14.5px;
  transition:border-color .15s ease,background-color .15s ease;
}
.picker__option:hover{border-color:var(--mute)}
.picker__option--active{border-color:var(--jade);background:var(--paper-hi)}

/* =================== counter =================== */
.counter{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--paper);
  overflow:hidden;
}
.counter__button{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  font-size:19px;
  color:var(--mute);
  transition:background-color .15s ease,color .15s ease;
}
.counter__button:hover{background:var(--sand);color:var(--ink)}
.counter__value{
  min-width:48px;
  text-align:center;
  font:700 16px/1 var(--font-mono);
}

/* =================== features =================== */
.features{
  list-style:none;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.features__item{
  padding:14px 17px;
  background:var(--paper);
  font-size:15px;
  line-height:1.5;
}

/* =================== specs =================== */
.specs{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.specs__row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:13px 17px;
  background:var(--paper);
  font-size:15px;
}
.specs__key{color:var(--mute)}
.specs__value{text-align:right}

/* =================== faq =================== */
.faq{
  border-bottom:1px solid var(--line);
}
.faq__question{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:16px 0;
  font-size:15.5px;
  cursor:pointer;
  list-style:none;
}
.faq__question::-webkit-details-marker{display:none}
.faq__question::after{content:"+";color:var(--mute);font-size:18px}
.faq[open] .faq__question::after{content:"−"}
.faq__answer{
  padding-bottom:18px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--mute);
  max-width:62ch;
}

/* =================== order-bar =================== */
.order-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:rgba(251,249,244,.94);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .3s ease;
}
.order-bar--visible{transform:none}
.order-bar__price{
  flex:1;
  font:700 19px/1 var(--font-mono);
  letter-spacing:-.02em;
}
.order-bar__button{min-height:48px;padding:0 28px}

/* =================== modal =================== */
.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(23,21,15,.55);
  animation:modal-fade .25s ease;
}
.modal__window{
  position:relative;
  width:100%;
  max-width:460px;
  max-height:92vh;
  overflow:auto;
  padding:26px 22px calc(22px + env(safe-area-inset-bottom));
  background:var(--paper);
  border-radius:5px 5px 0 0;
  animation:modal-rise .28s cubic-bezier(.2,.8,.3,1);
}
.modal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:17px;
  color:var(--mute);
}
.modal__close:hover{color:var(--ink)}
.modal__title{
  padding-right:40px;
  font:400 24px/1.2 var(--font-display);
  letter-spacing:-.01em;
}
.modal__summary{
  margin-block:12px 20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
  line-height:1.5;
  color:var(--mute);
}
@media (min-width:620px){
  .modal{align-items:center}
  .modal__window{border-radius:5px;padding-bottom:28px}
}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes modal-rise{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}

/* =================== form =================== */
.form__field{display:block;margin-bottom:14px}
.form__label{
  display:block;
  margin-bottom:7px;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.form__input,.form__textarea{
  width:100%;
  padding:13px 14px;
  font:400 16px/1.4 var(--font-body);
  color:var(--ink);
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:3px;
  transition:border-color .15s ease;
}
.form__textarea{resize:vertical;min-height:62px}
.form__input:focus,.form__textarea:focus{outline:none;border-color:var(--jade)}
.form__error{
  margin:4px 0 12px;
  font-size:13.5px;
  color:var(--red);
}
.form__trap{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form__submit{margin-top:10px}

/* =================== success =================== */
.success{text-align:center;padding-block:14px}
.success__mark{
  width:56px;
  height:56px;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--jade);
  color:#F6F4EC;
  font-size:25px;
}
.success__title{
  margin-bottom:8px;
  font:400 24px/1.2 var(--font-display);
}
.success__text{
  margin-bottom:24px;
  font-size:15px;
  color:var(--mute);
}

/* =================== empty =================== */
.empty{
  padding:20px;
  background:var(--paper);
  border:1px dashed var(--line);
  border-radius:3px;
  color:var(--mute);
  font-size:15px;
  line-height:1.55;
}

/* =================== page =================== */
/* страница товара резервирует место под липкую полосу */
.page--product{padding-bottom:88px}

/* =================== адаптив =================== */
@media (max-width:860px){
  .product__media{position:static}
}
/* На сенсорных экранах наведения нет — показываем стрелки сразу. */
@media (hover:none){
  .gallery__arrow{opacity:1}
}
@media (max-width:620px){
  :root{--gutter:18px}
  .site-header{position:relative}
  .site-header__burger{display:flex;margin-left:0}
  .site-header__lang{margin-left:auto}
  .site-nav{
    display:none;
    order:9;
    width:100%;
    margin:10px 0 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-top:1px solid var(--line);
  }
  .site-nav--open{display:flex}
  .site-nav__link{
    padding:14px 0;
    font-size:16px;
    border-bottom:1px solid var(--line);
  }
  .site-nav__link:last-child{border-bottom:0}
  .site-nav__link--current::after{display:none}
  .category-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .product-card__title{font-size:16px}
  .product-card__body{padding:12px 13px 14px}
  .gallery__stage{aspect-ratio:1/1}
  .gallery__thumb{flex-basis:56px;width:56px}
  .specs__row{flex-direction:column;gap:3px}
  .specs__value{text-align:left}
}
@media (max-width:340px){
  .product-grid{grid-template-columns:1fr}
  .order-bar__button{padding:0 20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html,.gallery__thumbs,.messengers--header{scroll-behavior:auto}
}

/* =================== prose =================== */
/* Текстовый блок для SEO-описаний внизу категории. */
.prose{max-width:68ch;color:var(--mute);font-size:15.5px;line-height:1.7}
.prose p+p{margin-top:14px}

/* =================== form__select =================== */
.form__select{
  width:100%;
  padding:13px 14px;
  font:400 16px/1.4 var(--font-body);
  color:var(--ink);
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:3px;
  transition:border-color .15s ease;
}
.form__select:focus{outline:none;border-color:var(--jade)}
.form__select:disabled{color:var(--mute);opacity:.75}

/* =================== combo =================== */
/* Поле с автоподсказкой: ввод плюс выпадающий список. */
.combo{position:relative}
.combo__list{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:5;
  max-height:252px;
  overflow-y:auto;
  margin:0;
  padding:4px;
  list-style:none;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 10px 28px rgba(23,21,15,.14);
}
.combo__option{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border-radius:2px;
  cursor:pointer;
}
.combo__option:hover,
.combo__option--active{background:var(--sand)}
.combo__name{font-size:15px;color:var(--ink)}
.combo__area{
  font:400 11px/1 var(--font-mono);
  letter-spacing:.06em;
  color:var(--mute);
  white-space:nowrap;
}
.combo__hint{
  margin-top:6px;
  font-size:13px;
  color:var(--mute);
}

/* =================== lang =================== */
/* Переключатель языка: две короткие подписи, активная подчёркнута. */
.lang{display:inline-flex;align-items:center;gap:2px}
.lang__item{
  padding:6px 9px;
  border-radius:3px;
  font:700 11px/1 var(--font-mono);
  letter-spacing:.12em;
  color:var(--mute);
  text-decoration:none;
  transition:color .15s ease,background-color .15s ease;
}
.lang__item:hover{color:var(--ink);background:var(--paper)}
.lang__item--current{color:var(--ink);background:var(--paper);box-shadow:inset 0 -2px 0 var(--jade)}

/* =================== артикул =================== */
.product__sku{
  margin-top:10px;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
}
.product__sku-value{color:var(--ink)}
.product-card__sku{
  font:400 10.5px/1 var(--font-mono);
  letter-spacing:.1em;
  color:var(--mute);
}

/* =================== category-card с картинкой =================== */
.category-card--with-image{padding:0}
/* Пропорция 16:9 задаёт высоту от ширины карточки. Когда категория
   одна, карточка растягивается на всю страницу и снимок вырастает
   до шестисот пикселей — поэтому высоту ограничиваем сверху.
   На узких карточках ограничение не срабатывает и пропорция живая. */
.category-card__media{
  display:block;
  aspect-ratio:16/9;
  max-height:230px;
  background:var(--sand);
  overflow:hidden;
}
.category-card__image{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.category-card--with-image:hover .category-card__image{transform:scale(1.03)}
.category-card__body{
  display:flex;
  flex-direction:column;
  gap:7px;
  flex:1;
}
.category-card--with-image .category-card__body{padding:18px 20px 20px}

/* =================== шапка страницы категории =================== */
.cat-head{display:block}
.cat-head__body{display:block}
.cat-head__media{
  margin-bottom:18px;
  border-radius:3px;
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:16/7;
  max-height:300px;
  background:var(--paper);
}
.cat-head__image{width:100%;height:100%;object-fit:cover}

@media (min-width:860px){
  .cat-head--with-image{
    display:grid;
    grid-template-columns:minmax(0,320px) minmax(0,1fr);
    gap:28px;
    align-items:center;
  }
  .cat-head--with-image .cat-head__media{margin-bottom:0;aspect-ratio:4/3}
}

/* =================== messengers ===================
   Ссылки на мессенджеры. Цвет сервиса приходит в --msg-color
   из разметки, чтобы блок не знал заранее, кого выводят. */
.messengers{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.messengers__item{display:block}
.messengers__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--ink);
  transition:color .15s ease,background-color .15s ease,border-color .15s ease;
}
.messengers__dot{
  flex:none;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--msg-color,var(--jade));
}
.messengers__name{white-space:nowrap}

/* в шапке — узкие контурные пилюли, всегда одной строкой.
   Если строка не влезает, она прокручивается внутри себя,
   а не ломает ширину страницы. */
.messengers--header{
  gap:6px;
  flex-wrap:nowrap;
  min-width:0;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:1px;
}
.messengers--header::-webkit-scrollbar{display:none}
.messengers--header .messengers__item{flex:none}
.messengers--header .messengers__link{
  padding:6px 11px 6px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  font:500 12.5px/1 var(--font-body);
}
.messengers--header .messengers__link:hover{
  border-color:var(--msg-color,var(--jade));
  color:var(--msg-color,var(--jade));
}
.messengers--header .messengers__dot{width:7px;height:7px}

/* в подвале — строчки списком */
.messengers--footer{flex-direction:column;gap:7px;align-items:flex-start}
.messengers--footer .messengers__link{font-size:14.5px}
.messengers--footer .messengers__link:hover{color:var(--msg-color,var(--jade))}

/* на странице контактов — крупные заливные кнопки */
.messengers--page{gap:10px}
.messengers--page .messengers__link{
  padding:13px 20px;
  border-radius:3px;
  background:var(--msg-color,var(--jade));
  color:#fff;
  font:500 15px/1 var(--font-body);
}
.messengers--page .messengers__link:hover{filter:brightness(1.07)}
.messengers--page .messengers__dot{background:rgba(255,255,255,.85)}

/* =================== hours =================== */
.hours{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.hours__label{
  font:400 11px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
}
.hours__value{font-weight:700;color:var(--ink)}
.hours--compact{font-size:13px}
.hours--plain{font-size:14.5px}

/* =================== info ===================
   Пояснение «почему только мессенджеры». Раскрывается
   без JS, на одном <details>. */
.info{position:relative;display:inline-block}
.info__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  cursor:pointer;
  list-style:none;
  transition:border-color .15s ease,color .15s ease;
}
.info__mark::-webkit-details-marker{display:none}
.info__mark:hover{border-color:var(--jade);color:var(--jade)}
.info__glyph{
  font:700 12px/1 var(--font-display);
  font-style:italic;
  color:inherit;
}
.info__panel{
  position:absolute;
  z-index:30;
  top:calc(100% + 10px);
  right:0;
  width:min(300px,calc(100vw - 36px));
  padding:16px 18px;
  background:var(--paper-hi);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 10px 30px rgba(23,21,15,.13);
}
.info__title{
  margin-bottom:9px;
  font:600 13.5px/1.4 var(--font-body);
  color:var(--ink);
}
.info__list{margin:0;padding:0;list-style:none}
.info__point{
  position:relative;
  padding-left:15px;
  font-size:13px;
  line-height:1.5;
  color:var(--mute);
}
.info__point+.info__point{margin-top:7px}
.info__point::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--brass);
}
/* на странице раскрываем вниз по потоку, без наложения */
.info--plain .info__panel{position:static;width:100%;margin-top:10px;box-shadow:none}

/* =================== contact-card =================== */
.contact-card{
  display:grid;
  gap:22px 28px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding:24px 26px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
}
.contact-card__group{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.contact-card__label{
  font:400 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.contact-card__value{font-size:17px;font-weight:500}
.contact-card__note{font-size:13px;line-height:1.5;color:var(--mute)}
.contact-card__why{display:flex;align-items:center;gap:10px;margin-top:16px}
.contact-card__why-text{font-size:14px;color:var(--mute)}

/* =================== requisites =================== */
.requisites{
  padding:20px 22px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
}
.requisites__title{
  margin-bottom:14px;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.requisites__list{margin:0}
.requisites__row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.requisites__row:last-child{border-bottom:0}
.requisites__key{color:var(--mute);font-size:14.5px}
.requisites__value{margin:0;text-align:right;font-size:14.5px}

/* =================== doc ===================
   Текст правовых страниц. Классы задаёт content/pages.php. */
.doc{display:flex;flex-direction:column;gap:14px}
.doc__heading{
  margin-top:16px;
  font:600 19px/1.3 var(--font-display);
  color:var(--ink);
}
.doc__heading:first-child{margin-top:0}
.doc__text{max-width:68ch;font-size:15.5px;line-height:1.7;color:var(--ink)}
.doc__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.doc__item{
  position:relative;
  padding-left:18px;
  font-size:15.5px;
  line-height:1.6;
}
.doc__item::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--brass);
}
.doc__steps{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:step;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.doc__step{
  counter-increment:step;
  position:relative;
  padding-left:34px;
  font-size:15.5px;
  line-height:1.6;
}
.doc__step::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:1px;
  width:23px;
  height:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--jade);
  color:#F6F4EC;
  font:700 12px/1 var(--font-mono);
}

/* =================== link =================== */
.link{color:var(--jade);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--jade-dk)}

/* =================== button--tg =================== */
.button--tg{
  background:#229ED9;
  color:#fff;
  border:1px solid #229ED9;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.button--tg:hover{background:#1b8ec4;border-color:#1b8ec4}

/* =================== подсказки в форме и на товаре =================== */
.form__hint{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--mute);
}
.product__hint{
  margin-top:10px;
  font-size:13px;
  line-height:1.5;
  color:var(--mute);
}

/* =================== контакты в шапке =================== */
.site-header__contacts{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}

/* =================== счётчик в подвале =================== */
/* Счётчик невидимый: пиксель 1×1. Блок держим нулевой высоты, иначе
   этот пиксель добавил бы подвалу лишнюю строку. Не display:none —
   скрытую картинку часть браузеров не грузит, и счёт бы не шёл. */
.site-footer__counter{
  display:block;
  height:0;
  overflow:hidden;
  line-height:0;
  font-size:0;
}

/* =================== адаптив новых блоков =================== */
@media (max-width:980px){
  /* «ПРАЦЮЄМО» убираем, часы оставляем — строка и так узкая */
  .hours__label{display:none}
  .messengers--header .messengers__link{padding:5px 10px 5px 8px;font-size:12px}
  .hours--plain .hours__label{display:inline}
}
@media (max-width:620px){
  .site-header__contacts{
    order:8;
    width:100%;
    min-width:0;
    margin-left:0;
    padding-top:12px;
    border-top:1px solid var(--line);
    justify-content:flex-start;
  }
  .contact-card{padding:20px 18px;grid-template-columns:1fr}
  .requisites__row{flex-direction:column;gap:2px}
  .requisites__value{text-align:left}
  .site-footer__bottom{flex-wrap:wrap;gap:10px}
}
@media (max-width:420px){
  /* на узком экране часам в шапке места нет: они есть в подвале и в контактах */
  .hours--compact{display:none}
}
@media (max-width:340px){
  .messengers--page .messengers__link{width:100%}
}

/* =================== плавность =================== */
/* Появления, которые раньше были мгновенными: выпадающее меню,
   подсказка «i», ответ в FAQ. Все уважают prefers-reduced-motion
   через общее правило выше. */
@keyframes soft-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes soft-fade{from{opacity:0}to{opacity:1}}

.info__panel{animation:soft-in .18s ease}
.site-nav--open{animation:soft-in .22s ease}
.faq__answer{animation:soft-fade .2s ease}
.combo__list{animation:soft-in .15s ease}

/* Превью и кнопки: мягче реакция на наведение и нажатие.
   Карточки товара и категории свои переходы уже имеют — не трогаем,
   иначе перезапишем им список свойств. */
.gallery__thumb{transition:opacity .2s ease,border-color .2s ease,transform .2s ease}
.gallery__thumb:active{transform:scale(.96)}
.button{transition:background-color .18s ease,border-color .18s ease,opacity .18s ease,transform .12s ease}
.button:active{transform:scale(.985)}
.counter__button{transition:background-color .15s ease,color .15s ease,transform .12s ease}
.counter__button:active{transform:scale(.9)}

/* =================== catalog ===================
   Раскладка страницы категории: слева подкатегории и фильтр,
   справа сетка товаров. Без левой колонки блок просто одноколоночный. */
.catalog{
  display:grid;
  gap:clamp(20px,3vw,34px);
  grid-template-columns:minmax(0,230px) minmax(0,1fr);
  align-items:start;
}
.catalog--plain{grid-template-columns:minmax(0,1fr)}
.catalog__side{display:flex;flex-direction:column;gap:20px;min-width:0}
.catalog__main{min-width:0}
.catalog__count{
  margin-bottom:16px;
  font-size:14px;
  color:var(--mute);
}
.catalog__note{color:var(--mute)}

/* =================== side-nav =================== */
.side-nav{display:flex;flex-direction:column;gap:1px}
.side-nav__title{
  margin-bottom:8px;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.side-nav__link{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  margin-inline:-10px;
  border-radius:3px;
  color:var(--ink);
  text-decoration:none;
  font-size:14.5px;
  transition:background-color .15s ease,color .15s ease;
}
.side-nav__link:hover{background:var(--paper);color:var(--jade)}
.side-nav__name{min-width:0}
.side-nav__count{
  flex:none;
  font:400 11px/1 var(--font-mono);
  color:var(--mute);
}

/* =================== facets =================== */
.facets{min-width:0}
/* На широком экране фильтр всегда раскрыт, заголовок-кнопка не нужен. */
.facets__summary{display:none}
.facets__body{display:flex;flex-direction:column;gap:20px}
.facets__reset{
  align-self:flex-start;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.facets__reset:hover{border-bottom-color:currentColor}
.facets__badge{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--jade);
  color:#F6F4EC;
  font:700 11px/1 var(--font-mono);
}

/* =================== facet =================== */
.facet{border:0;margin:0;padding:0;min-width:0}
.facet__title{
  margin-bottom:9px;
  padding:0;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.facet__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.facet__item{min-width:0}
.facet__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  margin-inline:-10px;
  border-radius:3px;
  color:var(--ink);
  text-decoration:none;
  font-size:14.5px;
  transition:background-color .15s ease;
}
.facet__link:hover{background:var(--paper)}
.facet__box{
  position:relative;
  flex:none;
  width:17px;
  height:17px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--paper-hi);
  transition:background-color .15s ease,border-color .15s ease;
}
.facet__link--on .facet__box{background:var(--jade);border-color:var(--jade)}
.facet__link--on .facet__box::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:4px;
  height:8px;
  border:solid #F6F4EC;
  border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.facet__name{flex:1;min-width:0;line-height:1.35}
.facet__count{
  flex:none;
  font:400 11px/1 var(--font-mono);
  color:var(--mute);
}
.facet__link--on .facet__name{font-weight:700}

/* =================== подкатегории на карточке =================== */
.category-card__kids{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.category-card__kid{
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-hi);
  font-size:12px;
  color:var(--mute);
}
.category-card__kid--more{border-style:dashed}

/* =================== адаптив каталога =================== */
@media (max-width:900px){
  .catalog{grid-template-columns:minmax(0,1fr)}
  .catalog__side{gap:14px}
  .facets{
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--paper);
  }
  .facets__summary{
    display:flex;
    align-items:center;
    gap:9px;
    padding:13px 15px;
    cursor:pointer;
    list-style:none;
    font:400 11px/1 var(--font-mono);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink);
  }
  .facets__summary::-webkit-details-marker{display:none}
  .facets__summary::after{
    content:"";
    margin-left:auto;
    width:7px;
    height:7px;
    border:solid var(--mute);
    border-width:0 1.5px 1.5px 0;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .2s ease;
  }
  .facets[open] .facets__summary::after{transform:rotate(-135deg) translateY(-2px)}
  .facets__body{
    padding:4px 15px 16px;
    animation:soft-in .18s ease;
  }
  .side-nav__link{margin-inline:0;padding-inline:0}
  .facet__link{margin-inline:0;padding-inline:0}
}

/* =================== loader ===================
   Крутилка под стать магазину: кольцо из намистин,
   подсветка бежит по кругу. Восемь элементов в разметке,
   положение задаёт поворот, анимируется только прозрачность. */
.loader{
  position:relative;
  display:block;
  width:46px;
  height:46px;
}
.loader__bead{
  position:absolute;
  top:50%;
  left:50%;
  width:7px;
  height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--jade);
  opacity:.16;
  animation:bead-glow 1.1s linear infinite;
}
.loader__bead:nth-child(1){transform:rotate(0deg)   translateY(-18px);animation-delay:0s}
.loader__bead:nth-child(2){transform:rotate(45deg)  translateY(-18px);animation-delay:.1375s}
.loader__bead:nth-child(3){transform:rotate(90deg)  translateY(-18px);animation-delay:.275s}
.loader__bead:nth-child(4){transform:rotate(135deg) translateY(-18px);animation-delay:.4125s}
.loader__bead:nth-child(5){transform:rotate(180deg) translateY(-18px);animation-delay:.55s}
.loader__bead:nth-child(6){transform:rotate(225deg) translateY(-18px);animation-delay:.6875s}
.loader__bead:nth-child(7){transform:rotate(270deg) translateY(-18px);animation-delay:.825s}
.loader__bead:nth-child(8){transform:rotate(315deg) translateY(-18px);animation-delay:.9625s}
@keyframes bead-glow{
  0%,72%,100%{opacity:.16}
  36%{opacity:1}
}

/* =================== подгрузка списка =================== */
.catalog__main{position:relative}
.catalog__loader{
  position:absolute;
  z-index:6;
  inset:0;
  display:grid;
  justify-items:center;
  align-content:start;
  padding-top:clamp(60px,14vh,140px);
  background:color-mix(in srgb, var(--sand) 76%, transparent);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
/* Браузеры без color-mix получат тот же фон без прозрачности слоя. */
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .catalog__loader{background:rgba(242,239,230,.8)}
}
.catalog__main--loading .catalog__loader{opacity:1;visibility:visible}
.catalog__main--loading .catalog__content{opacity:.45;transition:opacity .2s ease}

.catalog__content{opacity:1}
.catalog__content--in{animation:soft-in .28s ease}

/* =================== chips ===================
   Выбранные фильтры над списком: видно, что включено,
   и каждый снимается одним нажатием. */
.chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}
.chips__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px 6px 12px;
  border:1px solid var(--jade);
  border-radius:999px;
  background:var(--paper-hi);
  color:var(--jade-dk);
  text-decoration:none;
  font-size:13.5px;
  line-height:1.2;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.chips__item:hover{background:var(--jade);color:#F6F4EC}
.chips__label{min-width:0}
.chips__x{font-size:16px;line-height:1;opacity:.7}
.chips__item:hover .chips__x{opacity:1}
.chips__reset{
  margin-left:4px;
  font:400 11px/1 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.chips__reset:hover{border-bottom-color:currentColor}

@media (prefers-reduced-motion:reduce){
  /* Без этого правило «длительность .01мс» превратило бы
     плавное мерцание в частое моргание. */
  .loader__bead{animation:none!important;opacity:.5}
}

/* =================== раскрытие фасета =================== */
.facet__more{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:8px;
  padding:4px 0;
  font-size:13.5px;
  color:var(--jade);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease,opacity .15s ease;
}
.facet__more:hover{border-bottom-color:currentColor}
.facet__more--busy{opacity:.5;pointer-events:none}
.facet__more-n{
  font:400 11px/1 var(--font-mono);
  color:var(--mute);
}
/* Догруженные значения проявляются, а не возникают рывком. */
.facet__item--in{animation:soft-in .22s ease both}

/* =================== показать ещё =================== */
.more-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:clamp(22px,3vw,32px);
}
.more-bar__button{
  min-width:min(320px,100%);
  gap:10px;
}
.more-bar__button--busy{opacity:.6;pointer-events:none}
.more-bar__rest{
  font:400 11px/1 var(--font-mono);
  opacity:.75;
}
.more-bar__note{
  font:400 11px/1 var(--font-mono);
  letter-spacing:.1em;
  color:var(--mute);
}
.product-card--in{animation:soft-in .26s ease both}

/* =================== свёртка списка характеристик =================== */
.facets__list{display:flex;flex-direction:column;gap:20px}
.facets__more{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:18px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-hi);
  font-size:13.5px;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .15s ease,color .15s ease,opacity .15s ease;
}
.facets__more:hover{border-color:var(--jade);color:var(--jade)}
.facets__more--busy{opacity:.5;pointer-events:none}
.facets__more-n{font:400 11px/1 var(--font-mono);color:var(--mute)}
.facet--in{animation:soft-in .24s ease both}

/* =================== нет в наличии =================== */
/* Закончившийся товар — чёрно-белый: в карточке, в галерее, в цене.
   Модификаторы стоят на самих элементах, без вложенных селекторов. */
.product-card__media--out{filter:grayscale(1);opacity:.78}
.product-card__badge--out{color:var(--mute)}
.product-card__price--out{color:var(--mute)}
.gallery--out{filter:grayscale(1)}
.price--out{color:var(--mute)}
.stock-note{
  margin-top:clamp(18px,2.5vw,24px);
  font:400 12px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
}

/* =================== остаток из выгрузки =================== */
/* «Осталось N шт»: на карточке — в правом верхнем углу фото,
   на странице товара — под ценой. */
.product-card__stock{
  position:absolute;
  top:10px;
  right:10px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(251,249,244,.93);
  font:400 10.5px/1 var(--font-mono);
  letter-spacing:.08em;
  color:var(--red);
}
.stock-left{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  margin-top:12px;
  font:400 12px/1 var(--font-mono);
  letter-spacing:.08em;
  color:var(--red);
}
.stock-left::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
}


/* =================== категории лентой на телефоне ===================
   Правила живут в конце файла намеренно: базовые стили карточки
   описаны ниже по тексту, и из середины медиа-блок их не перебивал бы —
   у них одинаковая специфичность, выигрывает тот, кто позже. */
@media (max-width:620px){
  /* Крупной сеткой категории занимали полтора экрана, и до товаров
     приходилось долго листать. Теперь — лента, прокручивается пальцем. */
  .category-grid{
    display:flex;
    grid-template-columns:none;
    gap:10px;
    padding-bottom:2px;
    background:none;
    border:0;
    border-radius:0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .category-grid::-webkit-scrollbar{display:none}

  .category-card{
    flex:0 0 120px;
    width:120px;
    gap:0;
    padding:0;
    background:none;
    scroll-snap-align:start;
  }
  .category-card:hover{background:none;transform:none}
  .category-card--with-image{padding:0}

  .category-card__media{
    aspect-ratio:1/1;
    max-height:none;
    border:1px solid var(--line);
    border-radius:10px;
  }
  /* Подпись прижата к низу — тогда у плиток без картинки
     названия стоят на одной линии с остальными. */
  .category-card__body,
  .category-card--with-image .category-card__body{
    margin-top:auto;
    padding:8px 2px 0;
  }
  /* Длинное слово («Електропростирадла») шире плитки и раньше вылезало
     поверх соседней подписи. Переносим: сначала по слогам, а если
     браузер переносов не знает — по буквам. Больше трёх строк не
     показываем, иначе одно длинное название растянет всю ленту. */
  .category-card__title{
    font-size:13px;
    line-height:1.3;
    hyphens:auto;
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }
  .category-card__text,
  .category-card__count,
  .category-card__more,
  .category-card__kids{display:none}
}

/* =================== pager ===================
   Номера страниц рядом с кнопкой «показати ще». Кнопка дописывает
   следующую порцию, номер — перескакивает сразу на нужную. */
.pager{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin-top:clamp(18px,2.5vw,26px);
}
.pager__item,
.pager__step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  font:400 14px/1 var(--font-mono);
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.pager__item:hover,
.pager__step:hover{border-color:var(--jade);color:var(--jade)}
.pager__item--current{
  background:var(--jade);
  border-color:var(--jade);
  color:#F6F4EC;
  font-weight:700;
}
.pager__item--current:hover{color:#F6F4EC}
.pager__step--off{opacity:.35;pointer-events:none}
.pager__gap{
  min-width:20px;
  text-align:center;
  color:var(--mute);
  font:400 14px/1 var(--font-mono);
}
@media (max-width:420px){
  .pager__item,
  .pager__step{min-width:34px;height:34px;padding:0 8px;font-size:13px}
}

/* Бегунок на месте кнопки «показати ще»: список не гасим,
   показанные товары остаются читаемыми. */
.more-bar__loader{display:none}
.more-bar--busy .more-bar__button{display:none}
.more-bar--busy .more-bar__loader{display:block}
.loader--small{width:34px;height:34px}
.loader--small .loader__bead{width:5px;height:5px;margin:-2.5px 0 0 -2.5px}
.loader--small .loader__bead:nth-child(1){transform:rotate(0deg)   translateY(-13px)}
.loader--small .loader__bead:nth-child(2){transform:rotate(45deg)  translateY(-13px)}
.loader--small .loader__bead:nth-child(3){transform:rotate(90deg)  translateY(-13px)}
.loader--small .loader__bead:nth-child(4){transform:rotate(135deg) translateY(-13px)}
.loader--small .loader__bead:nth-child(5){transform:rotate(180deg) translateY(-13px)}
.loader--small .loader__bead:nth-child(6){transform:rotate(225deg) translateY(-13px)}
.loader--small .loader__bead:nth-child(7){transform:rotate(270deg) translateY(-13px)}
.loader--small .loader__bead:nth-child(8){transform:rotate(315deg) translateY(-13px)}