:root {
  --color-sage: #71BC78;
  --color-forest: #008000;
  --color-lime: #00FF00;
  --color-teal: #009D71;
  --color-mint: #77DD77;
  --color-olive: #568203;
  --color-hunter: #06500C;
  --color-grass: #6BB323;
  --color-spring: #0BDA51;
  --color-orange: #ff9800;
  --color-orange-dark: #e28000;
  /* 068-tracking-page-seller-ratings (constitution v1.5.0): a single
     status-only exception, NOT part of the brand palette above. Valid
     only for the "🔵 Enviados" shipment-status indicator — never on a
     button, link, or any other element. */
  --color-status-shipped: #1E88E5;
  --bg: #f4f7f5;
  --card: #fff;
  --text: #1a1a1a;
  --muted: #5e5e5e;
  --err: #b42318;
  font-family: "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header.app {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap;
  position: relative;
  z-index: 3;
  padding: 0.75rem 1.25rem; background: var(--color-hunter); color: #fff;
}
header.app a { color: #fff; text-decoration: none; margin-left: 0.75rem; }
header.app #logout {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px; padding: 0.2rem 0.65rem; cursor: pointer; margin-left: 0;
}
/* 097-header-sell-button: visible Sell entry in the Home header, between the
   account status and the menu toggle; palette orange per Principle VII. */
header.app .sell-btn {
  background: var(--color-orange); color: #fff; font-weight: 700;
  /* 101-rounded-home (FR-003): pill, like the menu buttons (100).
     Padding unchanged — the 097 mobile header fit is preserved. */
  border-radius: 999px; padding: 0.4rem 0.8rem; margin-left: 0.75rem;
  white-space: nowrap; text-decoration: none;
}
header.app .sell-btn:hover, header.app .sell-btn:active { background: var(--color-orange-dark); }
/* 097 fix: with the Sell button added, the signed-in header (brand +
   lang + cart + greeting + Sell + menu toggle) needs 480px at
   min-content and overflows small phones, pushing the menu toggle
   off-screen. Compact mobile spacing (<=480px) makes every element
   fit at 360px; verified by headless render at 360/375/390/430px.
   Desktop is untouched. */
@media (max-width: 480px) {
  header.app { padding: 0.75rem 0.5rem; }
  header.app .header-actions { gap: 0.35rem; min-width: 0; }
  header.app a { margin-left: 0.25rem; }
  header.app a.brand { font-size: 0.9rem; letter-spacing: 0; }
  header.app .lang { gap: 0.25rem; }
  header.app .lang button { padding: 0.15rem 0.4rem; font-size: 0.78rem; }
  header.app #account-status { font-size: 0.82rem; line-height: 1.1; min-width: 0; }
  header.app .sell-btn { padding: 0.35rem 0.55rem; margin-left: 0.25rem; font-size: 0.88rem; }
  header.app [data-catalog-menu-toggle] { margin-left: 0.25rem; padding: 0.2rem 0.45rem; font-size: 1.15rem; }
  header.app .cart-icon { padding: 0; }
}
/* 098-seller-profiles: public seller storefront (/seller/<username>).
   Palette tokens only (Principle VII); the avatar is the seller's
   initials on --color-teal, the platform's accent for identity. */
.seller-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1rem; }
.seller-profile { text-align: center; padding: 1.5rem 1rem 0.5rem; }
.seller-avatar {
  width: 72px; height: 72px; margin: 0 auto 0.75rem; border-radius: 50%;
  background: var(--color-teal); color: #fff; font-size: 1.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  /* 099-seller-photo-bio: a seller photo (background image) fills the circle. */
  background-size: cover; background-position: center;
}
.seller-profile h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }
.seller-username { margin: 0; color: var(--color-olive); font-weight: 600; }
.seller-bio { margin: 0.5rem auto 0; max-width: 34rem; }
.seller-since { margin: 0.25rem 0 0; }
.seller-stats { margin: 0.5rem 0 0; font-weight: 600; }
.product-seller { margin: 0.25rem 0 0.75rem; }
.product-seller a { color: var(--color-teal); font-weight: 600; }
.brand { font-weight: 700; letter-spacing: 0.02em; }
header.app a.brand { margin-left: 0; }
.lang { display: flex; flex-direction: row; gap: 0.35rem; }
header.app .lang:has(+ [data-catalog-menu-toggle]) { margin-left: auto; }
[data-catalog-menu-toggle] {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 4;
  margin-left: 0.75rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}
header.app [data-catalog-menu] {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  /* 133-floating-menu (FR-004): 8px between the floating pills. */
  gap: 0.5rem;
}
header.app[data-catalog-open] [data-catalog-menu] {
  display: flex;
  position: fixed;
  top: 3.5rem;
  right: 0;
  z-index: 2;
  margin: 0;
  width: max-content;
  max-width: min(90vw, 16rem);
  padding: 0;
  box-sizing: border-box;
  /* 133-floating-menu (FR-001): no card behind the options — the
     container carries no background, border or shadow, so the
     page shows through; each pill below is its own surface. */
  color: var(--text);
}
header.app[data-catalog-open] [data-catalog-menu] a,
header.app[data-catalog-open] [data-catalog-menu] #logout {
  margin-left: 0;
  color: var(--text);
  border-color: var(--muted);
}
header.app[data-catalog-open] [data-catalog-menu] hr {
  /* 100-pill-menu-buttons (FR-003): the bordered pills and the menu
     gap replace the separator rules. */
  display: none;
  width: 100%;
  border: none;
  border-top: 1px solid var(--muted);
  margin: 0;
}
/* 100-pill-menu-buttons (FR-001/FR-002): every entry of the open menu
   is a full-width pill, matching the Sign out button's existing shape
   (header.app #logout, border-radius: 999px). */
header.app[data-catalog-open] [data-catalog-menu] a {
  align-self: stretch;
  /* 133-floating-menu (FR-002): the pill carries its own surface —
     the white the removed card used to lend it, plus the soft
     shadow of .home-section .product:hover. */
  background: #fff;
  border: 1px solid var(--muted);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  padding: 0.35rem 1rem;
  text-decoration: none;
}
header.app[data-catalog-open] [data-catalog-menu] #logout {
  align-self: stretch;
  /* 133-floating-menu (FR-002/FR-003): same floating surface as
     the link pills, and their padding — at base Sign out kept the
     header button's compact padding and rendered shorter. The
     font shorthand is set for the same reason: no rule typeset
     the button, so it rendered in the UA's control font
     (13.33px, tighter line box) against the links' inherited
     page font — the probe measured 23.4px tall at base, 31.2px
     after padding + size alone, 35.2px (the links' height)
     with the inherited font. `font: inherit` is the file's own
     idiom for this ([data-bill-option]). */
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  padding: 0.35rem 1rem;
  font: inherit;
}
header.app #profile-bell { display: none !important; }
.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;
}
.lang button, .bell {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px; padding: 0.2rem 0.65rem; cursor: pointer;
}
.lang button[aria-pressed="true"] {
  background: var(--color-spring); color: #111; border-color: var(--color-spring);
}
.bell[hidden] { display: none; }
footer.app {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2rem;
  margin-top: 2rem;
  padding: 2rem 1.5rem 1.5rem;
  background: #102014;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  width: 100%;
  box-sizing: border-box;
}
.footer-col-header {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
footer.app a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.25rem 0;
}
footer.app a:hover { text-decoration: underline; }
footer.app a[hidden] { display: none; }
.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social a {
  display: inline-flex;
  padding: 0;
}
.footer-copyright {
  grid-column: 1 / -1;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.75rem;
  color: #fff;
  text-align: center;
}
footer.app.footer-simple {
  display: flex;
  justify-content: center;
}
.footer-simple .footer-copyright {
  margin: 0;
  padding-top: 0;
  border-top: none;
}
@media (max-width: 40rem) {
  footer.app {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem 1rem 1rem;
  }
  footer.app a { padding: 0.35rem 0; }
}
main { flex: 1 0 auto; width: 100%; max-width: 720px; margin: 1.5rem auto; padding: 0 1rem 3rem; }
.card { background: var(--card); border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
h1 { margin-top: 0; font-size: 1.45rem; }
[data-catalog-subtitle] {
  margin-top: 0.2rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-hunter);
}
label { display: block; margin: 0.65rem 0 0.2rem; font-size: 0.9rem; }
input, select, textarea {
  width: 100%; padding: 0.5rem 0.6rem; border: 1px solid #c5c5c5; border-radius: 8px;
}
.stripe-element {
  width: 100%; padding: 0.6rem; border: 1px solid #c5c5c5; border-radius: 8px; background: #fff; box-sizing: border-box;
}
.stripe-element--invalid { border-color: var(--err); }
.link-btn {
  display: inline-block; margin-top: 0.5rem; background: none; border: 0;
  /* 154-button-text-scale: the official text button keeps its look
     (hunter, underlined) and gains the scale's >=44px tap area plus
     the page font (it rendered in the UA's control font before). */
  padding: 0.78rem 0.25rem; min-height: 2.75rem; font: inherit;
  color: var(--color-hunter); text-decoration: underline; cursor: pointer; font-size: 0.9rem;
}
.link-btn[hidden] { display: none; }
.saved-card-label { font-weight: 600; margin: 0.65rem 0 0.2rem; }
button.primary, a.button {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1rem; background: var(--color-orange); color: #fff;
  /* 104-pill-action-buttons: every action button on the platform is
     a pill — this one shared rule is what keeps them uniform. */
  border: 0; border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer; text-decoration: none;
  /* 154-button-text-scale: Principal level of the button scale —
     >=48px tall, and font: inherit so the label renders in the
     page's font (the buy button measured 32.6px in the UA's
     13.33px control font before this). */
  font: inherit; min-height: 3rem;
}
button.primary:hover, button.primary:active,
a.button:hover, a.button:active { background: var(--color-orange-dark); }
button.primary:disabled { opacity: 0.7; cursor: not-allowed; }
.err { color: var(--err); min-height: 1.2rem; }
.ok { color: var(--color-forest); min-height: 1.2rem; }
.payment-groups { list-style: none; margin: 0.75rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.product, .widget {
  background: var(--card); border-radius: 10px; padding: 1rem; border: 1px solid #ddd;
}
.section { margin-top: 1.25rem; padding-top: 0.5rem; border-top: 1px solid #ddd; }
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.row[hidden] { display: none; }
.muted { color: var(--muted); font-size: 0.9rem; }
.required-mark { color: var(--muted); margin-left: 0.2rem; }
.price { color: var(--text); font-weight: 800; white-space: nowrap; }
.google-host { margin-top: 1rem; min-height: 2.5rem; }
[data-loader],
[data-media-loader],
[data-variant-loader] {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--text);
}
form[aria-busy="true"] [data-loader] { display: flex; }
#media-section[aria-busy="true"] [data-media-loader] { display: flex; }
#variants-section[aria-busy="true"] [data-variant-loader] { display: flex; }
.loader-spin {
  width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--color-spring);
  border-right-color: transparent;
  border-radius: 50%;
  animation: daidar-spin 0.7s linear infinite;
}
@keyframes daidar-spin { to { transform: rotate(360deg); } }
body.is-submitting .lang button,
body.is-submitting a,
body.is-submitting #google-btn {
  pointer-events: none;
  opacity: 0.6;
}

