/* DEPLOY TARGET: SANDBOX (sandbox.improveequine.com) */
/*
 * Improve Equine — Design Tokens + Shared Brand Components
 * Child theme: twentytwentyfive-child / assets/css/tokens.css
 *
 * SECTION 1: CSS custom properties
 *   Single source of truth for all brand colors, typography, spacing, etc.
 *   Synced with theme.json.
 *
 * SECTION 2: Shared .ie-* utility classes
 *   Sitewide brand typography, button, and layout helpers.
 *   Moved here from homepage.css (and the Homepage Styles plugin).
 *   Previously only loaded on the homepage — now available everywhere.
 *
 * SECTION 3: Shared .iel-* component classes
 *   Card, badge, opinion, CTA, button, and footer components.
 *   Needed on both The Library (page 51) AND Blog Archive (page 1712).
 *   Previously only in library.css → page 1712 was unstyled. Fixed here.
 *
 * -----------------------------------------------------------------------
 * Changelog:
 *   2026-06-03 (clean-base Step 2e — badge / stat / tabs):
 *   - Added .ie-badge (+ science/opinion/practical/gold/soft), .ie-stat/-num/-label,
 *     .ie-tabs/.ie-tab. Additive; pages adopt on their passes. Testimonial/recipe-step/
 *     trust/product-card/form-row deferred to their owning phases (no clean evidence yet).
 *
 *   2026-06-03 (clean-base Step 2d — canonical card):
 *   - Added .ie-card (+ --dark/--forest) using existing --ie-radius-lg; warm
 *     --ie-color-card-bg (#FDFAF6). Additive — pages adopt it during their passes.
 *
 *   2026-06-03 (clean-base Step 2c — universal type rhythm):
 *   - .ie-h1/.ie-h2/.ie-h3 margin:0 0 0.4em; .ie-body margin:0 0 1em; last-child resets.
 *   - Single uniform vertical rhythm for all pages; replaces per-page resets/gaps.
 *
 *   2026-06-03 (clean-base Step 2b — heading color):
 *   - Restored forest green as the .ie-h1 default (color:var(--ie-color-forest-deep)).
 *   - Hardened .ie-on-dark to also override the .ie-h1/.ie-h2/.ie-h3 CLASS (not just
 *     tags), so the green default can never become unreadable on dark/video bands.
 *   - .ie-h2/.ie-h3 still inherit (unchanged).
 *
 *   2026-06-03 (clean-base Step 2a — component-layer dedupe):
 *   - Removed dead Section-2 duplicates (.ie-lbl/.ie-rule/.ie-h1/.ie-h2/.ie-h3/
 *     .ie-body/.ie-pull, .ie-btn-green/.ie-btn-outline/.ie-btn-teal). The
 *     Universal Component Layer is now the single source. Headings inherit
 *     color (the .ie-h1 forest-deep default is gone; cream on dark via .ie-on-dark).
 *
 *   2026-06-03 (clean-base Step 1 — token layer):
 *   - Dropped Georgia from --ie-font-display (now 'Playfair Display', serif).
 *   - Added --ie-color-max (#E8660A): Benchmark MAX intensity sub-accent.
 *   - Added --ieb-serif/--ieb-sans aliases; Blog 1712 hero referenced them
 *     undefined. Interim until Blog becomes a dynamic archive.
 *
 *   Session 8 (2026-06-01):
 *   - Corrected --ie-color-brand-teal: #0292B7 → #4A8FA0 (actual site teal;
 *     #0292B7 was set in an earlier brand pass but never used anywhere).
 *   - Added --ie-color-teal-hover: #3d7a8a (used in hover states sitewide).
 *   - Added --iel-* variable aliases (consumed by page 51 inline styles).
 *   - Added Section 2: .ie-* shared utility classes from homepage.css.
 *   - Added Section 3: .iel-* shared components from library.css.
 */

/* ================================================================
   SECTION 1 — CSS CUSTOM PROPERTIES
================================================================ */

