/* ═══════════════════════════════════════════════════════════════
   Product-detail page
   Loaded ONLY on is_product() and scoped to .pp-pdp, so the shop,
   category pages, homepage, cart and checkout keep their styles.
   ═══════════════════════════════════════════════════════════════ */

.pp-pdp {
    --pd-gold:      var(--color-accent, #2676A3);
    --pd-gold-dark: #1E6085;              /* small gold text: ≥ 4.5:1 on white */
    --pd-ink:       #1A1A1A;
    --pd-text:      #3A3A3A;
    --pd-mute:      #5C5C5C;
    --pd-line:      #D5E8F3;
    --pd-cream:     #F2F8FC;
    --pd-tile:      #F2F8FC;              /* pale-blue photo backdrop */
    --pd-serif:     'Playfair Display', Georgia, serif;

    background: #fff;
    color: var(--pd-ink);
    padding-top: calc(var(--header-h, 113px) + 16px);
    padding-bottom: clamp(48px, 6vw, 88px);
}
.pp-pdp a { text-decoration: none; }
.pp-pdp :focus-visible { outline: 2px solid var(--pd-gold); outline-offset: 2px; }
.pp-pdp .pp-ico { flex: none; color: var(--pd-gold); }

/* ── Notices (WooCommerce) ───────────────────────────────────── */
.pp-pdp .woocommerce-notices-wrapper { margin-bottom: 14px; }
.pp-pdp .woocommerce-message, .pp-pdp .woocommerce-info, .pp-pdp .woocommerce-error {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 10px; padding: 14px 18px; list-style: none;
    background: var(--pd-cream); border-left: 3px solid var(--pd-gold); border-radius: 3px; font-size: 15px; line-height: 1.5; color: var(--pd-ink);
}
.pp-pdp .woocommerce-error { border-left-color: #B3261E; }
.pp-pdp .woocommerce-message .button {
    order: 2; margin-left: auto; padding: 9px 16px; border-radius: 3px; background: var(--pd-gold); color: #fff;
    font: 700 12px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
}
.pp-pdp .woocommerce-message .button:hover { background: var(--color-accent-dark, #1E6085); }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.pp-pdp__crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 18px; padding: 0; font-size: 13px; line-height: 1.5; color: var(--pd-mute); }
.pp-pdp__crumbs li + li::before { content: '›'; margin: 0 9px; color: #A9A296; }
.pp-pdp__crumbs a { color: var(--pd-mute); }
.pp-pdp__crumbs a:hover { color: var(--pd-gold-dark); }
.pp-pdp__crumbs [aria-current] { color: var(--pd-text); }

/* ── Two columns: gallery ≈ 52 %, purchase area ≈ 48 % ───────── */
.pp-pdp__grid { display: grid; grid-template-columns: minmax(0, 1.083fr) minmax(0, 1fr); column-gap: clamp(28px, 4.2vw, 56px); align-items: start; }
.pp-pdp__media, .pp-pdp__buy { min-width: 0; }

/* ── Gallery (WooCommerce's own: slider, thumbnails, variation image – no zoom, no lightbox) ── */
.pp-pdp .woocommerce-product-gallery { position: relative; margin: 0; }
.pp-pdp .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; }
.pp-pdp .woocommerce-product-gallery__image {
    aspect-ratio: 5 / 4; display: flex; align-items: center; justify-content: center;
    background: var(--pd-tile); overflow: hidden; border-radius: 2px;
}
.pp-pdp .woocommerce-product-gallery__image > a { cursor: default; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pp-pdp .woocommerce-product-gallery__image img {
    display: block; width: 100%; height: 100%; object-fit: contain;
    mix-blend-mode: multiply;              /* studio photos are shot on white – the pale tile shows through */
}
/* feather the photo edge so its studio backdrop melts into the tile instead of showing a rectangle (same treatment as the category cards) */
.pp-pdp .woocommerce-product-gallery__image img:not(.zoomImg) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
    mask-composite: intersect;
}
.pp-pdp .woocommerce-product-gallery__image--placeholder img { mix-blend-mode: normal; object-fit: contain; }
/* a photo shot on pure white (pp_white_image_ids) gets a white tile: it blends into the page instead of sitting on grey */
.pp-pdp .woocommerce-product-gallery__image:has(img.pp-img--white) { background: #fff; }


/* thumbnails: one horizontal row below the main image (only when the product really has several images) */
.pp-pdp .flex-control-thumbs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 10px 0 0; padding: 0;
}
.pp-pdp .flex-control-thumbs li { margin: 0; padding: 0; }
.pp-pdp .flex-control-thumbs img {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: var(--pd-tile); mix-blend-mode: multiply;   /* height:auto – WooCommerce's height attribute would otherwise win over the ratio */
    cursor: pointer; border: 1px solid transparent; border-radius: 2px; opacity: .72; transition: opacity .2s, border-color .2s;
}
.pp-pdp .flex-control-thumbs img:hover { opacity: 1; }
.pp-pdp .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--pd-gold); box-shadow: 0 0 0 1px var(--pd-gold); }
.pp-pdp .flex-control-thumbs img:focus-visible { outline: 2px solid var(--pd-gold); outline-offset: 2px; }

/* ── Slideshow (products with a Produktgalerie, .pp-gallery--slides) ──
   Every slide keeps the same 5:4 stage, so nothing below moves. Photos that are not white studio cut-outs are shown
   whole (contain) on white, without the multiply/feather meant for cut-outs on the pale tile. */
.pp-gallery--slides .woocommerce-product-gallery__image:not(:has(img.pp-img--white)) { background: #fff; }
.pp-gallery--slides .woocommerce-product-gallery__image:not(:has(img.pp-img--white)) img:not(.zoomImg) {
    mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none;
}
/* the column width is fractional, so flexslider's offsets leave up to 1px of the neighbouring slide at the edge */
.pp-gallery--slides .flex-viewport { clip-path: inset(0 1px); }
.pp-gallery--slides .flex-control-thumbs img { background: #fff; mix-blend-mode: normal; border-color: var(--pd-line); }
.pp-gallery--slides .flex-control-thumbs img.flex-active { border-color: var(--pd-gold); }
.pp-gal-nav {
    position: absolute; top: 50%; z-index: 8; width: 40px; height: 40px; margin-top: -20px; padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid var(--pd-line); border-radius: 50%; background: rgba(255,255,255,.92); color: var(--pd-ink);
    opacity: .85; transition: opacity .2s, border-color .2s, color .2s, background-color .2s;
}
.pp-gal-nav--prev { left: 12px; }
.pp-gal-nav--next { right: 12px; }
.pp-gal-nav svg { width: 18px; height: 18px; }
.pp-gal-nav:hover, .pp-gal-nav:focus-visible { opacity: 1; background-color: #fff; border-color: var(--pd-gold); color: var(--pd-gold); }
.pp-gal-nav:disabled { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
/* Desktop: thumbnails as a vertical column LEFT of the main image, square stage (the portrait data tables get the full
   height; landscape photos are width-limited either way). Below 900px the generic 96px horizontal strip applies. */
@media (min-width: 900px) {
    .pp-pdp .pp-gallery--slides { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: start; }
    .pp-gallery--slides > .flex-viewport, .pp-gallery--slides > .woocommerce-product-gallery__wrapper { grid-column: 2; grid-row: 1; }
    .pp-pdp .pp-gallery--slides .flex-control-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; margin: 0; }
    .pp-pdp .pp-gallery--slides .flex-control-thumbs img { aspect-ratio: 1 / 1; }
    .pp-pdp .pp-gallery--slides .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; }
}
/* Crossfade (.pp-gallery--fade): flexslider stacks the slides (float + negative margin) inside the wrapper without a
   viewport, so the wrapper must contain them and carries the arrows. */
.pp-gallery--fade .woocommerce-product-gallery__wrapper { display: flow-root; position: relative; }
/* below 900px: the generic 96px strip, but the few slideshow thumbnails shrink to fit instead of scrolling off-screen */
@media (max-width: 899px) { .pp-pdp .pp-gallery--slides .flex-control-thumbs li { flex: 0 1 96px; min-width: 0; } }
@media (max-width: 600px) {
    .pp-gal-nav { width: 24px; height: 24px; margin-top: -12px; }
    .pp-gal-nav svg { width: 14px; height: 14px; }
    .pp-gal-nav::after { content: ""; position: absolute; inset: -10px -2px; }   /* 44 px tall touch target, the circle stays small; no wider, or it would widen the page */
    .pp-gal-nav--prev { left: 0; }
    .pp-gal-nav--next { right: 0; }
    /* the arrows sit in white space BESIDE the photo, touching it: each slide keeps the full width (sliding / swipe unchanged)
       but has 24 px of empty space on both sides (white like the page, .pp-pdp); the 6:5 photo box is the link inside it.
       The space is the link's margin, not padding on the slide: flexslider's step ignores slide padding, so slides would drift.
       Images are contained in it whole: square slides (the text graphics) use the full height, landscape photos the full
       width, and the white margin of studio photos is trimmed on top (pp_gallery_trim_rule, whose 6 / 5 must match this box). */
    .pp-pdp .pp-gallery--slides .woocommerce-product-gallery__image { aspect-ratio: auto; border-radius: 0; }
    .pp-pdp .pp-gallery--slides .woocommerce-product-gallery__image > a {
        aspect-ratio: 6 / 5; width: auto; height: auto; margin-inline: 24px; overflow: hidden; border-radius: 2px; background: #fff;
    }
    /* the gallery alone reaches past the page gutter, 4 px from the screen on both sides: that width goes to the photo.
       Thumbnails as one row of 68 px squares BELOW the stage: centred while they fit (auto margins, which unlike
       justify-content leave the first one reachable), scrolling sideways when they do not (product-page.js keeps the active
       one in view). */
    .pp-pdp .pp-gallery--slides { margin-inline: -12px; }
    .pp-pdp .pp-gallery--slides .flex-control-thumbs {
        display: flex; gap: 8px; margin: 10px 0 0; padding: 0 8px;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: none; scrollbar-width: none;
    }
    .pp-pdp .pp-gallery--slides .flex-control-thumbs::-webkit-scrollbar { display: none; }
    .pp-pdp .pp-gallery--slides .flex-control-thumbs li { flex: 0 0 68px; }
    .pp-pdp .pp-gallery--slides .flex-control-thumbs li:first-child { margin-left: auto; }
    .pp-pdp .pp-gallery--slides .flex-control-thumbs li:last-child { margin-right: auto; }
    .pp-pdp .pp-gallery--slides .flex-control-thumbs img { aspect-ratio: 1 / 1; box-shadow: none; }
    .pp-pdp .pp-gallery--slides .flex-control-thumbs img.flex-active { border-color: var(--pd-gold); box-shadow: inset 0 0 0 1px var(--pd-gold); }
}

/* ── Verified facts under the gallery ────────────────────────── */
.pp-facts {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 0; list-style: none; margin: 22px 0 0; padding: 14px 0;
    border-top: 1px solid var(--pd-line); border-bottom: 1px solid var(--pd-line);
}
.pp-facts li { display: flex; align-items: center; gap: 14px; flex: 1 1 0; min-width: 150px; padding: 4px 18px; font-size: 15px; line-height: 1.35; color: var(--pd-text); }
.pp-facts li + li { border-left: 1px solid var(--pd-line); }
.pp-facts .pp-ico { width: 38px; height: 38px; stroke-width: 1.3; }

/* ── Purchase area ───────────────────────────────────────────── */
.pp-pdp__cat { margin: 4px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-gold-dark); }
.pp-pdp__title { margin: 6px 0 0; font-family: var(--pd-serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 46px); line-height: 1.1; letter-spacing: 0; color: var(--pd-ink); overflow-wrap: anywhere; }
.pp-pdp__intro { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--pd-mute); }
.pp-pdp__intro p { margin: 0; }

.pp-pdp__pricebox { margin-top: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--pd-line); }
.pp-pdp__price { margin: 0; font-family: var(--pd-serif); font-size: clamp(34px, 3.3vw, 44px); line-height: 1.15; color: var(--pd-ink); font-variant-numeric: lining-nums; }
.pp-pdp__price .amount, .pp-pdp__price bdi { color: inherit; font-weight: inherit; }
.pp-pdp__price del { margin-right: 10px; font-size: .55em; color: var(--pd-mute); }
.pp-pdp__price ins { text-decoration: none; background: none; }
.pp-pdp__notice { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--pd-mute); }
.pp-pdp__notice a { color: var(--pd-text); text-decoration: underline; text-underline-offset: 3px; }
.pp-pdp__notice a:hover { color: var(--pd-gold-dark); }

