/* ============================================================
   LIFETIME PHARMA S.A.S — GLOBALS
   Tienda en línea · WordPress + WooCommerce + Elementor
   Prefijo global: ltp-
   ============================================================ */

/* ========== TIPOGRAFÍA ========== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Hind:wght@300;400;500;600;700&display=swap');

/* ===== VARIABLES GLOBALES ===== */

:root {
  /* ---- COLORES DE MARCA (tomados del logo) ---- */
  --ltp-violet: #6D3FD1;          /* morado del corazón */
  --ltp-violet-dark: #522EA8;
  --ltp-violet-light: #8B63E8;
  --ltp-indigo: #4F63D8;          /* azul-violeta intermedio */
  --ltp-teal: #3FC5C9;            /* turquesa de la hélice */
  --ltp-teal-dark: #2AA6AB;
  --ltp-mint: #5FD9C8;

  /* ---- NEUTROS ---- */
  --ltp-navy: #0E0B2E;            /* wordmark "Lifetime" — texto principal */
  --ltp-ink: #1A1740;
  --ltp-slate: #5B6079;           /* texto secundario */
  --ltp-slate-light: #8A90A8;
  --ltp-border: #E3E7F2;
  --ltp-cloud: #F4F6FB;           /* fondo suave */
  --ltp-cloud-deep: #EBEFF9;
  --ltp-white: #FFFFFF;

  /* ---- SEMÁNTICOS ---- */
  --ltp-success: #16A46B;
  --ltp-warning: #E9A63B;
  --ltp-danger: #D9455F;

  /* ---- ALIAS FUNCIONALES ---- */
  --ltp-color-primary: var(--ltp-violet);
  --ltp-color-secondary: var(--ltp-teal);
  --ltp-color-text: var(--ltp-navy);
  --ltp-color-text-muted: var(--ltp-slate);
  --ltp-color-bg: var(--ltp-white);
  --ltp-color-bg-alt: var(--ltp-cloud);

  /* ---- GRADIENTES DE MARCA ---- */
  --ltp-gradient: linear-gradient(135deg, #6D3FD1 0%, #4F63D8 48%, #3FC5C9 100%);
  --ltp-gradient-soft: linear-gradient(135deg, rgba(109, 63, 209, 0.10) 0%, rgba(63, 197, 201, 0.10) 100%);
  --ltp-gradient-dark: linear-gradient(140deg, #17123C 0%, #2A1D6B 45%, #123F63 100%);
  --ltp-gradient-line: linear-gradient(90deg, #6D3FD1 0%, #4F63D8 50%, #3FC5C9 100%);

  /* ---- TIPOGRAFÍA · FAMILIAS ---- */
  --ltp-font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ltp-font-body: 'Hind', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- TIPOGRAFÍA · ESCALA FLUIDA (Sistema A — Tailwind) ---- */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem); /* 12 → 14 */
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);     /* 14 → 16 */
  --text-base: clamp(1rem,     0.95rem + 0.28vw, 1.125rem); /* 16 → 18 */
  --text-lg:   clamp(1.125rem, 1rem    + 0.56vw, 1.5rem);   /* 18 → 24 */
  --text-xl:   clamp(1.25rem,  1.1rem  + 0.83vw, 1.875rem); /* 20 → 30 */
  --text-2xl:  clamp(1.5rem,   1.25rem + 1.39vw, 2.25rem);  /* 24 → 36 */
  --text-3xl:  clamp(1.875rem, 1.5rem  + 2.08vw, 3rem);     /* 30 → 48 */
  --text-4xl:  clamp(2.25rem,  1.75rem + 2.78vw, 3.75rem);  /* 36 → 60 */
  --text-5xl:  clamp(3rem,     2.25rem + 4.17vw, 4.5rem);   /* 48 → 72 */

  /* ---- TIPOGRAFÍA · ASIGNACIÓN ---- */
  --h1: var(--text-5xl);
  --h2: var(--text-4xl);
  --h3: var(--text-3xl);
  --h4: var(--text-2xl);
  --h5: var(--text-xl);
  --h6: var(--text-lg);
  --ltp-font-size-body: var(--text-base);
  --ltp-font-size-body-sm: var(--text-sm);
  --ltp-font-size-caption: var(--text-xs);

  /* ---- TIPOGRAFÍA · PESOS ---- */
  --ltp-fw-light: 300;
  --ltp-fw-regular: 400;
  --ltp-fw-medium: 500;
  --ltp-fw-semibold: 600;
  --ltp-fw-bold: 700;
  --ltp-fw-extrabold: 800;

  /* ---- TIPOGRAFÍA · LINE HEIGHT ---- */
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  /* ---- ESPACIADO ---- */
  --ltp-space-2xs: 0.25rem;
  --ltp-space-xs: 0.5rem;
  --ltp-space-sm: 1rem;
  --ltp-space-md: 1.5rem;
  --ltp-space-lg: 2rem;
  --ltp-space-lg-plus: 2.5rem;
  --ltp-space-xl: 3rem;
  --ltp-space-2xl: 4rem;
  --ltp-space-3xl: 6rem;

  /* ---- PADDING VERTICAL DE SECCIÓN ---- */
  --ltp-section-py: clamp(3rem, 1.5rem + 5vw, 6rem);
  --ltp-section-py-sm: clamp(2rem, 1rem + 3.5vw, 4rem);

  /* ---- RADIOS ---- */
  --ltp-radius-sm: 8px;
  --ltp-radius: 14px;
  --ltp-radius-lg: 22px;
  --ltp-radius-pill: 999px;

  /* ---- SOMBRAS ---- */
  --ltp-shadow-sm: 0 2px 8px rgba(14, 11, 46, 0.06);
  --ltp-shadow: 0 8px 26px rgba(14, 11, 46, 0.08);
  --ltp-shadow-lg: 0 18px 48px rgba(14, 11, 46, 0.12);
  --ltp-shadow-brand: 0 12px 30px rgba(109, 63, 209, 0.24);

  /* ---- TRANSICIONES ---- */
  --ltp-transition: 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- LAYOUT ---- */
  --ltp-max-width: 1920px;      /* ancho máximo de la sección */
  --ltp-content-width: 1280px;  /* ancho máximo del contenido interno */
  --ltp-content-narrow: 940px;

  /* ---- BREAKPOINTS (referencia; las media queries usan valores literales) ---- */
  --ltp-mobile-max: 767px;
  --ltp-tablet-min: 768px;
  --ltp-tablet-max: 1024px;
  --ltp-desktop-min: 1025px;

  /* ---- NAVBAR ----
     Fuente única de verdad para la altura del navbar. Se declara en :root
     (no en .ltp-navbar-wrap) porque .ltp-navbar__spacer es HERMANO del wrap,
     no hijo: una variable CSS solo se hereda hacia descendientes, así que
     desde el wrap el spacer nunca la vería y su altura colapsaría a 0. */
  --ltp-nav-h: 92px;
}

@media (max-width: 1024px) {
  :root {
    --ltp-nav-h: 72px;
  }
}

/* ===== RESET Y BASE ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--ltp-white);
}

body {
  font-family: var(--ltp-font-body);
  font-size: var(--ltp-font-size-body);
  font-weight: var(--ltp-fw-regular);
  color: var(--ltp-color-text);
  line-height: var(--leading-normal);
  background-color: var(--ltp-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

/* ===== CONTENEDOR DE SECCIONES ===== */

.ltp-section {
  width: 100%;
  max-width: var(--ltp-max-width);
  margin: 0 auto;
  position: relative;
}

.ltp-section__content {
  width: 100%;
  max-width: var(--ltp-content-width);
  margin: 0 auto;
  padding: 0 var(--ltp-space-lg);
}

.ltp-section__content--wide {
  max-width: 1560px;
}

.ltp-section__content--narrow {
  max-width: var(--ltp-content-narrow);
}

@media (max-width: 767px) {
  .ltp-section__content {
    padding: 0 var(--ltp-space-md);
  }
}

/* ===== TIPOGRAFÍA REUTILIZABLE ===== */

.ltp-h1,
.ltp-h2,
.ltp-h3,
.ltp-h4,
.ltp-h5 {
  font-family: var(--ltp-font-heading);
  color: var(--ltp-navy);
  letter-spacing: -0.02em;
}

.ltp-h1 { font-size: var(--h1); font-weight: var(--ltp-fw-extrabold); line-height: var(--leading-tight); }
.ltp-h2 { font-size: var(--h2); font-weight: var(--ltp-fw-extrabold); line-height: var(--leading-tight); }
.ltp-h3 { font-size: var(--h3); font-weight: var(--ltp-fw-bold); line-height: var(--leading-snug); }
.ltp-h4 { font-size: var(--h4); font-weight: var(--ltp-fw-bold); line-height: var(--leading-snug); }
.ltp-h5 { font-size: var(--h5); font-weight: var(--ltp-fw-semibold); line-height: var(--leading-normal); }

.ltp-body {
  font-family: var(--ltp-font-body);
  font-size: var(--ltp-font-size-body);
  font-weight: var(--ltp-fw-regular);
  line-height: var(--leading-normal);
  color: var(--ltp-slate);
}

.ltp-small {
  font-family: var(--ltp-font-body);
  font-size: var(--ltp-font-size-caption);
  line-height: var(--leading-normal);
  color: var(--ltp-slate);
}

/* Texto con gradiente de marca */
.ltp-text-gradient {
  background: var(--ltp-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== EYEBROW / KICKER ===== */

.ltp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ltp-font-heading);
  font-size: var(--text-xs);
  font-weight: var(--ltp-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ltp-violet);
}

.ltp-eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--ltp-gradient-line);
  flex-shrink: 0;
}

.ltp-eyebrow--light { color: var(--ltp-mint); }

/* ===== BOTONES ===== */

.ltp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border: none;
  border-radius: var(--ltp-radius-pill);
  font-family: var(--ltp-font-heading);
  font-size: var(--text-sm);
  font-weight: var(--ltp-fw-bold);
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform var(--ltp-transition), box-shadow var(--ltp-transition),
              background-color var(--ltp-transition), color var(--ltp-transition),
              border-color var(--ltp-transition);
}

.ltp-btn--primary {
  background: var(--ltp-gradient);
  color: var(--ltp-white) !important;
  box-shadow: var(--ltp-shadow-brand);
}

.ltp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(109, 63, 209, 0.34);
  color: var(--ltp-white) !important;
}

.ltp-btn--secondary {
  background: var(--ltp-white);
  color: var(--ltp-navy) !important;
  border: 1.5px solid var(--ltp-border);
}

.ltp-btn--secondary:hover {
  border-color: var(--ltp-violet);
  color: var(--ltp-violet) !important;
  transform: translateY(-2px);
  box-shadow: var(--ltp-shadow);
}

.ltp-btn--ghost {
  background: transparent;
  color: var(--ltp-white) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.ltp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--ltp-white);
  color: var(--ltp-white) !important;
}

.ltp-btn--sm {
  padding: 0.65rem 1.3rem;
  font-size: var(--text-xs);
}

