/* ===== ponodo Engine: listings, filters and product pages ===== */

/* --- Product names exactly as in the feed --- */
body { font-feature-settings: "calt" 0; } /* system fonts (San Francisco, Inter) turn "59 x 89" into "59 × 89" by context, only on one line: one heading showed "59 × 89 x 59" (#174) */

/* --- Page layout: filters left, results right --- */
.pn-page { width: 100%; box-sizing: border-box; padding-left: 50px; padding-right: 50px; } /* same side space as the normal WordPress pages (theme: 50px, phone 30px) */
@media (max-width: 768px) {
    .pn-page { padding-left: 30px; padding-right: 30px; }
}
.pn-head { padding-top: 32px; }
.pn-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; padding: 8px 0 32px; }
.pn-title { margin: 0 0 16px; }
.pn-breadcrumb { font-size: 14px; color: #6b7280; margin-bottom: 12px; }
.pn-breadcrumb a { color: inherit; }

/* Own category text: first paragraph under the title, the rest below the list */
.pn-intro { max-width: 820px; margin: -4px 0 16px; color: #374151; }
.pn-intro-more { margin-top: 32px; }

/* --- Filter column --- */
.pn-filters { font-size: 15px; }
.pn-filter-title { font-size: 18px; margin: 0 0 12px; }
.pn-filter-block { border: 0; padding: 0; margin: 0 0 24px; }
.pn-filter-block legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.pn-cats ul { list-style: none; margin: 0; padding: 0; }
.pn-cats li { margin: 0 0 6px; padding-left: calc(var(--pn-depth, 0) * 12px); }
.pn-cats a[aria-current="page"] { font-weight: 600; }
.pn-count { color: #6b7280; font-size: 13px; }
.pn-check { display: block; margin: 0 0 6px; cursor: pointer; }
.pn-check input { margin-right: 6px; }
.pn-price-range { display: flex; align-items: center; gap: 6px; }
.pn-price-go { padding: 6px 12px; } /* small "OK" next to the price fields (boxes filter at once) */
.pn-price-range label { display: inline-flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 4px; } /* both fields share the width, "OK" fits next to them */
.pn-price-range input { width: 100%; min-width: 0; padding: 6px 8px; }
/* no up/down arrows in the price fields: they take the room of the digits */
.pn-price-range input { -moz-appearance: textfield; appearance: textfield; }
.pn-price-range input::-webkit-inner-spin-button, .pn-price-range input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pn-reset { display: block; margin-top: 12px; font-size: 14px; }

/* Filters fold away on phones (summary hidden on desktop, so they always stay open there) */
.pn-filter-summary { display: none; }

/* --- Toolbar above the list --- */
.pn-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.pn-count-line { margin: 0; font-size: 14px; color: #374151; }
.pn-sort select { padding: 8px 10px; }

/* --- List view: thumbnail | title + merchant | price | button --- */
.pn-list { list-style: none; margin: 0; padding: 0; }
.pn-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; align-items: center; column-gap: 20px; padding: 12px 0; border-bottom: 1px solid #e5e7eb; }
.pn-item-image { display: block; width: 96px; height: 96px; overflow: hidden; background: #fff; }
.pn-item-image img, .pn-item-image .pn-noimg { display: block; width: 96px; height: 96px; object-fit: contain; font-size: 11px; color: #6b7280; }
.pn-item-title { display: block; font-size: 16px; line-height: 1.35; }
/* Merchant and available sizes under the product name */
.pn-item-merchant, .pn-item-sizes { display: block; font-size: 13px; color: #6b7280; margin-top: 4px; }
.pn-item-price { white-space: nowrap; text-align: right; }
.pn-item-price del, .pn-product-price del { color: #6b7280; font-weight: 400; margin-right: 4px; }
.pn-noimg { display: block; background: #f3f4f6; }
/* Unit price (Grundpreis) and legal note "inkl. MwSt., zzgl. 4,95 € Versand" (unknown: "ggf. zzgl. Versandkosten") from the feed, shown with every price */
.pn-base-price, .pn-price-note { display: block; font-size: 12px; font-weight: 400; color: #6b7280; }
/* The note may wrap, the price itself stays on one line */
.pn-price-note { white-space: normal; }
/* Cards: price, unit price and note as one block, space before the button */
.pn-card .pn-card-price { margin-bottom: 2px; }
.pn-card .pn-price-note { margin-bottom: 12px; }
.pn-product-price .pn-base-price { display: inline; font-size: 14px; margin-left: 8px; }

/* --- Buttons in the shop red --- */
.pn-button { display: inline-block; background: #c8160f; color: #fff !important; padding: 10px 18px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; }
.pn-button:hover { background: #a31209; }
.pn-button-secondary { background: #374151; }
.pn-button-secondary:hover { background: #1f2937; }

/* --- Pagination --- */
.pn-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 8px; }
.pn-pagination a, .pn-pagination span { padding: 6px 12px; border: 1px solid #e5e7eb; text-decoration: none; }
.pn-pagination .pn-current { background: #c8160f; border-color: #c8160f; color: #fff; }
.pn-pagination .pn-gap { border: 0; }
/* Page navigation of the result list: large and centred right after the last result, so it cannot be missed */
.pn-pager { margin: 28px 0 8px; padding: 24px 0 8px; border-top: 1px solid #e5e7eb; text-align: center; }
.pn-pager-info { margin: 0 0 12px; font-size: 15px; color: #374151; }
.pn-pager .pn-pager-next { display: inline-block; font-size: 17px; padding: 12px 36px; }
.pn-pager .pn-pagination { justify-content: center; margin: 16px 0 0; }
.pn-list + .pn-pager { border-top: 0; padding-top: 8px; } /* the last result row already has a line */
.pn-hint, .pn-empty { color: #374151; }

/* --- Product page --- */
.pn-product { padding: 32px 0; }
.pn-product-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pn-product-image { overflow: hidden; }
.pn-product-image img { width: 100%; font-size: 13px; color: #6b7280; height: auto; max-height: 520px; object-fit: contain; background: #fff; }
.pn-product-image .pn-noimg { aspect-ratio: 1 / 1; }
.pn-product-price { font-size: 28px; margin: 0 0 4px; }
.pn-product-meta { font-size: 14px; color: #6b7280; margin: 0 0 20px; }
.pn-button-offer { font-size: 17px; padding: 12px 24px; }
.pn-affiliate-note { font-size: 0.8em; color: #6b7280; margin: 8px 0 24px; }
.pn-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; margin: 0; }
.pn-facts dt { font-weight: 600; }
.pn-facts dd { margin: 0; }
.pn-gone { background: #f3f4f6; padding: 12px 16px; }
.pn-source-note { font-size: 13px; color: #6b7280; }

/* Below the top area: description and "Technische Daten" left (readable line length), box "Auf einen Blick" right */
.pn-below { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; margin-top: 40px; }
.pn-below-solo { grid-template-columns: minmax(0, 420px); } /* no description: only the box */
.pn-description { max-width: 70ch; }
.pn-description p { margin: 0 0 1em; }
/* Technical details as a table with a light grid */
.pn-specs { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 15px; }
.pn-specs th, .pn-specs td { text-align: left; vertical-align: top; padding: 7px 10px; border: 1px solid #e5e7eb; }
.pn-specs th { width: 40%; font-weight: 600; color: #374151; }
/* Box "Auf einen Blick": stays in view while scrolling (desktop) */
.pn-glance { position: sticky; top: 24px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px 22px; background: #fafafa; }
.pn-glance h2 { font-size: 20px; margin: 0 0 12px; }
.pn-glance dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(50%, 1fr); gap: 6px 14px; margin: 0; font-size: 14px; } /* long names wrap, values keep at least half the width */
.pn-glance dt { font-weight: 600; color: #374151; overflow-wrap: break-word; }
.pn-glance dd { margin: 0; overflow-wrap: break-word; }
.pn-glance-specs { padding-bottom: 14px; margin-bottom: 14px !important; border-bottom: 1px solid #e5e7eb; }
.pn-glance-buy { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.pn-glance-buy .pn-product-price { font-size: 22px; }
.pn-glance-buy .pn-product-meta { font-size: 13px; margin-bottom: 14px; }
.pn-glance-buy .pn-button-offer { display: block; text-align: center; }
.pn-glance-buy .pn-affiliate-note { margin-bottom: 0; }

/* --- Similar products: centered cards like the home page --- */
.pn-similar { margin-top: 40px; }
.pn-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pn-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pn-card-image { display: block; width: 100%; overflow: hidden; }
.pn-card-image img, .pn-card-image .pn-noimg { font-size: 11px; color: #6b7280; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain; background: #fff; }
.pn-card-title { flex-grow: 1; margin: 12px 0 8px; line-height: 1.35; }
.pn-card-price { font-weight: 700; margin-bottom: 12px; }

/* Shortcode rows on normal pages: as many columns as products (max 6) */
.pn-cards-shortcode { grid-template-columns: repeat(var(--pn-cols, 5), minmax(0, 1fr)); }

/* --- Tablet and phone --- */
@media (max-width: 900px) {
    .pn-head { padding-top: 16px; }
    .pn-layout { grid-template-columns: 1fr; gap: 16px; }
    .pn-filter-summary { display: block; cursor: pointer; font-weight: 600; padding: 10px 14px; border: 1px solid #e5e7eb; }
    .pn-filter-details[open] .pn-filter-summary { margin-bottom: 16px; }
    .pn-product-top { grid-template-columns: 1fr; gap: 24px; }
    .pn-below { grid-template-columns: 1fr; gap: 24px; }
    .pn-glance { position: static; }
    .pn-description + .pn-glance .pn-glance-specs { display: none; } /* phone: the details are already in the table above */
    .pn-cards, .pn-cards-shortcode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .pn-item { grid-template-columns: 72px minmax(0, 1fr); row-gap: 6px; }
    .pn-item-image { grid-row: 1 / 3; }
    .pn-item-image, .pn-item-image img, .pn-item-image .pn-noimg { width: 72px; height: 72px; }
    .pn-item-price { text-align: left; }
    .pn-item .pn-button { grid-column: 1 / 3; text-align: center; }
}

/* Size selector on the product page: one small box per size, the current one framed in the shop red */
.pn-variants { margin: 0 0 16px; }
.pn-variants-title { margin: 0 0 6px; font-weight: 600; }
.pn-variant-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pn-variant { display: block; min-width: 44px; padding: 8px 10px; border: 1px solid #d1d5db; text-align: center; text-decoration: none; color: inherit; }
.pn-variant:hover, .pn-variant.is-current { border-color: #c8160f; }
.pn-variant.is-current { box-shadow: inset 0 0 0 1px #c8160f; font-weight: 600; }
/* Sizes that are out of stock: still selectable, but visibly weaker */
.pn-variant.is-out { color: #9ca3af; text-decoration: line-through; }

/* Link "So sortieren wir" next to the sort selection (ranking transparency, § 5b UWG) */
.pn-sort { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.pn-sort-info { font-size: 13px; white-space: nowrap; }

/* Merchant logos (bin/awin-logos.php): small, never larger than the text around them would suggest */
.pn-logo { display: inline-block; vertical-align: middle; width: auto; height: auto; max-height: 22px; max-width: 110px; }
.pn-item-merchant .pn-logo { display: block; margin-top: 2px; }
.pn-product-merchant { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #4b5563; }
.pn-product-merchant .pn-logo { max-height: 30px; max-width: 140px; }
.pn-facts .pn-logo { max-height: 24px; }

/* --- eBay offers: own block below ponodo's results, kept apart from them (eBay's licence requires that) --- */
/* Framed and lightly tinted, so eBay's offers are clearly apart from ponodo's list above (eBay's licence requires that) */
.pn-ebay { margin: 28px 0 8px; padding: 18px 22px 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; }
.pn-ebay-title { font-size: 22px; margin: 0 0 6px; }
.pn-ebay-logo { vertical-align: -4px; }
/* Small grey notes: what is shown, how old the data is, eBay's terms */
.pn-ebay-note { font-size: 13px; color: #6b7280; margin: 0 0 20px; }
.pn-ebay-list + .pn-ebay-note, .pn-ebay-more + .pn-ebay-note { margin: 16px 0 0; }
/* Rows inside the frame: the last one without a line */
.pn-ebay-list .pn-item:last-child { border-bottom: 0; }
/* Test environment: clearly marked, only administrators see it */
.pn-ebay-test { background: #fff7ed; border-left: 4px solid #f59e0b; padding: 8px 12px; font-size: 14px; margin: 0 0 16px; }
.pn-ebay-page > .pn-ebay-note { margin-top: 32px; }
/* Link to the page with more eBay offers, under the cards */
.pn-ebay-more { margin: 16px 0 0; }
/* Page "Mehr Angebote bei eBay": the block is the page, so no line and gap above it */
.pn-ebay-only { margin-top: 8px; }
/* Offers without a picture: light grey square instead of an empty gap */
.pn-ebay-list .pn-item-image .pn-noimg { background: #f3f4f6; }

/* --- Shop directory (/shops/) --- */
/* Filter by main category and A-Z letters: one wrapping row of links; letters without shops greyed out */
.pn-shop-cats, .pn-shop-letters { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; }
.pn-shop-letters { gap: 4px; margin-bottom: 24px; }
.pn-shop-letters a, .pn-shop-letters span { display: inline-block; min-width: 32px; padding: 6px 4px; text-align: center; border: 1px solid #e5e7eb; }
.pn-shop-letters span { color: #9ca3af; }
/* Shops of one letter: two columns on wide screens, one on the phone */
.pn-shop-group h2 { margin: 24px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #e5e7eb; }
.pn-shop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.pn-shop-list a { font-weight: 600; }
.pn-shop-focus, .pn-shop-meta { display: block; font-size: 14px; }
.pn-shop-meta { color: #6b7280; }
/* Shop page: the box with the link comes first on the phone */
.pn-shop-below { margin-top: 8px; }
.pn-shop-products { margin: 16px 0 0; }
/* Product part of a partner's shop page (#139): own block below the facts, room above the cards and their button */
.pn-shop-catalog { margin: 40px 0 32px; }
.pn-shop-catalog .pn-cards { margin-top: 16px; }
.pn-shop-all { margin-top: 24px; }
@media (max-width: 900px) {
    .pn-shop-list { grid-template-columns: 1fr; }
    .pn-shop-below .pn-glance { order: -1; }
}
/* Product page: "Mehr über den Shop" as a small link next to the merchant logo */
.pn-shop-more { font-size: 14px; }
/* Shop directory: search by name in one row (wraps on the phone) */
.pn-shop-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.pn-shop-search input[type="search"] { flex: 1 1 240px; max-width: 420px; }
.pn-shop-letters strong { display: inline-block; min-width: 32px; padding: 6px 4px; text-align: center; border: 1px solid currentColor; }
/* "Ratgeber zu diesem Thema" (category pages) and "Mehr aus dem Ratgeber" (articles): a light box like "Auf einen Blick" */
.pn-ratgeber-box { margin: 32px 0 0; padding: 16px 20px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; }
.pn-ratgeber-box h2 { margin: 0 0 8px; font-size: 20px; }
.pn-ratgeber-box ul { margin: 0; padding-left: 20px; }
.pn-ratgeber-products { margin-top: 32px; font-weight: 600; }
/* "Passend dazu" on the search page (#147): the same light box, but above the results - so the space is below it.
   Compact (small heading, less padding), so the first products stay on the first screen of a phone. */
.pn-ratgeber-box.pn-related { margin: 0 0 20px; padding: 10px 16px; font-size: 15px; }
.pn-ratgeber-box.pn-related h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }

/* --- Photo gallery on the product page (#148, markup: includes/class-gallery.php) --- */
/* One row of photos that scrolls sideways and snaps photo by photo; no scrollbar (previews, dots and swiping move it) */
.pn-gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pn-gallery-track::-webkit-scrollbar { display: none; }
/* Every photo fills the row and gets the same square frame, whatever its own format is; a click enlarges it */
.pn-gallery-slide { flex: 0 0 100%; scroll-snap-align: start; cursor: zoom-in; }
.pn-gallery .pn-gallery-slide img { display: block; aspect-ratio: 1 / 1; }
/* Previews under the photo: small squares, the visible photo framed in the shop red */
.pn-gallery-thumbs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pn-gallery-thumbs a { display: block; width: 66px; height: 66px; border: 1px solid #e5e7eb; }
.pn-gallery-thumbs a:hover, .pn-gallery-thumbs a.is-current { border-color: #c8160f; }
.pn-gallery .pn-gallery-thumbs img { display: block; width: 64px; height: 64px; }

/* Enlarged view (assets/ponodo-gallery.js): the photo on a white full-screen sheet, product photos have a white background */
.pn-lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; overflow: hidden; }
.pn-lightbox::backdrop { background: #fff; }
/* The page behind does not scroll while the enlarged view is open */
.pn-lightbox-open { overflow: hidden; }
/* Same sideways row as on the page, one photo per screen; a click beside the photo closes the view */
.pn-lightbox-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.pn-lightbox-track::-webkit-scrollbar { display: none; }
.pn-lightbox-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 60px 16px; cursor: zoom-out; }
.pn-lightbox-slide img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; }
/* Round buttons: close top right, previous/next at the sides; "Bild 2 von 4" at the bottom */
.pn-lightbox button { position: absolute; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #f3f4f6; color: #1f2937; font-size: 28px; line-height: 1; cursor: pointer; }
.pn-lightbox button:hover, .pn-lightbox button:focus { background: #e5e7eb; color: #1f2937; }
.pn-lightbox button:disabled { visibility: hidden; }
.pn-lightbox-close { top: 8px; right: 8px; }
.pn-lightbox-nav { top: 50%; margin-top: -22px; }
.pn-lightbox-prev { left: 8px; }
.pn-lightbox-next { right: 8px; }
.pn-lightbox-count { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 14px; color: #6b7280; pointer-events: none; }
@media (max-width: 900px) {
    /* Phone and tablet: dots instead of previews (photos are swiped); the preview pictures are not loaded there */
    .pn-gallery-thumbs { justify-content: center; gap: 0; margin-top: 4px; }
    .pn-gallery-thumbs a, .pn-gallery-thumbs a:hover, .pn-gallery-thumbs a.is-current { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; }
    .pn-gallery-thumbs a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; }
    .pn-gallery-thumbs a.is-current::before { background: #c8160f; }
    .pn-gallery .pn-gallery-thumbs img { display: none; }
    /* Enlarged view on the phone: swipe instead of the side buttons, less empty space around the photo */
    .pn-lightbox-nav { display: none; }
    .pn-lightbox-slide { padding: 56px 0 44px; }
}

/* --- EU energy label on the product page (#121, markup: templates/product.php) --- */
/* The class as an arrow pointing left, like on the EU label; the text beside it names class and scale */
.pn-energy { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 14px; }
.pn-energy-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 28px; padding: 0 8px 0 18px;
    color: #fff; font-size: 17px; font-weight: 700; line-height: 1; text-shadow: 0 0 2px #000, 0 0 1px #000;
    clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%); }
/* Colours of the EU label from the best class (step 0, dark green) to the worst (step 6, red) of the scale */
.pn-energy-0 { background: #00a651; }
.pn-energy-1 { background: #50b848; }
.pn-energy-2 { background: #bfd730; }
.pn-energy-3 { background: #fff200; }
.pn-energy-4 { background: #fdb913; }
.pn-energy-5 { background: #f37021; }
.pn-energy-6 { background: #ed1c24; }

/* --- Merchant area (#102, markup: templates/merchant.php) --- */
/* Forms: the label stands above its field, fields are as wide as a comfortable line, hints small below */
.pn-form { max-width: 560px; margin: 0 0 24px; }
.pn-form-row { margin: 0 0 14px; }
.pn-form-row label, .pn-form-label { display: block; margin-bottom: 4px; font-weight: 600; }
.pn-form-row input[type="text"], .pn-form-row input[type="url"], .pn-form-row input[type="email"], .pn-form-row textarea, .pn-form-row select { width: 100%; }
.pn-form-check label { font-weight: 400; }
.pn-form-hint { display: block; margin-top: 4px; font-size: 13px; color: #6b7280; }
/* Messages of a form: errors in dark red (contrast 6.5:1 on white), confirmations in a light green box */
.pn-form-error { margin: -6px 0 14px; color: #b91c1c; font-weight: 600; }
.pn-form-ok { padding: 12px 16px; border: 1px solid #a7f3d0; border-radius: 6px; background: #ecfdf5; }
/* Trap field for bots: outside the visible page (people never see or reach it) */
.pn-form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Tables with many columns scroll sideways on a phone instead of widening the page */
.pn-table-wide { display: block; overflow-x: auto; }
/* "Klicks pro Tag" can be opened: a little room before the next heading */
.pn-merchant-area details { margin: 0 0 16px; }