
.pc-s2.product-card-wrapper{
  --otc-card-w:330px;    --otc-img-w:446px;  --otc-img-h:446px;}.pc-s2.product-card-wrapper{width:330px;max-width:100%;}@media (min-width:1367px){
  .pc-s2.product-card-wrapper{
    --otc-card-w:330px;    --otc-card-h:510px;          }  .pc-s2.product-card-wrapper{width:330px;max-width:100%;}      }
@media (min-width:992px) and (max-width:1366px){
  .pc-s2.product-card-wrapper{
    --otc-card-w:403px;        --otc-img-w:403px;    --otc-img-h:403px;  }  .pc-s2.product-card-wrapper{width:403px;max-width:100%;}        .pc-s2 .product-card-rating__product-img{aspect-ratio:403 / 403;}
  }
@media (min-width:501px) and (max-width:991px){
  .pc-s2.product-card-wrapper{
    --otc-card-w:446px;        --otc-img-w:446px;    --otc-img-h:446px;  }  .pc-s2.product-card-wrapper{width:446px;max-width:100%;}        .pc-s2 .product-card-rating__product-img{aspect-ratio:446 / 446;}
  }
@media (max-width:500px){
  .pc-s2.product-card-wrapper{
    --otc-card-w:172px;    --otc-card-h:303px;    --otc-img-w:172px;    --otc-img-h:200px;  }  .pc-s2.product-card-wrapper{width:172px;max-width:100%;}        .pc-s2 .product-card-rating__product-img{aspect-ratio:172 / 200;}
  }
