.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;
}


.featured-plus__banner{flex:0 0 auto;align-self:stretch;border-radius:var(--otc-card-radius,0);overflow:hidden;background:transparent;}
.featured-plus__banner a{display:block;width:100%;height:100%;}
.featured-plus__banner img{display:block;width:100%;height:100%;object-fit:cover;}
/* Банер-модуль у слоті: даємо контейнеру ширину колонки, обмежуємо слайдер її межами
   (інакше onetap_banners з абсолютним/масштабованим контентом схлопується в 0). */
.fplus-banner-module{width:100%;}
.fplus-banner-module .otb-slider,.fplus-banner-module [id^="otb-swiper-"]{max-width:100%!important;width:100%!important;margin:0!important;}
/* Мобільна комірка банера: ховаємо на десктопі/планшеті, показуємо як grid-комірку ≤576px.
   На мобілі pinned-банер ховаємо, щоб не дублювати. */
.fplus-banner-mobcell{display:none !important;}
@media (max-width:576px){
  /* Комірка банера = висота сусідньої картки (без пустоти під короткою карткою й без
     з'їхавшої вниз кнопки). Трюк: внутрішній банер робимо АБСОЛЮТНИМ → комірка не диктує
     висоту ряду; при align-items:stretch найвищий елемент ряду = картка, і комірка
     тягнеться рівно до неї. Слайдер банера (буває вищий за слайд — 687px проти 304px)
     обрізається overflow:hidden, показуючи верх зі сценою/текстом. */
  #fplus-0 .swiper-wrapper{align-items:stretch !important;}
  #fplus-0 .fplus-banner-mobcell{
    display:block !important; align-self:stretch !important;
    position:relative; overflow:hidden; border-radius:var(--otc-card-radius,0);
  }
  #fplus-0 .fplus-banner-mobcell > *{
    position:absolute; inset:0; width:100% !important; height:100% !important;
  }
  /* Специфічність (1,3,0)+important — перебиває конструкторне .onetap-home-section#sec .featured-plus__banner (1,2,0). */
  #fplus-0-row > .featured-plus__banner.featured-plus__banner--pinned.fplus-banner{display:none !important;}
  #fplus-0 .product-card-wrapper.fplus-grid-drop{display:none !important;}
}
/* When carousel mode — Swiper controls the layout, override flex */
.fplus-swiper.home__popular__wrapper-cards{display:block !important;overflow:hidden !important;}
/* Fitted-режим (JS fitSlides підганяє ширину слайдів під контейнер від краю до краю):
   внутрішня картка та фото обмежені ЗМІННИМИ --otc-card-w/--otc-img-w з налаштувань
   (через width/max-width) і не доходили до межі слайда. Перебиваємо самі змінні —
   картка/фото = 100% підігнаного слайда. */
.fplus-fitted .swiper-slide{--otc-card-w:100% !important;--otc-img-w:100% !important;}
.fplus-fitted .swiper-slide .product-card-rating{width:100% !important;}
.fplus-fitted .swiper-slide .product-card-rating a > img{width:100% !important;}
/* Межкарточный отступ в слайдере = настройка шаблона (--otc-grid-gap), заданная flex-gap'ом:
   не зависит от margin:0!important карточек. Swiper.spaceBetween = то же значение, поэтому
   N карточек + (N-1) отступов ровно заполняют контейнер (без пустоты справа), и прокрутка совпадает. */
.fplus-swiper .swiper-wrapper{display:flex !important;flex-wrap:nowrap !important;gap:var(--otc-grid-gap-x,var(--otc-grid-gap,16px)) !important;}
.fplus-swiper .swiper-slide{flex-shrink:0 !important;height:auto !important;}
/* ТЗ BR-05 (как в «Магазин по коллекциям»): на первом/последнем слайде стрелка
   серая и неактивная — Swiper (loop:false) сам вешает swiper-button-disabled,
   здесь только вид. Тот же стиль, что у category_wall. */
.fplus-nav .otc-slider-btn.swiper-button-disabled,
.fplus-side-arrow.swiper-button-disabled{opacity:.35 !important;pointer-events:none !important;}
/* ТЗ FR-04: scrollbar-индикатор позиции слайдера. Трек на всю ширину блока,
   ползунок = брендовый цвет из настроек (--otc-btn-primary). Тянется. */
.fplus-scrollbar{
  position:relative;
  height:4px;
  margin-top:16px;
  border-radius:999px;
  background:#ECECEC;
  cursor:pointer;
}
.fplus-scrollbar__drag{
  position:absolute;top:0;left:0;height:100%;
  border-radius:999px;
  background:var(--otc-btn-primary,#392923);
  transition:transform .25s ease, width .25s ease;
  will-change:transform;
}
/* Стрелки по краям слайдера (carousel_arrows_pos = 'sides') — поверх краёв слайдера, по центру по вертикали */
.fplus-slider-wrap{position:relative;}
.fplus-side-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.fplus-side-arrow--prev{left:8px;}
.fplus-side-arrow--next{right:8px;}
/* Per-device hide utility (used by the «View all» link toggle). Breakpoints:
   mobile ≤576, tablet 577–991, laptop 992–1366, desktop ≥1367. */
@media (max-width:576px){ .fplus-dhide-mobile{display:none !important;} }
@media (min-width:577px) and (max-width:991px){ .fplus-dhide-tablet{display:none !important;} }
@media (min-width:992px) and (max-width:1366px){ .fplus-dhide-laptop{display:none !important;} }
@media (min-width:1367px){ .fplus-dhide-desktop{display:none !important;} }
/* Slider OFF on a device — JS adds .fplus-nocarousel → the carousel becomes a wrap-grid
   (Swiper is destroyed on that device, so no transform). Slides wrap using their card
   width (grid_* override or template default). Side/nav arrows hidden in grid mode. */
.fplus-nocarousel .swiper-wrapper{display:flex !important;flex-wrap:wrap !important;transform:none !important;gap:var(--otc-grid-gap-y,var(--otc-grid-gap,16px)) var(--otc-grid-gap-x,var(--otc-grid-gap,16px)) !important;}
.fplus-nocarousel .swiper-slide{height:auto !important;flex-shrink:1 !important;}
.fplus-nocarousel + .fplus-side-arrow,.fplus-nocarousel ~ .fplus-side-arrow{display:none !important;}


  #otb-swiper-9{
    max-width:1440px;    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-9 .otb-slide{border:3px solid transparent;box-sizing:border-box;}
    @media (min-width:577px) and (max-width:1439px){
    #otb-swiper-9{ max-width:1440px; }
  }
  @media (max-width:576px){
    #otb-swiper-9{ max-width:375px; }
  }
        body { overflow-x: hidden; }
              @media (max-width:576px){
    .onetap-home-section:has(#otb-swiper-9){width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding:0!important;}
    .onetap-home-section:has(#otb-swiper-9) > .container,
    .onetap-home-section:has(#otb-swiper-9) > .container-fluid{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;}
        .onetap-footer .footer-row:has(#otb-swiper-9) > .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-9){max-width:100%!important;padding-left:0!important;padding-right:0!important;}
    #otb-swiper-9{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
    #otb-swiper-9 .otb-slide{max-width:100%!important;width:100%!important;margin:0!important;}
    #otb-swiper-9 [class*="otb-extra-text-"]{max-width:92%!important;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;}
    #otb-swiper-9 [class*="otb-extra-btn-"]{max-width:92%!important;word-wrap:break-word;overflow-wrap:break-word;}
  }