/* Metzler Scrolling Shop - Alza-style kategoriovy sidebar
 * Layout: slim sticky stlpcek vlavo, fly-out cascade na :hover (desktop)
 * alebo .is-open class (mobile tap).
 *
 * Mobile (<1024px) = desktop collapsed mode (vzdy slim, no hover-expand).
 * Tap trigger pre fly-out cez is-open class spravuje JS.
 */

/* === BASE styles (vsetky velkosti) === */

.metzler-cat-sidebar {
    --metzler-sidebar-top: 100px;
    --metzler-sidebar-collapsed-width: 56px;
    --metzler-sidebar-expanded-width: 280px;

    display: block;
    position: sticky;
    top: var(--metzler-sidebar-top);
    align-self: flex-start;
    float: left;
    margin: 0 16px 0 0;
    width: var(--metzler-sidebar-collapsed-width);
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    padding: 8px 0;
    overflow: visible;
    max-height: calc(100vh - var(--metzler-sidebar-top) - 30px);
    transition: width 180ms ease, box-shadow 180ms ease;
    z-index: 50;
    box-sizing: border-box;
}

.metzler-cat-sidebar__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.metzler-cat-sidebar__items > li {
    margin: 0;
    padding: 0;
}
.metzler-cat-sidebar__node {
    position: relative;
}

.metzler-cat-sidebar__item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: #1a1a1a !important;       /* prevencia voci modrej z Blocksy theme */
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    transition: background 100ms ease;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}
.metzler-cat-sidebar__node:hover > .metzler-cat-sidebar__item,
.metzler-cat-sidebar__node:focus-within > .metzler-cat-sidebar__item {
    background: #f4f4f4;
    color: #1a1a1a !important;
}

.metzler-cat-sidebar__icon-wrap {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f4f4f4;
    overflow: hidden;
}
.metzler-cat-sidebar__thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    display: block;
}
.metzler-cat-sidebar__letter {
    font-size: 14px;
    font-weight: 700;
    color: #555;
}

/* Label / count / caret - skryte v collapsed mode (default) cez opacity 0.
 * Pri hover-expand (desktop) alebo always-expanded mode sa zobrazia. */
.metzler-cat-sidebar__label {
    flex: 1 1 auto;
    opacity: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 120ms ease 60ms;
}
.metzler-cat-sidebar__count {
    flex: 0 0 auto;
    font-size: 11px;
    color: #888;
    font-weight: 400;
    opacity: 0;
    transition: opacity 120ms ease 60ms;
}
.metzler-cat-sidebar__caret {
    flex: 0 0 auto;
    font-size: 11px;
    color: #aaa;
    font-weight: 400;
    opacity: 0;
    transition: opacity 120ms ease 60ms, color 100ms ease;
}
.metzler-cat-sidebar__node:hover > .metzler-cat-sidebar__item .metzler-cat-sidebar__caret {
    color: #1a1a1a;
}

/* === Fly-out submenu (cascade) === */
.metzler-cat-sidebar__sub {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 4px;
    min-width: 240px;
    max-width: 320px;
    max-height: calc(100vh - var(--metzler-sidebar-top) - 30px);
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
    z-index: 60;
}
/* Sub items vzdy plne (bez collapsed) */
.metzler-cat-sidebar__sub .metzler-cat-sidebar__item {
    padding: 6px 12px;
    gap: 10px;
}
.metzler-cat-sidebar__sub .metzler-cat-sidebar__icon-wrap {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
}
.metzler-cat-sidebar__sub .metzler-cat-sidebar__thumb {
    width: 24px;
    height: 24px;
}
.metzler-cat-sidebar__sub .metzler-cat-sidebar__letter {
    font-size: 12px;
}
/* V sub fly-out su labels VZDY visible bez ohladu na collapsed/expanded
 * mode rodicovskeho sidebar-u. !important kvoli prepiskom z mobile mode. */
.metzler-cat-sidebar__sub .metzler-cat-sidebar__label,
.metzler-cat-sidebar__sub .metzler-cat-sidebar__count,
.metzler-cat-sidebar__sub .metzler-cat-sidebar__caret {
    opacity: 1 !important;
}
/* Open state - cez :hover (desktop) ALEBO is-open class (mobile tap) */
.metzler-cat-sidebar__node.is-open > .metzler-cat-sidebar__sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition-delay: 0s;
}