.pc-s2.product-card-wrapper{background:#FFFFFF;}.pc-s2.product-card-wrapper{border-radius:10px;}.pc-s2 .product-card-rating__product-img{border-radius:var(--otc-card-radius,10px) !important;overflow:hidden;}.pc-s2 .product-card-rating__descr{padding:0px;}.pc-s2 .product-card-rating__descr{gap:10px;display:flex;flex-direction:column;}.pc-s2.product-card-wrapper{gap:10px;display:flex;flex-direction:column;}.pc-s2 .product-card-rating__title{color:#252525;}.pc-s2 .product-card-rating__title{font-size:14px;}.pc-s2 .price-new{color:#222222;}.pc-s2 .price-new.price-new--actual-special{color:#577B28 !important;}.pc-s2 .price-new{font-size:20px;}.pc-s2 .price-old{color:#7D7D7D;}.pc-s2 .price-old{font-size:14px;}.pc-s2 .product-card-rating__sku{color:#717171;}.pc-s2 .product-card-rating__stock{color:#0FA379;}.pc-s2 .product-card-rating__stock,.pc-s2 .product-card-rating__restock{font-size:12px;}.pc-s2 .product-card-rating__restock{color:#961885;}.pc-s2 .product-card-rating__freeship{color:#0FA379;}.pc-s2 .product-card-rating__review-count,.pc-s2 .product-card-rating__review-icon{color:#999999;}.pc-s2 .product-card-rating__btns .btn{background:#332723;}.pc-s2 .product-card-rating__btns .btn{color:#FFFFFF;}.pc-s2 .product-card-rating__btns .btn:hover{background:#4A3A33;}.pc-s2 .product-card-rating__btns .btn{border-radius:8px;}.pc-s2 .product-card-rating__product-img img{border-radius:inherit;}
.pc-s2 .product-card-rating__product-img{aspect-ratio:446 / 446;}
.pc-s2 .product-card-rating__product-img{background:#FFFFFF;--otc-card-img-bg:#FFFFFF;}.pc-s2 .product-card-rating__icons-btns .stats-btn{display:none!important;}.pc-s2 .product-card-rating__icons-btns{
top:8px;right:12px;left:auto;bottom:auto;
}
.pc-s2 .product-card-rating__icons-btns .icon-btn,
.pc-s2 .product-card-rating__icons-btns button{width:30px;height:30px;}
.pc-s2 .product-card-rating__icons-btns .icon-btn svg{width:30px;height:30px;}
.pc-s2 .product-card-rating__icons-btns .icon-btn,
.pc-s2 .product-card-rating__icons-btns button{border:1px solid #DDDDDD;}
.pc-s2 .product-card-rating__icons-btns .icon-btn,
.pc-s2 .product-card-rating__icons-btns button{box-shadow:0 2px 6px rgba(0,0,0,.08);}
.pc-s2 .product-card-rating__icons-btns .icon-btn,
.pc-s2 .product-card-rating__icons-btns button{background:#FFFFFF;}.pc-s2 .product-card-rating__icons-btns .icon-btn:hover,
.pc-s2 .product-card-rating__icons-btns .like-btn.active-like,
.pc-s2 .product-card-rating__icons-btns .stats-btn.active-like{color:#EC2424!important;}
.pc-s2 .product-card-rating__icons-btns .icon-btn:hover,
.pc-s2 .product-card-rating__icons-btns .like-btn.active-like,
.pc-s2 .product-card-rating__icons-btns .stats-btn.active-like{background:#FFFFFF!important;}
.pc-s2 .product-card-rating__sku{display:none!important;}.pc-s2 .product-card-rating__footer{display:none!important;}.pc-s2 .pc-price-btn-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:0;}
.pc-s2 .pc-price-btn-row .product-card-rating__price{flex:1 1 auto;min-width:0;}
.pc-s2 .pc-price-btn-row .product-card-rating__footer{flex:0 0 auto;width:auto;margin:0;padding:0;}
.pc-s2 .pc-price-btn-row .product-card-rating__btns{width:auto;}
.pc-s2 .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-s2 .pc-price-btn-row .product-card-rating__btns .btn{height:32px!important;padding:0 12px!important;}}
.pc-s2 .product-card-rating__btns .btn .otc-cart-icon-img{filter:brightness(0) invert(1);}
.pc-s2.pc-oos--gray .product-card-rating__btns,
.pc-s2.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-s2.pc-oos--gray .product-card-rating__btns .btn.btn-custom,
.pc-s2.pc-oos--gray-text .product-card-rating__btns .btn.btn-custom,
.pc-s2.pc-oos--gray .product-card-rating__btns .btn,
.pc-s2.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-s2.pc-oos--gray .product-card-rating__btns .btn .otc-cart-icon-img,
.pc-s2.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-s2 .product-card-rating,
.pc-s2 .product-card-rating__image-area{overflow:visible !important;}
.pc-s2 .product-card-rating__product-img{transition:box-shadow .2s ease-in-out;}
.pc-s2.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-s2.pc-oos--gray .product-card-rating__product-img img,
.pc-s2.pc-oos--gray-text .product-card-rating__product-img img,
.pc-s2.pc-oos--gray .product-card-rating .pc-gallery__img,
.pc-s2.pc-oos--gray-text .product-card-rating .pc-gallery__img{
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
}
.pc-s2.pc-oos--gray-text .product-card-rating__name,
.pc-s2.pc-oos--gray-text .product-card-rating__price,
.pc-s2.pc-oos--gray-text .product-card-rating__price .price-new,
.pc-s2.pc-oos--gray-text .product-card-rating__price .price-old,
.pc-s2.pc-oos--gray-text .product-card-rating__sku,
.pc-s2.pc-oos--gray-text .product-card-rating__rating-value,
.pc-s2.pc-oos--gray-text .product-card-rating__review-count,
.pc-s2.pc-oos--gray-text .product-card-rating__stars{
  color:#9a9a9a !important;
}
.pc-s2.pc-oos--gray-text .product-card-rating__stars i,
.pc-s2.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-1 .swiper-wrapper{align-items:stretch !important;}
  #fplus-1 .fplus-banner-mobcell{
    display:block !important; align-self:stretch !important;
    position:relative; overflow:hidden; border-radius:var(--otc-card-radius,0);
  }
  #fplus-1 .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-1-row > .featured-plus__banner.featured-plus__banner--pinned.fplus-banner{display:none !important;}
  #fplus-1 .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;}


/* ═══ Onetap | Subscribe — 1:1 з Figma макетом ═══
   Desktop spec: node 150:16238  Mobile spec: node 167:20239
   Card layout, gradients, typography, button dims, decoration positions взяті дослівно
   з Figma globalVars (style_CS4E43, layout_HT3ZC2, fill_TCZ5ZE etc.). */

/* Module wrapper — наслідує .container (1470 max + 15px gutter). */
.onetap-subscribe{padding:0;margin:0;}

/* Card: новый фон по Figma 3762:287851 — верхняя заливка SOLID #FCDC75 (op 1.0)
   перекрывает легаси-градиенты → фон плоский светло-жёлтый. Radius 8 (Figma r=8). */
.onetap-subscribe .ots-container{
  position:relative;
  background:#FCDC75;
  border-radius:8px;
  padding:24px 100px;
  display:flex;align-items:center;justify-content:center;gap:100px;
  color:#332723;
  overflow:hidden;
}

/* Left content (text): style_CS4E43 title 40px 700 + style_Q9AX94 subtitle 20px 400,
   layout_T2FQVE → column, justifyContent:center, gap 16. */
.onetap-subscribe .ots-left{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:16px;}
.onetap-subscribe .ots-title{
  font-family:'Inter',sans-serif;font-weight:700;font-size:40px;line-height:1.21;
  margin:0;color:#332723;
}
.onetap-subscribe .ots-subtitle{
  font-family:'Inter',sans-serif;font-weight:400;font-size:20px;line-height:1.21;
  margin:0;color:#332723;max-width:551px;
}

/* Right content (form): layout_0TPB6V → row, gap 10, width 500.
   Within: input column (gap 4) + button column (justify flex-end, padding 0 0 26). */
.onetap-subscribe .ots-right{position:relative;z-index:3;width:500px;display:flex;flex-direction:row;align-items:stretch;gap:10px;flex-shrink:0;}

/* Input column — fills remaining width */
.onetap-subscribe .ots-input-col{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0;}

/* Label "Stay up to date" — Text Font/16px Medium */
.onetap-subscribe .ots-label{
  display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:16px;line-height:1.375;
  margin:0;color:#131314;
}

/* Input frame: white bg, #DDDDDD border 1px, radius 8, padding 12 */
.onetap-subscribe .ots-input{
  display:block;width:100%;box-sizing:border-box;
  border:1px solid #DDDDDD;outline:0;background:#FFFFFF;
  border-radius:8px;padding:12px;
  font-family:'Inter',sans-serif;font-weight:400;font-size:16px;line-height:1.375;
  color:#131314;
}
.onetap-subscribe .ots-input::placeholder{color:#7D7D7D;}

/* Helper text "By subscribing..." — Text Font/14px Regular */
.onetap-subscribe .ots-privacy{
  margin:0;font-family:'Inter',sans-serif;font-weight:400;font-size:14px;line-height:1.43;
  color:#3D3D3E;
}

/* Button column: justify flex-end → button stays at bottom, padding 0 0 26 */
.onetap-subscribe .ots-btn-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 0 26px;flex-shrink:0;}

/* Button: Figma #332723 r10 140×48; цвета — через системные переменные кнопок
   (Дизайн → настройки шаблона), фолбэк = точные значения макета. */
.onetap-subscribe .ots-btn{
  display:inline-flex;align-items:center;justify-content:center;
  /* Ширина — минимум из макета: на длинных языках подпись не должна вылезать за кнопку. */
  width:auto;min-width:140px;height:48px;padding:12px 16px;box-sizing:border-box;
  border:0;cursor:pointer;
  background:var(--otc-btn-primary, #332723);color:var(--otc-btn-primary-text, #FFFFFF);
  border-radius:10px;
  font-family:'Inter',sans-serif;font-weight:500;font-size:16px;line-height:1.25;
  white-space:nowrap;
  transition:background .15s;
}
.onetap-subscribe .ots-btn:hover{background:var(--otc-btn-primary-hover, #4d382e);}
.onetap-subscribe .ots-btn[disabled]{opacity:.5;cursor:wait;}

/* Сообщение («Вы уже подписаны.» и т.п.) — вне потока: раньше оно вставало под кнопку в
   flex-колонке с justify-content:flex-end и выталкивало кнопку вверх. Теперь оно лежит в
   резервном отступе 26px колонки (под кнопкой) и раскладку не двигает. */
.onetap-subscribe .ots-msg{position:absolute;left:0;top:calc(100% - 26px);width:max-content;max-width:220px;margin:6px 0 0;font-size:14px;line-height:1.3;font-weight:600;}
.onetap-subscribe .ots-msg.is-success{color:#155724;}
.onetap-subscribe .ots-msg.is-error{color:#a02323;}

/* ── Decorative images (absolute positioned, exact Figma px coords) ── */
.onetap-subscribe .ots-deco{position:absolute;pointer-events:none;user-select:none;z-index:1;}

/* DESKTOP decoration positions (Figma 3762:287851, панель 1376×160, panel-relative px):
   - tag_yellow: (-15, 69) 101   — жёлтый %-тег, левый край
   - tag_red:    (1340, -30) 113 — красный %-тег, срезан правым верхом
   - bag_paper:  (548, -31) 127  — бумажный пакет сверху по центру
   - beaver:     (516, 10) 251   — бобёр с сердечками (обрезается панелью снизу)
   - envelope:   (1240, 96) 80   — конверт справа-снизу
   Центральные — в %, угловые — от краёв. */
.onetap-subscribe .ots-deco--beaver{
  left:37.5%;top:10px;width:251px;height:auto;z-index:2;
}
.onetap-subscribe .ots-deco--beaver-m{display:none;}
.onetap-subscribe .ots-deco--tag-right{
  right:-77px;top:-30px;width:113px;height:auto;
}
.onetap-subscribe .ots-deco--tag-left{
  left:-15px;top:69px;width:101px;height:auto;
}
.onetap-subscribe .ots-deco--bag{
  left:39.8%;top:-31px;width:127px;height:auto;z-index:1;
}
.onetap-subscribe .ots-deco--envelope{
  right:56px;top:96px;width:80px;height:auto;z-index:2;
}

/* ═══ Compact desktop / laptop (1120–1366) ═══
   Full desktop padding (100) + gap (100) + fixed 500px form starve the text column
   below ~1366: the title wraps to 3-4 lines, the card balloons in height, and the
   free-floating beaver (pinned to desktop px coords) overlaps the form.
   Fix: cap the text block, pin a narrower form to the RIGHT edge (margin-left:auto), which
   opens a deterministic whitespace gap between them — and drop the beaver into that gap so it
   stays visible (never hidden) without touching the text or the form. Corner tags kept. */
/* Две колонки (≥1120): кнопка — в строке поля, а не прижата к низу колонки. Прежний отступ
   снизу (26px) был подобран под одну строку текста о политике; в русском и других языках он
   переносится на две строки, и кнопка съезжала ниже поля. Сетка ставит кнопку ровно в ряд
   с полем при любой длине подписи и текста. */
@media (min-width:1120px){
  .onetap-subscribe .ots-right{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:4px;align-items:start;}
  .onetap-subscribe .ots-input-col{display:contents;}
  .onetap-subscribe .ots-label{grid-column:1;grid-row:1;}
  .onetap-subscribe .ots-input{grid-column:1;grid-row:2;}
  .onetap-subscribe .ots-privacy{grid-column:1;grid-row:3;}
  .onetap-subscribe .ots-btn-col{grid-column:2;grid-row:2;padding:0;align-self:center;justify-content:center;}
  .onetap-subscribe .ots-msg{top:100%;}
}

@media (min-width:1120px) and (max-width:1366px){
  .onetap-subscribe .ots-container{padding:24px 48px;gap:24px;justify-content:flex-start;}
  .onetap-subscribe .ots-left{flex:0 1 auto;min-width:0;max-width:440px;}
  .onetap-subscribe .ots-right{width:auto;flex:0 0 380px;max-width:380px;margin-left:auto;}
  .onetap-subscribe .ots-title{font-size:34px;}
  .onetap-subscribe .ots-subtitle{font-size:18px;max-width:100%;}
  /* Form is fixed 380 wide, pinned right → its left edge is a constant 380+48 = 428px from the
     card's right edge. Anchor the beaver just left of it (right:440), bottom-aligned, in the gap. */
  .onetap-subscribe .ots-deco--beaver{left:auto;right:440px;top:auto;bottom:-24px;width:132px;}
  /* Bag/envelope centre floats have no room here → hide; keep corner discount tags. */
  .onetap-subscribe .ots-deco--bag,
  .onetap-subscribe .ots-deco--envelope{display:none;}
  .onetap-subscribe .ots-deco--tag-right{right:-40px;top:-24px;width:96px;}
  .onetap-subscribe .ots-deco--tag-left{left:-15px;top:56px;width:84px;}
}

/* ═══ Mobile / tablet stacked (≤1119) — Figma 167:20239 ═══
   Card padding 24 12, gap 16, column layout.
   Title 20px 700, subtitle 14px 400.
   Form: input column (gap 4) → button compact 125×40 BELOW privacy.
   Decorations: 5 pieces at specific positions (see comments inline).
   Stacking runs up to ≤1119 (below the 1120 two-column threshold, where a 500px form + beaver
   gap no longer fit): tablets/small-laptops get the vertical layout instead of a starved row;
   the 721–1119 override below bumps typography and repositions the beaver for the wider card. */
@media (max-width:1119px){
  .onetap-subscribe .ots-container{
    padding:24px 12px;
    flex-direction:column;align-items:stretch;justify-content:center;gap:16px;
  }
  /* Text block — Figma layout_X094XX gap 8 */
  .onetap-subscribe .ots-left{gap:8px;}
  .onetap-subscribe .ots-title{font-size:20px;line-height:1.21;}
  .onetap-subscribe .ots-subtitle{font-size:14px;line-height:1.21;max-width:100%;}

  /* Form: Figma layout_HVJNOT → column, gap 10. Input + button vertical (button below). */
  .onetap-subscribe .ots-right{width:100%;flex-direction:column;align-items:flex-start;gap:10px;}
  .onetap-subscribe .ots-input-col{width:100%;gap:4px;}
  .onetap-subscribe .ots-label{font-size:14px;line-height:1.43;}
  /* Input padding 8 12 per Figma layout_MU8J00 */
  .onetap-subscribe .ots-input{padding:8px 12px;font-size:14px;}
  .onetap-subscribe .ots-privacy{font-size:14px;line-height:1.43;}
  /* Button column — no padding-bottom on mobile (no flex-end align needed) */
  .onetap-subscribe .ots-btn-col{padding:0;align-items:flex-start;}
  /* Здесь кнопка — последняя в карточке с overflow:hidden: сообщение снизу обрезалось бы
     и растягивало блок. Ставим его справа от кнопки, на её высоте (40px) — кнопка не прыгает. */
  .onetap-subscribe .ots-msg{top:0;left:calc(100% + 12px);height:40px;margin:0;display:flex;align-items:center;max-width:calc(100vw - 190px);font-size:13px;}
  .onetap-subscribe .ots-msg[hidden]{display:none;}
  /* Button mobile: 125×40, radius 8, font 14 */
  .onetap-subscribe .ots-btn{width:auto;min-width:125px;padding:8px 12px;height:40px;font-size:14px;border-radius:8px;}

  /* Decorations per Figma 167:20239 (панель 351×273, panel-relative px):
     - bag_paper:  (-33, 99) 66   — пакет, левый край наполовину срезан
     - envelope:   (291, 213) 60  — конверт справа-снизу (right:0)
     - beaver_m:   (199, 191) 152 — мобильный бобёр снизу-справа (десктопный скрыт)
     - tag_red:    (285, -26) 75  — красный %-тег, верх-право
     - tag_yellow: (126, 223) 71  — жёлтый %-тег снизу, левее бобра (в % от ширины) */
  .onetap-subscribe .ots-deco--bag{
    left:-33px;top:99px;right:auto;width:66px;
  }
  .onetap-subscribe .ots-deco--envelope{
    right:0;top:213px;left:auto;width:60px;
  }
  .onetap-subscribe .ots-deco--beaver{display:none;}
  .onetap-subscribe .ots-deco--beaver-m{
    display:block;right:0;top:191px;left:auto;width:152px;z-index:2;
  }
  .onetap-subscribe .ots-deco--tag-right{
    right:-8px;top:-26px;width:75px;
  }
  .onetap-subscribe .ots-deco--tag-left{
    left:35.9%;top:223px;right:auto;width:71px;
  }
}

/* ═══ Tablet portrait / small landscape (721–1119) — stacked, roomier than phone ═══
   Inherits the stacked column layout above; bumps typography back up (20px is too small
   for a ~700-1100px card) and re-anchors the beaver into the free space to the right of the
   width-capped form. Phone-only corner floats (pinned to a 351px design) are hidden here. */
@media (min-width:721px) and (max-width:1119px){
  .onetap-subscribe .ots-container{padding:28px 32px;}
  .onetap-subscribe .ots-title{font-size:28px;}
  .onetap-subscribe .ots-subtitle{font-size:16px;}
  .onetap-subscribe .ots-right{max-width:480px;}
  .onetap-subscribe .ots-input{padding:12px;font-size:16px;}
  .onetap-subscribe .ots-btn{width:auto;min-width:150px;padding:12px 16px;height:48px;font-size:16px;}
  /* Beaver into the empty area right of the capped form; hide the phone-coord floats. */
  .onetap-subscribe .ots-deco--beaver-m{left:auto;right:24px;top:auto;bottom:0;width:150px;}
  .onetap-subscribe .ots-deco--bag,
  .onetap-subscribe .ots-deco--envelope,
  .onetap-subscribe .ots-deco--tag-left{display:none;}
  .onetap-subscribe .ots-deco--tag-right{right:-12px;top:-28px;width:96px;}
}

/* ═══ Success popup (промокод) — самодостаточный, оформление как birthday popup ═══ */
.ots-pop{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:16px;}
.ots-pop[hidden]{display:none;}
.ots-pop__backdrop{position:absolute;inset:0;background:rgba(19,19,20,.55);}
.ots-pop__dialog{position:relative;z-index:1;width:100%;max-width:420px;background:#fff;border-radius:16px;padding:28px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);box-sizing:border-box;font-family:'Inter',sans-serif;}
.ots-pop__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;background:#F7F7F7;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#131314;}
.ots-pop__close:hover{background:#ececec;}
.ots-pop__hero{width:120px;height:120px;background:#FCDC75;border-radius:50%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;flex-shrink:0;}
.ots-pop__beaver{width:112px;height:auto;display:block;}
.ots-pop__title{font-weight:700;font-size:24px;line-height:1.25;color:#131314;margin:0;}
.ots-pop__lead{font-weight:400;font-size:15px;line-height:1.4;color:#606162;margin:0;}
.ots-pop__card{width:260px;max-width:100%;border:1px dashed #DDDDDD;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;background:#fff;}
.ots-pop__discount{font-weight:600;font-size:20px;line-height:1.2;color:#577B28;}
.ots-pop__code-row{background:#F7F7F7;border-radius:8px;padding:12px;display:flex;align-items:center;justify-content:center;gap:8px;}
/* Строка «код отправлен на почту» — на месте бывшей карточки с кодом. */
.ots-pop__mail{background:#F7F7F7;border-radius:8px;padding:12px;display:flex;align-items:center;justify-content:center;gap:8px;color:#131314;}
.ots-pop__mail svg{flex:0 0 auto;color:#8a8a8a;}
.ots-pop__mail-text{font-size:14px;line-height:1.4;text-align:left;word-break:break-word;}
.ots-pop__code{font-weight:600;font-size:15px;line-height:1.2;letter-spacing:.5px;color:#131314;font-family:'Inter','JetBrains Mono',monospace;}
.ots-pop__copy{background:transparent;border:0;padding:0;color:#131314;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;transition:color .15s;}
.ots-pop__copy:hover,.ots-pop__copy.is-copied{color:#577B28;}
.ots-pop__valid{font-weight:400;font-size:12px;line-height:1.2;color:#7D7D7D;}
.ots-pop__cta{width:100%;height:48px;border:0;border-radius:10px;cursor:pointer;background:var(--otc-btn-primary,#332723);color:var(--otc-btn-primary-text,#fff);font-weight:500;font-size:16px;line-height:1;font-family:'Inter',sans-serif;transition:background .15s;}
.ots-pop__cta:hover{background:var(--otc-btn-primary-hover,#4d382e);}
body.ots-pop-open{overflow:hidden;}
/* Инлайн-сообщение — только под короткие ошибки; не даём ломать вёрстку баннера. */
.onetap-subscribe .ots-msg{word-break:break-word;}


                  /* Desktop: к-сть карток у ряд керує батьківський grid-template-columns (з header.twig) */
  .onetap-home-section#sec-latest-a1b2c3 .product-card-wrapper,
  .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner{
    padding:0 !important;margin:0 !important;min-width:0 !important;box-sizing:border-box !important;
    max-height:551px !important;  }
  /* Banner у featured_plus — займає ту саму column-basis, що й картка товара (rule
     нижче). align-self:flex-start фіксує банер на верху ряда (без цього при
     align-self:stretch + max-height браузер міг центрувати банер у row → візуальний
     shift вниз). Висота — фіксована з admin (banner_height), картинка заповнює
     через object-fit:cover. */
  .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner{
    display:flex !important;align-self:flex-start !important;overflow:hidden !important;
    max-height:551px !important;  }
  .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner > a,
  .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner > a > img,
  .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner > img{
    display:block !important;width:100% !important;height:100% !important;object-fit:cover !important;
  }
  /* Category wall — фіксовані розміри картки */
  .onetap-home-section#sec-latest-a1b2c3 .home__categories__card.swiper-slide{
    width:330px !important;min-width:330px !important;max-width:330px !important;flex:0 0 330px !important;box-sizing:border-box !important;    height:551px !important;  }
  /* Mobile (≤767px) — compact category cards (72×72) per Figma macet. */
  @media (max-width:767px){
    .onetap-home-section#sec-latest-a1b2c3 .home__categories__card.swiper-slide{
      width:72px !important;min-width:72px !important;max-width:72px !important;flex:0 0 72px !important;height:auto !important;
    }
    .onetap-home-section#sec-latest-a1b2c3 .home__categories__card > img{
      width:60px !important;height:60px !important;
    }
    .onetap-home-section#sec-latest-a1b2c3 .home__categories__card__desc{
      font-size:11px;line-height:1.2;text-align:center;width:100%;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
  }
  /* Банери onetap_banners, slideshow — розмірами керує сам banner template */
  /* Laptop (992–1199): без max-height */
  @media (min-width:992px) and (max-width:1199px){
    .onetap-home-section#sec-latest-a1b2c3 .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner{
      max-height:none !important;    }
    .onetap-home-section#sec-latest-a1b2c3 .product-card-rating{
      max-height:none !important;    }
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner img{
      max-height:none !important;    }
  }
  /* Tablet (768–991): без max-height (к-сть колонок керує global header CSS) */
  @media (min-width:768px) and (max-width:991px){
    .onetap-home-section#sec-latest-a1b2c3 .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner{
      max-height:none !important;    }
    .onetap-home-section#sec-latest-a1b2c3 .product-card-rating{
      max-height:none !important;    }
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner img{
      max-height:none !important;    }
  }
  /* Mobile (≤767): без max-height (к-сть колонок керує global header CSS) */
  @media (max-width:767px){
    .onetap-home-section#sec-latest-a1b2c3 .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner{
      max-height:none !important;    }
    .onetap-home-section#sec-latest-a1b2c3 .product-card-rating{
      max-height:none !important;    }
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__banner img{
      max-height:none !important;    }
  }
                            .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards,
  .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout{display:flex !important;flex-wrap:wrap !important;gap:40px !important;}
  .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards .product-card-wrapper{padding:0 !important;}
  .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards{display:flex !important;flex-wrap:wrap !important;gap:40px !important;}
  .onetap-home-section#sec-latest-a1b2c3 .home__categories__wrapper{gap:40px !important;}
  .onetap-home-section#sec-latest-a1b2c3 .swiper-viewport .swiper-wrapper{gap:40px !important;}
    .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards > .product-card-wrapper,
  .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards > .product-card-wrapper,
  .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout > .product-card-wrapper,
  .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards > .featured-plus__banner,
  .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards > .featured-plus__banner,
  .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout > .featured-plus__banner{
    flex:0 0 calc((100% - 120px) / 4) !important;
    max-width:calc((100% - 120px) / 4) !important;
  }
  @media (min-width:992px) and (max-width:1366px){
    .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout,
    .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards{gap:40px !important;}
    .onetap-home-section#sec-latest-a1b2c3 .home__categories__wrapper{gap:40px !important;}
    .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards > .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards > .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout > .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards > .featured-plus__banner,
    .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards > .featured-plus__banner,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout > .featured-plus__banner{
      flex:0 0 calc((100% - 120px) / 4) !important;
      max-width:calc((100% - 120px) / 4) !important;
    }
  }
  @media (min-width:768px) and (max-width:991px){
    .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout,
    .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards{gap:40px !important;}
    .onetap-home-section#sec-latest-a1b2c3 .home__categories__wrapper{gap:40px !important;}
    .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards > .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards > .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout > .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards > .featured-plus__banner,
    .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards > .featured-plus__banner,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout > .featured-plus__banner{
      flex:0 0 calc((100% - 40px) / 2) !important;
      max-width:calc((100% - 40px) / 2) !important;
    }
  }
  @media (max-width:767px){
    .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout,
    .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards{gap:6px !important;}
    .onetap-home-section#sec-latest-a1b2c3 .home__categories__wrapper{gap:6px !important;}
    .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards > .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards > .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout > .product-card-wrapper,
    .onetap-home-section#sec-latest-a1b2c3 .home__popular__wrapper-cards > .featured-plus__banner,
    .onetap-home-section#sec-latest-a1b2c3 .home__update-product__wrapper-cards > .featured-plus__banner,
    .onetap-home-section#sec-latest-a1b2c3 .featured-plus__layout > .featured-plus__banner{
      flex:0 0 calc((100% - 6px) / 2) !important;
      max-width:calc((100% - 6px) / 2) !important;
    }
  }
        .onetap-home-section#sec-latest-a1b2c3 .product-card-rating,
  .onetap-home-section#sec-latest-a1b2c3 .home__categories__card.swiper-slide,
  .onetap-home-section#sec-latest-a1b2c3 .product-thumb{border:none !important;}
                .onetap-home-section#sec-latest-a1b2c3 .otm-track{ grid-auto-columns:330px !important;overflow-x:auto !important; }
  .onetap-home-section#sec-latest-a1b2c3 .otm-card{ aspect-ratio:auto !important;width:330px !important;min-width:330px !important;max-width:330px !important;flex:0 0 330px !important;height:551px !important; }
    .onetap-home-section#sec-latest-a1b2c3 .otm-track{ gap:40px !important; }
  @media (min-width:992px) and (max-width:1366px){ .onetap-home-section#sec-latest-a1b2c3 .otm-track{ gap:40px !important; } }
  @media (min-width:768px) and (max-width:991px){ .onetap-home-section#sec-latest-a1b2c3 .otm-track{ gap:20px !important; } }
  @media (max-width:767px){ .onetap-home-section#sec-latest-a1b2c3 .otm-track{ gap:6px !important; } }
  