/* ── WooCommerce form: option groups, summary, quantity + add to cart ── */
.pp-pdp__form { margin-top: 22px; }
.pp-pdp__form form.cart { margin: 0; }
.pp-pdp .variations, .pp-pdp .variations tbody, .pp-pdp .variations tr, .pp-pdp .variations th, .pp-pdp .variations td { display: block; margin: 0; padding: 0; border: 0; text-align: left; }
.pp-pdp .variations tr + tr { margin-top: 20px; }
.pp-pdp .variations { counter-reset: pp-step; }
.pp-pdp .variations tr { counter-increment: pp-step; }
.pp-pdp .variations th.label { margin-bottom: 12px; }
.pp-pdp .variations th.label label, .pp-step-title {
    display: block; margin: 0 0 12px; font-family: var(--pd-serif); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--pd-ink);
}
/* headings are plain (no step numbers): "Größe wählen" over the small attribute label, "Menge", "Deckel auswählen" */
.pp-pdp .variations th.label label::after { content: ' wählen'; }
.pp-pdp .variations tr:has(.pp-opt[data-kind="diameter"]) th.label::before, .pp-pdp .variations tr:has(.pp-opt[data-kind="size"]) th.label::before {
    content: 'Größe wählen'; display: block; margin: 0 0 3px; font: 400 20px/1.3 var(--pd-serif); color: var(--pd-ink);
}
.pp-pdp .variations tr:has(.pp-opt[data-kind="diameter"]) th.label label, .pp-pdp .variations tr:has(.pp-opt[data-kind="size"]) th.label label { margin: 0 0 12px; font: 400 13px/1.4 var(--font-body); color: var(--pd-mute); }
.pp-pdp .variations tr:has(.pp-opt[data-kind="diameter"]) th.label label::after, .pp-pdp .variations tr:has(.pp-opt[data-kind="size"]) th.label label::after { content: none; }

