/* ==========================================================================
   _SHOP.CSS - sharememories Theme Overrides
   Nur Regeln, die sich von der Default-shop.css unterscheiden oder neu sind.
   Wird nach shop.css geladen und ueberschreibt gezielt die Theme-spezifischen Styles.

   Ported from Shopware 6 theme NB24ThemeShareMemories
   Source: Y:/shopware6_git/custom/plugins/NB24ThemeShareMemories
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties — Brand-Tokens
   -------------------------------------------------------------------------- */
:root {
    --shop-primary:         #cdc6b4;
    --shop-primary-hover:   #b6af9e;
    --shop-primary-light:   #f5f2ec;
    --shop-secondary:       #92a478;
    --shop-secondary-hover: #798962;
    --shop-accent:          #cdc6b4;
    --shop-cta:             #cdc6b4;
    --shop-cta-hover:       #dbd4c3;
    --shop-cta-color:       #716954;
    --shop-dark:            #2F3027;
    --shop-text:            #2F3027;
    --shop-text-muted:      #6C6C66;
    --shop-line:            #c2bcbc;
    --shop-footer-bg:       #2F3027;
    --shop-footer-text:     #c2bcbc;
    --shop-footer-heading:  #ffffff;
    --shop-focus:           red;

    --shop-font-body:       'Noto Sans', sans-serif;
    --shop-font-heading:    'Prata', serif;
    --shop-font-accent:     'Reenie Beanie', cursive;

    --shop-radius:          5px;
    --shop-btn-height:      40px;
}

/* --------------------------------------------------------------------------
   2. @font-face — local woff2 (DSGVO-konform, kein externer Request)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../../fonts/noto-sans-light.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/noto-sans-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/noto-sans-semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/noto-sans-bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Prata';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/prata-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Reenie Beanie';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/reenie-beanie-regular.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   3. Globals — Body, Typografie, Links, Focus
   -------------------------------------------------------------------------- */
body {
    font-family: var(--shop-font-body);
    background-color: #fff;
    font-size: 16px;
    color: var(--shop-text);
}

h1, h2, h3, h4 {
    font-family: var(--shop-font-heading);
    color: var(--shop-text);
}

h1 { font-size: 30px; line-height: 40px; }
h2 { font-size: 23px; line-height: 30px; }
h3 { font-size: 20px; line-height: 27px; }
h4 { font-size: 18px; line-height: 27px; }

@media (max-width: 575.98px) {
    h1 { font-size: 23px; line-height: 30px; }
    h2 { font-size: 20px; line-height: 27px; }
    h3 { font-size: 18px; line-height: 27px; }
    h4 {
        font-family: var(--shop-font-body);
        font-size: 16px;
        font-weight: 700;
        line-height: 25px;
    }
}

p {
    font-family: var(--shop-font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 25px;
    color: var(--shop-text);
}

a {
    color: var(--shop-text);
}
a:hover {
    color: var(--shop-text-muted);
}

*:focus-visible {
    box-shadow: unset !important;
    border-color: var(--shop-focus);
    outline: 1px auto !important;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    height: var(--shop-btn-height);
    font-family: var(--shop-font-body);
    box-shadow: unset;
    border-radius: var(--shop-radius);
    font-weight: 400;
    color: var(--shop-text);
}

.btn:hover {
    color: var(--shop-text);
}

.btn-primary {
    color: #fff;
    background-color: var(--shop-primary);
    border-color: var(--shop-primary);
    padding-left: 25px;
    padding-right: 25px;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--shop-primary-hover);
    border-color: var(--shop-primary-hover);
    color: #fff;
}

.btn-primary-clear {
    color: var(--shop-primary);
    background-color: #fff;
    border: 1px solid var(--shop-primary);
    padding-left: 25px;
    padding-right: 25px;
}
.btn-primary-clear:hover {
    background-color: var(--shop-primary);
    color: #fff;
}

.btn-buy {
    color: #fff;
    background-color: var(--shop-secondary);
    border-color: var(--shop-secondary);
    font-weight: 700;
}
.btn-buy:hover {
    color: #fff;
    background-color: var(--shop-secondary-hover);
    border-color: var(--shop-secondary-hover);
}

