/* ============================================================
   components.css — reusable pieces: buttons, chips, cards,
   frames, product tiles, size rows, cart drawer, signup
   ============================================================ */

/* ---------- buttons ---------- */

.cta-bar,
.catalog__status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cta-bar {
  background: var(--brand);
  color: #fff;
}

.cta-bar:hover {
  background: var(--brand-dark);
  color: #fff;
}

.catalog__status {
  background: var(--bg);
  color: var(--ink-dim);
  cursor: default;
}

.catalog__status.is-active {
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}

.catalog__status.is-active:hover { background: var(--brand-dark); }

.pill,
.ghost-button {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  min-height: var(--tap);
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.pill:hover,
.ghost-button:hover { background: rgba(243, 239, 230, 0.1); }

.ghost-button {
  min-height: 40px;
  color: var(--brand-hi);
  border-color: var(--brand-hi);
}

.solid-button {
  flex: 0 0 auto;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.solid-button:hover { background: var(--brand-dark); }

.solid-button--block {
  width: 100%;
  min-height: 56px;
  font-size: 12px;
}

.solid-button:disabled {
  background: rgba(243, 239, 230, 0.1);
  color: var(--ink-mute);
  cursor: default;
}

.link-button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}

.link-button:hover { color: var(--brand-hi); }

/* The two buttons on the right of the header: cuenta and bolsa. */
.header-button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
}

.header-button:hover { color: var(--brand-hi); }
.header-button.is-filled { color: var(--brand-hi); }

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  flex: 0 0 auto;
}

.account-button::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.account-button.is-filled::before { background: currentColor; }

/* ---------- perfil flotante ----------
   Bottom left, opposite the bag: same bone family, two separate corners, so
   neither ever covers the other. */

.profile-fab {
  position: fixed;
  left: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 19;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--paper);
  color: var(--bg);
  box-shadow: 0 18px 44px rgba(8, 7, 10, 0.6);
  animation: fab-rise 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.profile-fab:hover { background: var(--ink-bright); }

.profile-fab__initial {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .profile-fab { animation: none; }
}

.has-profile-fab .page { padding-bottom: calc(var(--gutter-sm) + 64px); }

/* On a phone the bag is a full-width bar, so the corners stop being separate
   and the avatar has to sit above it. */
@media (max-width: 620px) {
  .has-bag-fab .profile-fab {
    bottom: calc(var(--gutter) + 76px + env(safe-area-inset-bottom, 0px));
  }

  .has-profile-fab .page {
    padding-bottom: calc(var(--gutter-sm) + 76px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- perfil: el menú ---------- */

.profile {
  position: fixed;
  inset: 0;
  z-index: 23;
  display: flex;
  justify-content: flex-start;   /* it opens from the side the avatar is on */
  padding: var(--gutter-sm);
}

.profile__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 10, 0.88);
}

.profile__panel {
  position: relative;
  width: min(92vw, 360px);
  height: 100%;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: profile-in 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes profile-in {
  from { transform: translateX(-16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .profile__panel { animation: none; }
}

.profile__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
}

.profile__close svg { width: 12px; height: 12px; }
.profile__close:hover { color: var(--ink); background: rgba(243, 239, 230, 0.1); }

.profile__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 44px;
}

.profile__avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--paper);
  color: var(--bg);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}

.profile__id { min-width: 0; }

.profile__name {
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.profile__mail {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  overflow-wrap: anywhere;
}

.profile__menu {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.profile__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
}

.profile__item:hover:not(:disabled):not(.is-disabled) {
  color: var(--brand-hi);
}

.profile__item-meta {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* Not wired yet, and saying so beats looking live and doing nothing. */
.profile__item:disabled,
.profile__item.is-disabled {
  cursor: default;
  color: var(--ink-mute);
}

.profile__signout {
  margin-top: auto;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.profile__signout:hover:not(:disabled) {
  background: rgba(243, 239, 230, 0.08);
  color: var(--ink);
}

/* ---------- pedidos ----------
   One card per order. The track says where it is; the link says the rest. */

.orders {
  position: fixed;
  inset: 0;
  z-index: 22;
  display: flex;
  align-items: flex-start;
  padding: var(--gutter-sm);
}

.orders__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 10, 0.88);
}

.orders__sheet {
  position: relative;
  width: 100%;
  max-height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: bag-drop 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .orders__sheet { animation: none; }
}

.orders__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gutter);
  padding: clamp(16px, 2.2vw, 32px) clamp(16px, 2.2vw, 32px) clamp(14px, 1.6vw, 24px);
}

