/* YSL-Theme: was die Demo-CSS (ysl.css, erzeugt) für WordPress und WooCommerce noch braucht. Nur --ysl-* Variablen.
   #ysl-seite vor WooCommerce-Regeln: WooCommerce' eigene Farben (Lila-Knöpfe) verlieren so immer. */

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* nur solange die Abfrage da ist: die „Demnächst verfügbar"-Seite von WooCommerce hat die body-Klasse auch, aber keinen Dialog */
body.ysl-alter-offen:has(#ysl-alter) { overflow: hidden; }
/* Sprung-Link: bei großer Schrift wächst er – ganz über den Rand schieben statt fester -60px (ysl.css ist erzeugt) */
.ysl-sprung:not(:focus) { top: auto; bottom: 100%; }

/* ---------- Kopf: Querlogo v2-05 (8,9:1) braucht Platz – logos-v2/DEPLOY.md Schritt 2 ---------- */
.ysl-kopf-innen { grid-template-columns: minmax(0, 1fr) auto auto; }
.ysl-logo { min-width: 0; }
.ysl-logo img { height: auto; width: 100%; max-width: 285px; aspect-ratio: 569 / 64; }
.ysl-sprache { display: inline-flex; align-items: center; text-decoration: none; }
.ysl-sprache:hover { color: var(--ysl-hell); }
.ysl-sprache-lang { display: none; }
@media (min-width: 600px) {
  .ysl-sprache-lang { display: inline; }
  .ysl-sprache-kurz { display: none; }
}
@media (min-width: 900px) {
  .ysl-kopf-innen { grid-template-columns: auto 1fr auto auto; }
  .ysl-logo img { width: auto; max-width: none; height: 40px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .ysl-kopf-innen { column-gap: 12px; }
  .ysl-logo img { height: 28px; }
  .ysl-nav-link, .ysl-nav-knopf { padding-left: 8px; padding-right: 8px; }
}
.ysl-alter-logo { width: min(445px, 100%); }
/* feste Breite: auf WooCommerce-Seiten setzt .woocommerce-page img { height: auto } die Höhe zurück (sonst 569 × 64 px) */
.ysl-fuss-logo { width: 302px; max-width: 100%; height: auto; }
.ysl-fuss-versand { display: flex; gap: 10px; align-items: center; }
.ysl-fuss-versand .ysl-icon { color: var(--ysl-gold-hell); }

/* ---------- Seiten ---------- */
.ysl-seite-breit { padding-top: 32px; padding-bottom: 56px; }
.ysl-seite-text > :not(h1) { max-width: 46em; }
.ysl-seite-text :is(ul, ol) { padding-left: 1.4em; margin: 0 0 1em; } /* Listen im Text des Inhabers (ysl.css nimmt den Einzug weg) */
.ysl-seite-finder { min-height: 50vh; }
.ysl-leer .ysl-knopf { margin-top: 8px; }

/* ---------- Knöpfe und Hinweise von WooCommerce im YSL-Stil ---------- */
#ysl-seite :is(a.button, button.button, input.button, .button.alt, #respond input#submit) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px;
  border: 2px solid transparent; border-radius: var(--ysl-r-klein); background: var(--ysl-gold); color: #fff;
  font: 600 1rem/1.2 var(--ysl-schrift); letter-spacing: .02em; text-decoration: none; transition: background-color var(--ysl-dauer) ease, box-shadow var(--ysl-dauer) ease;
}
#ysl-seite :is(a.button, button.button, input.button, .button.alt):hover { background: var(--ysl-gold-dunkel); color: #fff; box-shadow: var(--ysl-schatten); }
#ysl-seite :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews) {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 16px 0; padding: 14px 16px; list-style: none;
  background: var(--ysl-creme); color: var(--ysl-text); border: 0; border-left: 4px solid var(--ysl-gold); border-radius: var(--ysl-r-klein);
}
#ysl-seite .woocommerce-error { border-left-color: var(--ysl-fehler); }
#ysl-seite :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { content: none; }
#ysl-seite :is(.woocommerce-message, .woocommerce-info) .button { order: 2; min-height: 44px; padding: 8px 16px; }
/* Links in Hinweisen: Gold auf Creme hat nur 4,3:1, auf dem roten Block-Hinweis 4,45:1 – darum Gold-dunkel (6,0:1) */
#ysl-seite :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) a:not(.button) { color: var(--ysl-gold-dunkel); }
/* Felder außerhalb der WooCommerce-Blöcke; in Block-Warenkorb und Block-Kasse gelten WooCommerce' eigene Regeln
   (sonst liegt dort der Text über der schwebenden Beschriftung, und das Mengenfeld bekommt einen zweiten Rahmen) */
