/* =========================================================================
   FERNS MODA — Carrito y carrito lateral (PLAN F6). Solo tokens (fm-tokens.css). Sin animaciones salvo fades.
   Componentes del briefing: fm-line, fm-qty, fm-summary. Nuevos: fm-coupon, fm-trash; el chip (fm-chip-std) y las notificaciones (fm-note) están en fm-components.css.
   ========================================================================= */

.fm-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Piezas comunes ---------- */
.fm-qty { display: inline-grid; grid-template-columns: 34px 44px 34px; height: 40px; border: var(--fm-border-hair); align-items: center; text-align: center; background: var(--fm-white); }
.fm-qty button { height: 100%; border: 0; background: none; cursor: pointer; font: var(--fm-fw-light) 1.125rem/1 var(--fm-font-sans); color: var(--fm-text); }
.fm-qty button:hover { background: var(--fm-bg-alt); }
.fm-qty button:disabled { opacity: .3; cursor: default; }
.fm-qty input, .fm-qty span { width: 100%; height: 100%; border: 0; padding: 0; text-align: center; font: var(--fm-fw-medium) var(--fm-fs-small)/40px var(--fm-font-sans); background: none; color: var(--fm-text); -moz-appearance: textfield; appearance: textfield; }
.fm-qty input::-webkit-outer-spin-button, .fm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fm-qty :focus-visible { outline: 2px solid var(--fm-focus); outline-offset: -2px; }

.fm-line__thumb { display: block; aspect-ratio: var(--fm-card-ratio); background: var(--fm-surface-media); overflow: hidden; }
.fm-line__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-line__name { margin: 0; font: var(--fm-fw-regular) var(--fm-fs-h4)/var(--fm-lh-snug) var(--fm-font-display); }
.fm-line__name a { color: var(--fm-text); text-decoration: none; }
.fm-line__tags { display: flex; flex-wrap: wrap; gap: var(--fm-space-2); margin-top: var(--fm-space-2); }
.fm-line__nudge { display: flex; gap: var(--fm-space-2); margin: var(--fm-space-3) 0 0; }
.fm-line__label { display: block; font-size: var(--fm-fs-label); letter-spacing: var(--fm-ls-label); text-transform: uppercase; color: var(--fm-text-muted); }
.fm-line__remove { display: inline-block; padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--fm-fs-small); color: var(--fm-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.fm-line__remove:hover { color: var(--fm-text); }

.fm-summary { background: var(--fm-bg-alt); padding: var(--fm-space-8); display: grid; gap: var(--fm-space-3); align-content: start; }
.fm-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fm-space-4); font-size: var(--fm-fs-small); }
.fm-summary__row small { color: var(--fm-text-muted); font-size: var(--fm-fs-label); }
.fm-summary__row--save { color: var(--fm-ok-strong); font-weight: var(--fm-fw-semibold); }
.fm-summary__total { border-top: 1px solid var(--fm-border-strong); padding-top: var(--fm-space-4); margin-top: var(--fm-space-2); font-size: var(--fm-fs-body); font-weight: var(--fm-fw-semibold); }
.fm-summary__total > span:last-child { display: grid; justify-items: end; font-size: var(--fm-fs-h4); }
.fm-summary__igv { font-weight: var(--fm-fw-regular); }
.fm-summary__saving { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-space-2); margin: 0; font-size: var(--fm-fs-small); color: var(--fm-text); }
.fm-summary__note { margin: 0; font-size: var(--fm-fs-label); color: var(--fm-text-muted); }
.fm-summary__coupon-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-space-2); min-width: 0; }
.fm-coupon-code.fm-chip-std { overflow-wrap: anywhere; white-space: normal; min-width: 0; }
.fm-summary__row:has(.fm-summary__coupon-label) { align-items: center; }
.fm-summary__coupon-label + span { flex-shrink: 0; white-space: nowrap; }
.fm-coupon-remove.fm-trash, .fm-cart .fm-coupon-remove.fm-trash { flex-shrink: 0; margin: 0; }
.fm-coupon-remove:focus-visible { outline: 2px solid var(--fm-focus); outline-offset: 2px; }

