/* ============================================================================
   theme.css — Espark theme component kit (es-*)

   The storefront analogue of the admin nx_* system. EVERY class is driven by
   the --color-* palette tokens that layout/main.twig sets from the merchant's
   Theme settings, so changing a colour in Theme settings cascades to every
   button / link / pill automatically — no hardcoded brand colour belongs in a
   section any more.

   Consumption rule (the standard): sections use es-* classes for brand
   surfaces; only genuine neutrals (body text, hairlines) stay raw. See
   docs/platform/theme-styling-standard.md.

   v1 kit: buttons (primary / accent / secondary) + inline link + sale pill.
   Grow as the section sweep (P3) surfaces real needs.

   ── Luxury Theme Standard (P0) ──────────────────────────────────────────────
   The static design tokens below are the single source of truth for the whole
   theme's STYLE STATEMENT — type scale, spacing rhythm, radius, shadow, motion,
   and the colour-scheme contract. Brand COLOUR still comes from main.twig's
   Twig-fed --color-* palette (flipped live by the customizer); these tokens are
   colour-agnostic structure + a scheme layer that resolves THROUGH that palette,
   so one palette/preset switch recolours every scheme → every section.
   Doc: docs/platform/theme-styling-standard.md.
============================================================================ */

:root {
  /* ---- Typography ------------------------------------------------------- */
  /* --font-display (serif headings) + --font-body (sans) are defined in
     main.twig (P2), fed by the `font_pair` switcher + the webfont load — they
     must live there (loaded after this file) so the switcher wins. The scale
     below consumes them. */

  /* Fluid editorial scale — clamp(min, vw, max). Headings use --font-display. */
  --text-display:  clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --text-h1:       clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --text-h2:       clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
  --text-h3:       clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --text-lead:     clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --text-body:     1rem;
  --text-fine:     0.8125rem;
  --text-eyebrow:  0.75rem;

  --weight-display: 400;   /* a high-contrast serif reads luxe at regular */
  --weight-heading: 500;
  --weight-body:    400;
  --weight-strong:  600;

  --leading-display: 1.04;
  --leading-heading: 1.15;
  --leading-body:    1.6;

  --tracking-eyebrow: 0.18em;  /* wide, uppercase label spacing */
  --tracking-tight:  -0.02em;  /* large display headings */
  --tracking-wide:    0.04em;

  /* ---- Spacing rhythm --------------------------------------------------- */
  --space-section-y: clamp(3rem, 1.5rem + 6vw, 6.5rem);  /* section top/bottom */
  --space-block:     clamp(1.5rem, 1rem + 2vw, 2.5rem);  /* between sub-blocks */
  --space-gutter:    clamp(1rem, 0.5rem + 3vw, 2rem);    /* page side padding   */
  --container-max:   1280px;
  --container-narrow: 980px;  /* editorial text columns */

  /* ---- Radius ----------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 9999px;

  /* ---- Ink + hairline (warm near-black, not pure #000 — luxe) ----------- */
  --ink:       #1f1512;
  --ink-muted: color-mix(in srgb, var(--ink) 60%, #ffffff);
  --hairline:  color-mix(in srgb, var(--ink) 20%, transparent);

  /* ---- Shadow (soft, warm, low-contrast) -------------------------------- */
  --shadow-sm:         0 1px 2px rgba(31,21,18,.05), 0 1px 3px rgba(31,21,18,.06);
  --shadow-md:         0 4px 16px rgba(31,21,18,.06), 0 2px 6px rgba(31,21,18,.05);
  --shadow-lg:         0 18px 48px rgba(31,21,18,.10), 0 6px 16px rgba(31,21,18,.06);
  --shadow-card-hover: 0 24px 60px rgba(31,21,18,.13);

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --ease-lux:  cubic-bezier(.22, 1, .36, 1);   /* refined ease-out */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* ---- Colour-scheme contract ------------------------------------------- */
  /* The Shopify-way layer: a section picks a scheme (P1) and consumes only
     these --scheme-* vars, never raw hex. The DEFAULT scheme below resolves
     through the palette tokens, so a palette switch recolours it. P1 adds the
     named .es-scheme-* classes that re-point these for contrast/accent/etc. */
  --scheme-bg:       #ffffff;
  --scheme-surface:  var(--color-soft-bg);
  --scheme-text:     var(--ink);
  --scheme-muted:    var(--ink-muted);
  --scheme-line:     var(--hairline);
  --scheme-btn:      var(--color-primary);
  --scheme-btn-text: var(--color-primary-on, #ffffff);
  --scheme-accent:   var(--color-accent);
}

/* ---- Colour schemes (P1) -------------------------------------------------
   Shopify-way: a section adds ONE es-scheme-* class and styles its internals
   against --scheme-* (set by the chosen scheme below). Each scheme re-points the
   contract through the live palette tokens, so switching the palette/preset
   recolours every scheme automatically. Additive — no section consumes a scheme
   until the P5 homepage sweep, so this changes nothing rendered today.
   `color_scheme` setting values map 1:1 to these suffixes. */
[class*="es-scheme-"] {
  background-color: var(--scheme-bg);
  color: var(--scheme-text);
}

/* Plain — white page, ink text (the default reading surface). */
.es-scheme-plain {
  --scheme-bg: #ffffff;
  --scheme-surface: var(--color-soft-bg);
  --scheme-text: var(--ink);
  --scheme-muted: var(--ink-muted);
  --scheme-line: var(--hairline);
  --scheme-btn: var(--color-primary);
  --scheme-btn-text: var(--color-primary-on, #ffffff);
  --scheme-accent: var(--color-accent);
}

/* Soft — warm surface band (brand-story, value props, testimonials). */
.es-scheme-soft {
  --scheme-bg: var(--color-soft-bg);
  --scheme-surface: #ffffff;
  --scheme-text: var(--ink);
  --scheme-muted: var(--ink-muted);
  --scheme-line: var(--hairline);
  --scheme-btn: var(--color-primary);
  --scheme-btn-text: var(--color-primary-on, #ffffff);
  --scheme-accent: var(--color-accent);
}

/* Contrast — deep ink section, light text (promo, footer, dramatic bands). */
.es-scheme-contrast {
  --scheme-bg: var(--ink);
  --scheme-surface: color-mix(in srgb, var(--ink) 88%, #ffffff);
  --scheme-text: #ffffff;
  --scheme-muted: color-mix(in srgb, #ffffff 70%, var(--ink));
  --scheme-line: color-mix(in srgb, #ffffff 16%, transparent);
  --scheme-btn: #ffffff;
  --scheme-btn-text: var(--ink);
  --scheme-accent: var(--color-accent);
}

/* Accent — brand accent field, light text (sale / highlight bands). */
.es-scheme-accent {
  --scheme-bg: var(--color-accent);
  --scheme-surface: color-mix(in srgb, var(--color-accent) 86%, #ffffff);
  --scheme-text: #ffffff;
  --scheme-muted: color-mix(in srgb, #ffffff 72%, var(--color-accent));
  --scheme-line: color-mix(in srgb, #ffffff 22%, transparent);
  --scheme-btn: #ffffff;
  --scheme-btn-text: var(--color-accent-deep, var(--color-accent));
  --scheme-accent: #ffffff;
}

/* ---- Buttons ------------------------------------------------------------- */
.es-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, transform .08s ease;
}
.es-btn:active { transform: translateY(1px); }
.es-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.es-btn[disabled], .es-btn.is-disabled { opacity: .5; pointer-events: none; }

/* Primary CTA — brand primary (e.g. Add to cart). */
.es-btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-on, #ffffff);
}
.es-btn-primary:hover { background-color: var(--color-primary-hover, var(--color-accent)); }

/* Accent — sale / highlight. */
.es-btn-accent {
  background-color: var(--color-accent);
  color: #ffffff;
}
.es-btn-accent:hover { background-color: var(--color-accent-deep, var(--color-accent)); }

/* Secondary — outline. */
.es-btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.es-btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-primary-on, #ffffff);
}

/* Small size — compact buttons (sticky bar, inline pincode check). */
.es-btn-sm { padding: 0.45rem 0.85rem; font-size: 0.85rem; border-radius: 0.4rem; }

/* ---- Form controls ------------------------------------------------------- */
/* Checkbox / radio brand tint — `accent-color` paints the checked fill in the
   merchant's primary, replacing Tailwind's hardcoded indigo. Modern, no SVG. */
.es-check { accent-color: var(--color-primary); }

/* ---- Inline link --------------------------------------------------------- */
.es-link { color: var(--color-link); text-decoration: none; }
.es-link:hover { text-decoration: underline; }

/* ---- Sale / badge pill --------------------------------------------------- */
.es-sale-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
}

/* ==========================================================================
   Luxury component kit (P3)

   The editorial vocabulary every homepage section uses (P5). All token- and
   scheme-driven: components consume --scheme-* (which fall back to the :root
   default scheme outside a section, and adapt inside an es-scheme-* band) +
   the P0 type/space/radius/shadow/motion tokens. No raw brand hex, no font
   names, no hardcoded sizes. Additive — nothing renders these until P5.
========================================================================== */

/* ---- Layout -------------------------------------------------------------- */
/* Standard content container — the ONE source of truth for page content width
   + side gutter. Matches the footer exactly (= Tailwind max-w-7xl px-4 sm:px-6
   lg:px-8 xl:px-0) so every section's content lines up on mobile AND desktop.
   Every section's inner wrapper should use .es-container. */
.es-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px)  { .es-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .es-container { padding-inline: 2rem; } }
@media (min-width: 1280px) { .es-container { padding-inline: 0; } }
.es-container--narrow { max-width: var(--container-narrow); }
.es-section { padding-block: var(--space-section-y); }

/* ---- Typography helpers -------------------------------------------------- */
.es-display { font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--weight-display); line-height: var(--leading-display); letter-spacing: var(--tracking-tight); }
.es-h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); }
.es-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-heading); line-height: var(--leading-heading); }
.es-h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-heading); line-height: var(--leading-heading); }
.es-lead { font-size: var(--text-lead); line-height: var(--leading-body); color: var(--scheme-muted); }
.es-fine { font-size: var(--text-fine); }
.es-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--scheme-accent);
}

