@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   TIENDA · CAPA DE COMERCIO
   ───────────────────────────────────────────────────────────────────
   Se carga DESPUES de _astro/style.*.css y de assets/michelle.css.

   No define paleta ni tipografia propias: todo cuelga de las mismas
   variables del sitio (--marfil, --crema, --ballet, --rosa, --tinta,
   --hairline, --font-display, --font-ui, --step-*, --space-*).

   Aqui solo viven las piezas que la tienda necesita y que el sitio
   editorial no tenia: galeria de producto, lineas de carrito,
   opciones de envio, avisos, y el panel de administracion.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Enlaces y botones que generan los scripts ─────────────── */

.store-cta{
  font-family:var(--font-ui);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--chilli);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:.35rem;
}
.store-cta::after{ content:"→"; transition:translate var(--dur-fast) var(--ease-out) }
.kit__link:hover .store-cta::after{ translate:.25rem 0 }

/* store.js, checkout.js, order-status.js y admin.js escriben botones
   con la clase .button. Se visten igual que los .btn del sitio. */
.button{
  --btn-bg:var(--chilli); --btn-fg:var(--marfil);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-ui); font-size:var(--step--1); font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; text-decoration:none;
  padding:.95em 1.7em; min-height:46px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bg); border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.button:hover{ --btn-bg:var(--chilli-hondo); border-color:var(--chilli-hondo) }
.button[disabled]{ opacity:.45; cursor:not-allowed }
.button-block{ inline-size:100% }
.button-secondary{ --btn-bg:transparent; --btn-fg:var(--tinta); border-color:var(--hairline) }
.button-secondary:hover{ --btn-bg:transparent; --btn-fg:var(--chilli); border-color:var(--chilli) }
.text-link{
  font-family:var(--font-ui); font-size:.82rem; color:var(--humo);
  text-decoration:underline; text-underline-offset:3px;
}
.text-link:hover{ color:var(--chilli) }

/* ── 2 · Ficha de producto ─────────────────────────────────────── */

.gallery-thumbs{
  display:flex; gap:.6rem; margin-top:var(--space-s); flex-wrap:wrap;
}
.gallery-thumb{
  inline-size:74px; block-size:74px; padding:0;
  background:var(--crema); border:1px solid var(--hairline-soft);
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.gallery-thumb img{ inline-size:100%; block-size:100%; object-fit:cover; display:block }
.gallery-thumb:hover{ border-color:var(--niebla) }
.gallery-thumb[aria-current="true"]{ border-color:var(--chilli) }

.trust-list{
  list-style:none; margin:var(--space-m) 0 0; padding:0; display:grid; gap:.45rem;
}
.trust-list li{
  font-family:var(--font-read); font-size:.84rem; line-height:1.6;
  color:var(--humo); padding-left:1rem; position:relative;
}
.trust-list li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  inline-size:5px; block-size:5px; border-radius:50%; background:var(--rosa);
}

/* ── 3 · Carrito y resumen del checkout ────────────────────────── */

.cart__lines .cart-item{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;
  gap:var(--space-m);
  align-items:start;
  padding-block:var(--space-m);
  border-bottom:1px solid var(--hairline);
}
.cart__lines .cart-item:first-child{ border-top:1px solid var(--hairline) }
.cart__lines .cart-item img{
  inline-size:88px; block-size:110px; object-fit:cover; display:block;
  background:var(--crema); border-radius:var(--radius);
}
.cart__lines .cart-item h3{
  font-family:var(--font-display); font-size:var(--step-0); line-height:1.3; margin:0;
}
.cart__lines .cart-item p{
  font-family:var(--font-ui); font-size:.76rem; color:var(--humo); margin:.25rem 0 0;
}
.cart__lines .cart-item > strong{
  font-family:var(--font-ui); font-size:.95rem; white-space:nowrap;
}
.quantity{
  display:inline-flex; align-items:center; gap:.75rem;
  margin-top:.75rem; flex-wrap:wrap;
}
.quantity button{
  inline-size:34px; block-size:36px; padding:0;
  background:transparent; border:1px solid var(--hairline); border-radius:var(--radius);
  color:inherit; font-family:var(--font-ui); cursor:pointer;
}
.quantity button:hover{ background:var(--crema) }
.quantity span{
  inline-size:28px; text-align:center; font-family:var(--font-ui); font-size:.9rem;
}
.quantity .remove{
  inline-size:auto; block-size:auto; padding:0; margin-inline-start:.4rem;
  border:0; background:none; color:var(--humo);
  font-family:var(--font-ui); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:underline; text-underline-offset:3px;
}
.quantity .remove:hover{ color:var(--chilli); background:none }

