/* ==========================================================================
   VENTIVA — 08 Warenkorb, Kasse, Bestätigung

   Amber gibt es hier genau zweimal: auf "Weiter zur Kasse" und auf
   "Zahlungspflichtig bestellen". Beides sind die Weiter-Knöpfe im Kaufweg.
   Alles andere — Gutschein, Mengen aktualisieren, Zahlarten — bleibt ruhig,
   damit der Weg nach vorn eindeutig ist.
   ========================================================================== */

/* --- WooCommerce-Float-Layout neutralisieren -----------------------------
   Gleiche Ursache wie im Kopf von 07-shop.css: woocommerce-layout.css wird in
   inc/enqueue.php zwar entfernt, aber darauf ist kein Verlass — ein
   Optimierungs-Plugin oder ein unvollständiger Upload holt es zurück.

   Diese Datei baut Warenkorb und Kasse mit Grid. Woos Regeln arbeiten mit
   float und Prozentbreiten. Beides gleichzeitig ergibt genau das Bild, das
   auf der Shop-Übersicht zu sehen war: Spalten schrumpfen, Inhalt läuft
   daneben ins Layout.

   body davor hebt die Spezifität eine Stelle über Woos Selektoren und macht
   die Regeln damit unabhängig von der Ladereihenfolge.
   -------------------------------------------------------------------------- */
body.woocommerce .col2-set .col-1,
body.woocommerce .col2-set .col-2,
body.woocommerce-page .col2-set .col-1,
body.woocommerce-page .col2-set .col-2,
body.woocommerce form .form-row-first,
body.woocommerce form .form-row-last,
body.woocommerce-page form .form-row-first,
body.woocommerce-page form .form-row-last,
body.woocommerce .cart-collaterals .cart_totals,
body.woocommerce-page .cart-collaterals .cart_totals {
  float: none;
  width: auto;
}

/* Die zwei nebeneinanderliegenden Felder macht 08-cart.css weiter unten
   selbst — dort über inline-grid statt float. */
@media (min-width: 620px) {
  body.woocommerce .v-checkout form .form-row-first,
  body.woocommerce .v-checkout form .form-row-last,
  body.woocommerce-page .v-checkout form .form-row-first,
  body.woocommerce-page .v-checkout form .form-row-last {
    width: calc(50% - .5rem);
  }
}

.v-cart,
.v-checkout,
.v-thanks { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; }

.v-cart__head,
.v-checkout__head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.2rem); }

.v-cart__title,
.v-checkout__title,
.v-thanks__title { font-size: var(--fs-h2); max-width: 20ch; }

/* ==========================================================================
   1. Warenkorb
   ========================================================================== */

.v-cart__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .v-cart__layout { grid-template-columns: minmax(0, 1fr); }
}

.v-cart__table {
  width: 100%;
  border-collapse: collapse;
}
.v-cart__table thead th {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-ink-60);
  text-align: left;
  padding: 0 .8rem .9rem;
  border-bottom: 1px solid var(--v-line);
}
.v-cart__table thead th.product-price,
.v-cart__table thead th.product-subtotal { text-align: right; }

.v-cart__table td {
  padding: 1.5rem .8rem;
  border-bottom: 1px solid var(--v-line);
  vertical-align: middle;
}
.v-cart__table td.product-price,
.v-cart__table td.product-subtotal { text-align: right; white-space: nowrap; }
.v-cart__table td.product-subtotal { font-weight: 600; }
.v-cart__table td.product-price { color: var(--v-ink-60); }

.v-cart__product {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.v-cart__thumb {
  flex: none;
  width: 84px;
  border-radius: var(--v-radius);
  overflow: hidden;
  background: var(--v-paper);
}
.v-cart__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.v-cart__name a { text-decoration: none; font-weight: 600; }
.v-cart__name a:hover { text-decoration: underline; }

/* Variantenangaben, die Woo als <dl> ausgibt. */
.v-cart__meta dl.variation {
  margin: .35rem 0 0;
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  color: var(--v-ink-60);
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .6rem;
}
.v-cart__meta dl.variation dt,
.v-cart__meta dl.variation dd { margin: 0; }
.v-cart__meta dl.variation dd p { margin: 0; }

/* --- Menge --------------------------------------------------------------- */
.v-cart__table .quantity input.qty,
.v-qty input.qty {
  width: 72px;
  padding: .6rem .5rem;
  text-align: center;
  font-family: var(--v-mono);
  font-size: var(--fs-sm);
  color: var(--v-ink);
  background: var(--v-paper);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--v-line);
}

