/* =========================================================================
   WooCommerce
   Wird nur geladen, wenn WooCommerce aktiv ist.
   ====================================================================== */

.shop-wrap { padding: clamp(24px, 3.5vw, 44px) 0 clamp(40px, 6vw, 72px); }

.woocommerce-products-header h1, .product_title {
  font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.05;
}

/* --- Produktliste ------------------------------------------------------ */

/* Raster. Die !important-Angaben neutralisieren Reste der Float-Darstellung
   von WooCommerce, falls ein Plugin oder Cache deren Stylesheet doch lädt. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px); margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  clear: none !important;
}
@media (max-width: 960px) { .woocommerce ul.products { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .woocommerce ul.products { grid-template-columns: 1fr; } }

.woocommerce ul.products li.product {
  position: relative; margin: 0; padding: 0; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l);
  overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--pink); box-shadow: var(--shadow); transform: translateY(-3px);
}
.woocommerce ul.products li.product:focus-within { border-color: var(--pink); }

/* Bild
   Quadratischer Rahmen und "contain" statt "cover": WooCommerce liefert die
   Miniaturbilder quadratisch aus. Im früheren 4:3-Rahmen wurde davon oben und
   unten je ein Achtel abgeschnitten, bei hochformatigen Produktfotos fiel das
   deutlich auf. Jetzt bleibt das Bild vollständig sichtbar. Stellt man in
   WooCommerce die Miniaturbilder auf "unbeschnitten", passt sich der Rahmen
   ebenfalls an, ohne dass hier etwas zu ändern wäre. */
.go3-card-media { position: relative; background: var(--card); }
.go3-card-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--card); }
.go3-card-img::after { display: none; }
.woocommerce ul.products li.product .go3-card-img img {
  width: 100%; height: 100%; object-fit: contain; margin: 0; transition: transform .4s ease;
}
.woocommerce ul.products li.product:hover .go3-card-img img { transform: scale(1.04); }

/* Hinweisfähnchen
   WooCommerce setzt für das Angebots-Fähnchen in der Produktliste eine Regel
   mit höherer Gewichtung: oben rechts, dazu ein negativer Außenabstand. Dadurch
   ragte es über die Kartenkante hinaus und wurde dort abgeschnitten. Die
   folgenden Regeln sind deshalb entsprechend genau formuliert. */
.woocommerce span.onsale, .go3-card-flag {
  position: absolute; top: 12px; left: 12px; right: auto; bottom: auto;
  z-index: 3; margin: 0; min-height: 0;
  padding: 5px 14px; border-radius: 999px; line-height: 1.5;
  font: 700 .78rem var(--body); letter-spacing: .01em;
}
.woocommerce ul.products li.product span.onsale,
.woocommerce-page ul.products li.product span.onsale,
.woocommerce ul.products li.product .go3-card-media span.onsale {
  position: absolute; top: 12px; left: 12px; right: auto; bottom: auto;
  margin: 0 !important; min-height: 0; z-index: 3;
  padding: 5px 14px; border-radius: 999px; line-height: 1.5;
  font: 700 .78rem var(--body); letter-spacing: .01em;
  background: var(--btn-pink); color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.woocommerce span.onsale { background: var(--btn-pink); color: #fff; }
.go3-card-flag { top: auto; bottom: 12px; background: var(--ink); color: #fff; }

/* Textteil: wächst, damit alle Karten gleich hoch bleiben */
.go3-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; gap: 6px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font: 700 1.15rem/1.3 var(--display); padding: 0; margin: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: var(--ink); text-decoration: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title a::after { display: none; }
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title a { color: var(--pink-text); }

.go3-card-text {
  margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.5em);
}

.woocommerce ul.products li.product .price {
  display: block; padding: 0; margin: 6px 0 0; font-size: 1.25rem; font-weight: 700; color: var(--ink);
}
.woocommerce ul.products li.product .price del { color: var(--ink-soft); font-weight: 400; font-size: .95rem; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--pink-text); }
.woocommerce ul.products li.product .price .go3-price-note,
.woocommerce ul.products li.product .price .go3-base-price { font-size: .78rem; font-weight: 400; }

.go3-loop-delivery {
  display: inline-flex; align-items: center; gap: 7px; padding: 0;
  font-size: .85rem; color: var(--ink-soft);
}
.go3-loop-delivery::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }

