/* header-footer.css — art-trade restyle (header + footer). Loaded after main.css. */
/* Tokens: dark #2D3136 · accent RED #A20000 · light #F9F9F9/#CECECE · font Montserrat · radius 4px */

:root {
  --hf-dark:          #2D3136;   /* R1: art-trade warm graphite for header/footer bars (NOT the product-card #1a1a1a black) */
  --hf-accent:        #cc0000;   /* RESTING accent: catalog button bg, cart badge bg, active language, active menu tab */
  --hf-accent-bright: #ff0000;   /* HOVER + pressed(:active): nav/menu/cart-icon hover, catalog button :hover/:active */
}

/* ============================================================
   PHASE 1 — HEADER (art-trade two-bar layout, black + red)
   art-trade token map: #2D3136 → var(--hf-dark) ; #FEBD69 → var(--hf-accent)
   Keep the Bootstrap .container wrapper; dark bg is full-width, content stays in .container.
   ============================================================ */

/* ---------------- Bar 1 · top bar (nav#top) ---------------- */
nav#top { background: var(--hf-dark); }
nav#top .container { align-items: center; }
nav#top,
nav#top a,
nav#top button,
nav#top span,
nav#top .btn-link,
nav#top .dropdown-item { font-family: 'Montserrat', sans-serif; color: #F9F9F9; }

/* logo relocated into the dark top bar */
nav#top #logo { margin-right: 40px; display: flex; align-items: center; }
nav#top .us-logo-img { max-height: 44px; width: auto; }

/* address / working-hours / info links — light on dark, no borders */
nav#top #top-left .top-address,
nav#top #top-left .btn-shedule,
nav#top #top-left .top-info-ul a,
nav#top #top-left .btn-link { color: #F9F9F9; border: none; font-weight: 500; font-size: 14px; }
nav#top #top-left .top-info-ul li { border: none; }
/* R21: top-bar info links (theme header_links -> top-info-ul), art-trade style — spaced, hover accent.
   Styled now even if empty; owner moves "Оплата та доставка" here from the megamenu. */
nav#top #top-left .top-info-ul { display: flex; align-items: center; gap: 20px; margin: 0 0 0 20px; padding: 0; list-style: none; }
nav#top #top-left .top-info-ul a { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 14px; }
nav#top #top-left .top-info-ul a:hover { color: var(--hf-accent-bright); }
nav#top #top-left .fas,
nav#top #top-left .far { color: #F9F9F9; }

/* phone block in top bar */
nav#top .us-phone-box { margin-left: 24px; }
/* R19: phone icon = FA handset inside a light-bordered circle (art-trade look) */
nav#top .us-phone-img { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; margin-right: 10px; border: 1px solid rgba(249, 249, 249, .55); border-radius: 50%; }
nav#top .us-phone-img i { color: #F9F9F9; font-size: 14px; }
nav#top .us-phone-content,
nav#top .us-phone-content a,
nav#top .top-phone-btn { color: #fff; font-size: 13px; font-weight: 500; }
/* R2: phones inline in one row (no dropdown) */
nav#top .us-phone-row { flex-wrap: wrap; gap: 2px 14px; }
nav#top .us-phone-row a.phoneclick { white-space: nowrap; }

/* right cluster grouped (undo the second auto-margin so phone sits next to language/account) */
nav#top #top-links { margin-left: 0; gap: 20px; align-items: center; }
nav#top #us-account-dropdown .btn-user,
nav#top #us-account-dropdown .far { color: #F9F9F9; border: none; }

/* R9: languages inline (e.g. "UA RU"), light on dark, active marked in accent */
nav#top #language .lang-inline { display: flex; align-items: center; gap: 10px; }
nav#top #language .language-select {
  color: #F9F9F9; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 14px;
  padding: 0; border: 0; background: transparent; line-height: 1; box-shadow: none; height: auto;
}
nav#top #language .language-select:hover { color: var(--hf-accent-bright); }
nav#top #language .language-select.is-active { color: var(--hf-accent-bright); font-weight: 700; }

/* #E — hide currency switch in header */
nav#top #currency { display: none; }

/* R8: dropdown/flyout PANELS keep their light background but need DARK text.
   The bar's light-text rules (nav#top span/a, #oct-megamenu li a) bled into these
   light panels -> white-on-white. Panel-scoped universal overrides restore dark text;
   specificity is chosen to beat both nav#top span/a and the id-based megamenu rule. */
