/* ==========================================================================
   WK Mega-Menü (Desktop) – Foto-Kacheln für „Supermoto Parts"
   Zwei-Panel: Gruppen links, Unterkategorien als Foto-Kacheln rechts.
   Markenfarbe Orange #E5762A (CI Auspuffanlagen24). Wird in ein uk-navbar-dropdown eingehängt.
   ========================================================================== */

.wk-mm {
    --wk-blue: #E5762A;
    --wk-blue-deep: #D0661F;
    --wk-blue-ink: #B45A1C;
    --wk-slate: #2F2C2A;
    --wk-ink: #1A1A1A;
    --wk-tint: #FCEFE4;
    --wk-tint-2: #DCEDF9;
    --wk-line: #E6EAEE;
    --wk-muted: #69757F;
    --wk-muted-2: #8D8E8F;

    font-family: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--wk-ink);
    line-height: 1.3;
    width: 100%;
}

/* Das Dropdown selbst randlos machen, damit unser Layout greift */
.uk-navbar-dropdown.wk-mm-drop {
    padding: 0;
    width: 100%;
    max-width: 1180px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 26px 64px -26px rgba(28,42,56,.34), 0 8px 22px -14px rgba(28,42,56,.22);
    overflow: hidden;
}

/* ---- Bike-Leiste (Phase 1: statischer Stub) ---- */
.wk-mm-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    background: var(--wk-tint);
    border-bottom: 1px solid var(--wk-tint-2);
    font-size: 13px;
}
.wk-mm-bar .wk-mm-bike { display: flex; align-items: center; gap: 8px; color: var(--wk-blue-ink); }
.wk-mm-bar svg { width: 19px; height: 19px; stroke: var(--wk-blue-deep); fill: none; }
.wk-mm-bar .wk-mm-kicker {
    font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--wk-blue-deep); opacity: .8;
}
.wk-mm-bar b { color: var(--wk-slate); font-weight: 700; }
.wk-mm-bar .wk-mm-spacer { flex: 1; }
.wk-mm-bar a { color: var(--wk-blue-deep); text-decoration: none; border-bottom: 1px dotted var(--wk-blue); }

/* ---- Body: Schiene + Panes ---- */
.wk-mm-body { display: flex; min-height: 360px; }

.wk-mm-rail {
    width: 252px; flex: 0 0 auto;
    border-right: 1px solid var(--wk-line);
    padding: 12px; background: #fbfcfd;
}
.wk-mm-grp {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
    padding: 11px 12px; border-radius: 11px; color: var(--wk-ink);
    font-size: 15px; font-weight: 600; transition: background .14s;
}
.wk-mm-grp .wk-mm-ic {
    width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
    background: #F2F3F3; border: 1px solid var(--wk-line);
    display: flex; align-items: center; justify-content: center; transition: .16s;
}
.wk-mm-grp .wk-mm-ic svg { width: 19px; height: 19px; stroke: var(--wk-slate); fill: none; transition: .16s; }
.wk-mm-grp > span:last-child { flex: 1; }
.wk-mm-grp:hover { background: #F2F3F3; }
.wk-mm-grp.is-active { background: var(--wk-tint); color: var(--wk-blue-ink); }
.wk-mm-grp.is-active .wk-mm-ic { background: var(--wk-blue); border-color: var(--wk-blue); }
.wk-mm-grp.is-active .wk-mm-ic svg { stroke: #fff; }

.wk-mm-panes { flex: 1; position: relative; }
.wk-mm-pane { display: none; padding: 18px 24px 22px; }
.wk-mm-pane.is-active { display: block; animation: wk-mm-fade .26s ease; }
@keyframes wk-mm-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wk-mm-pane-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.wk-mm-pane-head h3 {
    font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 800;
    font-size: 17px; letter-spacing: -.01em; color: var(--wk-slate); margin: 0;
}
.wk-mm-pane-head a {
    margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 11px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--wk-blue-deep);
    text-decoration: none; font-weight: 600;
}

/* ---- Foto-Kacheln ---- */
.wk-mm-tiles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 13px;
    list-style: none; margin: 0; padding: 0;
}
.wk-mm-tile {
    display: flex; flex-direction: column; gap: 8px;
    text-decoration: none; color: var(--wk-slate); position: relative;
}
.wk-mm-tile .wk-mm-img-wrap {
    aspect-ratio: 1 / 1; border-radius: 13px; overflow: hidden;
    background: radial-gradient(circle at 50% 36%, #fff 0%, #eef2f6 100%);
    border: 1px solid var(--wk-line);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px -10px rgba(28,42,56,.4); transition: .16s;
}
.wk-mm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-mm-tile .wk-mm-img-ph svg { width: 46px; height: 46px; stroke: var(--wk-muted-2); fill: none; opacity: .7; }
.wk-mm-tile .wk-mm-name { font-size: 13px; font-weight: 600; line-height: 1.18; padding: 0 2px; }
.wk-mm-tile .wk-mm-price { font-size: 12.5px; font-weight: 700; color: var(--wk-blue-ink); padding: 0 2px; margin-top: -2px; }
.wk-mm-tile .wk-mm-price del { color: var(--wk-muted-2); font-weight: 500; font-size: 11px; margin-left: 4px; }
.wk-mm-tile .wk-mm-price ins { text-decoration: none; }
.wk-mm-tile:hover .wk-mm-img-wrap {
    border-color: var(--wk-blue); transform: translateY(-3px);
    box-shadow: 0 14px 26px -14px rgba(229,118,42,.6);
}
.wk-mm-tile:hover .wk-mm-name { color: var(--wk-blue-ink); }
.wk-mm-tile .wk-mm-top {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: var(--wk-blue); color: #fff;
    font-family: "IBM Plex Mono", monospace; font-size: 8.5px; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 5px; text-transform: uppercase;
    box-shadow: 0 3px 8px -3px rgba(229,118,42,.8);
}

/* ==========================================================================
   Flaches Karten-Layout (Tops, an denen direkt Produkte hängen, z. B.
   „Konfiguratoren"). Gleiche Shell wie das Zwei-Panel-Mega, nur ohne
   Gruppen-Schiene – Bike-Leiste, Kopfzeile und „Mehr"-Leiste bleiben identisch.
   ========================================================================== */

.wk-mm-flat-body { padding: 18px 24px 22px; }

/* Der Kopf sitzt hier ohne Panes drumherum -> etwas mehr Luft nach unten. */
.wk-mm-flat .wk-mm-pane-head { margin-bottom: 16px; }

.wk-mm-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 14px;
}

