/** Shopify CDN: Minification failed

Line 10:57 Unexpected bad string token
Line 10:85 Unterminated string token

**/
/* Earned Stripes components (es- classes), ported for the Shopify theme from
   design-system/project/components/bundle.css. Differences from the handoff, all deliberate:
   no Google Fonts import (fonts are self-hosted), no global html/body/*/img rules, type classes renamed with
   an es- prefix, and the claw mask served from the theme's assets. Board: AB#946. */



/* ------------------------------------------------------------------ base */
/* html, body, * and img rules from the handoff are omitted: the theme's base.css and es-theme-bridge.css own them.
   Themed wrappers still paint their own ground so a light section reads as one. */
[data-theme]:not(html) { background: var(--bg); color: var(--text); }

/* Type styles, es- prefixed: the theme already uses .h1, .price, .caption and .label, so the design system's
   type classes ship here under es- names. Values from es-tokens (design-system/source/build_tokens.py). */
.es-display, .es-h1, .es-h2, .es-h3, .es-h4, .es-h5, .es-h6,
.es-display-mobile, .es-h1-mobile, .es-h2-mobile, .es-h3-mobile, .es-h4-mobile, .es-h5-mobile, .es-h6-mobile,
.es-label, .es-lockup, .es-button-text, .es-stat { text-transform: uppercase; margin: 0; text-wrap: balance; }
.es-price, .es-price-text, .es-stat { font-variant-numeric: tabular-nums; }
/* Type styles. Desktop sizes from 1024px; mobile below 768px; tablet uses mobile display + desktop body. */
.es-display { font-family: var(--font-display); font-size: 120px; line-height: 0.9; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.es-h1 { font-family: var(--font-display); font-size: 80px; line-height: 0.95; font-weight: 800; letter-spacing: -0.005em; text-transform: uppercase; }
.es-h2 { font-family: var(--font-display); font-size: 56px; line-height: 1.0; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.es-h3 { font-family: var(--font-display); font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: 0.005em; text-transform: uppercase; }
.es-h4 { font-family: var(--font-display); font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; }
.es-h5 { font-family: var(--font-display); font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.es-h6 { font-family: var(--font-display); font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.es-display-mobile { font-family: var(--font-display); font-size: 64px; line-height: 0.92; font-weight: 800; letter-spacing: -0.005em; text-transform: uppercase; }
.es-h1-mobile { font-family: var(--font-display); font-size: 48px; line-height: 0.95; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.es-h2-mobile { font-family: var(--font-display); font-size: 40px; line-height: 1.0; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.es-h3-mobile { font-family: var(--font-display); font-size: 32px; line-height: 1.05; font-weight: 700; letter-spacing: 0.005em; text-transform: uppercase; }
.es-h4-mobile { font-family: var(--font-display); font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; }
.es-h5-mobile { font-family: var(--font-display); font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.es-h6-mobile { font-family: var(--font-display); font-size: 18px; line-height: 1.2; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.es-body-l { font-family: var(--font-body); font-size: 18px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.es-body-m { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; }
.es-body-s { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; }
.es-caption { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; }
.es-label { font-family: var(--font-label); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.2em; font-style: italic; text-transform: uppercase; }
.es-lockup { font-family: var(--font-label); font-size: 14px; line-height: 16px; font-weight: 500; letter-spacing: 0.3em; font-style: italic; text-transform: uppercase; }
.es-button-text { font-family: var(--font-display); font-size: 15px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.es-price-text { font-family: var(--font-display); font-size: 22px; line-height: 24px; font-weight: 600; letter-spacing: 0.02em; }
.es-stat { font-family: var(--font-display); font-size: 56px; line-height: 56px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
@media (max-width: 1023px) {
  .es-display { font-size: 64px; line-height: 0.92; } .es-h1 { font-size: 48px; } .es-h2 { font-size: 40px; } .es-h3 { font-size: 32px; }
  .es-h4 { font-size: 26px; } .es-h5 { font-size: 22px; } .es-h6 { font-size: 18px; } .es-body-l { font-size: 17px; line-height: 26px; }
  .es-button-text { font-size: 16px; } .es-stat { font-size: 44px; line-height: 44px; }
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible,
.is-focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* show one of two logo files by theme (e.g. lockup-bone-ember vs lockup-black). Inherits from the
   nearest themed ancestor, so a dark section inside a light page swaps correctly. Shown elements render as block. */
:root, [data-theme="dark"] { --es-show-dark: block; --es-show-light: none; }
[data-theme="light"] { --es-show-dark: none; --es-show-light: block; }
.es-only-dark { display: var(--es-show-dark) !important; }
.es-only-light { display: var(--es-show-light) !important; }

.es-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.es-container { width: 100%; max-width: var(--grid-max); margin-inline: auto; padding-inline: var(--grid-gutter-mobile); }
@media (min-width: 768px) { .es-container { padding-inline: var(--grid-gutter); } }
@media (min-width: 1280px) { .es-container { padding-inline: var(--grid-gutter-wide); } }

.es-eyebrow {
  font-family: var(--font-label); font-style: italic; font-weight: 600;
  font-size: 12px; line-height: 16px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted);
}
.es-eyebrow--accent { color: var(--accent-ink); }

/* ------------------------------------------------------------------ buttons */
.es-btn {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd); border-radius: var(--radius-0);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-snap),
              color var(--duration-fast) var(--ease-snap),
              border-color var(--duration-fast) var(--ease-snap),
              transform var(--duration-instant) var(--ease-snap);
}
.es-btn:active, .es-btn.is-active { transform: translateY(1px); }
.es-btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.es-btn--lg { min-height: 56px; padding: 0 var(--space-8); font-size: 17px; }
.es-btn--block { display: flex; width: 100%; }
@media (max-width: 767px) { .es-btn { font-size: 16px; } }

.es-btn--primary { --btn-bg: var(--cta-bg); --btn-fg: var(--cta-fg); --btn-bd: var(--cta-bg); }
.es-btn--primary:hover, .es-btn--primary.is-hover { --btn-bg: var(--cta-bg-hover); --btn-bd: var(--cta-bg-hover); }
.es-btn--primary:active, .es-btn--primary.is-active { --btn-bg: var(--cta-bg-active); --btn-bd: var(--cta-bg-active); }

.es-btn--secondary { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--text); }
.es-btn--secondary:hover, .es-btn--secondary.is-hover { --btn-bg: var(--text); --btn-fg: var(--bg); }
.es-btn--secondary:active, .es-btn--secondary.is-active { --btn-bg: var(--text-muted); --btn-bd: var(--text-muted); --btn-fg: var(--bg); }

.es-btn--ghost { --btn-fg: var(--text); padding-inline: var(--space-2); min-height: 40px; }
.es-btn--ghost .es-btn__label { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 2px; transition: background-size var(--duration-fast) var(--ease-snap); }
.es-btn--ghost:hover .es-btn__label, .es-btn--ghost.is-hover .es-btn__label { background-size: 100% 2px; }
.es-btn--ghost:active, .es-btn--ghost.is-active { --btn-fg: var(--text-muted); }

/* the stripes glyph that trails a primary CTA: three slashes in the CTA's own ink */
.es-btn__slashes { display: inline-flex; gap: 3px; margin-left: var(--space-1); }
.es-btn__slashes::before, .es-btn__slashes::after, .es-btn__slashes > i {
  content: ""; display: block; width: 2px; height: 14px; background: currentColor; transform: skewX(-20deg);
}

.es-btn:disabled, .es-btn.is-disabled, .es-btn[aria-disabled="true"] {
  --btn-bg: var(--disabled-bg); --btn-fg: var(--disabled-fg); --btn-bd: var(--disabled-bg);
  cursor: not-allowed; transform: none;
}
.es-btn--secondary:disabled, .es-btn--secondary.is-disabled { --btn-bg: transparent; --btn-bd: var(--disabled-fg); }
.es-btn--ghost:disabled, .es-btn--ghost.is-disabled { --btn-bg: transparent; --btn-bd: transparent; }

/* icon button: 44px target minimum */
.es-icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; color: var(--text); border: 2px solid transparent; border-radius: var(--radius-0);
  cursor: pointer; transition: background-color var(--duration-fast) var(--ease-snap), color var(--duration-fast) var(--ease-snap);
}
.es-icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: square; }
.es-icon-btn:hover, .es-icon-btn.is-hover { background: var(--bg-overlay); }
.es-icon-btn:active, .es-icon-btn.is-active { background: var(--border); }
.es-icon-btn--outline { border-color: var(--border-strong); }
.es-icon-btn--solid { background: var(--cta-bg); color: var(--cta-fg); }
.es-icon-btn--solid:hover, .es-icon-btn--solid.is-hover { background: var(--cta-bg-hover); }
.es-icon-btn--solid:active, .es-icon-btn--solid.is-active { background: var(--cta-bg-active); }
.es-icon-btn:disabled, .es-icon-btn.is-disabled { color: var(--disabled-fg); background: transparent; cursor: not-allowed; }
.es-icon-btn__count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: var(--radius-1);
  background: var(--highlight-bg); color: var(--highlight-fg);
  font: 700 11px/1 var(--font-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ links */
.es-link {
  color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-snap), text-decoration-color var(--duration-fast) var(--ease-snap);
}
.es-link:hover, .es-link.is-hover { color: var(--link-hover); text-decoration-thickness: 3px; }
.es-link:active, .es-link.is-active { color: var(--text); }
.es-link--quiet { color: var(--text); text-decoration-color: var(--border-strong); }
.es-link--quiet:hover, .es-link--quiet.is-hover { color: var(--text); text-decoration-color: var(--link); }
.es-link.is-disabled, .es-link[aria-disabled="true"] { color: var(--disabled-fg); text-decoration-color: currentColor; pointer-events: none; }

/* ------------------------------------------------------------------ form fields */
.es-field { display: grid; gap: var(--space-2); min-width: 0; }
.es-field__label {
  font-family: var(--font-label); font-style: italic; font-weight: 600; font-size: 12px; line-height: 16px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text);
}
.es-field__help, .es-field__error { margin: 0; }
.es-field__help { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.es-field__error { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--error); }
.es-field__error svg { flex: none; width: 16px; height: 16px; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.es-input, .es-select {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-1);
  font: 400 16px/24px var(--font-body);
  transition: border-color var(--duration-fast) var(--ease-snap), box-shadow var(--duration-fast) var(--ease-snap);
}
.es-input::placeholder { color: var(--text-muted); opacity: 1; }
.es-input:hover, .es-input.is-hover, .es-select:hover, .es-select.is-hover { border-color: var(--text); }
.es-input:focus-visible, .es-input.is-focus, .es-select:focus-visible, .es-select.is-focus {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--text);
}
.es-input:disabled, .es-input.is-disabled, .es-select:disabled, .es-select.is-disabled {
  background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--disabled-bg); cursor: not-allowed;
}
.es-field--error .es-input, .es-field--error .es-select, .es-input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }

.es-select-wrap { position: relative; }
.es-select { appearance: none; -webkit-appearance: none; padding-right: var(--space-12); cursor: pointer; }
.es-select-wrap::after {
  content: ""; position: absolute; right: var(--space-4); top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
  transform: rotate(45deg); pointer-events: none;
}
.es-select-wrap.is-disabled::after { border-color: var(--disabled-fg); }

/* inline email capture: input + button fused, used in footer and email */
.es-inline-form { display: flex; gap: 0; }
.es-inline-form .es-input { border-right: 0; border-radius: var(--radius-1) 0 0 var(--radius-1); }
.es-inline-form .es-btn { flex: none; }
@media (max-width: 479px) {
  .es-inline-form { flex-direction: column; gap: var(--space-2); }
  .es-inline-form .es-input { border-right: 1px solid var(--border-strong); border-radius: var(--radius-1); }
}

/* ------------------------------------------------------------------ size picker */
.es-size-picker { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.es-size-picker__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.es-size-picker__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.es-size {
  position: relative; display: inline-grid; place-items: center;
  min-width: 56px; height: 48px; padding: 0 var(--space-3);
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-0);
  font: 700 16px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: border-color var(--duration-fast) var(--ease-snap), background-color var(--duration-fast) var(--ease-snap), color var(--duration-fast) var(--ease-snap);
}
.es-size input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.es-size:hover, .es-size.is-hover { border-color: var(--text); }
.es-size:has(input:focus-visible), .es-size.is-focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.es-size:has(input:checked), .es-size.is-selected { background: var(--text); color: var(--bg); border-color: var(--text); }
.es-size:active, .es-size.is-active { transform: translateY(1px); }
.es-size:has(input:disabled), .es-size.is-disabled {
  color: var(--disabled-fg); border-color: var(--border); cursor: not-allowed;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--disabled-fg) calc(50% - 1px), var(--disabled-fg) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ------------------------------------------------------------------ color (swatch) picker */
.es-swatch-picker { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.es-swatch-picker > legend, .es-size-picker > legend { padding: 0; margin-bottom: var(--space-3); }
.es-swatch-picker__options { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 5px; }
.es-swatch {
  position: relative; display: inline-block; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-0);
  background: var(--swatch, var(--swatch-jet-black)); cursor: pointer;
  box-shadow: 0 0 0 0 var(--bg), 0 0 0 0 var(--text);
  transition: box-shadow var(--duration-fast) var(--ease-snap);
}
.es-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.es-swatch:hover, .es-swatch.is-hover { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--border-strong); }
.es-swatch:has(input:checked), .es-swatch.is-selected { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.es-swatch:has(input:focus-visible), .es-swatch.is-focus { outline: 2px solid var(--focus-ring); outline-offset: 7px; }
.es-swatch:has(input:disabled), .es-swatch.is-disabled { cursor: not-allowed; opacity: 0.5; }
.es-swatch:has(input:disabled)::after, .es-swatch.is-disabled::after {
  content: ""; position: absolute; inset: -4px; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--text) calc(50% - 1px), var(--text) calc(50% + 1px), transparent calc(50% + 1px));
}
.es-swatch--sm { width: 16px; height: 16px; }
.es-swatch-row { display: flex; gap: var(--space-2); align-items: center; }

