/*
 * Kicks Hype — Carrito y Checkout, cascarón compartido (dirección "Editorial")
 * Reproduce 1:1 la referencia hifi design-handoff/kicks-hype-carrito-checkout.html.
 *
 * Todo scopeado bajo body.kh-shop. La plantilla (templates/kh-shop.php) imprime
 * body_class('kh-catalogo kh-shop kh-shop--cart|--checkout|--thankyou'), así
 * que esta hoja HEREDA tokens, reset y componentes de assets/catalogo/catalogo.css
 * (kh-wordmark, kh-nav, kh-utils, kh-count, kh-chev, kh-link-underline base,
 * kh-toast, kh-footer base) y SOLO sobreescribe lo que cambia para
 * carrito/checkout: header sólido en vez de transparente-sobre-hero, footers
 * compactos en vez del footer grande de 4 columnas, y los componentes nuevos
 * de formulario/resumen que el catálogo no tiene.
 *
 * Encolado: kh-shell tiene como dependencia kh-catalogo (ver SPEC-checkout.md
 * §Detección y encolado), así que este archivo carga DESPUÉS y gana los
 * empates de especificidad frente a selectores `body.kh-catalogo …` idénticos
 * en forma. Donde el empate no alcanza (ej. `.kh-footer` con padding y layout
 * muy distintos) se usa el selector compuesto `.kh-footer.kh-footer--compact`
 * para asegurar la sobreescritura sin depender del orden.
 *
 * Contenedor: igual que el catálogo (revisión 2), carrito y checkout van a
 * ANCHO COMPLETO (decisión de Kevin, 2026-09-07); el tope de 1440px del hifi
 * no se aplica.
 */

body.kh-shop .container{
  width:100%;
}

/* ==========================================================================
   Header sólido (vista carrito) — sobreescribe el header transparente del
   catálogo (blanco sobre hero) por el sólido de catalogo.css/README:
   fondo #F7F6F2, texto #111110, hairline #E2E0D8, acento índigo #3B34D6.
   La estructura (grid 1fr auto 1fr, alto 88px, wordmark/nav/utils) ya la da
   catalogo.css — acá solo cambian colores.
   ========================================================================== */
body.kh-shop .kh-header{
  background:var(--kh-bg);
  color:var(--kh-ink);
  border-bottom:1px solid var(--kh-line);
}
body.kh-shop .kh-wordmark small{color:var(--kh-indigo)}
body.kh-shop .kh-nav a:hover,
body.kh-shop .kh-nav a.is-accent{color:var(--kh-indigo)}
body.kh-shop .kh-utils a:hover,
body.kh-shop .kh-utils a.is-active{color:var(--kh-indigo)}

/* ==========================================================================
   Header de checkout/confirmación — wordmark | pasos | "Compra segura".
   ========================================================================== */
body.kh-shop .kh-header--checkout{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

body.kh-shop .kh-steps{
  display:flex;align-items:center;gap:32px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
body.kh-shop .kh-steps .done{color:var(--kh-muted)}
body.kh-shop .kh-steps .done a{color:inherit;transition:color .15s}
body.kh-shop .kh-steps .done a:hover{color:var(--kh-indigo)}
body.kh-shop .kh-steps .now{color:var(--kh-indigo)}
body.kh-shop .kh-steps .next{color:var(--kh-muted);font-weight:500}
body.kh-shop .kh-steps i{width:36px;height:1px;background:var(--kh-line-2);font-style:normal}

body.kh-shop .kh-secure{
  display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--kh-muted);
}
body.kh-shop .kh-secure::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--kh-indigo);
}

/* ==========================================================================
   Cabecera de página (H1 "Tu bolsa" / "Finalizar compra")
   ========================================================================== */
body.kh-shop .kh-page-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:32px;
  padding:56px var(--kh-gutter) 28px;
}
body.kh-shop .kh-page-head h1{
  margin:0;font:800 64px/1 var(--kh-font-display);letter-spacing:-.04em;
}
body.kh-shop .kh-page-head--checkout{padding:0}
body.kh-shop .kh-page-head--checkout h1{font-size:56px}
body.kh-shop .kh-login-hint{font-size:13px;color:var(--kh-muted)}

