/*
 * Neue Produktseite (redComponents.ProductPage) – Entwurf research/jutger-redesign/produktseite.html.
 * Alles hängt an .rcpp, damit nur die Produktseite betroffen ist. Farben: Akzent = Primärfarbe des Themes
 * (Jutger Orange, Beusekom Blau), per Plugin-Einstellung je Shop überschreibbar; Grautöne neutral aus dem Entwurf.
 */

.rcpp {
    --rc-accent: var(--primary, #f55e05);
    --rc-accent-hover: color-mix(in srgb, var(--rc-accent) 80%, #000);
    --rc-ok: var(--success, #76b82a);
    --rc-sale: var(--danger, #cd3700);
    --st-950: #16191d;
    --st-900: #22262a;
    --st-700: #393f46;
    --st-500: #596167;
    --st-300: #b0bac3;
    --st-200: #dee2e6;
    --st-100: #eff1f3;
    --papier: #f7f7f9;
    --rc-muted-text: #56616d;   /* graue Nebentexte mit mind. 4.5:1 auf Weiß und Papier */
    --rc-focus: #1d4ed8;        /* Fokusrahmen: auf Weiß, Orange und Blau gut sichtbar */
    --rc-rad: 3px;
    --rc-disp: inherit;
    --rc-body: inherit;
    --rc-mono: var(--font-monospace, "SF Mono", Menlo, monospace);
    --rcpp-sticky-top: 0px;
}

.rcpp.rcpp-fonts {
    --rc-disp: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    --rc-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
    --rc-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
    font-family: var(--rc-body);
}

/* ---------- Hauptbereich: Galerie 7 / Kaufbereich 5 ---------- */

.rcpp .rcpp-top {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 44px;
    padding-bottom: 48px;
}

@media (max-width: 991.98px) {
    .rcpp .rcpp-top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.rcpp .rcpp-gallery #pd-gallery-container { border: 1px solid var(--st-200); border-radius: var(--rc-rad); padding: 8px; }

/* Theme: #content-wrapper { overflow-x: hidden } verhindert position: sticky – clip schneidet genauso ab, ohne das. */
body.rcpp-page #content-wrapper { overflow-x: clip; }

/* Galerie fährt mit, solange rechts Varianten & Co. durchscrollen (wie Würth) */
@media (min-width: 992px) {
    .rcpp .rcpp-gallery > .pd-data-col-inner { position: sticky; top: calc(var(--rcpp-sticky-top) + 16px); }
}

/* ---------- Kopf: Marke, Name, Bewertung, Nummern ---------- */

.rcpp .rcpp-head { margin-bottom: 0; }

.rcpp .rcpp-brand { margin-bottom: 12px; }
.rcpp .rcpp-brand .pd-brand {
    display: inline-flex; align-items: center;
    font-family: var(--rc-disp); font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    border: 1px solid var(--st-200); border-radius: 2px; padding: 5px 10px; color: var(--st-700); text-decoration: none;
}
.rcpp .rcpp-brand .pd-brand:hover { border-color: var(--st-500); color: var(--st-900); }
.rcpp .rcpp-brand .pd-brand-picture { max-height: 30px; width: auto; }

.rcpp h1.pd-name {
    font-family: var(--rc-disp); font-weight: 800; font-size: clamp(26px, 3vw, 34px);
    line-height: 1.1; letter-spacing: .2px; color: var(--st-950); margin: 0;
}

.rcpp .rcpp-rating { margin: 10px 0 6px; }
.rcpp .rcpp-rating .pd-review-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; font-size: 14px; }
.rcpp .rcpp-rating .pd-rating-box { display: flex; align-items: center; gap: 6px; }
.rcpp .rcpp-rating .pd-review-link a { color: var(--st-500); text-decoration: underline; }

/* Artikelnummern als eine Zeile statt Tabelle */
.rcpp .rcpp-ids { margin: 8px 0 18px; }
.rcpp .rcpp-ids table.pd-attrs,
.rcpp .rcpp-ids table.pd-attrs > tbody { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; border: 0; }
.rcpp .rcpp-ids table.pd-attrs tr { display: flex; gap: 6px; background: none; }
.rcpp .rcpp-ids table.pd-attrs th,
.rcpp .rcpp-ids table.pd-attrs td { padding: 0; border: 0; font-family: var(--rc-mono); font-size: 12px; line-height: 1.6; background: none; }
.rcpp .rcpp-ids table.pd-attrs th { font-weight: 400; color: var(--st-500); }
.rcpp .rcpp-ids table.pd-attrs td { font-weight: 500; color: var(--st-700); }

.rcpp .rcpp-short { font-size: 15px; color: var(--st-700); margin-bottom: 18px; }

/* ---------- Kaufbox ---------- */

.rcpp .rcpp-pricebox { border: 1px solid var(--st-200); border-radius: var(--rc-rad); padding: 22px; margin-bottom: 16px; background: var(--body-bg, #fff); box-shadow: none; }
.rcpp .rcpp-pricebox .pd-group { margin-bottom: 0; padding: 0; border: 0; }

.rcpp .pd-price-group { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 4px !important; }
.rcpp .pd-finalprice-amount {
    font-family: var(--rc-disp); font-weight: 800; font-size: 44px; line-height: 1.05; color: var(--st-950);
}
.rcpp .pd-finalprice-offer .pd-finalprice-amount { color: var(--st-950); }
.rcpp .pd-promobadges { width: 100%; }
.rcpp .pd-promoprice-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 14px; color: var(--st-500); }
.rcpp .pd-promoprice-line { display: inline-flex; align-items: baseline; gap: 4px; margin: 0; }
.rcpp .pd-promoprice { text-decoration: line-through; padding-left: 0 !important; }
.rcpp .pd-promosaving { padding-left: 0 !important; gap: 6px; align-items: baseline; }
.rcpp .pd-saving-badge { background: var(--rc-sale); color: #fff; font-family: var(--rc-mono); font-weight: 400; font-size: 12px; padding: 4px 8px; border-radius: 2px; }
.rcpp .pd-pangv,
.rcpp .pd-legalinfo { font-size: 12px; color: var(--st-500); margin-top: 4px; }
.rcpp .pd-legalinfo a { color: var(--st-700); }

/* Staffelpreise: product-page.js baut aus der Tabelle Kacheln; die Tabelle bleibt für Bildschirmleser */
.rcpp .rcpp-staffel { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 18px 0 4px; }
.rcpp .rcpp-staffel button {
    border: 1px solid var(--st-200); border-radius: var(--rc-rad); background: #fff; padding: 10px 6px; text-align: center;
    color: var(--st-900); cursor: pointer; line-height: 1.25;
}
.rcpp .rcpp-staffel button:hover { border-color: var(--st-500); }
.rcpp .rcpp-staffel button[aria-pressed="true"] { border: 2px solid var(--st-900); padding: 9px 5px; }
.rcpp .rcpp-staffel .m { display: block; font-family: var(--rc-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--st-500); }
.rcpp .rcpp-staffel .p { display: block; font-family: var(--rc-disp); font-weight: 800; font-size: 18px; }
.rcpp .rcpp-staffel .e { display: block; font-size: 11px; font-weight: 600; color: var(--rc-ok); min-height: 1.25em; }
.rcpp .pd-tierprices.rcpp-has-staffel .pd-tierprices-title-src,
.rcpp .pd-tierprices.rcpp-has-staffel .table-responsive {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.rcpp .pd-tierprices { position: relative; }
.rcpp .pd-tierprices h6 { font-family: var(--rc-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--st-500); font-weight: 400; margin: 18px 0 0 !important; }

/* ---------- Varianten als Kacheln ---------- */

.rcpp .rcpp-variants { margin: 20px 0 6px; }
.rcpp .rcpp-variants .choice { margin-bottom: 18px; }
.rcpp .rcpp-variants .choice-label {
    font-family: var(--rc-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--st-500);
    font-weight: 400; margin-bottom: 9px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.rcpp .rcpp-variants .rcpp-vpick { font-family: var(--rc-disp); font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--st-900); }

.rcpp .rcpp-vopts { display: flex; flex-wrap: wrap; gap: 8px; }
.rcpp .rcpp-vopt,
.rcpp .redpim-variant-opt,
.rcpp .choice-box-label .choice-box-text {
    position: relative; min-width: 64px; border: 1.5px solid var(--st-200); border-radius: var(--rc-rad); background: #fff;
    padding: 11px 16px; font-family: var(--rc-disp); font-weight: 700; font-size: 15px; letter-spacing: .3px; color: var(--st-900);
    line-height: 1.15; text-align: center; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.rcpp .rcpp-vopt small { display: block; font-family: var(--rc-mono); font-size: 10px; font-weight: 400; letter-spacing: .5px; color: var(--st-500); margin-top: 2px; }
.rcpp .rcpp-vopt:hover,
.rcpp .redpim-variant-opt:hover { border-color: var(--st-500); }
.rcpp .rcpp-vopt[aria-pressed="true"],
.rcpp .redpim-variant-opt[aria-pressed="true"] { border-color: var(--st-900); box-shadow: inset 0 0 0 1px var(--st-900); }
.rcpp .rcpp-vopt[aria-pressed="true"]::after {
    content: ""; position: absolute; top: 0; right: 0; border: 9px solid var(--st-900);
    border-left-color: transparent; border-bottom-color: transparent; border-top-right-radius: 2px;
}
.rcpp .rcpp-vopt[aria-pressed="true"]::before {
    content: ""; position: absolute; top: 2.5px; right: 2.5px; width: 6px; height: 3px; z-index: 1;
    border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg);
}
/* Kombination gibt es nicht: grau und gestrichelt, aber anklickbar (wählt die nächste passende) */
/* Ausgegraut, aber anklickbar – braucht deshalb lesbaren Kontrast (WCAG 4.5:1), das Strichel-Muster zeigt den Zustand. */
.rcpp .rcpp-vopt[data-avail="false"],
.rcpp .redpim-variant-opt[aria-disabled="true"] { color: var(--rc-muted-text); border-style: dashed; opacity: 1; }
.rcpp .rcpp-vopt:disabled {
    color: var(--st-300); border-style: dashed; cursor: not-allowed;
    background: linear-gradient(135deg, transparent 46%, var(--st-200) 46% 54%, transparent 54%);
}
/* ---------- Barrierefreiheit: sichtbarer Tastaturfokus ---------- */
.rcpp :is(.rcpp-vopt, .redpim-variant-opt, .rcpp-staffel button, .rcpp-nav a, .rcpp-secondary .pd-action-link, .gal-nav .gal-item):focus-visible {
    outline: 3px solid var(--rc-focus); outline-offset: 2px; position: relative; z-index: 2;
}
.rcpp .numberinput-postfix { color: var(--rc-muted-text); }

.rcpp .rcpp-hidden-select,
.rcpp .rcpp-hidden-select + .select2 { display: none !important; }

/* RedPim-Variantenumschalter und Smartstore-„Boxes“ im selben Look */
.rcpp .redpim-variant-switcher { --rp-accent: var(--st-900); margin: 20px 0 6px !important; }
.rcpp .redpim-variant-label { font-family: var(--rc-mono); font-weight: 400; letter-spacing: 2px; color: var(--st-500); }
.rcpp .redpim-variant-pick { font-family: var(--rc-disp); font-weight: 700; font-size: 15px; color: var(--st-900); }
.rcpp .choice-box.selected .choice-box-text { border-color: var(--st-900); box-shadow: inset 0 0 0 1px var(--st-900); }

/* ---------- Verfügbarkeit ---------- */

.rcpp .rcpp-avail { margin: 14px 0; }
.rcpp .rcpp-avail .pd-stock-info { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; margin: 0; }
.rcpp .rcpp-avail .pd-stock { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--st-900); }
.rcpp .rcpp-avail .pd-stock::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rc-ok); flex: 0 0 auto; }
.rcpp .rcpp-avail .pd-outofstock::before { background: var(--rc-sale); }
.rcpp .rcpp-avail .deliverytime-group { gap: 6px; color: var(--st-500); }

/* ---------- Menge + Warenkorb ---------- */

.rcpp .rcpp-buyrow { margin-top: 6px; }
.rcpp .rcpp-buyrow .pd-offer-actions { --bs-gutter-x: 10px; margin-left: -5px; margin-right: -5px; }
.rcpp .rcpp-buyrow .pd-offer-actions > [class*="col"] { padding-left: 5px; padding-right: 5px; }
.rcpp .rcpp-buyrow .numberinput-group,
.rcpp .rcpp-buyrow .qty-input .input-group { border: 2px solid var(--st-900); border-radius: var(--rc-rad); overflow: hidden; height: 100%; }
.rcpp .rcpp-buyrow .numberinput-group .form-control,
.rcpp .rcpp-buyrow .numberinput-group .btn { border: 0; box-shadow: none; }
.rcpp .btn-add-to-cart {
    background: var(--rc-accent); border: 2px solid var(--rc-accent); color: #fff;
    font-family: var(--rc-disp); font-weight: 800; font-size: 17px; letter-spacing: .6px; text-transform: uppercase;
    border-radius: var(--rc-rad); padding: 12px; box-shadow: none;
}
.rcpp .btn-add-to-cart:hover,
.rcpp .btn-add-to-cart:focus { background: var(--rc-accent-hover); border-color: var(--rc-accent-hover); color: #fff; }

/* Merkzettel, Vergleichen, Frage zum Produkt als Textlinks */
.rcpp .rcpp-secondary .pd-actions-container { margin: 14px 0 0; padding: 0; border: 0; }
.rcpp .rcpp-secondary .pd-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.rcpp .rcpp-secondary .pd-action-item { border: 0 !important; flex: 0 0 auto; width: auto !important; min-width: 0 !important; max-width: none; padding: 0; }
.rcpp .rcpp-secondary .pd-action-link {
    display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 0;
    font-size: 13.5px; color: var(--st-500); text-decoration: underline; background: none; border: 0 !important;
}
.rcpp .rcpp-secondary .pd-action-link:hover { color: var(--st-900); }
.rcpp .rcpp-secondary .pd-action-icon { font-size: 13px; margin: 0; }
.rcpp .rcpp-secondary .pd-action-label { font-size: 13.5px !important; }

/* ---------- Sprungleiste ---------- */

.rcpp .rcpp-nav {
    position: sticky; top: var(--rcpp-sticky-top); z-index: 10; background: var(--body-bg, #fff);
    border-top: 1px solid var(--st-200); border-bottom: 1px solid var(--st-200);
}
.rcpp .rcpp-nav-inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.rcpp .rcpp-nav-inner::-webkit-scrollbar { display: none; }
.rcpp .rcpp-nav a {
    font-family: var(--rc-disp); font-weight: 700; font-size: 15px; letter-spacing: .4px; text-transform: uppercase;
    padding: 14px 18px; white-space: nowrap; border-bottom: 3px solid transparent; color: var(--st-500); text-decoration: none;
}
.rcpp .rcpp-nav a:hover { color: var(--st-900); border-color: var(--st-300); }
.rcpp .rcpp-nav a.on { color: var(--st-900); border-color: var(--rc-accent); }
.rcpp .rcpp-nav a .badge { margin-left: 4px; }

/* ---------- Abschnitte statt Reiter ---------- */

.rcpp .rcpp-bottom #pd-tabs > .nav { display: none; }
.rcpp .rcpp-bottom #pd-tabs > .tab-content { margin: 0; padding: 0; border: 0; }
.rcpp .rcpp-bottom #pd-tabs > .tab-content > .tab-pane {
    display: block !important; opacity: 1 !important; padding: 48px 0; border-bottom: 1px solid var(--st-100);
    scroll-margin-top: calc(var(--rcpp-sticky-top) + 64px);
}
.rcpp .rcpp-bottom #pd-tabs .nav-toggler { display: none !important; }
.rcpp .rcpp-bottom #pd-tabs .nav-collapse { display: block !important; height: auto !important; visibility: visible !important; }
.rcpp .rcpp-kicker { display: block; font-family: var(--rc-mono); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--st-500); }
.rcpp .rcpp-h2 {
    font-family: var(--rc-disp); font-weight: 800; font-size: 28px; line-height: 1.15; text-transform: uppercase; letter-spacing: .4px;
    color: var(--st-950); margin: 6px 0 20px;
}
.rcpp .rcpp-bottom .long-text { max-width: 78ch; }

/* Beschreibung mit Zahlungsmöglichkeiten rechts daneben */
.rcpp .rcpp-desc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.rcpp .rcpp-desc-aside {
    border: 1px solid var(--st-200); border-radius: var(--rc-rad); padding: 20px; background: var(--papier, #fff);
    position: sticky; top: calc(var(--rcpp-sticky-top) + 72px);
}
.rcpp .rcpp-desc-aside .rcpp-kicker { margin-bottom: 12px; }
.rcpp .rcpp-desc-aside .rcpp-pay > .mt-4:first-child { margin-top: 0 !important; }
.rcpp .rcpp-desc-aside [data-pp-message] { margin-top: 12px; }
.rcpp .rcpp-desc-aside > :first-child[data-pp-message] { margin-top: 0; }
@media (max-width: 991.98px) {
    .rcpp .rcpp-desc-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .rcpp .rcpp-desc-aside { position: static; }
}
.rcpp .rcpp-bottom .long-text ul li::marker { color: var(--rc-accent); }

/* Merkmale als Datenblatt */
.rcpp .pd-specs-table { font-size: 14.5px; margin: 0; max-width: 820px; }
/* Theme nimmt der ersten Spalte das linke Polster (padding-left: 0) – bei grauen Zeilen klebt der Text sonst am Rand. */
.rcpp .pd-specs-table > tbody > tr > th,
.rcpp .pd-specs-table > tbody > tr > td { padding: 10px 14px !important; border: 0; border-bottom: 1px solid var(--st-100); vertical-align: baseline; }
.rcpp .pd-specs-table th { font-weight: 500; color: var(--st-500); width: 46%; }
.rcpp .pd-specs-table td { font-family: var(--rc-mono); font-size: 13px; color: var(--st-900); }
.rcpp .pd-specs-table tr:nth-child(even) > * { background: var(--papier); }

/* Zubehör / auch gekauft */
.rcpp .rcpp-bottom > .block { border: 0; box-shadow: none; padding: 48px 0 0; margin: 0 !important; scroll-margin-top: calc(var(--rcpp-sticky-top) + 64px); }
.rcpp .rcpp-bottom > .block > .block-title { border: 0; padding: 0; background: none; }
.rcpp .rcpp-bottom > .block > .block-title h2 {
    font-family: var(--rc-disp); font-weight: 800; font-size: 28px; text-transform: uppercase; letter-spacing: .4px; color: var(--st-950); margin: 0 0 20px;
}
.rcpp .rcpp-bottom > .block > .block-body { padding-left: 0; padding-right: 0; }

@media (max-width: 575.98px) {
    .rcpp .pd-finalprice-amount { font-size: 36px; }
    .rcpp .rcpp-pricebox { padding: 16px; }
    .rcpp .rcpp-nav a { padding: 12px 12px; font-size: 14px; }
    .rcpp .rcpp-h2 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .rcpp * { transition: none !important; }
}

/* Weiß auf Akzentfarbe (Jutger-Orange 3.2:1) erfüllt WCAG nur als große Schrift: ab 14pt fett = 18.67px. */
.rcpp .btn-add-to-cart { font-size: 19px !important; font-weight: 700; }

/* Klebende Kopf-/Sprungleiste und Knöpfe unten rechts dürfen den Tastaturfokus nicht verdecken (WCAG 2.4.11). */
html:has(.rcpp) { scroll-padding-top: calc(var(--rcpp-scroll-pad, 0px) + 72px); scroll-padding-bottom: 90px; }