/* NF CORE · tokens (docs/DISENO.md) */
:root {
  --nf-abismo: #050506; --nf-abismo-2: #0e0e11; --nf-hielo: #f3f2ec; --nf-bruma: #9b9a92; --nf-bruma-2: #62615b;
  --nf-amarillo: #ffe60a; --nf-amarillo-2: #fff27a; --nf-tinta: #151300; --nf-rojo: #ff3d5a; --nf-rojo-2: #ff8a9b; --nf-espera: #2ed3f0; --nf-verde: #3df29a;
  --nf-vidrio: rgba(22, 22, 24, .58); --nf-vidrio-2: rgba(28, 28, 31, .72); --nf-vidrio-3: rgba(38, 38, 42, .66); --nf-campo: rgba(8, 8, 9, .6);
  --nf-borde: rgba(255, 245, 200, .12); --nf-borde-2: rgba(255, 245, 200, .24);
  --nf-glow: 0 0 0 1px rgba(255, 230, 10, .4), 0 0 26px rgba(255, 230, 10, .3);
  --nf-r-sm: 6px; --nf-r-md: 10px; --nf-r-lg: 16px; --nf-r-xl: 22px;
  --nf-display: "Chakra Petch", "Trebuchet MS", "Segoe UI", sans-serif; --nf-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --nf-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --nf-t-fast: 160ms; --nf-t-base: 260ms; --nf-t-slow: 520ms; --nf-ease: cubic-bezier(.22, 1, .36, 1); --nf-ease-io: cubic-bezier(.65, 0, .35, 1);
  --nf-max: 1280px; --nf-gutter: clamp(16px, 4vw, 48px);
}
.nf-container { max-width: var(--nf-max); margin-inline: auto; padding-inline: var(--nf-gutter); position: relative; }
[class^="nf-"], [class*=" nf-"] { box-sizing: border-box; }
.nf-home { position: relative; width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; background: var(--nf-abismo); color: var(--nf-hielo); font-family: var(--nf-sans); overflow-x: clip; color-scheme: dark; }
html { overflow-x: clip; scroll-behavior: smooth; }
html.nf-lock, html.nf-lock body { overflow: hidden !important; }
.nf-home > p, .nf-home > br, .nf-home p:empty { display: none; }
.nf-home ::selection { background: rgba(255,230,10,.35); color: #fff; }
.nf-page-carrito [hidden] { display: none !important; }
.nf-notice { padding: 12px 16px; border: 1px dashed var(--nf-amarillo); border-radius: var(--nf-r-md); color: var(--nf-amarillo); font-family: var(--nf-sans); }
/* Aurora sólo para la página del carrito: este CSS carga en todas las páginas (por el cajón) y, sin el prefijo, pisaba la aurora fija de nf-archivo; al cargarse diferido provocaba un salto de diseño (CLS). */
.nf-page-carrito .nf-aurora { position: absolute; inset: 0 0 auto 0; height: 120vh; pointer-events: none; overflow: hidden; mask-image: linear-gradient(#000 60%, transparent); -webkit-mask-image: linear-gradient(#000 60%, transparent); }
.nf-page-carrito .nf-aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; animation: nfDeriva 26s var(--nf-ease-io) infinite alternate; }
.nf-page-carrito .nf-aurora i:nth-child(1) { width: 60vw; height: 60vw; left: -10vw; top: -20vh; background: radial-gradient(circle, rgba(255,230,10,.2), transparent 65%); }
.nf-page-carrito .nf-aurora i:nth-child(2) { width: 55vw; height: 55vw; right: -15vw; top: 10vh; background: radial-gradient(circle, rgba(255,61,90,.14), transparent 65%); animation-delay: -9s; animation-duration: 32s; }
.nf-page-carrito .nf-aurora i:nth-child(3) { width: 45vw; height: 45vw; left: 30vw; bottom: -25vh; background: radial-gradient(circle, rgba(255,200,80,.1), transparent 65%); animation-delay: -18s; animation-duration: 38s; }
@keyframes nfDeriva { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(8vw, 6vh, 0) scale(1.15); } }
@media (max-width: 900px) { .nf-page-carrito .nf-aurora i { animation: none; } }
.nf-reticula { position: absolute; inset: 0 0 auto 0; height: 120vh; pointer-events: none; background-image: linear-gradient(rgba(255,245,200,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,245,200,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); }
.nf-ceja { display: inline-flex; align-items: center; gap: 10px; font-family: var(--nf-display); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--nf-amarillo); }
.nf-ceja::before { content: ""; width: 22px; height: 1px; background: var(--nf-amarillo); box-shadow: 0 0 8px var(--nf-amarillo); }

/* Botones */
.nf-btn, .nf-btn:hover, .nf-btn:focus, .nf-btn:visited {
  --bg: var(--nf-vidrio-2); --fg: var(--nf-hielo); --bd: var(--nf-borde-2);
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; margin: 0; padding: 0 20px; border-radius: var(--nf-r-md); background: var(--bg) !important; color: var(--fg) !important; border: 1px solid var(--bd) !important;
  font: 600 13px/1 var(--nf-display) !important; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; box-shadow: none; cursor: pointer; position: relative;
  transition: box-shadow var(--nf-t-base) var(--nf-ease), background var(--nf-t-base), border-color var(--nf-t-base), color var(--nf-t-base);
}
.nf-btn--primary, .nf-btn--primary:visited { --bg: var(--nf-amarillo); --fg: var(--nf-tinta); --bd: transparent; }
.nf-btn--primary:hover, .nf-btn--primary:focus { --bg: var(--nf-amarillo-2); --fg: var(--nf-tinta); --bd: transparent; box-shadow: var(--nf-glow); }
.nf-btn--outline, .nf-btn--outline:visited { --bg: transparent; --fg: var(--nf-hielo); --bd: var(--nf-borde-2); }
.nf-btn--outline:hover { --bd: rgba(255,230,10,.55); --bg: rgba(255,230,10,.08); --fg: var(--nf-amarillo); }
.nf-btn:focus-visible { outline: 2px solid var(--nf-amarillo); outline-offset: 3px; }
.nf-btn.is-loading { color: transparent !important; pointer-events: none; }
.nf-spin { position: absolute; top: 50%; left: 50%; z-index: 3; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255,230,10,.25); border-top-color: var(--nf-amarillo); border-radius: 50%; animation: nfSpin .7s linear infinite; }
.nf-btn--primary .nf-spin { border-color: rgba(21,19,0,.25); border-top-color: var(--nf-tinta); }
@keyframes nfSpin { to { transform: rotate(360deg); } }

/* =========================================================
   Página del carrito
   ========================================================= */
.nf-page-carrito { display: grid; grid-template-columns: 1fr; }
/* min-width: 0 en los hijos de la rejilla: si no, el carrusel (fila sin salto) ensancha toda la página en móvil */
.nf-page-carrito > section, .nf-page-carrito > form, .nf-page-carrito > div { min-width: 0; }
.nf-cart--cross { overflow: hidden; }
.nf-cart { position: relative; padding: clamp(20px, 3vw, 40px) 0 0; font-family: var(--nf-sans); color: var(--nf-hielo); }
.nf-cart--aside { padding: 0; }
.nf-cart__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.nf-cart__head > div { display: grid; gap: 8px; }
.nf-home .nf-cart__title { margin: 0; padding: 0; font: 700 clamp(30px, 3.6vw, 44px)/1.05 var(--nf-display) !important; letter-spacing: -.015em; color: var(--nf-hielo) !important; text-transform: none; }
.nf-home .nf-cart__sub { margin: 0; font: 400 12px/1 var(--nf-mono) !important; color: var(--nf-bruma); }
.nf-cart__notices:empty, .nf-cart__notices .woocommerce-notices-wrapper:empty { display: none; }

/* Avisos de WooCommerce: mismo diseño que Mi cuenta. Ámbito .nf-avisos = página del carrito, carrito lateral y los avisos
   que el tema imprime fuera de nuestros bloques (body > .woocommerce-notices-wrapper). */
