.ptxshop-product__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: var(--ptxshop-space-10);
  padding-block: var(--ptxshop-space-10);
}

.ptxshop-product__media {
  display: grid;
  height: 460px !important;      /* feste Pixel-Hoehe (bulletproof): Pfeil springt nie, alle Bilder gleich hoch */
  min-height: 0 !important;      /* alte variable min-height:380 sicher aufheben */
  aspect-ratio: auto !important;
  overflow: hidden !important;   /* harte Sicherung: Bild kann die Box NIE optisch verlassen */
  place-items: center;
  padding: var(--ptxshop-space-6);
  border: 1px solid var(--ptxshop-color-border);
  border-radius: var(--ptxshop-radius-lg);
  background: var(--ptxshop-color-white);
}

.ptxshop-product__media img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 400px !important;   /* px-Cap wie beim Vergleich: haengt NICHT von der Box-Hoehe ab -> Bild nie groesser als die Box */
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
}

.ptxshop-product__summary {
  align-self: start;
}

/* Produkttitel: eigene, deutlich kleinere Groesse (nicht die generische
   .ptxshop-heading-Groesse aus Seitenkoepfen / Bewertungs-Ueberschrift teilen). */
.ptxshop-product__title {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
}

.ptxshop-product__intro {
  margin-top: var(--ptxshop-space-4);
}

/* Teilen: Desktop = inline in der Aktionsreihe (neben "Zum Vergleich",
   erbt .ptxshop-listbtn-Stil). Mobil = rundes Icon oben rechts aufs
   Produktbild ("Fab"). Beide lösen denselben share-Handler aus (product.js).
   Umschaltung per Breakpoint 720px. */
.ptxshop-share-fab {
  display: none;
}

/* Anker fuer das Bild-Icon (nav-Pfeile nutzen dasselbe positionierte Elternteil). */
.ptxshop-product__media {
  position: relative;
}

@media (max-width: 720px) {
  .ptxshop-share-fab {
    display: inline-grid;
    place-items: center;
    position: absolute;
    top: var(--ptxshop-space-3);
    right: var(--ptxshop-space-3);
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--ptxshop-color-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ptxshop-color-navy-900);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
}

.ptxshop-product__price {
  margin: var(--ptxshop-space-5) 0 var(--ptxshop-space-2);
  color: var(--ptxshop-color-navy-900);
  font-size: var(--ptxshop-text-xl);
  font-weight: 800;
}

.ptxshop-product__tax {
  display: block;
  color: var(--ptxshop-color-text-faint);
  font-size: var(--ptxshop-text-xs);
}

.ptxshop-variant-group {
  margin: var(--ptxshop-space-6) 0 0;
  padding: 0;
  border: 0;
}

.ptxshop-variant-group legend,
.ptxshop-quantity {
  margin-bottom: var(--ptxshop-space-2);
  color: var(--ptxshop-color-navy-900);
  font-size: var(--ptxshop-text-sm);
  font-weight: 700;
}

.ptxshop-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ptxshop-space-2);
}

.ptxshop-swatch {
  min-width: 42px;
  min-height: 38px;
  padding: var(--ptxshop-space-2) var(--ptxshop-space-3);
  border: 1px solid var(--ptxshop-color-border-strong);
  border-radius: var(--ptxshop-radius-sm);
  background: var(--ptxshop-color-white);
  color: var(--ptxshop-color-text);
  cursor: pointer;
}

.ptxshop-swatch[aria-pressed="true"] {
  border-color: var(--ptxshop-color-amber-600);
  box-shadow: inset 0 0 0 1px var(--ptxshop-color-amber-600);
}

.ptxshop-swatch:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ptxshop-quantity {
  display: grid;
  width: max-content;
  gap: var(--ptxshop-space-2);
  margin-block: var(--ptxshop-space-4);
}

.ptxshop-stepper {
  display: inline-grid;
  grid-template-columns: 40px 54px 40px;
  overflow: hidden;
  border: 1px solid var(--ptxshop-color-navy-800);
  border-radius: var(--ptxshop-radius-sm);
}

.ptxshop-stepper button {
  min-height: 42px;
  border: 0;
  background: var(--ptxshop-color-white);
  color: var(--ptxshop-color-navy-900);
  cursor: pointer;
}