.auth-shell {
  max-width: 28rem;
  margin: 2.5rem auto;
  padding: 0 1rem 3rem;
}
.auth-shell--wide { max-width: 46rem; }
.auth-card {
  background: var(--card);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 2rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e5e5;
}
[data-auth-tabs] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  background: #f0f0f0;
  border-radius: 10px;
  padding: 0.25rem;
}
[data-auth-tabs] a {
  text-align: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  padding: 0.65rem 0.5rem;
  border-radius: 8px;
}
[data-auth-tabs] a[aria-current="page"] {
  background: var(--muted);
  color: #fff;
}
.auth-badge {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.auth-card h1 { text-align: center; font-size: 1.75rem; }
.auth-sub { text-align: center; color: var(--muted); margin: 0 0 1.25rem; }
.auth-card button.primary { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; }
.field-icon { position: relative; }
.field-icon > svg {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.15rem;
  height: 1.15rem;
  color: var(--muted);
  pointer-events: none;
}
.field-icon input { padding-left: 2.35rem; }
.field-icon:has(button[data-password-toggle]) input { padding-right: 2.5rem; }
button[data-password-toggle] {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
}
button[data-password-toggle] svg {
  position: static;
  left: auto;
  top: auto;
  right: auto;
  transform: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--muted);
  pointer-events: none;
  display: block;
}
button[data-password-toggle][aria-pressed="true"] [data-eye-off] { display: none; }
button[data-password-toggle][aria-pressed="false"] [data-eye-on],
button[data-password-toggle]:not([aria-pressed]) [data-eye-on] { display: none; }
.remember-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1.1rem;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.checkbox-row[hidden] { display: none; }
.checkbox-row--wrap {
  align-items: flex-start;
}
.checkbox-row--wrap input[type="checkbox"] {
  margin-top: 0.15rem;
}
.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
  accent-color: var(--color-hunter);
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
}
.remember-row a { font-size: 0.9rem; white-space: nowrap; }
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
@media (max-width: 40rem) {
  .form-grid-2 { grid-template-columns: 1fr; }
}
.form-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  color: var(--color-hunter);
}
.form-section-header svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.form-section-header h2 { margin: 0; font-size: 1.05rem; }
[data-section] { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #ddd; }
[data-bill-options] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 40rem) {
  [data-bill-options] { grid-template-columns: 1fr; }
}
[data-bill-option] {
  text-align: left;
  border: 2px solid #ddd;
  background: var(--card);
  border-radius: 12px;
  padding: 0.9rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
[data-bill-option][aria-pressed="true"] {
  border-color: var(--color-forest);
  background: color-mix(in srgb, var(--color-sage) 18%, #fff);
}
[data-bill-option] strong { display: block; margin-bottom: 0.25rem; }
[data-bill-option] span { display: block; font-size: 0.8rem; color: var(--muted); }
[data-bill-summary] {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
}
[data-bill-summary] .sum-title { font-weight: 600; margin: 0 0 0.5rem; color: var(--color-forest); }
[data-leave-dialog] {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}
[data-leave-dialog][hidden] { display: none; }
[data-leave-dialog] .leave-box {
  background: var(--card);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  max-width: 22rem;
  width: calc(100% - 2rem);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
[data-leave-dialog] .leave-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
[data-leave-dialog] .leave-actions button {
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font: inherit;
}
[data-leave-cancel] { background: #fff; border: 1px solid #c5c5c5; }
[data-leave-confirm] {
  background: var(--color-forest);
  color: #fff;
  border: 0;
}

.status-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #eee;
  color: var(--text);
  margin: 0.15rem 0.35rem 0.15rem 0;
}
.status-active { background: var(--color-mint); color: var(--color-hunter); }
.status-draft { background: #eee; color: var(--muted); }
.status-inactive { background: #ddd; color: var(--color-orange-dark); }

.variant-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }
.variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.variant-row.out-of-stock { color: var(--muted); }
.variant-photo-thumb-sm {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.variant-row-actions { display: flex; gap: 0.4rem; }
.variant-row-actions button {
  border: 0;
  background: #333;
  color: #fff;
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.variant-photo-thumb {
  position: relative;
  display: inline-flex;
  width: 3.2rem;
  height: 3.2rem;
}
.variant-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
}
.variant-photo-thumb button {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 0;
  background: #333;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.media-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.media-thumb {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
}
.media-thumb img, .media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
}
.media-thumb button {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 0;
  background: #333;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.gallery { position: relative; max-width: 32rem; margin: 0 auto 1rem; }
.gallery-frame {
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-frame img, .gallery-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}
.gallery-swipe .gallery-frame { touch-action: pan-y; cursor: grab; }
#gallery-prev, #gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: 0;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
  font-size: 1.1rem;
}
#gallery-prev { left: 0.5rem; }
#gallery-next { right: 0.5rem; }
#gallery-prev[hidden], #gallery-next[hidden] { display: none; }
#gallery-dots {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  max-width: calc(100% - 1rem);
  overflow-x: auto;
}
#gallery-dots[hidden] { display: none; }
.gallery-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.6);
  padding: 0;
  cursor: pointer;
}
.gallery-dot.active { background: #fff; }

#zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
#zoom-overlay[hidden] { display: none; }
#zoom-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; }

.media-thumb .media-edit-btn {
  position: absolute;
  bottom: -0.4rem;
  right: -0.4rem;
  top: auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 0;
  background: #333;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 0.75rem;
}

#photo-editor:not([hidden]) { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
#photo-editor-canvas-wrap { max-width: 100%; }
#photo-editor-canvas { max-width: 100%; height: auto; touch-action: none; cursor: move; border-radius: 8px; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.header-pill, .cart-icon {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px; padding: 0.2rem 0.65rem; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.cart-icon { position: relative; }
.cart-badge {
  position: absolute; top: -0.4rem; right: -0.4rem;
  background: var(--color-orange); color: #fff; border-radius: 999px;
  font-size: 0.7rem; line-height: 1; min-width: 1.1rem; height: 1.1rem;
  display: flex; align-items: center; justify-content: center; padding: 0 0.2rem;
}
.cart-badge[hidden] { display: none; }

/* 063-order-messages-notifications: the "Messages"/"Mensajes" nav item's
   unread count — a small green circle with the number centered inside,
   inline with the label so both sit on one line. */
.messages-unread-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-forest); color: #fff; border-radius: 999px;
  font-size: 0.7rem; line-height: 1; min-width: 1.1rem; height: 1.1rem;
  padding: 0 0.3rem; margin-left: 0.4rem; vertical-align: middle;
}
.messages-unread-count[hidden] { display: none; }

/* 067-support-help-form: the "Soporte" pill distinguishing a support-request
   row from an order message in the merged /messages list (FR-008), and
   minimal spacing for the thread/follow-up panel rendered on open. */
.support-badge {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
  color: #fff; font-weight: 700; font-size: 0.8rem; background: var(--color-teal);
}
.support-thread-message { margin: 0.4rem 0; }
.support-followup-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }

.home-main { max-width: 72rem; margin: 1.5rem auto; padding: 0 1rem 3rem; }
.home-section { margin-top: 1.5rem; }
.home-section[hidden] { display: none; }
.home-section h2 { margin: 0 0 0.75rem; }
/* 086-catalog-production-polish: "See more" reuses button.primary's
   existing --color-orange/--color-orange-dark — layout-only centering. */