body > .woocommerce-notices-wrapper { display: flow-root; margin: 0; padding: 0 var(--nf-gutter); background: var(--nf-abismo); }
body > .woocommerce-notices-wrapper:empty { display: none; }
body > .woocommerce-notices-wrapper > * { max-width: calc(var(--nf-max) - 2 * var(--nf-gutter)); margin-inline: auto !important; margin-top: 16px !important; }
/* Avisos de WooCommerce con la piel de NF CORE (.aviso) */
.nf-cart__notices:empty { display: none; }
.nf-avisos .woocommerce-notices-wrapper:empty { display: none; }
.nf-avisos .woocommerce-message, .nf-avisos .woocommerce-error, .nf-avisos .woocommerce-info, .nf-avisos .wc-block-components-notice-banner, body > .woocommerce-notices-wrapper .woocommerce-message, body > .woocommerce-notices-wrapper .woocommerce-error, body > .woocommerce-notices-wrapper .woocommerce-info, body > .woocommerce-notices-wrapper .wc-block-components-notice-banner {
  --c: var(--nf-amarillo); position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: 100%;
  margin: 0 0 18px !important; padding: 13px 16px 13px 44px !important; list-style: none !important;
  border: 1px solid var(--nf-borde) !important; border-left: 3px solid var(--c) !important; border-radius: var(--nf-r-md) !important;
  background: var(--nf-vidrio-2) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--nf-hielo) !important; font: 400 14px/1.5 var(--nf-sans) !important; box-shadow: none !important;
}
.nf-avisos .woocommerce-message::before, .nf-avisos .woocommerce-error::before, .nf-avisos .woocommerce-info::before, body > .woocommerce-notices-wrapper .woocommerce-message::before, body > .woocommerce-notices-wrapper .woocommerce-error::before, body > .woocommerce-notices-wrapper .woocommerce-info::before {
  content: ""; position: absolute; left: 16px !important; top: 50% !important; margin: 0 !important; transform: translateY(-50%) !important; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); font: 700 11px/16px var(--nf-display); color: var(--nf-tinta); text-align: center;
}
.nf-avisos .woocommerce-message, body > .woocommerce-notices-wrapper .woocommerce-message { --c: var(--nf-verde); }
.nf-avisos .woocommerce-message::before, body > .woocommerce-notices-wrapper .woocommerce-message::before { content: "✓"; }
.nf-avisos .woocommerce-error, body > .woocommerce-notices-wrapper .woocommerce-error { --c: var(--nf-rojo); }
.nf-avisos .woocommerce-error::before, body > .woocommerce-notices-wrapper .woocommerce-error::before { content: "!"; color: #fff; }
.nf-avisos .woocommerce-info::before, body > .woocommerce-notices-wrapper .woocommerce-info::before { content: "i"; }
/* Aviso en formato bloque de WooCommerce (svg + texto): icono y texto en la misma fila, icono arriba si el texto se parte */
.nf-avisos .wc-block-components-notice-banner { flex-wrap: nowrap !important; align-items: flex-start !important; gap: 12px !important; padding: 12px 16px !important; }
.nf-avisos .wc-block-components-notice-banner.is-success { --c: var(--nf-verde); }
.nf-avisos .wc-block-components-notice-banner.is-error { --c: var(--nf-rojo); }
.nf-avisos .wc-block-components-notice-banner.is-info, .nf-avisos .wc-block-components-notice-banner.is-warning { --c: var(--nf-amarillo); }
.nf-avisos .wc-block-components-notice-banner > svg { flex: 0 0 22px; width: 22px !important; height: 22px !important; margin: 1px 0 0 !important; padding: 3px !important; border-radius: 50% !important; background: var(--c) !important; fill: var(--nf-tinta) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.nf-avisos .wc-block-components-notice-banner.is-error > svg { fill: #fff !important; }
.nf-avisos .wc-block-components-notice-banner__content { flex: 1 1 auto !important; min-width: 0; margin: 0 !important; padding: 2px 0 0 !important; align-self: center; font: 400 14px/1.5 var(--nf-sans) !important; color: var(--nf-hielo) !important; }
.nf-avisos .wc-block-components-notice-banner__content p { margin: 0; }
.nf-avisos .wc-block-components-notice-banner__dismiss { color: var(--nf-bruma) !important; }
/* Avisos que el tema imprime fuera de nuestros bloques: al ancho del contenido. Va después de la regla general (misma
   especificidad) porque su margin: 0 !important anulaba el centrado y el aviso quedaba pegado a la izquierda. */
body > .woocommerce-notices-wrapper > .woocommerce-message, body > .woocommerce-notices-wrapper > .woocommerce-error, body > .woocommerce-notices-wrapper > .woocommerce-info, body > .woocommerce-notices-wrapper > .wc-block-components-notice-banner { max-width: calc(var(--nf-max) - 2 * var(--nf-gutter)); margin: 16px auto 0 !important; }
/* WooCommerce enfoca el aviso por código (tabindex=-1) para lectores de pantalla: sin el contorno azul del navegador */
.nf-avisos [role="alert"][tabindex="-1"]:focus, body > .woocommerce-notices-wrapper [role="alert"][tabindex="-1"]:focus { outline: none; }
/* Borde amarillo de la marca (la franja izquierda conserva el color del tipo: verde, rojo o amarillo) */
.nf-avisos :is(.woocommerce-message, .woocommerce-error, .woocommerce-info), body > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) { border-top-color: rgba(255,230,10,.45) !important; border-right-color: rgba(255,230,10,.45) !important; border-bottom-color: rgba(255,230,10,.45) !important; box-shadow: 0 0 22px -12px rgba(255,230,10,.6) !important; }
/* ---- Maquetación única de los avisos clásicos en todo el sitio: tema (body > wrapper), carrito y cajón (.nf-avisos),
   Mi cuenta (06, .nf-account) y checkout (14, .nf-page-checkout). Cada snippet tenía la suya y se pisaban: botón
   invisible en Mi cuenta, icono descentrado en checkout, botón debajo del texto en mensajes largos. Aquí va con más
   especificidad (0,2,1+) para ganar a las tres.
   Fila: texto (interlineado 21px) + botón a la derecha. El icono se centra en la PRIMERA línea y el botón (34px) se
   centra sobre ella con margen negativo para no agrandar la fila: una línea = todo centrado en la caja. En <ul>
   (errores) cada <li> es su propia fila. En móvil el botón baja debajo del texto. ---- */
:is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 14px !important; padding: 16px 16px 16px 44px !important; line-height: 21px !important; }
:is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) ul:is(.woocommerce-message, .woocommerce-error, .woocommerce-info) { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; }
:is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info)::after { content: none !important; display: none !important; } /* clearfix de WooCommerce: en flex es una fila extra */
:is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info)::before { left: 16px !important; top: 26.5px !important; margin: 0 !important; transform: translateY(-50%) !important; } /* 16px de relleno + media línea (10.5): centro de la primera línea, mida lo que mida el icono */
:is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) > li { display: flex !important; flex-wrap: nowrap; align-items: flex-start; gap: 14px; width: 100%; margin: 0 !important; padding: 0 !important; line-height: 21px !important; list-style: none !important; }
/* Botón del aviso ("Ver carrito", "Seguir comprando"): contorno amarillo a la derecha */
:is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .button, :is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .button:visited, :is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .button:focus {
  order: 2; flex: 0 0 auto; float: none !important; display: inline-flex !important; align-items: center; width: auto !important; height: 34px !important; min-height: 0 !important;
  margin: -6.5px 0 -6.5px auto !important; padding: 0 14px !important;
  border: 1px solid rgba(255,230,10,.45) !important; border-radius: var(--nf-r-sm) !important; background: rgba(255,230,10,.06) !important; color: var(--nf-amarillo) !important;
  font: 600 11px/1 var(--nf-display) !important; letter-spacing: .12em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap; box-shadow: none !important; transform: none !important;
  transition: background var(--nf-t-fast), color var(--nf-t-fast), box-shadow var(--nf-t-fast);
}
:is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .button:hover { background: var(--nf-amarillo) !important; color: var(--nf-tinta) !important; box-shadow: var(--nf-glow) !important; }
@media (max-width: 640px) {
  :is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) div:is(.woocommerce-message, .woocommerce-error, .woocommerce-info), :is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) > li { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  :is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .button, :is(.nf-avisos, .nf-account, .nf-page-checkout, body > .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .button:hover { margin: 0 !important; }
}
/* Boton dentro del aviso en bloque (p. ej. "Confirmar direccion de correo"): pequeno, amarillo, sin crecer al pasar el cursor */
.nf-avisos .wc-block-components-notice-banner .button, .nf-avisos .wc-block-components-notice-banner a.button, .nf-avisos .wc-block-components-notice-banner .wc-block-components-button, .nf-avisos .wc-block-components-notice-banner .wc-block-components-notice-banner__content a.button,
.nf-avisos .wc-block-components-notice-banner .button:hover, .nf-avisos .wc-block-components-notice-banner a.button:hover, .nf-avisos .wc-block-components-notice-banner .wc-block-components-button:hover, .nf-avisos .wc-block-components-notice-banner .button:focus {
  display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; height: 32px !important; min-height: 0 !important; margin: 8px 0 0 !important; padding: 0 12px !important;
  border: 1px solid transparent !important; border-radius: var(--nf-r-sm) !important; background: var(--nf-amarillo) !important; color: var(--nf-tinta) !important;
  font: 600 11px/1 var(--nf-display) !important; letter-spacing: .08em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap; opacity: 1 !important; box-shadow: none !important; transform: none !important;
}
.nf-avisos .wc-block-components-notice-banner .button:hover, .nf-avisos .wc-block-components-notice-banner a.button:hover, .nf-avisos .wc-block-components-notice-banner .wc-block-components-button:hover { background: var(--nf-amarillo-2) !important; box-shadow: var(--nf-glow) !important; }
/* WooCommerce pone el boton DENTRO del contenido, en fila con el texto: texto a la izquierda, boton a la derecha pegado arriba y con aire */
.nf-avisos .wc-block-components-notice-banner .wc-block-components-notice-banner__content { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px 20px !important; }
.nf-avisos .wc-block-components-notice-banner .wc-block-components-notice-banner__content > *:first-child:not(.button) { flex: 1 1 auto; min-width: 0; }
.nf-avisos .wc-block-components-notice-banner .wc-block-components-notice-banner__content .button, .nf-avisos .wc-block-components-notice-banner .wc-block-components-notice-banner__content a.button, .nf-avisos .wc-block-components-notice-banner .wc-block-components-notice-banner__content .button:hover { align-self: flex-start !important; flex: 0 0 auto !important; float: none !important; order: 2; margin: -1px 0 0 !important; }
/* Boton hermano del texto (WooCommerce lo pone a la derecha): arriba, alineado con la primera linea y con aire respecto al texto */
.nf-avisos .wc-block-components-notice-banner > .button, .nf-avisos .wc-block-components-notice-banner > a.button, .nf-avisos .wc-block-components-notice-banner > .wc-block-components-button { align-self: flex-start; margin: 0 0 0 20px !important; flex: 0 0 auto; }
@media (max-width: 760px) {
  .nf-avisos .wc-block-components-notice-banner { flex-wrap: wrap !important; }
  .nf-avisos .wc-block-components-notice-banner .wc-block-components-notice-banner__content { flex-wrap: wrap !important; }
  .nf-avisos .wc-block-components-notice-banner .wc-block-components-notice-banner__content .button, .nf-avisos .wc-block-components-notice-banner .wc-block-components-notice-banner__content a.button { flex: 0 0 auto !important; margin: 4px auto 0 !important; }
  .nf-avisos .wc-block-components-notice-banner > .button, .nf-avisos .wc-block-components-notice-banner > a.button, .nf-avisos .wc-block-components-notice-banner > .wc-block-components-button { flex: 0 0 auto; margin: 4px auto 0 !important; }
}
/* Al guardar, WooCommerce enfoca el aviso: anillo amarillo en vez del azul del navegador */
.nf-avisos .wc-block-components-notice-banner:focus, .nf-avisos .wc-block-components-notice-banner:focus-visible, .nf-avisos .woocommerce-message:focus, .nf-avisos .woocommerce-error:focus, .nf-avisos .woocommerce-info:focus { outline: 2px solid var(--nf-amarillo) !important; outline-offset: 2px; box-shadow: 0 0 20px -6px var(--nf-amarillo) !important; }
.nf-avisos .woocommerce-error li, .nf-avisos .woocommerce-message li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.nf-avisos .woocommerce-error a, .nf-avisos .woocommerce-message a, .nf-avisos .woocommerce-info a { color: var(--nf-amarillo) !important; text-decoration: underline; text-underline-offset: 3px; }
.nf-avisos .woocommerce-message .button, .nf-avisos .woocommerce-info .button, .nf-avisos .woocommerce-error .button, .nf-avisos .woocommerce-info a.button:hover { order: 2; flex: 0 0 auto; float: none !important; display: inline-flex; width: auto !important; height: 34px; margin: 2px 0 0 !important; padding: 0 14px !important; font-size: 11px !important; text-decoration: none !important; white-space: nowrap; }

/* Barra de envío gratis */
.nf-ship { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 8px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--nf-borde); border-radius: var(--nf-r-md); background: var(--nf-vidrio-2); }
.nf-ship__ico { display: inline-flex; color: var(--nf-amarillo); } .nf-ship__ico svg { width: 20px; height: 20px; }
.nf-ship__txt { font: 400 14px/1.3 var(--nf-sans); color: var(--nf-bruma); } .nf-ship__txt strong { color: var(--nf-hielo); font-weight: 600; }
.nf-ship__bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgba(255,245,200,.1); overflow: hidden; }
.nf-ship__fill { display: block; height: 100%; background: var(--nf-amarillo); box-shadow: 0 0 10px var(--nf-amarillo); border-radius: 999px; transition: width var(--nf-t-slow) var(--nf-ease); }
.nf-ship.is-ok .nf-ship__fill, .nf-ship.is-ok .nf-ship__ico { background-color: var(--nf-verde); color: var(--nf-verde); box-shadow: 0 0 10px var(--nf-verde); }
.nf-ship.is-ok .nf-ship__ico { background: none; }