/* kh-link-underline: catalogo.css ya define la base (border-bottom 1.5px,
   inline-flex, gap). Acá se ajusta tamaño/hover al contexto claro del
   carrito/checkout (el del catálogo usa índigo suave para fondo oscuro). */
body.kh-shop .kh-link-underline{
  font-size:13px;font-weight:600;padding-bottom:5px;gap:0;
}
body.kh-shop .kh-link-underline:hover{color:var(--kh-indigo)}

/* Botón que parece enlace (Eliminar, quitar cupón ×, etc.) */
body.kh-shop .kh-linkbtn{
  display:inline-flex;align-items:center;
  font-family:inherit;font-size:12px;font-weight:500;color:var(--kh-muted);
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  border-bottom:1px solid var(--kh-line-2);padding-bottom:2px;line-height:1.4;
  transition:color .15s,border-color .15s;
}
body.kh-shop .kh-linkbtn:hover{color:var(--kh-indigo);border-color:var(--kh-indigo)}

body.kh-shop .kh-tabular{font-variant-numeric:tabular-nums}

/* ==========================================================================
   Layout de dos columnas (carrito y checkout)
   ========================================================================== */
body.kh-shop .kh-layout{
  display:grid;grid-template-columns:1fr 420px;gap:64px;
  padding:0 var(--kh-gutter) 96px;align-items:start;
}
body.kh-shop .kh-layout--checkout{padding:56px var(--kh-gutter) 96px}
body.kh-shop .kh-cart-main{min-width:0}

/* ==========================================================================
   Resumen (aside sticky) — carrito y "Tu pedido" en checkout
   ========================================================================== */
body.kh-shop .kh-aside{
  border:1px solid var(--kh-line);background:#fff;padding:28px;
  display:flex;flex-direction:column;gap:22px;
  position:sticky;top:24px;
}
body.kh-shop .kh-summary h2{margin:0;font:700 20px var(--kh-font-display)}
body.kh-shop .kh-summary > div:first-child.kh-summary__head,
body.kh-shop .kh-summary__head{
  display:flex;align-items:baseline;justify-content:space-between;
}
body.kh-shop .kh-summary__edit{font-size:12px;font-weight:600;color:var(--kh-indigo)}

body.kh-shop .kh-rows{display:flex;flex-direction:column;gap:12px;font-size:14px}
body.kh-shop .kh-rows > div{display:flex;justify-content:space-between;align-items:center;gap:10px}
body.kh-shop .kh-rows span.k{color:var(--kh-muted)}
body.kh-shop .kh-rows b{font-weight:600}
body.kh-shop .kh-rows b.is-discount{color:var(--kh-indigo)}
body.kh-shop .kh-rows [data-coupon-remove]{font-size:15px;line-height:1;padding-bottom:0;border-bottom:0}
body.kh-shop .kh-rows__hint{font-size:12px;color:var(--kh-indigo)}