/* 106-see-more-batch-spacing: the button sits lower, with 2rem of
   air above it (was 1rem) — Carlos's "un poco más abajo". */
.home-section button[data-see-more] { display: block; margin: 2rem auto 0; }
.home-section button[data-see-more][hidden] { display: none; }
.home-section p[data-see-more-error] { text-align: center; }
.home-section p[data-see-more-error][hidden] { display: none; }
.product-photo, .product-photo-placeholder {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block;
}
.product-photo-placeholder {
  background: #eee; color: var(--muted); display: flex; align-items: center; justify-content: center;
}
.product-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.6rem; }
.product-size-line { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }
.product .price { margin-top: 0.2rem; font-size: 1.05rem; }

/* 095-product-favorites: heart toggle floating over the card photo
   (top-right). The filled state uses the brand accent token
   (--color-orange): Principle VII reserves non-palette red for
   error text only. */
.product { position: relative; }
.favorite-btn {
  position: absolute; top: 1.5rem; right: 1.5rem; z-index: 1;
  width: 2.25rem; height: 2.25rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); color: #444;
  border: 1px solid #ddd; border-radius: 50%; cursor: pointer;
}
.favorite-btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; }
.favorite-btn.is-favorite { color: var(--color-orange); }
.favorite-btn.is-favorite svg { fill: var(--color-orange); stroke: var(--color-orange); }
.favorite-status {
  display: inline-block; margin-top: 0.35rem; padding: 0.1rem 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: var(--muted);
  border: 1px solid #ddd; border-radius: 999px;
}

/* Trust banner: transparent strip (letters only) at the top of the
   storefront; its messages rotate (see rotateTrustBanner in home.js). */
.trust-banner {
  color: var(--text);
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 0.25rem 1rem;
  margin-bottom: 0.75rem;
  transition: opacity 0.45s ease;
}
.trust-banner.tb-fade { opacity: 0; }

.category-landing { text-align: center; margin: 0.25rem auto 1rem; }
.category-landing h1 { margin-bottom: 0.35rem; }
.category-landing p { color: var(--muted); margin: 0 auto; max-width: 42rem; }

/* Category circles: horizontal shortcut row into the catalog filters. */
.category-circles {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem 0.1rem 0.75rem;
  scrollbar-width: none;
}
.category-circles::-webkit-scrollbar { display: none; }
.category-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 4.3rem;
  padding: 0;
  color: var(--text);
  font: inherit;
}
.category-circle .cc-icon {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  overflow: hidden;
}
.category-circle .cc-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-circle .cc-name { font-size: 0.82rem; color: var(--muted); text-align: center; }
.category-circle.active .cc-icon { border-color: var(--color-hunter); box-shadow: 0 0 0 2px var(--color-hunter); }
.category-circle.active .cc-name { color: var(--text); font-weight: 700; }

/* 045-cart-page-redesign: cart-item, cart-subtotal, and cart-empty-btn
   below are reused by the /cart page's own layout (see the cart-page
   rules further down); the popup dialog chrome (cart-panel) that used
   to wrap them is gone. */
.cart-item { display: flex; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid #eee; }
.cart-item-photo, .cart-item .product-photo-placeholder { width: 3.5rem; height: 3.5rem; flex-shrink: 0; }
.cart-item-info p { margin: 0.1rem 0; }
.cart-subtotal { font-weight: 600; }
.cart-empty-btn {
  width: 100%; margin-top: 0.5rem; padding: 0.55rem 1rem; border-radius: 8px; cursor: pointer;
  background: #fff; border: 1px solid #c5c5c5; color: var(--text);
}

.cart-page-main { max-width: 60rem; margin: 1.5rem auto; padding: 0 1rem 3rem; }
.cart-page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; margin-top: 1rem; }
.cart-page-grid[hidden] { display: none; }
/* 061-stripe-tax-calculation (FR-010): the cart/checkout-view-failed
   retry state, built dynamically by cart-page.js when a Stripe Tax
   outage means the view itself cannot render a verified total. */
#cart-view-error { margin-top: 1rem; }
#cart-view-error button.primary { margin-top: 0.5rem; }
@media (max-width: 640px) {
  .cart-page-grid { grid-template-columns: 1fr; }
}
.cart-page-items .cart-item:last-child { border-bottom: 0; }
.cart-page-list-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.cart-page-secondary-btn {
  width: auto; margin-top: 0; padding: 0.55rem 1rem; border-radius: 8px; cursor: pointer;
  background: #fff; border: 1px solid #c5c5c5; color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center;
  /* 154-button-text-scale: Normal level — >=44px tall. */
  min-height: 2.75rem;
}
.cart-page-totals-box { margin-bottom: 1rem; }
.cart-page-totals-row { display: flex; justify-content: space-between; margin: 0.35rem 0; }
.cart-page-total-row { font-weight: 700; border-top: 1px solid #ddd; padding-top: 0.5rem; margin-top: 0.5rem; }
.cart-page-totals #cart-checkout-btn { width: 100%; margin-top: 0; text-align: center; }
.cart-item-unavailable { opacity: 0.6; }
.cart-item-unavailable-badge { color: var(--err); font-size: 0.85rem; font-weight: 600; }
.cart-item-qty { display: flex; align-items: center; gap: 0.4rem; margin: 0.35rem 0; }
.cart-qty-dec, .cart-qty-inc {
  width: 1.8rem; height: 1.8rem; border-radius: 6px; border: 1px solid #c5c5c5;
  background: #fff; cursor: pointer; line-height: 1; padding: 0;
}
.cart-qty-input { width: 3.2rem; text-align: center; padding: 0.3rem; }
.cart-item-capped-msg { font-size: 0.8rem; }
.cart-item-remove {
  background: transparent; border: 0; padding: 0; color: var(--color-hunter);
  text-decoration: underline; cursor: pointer; font-size: 0.85rem;
}

.search-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.search-bar input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.search-bar button.primary { margin-top: 0; white-space: nowrap; }
.search-bar #filters-toggle, .search-bar #search-clear {
  background: transparent; border: 1px solid #c5c5c5; border-radius: 8px;
  padding: 0.5rem 0.9rem; cursor: pointer; color: var(--text); white-space: nowrap;
}
.filters-panel {
  display: flex; flex-wrap: wrap; gap: 1.25rem; background: var(--card);
  /* 101-rounded-home (FR-004): radius matches the product photos. */
  border: 1px solid #ddd; border-radius: 18px; padding: 0.9rem 1rem; margin-bottom: 1rem;
}
/* 101-rounded-home: the big-platform rounded language Carlos approved
   (Depop/Shein/Amazon) — generously rounded photos and pill controls
   on the home. Scoped so the cart, checkout and favorites keep their
   current radii: the photo rule is ancestor-scoped because
   .product-photo is shared with the cart thumbnails. */
.home-main .product-photo, .home-main .product-photo-placeholder,
.seller-main .product-photo, .seller-main .product-photo-placeholder {
  border-radius: 18px;
}
.search-bar input[type="search"] { border-radius: 999px; padding: 0.6rem 1.1rem; }
.search-bar button { border-radius: 999px; }
/* 105-category-circles-navigate: circles for the landing categories
   are anchors now (they read as the buttons did — the base rule sets
   color/layout); only the default underline needs removing. */
a.category-circle { text-decoration: none; }
/* 102-greeting-profile-link: the signed-in greeting's name links to
   the user's own public seller profile (098) when they have one.
   Quiet treatment — inherited color, bold, underlined. */
#account-status .profile-name-link {
  color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
/* Filters/Clear carry their own ID-scoped 8px rule above; it takes
   this equally-scoped later rule to pill them too. */
.search-bar #filters-toggle, .search-bar #search-clear { border-radius: 999px; }
.home-section button[data-see-more] { border-radius: 999px; }
.filters-panel[hidden] { display: none; }
.filter-group { display: flex; flex-direction: column; gap: 0.35rem; min-width: 8rem; }
.filter-label { font-size: 0.85rem; font-weight: 600; color: var(--color-hunter); }
.filter-group .row { gap: 0.5rem; }
#filter-price-min, #filter-price-max { width: 6rem; }
#search-empty { margin-top: 1rem; }
.home-section .product { cursor: pointer; }
.home-section .product:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }

.product-main { max-width: 60rem; margin: 1.5rem auto; padding: 0 1rem 3rem; }
.product-detail .product-top {
  display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: flex-start;
}
.product-detail .gallery { flex: 1 1 22rem; width: 100%; margin: 0; }
.product-info { flex: 1 1 18rem; min-width: 0; }
.product-info h1 { margin-top: 0; }
.product-description { color: var(--text); white-space: pre-line; }
.product-buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.qty-field { display: flex; flex-direction: column; gap: 0.2rem; }
.qty-field[hidden] { display: none; }
.qty-field label { margin: 0; }
.qty-field input { width: 5rem; }
#variant-swatches, #saved-cards-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.variant-swatch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}
.variant-swatch img {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: cover;
  border-radius: 50%;
}
.variant-swatch.active { border-color: var(--color-orange); border-width: 2px; }
.variant-swatch:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.6; }
.product-buy-row button.primary { margin-top: 0; }
.product-price { font-size: 1.35rem; font-weight: 700; color: var(--text); }
.product-details-section h2 { margin-top: 0; }
.detail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0 0 0.75rem; }
.detail-list dt { font-size: 0.8rem; color: var(--muted); margin: 0; }
.detail-list dd { margin: 0.1rem 0 0; font-weight: 600; }
@media (max-width: 40rem) {
  .product-detail .product-top { flex-direction: column; }
}

