/*
 * .category-hero — Full-viewport hero banner for the Furniture category page.
 * Relative positioning creates a stacking context so the background image,
 * gradient overlay, and text content can be layered via z-index.
 * 82vh height with a 560px minimum ensures a tall, visually impactful banner
 * across all screen sizes. overflow:hidden clips the background image to the container.
 */
.category-hero {
    position: relative;
    width: 100%;
    height: 82vh;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/*
 * .hero-background / .hero-bg-img — Full-bleed background image for the hero section.
 * Absolute positioning with inset:0 stretches the element to all four edges of
 * the parent. object-fit:cover fills the space without distorting the image,
 * cropping rather than letterboxing. z-index:1 keeps it behind all other hero content.
 */
.hero-background,
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/*
 * .hero-overlay — Transparent overlay layer sitting between the background image
 * and the text content. On desktop the background is set to none, but on mobile
 * (see media query below) a bottom-to-top dark gradient is applied to ensure
 * the headline text remains legible regardless of the underlying image.
 * z-index:2 places it above the image but below the text content at z-index:3.
 */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: none;
    z-index: 2;
}

/*
 * .hero-content — Centred wrapper that holds the headline and subtext inside the hero.
 * Relative positioning and z-index:3 lift it above both the background image and
 * the overlay. max-width:1400px with auto side margins and 5% padding mirrors the
 * site's global content width while keeping text away from the viewport edges.
 */
.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/*
 * .hero-headline — Primary display heading inside the hero banner.
 * clamp() scales the font fluidly between 48px on small screens and 90px on
 * large ones, keeping the type proportional without abrupt breakpoint jumps.
 * font-weight:900 and text-transform:uppercase give the heading maximum visual
 * impact. max-width:800px prevents excessively long lines on ultra-wide viewports.
 */
.hero-headline {
    color: #ffffff;
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 16px 0;
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    text-wrap: balance;
}

.headline-line {
    display: block;
}

/*
 * .hero-subtext — Supporting description line beneath the main hero headline.
 * A smaller clamp() range (18px–22px) keeps it clearly subordinate to the
 * headline while still being comfortable to read. max-width:600px and
 * line-height:1.4 ensure the text doesn't spread too wide or feel cramped.
 */
.hero-subtext {
    color: #ffffff;
    font-size: clamp(18px, 2vw, 22px);
    margin-top: 15px;
    max-width: 600px;
    line-height: 1.4;
}

/*
 * .hero-badge — Category icon badge pinned to the top-right corner of the hero.
 * Absolute positioning at top:0 / right:0 anchors it to the corner of the
 * relative-positioned .category-hero. The fixed 120×140px box with centred flex
 * layout ensures the icon always sits consistently regardless of its natural size.
 * border-bottom-left-radius softens the inner corner against the hero edge.
 */
.hero-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    border-bottom-left-radius: 8px;
}

/*
 * .hero-badge img — The icon image inside the category badge.
 * Fixed 65×65px dimensions with object-fit:contain prevent the icon from
 * being cropped or stretched, keeping it crisp at its intended aspect ratio
 * inside the badge container.
 */
.hero-badge img {
    width: 65px;
    height: 65px;
    object-fit: contain;
}

/*
 * @media (max-width: 768px) — Mobile layout adjustments for the hero section.
 * On small screens the text is pushed to the bottom of the hero (align-items:flex-end)
 * so the product imagery in the upper portion remains visible. The overlay gains a
 * bottom-to-top gradient to ensure the text remains readable against varied backgrounds.
 * The badge is scaled down to 80×100px and its icon to 45×45px to reduce visual clutter.
 */
@media (max-width: 768px) {
    .category-hero {
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
    }
    .hero-overlay {
        background: none;
    }
    .hero-badge {
        width: 80px;
        height: 100px;
        right: 0;
    }
    .hero-badge img {
        width: 45px;
        height: 45px;
    }
    .hero-headline {
        font-size: clamp(3rem, 14vw, 5rem);
    }
}

/*
 * .category-showcase-container — Outer page-width wrapper for the furniture
 * showcase modules (heading, main image, and product carousel).
 * flex-direction:column with a 5rem gap creates generous vertical breathing room
 * between each module. 4rem auto margins centre the section and push it away
 * from the hero above and any subsequent sections below.
 */