.ptxshop-quantity input {
  width: 54px;
  min-height: 42px;
  padding: 0 var(--ptxshop-space-2);
  border: 0;
  border-inline: 1px solid var(--ptxshop-color-navy-800);
  text-align: center;
  font: inherit;
  -moz-appearance: textfield;
}

.ptxshop-quantity input::-webkit-outer-spin-button,
.ptxshop-quantity input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.ptxshop-buy-row {
  display: flex;
  align-items: flex-end;
  gap: var(--ptxshop-space-4);
  margin-top: var(--ptxshop-space-4);
}

/* Im Buy-Row-Kontext keine Aussenabstaende auf dem Mengenfeld, sonst
   verschiebt die Bottom-Margin die Ausrichtung und der Button "haengt"
   tiefer als der Stepper (align-items:flex-end richtet sich nach der
   Margin-Box aus). */
.ptxshop-buy-row .ptxshop-quantity {
  margin-block: 0;
}

.ptxshop-buy-row .ptxshop-button--primary {
  flex: 1;
  min-width: 200px;
  align-self: flex-end;
  height: 44px;
  background: var(--ptxshop-color-navy-800);
  color: var(--ptxshop-color-white);
}

.ptxshop-tabs {
  padding-block: var(--ptxshop-space-8);
  border-top: 1px solid var(--ptxshop-color-border);
}

.ptxshop-tabs__nav {
  display: flex;
  gap: var(--ptxshop-space-8);
  border-bottom: 1px solid var(--ptxshop-color-border);
}

.ptxshop-tabs__nav a {
  padding: var(--ptxshop-space-4) 0;
  color: var(--ptxshop-color-navy-900);
  font-weight: 700;
  text-decoration: none;
}

.ptxshop-tabs__nav a[aria-selected="true"] {
  color: var(--ptxshop-color-amber-600);
  box-shadow: inset 0 -2px 0 var(--ptxshop-color-amber-600);
}

.ptxshop-tabs__panel {
  padding-block: var(--ptxshop-space-6);
}

@media (max-width: 720px) {
  .ptxshop-product__layout {
    /* minmax(0,1fr) statt 1fr: ein 1fr-Track hat implizit min-width:min-content
       -> wuchs auf ~371px und sprengte den Viewport (Mobile-Overflow). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ptxshop-space-6);
  }

  .ptxshop-product__media {
    height: 340px !important;   /* mobil kompakter, aber weiterhin FEST -> kein Springen */
    min-height: 0 !important;
  }
  .ptxshop-product__media img { max-height: 280px !important; }

  .ptxshop-buy-row {
    display: grid;
  }
}

/* Breadcrumbs */
.ptxshop-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ptxshop-space-2);
  padding-top: var(--ptxshop-space-6);
  color: var(--ptxshop-color-text-muted);
  font-size: var(--ptxshop-text-sm);
}
.ptxshop-breadcrumb a {
  color: var(--ptxshop-color-text-muted);
  text-decoration: none;
}
.ptxshop-breadcrumb a:hover {
  color: var(--ptxshop-color-navy-800);
}
.ptxshop-breadcrumb__sep {
  color: var(--ptxshop-color-text-faint);
}
.ptxshop-breadcrumb__current {
  color: var(--ptxshop-color-navy-900);
  font-weight: 600;
}

/* Eyebrow (brand) */
.ptxshop-product__summary .ptxshop-eyebrow {
  margin: 0 0 var(--ptxshop-space-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: var(--ptxshop-text-xs);
  color: var(--ptxshop-color-text-faint);
}

/* Stock / delivery badge */
.ptxshop-stockbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--ptxshop-space-2);
  margin: var(--ptxshop-space-4) 0 0;
  color: var(--ptxshop-color-navy-900);
  font-weight: 600;
  font-size: var(--ptxshop-text-sm);
}
.ptxshop-stockbadge__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ptxshop-color-success);
}

/* "Ab" price prefix */
.ptxshop-price-from {
  color: var(--ptxshop-color-text-muted);
  font-size: var(--ptxshop-text-sm);
  font-weight: 600;
}

/* Secondary actions (Angebot anfordern) */
.ptxshop-secondary-actions {
  margin-top: var(--ptxshop-space-5);
}
.ptxshop-secondary-actions .ptxshop-button--secondary {
  width: 100%;
}