.btn-cta {
    color: var(--shop-cta-color);
    background-color: var(--shop-cta);
    border-color: var(--shop-cta);
    padding-left: 25px;
    padding-right: 25px;
}
.btn-cta:hover {
    background-color: var(--shop-cta-hover);
    border-color: var(--shop-cta-hover);
    color: var(--shop-cta-color);
}

.btn-cta-clear {
    color: var(--shop-cta);
    background-color: #fff;
    border: 1px solid var(--shop-cta);
    padding-left: 25px;
    padding-right: 25px;
}
.btn-cta-clear:hover {
    background-color: var(--shop-cta-hover);
    border-color: var(--shop-cta-hover);
    color: var(--shop-cta-color);
}

/* --------------------------------------------------------------------------
   5. Container & Breadcrumb
   -------------------------------------------------------------------------- */
.container-main .cms-breadcrumb {
    background-color: #fff;
}
.container-main .breadcrumb a {
    text-decoration: none;
}
.container-main .breadcrumb-title {
    color: #000;
}

.category-listing-header {
    text-align: center;
}
h2.category-listing-header {
    margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.shop-topbar {
    background-color: var(--shop-primary-light);
    color: var(--shop-text);
    font-size: 14px;
    padding: 8px 0;
}

.shop-header {
    background-color: #fff;
    border-bottom: none;
}

/* Mobile: sticky + dezenter Drop-Shadow.
   Desktop bekommt das nicht — dort uebernimmt die sticky-top Navbar. */
@media (max-width: 991.98px) {
    .shop-header {
        position: sticky;
        top: 0;
        z-index: 1020;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
}

/* 3-Spalten-Grid. Desktop: 1fr auto 1fr → Logo am absoluten Seiten-Mittelpunkt
   (leere linke 1fr-Spalte balanciert den Icon-Cluster rechts).
   Mobile: auto 1fr auto → Logo zentriert in der Restbreite zwischen Hamburger
   und Icon-Cluster (visuell mittig in der nutzbaren Flaeche, nicht am
   absoluten Mittelpunkt). */
.shop-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 0;
    gap: 8px;
}
.shop-header-inner > .shop-header-mobile-toggle {
    grid-column: 1;
    justify-self: start;
}
.shop-header-inner > .shop-header-logo {
    grid-column: 2;
    justify-self: center;
}
.shop-header-inner > .shop-header-icons {
    grid-column: 3;
    justify-self: end;
}

@media (max-width: 991.98px) {
    .shop-header-inner {
        grid-template-columns: auto 1fr auto;
    }
}

@media (min-width: 992px) {
    .shop-header-inner {
        padding: 16px 0;
    }
}

/* Desktop: wide horizontal Logo (logo-dunkel.svg, Aspekt ~9.6:1) */
.shop-header-logo-desktop {
    max-height: 60px;
    width: auto;
}

/* Mobile: separates kompaktes Logo (logo-mobile.svg, Aspekt ~2.7:1).
   Passt zentriert in die mittlere Grid-Spalte ohne Overflow. */
.shop-header-logo-mobile {
    display: block;
    max-height: 36px;
    max-width: 100%;
    width: auto;
}

.shop-header-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--shop-text);
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.shop-header-icon:hover {
    background-color: var(--shop-primary-light);
    color: var(--shop-text);
}
.shop-header-icon img {
    width: 22px;
    height: 22px;
}

/* Collapsible Search Panel — panel-level only.
   Input/button styling kommt aus dem Default (.shop-search-main … input/button):
   gerundeter Pill-Container, borderless Input, Pill-Button mit Margin.
   Eigene Overrides hier wuerden mit overflow:hidden + border-radius:50px
   des Default-Containers kollidieren. */
.shop-header-search-collapse {
    background-color: #fff;
}
.shop-header-search-collapse .shop-search-wrapper {
    max-width: 640px;
    margin: 0 auto;
}

/* Kein rechteckiger Focus-Outline auf dem inneren Input — der Pill-Container
   zeigt den Focus-State bereits ueber .shop-search-main:focus-within. Defeats
   das globale *:focus-visible{outline:1px auto !important} aus Section 3. */
.shop-search-main input:focus,
.shop-search-main input:focus-visible {
    outline: none !important;
}

/* --------------------------------------------------------------------------
   6b. Navigation (Mega-Menu-Struktur bleibt, Hero-Bilder weg)
   -------------------------------------------------------------------------- */