.wk-mm-card {
    display: flex; align-items: stretch; gap: 14px;
    padding: 14px; border: 1px solid var(--wk-line); border-radius: 14px;
    background: linear-gradient(100deg, #FAFAFA, #fff);
    text-decoration: none; color: var(--wk-slate); transition: .16s;
}
.wk-mm-card:hover {
    border-color: var(--wk-blue);
    box-shadow: 0 14px 30px -18px rgba(229,118,42,.65);
    transform: translateY(-2px);
}

.wk-mm-card .wk-mm-card-img {
    width: 104px; height: 104px; flex: 0 0 auto;
    border-radius: 12px; overflow: hidden;
    background: radial-gradient(circle at 50% 36%, #fff 0%, #eef2f6 100%);
    border: 1px solid var(--wk-line);
    display: flex; align-items: center; justify-content: center;
}
.wk-mm-card .wk-mm-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-mm-card .wk-mm-img-ph svg { width: 40px; height: 40px; stroke: var(--wk-muted-2); fill: none; opacity: .7; }

/* min-width:0 -> lange Produktnamen dürfen umbrechen statt das Grid zu sprengen */
.wk-mm-card .wk-mm-card-main {
    display: flex; flex-direction: column; gap: 7px;
    flex: 1; min-width: 0;
}
.wk-mm-card .wk-mm-card-name {
    font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 800;
    font-size: 15px; line-height: 1.2; letter-spacing: -.01em; color: var(--wk-slate);
}
.wk-mm-card:hover .wk-mm-card-name { color: var(--wk-blue-ink); }

.wk-mm-card .wk-mm-card-usp { display: flex; flex-direction: column; gap: 3px; }
.wk-mm-card .wk-mm-card-usp span {
    position: relative; padding-left: 17px;
    font-size: 12.5px; line-height: 1.3; color: var(--wk-muted);
}
.wk-mm-card .wk-mm-card-usp span::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: var(--wk-blue); font-weight: 700; font-size: 11px;
}

.wk-mm-card .wk-mm-card-foot {
    display: flex; align-items: center; gap: 10px;
    margin-top: auto; padding-top: 4px;
}
.wk-mm-card .wk-mm-card-price {
    font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 15px;
    color: var(--wk-ink); white-space: nowrap;
}
.wk-mm-card .wk-mm-card-price del { color: var(--wk-muted-2); font-weight: 500; font-size: 12px; margin-left: 4px; }
.wk-mm-card .wk-mm-card-price ins { text-decoration: none; }
.wk-mm-card .wk-mm-card-btn {
    margin-left: auto; flex: 0 0 auto;
    background: var(--wk-blue); color: #fff; font-weight: 700; font-size: 13px;
    padding: 8px 15px; border-radius: 9px; transition: background .16s;
}
.wk-mm-card:hover .wk-mm-card-btn { background: var(--wk-blue-deep); }

.wk-mm-card:focus-visible {
    outline: 2px solid var(--wk-blue); outline-offset: 2px; border-color: var(--wk-blue);
}

/* ---- Sekundärleiste ---- */
.wk-mm-sec {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 22px; background: #F2F3F3; border-top: 1px solid var(--wk-line);
    font-size: 13px;
}
.wk-mm-sec .wk-mm-sec-lab {
    font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--wk-muted-2); margin-right: 4px;
}
.wk-mm-sec a {
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none; color: var(--wk-slate); font-weight: 600;
    padding: 7px 12px; border-radius: 9px; background: #fff; border: 1px solid var(--wk-line);
}
.wk-mm-sec a svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
.wk-mm-sec a:hover { border-color: var(--wk-blue); color: var(--wk-blue-deep); }

