/* =====================================================================
   FARMACIA MARÍA AGUIRRE — Carrito, barras de envío gratis, «Te puede interesar» y márgenes de cabecera de página
   (29-oct-2026). Se carga en todas las páginas (inc/mini-cesta.php, prioridad 30, después de fma-mobile.css): el cajón de la cesta se abre
   desde cualquiera y las cabeceras de página (subhero) están en todas. Móvil primero.
   El HTML de las barras y de las fichas sale de inc/mini-cesta.php; la rejilla del carrito, de woocommerce/cart/cart.php.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Barras de envío gratis (resumen del carrito y cajón de la cesta)
      Sin código postal: dos barras (Pamplona y comarca / resto de península). Con él, solo la que le toca.
   --------------------------------------------------------------------- */
.fma-free-bar { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--c-linea, rgba(31,42,36,.10)); border-radius: 14px; }
.fma-fb { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fma-fb + .fma-fb { padding-top: 12px; border-top: 1px solid var(--c-linea, rgba(31,42,36,.10)); }
.fma-fb__head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fma-fb__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-verde-mint, #C9DDC9); color: var(--c-verde-botanico, #276B45); }
.fma-fb.is-done .fma-fb__ico { background: var(--c-verde-botanico, #276B45); color: #fff; }
.fma-fb__label { min-width: 0; font-size: .82rem; line-height: 1.3; color: var(--c-grafito, #1F2A24); }
.fma-fb__label strong { font-weight: 700; color: var(--c-verde-botanico, #276B45); }
.fma-fb__row { display: flex; align-items: center; gap: 12px; }
.fma-fb__track { flex: 1 1 auto; min-width: 0; height: 8px; border-radius: 99px; background: #e8e3da; overflow: hidden; }
.fma-fb__track > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c-verde-salvia, #6FAE8C), var(--c-verde-botanico, #276B45)); transition: width .35s ease; }
.fma-fb.is-done .fma-fb__track > span { background: var(--c-verde-botanico, #276B45); }
.fma-fb__status { flex: none; font-size: .78rem; font-weight: 600; line-height: 1.2; color: var(--c-grafito-soft, #4A554F); white-space: nowrap; }
.fma-fb__status .woocommerce-Price-amount { font-weight: 700; color: var(--c-verde-botanico, #276B45); }
.fma-fb__status.is-done { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 8px; border-radius: 99px; background: var(--c-verde-mint, #C9DDC9); color: var(--c-verde-botanico, #276B45); font-weight: 700; }
.fma-fb__status.is-done svg { flex: none; }
.fma-free-bar .fma-fb__note { margin: 0; font-size: .74rem; line-height: 1.35; color: var(--c-grafito-soft, #4A554F); }

/* Cajón de la cesta: más compacto (en móvil es una hoja que mide lo que mide su contenido) */
.fma-free-bar--mini { margin: 8px 0 0; padding: 10px 12px; gap: 10px; border-radius: 12px; }
.fma-free-bar--mini .fma-fb { gap: 6px; }
.fma-free-bar--mini .fma-fb + .fma-fb { padding-top: 10px; }
.fma-free-bar--mini .fma-fb__ico { width: 24px; height: 24px; }
.fma-free-bar--mini .fma-fb__ico svg { width: 14px; height: 14px; }
.fma-free-bar--mini .fma-fb__label { font-size: .76rem; line-height: 1.25; }
.fma-free-bar--mini .fma-fb__track { height: 7px; }
.fma-free-bar--mini .fma-fb__status { font-size: .74rem; }
.fma-free-bar--mini .fma-fb__status.is-done { padding: 2px 8px 2px 6px; }
.fma-free-bar--mini .fma-fb__note { font-size: .7rem; }

/* En el resumen del carrito (fondo crema) la tarjeta blanca destaca; con aire arriba y abajo */
.cart-summary .fma-free-bar { margin: 2px 0; }

/* ---------------------------------------------------------------------
   2. Carrito: rejilla (lista, «Te puede interesar», acciones, resumen) y fichas pequeñas
      Móvil: lista → fichas (tira deslizable) → acciones → resumen.
      Escritorio: resumen a la derecha (pegajoso); lista, acciones y fichas en la columna izquierda, así las fichas llenan el hueco
      que deja el resumen en vez de mandarse al final de la página.
   --------------------------------------------------------------------- */
.cart-grid > * { min-width: 0; }
.cart-grid .fma-cart-recs { margin: 0; padding: 0; min-width: 0; }
.cart-grid .fma-cart-recs .fma-mini-recs__title { margin: 0 0 8px; padding: 0; border: 0; font-family: var(--ff-display, 'Cormorant Garamond', serif); font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--c-grafito, #1F2A24); }

/* Tira deslizable (móvil y tablet): sangra hasta el borde de la tarjeta blanca del carrito (su relleno es de 16 px) */
.cart-grid .fma-cart-recs .fma-mini-recs__list { list-style: none; display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cart-grid .fma-cart-recs .fma-mini-recs__list::-webkit-scrollbar { display: none; }
.cart-grid .fma-cart-recs .fma-mini-rec { flex: 0 0 132px; width: 132px; padding: 8px; gap: 4px; border-radius: 14px; }
.cart-grid .fma-cart-recs .fma-mini-rec__media { width: 80px; height: 80px; aspect-ratio: auto; margin: 0 auto; border-radius: 10px; }
.cart-grid .fma-cart-recs .fma-mini-rec__name { min-height: 2.5em; font-size: .74rem; line-height: 1.25; }
.cart-grid .fma-cart-recs .fma-mini-rec__foot { gap: 2px; }
.cart-grid .fma-cart-recs .fma-mini-rec__price { font-size: .84rem; }

/* El «+» mide 44 px (zona de toque) aquí y en el cajón */
.fma-mini-rec__add { width: 44px; height: 44px; }

@media (min-width: 900px) {
  .cart-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 56px; row-gap: 0; align-items: start; }
  .cart-grid > .cart-list { grid-column: 1; grid-row: 1; }
  .cart-grid > .cart-actions { grid-column: 1; grid-row: 2; }
  .cart-grid > .fma-cart-recs { grid-column: 1; grid-row: 3; margin-top: 28px; align-self: start; }
  .cart-grid > .cart-summary { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  /* tira dentro de la columna: ya no sangra */
  .cart-grid .fma-cart-recs .fma-mini-recs__list { margin: 0; padding: 0 0 6px; scroll-padding: 0; }
}

/* Columna ancha (≥ 1100 px): rejilla de fichas horizontales, foto + nombre en 2 líneas + precio + «+» */
@media (min-width: 1100px) {
  .cart-grid .fma-cart-recs .fma-mini-recs__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; overflow: visible; padding: 0; }
  .cart-grid .fma-cart-recs .fma-mini-rec { width: auto; flex: none; display: grid; grid-template-columns: 80px minmax(0, 1fr) 44px; grid-template-areas: "m n a" "m p a"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 8px 10px 8px 8px; }
  .cart-grid .fma-cart-recs .fma-mini-rec__media { grid-area: m; margin: 0; }
  .cart-grid .fma-cart-recs .fma-mini-rec__name { grid-area: n; align-self: end; min-height: 0; font-size: .88rem; }
  .cart-grid .fma-cart-recs .fma-mini-rec__foot { display: contents; }
  .cart-grid .fma-cart-recs .fma-mini-rec__price { grid-area: p; align-self: start; font-size: .95rem; }
  .cart-grid .fma-cart-recs .fma-mini-rec__price del { display: inline; margin-right: 6px; }
  .cart-grid .fma-cart-recs .fma-mini-rec__add { grid-area: a; }
}

/* ---------------------------------------------------------------------
   3. Márgenes de cabecera de página (miga + etiqueta + título = «subhero») en escritorio
      Antes: ~112 px entre la cabecera y la miga (80 px del contenedor de page.php + 32 del propio subhero) y ~105 px entre el título
      y el contenido (24 px del subhero + 80 px de la sección). Ahora ~32 px arriba y ~56 px abajo. En móvil no se toca (ya compacto).
   --------------------------------------------------------------------- */
/* page.php: el aire de arriba/abajo ya no va en línea (el estilo en línea quitaba también el margen lateral: las páginas legales salían pegadas al borde) */
.container.fma-page { padding-top: clamp(16px, 3vw, 32px); padding-bottom: clamp(3rem, 6vw, 5rem); }
/* carrito, pago y mi cuenta traen su propia cabecera (subhero): sin aire extra encima */
.container.fma-page--propia { padding: 0; } /* como antes: el subhero y la sección ya llevan su propio margen lateral (wrap-x) */

@media (min-width: 769px) {
  .subhero + .page-section { padding-top: clamp(20px, 2.4vw, 32px); }
}