/* =====================================================================
   Herzbox — WooCommerce-Komponenten
   Wir laden die Woo-Standard-Styles nicht (siehe functions.php).
   Diese Datei bringt Warenkorb, Kasse, Konto und Meldungen ins Design.
   ===================================================================== */

/* ---------- Meldungen (Erfolg / Hinweis / Fehler) ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
  list-style: none;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.woocommerce-message { background:#EDF4EE; border:1px solid #BBD3C0; color:#22503A; }
.woocommerce-info    { background:var(--bg-2); border:1px solid var(--line); color:var(--ink); }
.woocommerce-error   { background:#FBEDEA; border:1px solid #E6BDB2; color:#7A2318; }
.woocommerce-error li { list-style:none; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left:auto; }

/* ---------- Buttons (WooCommerce nutzt .button) ---------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 30px;
  border: none;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s, transform .25s;
  text-decoration: none;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.wc-block-components-button:hover {
  background: var(--accent-2);
  color: #fff;
  transform: translateY(-2px);
}
.woocommerce .button.alt,
.woocommerce button.button.alt { background: var(--accent); }
.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* Sekundär (z. B. „Einkauf fortsetzen") */
.woocommerce .button.wc-backward {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.woocommerce .button.wc-backward:hover { background: var(--ink); color: var(--bg); }

/* ---------- Formularfelder ---------- */
.woocommerce form .form-row { margin: 0 0 18px; display:block; }
.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.wc-block-components-text-input label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.woocommerce form .form-row .required { color: var(--accent); text-decoration:none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.wc-block-components-text-input input {
  width: 100%;
  min-height: 50px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 13px 16px;
  font: inherit;
  font-size: 15px;
}
.woocommerce form .form-row textarea { min-height: 110px; resize: vertical; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid var(--line);
  background: var(--bg-3);
  border-radius: var(--radius);
  padding: 24px;
  margin: 0 0 28px;
}

/* Mengenfeld */
.woocommerce .quantity .qty {
  width: 78px;
  min-height: 50px;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  padding: 0 8px;
}

/* ---------- Warenkorb-Tabelle ---------- */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 28px;
  font-size: 15px;
}
.woocommerce table.shop_table th {
  text-align: left;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.woocommerce table.shop_table td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce table.shop_table img { width: 72px; height: auto; border-radius: 8px; }
.woocommerce table.shop_table .product-name a { font-weight: 600; }
.woocommerce table.shop_table .product-name a:hover { color: var(--accent); }
.woocommerce a.remove {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--accent) !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}
.woocommerce a.remove:hover { background: var(--accent); color:#fff !important; }

/* Warenkorb-Summen */
.cart_totals, .cross-sells { margin-top: 8px; }
.cart_totals h2, .woocommerce-checkout h3, .woocommerce-billing-fields h3, #order_review_heading {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px,3vw,30px);
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.woocommerce .cart-collaterals .cart_totals table.shop_table { background: var(--bg-2); }

/* ---------- Kasse ---------- */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,48px); }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
#order_review {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--line);
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-terms-and-conditions-wrapper { margin: 18px 0; font-size: 14.5px; }
.woocommerce-privacy-policy-text { font-size: 13.5px; color: var(--muted); }

@media (max-width: 820px) {
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
}

/* ---------- Produktgalerie (Detailseite) ---------- */
.woocommerce div.product div.images { margin: 0; }
.woocommerce div.product div.images img { border-radius: var(--radius); }
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: 74px; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
  border: 1.5px solid var(--line);
  border-radius: 9px;
  opacity: .75;
  transition: .2s;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
  opacity: 1;
  border-color: var(--accent);
}
.woocommerce span.onsale {
  background: var(--accent);
  color: #fff;
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  min-height: 0;
  line-height: 1.4;
}

/* Preis auf der Produktseite: unsere Klassen greifen bereits (.price) */
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ink); }
.woocommerce div.product form.cart { margin: 20px 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.woocommerce div.product form.cart .button { flex: 1; min-width: 200px; }
.woocommerce div.product .product_meta { font-size: 13.5px; color: var(--muted); margin-top: 14px; }

/* ---------- Sortierung & Seitenzahlen ---------- */
.woocommerce .woocommerce-ordering select {
  font: inherit;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--bg-3);
  color: var(--ink);
  min-height: 40px;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  border: none;
  padding: 0;
  margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--bg-3);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg-3);
}