/* --- Entfernen ----------------------------------------------------------- */
.v-cart__table td.product-remove { width: 44px; text-align: right; }
.v-cart__table a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  color: var(--v-ink-40);
  transition: color var(--v-fast) var(--v-ease),
              background var(--v-fast) var(--v-ease);
}
.v-cart__table a.remove:hover {
  color: #B9563F;                       /* Warnrot, nicht Amber: Amber heisst hier "weiter". */
  background: rgba(185, 86, 63, .1);
}

/* --- Aktionszeile -------------------------------------------------------- */
.v-cart__table td.actions {
  padding-top: 1.6rem;
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.v-cart__coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}
.v-cart__coupon label {
  width: 100%;
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-ink-60);
  margin-bottom: .3rem;
}
.v-cart__coupon input.input-text {
  width: 190px;
  padding: .82rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--v-paper);
  box-shadow: inset 0 0 0 1px var(--v-line);
  font-family: var(--v-body);
  font-size: var(--fs-sm);
  color: var(--v-ink);
}
.v-cart__coupon .v-btn,
.v-cart__update { padding: .82rem 1.4rem; font-size: var(--fs-sm); }

/* --- Summen -------------------------------------------------------------- */
.v-cart__aside { position: sticky; top: 96px; display: grid; gap: 1.5rem; }
@media (max-width: 900px) { .v-cart__aside { position: static; } }

.v-cart__totals {
  background: var(--v-paper);
  border-radius: var(--v-radius-lg);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  box-shadow: var(--v-shadow);
}
.v-cart__totals h2 {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-ink-60);
  margin: 0 0 1.2rem;
}

.cart_totals table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  padding: .72rem 0;
  text-align: left;
  border-bottom: 1px solid var(--v-line);
  vertical-align: top;
}
.cart_totals table.shop_table th {
  font-weight: 400;
  color: var(--v-ink-60);
  width: 45%;
}
.cart_totals table.shop_table td { text-align: right; }
.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.order-total td {
  border-bottom: 0;
  padding-top: 1rem;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--v-ink);
}
.cart_totals .includes_tax,
.cart_totals small { display: block; font-size: var(--fs-mono); color: var(--v-ink-60); font-weight: 400; }

/* Versandarten */
.cart_totals ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  text-align: left;
}
.cart_totals ul#shipping_method li { display: flex; align-items: baseline; gap: .5rem; }
.cart_totals .woocommerce-shipping-destination { margin: .7rem 0 0; font-size: var(--fs-mono); color: var(--v-ink-60); text-align: left; }
.cart_totals .shipping-calculator-button {
  font-size: var(--fs-sm);
  color: var(--v-ink-60);
}

/* Weiter zur Kasse — erstes von zwei Amber-Elementen im Kaufweg. */
.wc-proceed-to-checkout { margin-top: 1.4rem; }
.wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.05rem 1.6rem;
  border-radius: 999px;
  background: var(--v-heat);
  color: var(--v-ink);
  font-family: var(--v-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background var(--v-fast) var(--v-ease);
}
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--v-heat-deep); }

.v-cart__trust {
  list-style: none;
  margin: 0;
  padding: 0 clamp(1.4rem, 1rem + 1.4vw, 2rem);
  display: grid;
  gap: .7rem;
}

/* --- Leerer Warenkorb ---------------------------------------------------- */
.v-cart--empty .v-lead { margin-block: 1.4rem 2rem; }
.v-cart__back { margin: 0; }

/* --- Mobil: Tabelle klappt zu Karten ------------------------------------- */
@media (max-width: 720px) {
  .v-cart__table thead { display: none; }
  .v-cart__table,
  .v-cart__table tbody,
  .v-cart__table tr,
  .v-cart__table td { display: block; width: 100%; }

  .v-cart__table tr.cart_item {
    position: relative;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--v-line);
  }
  .v-cart__table tr.cart_item td { border-bottom: 0; padding: .25rem 0; }

  /* Beschriftung aus data-title statt aus zweitem Markup. */
  .v-cart__table tr.cart_item td[data-title]::before {
    content: attr(data-title);
    display: inline-block;
    min-width: 8rem;
    font-family: var(--v-mono);
    font-size: var(--fs-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v-ink-60);
  }
  .v-cart__table tr.cart_item td.product-name::before { display: none; }
  .v-cart__table td.product-price,
  .v-cart__table td.product-subtotal { text-align: left; }

  .v-cart__table td.product-remove {
    position: absolute;
    top: 1.2rem;
    right: 0;
    width: auto;
  }

  .v-cart__table td.actions { display: grid; gap: 1rem; }
  .v-cart__coupon input.input-text { width: 100%; flex: 1 1 140px; }
}