.orders__headline {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.4vw, 24px);
  flex-wrap: wrap;
}

.orders__title {
  font-size: clamp(34px, 5vw, 76px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.orders__note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.orders__close {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.orders__close:hover { color: var(--ink); }

.orders__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 clamp(16px, 2.2vw, 32px) clamp(16px, 2.2vw, 32px);
}

.orders__empty {
  padding: clamp(28px, 6vw, 80px) 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.orders__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- pedidos: un pedido ---------- */

.order {
  background: rgba(243, 239, 230, 0.035);
  border-radius: 16px;
  padding: clamp(16px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.order.is-off { opacity: 0.55; }

.order__head {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto 0.5fr 0.6fr 0.9fr;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
}

.order__number {
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.order__date {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

.order__thumbs { display: flex; }

.order__thumb {
  width: 44px;
  height: 55px;
  flex: 0 0 auto;
  margin-right: -12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--surface);
}

.order__thumb:last-child { margin-right: 0; }

.order__thumb img { width: 100%; height: 100%; object-fit: cover; }

.order__cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.order__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.45);
}

.order__value {
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.order__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.order__status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ink-mute);
}

.order__status.is-live .order__status-dot,
.order__status.is-wait .order__status-dot { background: var(--brand-hi); }
.order__status.is-done .order__status-dot { background: var(--ink); }
.order__status.is-wait { color: var(--brand-hi); }

/* ---------- pedidos: el recorrido ---------- */

.order__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.order__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* the rail each stage sits on */
.order__stage::before {
  content: "";
  height: 2px;
  border-radius: 2px;
  background: rgba(243, 239, 230, 0.12);
}

.order__stage.is-done::before { background: var(--ink); }
.order__stage.is-now::before { background: var(--brand-hi); }

.order__stage.is-done { color: var(--ink-dim); }
.order__stage.is-now { color: var(--brand-hi); }

.order__stage-dot { display: none; }

.order__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.order__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.order__line:last-child { border-bottom: 0; }

.order__line-name { color: var(--ink); min-width: 0; }
.order__line-meta { color: var(--ink-mute); white-space: nowrap; }
.order__line-price { color: var(--ink-dim); white-space: nowrap; }

.order__status-link {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.order__status-link:hover { color: var(--brand-hi); }

@media (max-width: 900px) {
  .order__head {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .order__id { grid-column: 1 / -1; }
  .order__thumbs { grid-column: 1 / -1; }
  .order__cell--status { grid-column: 1 / -1; }
  .order__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 4px; }
}

@media (max-width: 620px) {
  .order__line { grid-template-columns: 1fr auto; }
  .order__line-meta { grid-column: 1; }
}

/* ---------- cuenta ----------
   A small card, not a full sheet: signing in is one short task, and the
   page behind it is where the shopper was going anyway. */

.auth {
  position: fixed;
  inset: 0;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.auth__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 10, 0.88);
}

.auth__card {
  position: relative;
  width: min(100%, 420px);
  max-height: 100%;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: bag-drop 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .auth__card { animation: none; }
}

.auth__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
}

.auth__close svg { width: 12px; height: 12px; }
.auth__close:hover { color: var(--ink); background: rgba(243, 239, 230, 0.1); }

.auth__title {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink-bright);
  padding-right: 44px;
}

.auth__lead,
.auth__note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.auth__hosted,
.auth__account {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth__error,
.bag__error {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-hi);
}

.auth__submit {
  min-height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth__submit:hover:not(:disabled) { background: var(--brand-dark); }

.auth__submit:disabled {
  background: var(--stone);
  color: var(--ink-mute);
  cursor: default;
}

/* Salir is not the action the card is for, so it does not take the ember. */
.auth__submit--quiet {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
}

.auth__submit--quiet:hover:not(:disabled) {
  background: rgba(243, 239, 230, 0.08);
  color: var(--ink);
}

.auth__who {
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.auth__mail,
.auth__orders {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.auth__orders {
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- chips ---------- */

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

.chip[aria-pressed='true'] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.chip__swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid rgba(243, 239, 230, 0.4);
  background: var(--swatch, transparent);
}

.chip[aria-pressed='true'] .chip__swatch { border-color: rgba(255, 255, 255, 0.7); }

/* ---------- image frames ---------- */

.frame {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--3x4 { aspect-ratio: 3 / 4; }
.frame--1x1 { aspect-ratio: 1 / 1; background: var(--stone); }

.is-peek { opacity: 0.55; }

/* ---------- arranque: cargando y falla ----------
   Deliberately still. A pulsing shimmer on eight tiles reads as a page that
   is broken, not a page that is busy. */

.skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton__frame {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  background: rgba(243, 239, 230, 0.05);
}

.skeleton__line {
  height: 11px;
  width: 70%;
  border-radius: 999px;
  background: rgba(243, 239, 230, 0.05);
}

.skeleton__button {
  height: 44px;
  border-radius: 999px;
  background: rgba(243, 239, 230, 0.035);
}

.catalog__status--boot {
  background: var(--bg);
  color: var(--ink-mute);
  cursor: default;
}

.catalog__failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: clamp(34px, 7vw, 90px) var(--gutter);
}

.catalog__failed-title {
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.catalog__failed-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  max-width: 34ch;
}

.catalog__failed .ghost-button { margin-top: 8px; }

/* ---------- product card ---------- */

.product {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
}

.product__flag--out {
  background: rgba(8, 7, 10, 0.92);
  color: var(--ink);
}

/* ---------- spin viewer ---------- */

.spin {
  perspective: 1100px;
  touch-action: pan-y;
  user-select: none;
}

.spin__prism {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.spin__prism.is-tracking { transition: transform 180ms ease-out; }
.spin__prism.is-settling { transition: transform 650ms var(--ease-entrance); }

.spin__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  backface-visibility: hidden;
}

.spin__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* The face turning away goes into shadow, which is most of what sells it. */
.spin__face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 10, 0.5);
  opacity: var(--shade, 0);
  pointer-events: none;
  transition: opacity 180ms ease-out;
}

.spin__prism.is-settling .spin__face::after { transition-duration: 650ms; }

.spin__dots {
  position: absolute;
  left: 12px;
  bottom: 15px;
  display: flex;
  gap: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease);
}

.spin__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(8, 7, 10, 0.25);
  transition: background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}