/* ---- Section header (eyebrow + serif heading + subhead) ------------------ */
.es-section-head { display: flex; flex-direction: column; gap: 0.6rem; max-width: 60ch; }
.es-section-head--center { align-items: center; text-align: center; margin-inline: auto; }
.es-section-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--scheme-text);
}
.es-section-head__sub { margin: 0; font-size: var(--text-lead); line-height: var(--leading-body); color: var(--scheme-muted); }

/* ---- Buttons — luxury CTA + extra variants (base .es-btn defined above) -- */
.es-btn-cta {
  background-color: var(--color-primary);
  color: var(--color-primary-on, #ffffff);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.8rem;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-sm);
}
.es-btn-cta:hover { background-color: var(--color-primary-hover, var(--color-accent)); }
.es-btn-lg { padding: 1rem 2rem; font-size: 0.95rem; }
.es-btn-ghost { background: transparent; color: var(--scheme-text); border-color: var(--scheme-line); }
.es-btn-ghost:hover { border-color: var(--scheme-text); }
.es-btn-icon { padding: 0.6rem; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-pill); }

/* ---- Card base ----------------------------------------------------------- */
.es-card {
  background: var(--scheme-surface);
  border: 1px solid var(--scheme-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ---- Product card -------------------------------------------------------- */
.es-product-card { display: flex; flex-direction: column; background: transparent; }
.es-product-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 3 / 4;
  background: var(--color-soft-bg);
}
.es-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-lux); }
.es-product-card:hover .es-product-card__media img { transform: scale(1.05); }
.es-product-card__body { padding: 0.9rem 0.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.es-product-card__title { font-size: 0.95rem; font-weight: var(--weight-strong); line-height: 1.3; color: var(--scheme-text); }
.es-product-card__price { font-size: 0.9rem; color: var(--scheme-muted); }
.es-product-card__price--sale { color: var(--color-accent); font-weight: var(--weight-strong); }

/* ---- Collection card ----------------------------------------------------- */
.es-collection-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; }
.es-collection-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-lux); }
.es-collection-card:hover img { transform: scale(1.06); }
.es-collection-card__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; padding: 1.25rem;
  background: linear-gradient(to top, rgba(31,21,18,.55), rgba(31,21,18,0) 60%);
}
.es-collection-card__label { font-family: var(--font-display); font-size: var(--text-h3); color: #ffffff; }

/* ---- Testimonial card ---------------------------------------------------- */
.es-testimonial {
  background: var(--scheme-surface);
  border: 1px solid var(--scheme-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.es-testimonial__quote { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.4; color: var(--scheme-text); }
.es-testimonial__stars { color: var(--color-accent); letter-spacing: 0.1em; }
.es-testimonial__author { font-weight: var(--weight-strong); color: var(--scheme-text); }
.es-testimonial__meta { font-size: var(--text-fine); color: var(--scheme-muted); }

/* ---- Badge --------------------------------------------------------------- */
.es-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: var(--text-eyebrow); font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--scheme-surface); color: var(--scheme-muted);
  border: 1px solid var(--scheme-line);
}
.es-badge--accent { background: var(--color-accent); color: #ffffff; border-color: transparent; }

/* ---- Inputs / newsletter ------------------------------------------------- */
.es-input {
  width: 100%; font-family: var(--font-body); font-size: 0.95rem;
  color: var(--scheme-text); background: var(--scheme-bg);
  border: 1px solid var(--scheme-line); border-radius: var(--radius-sm);
  padding: 0.8rem 1rem; transition: border-color var(--dur-fast) var(--ease-soft);
}
.es-input:focus { outline: none; border-color: var(--color-primary); }
.es-input::placeholder { color: var(--scheme-muted); }
.es-newsletter { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.es-newsletter .es-input { flex: 1; min-width: 12rem; }

/* ---- Divider ------------------------------------------------------------- */
.es-rule { border: 0; border-top: 1px solid var(--scheme-line); margin-block: var(--space-block); }

/* ---- Heading ornament (line · blossom · line) ----------------------------
   The dainty motif under section headings. Token-driven (accent colour);
   centred by default. Drop `<div class="es-ornament">…</div>` under a heading. */
.es-ornament { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0.7rem auto 0; }
.es-ornament--left { justify-content: flex-start; margin-inline: 0; }
.es-ornament__line { display: block; width: 38px; height: 1px; background: var(--scheme-accent, var(--color-accent)); opacity: 0.45; }
.es-ornament__mark {
  display: block; width: 16px; height: 16px; flex: 0 0 auto;
  background: var(--scheme-accent, var(--color-accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4'/%3E%3Ccircle cx='12' cy='17.5' r='4'/%3E%3Ccircle cx='6.5' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4'/%3E%3Ccircle cx='12' cy='17.5' r='4'/%3E%3Ccircle cx='6.5' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Motion / scroll reveal (P4) ----------------------------------------
   Hidden-state applies ONLY under .es-motion (set by theme.js when motion is
   wanted + supported), so no-JS / reduced-motion visitors always see content. */
.es-motion [data-es-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-lux),
              transform var(--dur-slow) var(--ease-lux);
  will-change: opacity, transform;
}
.es-motion [data-es-reveal].is-revealed { opacity: 1; transform: none; }
[data-es-parallax] { will-change: transform; }

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .es-product-card__media img,
  .es-collection-card img { transition: none; }
  .es-motion [data-es-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Rich-text / product description (admin RTE output) -------------------
   The description prints raw <h3>/<h4>/<ul>/<p>; the Tailwind `prose` classes
   on its wrapper are NOT in the static bundle, so the content elements are
   styled directly here. Also covers the product "additional details"
   disclosures, which use .prose too. Added 2026-06-17. */
.prose h3 { font-size: var(--text-h3); font-family: var(--font-display); font-weight: var(--weight-strong); line-height: var(--leading-heading); margin: 1.5em 0 .4em; }
.prose h4 { font-size: var(--text-lead); font-family: var(--font-display); font-weight: var(--weight-strong); line-height: var(--leading-heading); margin: 1.3em 0 .4em; }
.prose h3:first-child, .prose h4:first-child { margin-top: 0; }
.prose p  { margin: .7em 0; }
.prose ul { list-style: disc; margin: .7em 0; padding-left: 1.4rem; }
.prose ol { list-style: decimal; margin: .7em 0; padding-left: 1.4rem; }
.prose li { margin: .3em 0; }
.prose strong { font-weight: var(--weight-strong); }

/* ----- Empty-state pages (migrated from platform custom.css -> theme-owned) ----- */
.es-empty-state {
    --es-blue:    #003049;
    --es-lava:    #780000;
    --es-brick:   #c1121f;
    --es-papaya:  #fdf0d5;
    --es-steel:   #669bbc;
    --es-warm:    #efe8d6;
    --es-soft:    #fbfaf6;

    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.25rem 6rem;
    background: linear-gradient(180deg, var(--es-soft) 0%, var(--es-papaya) 240%);
}
@media (max-width: 540px) {
    .es-empty-state { padding: 2.5rem 1rem 4rem; min-height: 60vh; }
}

.es-empty-state__card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border: 1px solid var(--es-warm);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04),
                0 24px 48px -28px rgba(0, 48, 73, .18);
    padding: 2.5rem 2rem;
    text-align: center;
}
@media (max-width: 540px) {
    .es-empty-state__card { padding: 2rem 1.5rem; border-radius: 14px; }
}

.es-empty-state__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--es-papaya);
    color: var(--es-lava);
    border-radius: 18px;
    font-size: 1.6rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
                0 1px 2px rgba(120, 0, 0, .12);
    position: relative;
}
/* Decorative "X" badge for missing/cancelled states (404, no-event).
   Opt in via .es-empty-state__icon--xmark. */
.es-empty-state__icon--xmark::after {
    content: "\f00d"; /* fa-xmark */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    position: absolute;
    right: -6px; bottom: -4px;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--es-brick);
    color: #fff;
    border-radius: 50%;
    font-size: .65rem;
    box-shadow: 0 0 0 3px #ffffff;
}

.es-empty-state__eyebrow {
    margin: 0 0 .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--es-steel);
}
.es-empty-state__title {
    margin: 0 0 .5rem;
    font-size: clamp(1.4rem, 2.8vw, 1.7rem);
    font-weight: 700;
    color: var(--es-blue);
    letter-spacing: -.015em;
    line-height: 1.2;
}
.es-empty-state__lede {
    margin: 0 0 1.5rem;
    font-size: .9rem;
    line-height: 1.55;
    color: #475569;
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
}

