/**
 * Single product (crop) page — Figma "Products (web + mobile)" / Maize
 * frame 11185:14078.
 *
 * Page-level chrome only: hero, breadcrumb bar, section headings, the
 * "At a glance" fact strip and the related-crop cards. The varieties panel
 * and comparison table keep their own widget stylesheets
 * (widget-variety-explorer.css, widget-product-comparison.css) so the
 * Elementor widgets and this template stay visually identical — including
 * the comparison scroller shell and its next control, which used to be
 * declared here under page-scoped names the widget could not emit.
 */

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

.single-product__hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 476px;
    padding: 96px 0;
    overflow: hidden;
    background-color: var(--zs-dark-green, #0f2418);
    background-image: var(--zs-product-hero-image, none);
    background-repeat: no-repeat;
    background-position: var(--zs-product-hero-position, center);
    background-size: cover;
}

/* Scrim: the design sets white copy over a mid-tone crop photograph, which
   only stays legible with a gradient behind it. Darker at the left, where
   the text sits. */
.single-product__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 47, 26, 0.88) 0%,
        rgba(10, 47, 26, 0.72) 45%,
        rgba(10, 47, 26, 0.35) 100%
    );
}

/* No image uploaded yet — keep the band solid rather than showing a flat
   scrim over nothing. */
.single-product__hero--plain {
    background-image: none;
}

.single-product__hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--zs-container-max, 1200px);
}