.spin__dots span.is-on {
  background: var(--bg);
  transform: scale(1.3);
}

.spin__hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(8, 7, 10, 0.72);
  border: 1px solid var(--line);
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease);
}

.spin--active .spin__hint,
.spin--active .spin__dots { opacity: 1; }

/* No hover on touch to discover it by, so the cues stay up. */
@media (hover: none) {
  .spin__hint,
  .spin__dots { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .spin__face::after { transition: none; }
}

.product__line,
.piece__line {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.product__line { margin: 2px 0 -6px; }

/* "Suena: <canción>" under the name. min-height keeps a blank one (a cap
   with no song) as tall as a filled one, so the buy buttons stay level. */
.product__song {
  min-height: 14px;
  margin-top: -6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}

.catalog__grid:not(.has-songs) .product__song { display: none; }
.piece__line { margin-bottom: 6px; }

/* Every text that names a line wears that line's colour. data-line sets the
   colour once; the elements below read it. */
[data-line='clasicas'] { --line-color: var(--line-clasicas); }
[data-line='premium']  { --line-color: var(--line-premium); }
[data-line='diamante'] { --line-color: var(--line-diamante); }

.product__line[data-line],
.piece__line[data-line],
.chip[data-line]:not([aria-pressed='true']) { color: var(--line-color); }

.product__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product__name {
  line-height: 1.4;
  min-height: 31px;
}

/* The photo and the name both open the piece. */
.product__open {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
}

.product__open .frame { transition: opacity 180ms ease; }
.product__open:hover .frame { opacity: 0.86; }

.product__name-button {
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.product__name-button:hover { color: var(--brand-hi); }

.product__price {
  color: var(--ink-dim);
  white-space: nowrap;
}

.product__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.size-button {
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  user-select: none;
}

.size-button[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.size-button:disabled {
  cursor: default;
  border-color: var(--line);
  color: var(--ink-mute);
  background: none;
}

.product__buy {
  width: 100%;
  border-radius: 999px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-solid);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product__buy.is-in-bag {
  border-color: var(--brand-hi);
  color: var(--brand-hi);
}

.product__buy:disabled {
  border-color: var(--line);
  color: var(--ink-mute);
  cursor: default;
}

/* ---------- size guide rows ---------- */

.size-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-items: center;
  text-align: left;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}

.size-row[aria-pressed='true'] {
  background: var(--brand);
  color: #fff;
}

/* ---------- progress ---------- */

.progress {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  background: #fff;
  width: 0;
}

/* ---------- la raza tiles ---------- */

.fan {
  flex: 0 0 auto;
  width: clamp(150px, 19vw, 260px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fan__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.fan__wears {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--brand-hi);
}

.fan__wears:hover { text-decoration: underline; }

.fan__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- signup ---------- */

.signup {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.signup__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}

.signup__row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signup__input {
  flex: 1 1 200px;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--line-solid);
  border-radius: 999px;
  color: var(--ink);
  min-height: 48px;
  padding: 0 18px;
  font-size: 13px;
}

.signup__notice {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink);
  min-height: 14px;
}

/* ---------- la pieza ----------
   The full view of one product: what it is on the left, what it looks
   like on the right, and one way to buy it across the top. */

.piece {
  position: fixed;
  inset: 0;
  z-index: 21;
  display: flex;
  padding: var(--gutter-sm);
}

.piece__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 10, 0.88);
}