/* ==========================================================================
   2. Kasse
   ========================================================================== */

.v-checkout__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
@media (max-width: 980px) {
  .v-checkout__layout { grid-template-columns: minmax(0, 1fr); }
}

.v-checkout__details { display: grid; gap: 2.4rem; }

.v-checkout__block h3,
.v-checkout__block .woocommerce-billing-fields h3,
.v-checkout__block .woocommerce-shipping-fields h3 {
  font-family: var(--v-display);
  font-weight: 600;
  font-stretch: 106%;
  font-size: var(--fs-h3);
  letter-spacing: -.018em;
  margin: 0 0 1.4rem;
}

/* --- Formularfelder ------------------------------------------------------ */
.v-checkout .form-row {
  display: grid;
  gap: .4rem;
  margin: 0 0 1.1rem;
}
.v-checkout .form-row label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--v-ink-60);
}
.v-checkout .form-row .required {
  color: var(--v-ink-60);
  text-decoration: none;
  border: 0;
}
.v-checkout .form-row .optional { color: var(--v-ink-60); }

.v-checkout .input-text,
.v-checkout select,
.v-checkout textarea,
.v-checkout .select2-container .select2-selection {
  width: 100%;
  padding: .92rem 1.1rem;
  border: 0;
  border-radius: var(--v-radius);
  background: var(--v-paper);
  box-shadow: inset 0 0 0 1px var(--v-line);
  font-family: var(--v-body);
  font-size: var(--fs-base);
  color: var(--v-ink);
  transition: box-shadow var(--v-fast) var(--v-ease);
}
.v-checkout textarea { min-height: 110px; resize: vertical; }

.v-checkout .input-text:focus,
.v-checkout select:focus,
.v-checkout textarea:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--v-cool);
}
/* Fokus bleibt zusätzlich als Ring sichtbar (02-base), damit Tastaturnutzer
   dieselbe Rückmeldung bekommen wie überall sonst. */
.v-checkout .input-text:focus-visible,
.v-checkout select:focus-visible,
.v-checkout textarea:focus-visible { outline: 2px solid var(--v-heat); outline-offset: 2px; }

.v-checkout .form-row.woocommerce-invalid .input-text,
.v-checkout .form-row.woocommerce-invalid select { box-shadow: inset 0 0 0 2px #B9563F; }

/* Zwei Felder nebeneinander, wo es inhaltlich zusammengehört. */
@media (min-width: 620px) {
  .v-checkout .form-row-first,
  .v-checkout .form-row-last {
    display: inline-grid;
    width: calc(50% - .5rem);
    vertical-align: top;
  }
  .v-checkout .form-row-first { margin-right: 1rem; }
}

.v-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: var(--fs-sm);
}
.v-checkout .woocommerce-form__input-checkbox {
  width: 20px;
  height: 20px;
  margin: .12rem 0 0;
  accent-color: var(--v-deep);
  flex: none;
}

/* --- Bestellübersicht ---------------------------------------------------- */
.v-checkout__aside {
  position: sticky;
  top: 96px;
  background: var(--v-paper);
  border-radius: var(--v-radius-lg);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  box-shadow: var(--v-shadow);
  display: grid;
  gap: 1.4rem;
}
@media (max-width: 980px) { .v-checkout__aside { position: static; } }

.v-checkout__reviewtitle { margin: 0; font-size: var(--fs-h3); }

