/* ===========================================
   HERO CAROUSEL
   =========================================== */

/*
 * .hero-carousel — Outermost wrapper for the homepage hero slideshow.
 * Relative positioning creates a stacking context so absolutely positioned
 * slides, content, and controls can layer on top of each other.
 * overflow:hidden ensures off-screen slides never cause horizontal scroll.
 * The dark fallback background (#1a1a1a) fills the space while the first
 * slide image is still loading.
 */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 82vh;
    min-height: 560px;
    overflow: hidden;
    background-color: #1a1a1a;
}

/*
 * .carousel-slide — A single slide panel inside the hero carousel.
 * Absolutely positioned to stack all slides directly on top of one another
 * at full width/height. Starts invisible (opacity:0) so only the active
 * slide is ever shown; the transition creates the cross-fade effect.
 * z-index:1 keeps inactive slides beneath the active one.
 */
.carousel-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: none;
    z-index: 1;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
    transition: opacity 0.6s ease-in-out;
}

/* Keeps the outgoing slide visible while the new one fades in on top */
.carousel-slide.exiting { opacity: 1; z-index: 1; transition: none; }

/*
 * .slide-bg-image — The full-bleed background photograph for each slide.
 * object-fit:cover fills the entire carousel height/width regardless of
 * the image's natural aspect ratio, cropping symmetrically from the center.
 * display:block removes the inline baseline gap browsers add to img elements.
 */
.slide-bg-image {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/*
 * .slide-content-container — Overlay layer that holds the hero title and
 * info card, positioned to cover the entire slide at z-index:3 (above the
 * image). pointer-events:none lets clicks pass through the transparent
 * regions straight to the carousel controls beneath.
 * Generous bottom padding keeps text above the pagination dots.
 */
.slide-content-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12% 5% 22%;
    box-sizing: border-box;
    z-index: 3;
    pointer-events: none;
}

/*
 * .hero-title — Large display heading rendered over the slide photograph.
 * clamp() keeps the font fluid between 3 rem on small screens and 5 rem on
 * wide viewports, with 14vw bridging the range smoothly.
 * text-wrap:balance distributes words evenly across lines to avoid
 * a single short orphan word on the last line.
 */
.hero-title {
    margin: 0;
    font-size: clamp(3rem, 14vw, 5rem);
    line-height: 1.05;
    font-weight: 900;
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    text-wrap: balance;
}

/*
 * .text-solid — Variant of the hero title text rendered as solid white.
 * white-space:nowrap prevents the line from wrapping mid-phrase so that
 * the solid and outline words remain visually grouped.
 */
.text-solid {
    color: #ffffff;
    white-space: nowrap;
}

/*
 * .text-outline — Variant of the hero title text styled as white (outline
 * effect is typically applied via a separate SVG or text-stroke rule).
 * white-space:nowrap mirrors .text-solid to keep the layout stable.
 */
.text-outline {
    color: #ffffff;
    white-space: nowrap;
}

/*
 * .hero-info-card — Semi-transparent card overlaying the slide that contains
 * the product description and CTA button.
 * backdrop-filter:blur frosted-glass blurs whatever is directly behind it,
 * providing legibility without a fully opaque mask.
 * pointer-events:auto re-enables click interactions inside this element,
 * reversing the pointer-events:none set on its parent container.
 */