.empty-state{
  display:grid; gap:var(--space-s); justify-items:start;
  max-inline-size:52ch; padding:var(--space-l);
  border:1px dashed var(--niebla);
}
.empty-state h2{ font-family:var(--font-display); font-size:var(--step-2) }
.empty-state p{ font-family:var(--font-read); line-height:1.7; color:var(--humo) }

.checkout-items{ display:grid; margin-bottom:var(--space-m) }
.checkout-items .cart-item{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:.75rem;
  align-items:center; padding-block:.7rem; border-bottom:1px solid var(--hairline-soft);
}
.checkout-items .cart-item img{
  inline-size:52px; block-size:62px; object-fit:cover; display:block;
  background:var(--marfil); border-radius:var(--radius);
}
.checkout-items .cart-item h3{ font-family:var(--font-display); font-size:.92rem; margin:0 }
.checkout-items .cart-item p{ font-family:var(--font-ui); font-size:.72rem; color:var(--humo); margin:.15rem 0 0 }
.checkout-items .cart-item strong{ font-family:var(--font-ui); font-size:.84rem; white-space:nowrap }

/* ── 4 · Formulario de compra ──────────────────────────────────── */

.pane__h--gap{ margin-top:var(--space-xl) }
.honeypot{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

.shipping-option{
  display:flex; align-items:flex-start; gap:.8rem;
  padding:var(--space-s) var(--space-m);
  border:1px solid var(--hairline); border-radius:var(--radius);
  background:var(--marfil); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.shipping-option:hover{ border-color:var(--niebla) }
.shipping-option:has(input:checked){ border-color:var(--chilli); background:var(--ballet-claro) }
.shipping-option input{ margin-top:.35rem; accent-color:var(--chilli) }
.shipping-option span{ display:grid; gap:.15rem }
.shipping-option strong{ font-family:var(--font-ui); font-size:.9rem; font-weight:500 }
.shipping-option small{ font-family:var(--font-read); font-size:.78rem; color:var(--humo) }
[data-shipping-options]{ display:grid; gap:.6rem; margin-top:var(--space-m) }

.notice{
  font-family:var(--font-read); font-size:.86rem; line-height:1.6;
  padding:var(--space-s) var(--space-m);
  border:1px solid var(--hairline); border-inline-start:3px solid var(--niebla);
  background:var(--crema); color:var(--tinta);
  margin-block:var(--space-m);
}
.notice[hidden]{ display:none }
.notice.success{ border-inline-start-color:var(--rosa); background:var(--ballet-claro) }
.notice.error{ border-inline-start-color:var(--chilli); background:#FBF0EF }

.spinner{
  inline-size:14px; block-size:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  display:inline-block; margin-inline-end:.5rem;
  animation:store-spin .7s linear infinite;
}
@keyframes store-spin{ to{ rotate:360deg } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation:none } }

.toast{
  position:fixed; inset-block-end:1.25rem; inset-inline-start:50%;
  translate:-50% 1rem; opacity:0; pointer-events:none; z-index:80;
  font-family:var(--font-ui); font-size:.82rem; letter-spacing:.06em;
  padding:.7em 1.2em; background:var(--tinta); color:var(--marfil);
  border-radius:var(--radius);
  transition:opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out);
}
.toast.show{ opacity:1; translate:-50% 0 }

/* ── 5 · Estado del pedido ─────────────────────────────────────── */

.estado{ padding-block:var(--space-4xl) }
.estado__card{
  max-inline-size:60ch; padding:clamp(1.5rem,5vw,3rem);
  background:var(--crema); border:1px solid var(--hairline-soft);
  display:grid; gap:var(--space-s); justify-items:start;
}
.estado__h{ font-family:var(--font-display); font-size:clamp(1.8rem,4.5vw,2.8rem); line-height:1.15 }
.estado__b{ font-family:var(--font-read); font-size:var(--step-0); line-height:1.7; color:var(--humo) }
.download-list{ display:grid; gap:.6rem; inline-size:100%; margin-block:var(--space-s) }
.order-meta{ margin:0 }

/* ── 6 · Administracion ────────────────────────────────────────── */

.admin-body{ background:var(--marfil) }
.admin-bar{
  position:sticky; top:0; z-index:40;
  background:var(--marfil); border-bottom:1px solid var(--hairline-soft);
}
.admin-bar__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-m); min-block-size:60px;
}
.admin-brand{
  font-family:var(--font-ui); font-size:.86rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--tinta);
}
.admin-brand span{ color:var(--humo) }
.admin-shell{ padding-block:var(--space-2xl) var(--space-4xl); display:grid; gap:var(--space-xl) }
.admin-heading .admin-h{ font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem) }

