/* ===========================================================================
   10-header — utility bar, sticky header, nav row, catalog sidebar (§4–§5).
   Builds on 00-tokens.css; loaded AFTER vkladovke-skin.css so plain overrides
   win by cascade. Owned by the promo-header agent.
   =========================================================================== */

/* --- Row 0 · utility bar (42px, on the page background, scrolls away) ---- */
.vk-topbar{font-size:12px;line-height:18px;background:transparent}
.vk-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px}
.vk-topbar-links{display:flex;gap:24px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.vk-topbar-links a{text-decoration:underline;color:var(--pr-dark-text-color)}
.vk-topbar-links a:hover{color:var(--pr-primary-dark-color)}
.vk-topbar-tools{display:flex;align-items:center;gap:16px}
.vk-topbar-phone{font-weight:600;white-space:nowrap}
.vk-topbar-phone i{font-size:11px;margin-right:2px}
.vk-topbar-phone:hover{color:var(--pr-primary-dark-color)}
/* contacts popover — hangs off the topbar phone. Same panel anatomy and
   z-index 1030 as .vk-viewed-panel / the language menu: clears the sticky
   header (1020), stays under the catalog overlay backdrop (1039) and every
   drawer/modal above that. Visibility is JS ([hidden]), never :hover — see
   the script in header.twig and commit f0a5fce. */
.vk-contacts{position:relative}
.vk-contacts-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:300px;max-width:calc(100vw - 24px);background:var(--pr-white);border-radius:var(--pr-radius-card);box-shadow:var(--pr-header-shadow);padding:18px;z-index:1030;text-align:left;font-size:13px;line-height:20px}
.vk-contacts-panel[hidden]{display:none}
.vk-cp-block{margin-bottom:14px}
.vk-cp-head{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--pr-dark-text-color);margin-bottom:4px}
.vk-cp-head i{font-size:12px;color:var(--pr-primary-dark-color);width:14px;text-align:center}
.vk-cp-body{color:var(--pr-dark-text-color);padding-left:22px}
.vk-cp-hours{color:var(--pr-grey-color)}
.vk-cp-link{display:block;padding-left:22px;color:var(--pr-links-color);font-weight:600}
.vk-cp-link:hover{color:var(--pr-primary-dark-color)}
/* .vk-btn-primary anchors are visited-pinned in 00-tokens.css; the sizing
   here is local only. */
.vk-cp-btn{margin-top:2px;font-size:13px;padding:10px 14px}
/* If the tools ever render in the mobile drawer with a hover-capable pointer
   attached, the JS refuses to open the panel; belt-and-braces, hide it there
   so a stray [hidden] removal can never wedge it open inside the drawer. */
.vk-catmenu-tools .vk-contacts-panel{display:none}
/* recently-viewed control — replaced «Передзвонити» 2026-08-11. Button reads
   like the other topbar text links; the panel reuses the cart drawer's .vk-ci
   row anatomy (70-cart.css) so the list reads as the same component. */
.vk-viewed{position:relative}
.vk-viewed-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;white-space:nowrap;cursor:pointer}
.vk-viewed-btn:hover,.vk-viewed-btn[aria-expanded="true"]{color:var(--pr-primary-dark-color)}
.vk-viewed-btn i{font-size:11px;margin-right:2px}
/* Count pill. Same navy/white/10px as .vk-badge on the cart and wishlist icons,
   but laid out INLINE rather than absolutely: the topbar is a single text row,
   and a corner-pinned badge there would collide with the neighbouring language
   dropdown instead of sitting with its own label. */
