/* =========================================================================
   HF Cart Restyle — REIN OPTISCH (nur CSS), gleiche Design-Sprache wie der
   Checkout-Restyle (style.css). Lädt über dieses Plugin NUR auf /warenkorb/
   (is_cart). Keine Struktur-/DOM-Eingriffe. Reversibel: Plugin deaktivieren.
   ========================================================================= */

/* Design-Tokens: auf dem Checkout in style.css definiert; hier neu, weil style.css
   auf der Warenkorb-Seite NICHT lädt. Auf body.woocommerce-cart gescoped. */
body.woocommerce-cart{
  --hf-brand:#af0000; --hf-brand-dark:#8a0000; --hf-ink:#1c1c1c; --hf-muted:#6e6e6e;
  --hf-line:#e3e3e3; --hf-field:#cfcfcf; --hf-grey:#fafafa; --hf-radius:9px;
}

/* =========================================================
   Topbar (Logo links + „Startseite"-Link rechts) — wie Checkout, nur ohne Cart-Icon.
   Volle Breite (edge-to-edge) aus dem Container ausbrechen.
   ======================================================= */
body.woocommerce-cart .hf-cr2-topbar{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:#fff; border-bottom:1px solid var(--hf-line); margin-bottom:26px;
}
body.woocommerce-cart .hf-cr2-topbar-inner{
  display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px;
}
body.woocommerce-cart .hf-cr2-topbar .custom-logo-link{ display:inline-flex; line-height:0; }
body.woocommerce-cart .hf-cr2-topbar .custom-logo,
body.woocommerce-cart .hf-cr2-topbar img{ max-height:38px; width:auto; height:auto; display:block; }
body.woocommerce-cart .hf-cr2-brandtext{ font-size:20px; font-weight:800; color:var(--hf-brand); letter-spacing:-.01em; }
/* rechts: große Seitenüberschrift „Warenkorb" (matcht den bisherigen Theme-Titel) */
body.woocommerce-cart .hf-cr2-carttitle{
  font-family:'Montserrat', Arial, Helvetica, sans-serif; font-size:20px; font-weight:700;
  color:var(--hf-ink); letter-spacing:-.01em; line-height:1;
}
/* Theme-Titelzeile (Seitentitel „Warenkorb" + Brotkrumen) ausblenden -> nicht doppelt */
body.woocommerce-cart .full_container_page_title{ display:none !important; }
/* Die Warenkorb-Seite ist mit WPBakery gebaut: die VC-Spalte (.containercartbox
   .vc_column-inner) hat padding-top:50px -> die Topbar saß ~50px UNTER dem Seitenrand,
   während die Kasse (ohne WPBakery) bündig oben sitzt. Padding-top neutralisieren ->
   Topbar bündig wie im Checkout (Höhen-/Positions-Konsistenz). */
body.woocommerce-cart .containercartbox .vc_column-inner{ padding-top:0 !important; }
@media (max-width:980px){
  body.woocommerce-cart .hf-cr2-topbar-inner{ padding-left:18px; padding-right:18px; }
  body.woocommerce-cart .hf-cr2-topbar .custom-logo,
  body.woocommerce-cart .hf-cr2-topbar img{ max-height:32px; }
}

/* =========================================================
   Buttons — einheitliche Design-Sprache wie der Checkout
   ======================================================= */