.ltp-btn--block {
  width: 100%;
}

.ltp-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ===== TARJETA BASE ===== */

.ltp-card {
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  box-shadow: var(--ltp-shadow-sm);
  transition: transform var(--ltp-transition), box-shadow var(--ltp-transition),
              border-color var(--ltp-transition);
}

.ltp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ltp-shadow-lg);
  border-color: rgba(109, 63, 209, 0.32);
}

/* ===== BADGES / PÍLDORAS ===== */

.ltp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--ltp-radius-pill);
  font-family: var(--ltp-font-heading);
  font-size: var(--text-xs);
  font-weight: var(--ltp-fw-semibold);
  line-height: 1.2;
  background: var(--ltp-cloud);
  color: var(--ltp-slate);
}

.ltp-badge--brand {
  background: rgba(109, 63, 209, 0.10);
  color: var(--ltp-violet);
}

.ltp-badge--teal {
  background: rgba(63, 197, 201, 0.14);
  color: var(--ltp-teal-dark);
}

.ltp-badge--success {
  background: rgba(22, 164, 107, 0.12);
  color: var(--ltp-success);
}

/* ===== DIVISORES ===== */

.ltp-divider {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--ltp-border);
}

.ltp-divider--gradient {
  height: 2px;
  border-radius: 2px;
  background: var(--ltp-gradient-line);
}

.ltp-divider--vertical {
  width: 1px;
  height: 100%;
  background: var(--ltp-border);
}

/* ===== ANIMACIONES REUTILIZABLES =====
   Los elementos con .ltp-reveal parten ocultos y globals.js les agrega
   .ltp-is-visible al entrar en viewport. El delay se controla con
   --ltp-delay en el style inline del elemento.

   ⚠️ El estado oculto cuelga de .ltp-js (clase que globals.js pone en <html>
   al arrancar). Sin JS —o si el script muere antes— la regla nunca aplica y
   el contenido se ve normalmente. Ocultar por defecto sería apostar la
   visibilidad de TODA la página a que el JS corra. */

.ltp-js .ltp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
  transition-delay: var(--ltp-delay, 0s);
}

.ltp-js .ltp-reveal.ltp-is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ltp-js .ltp-reveal--left { transform: translateX(-24px); }
.ltp-js .ltp-reveal--right { transform: translateX(24px); }
.ltp-js .ltp-reveal--left.ltp-is-visible,
.ltp-js .ltp-reveal--right.ltp-is-visible { transform: translateX(0); }

.ltp-js .ltp-reveal--scale { transform: scale(0.96); }
.ltp-js .ltp-reveal--scale.ltp-is-visible { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .ltp-js .ltp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@keyframes ltpFadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ltpFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes ltpPulseRing {
  0% { transform: scale(0.9); opacity: 0.6; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ============================================================
   COMPONENTES COMPARTIDOS
   ------------------------------------------------------------
   Estos bloques viven SOLO acá (no se duplican en cada sección)
   porque el mismo marcado lo generan dos fuentes distintas:
     · las secciones HTML pegadas en Elementor, y
     · los shortcodes PHP de wordpress/lifetime-pharma-functions.php
       (que también pintan las páginas nativas de WooCommerce:
       tienda, categoría, resultados de búsqueda).
   Mantenerlos en un solo lugar evita que las dos copias se separen.
   ============================================================ */

/* ===== TARJETA DE PRODUCTO ===== */

.ltp-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* En las páginas nativas de WooCommerce (tienda, categoría, búsqueda) el
   bucle envuelve cada producto en un <li> que no podemos eliminar sin
   sobrescribir plantillas del plugin. Ese <li> pasa a ser el ítem de la
   grilla, así que se le pide que estire la tarjeta a toda su altura —
   sin esto, las tarjetas de una misma fila quedan de alturas distintas.
   También se neutralizan los anchos en porcentaje que WooCommerce
   inyecta con sus clases columns-N, que pelean con la grilla. */
.ltp-products-grid > li.product {
  display: flex;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

.ltp-products-grid > li.product::before,
.ltp-products-grid > li.product::after { content: none; }

.ltp-products-grid > li.product > .ltp-product-card { flex: 1; }

.ltp-product-card {
  display: flex;
  flex-direction: column;
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  overflow: hidden;
  transition: transform var(--ltp-transition), box-shadow var(--ltp-transition),
              border-color var(--ltp-transition);
}

.ltp-product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(109, 63, 209, 0.28);
  box-shadow: 0 20px 44px rgba(14, 11, 46, 0.11);
}

.ltp-product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ltp-cloud);
  overflow: hidden;
}

.ltp-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  transition: transform 0.45s var(--ltp-transition);
}

.ltp-product-card:hover .ltp-product-card__media img { transform: scale(1.06); }

/* Marca de agua cuando el producto no tiene imagen cargada */
.ltp-product-card__media--empty {
  display: grid;
  place-items: center;
  background: var(--ltp-gradient-soft);
  color: var(--ltp-violet);
}

.ltp-product-card__media--empty svg { width: 46px; height: 46px; opacity: 0.5; }

.ltp-product-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--ltp-radius-pill);
  font-family: var(--ltp-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  background: rgba(22, 164, 107, 0.14);
  color: var(--ltp-success);
  backdrop-filter: blur(4px);
}

.ltp-product-card__badge--out {
  background: rgba(217, 69, 95, 0.12);
  color: var(--ltp-danger);
}

.ltp-product-card__badge--sale {
  left: auto;
  right: 0.75rem;
  background: var(--ltp-gradient);
  color: var(--ltp-white);
}

.ltp-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.15rem 1.25rem 1.25rem;
}

.ltp-product-card__cat {
  font-family: var(--ltp-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ltp-violet);
  margin-bottom: 0.5rem;
}

.ltp-product-card__title {
  font-family: var(--ltp-font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}

.ltp-product-card__title a {
  color: var(--ltp-navy) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.ltp-product-card__title a:hover { color: var(--ltp-violet) !important; }

.ltp-product-card__meta {
  font-family: var(--ltp-font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ltp-slate);
  margin: 0 0 1rem;
}

.ltp-product-card__foot {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ltp-border);
}

.ltp-product-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-family: var(--ltp-font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ltp-navy);
}

.ltp-product-card__price em,
.ltp-product-card__price .ltp-tax {
  font-family: var(--ltp-font-body);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  color: var(--ltp-slate-light);
}

.ltp-product-card__price del {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ltp-slate-light);
}

.ltp-product-card__price ins { text-decoration: none; }

/* Producto sin precio público → "Precio a cotizar" */
.ltp-product-card__price--quote {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ltp-violet);
}

/* Sin sesión: ni precio ni stock, solo la invitación a iniciar sesión.
   Reutiliza el filtro woocommerce_get_price_html (.ltp-price-oculto) como
   red de seguridad general, y esta clase para el estado explícito que
   pinta ltp_tarjeta_producto() en la tarjeta. */
.ltp-product-card__price--locked,
.ltp-price-oculto {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ltp-slate);
}

.ltp-product-card__price--locked svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ltp-violet);
}

.ltp-product-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

/* ⚠️ SIN flex:1 a propósito: .ltp-product-card__actions es flex-direction:
   column (el botón nunca comparte fila con otro botón, quedó así de
   cuando "Agregar" y "Cotizar" sí convivían lado a lado). flex:1 en un
   contenedor column fija flex-basis:0%, que le gana a "height: 42px" para
   el tamaño del eje principal (vertical) — el botón terminaba con solo
   ~13px de alto en vez de 42px, mucho más bajo que el pillstep de al
   lado. Sin flex:1, height:42px se respeta y width:100% ya lo da
   align-items:stretch (el default) del contenedor column. */
.ltp-product-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 42px;
  padding: 0 0.85rem;
  border: none;
  border-radius: var(--ltp-radius-pill);
  font-family: var(--ltp-font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform var(--ltp-transition), box-shadow var(--ltp-transition),
              background-color var(--ltp-transition), border-color var(--ltp-transition);
}

.ltp-product-card__btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.ltp-product-card__btn--cart {
  background: var(--ltp-gradient);
  color: var(--ltp-white) !important;
  box-shadow: 0 6px 16px rgba(109, 63, 209, 0.22);
}

.ltp-product-card__btn--cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(109, 63, 209, 0.32);
  color: var(--ltp-white) !important;
}

/* Degradado, como .ltp-product-card__btn--cart: "Cotizar" siempre aparece
   solo (nunca junto a "Agregar" — ver ltp_bloque_cotizacion_producto() en
   lifetime-pharma-functions.php), así que es tan "principal" como
   Agregar/Confirmar en su propio contexto (sin sesión, es la ÚNICA acción
   disponible en toda la tarjeta). */
.ltp-product-card__btn--quote {
  background: var(--ltp-gradient);
  color: var(--ltp-white) !important;
  box-shadow: 0 6px 16px rgba(109, 63, 209, 0.22);
}

.ltp-product-card__btn--quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(109, 63, 209, 0.32);
  color: var(--ltp-white) !important;
}

/* El botón de la tarjeta es un enlace a la ficha: no hay petición AJAX
   que esperar, así que ya no hay estados "añadiendo…"/"añadido". */

/* ── Vista rápida (botón sobre la imagen) ── */
.ltp-product-card__quickview {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 34px;
  padding: 0 0.85rem;
  border: none;
  border-radius: var(--ltp-radius-pill);
  background: rgba(14, 11, 46, 0.82);
  color: var(--ltp-white) !important;
  font-family: var(--ltp-font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.22s ease;
}

.ltp-product-card__quickview svg { width: 15px; height: 15px; flex-shrink: 0; }

.ltp-product-card:hover .ltp-product-card__quickview,
.ltp-product-card__quickview:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.ltp-product-card__quickview:hover { background: var(--ltp-violet); }

/* En pantallas táctiles no hay hover: se deja siempre visible */
@media (hover: none) {
  .ltp-product-card__quickview { opacity: 1; transform: none; }
}

/* ── Categoría + marca ── */
.ltp-product-card__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ltp-product-card__cat { margin-bottom: 0; }

.ltp-product-card__brand {
  font-family: var(--ltp-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: var(--ltp-radius-pill);
  background: var(--ltp-cloud);
  color: var(--ltp-slate);
}

/* El selector de variante y el control de cantidad +/− vivían acá.
 * Se quitaron junto con su marcado: la tarjeta ahora lleva un solo
 * enlace a la ficha, y elegir talla y cantidad ocurre en la tabla de
 * opciones de la ficha o de la vista rápida (.ltp-vartable, en
 * theme.css), que deja pedir varias tallas a la vez. */

@media (max-width: 480px) {
  .ltp-products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.85rem; }
  .ltp-product-card__body { padding: 0.9rem 0.9rem 1rem; }
}

/* ===== CAMPO TRAMPA ANTI-BOTS =====
   Lo pinta inc/quote-form.php y NO debe verse: una persona que lo lee se
   queda pensando qué es "No llenar este campo" en mitad del formulario.

   Se saca de la pantalla en vez de usar display:none. Un buen número de
   bots ignoran los campos ocultos con display/visibility justamente
   porque saben que suelen ser trampas; en cambio rellenan lo que está
   en el DOM y "existe". Fuera de pantalla sigue siendo invisible para
   quien navega, incluido quien usa el teclado (tabindex="-1" en el
   input) y quien usa lector de pantalla (aria-hidden en el contenedor). */
.ltp-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== VISTA RÁPIDA — modal compartido (lo crea globals.js al primer clic) ===== */

.ltp-quickview {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.ltp-quickview.ltp-is-open { display: flex; }

.ltp-quickview__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 11, 46, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.ltp-quickview__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Más ancho que antes: el cuerpo ya no lleva un botón, lleva la tabla
     de opciones con precio, disponibilidad y cantidad por talla. */
  max-width: 940px;
  max-height: min(760px, 92vh);
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ltp-white);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(14, 11, 46, 0.35);
  animation: ltp-quickview-in 0.25s ease;
}