nav#top .us-dropdown, nav#top .us-dropdown *,
nav#top .nav-dropdown-menu, nav#top .nav-dropdown-menu *,
nav#top .dropdown-menu, nav#top .dropdown-menu *,
nav#top .us-header-location, nav#top .us-header-location *,
.menu-row #oct-megamenu .oct-mm-dropdown, .menu-row #oct-megamenu .oct-mm-dropdown *,
.menu-row #us-account-dropdown .dropdown-menu, .menu-row #us-account-dropdown .dropdown-menu * { color: #333; font-family: 'Montserrat', sans-serif; }
/* links in those panels: accent on hover */
nav#top .us-dropdown a:hover, nav#top .nav-dropdown-menu a:hover, nav#top .dropdown-menu a:hover,
nav#top .us-header-location a:hover,
.menu-row #oct-megamenu .oct-mm-dropdown a:hover,
.menu-row #us-account-dropdown .dropdown-menu a:hover { color: var(--hf-accent); }
/* Dropdown-panel icons (e.g. the address phone icon) were inheriting the bar's light #F9F9F9 via
   nav#top #top-left .fas (spec 1,2,0) and vanishing on the light panels. Win at 1,3,0 -> dark. */
nav#top #top-left .us-dropdown .fas, nav#top #top-left .us-dropdown .far, nav#top #top-left .us-dropdown .fa,
nav#top #top-left .nav-dropdown-menu .fas, nav#top #top-left .nav-dropdown-menu .far { color: #333; }

/* R11: rounded corners + soft shadow on the dropdown/flyout panels (match art-trade) */
nav#top .us-dropdown,
nav#top .nav-dropdown-menu,
.menu-row #us_livesearch,
.menu-row #us-account-dropdown .dropdown-menu,
.menu-row #oct-megamenu .oct-mm-dropdown {
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  overflow: hidden;
}
/* R18: the address dropdown's visible white panel is .us-dropdown-inner (its .us-dropdown wrapper is
   transparent, so R11's radius didn't show). Round + clip the inner panel incl. the embedded map. */
nav#top .address-dropdown-menu .us-dropdown-inner {
  border-radius: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

/* ---------------- Bar 2 · menu-row (sticky) ---------------- */
/* Menu bar (F1c z-scale — see the full scale comment in the ≥992 block). main.css gave the sticky
   context z:999, the SAME as the body-level #us_overlay, which (later in DOM) covered #us_livesearch
   results and swallowed clicks. The F1c scale puts the menu bar at 1020 (above #us_overlay's 999, below
   nav#top's 1030) — keeping the live-search links clickable and letting nav#top's panels overlay it. */
.menu-row.sticky-top { background: var(--hf-dark); z-index: 1020; }
/* one no-wrap line: catalog btn (auto) · megamenu (grows) · search+cart (auto).
   The megamenu OCMOD injects #oct-megamenu-box.col-lg-9 which, with #oct-menu-box.col-lg-3,
   fills all 12 cols and would wrap .header-buttons onto a 2nd line — override the col widths. */
.menu-row .row { align-items: center; flex-wrap: nowrap; }
.menu-row #oct-menu-box { flex: 0 0 auto; width: auto; max-width: none; }
.menu-row #oct-megamenu-box { flex: 1 1 auto; width: auto; max-width: none; }
.menu-row .header-buttons { flex: 0 0 auto; }

/* catalog button → brand RED, white text */
.menu-row #oct-ultra-menu-header {
  background: var(--hf-accent); color: #fff; border-radius: 4px;
  height: 42px; min-width: 190px; width: auto; padding: 0 20px;
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500;
}
.menu-row #oct-ultra-menu-header span,
.menu-row #oct-ultra-menu-header .fas { color: #fff; }
/* R3: main.css sets .oct-ultra-menu i { position:absolute; left:14px } which
   overlapped/clipped the centered label ("☰АТЕГОРІЇ..."). Make the icon static
   and add an icon–text gap so "КАТЕГОРІЇ ТОВАРІВ" shows in full. */
.menu-row #oct-ultra-menu-header span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.menu-row #oct-ultra-menu-header i { position: static; top: auto; left: auto; font-size: 16px; }
#oct-menu-box:hover .oct-ultra-menu { background: var(--hf-accent-bright); }

/* horizontal megamenu links (if the megamenu module renders them here) */
.menu-row #oct-megamenu li a { color: #F2F3F5; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; }
.menu-row #oct-megamenu li a:hover { color: var(--hf-accent-bright); background: transparent; }
/* R10: active current-page marker in the main menu (JS adds .active in common.js).
   !important beats the several theme color rules (#oct-menu-item-name, megamenu light). */
.menu-row #oct-menu-ul li.active > div a,
.menu-row #oct-menu-ul li.active > a,
.menu-row #oct-menu-ul li.active .oct-menu-item-name { color: var(--hf-accent) !important; }
/* active megamenu tab is red-text-on-DARK -> brighter #ff0000 for contrast (catalog-dropdown items above stay #cc0000 on their light flyout) */
.menu-row #oct-megamenu li.active > a { color: var(--hf-accent-bright) !important; }
.menu-row #oct-megamenu li.active > a { border-bottom: 2px solid var(--hf-accent-bright); }

