/* Farbwähler mit Farbfeldern — Partial Basket/ColorSwatchPicker, Verhalten in JavaScript/color-swatch-picker.js */

.lm-swatch-picker {
    margin-top: .5rem;
}

.lm-swatch-search-wrap {
    position: relative;
    margin-bottom: .5rem;
}

.lm-swatch-search-icon {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
}

.lm-swatch-search-wrap .lm-swatch-search {
    padding-left: 1.9rem;
}

.lm-swatch-list {
    max-height: 24rem;
    overflow-y: auto;
    padding: .125rem .25rem .25rem .125rem;
}

.lm-swatch-group + .lm-swatch-group {
    margin-top: .75rem;
}

.lm-swatch-group-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: .35rem;
}

.lm-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: .375rem;
}

.lm-swatch-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .35rem 1.6rem .35rem .4rem;
    text-align: left;
    color: var(--bs-body-color, #212529);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.lm-swatch-option:hover {
    border-color: var(--bs-secondary-color, #6c757d);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.lm-swatch-option:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 13, 110, 253), .35);
}

.lm-swatch-option[aria-checked="true"] {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: inset 0 0 0 1px var(--bs-primary, #0d6efd);
    background: var(--bs-primary-bg-subtle, #e7f1ff);
}

.lm-swatch-check {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-primary, #0d6efd);
    font-size: 1rem;
    visibility: hidden;
}

.lm-swatch-option[aria-checked="true"] .lm-swatch-check {
    visibility: visible;
}

.lm-swatch-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lm-swatch-name {
    font-size: .8125rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lm-swatch-suffix {
    font-family: var(--bs-font-monospace, monospace);
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
    overflow-wrap: anywhere;
}

.lm-swatch-empty {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Das Farbfeld selbst. --lm-swatch trägt das Hex; die Muster legen sich darüber. */
.lm-swatch {
    --lm-swatch: #d0d0d0;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: .3rem;
    background: var(--lm-swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* Eloxal: gebürstetes Metall mit Glanzkante */
.lm-swatch--anodized {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .12) 62%, rgba(255, 255, 255, .35) 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1px, rgba(0, 0, 0, .05) 1px 2px),
        var(--lm-swatch);
}

/* Feinstruktur / Glimmer: feines Korn */
.lm-swatch--texture {
    background:
        radial-gradient(rgba(255, 255, 255, .16) .5px, transparent .9px) 0 0 / 3px 3px,
        radial-gradient(rgba(0, 0, 0, .22) .5px, transparent .9px) 1.5px 1.5px / 3px 3px,
        var(--lm-swatch);
}

/* Holzdekor: Maserung */
.lm-swatch--wood {
    background:
        repeating-linear-gradient(100deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 4px, rgba(255, 255, 255, .08) 4px 5px, transparent 5px 9px),
        linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .12)),
        var(--lm-swatch);
}

/* Sonderfarbe: beliebiger RAL-Ton */
.lm-swatch--special {
    background: conic-gradient(#d4352b, #f2a20c, #f1dd38, #3c9b3b, #0089b6, #6b4c9a, #c4618c, #d4352b);
}

/* Rohware: blankes Aluminium, schraffiert */
.lm-swatch--raw {
    background:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 5px),
        var(--lm-swatch);
}

/* Keine Vorschau bekannt */
.lm-swatch--unknown {
    background:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, .08) 0 4px, transparent 4px 8px),
        var(--bs-body-bg, #fff);
    box-shadow: inset 0 0 0 1px var(--bs-border-color, #dee2e6);
}

/* Schmale Spalte (Warenkorb-Position): kleinere Felder, Name bis drei Zeilen, niedrigere Liste */
.lm-swatch-picker--compact {
    max-width: 22rem;
}

.lm-swatch-picker--compact .lm-swatch-list {
    max-height: 17rem;
}

.lm-swatch-picker--compact .lm-swatch-grid {
    grid-template-columns: 1fr;
    gap: .25rem;
}

.lm-swatch-picker--compact .lm-swatch-option {
    min-height: 2.25rem;
    padding: .25rem 1.5rem .25rem .3rem;
    gap: .45rem;
}

.lm-swatch-picker--compact .lm-swatch {
    width: 1.5rem;
    height: 1.5rem;
}

.lm-swatch-picker--compact .lm-swatch-name {
    font-size: .78rem;
    -webkit-line-clamp: 3;
}

/* Alle Farbfelder ohne eigene Scrollbox (Rückmeldung Lämmermann 03.11.2026): Artikelseite und Farb-Dropdown
   der Kopfleiste - dort scrollt nur noch das Dropdown. Warenkorb-Position (compact), Auftrag (alle RAL-Töne)
   und Materialbestellung bleiben begrenzt. */
.lm-swatch-picker--full .lm-swatch-list {
    max-height: none;
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .lm-swatch-option {
        transition: none;
    }
}

.lm-swatch-option[hidden],
.lm-swatch-group[hidden] {
    display: none;
}

/* --- Sonderfarben (RAL): Zeile unter dem Wähler + Dialog (special-color-dialog.js) --- */
.av-special-color {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.av-special-color-caption {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: .4rem;
}

.av-special-color-summary {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .7rem;
    text-align: left;
    background: var(--bs-body-bg, #fff);
    border: 1px dashed var(--bs-primary, #1c63b7);
    border-radius: .6rem;
    color: var(--bs-body-color, #212529);
    font-size: .875rem;
    transition: background .12s, border-color .12s;
}

.av-special-color-summary.is-selected {
    border-style: solid;
    box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb, 28, 99, 183), .15);
}

.av-special-color-summary:hover,
.av-special-color-summary:focus-visible {
    background: rgba(var(--bs-primary-rgb, 28, 99, 183), .06);
    outline: none;
}

.av-special-color-chip {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .45rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.av-special-color-chip.is-rainbow {
    background: conic-gradient(#e63244, #f3a505, #f8f32b, #57a639, #3b83bd, #6c4675, #e63244);
}

.av-special-color-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.av-special-color-text small {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .76rem;
}

.av-special-color-summary-action {
    color: var(--bs-primary, #1c63b7);
    font-weight: 600;
    font-size: .85rem;
}

/* "Eigenes Pulver anfragen" als aufklappbare Karte (Partial Basket/OwnPowderForm) */
details > summary.av-special-color-summary {
    list-style: none;
    cursor: pointer;
}

details > summary.av-special-color-summary::-webkit-details-marker {
    display: none;
}

details > summary.av-special-color-summary .av-special-color-summary-action i {
    display: inline-block;
    transition: transform .12s;
}

details[open] > summary.av-special-color-summary .av-special-color-summary-action i {
    transform: rotate(90deg);
}

/* Kopfleiste (specialFirst): Überschrift der Farbfelder unter Sonderfarben und Pulver */
.av-standard-colors-caption {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.lm-special-dialog {
    width: min(960px, calc(100vw - 2rem));
    max-height: min(820px, calc(100vh - 2rem));
    padding: 0;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .35);
    overflow: hidden;
    color: var(--bs-body-color, #212529);
    background: var(--bs-body-bg, #fff);
}

.lm-special-dialog[open] {
    display: flex;
    animation: lm-special-in .18s ease-out;
}

.lm-special-dialog::backdrop {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}

@keyframes lm-special-in {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to { opacity: 1; transform: none; }
}

.lm-special {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: inherit;
    min-height: 0;
}

.lm-special__loading {
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.lm-special__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem .5rem;
}

.lm-special__eyebrow {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}

.lm-special__title {
    margin: .15rem 0 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.lm-special__close {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--bs-secondary-color, #6c757d);
    padding: .25rem;
    border-radius: .5rem;
}

.lm-special__close:hover {
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-body-color, #212529);
}

.lm-special__steps {
    display: flex;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0 1.5rem .75rem;
    font-size: .85rem;
    color: var(--bs-secondary-color, #6c757d);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.lm-special__steps li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.lm-special__steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: .75rem;
}

.lm-special__steps li.is-active {
    color: var(--bs-primary, #1c63b7);
    font-weight: 600;
}

.lm-special__steps li.is-active span,
.lm-special__steps li.is-done span {
    background: var(--bs-primary, #1c63b7);
    border-color: var(--bs-primary, #1c63b7);
    color: #fff;
}

.lm-special__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    padding: 1rem 1.5rem 0;
}

.lm-special__body[hidden] {
    display: none;
}

.lm-special__tools {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.lm-special__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: .6rem;
    margin: 0;
}

.lm-special__search:focus-within {
    border-color: var(--bs-primary, #1c63b7);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 28, 99, 183), .15);
}

.lm-special__search input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: .95rem;
}

.lm-special__families {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.lm-special__families button {
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .8rem;
}

.lm-special__families button.is-active {
    background: var(--bs-primary, #1c63b7);
    border-color: var(--bs-primary, #1c63b7);
    color: #fff;
}

.lm-special__scroll {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    margin-top: .75rem;
    padding-bottom: 1rem;
}

.lm-special__family[hidden],
.lm-special__tone[hidden] {
    display: none;
}

.lm-special__family h3 {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin: .75rem 0 .4rem;
}

.lm-special__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .45rem;
}

.lm-special__tone {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .5rem;
    text-align: left;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

.lm-special__tone:hover,
.lm-special__tone:focus-visible {
    border-color: var(--bs-primary, #1c63b7);
    outline: none;
    transform: translateY(-1px);
}

.lm-special__tone.is-selected {
    border-color: var(--bs-primary, #1c63b7);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 28, 99, 183), .2);
}

.lm-special__chip,
.lm-special__chosen-chip,
.lm-special__summary-chip {
    flex: 0 0 auto;
    border-radius: .45rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.lm-special__chip {
    width: 2.25rem;
    height: 2.25rem;
}

.lm-special__chip.is-unknown,
.lm-special__chosen-chip.is-unknown,
.lm-special__summary-chip.is-unknown {
    background-image: repeating-linear-gradient(45deg, #e9ecef 0 6px, #f8f9fa 6px 12px);
}

.lm-special__tone-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.lm-special__tone-text strong {
    font-size: .82rem;
}

.lm-special__tone-text span {
    font-size: .74rem;
    color: var(--bs-secondary-color, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-special__empty {
    margin: 2rem 0;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

.lm-special__chosen {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem;
    border-radius: .75rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.lm-special__chosen-chip {
    width: 4rem;
    height: 4rem;
    border-radius: .75rem;
}

.lm-special__chosen-label {
    font-size: 1.1rem;
    font-weight: 600;
}

.lm-special__back {
    border: none;
    background: none;
    padding: 0;
    color: var(--bs-primary, #1c63b7);
    font-size: .85rem;
}

.lm-special__subhead {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin: 1.25rem 0 .5rem;
}

.lm-special__types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .5rem;
    padding-bottom: 1rem;
    overflow-y: auto;
}

.lm-special__type {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem .9rem;
    text-align: left;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .7rem;
}

.lm-special__type span {
    font-size: .78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.lm-special__type:hover,
.lm-special__type:focus-visible {
    border-color: var(--bs-primary, #1c63b7);
    outline: none;
}

.lm-special__type[aria-checked="true"] {
    border-color: var(--bs-primary, #1c63b7);
    background: rgba(var(--bs-primary-rgb, 28, 99, 183), .06);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 28, 99, 183), .2);
}

.lm-special__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .9rem 1.5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.lm-special__summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 260px;
    font-size: .9rem;
}

.lm-special__summary-chip {
    width: 1.6rem;
    height: 1.6rem;
}

.lm-special__actions {
    display: flex;
    gap: .5rem;
}

.lm-special__note {
    flex: 1 1 100%;
    margin: 0;
    font-size: .72rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Sonderfarben (SF) geführt: Hersteller, Farbe, Struktur, Glanzgrad (Template Basket/SpecialColors, Section Guided) */
.lm-special-dialog--guided {
    width: min(760px, calc(100vw - 2rem));
}

.lm-special--guided .lm-special__body {
    overflow-y: auto;
    padding-bottom: 1rem;
}

.lm-guided__intro {
    margin: 0 0 1rem;
    font-size: .82rem;
    color: var(--bs-secondary-color, #6c757d);
}

.lm-guided {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.lm-guided__row {
    display: grid;
    grid-template-columns: 7rem 1fr;
    align-items: start;
    gap: .25rem 1rem;
}

.lm-guided__label {
    padding-top: .45rem;
    font-weight: 600;
    font-size: .9rem;
}

.lm-guided__row.is-active .lm-guided__label {
    color: var(--bs-primary, #1c63b7);
}

.lm-guided__field {
    display: grid;
    grid-template-columns: minmax(0, 18rem) 1fr;
    align-items: center;
    gap: .25rem .75rem;
    min-width: 0;
}

.lm-guided__input {
    position: relative;
}

.lm-guided__input input {
    padding-right: 2.6rem;
}

.lm-guided__code {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
}

.lm-guided__desc {
    font-size: .85rem;
    color: var(--bs-secondary-color, #6c757d);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-guided__row.is-done:not(.is-active) input {
    border-color: rgba(var(--bs-success-rgb, 25, 135, 84), .55);
}

.lm-guided__list {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

.lm-guided__list[hidden] {
    display: none;
}

.lm-guided__option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .75rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: .88rem;
}

.lm-guided__option .lm-special__chip {
    width: 1.4rem;
    height: 1.4rem;
}

.lm-guided__option span:last-child {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-guided__option:hover,
.lm-guided__option.is-highlighted {
    background: rgba(var(--bs-primary-rgb, 28, 99, 183), .08);
}

.lm-guided__option.is-highlighted {
    box-shadow: inset 3px 0 0 var(--bs-primary, #1c63b7);
}

.lm-guided__more {
    padding: .4rem .75rem;
    font-size: .78rem;
    color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 575.98px) {
    .lm-guided__row,
    .lm-guided__field {
        grid-template-columns: 1fr;
    }

    .lm-guided__label {
        padding-top: 0;
    }
}

@media (max-width: 575.98px) {
    .lm-special-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .lm-special__grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .lm-special-dialog[open] {
        animation: none;
    }

    .lm-special__tone {
        transition: none;
    }
}