/* assets/pages/carrito-lateral.css · carrito lateral propio A1 (spec 4.1). Solo tokens --lf-*; mobile-first (600 / 1024).
   Selectores con .lf-drawer delante: el reset del tema padre pone a button borde y fondo rosa en hover/foco ([type=button]:hover).
   La pagina /carrito/ (.lf-cart, spec 4.2) carga esta hoja para sus bloques: los controles van con :is(.lf-drawer, .lf-cart). */
html.lf-drawer-lock { overflow: hidden; }
.lf-drawer { position: fixed; inset: 0; z-index: 100000; font-family: var(--lf-font-body); font-size: var(--lf-fs-body); line-height: 1.5; color: var(--lf-ink); }
.lf-drawer[hidden] { display: none; }
.lf-drawer__backdrop { position: absolute; inset: 0; background: var(--lf-deep); opacity: 0; transition: opacity var(--lf-dur-3) var(--lf-ease-in-out); }
.lf-drawer.is-open .lf-drawer__backdrop { opacity: .55; }
.lf-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; background: var(--lf-cream); box-shadow: var(--lf-shadow); transform: translateX(100%); transition: transform var(--lf-dur-3) var(--lf-ease-in-out); }
.lf-drawer.is-open .lf-drawer__panel { transform: none; }
@media (min-width: 600px) { .lf-drawer__panel { width: 420px; } }
@media (prefers-reduced-motion: reduce) { .lf-drawer__backdrop, .lf-drawer__panel { transition: none; } }

.lf-drawer__body { display: flex; flex-direction: column; height: 100%; }
:where(.lf-drawer, .lf-cart) p { margin: 0; }
.lf-drawer a { color: inherit; }

/* Cabecera */
.lf-drawer__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--lf-s-3); padding: var(--lf-s-2) var(--lf-s-2) var(--lf-s-2) var(--lf-s-5); border-bottom: 1px solid var(--lf-line-light); }
.lf-drawer .lf-drawer__title { margin: 0; font: 400 var(--lf-fs-h3)/1.2 var(--lf-font-head); color: var(--lf-ink); }
.lf-drawer__title:focus { outline: none; }
.lf-drawer__count { color: var(--lf-text-soft-on-light); }
.lf-drawer .lf-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--lf-radius); background: none; color: var(--lf-ink); }
.lf-drawer .lf-drawer__close:hover, .lf-drawer .lf-drawer__close:focus { background: var(--lf-ivory); color: var(--lf-ink); }
.lf-drawer__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Contenido desplazable: lineas, vinos, totales y cupon (en movil los vinos bajan tras los totales) */
.lf-drawer__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 0 var(--lf-s-5) var(--lf-s-6); }
.lf-drawer__lines { order: 1; list-style: none; margin: 0; padding: 0; }
.lf-drawer__scroll .lf-drawer__sum { order: 2; }
.lf-drawer__scroll .lf-winerow { order: 3; }
.lf-drawer__scroll .lf-drawer__coupon { order: 4; }
@media (min-width: 600px) {
  .lf-drawer__scroll .lf-winerow { order: 2; }
  .lf-drawer__scroll .lf-drawer__sum { order: 3; }
}

