/*
 Theme Name:   Kleiderschätze
 Theme URI:    https://kleiderschaetze.de
 Description:  Child-Theme für Kleiderschätze – kuratierte Second-Hand-Babykleidung
 Author:       Max
 Template:     storefront
 Version:      1.0.0
 Text Domain:  kleiderschaetze
*/

/* ==============================
   CSS Custom Properties
   ============================== */

:root {
  /* farben */
  --ks-bg: #fefaf4;
  --ks-header: #f8ede0;
  --ks-border: #e0d0b8;
  --ks-tile-img: #f7f0e4;
  --ks-green: #5a6e3a;
  --ks-accent: #4d6f5f;
  --ks-warmgray: #756040;
  --ks-muted: #756040;
  --ks-text: #1c1208;
  --ks-white: #ffffff;
  /* typografie */
  --ks-font-heading: 'DM Serif Text', serif;
  --ks-font-body: 'Nunito', sans-serif;
  /* layout */
  --ks-max-width: 1200px;
  --ks-gap: 10px;
  --ks-radius: 8px;
}

/* ==============================
   Basis / Storefront Overrides
   ============================== */

body,
.site-content,
.storefront-sorting,
.woocommerce-products-header {
  background-color: var(--ks-bg) !important;
}

body {
  font-family: var(--ks-font-body);
  color: var(--ks-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--ks-font-heading);
  color: var(--ks-text);
}

a {
  color: var(--ks-accent);
}

a:hover {
  color: var(--ks-green);
}

/* ==============================
   Storefront Header ausblenden
   (wir bauen unseren eigenen)
   ============================== */

.site-header {
  display: none !important;
}

/* ==============================
   Custom Header
   ============================== */

/* Logo-Zone – scrollt natürlich weg */

.ks-logo-zone {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0 1rem;
  background: var(--ks-bg);
}

.ks-logo-zone img {
  max-height: 160px;
  width: auto;
}

/* WP Admin-Bar Offset */

.admin-bar .ks-navbar {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .ks-navbar {
    top: 46px;
  }
}
/* Unter 600px scrollt die WP-Admin-Bar weg (position:absolute) -> Navbar an die Oberkante */
@media (max-width: 600px) {
  .admin-bar .ks-navbar {
    top: 0;
  }
}
/* Unter 600px scrollt die WP-Admin-Bar weg (position:absolute) -> Navbar an die Oberkante */
@media (max-width: 600px) {
  .admin-bar .ks-navbar {
    top: 0;
  }
}