/* ------------------------------------------------------------------ badges & tags */
.es-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 24px; padding: 0 var(--space-2);
  border-radius: var(--radius-1); border: 1px solid transparent;
  font-family: var(--font-label); font-style: italic; font-weight: 600; font-size: 11px; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
}
.es-badge--new { background: var(--highlight-bg); color: var(--highlight-fg); }
.es-badge--sale { background: var(--sale-bg); color: var(--sale-fg); }
.es-badge--drop { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.es-badge--neutral { background: var(--bg-overlay); color: var(--text); border-color: var(--border); }
.es-badge--soldout { background: var(--bg); color: var(--text-muted); border-color: var(--border-strong); }
.es-badge--success { background: transparent; color: var(--success); border-color: currentColor; }

.es-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 36px; padding: 0 var(--space-3);
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-0);
  font: 600 14px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: border-color var(--duration-fast) var(--ease-snap), background-color var(--duration-fast) var(--ease-snap);
}
.es-tag:hover, .es-tag.is-hover { border-color: var(--text); }
.es-tag[aria-pressed="true"], .es-tag.is-selected { background: var(--text); color: var(--bg); border-color: var(--text); }
.es-tag:disabled, .es-tag.is-disabled { color: var(--disabled-fg); border-color: var(--border); cursor: not-allowed; }
.es-tag__x { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; fill: none; }

