/**
 * 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, 100px) 0;
}

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

/* This page keeps its own hero component — it renders from the product
   archive template, not the page-hero widget — but it answers to the same
   shared internal-hero geometry, so moving between it and the widget-driven
   heroes does not shift the heading. See widget-page-hero.css. */
.zs-product-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 700px;
    /* Symmetric, like every other internal hero; it was 160/92. */
    padding: 160px 0;
    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:
        /* The shared internal-hero scrim; this was 0.774/0.594/0.378. */
        linear-gradient(90deg, rgba(15, 36, 24, 0.86) 0%, rgba(15, 36, 24, 0.66) 46%, rgba(15, 36, 24, 0.42) 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;
    /* The shared 300px desktop inset. This hero was using the site default
       container (120px), which put its heading 180px left of Contact's. */
    width: min(1440px, 100%);
    padding-right: clamp(20px, 20.83vw, 300px);
    padding-left: clamp(20px, 20.83vw, 300px);
}

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

.zs-product-hero__eyebrow {
    margin: 0 0 24px;
    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 24px;
    color: #ffffff;
    font-family: var(--zs-font-serif);
    /* The shared internal-hero title scale and 1.08 leading. */
    font-size: clamp(2.5rem, 4.44vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: normal;
}

.zs-product-hero__description {
    margin: 0;
    /* The 820px content box is the measure; this was capped at 640. */
    max-width: 100%;
    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: var(--zs-radius-pill, 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(4, minmax(0, 1fr));
    gap: 24px;
}

.zs-key-variety-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 370px;
    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.08) 0%, rgba(0, 0, 0, 0.3) 42%, rgba(0, 0, 0, 0.78) 100%);
}

.zs-key-variety-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 210px;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
    color: #ffffff;
}

.zs-key-variety-card__crop {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--zs-font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.35;
    text-transform: uppercase;
}

.zs-key-variety-card__name {
    display: block;
    margin: 0 0 10px;
    color: #ffffff;
    font-family: var(--zs-font-serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.12;
}

.zs-key-variety-card__summary {
    display: -webkit-box;
    margin: 0 0 14px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.84);
    font-family: var(--zs-font-sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.zs-key-variety-card__attribute {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--zs-font-sans);
    font-size: 12px;
    line-height: 1.4;
}

.zs-key-variety-card__attribute-label {
    font-weight: 800;
}

.zs-key-variety-card__attribute-value {
    font-weight: 600;
}

.zs-key-variety-card__cta {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    color: #ffffff;
    font-family: var(--zs-font-sans);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ==========================================================================
   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-guide__row {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

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

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

    .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__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 {
        min-height: 340px;
    }

    .zs-key-variety-card__body {
        min-height: 190px;
        padding: 20px;
    }

    .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;
    }
}

/* --------------------------------------------------------------------------
   Hero breakpoints, stated separately from the rest of this page.

   The page breaks at 1024/767; the shared internal hero breaks at 1080/768.
   Left on the page's own boundaries this hero sat at the tablet band while
   every widget-driven hero had already moved to the mobile one — at 768px it
   was 560px tall with the copy at x=61 against their 460px at x=20. These
   blocks carry the shared boundaries for the hero alone and leave the rest of
   the page on its own. See widget-page-hero.css.
   -------------------------------------------------------------------------- */

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

    .zs-product-hero .container {
        padding-right: clamp(24px, 8vw, 96px);
        padding-left: clamp(24px, 8vw, 96px);
    }
}

@media (max-width: 768px) {
    .zs-product-hero {
        min-height: 460px;
        padding: 84px 0;
    }

    .zs-product-hero .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    /* The shared internal-hero mobile clamp. Without it this title kept the
       desktop clamp's 2.5rem floor and rendered 40px where every other hero
       was 38.4px at 480 and 43.2px at 768. */
    .zs-product-hero__title {
        font-size: clamp(2rem, 8vw, 2.7rem);
    }

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

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