/* ==========================================================================
   FARMLA — Designsystem
   Extrahiert aus dem Farmla Shop Mockup.
   Token-Reihenfolge: Farbe, Typografie, Raum, Form.
   ========================================================================== */

:root{
  /* Farbe */
  --f-green:        #1d3a30;   /* Primaer, Tannengruen. Schrift, Buttons, Footer */
  --f-green-soft:   #4c5b52;   /* Fliesstext */
  --f-green-mute:   #6b7a71;   /* Labels */
  --f-green-faint:  #8a9990;   /* Meta, Hinweise */
  --f-gold:         #b8964e;   /* Akzent, Hover, Badges */
  --f-gold-dark:    #8a7a55;   /* Eyebrow-Text */
  --f-sand:         #f3ead8;   /* Sektionsflaeche */
  --f-sand-2:       #f7f1e3;   /* Karten, Hinweisboxen */
  --f-sand-3:       #eee4cc;   /* Bild-Platzhalter */
  --f-paper:        #fdfaf3;   /* Seitenhintergrund */
  --f-paper-2:      #fffdf8;   /* Header, erhoehte Flaechen */
  --f-line:         #ece3d2;   /* Trennlinien */
  --f-line-2:       #ddd4bf;   /* Raender */
  --f-line-3:       #d9d1c0;   /* Aeussere Rahmen */
  --f-dashed:       #c9bd9f;   /* Gestrichelte Raender */
  --f-success:      #2f6b4f;   /* Lieferzusage */
  --f-wine:         #6d2331;   /* Sale, Ausverkauft */
  --f-mist:         #cfdcd2;   /* Sekundaerflaeche */

  /* Typografie */
  --f-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --f-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --f-h1: clamp(30px, 5vw, 52px);
  --f-h2: clamp(26px, 3.6vw, 36px);
  --f-h3: 22px;

  /* Raum */
  --f-pad:  clamp(20px, 4vw, 48px);
  --f-gap:  clamp(16px, 2.4vw, 28px);
  --f-max:  1320px;

  /* Form */
  --f-r-sm:  10px;
  --f-r-md:  12px;
  --f-r-lg:  14px;
  --f-pill:  999px;
  --f-shadow: 0 1px 2px rgba(29,58,48,.06);
  --f-shadow-lg: 0 24px 60px rgba(29,58,48,.14);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--f-paper);
  color:var(--f-green);
  font-family:var(--f-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--f-green); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--f-gold); }
input,select,button,textarea{ font-family:inherit; font-size:inherit; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:400; color:var(--f-green); margin:0 0 .5em; line-height:1.1; }
h1{ font-size:var(--f-h1); }
h2{ font-size:var(--f-h2); }
h3{ font-size:var(--f-h3); }
p{ margin:0 0 1em; }
:focus-visible{ outline:2px solid var(--f-gold); outline-offset:3px; border-radius:4px; }

.f-wrap{ max-width:var(--f-max); margin-inline:auto; padding-inline:var(--f-pad); }
.f-section{ padding-block:clamp(40px,6vw,80px); }
.f-eyebrow{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--f-gold-dark); display:block;
}
.f-lede{ font-size:16px; line-height:1.6; color:var(--f-green-soft); font-weight:300; max-width:52ch; text-wrap:pretty; }
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--f-green); color:var(--f-paper); padding:12px 20px;
}
.skip-link:focus{ left:8px; top:8px; }

/* ---------- Buttons ---------- */
.f-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-element-button,
.wc-block-components-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--f-green); background:var(--f-green); color:var(--f-paper);
  padding:14px 26px; border-radius:var(--f-pill);
  font-size:15px; line-height:1; font-weight:400; letter-spacing:.01em;
  min-height:50px; cursor:pointer; text-align:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.f-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover{
  background:var(--f-gold); border-color:var(--f-gold); color:var(--f-green);
}
.f-btn--ghost,
.woocommerce a.button.alt.wc-forward,
.woocommerce a.button.wc-backward{
  background:transparent; color:var(--f-green); border-color:var(--f-line-2);
}
.f-btn--ghost:hover{ background:var(--f-sand-2); border-color:var(--f-green); color:var(--f-green); }
.f-btn--block{ width:100%; }