/* ------------------------------------------------------------------ product card */
.es-card { display: grid; gap: var(--space-3); min-width: 0; color: var(--text); text-decoration: none; position: relative; }
.es-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-raised); }
.es-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-snap), opacity var(--duration-base) var(--ease-snap); }
.es-card__media img + img { position: absolute; inset: 0; opacity: 0; }
.es-card:hover .es-card__media img:first-child, .es-card.is-hover .es-card__media img:first-child { transform: scale(1.03); }
.es-card:hover .es-card__media img + img, .es-card.is-hover .es-card__media img + img { opacity: 1; }
.es-card__badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; gap: var(--space-2); z-index: 1; }
.es-card__quick { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); transform: translateY(calc(100% + var(--space-3))); transition: transform var(--duration-base) var(--ease-snap); z-index: 1; }
.es-card:hover .es-card__quick, .es-card.is-hover .es-card__quick, .es-card:focus-within .es-card__quick { transform: none; }
.es-card__body { display: grid; gap: var(--space-1); }
.es-card__title { margin: 0; font: 700 20px/1.15 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.es-card__title a { color: inherit; text-decoration: none; }
.es-card__title a::after { content: ""; position: absolute; inset: 0; }
.es-card__meta { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.es-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.es-card__foot .es-swatch-row { position: relative; z-index: 1; }
.es-card.is-soldout .es-card__media img { opacity: 0.5; }
.es-card.is-focus { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

.es-price { display: inline-flex; align-items: baseline; gap: var(--space-2); font: 600 20px/1 var(--font-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.es-price__now--sale { color: var(--accent-ink); }
.es-price__was { color: var(--text-muted); text-decoration: line-through; font-size: 0.8em; }

/* ------------------------------------------------------------------ collection grid */
.es-collection { display: grid; gap: var(--space-6); }
.es-collection__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-4); }
.es-collection__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-3); border-block: 1px solid var(--border);
}
.es-collection__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.es-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
@media (min-width: 768px) { .es-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } }
@media (min-width: 1280px) { .es-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.es-grid__feature { grid-column: span 2; }

/* ------------------------------------------------------------------ PDP */
.es-pdp { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) { .es-pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; } }
.es-pdp__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.es-pdp__gallery > :first-child { grid-column: 1 / -1; }
.es-pdp__gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bg-raised); }
.es-pdp__info { display: grid; gap: var(--space-6); min-width: 0; }
@media (min-width: 1024px) { .es-pdp__info { position: sticky; top: var(--space-24); } }
.es-pdp__title { display: grid; gap: var(--space-2); }
.es-pdp__actions { display: grid; gap: var(--space-3); }
.es-pdp__trust { display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.es-pdp__trust li { display: flex; gap: var(--space-2); align-items: center; }
.es-pdp__trust li::before { content: ""; width: 10px; height: 2px; background: var(--stripe); transform: skewX(-20deg); flex: none; }

.es-accordion { border-top: 1px solid var(--border); }
.es-accordion details { border-bottom: 1px solid var(--border); }
.es-accordion summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: 56px; cursor: pointer; list-style: none;
  font: 700 18px/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase;
}
.es-accordion summary::-webkit-details-marker { display: none; }
.es-accordion summary::after { content: "+"; font: 600 24px/1 var(--font-display); }
.es-accordion details[open] summary::after { content: "\2212"; }
.es-accordion__body { padding-bottom: var(--space-4); color: var(--text-muted); font-size: 16px; line-height: 24px; }

