.elementor-9240 .elementor-element.elementor-element-28c9b30{--display:flex;}/* Start custom CSS */<style>
    /* --- 1. RESET & BASICS --- */
    /* We scope this to avoid breaking other parts of your site */
    .app-archive-wrapper * { 
        box-sizing: border-box; 
        -webkit-tap-highlight-color: transparent; 
    }
    
    /* Hide Scrollbar for sleek look */
    .app-archive-wrapper ::-webkit-scrollbar { display: none; }

    /* --- 2. HEADER STYLES (Fixed) --- */
    .app-header-fixed {
        position: fixed;
        top: 0; 
        left: 0;
        width: 100%;
        z-index: 99999; /* Max Z-Index to sit on top of everything */
        background: #fff;
        transition: all 0.3s ease;
        border-bottom: 1px solid #f0f0f0;
        font-family: "Roboto", sans-serif; 
    }

    .header-top-info {
        padding: 15px 20px 5px 20px;
        background: #fff;
        overflow: hidden;
        max-height: 200px;
        transition: all 0.3s ease;
        opacity: 1;
    }
    .ht-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .ht-title { font-size: 18px; font-weight: 700; color: #333; border-bottom: 3px solid #A07D50; padding-bottom: 3px; }
    .ht-sub { font-size: 16px; font-weight: 400; color: #999; margin-left: 10px; }
    .ht-count { font-size: 13px; font-weight: 700; color: #333; }
    
    .filter-icon { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #666; font-weight: 500; }

    /* PILLS ROW */
    .header-pills-area {
        padding: 0 0 12px 20px;
        background: #fff;
        width: 100%;
    }
    .pills-track {
        display: flex; gap: 8px; overflow-x: auto; padding-right: 20px;
    }
    .pill-btn {
        display: inline-flex; white-space: nowrap;
        padding: 6px 14px; border-radius: 50px;
        font-size: 12px; font-weight: 500;
        color: #555; background: #fff; border: 1px solid #e0e0e0;
        text-decoration: none !important; transition: all 0.2s ease;
    }
    .pill-btn.active {
        background: #A07D50; color: #fff; border-color: #A07D50;
        box-shadow: 0 3px 8px rgba(160, 125, 80, 0.25);
    }

    /* COMPACT BOTTOM BAR */
    .header-bottom-bar {
        display: none; padding: 10px 20px;
        justify-content: space-between; align-items: center;
        background: #fff; border-top: 1px solid #f0f0f0;
        animation: fadeIn 0.3s forwards;
    }
    .hb-title { font-size: 14px; font-weight: 700; color: #000; }

    /* SCROLLED STATES */
    .app-header-fixed.is-scrolled { box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .app-header-fixed.is-scrolled .header-top-info { max-height: 0; padding: 0; opacity: 0; margin: 0; }
    .app-header-fixed.is-scrolled .header-bottom-bar { display: flex; }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }


    /* --- 3. HERO SECTION --- */
    .hero-banner {
        position: relative;
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        overflow: hidden;
        margin-bottom: 10px;
        font-family: "Roboto", sans-serif; 
    }
    .hero-bg {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        object-fit: cover; z-index: 1;
    }
    .hero-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.45); z-index: 2;
    }
    .hero-content {
        position: relative; z-index: 3; color: #fff;
    }
    .hero-title {
        font-size: 24px; font-weight: 700; margin: 0 0 10px 0;
        line-height: 1.2; text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        color: #fff;
    }
    .hero-desc {
        font-size: 13px; font-weight: 400; opacity: 0.95; margin: 0;
        max-width: 90%; line-height: 1.4; color: #fff;
    }


    /* --- 4. PRODUCT GRID STYLES --- */
    .content-spacer { height: 160px; width: 100%; display: block; }

    .archive-section {
        padding: 25px 0 10px 20px; 
        border-bottom: 1px solid #fafafa;
        font-family: "Roboto", sans-serif; 
    }
    
    .sec-header {
        display: flex; justify-content: space-between; align-items: flex-end;
        padding-right: 20px; margin-bottom: 15px;
    }
    .sec-title { font-size: 18px; font-weight: 700; color: #222; margin: 0; }
    .view-all { font-size: 13px; font-weight: 500; color: #888; text-decoration: none; }

    /* Horizontal Scroll Area */
    .h-scroll-grid {
        display: flex;
        gap: 15px;
        overflow-x: auto; 
        padding-bottom: 15px; 
        padding-right: 20px; 
        scroll-snap-type: x mandatory; 
    }
    
    .sub-cat-card {
        flex: 0 0 140px; 
        display: flex; flex-direction: column;
        align-items: center; text-align: center;
        text-decoration: none;
        scroll-snap-align: start;
    }

    .card-img-wrap {
        width: 140px; height: 140px;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 10px;
        background: #f4f4f4;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .card-img { width: 100%; height: 100%; object-fit: cover; }
    .card-title { font-size: 13px; font-weight: 500; color: #333; line-height: 1.3; max-width: 90%; }

    .bottom-spacer { height: 100px; }
</style>

<div class="app-archive-wrapper">

    <div class="app-header-fixed" id="myAppHeader">
        <div class="header-top-info">
            <div class="ht-row">
                <div><span class="ht-title">Categories</span><span class="ht-sub">Materials</span></div>
                <div class="filter-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg> Filter
                </div>
            </div>
            <div class="ht-count">1,324 Travertine Stone Products</div>
        </div>
        <div class="header-pills-area">
            <div class="pills-track">
                <a href="#interior" class="pill-btn active">Interior Furniture</a>
                <a href="#dining" class="pill-btn">Dining & Kitchen</a>
                <a href="#bathroom" class="pill-btn">Bathroom Fixtures</a>
                <a href="#decor" class="pill-btn">Home Decor</a>
                <a href="#outdoor" class="pill-btn">Outdoor</a>
            </div>
        </div>
        <div class="header-bottom-bar">
            <span class="hb-title">All Travertine Stone Product Categories</span>
            <div class="filter-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>
            </div>
        </div>
    </div>

    <div class="content-spacer"></div>

    <div class="hero-banner">
        <img src="https://images.unsplash.com/photo-1618221639257-2c9c77174623?auto=format&fit=crop&w=800&q=80" class="hero-bg" alt="Travertine Background">
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <h1 class="hero-title">All Travertine Stone Product Categories</h1>
            <p class="hero-desc">Explore our premium collection of handcrafted travertine stone products, directly from the manufacturer.</p>
        </div>
    </div>

    <div id="interior" class="archive-section">
        <div class="sec-header">
            <h2 class="sec-title">Interior Furniture</h2>
            <a href="#" class="view-all">View All</a>
        </div>
        <div class="h-scroll-grid">
            
            <a href="#" class="sub-cat-card">
                <div class="card-img-wrap">
                    <img src="https://via.placeholder.com/300/E0D5C1/333?text=Tables" class="card-img">
                </div>
                <span class="card-title">Travertine<br>Tables</span>
            </a>

            <a href="#" class="sub-cat-card">
                <div class="card-img-wrap"><img src="https://via.placeholder.com/300/E0D5C1/333?text=Consoles" class="card-img"></div>
                <span class="card-title">Travertine<br>Consoles</span>
            </a>

            <a href="#" class="sub-cat-card">
                <div class="card-img-wrap"><img src="https://via.placeholder.com/300/E0D5C1/333?text=Fireplaces" class="card-img"></div>
                <span class="card-title">Travertine<br>Fireplaces</span>
            </a>

            <a href="#" class="sub-cat-card">
                <div class="card-img-wrap"><img src="https://via.placeholder.com/300/E0D5C1/333?text=Pedestals" class="card-img"></div>
                <span class="card-title">Travertine<br>Pedestals</span>
            </a>
        </div>
    </div>

    <div id="dining" class="archive-section">
        <div class="sec-header">
            <h2 class="sec-title">Dining & Kitchen</h2>
            <a href="#" class="view-all">View All</a>
        </div>
        <div class="h-scroll-grid">
            <a href="#" class="sub-cat-card">
                <div class="card-img-wrap"><img src="https://via.placeholder.com/300/D9CFBC/333?text=Dining" class="card-img"></div>
                <span class="card-title">Dining<br>Tables</span>
            </a>
            <a href="#" class="sub-cat-card">
                <div class="card-img-wrap"><img src="https://via.placeholder.com/300/D9CFBC/333?text=Counters" class="card-img"></div>
                <span class="card-title">Bar<br>Counters</span>
            </a>
            <a href="#" class="sub-cat-card">
                <div class="card-img-wrap"><img src="https://via.placeholder.com/300/D9CFBC/333?text=Bowls" class="card-img"></div>
                <span class="card-title">Serving<br>Bowls</span>
            </a>
        </div>
    </div>

    <div id="bathroom" class="archive-section">
        <div class="sec-header">
            <h2 class="sec-title">Bathroom Fixtures</h2>
            <a href="#" class="view-all">View All</a>
        </div>
        <div class="h-scroll-grid">
            <a href="#" class="sub-cat-card">
                <div class="card-img-wrap"><img src="https://via.placeholder.com/300/F0EBE0/333?text=Bathtubs" class="card-img"></div>
                <span class="card-title">Travertine<br>Bathtubs</span>
            </a>
            <a href="#" class="sub-cat-card">
                <div class="card-img-wrap"><img src="https://via.placeholder.com/300/F0EBE0/333?text=Sinks" class="card-img"></div>
                <span class="card-title">Vessel<br>Sinks</span>
            </a>
            <a href="#" class="sub-cat-card">
                <div class="card-img-wrap"><img src="https://via.placeholder.com/300/F0EBE0/333?text=Dishes" class="card-img"></div>
                <span class="card-title">Soap<br>Dishes</span>
            </a>
        </div>
    </div>

    <div class="bottom-spacer"></div>

</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const header = document.getElementById('myAppHeader');
    const navLinks = document.querySelectorAll(".pill-btn");
    const sections = document.querySelectorAll(".archive-section");
    
    // --- TELEPORT HEADER FIX ---
    // This moves the header outside of Elementor containers to the main Body
    // Ensures Sticky works perfectly without "overflow: hidden" bugs.
    if(header && document.body) {
        document.body.appendChild(header);
    }

    // --- SCROLL LOGIC ---
    window.addEventListener("scroll", function() {
        const scrollY = window.scrollY;
        
        // 1. Sticky Transform
        if (scrollY > 50) header.classList.add('is-scrolled');
        else header.classList.remove('is-scrolled');

        // 2. Pill Active State
        let currentId = "";
        sections.forEach((section) => {
            if (scrollY >= (section.offsetTop - 220)) currentId = section.getAttribute("id");
        });

        if(currentId) {
            navLinks.forEach((link) => {
                link.classList.remove("active");
                if (link.getAttribute("href") === "#" + currentId) {
                    link.classList.add("active");
                    link.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
                }
            });
        }
    });

    // --- CLICK LOGIC ---
    navLinks.forEach(link => {
        link.addEventListener("click", function(e) {
            e.preventDefault();
            navLinks.forEach(l => l.classList.remove("active"));
            this.classList.add("active");
            
            const targetId = this.getAttribute("href");
            const targetSection = document.querySelector(targetId);
            
            if(targetSection) {
                // Scroll to section (minus header height)
                const pos = targetSection.getBoundingClientRect().top + window.scrollY - 160;
                window.scrollTo({ top: pos, behavior: "smooth" });
            }
        });
    });
});
</script>/* End custom CSS */