/* Linea: foto entera en baldosa (proporcion natural, sin recorte) */
.lf-drawer__line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--lf-s-3); padding: var(--lf-s-4) 0; border-bottom: 1px solid var(--lf-line-light); }
.lf-drawer__media { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; background: transparent; } /* sin baldosa gris (regla de la duena: foto entera, sin placeholder) */
.lf-drawer .lf-winerow .lf-product-card__media { background: transparent; }
.lf-drawer__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (min-width: 600px) {
  .lf-drawer__line { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .lf-drawer__media { width: 88px; height: 88px; }
}
.lf-drawer__name { font: 400 var(--lf-fs-body)/1.3 var(--lf-font-head); }
.lf-drawer__name a { text-decoration: none; }
.lf-drawer__name a:hover, .lf-drawer__name a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.lf-drawer__meta { margin-top: var(--lf-s-1); font-size: var(--lf-fs-small); line-height: 1.4; color: var(--lf-text-soft-on-light); overflow-wrap: anywhere; }
.lf-drawer__price { font: 500 var(--lf-fs-body)/1.3 var(--lf-font-head); white-space: nowrap; text-align: right; }
/* Suscripcion: "cada 4 semanas" bajo el importe (lo anade el plugin) */
.lf-sub-cycle { display: block; font: 400 var(--lf-fs-small)/1.3 var(--lf-font-body); color: var(--lf-text-soft-on-light); white-space: normal; }
.lf-drawer__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lf-s-2) var(--lf-s-3); margin-top: var(--lf-s-2); }
.lf-drawer__qty-one { font-size: var(--lf-fs-small); color: var(--lf-text-soft-on-light); }
.lf-qty { display: inline-flex; align-items: center; border: 1px solid var(--lf-line-light); }
:is(.lf-drawer, .lf-cart) .lf-qty__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--lf-radius); background: none; color: var(--lf-ink); font: 400 18px/1 var(--lf-font-head); }
:is(.lf-drawer, .lf-cart) .lf-qty__btn:hover, :is(.lf-drawer, .lf-cart) .lf-qty__btn:focus { background: var(--lf-ivory); color: var(--lf-ink); }
:is(.lf-drawer, .lf-cart) .lf-qty__btn:disabled { color: var(--lf-text-soft-on-light); cursor: default; background: none; }
.lf-qty__n { min-width: var(--lf-s-6); text-align: center; font: 500 var(--lf-fs-body)/1 var(--lf-font-head); }

/* Botones de texto (Quitar, cupon): subrayados, con 44 px de objetivo */
:is(.lf-drawer, .lf-cart) :is(.lf-drawer__remove, .lf-drawer__textbtn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--lf-s-1); border: 0; border-radius: var(--lf-radius); background: none; color: var(--lf-ink); font: 400 var(--lf-fs-small)/1.3 var(--lf-font-body); text-decoration: underline; text-underline-offset: 3px; white-space: normal; }
:is(.lf-drawer, .lf-cart) :is(.lf-drawer__remove, .lf-drawer__textbtn):is(:hover, :focus) { background: none; color: var(--lf-gold-dark); }

/* Fila "Anade un vino": aspecto de la tarjeta de producto, en pequeno */
.lf-winerow { margin-top: var(--lf-s-6); }
.lf-winerow__title { margin: 0 0 var(--lf-s-3); }
.lf-winerow__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lf-s-3); }
.lf-winerow .lf-product-card__media img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.lf-winerow .lf-product-card__title { margin: var(--lf-s-2) 0 2px; font: 400 var(--lf-fs-small)/1.3 var(--lf-font-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lf-winerow .lf-product-card__price { margin-bottom: var(--lf-s-2); font-size: var(--lf-fs-small); }
.lf-drawer .lf-winerow .lf-product-card__buy, .lf-winerow .lf-product-card__buy { height: 44px; font-size: var(--lf-fs-label); }

/* Botones del sistema dentro del carrito: sin el rosa del tema padre */
.lf-drawer .lf-btn { width: 100%; }
:is(.lf-drawer, .lf-cart) .lf-btn:hover, :is(.lf-drawer, .lf-cart) .lf-btn:focus { background-color: var(--lf-gold); color: var(--lf-deep); }
:is(.lf-drawer, .lf-cart) .lf-btn--outline, :is(.lf-drawer, .lf-cart) .lf-btn--outline:hover, :is(.lf-drawer, .lf-cart) .lf-btn--outline:focus { background-color: transparent; }
:is(.lf-drawer, .lf-cart) .lf-btn--outline { color: var(--lf-ink); border: 1px solid var(--lf-ink); }
:is(.lf-drawer, .lf-cart) .lf-btn--outline::before { background: var(--lf-ink); }
:is(.lf-drawer, .lf-cart) .lf-btn--outline:focus-visible { color: var(--lf-paper); }
@media (hover: hover) { :is(.lf-drawer, .lf-cart) .lf-btn--outline:hover { color: var(--lf-paper); } }
:is(.lf-drawer, .lf-cart) .lf-btn:disabled { opacity: .6; cursor: progress; }

/* Totales */
.lf-drawer__sum { margin-top: var(--lf-s-6); }
.lf-drawer__totals { margin: 0; }
.lf-drawer__totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lf-s-3); padding: var(--lf-s-1) 0; }
.lf-drawer__totals dt { font-weight: 400; }
.lf-drawer__totals dd { margin: 0; text-align: right; }
.lf-drawer__coupon-line dd { display: inline-flex; align-items: center; gap: var(--lf-s-2); }
.lf-drawer__totals > .lf-drawer__total { margin-top: var(--lf-s-2); padding-top: var(--lf-s-3); border-top: 1px solid var(--lf-line-light); font: 500 var(--lf-fs-lead)/1.3 var(--lf-font-head); }
.lf-drawer__tax { margin-top: var(--lf-s-1); font-size: var(--lf-fs-small); color: var(--lf-text-soft-on-light); text-align: right; }