:root {

    /* ============================================================
       LAYOUT — override Twenty Twenty-Five root padding
       TT25 adds 1.5rem padding on each side via global-styles.
       Our full-width .ie sections need edge-to-edge rendering.
    ============================================================ */
    --wp--style--root--padding-top: 0px;
    --wp--style--root--padding-right: 0px;
    --wp--style--root--padding-bottom: 0px;
    --wp--style--root--padding-left: 0px;

    --ie-content-width: 880px;
    --ie-wide-width: 1280px;
    --ie-card-min:      240px;  /* product/compact card min (Step 7) */
    --ie-card-min-wide: 300px;  /* article/content card min (Step 7) */
    --ie-shell:         1600px; /* readable page-shell max; content fills laptop, capped on huge monitors */
    --ie-section-max:   1160px; /* default section width; a page sets this locally to go narrower (e.g. About 960) */

    /* ============================================================
       BRAND COLORS
    ============================================================ */
    --ie-color-brand-teal:       #4A8FA0; /* corrected: was #0292B7, unused */
    --ie-color-teal-hover:       #3d7a8a; /* hover state used sitewide */
    --ie-color-brand-teal-light: #1AC8DB;
    --ie-color-brand-navy:       #1B3A4B;

    --ie-color-forest-deep:  #1B2E1B;
    --ie-color-forest-mid:   #2D4A35;
    --ie-color-sage:         #7DB87A;
    --ie-color-sage-dark:    #2C5829;

    --ie-color-gold:       #C8A96E;
    --ie-color-gold-light: #F7E8D0;
    --ie-color-max:        #E8660A; /* Benchmark MAX intensity sub-accent — intentional, not drift */

    --ie-color-cream-primary:        #F7F3ED;
    --ie-color-cream-secondary:      #F0EBE3;
    --ie-color-cream-border:         #E0D8CE;
    --ie-color-cream-border-subtle:  #DDD8D0;
    --ie-color-card-bg:              #FDFAF6; /* warm off-white card surface — lifts off cream page, never stark white */

    --ie-color-text-primary:   #1B2E1B;
    --ie-color-text-secondary: #3A4A3A;
    --ie-color-text-tertiary:  #6B6560;
    --ie-color-text-muted:     #9A9088;
    --ie-color-text-base:      #2A2A2A; /* .ie wrapper base text */

    --ie-color-footer-bg:      #111C11; /* deep black-green footer */

    /* ============================================================
       --iel-* ALIASES
       Used in page 51 (Library) inline styles. Keep these so
       existing HTML doesn't need to be touched.
    ============================================================ */
    --iel-dark:  var(--ie-color-brand-navy);
    --iel-forest: var(--ie-color-forest-deep);
    --iel-green: var(--ie-color-forest-mid);
    --iel-teal:  var(--ie-color-brand-teal);
    --iel-cream: var(--ie-color-cream-primary);
    --iel-warm:  var(--ie-color-cream-secondary);
    --iel-warm2: #EAE4DC;
    --iel-div:   var(--ie-color-cream-border);
    --iel-muted: var(--ie-color-text-tertiary);
    --iel-hint:  var(--ie-color-text-muted);
    --iel-serif: var(--ie-font-display);
    --iel-sans:  var(--ie-font-body);

    /* ============================================================
       --ieb-* ALIASES
       Blog (page 1712) hero references var(--ieb-serif)/(--ieb-sans)
       inline but defines them nowhere, so its hero font falls back
       wrong. Interim scaffolding; remove when Blog becomes a dynamic
       archive (clean-base decision #2).
    ============================================================ */
    --ieb-serif: var(--ie-font-display);
    --ieb-sans:  var(--ie-font-body);

    /* ============================================================
       FONT FAMILIES
    ============================================================ */
    --ie-font-body:    'Manrope', system-ui, -apple-system, sans-serif;
    --ie-font-display: 'Playfair Display', serif;

    /* ============================================================
       FONT SIZES
    ============================================================ */
    --ie-font-size-xs:  0.625rem;
    --ie-font-size-sm:  0.8125rem;
    --ie-font-size-base: 0.9375rem;
    --ie-font-size-md:  1rem;
    --ie-font-size-lg:  1.25rem;
    --ie-font-size-xl:  1.5rem;
    --ie-font-size-2xl: 2rem;
    --ie-font-size-3xl: 2.5rem;
    --ie-font-size-4xl: 3.25rem;

    /* ============================================================
       LINE HEIGHTS
    ============================================================ */
    --ie-line-height-tight:   1.15;
    --ie-line-height-heading: 1.4;
    --ie-line-height-ui:      1.6;
    --ie-line-height-body:    1.7;
    --ie-line-height-relaxed: 1.85;

    /* ============================================================
       LETTER SPACING
    ============================================================ */
    --ie-tracking-tight:   -0.01em;
    --ie-tracking-normal:  0;
    --ie-tracking-caps:    0.04em;
    --ie-tracking-eyebrow: 0.1em;
    --ie-tracking-label:   0.18em;
    --ie-tracking-wide:    0.22em;

    /* ============================================================
       SPACING SCALE (8px-based)
    ============================================================ */
    --ie-space-1:  0.25rem;
    --ie-space-2:  0.5rem;
    --ie-space-3:  0.75rem;
    --ie-space-4:  1rem;
    --ie-space-5:  1.5rem;
    --ie-space-6:  2rem;
    --ie-space-7:  3rem;
    --ie-space-8:  4rem;
    --ie-space-9:  5rem;
    --ie-space-10: 6rem;

    /* ============================================================
       BORDER RADIUS
    ============================================================ */
    --ie-radius-none:   0;
    --ie-radius-sm:     4px;
    --ie-radius-md:     6px;
    --ie-radius-lg:     10px;
    --ie-radius-xl:     14px;
    --ie-radius-pill:   9999px;
    --ie-radius-circle: 50%;

    /* ============================================================
       SHADOWS
    ============================================================ */
    --ie-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
    --ie-shadow-sm: 0 2px 12px rgba(27, 58, 75, 0.12);
    --ie-shadow-md: 0 4px 16px rgba(27, 58, 75, 0.16);
    --ie-shadow-lg: 0 8px 32px rgba(27, 58, 75, 0.18);
    --ie-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.25);
    --ie-shadow-text: 0 2px 14px rgba(0, 0, 0, 0.5);
}