/* ---------- Mein Konto ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--bg-3);
  font-size: 14px;
  font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg-3);
}

/* ---------- Kleinigkeiten ---------- */
.woocommerce .woocommerce-result-count { color: var(--muted); font-size: 13.5px; margin: 0; }
.woocommerce-breadcrumb, .crumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.woocommerce-breadcrumb a:hover, .crumb a:hover { color: var(--accent); }
/* Produktraster: die <ul class="products"> ist bei uns selbst das Raster
   (siehe herzbox_loop_start in functions.php — sie trägt zusätzlich .grid). */
ul.products { list-style: none; margin: 0; padding: 0; }
.woocommerce .products::after, .woocommerce .products::before { display: none; }
/* Falls doch einmal der [products]-Shortcode benutzt wird: seine Hüllen
   dürfen das Raster nicht unterbrechen. */
.grid > .woocommerce, .grid > .woocommerce > ul.products { display: contents; }
.screen-reader-text { position: absolute !important; }

/* ---------- Materialangaben auf der Produktseite ---------- */
.pmaterial{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.pmaterial li{position:relative;padding-left:16px;font-size:15px;line-height:1.6;color:var(--ink)}
.pmaterial li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.pmaterial .muted{color:var(--muted);font-size:14.5px}

/* ---------- Bildkasten der Produktseite ----------
   Die Fotos haben sehr verschiedene Formate: Ohrringe fast quadratisch,
   Ketten hochkant. Ohne Vorgabe übernimmt der Kasten das Format des Fotos
   — bei einer Kette wurde die Seite dadurch enorm lang gezogen, und von
   Produkt zu Produkt sprang die Größe.

   In der abgestimmten Vorschau sitzt das Bild in einem quadratischen
   Feld (`.pgal .main`). Diese Regel griff im Theme nicht: WooCommerce
   baut die Galerie mit eigenen Klassen auf, ein `.main` gibt es dort
   nicht. Hier steht dieselbe Vorgabe noch einmal für den Woo-Aufbau.

   `contain` statt `cover`, weil ein Beschnitt bei Schmuck den Anhänger
   köpfen würde. Der weiße Rand fällt nicht auf, die Fotos stehen ohnehin
   auf weißem Studiogrund. */
.woocommerce div.product div.images .woocommerce-product-gallery__image{
  aspect-ratio:1/1;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
/* Bewusst ohne Innenabstand: Die Lupe legt ihr Zoombild absolut über
   diesen Kasten. Mit Polsterung säße das Zoombild um genau diesen Betrag
   versetzt. Die Fotos bringen ihren eigenen weißen Rand mit, es fehlt
   also nichts. */
.woocommerce div.product div.images .woocommerce-product-gallery__image > a,
.woocommerce div.product div.images .woocommerce-product-gallery__image img{
  display:block;width:100%;height:100%;object-fit:contain;
}

/* ---------- Lupenfunktion & Lightbox ----------
   WooCommerce bringt Zoom und PhotoSwipe mit, aber ohne die Woo-Standard-
   Styles fehlt die Gestaltung. Deshalb hier. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{margin:0}
.woocommerce div.product div.images .woocommerce-product-gallery__image{position:relative}
.woocommerce div.product div.images .zoomImg{background:#fff}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
  position:absolute;top:14px;right:14px;z-index:9;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,253,248,.94);border:1px solid var(--line);
  display:grid;place-items:center;font-size:0;color:var(--accent);
  box-shadow:0 4px 14px rgba(60,40,20,.14);text-decoration:none;transition:.2s;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after{
  content:"⌕";font-size:22px;line-height:1;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover{
  background:var(--accent);color:#fff;transform:scale(1.06);
}
/* PhotoSwipe: Grundgerüst, damit die Lightbox nicht ungestylt erscheint */
.pswp{z-index:99999}
.pswp__bg{background:rgba(28,23,20,.94)}
.pswp__caption__center{text-align:center;font-family:var(--body);font-size:14px}
.pswp__button{background-color:transparent}