/* Rejilla de dos columnas: artículos + resumen fijo */
@media (min-width: 901px) {
  .nf-page-carrito { grid-template-columns: minmax(0, 1fr) 380px; column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .nf-page-carrito > .nf-aurora, .nf-page-carrito > .nf-reticula { grid-column: 1 / -1; }
  .nf-page-carrito .nf-cart--head, .nf-page-carrito .nf-cart--cross, .nf-page-carrito .nf-cartbar { grid-column: 1 / -1; }
  .nf-page-carrito .nf-cart__form { grid-column: 1; }
  .nf-page-carrito .nf-cart--aside { grid-column: 2; position: sticky; top: calc(var(--nf-header-h, 72px) + 16px); }
  /* El contenedor reparte con el nf-container de la cabecera: en las columnas anulamos su ancho y usamos su relleno */
  .nf-page-carrito .nf-cart__form .nf-container { max-width: none; padding-right: 0; margin-right: 0; }
  .nf-page-carrito .nf-cart--aside .nf-container { max-width: none; padding-left: 0; margin-left: 0; }
  .nf-page-carrito .nf-cart--cross .nf-container { max-width: var(--nf-max); }
  /* Las dos columnas caben dentro del ancho máximo */
  .nf-page-carrito { padding-inline: max(0px, calc((100vw - var(--nf-max)) / 2)); }
  .nf-page-carrito .nf-cart__form .nf-container { padding-left: var(--nf-gutter); }
  .nf-page-carrito .nf-cart--aside .nf-container { padding-right: var(--nf-gutter); }
}

/* Artículos */
.nf-cart__form { margin: 0; }
.nf-page-carrito .nf-cart__items { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.woocommerce.nf-page-carrito .nf-ci, .nf-page-carrito .nf-ci { position: relative; display: grid !important; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; margin: 0 !important; padding: 12px !important; list-style: none !important; float: none !important; width: auto !important; background: rgba(20,20,22,.86); border: 1px solid var(--nf-borde); border-radius: var(--nf-r-lg); transition: opacity var(--nf-t-base), border-color var(--nf-t-base); }
.nf-page-carrito .nf-ci.is-removing, .nf-page-carrito .nf-ci.is-updating { opacity: .45; pointer-events: none; }
.nf-page-carrito .nf-ci > * { float: none !important; min-width: 0; }
/* Miniatura: tamaño fijo por encima de cualquier regla de WooCommerce/Elementor (.product-thumbnail, img { height: auto }) */
.woocommerce.nf-page-carrito .nf-ci__media, .nf-page-carrito .nf-ci__media { width: 96px !important; height: 96px !important; max-width: 96px !important; flex: 0 0 96px; margin: 0 !important; padding: 0 !important; border-radius: var(--nf-r-md); background: #fff; overflow: hidden; contain: paint; }
.woocommerce.nf-page-carrito .nf-ci__media a, .nf-page-carrito .nf-ci__media a { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
.woocommerce.nf-page-carrito .nf-ci__media img, .nf-page-carrito .nf-ci__media img { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: contain; padding: 4% !important; display: block !important; margin: 0 !important; float: none !important; background: #fff; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.nf-ci__body { display: grid; gap: 6px; min-width: 0; align-content: start; }
.nf-page-carrito .nf-ci__name, .nf-page-carrito .nf-ci__name a, .nf-page-carrito .nf-ci__name a:hover { font: 600 15px/1.3 var(--nf-sans) !important; color: var(--nf-hielo) !important; text-decoration: none !important; }
.nf-page-carrito .nf-ci__name a:hover { color: var(--nf-amarillo) !important; }
.nf-page-carrito .nf-ci__name .variation { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0; font: 400 12px/1.3 var(--nf-mono); color: var(--nf-bruma); }
.nf-page-carrito .nf-ci__name .variation dt, .nf-page-carrito .nf-ci__name .variation dd, .nf-page-carrito .nf-ci__name .variation p { margin: 0; display: inline; font-weight: 400; }
.nf-ci__back { margin: 2px 0 0; font: 400 12px/1.3 var(--nf-mono); color: var(--nf-espera); }
.nf-page-carrito .nf-ci__price { font: 400 12px/1 var(--nf-mono); color: var(--nf-bruma); }
.nf-page-carrito .nf-ci__price .amount { font: inherit; color: inherit; }
.nf-ci__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.nf-page-carrito .nf-ci__sub { font: 500 17px/1 var(--nf-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--nf-hielo); }
.nf-page-carrito .nf-ci__sub .amount { font: inherit; color: inherit; }
/* Cantidad: campo nativo con botones ± */
.nf-page-carrito .quantity { display: inline-flex; align-items: center; height: 38px; border: 1px solid var(--nf-borde-2); border-radius: 999px; background: var(--nf-campo); overflow: hidden; }
.nf-page-carrito .quantity .screen-reader-text { position: absolute; clip: rect(0,0,0,0); }
.nf-page-carrito .quantity input.qty, .nf-page-carrito .quantity input.qty:focus { -webkit-appearance: none; appearance: none; -moz-appearance: textfield; width: 44px; height: 36px; margin: 0; padding: 0 !important; border: 0 !important; background: none !important; text-align: center; font: 500 14px/1 var(--nf-mono) !important; color: var(--nf-hielo) !important; box-shadow: none !important; outline: none; }
.nf-page-carrito .quantity input::-webkit-outer-spin-button, .nf-page-carrito .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nf-page-carrito .nf-qty, .nf-page-carrito .nf-qty:hover, .nf-page-carrito .nf-qty:focus { -webkit-appearance: none; appearance: none; width: 36px !important; height: 36px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--nf-hielo) !important; font: 400 18px/1 var(--nf-sans) !important; box-shadow: none !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; transition: background var(--nf-t-fast), color var(--nf-t-fast); }
.nf-page-carrito .nf-qty:hover { background: rgba(255,230,10,.12) !important; color: var(--nf-amarillo) !important; }
.nf-page-carrito .nf-qty svg, .nf-cd .nf-cd__step svg { width: 15px; height: 15px; }
/* Bote de basura (cantidad 1): sólo el icono, a la izquierda del contador */
.nf-page-carrito .nf-qty.is-trash, .nf-cd .nf-cd__step.is-trash { background: transparent !important; color: var(--nf-rojo-2) !important; box-shadow: none !important; }
.nf-page-carrito .nf-qty.is-trash:hover, .nf-cd .nf-cd__step.is-trash:hover { background: rgba(255,61,90,.12) !important; color: #fff !important; }
.nf-ci__qty-fixed { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--nf-borde); border-radius: 999px; font: 500 14px/1 var(--nf-mono); color: var(--nf-bruma); }
/* Quitar */
.nf-ci__actions { display: flex; align-items: flex-start; }
/* Quitar: WooCommerce pinta a.remove como círculo rojo (.woocommerce a.remove); lo anulamos con la misma especificidad */
.woocommerce.nf-page-carrito a.remove.nf-ci__remove, .woocommerce.nf-page-carrito a.remove.nf-ci__remove:hover, .woocommerce.nf-page-carrito a.remove.nf-ci__remove:focus, .nf-page-carrito .nf-ci__remove { display: inline-flex !important; align-items: center; justify-content: center; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(255,61,90,.3) !important; border-radius: 50% !important; background: rgba(255,61,90,.12) !important; color: var(--nf-rojo-2) !important; font-size: 0 !important; line-height: 1 !important; text-align: center; text-decoration: none !important; transition: border-color var(--nf-t-fast), color var(--nf-t-fast), background var(--nf-t-fast); }
.nf-page-carrito .nf-ci__remove svg { width: 16px; height: 16px; }
.woocommerce.nf-page-carrito a.remove.nf-ci__remove:hover, .nf-page-carrito .nf-ci__remove:hover { border-color: rgba(255,61,90,.6) !important; background: rgba(255,61,90,.24) !important; color: #fff !important; }

/* Herramientas: cupón y actualizar */
.nf-cart__tools { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; }
.nf-coupon { flex: 1 1 320px; }
.nf-coupon summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font: 600 11px/1 var(--nf-display); letter-spacing: .1em; text-transform: uppercase; color: var(--nf-amarillo); padding: 12px 0; }
.nf-coupon summary::-webkit-details-marker { display: none; }
.nf-coupon summary svg { width: 16px; height: 16px; }
.nf-page-carrito .nf-coupon__row { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.nf-page-carrito .nf-coupon__input, .nf-page-carrito .nf-coupon__input:focus { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0; width: auto !important; height: 44px; margin: 0; padding: 0 14px !important; border: 1px solid var(--nf-borde) !important; border-radius: var(--nf-r-md) !important; background: var(--nf-campo) !important; font: 500 14px/1 var(--nf-mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--nf-hielo) !important; box-shadow: none !important; outline: none; color-scheme: dark; transition: border-color var(--nf-t-base), box-shadow var(--nf-t-base); }
.nf-page-carrito .nf-coupon__input:focus { border-color: var(--nf-amarillo) !important; box-shadow: 0 0 0 3px rgba(255,230,10,.16) !important; }
.nf-page-carrito .nf-coupon__input::placeholder { color: var(--nf-bruma-2); text-transform: none; letter-spacing: 0; font-family: var(--nf-sans); opacity: 1; }
.nf-page-carrito .nf-coupon__btn, .nf-page-carrito .nf-coupon__btn:hover, .nf-page-carrito .nf-coupon__btn:focus { -webkit-appearance: none; appearance: none; flex: 0 0 auto; height: 44px !important; min-height: 0 !important; margin: 0 !important; padding: 0 18px !important; border: 1px solid var(--nf-borde-2) !important; border-radius: var(--nf-r-md) !important; background: var(--nf-vidrio-2) !important; color: var(--nf-hielo) !important; font: 600 12px/1 var(--nf-display) !important; letter-spacing: .08em; text-transform: uppercase; box-shadow: none !important; cursor: pointer; transition: border-color var(--nf-t-fast), color var(--nf-t-fast), background var(--nf-t-fast); }
.nf-page-carrito .nf-coupon__btn:hover { border-color: rgba(255,230,10,.55) !important; background: rgba(255,230,10,.08) !important; color: var(--nf-amarillo) !important; }
.nf-page-carrito .nf-cart__update { display: none !important; } /* la cantidad se actualiza sola; el botón sigue en el DOM para cart.js */

/* Resumen (totales nativos) */
.nf-cart__side { display: grid; gap: 14px; }
.nf-cart__totals { display: grid; gap: 12px; padding: 20px; background: rgba(20,20,22,.86); border: 1px solid var(--nf-borde); border-radius: var(--nf-r-lg); position: relative; }
.nf-cart__totals::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); pointer-events: none; }
.nf-page-carrito .cart_totals { width: 100%; float: none !important; }
.nf-page-carrito .cart_totals h2 { display: none; }
.nf-page-carrito .cart_totals table.shop_table, .nf-page-carrito .cart_totals table.shop_table tbody, .nf-page-carrito .cart_totals table.shop_table tr { display: block; width: 100%; margin: 0 !important; border: 0 !important; background: none !important; }
.nf-page-carrito .cart_totals table.shop_table tr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--nf-borde) !important; }
.nf-page-carrito .cart_totals table.shop_table tr:last-child { border-bottom: 0 !important; }
.nf-page-carrito .cart_totals th, .nf-page-carrito .cart_totals td { padding: 0 !important; border: 0 !important; background: none !important; font: 400 14px/1.4 var(--nf-sans) !important; color: var(--nf-bruma) !important; text-align: left; }
.nf-page-carrito .cart_totals td { text-align: right; font-family: var(--nf-mono) !important; font-variant-numeric: tabular-nums; color: var(--nf-hielo) !important; }
.nf-page-carrito .cart_totals td .amount { font: inherit; color: inherit; }
.nf-page-carrito .cart_totals tr.order-total th, .nf-page-carrito .cart_totals tr.order-total td { font-size: 18px !important; font-weight: 600 !important; color: var(--nf-hielo) !important; }
.nf-page-carrito .cart_totals tr.order-total td { font-size: 24px !important; letter-spacing: -.02em; }
.nf-page-carrito .cart_totals tr.cart-discount td { color: var(--nf-verde) !important; }
.nf-page-carrito .cart_totals .woocommerce-remove-coupon { margin-left: 8px; font: 400 12px/1 var(--nf-sans) !important; color: var(--nf-bruma) !important; text-decoration: underline; }
/* Envío dentro de los totales */
.nf-page-carrito .cart_totals tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; }
.nf-page-carrito .cart_totals tr.woocommerce-shipping-totals td { text-align: left; font-family: var(--nf-sans) !important; }
.nf-page-carrito .cart_totals #shipping_method, .nf-page-carrito .cart_totals ul#shipping_method { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.nf-page-carrito .cart_totals #shipping_method li { margin: 0 !important; padding: 0 !important; display: flex; align-items: flex-start; gap: 10px; }
.nf-page-carrito .cart_totals #shipping_method input[type="radio"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 3px 0 0; flex: 0 0 16px; border: 1px solid var(--nf-borde-2); border-radius: 50%; background: var(--nf-campo); cursor: pointer; }
.nf-page-carrito .cart_totals #shipping_method input[type="radio"]:checked { border-color: var(--nf-amarillo); box-shadow: inset 0 0 0 4px var(--nf-amarillo); }
.nf-page-carrito .cart_totals #shipping_method label { margin: 0; font: 400 13px/1.4 var(--nf-sans) !important; color: var(--nf-hielo) !important; cursor: pointer; }
.nf-page-carrito .cart_totals #shipping_method label .amount { font: 500 13px/1 var(--nf-mono); color: var(--nf-amarillo); }
.nf-page-carrito .cart_totals .woocommerce-shipping-destination { margin: 6px 0 0; font: 400 12px/1.4 var(--nf-sans); color: var(--nf-bruma-2); }
.nf-page-carrito .cart_totals .shipping-calculator-button { font: 600 11px/1 var(--nf-display) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--nf-amarillo) !important; text-decoration: none !important; }
.nf-page-carrito .cart_totals .shipping-calculator-form { margin-top: 8px; display: grid; gap: 8px; }
.nf-page-carrito .cart_totals .shipping-calculator-form .form-row { margin: 0 !important; }
.nf-page-carrito .cart_totals .shipping-calculator-form input, .nf-page-carrito .cart_totals .shipping-calculator-form select { width: 100%; height: 40px; padding: 0 12px !important; border: 1px solid var(--nf-borde) !important; border-radius: var(--nf-r-md) !important; background: var(--nf-campo) !important; color: var(--nf-hielo) !important; font: 400 14px/1 var(--nf-sans) !important; box-shadow: none !important; }
.nf-page-carrito .cart_totals .shipping-calculator-form .button { height: 40px; padding: 0 16px !important; border: 1px solid var(--nf-borde-2) !important; border-radius: var(--nf-r-md) !important; background: var(--nf-vidrio-2) !important; color: var(--nf-hielo) !important; font: 600 11px/1 var(--nf-display) !important; letter-spacing: .08em; text-transform: uppercase; }
/* Botón de pago nativo */
.nf-page-carrito .wc-proceed-to-checkout { margin: 4px 0 0 !important; padding: 0 !important; }
.nf-page-carrito .wc-proceed-to-checkout a.checkout-button, .nf-page-carrito .wc-proceed-to-checkout a.checkout-button:hover, .nf-page-carrito .wc-proceed-to-checkout a.checkout-button:focus { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 52px !important; margin: 0 !important; padding: 0 24px !important; border: 0 !important; border-radius: var(--nf-r-md) !important; background: var(--nf-amarillo) !important; color: var(--nf-tinta) !important; font: 600 14px/1 var(--nf-display) !important; letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important; box-shadow: none !important; transition: background var(--nf-t-fast), box-shadow var(--nf-t-base); }
.nf-page-carrito .wc-proceed-to-checkout a.checkout-button:hover { background: var(--nf-amarillo-2) !important; box-shadow: var(--nf-glow) !important; }
.nf-page-carrito .wc-proceed-to-checkout a.checkout-button.is-loading { color: transparent !important; }
.nf-cart__note { margin: 0; font: 400 12px/1.5 var(--nf-sans); color: var(--nf-bruma-2); text-align: center; }
/* Beneficios */
.nf-cart__perks { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 8px; }
.nf-cart__perk { display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 12px 14px !important; list-style: none !important; background: var(--nf-vidrio-2); border: 1px solid var(--nf-borde); border-radius: var(--nf-r-md); }
.nf-cart__perk-ico { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--nf-r-sm); background: rgba(255,230,10,.1); border: 1px solid rgba(255,230,10,.35); color: var(--nf-amarillo); }
.nf-cart__perk-ico svg { width: 18px; height: 18px; }
.nf-cart__perk strong { display: block; font: 600 13px/1.2 var(--nf-display); color: var(--nf-hielo); }
.nf-cart__perk em { display: block; margin-top: 2px; font: 400 12px/1.35 var(--nf-sans); font-style: normal; color: var(--nf-bruma); }

