/* ATVA HC megamenu — slim product-category MENU with thumbnail rows; each
   category's subcategories slide out as a separate card to the RIGHT on hover.
   Not a wide mega box: the default state shows only the category column, and a
   flyout card appears beside the hovered row.

   Aesthetic: warm editorial, cohesive with the storefront brand —
   Libre Baskerville (serif display) + Lato (body), taupe/mauve neutrals.

   CLONE-SAFE SCOPING: GeneratePress's sticky navigation does NOT keep the
   desktop nav as #site-navigation — on scroll it renames/clones it into
   #sticky-navigation and #sticky-placeholder (class `navigation-clone`). The
   desktop rules are therefore scoped to #masthead (which contains the live nav
   AND both sticky clones) rather than the #site-navigation id — otherwise the
   menu loses all its styling in the sticky clone. The off-canvas slideout and
   the mobile header live OUTSIDE #masthead (body-level), so this scope leaves
   their accordion styles alone. The column reveal and the per-row flyout are
   pure CSS (:hover) so they work in the JS-less sticky clone too (cloneNode
   does not copy listeners). */

.atvahc-megamenu {
    --mm-ink: #222;
    --mm-text: #5a5552;          /* warm grey — subcategory links */
    --mm-accent: #807a7a;        /* taupe (storefront primary) */
    --mm-accent-deep: #6b5a5b;   /* mauve (storefront nav) — hover/active */
    --mm-surface: #f5f2f0;       /* warm tint — active/hover rows */
    --mm-line: #ece7e4;          /* warm hairline */
}

/* ----------------------------------------------------------------------------
   Reset GeneratePress / Superfish submenu treatment on the panel's own <ul>/<li>.
   The grid/sub lists are `ul ul` inside the menu, so GeneratePress's rules for
   closed submenus apply to them and must be neutralised:
     - .main-navigation ul ul { position:absolute; left:-99999px; ... } (off-screen)
     - .main-navigation ul ul { pointer-events:none }  (GP disables clicks on
       closed submenus and re-enables on hover for ITS OWN dropdowns; our menu
       is not one of those, so without this reset every link inside it inherits
       pointer-events:none and is UNCLICKABLE — the grid and the subs are two
       separate `ul ul` levels, so BOTH must be reset).
     - Superfish adds float:left.
   These selectors (>= 0,2,0) outweigh GP's (0,1,2). Applies in all contexts.
   ------------------------------------------------------------------------- */
.atvahc-megamenu .atvahc-megamenu__grid,
.atvahc-megamenu .atvahc-megamenu__subs {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    height: auto;
    max-width: none;
    overflow: visible;
    opacity: 1;
    float: none;
    pointer-events: auto;
}

.atvahc-megamenu .atvahc-megamenu__col,
.atvahc-megamenu .atvahc-megamenu__sub {
    float: none;
    width: auto;
    max-width: none;
    pointer-events: auto;
}

/* ----------------------------------------------------------------------------
   Desktop primary nav (scoped to #masthead — see header note): a SLIM category
   menu rather than a wide mega box. The container is just a transparent
   positioning context; the category column is the visible card; each category's
   subcategories open as a SEPARATE card to the right on hover.

   Anchoring: the container is right-aligned to the "Производи" item (right:0) so
   the column drops directly under the trigger. The flyout opens into the free
   header space beside the item — on this header that gap is a constant ~355px
   across desktop widths, so a <=330px flyout never clips the viewport. The
   flyout is an absolutely-positioned descendant whose containing block is this
   container (positioned); the column card's own overflow (position:static) does
   NOT clip it, so the column can scroll on short viewports while the flyout
   still escapes. No-hover state shows ONLY the column — no pre-filled pane.
   ------------------------------------------------------------------------- */
#masthead .atvahc-has-megamenu {
    position: relative;
}

/* Transparent positioning context. Its top padding is a hoverable bridge from
   the nav bar to the column, so crossing the drop gap never drops :hover. */
#masthead .atvahc-megamenu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 200;
    width: 300px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: .6rem 0 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

#masthead .atvahc-has-megamenu:hover > .atvahc-megamenu,
#masthead .atvahc-has-megamenu:focus-within > .atvahc-megamenu,
#masthead .atvahc-has-megamenu.is-open > .atvahc-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* The category column IS the visible card. overflow MUST stay visible: each
   row's flyout is an absolutely-positioned descendant of its <li> (col is
   position:relative below, so the flyout anchors beside its own row). An
   overflow:auto/hidden here would clip those flyouts. The category list is short
   enough to fit the viewport, so no internal scroll is needed. */
#masthead .atvahc-megamenu .atvahc-megamenu__grid {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid var(--mm-line);
    border-radius: 14px;
    box-shadow: 0 18px 50px -14px rgba(45, 35, 35, .22);
    padding: .5rem;
    overflow: visible;
}

/* The col is the positioning context for ITS OWN flyout, so the flyout opens
   beside the hovered row (top:0 = row top) instead of at a fixed point atop the
   column. This is what makes lower categories reachable: from any row the cursor
   moves straight RIGHT into the flyout without crossing sibling rows. */