.category-showcase-container {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

/*
 * .showcase-heading — Section-level heading used above product carousel modules.
 * The BBOS brand blue (#1C48AA) and heavy font-weight:800 give it authority while
 * remaining consistent with the site's typographic scale. clamp() scales the size
 * fluidly between 32px and 48px so the heading stays proportional at any viewport.
 */
.showcase-heading {
    color: #1C48AA;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

/*
 * .showcase-main-image — Full-width image container for the primary showcase photo.
 * border-radius:12px and overflow:hidden together round the corners of the image
 * block. The light grey background (#f4f4f4) acts as a placeholder colour that
 * appears while the image loads, preventing a jarring layout shift.
 */
.showcase-main-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2rem;
    background: #f4f4f4;
}

/*
 * .showcase-main-image img — The image element inside the main showcase container.
 * width:100% stretches it to fill the container, height:auto preserves the aspect
 * ratio, and max-height:600px prevents excessively tall images on large screens.
 * object-fit:cover and display:block together eliminate any inline whitespace gap
 * below the image and ensure clean cropping within the rounded container.
 */
.showcase-main-image img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

/*
 * .showcase-carousel-wrapper — The outer shell that frames the product carousel.
 * Relative positioning provides an anchor for the absolutely-placed arrow buttons.
 * The light grey background (#f8f9fa) and 30px/40px padding create a distinct
 * card-like container that visually separates the carousel from surrounding content.
 * border-radius:12px matches the rounded style used on the main image above.
 */
.showcase-carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    padding: 30px 40px;
    border-radius: 12px;
}

/*
 * .showcase-carousel-track — The scrollable row of product cards inside the carousel.
 * overflow-x:auto enables horizontal scrolling, while scroll-snap-type:x mandatory
 * locks scrolling to card boundaries for a crisp paged feel. scrollbar-width:none
 * and -ms-overflow-style:none hide the scrollbar in Firefox and IE/Edge respectively,
 * giving a clean swipe-only appearance consistent with the design.
 */
.showcase-carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

/*
 * .showcase-carousel-track::-webkit-scrollbar — Removes the scrollbar in
 * WebKit-based browsers (Chrome, Safari, Edge Chromium).
 * Paired with the scrollbar-width and -ms-overflow-style declarations above
 * to ensure a consistent no-scrollbar appearance across all major browsers.
 */
.showcase-carousel-track::-webkit-scrollbar {
    display: none;
}

/*
 * .sc-item — An individual product card within the carousel track.
 * flex:0 0 calc(33.333% - 14px) makes each card occupy exactly one-third of the
 * visible track width (accounting for the 20px gap), so three cards are always
 * visible at once on desktop. scroll-snap-align:start ensures the carousel snaps
 * cleanly to each card's left edge. flex-direction:column with align-items:center
 * stacks the product image above its label in a centred column layout.
 */
.sc-item {
    flex: 0 0 calc(33.333% - 14px);
    scroll-snap-align: start;
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*
 * .sc-item-link — Anchor wrapper around the image and label inside each carousel card.
 * display:flex with flex-direction:column stacks the image above the label, and
 * align-items:center horizontally centres both. text-decoration:none removes the
 * default underline from the link, and width:100% ensures the link fills the card
 * so the entire card surface is clickable.
 */
.sc-item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

/*
 * .sc-item img — The product image inside each carousel card.
 * width/height:100% fills the card, object-fit:contain ensures the product
 * is never cropped, and aspect-ratio:1/1 forces a perfect square bounding box
 * so all product images align consistently regardless of their natural proportions.
 */
.sc-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

/*
 * .sc-item-label — Product name label displayed below the image in each carousel card.
 * margin-top:10px creates a small gap between the image and the label.
 * font-weight:600 gives it enough weight to be clearly readable without competing
 * with section headings. text-align:center mirrors the centred flex layout of
 * the parent .sc-item-link.
 */
.sc-item-label {
    margin: 10px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    text-align: center;
}


/*
 * .sc-arrow — Navigation arrow buttons (previous / next) for the carousel.
 * Absolute positioning with top:50% and translateY(-50%) vertically centres each
 * button relative to the carousel wrapper. background:none and border:none remove
 * default button chrome, leaving just the arrow glyph. The transition on color
 * produces a smooth highlight when the user hovers over an arrow.
 */
.sc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    z-index: 10;
    padding: 10px;
    transition: color 0.3s;
}

/*
 * .sc-arrow:hover — Hover state for carousel navigation arrows.
 * Changes the arrow colour to the BBOS brand blue (#1C48AA) to give clear
 * visual feedback that the button is interactive and clickable.
 */
