/* ═══════════════════════════════════════════════════════
   HORSE DETAIL — MOBILE PREMIUM EXPERIENCE
   Awwwards-level mobile UX for single horse pages
   Only affects screens < 1024px (lg breakpoint)
   ═══════════════════════════════════════════════════════ */

/* ── SCROLL PROGRESS BAR (both mobile & desktop) ── */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #D4AF37, #f5d780, #D4AF37);
    background-size: 200% 100%;
    animation: shimmer-bar 2s linear infinite;
    z-index: 99999;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.6), 0 0 4px rgba(212, 175, 55, 0.3);
}

@keyframes shimmer-bar {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

    /* ── HERO GALLERY ── */
    .horse-mobile-hero {
        position: relative;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-top: 0;
        padding-top: 70px;
        overflow: hidden;
    }

    .horse-mobile-hero .gallery-track {
        display: flex;
        transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
        touch-action: pan-y;
    }

    .horse-mobile-hero .gallery-slide {
        min-width: 100%;
        position: relative;
    }

    .horse-mobile-hero .gallery-slide img {
        width: 100%;
        height: 72vh;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease, opacity 0.4s ease;
    }

    /* Gradient overlays */
    .horse-mobile-hero .hero-gradient-top {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 140px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
        z-index: 10;
        pointer-events: none;
    }

    .horse-mobile-hero .hero-gradient-bottom {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 220px;
        background: linear-gradient(to top, rgba(253,252,251,1) 0%, rgba(253,252,251,0.85) 35%, transparent 100%);
        z-index: 10;
        pointer-events: none;
    }

    /* ── INSTAGRAM STORIES PROGRESS BARS ── */
    .gallery-progress-bars {
        position: absolute;
        top: 78px;
        left: 14px;
        right: 14px;
        z-index: 25;
        display: flex;
        gap: 5px;
    }

    .progress-bar-track {
        flex: 1;
        height: 3px;
        background: rgba(255,255,255,0.3);
        border-radius: 3px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }

    .progress-bar-fill {
        height: 100%;
        border-radius: 3px;
        background: white;
        box-shadow: 0 0 6px rgba(255,255,255,0.5);
    }

    .progress-bar-fill.filled { width: 100%; }
    .progress-bar-fill.active { animation: progress-fill 5s linear forwards; }
    .progress-bar-fill.empty { width: 0%; }

    /* ── DOUBLE-TAP TO SAVE ── */
    .gallery-doubletap-zone {
        position: absolute;
        inset: 60px 0 100px 0;
        z-index: 15;
    }

    .doubletap-heart {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        z-index: 30;
        pointer-events: none;
        opacity: 0;
        filter: drop-shadow(0 8px 30px rgba(0,0,0,0.4));
    }

    .doubletap-heart.show {
        animation: heart-pop 0.9s cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards;
    }

    /* ── RIPPLE EFFECT ── */
    .ripple-btn {
        position: relative;
        overflow: hidden;
    }

    .ripple-btn .ripple-circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255,255,255,0.4);
        transform: scale(0);
        animation: ripple-expand 0.6s ease-out forwards;
        pointer-events: none;
    }

    /* ── SCROLL DOWN INDICATOR (bouncing arrow) ── */
    .scroll-down-hint {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        animation: bounce-hint 2s ease-in-out infinite;
        opacity: 0.7;
    }

    .scroll-down-hint span {
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: #71717a;
        font-weight: 700;
    }

    .scroll-down-hint svg {
        color: #a1a1aa;
    }

    /* Dots hidden when progress bars exist */
    .gallery-dots { display: none; }

    /* Floating action buttons on hero */
    .hero-floating-actions {
        position: absolute;
        top: 90px;
        right: 16px;
        z-index: 20;
        display: flex;
        gap: 8px;
    }

    .hero-float-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(0,0,0,0.25);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255,255,255,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .hero-float-btn:active {
        transform: scale(0.85);
        background: rgba(255,255,255,0.3);
    }

    .hero-float-btn.saved {
        background: rgba(212, 175, 55, 0.9);
        border-color: rgba(212, 175, 55, 0.9);
        animation: save-pulse 0.4s ease;
    }

    /* Category badge */
    .hero-category-badge {
        position: absolute;
        top: 90px;
        left: 16px;
        z-index: 20;
        padding: 7px 16px;
        background: rgba(0,0,0,0.3);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 100px;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        font-weight: 700;
        color: white;
    }

    /* Counter badge */
    .hero-counter-badge {
        position: absolute;
        bottom: 90px;
        right: 16px;
        z-index: 20;
        padding: 5px 12px;
        background: rgba(0,0,0,0.5);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 100px;
        font-size: 10px;
        font-family: 'Manrope', monospace;
        color: white;
        font-weight: 500;
    }

    /* ══════════════════════════════════════
       MOBILE INFO SECTION
       ══════════════════════════════════════ */
    .horse-mobile-info {
        padding: 0 20px;
        margin-top: -40px;
        position: relative;
        z-index: 30;
    }

    .horse-mobile-info .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        font-weight: 700;
        color: #71717a;
        margin-bottom: 8px;
    }

    .horse-mobile-info .status-badge .pulse-dot {
        position: relative;
        width: 7px;
        height: 7px;
    }

    .horse-mobile-info .status-badge .pulse-dot::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: #10b981;
        animation: pulse-glow 2s ease-in-out infinite;
    }

    .horse-mobile-info .status-badge .pulse-dot::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: rgba(16, 185, 129, 0.3);
        animation: pulse-ring 2s ease-in-out infinite;
    }

    /* Name with clip-path reveal */
    .horse-mobile-info .horse-name-mobile {
        font-family: 'Playfair Display', serif;
        font-size: clamp(2.2rem, 10vw, 3.5rem);
        line-height: 0.92;
        letter-spacing: -0.02em;
        color: #18181b;
        margin-bottom: 16px;
        animation: name-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
    }

    .horse-mobile-info .price-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
        flex-wrap: wrap;
    }

    .horse-mobile-info .price-pill {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 10px 22px;
        background: white;
        border: 1px solid #e4e4e7;
        border-radius: 100px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        animation: pill-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
    }

    .horse-mobile-info .price-pill .price-label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #a1a1aa;
        font-weight: 600;
        white-space: nowrap;
    }

    .horse-mobile-info .price-pill .price-value {
        font-family: 'Playfair Display', serif;
        font-size: 1.15rem;
        color: #18181b;
        white-space: nowrap;
    }

    .horse-mobile-info .ref-tag {
        font-size: 9px;
        font-family: 'Manrope', monospace;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #a1a1aa;
        font-weight: 500;
        background: #f4f4f5;
        padding: 4px 10px;
        border-radius: 6px;
        animation: pill-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
    }

    /* ══════════════════════════════════════
       FEATURE TAGS WITH STAGGER BOUNCE
       ══════════════════════════════════════ */
    .mobile-feature-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 20px 12px;
    }

    .mobile-feature-tags .feature-tag {
        padding: 5px 12px;
        background: var(--color-gold, #D4AF37);
        color: white;
        border-radius: 100px;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
        animation: tag-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .mobile-feature-tags .feature-tag:nth-child(1) { animation-delay: 0.35s; }
    .mobile-feature-tags .feature-tag:nth-child(2) { animation-delay: 0.42s; }
    .mobile-feature-tags .feature-tag:nth-child(3) { animation-delay: 0.49s; }
    .mobile-feature-tags .feature-tag:nth-child(4) { animation-delay: 0.56s; }
    .mobile-feature-tags .feature-tag:nth-child(5) { animation-delay: 0.63s; }
    .mobile-feature-tags .feature-tag:nth-child(6) { animation-delay: 0.7s; }

    /* ══════════════════════════════════════
       QUICK SPECS — CASCADE FROM LEFT
       ══════════════════════════════════════ */
    .horse-mobile-specs {
        padding: 20px 0 0 0;
        margin: 16px 0;
    }

    .horse-mobile-specs .specs-scroll {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 20px 16px 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .horse-mobile-specs .specs-scroll::-webkit-scrollbar { display: none; }

    .horse-mobile-specs .spec-card {
        flex-shrink: 0;
        scroll-snap-align: start;
        background: white;
        border: 1px solid #f4f4f5;
        border-radius: 20px;
        padding: 16px 20px;
        min-width: 130px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02);
        animation: spec-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .horse-mobile-specs .spec-card:nth-child(1) { animation-delay: 0.5s; }
    .horse-mobile-specs .spec-card:nth-child(2) { animation-delay: 0.6s; }
    .horse-mobile-specs .spec-card:nth-child(3) { animation-delay: 0.7s; }
    .horse-mobile-specs .spec-card:nth-child(4) { animation-delay: 0.8s; }
    .horse-mobile-specs .spec-card:nth-child(5) { animation-delay: 0.9s; }
    .horse-mobile-specs .spec-card:nth-child(6) { animation-delay: 1.0s; }
    .horse-mobile-specs .spec-card:nth-child(7) { animation-delay: 1.1s; }

    .horse-mobile-specs .spec-card:active {
        transform: scale(0.95);
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }

    .horse-mobile-specs .spec-card .spec-label {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #a1a1aa;
        font-weight: 700;
    }

    .horse-mobile-specs .spec-card .spec-value {
        font-family: 'Playfair Display', serif;
        font-size: 1.1rem;
        color: #18181b;
        white-space: nowrap;
    }

    .horse-mobile-specs .spec-card.highlight {
        background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
        border-color: #bbf7d0;
    }

    .horse-mobile-specs .spec-card.highlight .spec-value {
        color: #059669;
    }

    /* ══════════════════════════════════════
       SECTION DIVIDERS
       ══════════════════════════════════════ */
    .mobile-section-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 20px 20px;
    }

    .mobile-section-divider .divider-line {
        width: 24px;
        height: 1.5px;
        background: var(--color-gold, #D4AF37);
        border-radius: 1px;
    }

    .mobile-section-divider .divider-text {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: #a1a1aa;
        font-weight: 700;
    }

    /* ══════════════════════════════════════
       ACTION BUTTONS
       ══════════════════════════════════════ */
    .horse-mobile-actions {
        display: flex;
        gap: 10px;
        padding: 0 20px 20px;
    }

    .horse-mobile-actions .action-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px;
        border-radius: 16px;
        border: 1.5px solid #e4e4e7;
        background: white;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: #52525b;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    .horse-mobile-actions .action-btn:active {
        transform: scale(0.94);
        background: #f4f4f5;
    }

    .horse-mobile-actions .action-btn.saved {
        background: var(--color-gold, #D4AF37);
        color: white;
        border-color: var(--color-gold, #D4AF37);
        box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
    }

    /* ══════════════════════════════════════
       TABS & CONTACT WRAPPERS
       ══════════════════════════════════════ */
    .horse-mobile-tabs-wrapper {
        padding: 0 20px;
    }

    /* Tabs nav: wrap into grid instead of horizontal scroll */
    .horse-tabs-nav {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        overflow: visible !important;
        border-radius: 20px;
        padding: 6px;
    }

    .horse-tabs-nav .horse-tab-btn {
        flex-shrink: unset;
        text-align: center;
        padding: 10px 8px;
        font-size: 10px;
        letter-spacing: 0.08em;
        border-radius: 14px;
        white-space: nowrap;
    }

    .horse-mobile-contact {
        padding: 0 20px 120px;
    }

    /* ══════════════════════════════════════
       STICKY BOTTOM CTA BAR — FLOATING ISLAND
       ══════════════════════════════════════ */
    .horse-sticky-cta {
        position: fixed;
        bottom: 16px;
        left: 12px;
        right: 12px;
        z-index: 9999;
        padding: 10px 12px;
        padding-bottom: max(10px, calc(env(safe-area-inset-bottom) - 6px));
        background: rgba(24, 24, 27, 0.88);
        -webkit-backdrop-filter: blur(40px) saturate(180%);
        backdrop-filter: blur(40px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        display: flex;
        gap: 10px;
        align-items: center;
        box-shadow:
            0 8px 40px rgba(0, 0, 0, 0.25),
            0 2px 12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        transform: translateY(140%);
        opacity: 0;
        transition:
            transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.4s ease;
    }

    .horse-sticky-cta.visible {
        transform: translateY(0);
        opacity: 1;
    }

    /* Subtle shimmer border animation */
    .horse-sticky-cta::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 23px;
        padding: 1px;
        background: linear-gradient(
            135deg,
            rgba(212, 175, 55, 0) 0%,
            rgba(212, 175, 55, 0.3) 30%,
            rgba(212, 175, 55, 0) 60%,
            rgba(212, 175, 55, 0.15) 100%
        );
        background-size: 300% 300%;
        animation: cta-border-shimmer 4s ease infinite;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: -1;
    }

    .horse-sticky-cta .cta-horse-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding-left: 4px;
    }

    .horse-sticky-cta .cta-horse-name {
        font-family: 'Playfair Display', serif;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

    .horse-sticky-cta .cta-horse-price {
        font-size: 11px;
        color: rgba(212, 175, 55, 0.9);
        font-weight: 700;
        letter-spacing: 0.04em;
        font-family: 'Manrope', sans-serif;
    }

    .horse-sticky-cta .cta-inquiry {
        padding: 12px 20px;
        background: linear-gradient(135deg, #D4AF37 0%, #c5a028 100%);
        color: #18181b;
        border: none;
        border-radius: 14px;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
    }

    .horse-sticky-cta .cta-inquiry:active {
        transform: scale(0.93);
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
    }

    .horse-sticky-cta .cta-whatsapp {
        width: 46px;
        height: 46px;
        flex-shrink: 0;
        background: #25D366;
        border: none;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    .horse-sticky-cta .cta-whatsapp:active {
        transform: scale(0.88);
        box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
    }

} /* END @media max-width: 1023px */


/* ═══════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════ */

@keyframes pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes pulse-ring {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0; transform: scale(2.5); }
}

@keyframes mobile-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mobile-scale-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes name-reveal {
    from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes pill-pop {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes tag-bounce {
    0% { opacity: 0; transform: scale(0.3) translateY(10px); }
    60% { opacity: 1; transform: scale(1.1) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes spec-card-in {
    from { opacity: 0; transform: translateX(-30px) scale(0.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes progress-fill {
    from { width: 0%; }
    to { width: 100%; }
}

@keyframes heart-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
    30% { transform: translate(-50%, -50%) scale(0.9); }
    50% { transform: translate(-50%, -50%) scale(1.15); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes ripple-expand {
    to { transform: scale(4); opacity: 0; }
}

@keyframes save-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@keyframes bounce-hint {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 0.8; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes cta-border-shimmer {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* ═══════════════════════════════════════════════════════
   CSS-ONLY STAGGER REVEAL
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

    .mobile-reveal {
        animation: mobile-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .mr-d1 { animation-delay: 0.1s; }
    .mr-d2 { animation-delay: 0.18s; }
    .mr-d3 { animation-delay: 0.26s; }
    .mr-d4 { animation-delay: 0.34s; }
    .mr-d5 { animation-delay: 0.42s; }
    .mr-d6 { animation-delay: 0.5s; }

    .hero-image-reveal {
        animation: mobile-scale-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Scroll hint gradient */
    .scroll-hint::after {
        content: '';
        position: absolute;
        top: 0; right: 0;
        width: 60px;
        height: 100%;
        background: linear-gradient(to left, rgba(253,252,251,1), transparent);
        pointer-events: none;
        z-index: 5;
    }

    button, a, [role="button"] {
        -webkit-tap-highlight-color: transparent;
    }

}

/* ═══════════════════════════════════════════════════════
   SCROLLBAR HIDE
   ═══════════════════════════════════════════════════════ */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }