/**
 * Product Overview (/products/) page styles.
 *
 * Figma reference: Products Overview Page, node 11121:37991.
 * Uses the theme's existing CSS custom properties (style.css) for every
 * colour/spacing/motion value that already has one; a small number of
 * page-scoped variables cover values Figma introduces that don't yet
 * have a theme-wide token (the hero's gold eyebrow, the gold-dark
 * "Product Guide"-style label colour used across several sections).
 *
 * Entrance motion is handled entirely by the existing global reveal
 * system (style.css + widget-reveal.js) via [data-zs-reveal] attributes
 * in the markup — nothing in this file re-implements it. Only hover/
 * focus interaction states are defined here.
 *
 * ---------------------------------------------------------------------
 * WARNING — `.zs-product-card` and `.zs-product-grid` are declared TWICE
 * in this theme, by two unrelated card contracts:
 *
 *   1. THIS file, for template-parts/products/product-card.php — the
 *      Figma-traced overview card (node 11121:37991). Its children are
 *      __media / __media-placeholder / __body / __subtitle / __summary /
 *      __highlights / __highlight / __cta / __cta-arrow.
 *   2. assets/css/widgets/widget-product-card.css, for the Elementor
 *      Product Grid and single-zs_product.php's related row. Its
 *      children are __image-wrapper / __image / __image-overlay /
 *      __badge / __content / __category / __description / __view-link /
 *      __specs / __buttons.
 *
 * The two share only `__title`. They do not collide today because this
 * stylesheet is enqueued by archive-zs_product.php alone and the widget
 * stylesheets are never loaded on that route — but that is a routing
 * accident, not isolation. Dropping a Zamseed Product Grid widget onto
 * a page that also loads this file (or making page 70 the overview with
 * Elementor) puts both base rules in the cascade at identical
 * specificity. Renaming one of the two is the fix; until then, do not
 * add a `.zs-product-card` rule to either file that the other's markup
 * would also match.
 * ---------------------------------------------------------------------
 *
 * @package Zamseed
 * @since 1.0.0
 */

.zs-product-overview {
    --zs-gold-dark: #c48c33;
    --zs-hero-gold: #f3c98a;
}

.zs-product-overview .section--neutral {
    background-color: var(--zs-bg);
}

/* Section rhythm. The hero and the dealer CTA each carry their own vertical
   band, but the four sections between them had no vertical padding at all —
   their content sat flush against the top and bottom of the coloured
   background, so each ran straight into the next wherever the background
   changed, and the last one met the footer with no gap. The section owns its
   own rhythm here rather than pushing it onto headings or cards. The shared
   token resolves to 92px, and to 68px below 760px through the :root override
   further down this file, so mobile scales down with it. */
.zs-product-guide,
.zs-crop-group,
.zs-featured-varieties {
    padding: var(--zs-section-padding, 92px) 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.zs-product-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 700px;
    padding: 160px 0 92px;
    background-color: var(--zs-dark-green);
    overflow: hidden;
}

.zs-product-hero__media {
    position: absolute;
    inset: 0;
}

.zs-product-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zs-product-hero__image--mobile {
    display: none;
}

.zs-product-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 36, 24, 0.774) 0%, rgba(15, 36, 24, 0.594) 46%, rgba(15, 36, 24, 0.378) 100%),
        linear-gradient(0deg, rgba(15, 36, 24, 0.55) 0%, rgba(15, 36, 24, 0) 60%);
    pointer-events: none;
}

.zs-product-hero--no-image .zs-product-hero__overlay {
    background: linear-gradient(135deg, var(--zs-dark-green) 0%, #1a3a28 100%);
}

.zs-product-hero .container {
    position: relative;
    z-index: 1;
}

.zs-product-hero__content {
    max-width: 820px;
}

.zs-product-hero__eyebrow {
    margin: 0 0 17px;
    color: var(--zs-hero-gold);
    font-family: var(--zs-font-sans);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.zs-product-hero__title {
    margin: 0 0 17px;
    color: #ffffff;
    font-family: var(--zs-font-serif);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.zs-product-hero__description {
    margin: 0;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--zs-font-sans);
    font-size: 20px;
    line-height: 1.5;
}

/* ==========================================================================
   Product Guide
   ========================================================================== */

.zs-product-guide__row {
    display: flex;
    align-items: flex-end;
    gap: 100px;
}

.zs-product-guide__intro {
    flex: 1 1 0;
    min-width: 0;
}

.zs-product-guide__eyebrow {
    margin: 0 0 24px;
    color: var(--zs-gold-dark);
    font-family: var(--zs-font-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.zs-product-guide__heading {
    margin: 0 0 24px;
    color: var(--zs-primary);
    font-family: var(--zs-font-serif);
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
}

.zs-product-guide__description {
    margin: 0;
    color: var(--zs-muted);
    font-family: var(--zs-font-sans);
    font-size: 18px;
    line-height: 1.65;
}

.zs-product-guide__summary {
    flex: 0 0 auto;
    display: flex;
    width: min(462px, 100%);
    border: 1px solid var(--zs-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(45, 90, 39, 0.08);
    background-color: #ffffff;
    overflow: hidden;
}

.zs-product-guide__stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    /* Figma cell padding is 20px 24px. */
    padding: 20px 24px;
    text-align: center;
}

.zs-product-guide__stat + .zs-product-guide__stat {
    border-left: 1px solid var(--zs-border);
}

.zs-product-guide__stat-value {
    color: var(--zs-primary);
    font-family: var(--zs-font-serif);
    font-size: 2.8rem;
    font-weight: 700;
    /* Figma: 44.8px type on a 52px line. */
    line-height: 1.1607;
}

.zs-product-guide__stat-label {
    color: var(--zs-gold-dark);
    font-family: var(--zs-font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ==========================================================================
   Crop group sections
   ========================================================================== */

.zs-crop-group__header {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.zs-crop-group__heading {
    margin: 0 0 12px;
    color: var(--zs-primary);
    font-family: var(--zs-font-serif);
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    font-weight: 700;
}

.zs-crop-group__description {
    margin: 0;
    color: var(--zs-muted);
    font-family: var(--zs-font-sans);
    font-size: 17px;
    line-height: 1.6;
}

.zs-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* ==========================================================================
   Product cards
   ========================================================================== */

.zs-product-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid var(--zs-border);
    border-radius: 16px;
    box-shadow: var(--zs-shadow-sm);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 260ms var(--zs-ease-hover);
}

.zs-product-card:hover,
.zs-product-card:focus-visible {
    box-shadow: 0 18px 40px rgba(45, 90, 39, 0.14);
}

.zs-product-card:focus-visible {
    outline: 2px solid var(--zs-primary);
    outline-offset: 3px;
}

.zs-product-card__media {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    background-color: var(--zs-earth-soft);
    overflow: hidden;
}

.zs-product-card__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.zs-product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--zs-ease-hover);
}

.zs-product-card:hover .zs-product-card__image,
.zs-product-card:focus-visible .zs-product-card__image {
    transform: scale(1.025);
}

/* Products with no cleared image — currently Cowpeas and Pigeon Peas, whose
   Figma heroes were rejected as a watermarked comp and a wrong-species photo.
   The box keeps the full media height so the title, CTA and card bottom stay
   on the same baselines as a card that has a photograph; a branded green field
   with the leaf mark reads as deliberate rather than as a failed image. */
.zs-product-card__media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--zs-cream, #f7f4ec);
    background: var(--zs-primary, #2d5a27);
}

.zs-product-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 26px 24px;
}

.zs-product-card__title {
    margin: 0;
    color: var(--zs-primary);
    font-family: var(--zs-font-serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.zs-product-card__subtitle {
    color: var(--zs-gold-dark);
    font-family: var(--zs-font-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zs-product-card__summary {
    color: var(--zs-muted);
    font-family: var(--zs-font-sans);
    font-size: 16px;
    line-height: 1.6;
}

.zs-product-card__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zs-product-card__highlight {
    padding: 6px 10px;
    background-color: var(--zs-green-soft);
    color: var(--zs-primary);
    font-family: var(--zs-font-sans);
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
}

.zs-product-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--zs-primary);
    font-family: var(--zs-font-sans);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zs-product-card__cta-arrow {
    transition: transform 260ms var(--zs-ease-hover);
}

.zs-product-card:hover .zs-product-card__cta-arrow,
.zs-product-card:focus-visible .zs-product-card__cta-arrow {
    transform: translateX(3px);
}

/* ==========================================================================
   Featured varieties ("Our Key Varieties")
   ========================================================================== */

.zs-featured-varieties__header {
    max-width: 740px;
    margin: 0 auto 60px;
    text-align: center;
}

.zs-featured-varieties__eyebrow {
    margin: 0 0 20px;
    color: var(--zs-gold-dark);
    font-family: var(--zs-font-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.zs-featured-varieties__heading {
    margin: 0 0 20px;
    color: var(--zs-primary);
    font-family: var(--zs-font-serif);
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    font-weight: 700;
}

.zs-featured-varieties__description {
    margin: 0;
    color: var(--zs-muted);
    font-family: var(--zs-font-sans);
    font-size: 18px;
    line-height: 1.6;
}

.zs-featured-varieties__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.zs-key-variety-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background-color: var(--zs-earth-soft);
    transition: transform 260ms var(--zs-ease-hover), box-shadow 260ms var(--zs-ease-hover);
}

.zs-key-variety-card:hover,
.zs-key-variety-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.zs-key-variety-card:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.zs-key-variety-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--zs-ease-hover);
}

.zs-key-variety-card:hover .zs-key-variety-card__image,
.zs-key-variety-card:focus-visible .zs-key-variety-card__image {
    transform: scale(1.03);
}

.zs-key-variety-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    background: linear-gradient(135deg, var(--zs-primary-dark) 0%, var(--zs-dark-green) 100%);
}

.zs-key-variety-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%);
}

.zs-key-variety-card__name {
    position: relative;
    z-index: 1;
    padding: 16px;
    color: #ffffff;
    font-family: var(--zs-font-serif);
    font-size: 22px;
    font-weight: 700;
}

/* ==========================================================================
   Empty catalogue panel
   ========================================================================== */

.zs-product-overview-empty__panel {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 40px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid var(--zs-border);
    border-radius: 18px;
    box-shadow: var(--zs-shadow-sm);
}

.zs-product-overview-empty__heading {
    margin: 0 0 28px;
    color: var(--zs-text);
    font-family: var(--zs-font-serif);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
}

.zs-product-overview-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* ==========================================================================
   Dealer CTA
   ========================================================================== */

.zs-products-dealer-cta {
    padding: 92px 0;
    background: linear-gradient(135deg, #244f22 0%, #2d5a27 100%);
}

.zs-products-dealer-cta__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.zs-products-dealer-cta__content {
    max-width: 800px;
}

.zs-products-dealer-cta__eyebrow {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.76);
    font-family: var(--zs-font-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.zs-products-dealer-cta__heading {
    margin: 0 0 20px;
    color: #ffffff;
    font-family: var(--zs-font-serif);
    font-size: clamp(1.8rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
}

.zs-products-dealer-cta__description {
    margin: 0;
    max-width: 620px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--zs-font-sans);
    font-size: 16px;
    line-height: 1.6;
}

.zs-products-dealer-cta__button {
    flex: 0 0 auto;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
    .zs-product-hero {
        min-height: 420px;
        padding: 132px 0 72px;
    }

    .zs-product-guide__row {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .zs-product-guide__summary {
        width: 100%;
    }

    .zs-product-grid,
    .zs-featured-varieties__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zs-products-dealer-cta__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .zs-products-dealer-cta__button {
        align-self: flex-start;
    }
}

@media (max-width: 760px) {
    :root {
        --zs-section-padding: var(--zs-section-padding-mobile);
    }

    .zs-product-hero {
        min-height: 360px;
        padding: 108px 0 56px;
    }

    .zs-product-hero__image--desktop {
        display: none;
    }

    .zs-product-hero__image--mobile {
        display: block;
    }

    /* No separate mobile crop was configured, so there is no mobile <img> to
       reveal — keep the desktop one visible rather than hiding the hero photo
       entirely below the breakpoint. */
    .zs-product-hero__media--single .zs-product-hero__image--desktop {
        display: block;
    }

    .zs-product-hero__eyebrow {
        font-size: 11px;
    }

    .zs-product-hero__description {
        font-size: 17px;
    }

    .zs-product-guide__stat-value {
        font-size: 2.2rem;
    }

    .zs-product-guide__stat {
        padding: 16px 8px;
    }

    .zs-product-grid,
    .zs-featured-varieties__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .zs-product-card__media {
        height: 220px;
    }

    .zs-product-card__body {
        padding: 22px 20px;
    }

    .zs-key-variety-card {
        height: 220px;
    }

    .zs-products-dealer-cta {
        padding: 56px 0;
    }

    .zs-product-overview-empty__panel {
        padding: 40px 24px;
    }

    .zs-product-overview-empty__actions .btn {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .zs-product-hero__title {
        font-size: clamp(2rem, 8vw, 2.4rem);
    }

    .zs-product-guide__summary {
        flex-direction: column;
    }

    .zs-product-guide__stat + .zs-product-guide__stat {
        border-left: none;
        border-top: 1px solid var(--zs-border);
    }
}

/* ==========================================================================
   Reduced motion — hover/interaction transforms only. Entrance-reveal
   motion is already fully handled by the global [data-zs-reveal] rules
   in style.css, which have their own reduced-motion block.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .zs-product-card,
    .zs-product-card__image,
    .zs-product-card__cta-arrow,
    .zs-key-variety-card,
    .zs-key-variety-card__image {
        transition: none;
    }

    .zs-product-card:hover .zs-product-card__image,
    .zs-product-card:focus-visible .zs-product-card__image,
    .zs-key-variety-card:hover .zs-key-variety-card__image,
    .zs-key-variety-card:focus-visible .zs-key-variety-card__image {
        transform: none;
    }

    .zs-product-card:hover .zs-product-card__cta-arrow,
    .zs-product-card:focus-visible .zs-product-card__cta-arrow {
        transform: none;
    }

    .zs-key-variety-card:hover,
    .zs-key-variety-card:focus-visible {
        transform: none;
    }
}