/* Content page styles */

/* ============================================================
   BALLMARKER LANDING PAGE
   ============================================================ */

/* ------------------------------------------------------------
   1. Hero
   ------------------------------------------------------------ */
.ballmarker-hero {
    overflow: hidden;
}

.ballmarker-hero > .container {
    position: relative;
    height: 82vh;
    min-height: 560px;
    max-height: 820px;
}

.ballmarker-hero__image-wrap {
    position: absolute;
    inset: 0;
}

.ballmarker-hero__image {
    width: 100%;
    height: 100%;
    background: var(--color-off-white);
    object-fit: cover;
    opacity: 0.8;
}

.ballmarker-hero__content {
    position: absolute;
    bottom: 20%;
    left: 9%;
    max-width: 520px;
}

.ballmarker-hero__heading {
    font-family: var(--font-heading);
    font-weight: 350; /* Semilight */
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    line-height: 1;
    color: var(--color-black);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.ballmarker-hero__sub {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    color: #101010;
    line-height: 1.4;
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   2. Description text + CTA
   ------------------------------------------------------------ */
.ballmarker-desc {
    padding: var(--spacing-xl) 0;
}

.ballmarker-desc__inner {
    display: grid;
    grid-template-columns: 492fr 567fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.ballmarker-desc__title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.6;
    color: var(--color-black);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.ballmarker-desc__body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
    margin-bottom: var(--spacing-md);
}

.ballmarker-desc__cta {
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding: 0.85rem 2.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid #142809;
    box-shadow: 6px 6px 6px 0 rgba(123, 178, 60, 0.5);
}

.ballmarker-desc__image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--color-off-white);
}

/* ------------------------------------------------------------
   3. Step into the Collection — product grid
   ------------------------------------------------------------ */
.ballmarker-collection {
    padding: var(--spacing-xl) 0;
    background: var(--color-white);
}

.ballmarker-collection__header {
    text-align: center;
    margin-bottom: 5rem; /* Figma: 80px from title baseline to grid */
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* 40px gap between label and title per Figma */
}

.ballmarker-collection__label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.4;
    color: #101010;
    margin-bottom: 0;
}

.ballmarker-collection__title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    line-height: 1.5;
    color: #101010;
    text-transform: uppercase;
}

.ballmarker-collection__grid {
    column-gap: 6px;
    row-gap: 5rem; /* Figma: 80px between product rows */
}

.ballmarker-collection__empty {
    text-align: center;
    color: var(--color-gray);
    padding: var(--spacing-lg) 0;
}

/* ------------------------------------------------------------
   4. Style With — cross-sell gloves
   ------------------------------------------------------------ */
.ballmarker-style-with {
    padding: var(--spacing-xl) 0;
    background: var(--color-white);
}

.ballmarker-style-with__heading {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.6;
    color: var(--color-black);
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 8rem; /* 128px per Figma */
}

.ballmarker-style-with__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.ballmarker-style-with__item {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.ballmarker-style-with__image-wrap {
    overflow: hidden;
    aspect-ratio: 1;
    margin-bottom: 3.75rem; /* 60px per Figma (744 - 684) */
}

.ballmarker-style-with__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ballmarker-style-with__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-off-white);
}

.ballmarker-style-with__name {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 1.875rem;
    line-height: 1.6;
    color: var(--color-black);
    margin-bottom: 0;
}

.ballmarker-style-with__copy {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: #101010;
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 960px) {
    .ballmarker-desc__inner {
        grid-template-columns: 1fr;
    }

    .ballmarker-desc__image {
        aspect-ratio: 4 / 3;
    }

    .ballmarker-collection__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ballmarker-hero {
        height: 70vh;
    }

    .ballmarker-hero__heading {
        font-size: 2.25rem;
    }

    .ballmarker-hero__sub {
        font-size: 1.1rem;
    }

    .ballmarker-style-with__grid {
        grid-template-columns: 1fr;
    }

    .ballmarker-collection__grid {
        grid-template-columns: 1fr;
    }
}

/* === Privacy & Terms === */

.page-privacy .privacy-hero {
    width: 100%;
    overflow: hidden;
    padding: 0 32px;
    margin-top: 24px;
}

.page-privacy .privacy-hero__image {
    width: 100%;
    max-width: 1376px;
    height: 392px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.page-privacy .privacy-container {
    max-width: 916px;
    padding: 88px var(--container-padding) 0;
    margin-inline: auto;
}

.privacy-page-title {
    font-family: var(--font-heading);
    font-size: 2.375rem;
    font-weight: 300;
    line-height: 1.5;
    color: #101010;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 88px;
}

.privacy-section {
    margin-bottom: 80px;
}

.privacy-section__heading {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-black);
    text-align: center;
    margin: 0 0 40px;
}

.privacy-section__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
}

.privacy-section__body p {
    margin: 0 0 1em;
}

.privacy-section__body h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 1.5em 0 0.5em;
    text-align: left;
}

.privacy-section__body ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0 0 1em;
}

.privacy-section__body li {
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.privacy-section__body a {
    color: var(--color-black);
    text-decoration: underline;
}

/* Have Questions section */
.page-privacy .privacy-questions {
    margin: 24px 0 96px;
    padding: 0;
}

.privacy-questions__inner {
    display: grid;
    grid-template-columns: 345px 1fr;
    gap: 121px;
    align-items: center;
    max-width: 1036px;
    margin: 0 auto;
}

.privacy-questions__image {
    width: 345px;
    height: 345px;
    object-fit: cover;
    display: block;
}

.privacy-questions__content {
    max-width: 474px;
}

.privacy-questions__heading {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-black);
    text-align: center;
    margin: 0 0 24px;
}

.privacy-questions__content p {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    text-align: justify;
    margin: 0 0 0.5em;
}

.privacy-questions__content a {
    text-decoration: underline;
    color: var(--color-black);
}

@media (max-width: 1024px) {
    .page-privacy .privacy-container {
        padding-top: 64px;
    }

    .privacy-page-title {
        margin-bottom: 56px;
    }

    .privacy-section {
        margin-bottom: 56px;
    }

    .privacy-questions__inner {
        gap: 64px;
    }
}

@media (max-width: 768px) {
    .page-privacy .privacy-hero {
        padding: 0 16px;
        margin-top: 16px;
    }

    .page-privacy .privacy-hero__image {
        height: 220px;
    }

    .page-privacy .privacy-container {
        padding-top: 48px;
    }

    .privacy-page-title {
        font-size: 1.75rem;
        margin-bottom: 40px;
    }

    .privacy-section {
        margin-bottom: 48px;
    }

    .privacy-section__heading,
    .privacy-questions__heading {
        font-size: 1.5rem;
    }

    .privacy-section__body,
    .privacy-questions__content p {
        text-align: left;
    }

    .privacy-questions__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .privacy-questions__image {
        width: 100%;
        max-width: 345px;
        height: auto;
        aspect-ratio: 1;
        margin: 0 auto;
    }

    .page-privacy .privacy-questions {
        margin: 16px 0 64px;
    }
}

/* === Contact Page === */
.page-contact .container {
    max-width: 1200px;
    padding: var(--spacing-xl) var(--container-padding);
}

