/* ═══════════════════════════════════════════════════════════════
   Product-category archives (Pfannen, Töpfe, Bräter, …)
   Loaded ONLY on is_product_category() and scoped to .pp-catpage,
   so the "Alle Produkte" shop page, the homepage and product pages
   keep their existing styles.
   ═══════════════════════════════════════════════════════════════ */

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

    background: #fff;
    color: var(--cp-ink);
    padding-top: calc(var(--header-h, 113px) + 16px);
}
.pp-catpage a { text-decoration: none; }
.pp-catpage :focus-visible { outline: 2px solid var(--cp-gold); outline-offset: 2px; }
.pp-catpage .pp-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Header ─────────────────────────────────────────────────── */
.pp-crumbs ol { display: flex; flex-wrap: wrap; gap: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--cp-mute); }
.pp-crumbs li + li::before { content: '/'; margin: 0 9px; color: #b9b2a6; }
.pp-crumbs a { color: var(--cp-mute); }
.pp-crumbs a:hover { color: var(--cp-gold-dark); }
.pp-crumbs [aria-current] { color: var(--cp-gold-dark); }

.pp-catpage__title {
    margin: 24px 0 0;
    font-family: var(--cp-serif); font-weight: 400;
    font-size: clamp(32px, 3.55vw, 40px); line-height: 1.1; letter-spacing: 0;
    color: var(--cp-ink);
}
.pp-catpage__lead { margin: 4px 0 0; max-width: 90ch; font-size: 16px; line-height: 1.6; color: #4A4A4A; }

/* ── Category navigation ────────────────────────────────────── */
.pp-catnav { margin-top: 16px; border-bottom: 1px solid var(--cp-line); }
.pp-catnav ul {
    display: flex; gap: 4px; list-style: none;
    margin-inline: -14px; padding-inline: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.pp-catnav li { flex: 0 0 auto; }
.pp-catnav a {
    display: block; padding: 12px 24px 11px; margin-bottom: -1px;
    font-size: 14px; line-height: 1.4; white-space: nowrap;
    color: var(--cp-text); border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.pp-catnav a:hover { color: var(--cp-gold-dark); }
.pp-catnav a.is-active { color: var(--cp-gold-dark); border-bottom-color: var(--cp-gold); font-weight: 500; }

.pp-subnav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 14px; }
.pp-subnav a {
    display: block; padding: 6px 14px; font-size: 13px; line-height: 1.4; color: #3c3c3c;
    border: 1px solid var(--cp-line); border-radius: 999px; transition: border-color .2s, color .2s;
}
.pp-subnav a:hover { border-color: var(--cp-gold); color: var(--cp-gold-dark); }
.pp-subnav a.is-active { border-color: var(--cp-gold); color: var(--cp-gold-dark); font-weight: 500; }

/* ── Layout ─────────────────────────────────────────────────── */
.pp-catpage__layout { display: block; margin-top: 26px; }
.pp-catpage__layout.has-filters { display: grid; grid-template-columns: minmax(160px, 18%) minmax(0, 1fr); column-gap: 3%; align-items: start; }
.pp-catpage__main { min-width: 0; }

/* ── Filter sidebar ─────────────────────────────────────────── */
.pp-catf[hidden] { display: none; }
.pp-catf__top { display: flex; align-items: center; justify-content: space-between; height: 34px; margin-bottom: 3px; }
.pp-catf__title { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-ink); }
.pp-catf__close { display: none; }

.pp-catf__group { border-top: 1px solid var(--cp-line); }
.pp-catf__group summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0 8px; cursor: pointer; list-style: none;
    font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cp-ink);
}
.pp-catf__group summary::-webkit-details-marker { display: none; }
.pp-catf__chev { transition: transform .2s ease; flex: none; }
.pp-catf__group:not([open]) .pp-catf__chev { transform: rotate(180deg); }
.pp-catf__body { padding: 0 0 20px; }