/* Specifications table */
.ptxshop-spectable {
  width: 100%;
  /* fixed: Spalten halten sich an die 40/60-Breiten statt auf Inhalt zu
     expandieren -> Tabelle bleibt garantiert <= 100% (kein Mobile-Overflow). */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--ptxshop-text-sm);
}
.ptxshop-spectable th,
.ptxshop-spectable td {
  padding: var(--ptxshop-space-3) var(--ptxshop-space-4);
  border-bottom: 1px solid var(--ptxshop-color-border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.ptxshop-spectable th {
  width: 40%;
  color: var(--ptxshop-color-text-muted);
  font-weight: 600;
}
.ptxshop-spectable td {
  color: var(--ptxshop-color-navy-900);
}
.ptxshop-spectable tr:last-child th,
.ptxshop-spectable tr:last-child td {
  border-bottom: 0;
}

/* Documents list */
.ptxshop-doclist {
  display: grid;
  gap: var(--ptxshop-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ptxshop-doclist__item {
  display: flex;
  align-items: center;
  gap: var(--ptxshop-space-3);
  padding: var(--ptxshop-space-3) var(--ptxshop-space-4);
  border: 1px solid var(--ptxshop-color-border);
  border-radius: var(--ptxshop-radius-md);
  text-decoration: none;
  color: var(--ptxshop-color-navy-900);
  transition: border-color 0.15s, background 0.15s;
}
.ptxshop-doclist__item:hover {
  border-color: var(--ptxshop-color-amber-500);
  background: var(--ptxshop-color-surface);
}
.ptxshop-doclist__ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--ptxshop-radius-sm);
  background: var(--ptxshop-color-navy-800);
  color: var(--ptxshop-color-white);
  font-size: var(--ptxshop-text-xs);
  font-weight: 700;
}
.ptxshop-doclist__label {
  flex: 1;
  font-weight: 600;
  font-size: var(--ptxshop-text-sm);
}
.ptxshop-doclist__cta {
  flex-shrink: 0;
  color: var(--ptxshop-color-text-faint);
  font-size: var(--ptxshop-text-sm);
  font-weight: 600;
}
.ptxshop-doclist__item:hover .ptxshop-doclist__cta {
  color: var(--ptxshop-color-amber-600);
}

/* Rich text + empty states inside tabs */
.ptxshop-richtext p {
  margin: 0 0 var(--ptxshop-space-3);
  color: var(--ptxshop-color-text);
  line-height: 1.7;
}
.ptxshop-richtext h2,
.ptxshop-richtext h3 {
  margin: var(--ptxshop-space-4) 0 var(--ptxshop-space-2);
  color: var(--ptxshop-color-navy-900);
  font-family: var(--ptxshop-font-heading);
}
.ptxshop-empty-inline {
  margin: 0;
  color: var(--ptxshop-color-text-faint);
  font-size: var(--ptxshop-text-sm);
}

/* Varianten-Status + "Auswahl löschen" */
.ptxshop-variant-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ptxshop-space-3);
  margin-top: var(--ptxshop-space-5);
}
.ptxshop-variant-actions .ptxshop-variant-status {
  margin: 0;
}
.ptxshop-variant-clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ptxshop-color-text-muted);
  font: inherit;
  font-size: var(--ptxshop-text-sm);
  text-decoration: underline;
  cursor: pointer;
}
.ptxshop-variant-clear:hover {
  color: var(--ptxshop-color-navy-800);
}

/* Read-only Mengenfeld: kein Text-Cursor, keine Markierung */
.ptxshop-quantity input[readonly] {
  cursor: default;
  caret-color: transparent;
  user-select: none;
  background: var(--ptxshop-color-white);
}