/* Button immer unten bündig */
.woocommerce ul.products li.product .button { margin: auto 0 0; align-self: flex-start; }

/* Sortierung und Trefferzahl */
.woocommerce .woocommerce-result-count { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select { min-height: 44px; border: 2px solid var(--line); border-radius: var(--radius-s); padding: 6px 12px; background: var(--bg); color: var(--ink); font: 1rem var(--body); }
.woocommerce-products-header + .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce .woocommerce-result-count { padding-top: 4px; }

/* --- Buttons ------------------------------------------------------------ */

.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button, .woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  background: var(--btn-pink); color: #fff; font: 700 1rem/1.2 var(--body); text-decoration: none; cursor: pointer;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover,
.woocommerce #respond input#submit:hover { background: var(--btn-pink-hover); color: #fff; }
.woocommerce .button.alt, .woocommerce button.button.alt { background: var(--btn-pink); color: #fff; }
.woocommerce .button:disabled, .woocommerce .button.disabled { opacity: .55; cursor: not-allowed; }
.woocommerce .button::after { display: none; }

/* --- Produktseite -------------------------------------------------------- */

.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.woocommerce div.product .woocommerce-product-gallery { float: none; width: auto; }
.woocommerce div.product .summary { float: none; width: auto; margin: 0; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related, .woocommerce div.product .upsells { grid-column: 1 / -1; }
@media (max-width: 860px) { .woocommerce div.product { grid-template-columns: 1fr; } }

.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--pink-text); }
.woocommerce div.product p.price del { font-size: 1.2rem; color: var(--ink-soft); }

.go3-price-note, .go3-base-price { display: block; font-size: .85rem; font-weight: 400; color: var(--ink-soft); line-height: 1.5; }
.go3-base-price { margin-top: 2px; }

/* --- Pflichtangaben ------------------------------------------------------ */

.go3-legal { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }
.go3-lowest-price { margin: 4px 0 12px; }

.go3-legal-box { margin: 20px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); display: grid; gap: 10px; }
.go3-legal-box p { margin: 0; font-size: .95rem; }

.go3-delivery { display: flex; align-items: baseline; gap: 10px; font-weight: 600; }
.go3-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.go3-dot.is-in { background: var(--green); }
.go3-dot.is-out { background: #b0b0b0; }

/* Gewährleistungslabel: bewusst auffällig, Verbraucher suchen danach */
.go3-warranty { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.go3-warranty-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--green); color: #1f1f1f;
  font-weight: 700; font-size: .85rem; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.go3-warranty-badge::before {
  content: ""; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='3'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.go3-medical-flag { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink-soft); margin: 8px 0 0; }
.go3-badge-ce { display: inline-grid; place-items: center; min-width: 34px; height: 22px; border: 2px solid var(--ink); border-radius: 4px; font: 800 .72rem var(--body); letter-spacing: .04em; color: var(--ink); }

.go3-address { font-style: normal; line-height: 1.6; }
.go3-warnings { background: var(--surface-pink); border-radius: var(--radius-s); padding: 16px 18px; }
.go3-spec { width: 100%; border-collapse: collapse; margin: 16px 0; }
.go3-spec th, .go3-spec td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.go3-spec th { width: 220px; font-weight: 700; }
.go3-ifu { font-weight: 700; }

.go3-advice { margin-top: 24px; padding: 20px 22px; border-radius: var(--radius-l); background: var(--surface-pink); }
.go3-advice p { margin: 0 0 12px; }
.go3-advice p:last-child { margin: 0; }

.go3-order-note { margin: 12px 0; }
.go3-account-withdraw { margin: 0 0 20px; }

/* --- Reiter --------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0 0 2px; border-bottom: 2px solid var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 18px; font-weight: 700; color: var(--ink-soft); text-decoration: none; border-bottom: 3px solid transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--pink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after { display: none; }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 76ch; }

/* --- Warenkorb und Kasse ---------------------------------------------------- */

.woocommerce table.shop_table { border-collapse: collapse; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.woocommerce table.shop_table th { background: var(--surface); font-weight: 700; }

.woocommerce form .form-row label { display: block; font-weight: 700; margin-bottom: 6px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-container .select2-selection--single {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--line); border-radius: var(--radius-s);
  font: 1rem var(--body); background: var(--bg); color: var(--ink);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--btn-pink); }
.woocommerce .required { color: var(--btn-pink); text-decoration: none; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--radius-l); padding: 16px 20px; margin: 0 0 24px; border: 1px solid var(--line); background: var(--surface); list-style: none;
}
.woocommerce-error { background: var(--surface-pink); border-color: var(--pink); }