/* ================================================================
   SECTION 2 — SHARED .ie-* UTILITY CLASSES
   Previously duplicated in homepage.css and Homepage Styles plugin.
   Now sitewide. homepage.css strips these on next upload.
================================================================ */

/* Base container */
.ie {
    font-family: Manrope, sans-serif;
    background: var(--ie-color-cream-primary);
    color: var(--ie-color-text-base);
    width: 100%;
}
.ie img { max-width: 100%; height: auto; display: block; }

/* WordPress block content resets — needed wherever .ie sections appear */
.entry-content.wp-block-post-content,
.wp-block-post-content.is-layout-constrained {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.wp-block-post-content > .wp-block-html { max-width: none !important; }

/* Typography + the green/outline/teal buttons live in the UNIVERSAL
   COMPONENT LAYER (bottom of this file) — the single source of truth.
   Their former duplicate copies here (.ie-lbl/.ie-rule/.ie-h1/.ie-h2/
   .ie-h3/.ie-body/.ie-pull, .ie-btn-green/.ie-btn-outline/.ie-btn-teal)
   were dead (overridden by the universal layer's later source order) and
   were removed 2026-06-03 (clean-base Step 2a). Headings now inherit color
   — cream on dark bands via .ie-on-dark. */

/* Buttons — .ie-btn-dark has no universal twin yet, so it stays here.
   TODO(dead-CSS audit): confirm .ie-btn-dark page usage, then fold into the
   universal button set or remove. */
.ie-btn-dark {
    background: var(--ie-color-brand-navy);
    color: var(--ie-color-cream-primary);
    padding: 12px 26px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 2px;
    text-decoration: none;
    display: inline-block;
}

/* Layout utilities */
.ie-max {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}
.ie-footer {
    background: var(--ie-color-footer-bg);
    padding: 32px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}


/* ================================================================
   SECTION 3 — SHARED .iel-* COMPONENT CLASSES
   Needed on both The Library (page 51) AND Blog Archive (page 1712).
   Previously only in library.css → page 1712 was unstyled. Fixed here.

   SELECTOR NOTE: These use plain class selectors (not scoped .iel .iel-card)
   because wp:html blocks each get their own wp-block-html wrapper in the DOM,
   breaking ancestor-based selectors across blocks. !important is used only on
   properties that Gutenberg's .entry-content / .wp-block-post-content resets
   would otherwise override (background, color, display, text-decoration).
================================================================ */

/* Base wrapper resets */
.iel, .iel *, .iel *::before, .iel *::after { box-sizing: border-box; }
.iel h1, .iel h2, .iel h3, .iel h4, .iel p, .iel ul, .iel ol, .iel li { margin: 0; padding: 0; }
.iel { font-family: var(--iel-sans); color: var(--iel-forest); background: var(--iel-warm); }
.iel a { color: inherit; text-decoration: none; }

/* Kicker label */
.iel-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--iel-teal);
    margin-bottom: 12px;
    display: block;
}

