/* =========================================================
   Shop-Archiv: freigegebene pcard-Sprache auf den Woo-Loop
   gemappt. Laedt nur auf is_shop() / is_product_taxonomy().
   ========================================================= */

/* ---- Kopf: Startseiten-Sektionskopf (sec-head), semantisch als H1 ---- */
.shop-head h1 {
  font-size: var(--fs-page-title-col);
  line-height: 1.1;
  margin-bottom: var(--s4);
  max-width: none;
  text-wrap: balance;
}
.shop-head .lead { margin-top: 0; max-width: none; }
/* Rail-Regel: der Sektionskopf des Shop-Archivs erbte aus base.css einen
   900px-Deckel und lief dadurch schmaler als die 1200px-Rail. */
.shop-head, .shop-head h1, .shop-head h2 { max-width: none; }

/* Bestell-Stopp: Marktplatz-Karten unter dem Hinweis (PDP.pdf: "Logo Amazon +
   SHOP APO"). Die Karten selbst kommen aus sections.css, hier bekommen sie nur
   ihren Platz im linksbuendigen Shop-Kopf: schmaler als die 1200px-Rail, sonst
   werden die beiden Wortmarken auf grossen Schirmen absurd breit auseinander
   gezogen. */
.shop-head__markets { max-width: 620px; margin-top: var(--s6); }
/* Nachgeordnete Zeile: eigener Shop und Kontaktweg. Bewusst kleiner und
   ruhiger als Lead und Buttons, damit der Kauf die klare Hauptaktion bleibt. */
.shop-head__note {
  margin: var(--s4) 0 0;
  max-width: none;
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--ink-subtle);
}
.shop-head__note a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }
.shop-head__note a:hover { color: var(--ink); }

/* ---- Woo-Notices (AJAX-Add-Feedback) ruhig einbetten ---- */
.shop-range .woocommerce-notices-wrapper:not(:empty) { margin-bottom: var(--s6); }
.shop-range .woocommerce-message,
.shop-range .woocommerce-info,
.shop-range .woocommerce-error li {
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: var(--fs-meta);
  list-style: none;
}
.shop-range .woocommerce-error { margin: 0; padding: 0; list-style: none; }
.shop-range .woocommerce-message a.button { margin-left: var(--s3); }

/* ---- Raster: 3-up auf der 1200px-Rail; unvollstaendige letzte Reihe
   wird zentriert (Flexbox statt Grid) -> kein Loch bei 5 Produkten ---- */
.shop-range ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s6) var(--s5); /* wie Startseiten-Grid: Luft zwischen den Reihen */
}

/* WooCommerce-Plugin-Raster neutralisieren: woocommerce-layout.css setzt
   li.product auf float + width 30.75%, was INNERHALB der Grid-Tracks wirkt
   (Karten schrumpfen auf ~120px). Scoped hart zuruecksetzen. */
.woocommerce .shop-range ul.products li.product,
.woocommerce-page .shop-range ul.products li.product {
  width: calc((100% - 2 * var(--s5)) / 3);
  flex: 0 1 calc((100% - 2 * var(--s5)) / 3);
  float: none;
  clear: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 959px) {
  .woocommerce .shop-range ul.products li.product,
  .woocommerce-page .shop-range ul.products li.product {
    width: calc((100% - var(--s5)) / 2);
    flex-basis: calc((100% - var(--s5)) / 2);
  }
}
@media (max-width: 559px) {
  .woocommerce .shop-range ul.products li.product,
  .woocommerce-page .shop-range ul.products li.product {
    width: 100%;
    flex-basis: 100%;
  }
}
.shop-range ul.products::before,
.shop-range ul.products::after { content: none; }
/* Packshot-Groesse gegen woocommerce.css behaupten (width:100%/height:auto
   des Plugins schrumpft die Bilder auf Intrinsic-Groesse) -> Startseiten-Look */
.woocommerce .shop-range ul.products li.product .pcard__media img {
  position: relative;
  z-index: 1;
  height: 106%; /* Pastell-Sockel-Rezept: Artwork bodenbuendig, ueberragt die Sockelkante */
  width: auto;
  max-width: 92%;
  object-fit: contain;
  object-position: bottom;
  margin: 0;
  box-shadow: none;
}
.woocommerce .shop-range ul.products li.product .pcard__media--soft img { height: 90%; }
.woocommerce .shop-range .woocommerce-loop-product__title {
  padding: 0;
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.3;
  min-height: 2.6em; /* 2-Zeilen-Reserve: gleiche Baselines wie Startseiten-Karten */
}

/* ---- Karte: li statt <a>, Stretched-Link ueber den Titel ----
   pcard-Optik (Link, Stock-Badge, PAngV-Zeile) lebt ausschliesslich in
   components.css; die gedrifteten Duplikate hier wurden entfernt (Audit P1). */
.shop-range li.pcard { position: relative; margin: 0; }
.shop-range .pcard__media { text-decoration: none; }

/* Ausverkauft: ehrlicher Zustand statt Ausblenden (JTL steuert Bestaende) */
.shop-range li.pcard.outofstock .pcard__media img { opacity: .55; filter: grayscale(.35); }

/* ---- Preisblock: Betrag prominent, GM-Pflichtzeilen ruhig ---- */
.pcard__price-block { margin-top: auto; position: relative; z-index: 2; }
.pcard__price-block p.price,
.woocommerce .shop-range ul.products li.product .price {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pcard__price-block p.price del { color: var(--ink-subtle); font-weight: 400; margin-right: 6px; }
.pcard__price-block p.price ins { text-decoration: none; }
/* PAngV-/wgm-info-Zeile und Loop-Rating: Regeln kamen dauerhaft nicht zur
   Wirkung (components.css gewinnt per Spezifitaet bzw. display:none) und
   wurden entfernt (Audit P1). */

/* ---- Aktion: Woo-Button in der freigegebenen link-arrow-Sprache ----
   (Selektoren gegen woocommerce.css-Buttonstyles verstaerkt) */
.pcard__actions { margin-top: var(--s3); position: relative; z-index: 2; }
.pcard__actions .button,
.woocommerce .shop-range .pcard__actions a.button,
.woocommerce .shop-range .pcard__actions button.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-meta);
  line-height: 1.4;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}
.woocommerce .shop-range .pcard__actions a.button:hover,
.woocommerce .shop-range .pcard__actions button.button:hover {
  background: none;
  color: var(--ink);
}
.pcard__actions .button::after { content: "\2192"; transition: transform var(--t-med) var(--ease-out); }
.pcard__actions .button:hover::after { transform: translateX(4px); }
.pcard__actions .button.loading { opacity: .6; }
.pcard__actions .added_to_cart {
  margin-left: var(--s4);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* GTM4WP-Datenspan bleibt unsichtbar */
.pcard__actions .gtm4wp_productdata { display: none; }

/* Produktkarten-Titel: auf der Startseite lief er 20px, im Shop 17px.
   Ursache: WooCommerce laedt sein eigenes Stylesheet NACH unserem und traegt
   dort .woocommerce ul.products li.product .woocommerce-loop-product__title,
   also hoehere Spezifitaet. Der Selektor hier muss darueber liegen. */
.woocommerce ul.products li.product h3.woocommerce-loop-product__title,
.shop-range .pcard__body h3{font-size:var(--fs-lead);line-height:1.3}