.contact-intro {
    text-align: center;
    max-width: 710px;
    margin: 0 auto var(--spacing-xl);
}

.contact-title {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.contact-subtitle {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-text);
}

/* Two-column layout: image+sidebar on left, form on right */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 455px;
    gap: var(--spacing-xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .contact-layout {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

.contact-left__image {
    width: 100%;
    aspect-ratio: 571 / 930;
    object-fit: cover;
    display: block;
    margin-bottom: var(--spacing-lg);
}

.contact-sidebar {
    margin-top: var(--spacing-lg);
}

.contact-sidebar__quote {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: var(--spacing-md);
}

.contact-sidebar__body {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
}

.contact-sidebar__list {
    list-style: disc;
    padding-left: 1.25rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    margin-top: var(--spacing-sm);
}

.contact-sidebar__list li {
    margin-bottom: 0.25rem;
}

.contact-sidebar__list a {
    color: var(--color-text);
    text-decoration: none;
}

.contact-sidebar__list a:hover {
    text-decoration: underline;
}

.contact-form-wrap__heading {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.contact-form {
    margin-top: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group--name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .form-group--name-row {
        grid-template-columns: 1fr;
    }
}

.form-group label,
.form-group__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 300;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
}

.form-group input,
.form-group textarea,
.form-group__select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #0d520f;
    background: #fff;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 300;
    transition: border-color 0.2s;
    border-radius: 0;
    height: 48px;
}

.form-group__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23101010' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    color: #6f6f6f;
    cursor: pointer;
}

.form-group textarea {
    height: auto;
    min-height: 200px;
    resize: vertical;
}

.form-group__select:focus,
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #142809;
}

/* Radio group for civility */
.form-group__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-top: 0.25rem;
}

.form-group__radio-label {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--color-black);
    cursor: pointer;
}

.form-group__radio-label input[type="radio"] {
    width: 48px;
    height: 48px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #0d520f;
    background: var(--color-white);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.form-group__radio-label input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 10px;
    background: #142809;
}

.form-group__char-count {
    font-size: 0.75rem;
    font-weight: 300;
    color: #6f6f6f;
    margin-top: 0.25rem;
}

/* Contact form submit button */
.contact-form__submit {
    display: block;
    width: 130px;
    height: 52px;
    margin: var(--spacing-md) auto 0;
    background: #142809;
    color: #fff;
    border: none;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.contact-form__submit:hover {
    opacity: 0.9;
}

.form-error {
    color: #c00;
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
}

.contact-confirm {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

/* === Search Page === */
.page-search .container {
    padding: var(--spacing-xl) var(--container-padding);
    max-width: 1280px;
}

/* Search bar wrapper with close button */
.search-bar-wrap {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    max-width: 960px;
    margin: 0 auto var(--spacing-xl);
}

.page-search .search-form {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 686px;
}

.search-form__input-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    border: 1px solid #0d520f;
    background: #fff;
    box-shadow: 6px 6px 6px 0 rgba(123, 178, 60, 0.5);
    height: 56px;
    padding: 0 1rem;
    gap: 0.75rem;
}

.search-form__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.search-field {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-black);
    padding: 0;
    height: 100%;
}

.search-field::placeholder {
    color: #6f6f6f;
}

.search-field:focus {
    outline: none;
}

.search-submit {
    display: none;
}

.search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #101010;
    text-decoration: none;
}

.search-close:hover {
    opacity: 0.7;
}

/* Search results heading */
.search-results__heading {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: var(--spacing-lg);
    color: var(--color-black);
}

/* Popular Products heading */
.search-popular__heading {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: var(--spacing-lg);
    color: var(--color-black);
}

/* Search product grid: 4 columns */
.search-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    row-gap: 80px;
}

@media (max-width: 1024px) {
    .search-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .search-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .search-product-grid {
        grid-template-columns: 1fr;
    }
}

.search-results {
    margin-top: var(--spacing-md);
}

.no-results {
    text-align: center;
    padding: var(--spacing-md) 0;
    color: var(--color-gray);
}

/* ==========================================================================
   Support Page — page-templates/page-support.php
   ========================================================================== */

/* ── Hero / Page Title ─────────────────────────────────────────────────────── */
.support-hero {
    padding: var(--spacing-md) 0;
}

.support-hero__title {
    font-family: var(--font-heading);
    font-size: 1.875rem; /* 30px – Heading 2 token */
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-black);
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

/* ── In-page Navigation ────────────────────────────────────────────────────── */
.support-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-light);
    padding: var(--spacing-sm) 0;
}

.support-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.support-nav__link {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-black);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.support-nav__link:hover,
.support-nav__link:focus {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ── Shared Section Styles ─────────────────────────────────────────────────── */
.support-section {
    padding: var(--spacing-xl) 0;
    scroll-margin-top: 8rem; /* offset for fixed header when navigating via anchor links */
}

.support-section + .support-section {
    border-top: 1px solid var(--color-gray-light);
}

.support-section__title {
    font-family: var(--font-heading);
    font-size: 1.875rem; /* 30px – Heading 2 token */
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-black);
    text-transform: uppercase;
    margin: 0 0 var(--spacing-lg);
    text-align: center;
}

/* ── Sizing Chart Section ──────────────────────────────────────────────────── */
.support-sizing__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.support-sizing__hand-img {
    width: 100%;
    height: auto;
    display: block;
}

.support-sizing__how-title {
    font-family: var(--font-body);
    font-size: 1.5rem; /* 24px – Paragraph lg token */
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-black);
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 var(--spacing-md);
}

.support-sizing__intro {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
    margin: 0 0 var(--spacing-md);
}

.support-sizing__table-label {
    font-family: var(--font-heading);
    font-size: 1rem; /* 16px – Heading 3 token */
    font-weight: 300;
    color: var(--color-black);
    text-transform: uppercase;
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.support-sizing__table-wrap {
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

.support-sizing__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-black);
}

.support-sizing__table thead {
    background: var(--color-primary);
    color: var(--color-white);
}

.support-sizing__table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: 300;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.support-sizing__table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-light);
}

.support-sizing__table tbody tr:last-child td {
    border-bottom: none;
}

.support-sizing__table tbody tr:nth-child(even) {
    background: var(--color-off-white);
}

.support-sizing__disclaimer {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 200; /* ExtraLight per Figma */
    line-height: 1.4;
    color: var(--color-black);
    margin: var(--spacing-md) 0 0;
}

.support-sizing__chart-images {
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.support-sizing__chart-img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: var(--spacing-md);
}

.support-sizing__chart-img:last-child {
    margin-bottom: 0;
}

/* ── Logo Divider ────────────────────────────────────────────────────────────── */
.support-logo-divider {
    display: flex;
    justify-content: center;
    padding: var(--spacing-lg) 0;
}

.support-logo-divider__img {
    width: 250px;
    height: auto;
    display: block;
}

/* ── Glove Care Section ────────────────────────────────────────────────────── */
.support-care__intro {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-black);
    text-align: center;
    max-width: 64rem;
    margin: 0 auto var(--spacing-xl);
}

.support-care__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.support-care__tips {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.support-care__tip-title {
    font-family: var(--font-body);
    font-size: 1.5rem; /* 24px – Paragraph lg token */
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0 0 var(--spacing-sm);
}

.support-care__tip-text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
    margin: 0 0 var(--spacing-sm);
}