/* Cupón: campo + "Aplicar" (referencia del usuario) */
.fm-coupon { display: grid; grid-template-columns: 1fr auto; gap: var(--fm-space-2); margin: 0; }
.fm-coupon__input.fm-input { height: var(--fm-btn-h); text-transform: uppercase; background: var(--fm-white); }
.fm-coupon__input::placeholder { text-transform: none; }
.fm-coupon__btn.fm-btn { min-height: var(--fm-btn-h); padding-inline: var(--fm-space-5); }
.fm-coupon__msg { grid-column: 1 / -1; margin: 0; font-size: var(--fm-fs-small); color: var(--fm-ok-strong); }
.fm-coupon__msg:empty { display: none; }
.fm-coupon__msg.is-error { color: var(--fm-error); }
.fm-coupon__note { margin: 0; font-size: var(--fm-fs-label); line-height: var(--fm-lh-normal); color: var(--fm-text-muted); }


/* ---------- Página de carrito ---------- */
.fm-cart-main { padding-block: var(--fm-space-8) var(--fm-section-y); }
.fm-cart-title { margin: var(--fm-space-4) 0 var(--fm-space-8); font: var(--fm-fw-regular) var(--fm-fs-h1)/var(--fm-lh-tight) var(--fm-font-display); letter-spacing: var(--fm-ls-display); }
.fm-cart-main .woocommerce-notices-wrapper:not(:empty) { margin-bottom: var(--fm-space-6); }

.fm-cart { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: var(--fm-space-12); align-items: start; }
.fm-cart__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fm-space-4); padding-bottom: var(--fm-space-4); border-bottom: 1px solid var(--fm-border-strong); }
.fm-cart__h { margin: 0; font: var(--fm-fw-regular) var(--fm-fs-h3)/var(--fm-lh-snug) var(--fm-font-display); }
.fm-cart__h span { font: var(--fm-fw-regular) var(--fm-fs-small) var(--fm-font-sans); color: var(--fm-text-muted); }
.fm-cart__list { list-style: none; margin: 0; padding: 0; }
.fm-cart__lines.is-busy { opacity: .55; pointer-events: none; transition: opacity var(--fm-dur-fast); }

.fm-cart .fm-line {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 110px 120px 110px 32px; gap: var(--fm-space-5);
  align-items: start; padding-block: var(--fm-space-6); border-bottom: var(--fm-border-hair);
}
.fm-line__attrlist { list-style: none; margin: var(--fm-space-2) 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--fm-fs-small); }
.fm-line__attrlist span { color: var(--fm-text-muted); }
.fm-line__unit, .fm-line__qtycol, .fm-line__totalcol { display: grid; gap: var(--fm-space-2); justify-items: end; text-align: right; }
.fm-line__qtycol { justify-items: center; }
.fm-line__unit b, .fm-line__totalcol b { font-size: var(--fm-fs-body); font-weight: var(--fm-fw-semibold); }
.fm-line__unit del { font-size: var(--fm-fs-small); color: var(--fm-text-muted); }
.fm-line__calc-mini { font-size: var(--fm-fs-label); color: var(--fm-text-muted); white-space: nowrap; }

.fm-cart__actions { display: flex; justify-content: space-between; gap: var(--fm-space-4); padding-top: var(--fm-space-6); font-size: var(--fm-fs-small); }
.fm-cart__empty { color: var(--fm-error); }

.fm-cart__summary { position: sticky; top: calc(var(--fm-header-h) + var(--fm-space-6)); }
.fm-summary__cta { margin-top: var(--fm-space-2); }
.fm-breakdown { display: grid; gap: var(--fm-space-2); padding-bottom: var(--fm-space-3); border-bottom: var(--fm-border-hair); }
.fm-breakdown__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--fm-space-3); align-items: baseline; font-size: var(--fm-fs-small); }
.fm-breakdown__row small { display: block; color: var(--fm-text-muted); font-size: var(--fm-fs-label); }
.fm-breakdown__calc { color: var(--fm-text-muted); white-space: nowrap; }
.fm-breakdown__row b { font-weight: var(--fm-fw-semibold); white-space: nowrap; }