/* ------------------------------------------------------------------ cart drawer */
.es-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-drawer); }
.es-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--bg-overlay); color: var(--text); box-shadow: var(--shadow-drawer);
  transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-snap);
}
.es-drawer.is-open { transform: none; }
.es-drawer--static { position: relative; transform: none; height: 100%; width: 100%; max-width: 440px; }
.es-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); }
.es-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-6); display: grid; gap: var(--space-4); align-content: start; }
.es-drawer__foot { padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--border); display: grid; gap: var(--space-3); }
.es-progress { display: grid; gap: var(--space-2); }
.es-progress__bar { height: 6px; background: var(--border); overflow: hidden; }
.es-progress__fill { height: 100%; background: var(--stripe); width: var(--value, 50%); transition: width var(--duration-slow) var(--ease-snap); }
.es-line { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; }
.es-line__img { width: 80px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bg-raised); }
.es-line__title { margin: 0; font: 700 16px/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.es-line__meta { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.es-qty { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); margin-top: var(--space-2); }
.es-qty button { width: 36px; height: 36px; background: transparent; color: var(--text); border: 0; cursor: pointer; font: 600 18px/1 var(--font-display); }
.es-qty button:hover { background: var(--border); }
.es-qty output { min-width: 32px; text-align: center; font: 600 16px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.es-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }

/* ------------------------------------------------------------------ nav */
.es-nav { position: sticky; top: 0; z-index: var(--z-header); background: var(--bg); border-bottom: 1px solid var(--border); }
.es-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); min-height: 72px; }
.es-nav__links { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.es-nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text); text-decoration: none;
  font: 700 15px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.es-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 4px; background: var(--stripe);
  transform: scaleX(0); transform-origin: left; transition: transform var(--duration-fast) var(--ease-snap);
}
.es-nav__link:hover::after, .es-nav__link.is-hover::after, .es-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.es-nav__link--drop { color: var(--accent-ink); }
.es-nav__logo { display: block; justify-self: center; }
.es-nav__logo img { height: 40px; width: auto; }
.es-nav__actions { display: flex; justify-content: flex-end; gap: var(--space-1); }
.es-nav__menu-btn { display: none; }
@media (min-width: 1024px) and (max-width: 1199px) { .es-nav__links { gap: var(--space-4); } .es-nav__logo img { height: 32px; } }
@media (max-width: 1023px) {
  .es-nav__links { display: none; }
  .es-nav__menu-btn { display: inline-grid; }
  .es-nav__inner { min-height: 60px; }
  .es-nav__logo img { height: 32px; }
  .es-nav__account { display: none; }
}

