/**
 * Copyright since 2026 DreamCode by DREAM SRL
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License version 3.0
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 *
 * @author    DreamCode <info@dream-code.it>
 * @copyright Since 2026 DreamCode by DREAM SRL
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 *//* DreamCode — Mega Menu frontend — Apple-like clean */

/* Note: the desktop/mobile visibility switch is injected inline
   in menu.tpl so the breakpoint is dynamic. */

.klmm {
  background: var(--klmm-bg, #fff);
  border-bottom: 1px solid #e5e7eb;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  position: relative;
  z-index: 500;
  font-size: var(--klmm-font-size, 14px);
}
.klmm-container {
  max-width: var(--klmm-container-max, 1320px);
  margin: 0 auto;
  padding: 0;
  position: relative;
}
/* Theme-agnostic full-bleed wide mode: when items don't fit inside the
 * theme container, JS adds .klmm-wide to the <nav> and injects the
 * CSS var --klmm-wide-offset with the offset measured on the real DOM,
 * so the menu container starts exactly 16px from the left edge of the
 * viewport regardless of where the parent is placed (flex, grid, not
 * centered, any theme). If even the full viewport isn't enough, JS
 * adds .klmm-force-mobile to <html> to switch to drawer. */
.klmm.klmm-wide .klmm-container {
  width: calc(100vw - 32px);
  max-width: calc(100vw - 32px);
  margin-left: var(--klmm-wide-offset, 0px);
  margin-right: 0;
}
.klmm-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: var(--klmm-justify, center);
  flex-wrap: nowrap;
  gap: 2px;
}

/* Top-level item.
 * flex: 0 0 auto is ESSENTIAL: many themes apply flex-grow/shrink to
 * <li> or .nav-item inherited from the CSS framework (Bootstrap, etc.),
 * which makes items expand/shrink to fill the container, so the check
 * scrollWidth > clientWidth never triggers because there is never any
 * "natural" overflow. Forcing 0 0 auto keeps items at their intrinsic
 * width, letting them overflow the container when they don't fit,
 * allowing the JS overflow watcher to work correctly. */
.klmm-bar > .klmm-top { flex: 0 0 auto; }
.klmm-top { position: static; }
/* Horizontal padding and font-size controlled via JS-driven CSS vars
 * (--klmm-link-padx / --klmm-link-fs) set in menu.tpl by
 * updateLinkSizing(), which scales in 3 phases (max -> proportional
 * ratio -> fine-tuning of padding only) based on the actual bar
 * width, capped by BO preset values and floored at 11px/4px.
 * NOTE: !important because themes often have nav link rules
 * (.nav a, .header a, etc.) more specific that would win. */
.klmm-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--klmm-link-padx, 18px) !important;
  min-height: 44px;
  color: var(--klmm-link, #1d1d1f);
  text-decoration: none;
  font-size: var(--klmm-link-fs, 14px) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color .15s;
  white-space: nowrap;
  text-transform: var(--klmm-transform, none);
}
.klmm-link:hover,
.klmm-link:focus { color: var(--klmm-hover, #0066cc); text-decoration: none; }
/* CSS triangle pointing down (indicates expandable item). Uses
 * currentColor so it follows the preset color automatically.
 * Sizes in `em` scale proportionally with the item font.
 * Negative margin-left compensates the `gap` of the .klmm-link flex
 * to bring the triangle closer to the text. */
.klmm-caret {
  display: inline-block;
  width: 0; height: 0;
  margin-left: calc(0.2em - 6px);
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.38em solid currentColor;
  opacity: 0.85;
}

/* Recursive dropdown: top-level appears below the top item (top:100%),
 * subs appear next to the parent row (top:0 left:100%). Fixed width 260px.
 * Gap + border to visually separate levels. N-level cascade. */
.klmm-dropdown {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  /* 150ms close delay: when the cursor leaves the item the panel waits
   * before starting to fade out, so micro-jitter on the gap between two
   * adjacent items doesn't trigger an open/close ping-pong (Amazon-style
   * intent prediction). On :hover the rules below override the delay to
   * 0s so opening stays instant. */
  transition: opacity .06s .15s, transform .06s .15s, visibility 0s linear .21s;
  z-index: 10;
  width: 260px;
}
/* Dropdown items (NOT mega) have position:relative to act as the
 * centered dropdown container. Mega items stay static to avoid
 * breaking the mega panel centering on the theme container. */
.klmm-top.klmm-has-children:not(.klmm-has-mega) {
  position: relative;
}
/* Top dropdown: anchored by default to the LEFT edge of the item (extends
 * right). When flipped, anchored to the RIGHT edge (extends left). */
.klmm-dropdown-top {
  top: 100%;
  left: 0;
  /* Vertical offset to leave room for the small triangle above. */
  margin-top: 8px;
  transform: translateY(-4px);
}
.klmm-top.klmm-has-children:hover > .klmm-dropdown-top,
.klmm-top.klmm-has-children:focus-within > .klmm-dropdown-top {
  transform: translateY(0);
}
/* Top flip: anchored to the right edge of the item (avoids viewport overflow).
 * Slight negative offset (-14px) so the right edge of the card extends
 * slightly past the item caret to avoid visually clipping it. */
.klmm-top.klmm-flip > .klmm-dropdown-top {
  left: auto;
  right: -14px;
}
/* "Amazon-style" tip above the card: technique of a square rotated 45deg
 * so the thin gray border is always visible (even on a white bar).
 * The square (10x10) has only gray border-top + border-left; after
 * rotate 45deg those become the two upper sides of the rhombus (tip at top).
 * The lower half of the rhombus stays hidden under the dropdown border. */
.klmm-dropdown-top::after {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--klmm-caret-x, 24px);
  width: 10px; height: 10px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
}
.klmm-top.klmm-flip .klmm-dropdown-top::after {
  left: auto;
  right: var(--klmm-caret-x, 24px);
  transform: translateX(50%) rotate(45deg);
}
/* Sub-dropdown (side flyout): to the right of the parent row. */
.klmm-dropdown-sub {
  top: 0;
  /* Horizontal gap to signal this is a separate level */
  left: calc(100% + 6px);
  transform: translateX(-4px);
}
/* Cascade flip: if the top item has .klmm-flip, ALL subs in its cascade
 * open to the LEFT of the parent (consistent, no overlap between levels). */
.klmm-top.klmm-flip .klmm-drop-row.klmm-drop-has-children > .klmm-dropdown-sub {
  left: auto;
  right: calc(100% + 6px);
  transform: translateX(4px);
}
.klmm-top.klmm-flip .klmm-drop-row.klmm-drop-has-children:hover > .klmm-dropdown-sub,
.klmm-top.klmm-flip .klmm-drop-row.klmm-drop-has-children:focus-within > .klmm-dropdown-sub {
  transform: translateX(0);
}
/* Mirrored invisible bridge when the cascade is flipped. */
.klmm-top.klmm-flip .klmm-dropdown-sub::before {
  left: auto;
  right: -6px;
}
/* Invisible bridge covering the side gap: without it the :hover would
 * be lost when the mouse moves from the parent row to the sub-dropdown,
 * closing it. */
.klmm-dropdown-sub::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -6px; width: 6px;
  background: transparent;
}
/* Invisible bridge above the top dropdown to cover the 8px gap between
 * item and dropdown (otherwise the mouse entering the dropdown loses
 * hover on the item and the dropdown closes). */
