/* Mediaplan Base – WooCommerce. Lädt nur, wenn das Plugin aktiv ist. */

/* Warenkorb, Kasse und Konto brauchen mehr als die 720px Lesebreite. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content,
.woocommerce-order-received .entry-content {
  max-width: none;
}

/* Header-Warenkorb */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
@media (min-width: 801px) {
  /* Auf Desktop rechts neben die Navigation, auf Mobil neben den Menü-Button. */
  .site-header__actions { order: 3; }
}

.shop-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  color: var(--sky-deep);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.shop-cart:hover {
  background: var(--sky-mist);
  color: var(--sky-deep);
}
.shop-cart__count {
  position: absolute;
  top: 0.15rem;
  right: 0.05rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--sky);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

/* Shop-Layout */
.shop-layout {
  display: grid;
  gap: 2.5rem;
  padding: 2.5rem 0 4rem;
  align-items: start;
}
@media (min-width: 900px) {
  .shop-layout--sidebar { grid-template-columns: minmax(0, 1fr) 280px; }
}
.shop-layout__sidebar { display: grid; gap: 1.5rem; }
.shop-layout__sidebar .widget {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-soft);
}
.shop-layout__sidebar .widget__title {
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}
.shop-layout__sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.95rem;
}
.shop-layout__sidebar a { text-decoration: none; }
.shop-layout__sidebar a:hover { text-decoration: underline; }

/* Preisfilter: der Plugin-Slider bringt Violett mit, die Selektoren sind
   entsprechend spezifisch – deshalb hier ebenso lang. */
.shop-layout__sidebar .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: var(--line);
  border-radius: 999px;
  height: 6px;
}
.shop-layout__sidebar .widget_price_filter .ui-slider .ui-slider-range {
  background: var(--sky);
}
.shop-layout__sidebar .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--sky);
  border: 2px solid #fff;
  box-shadow: var(--shadow-soft);
  width: 16px;
  height: 16px;
  top: -5px;
}
.shop-layout__sidebar .widget_price_filter .price_slider_amount { margin-top: 1rem; }
.shop-layout__sidebar .widget_price_filter .price_slider_amount .price_label {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.shop-layout__sidebar .wp-block-search__input {
  font: inherit;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.shop-layout__sidebar .wp-block-search__button {
  background: var(--sky);
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}

/* Breadcrumb */
.shop-breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.shop-breadcrumb a { text-decoration: none; }
.shop-breadcrumb__sep { padding: 0 0.4rem; opacity: 0.5; }

/* Sortierung + Ergebniszähler */
.woocommerce-notices-wrapper:empty { display: none; }
.shop-layout .woocommerce-result-count {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}
.shop-layout .woocommerce-ordering { margin: 0 0 1.75rem; }
.shop-layout .woocommerce-ordering select,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea {
  font: inherit;
  color: inherit;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-width: 100%;
}
.woocommerce select:focus-visible,
.woocommerce input:focus-visible,
.woocommerce textarea:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/* Die Clearfix-Pseudoelemente von WooCommerce würden im Grid eigene Zellen belegen. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce div.product::before,
.woocommerce div.product::after,
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after,
.woocommerce form .form-row::before,
.woocommerce form .form-row::after {
  content: none;
  display: none;
}

/* Produktliste */
.woocommerce ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 700px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Setzt die Breiten aus woocommerce-smallscreen.css zurück (Grid statt Float). */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  width: auto;
  float: none;
  margin: 0;
}
.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1rem 1.25rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.woocommerce ul.products li.product a { text-decoration: none; }
/* Die Höhe ist begrenzt, weil die Breite von der Spaltenzahl abhängt: In einem
   Shop mit zwei Produkten stehen zwei Spalten, und ein quadratisches Bild wird
   dann 600 Pixel hoch - Titel, Preis und Knopf rutschen unter die Falz. „contain“
   statt „cover“, damit ein hohes Bild oder ein Logo nicht beschnitten wird. */
.woocommerce ul.products li.product img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  margin-bottom: 0.9rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.1rem;
  margin: 0 0 0.35rem;
}
.woocommerce ul.products li.product .price { display: block; margin-bottom: 0.9rem; }
.woocommerce ul.products li.product .button { margin-top: auto; }
.woocommerce ul.products li.product .added_to_cart {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sky-deep);
}

/* Preis – Selektoren so spezifisch wie die des Plugins, sonst gewinnt dessen Grün. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .price {
  color: var(--sky-deep);
  font-weight: 700;
  font-size: 1.1rem;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce .price del {
  color: var(--ink-soft);
  font-weight: 400;
  margin-right: 0.4rem;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins,
.woocommerce .price ins {
  text-decoration: none;
  color: inherit;
}

/* Sale-Badge */
.woocommerce span.onsale {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  z-index: 2;
  background: var(--sky);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}

