/**
 * Headline / Strip demos — shared base (17–26).
 *
 * Loaded BEFORE every individual headline demo stylesheet (it is registered
 * as a dependency of each demo CSS). This file provides SANE DEFAULTS so the
 * rigid horizontal layouts never break, regardless of which elements the
 * user enables or how they arrange the element_order repeater:
 *
 *   1. Every element type gets a default `order` matching the canonical
 *      render order (title first → buttons last). Individual demos override
 *      these with their own `order` where a different position is desired.
 *
 *   2. Elements that are inherently block-oriented and do not fit a
 *      single-row strip (stock_bar, countdown, swatches) are hidden by
 *      default. A demo can re-enable them with `display:flex` if it has
 *      room. Without this they would wrap and shatter the horizontal layout.
 *
 *   3. The "metadata" elements that DO belong in a strip — modified_date,
 *      sold_count, meta — get compact inline styling so they look right even
 *      in demos that don't ship explicit rules for them.
 *
 *   4. The action buttons (.jespw-button) get baseline alignment + no-underline
 *      defaults so they render cleanly even before a demo's own button rules
 *      apply.
 *
 * Specificity note: rules here use `.jespw-headline-demo .jespw-X` (0,2,0).
 * Individual demo rules use `.jespw-demo-NN-YYY .jespw-X` (also 0,2,0) and
 * load AFTER this file, so demos always win. This file only fills the gaps.
 */

/* ---- Canonical element order (overridable per-demo) ----------------------- */
.jespw-headline-demo .jespw-title         { order: 1; }
.jespw-headline-demo .jespw-category      { order: 2; }
.jespw-headline-demo .jespw-excerpt       { order: 3; }
.jespw-headline-demo .jespw-rating        { order: 4; }
.jespw-headline-demo .jespw-modified-date { order: 5; }
.jespw-headline-demo .jespw-sold-count    { order: 6; }
.jespw-headline-demo .jespw-price         { order: 7; }
.jespw-headline-demo .jespw-meta          { order: 8; }
.jespw-headline-demo .jespw-buttons       { order: 99; }

/* ---- Block-oriented elements that don't fit a single-row strip ----------- */
/* Hidden by default. A demo with vertical room can re-enable with display:flex. */
.jespw-headline-demo .jespw-stock-bar,
.jespw-headline-demo .jespw-countdown,
.jespw-headline-demo .jespw-swatches {
        display: none !important;
}

/* ---- Compact inline styling for metadata elements ------------------------ */
/* These belong in a strip but most demos don't ship rules for them, so they
   would otherwise render as unstyled blocks. Keep them small + inline + muted.
   The SVG icons get display:block + line-height:1 so they never push the row
   taller than the text line (the classic "icon nudge" overflow). */
.jespw-headline-demo .jespw-modified-date {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        color: #94a3b8;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-headline-demo .jespw-modified-icon {
        font-size: 0.85em;
        opacity: 0.75;
        flex-shrink: 0;
        display: block;
        line-height: 1;
}
.jespw-headline-demo .jespw-modified-text {
        display: inline;
}

.jespw-headline-demo .jespw-sold-count {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4;
        color: #64748b;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-headline-demo .jespw-sold-icon {
        font-size: 0.9em;
        opacity: 0.85;
        flex-shrink: 0;
        display: block;
        line-height: 1;
}
.jespw-headline-demo .jespw-sold-count-text {
        display: inline;
}

.jespw-headline-demo .jespw-meta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        color: #94a3b8;
        white-space: nowrap;
        flex-shrink: 0;
}

/* ---- Excerpt: keep it from blowing out a single-row strip --------------- */
/* Demos that intentionally show the excerpt (17, 18, 20) override this with
   their own max-width + line rules. For the rest, cap it so it never forces
   the row to wrap awkwardly. */
.jespw-headline-demo .jespw-excerpt {
        max-width: 52ch;
        line-height: 1.55;
}