.support-care__tip-text:last-child {
    margin-bottom: 0;
}

.support-care__image-col {
    position: sticky;
    top: calc(4rem + var(--spacing-md));
}

.support-care__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* ── Where to Buy Section ──────────────────────────────────────────────────── */
.support-where__intro {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-black);
    text-align: center;
    max-width: 48rem;
    margin: 0 auto var(--spacing-xl);
}

.support-where__channels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.support-where__channel {
    padding: var(--spacing-lg);
    border: 1px solid var(--color-primary);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.support-where__channel-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.4;
}

.support-where__channel-text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0;
    flex: 1;
}

.support-where__btn {
    align-self: flex-start;
    margin-top: auto;
}

.support-where__retailer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    padding: var(--spacing-xl);
    background: var(--color-off-white);
    text-align: center;
}

.support-where__retailer-text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .support-sizing__inner,
    .support-care__inner {
        grid-template-columns: 1fr;
    }

    .support-care__image-col {
        position: static;
        order: -1;
    }

    .support-where__channels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .support-hero__title {
        font-size: 1.5rem;
    }

    .support-section__title {
        font-size: 1.5rem;
    }

    .support-where__retailer-cta {
        flex-direction: column;
    }
}

/* =============================================================
   ABOUT PAGE
   Prefix: .about-
   ============================================================= */

/* ── Hero ── */
.about-hero {
    padding: var(--spacing-lg) 0;
}

.about-hero__image-wrap {
    width: 100%;
}

.about-hero__image {
    width: 100%;
    aspect-ratio: 1376 / 392;
    background: var(--color-off-white);
    background-size: cover;
    background-position: center;
}

/* ── Intro text ── */
.about-intro {
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.about-intro__text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
    max-width: 916px;
    margin: 0 auto;
}

/* ── Passion for the Game ── */
.about-passion {
    padding: var(--spacing-lg) 0;
}

.about-passion__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.about-passion__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.about-passion__heading {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-black);
    text-transform: uppercase;
    margin: 0;
}

.about-passion__text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
    margin: 0;
}

.about-passion__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--color-off-white);
    background-size: cover;
    background-position: center;
}

/* ── Mission & Vision ── */
.about-mission {
    padding: var(--spacing-lg) 0;
}

.about-mission__header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.about-mission__heading {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-black);
    text-transform: uppercase;
    margin: 0 0 var(--spacing-sm);
}

.about-mission__lead {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    text-align: center;
    max-width: 686px;
    margin: 0 auto;
}

.about-mission__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.about-mission__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--color-off-white);
    background-size: cover;
    background-position: center;
}

.about-mission__values {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.about-value {
    padding-top: 0;
}

.about-value__title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0 0 var(--spacing-xs);
}

.about-value__text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
    margin: 0;
}

/* ── Amazon / Where to Buy ── */
.about-amazon {
    padding: var(--spacing-lg) 0;
    background: var(--color-white);
}

.about-amazon__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.about-amazon__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-sm);
    max-width: 483px;
    margin: 0 auto;
}

.about-amazon__label {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-black);
    display: block;
}

.about-amazon__heading {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-black);
    text-transform: uppercase;
    margin: 0;
}

.about-amazon__text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
    margin: 0;
}

.about-amazon__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--color-off-white);
    background-size: cover;
    background-position: center;
}

/* ── Outline buttons with green shadow (About page Figma node 922:3275; reused by green-page CTA) ── */
.about-passion .btn--outline,
.about-mission .btn--outline,
.about-amazon .btn--outline,
.green-behind-craft .btn--outline {
    border-color: #142809;
    color: #101010;
    background: #ffffff;
    box-shadow: 6px 6px 6px rgba(123, 178, 60, 0.5);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
    text-transform: none;
    letter-spacing: 0;
}

.about-passion .btn--outline:hover,
.about-mission .btn--outline:hover,
.about-amazon .btn--outline:hover,
.green-behind-craft .btn--outline:hover {
    background: #142809;
    color: #ffffff;
}

/* Mission Shop now sits to the right of the values column (Figma left=841 of 1146 frame). */
.about-mission__values .btn--outline {
    align-self: flex-end;
    margin-top: var(--spacing-sm);
}

/* Passion Shop now sits centered under the body text column (Figma left=150 of 455). */
.about-passion__content .btn--outline {
    align-self: center;
    margin-top: var(--spacing-sm);
}

/* ── About page responsive ── */
@media (max-width: 1024px) {
    .about-passion__inner,
    .about-mission__inner,
    .about-amazon__inner {
        grid-template-columns: 1fr;
    }

    .about-amazon__image-col {
        order: -1;
    }
}

@media (max-width: 768px) {
    .about-hero__image {
        aspect-ratio: 16 / 9;
    }

    .about-passion__inner,
    .about-mission__inner,
    .about-amazon__inner {
        gap: var(--spacing-md);
    }

    .about-mission__lead {
        max-width: 100%;
    }
}


/* =============================================================
   OUR STORY PAGE  (Shades of Atlas — .story-*)
   ============================================================= */

/* ── Hero (same style as About page hero) ────────────────── */
.story-hero {
    padding: var(--spacing-lg) 0;
}

.story-hero__image-wrap {
    width: 100%;
}

.story-hero__image {
    width: 100%;
    aspect-ratio: 1376 / 392;
    background: var(--color-off-white);
    background-size: cover;
    background-position: center;
}

/* ── Headline + Subtitle ─────────────────────────────────── */
.story-headline {
    padding: var(--spacing-md) 0 var(--spacing-sm);
    text-align: center;
}

.story-headline__subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem; /* 24px – Paragraph lg */
    line-height: 1.4;
    color: #6f6f6f;
    margin: 0 0 var(--spacing-sm);
}

.story-headline__title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 2.375rem; /* 38px – Heading */
    line-height: 1.5;
    color: var(--color-black);
    text-transform: uppercase;
    margin: 0;
}

/* ── Intro body text ─────────────────────────────────────── */
.story-intro {
    padding: var(--spacing-md) 0 var(--spacing-lg);
}

.story-intro__text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
    max-width: 916px;
    margin: 0 auto;
}

.story-intro__text p {
    margin: 0 0 var(--spacing-sm);
}

.story-intro__text p:last-child {
    margin-bottom: 0;
}

/* ── Image pairs ─────────────────────────────────────────── */
.story-images {
    padding: var(--spacing-sm) 0;
}

.story-images__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    max-width: 916px;
    margin: 0 auto;
}

.story-images__item {
    overflow: hidden;
}

.story-images__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* ── Collection sections (Steady by Nature, etc.) ────────── */
.story-collection {
    padding: var(--spacing-md) 0;
    text-align: center;
}

.story-collection__title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem; /* 24px – Paragraph lg */
    line-height: 1.4;
    color: var(--color-black);
    margin: 0 0 var(--spacing-md);
}

.story-collection__text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
    max-width: 916px;
    margin: 0 auto var(--spacing-md);
}

.story-collection__text p {
    margin: 0 0 var(--spacing-sm);
}

.story-collection__text p:last-child {
    margin-bottom: 0;
}