/* ---------- Ankuendigungsleiste ---------- */
.f-announce{
  background:var(--f-green); color:#f3ead8;
  font-size:12px; letter-spacing:.08em;
  text-align:center; padding:9px 16px;
}

/* ---------- Header ---------- */
.f-header{
  position:sticky; top:0; z-index:50;
  background:var(--f-paper-2);
  border-bottom:1px solid var(--f-line);
}
.f-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:14px;
}
.f-brand{ display:flex; align-items:center; gap:10px; flex:none; }
.f-brand img{ height:34px; width:auto; }
.f-brand__word{ font-family:var(--f-display); font-size:26px; line-height:1; color:var(--f-green); }
.f-nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.f-nav a{ font-size:14px; letter-spacing:.02em; }
.f-nav .current-menu-item > a{ color:var(--f-gold); }
.f-header__actions{ display:flex; align-items:center; gap:14px; }
.f-header__link{ font-size:13px; color:var(--f-green-mute); }

.f-cart-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--f-green); background:var(--f-green); color:var(--f-paper);
  padding:9px 15px; border-radius:var(--f-pill); font-size:13px; min-height:40px;
}
.f-cart-btn:hover{ background:var(--f-gold); border-color:var(--f-gold); color:var(--f-green); }
.f-cart-count{
  background:var(--f-gold); color:var(--f-green);
  border-radius:var(--f-pill); min-width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:600; padding:0 6px;
}
.f-cart-btn:hover .f-cart-count{ background:var(--f-green); color:var(--f-paper); }

.f-burger{
  display:none; border:1px solid var(--f-line-2); background:var(--f-paper-2);
  width:42px; height:42px; border-radius:var(--f-pill); cursor:pointer;
  align-items:center; justify-content:center;
}
.f-burger span{ display:block; width:16px; height:1.5px; background:var(--f-green); position:relative; }
.f-burger span::before,.f-burger span::after{
  content:''; position:absolute; left:0; width:16px; height:1.5px; background:var(--f-green);
}
.f-burger span::before{ top:-5px; } .f-burger span::after{ top:5px; }

@media (max-width:900px){
  .f-nav, .f-header__link{ display:none; }
  .f-burger{ display:inline-flex; }
  .f-nav.is-open{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--f-paper-2); border-bottom:1px solid var(--f-line);
    padding:16px var(--f-pad);
  }
  .f-nav.is-open ul{ flex-direction:column; gap:14px; }
  .f-brand__word{ font-size:22px; }
}

/* ---------- Hero ---------- */
.f-hero{
  display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--f-sand); align-items:stretch;
}
.f-hero__text{
  padding:clamp(28px,5vw,64px);
  display:flex; flex-direction:column; justify-content:center; gap:22px;
}
.f-hero h1{ margin:0; font-size:var(--f-h1); text-wrap:pretty; }
.f-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.f-hero__media{ background:var(--f-sand-3) center/cover no-repeat; min-height:clamp(280px,46vw,560px); }
.f-hero__trust{ display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--f-green-mute); }
.f-hero__trust span{ display:inline-flex; align-items:center; gap:6px; }
@media (max-width:820px){ .f-hero{ grid-template-columns:1fr; } }

/* ---------- Produktraster ---------- */
.f-grid,
.woocommerce ul.products{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--f-gap); list-style:none; margin:0; padding:0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none; }
.woocommerce ul.products li.product{
  width:auto!important; margin:0!important; float:none!important;
  display:flex; flex-direction:column; gap:10px; text-align:left;
}
.woocommerce ul.products li.product a img{
  margin:0; border-radius:var(--f-r-md); background:var(--f-sand-3);
  aspect-ratio:3/4; object-fit:cover; width:100%;
  transition:transform .4s ease;
}
.woocommerce ul.products li.product:hover a img{ transform:scale(1.02); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--f-body); font-size:16px; color:var(--f-green);
  padding:0; margin:0; font-weight:400;
}
.f-card__origin{ font-size:13px; color:var(--f-green-faint); font-weight:300; }
.woocommerce ul.products li.product .price{
  font-size:15px; color:var(--f-green); margin:2px 0 0; font-weight:400;
}
.woocommerce ul.products li.product .price del{ color:var(--f-green-faint); opacity:.7; margin-right:6px; }
.woocommerce ul.products li.product .price ins{ color:var(--f-wine); text-decoration:none; }
.woocommerce span.onsale{
  background:var(--f-wine); color:var(--f-paper);
  border-radius:var(--f-pill); min-height:0; min-width:0;
  padding:5px 12px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  top:10px; left:10px; right:auto; margin:0; line-height:1;
}
.woocommerce ul.products li.product .button{ margin-top:6px; }