body.kh-shop .kh-coupon{display:flex;border:1px solid var(--kh-line-2)}
body.kh-shop .kh-coupon input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  height:44px;padding:0 14px;font-size:13px;
}
body.kh-shop .kh-coupon input::placeholder{color:var(--kh-muted)}
body.kh-shop .kh-coupon button{
  height:44px;padding:0 18px;border:0;border-left:1px solid var(--kh-line-2);
  background:var(--kh-bg);font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s;
}
body.kh-shop .kh-coupon button:hover{background:var(--kh-ink);color:#fff}
body.kh-shop .kh-coupon__error{
  margin:-10px 0 0;font-size:12px;color:#B3261E;
}
body.kh-shop .kh-coupon__error[hidden]{display:none}

body.kh-shop .kh-total{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--kh-line);padding-top:18px;
}
body.kh-shop .kh-total .k{font:700 16px var(--kh-font-display)}
body.kh-shop .kh-total .v{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
body.kh-shop .kh-total .v b{font:800 30px/1 var(--kh-font-display);letter-spacing:-.03em}
body.kh-shop .kh-total .v span{font-size:11px;color:var(--kh-muted)}

body.kh-shop .kh-cta{
  height:52px;background:var(--kh-ink);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:background .15s;
}
body.kh-shop .kh-cta:hover{background:var(--kh-indigo)}
body.kh-shop .kh-cta:disabled,
body.kh-shop .kh-cta[aria-disabled="true"]{opacity:.6;cursor:wait}

body.kh-shop .kh-assurances{
  display:flex;flex-direction:column;gap:10px;
  font-size:12px;color:var(--kh-muted);line-height:1.5;
}

/* Líneas mini del resumen de checkout ("Tu pedido") — la marca la imprime
   el agente CHECKOUT (review-order.php); el estilo vive acá porque es
   compartido con el aside del carrito. */
body.kh-shop .kh-mini{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center}
body.kh-shop .kh-mini .thumb{position:relative;width:64px;height:64px;background:var(--kh-surface)}
body.kh-shop .kh-mini .thumb img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:darken;display:block}
body.kh-shop .kh-mini .t{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
body.kh-shop .kh-mini .s{font-size:12px;color:var(--kh-muted)}
body.kh-shop .kh-mini .a{font-size:13px;font-weight:600;white-space:nowrap}

body.kh-shop .kh-fine{margin:0;font-size:12px;line-height:1.5;color:var(--kh-muted)}
body.kh-shop .kh-fine a{border-bottom:1px solid var(--kh-line-2);transition:color .15s}
body.kh-shop .kh-fine a:hover{color:var(--kh-indigo)}

/* ==========================================================================
   Estado vacío del carrito (sin aside)
   ========================================================================== */
body.kh-shop .kh-empty-cart{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:20px;max-width:480px;margin:0 auto;
  padding:96px var(--kh-gutter) 140px;
}
body.kh-shop .kh-empty-cart h1{
  margin:0;font:800 40px/1.05 var(--kh-font-display);letter-spacing:-.03em;
}
body.kh-shop .kh-empty-cart p{margin:0;font-size:16px;line-height:1.6;color:var(--kh-ink-2)}
body.kh-shop .kh-empty-cart .kh-cta{
  margin-top:12px;padding:0 32px;flex:none;width:auto;
}

/* ==========================================================================
   Footers
   ========================================================================== */
body.kh-shop .kh-footer.kh-footer--compact{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  padding:56px var(--kh-gutter) 28px;
}
body.kh-shop .kh-footer--compact .kh-wordmark b{font-size:34px}
body.kh-shop .kh-footer--compact .kh-wordmark small{color:var(--kh-indigo-light)}
body.kh-shop .kh-footer--compact .kh-loc{margin-top:14px;font-size:13px;color:var(--kh-footer-text)}
body.kh-shop .kh-footer--compact .kh-loc::before{display:none}
body.kh-shop .kh-footer--compact nav{display:flex;gap:28px;font-size:13px;color:var(--kh-footer-text)}
body.kh-shop .kh-footer--compact nav a{transition:color .15s}
body.kh-shop .kh-footer--compact nav a:hover{color:#fff}

body.kh-shop .kh-footer.kh-footer--slim{
  display:flex;justify-content:space-between;align-items:center;
  padding:40px var(--kh-gutter);
  font-size:13px;color:var(--kh-footer-text);
}
body.kh-shop .kh-footer--slim nav{display:flex;gap:28px}
body.kh-shop .kh-footer--slim nav a{transition:color .15s}
body.kh-shop .kh-footer--slim nav a:hover{color:#fff}

/* ==========================================================================
   Responsive (guía del mock: 1180 / 1000 / 720). ≤1100/≤1000 de nav/header
   ya los cubre catalogo.css (misma clase .kh-header/.kh-nav/.kh-utils bajo
   body.kh-catalogo); acá solo lo que difiere del catálogo para esta vista.
   ========================================================================== */
@media (max-width:1180px){
  body.kh-shop{--kh-gutter:32px}
  body.kh-shop .kh-layout{grid-template-columns:1fr;gap:40px}
  body.kh-shop .kh-aside{position:static}
  body.kh-shop .kh-page-head h1{font-size:48px}
}
@media (max-width:720px){
  body.kh-shop{--kh-gutter:20px}
  body.kh-shop .kh-page-head{flex-direction:column;align-items:flex-start;gap:12px}
  body.kh-shop .kh-page-head h1{font-size:36px}
  body.kh-shop .kh-footer.kh-footer--compact,
  body.kh-shop .kh-footer.kh-footer--slim{flex-direction:column;align-items:flex-start;gap:24px}
}