/* ---- Buttons row + buttons: baseline defaults ---------------------------- */
/* The .jespw-buttons container holds the add-to-cart link + icon buttons.
   Make it a tidy inline-flex row that shrinks to fit and aligns to center.
   Individual demos override with their own order/alignment as needed.
   --jespw-icon-btn drives the icon-button diameter so every demo can tune
   the proportion without re-declaring the whole rule block. */
.jespw-headline-demo {
        --jespw-icon-btn: 26px;
        --jespw-icon-svg: 15px;
}
.jespw-headline-demo .jespw-buttons {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin: 0;
        line-height: 1;
}
.jespw-headline-demo .jespw-icon-buttons {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        line-height: 1;
}
/* The actual buttons (.jespw-button is added in PHP to the add-to-cart link
   + each icon button). Baseline: inline, no underline, centered, nowrap.
   A matching min-height keeps the add-to-cart text button visually aligned
   with the square icon chips next to it (no more "floating" buttons). */
.jespw-headline-demo .jespw-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: all .25s ease;
        line-height: 1.2;
        min-height: var(--jespw-icon-btn);
        box-sizing: border-box;
}
.jespw-headline-demo .jespw-button svg {
        flex-shrink: 0;
        display: block;
}
/* Icon-only buttons (quick view / wishlist / compare) live inside
   .jespw-icon-buttons. They share the .jespw-button class with the
   add-to-cart link, but should render as compact square icon chips — NOT
   as padded text buttons. This higher-specificity rule (0,3,0) wins over
   each demo's `.jespw-demo-XX .jespw-button` (0,2,0) so icon buttons stay
   tidy in every headline demo, while the add-to-cart link keeps the demo's
   text-button styling. Sized via the --jespw-icon-btn variable so the
   chips never overshoot the compact strip cards (was 32px → now 26px by
   default, 22px on the ultra-compact chip demo). */
.jespw-headline-demo .jespw-icon-buttons .jespw-button {
        padding: 0;
        width: var(--jespw-icon-btn);
        height: var(--jespw-icon-btn);
        min-height: 0;
        border-radius: 999px;
        background: transparent;
        border: 1.5px solid currentColor;
        color: inherit;
        font-size: 0;
        gap: 0;
        overflow: hidden;
}
.jespw-headline-demo .jespw-icon-buttons .jespw-button svg {
        width: var(--jespw-icon-svg);
        height: var(--jespw-icon-svg);
}
.jespw-headline-demo .jespw-icon-buttons .jespw-button:hover {
        background: currentColor;
}
.jespw-headline-demo .jespw-icon-buttons .jespw-button:hover svg {
        color: #fff;
}

/* ---- Rating: compact inline --------------------------------------------- */
.jespw-headline-demo .jespw-rating {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: #94a3b8;
        white-space: nowrap;
        flex-shrink: 0;
}
.jespw-headline-demo .jespw-rating-count {
        font-size: 11px;
        opacity: 0.8;
}

/* ---- Price: keep it on one line ----------------------------------------- */
.jespw-headline-demo .jespw-price {
        white-space: nowrap;
        flex-shrink: 0;
}

/* ---- Category: default pill (demos skin it) ----------------------------- */
.jespw-headline-demo .jespw-category {
        white-space: nowrap;
        flex-shrink: 0;
}

/* ---- Badges: render inline, never absolute, in a strip ------------------ */
.jespw-headline-demo .jespw-badges {
        position: static;
        display: inline-flex;
        gap: 6px;
        flex-shrink: 0;
}

/* ---- Grid: headline demos default to a single column stack -------------- */
/* Individual demos override this (e.g. demo 19 goes 2-col at >=900px,
   demo 25 uses flex-wrap). This is just the safe fallback. */
.jespw-headline-demo .jespw-grid {
        grid-template-columns: 1fr;
}

/* ---- Slider: each slide is one self-contained headline row -------------- */
.jespw-headline-demo.jespw-layout-slider .jespw-card {
        height: 100%;
}