.sc-arrow:hover {
    color: #1C48AA;
}

/*
 * .sc-prev / .sc-next — Positional overrides that place each arrow at the
 * correct edge of the carousel wrapper. left:0 pins the previous arrow to the
 * left side; right:0 pins the next arrow to the right side.
 */
.sc-prev { left: 0; }
.sc-next { right: 0; }

/*
 * @media (max-width: 768px) — Mobile layout adjustments for the product carousel.
 * Side padding is removed from the wrapper so cards extend to the edges of the screen,
 * maximising the available display area on phones. Each card is widened to 75% of the
 * track so one full card plus a peek of the next is visible, encouraging swipe interaction.
 * Arrow buttons are hidden entirely since touch users will swipe to navigate.
 */
@media (max-width: 768px) {
    .category-showcase-container {
        margin: 0 auto;
        gap: 2rem;
    }
    .showcase-main-image img {
        aspect-ratio: 1 / 1;
        height: auto;
        max-height: none;
        object-fit: cover;
    }
    .showcase-carousel-wrapper {
        padding: 20px 0;
        overflow: hidden;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        border-radius: 0;
    }
    .showcase-carousel-track {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-left: 15px;
        padding-right: 15px;
        scroll-padding-left: 15px;
    }
    .sc-item {
        flex: none;
        width: calc(50vw - 20px);
        min-width: calc(50vw - 20px);
        box-sizing: border-box;
        scroll-snap-align: start;
    }
    .sc-prev { left: 8px; }
    .sc-next { right: 8px; }
    .sc-item-label {
        display: none;
    }
}


/*
 * .brand-ticker-section — Full-width section housing the scrolling brand logo ticker.
 * overflow:hidden clips the logo track so logos that have scrolled off-screen are not
 * visible. The top and bottom 1px borders in a light grey (#eaeaea) subtly separate
 * this section from the content above and below without using heavy dividers.
 */
.brand-ticker-section {
    background: #ffffff;
    padding: 60px 0;
    overflow: hidden;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

/*
 * .ticker-wrapper — Centred container that constrains the ticker to 1400px and
 * provides the positioning context for the edge-fade pseudo-elements.
 * overflow:hidden ensures logos that travel beyond the wrapper boundary are clipped,
 * working in concert with the parent section's own overflow:hidden.
 */
.ticker-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

/*
 * .ticker-wrapper::before / .ticker-wrapper::after — Edge-fade overlays that make
 * logos appear to smoothly emerge from and disappear into the sides of the ticker.
 * Both pseudo-elements are absolutely positioned and span the full height of the wrapper.
 * pointer-events:none ensures they do not block hover interactions on the logos beneath.
 * The 150px width provides a generous fade zone without hiding too many logos at once.
 */
.ticker-wrapper::before,
.ticker-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/*
 * .ticker-wrapper::before — Left edge fade overlay.
 * The gradient runs left-to-right from fully opaque white to transparent,
 * creating the illusion that logos emerge from behind the section background
 * rather than abruptly appearing at the left edge of the ticker.
 */
.ticker-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

/*
 * .ticker-wrapper::after — Right edge fade overlay.
 * Mirror of the ::before pseudo-element — gradient runs right-to-left so logos
 * fade out smoothly as they exit the right side of the visible ticker area.
 */
.ticker-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

/*
 * .ticker-track — The horizontally scrolling row that contains all brand logo slides.
 * width:max-content allows the flex row to grow as wide as all its children combined,
 * preventing wrapping. The tickerScroll animation continuously translates the track
 * leftward at a constant speed; 30 seconds produces a leisurely, easy-to-read pace.
 */
.ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: tickerScroll 30s linear infinite;
}

/*
 * .ticker-wrapper:hover .ticker-track — Pauses the scrolling animation when the
 * user hovers over the ticker, giving them time to read or interact with a logo
 * without it sliding away. animation-play-state:paused freezes the animation at
 * its current position and resumes from the same point when the cursor leaves.
 */
.ticker-wrapper:hover .ticker-track {
    animation-play-state: paused;
}

/*
 * .ticker-slide — An individual brand logo slot within the scrolling ticker track.
 * flex-shrink:0 prevents the slide from compressing as the track fills with logos.
 * The fixed 250px width with 40px horizontal padding ensures consistent, even spacing
 * between logos regardless of each logo's natural width.
 */