/* ---------- Kategorie / Archiv ---------- */
.f-archive-head{ display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.f-filters{
  display:flex; gap:8px; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:1px solid var(--f-line); margin-bottom:16px;
}
.f-chip{
  border:1px solid var(--f-line-2); background:var(--f-paper-2); color:var(--f-green);
  padding:9px 16px; border-radius:var(--f-pill); font-size:13.5px; cursor:pointer;
}
.f-chip:hover{ border-color:var(--f-gold); color:var(--f-gold); }
.f-chip.is-active{ background:var(--f-green); border-color:var(--f-green); color:var(--f-paper); }
.f-archive-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:24px;
}
.f-result-count{ font-size:14px; color:var(--f-green-mute); }
.f-fit-link{
  border:1px dashed var(--f-dashed); background:var(--f-sand-2); color:var(--f-green);
  padding:10px 16px; border-radius:var(--f-r-sm); font-size:13.5px;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ margin:0; float:none; }
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--f-line-2); background:var(--f-paper-2);
  border-radius:var(--f-pill); padding:9px 16px; font-size:13.5px; color:var(--f-green);
}

/* ---------- Produktseite ---------- */
.f-breadcrumb{
  padding-block:14px; border-bottom:1px solid var(--f-line);
  font-size:13px; color:var(--f-green-faint);
}
.f-breadcrumb a{ color:var(--f-green-faint); }
.f-breadcrumb a:hover{ color:var(--f-gold); }

.woocommerce div.product{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); }
.woocommerce div.product .woocommerce-product-gallery{ width:100%; float:none; margin:0; }
.woocommerce div.product .woocommerce-product-gallery img{ border-radius:var(--f-r-lg); background:var(--f-sand-3); }
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li{ width:auto; float:none; margin:0; }
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img{ border-radius:var(--f-r-sm); }
.woocommerce div.product div.summary{ width:100%; float:none; margin:0; display:flex; flex-direction:column; gap:18px; }
.woocommerce div.product .product_title{ margin:0; font-size:var(--f-h2); }
.woocommerce div.product p.price,
.woocommerce div.product span.price{ font-size:20px; color:var(--f-green); margin:0; }
.woocommerce div.product p.price del{ color:var(--f-green-faint); }
.woocommerce div.product p.price ins{ color:var(--f-wine); text-decoration:none; }
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:15.5px; line-height:1.65; color:var(--f-green-soft); font-weight:300; text-wrap:pretty;
}
@media (max-width:820px){ .woocommerce div.product{ grid-template-columns:1fr; } }

/* Varianten als Kacheln statt Dropdown */
.woocommerce div.product form.cart{ margin:0; display:flex; flex-direction:column; gap:16px; }
.woocommerce div.product form.cart .variations{ margin:0; border:0; width:100%; }
.woocommerce div.product form.cart .variations tr{ display:flex; flex-direction:column; gap:10px; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{ padding:0; border:0; display:block; }
.woocommerce div.product form.cart .variations label{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--f-green-mute); font-weight:400;
}
.f-swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.f-swatch{
  min-width:56px; min-height:46px; padding:0 14px;
  border:1px solid var(--f-line-2); background:var(--f-paper-2); color:var(--f-green);
  border-radius:var(--f-r-sm); font-size:14px; cursor:pointer;
}
.f-swatch:hover{ border-color:var(--f-gold); }
.f-swatch.is-active{ border-color:var(--f-green); background:var(--f-green); color:var(--f-paper); }
.f-swatch.is-disabled{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.f-swatch--color{ display:inline-flex; align-items:center; gap:8px; padding:5px 14px 5px 6px; }
.f-swatch--color i{
  width:18px; height:18px; border-radius:50%;
  border:1px solid rgba(0,0,0,.12); flex:none; display:block;
}
.f-fit-hint{ font-size:13px; color:var(--f-green-faint); }
.f-fit-open{ font-size:13.5px; color:var(--f-gold); text-decoration:underline; background:none; border:0; cursor:pointer; padding:0; }
.f-label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }

.woocommerce div.product form.cart div.quantity{ float:none; margin:0; }
.woocommerce .quantity .qty{
  width:76px; height:50px; border:1px solid var(--f-line-2);
  border-radius:var(--f-r-sm); background:var(--f-paper-2);
  text-align:center; color:var(--f-green);
}
.woocommerce div.product form.cart .button{ width:100%; float:none; padding:17px 26px; font-size:16px; min-height:54px; }
.f-cart-row{ display:flex; gap:10px; align-items:stretch; }

/* Lieferzusage-Box */
.f-promise{
  border:1px solid var(--f-line-2); background:var(--f-sand-2);
  border-radius:var(--f-r-md); padding:18px;
  display:flex; gap:14px; align-items:flex-start;
}
.f-promise__icon{ color:var(--f-gold); flex:none; }
.f-promise__title{ font-size:14.5px; color:var(--f-green); display:block; margin-bottom:2px; }
.f-promise__text{ font-size:13.5px; color:var(--f-green-soft); font-weight:300; }
.f-delivery-note{ font-size:13px; color:var(--f-success); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs{ grid-column:1/-1; margin-top:clamp(24px,4vw,48px); }
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; margin:0 0 20px; border-bottom:1px solid var(--f-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none; border:0; border-radius:0; margin:0 24px 0 0; padding:0 0 12px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ content:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--f-green-mute); font-weight:400;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--f-green); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ box-shadow:inset 0 -2px 0 var(--f-gold); }

.related.products, .upsells.products{ grid-column:1/-1; margin-top:clamp(32px,5vw,64px); }

