/* Tudetic mega-menu CSS — extracted from header.tpl 2026-05-19 perfopt */
/* Reset */
  .tdc-tm-wrap, .tdc-tm-wrap *, .tdc-tm-wrap *::before, .tdc-tm-wrap *::after,
  .tdc-tm-drawer, .tdc-tm-drawer *, .tdc-tm-drawer *::before, .tdc-tm-drawer *::after { box-sizing: border-box; }
  .tdc-tm-wrap ul, .tdc-tm-drawer ul { list-style: none; margin: 0; padding: 0; }
  .tdc-tm-wrap li, .tdc-tm-drawer li { display: block; padding: 0; margin: 0; }
  .tdc-tm-wrap a, .tdc-tm-drawer a { color: inherit; text-decoration: none; }
  .tdc-tm-wrap button, .tdc-tm-drawer button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 0; margin: 0; }
  .tdc-tm-wrap svg, .tdc-tm-drawer svg { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

  .tdc-tm-wrap { position: relative; }

  /* Shared panel mechanics — rely on UA `[hidden]` (low priority) so the
     desktop nested-panel override can win the cascade. */
  .tdc-tm-panel { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
  .tdc-tm-panel--open { max-height: 3000px; }
  @media (prefers-reduced-motion: reduce) { .tdc-tm-panel { transition: none; } .tdc-tm-chevron { transition: none; } }

  .tdc-tm-chevron { width: 14px; height: 14px; transition: transform .2s ease; }
  .tdc-tm-toggle[aria-expanded="true"] .tdc-tm-chevron { transform: rotate(180deg); }

  /* ===================== DESKTOP ===================== */
  @media (min-width: 992px) {
    .tdc-tm-nav--desktop { position: relative; width: 100%; }
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 { display: flex; flex-wrap: wrap; align-items: stretch; }

    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item { position: static; }
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item > .tdc-tm-row { display: flex; align-items: stretch; }
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item > .tdc-tm-row > .tdc-tm-link {
      display: inline-flex; align-items: center;
      padding: .95rem 1.05rem; padding-right: .35rem;
      font-weight: 700; font-size: .9rem; letter-spacing: .03em; text-transform: uppercase;
      color: inherit; white-space: nowrap; position: relative;
      transition: color .15s ease;
    }
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item:not(.has-children) > .tdc-tm-row > .tdc-tm-link { padding-right: 1.05rem; }
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item > .tdc-tm-row > .tdc-tm-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; padding-right: .35rem;
      transition: color .15s ease;
    }
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item:hover > .tdc-tm-row > .tdc-tm-link,
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item:hover > .tdc-tm-row > .tdc-tm-toggle,
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item.is-open > .tdc-tm-row > .tdc-tm-link,
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item.is-open > .tdc-tm-row > .tdc-tm-toggle {
      color: #fff;
    }
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item:hover,
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item.is-open {
      background: rgba(0, 0, 0, .18);
    }
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item.is-current > .tdc-tm-row > .tdc-tm-link::after {
      content: ""; position: absolute; left: 1.05rem; right: 1.05rem; bottom: 6px; height: 2px; background: currentColor;
    }

    /* MEGA-PANEL (depth-0 panel) */
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item > .tdc-tm-panel {
      position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); width: 100vw;
      top: 100%;
      background: #fff; color: #222;
      box-shadow: 0 16px 28px rgba(0,0,0,.18);
      border-top: 3px solid var(--tudetic-accent, #c9252d);
      z-index: 1040;
      padding: 0;
    }
    /* Panel content: multi-column flow of categories (no holes under short ones) */
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item > .tdc-tm-panel > .tdc-tm-list--d1 {
      display: block;
      column-width: 220px;
      column-gap: 1.75rem;
      padding: 1.75rem clamp(1rem, 5vw, 3rem) 2rem;
      max-width: 1600px; margin: 0 auto;
      max-height: 75vh; overflow-y: auto;
    }
    /* depth-1 li = one column cell — never split across columns */
    .tdc-tm-nav--desktop .tdc-tm-list--d1 > .tdc-tm-item {
      break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid;
      display: block; min-width: 0;
      margin: 0 0 1.5rem;
    }
    /* Hide all toggle buttons inside the open mega-panel (no clicks needed) */
    .tdc-tm-nav--desktop > .tdc-tm-list--d0 > .tdc-tm-item > .tdc-tm-panel .tdc-tm-toggle { display: none; }
    /* Nested panels (depth>=1) inside the mega-panel always render. JS strips
       the [hidden] attribute on load + adds `.tdc-tm-panel--inline`. */
    .tdc-tm-nav--desktop .tdc-tm-panel--inline {
      display: block !important; max-height: none !important; overflow: visible !important;
      position: static !important; box-shadow: none !important; background: transparent !important;
      border: 0 !important; padding: 0 !important; width: auto !important;
      left: auto !important; right: auto !important;
      transition: none !important;
    }

    /* depth-1 link = column heading (when has children, behaves as category title) */
    .tdc-tm-nav--desktop .tdc-tm-list--d1 > .tdc-tm-item.has-children > .tdc-tm-row > .tdc-tm-link {
      display: block; padding: 0 0 .55rem;
      font-weight: 800; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase;
      color: #111 !important;
      border-bottom: 2px solid var(--tudetic-accent, #c9252d);
      margin-bottom: .55rem;
    }
    /* depth-1 leaf (no children) — compact link with subtle bottom rule */
    .tdc-tm-nav--desktop .tdc-tm-list--d1 > .tdc-tm-item:not(.has-children) > .tdc-tm-row > .tdc-tm-link {
      display: block; padding: .4rem 0;
      font-weight: 700; font-size: .88rem; letter-spacing: .02em; text-transform: uppercase;
      color: #222 !important;
      border-bottom: 1px solid rgba(0,0,0,.08);
    }
    .tdc-tm-nav--desktop .tdc-tm-list--d1 > .tdc-tm-item > .tdc-tm-row > .tdc-tm-link:hover {
      color: var(--tudetic-accent, #c9252d) !important;
    }

    /* depth-2+ = vertical lists of links inside each column */
    .tdc-tm-nav--desktop .tdc-tm-list--d2,
    .tdc-tm-nav--desktop .tdc-tm-list--d3,
    .tdc-tm-nav--desktop .tdc-tm-list--d4 {
      display: block !important; grid-template-columns: none !important;
      padding: 0 !important; margin: 0;
    }
    .tdc-tm-nav--desktop .tdc-tm-list--d2 > .tdc-tm-item > .tdc-tm-row > .tdc-tm-link {
      display: block;
      padding: .3rem 0;
      font-weight: 500; font-size: .875rem; text-transform: none; letter-spacing: normal;
      color: #444 !important;
      line-height: 1.35;
    }
    .tdc-tm-nav--desktop .tdc-tm-list--d2 > .tdc-tm-item > .tdc-tm-row > .tdc-tm-link:hover {
      color: var(--tudetic-accent, #c9252d) !important;
    }
    /* depth-3+ hidden in desktop mega panel (too deep) */
    .tdc-tm-nav--desktop .tdc-tm-list--d2 .tdc-tm-panel { display: none !important; }
  }
/* Center top-menu items in lg viewport range (992-1199px) — wrap is col-auto width otherwise */  @media (min-width: 992px) and (max-width: 1199.98px) {    .tdc-header-menu > .container-md,    .tdc-header-menu > .container,    .tdc-header-menu .container-md,    .tdc-header-menu .container { justify-content: center !important; }    .tdc-tm-wrap { flex: 0 0 auto !important; }    .tdc-tm-nav--desktop > .tdc-tm-list--d0 { justify-content: center; }  }

  /* ===================== MOBILE BURGER ===================== */
  .tdc-tm-burger-wrap { display: flex; align-items: center; }
  .tdc-tm-burger { display: inline-flex; align-items: center; gap: .55rem; padding: .65rem .9rem; font-weight: 700; color: inherit; }
  .tdc-tm-burger-icon { width: 22px; height: 16px; position: relative; display: inline-block; }
  .tdc-tm-burger-icon::before, .tdc-tm-burger-icon::after, .tdc-tm-burger-icon { background-image: linear-gradient(currentColor, currentColor); background-size: 22px 2px; background-repeat: no-repeat; }
  .tdc-tm-burger-icon { background-position: 0 0; }
  .tdc-tm-burger-icon::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: currentColor; }
  .tdc-tm-burger-icon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; }
  .tdc-tm-burger-text { font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; }

  /* ===================== MOBILE DRAWER — bike24-style drill-down ===================== */
  /* Accent = per-shop --tdc-primary (set by body.tdc-shop-N in tudetic-overrides*.css). */

  /* Shell: right-side, full-height column. */
  html body #mobileMenu.tdc-mm {
    width: 100% !important; max-width: 400px;
    background: #fff; color: #1a1a1a;
    display: flex !important; flex-direction: column !important;
  }
  @media (max-width: 480px) { html body #mobileMenu.tdc-mm { max-width: 100% !important; } }

  /* Head: shop logo + close (white, per-shop accent underline). */
  #mobileMenu .tdc-mm-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .6rem .85rem;
    background: #fff;
    border-bottom: 3px solid var(--tdc-primary, #e40046);
    position: relative; z-index: 6;
  }
  #mobileMenu .tdc-mm-logo { display: inline-flex; align-items: center; min-width: 0; }
  #mobileMenu .tdc-mm-logo img { max-height: 38px; max-width: 200px; width: auto; height: auto; display: block; }
  #mobileMenu .tdc-mm-logo--text { font-weight: 800; font-size: 1.1rem; color: var(--tdc-primary, #e40046); text-transform: uppercase; letter-spacing: .03em; }
  #mobileMenu .tdc-mm-close {
    flex: 0 0 auto; width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #222;
  }
  #mobileMenu .tdc-mm-close:hover, #mobileMenu .tdc-mm-close:focus-visible { background: #f1f1f1; outline: none; }

  /* Search filter. */
  #mobileMenu .tdc-mm-search { flex: 0 0 auto; padding: .6rem .85rem; background: #fff; border-bottom: 1px solid #eee; }
  #mobileMenu .tdc-mm-search input {
    width: 100%; height: 42px; border: 1px solid #d8d8d8; border-radius: 9px;
    padding: 0 .85rem; font-size: 1rem; background: #f6f6f6; color: #1a1a1a;
  }
  #mobileMenu .tdc-mm-search input::placeholder { color: #999; }
  #mobileMenu .tdc-mm-search input:focus { outline: none; border-color: var(--tdc-primary, #e40046); background: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }

  /* Viewport (non-scrolling) hosting absolute, independently-scrolling screens. */
  #mobileMenu .tdc-mm-tree { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #fff; }
  html body #mobileMenu .tdc-mm-screen {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    background: #fff !important; display: block !important; max-height: none !important;
    transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -10px 0 18px rgba(0,0,0,.05);
  }
  html body #mobileMenu .tdc-mm-screen--root { transform: translateX(0); z-index: 1; box-shadow: none; }
  html body #mobileMenu .tdc-mm-screen.is-open { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) { html body #mobileMenu .tdc-mm-screen { transition: none; } }

  /* Lists & rows (clone reuses .tdc-tm-* classes) — beat the CCC bundle's
     `#mobileMenu li{display:flex}` with higher (id+class) specificity. */
  html body #mobileMenu .tdc-tm-list { list-style: none; margin: 0; padding: 0; display: block !important; background: transparent !important; }
  html body #mobileMenu .tdc-tm-item { display: block !important; width: auto !important; border-bottom: 1px solid #f0f0f0 !important; }
  html body #mobileMenu .tdc-tm-row { display: flex !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; min-height: 54px; }
  html body #mobileMenu .tdc-tm-row > .tdc-tm-link {
    flex: 1 1 auto !important; min-width: 0; display: flex !important; align-items: center !important;
    padding: .9rem 1rem !important; font-size: 1rem !important; color: #1a1a1a !important;
    font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important;
    line-height: 1.3 !important; text-decoration: none !important; background: transparent !important; width: auto !important;
  }
  html body #mobileMenu .tdc-tm-item--d0 > .tdc-tm-row > .tdc-tm-link { font-weight: 700 !important; }
  html body #mobileMenu .tdc-tm-row > .tdc-tm-toggle {
    flex: 0 0 auto !important; width: 52px !important; min-height: 54px; height: auto !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: transparent !important; border: 0 !important; padding: 0 !important; position: static !important;
    color: #9a9a9a !important;
  }
  /* In drill-down the chevron points RIGHT (enter), not down. */
  html body #mobileMenu .tdc-tm-toggle .tdc-tm-chevron { width: 16px; height: 16px; transform: rotate(-90deg); }
  html body #mobileMenu .tdc-tm-row:hover { background: #f7f7f7; }
  html body #mobileMenu .tdc-tm-row:active { background: #efefef; }

  /* Back bar (per-shop accent) injected at top of each drilled screen. */
  #mobileMenu .tdc-mm-bar { position: sticky; top: 0; z-index: 3; background: var(--tdc-primary, #e40046); }
  #mobileMenu .tdc-mm-back {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .8rem 1rem; color: #fff; font-weight: 700; font-size: 1rem; text-align: left;
  }
  #mobileMenu .tdc-mm-back svg { flex: 0 0 auto; }
  #mobileMenu .tdc-mm-back .tdc-mm-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #mobileMenu .tdc-mm-viewall {
    display: block; padding: .8rem 1rem; background: #fff;
    color: var(--tdc-primary, #e40046) !important; font-weight: 700; font-size: .92rem;
    border-bottom: 1px solid #f0f0f0; text-decoration: none;
  }

  /* Footer (country + language summary button). */
  #mobileMenu .tdc-mm-foot { flex: 0 0 auto; border-top: 1px solid #eee; background: #fafafa; }
  #mobileMenu .tdc-mm-foot-btn {
    display: flex; align-items: center; gap: .65rem; width: 100%;
    padding: .9rem 1rem; color: #1a1a1a; font-weight: 600; text-align: left;
  }
  #mobileMenu .tdc-mm-foot-flag { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
  #mobileMenu .tdc-mm-foot-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #mobileMenu .tdc-mm-foot-btn .tdc-mm-foot-chev { flex: 0 0 auto; color: #9a9a9a; }

  /* Settings screen (covers the whole drawer; language + country). */
  #mobileMenu .tdc-mm-settings {
    position: absolute; inset: 0; z-index: 20; background: #fff;
    display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform .25s ease;
  }
  #mobileMenu .tdc-mm-settings.is-open { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) { #mobileMenu .tdc-mm-settings { transition: none; } }
  #mobileMenu .tdc-mm-sec-title {
    padding: 1.1rem 1rem .4rem; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: #8a8a8a;
  }
  #mobileMenu .tdc-mm-opt {
    display: flex; align-items: center; gap: .65rem; width: 100%;
    padding: .85rem 1rem; border-bottom: 1px solid #f0f0f0; color: #1a1a1a !important;
    text-decoration: none; background: #fff;
  }
  #mobileMenu .tdc-mm-opt:hover { background: #f7f7f7; }
  #mobileMenu .tdc-mm-opt-flag { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
  #mobileMenu .tdc-mm-opt-name { flex: 1 1 auto; min-width: 0; }
  #mobileMenu .tdc-mm-opt-check { color: var(--tdc-primary, #e40046); font-weight: 800; flex: 0 0 auto; }
  #mobileMenu .tdc-mm-opt.is-current { font-weight: 700; background: rgba(0,0,0,.03); }
  #mobileMenu .tdc-mm-langsrc { display: none !important; }
  /* Platforms without flag-emoji glyphs (Windows): hide flags, keep clean names. */
  #mobileMenu.tdc-no-flags .tdc-mm-opt-flag,
  #mobileMenu.tdc-no-flags [data-tdc-mm-foot-flag] { display: none !important; }

  /* Global search results overlay (filters categories + subcategories while typing). */
  html body #mobileMenu .tdc-mm-results {
    position: absolute !important; inset: 0 !important; z-index: 15;
    background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none;
  }
  html body #mobileMenu .tdc-mm-results.is-active { display: block; }
  html body #mobileMenu .tdc-mm-result {
    display: block !important;
    padding: .7rem 1rem; border-bottom: 1px solid #f0f0f0;
    color: #1a1a1a !important; text-decoration: none !important; background: #fff;
  }
  #mobileMenu .tdc-mm-result:hover, #mobileMenu .tdc-mm-result:active { background: #f7f7f7; }
  html body #mobileMenu .tdc-mm-result-label { display: block !important; font-weight: 600; font-size: .98rem; line-height: 1.25; }
  html body #mobileMenu .tdc-mm-result-path { display: block !important; font-size: .76rem; color: #9a9a9a; margin-top: 2px; }
  #mobileMenu .tdc-mm-noresults { padding: 1.2rem 1rem; color: #888; font-size: .95rem; }

  /* ===================== DESKTOP TOP-BAR LANGUAGE SELECTOR ===================== */
  .tdc-htop-lang { display: inline-flex; align-items: center; }
  .tdc-htop-lang .ps-languageselector, .tdc-htop-lang #_desktop_ps_languageselector { display: inline-flex; }
  .tdc-htop-lang select.js-language-selector {
    -webkit-appearance: auto; appearance: auto;
    height: 28px; padding: 0 1.4rem 0 .5rem; font-size: .8rem; line-height: 1;
    border: 1px solid rgba(0,0,0,.18); border-radius: 6px; background: #fff; color: #333; cursor: pointer;
    max-width: 150px;
  }
  .tdc-htop-lang select.js-language-selector:focus { outline: none; border-color: var(--tdc-primary, #e40046); }

  /* ===================== MOBILE HAMBURGER IN HEADER ROW (bike24) ===================== */
  /* Compact ☰ at the left of the top header row; the shop-color "MENU" band is
     collapsed on mobile (bike24 puts the trigger in the header, not a full bar). */
  .tdc-mm-burger-top {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0 -6px 0 -8px; padding: 0;
    background: transparent; border: 0; cursor: pointer;
    color: var(--tdc-primary, #e40046);
  }
  .tdc-mm-burger-top:active { opacity: .7; }
  @media (min-width: 992px) { .tdc-mm-burger-top { display: none !important; } }
  @media (max-width: 991.98px) {
    /* Collapse the shop-color megamenu band; keep the offcanvas (sibling, fixed) alive. */
    html body .tdc-header-menu { background: none !important; padding: 0 !important; border: 0 !important; min-height: 0 !important; box-shadow: none !important; }
    html body .tdc-header-menu .tdc-tm-wrap { display: none !important; }
    html body .tdc-header-menu > .container-md,
    html body .tdc-header-menu > .container { padding: 0 !important; }
  }

  /* ===================== BREADCRUMB (acorde al resto: color tienda + chevron) ===================== */
  html body .breadcrumb__wrapper { background: #fff; border-bottom: 1px solid #f0f0f0; padding: 0; }
  html body .breadcrumb__wrapper .breadcrumb {
    display: flex; flex-wrap: nowrap; align-items: center;
    margin: 0; padding: .65rem 0; background: transparent; border-radius: 0; list-style: none;
    font-size: .82rem; line-height: 1.4;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  html body .breadcrumb__wrapper .breadcrumb::-webkit-scrollbar { display: none; }
  html body .breadcrumb__wrapper .breadcrumb-item { display: inline-flex; align-items: center; white-space: nowrap; padding: 0; }
  /* chevron separator instead of Bootstrap "/" */
  html body .breadcrumb__wrapper .breadcrumb-item + .breadcrumb-item::before {
    content: "›"; color: #bcbcbc; padding: 0 .5rem; font-weight: 400; font-size: 1.05rem; line-height: 1;
  }
  html body .breadcrumb__wrapper .breadcrumb-link,
  html body .breadcrumb__wrapper .breadcrumb-item > a {
    color: var(--tdc-primary, #e40046) !important; text-decoration: none !important; font-weight: 600;
  }
  html body .breadcrumb__wrapper .breadcrumb-link:hover,
  html body .breadcrumb__wrapper .breadcrumb-item > a:hover { color: var(--tdc-primary-dark, #b80038) !important; text-decoration: underline !important; }
  /* current page (last item, no link) */
  html body .breadcrumb__wrapper .breadcrumb-item:last-child,
  html body .breadcrumb__wrapper .breadcrumb-item:last-child > span { color: #555; font-weight: 600; }
  html body .breadcrumb__wrapper .breadcrumb-item > a > span { display: inline; }
  @media (max-width: 575.98px) {
    html body .breadcrumb__wrapper .breadcrumb { font-size: .78rem; padding: .55rem 0; }
  }