/* ═══════════════════════════════════════════════════════════════
   Mini-cart drawer (right side). Every rule is scoped to .pp-drawer /
   .pp-toast / .pp-add-error – other components are not affected.
   ═══════════════════════════════════════════════════════════════ */

html.pp-drawer-lock, html.pp-drawer-lock body { overflow: hidden; }

.pp-drawer {
    --dr-gold:      var(--color-accent, #2676A3);
    --dr-gold-dark: #1E6085;
    --dr-ink:       #1A1A1A;
    --dr-text:      #3A3A3A;
    --dr-mute:      #5C5C5C;
    --dr-line:      #D5E8F3;
    --dr-ivory:     #F2F8FC;
    --dr-tile:      #F2F8FC;
    --dr-serif:     'Playfair Display', Georgia, serif;
    position: fixed; inset: 0; z-index: 100000;
    font-family: var(--font-body, 'Barlow', system-ui, sans-serif); color: var(--dr-ink);
}
.pp-drawer[hidden] { display: none !important; }
.pp-drawer *, .pp-drawer *::before, .pp-drawer *::after { box-sizing: border-box; }
.pp-drawer :focus-visible { outline: 2px solid var(--dr-gold); outline-offset: 2px; }

.pp-drawer__overlay { position: absolute; inset: 0; background: rgba(20, 17, 12, .5); opacity: 0; transition: opacity .28s ease; }
.pp-drawer.is-open .pp-drawer__overlay { opacity: 1; }

.pp-drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%);
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; background: #fff;
    box-shadow: -10px 0 34px rgba(20, 17, 12, .16);
    transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1);
    padding-bottom: env(safe-area-inset-bottom);
    outline: none;
}
.pp-drawer.is-open .pp-drawer__panel { transform: none; }

/* header */
.pp-drawer__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 26px 16px; border-bottom: 1px solid var(--dr-line); }
.pp-drawer__title { margin: 0; font-family: var(--dr-serif); font-weight: 400; font-size: 30px; line-height: 1.15; color: var(--dr-ink); }
.pp-drawer__count { margin: 4px 0 0; font-size: 15px; color: var(--dr-mute); }
.pp-drawer__close {
    flex: none; width: 44px; height: 44px; margin: -6px -8px 0 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 50%; color: var(--dr-ink); cursor: pointer; transition: background .15s;
}
.pp-drawer__close:hover { background: var(--dr-ivory); }

/* scrolling list – flex-basis 0 so the list never claims height the panel cannot give, which is what used to
   push the action footer (and with it the checkout button) below the bottom edge on short screens. */
.pp-drawer__body { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 26px 20px; -webkit-overflow-scrolling: touch; outline: none; }
.pp-drawer__status { margin: 40px 0; text-align: center; color: var(--dr-mute); }
.pp-drawer__empty { padding: 48px 0 24px; text-align: center; }
.pp-drawer__emptytitle { margin: 0 0 20px; font-family: var(--dr-serif); font-size: 22px; color: var(--dr-ink); }
.pp-drawer__error {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 14px;
    background: #FBEDEA; border-left: 3px solid #B3261E; border-radius: 3px; font-size: 15px; line-height: 1.45; color: #5A1712;
}
.pp-drawer__errclose { flex: none; width: 28px; height: 28px; margin: -3px -4px 0 0; padding: 0; background: none; border: 0; font-size: 22px; line-height: 1; color: inherit; cursor: pointer; }

