/* Onetap SEO Filter — clean sidebar look matching the reference (Filter by category, Price slider, Material, Color, Features). */
.osf { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:8px 18px; font-size:14px; color:#1a1a1a; font-family:inherit; }
.osf * { box-sizing:border-box; }
.osf__head { display:flex; align-items:center; justify-content:space-between; padding:14px 0 10px; border-bottom:1px solid rgba(0,0,0,.06); margin-bottom:4px; }
.osf__title { font-size:15px; font-weight:600; margin:0; text-transform:none; letter-spacing:0; }
/* Sidebar "reset all" stays in the DOM (the content-area "Remove filters" button triggers
   it programmatically) but is hidden — the visible clear-all control is "Remove filters". */
.osf__reset { display:none !important; }
.osf__reset:hover { color:#e74c3c; }
.osf-chips { display:flex; flex-wrap:wrap; gap:6px; padding:10px 0 0; }
.osf-chips:empty { padding:0; }
.osf-chip-tag { display:inline-flex; align-items:center; gap:6px; padding:4px 8px 4px 10px; background:#1a1a1a; color:#fff; border-radius:999px; font-size:12px; }
.osf-chip-tag__x { background:none; border:0; color:#fff; cursor:pointer; font-size:15px; line-height:1; padding:0 2px; }

.osf-group { border:0; padding:14px 0; margin:0; border-bottom:1px solid rgba(0,0,0,.08); }
.osf-group:last-of-type { border-bottom:0; }
/* <summary> (osf-group__title): strip the native disclosure triangle cross-browser */
.osf-group__title { display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:600; cursor:pointer; margin:0; padding:0; width:100%; color:#1a1a1a; user-select:none; list-style:none; -webkit-tap-highlight-color:transparent; }
.osf-group__title::-webkit-details-marker { display:none; }
.osf-group__title::marker { content:''; }
.osf-group__title:focus-visible { outline:2px solid #337ab7; outline-offset:2px; }
.osf-group__caret { transition:transform .2s; color:#1a1a1a; font-size:14px; }
/* Native <details> handles body visibility; chevron just follows [open] state */
.osf-group[open] > .osf-group__body { /* visible by default */ }
.osf-group:not([open]) > .osf-group__body { display:none; }
.osf-group[open] > .osf-group__title .osf-group__caret { transform:rotate(180deg); }
.osf-group__body { padding-top:14px; }
.osf-search { display:block; width:100%; padding:9px 12px; border:1px solid #d8d8d8; border-radius:8px; font-size:13px; color:#1a1a1a; margin-bottom:10px; background:#fff; outline:none; }
.osf-search:focus { border-color:#1a1a1a; }

.osf-list { display:flex; flex-direction:column; gap:6px; }
.osf-item { position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 0; margin:0; user-select:none; font-size:14px; color:#1a1a1a; }
.osf-item input { position:absolute; opacity:0; pointer-events:none; }
.osf-item__box { width:18px; height:18px; border-radius:3px; border:1.5px solid #cdcdcd; display:inline-flex; align-items:center; justify-content:center; color:transparent; font-size:11px; flex:0 0 auto; transition:all .15s; background:#fff; }
.osf-item__box--radio { border-radius:50%; }
.osf-item.is-checked .osf-item__box { background:#1a1a1a; border-color:#1a1a1a; color:#fff; }
.osf-item.is-checked .osf-item__box--radio { background:#fff; }
.osf-item.is-checked .osf-item__box--radio::after { content:''; width:10px; height:10px; border-radius:50%; background:#1a1a1a; display:block; }
.osf-item__label { flex:1 1 auto; }
.osf-item__logo { flex:0 0 auto; width:42px; height:24px; object-fit:contain; object-position:left center; }
.osf-item__count { color:#9a9a9a; font-size:13px; font-weight:400; }
.osf-item.is-disabled { opacity:.45; cursor:not-allowed; }
.osf-item:focus-within { outline:2px solid #337ab7; outline-offset:2px; border-radius:4px; }
.osf-show-all { display:inline-flex; align-items:center; gap:6px; color:#1a1a1a; cursor:pointer; padding:8px 0 0; font-size:13px; font-weight:500; background:none; border:0; }
.osf-show-all::before { content:'+'; font-size:16px; font-weight:400; }
.osf-show-all.is-expanded::before { content:'−'; }

.osf-swatches { display:flex; flex-wrap:wrap; gap:6px; }
.osf-swatch { position:relative; display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border-radius:999px; border:1px solid rgba(0,0,0,.1); cursor:pointer; margin:0; user-select:none; }
.osf-swatch input { position:absolute; opacity:0; pointer-events:none; }
.osf-swatch__dot { width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.15); flex:0 0 auto; }
.osf-swatch.is-checked { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }

.osf-images { display:grid; grid-template-columns:repeat(auto-fit, minmax(80px, 1fr)); gap:8px; }
.osf-image { cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; border:1.5px solid transparent; border-radius:6px; padding:4px; }
.osf-image input { position:absolute; opacity:0; pointer-events:none; }
.osf-image img, .osf-image__fallback { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; }
.osf-image.is-checked { border-color:#1a1a1a; }
.osf-image__label { font-size:12px; text-align:center; }

.osf-chips-row, .osf-presets, .osf-tag-cloud { display:flex; flex-wrap:wrap; gap:6px; }
.osf-chip-item, .osf-preset, .osf-tag { padding:6px 14px; background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.08); border-radius:999px; cursor:pointer; font-size:13px; margin:0; }
.osf-chip-item input, .osf-preset input, .osf-tag input { position:absolute; opacity:0; pointer-events:none; }
.osf-chip-item.is-checked, .osf-preset.is-checked, .osf-tag.is-checked { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }

.osf-range { display:flex; align-items:center; gap:10px; margin-top:14px; }
.osf-range__field { position:relative; flex:1 1 0; min-width:0; display:block; margin:0; }
.osf-range__in { width:100%; padding:9px 34px 9px 12px; border:1px solid #e0e0e0; border-radius:8px; font-size:13px; color:#1a1a1a; text-align:left; background:#fff; }
.osf-range__in:focus { border-color:#1a1a1a; outline:none; }
.osf-range__in::-webkit-outer-spin-button, .osf-range__in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.osf-range__in[type=number] { -moz-appearance:textfield; }
.osf-range__suffix { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#9a9a9a; font-size:13px; pointer-events:none; }
.osf-range__sep { color:#bbb; flex:0 0 auto; }
.osf-range__unit { color:#888; font-size:12px; }

/* Filter price range slider — Figma 35:7173 spec
 * Track: 4px height, #DDDDDD bg, fully rounded
 * Range fill: brand brown (admin "Кнопки сайту" var, fallback #392923)
 * Thumbs: 30×30 white circles, 1px #DDDDDD border, box-shadow 0 2px 6px rgba(0,0,0,.2) */
.osf-slider { position:relative; padding:22px 14px 6px; height:40px; box-sizing:border-box; }
.osf-slider__track { height:4px; background:#DDDDDD; border-radius:999px; position:relative; }
.osf-slider__range { height:100%; background:var(--otc-btn-primary, #392923); border-radius:999px; position:absolute; left:0; right:0; }
.osf-slider__in { position:absolute; top:9px; left:0; width:100%; height:30px; -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none; margin:0; padding:0; }
.osf-slider__in::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid #DDDDDD; pointer-events:auto; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; margin-top:-13px; box-sizing:border-box; }
.osf-slider__in::-moz-range-thumb { width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid #DDDDDD; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2); box-sizing:border-box; }
.osf-slider__in::-webkit-slider-runnable-track { background:transparent; height:4px; }
.osf-slider__in::-moz-range-track { background:transparent; height:4px; }

.osf-histogram { display:flex; align-items:flex-end; gap:1px; height:36px; margin-bottom:4px; }
.osf-histogram__bar { flex:1 1 auto; min-width:2px; background:rgba(26,26,26,.2); border-radius:1px 1px 0 0; }

.osf-rating__row { display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 0; }
.osf-rating__row input { position:absolute; opacity:0; pointer-events:none; }
.osf-rating__stars { color:#f5a623; }
.osf-rating__row.is-checked { background:rgba(245,166,35,.06); border-radius:4px; padding:4px 6px; }

.osf-toggle-row { display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; user-select:none; }
.osf-toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.osf-toggle-row__switch { position:relative; width:36px; height:20px; background:#ccc; border-radius:999px; flex:0 0 auto; transition:background .2s; }
.osf-toggle-row__switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s; }
.osf-toggle-row input:checked + .osf-toggle-row__switch { background:#5cb85c; }
.osf-toggle-row input:checked + .osf-toggle-row__switch::after { transform:translateX(16px); }

.osf-tree { list-style:none; padding:0; margin:0; }
.osf-tree__node--child { padding-left:18px; }

.osf-autocomplete { position:relative; }
.osf-autocomplete__list { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #e0e0e0; border-radius:6px; max-height:260px; overflow-y:auto; z-index:10; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.osf-autocomplete__item { padding:8px 10px; cursor:pointer; }
.osf-autocomplete__item:hover, .osf-autocomplete__item.is-active { background:#f5f5f5; }
.osf-autocomplete__chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }

.osf-date-range { display:flex; align-items:center; gap:8px; }
.osf-date-range input { padding:6px 10px; border:1px solid #e0e0e0; border-radius:6px; }

.osf-select, .osf-select-multi { width:100%; padding:8px 10px; border:1px solid #e0e0e0; border-radius:6px; font-size:14px; background:#fff; }
/* Filter-by-category dropdown — same shell as native selects but with a chevron affordance. */
.osf-category-select { position:relative; }
.osf-category-input { width:100%; padding:10px 34px 10px 12px; border:1px solid #e0e0e0; border-radius:8px; font-size:14px; background:#fff; color:#1a1a1a; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; }
.osf-category-input:focus { border-color:#1a1a1a; outline:none; }
.osf-category-checklist { display:flex; flex-direction:column; gap:2px; }
.osf-category-checklist .osf-cat-check { text-decoration:none; color:#1a1a1a; }
.osf-category-checklist .osf-cat-check:hover { color:#1a1a1a; }
.osf-category-checklist .osf-cat-check .osf-item__count { color:#888; font-size:12px; margin-left:auto; }
.osf-category-select::after { content:''; position:absolute; right:14px; top:50%; width:8px; height:8px; border-right:1.5px solid #1a1a1a; border-bottom:1.5px solid #1a1a1a; transform:translateY(-70%) rotate(45deg); pointer-events:none; }
/* When pretty-select takes over (its .ps-shell is injected inside the wrapper), it
   draws its own caret — hide the wrapper's native arrow to avoid a double chevron. */
.osf-category-select:has(.ps-shell)::after { display:none; }

.osf__status { margin-top:10px; font-size:12px; color:#888; }
/* Пустой статус (а он пуст почти всегда — это aria-live для объявления числа найденного)
   не должен занимать место: он идёт ПОСЛЕ формы, и его отступ давал полоску 10px под
   кнопками, когда мобильную панель фильтра прокручивают до самого низа. */
.osf__status:empty { margin-top:0; }
/* Floating Apply popover — not a normal button in flow. Positioned via JS relative
   to the last-clicked filter row. Only visible in reload mode. The `display:inline-flex`
   below is an author rule that would otherwise win over the UA stylesheet's
   `[hidden]{display:none}`, so we re-assert hidden explicitly. */
.osf__apply[hidden] { display:none !important; }
.osf__apply { position:fixed; z-index:10050; display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; background:#5cb85c; color:#fff; border:0; border-radius:999px;
  cursor:pointer; font-weight:600; font-size:14px; line-height:1;
  box-shadow:0 10px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  transition:background .15s, transform .12s; white-space:nowrap; max-width:90vw; }
.osf__apply:hover { background:#4cae4c; transform:translateY(-1px); }
.osf__apply[disabled] { opacity:.55; cursor:not-allowed; }
.osf__apply .fa-check { font-size:12px; }
.osf__apply-count { font-weight:700; font-size:15px; }
.osf__apply-count:empty { display:none; }
.osf__apply-count:empty + .osf__apply-text::before { content:""; }
.osf.is-pending { opacity:.95; }
.osf.is-pending .osf__form { pointer-events:none; }

/* Mobile bottom bar — hidden on desktop */
/* margin строго 14px сверху и НОЛЬ по краям.
   Раньше стояло `14px -16px -14px` — боковые -16px должны были гасить горизонтальные
   падинги панели, чтобы полоса шла от края до края. Но у раскрытой панели их нет, и бар
   получался на 32px ШИРЕ неё: появлялась горизонтальная полоса прокрутки высотой 15px.
   Липкий элемент прижимается к низу СКРОЛЛПОРТА, то есть НАД полосой, — и под кнопками
   оставался просвет, через который просматривалась следующая группа фильтра.
   Нижний -14px добавлял к этому ещё и своё смещение. */
.osf__mobile-bar { display:none; position:sticky; bottom:0; background:#fff; padding:10px; border-top:1px solid rgba(0,0,0,.1); gap:8px; margin:14px 0 0; }
.osf__mobile-bar button { flex:1; padding:12px; border-radius:8px; border:0; font-weight:600; cursor:pointer; }
.osf__mobile-reset { background:#f5f5f5; }
/* "Показать" matches the global site button (Дизайн і стилі → Кнопки сайту):
   --otc-btn-primary / -text / -hover / -radius are emitted on :root in common/header.twig. */
.osf__mobile-apply { background:var(--otc-btn-primary, #1a1a1a); color:var(--otc-btn-primary-text, #fff); border-radius:var(--otc-btn-radius, 8px); }
.osf__mobile-apply:hover { background:var(--otc-btn-primary-hover, #444); }

@media (max-width: 991px) {
  .osf { border:0; padding:0; }
  .osf__mobile-bar { display:flex; }
  /* Full-screen bottom-sheet mode (TZ §11.1) — hidden by default, shown when body.osf-open */
  /* Снизу отступа нет: панель кнопок — последний ребёнок формы и сама липнет к низу
     прокрутки, а любой padding-bottom у контейнера отодвинул бы её от края и снова
     открыл просвет (sticky bottom:0 считает от нижней границы КОНТЕНТА). */
  /* overflow-x:hidden — страховка: любой ребёнок шире панели открывал бы снизу
     горизонтальную полосу прокрутки, а липкая панель кнопок прижимается к низу
     СКРОЛЛПОРТА и оказывалась бы над ней, с просветом под кнопками.
     Снизу отступа нет: панель кнопок — последний ребёнок формы и сама липнет к низу,
     а padding-bottom у контейнера снова отодвинул бы её от края. */
  body.osf-open .osf { position:fixed; inset:0; z-index:10000; background:#fff; overflow-y:auto; overflow-x:hidden; padding:16px 16px 0; }
  body.osf-open { overflow:hidden; }
}
/* Floating trigger button on mobile */
.osf-mobile-trigger { display:none; }
@media (max-width: 991px) {
  .osf-mobile-trigger { display:flex; position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:9999; background:#1a1a1a; color:#fff; padding:12px 22px; border-radius:999px; gap:8px; align-items:center; box-shadow:0 4px 12px rgba(0,0,0,.25); border:0; cursor:pointer; font-weight:600; }
  body.osf-open .osf-mobile-trigger { display:none; }
  .osf:not(.osf-open-visible) { display:none; }
  body.osf-open .osf { display:block; }
}

@media (prefers-reduced-motion: reduce) {
  .osf-group__caret, .osf-toggle-row__switch::after, .osf-slider__in::-webkit-slider-thumb { transition:none !important; }
}


.pc-s1.product-card-wrapper{
  --otc-card-w:330px;    --otc-img-w:446px;  --otc-img-h:446px;}.pc-s1.product-card-wrapper{width:330px;max-width:100%;}@media (min-width:1367px){
  .pc-s1.product-card-wrapper{
    --otc-card-w:330px;    --otc-card-h:510px;          }  .pc-s1.product-card-wrapper{width:330px;max-width:100%;}      }
@media (min-width:992px) and (max-width:1366px){
  .pc-s1.product-card-wrapper{
    --otc-card-w:403px;        --otc-img-w:403px;    --otc-img-h:403px;  }  .pc-s1.product-card-wrapper{width:403px;max-width:100%;}        .pc-s1 .product-card-rating__product-img{aspect-ratio:403 / 403;}
  }
@media (min-width:501px) and (max-width:991px){
  .pc-s1.product-card-wrapper{
    --otc-card-w:446px;        --otc-img-w:446px;    --otc-img-h:446px;  }  .pc-s1.product-card-wrapper{width:446px;max-width:100%;}        .pc-s1 .product-card-rating__product-img{aspect-ratio:446 / 446;}
  }
@media (max-width:500px){
  .pc-s1.product-card-wrapper{
    --otc-card-w:172px;    --otc-card-h:303px;    --otc-img-w:172px;    --otc-img-h:200px;  }  .pc-s1.product-card-wrapper{width:172px;max-width:100%;}        .pc-s1 .product-card-rating__product-img{aspect-ratio:172 / 200;}
  }
.pc-s1.product-card-wrapper{background:#FFFFFF;}.pc-s1.product-card-wrapper{border-radius:10px;}.pc-s1 .product-card-rating__product-img{border-radius:var(--otc-card-radius,10px) !important;overflow:hidden;}.pc-s1 .product-card-rating__descr{padding:0px;}.pc-s1 .product-card-rating__descr{gap:10px;display:flex;flex-direction:column;}.pc-s1.product-card-wrapper{gap:10px;display:flex;flex-direction:column;}.pc-s1 .product-card-rating__title{color:#252525;}.pc-s1 .product-card-rating__title{font-size:14px;}.pc-s1 .price-new{color:#222222;}.pc-s1 .price-new.price-new--actual-special{color:#577B28 !important;}.pc-s1 .price-new{font-size:20px;}.pc-s1 .price-old{color:#7D7D7D;}.pc-s1 .price-old{font-size:14px;}.pc-s1 .product-card-rating__sku{color:#717171;}.pc-s1 .product-card-rating__stock{color:#0FA379;}.pc-s1 .product-card-rating__stock,.pc-s1 .product-card-rating__restock{font-size:12px;}.pc-s1 .product-card-rating__restock{color:#961885;}.pc-s1 .product-card-rating__freeship{color:#0FA379;}.pc-s1 .product-card-rating__review-count,.pc-s1 .product-card-rating__review-icon{color:#999999;}.pc-s1 .product-card-rating__btns .btn{background:#332723;}.pc-s1 .product-card-rating__btns .btn{color:#FFFFFF;}.pc-s1 .product-card-rating__btns .btn:hover{background:#4A3A33;}.pc-s1 .product-card-rating__btns .btn{border-radius:8px;}.pc-s1 .product-card-rating__product-img img{border-radius:inherit;}
.pc-s1 .product-card-rating__product-img{aspect-ratio:446 / 446;}
.pc-s1 .product-card-rating__product-img{background:#FFFFFF;--otc-card-img-bg:#FFFFFF;}.pc-s1 .product-card-rating__icons-btns .stats-btn{display:none!important;}.pc-s1 .product-card-rating__icons-btns{
top:8px;right:12px;left:auto;bottom:auto;
}
.pc-s1 .product-card-rating__icons-btns .icon-btn,
.pc-s1 .product-card-rating__icons-btns button{width:30px;height:30px;}
.pc-s1 .product-card-rating__icons-btns .icon-btn svg{width:30px;height:30px;}
.pc-s1 .product-card-rating__icons-btns .icon-btn,
.pc-s1 .product-card-rating__icons-btns button{border:1px solid #DDDDDD;}
.pc-s1 .product-card-rating__icons-btns .icon-btn,
.pc-s1 .product-card-rating__icons-btns button{box-shadow:0 2px 6px rgba(0,0,0,.08);}
.pc-s1 .product-card-rating__icons-btns .icon-btn,
.pc-s1 .product-card-rating__icons-btns button{background:#FFFFFF;}.pc-s1 .product-card-rating__icons-btns .icon-btn:hover,
.pc-s1 .product-card-rating__icons-btns .like-btn.active-like,
.pc-s1 .product-card-rating__icons-btns .stats-btn.active-like{color:#EC2424!important;}
.pc-s1 .product-card-rating__icons-btns .icon-btn:hover,
.pc-s1 .product-card-rating__icons-btns .like-btn.active-like,
.pc-s1 .product-card-rating__icons-btns .stats-btn.active-like{background:#FFFFFF!important;}
.pc-s1 .product-card-rating__sku{display:none!important;}.pc-s1 .product-card-rating__footer{display:none!important;}.pc-s1 .pc-price-btn-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:0;}
.pc-s1 .pc-price-btn-row .product-card-rating__price{flex:1 1 auto;min-width:0;}
.pc-s1 .pc-price-btn-row .product-card-rating__footer{flex:0 0 auto;width:auto;margin:0;padding:0;}
.pc-s1 .pc-price-btn-row .product-card-rating__btns{width:auto;}
.pc-s1 .pc-price-btn-row .product-card-rating__btns .btn{width:auto!important;height:48px!important;padding:0 16px!important;display:flex!important;align-items:center;justify-content:center;}
@media (max-width:500px){.pc-s1 .pc-price-btn-row .product-card-rating__btns .btn{height:32px!important;padding:0 12px!important;}}
.pc-s1 .product-card-rating__btns .btn .otc-cart-icon-img{filter:brightness(0) invert(1);}
.pc-s1.pc-oos--gray .product-card-rating__btns,
.pc-s1.pc-oos--gray-text .product-card-rating__btns{
  --otc-cart-btn-bg:#B9B9B9;
  --otc-cart-btn-hover-bg:#B9B9B9;
  --otc-cart-btn-text:#FFFFFF;
}
.pc-s1.pc-oos--gray .product-card-rating__btns .btn.btn-custom,
.pc-s1.pc-oos--gray-text .product-card-rating__btns .btn.btn-custom,
.pc-s1.pc-oos--gray .product-card-rating__btns .btn,
.pc-s1.pc-oos--gray-text .product-card-rating__btns .btn{
  background:#B9B9B9!important;background-color:#B9B9B9!important;
  color:#FFFFFF!important;
  pointer-events:none;cursor:default;
}
.pc-s1.pc-oos--gray .product-card-rating__btns .btn .otc-cart-icon-img,
.pc-s1.pc-oos--gray-text .product-card-rating__btns .btn .otc-cart-icon-img{filter:grayscale(1) brightness(4);}
/* Доп. hover ефект — «Слабка тінь на зображенні»: рівномірна м'яка тінь по периметру,
   1:1 як в Etsy (.v2-listing-card__img:hover → box-shadow:0 0 8px #0003,
   transition box-shadow .2s ease-in-out). #0003 = rgba(0,0,0,.2).
   Тінь на КОНТЕЙНЕРІ .product-card-rating__product-img (не на <img>).
   ВАЖЛИВО: щоб тінь було ВИДНО, її НЕ мають обрізати батьківські контейнери картки.
   `.product-card-rating` має ГЛОБАЛЬНИЙ overflow:hidden (cards.css) + `__image-area`
   теж буває overflow:hidden — вони кліпали 8px-тінь (не було видно на головній/в попапі
   кошика). Тому scoped-розкліпуємо ЦІ два контейнери саме для карток з shadow-ефектом
   (скоуп `.{_pcScope}` + гейт `_ot_hover_extra=='shadow'` → безпечно, лише shadow-картки).
   Сама картинка лишає власний overflow:hidden (скруглення/зум) → нічого не тече. */
.pc-s1 .product-card-rating,
.pc-s1 .product-card-rating__image-area{overflow:visible !important;}
.pc-s1 .product-card-rating__product-img{transition:box-shadow .2s ease-in-out;}
.pc-s1.product-card-wrapper:hover .product-card-rating__product-img{box-shadow:0 0 8px rgba(0,0,0,.2);}
/* Out-of-stock visual effect (admin "Картка товара → Дизайн та стилі → Ефект Stock status").
   .pc-oos          = base marker (out of stock)
   .pc-oos--gray    = image grayscale only
   .pc-oos--gray-text = image grayscale + text/price dimmed to gray */
.pc-s1.pc-oos--gray .product-card-rating__product-img img,
.pc-s1.pc-oos--gray-text .product-card-rating__product-img img,
.pc-s1.pc-oos--gray .product-card-rating .pc-gallery__img,
.pc-s1.pc-oos--gray-text .product-card-rating .pc-gallery__img{
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
}
.pc-s1.pc-oos--gray-text .product-card-rating__name,
.pc-s1.pc-oos--gray-text .product-card-rating__price,
.pc-s1.pc-oos--gray-text .product-card-rating__price .price-new,
.pc-s1.pc-oos--gray-text .product-card-rating__price .price-old,
.pc-s1.pc-oos--gray-text .product-card-rating__sku,
.pc-s1.pc-oos--gray-text .product-card-rating__rating-value,
.pc-s1.pc-oos--gray-text .product-card-rating__review-count,
.pc-s1.pc-oos--gray-text .product-card-rating__stars{
  color:#9a9a9a !important;
}
.pc-s1.pc-oos--gray-text .product-card-rating__stars i,
.pc-s1.pc-oos--gray-text .product-card-rating__star{
  color:#c4c4c4 !important;
}


        /* Обвязка подгрузки не показывает ничего: ни кнопки, ни подписей. Осталась
           нулевая по высоте служебная разметка, поэтому и стилей нужен минимум.
           width:100% всё ещё обязателен — блок вставляется в `.row`, а она flex. */
        .ot-inf{width:100%;}
        /* Счётчик добавленных карточек нужен скринридеру, глазами его читать незачем. */
        .ot-inf__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
        .ot-inf__sentinel{height:1px;}
        /* Скрытие служебное: контейнер пагинации в разных листингах получает свой
           display из основного CSS, объявленного ПОЗЖЕ этого блока, и при равной
           специфичности выигрывал он — на поиске пагинация оставалась видимой. */
        .ot-inf-hidden{display:none !important;}
      

/* Мобайл: отступы сетки товаров категории по макету — 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;}
  }