/*
 * STIERS – Handybreiten fließend
 *
 * Wird per media-Attribut nur unter 768 px geladen. Ab 768 px gilt unverändert
 * das Tablet-/Desktop-Layout.
 *
 * Die mobile Fassung ist eine 402 px breite Figma-Vorlage: viele Sektionen haben
 * feste Höhen und absolut positionierte Inhalte. Ohne diese Datei stand sie auf
 * breiteren Geräten als schmale Spalte im Bild und wurde auf schmaleren Geräten
 * (iPhone mit 390 px, viele Android-Geräte mit 360 px) rechts abgeschnitten.
 *
 * Deshalb zwei Wege:
 *  1. Vorlagen-Seiten werden als Ganzes skaliert. Die Komposition bleibt damit
 *     wie in Figma, und bei genau 402 px ändert sich nichts. Den Faktor setzt
 *     stiers_mobile_zoom() in functions.php als --stiers-zoom. Ohne JavaScript
 *     oder ohne zoom-Unterstützung bleibt es beim bisherigen Layout.
 *     Kein calc() mit tan(atan2()): Chromium 124 rechnet das falsch und zerlegt
 *     die Seite, statt die Angabe zu ignorieren.
 *  2. Warenkorb, Kasse und Rechtstexte fließen normal. Warenkorb und Kasse werden
 *     bewusst nicht skaliert, weil dort die PayPal-Iframes sitzen.
 *
 * Wer Geometrie im skalierten Bereich misst: getBoundingClientRect liefert je
 * nach Browser skalierte Werte, in style.height gesetzte Werte werden erneut
 * skaliert. Siehe stiersZoomFaktor() in functions.php.
 */

/* ── 1. Vorlagen-Seiten ─────────────────────────────────────── */
main.rw-page:not(.rw-cartpage),
main.sx-page,
body.woocommerce-cart .rw-emptycart {
    zoom: var(--stiers-zoom, 1);
}

body.woocommerce-cart .rw-emptycart {
    margin-inline: auto;
}

/* Warteliste Seife: liegt außerhalb von main und wird nicht skaliert. Bis 480 px
   füllt sie den Bildschirm, darüber ist sie ein 402 px breiter Drawer, dessen
   Hintergrund sich auf hohen Bildschirmen mit harter Kante wiederholte.
   body davor, weil seife-warteliste.css je nach Seite später geladen wird. */
body .stiers-seife-warteliste__panel {
    width: 100vw;
}

@media (min-width: 480px) {
    body .stiers-seife-warteliste__panel {
        width: 402px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}

/* ── 2. Rechtstexte ─────────────────────────────────────────── */
.stiers-legal-page main.wp-block-group {
    max-width: none;
}

.stiers-legal-page main > .wp-block-post-content {
    width: min(100%, 640px);
    margin-inline: auto;
}

/* ── 3. Kasse ───────────────────────────────────────────────── */
body.woocommerce-checkout main.stiers-checkout-page {
    max-width: min(100%, 600px);
    margin-inline: auto;
}

body.woocommerce-checkout main.stiers-checkout-page > .wp-block-post-content,
body.woocommerce-checkout main.stiers-checkout-page .woocommerce,
.stiers-checkout {
    max-width: none;
}

.stiers-orec {
    max-width: min(100%, 600px);
}

/* Die Kasse hat durchgehend width: min(354px, 100%). Darüber blieben Felder und
   Kästen links stehen, während die Bestellübersicht die Breite nutzte. */
body.woocommerce-checkout form.stiers-checkout #customer_details,
body.woocommerce-checkout form.stiers-checkout #customer_details .col-1,
body.woocommerce-checkout form.stiers-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout form.stiers-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout form.stiers-checkout .form-row,
body.woocommerce-checkout form.stiers-checkout .stiers-checkout-next,
body.woocommerce-checkout form.stiers-checkout #place_order,
body.woocommerce-checkout form.stiers-checkout #stiers-payment-slot .payment_methods li,
body.woocommerce-checkout form.stiers-checkout .stiers-wallet-placeholder,
body.woocommerce-checkout form.stiers-checkout .stiers-payment-intro,
body.woocommerce-checkout form.stiers-checkout .stiers-compact-details,
body.woocommerce-checkout form.stiers-checkout .stiers-compact-fallback,
body.woocommerce-checkout form.stiers-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout form.stiers-checkout #stiers-place-slot .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout form.stiers-checkout--compact .stiers-compact-address-fields .woocommerce-billing-fields__field-wrapper > .form-row {
    width: 100% !important;
}

/* Zwei Felder je Zeile, gleich welche Breite. gap: 12 px */
body.woocommerce-checkout form.stiers-checkout #billing_first_name_field,
body.woocommerce-checkout form.stiers-checkout #billing_last_name_field,
body.woocommerce-checkout form.stiers-checkout #billing_postcode_field,
body.woocommerce-checkout form.stiers-checkout #billing_city_field,
body.woocommerce-checkout form.stiers-checkout #billing_country_field,
body.woocommerce-checkout form.stiers-checkout #billing_email_field,
body.woocommerce-checkout form.stiers-checkout--compact .stiers-compact-address-fields #billing_first_name_field,
body.woocommerce-checkout form.stiers-checkout--compact .stiers-compact-address-fields #billing_last_name_field,
body.woocommerce-checkout form.stiers-checkout--compact .stiers-compact-address-fields #billing_postcode_field,
body.woocommerce-checkout form.stiers-checkout--compact .stiers-compact-address-fields #billing_city_field,
body.woocommerce-checkout form.stiers-checkout--compact .stiers-compact-address-fields #billing_country_field,
body.woocommerce-checkout form.stiers-checkout--compact .stiers-compact-address-fields #billing_email_field {
    width: calc(50% - 6px) !important;
}

/* ── 4. Warenkorb ───────────────────────────────────────────── */
body.woocommerce-cart .stiers-cartpage-inner {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
}

body.woocommerce-cart .stiers-cart-item,
body.woocommerce-cart .stiers-coupon-row,
body.woocommerce-cart .stiers-free-shipping-bar,
body.woocommerce-cart .stiers-free-shipping-progress,
body.woocommerce-cart .stiers-cart-summary-box,
body.woocommerce-cart .stiers-cart-checkout-btn,
body.woocommerce-cart .stiers-cart-express,
body.woocommerce-cart .stiers-cart-paypal-preview,
body.woocommerce-cart .stiers-cart-wallet {
    width: 100%;
}

body.woocommerce-cart .stiers-cart-item-left {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* Das Gutscheinfeld hatte eine feste Breite und schob die Pfeil-Taste bei
   360 px aus dem Bild. */
body.woocommerce-cart .stiers-coupon-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
}

body.woocommerce-cart .stiers-coupon-field,
body.woocommerce-cart .stiers-coupon-input {
    width: 100%;
    min-width: 0;
}

/* Platz für die Pfeil-Taste, sonst läuft der Platzhalter in sie hinein. */
body.woocommerce-cart .stiers-coupon-input {
    padding-right: 52px;
}

/* PayPal rendert höchstens rund 314 px breit und stünde sonst links im Kasten. */
body.woocommerce-cart .stiers-cart-express {
    max-width: 320px;
    margin-inline: auto;
}

@media (max-width: 385px) {
    body.woocommerce-cart .stiers-coupon-input {
        padding-right: 44px;
        padding-left: 14px;
    }
}