/* ==========================================================================
   PRIDO Header System — Product Mobile Header
   v1.0.0

   Loaded ONLY on single-product pages.
   Active at ≤ 1024 px (tablet + phone).
   ========================================================================== */


/* ==========================================================================
   01. BASE — Hidden on desktop
   ========================================================================== */
.prido-hs-pmh {
    display: none;
}

@media (min-width: 1025px) {
    .prido-hs-pmh {
        display: none !important;
    }
}


/* ==========================================================================
   02. MOBILE / TABLET LAYOUT
   ========================================================================== */
@media (max-width: 1024px) {

    .prido-hs-pmh {
        --prido-dark: var(--prido-theme-ink);
        --prido-muted: var(--prido-theme-muted);
        --prido-border-light: var(--prido-theme-border);
        display: flex;
        align-items: center;
        position: fixed;
        top: var(--prido-wp-adminbar-offset, 0px);
        left: 0;
        right: 0;
        height: 62px;
        z-index: 999999;

        /* Liquid Glass */
        background: var(--hs-mobile-glass-bg);
        -webkit-backdrop-filter: var(--hs-mobile-glass-blur);
        backdrop-filter: var(--hs-mobile-glass-blur);
        border-bottom: none;
        box-shadow: var(--hs-mobile-glass-shadow);
        transform: translateZ(0); /* GPU layer */
    }

    /* CLS prevention: reserve space for the fixed header */
    .prido-hs-product .main-page-wrapper {
        padding-top: 62px !important;
    }

    .prido-hs-pmh__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 14px;
        gap: 8px;
    }

    /* ── Back button ── */
    .prido-hs-pmh__back {
        flex: 0 0 auto;
    }

    /* ── Title ── */
    .prido-hs-pmh__title {
        flex: 1;
        min-width: 0;
        font-family: 'Outfit', sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: var(--prido-dark, #1a2a3a);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        letter-spacing: 0.3px;
    }

    /* ── Tools cluster ── */
    .prido-hs-pmh__tools {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    /* ── Buttons (glass pills) ── */
    .prido-hs-pmh__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border: 1px solid var(--prido-theme-border);
        border-radius: 50%;
        background: var(--prido-theme-chip-fill);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        color: var(--prido-dark, #1a2a3a);
        cursor: pointer;
        padding: 0;
        position: relative;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            var(--prido-theme-shadow-soft);
        transition:
            transform 0.2s ease,
            background 0.2s ease,
            box-shadow 0.2s ease;
        text-decoration: none;
        appearance: none;
        color: var(--prido-dark, #1a2a3a) !important;
    }

    .prido-hs-pmh__btn:active {
        transform: scale(0.9);
        background: var(--prido-theme-chip-fill-hover);
    }

    .prido-hs-pmh__btn svg {
        width: 18px;
        height: 18px;
        pointer-events: none;
        transition: color 0.2s ease;
        display: block !important;
        fill: none !important;
        stroke: currentColor !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .prido-hs-pmh__btn .prido-hs-icon {
        position: relative;
        z-index: 1;
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
    }

    .prido-hs-pmh__btn:active svg {
        color: var(--prido-primary, #5e81a2);
    }

    /* Cart: transparent wrapper, glass on inner */
    .prido-hs-pmh__cart {
        background: var(--prido-theme-chip-fill);
    }

    /* Badge on product header */
    .prido-hs-pmh__cart .prido-hs-tools__badge {
        top: -6px !important;
        right: -6px !important;
    }

    /* ── Convivencia con search overlay ── */
    html.wd-search-opened .prido-hs-pmh {
        z-index: 1 !important;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    /* Ensure search overlay covers full viewport on product pages */
    .single-product [class*="wd-search-full-screen"] {
        top: 0 !important;
    }

    /* ── Convivencia con sticky bottom bar ── */
    .prido-hs-pmh ~ .wd-sticky-btn,
    .prido-hs-pmh ~ .woodmart-sticky-add-to-cart {
        z-index: 999998;
    }
}


/* ==========================================================================
   03. PHONE REFINEMENTS (≤ 768 px)
   ========================================================================== */
@media (max-width: 768px) {
    .prido-hs-pmh {
        height: 54px;
    }

    .prido-hs-product .main-page-wrapper {
        padding-top: 54px !important;
    }

    .prido-hs-pmh__title {
        font-size: 13px;
    }

    .prido-hs-pmh__btn {
        width: 34px;
        height: 34px;
    }

    .prido-hs-pmh__btn svg {
        width: 16px;
        height: 16px;
    }

    .prido-hs-pmh__tools {
        gap: 6px;
    }
}


/* ==========================================================================
   04. ACCESSIBILITY
   ========================================================================== */
.prido-hs-pmh *:focus-visible {
    outline: 2px solid var(--prido-teal, #2dc6c1);
    outline-offset: 2px;
}

.prido-hs-pmh * {
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .prido-hs-pmh * {
        transition-duration: 0.01ms !important;
    }
}