.fm-empty-cart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fm-space-4); text-align: center; }
.fm-cart-empty { max-width: 46rem; margin-inline: auto; padding: var(--fm-space-16) var(--fm-space-6); border: var(--fm-border-hair); background: var(--fm-white); }
.fm-empty-cart p, .fm-empty-cart .fm-h3 { margin: 0; max-width: 40ch; }
.fm-empty-cart p { color: var(--fm-text-muted); }
.fm-empty-cart .fm-h3 { color: var(--fm-text); }
html body .fm-empty-cart .fm-empty-cart__icon { flex-shrink: 0; color: var(--fm-text); margin-bottom: var(--fm-space-2); }
.fm-empty-cart .fm-btn { margin-top: var(--fm-space-3); }

@media (max-width: 1100px) {
  .fm-cart { grid-template-columns: 1fr; gap: var(--fm-space-8); }
  .fm-cart__summary { position: static; }
}
@media (max-width: 720px) {
  .fm-cart .fm-line { grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "thumb body body" "thumb unit total" "thumb qty trash"; gap: var(--fm-space-3) var(--fm-space-4); }
  .fm-line__thumb { grid-area: thumb; }
  .fm-cart .fm-line__body { grid-area: body; }
  .fm-line__unit { grid-area: unit; justify-items: start; text-align: left; }
  .fm-line__totalcol { grid-area: total; }
  .fm-line__qtycol { grid-area: qty; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .fm-line__qtycol .fm-line__label { display: none; }
  .fm-cart .fm-trash { grid-area: trash; justify-self: end; }
  .fm-summary { padding: var(--fm-space-6) var(--fm-space-4); }
  .fm-cart__actions { flex-direction: column; }
}

/* ---------- Carrito lateral (estructura de la base: .sdg-sc*) ---------- */
.sdg-sc { font-family: var(--fm-font-sans); }
.sdg-sc-bar { border-bottom-color: var(--fm-border); }
.sdg-sc-bar h2 { font: var(--fm-fw-regular) var(--fm-fs-h3)/1 var(--fm-font-display); color: var(--fm-text); }
.sdg-sc-n { font-family: var(--fm-font-sans); font-size: var(--fm-fs-small); color: var(--fm-text-muted); }

.fm-sc-list { padding: 0 var(--fm-space-6); }
.fm-sc-banner { list-style: none; padding: var(--fm-space-4) 0 0; }
.fm-line--side { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--fm-space-4); padding-block: var(--fm-space-5); border-bottom: var(--fm-border-hair); }
.fm-line--side:last-child { border-bottom: 0; }
.fm-line--side .fm-line__name { font-size: var(--fm-fs-body-lg); }
.fm-line__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--fm-space-3); }
.fm-line__total { margin: 0; font-weight: var(--fm-fw-semibold); font-size: var(--fm-fs-small); white-space: nowrap; }
.fm-line__attrs { margin: var(--fm-space-1) 0 0; font-size: var(--fm-fs-label); letter-spacing: .02em; color: var(--fm-text-muted); }
.fm-line__calc { display: flex; gap: var(--fm-space-2); margin: var(--fm-space-2) 0 0; font-size: var(--fm-fs-small); color: var(--fm-text-muted); }
.fm-line__calc b { color: var(--fm-text); font-weight: var(--fm-fw-semibold); }
.fm-line__was { margin: 2px 0 0; font-size: var(--fm-fs-label); color: var(--fm-text-muted); }
.fm-line__actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--fm-space-3); }
.fm-line--side .fm-qty { grid-template-columns: 30px 36px 30px; height: 34px; }
.fm-line--side .fm-qty span { line-height: 34px; }