/* Navbar selber: feiner Trenner statt Default-Schatten */
.shop-navbar {
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Top-Level Hero-Bilder ausblenden — Mega-Menu im Hover bleibt unberuehrt */
.shop-mainnav-img,
.shop-mainnav-img-placeholder {
    display: none;
}

/* Spacing kompensieren, da 100px Bild-Bereich wegfaellt */
.shop-mainnav-item {
    padding: 16px 0;
}

/* Theme-dark Schrift statt der Default-Erdtoene (#5e503e / #9b8467) */
.shop-mainnav-label {
    color: var(--shop-text);
    font-family: var(--shop-font-heading);
    font-size: 1rem;
    line-height: 1.4;
}
.shop-mainnav-sublabel {
    color: var(--shop-text-muted);
    font-family: var(--shop-font-body);
}

/* Hover-Farbe: --shop-text-muted (#6C6C66) — matched die Shopware-SCSS
   a:hover Regel. Bessere Lesbarkeit auf Weiss als das helle --shop-primary
   Beige. Active-State bleibt auf --shop-primary fuer staerkeren On-Page-
   Indikator (mit Beige-Light bg). */
.shop-mainnav-link:hover .shop-mainnav-label,
.shop-mainnav-link:hover .shop-mainnav-sublabel,
.shop-mainnav-item.has-mega:hover .shop-mainnav-label,
.shop-mainnav-item.has-mega:hover .shop-mainnav-sublabel {
    color: var(--shop-text-muted);
}
.shop-mainnav-item.active .shop-mainnav-label,
.shop-mainnav-item.active .shop-mainnav-sublabel {
    color: var(--shop-primary);
}

/* Hover- und Active-bg vom Default kappen — Nav bleibt vollstaendig transparent.
   Default hat .shop-mainnav-item.has-mega:hover{bg:#f9f6f1} und
   .shop-mainnav-item.active{bg:#f5f1ec} — beides hier ueberschrieben. */
.shop-mainnav-item.has-mega:hover,
.shop-mainnav-item.active {
    background-color: transparent;
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.shop-footer {
    background-color: var(--shop-footer-bg);
    color: var(--shop-footer-text);
    padding: 48px 0 24px;
}

.shop-footer a {
    color: var(--shop-footer-text);
    text-decoration: none;
}
.shop-footer a:hover {
    color: var(--shop-footer-heading);
    text-decoration: underline;
}

/* Cross-channel logos (existiert aus notizblock24) */
.shop-footer-channels {
    text-align: center;
    margin-bottom: 32px;
    font-size: 14px;
}
.shop-footer-channels span {
    margin: 0 8px;
}

/* Accordion */
.shop-footer-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--shop-footer-text);
    --bs-accordion-border-color: rgba(255, 255, 255, 0.1);
    --bs-accordion-btn-color: var(--shop-footer-heading);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--shop-footer-heading);
    --bs-accordion-active-bg: transparent;
}
.shop-footer-accordion .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
}
.shop-footer-accordion .accordion-item:last-child {
    border-bottom: none;
}
.shop-footer-accordion .accordion-button {
    font-family: var(--shop-font-heading);
    font-size: 20px;
    color: var(--shop-footer-heading);
    background-color: transparent;
    padding: 16px 0;
    box-shadow: none;
}
/* Mobile: horizontaler Seiten-Padding aufs Footer-Container-Element selbst —
   das gibt ALLEN Sektionen (Channels, Accordion, Logo, Copyright, Trusted
   Shops) einen einheitlichen Indent. Accordion-Button/Body behalten 0
   horizontales Padding (Bootstrap-Default), damit ihre Inhalte am gleichen
   Indent wie alle anderen Sektionen starten. */
@media (max-width: 767.98px) {
    .shop-footer > .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.shop-footer-accordion .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--shop-footer-heading);
    box-shadow: none;
}
.shop-footer-accordion .accordion-button::after {
    filter: invert(1) opacity(0.7);
}
.shop-footer-accordion .accordion-body {
    padding: 0 0 16px;
    color: var(--shop-footer-text);
}

.shop-footer-links {
    margin: 0;
    padding: 0;
}
.shop-footer-links li {
    padding: 4px 0;
}