/* mobile nav panel */
.es-mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease-snap);
}
.es-mobile-nav.is-open { transform: none; }
.es-mobile-nav--static { position: relative; transform: none; height: 100%; }
.es-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding-inline: var(--space-4); border-bottom: 1px solid var(--border); }
.es-mobile-nav__list { list-style: none; margin: 0; padding: var(--space-4); display: grid; }
.es-mobile-nav__list a {
  display: flex; justify-content: space-between; align-items: center; min-height: 64px;
  border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none;
  font: 800 36px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0;
}
.es-mobile-nav__list a:hover, .es-mobile-nav__list a.is-hover { color: var(--accent-ink); }
.es-mobile-nav__foot { margin-top: auto; padding: var(--space-6) var(--space-4); display: grid; gap: var(--space-3); border-top: 1px solid var(--border); }

/* ------------------------------------------------------------------ announcement bar */
.es-announce {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 36px; padding: var(--space-2) var(--space-4);
  background: var(--bg-raised); color: var(--text);
  font-family: var(--font-label); font-style: italic; font-weight: 600; font-size: 12px; line-height: 16px;
  letter-spacing: 0.2em; text-transform: uppercase; text-align: center;
}
.es-announce a { color: inherit; text-underline-offset: 3px; }
.es-announce--drop { background: var(--ember); color: var(--jet-black); }
.es-announce__sep { display: inline-block; width: 18px; height: 12px; background: currentColor;
  -webkit-mask: url('//earned-stripes.com/cdn/shop/t/11/assets/es-claw-stripes-bone.webp?v=108854150613848568241791683020') center / contain no-repeat;
          mask: url('//earned-stripes.com/cdn/shop/t/11/assets/es-claw-stripes-bone.webp?v=108854150613848568241791683020') center / contain no-repeat; }