/* Badges */
.iel-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
}
.iel-badge-sci { background: var(--iel-dark);  color: var(--iel-cream); }
.iel-badge-op  { background: var(--iel-green); color: var(--iel-cream); }
.iel-badge-pr  { background: var(--iel-teal);  color: var(--iel-cream); }

/* Cards */
.iel-card {
    background: #ffffff !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(27, 58, 75, 0.07);
    display: block !important;
    text-decoration: none !important;
    width: 100%;
    color: var(--iel-forest) !important;
}
.iel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(27, 58, 75, 0.13);
}
.iel-card-img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block !important;
}
.iel-card-body { padding: 26px 24px !important; }
.iel-card-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--iel-teal);
    margin-bottom: 10px;
    display: block;
}
.iel-card-title {
    font-family: var(--iel-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--iel-dark);
    line-height: 1.3;
    margin-bottom: 10px;
    display: block;
}
.iel-card-desc {
    font-size: 13px;
    color: var(--iel-hint);
    line-height: 1.65;
    margin-bottom: 18px;
    display: block;
}
.iel-card-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--iel-teal);
    letter-spacing: 0.04em;
    display: block;
}

/* Opinion cards */
.iel-opinion {
    background: #ffffff !important;
    border-radius: 16px;
    padding: 36px 32px !important;
    box-shadow: 0 2px 14px rgba(27, 58, 75, 0.07);
    border-left: 4px solid var(--iel-green) !important;
    margin-bottom: 20px !important;
    display: block !important;
    text-decoration: none !important;
    color: var(--iel-forest) !important;
}
.iel-opinion:hover { box-shadow: 0 8px 28px rgba(27, 58, 75, 0.12); }
.iel-op-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--iel-green);
    margin-bottom: 10px;
    display: block;
}
.iel-op-title {
    font-family: var(--iel-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--iel-dark);
    line-height: 1.3;
    margin-bottom: 12px;
    display: block;
}
.iel-op-desc {
    font-size: 14px;
    color: var(--iel-muted);
    line-height: 1.65;
    margin-bottom: 8px;
}
.iel-op-attr {
    font-size: 12px;
    font-style: italic;
    color: var(--iel-hint);
    margin-top: 12px;
    display: block;
}