.shop-footer-phone {
    font-size: 18px;
    color: var(--shop-footer-heading);
}
.shop-footer-phone a {
    color: var(--shop-footer-heading);
    text-decoration: none;
}

.shop-footer-payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.shop-footer-payment-icons img,
.shop-footer-payment-icons .footer-logo {
    height: 24px;
    width: auto;
}

/* Centered light logo + copyright */
.shop-footer-logo {
    max-height: 48px;
    width: auto;
}

.shop-footer-copyright {
    font-size: 13px;
    color: var(--shop-footer-text);
    opacity: 0.7;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Desktop: render accordion as side-by-side columns */
@media (min-width: 768px) {
    .shop-footer-accordion {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
    .shop-footer-accordion .accordion-item {
        border: 0;
    }
    .shop-footer-accordion .accordion-button {
        pointer-events: none;
        cursor: default;
    }
    .shop-footer-accordion .accordion-button::after {
        display: none;
    }
    .shop-footer-accordion .accordion-collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
}

/* --------------------------------------------------------------------------
   8. Produkt-Detail
   Default DOM bleibt unangetastet — die default-CSS verwendet teils Farben,
   die im ShareMemories-Kontext schlecht lesbar sind (Preis in --shop-primary
   == helles Beige) oder zu wenig Bedeutung haben (Buy-Button in CTA-Beige).
   Hier nur das, was sichtbar stoert.
   -------------------------------------------------------------------------- */

/* H1 groesser auf der Detailseite — der Default ist 1.4rem (zu klein fuer
   einen Produkt-Hero). 28-30px wirkt wertiger und matched die heading-skala
   aus Section 3. */
.shop-details .shop-details-heading h1 {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

/* Beschreibungstext: dunkler statt grau, fuer bessere Lesbarkeit.
   Top-Margin, weil der Block jetzt direkt unter der Galerie sitzt und
   sonst an den Slider-Thumbnails klebt. */
.shop-details-info {
    color: var(--shop-text);
    margin-top: 1.5rem;
}

/* Gallery: weisser Hintergrund statt --shop-gray-100, damit Produktfotos
   nicht in einem grauen Kasten sitzen */
.shop-details-gallery .details-slider {
    background: #fff;
}

/* Preis-Box: weg vom grauen Kasten, hin zu einem dezenten Border-Rahmen
   mit transparentem Hintergrund. Wirkt luftiger. */
.shop-price-quantity-box {
    background: transparent;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
}

/* Preis-Wert: --shop-primary (helles Beige) ist unlesbar gegen Weiss.
   Auf --shop-text wechseln (Theme-Dark) — bleibt elegant, ist gut lesbar. */
.shop-pq-price-value {
    color: var(--shop-text);
}

/* Buy-Button: Default nutzt --shop-cta (Beige) — fuer den primaeren CTA
   zu unauffaellig. ShareMemories will Sage-Grun (--shop-secondary), das
   matched die btn-buy-Konvention aus der Buttons-Section. */
.shop-btn-cart {
    background: var(--shop-secondary);
}
.shop-btn-cart:hover {
    background: var(--shop-secondary-hover);
}

/* Service-Info-Text: gray-600 ist zu blass. text-muted ist auch grau,
   aber im Theme-Kontext konsistent mit dem Rest des Themes. */
.shop-service-info-text {
    color: var(--shop-text-muted);
}

/* --- Format-Variant-Tiles --------------------------------------------------
   Grid mit Format-Tiles. Jede Tile ist Icon + Label, optional als Link.
   Aktives Format hat einen umschliessenden Border. Daten kommen aus
   Products::get_format_variants() (server-side gecached). */
.shop-format-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}
.shop-format-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 8px;
    border: 1px solid transparent;
    border-radius: var(--shop-radius);
    text-decoration: none;
    color: var(--shop-text);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    text-align: center;
}
.shop-format-tile:hover {
    color: var(--shop-text);
    text-decoration: none;
    background-color: var(--shop-primary-light);
}
.shop-format-tile.is-active {
    border-color: var(--shop-text);
    cursor: default;
}
.shop-format-tile-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}
.shop-format-tile-label {
    display: block;
    font-family: var(--shop-font-body);
    font-size: 13px;
    line-height: 1.3;
    color: var(--shop-text);
}
.shop-format-tile.is-active .shop-format-tile-label {
    font-weight: 600;
}

/* --- Variant Groups als horizontale Rows -----------------------------------
   Im Default rendern Variantengruppen als Label oben + Select darunter. Fuer
   ShareMemories: eine Zeile pro Gruppe — Icon links, Label, Wert rechts,
   eigene Chevron. Default-Bootstrap-form-select wird durchgereicht, wir
   ueberschreiben nur Optik. */
.shop-variants .shop-variant-group {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--shop-line);
    margin-bottom: 0;
}
.shop-variants .shop-variant-group:first-child {
    border-top: 1px solid var(--shop-line);
}

.shop-variant-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-text);
}
.shop-variant-icon svg {
    display: block;
}

.shop-variants .shop-variant-group label {
    flex-shrink: 0;
    margin: 0;
    font-family: var(--shop-font-body);
    font-weight: 600;
    color: var(--shop-text);
}

/* Native Select Fallback (sichtbar wenn JS nicht laeuft):
   transparent + borderless + eigener Chevron, rechts ausgerichtet. */
.shop-variants .shop-variant-group select.form-select {
    margin-left: auto;
    width: auto;
    border: none;
    background-color: transparent;
    color: var(--shop-text);
    text-align: right;
    -moz-text-align-last: right;
    text-align-last: right;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 24px 0 0;
    font-family: var(--shop-font-body);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F3027' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
}
.shop-variants .shop-variant-group select.form-select:focus {
    box-shadow: none;
    border: none;
    outline: none;
}

/* JS-enhanced Variant Dropdown (variant-dropdown.js):
   Native <select> wird via .shop-variant-select-hidden ausgeblendet,
   stattdessen rendert das JS einen Trigger + abs. positioniertes Panel. */
.shop-variant-select-hidden {
    display: none !important;
}

.shop-variant-dropdown {
    position: relative;
    margin-left: auto;
}

.shop-variant-dropdown-trigger {
    background: transparent;
    border: none;
    color: var(--shop-text);
    font-family: var(--shop-font-body);
    font-size: 16px;
    text-align: right;
    cursor: pointer;
    padding: 0 24px 0 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F3027' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    transition: background-image 0.15s ease;
}
.shop-variant-dropdown.is-open .shop-variant-dropdown-trigger {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F3027' stroke-width='2'><polyline points='18 15 12 9 6 15'/></svg>");
}
.shop-variant-dropdown-trigger:focus-visible {
    outline: none;
}

.shop-variant-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    max-width: 360px;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    list-style: none;
    padding: 4px;
    margin: 0;
    z-index: 100;
    display: none;
}
.shop-variant-dropdown.is-open .shop-variant-dropdown-panel {
    display: block;
}

.shop-variant-dropdown-option {
    padding: 6px 14px;
    border-radius: calc(var(--shop-radius) - 1px);
    cursor: pointer;
    color: var(--shop-text);
    font-family: var(--shop-font-body);
    font-size: 14px;
    text-align: right;
    transition: background-color 0.1s ease;
}
.shop-variant-dropdown-option:hover {
    background-color: var(--shop-primary-light);
}
.shop-variant-dropdown-option.is-selected {
    background-color: var(--shop-line);
    color: var(--shop-text);
}
.shop-variant-dropdown-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Anzahl-Row (uebernimmt .shop-variant-group Layout) --------------------
   Die details-menge-dropdown JS-Logik bleibt unveraendert; wir stylen den
   Trigger so dass er aussieht wie .shop-variant-dropdown-trigger und das
   Panel wie .shop-variant-dropdown-panel. */
.shop-anzahl-row .details-menge-dropdown {
    position: relative;
    margin-left: auto;
}
.shop-anzahl-row .details-menge-trigger {
    background: transparent;
    border: none;
    color: var(--shop-text);
    font-family: var(--shop-font-body);
    font-size: 16px;
    text-align: right;
    cursor: pointer;
    padding: 0 24px 0 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F3027' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
}
.shop-anzahl-row .details-menge-dropdown.is-open .details-menge-trigger {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F3027' stroke-width='2'><polyline points='18 15 12 9 6 15'/></svg>");
}
/* Inline-Chevron-SVG aus dem Default-Markup verstecken — Trigger hat
   eigenen Chevron via background-image */