.pp-check { display: flex; align-items: center; gap: 11px; padding: 5px 0; font-size: 14px; line-height: 1.4; color: var(--cp-text); cursor: pointer; }
.pp-check input {
    appearance: none; -webkit-appearance: none; flex: none;
    width: 17px; height: 17px; margin: 0; border: 1.5px solid #b8b7b9; border-radius: 2px; background: #fff;
    display: grid; place-content: center; cursor: pointer; transition: background .15s, border-color .15s;
}
.pp-check input:checked {
    background: var(--cp-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 / 13px no-repeat;
    border-color: var(--cp-gold);
}
.pp-check input:hover { border-color: var(--cp-gold); }
.pp-check:has(input:checked) { color: var(--cp-ink); }

/* price range (two overlapping sliders) */
.pp-range { position: relative; height: 22px; margin: 4px 6px 0; }
.pp-range__track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--cp-line); border-radius: 2px; }
.pp-range__fill { position: absolute; top: 0; bottom: 0; left: var(--lo, 0%); right: calc(100% - var(--hi, 100%)); background: var(--cp-gold); }
.pp-range input[type=range] {
    position: absolute; inset: 0; width: 100%; height: 22px; margin: 0;
    appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none;
}
.pp-range input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 22px; }
.pp-range input[type=range]::-moz-range-track { background: transparent; height: 22px; }
.pp-range input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; width: 12px; height: 12px; margin-top: 5px;
    border-radius: 50%; background: var(--cp-gold); border: 0; cursor: grab;
}
.pp-range input[type=range]::-moz-range-thumb {
    pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: var(--cp-gold); border: 0; cursor: grab;
}
.pp-range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(38,118,163,.35); }
.pp-range input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(38,118,163,.35); }
.pp-range input[type=range]:focus-visible { outline: none; }
/* numeric min / max (styled like the plain "0 €  …  500 €" values of the design) */
.pp-price__fields { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.pp-price__field { display: inline-flex; align-items: baseline; gap: 3px; margin: 0; font-size: 14px; color: var(--cp-text); }
.pp-price__field input {
    width: 3.2em; min-width: 2ch; padding: 3px 0; border: 0; border-bottom: 1px solid transparent; field-sizing: content; border-radius: 0; background: transparent;
    font: 400 14px/1.3 var(--font-body); color: var(--cp-text); -moz-appearance: textfield; appearance: textfield;
}
.pp-price__field:last-child input { text-align: right; }
@supports (field-sizing: content) { .pp-price__field input { width: auto; } }   /* the € hugs the number */
.pp-price__field input::-webkit-outer-spin-button, .pp-price__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-price__field input:hover { border-bottom-color: var(--cp-line); }
.pp-price__field input:focus { border-bottom-color: var(--cp-gold); outline: none; }
.pp-price__field input:focus-visible { outline: 2px solid var(--cp-gold); outline-offset: 2px; }
.pp-price__fixed { margin: 0; padding: 5px 0; font-size: 14px; line-height: 1.4; color: var(--cp-text); font-variant-numeric: tabular-nums; }
.pp-price .pp-range + .pp-price__fields { margin-top: 3px; }

.pp-catf__actions:not(:has(.pp-catf__reset)) { display: none; }
.pp-catf__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 16px; border-top: 1px solid var(--cp-line); }
.pp-catf__apply, .pp-catempty__btn {
    display: inline-block; padding: 11px 18px; border: 0; border-radius: 4px; cursor: pointer;
    background: var(--cp-gold); color: #fff; font: 700 12px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
}
.pp-catf__apply:hover, .pp-catempty__btn:hover { background: var(--color-accent-dark, #1E6085); }
.pp-catf__reset { font-size: 13px; color: var(--cp-gold-dark); text-decoration: underline !important; text-underline-offset: 3px; }
.pp-catf__reset:hover { color: var(--cp-ink); }
/* desktop: the panel applies on change (JS); the button is for the mobile drawer and no-JS (see <noscript> in the template) */
.pp-catf__apply { display: none; }

/* ── Toolbar ────────────────────────────────────────────────── */
.pp-cattools { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; min-height: 34px; margin-bottom: 15px; }
.pp-cattools__left { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; min-width: 0; }
.pp-cattools__title { font-family: var(--cp-serif); font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--cp-ink); }
.pp-cattools__count { font-size: 12px; color: var(--cp-mute); white-space: nowrap; }
.pp-cattools__right { display: flex; align-items: center; gap: 10px 16px; }
.pp-cattools__filterbtn {
    display: none; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer;
    border: 1px solid var(--cp-line); border-radius: 4px; background: #fff; color: var(--cp-ink); font: 500 14px/1.2 var(--font-body);
}
.pp-cattools__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--cp-gold-dark); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; }