.es-announce--marquee { overflow: hidden; justify-content: flex-start; }
.es-announce--marquee .es-announce__track { display: flex; gap: var(--space-8); white-space: nowrap; animation: es-marquee 24s var(--ease-linear) infinite; }
@media (max-width: 479px) { .es-announce:not(.es-announce--marquee) { flex-direction: column; gap: var(--space-1); } .es-announce:not(.es-announce--marquee) .es-announce__sep { display: none; } }
@keyframes es-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .es-announce--marquee .es-announce__track { animation: none; } }

/* ------------------------------------------------------------------ hero */
.es-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--jet-black); color: var(--bone); }
.es-hero__media { position: absolute; inset: 0; z-index: -2; }
.es-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 30%); filter: contrast(1.08) saturate(0.85); }
.es-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 11, 0.92) 0%, rgba(11, 11, 11, 0.6) 45%, rgba(11, 11, 11, 0) 75%); }
@media (max-width: 767px) { .es-hero::before { background: linear-gradient(0deg, rgba(11, 11, 11, 0.95) 0%, rgba(11, 11, 11, 0.7) 45%, rgba(11, 11, 11, 0.1) 80%); } }
.es-hero__inner { display: grid; gap: var(--space-6); align-content: end; min-height: 560px; padding-block: var(--space-16) var(--space-12); max-width: 720px; }
@media (min-width: 1024px) { .es-hero__inner { min-height: 720px; padding-block: var(--space-24); } }
.es-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.es-hero__copy { max-width: 46ch; color: var(--bone); }
/* the hero is always photographic and dark: pin it to the dark ramp even inside a light page */
.es-hero { --text: var(--bone); --cta-bg: var(--ember); --cta-fg: var(--jet-black); --cta-bg-hover: #FF7440; --cta-bg-active: #E8501A; --focus-ring: var(--volt); --bg: var(--jet-black); }

/* ------------------------------------------------------------------ footer */
.es-footer { background: var(--bg); color: var(--text); border-top: 1px solid var(--border); }
.es-footer__top { display: grid; gap: var(--space-10); padding-block: var(--space-16) var(--space-10); }
@media (min-width: 640px) and (max-width: 1023px) { .es-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .es-footer__top > :first-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .es-footer__top { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--space-8); } }
.es-footer__col { display: grid; gap: var(--space-3); align-content: start; }
.es-footer__col h3 { margin: 0 0 var(--space-1); font: 700 16px/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.es-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.es-footer__col a { color: var(--text-muted); text-decoration: none; font-size: 14px; line-height: 20px; }
.es-footer__col a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.es-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-6); border-top: 1px solid var(--border); font-size: 12px; line-height: 16px; color: var(--text-muted); }
.es-footer__social { display: flex; gap: var(--space-1); }