/* option buttons (they drive WooCommerce's own <select>, which stays for no-JS and screen-reader fallback) */
/* equal-width buttons: as many columns as there are options (max 4, 3 on phones), ≤150px each – four fill the 48 % column like the reference (≈130px), fewer never turn into oversized slabs */
.pp-opt { display: grid; grid-template-columns: repeat(var(--pp-cols, 4), minmax(0, 150px)); gap: 12px; }
.pp-opt__btn {
    position: relative; width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px;
    background: #fff; color: var(--pd-ink); border: 1px solid #D5E8F3; border-radius: 6px; cursor: pointer;
    font: 400 18px/1.2 var(--pd-serif); text-align: center; transition: border-color .15s, background .15s, color .15s;
}
.pp-opt__btn:hover:not(:disabled) { border-color: var(--pd-ink); }
.pp-opt__btn.is-selected { background: var(--pd-ink); border-color: var(--pd-ink); color: #fff; }
.pp-opt__btn.is-selected::after {
    content: ''; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--pd-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
    box-shadow: 0 0 0 2px #fff;
}
.pp-opt__btn:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.pp-opt__btn:focus-visible { outline: 2px solid var(--pd-gold); outline-offset: 3px; }
/* "Größe wählen" block for the development preview selector (no variations configured yet).
   form.cart is a flex row for simple products, so the block claims a full row. */
.pp-pdp form.cart .pp-opt-block { flex: 0 0 100%; margin-top: 4px; }
.pp-pdp .pp-opt-block .pp-step-title { margin: 0 0 3px; }
.pp-pdp .pp-opt__sublabel { margin: 0 0 12px; font: 400 13px/1.4 var(--font-body); color: var(--pd-mute); }

.pp-opt__native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pp-opt-wrap { position: relative; }
.pp-pdp .reset_variations { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--pd-mute); text-decoration: underline; text-underline-offset: 3px; }
.pp-pdp .reset_variations[style*="hidden"] { display: none; }   /* WooCommerce hides it until an option is chosen – don't leave a gap */
.pp-pdp .reset_variations:hover { color: var(--pd-gold-dark); }