/* Cross-sells / más vendidos: carrusel con las tarjetas de la tienda */
.nf-cart--cross { padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 5vw, 64px); }
.nf-cart__shead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 16px; }
.nf-home .nf-cart__stitle { margin: 0; font: 700 clamp(20px, 2.2vw, 26px)/1.1 var(--nf-display) !important; color: var(--nf-hielo) !important; letter-spacing: -.01em; }
.nf-cart__snav { display: flex; gap: 6px; }
.nf-page-carrito .nf-slider__nav, .nf-page-carrito .nf-slider__nav:hover, .nf-page-carrito .nf-slider__nav:focus { -webkit-appearance: none; appearance: none; width: 36px !important; height: 36px !important; min-width: 0 !important; margin: 0 !important; padding: 0 0 3px !important; border: 1px solid var(--nf-borde-2) !important; border-radius: 50% !important; background: var(--nf-vidrio-2) !important; color: var(--nf-hielo) !important; font: 400 22px/1 var(--nf-sans) !important; box-shadow: none !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; transition: border-color var(--nf-t-fast), color var(--nf-t-fast); }
.nf-page-carrito .nf-slider__nav:hover { border-color: rgba(255,230,10,.55) !important; color: var(--nf-amarillo) !important; }
.nf-slider { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.nf-slider .nf-slider__track { --nf-vis: 5; --nf-gap: 14px; --nf-edge: max(var(--nf-gutter), calc((100vw - var(--nf-max)) / 2 + var(--nf-gutter))); --nf-content: calc(min(100vw, var(--nf-max)) - 2 * var(--nf-gutter)); list-style: none !important; margin: 0 !important; padding: 4px var(--nf-edge) 10px !important; display: flex; gap: var(--nf-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--nf-edge); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nf-slider .nf-slider__track::-webkit-scrollbar { display: none; }
.nf-slider .nf-slider__item { flex: 0 0 calc((var(--nf-content) - var(--nf-gap) * (var(--nf-vis) - 1)) / var(--nf-vis)); min-width: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; scroll-snap-align: start; }
@media (max-width: 1280px) { .nf-slider .nf-slider__track { --nf-vis: 4; } }
@media (max-width: 900px) { .nf-slider .nf-slider__track { --nf-vis: 3; } .nf-cart__snav { display: none; } }
@media (max-width: 640px) { .nf-slider .nf-slider__track { --nf-vis: 2.2; --nf-gap: 10px; } }
/* Tarjeta (misma piel que la tienda), acotada a la página del carrito: si no, pisa los estilos de nf-archivo
   (p. ej. la etiqueta "Agotado", que quedaba estirada y amarilla). */
.nf-page-carrito .nf-card { display: flex; flex-direction: column; height: 100%; padding: 8px; background: rgba(20,20,22,.86); border: 1px solid var(--nf-borde); border-radius: var(--nf-r-lg); position: relative; transition: border-color var(--nf-t-base); }
.nf-page-carrito .nf-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); pointer-events: none; }
.nf-page-carrito .nf-card__media { position: relative; display: block; flex: 0 0 auto; aspect-ratio: 1 / 1; border-radius: var(--nf-r-md); overflow: hidden; background: #fff; }
.nf-page-carrito .nf-card__pic, .nf-page-carrito .nf-card__pic:hover { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none !important; }
.nf-page-carrito .nf-card .nf-card__media img { width: 100% !important; height: 100% !important; object-fit: contain; display: block; margin: 0 !important; padding: 4%; background: #fff; border-radius: 0; }
.nf-page-carrito .nf-card__badge { position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--nf-r-sm); background: var(--nf-amarillo); color: var(--nf-tinta); font: 700 11px/1 var(--nf-display); letter-spacing: .06em; box-shadow: 0 0 14px -4px var(--nf-amarillo); }
.nf-page-carrito .nf-card__link, .nf-page-carrito .nf-card__link:hover, .nf-page-carrito .nf-card__link:visited { display: flex; flex-direction: column; flex: 1 1 auto; color: var(--nf-hielo) !important; text-decoration: none !important; }
.nf-page-carrito .nf-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; padding: 12px 6px 8px; min-width: 0; }
.nf-page-carrito .nf-card__marca { font: 600 10px/1.2 var(--nf-display); letter-spacing: .14em; text-transform: uppercase; color: var(--nf-bruma); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-page-carrito .nf-card .nf-card__title { margin: 0; font: 600 14px/1.3 var(--nf-sans) !important; color: var(--nf-hielo); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-page-carrito .nf-card .nf-card__price { margin: auto 0 0; padding-top: 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font: 500 16px/1 var(--nf-mono) !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--nf-hielo); }
.nf-page-carrito .nf-card .nf-card__price del { order: 2; font-size: 12px; font-weight: 400; color: var(--nf-bruma-2); opacity: 1; }
.nf-page-carrito .nf-card .nf-card__price ins { order: 1; text-decoration: none; background: none; color: inherit; }
.nf-page-carrito .nf-card .nf-card__price .amount { font: inherit; color: inherit; }
.nf-page-carrito .nf-card__cta { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; }
.nf-page-carrito .nf-card__cta a.button, .nf-page-carrito .nf-card__cta a.button:hover, .nf-page-carrito .nf-card__cta a.button:focus, .nf-page-carrito .nf-card__cta a.button:visited, .nf-page-carrito .nf-card__cta .added_to_cart, .nf-page-carrito .nf-card__cta .added_to_cart:hover { -webkit-appearance: none; appearance: none; position: relative; display: inline-flex !important; align-items: center; justify-content: center; height: 38px; min-height: 0 !important; margin: 0 !important; padding: 0 9px !important; border: 1px solid rgba(255,245,200,.18) !important; border-radius: 999px !important; background: rgba(14,14,17,.92) !important; color: var(--nf-hielo) !important; font: 600 10px/1 var(--nf-display) !important; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0,0,0,.8) !important; opacity: 1 !important; cursor: pointer; transition: background var(--nf-t-fast), border-color var(--nf-t-fast), color var(--nf-t-fast); }
.nf-page-carrito .nf-card__cta a.button svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nf-page-carrito .nf-card__cta a.button::before, .nf-page-carrito .nf-card__cta .added_to_cart::before { content: attr(data-nf-tip); display: block; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; transition: max-width var(--nf-t-base) var(--nf-ease), opacity var(--nf-t-fast), margin var(--nf-t-base), padding var(--nf-t-base); }
@media (hover: hover) and (pointer: fine) {
  .nf-page-carrito .nf-card__cta a.button:hover::before, .nf-page-carrito .nf-card:hover .nf-card__cta a.button::before { max-width: 180px; margin-right: 8px; padding-left: 4px; opacity: 1; } /* también al pasar el cursor por toda la tarjeta */
  .nf-page-carrito .nf-card__cta a.button:hover { border-color: transparent !important; background: var(--nf-amarillo) !important; color: var(--nf-tinta) !important; }
}
.nf-page-carrito .nf-card__cta a.button::after { display: none; }
.nf-page-carrito .nf-card__cta a.button.loading, .nf-page-carrito .nf-card__cta a.button.loading:hover { pointer-events: none; color: transparent !important; background: rgba(14,14,17,.92) !important; border-color: rgba(255,230,10,.55) !important; }
.nf-page-carrito .nf-card__cta a.button.loading svg, .nf-page-carrito .nf-card__cta a.button.loading::before { opacity: 0; }
.nf-page-carrito .nf-card__cta a.button.loading::before, .nf-page-carrito .nf-card:hover .nf-card__cta a.button.loading::before { max-width: 0 !important; margin-right: 0 !important; padding-left: 0 !important; } /* al cargar vuelve a tamaño icono aunque siga en hover */
.nf-page-carrito .nf-card__cta a.button.loading::after { content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; width: 16px; height: 16px; margin: -8px 0 0 -8px !important; border: 2px solid rgba(255,245,200,.2) !important; border-top-color: var(--nf-amarillo) !important; border-radius: 50% !important; background: none !important; font: 0/0 a !important; animation: nfSpin .7s linear infinite !important; }
.nf-page-carrito .nf-card__cta a.button.added { display: none !important; }
.nf-page-carrito .nf-card__cta .added_to_cart, .nf-page-carrito .nf-card__cta .added_to_cart:hover { padding-right: 36px !important; border-color: transparent !important; background: var(--nf-amarillo) !important; color: var(--nf-tinta) !important; font-size: 0 !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151300' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l1 12H5L6 8Z'/><path d='M9 8V6.5a3 3 0 0 1 6 0V8'/></svg>") !important; background-repeat: no-repeat !important; background-position: right 9px center !important; background-size: 18px 18px !important; box-shadow: 0 0 16px -4px var(--nf-amarillo) !important; }
.nf-page-carrito .nf-card__cta .added_to_cart::before { content: "Ver carrito"; font-size: 10px; max-width: 180px; padding-left: 4px; opacity: 1; }
@media (hover: none) { .nf-page-carrito .nf-card__cta a.button::before { display: none; } }

/* Barra fija de pago (móvil) */
/* ---- Barras fijas inferiores en móvil: compra en la ficha (nf-producto), total del carrito (aquí) y del checkout
   (nf-checkout). Un solo diseño compacto para las tres; cada snippet conserva cuándo se muestran (display/transform).
   Va en este snippet porque su CSS es el único que carga en las tres páginas. Especificidad alta a propósito: gana a
   `.nf-page-checkout .nf-btn:hover` (0,3,0 !important) y a los estilos de <button> del tema. ---- */
body :is(.nf-buybar, .nf-cartbar, .nf-cobar) { gap: 12px !important; padding: 8px var(--nf-gutter) calc(8px + env(safe-area-inset-bottom, 0px)) !important; background: rgba(10,10,12,.94) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--nf-borde) !important; box-shadow: 0 -18px 40px -22px rgba(0,0,0,.9) !important; }
body :is(.nf-cartbar__total, .nf-cobar__total) { display: flex !important; flex-direction: column; gap: 3px !important; flex: 0 0 auto; font: 600 9px/1 var(--nf-display) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--nf-bruma) !important; }
body :is(.nf-cartbar__total, .nf-cobar__total) span { font: inherit !important; letter-spacing: inherit !important; color: inherit !important; }
body :is(.nf-cartbar__total, .nf-cobar__total) strong, body .nf-page-producto .nf-buybar__price { font: 600 17px/1 var(--nf-mono) !important; letter-spacing: -.02em !important; color: var(--nf-hielo) !important; }
body :is(.nf-cartbar__total, .nf-cobar__total) strong .amount, body :is(.nf-cartbar__total, .nf-cobar__total) strong bdi { font: inherit !important; color: inherit !important; }
body .nf-buybar .nf-buybar__btns { flex: 1 1 auto; gap: 8px !important; }
body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn, body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn:hover, body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn:focus, body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn:active, body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn:visited {
  -webkit-appearance: none; appearance: none; flex: 1 1 0; max-width: 260px; min-width: 0; width: auto !important; height: 42px !important; min-height: 0 !important; margin: 0 !important; padding: 0 14px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px !important; font: 700 11px/1 var(--nf-display) !important; letter-spacing: .12em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap; box-shadow: none !important; transform: none !important;
}
body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn.nf-btn--primary, body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn.nf-btn--primary:hover, body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn.nf-btn--primary:focus { background: var(--nf-amarillo) !important; border: 1px solid var(--nf-amarillo) !important; color: var(--nf-tinta) !important; }
body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn.nf-btn--outline, body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn.nf-btn--outline:hover, body :is(.nf-buybar, .nf-cartbar, .nf-cobar) :is(.nf-buybar__btn, .nf-cartbar__btn, .nf-cobar__btn).nf-btn.nf-btn.nf-btn--outline:focus { background: transparent !important; border: 1px solid var(--nf-borde-2) !important; color: var(--nf-hielo) !important; }
body .nf-buybar .nf-buybar__btns .nf-buybar__btn.nf-btn { max-width: none; }
body :is(.nf-cartbar, .nf-cobar) :is(.nf-cartbar__btn, .nf-cobar__btn).nf-btn { flex: 1 1 auto; }
/* Aplazo y Kueski (carrito, checkout, ficha): texto gris, enlaces amarillos, fuente de la tienda. El enlace de Aplazo lo
   tiñe el JS (vive en su shadow DOM). En el resumen del carrito van bajo el total, separados por una línea. */
