/*
Theme Name: Engineer Child
Theme URI:
Template: engineer_theme
Author: ZarfDev
Author URI:
Description: Avril's Timber & Fencing. Product catalogue and homepage carousel built on Engineer Theme.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: engineer-child
*/

/* =============================================
   BRAND COLOURS

   Do NOT put a :root block here to set the brand
   palette. engineer_inline_colours() attaches the
   Customizer colours to the PARENT stylesheet
   handle, so they print before this file and a
   :root block here would beat them, locking the
   client out of the Customizer.

   The palette is seeded as Customizer values
   instead - see inc/branding.php.

   Only tokens the Customizer does not manage
   belong below, and they are prefixed --avrils-
   so they can never collide with a parent token.
   ============================================= */
:root {
    --avrils-wood:       #8B5E34;  /* walnut - badges, accents */
    --avrils-wood-dk:    #6F4A29;
    --avrils-oak:        #C4A484;  /* light oak */
    --avrils-timber:     #E8DFD3;  /* pale timber - subtle fills */
    --avrils-ink:        #2E2A24;  /* dark brown-black body text */
    --avrils-ink-soft:   #5A5248;
    --avrils-line:       #DED5C7;  /* warm border */

    --avrils-carousel-h: clamp(28rem, 68vh, 46rem);
    --avrils-radius:     var(--radius, 4px);
}

/* =============================================
   UTILITIES
   The parent does not define .screen-reader-text,
   so it is defined here. Standard WordPress
   implementation - visually hidden but still
   announced, and revealed on keyboard focus.
   ============================================= */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #fff;
    clip-path: none;
    color: var(--color-link);
    display: block;
    font-size: 1rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* =============================================
   HOMEPAGE CAROUSEL

   Base styles below assume NO JavaScript: the
   track is a horizontally scrollable, swipeable
   strip and every slide is reachable.

   carousel.js adds .is-enhanced, which switches
   it to one slide at a time.
   ============================================= */

.hero-carousel {
    position: relative;
    background-color: var(--color-brand);
    isolation: isolate;
}

.hero-carousel__viewport {
    overflow: hidden;
}

.hero-carousel__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.hero-carousel__track::-webkit-scrollbar {
    display: none;
}

.hero-carousel__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    min-height: var(--avrils-carousel-h);
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* --- Background image --- */
.hero-carousel__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-carousel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-carousel__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.1) 100%);
    pointer-events: none;
}

/* Dark-text slides shade towards white instead of black. */
.hero-carousel__slide--dark .hero-carousel__scrim {
    background: linear-gradient(100deg, #fff 0%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.15) 100%);
}

.hero-carousel__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: 4rem;
}

.hero-carousel__inner {
    max-width: 34rem;
    color: #fff;
}

.hero-carousel__slide--dark .hero-carousel__inner {
    color: var(--avrils-ink);
}

.hero-carousel__inner--centre {
    margin-inline: auto;
    text-align: center;
}

.hero-carousel__inner--right {
    margin-inline-start: auto;
    text-align: right;
}

/* --- Slide text --- */
.hero-carousel__badge {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.35em 0.9em;
    background-color: var(--avrils-wood);
    color: #fff;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.hero-carousel__heading {
    margin: 0 0 0.75rem;
    color: inherit;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
}

.hero-carousel__sub {
    margin: 0 0 1.25rem;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.5;
    opacity: 0.95;
}

.hero-carousel__price {
    margin: 0 0 1.5rem;
    font-size: 1.35rem;
    font-weight: 700;
}

.hero-carousel__price-unit {
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.85;
}

.hero-carousel__actions {
    margin: 0;
}

/* --- Arrows --- */
.hero-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--transition, 0.2s ease);
}

.hero-carousel.is-enhanced .hero-carousel__arrow {
    display: flex;
}

.hero-carousel__arrow:hover,
.hero-carousel__arrow:focus-visible {
    background-color: var(--color-btn-bg);
}