@keyframes ltp-quickview-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.ltp-quickview__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(14, 11, 46, 0.06);
  color: var(--ltp-navy);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.ltp-quickview__close:hover { background: rgba(14, 11, 46, 0.12); }

.ltp-quickview__media {
  position: relative;
  background: var(--ltp-cloud);
  display: grid;
  place-items: center;
  min-height: 260px;
}

.ltp-quickview__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2rem;
}

.ltp-quickview__media svg { width: 64px; height: 64px; color: var(--ltp-violet); opacity: 0.5; }

.ltp-quickview__body {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  display: flex;
  flex-direction: column;
}

.ltp-quickview__title {
  font-family: var(--ltp-font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ltp-navy);
  margin: 0 0 0.6rem;
}

.ltp-quickview__title a { color: inherit !important; text-decoration: none !important; }
.ltp-quickview__title a:hover { color: var(--ltp-violet) !important; }

.ltp-quickview__meta {
  font-family: var(--ltp-font-body);
  font-size: 0.88rem;
  color: var(--ltp-slate);
  margin: 0 0 0.75rem;
}

/* Hueco donde entra la tabla de opciones que llega del servidor. La
   tabla trae sus propios estilos (.ltp-vartable, en theme.css); acá solo
   se le da sitio y se la deja desplazarse a lo ancho en pantallas
   estrechas, en vez de desbordar el diálogo. */
.ltp-quickview__options {
  margin-top: 0.9rem;
  overflow-x: auto;
}

.ltp-quickview__options .ltp-vartable {
  margin: 0;
}

/* Dentro del modal el encabezado de la tabla sobra: el título del
   producto ya está arriba y el espacio vertical es escaso. */
.ltp-quickview__options .ltp-vartable__title {
  font-size: 1rem;
}

.ltp-quickview__loading {
  margin: 0.9rem 0 0;
  font-family: var(--ltp-font-body);
  font-size: 0.85rem;
  color: var(--ltp-slate);
}

.ltp-quickview__link {
  margin-top: 0.7rem;
  font-family: var(--ltp-font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ltp-violet) !important;
  text-decoration: none !important;
}

.ltp-quickview__link:hover { text-decoration: underline !important; }

@media (max-width: 700px) {
  .ltp-quickview__dialog { grid-template-columns: 1fr; max-height: 92vh; }
  .ltp-quickview__media { min-height: 180px; }
}

/* ===== CARRITO DE COTIZACIÓN / CARRITO REAL — PANEL LATERAL COMPARTIDO
   ─────────────────────────────────────────────────────────────────────
   Un solo panel lateral (.ltp-qcart) reutilizado por dos flujos que NUNCA
   se activan a la vez (ver ltp_shortcode_navbar_accion() en
   lifetime-pharma-functions.php):
     · Sin sesión → carrito de COTIZACIÓN (sessionStorage, sin precios, sin
       WooCommerce). Se abre desde el ícono de lista del navbar.
     · Con sesión → carrito REAL de WooCommerce (Store API). Se abre desde
       el ícono de carrito del navbar.
   Lo abre/pinta window.ltpDrawer (definido en globals.js). ===== */

.ltp-qcart {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
}

.ltp-qcart.ltp-is-open { display: block; }

/* ⚠️ NO top:0 — se probó y el título "Su carrito"/"Carrito de cotización"
   terminaba tapado DETRÁS del navbar (que tiene z-index mucho más alto,
   999999 contra 900 acá): el navbar se pinta encima de esa franja, no la
   "recorta" del layout del panel, así que su propio contenido (cabecera,
   a veces el primer ítem) quedaba invisible ahí atrás. El panel arranca
   justo donde termina el navbar real — --ltp-nav-total-h la mide y
   publica global-navbar.html — y ltpOpenDrawer() (ver globals.js) hace
   reaparecer el navbar si estaba escondido por scroll ANTES de abrir el
   panel, así que esta medida es confiable en el momento de abrir. */
.ltp-qcart__backdrop {
  position: absolute;
  top: var(--ltp-nav-total-h, calc(var(--ltp-nav-h, 92px) + var(--ltp-topbar-h, 40px)));
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(14, 11, 46, 0.5);
}

.ltp-qcart__panel {
  position: absolute;
  top: var(--ltp-nav-total-h, calc(var(--ltp-nav-h, 92px) + var(--ltp-topbar-h, 40px)));
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--ltp-white);
  box-shadow: -20px 0 50px rgba(14, 11, 46, 0.2);
  animation: ltp-qcart-in 0.28s ease;
}

@keyframes ltp-qcart-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.ltp-qcart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.15rem;
  border-bottom: 1px solid var(--ltp-border);
}

.ltp-qcart__head h2 {
  font-family: var(--ltp-font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ltp-navy);
  margin: 0;
}

.ltp-qcart__head p {
  font-family: var(--ltp-font-body);
  font-size: 0.8rem;
  color: var(--ltp-slate);
  margin: 0.2rem 0 0;
}

.ltp-qcart__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(14, 11, 46, 0.06);
  color: var(--ltp-navy);
  cursor: pointer;
}

.ltp-qcart__list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.5rem;
}

.ltp-qcart__empty {
  padding: 2.5rem 0.5rem;
  text-align: center;
  font-family: var(--ltp-font-body);
  font-size: 0.9rem;
  color: var(--ltp-slate);
}

.ltp-qcart__item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--ltp-border);
}

.ltp-qcart__item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ltp-qcart__item-name {
  min-width: 0;
  font-family: var(--ltp-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ltp-navy) !important;
  line-height: 1.35;
  text-decoration: none !important;
}

a.ltp-qcart__item-name:hover { color: var(--ltp-violet) !important; text-decoration: underline !important; }

.ltp-qcart__item-price {
  flex-shrink: 0;
  font-family: var(--ltp-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ltp-navy);
}

/* La presentación comprada (talla, tamaño, con/sin talco). Va destacada
   y NO se recorta: es lo único que distingue dos filas del mismo producto
   —tres tallas de guante se ven idénticas sin ella—, así que recortarla
   dejaría al comprador sin saber qué tiene en el carrito. */
.ltp-qcart__item-variant {
  margin: 0.3rem 0 0;
  font-family: var(--ltp-font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ltp-violet);
}

.ltp-qcart__item-desc {
  margin: 0.35rem 0 0;
  font-family: var(--ltp-font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ltp-slate);
  /* Máximo 2 líneas, con puntos suspensivos — el texto ya viene truncado
     desde JS, esto es un respaldo por si la fuente/ancho lo desborda. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ltp-qcart__item-meta {
  font-family: var(--ltp-font-body);
  font-size: 0.82rem;
  color: var(--ltp-slate);
  margin: 0.35rem 0 0;
}

.ltp-qcart__item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.7rem;
}

/* Stepper de cantidad compacto, dentro de la fila del panel lateral —
   funciona igual en el carrito real y en el de cotización. */
.ltp-qcart__item-qty {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 32px;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius-pill);
  overflow: hidden;
}

.ltp-qcart__item-qty button {
  width: 26px;
  height: 100%;
  border: none;
  background: var(--ltp-cloud);
  color: var(--ltp-navy);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.ltp-qcart__item-qty button:hover { background: var(--ltp-border); }

/* Mientras la fila espera la respuesta de una petición anterior (ver el
   candado rowBusy de ltpBuildDrawerRow en globals.js) — evita que un
   segundo clic se vea clickeable mientras en realidad se está ignorando. */
.ltp-qcart__item-qty button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ltp-qcart__item-qty span {
  min-width: 22px;
  text-align: center;
  font-family: var(--ltp-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ltp-navy);
}

/* Papelera SIEMPRE separada del stepper (ver el comentario de
   ltpBuildDrawerRow en globals.js) — quita el producto entero sea cual
   sea la cantidad, sin tener que bajarla primero. */
.ltp-qcart__item-remove {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ltp-border);
  border-radius: 50%;
  background: var(--ltp-white);
  color: var(--ltp-slate);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ltp-qcart__item-remove svg { width: 15px; height: 15px; }

.ltp-qcart__item-remove:hover { border-color: var(--ltp-danger); color: var(--ltp-danger); }

.ltp-qcart__item-remove:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ltp-qcart__foot {
  padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ltp-border);
}

.ltp-qcart__foot-note {
  font-family: var(--ltp-font-body);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ltp-slate-light);
  margin: 0 0 0.9rem;
}

/* Subtotal — solo en el carrito REAL (con sesión): ahí sí hay precios, a
   diferencia del carrito de cotización. */
.ltp-qcart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--ltp-border);
  font-family: var(--ltp-font-heading);
}

.ltp-qcart__subtotal span:first-child {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ltp-slate);
}

.ltp-qcart__subtotal span:last-child {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ltp-navy);
}

.ltp-qcart__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--ltp-radius-pill);
  background: var(--ltp-gradient);
  color: var(--ltp-white) !important;
  text-decoration: none !important;
  font-family: var(--ltp-font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.ltp-qcart__submit:hover { color: var(--ltp-white) !important; }
.ltp-qcart__submit.ltp-is-disabled { opacity: 0.5; pointer-events: none; }

.ltp-qcart__secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 46px;
  margin-top: 0.6rem;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius-pill);
  background: var(--ltp-white);
  color: var(--ltp-navy) !important;
  text-decoration: none !important;
  text-align: center;
  font-family: var(--ltp-font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ltp-qcart__secondary:hover { border-color: var(--ltp-violet); color: var(--ltp-violet) !important; }

.ltp-qcart__clear {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  background: none;
  border: none;
  font-family: var(--ltp-font-body);
  font-size: 0.8rem;
  color: var(--ltp-slate);
  text-align: center;
  cursor: pointer;
}

.ltp-qcart__clear:hover { color: var(--ltp-danger); }

@media (max-width: 480px) {
  .ltp-qcart__panel { width: 100%; }
}

/* ===== TARJETA DE CATEGORÍA (salida del shortcode [ltp_categorias]) ===== */

.ltp-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.15rem;
}