/* ---------- Warenkorb & Checkout ---------- */
.woocommerce table.shop_table{
  border:1px solid var(--f-line); border-radius:var(--f-r-md);
  border-collapse:separate; overflow:hidden; background:var(--f-paper-2);
}
.woocommerce table.shop_table th{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--f-green-mute); font-weight:400; background:var(--f-sand-2);
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th{ border-top:1px solid var(--f-line); padding:16px; }
.woocommerce table.cart img{ width:72px; border-radius:var(--f-r-sm); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order{
  background:var(--f-sand-2); border:1px solid var(--f-line-2);
  border-radius:var(--f-r-md); padding:clamp(18px,3vw,28px);
}
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3{ font-size:var(--f-h3); }
.woocommerce form .form-row{ margin:0 0 16px; padding:0; }
.woocommerce form .form-row label{
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--f-green-mute); margin-bottom:6px; display:block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  border:1px solid var(--f-line-2); background:var(--f-paper-2);
  border-radius:var(--f-r-sm); padding:13px 14px; min-height:50px;
  color:var(--f-green); width:100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{ border-color:var(--f-gold); outline:none; }
.woocommerce #payment{ background:transparent; border-radius:0; }
.woocommerce #payment ul.payment_methods{ border-bottom:1px solid var(--f-line); padding:0 0 16px; }
.woocommerce #payment div.form-row{ padding:16px 0 0; }
.woocommerce-info, .woocommerce-message, .woocommerce-error{
  background:var(--f-sand-2); border-top:2px solid var(--f-gold);
  border-radius:var(--f-r-sm); color:var(--f-green); padding:16px 20px 16px 48px;
}
.woocommerce-info::before, .woocommerce-message::before{ color:var(--f-gold); top:16px; left:20px; }
.woocommerce-error{ border-top-color:var(--f-wine); }
.woocommerce-error::before{ color:var(--f-wine); top:16px; left:20px; }

/* Block-Checkout: siehe eigenen Abschnitt am Dateiende. */

/* ---------- Footer ---------- */
.f-footer{ background:var(--f-green); color:#e6dcc4; margin-top:clamp(48px,7vw,96px); }
.f-footer a{ color:#e6dcc4; }
.f-footer a:hover{ color:var(--f-gold); }
.f-footer__grid{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr);
  gap:var(--f-gap); padding-block:clamp(36px,5vw,64px);
}
.f-footer h4{ color:#fdfaf3; font-family:var(--f-body); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; }
.f-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.f-footer__word{ font-family:var(--f-display); font-size:28px; color:#fdfaf3; display:block; margin-bottom:10px; }
.f-footer__note{ font-size:14px; font-weight:300; color:#c9bd9f; max-width:40ch; }
.f-footer__bar{
  border-top:1px solid rgba(230,220,196,.18);
  padding-block:18px; font-size:13px; color:#c9bd9f;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
@media (max-width:820px){ .f-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .f-footer__grid{ grid-template-columns:1fr; } }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ==========================================================================
   Nachtrag aus dem Code-Review
   ========================================================================== */

/* Seitenumbruch innerhalb einer Seite oder eines Beitrags (wp_link_pages). */
.f-pagelinks{ display:flex; gap:8px; margin-top:24px; font-size:14px; }
.f-pagelinks a,
.f-pagelinks > span{
  padding:6px 12px; border-radius:999px; border:1px solid var(--f-line);
  text-decoration:none; color:var(--f-green);
}
.f-pagelinks > span{ background:var(--f-green); color:var(--f-paper); border-color:var(--f-green); }

/* Fokus muss sichtbar sein, sobald die Kacheln die einzige Bedienung sind. */
.f-swatch:focus-visible,
.f-btn:focus-visible,
.f-chip:focus-visible,
.f-cart-btn:focus-visible{
  outline:2px solid var(--f-gold); outline-offset:2px;
}
.f-swatch.is-disabled:hover{ border-color:var(--f-line); }

/* ==========================================================================
   AUFGABE 4 — Warenkorb und Checkout im Farmla-Design
   Alles hier ist reines CSS. Es wurde kein WooCommerce-Template ueberschrieben.
   Begruendung und Quellen: siehe AUFGABE-4-checkout-entscheidung.md

   Geprueft gegen WooCommerce 11.2.0, Commit 7da8ed0e, geklont am 27.08.2026.
   Quelle: https://github.com/woocommerce/woocommerce
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Klassischer Warenkorb  [woocommerce_cart]
   -------------------------------------------------------------------------- */

.woocommerce-cart .woocommerce{
  display:grid; grid-template-columns:1.6fr .9fr;
  gap:clamp(24px,4vw,48px); align-items:start;
}
.woocommerce-cart .woocommerce-notices-wrapper{ grid-column:1/-1; }
.woocommerce-cart-form{ min-width:0; }
@media (max-width:900px){
  .woocommerce-cart .woocommerce{ grid-template-columns:1fr; }
}

.woocommerce table.shop_table.cart{ margin:0; }
.woocommerce table.shop_table.cart thead th{ padding-block:12px; }
.woocommerce table.cart td.product-thumbnail{ width:96px; }
.woocommerce table.cart td.product-name a{ font-family:var(--f-display); font-size:19px; }
.woocommerce table.cart td.product-name .variation{
  margin:6px 0 0; font-size:13px; color:var(--f-green-mute);
}
.woocommerce table.cart td.product-name .variation dt,
.woocommerce table.cart td.product-name .variation dd{ display:inline; margin:0; }
.woocommerce table.cart td.product-name .variation dd{ margin-right:10px; }

/* Entfernen-Kreuz: Woo liefert ein <a class="remove">&times;</a> ohne Groesse. */
.woocommerce table.cart td.product-remove a.remove{
  width:30px; height:30px; line-height:28px; font-size:20px; font-weight:300;
  border-radius:var(--f-pill); color:var(--f-green-faint);
  background:transparent; border:1px solid var(--f-line-2); display:block; text-align:center;
}
.woocommerce table.cart td.product-remove a.remove:hover{
  background:var(--f-wine); border-color:var(--f-wine); color:var(--f-paper);
}

.woocommerce table.cart td.actions{ background:var(--f-sand-2); padding:16px; }
.woocommerce table.cart td.actions .coupon{ display:flex; gap:10px; float:none; }
.woocommerce table.cart td.actions .coupon .input-text{
  width:auto; min-width:180px; flex:0 1 240px; margin:0;
  border:1px solid var(--f-line-2); background:var(--f-paper-2);
  border-radius:var(--f-pill); padding:12px 18px; min-height:46px;
}
.woocommerce table.cart td.actions .button{ float:none; }
.woocommerce table.cart td.actions > .button[name="update_cart"]{ float:right; }
.woocommerce table.cart td.actions::after{ content:""; display:table; clear:both; }

/* Warenkorb mobil: Woo setzt auf der Tabelle bereits shop_table_responsive und
   auf jedem td ein data-title. Dadurch geht die Kartenansicht ohne Template. */
@media (max-width:600px){
  .woocommerce table.shop_table_responsive.cart thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  }
  .woocommerce table.shop_table_responsive.cart tr.woocommerce-cart-form__cart-item{
    display:grid; grid-template-columns:72px 1fr;
    grid-template-areas:"thumb name" "thumb price" "thumb qty" "sub sub";
    gap:6px 14px; padding:16px; position:relative;
    border-top:1px solid var(--f-line);
  }
  .woocommerce table.shop_table_responsive.cart tr td{
    display:block; border:0; padding:0; text-align:left;
  }
  .woocommerce table.shop_table_responsive.cart td.product-thumbnail{ grid-area:thumb; }
  .woocommerce table.shop_table_responsive.cart td.product-name{ grid-area:name; }
  .woocommerce table.shop_table_responsive.cart td.product-price{ grid-area:price; }
  .woocommerce table.shop_table_responsive.cart td.product-quantity{ grid-area:qty; }
  .woocommerce table.shop_table_responsive.cart td.product-subtotal{
    grid-area:sub; border-top:1px dashed var(--f-dashed); padding-top:10px; margin-top:6px;
  }
  .woocommerce table.shop_table_responsive.cart td.product-remove{
    position:absolute; top:14px; right:14px;
  }
  /* data-title als Label. Woo uebersetzt es mit, daher attr() statt fester Text. */
  .woocommerce table.shop_table_responsive.cart td.product-price::before,
  .woocommerce table.shop_table_responsive.cart td.product-subtotal::before{
    content:attr(data-title) ": "; font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--f-green-mute); margin-right:6px;
  }
  .woocommerce table.shop_table_responsive.cart td.actions .coupon{ flex-wrap:wrap; }
  .woocommerce table.shop_table_responsive.cart td.actions .coupon .input-text{ flex:1 1 100%; }
  .woocommerce table.cart td.actions > .button[name="update_cart"]{ float:none; width:100%; margin-top:10px; }
}

/* Summenblock */
.woocommerce .cart-collaterals{ width:100%; float:none; }
.woocommerce .cart-collaterals .cart_totals{ width:100%; float:none; position:sticky; top:24px; }
.woocommerce .cart-collaterals .cart_totals table.shop_table{ border:0; background:transparent; }
.woocommerce .cart-collaterals .cart_totals table.shop_table th,
.woocommerce .cart-collaterals .cart_totals table.shop_table td{
  background:transparent; padding:12px 0; border-top:1px solid var(--f-line);
}
.woocommerce .cart-collaterals .cart_totals tr.order-total th,
.woocommerce .cart-collaterals .cart_totals tr.order-total td{
  font-size:18px; color:var(--f-green); border-top:1px solid var(--f-line-3);
}
.woocommerce .cart-collaterals .cart_totals tr.order-total td .amount{ font-family:var(--f-display); font-size:24px; }
.woocommerce .wc-proceed-to-checkout{ padding:18px 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button{
  display:block; width:100%; text-align:center; padding:17px 26px; font-size:16px; min-height:54px;
}
/* Cross-Sells stehen im Standard-Markup neben den Summen, das passt hier nicht. */
.woocommerce .cart-collaterals .cross-sells{ width:100%; float:none; grid-column:1/-1; }

/* Leerer Warenkorb */
.woocommerce .cart-empty{ font-family:var(--f-display); font-size:var(--f-h2); }
.woocommerce .return-to-shop{ margin-top:18px; }

/* Lieferzusage im Warenkorb. Bewusst NICHT .f-delivery-note, den Namen gibt es
   oben schon fuer die kleine gruene Zeile auf der Produktseite. */
.f-cart-promise{
  background:var(--f-sand-2); border:1px solid var(--f-line-2);
  border-left:3px solid var(--f-success); border-radius:var(--f-r-sm);
  padding:14px 16px; font-size:14px; color:var(--f-green-soft); margin:16px 0 0;
}

/* --------------------------------------------------------------------------
   2. Klassischer Checkout  [woocommerce_checkout]
   Greift nur, wenn du auf den Shortcode wechselst. Schadet sonst nicht.
   -------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout.woocommerce-checkout{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,56px); align-items:start;
}
.woocommerce-checkout form.checkout #customer_details{ grid-column:1; min-width:0; }
.woocommerce-checkout form.checkout > h3#order_review_heading,
.woocommerce-checkout form.checkout > #order_review{ grid-column:2; }
.woocommerce-checkout form.checkout > #order_review{ position:sticky; top:24px; }
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2{ width:100%; float:none; }
@media (max-width:900px){
  .woocommerce-checkout form.checkout.woocommerce-checkout{ grid-template-columns:1fr; }
  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout > h3#order_review_heading,
  .woocommerce-checkout form.checkout > #order_review{ grid-column:1; }
  .woocommerce-checkout form.checkout > #order_review{ position:static; }
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last{ width:calc(50% - 8px); float:none; display:inline-block; vertical-align:top; }
.woocommerce form .form-row-first{ margin-right:14px; }
@media (max-width:520px){
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{ width:100%; margin-right:0; }
}
.woocommerce form .form-row .required{ color:var(--f-wine); text-decoration:none; }
.woocommerce form .form-row.woocommerce-invalid input.input-text{ border-color:var(--f-wine); }

.woocommerce-checkout #payment ul.payment_methods li{
  list-style:none; padding:14px 0; border-bottom:1px solid var(--f-line);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child{ border-bottom:0; }
.woocommerce-checkout #payment div.payment_box{
  background:var(--f-paper-2); border:1px solid var(--f-line-2);
  border-radius:var(--f-r-sm); font-size:14px; color:var(--f-green-soft); margin-top:12px;
}
.woocommerce-checkout #payment div.payment_box::before{ display:none; }
.woocommerce-checkout #place_order{ width:100%; padding:18px 26px; font-size:16px; min-height:56px; }

/* Anlassdatum hervorheben, klassischer Checkout.
   Woo baut die Zeilen-ID aus dem Feldschluessel plus "_field". */
.woocommerce form .form-row#farmla_event_date_field{
  background:var(--f-sand-2); border:1px solid var(--f-line-2);
  border-left:3px solid var(--f-gold); border-radius:var(--f-r-sm);
  padding:16px; margin-top:22px;
}

/* --------------------------------------------------------------------------
   3. Block-Warenkorb und Block-Checkout
   Klassennamen verifiziert im Quellcode, nicht geraten:
     .wp-block-woocommerce-checkout        blocks/checkout/styles/style.scss
     .wc-block-components-sidebar-layout   base/components/sidebar-layout/style.scss
     .wc-block-components-main             ebenda, 65 Prozent
     .wc-block-components-sidebar          ebenda, 35 Prozent
     .wc-block-components-text-input       packages/public-api/blocks-components/text-input/style.scss
     .wc-block-components-totals-item      packages/public-api/blocks-components/totals/item/style.scss
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{ font-family:var(--f-body); color:var(--f-green); }

.wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-title,
.wc-block-components-checkout-step__title{
  font-family:var(--f-display); font-weight:400; color:var(--f-green);
}
.wc-block-components-checkout-step__description{ color:var(--f-green-mute); }

/* Seitenspalte als Karte, analog zum klassischen #order_review. */
.wc-block-components-sidebar{
  background:var(--f-sand-2); border:1px solid var(--f-line-2);
  border-radius:var(--f-r-md);
}
@media (min-width:701px){
  .wc-block-components-sidebar{ padding:clamp(18px,2.4vw,26px); }
}
@media (max-width:700px){
  .wc-block-components-sidebar{ padding:18px; margin-top:24px; }
}

/* Eingabefelder.
   Die Geometrie bleibt unangetastet: die Bezeichnung ist ein absolut
   positioniertes Floating Label, das an height:50px und den Paddings haengt.
   Wer daran dreht, zerlegt den Zustand .is-active. Geaendert werden deshalb
   nur Rahmen, Radius, Flaeche und Fokus. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="number"],
.wp-block-woocommerce-cart .wc-block-components-text-input input[type="text"]{
  border-radius:var(--f-r-sm);
  border-color:var(--f-line-2);
  background-color:var(--f-paper-2);
  color:var(--f-green);
}
/* Woo setzt im Fokus border:1.5px, das verschiebt das Layout um einen halben
   Pixel. Gleiche Breite behalten, Betonung ueber Farbe und Schatten. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"]:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"]:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"]:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="number"]:focus{
  border:1px solid var(--f-gold);
  box-shadow:0 0 0 2px rgba(184,150,78,.22);
  background-color:var(--f-paper-2);
  color:var(--f-green);
}
.wp-block-woocommerce-checkout .wc-block-components-text-input label{ color:var(--f-green-mute); }

.wp-block-woocommerce-checkout .wc-block-components-select-input select,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input{
  border-radius:var(--f-r-sm); border-color:var(--f-line-2);
  background-color:var(--f-paper-2); color:var(--f-green);
}

/* Buttons. Der Pill-Radius wird gegen einen 4px-Radius aus dem Block-CSS
   gesetzt, deshalb hier die hoehere Spezifitaet ueber den Blockcontainer. */
.wp-block-woocommerce-checkout .wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-components-button,
.wc-block-components-button:not(.is-link){
  border-radius:var(--f-pill); font-family:var(--f-body); font-weight:400;
  letter-spacing:.02em;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button{
  background:var(--f-green); color:var(--f-paper);
  min-height:56px; font-size:16px;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover{ background:var(--f-gold); color:var(--f-green); }

/* Summenzeilen */
.wc-block-components-totals-item{ padding-block:10px; }
.wc-block-components-totals-item__label{ color:var(--f-green-mute); font-size:14px; }
.wc-block-components-totals-item__value{ color:var(--f-green); }
.wc-block-components-totals-footer-item{ border-top:1px solid var(--f-line-3); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--f-display); font-size:24px;
}
.wc-block-components-totals-wrapper{ border-top-color:var(--f-line); }

/* Aufklappbare Bereiche, Gutschein und Bestellzusammenfassung */
.wc-block-components-panel__button{ color:var(--f-green); font-family:var(--f-body); }
.wc-block-components-panel__button:hover{ color:var(--f-gold); }
.wc-block-components-totals-coupon__input input{ border-radius:var(--f-r-sm); }

/* Produktzeilen in der Zusammenfassung */
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img{ border-radius:var(--f-r-sm); background:var(--f-sand-3); }
.wc-block-components-product-name{ font-family:var(--f-display); font-size:17px; color:var(--f-green); }
.wc-block-components-product-metadata{ color:var(--f-green-mute); font-size:13px; }
.wc-block-components-product-price{ color:var(--f-green); }

/* Versandarten und Zahlarten */
.wc-block-components-radio-control__option{ border-radius:var(--f-r-sm); }
.wc-block-components-radio-control-accordion-option{
  border:1px solid var(--f-line-2); border-radius:var(--f-r-sm); margin-bottom:10px;
}
.wc-block-components-radio-control__label{ color:var(--f-green); }
.wc-block-components-radio-control__secondary-label{ color:var(--f-green-mute); }

/* Hinweise */
.wc-block-components-notice-banner{
  border-radius:var(--f-r-sm); border-color:var(--f-line-2); background:var(--f-sand-2);
}
.wc-block-components-notice-banner.is-error{ border-color:var(--f-wine); }

/* Anlassdatum hervorheben, Block-Checkout.
   Der Klassenname entsteht in createFieldProps() aus dem Feldschluessel,
   Schraegstriche werden zu Bindestrichen:
     farmla/event-date  ->  wc-block-components-address-form__farmla-event-date
   Quelle: base/components/cart-checkout/form/utils.ts, Zeile 46.
   Die Element-ID lautet entsprechend order-farmla-event-date. */
.wc-block-components-address-form__farmla-event-date{
  background:var(--f-sand-2); border:1px solid var(--f-line-2);
  border-left:3px solid var(--f-gold); border-radius:var(--f-r-sm);
  padding:8px 16px 16px; margin-top:18px;
}

/* Der Block-Checkout setzt container-type:inline-size auf dem Wurzelelement.
   Containerabfragen sind hier also erlaubt und zuverlaessiger als Viewport-
   Abfragen, weil sie die tatsaechliche Spaltenbreite messen.
   Quelle: blocks/checkout/styles/style.scss, Zeile 6. */
@container (max-width: 520px){
  .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-size:20px; }
}