.klmm-dropdown-top::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
  background: transparent;
}
/* Open on hover/focus of the top item (visibility/opacity). The enter
 * transform (translateY 0) is already handled by the previous rule on
 * .klmm-dropdown-top; here we only unlock opacity/visibility and remove
 * the hide delay. */
.klmm-top.klmm-has-children:hover > .klmm-dropdown-top,
.klmm-top.klmm-has-children:focus-within > .klmm-dropdown-top {
  opacity: 1; visibility: visible;
  /* Open: smooth 180ms fade-in. Close (in the base rule above): fast 60ms
   * fade-out after 150ms tolerance, so two adjacent panels never overlap
   * visibly during a hover transition. */
  transition: opacity .18s, transform .18s, visibility 0s linear 0s;
}
.klmm-drop-row.klmm-drop-has-children:hover > .klmm-dropdown-sub,
.klmm-drop-row.klmm-drop-has-children:focus-within > .klmm-dropdown-sub {
  opacity: 1; visibility: visible; transform: translateX(0); transition-delay: 0s;
}

/* Dropdown row */
.klmm-drop-row { position: relative; }
/* Horizontal separator between rows of the SAME level.
 * Handled per-level by the CSS var --drop-separator emitted by
 * buildDropdownLevelCss() when the user checks "Separator between rows"
 * in the Default Format. Default `0 none` (invisible). Lateral margin
 * 10px to match the mega separator block (.klmm-block-separator). */
.klmm-dropdown > .klmm-drop-row + .klmm-drop-row::before {
  content: '';
  display: block;
  height: 0;
  margin: 0 10px;
  border-top: var(--drop-separator, 0 none);
}
.klmm-drop-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  /* CSS vars (optionally) populated by the dropdown "Default format",
   * per level (top on the .klmm-dropdown-top wrapper, sub on
   * .klmm-dropdown-sub). Fallback = base values. */
  font-family: var(--drop-font-family, inherit);
  font-size: var(--drop-font-size, 14px);
  color: var(--drop-color, #000000);
  font-weight: var(--drop-weight, normal);
  font-style: var(--drop-italic, normal);
  text-transform: var(--drop-transform, none);
  line-height: var(--drop-lh, 1.3);
  text-align: var(--drop-align, left);
  text-decoration: none;
  transition: background .12s, color .12s;
}
/* Optional underline (applied to the label so it's not confused with hover reset). */
.klmm-drop-label { text-decoration: var(--drop-decoration, none); }
/* Hover consistent with the preset:
 * - Default (hover-effect=color): only changes the text color
 * - fill: bg with --klmm-hover + text with --klmm-hover-text
 * data-hover-effect lives on <nav.klmm-desktop>, so matches both. */
