/* CRS.HybridSearch - HybridMenu Frontend Styles */

/* Coarse text-size selector — applied as a class on `.crs-hybridmenu-dropdown`
   from the Razor side (txt-sm / txt-md / txt-lg). The class sets the dropdown's
   own root font-size, and the heading/sub/sub-sub rules below use `em` units
   relative to that, so the WHOLE typographic stack scales together while
   preserving the hierarchy ratios. Medium is the baseline (1rem === 16px). */
.crs-hybridmenu-dropdown.txt-sm { font-size: 0.88rem; }
.crs-hybridmenu-dropdown.txt-md { font-size: 1rem; }
.crs-hybridmenu-dropdown.txt-lg { font-size: 1.15rem; }

/* Smartstore's `.megamenu-dropdown-container.simple .dropdown-menu` sets
   `--dropdown-min-width: 250px` (Themes/Flex/_megamenu.scss:345). That's the source
   of the squeezed-narrow dropdown — three headings were stacked horizontally because
   multi-column had only 250px to work with. We override the custom property and
   the explicit min-width so the dropdown spans the full container width and the
   multi-column layout balances into 3 stacked columns like the MegaMenu reference. */
.crs-hybridmenu-dropdown-container.simple .dropdown-menu.crs-hybridmenu-dropdown {
    --dropdown-min-width: 100%;
}
.crs-hybridmenu-dropdown-container > [id^="dropdown-menu-"] {
    width: 100%;
    left: 0;
    right: 0;
}
.crs-hybridmenu-dropdown-container .crs-hybridmenu-dropdown {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 24px 28px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    /* Bootstrap's `.dropdown-menu` ships `background-color: var(--bs-dropdown-bg)`.
       Override both the bs-var AND the literal `background-color` so neither path
       can bring back white. */
    --bs-dropdown-bg: var(--hm-bg-color, #fff);
    background-color: var(--hm-bg-color, #fff);
    /* Only round the bottom corners — the dropdown attaches visually to the top-nav
       so the top edge stays flush with the nav bar (a top radius would float the
       dropdown awkwardly above the nav). */
    border-radius: 0 0 var(--hm-radius, 8px) var(--hm-radius, 8px);
    box-sizing: border-box;
    /* IMPORTANT: do NOT set `position: relative` or `isolation: isolate` here.
       Bootstrap's `.dropdown-menu` defaults to `position: absolute` so it floats
       above the page content. Overriding it with `relative` makes the dropdown
       part of the normal layout flow — that pushed every element below the menu
       down by the dropdown's height, which looked exactly like "page rendering
       broke under the menu". The `::before` bg-picture overlay still anchors
       correctly to the absolute-positioned dropdown.
       `overflow: hidden` is needed so the bg-picture ::before respects border-radius. */
    overflow: hidden;
}
/* Background-picture overlay: rendered as a ::before pseudo so it can have its own
   opacity slider, independent of the dropdown bg-color. */
.crs-hybridmenu-dropdown.has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hm-bg-image);
    background-size: var(--hm-bg-size, contain);
    background-position: var(--hm-bg-pos, right bottom);
    background-repeat: no-repeat;
    opacity: var(--hm-bg-opacity, 1);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
/* In Glass mode the bg-color becomes semi-transparent so the page behind shines
   through — the bg-picture should follow the same treatment, otherwise an opaque
   logo on top of a glassy panel looks inconsistent. Multiply the picture-opacity
   by the glass-alpha so a 100% picture on 60% glass renders at 60% effective
   opacity, matching the panel chrome. */
.crs-hybridmenu-dropdown.glass.has-bg::before {
    opacity: calc(var(--hm-bg-opacity, 1) * var(--hm-glass-alpha, 0.7));
}
/* Glass / Backdrop blur — semi-transparent base color over whatever is behind the dropdown.
   We use `rgba(var(--hm-bg-color-rgb), alpha)` (RGB triplet pre-computed in Razor) instead
   of `color-mix(...)` because the latter was browser-fragile in earlier tries. `!important`
   on the bg-color because Bootstrap's `--bs-dropdown-bg` chain has equal specificity.

   3D smoked-glass look:
   - linear-gradient overlay simulates light hitting the top of the pane,
   - 4 inset shadows form a bevel (bright top/left, dark bottom/right edges) so the
     glass appears to have real thickness,
   - 2 large inset radial-ish shadows (top highlight + bottom shading) emulate edge
     refraction on a curved smoked-glass surface,
   - 4 cascading outer drop-shadows create a multi-step soft shadow as if light came
     from several angles, giving the panel a real floating-above-page feel.
   - stronger backdrop-filter (blur 20, saturate 160%, contrast 1.08) makes the glass
     read as "frosted/smoked" rather than crystal-clear. */
.crs-hybridmenu-dropdown-container .crs-hybridmenu-dropdown.glass {
    /* `--hm-bg-glass` is built in HybridMenu.cshtml — it's either an `rgba(R,G,B,alpha)`
       (when bg-color is a hex) or a `color-mix(in srgb, var(--theme-token) <alpha>%, transparent)`
       (when bg-color is a CSS variable like `var(--blue)` from the theme).
       Using the pre-built var avoids the `rgba(var(--hm-bg-color-rgb), ...)` trap where a
       non-parseable hex fell back to 255,255,255 and the panel rendered white regardless
       of the chosen colour. */
    background-color: var(--hm-bg-glass, rgba(var(--hm-bg-color-rgb, 255, 255, 255), var(--hm-glass-alpha, 0.7))) !important;
    --bs-dropdown-bg: var(--hm-bg-glass, rgba(var(--hm-bg-color-rgb, 255, 255, 255), var(--hm-glass-alpha, 0.7))) !important;
    border-color: rgba(0, 0, 0, 0.12);
    /* NO white linear-gradient overlay — the chosen bg-color tints the glass directly.
       Previous overlay (white stops) flooded coloured panels (green/blue) to look
       washed-out near-white. 3D dimensionality now comes from dark inset edges + the
       outer cascading drop-shadow stack alone. */
    background-image: none;
    box-shadow:
        inset  0  -2px 1px rgba(0, 0, 0, 0.24),
        inset -2px   0 1px rgba(0, 0, 0, 0.18),
        inset  0 -14px 32px -10px rgba(0, 0, 0, 0.20),
        0  2px  4px rgba(0, 0, 0, 0.18),
        0  6px 14px rgba(0, 0, 0, 0.22),
        0 22px 40px rgba(0, 0, 0, 0.32),
        0 44px 80px rgba(0, 0, 0, 0.24);
    backdrop-filter: saturate(170%) contrast(1.12) blur(28px);
    -webkit-backdrop-filter: saturate(170%) contrast(1.12) blur(28px);
}
/* For backdrop-filter to show anything, every ancestor between the dropdown and the page
   body must NOT have its own opaque background — otherwise the blur "sees" only the
   ancestor's bg. Smartstore's `.megamenu-dropdown-container` has a white bg + shadow.
   When glass is on we strip those on the container that wraps a glass-dropdown so the
   page content behind shines through. */
.crs-hybridmenu-dropdown-container:has(.crs-hybridmenu-dropdown.glass),
.crs-hybridmenu-dropdown-container:has(.crs-hybridmenu-dropdown.glass) > [id^="dropdown-menu-"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
/* All actual content (grid, columns, teaser, bglink) sits on z-index 1 so the ::before
   bg-picture stays behind. */
.crs-hybridmenu-dropdown > * { position: relative; z-index: 1; }

/* Dropdown grid: by default one column (just the heading-stack). When a category
   picture is present we switch on `.has-side` and put the picture in a fixed-width
   left column with the heading-stack to the right. */
.crs-hm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    position: relative;
}
.crs-hm-grid.has-side {
    /* Category picture as a fixed-width column on the left, main content on the right. */
    grid-template-columns: 220px 1fr;
}
.crs-hm-grid.has-related {
    /* No cat-pic, just main + related: main grows, related is a fixed 200px aside. */
    grid-template-columns: 1fr 200px;
}
.crs-hm-grid.has-side.has-related {
    /* All three columns: cat-pic left, main middle, related right. */
    grid-template-columns: 220px 1fr 200px;
}
@media (max-width: 767px) {
    .crs-hm-grid.has-side,
    .crs-hm-grid.has-related,
    .crs-hm-grid.has-side.has-related { grid-template-columns: 1fr; }
}

/* "Passt dazu" / related categories column — sits on the right, narrow and unobtrusive. */
.crs-hm-related {
    align-self: start;
    padding-left: 14px;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}
@media (max-width: 767px) {
    .crs-hm-related { padding-left: 0; border-left: 0; border-top: 1px solid rgba(0, 0, 0, 0.06); padding-top: 12px; }
}
.crs-hm-related-heading {
    font-size: 0.92em;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px 0;
}
.crs-hm-related-list {
    display: block;
}
.crs-hm-related-item {
    padding: 3px 0;
}
.crs-hm-related-item a {
    font-size: 0.92em;
    line-height: 1.3;
}
.crs-hm-side {
    align-self: start;
}
.crs-hybridmenu-dropdown .crs-hm-category-pic img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Same radius on all 4 corners as the dropdown panel's bottom corners, so
       the picture echoes the panel chrome. `!important` because the Flex-Theme
       sets `.dropdown-menu img { border-radius: ... }` with equal or higher
       specificity, which was overriding our CSS variable to a smaller fixed value. */
    border-radius: var(--hm-radius, 8px) !important;
}
.crs-hm-main {
    min-width: 0;
}
.crs-hm-summary {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.crs-hm-summary h6 { margin: 0 0 6px 0; font-weight: 600; }
.crs-hm-summary p { margin: 0; color: #666; }

/* Multi-column layout for the heading-stack inside one dropdown. CSS multi-column
   automatically balances headings + their child lists across the available columns
   and `break-inside: avoid` keeps a heading attached to its sub-list.

   Responsive column count — driven by viewport width so the per-column line length
   stays readable on wide monitors AND narrow laptops. The KI-related sidebar
   (200px) eats panel real estate, so when `has-related` is on we drop ONE column
   at every breakpoint compared to the default. */
.crs-hm-columns {
    column-count: 4;
    column-gap: 24px;
    column-fill: balance;
}
.crs-hm-grid.has-related .crs-hm-columns {
    column-count: 3;
}
@media (min-width: 1600px) {
    .crs-hm-columns { column-count: 6; }
    .crs-hm-grid.has-related .crs-hm-columns { column-count: 5; }
}
@media (min-width: 1400px) and (max-width: 1599px) {
    .crs-hm-columns { column-count: 5; }
    .crs-hm-grid.has-related .crs-hm-columns { column-count: 4; }
}
@media (max-width: 1199px) {
    .crs-hm-columns { column-count: 3; }
    .crs-hm-grid.has-related .crs-hm-columns { column-count: 2; }
}
@media (max-width: 991px) {
    .crs-hm-columns { column-count: 2; }
    .crs-hm-grid.has-related .crs-hm-columns { column-count: 2; }
}
@media (max-width: 575px) {
    .crs-hm-columns,
    .crs-hm-grid.has-related .crs-hm-columns { column-count: 1; }
}

.crs-hm-group {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 18px;
    display: block;
}

.crs-hm-group .crs-hm-heading {
    display: block;
    font-weight: 700;
    color: #222;
    text-decoration: none;
    margin-bottom: 6px;
    /* `em` so the heading scales with the wrapper's .txt-sm/md/lg root size. */
    font-size: 1em;
    line-height: 1.25;
    /* Word-wrap for narrow columns: long category names like
       "Multifunktionswerkzeuge" must wrap inside the column instead of
       overflowing or stretching the column. `overflow-wrap: anywhere`
       allows mid-word breaks as a last resort; `hyphens: auto` adds
       proper hyphenation for languages that have a hyphenation dictionary
       (German benefits the most from this). */
    overflow-wrap: anywhere;
    word-wrap: break-word;
    hyphens: auto;
}
.crs-hm-group, .crs-hm-subitems li {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}
.crs-hm-subitems li a {
    /* Allow long names to wrap; without this they'd elongate the column. */
    overflow-wrap: anywhere;
    word-wrap: break-word;
    hyphens: auto;
}
.crs-hm-group .crs-hm-heading:hover { color: var(--primary, #347468); }

.crs-hm-subitems, .crs-hm-subitems-inline {
    list-style: none;
    padding: 0;
    margin: 0 0 4px 0;
}
.crs-hm-subitems li { padding: 2px 0; }
/* Universal anchor styling for everything inside the dropdown EXCEPT the bold-heading
   column anchors and the transparent click-overlay. Using the dropdown root as scope
   raises specificity above `.dropdown-menu a` (Bootstrap baseline) and any theme
   `.megamenu-dropdown a` cascade, so the engraved-list look stays consistent for both
   the vertical sub-list (`.crs-hm-subitems`) AND the inline variant (`.crs-hm-subitems-inline`).
   Earlier rules only targeted `.crs-hm-subitems li a` and missed inline + sub-sub levels —
   that's why "Mode" and "Gruppe1, Gruppe2, Gruppe3" rendered as blue underlined links. */
.crs-hybridmenu-dropdown a:not(.crs-hm-heading):not(.crs-hm-bglink) {
    color: #555 !important;
    text-decoration: none !important;
    /* System-font stack — picks the OS native UI font (San Francisco on macOS,
       Segoe UI on Windows, Roboto on Android, …). Renders larger and more readable
       than the theme's default tiny menu font. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.crs-hybridmenu-dropdown a:not(.crs-hm-heading):not(.crs-hm-bglink):hover {
    color: var(--primary, #347468) !important;
    text-decoration: underline !important;
}
.crs-hm-subitems li a { font-size: 0.95em; line-height: 1.35; }
/* Tree-view rendering for nested sub-trees:
   - left guide line via `border-left` on the nested <ul> so the user can visually trace the
     hierarchy at a glance,
   - increasing left padding per depth (12px / 14px / 16px) so deeper levels indent further,
   - a small "└" marker via ::before on the items so each entry visually attaches to the line,
   - decreasing font-size + lighter color per level for visual de-emphasis. */
.crs-hm-subitems .crs-hm-subitems {
    /* Level 3 indent: 8px margin + 14px padding = ~22px visible offset from level 2,
       plus a dashed left guide so the parent/child relation is obvious at a glance. */
    margin: 4px 0 4px 8px;
    padding-left: 14px;
    border-left: 1px dashed #d8d8d8;
    font-size: 0.92em;
}
.crs-hm-subitems .crs-hm-subitems li {
    position: relative;
    padding-left: 10px;
}
.crs-hm-subitems .crs-hm-subitems li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 0;
    border-top: 1px dashed #d8d8d8;
}
/* Sub-sub items (level 3) — switch to an elegant serif-italic so the visual
   hierarchy (sans-serif heading → sans-serif sub → serif-italic sub-sub) is
   immediately obvious without needing strong color contrasts. Cambria/Georgia
   are available out of the box on Windows + macOS; the long fallback chain
   keeps it readable on Linux/Android too. Slightly tighter than the parent
   font size so the indent stays usable. !important matches the universal
   anchor rule above so this depth-2 styling actually wins the cascade. */
.crs-hm-subitems .crs-hm-subitems li a {
    color: #777 !important;
    font-family: Cambria, Georgia, "Iowan Old Style", "Times New Roman", "Liberation Serif", serif !important;
    font-size: 1em;
    line-height: 1.45;
    letter-spacing: 0.01em;
}
.crs-hm-subitems .crs-hm-subitems .crs-hm-subitems {
    margin-left: 4px;
    padding-left: 12px;
}
.crs-hm-subitems .crs-hm-subitems .crs-hm-subitems li a { color: #999; font-size: .88em; }
.crs-hm-subitems .crs-hm-subitems .crs-hm-subitems .crs-hm-subitems li a { color: #aaa; font-size: .86em; }
.crs-hm-subitems-inline { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.crs-hm-subitems-inline li::after { content: ','; }
.crs-hm-subitems-inline li:last-child::after { content: ''; }
.crs-hm-more a { font-weight: 600; color: #222; }

/* Teaser (HTML only — Rotator is rendered as a full-width strip below the grid, see `.crs-hm-rotator-row`). */
.crs-hm-teaser {
    grid-column: 1 / -1;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
}

/* ---- Full-width AI-rotator strip (TeaserType.AIMatching) ---- */
/* Sits OUTSIDE the heading grid, spans the entire dropdown width. Tile layout
   mirrors the InstantSearch `.hs-tile` grid (fixed-height card, thumb on top,
   name + short desc + price stacked below) so it visually matches the rest of
   the search UX. */
.crs-hm-rotator-row {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.crs-hm-rotator-row .crs-hm-rotator-heading {
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 12px 0;
    color: #222;
    text-align: center;
}
.crs-hm-rotator-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.crs-hm-rotator-tile {
    display: flex;
    flex-direction: column;
    height: 220px;
    padding: 10px;
    border-radius: 8px;
    background: transparent;
    color: #333 !important;
    text-decoration: none !important;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    /* Soft engraving + multi-stage shadow to echo the InstantSearch tiles. */
    box-shadow:
        inset 0   1px 0 rgba(255, 255, 255, 0.40),
        inset 1px   0 0 rgba(255, 255, 255, 0.18),
        inset 0  -1px 0 rgba(0, 0, 0, 0.10),
        inset -1px  0 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    will-change: transform, box-shadow;
}
.crs-hm-rotator-tile:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0   1px 0 rgba(255, 255, 255, 0.50),
        inset 1px   0 0 rgba(255, 255, 255, 0.25),
        inset 0  -1px 0 rgba(0, 0, 0, 0.13),
        inset -1px  0 0 rgba(0, 0, 0, 0.07),
        0  2px  4px rgba(0, 0, 0, 0.08),
        0  8px 16px rgba(0, 0, 0, 0.12);
    color: #222 !important;
}
.crs-hm-rotator-tile-thumb {
    flex: 0 0 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
}
.crs-hm-rotator-tile-thumb img {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
}
.crs-hm-rotator-tile-name {
    flex: 0 0 36px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.crs-hm-rotator-tile-desc {
    flex: 0 0 28px;
    font-size: 0.72rem;
    color: #888;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.crs-hm-rotator-tile-price {
    margin-top: auto;
    font-size: 0.9rem;
    font-weight: 700;
    color: #222;
    text-align: center;
}

/* Background-image positioning */
.crs-hybridmenu-dropdown {
    background-repeat: no-repeat;
}

/* Background-link (clickable bg area) */
.crs-hm-bglink {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.crs-hm-grid > * { position: relative; z-index: 1; }

/* ---- Brand-Tab layouts ----
   Two variants driven by `HybridMenuBrandDisplayType` from the global config:
   - Simple → 2-column list of rows, each row = 35x35 logo + name to the right.
   - Advanced → compact tile grid, each tile roughly half the size of a product
                rotator tile, logo on top + name below. */

/* Common scope */
.crs-hm-brand { display: block; }

/* Simple list — responsive column-count: 4 on wide screens, stepping down to
   3 / 2 / 1 as the viewport narrows so the row width per item stays readable. */
.crs-hm-brand--list {
    column-count: 4;
    column-gap: 24px;
}
@media (max-width: 1399px) {
    .crs-hm-brand--list { column-count: 3; }
}
@media (max-width: 991px) {
    .crs-hm-brand--list { column-count: 2; }
}
@media (max-width: 575px) {
    .crs-hm-brand--list { column-count: 1; }
}
.crs-hm-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    text-decoration: none !important;
    color: #444 !important;
    break-inside: avoid;
}
.crs-hm-brand-row:hover { color: var(--primary, #347468) !important; }
.crs-hm-brand-row-logo {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crs-hm-brand-row-logo img {
    max-width: 35px !important;
    max-height: 35px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}
.crs-hm-brand-row-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Advanced tiles (~half the size of product rotator tiles → ~110×120). */
.crs-hm-brand--tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.crs-hm-brand-tile {
    display: flex;
    flex-direction: column;
    height: 120px;
    padding: 8px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow:
        inset 0   1px 0 rgba(255, 255, 255, 0.40),
        inset 1px   0 0 rgba(255, 255, 255, 0.18),
        inset 0  -1px 0 rgba(0, 0, 0, 0.10),
        inset -1px  0 0 rgba(0, 0, 0, 0.05);
    color: #333 !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.crs-hm-brand-tile:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0   1px 0 rgba(255, 255, 255, 0.50),
        inset 1px   0 0 rgba(255, 255, 255, 0.25),
        inset 0  -1px 0 rgba(0, 0, 0, 0.13),
        inset -1px  0 0 rgba(0, 0, 0, 0.07),
        0 2px 6px rgba(0, 0, 0, 0.10);
}
.crs-hm-brand-tile-thumb {
    flex: 0 0 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.crs-hm-brand-tile-thumb img {
    max-width: 100% !important;
    max-height: 70px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}
.crs-hm-brand-tile-name {
    margin-top: auto;
    font-size: 0.78rem;
    line-height: 1.2;
    text-align: center;
    color: #555;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}