/* R29: dynamic_stylesheet_0.css (theme-admin colors) loads AFTER header-footer.css in the minify order
   and re-colors these menu hovers to the SITE reds (catalog-btn hover #E72A2A, dropdown/link hover #A20000),
   winning the equal-specificity tie by load order. Changing the theme admin color would flip the WHOLE site
   off #A20000 (R27 wanted header-scoped only), so we win these specific states with scoped !important. */
/* catalog button interactive state: hover + pressed(:active) -> bright (#ff0000) */
.menu-row #oct-menu-box:hover .oct-ultra-menu,
.menu-row #oct-ultra-menu-header:hover,
.menu-row #oct-ultra-menu-header:active { background: var(--hf-accent-bright) !important; }
.menu-row #oct-menu-ul .oct-menu-li:hover > a,
.menu-row #oct-menu-ul .oct-menu-li:hover > div > a { color: var(--hf-accent-bright) !important; }
.menu-row #oct-megamenu li a:hover { color: var(--hf-accent-bright) !important; }
.menu-row #oct-megamenu li.active > a { color: var(--hf-accent-bright) !important; }

/* R31: THE dark-strip fix. dynamic_stylesheet_0.css sets `background:#A20000` on megamenu link :hover
   (`.oct-mm-link > a`, `.oct-mm-simple-link > a`), fading in via transition (alpha 0.35→1.0 = the
   "не сразу, надо подождать"). On the dark bar / in the flyout that near-black red reads as a strip under the
   hovered item. R12/R29 recolored the hover TEXT but never the hover BACKGROUND. Neutralize the hover/focus/
   active background to transparent (art-trade's megamenu hover is also transparent); scoped !important beats
   dynamic (loads after us). Hover TEXT stays #ff0000 (R29 above); the catalog button #cc0000 (R29) is separate. */
.menu-row #oct-megamenu .oct-mm-link > a:hover,
.menu-row #oct-megamenu .oct-mm-link > a:focus,
.menu-row #oct-megamenu .oct-mm-link > a:active,
.menu-row #oct-megamenu .oct-mm-simple-link > a:hover,
.menu-row #oct-megamenu .oct-mm-simple-link > a:focus,
.menu-row #oct-megamenu li a:hover,
.menu-row #oct-megamenu li a:focus,
.menu-row #oct-megamenu .oct-mm-dropdown a:hover,
.menu-row #oct-megamenu .oct-mm-dropdown a:focus { background: transparent !important; }

/* R32: R31 above waited for :hover on the <a>, but dynamic_stylesheet_0.css paints the strip on
   `.oct-mm-link:hover > a` / `.oct-mm-simple-link:hover > a` — the :hover is on the <li> (the full 50px
   row), so while the cursor is over the li but not exactly the <a>, the theme rule matches and R31 didn't
   → the #A20000 strip showed. The theme rule is ALSO unscoped, so it fires in the category dropdown's
   `.oct-mm-link` flyout items too (R31's #oct-megamenu scope never reached those). Mirror the theme's EXACT
   selector shape (li-hover, unscoped) so our override matches the SAME state at equal specificity — our
   !important then wins regardless of load order. `.oct-mm-link`/`.oct-mm-simple-link` exist only in the
   header menu system, so this stays header-scoped in practice. Hover TEXT #ff0000 (R29) is untouched. */
.oct-mm-link:hover > a,
.oct-mm-link:focus > a,
.oct-mm-simple-link:hover > a,
.oct-mm-simple-link:focus > a { background: transparent !important; }

/* search moved into second bar */
.menu-row .header-buttons { display: flex; align-items: center; gap: 20px; }
/* R7: fixed-width search that does NOT grow on focus (was pushing the menu onto 2-3 lines);
   live-search results float as an absolute overlay so they never widen/reflow the row. */
.menu-row .us-search-box { flex: 0 0 220px; width: 220px; height: 38px; }
.menu-row #search { position: relative; width: 100%; height: 38px; flex-wrap: nowrap; }
/* R20: input + magnifier read as ONE control — split radii, flush, no gap */
.menu-row .header-input-group { gap: 0; flex-wrap: nowrap; }
.menu-row #search input.header-input { border-radius: 4px 0 0 4px; flex: 1 1 auto; font-family: 'Montserrat', sans-serif; font-size: 13px; }
.menu-row #search button.header-btn-search { border-radius: 0 4px 4px 0; flex: 0 0 42px; margin: 0; }
/* R17: input stays 220px (R13 300px widening reverted — it wrapped the menu); the RESULTS panel is
   wider (~400px) and right-aligned to the search box so the wide overlay never runs off the viewport. */