/* Actions row */
.es-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
    margin-bottom: .25rem;
}
.es-empty-state__btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease, transform .12s ease;
    font-family: inherit;
}
.es-empty-state__btn:active { transform: translateY(1px); }
.es-empty-state__btn--primary {
    background: var(--es-blue);
    color: var(--es-papaya);
}
.es-empty-state__btn--primary:hover { background: #002338; color: #fff; }
.es-empty-state__btn--ghost {
    background: #ffffff;
    color: var(--es-blue);
    border-color: var(--es-warm);
}
.es-empty-state__btn--ghost:hover {
    background: var(--es-soft);
    border-color: var(--es-steel);
    color: var(--es-blue);
}
.es-empty-state__btn--brick {
    background: var(--es-brick);
    color: #fff;
}
.es-empty-state__btn--brick:hover { background: var(--es-lava); color: #fff; }

/* Optional search row (404 surfaces this) */
.es-empty-state__search {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--es-warm);
}
.es-empty-state__search-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--es-steel);
    margin-bottom: .5rem;
}
.es-empty-state__search-row {
    position: relative;
    display: flex;
    align-items: center;
}
/* Position any direct-child Font Awesome icon (envelope, magnifying-glass,
   etc.) as a leading glyph inside the input. Avoids forcing a specific
   class on the icon — useful since the no-shop variant uses fa-envelope
   while the 404 search uses fa-magnifying-glass. */
