/**
 * Zamseed Product Grid Widget Styles
 *
 * Layers on top of widget-product-card.css, which owns the base
 * `.zs-product-card` component and is declared first in this widget's
 * get_style_depends(). `.zs-product-grid` is declared HERE and nowhere else
 * in the widget layer — it used to be duplicated in widget-product-card.css
 * at identical specificity with a different track function, so which one won
 * depended on Elementor's enqueue order.
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* ==========================================================================
   Product Grid Container
   ========================================================================== */

.zs-product-grid-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: min(var(--zs-container-max, 1200px), calc(100% - var(--zs-container-padding, 20px) * 2));
    margin: 0 auto;
    padding: 92px 0 80px;
}

.zs-product-grid-section__header {
    max-width: 760px;
    text-align: center;
}

.zs-product-grid-section__heading {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--zs-primary, #2d5a27);
}

.zs-product-grid-section__description {
    margin: 12px 0 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

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

/* Columns and gap are the only two properties this variant takes off widget
   controls, and Elementor compiles those at
   `.elementor-{page} .elementor-element.elementor-element-{id} .zs-product-grid`
   — four class-level parts — emitting the control DEFAULTS (3 columns, 28px)
   on every instance, touched or not. A plain two-part rule loses to that, so
   the overlay variant has been rendering the standard-card geometry. Repeating
   the variant and grid classes takes this rule and its two breakpoints below
   to five parts, one clear of Elementor; the preset block at the foot of the
   file sits one higher again, so it keeps its own breakpoints. */
.zs-product-grid-section.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards
    .zs-product-grid.zs-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.zs-product-grid-section--overlay-cards .zs-product-card {
    position: relative;
    display: flex;
    min-width: 0;
    height: 250px;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 12px;
    background: var(--zs-primary, #2d5a27);
    color: #ffffff;
    text-decoration: none;
}

.zs-product-grid-section--overlay-cards .zs-product-card__image-wrapper {
    position: absolute;
    inset: 0;
}

.zs-product-grid-section--overlay-cards .zs-product-card__image,
.zs-product-grid-section--overlay-cards .zs-product-card__image img {
    width: 100%;
    height: 100%;
}

.zs-product-grid-section--overlay-cards .zs-product-card__image img {
    display: block;
    object-fit: cover;
    transition: transform 0.25s ease;
}

/* With no image the card background is a flat --zs-primary block and the
   gradient scrim has nothing to sit over. The placeholder field gives the
   overlay card a subject-free but non-flat surface, and the scrim below still
   carries the title. Wins over the base placeholder rule on specificity. */
.zs-product-grid-section--overlay-cards .zs-product-card__image--placeholder {
    background-image: linear-gradient(
        160deg,
        var(--zs-primary, #2d5a27) 0%,
        var(--zs-primary-dark, #244f22) 100%
    );
}

.zs-product-grid-section--overlay-cards .zs-product-card__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0.62) 100%);
}

.zs-product-grid-section--overlay-cards .zs-product-card__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 16px;
}

.zs-product-grid-section--overlay-cards .zs-product-card__category,
.zs-product-grid-section--overlay-cards .zs-product-card__description {
    display: none;
}

.zs-product-grid-section--overlay-cards .zs-product-card__title {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.45;
    color: #ffffff;
}

.zs-product-grid-section--overlay-cards a.zs-product-card:hover .zs-product-card__image img {
    transform: scale(1.04);
}

