/* Hero spacing guard: the current Theme owns a neutral block-start margin.
 * responsive.css loads after home.css, so this also neutralizes an older cached/aggregated
 * .pp-hero negative margin without changing Hero geometry or breakpoints. */
.pp-home > .pp-hero {
    margin-block-start: 0;
}

/**
 * Reference-aligned container and responsive foundations.
 * Component-specific responsive behavior is added with each component rather
 * than accumulating global breakpoint patches here.
 */

@media (min-width: 2400px) {
    :root {
        --pp-container-max: 1360px;
    }
}

@media (max-width: 1366px) {
    :root {
        --pp-container-max: 1140px;
    }
}

@media (max-width: 1200px) {
    :root {
        --pp-container-max: 980px;
    }
}

@media (max-width: 1024px) {
    :root {
        --pp-container-max: 842px;
    }
}

@media (max-width: 880px) {
    :root {
        --pp-container-max: 840px;
    }
}

@media (max-width: 767px) {
    :root {
        --pp-gutter: 16px;
        --pp-section-space: clamp(2.75rem, 11vw, 4rem);
    }

    .pp-container {
        width: 100%;
        padding-inline: var(--pp-gutter);
    }

    .pp-section-heading {
        margin-block-end: var(--pp-space-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* Mobile quick navigation: reference interaction, native PardePlus design system. */
@media (max-width: 767px) {
    html {
        scroll-padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
    }

    .pp-mobile-nav {
        position: fixed;
        z-index: 900;
        right: max(0.55rem, env(safe-area-inset-right));
        left: max(0.55rem, env(safe-area-inset-left));
        bottom: max(0.45rem, env(safe-area-inset-bottom));
        display: block;
        max-width: 34rem;
        margin-inline: auto;
        opacity: 1;
        pointer-events: none;
        transform: translate3d(0, 0, 0) scale(1);
        transform-origin: bottom;
        transition: transform 300ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease, visibility 180ms ease;
        will-change: transform, opacity;
    }

    .pp-mobile-nav.is-footer-hidden,
    .pp-mobile-nav.is-layer-hidden {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translate3d(0, calc(100% + 1.5rem), 0) scale(.98);
    }

    .pp-mobile-nav__surface {
        position: relative;
        display: grid;
        height: 4.15rem;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        padding: 0.2rem 0.35rem;
        overflow: visible;
        background: rgb(255 255 255 / 94%);
        border: 1px solid rgb(143 26 28 / 13%);
        border-radius: 1.2rem;
        box-shadow: 0 18px 42px rgb(143 26 28 / 14%), 0 4px 12px rgb(0 0 0 / 7%), inset 0 1px rgb(255 255 255 / 90%);
        backdrop-filter: blur(18px) saturate(140%);
        pointer-events: auto;
    }

    .pp-mobile-nav__surface::before {
        content: "";
        position: absolute;
        z-index: -1;
        right: 14%;
        left: 14%;
        bottom: -0.52rem;
        height: 1rem;
        background: rgb(234 203 154 / 32%);
        border-radius: var(--pp-radius-pill);
        filter: blur(0.7rem);
        pointer-events: none;
    }

    .pp-mobile-nav__item {
        appearance: none;
        position: relative;
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.24rem;
        padding: 0.25rem 0.08rem;
        color: var(--pp-color-muted);
        background: transparent;
        border: 0;
        border-radius: 0.85rem;
        font: inherit;
        font-size: 0.61rem;
        font-weight: 650;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        transition: color var(--pp-transition-fast), background-color var(--pp-transition-fast), transform var(--pp-transition-fast);
    }

    .pp-mobile-nav__item > svg,
    .pp-mobile-nav__cart-icon > svg {
        width: 1.18rem;
        height: 1.18rem;
    }

    .pp-mobile-nav__item::after {
        content: "";
        position: absolute;
        bottom: 0.27rem;
        width: 0.25rem;
        height: 0.25rem;
        background: var(--pp-color-accent);
        border-radius: 50%;
        opacity: 0;
        transform: scale(.45);
        transition: opacity var(--pp-transition-fast), transform var(--pp-transition-fast);
    }

    .pp-mobile-nav__item:is(:hover, :focus-visible),
    .pp-mobile-nav__item[aria-current="page"],
    .pp-mobile-nav__item[aria-expanded="true"] {
        color: var(--pp-color-primary);
        background: rgb(248 238 223 / 70%);
    }

    .pp-mobile-nav__item[aria-current="page"]::after,
    .pp-mobile-nav__item[aria-expanded="true"]::after {
        opacity: 1;
        transform: scale(1);
    }

    .pp-mobile-nav__item:active {
        transform: scale(.95);
    }

    .pp-mobile-nav__item:focus-visible {
        outline: 2px solid var(--pp-color-accent);
        outline-offset: -2px;
    }

    .pp-mobile-nav__item--primary {
        color: var(--pp-color-primary);
        background: transparent !important;
    }

    .pp-mobile-nav__item--primary::after {
        display: none;
    }

    .pp-mobile-nav__primary-icon {
        display: flex;
        width: 2.72rem;
        height: 2.72rem;
        align-items: center;
        justify-content: center;
        margin-block-start: -0.95rem;
        color: #fff;
        background: linear-gradient(145deg, #a7282b 0%, var(--pp-color-primary) 58%, #6d1013 100%);
        border: 4px solid rgb(255 255 255 / 96%);
        border-radius: 0.95rem;
        box-shadow: 0 10px 24px rgb(143 26 28 / 25%), 0 2px 6px rgb(0 0 0 / 10%);
        transition: transform var(--pp-transition-fast), box-shadow var(--pp-transition-fast), filter var(--pp-transition-fast);
    }

    .pp-mobile-nav__primary-icon svg {
        width: 1.12rem;
        height: 1.12rem;
    }

    .pp-mobile-nav__item--primary:is(:hover, :focus-visible) .pp-mobile-nav__primary-icon,
    .pp-mobile-nav__item--primary[aria-expanded="true"] .pp-mobile-nav__primary-icon {
        transform: translateY(-2px) scale(1.035);
        filter: saturate(1.06);
        box-shadow: 0 13px 28px rgb(143 26 28 / 30%), 0 3px 8px rgb(0 0 0 / 12%);
    }

    .pp-mobile-nav__cart-icon {
        position: relative;
        display: grid;
        place-items: center;
    }

    .pp-mobile-nav__badge {
        position: absolute;
        top: -0.48rem;
        inset-inline-start: -0.58rem;
        display: inline-flex;
        min-width: 1.08rem;
        height: 1.08rem;
        align-items: center;
        justify-content: center;
        padding-inline: 0.18rem;
        color: var(--pp-color-primary);
        background: var(--pp-color-accent);
        border: 2px solid rgb(255 255 255 / 97%);
        border-radius: var(--pp-radius-pill);
        box-shadow: 0 3px 8px rgb(143 26 28 / 18%);
        font-size: 0.5rem;
        font-weight: 750;
        line-height: 1;
    }

    .pp-mobile-nav__badge[hidden] {
        display: none !important;
    }

    .pp-mobile-nav__item[data-pp-mobile-nav-load]::before {
        content: "";
        position: absolute;
        top: 0.62rem;
        left: 50%;
        width: 1.08rem;
        height: 1.08rem;
        box-sizing: border-box;
        border: 2px solid rgb(143 26 28 / 18%);
        border-top-color: var(--pp-color-primary);
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) rotate(0);
    }

    .pp-mobile-nav__item[data-pp-mobile-nav-load] > svg {
        transition: opacity var(--pp-transition-fast);
    }

    .pp-mobile-nav__item[data-pp-mobile-nav-load].is-loading {
        color: var(--pp-color-primary);
        background: rgb(248 238 223 / 76%);
        cursor: wait;
        pointer-events: none;
    }

    .pp-mobile-nav__item[data-pp-mobile-nav-load].is-loading::before {
        opacity: 1;
        animation: pp-mobile-nav-spin 680ms linear infinite;
    }

    .pp-mobile-nav__item[data-pp-mobile-nav-load].is-loading > svg {
        opacity: 0;
    }
}

@keyframes pp-mobile-nav-spin {
    to {
        transform: translateX(-50%) rotate(1turn);
    }
}

@media (max-width: 390px) {
    .pp-mobile-nav {
        right: max(0.35rem, env(safe-area-inset-right));
        left: max(0.35rem, env(safe-area-inset-left));
        bottom: max(0.35rem, env(safe-area-inset-bottom));
    }

    .pp-mobile-nav__surface {
        height: 4rem;
        padding-inline: 0.18rem;
        border-radius: 1.05rem;
    }

    .pp-mobile-nav__item {
        font-size: 0.56rem;
    }

    .pp-mobile-nav__primary-icon {
        width: 2.55rem;
        height: 2.55rem;
        border-radius: 0.85rem;
    }
}