/* 056-locker-room-panel */
.locker-room-view { max-width: 48rem; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
.locker-room-hero { display: flex; align-items: center; gap: 1rem; }
.locker-room-avatar {
  width: 4rem; height: 4rem; border-radius: 50%; flex-shrink: 0;
  background: var(--color-orange); color: #fff; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700;
}
.locker-room-hero-text h1 { margin: 0 0 0.2rem; }
.locker-room-full-name { margin: 0; color: var(--muted); }
.locker-room-group-label { margin: 0 0 0.5rem; font-size: 1.1rem; }
.locker-room-entries { display: flex; flex-direction: column; gap: 0.4rem; }
/* 058-my-account-rename: "Detalles de la cuenta" is a visual sub-heading
   only (Clarification Q3) — same entries list styling, smaller/muted
   label so it reads as a sub-group of "Mi Perfil", not a sibling group. */
.locker-room-subgroup { display: flex; flex-direction: column; gap: 0.4rem; }
.locker-room-subgroup-label { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.locker-room-entry {
  /* 100-pill-menu-buttons (FR-004): pill shape, like the menu's Sign out. */
  display: block; text-align: left; padding: 0.6rem 1.1rem; border-radius: 999px;
  border: 1px solid #ddd; background: var(--card); color: var(--text);
  cursor: pointer; text-decoration: none; font: inherit;
  /* 154-button-text-scale: Normal level — >=44px tall. */
  min-height: 2.75rem;
}
.locker-room-entry:hover, .locker-room-entry:focus-visible { border-color: var(--color-orange); }
/* 058-my-account-rename (FR-015/FR-016): replaces the 057-era `hidden`
   attribute toggle — `display: none` cannot be transitioned, so a
   collapsed panel now sits at `max-height: 0`/`opacity: 0` and an
   `.is-open` class expands it over 0.5s. `visibility` flips on a delay
   when closing (immediately when opening) so the panel's form fields
   stay out of the tab order and accessibility tree while collapsed,
   the same guarantee `[hidden]` used to provide. */
.locker-room-detail {
  display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s 0.5s;
}
.locker-room-detail.is-open {
  max-height: 40rem; opacity: 1; visibility: visible;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.locker-room-detail form { display: flex; flex-direction: column; gap: 0.5rem; }
/* 069-nickname-change-request: #name-form toggles via the `hidden`
   attribute (read-only vs. editable, FR-007) independently of the
   section's own open/closed state above — needs its own override since
   the blanket `.locker-room-detail form` rule otherwise always wins. */
.locker-room-detail form[hidden] { display: none; }
.locker-room-readonly { font-size: 1.1rem; font-weight: 600; }
#photo-preview-canvas { border-radius: 50%; width: 8rem; height: 8rem; object-fit: cover; }
.locker-room-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
/* 057-locker-room-refinements: a row now stacks its clickable summary
   (.locker-room-row) above an optional detail panel instead of laying two
   inline children side by side — the old `display: flex` on the `<li>`
   itself moved onto `.locker-room-row` below. */
.locker-room-list li { padding: 0.6rem 0.9rem; border-radius: 8px; border: 1px solid #ddd; }
.locker-room-row {
  display: flex; justify-content: space-between; gap: 1rem; width: 100%;
  background: none; border: none; padding: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
/* 058-my-account-rename: status swatch + label sit together on the left of
   the row; the chevron is pushed to the far right by the row's own
   `justify-content: space-between` (FR-006). A rounded *square*, not a
   circle — `border-radius: 4px`, never `50%` (spec's own "cuadrado ... con
   border-radius" wording; see specs/058-my-account-rename/research.md §5). */
.locker-room-row-main { display: flex; align-items: center; gap: 0.5rem; }
.status-swatch { width: 0.6rem; height: 0.6rem; border-radius: 4px; display: inline-block; flex-shrink: 0; }
.status-swatch--completed { background: var(--color-mint); }
.status-swatch--failed { background: var(--err); }
.status-swatch--pending { background: var(--color-orange); }
/* 068-tracking-page-seller-ratings: tracking.js's own three bucket names
   ("processing"/"shipped"/"delivered") are distinct from the pre-existing
   "pending"/"completed" buckets above (057/058's order/sale status, a
   different concept) — each needs its own modifier rule here, not a reuse
   of those. "🔵 Enviados" is the one status-only use of
   --color-status-shipped (constitution v1.5.0). */
.status-swatch--processing { background: var(--color-orange); }
.status-swatch--shipped { background: var(--color-status-shipped); }
.status-swatch--delivered { background: var(--color-mint); }
/* 059-account-details-status-colors: solid, pill-shaped status badge —
   `border-radius: 999px` for the fully-rounded pill the sketch draws,
   deliberately different from `.status-swatch`'s small rounded-*square*
   (`4px`) dot (058-my-account-rename's own research.md already flagged
   that exact shape distinction). Groups with `.chevron` inside
   `.locker-room-row-end` so both sit together on the row's right side.
   Named `.order-status-badge`, not `.status-badge` — that name is
   already taken (line ~396 above) by products.js/product-page.js's own
   active/draft/inactive product-status badge, with a different color
   scheme; reusing it here would have silently overridden that badge's
   text color. */
.locker-room-row-end { display: flex; align-items: center; gap: 0.5rem; }
.order-status-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; color: #fff; font-weight: 700; font-size: 0.8rem; }
.order-status-badge--completed { background: var(--color-mint); }
.order-status-badge--failed { background: var(--err); }
.order-status-badge--pending { background: var(--color-orange); }
.order-status-badge--processing { background: var(--color-orange); }
.order-status-badge--shipped { background: var(--color-status-shipped); }
.order-status-badge--delivered { background: var(--color-mint); }
.chevron { display: inline-block; transition: transform 0.2s ease; }
.locker-room-row[aria-expanded="true"] .chevron { transform: rotate(90deg); }
/* 073-buyer-order-returns: same solid pill shape as .order-status-badge,
   under its own class name so a future change to one never silently
   affects the other. */
.return-request-status { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; color: #fff; font-weight: 700; font-size: 0.8rem; }
.return-request-status--pending { background: var(--color-orange); }
.return-request-status--approved { background: var(--color-mint); }
.return-request-status--denied { background: var(--err); }
.return-request-status--label_failed { background: var(--err); }
.return-review-row { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem; }
.return-review-photo { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; margin: 0.25rem; }
.return-review-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.return-review-deny-reason { flex: 1 1 200px; min-width: 160px; }
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid #e0e0e0; }
.tab-btn { background: none; border: none; padding: 0.6rem 1rem; cursor: pointer; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; }
.tab-btn[aria-selected="true"] { color: var(--color-forest); border-bottom-color: var(--color-orange); }
.return-tracking-row { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem; }
.return-tracking-history { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--muted); }
.locker-room-list li.status-completed { background: color-mix(in srgb, var(--color-mint) 15%, transparent); }
.locker-room-list li.status-failed { background: color-mix(in srgb, var(--err) 12%, transparent); }
.locker-room-list li.status-pending { background: color-mix(in srgb, var(--color-orange) 12%, transparent); }
.locker-room-list li.status-processing { background: color-mix(in srgb, var(--color-orange) 12%, transparent); }
.locker-room-list li.status-shipped { background: color-mix(in srgb, var(--color-status-shipped) 12%, transparent); }
.locker-room-list li.status-delivered { background: color-mix(in srgb, var(--color-mint) 15%, transparent); }
.order-detail-panel { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 0.4rem; }
.order-detail-panel h4 { margin: 0.4rem 0 0.1rem; font-size: 0.95rem; }
.order-detail-item { display: flex; gap: 0.6rem; align-items: center; }
.order-detail-item p { margin: 0.1rem 0; }
.order-item-photo { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 6px; }
.locker-room-pagination { display: flex; gap: 0.5rem; align-items: center; }
/* 068-tracking-page-seller-ratings: the row(s) a deep link (?order_id= /
   &seller_id=) points at — a ring, not a background swap, so it never
   fights the status tint above. --color-teal is an existing Principle VII
   token (cool accent), not a new hue. */
.locker-room-list li.highlighted { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.tracking-rating { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 0.4rem; }
.tracking-rating label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
.tracking-rating textarea { min-height: 3rem; }
.locker-room-earnings-total { font-size: 1.75rem; font-weight: 700; }

/* 057-locker-room-refinements: /saved-cards's first styled table in this
   app (research.md §6) — scoped narrowly, not a shared `.data-table`. */
.saved-cards-table { width: 100%; border-collapse: collapse; }
.saved-cards-table th, .saved-cards-table td { padding: 0.6rem 0.9rem; text-align: left; border-bottom: 1px solid #eee; }
.saved-cards-table thead th { color: var(--muted); font-weight: 600; font-size: 0.85rem; border-bottom: 1px solid #ddd; }

/* 077-i18n-seo-architecture: the localized 404 page's main content. */
.not-found-main { max-width: 32rem; margin: 3rem auto; padding: 0 1.25rem; text-align: center; flex: 1; }
.not-found-main h1 { margin-bottom: 0.5rem; }
.not-found-main p { color: var(--muted); margin-bottom: 1.25rem; }

/* 077-i18n-seo-architecture: the cookie-consent message (FR-006a) and the
   Accept-Language suggestion banner (FR-006) — both fixed to the bottom,
   both using only Principle VII tokens, no new hex values. */
.cookie-consent-banner, .lang-suggestion-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--color-hunter); color: #fff;
  padding: 0.85rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
}
.lang-suggestion-banner { background: var(--card); color: var(--text); border-top: 1px solid #ddd; }
.cookie-consent-banner__text, .lang-suggestion-banner__text { margin: 0; flex: 1 1 16rem; }
.cookie-consent-banner__actions, .lang-suggestion-banner__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cookie-consent-banner__accept, .lang-suggestion-banner__switch {
  background: var(--color-orange); color: #fff; border: 0; border-radius: 8px;
  padding: 0.5rem 0.9rem; cursor: pointer;
}
.cookie-consent-banner__accept:hover, .cookie-consent-banner__accept:active,
.lang-suggestion-banner__switch:hover, .lang-suggestion-banner__switch:active { background: var(--color-orange-dark); }
.cookie-consent-banner__decline, .lang-suggestion-banner__dismiss {
  background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 8px;
  padding: 0.5rem 0.9rem; cursor: pointer; opacity: 0.85;
}
.saved-cards-table tbody tr:last-child td { border-bottom: none; }

/* 118-web-push-notifications: Mi Cuenta → Notificaciones. Palette
   tokens only; switches are native checkboxes with an orange
   accent so no new component enters the design system. */
.push-settings-body { background: var(--card); border-radius: 18px; padding: 1rem; }
.push-hint { margin: 0 0 0.75rem; }
.push-device-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.push-device-state { font-weight: 600; }
.push-categories { margin-top: 0.5rem; }
.push-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-top: 1px solid var(--bg); cursor: pointer; }
.push-cat-name { flex: 1; }
.push-switch { width: 1.35rem; height: 1.35rem; accent-color: var(--color-orange); flex-shrink: 0; }

/* 094-viral-referral-growth: banner, two progress bars, floating toast.
   Brand greens/oranges below use only the Principle VII tokens declared
   at the top of this file.
   128-referral-buttons: the banner CTA and the WhatsApp share button are
   now a matched pair of oval (pill) buttons — the CTA in the primary
   orange, the share button in the brand greens — with soft token-tinted
   shadows (the file's color-mix idiom) and >=48px touch heights.
   Styling only: ids, handlers, hrefs and share text are unchanged. */
.referral-section { margin: 1.25rem 0; }
.referral-banner {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; border: none; border-radius: 999px;
  background: linear-gradient(180deg, var(--color-orange), var(--color-orange-dark));
  color: #fff; font-weight: 800; font-size: 1.1rem; line-height: 1.25;
  min-height: 3.25rem; padding: 0.85rem 1.5rem; cursor: pointer; text-align: center;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-orange-dark) 40%, transparent);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.referral-banner:hover {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-orange-dark) 50%, transparent);
}
.referral-banner:active {
  background: var(--color-orange-dark); transform: translateY(1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-orange-dark) 40%, transparent);
}
.referral-details:not([hidden]) { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.referral-whatsapp-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  align-self: stretch; border-radius: 999px;
  background: linear-gradient(180deg, var(--color-forest), var(--color-hunter));
  color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.25;
  min-height: 3rem; padding: 0.8rem 1.4rem; text-decoration: none; text-align: center;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-hunter) 35%, transparent);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.referral-whatsapp-btn:hover {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-hunter) 45%, transparent);
}
.referral-whatsapp-btn:active {
  background: var(--color-hunter); transform: translateY(1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-hunter) 35%, transparent);
}
.referral-btn-glyph { font-size: 1.25em; line-height: 1; }
.referral-progress-bar-track {
  width: 100%; height: 0.6rem; border-radius: 999px; background: #e5e7eb; overflow: hidden;
}
.referral-progress-bar-fill {
  height: 100%; background: var(--color-spring); width: 0%; transition: width 0.3s ease;
}
.referral-progress-bar-label { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--text); }
.referral-sale-bar-label {
  margin: 0; font-size: 0.9rem; color: var(--text); padding-left: 1.4rem; position: relative;
}
.referral-sale-bar-label::before {
  content: ''; position: absolute; left: 0; top: 0.1rem; width: 1rem; height: 1rem;
  border-radius: 50%; border: 2px solid var(--color-grass);
}
.referral-sale-bar[data-done="true"] .referral-sale-bar-label::before {
  background: var(--color-spring); border-color: var(--color-spring);
}
.referral-toast {
  position: fixed; right: 1rem; bottom: 1rem; max-width: 20rem; z-index: 50;
  background: var(--color-hunter); color: #fff; border-radius: 10px;
  padding: 0.85rem 1rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem; animation: daidar-referral-toast-in 0.25s ease;
}
@keyframes daidar-referral-toast-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }






/* 118 fix (owner request, 2026-10-23): the Notificaciones header is a
   collapse toggle; the section body starts folded. */
.push-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.push-chevron { transition: transform 0.2s ease; }
.push-toggle[aria-expanded="true"] .push-chevron { transform: rotate(180deg); }

/* RESTORE (2026-10-23): the forum sections of specs 107/108/109/116/113/117
   and the seller-chat section of spec 114 were lost from this file in the
   Feat-94 merge (a88b1b75) — production rendered the Comunidad page and the
   chat unstyled. The blocks below are restored verbatim from the last known
   good revision (21bd4e60, spec-117 closure), in their original order.
   Not restored here, pending a decision: the 110-product-share block
   (.product-title-row / .product-share-btn), lost in the same merge. */

/* 107-community-forum: the Comunidad page — Carlos's design: a big
   composer pill, clean stacked post blocks with in-block replies, a
   gray Responder pill and like/share actions on every message. */
.forum-main { max-width: 44rem; margin: 0 auto; padding: 1rem; }
.forum-composer-open { width: 100%; text-align: left; background: var(--surface, #fff); border: 1px solid #ddd; border-radius: 999px; padding: 0.9rem 1.2rem; font-size: 1rem; color: var(--muted); cursor: pointer; }
.forum-composer, .forum-reply-form { margin-top: 0.8rem; }
.forum-composer textarea, .forum-reply-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 18px; padding: 0.8rem 1rem; font: inherit; resize: vertical; }
.forum-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.forum-error { color: #b00020; margin: 0.4rem 0 0; }
.forum-post { background: var(--surface, #fff); border: 1px solid #e3e3e3; border-radius: 18px; padding: 0.9rem 1rem; margin-top: 1rem; }
.forum-head { display: flex; align-items: center; gap: 0.6rem; }
.forum-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background-size: cover; background-position: center; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.forum-avatar.sm { width: 1.8rem; height: 1.8rem; font-size: 0.85rem; }
.forum-who { font-weight: 700; }
.forum-when { color: var(--muted); font-size: 0.85rem; }
.forum-text { margin: 0.6rem 0; white-space: pre-wrap; overflow-wrap: break-word; }
.forum-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.forum-action { background: none; border: 0; color: var(--muted); padding: 0.3rem 0.6rem; font-size: 0.9rem; cursor: pointer; display: inline-flex; gap: 0.3rem; align-items: center; }
.forum-like.liked { color: var(--color-orange); font-weight: 700; }
.forum-reply-btn { background: #eee; color: #333; border: 0; border-radius: 999px; padding: 0.35rem 0.95rem; font-size: 0.9rem; cursor: pointer; }
.forum-replies { margin: 0.6rem 0 0 1.1rem; border-left: 3px solid #eee; padding-left: 0.9rem; }
.forum-reply { padding: 0.55rem 0; }
.forum-reply .forum-text { margin: 0.35rem 0; }
#forum-more { display: block; margin: 2rem auto 0; }
#forum-more[hidden] { display: none; }
.forum-highlight { box-shadow: 0 0 0 3px var(--color-orange); }

/* 108-forum-pack: pinned post, product cards, reports + moderation */
.forum-pinned { border-color: var(--color-orange); box-shadow: 0 0 0 2px var(--color-orange); }
.forum-pin-label { margin: 0 0 0.4rem; font-weight: 700; color: var(--color-orange-dark); }
.forum-product-card { display: flex; gap: 0.8rem; align-items: center; border: 1px solid #e3e3e3; border-radius: 18px; padding: 0.6rem; margin: 0.4rem 0 0.6rem; text-decoration: none; color: inherit; }
.forum-product-card img { width: 4rem; height: 4rem; object-fit: cover; border-radius: 12px; flex: none; }
.forum-product-info { display: flex; flex-direction: column; gap: 0.2rem; }
.forum-product-name { font-weight: 700; }
.forum-product-price { font-weight: 700; color: var(--color-hunter); }
.forum-product-wrap { display: block; margin-top: 0.6rem; }
.forum-product-wrap select { display: block; width: 100%; margin-top: 0.3rem; padding: 0.55rem; border: 1px solid #ddd; border-radius: 12px; font: inherit; }
.forum-mod { border: 1px solid var(--color-orange); border-radius: 18px; padding: 0.8rem 1rem; margin-bottom: 1rem; }
.forum-mod h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.forum-mod-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.4rem 0; border-top: 1px solid #eee; }
.forum-mod-info { flex: 1 1 12rem; overflow-wrap: break-word; }

/* 109-forum-icons: message actions are social icons, not words.
   The SVGs inherit currentColor; state fills key off the classes
   the JS already toggles. */
.forum-icon { display: inline-flex; }
.forum-icon svg { width: 1.15rem; height: 1.15rem; display: block; }
.forum-actions .forum-action { padding: 0.35rem 0.45rem; }
.forum-like.liked svg { fill: var(--color-orange); }
.forum-report.reported { color: var(--color-orange-dark); }
.forum-report.reported svg { fill: var(--color-orange); color: var(--color-orange); }
.forum-reply-btn .forum-icon svg { width: 1.05rem; height: 1.05rem; }
.forum-reply-btn { padding: 0.35rem 0.6rem; }
.forum-pin { font-size: 1.05rem; line-height: 1; }
.forum-pin-on { opacity: 0.4; }
.forum-action.copied { color: var(--color-forest); }
.forum-mod-row .forum-action { padding: 0.3rem 0.4rem; }
.forum-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.forum-topbar h1 { margin: 0; }
.forum-share-community { padding: 0.45rem 0.55rem; }
.forum-share-community .forum-icon svg { width: 1.3rem; height: 1.3rem; }
.forum-share-community.copied { color: var(--color-forest); }

/* 116-forum-action-labels: the bar reads like Facebook's — the
   three primary actions carry their full word next to the icon
   and share the row evenly over a thin divider; the contextual
   actions (report, delete, pin) stay icon-only. */
.forum-actions { border-top: 1px solid #eee; padding-top: 0.4rem; }
.forum-actions .forum-action-main { flex: 1 1 0; justify-content: center; font-weight: 600; border-radius: 999px; padding: 0.45rem 0.3rem; }
.forum-actions .forum-action-main:hover { background: #eee; }
.forum-actions .forum-reply-btn { background: none; }
.forum-action-label { white-space: nowrap; }
.forum-actions-side { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; flex: none; }
.forum-actions-side .forum-action { padding: 0.3rem 0.4rem; }

/* 113-forum-thread: a conversation's own page — the back link
   and the server-rendered copy crawlers read. */
.forum-back { display: inline-block; margin: 0 0 1rem; color: var(--color-forest); font-weight: 600; text-decoration: none; }
.forum-ssr-author { margin: 0 0 0.25rem; font-weight: 700; color: var(--color-forest); }
.forum-ssr-product { margin: 0.5rem 0 0; font-weight: 600; }

/* 114-seller-chat */
.chat-bubble { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: 56px; height: 56px; border-radius: 999px; border: none; background: var(--color-orange); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.25); cursor: pointer; }
.chat-panel { position: fixed; right: 1rem; bottom: 5.25rem; z-index: 60; width: min(92vw, 350px); max-height: 70vh; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-sage); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.22); overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; background: var(--color-mint); }
.chat-avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--color-forest); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; overflow: hidden; flex: none; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-head-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-head-name { font-weight: 700; color: var(--color-forest); }
.chat-head-product { font-size: 0.8rem; color: var(--color-pine); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-close { background: transparent; border: none; color: var(--color-forest); cursor: pointer; padding: 0.25rem; }
.chat-msgs { padding: 0.75rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; min-height: 180px; }
.chat-row { display: flex; }
.chat-row.mine { justify-content: flex-end; }
.chat-bubble-msg { max-width: 80%; padding: 0.45rem 0.7rem; border-radius: 16px; background: var(--color-mint); overflow-wrap: break-word; white-space: pre-wrap; }
.chat-row.mine .chat-bubble-msg { background: var(--color-orange); color: #fff; }
.chat-empty { color: var(--color-pine); text-align: center; margin: 1rem 0; }
.chat-error { color: #b00020; padding: 0 0.75rem; margin: 0.25rem 0; font-size: 0.85rem; }
.chat-form { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid var(--color-sage); }
.chat-form input { flex: 1; border: 1px solid var(--color-sage); border-radius: 999px; padding: 0.5rem 0.8rem; min-width: 0; }
.chat-send { width: 38px; height: 38px; border-radius: 999px; border: none; background: var(--color-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.chat-list { list-style: none; margin: 0; padding: 0; }
.chat-item-btn { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--color-sage); padding: 0.6rem 0.25rem; cursor: pointer; }
.chat-item-texts { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-item-name { font-weight: 700; color: var(--color-forest); }
.chat-item-preview { color: var(--color-pine); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex: none; }
.chat-item-time { color: var(--color-pine); font-size: 0.75rem; }
.chat-unread { background: var(--color-orange); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; padding: 0 5px; }
.chat-thread-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.chat-back { background: transparent; border: 1px solid var(--color-sage); border-radius: 999px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-forest); cursor: pointer; flex: none; }
.chat-thread-msgs { border: 1px solid var(--color-sage); border-radius: 18px; min-height: 220px; max-height: 50vh; }
#chat-thread .chat-form { border-top: none; padding-left: 0; padding-right: 0; }

/* 117-forum-reply-to: the addressee line above a reply that
   answers another reply ("En respuesta a @…") — muted like the
   forum's timestamps; the thread stays flat (Facebook model).
   Comentar now lives on every message; no other restyle. */
.forum-reply-to { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.85rem; }

/* 136-forum-polls: one poll per top-level post — tappable
   option rows while open, a result bar behind each label
   once results show (voted / closed / guest). Brand color
   is palette-only: the mint fill, orange for my own choice
   (the liked-heart accent); tracks and borders are the
   forum's own neutrals. The composer editor mirrors the
   reply form's pill inputs. */
.forum-poll { margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.forum-poll-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 12px; padding: 0.55rem 0.8rem; background: #fff; color: inherit; font: inherit; text-align: left; overflow: hidden; }
button.forum-poll-option { cursor: pointer; }
.forum-poll-option.mine { border-color: var(--color-orange); }
.forum-poll-bar { position: absolute; top: 0; bottom: 0; left: 0; background: var(--color-mint); opacity: 0.45; }
.forum-poll-option.mine .forum-poll-bar { background: var(--color-orange); opacity: 0.35; }
.forum-poll-label { position: relative; font-weight: 600; overflow-wrap: break-word; }
.forum-poll-count { position: relative; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.forum-poll-closed { align-self: flex-start; margin: 0; background: #eee; color: var(--muted); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.85rem; font-weight: 600; }
.forum-poll-foot { display: flex; align-items: center; gap: 0.8rem; }
.forum-poll-total { color: var(--muted); font-size: 0.9rem; }
.forum-poll-editor { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.forum-poll-editor[hidden] { display: none; }
#forum-poll-options { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.forum-poll-row { display: flex; gap: 0.4rem; width: 100%; }
.forum-poll-row input { flex: 1; min-width: 0; border: 1px solid #ddd; border-radius: 12px; padding: 0.55rem 0.8rem; font: inherit; }
.forum-poll-remove { background: #eee; color: #333; border: 0; border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.9rem; cursor: pointer; }

/* RESTORE addendum (2026-10-23): the 110-product-share block flagged as
   pending in the RESTORE note above is restored here too, verbatim from
   the same revision (21bd4e60), after the owner approved it after all.
   Its rules are unique to the product page, so appending at the end is safe. */
/* 110-product-share: the article's share icon at the title's
   right edge (109's pattern, commerce edition). */
.product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.product-share-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0.45rem 0.55rem; margin-top: 0.35rem; flex: none; }
.product-share-btn svg { width: 1.3rem; height: 1.3rem; display: block; }
.product-share-btn.copied { color: var(--color-forest); }

/* 124-buyer-offers: the offer box on the product page, the sent-offers
   list in My Account and the received-offers block in My Sales.
   Palette tokens only; the primary action (send / accept) is a
   .primary button, --color-orange like every primary on the site. */
.offer-box { margin-top: 1rem; }
.offer-box > button { border: 1px solid var(--color-orange); background: var(--card); color: var(--color-orange-dark); border-radius: 999px; padding: 0.55rem 1.1rem; font-weight: 700; cursor: pointer; /* 154: Normal level */ min-height: 2.75rem; }
.offer-form { margin-top: 0.75rem; }
.offer-form label { display: block; font-weight: 600; margin-bottom: 0.35rem; color: var(--color-forest); }
.offer-form-row { display: flex; gap: 0.5rem; align-items: center; }
.offer-form-row input { flex: 1; min-width: 0; padding: 0.55rem 0.7rem; border: 1px solid var(--color-sage); border-radius: 10px; }
.offer-active { margin-top: 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid var(--color-sage); border-radius: 10px; color: var(--color-hunter); background: var(--bg); font-weight: 600; }
.offer-entry { display: flex; flex-direction: column; gap: 0.5rem; }
.offer-entry-product { font-weight: 700; color: var(--color-forest); }
.offer-entry-meta { margin: 0.15rem 0 0; color: var(--muted); }
.offer-code-box { display: flex; flex-direction: column; gap: 0.25rem; }
.offer-code { align-self: flex-start; font-weight: 800; letter-spacing: 0.04em; border: 1px dashed var(--color-orange); border-radius: 8px; padding: 0.3rem 0.6rem; color: var(--color-orange-dark); }
.offer-code-hint { margin: 0; color: var(--muted); font-size: 0.85rem; }
#offers-received-section { border: 1px solid var(--color-sage); border-radius: 14px; padding: 0.9rem 1rem; margin-bottom: 1.25rem; }
#offers-received-section h2 { margin-top: 0; color: var(--color-forest); }
.offer-received-item { padding: 0.6rem 0; border-bottom: 1px solid var(--color-sage); }
.offer-received-item:last-child { border-bottom: none; }
.offer-received-title { margin: 0; font-weight: 700; }
.offer-received-title a { color: var(--color-forest); }
.offer-received-amount { color: var(--color-orange-dark); }
.offer-received-meta { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.9rem; }
.offer-received-actions { display: flex; gap: 0.5rem; margin-top: 0.55rem; }
.offer-received-actions button:not(.primary) { border: 1px solid var(--color-sage); background: var(--card); border-radius: 999px; padding: 0.45rem 1rem; font-weight: 700; cursor: pointer; /* 154: Normal level */ min-height: 2.75rem; }
#coupons-assigned-section { border: 1px solid var(--color-sage); border-radius: 14px; padding: 0.9rem 1rem; margin-bottom: 1.25rem; }
#coupons-assigned-section h2 { margin-top: 0; color: var(--color-forest); }
.coupon-assigned-item { padding: 0.6rem 0; border-bottom: 1px solid var(--color-sage); }
.coupon-assigned-item:last-child { border-bottom: none; }
.coupon-assigned-title { margin: 0; font-weight: 700; }
.coupon-assigned-code { font-weight: 800; letter-spacing: 0.04em; color: var(--color-orange-dark); }
.coupon-assigned-meta { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.9rem; }
.coupon-assigned-actions { display: flex; gap: 0.5rem; margin-top: 0.55rem; }
.coupon-assigned-actions button { border: 1px solid var(--color-sage); background: var(--card); border-radius: 999px; padding: 0.45rem 1rem; font-weight: 700; cursor: pointer; /* 154: Normal level */ min-height: 2.75rem; }

/* 129-featured-products: the «Destacado» pill. On buyer cards
   (home.js, inside .product which is position:relative) it overlays
   the photo's top-left — the favorite heart owns the top-right. On
   the product page the --static variant sits inline above the title.
   The seller-side chip and tier picker live on the inventory cards
   (products.js). Palette tokens only; the badge is a label, never a
   control. */
.featured-badge { position: absolute; top: 1.5rem; left: 1.5rem; z-index: 1; background: var(--color-orange); color: #fff; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.03em; }
.featured-badge--static { position: static; display: inline-block; margin-bottom: 0.4rem; }
.featured-badge[hidden] { display: none; }
.featured-chip { margin: 0.35rem 0 0; font-weight: 700; color: var(--color-orange-dark); }
.promo-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.55rem; }
.promo-picker[hidden] { display: none; }
.promo-picker-title { flex-basis: 100%; margin: 0; font-weight: 700; color: var(--color-forest); }
.promo-picker button { border: 1px solid var(--color-sage); background: var(--card); border-radius: 999px; padding: 0.45rem 1rem; font-weight: 700; cursor: pointer; /* 154: Normal level */ min-height: 2.75rem; }
.promo-picker button.primary { background: var(--color-orange); border-color: var(--color-orange); color: #fff; }

/* 137-forum-photos: attached photos under a forum message's
   text, and the photo row in the composer / reply forms. The
   staging tray reuses .media-list / .media-thumb above.
   Layout only — no color values. */
.forum-media { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.forum-media a { flex: 1 1 10rem; max-width: 100%; }
.forum-media img { display: block; width: 100%; height: 100%; max-height: 24rem; object-fit: cover; border-radius: 12px; }
.forum-photo-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }

/* 138-poll-share-vote: the public poll page — a voting
   landing, not a thread clone. The poll block itself reuses
   the 136 classes; this block is the page frame: the back
   link, the question at reading size, the author line and
   the registration invitation card. Palette tokens only. */
.poll-main { max-width: 44rem; margin: 0 auto; padding: 1rem; }
.poll-back { display: inline-block; margin-bottom: 0.8rem; color: var(--color-forest); font-weight: 700; text-decoration: none; }
.poll-card { background: var(--card); border-radius: 12px; padding: 1rem; }
.poll-author { margin: 0 0 0.4rem; font-weight: 700; color: var(--color-hunter); }
.poll-dot { color: var(--muted); }
.poll-question { margin: 0 0 0.6rem; font-size: 1.45rem; line-height: 1.3; overflow-wrap: break-word; }
.poll-cta { margin-top: 1rem; background: var(--card); border: 1px solid var(--color-sage); border-radius: 12px; padding: 1rem; text-align: center; }
.poll-cta p { margin: 0 0 0.7rem; font-weight: 600; }
.poll-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; /* 154: Principal level */ background: var(--color-orange); color: #fff; font-weight: 700; text-decoration: none; border-radius: 999px; padding: 0.6rem 1.4rem; }
.poll-cta-btn:hover, .poll-cta-btn:active { background: var(--color-orange-dark); }
.poll-thread-wrap { margin-top: 1rem; text-align: center; }
.poll-thread-wrap a { color: var(--color-forest); font-weight: 700; }

/* 140-sellers-landing: the campaign-only sellers landing —
   a marketing page, not a marketplace screen: a dark hero
   with the campaign video, three steps, a trust strip and
   the slogan close. Palette tokens only; the CTAs are
   primary anchors (--color-orange / --color-orange-dark,
   Principle VII). */
.sellers-main { max-width: 64rem; margin: 0 auto; padding: 1rem; width: 100%; }
.sellers-hero { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; background: var(--color-hunter); border-radius: 16px; padding: 1.5rem; }
.sellers-hero-text { flex: 1 1 18rem; }
.sellers-title { color: #fff; font-size: 1.8rem; line-height: 1.25; margin: 0 0 0.8rem; }
.sellers-sub { color: var(--color-mint); font-size: 1.05rem; margin: 0 0 1.2rem; }
.sellers-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; /* 154: Principal level */ background: var(--color-orange); color: #fff; font-weight: 700; text-decoration: none; border-radius: 999px; padding: 0.7rem 1.6rem; }
.sellers-cta:hover, .sellers-cta:active { background: var(--color-orange-dark); }
.sellers-hero-media { flex: 0 1 16rem; margin: 0 auto; width: 100%; }
.sellers-video { display: block; width: 100%; max-height: 30rem; border-radius: 12px; background: var(--text); object-fit: cover; }
.sellers-steps { margin-top: 2rem; }
.sellers-steps h2 { color: var(--color-hunter); text-align: center; margin: 0 0 1rem; }
.sellers-step-list { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.sellers-step { flex: 1 1 14rem; background: var(--card); border-radius: 12px; padding: 1rem; }
.sellers-step-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-grass); color: #fff; font-weight: 700; }
.sellers-step h3 { margin: 0.6rem 0 0.4rem; color: var(--color-hunter); }
.sellers-step p { margin: 0; color: var(--muted); }
.sellers-trust { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.5rem; }
.sellers-trust p { margin: 0; background: var(--color-mint); color: var(--color-hunter); font-weight: 700; border-radius: 999px; padding: 0.45rem 1rem; }
.sellers-close { margin-top: 2rem; text-align: center; background: var(--card); border: 1px solid var(--color-sage); border-radius: 12px; padding: 1.5rem 1rem; }
.sellers-close h2 { color: var(--color-forest); margin: 0 0 0.6rem; }
.sellers-close p { color: var(--muted); margin: 0 0 1.1rem; }

/* 145-protected-purchase: the «Compra Protegida» badge. One static
   component reused on the product page, the cart totals aside and
   the payment form: a shield seal, the protection's name, a
   one-line explanation and a native <details> expander linking to
   the standing legal pages. Token-only colors (Principle VII);
   the check is stroked in neutral white, the one allowed neutral. */
.protected-badge { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.9rem; padding: 0.7rem 0.85rem; border: 1px solid var(--color-sage); border-radius: 12px; background: color-mix(in srgb, var(--color-sage) 14%, #fff); text-align: left; }
.protected-badge-icon { flex: 0 0 auto; margin-top: 0.1rem; }
.protected-badge-shield { fill: var(--color-forest); }
.protected-badge-body { min-width: 0; }
.protected-badge-line { margin: 0; font-size: 0.92rem; }
.protected-badge-line strong { color: var(--color-hunter); }
.protected-badge-details { margin-top: 0.3rem; font-size: 0.88rem; }
.protected-badge-details summary { color: var(--color-teal); font-weight: 600; cursor: pointer; }
.protected-badge-details p { margin: 0.45rem 0 0; }
.protected-badge-links a { color: var(--color-teal); font-weight: 600; }

/* 148-sellers-numbers: the landing answers «how much do I
   earn, and when do I get paid?» — a net-earnings calculator
   (its math ports CartChargeController's charge split), the
   five-step payout timeline and the objection FAQ. Only the
   landing's existing tokens; the timeline reuses .sellers-step
   and .sellers-step-num for its cards. */
.sellers-calc { margin-top: 2rem; }
.sellers-calc h2 { color: var(--color-hunter); text-align: center; margin: 0 0 1rem; }
.sellers-calc-card { background: var(--card); border: 1px solid var(--color-sage); border-radius: 12px; padding: 1rem; max-width: 34rem; margin: 0 auto; }
.sellers-calc-label { display: block; font-weight: 700; color: var(--color-hunter); margin-bottom: 0.4rem; }
.sellers-calc-input { width: 100%; box-sizing: border-box; font-size: 1.15rem; font-weight: 700; color: var(--text); padding: 0.55rem 0.7rem; border: 1px solid var(--color-sage); border-radius: 8px; margin-bottom: 0.9rem; }
.sellers-calc-rows { margin: 0; }
.sellers-calc-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; }
.sellers-calc-row dt { color: var(--muted); }
.sellers-calc-row dd { margin: 0; font-weight: 600; color: var(--text); white-space: nowrap; }
.sellers-calc-net { border-top: 2px solid var(--color-sage); margin-top: 0.4rem; padding-top: 0.6rem; }
.sellers-calc-net dt { color: var(--color-hunter); font-weight: 700; }
.sellers-calc-net dd { color: var(--color-forest); font-size: 1.2rem; font-weight: 800; }
.sellers-calc-note { margin: 0.8rem 0 0; font-size: 0.88rem; color: var(--muted); }
.sellers-proof { text-align: center; color: var(--color-hunter); font-weight: 600; margin: 1rem auto 0; max-width: 34rem; }
.sellers-timeline { margin-top: 2rem; }
.sellers-timeline h2 { color: var(--color-hunter); text-align: center; margin: 0 0 1rem; }
.sellers-timeline-list { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.sellers-timeline-list .sellers-step { flex: 1 1 10rem; }
.sellers-faq { margin-top: 2rem; max-width: 44rem; margin-left: auto; margin-right: auto; }
.sellers-faq h2 { color: var(--color-hunter); text-align: center; margin: 0 0 1rem; }
.sellers-faq-item { background: var(--card); border: 1px solid var(--color-sage); border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 0.6rem; }
.sellers-faq-item summary { color: var(--color-hunter); font-weight: 700; cursor: pointer; }
.sellers-faq-item p { margin: 0.5rem 0 0; color: var(--muted); }

/* 150-express-checkout: the Express Checkout Element's
   section above the card form on the payment page. The
   section stays hidden until Stripe reports an available
   wallet, so these rules only ever style a section the
   buyer can actually use. Palette/neutral tokens only —
   the wallet buttons inside are rendered by Stripe and
   the wallets with their own mandated branding. */
.express-checkout { margin-top: 1rem; }
.express-checkout[hidden] { display: none; }
.express-checkout-heading { margin: 0 0 0.6rem; text-align: center; font-weight: 700; color: var(--color-hunter); }
.express-checkout-or { display: flex; align-items: center; gap: 0.75rem; margin: 0.9rem 0 0; color: var(--muted); font-size: 0.9rem; }
.express-checkout-or::before,
.express-checkout-or::after { content: ''; flex: 1; border-top: 1px solid var(--color-sage); }
.express-checkout-or span { white-space: nowrap; }

/* 151-interest-into-sales: the «avísame si entra» box under a
   zero-result search (home) and the guest note on the
   favorites page. Palette tokens only (constitution: the
   closed --color-* set + the legacy layout vars the file
   already uses). */
.search-alert { background: var(--card); border: 1px solid var(--color-sage); border-radius: 12px; padding: 0.9rem 1rem; margin: 0.8rem 0; max-width: 34rem; }
.search-alert-prompt { margin: 0 0 0.6rem; color: var(--text); }
.search-alert-email-row { margin: 0 0 0.6rem; }
.search-alert-email-row input { width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; border: 1px solid var(--color-sage); border-radius: 8px; color: var(--text); }
.search-alert-done { margin: 0; color: var(--color-hunter); font-weight: 600; }

/* 152-categories-about-polish: the /categories index cards
   and the /about sections. Both pages are static content in
   the sellers page's shape; the step cards themselves are
   the standing .sellers-step rules above. Palette and
   neutral tokens only (Principle VII). */
.categories-main, .about-main { max-width: 64rem; margin: 0 auto; padding: 1rem; width: 100%; }
.categories-intro, .about-intro { color: var(--muted); max-width: 44rem; }
.categories-grid { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.categories-grid > li { flex: 1 1 14rem; display: flex; }
.categories-card { flex: 1; display: block; background: var(--card); border: 1px solid var(--color-sage); border-radius: 12px; padding: 1rem; text-decoration: none; color: inherit; }
.categories-card h2 { margin: 0 0 0.4rem; color: var(--color-hunter); font-size: 1.1rem; }
.categories-card p { margin: 0; color: var(--muted); }
.categories-about { margin-top: 1.5rem; text-align: center; }
.about-slogan { text-align: center; color: var(--color-forest); font-size: 1.3rem; font-weight: 700; margin: 1.5rem 0 0; }
.about-section { margin-top: 2rem; }
.about-section h2 { color: var(--color-hunter); text-align: center; margin: 0 0 1rem; }
.about-sell-text { color: var(--muted); max-width: 44rem; margin: 0 auto; text-align: center; }
.about-links { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }
.about-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; /* 154: Principal level */ background: var(--color-orange); color: #fff; font-weight: 700; text-decoration: none; border-radius: 999px; padding: 0.7rem 1.6rem; }
.about-cta:hover, .about-cta:active { background: var(--color-orange-dark); }
.about-main .protected-badge { max-width: 44rem; margin: 0 auto; }

/* 154-button-text-scale: the button & text-action scale. Root
   cause (audit, specs/154-button-text-scale): this stylesheet
   never had a global rule for content links or a base rule for
   <button>, so every action created without a component class
   fell back to the browser — rgb(0,0,238) underlined links and
   #EFEFEF buttons 21px tall. This block names the missing
   components once, gives real rules to the classes that never
   had any, and is applied (via class assignments in JS/HTML)
   to the 24 inventoried blue actions and their grey-button
   family. Levels: Principal >=48px (button.primary, raised
   above), Normal >=44px, Compacto >=40px (dense rows only),
   text actions in hunter green with a >=44px tap area (the
   .link-btn treatment). Palette tokens only; the file's single
   status-only blue token stays reserved for its shipment-status
   dot and is never used here. */

/* Normal — a card's main action: the primary pill at 44px. */
.btn-main {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; background: var(--color-orange); color: #fff;
  border: 0; border-radius: 999px; padding: 0.65rem 1.15rem;
  font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn-main:hover, .btn-main:active { background: var(--color-orange-dark); }

/* Normal — the secondary pill (the .offer-received-actions /
   .promo-picker pattern, named once): white, --color-sage
   border, 44px. The order detail's two actions carried the
   phantom classes .return-request-link / .track-shipment-link
   with no rules at all; they are this pill now. */
.btn-secondary,
.return-request-link,
.track-shipment-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; background: var(--card); color: var(--text);
  border: 1px solid var(--color-sage); border-radius: 999px;
  padding: 0.65rem 1.05rem; font: inherit; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn-secondary:hover, .btn-secondary:focus-visible,
.return-request-link:hover, .return-request-link:focus-visible,
.track-shipment-link:hover, .track-shipment-link:focus-visible {
  border-color: var(--color-orange);
}

/* Normal — «Cambiar dirección» in the cart's shipping summary,
   drawn like its sibling .cart-page-secondary-btn (the «Añadir
   dirección» button), which it never matched before. */
#cart-change-address-link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0.55rem 1rem; border-radius: 8px; cursor: pointer;
  background: #fff; border: 1px solid #c5c5c5; color: var(--text);
  text-decoration: none; font-weight: 600;
}

/* Compacto — dense rows and tables (admin lists, saved cards,
   support): the same secondary pill at 40px, plus its orange
   main variant. The saved-cards classes (.delete-btn,
   .confirm-delete-btn, .cancel-delete-btn) and the support
   .grant-full-name-btn were phantom classes with no rules;
   they are this pill now. */
.btn-compact,
.delete-btn,
.confirm-delete-btn,
.cancel-delete-btn,
.grant-full-name-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.5rem; background: var(--card); color: var(--text);
  border: 1px solid var(--color-sage); border-radius: 999px;
  padding: 0.5rem 0.95rem; font: inherit; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn-compact:hover, .btn-compact:focus-visible,
.delete-btn:hover, .delete-btn:focus-visible,
.confirm-delete-btn:hover, .confirm-delete-btn:focus-visible,
.cancel-delete-btn:hover, .cancel-delete-btn:focus-visible,
.grant-full-name-btn:hover, .grant-full-name-btn:focus-visible {
  border-color: var(--color-orange);
}
.btn-compact-main {
  background: var(--color-orange); border-color: var(--color-orange); color: #fff;
}
.btn-compact-main:hover, .btn-compact-main:focus-visible {
  background: var(--color-orange-dark); border-color: var(--color-orange-dark);
}

/* Text action — secondary actions that stay text: the .link-btn
   treatment (hunter green, underlined) with vertical padding
   up to a >=44px tap area. The «ver fallidos» toggles carried
   the phantom ids #orders-view-toggle / #sales-view-toggle
   with no rules; they are this action now. */
.link-action,
#orders-view-toggle,
#sales-view-toggle {
  display: inline-block; padding: 0.78rem 0.25rem; min-height: 2.75rem;
  color: var(--color-hunter); text-decoration: underline;
  font-weight: 600; font-size: 0.95rem; cursor: pointer;
}

/* The product form's round icon buttons (photo × and ✎ on the
   media thumbs, the variant rows' ✎/×, the variant photo's ×)
   are drawn at 1.4rem by design — they overlay the photos.
   Their tap area grows to 44px invisibly instead. */
.media-thumb button,
.variant-photo-thumb button { position: absolute; }
.variant-row-actions button { position: relative; }
.media-thumb button::after,
.variant-photo-thumb button::after,
.variant-row-actions button::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%);
}