/* Markenpaket (Wagtail: Einstellungen -> Design).
   Wird nur geladen, wenn ein Paket gewählt ist; die Werte (--d-...) schreibt
   leyendeckers_base.html aus lut/design.py in die Seite.

   Alle Regeln stehen in :where(), damit sie dieselbe Gewichtung haben wie die
   Regeln in template.css, die sie ersetzen. So bleiben Navigation, Footer und
   alles andere mit eigenen Farben unberührt. */

/* --- Schriften ---------------------------------------------------------- */

:where(html[data-brand]) body,
:where(html[data-brand]) .tooltip,
:where(html[data-brand]) .popover {
    font-family: var(--d-font-text);
}

/* Nur h1-h4: h5/h6 nutzt das Theme für Kleinteiliges (Produktkarten, Widgets). */
:where(html[data-brand]) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
    font-family: var(--d-font-heading);
    letter-spacing: -.01em;
}

:where(html[data-heading="playfair"], html[data-heading="newsreader"]) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
    font-weight: 500;
    line-height: 1.15;
}

:where(html[data-heading="archivo"]) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
    font-weight: 800;
    font-stretch: 75%;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1;
}

/* --- Links -------------------------------------------------------------- */

:where(html[data-brand]) a,
:where(html[data-brand]) .btn-link {
    color: var(--d-link);
}

:where(html[data-brand]) a:hover,
:where(html[data-brand]) .btn-link:hover {
    color: var(--d-brand-hover);
}

/* TrendMan: Links haben Textfarbe, deshalb im Fließtext mit Akzent unterlegt. */
:where(html[data-brand="trendman"]) p > a:not(.btn):not(footer a) {
    box-shadow: inset 0 -.45em 0 var(--d-akzent);
}

:where(html[data-brand]) ::selection {
    background: var(--d-brand);
    color: var(--d-on-brand);
}

/* --- Buttons ------------------------------------------------------------ */

:where(html[data-brand]) .btn,
:where(html[data-brand]) .btn-lg,
:where(html[data-brand]) .btn-sm {
    border-radius: var(--d-btn-radius);
}

:where(html[data-brand]) .btn-brand,
:where(html[data-brand]) .btn-brand.disabled,
:where(html[data-brand]) .btn-brand:disabled {
    color: var(--d-on-brand);
    background-color: var(--d-brand);
    border-color: var(--d-brand);
}

:where(html[data-brand]) .btn-brand:hover,
:where(html[data-brand]) .btn-brand:not([disabled]):not(.disabled):active,
:where(html[data-brand]) .btn-brand:not([disabled]):not(.disabled).active {
    color: var(--d-on-brand);
    background-color: var(--d-brand-hover);
    border-color: var(--d-brand-hover);
}

:where(html[data-brand]) .btn-brand:focus,
:where(html[data-brand]) .btn-outline-brand:focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--d-brand) 40%, transparent);
}

:where(html[data-brand]) .btn-outline-brand,
:where(html[data-brand]) .btn-outline-brand.disabled,
:where(html[data-brand]) .btn-outline-brand:disabled {
    color: var(--d-brand);
    border-color: var(--d-brand);
}

:where(html[data-brand]) .btn-outline-brand:hover,
:where(html[data-brand]) .btn-outline-brand:not(:disabled):not(.disabled):active,
:where(html[data-brand]) .btn-outline-brand:not(:disabled):not(.disabled).active {
    color: var(--d-on-brand);
    background-color: var(--d-brand);
    border-color: var(--d-brand);
}

/* Der Bestellweg (Warenkorb, Login, Adresse, Zahlung) und "Anfrage senden"
   nutzen die Bootstrap-Klassen btn-primary statt btn-brand. */
:where(html[data-brand]) .btn-primary,
:where(html[data-brand]) .btn-primary.disabled,
:where(html[data-brand]) .btn-primary:disabled {
    color: var(--d-on-brand);
    background-color: var(--d-brand);
    border-color: var(--d-brand);
}

:where(html[data-brand]) .btn-primary:hover,
:where(html[data-brand]) .btn-primary:not([disabled]):not(.disabled):active,
:where(html[data-brand]) .btn-primary:not([disabled]):not(.disabled).active {
    color: var(--d-on-brand);
    background-color: var(--d-brand-hover);
    border-color: var(--d-brand-hover);
}