/* Buttons – wie .btn--primary */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(46, 163, 242, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--sky-bright) 0%, var(--sky) 100%);
  color: #fff;
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
  opacity: 0.55;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* Produktdetail */
.woocommerce div.product {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .woocommerce div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .upsells { grid-column: 1 / -1; }
}
.woocommerce div.product div.images img { border-radius: var(--radius); }
.woocommerce div.product .product_title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-style: italic;
}
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 1rem; }
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.5rem 0;
}
.woocommerce div.product form.cart .quantity input {
  width: 5rem;
  text-align: center;
}
.woocommerce div.product .product_meta {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: var(--ink-soft);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--sky-mist);
  color: var(--sky-deep);
}

/* Tabellen (Warenkorb, Bestellung, Kontodaten) */
.woocommerce table.shop_table,
.woocommerce table.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.woocommerce table.shop_table th { font-weight: 700; color: var(--sky-deep); }
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table img { width: 64px; border-radius: 0.5rem; }

/* Formulare: Kasse, Konto, Coupon */
.woocommerce form .form-row {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.woocommerce form .form-row label { font-weight: 600; font-size: 0.95rem; }
.woocommerce form .form-row input,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { width: 100%; }
.woocommerce-checkout .col2-set {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; }
}
.woocommerce #payment,
.woocommerce-checkout-review-order {
  background: var(--sky-mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.4rem;
}
.woocommerce #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

/* Hinweise */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  /* WooCommerce setzt oben einen gruenen Balken – der passt nicht zum Theme. */
  border: 0;
  border-left: 4px solid var(--sky);
  background: var(--sky-mist);
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-start;
}
/* Das Haken- bzw. Ausrufezeichen-Symbol stellt WooCommerce absolut und rechnet
   dafuer mit 3.5em Innenabstand links. Der ist hier kleiner, das Symbol lag
   deshalb auf dem ersten Wort. Hier ist es ein gewoehnliches Element in der
   Reihe – dann braucht es weder Innenabstand noch eine Rechnung. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before {
  position: static;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  line-height: 1;
}
.woocommerce-error {
  border-left-color: #c0392b;
  background: #fdf0ee;
}
/* Mehrere Beanstandungen an der Kasse sind eine Liste. Untereinander, nicht
   nebeneinander: Sonst liest man die zweite nicht. */
.woocommerce-error > li { flex: 1 1 100%; }
.woocommerce-error > li:first-of-type { flex: 1 1 auto; }
.woocommerce-message .button,
.woocommerce-info .button { min-height: 2.5rem; padding: 0.5rem 1.1rem; }

/* Blattnavigation */
.woocommerce nav.woocommerce-pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin: 2.5rem 0 0;
  padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--sky);
  border-color: var(--sky);
  color: #fff;
}

/* Bewertungen */
.woocommerce #reviews #comments ol.commentlist {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.woocommerce #reviews #comments ol.commentlist li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
}
.woocommerce .star-rating { color: var(--sky); }

/* Germanized: Pflichtangaben (Grundpreis, MwSt., Versand, Lieferzeit) */
.wc-gzd-additional-info,
.wc-gzd-additional-info li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products li.product .wc-gzd-additional-info { margin-bottom: 0.75rem; }
.woocommerce div.product .wc-gzd-additional-info { margin: 0.5rem 0 1rem; }

/* Germanized: Pflicht-Checkboxen an der Kasse (AGB, Widerruf, digitale Inhalte).
   Nur die klassische Kasse: Im Block-Checkout bringt Germanized eigenes Markup
   mit, dort stünde die Fehlermeldung sonst neben dem Text statt darunter. */
.wc-gzd-checkbox-placeholder,
.woocommerce-checkout .legal:not([class*="wc-gzd-block-checkout"]) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}
.wc-gzd-checkbox-placeholder input[type="checkbox"] { margin-top: 0.25rem; }

/* Shiptastic: Sendungen und Retouren im Kundenkonto nutzen die Shop-Tabellen. */
.wc-stc-shipments-table,
.wc-stc-returns-table { width: 100%; }

/* Block-Varianten von Warenkorb und Kasse */
.wc-block-components-title,
.wp-block-woocommerce-cart .wc-block-components-title { font-family: var(--font-heading); }
.wc-block-cart__submit-container .wc-block-components-button { width: 100%; }

/* Hinweise im Block-Warenkorb und in der Block-Kasse tragen andere Klassen als
   die klassischen Meldungen – gleiche Optik, damit es nicht auseinanderfaellt. */
.wc-block-components-notice-banner {
  border-radius: var(--radius-sm);
  border: 0;
  border-left: 4px solid var(--sky);
  background: var(--sky-mist);
  color: var(--ink);
}
.wc-block-components-notice-banner.is-error { border-left-color: #c0392b; background: #fdf0ee; }
.wc-block-components-notice-banner.is-success { border-left-color: var(--sky); }