/* Galerie: Thumbnail-Leiste links, Hauptbild rechts (Diaschau) */
.ptxshop-product__gallery {
  display: flex;
  gap: var(--ptxshop-space-3);
  align-items: flex-start;
}
.ptxshop-product__gallery .ptxshop-product__media {
  flex: 1;
  min-width: 0;
}
.ptxshop-gallery__rail {
  display: flex;
  flex-direction: column;
  gap: var(--ptxshop-space-2);
  flex-shrink: 0;
}
.ptxshop-gallery__thumb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 4px;
  border: 1px solid var(--ptxshop-color-border);
  border-radius: var(--ptxshop-radius-sm);
  background: var(--ptxshop-color-white);
  cursor: pointer;
}
.ptxshop-gallery__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ptxshop-gallery__thumb:hover {
  border-color: var(--ptxshop-color-amber-500);
}
.ptxshop-gallery__thumb.is-active {
  border-color: var(--ptxshop-color-amber-500);
  box-shadow: inset 0 0 0 1px var(--ptxshop-color-amber-500);
}
@media (max-width: 720px) {
  .ptxshop-product__gallery {
    flex-direction: column-reverse;
    /* In der Flex-SPALTE ist die Querachse die Breite. Das Basis
       align-items:flex-start (fuer die Desktop-Reihe gedacht) laesst die
       Kinder auf Inhaltsbreite schrumpfen -> die Bild-Box kollabierte mobil
       auf ~151px ("Container nicht fix"). stretch = volle Breite. */
    align-items: stretch;
  }
  .ptxshop-gallery__rail {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Tabs -> Akkordeon auf Mobile */
.ptxshop-tabs__acc {
  display: none;
}
@media (max-width: 720px) {
  .ptxshop-tabs {
    padding-block: var(--ptxshop-space-4);
  }
  .ptxshop-tabs__nav {
    display: none;
  }
  .ptxshop-tabs__acc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--ptxshop-space-4) 0;
    border: 0;
    border-top: 1px solid var(--ptxshop-color-border);
    background: none;
    color: var(--ptxshop-color-navy-900);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .ptxshop-tabs__acc::after {
    content: "+";
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--ptxshop-color-amber-600);
  }
  .ptxshop-tabs__acc[aria-expanded="true"]::after {
    content: "\2013";
  }
  .ptxshop-tabs__panel {
    padding-top: 0;
    padding-bottom: var(--ptxshop-space-5);
  }
}

/* Kundenbewertungen (ERPNext Item Review) */
.ptxshop-reviews {
  padding-block: var(--ptxshop-space-8);
  border-top: 1px solid var(--ptxshop-color-border);
}
.ptxshop-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ptxshop-space-4);
  flex-wrap: wrap;
}
.ptxshop-reviews__head .ptxshop-heading {
  font-size: var(--ptxshop-text-xl);
}
.ptxshop-reviews__summary {
  display: flex;
  align-items: center;
  gap: var(--ptxshop-space-3);
  margin-top: var(--ptxshop-space-4);
}
.ptxshop-reviews__score {
  font-family: var(--ptxshop-font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ptxshop-color-navy-900);
}
.ptxshop-reviews__score span {
  font-size: var(--ptxshop-text-md);
  color: var(--ptxshop-color-text-faint);
}
.ptxshop-reviews__count {
  color: var(--ptxshop-color-text-muted);
  font-size: var(--ptxshop-text-sm);
}
.ptxshop-stars {
  display: inline-flex;
  gap: 2px;
}
.ptxshop-star {
  color: var(--ptxshop-color-border-strong);
  font-size: 1.05rem;
  line-height: 1;
}
.ptxshop-star.is-filled {
  color: var(--ptxshop-color-amber-500);
}
.ptxshop-reviews__list {
  display: grid;
  gap: var(--ptxshop-space-5);
  margin: var(--ptxshop-space-6) 0 0;
  padding: 0;
  list-style: none;
}
.ptxshop-review {
  padding-bottom: var(--ptxshop-space-5);
  border-bottom: 1px solid var(--ptxshop-color-border);
}
.ptxshop-review__title {
  margin-top: var(--ptxshop-space-2);
  font-weight: 700;
  color: var(--ptxshop-color-navy-900);
}
.ptxshop-review__comment {
  margin: var(--ptxshop-space-2) 0;
  color: var(--ptxshop-color-text);
  line-height: 1.6;
}
.ptxshop-review__meta {
  color: var(--ptxshop-color-text-faint);
  font-size: var(--ptxshop-text-sm);
}
.ptxshop-review-form {
  display: grid;
  gap: var(--ptxshop-space-4);
  max-width: 520px;
  margin: var(--ptxshop-space-5) 0;
  padding: var(--ptxshop-space-5);
  border: 1px solid var(--ptxshop-color-border);
  border-radius: var(--ptxshop-radius-md);
  background: var(--ptxshop-color-surface);
}
.ptxshop-review-form .ptxshop-field {
  display: grid;
  gap: var(--ptxshop-space-2);
}
.ptxshop-review-form label {
  font-size: var(--ptxshop-text-sm);
  font-weight: 600;
  color: var(--ptxshop-color-navy-900);
}
.ptxshop-review-form input,
.ptxshop-review-form select,
.ptxshop-review-form textarea {
  width: 100%;
  padding: var(--ptxshop-space-2) var(--ptxshop-space-3);
  border: 1px solid var(--ptxshop-color-border-strong);
  border-radius: var(--ptxshop-radius-sm);
  font: inherit;
  background: var(--ptxshop-color-white);
}
.ptxshop-review-form__msg {
  margin: 0;
  font-size: var(--ptxshop-text-sm);
  color: var(--ptxshop-color-navy-900);
}

