/* Body scroll lock while the mobile catalog is open — the overlay scrolls, the page does not. */
body.ot-mcat-lock{overflow:hidden !important;height:100%;touch-action:none;}
.ot-mcat-overlay{position:fixed;inset:0;z-index:10050;background:#fff;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .28s ease;visibility:hidden;}
.ot-mcat-overlay.is-open{transform:translateY(0);visibility:visible;}
/* Экраны шторки сами ставят visibility:visible и перебивали скрытие закрытой шторки — Tab на ПК
   проходил по ~45 невидимым ссылкам каталога (B067). */
.ot-mcat-overlay:not(.is-open) .ot-mcat-screen{visibility:hidden !important;}
.ot-mcat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f0f0f0;flex:0 0 auto;}
.ot-mcat-head img{max-height:30px;width:auto;display:block;}
.ot-mcat-close{background:none;border:0;font-size:26px;line-height:1;color:#222;cursor:pointer;padding:2px 8px;}
.ot-mcat-body{flex:1 1 auto;overflow:hidden;position:relative;}
.ot-mcat-screen{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 0 90px;background:#fff;transform:translateX(100%);transition:transform .26s ease;visibility:hidden;}
.ot-mcat-screen.ot-mcat-main{transform:translateX(0);visibility:visible;}
.ot-mcat-screen.is-active{transform:translateX(0);visibility:visible;}
.ot-mcat-list{list-style:none;margin:0;padding:0;}
.ot-mcat-row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #f3f3f3;}
.ot-mcat-link{flex:1;color:#131314;font-size:16px;font-weight:700;text-decoration:none;}
.ot-mcat-acc{background:none;border:0;padding:6px;color:#131314;cursor:pointer;display:inline-flex;transition:transform .2s;}
.ot-mcat-top.is-expanded .ot-mcat-acc{transform:rotate(180deg);}
.ot-mcat-sub{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease;background:#fafafa;}
.ot-mcat-top.is-expanded .ot-mcat-sub{max-height:2000px;}
.ot-mcat-l2{border-bottom:1px solid #f3f3f3;}
.ot-mcat-drill,.ot-mcat-leaf{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 20px 12px 34px;background:none;border:0;color:#444;font-size:15px;text-decoration:none;cursor:pointer;text-align:left;}
.ot-mcat-drill svg,.ot-mcat-acc svg{flex:0 0 auto;color:#131314;}
.ot-mcat-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#444;font-size:14px;padding:14px 20px 6px;cursor:pointer;}
.ot-mcat-drilltitle{font-size:18px;font-weight:700;color:#131314;padding:2px 20px 10px;border-bottom:1px solid #f0f0f0;}


.ot-mobile-nav {
  display:none;
  position:fixed;
  bottom:12px; left:12px; right:12px;
  z-index:9998;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:32px;
  box-shadow:0 4px 20px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  height:66px;
  align-items:stretch;
  padding:6px 0;
  box-sizing:border-box;
}
.ot-mobile-nav-item {
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;                                   /* Figma: pill ↔ label = 4px */
  text-decoration:none; color:#606162;       /* Figma: inactive label #606162 */
  font-family:'Inter',sans-serif;
  font-size:12px; font-weight:500;            /* Figma: label 12px */
  padding:2px 0;
  position:relative;
  transition:color .15s;
}
.ot-mobile-nav-item:hover { color:#131314; text-decoration:none; }
.ot-mobile-nav-item.active { color:#131314; }  /* Figma: active label #131314 */
/* Icon pill (Figma: 56×32, radius 100). Active bg = brand brown #392923 @ 10%. */
.ot-mobile-nav-item .ot-nav-ico {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:32px; border-radius:100px;
  transition:background .15s;
}
.ot-mobile-nav-item.active .ot-nav-ico { background:rgba(57,41,35,.10); }
/* Icon glyph = 24×24 (Figma icon box). Badge anchors HERE (to the icon corner),
   not to the wide 56px pill. */
.ot-mobile-nav-item .ot-nav-glyph {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; line-height:1;
}
.ot-mobile-nav-item .ot-nav-glyph svg{ width:24px; height:24px; display:block; }
.ot-mobile-nav-item .ot-nav-glyph i{ font-size:22px; line-height:1; color:inherit; }
.ot-mobile-nav-item .ot-nav-glyph img{ width:24px !important; height:24px !important; max-width:24px; max-height:24px; object-fit:contain; display:block; }
/* Outline (inactive) ↔ filled (active) icon swap — 1:1 з Figma.
   Селектор включає `.ot-nav-glyph svg` щоб перебити display:block вище (специфічність). */
.ot-mobile-nav-item .ot-nav-glyph svg.ot-nav-ic--on{ display:none; }
.ot-mobile-nav-item.active .ot-nav-glyph svg.ot-nav-ic--off{ display:none; }
.ot-mobile-nav-item.active .ot-nav-glyph svg.ot-nav-ic--on{ display:block; }
.ot-mobile-nav-item .ot-nav-badge {
  position:absolute;
  top:-8px;
  right:-8px;
  left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; min-width:20px; height:20px;
  padding:0;
  /* Той самий колір/форма/розмір, що й у десктопного лічильника (.element-counter). */
  background:#f97316;
  color:#ffffff;
  border:2px solid #fff; border-radius:999px;
  font-size:11px; font-weight:700;
  line-height:1; text-align:center;
  box-sizing:border-box;
  white-space:nowrap;
  z-index:2;
}
@media (max-width:500px){ .ot-mobile-nav{display:flex;} body{padding-bottom:90px;} }
@media (min-width:501px) and (max-width:991px){ .ot-mobile-nav{display:flex;} body{padding-bottom:90px;} }


.ot-account-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 9998; opacity: 0; transition: opacity 0.18s ease;
}
.ot-account-backdrop.show { opacity: 1; }
.ot-account-popup {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 9999; min-width: 260px; max-width: 90vw;
  background: #fff; border-radius: 12px; padding: 12px 0;
  box-shadow: 0 12px 48px rgba(0,0,0,0.25);
  opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease;
}
.ot-account-popup.show {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.ot-account-popup .login-menu-list { padding: 0 20px; }
.ot-account-popup .login-menu-list:hover { background-color: #f5f7f9; }
.ot-account-popup .login-menu-link {
  display: flex; align-items: center; height: 44px;
  color: #757575; text-decoration: none; line-height: 1;
}
.ot-account-popup .login-menu-link-icon { margin-right: 10px; }
.ot-account-popup .login-menu-link-text { font-size: 15px; font-weight: 400; }
.ot-account-popup .login-menu-separator {
  height: 1px; background: #eee; margin: 8px 20px;
}


/* Open search */
.onetap-search--open{display:flex;align-items:center;flex:1 1 auto;min-width:0;}
.onetap-search-form-open{display:flex;align-items:center;width:100%;position:relative;overflow:hidden;transition:border-color .2s;}
.onetap-search-form-icon{position:absolute;left:12px;font-size:14px;pointer-events:none;opacity:.5;}
/* Кастомна картинка-іконка пошуку (з налаштувань) — реальне зображення, повна непрозорість. */
.onetap-search-form-icon-img{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;object-fit:contain;pointer-events:none;opacity:1;display:block;}
.onetap-search-form-input{border:none;background:transparent;padding:8px 12px 8px 34px;font-size:13px;width:100%;outline:none;}
/* Closed search — slide out */
.onetap-search--closed{display:inline-flex;align-items:center;position:relative;}
/* Search toggle button — without hard-coded 40×40 the button shrinks to its icon size,
   so the parent .element-search width/height in the inspector ("Конструктор → Шапка →
   Інспектор → Пошук") drives the actual visible box. Setting them empty (= auto) makes
   the button hug its icon (e.g. 22×22 for a 22px-icon configuration). */
.onetap-search-toggle{background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:opacity .15s;}
.onetap-search-toggle img,.onetap-search-toggle i{display:block;}
.onetap-search-toggle:hover{opacity:.6;}
.onetap-search-slide{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:100;white-space:nowrap;}
.onetap-search-slide-form{display:flex;align-items:center;gap:6px;padding:6px 12px;box-shadow:0 4px 20px rgba(0,0,0,.12);animation:ost-slide-in .2s ease;}
@keyframes ost-slide-in{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
.onetap-search-slide-form i{font-size:14px;flex-shrink:0;}
.onetap-search-slide-input{border:none;background:transparent;padding:8px 4px;font-size:14px;width:260px;outline:none;}
.onetap-search-slide-input::placeholder{opacity:.4;}
.onetap-search-slide-close{background:none;border:none;cursor:pointer;padding:4px;font-size:14px;flex-shrink:0;opacity:.5;transition:opacity .15s;}
.onetap-search-slide-close:hover{opacity:1;}


/* Suppress the legacy OpenCart `common/search` component — the main theme
   header still renders https://bobrcraft.onetap.com.ua/en-search which inserts a `<ul#search_items>` that
   auto-loads the user's recent search queries and shows them as a small
   inline dropdown next to any input named `search`. We replace that with
   our own .otb-search-dd overlay, so suppress the legacy markup entirely. */
.menu-navigation__search,
#search_items,
.search__list,
.live-search-results { display:none !important; }
.otb-search-dd{
  position:fixed; top:80px; left:50%; transform:translateX(-50%);
  width:1720px; max-width:calc(100vw - 32px);
  background:transparent; border:none; border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);
  z-index:9999; padding:0; max-height:80vh; overflow-y:auto;
}
/* Скролл выдачи не «перетекает» на страницу: докрутив список до конца, колесо
   начинало прокручивать документ под попапом (scroll chaining) — выглядело так,
   будто поиск уехал вместе со страницей. overscroll-behavior:contain оставляет
   прокрутку внутри выдачи на всех её вариантах (обычная, inline в открытой
   шапке, планшетная и мобильный полноэкранный лист). Тот же приём уже
   используется для мобильных экранов каталога (.ot-mcat-screen). */
.otb-search-dd,
.otb-search-dd--inline,
.otb-search-dd--mobclosed.otb-search-dd--inline{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* No general white background — the search field and the history block are each their
   own white card; no margin between them (flush). */
.otb-search-dd-input-row{ margin:0 !important; background:#fff !important; }
.otb-search-dd-history,
.otb-search-dd-results{ padding:24px; border-radius:10px; background:#fff; }
/* Lock background scroll while search is open — only the overlay/dropdown scrolls. */
@media (max-width:576px){
    html.ot-search-open{ overflow:hidden !important; }
}
/* Dimmed backdrop behind the open search dropdown */
.otb-search-backdrop{
  position:fixed; inset:0; z-index:9998;
  background:rgba(20,16,12,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease;
}
.otb-search-backdrop.is-on{ opacity:1; visibility:visible; pointer-events:auto; }
/* Keep the always-visible header (with the open-mode search input) above the
   backdrop so it stays un-dimmed and its input remains clickable while the
   overlay is on. Scroll is locked during open, so forcing position:relative
   here can't break sticky behaviour. */
body.ot-search-open .onetap-header-wrapper{ z-index:10000 !important; }

/* ── Inline (open-mode) search dropdown ── компактна випадашка під інпутом,
   БЕЗ full-width попапа й затемнення. Один білий card, ширина = ширина інпута
   (задає JS: left/width), товари з AJAX. Власний input-row/close ховаємо —
   керує завжди-видимий інпут у шапці. */
/* Open-mode (інпут завжди у шапці): випадашка результатів тепер FULL-WIDTH — так само,
   як у закритому пошуку (за вимогою). Ширина/центрування = як у базового .otb-search-dd;
   свій input-row ховаємо, бо друкуємо у видимому інпуті шапки. */
.otb-search-dd--inline{
  left:50%; right:auto; transform:translateX(-50%);
  width:1720px; max-width:calc(100vw - 32px);
  background:transparent; border:none; border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);
  overflow-y:auto; max-height:80vh;
}
.otb-search-dd--inline .otb-search-dd-input-row,
.otb-search-dd--inline .otb-search-dd-close{ display:none !important; }
/* Результати — як у закритому: білий card, padding 24, radius 10, ряд (не колонка). */
.otb-search-dd--inline .otb-search-dd-history,
.otb-search-dd--inline .otb-search-dd-results{ padding:24px; border-radius:10px; background:#fff; }
.otb-search-dd--inline .otb-search-dd-footer{ margin-top:4px; }
/* ── Мобільний «Закритий» пошук: десктоп-режим = «Открытий» додає dd клас --inline
   (інпутом служить видима строка шапки), але при закритому мобільному режимі строку
   сховано (іконка-тогл), тож власний input-row dd теж прихований (--inline) і пошук
   «не працює». Повертаємо власний input-row/close на ВСІХ ≤991. ── */
@media (max-width:991px){
  .otb-search-dd--mobclosed.otb-search-dd--inline .otb-search-dd-input-row{ display:flex !important; }
  .otb-search-dd--mobclosed.otb-search-dd--inline .otb-search-dd-close{ display:flex !important; }
}
/* Ноутбук (992–1366) в «Закрытом» режиме: строки в шапке нет — поле ввода даёт сам попап. */
@media (min-width:992px) and (max-width:1366px){
  .otb-search-dd--lapclosed.otb-search-dd--inline .otb-search-dd-input-row{ display:flex !important; }
  .otb-search-dd--lapclosed.otb-search-dd--inline .otb-search-dd-close{ display:flex !important; }
}
/* Планшет (501–991): повний центрований попап зі скролом (тут НЕМАЄ full-screen
   sheet, який діє лише ≤500). ВАЖЛИВО: не чіпаємо ≤500 — там власний full-screen
   оверлей (position:fixed inset:0, sticky-хедер, fixed-футер, overflow-y:auto). */
@media (min-width:501px) and (max-width:991px){
  .otb-search-dd--mobclosed.otb-search-dd--inline{
    left:50% !important; right:auto !important; transform:translateX(-50%) !important;
    width:1720px !important; max-width:calc(100vw - 24px) !important;
    max-height:80vh !important;
    border:none !important; box-shadow:0 12px 32px rgba(0,0,0,.14) !important; overflow-y:auto !important;
  }
  .otb-search-dd--mobclosed.otb-search-dd--inline .otb-search-dd-history,
  .otb-search-dd--mobclosed.otb-search-dd--inline .otb-search-dd-results{ padding:24px !important; border-radius:10px !important; }
}
.otb-search-dd-input-row{
  display:flex; align-items:center; gap:10px;
  height:48px; padding:0 16px; margin-bottom:14px;
  border:1px solid #DDDDDD; border-radius:12px;
  background:#fff;
}
/* Wrapper around icon+input. Desktop: transparent passthrough (the input-row
   itself is the bordered pill). Mobile: becomes the bordered input pill. */
.otb-search-dd-input-box{display:flex;flex:1;align-items:center;gap:10px;min-width:0;}
.otb-search-dd-input-icon{color:#888;font-size:14px;flex:0 0 auto;display:block;}
.otb-search-dd-input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-size:14px; color:#222; padding:4px 0;
}
.otb-search-dd-input::placeholder{color:#888;}
.otb-search-dd-close{
  background:none; border:none; cursor:pointer; padding:4px 8px;
  font-size:20px; line-height:1; color:#888; flex:0 0 auto;
}
.otb-search-dd-close:hover{color:#222;}
.onetap-search--open,.onetap-search--mobile-toggle,.onetap-search--closed{position:relative;}
.otb-search-dd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.otb-search-dd-title{font-size:14px;font-weight:600;color:#222;}
.otb-search-dd-clear{font-size:12px;color:#e8473b;text-decoration:none;cursor:pointer;background:none;border:0;padding:0;font-family:inherit;}
.otb-search-dd-clear:hover{text-decoration:underline;}
.otb-search-dd-history-list,.otb-search-dd-suggest-list{list-style:none;padding:0;margin:0;}
.otb-search-dd-history-list li,.otb-search-dd-suggest-list li{
  display:flex; align-items:center; gap:8px; padding:8px 4px; cursor:pointer;
  border-radius:6px; font-size:14px; color:#222;
}
.otb-search-dd-history-list li:hover,.otb-search-dd-suggest-list li:hover{background:#f6f6f6;}
.otb-search-dd-history-list li i,.otb-search-dd-suggest-list li i{color:#888;width:14px;flex:0 0 14px;}
.otb-search-dd-history-list li .otb-search-dd-history-del{
  margin-left:auto; color:#aaa; cursor:pointer; padding:2px 6px; line-height:1; font-size:14px;
}
.otb-search-dd-history-list li .otb-search-dd-history-del:hover{color:#e8473b;}
.otb-search-dd-results{display:flex;flex-direction:column;gap:14px;}
.otb-search-dd-suggest-list li{font-size:13px;}
.otb-search-dd-suggest-list li i.fa-arrow-up-right,
.otb-search-dd-suggest-list li i.fa-external-link{margin-left:auto;color:#bbb;font-size:11px;}

/* Two-column results panel — suggestions on the left, products grid on the right.
   When the server returns real product hits, the JS adds `--full` and the row
   collapses to a single column so the grid uses the entire panel width. */
.otb-search-dd-results-row{
  display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:flex-start;
}
.otb-search-dd-results-row--full{ grid-template-columns:1fr; }
.otb-search-dd-suggest{ min-width:0; }
.otb-search-dd-products{ min-width:0; }

/* 20px breathing room between the "Products" title and the first row. */
.otb-search-dd-products .otb-search-dd-title{margin-bottom:20px;}
.otb-search-dd-products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(297px, 1fr));
  gap:20px;
}
/* Result mode: fixed 5-cards-per-row on desktop (matches Figma reference). */
.otb-search-dd-results-row--full .otb-search-dd-products-grid{
  grid-template-columns:repeat(5, minmax(0, 1fr));
}
/* Vertical product card — image on top, info below (matches reference).
   No border per design; the grid `minmax(<box_w>, 1fr)` controls width. */
.otb-search-dd-product{
  display:flex; flex-direction:column;
  border:none; border-radius:10px; overflow:hidden;
  text-decoration:none; color:inherit;
  width:100%; min-height:429px;
  box-sizing:border-box; background:transparent;
}
.otb-search-dd-product:hover{text-decoration:none;}
.otb-search-dd-product:hover .otb-search-dd-product-image{box-shadow:0 4px 14px rgba(0,0,0,.06);}
.otb-search-dd-product-image{
  position:relative;
  width:100%;
  height:320px;
  background:transparent; overflow:hidden; border-radius:10px;
}
.otb-search-dd-product-image img{
  width:100%;
  max-width:277px;
  height:100%;
  object-fit:cover; display:block; margin:0 auto;
}
.otb-search-dd-product-badges{
  position:absolute; top:8px; left:8px; display:flex; gap:6px; flex-wrap:wrap; max-width:calc(100% - 16px);
}
.otb-search-dd-product-badge{
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; background:#10b981; color:#fff;
}
.otb-search-dd-product-badge--sale{background:#10b981;}
.otb-search-dd-product-badge--popular{background:#fbbf24;color:#222;}
.otb-search-dd-product-badge--bestseller{background:#fbbf24;color:#222;}
.otb-search-dd-product-badge--preorder{background:#a78bfa;color:#fff;}
.otb-search-dd-product-wish{
  position:absolute; top:8px; right:8px;
  width:30px; height:30px; border-radius:999px; border:none; background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; color:#999; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.otb-search-dd-product-wish:hover{color:#e8473b;}
.otb-search-dd-product-info{
  display:flex; flex-direction:column; gap:6px; padding:10px 4px 0;
  min-width:0; flex:1;
}
.otb-search-dd-product-name{
  font-size:14px; font-weight:500; line-height:1.3; color:#222;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  white-space:nowrap; text-overflow:ellipsis;
}
.otb-search-dd-product-rating{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; color:#444;
}
.otb-search-dd-product-rating .star{color:#fbbf24; font-size:13px;}
.otb-search-dd-product-rating .reviews{display:inline-flex;align-items:center;gap:4px;color:#888;}
.otb-search-dd-product-price-row{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:2px;
}
.otb-search-dd-product-price-row .otb-search-dd-product-availability{margin-left:auto;}
.otb-search-dd-product-price{font-size:15px; font-weight:700; color:#222;}
.otb-search-dd-product-price-old{font-size:12px; color:#999; text-decoration:line-through;}
.otb-search-dd-product-availability{font-size:12px; color:#10b981; white-space:nowrap;}
.otb-search-dd-product-availability--out{color:#e8473b;}
.otb-search-dd-product-shipping{font-size:12px; color:#888;}
.otb-search-dd-product-stock{font-size:12px; color:#e8473b;}

/* "Show results" button — fixed 300×48 per design, centered under the grid. */
/* Footer "плашка": white bar (68px) with a top divider + drop shadow, button centered. */
.otb-search-dd-footer{
  display:flex;
  height:68px; box-sizing:border-box;
  align-items:center; justify-content:center;
  background:#fff;
  border-top:1px solid #eee;
  box-shadow:0 -4px 12px rgba(0,0,0,.06);
  margin:24px -24px -24px;            /* span full width + reach the card's bottom edge */
  border-radius:0 0 10px 10px;        /* match the results card's bottom corners */
  /* Плашка "Показати результати" залипає внизу оверлея пошуку при скролі результатів
     (десктоп/open + закритий full-width). На мобілі своє правило position:fixed нижче. */
  position:sticky; bottom:0; z-index:20;
}
.otb-search-dd-show-all{
  display:inline-block; margin:0;
  width:300px; height:48px; padding:0;
  background:#392923; color:#fff; border:none; border-radius:8px;
  font-size:14px; font-weight:600; line-height:48px; cursor:pointer;
  box-sizing:border-box; transition:background .15s;
}
.otb-search-dd-show-all:hover{background:#4d382e;}

/* ─────────────────────────────────────────────────────────────────────────
   Search-results cards (shared product_cards.twig) inside the dropdown.
   The card image box is driven by the admin "Розмір картинки карточки"
   (search_card_w/h per device) used as an ASPECT RATIO so the image scales
   with the fluid card width at every resolution — no fixed height → no tall
   slivers / heavy side-crop. We also neutralise the global card caps
   (--otc-card-w max-width, --otc-card-h min-height) that otherwise force a
   400px-tall image into a narrow grid cell. OneTap breakpoints: 1367/992/501/500.
   ───────────────────────────────────────────────────────────────────────── */
/* Desktop ≥1367 — 5 cards/row (current, approved). */
@media (min-width:1367px){
  .otb-search-dd-results-row--full .otb-search-dd-products-grid{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .otb-search-dd-products-grid .product-card-wrapper{ width:100%!important; min-height:0!important; }
  .otb-search-dd-products-grid .product-card-wrapper .product-card-rating{ max-width:none!important; min-height:0!important; height:auto!important; }
  /* Обёртка картинки НЕ получает свой aspect-ratio: у самой картинки соотношение
     приходит из настроек карточки товара (правило специфичнее), и при разных
     значениях обёртка выходила ВЫШЕ картинки — под изображением оставалась
     пустая полоса (замерено: обёртка 277/320 = 344px против картинки 446/446 =
     298px, т.е. ~46px пустоты). Теперь обёртка обнимает картинку. */
  .otb-search-dd-products-grid .product-card-rating__image-area{ width:100%!important; height:auto!important; }
  .otb-search-dd-products-grid .product-card-rating__product-img{ width:100%!important; height:auto!important; aspect-ratio:277/320; }
  .otb-search-dd-products-grid .product-card-rating__product-img img{ width:100%!important; height:100%!important; object-fit:cover!important; }
}
/* Laptop 992–1366 — 4 cards/row so cells stay wide enough for clean images. */
@media (min-width:992px) and (max-width:1366px){
  .otb-search-dd-products-grid{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));}
  .otb-search-dd-results-row--full .otb-search-dd-products-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .otb-search-dd-products-grid .product-card-wrapper{ width:100%!important; min-height:0!important; }
  .otb-search-dd-products-grid .product-card-wrapper .product-card-rating{ max-width:none!important; min-height:0!important; height:auto!important; }
  /* Обёртка картинки НЕ получает свой aspect-ratio: у самой картинки соотношение
     приходит из настроек карточки товара (правило специфичнее), и при разных
     значениях обёртка выходила ВЫШЕ картинки — под изображением оставалась
     пустая полоса (замерено: обёртка 277/320 = 344px против картинки 446/446 =
     298px, т.е. ~46px пустоты). Теперь обёртка обнимает картинку. */
  .otb-search-dd-products-grid .product-card-rating__image-area{ width:100%!important; height:auto!important; }
  .otb-search-dd-products-grid .product-card-rating__product-img{ width:100%!important; height:auto!important; aspect-ratio:277/320; }
  .otb-search-dd-products-grid .product-card-rating__product-img img{ width:100%!important; height:100%!important; object-fit:cover!important; }
}
/* Tablet 501–991 — 3 cards/row. */
@media (min-width:501px) and (max-width:991px){
  .otb-search-dd-results-row{ grid-template-columns:1fr; gap:16px; }
  .otb-search-dd-products-grid{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px;}
  .otb-search-dd-results-row--full .otb-search-dd-products-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .otb-search-dd-products-grid .product-card-wrapper{ width:100%!important; min-height:0!important; }
  .otb-search-dd-products-grid .product-card-wrapper .product-card-rating{ max-width:none!important; min-height:0!important; height:auto!important; }
  /* Обёртка картинки НЕ получает свой aspect-ratio: у самой картинки соотношение
     приходит из настроек карточки товара (правило специфичнее), и при разных
     значениях обёртка выходила ВЫШЕ картинки — под изображением оставалась
     пустая полоса (замерено: обёртка 277/320 = 344px против картинки 446/446 =
     298px, т.е. ~46px пустоты). Теперь обёртка обнимает картинку. */
  .otb-search-dd-products-grid .product-card-rating__image-area{ width:100%!important; height:auto!important; }
  .otb-search-dd-products-grid .product-card-rating__product-img{ width:100%!important; height:auto!important; aspect-ratio:277/320; }
  .otb-search-dd-products-grid .product-card-rating__product-img img{ width:100%!important; height:100%!important; object-fit:cover!important; }
}
/* ─────────────────────────────────────────────────────────────────────────
   Mobile search overlay — 1:1 with Figma (node 837:96764).
   OneTap mobile breakpoint ≤500px (tablet picks up 501–991 above). Cards are
   the shared server-rendered product_cards.twig (`.product-card-*`) reflowed
   horizontally via CSS only — stickers / rating / special-price colour /
   wishlist heart all come from the card + admin settings (no hardcode).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:500px){
  /* Full-screen white overlay; the whole sheet scrolls, header sticks on top,
     the "Show results" plaque is fixed at the bottom (see below). */
  .otb-search-dd{
    position:fixed!important; top:0!important; left:0!important; right:0!important; bottom:0!important;
    transform:none!important; width:auto!important; max-width:none!important;
    margin:0; border-radius:0; max-height:none;
    padding:0; background:#fff; box-shadow:none;
    overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:100040;
  }
  /* Header bar — white, bottom divider + soft shadow (Figma 0 4px 6px /.05),
     stays pinned while the results scroll. Holds search icon + input + close. */
  .otb-search-dd-input-row{
    position:sticky; top:0; z-index:5;
    margin:0!important; height:auto!important;
    padding:12px!important; gap:12px!important;
    border:none!important; border-radius:0!important;
    background:#fff!important; box-shadow:0 4px 6px rgba(0,0,0,.05);
  }
  /* Bordered input pill (Figma: 1px #DDD, radius 8, padding 8/12). */
  .otb-search-dd-input-box{
    border:1px solid #DDDDDD!important; border-radius:8px!important;
    padding:8px 12px!important; gap:8px!important; background:#fff;
  }
  .otb-search-dd-input-icon{ width:22px!important; height:22px!important; }
  .otb-search-dd-input{ font-size:14px!important; }
  .otb-search-dd-close{ width:40px; height:40px; font-size:26px; flex:0 0 40px; }

  /* History (empty state) flows normally inside the scrolling sheet. */
  .otb-search-dd-history{ padding:16px 12px!important; border-radius:0!important; }

  /* Results = scrolling body: 16/12 padding + bottom clearance for the plaque. */
  .otb-search-dd-results{
    padding:16px 12px 88px!important; border-radius:0!important; gap:16px;
  }
  .otb-search-dd-results-row{ display:block!important; }
  /* "Products" section title — 14px SemiBold #131314 (Figma). */
  .otb-search-dd-products .otb-search-dd-title{ font-size:14px; font-weight:600; color:#131314; margin-bottom:12px; }

  /* Single-column list of horizontal cards, 6px gap (Figma). */
  .otb-search-dd-products-grid,
  .otb-search-dd-results-row--full .otb-search-dd-products-grid{
    display:flex!important; flex-direction:column!important; grid-template-columns:none!important; gap:6px!important;
  }

  /* ── Horizontal product card (reflow of product_cards.twig) ── */
  .otb-search-dd-products-grid .product-card-wrapper{
    width:100%!important; min-height:0!important; align-items:stretch!important;
    border:none!important; box-shadow:none!important; border-radius:0!important; background:transparent!important;
  }
  /* Reset the master card caps (header.twig sets max-width:--otc-card-w and
     min-height:--otc-card-h !important on .product-card-rating) — extra
     specificity (3 classes) + !important so the horizontal card fills the row
     and collapses to content height (kills the tall empty gap between cards). */
  .otb-search-dd-products-grid .product-card-wrapper .product-card-rating{
    max-width:none!important; width:100%!important; min-height:0!important; height:auto!important;
  }
  .otb-search-dd-products-grid .product-card-rating{
    display:flex!important; flex-direction:row!important; align-items:flex-start!important;
    gap:10px!important; padding:0 0 6px!important; border-radius:0!important;
  }
  /* Image 110×135, radius 8, cover (overrides admin --otc-img-* for this overlay). */
  .otb-search-dd-products-grid .product-card-rating__image-area{
    flex:0 0 110px!important; width:110px!important; height:135px!important;
    border-radius:8px!important; overflow:hidden!important; position:relative;
  }
  .otb-search-dd-products-grid .product-card-rating__product-img{
    width:110px!important; height:135px!important; border-radius:8px!important; display:block;
  }
  .otb-search-dd-products-grid .product-card-rating__product-img img{
    width:100%!important; height:100%!important; object-fit:cover!important;
  }
  /* Stickers ↖ over image — wrap, gap 3px; pill radius 24, 10px/500 (colours from sticker settings). */
  .otb-search-dd-products-grid .product-labels{ top:0!important; left:0!important; right:auto!important; padding:3px!important; gap:3px!important; }
  .otb-search-dd-products-grid .product-labels--item{ border-radius:24px; padding:5px 8px; font-size:10px; font-weight:500; line-height:1.2; }
  /* Wishlist heart ↗ over image (compare stays hidden by default). */
  .otb-search-dd-products-grid .product-card-rating__icons-btns{ top:3px!important; right:3px!important; bottom:auto!important; left:auto!important; }

  /* Details column. */
  .otb-search-dd-products-grid .product-card-rating__descr{
    flex:1 1 auto!important; min-width:0!important;
    display:flex!important; flex-direction:column!important; gap:8px!important; padding:0!important;
  }
  .otb-search-dd-products-grid .product-card-rating__title{
    font-size:14px!important; line-height:1.43!important; margin:0!important; color:#131314;
    display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important;
    overflow:hidden!important; white-space:normal!important; text-overflow:ellipsis;
  }
  .otb-search-dd-products-grid .product-card-rating__reviews-row{ gap:9px!important; font-size:12px!important; }
  .otb-search-dd-products-grid .product-card-rating__price{ display:flex!important; align-items:center!important; gap:8px!important; }
  /* Price 16px bold; special-price colour stays from settings (--otc-actual-special-color
     via .price-new--actual-special); old price 14px strikethrough grey. */
  .otb-search-dd-products-grid .price-new{ font-size:16px!important; font-weight:700!important; }
  .otb-search-dd-products-grid .price-old{ font-size:14px!important; color:#7D7D7D!important; text-decoration:line-through!important; }
  /* Hide buy button / SKU / stock rows — not in the Figma search card. */
  .otb-search-dd-products-grid .product-card-rating__footer,
  .otb-search-dd-products-grid .product-card-rating__meta-row,
  .otb-search-dd-products-grid .product-card-rating__stock-info,
  .otb-search-dd-products-grid .product-card-rating__stock--inline{ display:none!important; }

  /* ── Sticky "Show results" plaque — above everything (Figma 0 0 15px /.2). ── */
  .otb-search-dd-footer{
    position:fixed!important; left:0; right:0; bottom:0; margin:0!important;
    height:auto; padding:10px 12px; background:#fff;
    border-top:1px solid #DDDDDD; border-radius:0;
    box-shadow:0 0 15px rgba(0,0,0,.2); z-index:100060;
  }
  .otb-search-dd-show-all{
    position:static!important; left:auto; right:auto; bottom:auto;
    display:block; margin:0 auto!important;
    width:300px!important; max-width:100%!important; height:44px!important; line-height:44px!important;
    background:var(--otc-btn-primary,#392923); border-radius:8px;
    font-size:14px; font-weight:500;
  }
}


.onetap-lc--trigger{cursor:pointer;}
.ot-ss{display:none;position:fixed;inset:0;top:0;left:0;right:0;bottom:0;z-index:100050;}
.ot-ss.is-open{display:block;}
.ot-ss__overlay{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;background:rgba(20,14,10,.45);}
.ot-ss__dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:auto;max-width:calc(100vw - 32px);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);display:flex;flex-direction:column;}
.ot-ss__head{display:flex;align-items:center;justify-content:space-between;padding:28px 32px 10px;}
.ot-ss__title{margin:0;font-size:20px;font-weight:600;color:#1f1a17;}
.ot-ss__x{background:none;border:none;font-size:26px;line-height:1;color:#8a8a8a;cursor:pointer;padding:0 4px;}
.ot-ss__body{padding:10px 32px 0;}
.ot-ss__field{margin-bottom:24px;}
.ot-ss__label{display:block;font-size:13px;color:#6b6b6b;margin-bottom:7px;}
/* The native <select> is replaced by pretty-select.js's custom dropdown shell
   (.ps-toggle is the visible button). Match the popup field height = 48px so
   the layout matches the previous look; the rest (skin, chevron, focus ring,
   dropdown list) comes from pretty-select.css. */
.ot-ss .ps-toggle{height:48px;min-height:48px;}
.ot-ss__methods{display:flex;gap:14px;margin:0 0 24px;}
.ot-ss__method{flex:1;background:#F7F7F7;border-radius:12px;padding:12px 17px;min-width:0;}
.ot-ss__method-title{display:block;font-size:12px;color:#9a9a9a;text-align:center;margin-bottom:12px;}
.ot-ss__icons{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap;font-size:22px;color:#555;}
.ot-ss__pay{flex:0 1 50px;width:50px;height:32px;min-width:0;object-fit:contain;display:inline-block;}
.ot-ss__foot{display:flex;gap:14px;padding:0 32px 28px;}
.ot-ss__btn{flex:1;height:48px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;}
.ot-ss__btn--cancel{background:#fff;border-color:#e2ddd8;color:#1f1a17;}
.ot-ss__btn--save{background:#3a2419;color:#fff;}
.ot-ss__btn--save:hover{opacity:.92;}
/* Ожидание после «Save»: страница перезагружается, и без индикатора кнопка выглядит зависшей.
   Спиннер вместо подписи — видно, что запрос идёт. */
.ot-ss__btn--save.is-busy{opacity:.75;cursor:progress;color:transparent;position:relative;}
.ot-ss__btn--save.is-busy::after{
  content:'';position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:ot-ss-spin .7s linear infinite;
}
@keyframes ot-ss-spin{to{transform:rotate(360deg);}}
body.ot-ss-open{overflow:hidden;}
@media (max-width:639px){
  /* Bottom sheet: full-width, anchored to the bottom, rounded top corners. */
  .ot-ss__dialog{
    top:auto; left:0; right:0; bottom:0;
    transform:none;
    width:100%; max-width:100%;
    height:auto; max-height:92vh;
    border-radius:18px 18px 0 0;
  }
  .ot-ss__methods{flex-direction:column;}
  .ot-ss__head{padding:20px 20px 8px;}
  .ot-ss__body{padding:8px 20px 0;}
  .ot-ss__foot{padding:0 20px 22px;}
}


	/* Empty cart state — 1:1 Figma (web 629:83864 / mob 629:81219): bag 80px + orange
	   "0" badge, gap 16, title 20/500, sub 16 #606162, Start-shopping 300×48. */
	.popup-cart__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:auto;max-width:360px;margin:0 auto;padding:48px 20px;gap:16px;}
	.popup-cart__empty-icon{position:relative;width:80px;height:80px;color:#131314;line-height:0;display:inline-flex;align-items:center;justify-content:center;}
	.popup-cart__empty-icon svg{display:block;width:80px;height:80px;}
	.popup-cart__empty-badge{position:absolute;top:0;right:0;width:28px;height:28px;border-radius:50%;background:#E85722;color:#fff;font-size:14px;font-weight:400;line-height:28px;text-align:center;font-family:'Inter',sans-serif;box-sizing:border-box;}
	.popup-cart__empty-title{font-size:20px;font-weight:500;color:#131314;margin:0;}
	.popup-cart__empty-sub{font-size:16px;font-weight:400;color:#606162;line-height:22px;margin:0;max-width:298px;}
	.popup-cart__empty-btn{display:inline-flex;align-items:center;justify-content:center;width:300px;max-width:100%;height:48px;padding:12px;background:var(--otc-btn-primary,#392923);color:#fff;border-radius:10px;font-size:16px;font-weight:500;line-height:20px;text-decoration:none;transition:background .15s;}
	.popup-cart__empty-btn:hover{background:var(--otc-btn-primary-hover,#4d382e);color:#fff;text-decoration:none;}
	@media (max-width:576px){
		.popup-cart__empty{padding:24px 16px;}
		.popup-cart__empty-icon,.popup-cart__empty-icon svg{width:64px;height:64px;}
		.popup-cart__empty-badge{width:24px;height:24px;line-height:24px;font-size:12px;}
		.popup-cart__empty-title{font-size:16px;}
		.popup-cart__empty-sub{font-size:14px;line-height:20px;}
		.popup-cart__empty-btn{width:200px;height:44px;border-radius:8px;font-size:14px;line-height:18px;}
	}
	/* Promo code / gift card block — 1:1 with macro. */
	/* Per Figma: single bordered row 652×48 — input fills left (borderless),
	   Apply button 69×46 #F7F7F7 sits inside the row's border on the right.
	   16px gap to Total below. */
	/* Строка оффера над полем промокода: выполненный — зелёная, недобранный — нейтральная. */
	.popup-cart__promo-offer{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;padding:8px 10px;border:1px solid #ececec;border-radius:8px;background:#fcfcfc;font-size:13px;line-height:1.35;color:#4a4a4a;}
	.popup-cart__promo-offer .fa{flex:0 0 auto;margin-top:2px;font-size:14px;color:var(--otc-btn-primary,#392923);}
	.popup-cart__promo-offer.is-met{border-color:#cfe6d6;background:#f4faf6;color:#1a1a1a;font-weight:600;}
	.popup-cart__promo-offer.is-met .fa{color:#2e9e5b;}
	.popup-cart__promo{padding:16px 28px 0;border-top:1px solid #ececec;margin-bottom:16px;}
	.popup-cart__promo-title{font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:10px;}
	/* Figma "Container (Dropdown)": H 44, radius 10, gap 12, border 1. */
	.popup-cart__promo-row{display:flex;gap:12px;align-items:center;flex:1 1 auto;min-width:0;height:44px;border:1px solid #e2e2e2;border-radius:10px;background:#fff;padding:0 1px 0 0;box-sizing:border-box;overflow:hidden;}
	.popup-cart__promo-row:focus-within{border-color:var(--otc-btn-primary,#392923);}
	/* Input shrinks to fill remaining row, padding-right kept small because the
	   8px row gap already creates breathing room before the button. */
	.popup-cart__promo-input{flex:1 1 auto;min-width:0;height:100%;padding:0 0 0 14px;border:0;background:transparent;font-size:14px;color:#1a1a1a;text-overflow:ellipsis;}
	.popup-cart__promo-input:focus{outline:none;}
	.popup-cart__promo-input[readonly]{color:#555;}
	/* Apply/Remove button — Figma 63×42, но АДАПТИВНАЯ ширина: min 63px (EN "Apply"),
	   растёт под длинный перевод ("Застосувати"/"Применить"), чтобы текст не обрезался. */
	.popup-cart__promo-btn{flex:0 0 auto;min-width:63px;width:auto;height:42px;display:flex;align-items:center;justify-content:center;padding:0 12px;border:0;border-radius:8px;background:#F7F7F7;color:#1a1a1a;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;white-space:nowrap;}
	.popup-cart__promo-btn:hover{background:#ececec;}
	.popup-cart__promo-btn:disabled{opacity:.6;cursor:default;}
	.popup-cart__promo-ok{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:#2e9e5b;}
	.popup-cart__promo-ok .fa{font-size:14px;}
	.popup-cart__promo-msg{margin-top:10px;padding:10px 12px;background:#f6f5f3;border-radius:8px;font-size:12.5px;color:#555;line-height:1.5;}
	.popup-cart__promo-error{margin-top:8px;font-size:12.5px;color:#e74c3c;}
	/* Причина, по которой чекаут не пустил (нет остатка / пустая корзина). */
	.popup-cart__flash{margin:0 28px 12px;padding:10px 12px;border-radius:8px;background:#fdecea;border:1px solid #f5c6c0;color:#c0392b;font-size:13px;line-height:1.45;}
	/* Строка промокода = [бордер-бокс input+Apply] + [кнопка Share cart] в один ряд (Figma). */
	.popup-cart__promo-actions{display:flex;gap:12px;align-items:stretch;width:100%;max-width:100%;}
	.popup-cart__promo-actions .popup-cart__share-btn--promo{flex:0 0 auto;width:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border:1px solid #e2e2e2;border-radius:10px;background:#fff;color:#131314;font-size:14px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s;box-sizing:border-box;}
	.popup-cart__promo-actions .popup-cart__share-btn--promo:hover{background:#f7f7f7;border-color:#999;}
	.popup-cart__promo-actions .popup-cart__share-btn--promo svg{width:20px;height:20px;flex-shrink:0;color:#131314;display:block;}
	.popup-cart__promo-actions .popup-cart__share-btn--promo.is-copied{background:#e7f7ed;border-color:#0fa379;color:#0fa379;}
	.popup-cart__promo-actions .popup-cart__share-btn--promo.is-copied svg{color:#0fa379;}
	.popup-cart__share-label{white-space:nowrap;}
	/* Мобайл: Share = только иконка (квадрат 44×44 = высота контейнера), текст скрыт. */
	@media (max-width:500px){
		/* !important — перебиваем cart.css .popup-cart .popup-cart__share-btn (flex:1 1 0 / padding),
		   иначе кнопка сжимается уже 44px. Держим ровный квадрат 44×44 = высоте поля. */
		.popup-cart__promo-actions .popup-cart__share-btn--promo{width:44px !important;min-width:44px !important;flex:0 0 44px !important;height:44px;padding:0 !important;gap:0;}
		.popup-cart__promo-actions .popup-cart__share-label{display:none;}
	}
	.popup-cart__sum-total-old{text-decoration:line-through;color:#9a9a9a;font-weight:500;margin-right:6px;}
	/* Итоговая сумма со скидкой красится тем же акционным цветом из админки, что и
	   акционная цена в строке товара — иначе перечёркнутая сумма рядом с чёрным итогом
	   читалась как «скидка не применилась». Переменная та же: --otc-actual-special-color. */
	.popup-cart__sum-total-new{color:var(--otc-actual-special-color, #E53935);}