/* 
 * Distribuciones H y H - Mobile-First App Catalog
 * Optimized for sales reps using as mobile catalog
 */

html { scroll-behavior: smooth; }

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --nav-height: 50px;
    --bottom-nav-height: 64px;
}

/* ========================================
   GLOBAL MOBILE-FIRST
   ======================================== */
* { -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Inter', sans-serif;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4, .serif-font, .font-serif { font-family: 'League Spartan', sans-serif; }

/* Slide transitions */
.slide-item { pointer-events: none; }
.slide-item[style*="opacity: 1"],
.slide-item[data-active="true"] { pointer-events: auto; }

/* ========================================
   APP-STYLE BOTTOM NAVIGATION
   ======================================== */
.app-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    padding: 4px 0 calc(4px + var(--safe-bottom));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
}

.app-bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 8px;
}

.app-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 14px;
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    min-width: 56px;
}

.app-nav-item span.material-symbols-outlined {
    font-size: 24px;
    color: #73796c;
    transition: all 0.25s ease;
}

.app-nav-item .nav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #73796c;
    transition: color 0.25s ease;
}

.app-nav-item.active {
    background: rgba(148, 22, 26, 0.08);
}
.app-nav-item.active span.material-symbols-outlined {
    color: #94161A;
    font-variation-settings: 'FILL' 1;
}
.app-nav-item.active .nav-label { 
    color: #94161A;
    font-weight: 700;
}

.app-nav-item:active { transform: scale(0.9); }

/* ========================================
   MOBILE APP HEADER
   ======================================== */
@media (max-width: 768px) {
    .app-bottom-nav { display: block; }
    
    main { 
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 8px);
    }
    
    footer { 
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 8px);
    }
    
    /* Compact header on mobile */
    #main-header {
        padding: 0 !important;
    }
    
    #main-header > div {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    
    #main-header img {
        height: 36px !important;
    }
}

/* ========================================
   MOBILE PRODUCT CATALOG (App Style)
   ======================================== */

/* Category pills - legacy (kept for compatibility) */
.category-pills {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 12px 16px;
    scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }

.category-pill {
    scroll-snap-align: start;
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border: 1.5px solid #e5e7eb;
    color: #4b5563;
    background: white;
    transition: all 0.2s ease;
    cursor: pointer;
}

.category-pill.active,
.category-pill:active {
    background: #94161A;
    color: white;
    border-color: #94161A;
    box-shadow: 0 4px 12px rgba(148, 22, 26, 0.25);
}

/* Product card touch feedback */
.product-card:active {
    transform: scale(0.98);
}

/* ========================================
   MOBILE SEARCH BAR (App Style)
   ======================================== */
.catalog-header-bar {
    position: sticky;
    top: var(--nav-height);
    z-index: 40;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 12px 16px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
    .catalog-header-bar {
        top: 88px;
        padding: 14px 24px 10px;
    }
}

.catalog-header-inner {
    max-width: 560px;
}

.catalog-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.catalog-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.catalog-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #94161A;
    opacity: 0.7;
    pointer-events: none;
}

.catalog-search-input {
    width: 100%;
    padding: 12px 42px 12px 44px;
    border-radius: 14px;
    border: 1.5px solid #e5e7eb;
    background: #fafafa;
    font-size: 14px;
    font-weight: 500;
    color: #1a1c1c;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-appearance: none;
}

.catalog-search-input:focus {
    outline: none;
    background: white;
    border-color: #94161A;
    box-shadow: 0 2px 12px rgba(148, 22, 26, 0.08);
}

.catalog-search-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.catalog-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.catalog-search-clear:hover {
    background: #94161A;
    color: white;
}

.catalog-search-clear span {
    font-size: 16px;
}

.catalog-sort-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fafafa;
    border: 1.5px solid #e5e7eb;
    color: #4b5563;
    flex-shrink: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.catalog-sort-btn:hover,
.catalog-sort-btn:focus-within {
    background: rgba(148, 22, 26, 0.06);
    border-color: #94161A;
    color: #94161A;
}

.catalog-sort-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 14px;
}

.catalog-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 2px;
    max-width: 560px;
}

.catalog-result-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.catalog-result-count .material-symbols-outlined {
    color: #94161A;
    opacity: 0.6;
}

.catalog-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #94161A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(148, 22, 26, 0.06);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.catalog-clear-all:hover {
    background: rgba(148, 22, 26, 0.12);
}

/* ========================================
   CATEGORY NAVIGATION (Improved)
   ======================================== */
.catalog-categories {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 10px 16px 12px;
    background: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    scrollbar-width: none;
}

.catalog-categories::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .catalog-categories {
        padding: 12px 24px 14px;
        gap: 10px;
    }
}