.ltp-cat-tile {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  text-decoration: none !important;
  transition: transform var(--ltp-transition), box-shadow var(--ltp-transition),
              border-color var(--ltp-transition);
}

.ltp-cat-tile:hover {
  transform: translateY(-5px);
  border-color: rgba(109, 63, 209, 0.3);
  box-shadow: 0 20px 44px rgba(14, 11, 46, 0.11);
}

.ltp-cat-tile__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  border-radius: var(--ltp-radius);
  background: var(--ltp-cloud);
  margin-bottom: 1.1rem;
}

.ltp-cat-tile__title {
  font-family: var(--ltp-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ltp-navy);
  margin: 0 0 0.4rem;
}

.ltp-cat-tile__count {
  font-family: var(--ltp-font-body);
  font-size: 0.82rem;
  color: var(--ltp-slate);
  margin: 0;
}

/* ===== FORMULARIOS ===== */

.ltp-field { display: flex; flex-direction: column; gap: 0.4rem; }

.ltp-field__label {
  font-family: var(--ltp-font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ltp-navy);
}

.ltp-field__label .ltp-req { color: var(--ltp-danger); }

.ltp-field input[type="text"],
.ltp-field input[type="email"],
.ltp-field input[type="tel"],
.ltp-field input[type="number"],
.ltp-field input[type="url"],
.ltp-field select,
.ltp-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius-sm);
  background: var(--ltp-white);
  font-family: var(--ltp-font-body);
  font-size: 0.95rem;
  color: var(--ltp-navy);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ltp-field input:focus,
.ltp-field select:focus,
.ltp-field textarea:focus {
  outline: none;
  border-color: var(--ltp-violet);
  box-shadow: 0 0 0 3px rgba(109, 63, 209, 0.12);
}

.ltp-field textarea { min-height: 130px; resize: vertical; }

.ltp-field input::placeholder,
.ltp-field textarea::placeholder { color: var(--ltp-slate-light); }

.ltp-field__help {
  font-family: var(--ltp-font-body);
  font-size: 0.78rem;
  color: var(--ltp-slate-light);
}

.ltp-field__error {
  font-family: var(--ltp-font-body);
  font-size: 0.78rem;
  color: var(--ltp-danger);
}

.ltp-field--invalid input,
.ltp-field--invalid select,
.ltp-field--invalid textarea { border-color: var(--ltp-danger); }

/* ===== FORMULARIO NATIVO DE CARRITO (ficha de producto) =====
   La ficha reutiliza woocommerce_template_single_add_to_cart() en vez de
   reimplementar el carrito: así conserva variaciones, validación de stock
   y el nonce del plugin. Lo que sigue es solo la capa visual sobre ese
   marcado (.quantity, .single_add_to_cart_button, .variations…). */

.ltp-pdp__wc-cart form.cart {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
}

/* Los productos variables necesitan la tabla de opciones a todo el ancho */
.ltp-pdp__wc-cart form.variations_form { display: block; }

.ltp-pdp__wc-cart table.variations {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: collapse;
}

.ltp-pdp__wc-cart table.variations th,
.ltp-pdp__wc-cart table.variations td {
  padding: 0.4rem 0;
  text-align: left;
  vertical-align: middle;
}

.ltp-pdp__wc-cart table.variations th {
  width: 30%;
  font-family: var(--ltp-font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ltp-navy);
}

.ltp-pdp__wc-cart table.variations select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius-sm);
  background: var(--ltp-white);
  font-family: var(--ltp-font-body);
  font-size: 0.92rem;
  color: var(--ltp-navy);
}

.ltp-pdp__wc-cart .woocommerce-variation-price {
  margin-bottom: 1rem;
  font-family: var(--ltp-font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ltp-navy);
}

.ltp-pdp__wc-cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Selector de cantidad */
.ltp-pdp__wc-cart .quantity {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius-pill);
  overflow: hidden;
  background: var(--ltp-white);
}

.ltp-pdp__wc-cart .quantity input.qty {
  width: 84px;
  height: 54px;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  font-family: var(--ltp-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ltp-navy);
}

/* Botón principal — mismo lenguaje que .ltp-pdp__add de la maqueta.
   Especificidad alta porque WooCommerce estiliza .button con
   "!important" en algunos temas. */
.ltp-pdp__wc-cart button.single_add_to_cart_button,
.ltp-pdp__wc-cart .single_add_to_cart_button.button {
  flex: 1;
  min-width: 200px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 54px;
  padding: 0 1.75rem !important;
  border: none !important;
  border-radius: var(--ltp-radius-pill) !important;
  background: var(--ltp-gradient) !important;
  color: var(--ltp-white) !important;
  font-family: var(--ltp-font-heading) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(109, 63, 209, 0.3);
  transition: transform var(--ltp-transition), box-shadow var(--ltp-transition);
}

.ltp-pdp__wc-cart button.single_add_to_cart_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(109, 63, 209, 0.4);
}

.ltp-pdp__wc-cart button.single_add_to_cart_button.disabled,
.ltp-pdp__wc-cart button.single_add_to_cart_button:disabled {
  background: var(--ltp-border) !important;
  color: var(--ltp-slate-light) !important;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.ltp-pdp__wc-cart .reset_variations {
  font-family: var(--ltp-font-body);
  font-size: 0.82rem;
  color: var(--ltp-slate);
}

@media (max-width: 560px) {
  .ltp-pdp__wc-cart .quantity { width: 100%; }
  .ltp-pdp__wc-cart .quantity input.qty { flex: 1; width: auto; }
  .ltp-pdp__wc-cart button.single_add_to_cart_button { flex: 1 1 100%; }
}

/* ===== MIGAS DE PAN ===== */

.ltp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-family: var(--ltp-font-body);
  font-size: 0.82rem;
  color: var(--ltp-slate);
}

.ltp-breadcrumb a {
  color: var(--ltp-slate) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.ltp-breadcrumb a:hover { color: var(--ltp-violet) !important; }

.ltp-breadcrumb__sep { color: var(--ltp-slate-light); }
.ltp-breadcrumb__current { color: var(--ltp-navy); font-weight: 500; }

/* ===== SLOT WOOCOMMERCE =====
   Contenedor que alterna entre el shortcode procesado y la demo estática.
   El script de cada sección se encarga de eliminar la que sobre. */

.ltp-slot { display: block; }
.ltp-slot__demo { display: block; }

/* ===== PÁGINAS LEGALES =====
   Las cuatro páginas legales (privacidad, términos, garantías, envíos)
   comparten exactamente la misma estructura, así que su CSS vive acá y no
   repetido cuatro veces dentro de cada sección. */

.ltp-legal {
  background: var(--ltp-white);
  padding: clamp(2rem, 1.25rem + 3vw, 3rem) 0 var(--ltp-section-py);
}

.ltp-legal__crumbs { margin-bottom: 1.75rem; }

.ltp-legal__header {
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--ltp-border);
}

.ltp-legal__title {
  font-family: var(--ltp-font-heading);
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--ltp-navy);
  margin: 0;
}

.ltp-legal__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin-top: 1rem;
}

.ltp-legal__updated {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--ltp-radius-pill);
  background: var(--ltp-cloud);
  font-family: var(--ltp-font-body);
  font-size: 0.8rem;
  color: var(--ltp-slate);
}

.ltp-legal__updated svg { width: 14px; height: 14px; color: var(--ltp-violet); }

.ltp-legal__entity {
  font-family: var(--ltp-font-body);
  font-size: 0.85rem;
  color: var(--ltp-slate);
}

/* ── Cuerpo con índice lateral ── */
.ltp-legal__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}

.ltp-legal__toc {
  position: sticky;
  top: calc(var(--ltp-nav-h) + 2rem);
  padding: 1.4rem;
  border-radius: var(--ltp-radius-lg);
  background: var(--ltp-cloud);
  border: 1px solid var(--ltp-border);
}

.ltp-legal__toc-title {
  font-family: var(--ltp-font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ltp-slate-light);
  margin: 0 0 0.9rem;
}

.ltp-legal__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ltp-toc;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ltp-legal__toc a {
  display: block;
  font-family: var(--ltp-font-body);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ltp-slate) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.ltp-legal__toc a:hover { color: var(--ltp-violet) !important; }

/* ── Contenido ── */
.ltp-legal__body { max-width: 74ch; }

.ltp-legal__body h2 {
  font-family: var(--ltp-font-heading);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ltp-navy);
  margin: 2.5rem 0 0.9rem;
  /* Compensa el navbar fijo al saltar desde el índice */
  scroll-margin-top: calc(var(--ltp-nav-h) + 1.5rem);
}

.ltp-legal__body h2:first-child { margin-top: 0; }

.ltp-legal__body h3 {
  font-family: var(--ltp-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ltp-navy);
  margin: 1.75rem 0 0.6rem;
}

.ltp-legal__body p,
.ltp-legal__body li {
  font-family: var(--ltp-font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--ltp-slate);
}

.ltp-legal__body p { margin: 0 0 1.1rem; }

.ltp-legal__body ul,
.ltp-legal__body ol {
  margin: 0 0 1.35rem;
  padding-left: 1.35rem;
}

.ltp-legal__body li { margin-bottom: 0.55rem; }

.ltp-legal__body a { color: var(--ltp-violet); }

.ltp-legal__body strong { color: var(--ltp-navy); font-weight: 600; }

/* Bloque destacado para advertencias y datos del responsable */
.ltp-legal__callout {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
  border-radius: var(--ltp-radius);
  background: var(--ltp-cloud);
  border-left: 3px solid var(--ltp-violet);
}

.ltp-legal__callout svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--ltp-violet);
}

.ltp-legal__callout p:last-child { margin-bottom: 0; }

.ltp-legal__callout--warning {
  background: rgba(233, 166, 59, 0.08);
  border-left-color: var(--ltp-warning);
}

.ltp-legal__callout--warning svg { color: var(--ltp-warning); }

/* Tabla de plazos */
.ltp-legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.75rem;
}

.ltp-legal__table th,
.ltp-legal__table td {
  padding: 0.85rem 1rem;
  border: 1px solid var(--ltp-border);
  font-family: var(--ltp-font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}

.ltp-legal__table th {
  background: var(--ltp-cloud);
  font-family: var(--ltp-font-heading);
  font-weight: 700;
  color: var(--ltp-navy);
}

.ltp-legal__table td { color: var(--ltp-slate); }

/* Envoltorio con scroll propio: la tabla nunca debe empujar el ancho
   de la página en móvil. */
.ltp-legal__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  .ltp-legal__layout { grid-template-columns: 1fr; }
  .ltp-legal__toc { position: static; }
  .ltp-legal__toc ol {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
  }
}

