/* trikonsale — Sale-Badge + Sale-Seite + Homepage-Block (Farben: DESIGN.md) */
.js-product-miniature .thumbnail-container { position: relative; }
/* Variante B: gelbes Band (Signalfarbe nur für Sale — Rot = Rabatt, Grün =
   Versand/Verfügbar sind im Shop belegt), roter Preis, Knappheits-Hinweis. */
.trikonsale-has-ribbon { position: relative; overflow: hidden; }
.trikonsale-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 96px;
    height: 96px;
    overflow: hidden;
    pointer-events: none;
}
.trikonsale-ribbon__band {
    position: absolute;
    top: 18px;
    left: -34px;
    width: 140px;
    padding: 4px 0;
    transform: rotate(-45deg);
    background: #ffc400;
    color: #14222a;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}
.trikonsale-tile .thumbnail-container { box-shadow: 0 0 0 2px #ffc400 inset; border-radius: 8px; }
/* Auf Sale-Seite + Homepage-Block ist JEDE Kachel Sale: Rahmen wäre nur Rauschen. */
.trikonsale-page .trikonsale-tile .thumbnail-container,
.trikonsale-home .trikonsale-tile .thumbnail-container { box-shadow: none; }
/* Produktseite: großes Bild → größeres Band */
.trikonsale-product .trikonsale-ribbon { width: 128px; height: 128px; }
.trikonsale-product .trikonsale-ribbon__band { top: 26px; left: -42px; width: 184px; padding: 6px 0; font-size: 14px; }
/* Kacheln: Preis bleibt Theme-neutral (Band ist das Signal; zweites Rot neben
   dem Rabatt-Badge wäre Farb-Drift). Produktseite: exakt das Rot des
   Theme-Rabatt-Badges (#dd0000, 5,3:1 auf Weiß). */
.trikonsale-product .product-prices .current-price,
.trikonsale-product .product-prices .current-price span:not(.discount):not(.discount-percentage) { color: #dd0000; }
.trikonsale-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
    padding: 4px 8px;
    border-radius: 4px;
    background: #fff6d6;
    color: #5c4300;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.trikonsale-hint::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12c2-2.96 0-7-1-8 0 3.04-1.77 4.74-3 6-1.23 1.27-2 3.26-2 5a6 6 0 1 0 12 0c0-1.53-1.06-3.94-2-5-1.79 3-2.8 3-4 2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12c2-2.96 0-7-1-8 0 3.04-1.77 4.74-3 6-1.23 1.27-2 3.26-2 5a6 6 0 1 0 12 0c0-1.53-1.06-3.94-2-5-1.79 3-2.8 3-4 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.trikonsale-hint--product { display: flex; width: max-content; max-width: 100%; font-size: 13px; margin: 8px 0 0; }
/* Touch-Target ≥44px (PRODUCT.md Prinzip 4) */
.trikonsale-page__sortform select { min-height: 44px; padding: 0 8px; }

.trikonsale-page__intro { max-width: 65ch; margin: 0 0 8px; color: #14222a; font-size: 16px; line-height: 1.5; }
.trikonsale-page__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 22px; padding: 0; list-style: none; }
.trikonsale-page__fact { display: inline-flex; align-items: center; gap: 8px; color: #14222a; font-size: 14px; font-weight: 600; line-height: 1.4; }
.trikonsale-page__fact::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-color: #04697e;
    -webkit-mask: var(--ts-icon) center / contain no-repeat;
    mask: var(--ts-icon) center / contain no-repeat;
}
.trikonsale-page__fact--stock { --ts-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M12 12l8-4.5M12 12v9M12 12L4 7.5'/%3E%3C/svg%3E"); }
.trikonsale-page__fact--limited { --ts-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12M6 22h12M7 2c0 5 10 5 10 10S7 17 7 22M17 2c0 5-10 5-10 10s10 5 10 10'/%3E%3C/svg%3E"); }
.trikonsale-page__fact--ship { --ts-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.5'/%3E%3Ccircle cx='17' cy='17.5' r='1.5'/%3E%3C/svg%3E"); }
.trikonsale-page__toolbar {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 8px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #e6e9eb;
}
.trikonsale-page__count { margin: 0; color: #6c7479; font-size: 12px; font-weight: 500; }
.trikonsale-page__sortform select { margin-left: 6px; }
.trikonsale-page__pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 22px 0; }
.trikonsale-page__pagelink { color: #04697e; font-weight: 600; }
.trikonsale-page__pagelink:hover, .trikonsale-page__pagelink:focus { color: #035566; }
.trikonsale-page__empty { max-width: 46ch; margin: 32px auto; padding: 0 14px; text-align: center; }
.trikonsale-page__empty-icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    background-color: #04697e;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.trikonsale-page__empty-title { margin: 0 0 8px; color: #14222a; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.trikonsale-page__empty-body { margin: 0 0 22px; color: #6c7479; font-size: 14px; line-height: 1.5; }
.trikonsale-page__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; }
.trikonsale-page__cta { min-height: 44px; display: inline-flex; align-items: center; }
.trikonsale-page__cta-secondary { display: inline-flex; align-items: center; min-height: 44px; color: #04697e; font-weight: 600; }
.trikonsale-page__cta-secondary:hover, .trikonsale-page__cta-secondary:focus { color: #035566; }

.trikonsale-home { margin: 32px 0; }
.trikonsale-home__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.trikonsale-home__title { font-size: 1.6rem; font-weight: 700; line-height: 1.25; color: #14222a; margin: 0; }
.trikonsale-home__all { color: #04697e; font-weight: 600; }
.trikonsale-home__all:hover, .trikonsale-home__all:focus { color: #035566; }

/* Navbar (trikonhomepage): "Sale" als gelbe Pill (Variante B) mit Tag-Icon hervorheben.
   Selektor über die Ziel-URL — trikonhomepage bleibt unverändert. */
.trikon-hp-navbar-link[href$="/sale"],
.trikon-hp-navbar-link[href*="controller=sale"] {
    gap: 6px;
    margin-right: 6px;
    /* Trefferfläche volle Navbar-Höhe (≥44px), sichtbare Pill per
       transparentem Rand + background-clip */
    border: 6px solid transparent;
    background-clip: padding-box;
    padding-top: calc(0.75rem - 6px);
    padding-bottom: calc(0.75rem - 6px);
    border-radius: 22px;
    background-color: #ffc400;
    color: #14222a;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.trikon-hp-navbar-link[href$="/sale"]::before,
.trikon-hp-navbar-link[href*="controller=sale"]::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.trikon-hp-navbar-link[href$="/sale"]:hover,
.trikon-hp-navbar-link[href*="controller=sale"]:hover,
.trikon-hp-navbar-link[href$="/sale"][aria-current="page"] {
    background-color: #ffd54a;
    color: #14222a;
}
.trikon-hp-navbar-link.trikon-hp-navbar-link[href$="/sale"]:focus-visible,
.trikon-hp-navbar-link.trikon-hp-navbar-link[href*="controller=sale"]:focus-visible {
    outline: 2px solid #fafafa;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
    .trikon-hp-navbar-link[href$="/sale"] { transition: background-color 0.15s ease; }
}

/* ---------- Mobile (PRODUCT.md: 375px, ein Daumen) ---------- */
@media (max-width: 575px) {
    /* kleinere Kachelbilder → Band proportional kleiner */
    .trikonsale-tile .trikonsale-ribbon { width: 76px; height: 76px; }
    .trikonsale-tile .trikonsale-ribbon__band { top: 13px; left: -30px; width: 116px; padding: 3px 0; font-size: 11px; letter-spacing: 0.12em; }
    .trikonsale-product .trikonsale-ribbon { width: 96px; height: 96px; }
    .trikonsale-product .trikonsale-ribbon__band { top: 18px; left: -34px; width: 140px; padding: 4px 0; font-size: 12px; }
    /* Sortierung: eigene Zeile, volle Breite, Daumen-tauglich */
    .trikonsale-page__toolbar { flex-direction: column; align-items: stretch; }
    .trikonsale-page__sortform label { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; }
    .trikonsale-page__sortform select { flex: 1; margin-left: 0; font-size: 16px; }
    .trikonsale-hint--product { width: auto; }
}
@media (max-width: 767px) {
    /* Homepage-Block: wischbare Reihe statt 6 gestapelter Kacheln */
    /* Theme setzt .row/.products mit Umbruch + float → gezielt übersteuern */
    .trikonsale-home .trikonsale-home__grid.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px;
        margin: 0;
        padding: 0 0 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .trikonsale-home .trikonsale-home__grid > .item-product {
        float: none;
        flex: 0 0 72%;
        max-width: 72%;
        padding: 0;
        scroll-snap-align: start;
    }
    .trikonsale-home__head { padding: 0 2px; }
    .trikonsale-home__all { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (min-width: 576px) and (max-width: 767px) {
    .trikonsale-home .trikonsale-home__grid > .item-product { flex-basis: 44%; max-width: 44%; }
}