.nf-home kueskipay-widget { display: block; --kp-color-text-primary: var(--nf-bruma); --kp-text-color: var(--nf-bruma); --kp-color-text-secondary: var(--nf-bruma); --kp-color-brand-primary: var(--nf-amarillo); --kp-link-color: var(--nf-amarillo); --kp-font-family: var(--nf-sans); --kp-font-body-1-size: 13px; --kp-font-body-2-size: 13px; }
.nf-home aplazo-placement { display: block; color: var(--nf-bruma); font: 400 13px/1.45 var(--nf-sans); }
.nf-page-carrito .cart_totals :is(aplazo-placement, kueskipay-widget) { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--nf-borde); }
.nf-page-carrito .cart_totals :is(aplazo-placement, kueskipay-widget) + :is(aplazo-placement, kueskipay-widget) { margin-top: 12px; }
.nf-cartbar { display: none; }
.nf-cart__empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: clamp(32px, 5vw, 56px) 20px; background: rgba(20,20,22,.86); border: 1px dashed var(--nf-borde-2); border-radius: var(--nf-r-lg); }
.nf-cart__empty-ico { width: 56px; height: 56px; margin-bottom: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,230,10,.1); border: 1px solid rgba(255,230,10,.35); color: var(--nf-amarillo); box-shadow: 0 0 24px -8px var(--nf-amarillo); }
.nf-cart__empty-ico svg { width: 24px; height: 24px; }
.nf-cart__empty .nf-btn { margin-top: 10px; }