#masthead .atvahc-megamenu__col {
    margin: 0;
    position: relative;
}

/* Category row: thumbnail · name · chevron. */
#masthead .atvahc-megamenu__col > .atvahc-megamenu__main {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .6rem;
    margin: 0;
    border-radius: 9px;
    color: var(--mm-ink);
    transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

#masthead .atvahc-megamenu__main-name {
    flex: 1 1 auto;
}

#masthead .atvahc-megamenu__main-arrow {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--mm-accent);
    opacity: .5;
    transition: transform .16s ease, opacity .16s ease, color .16s ease;
}

/* Active row = the hovered one. No default-open row — the menu shows only the
   column until the user points at a category. Pure CSS, so it also holds in the
   sticky-navigation clone. */
#masthead .atvahc-megamenu__col:hover > .atvahc-megamenu__main {
    background: var(--mm-surface);
    color: var(--mm-accent-deep);
    box-shadow: inset 3px 0 0 var(--mm-accent-deep);
}

#masthead .atvahc-megamenu__col:hover > .atvahc-megamenu__main .atvahc-megamenu__main-arrow {
    opacity: 1;
    color: var(--mm-accent-deep);
    transform: translateX(3px);
}

/* ---- Flyout: the hovered category's subcategories, as a card to the right ----
   Anchored to its own row (col is position:relative): top aligns the flyout with
   the row the cursor is on, so it opens BESIDE the pointer.

   NO horizontal gap (margin-left:0 -> left edge at the row's right edge, a few px
   of overlap onto the column card). This is load-bearing, not cosmetic: a gap
   here is an UNHOVERABLE dead zone. The strip between the row and a detached
   flyout is owned by the column card's own padding (an ancestor <ul>, not the
   <li>) and, above that, by the header's GenerateBlocks wrapper
   (.gb-element-*, position:relative;z-index:1) which paints ABOVE the entire
   megamenu subtree there. A pseudo/border/child bridge in that strip is occluded
   or clipped and never catches the pointer, so a slow cursor drop the :hover and
   the flyout closes mid-cross. Only the flyout's OWN box wins the hit-test, so it
   must butt directly against the row with no gap to traverse. Verified dead-zone
   = 0px at the top, middle, and bottom of every row (incl. the sticky clone). */
#masthead .atvahc-megamenu__panel {
    position: absolute;
    top: -.55rem;
    left: 100%;
    margin-left: 0;
    width: 320px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--mm-line);
    border-radius: 14px;
    box-shadow: 0 18px 50px -14px rgba(45, 35, 35, .22);
    padding: 1.15rem 1.3rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
}

#masthead .atvahc-megamenu__col:hover > .atvahc-megamenu__panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

#masthead .atvahc-megamenu__panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 0 0 .9rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--mm-line);
}

#masthead .atvahc-megamenu .atvahc-megamenu__panel-title {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .015em;
    color: var(--mm-ink);
}

#masthead .atvahc-megamenu .atvahc-megamenu__viewall {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    font-family: "Lato", sans-serif;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--mm-accent);
    text-decoration: none;
    background: none;
    padding: 0;
    white-space: nowrap;
    transition: color .18s ease;
}

#masthead .atvahc-megamenu .atvahc-megamenu__viewall:hover {
    color: var(--mm-accent-deep);
    background: none;
}

#masthead .atvahc-megamenu__viewall-arrow {
    display: inline-block;
    transition: transform .2s ease;
}

#masthead .atvahc-megamenu .atvahc-megamenu__viewall:hover .atvahc-megamenu__viewall-arrow {
    transform: translateX(4px);
}

/* Narrow flyout -> single subcategory column. */
#masthead .atvahc-megamenu__subs {
    column-count: 1;
}

#masthead .atvahc-megamenu__sub {
    break-inside: avoid;
    margin: 0;
}

/* Subcategory link: warm grey, with an accent dash that grows on hover while the
   label slides right — an editorial micro-interaction in the brand colours.
   Scoped at (1,3,1) to beat GP's deep `.main-navigation ... ul ul li a` (0,2,4). */
#masthead .atvahc-megamenu__subs .atvahc-megamenu__sub a {
    position: relative;
    display: block;
    padding: .38rem 0 .38rem 1.15rem;
    font-family: "Lato", sans-serif;
    font-size: .9rem;
    line-height: 1.35;
    color: var(--mm-text);
    text-decoration: none;
    opacity: 1;
    background: none;
    transition: color .18s ease, padding-left .18s ease;
}

#masthead .atvahc-megamenu__subs .atvahc-megamenu__sub a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1.5px;
    background: var(--mm-accent);
    transform: translateY(-50%);
    transition: width .18s ease, background .18s ease;
}

#masthead .atvahc-megamenu__subs .atvahc-megamenu__sub a:hover {
    color: var(--mm-accent-deep);
    padding-left: 1.6rem;
    background: none;
    text-decoration: none;
}