.hero-carousel__arrow:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.hero-carousel__arrow--prev { left: 1rem; }
.hero-carousel__arrow--next { right: 1rem; }

/* --- Dots --- */
.hero-carousel__dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    z-index: 4;
    display: none;
    gap: 0.75rem;
    transform: translateX(-50%);
}

.hero-carousel.is-enhanced .hero-carousel__dots {
    display: flex;
}

.hero-carousel__dot {
    position: relative;
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--transition, 0.2s ease), transform var(--transition, 0.2s ease);
}

/* With no swipe gesture, the dots are a primary control on touch screens, and a
   12px dot is well under the 24px minimum target size. Grow the hit area
   without growing the dot. The 0.375rem expansion each side matches the 0.75rem
   gap above, so neighbouring targets meet but never overlap. */
.hero-carousel__dot::after {
    content: "";
    position: absolute;
    inset: -0.375rem;
    border-radius: 50%;
}

.hero-carousel__dot.is-active {
    background-color: #fff;
    transform: scale(1.25);
}

.hero-carousel__dot:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* --- Autoplay progress bar --- */
.hero-carousel__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: none;
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.25);
}

.hero-carousel.is-enhanced.is-playing .hero-carousel__progress {
    display: block;
}

.hero-carousel__progress > span {
    display: block;
    width: 0;
    height: 100%;
    background-color: var(--color-btn-bg);
}

/* Autoplay holds still while the carousel is hovered or focused, so the bar has
   to hold with it. No JS class involved -- the browser already knows, and a
   class kept in step by events can be left stranded when one does not fire.
   !important because restartProgress() writes the animation shorthand as an
   inline style, which resets play-state to running.
   :hover is gated on a real pointer to match HOLD_SELECTOR in carousel.js: on a
   touch screen a tap can leave :hover stuck until the user taps elsewhere. */
.hero-carousel:focus-within .hero-carousel__progress > span {
    animation-play-state: paused !important;
}

@media (hover: hover) {
    .hero-carousel:hover .hero-carousel__progress > span {
        animation-play-state: paused !important;
    }
}

@keyframes avrils-carousel-progress {
    from { width: 0; }
    to   { width: 100%; }
}

/* --- Contact panel overlay --- */
.hero-carousel__panel {
    position: relative;
    z-index: 3;
    background-color: var(--color-brand);
    padding-block: 2rem;
}

@media (min-width: 62em) {
    .hero-carousel--with-panel .hero-carousel__inner {
        max-width: 30rem;
    }

    .hero-carousel__panel {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        display: flex;
        align-items: center;
        width: 100%;
        background-color: transparent;
        pointer-events: none;
        padding-block: 0;
    }

    .hero-carousel__panel .container {
        display: flex;
        justify-content: flex-end;
    }

    .hero-carousel__panel .hero__contact-panel {
        pointer-events: auto;
        width: min(22rem, 100%);
    }
}

/* =============================================
   CAROUSEL - ENHANCED (JavaScript available)
   ============================================= */

.hero-carousel.is-enhanced .hero-carousel__track {
    overflow: visible;
    scroll-snap-type: none;
}

/* Cross-fade: stack every slide in one grid cell. */
.hero-carousel--fade.is-enhanced .hero-carousel__track {
    display: grid;
}

.hero-carousel--fade.is-enhanced .hero-carousel__slide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
}