.ks-navbar-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ks-navbar-links a {
  font-family: var(--ks-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ks-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ks-navbar-links a:hover {
  color: var(--ks-accent);
}

/* Mini-Logo in Navbar */

.ks-navbar-logo {
  max-height: 36px;
  width: auto;
  margin-right: 1rem;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.ks-navbar-logo-link {
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* Scrolled: Mini-Logo rein, Motto raus */

.ks-navbar.scrolled .ks-navbar-logo {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.ks-navbar.scrolled .ks-navbar-logo-link {
  pointer-events: auto;
}

.ks-navbar.scrolled .ks-navbar-motto {
  opacity: 0;
  width: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

/* ==============================
   Hero-Kacheln
   ============================== */

.ks-hero {
  margin: 2rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--ks-gap);
  height: 500px;
}

.ks-tile {
  border-radius: var(--ks-radius);
  overflow: hidden;
  border: 1px solid var(--ks-border);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ks-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(28, 18, 8, 0.08);
}

/* Große Kacheln: je 2 Rows */

.ks-tile--lieblingsstuecke {
  grid-column: 1;
  grid-row: 1 / 3;
}

.ks-tile--alltagsliebe {
  grid-column: 2;
  grid-row: 1 / 3;
}

/* Kleine Kacheln rechts gestapelt */

.ks-tile--themenwelt {
  grid-column: 3;
  grid-row: 1;
}

.ks-tile--mehr-fuers-baby {
  grid-column: 3;
  grid-row: 2;
}

.ks-tile__image {
  flex: 1;
  background: var(--ks-tile-img);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ks-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ks-tile__image-placeholder {
  font-family: var(--ks-font-body);
  font-size: 0.8rem;
  color: var(--ks-warmgray);
}

.ks-tile__footer {
  background: var(--ks-header);
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--ks-border);
}

.ks-tile__tag {
  font-family: var(--ks-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ks-warmgray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.ks-tile__name {
  font-family: var(--ks-font-heading);
  font-size: clamp(0.85rem, 2vw, 1.2rem);
  color: var(--ks-accent);
  margin-bottom: 0.15rem;
}

.ks-tile__price {
  font-family: var(--ks-font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ks-accent);
}

/* ==============================
   Katalog-Sektion
   ============================== */

.ks-catalog {
  margin: 3rem 0;
}

.ks-catalog__title {
  font-family: var(--ks-font-heading);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--ks-text);
  text-align: center;
  margin-bottom: 2rem;
}

/* WooCommerce Produkt-Grid Override */

.ks-catalog .products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ks-gap);
}

.ks-catalog .products .product {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ks-catalog .products .product:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(28, 18, 8, 0.08);
}

.ks-catalog .products .product a.woocommerce-loop-product__link {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ks-tile-img);
}

.ks-catalog .products .product a.woocommerce-loop-product__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.ks-catalog .products .product .ks-product-footer {
  background: var(--ks-header);
  border-top: 1px solid var(--ks-border);
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ks-catalog .products .product .ks-product-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ks-catalog .products .product .woocommerce-loop-product__title {
  font-family: var(--ks-font-heading);
  font-size: 0.95rem;
  color: var(--ks-accent);
  padding: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks-catalog .products .product .price {
  font-family: var(--ks-font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ks-warmgray);
  padding: 0;
  margin: 0;
}

.ks-catalog .products .product .ks-product-icons {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.ks-catalog .products .product .ks-product-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ks-accent);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.ks-catalog .products .product .ks-product-icons a:hover {
  background: var(--ks-accent);
  color: var(--ks-white);
}

.ks-catalog .products .product .ks-product-icons svg {
  width: 16px;
  height: 16px;
}

/* §19 + Warenkorb-Button in Übersicht verstecken */

.ks-catalog .products .woocommerce-gzd-product-notice,
.ks-catalog .products .product form.cart,
.ks-catalog .products .product .button,
.ks-catalog .products .product .add_to_cart_button {
  display: none !important;
}

/* ==============================
   WooCommerce Button Overrides
   ============================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
  border-radius: 999px;
  font-family: var(--ks-font-body);
  font-weight: 600;
  border: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--ks-accent) !important;
}

/* ==============================
   Footer Override
   ============================== */

.site-footer {
  background: var(--ks-header) !important;
  border-top: 1px solid var(--ks-border);
}

.site-info {
  font-family: var(--ks-font-body);
  color: var(--ks-warmgray);
}

/* ==============================
   Responsive
   ============================== */

@media (max-width: 768px) {
  .ks-hero {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }

  .ks-tile--lieblingsstuecke {
    grid-column: 1;
    grid-row: 1;
  }

  .ks-tile--alltagsliebe {
    grid-column: 2;
    grid-row: 1;
  }

  .ks-tile--themenwelt {
    grid-column: 1;
    grid-row: 2;
  }

  .ks-tile--mehr-fuers-baby {
    grid-column: 2;
    grid-row: 2;
  }

  /* Große Kacheln höher als kleine */
  .ks-tile--lieblingsstuecke,
  .ks-tile--alltagsliebe {
    min-height: 280px;
  }

  .ks-tile--themenwelt,
  .ks-tile--mehr-fuers-baby {
    min-height: 200px;
  }

  .ks-catalog .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Mobile Navbar */
  .ks-navbar-motto {
    display: none;
  }

  .ks-navbar {
    justify-content: center;
    padding: 0 1rem;
  }

  .ks-navbar-links {
    gap: 1rem;
    font-size: 0.85rem;
  }

  .ks-logo-zone img {
    max-height: 120px;
  }
}

@media (max-width: 480px) {
  .ks-navbar-links {
    gap: 0.6rem;
  }

  .ks-navbar-links a {
    font-size: 0.8rem;
  }

  }

/* Fix: Storefront overflow killt sticky */

#page,
.site,
.hentry,
.site-content,
.content-area {
  overflow: visible !important;
  overflow-x: clip !important;
}

/* ==============================
   Navbar Icons (Merkzettel + Warenkorb)
   ============================== */

.ks-nav-icon {
  list-style: none;
}

.ks-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ks-accent) !important;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none !important;
}

.ks-icon-btn:hover {
  background: var(--ks-accent) !important;
  color: var(--ks-white) !important;
}

.ks-icon-btn svg {
  width: 20px;
  height: 20px;
}

.ks-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--ks-accent);
  color: var(--ks-white);
  font-family: var(--ks-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mottozeile: absolut zentriert, verschwindet bei wenig Platz */

.ks-navbar {
  background: var(--ks-header);
  border-top: 1px solid var(--ks-border);
  border-bottom: 1px solid var(--ks-border);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 999;
}

.ks-navbar-motto {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ks-font-body);
  font-size: 0.85rem;
  color: var(--ks-warmgray);
  font-style: italic;
  white-space: nowrap;
  pointer-events: none;
}

@media (min-width: 900px) {
  .ks-navbar-motto {
    display: block;
  }
}

/* Katalog: störende WC/TI-Elemente unterhalb Footer verstecken */

.ks-catalog .products .product .woocommerce-gzd-product-notice,
.ks-catalog .products .product p.price,
.ks-catalog .products .product h2.woocommerce-loop-product__title,
.ks-catalog .products .product .tinv-wishlist,
.ks-catalog .products .product .added_to_cart,
.ks-catalog .products .product form.cart,
.ks-catalog .products .product .button {
  display: none !important;
}

/* WC Placeholder-Bild Hintergrund anpassen */

.ks-catalog .products .product img.woocommerce-placeholder {
  object-fit: contain;
  padding: 2rem;
  background: var(--ks-tile-img);
}

/* Cover-Bild am Ende der Detailseite */



.ks-cover-bottom img {
  width: 100%;
  border-radius: var(--ks-radius);
  border: 1px solid var(--ks-border);
}

/* ==============================
   Produktdetailseite
   ============================== */

/* Titel: DM Serif Text, kleiner */

.product_title {
  font-family: var(--ks-font-heading) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 400 !important;
  color: var(--ks-text) !important;
}

/* Preis */

.single-product .price {
  font-family: var(--ks-font-body) !important;
  font-size: 1.2rem !important;
  color: var(--ks-accent) !important;
}

/* "1 vorrätig" verstecken */

.woocommerce-variation-availability,
.stock {
  display: none !important;
}

/* Lupe verstecken */

.woocommerce-product-gallery__trigger {
  display: none !important;
}

/* Kategorie-Link + bearbeiten-Link verstecken */

.posted_in,
a.wc-forward[href*="bearbeiten"] {
  display: none !important;
}
/* Germanized-Hinweise nur im Katalog/Loop verstecken, auf der Produktseite sichtbar */
ul.products li.product .wc-gzd-additional-info {
  display: none !important;
}

/* Tabs: Zusätzliche Informationen + Rezensionen verstecken */

.woocommerce-tabs .reviews_tab,
.woocommerce-tabs .additional_information_tab,
#tab-reviews,
#tab-additional_information {
  display: none !important;
}

/* Tab-Nav: wenn nur Beschreibung übrig, Nav ausblenden */

.woocommerce-tabs ul.tabs {
  display: none !important;
}

/* Beschreibung direkt, ohne Tab-Wrapper */

.woocommerce-tabs .woocommerce-Tabs-panel--description {
  padding: 0 !important;
  border: none !important;
  max-width: 720px;
  margin: 0 auto !important;
  float: none !important;
  width: 100% !important;
}

.single-product .woocommerce-tabs {
  padding-top: 0.5rem !important;
  clear: both;
}

/* Breadcrumb stylen */

.woocommerce-breadcrumb {
  font-family: var(--ks-font-body);
  font-size: 0.82rem;
  color: var(--ks-warmgray);
  padding: 1rem 0 0.5rem !important;
}

.woocommerce-breadcrumb a {
  color: var(--ks-accent) !important;
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

/* Sticky Add-to-Cart Bar (Storefront) ausblenden */

.storefront-sticky-add-to-cart {
  display: none !important;
}

/* Zurück-Link */

.ks-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--ks-font-body);
  font-size: 0.85rem;
  color: var(--ks-warmgray);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color 0.2s ease;
}

