/* ==========================================================================
   Produktseite

   Lag als <style>-Block in catalogue/detail.html. Werte kommen aus
   tokens.css; neue Regeln fuer diese Seite gehoeren hierher, nicht ins
   Template.
   ========================================================================== */

/* HAUPT-LAYOUT & ABSTÄNDE */
    .kfz-pdp { margin-top: 30px; margin-bottom: 60px; }
    .kfz-pdp__top { display: flex; gap: 40px; }
    .kfz-summary { flex: 1; padding-top: 10px; } /* Etwas Luft nach oben, damit es bündig mit der Galerie abschließt */

    .kfz-summary__title { font-size: 28px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 16px; color: #151a21; line-height: 1.25; }

    /* PREIS IN SCHWARZ */
    .kfz-summary__price { font-size: 36px; font-weight: 700; letter-spacing: -.02em; color: #151a21; margin-bottom: 25px; font-variant-numeric: tabular-nums; }

    /* VERSAND & BESTAND BOX - KOMPLETT CLEAN (OHNE RAHMEN) */
    .kfz-meta { margin-bottom: 30px; display: flex; flex-direction: column; gap: 15px; }
    .kfz-meta-row { display: flex; flex-direction: column; gap: 4px; } /* Gestapelt wie im Mockup */
    .kfz-meta-k { font-size: 13px; font-weight: 600; color: #65707f; letter-spacing: .01em; }
    .kfz-meta-v { font-size: 16.5px; color: #151a21; font-weight: 500; }

    /* SPALTMAßE DER UNTEREN KARTEN */
    .kfz-stack { display: flex; flex-direction: column; gap: 28px; }

    /* Preis-Pflichtangabe */
    .kfz-price-note { font-size: 14px; color: #65707f; margin-top: -18px; margin-bottom: 25px; }
    .kfz-price-note a { color: #0053a0; }

    /* Vertrauens-Punkte am Kaufbutton */
    .kfz-assurance { list-style: none; margin: 22px 0 0; padding: 0; }
    .kfz-assurance li {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 15.5px; color: #303a46; line-height: 1.55; padding: 8px 0;
      border-bottom: 1px solid #f2f2f2;
    }
    .kfz-assurance li:last-child { border-bottom: 0; }
    .kfz-assurance i { color: #3665f3; width: 18px; text-align: center; margin-top: 3px; flex: 0 0 auto; }
    .kfz-assurance a { color: #0053a0; }

    /* Service-Karte */
    .kfz-service { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .kfz-service__item h3 { font-size: 17px; font-weight: 600; margin: 0 0 9px; color: #151a21; }
    .kfz-service__item p { font-size: 16px; line-height: 1.68; color: #303a46; margin: 0 0 9px; }
    .kfz-service__hint { color: #65707f !important; font-size: 14px !important; }
    .kfz-service a { color: #0053a0; }

    /* Beschreibungstext aus dem eBay-Import.
       Der bringt eigene <font face="Georgia" size="5" color="#ff0010">-Tags
       mit: Serifenschrift, sprunghafte Groessen und grelles Rot mitten im
       Satzbild. Der Text bleibt wie er ist, nur die Formatierung wird auf
       die Schrift des Shops gezogen. */
    .kfz-content { font-size: 16.5px; line-height: 1.72; color: #303a46; }
    .kfz-content *,
    .kfz-content *[style] { font-family: var(--font-ui) !important; }
    .kfz-content font[size],
    .kfz-content *[style*="font-size"] { font-size: inherit !important; }
    .kfz-content font[size="5"],
    .kfz-content font[size="6"],
    .kfz-content font[size="7"] { font-size: 18px !important; font-weight: 600; }
    .kfz-content font[color="#ff0010"],
    .kfz-content font[color="#FF0010"],
    .kfz-content font[color="red"] { color: #b8452e !important; }
    .kfz-content p { margin: 0 0 12px; }
    .kfz-content a { color: #0053a0; }
    .kfz-content img { max-width: 100%; height: auto; }

    /* Kaeuferstimmen */
    .kfz-reviews__lead { font-size: 16px; color: #303a46; margin: -6px 0 18px; }
    .kfz-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .kfz-review {
      margin: 0; padding: 16px 18px; background: #fafafa;
      border: 1px solid #eee; border-radius: 10px;
    }
    .kfz-review__stars { color: #8a5c12; font-size: 15px; letter-spacing: 1px; }
    .kfz-review__text { margin: 7px 0 9px; font-size: 15.5px; line-height: 1.6; color: #151a21; }
    .kfz-review__meta { font-size: 13px; color: #65707f; font-style: normal; }
    .kfz-reviews__note { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: #65707f; }

    @media (max-width: 991px) {
      /* Galerie und Kaufbox standen auf dem Handy nebeneinander: der
         Produkttitel brach auf sieben Zeilen, das Bild blieb daumengross. */
      .kfz-pdp__top {
        flex-direction: column;
        gap: 26px;
        /* stretch statt start: sonst nimmt die Galerie die Breite ihrer
           Vorschaubilder an und schiebt die Seite seitlich raus */
        align-items: stretch;
      }
      .kfz-pdp__top > * { min-width: 0; max-width: 100%; }
      .kfz-summary { padding-top: 0; }
    }

    @media (max-width: 767px) {
      .kfz-service, .kfz-reviews { grid-template-columns: 1fr; }
      .kfz-panel { padding: 20px 18px; border-radius: 14px; }
      .kfz-panel--top { padding: 20px 18px; }
      .kfz-panel__title { font-size: 19px; }
      .kfz-summary__title { font-size: 23px; }
      .kfz-summary__price { font-size: 30px; }
    }

    /* Abschnitte der Produktseite.
       Hiessen frueher .kfz-card -- genauso wie die Produktkarte im Raster.
       Deren Regeln (padding:0, display:flex, beide !important) trafen damit
       auch diese Abschnitte und nahmen ihnen Innenabstand und Rahmen. */
    .kfz-panel {
      background: #fff;
      border: 1px solid #ececec;
      border-radius: 16px;
      padding: 28px 30px;
    }
    .kfz-panel--top {
      padding: 30px;
      margin-bottom: 40px;
    }
    .kfz-panel__title {
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -.012em;
      color: #151a21;
      margin: 0 0 20px;
      padding-bottom: 13px;
      border-bottom: 1px solid #ececec;
    }

    /* FAHRZEUGLISTE */
    .kfz-compat-container { max-height: 450px; overflow-y: auto; border: 1px solid #ddd; border-radius: 8px; width: 100%; }
    .kfz-compat-table { width: 100% !important; border-collapse: collapse !important; display: table !important; }
    .kfz-compat-table thead th { position: sticky; top: 0; background: #f3f5f8 !important; color: #151a21 !important; border-bottom: 2px solid #dbe2ea !important; padding: 12px !important; text-align: left !important; z-index: 10; }
    .kfz-compat-table td { padding: 10px 12px !important; border-bottom: 1px solid #eee !important; color: #303a46 !important; }
    .kfz-compat-table tr:nth-child(even) { background: #f9f9f9 !important; }

    /* ARTIKELMERKMALE */
    .kfz-table { width: 100%; border-collapse: collapse; }
    .kfz-table th { text-align: left; background: #f4f4f4; width: 35%; padding: 12px; border: 1px solid #eee; color: #555; }
    .kfz-table td { padding: 12px; border: 1px solid #eee; }
    
    /* MODAL STYLING */
    .modal-content { border-radius: 10px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    .modal-header { border-bottom: 1px solid #eee; background-color: #f8f9fa; border-top-left-radius: 10px; border-top-right-radius: 10px; }
    .modal-title { font-weight: 700; color: #28a745; }
    .modal-footer { border-top: 1px solid #eee; }
    .btn-checkout { background-color: var(--ink); color: #fff; font-weight: 600; border: none; }
    .btn-checkout:hover { background-color: var(--ink-soft); color: #fff; }


/* Galeriespalte. min-width:0 ist noetig, weil Flex-Kinder von sich aus nicht
   unter ihre Inhaltsbreite gehen -- ohne das waechst die Galerie ueber den
   Kasten hinaus. */
.kfz-pdp__media{
  flex: 1.2;
  min-width: 0;
}

/* Kaufknopf */
.kfz-buy{
  height: 60px;
  font-size: var(--kfz-fs-lg);
  font-weight: var(--kfz-fw-semi);
  text-transform: uppercase;
  border-radius: var(--kfz-r-sm);
  background: var(--kfz-button) !important;
  border-color: var(--kfz-button) !important;
}
.kfz-buy:hover,
.kfz-buy:focus{
  background: var(--kfz-button-dark) !important;
  border-color: var(--kfz-button-dark) !important;
}