.hero-carousel--fade.is-enhanced .hero-carousel__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Slide across: JS sets translateX on the track. */
.hero-carousel--slide.is-enhanced .hero-carousel__track {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* --- Motion on the active slide --- */
.hero-carousel.is-enhanced .hero-carousel__slide.is-active .hero-carousel__img {
    animation: avrils-kenburns 14s ease-out both;
}

@keyframes avrils-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

.hero-carousel.is-enhanced .hero-carousel__slide.is-active .hero-carousel__badge,
.hero-carousel.is-enhanced .hero-carousel__slide.is-active .hero-carousel__heading,
.hero-carousel.is-enhanced .hero-carousel__slide.is-active .hero-carousel__sub,
.hero-carousel.is-enhanced .hero-carousel__slide.is-active .hero-carousel__price,
.hero-carousel.is-enhanced .hero-carousel__slide.is-active .hero-carousel__actions {
    animation: avrils-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.hero-carousel.is-enhanced .hero-carousel__slide.is-active .hero-carousel__heading { animation-delay: 0.08s; }
.hero-carousel.is-enhanced .hero-carousel__slide.is-active .hero-carousel__sub     { animation-delay: 0.16s; }
.hero-carousel.is-enhanced .hero-carousel__slide.is-active .hero-carousel__price   { animation-delay: 0.24s; }
.hero-carousel.is-enhanced .hero-carousel__slide.is-active .hero-carousel__actions { animation-delay: 0.32s; }

@keyframes avrils-rise {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
}

/* =============================================
   PRODUCT CATEGORY TILES (homepage)

   Fills the slot the parent's services grid used
   to hold - see inc/homepage.php. The proportions
   deliberately echo the parent's .service-card so
   the homepage reads as one design, but this is a
   separate component: the parent's card is
   client-neutral and must stay free to change
   without dragging this with it.
   ============================================= */

.category-section {
    padding-block: 4rem;
}

.category-section__heading {
    margin-bottom: 2rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.5rem;
}

.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 15rem;
    overflow: hidden;
    border-radius: var(--avrils-radius);
    background-color: var(--avrils-oak);
    text-decoration: none;
    box-shadow: 0 0.125rem 0.75rem rgba(46, 42, 36, 0.18);
    transition: transform var(--transition, 0.2s ease), box-shadow var(--transition, 0.2s ease);
}

.category-card:hover,
.category-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(46, 42, 36, 0.28);
}

/* The picture fills the tile and everything else stacks on top of it. */
.category-card__media {
    position: absolute;
    inset: 0;
    display: block;
}

.category-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--avrils-oak);
    color: rgba(255, 255, 255, 0.85);
    font-size: 2.5rem;
}

.category-card__body {
    position: relative;
    z-index: 1;
    display: block;
    padding: 2.5rem 1.25rem 1.25rem;
    background: linear-gradient(transparent, rgba(28, 24, 18, 0.85));
    color: #fff;
}

.category-card__title {
    display: block;
    font-family: var(--font-heading, inherit);
    font-size: 1.05rem;
    font-weight: 600;
}

.category-card__count {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.category-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    background-color: rgba(28, 24, 18, 0.88);
    color: #fff;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.category-card:hover .category-card__overlay,
.category-card:focus-visible .category-card__overlay {
    opacity: 1;
}

.category-card__overlay-text {
    font-size: 0.9rem;
    line-height: 1.6;
}

.category-card__overlay-cta {
    font-weight: 600;
    color: var(--color-secondary, #6B7A45);
}

.category-section__all {
    margin-top: 2rem;
    text-align: center;
}

.category-section__all i {
    margin-left: 0.4rem;
}

/* The overlay is a nicety, never the only route to anything -- the name, the
   count and the link itself do not depend on it. Sticky :hover on a touch
   screen would otherwise leave a tapped tile covered until the next tap. */
@media (hover: none) {
    .category-card__overlay {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-card,
    .category-card__overlay {
        transition: none;
    }

    .category-card:hover,
    .category-card:focus-visible {
        transform: none;
    }
}

/* =============================================
   PRODUCT GRID AND CARDS
   ============================================= */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.5rem;
    margin-block: 2rem;
}

.product-card {
    background-color: #fff;
    border: 1px solid var(--avrils-line);
    border-radius: var(--avrils-radius);
    overflow: hidden;
    transition: transform var(--transition, 0.2s ease), box-shadow var(--transition, 0.2s ease);
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(46, 42, 36, 0.12);
}

.product-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.product-card__link:focus-visible {
    outline: 3px solid var(--color-link);
    outline-offset: -3px;
}

.product-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--avrils-timber);
}

.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--avrils-oak);
    font-size: 2.5rem;
}