.ks-back-link:hover {
  color: var(--ks-accent);
}

.ks-back-link svg {
  width: 16px;
  height: 16px;
}

/* Warenkorb Button Eukalyptus */

/* Warenkorb-Button Eukalyptus auf Detailseite */

/* Warenkorb-Button Detailseite – Eukalyptus */

.single-product .button.alt,
.single-product input.button.alt {
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
}

/* Warenkorb FORCE Eukalyptus */

.single-product form.cart button {
  background-color: var(--ks-accent) !important;
  color: #ffffff !important;
}

/* Beschreibungs-Heading auf Produktseite ausblenden */

.single-product .woocommerce-Tabs-panel--description h2,
.single-product .woocommerce-product-details__short-description h2 {
  display: none !important;
}

.single-product .single_add_to_cart_button::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Warenkorb-Button: gleiche Höhe */

.single-product .single_add_to_cart_button {
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0.6rem 1.25rem !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  height: 44px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* ==============================
   WooCommerce Archiv/Shop-Seite
   ============================== */

/* Wishlist-Button in Produktlisten verstecken (nicht Detailseite) */

.woocommerce ul.products li.product .tinv-wishlist {
  display: none !important;
}

/* Seitenüberschrift */

.woocommerce-products-header .page-title {
  font-family: 'DM Serif Text', serif !important;
  color: var(--ks-body) !important;
  text-align: center !important;
  font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
  margin-bottom: 1rem !important;
}

/* Ergebnis-Counter + Sortierung */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.85rem !important;
  color: var(--ks-muted) !important;
}

.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--ks-border) !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.6rem !important;
  background: #fff !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'DM Serif Text', serif !important;
  font-size: 1rem !important;
  color: var(--ks-body) !important;
}

.woocommerce ul.products li.product .price {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 500 !important;
  color: var(--ks-accent) !important;
}



/* ==============================
   Footer
   ============================== */

.ks-footer-links {
  text-align: center;
  padding: 1.5rem 1rem 0.75rem;
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem;
}

