/** Shopify CDN: Minification failed

Line 1055:69 Unexpected "*"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection (INDEX:3) */
.collection-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  }
/* END_SECTION:collection */

/* START_SECTION:custom-section (INDEX:4) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:hello-world (INDEX:5) */
.welcome {
    display: grid;
    grid-template-columns: var(--content-grid);
    background-color: #f6f6f7;
    padding: 72px 0;
  }

  .welcome-content {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 24px;
  }

  .welcome-description {
    max-width: 80ch;
    line-height: 1.4;
    margin-top: 1.5rem;
  }

  .icon {
    width: 300px;
  }

  .highlights {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
  }

  @media (max-width: 1100px) {
    .highlights {
      grid-template-columns: 1fr;
    }
  }

  .highlight {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 8px;
    background-color: #eef3ff;
    color: rgb(92, 95, 98);
    line-height: 1.4;
  }

  .highlight > * + * {
    margin-top: 1rem;
  }

  .highlight h3 {
    font-size: 1rem;
    color: rgb(32, 34, 35);
  }

  .highlight-description {
    flex: 1 1;
  }

  .highlight a {
    display: flex;
    width: fit-content;
    background-color: rgb(250, 251, 251);
    box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 0px 0px inset, rgba(255, 255, 255, 0.9) 0px 2px 0px 0px inset;
    border: 1px solid rgb(140, 145, 150);
    border-radius: 4px;
    color: rgb(92, 95, 98);
    padding: 3px 10px 5px;
    text-decoration: none;
  }
/* END_SECTION:hello-world */

