/* Estilos del carrito del storefront. Los colores vienen de la paleta de la tienda (la inyecta construir-tienda.mjs como variables --kk-*); sin ellas, estos valores. */
#kk-carrito-boton { position: fixed; right: 16px; bottom: 16px; z-index: 60; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--kk-acento, #1d777e); color: var(--kk-sobre-acento, #fff); font: 600 15px/1 var(--kk-fuente, system-ui, sans-serif); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
#kk-carrito-panel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 70; width: min(400px, 100vw); overflow-y: auto; padding: 20px 16px 24px; background: var(--kk-fondo, #f2f6f6); color: var(--kk-tinta, #12292c); font: 400 15px/1.45 var(--kk-fuente, system-ui, sans-serif); box-shadow: -8px 0 30px rgba(0,0,0,.25); }
#kk-carrito-panel[hidden] { display: none; }
#kk-carrito-panel h2 { margin: 8px 0 12px; font-size: 22px; }
.kk-lista { list-style: none; margin: 0; padding: 0; }
.kk-linea { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.kk-variante { display: block; color: var(--kk-apagado, #4a6468); font-size: 13px; }
.kk-cantidad { display: flex; align-items: center; gap: 10px; }
.kk-importe { text-align: right; font-weight: 600; }
.kk-linea button, .kk-cerrar { min-width: 44px; min-height: 44px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.kk-quitar { grid-column: 1 / -1; justify-self: start; min-height: 36px !important; border: 0 !important; text-decoration: underline; }
.kk-consentimiento { margin-top: 16px; }
.kk-consentimiento fieldset { margin: 0; padding: 12px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 10px; }
.kk-consentimiento legend { padding: 0 6px; font-weight: 600; }
.kk-casilla { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; margin: 10px 0; min-height: 44px; font-size: 14px; cursor: pointer; }
.kk-casilla input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--kk-acento, #1d777e); }
.kk-total { margin: 16px 0 4px; font-size: 18px; font-weight: 700; }
.kk-nota, .kk-aviso { margin: 6px 0; color: var(--kk-apagado, #4a6468); font-size: 13px; }
.kk-aviso:not(:empty) { color: #9b1c1c; font-weight: 600; }
.kk-pagar { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; padding: 0 22px; border-radius: 999px; background: var(--kk-acento, #1d777e); color: var(--kk-sobre-acento, #fff); font-weight: 600; text-decoration: none; }
.kk-compra { display: grid; gap: 8px; width: min(576px, calc(100% - 32px)); margin: 32px auto 56px; padding: 20px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 12px; font-family: var(--kk-fuente, inherit); }
.kk-compra select, .kk-compra input { min-height: 44px; padding: 0 12px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 8px; background: #fff; color: #12292c; font: inherit; }
#kk-comprar { min-height: 48px; border: 0; border-radius: 999px; background: var(--kk-acento, #1d777e); color: var(--kk-sobre-acento, #fff); font: 600 16px/1 inherit; cursor: pointer; }
#kk-comprar:disabled { opacity: .55; cursor: not-allowed; }
.kk-estado { min-height: 1.4em; margin: 0; color: var(--kk-apagado, #4a6468); font-size: 14px; }
#kk-carrito-boton:focus-visible, .kk-casilla input:focus-visible, #kk-carrito-panel button:focus-visible, .kk-pagar:focus-visible, #kk-comprar:focus-visible, .kk-compra select:focus-visible, .kk-compra input:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { #kk-carrito-panel { animation: kk-entra .2s ease-out; } @keyframes kk-entra { from { transform: translateX(24px); opacity: 0; } } }

/* Modo demostración (galería de diseños de tienda): la franja de arriba y su espacio. */
#kk-demo-tienda { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 16px; background: #111; color: #fff; font: 500 14px/1 var(--kk-fuente, system-ui, sans-serif); }
#kk-demo-tienda a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: #fff; text-decoration: underline; }
#kk-demo-tienda .kk-enlaces-demo { display: flex; gap: 4px; }
#kk-demo-tienda .kk-corto { display: none; }
#kk-demo-tienda a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
@media (max-width: 640px) { #kk-demo-tienda { padding: 0 8px; gap: 4px; } #kk-demo-tienda .kk-largo { display: none; } #kk-demo-tienda .kk-corto { display: inline; } #kk-demo-tienda .kk-aviso-demo b::after { content: ' ·'; font-weight: 400; } }
.kk-con-franja #kk-carrito-panel { top: 44px; }

/* El botón del carrito en móvil (≤ 768 px) es una BARRA fija al pie de ancho completo con su espacio reservado (padding-bottom de la página): nunca flota sobre el título ni sobre un botón de acción, y el final de la página queda por encima de ella. En escritorio sigue siendo la píldora de la esquina. */
@media (max-width: 768px) {
  html { padding-bottom: 56px; }
  #kk-carrito-boton { left: 0; right: 0; bottom: 0; width: 100%; min-height: 56px; padding: 0 16px; border-radius: 0; box-shadow: 0 -2px 12px rgba(0,0,0,.22); }
  .kk-con-franja #kk-carrito-panel { bottom: 56px; }
  #kk-carrito-panel { bottom: 56px; }
}

/* Con el carrito vacío y la página arriba, el botón se esconde (en cualquier ancho): no tapa la portada ni su botón de acción; aparece al bajar o al añadir algo. */
#kk-carrito-boton.kk-oculto { transform: translateY(110%); visibility: hidden; pointer-events: none; }
@media (min-width: 769px) { html { padding-bottom: 72px; } #kk-carrito-boton { transition: transform .2s ease; } }