/* Veroeffentlichungs-Hinweis am Bewertungsformular (Transparenz: Bewertung
   erscheint oeffentlich auf der Webseite). */
.ptxshop-review-form__notice {
  margin: 0;
  color: var(--ptxshop-color-text-muted);
  font-size: var(--ptxshop-text-xs);
  line-height: 1.5;
}

/* Galerie: Pfeile im Hauptbild (vor/zurueck durch alle Bilder) */
.ptxshop-product__media {
  position: relative;
}
.ptxshop-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ptxshop-color-border);
  border-radius: 50%;
  background: var(--ptxshop-color-white);
  color: var(--ptxshop-color-navy-900);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: border-color 0.15s, background 0.15s;
}
.ptxshop-gallery__nav:hover {
  border-color: var(--ptxshop-color-amber-500);
  background: var(--ptxshop-color-surface);
}
.ptxshop-gallery__nav--prev {
  left: var(--ptxshop-space-3);
}
.ptxshop-gallery__nav--next {
  right: var(--ptxshop-space-3);
}

/* Fly-to-Cart: fliegendes Produktbild-Duplikat */
.ptxshop-fly {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  object-fit: contain;
  border-radius: var(--ptxshop-radius-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1), opacity 0.8s ease;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .ptxshop-fly { transition: opacity 0.3s ease; }
}

