/* Sistema editorial aplicado a la tienda (PLP) y a la ficha de producto
 * (PDP), homologado con logged_home.html y editorial_pages.css: misma
 * paleta Quantum (grafito/turquesa #0fbfb0/dorado), misma tipografia
 * editorial de gran escala, mismo ritmo oscuro/claro por bloque.
 *
 * El componente de tarjeta de producto (.gtg-product-card) reproduce a
 * proposito el mismo diseno que .home-product-card en store_home.css: es
 * la misma pieza en dos hojas porque .home-product-card vive acoplada al
 * scope .store-home y aqui se necesita fuera de el (PLP, relacionados de
 * PDP). No se modifica store_home.css para no tocar Home.
 */

.shop-page {
  --shop-ink: #101012;
  --shop-paper: #f8f9fa;
  --shop-mist: #ececeb;
  --shop-muted: #5f6066;
  --shop-turquoise: #0fbfb0;
  --shop-gold: #d4b46a;
  --shop-sapphire: #17375c;
  background: var(--shop-paper);
  color: var(--shop-ink);
}
.shop-page *, .shop-page *::before, .shop-page *::after { box-sizing: border-box; }
.shop-shell { width: min(100% - 40px, 1280px); margin-inline: auto; }

/* --- Hero / cabecera de la tienda --- */
.shop-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(32px, 4vw, 56px) 0 clamp(26px, 3vw, 40px); background: var(--shop-ink); color: var(--shop-paper); }
.shop-hero__background { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 82% 20%, rgba(15,191,176,.16), transparent 30%), radial-gradient(circle at 15% 85%, rgba(40,79,126,.22), transparent 34%), #090a0c; }
.shop-eyebrow { margin: 0 0 18px; color: var(--shop-turquoise); font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
/* El tracking y el interlineado replican los del Home (store_home.css); el
 * cuerpo es menor a proposito: aqui el header es rotulo, no portada.
 * El lead lleva clase propia: como `.shop-hero p` le ganaba en
 * especificidad a `.shop-eyebrow`, el eyebrow se renderizaba a 16.8px en
 * vez de los 11.52px del resto del sitio. */
.shop-hero h1 { max-width: 900px; margin: 0 0 var(--space-4); font-size: var(--font-size-h1); font-weight: 400; letter-spacing: -.065em; line-height: .95; }
.shop-hero__lead { max-width: 560px; margin: 0; color: rgba(248,249,250,.66); font-size: 1.05rem; line-height: 1.6; }

/* --- Campo gravitacional Quantum ---------------------------------------
 *
 * El componente vive completo en static/css/quantum_lens.css, que estas
 * plantillas cargan junto a esta hoja. Aqui solo queda donde se coloca en
 * cada pagina: el campo se atenua a medida que el contenido pesa mas.
 * Opacidad .34 en la tienda y .16 en la ficha, contra .52 del Home.
 *
 * --ql-coherent (no opacity a secas): quantum_lens.css la usa como punto
 * de partida de la decoherencia al hacer scroll. opacity sigue fijandose
 * aqui mismo, asi que sin esa animacion el campo se ve igual que siempre.
 */

/* Tienda: a la derecha del titular, sin cruzarse con el texto. */
.shop-hero .quantum-lens { top: 48%; left: 74%; width: min(56vw, 760px); --ql-coherent: .34; opacity: var(--ql-coherent); }

/* Ficha de producto: solo un rastro detras de la galeria. */
.shop-pdp { position: relative; isolation: isolate; overflow: clip; }
.shop-pdp .quantum-lens { top: 38%; left: 28%; width: min(46vw, 620px); --ql-coherent: .16; opacity: var(--ql-coherent); }

@media (max-width: 720px) {
  .shop-hero .quantum-lens { top: 40%; left: 62%; width: 120vw; --ql-coherent: .26; opacity: var(--ql-coherent); }
  .shop-pdp .quantum-lens { --ql-coherent: .12; opacity: var(--ql-coherent); }
}

/* --- Barra de herramientas y filtros --- */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid #dcdcd9; }
.shop-toolbar__count { margin: 0; color: var(--shop-muted); font-size: .85rem; }
.shop-filters-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 18px; border: 1px solid var(--shop-ink); background: transparent; color: var(--shop-ink); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.shop-filters-toggle:hover { background: var(--shop-ink); color: var(--shop-paper); }

/* El padding inferior va en el layout, no en la columna de filtros: si
 * solo lo lleva el aside, la grilla de productos queda pegada al footer. */
.shop-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(72px, 9vw, 130px); align-items: start; }

