/* Мобайл: отступы сетки товаров категории по макету — 6px между колонками, 16px между рядами.
   !important перебивает gap из настроек каталога (common/header.twig .category__block{gap:…!important}). */
@media (max-width:500px){
  .category__block:not(.list){column-gap:6px !important;row-gap:16px !important;gap:16px 6px !important;}
}
/* Пустая категория — 404-подобный центрированный герой (картинка + текст + кнопка).
   .cat-page-layout без has-left/has-right уже даёт grid 1fr → контент на всю ширину. */
.cat-page-layout--empty .cat-page-main{width:100%;}
.cat-empty-404{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;width:700px;max-width:100%;margin:40px auto 64px;text-align:center;}
.cat-empty-404__img{display:block;width:420px;max-width:100%;height:auto;object-fit:contain;}
.cat-empty-404__text{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;}
.cat-empty-404__title{margin:0;font-weight:600;font-size:32px;line-height:1.21;color:#131314;}
.cat-empty-404__subtitle{margin:0;font-weight:400;font-size:16px;line-height:1.375;color:#131314;max-width:520px;}
.cat-empty-404__btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:400px;max-width:100%;height:48px;padding:12px;background:var(--otc-btn-primary,#392923);border-radius:10px;color:var(--otc-btn-primary-text,#fff);font-weight:500;font-size:16px;line-height:1.25;text-decoration:none;transition:background .15s ease;}
.cat-empty-404__btn:hover,.cat-empty-404__btn:focus{background:var(--otc-btn-primary-hover,#4d382e);color:var(--otc-btn-primary-text,#fff);text-decoration:none;}
@media (max-width:500px){
  .cat-empty-404{gap:28px;margin:24px auto 40px;}
  .cat-empty-404__img{width:240px;}
  .cat-empty-404__title{font-size:24px;}
  .cat-empty-404__subtitle{font-size:14px;line-height:1.43;}
  .cat-empty-404__btn{width:100%;border-radius:8px;font-size:14px;}
}
/* Category SEO description — collapsible "Show more" block (Figma 1:1). */
.cat-seo{margin:24px 0 8px;}
.cat-seo__text{font-size:15px;line-height:1.6;color:#1a1a1a;position:relative;overflow:hidden;max-height:88px;transition:max-height .3s ease;}
.cat-seo__text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none;transition:opacity .2s;}
.cat-seo.is-open .cat-seo__text{max-height:none;}
.cat-seo.is-open .cat-seo__text::after{opacity:0;}
.cat-seo__text p{margin:0 0 .8em;}
.cat-seo__text p:last-child{margin-bottom:0;}
.cat-seo__toggle{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0;border:0;background:none;cursor:pointer;font-size:14px;font-weight:500;color:#1a1a1a;}
.cat-seo__chev{transition:transform .2s;}
.cat-seo.is-open .cat-seo__chev{transform:rotate(180deg);}
/* FAQ-аккордеон в SEO-описании категории. HTML приходит из описания категории (БД):
   .bcr-faq > details > (summary + .bcr-faq-a). Нативный <details> уже раскрывает ответ
   по клику — здесь только ВИД: глобальный `summary{display:block}` (stylesheet.css) убрал
   нативный треугольник и делал блок похожим на обычный текст. Рисуем свой индикатор,
   курсор-указатель и рамки, чтобы вопрос читался как раскрывающийся пункт. JS не нужен. */
.bcr-faq{display:flex;flex-direction:column;gap:10px;margin:18px 0 4px;}
.bcr-faq>h2,.bcr-faq>h3,.bcr-faq>h4{font-size:18px;font-weight:600;margin:4px 0 6px;}
.bcr-faq details{border:1px solid #e7e4e4;border-radius:10px;background:#fff;}
.bcr-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:14px 16px;margin:0;font-weight:600;font-size:15px;line-height:1.4;color:#1a1a1a;list-style:none;}
.bcr-faq summary::-webkit-details-marker{display:none;}
.bcr-faq summary::after{content:"";flex:0 0 auto;width:9px;height:9px;border-right:2px solid #6b6b6b;border-bottom:2px solid #6b6b6b;transform:rotate(45deg);transition:transform .2s;position:relative;top:-2px;}
.bcr-faq details[open] summary::after{transform:rotate(-135deg);top:2px;}
.bcr-faq summary:hover{background:#faf9f8;border-radius:10px;}
.bcr-faq-a{padding:0 16px 14px;font-size:14px;line-height:1.6;color:#4a4a4a;}
.bcr-faq-a p{margin:0 0 .6em;}
.bcr-faq-a p:last-child{margin-bottom:0;}


  #otb-swiper-10{
    max-width:1920px;    margin-left:auto;margin-right:auto;
  }
  /* 1:1 с admin Live Preview: канвас редактора (.otb-canvas) имеет border 3px
     (box-sizing:border-box → внутренняя ширина = canvas−6), и все %-позиции/ширины
     элементов считаются от ЭТОЙ внутренней ширины. На фронте .otb-slide был без
     бордера (%-база = полная ширина) → элементы пропорционально «съезжали» (тем
     заметнее, чем шире плашка / длиннее текст, напр. UK-заголовок). Даём слайду
     тот же прозрачный 3px-инсет — %-база становится идентичной редактору.
     Фон тянется под бордер (background-clip:border-box), рамки не видно. */
  #otb-swiper-10 .otb-slide{border:3px solid transparent;box-sizing:border-box;}
    @media (min-width:577px) and (max-width:991px){
    #otb-swiper-10{ max-width:100%; }
  }
  @media (max-width:576px){
    #otb-swiper-10{ max-width:375px; }
  }
        body { overflow-x: hidden; }
          @media (min-width:993px){
    .onetap-home-section:has(#otb-swiper-10){width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding:0!important;}
    .onetap-home-section:has(#otb-swiper-10) > .container,
    .onetap-home-section:has(#otb-swiper-10) > .container-fluid{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;}
        .onetap-footer .footer-row:has(#otb-swiper-10) > .container{max-width:calc(100vw - var(--otc-sbw, 0px))!important;width:calc(100vw - var(--otc-sbw, 0px))!important;margin-left:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;margin-right:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;padding-left:0!important;padding-right:0!important;}
    .onetap-footer .footer-column:has(#otb-swiper-10){max-width:100%!important;padding-left:0!important;padding-right:0!important;}
    #otb-swiper-10{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
    #otb-swiper-10 .otb-slide{max-width:100%!important;width:100%!important;margin:0!important;}
    #otb-swiper-10 [class*="otb-extra-text-"]{max-width:92%!important;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;}
    #otb-swiper-10 [class*="otb-extra-btn-"]{max-width:92%!important;word-wrap:break-word;overflow-wrap:break-word;}
  }
      @media (min-width:577px) and (max-width:992px){
    .onetap-home-section:has(#otb-swiper-10){width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding:0!important;}
    .onetap-home-section:has(#otb-swiper-10) > .container,
    .onetap-home-section:has(#otb-swiper-10) > .container-fluid{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;}
        .onetap-footer .footer-row:has(#otb-swiper-10) > .container{max-width:calc(100vw - var(--otc-sbw, 0px))!important;width:calc(100vw - var(--otc-sbw, 0px))!important;margin-left:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;margin-right:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;padding-left:0!important;padding-right:0!important;}
    .onetap-footer .footer-column:has(#otb-swiper-10){max-width:100%!important;padding-left:0!important;padding-right:0!important;}
    #otb-swiper-10{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
    #otb-swiper-10 .otb-slide{max-width:100%!important;width:100%!important;margin:0!important;}
    #otb-swiper-10 [class*="otb-extra-text-"]{max-width:92%!important;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;}
    #otb-swiper-10 [class*="otb-extra-btn-"]{max-width:92%!important;word-wrap:break-word;overflow-wrap:break-word;}
  }
      @media (max-width:576px){
    .onetap-home-section:has(#otb-swiper-10){width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding:0!important;}
    .onetap-home-section:has(#otb-swiper-10) > .container,
    .onetap-home-section:has(#otb-swiper-10) > .container-fluid{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;}
        .onetap-footer .footer-row:has(#otb-swiper-10) > .container{max-width:calc(100vw - var(--otc-sbw, 0px))!important;width:calc(100vw - var(--otc-sbw, 0px))!important;margin-left:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;margin-right:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;padding-left:0!important;padding-right:0!important;}
    .onetap-footer .footer-column:has(#otb-swiper-10){max-width:100%!important;padding-left:0!important;padding-right:0!important;}
    #otb-swiper-10{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
    #otb-swiper-10 .otb-slide{max-width:100%!important;width:100%!important;margin:0!important;}
    #otb-swiper-10 [class*="otb-extra-text-"]{max-width:92%!important;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;}
    #otb-swiper-10 [class*="otb-extra-btn-"]{max-width:92%!important;word-wrap:break-word;overflow-wrap:break-word;}
  }