/* Merkliste / Vergleich Buttons */
.ptxshop-listactions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ptxshop-space-3);
  margin-top: var(--ptxshop-space-3);
}
.ptxshop-listbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ptxshop-space-2);
  padding: var(--ptxshop-space-2) var(--ptxshop-space-4);
  border: 1px solid var(--ptxshop-color-border-strong);
  border-radius: var(--ptxshop-radius-sm);
  background: var(--ptxshop-color-white);
  color: var(--ptxshop-color-navy-900);
  font: inherit;
  font-size: var(--ptxshop-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ptxshop-listbtn svg {
  width: 18px;
  height: 18px;
}
.ptxshop-listbtn:hover {
  border-color: var(--ptxshop-color-amber-500);
}

/* Mobile-Overrides fuer die Aktionsreihe: MUSS nach den Basis-Regeln
   .ptxshop-listactions / .ptxshop-listbtn stehen (gleiche Spezifitaet ->
   spaetere Regel gewinnt). Sonst greift der 3-Spalten-Default auch mobil. */
@media (max-width: 720px) {
  .ptxshop-listactions {
    grid-template-columns: 1fr 1fr;
  }
  .ptxshop-share-inline {
    display: none;
  }
}
.ptxshop-listbtn.is-active {
  border-color: var(--ptxshop-color-amber-600);
  color: var(--ptxshop-color-amber-600);
  background: var(--ptxshop-color-surface);
}

/* Modal (Login-Hinweis fuer Gaeste bei Bewertungen) */
.ptxshop-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: var(--ptxshop-space-4);
  background: rgba(15, 23, 42, 0.55);
}
.ptxshop-modal__box {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: var(--ptxshop-space-6);
  border-radius: var(--ptxshop-radius-lg);
  background: var(--ptxshop-color-white);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.ptxshop-modal__title {
  margin: 0 0 var(--ptxshop-space-3);
  color: var(--ptxshop-color-navy-900);
  font-family: var(--ptxshop-font-heading);
  font-size: var(--ptxshop-text-lg);
}
.ptxshop-modal__text {
  margin: 0 0 var(--ptxshop-space-5);
  color: var(--ptxshop-color-text-muted);
  font-size: var(--ptxshop-text-sm);
  line-height: 1.6;
}
.ptxshop-modal__box .ptxshop-button {
  width: 100%;
}
.ptxshop-modal__close {
  position: absolute;
  top: var(--ptxshop-space-2);
  right: var(--ptxshop-space-3);
  border: 0;
  background: none;
  color: var(--ptxshop-color-text-faint);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.ptxshop-modal__close:hover {
  color: var(--ptxshop-color-navy-900);
}

/* ===== FAQ-Akkordeon (native <details>/<summary>) ===== */
.ptxshop-faq {
  margin-top: var(--ptxshop-space-10);
}
.ptxshop-faq__title {
  font-size: var(--ptxshop-text-xl);
  margin-bottom: var(--ptxshop-space-5);
}
.ptxshop-faq__list {
  display: grid;
  gap: var(--ptxshop-space-3);
}
.ptxshop-faq__item {
  border: 1px solid var(--ptxshop-color-border);
  border-radius: var(--ptxshop-radius-md);
  background: var(--ptxshop-color-white);
  overflow: hidden;
}
.ptxshop-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ptxshop-space-3);
  padding: var(--ptxshop-space-4) var(--ptxshop-space-5);
  font-weight: 700;
  color: var(--ptxshop-color-navy-900);
}
.ptxshop-faq__q::-webkit-details-marker { display: none; }
.ptxshop-faq__q::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4em;
  line-height: 1;
  color: var(--ptxshop-color-amber-600);
}
.ptxshop-faq__item[open] .ptxshop-faq__q::after { content: "\2212"; }
.ptxshop-faq__q:focus-visible {
  outline: none;
  box-shadow: var(--ptxshop-shadow-focus);
}
.ptxshop-faq__a {
  padding: 0 var(--ptxshop-space-5) var(--ptxshop-space-4);
  color: var(--ptxshop-color-text);
}

/* ===== Recommended Items ("Das koennte Sie auch interessieren") ===== */
.ptxshop-reco {
  margin-top: var(--ptxshop-space-10);
}
.ptxshop-reco__title {
  font-size: var(--ptxshop-text-xl);
  margin-bottom: var(--ptxshop-space-5);
}
/* Desktop: Grid mit den Home-Produktkarten (.px-product-card, Theme-Styling). */
.ptxshop-reco__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--ptxshop-space-4);
}
.ptxshop-reco__grid > .px-product-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
/* Feste Hoehen fuer die variablen Bereiche -> Preis & Button sitzen ueberall
   auf gleicher Linie, egal ob Titel/Preis 1- oder 2-zeilig sind. */
.ptxshop-reco__grid > .px-product-card .px-product-name {
  /* Titel IMMER genau bis 2 Zeilen (reservieren + kappen) -> alle Karten gleich
     hoch, Preis/Button fluchten garantiert, auch bei langen Titeln. */
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ptxshop-reco__grid .px-product-price-row > div:first-child {
  min-height: 2.8em;   /* "ab" + Preis reservieren */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ptxshop-reco__grid > .px-product-card .px-product-info-actions {
  margin-top: auto;
}

/* Mobile: horizontaler Slider – eine Karte sichtbar, wischbar (nicht gestapelt). */
@media (max-width: 640px) {
  .ptxshop-reco__grid {
    display: flex;
    gap: var(--ptxshop-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--ptxshop-space-2);
    scrollbar-width: none;
  }
  .ptxshop-reco__grid::-webkit-scrollbar { display: none; }
  .ptxshop-reco__grid > .px-product-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* ===== Verfuegbarkeits-Badge (Punktfarbe je Zustand) ===== */
.ptxshop-stockbadge--green .ptxshop-stockbadge__dot { background: var(--ptxshop-color-success); }
.ptxshop-stockbadge--orange .ptxshop-stockbadge__dot { background: var(--ptxshop-color-amber-500); }
.ptxshop-stockbadge--red .ptxshop-stockbadge__dot { background: var(--ptxshop-color-danger); }