.zs-product-grid-section--overlay-cards a.zs-product-card:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Overlay cards: photographic tile geometry.

   Everything below repeats the section class four times. That is not
   decoration — it is the minimum that beats Elementor.

   The product-grid's own control DEFAULTS (image_height 200px, card_background
   #ffffff, title_color #1c1c1c) are emitted by Elementor into the page's
   generated stylesheet as

     .elementor-{page} .elementor-element.elementor-element-{id} .zs-product-card__image

   — FOUR class-level parts, because .elementor-element and
   .elementor-element-{id} sit on the same element. The two-part variant rules
   above lose to that, which is why the overlay cards were rendering a 200px
   image inside a 250px card, with a white strip beneath it and a near-black
   title sitting at the TOP of the card.

   Four repeats plus the descendant make five, one clear of Elementor. Three
   only tie, and a tie is decided by load order — which Elementor's page
   stylesheet wins, because it is printed after the widget CSS. That was
   measured on staging, not assumed: at three repeats every value came back
   unchanged.

   The title also needed justify-content, not align-items: the card is
   flex-direction: column, so align-items works on the horizontal axis and never
   moved the content box down.
   -------------------------------------------------------------------------- */

.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards
    .zs-product-card {
    /* The photograph is the card surface; a background colour would only ever
       show as a band where the image failed to reach. */
    background-color: transparent;
    justify-content: flex-end;
    border-radius: 12px;
}

.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards
    .zs-product-card__image,
.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards
    .zs-product-card__image img {
    height: 100%;
}

/* Keeps the top of the photograph bright and readable, and concentrates the
   scrim behind the title. The previous ramp started at 0% and dimmed the whole
   image. */
.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards
    .zs-product-card__image-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%);
}

.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards
    .zs-product-card__content {
    /*
     * The base component gives the content box `flex: 1` so standard cards can
     * equalise their heights. On an overlay card that makes the box fill all
     * 250px, so the title renders at ITS top — which is why the card's
     * justify-content had nothing to move. Shrinking the box to its content is
     * what actually anchors the name to the bottom-left.
     */
    flex: 0 0 auto;
    padding: 16px 16px 14px;
}