@media (max-width: 900px) {
  .nf-cart--aside { padding-top: 16px; }
  .nf-cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--nf-gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(14,14,17,.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--nf-borde-2); box-shadow: 0 -20px 50px -20px rgba(0,0,0,.9); }
  .nf-cartbar[hidden] { display: none; }
  .nf-cartbar__total { display: grid; gap: 2px; }
  .nf-cartbar__total span { font: 600 10px/1 var(--nf-display); letter-spacing: .14em; text-transform: uppercase; color: var(--nf-bruma); }
  .nf-cartbar__total strong { font: 500 20px/1 var(--nf-mono); letter-spacing: -.02em; color: var(--nf-hielo); }
  .nf-cartbar__total strong .amount { font: inherit; color: inherit; }
  .nf-cartbar__btn { flex: 1 1 auto; max-width: 260px; }
  .nf-page-carrito:not(.nf-page-carrito--vacio) { padding-bottom: 84px; }
}
@media (max-width: 640px) {
  .nf-page-carrito .nf-ci { grid-template-columns: 76px minmax(0, 1fr); }
  .nf-ci__media { width: 76px; height: 76px; }
  .nf-ci__actions { position: absolute; top: 10px; right: 10px; }
  .nf-page-carrito .nf-ci__name, .nf-page-carrito .nf-ci__name a { padding-right: 40px; font-size: 14px !important; }
  .nf-cart__head .nf-btn { width: 100%; }
}

