/* Approved Homepage desktop frame: Figma node 291:14840 (1440px). */
.ff-lineup-card a, .ff-collection-copy a { text-decoration: none !important; }
.ff-lineup-nowrap { white-space: nowrap; }
.ff-community__copy a { display: inline-block; margin-top: 0; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0; text-decoration: none !important; }
.ff-community__copy a:hover { color: #777; }

/* Homepage interaction states */
.ff-product-card { overflow: hidden; }
.ff-product-media::after, .ff-collection-image::after { position: absolute; z-index: 1; inset: 0; background: rgba(32, 32, 32, 0); content: ''; pointer-events: none; transition: background-color 180ms ease; }
.ff-collection-image { position: relative; overflow: hidden; }
.ff-product-card:hover .ff-product-media::after, .ff-collection-card:hover .ff-collection-image::after { background: rgba(32, 32, 32, .24); }
.ff-collection-card:hover a, .ff-lineup-card:hover a { color: #aaa; }
.ff-lineup-card:hover img { filter: brightness(.8); }

/* Product card typography in the approved homepage grid. */
.ff-product-copy { gap: 8px; }
.ff-product-brand { font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: .5px; }
.ff-product-title { font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0; }
.ff-price { font-size: 16px; line-height: 24px; letter-spacing: .25px; }

/* Button hover states from the homepage prototype. */
.ff-hero .ff-button, .ff-lineup .ff-button { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.ff-hero .ff-button--dark:hover, .ff-lineup .ff-button--dark:hover { border-color: #aaa; background: #aaa; color: #fff; }
.ff-hero .ff-button:not(.ff-button--dark):hover, .ff-lineup .ff-button:not(.ff-button--dark):hover { border-color: #aaa; background: #fff; color: #aaa; }

/* Keep the newsletter background full-bleed; only its inner content has gutters. */
.ff-home-subscribe { display: block; box-sizing: border-box; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; background: var(--ff-black); }
.ff-home-subscribe__inner { display: grid; grid-template-columns: minmax(220px, 290px) minmax(180px, 1fr) minmax(360px, 1.5fr); width: min(100%, 1920px); min-height: 256px; margin-inline: auto; align-items: center; gap: 48px; padding: clamp(48px, 4vw, 72px); }

/* Community post mentions are revealed over a darkened image. */
.ff-community__image::after { position: absolute; z-index: 1; inset: 0; background: rgba(255, 255, 255, 0); content: ''; pointer-events: none; transition: background-color 180ms ease; }
.ff-community__image img { transition: filter 180ms ease; }
.ff-community__image figcaption { position: absolute; z-index: 2; inset: 0; display: grid; padding: 16px; color: #161616; font-size: 14px; font-weight: 600; line-height: 20px; opacity: 0; place-items: center; text-align: center; transition: opacity 180ms ease; }
.ff-community__image:hover::after, .ff-community__image:focus-within::after { background: rgba(255, 255, 255, .82); }
.ff-community__image:hover img, .ff-community__image:focus-within img { filter: none; }
.ff-community__image:hover figcaption, .ff-community__image:focus-within figcaption { opacity: 1; }
.ff-community__image .ff-community__save { z-index: 3; }
.ff-community__image:hover .ff-community__save, .ff-community__image:focus-within .ff-community__save { color: #161616; }

@media (min-width: 1025px) {
    :root { --ff-page-gutter: 64px; --ff-content-max: 1312px; --ff-layout-xl: 128px; }

    .ff-hero {
        width: 1440px;
        max-width: 100%;
        min-height: 838px;
        margin: 0 auto;
        padding: 0 0 0 64px;
        grid-template-columns: 499px minmax(0, 845px);
        gap: 32px;
    }
    .ff-hero-copy { width: 499px; padding: 0; gap: 32px; }
    .ff-hero h1 { font-family: 'Poppins', sans-serif; font-size: 60px; font-weight: 700; line-height: 72px; letter-spacing: 1px; }
    .ff-hero p { max-width: 435px; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 1px; }
    .ff-hero-media { width: 845px; height: 838px; }
    .ff-hero-media img { object-fit: contain; object-position: center; }
    .ff-button { min-height: 72px; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; }

    .ff-container { width: 1440px; max-width: 100%; margin-inline: auto; padding-inline: 64px; }
    .ff-section { margin-top: 128px; }
    .ff-section-heading { margin-bottom: 32px; }
    .ff-section-heading h2 { font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 700; line-height: 40px; }
    .ff-section-heading a { font-size: 16px; line-height: 28px; letter-spacing: 1px; }

    .ff-product-grid { grid-template-columns: repeat(3, 416px); gap: 32px; }
    .ff-product-media { height: 463px; }
    .ff-product-media > .ff-product-image-link > img { object-fit: contain; }
    .ff-product-copy { padding: 16px 0 0; gap: 12px; }
    .ff-product-title { font-size: 20px; font-weight: 700; line-height: 24px; }
    .ff-price { font-size: 16px; line-height: 28px; letter-spacing: 1px; }

    .ff-collection-grid { grid-template-columns: repeat(2, 640px); gap: 32px; }
    .ff-collection-image { height: 500px; }
    .ff-collection-image img { object-fit: cover; }
    .ff-collection-copy { padding-top: 16px; }
    .ff-collection-copy a { font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0; }

    .ff-lineup { grid-template-columns: 370px minmax(0, 1fr); gap: 48px; }
    .ff-lineup-copy { justify-content: flex-start; }
    .ff-lineup-copy h2, .ff-community__copy h2 { font-family: 'Poppins', sans-serif; font-size: 40px; font-weight: 700; line-height: 48px; letter-spacing: 1px; }
    .ff-lineup-copy > p:not(.ff-eyebrow) { display: -webkit-box; overflow: hidden; font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: 1px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .ff-lineup-card { height: auto; min-height: 430px; }
    .ff-lineup-card a { font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0; }

    /* Community is outside .ff-container, so it owns the same desktop grid. */
    .ff-community {
        width: min(calc(100% - 128px), 1720px);
        margin-inline: auto;
        padding: 88px 0;
        grid-template-columns: 330px minmax(0, 1fr);
        gap: 48px;
    }
    .ff-community__copy { max-width: 330px; }
    .ff-community__gallery { gap: 24px; }
}

@media (min-width: 1441px) {
    .ff-hero {
        box-sizing: border-box;
        width: min(100%, 1720px);
        margin-inline: auto;
        padding-inline: 64px;
        grid-template-columns: minmax(499px, 34.65vw) minmax(0, 1fr);
    }
    .ff-hero-media { width: auto; height: 838px; }
    .ff-container { width: min(100%, 1720px); }
    .ff-product-grid, .ff-collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ff-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ff-community {
        box-sizing: border-box;
        width: min(100%, 1720px);
        padding-inline: 64px;
    }

    /* Large desktop: scale content while retaining the 64px protected gutters. */
    .ff-hero { min-height: clamp(838px, 49vw, 980px); }
    .ff-hero-copy { gap: clamp(32px, 2.25vw, 44px); }
    .ff-hero h1 { font-size: clamp(60px, 3.6vw, 72px); line-height: 1.2; }
    .ff-hero p { max-width: 520px; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.75; }
    .ff-hero-media { height: clamp(838px, 49vw, 980px); }
    .ff-button { min-height: clamp(72px, 4.2vw, 82px); font-size: clamp(16px, 1vw, 18px); }

    .ff-section-heading h2 { font-size: clamp(32px, 2.05vw, 40px); line-height: 1.25; }
    .ff-product-media { height: clamp(463px, 29vw, 560px); }
    .ff-product-title { font-size: clamp(20px, 1.3vw, 24px); line-height: 1.25; }
    .ff-price { font-size: clamp(16px, 1.05vw, 19px); }
    .ff-collection-image { height: clamp(500px, 32vw, 620px); }
    .ff-collection-copy h3 { font-size: clamp(20px, 1.3vw, 24px); }
    .ff-collection-copy p { font-size: clamp(14px, .95vw, 17px); line-height: 1.55; }

    .ff-lineup-copy h2, .ff-community__copy h2 { font-size: clamp(40px, 2.8vw, 52px); line-height: 1.2; }
    .ff-lineup { grid-template-columns: minmax(380px, .95fr) minmax(0, 3fr); }
    .ff-lineup-copy > p:not(.ff-eyebrow) { font-size: clamp(12px, .9vw, 15px); line-height: 1.6; }
    .ff-lineup-card { min-height: clamp(430px, 30vw, 560px); }
    .ff-lineup-card h3 { font-size: clamp(18px, 1.25vw, 23px); }
    .ff-lineup-card p { font-size: clamp(12px, .88vw, 15px); line-height: 1.55; }
    .ff-community__copy > p:not(.ff-eyebrow) { font-size: clamp(14px, .95vw, 17px); }
}

@media (max-width: 640px) {
    .ff-hero-copy { align-items: center; text-align: center; }
    .ff-hero p { margin-inline: auto; }
    .ff-lineup-copy > p:not(.ff-eyebrow) {
        display: -webkit-box;
        overflow: hidden;
        max-width: 340px;
        margin-inline: auto;
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    .ff-home-subscribe__inner { grid-template-columns: 1fr; min-height: 0; gap: 24px; padding: 48px 16px; text-align: center; }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .ff-home-subscribe__inner { grid-template-columns: 1fr; gap: 24px; padding: 56px 32px; text-align: center; }
}