/* Cupon plegado */
.lf-drawer__coupon { margin-top: var(--lf-s-4); }
.lf-drawer__coupon-form { display: flex; gap: var(--lf-s-2); margin-top: var(--lf-s-2); }
.lf-drawer__coupon-form[hidden] { display: none; }
:is(.lf-drawer, .lf-cart) .lf-drawer__coupon-input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--lf-s-3); border: 1px solid var(--lf-text-soft-on-light); border-radius: var(--lf-radius); background: var(--lf-white); color: var(--lf-ink); font: 400 16px/1 var(--lf-font-body); }
:is(.lf-drawer, .lf-cart) .lf-drawer__coupon-apply { flex: none; width: auto; height: 44px; padding: 0 var(--lf-s-5); }
.lf-drawer__msg { margin-top: var(--lf-s-2); font-size: var(--lf-fs-small); }
.lf-drawer__msg:empty { display: none; }
.lf-drawer__msg.is-error, .lf-drawer__alert { padding: var(--lf-s-2) var(--lf-s-3); border-left: 2px solid var(--lf-red); background: var(--lf-ivory); color: var(--lf-ink); }
.lf-drawer__alert { flex: none; margin: var(--lf-s-3) var(--lf-s-5) 0; }

/* Botones finales, fijos al pie del panel */
.lf-drawer__actions { flex: none; display: grid; gap: var(--lf-s-2); padding: var(--lf-s-4) var(--lf-s-5); border-top: 1px solid var(--lf-line-light); background: var(--lf-cream); }

/* Cesta vacia */
.lf-drawer__empty { padding: var(--lf-s-8) var(--lf-s-5); text-align: center; }
.lf-drawer__empty-title { font: 400 var(--lf-fs-h3)/1.2 var(--lf-font-head); }
.lf-drawer__empty-text { margin-top: var(--lf-s-2); color: var(--lf-text-soft-on-light); }
.lf-drawer__empty-links { list-style: none; margin: var(--lf-s-6) 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: var(--lf-s-4); }
.lf-drawer__empty-links .lf-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--lf-gold-dark); }

/* Errores de la ficha al anadir (los pinta carrito-lateral.js dentro de .lf-buy) */
.lf-buy__errors { margin-top: var(--lf-s-3); padding: var(--lf-s-3) var(--lf-s-4); border-left: 2px solid var(--lf-red); background: var(--lf-ivory); color: var(--lf-ink); font-size: var(--lf-fs-small); }
.lf-buy__errors p { margin: 0; }
.lf-buy__errors p + p { margin-top: var(--lf-s-1); }