/* selected-option summary strip */
.pp-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; padding: 14px 18px;
    background: var(--pd-cream); border-radius: 3px; font-size: 16px; line-height: 1.4; color: var(--pd-ink);
}
.pp-summary .pp-ico { width: 26px; height: 26px; }
.pp-summary__text strong { font-weight: 600; }
.pp-summary__more { margin-left: auto; font-size: 14px; color: var(--pd-text); }
.pp-summary__more:hover { color: var(--pd-gold-dark); }
.pp-summary--fixed { margin-top: 18px; }

/* WooCommerce's own variation output: keep availability + description, drop the duplicate price (shown once at the top) */
.pp-pdp .single_variation_wrap .woocommerce-variation-price { display: none; }
.pp-pdp .woocommerce-variation-description p, .pp-pdp .woocommerce-variation-availability p, .pp-pdp .woocommerce-variation p { margin: 12px 0 0; font-size: 14px; color: var(--pd-mute); }
.pp-pdp .woocommerce-variation-availability .out-of-stock { color: #B3261E; }
.pp-pdp .single_variation_wrap { margin-top: 0; }

/* quantity + add to cart – simple products and variable products share this row */
.pp-pdp form.cart, .pp-pdp .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 14px; }
.pp-pdp form.variations_form.cart { display: block; }
.pp-pdp .pp-step-title { flex: 0 0 100%; margin-top: 26px; }
.pp-pdp form.cart:not(.variations_form) .pp-step-title { margin-top: 4px; }
.pp-pdp .quantity { display: inline-flex; align-items: stretch; flex: none; height: 50px; margin: 0; border: 1px solid #D5E8F3; border-radius: 3px; background: #fff; overflow: hidden; }
.pp-pdp .quantity input.qty {
    width: 58px; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; text-align: center;
    font: 400 18px/1 var(--pd-serif); color: var(--pd-ink); -moz-appearance: textfield; appearance: textfield;
}
.pp-pdp .quantity input.qty::-webkit-outer-spin-button, .pp-pdp .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-pdp .quantity input.qty:focus-visible { outline: 2px solid var(--pd-gold); outline-offset: -3px; }
.pp-qty__btn { width: 44px; padding: 0; border: 0; background: #fff; color: var(--pd-ink); cursor: pointer; font: 300 22px/1 var(--font-body); }
.pp-qty__btn:hover:not(:disabled) { background: var(--pd-cream); }
.pp-qty__btn:disabled { opacity: .35; cursor: not-allowed; }
.pp-qty__btn:focus-visible { outline: 2px solid var(--pd-gold); outline-offset: -3px; }
.pp-pdp .single_add_to_cart_button {
    flex: 1 1 200px; height: 50px; margin: 0; padding: 0 22px; border: 0; border-radius: 3px; cursor: pointer;
    background: var(--pd-gold); color: #fff; font: 600 15px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
    transition: background .2s, opacity .2s;
}
.pp-pdp .single_add_to_cart_button:hover:not(:disabled) { background: var(--color-accent-dark, #1E6085); }
.pp-pdp .single_add_to_cart_button:focus-visible { outline: 2px solid var(--pd-ink); outline-offset: 2px; }
.pp-pdp .single_add_to_cart_button.disabled, .pp-pdp .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; }
.pp-pdp .single_add_to_cart_button[aria-busy="true"] { opacity: .7; cursor: progress; }

/* wishlist */
.pp-pdp__wish { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; color: var(--pd-text); cursor: pointer; }
.pp-pdp__wish .pp-wishlist-btn { width: 32px; height: 32px; padding: 0; background: none; border: 0; box-shadow: none; color: var(--pd-gold); display: inline-flex; align-items: center; justify-content: center; }
.pp-pdp__wish .pp-wishlist-btn:hover { transform: none; }
.pp-pdp__wish .pp-wishlist-btn.is-active svg { fill: var(--pd-gold); }
.pp-wish__on { display: none; }
.pp-wishlist-btn.is-active ~ .pp-wish__off { display: none; }
.pp-wishlist-btn.is-active ~ .pp-wish__on { display: inline; }

/* return / delivery panels */
.pp-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.pp-panel { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--pd-cream); border-radius: 3px; }
.pp-panel .pp-ico { width: 34px; height: 34px; stroke-width: 1.3; }
.pp-panel__title { margin: 0; font-family: var(--pd-serif); font-size: 18px; line-height: 1.3; color: var(--pd-ink); }
.pp-panel a { display: inline-block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--pd-text); text-decoration: underline; text-underline-offset: 3px; }
.pp-panel a:hover { color: var(--pd-gold-dark); }
.pp-panels--single { grid-template-columns: minmax(0, 1fr); }
/* "14 Tage Rückgaberecht": a quiet text link under the add-to-cart button (replaces the former return card) */
.pp-pdp__return { margin: 12px 0 0; font-size: 14px; line-height: 1.4; }
.pp-pdp__return a { color: var(--pd-mute); text-decoration: underline; text-decoration-color: rgba(74, 74, 74, .45); text-underline-offset: 3px; }
.pp-pdp__return a:hover, .pp-pdp__return a:focus-visible { color: var(--pd-gold-dark); text-decoration-color: currentColor; }

/* payment methods (only what the store actually offers) */
.pp-pay { margin-top: 24px; }
.pp-pay__title { margin: 0 0 10px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--pd-ink); }
.pp-pay__list { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; margin: 0; padding: 0; }
.pp-pay__tile {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; min-width: 64px; padding: 0 14px;
    background: #fff; border: 1px solid var(--pd-line); border-radius: 5px; font-size: 14px; line-height: 1; color: var(--pd-ink);
}
.pp-pay__tile img { display: block; height: 26px; width: auto; max-width: 84px; object-fit: contain; }
.pp-pay__tile .pp-ico { width: 22px; height: 22px; }
/* the homepage's own marks (same markup as the announcement bar), a size up so they read inside a 40px tile; proportions kept */
.pp-pay__tile .payment-badge { height: 26px; padding-inline: 8px; border-radius: 4px; font-size: 12px; }
.pp-pay__tile .payment-badge--paypal, .pp-pay__tile .payment-badge--maestro, .pp-pay__tile .payment-badge--mastercard { width: 40px; }
.pp-pay__tile .payment-badge--visa { width: 46px; }
.pp-pay__tile .payment-badge--klarna { width: 56px; font-size: 12.5px; }
.pp-pay__tile .payment-badge--paypal svg { width: 22px; height: 22px; }
.pp-pay__tile .payment-badge--mastercard svg, .pp-pay__tile .payment-badge--maestro svg { width: 26px; height: 16px; }
.pp-pay__tile:has(.payment-badge) { min-width: 68px; padding: 0 10px; }
.pp-pay__note { margin: 10px 0 0; font-size: 13px; color: var(--pd-mute); }