/* Los grid items nacen con min-width:auto, es decir "no me encojas por
 * debajo de mi contenido". El <select> de categoria hereda su ancho minimo
 * de la opcion mas larga ("Alta costura personalizada exclusiva"), que
 * supera los 260px de la columna: sin este min-width:0 el panel de filtros
 * se desborda y se dibuja encima de la grilla de productos. Hace falta en
 * cada nivel de anidamiento, no solo en el exterior. */
.shop-layout > * { min-width: 0; }
.shop-filters { display: grid; gap: 26px; align-content: start; min-width: 0; }
.shop-field { display: grid; gap: var(--space-2); min-width: 0; }
.shop-field label, .shop-field legend { margin: 0; padding: 0; color: var(--shop-muted); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.shop-field input, .shop-field select { width: 100%; min-width: 0; max-width: 100%; min-height: 46px; border: 1px solid #c8c8c5; border-radius: 0; background: #fff; color: var(--shop-ink); padding: 0 14px; font: inherit; text-overflow: ellipsis; }
.shop-field .shop-price-row { display: flex; gap: var(--space-2); }
/* Cuadros iguales para todas las tallas: una grilla de columnas parejas
 * reparte el ancho sin importar si la etiqueta es "S" o "UNICA". */
.shop-chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.shop-chip { display: flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 0 12px; border: 1px solid #c8c8c5; color: var(--shop-ink); font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.shop-chip:hover { border-color: var(--shop-ink); }
.shop-chip input { position: absolute; opacity: 0; pointer-events: none; }
.shop-chip:has(input:checked) { border-color: var(--shop-ink); background: var(--shop-ink); color: var(--shop-paper); }
.shop-filters__actions { display: flex; gap: 10px; padding-top: 4px; }
.shop-filters__submit { flex: 1; min-height: 48px; border: 0; background: var(--shop-ink); color: var(--shop-paper); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; cursor: pointer; transition: background .2s ease, color .2s ease; }
.shop-filters__submit:hover { background: var(--shop-turquoise); color: var(--shop-ink); }
.shop-filters__reset { display: inline-flex; align-items: center; padding: 0 var(--space-4); border: 1px solid #c8c8c5; color: var(--shop-muted); font-size: .78rem; text-decoration: none; }
.shop-filters__reset:hover { border-color: var(--shop-ink); color: var(--shop-ink); }

/* Resumen de filtros activos como chips removibles: evita que el usuario
 * tenga que reabrir el panel (colapsado por defecto en movil) para saber
 * que esta filtrando. */
.shop-active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 16px 0; border-bottom: 1px solid #dcdcd9; }
.shop-chip-active { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--shop-ink); border-radius: 999px; background: var(--shop-mist); color: var(--shop-ink); font-size: .76rem; font-weight: 800; text-decoration: none; transition: background .18s ease, color .18s ease; }
.shop-chip-active .material-icons-outlined { font-size: 16px; }
.shop-chip-active:hover { background: var(--shop-ink); color: var(--shop-paper); }
.shop-chip-active--clear { border-style: dashed; background: transparent; color: var(--shop-muted); }
.shop-chip-active--clear:hover { border-style: solid; background: var(--shop-ink); color: var(--shop-paper); }

.shop-empty { padding: clamp(48px, 8vw, 90px); border-left: 3px solid var(--shop-turquoise); background: var(--shop-mist); }
.shop-empty p { margin: 0 0 20px; color: var(--shop-muted); font-size: 1.02rem; }

.shop-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid #dcdcd9; }
.shop-pagination a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--shop-ink); color: var(--shop-ink); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background .18s ease, color .18s ease; }
.shop-pagination a:hover { background: var(--shop-ink); color: var(--shop-paper); }
.shop-pagination span { color: var(--shop-muted); font-size: .82rem; }

/* --- Tarjeta de producto: PLP y relacionados de PDP --- */
.gtg-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 18px; }
.gtg-product-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.gtg-product-card { min-width: 0; }
.gtg-product-card__image { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #dededc; }
.gtg-product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.gtg-product-card:hover .gtg-product-card__image img,
.gtg-product-card:focus-within .gtg-product-card__image img { transform: scale(1.035); }
.gtg-product-card__badge { position: absolute; top: 12px; left: 12px; padding: 6px 9px; background: #101012; color: #f8f9fa; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gtg-product-card__body { padding-top: var(--space-4); }
/* Valores calcados de .home-product-card (store_home.css) para que la
 * tarjeta se lea igual en Home y en la tienda. */
.gtg-product-card__category { margin: 0 0 5px; color: #5f6066; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.gtg-product-card__name { margin: 0 0 13px; font-size: 1.02rem; font-weight: 800; line-height: 1.35; }
.gtg-product-card__name a { color: inherit; text-decoration: none; }
.gtg-product-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gtg-product-card__price { font-size: .92rem; font-weight: 800; color: var(--color-zafiro, #17375c); }
.gtg-product-card__sizes { margin: 0; color: #5f6066; font-size: .75rem; }
.gtg-product-card--compact .gtg-product-card__name { font-size: .86rem; }
.gtg-product-card--compact .gtg-product-card__body { padding-top: var(--space-3); }

@media (max-width: 980px) {
  .shop-layout { grid-template-columns: 1fr; }
  .gtg-product-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .shop-shell { width: min(100% - 32px, 1280px); }
  .shop-hero p { font-size: .95rem; }
}

/* --- PDP --- */
.shop-pdp { background: var(--shop-ink); color: var(--shop-paper); }
.shop-pdp__breadcrumb { padding: 22px 0; color: rgba(248,249,250,.5); font-size: .78rem; }
.shop-pdp__breadcrumb a { color: rgba(248,249,250,.72); text-decoration: none; }
.shop-pdp__breadcrumb a:hover { color: var(--shop-turquoise); }
.shop-pdp__layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); padding-bottom: clamp(64px, 8vw, 110px); }
.shop-pdp__layout > * { min-width: 0; }
.shop-pdp__layout .pdp-gallery { width: 100%; }

/* .shop-pdp__layout nunca tenia una regla equivalente a la de
   .shop-layout (PLP, mas arriba en esta hoja): la galeria y la info se
   quedaban en 2 columnas de ~170px/~155px incluso en un telefono. Con
   las tarjetas de caracteristicas (mas anchas, con padding) eso se
   volvio imposible de ignorar -- el texto se cortaba contra el borde --
   pero el problema ya afectaba a toda la ficha, no solo a las tarjetas.
   Mismo punto de quiebre que la PLP, por consistencia. Tiene que ir
   DESPUES de la regla base de arriba: con la misma especificidad, un
   @media declarado antes pierde contra una regla normal declarada
   despues (asi fallo el primer intento de este arreglo). */
@media (max-width: 980px) {
  .shop-pdp__layout { grid-template-columns: 1fr; }
}
.shop-pdp__info { align-self: start; padding-top: clamp(4px, 2vw, 20px); }
.shop-pdp__category { margin: 0 0 14px; color: var(--shop-turquoise); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.shop-pdp__title { margin: 0 0 20px; font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 400; letter-spacing: -.045em; line-height: .98; overflow-wrap: anywhere; }
.shop-pdp__review-note { margin: 0 0 var(--space-5); color: rgba(248,249,250,.5); font-size: .85rem; }
.shop-pdp__price { display: block; margin-bottom: 26px; font-size: 1.5rem; font-weight: 800; color: var(--shop-gold); }
.shop-pdp__description { max-width: 520px; margin-bottom: 28px; color: rgba(248,249,250,.66); line-height: 1.7; }
.shop-pdp__specs { margin: 0 0 30px; padding-top: 22px; border-top: 1px solid rgba(248,249,250,.16); }
.shop-pdp__specs div { display: flex; gap: var(--space-2); padding: 6px 0; font-size: .88rem; }
.shop-pdp__specs dt { margin: 0; color: rgba(248,249,250,.5); font-weight: 800; }
.shop-pdp__specs dd { margin: 0; color: rgba(248,249,250,.85); }

/* Caracteristicas segmentadas: van despues del boton de compra, asi que
   aqui es donde tienen que pesar mas en la pagina -- cada una como una
   tarjeta propia (fondo e borde sutil), icono grande, no una lista de
   texto pequeño. Ver tienda.catalog.product_features -- solo lo que la
   descripcion o la categoria del producto ya afirman. */
.shop-pdp__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }
.shop-pdp__features li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px; border: 1px solid rgba(248,249,250,.12); background: rgba(255,255,255,.035);
}
.shop-pdp__features .material-icons-outlined { flex-shrink: 0; margin-top: 1px; font-size: 30px; color: var(--shop-turquoise); }
.shop-pdp__features strong { display: block; margin-bottom: var(--space-1); font-size: 1.02rem; font-weight: 800; color: var(--shop-paper); }
.shop-pdp__features span { display: block; color: rgba(248,249,250,.6); font-size: .86rem; line-height: 1.5; }

/* A 2 columnas, el padding + el icono de 30px dejaban muy poco ancho
   para el texto y las palabras se cortaban contra el borde de la
   tarjeta. A 1 columna cada tarjeta tiene el ancho completo. Va
   despues de la regla base de arriba por la misma razon que la de
   .shop-pdp__layout: un @media antes de la regla base pierde el
   empate de especificidad. */
@media (max-width: 560px) {
  .shop-pdp__features { grid-template-columns: 1fr; }
}

/* Envio / cambios / garantia: al fondo de la ficha, refuerzo despues del
   boton de compra, no una caja que compite con la descripcion. Mismo
   lenguaje que .store-proof en el Home: franja de texto, sin bordes --
   un poco mas grande que el resto de esa familia de franjas, porque va
   sola al cierre de la pagina y necesita sostenerse por si misma. */
.shop-pdp__policies { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 32px 0 0; padding: 0; list-style: none; }
.shop-pdp__policies li { display: flex; align-items: center; gap: var(--space-2); }
.shop-pdp__policies a {
  color: rgba(248,249,250,.68); font-size: .84rem; font-weight: 800;
  letter-spacing: .02em; text-decoration: none;
  transition: color .18s ease;
}
.shop-pdp__policies a:hover { color: var(--shop-turquoise); }
.shop-pdp__policies .material-icons-outlined { font-size: 20px; color: var(--shop-turquoise); }

/* Aviso de pocas unidades: mismo tono de urgencia que "Agotado" (rojo),
   pero sin decir que no hay stock -- si dijera lo mismo, el usuario no
   sabria si puede comprar o no antes de intentarlo. */
.shop-pdp__low-stock { color: #ff8b6a; font-weight: 800; }

/* Guia de tallas: <details> nativo, cerrado por defecto para no competir
   con el selector ni con el precio. */
.shop-pdp__size-guide { margin: 0 0 28px; padding-top: 22px; border-top: 1px solid rgba(248,249,250,.16); }
.shop-pdp__size-guide summary {
  cursor: pointer; color: var(--shop-turquoise); font-size: .84rem; font-weight: 800;
  letter-spacing: .02em; list-style: none;
}
.shop-pdp__size-guide summary::-webkit-details-marker { display: none; }
.shop-pdp__size-guide summary::before { content: "+ "; }
.shop-pdp__size-guide[open] summary::before { content: "– "; }
.shop-pdp__size-guide-note { margin: 14px 0 var(--space-3); color: rgba(248,249,250,.55); font-size: .78rem; line-height: 1.5; }
.shop-pdp__size-guide table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.shop-pdp__size-guide th, .shop-pdp__size-guide td { padding: var(--space-2) 10px; text-align: left; border-bottom: 1px solid rgba(248,249,250,.12); }
.shop-pdp__size-guide thead th { color: rgba(248,249,250,.5); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.shop-pdp__size-guide tbody th { color: var(--shop-paper); font-weight: 800; }
.shop-pdp__size-guide td { color: rgba(248,249,250,.75); }

.shop-pdp__form { padding-top: 26px; padding-bottom: 28px; border-top: 1px solid rgba(248,249,250,.16); }
.shop-pdp__reviews { margin-top: 42px; padding-top: 26px; border-top: 1px solid rgba(248,249,250,.16); }
.shop-pdp__reviews h2 { margin: 0 0 20px; color: var(--shop-paper); font-size: 1.3rem; }
.shop-pdp__review { padding: 16px 0; border-bottom: 1px solid rgba(248,249,250,.12); }
.shop-pdp__review-heading { display: flex; align-items: center; gap: 12px; color: var(--shop-gold); }
.shop-pdp__review-heading span { color: var(--shop-turquoise); font-size: .75rem; font-weight: 800; }
.shop-pdp__review p { margin: 8px 0 0; color: rgba(248,249,250,.75); line-height: 1.5; }

/* --- La seleccion de variante como colapso -----------------------------
 *
 * Un sistema cuantico existe en varios estados a la vez hasta que se mide;
 * medir no es un gesto neutral, es lo que fija un unico resultado. Antes
 * de elegir talla y color la ficha ya representaba eso con datos reales
 * (un rango de precio, un grupo de opciones sin decidir); esto solo le da
 * firma visual al momento exacto en que producto_detail.html resuelve una
 * variante concreta -- sin inventar ningun dato que el catalogo no tenga.
 * Si un producto no tiene mas de una talla o color no hay nada que
 * superponer, y estas clases nunca se activan (ver el JS de la ficha).
 *
 * Ya existe una regla @media (prefers-reduced-motion: reduce) en esta
 * misma hoja, unas lineas mas abajo, que apaga toda animacion dentro de
 * .shop-page: cubre estos keyframes sin necesitar una excepcion aparte.
 */
.pdp-variant-group.is-superposed,
#pdp-price.is-superposed {
  animation: pdp-superpose 2.6s ease-in-out infinite;
}
@keyframes pdp-superpose {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* El instante en que se resuelve un unico estado: un asentamiento breve
   que se nota una vez, no un parpadeo que se repite. Mismo keyframe en el
   precio, en la disponibilidad y en el boton que se acaba de elegir -- es
   la misma medicion, debe leerse como el mismo evento en los tres. */
#pdp-price.is-collapsing,
#pdp-availability.is-collapsing,
.pdp-size.is-collapsing,
.pdp-color.is-collapsing {
  animation: pdp-collapse .5s cubic-bezier(.16,1,.3,1);
}
@keyframes pdp-collapse {
  0%   { opacity: .35; transform: scale(.94); }
  55%  { opacity: 1;   transform: scale(1.04); }
  100% { opacity: 1;   transform: scale(1); }
}

.pdp-size { box-sizing: border-box; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; }
.pdp-size--single { width: 90px; height: 50px; min-width: 90px; min-height: 50px; }

.shop-related { padding: clamp(56px, 7vw, 96px) 0; background: var(--shop-paper); color: var(--shop-ink); }
.shop-related__heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: clamp(32px, 5vw, 52px); }
.shop-related__heading h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: -.045em; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .shop-page *, .shop-page *::before, .shop-page *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* --- Carrito y checkout: mismos tokens editoriales (editorial_pages.css),
 * reutilizando .account-layout/.account-panel/.account-field de la cuenta.
 * Aqui solo lo que faltaba: campos <select>, filas de item y resumen. --- */
/* Cabecera compacta en el flujo de compra. editorial_pages.css la define
 * mas alta para las paginas de lectura (Acerca de, legales, Journal); aqui
 * el header es solo un rotulo, no una portada, y robaba pantalla al
 * contenido. Este archivo solo se carga en tienda/carrito/checkout, asi que
 * el resto de las paginas editoriales conservan su altura. */
.editorial-page .editorial-hero { padding: clamp(32px, 4vw, 56px) 0 clamp(26px, 3vw, 40px); }
.editorial-page .editorial-hero .editorial-title { font-size: var(--font-size-h1); }
.editorial-page .editorial-hero .editorial-lead { margin-top: 18px; }

/* Mismo motivo que en .shop-layout: sin min-width:0 un SKU largo o un
 * <select> con opciones largas desborda su columna. */
.account-layout > * { min-width: 0; }
.account-fields { min-width: 0; }
.account-field { min-width: 0; }
.account-field small { display: block; margin-top: 6px; font-size: 0.85rem; line-height: 1.45; color: inherit; opacity: 0.75; }
/* Micro-rotulo igual al de los filtros de la tienda (.shop-field label).
 * editorial_pages.css lo define a .75rem y sin tracking para el formulario
 * de la cuenta; en uppercase y ExtraBold eso se lee apretado y distinto al
 * resto del flujo de compra. */
.account-field label {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Los tres controles con la misma metrica: sin esto el <input> se queda con
 * los 16px heredados del body y el <select> con .95rem, y dos campos
 * contiguos muestran su texto a tamanos distintos. */
.account-field input,
.account-field select,
.account-field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 50px;
  border: 1px solid #c8c8c5;
  border-radius: 0;
  background: #fff;
  color: var(--ed-ink, #101012);
  padding: 10px 14px;
  /* El tamano lo fija `body.gtg-theme input` (style.css), que gana en
     especificidad: 16px, que ademas evita el zoom al enfocar en iOS. */
  font: inherit;
}
.account-field textarea { min-height: 90px; resize: vertical; }
.checkout-field-error { margin: 6px 0 0; color: #b91c1c; font-size: .78rem; }

.checkout-summary__items { display: grid; gap: 18px; margin: 0 0 28px; padding: 0 0 26px; border-bottom: 1px solid #d8d8d4; list-style: none; }
/* La columna del resumen es angosta (~220px utiles). Con imagen + texto +
 * precio nowrap en una sola fila el nombre se parte palabra por palabra,
 * asi que el precio baja a su propia linea bajo el texto. */
.checkout-summary__items li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px var(--space-3); align-items: start; }
.checkout-summary__items img { grid-row: span 2; width: 44px; height: 44px; object-fit: cover; background: #ececeb; }
.checkout-summary__items li > div { min-width: 0; }
.checkout-summary__items .checkout-item-sku { overflow-wrap: anywhere; }
.checkout-summary__items .checkout-item-name { margin: 0 0 3px; font-weight: 800; font-size: .9rem; color: var(--ed-ink, #101012); }
.checkout-summary__items .checkout-item-meta { margin: 0; color: var(--ed-muted, #5f6066); font-size: .8rem; }
.checkout-summary__items .checkout-item-sku { margin: 2px 0 0; color: #686870; font-size: .75rem; font-family: monospace; }
.checkout-summary__items .checkout-item-price { grid-column: 2; font-weight: 800; font-size: .88rem; color: var(--ed-ink, #101012); white-space: nowrap; }
.checkout-coupon { margin: 0 0 24px; padding: 16px 0; border-bottom: 1px solid #dededb; }
.checkout-coupon h3 { margin: 0 0 10px; color: var(--ed-ink, #101012); font-size: .9rem; }
.checkout-coupon__field { display: flex; gap: 8px; }
.checkout-coupon__field input { min-width: 0; flex: 1; min-height: 42px; padding: 0 10px; border: 1px solid #c8c8c5; background: #fff; color: var(--ed-ink, #101012); }
.checkout-coupon__field button { min-height: 42px; padding: 0 14px; border: 1px solid var(--ed-ink, #101012); background: transparent; color: var(--ed-ink, #101012); font-size: .75rem; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.checkout-coupon__field button:hover { background: var(--ed-ink, #101012); color: var(--ed-paper, #f8f9fa); }
.checkout-coupon__feedback { min-height: 18px; margin: 8px 0 0; font-size: .78rem; }
.checkout-coupon__feedback.is-success { color: #15803d; }
.checkout-coupon__feedback.is-error { color: #b91c1c; }

.cart-list { display: grid; gap: 0; background: var(--ed-paper, #f8f9fa); }
.cart-row { display: grid; grid-template-columns: 84px minmax(160px, 1fr) auto auto 32px; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid #dededb; }
.cart-row img { width: 84px; height: 84px; object-fit: cover; background: #ececeb; flex-shrink: 0; }
.cart-row__info { flex: 1; min-width: 200px; }
.cart-row__info a { color: var(--ed-ink, #101012); font-weight: 800; text-decoration: none; }
.cart-row__info a:hover { color: var(--ed-turquoise, #0fbfb0); }
.cart-row__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 6px 0 0; color: var(--ed-muted, #5f6066); font-size: .8rem; }
.cart-row__meta dt { display: inline; font-weight: 800; }
.cart-row__meta dd { display: inline; margin: 0; }
.cart-row__price-each { margin: 6px 0 0; color: #686870; font-size: .78rem; white-space: nowrap; }
.cart-row__qty { display: inline-flex; align-items: center; gap: 0; }
.cart-row__qty input { box-sizing: border-box; width: 52px; min-height: 42px; padding: 0; border: 1px solid #c8c8c5; border-radius: 0; text-align: center; color: var(--ed-ink, #101012); }
.cart-row__stepper { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 42px; padding: 0; border: 1px solid #c8c8c5; background: transparent; color: var(--ed-ink, #101012); cursor: pointer; }
.cart-row__stepper:first-of-type { border-right: 0; }
.cart-row__stepper:last-of-type { border-left: 0; }
.cart-row__stepper:hover { background: var(--ed-ink, #101012); color: var(--ed-paper, #f8f9fa); }
.cart-row__stepper .material-icons-outlined { font-size: 18px; }
.cart-row__subtotal { min-width: 120px; white-space: nowrap; text-align: right; font-weight: 800; color: var(--ed-ink, #101012); }
.cart-row > form:last-child { display: flex; justify-content: center; }
.cart-row__remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 42px; border: 0; background: transparent; color: #686870; cursor: pointer; }
.cart-row__remove .material-icons-outlined { font-size: 21px; line-height: 1; }
.cart-row__remove:hover { color: #b91c1c; }

@media (max-width: 720px) {
  .cart-row { grid-template-columns: 84px minmax(0, 1fr) 32px; gap: 14px; }
  .cart-row__info { min-width: 0; }
  .cart-row__qty { grid-column: 2 / -1; }
  .cart-row__qty input { width: 48px; }
  .cart-row__subtotal { grid-column: 2; min-width: 0; text-align: left; }
  .cart-row__price-each { white-space: normal; }
  .cart-row > form:last-child { grid-column: 3; grid-row: 3; }
}

/* --- Tunelamiento: transicion visual del carrito al checkout ------------
 *
 * Tunelar es atravesar una barrera sin recorrer el espacio intermedio en
 * el sentido clasico: la pagina de salida se comprime hacia un punto y la
 * de llegada emerge desde ese mismo punto, en vez del cruce lineal (slide
 * o fade) de una transicion comun.
 *
 * `@view-transition` con cross-document navigation solo activa la
 * transicion cuando AMBOS documentos -- el de salida y el de llegada --
 * la declaran; por eso esta regla vive en commerce_editorial.css y no en
 * style.css: ese archivo es global y activaria esto en cada enlace del
 * sitio, cuando el efecto es especificamente el paso carrito -> checkout.
 * checkout.html tambien carga este archivo, asi que el par se cumple sin
 * JS. En cualquier navegador que no soporte la especificacion, la regla se
 * ignora y el enlace navega como siempre: no hay fallback que escribir.
 *
 * Soporte real al momento de escribir esto: Chrome/Edge 126+ (navegacion
 * cross-document). Firefox y Safari todavia no lo implementan -- ahi el
 * click simplemente navega sin transicion, ni error ni diferencia visible,
 * que es indistinguible de "no pasa nada". Si no ves el efecto, antes de
 * pensar que esta mal revisa en que navegador estas probando.
 *
 * Primera version: escala .92/1.08 y 3px de blur. Demasiado sutil para
 * notarse en un cambio de pagina completo (donde ya hay muchisimo estimulo
 * visual nuevo compitiendo por la atencion); esta version exagera la
 * compresion a proposito para que se lea como un evento, no como un
 * parpadeo.
 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: pdp-tunnel-collapse var(--motion-story) var(--motion-easing) forwards;
}
::view-transition-new(root) {
  animation: pdp-tunnel-expand var(--motion-story) var(--motion-easing) forwards;
}

@keyframes pdp-tunnel-collapse {
  to { opacity: 0; transform: scale(.7); filter: blur(10px); }
}
@keyframes pdp-tunnel-expand {
  from { opacity: 0; transform: scale(1.35); filter: blur(10px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
.cart-empty { padding: clamp(56px, 8vw, 100px) var(--space-5); text-align: center; color: var(--ed-muted, #5f6066); }

/* Areas de clic de enlaces sueltos (tarjetas, migas de pan, politicas). */
.gtg-product-card__name a, .shop-pdp__breadcrumb a, .shop-pdp__policies a { display: inline-block; padding-block: 4px; }