/* ------------------------------------------------------------------ toast */
.es-toast-region { position: fixed; z-index: var(--z-toast); right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-2); width: min(400px, calc(100vw - 2 * var(--space-4))); }
.es-toast {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  padding: var(--space-4); background: var(--bg-overlay); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow-overlay);
  animation: es-toast-in var(--duration-base) var(--ease-snap);
}
.es-toast__icon { width: 20px; height: 20px; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: square; }
.es-toast--success .es-toast__icon { color: var(--success); }
.es-toast--error .es-toast__icon { color: var(--error); }
.es-toast--earned .es-toast__icon { color: var(--highlight-ink); }
.es-toast__title { margin: 0; font: 700 16px/1.25 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.es-toast__msg { margin: var(--space-1) 0 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.es-toast__close { width: 32px; height: 32px; margin: -6px -6px 0 0; }
@keyframes es-toast-in { from { transform: translateY(12px); opacity: 0; } }

/* ------------------------------------------------------------------ modal */
.es-modal-scrim { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); background: var(--scrim); }
.es-modal {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 2 * var(--space-4)); overflow: auto;
  background: var(--bg-overlay); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-overlay);
  animation: es-modal-in var(--duration-slow) var(--ease-snap);
}
.es-modal--static { animation: none; max-height: none; }
.es-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
.es-modal__body { padding: var(--space-4) var(--space-6); color: var(--text-muted); }
.es-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-6); }
@keyframes es-modal-in { from { transform: translateY(16px); opacity: 0; } }

/* ------------------------------------------------------------------ brand graphics */
/* The claw stripes mark, as a mask so it takes a token color. Uses the real asset, never a redraw. */
.es-claw {
  display: inline-block; width: var(--claw-w, 28px); aspect-ratio: 616 / 857; background: var(--stripe);
  -webkit-mask: url('//earned-stripes.com/cdn/shop/t/11/assets/es-claw-stripes-bone.webp?v=108854150613848568241791683020') center / contain no-repeat;
          mask: url('//earned-stripes.com/cdn/shop/t/11/assets/es-claw-stripes-bone.webp?v=108854150613848568241791683020') center / contain no-repeat;
}
.es-claw--bone { background: var(--bone); }
.es-claw--black { background: var(--jet-black); }

/* divider: rule /// rule */
.es-claw-divider { display: flex; align-items: center; gap: var(--space-4); color: var(--border-strong); }
.es-claw-divider::before, .es-claw-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.es-claw-divider .es-claw { --claw-w: 24px; }
.es-claw-divider--left::before { flex: 0 0 var(--space-8); }