#ysl-seite :is(input[type='text'], input[type='email'], input[type='tel'], input[type='password'], input[type='number'], select, textarea):not(.wp-block-woocommerce-cart *, .wp-block-woocommerce-checkout *) {
  min-height: 48px; padding: 10px 14px; border: 1px solid var(--ysl-eingabe); border-radius: var(--ysl-r-klein); background: #fff; color: var(--ysl-text); font: 500 1rem var(--ysl-schrift);
}
#ysl-seite .password-input input[type] { padding-right: 2.5rem; } /* Platz für „Passwort anzeigen" (Mein Konto), gleiche Stärke, später */

/* ---------- Produktseite: WooCommerce-Markup im Raster der Demo (.ysl-produkt) ---------- */
.ysl-produktseite { padding-bottom: 56px; }
#ysl-seite .ysl-produktseite div.product { display: grid; gap: 24px; margin: 0; }
#ysl-seite .ysl-produktseite div.product > .summary { float: none; width: auto; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
#ysl-seite .ysl-produktseite .product_title { margin: 6px 0 0; padding: 0; font-size: clamp(2.125rem, 7vw, 3.25rem); }
.ysl-produktseite .ysl-preis { margin-top: 14px; }
.ysl-produktseite .ysl-mwst { margin: 0; }
.ysl-preis-jetzt del { color: var(--ysl-text-2); font-weight: 400; }
.ysl-preis-jetzt ins { text-decoration: none; color: var(--ysl-wein); }
#ysl-seite .ysl-produktseite form.cart { display: flex; gap: 12px; align-items: center; width: 100%; margin: 14px 0 4px; }
#ysl-seite .ysl-produktseite form.cart::before, #ysl-seite .ysl-produktseite form.cart::after { content: none; }
#ysl-seite .ysl-produktseite form.cart div.quantity { float: none; margin: 0; }
#ysl-seite .ysl-produktseite form.cart .qty { width: 72px; min-height: 48px; text-align: center; font-weight: 600; }
#ysl-seite .ysl-produktseite form.cart .single_add_to_cart_button { flex: 1; min-width: 0; padding-left: 12px; padding-right: 12px; }
.ysl-produktseite .ysl-akkordeons .ysl-akkordeon-inhalt h3 { font-size: 1.125rem; font-family: var(--ysl-schrift); font-weight: 600; margin: 1em 0 .4em; }
.ysl-produktseite .ysl-akkordeon-inhalt ul { padding-left: 1.2em; display: grid; gap: 6px; }
@media (max-width: 899px) { /* „In den Warenkorb" unten fest wie .ysl-kaufbox der Demo */
  #ysl-seite .ysl-produktseite form.cart { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px var(--ysl-seite) calc(10px + env(safe-area-inset-bottom)); background: var(--ysl-karte); border-top: 1px solid var(--ysl-rand); box-shadow: 0 -6px 16px rgba(28, 25, 23, .1); }
}
@media (min-width: 900px) {
  #ysl-seite .ysl-produktseite div.product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .ysl-produktseite .ysl-galerie { position: sticky; top: 24px; }
}

/* ---------- Warenkorb und Kasse (WooCommerce-Blöcke) ---------- */
.ysl-versand-balken { margin: 0 0 24px; }
.ysl-seite-breit :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) { font-family: var(--ysl-schrift); color: var(--ysl-text); }
#ysl-seite :is(.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button) {
  min-height: 48px; border-radius: var(--ysl-r-klein); background: var(--ysl-gold); color: #fff; font-weight: 600; letter-spacing: .02em; border: 0;
}
#ysl-seite :is(.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button):hover { background: var(--ysl-gold-dunkel); color: #fff; }
#ysl-seite .wc-block-components-button.is-link, .ysl-seite-breit :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) a { color: var(--ysl-gold); }
.ysl-seite-breit :is(.wc-block-cart__totals-title, .wc-block-components-title, .wc-block-components-checkout-step__title) { font-family: var(--ysl-titel); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ysl-seite-breit .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--ysl-titel); font-size: 1.75rem; font-weight: 700; }
.ysl-seite-breit :is(.wc-block-components-text-input input, .wc-block-components-combobox-control input, .wc-block-components-textarea, select) { border-color: var(--ysl-eingabe); border-radius: var(--ysl-r-klein); }
.ysl-seite-breit :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--ysl-gold); }
.ysl-seite-breit .wc-block-components-product-name { color: var(--ysl-text); font-weight: 600; }
#ysl-seite .wc-block-cart-item__prices .price { column-gap: 0; } /* „32,90 €*" wie in den Summen (das * aus ysl-stern.js ist ein eigenes Flex-Kind); Sonderpreise trennt WooCommerce mit margin-left */
.ysl-seite-breit .wc-block-components-sale-badge { border-color: var(--ysl-wein); color: var(--ysl-wein); }