.es-empty-state__search-row > i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--es-steel);
    font-size: .8rem;
    pointer-events: none;
    z-index: 1;
}
.es-empty-state__search-input {
    flex: 1;
    padding: .65rem .85rem .65rem 2.1rem;
    font-size: .9rem;
    color: #0f172a;
    background: #fff;
    border: 1px solid var(--es-warm);
    border-radius: 10px 0 0 10px;
    border-right: none;
    outline: none;
    transition: border-color .15s ease;
    box-shadow: none !important;
    font-family: inherit;
}
.es-empty-state__search-input:focus {
    border-color: var(--es-steel);
    outline: 2px solid rgba(102, 155, 188, .35);
    outline-offset: -1px;
}
.es-empty-state__search-submit {
    padding: .65rem 1rem;
    background: var(--es-blue);
    color: var(--es-papaya);
    font-size: .85rem;
    font-weight: 600;
    border: 1px solid var(--es-blue);
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    transition: background-color .15s ease;
    font-family: inherit;
}
.es-empty-state__search-submit:hover { background: #002338; }

/* Inline newsletter form (no-shop uses this) */
.es-empty-state__newsletter {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--es-warm);
    text-align: left;
}
.es-empty-state__newsletter-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--es-steel);
    text-align: center;
    margin: 0 0 .5rem;
    display: block;
}