.piece__sheet {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  animation: bag-drop 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .piece__sheet { animation: none; }
}

/* ---------- la pieza: barra ---------- */

.piece__bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(280px, 0.9fr);
  align-items: stretch;
  gap: clamp(10px, 1.2vw, 18px);
}

/* Nothing to pick (one size, one colour): the buy button takes the room.
   The bar is shorter then, so the heading clears the close button itself
   instead of relying on the picks panel to make the row tall. */
@media (min-width: 1081px) {
  .piece__bar:has(.piece__picks[hidden]) {
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 0.9fr);
  }
  .piece__bar:has(.piece__picks[hidden]) .piece__heading { padding-left: 64px; }
}

.piece__heading {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: clamp(18px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.piece__title {
  font-size: clamp(22px, 2.5vw, 38px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

/* Rule 4 speaks in ember, but as text — the ember fill in this view is Pagar. */
.piece__left {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-hi);
}

.piece__picks {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: clamp(14px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.piece__pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.piece__pick-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.45);
}

.piece__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 340px;
}

.piece__chip {
  min-width: 44px;
  min-height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.piece__chip:hover:not(:disabled):not([aria-pressed='true']) {
  background: rgba(243, 239, 230, 0.16);
}

.piece__chip[aria-pressed='true'] {
  background: var(--ink);
  color: var(--bg);
}

.piece__chip:disabled {
  cursor: default;
  color: var(--ink-mute);
  text-decoration: line-through;
}

.piece__guide {
  align-self: flex-start;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.piece__guide:hover { color: var(--ink); background: rgba(243, 239, 230, 0.08); }

.piece__buy {
  border-radius: var(--radius-sm);
  min-height: 96px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.piece__buy:hover:not(:disabled) { background: var(--brand-dark); }

.piece__buy:disabled {
  background: var(--stone);
  color: var(--ink-mute);
  cursor: default;
}

.piece__close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  background: var(--surface);
}

.piece__close svg { width: 12px; height: 12px; }
.piece__close:hover { color: var(--ink); background: rgba(243, 239, 230, 0.1); }

/* ---------- la pieza: cuerpo ---------- */

.piece__body {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: clamp(10px, 1.2vw, 18px);
  align-items: start;
}

.piece__spec {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
}

.piece__features {
  list-style: none;
  margin: 0;
  padding: 0;
}

.piece__feature {
  position: relative;
  padding: 13px 0 13px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.piece__feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 999px;
  background: var(--brand-hi);
}

/* Shopify's copy, not ours: a long code or URL with nowhere to break used
   to push the sheet sideways. Same rule the profile's mail line already uses. */
.piece__desc,
.piece__feature,
.piece__title,
.product__name,
.bag-line__name,
.order__line-name {
  overflow-wrap: anywhere;
}

.piece__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
}

/* ---------- la pieza: la canción ---------- */

.piece__song {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--line);
}

.piece__song-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* The lyric is the one line here set in display type: it is the reason the
   cap exists, so it reads louder than the description under it. */
.piece__lyric {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-bright);
  overflow-wrap: anywhere;
}

.piece__song-links {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.piece__song-links a { color: var(--brand-hi); }
.piece__song-links a:hover { text-decoration: underline; }

/* white-space: a verse keeps its line breaks; a few lines, so a step down. */
.piece__lyric { white-space: pre-line; font-size: clamp(18px, 1.5vw, 22px); }
.piece__play { align-self: flex-start; }
.piece__player { width: 100%; }

.piece__ship-title {
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.piece__ship-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* `white-space: nowrap` held while the terms were "Arriba de $50" and broke
   the moment they told the truth: a term that cannot wrap has no maximum
   width, so it pushed the whole sheet sideways on a phone. Right-aligned so
   it still reads as a column once it takes two lines. */
.piece__ship-terms {
  color: var(--ink-dim);
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.piece__ship-returns {
  padding-top: 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* What comes in the box. Gold, because what it promises is gold ink. */
.piece__ship-includes {
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--line-diamante);
}

.piece__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
}

/* One photo gets the whole column, but at a garment's proportions — stretched
   to the full width it crops the piece off its own photograph. */
.piece__gallery.is-single {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.piece__gallery.is-single .piece__shot { width: min(100%, 520px); }

/* "Así se ve puesta": the worn photos start on their own row. */
.piece__gallery-label {
  grid-column: 1 / -1;
  padding-top: clamp(10px, 1.2vw, 18px);
}

/* ---------- la pieza: angosto ---------- */

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

  /* The heading is short here, so the title shares its line with the close. */
  .piece__heading {
    grid-column: 1 / -1;
    padding-left: 58px;
  }
  .piece__buy { min-height: 72px; }
  .piece__body { grid-template-columns: 1fr; }
  /* Stacked, the photos come first: you look at the cap before you read
     about shipping. */
  .piece__gallery { order: -1; }
  .piece__bar:has(.piece__picks[hidden]) .piece__buy { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .piece__bar { grid-template-columns: 1fr; }
  .piece__chips { max-width: none; }
  .piece__gallery { grid-template-columns: minmax(0, 1fr); }
  .piece__buy { min-height: 64px; }
}

/* ---------- bolsa flotante ---------- */

.bag-fab {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px 10px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 18px 44px rgba(8, 7, 10, 0.6);
  animation: fab-rise 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.bag-fab:hover { background: var(--ink-bright); }

/* The floating bag hovers over the page, so the page ends above it. */
.has-bag-fab .page { padding-bottom: calc(var(--gutter-sm) + 64px); }

@media (max-width: 620px) {
  .has-bag-fab .page { padding-bottom: calc(var(--gutter-sm) + 76px + env(safe-area-inset-bottom, 0px)); }
}

.bag-fab__count {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0;
}

.bag-fab__total {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(8, 7, 10, 0.6);
}

@keyframes fab-rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bag-fab { animation: none; }
}

@media (max-width: 620px) {
  .bag-fab {
    left: var(--gutter);
    right: var(--gutter);
    justify-content: space-between;
  }
}

/* ---------- bolsa (hoja) ----------
   Not a side drawer: a sheet the width of the page, because a bag is a
   table you read across — pieza, precio, color, talla, cuántas. */

.bag {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;   /* content-height: the sheet drops, it does not stretch */
  padding: var(--gutter-sm);
}

.bag__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 10, 0.82);
}

.bag__sheet {
  position: relative;
  width: 100%;
  max-height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: bag-drop 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes bag-drop {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bag__sheet { animation: none; }
}

/* ---------- bolsa: cabecera ---------- */

.bag__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--gutter);
  padding: clamp(16px, 2.2vw, 32px) clamp(16px, 2.2vw, 32px) clamp(14px, 1.6vw, 24px);
}

.bag__headline {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.4vw, 24px);
  min-width: 0;
}

