/* ============================================================================
   EEZYPRINT product page - token theme (light | dark)            2026-11-05
   ----------------------------------------------------------------------------
   Closes gap list project_eezyprint_pdp_archive_gap_list_20261105 items
   5 (no [data-theme="dark"] token theme), 6 (Space Grotesk display layer) and
   16 (look tokens computed, not eyeballed) = apply STEP 5, the CSS part.

   RULE: the light state is preserved. Every :root token below resolves to the
   value the live page already computes (the --bde-* / --eezy-* chains and the
   literal fallbacks configurator.css uses today), so with no data-theme
   attribute on <html> nothing changes except the heading face.
   data-theme="dark" on <html> swaps the token set; nothing else moves.

   Scope: every rule sits under body.single-product (the class the live PDP
   carries) at >= (0,2,1), above Breakdance global-settings (0,1,1) and the
   configurator.css component rules (0,1,0)-(0,3,1). !important appears ONLY
   on the three heading properties, because the fleet injects
   `.breakdance h1..h6 { font-family: Eagle !important; ... }` at (0,1,1).

   Display face: 'Space Grotesk' 400 (cdn/fonts/space-grotesk/space-grotesk.css
   must be enqueued before this file). Weight 400, Title Case from the data,
   text-transform none - feedback_fleet_logo_treatment_is_grotesk supersedes the
   Eagle FACE for the display layer; eezyprint-typography-eagle-book-regular
   still rules the WEIGHT (never 700) and caps (never). Body stays Futura.

   Loads after configurator.css (handle epai-configurator). Additive only.
   ============================================================================ */