/* CTA block */
.iel-cta-dark {
    background: var(--iel-dark) !important;
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
    margin-top: 16px;
}
.iel-cta-dark h2 {
    font-family: var(--iel-serif);
    font-size: 26px;
    color: var(--iel-cream) !important;
    margin-bottom: 14px;
}
.iel-cta-dark p {
    font-size: 14px !important;
    color: rgba(247, 243, 237, 0.85) !important;
    line-height: 1.65;
    margin-bottom: 24px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* IEL buttons */
.iel-btn-teal {
    display: inline-block !important;
    background: var(--iel-teal) !important;
    color: var(--iel-cream) !important;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    margin: 6px 8px;
}
.iel-btn-teal:hover { background: var(--ie-color-teal-hover) !important; color: var(--iel-cream) !important; }

.iel-btn-ghost {
    display: inline-block !important;
    border: 1.5px solid rgba(247, 243, 237, 0.5) !important;
    color: rgba(247, 243, 237, 0.85) !important;
    padding: 12px 26px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    margin: 6px 8px;
}
.iel-btn-ghost:hover { border-color: var(--iel-cream) !important; color: var(--iel-cream) !important; }

/* See-more link */
.iel-see-more {
    display: inline-block !important;
    margin-top: 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--iel-teal) !important;
    border: 1.5px solid var(--iel-teal) !important;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none !important;
}
.iel-see-more:hover { background: var(--iel-teal) !important; color: #ffffff !important; }

/* Footer */
.iel-footer {
    background: var(--ie-color-footer-bg);
    padding: 36px 48px;
    text-align: center;
}
.iel-footer p {
    font-size: 12px !important;
    color: rgba(247, 243, 237, 0.35) !important;
    margin: 0 !important;
    max-width: none !important;
    line-height: 1.5 !important;
}
.iel-footer a {
    font-size: 12px !important;
    color: rgba(247, 243, 237, 0.45) !important;
    text-decoration: none !important;
}


/* ================================================================
   RESPONSIVE CARD GRIDS  (Step 7 — responsive foundation)
   Single source of truth for card-grid reflow sitewide. auto-fit +
   minmax() means there is NO fixed column count to clip on windowed
   laptops; columns drop 4->3->2->1 by available width automatically.
================================================================ */
/* Card — canonical surface (warm). Pages migrate their bespoke .ie-*-card
   classes onto .ie-card (+ modifier) and delete their own copies. */
.ie-card{background:var(--ie-color-card-bg);border:1px solid var(--ie-color-cream-border);border-radius:var(--ie-radius-lg);padding:clamp(18px,2.5vw,24px);}
.ie-card--dark{background:var(--ie-color-brand-navy);border-color:transparent;}
.ie-card--forest{background:var(--ie-color-forest-deep);border-color:transparent;}
/* Badge / tag — canonical. Pill by default; taxonomy + color modifiers.
   Supersedes .iel-badge-sci/op/pr (Library adopts these on rewrite). */
.ie-badge{display:inline-block;font-family:var(--ie-font-body);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;line-height:1.4;padding:4px 12px;border-radius:var(--ie-radius-pill);}
.ie-badge--science{background:var(--ie-color-brand-navy);color:var(--ie-color-cream-primary);}
.ie-badge--opinion{background:var(--ie-color-forest-mid);color:var(--ie-color-cream-primary);}
.ie-badge--practical{background:var(--ie-color-brand-teal);color:var(--ie-color-cream-primary);}
.ie-badge--gold{background:var(--ie-color-gold);color:var(--ie-color-brand-navy);}
.ie-badge--soft{background:var(--ie-color-cream-secondary);color:var(--ie-color-text-secondary);}

/* Stat block */
.ie-stat{display:flex;flex-direction:column;gap:4px;}
.ie-stat-num{font-family:var(--ie-font-display);font-size:1.8rem;font-weight:700;line-height:1;color:var(--ie-color-brand-teal);}
.ie-stat-label{font-family:var(--ie-font-body);font-size:11px;font-weight:400;line-height:1.4;color:var(--ie-color-text-muted);}

/* Tabs — base shell; JS toggles .is-active / aria-selected */
.ie-tabs{display:flex;flex-wrap:wrap;gap:4px;}
.ie-tab{font-family:var(--ie-font-body);font-size:13px;font-weight:600;letter-spacing:0.04em;padding:14px 24px;border:none;background:var(--ie-color-cream-secondary);color:var(--ie-color-text-tertiary);border-radius:var(--ie-radius-md);cursor:pointer;}
.ie-tab.is-active,.ie-tab[aria-selected="true"]{background:var(--ie-color-brand-teal);color:var(--ie-color-cream-primary);}
.ie-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--ie-card-min),1fr));gap:16px;}
.ie-card-grid--wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--ie-card-min-wide),1fr));gap:24px;}

/* WooCommerce product archive (shop, product category). WooCommerce
   renders its own product grid with a fixed column count; normalize it
   to the same auto-fit reflow so the shop/flavors archives never clip
   the Add-to-Cart button on a windowed laptop. */
ul.products,
.wc-block-grid__products,
.wp-block-woocommerce-product-template{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(var(--ie-card-min),1fr)) !important;
    gap:16px !important;
}
ul.products li.product,
.wc-block-grid__products li.wc-block-grid__product{
    width:auto !important;
    float:none !important;
    margin:0 !important;
}


/* ================================================================
   PAGE SHELL + DARK-SECTION CONTEXT  (Step 7 — universal foundation)
   Full-bleed is owned by the page-canvas template (sections span the
   viewport). Inside a full-bleed band, .ie-shell holds the readable
   content: fills the window up to --ie-shell, fluid side gutters.
   .ie-on-dark makes any text on a dark band default to cream, so an
   uncolored heading/paragraph can never go invisible on a dark bg.
================================================================ */
.ie-shell{width:100%;max-width:var(--ie-shell);margin-inline:auto;padding-inline:clamp(20px,4vw,64px);}