.single-product__eyebrow {
    margin: 0 0 12px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    /* Figma "Color/Casablanca Dark", via the shared token now that it
       carries the correct gold. */
    color: var(--zs-accent, #c48c33);
}

.single-product__hero .single-product__title {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2.75rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    color: #ffffff;
}

.single-product__hero .single-product__lead {
    margin: 14px 0 0;
    max-width: 46ch;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

/* ==========================================================================
   Breadcrumb bar
   ========================================================================== */

.single-product__breadcrumbs {
    padding: 18px 0;
    background-color: var(--zs-warm, #fdfcf9);
    border-bottom: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
}

/* ==========================================================================
   Section shell
   ========================================================================== */

.single-product__varieties,
.single-product__comparison,
.single-product__related {
    background-color: var(--zs-warm, #fdfcf9);
}

.single-product__section-heading {
    margin: 0 0 32px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.75rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--zs-primary, #2d5a27);
}

/* ==========================================================================
   At a glance

   The crop's own prose plus the product-level ranges. Nothing here had any
   styling at all before — `.single-product__content`, `__body` and `__facts`
   appeared in no stylesheet in the theme — so on the day a product gained a
   Growing Regions value it would have rendered as a raw browser <dl>. The
   section is also suppressed entirely when it has nothing to show (see
   single-zs_product.php), which is what it does on the whole catalogue today.
   ========================================================================== */

.single-product__body {
    max-width: 68ch;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--zs-muted, #555555);
}

.single-product__body > * + * {
    margin-top: 1.1em;
}

/* The positioning line is the crop's one-sentence pitch, so it leads at a
   size between the hero lead and body copy. */
.single-product__positioning {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--zs-text, #1c1c1c);
}

.single-product__at-a-glance {
    margin-top: 40px;
}

.single-product__at-a-glance-heading {
    margin: 0 0 20px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--zs-primary, #2d5a27);
}

/* auto-fit, not a fixed three-up: one, two or three facts may be present per
   product and a fixed track would leave dead columns — the same failure this
   page already had in the variety panel. */
.single-product__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 0;
}

.single-product__fact {
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid var(--zs-border, rgba(3, 7, 10, 0.1));
    border-radius: 12px;
}

.single-product__fact-label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 400;
    /* Same #6c7075 the variety quick-stat labels use, so the two fact strips
       on this page read as one system. */
    color: #6c7075;
}

.single-product__fact-value {
    display: block;
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.0125em;
    /* Figma "Color/Jewel Dark", matching the variety stat figures and the
       emphasised comparison row. */
    color: #145f35;
}

/* ==========================================================================
   Varieties / comparison — page tints only

   The scroller shell and its next control now live in
   widget-product-comparison.css, which is where the widget can reach them.
   What stays here is only what belongs to this crop page's frame.
   ========================================================================== */

.single-product__empty {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    color: var(--zs-muted, #555555);
}

/* ==========================================================================
   Closing dealer band

   Only rendered where an editor has written product-specific CTA copy, which
   is nowhere on the current catalogue — but like the fact strip above it had
   no styling at all, so the first product to get that copy would have shown
   an unstyled paragraph in a warm band. `.section--warm` (style.css) supplies
   the background; only the row belongs here.
   ========================================================================== */

.single-product__cta .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 56px;
    padding-bottom: 56px;
}

.single-product__cta-text {
    flex: 1 1 380px;
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--zs-primary, #2d5a27);
}

/* The design tints the sticky label column (Figma "Opacity/Neutral Darkest 5")
   so it reads as a header rail against the white value cells. Scoped to this
   page rather than changed in the shared widget stylesheet, which answers to
   its own frame. */
.single-product__comparison .zs-product-comparison__corner,
.single-product__comparison .zs-product-comparison__row-label {
    background-color: rgba(3, 7, 10, 0.05);
}

/* ==========================================================================
   Related crops
   ========================================================================== */

.single-product__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* The cards are the shared Product Card component; only the crop-page
   proportions and the serif crop name are page-specific. Everything else —
   frame, radius, shadow, view-link treatment — comes from
   widget-product-card.css, so Elementor's Product Grid matches. */
/* The shared component now carries the Figma 300px image area. This rule used
   to set aspect-ratio: 16/10 here, which never applied — the shared rule's
   explicit height wins over a ratio — so the related cards silently kept the
   old 200px box. Deferring to the component keeps these cards identical to the
   products overview grid, which is what the mockup shows. */
.single-product__related-card .zs-product-card__image {
    object-fit: cover;
}

/* No image uploaded yet: hold the same box so the row does not jump. Matches
   the products overview placeholder so an image-less product looks the same
   wherever its card appears. */
.single-product__related-card .zs-product-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--zs-cream, #f7f4ec);
    background-color: var(--zs-primary, #2d5a27);
}

.single-product__related-card .zs-product-card__title {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--zs-text, #1c1c1c);
}

.single-product__related-card .zs-product-card__view-link svg {
    transition: transform 0.2s ease;
}

.single-product__related-card:hover .zs-product-card__view-link svg {
    transform: translateX(3px);
}

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

@media (max-width: 1024px) {
    .single-product__hero {
        min-height: 400px;
        padding: 72px 0;
    }
}

@media (max-width: 767px) {
    .single-product__hero {
        min-height: 320px;
        padding: 56px 0;
        background-image: var(--zs-product-hero-image-mobile, var(--zs-product-hero-image, none));
    }

    /* Narrow viewports put the copy over the middle of the photo, so the
       scrim has to be even rather than left-weighted. */
    .single-product__hero::after {
        background: linear-gradient(
            180deg,
            rgba(10, 47, 26, 0.6) 0%,
            rgba(10, 47, 26, 0.85) 100%
        );
    }

    .single-product__hero .single-product__lead {
        font-size: 1rem;
    }

    .single-product__section-heading {
        margin-bottom: 24px;
    }

    .single-product__at-a-glance {
        margin-top: 32px;
    }

    .single-product__related-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* The main products grid drops its media to 220px on a phone
       (product-overview.css @760). These cards are the same component, so they
       follow it rather than holding 300px. */
    .single-product__related-card .zs-product-card__image {
        height: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* The comparison scroller's own smooth-scroll and nav transition are
       reduced in widget-product-comparison.css, alongside the rules that set
       them. */
    .single-product__related-card .zs-product-card__view-link svg {
        transition: none;
    }

    .single-product__related-card:hover .zs-product-card__view-link svg {
        transform: none;
    }
}