/* slash band: a full-width strip of claw-angle slashes for section breaks (a graphic, not the mark) */
.es-slash-band {
  height: var(--band-h, 16px);
  background: repeating-linear-gradient(-70deg, var(--stripe) 0 6px, transparent 6px 22px);
}
.es-slash-band--bone { --stripe: var(--bone); }

/* slash-cut masks. The cut angle matches the claw stripes (~20deg off vertical). */
.es-cut { overflow: hidden; }
.es-cut--tr { clip-path: polygon(0 0, calc(100% - var(--cut, 64px)) 0, 100% calc(var(--cut, 64px) * 2.75), 100% 100%, 0 100%); }
.es-cut--bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut, 64px) 100%, 0 calc(100% - var(--cut, 64px) * 2.75)); }
.es-cut--both { clip-path: polygon(0 0, calc(100% - var(--cut, 64px)) 0, 100% calc(var(--cut, 64px) * 2.75), 100% 100%, var(--cut, 64px) 100%, 0 calc(100% - var(--cut, 64px) * 2.75)); }
.es-cut--slant { clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); }
/* three-slash window: the photo shows through three claw-angle bands */
.es-cut--claws { clip-path: polygon(8% 100%, 30% 0, 40% 0, 18% 100%, 34% 100%, 56% 0, 66% 0, 44% 100%, 60% 100%, 82% 0, 92% 0, 70% 100%); }

/* rank / tier badges (stripes earned loyalty) */
.es-rank {
  --tier: var(--tier-bone); --tier-ink: var(--jet-black);
  display: inline-grid; justify-items: center; gap: var(--space-2); text-align: center; color: var(--text);
}
.es-rank__plate {
  position: relative; display: grid; place-items: center;
  width: var(--rank-size, 96px); aspect-ratio: 1 / 1.12;
  background: var(--tier); color: var(--tier-ink);
  clip-path: polygon(50% 0, 100% 14%, 100% 72%, 50% 100%, 0 72%, 0 14%);
}
.es-rank__plate::before { content: ""; position: absolute; inset: 4px; background: var(--jet-black); clip-path: inherit; }
.es-rank__stripes { position: relative; display: flex; gap: 10%; height: 46%; }
.es-rank__stripes i { display: block; width: calc(var(--rank-size, 96px) * 0.075); height: 100%; background: var(--tier); transform: skewX(-20deg); }
.es-rank__stripes i.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--tier); opacity: 0.5; }
.es-rank__name { font: 800 18px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.es-rank__rule { font-size: 12px; line-height: 16px; color: var(--text-muted); max-width: 18ch; }
.es-rank--bone { --tier: var(--tier-bone); }
.es-rank--ember { --tier: var(--tier-ember); }
.es-rank--volt { --tier: var(--tier-volt); }
.es-rank--gold { --tier: linear-gradient(135deg, var(--tier-gold-light) 0%, var(--tier-gold) 45%, var(--tier-gold-dark) 100%); }
.es-rank--gold .es-rank__stripes i { background: var(--tier-gold); }
.es-rank--gold .es-rank__plate { background: linear-gradient(135deg, var(--tier-gold-light) 0%, var(--tier-gold) 45%, var(--tier-gold-dark) 100%); }

/* stat: Volt numbers for challenge moments */
.es-stat { display: grid; gap: var(--space-1); }
.es-stat__value { font: 800 56px/1 var(--font-display); color: var(--highlight-ink); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.es-stat__label { font-family: var(--font-label); font-style: italic; font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }

/* logo helpers */
.es-logo { display: block; height: auto; }
.es-clearspace { position: relative; display: inline-block; padding: var(--cs, 32px); outline: 1px dashed var(--ember); outline-offset: 0; }
.es-clearspace::after { content: ""; position: absolute; inset: var(--cs, 32px); outline: 1px solid var(--border-strong); pointer-events: none; }

/* ------------------------------------------------------------------ doc helpers (previews only) */
.es-doc { padding: var(--space-6); display: grid; gap: var(--space-6); }
.es-doc__row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.es-doc__state { display: grid; gap: var(--space-2); justify-items: start; }
.es-doc__cap { font: 500 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.es-doc__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.es-doc__split > * { padding: var(--space-6); }