/* ============================================================
   CUENTA / CARRITO / CHECKOUT
   ------------------------------------------------------------
   Mi cuenta, Carrito y Finalizar compra se pintan con page.php, que para
   estas tres páginas usa un contenedor propio (.ltp-woopage) en vez del
   envoltorio de artículo normal. El motivo está explicado en page.php:
   .ltp-prose y .ltp-section están hechos para texto corrido y encogían y
   separaban los formularios.

   Regla de oro de este bloque: NO se toca la lógica de WooCommerce. Todo
   lo de acá es presentación sobre el marcado que sus shortcodes generan
   (.woocommerce, .form-row, .shop_table…), más las clases .ltp-cuenta__*
   y .ltp-acceso__* que aportan las plantillas propias de
   woocommerce/myaccount/ e inc/account.php.
   ============================================================ */

/* ── Enlace de cuenta del navbar ([ltp_cuenta_nav]) ──
   Un solo <a> tanto con sesión ("Mi cuenta") como sin ella ("Iniciar
   sesión") — cerrar sesión vive en la página Mi cuenta (menú nativo de
   WooCommerce), no acá. */
.ltp-navbar__account {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ltp-font-heading);
  font-size: var(--text-sm, 0.92rem);
  font-weight: 600;
  color: var(--ltp-navy) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.ltp-navbar__account svg { width: 18px; height: 18px; flex-shrink: 0; }

.ltp-navbar__account:hover { color: var(--ltp-violet) !important; }

/* ══════════════════════════════════════════════════════════
   CONTENEDOR COMÚN
   ══════════════════════════════════════════════════════════ */

/* El aire de arriba es la mitad que el de una página de contenido: acá
   no hay nada que "presentar", se viene a hacer una gestión y cuanto
   antes se vea el formulario, mejor. */
.ltp-woopage {
  background: var(--ltp-cloud);
  padding: clamp(1rem, 0.75rem + 1vw, 1.75rem) 0 var(--ltp-section-py-sm);
}

.ltp-woopage__head,
.ltp-woopage__body {
  max-width: var(--ltp-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ltp-space-lg);
  padding-right: var(--ltp-space-lg);
  box-sizing: border-box;
}

.ltp-woopage__head { margin-bottom: clamp(1.15rem, 0.9rem + 1vw, 1.75rem); }

.ltp-woopage__title {
  font-family: var(--ltp-font-heading);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ltp-navy);
  margin: 0;
}

/* 62ch era la medida de lectura cómoda para un párrafo largo, pero estas
   bajadas tienen una o dos frases: lo único que hacía era romperlas a
   media frase dejando "cuenta." solo en la segunda línea, con media
   pantalla libre al lado. Con 92ch caben enteras, y text-wrap:pretty
   evita que quede una palabra suelta al final cuando no. */
.ltp-woopage__lead {
  font-family: var(--ltp-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ltp-slate);
  margin: 0.6rem 0 0;
  max-width: 92ch;
  text-wrap: pretty;
}

/* El <div class="woocommerce"> que envuelve la salida de cada shortcode
   NO debe volver a centrar ni a acolchar: de eso ya se encargó
   .ltp-woopage__body. Antes traía su propio max-width y su propio
   padding vertical, y el resultado era el hueco en blanco entre el
   título y el formulario. */
.ltp-woopage__body > .woocommerce,
.ltp-woopage__body > .woocommerce-notices-wrapper {
  max-width: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .ltp-woopage__head,
  .ltp-woopage__body {
    padding-left: var(--ltp-space-md);
    padding-right: var(--ltp-space-md);
  }
}

/* ══════════════════════════════════════════════════════════
   AVISOS
   ══════════════════════════════════════════════════════════ */

/* woocommerce.css posiciona el ícono del aviso en ABSOLUTO (top:1em,
   left:1.5em) y le reserva sitio con un padding-left de 3.5em. Al darle
   a estos avisos un padding propio, el ícono se quedaba flotando encima
   de las primeras letras — que es lo que se veía.
 
   Se quita el ícono en vez de reponer el padding: viene de la tipografía
   de iconos de WooCommerce, que en este sitio ni siquiera carga (salían
   cuadraditos), y la franja de color de la izquierda ya dice de qué tipo
   de aviso se trata. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  content: none;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ltp-border);
  border-left-width: 4px;
  border-radius: var(--ltp-radius);
  background: var(--ltp-white);
  font-family: var(--ltp-font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ltp-navy);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.woocommerce-message { border-left-color: var(--ltp-success); }
.woocommerce-info { border-left-color: var(--ltp-violet); }
.woocommerce-error { border-left-color: var(--ltp-danger); }

.woocommerce-error li { margin: 0; }

/* WooCommerce pone el botón ANTES del texto en el marcado. Con flex eso
   lo dejaba a la izquierda, pegado al texto que lo explica; el order lo
   manda al final, que es donde se espera una acción. */
.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  margin-left: auto;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   BOTONES Y CAMPOS (base compartida por las tres páginas)
   ══════════════════════════════════════════════════════════ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce #submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: var(--ltp-radius-pill);
  background: var(--ltp-navy);
  color: var(--ltp-white) !important;
  font-family: var(--ltp-font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce #submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--ltp-shadow-brand);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce .cart .coupon .button { background: var(--ltp-gradient) !important; }

.woocommerce a.button.wc-backward {
  background: var(--ltp-white);
  color: var(--ltp-navy) !important;
  border: 1.5px solid var(--ltp-border);
}

.woocommerce table.shop_table a.remove {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ltp-cloud);
  color: var(--ltp-danger) !important;
  font-size: 1rem;
  text-decoration: none !important;
}

.woocommerce table.shop_table a.remove:hover { background: var(--ltp-danger); color: var(--ltp-white) !important; }

.woocommerce form .form-row label,
.woocommerce-MyAccount-content label {
  display: block;
  font-family: var(--ltp-font-heading);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ltp-navy);
  margin-bottom: 0.35rem;
}

.woocommerce form .form-row .required { color: var(--ltp-danger); text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-MyAccount-content input.woocommerce-Input,
.select2-container .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius-sm);
  background: var(--ltp-white);
  font-family: var(--ltp-font-body);
  font-size: 0.94rem;
  color: var(--ltp-navy);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce form .form-row textarea { min-height: 110px; }

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--ltp-violet);
  box-shadow: 0 0 0 3px rgba(109, 63, 209, 0.12);
}

/* Los dos campos "mitad" de WooCommerce (nombre / apellidos) van uno al
   lado del otro; el resto ocupa el ancho completo. */
.woocommerce form .form-row { margin: 0 0 1.1rem; }

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce form .form-row.ltp-half { width: 100%; float: none; }

@media (min-width: 560px) {
  .woocommerce form .col2-set .form-row-first,
  .woocommerce form .col2-set .form-row-last,
  .woocommerce-form-register .form-row.ltp-half {
    width: calc(50% - 0.55rem);
    display: inline-block;
    vertical-align: top;
  }
  .woocommerce form .col2-set .form-row-last,
  .woocommerce-form-register .form-row.ltp-half + .form-row.ltp-half { margin-left: 1rem; }
}

.woocommerce-privacy-policy-text,
.woocommerce-form-login__rememberme,
.woocommerce-LostPassword {
  font-family: var(--ltp-font-body);
  font-size: 0.86rem;
  color: var(--ltp-slate);
}

.woocommerce-privacy-policy-text p { margin: 0.5rem 0 0; line-height: 1.55; }

.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; }
.woocommerce-form-login__rememberme span { font-weight: 500; }

.woocommerce-LostPassword { margin: 0.75rem 0 0; }
.woocommerce-LostPassword a { color: var(--ltp-violet); }

/* ══════════════════════════════════════════════════════════
   PÁGINA DE ACCESO (sin sesión)
   ══════════════════════════════════════════════════════════ */

/* Las tres razones para registrarse, antes de los formularios. Van en
   una tira horizontal y no en una columna al lado: en una pantalla de
   portátil, una tercera columna dejaría los dos formularios tan
   estrechos que cada campo ocuparía dos líneas. */
.ltp-acceso__ventajas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.ltp-acceso__ventaja {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.1rem 1.25rem;
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius);
}

.ltp-acceso__ventaja-icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--ltp-gradient-soft);
  color: var(--ltp-violet);
}

.ltp-acceso__ventaja-icono svg { width: 19px; height: 19px; }

.ltp-acceso__ventaja strong {
  display: block;
  font-family: var(--ltp-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ltp-navy);
}

.ltp-acceso__ventaja em {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--ltp-font-body);
  font-size: 0.82rem;
  font-style: normal;
  color: var(--ltp-slate);
}

@media (max-width: 860px) {
  .ltp-acceso__ventajas { grid-template-columns: 1fr; }
}

/* Los dos formularios, cada uno en su tarjeta. */
/* auto-fit y no "repeat(2)": si el cliente desactiva el registro desde
   WooCommerce, esta pantalla queda con UNA sola columna, y una rejilla
   fija de dos dejaría el formulario de acceso metido en la mitad
   izquierda con un hueco al lado. */
.ltp-woopage--acceso #customer_login,
.ltp-woopage--acceso .u-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  align-items: start;
}

.ltp-woopage--acceso .u-column1,
.ltp-woopage--acceso .u-column2 {
  width: auto;
  float: none;
  padding: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  box-shadow: var(--ltp-shadow-sm);
}

/* La columna de acceso lleva el acento de marca: quien ya es cliente es
   el caso más frecuente en esta pantalla, y conviene que su lado se
   distinga del de registro sin tener que leer los títulos. */
.ltp-woopage--acceso .u-column1 {
  border-color: transparent;
  box-shadow: var(--ltp-shadow);
  background:
    linear-gradient(var(--ltp-white), var(--ltp-white)) padding-box,
    var(--ltp-gradient) border-box;
  border: 1.5px solid transparent;
}

.ltp-woopage--acceso h2 {
  font-family: var(--ltp-font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ltp-navy);
  margin: 0 0 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--ltp-border);
}

.ltp-woopage--acceso .woocommerce-form-login .form-row:last-of-type,
.ltp-woopage--acceso .woocommerce-form-register .form-row:last-of-type { margin-bottom: 0.5rem; }

.ltp-woopage--acceso button.button {
  width: 100%;
  margin: 0.5rem 0 0;
}

.ltp-acceso__alterna {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.35rem;
  background: var(--ltp-white);
  border: 1px dashed var(--ltp-border);
  border-radius: var(--ltp-radius);
  font-family: var(--ltp-font-body);
  font-size: 0.92rem;
  color: var(--ltp-slate);
  text-align: center;
}

