/* ============================================================
   SAFETYFIXX – Warenkorb / Kasse / Bestellbestätigung
   Überträgt die Design-Sprache aus design/style.css auf die
   WooCommerce-Block-Seiten (Navy · Gold · Warm Neutrals).
============================================================ */

:root {
  --c-navy:        #1e2244;
  --c-navy-deep:   #0d1124;
  --c-gold:        #e5ba87;
  --c-gold-warm:   #d9a96a;
  --c-gold-deep:   #9a6b32;
  --c-gold-pale:   #f8efd9;
  --c-cream:       #f4f2eb;
  --c-cream-2:     #ece9df;
  --c-surface:     #fafaf7;
  --c-white:       #ffffff;
  --c-text:        #1a1f3d;
  --c-text-muted:  #5d6490;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 999px;
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --t-fast: 0.16s;
  --t-base: 0.28s;
}

/* --- Basis --- */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
  background: var(--c-surface);
}
body.woocommerce-cart #content,
body.woocommerce-checkout #content,
body.woocommerce-account #content {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  padding-block: 1.5rem 4rem;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2.5rem);
}
/* alignwide der Woo-Blocks nutzt negative Margins → im Container neutralisieren */
body.woocommerce-cart #content .alignwide,
body.woocommerce-checkout #content .alignwide {
  margin-inline: 0;
}

body.woocommerce-cart #content h1,
body.woocommerce-checkout #content h1,
body.woocommerce-account #content h1,
body.woocommerce-cart #content h2,
body.woocommerce-checkout #content h2,
body.woocommerce-account #content h2,
body.woocommerce-cart #content h3,
body.woocommerce-checkout #content h3,
body.woocommerce-account #content h3,
.wc-block-components-title,
.wc-block-components-checkout-step__title {
  font-family: inherit;
  font-weight: 800;
  color: var(--c-navy);
  letter-spacing: -.025em;
}

body.woocommerce-cart #content a:not(.wc-block-components-button),
body.woocommerce-checkout #content a:not(.wc-block-components-button) {
  color: var(--c-gold-deep);
  font-weight: 600;
}

/* Trennlinien im warmen Cream-Ton statt Standard-Grau */
.wc-block-cart .wc-block-cart-items,
.wc-block-cart .wc-block-cart-items th,
.wc-block-cart .wc-block-cart-items td,
.wc-block-components-totals-wrapper,
.wc-block-components-totals-footer-item,
.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-checkout__terms,
.wc-block-components-address-card {
  border-color: var(--c-cream-2) !important;
}

/* --- Karten: Bestellübersicht / Warenkorb-Summen --- */
.wc-block-checkout__sidebar .wc-block-components-sidebar-content,
.wc-block-cart__sidebar .wc-block-cart__totals-wrapper {
  background: var(--c-white);
  border: 1px solid var(--c-cream-2);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: 0 2px 24px rgba(30,34,68,.06);
}

/* --- Formularfelder --- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select {
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  border: 1.5px solid var(--c-cream-2);
  border-radius: var(--r-md);
  background: var(--c-white);
  color: var(--c-text);
  transition: border-color var(--t-fast);
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus {
  border-color: var(--c-navy);
  outline: none;
  box-shadow: none;
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  font-family: inherit;
  color: var(--c-text-muted);
}
.wc-block-components-checkbox input[type="checkbox"],
.wc-block-components-radio-control__input {
  accent-color: var(--c-navy);
}
.wc-block-components-checkbox input[type="checkbox"]:checked {
  background: var(--c-navy);
  border-color: var(--c-navy);
}

/* --- Haupt-CTAs: Gold-Pill wie .btn--gold ---
   (überschreibt auch das Pink aus Hello-Elementors reset.css) */
#content .wc-block-components-button,
#content .wc-block-components-button:hover,
#content .wc-block-components-button:focus,
#content .wc-block-cart__submit-button,
#content .wc-block-components-checkout-place-order-button {
  text-decoration: none;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-warm) 100%);
  color: var(--c-navy-deep);
  border: none;
  border-radius: var(--r-pill);
  padding: .9rem 2.1rem;
  transition:
    background var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