/* Soft footer link below the card */
.es-empty-state__footer {
    max-width: 480px;
    margin: 1rem auto 0;
    text-align: center;
    font-size: .82rem;
    color: #64748b;
}
.es-empty-state__footer a {
    color: var(--es-blue);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(102, 155, 188, .55);
    text-underline-offset: 2px;
}
.es-empty-state__footer a:hover {
    color: var(--es-lava);
    text-decoration-color: var(--es-lava);
}

/* ----- Account layout (migrated from platform custom.css -> theme-owned) ----- */
.es-account-page {
    background: #ffffff;
    padding: 1.25rem 0 3rem;
}
/* Wave 2 (post-F-1) — sidebar removed across all customer-account
   pages. Was a 2-column grid (16rem nav + 1fr main); now a centered
   single-column that mirrors the dashboard's max-w-5xl layout. The
   per-page sub-nav lives in the dashboard's quick-link tiles, not in
   a persistent left rail. .es-account-page__nav rules removed; if any
   future page wants the rail back, redeclare locally. */
.es-account-page__shell {
    max-width: 64rem;            /* matches dashboard's max-w-5xl */
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) {
    .es-account-page__shell { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
    .es-account-page         { padding: 2rem 0 4rem; }
    .es-account-page__shell  { padding: 0 2rem; }
}
.es-account-page__main {
    min-width: 0;                /* defensive */
}

/* Wave 2 — back-to-dashboard link, shared across non-dashboard
   account pages. Sits above the page H1, mirrors the back link on
   the view-order page. */
.es-account-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #6b7280;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color .15s;
}
.es-account-back:hover { color: var(--color-accent, #c1121f); }
.es-account-back i { font-size: 0.75rem; }

/* ----- Doc/CMS pages (migrated from platform custom.css -> theme-owned) ----- */
.es-doc-page {
    --doc-text:    #1f2937;
    --doc-blue:    #003049;
    --doc-lava:    #780000;
    --doc-papaya:  #fdf0d5;
    --doc-steel:   #669bbc;
    --doc-warm:    #efe8d6;
    --doc-soft:    #fbfaf6;

    background: linear-gradient(180deg, var(--doc-soft) 0%, #ffffff 60%);
    padding: 3rem 1.25rem 5rem;
}
@media (min-width: 1024px) {
    .es-doc-page { padding: 4rem 1.25rem 6rem; }
}

/* ---- Header ---- */
.es-doc-page__header {
    max-width: 760px;
    margin: 0 auto 1.75rem;
    text-align: center;
}
.es-doc-page__eyebrow {
    margin: 0 0 .4rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--doc-steel);
}
.es-doc-page__title {
    margin: 0;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 700;
    color: var(--doc-blue);
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.es-doc-page__lede {
    margin: .65rem auto 0;
    max-width: 56ch;
    font-size: .92rem;
    line-height: 1.6;
    color: #475569;
}

/* ---- Card ---- */
.es-doc-page__card {
    max-width: 760px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--doc-warm);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04),
                0 24px 48px -32px rgba(0, 48, 73, .15);
    padding: 2rem 1.5rem;
    overflow-wrap: break-word;
}
@media (min-width: 768px) {
    .es-doc-page__card { padding: 2.75rem 3rem; }
}

/* ---- Body typography ---- */
/* These rules apply to whatever HTML lives inside the card —
   raw <h2>, <h3>, <p>, <ul>, <ol>, <a>, <strong>, <em>, <code>,
   <blockquote>. Works without any class attributes (HTMLPurifier
   strips them by default), so admin edits via the Quill editor
   keep this design. */

.es-doc-page__body { color: var(--doc-text); font-size: .95rem; line-height: 1.65; }

/* Headings */
.es-doc-page__body h1,
.es-doc-page__body h2 {
    color: var(--doc-blue);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 2rem 0 .75rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--doc-warm);
}
.es-doc-page__body > h1:first-child,
.es-doc-page__body > h2:first-child { margin-top: 0; }