.story-collection__cta-wrap {
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-sm);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .story-headline__title {
        font-size: 1.875rem;
    }

    .story-headline__subtitle {
        font-size: 1.125rem;
    }

    .story-images__pair {
        grid-template-columns: 1fr;
    }

    .story-hero__image {
        aspect-ratio: 16 / 9;
    }
}
/* ============================================================
   RETAILER PAGE
   ============================================================ */

/* 1. Hero */
.retailer-hero {
    width: 100%;
    overflow: hidden;
}

.retailer-hero__image {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    height: 392px;
    object-fit: cover;
    display: block;
    background: var(--color-off-white);
}

/* 2. Intro */
.retailer-intro {
    padding: var(--spacing-xl) 0;
}

.retailer-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.retailer-intro__eyebrow {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.retailer-intro__heading {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-black);
    text-transform: none;
    margin-bottom: var(--spacing-md);
}

.retailer-intro__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-black);
    margin-bottom: var(--spacing-lg);
}

.retailer-intro__body p {
    margin-bottom: var(--spacing-sm);
}

.retailer-intro__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid #142809;
    box-shadow: 6px 6px 6px 0 rgba(123, 178, 60, 0.5);
    text-decoration: none;
    color: var(--color-black);
    background: var(--color-white);
    transition: background 0.2s, color 0.2s;
}

.retailer-intro__cta:hover {
    background: #142809;
    color: var(--color-white);
}

.retailer-intro__image {
    aspect-ratio: 1;
    max-width: 457px;
    width: 100%;
    object-fit: cover;
    background: var(--color-off-white);
    justify-self: end;
    display: block;
}

/* 3. Gallery strip */
.retailer-gallery {
    overflow: hidden;
}

.retailer-gallery__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.retailer-gallery__image {
    aspect-ratio: 1;
    width: 100%;
    object-fit: cover;
    display: block;
    background: var(--color-off-white);
}

/* 4. Contact intro */
.retailer-contact-intro {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.retailer-contact-intro__eyebrow {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
}

.retailer-contact-intro__heading {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-black);
    text-transform: none;
    margin-bottom: var(--spacing-md);
}

.retailer-contact-intro__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-black);
    max-width: 920px;
    margin-inline: auto;
    text-align: justify;
}

/* 5. Form */
.retailer-form {
    padding: var(--spacing-xl) 0;
    scroll-margin-top: 120px;
}

.retailer-form__heading {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-black);
    margin-bottom: var(--spacing-lg);
}

.retailer-form__content {
    margin-bottom: var(--spacing-lg);
}

.retailer-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.retailer-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.retailer-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.retailer-form__field--full {
    grid-column: 1 / -1;
}

.retailer-form__label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--color-black);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.retailer-form__hint {
    color: #6f6f6f;
}

.retailer-form__input,
.retailer-form__textarea {
    background: var(--color-white);
    border: 1px solid #0d520f;
    height: 48px;
    padding: 0 0.75rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-black);
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
    border-radius: 0;
}

.retailer-form__input:focus,
.retailer-form__textarea:focus {
    border-color: #142809;
}

.retailer-form__textarea {
    height: auto;
    padding: 0.75rem;
    resize: vertical;
}

.retailer-form__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-top: 0.25rem;
}

.retailer-form__radio-label {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--color-black);
    cursor: pointer;
}

.retailer-form__radio-label input[type="radio"] {
    width: 48px;
    height: 48px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #0d520f;
    background: var(--color-white);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.retailer-form__radio-label input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 10px;
    background: #142809;
}

.retailer-form__closing {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-black);
    text-align: center;
    margin-top: var(--spacing-md);
}

.retailer-form__submit-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-sm);
}

.retailer-form__submit {
    height: 52px;
    padding: 0 2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid #142809;
    box-shadow: 6px 6px 6px 0 rgba(123, 178, 60, 0.5);
    background: var(--color-white);
    color: var(--color-black);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.retailer-form__submit:hover {
    background: #142809;
    color: var(--color-white);
}

/* 6. FAQ */
.retailer-faq {
    padding: var(--spacing-xl) 0;
}

.retailer-faq__heading {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-black);
    text-transform: none;
    margin-bottom: var(--spacing-lg);
}

.retailer-faq__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-xl);
    align-items: start;
}

.retailer-faq__items {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-black);
}

.retailer-faq__item {
    margin-bottom: var(--spacing-md);
}

.retailer-faq__q {
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 0;
}

.retailer-faq__a {
    font-weight: 300;
    line-height: 1.8;
}

.retailer-faq__help-heading {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-black);
    margin-top: var(--spacing-md);
    margin-bottom: 0.5rem;
}

.retailer-faq__contact {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
}

.retailer-faq__contact a {
    color: var(--color-black);
    text-decoration: underline;
}

.retailer-faq__image {
    width: 340px;
    height: 340px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--color-off-white);
}

/* 7. Brand statement */
.retailer-statement {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.retailer-statement__text {
    font-family: var(--font-heading);
    font-size: 2.375rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ---- Retailer responsive ---- */
@media (max-width: 1024px) {
    .retailer-intro__inner {
        grid-template-columns: 1fr;
    }

    .retailer-intro__image {
        max-width: 100%;
        justify-self: stretch;
        aspect-ratio: 4 / 3;
    }

    .retailer-faq__inner {
        grid-template-columns: 1fr;
    }

    .retailer-faq__image {
        width: 100%;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .retailer-hero__image {
        height: 250px;
    }

    .retailer-gallery__inner {
        grid-template-columns: 1fr;
    }

    .retailer-form__row {
        grid-template-columns: 1fr;
    }

    .retailer-statement__text {
        font-size: 1.5rem;
    }
}

/* ============================================================
   SINGLE POST  -- Figma "Story 3" (922:5667)
   ============================================================ */

/* Full-width hero banner */
.post-hero {
    width: 100%;
    overflow: hidden;
    max-height: 472px;
}

.post-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.8;
}

/* Centered header with category + title */
.single-post .post-header {
    text-align: center;
    padding: var(--spacing-lg) var(--container-padding) var(--spacing-md);
    max-width: 900px;
    margin-inline: auto;
}

.post-category {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.4;
    color: #6f6f6f;
    margin-bottom: var(--spacing-sm);
}

.post-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.6;
    color: var(--color-black);
    text-transform: uppercase;
    margin-bottom: 0;
}

/* Body content -- wide, justified text */
.single-post .post-content {
    max-width: 916px;
    margin-inline: auto;
    padding: 0 var(--container-padding);
}

.single-post .post-content p {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    text-align: justify;
    margin-bottom: 1.4em;
}

/* Section subheadings inside post content */
.single-post .post-content h2,
.single-post .post-content h3 {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.4;
    color: #101010;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

/* CTA buttons inside content */
.single-post .post-content .wp-block-button .wp-block-button__link,
.single-post .post-content a.btn {
    display: inline-block;
    border: 1px solid #142809;
    box-shadow: 6px 6px 6px 0 rgba(123, 178, 60, 0.5);
    background: var(--color-white);
    color: #101010;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    padding: 0.85rem 2.5rem;
    text-decoration: none;
}

/* Images within post body */
.single-post .post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: var(--spacing-md);
}

/* ============================================================
   ARCHIVE / BLOG LISTING  -- Figma "Story 01" (922:3669)
   ============================================================ */

/* Intro header */
.archive-intro {
    text-align: center;
    padding: var(--spacing-lg) var(--container-padding) var(--spacing-md);
}

.archive-intro__heading {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.6;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.archive-intro__sub {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-black);
    max-width: 700px;
    margin-inline: auto;
}

/* Featured / latest post card */
.archive-featured {
    padding: var(--spacing-md) 0 var(--spacing-lg);
}

.archive-featured__label {
    display: block;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-black);
    margin-bottom: var(--spacing-lg);
}

