/* ===================================================================
   FABRIXA PRODUCTS PAGE — append to brighthub-fabrixa/style.css

   These styles are layout polish for elements unique to this page.
   The Tier Finder (#fbx-tier-finder, .fbx-px-tier, etc.) inherits
   styles already declared in pricing-styles.css — keep that file in
   place too. If you've already merged pricing-styles.css into your
   main style.css, no additional action needed for the tier finder.
   =================================================================== */

/* Category tile — hover lift, link the whole tile */
.fbx-pr-cat-tile {
    transition: border-color .2s ease, transform .2s ease;
}

.fbx-pr-cat-tile:hover {
    border-color: #E95121;
    transform: translateY(-4px);
}

.fbx-pr-cat-tile a {
    text-decoration: none;
    color: inherit;
}

/* Sub-category tiles (apparel sub-categories) — coral accent on hover */
.fbx-pr-subcat,
.fbx-pr-room,
.fbx-pr-fabric {
    transition: border-color .2s ease, transform .15s ease;
}

.fbx-pr-subcat:hover,
.fbx-pr-room:hover,
.fbx-pr-fabric:hover {
    border-color: #E95121;
    transform: translateY(-2px);
}

/* Spec strip — visual rhythm tweak */
.fbx-pr-spec {
    overflow: hidden;
}

/* ------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------ */

/* Tablet — collapse to 2-column grids */
@media (max-width: 1100px) {
    .fbx-pr-cat-grid {
        grid-template-columns: 1fr !important;
    }
    .fbx-pr-subcat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .fbx-pr-rooms-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .fbx-pr-fabric-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .fbx-pr-spec {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .fbx-pr-spec > div:nth-child(odd) {
        border-right: 1px solid rgba(240, 240, 240, 0.08) !important;
    }
    .fbx-pr-spec > div:nth-child(even) {
        border-right: 0 !important;
    }
    .fbx-pr-spec > div:nth-child(1),
    .fbx-pr-spec > div:nth-child(2) {
        border-bottom: 1px solid rgba(240, 240, 240, 0.08);
    }

    /* Section 03/04/05 — stack the intro text + image two-column to one column */
    #apparel > .fbx-container > div:first-child,
    #home-textile > .fbx-container > div:first-child,
    #fabric > .fbx-container > div:first-child {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile — single column for everything */
@media (max-width: 760px) {
    .fbx-pr-subcat-grid,
    .fbx-pr-rooms-grid,
    .fbx-pr-fabric-grid {
        grid-template-columns: 1fr !important;
    }
    .fbx-pr-spec {
        grid-template-columns: 1fr !important;
    }
    .fbx-pr-spec > div {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(240, 240, 240, 0.08);
    }
    .fbx-pr-spec > div:last-child {
        border-bottom: 0;
    }

    /* "Why reactive printing" — stack columns */
    .fbx-page-products section > .fbx-container > div[style*="grid-template-columns: 1.2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Reduce hero padding on mobile */
    .fbx-pr-hero {
        padding: 100px 24px 80px !important;
    }
}

/* Force brand heading colors on Products page */
.fbx-page-products h1,
.fbx-page-products h2,
.fbx-page-products h3,
.fbx-page-products h4 {
    color: #F0F0F0 !important;
}

/* Hide BrightHub default page-title banner on Products page */
.page-template-page-products .pxl-page-title,
.page-template-page-products .pxl-banner,
.page-template-page-products .pxl-banner-area,
.page-template-page-products .pxl-page-title-area,
.page-template-page-products .pxl-breadcrumbs-wrap,
body.page-id-* .pxl-page-title:has(+ .fbx-page-products) {
    display: none !important;
}