.shop-anzahl-row .details-menge-trigger > svg {
    display: none;
}
.shop-anzahl-row .details-menge-trigger:focus-visible {
    outline: none;
}

/* Floating-Panel im Stil von .shop-variant-dropdown-panel */
.shop-anzahl-row .details-menge-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    padding: 4px;
    margin: 0;
    z-index: 100;
    max-height: none;
    display: none;
}
.shop-anzahl-row .details-menge-dropdown.is-open .details-menge-panel {
    display: block;
}

/* Tabelle drinnen: borderless, keine sichtbare thead, zwei Spalten
   (Menge | Einzelpreis), Gesamtpreis-Spalte versteckt. */
.shop-anzahl-row .details-menge-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.shop-anzahl-row .details-menge-table thead {
    display: none;
}
.shop-anzahl-row .details-menge-table td {
    padding: 6px 14px;
    border: none;
    font-family: var(--shop-font-body);
    font-size: 14px;
    color: var(--shop-text);
}
.shop-anzahl-row .details-menge-table td:first-child {
    text-align: left;
}
.shop-anzahl-row .details-menge-table td:nth-child(2) {
    text-align: right;
}
/* "a "-Praefix vor dem Einzelpreis */
.shop-anzahl-row .details-menge-table td:nth-child(2)::before {
    content: "\00e0 ";
}
/* Gesamtpreis-Spalte ausblenden */
.shop-anzahl-row .details-menge-table th:nth-child(3),
.shop-anzahl-row .details-menge-table td:nth-child(3) {
    display: none;
}
.shop-anzahl-row .details-menge-row {
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.shop-anzahl-row .details-menge-row > td {
    border-radius: 0;
}
.shop-anzahl-row .details-menge-row:first-child > td:first-child {
    border-top-left-radius: calc(var(--shop-radius) - 1px);
}
.shop-anzahl-row .details-menge-row:first-child > td:nth-child(2) {
    border-top-right-radius: calc(var(--shop-radius) - 1px);
}
.shop-anzahl-row .details-menge-row:last-child > td:first-child {
    border-bottom-left-radius: calc(var(--shop-radius) - 1px);
}
.shop-anzahl-row .details-menge-row:last-child > td:nth-child(2) {
    border-bottom-right-radius: calc(var(--shop-radius) - 1px);
}
.shop-anzahl-row .details-menge-row:hover > td {
    background-color: var(--shop-primary-light);
}
.shop-anzahl-row .details-menge-row.is-active > td {
    background-color: var(--shop-line);
}
.shop-anzahl-row .details-menge-row > td strong {
    font-weight: 400;
}

/* Anzahl-Wrapper visuell mit dem vorigen Variants-Block verschmelzen:
   - vorangehende .shop-variants verliert ihren margin-bottom (default 1.5rem)
   - die erste Row im Anzahl-Wrapper verliert ihren border-top
   So sieht Anzahl wie eine ganz normale weitere Variantenzeile aus, statt
   wie ein separater Block. */
.shop-variants:has(+ .shop-anzahl-row-wrapper) {
    margin-bottom: 0;
}
.shop-anzahl-row-wrapper .shop-variant-group:first-child {
    border-top: none;
}

/* --- Designer-CTA-Button ("Jetzt gestalten") -------------------------------
   Default rendert eine ueppige Beschriftungs-Komposition (Hauptzeile +
   <small> Subtitle + Icons). Wir kuerzen das Markup in details.php auf
   reinen Text und stylen den Button minimal: vollbreiter, beiger CTA mit
   zentrierter Prata-Schrift, kein Schatten, kein Border. */
.designer-article-teaser-button {
    width: 100%;
    background: var(--shop-primary);
    color: var(--shop-text);
    border: none;
    border-radius: var(--shop-radius);
    padding: 22px 24px;
    font-family: var(--shop-font-heading);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.designer-article-teaser-button:hover {
    background: var(--shop-primary-hover);
    color: var(--shop-text);
    text-shadow: none;
}

/* --------------------------------------------------------------------------
   9. Bewertungen (Reviews)
   Default verwendet durchgaengig Pink (#e91e8c) als Akzent. Hier auf
   ShareMemories-Palette ummappen:
     - Sterne in --shop-text (dunkles Oliv, sophisticated)
     - Buttons in --shop-primary (Beige)
     - Review-Cards zu flachen Trennern
     - Distribution-Bar / Helpful-Button / Pending-Block in Theme-Farben
   -------------------------------------------------------------------------- */

/* Section-Heading: h3 erbt schon Prata aus Section 3, hier nur Farb-Anker */
.reviews-title {
    color: var(--shop-text);
}

/* Durchschnittsnote: grosse Zahl in Prata */
.reviews-average-number {
    font-family: var(--shop-font-heading);
    color: var(--shop-text);
}
.reviews-count {
    color: var(--shop-text-muted);
}

/* Sterne: durchgaengig --shop-text statt pink */
.star-icon.star-full,
.star-icon.star-mini {
    fill: var(--shop-text);
    color: var(--shop-text);
}
.star-icon.star-half {
    color: var(--shop-text);
}
.star-icon.star-empty {
    stroke: var(--shop-text);
}
.review-stars .star-icon {
    fill: var(--shop-text);
    color: var(--shop-text);
}

/* Sterne-Input (Bewertungs-Formular) */
.star-rating-input label .star-icon {
    stroke: var(--shop-text);
}
.star-rating-input label.active .star-icon {
    fill: var(--shop-text);
    stroke: var(--shop-text);
}

/* Verteilungs-Balken */
.reviews-bar {
    background: var(--shop-primary-light);
}
.reviews-bar-fill {
    background: var(--shop-text);
}
.reviews-bar-label,
.reviews-bar-percent {
    color: var(--shop-text-muted);
}

/* "Bewertung schreiben" Button: beige Primary statt Pink */
.btn-review-write {
    background: var(--shop-primary);
    color: var(--shop-text);
    font-family: var(--shop-font-heading);
    font-weight: 500;
    border-radius: var(--shop-radius);
}
.btn-review-write:hover {
    background: var(--shop-primary-hover);
    color: var(--shop-text);
}

/* Review-Liste: keine Karten mehr, sondern flache Trenner */
.review-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--shop-line);
    border-radius: 0;
    padding: 20px 0;
}
.review-item:last-child {
    border-bottom: none;
}
.review-title {
    font-family: var(--shop-font-heading);
    color: var(--shop-text);
}
.review-author {
    color: var(--shop-text);
}
.review-meta {
    color: var(--shop-text-muted);
}
.review-text {
    color: var(--shop-text);
}