.ie-on-dark,
.ie-on-dark p,
.ie-on-dark li,
.ie-on-dark h1,
.ie-on-dark h2,
.ie-on-dark h3,
.ie-on-dark h4,
.ie-on-dark .ie-h1,
.ie-on-dark .ie-h2,
.ie-on-dark .ie-h3{color:var(--ie-color-cream-primary);}
.ie-on-dark .ie-lbl,
.ie-on-dark .ie-eyebrow{color:var(--ie-color-gold);}
.ie-on-dark a{color:var(--ie-color-brand-teal-light);}


/* ================================================================
   UNIVERSAL COMPONENT LAYER  (Phase 2 — reconciled from per-page CSS)
   ONE canonical definition for the shared .ie-* components, built from
   the conflicting per-page copies. Key decisions:
     - Headings carry NO color: they inherit dark by default and flip to
       cream automatically inside .ie-on-dark (kills the cream/navy/forest
       conflict structurally).
     - .ie-h1 = hero scale. Benchmark's section-header use of .ie-h1 keeps
       its local override until those are reclassified to .ie-h2.
     - .ie-lbl eyebrow = brand teal.
     - .ie-section width = --ie-section-max (default 1160); a page sets that
       one token locally to go narrower.
     - Buttons = 8px radius.
   SAFE TO DEPLOY: a page that still defines its own copy keeps winning
   until that page's file is stripped. This only newly styles pages that
   referenced these classes without a local definition.
================================================================ */

/* Eyebrow / kicker + inline rule */
.ie-lbl{display:inline-flex;align-items:center;gap:10px;font-family:var(--ie-font-body);font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--ie-color-brand-teal);}
.ie-rule{display:inline-block;width:32px;height:2px;background:currentColor;vertical-align:middle;flex-shrink:0;}

/* Headings — .ie-h1 defaults to forest green; cream on dark via .ie-on-dark.
   .ie-h2/.ie-h3 inherit (near-black on light, cream on dark). */
.ie-h1{font-family:var(--ie-font-display);font-size:clamp(34px,5vw,58px);font-weight:700;line-height:1.06;letter-spacing:-0.02em;color:var(--ie-color-forest-deep);margin:0 0 0.4em;}
.ie-h2{font-family:var(--ie-font-display);font-size:clamp(22px,3vw,36px);font-weight:500;line-height:1.2;margin:0 0 0.4em;}
.ie-h3{font-family:var(--ie-font-display);font-size:clamp(17px,2vw,22px);font-weight:600;line-height:1.3;margin:0 0 0.4em;}

/* Body copy */
.ie-body{font-family:var(--ie-font-body);font-size:15px;font-weight:300;line-height:1.8;color:var(--ie-color-text-tertiary);margin:0 0 1em;}
/* Trailing-edge reset so the rhythm never adds a dangling bottom margin */
.ie-h1:last-child,.ie-h2:last-child,.ie-h3:last-child,.ie-body:last-child{margin-bottom:0;}

/* Pull quote */
.ie-pull{font-family:var(--ie-font-display);font-size:clamp(17px,2vw,22px);font-style:italic;color:var(--ie-color-brand-navy);border-left:3px solid var(--ie-color-brand-teal);padding-left:24px;margin:28px 0;}

/* Section shell — width owned here; override --ie-section-max per page for narrower */
.ie-section{width:100%;max-width:var(--ie-section-max);margin-inline:auto;padding:clamp(48px,6vw,72px) clamp(20px,4vw,48px);}

/* Buttons (8px radius) */
.ie-btn-teal{display:inline-block;background:var(--ie-color-brand-teal);color:var(--ie-color-cream-primary);padding:13px 28px;border-radius:8px;font-family:var(--ie-font-body);font-size:13px;font-weight:600;text-decoration:none;}
.ie-btn-teal:hover{background:var(--ie-color-teal-hover);}
.ie-btn-green{display:inline-block;background:var(--ie-color-forest-mid);color:var(--ie-color-cream-primary);padding:12px 26px;border-radius:8px;font-family:var(--ie-font-body);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;}
.ie-btn-outline{display:inline-block;background:transparent;color:var(--ie-color-forest-mid);border:2px solid currentColor;padding:11px 26px;border-radius:8px;font-family:var(--ie-font-body);font-size:13px;font-weight:600;text-decoration:none;}
.ie-on-dark .ie-btn-outline{color:var(--ie-color-cream-primary);}
/* Button components keep their designed text color inside dark bands —
   the generic .ie-on-dark a link recolor must not bleed onto .ie-btn-* CTAs
   (fixes teal-light-on-teal on Samplers footer + Reviews 605 CTA). 2026-06-08 */