/* START_SECTION:ultreia-all-brands (INDEX:9) */
/* ----------------------------------------------------------------------------
     All brands (.u-abrands): a plain 5-up grid of brand cards. Same card
     treatment as the brands page / collection brands, namespaced so they don't
     collide. Color roles default to the brand cream/ink scheme.
     ---------------------------------------------------------------------------- */
  .u-abrands {
    --_paper: var(--color-ultreia-paper);
    --_ink:   var(--color-ultreia-ink);
    /* Line and muted derive from ink/paper so they invert with the band when an
       instance sets a dark background + light foreground. */
    --_line:  color-mix(in srgb, var(--_ink) 18%, transparent);
    --_muted: color-mix(in srgb, var(--_ink) 62%, var(--_paper));
    background: var(--_paper);
    padding-block: clamp(28px, 4vw, 56px);
    font-family: var(--font-serif);
  }
  .u-abrands *, .u-abrands *::before, .u-abrands *::after { box-sizing: border-box; }
  .u-abrands a { text-decoration: none; color: inherit; }

  .u-abrands__grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(10px, 1vw, 16px);
  }

  /* Card styles (.u-brand*) live in the shared snippet 'ultreia-brand-card'. */

  .u-abrands__cta {
    display: flex; justify-content: center;
    margin-top: clamp(24px, 3vw, 44px);
  }
  /* The ghost button reads the brand ink for its border/text; on a dark band the
     section's --_ink is light, so point the button's foreground at it too. The
     snippet's own .u-btn--ghost:hover sets --_fg to cream paper; these rules must
     out-specify it, so they're qualified with .u-abrands for a clear win. */
  .u-abrands .u-abrands__cta .u-btn--ghost {
    --_fg: var(--_ink);
    border-color: color-mix(in srgb, var(--_ink) 42%, transparent);
    /* The base .u-btn transition omits border-color; add it so the outline fades
       into the fill on hover instead of snapping. */
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1)),
                color .28s var(--ease, cubic-bezier(.2,.6,.2,1)),
                border-color .28s var(--ease, cubic-bezier(.2,.6,.2,1)),
                transform .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-abrands .u-abrands__cta .u-btn--ghost:hover {
    --_bg: var(--_ink);
    --_fg: #fff;
    color: #fff;
  }

  @media (max-width: 1100px) {
    .u-abrands__grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 720px) {
    .u-abrands__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 440px) {
    .u-abrands__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:ultreia-all-brands */

/* START_SECTION:ultreia-application-form (INDEX:10) */
/* ----------------------------------------------------------------------------
     Application form (.u-apply). Two-column field grid, consent footer. Color
     roles default to the brand cream/ink scheme; an instance overrides them via
     the inline style on the root.
     ---------------------------------------------------------------------------- */
  .u-apply {
    --accent: var(--color-urbano, #d2693c);
    --_bg:    var(--color-ultreia-paper);
    --_head:  var(--color-ultreia-ink);
    --_lead:  var(--color-muted, #6f6857);
    background: var(--_bg);
    padding: clamp(40px, 5vw, 72px) 0 var(--site-section-y);
    font-family: var(--font-serif);
  }
  .u-apply *, .u-apply *::before, .u-apply *::after { box-sizing: border-box; }

  /* Width/gutters come from the shared container; the form just keeps the field
     column readable on very wide viewports. */
  .u-apply__form { max-width: 1120px; margin-inline: auto; }
  /* Visually-hidden honeypot inputs — kept in the layout but off-screen. */
  .u-apply__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .u-apply__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(22px, 2.4vw, 34px);
    row-gap: clamp(26px, 3vw, 40px);
  }
  .u-apply__cell { min-width: 0; }
  .u-apply__cell--full { grid-column: 1 / -1; }

  /* Field focus picks up the section accent (the shared snippet defaults to ink). */
  .u-apply .u-input:focus,
  .u-apply .u-select:focus,
  .u-apply .u-textarea:focus { border-color: var(--accent); }

  .u-apply__foot {
    margin-top: clamp(28px, 3vw, 44px);
    padding-top: clamp(24px, 2.6vw, 36px);
    border-top: var(--bw, 1px) solid var(--color-line, rgba(26,26,26,.16));
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: var(--s5, 24px);
  }
  .u-apply__note {
    font-family: var(--font-serif); font-style: italic;
    font-size: var(--text-small, 14px); line-height: var(--leading-body, 1.62);
    color: var(--_lead); margin: 0; max-width: 52ch;
  }
  .u-apply__note a {
    color: var(--color-ultreia-ink); font-style: normal; text-decoration: none;
    border-bottom: 1px solid var(--accent);
    transition: color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-apply__note a:hover { color: var(--accent); }

  .u-apply__submit .u-btn { padding: 16px 26px; }

  @media (max-width: 680px) {
    .u-apply__grid { grid-template-columns: 1fr; }
    .u-apply__cell--full { grid-column: auto; }
    .u-apply__foot { flex-direction: column; align-items: stretch; }
    .u-apply__submit, .u-apply__submit .u-btn { width: 100%; }
    .u-apply__submit .u-btn { justify-content: space-between; }
  }
/* END_SECTION:ultreia-application-form */

/* START_SECTION:ultreia-brands-page (INDEX:11) */
/* ----------------------------------------------------------------------------
     Brands page (.u-brands): filter bar + Destacadas strip + banded alphabetical
     index over a 5-up card grid. Color roles default to the brand cream/ink
     scheme via shared tokens.
     ---------------------------------------------------------------------------- */
  .u-brands {
    --_paper: var(--color-ultreia-paper);
    --_ink:   var(--color-ultreia-ink);
    --_line:  var(--color-ultreia-line);
    --_muted: var(--color-muted, #6f6857);
    --_gold:  var(--color-ultreia-gold);
    background: var(--_paper);
    padding-block: clamp(28px, 4vw, 56px);
    font-family: var(--font-serif);
  }
  .u-brands *, .u-brands *::before, .u-brands *::after { box-sizing: border-box; }
  .u-brands a { text-decoration: none; color: inherit; }

  /* --- Filter bar: same bordered card + chip language as the active-filters bar
     (.u-afilters), reading this section's --_paper / --_ink / --_line roles. */
  .u-brands__cats {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
    margin-bottom: clamp(28px, 3.5vw, 52px);
    padding: 14px 18px;
    background: color-mix(in srgb, var(--_ink) 4%, var(--_paper));
    border: 1px solid var(--_line);
  }
  .u-brands__cats-label {
    font-family: var(--font-mono); font-weight: 700;
    font-size: var(--text-label, 12px); letter-spacing: .12em;
    text-transform: uppercase; color: var(--_ink); flex: none;
  }
  .u-brands__cats-chips {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
    flex: 1 1 auto;
  }
  .u-brands__cat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--_line);
    border-radius: var(--radius-sm, 2px);
    background: var(--_paper);
    font-family: var(--font-mono); font-size: var(--text-label-sm, 11px);
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--_muted); white-space: nowrap; cursor: pointer;
    transition: background var(--dur, .28s) var(--ease, ease),
                color var(--dur, .28s) var(--ease, ease),
                border-color var(--dur, .28s) var(--ease, ease);
  }
  .u-brands__cat:hover { border-color: var(--_ink); color: var(--_ink); }
  .u-brands__cat.is-active {
    background: var(--_ink); color: var(--_paper); border-color: var(--_ink);
  }
  .u-brands__cat-n { opacity: .7; }

  /* --- Destacadas strip: same cards, but each spans two columns (wider tiles). */
  .u-brands__featured { margin-bottom: clamp(40px, 5vw, 72px); }
  .u-brands__featuredgrid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(10px, 1vw, 16px);
  }
  .u-brands__featuredgrid > .u-brand {
    grid-column: span 2;
    /* Short, wide landscape tile so two-wide cards aren't too tall. */
    aspect-ratio: 5 / 2;
  }

  /* --- Index groups --------------------------------------------------------- */
  .u-brands__group { margin-bottom: clamp(40px, 5vw, 72px); }
  .u-brands__group:last-child { margin-bottom: 0; }

  /* Group / strip header: range label on the left, count beside it. */
  .u-brands__grouphead {
    display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    margin-bottom: clamp(8px, 0.8vw, 12px);
  }
  .u-brands__range {
    font-family: var(--font-mono); font-size: var(--text-label, 12px);
    letter-spacing: .3em; text-transform: uppercase; color: var(--_ink);
    flex: none;
  }
  .u-brands__groupmeta {
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: .22em; text-transform: uppercase; color: var(--_muted);
    flex: none;
  }
  .u-brands__groupmeta::first-letter { color: var(--_ink); }

  .u-brands__grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(10px, 1vw, 16px);
  }

  /* Card styles (.u-brand*) live in the shared snippet 'ultreia-brand-card'. */

  @media (max-width: 1100px) {
    .u-brands__grid { grid-template-columns: repeat(3, 1fr); }
    .u-brands__featuredgrid { grid-template-columns: repeat(2, 1fr); }
    .u-brands__featuredgrid > .u-brand { grid-column: span 1; aspect-ratio: 3 / 2; }
  }
  @media (max-width: 720px) {
    .u-brands__grid { grid-template-columns: repeat(2, 1fr); }
    .u-brands__featuredgrid { grid-template-columns: 1fr; }
    .u-brands__featuredgrid > .u-brand { grid-column: span 1; aspect-ratio: 16 / 9; }
  }
  @media (max-width: 440px) {
    .u-brands__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:ultreia-brands-page */

/* START_SECTION:ultreia-cart (INDEX:14) */
/* ----------------------------------------------------------------------------
     Cart page (.u-cart). Color roles default to the brand cream / ink scheme; an
     instance overrides them via the inline style on the root. Non-color tokens
     (fonts, type scale, spacing, radii) come from the shared design tokens.
     ---------------------------------------------------------------------------- */
  .u-cart {
    --_bg:    var(--color-paper);
    --_head:  var(--color-ink);
    --_ink:   var(--color-ink-2, #4a4334);
    --_muted: var(--color-muted, #6f6857);
    --_line:  var(--color-line, rgba(26,26,26,.16));
    --_panel: color-mix(in srgb, var(--color-sand, #e2dcc9) 42%, var(--color-paper));
    background: var(--_bg);
    color: var(--_ink);
    /* Top spacing comes from the ULTREIA Section header above; keep a small gap. */
    padding: clamp(16px, 2vw, 28px) 0 var(--site-section-y);
  }
  .u-cart *, .u-cart *::before, .u-cart *::after { box-sizing: border-box; }

  /* Empty state stretches to fill the viewport so the editorial block centers. */
  .u-cart--empty { display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }

  /* ---- Table ---------------------------------------------------------------- */
  .u-ctable { position: relative; }

  /* Busy veil: covers the table while a cart change round-trips. Hidden by default;
     revealed when the section root carries aria-busy="true" (set in change()). It
     intercepts pointer events so stray clicks during the request are absorbed (the
     JS already guards with `busy`, this just makes the lockout visible + intentional)
     and fades in quickly so it appears together with a remove's collapse. */
  .u-ctable__veil {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--_bg) 64%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s var(--ease);
  }
  .u-cart[aria-busy="true"] .u-ctable__veil { opacity: 1; pointer-events: auto; }
  .u-ctable__spinner {
    width: 30px; height: 30px;
    border: 2px solid var(--color-line-strong, rgba(26,26,26,.42));
    border-top-color: var(--_head);
    border-radius: 50%;
    animation: u-ctable-spin .7s linear infinite;
  }
  @keyframes u-ctable-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .u-ctable__spinner { animation: none; }
    .u-ctable__veil { transition: opacity .12s linear; }
  }

  .u-ctable__head {
    display: grid;
    grid-template-columns: 1fr 168px 168px 150px;
    align-items: center;
    gap: var(--s5);
    padding: 14px 0;
    border-bottom: var(--bw) solid #d2cec6;
  }
  .u-ctable__h {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--_muted);
  }
  .u-ctable__h--r { text-align: right; }
  .u-ctable__h--c { text-align: center; }

  /* ---- Row ------------------------------------------------------------------ */
  .u-crow {
    display: grid;
    grid-template-columns: 1fr 168px 168px 150px;
    align-items: center;
    gap: var(--s5);
    padding: var(--s5) 0;
    border-bottom: var(--bw) solid #d2cec6;
  }
  /* Removal: collapse + fade. JS sets --row-h to the row's measured height, then
     adds [data-removing] which animates it (and its vertical box) to zero — so the
     rows below glide up into the gap instead of the table snapping shorter once the
     fresh section swaps in underneath. overflow:hidden keeps content clipped as the
     height shrinks. */
  .u-crow[data-removing] {
    overflow: hidden;
    opacity: 0;
    transform: translateX(-8px);
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
    /* max-height itself is driven inline by JS (measured height → 0) so it has a
       concrete value to transition from; the rest collapse alongside it here. */
    transition:
      max-height .26s var(--ease),
      padding-top .26s var(--ease),
      padding-bottom .26s var(--ease),
      border-bottom-width .26s var(--ease),
      opacity .2s var(--ease),
      transform .2s var(--ease);
  }
  @media (prefers-reduced-motion: reduce) {
    .u-crow[data-removing] { transition: opacity .15s linear, max-height .15s linear; }
  }

  /* Pending feedback: while a quantity change is in flight, dim + pulse the
     values that are being recalculated (the row's line total and the order
     summary) so the ~1s server round-trip reads as "working", not "nothing
     happened". Driven by [data-busy] on the active row (set on click) and
     [aria-busy] on the section root (the summary always recalculates). */
  .u-crow[data-busy] .u-crow__total,
  .u-cart[aria-busy="true"] .u-summary__amount,
  .u-cart[aria-busy="true"] [data-subtotal-mini] {
    animation: u-cart-pulse 1s var(--ease) infinite;
  }
  /* Soften the busy row's stepper so it reads as locked during the request. */
  .u-crow[data-busy] .u-qty { opacity: .6; }
  @keyframes u-cart-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
  @media (prefers-reduced-motion: reduce) {
    .u-crow[data-busy] .u-crow__total,
    .u-cart[aria-busy="true"] .u-summary__amount,
    .u-cart[aria-busy="true"] [data-subtotal-mini] { animation: none; opacity: .5; }
  }

  .u-crow__product { display: flex; align-items: center; gap: var(--s5); min-width: 0; }
  .u-crow__img {
    flex: none;
    width: 92px;
    height: 92px;
    display: block;
    position: relative;
    background: var(--color-sand, #e2dcc9);
    border: var(--bw) solid #d2cec6;
    overflow: hidden;
  }
  /* Loading skeleton — mirrors the product card: shimmer while the image loads,
     then fade it in on `.is-loaded` and stop the shimmer. Only runs when there's a
     real image (`.has-img`); the no-image placeholder shows a static tile instead. */
  .u-crow__img.has-img {
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--_head) 5%, transparent) 30%,
      color-mix(in srgb, var(--_head) 11%, transparent) 50%,
      color-mix(in srgb, var(--_head) 5%, transparent) 70%) var(--color-sand, #e2dcc9);
    background-size: 200% 100%;
    animation: u-crow-shimmer 1.3s ease-in-out infinite;
  }
  .u-crow__img.has-img:has(img.is-loaded) { animation: none; background: var(--color-sand, #e2dcc9); }
  @keyframes u-crow-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .u-crow__img.has-img { animation: none; } }

  .u-crow__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .4s var(--ease);
  }
  .u-crow__img img.is-loaded { opacity: 1; }
  /* No-image fallback — same placeholder treatment as the product card. */
  .u-crow__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: #ffffff; }
  .u-crow__placeholder-svg { width: 60%; height: 60%; fill: color-mix(in srgb, var(--_head) 14%, transparent); }
  .u-crow__info { display: grid; gap: 7px; min-width: 0; }
  /* Vendor — same treatment as the product card: mono uppercase brand gold. */
  .u-crow__vendor {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7b6f55;
    /* Pull the title up closer than the info column's default 7px gap. */
    margin-bottom: -4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .u-crow__name {
    font-family: var(--font-serif);
    font-size: var(--text-prod);
    line-height: var(--leading-snug);
    font-weight: 700;
    color: var(--_head);
    text-decoration: none;
    margin: 0;
  }
  .u-crow__name:hover { text-decoration: underline; text-underline-offset: 3px; }
  .u-crow__variant {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--_muted);
    margin: 0;
  }
  /* One option per line (Talla / Color stack), independent of column width. */
  .u-crow__variant-line { display: block; }
  .u-crow__variant-line + .u-crow__variant-line { margin-top: 3px; }
  .u-crow__variant b { font-weight: 700; color: var(--_ink); }

  .u-crow__acts { display: flex; gap: 6px; margin-top: 3px; }
  .u-iconlink {
    width: 30px; height: 30px;
    display: inline-grid; place-content: center;
    background: transparent;
    border: var(--bw) solid #d2cec6;
    border-radius: var(--radius-sm);
    color: var(--_muted);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .u-iconlink svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .u-iconlink:hover { color: var(--_head); border-color: var(--color-line-strong, rgba(26,26,26,.42)); }
  .u-iconlink--del:hover {
    color: var(--color-sale, #d20a05);
    border-color: color-mix(in srgb, var(--color-sale, #d20a05) 45%, var(--_line));
    background: color-mix(in srgb, var(--color-sale, #d20a05) 7%, var(--_bg));
  }

  /* ---- Prices --------------------------------------------------------------- */
  .u-crow__price {
    text-align: center;
    font-family: var(--font-serif);
    font-size: var(--text-prod);
    color: var(--_ink);
  }
  .u-crow__price-was { color: var(--_muted); margin-right: .4em; text-decoration-thickness: 1px; }
  .u-crow__price-now { color: var(--color-discount, #e07b39); }
  .u-crow__total {
    text-align: right;
    font-family: var(--font-serif);
    font-size: var(--text-prod);
    font-weight: 700;
    color: var(--_head);
  }

  /* ---- Quantity stepper ----------------------------------------------------- */
  .u-qty {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    border: var(--bw) solid var(--color-line-strong, rgba(26,26,26,.42));
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--_bg);
  }
  .u-qty__btn {
    width: 32px; height: 34px;
    display: grid; place-content: center;
    background: transparent;
    border: none;
    color: var(--_head);
    font-size: 15px;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
  }
  .u-qty__btn:hover { background: var(--color-sand, #e2dcc9); }
  .u-qty__btn:disabled { opacity: .4; cursor: default; }
  .u-qty__val {
    min-width: 36px;
    width: 44px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    color: var(--_head);
    background: transparent;
    border: none;
    border-inline: var(--bw) solid var(--color-line-strong, rgba(26,26,26,.42));
    border-radius: 0;
    align-self: stretch;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .u-qty__val::-webkit-outer-spin-button,
  .u-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .u-qty__val:focus { outline: none; }

  /* ---- Footer: note + summary ----------------------------------------------- */
  .u-cart__foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 5vw, 80px);
    margin-top: clamp(40px, 4.5vw, 64px);
  }
  .u-cart__note .u-textarea { min-height: 132px; resize: vertical; }
  .u-cart__note-save, .u-summary__update { margin-top: var(--s4); }
  /* "Nota guardada" confirmation: hidden until JS reveals it on a successful save,
     then fades out again. Reserves no layout when idle (opacity, not display). */
  .u-cart__note-status {
    margin: var(--s3) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--_muted);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }
  .u-cart__note-status.is-visible { opacity: 1; }


  .u-summary {
    align-self: start;
    background: #ebe5d7;
    border: var(--bw) solid #d8d1bd;
    border-radius: 0;
    padding: clamp(24px, 2.6vw, 36px);
  }
  .u-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s5);
    padding-bottom: var(--s4);
  }
  .u-summary__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s5);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    color: var(--_ink);
    padding-bottom: 12px;
  }
  .u-summary__line--save { color: var(--color-discount, #e07b39); }
  .u-summary__total {
    border-top: var(--bw) solid var(--_line);
    padding-top: var(--s5);
    margin-top: var(--s2);
  }
  .u-summary__label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--_ink);
  }
  /* "Total" label matches the "Subtotal estimado" line: sans, no uppercase. */
  .u-summary__total .u-summary__label {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    letter-spacing: normal;
    text-transform: none;
    color: var(--_ink);
  }
  .u-summary__amount {
    font-family: var(--font-serif);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1;
    font-weight: 700;
    color: var(--_head);
    letter-spacing: -.01em;
  }
  .u-summary__cta { margin-top: var(--s6); }
  .u-summary__cta .u-btn { font-size: var(--text-label); letter-spacing: var(--tracking-label); padding: 18px 26px; }

  /* ---- Empty state ---------------------------------------------------------- */
  .u-empty {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--s5);
  }
  .u-empty__glyph {
    width: clamp(86px, 11vw, 118px);
    height: clamp(86px, 11vw, 118px);
    color: var(--_head);
    margin-bottom: var(--s2);
  }
  .u-empty__glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
  .u-empty__glyph svg [data-dot] { fill: var(--color-gold, #f8c858); stroke: none; }
  .u-empty__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--_muted);
    margin: 0;
  }
  .u-empty__title {
    font-family: var(--font-serif);
    font-size: var(--text-display);
    line-height: var(--leading-tight);
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--_head);
    margin: 0;
    max-width: 16ch;
  }
  .u-empty__title .u-dot { color: var(--color-gold, #f8c858); }
  .u-empty__lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-lead);
    line-height: var(--leading-body);
    color: var(--_ink);
    margin: 0;
    max-width: 46ch;
  }
  .u-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    justify-content: center;
    margin-top: var(--s4);
  }

  /* ---- Responsive ----------------------------------------------------------- */
  @media (max-width: 900px) {
    .u-cart__foot { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    .u-ctable { border-top: none; }
    .u-ctable__head { display: none; }
    .u-crow {
      grid-template-columns: 1fr auto;
      grid-template-areas: "prod prod" "price price" "qty total";
      row-gap: var(--s4);
      align-items: center;
      padding: var(--s5) 0;
      border-bottom: var(--bw) solid #d2cec6;
      border-top: var(--bw) solid #d2cec6;
    }
    .u-crow:first-child { border-top: var(--bw-2) solid var(--_head); }
    .u-crow__product { grid-area: prod; }
    /* Unit price label matches the cart drawer's: mono, a " c/u" suffix rather
       than a "Precio unitario ·" prefix, lowercase with tight letter-spacing. */
    .u-crow__price {
      grid-area: price;
      text-align: left;
      font-family: var(--font-mono);
      font-size: var(--text-label);
      letter-spacing: .04em;
      color: var(--_muted);
    }
    .u-crow__price::after { content: " c/u"; }
    .u-qty { grid-area: qty; justify-self: start; }
    .u-crow__total { grid-area: total; align-self: center; font-size: var(--text-title); }
    .u-crow__img { width: 76px; height: 76px; }
  }
  @media (max-width: 520px) {
    .u-empty__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .u-empty__actions .u-btn { justify-content: space-between; }
  }
/* END_SECTION:ultreia-cart */

/* START_SECTION:ultreia-collection-brands (INDEX:15) */
/* ----------------------------------------------------------------------------
     Collection brands (.u-cbrands). Same card treatment as the marketplace
     brands page, namespaced so the two never collide. Color roles default to the
     brand cream/ink scheme via shared tokens.
     ---------------------------------------------------------------------------- */
  .u-cbrands {
    --_paper: var(--color-ultreia-paper);
    --_ink:   var(--color-ultreia-ink);
    /* Line and muted derive from ink/paper so they invert with the band when an
       instance sets a dark background + cream foreground. */
    --_line:  color-mix(in srgb, var(--_ink) 18%, transparent);
    --_muted: color-mix(in srgb, var(--_ink) 62%, var(--_paper));
    background: var(--_paper);
    padding-block: clamp(28px, 4vw, 56px);
    font-family: var(--font-serif);
  }
  .u-cbrands *, .u-cbrands *::before, .u-cbrands *::after { box-sizing: border-box; }
  .u-cbrands a { text-decoration: none; color: inherit; }

  .u-cbrands__grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(10px, 1vw, 16px);
  }

  /* Card styles (.u-brand*) live in the shared snippet 'ultreia-brand-card'. */

  @media (max-width: 1100px) {
    .u-cbrands__grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 720px) {
    .u-cbrands__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 440px) {
    .u-cbrands__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:ultreia-collection-brands */

/* START_SECTION:ultreia-collection-hero (INDEX:16) */
/* ----------------------------------------------------------------------------
     Collection hero (.u-collection). Two color roles default to the brand mountain
     tones; an instance overrides them via the inline style on the root. The block
     paints a dark photo with cream text, so foreground stays constant.
     ---------------------------------------------------------------------------- */
  .u-collection {
    --accent: var(--color-montana, #735f3c);                            /* photo tint + box */
    --_glow: var(--uc-highlight, #c49a6c);  /* on-photo accent: the dot, big number, eyebrow fill */
    position: relative; overflow: hidden; color: var(--color-ultreia-paper);
    min-height: clamp(560px, 86vh, 900px);
    display: flex; flex-direction: column;
    padding: clamp(26px, 4vw, 60px) 0;
    font-family: var(--font-serif);
  }
  .u-collection *, .u-collection *::before, .u-collection *::after { box-sizing: border-box; }
  .u-collection__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
  .u-collection__media { position: absolute; inset: 0; }
  .u-collection__media .u-photo {
    width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto;
    background:
      linear-gradient(150deg, color-mix(in srgb, var(--accent) 70%, #10131a), #0c0f14 82%),
      repeating-linear-gradient(135deg, transparent 0 15px, rgba(0,0,0,.12) 15px 16px);
  }
  .u-collection__media img { width: 100%; height: 100%; object-fit: cover; }
  /* Carousel slides: stacked and cross-faded by opacity (JS toggles .is-active).
     The image itself stays still — only the opacity transitions. */
  .u-collection__slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.2s ease;
    will-change: opacity;
  }
  /* First slide shows by default; once JS takes over, only .is-active shows. */
  .u-collection__slide:first-child { opacity: 1; }
  .u-collection__media[data-carousel-ready] .u-collection__slide { opacity: 0; }
  .u-collection__media[data-carousel-ready] .u-collection__slide.is-active { opacity: 1; }
  .u-collection__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(105deg, rgba(10,13,18,.82) 0%, rgba(10,13,18,.34) 42%, transparent 72%),
      linear-gradient(to top, rgba(10,13,18,.78) 0%, transparent 46%);
  }
  .u-collection__head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
  .u-collection__head .u-eyebrow--box { display: inline-block; background: var(--_glow); }
  .u-collection__coords { display: grid; gap: 5px; text-align: right; }
  .u-collection__coords span {
    font-family: var(--font-mono); font-size: var(--text-meta, 12.5px); letter-spacing: .16em;
    text-transform: uppercase; color: rgba(var(--cream-rgb, 246,241,231),.78);
  }
  .u-collection__body { position: relative; z-index: 1; margin-top: auto; display: grid; gap: clamp(8px, 1.2vw, 16px); }
  .u-collection__num {
    font-family: var(--font-serif); font-weight: 400; color: var(--_glow); opacity: .85;
    font-size: clamp(120px, 20vw, 280px); line-height: .76; letter-spacing: -.02em; margin: 0;
  }
  .u-collection__num + .u-collection__name { margin-top: clamp(-20px, -1.2vw, -8px); }
  .u-collection__name {
    font-family: var(--font-serif); font-weight: 700; color: var(--color-ultreia-paper);
    font-size: clamp(52px, 9vw, 128px); line-height: .84; letter-spacing: -.02em; margin: 0; max-width: 14ch;
  }
  .u-collection__name .u-collection__dot { color: var(--_glow); }
  .u-collection__line {
    font-family: var(--font-serif); font-style: italic; color: var(--color-ultreia-paper);
    font-size: clamp(19px, 2.3vw, 30px); line-height: 1.2; margin: clamp(4px,1vw,10px) 0 0; max-width: 40ch;
  }
  .u-collection__rule { height: 1px; background: rgba(var(--cream-rgb, 246,241,231),.3); margin-top: clamp(14px, 2.4vw, 30px); max-width: 760px; }
  .u-collection__stats { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 60px); margin-top: clamp(8px,1.4vw,16px); }
  .u-collection__stats .u-stat__num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.7vw, 36px); line-height: 1; color: var(--color-ultreia-paper); }
  .u-collection__stats .u-stat__label { color: rgba(var(--cream-rgb, 246,241,231),.6); margin-top: 6px; }
  .u-collection__media .u-photo__center { color: rgba(var(--cream-rgb, 246,241,231),.5); }
  @media (max-width: 640px) {
    /* The desktop 560px floor + 86vh eats nearly the whole phone screen; shrink it. */
    .u-collection { min-height: clamp(380px, 62vh, 540px); }
    .u-collection__body { max-width: none; }
    .u-collection__coords { display: none; }
  }
/* END_SECTION:ultreia-collection-hero */

/* START_SECTION:ultreia-collection-teaser (INDEX:17) */
/* ----------------------------------------------------------------------------
     Collection teaser (.u-cteaser). Two color roles default to the brand urban
     tones; an instance overrides them via the inline style on the root. Dark photo
     with cream text, so foreground stays constant.
     ---------------------------------------------------------------------------- */
  .u-cteaser {
    --accent: var(--color-urbano, #837c74);                              /* themed accent */
    --_glow: color-mix(in srgb, var(--uc-highlight, #a8836e) 80%, #ffe9bf);  /* dot glow */
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 80vh;
    padding: clamp(40px, 6vw, 90px) 0 clamp(24px, 3vw, 44px);
    color: var(--color-ultreia-paper);
    font-family: var(--font-serif);
    cursor: pointer;
  }
  .u-cteaser *, .u-cteaser *::before, .u-cteaser *::after { box-sizing: border-box; }
  /* Whole-band link: covers the entire section above everything but the text block; the
     inner column passes its clicks through (below) so the whole band navigates. */
  .u-cteaser__overlay { position: absolute; inset: 0; z-index: 0; cursor: pointer; }
  .u-cteaser__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
  .u-cteaser__media .u-photo {
    width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto;
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 70%, #10131a), #0c0f14 82%);
  }
  .u-cteaser__media img { width: 100%; height: 100%; object-fit: cover; }
  /* Carousel slides: stacked and cross-faded by opacity (JS toggles .is-active).
     The image itself stays still — only the opacity transitions. */
  .u-cteaser__slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.2s ease;
    will-change: opacity;
  }
  /* First slide shows by default; once JS takes over, only .is-active shows. */
  .u-cteaser__slide:first-child { opacity: 1; }
  .u-cteaser__media[data-carousel-ready] .u-cteaser__slide { opacity: 0; }
  .u-cteaser__media[data-carousel-ready] .u-cteaser__slide.is-active { opacity: 1; }
  .u-cteaser__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to top, rgba(10,13,18,.86) 2%, rgba(10,13,18,.34) 52%, rgba(10,13,18,.16) 100%),
      linear-gradient(105deg, rgba(10,13,18,.62) 0%, rgba(10,13,18,.18) 46%, transparent 72%);
  }
  /* The inner column sits above the overlay; make it transparent to pointer events so the
     whole band navigates via the overlay. Only the CTA opts back in as its own link. */
  .u-cteaser__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; pointer-events: none; }
  .u-cteaser__body { margin-top: auto; display: grid; gap: clamp(10px, 1.3vw, 18px); max-width: 760px; }
  .u-cteaser__name {
    font-family: var(--font-serif); font-weight: 400; color: var(--color-ultreia-paper);
    font-size: clamp(48px, 7vw, 104px); line-height: .9; letter-spacing: -.02em; margin: 0;
  }
  .u-cteaser__dot { color: var(--_glow); }
  .u-cteaser__line {
    font-family: var(--font-serif); font-style: normal; color: rgba(var(--cream-rgb, 246,241,231),.85);
    font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; margin: 8px 0 0; max-width: 52ch; text-wrap: pretty;
  }
  .u-cteaser__stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 60px); margin-top: 4px; }
  .u-cteaser__stats .u-stat__num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; color: var(--color-ultreia-paper); }
  .u-cteaser__stats .u-stat__label { color: rgba(var(--cream-rgb, 246,241,231),.6); margin-top: 6px; }
  .u-cteaser__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
  .u-cteaser__cta {
    justify-self: start; display: inline-flex; align-items: center; gap: .7em; white-space: nowrap;
    margin-top: clamp(6px, 1vw, 12px);
    font-family: var(--font-mono); font-size: var(--text-label, 12px); letter-spacing: var(--tracking-label, .22em);
    text-transform: uppercase; text-decoration: none;
    padding: 14px 22px;
    background: var(--color-ultreia-gold); color: var(--color-ultreia-ink);
    border: 1px solid var(--color-ultreia-gold); border-radius: var(--radius-sm, 2px);
    pointer-events: auto;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1)), border-color .28s var(--ease, cubic-bezier(.2,.6,.2,1)), transform .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-cteaser__cta:hover { background: var(--color-gold-deep, #e6b23a); border-color: var(--color-gold-deep, #e6b23a); transform: translateY(-1px); }
  .u-cteaser__cta-arrow { transition: transform .28s var(--ease, cubic-bezier(.2,.6,.2,1)); }
  .u-cteaser__cta:hover .u-cteaser__cta-arrow { transform: translateX(4px); }
  .u-cteaser__meta {
    margin: clamp(8px, 1.2vw, 14px) 0 0;
    font-family: var(--font-mono); font-size: var(--text-meta, 12.5px); letter-spacing: .16em;
    text-transform: uppercase; color: rgba(var(--cream-rgb, 246,241,231), .5); line-height: 1.5;
  }
  @media (max-width: 640px) {
    /* The desktop 80vh eats nearly the whole phone screen; shrink it (mirrors the hero). */
    .u-cteaser { min-height: clamp(380px, 62vh, 540px); }
  }
  @media (max-width: 520px) {
    .u-cteaser__cta { width: 100%; justify-content: center; }
  }
/* END_SECTION:ultreia-collection-teaser */

/* START_SECTION:ultreia-community-routes (INDEX:18) */
/* Full-width band — side gutters / max-width come from the ultreia-container
     wrapper, matching every other ULTREIA section. Only the band background and
     vertical padding live here. */
  .u-routes {
    background: var(--ur-bg);
    color: var(--ur-text);
    padding-block: var(--ur-pad-y);
  }

  .u-routes__bg-lines { opacity: var(--ur-bg-lines-opacity); }
  .u-routes__bg-lines path {
    fill: none;
    stroke: var(--ur-bg-lines-color);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .u-routes__grid {
    grid-template-columns: repeat(var(--ur-cols), minmax(0, 1fr));
    gap: var(--ur-gap);
  }

  /* Slow image zoom toward the card-hover (the hover border lives in markup). */
  .u-route-card__img {
    transform: scale(1.04);
    transition: transform 1.1s ease;
  }
  .u-route-card:hover .u-route-card__img { transform: scale(1.08); }

  /* Header stack spacing (eyebrow / title / description).
     critical.css resets margins on p + h1–h6 with unlayered rules that beat
     Tailwind's layered margin utilities, so the gaps live here as plain CSS
     (also unlayered, more specific → wins) rather than as mt-*/mb-* classes. */
  .u-route-card__meta {
    margin-block-end: 0;
  }
  /* The title sits mid-stack (not :first/:last-child), so critical.css does NOT
     zero its default heading margins — those collapse with __meta above (eating
     the gap above the title) and stack on __desc below (too much gap below).
     Set both of the title's own margins explicitly so they're the single source
     of truth and nothing collapses. */
  .u-route-card__title {
    margin-block-start: 8px;
    margin-block-end: 0;
  }
  .u-route-card__desc {
    margin-block-start: 7px;
  }
  /* Real divider element so the space above and below is genuinely symmetric
     (a border-top mixed sibling margins from above and padding from below, which
     never matched). margin-block is the only spacing — same value both sides. */
  .u-route-card__divider {
    border: 0;
    border-block-start: 1px solid var(--ur-border);
    margin-block: 28px;
  }
  /* The divider above the elevation curve: keep the gap to the metrics above,
     but tighten the gap to the curve below it. */
  .u-route-card__divider--tight {
    margin-block-end: 12px;
  }

  /* Photo scrim — a soft darkening for legibility of overlaid badges. */
  .u-route-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, transparent 45%, rgba(0, 0, 0, .30) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 55%);
    pointer-events: none;
  }

  /* Elevation profile: the route line that draws itself in once the grid
     reveals (the shared reveal snippet sets .is-revealed on the grid). */
  /* Filled area under the ridge — same hue as the line, translucent. Fades in
     alongside the line draw on reveal. */
  .u-route-card__route-line .route-fill {
    fill: color-mix(in srgb, var(--route-line-color, var(--ur-line-color)) 16%, transparent);
    stroke: none;
    opacity: 0;
    transition: opacity 1s ease .45s;
  }
  .u-routes__grid.is-revealed .u-route-card__route-line .route-fill {
    opacity: 1;
  }
  .u-route-card__route-line .route-main {
    fill: none;
    stroke: var(--route-line-color, var(--ur-line-color));
    stroke-width: var(--route-line-width, 2);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    transition: stroke-dashoffset 1.2s ease .35s;
  }
  .u-routes__grid.is-revealed .u-route-card__route-line .route-main {
    stroke-dashoffset: 0;
  }

  @media (max-width: 1199px) {
    .u-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 1024px) {
    .u-routes { padding-block: var(--ur-pad-y-tb); }
  }

  @media (max-width: 767px) {
    .u-routes { padding-block: var(--ur-pad-y-mb); }
    .u-routes__grid { grid-template-columns: 1fr; }
    /* Swap the "current" sizes to their mobile values; the inline styles read
       these vars, so __media height + __content/__footer padding all follow. */
    .u-route-card {
      --ur-card-pad-cur: var(--ur-card-pad-mb);
      --ur-img-h-cur: var(--ur-img-h-mb);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .u-route-card__img,
    .u-route-card__route-line .route-main,
    .u-route-card__route-line .route-fill {
      transform: none;
      transition: none;
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }
/* END_SECTION:ultreia-community-routes */

/* START_SECTION:ultreia-footer (INDEX:19) */
/* ----------------------------------------------------------------------------
     Non-color tokens — scoped to the footer so it stands alone. The COLOR roles
     (--bar-bg / --bar-fg / --uc-highlight / --bar-line) are NOT set here: they
     come from the section's color settings as inline style vars, falling back to
     the brand cream/ink palette (--color-ultreia-* from Tailwind) below.
     ---------------------------------------------------------------------------- */
  .u-foot {
    /* --font-serif / --font-mono are theme-wide tokens (see css-variables.liquid). */
    --text-label: 12px;
    --tracking-label: 0.22em;

    --bw: 1px;
    --bw-2: 1.5px;
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --dur: 0.28s;

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px;

    /* Color roles — default to the brand cream/ink scheme. An instance can
       override any of these via the inline style on the <footer>. */
    --bar-bg: var(--color-ultreia-paper);
    --bar-fg: var(--color-ultreia-ink);
    --bar-line: var(--color-ultreia-line);
    /* highlight (top rule + marquee numbers) defaults to brand gold via fallback
       wherever it's used: var(--uc-highlight, var(--color-ultreia-gold)). */
  }

  /* ---- FOOTER -------------------------------------------------------------- */
  .u-foot {
    /* Stack the marquee band and the content container vertically. Declared
       explicitly so the theme's .shopify-section grid can't lay the footer's
       children out side by side. */
    display: flex;
    flex-direction: column;
    /* Reset the bare `footer { margin-top: 2rem }` the default footer section
       ships into the shared sections.css — it would otherwise apply here too. */
    margin: 0;
    background: var(--bar-bg);
    color: var(--bar-fg);
    position: relative;
    /* 3px highlight rule across the top (collection highlight → brand gold). */
    border-top: 3px solid var(--uc-highlight, var(--color-ultreia-gold));
    font-family: var(--font-serif);
  }
  .u-foot *,
  .u-foot *::before,
  .u-foot *::after { box-sizing: border-box; }
  .u-foot a { color: inherit; text-decoration: none; }

  .u-foot__inner {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1fr;
    gap: clamp(28px, 4.5vw, 84px);
    padding-block: clamp(56px, 8vw, 108px);
    align-items: start;
  }

  /* Brand block — logo over a two-line tagline */
  .u-foot__brand { display: flex; flex-direction: column; gap: var(--s6); max-width: 40ch; }
  .u-flogo { display: inline-flex; align-items: center; gap: 16px; color: var(--bar-fg); }
  .u-flogo__img { width: 250px; height: auto; display: block; }
  .u-foot__tag { font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: var(--bar-fg); margin: 0; }
  .u-foot__tag span { display: block; }

  /* Link columns */
  .u-foot__col { display: flex; flex-direction: column; }
  .u-foot__h {
    font-family: var(--font-mono); font-size: var(--text-label);
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--bar-fg); font-weight: 700;
    padding-bottom: 13px; margin: 0 0 16px;
    border-bottom: var(--bw) solid var(--bar-line);
    appearance: none; -webkit-appearance: none; background: none; border-top: 0;
    border-left: 0; border-right: 0; width: 100%; text-align: left; cursor: default;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
  }
  .u-foot__h-chev {
    width: 17px; height: 17px; flex: none; display: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--dur) var(--ease);
  }
  .u-foot__h:focus-visible { outline: var(--bw-2) solid var(--bar-fg); outline-offset: 3px; }
  /* The heading label is a real link (top-level menu item) in the menu-driven
     columns. It's interactive even where the surrounding row is not, and gets a
     subtle hover. The chevron sits in its own button (.u-foot__h-chevbtn). */
  a.u-foot__h-label { cursor: pointer; transition: opacity var(--dur) var(--ease); }
  a.u-foot__h-label:hover { opacity: 0.62; }
  a.u-foot__h-label:focus-visible { outline: var(--bw-2) solid var(--bar-fg); outline-offset: 3px; }
  /* Chevron toggle button — hidden on desktop (column is always open), shown at
     ≤600px where it controls the accordion. Bare button reset; the icon inside
     reuses .u-foot__h-chev. */
  .u-foot__h-chevbtn {
    appearance: none; -webkit-appearance: none; background: none; border: 0;
    padding: 0; margin: 0; flex: none; display: none; cursor: pointer;
    color: inherit; align-items: center; justify-content: center;
  }
  .u-foot__h-chevbtn:focus-visible { outline: var(--bw-2) solid var(--bar-fg); outline-offset: 3px; }
  .u-foot__colbody { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.32s var(--ease); }
  .u-foot__colbody > .u-foot__links { overflow: hidden; min-height: 0; }
  .u-foot__links { display: flex; flex-direction: column; gap: 13px; }
  .u-foot a.u-foot__link {
    font-family: var(--font-serif); font-size: 15.5px; line-height: 1.2;
    color: var(--bar-fg); width: fit-content;
    transition: color var(--dur) var(--ease); opacity: 0.86;
  }
  .u-foot a.u-foot__link:hover { color: var(--bar-fg); opacity: 1; }

  /* ---- DESTINATIONS MARQUEE ------------------------------------------------ */
  .u-foot__marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .u-foot__marquee--top    { border-bottom: var(--bw) solid var(--bar-line); padding-block: 15px; }
  .u-foot__marquee--bottom { border-top: var(--bw) solid var(--bar-line); padding-block: 15px; }
  .u-foot:has(.u-foot__marquee--bottom) .u-foot__inner { padding-bottom: clamp(30px, 4vw, 52px); }

  .u-foot__marquee-track {
    display: inline-flex; align-items: center; white-space: nowrap;
    will-change: transform; animation: u-marquee var(--marquee-dur, 58s) linear infinite;
  }
  .u-foot__marquee:hover .u-foot__marquee-track { animation-play-state: paused; }
  @keyframes u-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .u-foot__marquee-track { animation: none; } }

  .u-foot__dst {
    display: inline-flex; align-items: baseline; flex: none; gap: 11px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .u-foot__dst-n    { color: var(--uc-highlight, var(--color-ultreia-gold)); font-weight: 700; }
  .u-foot__dst-name { color: var(--bar-fg); }
  .u-foot__dst-tag  { font-style: normal; font-size: 10px; letter-spacing: 0.2em; color: color-mix(in srgb, var(--bar-fg) 52%, transparent); }
  .u-foot__sep { display: inline-flex; align-items: center; flex: none; margin: 0 24px; color: var(--bar-fg); opacity: 0.34; }
  .u-foot__sep svg { width: 17px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  @media (max-width: 1000px) {
    .u-foot__inner { grid-template-columns: 1fr 1fr 1fr; row-gap: clamp(40px, 6vw, 64px); }
    .u-foot__brand { grid-column: 1 / -1; max-width: none; }
  }
  /* 600px: shared mobile breakpoint (also the container's, in ultreia-container).
     If you change it, update the matchMedia('(max-width: 600px)') in the
     javascript block below — they must stay in sync. */
  @media (max-width: 600px) {
    .u-foot__inner { grid-template-columns: 1fr; row-gap: 0; }
    .u-foot__brand { margin-bottom: clamp(40px, 9vw, 56px); }
    .u-foot__h { margin-bottom: 0; padding-top: 20px; }
    /* Manual columns: the whole heading button toggles. Menu columns: only the
       chevron button toggles (the title is a link), so don't make the row a
       pointer there. */
    button.u-foot__h { cursor: pointer; }
    .u-foot__h-chev { display: block; }
    .u-foot__h-chevbtn { display: inline-flex; }
    .u-foot__colbody { padding-top: 0; }
    .u-foot__colbody > .u-foot__links { padding-block: 0; }
    .u-foot__colbody > .u-foot__links > .u-foot__link:first-child { margin-top: 18px; }
    .u-foot__colbody > .u-foot__links > .u-foot__link:last-child { margin-bottom: 4px; }
    .u-foot__col[data-open="false"] .u-foot__colbody { grid-template-rows: 0fr; }
    .u-foot__col[data-open="false"] .u-foot__h-chev { transform: rotate(-90deg); }
  }
/* END_SECTION:ultreia-footer */

/* START_SECTION:ultreia-header (INDEX:20) */
/* ----------------------------------------------------------------------------
     Top bar (.u-bar). Color roles default to the brand cream/ink scheme; an
     instance overrides --bar-bg / --bar-fg / --bar-line via the inline style on
     the <header> (and the same values pass to the nav drawer).
     ---------------------------------------------------------------------------- */
  .u-bar {
    --bar-bg:   var(--color-ultreia-paper);
    --bar-fg:   var(--color-ultreia-ink);
    --bar-line: var(--color-ultreia-line);
    background: var(--bar-bg); color: var(--bar-fg);
    font-family: var(--font-serif);
    /* Soft hairline shadow so the bar separates from a section directly below
       that shares its background colour. */
    box-shadow: 0 1px 6px rgba(26, 26, 26, .08);
  }
  .u-bar *, .u-bar *::before, .u-bar *::after { box-sizing: border-box; }

  /* ----------------------------------------------------------------------------
     Transparent (overlay) variant — floats over the first section and morphs into
     the solid cream bar *as you scroll*, not at a single threshold. JS publishes a
     0→1 `--scroll-p` (0 at the very top, 1 once scrolled through the first stretch)
     and every visual here is interpolated off it:
       p=0  transparent bg · white text · big, dropped logo · full scrim
       p=1  cream bg · ink text · normal logo · no scrim
     `--p` is the eased progress; `--inv` is its complement (1 - p). The "Tienda"
     mega-panel keeps its own solid scheme.
     ---------------------------------------------------------------------------- */
  .u-bar.u-bar--transparent {
    --scroll-p: 0;                 /* raw 0→1 from JS */
    /* Ease the raw progress (easeOutQuint-ish) for a non-linear feel. */
    --p: var(--scroll-p);
    --inv: calc(1 - var(--p));
    /* Interpolated foreground: white (p=0) → ink (p=1). */
    --fg-now: color-mix(in srgb, var(--color-ultreia-ink) calc(var(--p) * 100%), #fff);
    --bar-bg: transparent;
    --bar-fg: var(--fg-now);
    --bar-line: color-mix(in srgb, var(--fg-now) 28%, transparent);
    /* Background fades cream in as p rises. */
    background: color-mix(in srgb, var(--color-ultreia-paper) calc(var(--p) * 100%), transparent);
    color: var(--fg-now);
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--color-ultreia-line) calc(var(--p) * 100%), transparent);
    /* No shadow while floating over the hero (p=0); fades in with the cream as
       the bar turns solid (p→1). */
    box-shadow: 0 1px 6px rgba(26, 26, 26, calc(.08 * var(--p)));
  }
  /* Children read the interpolated foreground directly (an inline --bar-fg from
     saved color settings would otherwise beat the class-level variable). */
  .u-bar.u-bar--transparent .u-navlink,
  .u-bar.u-bar--transparent .u-bar__caret,
  .u-bar.u-bar--transparent .u-iconbtn,
  .u-bar.u-bar--transparent .u-bag,
  .u-bar.u-bar--transparent .u-bar__logo { color: var(--fg-now); }
  /* Hover still tints the wordmark gold over the hero (this beats the --fg-now pin). */
  .u-bar.u-bar--transparent .u-bar__logo:hover,
  .u-bar.u-bar--transparent .u-bar__logo:focus-visible { color: var(--color-ultreia-accent, var(--color-accent, #e0a32e)); }
  .u-bar.u-bar--transparent .u-bag { border-color: var(--fg-now); }

  /* Oversized logo at the top, shrinking/rising back into the bar as p→1. Anchored
     from its top so it scales downward over the hero. Driven purely by --inv, so
     the motion tracks the scroll position frame-for-frame. */
  .u-bar.u-bar--transparent .u-bar__logo {
    --logo-drop: clamp(54px, 9vw, 116px);   /* extra Y offset at p=0 */
    --logo-grow: 1.6;                        /* extra scale at p=0 (→ 2.6×) */
    transform-origin: top center;
    transform: translateY(calc(var(--logo-drop) * var(--inv))) scale(calc(1 + var(--logo-grow) * var(--inv)));
    will-change: transform;
  }

  /* Scrim over the hero, fading out as p→1. */
  .u-bar--transparent::before {
    content: ""; position: absolute; inset: 0; bottom: auto; height: 160%;
    z-index: -1; pointer-events: none; opacity: var(--inv);
    background: linear-gradient(to bottom, rgba(10,13,18,.55) 0%, rgba(10,13,18,.22) 55%, transparent 100%);
  }

  /* Hover/badge swaps interpolate with the bar too, so they read correctly at any
     progress: the "active" tone is the current foreground, its contrast is the
     current background mixed up from the hero dark. */
  .u-bar.u-bar--transparent .u-bag:hover { background: var(--fg-now); color: color-mix(in srgb, var(--color-ultreia-ink) calc(var(--inv) * 100%), var(--color-ultreia-paper)); }
  .u-bar.u-bar--transparent .u-iconbtn:hover { background: color-mix(in srgb, var(--fg-now) 16%, transparent); }
  .u-bar.u-bar--transparent .u-iconbtn__count,
  .u-bar.u-bar--transparent .u-bag__count { background: var(--fg-now); color: color-mix(in srgb, var(--color-ultreia-ink) calc(var(--inv) * 100%), var(--color-ultreia-paper)); border-color: var(--fg-now); }

  @media (prefers-reduced-motion: reduce) {
    .u-bar.u-bar--transparent .u-bar__logo { transform: none; }
  }
  .u-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s5, 24px); min-height: var(--site-bar-h, 80px); }
  .u-bar__left, .u-bar__right { flex: 1 1 0; display: flex; align-items: center; gap: var(--s5, 24px); }
  .u-bar__right { justify-content: flex-end; }
  .u-bar__center { flex: none; display: flex; align-items: center; }
  .u-bar__nav { display: flex; align-items: center; gap: var(--s6, 32px); }
  .u-bar__nav--right { justify-content: flex-end; }

  /* Brand: the full ULTREIA wordmark SVG (shared snippet, same as the footer),
     sized for the bar and tinted with the bar foreground via currentColor. */
  .u-bar__logo {
    display: inline-flex; align-items: center; color: var(--bar-fg); line-height: 0;
    transition: color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  /* The wordmark fills with currentColor, so tinting the link tints the SVG.
     Hovering swaps the ink for the brand gold. */
  .u-bar__logo:hover,
  .u-bar__logo:focus-visible { color: var(--color-ultreia-accent, var(--color-accent, #e0a32e)); }
  .u-bar__logo:focus-visible { outline: none; }
  .u-bar__logo .u-flogo__img {
    width: clamp(96px, 10vw, 124px); height: auto; display: block;
    transition: color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  @media (prefers-reduced-motion: reduce) {
    .u-bar__logo, .u-bar__logo .u-flogo__img { transition: none; }
  }

  .u-navlink {
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px); letter-spacing: var(--tracking-label, .22em); text-transform: uppercase;
    color: var(--bar-fg); display: inline-flex; align-items: center; gap: .4em; padding-block: 6px;
    position: relative; white-space: nowrap; flex: none; text-decoration: none;
  }
  .u-navlink::before { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .28s var(--ease, cubic-bezier(.2,.6,.2,1)); }
  .u-navlink:hover::before { right: 0; }
  /* Current page: keep the underline permanently extended (matches the hover end
     state) so the active top-level item reads as selected. */
  .u-navlink.is-current::before { right: 0; }
  .u-navlink.is-current { font-weight: 600; }
  .u-bar__sep { width: 1px; height: 18px; background: var(--bar-line); flex: none; }

  button.u-navlink { appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; }
  .u-bar__navitem { position: relative; align-self: stretch; display: flex; align-items: center; gap: .2em; }
  .u-bar__navtitle { gap: 0; }
  .u-bar__caret {
    appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bar-fg); padding: 6px 2px; line-height: 1;
  }
  .u-bar__caret::after { content: "▾"; font-size: .75em; opacity: .6; display: inline-block; transition: transform .28s var(--ease, cubic-bezier(.2,.6,.2,1)); }
  .u-bar__caret:focus-visible { outline: 1.5px solid var(--bar-fg); outline-offset: 1px; border-radius: var(--radius-sm, 2px); }
  .u-bar__navitem.is-open .u-bar__caret::after { transform: rotate(180deg); }
  .u-bar__menu {
    position: absolute; top: 100%; left: 0; z-index: 60;
    min-width: 236px; padding: var(--s2, 8px) 0;
    background: var(--bar-bg); color: var(--bar-fg);
    border: 1px solid var(--bar-line); border-radius: var(--radius-md, 4px);
    box-shadow: var(--shadow-pop, 0 12px 40px -12px rgba(26,26,26,.32));
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .28s var(--ease, cubic-bezier(.2,.6,.2,1)), transform .28s var(--ease, cubic-bezier(.2,.6,.2,1)), visibility .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-bar__navitem.is-open > .u-bar__menu { opacity: 1; visibility: visible; transform: translateY(0); }
  /* In transparent mode the bar's own bg/fg are transparent/cream — keep the open
     dropdown panels on the solid brand scheme so they stay legible. */
  .u-bar--transparent .u-bar__menu {
    background: var(--color-ultreia-paper); color: var(--color-ultreia-ink);
    border-color: var(--color-ultreia-line);
  }
  .u-bar--transparent .u-bar__menulink { color: color-mix(in srgb, var(--color-ultreia-ink) 84%, transparent); }
  .u-bar--transparent .u-bar__menulink:hover { background: color-mix(in srgb, var(--color-ultreia-ink) 8%, transparent); color: var(--color-ultreia-ink); }
  .u-bar--transparent .u-bar__menulink.is-current {
    background: color-mix(in srgb, var(--color-ultreia-ink) 6%, transparent);
    color: var(--color-ultreia-ink);
  }
  .u-bar__menulink {
    display: block; padding: 10px var(--s4, 16px);
    font-family: var(--font-serif); font-size: 15.5px; line-height: 1.25;
    color: color-mix(in srgb, var(--bar-fg) 84%, transparent); white-space: nowrap; text-decoration: none;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1)), color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-bar__menulink:hover { background: color-mix(in srgb, var(--bar-fg) 8%, transparent); color: var(--bar-fg); }
  /* Current page within a dropdown — held tint + full-strength text + accent rule. */
  .u-bar__menulink.is-current {
    background: color-mix(in srgb, var(--bar-fg) 6%, transparent);
    color: var(--bar-fg); font-weight: 600;
    box-shadow: inset 2px 0 0 var(--color-ultreia-accent, var(--color-accent, #e0a32e));
  }
  .u-bar__menulink:focus-visible { outline: 1.5px solid var(--bar-fg); outline-offset: -3px; }
  @media (prefers-reduced-motion: reduce) { .u-bar__menu { transition: none; } }

  /* ----------------------------------------------------------------------------
     "Tienda" mega-panel — a contained card of biome-style collection tiles.
     Dropped under the trigger as a self-sized card (not a full-bleed bar); width
     is driven by the tile row so it hugs its contents. Shares the [data-haschild]
     open/close JS via .is-open.
     ---------------------------------------------------------------------------- */
  .u-bar__mega {
    position: absolute; top: 100%; left: 0; z-index: 55;
    margin-top: clamp(8px, 1vw, 14px);
    padding: clamp(6px, .8vw, 10px);
    /* Always the brand cream/ink scheme, independent of the header's overrides. */
    background: var(--color-ultreia-paper); color: var(--color-ultreia-ink);
    border: 1px solid var(--color-ultreia-line);
    box-shadow: var(--shadow-pop, 0 24px 48px -20px rgba(26,26,26,.4));
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .28s var(--ease, cubic-bezier(.2,.6,.2,1)), transform .28s var(--ease, cubic-bezier(.2,.6,.2,1)), visibility .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-bar__navitem--mega.is-open > .u-bar__mega { opacity: 1; visibility: visible; transform: translateY(0); }

  /* Hover bridge — fills the dead strip between the trigger and the fixed panel so
     the pointer never crosses a gap (which would fire pointerleave and close it).
     Only live while the item is open, so it can't block clicks when collapsed. */
  .u-bar__navitem--mega::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%;
    /* Tall enough to span from the navitem's bottom (which sits above the bar's
       bottom edge, since .u-bar__left is align-items:center) down past the panel's
       top: a safe upper bound is half the bar height + the panel's translateY. */
    height: calc(var(--site-bar-h, 80px) / 2 + 12px); z-index: 54; pointer-events: none;
  }
  .u-bar__navitem--mega.is-open::after { pointer-events: auto; }

  /* Self-sized inside the card: each tile gets a fixed track so the panel hugs
     its contents instead of stretching across the bar. */
  .u-bar__tiles {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-auto-flow: column;
    grid-auto-columns: clamp(170px, 15vw, 240px);
    gap: 0;
  }
  .u-bar__tilecell { display: flex; min-width: 0; }
  .u-bar__tile {
    position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
    overflow: hidden; text-decoration: none; isolation: isolate;
    background: var(--color-ultreia-ink, #1a1a1a);
  }
  .u-bar__tilemedia, .u-bar__tileshade { position: absolute; inset: 0; z-index: 0; }
  .u-bar__tilemedia {
    background-position: center; background-size: cover; background-repeat: no-repeat;
    transform: scale(1); transition: transform .5s var(--ease, ease); will-change: transform;
  }
  .u-bar__tile:hover .u-bar__tilemedia, .u-bar__tile:focus-visible .u-bar__tilemedia { transform: scale(1.06); }
  .u-bar__tileshade {
    background:
      linear-gradient(to top, rgba(20,22,24,.88) 0%, rgba(20,22,24,.6) 38%, rgba(20,22,24,.32) 72%, rgba(20,22,24,.3) 100%),
      rgba(20,22,24,.22);
  }
  .u-bar__tile--solid .u-bar__tileshade { background: rgba(20,22,24,.38); }
  .u-bar__tilebody {
    position: absolute; inset: auto 0 0 0; z-index: 1;
    display: grid; gap: 4px; padding: clamp(16px, 1.6vw, 28px); color: #fff;
  }
  .u-bar__tilenum {
    font-family: var(--font-serif, serif); font-size: clamp(26px, 2.6vw, 42px); line-height: .9;
    color: var(--color-ultreia-accent, var(--color-accent, #e0a32e));
  }
  .u-bar__tilename {
    font-family: var(--font-serif, serif);
    font-size: 18px; letter-spacing: var(--tracking-tight, .02em);
    text-transform: lowercase; color: #fff;
  }
  .u-bar__tilecount {
    font-family: var(--font-mono, monospace); font-size: var(--text-label-sm, 11px);
    letter-spacing: var(--tracking-tight, .08em); text-transform: uppercase; color: rgba(255,255,255,.72);
  }
  .u-bar__tile:focus-visible { outline: 1.5px solid #fff; outline-offset: -3px; }
  @media (prefers-reduced-motion: reduce) {
    .u-bar__mega { transition: none; }
    .u-bar__tilemedia { transition: none; }
    .u-bar__tile:hover .u-bar__tilemedia, .u-bar__tile:focus-visible .u-bar__tilemedia { transform: none; }
  }

  .u-bar__actions { display: flex; align-items: center; gap: var(--s2, 8px); justify-content: flex-end; }
  .u-bar__actions .u-navlink { margin-right: var(--s2, 8px); }

  .u-iconbtn {
    --iconbtn-sz: 38px;
    width: var(--iconbtn-sz); height: var(--iconbtn-sz); flex: none;
    display: inline-grid; place-items: center; position: relative;
    border: 0; background: transparent; color: var(--bar-fg);
    border-radius: var(--radius-sm, 2px); cursor: pointer; text-decoration: none;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1)), color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-iconbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .u-iconbtn:hover { background: color-mix(in srgb, var(--bar-fg) 13%, transparent); }
  .u-iconbtn:focus-visible { outline: 1.5px solid var(--bar-fg); outline-offset: 1px; }

  /* Count badge (favoritos) — mirrors the bag count, pinned to the icon corner. */
  .u-iconbtn--badged { overflow: visible; }
  .u-iconbtn__count {
    position: absolute; top: 1px; right: 1px;
    min-width: 16px; height: 16px; padding: 0 3px;
    display: grid; place-items: center;
    background: var(--bar-fg); color: var(--bar-bg);
    border: 1.5px solid var(--bar-bg); border-radius: var(--radius-pill, 999px);
    font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0; line-height: 1;
    pointer-events: none;
  }
  .u-iconbtn__count[data-count="0"] { display: none; }

  .u-bag {
    display: inline-flex; align-items: center; gap: .72em; flex: none;
    height: 40px; padding: 0 18px 0 13px;
    border: 1px solid var(--bar-fg); border-radius: var(--radius-pill, 999px);
    background: transparent; color: var(--bar-fg); cursor: pointer; text-decoration: none;
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px); letter-spacing: .1em; text-transform: uppercase; line-height: 1;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1)), color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-bag__ic { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; }
  .u-bag svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .u-bag__label { display: inline-flex; align-items: center; line-height: 1; }
  .u-bag__count {
    position: absolute; top: -5px; right: -6px;
    min-width: 17px; height: 17px; padding: 0 3px;
    display: grid; place-items: center;
    background: var(--bar-fg); color: var(--bar-bg);
    border: 1.5px solid var(--bar-bg); border-radius: var(--radius-pill, 999px);
    font-size: 9px; font-weight: 700; letter-spacing: 0; line-height: 1;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1)), color .28s var(--ease, cubic-bezier(.2,.6,.2,1)), border-color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-bag__count[data-count="0"] { display: none; }
  .u-bag:hover { background: var(--bar-fg); color: var(--bar-bg); }
  .u-bag:hover .u-bag__count { background: var(--bar-bg); color: var(--bar-fg); border-color: var(--bar-fg); }
  .u-bag:focus-visible { outline: 1.5px solid var(--bar-fg); outline-offset: 2px; }
  /* Transparent mode: --bar-bg is transparent, so the bag's hover (fill with fg,
     text becomes bg) would render invisible text. Pin hover to solid ink-on-cream
     and pin the count/badge swap to real colors. */
  .u-bar--transparent .u-bag:hover { background: #fff; color: var(--color-ultreia-ink); }
  .u-bar--transparent .u-bag:hover .u-bag__count { background: var(--color-ultreia-ink); color: #fff; border-color: #fff; }
  .u-bar--transparent .u-iconbtn:hover { background: color-mix(in srgb, #fff 16%, transparent); }
  .u-bar--transparent .u-iconbtn__count,
  .u-bar--transparent .u-bag__count { background: #fff; color: var(--color-ultreia-ink); border-color: #fff; }

  .u-bar__burger { display: none; }
  .u-bar__burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .u-bar__actions .u-iconbtn, .u-bar__actions .u-bag { flex: none; }

  @media (max-width: 1040px) {
    .u-bar__actions .u-navlink, .u-bar__sep { display: none; }
  }
  @media (max-width: 680px) {
    .u-bar__nav:not(.u-bar__nav--right) { display: none; }
    .u-bar__burger { display: inline-grid; }
    /* Hide the account/favoritos icons on mobile (still reachable in the nav
       drawer), but KEEP search — it's the single search entry point on every
       screen now that the nav drawer no longer carries its own field. */
    .u-bar__actions .u-iconbtn:not(.u-bar__search) { display: none; }
    .u-bag {
      border: 0; border-radius: var(--radius-sm, 2px);
      width: 38px; height: 38px; padding: 0; gap: 0; justify-content: center;
    }
    .u-bag svg { width: 19px; height: 19px; }
    .u-bag__label { display: none; }
    .u-bag:hover { background: color-mix(in srgb, var(--bar-fg) 13%, transparent); color: var(--bar-fg); }
    .u-bag:hover .u-bag__count { background: var(--bar-fg); color: var(--bar-bg); border-color: var(--bar-bg); }
    .u-bar__burger { margin-left: calc((38px - 19px) / -2); }
    .u-bag { margin-right: calc((38px - 19px) / -2); }
  }
/* END_SECTION:ultreia-header */

/* START_SECTION:ultreia-main-page-hero (INDEX:21) */
/* ----------------------------------------------------------------------------
     Main page hero (.u-mphero). Two color roles default to the brand tones; an
     instance overrides them via the inline style on the root. Dark photo with
     cream text, so foreground stays constant. Full viewport height.
     ---------------------------------------------------------------------------- */
  .u-mphero {
    --accent: var(--color-montana, #735f3c);                            /* photo tint + box */
    --_glow: var(--uc-highlight, #c49a6c);  /* on-photo accent: the accented clause, eyebrow fill */
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100svh;
    padding: clamp(26px, 4vw, 60px) 0;
    color: var(--color-ultreia-paper);
    font-family: var(--font-serif);
  }
  .u-mphero *, .u-mphero *::before, .u-mphero *::after { box-sizing: border-box; }
  .u-mphero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
  .u-mphero__media .u-photo {
    width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto;
    background:
      linear-gradient(150deg, color-mix(in srgb, var(--accent) 70%, #10131a), #0c0f14 82%),
      repeating-linear-gradient(135deg, transparent 0 15px, rgba(0,0,0,.12) 15px 16px);
  }
  .u-mphero__media img { width: 100%; height: 100%; object-fit: cover; }
  /* Carousel slides: stacked and cross-faded by opacity (JS toggles .is-active).
     The image itself stays still — only the opacity transitions. */
  .u-mphero__slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.2s ease;
    will-change: opacity;
  }
  /* First slide shows by default; once JS takes over, only .is-active shows. */
  .u-mphero__slide:first-child { opacity: 1; }
  .u-mphero__media[data-carousel-ready] .u-mphero__slide { opacity: 0; }
  .u-mphero__media[data-carousel-ready] .u-mphero__slide.is-active { opacity: 1; }
  .u-mphero__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to top, rgba(10,13,18,.82) 0%, rgba(10,13,18,.34) 46%, transparent 78%),
      linear-gradient(105deg, rgba(10,13,18,.62) 0%, rgba(10,13,18,.18) 46%, transparent 72%);
  }
  .u-mphero__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
  .u-mphero__body { position: relative; z-index: 1; margin-top: auto; display: grid; gap: clamp(14px, 2vw, 28px); }
  .u-mphero .u-mphero__eyebrow { display: block; color: #d4a843; font-weight: 700; text-shadow: 0 1px 12px rgba(10,13,18,.55); }
  .u-mphero__title {
    font-family: var(--font-serif); font-weight: 400; color: var(--color-ultreia-paper);
    font-size: clamp(24px, 3.4vw, 54px); line-height: .96; letter-spacing: -.02em; margin: 0;
    text-transform: uppercase;
  }
  .u-mphero__title-main { display: block; }
  .u-mphero__title-accent { display: block; color: #d4a843; font-style: italic; }
  .u-mphero__divider { height: 1px; background: rgba(var(--cream-rgb, 246,241,231), .5); width: 100%; }
  .u-mphero__meta {
    margin: 0;
    font-family: var(--font-mono); font-size: var(--text-meta, 12.5px); letter-spacing: .16em;
    text-transform: uppercase; color: rgba(var(--cream-rgb, 246,241,231), .72); line-height: 1.6;
  }
  @media (max-width: 640px) {
    .u-mphero { min-height: 100vh; min-height: 100svh; }
  }
/* END_SECTION:ultreia-main-page-hero */

/* START_SECTION:ultreia-newsletter (INDEX:22) */
/* ----------------------------------------------------------------------------
     Newsletter (.u-news). Centered signup band. Color roles default to a dark ink
     scheme; an instance overrides any of them via the inline style on the root.
     Non-color tokens come from the shared design tokens.
     ---------------------------------------------------------------------------- */
  .u-news {
    --_bg:        var(--color-ultreia-ink, #1a1a1a);
    --_head:      var(--color-ultreia-paper, #f6f1e7);
    --accent:     var(--color-ultreia-gold, #d9a93a);
    --_lead:      color-mix(in srgb, var(--color-ultreia-paper, #f6f1e7) 64%, transparent);
    --_field:     color-mix(in srgb, var(--color-ultreia-paper, #f6f1e7) 8%, transparent);
    --_field-fg:  var(--color-ultreia-paper, #f6f1e7);
    background: var(--_bg);
    padding: clamp(48px, 6vw, 88px) 0;
    font-family: var(--font-serif);
  }
  .u-news *, .u-news *::before, .u-news *::after { box-sizing: border-box; }

  .u-news__inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: clamp(16px, 2.2vw, 28px);
    max-width: 980px; margin-inline: auto;
  }

  .u-news__eyebrow { display: block; }
  .u-news__eyebrow .u-eyebrow { margin: 0; }

  .u-news__title {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(34px, 5vw, 64px); line-height: 1.05; letter-spacing: -.02em;
    margin: 0; color: var(--_head); text-wrap: balance;
  }
  .u-news__title em { font-weight: 400; font-style: italic; color: var(--accent); }

  .u-news__lead {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(15px, 1.3vw, 19px); line-height: 1.5;
    color: var(--_lead); margin: 0; max-width: 62ch; text-wrap: pretty;
  }

  /* Form: full-width within the inner column, capped so the field row stays a
     comfortable single-line measure on desktop. */
  .u-news__form { width: 100%; max-width: 720px; margin: clamp(6px, 1vw, 14px) auto 0; }

  .u-news__row {
    display: flex; align-items: stretch;
    background: var(--_field);
    border-radius: var(--radius-sm, 2px);
    overflow: hidden;
  }

  .u-news__input {
    flex: 1 1 auto; min-width: 0;
    appearance: none; -webkit-appearance: none;
    background: transparent; border: 0; outline: 0;
    color: var(--_field-fg);
    font-family: var(--font-mono);
    font-size: var(--text-label, 12px);
    letter-spacing: var(--tracking-label, .22em);
    text-transform: uppercase;
    padding: 20px 24px;
  }
  .u-news__input::placeholder {
    color: color-mix(in srgb, var(--_field-fg) 45%, transparent);
    font-style: italic; text-transform: none; letter-spacing: normal;
    font-family: var(--font-mono);
  }
  .u-news__input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }

  .u-news__submit {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--text-label, 12px);
    letter-spacing: var(--tracking-label, .22em);
    text-transform: uppercase;
    padding: 14px clamp(22px, 3vw, 40px);
    background: var(--cta-bg, var(--accent));
    color: var(--cta-fg, var(--color-ultreia-paper, #f6f1e7));
    border: 0; cursor: pointer;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1)), filter .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-news__submit:hover { filter: brightness(1.08); }

  .u-news__meta {
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-label, .22em); text-transform: uppercase;
    color: color-mix(in srgb, var(--_lead) 80%, transparent); margin: 0;
  }

  .u-news__success {
    font-family: var(--font-mono); font-size: var(--text-label, 12px);
    letter-spacing: var(--tracking-label, .22em); text-transform: uppercase;
    color: var(--accent); margin: 0;
  }
  .u-news__error {
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-label, .22em); text-transform: uppercase;
    color: #e0654f; margin: 0 0 12px;
  }

  .u-news__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;
  }

  @media (max-width: 600px) {
    .u-news__lead { max-width: 46ch; }
    .u-news__row { flex-direction: column; }
    .u-news__input { text-align: center; padding: 18px 20px; }
    .u-news__submit { padding: 16px 22px; }
  }
/* END_SECTION:ultreia-newsletter */

/* START_SECTION:ultreia-product-grid (INDEX:23) */
.u-pgrid { padding: clamp(32px, 5vw, 48px) 0; }
  .u-pgrid[aria-busy="true"] [data-grid-region] { opacity: .5; transition: opacity .15s; }

  /* Two-column shell: sidebar rail + product content. */
  .u-pgrid__layout {
    display: grid;
    grid-template-columns: minmax(240px, 310px) 1fr;
    gap: clamp(12px, 1.6vw, 24px);
    align-items: start;
  }
  .u-pgrid__layout--nofilters { grid-template-columns: 1fr; }
  .u-pgrid__content { min-width: 0; }
  .u-pgrid__sidebar { position: static; }
  .u-pgrid__sidebar-head { display: none; }

  /* Mobile "Filtros" toggle — hidden on desktop where the rail is always shown. */
  .u-pgrid__filter-toggle {
    display: none;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-label, 12px);
    letter-spacing: var(--tracking-label, .12em);
    text-transform: uppercase;
    padding: 10px 16px;
    border: var(--bw, 1px) solid var(--filters-border, var(--color-line-strong, #c9c1b0));
    border-radius: var(--radius-sm, 2px);
    background: var(--filters-surface, var(--color-paper, #fff));
    color: var(--filters-item, var(--color-ink, #1a1a1a));
    cursor: pointer;
  }

  @media (max-width: 900px) {
    .u-pgrid__layout { grid-template-columns: 1fr; }
    .u-pgrid__filter-toggle { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }

    /* Off-canvas rail */
    .u-pgrid__sidebar {
      position: fixed; inset: 0 auto 0 0; z-index: 60;
      width: min(86vw, 340px); top: 0;
      background: var(--filters-surface, var(--uc-surface, var(--color-paper, #faf9f4)));
      padding: 20px; overflow-y: auto;
      transform: translateX(-100%);
      transition: transform var(--dur, .28s) var(--ease, ease);
      box-shadow: var(--shadow-pop, 0 12px 40px -12px rgba(26,26,26,.32));
    }
    .u-pgrid.is-filters-open .u-pgrid__sidebar { transform: none; }
    .u-pgrid.is-filters-open::before {
      content: ""; position: fixed; inset: 0; z-index: 55;
      background: rgba(26,26,26,.4);
    }
    .u-pgrid__sidebar-head {
      display: flex; align-items: center; justify-content: flex-end;
      margin-bottom: 16px;
    }
    .u-pgrid__sidebar-title {
      margin: 0; font-family: var(--font-mono, monospace); font-weight: 700;
      font-size: var(--text-label, 12px); letter-spacing: var(--tracking-label, .12em);
      text-transform: uppercase; color: var(--color-ink, #1a1a1a);
    }
    /* Match the nav drawer's close button: a square icon button with a soft
       background on hover, instead of a bare × glyph. */
    .u-pgrid__sidebar-close {
      width: 38px; height: 38px; flex: none; padding: 0;
      display: inline-grid; place-items: center;
      border: 0; background: transparent; cursor: pointer;
      font-size: 24px; line-height: 1;
      color: var(--filters-title, var(--color-ink, #1a1a1a));
      border-radius: var(--radius-sm, 2px);
      margin-right: calc((38px - 24px) / -2);
      transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1));
    }
    .u-pgrid__sidebar-close:hover {
      background: color-mix(in srgb, var(--filters-title, var(--color-ink, #1a1a1a)) 13%, transparent);
    }
    /* In the drawer the rail is already a panel (.u-pgrid__sidebar supplies the
       surface + padding), so drop the filters' own card chrome — otherwise it
       reads as a bordered box nested inside the drawer. */
    .u-pgrid__sidebar .u-filters {
      background: none; border: 0; padding: 0;
    }
  }

  .u-pgrid__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--pgrid-cols, 3), 1fr);
    gap: clamp(12px, 1.4vw, 20px);
  }
  @media (max-width: 900px) {
    .u-pgrid__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .u-pgrid__grid { grid-template-columns: 1fr; }
  }
  .u-pgrid__card { display: flex; }
  .u-pgrid__card > * { width: 100%; height: 100%; }
  .u-pgrid__more { margin-top: 2rem; text-align: center; }
  /* Standalone "view collection" CTA — always present below the grid. */
  .u-pgrid__cta { margin-top: 2rem; text-align: center; }
  /* Renders as .u-btn--ghost: transparent/outlined at rest. On hover, fill with
     the section's configured loadmore color (--cta-bg/-fg) rather than the
     ghost default ink/paper. */
  .u-btn.u-pgrid__more-btn:hover {
    --_bg: var(--cta-bg, var(--color-ultreia-ink));
    --_fg: var(--cta-fg, var(--color-ultreia-paper));
  }
  .u-pgrid__more-btn[aria-busy="true"] { opacity: .6; cursor: default; }
/* END_SECTION:ultreia-product-grid */

/* START_SECTION:ultreia-product-recommended-category (INDEX:24) */
.u-pcat { padding: clamp(32px, 5vw, 64px) 0; }
  .u-pcat--empty { display: none; }

  .u-pcat__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--pcat-cols, 4), 1fr);
    gap: clamp(12px, 1.4vw, 20px);
  }
  @media (max-width: 900px) {
    .u-pcat__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .u-pcat__grid { grid-template-columns: 1fr; }
  }
  .u-pcat__card { display: flex; }
  .u-pcat__card > * { width: 100%; height: 100%; }
/* END_SECTION:ultreia-product-recommended-category */

/* START_SECTION:ultreia-product-recommended (INDEX:25) */
.u-prec { padding: clamp(32px, 5vw, 64px) 0; }

  .u-prec__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--prec-cols, 4), 1fr);
    gap: clamp(12px, 1.4vw, 20px);
  }
  @media (max-width: 900px) {
    .u-prec__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .u-prec__grid { grid-template-columns: 1fr; }
  }
  .u-prec__card { display: flex; }
  .u-prec__card > * { width: 100%; height: 100%; }
  /* Loading skeleton cells use the shared 'ultreia-product-card-skeleton'
     snippet, which carries its own styles. */
/* END_SECTION:ultreia-product-recommended */

/* START_SECTION:ultreia-product (INDEX:26) */
/* ----------------------------------------------------------------------------
     ULTREIA PDP. Cream surface, warm ink text; one --accent role drives the
     eyebrow, title italic, swatch ring and links and defaults to the mountain
     tone. The media skeleton/shimmer mirrors the product card so the two read
     as one system.
     ---------------------------------------------------------------------------- */
  .u-pdp {
    --accent: var(--color-montana, #735f3c);
    --u-panel: var(--color-paper-alt, #efe8d6);
    background: var(--color-paper, #f6f1e7);
    color: var(--color-ink, #1a1a1a);
    padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 96px);
    font-family: var(--font-serif);
  }
  .u-pdp *, .u-pdp *::before, .u-pdp *::after { box-sizing: border-box; }

  /* Grid only — the container snippet owns width, centering and gutters. */
  .u-pdp__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
  }

  /* ---- MEDIA ------------------------------------------------------------- */
  .u-pdp__media { position: sticky; top: clamp(16px, 5vw, 96px); display: grid; gap: 14px; }
  .u-pdp__stage {
    position: relative;
    aspect-ratio: 4 / 4.4;
    overflow: hidden;
    border: 1px solid #d8d0bf;
    border-radius: var(--radius-sm, 2px);
    background: var(--color-sand, #e2dcc9);
  }
  /* Shimmer while the primary image loads — identical idea to the card. */
  .u-pdp__stage.has-img {
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--color-ink, #1a1a1a) 5%, transparent) 30%,
      color-mix(in srgb, var(--color-ink, #1a1a1a) 11%, transparent) 50%,
      color-mix(in srgb, var(--color-ink, #1a1a1a) 5%, transparent) 70%) var(--color-sand, #e2dcc9);
    background-size: 200% 100%;
    animation: u-pdp-shimmer 1.3s ease-in-out infinite;
  }
  .u-pdp__stage.has-img:has(.u-pdp__img.is-current.is-loaded) { animation: none; background: var(--color-sand, #e2dcc9); }
  @keyframes u-pdp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .u-pdp__stage { animation: none !important; } }

  /* Insignia badges: top-left of the media stage, stacked vertically when a
     product has more than one. Non-interactive, above the image. */
  .u-pdp__insignias {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    pointer-events: none;
  }
  /* Slightly larger than the default badge so they read clearly on the big PDP
     image. */
  .u-pdp__insignias .u-badge {
    font-size: var(--text-label, 12px);
    padding: 6px 11px;
  }

  .u-pdp__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s cubic-bezier(.2,.6,.2,1);
    pointer-events: none;
  }
  /* Only the current, loaded slide is visible. */
  .u-pdp__img.is-current.is-loaded { opacity: 1; pointer-events: auto; }

  .u-pdp__placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
  .u-pdp__placeholder-svg { width: 60%; height: 60%; fill: color-mix(in srgb, var(--color-ink, #1a1a1a) 14%, transparent); }

  .u-pdp__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
  .u-pdp__thumb {
    flex: 0 0 auto; width: clamp(54px, 6vw, 72px); aspect-ratio: 1;
    padding: 0; overflow: hidden; cursor: pointer;
    border: 1px solid var(--color-line, rgba(26,26,26,.16));
    border-radius: var(--radius-sm, 2px);
    background: var(--color-sand, #e2dcc9);
    transition: border-color .25s var(--ease, cubic-bezier(.2,.6,.2,1)), opacity .25s var(--ease, cubic-bezier(.2,.6,.2,1));
    opacity: .72;
  }
  .u-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .u-pdp__thumb:hover { opacity: 1; }
  .u-pdp__thumb.is-current { opacity: 1; border-color: var(--color-ink, #1a1a1a); }

  /* ---- INFO -------------------------------------------------------------- */
  .u-pdp__info { display: grid; gap: clamp(12px, 1.4vw, 18px); align-content: start; }
  .u-pdp__eyebrow-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .u-pdp__eyebrow-row .u-eyebrow { font-weight: 700; }
  .u-pdp__title {
    font-family: var(--font-serif); font-weight: 700;
    font-size: var(--text-h1, clamp(34px, 4.4vw, 58px));
    line-height: 1.02; letter-spacing: -.01em; margin: 0; max-width: 18ch;
  }
  /* Trailing measure/size in the title (e.g. "45L") reads as an italic accent —
     authors can wrap it in <em> in the product title; we color any <em> here. */
  .u-pdp__title em { font-style: italic; font-weight: 400; color: var(--accent); }
  /* Brand/vendor sits under the title — same serif face as the title (so it
     reads as a smaller sibling), but kept in the lighter accent color. */
  .u-pdp__brand {
    font-family: var(--font-serif); font-weight: 700;
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.1; letter-spacing: -.01em;
    color: var(--accent);
    margin: 0;
  }
  .u-pdp__subtitle {
    font-family: var(--font-serif); font-style: italic;
    font-size: var(--text-lead, 19px); line-height: 1.32;
    color: var(--color-ink-2, #4a4334); margin: 0; max-width: 46ch;
  }
  .u-pdp__rule { height: 1px; background: var(--color-line, rgba(26,26,26,.16)); margin: clamp(6px,1vw,12px) 0; }

  .u-pdp__price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
  .u-pdp__price {
    font-family: var(--font-serif); font-weight: 700;
    font-size: var(--text-h2, clamp(28px, 3.4vw, 44px)); line-height: 1;
    color: var(--color-ink, #1a1a1a);
  }
  .u-pdp__price.is-sale { color: var(--color-discount, #e07b39); }
  .u-pdp__compare {
    font-family: var(--font-mono); font-size: var(--text-body, 16px);
    color: var(--color-muted, #6f6857); text-decoration-thickness: 1px;
  }
  .u-pdp__compare[hidden] { display: none; }
  /* The shared sale badge is red; a markdown reads orange — recolor locally, like the card. */
  .u-pdp__discount {
    background: var(--color-discount, #e07b39);
    border-color: var(--color-discount, #e07b39);
    color: var(--color-paper, #f6f1e7);
  }
  .u-pdp__discount:empty { display: none; }

  .u-pdp__desc {
    font-family: var(--font-serif); font-size: var(--text-body, 16px);
    line-height: var(--leading-body, 1.62); color: var(--color-ink-2, #4a4334);
    max-width: 54ch;
  }
  .u-pdp__desc p { margin: 0 0 .7em; }
  .u-pdp__desc p:last-child { margin-bottom: 0; }

  /* ---- OPTIONS ----------------------------------------------------------- */
  .u-pdp__opt { display: grid; gap: 10px; margin-top: 4px; }
  .u-pdp__opt-name {
    margin: 0;
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px); font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink, #1a1a1a);
  }
  /* Swatches + pills share one wrapping row, bottom-aligned so a taller image
     swatch and a shorter pill line up on the same baseline — same as the
     quick-shop modal (sections/ultreia-quick-shop.liquid). The two pickers are
     intentionally styled identically. */
  .u-pdp__choices { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }

  /* Image swatch (colors) — square tile with a shimmering placeholder until the
     image fades in, ink border, inset ring when selected. Mirrors .u-qs__swatch. */
  .u-pdp__swatch {
    width: 72px; height: 72px; padding: 0; cursor: pointer;
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--color-ink, #1a1a1a) 6%, transparent) 30%,
      color-mix(in srgb, var(--color-ink, #1a1a1a) 12%, transparent) 50%,
      color-mix(in srgb, var(--color-ink, #1a1a1a) 6%, transparent) 70%) var(--color-paper, #f6f1e7);
    background-size: 200% 100%;
    animation: u-pdp-swatch-shimmer 1.2s ease-in-out infinite;
    border: 1px solid var(--color-line-strong, rgba(26,26,26,.28));
    border-radius: var(--radius-sm, 2px);
    overflow: hidden; line-height: 0;
    transition: border-color .2s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-pdp__swatch:hover { border-color: var(--color-ink, #1a1a1a); }
  .u-pdp__swatch.is-selected { border-color: var(--color-ink, #1a1a1a); box-shadow: inset 0 0 0 1px var(--color-ink, #1a1a1a); }
  .u-pdp__swatch img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
  /* Once loaded the image fades in and the placeholder shimmer is stopped. */
  .u-pdp__swatch:has(img.is-loaded) { animation: none; background: transparent; }
  .u-pdp__swatch img.is-loaded { opacity: 1; }
  @keyframes u-pdp-swatch-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .u-pdp__swatch { animation: none; } }

  /* Text pill (sizes/capacities) — matches .u-qs__pill. */
  .u-pdp__pill {
    min-width: 56px; padding: .8rem 1rem; cursor: pointer;
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
    text-transform: uppercase; line-height: 1;
    background: transparent; color: var(--color-ink, #1a1a1a);
    border: 1px solid var(--color-line-strong, rgba(26,26,26,.28));
    border-radius: var(--radius-sm, 2px);
    transition: border-color .2s, background .2s, color .2s;
  }
  .u-pdp__pill:hover { border-color: var(--color-ink, #1a1a1a); }
  .u-pdp__pill.is-selected { background: var(--color-ink, #1a1a1a); color: var(--color-paper, #f6f1e7); border-color: var(--color-ink, #1a1a1a); }

  /* Dead-end (sold-out) values — pill gets a strike-through, swatch a diagonal
     strike, same as the quick-shop modal. */
  .u-pdp__pill.is-unavailable { opacity: .4; text-decoration: line-through; cursor: not-allowed; pointer-events: none; }
  .u-pdp__swatch.is-unavailable { opacity: .4; cursor: not-allowed; pointer-events: none; position: relative; }
  .u-pdp__swatch.is-unavailable::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top right, transparent calc(50% - 1px), color-mix(in srgb, var(--color-ink, #1a1a1a) 55%, transparent) calc(50% - 1px), color-mix(in srgb, var(--color-ink, #1a1a1a) 55%, transparent) calc(50% + 1px), transparent calc(50% + 1px));
  }

  /* ---- ACTIONS ----------------------------------------------------------- */
  .u-pdp__form { display: grid; gap: clamp(14px, 1.8vw, 22px); margin-top: 4px; }
  .u-pdp__actions { display: flex; gap: 12px; align-items: stretch; }
  .u-pdp__add { flex: 1; min-height: 56px; }
  .u-pdp__add[disabled] { opacity: .5; cursor: not-allowed; }
  .u-pdp__add[aria-busy="true"] { cursor: default; }
  /* Wishlist heart as a square button next to the CTA. */
  .u-pdp__wish.u-wish--icon {
    width: 56px; height: 56px; border-radius: var(--radius-sm, 2px);
    background: transparent;
    border: 1px solid var(--color-line-strong, rgba(26,26,26,.42));
  }
  .u-pdp__wish.u-wish--icon:hover { background: transparent; border-color: var(--color-ink, #1a1a1a); }

  /* ---- SPECS ------------------------------------------------------------- */
  .u-pdp__specs {
    margin-top: 6px; padding: clamp(16px, 2vw, 24px);
    background: var(--u-panel);
    border: 1px solid var(--color-line, rgba(26,26,26,.16));
    border-radius: var(--radius-sm, 2px);
  }
  .u-pdp__specs-title {
    font-family: var(--font-mono); font-size: var(--text-label, 12px); font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--accent, #735f3c);
    margin: 0 0 14px; padding-bottom: 14px;
    border-bottom: 1px solid var(--color-line, rgba(26,26,26,.16));
  }
  .u-pdp__specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 0; }
  .u-pdp__spec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .u-pdp__spec dt { font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px); letter-spacing: .08em; text-transform: uppercase; color: #3a3a36; margin: 0; }
  .u-pdp__spec dd { font-family: var(--font-serif); font-size: var(--text-small, 14px); color: #3a3a36; margin: 0; text-align: right; }

  /* ---- FEATURES ---------------------------------------------------------- */
  .u-pdp__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 6px; }
  .u-pdp__feature {
    display: grid; gap: 6px; place-items: center; text-align: center;
    padding: 16px 10px;
    border: 1px solid var(--color-line, rgba(26,26,26,.16));
    border-radius: var(--radius-sm, 2px);
  }
  .u-pdp__feature-glyph { font-size: 18px; line-height: 1; color: var(--accent); }
  .u-pdp__feature-text { font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px); letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-2, #4a4334); line-height: 1.4; }

  /* ---- RESPONSIVE -------------------------------------------------------- */
  @media (max-width: 980px) {
    .u-pdp__shell { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
    .u-pdp__media { position: static; }
  }
  @media (max-width: 600px) {
    .u-pdp__specs-grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:ultreia-product */

/* START_SECTION:ultreia-quick-shop (INDEX:27) */
.u-qs { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 26px); }
  .u-qs__head { display: flex; flex-direction: column; gap: .5rem; }
  .u-qs__title { margin: 0; font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.1; color: var(--color-ultreia-ink); }
  .u-qs__price { margin: 0; font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .04em; color: var(--color-ultreia-ink); }

  .u-qs__options { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 22px); }
  .u-qs__opt-name { margin: 0 0 .6rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ultreia-ink); }
  .u-qs__opt-name span { font-weight: 600; }

  /* Image swatches and text pills share one wrapping row; align to the bottom
     so a taller image swatch and a shorter pill line up on the same baseline. */
  .u-qs__choices { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }

  .u-qs__pill {
    min-width: 56px; padding: .8rem 1rem; cursor: pointer;
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
    background: transparent; color: var(--color-ultreia-ink);
    border: 1px solid var(--color-line-strong, rgba(26,26,26,.28));
    border-radius: var(--radius-sm, 2px);
    transition: border-color .2s, background .2s, color .2s;
  }
  .u-qs__pill:hover { border-color: var(--color-ultreia-ink); }
  .u-qs__pill.is-selected { background: var(--color-ultreia-ink); color: var(--color-ultreia-paper); border-color: var(--color-ultreia-ink); }
  .u-qs__pill.is-unavailable { opacity: .4; text-decoration: line-through; cursor: not-allowed; pointer-events: none; }

  .u-qs__swatch {
    width: 72px; height: 72px; padding: 0; cursor: pointer;
    /* Shimmering placeholder shown until the image fades in, so an unloaded
       swatch reads as a loading tile rather than a blank/flashing box. */
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--color-ultreia-ink) 6%, transparent) 30%,
      color-mix(in srgb, var(--color-ultreia-ink) 12%, transparent) 50%,
      color-mix(in srgb, var(--color-ultreia-ink) 6%, transparent) 70%) var(--color-ultreia-paper);
    background-size: 200% 100%;
    animation: u-qs-shimmer 1.2s ease-in-out infinite;
    border: 1px solid var(--color-line-strong, rgba(26,26,26,.28));
    border-radius: var(--radius-sm, 2px);
    overflow: hidden; line-height: 0;
    transition: border-color .2s;
  }
  .u-qs__swatch:hover { border-color: var(--color-ultreia-ink); }
  .u-qs__swatch.is-selected { border-color: var(--color-ultreia-ink); box-shadow: inset 0 0 0 1px var(--color-ultreia-ink); }
  .u-qs__swatch img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .3s ease;
  }
  /* Once loaded the image fades in and the placeholder shimmer is stopped. */
  .u-qs__swatch:has(img.is-loaded) { animation: none; background: transparent; }
  .u-qs__swatch img.is-loaded { opacity: 1; }
  .u-qs__swatch.is-unavailable { opacity: .4; cursor: not-allowed; pointer-events: none; }
  /* Diagonal strike across a sold-out swatch, mirroring the pill's line-through. */
  .u-qs__swatch.is-unavailable { position: relative; }
  .u-qs__swatch.is-unavailable::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top right, transparent calc(50% - 1px), color-mix(in srgb, var(--color-ultreia-ink) 55%, transparent) calc(50% - 1px), color-mix(in srgb, var(--color-ultreia-ink) 55%, transparent) calc(50% + 1px), transparent calc(50% + 1px));
  }

  @keyframes u-qs-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .u-qs__swatch { animation: none; } }

  .u-qs__add[disabled] { opacity: .5; cursor: not-allowed; }
  .u-qs__add[aria-busy="true"] { opacity: .7; cursor: default; }
/* END_SECTION:ultreia-quick-shop */

/* START_SECTION:ultreia-search-results (INDEX:28) */
.u-search {
    background: var(--_bg, #f6f1e7);
    padding: clamp(32px, 5vw, 48px) 0;
  }
  /* Quiet status line above the grid — one consistent treatment (mono caps, the
     theme's label/eyebrow idiom). The searched term is the only emphasis: same
     font and case, just inked instead of muted. The page title proper lives in
     the section-header band above this section. */
  .u-search__count {
    margin: 0 0 clamp(20px, 3vw, 32px);
    padding-bottom: clamp(16px, 2.4vw, 24px);
    border-bottom: 1px solid color-mix(in srgb, var(--color-ultreia-ink, #1a1a1a) 18%, transparent);
    font-family: var(--font-mono);
    font-size: clamp(15px, 1.4vw, 18px);
    letter-spacing: var(--tracking-label, .22em); text-transform: uppercase;
    color: var(--color-muted, #6f6857);
  }
  .u-search__count-term {
    color: var(--color-ultreia-ink, #1a1a1a);
  }
  .u-search__hint {
    font-family: var(--font-serif); font-style: italic;
    color: var(--color-muted, #6f6857);
    margin: 0 0 var(--s4, 16px);
  }
  .u-search__open {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-label, .22em); text-transform: uppercase;
    padding: 13px 22px;
    color: var(--color-ultreia-paper, #f6f1e7);
    background: var(--color-ultreia-ink, #1a1a1a);
    border: 1px solid var(--color-ultreia-ink, #1a1a1a);
    border-radius: var(--radius-sm, 2px);
    transition: opacity .2s ease;
  }
  .u-search__open:hover { opacity: .88; }

  .search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
/* END_SECTION:ultreia-search-results */

/* START_SECTION:ultreia-section-header (INDEX:29) */
/* ----------------------------------------------------------------------------
     Section header (.u-shead). Color roles default to the brand cream/ink scheme;
     an instance overrides any of them via the inline style on the root. Non-color
     tokens (fonts, type scale, spacing) come from the shared design tokens.
     ---------------------------------------------------------------------------- */
  .u-shead {
    --accent: #735f3c;                                          /* eyebrow + dash */
    --_head:  var(--color-ultreia-ink);                         /* heading        */
    --_emph:  var(--shead-emph, var(--color-urbano, #735f3c));  /* italic accent  */
    --_bg:    var(--color-ultreia-paper);                       /* band           */
    --_lead:  var(--color-muted, #6f6857);                      /* lead / labels  */
    position: relative;
    background: var(--_bg);
    padding: clamp(40px, 6vw, 104px) 0 clamp(36px, 5vw, 84px);
    overflow: hidden;
    font-family: var(--font-serif);
  }
  .u-shead *, .u-shead *::before, .u-shead *::after { box-sizing: border-box; }

  .u-shead__inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr 1.1fr;
    /* Stretch both columns to the row height so the left column can pin the eyebrow
       to the top and push the title to the bottom; the right column stays
       bottom-anchored via .u-shead__side below. */
    align-items: stretch;
    gap: clamp(24px, 4vw, 80px);
  }
  .u-shead--plain { background: transparent; }
  .u-shead--no-pad-top { padding-top: 12px; }
  /* Not fully 0 — keep enough room for the title's descenders (g, y, p). */
  .u-shead--no-pad-bottom { padding-bottom: 12px; }

  /* Left column: eyebrow top, title bottom, gap stretched between them. The band's
     height comes from the taller right column (lead + stats). */
  .u-shead__head { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(12px, 1.6vw, 20px); }
  /* Block wrapper around the eyebrow snippet — matches the prototype's box model
     (reserves one body line of height) so the title sits where the design has it. */
  .u-shead__eyebrow { display: block; margin: 0; }
  .u-shead__eyebrow .u-eyebrow { margin: 0; }
  .u-shead .u-num { font-weight: 400; }

  .u-shead__title {
    font-family: var(--font-serif); font-weight: 700;
    font-size: clamp(40px, 6vw, 86px); line-height: 1.0; letter-spacing: -.018em;
    margin: 0; color: var(--_head); text-wrap: balance;
  }
  .u-shead__title em { font-weight: 400; font-style: italic; color: var(--_emph); }

  .u-shead__lead {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(16px, 1.45vw, 21px); line-height: 1.5;
    color: var(--_lead); margin: 0 0 0 auto; max-width: 58ch;
    text-align: right; text-wrap: pretty;
  }

  .u-shead__side { display: grid; gap: clamp(20px, 2.6vw, 34px); align-content: end; min-width: 0; }
  .u-shead__rule { height: 1px; background: color-mix(in srgb, var(--_head) 24%, transparent); }
  .u-shead__stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); }
  .u-shead__stats .u-stat__num { font-size: clamp(30px, 3.4vw, 46px); color: var(--_head); line-height: 1; }
  .u-shead__stats .u-stat__label { color: color-mix(in srgb, var(--_lead) 76%, #ffffff); }

  /* Stats variant: center-distribute instead of top/bottom. */
  .u-shead--stats .u-shead__inner { align-items: center; }
  .u-shead--stats .u-shead__head { justify-content: center; }
  .u-shead--stats .u-shead__side { align-content: center; }

  .u-shead--rings .u-shead__inner::after {
    content: ""; position: absolute; right: -160px; top: 50%; transform: translateY(-50%);
    width: 600px; height: 200%;
    background: repeating-radial-gradient(circle at 64% 50%, transparent 0 26px,
      color-mix(in srgb, var(--_emph) 36%, transparent) 26px 27px);
    -webkit-mask: linear-gradient(90deg, transparent, #000 62%);
    mask: linear-gradient(90deg, transparent, #000 62%);
    pointer-events: none; opacity: .65; z-index: -1;
  }

  @media (max-width: 860px) {
    .u-shead__inner { grid-template-columns: 1fr; align-items: start; gap: clamp(20px,4vw,32px); }
    .u-shead__head { gap: clamp(18px, 3vw, 28px); }
    .u-shead--stats .u-shead__inner { align-items: start; }
    .u-shead--stats .u-shead__head { justify-content: flex-start; }
    .u-shead--rings .u-shead__inner::after { display: none; }
    .u-shead__lead { max-width: 60ch; margin-left: 0; text-align: left; }
  }
/* END_SECTION:ultreia-section-header */

/* START_SECTION:ultreia-sell-here (INDEX:30) */
/* ----------------------------------------------------------------------------
     Sell here (.u-sellhere). Centered closing CTA band. Color roles default to a
     dark ink scheme; an instance overrides any of them via the inline style on
     the root. Non-color tokens come from the shared design tokens.
     ---------------------------------------------------------------------------- */
  .u-sellhere {
    --_bg:    var(--color-ultreia-ink, #1a1a1a);
    --_head:  var(--color-ultreia-paper, #f6f1e7);
    --accent: var(--color-ultreia-gold, #d9a93a);
    --_lead:  color-mix(in srgb, var(--color-ultreia-paper, #f6f1e7) 64%, transparent);
    background: var(--_bg);
    padding: clamp(48px, 6vw, 88px) 0;
    font-family: var(--font-serif);
  }
  .u-sellhere *, .u-sellhere *::before, .u-sellhere *::after { box-sizing: border-box; }

  .u-sellhere__inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: clamp(16px, 2.2vw, 28px);
    max-width: 980px; margin-inline: auto;
  }

  .u-sellhere__eyebrow { display: block; }
  .u-sellhere__eyebrow .u-eyebrow { margin: 0; }

  .u-sellhere__title {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(34px, 5vw, 64px); line-height: 1.05; letter-spacing: -.02em;
    margin: 0; color: var(--_head); text-wrap: balance;
  }
  .u-sellhere__title em { font-weight: 400; font-style: italic; color: var(--accent); }

  .u-sellhere__lead {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(15px, 1.3vw, 19px); line-height: 1.5;
    color: var(--_lead); margin: 0; max-width: 62ch; text-wrap: pretty;
  }

  .u-sellhere__cta { margin-top: clamp(6px, 1vw, 14px); }
  /* The CTA reads --cta-bg/--cta-fg from the section; the 'gold' variant default
     already lands on gold-on-ink, so this band needs no extra button rules. */

  .u-sellhere__meta {
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-label, .22em); text-transform: uppercase;
    color: color-mix(in srgb, var(--_lead) 80%, transparent); margin: 0;
  }

  @media (max-width: 600px) {
    .u-sellhere__lead { max-width: 46ch; }
  }
/* END_SECTION:ultreia-sell-here */

/* START_SECTION:ultreia-wishlist-page (INDEX:31) */
.u-wishpage { padding-block: clamp(40px, 6vw, 88px); font-family: var(--font-serif); }
  .u-wishpage__head { margin-bottom: clamp(24px, 4vw, 48px); }
  .u-wishpage__title { font-size: clamp(28px, 5vw, 52px); line-height: 1.05; margin: 0; color: var(--color-ultreia-ink, #1a1a1a); }
  .u-wishpage__sub {
    margin: 12px 0 0; font-family: var(--font-mono);
    font-size: var(--text-label-sm, 10.5px); letter-spacing: var(--tracking-label, .22em);
    text-transform: uppercase; color: var(--color-ink-2, #4a4334);
  }

  .u-wishpage__grid {
    display: grid; gap: clamp(20px, 3vw, 36px);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .u-wishcard { display: flex; flex-direction: column; gap: 14px; }
  .u-wishcard__media {
    display: block; aspect-ratio: 1 / 1; overflow: hidden;
    background: color-mix(in srgb, var(--color-ultreia-ink, #1a1a1a) 6%, transparent);
    border-radius: var(--radius-md, 4px);
  }
  .u-wishcard__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease, cubic-bezier(.2,.6,.2,1)); }
  .u-wishcard__media:hover .u-wishcard__img { transform: scale(1.04); }
  .u-wishcard__body { display: flex; flex-direction: column; gap: 6px; }
  .u-wishcard__title { font-size: 18px; line-height: 1.2; color: var(--color-ultreia-ink, #1a1a1a); text-decoration: none; }
  .u-wishcard__title:hover { text-decoration: underline; }
  .u-wishcard__price { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--color-ink-2, #4a4334); }
  .u-wishcard__actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
  .u-wishcard__actions .u-btn { flex: 1 1 auto; justify-content: center; }
  .u-wishcard__remove {
    appearance: none; -webkit-appearance: none; cursor: pointer; flex: none;
    width: 38px; height: 38px; display: inline-grid; place-items: center;
    background: transparent; color: var(--color-ink-2, #4a4334);
    border: 1px solid var(--color-line-strong, rgba(26,26,26,.42));
    border-radius: var(--radius-sm, 2px);
    transition: color .28s var(--ease, cubic-bezier(.2,.6,.2,1)), border-color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-wishcard__remove svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .u-wishcard__remove:hover { color: var(--color-sale, #d20a05); border-color: var(--color-sale, #d20a05); }

  .u-wishpage__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 38ch; }
  .u-wishpage__emptytxt { margin: 0; font-size: clamp(16px, 2.4vw, 20px); line-height: 1.5; color: var(--color-ink-2, #4a4334); }
/* END_SECTION:ultreia-wishlist-page */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:32) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:33) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image (INDEX:35) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:ultreia-active-filters (INDEX:37) */
/* ULTREIA · Active filters bar — chips reuse the .u-chip pill language from
     the design system; colors follow the same --filters-* overrides as the rail. */
  .u-afilters {
    --_accent: var(--filters-accent, var(--accent, var(--color-ink, #1a1a1a)));
    display: flex; flex-direction: column;
    gap: 12px;
    margin-bottom: clamp(16px, 2vw, 24px);
    padding: 14px 18px;
    background: var(--filters-surface, var(--uc-surface, var(--color-paper, #faf9f4)));
    border: 1px solid var(--filters-border, #d8d0bf);
  }
  /* Top row: "Filtros" on the left, "Limpiar todo" on the right. */
  .u-afilters__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  }
  .u-afilters__label {
    font-family: var(--font-mono, monospace); font-weight: 700;
    font-size: var(--text-label, 12px); letter-spacing: var(--tracking-label, .12em);
    text-transform: uppercase; color: var(--filters-title, var(--color-ink, #1a1a1a));
  }
  .u-afilters__chips {
    /* Chips flow on their own row(s) beneath the Filtros / Limpiar todo header. */
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .u-afilters__chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 10px 6px 12px;
    border: var(--bw, 1px) solid var(--filters-border, var(--color-line, #d8d0bf));
    border-radius: var(--radius-sm, 2px);
    font-family: var(--font-mono, monospace); font-size: var(--text-label-sm, 11px);
    letter-spacing: var(--tracking-tight, .04em); text-transform: uppercase;
    color: var(--filters-item, var(--color-ink-2, #4a443a));
    text-decoration: none; white-space: nowrap;
    transition: all var(--dur, .28s) var(--ease, ease);
  }
  .u-afilters__chip:hover {
    background: var(--_accent); color: var(--color-paper, #fff); border-color: var(--_accent);
  }
  .u-afilters__x { font-size: 14px; line-height: 1; }
  .u-afilters__clear {
    font-family: var(--font-mono, monospace); font-size: var(--text-label-sm, 11px);
    letter-spacing: var(--tracking-tight, .04em); text-transform: uppercase;
    color: var(--_accent); text-decoration: underline; white-space: nowrap;
  }
/* END_SNIPPET:ultreia-active-filters */

/* START_SNIPPET:ultreia-badge (INDEX:38) */
.u-badge {
    display: inline-flex; align-items: center; gap: .4em;
    font-family: var(--font-mono);
    font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-tight, .08em);
    text-transform: uppercase;
    padding: 4px 8px;
    background: var(--color-ultreia-paper); color: var(--color-ultreia-ink);
    border: 1px solid var(--color-ultreia-ink);
    border-radius: var(--radius-sm, 2px);
    line-height: 1;
  }
  .u-badge--nuevo { background: var(--color-nuevo, #5f8456); color: var(--color-ultreia-paper); border-color: var(--color-nuevo, #5f8456); }
  .u-badge--trending { background: var(--color-trending, #c2622c); color: var(--color-ultreia-paper); border-color: var(--color-trending, #c2622c); }
  .u-badge--eco   { background: var(--color-bosque, #4a6645); color: var(--color-ultreia-paper); border-color: var(--color-bosque, #4a6645); }
  .u-badge--best  { background: var(--color-ultreia-gold); color: var(--color-ultreia-ink); border-color: var(--color-ultreia-gold); }
  .u-badge--sale  { background: var(--color-sale, #d20a05); color: var(--color-ultreia-paper); border-color: var(--color-sale, #d20a05); }
  .u-badge--ltd   { background: transparent; color: var(--color-ultreia-ink); border-color: var(--color-ultreia-ink); }
  /* Activity chip — outlined, tuned for dark photo surfaces (cream on dark). */
  .u-badge--activity {
    background: rgba(var(--cream-rgb, 246, 241, 231), .05);
    color: rgba(var(--cream-rgb, 246, 241, 231), .92);
    border-color: rgba(var(--cream-rgb, 246, 241, 231), .34);
    font-size: var(--text-label, 12px); letter-spacing: .12em;
    padding: 8px 13px;
    transition: border-color .28s var(--ease, cubic-bezier(.2,.6,.2,1)), background .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-badge--activity:hover { border-color: rgba(var(--cream-rgb, 246, 241, 231), .62); background: rgba(var(--cream-rgb, 246, 241, 231), .1); }

  .u-rating { font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px); letter-spacing: .08em; color: var(--color-ink-2, #4a4334); display: inline-flex; gap: .35em; align-items: center; }
  .u-rating__star { color: var(--color-ultreia-gold); }
/* END_SNIPPET:ultreia-badge */

/* START_SNIPPET:ultreia-biome-filter (INDEX:39) */
/* Match the layout gap between the filter sidebar and the content to its right
     (.u-pgrid__layout gap) so the spacing reads consistent. */
  .u-biomefilter { margin-bottom: clamp(12px, 1.6vw, 24px); }

  .u-biomefilter__row {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
  }

  .u-biomefilter__cell { display: flex; min-width: 0; }

  .u-biomefilter__tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    text-decoration: none;
    background: var(--color-ink, #1a1a1a);
    isolation: isolate;
  }

  .u-biomefilter__media,
  .u-biomefilter__shade {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .u-biomefilter__media {
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform .5s var(--ease, ease);
    will-change: transform;
  }
  .u-biomefilter__tile:hover .u-biomefilter__media,
  .u-biomefilter__tile:focus-visible .u-biomefilter__media {
    transform: scale(1.06);
  }
  @media (prefers-reduced-motion: reduce) {
    .u-biomefilter__media { transition: none; }
    .u-biomefilter__tile:hover .u-biomefilter__media,
    .u-biomefilter__tile:focus-visible .u-biomefilter__media { transform: none; }
  }

  /* Darkening gradient so the text stays legible over any photo, heavier toward
     the bottom where the label sits. The solid tiles use a flat scrim. */
  .u-biomefilter__shade {
    background:
      linear-gradient(
        to top,
        rgba(20, 22, 24, .88) 0%,
        rgba(20, 22, 24, .65) 32%,
        rgba(20, 22, 24, .4) 70%,
        rgba(20, 22, 24, .35) 100%
      ),
      rgba(20, 22, 24, .25);
  }
  .u-biomefilter__tile--solid .u-biomefilter__shade {
    background: rgba(20, 22, 24, .35);
  }

  .u-biomefilter__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: grid;
    gap: 4px;
    padding: clamp(12px, 1.4vw, 20px);
    color: #fff;
  }

  .u-biomefilter__num {
    font-family: var(--font-serif, serif);
    font-size: clamp(34px, 4vw, 56px);
    line-height: .9;
    color: var(--color-accent, #e0a32e);
  }

  .u-biomefilter__name {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    font-size: var(--text-label, 13px);
    letter-spacing: var(--tracking-label, .14em);
    text-transform: uppercase;
    color: #fff;
  }

  .u-biomefilter__count {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-label-sm, 11px);
    letter-spacing: var(--tracking-tight, .08em);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
  }

  /* Active tile — a yellow check badge in the top-right corner. Hidden until the
     tile is selected. */
  .u-biomefilter__check {
    position: absolute;
    top: clamp(10px, 1.2vw, 16px);
    right: clamp(10px, 1.2vw, 16px);
    z-index: 2;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-accent, #e0a32e);
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--dur, .28s) var(--ease, ease),
                transform var(--dur, .28s) var(--ease, ease);
  }
  .u-biomefilter__check::after {
    content: "";
    width: 11px; height: 6px;
    margin-top: -2px;
    border-left: 2px solid var(--color-ink, #1a1a1a);
    border-bottom: 2px solid var(--color-ink, #1a1a1a);
    transform: rotate(-45deg);
  }
  .u-biomefilter__tile.is-active .u-biomefilter__check {
    opacity: 1;
    transform: scale(1);
  }

  /* Zero-result value reads as muted and non-interactive (mirrors the sidebar). */
  .u-biomefilter__tile.is-disabled { opacity: .4; pointer-events: none; cursor: default; }

  /* Mobile: collapse the poster grid into a vertical stack of slim horizontal
     bars — number + name + count laid out in a row over the same photo, mirroring
     the nav drawer's Tienda tiles. */
  @media (max-width: 700px) {
    .u-biomefilter__row {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .u-biomefilter__cell { order: 0 !important; }

    .u-biomefilter__tile {
      aspect-ratio: auto;
      height: 56px;
    }

    /* Side gradient instead of bottom-up so the inline text stays legible. */
    .u-biomefilter__shade {
      background:
        linear-gradient(
          to right,
          rgba(20, 22, 24, .85) 0%,
          rgba(20, 22, 24, .55) 60%,
          rgba(20, 22, 24, .4) 100%
        );
    }
    .u-biomefilter__tile--solid .u-biomefilter__shade {
      background: rgba(20, 22, 24, .45);
    }

    /* Reserve room on the right for the (active) check badge on every bar so the
       count never sits under it and the alignment stays consistent. */
    .u-biomefilter__body {
      inset: 0;
      display: flex;
      align-items: center;
      gap: .7em;
      padding: 0 44px 0 var(--s4, 16px);
    }

    .u-biomefilter__num { font-size: 26px; }

    /* Push the count to the far right of the bar. */
    .u-biomefilter__count { margin-left: auto; }

    /* Vertically center the check badge on the slim bar. */
    .u-biomefilter__check {
      top: 50%;
      transform: translateY(-50%) scale(.6);
    }
    .u-biomefilter__tile.is-active .u-biomefilter__check {
      transform: translateY(-50%) scale(1);
    }
  }
/* END_SNIPPET:ultreia-biome-filter */

/* START_SNIPPET:ultreia-brand-card (INDEX:40) */
/* ----------------------------------------------------------------------------
     Brand card (.u-brand). Color roles come from the host section's grid wrapper
     (--_paper / --_ink, and optional --_line / --_muted / --_gold); the card
     surface and text derive from those so it inverts on a dark background.
     ---------------------------------------------------------------------------- */
  .u-brand {
    --_card-bg: color-mix(in srgb, var(--_ink) 4%, var(--_paper));
    --_card-fg: var(--_ink);
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 1 / 1;
    padding: clamp(14px, 1.2vw, 20px);
    background: var(--_card-bg); color: var(--_card-fg);
    box-shadow: inset 0 0 0 1px var(--_line, color-mix(in srgb, var(--_ink) 18%, transparent));
    text-decoration: none;
    transition: transform .3s var(--ease, cubic-bezier(.2,.6,.2,1)),
                box-shadow .3s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-brand:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_ink) 32%, transparent); }

  .u-brand__index {
    position: absolute; top: clamp(14px, 1.2vw, 20px); left: clamp(14px, 1.2vw, 20px);
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: .16em; color: color-mix(in srgb, var(--_card-fg) 50%, transparent);
  }

  /* Topographic rings, top-right, bleeding off the corner. */
  .u-brand__rings {
    position: absolute; top: -34%; right: -22%;
    width: 78%; aspect-ratio: 1; border-radius: 50%;
    background: repeating-radial-gradient(circle at center,
      transparent 0 13px,
      color-mix(in srgb, var(--_card-fg) 12%, transparent) 13px 14px);
    pointer-events: none;
  }
  .u-brand__arrow {
    position: absolute; top: clamp(14px, 1.2vw, 20px); right: clamp(14px, 1.2vw, 20px);
    font-size: 15px; line-height: 1; color: color-mix(in srgb, var(--_card-fg) 60%, transparent);
    transition: transform .3s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-brand:hover .u-brand__arrow { transform: translateX(3px); }

  .u-brand__body {
    position: absolute; left: clamp(14px, 1.2vw, 20px); right: clamp(14px, 1.2vw, 20px);
    bottom: clamp(14px, 1.2vw, 20px);
    display: grid; gap: 7px;
  }
  .u-brand__name {
    font-family: var(--font-serif); font-weight: 700;
    font-size: clamp(20px, 1.5vw, 26px); line-height: 1.04; letter-spacing: -.01em;
    color: var(--_card-fg);
  }
  .u-brand__meta {
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: .14em; text-transform: uppercase;
    color: color-mix(in srgb, var(--_card-fg) 64%, transparent);
  }
  .u-brand__detail {
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: .06em;
    color: color-mix(in srgb, var(--_card-fg) 50%, transparent);
  }

  /* --- Accent variants ------------------------------------------------------- */
  .u-brand--gold { --_card-bg: var(--_gold, var(--color-ultreia-gold)); --_card-fg: #3a2c08; box-shadow: none; }
  .u-brand--dark { --_card-bg: #6b5a2a; --_card-fg: #f3ecd9; box-shadow: none; }
  /* Featured: brands with brand_special "Destacada" — deep-green fill, cream text. */
  .u-brand--featured { --_card-bg: #1d2a1e; --_card-fg: #f3ecd9; box-shadow: none; }

  /* On mobile the square card gets too tall (especially at 1-up). Make it a
     shorter, wider-than-tall tile so the grid reads more compact. The index /
     arrow stay top-anchored and the body bottom-anchored, so they just sit
     closer together. */
  @media (max-width: 720px) {
    .u-brand { aspect-ratio: 16 / 9; }
  }
  @media (max-width: 440px) {
    .u-brand { aspect-ratio: 5 / 2; }
  }
/* END_SNIPPET:ultreia-brand-card */

/* START_SNIPPET:ultreia-button (INDEX:41) */
/* Reads the shared role vars (--cta-bg/-fg, --accent) and brand tokens, so the
     button inherits whatever palette its host section sets. */
  .u-btn {
    --_bg: var(--cta-bg, var(--color-ultreia-ink));
    --_fg: var(--cta-fg, var(--color-ultreia-paper));
    display: inline-flex; align-items: center; gap: .8em;
    font-family: var(--font-mono);
    font-size: var(--text-label, 12px);
    letter-spacing: var(--tracking-label, .22em);
    text-transform: uppercase;
    padding: 14px 22px;
    background: var(--_bg); color: var(--_fg);
    border: 1px solid var(--_bg);
    border-radius: var(--radius-sm, 2px);
    cursor: pointer;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1)), color .28s var(--ease, cubic-bezier(.2,.6,.2,1)), transform .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-btn:hover { transform: translateY(-1px); }
  .u-btn__arrow { transition: transform .28s var(--ease, cubic-bezier(.2,.6,.2,1)); }
  .u-btn:hover .u-btn__arrow { transform: translateX(4px); }
  .u-btn--ghost { --_bg: transparent; --_fg: var(--color-ultreia-ink); border-color: var(--color-line-strong, rgba(26,26,26,.42)); }
  .u-btn--ghost:hover { --_bg: var(--color-ultreia-ink); --_fg: var(--color-ultreia-paper); }
  .u-btn--gold  { --_bg: var(--color-ultreia-gold); --_fg: var(--color-ultreia-ink); }
  .u-btn--gold:hover { --_bg: var(--color-gold-deep, #e6b23a); }
  .u-btn--accent { --_bg: var(--accent, var(--color-ultreia-ink)); --_fg: var(--color-ultreia-paper); }
  .u-btn--sm { padding: 9px 14px; font-size: var(--text-label-sm, 10.5px); }
  .u-btn--block { width: 100%; justify-content: center; }
/* END_SNIPPET:ultreia-button */

/* START_SNIPPET:ultreia-cart-drawer (INDEX:43) */
/* Most chrome (.u-drawer, panel slide, scrim, head) is inherited from the nav
     drawer's stylesheet. Only the cart-specific bits live here. */

  /* The cart drawer always wears the brand cream/ink palette, independent of the
     navbar's color override — the header deliberately does NOT pass its color_vars
     here, so we pin the --bar-* roles to the brand scheme. This keeps the cart
     reading the same whether the bar is cream, dark or transparent. */
  .u-cartdrawer {
    --bar-bg:   var(--color-ultreia-paper);
    --bar-fg:   var(--color-ultreia-ink);
    --bar-line: var(--color-ultreia-line);
  }

  /* Head: "Mochila" title with the navbar's bag icon at the left, close at the right
     (inherits the shared head's space-between). */
  .u-cartdrawer__title {
    display: inline-flex; align-items: center; gap: var(--s3, 12px);
    font-family: var(--font-mono); font-size: 13px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    line-height: 1; color: var(--bar-fg);
  }
  .u-cartdrawer__title-ic { display: inline-flex; color: var(--bar-fg); }
  .u-cartdrawer__title-ic svg {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* The live region fills the panel below the head: a scrollable list above a
     pinned footer. Both the live region AND its [data-cart-body] wrapper (the
     element whose innerHTML the runtime swaps) are full-height flex columns, so the
     item list can grow to push the footer to the very bottom even with few items. */
  .u-cartdrawer__live { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .u-cartdrawer__live > [data-cart-body] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

  /* Busy: while a change round-trips, dim + lock the list and pulse the total,
     mirroring the cart page so the ~1s wait reads as "working". */
  .u-cartdrawer__live[aria-busy="true"] .u-cartdrawer__items { opacity: .55; pointer-events: none; }
  .u-cartdrawer__live[aria-busy="true"] [data-cart-total] { animation: u-cartdrawer-pulse 1s var(--ease, cubic-bezier(.2,.6,.2,1)) infinite; }
  @keyframes u-cartdrawer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
  @media (prefers-reduced-motion: reduce) {
    .u-cartdrawer__live[aria-busy="true"] [data-cart-total] { animation: none; opacity: .5; }
  }

  /* ---- Item list ----------------------------------------------------------- */
  .u-cartdrawer__items {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: opacity .18s var(--ease, cubic-bezier(.2,.6,.2,1));
  }

  /* A single line — modeled on the cart page's mobile .u-crow: thumb on the left,
     info + stepper/remove stacked on the right, line total trailing. */
  .u-cdrow {
    position: relative;
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: var(--s4, 16px);
    align-items: start;
    padding: var(--s4, 16px) var(--s5, 24px);
  }
  /* Inset divider — sits between rows but stops short of the row's horizontal
     padding instead of running edge to edge. */
  .u-cdrow + .u-cdrow::before {
    content: "";
    position: absolute;
    top: 0; left: var(--s5, 24px); right: var(--s5, 24px);
    border-top: 1px solid var(--bar-line);
  }
  /* Removal collapse + fade — pinned max-height driven inline by JS, like the cart
     page's row removal, so the rows below glide up instead of snapping. */
  .u-cdrow[data-removing] {
    overflow: hidden;
    opacity: 0;
    transform: translateX(8px);
    padding-top: 0; padding-bottom: 0;
    transition:
      max-height .26s var(--ease, cubic-bezier(.2,.6,.2,1)),
      padding-top .26s var(--ease, cubic-bezier(.2,.6,.2,1)),
      padding-bottom .26s var(--ease, cubic-bezier(.2,.6,.2,1)),
      opacity .2s var(--ease, cubic-bezier(.2,.6,.2,1)),
      transform .2s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  /* While a row collapses out, drop the divider above the row that follows it so no
     stray line hangs over the closing gap. */
  .u-cdrow[data-removing] + .u-cdrow::before { opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .u-cdrow[data-removing] { transition: opacity .15s linear, max-height .15s linear; }
  }

  .u-cdrow__img {
    flex: none;
    width: 76px; height: 76px;
    display: block; position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--bar-fg) 8%, var(--bar-bg));
    border: 1px solid var(--bar-line);
  }
  .u-cdrow__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: 0; transition: opacity .4s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-cdrow__img img.is-loaded { opacity: 1; }
  .u-cdrow__placeholder { display: grid; place-items: center; width: 100%; height: 100%; }
  .u-cdrow__placeholder-svg { width: 60%; height: 60%; fill: color-mix(in srgb, var(--bar-fg) 16%, transparent); }

  .u-cdrow__info { min-width: 0; display: grid; gap: 5px; }
  /* Vendor — mono uppercase brand gold like the product card, a touch smaller
     to suit the denser drawer row. */
  .u-cdrow__vendor {
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: #7b6f55;
    /* Pull the title up closer than the info column's default 5px gap. */
    margin-bottom: -3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .u-cdrow__name {
    font-family: var(--font-serif); font-size: 15px; line-height: 1.25; font-weight: 700;
    color: var(--bar-fg); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .u-cdrow__name:hover { text-decoration: underline; text-underline-offset: 3px; }
  .u-cdrow__variant {
    margin: 0;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: var(--tracking-tight, .08em); text-transform: uppercase;
    color: color-mix(in srgb, var(--bar-fg) 56%, transparent);
  }
  .u-cdrow__variant-line { display: block; }
  .u-cdrow__variant-line + .u-cdrow__variant-line { margin-top: 2px; }
  .u-cdrow__variant b { color: color-mix(in srgb, var(--bar-fg) 82%, transparent); font-weight: 700; }

  /* Stepper + unit price sit under the title. They share a row when there's room,
     but the unit price wraps to its own line rather than crowding the stepper in
     the narrow drawer column. */
  .u-cdrow__controls {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: var(--s3, 12px); row-gap: 4px; margin-top: 3px;
  }
  .u-cdrow__unit {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .04em; white-space: nowrap;
    color: color-mix(in srgb, var(--bar-fg) 56%, transparent);
  }

  /* Quantity stepper — same shape as the cart page's, on the drawer palette. */
  .u-cdqty {
    display: inline-flex; align-items: center;
    border: 1px solid color-mix(in srgb, var(--bar-fg) 38%, transparent);
    border-radius: var(--radius-sm, 2px);
    overflow: hidden;
  }
  .u-cdqty__btn {
    width: 28px; height: 30px;
    display: grid; place-content: center;
    background: transparent; border: 0; color: var(--bar-fg);
    font-size: 15px; line-height: 1; cursor: pointer;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-cdqty__btn:hover { background: color-mix(in srgb, var(--bar-fg) 9%, transparent); }
  .u-cdqty__btn:disabled { opacity: .4; cursor: default; }
  .u-cdqty__val {
    width: 38px; align-self: stretch; padding: 0;
    text-align: center;
    font-family: var(--font-mono); font-size: var(--text-small, 13px);
    color: var(--bar-fg); background: transparent; border: 0; border-radius: 0;
    border-inline: 1px solid color-mix(in srgb, var(--bar-fg) 38%, transparent);
    -moz-appearance: textfield; appearance: textfield;
  }
  .u-cdqty__val::-webkit-outer-spin-button,
  .u-cdqty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .u-cdqty__val:focus { outline: none; }

  /* Right column: line total over a small remove link. */
  .u-cdrow__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; white-space: nowrap; }
  .u-cdrow__total {
    font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--bar-fg);
  }
  .u-cdrow__was {
    display: block; text-align: right;
    font-family: var(--font-mono); font-size: 11px;
    color: color-mix(in srgb, var(--bar-fg) 52%, transparent);
    text-decoration: line-through;
  }
  .u-cdrow__remove {
    width: 26px; height: 26px;
    display: inline-grid; place-content: center;
    background: transparent; border: 0; padding: 0; cursor: pointer;
    color: color-mix(in srgb, var(--bar-fg) 56%, transparent);
    transition: color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-cdrow__remove svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .u-cdrow__remove:hover { color: var(--color-sale, #d20a05); }
  .u-cdrow__remove:focus-visible { outline: 1.5px solid var(--bar-fg); outline-offset: 2px; }

  /* Recommendation strip host — sits between the scrolling list and the footer;
     natural height. Empty until the runtime injects the strip, so it adds nothing
     when there's nothing to show. The .u-cdrec* rules below style the injected
     strip: they live here (not in the recs section) because that section is an
     API-only target whose own stylesheet block is never compiled into the page —
     this snippet ships on every page via the header, so the styles are always
     present when the strip lands. */
  .u-cartdrawer__recs { flex: none; }

  .u-cdrec {
    padding: var(--s5, 24px);
    border-top: 1px solid var(--bar-line);
    background: #efe8d6;
  }
  .u-cdrec__title {
    margin: 0 0 var(--s5, 24px);
    font-family: var(--font-mono);
    font-size: var(--text-label-sm, 10.5px);
    font-weight: 700;
    letter-spacing: var(--tracking-label, .22em);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--bar-fg) 56%, transparent);
  }
  .u-cdrec__title-plus { font-weight: 700; }
  /* Tabs — "Va con esto" / "Similares". Mono uppercase; the active one is full-ink
     with a thick underline rule, the rest muted, sitting on a hairline baseline. */
  .u-cdrec__tabs {
    display: flex; gap: var(--s5, 24px);
    margin: 0 0 var(--s4, 16px);
    border-bottom: 1px solid color-mix(in srgb, var(--bar-fg) 18%, transparent);
  }
  .u-cdrec__tab {
    appearance: none; background: transparent; border: 0; cursor: pointer;
    padding: 0 0 8px; margin-bottom: -1px;
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-label, .22em); text-transform: uppercase;
    color: color-mix(in srgb, var(--bar-fg) 46%, transparent);
    border-bottom: 2px solid transparent;
    transition: color .24s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-cdrec__tab:hover { color: color-mix(in srgb, var(--bar-fg) 72%, transparent); }
  .u-cdrec__tab.is-active {
    color: var(--bar-fg); font-weight: 700;
    border-bottom-color: var(--bar-fg);
  }
  /* Vertical list of recommendation rows: thumb · (name / vendor · price) · add. */
  .u-cdrec__track { display: grid; gap: 10px; }
  .u-cdrec__card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: var(--s4, 16px);
    padding: 10px;
    background: var(--bar-bg);
    border: 1px solid var(--bar-line);
    border-radius: var(--radius-md, 4px);
  }
  /* The thumb + text are one link; the add button sits outside it. */
  .u-cdrec__link {
    display: contents;
    color: var(--bar-fg); text-decoration: none;
  }
  .u-cdrec__thumb {
    display: block; position: relative;
    width: 64px; height: 64px; overflow: hidden;
    background: color-mix(in srgb, var(--bar-fg) 8%, var(--bar-bg));
    border: 1px solid var(--bar-line);
  }
  .u-cdrec__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* No-image fallback — a centered placeholder glyph on the soft thumb fill. */
  .u-cdrec__placeholder { display: grid; place-items: center; width: 100%; height: 100%; }
  .u-cdrec__placeholder-svg { width: 56%; height: 56%; fill: color-mix(in srgb, var(--bar-fg) 16%, transparent); }
  .u-cdrec__info { min-width: 0; display: grid; gap: 3px; }
  .u-cdrec__name {
    font-family: var(--font-serif); font-size: 14px; line-height: 1.2;
    color: var(--bar-fg);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .u-cdrec__link:hover .u-cdrec__name { text-decoration: underline; text-underline-offset: 2px; }
  .u-cdrec__meta {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em;
    color: color-mix(in srgb, var(--bar-fg) 64%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .u-cdrec__vendor { text-transform: uppercase; letter-spacing: .08em; }
  /* Add button — dark square with a + glyph, like the cart-page tile. Auto-widens
     so the shared buy handler's "Agregando…/Agregado ✓" feedback text still fits. */
  .u-cdrec__add {
    flex: none; min-width: 40px; height: 40px; padding: 0 8px;
    display: grid; place-items: center;
    background: var(--bar-fg); color: var(--bar-bg);
    border: 0; border-radius: var(--radius-sm, 2px);
    font-family: var(--font-mono); font-size: 11px; line-height: 1;
    letter-spacing: .08em; white-space: nowrap;
    cursor: pointer;
    transition: opacity .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  /* The idle "+" glyph reads as an icon — larger than the status feedback text. */
  .u-cdrec__add:not([aria-busy]):not(:disabled) { font-size: 22px; letter-spacing: 0; }
  .u-cdrec__add:hover { opacity: .82; }
  .u-cdrec__add:disabled { opacity: .4; cursor: default; }

  /* ---- Footer -------------------------------------------------------------- */
  .u-cartdrawer__foot {
    flex: none;
    padding: var(--s5, 24px);
    border-top: 1px solid var(--bar-line);
    background: var(--bar-bg);
  }
  /* Summary breakdown — mirrors the cart page's u-summary: sans rows (Subtotal
     estimado · Envío · IVA incluido), then a divider and a bold Total. */
  .u-cartdrawer__sum { display: grid; gap: 10px; margin-bottom: var(--s4, 16px); }
  .u-cartdrawer__sum-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4, 16px);
    font-family: var(--font-sans); font-size: var(--text-small, 13px);
    color: color-mix(in srgb, var(--bar-fg) 78%, transparent);
  }
  .u-cartdrawer__sum-line--save { color: var(--color-discount, #e07b39); }
  .u-cartdrawer__sum-line--note { color: color-mix(in srgb, var(--bar-fg) 60%, transparent); }
  .u-cartdrawer__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4, 16px);
    padding-top: var(--s4, 16px); margin-bottom: var(--s4, 16px);
    border-top: 1px solid var(--bar-line);
  }
  .u-cartdrawer__total-label {
    font-family: var(--font-sans); font-size: var(--text-small, 13px);
    color: color-mix(in srgb, var(--bar-fg) 78%, transparent);
  }
  .u-cartdrawer__total-val {
    font-family: var(--font-serif); font-size: 26px; line-height: 1; font-weight: 700;
    letter-spacing: -.01em; color: var(--bar-fg);
  }
  /* "Llevate la mochila" — the filled primary button, tied to the drawer palette
     like the search drawer's "ver todos" button (fg fill over bg). */
  .u-cartdrawer__checkout {
    --cta-bg: var(--bar-fg);
    --cta-fg: var(--bar-bg);
    text-decoration: none;
  }
  /* "Seguir explorando" — ghost variant on the drawer palette (transparent fill,
     fg outline; inverts on hover). Themed here rather than via .u-btn--ghost so it
     reads against --bar-* instead of the global ink/paper. */
  .u-cartdrawer__continue {
    margin-top: var(--s3, 12px);
    --cta-bg: transparent;
    --cta-fg: var(--bar-fg);
    border-color: color-mix(in srgb, var(--bar-fg) 42%, transparent);
    text-decoration: none;
  }
  .u-cartdrawer__continue:hover {
    --cta-bg: var(--bar-fg);
    --cta-fg: var(--bar-bg);
    border-color: var(--bar-fg);
  }
  .u-cartdrawer__view {
    display: block; margin-top: var(--s3, 12px); text-align: center;
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-label, .22em); text-transform: uppercase;
    color: color-mix(in srgb, var(--bar-fg) 70%, transparent); text-decoration: none;
    transition: color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-cartdrawer__view:hover { color: var(--bar-fg); }

  /* ---- Empty state --------------------------------------------------------- */
  .u-cartdrawer__empty {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s3, 12px); text-align: center;
    padding: var(--s6, 32px) var(--s5, 24px);
  }
  .u-cartdrawer__empty-glyph { width: 64px; height: 64px; color: var(--bar-fg); }
  .u-cartdrawer__empty-glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
  .u-cartdrawer__empty-title {
    margin: 0;
    font-family: var(--font-serif); font-size: 22px; line-height: 1.15; font-weight: 700;
    color: var(--bar-fg);
  }
  .u-cartdrawer__empty-lead {
    margin: 0; max-width: 30ch;
    font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 1.45;
    color: color-mix(in srgb, var(--bar-fg) 72%, transparent);
  }
  .u-cartdrawer__empty .u-cartdrawer__view { margin-top: var(--s4, 16px); }
/* END_SNIPPET:ultreia-cart-drawer */

/* START_SNIPPET:ultreia-container (INDEX:44) */
.u-container {
    --site-container-max: 1600px;
    --site-container-pad: 32px;
    --site-container-pad-wide: 128px;
    --site-container-pad-sm: 16px;

    width: 100%;
    max-width: var(--site-container-max);
    margin-inline: auto;
    padding-inline: var(--site-container-pad);
  }
  /* wide: unrestrict the width (full bleed) and use more generous desktop
     gutters to keep content off the screen edges. */
  .u-container--wide {
    max-width: none;
    padding-inline: var(--site-container-pad-wide);
  }

  /* 600px: shared mobile breakpoint across ULTREIA sections (matches the
     footer's single-column collapse). Keep these in sync. On mobile, wide
     falls back to the same gutter as the standard container. */
  @media (max-width: 600px) {
    .u-container,
    .u-container--wide { padding-inline: var(--site-container-pad-sm); }
  }
/* END_SNIPPET:ultreia-container */

/* START_SNIPPET:ultreia-eyebrow (INDEX:45) */
/* Color comes from --accent (set by the host section) for the accented/box
     variants; the base label is a neutral warm ink. Fully palette-agnostic. */
  .u-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-label, 12px);
    letter-spacing: var(--tracking-eyebrow, .3em);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--color-ink-2, #4a4334);
    margin: 0;
  }
  .u-eyebrow--accent { color: var(--accent, var(--color-ultreia-ink)); }
  .u-eyebrow b, .u-eyebrow .u-num { color: var(--accent, var(--color-ultreia-ink)); font-weight: 700; }
  /* Numbered variant ("01 · Producto curado") — both the number and the label
     after the separator are bold. */
  .u-eyebrow--num { font-weight: 700; }
  .u-eyebrow--dash { display: inline-flex; align-items: center; gap: 14px; }
  .u-eyebrow__dash { width: 42px; height: 1px; background: currentColor; flex: none; }
  .u-eyebrow--box { display: inline-flex; align-items: center; gap: 0; background: var(--accent, var(--color-ultreia-ink)); color: #161310; font-weight: 700; padding: 9px 15px; border-radius: 2px; line-height: 1; }
/* END_SNIPPET:ultreia-eyebrow */

/* START_SNIPPET:ultreia-field (INDEX:46) */
.u-field { display: grid; gap: var(--s2, 8px); }
  .u-field__label {
    font-family: var(--font-mono);
    font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-label, .22em);
    text-transform: uppercase;
    color: var(--color-ink-2, #4a4334);
  }
  .u-input, .u-select, .u-textarea {
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: var(--text-small, 14px);
    color: var(--color-ultreia-ink);
    background: color-mix(in srgb, var(--color-sand, #e2dcc9) 55%, var(--color-ultreia-paper));
    border: 1px solid var(--color-ultreia-line);
    border-radius: var(--radius-sm, 2px);
    padding: 13px 14px;
    width: 100%;
    transition: border-color .28s var(--ease, cubic-bezier(.2,.6,.2,1)), background .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-input::placeholder, .u-textarea::placeholder { color: var(--color-muted, #6f6857); }
  .u-input:focus, .u-select:focus, .u-textarea:focus { outline: none; border-color: var(--color-ultreia-ink); background: var(--color-ultreia-paper); }
  .u-field__help { font-style: italic; font-size: var(--text-small, 14px); color: var(--color-muted, #6f6857); }
/* END_SNIPPET:ultreia-field */

/* START_SNIPPET:ultreia-filters (INDEX:47) */
/* ULTREIA · Filter sidebar — ported from the design handoff (.u-filters et al).
     Colors are overridable per collection via --filters-* CSS vars set inline by
     the caller (same pattern as ultreia-product-card). The accent (checked box,
     price fill, active size/swatch) prefers an explicit --filters-accent, then
     the collection theme's --accent, then ink. */
  .u-filters {
    --_accent: var(--filters-accent, var(--accent, var(--color-ink, #1a1a1a)));
    display: grid; gap: var(--s6, 32px); align-content: start;
    background: var(--filters-surface, var(--uc-surface, var(--color-paper, #faf9f4)));
    padding: 32px 26px 26px;
    /* Same border as the product card: 1px, square, themed per section. */
    border: 1px solid var(--filters-border, #d8d0bf);
    margin: 0;
  }
  .u-filters__group {
    display: grid; gap: var(--s3, 12px);
    padding-bottom: var(--s6, 32px);
    border-bottom: var(--bw, 1px) solid var(--color-line, #e3ddcf);
  }
  .u-filters__group:last-of-type { border-bottom: 0; padding-bottom: 0; }
  .u-filters__title {
    margin: 0 0 var(--s2, 8px);
    font-family: var(--font-mono, monospace); font-weight: 700;
    font-size: var(--text-label, 12px); letter-spacing: var(--tracking-label, .12em);
    text-transform: uppercase; color: var(--filters-title, var(--color-ink, #1a1a1a));
  }

  /* Sort group — square select fully themed by the rail's --filters-* overrides:
     text + caret follow --filters-item, surface --filters-surface, border
     --filters-border, focus ring the accent. */
  .u-filters__sort {
    width: 100%;
    font-family: var(--font-mono, monospace); font-size: var(--text-label-sm, 11px);
    letter-spacing: var(--tracking-tight, .04em);
    color: var(--filters-item, var(--color-ink, #1a1a1a));
    padding: 9px 30px 9px 12px;
    border: var(--bw, 1px) solid var(--filters-border, var(--color-line-strong, #c9c1b0));
    border-radius: var(--radius-sm, 2px);
    background-color: var(--filters-surface, var(--uc-surface, var(--color-paper, #fff)));
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    cursor: pointer;
  }
  /* Caret drawn as a mask so it inherits --filters-item instead of being baked
     into a fixed-color SVG. Anchored to the select wrapper, vertically centered. */
  .u-filters__sort-wrap { position: relative; display: block; }
  .u-filters__sort-wrap::after {
    content: ""; position: absolute; right: 12px; top: 50%; translate: 0 -50%;
    width: 10px; height: 6px; pointer-events: none;
    background-color: var(--filters-item, var(--color-ink, #1a1a1a));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .u-filters__sort:focus { outline: none; border-color: var(--_accent); }

  /* Value lists cap their height so a filter with many values (e.g. brand,
     color) scrolls within the group instead of stretching the whole rail.
     The scrollbar follows the rail's themed line/accent colors. */
  .u-checks {
    display: grid; gap: var(--s3, 12px);
    max-height: 240px; overflow-y: auto;
    /* room so the scrollbar doesn't sit on top of the count column */
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line-strong, #c9c1b0) transparent;
  }
  .u-swatches, .u-sizes { max-height: 200px; overflow-y: auto; }
  .u-checks::-webkit-scrollbar,
  .u-swatches::-webkit-scrollbar,
  .u-sizes::-webkit-scrollbar { width: 6px; }
  .u-checks::-webkit-scrollbar-thumb,
  .u-swatches::-webkit-scrollbar-thumb,
  .u-sizes::-webkit-scrollbar-thumb {
    background: var(--color-line-strong, #c9c1b0);
    border-radius: var(--radius-pill, 999px);
  }
  .u-checks::-webkit-scrollbar-track,
  .u-swatches::-webkit-scrollbar-track,
  .u-sizes::-webkit-scrollbar-track { background: transparent; }

  /* Checkbox rows (list / boolean filters) */
  .u-check {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    font-family: var(--font-sans, inherit); font-size: var(--text-small, 14px);
    color: var(--filters-item, var(--color-ink-2, #4a443a)); text-decoration: none;
  }
  .u-check__box {
    width: 15px; height: 15px; flex: none;
    border: var(--bw, 1px) solid var(--color-line-strong, #c9c1b0);
    border-radius: var(--radius-sm, 2px);
    display: grid; place-items: center;
    transition: all var(--dur, .28s) var(--ease, ease);
  }
  .u-check__box::after {
    content: "✓"; font-size: 10px; color: var(--color-paper, #fff); opacity: 0;
  }
  .u-check__box[data-checked="true"] { background: var(--_accent); border-color: var(--_accent); }
  .u-check__box[data-checked="true"]::after { opacity: 1; }
  .u-check__label { flex: 1 1 auto; }
  .u-check__count {
    margin-left: auto; font-family: var(--font-mono, monospace);
    font-size: var(--text-label-sm, 10.5px); color: var(--filters-count, var(--color-muted, #8a8270));
  }

  /* Price range — display track + real number inputs */
  .u-range { display: grid; gap: var(--s2, 8px); }
  .u-range__vals {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono, monospace); font-size: var(--text-label-sm, 10.5px);
    color: var(--filters-item, var(--color-ink-2, #4a443a));
  }
  .u-range__track {
    height: 4px; position: relative; margin: 12px 0;
    background: var(--color-line-strong, #c9c1b0);
    border-radius: var(--radius-pill, 999px);
  }
  .u-range__fill {
    position: absolute; height: 100%;
    background: var(--_accent); border-radius: var(--radius-pill, 999px);
  }
  .u-range__knob {
    position: absolute; top: 50%; width: 14px; height: 14px;
    background: var(--color-paper, #fff);
    border: var(--bw-2, 1.5px) solid var(--color-ink, #1a1a1a);
    border-radius: var(--radius-pill, 999px); translate: -50% -50%;
  }
  .u-range__inputs { display: flex; align-items: center; gap: 6px; }
  .u-range__inputs input {
    width: 100%; min-width: 0; padding: 6px 8px;
    border: var(--bw, 1px) solid var(--color-line-strong, #c9c1b0);
    border-radius: var(--radius-sm, 2px);
    font: inherit; font-size: var(--text-label-sm, 11px);
  }
  .u-range__dash { color: var(--color-muted, #8a8270); }
  .u-range__apply {
    flex: none; padding: 6px 12px;
    border: var(--bw, 1px) solid var(--_accent); background: var(--_accent);
    color: var(--color-paper, #fff); border-radius: var(--radius-sm, 2px);
    font-family: var(--font-mono, monospace); font-size: var(--text-label-sm, 11px);
    text-transform: uppercase; letter-spacing: var(--tracking-tight, .04em);
    cursor: pointer;
  }

  /* Swatches & sizes */
  .u-swatches, .u-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
  .u-swatch {
    width: 26px; height: 26px; border-radius: var(--radius-pill, 999px);
    border: var(--bw, 1px) solid var(--color-line, #e3ddcf);
    cursor: pointer; transition: box-shadow var(--dur, .28s) var(--ease, ease);
  }
  .u-swatch--active {
    box-shadow: 0 0 0 2px var(--color-paper, #fff), 0 0 0 3px var(--_accent);
  }
  .u-size {
    min-width: 42px; text-align: center; padding: 8px 0;
    border: var(--bw, 1px) solid var(--color-line, #e3ddcf);
    border-radius: var(--radius-sm, 2px);
    font-family: var(--font-mono, monospace); font-size: var(--text-label-sm, 11px);
    letter-spacing: var(--tracking-tight, .04em); color: var(--filters-item, var(--color-ink-2, #4a443a));
    text-decoration: none; cursor: pointer;
    transition: all var(--dur, .28s) var(--ease, ease);
  }
  .u-size--active, .u-size:hover {
    background: var(--_accent); color: var(--color-paper, #fff); border-color: var(--_accent);
  }

  /* Zero-result values read as muted and non-interactive. */
  .u-facet-link.is-disabled { opacity: .4; pointer-events: none; cursor: default; }
/* END_SNIPPET:ultreia-filters */

/* START_SNIPPET:ultreia-nav-drawer (INDEX:51) */
/* ----------------------------------------------------------------------------
     Nav drawer (.u-drawer). Reads --bar-bg / --bar-fg / --bar-line (passed from the
     header), defaulting to the brand cream/ink scheme so the drawer always matches
     the bar.
     ---------------------------------------------------------------------------- */
  .u-drawer {
    --bar-bg:   var(--color-ultreia-paper);
    --bar-fg:   var(--color-ultreia-ink);
    --bar-line: var(--color-ultreia-line);
    position: fixed; inset: 0; z-index: 90;
    visibility: hidden; pointer-events: none;
    font-family: var(--font-serif);
  }
  .u-drawer *, .u-drawer *::before, .u-drawer *::after { box-sizing: border-box; }
  .u-drawer[data-open="true"] { visibility: visible; pointer-events: auto; }
  .u-drawer__scrim {
    position: absolute; inset: 0;
    background: var(--color-veil-ink, rgba(26,26,26,.55));
    opacity: 0; transition: opacity .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-drawer[data-open="true"] .u-drawer__scrim { opacity: 1; }
  .u-drawer__panel {
    position: absolute; inset-block: 0; left: 0;
    width: min(87vw, 392px); max-width: 100%;
    display: flex; flex-direction: column;
    background: var(--bar-bg); color: var(--bar-fg);
    border-right: 1px solid var(--bar-line);
    box-shadow: var(--shadow-pop, 0 12px 40px -12px rgba(26,26,26,.32));
    transform: translateX(-100%);
    transition: transform .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-drawer--right .u-drawer__panel {
    left: auto; right: 0;
    border-right: 0; border-left: 1px solid var(--bar-line);
    transform: translateX(100%);
  }
  .u-drawer[data-open="true"] .u-drawer__panel { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) {
    .u-drawer__panel, .u-drawer__scrim { transition: none; }
  }
  .u-drawer__head {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    gap: var(--s4, 16px); min-height: var(--site-bar-h, 80px);
    padding-inline: var(--s5, 24px);
    border-bottom: 1px solid var(--bar-line);
  }
  .u-drawer__logo {
    display: inline-flex; align-items: center;
    color: var(--bar-fg); line-height: 0; text-decoration: none;
  }
  .u-drawer__logo .u-flogo__img { width: clamp(96px, 28vw, 116px); height: auto; display: block; }
  .u-drawer .u-iconbtn {
    --iconbtn-sz: 38px;
    width: var(--iconbtn-sz); height: var(--iconbtn-sz); flex: none;
    display: inline-grid; place-items: center;
    border: 0; background: transparent; color: var(--bar-fg);
    border-radius: var(--radius-sm, 2px); cursor: pointer;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-drawer .u-iconbtn:hover { background: color-mix(in srgb, var(--bar-fg) 13%, transparent); }
  .u-drawer__close { margin-right: calc((38px - 19px) / -2); }
  .u-drawer__close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .u-drawer__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 0 0 var(--s5, 24px);
    -webkit-overflow-scrolling: touch;
  }
  /* Shared search-field chrome: the nav drawer no longer carries a search field
     (search lives in ultreia-search-drawer), but that drawer reuses these rules. */
  .u-drawer__search { position: relative; margin: var(--s4, 16px); }
  .u-drawer__search svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; pointer-events: none;
    fill: none; stroke: var(--color-muted, #6f6857); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .u-drawer__search .u-input { padding-left: 42px; }
  .u-drawer__eyebrow {
    margin: var(--s5, 24px) var(--s5, 24px) var(--s2, 8px);
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-eyebrow, .3em); text-transform: uppercase;
    color: color-mix(in srgb, var(--bar-fg) 52%, transparent);
  }
  /* "Tienda" tiles — the submenu of the collapsible Tienda row: a stacked column
     of slim horizontal bars, each a number + name over the same photo. */
  .u-drawer__tiles {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0;
    /* Always the brand cream, independent of the drawer's configured --bar-bg. */
    background: var(--color-ultreia-paper);
  }
  .u-drawer__tile {
    position: relative; display: flex; align-items: center; gap: .7em;
    /* Match the menu rows (.u-drawer__link): same min-height + horizontal padding. */
    min-height: 56px; padding: 14px var(--s5, 24px);
    overflow: hidden; isolation: isolate; text-decoration: none;
    background: var(--color-ultreia-ink, #1a1a1a); color: #fff;
  }
  .u-drawer__tilemedia, .u-drawer__tileshade { position: absolute; inset: 0; z-index: 0; }
  .u-drawer__tilemedia { background-position: center; background-size: cover; background-repeat: no-repeat; }
  .u-drawer__tileshade {
    background: linear-gradient(to right, rgba(20,22,24,.85) 0%, rgba(20,22,24,.55) 60%, rgba(20,22,24,.4) 100%);
  }
  .u-drawer__tile--solid .u-drawer__tileshade { background: rgba(20,22,24,.45); }
  .u-drawer__tilenum {
    position: relative; z-index: 1; flex: none;
    font-family: var(--font-serif, serif); font-size: 26px; line-height: .9;
    color: var(--color-ultreia-accent, var(--color-accent, #e0a32e));
  }
  .u-drawer__tilename {
    position: relative; z-index: 1;
    font-family: var(--font-serif, serif); font-size: 17px;
    letter-spacing: var(--tracking-tight, .02em); text-transform: lowercase; color: #fff;
  }
  .u-drawer__tile:focus-visible { outline: 1.5px solid #fff; outline-offset: -3px; }
  /* Current collection — gold left-rule (matches the menu rows) + lightened photo.
     The tile has overflow:hidden and a photo/shade layered with z-index over the
     box, so an inset box-shadow gets clipped/covered. Paint the rule as an overlay
     pseudo-element above all the tile layers instead. */
  .u-drawer__tile.is-current::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 2;
    background: var(--color-ultreia-accent, var(--color-accent, #e0a32e));
  }
  .u-drawer__tile.is-current .u-drawer__tileshade { background: rgba(20,22,24,.3); }

  .u-drawer__nav { display: flex; flex-direction: column; }
  .u-drawer__row { border-top: 1px solid var(--bar-line); }
  /* The first row sits flush under the head's bottom border; drop its own
     border-top so the two don't stack into a 2px line under the logo. */
  .u-drawer__nav > .u-drawer__row:first-child { border-top: 0; }
  .u-drawer__nav > .u-drawer__row:last-child { border-bottom: 1px solid var(--bar-line); }
  .u-drawer__link {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3, 12px);
    width: 100%; min-height: 56px; padding: 14px var(--s5, 24px);
    font-family: var(--font-mono); font-size: 14px;
    letter-spacing: var(--tracking-label, .22em); text-transform: uppercase;
    color: var(--bar-fg); text-align: left; text-decoration: none;
    appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-drawer__link:hover { background: color-mix(in srgb, var(--bar-fg) 7%, transparent); }
  .u-drawer__link:focus-visible { outline: 1.5px solid var(--bar-fg); outline-offset: -3px; }
  /* Current page: accent left-rule only (no background tint). */
  .u-drawer__link.is-current {
    box-shadow: inset 3px 0 0 var(--color-ultreia-accent, var(--color-accent, #e0a32e));
  }
  /* Parent rows: the title is a real link; a separate button toggles the accordion. */
  .u-drawer__head-row { display: flex; align-items: stretch; }
  .u-drawer__head-row .u-drawer__link { flex: 1 1 auto; }
  .u-drawer__acc {
    flex: none; display: inline-grid; place-items: center;
    width: 56px; min-height: 56px; padding: 0;
    appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer;
    color: var(--bar-fg);
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-drawer__acc:hover { background: color-mix(in srgb, var(--bar-fg) 7%, transparent); }
  .u-drawer__acc:focus-visible { outline: 1.5px solid var(--bar-fg); outline-offset: -3px; }
  .u-drawer__chev {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    opacity: .55; transition: transform .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease, cubic-bezier(.2,.6,.2,1)); }
  .u-drawer__sub > div { overflow: hidden; min-height: 0; }
  .u-drawer__row[data-open="true"] > .u-drawer__sub { grid-template-rows: 1fr; }
  .u-drawer__row[data-open="true"] .u-drawer__chev { transform: rotate(180deg); }
  .u-drawer__sublink {
    display: block; padding: 11px var(--s5, 24px) 11px var(--s6, 32px);
    font-family: var(--font-serif); font-size: 16px; line-height: 1.3;
    color: color-mix(in srgb, var(--bar-fg) 82%, transparent); text-decoration: none;
    transition: color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-drawer__sublink:last-child { padding-bottom: var(--s4, 16px); }
  .u-drawer__sublink:hover { color: var(--bar-fg); }
  .u-drawer__sublink.is-current { color: var(--bar-fg); font-weight: 600; }
  .u-drawer__acts { display: flex; flex-direction: column; }
  .u-drawer__act {
    display: flex; align-items: center; gap: var(--s4, 16px);
    width: 100%; min-height: 54px; padding: 12px var(--s5, 24px);
    font-family: var(--font-mono); font-size: 13px;
    letter-spacing: var(--tracking-tight, .08em); text-transform: uppercase;
    color: var(--bar-fg); text-align: left; text-decoration: none;
    appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer;
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-drawer__act:hover { background: color-mix(in srgb, var(--bar-fg) 7%, transparent); }
  .u-drawer__act:focus-visible { outline: 1.5px solid var(--bar-fg); outline-offset: -3px; }
  .u-drawer__act svg {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .u-drawer__act-label { flex: 1 1 auto; }
  /* Saved-items count pill, trailing the Favoritos row. Inverted (fg on bg) to
     match the header badge; collapses out of flow when the count is zero. */
  .u-drawer__act-count {
    flex: none;
    min-width: 20px; height: 20px; padding: 0 6px;
    display: grid; place-items: center;
    background: var(--bar-fg); color: var(--bar-bg);
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1;
  }
  .u-drawer__act-count[data-count="0"] { display: none; }
  .u-drawer__foot {
    flex: none; padding: var(--s5, 24px);
    border-top: 1px solid var(--bar-line);
  }
  .u-drawer__sign {
    font-family: var(--font-serif); font-style: italic; font-size: 13px;
    color: color-mix(in srgb, var(--bar-fg) 56%, transparent); text-align: center;
  }
/* END_SNIPPET:ultreia-nav-drawer */

/* START_SNIPPET:ultreia-product-card-skeleton (INDEX:52) */
/* Mirrors ultreia-product-card: bordered flex column, 4/4.5 stage, padded
     body. Tinted placeholders with a quiet shimmer read as "loading" without a
     spinner; sizing matches the real card so a swap-in shifts nothing. */
  .u-pcsk {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    border: 1px solid var(--pcsk-border, #d8d0bf);
    background: var(--pcsk-stage, #fff);
    overflow: hidden;
  }
  .u-pcsk__stage {
    aspect-ratio: 4 / 4.5;
    background: var(--pcsk-stage, #fff);
  }
  .u-pcsk__body {
    display: flex; flex-direction: column; gap: .375rem;
    /* px-5 py-4 + border-t — same as .u-pcard__link */
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--pcsk-border, #d8d0bf);
    background: var(--pcsk-body, #f1efe9);
  }
  .u-pcsk__line {
    display: block;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--pcsk-tint, currentColor) 12%, transparent);
  }
  /* Heights/widths echo the real lines: vendor (10.5px mono caps), title
     (text-base serif), price (text-sm mono). */
  .u-pcsk__line--vendor { height: 10.5px; width: 42%; }
  .u-pcsk__line--title  { height: 1rem;   width: 82%; }
  .u-pcsk__line--price  { height: .875rem; width: 34%; }

  .u-pcsk__line::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--pcsk-tint, currentColor) 9%, transparent),
      transparent
    );
    animation: u-pcsk-shimmer 1.3s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .u-pcsk__line::after { animation: none; }
  }
  @keyframes u-pcsk-shimmer {
    100% { transform: translateX(100%); }
  }
/* END_SNIPPET:ultreia-product-card-skeleton */

/* START_SNIPPET:ultreia-product-card (INDEX:53) */
/* Hover image treatment: a pure opacity crossfade between the two images.
     Only `opacity` animates — it's composited, so there's no movement and no
     per-frame re-raster of the bitmap. Single-image cards have no hover effect. */
  .u-pcard__img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    backface-visibility: hidden;
    transition: opacity .6s cubic-bezier(.2, .6, .2, 1);
  }

  /* While the primary image loads, the stage shows a shimmering placeholder so
     the empty area never flashes the image's alt text. The primary image starts
     transparent and fades in once it reports loaded (.is-loaded). The swap image
     keeps its own opacity logic below, so this only governs the primary. */
  .u-pcard__stage { background: var(--pcard-stage, #fff); }
  /* The shimmer only runs while a real primary image is still loading. Gating on
     `.has-img` (set only when product.featured_image exists) means image-less
     products show a static stage + placeholder instead of shimmering forever. */
  .u-pcard__stage.has-img {
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--pcard-text, #1a1a1a) 5%, transparent) 30%,
      color-mix(in srgb, var(--pcard-text, #1a1a1a) 11%, transparent) 50%,
      color-mix(in srgb, var(--pcard-text, #1a1a1a) 5%, transparent) 70%) var(--pcard-stage, #fff);
    background-size: 200% 100%;
    animation: u-pcard-shimmer 1.3s ease-in-out infinite;
  }

  /* Placeholder shown when a product has no image at all. */
  .u-pcard__placeholder {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: var(--pcard-stage, #fff);
  }
  .u-pcard__placeholder-svg {
    width: 60%; height: 60%;
    fill: color-mix(in srgb, var(--pcard-text, #1a1a1a) 14%, transparent);
  }
  .u-pcard__img--primary { opacity: 0; }
  .u-pcard__img--primary.is-loaded { opacity: 1; }
  /* Once the primary image is in, stop the shimmer and clear the placeholder. */
  .u-pcard__stage.has-img:has(.u-pcard__img--primary.is-loaded) { animation: none; background: var(--pcard-stage, #fff); }

  @keyframes u-pcard-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .u-pcard__stage { animation: none; } }

  /* The swap image sits on top of the primary and fades in. The primary stays
     fully opaque underneath the whole time, so the dark stage never shows
     through at the crossfade midpoint (which read as a black flash). */
  .u-pcard__stage.has-swap .u-pcard__img--swap {
    opacity: 0;
    will-change: opacity;
  }
  /* Trigger on card hover, not stage hover: the stretched-link ::after overlay
     (z-index 1) sits above the stage and would otherwise eat the stage's
     :hover, so hovering the image never crossfaded. */
  .u-pcard:hover .u-pcard__stage.has-swap .u-pcard__img--swap { opacity: 1; }

  /* Discount badge: top-right of the stage, above the image but below the
     stretched-link overlay (z-index 2 < the link's ::after at 1 is intentional —
     the badge is non-interactive, so the link still covers it for clicks). */
  .u-pcard__badge {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    pointer-events: none;
  }
  /* The shared sale badge is red (alerts); a price markdown reads as orange.
     Recolor just this card's discount badge without touching the global token. */
  .u-pcard__badge .u-badge--sale {
    background: var(--color-discount, #e07b39);
    border-color: var(--color-discount, #e07b39);
  }
  /* Match the insignia badge size so both corners read at the same scale. */
  .u-pcard__badge .u-badge {
    font-size: var(--text-label, 12px);
    padding: 6px 11px;
  }

  /* Insignia badges: top-left of the stage, stacked vertically (top-down) when a
     product has more than one. Same non-interactive z-index treatment as the
     discount badge so the stretched link still owns clicks. */
  .u-pcard__insignias {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    pointer-events: none;
  }
  /* Match the larger PDP insignia size so badges read clearly on the card image. */
  .u-pcard__insignias .u-badge {
    font-size: var(--text-label, 12px);
    padding: 6px 11px;
  }

  /* On-sale price runs red to match the badge; the original price sits after it,
     struck through and muted. */
  .u-pcard__price--sale { color: var(--color-discount, #e07b39); }
  .u-pcard__price-was {
    margin-left: .5em;
    color: color-mix(in srgb, var(--pcard-text, #1a1a1a) 55%, transparent);
    text-decoration-thickness: 1px;
  }

  /* Stretched-link pattern: the footer <a> covers the whole card via ::after,
     so the card is clickable while the buy button (a real sibling above it in
     z-order) stays independently clickable. */
  .u-pcard__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Buy button overlays the bottom of the image stage. Sits above the stretched
     link (z-index 3 > 1). Hidden until the card is hovered/focused; on touch
     it's always shown via the no-hover media query. */
  .u-pcard__buy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 6px));
    z-index: 3;
    padding: .7rem 1rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-ultreia-ink, #1a1a1a);
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: var(--radius-sm, 2px);
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease;
  }
  .u-pcard:hover .u-pcard__buy,
  .u-pcard:focus-within .u-pcard__buy {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .u-pcard__buy:hover { background: var(--color-ultreia-ink, #1a1a1a); border-color: var(--color-ultreia-ink, #1a1a1a); color: #ffffff; }
  .u-pcard__buy[disabled] { opacity: 0; pointer-events: none; }
  .u-pcard__buy[aria-busy="true"] { opacity: 1; cursor: default; }

  /* "Máximo" cap: unlike a sold-out button (which stays hidden), a maxed button
     must be SEEN so the shopper understands why they can't add — reveal it on
     hover/focus like the normal buy button, but muted and non-interactive. */
  .u-pcard__buy[data-maxed] { pointer-events: none; cursor: not-allowed; background: var(--color-sand, #e2dcc9); border-color: var(--color-sand, #e2dcc9); color: var(--color-muted, #6f6857); }
  .u-pcard:hover .u-pcard__buy[data-maxed],
  .u-pcard:focus-within .u-pcard__buy[data-maxed] { opacity: 1; transform: translate(-50%, -50%); }

  /* Touch devices have no hover: keep the button visible so it's reachable. */
  @media (hover: none) {
    .u-pcard__buy { opacity: 1; transform: translate(-50%, -50%); }
    .u-pcard__buy[disabled] { opacity: .5; }
    .u-pcard__buy[data-maxed] { opacity: 1; }
  }
/* END_SNIPPET:ultreia-product-card */

/* START_SNIPPET:ultreia-quick-shop-modal (INDEX:54) */
.u-qsm[hidden] { display: none; }
    .u-qsm {
      position: fixed; inset: 0; z-index: 1000;
      display: flex; align-items: center; justify-content: center;
      padding: clamp(12px, 4vw, 32px);
    }
    .u-qsm__scrim { position: absolute; inset: 0; background: rgba(17, 17, 15, .55); backdrop-filter: blur(2px); }
    .u-qsm__dialog {
      position: relative; z-index: 1;
      display: flex; flex-direction: column;
      width: min(560px, 100%);
      max-height: 90vh;
      background: var(--color-ultreia-paper, #f1efe9);
      border: 1px solid var(--color-line-strong, rgba(26,26,26,.2));
      border-radius: var(--radius-sm, 4px);
      padding: clamp(18px, 2.5vw, 26px);
    }
    /* The body scrolls, not the dialog — so the absolutely-positioned close
       button stays pinned to the dialog instead of scrolling with the content
       (which made its hitbox drift away from the visible glyph). */
    .u-qsm__body { overflow-y: auto; min-height: 0; padding-right: 4px; }
    /* Hover treatment mirrors the header icon buttons (.u-iconbtn): a soft
       tinted fill that eases in, plus a focus-visible outline. */
    .u-qsm__close {
      position: absolute; top: 12px; right: 12px; z-index: 2;
      display: flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; padding: 0; line-height: 1;
      font-size: 28px; cursor: pointer;
      background: transparent; border: none;
      border-radius: var(--radius-sm, 2px);
      color: var(--color-ultreia-ink, #1a1a1a);
      transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1)), color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
    }
    .u-qsm__close:hover { background: color-mix(in srgb, var(--color-ultreia-ink, #1a1a1a) 13%, transparent); }
    .u-qsm__close:focus-visible { outline: 1.5px solid var(--color-ultreia-ink, #1a1a1a); outline-offset: 1px; }

    /* Section Rendering wraps the fetched section in `.shopify-section`, which
       the theme styles as a display:grid with --page-margin gutters on its left
       and right columns. Inside the modal that adds phantom horizontal padding
       (and none top/bottom), so the modal looks lopsided. Flatten the wrapper
       here so the modal's own padding is the only padding. */
    .u-qsm__body .shopify-section { display: block; width: 100%; }
    .u-qsm__body .shopify-section > * { grid-column: auto; }
    .u-qsm__error { font-family: var(--font-mono); font-size: 13px; }
    .u-qsm__spinner {
      width: 28px; height: 28px; margin: 40px auto;
      border: 2px solid var(--color-line-strong, rgba(26,26,26,.2));
      border-top-color: var(--color-ultreia-ink, #1a1a1a);
      border-radius: 50%;
      animation: u-qsm-spin .7s linear infinite;
    }
    @keyframes u-qsm-spin { to { transform: rotate(360deg); } }
/* END_SNIPPET:ultreia-quick-shop-modal */

/* START_SNIPPET:ultreia-reveal (INDEX:55) */
/* Reveal-on-scroll primitives. The element (or each [data-ur-reveal-item]
     child) starts offset + transparent and settles once .is-revealed lands. */
  [data-ur-reveal] {
    --ur-reveal-step: 0.08s;
  }

  [data-ur-reveal]:not([data-ur-reveal-has-items]),
  [data-ur-reveal-item] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
  }

  [data-ur-reveal].is-revealed:not([data-ur-reveal-has-items]),
  [data-ur-reveal].is-revealed [data-ur-reveal-item] {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger: each item leans on its index for an incremental delay. */
  [data-ur-reveal].is-revealed [data-ur-reveal-item]:nth-child(1) { transition-delay: calc(var(--ur-reveal-step) * 1); }
  [data-ur-reveal].is-revealed [data-ur-reveal-item]:nth-child(2) { transition-delay: calc(var(--ur-reveal-step) * 2); }
  [data-ur-reveal].is-revealed [data-ur-reveal-item]:nth-child(3) { transition-delay: calc(var(--ur-reveal-step) * 3); }
  [data-ur-reveal].is-revealed [data-ur-reveal-item]:nth-child(4) { transition-delay: calc(var(--ur-reveal-step) * 4); }
  [data-ur-reveal].is-revealed [data-ur-reveal-item]:nth-child(5) { transition-delay: calc(var(--ur-reveal-step) * 5); }
  [data-ur-reveal].is-revealed [data-ur-reveal-item]:nth-child(6) { transition-delay: calc(var(--ur-reveal-step) * 6); }
  [data-ur-reveal].is-revealed [data-ur-reveal-item]:nth-child(n + 7) { transition-delay: calc(var(--ur-reveal-step) * 7); }

  @media (prefers-reduced-motion: reduce) {
    [data-ur-reveal]:not([data-ur-reveal-has-items]),
    [data-ur-reveal-item] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_SNIPPET:ultreia-reveal */

/* START_SNIPPET:ultreia-search-drawer (INDEX:56) */
/* Most chrome (.u-drawer, panel slide, scrim, head) is inherited from the nav
     drawer's stylesheet. Only the search-specific bits live here. */

  /* Pin the drawer's palette to the brand cream/ink scheme — the same tokens the
     header/footer default to — so the search panel always reads cream-on-ink
     regardless of any custom navbar color. Set on the root so every descendant's
     var(--bar-bg / --bar-fg / --bar-line) below resolves to this scheme. */
  .u-searchdrawer {
    --bar-bg: var(--color-ultreia-paper, #f6f1e7);
    --bar-fg: var(--color-ultreia-ink, #1a1a1a);
    --bar-line: var(--color-ultreia-line, rgba(26, 26, 26, 0.16));
  }

  .u-searchdrawer__title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-label, .22em);
    text-transform: uppercase;
    color: var(--bar-fg);
  }

  /* The predictive search panel can get tall; let the body scroll. */
  .u-searchdrawer .u-drawer__body { display: flex; flex-direction: column; }
  .u-searchdrawer__form { flex: none; }

  .u-searchdrawer__results {
    display: flex; flex-direction: column;
    padding: 0 var(--s4, 16px) var(--s4, 16px);
  }
  /* A quiet status line for loading / empty states. */
  .u-searchdrawer__status {
    padding: var(--s3, 12px) var(--s2, 8px);
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-tight, .08em); text-transform: uppercase;
    color: color-mix(in srgb, var(--bar-fg) 52%, transparent);
  }

  /* Result rows: thumbnail · (title / vendor) · price. The whole row is a link. */
  .u-searchdrawer__item {
    display: flex; align-items: center; gap: var(--s3, 12px);
    padding: 10px var(--s2, 8px);
    text-decoration: none; color: var(--bar-fg);
    border-top: 1px solid var(--bar-line);
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-searchdrawer__item:first-child { border-top: 0; }
  .u-searchdrawer__item:hover { background: color-mix(in srgb, var(--bar-fg) 7%, transparent); }
  .u-searchdrawer__item:focus-visible { outline: 1.5px solid var(--bar-fg); outline-offset: -3px; }
  /* Thumb stage — same loading treatment as the product card, scaled down: a
     shimmering placeholder while loading, then the image fades in on `load`. */
  .u-searchdrawer__thumb {
    position: relative; flex: none; display: block;
    width: 52px; height: 58px; overflow: hidden;
    /* Base skeleton fill — a soft gray box, visible even before the shimmer
       sweep, so the empty thumb reads as "loading" rather than blank paper. */
    background: color-mix(in srgb, var(--bar-fg) 9%, var(--color-ultreia-paper, #fff));
    border: 1px solid var(--bar-line);
  }
  .u-searchdrawer__thumb-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .4s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-searchdrawer__thumb-img.is-loaded { opacity: 1; }
  /* Skeleton shimmer while a real image loads (mirrors .u-pcard__stage.has-img,
     but with more contrast since the thumb is small). The sweep rides over the
     base gray fill above. */
  .u-searchdrawer__thumb.has-img {
    background:
      linear-gradient(100deg,
        transparent 20%,
        color-mix(in srgb, var(--bar-fg) 16%, transparent) 50%,
        transparent 80%),
      color-mix(in srgb, var(--bar-fg) 9%, var(--color-ultreia-paper, #fff));
    background-size: 200% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: u-searchdrawer-shimmer 1.1s ease-in-out infinite;
  }
  @keyframes u-searchdrawer-shimmer {
    from { background-position: 200% 0, 0 0; }
    to { background-position: -200% 0, 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .u-searchdrawer__thumb.has-img { animation: none; }
    .u-searchdrawer__thumb-img { transition: none; }
  }
  /* No image: keep the soft skeleton box (no shimmer) as a neutral placeholder. */
  .u-searchdrawer__thumb--empty { display: block; }
  .u-searchdrawer__meta { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
  .u-searchdrawer__vendor {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--bar-fg) 56%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .u-searchdrawer__name {
    font-family: var(--font-serif); font-size: 15px; line-height: 1.25;
    color: var(--bar-fg);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .u-searchdrawer__price {
    flex: none; font-family: var(--font-mono); font-size: 13px;
    letter-spacing: .04em; color: var(--bar-fg); white-space: nowrap;
  }

  /* "Ver todos los resultados" — a shared filled .u-btn (see above). This rule
     only handles its placement (a gap above) and ties the button's fill to the
     drawer's own palette: filled with the foreground over the background, so it
     stays dark-on-light or light-on-dark to match whatever surface the header
     gives the drawer (--bar-fg / --bar-bg). .u-btn reads --cta-bg / --cta-fg. */
  .u-searchdrawer__all {
    --cta-bg: var(--bar-fg);
    --cta-fg: var(--bar-bg);
    margin-top: var(--s3, 12px);
    text-decoration: none;
  }
/* END_SNIPPET:ultreia-search-drawer */

/* START_SNIPPET:ultreia-stat (INDEX:58) */
/* Base typography only; the host context (hero / teaser / header) overrides the
     size and color of .u-stat__num / .u-stat__label to fit its surface. */
  .u-stat { display: grid; gap: 3px; }
  .u-stat__num { font-family: var(--font-serif); font-size: var(--text-h3, clamp(23px, 2.2vw, 30px)); line-height: 1; color: inherit; }
  .u-stat__label { font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px); letter-spacing: var(--tracking-tight, .08em); text-transform: uppercase; color: var(--color-muted, #6f6857); }
/* END_SNIPPET:ultreia-stat */

/* START_SNIPPET:ultreia-wishlist-button (INDEX:59) */
/* Heart toggle. Inherits the host section's ink/paper roles. Outline by
     default; on .is-active the heart fills (currentColor) and the pill inverts. */
  .u-wish {
    display: inline-flex; align-items: center; gap: .72em;
    appearance: none; -webkit-appearance: none; cursor: pointer;
    font-family: var(--font-mono); font-size: var(--text-label-sm, 10.5px);
    letter-spacing: var(--tracking-label, .22em); text-transform: uppercase; line-height: 1;
    padding: 13px 20px;
    background: transparent; color: var(--color-ultreia-ink, #1a1a1a);
    border: 1px solid var(--color-line-strong, rgba(26,26,26,.42));
    border-radius: var(--radius-pill, 999px);
    transition: background .28s var(--ease, cubic-bezier(.2,.6,.2,1)), color .28s var(--ease, cubic-bezier(.2,.6,.2,1)), border-color .28s var(--ease, cubic-bezier(.2,.6,.2,1));
  }
  .u-wish__ic { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }
  .u-wish svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: fill .28s var(--ease, cubic-bezier(.2,.6,.2,1)); }
  .u-wish:hover { border-color: var(--color-ultreia-ink, #1a1a1a); }
  .u-wish.is-active { color: var(--color-sale, #d20a05); border-color: var(--color-sale, #d20a05); }
  .u-wish.is-active svg { fill: currentColor; }

  /* Icon-only variant — a bare heart, e.g. pinned on a product card. */
  .u-wish--icon {
    padding: 0; width: 38px; height: 38px; justify-content: center; gap: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-ultreia-paper, #f6f1e7);
  }
  .u-wish--icon:hover { background: var(--color-ultreia-paper, #f6f1e7); }
/* END_SNIPPET:ultreia-wishlist-button */