.product-card__stock {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25em 0.7em;
    border-radius: 999px;
    background-color: rgba(46, 42, 36, 0.85);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.product-card__stock--in_stock      { background-color: #3D6B3D; }
.product-card__stock--made_to_order { background-color: var(--avrils-wood); }
.product-card__stock--seasonal      { background-color: #7A6A3D; }
.product-card__stock--out_of_stock  { background-color: #6B6257; }

.product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.1rem;
}

.product-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--color-heading);
}

.product-card__excerpt {
    margin: 0 0 1rem;
    color: var(--avrils-ink-soft);
    font-size: 0.925rem;
    line-height: 1.5;
}

.product-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: auto 0 0;
}

.product-card__price {
    font-weight: 700;
    color: var(--color-heading);
}

.product-card__price-unit {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--avrils-ink-soft);
}

.product-card__cta {
    color: var(--color-link);
    font-size: 0.9rem;
    font-weight: 600;
}

.product-grid__empty {
    padding: 2rem 0;
    color: var(--avrils-ink-soft);
}

/* =============================================
   PRODUCT FILTERS
   ============================================= */

.product-filters {
    margin-block: 1.5rem 0.5rem;
}

.product-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.product-filters__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5em 1em;
    border: 1px solid var(--avrils-line);
    border-radius: 999px;
    background-color: #fff;
    color: var(--avrils-ink);
    font-size: 0.925rem;
    text-decoration: none;
    transition: background-color var(--transition, 0.2s ease), border-color var(--transition, 0.2s ease), color var(--transition, 0.2s ease);
}

.product-filters__link:hover,
.product-filters__link:focus-visible {
    border-color: var(--color-link);
    color: var(--color-link);
}

.product-filters__link.is-active {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
}

.product-filters__count {
    font-size: 0.75rem;
    opacity: 0.7;
}

.product-filters__link--sub {
    padding: 0.35em 0.8em;
    background-color: var(--avrils-timber);
    border-color: transparent;
    font-size: 0.85rem;
}

/* =============================================
   SINGLE PRODUCT
   ============================================= */

.product-breadcrumb {
    margin-block: 1.5rem 0.5rem;
    font-size: 0.9rem;
}

.product-breadcrumb a {
    color: var(--color-link);
}

.product-layout {
    display: grid;
    gap: 2.5rem;
    align-items: start;
    margin-block: 1.5rem 3rem;
}

@media (min-width: 60em) {
    .product-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }

    .product-layout__sidebar {
        position: sticky;
        top: 6rem;
    }
}

.product-header__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.product-header__cat {
    color: var(--color-link);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.product-header__code {
    margin: 0.75rem 0 0;
    color: var(--avrils-ink-soft);
    font-size: 0.9rem;
}

.product-header__code span {
    font-weight: 600;
    color: var(--avrils-ink);
}

.product-figure {
    margin: 1.5rem 0;
}

.product-figure__img {
    width: 100%;
    height: auto;
    border-radius: var(--avrils-radius);
    display: block;
}

.product-keyfacts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.5rem;
    margin-block: 1.5rem;
    padding: 1.1rem 1.25rem;
    background-color: var(--avrils-timber);
    border-radius: var(--avrils-radius);
}

.product-keyfacts__price {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-heading);
}

.product-keyfacts__unit {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--avrils-ink-soft);
}

.product-keyfacts__note {
    width: 100%;
    margin: 0;
    color: var(--avrils-ink-soft);
    font-size: 0.85rem;
}

.product-keyfacts__stock {
    margin: 0;
    padding: 0.3em 0.9em;
    border-radius: 999px;
    background-color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Out of stock is the only status that must not read as an invitation, so it
   is the only one that loses the plain white pill. Muted stone rather than
   alarm red: this is a guide-price catalogue, not a checkout, and the customer
   is still being asked to enquire. */
.product-keyfacts__stock--out_of_stock {
    background-color: #EFECE7;
    color: var(--avrils-ink-soft);
}

.product-keyfacts__lead {
    font-weight: 400;
    color: var(--avrils-ink-soft);
}

.product-section {
    margin-block: 2.5rem;
}

.product-section__heading {
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--avrils-line);
    font-size: 1.3rem;
    color: var(--color-heading);
}