.ltp-acceso__alterna a {
  color: var(--ltp-violet) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.ltp-acceso__alterna a:hover { text-decoration: underline !important; }

@media (max-width: 720px) {
  .ltp-woopage--acceso #customer_login,
  .ltp-woopage--acceso .u-columns { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   SECUENCIA DE ACCESO
   ══════════════════════════════════════════════════════════ */

/* Una columna estrecha y centrada, no una rejilla a lo ancho: en una
   pantalla que pide una sola cosa por paso, el ancho de más solo aleja
   los campos del título. */
.ltp-auth {
  max-width: 520px;
  margin: 0 auto;
}

/* auth.js oculta con la propiedad hidden en vez de con clases: es el
   mecanismo estándar del navegador y deja el paso fuera del árbol de
   accesibilidad, no solo fuera de la vista. El !important está porque
   varias reglas de este archivo fijan display en elementos que también
   pueden llevar hidden. */
.ltp-auth [hidden] { display: none !important; }

/* ── Pestañas ── */
.ltp-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.3rem;
  margin-bottom: 1.5rem;
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-pill);
}

.ltp-auth__tab {
  padding: 0.6rem 1rem;
  border: none;
  border-radius: var(--ltp-radius-pill);
  background: none;
  font-family: var(--ltp-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ltp-slate);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.ltp-auth__tab:hover { color: var(--ltp-navy); }

.ltp-auth__tab.ltp-is-active {
  background: var(--ltp-navy);
  color: var(--ltp-white);
}

.ltp-auth__panel { display: block; }

/* ── La caja de más ──
   ────────────────────────────────────────────────────────────────
   woocommerce.css dibuja un recuadro (borde, padding y margen)
   alrededor de form.login y form.register. Acá esos formularios O son
   la tarjeta del paso, O la contienen, así que ese recuadro salía como
   una caja suelta envolviéndolo todo, sin significado ninguno.

   Se anula con especificidad suficiente para ganarle a
   ".woocommerce form.login" sin recurrir a !important, y más abajo se le
   devuelve la tarjeta al formulario de contraseña, que sí es un paso. */
.ltp-auth form.woocommerce-form.login,
.ltp-auth form.woocommerce-form.register {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* woocommerce.css le cuelga a cada .form-row un ::before y un ::after con
   display:table. Son el clearfix de su maquetación con floats, que aquí
   no se usa: lo único que hacen es dejar una marquita suelta al lado de
   los campos. */
.ltp-auth form .form-row::before,
.ltp-auth form .form-row::after,
.ltp-cuenta__completar-form .form-row::before,
.ltp-cuenta__completar-form .form-row::after {
  content: none;
}

/* ── Tarjeta de cada paso ── */
.ltp-auth__paso,
.ltp-auth form.woocommerce-form.login.ltp-auth__paso {
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  box-shadow: var(--ltp-shadow-sm);
}

/* Sin JavaScript se ven TODOS los pasos, uno debajo de otro, y todo se
   puede enviar igual; por eso van separados. La clase --js la pone
   auth.js, y solo entonces se pasa al modo "un paso a la vez", que es el
   único en el que ocultar los demás tiene sentido. */
.ltp-auth__paso + .ltp-auth__paso { margin-top: 1rem; }
.ltp-auth--js .ltp-auth__paso + .ltp-auth__paso { margin-top: 0; }

.ltp-auth__progreso {
  font-family: var(--ltp-font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ltp-violet);
  margin: 0 0 0.4rem;
}

.ltp-auth__titulo {
  font-family: var(--ltp-font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ltp-navy);
  margin: 0 0 0.5rem;
}

.ltp-auth__lead {
  font-family: var(--ltp-font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ltp-slate);
  margin: 0 0 1.5rem;
}

.ltp-auth__lead a { color: var(--ltp-violet); }

.ltp-auth__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-family: var(--ltp-font-heading);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ltp-slate) !important;
  text-decoration: none !important;
}

.ltp-auth__volver:hover { color: var(--ltp-navy) !important; }

/* ── Los métodos de entrada ── */
.ltp-auth__metodo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.15rem;
  margin-bottom: 0.6rem;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius);
  background: var(--ltp-white);
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ltp-auth__metodo:hover {
  border-color: var(--ltp-violet);
  transform: translateY(-2px);
  box-shadow: var(--ltp-shadow);
}

/* El método recomendado va marcado: ante tres opciones igual de válidas,
   no señalar ninguna deja al visitante decidiendo algo que le da igual. */
.ltp-auth__metodo--destacado {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--ltp-white), var(--ltp-white)) padding-box,
    var(--ltp-gradient) border-box;
}

/* Google pide que su botón se vea neutro, no teñido con la marca de
   quien lo integra. */
.ltp-auth__metodo--google:hover { border-color: var(--ltp-slate-light); }

.ltp-auth__metodo-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--ltp-gradient-soft);
  color: var(--ltp-violet);
}

.ltp-auth__metodo-icono svg { width: 20px; height: 20px; }

/* El logotipo de Google va sobre blanco, sin el fondo de marca del sitio:
   sus colores son identidad ajena y no deben teñirse. */
.ltp-auth__metodo-icono--google {
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
}

.ltp-auth__metodo-texto { flex: 1; min-width: 0; }

.ltp-auth__metodo-texto strong {
  display: block;
  font-family: var(--ltp-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ltp-navy);
}

.ltp-auth__metodo-texto em {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--ltp-font-body);
  font-size: 0.84rem;
  font-style: normal;
  line-height: 1.45;
  color: var(--ltp-slate);
}

.ltp-auth__metodo-flecha {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--ltp-slate-light);
}

.ltp-auth__metodo-flecha svg { width: 18px; height: 18px; }
.ltp-auth__metodo:hover .ltp-auth__metodo-flecha { color: var(--ltp-violet); }

.ltp-auth__separador {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem 0;
  font-family: var(--ltp-font-body);
  font-size: 0.82rem;
  color: var(--ltp-slate-light);
}

.ltp-auth__separador::before,
.ltp-auth__separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ltp-border);
}

/* ── Campos y envío ── */
.ltp-auth .form-row { margin-bottom: 1.1rem; }

.ltp-auth label {
  display: block;
  font-family: var(--ltp-font-heading);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ltp-navy);
  margin-bottom: 0.35rem;
}

.ltp-auth input[type="text"],
.ltp-auth input[type="email"],
.ltp-auth input[type="tel"],
.ltp-auth input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius-sm);
  background: var(--ltp-white);
  font-family: var(--ltp-font-body);
  font-size: 0.94rem;
  color: var(--ltp-navy);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ltp-auth input:focus {
  outline: none;
  border-color: var(--ltp-violet);
  box-shadow: 0 0 0 3px rgba(109, 63, 209, 0.12);
}

.ltp-auth__ayuda {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--ltp-font-body);
  font-size: 0.8rem;
  color: var(--ltp-slate-light);
}

/* El código: grande y muy separado. Se leen seis dígitos en otra pantalla
   y se teclean de memoria, así que cada carácter tiene que distinguirse
   sin esfuerzo. */
.ltp-auth__codigo {
  text-align: center;
  font-family: var(--ltp-font-heading);
  font-size: 1.75rem !important;
  font-weight: 800;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  min-height: 62px !important;
}

.ltp-auth__recordar {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem !important;
  font-weight: 500 !important;
  color: var(--ltp-slate) !important;
}

.ltp-auth__recordar input { width: auto; min-height: 0; }

.ltp-auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: var(--ltp-radius-pill);
  background: var(--ltp-gradient);
  color: var(--ltp-white) !important;
  font-family: var(--ltp-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ltp-auth__submit:hover { transform: translateY(-2px); box-shadow: var(--ltp-shadow-brand); }

.ltp-auth__pie {
  margin: 1.15rem 0 0;
  font-family: var(--ltp-font-body);
  font-size: 0.88rem;
  color: var(--ltp-slate);
  text-align: center;
}

.ltp-auth__pie a {
  color: var(--ltp-violet) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.ltp-auth__pie a:hover { text-decoration: underline !important; }

/* ── Formularios a dos columnas ──
   ────────────────────────────────────────────────────────────────
   Con GRID y no con inline-block. Dos elementos inline-block al 50%
   nunca caben en una línea: el navegador cuenta también el espacio en
   blanco que hay entre las etiquetas en el HTML, así que el segundo
   campo saltaba abajo y dejaba media fila vacía — exactamente lo que
   pasaba con "Nombre" y "Apellidos".

   La rejilla se declara en el formulario y cada fila dice cuánto ocupa:
   por defecto las dos columnas, y .ltp-half solo una. Así da igual el
   orden de los campos o que se agregue uno nuevo. */
@media (min-width: 560px) {
  .ltp-auth__paso,
  .ltp-cuenta__completar-form,
  .woocommerce-EditAccountForm,
  .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    align-content: start;
  }

  /* Todo ocupa el ancho completo salvo lo que se marque como mitad. */
  .ltp-auth__paso > *,
  .ltp-cuenta__completar-form > *,
  .woocommerce-EditAccountForm > *,
  .woocommerce-address-fields__field-wrapper > * { grid-column: 1 / -1; }

  .ltp-auth__paso > .form-row.ltp-half,
  .ltp-cuenta__completar-form > .form-row.ltp-half,
  .woocommerce-EditAccountForm > .form-row-first,
  .woocommerce-EditAccountForm > .form-row-last,
  .woocommerce-address-fields__field-wrapper > .form-row-first,
  .woocommerce-address-fields__field-wrapper > .form-row-last { grid-column: span 1; }

}

/* Sin tope de ancho: la tarjeta que los contiene ya limita el espacio, y
   ponerles otro encima dejaba media tarjeta vacía a la derecha. */
.ltp-cuenta__completar-form,
.woocommerce-EditAccountForm,
.woocommerce-address-fields { max-width: none; }

/* Defensivo: WooCommerce colorea algunas etiquetas desde su propia hoja
   y aquí todas tienen que leerse igual. */
.woocommerce-MyAccount-content .form-row label,
.woocommerce-MyAccount-content fieldset label { color: var(--ltp-navy); }

/* Los avisos y la salida alternativa se estrechan a la columna de la
   secuencia, para que nada flote más ancho que la tarjeta que se lee.
   Las TRES ventajas no: van en horizontal y a todo el ancho, porque
   apiladas eran tres pantallazos de scroll antes de llegar al
   formulario, que es a lo que se viene. */
.ltp-woopage--acceso .ltp-acceso__alterna,
.ltp-woopage--acceso .woocommerce-notices-wrapper {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.ltp-acceso__ventaja { padding: 0.85rem 1rem; }

/* Recuperar contraseña y elegir una nueva: WooCommerce las pinta con
   sus propias clases, y viven en la misma pantalla que el acceso. Se les
   da la misma tarjeta para que la secuencia no se rompa al salir a
   recuperar la clave y volver. */
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm {
  max-width: 520px;
  margin: 0 auto;
}

.ltp-woopage--acceso .woocommerce-ResetPassword {
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  box-shadow: var(--ltp-shadow-sm);
}

.ltp-woopage--acceso .woocommerce-ResetPassword button.button { width: 100%; }

/* ── Último paso del registro con Google ── */
.ltp-cuenta__completar {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--ltp-radius);
  background: var(--ltp-gradient-soft);
  border: 1px solid var(--ltp-border);
}

.ltp-cuenta__completar h2 { margin: 0 0 0.4rem; }

.ltp-cuenta__completar-lead {
  font-family: var(--ltp-font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ltp-slate);
  margin: 0 0 1.35rem;
}

.ltp-cuenta__completar-form .form-row { margin-bottom: 1rem; }

.ltp-cuenta__completar-form input {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius-sm);
  background: var(--ltp-white);
  font-family: var(--ltp-font-body);
  font-size: 0.94rem;
  color: var(--ltp-navy);
}