.menu-row #us_livesearch { position: absolute; top: 100%; right: 0; left: auto; width: 520px; max-width: 90vw; z-index: 1050; }
/* R28: results must scroll when long — R11's overflow:hidden (for rounded corners) also clipped/blocked
   scrolling. Give the EXPANDED panel a max-height + overflow-y:auto (corners stay rounded, R26 z intact). */
.menu-row #us_livesearch.expanded { max-height: min(70vh, 560px); overflow-y: auto; overflow-x: hidden; }

/* cart icon (FA, swapped in cart.twig C.6) + count badge */
.menu-row #cart { position: relative; }
.menu-row #cart .us-cart-img { position: relative; background: transparent; border: 0; padding: 0; }
.menu-row #cart .us-cart-img i { color: #CECECE; font-size: 22px; }
.menu-row #cart:hover .us-cart-img,
.menu-row #cart:hover .us-cart-img i { color: var(--hf-accent-bright); }
/* R14/R16/R16b: count badge hugs the cart icon corner — centered digit, pill so 2 digits fit */
.menu-row #cart .header-cart-index {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hf-accent); color: #fff;
  border-radius: 8px; font-size: 10px; line-height: 1; font-weight: 600;
}

/* R5: cart = icon + red badge only (hide the total / "Зробити замовлення" text) */
.menu-row #cart .us-cart-content { display: none; }

/* R4: account moved into the bottom bar as a person icon (icon-only, grey -> accent) */
.menu-row .header-buttons #us-account-dropdown .btn-user {
  color: #CECECE; background: transparent; border: 0; padding: 0; height: auto; box-shadow: none;
}
.menu-row .header-buttons #us-account-dropdown .btn-user .far,
.menu-row .header-buttons #us-account-dropdown .btn-user .fas { display: inline-block; font-size: 20px; color: #CECECE; }
/* theme hides the account FA icon on desktop (it used a sprite img instead) — force it visible here */
.menu-row .header-buttons #us-account-dropdown .btn-user i { display: inline-block; }
.menu-row .header-buttons #us-account-dropdown:hover .btn-user,
.menu-row .header-buttons #us-account-dropdown:hover .far,
.menu-row .header-buttons #us-account-dropdown:hover .fas { color: var(--hf-accent-bright); }
.menu-row .header-buttons #us-account-dropdown .hidden-xs { display: none; }  /* icon-only in the bar */

/* scoped accent hover — header only, never global (R12: bright accent for text on dark) */
nav#top a:hover,
.menu-row a:hover { color: var(--hf-accent-bright); text-decoration: none; }

/* keep the emptied <header> inert but present (scrollToElement('header') resolves) */
header:empty { display: block; height: 0; min-height: 0; margin: 0; padding: 0; border: 0; }
/* R30: dynamic_stylesheet_0.css sets `header{background:#2D3136}` on this empty band. It is normally
   collapsed by the height:0 above, but on hover the <header> can momentarily stop matching `:empty`
   (or gain height) → the height:0 drops and the dark bg flashes as a strip under the top bar. Neutralize
   the bg UNCONDITIONALLY (not `:empty`-scoped — that would also drop during the flicker). `body header`
   (0,0,0,2) beats the dynamic `header` (0,0,0,1) at any load order, so the band can only ever be an
   invisible gap, never a dark strip. Does NOT touch the intentional dark bars (nav#top / .menu-row). */
body header { background: transparent; }

/* ============================================================
   R22–R25 — DESKTOP-ONLY layout (>=992px). Mobile keeps the base rules above.
   ============================================================ */