.klmm-drop-link:hover,
.klmm-drop-link:focus {
  color: var(--klmm-hover, #0066cc);
  text-decoration: none;
}
[data-hover-effect="fill"] .klmm-drop-link:hover,
[data-hover-effect="fill"] .klmm-drop-link:focus {
  background: var(--klmm-hover, #0066cc);
  color: var(--klmm-hover-text, #ffffff);
}
.klmm-drop-thumb {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 4px;
  overflow: hidden;
  background: #fafbfc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.klmm-drop-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.klmm-drop-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Arrow for rows with cascade (pointing right, CSS triangle) */
.klmm-drop-caret {
  flex: 0 0 auto;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  opacity: 0.75;
}
/* When the cascade is flipped to the left (top .klmm-flip), the whole row
 * is mirrored: arrow points left and comes first (flex order reversed),
 * text aligns right, the thumb ends up on the right. The layout thus
 * "follows" the opening direction of the sub-dropdown. */
.klmm-top.klmm-flip .klmm-drop-caret {
  border-left: 0;
  border-right: 5px solid currentColor;
}
.klmm-top.klmm-flip .klmm-drop-link {
  flex-direction: row-reverse;
}
.klmm-top.klmm-flip .klmm-drop-label {
  text-align: right;
}
/* Highlight the parent row when the sub-dropdown is open: for mode
 * "color" a light gray bg, for "fill" keep the filled hover. */
.klmm-drop-row.klmm-drop-has-children:hover > .klmm-drop-link {
  background: #f0f2f5;
}
[data-hover-effect="fill"] .klmm-drop-row.klmm-drop-has-children:hover > .klmm-drop-link {
  background: var(--klmm-hover, #0066cc);
  color: var(--klmm-hover-text, #ffffff);
}

/* Mega panel — pinned to theme container width, centered.
 * --klmm-container-max is set by menu.tpl JS from the nearest .container;
 * fallback 1320px (Bootstrap xxl) covers Hummingbird default.
 * --klmm-header-bottom is set by the same JS so the panel never exceeds viewport height.
 * --klmm-cols is written inline on the element from the template. */
.klmm-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  /* v1.2.0 — tetto della larghezza del mega panel.
   * --klmm-panel-max: valore globale dal preset (panel_max_width). Puo' essere
   *   sovrascritto per-voce via style="--klmm-panel-max: Npx" sul .klmm-mega
   *   (override item.panel_width nel BO).
   * Resta sempre vincolato a 100vw - 32px: cosi' il panel non sfora mai la
   * finestra anche su viewport piu' stretti del tetto. */
  width: min(var(--klmm-panel-max, var(--klmm-container-max, 1320px)), calc(100vw - 32px));
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.09);
  /* Overflow visible on the outer wrapper: the ::after tip sticks out on top.
   * Content scroll is in the inner .klmm-mega-inner wrapper. */
  overflow: visible;
  /* Vertical gap from the bar to make room for the tip (matches dropdown). */
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  /* --klmm-mega-offset-x: horizontal offset to re-center the panel
   * on the THEME CONTAINER (not on .klmm-desktop, which in Layout A is a
   * flex:1 between logo and icons so its center doesn't coincide with
   * the container center). Computed by JS (updateMegaCenterOffset in menu.tpl).
   * In Layout B it stays ~0 because .klmm-desktop is already centered. */
  transform: translate(calc(-50% + var(--klmm-mega-offset-x, 0px)), -6px);
  /* 150ms close delay (see dropdown rule) — prevents flicker when the
   * cursor crosses the small gap between two adjacent items on the bar. */
  transition: opacity .06s .15s, transform .06s .15s, visibility 0s linear .21s;
  z-index: 10;
}
.klmm-mega-inner {
  max-height: calc(100svh - var(--klmm-header-bottom, 120px) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 20px;
  /* same border-radius as the wrapper to clip scroll content cleanly */
  border-radius: 10px;
}

/* ============================================================================
 * No-overlap rule: when ANY top-level item is hovered, every OTHER non-hovered
 * item closes its panel INSTANTLY (no fade-out). This kills the visual overlap
 * where two panels are momentarily visible while one fades out and the other
 * fades in (the flicker the user reported). The 150ms close-delay above still
 * applies when the mouse leaves the bar entirely (no item hovered) so the
 * tremor tolerance on the vertical gap between item and panel is preserved.
 * Requires :has() — supported on Chrome 105+, Safari 15.4+, Firefox 121+.
 * ============================================================================ */
.klmm-bar:has(.klmm-top:hover) .klmm-top:not(:hover) > .klmm-mega,
.klmm-bar:has(.klmm-top:hover) .klmm-top:not(:hover) > .klmm-dropdown-top {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}
/* Invisible bridge above the mega to cover the gap (same as dropdown). */
.klmm-mega::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
  background: transparent;
}
/* "Amazon-style" tip above the mega, aligned with the item's caret.
 * --klmm-caret-x is populated by JS measuring the caret position
 * relative to the left edge of the mega panel. */
.klmm-mega::after {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--klmm-caret-x, 50%);
  width: 10px; height: 10px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
}

/* Columns row: CSS Grid with equal columns.
 * v1.2.0 — minmax(0, 1fr) invece di minmax(180px, 1fr):
 *   con 180px hardcoded, 6 colonne richiedono almeno 1080px → il panel
 *   sfora il proprio width quando l'utente imposta panel_max_width minore
 *   (es. 900px con 6 colonne genera scrollbar orizzontale interna).
 *   minmax(0, 1fr) lascia le tracce libere di rimpicciolirsi sotto la
 *   larghezza dei contenuti — coerente col fix svp-trust del 2026-06-03. */
.klmm-mega-cols {
  display: grid;
  grid-template-columns: repeat(var(--klmm-cols, 1), minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}
.klmm-mega-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 0 10px;
  /* Container query: allows text blocks to scale based on the actual
   * column width (images already scale on their own). */
  container-type: inline-size;
}
/* Text scale: at 280px+ stays 100%, drops linearly down to 75%
 * around 210px. Images aren't touched because max-width:100% already
 * fits them to the container. Note: the divisor must have units (px)
 * otherwise the result stays in cqw and `zoom` ignores it.
 * Zoom is applied ONLY to inner content (.klmm-block-zoomed, li)
 * and not to the outer block, so the badge overlay stays fixed size. */
.klmm-mega-col .klmm-block-html .klmm-block-zoomed,
.klmm-mega-col .klmm-block-link .klmm-block-zoomed,
.klmm-mega-col .klmm-block-categorylist > li,
.klmm-mega-col .klmm-block-product-label {
  zoom: clamp(0.75, calc(100cqw / 280px), 1);
}
/* Inner wrapper (.klmm-block-zoomed) spans the block width and does
 * not introduce extra layout. For link/text it's inline-block so it
 * does not break the anchor/wrapper flow. */
.klmm-block-html > .klmm-block-zoomed { display: block; }
.klmm-block-link > .klmm-block-zoomed {
  display: inline-flex; align-items: baseline; gap: 6px;
}
/* Vertical separator between columns.
 * v1.2.0 — toggled by the preset setting "show_column_separators": only when
 * the user enables it the nav root gets `.klmm-show-col-sep` and the border
 * shows up. Default OFF in 1.2.0 (was always-on in 1.1.0).
 * Breaking visual change documented in CHANGELOG.
 * v1.2.1 — per-panel override:
 *   .klmm-mega--show-sep on the panel forces the border ON even if the preset
 *     setting is OFF (specificity 0,2,0 beats the preset rule 0,3,0? no:
 *     `.klmm-mega.klmm-mega--show-sep .klmm-mega-col + .klmm-mega-col` has
 *     specificity 0,4,0 > 0,3,0 → wins).
 *   .klmm-mega--no-sep on the panel forces it OFF even if the preset is ON. */
.klmm-show-col-sep .klmm-mega-col + .klmm-mega-col,
.klmm-mega.klmm-mega--show-sep .klmm-mega-col + .klmm-mega-col {
  border-left: 1px solid #e5e8ec;
}
.klmm-mega.klmm-mega--no-sep .klmm-mega-col + .klmm-mega-col {
  border-left: 0 none;
}
/* Aligns the top of the first blocks regardless of type.
 * For text blocks (link/product/html) the wrapper line-height creates
 * a "half-leading" above the glyph that pushes text down compared to
 * an image. line-height:1 on the wrapper zeroes that leading while
 * keeping normal line-height on inner inline elements (span/i). */
.klmm-mega-col > .klmm-block:first-child { margin-top: 0; padding-top: 0; }
.klmm-mega-col > .klmm-block-link:first-child,
.klmm-mega-col > .klmm-block-product:first-child,
.klmm-mega-col > .klmm-block-html:first-child {
  line-height: 1;
}
.klmm-mega-col > .klmm-block-link:first-child > *,
.klmm-mega-col > .klmm-block-product:first-child > *,
.klmm-mega-col > .klmm-block-html:first-child > * {
  line-height: 1.5;
  vertical-align: top;
}

/* Block base */
.klmm-block { display: block; text-decoration: none; color: inherit; }

/* Full-width banner inside the mega panel. Takes the full inner width.
 * Panel padding (24px top/bottom, 20px left/right) is already applied, the
 * banner spans the full width available between the paddings. */
.klmm-block-banner {
  display: block;
  margin-left: 0; margin-right: 0;
  overflow: hidden;
  border-radius: 4px;
}
.klmm-block-banner img {
  display: block; width: 100%; height: auto;
  transition: transform .3s ease;
}
.klmm-block-banner:hover img { transform: scale(1.02); }
.klmm-block-banner-top { margin-bottom: 20px; }
.klmm-block-banner-bottom { margin-top: 20px; }

/* Image block - column max-width, natural height (like ets_megamenu).
 * If the image is narrower than the column it's centered.
 * Hover: slight zoom contained within the wrapper (no overflow). */
.klmm-block-image { margin: 0 0 15px; text-align: center; overflow: hidden; }
.klmm-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
  transition: transform .3s ease;
}
.klmm-block-image:hover img,
a.klmm-block-image:hover img { transform: scale(1.05); }

/* Text/link block (category, cms, supplier, manufacturer, link).
 * Hover effect is configured by the preset (data-hover-effect="fill" | "color"). */
.klmm-block-link {
  padding: 6px 10px;
  font-size: 13px;
  color: #4d5966;
  transition: color .18s ease, background-color .18s ease;
  border-radius: 4px;
}
/* Default / effect="color": text color change only */
.klmm-block-link:hover,
.klmm-block-link:hover * {
  color: var(--klmm-hover, #0066cc) !important;
  text-decoration: none !important;
}
/* effect="fill": colored bg + contrasting text */
[data-hover-effect="fill"] .klmm-block-link:hover,
[data-hover-effect="fill"] .klmm-block-link:hover * {
  color: var(--klmm-hover-text, #ffffff) !important;
  background-color: var(--klmm-hover, #0066cc);
}
.klmm-block-link span { display: inline-block; }

/* Product block - column max-width image, natural height.
 * Hover: slight zoom on the cover, label highlighted with the hover color. */
.klmm-block-product {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
}
.klmm-block-product:hover { text-decoration: none; }
.klmm-block-product-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  transition: transform .3s ease;
}
.klmm-block-product:hover .klmm-block-product-image { transform: scale(1.05); }
.klmm-block-product-label {
  font-size: 13px;
  color: #1d1d1f;
  line-height: 1.3;
  transition: color .18s ease;
}
/* Default / effect="color": label color change only */
.klmm-block-product:hover .klmm-block-product-label,
.klmm-block-product:hover .klmm-block-product-label * {
  color: var(--klmm-hover, #0066cc) !important;
  text-decoration: none !important;
}
/* effect="fill": colored label pill */
[data-hover-effect="fill"] .klmm-block-product:hover .klmm-block-product-label,
[data-hover-effect="fill"] .klmm-block-product:hover .klmm-block-product-label * {
  color: var(--klmm-hover-text, #ffffff) !important;
  background-color: var(--klmm-hover, #0066cc);
  border-radius: 3px;
  padding: 2px 6px;
}

/* Category list block - clickable category list with marker variants.
 * Vertical padding is on the wrapper (not per-row) so heights match
 * those of .klmm-block-html at the same line-height. */
.klmm-block-categorylist {
  list-style: none;
  padding: 4px 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #4d5966;
}
.klmm-block-categorylist li {
  padding: 2px 8px 2px 18px;
  position: relative;
  border-radius: 3px;
  transition: color .18s ease, background-color .18s ease;
}
/* Default / effect="color": color change only */
.klmm-block-categorylist li:hover,
.klmm-block-categorylist li:hover * {
  color: var(--klmm-hover, #0066cc) !important;
  text-decoration: none !important;
}
/* effect="fill": filled row */
[data-hover-effect="fill"] .klmm-block-categorylist li:hover,
[data-hover-effect="fill"] .klmm-block-categorylist li:hover * {
  background-color: var(--klmm-hover, #0066cc);
  color: var(--klmm-hover-text, #ffffff) !important;
}
.klmm-block-categorylist li::before {
  position: absolute;
  left: 2px;
  top: 0;
  color: currentColor;
}
.klmm-block-categorylist[data-marker="bullet"] li::before  { content: "•"; }
.klmm-block-categorylist[data-marker="arrow"] li::before   { content: "→"; }
.klmm-block-categorylist[data-marker="chevron"] li::before { content: "›"; font-weight: 700; }
.klmm-block-categorylist[data-marker="star"] li::before    { content: "★"; }
.klmm-block-categorylist[data-marker="check"] li::before   { content: "✓"; }
.klmm-block-categorylist[data-marker="dash"] li::before    { content: "—"; }
.klmm-block-categorylist[data-marker="none"] li { padding-left: 0; }
.klmm-block-categorylist[data-marker="none"] li::before { content: none; }
/* Numbered: we use counter instead of list-style-type so the color follows currentColor */
.klmm-block-categorylist[data-marker="numbered"] { counter-reset: klmm-cl; }
.klmm-block-categorylist[data-marker="numbered"] li { padding-left: 22px; }
.klmm-block-categorylist[data-marker="numbered"] li::before {
  counter-increment: klmm-cl; content: counter(klmm-cl) ".";
}
.klmm-block-categorylist a {
  color: inherit;
  text-decoration: inherit;
  display: block;
}
/* On <li> hover (handled above) the <a> also gets white text. */
.klmm-block-categorylist li:hover::before { color: #fff !important; }

/* Badge (NEW, SALE, ...) - top-right overlay in all cases.
 * Same size regardless of context (top-level, blocks, image,
 * product, text, categories, link). `!important` to win over any
 * more specific theme rules (Hummingbird / Bootstrap). */
.klmm-badge {
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  vertical-align: top !important;
  width: auto !important;
  height: auto !important;
}
.klmm-badge-overlay {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* Badge on the top-level item: overlay at top-right INSIDE the item
 * outline. The badge lives inside <a.klmm-link>, so position:relative
 * on the link suffices. DO NOT set position:relative on .klmm-top: it
 * would break the .klmm-mega centering (which must be positioned
 * relative to the container, not the item). */
.klmm-top > .klmm-link { position: relative; }
/* Hover bridge: an invisible band right below each top-level item that has a
 * dropdown or mega panel. The actual mega/dropdown panel may be positioned far
 * from the item (mega is centered on the theme container, not the item), so
 * its own ::before bridge does not cover the gap directly under the item.
 * This ::after lives INSIDE the link, so :hover on the link/parent persists
 * while the cursor traverses the 8px gap between item and panel. Without it,
 * a slow horizontal mouse move triggers visible flicker (open/close loop). */
.klmm-top.klmm-has-mega > .klmm-link::after,
.klmm-top.klmm-has-children > .klmm-link::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
  pointer-events: auto;
}
/* Lateral hover bridge: closes the small horizontal gap (~2px) between
 * adjacent items on the bar. Without it, slow horizontal mouse moves
 * land on a "dead zone" between items where neither :hover is true,
 * which makes the open panel start to fade out and re-open on each
 * adjacent item, producing visible flicker. The bridge is a child of
 * the link so :hover propagates correctly to the parent .klmm-top.
 * Applied to ALL items (not only mega/dropdown) because moving from
 * a no-panel item to a panel item through the gap also benefits. */
.klmm-bar > .klmm-top > .klmm-link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -3px;
  width: 4px;
  background: transparent;
  pointer-events: auto;
}
.klmm-badge-top {
  position: absolute;
  /* (2026-06-08) top: 1px (calibrato per il tema svapodream con bar-height
   * ridotta — era 20px originale). */
  top: 1px;
  right: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 3;
}

/* Badge in the dropdown row: inline after the label, small pill.
 * Inherits everything else from the base .klmm-badge. */
.klmm-badge.klmm-badge-drop {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  margin-left: 6px !important;
  flex-shrink: 0;
}
/* Badge in mobile row: inline, slightly larger pill for touch. */
.klmm-badge.klmm-badge-mb {
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  margin-left: 8px !important;
  flex-shrink: 0;
}
/* Inline badge inside the mobile html block (non-flex): superscript. */
.klmm-badge.klmm-badge-mb-inline {
  vertical-align: middle !important;
  margin-left: 6px !important;
}
/* Overlay on stand-alone mobile image: anchored top-right inside the imgwrap. */
.klmm-mobile .klmm-mb-imgwrap { position: relative; display: block; }
.klmm-badge.klmm-badge-mb-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
}
/* Wrappers containing a badge overlay must be positioned. */
.klmm-block-image,
.klmm-block-product,
.klmm-block-html,
.klmm-block-link,
.klmm-block-categorylist { position: relative; }

/* Optional badge "blink" animation: fades between full and low
 * opacity on a 1.8s cycle. Respects reduced-motion preferences. */
@keyframes klmm-badge-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
.klmm-badge-blink {
  animation: klmm-badge-blink 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .klmm-badge-blink { animation: none; }
}

/* Separator block - same "grammar" as the vertical separator between columns,
 * rotated to horizontal, with lateral padding as required. */
.klmm-block-separator {
  border: 0;
  border-top: 1px solid #e5e8ec;
  margin: 10px 10px;
  height: 0;
}

/* Html block */
.klmm-block-html { font-size: 13px; color: #000000; line-height: 1.5; padding: 4px 0; }
.klmm-block-html p { margin: 0 0 8px; }
/* Inline links in the text block: inherit the text color; on hover
 * they take the preset "hover" color. The `a:hover *` selector with
 * !important is needed to force the color on nested <span style="color:...">
 * elements (inline style would otherwise win over the inherited rule). */
.klmm-block-html a {
  color: inherit; text-decoration: none;
  transition: color .18s ease;
}
.klmm-block-html a *,
.klmm-block-html a:hover,
.klmm-block-html a:hover *,
.klmm-block-html a:focus,
.klmm-block-html a:focus * {
  transition: color .18s ease;
}
.klmm-block-html a,
.klmm-block-html a * { transition: color .18s ease, background-color .18s ease; }
/* Default / effect="color": color change only */
.klmm-block-html a:hover,
.klmm-block-html a:hover *,
.klmm-block-html a:focus,
.klmm-block-html a:focus * {
  color: var(--klmm-hover, #0066cc) !important;
  text-decoration: none !important;
}
/* effect="fill": colored pill on the link */
[data-hover-effect="fill"] .klmm-block-html a:hover,
[data-hover-effect="fill"] .klmm-block-html a:hover *,
[data-hover-effect="fill"] .klmm-block-html a:focus,
[data-hover-effect="fill"] .klmm-block-html a:focus * {
  color: var(--klmm-hover-text, #ffffff) !important;
  background-color: var(--klmm-hover, #0066cc);
  border-radius: 3px;
}
.klmm-block-html ul { list-style: disc; padding-left: 20px; margin: 4px 0; }
.klmm-block-html ol { list-style: decimal; padding-left: 20px; margin: 4px 0; }
.klmm-block-html li { margin: 2px 0; }

/* Hover opens submenu
 * v1.2.5: breakpoint allineato al bp content-driven floor 900px. Tutti i
 * comportamenti (menu desk, accedi/cart desk, bottombar mobile) scattano
 * insieme a 900px. */
@media (min-width: 900px) {
  .klmm-has-children:hover > .klmm-dropdown,
  .klmm-has-children:focus-within > .klmm-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s, transform .18s, visibility 0s linear 0s;
  }
  .klmm-has-mega:hover > .klmm-mega,
  .klmm-has-mega:focus-within > .klmm-mega {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(-50% + var(--klmm-mega-offset-x, 0px)), 0);
    /* Open: smooth 180ms fade-in. Close (in the base rule above): fast 60ms
     * fade-out after 150ms tolerance. */
    transition: opacity .18s, transform .18s, visibility 0s linear 0s;
  }
}

/* =========================================================================
 * Mobile menu - hamburger + drawer with screen push-navigation.
 * Architecture:
 *   .klmm-mobile                 nav root (visible only below the breakpoint)
 *     .klmm-mb-bar               compact bar always visible (hamburger)
 *     .klmm-mb-overlay           full-screen backdrop
 *     .klmm-mb-drawer            side panel (left/right) with width var
 *       .klmm-mb-head            back / search / close
 *       .klmm-mb-subhead         crumb + "All" (hidden at root)
 *       .klmm-mb-screens         screens viewport (overflow hidden)
 *         .klmm-mb-screen        one for each parent with children; transform X
 *
 * Screen state:
 *   default                      translateX(100%)  - off-screen right
 *   .is-active                   translateX(0)     - current
 *   .is-past                     translateX(-100%) - already visited in stack
 * ========================================================================= */
.klmm-mobile .klmm-mb-bar {
  display: flex; align-items: center;
  min-height: 56px; padding: 0 12px;
  background: var(--klmm-bg, #fff);
  border-bottom: 1px solid #eee;
}
.klmm-mobile .klmm-mb-toggle {
  background: transparent; border: 0; padding: 10px; cursor: pointer;
  color: var(--klmm-hamburger, #000); line-height: 0;
}
.klmm-mobile .klmm-mb-burger {
  display: inline-block; width: 24px; height: 18px; position: relative;
}
.klmm-mobile .klmm-mb-burger span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
}
.klmm-mobile .klmm-mb-burger span:nth-child(1) { top: 0; }
.klmm-mobile .klmm-mb-burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.klmm-mobile .klmm-mb-burger span:nth-child(3) { bottom: 0; }

/* Overlay */
.klmm-mobile .klmm-mb-overlay {
  position: fixed; inset: 0;
  background: var(--klmm-overlay, rgba(0,0,0,0.5));
  z-index: 900;
  opacity: 0; transition: opacity .22s ease;
}
.klmm-mobile .klmm-mb-overlay.is-open { opacity: 1; }

/* Drawer */
.klmm-mobile .klmm-mb-drawer {
  position: fixed; top: 0; bottom: 0; z-index: 901;
  width: var(--klmm-mb-drawer-w, 100%);
  max-width: var(--klmm-mb-drawer-max, none);
  background: var(--klmm-drawer-bg, #fff);
  box-shadow: 0 0 40px rgba(0,0,0,0.15);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.klmm-mobile[data-drawer-position="left"]  .klmm-mb-drawer { left: 0;  transform: translateX(-100%); }
.klmm-mobile[data-drawer-position="right"] .klmm-mb-drawer { right: 0; transform: translateX(100%); }
.klmm-mobile[data-drawer-position="left"]  .klmm-mb-drawer.is-open,
.klmm-mobile[data-drawer-position="right"] .klmm-mb-drawer.is-open { transform: translateX(0); }

/* Header: back | (search | logo) | close */
.klmm-mobile .klmm-mb-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
/* v1.2.9: logo del sito al centro dell'header drawer mobile. Riempie
 * lo spazio tra back (a sinistra) e close (a destra, gia' margin-left:
 * auto), e centra l'immagine al suo interno. Solo per drawer mobile —
 * sul drawer-desktop il logo del sito e' gia' visibile nell'header del
 * tema, quindi qui sarebbe ridondante. */
.klmm-mobile .klmm-mb-logo {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
.klmm-mobile .klmm-mb-logo img {
  max-height: 36px; max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
html.klmm-drawer-on-desktop .klmm-mobile .klmm-mb-logo { display: none; }
.klmm-mobile .klmm-mb-back,
.klmm-mobile .klmm-mb-close {
  background: transparent; border: 0; padding: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--klmm-link, #000);
}
.klmm-mobile .klmm-mb-back svg { width: 24px; height: 24px; }
.klmm-mobile .klmm-mb-close {
  font-size: 26px; line-height: 1; width: 36px; height: 36px;
  /* margin-left: auto spinge sempre la close a destra del flex container.
   * Quando la search e' visibile (flex:1) ha effetto nullo (lo spazio e' gia'
   * tutto preso dalla search). Quando la search e' disabilitata dal BO, mantiene
   * la close a destra invece di farla cadere a sinistra accanto al back. */
  margin-left: auto;
}
.klmm-mobile .klmm-mb-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #f3f3f3; border-radius: 9999px;
  padding: 0 14px; height: 42px;
}
.klmm-mobile .klmm-mb-search-icon { width: 18px; height: 18px; color: #666; flex-shrink: 0; }
.klmm-mobile .klmm-mb-search form { flex: 1; display: flex; align-items: center; margin: 0; }
.klmm-mobile .klmm-mb-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  height: 40px; font-size: 15px; min-width: 0;
}

/* Sub-header: levels > 0 */
.klmm-mobile .klmm-mb-subhead {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
/* v1.2.8: crumb-thumb dimensionata come .klmm-mb-thumb (56x40 default)
 * e resa invisibile. Serve come PLACEHOLDER per allineare il crumb-label
 * esattamente al testo delle voci sottostanti (stessa indentazione del
 * cell). Niente immagine visibile: il titolo del livello non porta piu'
 * la sua thumb (richiesta UX Rocco). */
.klmm-mobile .klmm-mb-crumb-thumb {
  width: 56px; height: 40px; flex-shrink: 0;
  visibility: hidden;
}
.klmm-mobile .klmm-mb-crumb-label {
  margin: 0; flex: 1;
  /* v1.1.0: stessa scala delle voci del livello corrente (--drop-font-size
   * dal Default format per-livello, fallback --klmm-font-size del preset).
   * v1.2.8: fallback 15px allineato a .klmm-mb-cell (era 17, dava titolo
   * leggermente piu' piccolo se le var non ereditavano). */
  font-size: var(--drop-font-size, var(--klmm-font-size, 15px));
  font-weight: 600; color: var(--klmm-link, #000);
}
.klmm-mobile .klmm-mb-crumb-tutto {
  font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--klmm-link, #000);
}

/* Screens container + screens */
.klmm-mobile .klmm-mb-screens {
  position: relative; flex: 1; overflow: hidden;
}
.klmm-mobile .klmm-mb-screen {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--klmm-drawer-bg, #fff);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.klmm-mobile .klmm-mb-screen.is-active { transform: translateX(0); }
.klmm-mobile .klmm-mb-screen.is-past   { transform: translateX(-100%); }

/* Row list */
.klmm-mobile .klmm-mb-list { list-style: none; margin: 0; padding: 0; }
.klmm-mobile .klmm-mb-row { position: relative; }
.klmm-mobile .klmm-mb-cell {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  min-height: var(--klmm-item-height, 56px);
  background: transparent; border: 0; text-align: left; text-decoration: none;
  cursor: pointer;
  /* CSS vars (optionally) populated by the per-level "Default format",
   * same mechanism as dropdown. Reasonable fallbacks when undefined. */
  font-family: var(--drop-font-family, inherit);
  font-size:   var(--drop-font-size, var(--klmm-font-size, 15px));
  color:       var(--drop-color, var(--klmm-link, #000));
  font-weight: var(--drop-weight, normal);
  font-style:  var(--drop-italic, normal);
  text-decoration: var(--drop-decoration, none);
  text-transform: var(--drop-transform, var(--klmm-transform, none));
  line-height: var(--drop-lh, 1.3);
  text-align:  var(--drop-align, left);
}
.klmm-mobile .klmm-mb-cell:active,
.klmm-mobile .klmm-mb-cell:focus-visible { background: #f7f7f7; }
.klmm-mobile .klmm-mb-thumb {
  width: 56px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.klmm-mobile .klmm-mb-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.klmm-mobile .klmm-mb-label { flex: 1; min-width: 0; }
.klmm-mobile .klmm-mb-caret {
  width: 10px; height: 10px;
  border-right: 2px solid #999; border-top: 2px solid #999;
  transform: rotate(45deg); flex-shrink: 0;
}
.klmm-mobile .klmm-mb-cell--html {
  display: block; padding: 14px;
}
/* Image row: 14px side padding aligned with separators
 * (.klmm-mb-list > .klmm-mb-row + .klmm-mb-row::before { margin: 0 14px }).
 * Image with max-width:100% (no upscaling) + height:auto. Alignment when
 * smaller than the container is controlled by the modifier variants
 * .klmm-mb-cell--image-{left|center|right} (default: center). */
.klmm-mobile .klmm-mb-cell--image {
  display: block; padding: 10px 14px;
}
.klmm-mobile .klmm-mb-imgblock {
  display: block; max-width: 100%; height: auto;
  margin-left: auto; margin-right: auto; /* default = center */
}
.klmm-mobile .klmm-mb-cell--image-left  .klmm-mb-imgblock { margin-left: 0;    margin-right: auto; }
.klmm-mobile .klmm-mb-cell--image-right .klmm-mb-imgblock { margin-left: auto; margin-right: 0; }
.klmm-mobile .klmm-mb-imgblock-caption {
  display: block; padding: 10px 0 0;
  font-weight: 600; color: var(--klmm-link, #000);
}

/* Empty space: transparent row with inline height. No background/border,
 * no min-height from .klmm-mb-cell (here the <li> wrapper has no cell). */
.klmm-mobile .klmm-mb-spacer { display: block; width: 100%; }

/* Separator between rows (per-level via --drop-separator, visible by default).
 * Applied ONLY between pairs of non-spacer rows: spacers already provide
 * a visual gap and a thin line above/below would make no sense. */
.klmm-mobile .klmm-mb-list > .klmm-mb-row:not(.klmm-mb-row--spacer) + .klmm-mb-row:not(.klmm-mb-row--spacer)::before {
  content: ''; display: block; height: 0; margin: 0 14px;
  border-top: var(--drop-separator, 1px solid #eee);
}

/* [hidden] must win over display:flex/block of the specific selectors above.
 * The specificity of `.klmm-mobile .klmm-mb-drawer` (0,2,0) beats the
 * user-agent `[hidden]` (0,1,0), so without this override the drawer
 * would remain visible even with the hidden attribute. */
.klmm-mobile .klmm-mb-drawer[hidden],
.klmm-mobile .klmm-mb-overlay[hidden],
.klmm-mobile .klmm-mb-back[hidden],
.klmm-mobile .klmm-mb-subhead[hidden],
.klmm-mobile .klmm-mb-crumb-thumb[hidden],
.klmm-mobile .klmm-mb-crumb-tutto[hidden] { display: none; }

/* Page-lock when the drawer is open */
body.klmm-mb-locked { overflow: hidden; }

/* ============================================================
 * v1.1.0 — Device visibility filter
 * Cada <li> menu ha l'attributo data-device (all | desktop | mobile)
 * impostato dal render (_menu_tree.tpl, _mobile_tree.tpl).
 * Le regole sotto nascondono gli item in base al contesto:
 *   - mega desktop (.klmm-desktop): nasconde data-device="mobile"
 *   - drawer mobile (.klmm-mobile): nasconde data-device="desktop"
 *   - drawer-on-desktop (html.klmm-drawer-on-desktop .klmm-mobile):
 *     nasconde data-device="mobile" (= voci dichiarate mobile-only
 *     non appaiono quando il drawer e' renderizzato su desktop).
 * SEO: gli item restano nel DOM, sono solo nascosti via CSS.
 * ============================================================ */
/* v1.1.0 — Device filter (CSS-based, viewport-aware) ----------
 * Importante: la classe html.klmm-drawer-on-desktop e' applicata SEMPRE
 * quando il preset mobile ha show_on_desktop=1 (sia su mobile vero sia
 * su desktop). Per discriminare il contesto reale dobbiamo basarci sul
 * VIEWPORT, non sulla classe. Usiamo media query 992px (default Bootstrap
 * desktop breakpoint).
 *   - viewport < 992px = mobile vero (drawer mobile classico)
 *   - viewport >= 992px + klmm-drawer-on-desktop = drawer su desktop
 */
.klmm-desktop li[data-device="mobile"] { display: none; }
@media (max-width: 991.98px) {
  /* Mobile vero: voci desktop-only nascoste */
  .klmm-mobile li[data-device="desktop"] { display: none; }
}
@media (min-width: 992px) {
  /* Drawer-on-desktop attivo: voci mobile-only nascoste */
  html.klmm-drawer-on-desktop .klmm-mobile li[data-device="mobile"] { display: none; }
}

/* ============================================================
 * v1.1.0 — Drawer su desktop (klmm-drawer-on-desktop)
 * Quando la classe e' presente su <html> (applicata via inline JS in
 * menu.tpl se preset mobile ha show_on_desktop=1), .klmm-mobile e'
 * reso visibile su desktop ma la sua barra fissa con burger+logo
 * originale e' nascosta. Restano operativi solo overlay + drawer
 * (attivati programmaticamente dal trigger .klmm-drawer-trigger).
 *
 * Trigger .klmm-drawer-trigger: posizionato assoluto al bordo sx del
 * .klmm-bar per uscire dal flusso flex centrato delle altre voci.
 * Lo stile visuale e' minimal (testo + icona hamburger SVG): il tema
 * puo' overridelo per pill colorate, ecc.
 * ============================================================ */
@media (min-width: 992px) {
  html.klmm-drawer-on-desktop .klmm-mobile {
    display: block !important;
    position: static;
    pointer-events: none;
  }
  html.klmm-drawer-on-desktop .klmm-mobile .klmm-mb-bar { display: none !important; }
  html.klmm-drawer-on-desktop .klmm-mobile .klmm-mb-overlay,
  html.klmm-drawer-on-desktop .klmm-mobile .klmm-mb-drawer {
    pointer-events: auto;
  }
}

/* Trigger voce nel mega bar desktop: voce normale del flusso flex (primo
 * <li> della .klmm-bar). Le altre voci si centrano includendolo nel calcolo
 * di justify-content. Niente position:absolute → il sistema di overflow
 * detection lo conta naturalmente. */
.klmm-drawer-trigger > .klmm-link {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.klmm-drawer-trigger-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Polish base out-of-the-box per il trigger: solo padding, font-size scaling,
 * color al hover. NIENTE background hover qui — i temi spesso stilizzano il
 * trigger come pill colorata (gradient brand) e un bg grigio chiaro hover si
 * vedrebbe come "alone" sopra. Se serve hover bg lo gestisce il tema.
 * font-size scala con --klmm-link-fs (var che il modulo aggiorna
 * progressivamente in updateLinkSizing() per gestire viewport stretti). */
.klmm-drawer-trigger > .klmm-link {
  padding: 10px 12px;
  font-size: var(--klmm-link-fs, 14px);
  color: var(--klmm-link, #1d1d1f);
  font-weight: 600;
  transition: color .15s;
}
.klmm-drawer-trigger > .klmm-link:hover,
.klmm-drawer-trigger > .klmm-link:focus-visible {
  color: var(--klmm-hover, #0066cc);
}
/* Stato attivo: drawer aperto (body.klmm-mb-locked applicato da mobile.js).
 * Il tema puo' override per stati piu' marcati (es. icona ruotata). */
body.klmm-mb-locked .klmm-drawer-trigger > .klmm-link {
  color: var(--klmm-hover, #0066cc);
}

/* Edge case: desktop_coexist_with_mega=0 (drawer SOSTITUISCE mega).
 * Usiamo classe dedicata `html.klmm-replace-mega` invece di `klmm-force-mobile`
 * perche' quest'ultima viene gestita runtime dall'auto-overflow detection
 * (`updateOverflow()`) che la rimuoverebbe non appena rileva che la bar
 * ci sta nello spazio. La nostra `klmm-replace-mega` e' "manuale" e non
 * viene mai toccata dal detector. Comportamento: nasconde .klmm-desktop
 * (e con lui il trigger drawer che e' dentro), mostra la .klmm-mb-bar
 * originale del modulo come unica navigazione su desktop. */
@media (min-width: 992px) {
  html.klmm-replace-mega .klmm-desktop { display: none !important; }
  html.klmm-replace-mega .klmm-mobile {
    display: block !important;
    pointer-events: auto;
  }
  html.klmm-replace-mega .klmm-mobile .klmm-mb-bar { display: flex !important; }
}

/* Z-index drawer-on-desktop: il mega panel del desktop (klmm-drop) ha
 * z-index ~600. Il drawer (.klmm-mb-drawer) e l'overlay devono stare SOPRA
 * il mega quando entrambi presenti. Default modulo: drawer 1000, overlay
 * 999 — gia' adeguato. Niente da fare, lasciato come safety check. */

/* Hide-on-mobile per il trigger: il `.klmm-drawer-trigger` esiste nel DOM
 * solo per il preset desktop (renderizzato in _menu_tree.tpl), e
 * `.klmm-desktop` e' gia' nascosto sotto il breakpoint dal modulo.
 * Niente regola aggiuntiva necessaria. */

/* ============================================================================
 * v1.2.0 — Brand block (logo + optional name).
 * Rendered by _menu_block.tpl when block.type === 'brand'. Per-block sizing is
 * applied inline via style="width:Npx" on the <img> when image_w > 0; the rule
 * here only defines layout + spacing.
 * ============================================================================ */
.klmm-block-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  text-decoration: none;
  color: inherit;
  transition: opacity .15s ease, transform .15s ease;
}
.klmm-block-brand:hover,
.klmm-block-brand:focus {
  opacity: 0.85;
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}
.klmm-block-brand-logo {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.klmm-block-brand-label {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}