/* help row */
.pp-help { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--pd-line); font-size: 15px; color: var(--pd-text); }
.pp-help a { color: var(--pd-text); text-decoration: underline; text-underline-offset: 3px; }
.pp-help a:hover { color: var(--pd-gold-dark); }

/* ── Details below ───────────────────────────────────────────── */
.pp-tabs { margin-top: clamp(40px, 5vw, 64px); }
.pp-tabs__nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid var(--pd-line); overflow-x: auto; scrollbar-width: none; }
.pp-tabs__nav::-webkit-scrollbar { display: none; }
.pp-tabs__tab {
    padding: 16px 18px 15px; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
    font: 400 16px/1.3 var(--font-body); color: var(--pd-text); white-space: nowrap; transition: color .2s, border-color .2s;
}
.pp-tabs__tab:hover { color: var(--pd-gold-dark); }
.pp-tabs__tab[aria-selected="true"] { color: var(--pd-gold-dark); border-bottom-color: var(--pd-gold); font-weight: 500; }
.pp-tabs__tab:focus-visible { outline: 2px solid var(--pd-gold); outline-offset: -3px; }
.pp-tabs__panel { padding: clamp(28px, 4vw, 44px) 0 0; }
.pp-tabs__panel[hidden] { display: none; }
.pp-tabs__panel:focus-visible { outline-offset: 6px; }
.pp-tabs__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 88px); align-items: start; }
.pp-tabs__cols--even { align-items: start; }
.pp-prose h2 { margin: 0 0 18px; font-family: var(--pd-serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; color: var(--pd-ink); }
.pp-prose p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: var(--pd-mute); }
.pp-prose p:last-child { margin-bottom: 0; }
.pp-link { color: var(--pd-text); text-decoration: underline !important; text-underline-offset: 3px; }
.pp-link:hover { color: var(--pd-gold-dark); }
.pp-care { margin: 0; padding: 0; list-style: none; max-width: 70ch; }
.pp-care li { position: relative; padding: 8px 0 8px 22px; font-size: 16px; line-height: 1.6; color: var(--pd-mute); }
.pp-care li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 10px; height: 1px; background: var(--pd-gold); }
.pp-spec { width: 100%; border-collapse: collapse; border: 1px solid var(--pd-line); font-size: 16px; }
.pp-spec th, .pp-spec td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--pd-line); vertical-align: top; }
.pp-spec tr:last-child th, .pp-spec tr:last-child td { border-bottom: 0; }
.pp-spec th { width: 42%; font-weight: 400; color: var(--pd-ink); border-right: 1px solid var(--pd-line); }
.pp-spec td { color: var(--pd-mute); }
.pp-pdp__plain { max-width: 70ch; }

