/*
 * .hero-countdown — Full-viewport-height hero banner for the Weekly Deals page.
 * Uses flexbox to vertically centre the foreground content over the background
 * image. overflow:hidden clips the absolutely positioned background so it never
 * bleeds outside the section bounds.
 */
.hero-countdown {
    position: relative;
    width: 100%;
    height: 82vh;
    min-height: 560px;
    display: flex;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.hero-content-wrapper {
    width: 100%;
}

@media (min-width: 769px) {
    .hero-content-wrapper {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .hero-content {
        max-width: 800px;
    }

    .hero-headline {
        white-space: nowrap;
    }
}

/*
 * .hero-bg — Absolutely positioned layer that stretches edge-to-edge behind
 * all foreground content. z-index:1 keeps it beneath every other layer in
 * the stacking context established by .hero-countdown.
 */
.hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

/*
 * .hero-bg img — Full-bleed background photograph for the deals hero.
 * object-fit:cover fills the entire container without distorting the image,
 * cropping from the centre to keep the focal point visible at any viewport.
 * display:block removes the browser's default inline gap below the image.
 */
.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/*
 * .hero-overlay — Optional tint or gradient layer sitting between the
 * background photo (z-index:1) and the text content (z-index:3).
 * Currently background:none; a colour or gradient can be added without
 * touching the HTML structure.
 */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: none;
    z-index: 2;
}

/*
 * .hero-content — Foreground wrapper containing the headline, subtext,
 * and countdown timer widget. z-index:3 keeps it above the background
 * and overlay layers. max-width:560px prevents text lines from becoming
 * too long on ultra-wide screens.
 */
.hero-content {
    position: relative;
    z-index: 3;
    max-width: 560px;
    color: white;
}

/*
 * .hero-headline — Large display heading announcing the weekly deals event.
 * clamp() scales fluidly from 3 rem on mobile up to 5 rem on wide screens.
 * The text-shadow adds depth and keeps the white text legible over bright
 * or busy background images.
 */
.hero-headline {
    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;
}

.headline-line {
    display: block;
}

/*
 * .hero-subtext — Secondary line of copy below the headline that typically
 * describes the deal duration or scope. A lighter text-shadow gives it the
 * same legibility as the headline but with less visual weight.
 */
.hero-subtext {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 600;
    margin: 0 0 28px 0;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/*
 * .timer-widget — Inline countdown clock showing time remaining in the
 * weekly deal. The yellow border (#F8D648) and semi-transparent dark
 * background with blur create a distinct frosted-glass card that
 * stands out against the hero image.
 */
.timer-widget {
    display: inline-flex;
    border: 2px solid #F8D648;
    border-radius: 8px;
    padding: 12px 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

/*
 * .time-block — Individual unit cell inside the countdown timer (days,
 * hours, minutes, seconds). Column flex layout stacks the number above
 * its label. A right border in translucent yellow separates each block;
 * the last block removes this border via .time-block-last.
 */
.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 22px;
    border-right: 2px solid rgba(255, 209, 0, 0.6);
}

/*
 * .time-block-last — Modifier applied to the final time block (seconds)
 * to remove its trailing right border, keeping the timer widget visually
 * clean on both sides.
 */
.time-block-last {
    border-right: none;
}

/*
 * .time-number — Large bold numeral inside each countdown block.
 * Brand yellow (#F8D648) makes the digits eye-catching against the dark
 * timer background. line-height:1 prevents extra whitespace above/below.
 */
.time-number {
    font-size: 2.6rem;
    font-weight: 900;
    color: #F8D648;
    line-height: 1;
}

/*
 * .time-label — Uppercase abbreviation below each countdown numeral
 * (e.g. "HRS", "MIN"). Smaller size and matching yellow colour keep it
 * visually grouped with its number without competing for attention.
 */
.time-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #F8D648;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/*
 * Mobile hero countdown — Applies at 768 px and below.
 * Reduces horizontal padding and minimum height to fit small screens.
 * Moves the content to the bottom (align-items:flex-end) so the hero
 * image remains visible above the text. Timer and block sizes shrink
 * proportionally to avoid horizontal overflow.
 */
@media (max-width: 768px) {
    .hero-countdown {
        padding: 40px 24px 60px;
        min-height: 520px;
        align-items: center;
    }

    .hero-overlay {
        background: none;
    }

    .hero-headline {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .hero-subtext { font-size: 1.1rem; }

    .timer-widget { padding: 10px 0; }
    .time-block { padding: 4px 14px; }
    .time-number { font-size: 1.9rem; }
    .time-label { font-size: 0.75rem; }
}

/*
 * .section-promo-carousel — Section wrapping a horizontally scrollable
 * carousel of promotional banner images. White background keeps it neutral
 * so the colourful promo banners stand out.
 */
.section-promo-carousel {
    padding: 30px 20px 35px;
    background-color: #ffffff;
}

@media (min-width: 769px) {
    .section-promo-carousel {
        padding-left: 70px;
        padding-right: 70px;
    }

}

/*
 * .promo-container — Centred inner wrapper constraining the promo carousel
 * to 1100 px on wide screens, ensuring consistent alignment with other
 * page sections.
 */
.promo-container {
    max-width: 1100px;
    margin: 0 auto;
}

/*
 * .promo-header — Column-flex header above the promo carousel, holding the
 * section title and the desktop CTA button side by side on larger screens
 * (overridden to centred on mobile). align-items:flex-start left-aligns
 * both children by default.
 */
.promo-header {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/*
 * .promo-title — Section heading for the promo carousel in brand blue.
 * clamp() scales fluidly between 2 rem and 2.8 rem across viewport widths.
 */
.promo-title {
    color: #1C48AA;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900;
    margin: 0 0 15px 0;
    text-wrap: balance;
}

/*
 * .btn-deals — Shared base styles for both the desktop and mobile variants
 * of the "View All Deals" button. Flex centering aligns label and arrow
 * icon; the 0.2 s background transition keeps the hover colour change snappy.
 */
.btn-deals {
    background-color: #1C48AA;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

/*
 * .btn-deals:hover — Darkens the deals button to a deeper blue on hover.
 */
.btn-deals:hover { background-color: #1C48AA; }

/*
 * .btn-desktop — Size modifier for the deals button as it appears in the
 * desktop header (compact, inline with the title).
 */
.btn-desktop {
    padding: 15px 30px;
    font-size: 1.2rem;
}

/*
 * .btn-mobile — Size modifier for the deals button as it appears below the
 * carousel on mobile. Full-width up to 300 px with larger padding and font
 * for easy tapping on touch screens.
 */
.btn-mobile {
    padding: 15px 30px;
    font-size: 1.2rem;
}

/*
 * .btn-arrow — Arrow icon element appended inside deal buttons.
 * A slightly larger em-based font-size makes the arrow appear proportional
 * to the button label text.
 */
.btn-arrow { margin-left: 8px; font-size: 1.2em; line-height: 1; }

/*
 * .mobile-btn-wrapper — Wrapper that shows the mobile CTA button centred
 * below the promo carousel. Hidden by default (display:none) and revealed
 * only on mobile breakpoints.
 */
.mobile-btn-wrapper { display: none; }

/*
 * .carousel-ui-wrapper — Flex row that contains the scrollable track plus
 * the prev/next arrow buttons on either side. align-items:center keeps the
 * arrows vertically centred relative to the slide track.
 */
.carousel-ui-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

/*
 * .promo-track — Horizontally scrollable flex container holding the promo
 * slides. scroll-snap-type enforces one-slide-at-a-time snapping;
 * scrollbar-width:none hides the native scrollbar on Firefox and IE/Edge
 * (the ::-webkit-scrollbar rule covers Chrome/Safari).
 * scroll-behavior:smooth animates programmatic scroll calls from JS arrows.
 */
.promo-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
    flex-grow: 1;
    scroll-behavior: smooth;
}

/*
 * .promo-track::-webkit-scrollbar — Hides the native scrollbar in
 * WebKit-based browsers (Chrome, Safari, Edge on Chromium) so the track
 * appears clean on all platforms.
 */
.promo-track::-webkit-scrollbar { display: none; }

/*
 * .promo-slide — Individual promotional banner slide inside the track.
 * flex:0 0 calc(50% - 10px) shows two slides at a time on wider screens
 * (accounting for the 20 px gap). scroll-snap-align:start locks each slide
 * to the left edge when the user snaps through.
 */
.promo-slide {
    flex: 0 0 calc(50% - 10px);
    scroll-snap-align: start;
}

/*
 * .promo-img — Promotional banner image inside each slide.
 * Full width with auto height preserves the banner's natural aspect ratio.
 * border-radius:12px gives each banner a soft rounded look.
 */
.promo-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/*
 * .carousel-arrow — Navigation button flanking the promo track on either
 * side. Transparent background and no border keep it lightweight. A subtle
 * scale transform on hover adds tactile feedback without feeling heavy.
 */
.carousel-arrow {
    background: transparent;
    border: none;
    color: #555;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
    transition: color 0.2s, transform 0.2s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-arrow:hover { color: #000; }

.prev-arrow { left: -50px; }
.next-arrow { right: -50px; }

/*
 * Mobile promo carousel — Applies at 768 px and below.
 * Centres the header and title, hides the desktop button, and shows the
 * full-width mobile button below the track instead.
 * Padding is added to the carousel wrapper so the absolutely positioned
 * arrows have room without overlapping slides.
 * Each slide expands to 100% width so users see one at a time.
 */
@media (max-width: 768px) {
    .promo-header {
        align-items: center;
        text-align: center;
    }

    .promo-title {
        margin-bottom: 0;
    }

    .btn-desktop { display: none; }

    .mobile-btn-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 25px;
    }

    .carousel-ui-wrapper {
        padding: 0 40px;
        margin-bottom: 0;
    }

    .promo-track {
        padding: 10px 0;
    }

    .promo-slide {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }

    .prev-arrow { margin-right: 0; position: absolute; left: 4px; background: transparent; }
    .next-arrow { margin-left: 0; position: absolute; right: 4px; background: transparent; }
}

/*
 * .section-promo-event — Section showcasing a single featured promotional
 * event (e.g. a brand sale or seasonal campaign) with a large banner image.
 * White background keeps focus on the event imagery.
 */
.section-promo-event {
    padding: 30px 20px 35px;
    background-color: #ffffff;
}

/*
 * .promo-event-container — Centred inner wrapper capping the section at
 * 1100 px to maintain alignment with other page sections on wide viewports.
 */
.promo-event-container {
    max-width: 1100px;
    margin: 0 auto;
}

/*
 * .promo-event-header — Header block above the featured event image that
 * holds the title and a desktop CTA link. Left-aligned by default;
 * centred on mobile via the responsive override below.
 */
.promo-event-header {
    margin-bottom: 30px;
    text-align: left;
}

/*
 * .promo-event-title — Large bold heading naming the promotional event,
 * styled in brand blue. Fluid sizing spans from 2.2 rem to 3.2 rem.
 */
.promo-event-title {
    color: #1C48AA;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 900;
    margin: 0 0 15px 0;
    text-wrap: balance;
}

/*
 * .btn-promo — Base button styles shared by both the desktop and mobile
 * variants of the promo event CTA. Flex centering aligns text and icon;
 * dual transitions cover both colour and a subtle scale transform on hover.
 */
.btn-promo {
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
}

/*
 * .btn-promo-desktop — Desktop variant of the promo event CTA.
 * Solid blue background matching the brand palette with white text.
 * Shown inline next to the event title; hidden on mobile.
 */
.btn-promo-desktop {
    background-color: #1C48AA;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1.2rem;
}

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

/*
 * .btn-promo-mobile — Mobile variant of the promo event CTA.
 * Uses the brand yellow (#F8D648) background with blue text for strong
 * contrast and a different visual treatment from the desktop version.
 * Full-width up to 300 px for easy touch-target sizing on small screens.
 */
.btn-promo-mobile {
    background-color: #F8D648;
    color: #1C48AA;
    padding: 15px 30px;
    font-size: 1.2rem;
}

/*
 * .btn-promo-mobile:hover — Slightly darkens the yellow to a golden tone
 * on hover for interactive feedback.
 */
.btn-promo-mobile:hover {
    background-color: #e6bd00;
}

/*
 * .promo-event-mobile-btn-wrap — Centred flex wrapper that holds the mobile
 * CTA button below the event image. Hidden by default (display:none) and
 * shown only on the mobile breakpoint.
 */
.promo-event-mobile-btn-wrap {
    display: none;
}

/*
 * .promo-event-image-wrap — Rounded container for the featured event banner
 * image. overflow:hidden clips the image corners and contains any
 * hover-scale transform that would otherwise bleed outside the border-radius.
 */
.promo-event-image-wrap {
    border-radius: 8px;
    overflow: hidden;
}

/*
 * .promo-event-img — Full-width featured event banner photograph.
 * height:auto preserves the image's natural aspect ratio.
 * The transform transition powers the subtle zoom on hover.
 */
.promo-event-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}


/*
 * .promo-image-link — Block-level anchor wrapping the event image.
 * overflow:hidden clips the image zoom so it stays within the rounded
 * corners of the parent image wrap.
 */
.promo-image-link {
    display: block;
    overflow: hidden;
}

/*
 * .promo-image-link:hover .promo-event-img — Scales the event image 1.5%
 * on hover for a gentle zoom that reinforces the link is interactive.
 */
.promo-image-link:hover .promo-event-img {
    transform: scale(1.015);
}

/*
 * Mobile promo event — Applies at 768 px and below.
 * Centres the header text, hides the inline desktop CTA, and reveals the
 * full-width yellow mobile CTA below the event image instead.
 */
@media (max-width: 768px) {
    .promo-event-header {
        text-align: center;
    }

    .btn-promo-desktop {
        display: none;
    }

    .promo-event-mobile-btn-wrap {
        display: flex;
        justify-content: center;
        margin-top: 25px;
    }

    .promo-event-img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
    }
}

/*
 * .section-new-arrivals — New Arrivals banner section.
 * Reuses promo-event structural classes for layout and button styles.
 */
.section-new-arrivals {
    padding: 30px 20px 35px;
    background-color: #ffffff;
}

/*
 * Lock the new arrivals image to the same aspect ratio as the promo-event
 * desktop banner (1536×829). object-fit:cover fills the fixed frame cleanly
 * regardless of the natural dimensions of the uploaded image.
 */
.section-new-arrivals .promo-event-img {
    aspect-ratio: 1536 / 829;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .section-new-arrivals .promo-event-img {
        aspect-ratio: 1 / 1;
    }
}

/*
 * .section-explore — Section featuring a horizontally scrollable product
 * or category exploration carousel. Light grey background (#f2f4f7)
 * visually differentiates this section from adjacent white sections.
 */
.section-explore {
    padding: 30px 40px 35px;
    background-color: #f2f4f7;
}

@media (min-width: 769px) {
    .section-explore {
        padding-left: 70px;
        padding-right: 70px;
    }

}

/*
 * .explore-container — Centred inner wrapper constraining the explore
 * section to 1100 px on large screens.
 */
.explore-container {
    max-width: 1100px;
    margin: 0 auto;
}

/*
 * .explore-header — Heading block above the explore carousel, left-aligned
 * on desktop and centred on mobile via the responsive override.
 */
.explore-header {
    margin-bottom: 30px;
    text-align: left;
}

/*
 * .explore-title — Section title in brand blue. Fluid font size scales
 * between 2 rem and 3 rem with a 4vw midpoint for smooth scaling.
 */
.explore-title {
    color: #1C48AA;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    margin: 0 0 8px 0;
    line-height: 1.15;
    text-wrap: balance;
}

/*
 * .explore-subtext — Subtitle below the explore heading in a muted blue-grey
 * tone. Low font-weight (400) and fluid sizing keep it secondary to the title.
 */
.explore-subtext {
    color: #6b8ab5;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    font-weight: 400;
    margin: 0;
}

/*
 * .explore-ui-wrapper — Flex row housing the scrollable track between the
 * prev/next arrow buttons. gap:12px spaces the arrows away from the track
 * edges on desktop.
 */
.explore-ui-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

/*
 * .explore-track — Horizontally scrollable flex container for the explore
 * slides. Matching the promo track, scroll-snap-type and scrollbar-width:none
 * create a polished swipe experience. scroll-behavior:smooth animates arrow
 * button navigation.
 */
.explore-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 12px 4px;
    flex-grow: 1;
    scroll-behavior: smooth;
}

/*
 * .explore-track::-webkit-scrollbar — Hides the native scrollbar in
 * WebKit-based browsers for a clean, scrollbar-free carousel appearance.
 */
.explore-track::-webkit-scrollbar { display: none; }

/*
 * .explore-slide — Individual product or category card in the explore
 * carousel. Shows two cards at a time on wider screens (calc(50% - 12px)
 * accounts for the 24 px gap). White card background and padding create a
 * lifted tile effect against the grey section background.
 */
.explore-slide {
    flex: 0 0 calc(50% - 12px);
    scroll-snap-align: start;
    border-radius: 16px;
    background-color: #ffffff;
    padding: 24px;
    box-sizing: border-box;
}

/*
 * .explore-img — Product image inside each explore slide.
 * A square aspect-ratio (1/1) ensures all images are the same height
 * regardless of the product's natural dimensions.
 * object-fit:contain shows the full product without cropping.
 */
.explore-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

/*
 * .explore-arrow — Circular navigation button flanking the explore track.
 * White background with a subtle border and box-shadow lifts it visually
 * above the grey section background. Flex centering keeps the arrow icon
 * perfectly centred in the circle at any font size.
 */
.explore-arrow {
    background: #ffffff;
    border: 1px solid #e0e5ef;
    border-radius: 50%;
    color: #555;
    font-size: 1.4rem;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.explore-prev { left: -56px; }
.explore-next { right: -56px; }

/*
 * .explore-arrow:hover — On hover, the arrow icon and border shift to brand
 * blue and the box-shadow deepens with a blue tint, reinforcing the
 * interactive state without harsh contrast changes.
 */
.explore-arrow:hover {
    color: #1C48AA;
    border-color: #1C48AA;
    box-shadow: 0 4px 12px rgba(0, 70, 190, 0.2);
}

/*
 * Mobile explore section — Applies at 768 px and below.
 * Reduces horizontal padding, centres the header, removes the gap between
 * arrows and track (gap:0 lets the arrows be absolutely positioned over the
 * track edges). Each slide expands to 100% width. Arrows become absolutely
 * positioned with a semi-transparent white background so they float over the
 * scrollable track rather than flanking it.
 */
@media (max-width: 768px) {
    .section-explore {
        padding: 30px 20px;
    }

    .explore-header {
        text-align: center;
    }

    .explore-subtext {
        display: none;
    }

    .explore-ui-wrapper {
        gap: 0;
    }

    .explore-track {
        padding: 12px 0;
    }

    .explore-slide {
        flex: 0 0 100%;
    }

    .explore-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        background: rgba(255, 255, 255, 0.92);
    }

    .explore-prev { left: -6px; }
    .explore-next { right: -6px; }
}

/*
 * .section-newsletter — Email sign-up section at the bottom of the page.
 * The light blue background (#c6d8eb) creates a distinct band that draws
 * attention to the call-to-action without being as heavy as a dark section.
 */
.section-newsletter {
    padding: 30px 20px 40px;
    background-color: #c6d8eb;
}

/*
 * .newsletter-container — Narrow centred wrapper (max-width:600px) that
 * keeps the form compact and readable, preventing fields from stretching
 * to uncomfortable widths on large screens.
 */
.newsletter-container {
    max-width: 600px;
    margin: 0 auto;
}

/*
 * .newsletter-header — Centred heading block above the signup form,
 * containing the section title and a short incentive subtitle.
 */
.newsletter-header {
    text-align: center;
    margin-bottom: 30px;
}

/*
 * .newsletter-title — Bold brand-blue heading inviting the user to sign up.
 * clamp() scales the font fluidly from 2.5 rem to 3.5 rem so it remains
 * impactful on both mobile and desktop.
 */
.newsletter-title {
    color: #1C48AA;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 900;
    margin: 0 0 10px 0;
    line-height: 1.1;
}

/*
 * .newsletter-subtext — Short white supporting copy below the newsletter
 * title. Medium font-weight (500) keeps it readable against the blue
 * section background without competing with the bolder title.
 */
.newsletter-subtext {
    color: #ffffff;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 500;
    margin: 0;
}

/*
 * .newsletter-form — Vertical flex container stacking the field grid and
 * submit button with consistent 15 px gaps between each group.
 */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/*
 * .form-grid — Two-column grid layout for the first name and last name
 * input fields. The email field spans both columns via .input-full-width.
 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/*
 * .input-group input — Shared styles for all text input fields in the
 * newsletter form. White background with no border makes the fields
 * clean and consistent against the blue section background.
 * box-sizing:border-box ensures padding is included in the 100% width.
 */
.input-group input {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    color: #333;
    box-sizing: border-box;
}

/*
 * .input-group input::placeholder — Muted grey placeholder text inside
 * each input field, providing a clear but unobtrusive hint for users.
 */
.input-group input::placeholder {
    color: #888;
}

/*
 * .input-group input:focus — Adds a visible brand-blue outline when the
 * user focuses a field, meeting accessibility contrast requirements and
 * signalling the active input clearly.
 */
.input-group input:focus {
    outline: 2px solid #1C48AA;
}

/*
 * .input-full-width — Grid utility class that stretches a field across all
 * columns (1 / -1), used for the email address input so it occupies the
 * full form width below the two name fields.
 */
.input-full-width {
    grid-column: 1 / -1;
}

/*
 * .submit-wrapper — Centred wrapper for the form submission button,
 * ensuring the button is horizontally centred below the input grid on
 * all screen sizes.
 */
.submit-wrapper {
    text-align: center;
    margin-top: 10px;
}

/*
 * .btn-submit — Primary submit button for the newsletter form.
 * Brand blue background with white bold text. inline-flex centering aligns
 * any icon with the label. Transitions smoothly to a darker blue on hover.
 */
.btn-submit {
    background-color: #1C48AA;
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

/*
 * .btn-submit:hover — Darkens the submit button on hover to give clear
 * interactive feedback.
 */
.btn-submit:hover {
    background-color: #1C48AA;
}

/*
 * Mobile newsletter form — Applies at 768 px and below.
 * Collapses the two-column field grid to a single column so each input
 * is full-width and easy to tap. The submit button also goes full-width
 * with extra padding and a larger font size for a comfortable touch target.
 */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .btn-submit {
        width: 100%;
        padding: 16px 20px;
        font-size: 1.3rem;
    }
}