.catalog-cat-chip {
    scroll-snap-align: start;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    background: white;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.catalog-cat-chip .cat-icon {
    font-size: 18px;
    opacity: 0.6;
    transition: all 0.25s ease;
}

.catalog-cat-chip .cat-label {
    font-size: 13px;
}

.catalog-cat-chip .cat-count {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #6b7280;
    transition: all 0.25s ease;
}

.catalog-cat-chip:active {
    transform: scale(0.95);
}

.catalog-cat-chip.active {
    background: #94161A;
    border-color: #94161A;
    color: white;
    box-shadow: 0 4px 14px rgba(148, 22, 26, 0.25), 0 2px 6px rgba(148, 22, 26, 0.15);
}

.catalog-cat-chip.active .cat-icon {
    opacity: 1;
    color: white;
    font-variation-settings: 'FILL' 1;
}

.catalog-cat-chip.active .cat-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.catalog-cat-chip:not(.active):hover {
    border-color: #94161A;
    color: #94161A;
    background: rgba(148, 22, 26, 0.03);
}

.catalog-cat-chip:not(.active):hover .cat-icon {
    color: #94161A;
    opacity: 0.8;
}

/* Subcategories bar */
.catalog-subcategories {
    background: #fafafa;
    padding: 8px 16px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.catalog-sub-scroll {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.catalog-sub-scroll::-webkit-scrollbar { display: none; }

.catalog-sub-chip {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1.5px solid #e5e7eb;
    color: #6b7280;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.catalog-sub-chip .sub-count {
    font-size: 10px;
    opacity: 0.6;
    margin-left: 3px;
}

.catalog-sub-chip.active {
    background: #2D5016;
    border-color: #2D5016;
    color: white;
    box-shadow: 0 2px 8px rgba(45, 80, 22, 0.2);
}

.catalog-sub-chip:not(.active):hover {
    border-color: #2D5016;
    color: #2D5016;
}

.catalog-sub-chip:active {
    transform: scale(0.95);
}

/* ========================================
   PRODUCT MODAL - handled inline in modal PHP
   ======================================== */

/* ========================================
   MOBILE FILTER DRAWER IMPROVEMENTS
   ======================================== */
@media (max-width: 768px) {
    #mobileFilterPanel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0;
    }
    
    #mobileFilterPanel .filter-group-toggle-mobile {
        padding: 14px 12px;
    }
    
    #mobileFilterPanel label {
        padding: 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ========================================
   TOUCH-FRIENDLY ELEMENTS
   ======================================== */
@media (max-width: 768px) {
    /* Better spacing for mobile sections */
    section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ========================================
   HORIZONTAL SCROLL SECTIONS
   ======================================== */
.mobile-scroll-x {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
    scrollbar-width: none;
}
.mobile-scroll-x::-webkit-scrollbar { display: none; }
.mobile-scroll-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .mobile-scroll-x {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }
    .mobile-scroll-x > * {
        flex-shrink: unset;
    }
}

/* ========================================
   Samsung-Style Scroll Animations
   ======================================== */
[data-animate] {
    opacity: 0;
    will-change: transform, opacity;
}

[data-animate].is-visible {
    opacity: 1;
    transform: none !important;
    filter: none !important;
}

[data-animate="reveal-up"] {
    transform: translateY(120px);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="reveal-short"] {
    transform: translateY(60px);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="reveal-left"] {
    transform: translateX(-80px);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="reveal-right"] {
    transform: translateX(80px);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="scale-reveal"] {
    transform: scale(0.92) translateY(40px);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="blur-reveal"] {
    transform: translateY(50px);
    filter: blur(8px);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade"] {
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-stagger] > [data-animate]:nth-child(1) { transition-delay: 0s; }
[data-stagger] > [data-animate]:nth-child(2) { transition-delay: 0.15s; }
[data-stagger] > [data-animate]:nth-child(3) { transition-delay: 0.3s; }
[data-stagger] > [data-animate]:nth-child(4) { transition-delay: 0.45s; }

[data-parallax] {
    will-change: transform;
    transition: transform 0.05s linear;
}

.count-up {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ========================================
   CATALOG PAGE SPECIFIC STYLES
   ======================================== */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom checkbox */
.custom-check {
    width: 20px; height: 20px; border-radius: 6px;
    border: 2px solid #d1d5db; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.filter-checkbox:checked + .custom-check {
    background: #94161A; border-color: #94161A;
}
.filter-checkbox:checked + .custom-check::after {
    content: ''; width: 10px; height: 6px;
    border-left: 2px solid white; border-bottom: 2px solid white;
    transform: rotate(-45deg) translateY(-1px);
}

/* Filter group expanded */
.filter-group-toggle[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); }
.filter-group-toggle-mobile.expanded .chevron-icon-mobile { transform: rotate(180deg); }

/* Active chip */
.filter-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px 6px 14px; border-radius: 20px;
    background: rgba(148,22,26,0.08); color: #94161A;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    transition: all 0.2s ease;
}
.filter-chip:hover { background: rgba(148,22,26,0.15); }
.filter-chip button {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(148,22,26,0.15); transition: background 0.2s;
}
.filter-chip button:hover { background: rgba(148,22,26,0.3); }
.filter-chip button span { font-size: 12px; }

/* List view */
#productosGrid.list-view { grid-template-columns: 1fr !important; gap: 0.75rem; }
#productosGrid.list-view .product-card { flex-direction: row; max-height: 160px; }
#productosGrid.list-view .product-card > div:first-child { width: 160px; min-width: 160px; height: 100%; }
#productosGrid.list-view .product-card .line-clamp-2 { -webkit-line-clamp: 1; }
@media (max-width: 640px) {
    #productosGrid.list-view .product-card { flex-direction: column; max-height: none; }
    #productosGrid.list-view .product-card > div:first-child { width: 100%; min-width: 100%; height: 140px; }
}

/* Sidebar scrollbar */
#sidebarFilters::-webkit-scrollbar { width: 4px; }
#sidebarFilters::-webkit-scrollbar-track { background: transparent; }
#sidebarFilters::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
#sidebarFilters::-webkit-scrollbar-thumb:hover { background: #94161A; }

/* Product card animation */
.product-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.product-card.filter-hidden { opacity: 0; transform: scale(0.95); pointer-events: none; position: absolute; }

/* Mobile filter transition */
#mobileFilterPanel.open { transform: translateX(0) !important; }

/* ========================================
   MOBILE PRODUCT GRID OPTIMIZATIONS
   ======================================== */
@media (max-width: 768px) {
    /* 2-column grid on mobile with proper spacing */
    #productosGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* Cards get full content visibility */
    #productosGrid .product-card {
        border-radius: 16px;
    }
}