.bag__title {
  font-size: clamp(38px, 6vw, 92px);
  line-height: 0.86;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.bag__note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  padding-top: 0.35em;
}

.bag__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.bag__close {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.bag__close:hover { color: var(--ink); }

.bag__chev {
  width: 14px;
  height: 9px;
  stroke-linecap: square;
}

.bag__total-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.bag__total {
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink-bright);
}

.bag__clear {
  justify-self: end;
  align-self: center;
  min-height: 40px;
}

/* ---------- bolsa: cuerpo ---------- */

.bag__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 clamp(16px, 2.2vw, 32px) clamp(16px, 2.2vw, 32px);
  padding-bottom: clamp(60px, 9vh, 116px);   /* room for the drop mark below */
}

/* The drop, ghosted behind the lines — the same number the counter shows. */
.bag__watermark {
  position: absolute;
  inset: auto 0 -0.16em 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: clamp(34px, 6.5vw, 104px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.05);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.bag__empty {
  position: relative;
  padding: clamp(28px, 6vw, 80px) 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.bag__lines {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- bolsa: una línea ---------- */

.bag-line {
  display: grid;
  grid-template-columns: 84px minmax(150px, 1.1fr) 0.8fr 1fr 1fr 1fr auto;
  grid-template-areas:
    "thumb name precio color talla qty quitar"
    "thumb cap  cap    cap   cap   cap quitar";
  align-items: center;
  gap: clamp(10px, 1.3vw, 22px);
  padding: 16px clamp(14px, 1.4vw, 20px);
  background: rgba(243, 239, 230, 0.035);
  border-radius: 16px;
  transition: background 160ms ease;
}

.bag-line:hover { background: rgba(243, 239, 230, 0.06); }

.bag-line__thumb {
  grid-area: thumb;
  align-self: start;
  width: 84px;
  height: 105px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}

/* The gallery's photos are links to the full-size file. */
a.frame { display: block; }

.bag-line__thumb img { transition: opacity 180ms ease; }
.bag-line__thumb:hover img { opacity: 0.86; }

.bag-line__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bag-line__name {
  grid-area: name;
  font-size: clamp(15px, 1.4vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  min-width: 0;
}

.bag-line__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bag-line__cell--precio { grid-area: precio; gap: 4px; }
.bag-line__cell--color  { grid-area: color; }
.bag-line__cell--talla  { grid-area: talla; }
.bag-line__cell--qty    { grid-area: qty; }

.bag-line__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.45);
}

.bag-line__price {
  font-size: clamp(15px, 1.3vw, 20px);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.bag-line__each {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.bag-line__chip,
.bag-line__stepper {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  border-radius: 999px;
  background: rgba(8, 7, 10, 0.55);
}

/* The size chips inside a bag line. Same control as the cards use, packed
   tighter because the talla cell is one column of a row, not a row of its
   own — and allowed to wrap, since a piece can have more sizes than fit. */
.bag-line__sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 40px;
}

.size-button--bag {
  min-width: 34px;
  min-height: 34px;
  padding: 0 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.bag-line__chip {
  justify-content: center;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.bag-line__stepper {
  justify-content: space-between;
  padding: 0 4px;
}

.qty-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  user-select: none;
}

.qty-button:hover:not(:disabled) { background: rgba(243, 239, 230, 0.1); }

.qty-button:disabled {
  cursor: default;
  color: var(--ink-mute);
}

.bag-line__count {
  font-family: var(--font-mono);
  font-size: 12px;
  min-width: 20px;
  text-align: center;
}

.bag-line__remove {
  grid-area: quitar;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.bag-line__remove:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(243, 239, 230, 0.08);
}

.bag-line__remove:disabled { cursor: default; }

/* Rule 4: never let anyone reach for what is not there. */
.bag-line__cap {
  grid-area: cap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-hi);
}

/* ---------- bolsa: pagar ---------- */

/* Sits directly above the pay button, where the eye already is when a
   mutation has just failed. Inherits its look from .auth__error. */
.bag__error {
  padding: 14px clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--line);
}

.bag__pay {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bag__pay:hover:not(:disabled) { background: var(--brand-dark); }

.bag__pay:disabled {
  background: var(--stone);
  color: var(--ink-mute);
  cursor: default;
}

/* ---------- bolsa: angosto ---------- */

@media (max-width: 1080px) {
  .bag__head {
    grid-template-columns: 1fr auto;
    row-gap: 16px;
  }

  .bag__summary {
    align-items: flex-end;
    text-align: right;
  }

  .bag__clear { grid-column: 2; }

  .bag-line {
    grid-template-columns: 96px 1fr 1fr;
    grid-template-areas:
      "thumb name   name"
      "thumb precio color"
      "talla qty    quitar"
      "cap   cap    cap";
    align-items: end;
    row-gap: 14px;
  }

  .bag-line__name { align-self: start; }
  .bag-line__cell { align-items: flex-start; }
  .bag-line__remove { align-self: end; }
}

@media (max-width: 620px) {
  .bag__headline { flex-direction: column; gap: 8px; }
  .bag__note { padding-top: 0; }

  .bag-line {
    grid-template-columns: minmax(84px, 1fr) 1.4fr;
    grid-template-areas:
      "thumb  name"
      "thumb  precio"
      "color  talla"
      "qty    qty"
      "cap    cap"
      "quitar quitar";
    padding: 14px;
  }

  .bag-line__thumb { width: 72px; height: 90px; justify-self: start; }
  .bag__pay { min-height: 60px; }
}

/* ================================================================ opening ==
   The first screen, on load.

   This is the one place in this file where a stylesheet hides something by
   itself, and the reason that is allowed here is that it cannot get stuck.
   Every rule below is a finite `animation` with `both`: it holds the `from`
   keyframe for exactly as long as it runs and then holds the `to` — opaque,
   untransformed, the page that has always shipped. No script starts it and,
   more to the point, no script has to arrive and finish it.

   That is the opposite of the reveal block underneath, where `opacity: 0` is
   a STATE that only JavaScript lifts. Which is why that one is armed from JS
   and this one must not be: reveal.js is `defer`, so it runs after this
   markup has painted. Below the fold that is invisible and fine. Above the
   fold it would show the hero and then snatch it away — the flash the whole
   reveal design exists to avoid. Above the fold there is nowhere to hide
   except a stylesheet, because a stylesheet blocks the first paint.

   The block lives inside `no-preference` rather than carrying the usual
   per-selector `reduce` override. A missed override anywhere else in this
   file costs an unwanted animation; a missed override HERE would leave
   someone looking at a blank homepage. `no-preference` also fails safe on a
   browser that has never heard of the query — no match, no rule, nothing
   hidden — which a `reduce` override cannot do.

   Everything settles within about 1.6s, the last of it a fade on the two
   mono tags. The mass of it — photograph, headline, CTA — has landed by 1.3s.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  @keyframes open-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes open-up {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

  /* The photograph resolves rather than arrives: it settles out of a slight
     over-scale, under everything else, for longer than everything else.

     `scale` and not `transform: scale()`, deliberately. reveal.js writes
     `transform` on this exact element on every scroll frame, and an
     animation outranks an inline style — so a `transform` keyframe here
     would silently eat the drift for a second and then hand it back with a
     jump. As separate properties the two compose: the drift owns
     `transform`, the opening owns `scale`. */
  @keyframes open-media {
    from { opacity: 0; scale: 1.06; }
    to   { opacity: 1; scale: 1; }
  }

  .hero__media {
    animation: open-media var(--dur-open-media) var(--ease-entrance) both;
  }

  /* The frame before the content: brand, sections, bag. The page gets its
     edges first, then what is inside them. */
  .header .brand,
  .header .nav__link,
  .header .header__actions {
    animation: open-fade var(--dur-open) var(--ease-entrance) both;
  }

  .header .brand           { animation-delay: 80ms; }
  .header .nav__link:nth-child(1) { animation-delay: 140ms; }
  .header .nav__link:nth-child(2) { animation-delay: 180ms; }
  .header .nav__link:nth-child(3) { animation-delay: 220ms; }
  .header .nav__link:nth-child(4) { animation-delay: 260ms; }
  .header .nav__link:nth-child(5) { animation-delay: 300ms; }
  .header .header__actions { animation-delay: 340ms; }

  /* Then the words. These rise; the small type only fades, because 26px of
     travel on an 11px mono label reads as a glitch rather than an entrance. */
  .hero__title,
  .hero__meta,
  .cta-bar {
    animation: open-up var(--dur-open) var(--ease-entrance) both;
  }

  .hero__title { animation-delay: 420ms; }
  .hero__meta  { animation-delay: 560ms; }
  /* Before the two mono tags, not after them. On a phone the hero fills
     the screen and this ember bar is the only other thing on it — being
     the last to arrive left the first screen looking unfinished for
     longer than it had to. The tags are 11px labels; they can wait. */
  .cta-bar     { animation-delay: 620ms; }

  .hero__tag {
    animation: open-fade var(--dur-open) var(--ease-entrance) both;
  }

  .hero__tag--left  { animation-delay: 640ms; }
  .hero__tag--right { animation-delay: 700ms; }
}

/* ================================================================= reveal ==
   Sections arriving on scroll.

   Nothing here hides anything by itself: every hiding rule is behind
   `.is-armed`, and only reveal.js adds that — and only to things below the
   fold. No script, no observer, or reduced motion, and none of this applies.
   ========================================================================= */

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

[data-reveal].is-armed,
[data-reveal-group].is-armed > * {
  opacity: 0;
  transform: translateY(40px);
}

[data-reveal].is-in,
[data-reveal-group].is-in > * {
  animation: reveal-up var(--dur-reveal) var(--ease-entrance) both;
}

/* Siblings arrive in order. `--i` is written by reveal.js and capped, so a
   grid of eight staggers and a grid of forty does not take a minute. */
[data-reveal-group].is-in > * {
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-armed,
  [data-reveal].is-in,
  [data-reveal-group].is-armed > *,
  [data-reveal-group].is-in > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- la pieza: the photo leans in under the cursor ---------- */

/* hover:hover keeps this off touch, where there is no hover to speak of and
   a sticky :hover state would just look broken after a tap. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product__open .frame img {
    transition: transform 320ms var(--ease-entrance);
  }
  .product__open:hover .frame img {
    transform: scale(1.04);
  }
}

/* ================================================================ topbar ==
   The condensed bar. Fixed rather than sticky — see navbar.js for why the
   obvious approach is not available here.
   ========================================================================= */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Below every overlay: fabs 19, bag 20, pieza 21, pedidos/cuenta 22,
     perfil 23. A navigation bar floating over an open sheet is a bug. */
  z-index: 18;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
  padding: 10px clamp(12px, 1.8vw, 26px);
  background: rgba(8, 7, 10, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  animation: bag-drop var(--dur-entrance) var(--ease-entrance);
}

@media (prefers-reduced-motion: reduce) {
  .topbar { animation: none; }
}

.topbar__brand {
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  color: var(--ink-bright);
}

.topbar__nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar__link {
  white-space: nowrap;
  color: var(--ink-mute);
  min-height: var(--tap);
  display: flex;
  align-items: center;
}

.topbar__link:hover { color: var(--ink); }

/* The section you are actually in. Colour alone, no underline — the mono
   caps are already doing enough work. */
.topbar__link.is-current { color: var(--brand-hi); }

.topbar__bag {
  flex: 0 0 auto;
  font-size: 10px;
}

@media (max-width: 620px) {
  /* The brand goes first on a phone: the nav needs the width more than the
     wordmark does, and the full header two scrolls up still carries it. */
  .topbar__brand { display: none; }
}