.ks-footer-links a {
  color: var(--ks-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.ks-footer-links a:hover {
  color: var(--ks-accent);
}

.ks-footer-copy {
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  color: var(--ks-muted);
  padding: 0.25rem 1rem 0.5rem;
}

.ks-footer-tax {
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  color: var(--ks-muted);
  padding: 0 1rem 1.5rem;
}

.ks-footer-tax a {
  color: var(--ks-accent);
  text-decoration: none;
}

.ks-footer-tax a:hover {
  text-decoration: underline;
}
.site-footer a.button {
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
  border: none;
  border-radius: var(--ks-radius);
  padding: 0.6rem 1.5rem;
  font-family: var(--ks-font-body);
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-block;
  transition: box-shadow 0.2s, transform 0.2s;
}
.site-footer a.button:hover {
  box-shadow: 0 4px 14px rgba(28,18,8,0.18);
  transform: translateY(-1px);
  color: var(--ks-white) !important;
}

/* ==============================
   Wunschliste/Merkzettel-Seite
   ============================== */

/* Seitenüberschrift */

.page-id-87 .entry-title {
  font-family: 'DM Serif Text', serif !important;
}

/* TI Wishlist Tabelle: Buttons eindeutschen per CSS + stylen */

.tinv-wishlist .button.product_type_simple {
  font-size: 0 !important;
}

.tinv-wishlist .button.product_type_simple::after {
  content: 'In den Warenkorb' !important;
  font-size: 0.85rem !important;
}

.tinv-wishlist .tinvwl-table-manage-list .button {
  background: var(--ks-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1rem !important;
}

/* ==============================
   Produktkarten – Global (Shop + Startseite)
   ============================== */

/* WC-Standard-Elemente in allen Produktlisten verstecken */

ul.products li.product h2.woocommerce-loop-product__title,
ul.products li.product > .price,
ul.products li.product > .woocommerce-gzd-product-notice,
ul.products li.product > .tinv-wishlist,
ul.products li.product > form.cart,
ul.products li.product > .button,
ul.products li.product > .add_to_cart_button,
ul.products li.product > .added_to_cart {
  display: none !important;
}

/* Karte: Border + Overflow für saubere Ecken */

.woocommerce ul.products li.product {
  border: 1px solid var(--ks-border) !important;
  border-radius: var(--ks-radius, 12px) !important;
  overflow: hidden !important;
  background: var(--ks-bg) !important;
  padding: 0 !important;
}

/* Bild: volle Breite, keine eigene Border */

.woocommerce ul.products li.product a img {
  border-radius: 0 !important;
  border: none !important;
  width: 100% !important;
  display: block !important;
}

/* Custom Footer: global (nicht nur .ks-catalog) */

ul.products li.product .ks-product-footer {
  background: var(--ks-header);
  border-top: 1px solid var(--ks-border);
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Stretched Link: ganzer Footer klickbar, Bookmark bleibt eigenstaendig */
ul.products li.product a.ks-product-info::after {
  content: "";
  position: absolute;
  inset: 0;
}

ul.products li.product .ks-product-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}

ul.products li.product .ks-product-footer .woocommerce-loop-product__title {
  font-family: var(--ks-font-heading) !important;
  font-size: 0.95rem !important;
  color: var(--ks-accent) !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.products li.product .ks-product-footer .price {
  font-family: var(--ks-font-body) !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  color: var(--ks-warmgray) !important;
  padding: 0 !important;
  margin: 0 !important;
}

ul.products li.product .ks-product-icons {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

ul.products li.product .ks-product-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ks-accent);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

ul.products li.product .ks-product-icons a:hover {
  background: var(--ks-accent);
  color: var(--ks-white, #ffffff);
}

ul.products li.product .ks-product-icons svg {
  width: 16px;
  height: 16px;
}

/* ==============================
   Fix: Shop-Kacheln Lücke schließen
   ============================== */

/* Versteckte Elemente: Margin/Padding eliminieren */

ul.products li.product h2.woocommerce-loop-product__title,
ul.products li.product > .price,
ul.products li.product > .woocommerce-gzd-product-notice {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

/* Link-Wrapper: kein Abstand nach unten */

.woocommerce ul.products li.product > a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bild: kein margin */

.woocommerce ul.products li.product > a > img {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==============================
   Merkzettel-Button: Detailseite (konsolidiert)
   ============================== */

.single-product .summary .tinv-wishlist {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-left: 0.75rem !important;
  margin-top: 0 !important;
}

.single-product .tinv-wishlist .tinvwl_add_to_wishlist_button > * {
  display: none !important;
}

.single-product .tinv-wishlist .tinvwl_add_to_wishlist_button::before {
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d6f5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

.single-product .tinv-wishlist .tinvwl_add_to_wishlist_button:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234d6f5f' stroke='%234d6f5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
}

.single-product .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234d6f5f' stroke='%234d6f5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
}

/* ==============================
   Focus-Ring: Eukalyptus statt violett
   ============================== */

*:focus {
  outline: none !important;
  box-shadow: none !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--ks-accent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Fix: Warenkorb + Merkzettel exakt gleiche Höhe */

.single-product form.cart,
.single-product .summary > .tinv-wishlist {
  vertical-align: top !important;
}

.single-product .tinv-wishlist .tinvwl_add_to_wishlist_button {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid var(--ks-accent) !important;
  border-radius: 6px !important;
  background: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
  box-sizing: border-box !important;
  position: relative !important;
  outline: none !important;
}

/* Fix: Merkzettel + Warenkorb gleiche Linie */

.single-product form.cart {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: auto !important;
  margin: 0 0.75rem 0 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

.single-product form.cart .quantity {
  display: none !important;
}

.single-product .summary > .tinv-wishlist,
.single-product .summary .tinv-wraper {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

/* ===== Galerie: Zoom aus, Pfeile, Lightbox ===== */

.woocommerce-product-gallery__image img {
  cursor: pointer !important;
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Alle FlexSlider control navs ausblenden (Dots + Paging) – Thumbnails bleiben */

.woocommerce-product-gallery .flex-control-paging,
.woocommerce-product-gallery .flex-direction-nav .flex-disabled {
  display: none !important;
}

/* Gallery + Viewport als Anker */

.woocommerce-product-gallery {
  position: relative;
}

.woocommerce-product-gallery .flex-viewport {
  position: relative;
  overflow: hidden;
}

/* Dots/Paging ausblenden */

.woocommerce-product-gallery .flex-control-paging {
  display: none !important;
}

/* Nav-Wrapper (sitzt jetzt per JS im Viewport) */

.woocommerce-product-gallery .flex-viewport > .flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pfeile: weiss, ohne Kreis, mittig im Viewport */

.woocommerce-product-gallery .flex-direction-nav a {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  margin: 0;
  opacity: 0;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
  background: none !important;
  border: none;
  box-shadow: none;
  transition: opacity 0.2s;
  display: block;
}

.woocommerce-product-gallery:hover .flex-direction-nav a {
  opacity: 0.7;
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
  opacity: 1 !important;
}

.woocommerce-product-gallery .flex-direction-nav a::before {
  content: '' !important;
  font-family: inherit !important;
  font-size: 0 !important;
  display: block;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  text-indent: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev {
  left: 12px;
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

.woocommerce-product-gallery .flex-direction-nav .flex-next {
  right: 12px;
}

.woocommerce-product-gallery .flex-direction-nav .flex-next::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* PhotoSwipe – grosse weisse Pfeile ohne Kreis */

.pswp__button--arrow--left,
.pswp__button--arrow--right {
  width: 50px !important;
  height: 50px !important;
  top: 50% !important;
  margin-top: -25px !important;
  opacity: 0.7;
  transition: opacity 0.2s;
  background: none !important;
}

.pswp__button--arrow--left {
  left: 16px !important;
}

.pswp__button--arrow--right {
  right: 16px !important;
}

.pswp__button--arrow--left:hover,
.pswp__button--arrow--right:hover {
  opacity: 1;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
  background-color: transparent !important;
  width: 50px !important;
  height: 50px !important;
  background-size: 44px 44px !important;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
}

.pswp__button--arrow--left::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
}

.pswp__button--arrow--right::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

/* PhotoSwipe Hintergrund */

.pswp__bg {
  background: rgba(28, 18, 8, 0.92) !important;
}

/* ==============================
   Fix: Cart/Checkout Layout-Bug
   (Float-Spalten wurden durch fehlendes
   box-sizing: border-box gesprengt und
   durch overflow-x: clip abgeschnitten)
   ============================== */

.woocommerce-cart *,
.woocommerce-checkout * {
  box-sizing: border-box !important;
}

/* Fix: WooCommerce Block-Checkout "alignwide" sprengt entry-content (980px) */

.entry-content .wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.entry-content .wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-cart.alignwide {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==============================
   Einheitlicher Hover: kein Farbwechsel,
   nur leichter Schatten (Produktseite + Cart + Checkout)
   ============================== */

.single-product .single_add_to_cart_button:hover,
.single-product button[name="add-to-cart"]:hover,
.single-product .button.alt:hover,
.single-product form.cart button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
  box-shadow: 0 4px 14px rgba(28, 18, 8, 0.18) !important;
  transform: translateY(-1px);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Cart + Checkout: rechteckig mit abgerundeten Ecken statt Pille */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
  border-radius: var(--ks-radius) !important;
  border: none !important;
  font-family: var(--ks-font-body) !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
}

/* ==============================
   WooCommerce Erfolgsmeldung ("... wurde hinzugefügt")
   ============================== */

.woocommerce-message {
  background-color: var(--ks-header) !important;
  border: 1px solid var(--ks-border) !important;
  border-left: 4px solid var(--ks-accent) !important;
  color: var(--ks-text) !important;
  border-radius: var(--ks-radius) !important;
}

.woocommerce-message::before {
  color: var(--ks-accent) !important;
}

.woocommerce-message a,
.woocommerce-message a.button {
  color: var(--ks-text) !important;
}

.woocommerce-message .button {
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
  border-radius: var(--ks-radius) !important;
  border-left: none !important;
}

/* ==============================
   Merkzettel-Button: Schatten + Anheben beim Hover
   (Outline bleibt, kein Fill – nur zusätzlicher Effekt)
   ============================== */

.single-product .tinv-wishlist .tinvwl_add_to_wishlist_button:hover {
  background: none !important;
  box-shadow: 0 4px 14px rgba(28, 18, 8, 0.18) !important;
  transform: translateY(-1px);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Fix: "Warenkorb anzeigen"-Button (wc-forward), Groesse wie Warenkorb-Button */

.woocommerce-message a.button.wc-forward {
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
  border-radius: var(--ks-radius) !important;
  border: none !important;
  padding: 0.6rem 1.25rem !important;
  height: 44px !important;
  box-sizing: border-box !important;
  float: none !important;
  line-height: 1.4 !important;
  font-family: var(--ks-font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.woocommerce-message a.button.wc-forward:hover {
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
  opacity: 1 !important;
  box-shadow: 0 4px 14px rgba(28, 18, 8, 0.18) !important;
  transform: translateY(-1px);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ==============================
   .ks-cta – einheitlicher Standalone-Button
   (Danke-Seite, 404, künftige Unterseiten)
   ============================== */

a.button.ks-cta,
.ks-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0.6rem 1.5rem !important;
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
  border-radius: var(--ks-radius) !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.button.ks-cta:hover,
.ks-cta:hover {
  background-color: var(--ks-accent) !important;
  color: var(--ks-white) !important;
  box-shadow: 0 4px 14px rgba(28, 18, 8, 0.18) !important;
  transform: translateY(-1px);
}

/* ============================================================
   UNTERSEITEN (.ks-page) + BAUSTEINE  [Session 5, Juli 2026]
   page.php rendert normale Seiten in dieser Struktur.
   Bausteine (im Block-Editor als HTML nutzbar):
   - Button:  <a class="button ks-cta" href="...">Text</a>
   - FAQ:     <details class="ks-faq"><summary>Frage?</summary>
              <div class="ks-faq-body"><p>Antwort.</p></div></details>
   - Kacheln: <div class="ks-kachel-grid"> <a class="ks-kachel" href="...">
              <span class="ks-kachel-img"></span> (oder <img class="ks-kachel-img" src="...">)
              <span class="ks-kachel-footer"><span class="ks-kachel-name">Name</span>
              <span class="ks-kachel-price">ab 20 €</span></span> </a> </div>
   ============================================================ */

.ks-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  font-family: var(--ks-font-body);
  color: var(--ks-text);
}

.ks-page .ks-page-title {
  font-family: var(--ks-font-heading);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  text-align: center;
  color: var(--ks-text);
  margin: 0 0 2rem;
}

.ks-page h2 {
  font-family: var(--ks-font-heading);
  font-size: 1.35rem;
  color: var(--ks-accent);
  margin: 2.2rem 0 0.75rem;
}

.ks-page h3 {
  font-family: var(--ks-font-heading);
  font-size: 1.1rem;
  color: var(--ks-text);
  margin: 1.6rem 0 0.5rem;
}

.ks-page p,
.ks-page li {
  font-size: 1rem;
  line-height: 1.7;
}

.ks-page p {
  margin: 0 0 1rem;
}

.ks-page ul,
.ks-page ol {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}

.ks-page a {
  color: var(--ks-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ks-page a:hover {
  color: var(--ks-green);
}

.ks-page a.button.ks-cta {
  color: var(--ks-white);
  text-decoration: none;
}

.ks-page hr {
  border: none;
  border-top: 1px solid var(--ks-border);
  margin: 2rem 0;
}

.ks-page .ks-center {
  text-align: center;
}

/* FAQ-Baustein (aufklappbar) */

.ks-faq {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  background: var(--ks-header);
  margin: 0 0 0.6rem;
  overflow: hidden;
}

.ks-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 0.8rem 1rem;
  font-family: var(--ks-font-heading);
  font-size: 1rem;
  color: var(--ks-text);
}

.ks-faq summary::-webkit-details-marker {
  display: none;
}

.ks-faq summary::after {
  content: '+';
  float: right;
  color: var(--ks-accent);
  font-family: var(--ks-font-body);
  font-weight: 600;
}

.ks-faq[open] summary::after {
  content: '\2013';
}

.ks-faq .ks-faq-body {
  padding: 0.2rem 1rem 0.9rem;
}

.ks-faq .ks-faq-body p:last-child {
  margin-bottom: 0;
}

/* Kachel-Baustein: statische Kacheln im Katalog-Look */

.ks-kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--ks-gap);
  margin: 1.5rem 0;
}

.ks-kachel {
  display: block;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  overflow: hidden;
  background: var(--ks-bg);
  text-decoration: none !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.ks-kachel:hover {
  box-shadow: 0 4px 14px rgba(28, 18, 8, 0.12);
  transform: translateY(-1px);
}

.ks-kachel .ks-kachel-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--ks-tile-img);
  object-fit: cover;
}

.ks-kachel .ks-kachel-footer {
  background: var(--ks-header);
  border-top: 1px solid var(--ks-border);
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ks-kachel .ks-kachel-name {
  font-family: var(--ks-font-heading);
  font-size: 0.95rem;
  color: var(--ks-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks-kachel .ks-kachel-price {
  font-family: var(--ks-font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ks-warmgray);
}

/* Shop-/Kategorie-Seiten: gleicher Container wie Startseiten-Katalog (1200px),
   damit die Kacheln identisch gross sind */

.col-full {
  max-width: var(--ks-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
}

/* Shop-/Kategorieseiten: Produktliste im selben Grid wie .ks-catalog
   (Storefront-Floats mit 21,74%-Breite raus, sonst Kacheln kleiner) */
.post-type-archive-product ul.products,
.tax-product_cat ul.products,
.single-product ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ks-gap);
}

.post-type-archive-product ul.products li.product,
.tax-product_cat ul.products li.product,
.single-product ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .post-type-archive-product ul.products,
  .tax-product_cat ul.products,
  .single-product ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Leerer Warenkorb: Cross-Sell-Kacheln im selben 4er-Grid wie Shop */
.woocommerce-cart ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ks-gap);
}

.woocommerce-cart ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .woocommerce-cart ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Warenkorb: Abstand Titel -> Inhalt verkleinern (Storefront-Header-Padding) */
.woocommerce-cart .entry-header {
  padding-bottom: 0 !important;
}

/* Kleiderbuegel-SVG (leerer Warenkorb): mittig zwischen Titel und Text
   (p > svg, damit wc-block-SVGs im gefuellten Warenkorb nicht getroffen werden) */
.woocommerce-cart .entry-content p > svg {
  display: block;
  margin: 1.5rem auto 0.5rem;
}

/* Paket-Kachel-Variante: Info als Link + Merkzettel-Icon im Footer */

.ks-kachel .ks-kachel-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none !important;
  min-width: 0;
}

.ks-kachel .ks-kachel-info:hover {
  text-decoration: none !important;
}

.ks-kachel .ks-kachel-price sup {
  font-size: 0.7em;
  color: var(--ks-warmgray);
}

.ks-kachel .ks-kachel-bookmark {
  display: inline-flex;
  align-items: center;
  color: var(--ks-accent);
  flex-shrink: 0;
}

.ks-kachel .ks-kachel-bookmark svg {
  width: 20px;
  height: 20px;
}

/* Katalog-Kacheln (echte Produkte): Name+Preis-Bereich als Link */

.ks-product-footer a.ks-product-info {
  text-decoration: none !important;
  min-width: 0;
}

/* wpautop-Schutz: WordPress-eingefuegte <br>/<p> in Kacheln neutralisieren */

.ks-kachel br,
.ks-kachel-grid > br,
.ks-kachel-grid > p:empty {
  display: none;
}

/* Wunschliste: Share-Zeile komplett ausblenden (inkl. TI "false"-Bug) */
.tinv-wishlist .social-buttons {
  display: none !important;
}

/* ==============================
   Wunschliste: Tabellen-Design
   ============================== */

/* Unnoetige Spalten ausblenden */
.tinv-wishlist .product-stock,
.tinv-wishlist .product-date {
  display: none !important;
}

/* Tabelle: Rahmen + Rundung */
.tinv-wishlist table.tinvwl-table-manage-list {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

/* Header: beiger Hintergrund */
.tinv-wishlist table thead th {
  background: var(--ks-header);
  border-bottom: 1px solid var(--ks-border);
  font-family: var(--ks-font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ks-text);
  padding: 0.75rem 1rem;
  text-align: left;
}

/* Zellen */
.tinv-wishlist table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ks-border);
  vertical-align: middle;
  font-family: var(--ks-font-body);
  font-size: 0.9rem;
  color: var(--ks-text);
}

.tinv-wishlist table tbody tr:last-child td {
  border-bottom: none;
}

/* Thumbnail etwas groesser + abgerundet */
.tinv-wishlist .product-thumbnail img {
  width: 64px !important;
  height: auto !important;
  border-radius: var(--ks-radius);
}

/* Produktname: Eukalyptus-Link */
.tinv-wishlist .product-name a {
  color: var(--ks-accent) !important;
  text-decoration: none;
  font-family: var(--ks-font-heading);
  font-size: 1rem;
}

.tinv-wishlist .product-name a:hover {
  text-decoration: underline;
}

/* Preis */
.tinv-wishlist .product-price {
  font-weight: 500;
  color: var(--ks-warmgray);
}

/* Entfernen-Button (x) */
.tinv-wishlist .product-remove button {
  color: var(--ks-warmgray) !important;
  background: none !important;
  border: none !important;
  font-size: 1.1rem;
  cursor: pointer;
}

.tinv-wishlist .product-remove button:hover {
  color: var(--ks-accent) !important;
}

/* Checkbox-Spalte schlanker */
.tinv-wishlist .product-cb {
  width: 32px;
  text-align: center;
}

/* Aktionsleiste unter der Tabelle */
.tinv-wishlist .tinvwl-table-manage-list ~ .tinvwl-table-manage-list-footer,
.tinv-wishlist tfoot {
  border-top: 1px solid var(--ks-border);
}

/* "In den Warenkorb"-Button in der Tabelle */
.tinv-wishlist .product-action .button {
  background: var(--ks-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ks-radius) !important;
  padding: 0.5rem 1rem !important;
  font-family: var(--ks-font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tinv-wishlist .product-action .button:hover {
  box-shadow: 0 4px 14px rgba(28, 18, 8, 0.18);
  transform: translateY(-1px);
}

/* Aktionen-Dropdown + "Aktion anwenden" ausblenden (redundant) */
.tinv-wishlist tfoot .tinvwl-to-left {
  display: none !important;
}

/* Warenkorb-Buttons im tfoot linksbuendig */
.tinv-wishlist tfoot .tinvwl-to-right {
  text-align: left !important;
  float: none !important;
}

/* Collage / Cover-Bild am Ende der Produktdetailseite – volle Container-Breite
   (content-area ist auf Produktseiten bereits full-width, kein Ausbruch noetig) */
.ks-cover-bottom {
  clear: both;
  margin: 2rem 0;
  width: 100%;
  max-width: none;
}

.ks-cover-bottom img {
  width: 100% !important;
  max-width: none !important;
  height: auto;
  border-radius: var(--ks-radius);
}

ul.products li.product {
  position: relative;
}
ul.products li.product img {
  margin-bottom: 0 !important;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
ul.products li.product .woocommerce-loop-product__title:empty {
  display: none;
}

/* Germanized Lieferzeit + WC-Block Produktdetails: Kontrast + Mindestgroesse (BFSG) */
.wc-block-components-product-details__value,
.wc-block-components-product-details__name,
.legal-price-info .wc-gzd-additional-info,
.delivery-time-inner,
p.wc-gzd-cart-info {
  color: var(--ks-warmgray) !important;
  font-size: 0.85rem !important;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal;
}

/* ============================================================
   MEIN KONTO (Phase 4.14)
   ============================================================ */
.woocommerce-MyAccount-navigation { margin-bottom: 2rem; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; background: none; border: none; }
.woocommerce-MyAccount-navigation li { margin: 0 0 0.4rem 0; border: none; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 0.6rem 1rem; font-family: 'Nunito', sans-serif; font-size: 1rem; color: #1c1208; text-decoration: none; border-left: 3px solid transparent; border-radius: 0 var(--ks-radius) var(--ks-radius) 0; transition: background 0.15s ease, color 0.15s ease; }
.woocommerce-MyAccount-navigation li a::before, .woocommerce-MyAccount-navigation li a::after { display: none !important; }
.woocommerce-MyAccount-navigation li a:hover { color: var(--ks-accent); background: var(--ks-header); }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--ks-accent); font-weight: 700; border-left-color: var(--ks-accent); background: var(--ks-header); }
.woocommerce-MyAccount-content { padding-left: 1rem; }
.woocommerce-MyAccount-content .button, .woocommerce-MyAccount-content .woocommerce-button { border-radius: var(--ks-radius) !important; }

.ks-dash-hello { font-family: 'DM Serif Text', serif; font-size: 1.4rem; color: var(--ks-accent); margin-bottom: 0.75rem; }

/* Tabellen (Bestellungen etc.) – analog Wunschliste */
.woocommerce-MyAccount-content table.shop_table { border: 1px solid var(--ks-border); border-radius: var(--ks-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce-MyAccount-content table.shop_table thead th { background: var(--ks-header); font-family: 'Nunito', sans-serif; font-weight: 700; border-bottom: 1px solid var(--ks-border); }
.woocommerce-MyAccount-content table.shop_table td { border-bottom: 1px solid var(--ks-border); }
.woocommerce-MyAccount-content table.shop_table tbody tr:last-child td { border-bottom: none; }

/* Gebrauchtwaren-Hinweis Produktseite (Phase 4.14) */
.ks-used-goods-notice { font-size: 0.85rem; color: var(--ks-warmgray); font-style: italic; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--ks-border); }

/* UNTERKATEGORIE-KACHELN auf "Mehr fürs Baby"-Kategorieseite (Phase 4.15)
   Zwei nebeneinander, flacher als Hero-Kacheln, gleicher Kachel-Stil */
.ks-subcat-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ks-gap);
  margin-bottom: 2rem;
}
.ks-subcat-hero .ks-kachel-img.ks-subcat-img {
  aspect-ratio: 5 / 2;
  object-fit: contain;
}
.ks-subcat-hero .ks-kachel .ks-kachel-footer {
  padding: 0.75rem 1rem;
}
@media (max-width: 600px) {
  .ks-subcat-hero {
    grid-template-columns: 1fr;
  }
}

/* ===== Produktdetail: Thumbnail-Leiste als eine scrollbare Reihe (3 sichtbar) =====
   Storefront rendert .flex-control-thumbs als Float-Grid mit allen Bildern.
   Hier: eine Zeile, horizontal scrollbar, aktives Thumb wird per JS in Sicht gescrollt. */
.single-product .flex-control-thumbs::before,
.single-product .flex-control-thumbs::after {
  content: none !important;
}

.single-product .flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 10px 0 0 0 !important;
  padding: 0 0 6px 0 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--ks-border) transparent;
}

.single-product .flex-control-thumbs li {
  flex: 0 0 calc((100% - 32px) / 5);
  scroll-snap-align: start;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  list-style: none;
}

.single-product .flex-control-thumbs li img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ks-radius);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.single-product .flex-control-thumbs li img:hover,
.single-product .flex-control-thumbs li img.flex-active {
  opacity: 1;
}

/* Produktgalerie: Subpixel-Bleed des Nachbar-Slides abschneiden (Slides 457.042px breit,
   FlexSlider-Transform rundet auf ganze Pixel -> 1px Nachbarbild lugt rechts rein) */
.woocommerce-product-gallery .flex-viewport {
  clip-path: inset(0 1px 0 0);
}

/* ============================================================
   GRID-FIX: Storefront-Clearfix im Produkt-Grid
   Storefront setzt .products::before/::after als Clearfix (display:table).
   Bei display:grid werden diese Pseudoelemente zu Grid-Items und
   belegen je eine Zelle -> alle Kacheln um eine Spalte verschoben.
   ============================================================ */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
  display: none;
}

/* ============================================================
   BLOCK-CHECKOUT: Hinweise (§19 UStG + Gebrauchtware)
   Eingehaengt per render_block in functions.php
   (ks_checkout_block_notices), da Germanized Free die
   Checkout-Hinweise nur im klassischen Checkout rendert.
   ============================================================ */
.ks-checkout-tax-notice {
  font-size: 0.75rem;
  color: var(--ks-warmgray);
  margin: 0.5rem 0 0;
  text-align: right;
  line-height: 1.3;
}
.ks-used-goods-notice.ks-checkout-used-goods {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-top: 0;
  padding-bottom: 0.75rem;
  border-top: none;
  border-bottom: 1px solid var(--ks-border);
}

/* ---- Footer: Newsletter-Hinweis ---- */
.ks-footer-newsletter {
    text-align: center;
    max-width: 420px;
    margin: 0 auto 1.6em;
    padding-bottom: 1.6em;
    border-bottom: 1px solid #e0d0b8;
}
.ks-footer-newsletter-head {
    font-family: 'DM Serif Text', Georgia, serif;
    font-size: 1.25em;
    color: #4d6f5f;
    margin: 0 0 0.25em;
}
.ks-footer-newsletter-text {
    font-size: 0.92em;
    color: #756040;
    margin: 0 0 1em;
}
.ks-footer-newsletter a.ks-footer-newsletter-link {
    text-decoration: none;
}
.ks-footer-newsletter-link {
    display: inline-block;
    padding: 0.55em 1.5em;
    border: 1px solid #4d6f5f;
    border-radius: 4px;
    color: #4d6f5f;
    text-decoration: none;
    font-size: 0.98em;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.ks-footer-newsletter-link:hover,
.ks-footer-newsletter-link:focus {
    background-color: #4d6f5f;
    color: #fefaf4;
    text-decoration: none;
}

/* ===== Ankaufformular ===== */
.ks-form { max-width: 640px; margin: 2em auto; }
.ks-form label { display: block; font-weight: 500; margin-bottom: .35em; }
.ks-form input[type="text"],
.ks-form input[type="email"],
.ks-form textarea {
	width: 100%; padding: .7em .9em;
	border: 1px solid #e0d0b8; border-radius: 6px;
	background: #fff; font-family: inherit; font-size: 1rem;
}
.ks-form input:focus, .ks-form textarea:focus {
	outline: 2px solid #4d6f5f; outline-offset: 1px; border-color: #4d6f5f;
}
.ks-form p { margin-bottom: 1.4em; }
.ks-form .ks-hint { display: block; font-size: .88rem; color: #756040; margin-bottom: .5em; }
.ks-form .ks-opt { font-weight: 400; color: #756040; }
.ks-form .ks-check label {
	display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: start;
	font-weight: 400; font-size: .95rem; line-height: 1.5;
}
.ks-form .ks-check input { margin-top: .3em; }
.ks-form .ks-check a { color: #4d6f5f; }
.ks-form .ks-hp { position: absolute; left: -9999px; }
.ks-form-ok, .ks-form-error {
	max-width: 640px; margin: 2em auto; padding: 1.2em 1.4em; border-radius: 8px;
}
.ks-form-ok { background: #f8ede0; border-left: 4px solid #4d6f5f; }
.ks-form-error { background: #fdf1ec; border-left: 4px solid #a5432a; }
.ks-form-error ul { margin: 0; padding-left: 1.2em; }
.ks-ankauf-eckdaten {
	max-width: 640px; margin: 1.5em auto; padding: 1.2em 1.4em;
	background: #f8ede0; border-radius: 8px;
}
.ks-ankauf-eckdaten ul { margin: 0; padding-left: 1.2em; }
.ks-ankauf-eckdaten li { margin-bottom: .4em; }