@media (min-width: 992px) {
  /* R22: taller, roomier bars (~68px, art-trade proportions); content stays vertically centered */
  /* ============================================================================
     F1c — HEADER Z-SCALE (one documented scale; SUPERSEDES R33/R34's escalation
     and the address z:-1<->10000 reveal hack). The two bars stay SEPARATE
     body-child stacking contexts on purpose — a shared wrapper would become the
     sticky menu-row's containing block and trap it (proven: menu-row scrolls away).
     Ordered so nav#top's dropdowns overlay the menu row WITHOUT escalation churn:

       nav#top (top bar) ................. 1030  (own stacking context)
       .menu-row.sticky-top (menu bar) ... 1020  (own stacking context)
       #us_overlay.active ................ 999   (main.css; below bars, above content — dims content)
       address/schedule panels ........... z:10 WITHIN nav#top(1030) -> globally above menu-row(1020)
       .oct-mm-dropdown (Послуги) ........ theme z:1 WITHIN menu-row(1020) -> above menu content, below
                                           nav#top (opens downward, needn't overlay the top bar)
       .menu-row #us_livesearch .......... 1050 WITHIN menu-row(1020) context (internal to that island)

     R33's reason to give nav#top its own context is KEPT (each bar is an island so
     the home hero-slide::before overlay can't composite INTO the bars on repaint).
     R34's requirement (top-bar panels must clear the menu row) is preserved by
     1030 > 1020 — no more re-escalation. Still ≥992 only; the ≤991 mobile bar is
     `#top{position:fixed}` (responsive.css) and must stay untouched.
     F2 will unify the open/close controller (R34b); F3 de-dups the panels. */
  nav#top { height: 68px; position: relative; z-index: 1030; }
  /* F1c: kill the address "reveal-from-behind" hack. main.css swings the panel
     z:-1 (closed) <-> 10000 (open). `nav#top .us-dropdown` (specificity 1,1,1 — has
     an ID) beats BOTH main.css rules (.us-dropdown 0,1,0 and .us-dropdown-box.active
     .us-dropdown 0,3,0) with NO !important, pinning ONE stable z in both states.
     The panel now opens ABOVE the bar (no negative-z tuck); nav#top(1030) still
     lifts it over the menu row. Open/close (opacity/visibility via .active) stays
     theme-driven — only z changes here. */
  nav#top .us-dropdown { z-index: 10; }
  .menu-row.sticky-top { height: 68px; }
  .menu-row .row { min-height: 68px; }
  .menu-row #oct-menu-box { height: 68px; display: flex; align-items: center; }

  /* R23: tighten the top-left — smaller gap after the logo */
  nav#top #logo { margin-right: 24px; }

  /* R24: tighter menu-item spacing (was padding 0 16px -> 32px between labels) */
  .menu-row #oct-megamenu li a { padding: 0 12px; }

  /* R25: search grows to fill the freed row space (capped 660), never wraps the menu.
     Catalog button + megamenu are fixed (flex-shrink:0) so the search absorbs the slack;
     account + cart stay fixed on the right. Search still fixed on focus (only flexes with row width). */
  .menu-row #oct-menu-box { flex: 0 0 auto; }
  .menu-row #oct-megamenu-box { flex: 0 0 auto; width: auto; }
  .menu-row .header-buttons { flex: 1 1 auto; margin-left: 24px; }
  .menu-row .us-search-box { flex: 1 1 auto; width: auto; max-width: 660px; min-width: 220px; }
  .menu-row #us-account-dropdown, .menu-row #cart { flex: 0 0 auto; }
  /* R26: results overlay matches the widened input, min 520px, right-aligned, capped to the viewport */
  .menu-row #us_livesearch { width: 100%; min-width: 520px; max-width: 90vw; }

  /* R35: HOME desktop header backstop. The top hero slide used margin-top:-50px to backfill a dark
     backdrop under the header; with the hero disabled, white content meets the sticky .menu-row (bottom
     @136px = nav#top 68 + menu-row 68) and a repaint (opening a header dropdown) can flash a white seam
     under the bars. Paint a home-only dark band across the seam zone via the BODY BACKGROUND — it always
     composites behind page content (no z-index / negative-z pseudo, so it avoids the R9 flicker where a
     z:-1 backstop itself painted the strip). Dark 0→186px (the opaque bars cover 0→136, so the ~50px
     white gap below the menu-row reads dark), stopping exactly at the first H1 (top @186) so it never
     sits under the dark heading text; then the normal page background. The band scrolls with the page
     like the old hero. Home-only via `.is-home` (common.js, `:has()`-free); other pages keep white under
     the header. R30/R33/R34 untouched (this is a background fill, not stacking). */
  body.is-home {
    background-image: linear-gradient(to bottom,
      var(--hf-dark, #2D3136) 0,
      var(--hf-dark, #2D3136) 186px,   /* header 136 + the ~50px white gap; stops at the first H1 (top @186) */
      transparent 186px);
    background-repeat: no-repeat;
  }
}

/* ============================================================
   PHASE M1 — MOBILE header (<= 991px). Desktop (>= 992px) is untouched.
   responsive.css (loads AFTER this file) sets #top{position:fixed; height:50px} and hides
   .menu-row / #top-left / #top-links language etc. at <=991. We compose the art-trade mobile
   bar here; selectors carry `nav#top` (or !important) to beat responsive.css by specificity/order.
   Search icon is deferred to M2 — not added here.
   ============================================================ */
@media (max-width: 991px) {
  /* --- bar: dark; logo left, right cluster [info · lang · cart] --- */
  nav#top { background: var(--hf-dark); }
  nav#top .container { justify-content: flex-start; align-items: center; gap: 12px; padding: 0 22px; }
  nav#top #logo { order: -1; margin: 0 auto 0 0; display: flex; align-items: center; width: auto; }
  nav#top .us-logo-img { max-height: 40px; width: auto; }

  /* remove phones / wishlist / compare from the bar (phones remain inside the ⓘ dropdown) */
  nav#top .us-phone-box { display: none !important; }
  .us-mobile-top-btn-wishlist, .us-mobile-top-btn-compare { display: none !important; }

  /* un-hide the language switch (responsive.css hides it); compact UA/RU light-on-dark; currency stays hidden */
  nav#top #top-links { display: flex !important; margin-left: 0; gap: 12px; align-items: center; width: auto; }
  nav#top #top-links #language { display: flex !important; height: auto; width: auto; }
  nav#top #top-links #currency { display: none !important; }
  nav#top #language .mobile-info-title { display: none; }
  nav#top #language .language-select { color: #F9F9F9; font-size: 13px; }
  nav#top #language .language-select.is-active { color: var(--hf-accent-bright); }

  /* ⓘ info button in the right cluster */
  nav#top #dropdown_menu_info { width: auto; }

  /* cart (mobile): red pill count badge hugging the icon */
  #us_cart_mobile { width: auto; position: relative; }
  #us_cart_mobile .mobile-header-index {
    position: absolute; top: -14px; right: -6px;   /* R6: hug the icon top-right corner */
    min-width: 15px; height: 15px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hf-accent); color: #fff; border-radius: 8px;
    font-size: 9px; line-height: 1; font-weight: 600;
  }

  /* --- full-width catalog button = the repurposed burger, absolute below the fixed 50px bar --- */
  nav#top .us-menu-mobile {
    background: var(--hf-accent);           /* override responsive.css green #71be00 */
    /* R1: small gap between the fixed bar bottom and the button */
    position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
    width: 92%; height: 42px; margin: 0; z-index: 1;   /* R9: sit above the home dark band (z:0) */
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: 4px; line-height: 1; text-align: center;
  }
  nav#top .us-menu-mobile .us-navbar-toggler { width: 20px; height: 20px; }
  nav#top .us-menu-mobile .us-mobile-cats-label {
    color: #fff; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase;
  }

  /* content offset: fixed 50px bar + 6px top gap + ~50px button + 6px bottom gap (R8 symmetric) => ~112px */
  body.top { padding-top: 112px !important; }

  /* R7: on the HOME page only (identified by #common-home), the strip around the full-width button was the
     white BODY padding showing over the dark hero. Paint a dark band behind the button (bar bottom → button
     bottom, full width) so the button reads as part of the header. Other pages keep the white strip. */
  body.is-home nav#top::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 62px;   /* R8: reach button-bottom + 6px */
    background: var(--hf-dark);
    /* R9: was z-index:-1 — a negative-z pseudo on the composited fixed bar painted BEHIND the
       white body background on some repaints (the "flicker → stable" white strip on mobile home).
       z-index:0 keeps it inside nav#top's z:1001 context (above the white body, below the
       z:1-button) but composites reliably; button raised to z:1 so it still sits on top. */
    z-index: 0;
  }

  /* R3/R5: zero the theme's separator (responsive.css: border-bottom 1px #e5e5e5 + padding/margin 0 0 10px)
     on language/currency + the info-panel schedule/phones boxes. nav#top prefix beats responsive by specificity. */
  nav#top #language, nav#top #currency,
  nav#top #us_info_mobile .mobile-shedule-box,
  nav#top #us_info_mobile .mobile-phones-box { border-bottom: 0; padding: 0; margin: 0; }
  nav#top #language .lang-inline { align-items: center; gap: 8px; }
  nav#top #language .language-select { display: flex; align-items: center; padding: 0; line-height: 1; }

  /* R4: right cluster order [UA/RU] [info] [cart]; info restyled as a menu (hamburger) icon */
  nav#top #top-links { order: 1; }
  nav#top #dropdown_menu_info { order: 2; display: flex; align-items: center; }
  nav#top #us_cart_mobile { order: 3; }
  nav#top #dropdown_menu_info .us-navbar-info { display: none; }   /* hide the ⓘ sprite */
  nav#top #dropdown_menu_info .us-info-bars { display: inline-block; color: #F9F9F9; font-size: 20px; }
  nav#top #dropdown_menu_info:hover .us-info-bars,
  nav#top #dropdown_menu_info.show .us-info-bars { color: var(--hf-accent-bright); }

  /* ---------------- M2: mobile search icon -> reveal (art-trade) ----------------
     A search icon in the right cluster (leftmost: order 0 => `search · lang · info · cart`).
     Tapping toggles .is-open on #us-mobile-search, revealing a full-width row absolutely
     anchored just under the fixed 50px bar (z above content AND the catalog button). The
     desktop `{{ search }}` (#search in .menu-row, display:none here) is untouched — this is
     a dedicated d-lg-none form posting to the same product/search route (Option B). */
  nav#top #us-mobile-search { order: 0; display: flex; align-items: center; }
  nav#top .us-mobile-search-toggle {
    background: transparent; border: 0; padding: 0; height: auto; line-height: 1;
    display: flex; align-items: center; cursor: pointer;
  }
  nav#top .us-mobile-search-toggle i { color: #F9F9F9; font-size: 19px; }
  nav#top .us-mobile-search-toggle:hover i,
  nav#top #us-mobile-search.is-open .us-mobile-search-toggle i { color: var(--hf-accent-bright); }

  /* reveal row: absolute vs the fixed nav#top (its containing block) => sits at the bar bottom,
     full-width, z:1002 above page content and the absolute catalog button. Hidden until .is-open. */
  nav#top .us-mobile-search-reveal {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1002;
    display: none; background: var(--hf-dark); padding: 8px 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  }
  nav#top #us-mobile-search.is-open .us-mobile-search-reveal { display: block; }
  nav#top .us-mobile-search-form { display: flex; align-items: center; width: 100%; margin: 0; }
  nav#top .us-mobile-search-input {
    flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px;
    border: 0; border-radius: 4px 0 0 4px; background: #fff; color: #333;
    font-family: 'Montserrat', sans-serif; font-size: 14px;
  }
  nav#top .us-mobile-search-submit {
    flex: 0 0 46px; height: 40px; border: 0; border-radius: 0 4px 4px 0;
    background: var(--hf-accent); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  nav#top .us-mobile-search-submit:hover { background: var(--hf-accent-bright); }
  nav#top .us-mobile-search-submit i { color: #fff; font-size: 16px; }
  nav#top .us-mobile-search-close {
    flex: 0 0 40px; height: 40px; margin-left: 8px; border: 0; background: transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  nav#top .us-mobile-search-close i { color: #F9F9F9; font-size: 18px; }
  nav#top .us-mobile-search-close:hover i { color: var(--hf-accent-bright); }
}