/* ---- 1. Tokens: light = the brand's existing look (today's page) ---------- */
:root {
    --ep-font-display: 'Space Grotesk', 'Eagle', 'Futura', 'Century Gothic', Arial, sans-serif;
    --ep-font-display-weight: 400;
    --ep-scheme: light;

    /* page, section, hero panel */
    --ep-page-bg: transparent;
    --ep-section-bg: transparent;
    --ep-hero-bg: transparent;
    --ep-hero-pad: 0;
    --ep-hero-radius: 0;
    --ep-hero-lift: none;
    --ep-ph-ink: rgba(22, 24, 30, .72);          /* logo-layer "Your Brand here" ink */

    /* Breakdance-bound text (template 5057) */
    --ep-ink-heading: var(--bde-headings-color, #111827);
    --ep-ink-body: var(--bde-text-color, var(--bde-body-text-color, #374151));    /* = .bde-text today */
    --ep-ink-byline: var(--bde-text-color, var(--bde-body-text-color, #374151));
    --ep-ink-price: var(--bde-text-color, var(--bde-body-text-color, #374151));

    /* Breakdance CTA (Button 135, filled) */
    --ep-cta-bg: var(--eezy-primary-dark, #0086B4);
    --ep-cta-ink: #FFF;
    --ep-cta-bg-hover: var(--eezy-navy, #1B365D);
    --ep-cta-ink-hover: #FFF;

    /* configurator ink */
    --ep-cfg-ink: var(--eezy-dark, #212121);
    --ep-cfg-ink-strong: var(--eezy-dark, #212121);
    --ep-cfg-muted: var(--eezy-muted, #757575);
    --ep-cfg-hint: var(--eezy-muted, #999);
    --ep-cfg-soft: var(--eezy-gray-700, #616161);
    --ep-cfg-disabled: var(--eezy-disabled, #BDBDBD);
    --ep-cfg-error: var(--eezy-error, #F44336);
    --ep-cfg-error-bg: #fef2f2;
    --ep-cfg-success: var(--eezy-success, #4CAF50);
    --ep-icon-dim: var(--eezy-border, #ccc);
    --ep-field-ink: FieldText;

    /* surfaces */
    --ep-panel-bg: var(--eezy-white, #fff);
    --ep-panel-border: 0;
    --ep-panel-shadow: var(--eezy-shadow-md, 0 4px 16px rgba(0, 0, 0, .06));
    --ep-field-bg: var(--eezy-white, #fff);
    --ep-drop-bg: transparent;
    --ep-surface: var(--eezy-light, #F5F5F5);
    --ep-surface-2: var(--eezy-surface, #f5f5f5);
    --ep-row-hover: var(--eezy-gray-50, #FAFAFA);
    --ep-grid-head-bg: var(--eezy-secondary, #1B365D);
    --ep-grid-head-ink: var(--eezy-white, #fff);

    /* lines */
    --ep-line: var(--eezy-border, #E0E0E0);
    --ep-line-soft: var(--eezy-gray-100, #F5F5F5);
    --ep-field-line: var(--eezy-border, #E0E0E0);
    --ep-rule-strong: var(--eezy-dark, #212121);
    --ep-swatch-ring: var(--eezy-border, #E0E0E0);

    /* accent (identity cyan) and filled controls */
    --ep-accent: var(--eezy-primary, #00A7E1);
    --ep-accent-text: var(--eezy-primary, #00A7E1);
    --ep-accent-soft: var(--eezy-primary-light, #33B8E7);
    --ep-accent-wash: rgba(0, 167, 225, .04);
    --ep-badge-bg: rgba(0, 167, 225, .1);
    --ep-fill: var(--eezy-primary, #00A7E1);
    --ep-on-fill: var(--eezy-white, #fff);
    --ep-fill-hover: var(--eezy-primary-dark, #0086B4);
    --ep-fill-hover-soft: var(--eezy-primary-hover, #008ec4);
    /* configurator.css defect kept as-is in light: a SELECTED location pill hovered
       takes the :hover accent ink on the accent fill (label vanishes). Light keeps
       today's values; dark fixes it. Flip these two to fix light as well. */
    --ep-loc-selected-hover-ink: var(--eezy-primary, #00A7E1);
    --ep-loc-selected-hover-line: var(--eezy-primary-light, #33B8E7);

    /* secondary buttons: Save to Project / Request Quote / Back to Catalog */
    --ep-ghost-ink: var(--eezy-secondary, #1B365D);
    --ep-ghost-line: var(--eezy-secondary, #1B365D);
    --ep-ghost-hover-bg: var(--eezy-secondary, #1B365D);
    --ep-ghost-hover-ink: var(--eezy-white, #fff);
    --ep-quote-ink: var(--eezy-accent, #E8A317);
    --ep-quote-line: var(--eezy-accent, #E8A317);
    --ep-quote-hover-bg: var(--eezy-accent, #E8A317);
    --ep-quote-hover-ink: var(--eezy-white, #fff);
    --ep-back-ink: var(--eezy-muted, #757575);
    --ep-back-line: var(--eezy-border, #E0E0E0);
    --ep-back-hover-bg: var(--eezy-dark, #212121);
    --ep-back-hover-ink: var(--eezy-white, #fff);

    /* price bands (P0-3 ladder block, deploy-source render) */
    --ep-bands-muted: #555;
    --ep-bands-active: var(--eezy-primary-dark, #0086B4);

    --ep-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23757575'/%3E%3C/svg%3E");
}

/* ---- 2. Tokens: dark (Bob 11/04 "i like the new treatment") --------------- */
:root[data-theme="dark"] {
    --ep-scheme: dark;

    --ep-page-bg: #0F1F36;
    /* holds #0F1F36 behind the hero band (price line 6.0:1) before easing to #1B365D */
    --ep-section-bg: linear-gradient(180deg, #0F1F36 0%, #0F1F36 30%, #1B365D 100%);
    --ep-hero-bg: radial-gradient(ellipse 72% 58% at 50% 42%, rgba(0, 167, 225, .16), rgba(0, 167, 225, 0) 70%), #1B365D;
    --ep-hero-pad: 24px;
    --ep-hero-radius: 14px;
    --ep-hero-lift: drop-shadow(0 24px 40px rgba(0, 0, 0, .45));
    /* The mark sits on the GARMENT (hero PNGs are transparent cut-outs), not on the
       panel: dark ink + the layer's own light halo reads on every colourway
       (amber 112: dark ink 4.3:1, light ink 2.2:1). Flip here if a light mark is wanted. */
    --ep-ph-ink: rgba(22, 24, 30, .72);

    --ep-ink-heading: #F2F7FF;
    --ep-ink-body: #AFC2DE;
    --ep-ink-byline: #7FA6D6;
    --ep-ink-price: #00A7E1;

    --ep-cta-bg: #0077B6;          /* #0086B4 + white = 4.14:1, under AA; #0077B6 is the header's fill */
    --ep-cta-ink: #FFF;
    --ep-cta-bg-hover: #006E99;
    --ep-cta-ink-hover: #FFF;

    --ep-cfg-ink: #AFC2DE;
    --ep-cfg-ink-strong: #F2F7FF;
    --ep-cfg-muted: #7FA6D6;
    --ep-cfg-hint: #7FA6D6;
    --ep-cfg-soft: #AFC2DE;
    --ep-cfg-disabled: #7FA6D6;
    --ep-cfg-error: #FFB3AB;
    --ep-cfg-error-bg: rgba(244, 67, 54, .14);
    --ep-cfg-success: #7ED3A0;
    --ep-icon-dim: #7FA6D6;
    --ep-field-ink: #F2F7FF;

    --ep-panel-bg: #1B365D;
    --ep-panel-border: 1px solid #243f66;
    --ep-panel-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --ep-field-bg: #0c1e3a;
    --ep-drop-bg: #0c1e3a;
    --ep-surface: #15294a;
    --ep-surface-2: #15294a;
    --ep-row-hover: #22406b;
    --ep-grid-head-bg: #0c1e3a;
    --ep-grid-head-ink: #F2F7FF;

    --ep-line: #243f66;
    --ep-line-soft: #243f66;
    --ep-field-line: #5b82b8;      /* 3.08:1 on the panel - WCAG 1.4.11 input boundary */
    --ep-rule-strong: #AFC2DE;
    --ep-swatch-ring: #AFC2DE;

    --ep-accent-text: #33B8E7;     /* small accent TEXT; the identity cyan stays on the price line */
    --ep-accent-wash: rgba(0, 167, 225, .12);
    --ep-badge-bg: #0c1e3a;
    --ep-fill: #0077B6;
    --ep-fill-hover: #006E99;
    --ep-fill-hover-soft: #006E99;
    --ep-loc-selected-hover-ink: #FFF;
    --ep-loc-selected-hover-line: #0077B6;

    --ep-ghost-ink: #AFC2DE;
    --ep-ghost-line: #5b82b8;
    --ep-ghost-hover-bg: #243f66;
    --ep-ghost-hover-ink: #F2F7FF;
    --ep-quote-ink: #AFC2DE;
    --ep-quote-line: #5b82b8;
    --ep-quote-hover-bg: #243f66;
    --ep-quote-hover-ink: #F2F7FF;
    --ep-back-ink: #AFC2DE;
    --ep-back-line: #5b82b8;
    --ep-back-hover-bg: #243f66;
    --ep-back-hover-ink: #F2F7FF;

    --ep-bands-muted: #AFC2DE;
    --ep-bands-active: #00A7E1;

    --ep-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23AFC2DE'/%3E%3C/svg%3E");
}

/* ---- 3. Display layer (both themes) --------------------------------------- */
body.single-product .bde-heading-5057-132,
body.single-product .epai-section-title,
body.single-product .epai-product-header__name {
    font-family: var(--ep-font-display) !important;
    font-weight: var(--ep-font-display-weight) !important;
    text-transform: none !important;
}

/* ---- 4. Page, section, hero (template 5057) ------------------------------- */
body.single-product #bde-main { background: var(--ep-page-bg); }
body.single-product .bde-section-5057-100 { background: var(--ep-section-bg); }

body.single-product .bde-div-5057-120 {                 /* #epai-hero-media */
    background: var(--ep-hero-bg);
    padding: var(--ep-hero-pad);
    border-radius: var(--ep-hero-radius);
    --eezy-ph-ink: var(--ep-ph-ink);                    /* consumed by logo-layer.js inline style */
}
body.single-product img.bde-image2-5057-121 { filter: var(--ep-hero-lift); }

body.single-product .bde-text-5057-131 { color: var(--ep-ink-byline); }
body.single-product .bde-heading-5057-132 { color: var(--ep-ink-heading); }
body.single-product .bde-text-5057-133 { color: var(--ep-ink-price); }
body.single-product .bde-text-5057-134 { color: var(--ep-ink-body); }

body.single-product .bde-button-5057-135 .button-atom {
    background: var(--ep-cta-bg);
    color: var(--ep-cta-ink);
}
body.single-product .bde-button-5057-135 .button-atom:hover {
    background: var(--ep-cta-bg-hover);
    color: var(--ep-cta-ink-hover);
}

/* ---- 5. Configurator (#epai-configurator -> .epai-config) ----------------- */
body.single-product .epai-config { color: var(--ep-cfg-ink); }
body.single-product .epai-config__loading { color: var(--ep-cfg-muted); }
body.single-product .epai-config__error { color: var(--ep-cfg-error); background: var(--ep-cfg-error-bg); }
body.single-product .epai-spinner { border-color: var(--ep-line); border-top-color: var(--ep-accent); }

body.single-product .epai-section-panel,
body.single-product .epai-logo-upload {
    background: var(--ep-panel-bg);
    border: var(--ep-panel-border);
    box-shadow: var(--ep-panel-shadow);
}
body.single-product .epai-section-title {
    color: var(--ep-cfg-ink-strong);
    border-bottom-color: var(--ep-line);
}

/* colour x size grid */
body.single-product .epai-grid th,
body.single-product .epai-grid td { border-bottom-color: var(--ep-line-soft); }
body.single-product .epai-grid thead th { background: var(--ep-grid-head-bg); color: var(--ep-grid-head-ink); }
body.single-product .epai-grid tfoot td { background: var(--ep-surface); border-top-color: var(--ep-line); }
body.single-product .epai-grid .epai-color-label:hover { background: var(--ep-row-hover); }
body.single-product .epai-grid .epai-brand-match-row { background: var(--ep-accent-wash); }
body.single-product .epai-grid .epai-color-swatch { border-color: var(--ep-swatch-ring); }
body.single-product .epai-brand-badge { color: var(--ep-accent-text); background: var(--ep-badge-bg); }
body.single-product .epai-size-upcharge { color: var(--ep-cfg-error); }
body.single-product .epai-no-sku { color: var(--ep-cfg-disabled); }
body.single-product .epai-grid .epai-qty-input {
    background: var(--ep-field-bg);
    color: var(--ep-field-ink);
    border-color: var(--ep-field-line);
    color-scheme: var(--ep-scheme);
}
body.single-product .epai-grid .epai-qty-input:focus { border-color: var(--ep-accent); }
body.single-product .epai-grid-summary { color: var(--ep-cfg-muted); }

/* price bands (ladder) */
body.single-product .epai-price-bands,
body.single-product .epai-price-bands__row { border-color: var(--ep-line); }
body.single-product .epai-price-bands__row--active {
    border-color: var(--ep-bands-active);
    box-shadow: inset 0 0 0 1px var(--ep-bands-active);
}
body.single-product .epai-price-bands__qty,
body.single-product .epai-price-bands__note { color: var(--ep-bands-muted); }

/* logo upload */
body.single-product .epai-logo-upload__dropzone {
    background: var(--ep-drop-bg);
    border-color: var(--ep-field-line);
}
body.single-product .epai-logo-upload__dropzone:hover,
body.single-product .epai-logo-upload__dropzone--active {
    background: var(--ep-accent-wash);
    border-color: var(--ep-accent);
}
body.single-product .epai-logo-upload__prompt { color: var(--ep-cfg-muted); }
body.single-product .epai-logo-upload__prompt svg { color: var(--ep-icon-dim); }
body.single-product .epai-logo-upload__hint { color: var(--ep-cfg-hint); }
body.single-product .epai-logo-upload__browse-btn { background: var(--ep-fill); color: var(--ep-on-fill); }
body.single-product .epai-logo-upload__browse-btn:hover { background: var(--ep-fill-hover-soft); }
body.single-product .epai-logo-upload__brand-btn {
    background: var(--ep-surface-2);
    border-color: var(--ep-field-line);
    color: var(--ep-cfg-ink-strong);
}
body.single-product .epai-logo-upload__brand-btn:hover { background: var(--ep-field-bg); border-color: var(--ep-accent); }

/* decoration */
body.single-product .epai-deco__section-label { color: var(--ep-cfg-soft); }
body.single-product .epai-deco__method { background: var(--ep-field-bg); border-color: var(--ep-field-line); }
body.single-product .epai-deco__method:hover { border-color: var(--ep-accent-soft); }
body.single-product .epai-deco__method--selected { border-color: var(--ep-accent); background: var(--ep-accent-wash); }
body.single-product .epai-deco__method--selected::after { background: var(--ep-fill); color: var(--ep-on-fill); }
body.single-product .epai-deco__method--disabled:hover { border-color: var(--ep-field-line); }
body.single-product .epai-deco__method-name { color: var(--ep-cfg-ink-strong); }
body.single-product .epai-deco__method-desc,
body.single-product .epai-deco__method-setup { color: var(--ep-cfg-muted); }
body.single-product .epai-deco__method-min { color: var(--ep-cfg-error); }

body.single-product .epai-deco__loc { background: var(--ep-field-bg); border-color: var(--ep-field-line); }
body.single-product .epai-deco__loc:hover { border-color: var(--ep-accent-soft); color: var(--ep-accent-text); }
body.single-product .epai-deco__loc--selected {
    background: var(--ep-fill);
    border-color: var(--ep-fill);
    color: var(--ep-on-fill);
}
body.single-product .epai-deco__loc--selected:hover {
    color: var(--ep-loc-selected-hover-ink);
    border-color: var(--ep-loc-selected-hover-line);
}

body.single-product .epai-deco__controls { border-top-color: var(--ep-line); }
body.single-product .epai-deco__control { color: var(--ep-cfg-ink-strong); }
body.single-product .epai-deco__control span { color: var(--ep-cfg-muted); }
body.single-product .epai-deco__control select {
    background-color: var(--ep-field-bg);
    background-image: var(--ep-select-arrow);
    color: var(--ep-cfg-ink-strong);
    border-color: var(--ep-field-line);
    color-scheme: var(--ep-scheme);
}
body.single-product .epai-deco__control select:focus { border-color: var(--ep-accent); }
body.single-product .epai-deco__control select option { background: var(--ep-field-bg); color: var(--ep-cfg-ink-strong); }

/* artwork per location */
body.single-product .epai-artwork__loc { background: var(--ep-field-bg); border-color: var(--ep-field-line); }
body.single-product .epai-artwork__loc-label { color: var(--ep-cfg-ink-strong); }
body.single-product .epai-artwork__preview { background: var(--ep-surface); border-color: var(--ep-line); }
body.single-product .epai-artwork__preview:hover { border-color: var(--ep-accent-soft); }
body.single-product .epai-artwork__empty { color: var(--ep-cfg-disabled); }
body.single-product .epai-artwork__upload-btn {
    background: var(--ep-field-bg);
    border-color: var(--ep-field-line);
    color: var(--ep-cfg-ink-strong);
}
body.single-product .epai-artwork__upload-btn:hover { border-color: var(--ep-accent); color: var(--ep-accent-text); }
body.single-product .epai-artwork__brand-btn {
    background: var(--ep-field-bg);
    border-color: var(--ep-accent);
    color: var(--ep-accent-text);
}
body.single-product .epai-artwork__brand-btn:hover,
body.single-product .epai-artwork__brand-btn--active { background: var(--ep-fill); color: var(--ep-on-fill); }

/* pricing summary */
body.single-product .epai-pricing__row { color: var(--ep-cfg-soft); }
body.single-product .epai-pricing__row--total { color: var(--ep-cfg-ink-strong); border-top-color: var(--ep-rule-strong); }
body.single-product .epai-pricing__row--discount { color: var(--ep-cfg-success); }
body.single-product .epai-pricing__row--fee { color: var(--ep-cfg-muted); }

/* action bar */
body.single-product .epai-add-cart__btn { background: var(--ep-fill); color: var(--ep-on-fill); }
body.single-product .epai-add-cart__btn:hover:not(:disabled) { background: var(--ep-fill-hover); }
body.single-product .epai-save-project__btn { color: var(--ep-ghost-ink); border-color: var(--ep-ghost-line); }
body.single-product .epai-save-project__btn:hover { background: var(--ep-ghost-hover-bg); color: var(--ep-ghost-hover-ink); }
body.single-product .epai-request-quote__btn { color: var(--ep-quote-ink); border-color: var(--ep-quote-line); }
body.single-product .epai-request-quote__btn:hover { background: var(--ep-quote-hover-bg); color: var(--ep-quote-hover-ink); }
body.single-product .epai-back-catalog__btn { color: var(--ep-back-ink); border-color: var(--ep-back-line); }
body.single-product .epai-back-catalog__btn:hover {
    background: var(--ep-back-hover-bg);
    color: var(--ep-back-hover-ink);
    border-color: var(--ep-back-hover-bg);
}

/* 375px (measured 11/05): the title scales with the viewport; the template's 48px governs from 640px up */
@media (max-width: 640px) {
    body.single-product .bde-heading-5057-132 { font-size: clamp(30px, 8.5vw, 48px); }
}

/* breadcrumb trail (Text 141 #epai-crumbs, bound to epai_product_breadcrumb) + mock-up note (Text 142) - P1 batch C */
body.single-product #epai-crumbs { font-size: 13px; color: var(--ep-cfg-muted); }
body.single-product #epai-crumbs a { color: var(--ep-ink-byline); text-decoration: none; }
body.single-product #epai-crumbs a:hover { color: var(--ep-accent-text); }
body.single-product #epai-crumbs [aria-current] { color: var(--ep-ink-heading); }
body.single-product #epai-mockup-note { font-size: 12px; color: var(--ep-cfg-muted); }

/* quote card (Build a quote, 2026-11-05) - same tokens as the pricing summary */
body.single-product .epai-quote__brand { font-family: var(--ep-font-display); font-weight: var(--ep-font-display-weight); color: var(--ep-cfg-ink-strong); }
body.single-product .epai-quote__meta,
body.single-product .epai-quote__total span,
body.single-product .epai-action-bar__hint { color: var(--ep-cfg-muted); }
body.single-product .epai-quote__total strong { color: var(--ep-cfg-ink-strong); }
body.single-product .epai-quote__lines th,
body.single-product .epai-quote__lines td { border-bottom-color: var(--ep-line); color: var(--ep-cfg-soft); }
body.single-product .epai-quote__lines tfoot td { color: var(--ep-cfg-ink-strong); }
body.single-product .epai-quote__note { color: var(--ep-cfg-soft); }
body.single-product .epai-quote__cart { background: var(--ep-fill); color: var(--ep-on-fill); }
body.single-product .epai-quote__cart:hover { background: var(--ep-fill-hover); }
body.single-product .epai-quote__print { color: var(--ep-ghost-ink); border-color: var(--ep-ghost-line); }
body.single-product .epai-quote__print:hover { background: var(--ep-ghost-hover-bg); color: var(--ep-ghost-hover-ink); }