.ot-ss,.onetap-phone-dd,.onetap-lc-dd,.ot-burger-overlay{display:none}.onetap-search-toggle,.onetap-search-slide-close,.otb-search-dd-close{background:none;border:none;padding:0;} #onetap-header-s1{width:100%;color:#131314;} #onetap-header-s1{position:sticky;top:0;z-index:1000;}#onetap-header-s1{box-shadow:0px 4px 6px 0px rgba(0, 0, 0, 0.05);}#onetap-header-s1{ } #onetap-header-s1 .element-text{ font: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: inherit; } /* ── Counter badge (cart / wishlist / compare etc.) ── */ /* Anchored to the top-right of the icon (not the whole link), so the number never overlaps the element text (e.g. "Корзина"). Colors are admin-driven via #f97316 / #ffffff. */ #onetap-header-s1 .element-icon-wrap{ position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:1; } #onetap-header-s1 .element-counter{ position:absolute; /* Anchored to the top-right corner of the icon with a slight outside overhang (Figma: badge center sits ~at the icon's top-right corner, ~1/3 overlap). */ top:-8px; right:-8px; display:inline-flex; align-items:center; justify-content:center; width:20px; min-width:20px; height:20px; padding:0; background:#f97316; color:#ffffff !important; border:2px solid #fff; border-radius:999px; font-size:11px; font-weight:700; line-height:1; text-align:center; letter-spacing:0; text-transform:none; text-decoration:none; box-sizing:border-box; pointer-events:none; z-index:2; white-space:nowrap; } /* Standalone counter (no icon) renders inline. */ #onetap-header-s1 .element-counter--standalone{ position:static; margin-left:6px; border:none; } #onetap-header-s1 .header-top-row{background:#f8f8f8;padding:0;font-size:12px;} #onetap-header-s1 .header-main-row{background:#ffffff;padding:0;} #onetap-header-s1 .header-bottom-row{background:#392923;padding:0;} @media (min-width:1367px){ #onetap-header-s1 .header-main-row{ padding-right:60px !important; } } #onetap-header-s1 .header-main-row{ padding-bottom:10px !important; } #onetap-header-s1 .header-main-row{ padding-top:10px !important; } @media (min-width:1367px){ #onetap-header-s1 .header-main-row{ padding-left:60px !important; } } #onetap-header-s1 .onetap-row-columns{display:flex;align-items:center;width:100%;flex-wrap:wrap;min-width:0;} @media (min-width:992px){ #onetap-header-s1 .onetap-row-columns{flex-wrap:nowrap;} #onetap-header-s1 .header-main-row .column-left, #onetap-header-s1 .header-main-row .column-right, #onetap-header-s1 .header-top-row .column-left, #onetap-header-s1 .header-top-row .column-right, #onetap-header-s1 .header-bottom-row .column-left, #onetap-header-s1 .header-bottom-row .column-right{flex:0 1 auto;} #onetap-header-s1 .header-main-row .column-center, #onetap-header-s1 .header-top-row .column-center, #onetap-header-s1 .header-bottom-row .column-center{flex:1 1 0;min-width:0;} } @media (max-width:991px){ #onetap-header-s1 .onetap-onecol .element-search, #onetap-header-s1 .element-search{min-width:0 !important;flex-basis:auto !important;} #onetap-header-s1 .element-logo img{max-width:100% !important;} } #onetap-header-s1 .onetap-column{display:flex;align-items:center;flex-grow:1;gap:30px;min-width:0;} #onetap-header-s1 .onetap-catalog-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:6px;background:#f5c518;color:#222;font-weight:600;font-size:13px;text-decoration:none;transition:background .15s;white-space:nowrap;} #onetap-header-s1 .onetap-catalog-btn:hover{background:#e0b000;color:#222;text-decoration:none;} #onetap-header-s1 .onetap-catalog-btn i{font-size:16px;} #onetap-header-s1 .onetap-burger-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:44px;height:44px;padding:0;border:none;border-radius:8px;background:#3a2a20;color:#fff;cursor:pointer;transition:background .15s;} #onetap-header-s1 .onetap-burger-btn:hover{background:#5a4030;} #onetap-header-s1 .onetap-burger-btn i{font-size:18px;line-height:1;} #onetap-header-s1 .onetap-burger-btn span{font-size:13px;font-weight:600;} #onetap-header-s1 .header-top-row .onetap-column{gap:20px;} #onetap-header-s1 .header-main-row .onetap-column{gap:30px;} #onetap-header-s1 .header-bottom-row .onetap-column{gap:30px;} @media (min-width:1367px) { #onetap-header-s1 .header-top-row .onetap-column{ gap:20px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:left"]{ padding-left:20px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:right"]{ padding-right:20px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:left-right"]{ padding-left:20px !important; padding-right:20px !important; } } @media (min-width:992px) and (max-width:1366px) { #onetap-header-s1 .header-top-row .onetap-column{ gap:16px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:left"]{ padding-left:16px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:right"]{ padding-right:16px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:left-right"]{ padding-left:16px !important; padding-right:16px !important; } } @media (min-width:501px) and (max-width:991px) { #onetap-header-s1 .header-top-row .onetap-column{ gap:16px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:left"]{ padding-left:16px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:right"]{ padding-right:16px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:left-right"]{ padding-left:16px !important; padding-right:16px !important; } } @media (max-width:500px) { #onetap-header-s1 .header-top-row .onetap-column{ gap:16px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:left"]{ padding-left:16px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:right"]{ padding-right:16px !important; } #onetap-header-s1 .header-top-row .header-element[style*="--hb-side:left-right"]{ padding-left:16px !important; padding-right:16px !important; } } #onetap-header-s1 .onetap-onecol{justify-content:space-between;} #onetap-header-s1 .onetap-onecol .header-element{flex:0 0 auto;} #onetap-header-s1 .header-element{display:flex;align-items:center;line-height:1;} #onetap-header-s1 .header-element[style*="--hb-side"]{position:relative;} #onetap-header-s1 .header-element[style*="--hb-side:left"]::before, #onetap-header-s1 .header-element[style*="--hb-side:left-right"]::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:24px;background:var(--hb-color,#e3e6ea);} #onetap-header-s1 .header-element[style*="--hb-side:right"]::after, #onetap-header-s1 .header-element[style*="--hb-side:left-right"]::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:24px;background:var(--hb-color,#e3e6ea);} #onetap-header-s1 .element-logo img{width:200px;height:80px;max-width:none;object-fit:fill;} #onetap-header-s1 .element-logo .ot-logo-mobile{display:none;} @media (max-width:500px){ #onetap-header-s1 .element-logo.has-mobile-logo .ot-logo-desktop{display:none !important;} #onetap-header-s1 .element-logo.has-mobile-logo .ot-logo-mobile{display:block !important;} } @media (min-width:1367px) { #onetap-header-s1 .element-logo img { width:264px !important; height:40px !important; } } @media (min-width:992px) and (max-width:1366px) { #onetap-header-s1 .element-logo img { width:264px !important; height:40px !important; } } @media (min-width:501px) and (max-width:991px) { #onetap-header-s1 .element-logo img { width:264px !important; height:40px !important; } } @media (max-width:500px) { #onetap-header-s1 .element-logo img { width:198px !important; height:32px !important; } } #onetap-header-s1 .onetap-onecol .element-menu{flex:1 1 auto;min-width:120px;} #onetap-header-s1 .onetap-onecol .element-search{flex:1 1 340px;min-width:220px;} #onetap-header-s1 .element-search.search-mode-closed{flex:0 0 auto !important;min-width:0 !important;width:auto !important;border:none !important;border-radius:0 !important;padding:0 !important;background:transparent !important;} #onetap-header-s1 .onetap-onecol .element-search.search-mode-closed{flex:0 0 auto !important;min-width:0 !important;width:auto !important;} #onetap-header-s1 .element-search.search-mode-closed .onetap-search-form-open, #onetap-header-s1 .element-search.search-mode-closed .onetap-search--open{display:none !important;} @media (max-width:991px){ #onetap-header-s1 .element-search.search-mode-mobile-closed{flex:0 0 auto !important;min-width:0 !important;width:auto !important;max-width:none !important;margin:0 !important;justify-content:flex-start !important;border:none !important;border-radius:0 !important;padding:0 !important;background:transparent !important;} #onetap-header-s1 .element-search.search-mode-mobile-closed .onetap-search--open, #onetap-header-s1 .element-search.search-mode-mobile-closed .onetap-search-form-open{display:none !important;} #onetap-header-s1 .element-search.search-mode-mobile-closed .onetap-search--mobile-toggle{display:inline-flex !important;width:auto !important;max-width:none !important;flex:0 0 auto !important;justify-content:flex-start !important;} } @media (min-width:992px) and (max-width:1366px){ #onetap-header-s1 .element-search.search-mode-laptop-closed{flex:0 0 auto !important;min-width:0 !important;width:auto !important;max-width:none !important;margin:0 !important;justify-content:flex-start !important;border:none !important;border-radius:0 !important;padding:0 !important;background:transparent !important;} #onetap-header-s1 .element-search.search-mode-laptop-closed .onetap-search--open, #onetap-header-s1 .element-search.search-mode-laptop-closed .onetap-search-form-open{display:none !important;} #onetap-header-s1 .element-search.search-mode-laptop-closed .onetap-search--mobile-toggle{display:inline-flex !important;width:auto !important;max-width:none !important;flex:0 0 auto !important;justify-content:flex-start !important;} } #onetap-header-s1 .onetap-onecol .element-logo{flex:0 0 auto;} #onetap-header-s1 .element-logo img{display:block;} #onetap-header-s1 .onetap-onecol .header-link a{white-space:nowrap;} #onetap-header-s1 .onetap-onecol > *{min-width:0;} #onetap-header-s1 .header-link{display:flex;align-items:center;line-height:1;} #onetap-header-s1 .header-link a{color:#131314;padding:0;display:inline-flex;align-items:center;line-height:1;text-decoration:none;} #onetap-header-s1 .header-category-list{display:flex;align-items:center;flex-wrap:wrap;gap:10px} #onetap-header-s1 .header-category-item{display:flex;align-items:center;position:relative} #onetap-header-s1 .header-category-item a{color:#131314;padding:0;display:inline-flex;align-items:center;text-decoration:none;} /* Subcategory dropdown */ #onetap-header-s1 .header-category-item.has-subcats{ padding-bottom:18px;margin-bottom:-18px; } #onetap-header-s1 .header-category-item.has-subcats > .header-category-link .header-category-caret{ margin-left:8px;transition:transform .2s ease;opacity:.75; } #onetap-header-s1 .header-category-item.has-subcats:hover > .header-category-link .header-category-caret{ transform:rotate(180deg);opacity:1; } #onetap-header-s1 .header-category-dd{ position:absolute;top:100%;left:-14px; min-width:260px;background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:0 18px 44px rgba(20,20,40,.12),0 4px 14px rgba(20,20,40,.06); padding:10px;z-index:100; display:none;flex-direction:column;gap:4px; visibility:hidden;opacity:0;transform:translateY(-4px); transition:opacity .18s ease,visibility .18s ease,transform .18s ease; } #onetap-header-s1 .header-category-dd::before{ content:'';position:absolute;top:-7px;left:24px;width:12px;height:12px; background:#fff;border-left:1px solid rgba(0,0,0,.06);border-top:1px solid rgba(0,0,0,.06); transform:rotate(45deg);border-top-left-radius:3px; } #onetap-header-s1 .header-category-item.has-subcats:hover > .header-category-dd, #onetap-header-s1 .header-category-item.has-subcats:focus-within > .header-category-dd{ display:flex;visibility:visible;opacity:1;transform:translateY(0); } #onetap-header-s1 .header-category-item .header-category-dd .header-category-dd-item, #onetap-header-s1 .header-category-dd > a.header-category-dd-item{ display:block !important; padding:10px 20px !important; margin:0 !important; color:#1a1a1a !important; font-size:14px !important;font-weight:500 !important;line-height:1.4 !important; white-space:nowrap;text-decoration:none !important; border-radius:10px !important; background:transparent; transition:background .18s ease,color .18s ease,transform .18s ease; } #onetap-header-s1 .header-category-item .header-category-dd .header-category-dd-item + .header-category-dd-item, #onetap-header-s1 .header-category-dd > a.header-category-dd-item + a.header-category-dd-item{ margin-top:4px !important; } #onetap-header-s1 .header-category-item .header-category-dd .header-category-dd-item:hover, #onetap-header-s1 .header-category-dd > a.header-category-dd-item:hover{ background:rgba(0,0,0,.05) !important; color:#000 !important; transform:translateX(3px); } /* ── Mega menu panel ── */ /* Anchor the dropdown to the hovered category item so it drops directly under the category label, not under the centre of the whole header. JS below clamps the horizontal position when the panel would overflow the viewport on the right. */ #onetap-header-s1 .onetap-row-columns{position:relative;} #onetap-header-s1 .header-category-item.has-mega{position:relative;} #onetap-header-s1 .container{position:relative;} #onetap-header-s1 .header-megamenu{ position:absolute;top:100%;left:0;right:auto;width:auto;max-width:100vw; display:flex;gap:28px;align-items:flex-start; background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px; box-shadow:0 18px 44px rgba(20,20,40,.12),0 4px 14px rgba(20,20,40,.06); padding:24px 28px;z-index:120; /* Hard cap from Figma — long category lists scroll inside the panel instead of pushing it below the viewport. Inner promo column keeps its own height. */ max-height:612px;overflow-y:auto;overflow-x:hidden; visibility:hidden;opacity:0;transform:translateY(-4px); transition:opacity .18s ease,visibility .18s ease,transform .18s ease; } /* Slim, on-brand scrollbar so the internal scroll doesn't clash with the panel. */ #onetap-header-s1 .header-megamenu::-webkit-scrollbar{width:8px;} #onetap-header-s1 .header-megamenu::-webkit-scrollbar-track{background:transparent;} #onetap-header-s1 .header-megamenu::-webkit-scrollbar-thumb{ background:rgba(57,41,35,.18);border-radius:999px;border:2px solid #fff; } #onetap-header-s1 .header-megamenu::-webkit-scrollbar-thumb:hover{background:rgba(57,41,35,.32);} #onetap-header-s1 .header-megamenu{scrollbar-width:thin;scrollbar-color:rgba(57,41,35,.18) transparent;} /* Caret pointer: triangle ↑ visually anchors the panel to the hovered category. `--mm-caret-x` is recalculated by JS after the clamp so the arrow keeps pointing to the trigger even when the panel shifts left to avoid overflowing the viewport. */ #onetap-header-s1 .header-megamenu::before{ content:'';position:absolute;top:-8px;left:var(--mm-caret-x, 24px); width:0;height:0; border-left:8px solid transparent;border-right:8px solid transparent; border-bottom:8px solid #fff; filter:drop-shadow(0 -1px 0 rgba(0,0,0,.06)); pointer-events:none; } #onetap-header-s1 .header-category-item.has-mega:hover > .header-megamenu, #onetap-header-s1 .header-category-item.has-mega:focus-within > .header-megamenu, #onetap-header-s1 .header-category-item.has-mega.mm-open > .header-megamenu{ visibility:visible;opacity:1;transform:translateY(0); /* Active panel above any sibling panel still fading out (centered panels overlap otherwise). */ z-index:200; } /* Rigid grid layout: level-2 blocks are placed strictly one-per-column up to N rows. (Previous CSS-columns masonry occasionally collapsed 2 blocks into col 1 + left col N empty when content heights were close — grid is deterministic and adaptive.) */ #onetap-header-s1 .header-megamenu .mm-columns{ flex:0 0 auto;min-width:0;max-width:100%; /* Width = N columns of ~204px + (N-1) gaps of 28px → panel fits content, no empty cells. */ width:calc(var(--mm-cols,4) * 204px + (var(--mm-cols,4) - 1) * 28px); display:grid;grid-template-columns:repeat(var(--mm-cols,4), minmax(0, 1fr)); grid-auto-rows:max-content;column-gap:28px;row-gap:22px; } #onetap-header-s1 .header-megamenu .mm-col{min-width:0;} #onetap-header-s1 .header-megamenu .mm-col-img{display:block;border-radius:10px;overflow:hidden;margin-bottom:8px;line-height:0;} #onetap-header-s1 .header-megamenu .mm-col-img img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:204/118;} #onetap-header-s1 .header-megamenu .mm-col-title{ display:flex;align-items:center;justify-content:space-between;gap:6px; font-size:15px;font-weight:700;color:#1a1a1a;text-decoration:none;line-height:1.3;padding:2px 0 6px; } #onetap-header-s1 .header-megamenu .mm-col-title:hover{color:#000;} /* Пусті header-кнопки (catalog_btn / burger / module_html з обома hide_icon+hide_text) — ховаємо щоб не залишався білий "мертвий" квадрат поряд з логотипом. */ #onetap-header-s1 .onetap-catalog-btn:empty, #onetap-header-s1 .onetap-burger-btn:empty, #onetap-header-s1 .header-element.header-module:empty{display:none !important;} #onetap-header-s1 .header-megamenu .mm-sublist{display:flex;flex-direction:column;gap:2px;} #onetap-header-s1 .header-megamenu .mm-sub-item{ font-size:14px;color:#555;text-decoration:none;line-height:1.5;padding:3px 0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #onetap-header-s1 .header-megamenu .mm-sub-item:hover{color:#000;} #onetap-header-s1 .header-megamenu .mm-banner{ flex:0 0 275px;width:275px;height:400px;align-self:flex-start;display:block;position:relative; border-radius:12px;overflow:hidden;line-height:0;text-decoration:none; } #onetap-header-s1 .header-megamenu .mm-banner img{width:275px;height:400px;object-fit:cover;display:block;} #onetap-header-s1 .header-megamenu .mm-banner-text{ position:absolute;left:14px;right:14px;bottom:14px;color:#fff; font-size:14px;font-weight:600;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.5); } /* ════ Extended mega menu — Figma 1:1 (rail + promo cards + app banner) ════ */ /* Appearance tokens: admin overrides → CSS vars; Figma values live as var() fallbacks below. */ #onetap-header-s1 .mmx-panel{ --mmx-text:#131314;--mmx-bg:#ffffff;--mmx-active:#F7F7F7;--mmx-divider:#DDDDDD;--mmx-promo-bg:#F7F7F7;--mmx-gold:#F1AC4C;--mmx-brand:#392923; --mmx-panel-pad:24px;--mmx-region-gap:24px;--mmx-row-pad:12px;--mmx-row-radius:12px;--mmx-card-radius:12px;--mmx-card-pad:16px;--mmx-rail-w:350px;--mmx-thumb:40px;--mmx-chevron:24px;--mmx-panel-radius:16px;--mmx-appbanner-w:250px;} #onetap-header-s1 .header-megamenu.mmx-panel{display:flex;flex-wrap:nowrap;gap:var(--mmx-region-gap,24px);align-items:stretch;width:min(1720px,calc(100vw - 200px));max-width:none;padding:var(--mmx-panel-pad,24px);border-radius:var(--mmx-panel-radius,16px);font-family:'Inter',-apple-system,sans-serif;color:var(--mmx-text,#131314); /* Centered via CSS (no dependence on JS positioning → no first-load slide). Fixed to the viewport, just under the header. JS only refines `top` to the exact header bottom on open. */ position:fixed;left:50%;right:auto;top:var(--mmx-top,64px);transform:translate(-50%,-4px);} #onetap-header-s1 .header-category-item.has-mega:hover > .header-megamenu.mmx-panel, #onetap-header-s1 .header-category-item.has-mega:focus-within > .header-megamenu.mmx-panel, #onetap-header-s1 .header-category-item.has-mega.mm-open > .header-megamenu.mmx-panel{transform:translate(-50%,0);} /* Esc закрывает меню, хотя фокус остаётся на «Products» (B066): метка .mm-esc перебивает раскрытие по :focus-within/:hover, пока фокус и мышь не уйдут из пункта. */ #onetap-header-s1 .header-category-item.has-mega.mm-esc > .header-megamenu.header-megamenu, #onetap-header-s1 .header-category-item.has-subcats.mm-esc > .header-category-dd.header-category-dd{visibility:hidden;opacity:0;pointer-events:none;} /* Figma extended panel is a centered full-width overlay — no trigger caret. */ #onetap-header-s1 .header-megamenu.mmx-panel::before{display:none !important;} /* Height fits content (Figma panels hug their content); only scroll if it would exceed the viewport. */ /* Panel height: per-group `panel_height` sets a fixed height (inline max-height + scroll, Figma Products=560). 0/empty → auto (fit content, capped by viewport) so grids like Collections don't crop their cards. This is the fallback when no inline is present. */ #onetap-header-s1 .header-megamenu.mmx-panel{max-height:calc(100vh - 24px);} #onetap-header-s1 .mmx-main{flex:1 1 0;min-width:0;} #onetap-header-s1 .mmx-panel--tabs .mmx-main{display:flex;gap:var(--mmx-region-gap,24px);} /* Left category rail (Figma region A): 350px, divider on the right */ #onetap-header-s1 .mmx-tabs{flex:0 0 var(--mmx-rail-w,350px);display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--mmx-divider,#DDDDDD);padding-right:var(--mmx-region-gap,24px);} #onetap-header-s1 .mmx-tab{display:flex;align-items:center;gap:12px;background:none;border:0;text-align:left;padding:var(--mmx-row-pad,12px);border-radius:var(--mmx-row-radius,12px);cursor:pointer;color:var(--mmx-text,#131314);width:100%;} #onetap-header-s1 .mmx-tab:hover,#onetap-header-s1 .mmx-tab.is-active{background:var(--mmx-active,#F7F7F7);} #onetap-header-s1 .mmx-tab-ico{width:var(--mmx-thumb,40px);height:var(--mmx-thumb,40px);object-fit:cover;border-radius:8px;flex:0 0 var(--mmx-thumb,40px);} #onetap-header-s1 .mmx-tab-body{display:flex;flex-direction:column;flex:1;min-width:0;gap:4px;} #onetap-header-s1 .mmx-tab-name{font-size:18px;font-weight:600;line-height:1.21;} #onetap-header-s1 .mmx-tab-desc{font-size:16px;font-weight:400;line-height:1.375;color:var(--mmx-text,#131314);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #onetap-header-s1 .mmx-tab-arrow{flex:0 0 auto;color:var(--mmx-text,#131314);width:var(--mmx-chevron,24px);height:var(--mmx-chevron,24px);} #onetap-header-s1 .mmx-panes{flex:1 1 auto;min-width:0;} #onetap-header-s1 .mmx-pane{display:none;} #onetap-header-s1 .mmx-pane.is-active{display:block;} /* ── promo-subcats layout: рельс главных категорий (общий .mmx-tabs) + средний список подкатегорий, который по hover свапает правую зону карточек. ── */ #onetap-header-s1 .mmx-panel--promo-subcats .mmx-main{display:flex;gap:var(--mmx-region-gap,24px);} #onetap-header-s1 .mmx-pane--subcats .mmx-subwrap{display:flex;gap:var(--mmx-region-gap,24px);align-items:flex-start;} #onetap-header-s1 .mmx-subnav{flex:0 0 260px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--mmx-divider,#DDDDDD);padding-right:var(--mmx-region-gap,24px);padding-bottom:var(--mmx-panel-pad,24px);} #onetap-header-s1 .mmx-subnav-item{display:flex;align-items:center;gap:10px;text-decoration:none;padding:var(--mmx-row-pad,12px);border-radius:var(--mmx-row-radius,12px);color:var(--mmx-text,#131314);cursor:pointer;} #onetap-header-s1 .mmx-subnav-item:hover,#onetap-header-s1 .mmx-subnav-item.is-active{background:var(--mmx-active,#F7F7F7);color:var(--mmx-text,#131314);} /* Фокус с клавиатуры в мегаменю — как наведение: фон строки, без общей обводки сайта (stylesheet.css, B065) — рамка поверх скруглённых строк выглядела чужой. */ #onetap-header-s1 .mmx-panel :is(a,button):focus-visible{outline:none !important;} #onetap-header-s1 .mmx-tab:focus-visible,#onetap-header-s1 .mmx-subnav-item:focus-visible{background:var(--mmx-active,#F7F7F7);} #onetap-header-s1 .mmx-panel a:not(.mmx-tab):not(.mmx-subnav-item):focus-visible{text-decoration:underline;} #onetap-header-s1 .mmx-subnav-ico{width:var(--mmx-thumb,40px);height:var(--mmx-thumb,40px);object-fit:cover;border-radius:8px;flex:0 0 var(--mmx-thumb,40px);} #onetap-header-s1 .mmx-subnav-body{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px;} #onetap-header-s1 .mmx-subnav-name{font-size:16px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #onetap-header-s1 .mmx-subnav-desc{font-size:13px;font-weight:400;line-height:1.3;color:var(--mmx-soft,#6b6b6b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #onetap-header-s1 .mmx-subnav-chev{flex:0 0 auto;opacity:.5;} #onetap-header-s1 .mmx-subpanes{flex:1 1 auto;min-width:0;} #onetap-header-s1 .mmx-subpane{display:none;} #onetap-header-s1 .mmx-subpane.is-active{display:block;} /* Планшет/мобайл: hover недоступен на тач — прячем правую зону, средний список работает как навигация. */ @media (max-width:991px){ #onetap-header-s1 .mmx-pane--subcats .mmx-subwrap{flex-direction:column;gap:0;} #onetap-header-s1 .mmx-subnav{flex-basis:auto;width:100%;border-right:0;padding-right:0;} #onetap-header-s1 .mmx-subpanes{display:none;} } /* Скролл колонок, а не всей панели. Раньше прокручивалась панель целиком: крутишь список подкатегорий — уезжает и рейка категорий, и карточки, а дойдя до конца, прокрутка уходила на страницу. Теперь у рейки, списка подкатегорий и зоны карточек свой скролл, панель стоит на месте, а overscroll-behavior не отдаёт прокрутку странице. Высота колонок — растяжка flex по высоте панели (её max-height задан inline). */ @media (min-width:992px){ #onetap-header-s1 .header-megamenu.mmx-panel{overscroll-behavior:contain;} #onetap-header-s1 .header-megamenu.mmx-panel--tabs, #onetap-header-s1 .header-megamenu.mmx-panel--promo-subcats{overflow:hidden;} #onetap-header-s1 .mmx-panel--tabs .mmx-main, #onetap-header-s1 .mmx-panel--promo-subcats .mmx-main{min-height:0;align-items:stretch;} #onetap-header-s1 .mmx-panel--tabs .mmx-tabs, #onetap-header-s1 .mmx-panel--promo-subcats .mmx-tabs, #onetap-header-s1 .mmx-panel--tabs .mmx-panes, #onetap-header-s1 .mmx-panel--promo-subcats .mmx-subnav, #onetap-header-s1 .mmx-panel--promo-subcats .mmx-subpanes{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(57,41,35,.18) transparent;} #onetap-header-s1 .mmx-panel--promo-subcats .mmx-panes{display:flex;flex-direction:column;min-height:0;overflow:hidden;} #onetap-header-s1 .mmx-panel--promo-subcats .mmx-pane.is-active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;} #onetap-header-s1 .mmx-panel--promo-subcats .mmx-pane--subcats .mmx-subwrap{flex:1 1 auto;min-height:0;align-items:stretch;} #onetap-header-s1 .mmx-panel--promo-subcats .mmx-subpanes .mmx-cols{padding-bottom:var(--mmx-panel-pad,24px);} /* Список подкатегорий (средняя колонка) — свой скролл высотой в панель: длинный список крутится на месте, карточки рядом не уезжают. Минус отступы панели сверху/снизу и «воздух» под колонками. */ #onetap-header-s1 .mmx-col--categories{max-height:calc(var(--mmx-panel-h, calc(100vh - 24px)) - var(--mmx-panel-pad,24px) * 3);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(57,41,35,.18) transparent;} } /* Columns wrap to a new ROW when they can't fit their min-width — so the promo/cards column (image + name + desc + link) drops to the next line on narrower viewports instead of being squeezed into an unreadable per-word-wrapping sliver. */ #onetap-header-s1 .mmx-cols{display:flex;gap:var(--mmx-region-gap,24px);flex-wrap:wrap;row-gap:var(--mmx-region-gap,24px);align-items:flex-start;} /* Скрол-контейнер (.mmx-panel, overflow-y:auto) НЕ враховує власний padding-bottom у scrollHeight, тому при скролі донизу остання колонка (напр. app-banner після переносу) впритул тиснеться до краю панелі. Тому «повітря» знизу вішаємо на контент, що виходить за межі (рейка табів + колонки), а не на панель — тоді при прокрутці до кінця gap зберігається. */ #onetap-header-s1 .mmx-tabs, #onetap-header-s1 .mmx-cols{padding-bottom:var(--mmx-panel-pad,24px);} #onetap-header-s1 .mmx-col{flex:1 1 200px;min-width:200px;display:flex;flex-direction:column;} #onetap-header-s1 .mmx-col--appbanner{flex:0 0 var(--mmx-appbanner-w,250px);min-width:var(--mmx-appbanner-w,250px);} /* Sub-links (navigation) are the priority column — give them the most room so real category names (e.g. "Decorative Panels and Screens") don't wrap to 3 lines. */ #onetap-header-s1 .mmx-col--categories{flex:1.7 1 240px;min-width:240px;} /* Figma: the large promo (Wooden World Maps) column — sits between sub-links and stacked cards. */ #onetap-header-s1 .mmx-col--promowide{flex:1.15 1 220px;min-width:220px;} #onetap-header-s1 .mmx-col--cards{gap:var(--mmx-region-gap,24px);} #onetap-header-s1 .mmx-coltitle{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#9a9a9a;margin-bottom:10px;} /* "Explore all →" header row (Figma col.1): title left + label right, active-tinted */ /* Figma col.1 header: title + "Explore all →" STACKED on the left, chevron on the right, tinted row. */ #onetap-header-s1 .mmx-subhead{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:var(--mmx-text,#131314);background:var(--mmx-active,#F7F7F7);border-radius:var(--mmx-row-radius,12px);padding:var(--mmx-row-pad,12px);margin-bottom:6px;} #onetap-header-s1 .mmx-subhead-body{display:flex;flex-direction:column;gap:4px;min-width:0;} #onetap-header-s1 .mmx-subhead-name{font-size:16px;font-weight:600;line-height:1.375;} #onetap-header-s1 .mmx-subhead-link{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:400;color:var(--mmx-text,#131314);line-height:1.375;white-space:nowrap;} #onetap-header-s1 .mmx-subhead-chev{flex:0 0 auto;width:var(--mmx-chevron,24px);height:var(--mmx-chevron,24px);color:var(--mmx-text,#131314);} /* Link/subcategory rows */ #onetap-header-s1 .mmx-item{display:flex;gap:10px;align-items:center;text-decoration:none;padding:7px 0;color:var(--mmx-text,#131314);border-bottom:1px solid #f3efe9;} #onetap-header-s1 .mmx-item:last-child{border-bottom:0;} #onetap-header-s1 .mmx-item-ico{width:24px;height:24px;object-fit:contain;flex:0 0 24px;} #onetap-header-s1 .mmx-item-body{display:flex;flex-direction:column;min-width:0;flex:1;} #onetap-header-s1 .mmx-item-name{font-size:14px;font-weight:500;line-height:1.3;display:flex;align-items:center;gap:6px;} #onetap-header-s1 .mmx-item-desc{font-size:12px;color:#888;line-height:1.35;margin-top:1px;} #onetap-header-s1 .mmx-item-chev{flex:0 0 auto;color:#c7bdb0;margin-left:auto;} /* Figma col.1 sub-links: 16/600 rows, 12px padding, 12px radius, hover-tinted, chevron 24 */ #onetap-header-s1 .mmx-col--categories .mmx-item{align-items:center;padding:var(--mmx-row-pad,12px);border-bottom:0;border-radius:var(--mmx-row-radius,12px);} #onetap-header-s1 .mmx-col--categories .mmx-item:hover{background:var(--mmx-active,#F7F7F7);} #onetap-header-s1 .mmx-col--categories .mmx-item-name{font-size:16px;font-weight:600;line-height:1.375;} #onetap-header-s1 .mmx-col--categories .mmx-item-chev{width:var(--mmx-chevron,24px);height:var(--mmx-chevron,24px);color:var(--mmx-text,#131314);} /* rich link items (Collections-style): icon + name + description, optional icon background */ #onetap-header-s1 .mmx-item--rich{align-items:flex-start;padding:9px 0;border-bottom:0;gap:12px;} #onetap-header-s1 .mmx-item-icowrap{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;} #onetap-header-s1 .mmx-item-icowrap--bg{width:40px;height:40px;border-radius:50%;background:#f4efe8;} #onetap-header-s1 .mmx-item--rich .mmx-item-ico{width:24px;height:24px;} #onetap-header-s1 .mmx-item--rich .mmx-item-icowrap:not(.mmx-item-icowrap--bg) .mmx-item-ico{width:28px;height:28px;} #onetap-header-s1 .mmx-item:hover .mmx-item-name{color:#000;} #onetap-header-s1 .mmx-item:hover .mmx-item-chev{color:#8a5a2b;} #onetap-header-s1 .mmx-badge{font-size:9px;font-weight:700;text-transform:uppercase;background:#f1ece5;color:#8a5a2b;border-radius:4px;padding:1px 5px;letter-spacing:.03em;} /* image cards (generic images column) */ #onetap-header-s1 .mmx-card{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--mmx-card-radius,12px);overflow:hidden;color:var(--mmx-text,#131314);background:var(--mmx-promo-bg,#F7F7F7);flex:0 0 auto;transition:box-shadow .15s,transform .15s;} #onetap-header-s1 .mmx-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-1px);} #onetap-header-s1 .mmx-card img{width:100%;height:auto;max-height:190px;display:block;object-fit:cover;} #onetap-header-s1 .mmx-card-body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px;} #onetap-header-s1 .mmx-card-name{display:block;font-size:14px;font-weight:700;line-height:1.25;} #onetap-header-s1 .mmx-card-desc{display:block;font-size:12px;color:#7d7468;line-height:1.4;} #onetap-header-s1 .mmx-card-cta{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:#8a5a2b;margin-top:4px;} #onetap-header-s1 .mmx-card:hover .mmx-card-cta{gap:8px;} /* Promo cards (Figma col.2 large = full-bleed image + bottom overlay; col.3 small = text-top + image-bottom) */ #onetap-header-s1 .mmx-promo{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--mmx-text,#131314);border-radius:var(--mmx-card-radius,12px);overflow:hidden;background:var(--mmx-promo-bg,#F7F7F7);flex:1 1 0;min-height:0;transition:transform .15s;} #onetap-header-s1 .mmx-promo:hover{transform:translateY(-1px);} /* Figma col.2: image fills the top, text block below on the card bg (NOT an overlay). */ /* flex:0 0 auto — карточка росте під контент (картинка + текст), а не тиснеться до висоти колонки. Інакше картинка натуральної висоти (height:auto) переростала фіксовані 260px і overflow:hidden обрізав увесь текстовий блок під нею (title/desc/cta зникали). */ #onetap-header-s1 .mmx-promo--large{min-height:260px;flex:0 0 auto;} /* Картинку показуємо ПОВНІСТЮ (object-fit:contain, без обрізки), масштабовану під ширину колонки і обмежену admin max-width/max-height (inline). Раніше тут стояло flex:1 1 auto;min-height:120px; object-fit:cover — картинку тиснуло до 120px і обрізало, а виставлені в адмінці W/H (351×368) ігнорувалися (вони лише caps). height:auto дає натуральну висоту за співвідношенням сторін. */ #onetap-header-s1 .mmx-promo--large .mmx-promo-img{width:100%;height:auto;object-fit:contain;} #onetap-header-s1 .mmx-promo--large .mmx-promo-body{padding:var(--mmx-card-pad,16px);display:flex;flex-direction:column;gap:12px;} #onetap-header-s1 .mmx-promo--small{gap:12px;padding:var(--mmx-card-pad,16px);min-height:0;flex:0 0 auto;} #onetap-header-s1 .mmx-promo--small .mmx-promo-body{display:flex;flex-direction:column;gap:12px;order:0;} /* Image shown in FULL (contain, no crop, no distort); grows the card to fit. max-w/max-h from admin. */ /* margin:0 auto — вертикальний відступ дає gap:12px контейнера .mmx-promo--small (не дублюємо margin-top:12px, інакше було 24px). auto лишаємо для гориз. центрування, якщо картинка вужча за колонку (max-width з адмінки). */ #onetap-header-s1 .mmx-promo--small .mmx-promo-img{order:1;margin:0 auto;width:100%;height:auto;object-fit:contain;border-radius:8px;} #onetap-header-s1 .mmx-promo-title{font-size:18px;font-weight:600;line-height:1.21;} #onetap-header-s1 .mmx-promo-desc{font-size:16px;font-weight:400;line-height:1.375;} #onetap-header-s1 .mmx-promo-cta{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:500;margin-top:2px;} #onetap-header-s1 .mmx-promo:hover .mmx-promo-cta{gap:9px;} /* App-promo banner (Figma col.4): dark gradient, pill, headline, CTA box, store badges, mascot */ #onetap-header-s1 .mmx-appbanner{position:relative;display:block;border-radius:var(--mmx-card-radius,12px);overflow:hidden;text-decoration:none;color:#fff;min-height:420px;height:100%;isolation:isolate;} /* The theme's `#id .header-category-item a{display:inline-flex;align-items:center}` (specificity 1,1,1) otherwise wins and vertically-centers the banner content (pushing the pill ~63px down). Force the anchor back to block so the content flows from the top (pill at padding 16, exactly like Figma). */ #onetap-header-s1 .header-category-item .mmx-appbanner{display:block !important;align-items:stretch !important;} /* Figma bg: real bright-orange light-streaks image (fill_Z1KPMP) glowing from the top-right, screen-blended over the configured brown radial gradient (inline background). Content sits above (z-index:1); the gift box above that (z-index:2). */ #onetap-header-s1 .mmx-appbanner::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:url('https://bobrcraft.onetap.com.ua/image/cache/catalog/Bobrcraft/megamenu/appbanner-streaks-800x800-bound.png.webp') no-repeat; background-position:right -22px top -80px;background-size:156% auto;mix-blend-mode:screen;} /* Figma Ellipse 1335 (#F8BA65, blurred) — warm glow behind the gift box at the bottom. */ #onetap-header-s1 .mmx-appbanner::after{content:'';position:absolute;z-index:0;pointer-events:none; left:34%;bottom:1%;width:60%;height:22%;border-radius:50%; background:radial-gradient(closest-side, rgba(248,186,101,.55), rgba(248,186,101,0) 72%);filter:blur(4px);} #onetap-header-s1 .mmx-ab-mascot{position:absolute;right:-10px;bottom:-40px;width:70%;max-width:176px;height:auto;z-index:2;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));} /* Figma layout_O203BH: column, gap 20, padding 16. padding-bottom reserves room for the gift box. */ #onetap-header-s1 .mmx-ab-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;padding:var(--mmx-card-pad,16px);padding-bottom:104px;} /* Figma layout_6N272T: top block (pill + heading/body), gap 16. */ #onetap-header-s1 .mmx-ab-top{display:flex;flex-direction:column;gap:16px;} #onetap-header-s1 .mmx-ab-pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:4px 12px 4px 4px;border-radius:100px;background:var(--mmx-brand,#392923);border:1px solid var(--mmx-gold,#F1AC4C);color:var(--mmx-gold,#F1AC4C);font-size:12px;font-weight:500;letter-spacing:-.02em;line-height:1;text-transform:uppercase;} #onetap-header-s1 .mmx-ab-pill img{width:24px;height:24px;flex:0 0 24px;object-fit:contain;} #onetap-header-s1 .mmx-ab-head{display:flex;flex-direction:column;gap:8px;align-items:flex-start;} #onetap-header-s1 .mmx-ab-headline{font-family:'Gunterz','Inter',sans-serif;font-weight:500;font-size:49px;line-height:1.05;color:var(--mmx-gold,#F1AC4C);} #onetap-header-s1 .mmx-ab-subhead{font-family:'Sora','Inter',sans-serif;font-weight:700;font-size:21px;line-height:1.238;color:#fff;} #onetap-header-s1 .mmx-ab-body{font-family:'DM Sans','Inter',sans-serif;font-weight:400;font-size:16px;line-height:1.302;color:#fff;max-width:206px;} #onetap-header-s1 .mmx-ab-accent{color:var(--mmx-gold,#F1AC4C);font-weight:600;} /* Figma layout_EFX1RA: download card — bg #442E22, 1px rgba(241,172,76,.3), radius 11, pad 8, gap 11; content left, stores full-width. */ #onetap-header-s1 .mmx-ab-cta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:11px;padding:8px;border-radius:11px;background:#442E22;border:1px solid rgba(241,172,76,.3);} #onetap-header-s1 .mmx-ab-cta-txt{display:flex;flex-direction:column;gap:0;align-self:flex-start;} #onetap-header-s1 .mmx-ab-cta-title{font-family:'Open Sans','Inter',sans-serif;font-weight:600;font-size:15px;line-height:1.36;color:var(--mmx-gold,#F1AC4C);text-align:left;} #onetap-header-s1 .mmx-ab-cta-sub{font-family:'Open Sans','Inter',sans-serif;font-weight:400;font-size:14px;line-height:1.36;color:#fff;text-align:left;} #onetap-header-s1 .mmx-ab-stores{display:flex;flex-direction:column;gap:10px;align-self:stretch;width:100%;} #onetap-header-s1 .mmx-ab-stores img{width:100%;height:auto;display:block;} #onetap-header-s1 .mmx-ab-link{position:absolute;inset:0;z-index:1;} #onetap-header-s1 .mmx-appbanner .mmx-ab-inner{pointer-events:none;z-index:2;} #onetap-header-s1 .mmx-ab-store{display:block;pointer-events:auto;} /* The theme's `.header-category-item a{padding:0}` (and per-element pad) reset zeroes our Figma paddings on the mmx blocks — restore them here with higher specificity + !important. */ #onetap-header-s1 .header-category-item .mmx-subhead{padding:var(--mmx-row-pad,12px) !important;display:flex !important;} #onetap-header-s1 .header-category-item .mmx-col--categories .mmx-item{padding:var(--mmx-row-pad,12px) !important;} #onetap-header-s1 .header-category-item .mmx-promo--small{padding:var(--mmx-card-pad,16px) !important;} #onetap-header-s1 .header-category-item .mmx-promo--large .mmx-promo-body{padding:var(--mmx-card-pad,16px) !important;} #onetap-header-s1 .header-category-item .mmx-cta{padding:10px 14px !important;} /* The theme's `.header-category-item a{align-items:center}` reset centers our card content — force left alignment on the promo cards (Products) so title/desc/CTA sit at the 16px left edge. */ #onetap-header-s1 .header-category-item .mmx-promo{align-items:flex-start;} #onetap-header-s1 .mmx-promo-body{align-self:stretch;} /* ════ Collections grid (layout=grid): toolbar chips + Sort by + collection cards ════ */ #onetap-header-s1 .mmx-panel--grid{flex-direction:column;} #onetap-header-s1 .mmx-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;} #onetap-header-s1 .mmx-chips{display:flex;gap:16px;flex-wrap:wrap;align-items:center;min-width:0;} #onetap-header-s1 .header-category-item .mmx-chip{display:inline-flex;align-items:center;gap:8px;padding:12px !important;height:48px;border-radius:10px;background:#fff;border:1px solid var(--mmx-divider,#DDDDDD);color:var(--mmx-text,#131314);font-size:16px;font-weight:500;line-height:1.25;text-decoration:none;white-space:nowrap;cursor:pointer;appearance:none;-webkit-appearance:none;font-family:inherit;} #onetap-header-s1 .header-category-item .mmx-chip.is-active{background:var(--mmx-brand,#392923);border-color:var(--mmx-brand,#392923);color:#fff;} #onetap-header-s1 .mmx-chip-thumb{width:32px;height:32px;border-radius:6px;object-fit:cover;flex:0 0 32px;} #onetap-header-s1 .mmx-chip-thumb--ico{width:24px;height:24px;flex:0 0 24px;border-radius:0;object-fit:contain;} #onetap-header-s1 .mmx-chip.is-active .mmx-chip-thumb--ico{filter:brightness(0) invert(1);} #onetap-header-s1 .mmx-sort{display:flex;align-items:center;gap:12px;white-space:nowrap;} #onetap-header-s1 .mmx-sort-label{font-size:14px;color:#606162;} #onetap-header-s1 .mmx-sort-value{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--mmx-text,#131314);border:1px solid var(--mmx-divider,#DDDDDD);border-radius:10px;padding:9px 12px;} #onetap-header-s1 .mmx-cardgrid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;} /* Each chip (tab) has its own card pane; only the active one shows. */ #onetap-header-s1 .mmx-cardpane{display:none;} #onetap-header-s1 .mmx-cardpane.is-active{display:flex;} #onetap-header-s1 .header-category-item .mmx-collcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;flex:1 1 360px;max-width:406px;min-width:280px;min-height:320px;padding:20px !important;border-radius:10px;overflow:hidden;text-decoration:none;color:#fff;background-size:cover;background-position:center;background-repeat:no-repeat;} #onetap-header-s1 .mmx-collcard-top{display:flex;flex-direction:column;gap:16px;max-width:240px;} #onetap-header-s1 .mmx-collcard-txt{display:flex;flex-direction:column;gap:8px;} #onetap-header-s1 .mmx-collcard-title{font-size:20px;font-weight:600;line-height:1.21;text-shadow:0 1px 1px rgba(0,0,0,.45);} #onetap-header-s1 .mmx-collcard-desc{font-size:16px;font-weight:400;line-height:1.375;text-shadow:0 1px 1px rgba(0,0,0,.45);} #onetap-header-s1 .mmx-collcard-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:0 16px;height:40px;border-radius:8px;background:#fff;color:var(--mmx-text,#131314);font-size:14px;font-weight:500;transition:gap .15s;} #onetap-header-s1 .mmx-collcard:hover .mmx-collcard-cta{gap:9px;} #onetap-header-s1 .mmx-collcard-count{font-size:16px;font-weight:400;text-shadow:0 1px 1px rgba(0,0,0,.45);margin-top:16px;} /* Laptop/tablet: chips scroll horizontally if cramped; cards keep wrapping */ @media (min-width:992px) and (max-width:1366px){ #onetap-header-s1 .mmx-collcard{flex-basis:300px;min-width:260px;} } /* Generic banner column + group banner/CTA (kept for non-Figma configs) */ #onetap-header-s1 .mmx-banner{flex:0 0 auto;align-self:flex-start;display:block;border-radius:var(--mmx-card-radius,12px);overflow:hidden;line-height:0;text-decoration:none;position:relative;} #onetap-header-s1 .mmx-banner img{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--mmx-card-radius,12px);} #onetap-header-s1 .header-megamenu.mmx-panel > .mmx-banner{flex:0 0 232px;align-self:stretch;} #onetap-header-s1 .header-megamenu.mmx-panel > .mmx-banner img{height:100%;} #onetap-header-s1 .mmx-banner-text{position:absolute;left:14px;right:14px;bottom:14px;color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5);} #onetap-header-s1 .mmx-cta{flex-basis:100%;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--mmx-text,#131314);background:#f6f3ef;border-radius:10px;padding:10px 14px;} #onetap-header-s1 .mmx-cta-ico{width:28px;height:28px;object-fit:contain;} #onetap-header-s1 .mmx-cta-text{font-weight:600;font-size:14px;flex:1;} #onetap-header-s1 .mmx-cta svg{color:#8a5a2b;} /* per-resolution column/group visibility (OneTap breakpoints) */ @media (min-width:1367px){ #onetap-header-s1 .mmx-hide-desktop{display:none !important;} } @media (min-width:992px) and (max-width:1366px){ #onetap-header-s1 .mmx-hide-laptop{display:none !important;} } @media (min-width:501px) and (max-width:991px){ #onetap-header-s1 .mmx-hide-tablet{display:none !important;} } @media (max-width:500px){ #onetap-header-s1 .mmx-hide-mobile{display:none !important;} } /* Subcategory thumbnails (admin: «показывать картинки подкатегорий» + на каких разрешениях). Цель — миниатюры подкатегорий: колоночные пункты (tabs/columns → .mmx-item-icowrap) и средний список promo-subcats (.mmx-subnav-ico). Левый рельс отделов (.mmx-tab-ico) НЕ трогаем. Off → скрыты всегда; иначе — скрыты на невыбранных брейкпоинтах (те же границы, что выше). */ #onetap-header-s1 .mmx-item-icowrap, .mmx-subnav-ico{display:none !important;} /* Laptop (≤1366): колонки НЕ прячем и НЕ сжимаем в одну строку — в настройках стоит «показывать на всех разрешениях», поэтому при нехватке ширины они ПЕРЕНОСЯТСЯ на следующую строку (flex-wrap:wrap — дефолт из .mmx-cols). Тут только поджимаем рейку табов и гэпы, чтобы колонкам оставалось больше места до момента переноса. align-content:flex-start прижимает ряды к верху (без растягивания пустотами). */ @media (min-width:992px) and (max-width:1366px){ #onetap-header-s1 .mmx-panel--tabs .mmx-main{gap:16px;} #onetap-header-s1 .mmx-tabs{flex-basis:264px;padding-right:16px;} #onetap-header-s1 .mmx-tab{padding:10px;} #onetap-header-s1 .mmx-tab-name{font-size:15px;} #onetap-header-s1 .mmx-tab-desc{font-size:13px;} #onetap-header-s1 .mmx-cols{gap:16px;row-gap:16px;align-content:flex-start;} } /* Вузький лаптоп (≤1199): підрізаємо min-width колонок, щоб на ряд ставало 2 колонки (а не 1 — інакше 4 колонки в стовпчик = дуже висока панель зі скролом). Колонки все одно тягнуться (flex-grow) і заповнюють ряд. Так виходить акуратний 2×2-перенос. */ @media (min-width:992px) and (max-width:1199px){ #onetap-header-s1 .mmx-col{min-width:185px;flex-basis:185px;} #onetap-header-s1 .mmx-col--categories{min-width:195px;flex-basis:195px;} #onetap-header-s1 .mmx-col--promowide{min-width:185px;flex-basis:185px;} } @media (max-width:991px){ #onetap-header-s1 .header-megamenu{display:none !important;} } #onetap-header-s1 .header-link a, #onetap-header-s1 .onetap-phone-main, #onetap-header-s1 .onetap-lc-btn{gap:10px;} #onetap-header-s1 .header-link i, #onetap-header-s1 .onetap-phone-main i, #onetap-header-s1 .onetap-lc-btn i:first-child{ font-size:20px; } #onetap-header-s1 .onetap-icon-img{width:20px;height:20px;vertical-align:middle;} #onetap-header-s1 .header-link i, #onetap-header-s1 .element-search .onetap-search-toggle i, #onetap-header-s1 .element-search .onetap-search-form-icon, #onetap-header-s1 .onetap-lc-pill-icon{ font-family:"FontAwesome" !important;font-weight:normal !important;text-shadow:none !important;-webkit-font-smoothing:antialiased; } #onetap-header-s1 .header-link i, #onetap-header-s1 .element-search .onetap-search-toggle, #onetap-header-s1 .element-search .onetap-search-toggle i, #onetap-header-s1 .element-search .onetap-search-form-icon{color:#131314 !important;} #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-pill-icon{color:#7D7D7D !important;} #onetap-header-s1 .onetap-phone{position:relative;display:inline-block} #onetap-header-s1 .onetap-phone-main{display:inline-flex;align-items:center;gap:6px;color:#131314;text-decoration:none;} #onetap-header-s1 .onetap-phone-caret{margin-left:6px;font-size:12px;opacity:.75} #onetap-header-s1 .onetap-phone-dd{display:none;position:absolute;top:100%;left:0;min-width:220px;max-width:calc(100vw - 20px);z-index:9999;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.12);padding:6px;margin-top:6px} #onetap-header-s1 .onetap-phone-dd.is-open{display:flex;flex-direction:column} @media (max-width:991px) { #onetap-header-s1 .onetap-phone-dd{left:auto;right:0;min-width:160px;max-width:calc(100vw - 20px)} } #onetap-header-s1 .onetap-phone-item{padding:8px 10px;border-radius:8px;color:#463933;text-decoration:none;display:block} #onetap-header-s1 .onetap-phone-item:hover{background:rgba(0,0,0,.05)} #onetap-header-s1 .onetap-lc{display:flex;align-items:center;gap:18px} #onetap-header-s1 .onetap-lc-block{position:relative;display:inline-block} #onetap-header-s1 .onetap-lc-btn{appearance:none;border:0;background:transparent;padding:0;display:inline-flex;align-items:center;gap:8px;color:#131314;cursor:pointer;} #onetap-header-s1 .onetap-lc-val{font-weight:500} #onetap-header-s1 .onetap-lc-caret{font-size:12px;opacity:.75} #onetap-header-s1 .onetap-lc-dd{display:none;position:absolute;top:100%;left:0;max-width:calc(100vw - 20px);margin-top:6px;z-index:9999;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.12);padding:6px} #onetap-header-s1 .onetap-lc-dd.is-open{display:block} @media (max-width:991px) { #onetap-header-s1 .onetap-lc-dd{left:auto;right:0;max-width:calc(100vw - 20px)} } #onetap-header-s1 .onetap-lc-dd form{display:flex;flex-direction:column;gap:4px;margin:0} #onetap-header-s1 .onetap-lc-item{border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;color:#463933} #onetap-header-s1 .onetap-lc-item:hover{background:rgba(0,0,0,.05)} #onetap-header-s1 .onetap-lc-item.is-active{background:rgba(0,0,0,.08)} #onetap-header-s1 .onetap-lc-dd a.onetap-lc-item{display:block;text-decoration:none} /* lang_curr pill mode (borderSide=all): флаг країни + EN · EUR + каретка у правому кутку. Редизайн 1.3: border/radius/background КАПСУЛИ беруться з налаштувань елемента (Border сторона/цвет/radius в інспекторі → inline addStyle), тому тут їх НЕ чіпаємо. Задаємо лише внутрішній відступ, розкладку контенту та сірий текст. */ #onetap-header-s1 .element-lang_curr.is-lc-pill, #onetap-header-s1 .element-lang_curr:has(.onetap-lc.is-pill){ box-sizing:border-box; /* addStyle інлайном лишає padding:20px (дефолт елемента) — перекриваємо !important, інакше вміст не влазить у капсулу W×H з налаштувань. Border/radius НЕ чіпаємо. */ padding:4px 12px !important; display:inline-flex;align-items:center; } /* gap:0 — рівні відступи задаються ЛИШЕ через margin флага + padding блоків, інакше container-gap і роздільники блоків складаються → «беспорядок» (req 5). width:100% + flex-start: контент зліва, каретка притиснута у правий кут (req: галочка в кутку). */ #onetap-header-s1 .onetap-lc.is-pill{ gap:0;width:100%; display:inline-flex;align-items:center;justify-content:flex-start; line-height:1;cursor:pointer; } /* Флаг країни — прямокутний, не круглий; фіксований розмір під висоту рядка. */ #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-flag{ width:20px;height:14px;border-radius:2px;object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.08); margin:0 8px 0 0;flex-shrink:0; } /* Глобус-фолбек (коли флага немає) — той самий відступ. */ #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-pill-icon{ display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; line-height:1;opacity:.9; margin:0 8px 0 0; } #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-pill-icon.onetap-icon-img{object-fit:contain;} #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-caret{display:none !important;} #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-block{display:inline-flex;align-items:center;} /* Рівні 14px між блоками (BE · RU · EUR); роздільник — крапка-байдж по центру відступу. */ #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-block + .onetap-lc-block{position:relative;padding-left:14px;} #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-block + .onetap-lc-block::before{ content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%); width:3px;height:3px;border-radius:50%;background:#B8B8B8; } #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-btn{ padding:0;font-size:13px;font-weight:500;letter-spacing:.2px;line-height:1; } /* Сірий текст (req 3). */ #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-val{font-weight:500;color:#7D7D7D;} /* Каретка-дропдаун — одразу праворуч від EUR (частина контенту, невеликий відступ). */ #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-chev{ display:inline-flex;align-items:center;flex-shrink:0; margin-left:8px;color:#7D7D7D; } /* Mobile/tablet compact pill «EN (€)» — hide flag + BE·EN·EUR blocks, show compact label. */ #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-compact{display:none;font-weight:500;font-size:13px;letter-spacing:.2px;color:#6E6E6E;white-space:nowrap;} @media (max-width:991px){ #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-pill-icon, #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-flag, #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-block{display:none !important;} #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-compact{display:inline-flex;align-items:center;} /* Стрілку-каретку ховаємо на мобілі/планшеті (≤991px) — лишається лише «EN (€)». */ #onetap-header-s1 .onetap-lc.is-pill .onetap-lc-chev{display:none !important;} } #onetap-header-s1 .element-logo{ width:264px; max-width:264px; height:40px; } #onetap-header-s1 .element-logo .onetap-burger-btn, #onetap-header-s1 .element-logo .onetap-catalog-btn { width:264px !important;max-width:264px !important;height:40px !important;} #onetap-header-s1 .onetap-column .element-logo{ flex:0 0 auto; } #onetap-header-s1 .element-search{ width:287px; max-width:287px; min-height:32px; max-height:32px; margin-left:auto;margin-right:auto;justify-content:center;align-self:center; } #onetap-header-s1 .element-search .onetap-burger-btn, #onetap-header-s1 .element-search .onetap-catalog-btn { width:287px !important;max-width:287px !important;min-height:32px !important;max-height:32px !important;} #onetap-header-s1 .element-cart{ } @media (max-width:500px) { #onetap-header-s1 .element-cart:not(.ot-mv-burger-dst){display:none !important;} } @media (min-width:501px) and (max-width:991px) { #onetap-header-s1 .element-cart:not(.ot-mv-burger-dst){display:none !important;} } #onetap-header-s1 .element-wishlist{ margin-left:auto;margin-right:auto;justify-content:center;align-self:center; } @media (max-width:500px) { #onetap-header-s1 .element-wishlist:not(.ot-mv-burger-dst){display:none !important;} } @media (min-width:501px) and (max-width:991px) { #onetap-header-s1 .element-wishlist:not(.ot-mv-burger-dst){display:none !important;} } @media (max-width:500px) { #onetap-header-s1 .element-wishlist.ot-mv-burger-src{display:none !important;} } #onetap-header-s1 .element-login{ margin-left:auto;margin-right:auto;justify-content:center;align-self:center; } @media (max-width:500px) { #onetap-header-s1 .element-login:not(.ot-mv-burger-dst){display:none !important;} } @media (min-width:501px) and (max-width:991px) { #onetap-header-s1 .element-login:not(.ot-mv-burger-dst){display:none !important;} } #onetap-header-s1 .element-lang_curr{ width:160px; max-width:160px; height:32px; } #onetap-header-s1 .element-lang_curr .onetap-burger-btn, #onetap-header-s1 .element-lang_curr .onetap-catalog-btn { width:160px !important;max-width:160px !important;height:32px !important;} #onetap-header-s1 .element-extension\/module\/onetap_mega_menu{ } @media (max-width:500px) { #onetap-header-s1 .element-extension\/module\/onetap_mega_menu:not(.ot-mv-burger-dst){display:none !important;} } @media (min-width:501px) and (max-width:991px) { #onetap-header-s1 .element-extension\/module\/onetap_mega_menu:not(.ot-mv-burger-dst){display:none !important;} } #onetap-header-s1 .ot-dev-tablet .element-search{ } #onetap-header-s1 .ot-dev-tablet .element-lang_curr{ width:65px; max-width:65px; height:28px; } #onetap-header-s1 .ot-dev-tablet .element-lang_curr .onetap-burger-btn, #onetap-header-s1 .ot-dev-tablet .element-lang_curr .onetap-catalog-btn { width:65px !important;max-width:65px !important;height:28px !important;} #onetap-header-s1 .ot-dev-mobile .element-login{ } #onetap-header-s1 .ot-dev-mobile .element-login .element-text, #onetap-header-s1 .ot-dev-mobile .element-login .header-link-text, #onetap-header-s1 .ot-dev-mobile .element-login .onetap-lc-val { display:none !important; } #onetap-header-s1 .ot-dev-mobile .element-cart{ } #onetap-header-s1 .ot-dev-mobile .element-cart .element-text, #onetap-header-s1 .ot-dev-mobile .element-cart .header-link-text, #onetap-header-s1 .ot-dev-mobile .element-cart .onetap-lc-val { display:none !important; } #onetap-header-s1 .ot-dev-mobile .element-search{ } #onetap-header-s1 .ot-dev-mobile .element-logo{ width:198px; max-width:198px; height:32px; } #onetap-header-s1 .ot-dev-mobile .element-logo .onetap-burger-btn, #onetap-header-s1 .ot-dev-mobile .element-logo .onetap-catalog-btn { width:198px !important;max-width:198px !important;height:32px !important;} #onetap-header-s1 .ot-dev-mobile .element-lang_curr{ width:65px; max-width:65px; height:28px; } #onetap-header-s1 .ot-dev-mobile .element-lang_curr .onetap-burger-btn, #onetap-header-s1 .ot-dev-mobile .element-lang_curr .onetap-catalog-btn { width:65px !important;max-width:65px !important;height:28px !important;} #onetap-header-s1 .ot-dev-laptop .element-search{ } #onetap-header-s1 .element-search .header-link a{color:#392923;} #onetap-header-s1 .element-search .header-category-item a{color:#392923;} #onetap-header-s1 .element-search .onetap-phone-main{color:#392923;} #onetap-header-s1 .element-search .onetap-lc-btn{color:#392923;} #onetap-header-s1 .element-search .element-counter{color:#392923;} #onetap-header-s1 .element-search .onetap-search--open input{background:transparent !important;} #onetap-header-s1 .element-search .onetap-search--open input{color:#392923 !important;} #onetap-header-s1 .element-search .onetap-search--open input::placeholder{color:#392923 !important;opacity:.6;} #onetap-header-s1 .element-search .onetap-search-toggle{color:#392923;} #onetap-header-s1 .element-search i:not(.fa-caret-down):not(.onetap-lc-caret):not(.onetap-phone-caret) { font-size: 20px;line-height: 20px; } #onetap-header-s1 .element-search .onetap-icon-img { width: 20px !important; height: 20px !important; max-width:none !important; } #onetap-header-s1 .element-login .header-link a{color:#392923;} #onetap-header-s1 .element-login .header-category-item a{color:#392923;} #onetap-header-s1 .element-login .onetap-phone-main{color:#392923;} #onetap-header-s1 .element-login .onetap-lc-btn{color:#392923;} #onetap-header-s1 .element-login .element-counter{color:#392923;} #onetap-header-s1 .element-login i:not(.fa-caret-down):not(.onetap-lc-caret):not(.onetap-phone-caret) { font-size: 24px;line-height: 24px; } #onetap-header-s1 .element-login .onetap-icon-img { width: 24px !important; height: 24px !important; max-width:none !important; } #onetap-header-s1 .element-wishlist .header-link a{color:#392923;} #onetap-header-s1 .element-wishlist .header-category-item a{color:#392923;} #onetap-header-s1 .element-wishlist .onetap-phone-main{color:#392923;} #onetap-header-s1 .element-wishlist .onetap-lc-btn{color:#392923;} #onetap-header-s1 .element-wishlist .element-counter{color:#392923;} #onetap-header-s1 .element-wishlist i:not(.fa-caret-down):not(.onetap-lc-caret):not(.onetap-phone-caret) { font-size: 24px;line-height: 24px; } #onetap-header-s1 .element-wishlist .onetap-icon-img { width: 24px !important; height: 24px !important; max-width:none !important; } #onetap-header-s1 .element-cart .header-link a{color:#392923;} #onetap-header-s1 .element-cart .header-category-item a{color:#392923;} #onetap-header-s1 .element-cart .onetap-phone-main{color:#392923;} #onetap-header-s1 .element-cart .onetap-lc-btn{color:#392923;} #onetap-header-s1 .element-cart .element-counter{color:#392923;} #onetap-header-s1 .element-cart i:not(.fa-caret-down):not(.onetap-lc-caret):not(.onetap-phone-caret) { font-size: 24px;line-height: 24px; } #onetap-header-s1 .element-cart .onetap-icon-img { width: 24px !important; height: 24px !important; max-width:none !important; } #onetap-header-s1 .element-lang_curr i:not(.fa-caret-down):not(.onetap-lc-caret):not(.onetap-phone-caret) { font-size: 24px;line-height: 24px; } #onetap-header-s1 .element-lang_curr .onetap-icon-img { width: 24px !important; height: 24px !important; max-width:none !important; } #onetap-header-s1 .ot-dev-mobile .element-login i:not(.fa-caret-down):not(.onetap-lc-caret):not(.onetap-phone-caret) { font-size: 22px;line-height: 22px; } #onetap-header-s1 .ot-dev-mobile .element-login .onetap-icon-img { width: 22px !important; height: 22px !important; max-width:none !important; } #onetap-header-s1 .ot-dev-mobile .element-cart i:not(.fa-caret-down):not(.onetap-lc-caret):not(.onetap-phone-caret) { font-size: 22px;line-height: 22px; } #onetap-header-s1 .ot-dev-mobile .element-cart .onetap-icon-img { width: 22px !important; height: 22px !important; max-width:none !important; } #onetap-header-s1 .ot-dev-mobile .element-search i:not(.fa-caret-down):not(.onetap-lc-caret):not(.onetap-phone-caret) { font-size: 22px;line-height: 22px; } #onetap-header-s1 .ot-dev-mobile .element-search .onetap-icon-img { width: 22px !important; height: 22px !important; max-width:none !important; } #onetap-header-s1 .header-link a, #onetap-header-s1 .header-element { font-size:16px; } #onetap-header-s1 .header-main-row .column-left{ } @media (min-width:1367px){ #onetap-header-s1 .header-main-row .column-left{ padding-right:60px !important; } }@media (min-width:992px) and (max-width:1366px){ #onetap-header-s1 .header-main-row .column-left{ padding-right:15px !important; } } #onetap-header-s1 .header-main-row .column-center{ } @media (min-width:1367px){ #onetap-header-s1 .header-main-row .column-center{ padding-right:50px !important; } }#onetap-header-s1 .header-main-row .column-right{ } #onetap-header-s1 .header-main-row .column-right{ justify-content: flex-end !important; text-align: right !important; } #onetap-header-s1 .header-main-row .column-right > .header-element{ margin-left:0 !important; margin-right:0 !important; } #onetap-header-s1 .element-search { font-size: 14px; } #onetap-header-s1 .element-search a { font-size: 14px; } #onetap-header-s1 .element-search { text-align: left; } #onetap-header-s1 .element-search a { text-align: left; } #onetap-header-s1 .element-lang_curr { font-size: 14px; } #onetap-header-s1 .element-lang_curr a { font-size: 14px; } #onetap-header-s1 .element-lang_curr { text-align: center; } #onetap-header-s1 .element-lang_curr a { text-align: center; } @media(min-width:992px){ #onetap-header-s1 .element-lang_curr{ padding-right:30px; } } #onetap-header-s1 .onetap-search--mobile-toggle { display:none; } @media(max-width:500px) { #onetap-header-s1 .header-element, #onetap-header-s1 .header-element .header-link a, #onetap-header-s1 .header-element .header-link-text, #onetap-header-s1 .header-element .element-text, #onetap-header-s1 .header-element .onetap-phone-main, #onetap-header-s1 .header-element .onetap-lc-btn, #onetap-header-s1 .header-element .onetap-lc-val, #onetap-header-s1 .header-element .onetap-catalog-btn, #onetap-header-s1 .header-element .onetap-burger-btn span { font-size:12px !important; } #onetap-header-s1 .header-element, #onetap-header-s1 .header-element .header-link, #onetap-header-s1 .header-element .header-link a, #onetap-header-s1 .header-element .onetap-phone, #onetap-header-s1 .header-element .onetap-phone-main, #onetap-header-s1 .header-element .onetap-lc, #onetap-header-s1 .header-element .onetap-lc-btn, #onetap-header-s1 .header-element .element-text, #onetap-header-s1 .header-element .header-link-text, #onetap-header-s1 .header-element .onetap-lc-val { display:inline-flex !important; align-items:center !important; line-height:1 !important; } #onetap-header-s1 .header-element i, #onetap-header-s1 .header-element .onetap-icon-img { line-height:1 !important; vertical-align:middle; } #onetap-header-s1 .onetap-search-slide { position:fixed; left:0; right:0; top:0; bottom:auto; transform:none; width:100%; z-index:9999; box-shadow:0 4px 24px rgba(0,0,0,.15); } #onetap-header-s1 .onetap-search-slide-form { width:100%; border-radius:0 !important; padding:12px 16px; gap:10px; } #onetap-header-s1 .onetap-search-slide-input { width:100%; flex:1; font-size:16px; padding:10px 12px; } #onetap-header-s1 .onetap-search-slide-close { font-size:24px; padding:4px 8px; } #onetap-header-s1 .ot-mobile-burger { display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:none; border:none; cursor:pointer; padding:0; order:-1; flex-shrink:0; } #onetap-header-s1 .ot-mobile-burger svg { width:22px; height:22px; fill:currentColor; } body { padding-bottom:56px; } } @media (min-width:501px) { #onetap-header-s1 .ot-mobile-burger { display:none; } } .ot-burger-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10000; opacity:0; transition:opacity .25s; } .ot-burger-overlay.is-open { display:block; opacity:1; } .ot-burger-drawer { position:fixed; top:0; left:0; bottom:0; width:280px; max-width:85vw; background:#fff; z-index:10001; transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; } .ot-burger-drawer.is-open { transform:translateX(0); } /* Закрытый ящик — вне порядка Tab: уезжал за экран, но фокус в него заходил (B067). visibility меняется после анимации, чтобы закрытие было плавным. */ .ot-burger-drawer:not(.is-open) { visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s; } .ot-burger-head { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid #eee; } .ot-burger-head img { max-height:32px; width:auto; } .ot-burger-close { background:none; border:none; font-size:24px; cursor:pointer; padding:4px 8px; color:#333; } .ot-burger-links { padding:8px 0; } .ot-burger-links a { display:flex; align-items:center; gap:10px; padding:12px 20px; color:#333; text-decoration:none; font-size:15px; transition:background .15s; } .ot-burger-links a:hover { background:#f5f5f5; text-decoration:none; } .ot-burger-links a i { width:20px; text-align:center; font-size:16px; opacity:.6; } .ot-burger-section-title { padding:12px 20px 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#999; } .ot-burger-divider { height:1px; background:#eee; margin:4px 16px; } /* Drawer clones (.ot-mv-burger-dst) ignore any hideOn rules from the main header. When "Move to burger" is checked we always render the element inside the drawer, regardless of its Hide on settings. */ .ot-burger-drawer .ot-burger-item-wrap { display: block !important; padding: 6px 16px; } .ot-burger-drawer .header-element.ot-mv-burger-dst, .ot-burger-drawer .ot-burger-item-wrap > .header-element { display: flex !important; align-items: center; gap: 8px; }