.es-doc-page__body h3 {
    color: var(--doc-blue);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.005em;
    margin: 1.75rem 0 .55rem;
    line-height: 1.3;
    position: relative;
    padding-left: .85rem;
}
.es-doc-page__body h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3em;
    bottom: .3em;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--doc-lava), #c1121f);
}

.es-doc-page__body h4 {
    color: var(--doc-blue);
    font-size: .95rem;
    font-weight: 700;
    margin: 1.25rem 0 .35rem;
    line-height: 1.3;
}

/* Paragraphs */
.es-doc-page__body p {
    margin: 0 0 1rem;
    color: var(--doc-text);
}
.es-doc-page__body p + p { margin-top: -.25rem; }
.es-doc-page__body p:last-child { margin-bottom: 0; }

/* Lists */
.es-doc-page__body ul,
.es-doc-page__body ol {
    margin: .35rem 0 1.1rem;
    padding-left: 1.4rem;
}
.es-doc-page__body li {
    margin: .35rem 0;
    color: var(--doc-text);
    line-height: 1.6;
}
.es-doc-page__body li::marker {
    color: var(--doc-steel);
    font-weight: 600;
}
.es-doc-page__body ol {
    counter-reset: doc-ol;
    list-style: none;
    padding-left: 1.6rem;
}
.es-doc-page__body ol > li {
    counter-increment: doc-ol;
    position: relative;
    padding-left: .25rem;
}
.es-doc-page__body ol > li::before {
    content: counter(doc-ol) ".";
    position: absolute;
    left: -1.6rem;
    top: 0;
    width: 1.4rem;
    text-align: right;
    color: var(--doc-lava);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Inline */
.es-doc-page__body a {
    color: var(--doc-blue);
    text-decoration: underline;
    text-decoration-color: rgba(102, 155, 188, .55);
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.es-doc-page__body a:hover {
    color: var(--doc-lava);
    text-decoration-color: var(--doc-lava);
}

.es-doc-page__body strong {
    color: var(--doc-blue);
    font-weight: 700;
}

.es-doc-page__body em {
    color: #475569;
    font-style: italic;
}

.es-doc-page__body code {
    background: var(--doc-soft);
    color: var(--doc-lava);
    border: 1px solid var(--doc-warm);
    border-radius: 5px;
    padding: .12rem .4rem;
    font-size: .85em;
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

/* Effective-date row — every legal page ends with `<em>Last updated: …</em>`
   inside a <p>. Boost it visually so it reads as a subtle footer-stamp. */
.es-doc-page__body p:last-child em:only-child,
.es-doc-page__body p:has(> em:only-child):last-child {
    display: block;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--doc-warm);
    color: var(--doc-steel);
    font-size: .8rem;
    text-align: right;
    letter-spacing: .02em;
}

/* Blockquote (rare in policies but allowed by purifier) */
.es-doc-page__body blockquote {
    margin: 1.25rem 0;
    padding: .85rem 1.1rem;
    background: var(--doc-papaya);
    border-left: 4px solid var(--doc-lava);
    border-radius: 0 8px 8px 0;
    color: var(--doc-blue);
    font-style: italic;
}

/* Tables (if any) */
.es-doc-page__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.25rem;
    font-size: .9rem;
}
.es-doc-page__body th,
.es-doc-page__body td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--doc-warm);
    text-align: left;
}
.es-doc-page__body th {
    background: var(--doc-soft);
    color: var(--doc-blue);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* HR */
.es-doc-page__body hr {
    margin: 1.75rem 0;
    border: 0;
    border-top: 1px solid var(--doc-warm);
}

/* ---- Footer ---- */
.es-doc-page__footer {
    max-width: 760px;
    margin: 1.75rem auto 0;
    text-align: center;
    color: #64748b;
    font-size: .85rem;
}
.es-doc-page__footer a {
    color: var(--doc-blue);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(102, 155, 188, .5);
    text-underline-offset: 2px;
}
.es-doc-page__footer a:hover {
    color: var(--doc-lava);
    text-decoration-color: var(--doc-lava);
}

/* ----- Auth pages: shell + form controls (migrated from custom.css -> theme-owned) ----- */
.es-auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem 5rem;
    background: linear-gradient(180deg, #fbfaf6 0%, #fdf0d5 240%);
}

.es-auth-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid #efe8d6;
    border-radius: 14px;
    padding: 2rem 2rem 1.75rem;
    box-shadow: 0 12px 40px -20px rgba(0, 48, 73, 0.18);
    position: relative;
}
@media (max-width: 480px) {
    .es-auth-card { padding: 1.5rem 1.25rem 1.25rem; border-radius: 12px; }
}