.hero-info-card {
    background: rgba(15, 15, 15, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 22px 24px;
    border-radius: 6px;
    color: #ffffff;
    pointer-events: auto;
    width: fit-content;
    max-width: 340px;
    display: flex;
    flex-direction: column;
}

/*
 * .hero-info-card h2 — Heading inside the info card describing the slide's
 * featured product or promotion. Moderate font-weight (500) keeps it
 * readable against the blurred dark card without competing with the large
 * hero title behind it.
 */
.hero-info-card h2 {
    margin: 0 0 16px 0;
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.3;
}

/*
 * .btn-hero-cta — Primary call-to-action button inside the hero info card.
 * inline-flex with align-items:center keeps the label and arrow icon
 * vertically centred regardless of icon size.
 * The brand blue (#1C48AA) background shifts to a darker shade on hover
 * via a smooth 0.3 s transition.
 */
.btn-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    align-self: flex-start;
    background-color: #1C48AA;
    color: #ffffff;
    text-decoration: none;
    padding: 11px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

/*
 * .btn-hero-cta:hover — Darkens the CTA button background on mouse-over
 * to signal interactivity.
 */
.btn-hero-cta:hover { background-color: #1C48AA; }

/*
 * .cta-arrow — Inline arrow icon that appears to the right of the CTA label.
 * Left margin creates visual separation from the text.
 */
.cta-arrow { margin-left: 8px; }

/*
 * .carousel-control — Previous/next navigation button for the hero carousel.
 * Vertically centred with absolute positioning and translateY(-50%).
 * Transparent background and no border keep it unobtrusive; white text
 * remains visible over any slide image. z-index:4 floats it above all slide
 * layers. Reduced default opacity (0.75) becomes fully opaque on hover.
 */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 2.6rem;
    cursor: pointer;
    z-index: 4;
    padding: 10px 14px;
    opacity: 0.75;
    transition: opacity 0.3s;
    line-height: 1;
}

/*
 * .carousel-control:hover — Brings the navigation arrow to full opacity
 * to confirm it is interactive.
 */
.carousel-control:hover { opacity: 1; }

/*
 * .carousel-control.prev — Anchors the previous-slide button to the left
 * edge of the carousel with a small inset so it doesn't touch the frame.
 */
.carousel-control.prev { left: 10px; }

/*
 * .carousel-control.next — Anchors the next-slide button to the right
 * edge of the carousel with a matching inset.
 */
.carousel-control.next { right: 10px; }

/*
 * .carousel-pagination — Row of dot indicators at the bottom of the hero,
 * showing which slide is active and how many slides exist.
 * Centred horizontally with left:50% + translateX(-50%) and raised above
 * the slide image at z-index:4.
 */
.carousel-pagination {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4;
}

/*
 * .dot — Individual pagination dot representing one carousel slide.
 * The hollow white circle (border only, transparent fill) becomes solid
 * white when the .active state is applied.
 * cursor:pointer and transition:background make it feel interactive.
 */
.dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s;
}

/*
 * .dot.active — Fills the dot for the currently displayed slide with solid
 * white so users can see their position in the sequence.
 */