/* ══════════════════════════════════════════════════════════
   MI CUENTA (con sesión)
   ══════════════════════════════════════════════════════════ */

/* Áreas NOMBRADAS, no autocolocación.
   ────────────────────────────────────────────────────────────────
   WooCommerce mete dentro de .woocommerce un contenedor de avisos
   (.woocommerce-notices-wrapper) ANTES del menú, y casi siempre está
   vacío — invisible, pero es un elemento de la rejilla igual. Con
   autocolocación se quedaba con la primera celda y empujaba todo: el
   menú se iba a la columna ancha de la derecha y el contenido caía a la
   fila de abajo, en la columna estrecha de 268px.

   Con áreas nombradas, cada pieza va donde debe sin importar cuántos
   elementos inyecte WooCommerce ni en qué orden. */
.ltp-woopage--cuenta .woocommerce {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  grid-template-areas:
    "avisos avisos"
    "nav    contenido";
  column-gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  row-gap: 0;
  align-items: start;
}

/* Todo lo que no sea el menú ni el contenido —avisos de ahora y lo que
   añada mañana un plugin— va a la banda superior a lo ancho. */
.ltp-woopage--cuenta .woocommerce > * { grid-area: avisos; }
.ltp-woopage--cuenta .woocommerce-MyAccount-navigation { grid-area: nav; }
.ltp-woopage--cuenta .woocommerce-MyAccount-content { grid-area: contenido; }

/* Un contenedor de avisos vacío no debe ocupar sitio ni generar espacio
   entre bandas. Los avisos de verdad traen su propio margen inferior. */
.woocommerce-notices-wrapper:empty { display: none; }

/* ── Menú lateral ── */
.woocommerce-MyAccount-navigation {
  position: sticky;
  top: 100px;
  padding: 1.1rem;
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  box-shadow: var(--ltp-shadow-sm);
}

.ltp-cuenta__perfil {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.35rem 1rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--ltp-border);
}

.ltp-cuenta__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ltp-gradient);
  color: var(--ltp-white);
  font-family: var(--ltp-font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ltp-cuenta__perfil strong {
  display: block;
  font-family: var(--ltp-font-heading);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ltp-navy);
  overflow-wrap: anywhere;
}

.ltp-cuenta__perfil em {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--ltp-font-body);
  font-size: 0.78rem;
  font-style: normal;
  color: var(--ltp-slate);
  overflow-wrap: anywhere;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--ltp-radius-sm);
  font-family: var(--ltp-font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ltp-slate) !important;
  text-decoration: none !important;
  transition: background 0.16s ease, color 0.16s ease;
}

.woocommerce-MyAccount-navigation ul li a svg { width: 18px; height: 18px; flex-shrink: 0; }

.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--ltp-cloud);
  color: var(--ltp-navy) !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--ltp-gradient-soft);
  color: var(--ltp-violet) !important;
}

/* Misma especificidad que la regla base de arriba, para poder ganarle. */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--ltp-danger) !important;
}

.ltp-cuenta__nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  border-radius: var(--ltp-radius-pill);
  background: var(--ltp-navy);
  color: var(--ltp-white) !important;
  font-family: var(--ltp-font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.ltp-cuenta__nav-cta svg { width: 16px; height: 16px; }
.ltp-cuenta__nav-cta:hover { transform: translateY(-2px); box-shadow: var(--ltp-shadow-brand); }

/* ── Contenido ── */
.woocommerce-MyAccount-content {
  min-width: 0;
  padding: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  box-shadow: var(--ltp-shadow-sm);
  font-family: var(--ltp-font-body);
  color: var(--ltp-slate);
}

.woocommerce-MyAccount-content > p { line-height: 1.65; }
.woocommerce-MyAccount-content mark { background: none; color: var(--ltp-navy); font-weight: 700; }

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--ltp-font-heading);
  color: var(--ltp-navy);
  font-weight: 800;
}

.woocommerce-MyAccount-content h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.woocommerce-MyAccount-content h3 { font-size: 1rem; margin: 1.75rem 0 0.85rem; }

/* El panel no necesita caja propia: ya está dentro de
   .woocommerce-MyAccount-content. Solo separa sus bloques. */
.ltp-cuenta__panel > * + * { margin-top: 1.5rem; }

/* Alias del menú lateral. La clase de WooCommerce
   (.woocommerce-MyAccount-navigation) es la que lleva el diseño; esta
   existe para poder engancharse desde el theme si algún día ese nombre
   cambia del lado de WooCommerce. */
.ltp-cuenta__nav { min-width: 0; }

/* ── Panel: cliente nuevo ── */
.ltp-cuenta__bienvenida {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  margin-bottom: 1.5rem;
  border-radius: var(--ltp-radius);
  background: var(--ltp-gradient-soft);
  border: 1px solid var(--ltp-border);
}

.ltp-cuenta__bienvenida h2 { margin: 0 0 0.5rem; }
.ltp-cuenta__bienvenida > p { margin: 0 0 1.25rem; font-size: 0.94rem; line-height: 1.6; }

.ltp-cuenta__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.ltp-cuenta__pasos li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  background: var(--ltp-white);
  border-radius: var(--ltp-radius);
}

.ltp-cuenta__paso-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ltp-navy);
  color: var(--ltp-white);
  font-family: var(--ltp-font-heading);
  font-size: 0.82rem;
  font-weight: 800;
}

.ltp-cuenta__pasos strong {
  display: block;
  font-family: var(--ltp-font-heading);
  font-size: 0.95rem;
  color: var(--ltp-navy);
}

.ltp-cuenta__pasos em {
  display: block;
  margin: 0.2rem 0 0.5rem;
  font-family: var(--ltp-font-body);
  font-size: 0.86rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--ltp-slate);
}

.ltp-cuenta__pasos a {
  font-family: var(--ltp-font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ltp-violet) !important;
  text-decoration: none !important;
}

.ltp-cuenta__pasos a:hover { text-decoration: underline !important; }

/* ── Panel: últimos pedidos ── */
.ltp-cuenta__bloque { margin-bottom: 1.75rem; }

.ltp-cuenta__bloque-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.ltp-cuenta__bloque-head h2 { margin: 0; }

.ltp-cuenta__bloque-head a {
  font-family: var(--ltp-font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ltp-violet) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.ltp-cuenta__pedidos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ltp-cuenta__pedido {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius);
  background: var(--ltp-white);
}

.ltp-cuenta__pedido-ref {
  font-family: var(--ltp-font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ltp-navy) !important;
  text-decoration: none !important;
}

.ltp-cuenta__pedido-ref:hover { color: var(--ltp-violet) !important; }

.ltp-cuenta__pedido-fecha {
  font-family: var(--ltp-font-body);
  font-size: 0.84rem;
  color: var(--ltp-slate);
}

.ltp-cuenta__pedido-estado {
  padding: 0.2rem 0.7rem;
  border-radius: var(--ltp-radius-pill);
  background: var(--ltp-cloud);
  font-family: var(--ltp-font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ltp-slate);
  white-space: nowrap;
}

.ltp-cuenta__pedido-estado--completed { background: rgba(22, 164, 107, 0.12); color: var(--ltp-success); }
.ltp-cuenta__pedido-estado--processing { background: rgba(109, 63, 209, 0.12); color: var(--ltp-violet); }
.ltp-cuenta__pedido-estado--on-hold,
.ltp-cuenta__pedido-estado--pending { background: rgba(233, 166, 59, 0.14); color: #A9700F; }
.ltp-cuenta__pedido-estado--cancelled,
.ltp-cuenta__pedido-estado--failed { background: rgba(217, 69, 95, 0.12); color: var(--ltp-danger); }

.ltp-cuenta__pedido-total {
  font-family: var(--ltp-font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ltp-navy);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .ltp-cuenta__pedido { grid-template-columns: 1fr auto; row-gap: 0.4rem; }
  .ltp-cuenta__pedido-fecha { grid-column: 1; grid-row: 2; }
  .ltp-cuenta__pedido-estado { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* ── Panel: accesos rápidos ── */
.ltp-cuenta__accesos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.ltp-cuenta__acceso {
  display: block;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius);
  background: var(--ltp-white);
  text-decoration: none !important;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ltp-cuenta__acceso:hover {
  border-color: var(--ltp-violet);
  transform: translateY(-2px);
  box-shadow: var(--ltp-shadow);
}

.ltp-cuenta__acceso-icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 0.65rem;
  border-radius: 10px;
  background: var(--ltp-gradient-soft);
  color: var(--ltp-violet);
}

.ltp-cuenta__acceso-icono svg { width: 17px; height: 17px; }

.ltp-cuenta__acceso strong {
  display: block;
  font-family: var(--ltp-font-heading);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ltp-navy);
}

.ltp-cuenta__acceso em {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--ltp-font-body);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.45;
  color: var(--ltp-slate);
  overflow-wrap: anywhere;
}

/* ── Secciones de ajustes (Datos de la cuenta) ──
   Dos gestiones distintas, cada una con su título y su botón. Sin caja
   propia: la tarjeta blanca del panel ya es el contenedor, y meter otra
   caja dentro añade un borde que no separa nada nuevo. Lo que separa es
   la línea entre secciones. */
.ltp-cuenta__ajustes {
  display: flex;
  flex-direction: column;
}

.ltp-cuenta__seccion + .ltp-cuenta__seccion {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ltp-border);
}

.ltp-cuenta__seccion-head { margin-bottom: 1.35rem; }

.ltp-cuenta__seccion-head h2 {
  font-family: var(--ltp-font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ltp-navy);
  margin: 0 0 0.3rem;
}

.ltp-cuenta__seccion-head p {
  font-family: var(--ltp-font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ltp-slate);
  margin: 0;
  max-width: 80ch;
}

/* El botón no se estira a lo ancho: es una acción sobre lo de arriba, no
   el final de un formulario de alta. */
.ltp-cuenta__seccion-accion {
  margin: 0.5rem 0 0 !important;
}

.ltp-cuenta__seccion-accion button {
  width: auto;
  min-width: 200px;
}

.woocommerce-EditAccountForm small {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--ltp-font-body);
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.45;
  color: var(--ltp-slate-light);
}

/* ── Direcciones ── */
.ltp-cuenta__direcciones-lead {
  font-family: var(--ltp-font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ltp-slate);
  margin: 0 0 1.25rem;
}

/* Cada tarjeta apila lo suyo y empuja la acción al fondo, para que las
   dos queden alineadas aunque una tenga dirección guardada y la otra no. */
.woocommerce-account .woocommerce-Address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.woocommerce-account .woocommerce-Address-title {
  font-family: var(--ltp-font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ltp-navy);
  margin: 0 0 0.65rem;
}

.ltp-cuenta__direccion-vacia {
  font-family: var(--ltp-font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ltp-slate);
  margin: 0;
}

.woocommerce-account .woocommerce-Address address { margin: 0; }