.metrics{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; background:var(--hairline-soft);
  border:1px solid var(--hairline-soft);
}
.metric{
  background:var(--marfil); padding:var(--space-m);
  display:grid; gap:.3rem;
}
.metric span{
  font-family:var(--font-ui); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--humo);
}
.metric strong{ font-family:var(--font-display); font-size:1.35rem }

.panel{
  background:var(--crema); border:1px solid var(--hairline-soft);
  padding:clamp(1rem,3vw,1.75rem); display:grid; gap:var(--space-m);
}
.filters{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-s); align-items:end;
}
.filters .field span{
  font-family:var(--font-ui); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--humo);
}
.filters .btn{ min-block-size:46px }

.table-scroll{ overflow-x:auto; max-inline-size:100% }
.orders-table{
  inline-size:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:.82rem;
}
.orders-table th{
  text-align:left; font-weight:500; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--humo); white-space:nowrap;
  padding:.6rem .8rem; border-bottom:1px solid var(--hairline);
}
.orders-table td{
  padding:.7rem .8rem; border-bottom:1px solid var(--hairline-soft); vertical-align:top;
}
.orders-table tbody tr:hover{ background:var(--marfil); cursor:pointer }

.badge{
  display:inline-block; font-family:var(--font-ui); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.28em .6em; border:1px solid var(--hairline);
  border-radius:var(--radius); color:var(--humo); background:var(--marfil);
}
.admin-detail[hidden]{ display:none }
.admin-detail-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-m);
}
.field-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-s);
}
.field.full{ grid-column:1 / -1 }
.timeline{
  list-style:none; margin:0; padding:0; display:grid; gap:.5rem;
  font-family:var(--font-ui); font-size:.78rem; color:var(--humo);
}
.timeline li{ padding-left:1rem; position:relative }
.timeline li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.55em;
  inline-size:5px; block-size:5px; border-radius:50%; background:var(--rosa);
}

/* ── 7 · Nada se sale de la pantalla ───────────────────────────── */

.cart__lines img, .checkout-items img, .gallery-thumb img{ max-inline-size:100% }

@media (max-width:640px){
  .cart__lines .cart-item{ grid-template-columns:64px minmax(0,1fr); }
  .cart__lines .cart-item img{ inline-size:64px; block-size:80px }
  .cart__lines .cart-item > strong{ grid-column:2; margin-top:.35rem }
}

/* ── 8 · Ajustes finos ─────────────────────────────────────────── */

.variant-note{
  margin-top:.3rem; font-family:var(--font-ui); font-size:.8rem;
  line-height:1.55; color:var(--humo); text-transform:none; letter-spacing:.01em;
}
.store-banda{ padding-block:0 var(--space-4xl) }
.store-banda__pie{ margin-top:var(--space-s); max-inline-size:46ch }

@media (max-width:640px){
  .buy .btn{ inline-size:100% }
}

/* El boton de compra es sobrio: ancho de su propio texto en escritorio,
   completo solo en pantallas chicas, como el resto del sitio. */
.buy__row .btn{ flex:0 0 auto; inline-size:auto }
@media (max-width:719px){ .buy__row .btn{ flex:1 1 100%; inline-size:100% } }