#content .wc-block-components-button:hover,
#content .wc-block-components-button:focus {
  background: linear-gradient(135deg, var(--c-gold-warm) 0%, #c4923e 100%);
  color: var(--c-navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(229,186,135,.35);
}
#content .wc-block-components-button:disabled,
#content .wc-block-components-button[disabled] {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-warm) 100%);
  color: var(--c-navy-deep);
  opacity: .45;
}

/* Sekundäre Buttons (Panel-Toggles, „Wohnung hinzufügen“, Entfernen-Links):
   Pink-Hover aus reset.css neutralisieren */
body.woocommerce-cart #content button:not(.wc-block-components-button):hover,
body.woocommerce-cart #content button:not(.wc-block-components-button):focus,
body.woocommerce-checkout #content button:not(.wc-block-components-button):hover,
body.woocommerce-checkout #content button:not(.wc-block-components-button):focus {
  background-color: transparent;
  color: var(--c-navy);
}

/* --- Warenkorb: Mengen-Stepper im Pill-Stil --- */
.wc-block-components-quantity-selector {
  border: 1.5px solid var(--c-cream-2);
  border-radius: var(--r-pill);
  background: var(--c-white);
  overflow: hidden;
}
.wc-block-components-quantity-selector:after { border: none; }
.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector button {
  font-family: inherit;
  font-weight: 700;
  color: var(--c-navy);
}
.wc-block-components-quantity-selector button:hover,
.wc-block-components-quantity-selector button:focus {
  background-color: var(--c-cream);
  color: var(--c-navy);
}

/* --- Produktnamen & Summen --- */
.wc-block-components-product-name {
  font-weight: 600;
  color: var(--c-text);
}
.wc-block-components-product-metadata,
.wc-block-components-product-details {
  color: var(--c-text-muted);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 800;
  color: var(--c-navy);
  letter-spacing: -.02em;
}
.wc-block-components-formatted-money-amount { font-weight: 600; }

/* --- Notices --- */
.wc-block-components-notice-banner {
  border-radius: var(--r-md);
  font-family: inherit;
}

/* --- Mein Konto (klassisches Woo-Markup) --- */

/* Formular-Karten: Login, Registrierung, Konto-Details, Adressen */
body.woocommerce-account #content form.login,
body.woocommerce-account #content form.register,
body.woocommerce-account #content form.woocommerce-ResetPassword,
body.woocommerce-account #content .woocommerce-EditAccountForm,
body.woocommerce-account #content .woocommerce-address-fields {
  background: var(--c-white);
  border: 1px solid var(--c-cream-2);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  box-shadow: 0 2px 24px rgba(30,34,68,.06);
  max-width: 480px;
}
body.woocommerce-account #content .woocommerce-EditAccountForm,
body.woocommerce-account #content .woocommerce-address-fields {
  max-width: 640px;
}

/* Felder */
body.woocommerce-account #content input.input-text,
body.woocommerce-account #content select,
body.woocommerce-account #content textarea {
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--c-cream-2);
  border-radius: var(--r-md);
  background: var(--c-white);
  color: var(--c-text);
  transition: border-color var(--t-fast);
}
body.woocommerce-account #content input.input-text:focus,
body.woocommerce-account #content select:focus,
body.woocommerce-account #content textarea:focus {
  border-color: var(--c-navy);
  outline: none;
}
body.woocommerce-account #content label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-navy);
  margin-bottom: .35rem;
  display: inline-block;
}
body.woocommerce-account #content fieldset {
  border: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--c-cream-2);
}
body.woocommerce-account #content fieldset legend {
  font-weight: 800;
  color: var(--c-navy);
  padding-right: .75rem;
}

/* Buttons: Gold-Pill (überschreibt auch das Pink aus reset.css) */
body.woocommerce-account #content button.button,
body.woocommerce-account #content a.button,
body.woocommerce-account #content .woocommerce-button,
body.woocommerce-account #content button[type="submit"],
body.woocommerce-account #content button.button:hover,
body.woocommerce-account #content a.button:hover,
body.woocommerce-account #content .woocommerce-button:hover,
body.woocommerce-account #content button[type="submit"]:hover,
body.woocommerce-account #content button.button:focus,
body.woocommerce-account #content a.button:focus,
body.woocommerce-account #content .woocommerce-button:focus,
body.woocommerce-account #content button[type="submit"]:focus {
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-warm) 100%);
  color: var(--c-navy-deep);
  border: none;
  border-radius: var(--r-pill);
  padding: .8rem 1.9rem;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