/* ============================================================================
   FOOTER — art-trade restyle (Phase F1, DESKTOP). Mobile polish = F2.
   Layout/grid rules are gated @media(min-width:992px) so the current mobile
   footer render (Bootstrap col reflow + .us-footer-title accordion) is left
   untouched. Colour/shape rules are global (they suit mobile too).
   NOTE: the footer bg (#2D3136) + text/link colours come from the theme's
   dynamic_stylesheet_0.css, which loads AFTER this file — so link-hover colour
   overrides carry a scoped !important (same reason as the header R29 block).
   ============================================================================ */

/* -- brand column: logo + socials caption + privacy link -- */
.us-footer-brand-box .us-footer-logo { display: inline-block; margin-bottom: 22px; }
.us-footer-brand-box .us-footer-logo-img { max-height: 48px; width: auto; }
.us-footer-privacy { display: inline-block; margin-top: 16px; }

/* -- social + messenger contact icons → circular chips, #ff0000 hover -- */
.us-footer-social-link,
.us-footer-contact-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .10);
  display: grid; place-items: center;
  transition: background-color .15s ease, color .15s ease;
}
.us-footer-social-link:hover,
.us-footer-contact-link:hover { background-color: var(--hf-accent-bright); color: #fff; }
.us-footer-contact-link { font-size: 0; }            /* hide the "Viber"/"Telegram" text → icon only */
.us-footer-social-link i,
.us-footer-contact-link i { font-size: 16px; }

/* link hover accent — beats dynamic_stylesheet_0.css rgb(231,42,42) */
.us-footer-link:hover,
.us-footer-phone-btn:hover,
.us-footer-mail:hover { color: var(--hf-accent-bright) !important; }

/* crisper light headings */
.us-footer-title { color: #F9F9F9; }

/* both phone numbers stacked (dropdown replaced by a visible list), desktop + mobile;
   font-size 14px to match the surrounding contact text (email/address), down from main.css's 18px */
.us-footer-phones .us-footer-phone-btn { display: block; font-size: 14px; line-height: 1.5; margin-bottom: 6px; }

/* dev credit in the bottom band */
.us-footer-dev { display: block; margin-top: 6px; }
.us-footer-dev a { color: var(--hf-accent-bright); }
.us-footer-dev a:hover { text-decoration: underline; }

/* ------- DESKTOP: 5-column row, art-trade order + proportions ------- */
@media (min-width: 992px) {
  .footer-sub > .row:not(.row-padding-top) {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.3fr 1fr 1fr;
    gap: 10px 40px;
    margin-left: 0; margin-right: 0;
  }
  .footer-sub > .row:not(.row-padding-top) > .us-footer-box {
    max-width: none; flex: initial;
    padding-left: 0; padding-right: 0; margin-bottom: 0;
  }
  /* visual order (DOM is brand, info, cats, hours, contacts) */
  .us-footer-brand-box    { order: 1; }
  .us-footer-shedule-box  { order: 2; }
  .us-footer-contacts-box { order: 3; }
  .us-footer-cats-box     { order: 4; }
  .us-footer-info-box     { order: 5; }

  .us-footer-dev { display: inline-block; margin-top: 0; margin-left: 18px; }

  /* HOURS: stack the clock icon ABOVE the schedule text so each line gets the full
     (narrow) grid-column width and stops wrapping mid-phrase in the 992-~1380px band
     (at 1920 the 1600px container is wide enough that it read fine either way). The
     text stays left-aligned to match the sibling columns; align-items needs !important
     to beat bootstrap's `.align-items-center` utility on the .us-footer-shedule row. */
  .us-footer-shedule-box .us-footer-shedule { flex-direction: column; align-items: flex-start !important; }
  .us-footer-shedule-box .us-footer-shedule-icon { margin-right: 0; margin-bottom: 8px; }
  .us-footer-shedule-text-item { white-space: nowrap; }
}

/* ------- MOBILE (<=991px): single centered column, art-trade order, selective
   accordion. header-footer.css loads BEFORE responsive.css, so footer overrides
   are box-scoped (0,2,0) to beat its 0,1,0 rules; the d-md-none chevron needs
   !important (bootstrap utility). Accordion: only Categories + Information
   collapse; Brand/Hours/Contacts stay open. Effective breakpoint = 991 (JS runs
   <992), which closes the theme's 768-991 dead zone (its CSS accordion was <=767). ------- */
@media (max-width: 991px) {
  /* full-width stacked columns; flex `order` works (.row is flex at <=991).
     border:0 removes the theme's `.us-footer-box{border-bottom}` divider (responsive.css <=767) — R2. */
  .footer-sub .us-footer-box { flex: 0 0 100%; max-width: 100%; text-align: center; border: 0; }
  .us-footer-brand-box    { order: 1; }
  .us-footer-shedule-box  { order: 2; }
  .us-footer-contacts-box { order: 3; }
  .us-footer-cats-box     { order: 4; }
  .us-footer-info-box     { order: 5; }

  /* headings centered; smaller bottom gap than the desktop 31px */
  .footer-sub .us-footer-title {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 12px;
  }

  /* brand block centered */
  .us-footer-brand-box .us-footer-logo { margin-bottom: 16px; }
  .footer-sub .us-footer-social-list { justify-content: center; }
  .us-footer-privacy { margin-top: 12px; }

  /* HOURS + CONTACTS stay open; center via text-align + auto-margins. The theme forces
     `.us-footer-list{display:block!important}` at >=768, so flex centering can't be relied
     on — text-align works regardless of the display value. R1: .us-footer-address has a
     fixed width:235px (main.css) that otherwise sits left → auto side-margins re-center it. */
  .us-footer-shedule-box .us-footer-list { display: block; }
  .us-footer-shedule-box .us-footer-shedule { justify-content: center; }
  /* R1: force the contacts body visible across the whole <=991 range. At <768 the theme's
     `.us-footer-list{display:none}` was hiding it (contacts is NOT collapsible); display:block
     (0,2,0) beats that 0,1,0 rule so phones/email/address/messenger show on narrow phones too. */
  .us-footer-contacts-box .us-footer-contact-box { display: block; text-align: center; }
  .footer-sub .us-footer-address { width: auto; margin-left: auto; margin-right: auto; text-align: center; }
  .us-footer-contacts-box .us-footer-mail,
  .us-footer-contacts-box .us-footer-phones { text-align: center; }
  .footer-sub .us-footer-contact-list { justify-content: center; }
  /* hide the (non-functional) chevron on the always-open sections */
  .us-footer-shedule-box .us-footer-title i,
  .us-footer-contacts-box .us-footer-title i { display: none !important; }

  /* ACCORDION — only Categories + Information; COLLAPSED by default (R3). Class toggle
     (.is-open on the box) + !important so it beats responsive.css's
     `@media(min-width:768px){.us-footer-list{display:block!important}}` while still toggling
     cleanly (an inline slideToggle can't override that !important — hence the class approach). */
  .us-footer-collapsible .us-footer-title { cursor: pointer; margin-bottom: 0; padding: 14px 0; }
  .us-footer-collapsible .us-footer-title i {
    display: inline-block !important;               /* beat d-md-none at >=768 */
    transition: transform .3s ease;
  }
  .us-footer-collapsible.is-open .us-footer-title i { transform: rotate(180deg); }
  .us-footer-collapsible .us-footer-list { display: none !important; padding-bottom: 12px; }
  .us-footer-collapsible.is-open .us-footer-list { display: block !important; }

  /* bottom band: copyright + dev link centered, stacked (dev on its own line) */
  .us-footer-dev { display: block; margin-top: 6px; margin-left: 0; }
}