.ie-on-dark .ie-btn-teal,
.ie-on-dark .ie-btn-green{color:var(--ie-color-cream-primary);}


/* ================================================================
   UNIVERSAL COMPONENT LAYER — PHASE 2 ADDITIONS (2026-06-07, Step 7)
   Lifted + reconciled from the namespaced page files so each shared
   component has ONE canonical definition.

   PURELY ADDITIVE: no page references these .ie-* names yet (pages are
   still on .if-/.ie-apo-/.sa-/.ie-flavor/.ic- namespaces), so uploading
   this changes NOTHING currently rendered. A page adopts these classes
   when its markup is rewritten, then deletes its namespaced copy.

   Sources: farmily.css (.if-*), apothecary.css (.ie-herb/pack/bundle),
   flavors.css (.ie-flavor / .ie-q-* / .ie-atc-btn), about.css (.ie-info-card/
   .ie-video-feature), library.css (.iel-opinion), standards.css (.sa-card).

   DEFERRED to their owning pass (no clean shared source yet — would be
   inventing): testimonial card (Reviews 605), trust strip, numbered
   recipe-step (how-to guides 1101/1103/1104), form-row/fieldset (Portal
   native rebuild + rescue forms 336/705), and --ic-* / --bm-* / --bmx-*
   token aliases (need the Canine/Benchmark token values first).
================================================================ */

/* --- Card modifiers: hover-lift + colored accents -------------- */
.ie-card--lift{transition:transform .2s ease, box-shadow .2s ease;}
.ie-card--lift:hover{transform:translateY(-3px);box-shadow:var(--ie-shadow-md);}
.ie-card--accent-teal{border-left:3px solid var(--ie-color-brand-teal);}
.ie-card--accent-green{border-left:3px solid var(--ie-color-sage);}
.ie-card--accent-gold{border-left:3px solid var(--ie-color-gold);}
.ie-card--accent-forest{border-left:3px solid var(--ie-color-forest-mid);}
.ie-card--top-teal{border-top:3px solid var(--ie-color-brand-teal);}
.ie-card--top-gold{border-top:3px solid var(--ie-color-gold);}
.ie-card--top-green{border-top:3px solid var(--ie-color-sage);}

/* --- Product card (compact: image + body + price) --------------
   Reconciles .ie-herb-card / .ie-pack-card (Apothecary) and
   .ie-flavor-card (Flavors). Surface = card-bg (was stark #fff). */
.ie-product-card{display:flex;flex-direction:column;background:var(--ie-color-card-bg);border:1px solid var(--ie-color-cream-border);border-radius:var(--ie-radius-sm);overflow:hidden;}
.ie-product-card-img{width:100%;height:200px;object-fit:cover;display:block;background:var(--ie-color-cream-secondary);}
.ie-product-card-body{display:flex;flex-direction:column;flex:1;padding:18px 18px 22px;}
.ie-product-card-name{font-family:var(--ie-font-display);font-weight:500;color:var(--ie-color-forest-deep);line-height:1.3;margin:0 0 4px;}
.ie-product-card-price{font-family:var(--ie-font-body);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ie-color-brand-teal);margin:0 0 12px;}

/* --- Quantity stepper + Add-to-Cart ----------------------------
   Reconciles Apothecary (.ie-herb-minus/plus/qty/atc) and Flavors
   (.ie-q-minus/plus / .ie-q-input / .ie-add-btn). Navy control, teal
   hover. Stepper = [minus][input][plus]; .ie-atc is a separate button. */