.ticker-slide {
    flex-shrink: 0;
    width: 250px;
    padding: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
 * .brand-logo-img — The logo image inside each ticker slide.
 * max-width:100% prevents the logo from overflowing its slide container.
 * max-height:70px caps taller logos so they don't dominate the row height
 * while object-fit:contain preserves the logo's aspect ratio without cropping.
 */
.brand-logo-img {
    max-width: 100%;
    height: auto;
    max-height: 70px;
    object-fit: contain;
}

/*
 * @keyframes tickerScroll — Defines the continuous horizontal scroll animation
 * for the brand logo ticker. The track is duplicated in the HTML so there are
 * two identical sets of logos; translating exactly -50% moves the track by one
 * full set length. When the animation loops back to 0%, the transition is seamless
 * because the second set of logos is visually identical to the first.
 */
@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/*
 * @media (prefers-reduced-motion: reduce) — Accessibility overrides for users who
 * have requested reduced motion in their OS settings. The scrolling animation is
 * disabled entirely and logos are reflowed into a wrapped, centred grid instead.
 * Edge-fade overlays are hidden since they only make sense with a scrolling layout.
 * Duplicate logo slides (marked aria-hidden) are hidden to avoid repetition.
 */
@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 30px;
    }
    .ticker-slide {
        width: auto;
        padding: 15px;
    }
    .ticker-wrapper::before,
    .ticker-wrapper::after {
        display: none;
    }
    .ticker-slide[aria-hidden="true"] {
        display: none;
    }
}

/*
 * @media (max-width: 768px) — Mobile adjustments for the brand ticker section.
 * Vertical padding is reduced from 60px to 40px to save screen space on phones.
 * Individual slides are narrowed from 250px to 180px and their internal padding
 * halved, fitting more logos in the visible area. The edge-fade width is reduced
 * from 150px to 60px so less of each logo is hidden behind the fade on smaller screens.
 */
@media (max-width: 768px) {
    .brand-ticker-section {
        padding: 40px 0;
    }
    .ticker-slide {
        width: 180px;
        padding: 0 20px;
    }
    .brand-logo-img {
        max-height: 50px;
    }
    .ticker-wrapper::before,
    .ticker-wrapper::after {
        width: 60px;
    }
}

/*
 * .section-category-cta — Full-width section container for the category call-to-action.
 * Generous 80px vertical padding and a centred text-align create an open, focused layout
 * that draws attention to the button without surrounding distractions. The white background
 * ensures strong contrast with the BBOS blue button inside.
 */
.section-category-cta {
    padding: 24px 20px;
    background-color: #ffffff;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/*
 * .btn-category-cta — Primary call-to-action button for the Furniture category page.
 * display:inline-block allows padding and dimension control while keeping the button
 * inline within the centred text container. The BBOS blue background (#1C48AA) with
 * white text provides strong brand-consistent contrast. Thick 18px/50px padding and
 * font-weight:800 give the button a bold, substantial, clickable appearance. The
 * transition on background-color and transform enables smooth hover and active states.
 */
.btn-category-cta {
    display: inline-block;
    background-color: #1C48AA;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 800;
    padding: 18px 50px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/*
 * .btn-category-cta:hover / :focus — Interactive states for the CTA button.
 * The background darkens from #1C48AA to #1C48AA on hover and keyboard focus,
 * providing clear visual feedback that the button is active. colour is explicitly
 * restated to prevent browser default link-colour overrides on :focus.
 */
.btn-category-cta:hover,
.btn-category-cta:focus {
    background-color: #1C48AA;
    color: #ffffff;
}

/*
 * .btn-category-cta:active — Pressed state for the CTA button.
 * A subtle scale(0.98) transform mimics a physical button depression,
 * reinforcing the tactile click interaction without a distracting animation.
 */
.btn-category-cta:active {
    transform: scale(0.98);
}

/*
 * @media (max-width: 768px) — Tablet/mobile size reduction for the CTA button.
 * Font size drops to 1rem and padding is reduced so the button remains comfortably
 * tappable on smaller screens without dominating the full viewport width.
 */
@media (max-width: 768px) {
    .section-category-cta {
        padding: 16px 20px;
    }
    .btn-category-cta {
        font-size: 1rem;
        padding: 14px 28px;
    }
}

/*
 * @media (max-width: 480px) — Small phone override for the CTA button.
 * width:100% stretches the button edge-to-edge within its padded container,
 * making it easier to tap on narrow devices. text-align:center keeps the
 * label centred within the now full-width button.
 */
@media (max-width: 480px) {
    .btn-category-cta {
        padding: 14px 20px;
    }
}