/* =========================================================
   GLINT RIDE — tienda, pedido, consentimiento y páginas legales
   Se añade al final de styles.css: no reemplaza lo existente.
   ========================================================= */

:root{
  --danger: #e5484d;
}

/* Accesibilidad: salto al contenido y texto sólo para lectores de pantalla */
.skip-link{
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 200;
  padding: .6rem 1rem;
  background: var(--glint-pink);
  color: #14101a;
  font-weight: 600;
  border-radius: var(--radius);
  transition: top .2s ease;
}
.skip-link:focus{ top: 1rem; }

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

:focus-visible{
  outline: 2px solid var(--glint-pink);
  outline-offset: 2px;
}

/* ---------- Catálogo ---------- */
.section-heading__note{
  font-size: .82rem;
  color: var(--ink-2);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.card__image{ position: relative; }

.card__badge{
  position: absolute;
  top: .75rem; left: .75rem;
  padding: .3rem .6rem;
  background: rgba(7,7,11,.85);
  border: 1px solid var(--line);
  color: var(--ink-0);
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card__specs{
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .25rem;
  font-size: .78rem;
  color: var(--ink-2);
}
.card__specs li::before{ content: "— "; color: var(--glint-magenta); }

.sizes{ display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }

.sizes__chip{
  min-width: 2.6rem;
  padding: .4rem .5rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-1);
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.sizes__chip[aria-pressed="true"]{
  border-color: var(--glint-pink);
  color: var(--glint-pink);
  background: rgba(240,168,206,.08);
}

.qty{ display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.qty__btn{
  width: 2rem; height: 2rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-0);
  font-size: 1rem;
  cursor: pointer;
}
.qty__btn:hover{ border-color: var(--glint-pink); }
.qty__value{ min-width: 1.2rem; text-align: center; font-variant-numeric: tabular-nums; }

.shipping-note{
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--glint-violet);
  background: var(--bg-1);
  font-size: .85rem;
  color: var(--ink-2);
}

/* ---------- Guía de tallas ---------- */
.size-guide{ margin-top: 3rem; }
.table-scroll{ overflow-x: auto; }
.size-table{ width: 100%; border-collapse: collapse; font-size: .85rem; }
.size-table th, .size-table td{
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.size-table thead th{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-0);
}
.size-table tbody th{ color: var(--glint-pink); font-weight: 600; }

/* ---------- Botones nuevos ---------- */
.btn--cart{ position: relative; }
.cart-count{
  margin-left: .4rem;
  min-width: 1.4rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--glint-pink);
  color: #14101a;
  font-size: .74rem;
  font-weight: 700;
  display: inline-block;
  text-align: center;
}
.btn--danger{ border-color: rgba(229,72,77,.5); color: #ffb4b6; }
.btn--danger:hover{ border-color: var(--danger); background: rgba(229,72,77,.12); }

/* ---------- Cajón del pedido ---------- */
.drawer-overlay{
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  justify-content: flex-end;
  background: rgba(5,4,8,.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.drawer-overlay.is-open{ opacity: 1; visibility: visible; }

.drawer{
  position: relative;
  width: min(420px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: 2.4rem 1.6rem 2rem;
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  transform: translateX(18px);
  transition: transform .25s ease;
}
.drawer-overlay.is-open .drawer{ transform: translateX(0); }

.drawer__close{
  position: absolute;
  top: .8rem; right: .9rem;
  background: none; border: none;
  color: var(--ink-2);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.drawer__hint{ font-size: .82rem; color: var(--ink-2); }

.cart-list{ list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .9rem; }
.cart-list__item{
  display: grid;
  gap: .35rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
  font-size: .86rem;
}
.cart-list__name{ color: var(--ink-0); font-weight: 500; }
.cart-list__price{ font-family: var(--font-display); color: var(--glint-pink); }
.cart-list__controls{ display: flex; align-items: center; gap: .5rem; }
.cart-list__remove{
  margin-left: auto;
  background: none; border: none;
  color: var(--ink-2);
  font-size: .78rem;
  text-decoration: underline;
  cursor: pointer;
}
.cart-empty{ color: var(--ink-2); font-size: .86rem; }

.cart-total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1rem 0 1.4rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink-0);
  letter-spacing: .04em;
}
.cart-checkout{ display: grid; gap: .2rem; }

/* ---------- Consentimiento y baja ---------- */
.consent{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: .2rem 0 1rem;
  font-size: .78rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.consent input{ margin-top: .25rem; flex: none; }
.consent a{ color: var(--glint-pink); text-decoration: underline; }

.contact__fields{ display: flex; gap: .6rem; flex-wrap: wrap; }
.unsubscribe{ margin-top: 1.6rem; font-size: .82rem; }
.unsubscribe summary{ cursor: pointer; color: var(--ink-2); }
.unsubscribe[open]{ color: var(--ink-1); }

/* ---------- Cuenta: pedidos y borrado ---------- */
.order-list{ list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.order-list__item{
  display: grid;
  gap: .2rem;
  padding: .7rem .8rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  font-size: .8rem;
  text-align: left;
}
.order-list__item strong{ font-family: var(--font-display); color: var(--glint-pink); letter-spacing: .06em; }
.order-list__item span{ color: var(--ink-1); }
.order-list__item time{ color: var(--ink-2); font-size: .74rem; }

.danger-zone{ margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .8rem; }
.danger-zone summary{ cursor: pointer; color: var(--ink-2); }
.danger-zone .field__error{ color: #ffb4b6; }

.field textarea{
  display: block;
  width: 100%;
  padding: .7rem .8rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--ink-0);
  font-family: inherit;
  font-size: .9rem;
  border-radius: var(--radius);
  resize: vertical;
}
.field textarea:focus{ border-color: var(--glint-pink); outline: none; }

/* ---------- Pie con enlaces legales ---------- */
.footer__links{ display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 1rem; }
.footer__links a{
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.footer__links a:hover{ color: var(--glint-pink); }
.footer__small{ font-size: .72rem; color: var(--ink-2); max-width: 60ch; }

/* ---------- Páginas de texto (privacidad, términos, 404) ---------- */
.page{ padding: 7.5rem 0 4rem; }
.page__inner{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.page h1{ font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page h2{
  margin-top: 2.2rem;
  font-size: 1.05rem;
  color: var(--glint-pink);
  letter-spacing: .06em;
}
.page p, .page li{ font-size: .92rem; }
.page ul{ padding-left: 1.2rem; }
.page a{ color: var(--glint-pink); text-decoration: underline; }
.page .meta{ font-size: .78rem; color: var(--ink-2); }
.page .callout{
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  background: var(--bg-1);
  border-left: 2px solid var(--glint-magenta);
  font-size: .85rem;
}
.page .back{ display: inline-block; margin-top: 2rem; }

@media (max-width: 520px){
  .drawer{ padding: 2rem 1.1rem 1.6rem; }
  .contact__fields{ flex-direction: column; }
  .contact__fields .btn{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .drawer, .drawer-overlay, .skip-link{ transition: none; }
}