body.woocommerce-account #content button.button:hover,
body.woocommerce-account #content a.button:hover,
body.woocommerce-account #content .woocommerce-button:hover,
body.woocommerce-account #content button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--c-gold-warm) 0%, #c4923e 100%);
  box-shadow: 0 6px 24px rgba(229,186,135,.35);
}

/* Konto-Navigation als Karte */
body.woocommerce-account #content .woocommerce-MyAccount-navigation {
  background: var(--c-white);
  border: 1px solid var(--c-cream-2);
  border-radius: var(--r-lg);
  padding: .75rem;
  box-shadow: 0 2px 24px rgba(30,34,68,.06);
}
body.woocommerce-account #content .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.woocommerce-account #content .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .65rem 1rem;
  border-radius: var(--r-md);
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-text-muted);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
body.woocommerce-account #content .woocommerce-MyAccount-navigation li a:hover {
  background: var(--c-cream);
  color: var(--c-navy);
}
body.woocommerce-account #content .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--c-navy);
  color: var(--c-white);
}

body.woocommerce-account #content .woocommerce-MyAccount-content {
  font-size: .95rem;
}

/* Bestell-Tabelle */
body.woocommerce-account #content table.woocommerce-orders-table,
body.woocommerce-account #content table.woocommerce-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  background: var(--c-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(30,34,68,.06);
}
body.woocommerce-account #content table.woocommerce-orders-table th,
body.woocommerce-account #content table.woocommerce-orders-table td,
body.woocommerce-account #content table.woocommerce-table th,
body.woocommerce-account #content table.woocommerce-table td {
  border: none;
  border-bottom: 1px solid var(--c-cream-2);
  padding: .85rem 1rem;
  text-align: left;
}

/* Adress-Karten */
body.woocommerce-account #content .woocommerce-Addresses .woocommerce-Address {
  background: var(--c-white);
  border: 1px solid var(--c-cream-2);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
body.woocommerce-account #content .woocommerce-Address address {
  font-style: normal;
  color: var(--c-text-muted);
}
body.woocommerce-account #content .woocommerce-Address-title h2,
body.woocommerce-account #content .woocommerce-Address-title h3 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

/* Hinweis-Boxen (z. B. "Noch keine Bestellung") */
body.woocommerce-account #content .woocommerce-message,
body.woocommerce-account #content .woocommerce-info,
body.woocommerce-account #content .woocommerce-error {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: .9rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--c-gold-pale);
  border: 1px solid rgba(229,186,135,.4);
  color: var(--c-text);
  font-size: .9rem;
}
body.woocommerce-account #content .woocommerce-message::before,
body.woocommerce-account #content .woocommerce-info::before,
body.woocommerce-account #content .woocommerce-error::before { display: none; }
body.woocommerce-account #content .woocommerce-error { background: #fdecec; border-color: #f5c2c2; }

/* Kleinkram: "Passwort vergessen", Checkbox-Zeile */
body.woocommerce-account #content .lost_password a,
body.woocommerce-account #content .woocommerce-LostPassword a {
  font-size: .85rem;
}
body.woocommerce-account #content .woocommerce-form-login__rememberme {
  display: block;
  margin-bottom: .75rem;
}
body.woocommerce-account #content input[type="checkbox"] {
  accent-color: var(--c-navy);
}

/* --- Bestellbestätigung (Danke-Seite, klassisches Markup) --- */
body.woocommerce-checkout #content .woocommerce-order ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  list-style: none;
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--c-white);
  border: 1px solid var(--c-cream-2);
  border-radius: var(--r-lg);
}
body.woocommerce-checkout #content .woocommerce-order table {
  border-collapse: collapse;
  width: 100%;
}
body.woocommerce-checkout #content .woocommerce-order th,
body.woocommerce-checkout #content .woocommerce-order td {
  border: none;
  border-bottom: 1px solid var(--c-cream-2);
  padding: .75rem .5rem;
  text-align: left;
}