/* Primär: „Weiter zur Kasse" (rot, prominent, volle Breite) */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button{
  display:block; width:100%; box-sizing:border-box;
  background:var(--hf-brand) !important; color:#fff !important; border:none !important;
  border-radius:var(--hf-radius) !important; padding:15px 24px !important; height:auto !important; min-height:0 !important;
  font-size:15px !important; font-weight:700 !important; line-height:1.2 !important;
  text-transform:none !important; letter-spacing:0 !important; box-shadow:none !important; text-shadow:none !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button:hover{ background:var(--hf-brand-dark) !important; color:#fff !important; }

/* „Code anwenden" = gefüllt dunkel (identisch zum Checkout-Coupon „Anwenden") */
body.woocommerce-cart .coupon button[name="apply_coupon"]{
  background:var(--hf-ink) !important; color:#fff !important; border:1px solid var(--hf-ink) !important;
  border-radius:var(--hf-radius) !important; height:44px !important; padding:0 18px !important; min-height:0 !important;
  font-size:14px !important; font-weight:700 !important; text-transform:none !important; line-height:1 !important;
  box-shadow:none !important; text-shadow:none !important; white-space:nowrap;
}
body.woocommerce-cart .coupon button[name="apply_coupon"]:hover{ background:#fff !important; color:var(--hf-ink) !important; }

/* „Warenkorb aktualisieren" = sekundär (weiß / Outline) */
body.woocommerce-cart button[name="update_cart"]{
  background:#fff !important; color:var(--hf-ink) !important; border:1px solid var(--hf-field) !important;
  border-radius:var(--hf-radius) !important; height:44px !important; padding:0 18px !important; min-height:0 !important;
  font-size:14px !important; font-weight:600 !important; text-transform:none !important; line-height:1 !important;
  box-shadow:none !important; text-shadow:none !important;
}
body.woocommerce-cart button[name="update_cart"]:hover:not([disabled]){ border-color:var(--hf-ink) !important; background:#fff !important; color:var(--hf-ink) !important; }
body.woocommerce-cart button[name="update_cart"][disabled]{ opacity:.45 !important; cursor:default; }

/* =========================================================
   Gutscheinfeld — wie Checkout (44px, 9px Radius, roter Fokus)
   ======================================================= */
/* Theme-Layout beibehalten (Input + Button inline nebeneinander) — nur Optik angleichen */
body.woocommerce-cart .coupon #coupon_code{
  width:210px !important; max-width:100%; vertical-align:middle; margin:0 8px 0 0 !important; display:inline-block;
  background:#fff !important; border:1px solid var(--hf-field) !important; border-radius:var(--hf-radius) !important;
  height:44px !important; padding:0 14px !important; font-size:14px !important; color:var(--hf-ink) !important; box-shadow:none !important;
}
body.woocommerce-cart .coupon #coupon_code:focus{ border-color:var(--hf-brand) !important; box-shadow:0 0 0 3px rgba(175,0,0,.12) !important; outline:none !important; }
body.woocommerce-cart .coupon button[name="apply_coupon"]{ vertical-align:middle; }

/* =========================================================
   Produkt-Tabelle — weg mit Box-Rahmen, nur dezente Zeilentrenner
   ======================================================= */
body.woocommerce-cart table.cart,
body.woocommerce-cart table.shop_table.cart{ border:none !important; background:transparent !important; margin-top:30px !important; margin-bottom:30px !important; }
body.woocommerce-cart table.cart thead th{
  border:none !important;   /* Trennstrich unter der Kopfzeile entfernt (Oli-Wunsch) */
  font-size:11px !important; text-transform:uppercase; letter-spacing:.04em; color:var(--hf-muted) !important;
  font-weight:600 !important; padding:0 12px 12px !important; background:transparent !important;
}
/* Tipp-/Hinweisbox: klarer Abstand zur Tabelle darunter */
body.woocommerce-cart .woocommerce-cart-form > .woocommerce-info,
body.woocommerce-cart form.woocommerce-cart-form .woocommerce-info{ margin-bottom:0 !important; }
body.woocommerce-cart table.cart tbody td{
  border:none !important; border-top:1px solid var(--hf-line) !important;
  padding:16px 12px !important; background:transparent !important; vertical-align:middle;
}
body.woocommerce-cart table.cart tbody tr:first-child td{ border-top:none !important; }
body.woocommerce-cart table.cart td.product-name,
body.woocommerce-cart table.cart td.product-name a{ color:var(--hf-ink) !important; font-weight:700 !important; text-decoration:none; }
body.woocommerce-cart table.cart td.product-name a:hover{ color:var(--hf-brand) !important; }
body.woocommerce-cart .product-remove a.remove{ color:var(--hf-muted) !important; font-size:20px; }
body.woocommerce-cart .product-remove a.remove:hover{ color:var(--hf-brand) !important; background:transparent !important; }

/* Mengen-Stepper als ZUSAMMENHÄNGENDE Gruppe [− | n | +] im Design-System-Look
   (Theme lieferte 32px graue Buttons + 40px weißes Feld = uneinheitlich). */
body.woocommerce-cart .product-quantity .quantity{ display:inline-flex !important; align-items:stretch; }
body.woocommerce-cart .quantity input.qty{
  width:48px !important; height:40px !important; text-align:center !important;
  border:1px solid var(--hf-field) !important; border-left:none !important; border-right:none !important; border-radius:0 !important;
  background:#fff !important; color:var(--hf-ink) !important; box-shadow:none !important; padding:0 !important; -moz-appearance:textfield;
}
body.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
body.woocommerce-cart .quantity .minus,
body.woocommerce-cart .quantity .plus{
  width:40px !important; height:40px !important; padding:0 !important; margin:0 !important; min-height:0 !important;
  background:#fff !important; border:1px solid var(--hf-field) !important; color:var(--hf-ink) !important;
  font-size:18px !important; font-weight:600 !important; line-height:1 !important; cursor:pointer;
  box-shadow:none !important; text-shadow:none !important;
}
body.woocommerce-cart .quantity .minus{ border-radius:var(--hf-radius) 0 0 var(--hf-radius) !important; }
body.woocommerce-cart .quantity .plus{ border-radius:0 var(--hf-radius) var(--hf-radius) 0 !important; }
body.woocommerce-cart .quantity .minus:hover,
body.woocommerce-cart .quantity .plus:hover{ background:var(--hf-grey) !important; border-color:var(--hf-ink) !important; color:var(--hf-ink) !important; }

/* Zeile unter der Tabelle (Coupon links + Aktualisieren rechts) etwas Luft */
body.woocommerce-cart table.cart td.actions{ padding-top:18px !important; }

/* =========================================================
   „Warenkorb-Summe" als Karte (wie die Checkout-Übersicht rechts)
   ======================================================= */
body.woocommerce-cart .cart_totals{
  background:var(--hf-grey); border-radius:var(--hf-radius); padding:24px 24px 28px;
}
body.woocommerce-cart .cart_totals h2{
  font-size:18px !important; font-weight:700 !important; color:var(--hf-ink) !important; margin:0 0 14px !important; padding:0 !important; text-transform:none !important;
}
body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals table.shop_table{ border:none !important; background:transparent !important; margin:0; }
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td{
  border:none !important; border-top:1px solid var(--hf-line) !important;
  padding:12px 0 !important; background:transparent !important; font-size:14px; color:var(--hf-ink);
}
body.woocommerce-cart .cart_totals table tr:first-child th,
body.woocommerce-cart .cart_totals table tr:first-child td{ border-top:none !important; }
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td{ font-size:16px !important; font-weight:800 !important; color:var(--hf-ink) !important; }
/* „Weiter zur Kasse" mit Abstand zur Summen-Tabelle */
body.woocommerce-cart .wc-proceed-to-checkout{ padding-top:18px !important; }

/* =========================================================
   Hinweis-/Tipp-Box dezent mit Marken-Akzent (statt Theme-Kasten)
   ======================================================= */
body.woocommerce-cart .woocommerce-info{
  background:var(--hf-grey) !important; border:none !important; border-left:3px solid var(--hf-brand) !important;
  border-radius:var(--hf-radius) !important; color:var(--hf-ink) !important; box-shadow:none !important;
}
body.woocommerce-cart .woocommerce-info::before{ display:none !important; }
body.woocommerce-cart .woocommerce-info a{ color:var(--hf-brand) !important; }

/* =========================================================
   Mobil: Gutscheinfeld + Button gestapelt volle Breite (sonst „Code anwenden"
   abgeschnitten); Update-Button ebenfalls volle Breite.
   ======================================================= */
@media (max-width:980px){
  body.woocommerce-cart .coupon #coupon_code{ width:100% !important; margin:0 0 8px 0 !important; display:block; }
  body.woocommerce-cart .coupon button[name="apply_coupon"]{ width:100% !important; display:block; }
  body.woocommerce-cart button[name="update_cart"]{ width:100% !important; }
  /* Mobil blendet das Theme die −/+-Buttons aus -> das Mengenfeld wieder als
     eigenständiges, voll umrandetes Feld (sonst nur Unterstrich-Optik). */
  body.woocommerce-cart .quantity input.qty{
    border:1px solid var(--hf-field) !important; border-radius:var(--hf-radius) !important;
    width:64px !important; text-align:center !important;
  }
}