.pp-pdp__delivery { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--pd-text); }
.pp-pdp__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2E7D4F; }
.pp-pdp__delivery--out .pp-pdp__dot { background: #B3261E; }

/* ── Supplied variants: selection block next to the form, comparison table in "Details & Maße" ── */
.pp-varspec { margin-top: 16px; padding: 16px 18px 14px; border: 1px solid var(--pd-line); border-radius: 3px; }
.pp-varspec[hidden] { display: none; }
.pp-varspec__title { margin: 0 0 10px; font: 500 14px/1.4 var(--font-body); letter-spacing: .02em; color: var(--pd-ink); }
.pp-varspec__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px 18px; margin: 0; }
.pp-varspec__list div { min-width: 0; }
.pp-varspec__list dt { font-size: 12.5px; line-height: 1.4; color: var(--pd-mute); }
.pp-varspec__list dd { margin: 2px 0 0; font-size: 16px; line-height: 1.35; color: var(--pd-ink); }
.pp-varspec__more { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--pd-text); }
.pp-varspec__more:hover { color: var(--pd-gold-dark); }

.pp-vtable { margin-bottom: clamp(32px, 4vw, 48px); }
.pp-vtable__title { margin: 0 0 18px; font-family: var(--pd-serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; color: var(--pd-ink); }
.pp-vtable__scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pp-vtable__scroll:focus-visible { outline: 2px solid var(--pd-gold); outline-offset: 2px; }
.pp-spec--compare { min-width: 560px; }
.pp-spec--compare thead th { background: var(--pd-cream); font-weight: 500; color: var(--pd-ink); border-bottom: 1px solid var(--pd-line); white-space: nowrap; }
.pp-spec--compare th, .pp-spec--compare td { width: auto; white-space: nowrap; }
.pp-spec--compare th[scope="row"] { border-right: 1px solid var(--pd-line); }
.pp-spec--compare td:last-child { color: var(--pd-ink); font-weight: 500; }
.pp-spec--compare tr.is-current th, .pp-spec--compare tr.is-current td { background: #F2F8FC; }
.pp-spec--compare tr.is-current th[scope="row"] { box-shadow: inset 3px 0 0 var(--pd-gold); }
.pp-vtable__note { margin: 10px 0 0; font-size: 13px; color: var(--pd-mute); }

/* ── Produktsicherheit: one collapsed row under the tabs, same type scale / hairlines as the tab bar ── */
.pp-safety { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--pd-line); border-bottom: 1px solid var(--pd-line); scroll-margin-top: calc(var(--header-h, 113px) + 16px); }
.pp-safety__summary {
    display: flex; align-items: center; gap: 12px; padding: 16px 2px 15px; cursor: pointer; list-style: none;
    font: 500 16px/1.3 var(--font-body); color: var(--pd-text); transition: color .2s;
}
.pp-safety__summary::-webkit-details-marker { display: none; }
.pp-safety__summary:hover, .pp-safety[open] .pp-safety__summary { color: var(--pd-gold-dark); }
.pp-safety__summary:focus-visible { outline: 2px solid var(--pd-gold); outline-offset: -3px; }
.pp-safety__title { flex: 1 1 auto; }
.pp-safety__chev { width: 20px; height: 20px; color: var(--pd-text); transition: transform .2s; }
.pp-safety[open] .pp-safety__chev { transform: rotate(180deg); }
.pp-safety__body { padding: 4px 2px 24px 38px; }
.pp-safety__h { margin: 0 0 10px; font: 500 15px/1.4 var(--font-body); color: var(--pd-ink); }
.pp-safety__addr { margin: 0; font-style: normal; font-size: 16px; line-height: 1.65; color: var(--pd-mute); }
.pp-safety__addr a { color: var(--pd-text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pp-safety__addr a:hover { color: var(--pd-gold-dark); }
.pp-safety__notes { margin: 0 0 20px; padding-left: 1.2em; font-size: 16px; line-height: 1.65; color: var(--pd-text); }
.pp-safety__notes li + li { margin-top: 4px; }
@media (max-width: 599px) { .pp-safety__body { padding-left: 2px; } }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 899px) {
    .pp-pdp__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
    .pp-tabs__cols { grid-template-columns: minmax(0, 1fr); }
    .pp-tabs__nav { grid-auto-columns: max-content; }
    .pp-tabs__tab { padding-inline: 20px; }
    .pp-pdp .flex-control-thumbs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .pp-pdp .flex-control-thumbs li { flex: 0 0 96px; scroll-snap-align: start; }
}
@media (max-width: 599px) {
    .pp-pdp { padding-top: calc(var(--header-h, 98px) + 12px); }
    .pp-panels { grid-template-columns: minmax(0, 1fr); }
    .pp-facts li { flex: 1 1 100%; border-left: 0 !important; padding-inline: 4px; }
    .pp-opt { grid-template-columns: repeat(var(--pp-cols-m, 3), minmax(0, 150px)); }
    .pp-pdp .single_add_to_cart_button { flex: 1 1 100%; margin-top: 12px; }
    .pp-summary__more { margin-left: 0; flex-basis: 100%; }
    .pp-pdp__pricebox { padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pp-pdp * { transition: none !important; } }

/* the site's (invisible) mobile-menu overlay swallows taps at ≤768px unless it is open – let touches through on this page too */
body.pp-product-page .mobile-nav-overlay:not(.open) { pointer-events: none; }

/* deep links (#pp-tab-…) land below the fixed header */
.pp-tabs, .pp-tabs__panel { scroll-margin-top: calc(var(--header-h, 113px) + 16px); }

/* ── Deckel auswählen ────────────────────────────────────────────
   Two cards built on native radios (keyboard + screen-reader behaviour is the browser's). Unselected: white, fine border.
   Selected: pale ivory, muted-gold border, gold radio dot. Scoped to .pp-lid. */
.pp-lid { flex: 0 0 100%; min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.pp-lid__title { display: block; float: none; width: 100%; margin: 0 0 12px; padding: 0; font-family: var(--pd-serif); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--pd-ink); }
.pp-lid__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pp-lid__opt { position: relative; display: block; min-width: 0; }
.pp-lid__opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pp-lid__card {
    position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; height: 100%; min-height: 84px; padding: 14px 34px 14px 16px;
    background: #fff; color: var(--pd-ink); border: 1px solid #D5E8F3; border-radius: 8px; transition: border-color .15s, background .15s;
}
.pp-lid__ico { flex: none; width: 50px; height: auto; color: var(--pd-gold); }
.pp-lid__txt { display: block; min-width: 0; }
.pp-lid__name { font: 400 18px/1.3 var(--pd-serif); color: var(--pd-ink); }
.pp-lid__extra { margin-left: 4px; font-size: 13px; font-weight: 500; color: var(--pd-gold-dark); white-space: nowrap; }
.pp-lid__extra[hidden] { display: none; }
.pp-lid__sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--pd-text); }
.pp-lid__radio { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #A9A296; border-radius: 50%; background: #fff; transition: border-color .15s; }
.pp-lid__opt:hover input:not(:disabled):not(:checked) + .pp-lid__card { border-color: var(--pd-ink); }
.pp-lid__opt input:checked + .pp-lid__card { background: #F2F8FC; border-color: var(--pd-gold); }
.pp-lid__opt input:checked + .pp-lid__card .pp-lid__radio { border-color: var(--pd-gold); background: radial-gradient(circle, var(--pd-gold) 0 4.5px, #fff 5px); }
.pp-lid__opt input:focus-visible + .pp-lid__card { outline: 2px solid var(--pd-gold); outline-offset: 3px; }
.pp-lid__opt input:disabled { cursor: not-allowed; }
.pp-lid__opt input:disabled + .pp-lid__card { opacity: .5; }
.pp-lid__note { margin: 12px 0 0; padding-left: 12px; border-left: 2px solid var(--pd-gold); font-size: 14px; line-height: 1.5; color: var(--pd-text); }
.pp-lid__note[hidden] { display: none; }

/* "Deckel enthalten": information, not a choice – same ivory / gold-border look as a selected card, without a radio */
.pp-lid__inc { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 84px; padding: 14px 16px; background: #F2F8FC; border: 1px solid var(--pd-gold); border-radius: 8px; }
.pp-lid--included { margin-top: 24px; }

/* radio buttons need no "Zurücksetzen" link (it is not part of the design) */
.pp-pdp .variations td.value:has(.pp-opt) .reset_variations { display: none !important; }

/* the one combined summary strip: slim, ivory, small outline icon (pan without lid, lid with lid) */
.pp-lid__summary { flex-wrap: nowrap; gap: 12px; margin-top: 14px; padding: 9px 16px; background: #F2F8FC; font-size: 15px; }
.pp-lid__sumico { display: none; flex: none; line-height: 0; }
.pp-lid__summary[data-lid="0"] .pp-lid__sumico--pan, .pp-lid__summary[data-lid="1"] .pp-lid__sumico--lid { display: block; }
.pp-lid__summary .pp-lid__ico { width: 30px; height: auto; }
.pp-lid__summary .pp-summary__text { min-width: 0; }
.pp-lid__summary .pp-summary__text strong { font-weight: 600; }
.pp-pdp form.cart .pp-lid ~ .pp-step-title { margin-top: 20px; }   /* "Menge" keeps its distance below the summary */
@media (max-width: 599px) {
    .pp-lid__opts { gap: 10px; }
    .pp-lid__card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; min-height: 0; }   /* icon above the text: both cards stay side by side and readable */
    .pp-lid__ico { width: 44px; height: auto; }
    .pp-lid__name { font-size: 17px; }
    .pp-lid__radio { top: 10px; right: 10px; }
}
@media (max-width: 359px) {           /* very narrow: cards stack, sizes go 2 × 2 */
    .pp-lid__opts { grid-template-columns: minmax(0, 1fr); }
    .pp-opt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ── Typography weights (product pages only) ─────────────────────
   The page read too thin: headings, title, price and option labels use Playfair Display 500 (real cut, loaded in functions.php),
   supporting text Barlow 500 instead of 400/300, muted text one step darker. Sizes, colours of links/gold, layout unchanged;
   disabled controls keep their own dimmed look (opacity / their own colours). */
.pp-pdp { --pd-mute: #4A4A4A; }
.pp-pdp .pp-pdp__title,
.pp-pdp .pp-pdp__price,
.pp-pdp .variations th.label label, .pp-pdp .pp-step-title,
.pp-pdp .variations tr:has(.pp-opt[data-kind="diameter"]) th.label::before, .pp-pdp .variations tr:has(.pp-opt[data-kind="size"]) th.label::before,
.pp-pdp .pp-lid__title, .pp-pdp .pp-lid__name,
.pp-pdp .pp-opt__btn,
.pp-pdp .pp-panel__title,
.pp-pdp .pp-prose h2, .pp-pdp .pp-vtable__title,
.pp-pdp .pp-qty input.qty, .pp-pdp .quantity input.qty { font-weight: 500; }
.pp-pdp .pp-pdp__crumbs ol,
.pp-pdp .pp-pdp__intro, .pp-pdp .pp-pdp__notice, .pp-pdp .pp-pdp__delivery,
.pp-pdp .variations tr:has(.pp-opt[data-kind="diameter"]) th.label label, .pp-pdp .variations tr:has(.pp-opt[data-kind="size"]) th.label label, .pp-pdp .pp-opt__sublabel,
.pp-pdp .pp-summary, .pp-pdp .pp-summary__more,
.pp-pdp .pp-lid__sub, .pp-pdp .pp-lid__note,
.pp-pdp .pp-facts li, .pp-pdp .pp-pdp__wish, .pp-pdp .pp-panel a, .pp-pdp .pp-pdp__return, .pp-pdp .pp-pay__note, .pp-pdp .pp-help,
.pp-pdp .pp-tabs__tab, .pp-pdp .pp-prose p, .pp-pdp .pp-care li, .pp-pdp .pp-spec th, .pp-pdp .pp-spec td,
.pp-pdp .pp-varspec__list dt, .pp-pdp .pp-varspec__list dd, .pp-pdp .pp-varspec__more, .pp-pdp .pp-vtable__note,
.pp-pdp .pp-safety__addr, .pp-pdp .reset_variations,
.pp-pdp .woocommerce-variation-availability p, .pp-pdp .woocommerce-variation-description p { font-weight: 500; }
.pp-pdp .pp-tabs__tab[aria-selected="true"], .pp-pdp .pp-spec--compare thead th, .pp-pdp .pp-spec--compare td:last-child,
.pp-pdp .pp-summary__text strong { font-weight: 600; }
.pp-pdp .pp-qty__btn { font-weight: 400; }
.pp-pdp .single_add_to_cart_button { font-weight: 600; }