#add_payment_method #payment, .woocommerce-checkout #payment { background: var(--surface); border-radius: var(--radius-l); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--line); }

/* Bestellbutton: muss klar als zahlungspflichtig erkennbar sein (§ 312j BGB) */
#place_order { width: 100%; font-size: 1.1rem; min-height: 56px; }

/* --- Kundenkonto -------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 10px 14px; border-radius: var(--radius-s); text-decoration: none; color: var(--ink); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--surface); font-weight: 700; }


/* =========================================================================
   Sicherheitsnetz
   Die Pflichtkästen werden in PHP schon auf Produktseiten begrenzt. Falls sie
   ein Plugin, ein Block oder ein Zwischenspeicher trotzdem woanders ausgibt,
   bleiben sie hier unsichtbar.
   ====================================================================== */

body:not(.single-product) .go3-legal-box,
body:not(.single-product) .go3-medical-flag,
body:not(.single-product) .go3-lowest-price { display: none !important; }

/* --- Produktraster der Block-Darstellung --------------------------------
   WooCommerce zeigt im leeren Warenkorb den Block "Neu im Shop". Dieser Block
   bringt eigene Klassen mit (wc-block-grid__*), die Regeln für die klassische
   Produktliste oben greifen dort nicht. Die folgenden Regeln bauen dieselbe
   Karte nach, damit beide Ansichten gleich aussehen.
   ---------------------------------------------------------------------- */

.wc-block-grid__products {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px); margin: 0; padding: 0;
}
/* Der Block speichert eine eigene Spaltenzahl. Wir zeigen immer drei Spalten,
   wie im Shop, damit die Karten dieselbe Größe haben. */
.wc-block-grid.has-1-columns .wc-block-grid__products,
.wc-block-grid.has-2-columns .wc-block-grid__products,
.wc-block-grid.has-4-columns .wc-block-grid__products,
.wc-block-grid.has-5-columns .wc-block-grid__products,
.wc-block-grid.has-6-columns .wc-block-grid__products { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) {
  .wc-block-grid__products,
  .wc-block-grid[class*="has-"] .wc-block-grid__products { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wc-block-grid__products,
  .wc-block-grid[class*="has-"] .wc-block-grid__products { grid-template-columns: 1fr; }
}

.wc-block-grid__product {
  position: relative; display: flex; flex-direction: column;
  margin: 0 !important; padding: 0 !important;
  width: auto !important; max-width: none !important; min-width: 0;
  text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l);
  overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wc-block-grid__product:hover {
  border-color: var(--pink); box-shadow: var(--shadow); transform: translateY(-3px);
}
.wc-block-grid__product:focus-within { border-color: var(--pink); }

/* Bild und Titel liegen hier in einem gemeinsamen Link. */
.wc-block-grid__product-link { display: block; text-decoration: none; color: inherit; }
.wc-block-grid__product-link::after { display: none; }

.wc-block-grid__product-image {
  display: block; margin: 0; padding: 0;
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--card);
}
.wc-block-grid__product-image img {
  width: 100%; height: 100%; object-fit: contain; display: block; margin: 0;
  border-radius: 0; transition: transform .4s ease;
}
.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.04); }