.v-checkout__review table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.v-checkout__review table.shop_table th,
.v-checkout__review table.shop_table td {
  padding: .7rem 0;
  text-align: left;
  border-bottom: 1px solid var(--v-line);
}
.v-checkout__review table.shop_table td { text-align: right; }
.v-checkout__review table.shop_table thead th {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-ink-60);
}
.v-checkout__review .product-name { color: var(--v-ink); }
.v-checkout__review .product-quantity { color: var(--v-ink-60); font-family: var(--v-mono); }
.v-checkout__review tr.order-total th,
.v-checkout__review tr.order-total td {
  border-bottom: 0;
  padding-top: 1rem;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.v-checkout__review .includes_tax,
.v-checkout__review small { display: block; font-size: var(--fs-mono); color: var(--v-ink-60); font-weight: 400; }

/* --- Zahlarten ----------------------------------------------------------- */
.v-checkout ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  border: 0;
}
.v-checkout ul.payment_methods li {
  padding: .9rem 1rem;
  border-radius: var(--v-radius);
  box-shadow: inset 0 0 0 1px var(--v-line);
}
.v-checkout ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.v-checkout ul.payment_methods input[type="radio"] { accent-color: var(--v-deep); width: 18px; height: 18px; }
.v-checkout .payment_box {
  margin: .8rem 0 0;
  padding: .9rem 1rem;
  border-radius: var(--v-radius);
  background: rgba(18, 58, 52, .05);
  font-size: var(--fs-sm);
  color: var(--v-ink-60);
}
.v-checkout .payment_box p:first-child { margin-top: 0; }
.v-checkout .payment_box p:last-child { margin-bottom: 0; }

/* --- AGB / Widerruf ------------------------------------------------------ */
.v-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--v-line);
  font-size: var(--fs-sm);
}
.v-checkout .woocommerce-privacy-policy-text { color: var(--v-ink-60); }
.v-checkout .woocommerce-privacy-policy-text p { margin-top: 0; }

/* --- Bestellbutton — zweites und letztes Amber im Kaufweg ---------------- */
.v-checkout #place_order {
  width: 100%;
  margin-top: 1rem;
  padding: 1.1rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--v-heat);
  color: var(--v-ink);
  font-family: var(--v-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--v-fast) var(--v-ease);
}
.v-checkout #place_order:hover { background: var(--v-heat-deep); }

.v-checkout__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
  border-top: 1px solid var(--v-line);
  padding-top: 1.2rem;
}

/* Ladezustand von checkout.js — die einzige Stelle mit !important im ganzen
   Theme, und zwar notgedrungen: jQuery blockUI schreibt Hintergrund und
   Deckkraft als Inline-Style direkt ans Element. Dagegen kommt kein Selektor
   an, egal wie spezifisch. Ohne diese Regel liegt beim Absenden der Bestellung
   ein hellgrauer Fremdkörper über der Kasse. */
.woocommerce .blockUI.blockOverlay { background: var(--v-mist) !important; opacity: .6 !important; }

/* ==========================================================================
   3. Bestätigung
   ========================================================================== */

.v-thanks { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.v-thanks .v-lead { margin-block: 1.2rem 2.4rem; }

.v-thanks__overview {
  list-style: none;
  margin: 0 0 2.6rem;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  background: var(--v-paper);
  border-radius: var(--v-radius-lg);
  box-shadow: var(--v-shadow);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.4rem;
}
.v-thanks__overview li { display: grid; gap: .3rem; }
.v-thanks__overview span {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v-ink-60);
}
.v-thanks__overview strong { font-size: var(--fs-base); font-weight: 600; }

.v-thanks__next { max-width: 60ch; }
.v-thanks__next h2 { margin: 0 0 1rem; }
.v-thanks__next ol {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: .5rem;
  color: var(--v-ink-60);
}

.v-thanks__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Bestelldetails und Adressen, die Woo unter dem Danke-Text ausgibt. */
.v-thanks .woocommerce-order-details,
.v-thanks .woocommerce-customer-details { margin-top: 3rem; }
.v-thanks .woocommerce-order-details h2,
.v-thanks .woocommerce-customer-details h2 {
  font-family: var(--v-display);
  font-weight: 600;
  font-stretch: 106%;
  font-size: var(--fs-h3);
  margin: 0 0 1.2rem;
}
.v-thanks table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.v-thanks table.shop_table th,
.v-thanks table.shop_table td {
  padding: .8rem 0;
  text-align: left;
  border-bottom: 1px solid var(--v-line);
}
.v-thanks table.shop_table td:last-child,
.v-thanks table.shop_table th:last-child { text-align: right; }
.v-thanks address {
  font-style: normal;
  color: var(--v-ink-60);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}