/* RmtimeSearch — zentrierter Instant-Suchlayer.
   Stil nach dem Design-System „Ruhe": Struktur durch Abstand statt Kästen,
   Hausfarbe nur als Akzent, Verfügbarkeit als Punkt, Josefin Sans aus dem Theme. */

.rmts-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(10, 10, 12, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 20px 20px;
    overflow-y: auto;
}

.rmts-overlay[hidden] { display: none; }

body.rmts-open { overflow: hidden; }

.rmts-layer {
    width: 100%;
    max-width: 1020px;
    background: #fff;
    border-radius: 3px;
    color: #0e0e0f;
    display: flex;
    flex-direction: column;
    /* Hoch genug für zwei volle Kachelreihen, auch auf Laptop-Displays */
    max-height: min(88vh, 820px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* ── Suchfeld ───────────────────────────────────────────────────── */

.rmts-search {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 26px;
    border-bottom: 1px solid #e8e8ea;
    flex: 0 0 auto;
}

.rmts-search > svg {
    width: 21px;
    height: 21px;
    stroke: #0e0e0f;
    fill: none;
    stroke-width: 1.6;
    flex: 0 0 auto;
}

.rmts-input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1.35rem;
    font-weight: 300;
    color: #0e0e0f;
    letter-spacing: 0.01em;
    min-width: 0;
    padding: 0;
}

.rmts-input::placeholder { color: #b3b5ba; }
.rmts-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.rmts-close {
    /* Vorher ein blasses Zeichen ohne Fläche — am Handy war nicht zu erkennen,
       dass man damit schließt. Jetzt ein Kreis mit Rand: ruhig, aber als
       Schaltfläche lesbar. */
    background: #f4f5f6;
    border: 1px solid #e4e5e8;
    border-radius: 999px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
    color: #3c3e44;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rmts-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.rmts-close:hover { background: #ebecee; border-color: #d8d9dd; color: #0e0e0f; }
.rmts-close:focus-visible { outline: 2px solid #8a0010; outline-offset: 2px; }

.rmts-body { overflow-y: auto; flex: 1 1 auto; }

/* ── Aufbau: Rail links, Kacheln rechts ─────────────────────────── */

.rmts-split { display: grid; grid-template-columns: 200px 1fr; }

.rmts-rail {
    border-right: 1px solid #e8e8ea;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rmts-main { padding: 14px 12px; }

.rmts-sec {
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #85878d;
    padding-bottom: 12px;
}
.rmts-sec-inset { padding: 6px 6px 12px; }

.rmts-pad { padding: 22px 26px; }

.rmts-rail-list { display: flex; flex-direction: column; gap: 1px; }

.rmts-rail-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 5px 8px;
    border: 0;
    border-radius: 3px;
    background: none;
    font-family: inherit;
    font-size: 0.94rem;
    color: #0e0e0f;
    text-align: left;
    text-decoration: none;
    width: 100%;
    cursor: pointer;
}
.rmts-rail-item:hover { background: #f6f7f8; color: #0e0e0f; text-decoration: none; }
.rmts-rail-item b { font-weight: 400; font-size: 0.74rem; color: #85878d; font-variant-numeric: tabular-nums; }
.rmts-cat-parent { color: #85878d; }

/* ── Produktkacheln ─────────────────────────────────────────────── */

.rmts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

/* Das Bild trägt die Kachel — Text bewusst klein und ruhig darunter. */
.rmts-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #0e0e0f;
    transition: background 0.2s ease;
}

/* Hover ohne Kasten und ohne Unterstrich: eine weiche Fläche mit großem
   Radius, das Bild atmet leicht. Das Theme unterstreicht jedes a:hover —
   deshalb hier ausdrücklich abbestellt, auch für die Kindelemente. */
.rmts-card:hover,
.rmts-card:focus-visible,
.rmts-card.is-active {
    background: #fafbfc;
    color: #0e0e0f;
    text-decoration: none;
}
.rmts-card:hover .rmts-name,
.rmts-card:hover .rmts-brand,
.rmts-card:hover .rmts-price,
.rmts-card:hover .rmts-strike { text-decoration: none; }
.rmts-card:hover .rmts-shot img { transform: scale(1.04); }
.rmts-card:focus-visible { outline: 2px solid #8a0010; outline-offset: 2px; }

.rmts-shot {
    aspect-ratio: 1 / 1;
    /* An die Fensterhöhe gekoppelt: auf kleinen Laptops etwas kleiner,
       damit beide Kachelreihen ohne Scrollen stehen bleiben */
    max-height: min(178px, 18vh);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    border-radius: 8px;
}
.rmts-shot img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.rmts-brand {
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a9ca1;
}

.rmts-name {
    font-size: 0.86rem;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rmts-priceline { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: 1px; }
.rmts-price { font-size: 0.95rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.rmts-strike { font-size: 0.76rem; color: #85878d; text-decoration: line-through; font-variant-numeric: tabular-nums; }

/* Verfügbarkeit als Punkt — der Punkt trägt die Bedeutung (Design-System) */
.rmts-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3cc261;
    flex: 0 0 auto;
    align-self: center;
}

/* ── Service-Treffer ────────────────────────────────────────────── */

.rmts-service { background: #f6f7f8; }

.rmts-service-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: #fff;
    border-left: 3px solid #8a0010;
    border-radius: 2px;
    text-decoration: none;
    color: #0e0e0f;
    transition: transform 0.12s ease;
}
.rmts-service-btn + .rmts-service-btn { margin-top: 6px; }
.rmts-service-btn:hover { transform: translateX(2px); color: #0e0e0f; text-decoration: none; }

.rmts-service-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.rmts-service-title { font-size: 1.02rem; font-weight: 500; }
.rmts-service-desc { font-size: 0.86rem; color: #85878d; }
.rmts-service-arrow { color: #8a0010; font-size: 1.15rem; line-height: 1; flex: 0 0 auto; }

/* ── Fußleiste ──────────────────────────────────────────────────── */

.rmts-foot {
    border-top: 1px solid #e8e8ea;
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
}

/* Newsletter fest hier und nicht im scrollenden Bereich: immer sichtbar,
   ohne sich zwischen die Produkte zu drängen. */
.rmts-foot-nl {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-left: 3px solid #8a0010;
    margin: 10px 0 10px 14px;
    flex-wrap: wrap;
    min-width: 0;
}
.rmts-foot-nl strong { font-weight: 600; color: #8a0010; font-size: 0.94rem; }
.rmts-foot-nl span { font-size: 0.89rem; color: #52545a; }
.rmts-foot-nl a { font-size: 0.89rem; color: #0e0e0f; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.rmts-all {
    flex: 0 0 auto;
    padding: 15px 26px;
    font-size: 0.85rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #0e0e0f;
    text-decoration: none;
    border-left: 1px solid #e8e8ea;
    display: flex;
    align-items: center;
}
.rmts-all:hover { background: #f6f7f8; color: #0e0e0f; }
.rmts-all-short { display: none; }

.rmts-empty { padding: 34px 26px; text-align: center; color: #85878d; font-size: 1rem; }
.rmts-hint { padding: 30px 26px; text-align: center; color: #85878d; font-size: 0.95rem; }

/* Flache Fenster (kleine Laptops): Kachel etwas straffen, damit unter den
   zwei Reihen auch „Mehr laden" noch sichtbar ist — sonst weiß niemand,
   dass es weitergeht. Auf großen Schirmen bleibt das Bild in voller Größe. */
@media (max-height: 880px) {
    .rmts-shot { max-height: min(178px, 16.5vh); }
    .rmts-card { padding: 6px 8px 10px; gap: 5px; }
    .rmts-more-wrap { padding: 8px 8px 4px; }
    .rmts-main { padding: 10px 12px; }
}

/* ── Handy ──────────────────────────────────────────────────────── */

@media (max-width: 980px) {
    .rmts-split { grid-template-columns: 1fr; }
    .rmts-rail {
        border-right: 0;
        border-bottom: 1px solid #e8e8ea;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 26px;
    }
    .rmts-rail > div { flex: 1 1 200px; }
    .rmts-foot-nl span { display: none; }
}

@media (max-width: 720px) {
    .rmts-overlay { padding: 0; }
    .rmts-layer { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; }
    .rmts-grid { grid-template-columns: repeat(2, 1fr); }
    .rmts-main { padding: 8px; }

    /* Am Handy schweben WhatsApp- und Barrierefreiheits-Knopf des Shops über
       dem unteren Rand. Alles, was dort lag — Newsletter-Hinweis, „Alle
       Ergebnisse", Kategorien —, war verdeckt und nicht antippbar. Deshalb
       wandert die Leiste unter das Suchfeld und die Kategorien über die
       Kacheln; unten bleibt nur Ware, die ohnehin weiterscrollt. */
    .rmts-search { order: 0; }
    .rmts-foot   { order: 1; border-top: 0; border-bottom: 1px solid #e8e8ea; }
    .rmts-body   { order: 2; }

    /* Freiraum unter der letzten Kachelreihe, damit „Mehr laden" nicht unter
       den schwebenden Knöpfen endet. */
    .rmts-body { padding-bottom: 76px; }

    /* Ohne min-width: 0 wächst ein Rasterelement auf die Breite seines
       Inhalts. Die Chipzeile mit nowrap ist rund 1.100 px „breit" — der
       ganze Bereich sprengte damit das Fenster und vom zweispaltigen
       Kachelraster war nur die linke Spalte zu sehen. */
    .rmts-split, .rmts-main, .rmts-rail, .rmts-rail > div, .rmts-rail-list { min-width: 0; }
    .rmts-rail-list { max-width: 100%; }

    .rmts-rail {
        order: 1;
        border-bottom: 1px solid #e8e8ea;
        border-top: 0;
        /* Bei 980 px stehen die Abschnitte nebeneinander — am Handy wären zwei
           schmale Spalten mit je einer Schiebeleiste unbrauchbar. */
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
        padding: 14px 0 14px 16px;
    }
    .rmts-rail > div { flex: 0 0 auto; width: 100%; min-width: 0; }
    .rmts-rail .rmts-sec { padding-bottom: 7px; }
    .rmts-main { order: 2; }

    /* Eine Zeile je Abschnitt, seitlich schiebbar: Umbruch auf mehrere Zeilen
       drückte die Ware sonst weit nach unten. */
    .rmts-rail-list {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-right: 16px;
    }
    .rmts-rail-list::-webkit-scrollbar { display: none; }
    .rmts-rail-item {
        width: auto;
        flex: 0 0 auto;
        border: 1px solid #e8e8ea;
        border-radius: 999px;
        padding: 6px 13px;
        font-size: 0.88rem;
        gap: 7px;
        white-space: nowrap;
    }
    .rmts-rail-item b { font-size: 0.72rem; }
    .rmts-rail .rmts-sec { padding-right: 16px; }
    .rmts-close { width: 40px; height: 40px; }
    .rmts-close svg { width: 20px; height: 20px; }
    .rmts-search { padding: 15px 16px; gap: 10px; }
    .rmts-input { font-size: 1.05rem; }
    .rmts-pad { padding: 18px 16px; }
    .rmts-shot { max-height: 30vw; }
    .rmts-service-btn { padding: 12px 13px; gap: 10px; }

    /* Fußzeile einzeilig halten: nowrap auf beiden Teilen, sonst bricht
       „10 % sparen" selbst um */
    .rmts-foot-nl { margin: 8px 0 8px 10px; padding: 9px 10px; gap: 8px; flex-wrap: nowrap; }
    .rmts-foot-nl strong { font-size: 0.86rem; white-space: nowrap; }
    .rmts-foot-nl a { font-size: 0.83rem; }
    .rmts-all { padding: 13px 16px; font-size: 0.74rem; letter-spacing: 0.05em; white-space: nowrap; }
    .rmts-all-long { display: none; }
    .rmts-all-short { display: inline; }

    .rmts-card .rmts-price { font-size: 0.95rem; }
    .rmts-card .rmts-strike { font-size: 0.74rem; }
    .rmts-priceline { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .rmts-card, .rmts-service-btn, .rmts-shot img { transition: none; }
    .rmts-card:hover .rmts-shot img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Suchergebnis-Seite
   Bisher standen Überschrift, 17 Filterknöpfe und die Paginierung vor
   dem ersten Produkt — auf dem Desktop begann die Ware erst bei 485 px,
   also unterhalb der halben Bildschirmhöhe. Hier wird nichts entfernt,
   nur gestrafft: die Ware rückt um rund 90 px nach oben, die Filter
   bleiben vollständig erreichbar.
   ══════════════════════════════════════════════════════════════════ */

/* Aus der zentrierten Riesenzeile wird eine ruhige Zeile links */
.search-page .search-headline {
    font-size: 1.3rem;
    font-weight: 300;
    text-align: left;
    margin-bottom: 0.85rem;
    line-height: 1.35;
}

.search-page .filter-panel-item-toggle.btn {
    padding: 7px 15px;
    font-size: 0.88rem;
    min-height: 0;
}

.search-page .filter-panel-item { margin-bottom: 7px; }
.search-page .filter-panel-items-container { margin-bottom: 0; }
.search-page .cms-element-sidebar-filter { margin-bottom: 0.6rem; }

.search-page .cms-element-product-listing-actions { padding-top: 8px; margin-bottom: 8px; }
.search-page .sorting.form-select { padding-top: 7px; padding-bottom: 7px; font-size: 0.9rem; }

/* Die obere Blätterleiste wiederholt nur, was unten ohnehin steht */
.search-page .listing-pagination-top { display: none; }

/* Service-Treffer und Alternativen auf der Seite — gleiche Bausteine wie
   im Layer, damit sich der Klick aus dem Layer wie eine Fortsetzung anfühlt */
.rmts-page-block { margin: 0 0 1.4rem; }
.rmts-page-block .rmts-service-btn { max-width: 560px; }

.rmts-page-empty {
    padding: 2.4rem 0 1.8rem;
    text-align: center;
}
.rmts-page-empty p { color: #85878d; margin: 0 0 0.3rem; font-size: 1.02rem; }

.rmts-page-suggest {
    border-top: 1px solid #e8e8ea;
    padding-top: 1.6rem;
    margin-top: 0.6rem;
}
.rmts-page-suggest .rmts-sec { padding-bottom: 14px; }
.rmts-page-suggest .rmts-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
    .rmts-page-suggest .rmts-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .search-page .search-headline { font-size: 1.12rem; margin-bottom: 0.7rem; }
    .rmts-page-suggest .rmts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* „Keine Produkte gefunden" kam als blau umrandete Hinweisbox mit Info-Symbol.
   Das Design-System verzichtet bewusst auf farbige Kästen — hier bleibt eine
   ruhige Zeile, damit die Fehlanzeige nicht wie ein Systemfehler aussieht. */
.search-page .alert.alert-info {
    border: 0;
    background: transparent;
    padding: 0.4rem 0 1rem;
    color: #6d6f76;
    font-size: 1rem;
}
.search-page .alert.alert-info .icon,
.search-page .alert.alert-info svg { display: none; }

/* Beantwortet eine Serviceseite die Frage, ist die Suche kein Fehlschlag —
   dann verschwindet die Fehlanzeige ganz (das JS setzt die Klasse). */
.search-page.rmts-has-service .alert.alert-info { display: none; }

/* „Mehr laden" — der Layer zeigt bis zu vier Seiten, danach führt der Weg
   auf die Suchseite. Vorher endete er nach sechs Kacheln, obwohl die Fußzeile
   noch 22 Treffer versprach. */
.rmts-more-wrap {
    display: flex;
    justify-content: center;
    padding: 14px 8px 6px;
}

.rmts-more {
    appearance: none;
    background: none;
    border: 1px solid #e8e8ea;
    border-radius: 999px;
    padding: 9px 22px;
    font-family: inherit;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    color: #0e0e0f;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.rmts-more:hover { border-color: #0e0e0f; background: #f6f7f8; }
.rmts-more:focus-visible { outline: 2px solid #8a0010; outline-offset: 2px; }
.rmts-more[disabled] { color: #85878d; cursor: default; border-color: #e8e8ea; background: none; }
.rmts-more-rest { color: #85878d; font-size: 0.82rem; }

/* Kategorie-Chips auf der Suchergebnis-Seite: dieselbe Eingrenzung wie im
   Rail des Layers, damit der Klick aus dem Layer nicht in eine Sackgasse
   aus 17 Filterknöpfen führt. Sie zielen direkt auf die Kategorieseite. */
.rmts-page-cats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 1.1rem;
}

.rmts-page-cats-label {
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #85878d;
    margin-right: 4px;
}

.rmts-page-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 13px;
    border: 1px solid var(--bs-border-color, #e2e4e9);
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--bs-body-color, #0e0e0f);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.rmts-page-chip:hover {
    border-color: var(--bs-body-color, #0e0e0f);
    background: #fafbfc;
    color: var(--bs-body-color, #0e0e0f);
    text-decoration: none;
}
.rmts-page-chip b { font-weight: 400; font-size: 0.74rem; color: #85878d; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
    /* Auf dem Handy eine einzige, seitlich schiebbare Zeile: umbrechend
       nahmen fünf Chips über 200 px ein und drückten die Ware aus dem Bild. */
    .rmts-page-cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        margin-bottom: 0.85rem;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .rmts-page-cats::-webkit-scrollbar { display: none; }
    .rmts-page-cats-label { display: none; }
    .rmts-page-chip { font-size: 0.84rem; padding: 4px 11px; white-space: nowrap; flex: 0 0 auto; }
    .rmts-page-chip .rmts-cat-parent { display: none; }
}