/* Produktseite. Wird nur von den Produktseiten geladen. */
    .pdp { display: grid; grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); align-items: start; }

    /* Collage-Galerie, dünne Abstände wie auf der Startseite */
    .pdp__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
    .pdp__gallery figure { background: var(--tile); aspect-ratio: 4 / 5; overflow: hidden; margin: 0; }
    .pdp__gallery figure.is-full { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
    .pdp__gallery img { width: 100%; height: 100%; object-fit: cover; }

    /* Rechte Spalte bleibt fest (sticky), eigener Scroll bei viel Inhalt */
    .pdp__panel {
      position: sticky; top: 76px;
      max-height: calc(100svh - 90px);
      overflow-y: auto;
      padding: clamp(26px, 3vw, 46px) clamp(22px, 3vw, 44px);
      scrollbar-width: thin;
    }
    .pdp__title { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.01em; }
    .pdp__artno { font-family: var(--font-ui); font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: .1em; text-transform: uppercase; }
    .pdp__price { font-family: var(--font-ui); font-size: 19px; margin-top: 10px; }
    .pdp__tax { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
    .pdp__tax a { text-decoration: underline; text-underline-offset: 2px; }

    /* Faserzusammensetzung nach VO (EU) 1007/2011 — steht bewusst außerhalb der
       Akkordeons, damit sie ohne Klick sichtbar ist. */
    .pdp__material { font-size: 13px; color: #3a3936; margin-top: 12px; }
    .pdp__material span {
      font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .12em;
      text-transform: uppercase; color: var(--muted); margin-right: 8px;
    }

    .pdp__soldout { display: inline-block; margin-top: 12px; font-size: 12px; padding: 4px 12px; border-radius: 999px; background: #f4f4f4; color: var(--ink); }
    .pdp__desc { font-size: 14.5px; line-height: 1.75; margin-top: 18px; color: #3a3936; }
    .pdp__panel .fadn-btn { margin-top: 20px; }
    .pdp__pay { font-size: 12.5px; color: var(--muted); margin-top: 14px; }

    /* Größenauswahl */
    .pdp__sizes { margin-top: 24px; }
    .pdp__sizes-label { font-family: var(--font-ui); font-size: 11.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
    .pdp__sizes-row { display: flex; flex-wrap: wrap; gap: 8px; }
      /* Größen im Label-Stil */
    .pdp__size {
      font-family: var(--font-ui);
      min-width: 48px;
      padding: 10px 14px;
      border: 1px solid var(--line);
      font-size: 13px;
      font-weight: 600;
      transition: border-color .2s ease, background .2s ease, color .2s ease;
    }
    .pdp__size:hover { border-color: var(--ink); }
    .pdp__size.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

    .acc { margin-top: 26px; border-top: 1px solid var(--line); }
    .acc__item { border-bottom: 1px solid var(--line); }
    .acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 15px 0; font-family: var(--font-ui); font-size: 11.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; text-align: left; }
    .acc__head svg { width: 14px; height: 14px; flex: none; transition: transform .3s ease; }
    .acc__item.is-open .acc__head svg { transform: rotate(45deg); }
    .acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
    .acc__item.is-open .acc__body { grid-template-rows: 1fr; }
    .acc__inner { overflow: hidden; }
    .acc__content { padding: 2px 0 18px; font-size: 13.5px; line-height: 1.7; color: #3a3936; }
    .acc__content ul { padding-left: 18px; display: grid; gap: 8px; }
    .acc__chart { width: 100%; height: auto; display: block; background: var(--grey); }

    /* Größentabelle als Schaltfläche, öffnet die große Ansicht */
    .acc__chart-btn {
      display: block; width: 100%; padding: 0; margin-bottom: 16px;
      text-align: left; position: relative;
    }
    .acc__chart-hint {
      display: block; margin-top: 6px;
      font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em;
      text-transform: uppercase; color: var(--muted);
      transition: color .2s ease;
    }
    .acc__chart-btn:hover .acc__chart-hint { color: var(--red); }
    .acc__chart-btn:hover .acc__chart { outline: 1px solid var(--red); }

    /* Große Ansicht der Größentabelle */
    .chartbox {
      position: fixed; inset: 0; z-index: 200;
      display: none; place-items: center;
      padding: clamp(16px, 4vw, 48px);
      background: rgba(11, 11, 11, .88);
      backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    }
    .chartbox.is-open { display: grid; }
    .chartbox__img {
      max-width: min(1100px, 100%); max-height: 100%;
      width: auto; height: auto; object-fit: contain;
      background: var(--paper);
    }
    .chartbox__close {
      position: absolute; top: 14px; right: 18px;
      font-size: 30px; line-height: 1; color: var(--bone);
      padding: 6px 10px;
    }
    .chartbox__close:hover { color: var(--red); }

    .related { padding: clamp(40px, 6vw, 70px) 0 clamp(36px, 5vw, 60px); }
    .related__head { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: clamp(22px, 3vw, 40px); }
    .related__head h2 { font-family: var(--font-ui); font-size: clamp(13px, 1.6vw, 16px); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
    .related__arrow { display: grid; place-items: center; width: 34px; height: 34px; opacity: .85; transition: opacity .25s ease, transform .25s ease; }
    .related__arrow:hover:not(:disabled) { opacity: 1; transform: scale(1.15); }
    .related__arrow:disabled { opacity: .22; cursor: default; }
    .related__arrow svg { width: 22px; height: 22px; }
    .related__track { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 2px; }
    .related__track::-webkit-scrollbar { display: none; }
    .product { flex: 0 0 clamp(240px, 25vw, 380px); scroll-snap-align: start; }
    .product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
    .product:hover .product__media img { transform: scale(1.05); }

    /* Breakpoints wie im Rest des Shops.
       ≥1600 Großbild, ≤1250 schmalere Infospalte, ≤980 untereinander,
       ≤620 einspaltige Galerie. */
    @media (min-width: 1600px) {
      .pdp { max-width: 1800px; margin-inline: auto; }
    }
    @media (max-width: 1250px) {
      /* Die Infospalte darf schmaler werden, bevor das Layout kippt.
         Sonst wird die Galerie schon bei 1100 Pixel unangenehm eng. */
      .pdp { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
    }
    @media (max-width: 980px) {
      .pdp { grid-template-columns: 1fr; }
      .pdp__panel { position: static; max-height: none; overflow: visible; }
      .pdp__gallery { grid-template-columns: 1fr 1fr; }
      .pdp__gallery figure.is-full { aspect-ratio: 3 / 2; }
    }
    @media (max-width: 620px) {
      .pdp__gallery { grid-template-columns: 1fr; }
      .pdp__gallery figure.is-full { aspect-ratio: 4 / 5; }
    }