.archive-featured__card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.archive-featured__meta {
    max-width: 244px;
}

.archive-featured__title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-black);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.archive-featured__excerpt {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-black);
    text-align: center;
}

.archive-featured__image {
    overflow: hidden;
    max-height: 417px;
}

.archive-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Stories grid override for archive -- show 2-col */
.archive-stories .stories-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Story card title -- Figma uses 24px Jost Light */
.archive-page .story-card__title,
.archive-stories .story-card__title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-black);
}

/* Archive pagination */
.archive-page .nav-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) 0;
}

/* ============================================================
   GENERIC PAGE
   ============================================================ */
.page-generic .container {
    max-width: 960px;
    padding: var(--spacing-xl) var(--container-padding);
}

/* ============================================================
   404 PAGE -- styled to match Figma design language
   ============================================================ */
.page-404 .container {
    text-align: center;
    padding: var(--spacing-xl) var(--container-padding);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.page-404__heading {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.6;
    color: var(--color-black);
    text-transform: uppercase;
}

.page-404__text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: #6f6f6f;
    max-width: 480px;
}

.page-404__cta {
    border-color: #142809;
    color: #101010;
    box-shadow: 6px 6px 6px 0 rgba(123, 178, 60, 0.5);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    padding: 0.85rem 2.5rem;
}

.page-404__cta:hover {
    background: #142809;
    color: var(--color-white);
}

/* ============================================================
   RESPONSIVE -- archive & single
   ============================================================ */
@media (max-width: 768px) {
    .archive-featured__card {
        grid-template-columns: 1fr;
    }

    .archive-featured__meta {
        max-width: 100%;
    }

    .archive-stories .stories-grid {
        grid-template-columns: 1fr;
    }

    .post-hero {
        max-height: 300px;
    }
}

/* =========================================================================
   For Him Page (page-for-him.php)
   ========================================================================= */

.page-for-him {
    background: #fff;
    max-width: var(--container-max);
    margin-inline: auto;
}

.page-for-her {
    background: #fff;
    max-width: var(--container-max);
    margin-inline: auto;
}

/* For Her — Landing Hero --------------------------------------------------- */

.for-her-hero {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #e9e9e9;
    aspect-ratio: 1376 / 774;
}

.for-her-hero__bg {
    position: absolute;
    inset: -66px -117px;
}

.for-her-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 10px 5px 35px 0 rgba(0, 0, 0, 0.25);
}

.for-her-hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    z-index: 1;
}

.for-her-hero__heading {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 38px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--color-text-headline, #101010);
    margin: 0 0 24px;
    max-width: 811px;
}

.for-her-hero__subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: #6f6f6f;
    margin: 0 0 40px;
    max-width: 465px;
    text-align: justify;
}

.for-her-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 52px;
    border: 1px solid #142809;
    background: #fff;
    color: #101010;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 6px 6px 6px 0 rgba(123, 178, 60, 0.5);
    padding: 0;
    transition: background 0.25s, color 0.25s;
}

.for-her-hero__cta-label {
    padding: 0 20px;
}

.for-her-hero__cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-left: 1px solid #173f35;
    background: #fff;
}

.for-her-hero__cta:hover,
.for-her-hero__cta:focus-visible {
    background: #142809;
    color: #fff;
}

.for-her-hero__cta:hover .for-her-hero__cta-icon,
.for-her-hero__cta:focus-visible .for-her-hero__cta-icon {
    background: #142809;
    border-left-color: #fff;
}

@media (max-width: 768px) {
    .for-her-hero {
        aspect-ratio: auto;
        min-height: 480px;
    }

    .for-her-hero__bg {
        inset: 0;
    }

    .for-her-hero__heading {
        font-size: 26px;
    }

    .for-her-hero__subtitle {
        font-size: 14px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .for-her-hero {
        min-height: 400px;
        border-radius: 0;
    }

    .for-her-hero__heading {
        font-size: 22px;
    }
}

/* Light-background collection hero (blush / pink backgrounds) */
.collection-hero--light {
    color: #101010;
}

.collection-hero--light .collection-hero__heading {
    color: #101010;
}

.collection-hero--light .collection-hero__tagline {
    color: #6F6F6F;
}

.collection-hero--light .collection-hero__cta {
    border-color: #142809;
    color: #142809;
    background: transparent;
}

.collection-hero--light .collection-hero__cta:hover,
.collection-hero--light .collection-hero__cta:focus-visible {
    background: #142809;
    color: #fff;
    outline-color: #142809;
}

/* Collection Hero ---------------------------------------------------------- */

.collection-hero {
    background-color: var(--color-clapley-deep-green);
    color: #fff;
    overflow: hidden;
    max-width: 1376px;
    margin: 0 auto;
}

.collection-hero__inner {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    min-height: 782px;
    max-width: 1376px;
    margin: 0 auto;
    position: relative;
}

.collection-hero__content {
    padding: 0 64px;
    z-index: 2;
}

.collection-hero__heading {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 38px;
    line-height: 1.5;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 40px;
}

.collection-hero__tagline {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: #fff;
    margin: 0 0 52px;
    max-width: 385px;
}

.collection-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 156px;
    height: 52px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--color-clapley-ink);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.collection-hero__cta:hover,
.collection-hero__cta:focus-visible {
    background: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.collection-hero__media {
    position: relative;
    height: 100%;
}

.collection-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(-20px 0 80px rgba(199, 200, 202, 0.2))
            drop-shadow(20px 20px 80px rgba(255, 255, 255, 0.2));
}

@media (max-width: 1023px) {
    .collection-hero__inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .collection-hero__media {
        min-height: 480px;
        order: -1;
    }
    .collection-hero__content {
        padding: 48px 32px;
    }
    .collection-hero__heading { font-size: 32px; margin-bottom: 32px; }
    .collection-hero__tagline { font-size: 20px; margin-bottom: 32px; }
}

@media (max-width: 600px) {
    .collection-hero__heading { font-size: 26px; }
    .collection-hero__tagline { font-size: 16px; }
    .collection-hero__media { min-height: 320px; }
}

/* Glove Strength ----------------------------------------------------------- */

.glove-strength {
    padding: 0 var(--container-padding);
}

.glove-strength__inner {
    background: #142809;
    max-width: 1376px;
    margin: 0 auto;
    padding: 56px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 70px;
    align-items: start;
}

.glove-strength__feature {
    text-align: center;
    color: #e9e9e9;
}

.glove-strength__icon {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 48px;
    margin-bottom: 24px;
}

.glove-strength__icon svg {
    max-height: 44px;
    width: auto;
}
.glove-strength__icon svg path {
    fill: #e9e9e9;
}