.dot.active { background: #ffffff; }

/*
 * Desktop hero — Applies once the viewport reaches 769 px wide.
 * Switches the slide content layout from stacked (column) to side-by-side
 * (row) with the title on the left and the info card pinned to the bottom
 * right. Navigation arrows shift further inward and pagination moves down
 * to match the taller desktop carousel.
 */
@media (min-width: 769px) {
    .hero-carousel {
        height: 82vh;
        min-height: 560px;
    }

    .slide-content-container {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: 5% 8% 5%;
    }

    .hero-title {
        font-size: clamp(3.5rem, 6vw, 6rem);
        align-self: center;
    }

    .hero-info-card {
        width: fit-content;
        max-width: 340px;
        padding: 28px 32px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }

    .hero-info-card h2 {
        font-size: 1.6rem;
        margin-bottom: 22px;
    }

    .btn-hero-cta {
        padding: 12px 22px;
        font-size: 0.95rem;
        width: fit-content;
        align-self: flex-start;
    }

    .carousel-control.prev { left: 20px; }
    .carousel-control.next { right: 20px; }

    .carousel-pagination { bottom: 28px; }
}

/*
 * Mobile hero — Applies at 768 px and below.
 * Restores the stacked layout padding, expands the info card to nearly
 * full width for readability, and scales down the navigation arrow buttons
 * so they don't obscure slide content on small screens.
 */
@media (max-width: 768px) {
    .slide-content-container { padding: 12% 5% 22%; }
    .hero-info-card { max-width: calc(100% - 32px); text-align: left; }
    .carousel-control { font-size: 1.6rem; padding: 8px 10px; }
    .carousel-control.prev { left: 4px; }
    .carousel-control.next { right: 4px; }
    .btn-hero-cta { padding: 14px 28px; font-size: 1rem; border-radius: 6px; }
}

/*
 * Very small screens (420 px and below) — Collapses the categories grid
 * from two columns to a single column so each card has enough room.
 * The featured card's column-span is reset to 1 to match the single-column
 * layout and avoid unnecessary whitespace.
 */
@media (max-width: 420px) {
    .categories-grid { grid-template-columns: 1fr; }
    .cat-card.cat-card-featured { grid-column: span 1; }
}


/* ===========================================
   CATEGORIES SECTION — "DISCOVER SOMETHING NEW"
   =========================================== */

/*
 * .section-categories — Outer section wrapper for the product-category grid.
 * Centered with max-width:1200px and horizontal auto margins.
 * Vertical padding creates breathing room between this section and adjacent
 * sections on the page.
 */
.section-categories {
    padding: 50px 20px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/*
 * .categories-header — Header area above the category card grid containing
 * the section title and subtitle.
 * Centred on mobile; overridden to left-aligned on desktop.
 */
.categories-header {
    margin-bottom: 22px;
    text-align: left;
}

/*
 * .categories-header h2 — Bold uppercase section title in brand blue.
 * clamp() makes the font responsive, spanning from 2 rem on phones to
 * 3 rem on wide screens, with 5vw driving the fluid range.
 */
.categories-header h2 {
    color: #1C48AA;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

/*
 * .categories-header p — Descriptive subtitle below the section heading.
 * Muted grey (#555) keeps it secondary to the heading.
 * max-width:900px prevents the text from stretching into uncomfortably
 * long lines on ultra-wide screens.
 */
.categories-header p {
    color: #555;
    font-size: 1rem;
    margin: 0 auto;
    line-height: 1.5;
    max-width: 900px;
}

/*
 * .categories-grid — CSS Grid container for the category card tiles.
 * Two equal columns on mobile; gap:12px adds consistent gutter between cards.
 * The featured card uses grid-column:span 2 to occupy the full width.
 */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

/*
 * .cat-card — Individual category tile that links to a product category page.
 * Relative positioning provides a context for the absolutely placed overlay
 * and icon. overflow:hidden clips the image when it scales on hover.
 * aspect-ratio:1/1 keeps cards square without a fixed pixel height.
 */
.cat-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    aspect-ratio: 1 / 1;
    text-decoration: none;
    background-color: #ddd;
}

/*
 * .cat-card.cat-card-featured — Modifier that makes one card span both
 * grid columns, acting as a wide banner at the top of the grid.
 * The wider aspect-ratio (2.2/1) keeps the card proportional to its
 * expanded width.
 */
.cat-card.cat-card-featured {
    grid-column: span 2;
    aspect-ratio: 2.2 / 1;
}

/*
 * .cat-card img — Category tile background image that fills the card.
 * object-fit:cover prevents distortion; the gentle scale on hover
 * (see :hover rule) is driven by a CSS transition for a zoom-in effect.
 */
.cat-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/*
 * .cat-card:hover img — Scales the card image up 4% on hover to create
 * a subtle zoom-in interaction that signals the card is clickable.
 */
.cat-card:hover img { transform: scale(1.04); }

/*
 * .cat-overlay — Decorative gradient overlay occupying the bottom 55% of
 * the card. Currently set to background:none; it acts as a hook for
 * per-card gradient colours applied via inline styles or other classes.
 * pointer-events:none prevents it from blocking clicks on the card link.
 */
.cat-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 55%;
    background: none;
    pointer-events: none;
}

/*
 * .cat-content — Absolutely positioned wrapper that holds the category
 * title text, anchored to the bottom-left corner of the card so it
 * overlays the gradient fade. z-index:2 keeps it above the overlay layer.
 */
.cat-content {
    position: absolute;
    bottom: 12px; left: 14px;
    z-index: 2;
}

/*
 * .cat-title — Category name displayed in the bottom-left of each card.
 * Bold white text with a soft shadow gives legibility over varied
 * image backgrounds. Flex layout aligns the label and arrow icon in a row.
 */
.cat-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/*
 * .cat-arrow — Small chevron or arrow icon appended after the category name.
 * Reduced font-size keeps it visually subordinate to the title text.
 */
.cat-arrow { margin-left: 5px; font-size: 0.8rem; }

/*
 * .cat-icon — Coloured badge anchored to the top-right corner of each card
 * showing a category icon or logo. border-bottom-left-radius gives it a
 * folded-corner appearance. z-index:2 keeps it above the card image.
 */
.cat-icon {
    position: absolute;
    top: 0; right: 0;
    width: 46px; height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: 8px;
    z-index: 2;
}

/*
 * .categories-footer — Centred wrapper below the card grid that holds the
 * "Shop All" button, keeping it horizontally centred on all screen sizes.
 */
.categories-footer { text-align: center; }

/*
 * .btn-store-solid — Solid brand-blue CTA button used in the categories
 * footer to link to the full store.
 * inline-flex with align-items:center ensures the label and any icon are
 * vertically centred. Transitions to a darker blue on hover.
 */
.btn-store-solid {
    display: inline-flex;
    align-items: center;
    background-color: #1C48AA;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 28px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

/*
 * .btn-store-solid:hover — Darkens the store button to a deeper blue
 * (#1C48AA) on hover to confirm it is interactive.
 */
.btn-store-solid:hover { background-color: #1C48AA; }

/*
 * Desktop categories — Applies at 769 px and wider.
 * Increases section padding, switches the header to left-aligned text,
 * widens the grid gutters, stretches the featured card's aspect ratio for
 * a more cinematic banner, and enlarges the category title and icon badge.
 */
@media (min-width: 769px) {
    .section-categories { padding: 60px 20px 50px; }

    .categories-header {
        text-align: left;
        margin-bottom: 28px;
    }

    .categories-header p {
        white-space: nowrap;
        text-align: left;
        margin: 0;
    }

    .categories-grid { gap: 18px; margin-bottom: 36px; }

    .cat-card.cat-card-featured { aspect-ratio: 2.8 / 1; }

    .cat-content { bottom: 18px; left: 20px; }

    .cat-title { font-size: 1.5rem; }

    .cat-icon { width: 58px; height: 58px; }
}


/* ===========================================
   VALUE PROPOSITION — "BIG BRANDS. BIGGER SAVINGS."
   =========================================== */

/*
 * .section-value-prop — Full-width section wrapper for the value-proposition
 * card trio. Centred at max-width:1200px with generous vertical padding
 * to visually separate it from adjacent sections.
 */
.section-value-prop {
    padding: 55px 20px 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/*
 * .value-header — Heading block above the value-prop card grid.
 * Centred on mobile and overridden to left-aligned on desktop.
 */
.value-header {
    margin-bottom: 32px;
    text-align: left;
}

/*
 * .value-header h2 — Bold uppercase section title matching the brand blue
 * style used throughout the page. clamp() scales fluidly from 2 rem to
 * 3 rem across screen widths.
 */
.value-header h2 {
    color: #1C48AA;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 12px 0;
    text-transform: uppercase;
}

/*
 * .value-header p — Subtitle paragraph in muted grey beneath the section
 * heading. Kept at body-text size to stay clearly secondary to the heading.
 */
.value-header p {
    color: #777;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/*
 * .value-grid — CSS Grid layout for the value-proposition cards.
 * Single column on mobile; switches to three equal columns on desktop.
 * gap:32px gives generous spacing between cards in the stacked mobile view.
 */
.value-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

/*
 * .value-card — Individual value-proposition card linking to a category or
 * offer page. Column flex layout stacks the image wrapper above the text
 * content. color:inherit ensures anchor default colours don't override
 * child text styles.
 */
.value-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}

/*
 * .value-card-image-wrap — Rounded container that clips the card image and
 * any overflow from the hover-scale effect. A portrait aspect-ratio (4/5)
 * ensures consistent card heights across all three cards on mobile.
 */
.value-card-image-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background-color: #e0e0e0;
}

/*
 * .value-card-image-wrap img — Product or lifestyle photograph filling the
 * card image area. object-fit:cover prevents letterboxing; the transform
 * transition enables the zoom-in hover effect.
 */
.value-card-image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/*
 * .value-card:hover .value-card-image-wrap img — Scales the card image 4%
 * on hover to match the interactive zoom used on category cards.
 */
.value-card:hover .value-card-image-wrap img { transform: scale(1.04); }

/*
 * .value-overlay — Gradient fade layered over the bottom 65% of the card
 * image to darken it for text legibility. Currently background:none;
 * gradient colours are set per-card via inline styles.
 * pointer-events:none keeps clicks reaching the parent anchor.
 */
.value-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 65%;
    background: none;
    pointer-events: none;
}

/*
 * .value-badge — Icon badge fixed to the top-right corner of each value
 * card, showing a brand or category symbol.
 * The light blue background (#ADCAF8) and rounded bottom-left corner give
 * it a consistent folded-corner look. z-index:2 keeps it above the image.
 */
.value-badge {
    position: absolute;
    top: 0; right: 0;
    background-color: #ADCAF8;
    width: 60px; height: 60px;
    border-bottom-left-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/*
 * .value-title — Product or category title overlaid on the lower portion
 * of the card image. White text with z-index:2 ensures it stays legible
 * over the gradient overlay; generous font-weight (800) adds punch.
 */
.value-title {
    position: absolute;
    bottom: 18px; left: 18px; right: 10px;
    color: #ffffff;
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    z-index: 2;
}

/*
 * .value-card-content — Text block below the image wrap containing a short
 * description. Centred alignment works for the stacked single-column layout.
 */
.value-card-content { text-align: center; }

/*
 * .value-card-content p — Short descriptive paragraph beneath each value
 * card image. Small muted text keeps it visually subordinate to the
 * bold card title above.
 */
.value-card-content p {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

/*
 * Desktop value prop — Applies at 769 px and wider.
 * Expands section padding, left-aligns the header, and switches the grid
 * to three equal columns. The image wrap aspect-ratio shifts to a slightly
 * shorter portrait (3/4) that suits the wider layout. Badge and title
 * dimensions are bumped up for the larger cards.
 */
@media (min-width: 769px) {
    .section-value-prop { padding: 60px 20px 70px; }

    .value-header {
        text-align: left;
        margin-bottom: 45px;
    }

    .value-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    .value-card-image-wrap { aspect-ratio: 3 / 4; }

    .value-badge { width: 68px; height: 68px; }

    .value-title { font-size: 1.35rem; bottom: 20px; left: 20px; }
}


/* ===========================================
   REVIEWS SECTION
   =========================================== */

/*
 * .section-reviews — Full-width section that houses a third-party customer
 * reviews widget. The light grey background (#f8f9fa) visually separates
 * this section from adjacent white-background sections on the page.
 */
.section-reviews {
    background-color: #f8f9fa;
    padding: 65px 20px 70px;
}

/*
 * .reviews-container — Centred inner wrapper that constrains the reviews
 * content to a readable max-width of 1200 px on large screens.
 */
.reviews-container {
    max-width: 1200px;
    margin: 0 auto;
}

/*
 * .reviews-header — Centred heading block above the reviews widget,
 * containing the section title and a tagline.
 */
.reviews-header {
    text-align: left;
    margin-bottom: 45px;
}

/*
 * .reviews-header h2 — Bold section title in brand blue. Uses clamp() for
 * fluid type that grows from 2 rem on phones to 3.2 rem on wide screens.
 */
.reviews-header h2 {
    color: #1C48AA;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 12px 0;
    text-transform: none;
}

/*
 * .reviews-header p — Italic tagline below the reviews heading, styled in
 * a lighter shade of blue. Low font-weight (300) and italic style give it
 * a softer, editorial tone that complements the bold heading.
 */
.reviews-header p {
    color: #1C48AA;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 300;
    font-style: italic;
    margin: 0;
    text-transform: none;
}

/*
 * .reviews-widget-wrapper — Full-width container that hosts the embedded
 * third-party reviews widget (e.g. Trustpilot, Google Reviews).
 * width:100% ensures the widget can fill its available space.
 */
.reviews-widget-wrapper { width: 100%; }

/*
 * Rating-only reviews (no .wp-google-text) are removed from the DOM via JS
 * in google-reviews.php so the GRW slider's position math stays correct.
 * display:none was removed because it hides cards from CSS but NOT from the
 * slider's live HTMLCollection, causing prev/next to scroll to offsetLeft=0.
 */