/* Aufbau der web2print-Produktseite.

   Die Klasse `w2p-produkt` setzt das Plugin an jede Seite mit Vorlage, ohne
   Einstellung: links die Galerie (40 %), rechts der Shopteil (60 %) mit
   Designer, Preis und Warenkorb. Flatsome baut Spalten (.col), das
   WooCommerce-Standardlayout schwebende Bloecke (div.images, div.summary).
   Schmal stehen beide untereinander, wie das Theme es vorsieht. */
@media (min-width: 850px) {
    body.w2p-produkt div.product .product-gallery.col,
    body.w2p-produkt div.product .col.product-gallery {
        flex-basis: 40% !important; max-width: 40% !important; width: 40% !important;
    }
    body.w2p-produkt div.product .product-info.col,
    body.w2p-produkt div.product .col.product-info {
        flex-basis: 60% !important; max-width: 60% !important; width: 60% !important;
    }
    body.w2p-produkt div.product div.images.woocommerce-product-gallery:not(.col) { width: 38% !important; }
    body.w2p-produkt div.product div.summary:not(.col) { width: 58% !important; }
}

/* Im Shopteil neben der Galerie steht der Designer untereinander - Buehne
   ueber Formular. Nebeneinander ergaebe er mit der Galerie drei Spalten. */
body.w2p-produkt .w2p-shop-designer .w2p-d-lage { flex-direction: column; }
body.w2p-produkt .w2p-shop-designer .w2p-d-rechts { flex-basis: auto; width: 100%; max-width: none; }

/* Shop-Formular fuegt sich ins Theme: Kastenoptik weg, Auswahlzeilen wie
   die Woo-Variantenzeile (Label links), Schrift und Feld-Metriken erbt
   das Theme - hier wird nur zurueckgenommen, nicht gestaltet. */
.w2p-shop-designer .w2p-d-karte {
    border: none; background: transparent; box-shadow: none;
    padding: .2em 0; margin-bottom: 1.2em;
}
.w2p-shop-designer .w2p-d-karte h4 {
    margin: 0 0 .35em; font-family: inherit; font-size: inherit;
}
.w2p-shop-designer select,
.w2p-shop-designer input[type="text"] { width: 100%; font-family: inherit; }
/* Einheitliche Beschriftungen im Shop; Motiv- und Auswahlkacheln bleiben erhalten. */
.w2p-shop-designer { --w2p-beschriftung: #3c434a; }
.w2p-shop-designer .w2p-d-karte h4,
.w2p-shop-designer .w2p-d-eingabe > label,
.w2p-shop-designer .w2p-d-karte > label {
    color: var(--w2p-beschriftung); font-size: inherit; font-weight: 600;
    line-height: 1.4; text-transform: none; letter-spacing: normal;
}
.w2p-shop-designer .w2p-d-eingabe > label *,
.w2p-shop-designer .w2p-d-karte h4 * { color: inherit !important; }
.w2p-shop-designer .w2p-d-tun,
.w2p-shop-designer .w2p-d-aufpreis { color: var(--w2p-beschriftung); }
.w2p-shop-designer select { color: var(--w2p-beschriftung); font-size: inherit; min-height: 2.5em; }
/* Feste Beschriftungsspalte statt max-content: Jede Liste ist eine eigene
   Karte, und max-content wird je Karte gerechnet - bei "Psalmliste-innen-
   links" neben "Psalmliste-innen-rechts" waren die Klappfelder darum
   verschieden breit (08.09.2026). Eine feste Breite richtet sie ueber alle
   Karten aus; lange Beschriftungen umbrechen innerhalb der Spalte. */
.w2p-shop-designer .w2p-d-karte:has(> select[data-liste]) {
    display: grid; grid-template-columns: 13em 1fr;
    align-items: center; column-gap: .75em;
}
.w2p-shop-designer .w2p-d-karte:has(> select[data-liste]) h4 {
    margin: 0; font-size: inherit; font-weight: 600; line-height: 1.4;
    padding-right: .5em; white-space: normal; overflow-wrap: anywhere;
}
.w2p-shop-designer .w2p-d-karte:has(> select[data-liste]) > :not(h4):not(select) {
    grid-column: 1 / -1;
}
.w2p-shop-designer .w2p-d-karte:has(> select[data-liste]) > select {
    margin-bottom: 0;
}