.pp-sort { position: relative; display: inline-flex; align-items: center; margin: 0; }
.pp-sort__label { position: absolute; left: 12px; pointer-events: none; font-size: 13px; color: var(--cp-mute); }
.pp-sort select {
    appearance: none; -webkit-appearance: none;
    min-width: 200px; height: 34px; padding: 0 32px 0 80px; border: 1px solid var(--cp-line); border-radius: 4px; background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 10px center / 13px no-repeat;
    color: var(--cp-ink); font: 400 13px/1.3 var(--font-body); cursor: pointer; text-overflow: ellipsis;
}
.pp-sort select:hover { border-color: #8CC8E8; }

/* ── Active filters ─────────────────────────────────────────── */
.pp-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: -4px 0 20px; }
.pp-chips ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pp-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; min-height: 32px;
    border: 1px solid var(--cp-gold); border-radius: 999px; background: #fff; color: var(--cp-gold-dark); font-size: 13px; line-height: 1.3;
    transition: background .2s, color .2s;
}
.pp-chip:hover { background: var(--cp-gold); color: #fff; }
.pp-chips__reset { font-size: 13px; color: var(--cp-gold-dark); text-decoration: underline !important; text-underline-offset: 3px; }
.pp-chips__reset:hover { color: var(--cp-ink); }

/* ── Product grid ───────────────────────────────────────────── */
.pp-catgrid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pp-catpage__layout:not(.has-filters) .pp-catgrid { align-items: stretch; }

/* ── Category-only product card ─────────────────────────────── */
.pp-ccard {
    display: flex; flex-direction: column; min-width: 0; height: 100%;
    padding: 5px 5px 9px; background: #fff;
    border: 1px solid #D5E8F3; border-radius: 6px;
    transition: border-color .2s ease, box-shadow 250ms ease;   /* hover shadow: main.css, "Product cards" */
}
@media (hover: hover) and (pointer: fine) {
    .pp-ccard:hover { border-color: #8CC8E8; }
}
.pp-ccard__media { position: relative; aspect-ratio: 4 / 3; background: var(--cp-tile); border-radius: 3px; overflow: hidden; }
.pp-ccard__imglink { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pp-ccard__img,
.pp-catinfo__media img.is-contain {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
    mix-blend-mode: multiply;              /* photos are shot on white – lets the pale tile show through */
    /* feather the photo edge so its studio backdrop melts into the tile instead of showing a rectangle */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
    mask-composite: intersect;
}
.pp-ccard .pp-wishlist-btn {
    position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px;
    background: transparent; border: 1px solid transparent; box-shadow: none; color: var(--cp-ink);
}
.pp-ccard .pp-wishlist-btn svg { width: 18px; height: 18px; }
.pp-ccard .pp-wishlist-btn:hover { transform: none; color: var(--cp-gold-dark); border-color: var(--cp-line); background: rgba(255,255,255,.85); }
.pp-ccard .pp-wishlist-btn.is-active { background: rgba(255,255,255,.85); color: var(--cp-gold); border-color: var(--cp-line); }
.pp-ccard .pp-wishlist-btn.is-active svg { fill: var(--cp-gold); }

.pp-ccard__cat, .pp-ccard__name, .pp-ccard__specs, .pp-ccard__price, .pp-ccard__note { padding-inline: 5px; }
.pp-ccard__cat { margin-top: 8px; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-gold-dark); }
.pp-ccard__name { margin-top: 3px; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--cp-ink); overflow-wrap: anywhere; }
.pp-ccard__name a { color: inherit; }
.pp-ccard__name a:hover { color: var(--cp-gold-dark); }
.pp-ccard__price { margin-top: 7px; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.pp-ccard__price .amount, .pp-ccard__price bdi { color: inherit; font-weight: inherit; }
.pp-ccard__price del { margin-right: 6px; font-size: 15px; font-weight: 400; color: var(--cp-mute); }
.pp-ccard__price ins { text-decoration: none; background: none; }
.pp-ccard__note { margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--cp-mute); }
.pp-ccard__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: auto 5px 0; padding: 12px 10px; min-height: 40px; border-radius: 4px;
    background: var(--cp-gold); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
    transition: background .2s ease;
}
.pp-ccard__cta:hover { background: var(--color-accent-dark, #1E6085); color: #fff; }
.pp-ccard__cta:focus-visible { outline-color: var(--cp-ink); }

/* where supported, rows are shared across a row of cards → prices/actions line up even when names wrap */
@supports (grid-template-rows: subgrid) {
    .pp-catgrid { row-gap: 18px; }
    .pp-ccard { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; }
    .pp-ccard__media { grid-row: 1; }
    .pp-ccard__cat   { grid-row: 2; }
    .pp-ccard__name  { grid-row: 3; }
    .pp-ccard__specs { grid-row: 4; }
    .pp-ccard__price { grid-row: 5; }
    .pp-ccard__note  { grid-row: 6; }
    .pp-ccard__cta   { grid-row: 7; align-self: end; margin-top: 13px; }
}

/* ── Open card (product setting "Offene Produktkarte") ──────────
   Subtle warm-grey frame, no shadow, no grey tile: a photo shot on pure white
   sits on white, centred; text left-aligned like the other cards.
   Same rows as the framed cards, so a mixed row still lines up. */
.pp-ccard.pp-ccard--open,
.pp-ccard.pp-ccard--open:hover { background: #fff; border: 1px solid #D5E8F3; border-radius: 6px; }   /* subtle warm-grey frame; hover shadow as every card */
.pp-ccard--open .pp-ccard__media { background: #fff; border-radius: 0; }
.pp-ccard--open .pp-ccard__imglink { padding: 6% 6% 4%; }
/* The photo fills its box (width:auto let the srcset "sizes" value – 50vw on phones – shrink it to ~60 % of a
   one-column tile). Its own white margin is wide, so it is scaled up a little more in the multi-column grid: the pan
   spans ~93 % of the tile there and ~80 % in the one-column phone layout, handle always fully inside. */
.pp-ccard--open .pp-ccard__img {
    width: 100%; height: 100%; object-fit: contain;
    mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; transform: scale(1.17);
}
@media (max-width: 399px) { .pp-ccard--open .pp-ccard__img { transform: none; } }

/* ── Pagination ─────────────────────────────────────────────── */
.pp-catpager { margin-top: 20px; }
.pp-catpager ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; list-style: none; }
.pp-catpager li > .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--cp-line); border-radius: 4px; background: #fff; color: var(--cp-ink); font-size: 14px; line-height: 1;
    transition: border-color .2s, color .2s;
}
.pp-catpager li > a.page-numbers:hover { border-color: var(--cp-gold); color: var(--cp-gold-dark); }
.pp-catpager li > .page-numbers.current { background: var(--cp-gold); border-color: var(--cp-gold); color: #fff; font-weight: 600; }
.pp-catpager li > .page-numbers.dots { border-color: transparent; min-width: 0; }

/* ── Empty / no-results ─────────────────────────────────────── */
.pp-catempty { padding: 48px 24px; text-align: center; background: var(--cp-cream); border-radius: 8px; color: var(--cp-mute); }
.pp-catempty p { max-width: 46ch; margin: 0 auto 6px; font-size: 15px; }
.pp-catempty__title { font-family: var(--cp-serif); font-size: 22px !important; color: var(--cp-ink); margin-bottom: 8px !important; }
.pp-catempty__btn { margin-top: 16px; }

/* no information section after the products → keep air above the footer */
.pp-catpage > .container:last-child { padding-bottom: 56px; }

/* ── Category information (below the products) ──────────────── */
.pp-catinfo { margin-top: 44px; padding: clamp(28px, 3.4vw, 40px) 0; background: var(--cp-cream); }
.pp-catinfo__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 56px; align-items: center; }
.pp-catinfo__inner.has-image { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.pp-catinfo__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-gold-dark); }
.pp-catinfo__title { margin-top: 10px; font-family: var(--cp-serif); font-weight: 400; font-size: clamp(26px, 3.1vw, 34px); line-height: 1.15; color: var(--cp-ink); }
.pp-catinfo__text { margin-top: 16px; max-width: 62ch; font-size: 14.5px; line-height: 1.65; color: #5F5F5F; }
.pp-catinfo__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-bottom: 3px; border-bottom: 2px solid var(--cp-gold); font-size: 14px; line-height: 1.3; color: var(--cp-ink); }
.pp-catinfo__more:hover { color: var(--cp-gold-dark); }
.pp-catinfo__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 31 / 20; background: #F2F8FC; border-radius: 4px; overflow: hidden; }
/* the studio photo fills the frame (its own backdrop melts into the tile); very wide photos are shown whole instead of cropped */
.pp-catinfo__media img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.pp-catinfo__media img.is-contain { width: auto; height: auto; max-width: 94%; max-height: 94%; }