/* === Desktop hover-expand (≥1024px) === */
@media (min-width: 1024px) {
    .metzler-cat-sidebar:hover,
    .metzler-cat-sidebar:focus-within {
        width: var(--metzler-sidebar-expanded-width);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
    /* Pri expand-e zobrazit labels/count/caret */
    .metzler-cat-sidebar:hover .metzler-cat-sidebar__label,
    .metzler-cat-sidebar:hover .metzler-cat-sidebar__count,
    .metzler-cat-sidebar:hover .metzler-cat-sidebar__caret,
    .metzler-cat-sidebar:focus-within .metzler-cat-sidebar__label,
    .metzler-cat-sidebar:focus-within .metzler-cat-sidebar__count,
    .metzler-cat-sidebar:focus-within .metzler-cat-sidebar__caret {
        opacity: 1;
    }
    /* Open na hover (desktop) - spravuje JS cez is-hover-open class
     * (CSS-only :hover by zatvarala fly-out hned pri trafeni 4px gap-u
     * medzi parent a submenu; JS pridava 1s grace timer). */
    .metzler-cat-sidebar__node.is-hover-open > .metzler-cat-sidebar__sub,
    .metzler-cat-sidebar__node:focus-within > .metzler-cat-sidebar__sub {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;
        transition-delay: 0s;
    }
    /* WP admin bar offset */
    body.admin-bar .metzler-cat-sidebar {
        --metzler-sidebar-top: calc(100px + 32px);
    }
}

/* === Always-expanded mode (desktop only - na mobile sa neaplikuje) === */
@media (min-width: 1024px) {
    .metzler-cat-sidebar.is-always-expanded {
        width: var(--metzler-sidebar-expanded-width);
        transition: none;
    }
    .metzler-cat-sidebar.is-always-expanded .metzler-cat-sidebar__label,
    .metzler-cat-sidebar.is-always-expanded .metzler-cat-sidebar__count,
    .metzler-cat-sidebar.is-always-expanded .metzler-cat-sidebar__caret {
        opacity: 1;
        transition: none;
    }
}

/* === Mobile (<1024px) === */
@media (max-width: 1023.98px) {
    .metzler-cat-sidebar {
        --metzler-sidebar-top: 80px;
        margin-right: 12px;
    }
    /* Always-expanded sa NEAplikuje na mobile - vzdy slim.
     * Direct child selector > aby sa hide opacity NEvztaholo na sub fly-out
     * labels (sub items maju vlastne pravidlo opacity: 1 !important vyssie). */
    .metzler-cat-sidebar.is-always-expanded {
        width: var(--metzler-sidebar-collapsed-width);
    }
    .metzler-cat-sidebar.is-always-expanded > .metzler-cat-sidebar__items > .metzler-cat-sidebar__node > .metzler-cat-sidebar__item .metzler-cat-sidebar__label,
    .metzler-cat-sidebar.is-always-expanded > .metzler-cat-sidebar__items > .metzler-cat-sidebar__node > .metzler-cat-sidebar__item .metzler-cat-sidebar__count,
    .metzler-cat-sidebar.is-always-expanded > .metzler-cat-sidebar__items > .metzler-cat-sidebar__node > .metzler-cat-sidebar__item .metzler-cat-sidebar__caret {
        opacity: 0;
    }
    /* hide-on-mobile setting - uplne skryt */
    .metzler-cat-sidebar.is-hide-on-mobile {
        display: none;
    }
    /* Tap feedback */
    .metzler-cat-sidebar__node:active > .metzler-cat-sidebar__item {
        background: #f0f0f0;
    }
    /* Visualny stav otvoreneho root node-u */
    .metzler-cat-sidebar > .metzler-cat-sidebar__items > .metzler-cat-sidebar__node.is-open > .metzler-cat-sidebar__item {
        background: #f4f4f4;
    }
}

/* === Product detail page - Floating mode (position: fixed overlay) === */
/* Aktivny iba ked `product_sidebar_mode = 'floating'` (default) - oznaceny
 * cez `body.metzler-product-sb-floating` class (filter v category-sidebar.php).
 *
 * DOM-pozicia: hook `woocommerce_after_single_product_summary` priority 24
 * (hlboko v product detail layout-e, tesne pred similar-products widget).
 * Vizualna pozicia: `position: fixed` kotvi voci viewport-u, takze sidebar
 * je viditelny od momentu page load-u nezavislosti od scroll pozicie ani DOM
 * hierarchie. Layoutu produktu sa nedotyka (overlay na lavom okraji ~56px
 * slim, hover-expand 280px na desktop).
 *
 * JS (`initProductSidebarTop` v category-sidebar.js) dynamicky upravuje top
 * pri scroll-e (sticky-then-shift behaviour - kotvi pod category path
 * pri scroll top, zdvihne sa pri scroll dole).
 *
 * NA `obchod-scroll/` page sidebar ostava sticky+float v jeho main containeri
 * (rovnake spravanie ako predtym).
 */
body.metzler-product-sb-floating .metzler-cat-sidebar {
    /* CSS fallback ak JS nezbeha (`initProductSidebarTop`). JS prepisuje cez
     * inline style.top pri scroll-e (PROD_MIN_TOP=110, PROD_MAX_TOP=220). */
    --metzler-sidebar-top: 220px;

    position: fixed;
    top: var(--metzler-sidebar-top);
    left: 12px;
    float: none;
    margin: 0;
}
body.metzler-product-sb-floating.admin-bar .metzler-cat-sidebar {
    --metzler-sidebar-top: calc(220px + 32px);
}
@media (max-width: 1023.98px) {
    body.metzler-product-sb-floating .metzler-cat-sidebar {
        --metzler-sidebar-top: 130px;
        left: 8px;
    }
    body.metzler-product-sb-floating.admin-bar .metzler-cat-sidebar {
        --metzler-sidebar-top: calc(130px + 46px);
    }
}

/* Floating mode: posun product content doprava (desktop only) aby fixed
 * sidebar neprekryval gallery/summary/tabs/similar-products.
 * Aplikuje sa IBA pre floating mode (docked mode nepotrebuje, ma flex slot). */
@media (min-width: 1024px) {
    body.metzler-product-sb-floating div.product {
        padding-left: 100px;
        box-sizing: border-box;
    }
}

/* === Mobile chip strip (fallback ked sidebar je hidden) === */
.metzler-cat-chips {
    display: none;
}
@media (max-width: 1023.98px) {
    .metzler-cat-chips {
        display: block;
        margin: 0 0 14px 0;
        padding: 8px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .metzler-cat-chips__list {
        display: flex;
        flex-direction: row;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0 12px;
        white-space: nowrap;
    }
    .metzler-cat-chips__list > li { margin: 0; }
    .metzler-cat-chips__item {
        display: inline-block;
        padding: 6px 14px;
        background: #f4f4f4;
        color: #1a1a1a !important;
        text-decoration: none !important;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid transparent;
        transition: background 120ms ease, border 120ms ease;
    }
    .metzler-cat-chips__item:hover,
    .metzler-cat-chips__item:focus-visible {
        background: #ffffff;
        border-color: #d0d0d0;
    }
}

/* Divider medzi kategoriami a site_cards sekciou v sidebar. */
.metzler-cat-sidebar__divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 10px 12px;
}

/* Site cards section - rovnake stylovanie ako kategorie items, ale
 * mensia vyraznosť (grey label, lighter hover). */
.metzler-cat-sidebar__items--sites {
    list-style: none;
    margin: 0;
    padding: 0;
}
.metzler-cat-sidebar__items--sites .metzler-cat-sidebar__node--site .metzler-cat-sidebar__label {
    font-size: 12px;
    color: #555;
}
.metzler-cat-sidebar__items--sites .metzler-cat-sidebar__node--site:hover > .metzler-cat-sidebar__item .metzler-cat-sidebar__label {
    color: #1a1a1a;
}

/* ===========================================================================
 * Mobile drilldown state machine (tap-driven).
 *   STATE 0 (collapsed): default mobile - slim 56px, iba ikony.
 *   STATE 1 (.is-mobile-state-1): expanded sidebar so main category labels.
 *   STATE 2 (.is-mobile-state-2): main kategorie ostavaju visible, otvorena
 *                                 ma sub-list pod sebou (accordion in-place).
 *                                 Tap na inu hlavnu = swap drilldown target.
 *                                 Tap na rovnaku otvorenu = navigate.
 * =========================================================================== */
@media (max-width: 1023.98px) {
    /* STATE 1 + 2: rozsireny sidebar prekryva produkty + ma vnutorny scroll.
     * Jeden zjednoteny scroll (outer) - user scrolluje cez vsetky kategorie
     * a otvorene sub-list spolu. Back button je sticky na top.
     * overscroll-behavior contain: scroll uvnutri nepretecie do page. */
    .metzler-cat-sidebar.is-mobile-state-1,
    .metzler-cat-sidebar.is-mobile-state-2 {
        width: var(--metzler-sidebar-expanded-width);
        box-shadow: 0 0 28px rgba(0, 0, 0, 0.20);
        z-index: 100;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* Labels/count/caret visible v STATE 1 + 2.
     * !important kvoli prepiskom z `is-always-expanded` mobile pravidla
     * (line 238-241) ktore force-uje labels na opacity 0 na mobile. */
    .metzler-cat-sidebar.is-mobile-state-1 .metzler-cat-sidebar__label,
    .metzler-cat-sidebar.is-mobile-state-1 .metzler-cat-sidebar__count,
    .metzler-cat-sidebar.is-mobile-state-1 .metzler-cat-sidebar__caret,
    .metzler-cat-sidebar.is-mobile-state-2 .metzler-cat-sidebar__label,
    .metzler-cat-sidebar.is-mobile-state-2 .metzler-cat-sidebar__count,
    .metzler-cat-sidebar.is-mobile-state-2 .metzler-cat-sidebar__caret {
        opacity: 1 !important;
        transition: opacity 120ms ease;
    }

    /* STATE 2: open parent highlight (visualne odlisene od ostatnych). */
    .metzler-cat-sidebar.is-mobile-state-2 > .metzler-cat-sidebar__items > .metzler-cat-sidebar__node.is-open > .metzler-cat-sidebar__item {
        background: #e8e8e8;
        font-weight: 600;
    }

    /* Submenu v STATE 2: in-place pod parentom (ziadny vlastny scroll - outer
     * sidebar je scrollable a obsahuje main + sub spolu).
     * IBA pod .is-open parent - ostatne sub-listy ostanu skryte (default
     * collapsed state). Bez .is-open constraintu by sa zobrazili VSETKY
     * submenu naraz po prechode do state 2. */
    .metzler-cat-sidebar.is-mobile-state-2 .metzler-cat-sidebar__node.is-open > .metzler-cat-sidebar__sub {
        position: static;
        margin-left: 0;
        min-width: 0;
        max-width: none;
        width: 100%;
        max-height: none;
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08),
                    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition-delay: 0s;
        background: #fafafa;
    }
    /* Sub items vyrazne indent-nute + ikona/thumb tiez (= jasne sub-level).
     * Iba pre otvoreny sub-list (aby sa neaplikovalo na hidden submenu). */
    .metzler-cat-sidebar.is-mobile-state-2 .metzler-cat-sidebar__node.is-open > .metzler-cat-sidebar__sub .metzler-cat-sidebar__item {
        padding-left: 42px;
    }
    /* Vlavo cyan accent line aby sa sub-list vizualne odlisil od main. */
    .metzler-cat-sidebar.is-mobile-state-2 .metzler-cat-sidebar__node.is-open > .metzler-cat-sidebar__sub {
        border-left: 3px solid #005253;
    }

    /* Back button v sub-list (sticky navrchu scrollboxu, vzdy visible). */
    .metzler-cat-sidebar__sub-back {
        position: sticky;
        top: 0;
        z-index: 2;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: #005253;
        color: #fff;
        border: 0;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }
    .metzler-cat-sidebar__sub-back:hover,
    .metzler-cat-sidebar__sub-back:focus {
        background: #003a3b;
    }
    .metzler-cat-sidebar__sub-back-arrow {
        font-size: 18px;
        line-height: 1;
    }
    .metzler-cat-sidebar__sub-back-label {
        flex: 1;
    }
}
@media (min-width: 1024px) {
    .metzler-cat-sidebar__sub-back {
        display: none; /* iba mobile drilldown */
    }
}

/* === Product detail page - Docked mode (vyhradeny priestor v DOM toku) === */
/* Aktivny ked `product_sidebar_mode = 'docked'` - oznaceny cez
 * `body.metzler-product-sb-docked` class. PHP hook
 * `woocommerce_before_single_product:0` otvori .metzler-product-docked-wrap
 * (display:flex), do neho vyrenderuje sidebar a otvori .__content. Hook
 * `woocommerce_after_single_product:PHP_INT_MAX` oba zatvori.
 *
 * Vysledok:
 *   <div class="product">
 *     <div class="metzler-product-docked-wrap">         ← display: flex
 *       <aside class="metzler-cat-sidebar"></aside>     ← flex slot 56px
 *       <div class="metzler-product-docked-wrap__content">  ← flex 1
 *         <!-- gallery, summary, tabs, related, similar -->
 *       </div>
 *     </div>
 *   </div>
 *
 * Sticky kotvi v .__content scroll containeri → sidebar visible od vrchu
 * summary po koniec similar-products. Po skonceni wrap-u sidebar scrollne
 * preč prirodzene (footer page-u). */
body.metzler-product-sb-docked .metzler-product-docked-wrap {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
body.metzler-product-sb-docked .metzler-product-docked-wrap > .metzler-cat-sidebar {
    /* Override floating fixed styly z BASE block-u */
    position: sticky;
    top: 80px;
    left: auto;
    float: none;
    margin: 0;
    flex: 0 0 var(--metzler-sidebar-collapsed-width);
    align-self: flex-start;
}
body.metzler-product-sb-docked.admin-bar .metzler-product-docked-wrap > .metzler-cat-sidebar {
    top: calc(80px + 32px);
}
body.metzler-product-sb-docked .metzler-product-docked-wrap__content {
    flex: 1 1 0;
    min-width: 0; /* aby flex item bol shrinkable, nepretekal */
}
/* Desktop hover-expand v docked mode - sidebar sa rozsiri overlay nad
 * content (absolute z-index pretelej cez content area). */
@media (min-width: 1024px) {
    body.metzler-product-sb-docked .metzler-cat-sidebar:hover,
    body.metzler-product-sb-docked .metzler-cat-sidebar:focus-within {
        flex: 0 0 var(--metzler-sidebar-expanded-width);
    }
}
/* Mobile: docked mode na mobile NEPOUZIVA flex slot - sidebar by zaberal vela
 * miesta v uzkej viewport sirke. Namiesto toho fallback na rovnake floating
 * spravanie ako mode='floating': position:fixed na lavom okraji viewport-u,
 * sidebar je out-of-flow, content zaberie full sirku flex containera.
 * Toto je presne ako sa mobile sidebar choval predtym (slim 56px sticky lavo,
 * tap-to-expand pre fly-out). */
@media (max-width: 1023.98px) {
    body.metzler-product-sb-docked .metzler-product-docked-wrap > .metzler-cat-sidebar {
        position: fixed;
        top: 130px;
        left: 8px;
        flex: none;
        margin: 0;
        /* width neoverridujeme - base CSS dáva 56px (collapsed), state-1/state-2
         * CSS expanduje na 280px pri tap-to-expand. Explicit width tu by vyhral
         * specificitou nad state CSS a tap-to-expand by nefungoval. */
    }
    body.metzler-product-sb-docked.admin-bar .metzler-product-docked-wrap > .metzler-cat-sidebar {
        top: calc(130px + 46px);
    }
    body.metzler-product-sb-docked .metzler-product-docked-wrap__content {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Mobile: padding-left na product content aby fixed sidebar (56px @ left:8px)
 * neprekryval product content. 72px = 8px gap od viewport edge + 56px slim
 * sidebar + 8px breathing room. Aplikuje sa pre obe modi rovnako, lebo na
 * mobile je sidebar v oboch modoch position:fixed.
 *
 * Pozn.: ak je sidebar uplne skryty cez `is-hide-on-mobile` setting (sidebar
 * je `display: none`), padding ostane - vznikne 72px prazdne miesto vlavo.
 * V tom pripade tweak cez Customizer Custom CSS:
 *   @media (max-width:1023.98px) { .single-product div.product { padding-left:0; } } */
@media (max-width: 1023.98px) {
    body.metzler-product-sb-floating div.product,
    body.metzler-product-sb-docked div.product {
        padding-left: 72px;
        box-sizing: border-box;
    }
}