/* Brand mark (lava→brick gradient chip) */
.es-auth-card__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: linear-gradient(135deg, #c1121f 0%, #780000 100%);
    color: #fdf0d5;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1.1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
}

.es-auth-card__eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #669bbc;
    margin: 0 0 .25rem;
}
.es-auth-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #003049;
    margin: 0 0 .35rem;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.es-auth-card__lede {
    font-size: .85rem;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

/* Form layout */
.es-auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.es-auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}
@media (max-width: 480px) {
    .es-auth-row { grid-template-columns: 1fr; }
}
.es-auth-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.es-auth-label {
    font-size: .8rem;
    font-weight: 600;
    color: #003049;
    margin: 0;
}
.es-auth-input-wrap {
    position: relative;
}
.es-auth-input {
    width: 100%;
    padding: .65rem .85rem;
    font-size: .9rem;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    transition: border-color .15s ease, outline-color .15s ease;
    font-family: inherit;
    box-sizing: border-box;
    /* Hard rule: no shadow on inputs (per design directive). Focus
       indicator below uses `outline`, which doesn't paint as a shadow. */
    box-shadow: none !important;
}
.es-auth-input:focus {
    border-color: #669bbc;
    outline: 2px solid rgba(102, 155, 188, .55);
    outline-offset: 1px;
}
.es-auth-input--has-button {
    padding-right: 2.75rem;
}