.ie-stepper{display:flex;align-items:center;justify-content:center;}
.ie-stepper-btn{background:var(--ie-color-brand-navy);color:#fff;border:none;width:32px;height:34px;font-size:18px;line-height:1;cursor:pointer;flex-shrink:0;transition:background .15s;}
.ie-stepper-btn:first-child{border-radius:var(--ie-radius-sm) 0 0 var(--ie-radius-sm);}
.ie-stepper-btn:last-child{border-radius:0 var(--ie-radius-sm) var(--ie-radius-sm) 0;}
.ie-stepper-btn:hover{background:var(--ie-color-brand-teal);}
.ie-stepper-input{width:46px;height:34px;text-align:center;border:1px solid var(--ie-color-cream-border);border-left:none;border-right:none;font-family:var(--ie-font-body);font-size:14px;font-weight:600;color:var(--ie-color-brand-navy);background:var(--ie-color-card-bg);-moz-appearance:textfield;}
.ie-stepper-input::-webkit-outer-spin-button,.ie-stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ie-atc{display:block;width:100%;background:var(--ie-color-brand-navy);color:#fff;border:none;border-radius:var(--ie-radius-sm);height:34px;font-family:var(--ie-font-body);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:background .15s;}
.ie-atc:hover{background:var(--ie-color-brand-teal);}
.ie-atc:disabled{background:var(--ie-color-text-muted);cursor:not-allowed;}

/* --- Two-column feature (media + text, reversible) -------------
   Reconciles Farmily .if-animal and About .ie-video-feature/.ie-origin-grid.
   --card = the full-bleed image/carousel card (stretches to media height). */
.ie-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,48px);align-items:center;}
.ie-feature--card{gap:0;align-items:stretch;background:var(--ie-color-card-bg);border:1px solid var(--ie-color-cream-border);border-radius:var(--ie-radius-lg);overflow:hidden;box-shadow:var(--ie-shadow-sm);}
.ie-feature--reverse{direction:rtl;}
.ie-feature--reverse>*{direction:ltr;}
.ie-feature-media{width:100%;height:100%;min-height:360px;object-fit:cover;display:block;}
.ie-feature-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,4vw,52px);}

/* --- Carousel (image track + prev/next + dots) -----------------
   Reconciles Farmily .if-carousel*; shared with the homepage carousel.
   ie-carousel.js drives [data-ie-carousel]; the track is translateX'd. */
.ie-carousel{position:relative;overflow:hidden;width:100%;height:100%;min-height:360px;}
.ie-carousel-track{display:flex;width:100%;height:100%;transition:transform .4s ease;}
.ie-carousel-img{min-width:100%;width:100%;height:100%;object-fit:cover;object-position:center;display:block;flex-shrink:0;}
.ie-carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(27,46,27,0.6);color:var(--ie-color-cream-primary);border:none;width:44px;height:44px;border-radius:var(--ie-radius-circle);font-size:32px;line-height:1;padding:0;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.ie-carousel-btn:hover{background:rgba(27,46,27,0.9);}
.ie-carousel-prev{left:12px;}
.ie-carousel-next{right:12px;}
.ie-carousel-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10;}
.ie-dot{width:8px;height:8px;border-radius:var(--ie-radius-circle);background:rgba(247,243,237,0.4);cursor:pointer;transition:background .2s;}
.ie-dot.is-active{background:var(--ie-color-cream-primary);}

/* --- Divider band (full-bleed section divider) -----------------
   Reconciles Farmily .if-band / .if-thesis. Pair dark variants with
   .ie-on-dark for text color. */
.ie-band{padding:clamp(48px,6vw,72px) clamp(24px,4vw,48px);text-align:center;}
.ie-band--navy{background:var(--ie-color-brand-navy);}
.ie-band--forest{background:var(--ie-color-forest-deep);}
.ie-band--linen{background:var(--ie-color-cream-secondary);}

/* --- Responsive --- */
@media (max-width:768px){
  .ie-feature{grid-template-columns:1fr;}
  .ie-feature--reverse{direction:ltr;}
  .ie-feature-media{min-height:280px;}
  .ie-carousel{min-height:300px;}
}

/* --- Program identity mark -------------------------------------
   Shared lockup for the Good Hands family: Good Hands (social),
   Good Hands 2 / Squared (rescue), Good Hands PRO (professional).
   One source of truth for how a program logo displays across all
   program pages (336, 705, 156). Additive; transparent PNGs.
   Added 2026-06-09 (Step 9.5). */
.ie-program-mark{margin:0 0 24px;}
.ie-program-mark img{display:block;height:auto;width:auto;max-width:220px;}
.ie-program-mark.is-centered{text-align:center;}
.ie-program-mark.is-centered img{margin-left:auto;margin-right:auto;}
.ie-program-mark.is-sm img{max-width:140px;}