/* ==========================================================================
   WooCommerce – Anpassung an das Erscheinungsbild der Seite.
   Wird nur geladen, wenn das Shop-Plugin aktiv ist.
   ========================================================================== */

.woocommerce-page main,
.woocommerce main {
  padding-block: var(--space-xl);
}

/* Die Breite gibt der Container des Themes vor; hier nur noch die
   volle Ausnutzung sicherstellen. */
.woocommerce-page .woocommerce,
.woocommerce-page .woocommerce-notices-wrapper {
  width: 100%;
}

/* Auf der Bestätigungsseite reicht eine schmale Spalte. */
.woocommerce-order-received .woocommerce {
  max-width: 760px;
  margin-inline: auto;
}

/* Beschriftungen sollen nicht mitten im Wort umbrechen. */
.woocommerce form .form-row label,
.woocommerce table.shop_table th { overflow-wrap: normal; }

/* --------------------------------------------------------------- Kasse
   WooCommerce liefert die Kasse als drei Blöcke hintereinander:
   Angaben, Überschrift der Bestellung, Bestellübersicht. Daraus wird
   hier ein zweispaltiges Raster mit mitlaufender Übersicht.           */

@media (min-width: 900px) {
  form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    /* Die erste Zeile nur so hoch wie die Überschrift. Ohne diese Angabe
       verteilt das Raster die Höhe der linken Spalte auf beide Zeilen und
       reisst eine Lücke unter der Überschrift auf. */
    grid-template-rows: min-content 1fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  #customer_details     { grid-column: 1; grid-row: 1 / span 2; }
  #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  #order_review         { grid-column: 2; grid-row: 2; position: sticky; top: 6.5rem; }
}

/* Die beiden Spalten innerhalb der Angaben werden aufgelöst:
   die eigenen Felder sollen die volle Breite bekommen. */
#customer_details.col2-set,
#customer_details .col2-set { display: block; }

#customer_details .col-1,
#customer_details .col-2 {
  width: 100%;
  float: none;
  margin: 0;
}

#customer_details .col-2 { margin-top: var(--space-md); }

/* Vorname und Nachname nebeneinander, alles Übrige über die volle Breite. */
.woocommerce-billing-fields__field-wrapper {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce-billing-fields__field-wrapper .form-row { margin-bottom: 0; }
.woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* Die allgemeine Überschrift entfällt: die eigenen Felder bringen eine
   eigene mit, die erklärt, wofür die Angaben gebraucht werden. */
.woocommerce-additional-fields > h3 { display: none; }

/* --- Ueberschriften --- */

.woocommerce h3,
.woocommerce-billing-fields h3,
.woocommerce-checkout h3 {
  margin-bottom: var(--space-sm);
  font-size: var(--step-2);
}

#order_review_heading {
  margin-top: var(--space-lg);
}

/* --- Formularfelder --- */

.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 var(--space-sm);
  padding: 0;
}

.woocommerce form .form-row label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.woocommerce form .form-row .required {
  color: var(--gold-dark);
  border: 0;
  text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  height: auto;
  padding: 0.8rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(211, 157, 74, 0.18);
}

.woocommerce form .form-row textarea {
  min-height: 9rem;
  resize: vertical;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: #c0392b;
}

/* Die eigenen Felder fuer die Sprachnachricht abheben. */
.oltre-voice-fields {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--gold-tint);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: var(--radius);
}

.oltre-voice-fields h3 {
  margin-bottom: var(--space-sm);
  font-size: var(--step-1);
}

.oltre-voice-fields .form-row:last-child { margin-bottom: 0; }
.oltre-voice-fields input.input-text,
.oltre-voice-fields textarea,
.oltre-voice-fields select { background: var(--bg); }

/* --- Schaltflaechen --- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #payment #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.75em;
  background: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(211, 157, 74, 0.32);
}

.woocommerce #payment #place_order {
  width: 100%;
  margin-top: var(--space-sm);
}

/* --- Tabellen: Bestellübersicht --- */

.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--step-0);
  text-align: left;
}

.woocommerce table.shop_table thead th {
  border-top: 0;
  background: var(--bg-soft);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  font-weight: 600;
}

.woocommerce table.shop_table .order-total .amount {
  color: var(--gold-dark);
  font-size: var(--step-1);
}

/* --- Zahlungsbereich --- */

.woocommerce #payment,
.woocommerce-checkout #payment {
  margin-top: var(--space-md);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.woocommerce #payment ul.payment_methods {
  margin: 0 0 var(--space-sm);
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce #payment ul.payment_methods li {
  margin-bottom: 0.5rem;
}

.woocommerce #payment div.payment_box {
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

.woocommerce #payment div.payment_box::before { display: none; }

/* --- Meldungen --- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 var(--space-md);
  padding: 1rem 1.25rem;
  border: 0;
  border-left: 4px solid;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.6;
  list-style: none;
}

.woocommerce-message { background: #eef7ef; border-color: #3f8f52; }
.woocommerce-info    { background: var(--gold-tint); border-color: var(--gold); }
.woocommerce-error   { background: #fdefed; border-color: #c0392b; }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-error li { margin-bottom: 0.25rem; }

/* --- Bestellbestätigung --- */

.woocommerce ul.order_details {
  display: grid;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  list-style: none;
}

@media (min-width: 700px) {
  .woocommerce ul.order_details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.woocommerce ul.order_details li {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink-muted);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.woocommerce ul.order_details li strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink);
  font-size: var(--step-0);
  letter-spacing: 0;
  text-transform: none;
}

.oltre-thankyou {
  margin: var(--space-lg) 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.oltre-thankyou h2 { font-size: var(--step-2); }
.oltre-thankyou ol { padding-left: 1.25rem; }
.oltre-thankyou li { margin-bottom: 0.5rem; }

/* --- Zahlungsangaben für TWINT --- */

.oltre-twint {
  margin: var(--space-lg) 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--gold-tint);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: var(--radius);
}

.oltre-twint__title {
  margin-bottom: var(--space-sm);
  font-size: var(--step-2);
}

.oltre-twint__rows {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
}

@media (min-width: 620px) {
  .oltre-twint__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.oltre-twint__rows dt {
  color: var(--ink-muted);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.oltre-twint__rows dd {
  margin: 0.15rem 0 0;
  font-size: var(--step-1);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.oltre-twint__note {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--ink-muted);
  font-size: var(--step--1);
}

/* --- Kleinkram ausblenden --- */

.woocommerce .woocommerce-breadcrumb,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  display: none;
}