/* ── Responsive ─────────────────────────────────────────────── */
/* filters become a drawer (the no-JS fallback keeps them visible, see <noscript> in the template) */
@media (max-width: 899px) {
    .pp-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-catpage__layout.has-filters { display: block; }
    .pp-catf__panel { display: none; }
    .pp-catf.is-open { position: fixed; inset: 0; z-index: 1200; background: #fff; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 96px; }
    .pp-catf.is-open .pp-catf__panel { display: block; }
    .pp-catf__close { display: inline-block; padding: 8px 0; background: none; border: 0; cursor: pointer; font: 500 14px/1 var(--font-body); color: var(--cp-gold-dark); }
    .pp-catf.is-open .pp-catf__actions:not(:has(.pp-catf__reset)) { display: flex; }
    .pp-catf.is-open .pp-catf__actions {
        position: fixed; left: 0; right: 0; bottom: 0; flex-direction: row; align-items: center; gap: 18px;
        padding: 14px 20px; background: #fff; border-top: 1px solid var(--cp-line);
    }
    .pp-catf__apply { display: inline-block; }
    .pp-cattools__filterbtn { display: inline-flex; min-height: 44px; }
    .pp-sort select { min-height: 44px; }
    .pp-check { padding: 10px 0; min-height: 44px; }   /* ≥ 44px tap rows in the drawer */
    .pp-price__field input { min-height: 40px; }
    .pp-chip { min-height: 36px; }
    .pp-catinfo__inner.has-image { grid-template-columns: minmax(0, 1fr); }
}
body.pp-catf-lock { overflow: hidden; }

@media (max-width: 640px) {
    .pp-catpage { padding-top: calc(var(--header-h, 98px) + 16px); }
    .pp-catpage__layout { margin-top: 26px; }
    .pp-cattools { align-items: flex-start; }
    .pp-cattools__right { width: 100%; flex-wrap: wrap; }
    .pp-cattools__count { order: -1; width: 100%; }
    .pp-sort { flex: 1 1 auto; min-width: 0; }
    .pp-sort select { width: 100%; min-width: 0; }
    .pp-catgrid { gap: 14px; }
    @supports (grid-template-rows: subgrid) { .pp-catgrid { row-gap: 14px; } }
    .pp-ccard { padding: 5px 5px 12px; }
    .pp-ccard__cat, .pp-ccard__name, .pp-ccard__price, .pp-ccard__note { padding-inline: 6px; }
    .pp-ccard__cta { margin-inline: 6px; padding: 14px 8px; min-height: 44px; gap: 6px; font-size: 11px; letter-spacing: .08em; }
    .pp-ccard__name { font-size: 15px; }
    .pp-ccard__price { font-size: 19px; }
}
@media (max-width: 399px) {
    .pp-catgrid { grid-template-columns: minmax(0, 1fr); }
}

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

/* The site's (invisible) mobile-menu overlay covers the viewport at ≤768px even while closed and swallows taps.
   On category pages let touches through unless the menu is actually open. */
body.pp-category-page .mobile-nav-overlay:not(.open) { pointer-events: none; }

/* ── EDITORIAL ARTICLE (bottom of a category archive) ──────────────────────────
   Opening on ivory, article body on white, slim contents list on the left.
   Everything is scoped to .pp-catart, which only exists on product-category
   archives — the shop archive and product pages are untouched. */
.pp-catart {
    --art-max: 1240px; --art-col: 720px;
    /* White separation between the product listing (or pagination) and the ivory opening.
       It sits on .pp-catart, which has no background of its own — the cream starts at
       .pp-catart__opening — so the gap is genuinely outside the ivory block, not padding
       inside it. One source of truth, no spacer markup. */
    --art-gap: 64px;
    margin-top: var(--art-gap);
}
@media (max-width: 899px) { .pp-catart { --art-gap: 48px; } }
@media (max-width: 640px) { .pp-catart { --art-gap: 32px; } }

.pp-catart__opening { background: var(--cp-cream); padding: clamp(40px, 5vw, 68px) 0; }
.pp-catart__openinner { max-width: var(--art-max); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 64px; align-items: center; }
.pp-catart__openinner.has-image { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.pp-catart__eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-gold-dark); }
.pp-catart__title { margin: 14px 0 0; font-family: var(--cp-serif); font-weight: 400; font-size: clamp(30px, 3.9vw, 44px); line-height: 1.16; color: var(--cp-ink); text-wrap: balance; }
.pp-catart__lead { margin: 18px 0 0; max-width: 56ch; font-size: 16.5px; line-height: 1.7; color: #5F5F5F; }
.pp-catart__openmedia { display: flex; align-items: center; justify-content: center; }
.pp-catart__openmedia img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; mix-blend-mode: multiply; }
/* A real photograph ("Bild oben im Beitrag") fills the same box instead: cropped, never stretched, no blend.
   The position keeps the whole pan incl. both handles in view (Pfannen: the steak photo, 3:2). */