@media (max-width: 380px) {
    #productosGrid {
        gap: 8px !important;
    }
}

/* ========================================
   MOBILE HERO SECTIONS
   ======================================== */
@media (max-width: 768px) {
    /* Smaller heroes on mobile */
    .relative.h-screen {
        height: 85vh;
    }
    
    .relative.h-screen h1 {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }
    
    .relative.h-screen p {
        font-size: 14px !important;
    }
    
    /* Hero buttons */
    .relative.h-screen a {
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   MOBILE SERVICE CARDS
   ======================================== */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        gap: 16px !important;
    }
    
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > div {
        padding: 16px !important;
        border-radius: 16px !important;
    }
    
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > div .aspect-square {
        aspect-ratio: 16/9;
        border-radius: 12px;
    }
}

/* ========================================
   Professional Footer Styles
   ======================================== */
.footer-pro {
    position: relative;
    background: #1a1a1a;
    color: #fff;
}

.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
    white-space: nowrap;
    text-decoration: none;
}

.footer-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
    background: #20bd5a;
}

.footer-cta-btn:active { transform: translateY(0); }

.footer-main {
    position: relative;
    padding: 4rem 0 3rem;
}

.footer-col { position: relative; }

.footer-heading {
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #94161A;
    display: inline-block;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-social-link:hover {
    background: #94161A;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(148, 22, 26, 0.4);
}

.footer-sede-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.footer-sede-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(148, 22, 26, 0.2);
    border: 1px solid rgba(148, 22, 26, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b6b;
    margin-top: 2px;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.25rem 0;
}

.footer-link:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-link-arrow {
    font-size: 0.75rem;
    opacity: 0;
    margin-left: -10px;
    transition: all 0.2s ease;
    color: #94161A;
}

.footer-link:hover .footer-link-arrow {
    opacity: 1;
    margin-left: 0;
    color: #ff6b6b;
}

.footer-schedule {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-schedule-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.875rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
}

.footer-contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-link:hover { color: #fff; }

.footer-bottom {
    position: relative;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .footer-main { padding: 2.5rem 0 2rem; }
    .footer-bottom { text-align: center; }
    .footer-bottom .flex { flex-wrap: wrap; justify-content: center; }
}

/* ========================================
   WhatsApp floating - adjusted for bottom nav
   ======================================== */
@media (max-width: 768px) {
    #whatsappWidget {
        bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 16px) !important;
    }
}

/* ========================================
   Reduce motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ========================================
   Print
   ======================================== */
@media print {
    .top-bar, header, footer, .app-bottom-nav { display: none; }
    main { padding: 0; }
    [data-animate] { opacity: 1; transform: none; }
}