.glove-strength__title {
    font-family: var(--font-heading);
    font-weight: 350;
    font-size: 16px;
    line-height: 1.2;
    color: #e9e9e9;
    margin: 0 0 16px;
}

.glove-strength__desc {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 12px;
    line-height: 1.4;
    color: #6f6f6f;
    margin: 0;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1023px) {
    .glove-strength__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }
}

@media (max-width: 600px) {
    .glove-strength__inner {
        padding: 40px 16px;
        gap: 32px 16px;
    }
}

/* Style With --------------------------------------------------------------- */

.style-with {
    background: #fff;
    padding: 96px 0px;
}

.style-with__inner {
    max-width: 1376px;
    margin: 0 auto;
}

.style-with__heading {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 30px;
    line-height: 1.6;
    text-align: center;
    color: #000;
    margin: 0 0 72px;
}

.style-with__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

@media (max-width: 1023px) {
    .style-with__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .style-with__grid { grid-template-columns: 1fr; }
    .style-with { padding: 56px 16px; }
    .style-with__heading { font-size: 24px; margin-bottom: 32px; }
}

/* Discover Style ----------------------------------------------------------- */

.discover-style {
    background: #fff;
    padding: 96px 32px;
}

.discover-style__inner {
    max-width: 1376px;
    margin: 0 auto;
    text-align: center;
}

.discover-style__subheading {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.4;
    color: #101010;
    margin: 0 0 16px;
}

.discover-style__heading {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 38px;
    line-height: 1.5;
    text-transform: uppercase;
    color: #101010;
    margin: 0 0 56px;
}

