/* ============================================================
   BricoDiscount — Mobile UX Polish
   Applied only on ≤768px (and some ≤480px).
   Does NOT override desktop styles.
   ============================================================ */

/* ── 1. GLOBAL MOBILE FOUNDATIONS ────────────────────────────── */
@media (max-width: 768px) {

    /* Remove tap delay on all interactive elements */
    a, button, [role="button"], input, select, textarea, label {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Smooth momentum scrolling on iOS */
    body {
        -webkit-overflow-scrolling: touch;
    }

    /* Slightly larger base font for readability on small screens */
    body {
        font-size: 15px;
    }

    /* Prevent horizontal overflow */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ── 2. TOP BAR — hide on mobile (wastes 40px) ───────────────── */
@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

/* ── 3. STICKY HEADER — SMART SCROLL BEHAVIOR ──────────────── */
@media (max-width: 768px) {
    .header {
        position: sticky;
        top: 0;
        z-index: 900;
        /*
         * The transform approach keeps the header in the document flow
         * (sticky still works) but slides it out of view.
         * translateY(-100%) moves it exactly one header-height up.
         * JS adds/removes .header--hidden.
         */
        transform: translateY(0);
        transition:
            transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 300ms ease,
            background 300ms ease;
        will-change: transform;
    }

    /* ---- Scroll-down: slide header out of view ---- */
    .header--hidden {
        transform: translateY(-100%);
        /* Keep the shadow transition smooth during hide */
        box-shadow: none !important;
    }

    /* ---- Scroll-up: shadow reinforcement ---- */
    .header--scrolled:not(.header--hidden) {
        box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.18);
    }

    /* Safe area for notched phones in PWA standalone */
    @supports (padding-top: env(safe-area-inset-top)) {
        @media (display-mode: standalone) {
            .header {
                padding-top: env(safe-area-inset-top);
            }
        }
    }
}

/* ── 4. TOUCH FEEDBACK — instant, no delay ───────────────────── */
@media (max-width: 768px) {

    /* All tappable elements — immediate visual response */
    a:active,
    button:active,
    [role="button"]:active,
    .btn:active,
    .header__action-btn:active,
    .mobile-menu__link:active,
    .mobile-menu__sub a:active,
    .product-card:active,
    .department-card:active,
    .footer__links a:active,
    .nav-list__link:active {
        opacity: 0.72;
        transform: scale(0.97);
        transition: opacity 60ms linear, transform 60ms linear;
    }

    /* CTAs get a stronger press feel */
    .btn--primary:active,
    .btn--outline:active {
        transform: scale(0.95);
        opacity: 0.85;
        transition: opacity 60ms linear, transform 60ms linear;
    }

    /* Cards get a subtle sink */
    .product-card:active,
    .department-card:active {
        transform: scale(0.985);
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        transition: transform 80ms linear, box-shadow 80ms linear;
    }

    /* Ripple effect on header action buttons */
    .header__action-btn {
        position: relative;
        overflow: hidden;
    }

    .header__action-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: rgba(0, 0, 0, 0.08);
        opacity: 0;
        transition: opacity 120ms ease;
    }

    .header__action-btn:active::after {
        opacity: 1;
        transition: none;
    }

    [data-theme="dark"] .header__action-btn::after {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* ── 5. MINIMUM TAP TARGETS (44px) ──────────────────────────── */
@media (max-width: 768px) {
    .header__action-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header__mobile-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    .mobile-menu__link {
        min-height: 52px;
        display: flex;
        align-items: center;
    }

    .mobile-menu__sub a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .footer__links a {
        min-height: 40px;
        display: flex;
        align-items: center;
    }
}

/* ── 6. HERO SECTION — mobile spacing + readability ─────────── */
@media (max-width: 768px) {
    .hero {
        min-height: 88vh;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .hero__title {
        font-size: clamp(1.9rem, 7.5vw, 2.8rem);
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .hero__subtitle {
        font-size: 0.95rem;
        line-height: 1.65;
        max-width: 100%;
    }

    .hero__actions {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
        font-size: 0.95rem;
        padding: 0.875rem 1.5rem;
    }

    .hero__stats {
        gap: 1.5rem;
    }

    .hero__badge {
        font-size: 0.72rem;
        padding: 0.35rem 0.85rem;
    }
}

/* ── 7. SECTION SPACING — breathable on mobile ───────────────── */
@media (max-width: 768px) {
    section,
    .departments,
    .featured-products,
    .bulk-supply,
    .why-choose,
    .cta-banner {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .section-header {
        margin-bottom: 1.5rem;
    }

    .section-header h2 {
        font-size: clamp(1.4rem, 5.5vw, 2rem);
    }

    .section-header p {
        font-size: 0.9rem;
    }
}

/* ── 8. PRODUCT GRID — 2 columns on mobile ───────────────────── */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .product-card {
        border-radius: 12px;
    }

    .product-card__name {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .product-card__price {
        font-size: 0.9rem;
    }

    .product-card__image-wrap {
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 380px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
}

/* ── 9. DEPARTMENTS GRID — 2 columns on mobile ───────────────── */
@media (max-width: 768px) {
    .departments__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .department-card {
        border-radius: 12px;
    }
}

/* ── 10. CTA BUTTONS — full width on mobile ──────────────────── */
@media (max-width: 480px) {
    .cta-banner__actions {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .cta-banner__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── 11. FOOTER — stacked on mobile ─────────────────────────── */
@media (max-width: 768px) {
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer__col--brand {
        text-align: center;
    }

    .footer__social {
        justify-content: center;
    }

    .footer__bottom-inner {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .footer__bottom-links {
        justify-content: center;
    }
}

/* ── 12. MOBILE DRAWER POLISH ────────────────────────────────── */
@media (max-width: 768px) {
    /* Slightly larger text in drawer */
    .mobile-menu__link {
        font-size: 1rem;
        font-weight: 500;
        padding: 0.875rem 1.5rem;
        letter-spacing: -0.01em;
    }

    .mobile-menu__sub a {
        font-size: 0.9rem;
        padding: 0.625rem 1.5rem 0.625rem 3rem;
    }

    /* Smooth spring-like drawer animation */
    .mobile-menu {
        transform: translateX(-100%);
        transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0ms linear 280ms;
    }

    .mobile-menu.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0ms linear 0ms;
    }
}

/* ── 13. BOTTOM SAFE AREA — PWA home indicator clearance ──────── */
@media (max-width: 768px) {
    .footer__bottom {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ── 14. SKELETON LOADERS ────────────────────────────────────── */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-soft, #EEEEF0);
    border-radius: 8px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

[data-theme="dark"] .skeleton {
    background: #2d2d35;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.5) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: skeletonShimmer 1.4s ease-in-out infinite;
}

[data-theme="dark"] .skeleton::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.06) 50%,
        transparent 100%
    );
}

@keyframes skeletonShimmer {
    to { transform: translateX(100%); }
}

/* Product card skeleton */
.product-card--skeleton .product-card__image-wrap {
    background: var(--color-bg-soft, #EEEEF0);
}

[data-theme="dark"] .product-card--skeleton .product-card__image-wrap {
    background: #2d2d35;
}

.product-card--skeleton .product-card__name,
.product-card--skeleton .product-card__price {
    border-radius: 4px;
    height: 1em;
    display: block;
}

/* ── 15. PAGE TRANSITION — no white flash ────────────────────── */
html {
    background: var(--color-bg-main, #F5F5F7);
}

[data-theme="dark"] html {
    background: var(--color-bg-main, #0f0f14);
}

.main-content {
    animation: mobilePageIn 180ms ease-out both;
}

@keyframes mobilePageIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .main-content {
        animation: none;
    }

    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ── 16. SCROLL PERFORMANCE ──────────────────────────────────── */
@media (max-width: 768px) {
    /* GPU-accelerate fixed/sticky elements */
    .header,
    .mobile-menu-overlay,
    #bd-page-bar,
    #bd-install-banner {
        will-change: transform;
        transform: translateZ(0);
    }

    /* mobile-menu uses its own transform for slide-in — do NOT override with translateZ(0) */
    .mobile-menu {
        will-change: transform;
    }

    /* Contain layout repaints to cards */
    .product-card,
    .department-card {
        contain: layout style;
    }
}

/* ── 17. FORM INPUTS — mobile optimized ──────────────────────── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 48px;
        border-radius: 10px;
    }

    /* Search input in header */
    .search-expand__input {
        font-size: 16px;
    }
}

/* ── 18. VISUAL HIERARCHY IMPROVEMENTS ───────────────────────── */
@media (max-width: 768px) {

    /* Stronger section separation */
    .departments + .featured-products,
    .featured-products + .bulk-supply,
    .bulk-supply + .why-choose,
    .why-choose + .cta-banner {
        border-top: 1px solid var(--color-light-gray, #D8D8DE);
    }

    [data-theme="dark"] .departments + .featured-products,
    [data-theme="dark"] .featured-products + .bulk-supply,
    [data-theme="dark"] .bulk-supply + .why-choose,
    [data-theme="dark"] .why-choose + .cta-banner {
        border-top-color: rgba(255,255,255,0.06);
    }

    /* Card elevation */
    .product-card,
    .department-card {
        box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    }

    [data-theme="dark"] .product-card,
    [data-theme="dark"] .department-card {
        box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.04);
    }
}

/* ── 19. CART COUNT BADGE ────────────────────────────────────── */
@media (max-width: 768px) {
    .cart-count {
        min-width: 18px;
        height: 18px;
        font-size: 0.65rem;
        top: 4px;
        right: 4px;
    }
}

/* ── 20. STANDALONE PWA — hide browser chrome artifacts ──────── */
@media (display-mode: standalone) {
    /* No top bar needed — device status bar takes that space */
    .top-bar {
        display: none;
    }

    /* Extra top padding for notched devices */
    .header {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Bottom clearance for home indicator */
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ── 21. OPTIMISTIC CART BADGE — instant feedback ────────────── */

/* Cart count badge pulse — triggered by JS adding .cart-count--bump */
@keyframes cartBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45); }
    70%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}

.cart-count--bump {
    animation: cartBump 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Add-to-cart button success flash */
@keyframes btnSuccess {
    0%   { background: var(--color-primary, #8B1A2B); }
    40%  { background: #1a7a4a; }
    100% { background: var(--color-primary, #8B1A2B); }
}

.btn--add-cart-success {
    animation: btnSuccess 700ms ease forwards;
}

/* ── 22. PRODUCT SKELETON LOADERS ────────────────────────────── */

/* Grid of skeleton cards — shown while products load */
.products-grid--loading .product-card,
.product-card--skeleton {
    pointer-events: none;
    user-select: none;
}

/* Skeleton image placeholder */
.product-card--skeleton .product-card__image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-soft, #EEEEF0);
    border-radius: 8px;
}

[data-theme="dark"] .product-card--skeleton .product-card__image-wrap {
    background: #2a2a35;
}

.product-card--skeleton .product-card__image-wrap::after,
.product-card--skeleton .product-card__name::after,
.product-card--skeleton .product-card__price::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.55) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: skeletonShimmer 1.4s ease-in-out infinite;
}

[data-theme="dark"] .product-card--skeleton .product-card__image-wrap::after,
[data-theme="dark"] .product-card--skeleton .product-card__name::after,
[data-theme="dark"] .product-card--skeleton .product-card__price::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.07) 50%,
        transparent 100%
    );
}

/* Skeleton text lines */
.product-card--skeleton .product-card__name,
.product-card--skeleton .product-card__price {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-soft, #EEEEF0);
    border-radius: 4px;
    color: transparent;
    min-height: 1em;
    display: block;
}

[data-theme="dark"] .product-card--skeleton .product-card__name,
[data-theme="dark"] .product-card--skeleton .product-card__price {
    background: #2a2a35;
}

.product-card--skeleton .product-card__name {
    width: 80%;
    margin-bottom: 0.4rem;
}

.product-card--skeleton .product-card__price {
    width: 45%;
}

/* ── 23. PERCEIVED PERFORMANCE — link preload hover ──────────── */
@media (max-width: 768px) {
    /*
     * visually indicate "this will be fast" by showing
     * a subtle active state when finger touches a nav link
     */
    .mobile-menu__link:active,
    .mobile-menu__sub a:active {
        background: rgba(139, 26, 43, 0.07);
        transition: background 60ms ease;
    }

    [data-theme="dark"] .mobile-menu__link:active,
    [data-theme="dark"] .mobile-menu__sub a:active {
        background: rgba(255, 255, 255, 0.05);
    }
}