:where(html[data-brand]) .btn-outline-primary,
:where(html[data-brand]) .btn-outline-primary.disabled,
:where(html[data-brand]) .btn-outline-primary:disabled {
    color: var(--d-brand);
    border-color: var(--d-brand);
}

:where(html[data-brand]) .btn-outline-primary:hover,
:where(html[data-brand]) .btn-outline-primary:not(:disabled):not(.disabled):active,
:where(html[data-brand]) .btn-outline-primary:not(:disabled):not(.disabled).active {
    color: var(--d-on-brand);
    background-color: var(--d-brand);
    border-color: var(--d-brand);
}

:where(html[data-brand]) .btn-primary:focus,
:where(html[data-brand]) .btn-outline-primary:focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--d-brand) 40%, transparent);
}

/* --- Übrige Stellen mit der Theme-Farbe ---------------------------------- */

:where(html[data-brand]) .page-item.active .page-link,
:where(html[data-brand]) .badge-brand,
:where(html[data-brand]) .accordion-brand .accordion-item-header,
:where(html[data-brand]) .double-bounce1,
:where(html[data-brand]) .double-bounce2,
:where(html[data-brand]) .top-bar-cart > span > span,
:where(html[data-brand]) .comment-reply > a:hover,
:where(html[data-brand]) .comment-reply > a:focus,
:where(html[data-brand]) .tag-cloud > a:hover,
:where(html[data-brand]) .post-tags > a:hover,
:where(html[data-brand]) .owl-carousel .owl-dots .owl-dot > span {
    background-color: var(--d-brand);
    color: var(--d-on-brand);
}

:where(html[data-brand]) .bg-brand {
    background-color: var(--d-brand) !important;
}

:where(html[data-brand]) .text-brand {
    color: var(--d-brand) !important;
}

:where(html[data-brand]) .border-brand {
    border-color: var(--d-brand) !important;
}

:where(html[data-brand]) .page-item.active .page-link,
:where(html[data-brand]) .nav-tabs .nav-link.active,
:where(html[data-brand]) .nav-tabs .nav-item.show .nav-link,
:where(html[data-brand]) .owl-carousel .owl-dots .owl-dot.active,
:where(html[data-brand]) .owl-carousel .owl-dots .owl-dot:hover,
:where(html[data-brand]) .post-content blockquote:hover {
    border-color: var(--d-brand);
}

:where(html[data-brand]) :is(h1, h2, h3, h4, h5, h6) > a:is(:hover, :focus),
:where(html[data-brand]) .info-list a:is(:hover, :focus),
:where(html[data-brand]) .nav-tabs-icons .nav-link > span,
:where(html[data-brand]) .icon-box .icon-box-icon,
:where(html[data-brand]) .counter .counter-icon,
:where(html[data-brand]) .social-icons > li > a:is(:hover, :focus),
:where(html[data-brand]) .module-page-title .breadcrumb .breadcrumb-item > a:hover,
:where(html[data-brand]) .shop-single-item-rating a:hover,
:where(html[data-brand]) .widget a:is(:hover, :focus),
:where(html[data-brand]) .widget-search .search-button:hover,
:where(html[data-brand]) .nav-sidebar a:hover {
    color: var(--d-link);
}

/* --- Shop: Produktkarte --------------------------------------------------
   Markup: oscar/catalogue/partials/product.html. Einheitliche Bildfläche,
   Text linksbündig, Marke hervorgehoben. */

html[data-brand] .shop-grid-item {
    margin-bottom: 36px;
    text-align: left;
}

html[data-brand] .shop-item-thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    margin-bottom: 12px;
    border-radius: 12px;
    background: #f3f3f0;
}

html[data-brand] .shop-item-thumb > a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    box-shadow: none;
}

/* Produktbilder haben weißen Rand: multiply lässt ihn in der Fläche aufgehen */
html[data-brand] .shop-item-thumb img.thumbnail {
    max-width: 86%;
    max-height: 86%;
    width: auto;
    height: auto;
    border: 0;
    mix-blend-mode: multiply;
}

html[data-brand] .shop-item-thumb:hover img {
    opacity: 1;
    transform: scale(1.04);
}

html[data-brand] .shop-item-hidden {
    left: 10px;
    right: 10px;
    width: auto;
    padding-bottom: 10px;
}