.pp-drawer__success { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; padding: 14px 16px; background: var(--dr-ivory); border-radius: 3px; font-size: 17px; color: var(--dr-ink); }
.pp-drawer__success svg { flex: none; width: 26px; height: 26px; padding: 4px; background: var(--dr-gold); color: #fff; border-radius: 50%; }

.pp-drawer__list { list-style: none; margin: 0; padding: 0; }
.pp-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--dr-line); transition: opacity .15s; }
.pp-item:last-child { border-bottom: 0; }
.pp-item.is-new { grid-template-columns: 120px minmax(0, 1fr); margin-block: 6px; padding: 16px 12px; background: #F2F8FC; border: 1px solid #D5E8F3; border-radius: 6px; }
.pp-item.is-busy { opacity: .55; cursor: progress; }
.pp-item.is-busy * { pointer-events: none; }
.pp-item__img { display: flex; align-items: center; justify-content: center; align-self: start; aspect-ratio: 1 / 1; background: var(--dr-tile); border-radius: 4px; overflow: hidden; }
.pp-item__img:has(img.pp-img--white) { background: #fff; }   /* photo shot on pure white */
.pp-item__img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pp-item__main { min-width: 0; }
.pp-item__name { margin: 0; font-family: var(--dr-serif); font-weight: 700; font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
.pp-item__name a { color: var(--dr-ink); text-decoration: none; }
.pp-item__name a:hover { color: var(--dr-gold-dark); }
.pp-item__attrs, .pp-item__added, .pp-item__unit, .pp-item__label, .pp-item__prev { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--dr-text); }
.pp-item__added { color: var(--dr-mute); }
.pp-item__unit { margin-top: 8px; font-size: 16px; }
.pp-item__unit strong { font-weight: 700; color: var(--dr-ink); font-size: 17px; }
.pp-item__label { margin-top: 12px; color: var(--dr-mute); }
.pp-item__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.pp-item__line { margin: 0; font-size: 19px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-item__fixedqty { margin: 0; font-size: 15px; color: var(--dr-text); }
.pp-item__remove { margin: 8px 0 0; padding: 4px 0; background: none; border: 0; font: inherit; font-size: 15px; color: var(--dr-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pp-item__remove:hover { color: var(--dr-gold-dark); }
.pp-item__prev { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dr-line); }

/* quantity stepper */
.pp-drawer .pp-qty { display: inline-flex; align-items: stretch; height: 42px; border: 1px solid #D5E8F3; border-radius: 3px; background: #fff; overflow: hidden; }
.pp-drawer .pp-qty__btn { width: 38px; padding: 0; background: #fff; border: 0; color: var(--dr-ink); font: 300 22px/1 var(--font-body, sans-serif); cursor: pointer; }
.pp-drawer .pp-qty__btn:hover:not(:disabled) { background: var(--dr-ivory); }
.pp-drawer .pp-qty__btn:disabled { opacity: .35; cursor: not-allowed; }
.pp-drawer .pp-qty__input { width: 46px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; font: 400 17px/1 var(--font-body, sans-serif); color: var(--dr-ink); -moz-appearance: textfield; appearance: textfield; }
.pp-drawer .pp-drawer .pp-qty__input::-webkit-outer-spin-button, .pp-drawer .pp-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-drawer .pp-qty__input:focus-visible, .pp-drawer .pp-qty__btn:focus-visible { outline: 2px solid var(--dr-gold); outline-offset: -3px; }

.pp-drawer__help { margin: 22px 0 0; text-align: center; font-size: 15px; color: var(--dr-text); }
.pp-drawer__help a { color: var(--dr-ink); text-decoration: underline; text-underline-offset: 3px; }
.pp-drawer__help a:hover { color: var(--dr-gold-dark); }

/* footer (stays visible while the list scrolls; on a very short viewport it is capped and scrolls itself,
   so "Zur Kasse" – its first action – stays reachable instead of being cut off below the panel) */
.pp-drawer__foot {
    flex: 0 1 auto; min-height: 0; max-height: 72%; overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 26px 22px; background: #fff; border-top: 1px solid var(--dr-line); box-shadow: 0 -10px 22px rgba(20, 17, 12, .05);
}
.pp-drawer__foot[hidden] { display: none; }
.pp-drawer__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 18px; }
.pp-drawer__sub strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-drawer__ship { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 15px; font-variant-numeric: tabular-nums; }
.pp-drawer__note { margin: 6px 0 4px; font-size: 15px; line-height: 1.45; color: var(--dr-mute); }
.pp-drawer__shipnote { margin-top: 2px; font-size: 13.5px; }
.pp-drawer .pp-btn {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin-top: 12px; padding: 0 16px;
    border: 1.5px solid transparent; border-radius: 3px; cursor: pointer; text-decoration: none;
    font: 600 14px/1 var(--font-body, sans-serif); letter-spacing: .14em; text-transform: uppercase;
    transition: background .18s, color .18s, border-color .18s;
}
.pp-drawer .pp-btn--gold { background: var(--dr-gold); border-color: var(--dr-gold); color: #fff; }
/* the drawer is printed on every storefront page: page-level link colours (e.g. the account page's gold links) must never reach its buttons */
#pp-drawer a.pp-btn--gold, #pp-drawer a.pp-btn--gold:hover, #pp-drawer a.pp-btn--gold:focus, #pp-drawer a.pp-btn--gold:visited { color: #fff; }
#pp-drawer a.pp-btn--outline, #pp-drawer a.pp-btn--outline:visited { color: var(--dr-ink); }
#pp-drawer a.pp-btn--outline:hover, #pp-drawer a.pp-btn--outline:focus-visible { color: #fff; }
.pp-drawer .pp-btn--gold:hover { background: var(--color-accent-dark, #1E6085); border-color: var(--color-accent-dark, #1E6085); }
.pp-drawer .pp-btn--outline { background: #fff; border-color: var(--dr-ink); color: var(--dr-ink); }
.pp-drawer .pp-btn--outline:hover { background: var(--dr-ink); color: #fff; }
.pp-drawer__continue { display: block; margin: 14px auto 0; padding: 6px 8px; background: none; border: 0; font: inherit; font-size: 18px; color: var(--dr-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.pp-drawer__continue:hover { color: var(--dr-gold-dark); }

.pp-drawer__live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 520px) {
    .pp-drawer__panel { width: 100%; }
    .pp-drawer__head { padding: 18px 20px 14px; }
    .pp-drawer__title { font-size: 26px; }
    .pp-drawer__body { padding: 14px 20px 16px; }
    .pp-drawer__foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); }
    .pp-drawer__panel { padding-bottom: 0; }
    .pp-item { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
    .pp-item.is-new { grid-template-columns: 96px minmax(0, 1fr); padding: 14px 10px; }
    .pp-item__name { font-size: 18px; }
    .pp-drawer .pp-qty { height: 46px; } .pp-qty__btn { width: 44px; }                       /* ≥ 44px touch targets */
    .pp-item__remove { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
    .pp-drawer .pp-btn { height: 52px; }
}
@media (max-height: 640px) { .pp-drawer__foot { padding-block: 12px 14px; } .pp-drawer .pp-btn { height: 46px; margin-top: 8px; } }
/* landscape phones and very short windows: give the list and the actions room instead of overflowing */
@media (max-height: 480px) {
    .pp-drawer__head { padding: 14px 26px 10px; }
    .pp-drawer__title { font-size: 22px; }
    .pp-drawer__count { font-size: 14px; }
    .pp-drawer__sub { font-size: 16px; }
    .pp-drawer__sub strong { font-size: 20px; }
    .pp-drawer__note { margin: 4px 0 2px; font-size: 13.5px; }
    .pp-drawer .pp-btn { height: 44px; margin-top: 8px; }
    .pp-drawer__continue { margin-top: 10px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-drawer__panel, .pp-drawer__overlay, .pp-item { transition: none; }
}

/* ── add-to-cart feedback outside the drawer ─────────────────── */
.pp-add-error { margin: 12px 0 0; padding: 12px 14px; background: #FBEDEA; border-left: 3px solid #B3261E; border-radius: 3px; font-size: 15px; line-height: 1.45; color: #5A1712; flex: 0 0 100%; }
.pp-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 99999; display: flex; align-items: flex-start; gap: 12px; max-width: min(92vw, 520px); transform: translateX(-50%);
    padding: 14px 16px; background: #1A1A1A; color: #fff; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 15px; line-height: 1.45;
}
.pp-toast button { flex: none; width: 26px; height: 26px; margin: -3px -6px 0 0; padding: 0; background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }

/* linked lid line ("Mit Deckel"): belongs to the pan above it – tucked under it, no own controls */
.pp-item:has(+ .pp-item--lid) { border-bottom: 0; padding-bottom: 6px; }
.pp-item--lid { padding-top: 6px; grid-template-columns: 92px minmax(0, 1fr); }
.pp-item--lid .pp-item__img { width: 56px; justify-self: end; }
.pp-item--lid .pp-item__name { font-size: 16px; }
@media (max-width: 599px) { .pp-item--lid { grid-template-columns: 80px minmax(0, 1fr); } }