.vk-viewed-count{
  display:inline-block;min-width:16px;height:16px;padding:0 5px;margin-left:6px;
  border-radius:8px;background:var(--pr-primary-dark-color);color:#fff;
  font-size:10px;line-height:16px;font-weight:600;text-align:center;
  text-decoration:none;vertical-align:1px;
}
.vk-viewed-count[hidden]{display:none}
/* z-index 1030: must clear the sticky header (1020), same as the language menu */
.vk-viewed-panel{position:absolute;top:calc(100% + 10px);right:0;width:360px;max-width:calc(100vw - 24px);max-height:min(420px,70vh);overflow-y:auto;background:var(--pr-white);border-radius:var(--pr-radius-card);box-shadow:var(--pr-header-shadow);padding:4px 16px;z-index:1030}
.vk-viewed-panel.is-loading{min-height:56px}
.vk-viewed .vk-ci{padding:12px 0;gap:14px}
.vk-viewed .vk-ci-img{flex-basis:56px}
.vk-viewed .vk-ci-img img{width:52px;height:52px}
.vk-viewed .vk-ci-info{padding-right:0}
.vk-viewed .vk-ci-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vk-viewed-item:hover .vk-ci-title{color:var(--pr-links-color)}
.vk-viewed-price{display:block;margin-top:2px;font-size:14px;line-height:21px}
.vk-viewed-price b{font-weight:700;color:var(--pr-dark-text-color)}
.vk-viewed-price b.sale{color:var(--pr-red-color)}
.vk-viewed-price s{color:var(--pr-grey-color);font-weight:400;font-size:12px;margin-right:6px}
/* language / currency pills (stock language.twig + currency.twig markup) */
.vk-topbar-select .dropdown > a{display:inline-flex;align-items:center;gap:6px;background:var(--pr-white);border-radius:var(--pr-radius-ctl);padding:5px 10px;font-size:12px;line-height:18px;white-space:nowrap}
.vk-topbar-select .dropdown > a:hover{color:var(--pr-primary-dark-color)}
.vk-topbar-select .dropdown > a .fa-caret-down{color:var(--pr-grey-color);font-size:11px}
/* z-index must clear the sticky header (1020) or the menu opens underneath it
   and clicks land on the header instead of the items */
.vk-topbar-select .dropdown-menu{border:0;border-radius:var(--pr-radius-card);box-shadow:var(--pr-header-shadow);padding:8px;min-width:160px;z-index:1030}
.vk-topbar-select .dropdown-item{font-size:13px;border-radius:var(--pr-radius-ctl);padding:8px 12px}
.vk-topbar-select .dropdown-item:hover{background:var(--pr-bg);color:var(--pr-primary-dark-color)}

/* --- Rows 1+2 · white sticky header ---------------------------------------- */
header.vk-header{position:sticky;top:0;z-index:1020;background:var(--pr-white);box-shadow:var(--pr-header-shadow)}
header.vk-header .container{padding-top:0;padding-bottom:0}

.vk-hdr-row1{display:flex;align-items:center;gap:24px;padding:24px 0}
.vk-logo{flex:0 0 auto}
.vk-logo img{max-height:44px;width:auto}
.vk-wordmark{font-size:26px;font-weight:800;letter-spacing:-.5px;color:var(--pr-primary-dark-color);line-height:1.1;white-space:nowrap}
.vk-wordmark:hover{color:var(--pr-primary-light-color)}