html[data-brand] .shop-item-hidden > .btn {
    display: block;
    border-radius: 8px;
    padding: 10px;
    letter-spacing: 0;
    text-transform: none;
    font-size: .8125rem;
    background: rgba(255, 255, 255, .95);
}

html[data-brand] .shop-item-captions {
    text-align: left;
}

html[data-brand] .shop-item-title {
    font-family: var(--d-font-text);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    margin: 0 0 4px;
}

html[data-brand] .shop-item-title > br {
    display: none;
}

html[data-brand] .shop-item-colors {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 14px;
    margin-bottom: 8px;
    font-size: .75rem;
    color: #6b716d;
}

html[data-brand] .shop-item-colors > div {
    width: 12px !important;
    height: 12px !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

html[data-brand] .shop-item-brand {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1b1d1c;
}

html[data-brand] .shop-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .9375rem;
    color: #3a403c;
}

html[data-brand] .shop-item-captions h5 {
    font-family: var(--d-font-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
}

html[data-brand] .shop-item-captions .availability {
    margin: 0;
    font-size: .75rem;
    color: #6b716d;
}

html[data-brand] .shop-item-captions .availability.instock,
html[data-brand] .shop-item-captions .availability.available {
    display: none;
}

/* --- Shop: Produktseite ---------------------------------------------------
   Markup: oscar/catalogue/detail.html. Ruhigere Typografie, klare
   Farb- und Größenwahl, Kaufbutton in Markenfarbe. */

html[data-brand] .shop-single-item-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: 10px;
}

html[data-brand] .shop-single-item-title .shop-item-brand {
    font-family: var(--d-font-text);
    font-stretch: normal;
    font-size: .8125rem;
    letter-spacing: .08em;
    color: var(--d-link);
    margin-bottom: 6px;
}

html[data-brand] .shop-single-item-title > br {
    display: none;
}

html[data-brand] .shop-single-item > h2.m-b-0 {
    font-family: var(--d-font-text);
    font-stretch: normal;
    text-transform: none;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
}

html[data-brand] .shop-single-item > .availability {
    font-size: .875rem;
    color: #5d625f;
    margin-bottom: 18px;
}

/* "Farbe: …" und "Bitte wählen Sie eine Größe:" als Beschriftung statt Überschrift */
html[data-brand] .shop-single-item h3 {
    font-family: var(--d-font-text);
    font-stretch: normal;
    text-transform: none;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    margin: 18px 0 10px;
    padding-top: 16px;
    border-top: 1px solid #e6e4df;
}

html[data-brand] #colorOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html[data-brand] #colorOptions .btn {
    padding: 5px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: #f3f3f0;
    line-height: 0;
}

html[data-brand] #colorOptions .btn.active {
    border-color: #1b1d1c;
    background: #fff;
}

html[data-brand] #colorOptions .btn > div {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

html[data-brand] #sizeOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html[data-brand] #sizeOptions .btn {
    min-width: 58px;
    margin: 0 !important;
    padding: 12px 14px;
    border: 1px solid #d5d2cb !important;
    border-radius: 10px;
    background: #fff;
    color: #1b1d1c;
    font-size: .875rem;
    letter-spacing: 0;
    text-transform: none;
}

html[data-brand] #sizeOptions .btn:hover {
    border-color: #1b1d1c !important;
    background: #1b1d1c;
    color: #fff;
}

html[data-brand] .btn-add-to-basket {
    width: 100%;
    padding: 16px 24px;
    background: var(--d-brand);
    border-color: var(--d-brand);
    color: var(--d-on-brand);
    font-size: .9375rem;
    letter-spacing: 0;
    text-transform: none;
}

html[data-brand] .btn-add-to-basket:hover {
    background: var(--d-brand-hover);
    border-color: var(--d-brand-hover);
    color: var(--d-on-brand);
}

html[data-brand] .shop-single-item-description h2,
html[data-brand] #product_description h2 {
    font-size: 1.75rem;
}

html[data-brand] .shop-single-item h4,
html[data-brand] .shop-single-item-description h4 {
    font-family: var(--d-font-text);
    font-stretch: normal;
    text-transform: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

@media (max-width: 767px) {
    /* Beratung, Material und Pflegehinweise am Handy untereinander statt in zwei engen Spalten */
    html[data-brand] #main-container .module .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    html[data-brand] #colorOptions .btn > div {
        width: 30px !important;
        height: 30px !important;
    }
}