.fm-sc-foot { display: grid; gap: var(--fm-space-3); padding: var(--fm-space-4) var(--fm-space-6) var(--fm-space-6); border-top-color: var(--fm-border); }
.fm-sc-coupon summary { cursor: pointer; list-style: none; font-size: var(--fm-fs-small); text-decoration: underline; text-underline-offset: 3px; color: var(--fm-text); }
.fm-sc-coupon summary::-webkit-details-marker { display: none; }
.fm-sc-coupon[open] summary { margin-bottom: var(--fm-space-3); }
.fm-sc-coupon .fm-coupon__note { margin-top: var(--fm-space-2); }
.fm-summary--side { padding: var(--fm-space-4); gap: var(--fm-space-2); }
.fm-summary--side .fm-summary__total { padding-top: var(--fm-space-3); }
.fm-sc-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fm-space-2); }
.fm-sc-cta .fm-btn { padding-inline: var(--fm-space-3); }
.fm-sc-empty { gap: var(--fm-space-3); }
.fm-sc-empty p { margin: 0; color: var(--fm-text-muted); }
.fm-sc-empty .fm-h3 { color: var(--fm-text); }

@media (max-width: 480px) {
  .fm-sc-list { padding: 0 var(--fm-space-4); }
  .fm-sc-foot { padding-inline: var(--fm-space-4); }
  .fm-line--side { grid-template-columns: 72px minmax(0, 1fr); }
}

/* Ajustes tras revisión visual: el tema tiñe títulos y textos pequeños del panel */
/* style.css de la base fuerza .woocommerce-cart h1 con !important */
html body.woocommerce-cart h1.fm-cart-title { color: var(--fm-text) !important; font-weight: var(--fm-fw-regular) !important; letter-spacing: var(--fm-ls-display) !important; }
html body .sdg-sc .fm-coupon__note, html body .sdg-sc .fm-summary__note,
html body .sdg-sc .fm-summary__row small, html body .fm-cart .fm-summary__row small { color: var(--fm-text-muted); }

/* ---------- Ajustes F6 (observaciones de Rafael) ---------- */
/* Quitar = tachito: rojo opaco en reposo, rojo al pasar el mouse */
.fm-trash { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; color: color-mix(in srgb, var(--fm-error) 55%, var(--fm-white)); transition: color var(--fm-dur-fast); }
html body a.fm-trash:not(.fm-btn):not(.btn), .fm-trash { color: color-mix(in srgb, var(--fm-error) 55%, var(--fm-white)); }
html body a.fm-trash:hover, html body a.fm-trash:focus-visible, .fm-trash:hover, .fm-trash:focus-visible { color: var(--fm-error); }
.fm-cart .fm-trash { margin-top: var(--fm-space-5); }
.fm-line--side .fm-line__actions .fm-trash { margin-right: calc(var(--fm-space-2) * -1); }
/* Acciones como botones estándar */
.fm-cart__actions { align-items: center; }
html body .fm-cart__actions a.fm-cart__empty { color: var(--fm-error); border-color: color-mix(in srgb, var(--fm-error) 45%, var(--fm-white)); }
html body .fm-cart__actions a.fm-cart__empty:hover { color: var(--fm-white); }
.fm-cart__empty::before { background: var(--fm-error); }
/* Foco del cupón en Arena oscuro (nunca azul) */
html body .fm-coupon__input.fm-input:focus, html body .fm-coupon__input.fm-input:focus-visible { border-color: var(--fm-sand-600); outline: 0; box-shadow: 0 0 0 1px var(--fm-sand-600); }
/* Mismo tamaño de texto en todos los botones del carrito (el de "Aplicar" / "Ver Carrito") */
html body .fm-cart .fm-btn, html body .sdg-sc .fm-btn, html body .fm-cart-empty .fm-btn { font-size: var(--fm-fs-label); letter-spacing: var(--fm-ls-label); }
/* Chip "Compra Mayorista" al inicio del panel */
.fm-sc-banner { padding: var(--fm-space-4) 0 var(--fm-space-1); }
.fm-note--ok { margin-top: var(--fm-space-1); }

/* Botones primarios del carrito: sin efecto hover (se quedan negros con texto blanco) */
html body .fm-cart .fm-btn--primary:hover, html body .fm-cart .fm-btn--primary:focus-visible,
html body .sdg-sc .fm-btn--primary:hover, html body .sdg-sc .fm-btn--primary:focus-visible { background: var(--fm-ink-900); color: var(--fm-white); }
html body .fm-cart .fm-btn--primary::before, html body .sdg-sc .fm-btn--primary::before { display: none; }