/* =========================================================
   Carrito lateral
   ========================================================= */
.nf-cd { position: fixed; inset: 0; z-index: 2147483600; font-family: var(--nf-sans); color: var(--nf-hielo); color-scheme: dark; }
.nf-cd[hidden] { display: none; }
.nf-cd__backdrop { position: absolute; inset: 0; background: rgba(5,5,6,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.nf-cd.is-open .nf-cd__backdrop { opacity: 1; }
.nf-cd__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 440px); display: flex; flex-direction: column; background: var(--nf-abismo-2); border-left: 1px solid var(--nf-borde-2); box-shadow: -30px 0 80px -30px rgba(0,0,0,.9); transform: translateX(104%); transition: transform .32s var(--nf-ease); outline: none; }
.nf-cd.is-open .nf-cd__panel { transform: none; }
.nf-cd.is-busy .nf-cd__body { opacity: .5; pointer-events: none; }
.nf-cd__body { transition: opacity var(--nf-t-base); }
.nf-cd__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--nf-borde); }
.nf-cd__head > div { display: grid; gap: 6px; }
.nf-cd .nf-cd__title { margin: 0; font: 700 20px/1.1 var(--nf-display); letter-spacing: -.01em; color: var(--nf-hielo); display: flex; align-items: center; gap: 8px; }
.nf-cd__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--nf-amarillo); color: var(--nf-tinta); font: 700 11px/1 var(--nf-mono); }
.nf-cd__count.is-empty { display: none; }
/* Cerrar: píldora con icono y texto, borde amarillo tenue; en hover/foco se llena de amarillo. Sin depender de la
   tipografía del carácter × (Elementor la descuadraba). */