.pp-catart__openmedia--photo img { object-fit: cover; object-position: 50% 38%; mix-blend-mode: normal; }

/* Photo band (pp_cat_article_band()): the photo covers the whole cream band edge to edge. Its height is fitted
   (never cropped top/bottom), it sits on the right, and its baked-in marble fades into --band-wide-color, which
   fills whatever is left on very wide screens. A light cream gradient keeps the text on the left readable.
   The empty spacer keeps the former image column's exact size, so the band's height does not change. */
.pp-catart__opening--band {
    background-color: var(--band-wide-color);
    background-image: var(--band-grad-wide, linear-gradient(90deg, rgba(242,248,252,.93) 0%, rgba(242,248,252,.9) 34%, rgba(242,248,252,.55) 47%, rgba(242,248,252,0) 60%)), var(--band-wide-1x);
    background-repeat: no-repeat;
    background-size: 100% 100%, auto 100%;
    background-position: 0 0, right center;
}
@media (min-resolution: 1.5dppx) {
    .pp-catart__opening--band { background-image: var(--band-grad-wide, linear-gradient(90deg, rgba(242,248,252,.93) 0%, rgba(242,248,252,.9) 34%, rgba(242,248,252,.55) 47%, rgba(242,248,252,0) 60%)), var(--band-wide-2x); }
}
/* desktop: the "desk" file carries ≈70px more marble on the right, so the pan sits further in from the edge –
   same height-fitted scale, same vertical position, still right-aligned (no gap) */