.product-features {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-features li {
    position: relative;
    margin-bottom: 0.6rem;
    padding-left: 1.75rem;
}

.product-features li::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 0.75rem;
    height: 0.4rem;
    border-left: 2px solid var(--color-btn-bg);
    border-bottom: 2px solid var(--color-btn-bg);
    transform: rotate(-45deg);
}

/* Tables scroll inside their own box rather than pushing the page wide. */
.product-table-wrap {
    overflow-x: auto;
}

.product-table {
    width: 100%;
    border-collapse: collapse;
}

.product-table th,
.product-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--avrils-line);
    text-align: left;
    vertical-align: top;
}

.product-table th {
    width: 40%;
    font-weight: 600;
    color: var(--color-heading);
    background-color: var(--avrils-timber);
}

/* The specification table is label/value, so its 40% first column is right.
   The sizes table is two or three real columns and needs to share the width
   out instead. */
.product-table thead th {
    width: auto;
    border-bottom-width: 2px;
}

.product-table--sizes th,
.product-table--sizes td {
    width: auto;
}

.product-table--sizes tbody th {
    background-color: transparent;
}

/* Selector carries the table class so it beats `.product-table th`, which
   would otherwise win on specificity and left-align the amounts. */
.product-table th.product-table__price,
.product-table td.product-table__price {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.product-datasheet {
    margin-block: 2rem;
}

.product-datasheet a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-link);
    font-weight: 600;
}

.product-related {
    margin-block: 3rem;
}

/* =============================================
   PAGINATION
   The parent has no pagination styles; the
   product archive is the first template to need
   them.
   ============================================= */

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-block: 2.5rem;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.5em 0.75em;
    border: 1px solid var(--avrils-line);
    border-radius: var(--avrils-radius);
    background-color: #fff;
    color: var(--avrils-ink);
    text-decoration: none;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
    border-color: var(--color-link);
    color: var(--color-link);
}

.pagination .page-numbers.current {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
}

/* =============================================
   REDUCED MOTION

   Everything decorative stops. The carousel still
   works; it just changes instantly instead of
   animating, and carousel.js separately refuses
   to autoplay under this setting.
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    .hero-carousel *,
    .product-card {
        animation: none !important;
        transition: none !important;
    }

    .hero-carousel--slide.is-enhanced .hero-carousel__track {
        transition: none !important;
    }

    .product-card:hover,
    .product-card:focus-within {
        transform: none;
    }
}

/* =============================================
   HOME CONTENT + MAP

   The parent renders the page's editor content in
   a centred 800px column. Split in half with a map
   beside it, that column would be about 380px of
   text, so the section widens to the site's normal
   container instead -- 800px is a reading measure
   for full-width prose, not for half a row.

   One column below 60em: a map in a phone-width
   half-column is unreadable, and the text is what
   the customer came for, so the text goes first.
   ============================================= */

.home-content--split .container {
    max-width: var(--container-width, 1200px);
}

.home-content__split {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 60em) {
    .home-content__split {
        /* minmax(0, ...) rather than a bare 1fr: a grid track's default
           min-width is auto, so a long unbroken word or a wide block in the
           editor content could otherwise push the text column past its share
           and squeeze the map. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        /* Stretch so the map matches the height of whatever the client writes
           rather than needing a height picked here that goes stale. */
        align-items: stretch;
    }
}

.home-content__map {
    display: flex;
    /* The floor for short content, and the whole height on mobile where there
       is no neighbouring column to take the height from. */
    min-height: 22rem;
}

.home-content__map iframe {
    flex: 1;
    width: 100%;
    border: 0;
    border-radius: var(--avrils-radius);
    /* Google's frame is a flat rectangle; the ring keeps it from bleeding into
       the white section behind it. */
    box-shadow: 0 0 0 1px var(--avrils-line);
}