.nf-cd .nf-cd__close, .nf-cd .nf-cd__close:hover, .nf-cd .nf-cd__close:focus, .nf-cd .nf-cd__close:active { -webkit-appearance: none; appearance: none; flex: 0 0 auto; height: 36px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px 0 10px !important; border: 1px solid rgba(255,230,10,.45) !important; border-radius: 999px !important; background: rgba(255,230,10,.08) !important; color: var(--nf-amarillo) !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; font: 600 11px/1 var(--nf-display) !important; letter-spacing: .12em; text-transform: uppercase; line-height: 1 !important; box-shadow: none !important; cursor: pointer; transition: background .18s var(--nf-ease), color .18s var(--nf-ease), border-color .18s var(--nf-ease); }
.nf-cd .nf-cd__close svg { width: 16px; height: 16px; flex: 0 0 16px; display: block; }
.nf-cd .nf-cd__close span { display: block; padding-top: 1px; }
.nf-cd .nf-cd__close:hover, .nf-cd .nf-cd__close:focus-visible { background: var(--nf-amarillo) !important; border-color: var(--nf-amarillo) !important; color: var(--nf-tinta) !important; outline: none; }
.nf-cd .nf-cd__close:focus-visible { box-shadow: 0 0 0 3px rgba(255,230,10,.28) !important; }
.nf-cd__msg { --c: var(--nf-verde); position: relative; margin: 12px 20px 0; padding: 12px 14px 12px 42px; border-radius: var(--nf-r-md); border: 1px solid var(--nf-borde); border-left: 3px solid var(--c); background: var(--nf-vidrio-2); font: 400 13px/1.45 var(--nf-sans); color: var(--nf-hielo); }
.nf-cd__msg::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); font: 700 11px/16px var(--nf-display); color: var(--nf-tinta); text-align: center; }
.nf-cd__msg.is-error { --c: var(--nf-rojo); } .nf-cd__msg.is-error::before { content: "!"; color: #fff; }
.nf-cd__msg[hidden] { display: none; }
.nf-cd__body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.nf-cd__body .nf-ship { margin: 14px 20px 0; }
.nf-cd__items { list-style: none !important; margin: 0 !important; padding: 8px 20px !important; display: grid; gap: 6px; }
.nf-cd__item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; margin: 0 !important; padding: 10px 0 !important; list-style: none !important; border-bottom: 1px solid var(--nf-borde); transition: opacity var(--nf-t-base); }
.nf-cd__item:last-child { border-bottom: 0; }
.nf-cd__item.is-removing { opacity: .4; pointer-events: none; }
.nf-cd__media { width: 64px; height: 64px; border-radius: var(--nf-r-sm); background: #fff; overflow: hidden; }
.nf-cd__media a { display: block; width: 100%; height: 100%; }
.nf-cd__media img { width: 100% !important; height: 100% !important; object-fit: contain; padding: 3px; display: block; margin: 0; }
.nf-cd__info { display: grid; gap: 6px; min-width: 0; padding-right: 36px; }
.nf-cd__name, .nf-cd__name a, .nf-cd__name a:hover { font: 600 14px/1.3 var(--nf-sans) !important; color: var(--nf-hielo) !important; text-decoration: none !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-cd__info .variation { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; font: 400 11px/1.3 var(--nf-mono); color: var(--nf-bruma); }
.nf-cd__info .variation dt, .nf-cd__info .variation dd, .nf-cd__info .variation p { margin: 0; display: inline; font-weight: 400; }
.nf-cd__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nf-cd__qty { display: inline-flex; align-items: center; height: 32px; border: 1px solid var(--nf-borde-2); border-radius: 999px; background: var(--nf-campo); overflow: hidden; }
.nf-cd__qty--fixed { padding: 0 14px; font: 500 13px/1 var(--nf-mono); color: var(--nf-bruma); }
.nf-cd .nf-cd__step, .nf-cd .nf-cd__step:hover, .nf-cd .nf-cd__step:focus { -webkit-appearance: none; appearance: none; width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--nf-hielo) !important; font: 400 17px/1 var(--nf-sans) !important; box-shadow: none !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; }
.nf-cd .nf-cd__step:hover { background: rgba(255,230,10,.12) !important; color: var(--nf-amarillo) !important; }
.nf-cd .nf-cd__step:disabled { opacity: .35; cursor: default; }
.nf-cd__n { min-width: 26px; text-align: center; font: 500 13px/1 var(--nf-mono); color: var(--nf-hielo); }
.nf-cd__sub { font: 500 15px/1 var(--nf-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--nf-hielo); }
.nf-cd__sub .amount { font: inherit; color: inherit; }
.nf-cd .nf-cd__remove, .nf-cd .nf-cd__remove:hover, .nf-cd .nf-cd__remove:focus { -webkit-appearance: none; appearance: none; position: absolute; top: 10px; right: 0; width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(255,61,90,.3) !important; border-radius: 50% !important; background: rgba(255,61,90,.12) !important; color: var(--nf-rojo-2) !important; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: none !important; cursor: pointer; transition: border-color var(--nf-t-fast), color var(--nf-t-fast), background var(--nf-t-fast); }
.nf-cd .nf-cd__remove svg { width: 14px; height: 14px; }
.nf-cd .nf-cd__remove:hover { border-color: rgba(255,61,90,.6) !important; background: rgba(255,61,90,.24) !important; color: #fff !important; }
.nf-cd__empty { margin: auto; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 32px 24px; }
.nf-cd__empty-ico { width: 56px; height: 56px; margin-bottom: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,230,10,.1); border: 1px solid rgba(255,230,10,.35); color: var(--nf-amarillo); box-shadow: 0 0 24px -8px var(--nf-amarillo); }
.nf-cd__empty-ico svg { width: 24px; height: 24px; }
.nf-cd .nf-cd__empty-title { margin: 0; font: 700 18px/1.2 var(--nf-display); color: var(--nf-hielo); }
.nf-cd .nf-cd__empty-text { margin: 0 0 12px; font: 400 14px/1.5 var(--nf-sans); color: var(--nf-bruma); }
.nf-cd__foot { margin-top: auto; position: sticky; bottom: 0; display: grid; gap: 10px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--nf-abismo-2); border-top: 1px solid var(--nf-borde); }
.nf-cd__coupons { list-style: none !important; margin: 0 0 8px !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.nf-cd__chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0 !important; padding: 0 6px 0 10px !important; list-style: none !important; border: 1px solid rgba(61,242,154,.45); border-radius: 999px; background: rgba(61,242,154,.08); color: var(--nf-verde); font: 500 12px/1 var(--nf-mono); letter-spacing: .06em; text-transform: uppercase; }
.nf-cd__chip svg { width: 13px; height: 13px; }
.nf-cd .nf-cd__chip button, .nf-cd .nf-cd__chip button:hover { -webkit-appearance: none; appearance: none; width: 20px !important; height: 20px !important; min-width: 0 !important; margin: 0 !important; padding: 0 0 2px !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: inherit !important; font: 400 16px/1 var(--nf-sans) !important; box-shadow: none !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; }
.nf-cd__cdetails summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font: 600 11px/1 var(--nf-display); letter-spacing: .1em; text-transform: uppercase; color: var(--nf-amarillo); padding: 4px 0; }
.nf-cd__cdetails summary::-webkit-details-marker { display: none; }
.nf-cd__cdetails summary svg { width: 15px; height: 15px; }
.nf-cd__cform { display: flex; gap: 8px; margin: 8px 0 0; }
.nf-cd .nf-cd__cform input, .nf-cd .nf-cd__cform input:focus { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; padding: 0 12px !important; border: 1px solid var(--nf-borde) !important; border-radius: var(--nf-r-md) !important; background: var(--nf-campo) !important; font: 500 13px/1 var(--nf-mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--nf-hielo) !important; box-shadow: none !important; outline: none; }
.nf-cd .nf-cd__cform input:focus { border-color: var(--nf-amarillo) !important; }
.nf-cd .nf-cd__cform input::placeholder { color: var(--nf-bruma-2); text-transform: none; letter-spacing: 0; font-family: var(--nf-sans); opacity: 1; }
.nf-cd .nf-cd__cform button, .nf-cd .nf-cd__cform button:hover { -webkit-appearance: none; appearance: none; height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid var(--nf-borde-2) !important; border-radius: var(--nf-r-md) !important; background: var(--nf-vidrio-2) !important; color: var(--nf-hielo) !important; font: 600 11px/1 var(--nf-display) !important; letter-spacing: .08em; text-transform: uppercase; box-shadow: none !important; cursor: pointer; }
.nf-cd__row { display: flex; justify-content: space-between; gap: 12px; font: 400 13px/1.3 var(--nf-sans); color: var(--nf-bruma); }
.nf-cd__disc { font-family: var(--nf-mono); color: var(--nf-verde); }
.nf-cd__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nf-cd__total span { font: 600 11px/1 var(--nf-display); letter-spacing: .14em; text-transform: uppercase; color: var(--nf-bruma); }
.nf-cd__total strong { font: 500 24px/1 var(--nf-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--nf-hielo); }
.nf-cd__total strong .amount { font: inherit; color: inherit; }
.nf-cd .nf-cd__note { margin: 0; font: 400 12px/1.45 var(--nf-sans); color: var(--nf-bruma-2); }
.nf-cd__actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.nf-cd .nf-cd__go { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .nf-cd__panel, .nf-cd__backdrop, .nf-page-carrito .nf-aurora i { transition: none; animation: none; } }