/* --band-grad-desk: a band may set its own desktop gradient (pp_cat_article_band(), 'grad_desk'), e.g. to end
   exactly at its photo's left edge; the default is the Pfannen/Töpfe gradient. --band-grad-wide does the same for the
   two-column widths below 1280px (Bräter/Wok: their square photo's fade ends well before its accessories) */
@media (min-width: 1280px) {
    .pp-catart__opening--band { background-image: var(--band-grad-desk, linear-gradient(90deg, rgba(242,248,252,.93) 0%, rgba(242,248,252,.9) 34%, rgba(242,248,252,.55) 47%, rgba(242,248,252,0) 60%)), var(--band-desk-1x); }
}
@media (min-width: 1280px) and (min-resolution: 1.5dppx) {
    .pp-catart__opening--band { background-image: var(--band-grad-desk, linear-gradient(90deg, rgba(242,248,252,.93) 0%, rgba(242,248,252,.9) 34%, rgba(242,248,252,.55) 47%, rgba(242,248,252,0) 60%)), var(--band-desk-2x); }
}
.pp-catart__openmedia--spacer { width: 100%; aspect-ratio: 1024 / 683; max-height: 300px; }
@media (min-width: 900px) and (max-width: 1199px) {   /* narrower two-column band: the photo starts closer to the text */
    .pp-catart__opening--band { background-image: var(--band-grad-wide, linear-gradient(90deg, rgba(242,248,252,.93) 0%, rgba(242,248,252,.9) 44%, rgba(242,248,252,.6) 52%, rgba(242,248,252,0) 63%)), var(--band-wide-1x); }
}
@media (min-width: 900px) and (max-width: 1199px) and (min-resolution: 1.5dppx) {
    .pp-catart__opening--band { background-image: var(--band-grad-wide, linear-gradient(90deg, rgba(242,248,252,.93) 0%, rgba(242,248,252,.9) 44%, rgba(242,248,252,.6) 52%, rgba(242,248,252,0) 63%)), var(--band-wide-2x); }
}