.wc-block-grid__product-title {
  font: 700 1.15rem/1.3 var(--display); color: var(--ink);
  margin: 0; padding: 18px 20px 0;
}
.wc-block-grid__product:hover .wc-block-grid__product-title { color: var(--pink-text); }

/* Angebots-Fähnchen wie im Shop */
.wc-block-grid__product-onsale {
  position: absolute; top: 12px; left: 12px; right: auto; bottom: auto; z-index: 3;
  margin: 0 !important; min-height: 0; border: 0;
  padding: 5px 14px; border-radius: 999px; line-height: 1.5;
  font: 700 .78rem var(--body); letter-spacing: .01em;
  background: var(--btn-pink); color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.wc-block-grid__product-price {
  display: block; margin: 8px 0 0; padding: 0 20px;
  font-size: 1.25rem; font-weight: 700; color: var(--ink);
}
.wc-block-grid__product-price del { color: var(--ink-soft); font-weight: 400; font-size: .95rem; margin-right: 6px; }
.wc-block-grid__product-price ins { text-decoration: none; color: var(--pink-text); }
.wc-block-grid__product-price .go3-price-note,
.wc-block-grid__product-price .go3-base-price,
.wc-block-grid__product-price .woocommerce-price-suffix {
  display: block; font-size: .78rem; font-weight: 400; color: var(--ink-soft);
}

.wc-block-grid__product-rating { margin: 8px 0 0; padding: 0 20px; }
.wc-block-grid__product-rating .star-rating { margin: 0; }

/* Pflichtangaben, die ein Rechtstexte-Plugin beisteuert */
.wc-block-grid__product .wc-gzd-additional-info {
  margin: 4px 0 0; padding: 0 20px; font-size: .85rem; color: var(--ink-soft);
}

/* Button immer unten bündig, damit alle Karten gleich hoch bleiben.
   WooCommerce setzt für diesen Platz eigene Breiten und Abstände mit höherer
   Gewichtung, deshalb steht die Produktklasse hier mit davor. */
.wc-block-grid__product .wc-block-grid__product-add-to-cart {
  margin: auto 0 0; padding: 16px 20px 20px; text-align: left;
  width: auto; max-width: none;
}
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .wc-block-grid__product-add-to-cart a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  background: var(--btn-pink); color: #fff; font: 700 1rem/1.2 var(--body);
  text-decoration: none; cursor: pointer;
}
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product .wc-block-grid__product-add-to-cart a.button:hover { background: var(--btn-pink-hover); color: #fff; }
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link::after { display: none; }

/* --- Leerer Warenkorb ---------------------------------------------------
   Das große Trauergesicht nahm fast einen halben Bildschirm ein. Es bleibt,
   fällt aber deutlich kleiner aus, und die Überschriften stehen links wie
   überall sonst auf der Seite.
   ---------------------------------------------------------------------- */

.wp-block-woocommerce-empty-cart-block > h2,
.wp-block-woocommerce-empty-cart-block > h2.has-text-align-center { text-align: left; }
.wc-block-cart__empty-cart__title {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 8px;
}
/* Das Symbol wird als Maske gezeichnet. Ohne mask-size bliebe die Maske in
   Originalgröße stehen und das verkleinerte Feld würde sie anschneiden. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  width: 64px; height: 64px; margin: 0 0 14px;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  background-size: contain; background-repeat: no-repeat;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots { display: none; }
.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 36px 0 18px;
}