.discover-style__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.discover-style__card {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.discover-style__card-image {
    background: #E9E9E9;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.discover-style__card-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.discover-style__card-name {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    margin: 16px 0 8px;
}

.discover-style__card-desc {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: #6F6F6F;
    margin: 0;
}

@media (max-width: 768px) {
    .discover-style__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .discover-style { padding: 56px 16px; }
    .discover-style__heading { font-size: 26px; margin-bottom: 32px; }
}

/* ============================================================
   GLOVE CONFIGURATOR
   ============================================================ */

:root {
    --color-swatch-ring: rgba(13, 82, 15, 0.35);
}

.configurator {
    background: #fff;
    color: var(--color-text-headline, #101010);
}

.configurator__container {
    max-width: 1376px;
    margin: 0 auto;
    padding: 0 32px;
}

.configurator__collection-name {
    font-family: var(--font-heading);
    font-weight: 350;
    font-size: 60px;
    line-height: 1;
    margin: 0 0 24px;
    text-transform: uppercase;
    color: var(--color-text-headline, #101010);
}

/* ---------- Breadcrumb ---------- */
.configurator__breadcrumb {
    margin-bottom: 40px;
}
.configurator__breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-paragraph, #6f6f6f);
}
.configurator__breadcrumb li + li::before {
    content: "·";
    margin-right: 24px;
    color: var(--color-dividers, #e9e9e9);
}
.configurator__breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.configurator__breadcrumb a[aria-current="step"] {
    color: var(--color-accent-04, #0d520f);
    font-weight: 500;
}

/* ---------- Shared buttons ---------- */
.configurator__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
    transition: filter 0.15s ease;
}
.configurator__btn:hover { filter: brightness(1.1); }
.configurator__btn:focus-visible {
    outline: 2px solid var(--color-accent-04, #0d520f);
    outline-offset: 2px;
}
.configurator__btn[disabled],
.configurator__btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
}
.configurator__btn--primary {
    background: var(--color-accent-05, #142809);
    color: #fff;
}
.configurator__btn--secondary {
    background: transparent;
    color: var(--color-accent-05, #142809);
    border: 1px solid var(--color-accent-05, #142809);
    box-shadow: none;
}
.configurator__btn--stub {
    background: #fff;
    color: var(--color-accent-04, #0d520f);
    border: 1px solid var(--color-accent-05, #142809);
    box-shadow: none;
}
.configurator__btn--amazon {
    background: #101010;
    padding: 7px 28px;
}
.configurator__btn--amazon svg,
.configurator__btn--amazon img {
    max-height: 38px;
}

/* ---------- Step sections ---------- */
.configurator__step {
    margin: 40px 0;
}
.configurator__step[hidden] { display: none; }

/* ---------- Step 1: colour + handside ---------- */
.configurator-colour__layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 48px;
}
.configurator-colour__label {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    color: var(--color-text-headline, #101010);
    margin: 0 0 16px;
    padding: 0;
}
.configurator-colour__handside,
.configurator-colour__swatches {
    border: 0;
    padding: 0;
    margin: 0;
}
.configurator-colour__handside-pills {
    display: flex;
    gap: 16px;
}
.configurator-colour__pill {
    display: inline-block;
    padding: 14px 32px;
    border: 1px solid var(--color-accent-04, #0d520f);
    background: #fff;
    color: var(--color-text-headline, #101010);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}
.configurator-colour__pill:has(input:checked) {
    background: var(--color-accent-05, #142809);
    color: #fff;
    border-color: var(--color-accent-05, #142809);
}
.configurator-colour__pill:focus-within {
    outline: 2px solid var(--color-accent-04, #0d520f);
    outline-offset: 2px;
}
.configurator-colour__preview {
    text-align: center;
}
.configurator-colour__preview-image {
    max-width: 100%;
    max-height: 450px;
    object-fit: contain;
    margin: 0 auto;
}
.configurator-colour__dots {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.configurator-colour__dots li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
}
.configurator-colour__dots li.is-active {
    background: var(--color-accent-05, #142809);
}
.configurator-colour__swatch-row {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.configurator-colour__swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: var(--swatch-hex, #ccc);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.configurator-colour__swatch.is-active {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 2px var(--color-swatch-ring);
}
.configurator-colour__swatch:focus-visible {
    outline: 2px solid var(--color-accent-04, #0d520f);
    outline-offset: 4px;
}

.configurator-colour .configurator__step-form {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* ---------- Step 2: ballmarker ---------- */
.configurator-ballmarker {
    /* Single source of truth for glove image height. Disks, gap and the
       glove img height all derive from this so they scale together — keeps
       the active disk size matched to the logo circle's white interior
       (~12% of glove height) on every viewport. */
    --glove-h: min(450px, 55vh, 80vw);
    --disk-size: calc(var(--glove-h) * 0.12);
    --disk-gap: calc(var(--glove-h) * 0.18);
}
.configurator-ballmarker__heading {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    margin: 0 0 32px;
}
.configurator-ballmarker__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    border-bottom: 0;
    margin-bottom: 48px;
}
.configurator-ballmarker__tab {
    background: none;
    border: 0;
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 300;
    color: var(--color-text-paragraph, #6f6f6f);
    cursor: pointer;
    position: relative;
}
.configurator-ballmarker__tab.is-active {
    color: var(--color-accent-04, #0d520f);
    font-weight: 500;
}
.configurator-ballmarker__tab.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent-04, #0d520f);
    transform: translateX(-50%);
}
.configurator-ballmarker__stage {
    position: relative;
    width: 100%;
    max-width: 1144px;
    margin: 0 auto;
}

.configurator-ballmarker__arrow {
    position: absolute;
    top: 75%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}
.configurator-ballmarker__arrow--left { left: 0; }
.configurator-ballmarker__arrow--right { right: 0; }
.configurator-ballmarker__arrow svg {
    width: 100%;
    height: 100%;
}

.configurator-ballmarker__carousel {
    position: relative;
    overflow: hidden;
}

.configurator-ballmarker__disks {
    position: absolute;
    /* Glove image logo circle sits at y=75% of image. translateY(-50%)
       anchors the disk-row center on that line at every viewport. */
    top: 75%;
    left: 0;
    right: 0;
    height: var(--disk-size);
    display: flex;
    align-items: center;
    gap: var(--disk-gap);
    list-style: none;
    margin: 0;
    padding: 0 40px;
    z-index: 20;
    transform: translateY(-50%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.configurator-ballmarker__disk {
    flex: 0 0 var(--disk-size);
    width: var(--disk-size);
    height: var(--disk-size);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s;
    transform: scale(0.9);
}
.configurator-ballmarker__disk.is-active {
    transform: scale(1.1);
}
.configurator-ballmarker__disk img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.configurator-ballmarker__glove {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}
.configurator-ballmarker__glove > img[data-preview="glove"] {
    height: var(--glove-h);
    width: auto;
    display: block;
    filter: drop-shadow(20px 40px 60px rgba(0,0,0,0.25));
}


.configurator-ballmarker__caption {
    text-align: center;
    margin: 16px 0 0;
    font-size: 0.875rem;
    color: #666;
}

.configurator-ballmarker__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
}

.configurator-ballmarker__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: none;
    text-decoration: none;
    color: inherit;
}
.configurator-ballmarker__back svg {
    width: 16px;
    height: 16px;
}

/* ---------- Step 3: summary ---------- */
.configurator-summary__block {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 120px;
}
.configurator-summary__gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.configurator-summary__thumb {
    display: inline-block;
    background: #e9e9e9;
    width: 80px;
    height: 80px;
}
.configurator-summary__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.configurator-summary__title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 30px;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.configurator-summary__subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-paragraph, #6f6f6f);
    margin: 0 0 16px;
}
.configurator-summary__handside {
    font-family: var(--font-body);
    font-size: 12px;
    margin: 0 0 16px;
}
.configurator-summary__handside-link {
    color: var(--color-text-paragraph, #6f6f6f);
    text-decoration: none;
    margin-right: 16px;
}
.configurator-summary__handside-link.is-active {
    color: var(--color-text-headline, #101010);
    text-decoration: underline;
}
.configurator-summary__mini-swatches {
    display: flex;
    gap: 12px;
    margin: 0 0 16px;
}
.configurator-summary__mini-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--swatch-hex, #ccc);
}
.configurator-summary__mini-swatch.is-active {
    box-shadow: 0 0 0 2px var(--color-swatch-ring);
}
.configurator-summary__price {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 24px;
    margin: 0 0 16px;
}
.configurator-summary__body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text-headline, #101010);
    text-align: justify;
    margin-bottom: 24px;
}
.configurator-summary__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 346px;
}
.configurator-summary__actions .configurator__btn { width: 100%; }
.configurator-summary__hero {
    background: radial-gradient(ellipse at center, rgba(47, 93, 58, 0.25), transparent 65%);
    padding: 40px;
    text-align: center;
}
.configurator-summary__hero img {
    max-width: 100%;
    box-shadow: 20px 40px 60px rgba(0, 0, 0, 0.25);
}
.configurator-summary__marker-image {
    display: flex;
    align-items: center;
    gap: 16px;
}
.configurator-summary__marker-image > img {
    max-width: 260px;
    box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.25);
}
.configurator-summary__error {
    color: #b00020;
    font-family: var(--font-body);
    font-size: 14px;
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    .configurator-colour__layout {
        grid-template-columns: 1fr 1fr;
    }
    .configurator-colour__preview {
        grid-column: 1 / -1;
        order: -1;
    }
    .configurator-summary__block {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .configurator {
        padding: 32px 0 80px;
    }
    .configurator__collection-name { font-size: 36px; text-align: center; }
    .configurator-hero .configurator__collection-name { padding-left: 0; }
    .configurator-colour__layout { grid-template-columns: 1fr; }
    .configurator-ballmarker__tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; white-space: nowrap; }
    .configurator-ballmarker__tabs::-webkit-scrollbar { display: none; }
    .configurator-summary__actions { max-width: 100%; }
}

/* Configurator hero — inline on for-him page */
.configurator-hero {
    position: relative;
    padding: 0 var(--container-padding);
}
.configurator-hero__landing.configurator__step {
    margin: 0 auto;
}
.configurator-hero .configurator__collection-name {
    max-width: 1376px;
    margin: 32px auto 24px;
    padding-left: 0;
}
.configurator-hero .configurator-colour,
.configurator-hero .configurator-ballmarker,
.configurator-hero .configurator-summary__block {
    max-width: 1376px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   CONFIGURATOR DETAIL (HE4)
   ============================================================ */

.configurator-detail__hero {
    background: #e9e9e9;
    padding: 0 32px;
}

.configurator-detail__glove-inner {
    max-width: 1186px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 80px 346px 1fr;
    gap: 0 85px;
    padding: 175px 0 80px;
    position: relative;
}

/* Thumbnails column */
.configurator-detail__thumbs {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 60px;
}

.configurator-detail__thumb {
    width: 80px;
    height: 80px;
    background: #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.configurator-detail__thumb img {
    max-width: 55px;
    max-height: 55px;
    object-fit: contain;
}

/* Info column */
.configurator-detail__glove-info {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0;
}

.configurator-detail__title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 30px;
    line-height: 1.6;
    color: #000;
    margin: 0 0 16px;
}

.configurator-detail__swatches {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.configurator-detail__swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--swatch-hex, #ccc);
    border: none;
    cursor: default;
}

.configurator-detail__swatch.is-active {
    width: 15px;
    height: 15px;
}

.configurator-detail__handside {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.configurator-detail__handside span {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 12px;
    line-height: 1.4;
    color: #000;
    cursor: default;
}

.configurator-detail__handside span.is-active {
    text-decoration: underline;
}

.configurator-detail__price {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.4;
    color: var(--color-clapley-ink);
    margin-bottom: 24px;
}

.configurator-detail__description {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: #000;
    text-align: justify;
    max-width: 346px;
    margin-bottom: 32px;
}

.configurator-detail__description p {
    margin-bottom: 1em;
}

.configurator-detail__description p:last-child {
    margin-bottom: 0;
}

/* Action buttons */
.configurator-detail__actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 346px;
}

/* YITH Wishlist button — v4 block markup */
.configurator-detail__wishlist .yith-add-to-wishlist-button-block {
    width: 346px;
}

.configurator-detail__wishlist .yith-wcwl-add-to-wishlist-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 346px !important;
    height: 52px !important;
    border: 1px solid #142809 !important;
    background: transparent !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: #0d520f !important;
    cursor: pointer;
    padding: 0 !important;
    border-radius: 0 !important;
}

.configurator-detail__wishlist .yith-wcwl-icon-svg__wrapper {
    display: flex;
    align-items: center;
}

.configurator-detail__wishlist .yith-wcwl-icon-svg {
    width: 22px !important;
    height: 20px !important;
    color: #0d520f !important;
    stroke: #0d520f !important;
}

.configurator-detail__wishlist .yith-wcwl-add-to-wishlist-button__label {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: #0d520f !important;
}

/* Legacy YITH markup fallback */
.configurator-detail__wishlist .yith-wcwl-add-button a,
.configurator-detail__wishlist .yith-wcwl-wishlistaddedbrowse a,
.configurator-detail__wishlist .yith-wcwl-wishlistexistsbrowse a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 346px;
    height: 52px;
    border: 1px solid #142809;
    background: transparent;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    color: #0d520f;
    text-decoration: none;
    cursor: pointer;
}

.configurator-detail__amazon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 346px;
    height: 52px;
    background: #101010;
    text-decoration: none;
    overflow: hidden;
}

.configurator-detail__amazon img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

/* Glove image column */
.configurator-detail__glove-image {
    grid-column: 3;
    grid-row: 1;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 57px;
}

.configurator-detail__glove-circle {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--circle-color, #d9d9d9) 0%, transparent 70%);
    opacity: 0.6;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
}

.configurator-detail__glove-image > img {
    position: relative;
    z-index: 1;
    max-width: 281px;
    max-height: 526px;
    object-fit: contain;
    filter: drop-shadow(20px 40px 60px rgba(0, 0, 0, 0.25));
}

/* Ballmarker block */
.configurator-detail__ballmarker-inner {
    max-width: 1186px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding: 80px 0 120px;
    align-items: start;
}

.configurator-detail__ballmarker-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.configurator-detail__ballmarker-photo {
    max-width: 366px;
    max-height: 255px;
    object-fit: contain;
    filter: drop-shadow(-5px 10px 20px rgba(0, 0, 0, 0.25));
}

.configurator-detail__ballmarker-info .configurator-detail__thumb--bm {
    margin-bottom: 24px;
}

.configurator-detail__subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: #000;
    margin: 0 0 16px;
}

/* Scroll indicator */
.configurator-detail__scroll-indicator {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

/* Responsive */
@media (max-width: 1023px) {
    .configurator-detail__glove-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 80px 0 40px;
    }
    .configurator-detail__thumbs {
        flex-direction: row;
        padding-top: 0;
    }
    .configurator-detail__glove-image {
        order: -1;
    }
    .configurator-detail__glove-circle {
        width: 300px;
        height: 300px;
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .configurator-detail__ballmarker-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 0 80px;
    }
    .configurator-detail__actions {
        max-width: 100%;
    }
    .configurator-detail__wishlist .yith-wcwl-add-button a,
    .configurator-detail__wishlist .yith-wcwl-wishlistaddedbrowse a,
    .configurator-detail__wishlist .yith-wcwl-wishlistexistsbrowse a,
    .configurator-detail__amazon {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .configurator-detail__hero {
        padding: 0 16px;
    }
    .configurator-detail__title {
        font-size: 24px;
    }
    .configurator-detail__price {
        font-size: 20px;
    }
}

/* =====================================================
   News index page (Our Story)
   ===================================================== */

.news-page {
    background: #fff;
}

.news-hero {
    padding-block: 96px 56px;
    text-align: center;
}

.news-hero__title {
    font-family: var(--font-heading), 'CocogooseProTrial', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1.6;
    color: #000;
    margin: 0 auto;
}

.news-hero__subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: #000;
    margin: 24px auto 0;
    max-width: 720px;
}

.news-featured {
    padding-block: 56px 80px;
}

.news-featured__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: #000;
    margin-bottom: 80px;
}

.news-featured__link {
    display: grid;
    grid-template-columns: minmax(244px, 27%) 1fr;
    gap: 0;
    align-items: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.news-featured__text {
    padding-right: 32px;
}

.news-featured__title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: #000;
    margin: 0 0 24px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.news-featured__subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 12px;
    line-height: 1.4;
    color: #000;
    margin: 0;
}

.news-featured__image {
    overflow: hidden;
    aspect-ratio: 916 / 417;
}

.news-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .news-hero {
        padding-block: 56px 32px;
    }
    .news-featured {
        padding-block: 32px 56px;
    }
    .news-featured__eyebrow {
        margin-bottom: 32px;
    }
    .news-featured__link {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .news-featured__text {
        padding-right: 0;
    }
}

/* ====================================================
   What Starts on the Green page
   Spec: docs/superpowers/specs/2026-05-03-what-starts-on-the-green-design.md
==================================================== */

.green-page .green-hero {
    padding-block: 0;
}
.green-page .green-hero__image {
    display: block;
    width: 100%;
    height: 472px;
    object-fit: cover;
}

.green-page .green-headline {
    padding-block: 5rem 1.5rem;
    text-align: center;
}
.green-page .green-headline__subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: #6f6f6f;
    margin: 0 0 1.5rem;
}
.green-page .green-headline__title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 30px;
    line-height: 1.6;
    color: #101010;
    text-transform: uppercase;
    margin: 0 auto;
    max-width: 827px;
}

.green-page .green-intro {
    padding-block: 1.5rem 4rem;
}
.green-page .green-intro__text {
    max-width: 916px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: #101010;
    text-align: justify;
}
.green-page .green-intro__text p {
    margin: 0 0 1rem;
}
.green-page .green-intro__text p:last-child {
    margin-bottom: 0;
}

.green-page .green-behind-craft {
    padding-block: 1.5rem 4rem;
    text-align: center;
}
.green-page .green-behind-craft__title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: #101010;
    margin: 0 0 1.5rem;
}
.green-page .green-behind-craft__text {
    max-width: 916px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: #101010;
    text-align: justify;
}
.green-page .green-behind-craft__text p {
    margin: 0 0 1rem;
}
.green-page .green-behind-craft__cta-wrap {
    margin-top: 2.5rem;
}
.green-page .green-behind-craft .btn--outline {
    min-width: 225px;
}

.green-page .green-collections {
    padding-block: 4rem;
}
.green-page .green-collections__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
    align-items: start;
}
.green-page .green-collections__title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: #101010;
    margin: 0 0 1.5rem;
}
.green-page .green-collections__text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: #101010;
    text-align: justify;
}
.green-page .green-collections__text p {
    margin: 0 0 1rem;
}
.green-page .green-collections__text p:last-child {
    margin-bottom: 0;
}
.green-page .green-collections__image {
    width: 398px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}
.green-page .green-collections__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.green-page .green-more-than {
    padding-block: 4rem;
    text-align: center;
}
.green-page .green-more-than__title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.4;
    color: #101010;
    margin: 0 0 1.5rem;
}
.green-page .green-more-than__text {
    max-width: 916px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: #101010;
}

@media (max-width: 768px) {
    .green-page .green-hero__image {
        height: auto;
        aspect-ratio: 1374 / 472;
    }
    .green-page .green-headline {
        padding-block: 3rem 1rem;
    }
    .green-page .green-headline__title {
        font-size: 24px;
    }
    .green-page .green-collections__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .green-page .green-collections__image {
        width: 100%;
        max-width: 398px;
        margin: 0 auto;
    }
    .green-page .green-behind-craft .btn--outline {
        min-width: auto;
        width: 100%;
    }
}