.pp-catart__body {
    max-width: var(--art-max); display: grid; grid-template-columns: 210px minmax(0, 1fr);
    gap: 0 56px; padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(44px, 5vw, 72px); background: #fff;
}
.pp-catart__body:not(:has(.pp-catart__toc)) { grid-template-columns: minmax(0, 1fr); }

/* contents list — sticky on desktop, plain block on mobile */
.pp-catart__toc { position: sticky; top: 96px; align-self: start; padding-right: 28px; border-right: 1px solid var(--cp-line, #D5E8F3); }
.pp-catart__toctitle { margin: 0 0 18px; font-family: var(--cp-serif); font-size: 17px; font-weight: 400; color: var(--cp-ink); }
.pp-catart__toclist { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pp-catart__toclist li + li { margin-top: 2px; }
.pp-catart__toclist a {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: baseline;
    padding: 9px 0; border-bottom: 1px solid transparent; font-size: 13.5px; line-height: 1.4; color: #6B6B6B; text-decoration: none;
}
.pp-catart__toclist a:hover { color: var(--cp-ink); }
.pp-catart__toclist a:focus-visible { outline: 2px solid var(--cp-gold); outline-offset: 2px; }
.pp-catart__tocnum { font-family: var(--cp-serif); font-size: 13px; color: var(--cp-gold-dark); }

.pp-catart__article { max-width: var(--art-col); }
.pp-catart__section + .pp-catart__section { margin-top: clamp(34px, 3.4vw, 46px); }
.pp-catart__h2 {
    margin: 0 0 14px; font-family: var(--cp-serif); font-weight: 400; font-size: clamp(25px, 2.6vw, 32px);
    line-height: 1.22; color: var(--cp-ink); text-wrap: balance;
}
.pp-catart__num { color: var(--cp-gold-dark); font-variant-numeric: tabular-nums; }
.pp-catart__h3 { margin: 26px 0 10px; font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--cp-ink); }
.pp-catart__p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: #4E4E4E; }
.pp-catart__p:last-child { margin-bottom: 0; }

.pp-catart__figure { margin: 24px 0; }
.pp-catart__figure img { display: block; width: 100%; height: auto; border-radius: 4px; background: #F2F8FC; }
.pp-catart__figure figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: #7A7A7A; }

.pp-catart__callout { margin: 24px 0; padding: 20px 24px; background: var(--cp-cream); border-left: 3px solid var(--cp-gold); }
.pp-catart__calloutheading { margin: 0; font-family: var(--cp-serif); font-size: 21px; font-weight: 400; line-height: 1.3; color: var(--cp-ink); }
.pp-catart__calloutext { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: #5F5F5F; }

.pp-catart__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
    margin-top: clamp(34px, 3.6vw, 48px); padding-top: 20px; border-top: 1px solid var(--cp-line, #D5E8F3);
}
.pp-catart__sources { margin: 0; font-size: 13.5px; line-height: 1.5; color: #7A7A7A; }
.pp-catart__sources a { color: #7A7A7A; text-decoration: underline; text-underline-offset: 3px; }
.pp-catart__sources a:hover { color: var(--cp-gold-dark); }
.pp-catart__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: 0; }
.pp-catart__cta { padding-bottom: 3px; border-bottom: 2px solid var(--cp-gold); font-size: 15px; color: var(--cp-ink); text-decoration: none; }
.pp-catart__cta:hover { color: var(--cp-gold-dark); }
.pp-catart__advice { font-size: 15px; color: #6B6B6B; text-decoration: none; }
.pp-catart__advice:hover { color: var(--cp-gold-dark); }

/* anchor targets clear the sticky header */
.pp-catart__section { scroll-margin-top: 92px; }
#pp-catgrid { scroll-margin-top: 92px; }

@media (max-width: 899px) {
    .pp-catart__openinner.has-image { grid-template-columns: minmax(0, 1fr); }
    .pp-catart__openmedia { order: -1; }
    .pp-catart__openmedia img { max-height: 220px; }
    .pp-catart__openmedia--spacer { max-height: 220px; }
    /* one column: photo top-centre (where the image used to be), marble continued around it behind the text.
       The canvas is twice the photo's width, so the photo is the band's full width up to 390px and 390 × 260 above.
       --band-grad-tall: a band may set its own text gradient (Bräter: its uncropped photo reaches lower). */
    .pp-catart__opening--band {
        background-color: var(--band-tall-color);
        background-image: var(--band-grad-tall, linear-gradient(0deg, rgba(242,248,252,.94) 0%, rgba(242,248,252,.9) 42%, rgba(242,248,252,0) 56%)), var(--band-tall-1x);
        background-size: 100% 100%, min(200%, 780px) auto;
        background-position: 0 0, center top;
    }
    /* contents list moves above the article, single reading column */
    .pp-catart__body { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pp-catart__toc { position: static; padding: 0 0 20px; margin-bottom: 26px; border-right: 0; border-bottom: 1px solid var(--cp-line, #D5E8F3); }
    .pp-catart__toclist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
    .pp-catart__article { max-width: none; }
    .pp-catart__p { font-size: 16.5px; }
}
@media (max-width: 899px) and (min-resolution: 1.5dppx) {
    .pp-catart__opening--band { background-image: var(--band-grad-tall, linear-gradient(0deg, rgba(242,248,252,.94) 0%, rgba(242,248,252,.9) 42%, rgba(242,248,252,0) 56%)), var(--band-tall-2x); }
}
@media (max-width: 479px) {
    .pp-catart__toclist { grid-template-columns: minmax(0, 1fr); }
    .pp-catart__callout { padding: 16px 18px; }
    .pp-catart__p { font-size: 16px; }
}

/* ── Sub-category overview (parent categories, e.g. Pfannen): the homepage collection card, stacked ── */
.pp-subcats { margin: clamp(4px, 1vw, 12px) 0 clamp(28px, 3.5vw, 44px); }
.pp-subcats__title {
    margin: 0 0 18px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-dark);
}
.collection-cards.collection-cards--sub {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
    width: 100%;
}
.collection-cards--sub .collection-card { flex-direction: column; min-height: 0; }
.collection-cards--sub .collection-card__img {
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 13px 13px 0 0;
    background-size: cover;
    background-position: center;
}
.collection-cards--sub .collection-card__img--white { background-size: 92% auto; }   /* whole pan and handle, not cropped by cover */
.collection-cards--sub .collection-card__panel { flex: 1 1 auto; width: 100%; padding: 18px 16px 20px; }
.collection-cards--sub .collection-card__panel::before { left: 16px; right: 16px; top: 0; bottom: auto; width: auto; height: 1px; }
.collection-cards--sub .collection-card__icon { width: 28px; height: 28px; margin-bottom: 10px; }
.collection-cards--sub .collection-card__name { font-size: clamp(18px, 1.5vw, 20px); }
.collection-cards--sub .collection-card__desc { font-size: 14.5px; margin-bottom: 14px; }
.collection-cards--sub .collection-card__link { font-size: 15px; gap: 10px; }
/* Exactly six sub-categories (Pfannen): one row of six instead of five plus a lone card. */
@media (min-width: 1101px) {
    .collection-cards.collection-cards--sub:has(> .collection-card:nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .collection-cards.collection-cards--sub { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
}
@media (max-width: 700px) {
    .collection-cards.collection-cards--sub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .collection-cards--sub .collection-card__panel { padding: 14px 12px 16px; }
    .collection-cards--sub .collection-card__panel::before { left: 12px; right: 12px; }
    .collection-cards--sub .collection-card__desc { font-size: 13.5px; }
    .collection-cards--sub .collection-card__link { font-size: 14px; }
}

/* Dimensions / weight line on product cards (only when the product carries them) */
.pp-ccard__specs { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--cp-mute); }