/* Verified Badge: sage statt material-grun */
.review-verified {
    background: rgba(146, 164, 120, 0.15);
    color: var(--shop-secondary-hover);
}

/* Helpful-Button: dezenter, Theme-konform */
.review-helpful-btn {
    background: transparent;
    border: 1px solid var(--shop-line);
    color: var(--shop-text-muted);
    font-family: var(--shop-font-body);
}
.review-helpful-btn:hover:not(.disabled):not(.voted) {
    background: var(--shop-primary);
    border-color: var(--shop-primary);
    color: var(--shop-text);
}
.review-helpful-btn:hover:not(.disabled):not(.voted) svg {
    stroke: var(--shop-text);
}
.review-helpful-btn.voted {
    background: var(--shop-primary-light);
    border-color: var(--shop-primary);
    color: var(--shop-text);
}

/* Pending-Bewertung: ruhige Beige-Toene statt material-amber */
.review-own-pending {
    background: var(--shop-primary-light);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
}
.review-own-pending-icon {
    color: var(--shop-cta-color);
}
.review-own-pending-text {
    color: var(--shop-text);
}

/* Empty-State: passend zur ruhigen Asthetik */
.reviews-empty {
    background: var(--shop-primary-light);
    color: var(--shop-text-muted);
    border-radius: var(--shop-radius);
}

/* Form-Required-Marker (Pflicht-Stern): Theme-Dark statt pink */
.review-form-rating .required {
    color: var(--shop-text);
}

/* --------------------------------------------------------------------------
   10. Listing / Kategorie
   Default verwendet --shop-gray-* fuer Texte/Borders und --shop-primary
   fuer Preise. Auf hellem Beige-Hintergrund ist --shop-primary unlesbar
   (gleicher Trick wie auf der Produkt-Detail-Seite). Hier auf
   ShareMemories-Palette mappen: Texte in --shop-text/--shop-text-muted,
   Borders in --shop-line, Preise in --shop-text, Stern-Akzent in sage.
   -------------------------------------------------------------------------- */