/* Hard guarantee: no input element inside the auth card carries a
   box-shadow (Tailwind's shadow-sm pattern, browser defaults, etc.). */
.es-auth-card input,
.es-auth-card select,
.es-auth-card textarea {
    box-shadow: none !important;
}

.es-auth-eye {
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    background: transparent;
    border: 0;
    padding: .25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color .15s ease, background-color .15s ease;
}
.es-auth-eye:hover {
    color: #003049;
    background: #fbfaf6;
}
.es-auth-eye:focus {
    outline: 2px solid rgba(102,155,188,.35);
    outline-offset: 1px;
}

/* Helper line: forgot link, T&Cs etc. */
.es-auth-helper {
    font-size: .78rem;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    line-height: 1.4;
    margin-top: -.25rem;
}
.es-auth-helper a {
    color: #003049;
    font-weight: 600;
    text-decoration: none;
}
.es-auth-helper a:hover {
    color: #780000;
    text-decoration: underline;
}

/* Submit — consumes the theme palette (set on :root by the theme layout) so the
   button matches the merchant's brand. Falls back to the legacy navy when no
   theme token is present (e.g. a non-theme context). */
.es-auth-submit {
    width: 100%;
    padding: .75rem 1rem;
    background: var(--color-primary, #003049);
    color: var(--color-primary-on, #fdf0d5);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, transform .12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .25rem;
    font-family: inherit;
}
.es-auth-submit:hover {
    background: var(--color-primary-hover, var(--color-accent, #002338));
    color: var(--color-primary-on, #ffffff);
}
.es-auth-submit:active { transform: translateY(1px); }
.es-auth-submit[disabled],
.es-auth-submit.disabled,
.es-auth-submit.is-loading {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Footer link strip below the form */
.es-auth-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #efe8d6;
    text-align: center;
    font-size: .82rem;
    color: #64748b;
}
.es-auth-footer a {
    color: #003049;
    font-weight: 600;
    text-decoration: none;
    margin-left: .25rem;
}
.es-auth-footer a:hover {
    color: #780000;
    text-decoration: underline;
}
.es-auth-footer--split {
    display: flex;
    justify-content: center;
    gap: .75rem;
    align-items: center;
}
.es-auth-footer--split span { color: #cbd5e1; }

/* Inline banners */
.es-auth-banner {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    border-left: 3px solid;
    font-size: .82rem;
    line-height: 1.4;
    margin-bottom: 1.1rem;
}
.es-auth-banner--ok {
    background: rgba(34,197,94,.08);
    border-left-color: #16a34a;
    color: #14532d;
}
.es-auth-banner--err {
    background: rgba(193,18,31,.08);
    border-left-color: #c1121f;
    color: #7f1d1d;
}
.es-auth-banner i { flex: none; margin-top: .15rem; }

/* ----- Password strength meter (migrated -> theme-owned) ----- */
.es-pwd-meter {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .4rem;
}
.es-pwd-meter__bars {
    display: flex;
    gap: 4px;
}
.es-pwd-meter__bar {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: #efe8d6;
    transition: background-color .15s ease;
}
.es-pwd-meter__bar.is-on        { background: #f59e0b; }     /* 1 — weak */
.es-pwd-meter__bar.is-on--ok    { background: #003049; }     /* 2 — ok */
.es-pwd-meter__bar.is-on--strong{ background: #16a34a; }     /* 3 — strong */

.es-pwd-meter__rules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .72rem;
    color: #64748b;
}
.es-pwd-meter__rules li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color .15s ease;
}
.es-pwd-meter__rules li::before {
    content: "○";
    color: #cbd5e1;
    font-size: .85rem;
    line-height: 1;
}
.es-pwd-meter__rules li.is-met {
    color: #14532d;
}
.es-pwd-meter__rules li.is-met::before {
    content: "✓";
    color: #16a34a;
    font-weight: 700;