/* ---- Bike-Leiste: eingebetteter Moto-Finder ---- */
.wk-mm-finder { display: inline-flex; align-items: center; }
.wk-mm-finder .wk-vehicle-badge { margin: 0; }

/* ---- „Meistverkauftes Produkt" Angebot-Streifen ---- */
.wk-mm-offer {
    display: flex; align-items: center; gap: 13px; margin-top: 16px;
    padding: 10px 12px; border: 1px solid var(--wk-line); border-radius: 12px;
    background: linear-gradient(100deg, #FAFAFA, #fff); text-decoration: none; transition: .16s;
}
.wk-mm-offer:hover { border-color: var(--wk-blue); box-shadow: 0 10px 24px -16px rgba(229,118,42,.6); }
.wk-mm-offer .wk-mm-offer-img {
    width: 52px; height: 52px; flex: 0 0 auto; border-radius: 9px; overflow: hidden;
    background: #F2F3F3; border: 1px solid var(--wk-line);
    display: flex; align-items: center; justify-content: center;
}
.wk-mm-offer .wk-mm-offer-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-mm-offer .wk-mm-offer-info { min-width: 0; line-height: 1.2; }
.wk-mm-offer .wk-mm-offer-info small {
    display: block; font-family: "IBM Plex Mono", monospace; font-size: 9.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--wk-muted-2);
}
.wk-mm-offer .wk-mm-offer-info b {
    display: block; font-size: 14px; font-weight: 700; color: var(--wk-slate); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.wk-mm-offer .wk-mm-offer-price {
    margin-left: auto; font-family: "Barlow Condensed", sans-serif; font-weight: 800;
    font-size: 15px; color: var(--wk-ink); white-space: nowrap;
}
.wk-mm-offer .wk-mm-offer-price del { color: var(--wk-muted-2); font-weight: 500; font-size: 12px; margin-left: 4px; }
.wk-mm-offer .wk-mm-offer-btn {
    flex: 0 0 auto; background: var(--wk-blue); color: #fff; font-weight: 700; font-size: 13px;
    padding: 8px 15px; border-radius: 9px;
}
.wk-mm-offer:hover .wk-mm-offer-btn { background: var(--wk-blue-deep); }

/* JS deaktiviert? -> erste Pane sichtbar lassen (Fallback) */
.wk-mm-panes .wk-mm-pane:first-child { display: block; }
.wk-mm-panes.is-ready .wk-mm-pane { display: none; }
.wk-mm-panes.is-ready .wk-mm-pane.is-active { display: block; }

/* ==========================================================================
   A11y & Politur (UI-Review): Fokus-Ringe für Keyboard-Navigation
   ========================================================================== */
.wk-mm-grp:focus-visible { outline: 2px solid var(--wk-blue); outline-offset: 2px; background: var(--wk-tint); }
.wk-mm-grp:focus-visible .wk-mm-ic { background: var(--wk-blue); border-color: var(--wk-blue); }
.wk-mm-grp:focus-visible .wk-mm-ic svg { stroke: #fff; }
.wk-mm-tile:focus-visible { outline: none; }
.wk-mm-tile:focus-visible .wk-mm-img-wrap { outline: 2px solid var(--wk-blue); outline-offset: 2px; border-color: var(--wk-blue); }
.wk-mm-tile:focus-visible .wk-mm-name { color: var(--wk-blue-ink); }
.wk-mm-sec a:focus-visible, .wk-mm-offer:focus-visible { outline: 2px solid var(--wk-blue); outline-offset: 2px; }
.wk-mm-pane-head a:focus-visible { outline: 2px solid var(--wk-blue); outline-offset: 2px; border-radius: 4px; }
/* P2: Offer-Produktname flexibel statt fix 320px */
.wk-mm-offer .wk-mm-offer-info b { max-width: none; }