/* Kategorie-Header */
.listing-title {
    color: var(--shop-text);
}
.listing-subheadline,
.listing-description {
    color: var(--shop-text-muted);
}

/* Subcategory-Karten — sanfter Hover ohne Theben-Schatten */
.listing-subcat-card {
    border: 1px solid transparent;
}
.listing-subcat-card:hover {
    border-color: var(--shop-line);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.listing-subcat-card-title {
    color: var(--shop-text);
}

/* Toolbar (Anzahl + Sortierung) */
.listing-toolbar {
    border-bottom: 1px solid var(--shop-line);
}
.listing-count,
.listing-sort-label {
    color: var(--shop-text-muted);
}
.listing-sort-select {
    border: 1px solid var(--shop-line);
    color: var(--shop-text);
    font-family: var(--shop-font-body);
}

/* Produkt-Karten */
.listing-card {
    border: 1px solid transparent;
}
.listing-card:hover {
    border-color: var(--shop-line);
}
/* Galerie-Hintergrund weiss statt grauer Kasten — wie auf der Detailseite.
   Zusaetzlich eigene Rundung + kleine Margin zu den Karten-Raendern, damit
   alle vier Ecken visuell rund werden — wichtig bei Produktbildern, deren
   Inhalt bis an die eigenen Raender geht und sonst als scharfes Rechteck
   gegen den Card-Body abschliessen wuerden. */
.listing-card-image {
    background: #fff;
    margin: 0.5rem 0.5rem 0;
    border-radius: var(--shop-radius);
    overflow: hidden;
}
.listing-card-title {
    color: var(--shop-text);
    font-size: 1rem;
}
.listing-card-text {
    color: var(--shop-text-muted);
}
/* Listen-Haken in Listing-Card: sage (--shop-secondary) als Akzent */
.listing-card-text ul li::before,
.listing-card-text ol li::before {
    color: var(--shop-secondary);
}
/* Preis: --shop-primary (helles Beige) waere unlesbar — auf --shop-text */
.listing-card-price {
    color: var(--shop-text);
}
.listing-card-price-hint {
    color: var(--shop-text-muted);
}
/* Listing-Karten-Sterne: dunkles Oliv wie in Section 9 */
.listing-card-stars .star {
    color: var(--shop-text);
}
.listing-card-stars .star-empty {
    color: var(--shop-line);
}
.listing-card-price-netto {
    color: var(--shop-text-muted);
}

/* Pagination */
.listing-pagination li a,
.listing-pagination li span {
    border: 1px solid var(--shop-line);
    color: var(--shop-text);
    background: #fff;
}
.listing-pagination li a:hover {
    background: var(--shop-primary-light);
    border-color: var(--shop-line);
}
.listing-pagination li span.active {
    background: var(--shop-primary);
    color: var(--shop-text);
    border-color: var(--shop-primary);
}

/* Empty-State */
.listing-empty {
    color: var(--shop-text-muted);
}

/* Cross-Selling + Recently-Viewed: alte Styles entfernt, nutzen jetzt .product-slider-* und .listing-card */

/* --------------------------------------------------------------------------
   11. ShareMemories Produkt-Card (.sm-card)
   Eigenständige Card für das SM-Theme: großes Bild, split-Titel
   (Design-Name mit kursivem Akzent + Produktformat als Untertitel),
   zentriert, kein Preis, kein Listing-Text. Herzchen-Icon absolut.
   -------------------------------------------------------------------------- */
.sm-card {
    display: block;
    text-decoration: none;
    color: var(--shop-text);
    border-radius: var(--shop-radius);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sm-card:hover {
    color: var(--shop-text);
    text-decoration: none;
    transform: scale(1.03);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.sm-card-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--shop-primary-light);
}
.sm-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sm-card-noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--shop-line);
}

.sm-card-body {
    padding: 14px 8px 18px;
    text-align: center;
}

.sm-card-design {
    font-family: var(--shop-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--shop-text);
    margin: 0 0 2px;
}
.sm-card-design em {
    font-family: var(--shop-font-heading);
    font-style: italic;
    font-weight: 400;
}

.sm-card-format {
    font-family: var(--shop-font-body);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--shop-text-muted);
}