#masthead .atvahc-megamenu__subs .atvahc-megamenu__sub a:hover::before {
    width: .9rem;
    background: var(--mm-accent-deep);
}

/* ---- Shared card styling (all contexts) ---- */
.atvahc-megamenu__grid {
    list-style: none;
    margin: 0;
    padding: 0;
}

.atvahc-megamenu__col { margin: 0; }

/* Card-text rules are raised to 3-class specificity so they beat GeneratePress's
   deep menu-link rules (.main-navigation .main-nav ul ul li a = 0,2,4), which
   otherwise force display:block, 14px, and 10px/22px padding onto our links. */
.atvahc-megamenu .atvahc-megamenu__col > .atvahc-megamenu__main {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 0;
    margin: 0 0 .5rem;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .03em;
    line-height: 1.3;
    text-decoration: none;
    color: inherit;
    background: none;
}

.atvahc-megamenu__main-arrow {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--mm-accent);
}

.atvahc-megamenu__thumb,
.atvahc-megamenu__thumb img {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
    flex: 0 0 auto;
    display: block;
}

.atvahc-megamenu__thumb img { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }

.atvahc-megamenu__thumb--empty { background: #f0ece9; }

.atvahc-megamenu__subs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.atvahc-megamenu .atvahc-megamenu__subs .atvahc-megamenu__sub a {
    display: block;
    padding: .2rem 0;
    font-size: .85rem;
    line-height: 1.4;
    color: inherit;
    opacity: .85;
    text-decoration: none;
    background: none;
}

.atvahc-megamenu .atvahc-megamenu__subs .atvahc-megamenu__sub a:hover {
    opacity: 1;
    background: none;
    text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   Mobile header + off-canvas slideout (body-level, OUTSIDE #masthead): render
   the same markup as a tap accordion. Both containers carry the panel; only one
   is visible at a time per viewport. The panel is hidden until its <li> gets
   .is-open (JS); each main's subs are hidden until that column gets .is-open
   (JS). The desktop-only right-panel head (serif title + view-all) is suppressed
   here — the parent link above it already names the category.

   GeneratePress styles the off-canvas with ID-scoped rules — notably
   `#generate-slideout-menu.main-navigation ul ul { display:none }` (1,1,2) and
   `.slideout-navigation.do-overlay .slideout-menu li a { display:inline-block }`
   (0,3,2) — which outrank class-based overrides. Rather than chain ever-higher
   specificity against GP's id selectors, the display TOGGLES below use
   !important; it is the maintainable, reliable way to win the cascade for this
   self-contained accordion. (Verified against this GP build with Playwright.)
   ------------------------------------------------------------------------- */
.mobile-header-navigation .atvahc-megamenu,
.slideout-navigation .atvahc-megamenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0 0 .5rem 1rem;
    display: none;
}

.mobile-header-navigation .atvahc-has-megamenu.is-open > .atvahc-megamenu,
.slideout-navigation .atvahc-has-megamenu.is-open > .atvahc-megamenu {
    display: block;
}

.mobile-header-navigation .atvahc-megamenu__panel-head,
.slideout-navigation .atvahc-megamenu__panel-head {
    display: none !important;
}

/* GP gives nested submenu <ul>s a white background (.main-navigation ul ul),
   which would make the white slideout text invisible. Force transparent so the
   text shows on the dark overlay like GP's own menu items. !important beats GP's
   id-scoped slideout rules. */
.mobile-header-navigation .atvahc-megamenu__grid,
.slideout-navigation .atvahc-megamenu__grid {
    display: block !important;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.mobile-header-navigation .atvahc-megamenu__col,
.slideout-navigation .atvahc-megamenu__col {
    margin-bottom: .25rem;
    text-align: left;
}

/* Card link layout must beat GP's slideout `... li a { display:inline-block }`. */
.mobile-header-navigation .atvahc-megamenu__col > .atvahc-megamenu__main,
.slideout-navigation .atvahc-megamenu__col > .atvahc-megamenu__main {
    display: flex !important;
}

/* Chevron points right, rotates down when the row's subs are expanded. */
.mobile-header-navigation .atvahc-megamenu__main-arrow,
.slideout-navigation .atvahc-megamenu__main-arrow {
    margin-left: auto;
    transition: transform .18s ease;
}

.mobile-header-navigation .atvahc-megamenu__col.is-open .atvahc-megamenu__main-arrow,
.slideout-navigation .atvahc-megamenu__col.is-open .atvahc-megamenu__main-arrow {
    transform: rotate(90deg);
}

.mobile-header-navigation .atvahc-megamenu__subs,
.slideout-navigation .atvahc-megamenu__subs {
    display: none !important;
    padding-left: 1rem;
    background: transparent !important;
    text-align: left;
}

.mobile-header-navigation .atvahc-megamenu__col.is-open .atvahc-megamenu__subs,
.slideout-navigation .atvahc-megamenu__col.is-open .atvahc-megamenu__subs {
    display: block !important;
}