.ltp-cuenta__direccion-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 0.6rem 1.35rem;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius-pill);
  background: var(--ltp-white);
  font-family: var(--ltp-font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ltp-navy) !important;
  text-decoration: none !important;
  transition: border-color 0.18s ease, color 0.18s ease;
}

/* margin-top:auto necesita que haya hueco que repartir; el padding de
   arriba lo garantiza cuando el texto es corto. */
.woocommerce-account .woocommerce-Address > * + .ltp-cuenta__direccion-btn { padding-top: 0.6rem; margin-top: 1.1rem; }

.ltp-cuenta__direccion-btn:hover {
  border-color: var(--ltp-violet);
  color: var(--ltp-violet) !important;
}


/* .woocommerce-Addresses y .addresses son EL MISMO elemento, no uno
   dentro de otro: WooCommerce las pone juntas en el mismo div. El
   selector de descendencia que había aquí no casaba con nada, y las dos
   direcciones salían una debajo de otra. */
.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.woocommerce-account .addresses .woocommerce-Address {
  width: auto;
  float: none;
  padding: 1.25rem;
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius);
}

.woocommerce-account .addresses .title h3 { margin: 0 0 0.5rem; font-size: 1rem; }

.woocommerce-account .addresses .title .edit {
  font-family: var(--ltp-font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ltp-violet) !important;
  text-decoration: none !important;
}

.woocommerce-account address {
  font-family: var(--ltp-font-body);
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--ltp-slate);
}

@media (max-width: 900px) {
  .ltp-woopage--cuenta .woocommerce {
    grid-template-columns: 1fr;
    /* Las áreas se redefinen junto con las columnas: dejar la plantilla
       de dos columnas con una sola pista hace que el navegador descarte
       grid-template-areas entera y todo vuelva a autocolocarse. */
    grid-template-areas:
      "avisos"
      "nav"
      "contenido";
    row-gap: 1rem;
  }
  .woocommerce-MyAccount-navigation { position: static; }
  .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
  .woocommerce-MyAccount-navigation ul li a { padding: 0.5rem 0.8rem; }
}

/* ══════════════════════════════════════════════════════════
   TABLAS (pedidos, carrito, resumen del checkout)
   ══════════════════════════════════════════════════════════ */

.woocommerce table.shop_table,
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius);
  overflow: hidden;
  background: var(--ltp-white);
  font-family: var(--ltp-font-body);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--ltp-border);
  font-size: 0.9rem;
  color: var(--ltp-slate);
  vertical-align: middle;
}

.woocommerce table.shop_table th {
  font-family: var(--ltp-font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ltp-slate-light);
  background: var(--ltp-cloud);
}

.woocommerce table.shop_table td.product-name a,
.woocommerce table.shop_table td.order-number a {
  font-family: var(--ltp-font-heading);
  font-weight: 700;
  color: var(--ltp-navy) !important;
  text-decoration: none !important;
}

.woocommerce table.shop_table td.product-name a:hover { color: var(--ltp-violet) !important; }

/* La presentación comprada, debajo del nombre. WooCommerce la pinta con
   <dl class="variation">, y por defecto sale como una lista de
   definiciones con saltos de línea: aquí se compacta a "Talla: M". */
.woocommerce table.shop_table .variation {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--ltp-slate);
}

.woocommerce table.shop_table .variation dt,
.woocommerce table.shop_table .variation dd {
  display: inline;
  margin: 0;
  font-weight: 500;
}

.woocommerce table.shop_table .variation dd + dt::before { content: ' · '; }
.woocommerce table.shop_table .variation p { display: inline; margin: 0; }

.woocommerce table.shop_table img { border-radius: var(--ltp-radius-sm); width: 64px; height: auto; }

.woocommerce table.shop_table td.product-quantity input.qty {
  width: 72px;
  min-height: 40px;
  text-align: center;
}

.woocommerce .order-status,
.woocommerce mark.order-status {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: var(--ltp-radius-pill);
  background: var(--ltp-cloud);
  font-family: var(--ltp-font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ltp-slate);
}

/* En móvil la tabla de pedidos se convierte en tarjetas: una fila de
   cinco columnas no cabe, y el scroll horizontal en una lista que se
   consulta a menudo es peor que apilar. */
@media (max-width: 640px) {
  .woocommerce-orders-table thead { display: none; }

  .woocommerce-orders-table,
  .woocommerce-orders-table tbody { display: block; border: 0; }

  .woocommerce-orders-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--ltp-border);
    border-radius: var(--ltp-radius);
  }

  .woocommerce-orders-table td {
    display: block;
    padding: 0;
    border: 0;
  }

  .woocommerce-orders-table td.order-number { grid-column: 1 / -1; font-size: 1rem; }

  .woocommerce-orders-table td[data-title]:not([data-title=""])::before {
    content: attr(data-title) ': ';
    font-family: var(--ltp-font-heading);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ltp-slate-light);
  }

  .woocommerce-orders-table td.order-number[data-title]::before { content: none; }
  .woocommerce-orders-table td.order-actions { grid-column: 1 / -1; margin-top: 0.5rem; }
}

/* ══════════════════════════════════════════════════════════
   CARRITO
   ══════════════════════════════════════════════════════════ */

/* Mismo motivo que en Mi cuenta: áreas nombradas para que el contenedor
   de avisos no se lleve la primera celda. */
.ltp-woopage--carrito .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas:
    "avisos  avisos"
    "lineas  resumen";
  column-gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  row-gap: 0;
  align-items: start;
}

.ltp-woopage--carrito .woocommerce > * { grid-area: avisos; }
.ltp-woopage--carrito .woocommerce-cart-form { grid-area: lineas; }
.ltp-woopage--carrito .cart-collaterals { grid-area: resumen; }

.woocommerce-cart-form { margin: 0; min-width: 0; }

.woocommerce .cart .coupon {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
}

.woocommerce .cart .coupon #coupon_code {
  min-width: 160px;
  min-height: 46px;
  padding: 0 0.9rem;
  border: 1.5px solid var(--ltp-border);
  border-radius: var(--ltp-radius-sm);
  font-family: var(--ltp-font-body);
}

.woocommerce .cart-collaterals,
.woocommerce .cart_totals {
  width: auto;
  float: none;
  padding: 1.35rem;
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  box-shadow: var(--ltp-shadow-sm);
  position: sticky;
  top: 100px;
}

.woocommerce .cart_totals { padding: 0; border: 0; box-shadow: none; position: static; }

.woocommerce .cart_totals h2 {
  font-family: var(--ltp-font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ltp-navy);
  margin: 0 0 1rem;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; margin-top: 0.5rem; }

@media (max-width: 900px) {
  .ltp-woopage--carrito .woocommerce {
    grid-template-columns: 1fr;
    grid-template-areas:
      "avisos"
      "lineas"
      "resumen";
    row-gap: 1.25rem;
  }
  .woocommerce .cart-collaterals { position: static; }
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT
   ══════════════════════════════════════════════════════════ */

/* Dos columnas: los datos a la izquierda y el resumen del pedido fijo a
   la derecha. Es la disposición estándar de un checkout por un motivo
   concreto: mientras se rellenan diez campos, el comprador necesita
   seguir viendo qué está comprando y cuánto va a pagar. En una sola
   columna el total queda a dos pantallas de scroll. */
.ltp-woopage--checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: auto 1fr;
  gap: 0 clamp(1.25rem, 1rem + 1.5vw, 2rem);
  align-items: start;
}

.ltp-woopage--checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
}

.ltp-woopage--checkout #order_review_heading { grid-column: 2; grid-row: 1; }
.ltp-woopage--checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 100px; }

/* Facturación y envío se apilan: ya están dentro de una sola columna, y
   partirlos otra vez dejaría cada campo en un carril de 200px. */
.ltp-woopage--checkout #customer_details.col2-set,
.ltp-woopage--checkout #customer_details .col2-set { display: block; }

.ltp-woopage--checkout #customer_details .col-1,
.ltp-woopage--checkout #customer_details .col-2 { width: auto; float: none; }

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  margin-bottom: 1.25rem;
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  box-shadow: var(--ltp-shadow-sm);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--ltp-font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ltp-navy);
  margin: 0 0 1.15rem;
}

#order_review_heading { margin-bottom: 0.85rem; }

.woocommerce-checkout-review-order {
  padding: 1.35rem;
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  box-shadow: var(--ltp-shadow-sm);
}

.woocommerce-checkout-review-order table.shop_table { border: 0; }
.woocommerce-checkout-review-order table.shop_table th { background: none; padding-left: 0; padding-right: 0; }
.woocommerce-checkout-review-order table.shop_table td { padding-left: 0; padding-right: 0; }
.woocommerce-checkout-review-order tfoot .order-total td,
.woocommerce-checkout-review-order tfoot .order-total th {
  font-family: var(--ltp-font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ltp-navy);
  border-bottom: 0;
}

.woocommerce-form-coupon-toggle { margin-bottom: 1.25rem; }

ul.wc_payment_methods {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 1rem;
  background: var(--ltp-cloud);
  border-radius: var(--ltp-radius);
}

ul.wc_payment_methods li { margin-bottom: 0.5rem; }
ul.wc_payment_methods li:last-child { margin-bottom: 0; }

ul.wc_payment_methods label {
  display: inline;
  font-family: var(--ltp-font-heading);
  font-weight: 600;
  color: var(--ltp-navy);
}

ul.wc_payment_methods .payment_box {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ltp-border);
  font-family: var(--ltp-font-body);
  font-size: 0.85rem;
  color: var(--ltp-slate);
}

#place_order { width: 100%; }

.woocommerce-terms-and-conditions-wrapper {
  font-family: var(--ltp-font-body);
  font-size: 0.84rem;
  color: var(--ltp-slate);
  margin-bottom: 1rem;
}

@media (max-width: 980px) {
  .ltp-woopage--checkout form.checkout { grid-template-columns: 1fr; }
  .ltp-woopage--checkout #customer_details,
  .ltp-woopage--checkout #order_review_heading,
  .ltp-woopage--checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
}

/* ══════════════════════════════════════════════════════════
   CONFIRMACIÓN DEL PEDIDO
   ══════════════════════════════════════════════════════════ */

.woocommerce-order {
  padding: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  background: var(--ltp-white);
  border: 1px solid var(--ltp-border);
  border-radius: var(--ltp-radius-lg);
  box-shadow: var(--ltp-shadow-sm);
}

.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--ltp-font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ltp-success);
  margin: 0 0 1.25rem;
}

.woocommerce ul.order_details {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 0 1.75rem;
  padding: 1.15rem 1.35rem;
  background: var(--ltp-cloud);
  border-radius: var(--ltp-radius);
}

.woocommerce ul.order_details li {
  font-family: var(--ltp-font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ltp-slate-light);
  margin: 0;
}

.woocommerce ul.order_details li strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ltp-navy);
}


/* ===== UTILIDADES ===== */

.ltp-text-center { text-align: center; }
.ltp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}