/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Phones & tablets (2026-10-08). The desktop design is the source of truth; this file only adapts sizing and layout to
   small screens. Loaded after every other stylesheet (functions.php, priority 100) and EVERY rule sits inside a
   max-width query, so desktop (≥ 1201 px) is untouched.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Header: touch targets (the drawer menu is used up to 1200 px) ────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    /* the three bars keep their size; the tappable area grows to ≈ 48 × 44 around them */
    .mobile-menu-toggle { position: relative; }
    .mobile-menu-toggle::before { content: ''; position: absolute; inset: -11px -10px; }
}
@media (max-width: 768px) {
    .search-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-right: -10px; }
    /* the "*" after "Kostenloser Versand" (links to Versand & Zahlung): a finger-sized target without moving the text */
    .pp-shipref { display: inline-block; padding: 12px 10px; margin: -12px -10px; }
}
/* 360 px phones: menu button + logo + three icons + gaps were wider than the screen (the page scrolled sideways) */
@media (max-width: 400px) {
    .header-inner { gap: 10px; }
    .header-actions { gap: 4px; }
}

/* Mobile arrows sit halfway down the image canvas, below the fixed header. */
@media (max-width: 768px) {
    .hero-slider__btn,
    .hero-slider__btn:hover { top: calc(50% + var(--header-h, 95px) / 2); bottom: auto; transform: translateY(-50%); width: 36px; height: 36px; }
    .hero-slider__btn--prev { left: 8px; }
    .hero-slider__btn--next { right: 8px; }
}
/* dots: same look, larger invisible tap area (hero + bestseller carousel) */
@media (max-width: 1024px) {
    .hero-slider__dot, .lux-nav__dot { position: relative; }
    .hero-slider__dot::after, .lux-nav__dot::after { content: ''; position: absolute; inset: -16px -4px; }
}

/* ── "Alle Produkte" (/shop/): categories as a swipeable row above the products, "Eigenschaften" below them ────────
   Before, the whole sidebar (8 categories + 9 properties) came first and pushed the first product below the fold. */
@media (max-width: 768px) {
    .pp-shop-sidebar { display: contents; }
    .pp-shop-sidebar > .pp-sidebar-section:first-child { order: 0; margin-bottom: 0; min-width: 0; }
    .pp-shop-main { order: 1; min-width: 0; }
    .pp-shop-sidebar > .pp-sidebar-section:last-child { order: 2; margin: 1rem 0 0; }

    .pp-sidebar-cats {
        display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
        margin-inline: calc(-1 * var(--gap, 1.25rem)); padding: 2px var(--gap, 1.25rem) 6px;
        scroll-padding-inline: var(--gap, 1.25rem); scroll-snap-type: x proximity;
    }
    .pp-sidebar-cats::-webkit-scrollbar { display: none; }
    .pp-sidebar-cat-item { flex: none; scroll-snap-align: start; }
    .pp-sidebar-cat-item a,
    .pp-sidebar-cat-item--active a {
        min-height: 44px; padding: 0 14px; gap: .5rem; white-space: nowrap;
        border: 1px solid var(--color-border); border-radius: 999px; background: #fff;
    }
    .pp-sidebar-cat-item--active a { border-color: var(--color-accent); background: #F2F8FC; }
    .pp-sidebar-cat__name { flex: none; overflow: visible; }
    .pp-sidebar-cat__arrow { display: none; }
}

/* ── Product page: related products ("Das könnte Ihnen gefallen") ───────────────────────────────────────────────────
   One card per row on phones: the square tile left the 3:2 product photos floating in white; 4:3 like the category
   and shop cards. */
@media (max-width: 480px) {
    .related-products .product-card__img-wrap { aspect-ratio: 4 / 3; }
}

/* ── Cart / checkout: finger-sized links ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pp-steps .pp-step, .pp-co-steps .pp-step { display: inline-block; padding-block: 12px; margin-block: -12px; }
    .pp-co-back { min-height: 44px; margin-top: 0; }
    .pp-co-signin__btn { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; margin-inline: -6px; }
}

/* ── Category article (Pfannen, Töpfe, Bräter, Wok): the two text links at the end ───────────────────────────────── */
@media (max-width: 768px) {
    .pp-catart__advice, .pp-catart__cta { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Footer: link groups side by side (they were one long column of four groups on phones) ───────────────────────── */
@media (max-width: 768px) and (min-width: 341px) {
    .footer-top .container { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 2.5rem; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-col { min-width: 0; }
    .footer-contact a { overflow-wrap: anywhere; }
    .footer-col__list a { display: inline-block; padding-block: 4px; }
}

/* ── Small labels: never below 11 px on phones ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pp-ccard__cat, .pp-card__cat-label { font-size: 11px; }
    .pp-sidebar-heading { font-size: 11px; }
}

/* ── Newsletter (footer + anywhere else): the e-mail field may shrink, so "Anmelden" stays inside the screen ─────── */
@media (max-width: 768px) {
    .pp-nl-row input[type=email] { min-width: 0; }
    .pp-nl-row .btn { flex: none; }
}

/* ── Product options on phones (2026-10-22): size labels stay on one line, long labels get one button per row ── */
@media (max-width: 599px) {
    .pp-pdp .pp-opt__btn { padding-inline: 6px; }
    .pp-pdp .pp-opt:not([data-long]) .pp-opt__btn span { white-space: nowrap; }
    .pp-pdp .pp-opt[data-long] { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 379px) {
    .pp-pdp .pp-opt:not([data-long]) .pp-opt__btn { font-size: 16px; }
}

/* ── Navbar badge + wordmark, tablet and phones: the brand group shrinks in steps so menu, search, account and cart keep their room ── */
@media (max-width: 1200px) {
    .site-logo { gap: 10px; }
    .site-logo .site-logo__badge { height: 42px; }
    .site-logo__text { font-size: 21px; }
}
@media (max-width: 768px) {
    .site-logo .site-logo__badge { height: 38px; }
    .site-logo__text { font-size: 20px; }
}
@media (max-width: 599px) {
    .header-inner { gap: .75rem; }
    .header-actions { gap: .25rem; }
}
@media (max-width: 440px) {
    .header-inner { gap: .375rem; }
    .header-actions { gap: .125rem; }
    .site-logo { gap: 8px; }
    .site-logo .site-logo__badge { height: 34px; }
    .site-logo__text { font-size: 19px; }
}
@media (max-width: 383px) {
    .site-logo { gap: 6px; }
    .site-logo .site-logo__badge { height: 28px; }
    .site-logo__text { font-size: 17px; }
}

/* ── Header on very narrow phones (< 360px): logo + three icons fit the row (the cart icon was cut off at 320px) ── */
@media (max-width: 359px) {
    .header-inner { padding-inline: 8px; }
    .site-logo__text { font-size: 15px; }
    .header-actions { gap: 0; }
    .header-actions .header-icon { width: 32px; }
}