.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards
    .zs-product-card__title {
    color: #ffffff;
    /* Carries the name over a bright patch of photograph without resorting to
       a heavier scrim. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards
    a.zs-product-card:hover .zs-product-card__image img {
    transform: scale(1.035);
}

.zs-product-grid-section__actions {
    display: flex;
    justify-content: center;
}

.zs-product-grid-section__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 14px 30px;
    border: 2px solid var(--zs-primary, #2d5a27);
    border-radius: 999px;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Figma node 11121:38617 sizes the trailing glyph at 18x18. flex: none keeps
   it square when the label wraps. */
.zs-product-grid-section__button-icon {
    flex: none;
    width: 18px;
    height: 18px;
}

.zs-product-grid-section__button:hover,
.zs-product-grid-section__button:focus-visible {
    background: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

/* No Products Message */
.zs-no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: var(--zs-muted, #666666);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
}

/* ==========================================================================
   Editor-preview skeleton

   Only content_template() emits `--skeleton`; render() never does. Dynamic,
   Current Group and Selected Slugs have no real posts in the preview, and the
   template used to fill that gap with the literal strings "Field Crops" /
   "Product Name" / "Product description will appear here." over a stock grey
   image — sample content that reads as a real product to a reviewer. These
   rules draw the same box model with no words in it, so the editor still sees
   the correct column count, card height and rhythm.
   ========================================================================== */

.zs-product-card--skeleton {
    pointer-events: none;
}

.zs-product-card__skeleton-line {
    display: block;
    height: 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    background-color: var(--zs-border, rgba(0, 0, 0, 0.08));
}

.zs-product-card__skeleton-line--pill {
    width: 96px;
    height: 22px;
    margin-bottom: 14px;
}

.zs-product-card__skeleton-line--title {
    width: 62%;
    height: 20px;
    margin-bottom: 14px;
}

.zs-product-card__skeleton-line--short {
    width: 45%;
    margin-bottom: 0;
}

.zs-product-grid-section--overlay-cards .zs-product-card--skeleton .zs-product-card__skeleton-line {
    background-color: rgba(255, 255, 255, 0.35);
}

/* The overlay variant hides the category and description slots, so only the
   title bar should show through the scrim. */
.zs-product-grid-section--overlay-cards .zs-product-card__skeleton-line--pill,
.zs-product-grid-section--overlay-cards .zs-product-card__skeleton-line--short,
.zs-product-grid-section--overlay-cards .zs-product-card__skeleton-line:not([class*='--']) {
    display: none;
}

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

@media (max-width: 1080px) {
    .zs-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 760px) {
    .zs-product-grid-section {
        padding: 68px 0;
    }

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

    .zs-product-grid-section.zs-product-grid-section--overlay-cards.zs-product-grid-section--overlay-cards
        .zs-product-grid.zs-product-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zs-product-grid-section--overlay-cards .zs-product-card {
        height: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zs-product-grid-section--overlay-cards .zs-product-card__image img,
    .zs-product-grid-section__button {
        transition: none;
    }
}

/* ==========================================================================
   Agro Dealers preset — "Explore Zamseed Products Before You Search"
   Figma node 11121:38617. Applied by the widget's Design Preset control.

   Every rule below is scoped to the preset class AND the overlay-card
   variant, and selecting the preset emits BOTH: card_variant is one of the
   two keys Zamseed_Widget_Product_Grid::get_effective_settings() overrides,
   so the preset resolves to image_overlay at render time in the editor
   preview and on the frontend alike. Nothing here waits on a second control
   the editor also has to find and set.

   The preset control defaults to Custom and no stored grid saves a preset
   key, so no instance published today carries either class — the products
   overview and the product-detail related row are untouched, and a page opts
   in explicitly.

   The preset states its own four-across row rather than inheriting it,
   because its breakpoints (900/560) differ from the variant's (1080/760).
   Those grid rules repeat the preset and grid classes to reach six
   class-level parts: one clear of Elementor's generated Columns and Gap CSS,
   and one clear of the raised variant rules above.
   ========================================================================== */

.zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers {
    /* 111.11px / 80.01px on a #fdfcf9 band. The section box is capped at the
       1200px container, so the band is bled outwards with a spread shadow
       rather than by introducing an inner wrapper element — stored instances
       keep the DOM they were saved against. */
    gap: 32px;
    padding: 111.11px 0 80.01px;
    background-color: var(--zs-warm, #fdfcf9);
    box-shadow: 0 0 0 100vmax var(--zs-warm, #fdfcf9);
    clip-path: inset(0 -100vmax);
}

.zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers .zs-product-grid-section__heading {
    /* 38.4px / 42.24px — the clamp resolves to 2.4rem at the 1280px design
       width and steps down on narrower viewports. */
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    line-height: 1.1;
    color: var(--zs-primary, #2d5a27);
}

.zs-product-grid-section.zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers.zs-product-grid--preset-agro-dealers
    .zs-product-grid.zs-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers .zs-product-card {
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
}

.zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers .zs-product-card__image-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%);
}

.zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers .zs-product-card__content {
    padding: 15.5px 16px;
}

.zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers .zs-product-card__title {
    /* 22px / 35.2px. */
    font-size: 1.375rem;
    line-height: 1.6;
    color: #ffffff;
}

/* Padding only: the base rule already carries the 2px border, the pill
   radius, the 50px min-height and the primary-green text, and re-stating the
   transparent background here would outrank the button's own hover fill. */
.zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers .zs-product-grid-section__button {
    padding: 16px 30px;
    line-height: 1;
}

@media (max-width: 900px) {
    .zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers {
        padding: 88px 0 64px;
    }

    .zs-product-grid-section.zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers.zs-product-grid--preset-agro-dealers
        .zs-product-grid.zs-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers {
        padding: 64px 0 48px;
    }

    .zs-product-grid-section.zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers.zs-product-grid--preset-agro-dealers
        .zs-product-grid.zs-product-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zs-product-grid-section--overlay-cards.zs-product-grid--preset-agro-dealers .zs-product-card {
        height: 220px;
    }
}