/* catalog button — navy, ~172×44, grid-of-squares icon */
.vk-catalog-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border:0;border-radius:var(--pr-radius-ctl);background:var(--pr-primary-dark-color);color:#fff;font-family:inherit;font-size:14px;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;flex:0 0 auto;transition:background-color var(--pr-main-transition)}
.vk-catalog-btn:hover{background:#0a2158}
.vk-catalog-btn i{font-size:16px}

/* search — stock search.twig markup, restyled: rounded input, inset magnifier */
.vk-search{flex:1 1 auto;max-width:608px;min-width:160px}
.vk-search .input-group{position:relative;flex-wrap:nowrap;margin:0 !important}
.vk-search .input-group .form-control{border:2px solid var(--pr-border);border-radius:var(--pr-radius-ctl) !important;padding:8px 48px 8px 16px;font-size:12px;height:44px;min-height:44px;box-shadow:none;background:var(--pr-white);color:var(--pr-dark-text-color)}
.vk-search .input-group .form-control:focus{border-color:var(--pr-primary-light-color)}
.vk-search .input-group .btn{position:absolute;right:2px;top:2px;bottom:2px;z-index:5;background:transparent;border:0;color:var(--pr-primary-dark-color);font-size:16px;padding:0 14px;border-radius:var(--pr-radius-ctl)}
.vk-search .input-group .btn:hover{color:var(--pr-links-color);background:transparent}

/* icon+label stacks: Кабінет · Обране · Порівняння · Кошик */
.vk-hdr-stacks{display:flex;align-items:center;gap:28px;margin-left:auto;flex:0 0 auto}
.vk-hdr-stack{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:0;font-family:inherit;font-size:12px;line-height:18px;color:var(--pr-dark-text-color);cursor:pointer;transition:color var(--pr-main-transition)}
.vk-hdr-stack:hover{color:var(--pr-primary-dark-color)}
.vk-hdr-stack.dropdown-toggle::after{display:none}
.vk-stack-icon{position:relative;display:inline-flex;font-size:20px;line-height:1}
.vk-stack-label{font-size:12px;line-height:18px}
.vk-badge{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--pr-primary-dark-color);color:#fff;font-size:10px;line-height:16px;font-weight:600;text-align:center}
.vk-hdr-stack-wrap .dropdown-menu,.vk-hdr-cart .dropdown-menu{border:0;border-radius:var(--pr-radius-card);box-shadow:var(--pr-header-shadow);padding:8px;margin-top:10px}
.vk-hdr-stack-wrap .dropdown-item{font-size:13px;border-radius:var(--pr-radius-ctl);padding:8px 12px}
.vk-hdr-stack-wrap .dropdown-item:hover{background:var(--pr-bg);color:var(--pr-primary-dark-color)}

/* cart — stock cart.twig button, decorated by JS (data-vk-count / -label).
   vkladovke-skin.css styles this with `#cart .dropdown > .btn { ... !important }`:
   competing !important declarations are resolved by SPECIFICITY, so every rule
   here must carry the #cart id or it silently loses. */
#cart.vk-hdr-cart{position:relative;display:block}
#cart.vk-hdr-cart .dropdown > .btn{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;background:transparent !important;border:0 !important;box-shadow:none !important;color:var(--pr-dark-text-color) !important;padding:0;height:auto;width:auto;font-size:0;line-height:0;font-weight:500;border-radius:0;transition:color var(--pr-main-transition)}
#cart.vk-hdr-cart .dropdown > .btn:hover{background:transparent !important;color:var(--pr-primary-dark-color) !important}
#cart.vk-hdr-cart .dropdown > .btn i{font-size:20px;line-height:1}
#cart.vk-hdr-cart .dropdown > .btn::after{content:attr(data-vk-label);display:block;border:0;margin:0;width:auto;height:auto;font-size:12px;line-height:18px;vertical-align:baseline}
#cart.vk-hdr-cart .dropdown > .btn::before{content:attr(data-vk-count);position:absolute;top:-7px;left:calc(50% + 3px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--pr-red-color);color:#fff;font-size:10px;line-height:16px;font-weight:600;text-align:center}
#cart.vk-hdr-cart .dropdown > .btn:not([data-vk-count])::before{display:none}
#cart.vk-hdr-cart .dropdown-menu{min-width:min(440px,94vw);padding:16px}
#cart.vk-hdr-cart .dropdown-menu td a{color:var(--pr-dark-text-color)}
#cart.vk-hdr-cart .dropdown-menu td a:hover{color:var(--pr-links-color)}

/* --- Row 2 · nav row (h≈50, hairline on top) ------------------------------ */
.vk-hdr-nav{border-top:1px solid var(--pr-border)}
.vk-nav-row{display:flex;align-items:center;gap:28px;min-height:50px;flex-wrap:wrap}
.vk-nav-item{position:relative}
.vk-nav-link{display:inline-flex;align-items:center;gap:8px;padding:13px 0;font-size:14px;font-weight:500;line-height:21px;color:var(--pr-dark-text-color);white-space:nowrap}
.vk-nav-link:hover{color:var(--pr-primary-dark-color)}
.vk-nav-link > i:first-child{font-size:17px;line-height:1}
.vk-nav-caret{font-size:11px;color:var(--pr-grey-color)}
.vk-nav-drop{display:none;position:absolute;top:100%;left:0;z-index:1021;min-width:280px;background:var(--pr-white);border-radius:var(--pr-radius-card);box-shadow:var(--pr-header-shadow);padding:8px}
.vk-nav-item:hover .vk-nav-drop{display:block}
.vk-nav-drop-link{display:block;padding:9px 12px;border-radius:var(--pr-radius-ctl);font-size:14px;line-height:20px;color:var(--pr-dark-text-color)}
.vk-nav-drop-link:hover{background:var(--pr-bg);color:var(--pr-primary-dark-color)}
.vk-nav-drop-all{display:block;margin-top:4px;border-top:1px solid var(--pr-border);padding:10px 12px 4px;font-size:13px;font-weight:600;color:var(--pr-links-color)}
.vk-nav-drop-all:hover{color:var(--pr-primary-dark-color)}

/* --- §5 · catalog sidebar -------------------------------------------------- */
/* the absolute placement needs a positioned ancestor spanning the page */
#container{position:relative}

.vk-catmenu{display:none}
.vk-catmenu-panel{background:var(--pr-white);border-radius:var(--pr-radius-card);box-shadow:var(--pr-header-shadow)}
.vk-cat-list{list-style:none;margin:0;padding:0}
.vk-cat-item + .vk-cat-item{border-top:1px solid var(--pr-border)}
.vk-cat-link{display:flex;align-items:center;gap:12px;padding:17px 16px;font-size:14px;font-weight:500;line-height:21px;color:var(--pr-dark-text-color)}
.vk-cat-ic{width:20px;flex:0 0 auto;text-align:center;font-size:16px;line-height:1}
.vk-cat-name{flex:1 1 auto}
.vk-cat-chev{font-size:11px;color:var(--pr-grey-color);flex:0 0 auto;transition:transform var(--pr-main-transition)}
.vk-cat-item:hover > .vk-cat-link{color:var(--pr-primary-dark-color)}

/* hover flyout with the branch's children (56px representative thumbnails) */
.vk-cat-fly{display:none;background:var(--pr-white);border-radius:var(--pr-radius-card);box-shadow:var(--pr-header-shadow);padding:16px}
.vk-cat-fly-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.vk-cat-fly-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--pr-radius-ctl);font-size:14px;line-height:19px;color:var(--pr-dark-text-color)}
.vk-cat-fly-item:hover{background:var(--pr-bg);color:var(--pr-primary-dark-color)}
.vk-cat-fly-item img{width:56px;height:56px;object-fit:contain;border-radius:var(--pr-radius-ctl);flex:0 0 auto}
.vk-cat-fly-noimg{width:56px;height:56px;border-radius:var(--pr-radius-ctl);background:var(--pr-bg);color:var(--pr-grey-color);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.vk-cat-fly-all{margin-top:12px;border-top:1px solid var(--pr-border);padding-top:12px}
.vk-cat-fly-all a{font-size:14px;font-weight:600;color:var(--pr-links-color)}
.vk-cat-fly-all a:hover{color:var(--pr-primary-dark-color)}

@media (min-width: 992px){
  /* 320px card at the container's left edge. Since 2026-08-11 the desktop
     menu is ALWAYS the floating overlay (is-float, fixed under the sticky
     header) — the docked homepage sidebar is gone; the absolute rule below
     remains only as the pre-JS base so nothing flashes in-flow. */
  .vk-catmenu{position:absolute;top:var(--vk-catmenu-top,208px);left:max(12px,calc(50% - 648px));width:320px;z-index:1015}
  .vk-catmenu.is-open{display:block}
  /* z-index 1041: above the backdrop (1039), which itself sits above the
     sticky header (1020) — the whole page dims, only the panel + fly stay lit */
  .vk-catmenu.is-float{position:fixed;top:calc(var(--vk-hdr-h,142px) + 8px);left:max(12px,calc(50vw - 648px));z-index:1041}
  .vk-catmenu-panel{position:relative}
  /* backdrop for the overlay state — desktop only; the mobile drawer has its
     own backdrop keyed to body.vk-drawer-open further down */
  body.vk-catalog-overlay .vk-catmenu-backdrop{display:block;position:fixed;inset:0;background:rgba(18,23,21,.55);z-index:1039}
  /* the АІ-консультант bubble is z-index 2147483000 and would float, lit,
     over the dimmed page — hide it while the catalog overlay is up */
  body.vk-catalog-overlay .os24adv-bubble{visibility:hidden}
  /* Desktop visibility is JS-driven (.is-fly-open), NOT :hover. The reference
     shows its flyout with a pure `:hover` because the fly sits flush at
     left:100% of the row — no dead zone. Ours is position:fixed (the panel
     scrolls, see the fix-pass block below) and docked 8px past the panel edge
     plus its 6px scrollbar, and `:hover` dies in that strip: the fly vanished
     before the pointer could ever reach it. menu.twig owns open/close with a
     grace delay that survives the crossing. */
  .vk-cat-item.is-fly-open > .vk-cat-fly{display:block}
  .vk-cat-item.is-fly-open > .vk-cat-link{color:var(--pr-primary-dark-color)}
  .vk-cat-fly{position:absolute;left:100%;top:0;width:min(976px,calc(100vw - 380px));min-height:100%;z-index:1}
  /* the overlay panel is height-capped to the viewport and scrolls — 11 roots
     with wrapping names outrun most screens. This is why the flyout is
     position:fixed and JS-placed (see the fix-pass block at the bottom). */
  .vk-catmenu.is-float .vk-catmenu-panel{
    max-height:calc(100vh - var(--vk-hdr-h,142px) - 24px);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .vk-catmenu.is-float .vk-catmenu-panel::-webkit-scrollbar{width:6px}
  .vk-catmenu.is-float .vk-catmenu-panel::-webkit-scrollbar-thumb{
    background:var(--pr-light-grey-color); border-radius:3px;
  }
}

/* --- mobile (<992px): drawer + compact header + floating bottom bar ------- */
.vk-burger{display:none;background:none;border:0;font-size:20px;color:var(--pr-dark-text-color);padding:8px 4px;cursor:pointer}
.vk-mobile-phone{display:none;font-size:18px;color:var(--pr-dark-text-color);padding:8px}
.vk-bottombar{display:none}
.vk-catmenu-backdrop{display:none}

@media (max-width: 991.98px){
  .vk-topbar{display:none}
  .vk-catalog-btn{display:none}
  .vk-burger{display:inline-flex}
  .vk-mobile-phone{display:inline-flex}
  .vk-hdr-row1{flex-wrap:wrap;gap:4px 12px;padding:10px 0 12px}
  .vk-logo{margin-right:auto}
  .vk-wordmark{font-size:22px}
  .vk-search{order:10;flex-basis:100%;max-width:none}
  .vk-hdr-stacks{gap:16px;margin-left:0}
  .vk-stack-label{display:none}
  .vk-hdr-stack--wishlist,.vk-hdr-stack--compare{display:none}
  #cart.vk-hdr-cart .dropdown > .btn::after{display:none}
  #cart.vk-hdr-cart .dropdown-menu{position:fixed !important;left:8px !important;right:8px !important;top:auto !important;min-width:0;transform:none !important}

  /* drawer */
  .vk-catmenu{display:block;position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);z-index:1045;transform:translateX(-110%);transition:transform var(--pr-main-transition)}
  .vk-catmenu.is-open{transform:none}
  .vk-catmenu-panel{height:100%;overflow-y:auto;border-radius:0 var(--pr-radius-card) var(--pr-radius-card) 0;box-shadow:var(--pr-header-shadow);padding-bottom:24px;overscroll-behavior:contain}
  .vk-catmenu-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:16px;font-weight:700;border-bottom:1px solid var(--pr-border)}
  .vk-catmenu-close{background:none;border:0;font-size:20px;color:var(--pr-dark-text-color);padding:4px 8px;cursor:pointer}
  .vk-cat-link{padding:14px 16px}
  .vk-cat-item.is-expanded > .vk-cat-link{color:var(--pr-primary-dark-color)}
  .vk-cat-item.is-expanded .vk-cat-chev{transform:rotate(90deg)}
  .vk-cat-item.is-expanded .vk-cat-fly{display:block;box-shadow:none;border-radius:0;padding:0 16px 12px 24px}
  .vk-cat-fly-grid{grid-template-columns:1fr;gap:2px}
  .vk-cat-fly-item{padding:6px 8px}
  .vk-cat-fly-item img,.vk-cat-fly-noimg{width:40px;height:40px}
  .vk-cat-fly-all{margin-top:8px;padding-top:8px}
  .vk-catmenu-extra{border-top:1px solid var(--pr-border);padding:12px 16px;display:flex;flex-direction:column;gap:12px}
  .vk-catmenu-extra > a{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--pr-dark-text-color)}
  .vk-catmenu-tools .vk-topbar-tools{flex-direction:column;align-items:flex-start;gap:12px;border-top:1px solid var(--pr-border);padding-top:12px}
  .vk-catmenu-tools .vk-topbar-select .dropdown > a{background:var(--pr-bg)}
  /* relocated into the drawer the panel opens IN FLOW, full width of the
     drawer — an absolute 360px panel would leak past the 320px drawer and
     widen a 390px viewport (the zoom-out bug of 2026-08-10) */
  .vk-catmenu-tools .vk-viewed{width:100%}
  .vk-catmenu-tools .vk-viewed-panel{position:static;width:100%;max-width:none;box-shadow:none;border:1px solid var(--pr-border);padding:0 12px;margin-top:8px;max-height:320px}
  .vk-catmenu-backdrop{position:fixed;inset:0;background:var(--pr-popup-backdrop-bg-light,rgba(18,23,21,.8));z-index:1040}
  body.vk-drawer-open .vk-catmenu-backdrop{display:block}
  body.vk-drawer-open{overflow:hidden}

  /* floating bottom bar (reference mobile pattern). Left-aligned, not centred:
     the os24-advisor "АІ-консультант" pill owns the bottom-right corner and a
     centred bar would sit underneath it. The contact button is dropped for the
     same reason (contact stays reachable from the drawer and the header phone);
     restore .vk-bb-contact + centring if the advisor FAB ever shrinks to the
     reference's 60px round bubble. */
  .vk-bottombar{display:flex;gap:12px;position:fixed;left:12px;bottom:12px;z-index:1030;background:var(--pr-white);border-radius:999px;box-shadow:0 2px 24px rgba(37,38,39,.24);padding:8px 14px}
  .vk-bottombar .vk-bb-contact{display:none}
  .vk-bottombar > a,.vk-bottombar > button{position:relative;width:40px;height:40px;border-radius:50%;background:var(--pr-bg);border:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:var(--pr-dark-text-color);cursor:pointer}
  .vk-bottombar .vk-badge{top:-3px;right:-3px}
}

/* --- fix pass 2026-08-07 -------------------------------------------------- */
/* (The docked-homepage 546px panel cap that lived here left with the docked
   sidebar itself, 2026-08-11 — the overlay's viewport cap in the desktop
   block above replaces it. The fly rule below is still load-bearing.) */
@media (min-width: 992px){
  /* The panel scrolls, and `overflow` on an ancestor clips an absolutely
     positioned child -- so the flyout has to escape with position:fixed.
     But `left:100%` on a FIXED element resolves against the VIEWPORT, not the
     parent, which parked the whole flyout 1440px off-screen. Neutralise every
     offset the absolute rule set and let menu.twig place it from the panel's
     live bounding rect. */
  .vk-catmenu .vk-cat-fly{
    position:fixed; left:auto; right:auto; top:auto; bottom:auto;
    min-height:0; max-height:none; overflow-y:auto;
  }
}