/* =============================================================
   PequeMonster v3 · Theme overrides
   Paleta "Cielo" + Tipografía Fraunces/Manrope
   Layer sobre Hummingbird (Bootstrap 5.3.3)
   ============================================================= */

:root {
  /* Paleta Cielo */
  --pm-base:       #FBFAF5;   /* crema fondo */
  --pm-ink:        #151821;   /* tinta texto */
  --pm-primary:    #2C5F8D;   /* azul profundo */
  --pm-accent:     #F4A259;   /* coral dorado */
  --pm-highlight:  #C5D86D;   /* verde manzana */

  /* Neutros derivados */
  --pm-ink-soft:   #3A3D48;
  --pm-ink-muted:  #8E8F96;
  --pm-surface:    #FFFFFF;
  --pm-border:     rgba(21, 24, 33, 0.10);
  --pm-border-soft:rgba(21, 24, 33, 0.05);

  /* Sombras */
  --pm-shadow-sm:  0 1px 2px rgba(21,24,33,.04), 0 4px 12px -4px rgba(21,24,33,.06);
  --pm-shadow-md:  0 2px 6px rgba(21,24,33,.06), 0 16px 40px -16px rgba(21,24,33,.14);

  /* Radios */
  --pm-radius-sm:  0.35rem;
  --pm-radius-md:  0.85rem;
  --pm-radius-lg:  1.6rem;
  --pm-radius-pill:999px;

  /* Easing */
  --pm-ease:       cubic-bezier(.2,.7,.2,1);

  /* Tipografías */
  --pm-font-serif: "Fraunces", Georgia, serif;
  --pm-font-sans:  "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* === Override Bootstrap tokens === */
  --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--pm-ink);
  --bs-body-bg:    var(--pm-base);

  --bs-primary:          #2C5F8D;
  --bs-primary-rgb:      44, 95, 141;
  --bs-secondary:        #3A3D48;
  --bs-secondary-rgb:    58, 61, 72;
  --bs-success:          #4A8F3E;
  --bs-info:             #2C5F8D;
  --bs-warning:          #F4A259;
  --bs-danger:           #C44536;

  --bs-link-color:         #2C5F8D;
  --bs-link-color-rgb:     44, 95, 141;
  --bs-link-hover-color:   #1F4265;

  --bs-border-color:       var(--pm-border);
  --bs-border-radius:      var(--pm-radius-sm);
  --bs-border-radius-lg:   var(--pm-radius-md);

  --bs-btn-border-radius:  var(--pm-radius-pill);
}

/* === Base === */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--bs-body-font-family);
  font-weight: 400;
  letter-spacing: -0.005em;
  background: var(--pm-base);
  color: var(--pm-ink);
}

/* === Tipografía display (Fraunces) === */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--pm-ink);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
h1, .h1 {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
h2, .h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
}
h3, .h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 500;
}
em, .text-italic { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; }

/* Eyebrow / kickers */
.eyebrow {
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--pm-ink-muted);
}

/* === Botones === */
.btn {
  font-family: var(--bs-body-font-family);
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.75rem 1.5rem;
  border-radius: var(--pm-radius-pill);
  transition: transform .3s var(--pm-ease), background-color .3s var(--pm-ease), box-shadow .3s var(--pm-ease);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background-color: var(--pm-primary);
  border-color: var(--pm-primary);
  color: var(--pm-surface);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #1F4265;
  border-color: #1F4265;
  color: var(--pm-surface);
}

.btn-accent {
  background-color: var(--pm-accent);
  border-color: var(--pm-accent);
  color: var(--pm-ink);
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: #E08B41;
  color: var(--pm-ink);
}

.btn-outline-primary {
  color: var(--pm-primary);
  border-color: var(--pm-primary);
}
.btn-outline-primary:hover {
  background-color: var(--pm-primary);
  border-color: var(--pm-primary);
  color: var(--pm-surface);
}

/* === Enlaces === */
a { color: var(--pm-primary); text-decoration: none; transition: color .25s var(--pm-ease); }
a:hover { color: #1F4265; }

/* === Form controls === */
.form-control,
.form-select {
  border-radius: var(--pm-radius-md);
  border-color: var(--pm-border);
  padding: 0.75rem 1rem;
  font-family: var(--bs-body-font-family);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgba(44, 95, 141, 0.15);
}

/* === Cards === */
.card {
  border-radius: var(--pm-radius-md);
  border: 1px solid var(--pm-border);
  background: var(--pm-surface);
}

/* === Badges === */
.badge {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.75rem;
  border-radius: var(--pm-radius-pill);
}
.bg-primary { background-color: var(--pm-primary) !important; }
.bg-accent  { background-color: var(--pm-accent)  !important; color: var(--pm-ink) !important; }
.bg-highlight{ background-color: var(--pm-highlight) !important; color: var(--pm-ink) !important; }

/* === Product tile (Hummingbird) === */
.product-miniature .card {
  box-shadow: var(--pm-shadow-sm);
  transition: box-shadow .35s var(--pm-ease), transform .35s var(--pm-ease);
}
.product-miniature .card:hover {
  box-shadow: var(--pm-shadow-md);
  transform: translateY(-3px);
}
.product-miniature .product-title a {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--pm-ink);
}
.product-miniature .product-price-and-shipping .price {
  font-weight: 600;
  color: var(--pm-ink);
}

/* === Header === */
.header-top {
  background-color: var(--pm-surface);
  border-bottom: 1px solid var(--pm-border);
}

/* === Ruler === */
hr { border-color: var(--pm-border); opacity: 1; }

/* === Selección === */
::selection {
  background-color: var(--pm-accent);
  color: var(--pm-ink);
}

/* =============================================================
   HERO de HOME
   ============================================================= */
.pm-hero {
  position: relative;
  background: var(--pm-base);
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.pm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(44,95,141,0.05), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(244,162,89,0.06), transparent 50%);
  pointer-events: none;
}
.pm-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
}

/* --- Texto --- */
.pm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: "Manrope", sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  color: var(--pm-ink-muted);
  margin-bottom: 1.25rem;
}
.pm-hero__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .65;
}
.pm-hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: .96;
  letter-spacing: -.025em;
  color: var(--pm-ink);
  margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
}
.pm-hero__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--pm-primary);
}
.pm-hero__kicker {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.55;
  color: var(--pm-ink-soft);
  max-width: 42ch;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
.pm-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: clamp(2rem, 3vw, 2.75rem);
}
.pm-btn-primary {
  background: var(--pm-primary);
  color: #fff;
  padding: .95rem 1.75rem;
  border-radius: var(--pm-radius-pill);
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: 0;
  transition: transform .3s var(--pm-ease), background .3s var(--pm-ease), box-shadow .3s var(--pm-ease);
  box-shadow: 0 4px 12px -4px rgba(44,95,141,.35);
}
.pm-btn-primary:hover {
  background: #1F4265;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(44,95,141,.5);
}
.pm-btn-ghost {
  background: transparent;
  color: var(--pm-ink);
  padding: .95rem 1.25rem;
  border-radius: var(--pm-radius-pill);
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color .3s var(--pm-ease), transform .3s var(--pm-ease);
}
.pm-btn-ghost:hover {
  color: var(--pm-primary);
  transform: translateX(2px);
}
.pm-btn-ghost svg { transition: transform .3s var(--pm-ease); }
.pm-btn-ghost:hover svg { transform: translateX(3px); }

.pm-hero__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: "Manrope", sans-serif;
  font-size: .88rem;
  color: var(--pm-ink-muted);
}
.pm-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.pm-hero__meta span {
  color: var(--pm-accent);
  font-size: 1rem;
}

/* --- Visual --- */
.pm-hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.pm-hero__blob {
  position: absolute;
  width: 90%;
  height: 90%;
  filter: blur(1px);
  opacity: .55;
}
.pm-hero__blob--a {
  top: -5%;
  left: -5%;
  animation: blob-a 14s ease-in-out infinite;
}
.pm-hero__blob--b {
  bottom: -5%;
  right: -5%;
  animation: blob-b 16s ease-in-out infinite;
}
@keyframes blob-a {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  50%     { transform: translate(10px,-12px) rotate(15deg) scale(1.04); }
}
@keyframes blob-b {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  50%     { transform: translate(-8px,10px) rotate(-12deg) scale(1.06); }
}

.pm-hero__card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  background: var(--pm-surface);
  border-radius: var(--pm-radius-md);
  box-shadow: var(--pm-shadow-md);
  padding: 1.5rem 1.75rem;
  width: min(300px, 70%);
  z-index: 2;
}
.pm-hero__card-brand {
  font-family: "Manrope", sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--pm-ink-muted);
  margin-bottom: .35rem;
}
.pm-hero__card-name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  color: var(--pm-ink);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.pm-hero__card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}
.pm-hero__card-price {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--pm-ink);
}
.pm-hero__card-badge {
  font-family: "Manrope", sans-serif;
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .3rem .7rem;
  border-radius: var(--pm-radius-pill);
  background: var(--pm-accent);
  color: var(--pm-ink);
}

.pm-hero__scribble {
  position: absolute;
  top: 5%;
  right: 10%;
  width: 70px;
  height: auto;
  opacity: .7;
  animation: scribble-float 8s ease-in-out infinite;
}
@keyframes scribble-float {
  0%,100% { transform: translateY(0) rotate(-8deg); }
  50%     { transform: translateY(-8px) rotate(4deg); }
}

/* --- Staggered reveal al cargar --- */
@keyframes pm-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.pm-hero__eyebrow,
.pm-hero__title,
.pm-hero__kicker,
.pm-hero__ctas,
.pm-hero__meta {
  animation: pm-rise .9s var(--pm-ease) both;
}
.pm-hero__title  { animation-delay: .08s; }
.pm-hero__kicker { animation-delay: .16s; }
.pm-hero__ctas   { animation-delay: .24s; }
.pm-hero__meta   { animation-delay: .32s; }
.pm-hero__visual { animation: pm-rise 1s var(--pm-ease) .18s both; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .pm-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .pm-hero__visual {
    max-width: 380px;
    order: -1;
  }
  .pm-hero__scribble { opacity: .5; }
}

/* =============================================================
   CATEGORÍAS DESTACADAS
   ============================================================= */
.pm-cats {
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3.5rem);
  max-width: 1280px;
  margin: 0 auto;
}
.pm-cats__head {
  max-width: 680px;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.pm-cats__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--pm-ink);
  margin: .5rem 0 .85rem;
}
.pm-cats__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--pm-primary);
}
.pm-cats__kicker {
  font-family: "Manrope", sans-serif;
  font-size: 1.02rem;
  color: var(--pm-ink-soft);
  line-height: 1.55;
  margin: 0;
  max-width: 55ch;
}

.pm-cats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.5vw, 1.5rem);
}

/* Card categoría — colores alternados con la paleta */
.pm-cat {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-radius: var(--pm-radius-lg);
  text-decoration: none;
  color: var(--pm-ink);
  background: #E8F0F7; /* azul claro default */
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--pm-ease), box-shadow .45s var(--pm-ease);
}
.pm-cat:nth-child(3n+2) { background: #FDECD9; } /* melocotón */
.pm-cat:nth-child(3n+3) { background: #EEF5D9; } /* verde manzana claro */

.pm-cat:hover {
  transform: translateY(-6px);
  box-shadow: var(--pm-shadow-md);
  color: var(--pm-ink);
}

.pm-cat__media {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.25rem;
}
.pm-cat__media img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  padding: 18px;
  transition: transform .5s var(--pm-ease), background .5s var(--pm-ease);
}
.pm-cat:hover .pm-cat__media img {
  transform: scale(1.05) rotate(-2deg);
  background: #fff;
}

.pm-cat__body {
  margin-top: auto;
}
.pm-cat__kicker {
  display: inline-block;
  font-family: "Manrope", sans-serif;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  color: var(--pm-ink-muted);
  margin-bottom: .5rem;
}
.pm-cat__name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--pm-ink);
  margin: 0 0 .75rem;
}
.pm-cat__cta {
  font-family: "Manrope", sans-serif;
  font-size: .85rem;
  font-weight: 500;
  color: var(--pm-primary);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap .3s var(--pm-ease);
}
.pm-cat:hover .pm-cat__cta { gap: .75rem; }
.pm-cat__cta svg { transition: transform .3s var(--pm-ease); }
.pm-cat:hover .pm-cat__cta svg { transform: translateX(3px); }

/* Responsive */
@media (max-width: 920px) {
  .pm-cats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pm-cats__grid { grid-template-columns: 1fr; }
  .pm-cat { min-height: 220px; }
}

/* =============================================================
   SECCIÓN DESTACADOS / NOVEDADES
   ============================================================= */
.pm-featured {
  max-width: 1280px;
  margin: clamp(2rem, 4vw, 3.5rem) auto;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
}
.pm-featured__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 3vw, 3rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--pm-border-soft);
}
.pm-featured__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--pm-ink);
  margin: .5rem 0 .75rem;
}
.pm-featured__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--pm-primary);
}
.pm-featured__kicker {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  color: var(--pm-ink-soft);
  line-height: 1.55;
  margin: 0;
  max-width: 55ch;
}
.pm-featured__link {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: .9rem;
  color: var(--pm-primary);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
  transition: all .3s var(--pm-ease);
  white-space: nowrap;
}
.pm-featured__link:hover {
  color: #1F4265;
  border-bottom-color: #1F4265;
  gap: .65rem;
}

.pm-featured__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* Sobreescribir layout por defecto de miniature si Hummingbird lo envuelve */
.pm-featured__grid .product-miniature {
  width: 100%;
  max-width: none;
  margin: 0;
}
.pm-featured__grid .product-miniature .card {
  border-radius: var(--pm-radius-md);
  border: 1px solid var(--pm-border-soft);
  background: var(--pm-surface);
  overflow: hidden;
  box-shadow: var(--pm-shadow-sm);
  transition: transform .4s var(--pm-ease), box-shadow .4s var(--pm-ease);
}
.pm-featured__grid .product-miniature .card:hover {
  transform: translateY(-5px);
  box-shadow: var(--pm-shadow-md);
}

/* Responsive */
@media (max-width: 1024px) {
  .pm-featured__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .pm-featured__head { grid-template-columns: 1fr; }
  .pm-featured__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .pm-featured__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   HEADER editorial
   ============================================================= */
.header {
  background: var(--pm-base);
  border-bottom: 1px solid var(--pm-border-soft);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(251, 250, 245, 0.85);
}

/* Top bar fina */
.header-top {
  background: transparent;
  border-bottom: 1px solid var(--pm-border-soft);
  padding: .5rem 0;
  font-family: "Manrope", sans-serif;
  font-size: .82rem;
  color: var(--pm-ink-muted);
}
.header-top__left,
.header-top__right { align-items: center; display: flex; }
.header-top__right { justify-content: flex-end; gap: 1.25rem; }

.ps-contactinfo__email {
  color: var(--pm-ink-muted);
  font-weight: 500;
  transition: color .25s var(--pm-ease);
}
.ps-contactinfo__email:hover { color: var(--pm-primary); }

/* Language selector — dropdown estilo menú usuario (override pequemonster_v3) */
.ps-languageselector.dropdown { display: inline-flex; }
.ps-languageselector .dropdown-toggle::after {
  margin-left: .35rem;
  vertical-align: middle;
  border-top-color: currentColor;
}
.ps-languageselector .dropdown-menu {
  min-width: 11rem;
}
.ps-languageselector .dropdown-item {
  display: flex;
  align-items: center;
}
.ps-languageselector .dropdown-item .material-icons {
  font-size: 18px;
  vertical-align: middle;
}
/* Idioma seleccionado: discreto (sin fondo azul Bootstrap), check a la derecha */
.ps-languageselector .dropdown-item.active,
.ps-languageselector .dropdown-item:active {
  background-color: transparent;
  color: var(--pm-primary);
  font-weight: 600;
}
.ps-languageselector .dropdown-item.active::after {
  content: "\E5CA"; /* material-icons "check" */
  font-family: "Material Icons";
  margin-left: auto;
  padding-left: .75rem;
  font-size: 18px;
  color: var(--pm-primary);
}

/* Header bottom — zona logo + nav + iconos */
.header-bottom {
  padding: 1.1rem 0;
}
.header-bottom__row {
  align-items: center;
  flex-wrap: nowrap;
}
.header-bottom__logo .logo {
  max-height: 42px;
  width: auto;
  transition: opacity .25s var(--pm-ease);
}
.header-bottom__logo:hover .logo { opacity: .85; }

/* Block icons (sign-in, cart) */
.header-block {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .9rem;
  border-radius: var(--pm-radius-pill);
  font-family: "Manrope", sans-serif;
  font-size: .85rem;
  font-weight: 500;
  color: var(--pm-ink);
  background: transparent;
  transition: background .25s var(--pm-ease), color .25s var(--pm-ease);
}
.header-block:hover { background: rgba(44, 95, 141, 0.07); color: var(--pm-primary); }
.header-block__action-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: inherit;
  text-decoration: none;
}
.header-block__icon {
  font-size: 20px;
  color: currentColor;
}
.header-block__title { color: currentColor; }
.header-block__badge {
  background: var(--pm-accent);
  color: var(--pm-ink);
  font-family: "Manrope", sans-serif;
  font-size: .7rem;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 .4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .25rem;
}

/* Cart empty → no badge visible if 0 */
.ps-shoppingcart .blockcart .header-block__badge {
  background: var(--pm-ink);
  color: #fff;
  opacity: .25;
}
.ps-shoppingcart .blockcart.active .header-block__badge {
  background: var(--pm-accent);
  color: var(--pm-ink);
  opacity: 1;
}

/* === Main menu horizontal === */
.ps-mainmenu--desktop { flex: 1; }
.ps-mainmenu__tree {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-mainmenu__tree-item {
  position: static;
  margin: 0;
}
.ps-mainmenu__tree-item-wrapper {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.ps-mainmenu__tree-link {
  font-family: "Manrope", sans-serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--pm-ink);
  padding: .5rem 0;
  position: relative;
  text-decoration: none;
  transition: color .25s var(--pm-ease);
}
.ps-mainmenu__tree-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--pm-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--pm-ease);
}
.ps-mainmenu__tree-item:hover .ps-mainmenu__tree-link,
.ps-mainmenu__tree-link[aria-expanded="true"] {
  color: var(--pm-primary);
}
.ps-mainmenu__tree-item:hover .ps-mainmenu__tree-link::after,
.ps-mainmenu__tree-link[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.ps-mainmenu__tree-dropdown-toggle {
  border: 0;
  background: transparent;
  width: 16px;
  height: 16px;
  padding: 0;
  position: relative;
  cursor: pointer;
  opacity: .6;
}
.ps-mainmenu__tree-dropdown-toggle::before,
.ps-mainmenu__tree-dropdown-toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .3s var(--pm-ease);
}
.ps-mainmenu__tree-dropdown-toggle::before {
  top: 50%;
  left: 3px;
  right: 3px;
  height: 1.5px;
  transform: translateY(-50%);
}
.ps-mainmenu__tree-dropdown-toggle::after {
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 1.5px;
  transform: translateX(-50%);
}
.ps-mainmenu__tree-dropdown-toggle[aria-expanded="true"]::after {
  transform: translateX(-50%) scaleY(0);
}

/* === Submenu (dropdown) === */
.js-sub-menu.submenu {
  background: var(--pm-surface);
  border-top: 1px solid var(--pm-border-soft);
  box-shadow: var(--pm-shadow-md);
  padding: 2rem 0 2.5rem;
  border-radius: 0 0 var(--pm-radius-md) var(--pm-radius-md);
}
.submenu__row { gap: 2rem; }
.submenu__left-item {
  display: block;
  padding: .5rem 0;
  color: var(--pm-ink);
  font-family: "Manrope", sans-serif;
  font-size: .92rem;
  font-weight: 400;
  border-bottom: 1px solid var(--pm-border-soft);
  transition: color .25s var(--pm-ease), padding-left .25s var(--pm-ease);
}
.submenu__left-item:hover {
  color: var(--pm-primary);
  padding-left: .5rem;
}

/* Mobile menu */
@media (max-width: 1199px) {
  .ps-mainmenu__tree {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .ps-mainmenu__tree-link {
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
  }
  .header-bottom__logo .logo { max-height: 36px; }
}

/* ==== Tipografía numérica del precio en miniature === */
.product-miniature .product-price-and-shipping .price {
  font-family: "Manrope", sans-serif;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

/* Los material icons (hummingbird) mantienen su font-family propia */
.material-icons { font-family: "Material Icons", sans-serif !important; }

/* =============================================================
   HEADER FIXES (v1.1)
   ============================================================= */

/* Menú — más aire, tipografía más elegante, gap generoso */
.ps-mainmenu__tree {
  gap: clamp(1.5rem, 2.5vw, 2.75rem) !important;
}
.ps-mainmenu__tree-link {
  font-family: "Manrope", sans-serif;
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: .75rem 0 !important;
  color: var(--pm-ink);
}

/* Chevron en lugar de + (override completo del toggle) */
.ps-mainmenu__tree-dropdown-toggle {
  border: 0;
  background: transparent;
  width: 10px;
  height: 10px;
  padding: 0;
  margin-left: .25rem;
  position: relative;
  cursor: pointer;
  opacity: .5;
  transition: transform .3s var(--pm-ease), opacity .3s var(--pm-ease);
}
.ps-mainmenu__tree-dropdown-toggle::before,
.ps-mainmenu__tree-dropdown-toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
  width: 7px;
  height: 1.5px;
  top: 50%;
  border-radius: 1px;
  transition: transform .3s var(--pm-ease);
}
.ps-mainmenu__tree-dropdown-toggle::before {
  left: 0;
  transform: translateY(-50%) rotate(35deg);
  transform-origin: right center;
}
.ps-mainmenu__tree-dropdown-toggle::after {
  right: 0;
  transform: translateY(-50%) rotate(-35deg);
  transform-origin: left center;
}
.ps-mainmenu__tree-item:hover .ps-mainmenu__tree-dropdown-toggle,
.ps-mainmenu__tree-dropdown-toggle[aria-expanded="true"] {
  opacity: 1;
  color: var(--pm-primary);
}
.ps-mainmenu__tree-dropdown-toggle[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(-35deg);
}
.ps-mainmenu__tree-dropdown-toggle[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(35deg);
}

/* Separación vertical entre link y underline */
.ps-mainmenu__tree-link::after {
  bottom: -4px !important;
  height: 1.5px !important;
}

/* Fix Material Icons: aseguramos que tiren del path de fonts del parent (via symlink ya) */
.material-icons {
  font-family: "Material Icons" !important;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}

/* Aire extra en la zona logo-menu-iconos */
.header-bottom {
  padding: 1.25rem 0 !important;
}
.header-bottom__row {
  gap: clamp(1rem, 2vw, 2.5rem) !important;
}

/* =============================================================
   MENÚ v1.2 — rehecho como dropdown editorial clásico
   (oculta el layout mega de 2 cols que venía del core)
   ============================================================= */

/* Nav horizontal: gap más compacto para que quepan los 7 items */
.ps-mainmenu__tree {
  gap: clamp(1rem, 1.6vw, 1.8rem) !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
}
.ps-mainmenu__tree-link {
  font-size: .9rem !important;
  padding: .75rem 0 !important;
  white-space: nowrap !important;
}

/* SUBMENU como dropdown tradicional estrecho (NO full-width) */
.js-sub-menu.submenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  width: 280px !important;
  max-width: 280px !important;
  padding: .75rem 0 !important;
  background: var(--pm-surface) !important;
  border-top: 3px solid var(--pm-primary) !important;
  border-radius: 0 0 var(--pm-radius-md) var(--pm-radius-md) !important;
  box-shadow: var(--pm-shadow-md) !important;
  z-index: 1050 !important;
}

/* Anclamos el item al padre para posicionar el dropdown */
.ps-mainmenu__tree-item {
  position: relative !important;
}

/* Container interno: reset Bootstrap grid, todo una columna */
.js-sub-menu .container {
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}
.submenu__row {
  display: block !important;
  margin: 0 !important;
  gap: 0 !important;
}
.submenu__left {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ocultar submenu__right vacío (bloque blanco fantasma) */
.submenu__right,
.submenu__content {
  display: none !important;
}

/* Items del submenu: ligeros, editoriales, sin subrayado en items con hijos */
.submenu__left-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: .7rem 1.25rem !important;
  color: var(--pm-ink) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: .88rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: background .2s var(--pm-ease), color .2s var(--pm-ease), padding-left .25s var(--pm-ease) !important;
  text-decoration: none !important;
}
.submenu__left-item:hover,
.submenu__left-item:focus {
  background: rgba(44, 95, 141, 0.06) !important;
  color: var(--pm-primary) !important;
  padding-left: 1.5rem !important;
}

/* Items con subcategorías: flecha › al final */
.submenu__left-item[data-ps-has-child="true"]::after {
  content: "›";
  font-size: 1.1rem;
  color: var(--pm-ink-muted);
  line-height: 1;
  margin-left: 1rem;
}
.submenu__left-item[data-ps-has-child="true"]:hover::after {
  color: var(--pm-primary);
}

/* Desactivar comportamiento tab — que al click navegue al link */
.submenu__left-item[role="tab"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Neutralizar cualquier resaltado activo residual de tabs */
.submenu__left-item[aria-selected="true"] {
  background: transparent !important;
  font-weight: 400 !important;
  color: var(--pm-ink) !important;
}

/* En móvil: el submenu ya no es absolute, se estira dentro del menu móvil */
@media (max-width: 1199px) {
  .js-sub-menu.submenu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    border-top: 1px solid var(--pm-border-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .submenu__left-item {
    padding: .75rem 2rem !important;
    font-size: .95rem !important;
  }
}

/* =============================================================
   MENÚ v1.3 — fix chevrones alineados
   (Bootstrap añade un ::after triángulo al .dropdown-toggle que
    hay que neutralizar antes de meter el nuestro)
   ============================================================= */

/* Neutralizar el ::after de Bootstrap */
.ps-mainmenu__tree-dropdown-toggle::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* Re-plantear el toggle: inline, alineado al texto del link */
.ps-mainmenu__tree-item-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  line-height: 1 !important;
}

.ps-mainmenu__tree-dropdown-toggle {
  border: 0 !important;
  background: transparent !important;
  width: 10px !important;
  height: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  cursor: pointer !important;
  color: var(--pm-ink-muted);
  display: inline-block !important;
  vertical-align: middle !important;
  flex: none !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 0 !important;
}

/* Chevron único via ::before: cuadro rotado con 2 bordes = V */
.ps-mainmenu__tree-dropdown-toggle::before {
  content: "" !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) translate(-1px,-1px) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: .55;
  transition: transform .3s var(--pm-ease), opacity .3s var(--pm-ease), border-color .3s var(--pm-ease);
  background: transparent !important;
}

.ps-mainmenu__tree-item:hover .ps-mainmenu__tree-dropdown-toggle {
  color: var(--pm-primary);
}
.ps-mainmenu__tree-item:hover .ps-mainmenu__tree-dropdown-toggle::before {
  opacity: 1;
}
.ps-mainmenu__tree-dropdown-toggle[aria-expanded="true"]::before {
  transform: rotate(-135deg) translate(-1px,-1px) !important;
  opacity: 1;
}

/* =============================================================
   MENÚ v1.4 — FIX REAL chevron alignment
   El parent pone padding:1.25rem y align-self:stretch al toggle,
   lo que hacía que el botón ocupara toda la altura del wrapper
   y el ::before (absolute) quedara arriba.
   Neutralizamos TODO y dejamos que el pseudo se centre via flex.
   ============================================================= */

.ps-mainmenu__tree-dropdown-toggle {
  padding: 0 !important;
  align-self: center !important;
  width: 12px !important;
  height: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  min-height: 0 !important;
  box-sizing: content-box !important;
}

.ps-mainmenu__tree-dropdown-toggle::before {
  content: "" !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border: 0 !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) translate(-1px, -1px) !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  background: transparent !important;
  opacity: .6;
  transition: transform .3s var(--pm-ease), opacity .3s var(--pm-ease);
}

.ps-mainmenu__tree-dropdown-toggle[aria-expanded="true"]::before {
  transform: rotate(-135deg) translate(-1px, -1px) !important;
  opacity: 1;
}
.ps-mainmenu__tree-item:hover .ps-mainmenu__tree-dropdown-toggle::before {
  opacity: 1;
}

/* =============================================================
   HEADER v1.5 — vertical alignment del menú con logo y buscador
   ============================================================= */
.ps-mainmenu--desktop {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}
.ps-mainmenu__desktop {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: 100%;
}
.ps-mainmenu__tree {
  align-items: center !important;
  height: auto !important;
}
.ps-mainmenu__tree-item {
  display: flex !important;
  align-items: center !important;
}
.ps-mainmenu__tree-item-wrapper {
  align-items: center !important;
}

/* Quitar padding vertical extra del link — ya lo centra el flex */
.ps-mainmenu__tree-link {
  padding: .25rem 0 !important;
  display: inline-flex;
  align-items: center;
}

/* HEADER v1.6 — refuerzo vertical align todas las columnas */
.header-bottom__row {
  align-items: center !important;
}
.header-bottom__row > [class*="col-"] {
  display: flex !important;
  align-items: center !important;
}

/* =============================================================
   HEADER v1.7 — alignment quirúrgico (fix real)
   ============================================================= */

/* El padre Bootstrap usa "align-items-stretch" que coloca los contenidos
   al top por defecto. Fuerza center con más peso. */
.header-bottom .row.align-items-stretch,
.header-bottom__row {
  align-items: center !important;
}

/* El col del menú: que sea flex vertical-center y su child nav ocupe el espacio */
.ps-mainmenu.ps-mainmenu--desktop {
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
  align-self: center !important;
}

/* El nav interno: resetear cualquier padding que lo empuje arriba */
.ps-mainmenu__desktop.js-menu-desktop {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

/* El UL tree y sus items también centrados */
ul.ps-mainmenu__tree {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: center !important;
  display: flex !important;
}

/* Cada item del menu: display flex con altura auto */
li.ps-mainmenu__tree-item {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}

/* Wrapper interno también */
.ps-mainmenu__tree-item-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: 1.2 !important;
}

/* Link con padding generoso (igual aprox al alto del logo) */
a.ps-mainmenu__tree-link {
  padding: 1rem 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
  height: auto !important;
}

/* =============================================================
   REASSURANCE · compromisos editorial
   ============================================================= */
.pm-reassure {
  background: #fff;
  border-top: 1px solid var(--pm-border-soft);
  border-bottom: 1px solid var(--pm-border-soft);
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.pm-reassure__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.pm-reassure__item {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.pm-reassure__icon {
  width: 44px;
  height: 44px;
  color: var(--pm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-reassure__icon svg {
  width: 100%;
  height: 100%;
}
.pm-reassure__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--pm-ink);
  margin: 0;
  line-height: 1.15;
}
.pm-reassure__desc {
  font-family: "Manrope", sans-serif;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--pm-ink-soft);
  margin: 0;
  max-width: 30ch;
}

@media (max-width: 920px) {
  .pm-reassure__inner { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 480px) {
  .pm-reassure__inner { grid-template-columns: 1fr; }
}


/* =============================================================
   MÓVIL v1.8 — FIX overflow horizontal
   Mi CSS v1.7 forzaba display:flex en el menú desktop ignorando el
   d-none de Bootstrap que lo oculta en <1200px. Ahora las reglas de
   flex/align sólo se aplican en desktop (≥1200px).
   ============================================================= */

/* Reset: neutralizar las reglas de flex forzado en móvil */
@media (max-width: 1199.98px) {
  .ps-mainmenu.ps-mainmenu--desktop {
    display: block !important;
    align-items: unset !important;
    flex: 0 0 auto !important;
  }
  .ps-mainmenu__desktop.js-menu-desktop.d-none {
    display: none !important;
  }
  ul.ps-mainmenu__tree,
  li.ps-mainmenu__tree-item,
  .ps-mainmenu__tree-item-wrapper,
  a.ps-mainmenu__tree-link {
    display: revert !important;
    align-items: unset !important;
  }
}

/* Aplicamos las reglas de alineación sólo en desktop */
@media (min-width: 1200px) {
  .ps-mainmenu.ps-mainmenu--desktop {
    display: flex !important;
    align-items: center !important;
  }
  .ps-mainmenu__desktop.js-menu-desktop {
    display: flex !important;
    align-items: center !important;
  }
}

/* Red de seguridad: ningún overflow horizontal en ninguna página */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
.wrapper, #wrapper, main {
  overflow-x: hidden;
}

/* El hero tenía blobs con translate que desbordaban en móvil */
.pm-hero { overflow: hidden !important; }
.pm-hero__inner { max-width: 100%; }

/* Categorías / productos: max-width 100% dentro del container */
.pm-cats, .pm-featured, .pm-reassure {
  max-width: 100%;
  overflow: hidden;
}

/* Botones y enlaces pequeños en móvil */
@media (max-width: 600px) {
  .pm-hero__title { font-size: clamp(2.2rem, 10vw, 3rem); }
  .pm-hero__ctas { flex-direction: column; gap: .75rem; }
  .pm-btn-primary, .pm-btn-ghost { width: 100%; justify-content: center; }
  .pm-hero__meta { gap: .75rem 1.25rem; font-size: .82rem; }
}

/* =============================================================
   FICHA DE PRODUCTO editorial
   ============================================================= */

/* Container principal */
#main .product__container,
.product__container {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3.5rem);
}
.product__left, .product__right { min-width: 0; }

/* === Galería === */
.product__images {
  position: relative;
}
.product__carousel {
  border-radius: var(--pm-radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pm-border-soft);
}
.product__carousel .carousel-item img {
  border-radius: var(--pm-radius-lg);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 2rem;
  background: #fff;
}
.product__thumbnails {
  margin-top: 1rem;
}
.product__thumbnails-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.product__thumbnail {
  padding: 0 !important;
  border: 2px solid transparent !important;
  border-radius: var(--pm-radius-sm) !important;
  background: #fff !important;
  transition: border-color .25s var(--pm-ease), transform .25s var(--pm-ease);
  width: 72px;
  height: 72px;
  overflow: hidden;
}
.product__thumbnail:hover { transform: translateY(-2px); }
.product__thumbnail.active { border-color: var(--pm-primary) !important; }
.product__thumbnail-image {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: .35rem;
  border-radius: 0 !important;
}

/* Zoom button */
.product__zoom {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: #fff !important;
  color: var(--pm-ink) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: 50% !important;
  width: 44px; height: 44px;
  box-shadow: var(--pm-shadow-sm);
  transition: all .25s var(--pm-ease);
}
.product__zoom:hover {
  background: var(--pm-primary) !important;
  color: #fff !important;
  border-color: var(--pm-primary) !important;
  transform: scale(1.05);
}

/* === Columna derecha (info + acciones) === */
.product__right {
  padding-top: .5rem;
}

/* Marca como eyebrow arriba del título */
.product__manufacturer {
  order: -1;
  margin-bottom: .4rem !important;
}
.product__manufacturer a {
  font-family: "Manrope", sans-serif !important;
  font-size: .72rem !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--pm-ink-muted) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.product__manufacturer a::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.product__manufacturer a:hover {
  color: var(--pm-primary) !important;
}

/* Título del producto */
.product__name {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 300 !important;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em;
  color: var(--pm-ink);
  margin-bottom: 1.25rem !important;
}

/* Precios */
.product__prices,
.product__prices .product__price-and-shipping,
.product__prices .current-price,
.product__prices .product-price {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
}
.product__prices .current-price,
.product__prices .product-price,
.product__prices .price {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(1.8rem, 2.5vw, 2.2rem) !important;
  color: var(--pm-ink) !important;
  letter-spacing: -.02em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.product__prices .regular-price,
.product__prices .discount {
  font-family: "Manrope", sans-serif !important;
  font-size: 1rem !important;
  color: var(--pm-ink-muted) !important;
}
.product__prices .regular-price {
  text-decoration: line-through;
}
.product__prices .discount {
  background: var(--pm-accent) !important;
  color: var(--pm-ink) !important;
  padding: .25rem .65rem !important;
  border-radius: var(--pm-radius-pill) !important;
  font-weight: 500;
  font-size: .78rem !important;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.product__prices .tax-shipping-delivery-label {
  font-family: "Manrope", sans-serif !important;
  font-size: .82rem !important;
  color: var(--pm-ink-muted) !important;
  flex-basis: 100%;
  margin-top: .3rem;
}

/* Descripción corta */
.product__description-short {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pm-ink-soft);
  margin: 1.25rem 0 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--pm-border-soft);
}
.product__description-short p { margin-bottom: .75rem; }
.product__description-short p:last-child { margin-bottom: 0; }

/* === Variantes (color, tamaño) === */
.product-variants__group,
.product-variants > .product-variants-item {
  margin-bottom: 1.25rem;
}
.product-variants__title,
.product-variants > .product-variants-item .control-label {
  font-family: "Manrope", sans-serif !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--pm-ink-muted);
  margin-bottom: .5rem;
  display: block;
}

/* Select de variantes */
.product-variants select {
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-md);
  padding: .75rem 1rem !important;
  font-family: "Manrope", sans-serif;
  font-size: .95rem;
  color: var(--pm-ink);
  cursor: pointer;
}
.product-variants select:focus {
  outline: none;
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgba(44,95,141,0.1);
}

/* Color swatches — botones radio visuales */
.product-variants__color-swatches,
.product-variants ul.variant-radio-list,
.product-variants .variant-radio-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-variants__color-swatches li,
.product-variants ul.variant-radio-list li {
  margin: 0;
}
.product-variants__color-swatch,
.product-variants__color-swatch-item,
.product-variants label.variant-radio-label,
.variant-radio-label {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid var(--pm-border) !important;
  cursor: pointer;
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  transition: transform .25s var(--pm-ease), border-color .25s var(--pm-ease);
}
.variant-radio-label:hover,
.product-variants__color-swatch:hover { transform: scale(1.08); }
.variant-radio-label.selected,
.variant-radio-label[aria-checked="true"],
.product-variants__color-swatch.active,
.product-variants__color-swatch[data-active="true"] {
  border-color: var(--pm-primary) !important;
  box-shadow: 0 0 0 3px rgba(44,95,141,0.15);
}

/* Cantidad */
.product-quantity,
.product__quantity,
.qty {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.product-quantity input,
.product__quantity input,
.input-group input.qty-input {
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-pill);
  padding: .6rem 1rem;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  width: 80px;
  text-align: center;
  color: var(--pm-ink);
}

/* === Botón añadir al carrito + acciones === */
.product__actions {
  margin-top: 1.5rem;
}
.product-add-to-cart {
  margin-bottom: 1rem;
}
.product-add-to-cart .btn,
.btn.add-to-cart,
button.btn-add-to-cart,
.btn-primary[name="add-to-cart"],
.btn-primary.add-to-cart {
  background: var(--pm-primary) !important;
  border-color: var(--pm-primary) !important;
  color: #fff !important;
  padding: 1rem 2rem !important;
  border-radius: var(--pm-radius-pill) !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
  width: 100%;
  max-width: 420px;
  transition: all .3s var(--pm-ease) !important;
  box-shadow: 0 6px 20px -8px rgba(44,95,141,.45);
}
.product-add-to-cart .btn:hover,
.btn.add-to-cart:hover {
  background: #1F4265 !important;
  border-color: #1F4265 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px rgba(44,95,141,.55) !important;
}

/* Reassurance dentro de la ficha */
.product__reassurance,
#block-reassurance,
.block-reassurance {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pm-border-soft);
}
.block-reassurance ul,
#block-reassurance ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.block-reassurance li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.block-reassurance li img,
.block-reassurance li svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  filter: saturate(0) brightness(.5);
  opacity: .8;
}
.block-reassurance .block-reassurance-item span,
.block-reassurance-item span {
  font-family: "Manrope", sans-serif;
  font-size: .88rem;
  color: var(--pm-ink-soft);
  line-height: 1.4;
}

/* === Tabs descripción/specs/reviews === */
.product-nav,
.product__tabs,
.tabs,
.product-additional-info + .row,
ul.nav.nav-tabs {
  border: 0 !important;
  border-bottom: 1px solid var(--pm-border) !important;
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  max-width: 1280px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.nav-tabs .nav-link {
  font-family: "Manrope", sans-serif !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: var(--pm-ink-muted) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 1rem 0 !important;
  margin-right: 2rem !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  transition: color .3s var(--pm-ease), border-color .3s var(--pm-ease);
}
.nav-tabs .nav-link:hover { color: var(--pm-ink) !important; }
.nav-tabs .nav-link.active {
  color: var(--pm-primary) !important;
  border-bottom-color: var(--pm-primary) !important;
  background: transparent !important;
}
.tab-content {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3.5rem) !important;
  max-width: 1280px;
  margin: 0 auto;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--pm-ink-soft);
}
.tab-content h2, .tab-content h3 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--pm-ink);
  margin: 1.5rem 0 .75rem;
  font-weight: 400;
}
.tab-content h2 { font-size: 1.5rem; }
.tab-content h3 { font-size: 1.2rem; }
.tab-content p { margin-bottom: .85rem; }
.tab-content ul, .tab-content ol { margin: 0 0 1rem 1.25rem; }
.tab-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .92rem;
}
.tab-content table th,
.tab-content table td {
  padding: .65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--pm-border-soft);
}
.tab-content table th {
  font-weight: 500;
  color: var(--pm-ink);
  background: var(--pm-base);
}

/* === Productos relacionados / accesorios === */
.product-accessories {
  max-width: 1280px;
  margin: clamp(2rem, 4vw, 3.5rem) auto;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem);
  border-top: 1px solid var(--pm-border-soft);
}
.product-accessories h2,
.product-accessories .h3 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 300 !important;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
  letter-spacing: -.02em;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* === Breadcrumb editorial === */
.breadcrumb {
  background: transparent !important;
  padding: 1.5rem clamp(1.25rem, 4vw, 3.5rem) 0 !important;
  max-width: 1280px;
  margin: 0 auto !important;
  font-family: "Manrope", sans-serif;
  font-size: .82rem;
}
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--pm-ink-muted) !important;
  text-decoration: none;
  transition: color .25s var(--pm-ease);
}
.breadcrumb-item a:hover { color: var(--pm-primary) !important; }
.breadcrumb-item + .breadcrumb-item::before {
  content: "›" !important;
  color: var(--pm-ink-muted);
  opacity: .5;
  padding: 0 .5rem !important;
}
.breadcrumb-item.active {
  color: var(--pm-ink) !important;
}

/* === Flags producto (novedad, rebaja) === */
.product-flags,
.product__flags {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  z-index: 2;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.product-flag {
  background: var(--pm-accent) !important;
  color: var(--pm-ink) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: .7rem !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .3rem .75rem !important;
  border-radius: var(--pm-radius-pill) !important;
}
.product-flag.new,
.product-flag.novedad { background: var(--pm-primary) !important; color: #fff !important; }
.product-flag.on-sale,
.product-flag.discount { background: var(--pm-highlight) !important; color: var(--pm-ink) !important; }

/* === Responsive ficha === */
@media (max-width: 920px) {
  .product__container { grid-template-columns: 1fr !important; }
  .block-reassurance ul { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .product-add-to-cart .btn,
  .btn.add-to-cart { font-size: .95rem !important; padding: .9rem 1.5rem !important; }
  .product__thumbnail { width: 58px; height: 58px; }
}

/* =============================================================
   FIX cantidad (stepper compacto)
   Mi CSS v1 hacía los +/- del tamaño del botón comprar — eran botones
   bootstrap-touchspin que se comían el 100% de ancho.
   ============================================================= */

/* Stepper en línea compacto */
.quantity-button,
.product__quantity.quantity-button,
.product-actions__quantity.quantity-button {
  display: block !important;
  width: auto !important;
  margin-bottom: 1rem !important;
}
.quantity-button__group,
.quantity-button__group.input-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-pill);
  overflow: hidden;
  width: auto !important;
  max-width: 140px;
  padding: .2rem;
}

/* Botones + y - compactos (override del .btn padding grande) */
.quantity-button__group .btn.decrement,
.quantity-button__group .btn.increment,
.js-decrement-button,
.js-increment-button,
.btn.btn-square-icon.js-decrement-button,
.btn.btn-square-icon.js-increment-button {
  all: unset;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--pm-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background .2s var(--pm-ease), color .2s var(--pm-ease);
  box-shadow: none !important;
  flex: 0 0 34px !important;
}
.quantity-button__group .btn.decrement:hover,
.quantity-button__group .btn.increment:hover,
.js-decrement-button:hover,
.js-increment-button:hover {
  background: var(--pm-base) !important;
  color: var(--pm-primary) !important;
  transform: none !important;
}
.quantity-button__group .btn .material-icons {
  font-size: 18px !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Input de cantidad compacto en medio */
.quantity-button__group .form-control,
.quantity-button__group input.js-quantity-wanted,
input#quantity_wanted,
input.js-quantity-wanted {
  all: unset;
  width: 40px !important;
  max-width: 40px !important;
  min-width: 0 !important;
  height: 34px;
  text-align: center;
  font-family: "Manrope", sans-serif !important;
  font-size: .95rem !important;
  font-weight: 500;
  color: var(--pm-ink) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px !important;
}
.quantity-button__group .form-control:focus,
input#quantity_wanted:focus {
  outline: none !important;
  background: var(--pm-base) !important;
}

/* El botón añadir-al-carrito se queda como estaba (grande) — sólo bloqueamos que se vea afectado por reglas pillables */
.product-add-to-cart,
.add-to-cart-btn {
  display: block;
  width: 100%;
  max-width: 420px;
}

/* Opcional: etiqueta "Cantidad" si no aparece, discreta */
.quantity-button::before {
  content: "Cantidad";
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--pm-ink-muted);
  margin-bottom: .4rem;
  font-weight: 500;
}

/* Si Álvaro decide ocultarlo completamente en el futuro, basta con:
   .product__quantity { display: none !important; }
   Ya envía 1 por defecto. */

/* =============================================================
   HEADER v1.9 — fix móvil con logo subido
   El logo nuevo (1082×219) ocupaba demasiado ancho en móvil y
   empujaba el icono del carrito fuera del viewport.
   ============================================================= */

/* Limitar el tamaño del logo según viewport */
.header-bottom__logo .logo,
.header-bottom__logo img.logo {
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

@media (max-width: 1199px) {
  .header-bottom__logo .logo {
    max-height: 32px !important;
    max-width: 160px !important;
  }
}
@media (max-width: 560px) {
  .header-bottom__logo .logo {
    max-height: 28px !important;
    max-width: 130px !important;
  }
}

/* Asegurar que los iconos móviles (cuenta + carrito) se muestran sin comprimir */
#_mobile_ps_customersignin,
#_mobile_ps_shoppingcart {
  display: flex !important;
  flex-shrink: 0 !important;
}
#_mobile_ps_customersignin .header-block,
#_mobile_ps_shoppingcart .header-block {
  padding: .4rem .6rem !important;
  min-width: 40px;
}
#_mobile_ps_customersignin .header-block__icon,
#_mobile_ps_shoppingcart .header-block__icon {
  font-size: 22px !important;
}

/* El row del header en móvil: todo en una línea, sin wrap, espaciado compacto */
@media (max-width: 1199px) {
  .header-bottom__row {
    flex-wrap: nowrap !important;
    gap: .5rem !important;
    padding: 0 .5rem;
  }
  .header-bottom__logo {
    flex: 1 1 auto !important;
    min-width: 0;
  }
  .header-bottom__row > [class*="col-"] {
    flex: 0 0 auto !important;
    min-width: 0;
  }
  /* Iconos móviles siempre visibles */
  #_mobile_ps_customersignin,
  #_mobile_ps_shoppingcart {
    flex: 0 0 auto !important;
  }
}

/* =============================================================
   HEADER v2.0 — móvil con carrito forzadamente visible
   El carrito quedaba cortado por overflow-x:hidden. Reducimos
   logo, permitimos wrap y forzamos flex-shrink 0 con display importante.
   ============================================================= */

@media (max-width: 1199px) {
  .header-bottom__row {
    flex-wrap: nowrap !important;
    gap: .25rem !important;
    padding: 0 .5rem !important;
    justify-content: flex-end !important;
  }
  /* Logo con me-auto (Bootstrap) empuja todo lo demás al final */
  .header-bottom__logo {
    margin-right: auto !important;
    flex: 0 1 auto !important;
  }
  .header-bottom__logo .logo {
    max-height: 32px !important;
    max-width: 120px !important;
  }
  /* Ocultar el ps-searchbar desktop interior en móvil (el de la derecha) */
  #_desktop_ps_searchbar { display: none !important; }

  /* Los 3 iconos móviles: hamburger, lupa, cuenta, carrito */
  .ps-mainmenu__mobile-toggle,
  .ps-searchbar--mobile,
  #_mobile_ps_customersignin,
  #_mobile_ps_shoppingcart {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }
  .ps-mainmenu__mobile-toggle .header-block,
  .ps-searchbar--mobile .header-block,
  #_mobile_ps_customersignin .header-block,
  #_mobile_ps_shoppingcart .header-block {
    padding: .35rem .45rem !important;
    min-width: 0 !important;
  }
  .ps-mainmenu__mobile-toggle .header-block__icon,
  .ps-searchbar--mobile .header-block__icon,
  #_mobile_ps_customersignin .header-block__icon,
  #_mobile_ps_shoppingcart .header-block__icon {
    font-size: 22px !important;
    margin: 0 !important;
  }
  /* El badge del carrito compacto */
  #_mobile_ps_shoppingcart .header-block__badge {
    font-size: .65rem !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 .3rem !important;
  }
}

@media (max-width: 420px) {
  .header-bottom__logo .logo {
    max-height: 24px !important;
    max-width: 100px !important;
  }
  .header-bottom__row {
    gap: .15rem !important;
    padding: 0 .35rem !important;
  }
}

/* =============================================================
   FICHA PRODUCTO v2 — selector de color cerca de la imagen
   ============================================================= */

/* Convertir columna derecha a flex-column para usar "order" */
.product__right {
  display: flex !important;
  flex-direction: column;
  gap: .5rem;
}

/* Nuevo orden visual — variantes suben arriba, justo bajo marca+nombre+precio */
.product__manufacturer        { order: 1; }
.product__name                { order: 2; }
.product__prices              { order: 3; margin: .25rem 0 1.25rem; }

/* Bloque de variantes (color, tamaño, grupo): justo debajo del precio */
.product-variants,
.product__variants,
.product-variants__group,
[class*="product-variants"]:not([class*="customization"]) {
  order: 4;
  margin-top: 0;
}

/* Descripción corta BAJA un pelín */
.product__description-short   { order: 5; margin-top: 1.25rem; }

/* Customization (si hay) y alertas de stock */
.product__customization,
.product-availability,
.product-minimal-quantity    { order: 6; }

/* Stepper cantidad y botón añadir-al-carrito van al final */
.product__quantity,
.product-quantity            { order: 7; }
.product__actions,
.product-add-to-cart         { order: 8; }

.product__reassurance,
.block-reassurance           { order: 9; }

.product__social,
.product-social-sharing      { order: 10; }

/* En móvil: hacer la galería sticky al hacer scroll para ver siempre
   la imagen cuando cambias color (en stacked layout, imagen arriba y
   el selector puede quedar fuera del viewport). */
@media (max-width: 920px) {
  .product__left {
    position: sticky;
    top: 60px; /* debajo del header sticky */
    z-index: 5;
    background: var(--pm-base);
    padding-bottom: .5rem;
  }
  .product__left .product__images {
    max-height: 45vh;
    overflow: hidden;
    border-radius: var(--pm-radius-lg);
  }
  .product__left .product__carousel .carousel-item img {
    padding: 1rem;
    max-height: 42vh;
    object-fit: contain;
  }
  .product__thumbnails { display: none; } /* liberar espacio vertical en móvil sticky */
}

/* =============================================================
   FICHA v3 — restaurar thumbnails móvil + slot variantes arriba
   ============================================================= */

/* Restaurar thumbnails en móvil, compactas */
@media (max-width: 920px) {
  .product__thumbnails { display: block !important; margin-top: .5rem; }
  .product__thumbnails-list { gap: .35rem !important; }
  .product__thumbnail {
    width: 48px !important;
    height: 32px !important;
  }
  /* Quitar el max-height del images que forzaba el esconder */
  .product__left .product__images { max-height: none; overflow: visible; }
  .product__left .product__carousel .carousel-item img {
    max-height: 40vh;
    padding: .75rem;
  }
}

/* Slot placeholder: sin estilo propio, solo hueco */
.pm-variants-slot:empty { display: none; }
.pm-variants-slot { margin: 0 0 1.5rem; }
.pm-variants-slot .product-variants { margin-bottom: 0; }

/* Ajustar order de elementos (ahora que las variantes quedan en su sitio real) */
.product__description-short { margin-top: 0 !important; }

/* =============================================================
   FICHA v4 — compactar espacios entre bloques
   Álvaro pidió reducir el espacio muerto entre elementos
   ============================================================= */

/* Gap general de la columna derecha */
.product__right {
  gap: .15rem !important;
}

/* Marca: sin gap inferior */
.product__manufacturer { margin-bottom: .3rem !important; }

/* Nombre: compacto */
.product__name {
  margin-bottom: .4rem !important;
  line-height: 1.02 !important;
}

/* Precio: compacto, sin margen vertical grande */
.product__prices {
  margin: .35rem 0 .5rem !important;
}
.product__prices .tax-shipping-delivery-label {
  margin-top: .2rem;
  font-size: .78rem !important;
}

/* Slot variantes movido — sin aire excesivo */
.pm-variants-slot { margin: .5rem 0 .25rem !important; }
.pm-variants-slot .product-variants { margin: 0 !important; }
.pm-variants-slot .product-variants__group,
.pm-variants-slot [class*="product-variants-item"],
.product-variants > .product-variants-item {
  margin-bottom: .4rem !important;
}
.pm-variants-slot .control-label,
.pm-variants-slot .product-variants__title {
  margin-bottom: .3rem !important;
}

/* Descripción corta: sin divider grande ni padding */
.product__description-short {
  margin: .75rem 0 .75rem !important;
  padding-bottom: .75rem !important;
  font-size: .95rem;
}
.product__description-short p { margin-bottom: .5rem !important; }

/* Stock / availability messages: compactos */
.product-availability,
.product__availability,
.product-minimal-quantity {
  margin: .25rem 0 !important;
  font-size: .92rem;
}

/* Stepper cantidad con margen ajustado */
.quantity-button,
.product__quantity.quantity-button,
.product-actions__quantity.quantity-button {
  margin: .5rem 0 .75rem !important;
}

/* Botón añadir al carrito: margen superior reducido */
.product-add-to-cart,
.product__actions {
  margin-top: .5rem !important;
}

/* Reassurance: margen vertical menor */
.product__reassurance,
#block-reassurance,
.block-reassurance {
  margin-top: 1.25rem !important;
  padding-top: 1rem !important;
}

/* =============================================================
   FICHA v5 — ajustes finos UX
   1) Menos espacio miniaturas↔selector color
   2) Reorden: Título → Descripción corta → Precio → Variantes
   3) Ocultar selector de cantidad; botón compra protagoniza
   ============================================================= */

/* 1) Gap más corto entre galería (sticky en móvil) y la info que la sigue */
.pm-variants-slot { margin: .25rem 0 !important; }

@media (max-width: 920px) {
  .product__left { padding-bottom: .25rem !important; }
  .product__right { padding-top: .5rem !important; }
  .product__thumbnails { margin-top: .35rem !important; }
}

/* Desktop tambien menos aire entre galería y columna info */
@media (min-width: 921px) {
  .product__container { gap: clamp(1.5rem, 3vw, 3rem) !important; }
}

/* 2) Nuevo orden: Marca → Título → Descripción → Precio → Variantes → stock/cta */
.product__manufacturer        { order: 1 !important; }
.product__name                { order: 2 !important; margin-bottom: .6rem !important; }
.product__description-short   { order: 3 !important; margin: 0 0 .85rem !important; padding: 0 !important; border-bottom: 0 !important; }
.product__prices              { order: 4 !important; margin: .25rem 0 .85rem !important; }
.pm-variants-slot             { order: 5 !important; }
.product-availability,
.product__availability,
.product-minimal-quantity     { order: 6 !important; }
.product__actions             { order: 7 !important; }
.product__reassurance,
.block-reassurance            { order: 8 !important; }
.product__social,
.product-social-sharing       { order: 9 !important; }

/* Separador fino decorativo entre descripción y precio */
.product__description-short::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--pm-border);
  margin-top: .85rem;
}

/* 3) Ocultar completo el selector de cantidad — el carrito mantiene 1 por defecto */
.product__quantity,
.product-quantity,
.product__actions-qty-add .quantity-button,
.quantity-button {
  display: none !important;
}

/* Botón compra: más grande, protagonista (ocupa todo el ancho útil) */
.product-add-to-cart .btn,
.btn.add-to-cart,
button.btn-add-to-cart,
.btn-primary.add-to-cart,
.product__actions .btn-primary {
  width: 100% !important;
  max-width: 480px !important;
  padding: 1.15rem 2rem !important;
  font-size: 1.05rem !important;
  letter-spacing: .01em !important;
}

/* =============================================================
   FICHA v6 — fixes críticos
   a) Botón compra desapareció porque .product-quantity pillaba también
      el contenedor padre .product__actions-qty-add. Escoped más fino.
   b) Gap miniaturas↔info móvil aún grande: bajarlo.
   c) Selector color ahora JUSTO BAJO TÍTULO (antes de descripción).
   ============================================================= */

/* a) RESTAURAR visibilidad del add-to-cart */
.product__actions-qty-add,
.product-actions,
.product__actions {
  display: block !important;
}

/* Sólo ocultamos el stepper interno, NO el contenedor completo */
.quantity-button,
.product__quantity.quantity-button,
.product-actions__quantity {
  display: none !important;
}

/* b) Eliminar el aire restante en móvil entre galería y info */
@media (max-width: 920px) {
  .product__container {
    gap: .25rem !important;
    padding-top: .5rem !important;
  }
  .product__left {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .product__right {
    padding-top: .25rem !important;
  }
  .product__manufacturer { margin-top: .25rem !important; }
}

/* c) Color entre TÍTULO y DESCRIPCIÓN */
.product__manufacturer        { order: 1 !important; }
.product__name                { order: 2 !important; }
.pm-variants-slot             { order: 3 !important; margin: .4rem 0 .6rem !important; }
.product__description-short   { order: 4 !important; }
.product__prices              { order: 5 !important; }
.product-availability,
.product__availability        { order: 6 !important; }
.product__actions             { order: 7 !important; }
.product__reassurance,
.block-reassurance            { order: 8 !important; }
.product__social,
.product-social-sharing       { order: 9 !important; }

/* La línea corta divisoria ahora va tras el precio (no tras la descripción) */
.product__description-short::after { display: none !important; }
.product__prices::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--pm-border);
  margin-top: .85rem;
}

/* =============================================================
   FICHA v7 — reordenar SIN romper el form (display: contents)
   Mover variantes fuera del form rompía los listeners Ajax. Con
   display:contents el form sigue siendo padre DOM (listeners intactos)
   pero sus hijos participan como si fueran hijos del product__right.
   ============================================================= */

/* Form ya no aporta caja de layout (pero sí funcionalidad form) */
.product__actions,
.product__actions .js-product-actions,
form#add-to-cart-or-refresh {
  display: contents !important;
}

/* Aplicar order directamente a los elementos originales dentro del form */
.product-variants,
.product__variants {
  order: 3 !important;
  margin: .4rem 0 .6rem !important;
  display: block !important;
}
.product__description-short { order: 4 !important; }
.product__prices            { order: 5 !important; }
.product-availability,
.product__availability,
.product-minimal-quantity   { order: 6 !important; }

/* El stepper sigue oculto (selector de cantidad) */
.quantity-button,
.product__quantity.quantity-button,
.product-actions__quantity  { display: none !important; }

/* El bloque "product-add-to-cart" (wrapping del botón) con order para que quede bajo todo */
.product-add-to-cart        { order: 7 !important; margin-top: 1rem !important; }

/* Reassurance y social al final */
.product__reassurance,
.block-reassurance          { order: 8 !important; }
.product__social,
.product-social-sharing     { order: 9 !important; }

/* Ya no necesitamos el slot (no existe) */
.pm-variants-slot           { display: none !important; }

/* =============================================================
   FICHA v8 — quitar separador decorativo tras precio
   En móvil aparecía como "rayita suelta" al lado del € por ser
   un pseudo-block dentro del flex del .product__prices (flex-wrap)
   ============================================================= */
.product__prices::after { display: none !important; content: none !important; }
.product__description-short::after { display: none !important; content: none !important; }

/* =============================================================
   CATEGORY · listado de productos editorial
   ============================================================= */

/* Container global de categoría */
#content-wrapper.category-products,
body.category #content,
body#category #content-wrapper,
body.category-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

/* === Header de categoría === */
.category__header {
  margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1280px;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

/* Título de la categoría */
h1.page-title-section,
.category__header .page-title-section,
.page-title-section {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 300 !important;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(2.3rem, 5vw, 3.6rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.025em;
  color: var(--pm-ink) !important;
  margin: 0 0 .75rem !important;
}

/* Descripción de la categoría */
.category__description {
  font-family: "Manrope", sans-serif;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--pm-ink-soft);
  max-width: 68ch;
  margin-bottom: 1.5rem;
}
.category__description h2,
.category__description h3 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--pm-ink);
  margin-top: 1.25rem;
}

/* Cover image de la categoría */
.category__cover {
  margin: 1.5rem 0 1rem;
  border-radius: var(--pm-radius-lg);
  overflow: hidden;
  aspect-ratio: 5/1;
}
.category__cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Subcategorías dentro del header (chip pills) */
.subcategories,
.category__subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.subcategory,
.category__subcategory,
.subcategories .subcategory-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1rem;
  border-radius: var(--pm-radius-pill);
  background: #fff;
  border: 1px solid var(--pm-border);
  color: var(--pm-ink);
  font-family: "Manrope", sans-serif;
  font-size: .88rem;
  font-weight: 500;
  transition: all .25s var(--pm-ease);
}
.subcategory:hover,
.category__subcategory:hover,
.subcategories .subcategory-link:hover {
  background: var(--pm-primary);
  color: #fff;
  border-color: var(--pm-primary);
  transform: translateY(-1px);
}

/* === Products top: contador + sort === */
.products__selection,
#js-product-list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 1280px;
  margin: clamp(1rem, 2vw, 1.5rem) auto 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--pm-border-soft);
  border-bottom: 1px solid var(--pm-border-soft);
}
.products__count {
  font-family: "Manrope", sans-serif;
  font-size: .88rem;
  color: var(--pm-ink-muted);
}
.products__count span {
  font-weight: 500;
  color: var(--pm-ink);
}
.products__sort {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.products__sort-label {
  font-family: "Manrope", sans-serif;
  font-size: .82rem;
  color: var(--pm-ink-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.products__sort-dropdown-button,
.products__sort button.dropdown-toggle {
  background: #fff !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-ink) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  padding: .55rem 1.25rem !important;
  border-radius: var(--pm-radius-pill) !important;
  transition: border-color .25s var(--pm-ease), background .25s var(--pm-ease);
}
.products__sort-dropdown-button:hover,
.products__sort button.dropdown-toggle:hover {
  border-color: var(--pm-primary) !important;
  background: var(--pm-base) !important;
}
.products__sort .dropdown-menu {
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-md);
  box-shadow: var(--pm-shadow-md);
  padding: .5rem 0;
  background: #fff;
  min-width: 240px;
}
.products__sort .dropdown-item {
  font-family: "Manrope", sans-serif;
  font-size: .88rem;
  padding: .6rem 1rem;
  color: var(--pm-ink);
  transition: all .2s var(--pm-ease);
}
.products__sort .dropdown-item:hover,
.products__sort .dropdown-item.current {
  background: var(--pm-base);
  color: var(--pm-primary);
  padding-left: 1.5rem;
}

/* === Active filters (si hay) === */
#js-active-search-filters {
  max-width: 1280px;
  margin: 0 auto 1rem;
}
.filter-block {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  background: var(--pm-base);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-pill);
  font-family: "Manrope", sans-serif;
  font-size: .82rem;
  color: var(--pm-ink);
  margin: 0 .3rem .3rem 0;
}
.filter-block a {
  color: var(--pm-ink-muted);
  line-height: 1;
  transition: color .2s var(--pm-ease);
}
.filter-block a:hover { color: var(--pm-primary); }

/* === Grid de productos === */
.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(1rem, 2vw, 1.75rem) !important;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 !important;
  list-style: none;
}
.products .product-miniature,
article.product-miniature {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block;
}
.product-miniature__inner,
.product-miniature .card {
  background: #fff;
  border: 1px solid var(--pm-border-soft);
  border-radius: var(--pm-radius-md);
  overflow: hidden;
  transition: transform .4s var(--pm-ease), box-shadow .4s var(--pm-ease), border-color .4s var(--pm-ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-miniature__inner:hover,
.product-miniature .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-shadow-md);
  border-color: var(--pm-primary);
}

.product-miniature__top,
.product-miniature__image-container,
.thumbnail-container {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
}
.product-miniature__image-container img,
.thumbnail-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
}

/* Info de la miniatura */
.product-miniature__body,
.product-description {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}
.product-miniature__manufacturer,
.product-miniature__brand,
.product-manufacturer {
  font-family: "Manrope", sans-serif;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--pm-ink-muted);
  font-weight: 500;
}
.product-miniature__title,
.product-miniature .product-title,
.product-title a {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: 1.05rem !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em;
  color: var(--pm-ink) !important;
  text-decoration: none !important;
  margin: 0 0 .2rem !important;
  display: block;
}
.product-miniature__price,
.product-miniature .product-price-and-shipping,
.product-price-and-shipping {
  margin-top: auto;
  padding-top: .5rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.product-miniature__price .price,
.product-price-and-shipping .price {
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: var(--pm-ink) !important;
  font-feature-settings: "tnum" 1;
}
.product-miniature__price .regular-price,
.product-price-and-shipping .regular-price {
  font-family: "Manrope", sans-serif;
  font-size: .85rem;
  color: var(--pm-ink-muted);
  text-decoration: line-through;
}
.product-miniature__price .discount,
.product-price-and-shipping .discount {
  display: none; /* ya lo indica el badge arriba */
}

/* === Paginación === */
.pagination,
nav.pagination {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: .35rem;
  margin: clamp(2rem, 4vw, 3.5rem) auto clamp(2rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
}
.pagination a,
.pagination .page-list a,
.pagination button,
.pagination .page-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .75rem;
  font-family: "Manrope", sans-serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--pm-ink) !important;
  background: #fff !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-pill) !important;
  text-decoration: none !important;
  transition: all .25s var(--pm-ease);
}
.pagination a:hover,
.pagination .page-link:hover {
  background: var(--pm-base) !important;
  border-color: var(--pm-primary) !important;
  color: var(--pm-primary) !important;
}
.pagination .current a,
.pagination .active .page-link,
.pagination .active a {
  background: var(--pm-primary) !important;
  color: #fff !important;
  border-color: var(--pm-primary) !important;
}
.pagination .disabled a,
.pagination .disabled .page-link {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* === Filtros facetados (sidebar) si existen === */
#search_filters,
.js-search-filters-clear-all,
.search-filters {
  font-family: "Manrope", sans-serif;
  font-size: .9rem;
  background: #fff;
  border-radius: var(--pm-radius-md);
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--pm-border-soft);
}
.facet,
.search-filter-block {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pm-border-soft);
}
.facet:last-child,
.search-filter-block:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.facet h4,
.facet .facet-title,
.search-filter-block-title {
  font-family: "Manrope", sans-serif;
  font-size: .72rem !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  color: var(--pm-ink-muted);
  margin-bottom: .75rem;
}
.facet ul, .facet__items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.facet li, .facet__item {
  padding: .3rem 0;
}
.facet label {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .9rem;
  color: var(--pm-ink);
}
.facet input[type="checkbox"],
.facet input[type="radio"] {
  accent-color: var(--pm-primary);
}
.facet label:hover { color: var(--pm-primary); }
.magnitude,
.facet__item-count {
  color: var(--pm-ink-muted);
  font-size: .78rem;
  margin-left: auto;
}

/* === Responsive === */
@media (max-width: 1024px) {
  .products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
  .products { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
  .category__cover { aspect-ratio: 3/1; }
  .products__selection {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 420px) {
  .products { grid-template-columns: 1fr !important; }
  .product-miniature__image-container img { padding: 1.5rem; }
}

/* =============================================================
   CATEGORY — simplificaciones
   - ps_categorytree desinstalado por BO (ya hay hamburger)
   - Cover image de categoría oculto (no aportaba, salía el placeholder ?)
   ============================================================= */
.category__cover,
.category-cover,
#category-image { display: none !important; }

/* Por si el módulo se reactiva */
.block-category-tree,
.category-tree,
#category-tree-wrapper,
[class*="categorytree"] { display: none !important; }

/* Header categoría con más aire ahora que no hay cover */
.category__header { margin-top: clamp(1rem, 2vw, 2rem); }

/* =============================================================
   CATEGORY v2 — compactar espaciado vertical
   ============================================================= */

/* Breadcrumb con menos aire */
.breadcrumb {
  padding: 1rem clamp(1.25rem, 4vw, 3.5rem) .5rem !important;
}

/* Header de categoría: menos espacio arriba y abajo */
.category__header {
  margin: .5rem auto 1rem !important;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) !important;
}
h1.page-title-section {
  margin-bottom: .5rem !important;
}
.category__description {
  margin-bottom: 1rem;
  font-size: .98rem;
}

/* Products top (sort + count): bandita compacta sin aire */
.products__selection,
#js-product-list-top {
  padding: .65rem 0 !important;
  margin: 0 auto 1rem !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* En móvil: mantener sort + count en UNA sola fila horizontal (no apilar) */
@media (max-width: 720px) {
  .products__selection,
  #js-product-list-top {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    padding: .5rem 0 !important;
  }
  .products__count { order: 2; font-size: .82rem; }
  .products__sort { order: 1; }
  .products__sort-label { display: none; }
  .products__sort-dropdown-button,
  .products__sort button.dropdown-toggle {
    padding: .45rem 1rem !important;
    font-size: .82rem !important;
  }
}

/* Active filters: margen mínimo */
#js-active-search-filters {
  margin-bottom: .75rem;
}
#js-active-search-filters:empty { display: none !important; }

/* Grid de productos: sin margen top excesivo */
#js-product-list {
  margin-top: 0 !important;
}
.products {
  margin-top: 0 !important;
}

/* =============================================================
   CATEGORY v3 — quitar 2 separadores del sort bar
   Dejamos solo el border-bottom del header (separa scroll).
   Los 2 separadores del sort bar eran ruido visual.
   ============================================================= */
.products__selection,
#js-product-list-top {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* El contador con un pelín de color para que no flote sin estructura */
.products__count {
  opacity: .75;
}

/* =============================================================
   CHECKOUT + CARRITO + MI CUENTA editorial
   ============================================================= */

/* Container global de carrito/checkout/account */
body#cart #content-wrapper,
body#checkout #content-wrapper,
body#my-account #content-wrapper,
body#identity #content-wrapper,
body#addresses #content-wrapper,
body#history #content-wrapper,
body#order-detail #content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 4vw, 3.5rem);
}

/* Título principal */
.page-header h1,
body#cart h1,
body#checkout h1.step-title,
body#my-account h1 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 300 !important;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  letter-spacing: -.02em;
  color: var(--pm-ink);
  margin-bottom: 1.5rem !important;
}

/* =============================================================
   CARRITO
   ============================================================= */

.cart-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.cart-grid-body,
.cart-grid-right {
  min-width: 0;
}

/* Tarjeta del carrito */
.cart-container,
.card.cart-container,
.cart-grid-body .card {
  background: #fff;
  border: 1px solid var(--pm-border-soft) !important;
  border-radius: var(--pm-radius-md) !important;
  box-shadow: var(--pm-shadow-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}
.card-block,
.card-body {
  padding: clamp(1.25rem, 2.5vw, 2rem) !important;
}

/* Título de sección dentro del carrito */
.cart__title,
.cart__card-title,
.card-title {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.3rem !important;
  color: var(--pm-ink);
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

/* Líneas de producto en carrito */
.cart-item,
.cart__card-body .cart-item,
.product-line-info,
li.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--pm-border-soft);
  align-items: center;
}
.cart-item:last-child { border-bottom: 0; }

.cart-item__image,
.product-line-info__image {
  width: 100px;
  height: 100px;
  background: var(--pm-base);
  border-radius: var(--pm-radius-sm);
  overflow: hidden;
  padding: .5rem;
}
.cart-item__image img { width: 100%; height: 100%; object-fit: contain; }

.cart-item__title,
.product-line__title,
.product-line-info__title {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  color: var(--pm-ink) !important;
  text-decoration: none !important;
  line-height: 1.2;
  display: block;
}
.cart-item__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.cart-item__attributes,
.product-line-info__attribute,
.product-line-info__quantity {
  font-family: "Manrope", sans-serif;
  font-size: .82rem;
  color: var(--pm-ink-muted);
}

/* Precio en línea de producto */
.cart-item__price,
.product-price,
.cart-line-product-actions .price {
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--pm-ink) !important;
  font-feature-settings: "tnum" 1;
}

/* Botón remove */
.cart-item__delete,
.product-line-info__remove a,
.remove-from-cart {
  color: var(--pm-ink-muted) !important;
  background: transparent !important;
  border: 0 !important;
  padding: .35rem !important;
  font-size: .85rem;
  transition: color .2s var(--pm-ease);
}
.cart-item__delete:hover,
.product-line-info__remove a:hover,
.remove-from-cart:hover {
  color: var(--pm-ink) !important;
}

/* Stepper cantidad dentro del carrito */
.cart-item__qty,
.cart-item .input-group.bootstrap-touchspin,
.product-line-info__quantity .input-group {
  display: inline-flex !important;
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-pill);
  padding: .15rem;
  overflow: hidden;
}
.cart-item__qty input,
.cart-item__qty .cart-line-product-quantity {
  width: 38px !important;
  text-align: center;
  border: 0;
  background: transparent;
  font-family: "Manrope", sans-serif;
  font-size: .9rem;
  font-weight: 500;
}
.cart-item__qty button,
.cart-item__qty .btn-touchspin {
  width: 28px; height: 28px;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--pm-ink) !important;
  padding: 0 !important;
}
.cart-item__qty button:hover { background: var(--pm-base) !important; color: var(--pm-primary) !important; }

/* Resumen totales (sidebar) */
.cart-summary,
.cart-summary-top,
.cart-summary-totals,
.card.cart-summary {
  background: var(--pm-base) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-md) !important;
  padding: 1.5rem !important;
  position: sticky;
  top: 100px;
}
.cart-summary__line,
.cart-summary-totals__line,
.cart-summary__line-container,
.cart-summary-line {
  display: flex !important;
  justify-content: space-between;
  padding: .45rem 0;
  font-family: "Manrope", sans-serif;
  font-size: .92rem;
  color: var(--pm-ink);
}
.cart-total,
.cart-summary-totals__total,
.cart-summary__total-line-total,
.cart-summary-line-total {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: 1.35rem !important;
  color: var(--pm-ink) !important;
  border-top: 1px solid var(--pm-border);
  padding-top: .75rem !important;
  margin-top: .5rem !important;
}
.cart-summary-subtotals__label,
.cart-summary__line-label,
.cart-summary-line-label { color: var(--pm-ink-muted); }

/* Voucher input */
.block-promo,
.cart__promo,
.cart-voucher {
  margin-top: 1rem;
}
.promo-input,
.cart-voucher input[type="text"] {
  background: #fff !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-pill) !important;
  padding: .7rem 1rem !important;
  font-family: "Manrope", sans-serif;
  width: 100%;
}
.promo-input + button,
.cart-voucher button[type="submit"],
.js-discount button {
  margin-top: .5rem;
  width: 100%;
}

/* CTA Proceder al pago */
.cart-summary a.btn-primary,
#main .cart-detailed-actions .btn-primary,
.text-sm-center .btn-primary,
a.btn-primary.checkout,
.checkout a.btn {
  width: 100%;
  background: var(--pm-primary) !important;
  border-color: var(--pm-primary) !important;
  color: #fff !important;
  padding: 1rem 1.5rem !important;
  border-radius: var(--pm-radius-pill) !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
  margin-top: 1rem !important;
  transition: all .3s var(--pm-ease);
}

/* =============================================================
   CHECKOUT
   ============================================================= */

.checkout-process,
#checkout-process {
  background: transparent;
}

/* Cada step: tarjeta blanca independiente */
.checkout-step,
.js-checkout-step,
section.checkout-step {
  background: #fff !important;
  border: 1px solid var(--pm-border-soft) !important;
  border-radius: var(--pm-radius-md) !important;
  padding: clamp(1.25rem, 2.5vw, 2rem) !important;
  margin-bottom: 1rem;
  transition: border-color .3s var(--pm-ease), box-shadow .3s var(--pm-ease);
}
.checkout-step.js-current-step,
.checkout-step.current-step,
.checkout-step:not(.-complete):not(.-unreachable) {
  border-color: var(--pm-primary) !important;
  box-shadow: var(--pm-shadow-sm);
}

/* Título del step */
.step-title,
.checkout-step .step-title,
.step-title h1,
.step-title h2 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important;
  color: var(--pm-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Step numerados con círculo */
.checkout-step .step-number,
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--pm-border-soft);
  color: var(--pm-ink-muted);
  border-radius: 50%;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: .9rem;
}
.checkout-step.-complete .step-number,
.checkout-step.js-current-step .step-number {
  background: var(--pm-primary);
  color: #fff;
}

/* Forms en checkout */
.checkout-step form,
form.form-customer,
form.checkout-form {
  margin-top: 1rem;
}
.form-group,
.form-control-container {
  margin-bottom: 1rem;
}
.form-control-label,
label.form-control-label,
label {
  font-family: "Manrope", sans-serif;
  font-size: .85rem;
  font-weight: 500;
  color: var(--pm-ink);
  margin-bottom: .35rem;
  display: block;
}
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  background: #fff !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-md) !important;
  padding: .75rem 1rem !important;
  font-family: "Manrope", sans-serif;
  font-size: .95rem;
  color: var(--pm-ink);
  width: 100%;
  transition: border-color .25s var(--pm-ease), box-shadow .25s var(--pm-ease);
}
.form-control:focus {
  outline: none !important;
  border-color: var(--pm-primary) !important;
  box-shadow: 0 0 0 3px rgba(44,95,141,.12) !important;
}
.form-control::placeholder { color: var(--pm-ink-muted); opacity: .8; }
.form-control-comment {
  font-size: .78rem;
  color: var(--pm-ink-muted);
  margin-top: .25rem;
}

/* Radio / checkbox custom */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--pm-primary);
}

/* Dirección / entrega / pago option cards */
.delivery-option,
.payment-option,
.address-item {
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
  cursor: pointer;
  transition: all .25s var(--pm-ease);
}
.delivery-option:hover,
.payment-option:hover,
.address-item:hover {
  border-color: var(--pm-primary);
  background: var(--pm-base);
}
.delivery-option.selected,
.payment-option.selected,
.address-item.selected {
  border-color: var(--pm-primary);
  background: rgba(44,95,141,.05);
  box-shadow: 0 0 0 3px rgba(44,95,141,.1);
}

/* Botón continuar step */
.continue,
button.continue,
button.js-continue,
.btn.continue {
  background: var(--pm-primary) !important;
  color: #fff !important;
  border: 0 !important;
  padding: .95rem 2rem !important;
  border-radius: var(--pm-radius-pill) !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  transition: all .3s var(--pm-ease);
  margin-top: 1rem;
}
.continue:hover { background: #1F4265 !important; transform: translateY(-1px); }

/* Botón de confirmar pedido final */
#payment-confirmation button,
button.submit-confirm,
#payment-confirmation .btn-primary {
  background: var(--pm-primary) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 1.15rem 2rem !important;
  border-radius: var(--pm-radius-pill) !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  width: 100%;
  box-shadow: 0 6px 20px -8px rgba(44,95,141,.45);
}

/* Checkout layout — sidebar a la derecha */
#checkout #wrapper,
body#checkout .page-wrapper,
body#checkout section#checkout {
  display: block;
}
#js-checkout-summary,
.js-checkout-summary,
aside.cart-summary {
  position: sticky;
  top: 100px;
}

/* =============================================================
   MI CUENTA · dashboard
   ============================================================= */

.page-my-account #content .links,
#my-account .links,
.my-account-links {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}
.page-my-account .links a,
#my-account .links li a,
.links a {
  display: flex !important;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem !important;
  background: #fff !important;
  border: 1px solid var(--pm-border-soft) !important;
  border-radius: var(--pm-radius-md) !important;
  color: var(--pm-ink) !important;
  text-decoration: none !important;
  transition: all .3s var(--pm-ease);
  text-align: left;
}
.page-my-account .links a:hover,
#my-account .links li a:hover,
.links a:hover {
  border-color: var(--pm-primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--pm-shadow-sm);
}
.page-my-account .links a i,
#my-account .links li a i,
.links a i.material-icons {
  font-size: 28px !important;
  color: var(--pm-primary) !important;
  margin-bottom: .35rem;
}
.page-my-account .links a span,
#my-account .links li a span,
.links a .link-item {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.02rem !important;
  color: var(--pm-ink) !important;
}

/* Tablas de pedidos / direcciones */
table.table-bordered,
.history-table,
table.table {
  border: 1px solid var(--pm-border-soft) !important;
  border-radius: var(--pm-radius-md);
  overflow: hidden;
  font-family: "Manrope", sans-serif !important;
  font-size: .92rem !important;
  background: #fff !important;
}
table thead th {
  background: var(--pm-base) !important;
  color: var(--pm-ink) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: .72rem !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600 !important;
  padding: .9rem 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pm-border) !important;
}
table tbody td {
  padding: .85rem 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pm-border-soft) !important;
  color: var(--pm-ink) !important;
}
table tbody tr:last-child td { border-bottom: 0 !important; }

/* Estados de pedido (badges) */
.order-status,
.label-pill,
span.label {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: var(--pm-radius-pill);
  font-family: "Manrope", sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
}

/* Login form */
form.checkout-form#customer-form,
#customer-form,
#login-form {
  max-width: 480px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 920px) {
  .cart-grid { grid-template-columns: 1fr; }
  .cart-summary { position: static; margin-top: 1rem; }
  .cart-item { grid-template-columns: 80px 1fr auto; gap: .75rem; }
  .cart-item__image { width: 80px; height: 80px; }
}

/* =============================================================
   CARRITO v2 — fixes
   a) Quitar precio duplicado (unitario + total). Dejamos solo total.
   b) RESTAURAR stepper de cantidad en el carrito (mi regla global que
      lo ocultaba en ficha pillaba también aquí).
   ============================================================= */

/* a) Precio unitario fuera. Solo mostramos el total de la línea (.product-line__price) */
.product-line__item-prices,
.product-line__item-price {
  display: none !important;
}

/* Regular price (tachado, cuando hay descuento) sí se muestra pero pequeño al lado del total */
.product-line__item-regular-price {
  display: inline-block !important;
  font-family: "Manrope", sans-serif;
  font-size: .8rem;
  color: var(--pm-ink-muted);
  text-decoration: line-through;
  margin-right: .5rem;
}

/* Total destacado */
.product-line__price {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--pm-ink);
}

/* b) Restaurar stepper DENTRO del carrito (selector scope-limitado a cart) */
body#cart .quantity-button,
body#cart .product-line__quantity .quantity-button,
body#cart .input-group,
.product-line .quantity-button,
.cart__item .quantity-button,
.product-line .input-group {
  display: inline-flex !important;
}
body#cart .quantity-button .btn,
.product-line .quantity-button .btn,
.product-line .js-increment-button,
.product-line .js-decrement-button {
  display: inline-flex !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  align-items: center;
  justify-content: center;
}

/* =============================================================
   CARRITO v3 — stepper horizontal compacto alineado
   ============================================================= */

/* Sección cantidad en línea de producto */
.product-line__quantity,
.product-line .product-line__quantity,
body#cart .product-line__quantity {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  margin: .25rem 0 !important;
}

/* El stepper forzado a HORIZONTAL (no columna), pequeño, con borde pill */
body#cart .quantity-button,
body#cart .product-line__quantity .quantity-button,
body#cart .quantity-button__group,
.product-line .quantity-button,
.product-line .quantity-button__group,
.product-line .input-group,
.cart__item .quantity-button,
.product-line-info__quantity .quantity-button__group {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  background: #fff !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-pill) !important;
  padding: .15rem !important;
  width: auto !important;
  max-width: 120px !important;
  margin: 0 !important;
}

/* Desactivar el ::before "Cantidad" del stepper en el carrito (tenemos label separado o queda bien sin él) */
body#cart .quantity-button::before,
.product-line .quantity-button::before {
  display: none !important;
}

/* Botones del stepper — pequeños, circulares */
body#cart .quantity-button .btn,
.product-line .quantity-button .btn,
.product-line .js-decrement-button,
.product-line .js-increment-button,
.product-line .btn-touchspin,
.product-line-info__quantity button,
.product-line button.decrement,
.product-line button.increment {
  all: unset;
  width: 28px !important;
  height: 28px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--pm-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex: 0 0 28px !important;
  transition: background .2s var(--pm-ease), color .2s var(--pm-ease);
}
body#cart .quantity-button .btn:hover,
.product-line .quantity-button .btn:hover {
  background: var(--pm-base) !important;
  color: var(--pm-primary) !important;
}
.product-line .quantity-button .btn .material-icons,
.product-line .quantity-button .btn svg {
  font-size: 16px !important;
  line-height: 1;
}

/* Input número centrado */
body#cart .quantity-button input,
.product-line .quantity-button input,
.product-line input.js-quantity-wanted,
.product-line input.js-cart-line-product-quantity,
input.cart-line-product-quantity {
  all: unset;
  width: 30px !important;
  max-width: 30px !important;
  height: 28px;
  text-align: center !important;
  font-family: "Manrope", sans-serif !important;
  font-size: .88rem !important;
  font-weight: 500;
  color: var(--pm-ink) !important;
  background: transparent !important;
  flex: 0 0 30px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Label "Cantidad" — opcional, a la izquierda del stepper */
.product-line__quantity::before {
  content: "";
}
.product-line__item--quantity-label,
.product-line .cantidad-label {
  font-family: "Manrope", sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--pm-ink-muted);
  font-weight: 500;
}

/* =============================================================
   CARRITO v4 — fix doble píldora
   Había 3 contenedores con border-radius pill anidados. Dejamos
   el borde SOLO en el group más interno (.quantity-button__group).
   ============================================================= */

/* Los wrappers exteriores sin borde ni fondo */
body#cart .quantity-button,
.product-line .quantity-button,
body#cart .product-line__quantity,
.product-line .product-line__quantity {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Solo el group interno tiene el pill visible */
body#cart .quantity-button__group,
.product-line .quantity-button__group,
.product-line .input-group,
.product-line .quantity-button__group.input-group {
  background: #fff !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-pill) !important;
  padding: .15rem !important;
  display: inline-flex !important;
  align-items: center;
  max-width: 110px !important;
}

/* =============================================================
   CARRITO v5 — fixes DESKTOP
   El template usa Bootstrap row + col-lg-8/4, NO grid. Mi regla
   .cart-grid { display: grid } chocaba. Revertimos.
   ============================================================= */

/* Revertir mi grid — dejar Bootstrap .row hacer su job */
.cart-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

.cart-grid__content {
  flex: 0 0 auto;
  width: 66.666% !important;
  padding-right: 1rem;
}
.cart-grid__aside {
  flex: 0 0 auto;
  width: 33.333% !important;
  padding-left: 1rem;
}
.cart-grid__aside-wrapper {
  position: sticky;
  top: 100px;
}

/* Título "Resumen del pedido" no debe quebrar en 3 líneas */
.cart-summary__title,
.cart-summary h3,
.cart-summary .card-title,
aside h2 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  letter-spacing: -.01em;
  margin-bottom: 1rem !important;
  white-space: normal;
}

/* Subtotals y líneas del summary: display block/flex horizontal */
.cart-summary__line,
.cart-summary__subtotals .cart-summary__line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline;
  flex-wrap: nowrap;
  padding: .5rem 0;
  font-family: "Manrope", sans-serif;
  font-size: .92rem;
  color: var(--pm-ink);
  gap: 1rem;
}
.cart-summary__line-value,
.cart-summary__value {
  font-weight: 600;
  white-space: nowrap;
}

/* Acciones (botón Finalizar compra) — forzar ancho completo píldora */
.cart-summary__actions,
.cart-summary__actions.checkout,
.cart-detailed-actions {
  margin-top: 1rem !important;
}
.cart-summary__actions a,
.cart-summary__actions .btn,
.cart-detailed-actions a,
.cart-detailed-actions .btn,
a.btn.btn-primary[href*="/pedido"],
a.btn-primary.checkout,
.text-sm-center.cart-detailed-actions .btn-primary,
#main .cart-detailed-actions .btn-primary {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--pm-radius-pill) !important;
  padding: 1rem 1.5rem !important;
  background: var(--pm-primary) !important;
  color: #fff !important;
  border: 0 !important;
  text-align: center !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all .3s var(--pm-ease);
  box-shadow: 0 6px 20px -8px rgba(44,95,141,.45);
  white-space: normal;
  line-height: 1.2;
}

/* Blockreassurance dentro del carrito — horizontal, compacto */
.blockreassurance--cart,
aside.cart-grid__aside .blockreassurance {
  background: transparent !important;
  border: 0 !important;
  padding: 1.25rem 0 0 !important;
  margin-top: 1rem !important;
}
.blockreassurance--cart ul,
aside.cart-grid__aside .blockreassurance ul {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: .6rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.blockreassurance--cart li,
aside.cart-grid__aside .blockreassurance li {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  padding: 0 !important;
  flex-direction: row !important;
}
.blockreassurance--cart li img,
.blockreassurance--cart li svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  filter: saturate(0) brightness(.4);
  opacity: .7;
}
.blockreassurance--cart li span,
.blockreassurance--cart li p {
  font-family: "Manrope", sans-serif;
  font-size: .8rem !important;
  color: var(--pm-ink-soft) !important;
  line-height: 1.35;
  margin: 0 !important;
  white-space: normal;
}

/* Continuar comprando: a la izquierda, ghost */
.cart-grid__footer .cart-detailed-actions,
.continue-shopping {
  margin: 1.5rem 0 !important;
}

/* Responsive */
@media (max-width: 920px) {
  .cart-grid__content { width: 100% !important; padding-right: 0; }
  .cart-grid__aside { width: 100% !important; padding-left: 0; margin-top: 1rem; }
  .cart-grid__aside-wrapper { position: static; }
}

/* =============================================================
   Z-INDEX · header/submenu SIEMPRE por encima
   El submenu de desktop quedaba por debajo del resumen del pedido
   del carrito porque el aside sticky creaba stacking context.
   ============================================================= */
.header {
  z-index: 1000 !important;
}
.js-sub-menu.submenu {
  z-index: 1001 !important;
}

/* Forzar que los asides/summaries con sticky NO eleven por encima del header */
.cart-grid__aside-wrapper,
.cart-summary,
#js-checkout-summary,
aside.cart-summary,
.product__left {
  z-index: 1 !important;
  position: sticky !important;
}

/* =============================================================
   CHECKOUT · paso 1 datos personales — limpiado
   ============================================================= */

/* Ocultar radio de género (Sr/Sra) — no aporta */
.form-group.form-group-title,
.form-group:has(input[name="id_gender"]),
#customer-form .form-group:has(.radio-inline),
fieldset.form-group-title,
.custom-control:has(input[name="id_gender"]),
[id^="field-id_gender"],
.form-control-container:has([name="id_gender"]) {
  display: none !important;
}

/* Ocultar SUSCRIBIRSE A SOCIOS (psgdpr_optin_for_partners / PS_CUSTOMER_OPTIN) — desactivado en config */
.form-control-container:has(input[name="optin"]),
.form-group:has(input[name="optin"]),
[id^="field-optin"],
#field-optin,
div:has(> input[name="optin"]),
label:has(input[name="optin"]) {
  display: none !important;
}

/* Texto descriptivo del optin (psgdpr u otros) lo compactamos visualmente */
.psgdpr_consent-description,
.psgdpr-consent-description,
.psgdpr_consent .form-text {
  display: none !important;
}

/* El checkbox de política de privacidad (psgdpr) compacto y con link útil */
.psgdpr_consent_message,
.psgdpr-consent-message,
[id^="psgdpr_consent"] {
  font-family: "Manrope", sans-serif;
  font-size: .88rem;
  line-height: 1.45;
}
.psgdpr_consent_message a,
.psgdpr-consent-message a {
  color: var(--pm-primary);
  text-decoration: underline;
}

/* =============================================================
   CHECKOUT · botón "mostrar contraseña" minimalista
   ============================================================= */

/* El input de contraseña y su botón como grupo inline */
.input-group:has(input[type="password"]),
.password-input-wrapper,
.js-password-wrapper,
.form-control-password {
  position: relative !important;
  display: block !important;
}

/* Input de contraseña con espacio a la derecha para el icono */
input[type="password"].form-control,
input[name="password"].form-control,
input[name="passwd"].form-control,
input[id*="password"].form-control {
  padding-right: 3rem !important;
  background: #fff !important;
}

/* Botón mostrar contraseña: pequeño, transparente, dentro del input */
.form-control-password + button,
button[data-action="show-password"],
button.show-password,
button.input-group-text.js-show-password,
.input-group-append button,
.input-group-btn button:has(i.material-icons):has(~ input),
[class*="password-reveal"],
button.btn[data-target*="password"],
form button:has(> i.material-icons[aria-label*="assword"]),
.form-group:has(input[type="password"]) .btn,
.form-group:has(input[type="password"]) button {
  position: absolute !important;
  top: 50% !important;
  right: .5rem !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--pm-ink-muted) !important;
  padding: .25rem !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  max-width: 32px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: color .2s var(--pm-ease), background .2s var(--pm-ease);
}
.form-group:has(input[type="password"]) button:hover,
button[data-action="show-password"]:hover {
  color: var(--pm-primary) !important;
  background: var(--pm-base) !important;
}
.form-group:has(input[type="password"]) button .material-icons,
button[data-action="show-password"] .material-icons {
  font-size: 18px !important;
  color: inherit !important;
}

/* =============================================================
   Autofill de Chrome: quitar el fondo azul
   ============================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--pm-ink) !important;
  transition: background-color 9999s ease-in-out 0s !important;
  caret-color: var(--pm-ink);
}

/* =============================================================
   CHECKOUT · password reveal v2 (selector correcto PS 9)
   El botón tiene data-ps-action="toggle-password" y va en un
   .input-group.password-field junto al input.
   ============================================================= */

.input-group.password-field {
  position: relative !important;
  display: block !important;
  width: 100%;
}

.input-group.password-field input.form-control,
.input-group.password-field input[type="password"],
.input-group.password-field input[type="text"] {
  padding-right: 3rem !important;
  width: 100% !important;
  display: block !important;
  background: #fff !important;
  border-radius: var(--pm-radius-md) !important;
}

.input-group.password-field > button,
.input-group.password-field button[data-ps-action="toggle-password"],
button[data-ps-action="toggle-password"] {
  position: absolute !important;
  top: 50% !important;
  right: .5rem !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  max-width: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--pm-ink-muted) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 2;
  transition: color .2s var(--pm-ease), background .2s var(--pm-ease);
}
.input-group.password-field > button:hover,
button[data-ps-action="toggle-password"]:hover {
  color: var(--pm-primary) !important;
  background: var(--pm-base) !important;
}
.input-group.password-field > button > .material-icons,
button[data-ps-action="toggle-password"] .material-icons {
  font-size: 18px !important;
  color: inherit !important;
  line-height: 1;
}

/* Anulamos el btn-primary del botón para que no coja el color corporativo */
button[data-ps-action="toggle-password"].btn-primary,
.input-group.password-field button.btn-primary {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--pm-ink-muted) !important;
}

/* =============================================================
   CHECKOUT · barra de fortaleza de contraseña + fix autofill azul
   ============================================================= */

/* Ocultar la barra roja/verde. Dejamos los textos de checks (útiles). */
[data-ps-target="password-feedback-target"] .progress,
[data-ps-target="password-feedback-target"] .progress-bar,
.password-strength,
.password-strength-bar,
.password-policy-progress,
#field-password ~ .progress,
.input-group.password-field ~ .progress {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Si PS 9 lo pone con una div anónima estilo inline, atacamos también: */
[data-ps-target="password-feedback-target"] > div:first-child[style*="background"],
[data-ps-target="password-feedback-target"] [role="progressbar"] {
  display: none !important;
}

/* Los mensajes de check con icono: compactos y en gris */
[data-ps-target="password-feedback-target"] .form-text,
[data-ps-target="password-feedback-target"] li {
  font-size: .82rem;
  color: var(--pm-ink-muted);
}

/* =============================================================
   FIX autofill azul v2 (anteriormente no aplicaba del todo)
   ============================================================= */
.form-control:-webkit-autofill,
input.form-control:-webkit-autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: var(--pm-ink) !important;
  caret-color: var(--pm-ink) !important;
}

/* =============================================================
   CHECKOUT · ocultar campo alias (dirección)
   ============================================================= */
.form-group:has(input[name="alias"]),
.form-group:has(#field-alias),
.form-group-container:has(input[name="alias"]),
[id^="field-alias"],
label[for="field-alias"] {
  display: none !important;
}

/* =============================================================
   CMS · contenido editorial para páginas legales y funcionales
   ============================================================= */

/* Container principal de CMS */
body[id^="cms"] #content-wrapper,
body.cms-id-1 #content-wrapper,
body.cms-id-2 #content-wrapper,
body.cms-id-3 #content-wrapper,
body.cms-id-4 #content-wrapper,
body.cms-id-5 #content-wrapper,
body.cms-id-6 #content-wrapper,
body.cms-id-7 #content-wrapper,
body.cms-id-19 #content-wrapper,
body.cms-id-20 #content-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
}

/* Título grande editorial (sale como page-title-section) */
body[id^="cms"] .page-title-section,
body[id^="cms"] h1,
.page-content--cms h1:first-child,
.page-content--cms h2:first-child {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 300 !important;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: -.025em;
  line-height: 1.05 !important;
  color: var(--pm-ink);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem) !important;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pm-border-soft);
}

/* Texto principal del CMS */
.page-content--cms,
.page-content--cms .rich-text {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--pm-ink-soft);
}

/* Headings dentro del CMS */
.page-content--cms h2 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--pm-ink) !important;
  margin: 2.25rem 0 .85rem !important;
}
.page-content--cms h3 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  letter-spacing: -.01em;
  color: var(--pm-ink) !important;
  margin: 1.85rem 0 .6rem !important;
}
.page-content--cms h4 {
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pm-ink) !important;
  margin: 1.5rem 0 .5rem !important;
}

/* Párrafos */
.page-content--cms p {
  margin: 0 0 1.1rem;
  max-width: 72ch;
}

/* Listas */
.page-content--cms ul,
.page-content--cms ol {
  margin: 0 0 1.25rem 1.5rem;
  padding: 0;
  max-width: 70ch;
}
.page-content--cms li {
  margin: .35rem 0;
  padding-left: .3rem;
  line-height: 1.65;
}
.page-content--cms ul li::marker { color: var(--pm-primary); }
.page-content--cms ol li::marker { color: var(--pm-primary); font-weight: 500; }

/* Strong, em */
.page-content--cms strong { font-weight: 600; color: var(--pm-ink); }
.page-content--cms em { font-style: italic; color: var(--pm-ink-soft); }

/* Links */
.page-content--cms a {
  color: var(--pm-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s var(--pm-ease);
}
.page-content--cms a:hover {
  color: #1F4265;
  text-decoration-thickness: 2px;
}

/* Blockquote (formulario desistimiento) */
.page-content--cms blockquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--pm-base);
  border-left: 3px solid var(--pm-primary) !important;
  border-radius: 0 var(--pm-radius-sm) var(--pm-radius-sm) 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  color: var(--pm-ink);
  font-size: .95rem;
}
.page-content--cms blockquote p { margin: 0 0 .5rem; }
.page-content--cms blockquote p:last-child { margin-bottom: 0; }

/* Tablas */
.page-content--cms table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-md);
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-size: .95rem;
}
.page-content--cms table th {
  background: var(--pm-base);
  color: var(--pm-ink);
  text-align: left;
  padding: .75rem 1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--pm-border);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.page-content--cms table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--pm-border-soft);
  color: var(--pm-ink-soft);
}
.page-content--cms table tr:last-child td { border-bottom: 0; }

/* Regla horizontal sutil entre secciones */
.page-content--cms hr {
  border: 0;
  border-top: 1px solid var(--pm-border-soft);
  margin: 2rem 0;
}

/* Responsive */
@media (max-width: 720px) {
  body[id^="cms"] #content-wrapper { padding: 1.25rem 1rem 2.5rem; }
  .page-content--cms { font-size: .95rem; line-height: 1.7; }
}

/* =======================================================================
   BLOG · pm_blog module (Markdown-first)
   ======================================================================= */

/* ------ Contenedor + header listado ------ */
.pm-blog__header {
  padding: 5rem 1.5rem 2rem;
  background:
    radial-gradient(ellipse at top left, rgba(44,95,141,.08), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(244,162,89,.08), transparent 60%),
    var(--pm-base);
  border-bottom: 1px solid rgba(21,24,33,.06);
}
.pm-blog__inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: left;
}
.pm-blog__inner .eyebrow {
  display: inline-block;
  font-family: var(--pm-font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pm-primary);
  margin-bottom: 1.25rem;
}
.pm-blog__title {
  font-family: var(--pm-font-serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  color: var(--pm-ink);
  margin: 0 0 1rem;
  letter-spacing: -.015em;
}
.pm-blog__title em {
  font-style: italic;
  color: var(--pm-primary);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.pm-blog__kicker {
  font-family: var(--pm-font-sans);
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(21,24,33,.7);
  max-width: 52ch;
  margin: 0;
}
.pm-blog__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

/* ------ Featured: 1 principal + 2 side ------ */
.pm-blog__featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.pm-blog__featured-main {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--pm-ink);
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: 0 2px 14px rgba(21,24,33,.04);
}
.pm-blog__featured-main:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(21,24,33,.1);
}
.pm-blog__featured-main img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.pm-blog__featured-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.pm-blog__featured-body .eyebrow {
  display: inline-block;
  font-family: var(--pm-font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pm-accent);
}
.pm-blog__featured-body h2 {
  font-family: var(--pm-font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 70;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.01em;
  color: var(--pm-ink);
}
.pm-blog__featured-body p {
  font-family: var(--pm-font-sans);
  font-size: .98rem;
  color: rgba(21,24,33,.7);
  margin: 0;
  line-height: 1.6;
}
.pm-blog__read-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  font-family: var(--pm-font-sans);
  font-weight: 600;
  font-size: .9rem;
  color: var(--pm-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.pm-blog__featured-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.pm-blog__featured-small {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--pm-ink);
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 2px 10px rgba(21,24,33,.03);
}
.pm-blog__featured-small:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(21,24,33,.08);
}
.pm-blog__featured-small img {
  width: 120px;
  height: 100%;
  min-height: 130px;
  object-fit: cover;
}
.pm-blog__featured-small > div {
  padding: 1rem 1.25rem 1rem 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  justify-content: center;
}
.pm-blog__featured-small h3 {
  font-family: var(--pm-font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 70;
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0;
  color: var(--pm-ink);
  letter-spacing: -.005em;
}
.pm-blog__featured-small .eyebrow {
  font-family: var(--pm-font-sans);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pm-accent);
}

/* ------ Grid listado ------ */
.pm-blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}
.pm-blog__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--pm-ink);
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 2px 10px rgba(21,24,33,.03);
}
.pm-blog__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(21,24,33,.08);
}
.pm-blog__card-image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: rgba(21,24,33,.04);
}
.pm-blog__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.pm-blog__card:hover .pm-blog__card-image img {
  transform: scale(1.04);
}
.pm-blog__card-body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}
.pm-blog__card-body .eyebrow {
  font-family: var(--pm-font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pm-accent);
}
.pm-blog__card-title {
  font-family: var(--pm-font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48, "SOFT" 70;
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0;
  color: var(--pm-ink);
  letter-spacing: -.01em;
}
.pm-blog__card-excerpt {
  font-family: var(--pm-font-sans);
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(21,24,33,.65);
  margin: 0;
  flex: 1;
}
.pm-blog__card-meta {
  font-family: var(--pm-font-sans);
  font-size: .78rem;
  color: rgba(21,24,33,.5);
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px solid rgba(21,24,33,.06);
  letter-spacing: .02em;
}
.pm-blog__empty {
  text-align: center;
  padding: 4rem 2rem;
  font-family: var(--pm-font-sans);
  color: rgba(21,24,33,.5);
  font-style: italic;
}

/* ------ POST · ficha ------ */
.pm-blog-post {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(44,95,141,.06), transparent 55%),
    var(--pm-base);
  border-bottom: 1px solid rgba(21,24,33,.06);
}
.pm-blog-post__header {
  padding: 4rem 1.5rem 2rem;
}
.pm-blog-post__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
}
.pm-blog-post__category {
  display: inline-block;
  font-family: var(--pm-font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pm-primary);
  text-decoration: none;
  padding: .4rem .9rem;
  border: 1px solid rgba(44,95,141,.25);
  border-radius: 999px;
  margin-bottom: 1.5rem;
  transition: background .2s, color .2s;
}
.pm-blog-post__category:hover {
  background: var(--pm-primary);
  color: #fff;
}
.pm-blog-post__title {
  font-family: var(--pm-font-serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  line-height: 1.08;
  color: var(--pm-ink);
  letter-spacing: -.015em;
  margin: 0 0 1.5rem;
}
.pm-blog-post__meta {
  font-family: var(--pm-font-sans);
  font-size: .88rem;
  color: rgba(21,24,33,.55);
  letter-spacing: .02em;
}
.pm-blog-post__cover {
  margin: 0 auto 0;
  max-width: 1080px;
  padding: 0 1.5rem;
}
.pm-blog-post__cover img {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  box-shadow: 0 18px 60px rgba(21,24,33,.12);
}

/* Contenido prose */
.pm-blog-post__content {
  max-width: 720px;
  margin: 4rem auto 2rem;
  padding: 0 1.5rem;
  font-family: var(--pm-font-sans);
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--pm-ink);
}
.pm-blog-post__content h2,
.pm-blog-post__content h3,
.pm-blog-post__content h4 {
  font-family: var(--pm-font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 70;
  color: var(--pm-ink);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.pm-blog-post__content h2 {
  font-size: 1.85rem;
  margin: 3rem 0 1rem;
}
.pm-blog-post__content h3 {
  font-size: 1.4rem;
  margin: 2.25rem 0 .75rem;
}
.pm-blog-post__content p {
  margin: 0 0 1.35rem;
}
.pm-blog-post__content a {
  color: var(--pm-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pm-blog-post__content a:hover {
  text-decoration-thickness: 2px;
}
.pm-blog-post__content strong {
  font-weight: 600;
  color: var(--pm-ink);
}
.pm-blog-post__content ul,
.pm-blog-post__content ol {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
}
.pm-blog-post__content li {
  margin-bottom: .5rem;
}
.pm-blog-post__content blockquote {
  border-left: 3px solid var(--pm-accent);
  padding: .5rem 1.25rem;
  margin: 2rem 0;
  font-family: var(--pm-font-serif);
  font-style: italic;
  font-size: 1.2rem;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  color: rgba(21,24,33,.75);
  line-height: 1.5;
  background: rgba(244,162,89,.06);
  border-radius: 0 8px 8px 0;
}
.pm-blog-post__content blockquote p {
  margin: 0;
}
.pm-blog-post__content img {
  width: 100%;
  border-radius: 14px;
  margin: 2rem 0;
  box-shadow: 0 10px 30px rgba(21,24,33,.08);
}
.pm-blog-post__content hr {
  border: 0;
  border-top: 1px solid rgba(21,24,33,.1);
  margin: 3rem 0;
}
.pm-blog-post__content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: rgba(21,24,33,.06);
  padding: .15em .4em;
  border-radius: 4px;
}

.pm-blog-post__tags {
  margin: 3rem 0 1rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.pm-blog-post__tag {
  font-family: var(--pm-font-sans);
  font-size: .8rem;
  color: rgba(21,24,33,.55);
  padding: .3rem .75rem;
  background: rgba(21,24,33,.04);
  border-radius: 999px;
}

.pm-blog-post__related {
  max-width: 1200px;
  margin: 4rem auto 5rem;
  padding: 3rem 1.5rem 0;
  border-top: 1px solid rgba(21,24,33,.08);
}
.pm-blog-post__related-title {
  font-family: var(--pm-font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 80;
  font-size: 2rem;
  letter-spacing: -.01em;
  margin: 0 0 2rem;
  color: var(--pm-ink);
}

/* ------ Mobile ------ */
@media (max-width: 768px) {
  .pm-blog__featured {
    grid-template-columns: 1fr;
  }
  .pm-blog__featured-main img { aspect-ratio: 4/3; }
  .pm-blog__featured-body { padding: 1.5rem; }
  .pm-blog__featured-small { grid-template-columns: 100px 1fr; }
  .pm-blog__featured-small img { width: 100px; min-height: 100px; }
  .pm-blog__container { padding: 2rem 1rem 3rem; }
  .pm-blog__header { padding: 3rem 1rem 1.5rem; }
  .pm-blog-post__header { padding: 2.5rem 1rem 1.5rem; }
  .pm-blog-post__cover { padding: 0 1rem; }
  .pm-blog-post__cover img { aspect-ratio: 16/9; border-radius: 14px; }
  .pm-blog-post__content { padding: 0 1rem; margin-top: 2.5rem; font-size: 1.05rem; }
  .pm-blog-post__content h2 { font-size: 1.5rem; }
  .pm-blog-post__content h3 { font-size: 1.2rem; }
  .pm-blog-post__related { padding: 2rem 1rem 0; margin-top: 3rem; }
}

/* =======================================================================
   BLOG · ajustes v1 post-review Álvaro (23/04)
   - Featured a 1 columna, full-width, hero único
   - Eyebrow + category pill en coral unificado
   - Grid related sin huecos asimétricos
   ======================================================================= */

/* 1. Featured una sola columna */
.pm-blog__featured {
  grid-template-columns: 1fr;
  gap: 0;
}
.pm-blog__featured-side {
  display: none;
}
.pm-blog__featured-main {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: stretch;
  min-height: 420px;
}
.pm-blog__featured-main img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 420px;
}
.pm-blog__featured-body {
  padding: 3rem 3rem 3rem 3rem;
  justify-content: center;
  gap: 1rem;
}
.pm-blog__featured-body h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
@media (max-width: 768px) {
  .pm-blog__featured-main {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .pm-blog__featured-main img {
    aspect-ratio: 16/10;
    min-height: 0;
  }
  .pm-blog__featured-body {
    padding: 1.75rem;
  }
}

/* 2. Eyebrow header del blog → coral */
.pm-blog__inner .eyebrow {
  color: var(--pm-accent);
}

/* 3. Pill categoría en ficha → coral */
.pm-blog-post__category {
  color: var(--pm-accent);
  border-color: rgba(244,162,89,.35);
  background: rgba(244,162,89,.06);
}
.pm-blog-post__category:hover {
  background: var(--pm-accent);
  color: #fff;
  border-color: var(--pm-accent);
}

/* 4. Grid related: cards de ancho fijo, centradas, sin huecos */
.pm-blog-post__related .pm-blog__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: flex-start;
}
.pm-blog-post__related .pm-blog__card {
  flex: 0 1 320px;
  max-width: 360px;
}
@media (max-width: 768px) {
  .pm-blog-post__related .pm-blog__card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Blog header compact (sin eyebrow, menos padding, H1 menor) */
.pm-blog__header--compact {
  padding: 2.5rem 1.5rem 1.5rem;
}
.pm-blog__header--compact .pm-blog__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: 0 0 .5rem;
  line-height: 1.08;
}
.pm-blog__header--compact .pm-blog__kicker {
  font-size: .98rem;
  color: rgba(21,24,33,.6);
}
@media (max-width: 768px) {
  .pm-blog__header--compact {
    padding: 1.75rem 1rem 1.25rem;
  }
}

/* Fallback featured sin imagen — body centrado full-width con fondo degradado suave */
.pm-blog__featured-main--no-image {
  grid-template-columns: 1fr;
  min-height: 320px;
  background:
    radial-gradient(ellipse at top left, rgba(44,95,141,.06), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(244,162,89,.08), transparent 55%),
    linear-gradient(180deg, rgba(197,216,109,.05), #fff);
}
.pm-blog__featured-main--no-image .pm-blog__featured-body {
  max-width: 720px;
  padding: 3rem 2rem;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  min-height: 320px;
}
.pm-blog__featured-main--no-image .pm-blog__featured-body h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  text-wrap: balance;
}
.pm-blog__featured-main--no-image .pm-blog__featured-body p {
  max-width: 56ch;
  margin: 0 auto;
}
.pm-blog__featured-main--no-image .pm-blog__featured-body .eyebrow {
  align-self: center;
}

/* Cards del grid sin imagen: aumentar padding y añadir textura */
.pm-blog__card:not(:has(.pm-blog__card-image)) .pm-blog__card-body {
  padding-top: 2.25rem;
  background: linear-gradient(180deg, rgba(44,95,141,.04), transparent 70%);
}

/* Tablas comparativas editoriales dentro de posts */
.pm-blog-post__content .table-wrap {
  margin: 2rem 0;
  overflow-x: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(21,24,33,.04);
  border: 1px solid rgba(21,24,33,.06);
}
.pm-blog-post__content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pm-font-sans);
  font-size: .95rem;
  min-width: 480px;
}
.pm-blog-post__content table thead {
  background: rgba(44,95,141,.04);
}
.pm-blog-post__content table th {
  font-weight: 600;
  color: var(--pm-ink);
  text-align: left;
  padding: .9rem 1.25rem;
  border-bottom: 2px solid rgba(44,95,141,.15);
  letter-spacing: .01em;
}
.pm-blog-post__content table td {
  padding: .85rem 1.25rem;
  border-bottom: 1px solid rgba(21,24,33,.06);
  color: rgba(21,24,33,.85);
  line-height: 1.5;
}
.pm-blog-post__content table tr:last-child td {
  border-bottom: 0;
}
.pm-blog-post__content table tr:nth-child(even) td {
  background: rgba(244,162,89,.03);
}
.pm-blog-post__content table td strong,
.pm-blog-post__content table th strong {
  color: var(--pm-ink);
}

/* Paginación del blog */
.pm-blog__pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding: 2rem 1rem 1rem;
  border-top: 1px solid rgba(21,24,33,.08);
  font-family: var(--pm-font-sans);
  font-size: .95rem;
  color: var(--pm-ink);
}
.pm-blog__pagination-link {
  font-weight: 600;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--pm-primary);
  border: 1px solid rgba(44,95,141,.2);
  background: #fff;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.pm-blog__pagination-link:hover {
  background: var(--pm-primary);
  color: #fff;
  border-color: var(--pm-primary);
}
.pm-blog__pagination-disabled {
  color: rgba(21,24,33,.3);
  border-color: rgba(21,24,33,.1);
  pointer-events: none;
  background: transparent;
}
.pm-blog__pagination-status {
  color: rgba(21,24,33,.55);
  font-size: .85rem;
  letter-spacing: .02em;
}
@media (max-width: 540px) {
  .pm-blog__pagination {
    flex-direction: column;
    gap: .75rem;
  }
  .pm-blog__pagination-status {
    order: -1;
  }
}


/* ---------- Mega Menu · ancho uniforme items top (solo desktop) ---------- */
@media (min-width: 768px) {
  /* Top bar: ancho uniforme + texto centrado */
  .ets_mm_megamenu .mm_menus_ul { display: flex; }
  .ets_mm_megamenu .mm_menus_ul > .mm_menus_li { flex: 1 1 0; text-align: center; }
  .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a { justify-content: center; width: 100%; }
  /* Dropdown: subcategorías alineadas a la izquierda */
  .ets_mm_megamenu .mm_columns_ul,
  .ets_mm_megamenu .mm_columns_ul a,
  .ets_mm_megamenu .ets_mm_block_content,
  .ets_mm_megamenu .ets_mm_block_content a {
    text-align: left;
  }
}

/* ---------- Header v3 compacto: logo · buscador · nav2 (solo desktop) ---------- */
@media (min-width: 768px) {
  /* Buscador centrado, ocupa el espacio entre logo y nav2 */
  .header-bottom__search {
    justify-content: center;
  }
  .header-bottom__search #_desktop_ps_searchbar {
    width: 100%;
    max-width: 560px;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
  }
  /* Anula clases bootstrap que vienen en el TPL del módulo y lo desplazaban a la derecha */
  .header-bottom__search #_desktop_ps_searchbar.col-auto { flex: 1 1 auto; max-width: 560px; width: 100%; }
  .header-bottom__search #_desktop_ps_searchbar.ms-auto { margin-left: 0 !important; }
  .header-bottom__search .ps-searchbar { width: 100%; }
  /* Lupa a la derecha (Hummingbird la pone a la izquierda y se monta con el placeholder) */
  .header-bottom__search .ps-searchbar__magnifier {
    left: auto;
    right: .9rem;
  }
  .header-bottom__search .ps-searchbar__input {
    padding-left: 1rem;
    padding-right: 2.75rem;
  }
  /* Si aparece el botón clear, se posiciona a la izquierda de la lupa */
  .header-bottom__search .ps-searchbar__clear {
    right: 2.5rem;
  }

  /* NAV2 derecha: idioma + login + carrito en línea con la misma altura */
  .header-bottom__nav2 {
    gap: .25rem;
    margin-left: auto;
  }
  .header-bottom__nav2 #_desktop_ps_languageselector,
  .header-bottom__nav2 #_desktop_ps_currencyselector,
  .header-bottom__nav2 #_desktop_ps_customersignin,
  .header-bottom__nav2 #_desktop_ps_shoppingcart {
    display: inline-flex;
    align-items: center;
  }
}

/* ---------- Hero slider (ps_imageslider) — pequemonster v3 ---------- */
/* El caption HTML del padre Hummingbird se elimina en el override del template
 * pequemonster_v3/modules/ps_imageslider/views/templates/hook/slider.tpl
 * (el texto va quemado en la imagen, no necesitamos h2 superpuesto). */

/* Slider hace de hero: full-width, altura 1:8/3 (ratio 1920x720) */
.ps-imageslider {
  position: relative;
  width: 100%;
  margin: 0 0 1.5rem 0;
  padding: 0;
  overflow: hidden;
  background: var(--pm-surface, #FBFAF5);
}
/* Sacar del container y hacerlo full-bleed dentro del wrapper */
#content > .ps-imageslider {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: none;
}
.ps-imageslider .carousel-inner,
.ps-imageslider .carousel-item {
  height: auto;
}
.ps-imageslider .carousel-item img,
.ps-imageslider__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: cover;
  object-position: center;
}

/* Indicadores (dots) elegantes - barras cortas */
.ps-imageslider .carousel-indicators {
  margin-bottom: 1.4rem;
  gap: .5rem;
}
.ps-imageslider .carousel-indicators [data-bs-target] {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .55);
  border: 0;
  opacity: 1;
  transition: background-color .25s var(--pm-ease, ease), width .25s var(--pm-ease, ease);
}
.ps-imageslider .carousel-indicators [data-bs-target].active {
  background-color: var(--pm-primary, #2C5F8D);
  width: 56px;
}

/* Flechas (si el módulo las inyecta — Hummingbird suele no inyectarlas).
   Las dejo preparadas por si se activan en BO. */
.ps-imageslider .carousel-control-prev,
.ps-imageslider .carousel-control-next {
  width: 6%;
  opacity: 0;
  transition: opacity .25s var(--pm-ease, ease);
}
.ps-imageslider:hover .carousel-control-prev,
.ps-imageslider:hover .carousel-control-next {
  opacity: 1;
}
.ps-imageslider .carousel-control-prev-icon,
.ps-imageslider .carousel-control-next-icon {
  background-color: rgba(255,255,255,.85);
  border-radius: 999px;
  padding: 1.5rem;
  background-size: 60% 60%;
}

/* Tablet/móvil: en pantallas estrechas, el ratio 8:3 deja el slider muy bajito.
 * Aumentamos altura proporcional y mantenemos object-position en la zona IZQUIERDA
 * para conservar el texto editorial quemado. Aviso: si Álvaro quiere otra composición
 * para móvil, lo ideal es subir versiones móvil-cuadradas en BO. */
@media (max-width: 991.98px) {
  .ps-imageslider .carousel-item img,
  .ps-imageslider__figure img {
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 0% center;
  }
  .ps-imageslider .carousel-indicators {
    margin-bottom: .75rem;
  }
}
@media (max-width: 575.98px) {
  /* Aspect 16:9 en móvil deja ver texto editorial + parte del sujeto.
   * Para experiencia óptima en móvil habría que subir imágenes específicas (5:6 verticales). */
  .ps-imageslider .carousel-item img,
  .ps-imageslider__figure img {
    aspect-ratio: 16 / 9;
    object-position: 0% center;
  }
}


/* =============================================================
 * FOOTER v3 ─ Hummingbird parent + estilos pequeMonster (30/04/2026)
 * Sin tocar el footer.tpl del padre — sólo CSS + un override mínimo
 * que añade el bloque trust signals delante de hook_footer_before.
 * ============================================================= */

/* --- Reassurance dentro del footer: ajustamos margen/padding --- */
.footer .pm-reassure,
.footer__before .pm-reassure {
  margin-top: 0;
  border-top: 1px solid var(--pm-border-soft, #ECE7DA);
  border-bottom: 0;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  background: #fff;
}

/* --- Wrapper que envuelve trust + ps_socialfollow + ps_emailsubscription antes del oscuro --- */
.footer.footer__before {
  background: #fff;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--pm-border-soft, #ECE7DA);
}

/* ps_socialfollow: iconos circulares centrados */
.footer__before .ps-socialfollow,
.footer .ps-socialfollow {
  text-align: center;
  padding: .5rem 0 1rem;
}
.footer__before .ps-socialfollow ul,
.footer .ps-socialfollow ul {
  display: inline-flex;
  gap: .55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__before .ps-socialfollow ul li,
.footer .ps-socialfollow ul li {
  margin: 0;
}
.footer__before .ps-socialfollow ul li a,
.footer .ps-socialfollow ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(44, 95, 141, .08);
  color: var(--pm-primary, #2C5F8D);
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.footer__before .ps-socialfollow ul li a:hover,
.footer .ps-socialfollow ul li a:hover {
  background: var(--pm-primary, #2C5F8D);
  color: #fff;
  transform: translateY(-2px);
}
.footer__before .ps-socialfollow ul li a span,
.footer .ps-socialfollow ul li a span {
  display: none;
}

/* --- Footer principal oscuro --- */
.footer.footer__main {
  background: #1A1F2A;
  color: rgba(255, 255, 255, .72);
  padding: 3.5rem 0 2rem;
  border-top: 0;
}
.footer.footer__main .container {
  max-width: 1320px;
}
.footer.footer__main .footer__main-top.row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin: 0 0 2.5rem;
}
@media (max-width: 991.98px) {
  .footer.footer__main .footer__main-top.row {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 575.98px) {
  .footer.footer__main .footer__main-top.row {
    grid-template-columns: 1fr;
  }
}

/* Cada bloque del footer (linklist + contactinfo) */
.footer.footer__main .footer-block {
  flex: unset;
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
.footer.footer__main .footer-block__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 1.1rem;
  letter-spacing: .005em;
  text-transform: none;
}
.footer.footer__main .footer-block__title--toggle {
  cursor: default;
}
.footer.footer__main .footer-block__title button.stretched-link {
  display: none; /* el toggle de mobile collapse no nos hace falta en desktop, lo gestionamos por display block */
}
.footer.footer__main .footer-block__content {
  display: block !important; /* anula el .collapse de Bootstrap en desktop, en móvil lo reactivamos abajo */
  height: auto !important;
}
.footer.footer__main .footer-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.footer.footer__main .footer-block__list a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  font-size: .87rem;
  transition: color .2s ease;
}
.footer.footer__main .footer-block__list a:hover {
  color: var(--pm-accent, #F4A259);
}

/* Móvil: vuelven los toggles collapse */
@media (max-width: 767.98px) {
  .footer.footer__main .footer-block__title button.stretched-link { display: inline-block; }
  .footer.footer__main .footer-block__title { cursor: pointer; }
  .footer.footer__main .footer-block__content { display: none !important; }
  .footer.footer__main .footer-block__content.show { display: block !important; }
}

/* ps_contactinfo dentro del footer oscuro — usa estructura ps-contactinfo__row del override */
.footer.footer__main .ps-contactinfo__row {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .87rem;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 .75rem;
  line-height: 1.5;
}
.footer.footer__main .ps-contactinfo__row a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}
.footer.footer__main .ps-contactinfo__row a:hover { color: var(--pm-accent, #F4A259); }
.footer.footer__main .ps-contactinfo__row address {
  font-style: normal;
  margin: 0;
}
.footer.footer__main .ps-contactinfo__ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--pm-accent, #F4A259);
}
.footer.footer__main .ps-contactinfo__row--whatsapp .ps-contactinfo__ico { color: #25D366; }

/* Bloques que NO queremos visibles en el footer oscuro */
.footer.footer__main .blockwishlist,
.footer.footer__main .ps_facebook,
.footer.footer__main .visitordiscount,
.footer.footer__main .sequra { display: none !important; }

/* =============================================================
 * Footer bottom (mi override de copyright.tpl)
 * ============================================================= */
.pm-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 1.5rem 0 0;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}
.pm-footer-bottom__copyright {
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
  margin: 0;
  line-height: 1.5;
}
.pm-footer-bottom__copyright strong {
  color: rgba(255, 255, 255, .82);
  font-weight: 600;
}
.pm-footer-bottom__center {
  text-align: center;
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
}
.pm-footer-bottom__center a {
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  margin: 0 .35rem;
  transition: color .2s ease;
}
.pm-footer-bottom__center a:hover { color: #fff; }
.pm-footer-bottom__center span { margin: 0 .25rem; opacity: .5; }
.pm-footer-bottom__right {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

/* Pay cards (logos SVG reales VISA/MC/Bizum + badge SSL) */
.pm-pay-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  height: 26px;
  min-width: 44px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .06);
}
.pm-pay-card svg {
  display: block;
  height: 18px;
  width: auto;
}
.pm-pay-card--ssl {
  background: rgba(34, 197, 94, .15);
  color: #22C55E;
  border: 1px solid rgba(34, 197, 94, .35);
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-family: "Manrope", sans-serif;
}
.pm-pay-card--ssl svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

@media (max-width: 767.98px) {
  .pm-footer-bottom {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }
  .pm-footer-bottom__copyright,
  .pm-footer-bottom__center { text-align: center; }
  .pm-footer-bottom__right { justify-content: center; }
}


/* =============================================================
 * pmhorario · columna footer con horario tienda en tiempo real
 * ============================================================= */
.footer.footer__main .ps-pmhorario { padding: 0; }

/* Status badge inline en el título (sustituye al banner grande de abajo) */
.pm-horario__inline-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .6rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}
.pm-horario__inline-status--open {
  background: rgba(34, 197, 94, .15);
  color: #4ADE80;
}
.pm-horario__inline-status--closed {
  background: rgba(239, 68, 68, .12);
  color: #F87171;
}
.pm-horario__inline-status .pm-horario__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.pm-horario__inline-status--open .pm-horario__dot {
  animation: pm-horario-pulse 2s infinite;
}

/* (Banner antiguo .pm-horario__status — eliminado del TPL pero conservo
 * la regla por si se reactiva en el futuro) */
.pm-horario__status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: .55rem;
  background: rgba(255, 255, 255, .06);
}
.pm-horario__status--open {
  background: rgba(34, 197, 94, .15);
  color: #4ADE80;
}
.pm-horario__status--closed {
  background: rgba(239, 68, 68, .12);
  color: #F87171;
}
.pm-horario__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.pm-horario__status--open .pm-horario__dot {
  animation: pm-horario-pulse 2s infinite;
}
@keyframes pm-horario-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.pm-horario__today-hours {
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
  font-size: .78rem;
  margin-left: .35rem;
  border-left: 1px solid rgba(255,255,255,.15);
  padding-left: .55rem;
}

/* Tabla horario — compacta una línea por día (Lun · 10-13 | 17-20)
 * !important: el theme parent fuerza var(--pm-ink) en casi todo el footer. */
.footer.footer__main .pm-horario__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: .76rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .9) !important;
}
.footer.footer__main .pm-horario__table tr { border-bottom: 0; }
.footer.footer__main .pm-horario__table td {
  padding: .08rem 0;
  vertical-align: middle;
  color: rgba(255, 255, 255, .9) !important;
}
.footer.footer__main .pm-horario__table .pm-horario__day {
  text-transform: capitalize;
  letter-spacing: 0;
  font-weight: 600;
  width: 26%;
  white-space: nowrap;
  color: rgba(255, 255, 255, .92) !important;
}
.footer.footer__main .pm-horario__table .pm-horario__hours {
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .9) !important;
  font-weight: 500;
  white-space: nowrap;
}
.footer.footer__main .pm-horario__sep {
  color: rgba(255, 255, 255, .35) !important;
  margin: 0 .15rem;
  font-weight: 400;
}
.pm-horario__slot {
  display: block;
  line-height: 1.25;
}
.pm-horario__slot + .pm-horario__slot { margin-top: 1px; }
.footer.footer__main .pm-horario__table tr.is-today .pm-horario__day,
.footer.footer__main .pm-horario__table tr.is-today .pm-horario__hours,
.footer.footer__main .pm-horario__table tr.is-today .pm-horario__slot {
  color: #fff !important;
  font-weight: 700;
}
.pm-horario__table tr.is-today .pm-horario__day::before {
  content: "•";
  color: var(--pm-accent, #F4A259);
  margin-right: .35rem;
  font-size: .9rem;
  line-height: 1;
  vertical-align: middle;
}
.footer.footer__main .pm-horario__table tr.is-closed .pm-horario__hours {
  color: rgba(255, 255, 255, .55) !important;
  font-style: italic;
  font-weight: 400;
}
.footer.footer__main .pm-horario__table tr.is-closed .pm-horario__day {
  color: rgba(255, 255, 255, .55) !important;
}
.pm-horario__special {
  color: var(--pm-accent, #F4A259);
  font-weight: 700;
  margin-left: .25rem;
}

.pm-horario__note {
  font-size: .75rem;
  color: var(--pm-accent, #F4A259);
  margin: .8rem 0 .4rem;
  line-height: 1.4;
}
.pm-horario__cta {
  margin: .9rem 0 0;
  font-size: .82rem;
}
.pm-horario__cta a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.pm-horario__cta a:hover {
  color: var(--pm-accent, #F4A259);
  border-color: currentColor;
}


/* =============================================================
   FICHA PRODUCTO v3 — limpieza visual 30/04/2026
   Petición Álvaro: zona derecha más ordenada
   - Quitar botón "Escriba su propia reseña" (productcomments)
   - Quitar selector de cantidad +/-
   - Caja verde envío (pmdelivery) justo encima del botón
   - Caja amarilla OFERTA FLASH (visitordiscount) debajo del botón
   ============================================================= */

/* 1) Ocultar botón "Escriba su propia reseña" — no usamos productcomments */
.product-comments-additional-info {
  display: none !important;
}

/* 2) Ocultar selector de cantidad +/- (envía 1 por defecto) */
.product__actions-qty-add .product-actions__quantity,
.product__actions-qty-add .product__quantity,
.product__actions-qty-add .quantity-button {
  display: none !important;
}

/* Como queda solo el botón en la fila, que ocupe ancho cómodo */
.product__actions-qty-add .product__add-to-cart {
  flex: 1 1 100%;
}

/* 3) pmdelivery (caja verde) — justo encima del botón Añadir al carrito.
      Orders existentes en .product__right (display:flex column):
        manufacturer 1, name 2, variants 3, description 4, prices 5,
        add-to-cart 7. → Caja verde con order:6. */
.product__additional-info {
  order: 6 !important;
  margin: 0 0 .5rem !important;
}

/* 4) visitordiscount (caja amarilla OFERTA FLASH) — debajo del botón.
      El JS la inyecta como hermana del form, se promueve al flex
      por display:contents del form/actions. Order alto = al final. */
#visitor-discount-banner {
  order: 9 !important;
  margin: 1rem 0 0 !important;
}

/* 5) Ocultar aviso "Sin stock | 15 días" del propio PrestaShop:
      ya hay caja verde de pmdelivery con info clara de cuándo llega,
      ese aviso es ruido. */
.product__availability,
.js-product-availability {
  display: none !important;
}

/* 6) Watermark IP del módulo visitordiscount (#vd-wm).
      Anti-capturas que pinta la IP arriba con opacidad 0.08. Álvaro lo
      nota visualmente, lo ocultamos. La detección keyup PrintScreen y
      el banner de cupón siguen funcionando. */
#vd-wm {
  display: none !important;
}

/* 6-bis) Watermark IP — Álvaro lo quiere visible entre la paleta de
   colores y la descripción corta. Quito el display:none anterior y
   convierto el watermark de absolute a flex item con order entre
   variants (3) y description-short (4). */
#vd-wm {
  display: block !important;
  position: static !important;
  order: 3 !important;
  margin: .35rem 0 .15rem !important;
  font-size: 9px !important;
  color: #000 !important;
  opacity: 0.08 !important;
  font-family: monospace !important;
  letter-spacing: 0.5px !important;
  user-select: none !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  top: auto !important;
  left: auto !important;
}

/* 7) Quitar barra verde lateral de la caja pmdelivery — Álvaro: "muy IA" */
.pmd-product-message,
.pmd-cart-message {
  border-left: 0 !important;
}

/* 8) Menos espacio entre botón Añadir al carrito y caja amarilla OFERTA FLASH */
#visitor-discount-banner {
  margin: .5rem 0 0 !important;
}

/* 9) Banner OFERTA FLASH compacto y mono — refinamiento estético */
#visitor-discount-banner {
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: #fffaeb !important;
  border: 1px solid rgba(245, 158, 11, .35) !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, .08) !important;
}

#visitor-discount-banner .vdb-title {
  text-align: center !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
  color: #92400e !important;
}

#visitor-discount-banner .vdb-line {
  gap: 8px !important;
  font-size: 13px !important;
  color: #4a3a1a !important;
}

#visitor-discount-banner .vdb-code {
  padding: 4px 10px !important;
  font-size: 12.5px !important;
  background: #fff !important;
  border: 1px dashed rgba(245, 158, 11, .55) !important;
  border-radius: 5px !important;
  color: #92400e !important;
}

#visitor-discount-banner .vdb-copy {
  padding: 4px 12px !important;
  font-size: 12px !important;
  border-radius: 5px !important;
  background: #1f1f1f !important;
  font-weight: 600 !important;
}

#visitor-discount-banner .vdb-note {
  margin-top: 5px !important;
  font-size: 10.5px !important;
  color: #a07b30 !important;
  font-style: italic !important;
}

/* 10) Descripción full-width y reassurance horizontal debajo
       Antes: hummingbird usa grid 55%/45% en .product__bottom dejando
       la descripción estrecha y un hueco grande a la derecha con los
       3 reassurance arriba. Ahora: descripción 100% y reassurance
       en fila horizontal debajo. */
@media (min-width: 768px) {
  .product__bottom {
    display: block !important;
    grid-template-columns: none !important;
  }
  .product__bottom-left,
  .product__bottom-right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .product__bottom-right {
    margin-top: 2rem !important;
    margin-block-end: 0 !important;
  }
}

/* Reassurance items en fila horizontal (todos los breakpoints) */
.product__bottom-right .block-reassurance,
.product__bottom-right ul.block-reassurance {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.product__bottom-right .block-reassurance > li,
.product__bottom-right ul.block-reassurance > li {
  flex: 1 1 280px !important;
  max-width: 360px !important;
}

/* 10b) Reassurance horizontal - selector correcto. La estructura real
       de blockreassurance es .blockreassurance > .reassurance (no ul/li). */
.product__bottom-right .blockreassurance,
.product__bottom-right .blockreassurance--product {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: center !important;
  padding: 1rem !important;
  margin: 0 !important;
  border-top: 1px solid var(--pm-border) !important;
}

.product__bottom-right .blockreassurance .reassurance,
.product__bottom-right .blockreassurance--product .reassurance {
  flex: 1 1 280px !important;
  max-width: 360px !important;
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  margin: 0 !important;
  padding: .5rem !important;
}

.product__bottom-right .reassurance__image {
  flex-shrink: 0 !important;
}

.product__bottom-right .reassurance__image svg {
  width: 40px !important;
  height: 40px !important;
}

.product__bottom-right .reassurance__text {
  flex: 1 !important;
  min-width: 0 !important;
}

/* 11) Sección Comentarios (productcomments) más discreta - "queda muy mazacote" */
.product-comments-wrapper {
  margin: 1.5rem 0 0 !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--pm-border) !important;
}

#product-comments-list-header {
  margin: 0 0 .5rem !important;
}

#product-comments-list-header h2.section-title {
  font-family: "Manrope", sans-serif !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: var(--pm-ink-muted, #6b7280) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

#empty-product-comment {
  font-size: .8rem !important;
  color: var(--pm-ink-muted, #6b7280) !important;
  font-style: italic !important;
  padding: .15rem 0 !important;
  margin: 0 !important;
}

/* Botón "Sea el primero en escribir una reseña" pequeño y discreto */
.product-comments-wrapper .post-product-comment,
.product-comments-wrapper .btn-comment,
.product-comments-wrapper a.post-product-comment,
.product-comments-wrapper button.post-product-comment {
  font-size: .75rem !important;
  padding: .25rem .65rem !important;
  border-radius: 4px !important;
  border-width: 1px !important;
  margin-top: .5rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* 12) Quitar blockreassurance del producto - se repetía con el
       footer-reassurance.pm-reassure que ya tiene los 4 items
       currados (Envío 40€ / Asesoría real / Marcas oficiales /
       14 días). Toda la sección bottom-right oculta en producto. */
.product__bottom-right {
  display: none !important;
}

/* 13) Quitar badge "Cerrado/Abierto" inline del título "Horario tienda"
       Álvaro: con que salga el horario es suficiente, el badge sobra. */
.pm-horario__inline-status {
  display: none !important;
}

/* 14) Fix popup chat Leo en móvil - el CSS del módulo leowhatsapp tiene
       reglas con !important fuera de media query que sobreescriben la
       media query móvil del propio módulo. El popup quedaba ~60px de
       ancho con el texto partido letra a letra.
       Override del override con max-width:768px para móvil/tablet. */
@media (max-width: 768px) {
  body #leowhatsapp-widget #leowhatsapp-popup {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 90px !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 70vh !important;
  }
  #leowhatsapp-widget .leowhatsapp-body {
    max-height: 50vh !important;
  }
}

/* =============================================================
   HEADER v2.1 — móvil: lupa de búsqueda + selector de idioma (01/05/2026)
   El TPL ps_searchbar ya emite tanto el bloque desktop (#_desktop_ps_searchbar)
   como el botón lupa móvil con offcanvas (.ps-searchbar--mobile). Hasta ahora
   estaban ocultos por la wrap d-none d-md-flex; al cambiarla a col-md d-flex,
   queda visible el botón en mobile.
   El selector de idioma usa el swap responsive de Hummingbird:
   responsive-toggler.ts intercambia el innerHTML de #_desktop_ps_languageselector
   con #_mobile_ps_languageselector cuando el viewport baja de 768px.
   ============================================================= */

/* DESKTOP: el wrap search ahora NO tiene clases bootstrap; reconstruimos flex
   centrado vía custom CSS (md+). Replica del comportamiento previo con col-md d-flex. */
@media (min-width: 768px) {
  .header-bottom__row > .header-bottom__search {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  /* Lupa a la derecha en el offcanvas de búsqueda (mismo patrón que desktop).
     El JS responsive-toggler.ts hace swap del innerHTML del searchbar al
     placeholder #_mobile_ps_searchbar dentro del offcanvas. */
  #_mobile_ps_searchbar .ps-searchbar__magnifier {
    left: auto !important;
    right: .9rem !important;
  }
  #_mobile_ps_searchbar .ps-searchbar__input {
    padding-left: 1rem !important;
    padding-right: 2.75rem !important;
  }
  #_mobile_ps_searchbar .ps-searchbar__clear {
    right: 2.5rem !important;
  }
}

@media (max-width: 767.98px) {
  /* Móvil: disolvemos el wrap con display:contents para que sus hijos (botón lupa
     mobile + bloque desktop oculto) pasen a ser hijos directos del flex padre. */
  .header-bottom__row > .header-bottom__search {
    display: contents;
  }
  .header-bottom__search .ps-searchbar--mobile .header-block,
  #_mobile_ps_languageselector .header-block {
    padding: .35rem .45rem !important;
    min-width: 0 !important;
  }
  .header-bottom__search .ps-searchbar--mobile .header-block__icon,
  #_mobile_ps_languageselector .material-icons {
    font-size: 22px !important;
    margin: 0 !important;
  }
  /* Selector de idioma compacto en móvil: solo icono globo, sin texto */
  #_mobile_ps_languageselector .ps-languageselector {
    display: flex;
    align-items: center;
  }
  #_mobile_ps_languageselector .header-block__title,
  #_mobile_ps_languageselector .dropdown-toggle::after {
    display: none !important;
  }
  #_mobile_ps_languageselector .header-block {
    padding: .35rem .45rem !important;
    min-width: 0 !important;
  }
  #_mobile_ps_languageselector .header-block__icon {
    font-size: 22px !important;
    margin: 0 !important;
  }
  #_mobile_ps_languageselector .dropdown-menu {
    right: 0;
    left: auto !important;
    transform: none !important;
  }
  /* Override hipotético si el módulo no tuviera el TPL custom y emite <select> */
  #_mobile_ps_languageselector .form-select {
    border: none !important;
    background-color: transparent !important;
    padding: .25rem 1.25rem .25rem .35rem !important;
    font-size: .85rem !important;
    width: auto !important;
    min-width: 0 !important;
    color: var(--pm-primary, #2C5F8D) !important;
    cursor: pointer;
    background-position: right .25rem center !important;
    background-size: 12px 10px !important;
  }
  #_mobile_ps_languageselector .form-select:focus {
    box-shadow: none !important;
    border: none !important;
  }
}

/* =============================================================
   MENU MÓVIL v3.1 — drawer ETS megamenu por encima del header (01/05/2026)
   El drawer del megamenu ETS (.mm_menus_ul.active) tiene z-index 10000 pero
   queda atrapado en el stacking context del header sticky (z:1000), así que
   los iconos del header (lupa/idioma/cuenta/carrito) se renderizaban encima
   del drawer en mobile. Cuando el menu se abre ETS añade body.noscroll.
   ============================================================= */
body.noscroll .header,
body.noscroll #header {
  z-index: auto !important;
}
body.noscroll .ets_mm_megamenu {
  z-index: 9999 !important;
  position: relative;
}
body.noscroll .mm_menus_ul.active {
  z-index: 10000 !important;
}
/* Backdrop oscuro detrás del drawer (cubre todo lo que el drawer no tapa).
   Usamos un <div class="pm-mobile-backdrop"> real (renderizado en header.tpl)
   en lugar de body::after porque el pseudo no se renderizaba sobre algunos
   stacking contexts (slider/carousel) en mobile. */
/* Backdrop semitransparente DESCARTADO — siempre dejaba ver el contenido detrás
   y subir la opacidad hacía la pantalla demasiado oscura. Cambiamos al approach
   de drawer fullscreen: el .mm_menus_ul.active ocupa el viewport completo cuando
   el menú está abierto, con fondo opaco. */
.pm-mobile-backdrop { display: none !important; }

/* Drawer del menú móvil ocupa todo el viewport con fondo blanco opaco */
body.noscroll .ets_mm_megamenu .mm_menus_ul.active {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #fff !important;
  z-index: 100000 !important;
  overflow-y: auto !important;
}

/* Aseguramos que el megamenu (padre) eleve su stacking context para que
   el drawer encima quede sobre el header sticky y el slider. */
body.noscroll .ets_mm_megamenu {
  position: relative;
  z-index: 99999 !important;
}

/* El slider ETS-Carousel del hero y el contenido del page tienen su propio
   layer que el browser eleva al GPU compositing (transform translate3d implícito
   del swiper/bootstrap), saltándose el z-index del drawer. La solución limpia
   es esconderlos cuando el menú móvil está abierto. */
body.noscroll .page-content,
body.noscroll #wrapper,
body.noscroll #content-wrapper,
body.noscroll .ps-imageslider,
body.noscroll .pm-carousel-section,
body.noscroll #footer,
body.noscroll footer {
  visibility: hidden !important;
}
/* Excepto el botón de Leo (WhatsApp) que vive en body */
body.noscroll #leowhatsapp-widget,
body.noscroll #leowhatsapp-popup {
  visibility: hidden !important;
}
/* Iconos del header se ocultan cuando el menu está abierto (el drawer los
   tapa visualmente con su barra "MENÚ / REGRESO" y queda más limpio). */
body.noscroll .header-bottom__search,
body.noscroll #_mobile_ps_languageselector,
body.noscroll #_mobile_ps_customersignin,
body.noscroll #_mobile_ps_shoppingcart {
  visibility: hidden !important;
}

/* CARRITO v3 — quitar avisos de stock por línea (pmdelivery ya muestra fecha de entrega) */
.product-line__item--availability,
.product-line__item--small-info {
  display: none !important;
}


/* HOME — pegar slide al primer carrusel (eliminar el gap de 40px del grid solo en ese par) */
.page-content--home > .ps-imageslider + .pm-carousel-section {
  margin-top: -40px !important;
}


/* HOME — slider sin margen abajo para que el carrusel se monte sobre él (aire interno del carrusel se conserva con su padding-top) */
.ps-imageslider { margin-bottom: 0 !important; }

/* HOME — pegar carruseles consecutivos (igual técnica que slide→carrusel) */
.page-content--home > .pm-carousel-section + .pm-carousel-section {
  margin-top: -40px !important;
}
.page-content--home > .pm-carousel-section:has(+ .pm-carousel-section) {
  padding-bottom: 0 !important;
}

/* FICHA PRODUCTO — reducir aire (Álvaro 02/05): a la mitad */
.breadcrumb__wrapper { margin-bottom: 20px !important; }   /* antes 40 */
.product__container  { margin-bottom: 25px !important; }   /* antes ~51 */

/* Slide móvil — la imagen mobile es 4:5, no recortar a 16:9 (que perdía la mitad inferior) */
@media (max-width: 767.98px) {
  .ps-imageslider .carousel-item img,
  .ps-imageslider__figure img {
    aspect-ratio: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* Slide móvil — los wrappers también deben dejar crecer la altura para mostrar la imagen 4:5 entera */
@media (max-width: 767.98px) {
  .ps-imageslider .carousel-inner,
  .ps-imageslider .carousel-item,
  .ps-imageslider__figure {
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }
}

/* === LOGO WORDMARK PequeMonster — ancho total del slot, centrado vertical (03/05/2026) ===
   Estrategia: dar al slot un ancho fijo razonable y permitir que el logo ocupe todo
   ese ancho con altura proporcional. El alto se "auto-ajusta" según el ratio del logo. */
.header-bottom__row {
  align-items: center !important;
}
.header-bottom__logo {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: 320px !important;
  max-width: 320px !important;
  min-width: 320px !important;
}
.header-bottom__logo .navbar-brand,
.header-bottom__logo .header-bottom__h1 {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}
.header-bottom__logo .logo,
.header-bottom__logo img.logo,
.header-bottom__logo img.logo.img-fluid {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: 100% !important;
  display: block !important;
}
/* Que el buscador y el resto se acomoden */
.header-bottom__search {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Tablet/Mobile: ajustar ancho del slot */
@media (max-width: 1199px) {
  .header-bottom__logo {
    width: 240px !important;
    max-width: 240px !important;
    min-width: 240px !important;
  }
}
@media (max-width: 767px) {
  .header-bottom__logo {
    width: 180px !important;
    max-width: 180px !important;
    min-width: 180px !important;
  }
}
@media (max-width: 420px) {
  .header-bottom__logo {
    width: 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
  }
}

/* =============================================================
   MENÚ ets_megamenu — Dirección A "Editorial cálido" (03/05/2026)
   Selectores reales: .mm_menus_li > a, .mm_menu_content_title
   ============================================================= */

/* Tipografía Fraunces minúsculas en links del menú */
.ets_mm_megamenu .mm_menus_li > a,
.ets_mm_megamenu .mm_menus_li > a > .mm_menu_content_title {
  font-family: var(--pm-font-serif) !important;
  font-weight: 400 !important;
  font-size: 1.15rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 0 !important;
  color: var(--pm-ink) !important;
  line-height: 1.3 !important;
}

/* Capital inicial de cada categoría via ::first-letter */
.ets_mm_megamenu .mm_menus_li > a > .mm_menu_content_title::first-letter {
  text-transform: uppercase !important;
}

/* Quitar style inline font-size:16px del módulo (override) */
.ets_mm_megamenu .mm_menus_li > a[style*="font-size"] {
  font-size: 1.15rem !important;
}

/* Underline coral animado en hover y dropdown abierto */
.ets_mm_megamenu .mm_menus_li > a {
  position: relative !important;
  text-decoration: none !important;
  padding: 0.85rem 0 !important;
  transition: color .25s var(--pm-ease) !important;
}
.ets_mm_megamenu .mm_menus_li > a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 6px !important;
  height: 2px !important;
  background: var(--pm-accent) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .3s var(--pm-ease) !important;
}
.ets_mm_megamenu .mm_menus_li:hover > a::after,
.ets_mm_megamenu .mm_menus_li.open_li > a::after,
.ets_mm_megamenu .mm_menus_li:hover > a {
  transform: scaleX(1) !important;
}

/* Mantener color tinta en hover (sólo cambia el underline coral) */
.ets_mm_megamenu .mm_menus_li:hover > a,
.ets_mm_megamenu .mm_menus_li.open_li > a {
  color: var(--pm-ink) !important;
  text-decoration: none !important;
}

/* Quitar fondo del bloque del menú */
.ets_mm_megamenu,
.ets_mm_megamenu_content,
.ets_mm_megamenu .mm_menus_ul {
  background: transparent !important;
}

/* Quitar separadores verticales entre items */
.ets_mm_megamenu .mm_menus_li {
  border: 0 !important;
}

/* Iconos FontAwesome al lado del texto (si los hay) sutil en azul cielo */
.ets_mm_megamenu .mm_menus_li > a .mm_menu_content_title > i.fa {
  color: var(--pm-primary) !important;
  margin-right: .5rem !important;
  font-size: .95em !important;
  opacity: .8 !important;
}

/* Flecha mm_arrow (chevron) sutil */
.ets_mm_megamenu .mm_menus_li > a .mm_arrow {
  margin-left: .35rem !important;
  opacity: .55 !important;
  font-size: .8em !important;
}

/* Dropdown (submenu): caja blanca con borde superior coral */
.ets_mm_megamenu .mm_columns_ul,
.ets_mm_megamenu .mm_columns_ul_tobottom {
  background: var(--pm-surface) !important;
  border-top: 2px solid var(--pm-accent) !important;
  box-shadow: var(--pm-shadow-md) !important;
  border-radius: 0 0 var(--pm-radius-md) var(--pm-radius-md) !important;
}

/* Items del submenu */
.ets_mm_megamenu .mm_columns_ul a,
.ets_mm_megamenu .mm_columns_li a {
  font-family: var(--pm-font-serif) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  text-transform: none !important;
  color: var(--pm-ink) !important;
  letter-spacing: 0 !important;
  font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 0 !important;
  padding: .5rem 0 !important;
  transition: color .2s var(--pm-ease) !important;
}
.ets_mm_megamenu .mm_columns_ul a:hover,
.ets_mm_megamenu .mm_columns_li a:hover {
  color: var(--pm-primary) !important;
}

/* Mobile drawer: misma identidad */
@media (max-width: 1199px) {
  .ets_mm_megamenu .mm_menus_li > a,
  .ets_mm_megamenu .mm_menus_li > a > .mm_menu_content_title {
    font-size: 1.4rem !important;
    padding: 1rem 1.5rem !important;
  }
  .ets_mm_megamenu .mm_menus_li > a::after {
    /* En móvil drawer no usamos el pseudo; usamos border-bottom */
    display: none !important;
  }
  .ets_mm_megamenu .mm_columns_ul a,
  .ets_mm_megamenu .mm_columns_li a {
    font-size: 1.1rem !important;
    padding: .65rem 1.5rem !important;
  }
}

/* =============================================================
   MENÚ DRAWER MÓVIL — ajustes finos Editorial cálido (03/05/2026)
   - Cabecera "MENÚ/REGRESO" en crema con tinta (no negra)
   - Items alineados a la izquierda con padding consistente
   - Border-bottom sutil entre items
   - Tamaño y espaciado más equilibrados
   - "+" toggle más sutil y bien centrado
   ============================================================= */

@media (max-width: 1199px) {

  /* Drawer fondo crema en lugar de blanco puro para coherencia con header */
  body.noscroll .ets_mm_megamenu .mm_menus_ul.active {
    background: var(--pm-base) !important; /* crema #FBFAF5 */
  }

  /* Cabecera del drawer (MENÚ / REGRESO): pasar de negro a tinta sobre crema */
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li:first-child,
  .ets_mm_megamenu .mm_menus_back,
  .ybc-menu-toggle.opened {
    background: var(--pm-base) !important;
    color: var(--pm-ink) !important;
    border-bottom: 1px solid var(--pm-border) !important;
  }
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li.mm_menus_back .pull-left,
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li.mm_menus_back .pull-right,
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li:first-child .pull-left,
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li:first-child .pull-right {
    color: var(--pm-ink) !important;
    font-family: var(--pm-font-sans) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: .95rem !important;
    letter-spacing: .02em !important;
  }
  /* Iconos hamburger (3 rayas) en tinta */
  .ets_mm_megamenu .mm_menus_back .icon-bar,
  .ets_mm_megamenu .ybc-menu-toggle .icon-bar {
    background-color: var(--pm-ink) !important;
  }
  .ets_mm_megamenu .mm_menus_back_icon {
    border-color: var(--pm-ink) !important;
  }

  /* Items de menú: alineados a la izquierda con padding consistente */
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--pm-border-soft) !important;
    background: transparent !important;
    width: 100% !important;
    flex: none !important;
  }
  /* Quitar el border-bottom de la cabecera (ya tiene su propio) y del último */
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li:first-child,
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li:last-child {
    border-bottom: 0 !important;
  }

  /* Link del item: padding consistente, sin uppercase, Fraunces */
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li > a,
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li > a > .mm_menu_content_title {
    font-size: 1.2rem !important;
    padding: 1.05rem 1.5rem !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    color: var(--pm-ink) !important;
  }
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li > a > .mm_menu_content_title {
    padding: 0 !important;
    width: auto !important;
  }

  /* "+" toggle del item con dropdown: más sutil, pequeño, centrado vertical */
  .ets_mm_megamenu .mm_menus_li > .arrow,
  .ets_mm_megamenu .mm_menus_li > .arrow.closed,
  .ets_mm_megamenu .mm_menus_li > .arrow.opened {
    position: absolute !important;
    right: 1.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 18px !important;
    color: var(--pm-ink-muted) !important;
    opacity: .55 !important;
    background: transparent !important;
  }
  .ets_mm_megamenu .mm_menus_li > .arrow:hover {
    opacity: 1 !important;
  }
  /* Hacer el LI relativo para que el .arrow absolute funcione */
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li {
    position: relative !important;
  }

  /* Submenu (cuando se expande dentro del drawer) */
  .ets_mm_megamenu .mm_menus_li .mm_columns_ul {
    border-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(21, 24, 33, 0.025) !important;
    padding: .5rem 0 !important;
  }
  .ets_mm_megamenu .mm_menus_li .mm_columns_ul a,
  .ets_mm_megamenu .mm_menus_li .mm_columns_li a {
    font-size: 1rem !important;
    padding: .55rem 2rem !important;
    color: var(--pm-ink-soft) !important;
  }

  /* Ocultar el indicador "4,7 ⭐" (widget reseñas flotante) cuando el menu está abierto */
  body.noscroll [class*="reviews"],
  body.noscroll [id*="reviews-widget"],
  body.noscroll .pm-reviews-badge,
  body.noscroll .reviews-badge {
    display: none !important;
  }
}

/* Cabecera del drawer móvil (.close_menu): pasarla a fondo crema con tinta */
@media (max-width: 1199px) {
  .ets_mm_megamenu .mm_menus_ul .close_menu,
  .ets_mm_megamenu .mm_menus_ul li.close_menu {
    background: var(--pm-base) !important;
    color: var(--pm-ink) !important;
    border-bottom: 1px solid var(--pm-border) !important;
    padding: 1rem 1.5rem !important;
    font-family: var(--pm-font-sans) !important;
    font-weight: 500 !important;
    font-size: .95rem !important;
    text-transform: none !important;
    letter-spacing: .03em !important;
  }
  .ets_mm_megamenu .mm_menus_ul .close_menu .pull-left,
  .ets_mm_megamenu .mm_menus_ul .close_menu .pull-right {
    color: var(--pm-ink) !important;
    font-family: var(--pm-font-sans) !important;
    font-weight: 500 !important;
    text-transform: none !important;
  }
  .ets_mm_megamenu .mm_menus_ul .close_menu .icon-bar {
    background-color: var(--pm-ink) !important;
  }
  .ets_mm_megamenu .mm_menus_ul .close_menu .mm_menus_back_icon {
    border-color: var(--pm-ink) !important;
  }
  /* Botón ybc-menu-toggle (hamburguer) en cabecera */
  .ybc-menu-toggle.opened {
    background: var(--pm-base) !important;
    color: var(--pm-ink) !important;
  }

  /* Iconos FA al lado de categorías: ocultar el espacio si no se ven */
  .ets_mm_megamenu .mm_menus_li > a .mm_menu_content_title > i.fa {
    display: none !important;  /* mejor sin iconos FA en móvil para limpieza */
  }
  /* O si los queremos: margin a 0 */
}

/* =============================================================
   PAYMENT OPTIONS — uniformar tamaño logos (03/05/2026)
   El logo "banner" de Sequra es mucho más alto que los iconos de
   tarjeta/bizum/QR. Limitamos max-height para que todos vayan al
   mismo nivel visual.
   ============================================================= */
.payment-option img,
.payment-options img,
.payment_module img.payment-option-logo,
.payment-option-logo,
[data-module-name="sequra"] img,
[data-module-name="redsyspur"] img,
[data-module-name="ps_wirepayment"] img {
  max-height: 24px !important;
  width: auto !important;
  height: auto !important;
  vertical-align: middle !important;
  margin-right: .5rem !important;
}

/* En móvil un poco más pequeño todavía para que no compitan con el texto */
@media (max-width: 767px) {
  .payment-option img,
  .payment-options img,
  [data-module-name="sequra"] img {
    max-height: 22px !important;
  }
}

/* =============================================================
   BOTÓN "REALIZAR PEDIDO" — color azul siempre uniforme (03/05/2026)
   En el step Pago el botón se renderiza disabled (no hay método
   seleccionado por defecto en mobile) y Bootstrap le aplica
   opacity reducida → se ve azul claro grisáceo. Forzamos color
   pleno y opacidad 1 incluso en disabled.
   ============================================================= */
#payment-confirmation button,
#payment-confirmation .btn-primary,
#payment-confirmation button.btn-primary,
#payment-confirmation button.btn,
#payment-confirmation button[type="submit"],
button.submit-confirm,
button[name="confirmOrder"],
.cart-detailed-actions .btn-primary {
  background-color: var(--pm-primary) !important;
  background: var(--pm-primary) !important;
  border-color: var(--pm-primary) !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* Estado disabled: misma intensidad que el resto, no fade */
#payment-confirmation button:disabled,
#payment-confirmation button.disabled,
#payment-confirmation button.btn-primary:disabled,
#payment-confirmation button.btn-primary.disabled,
button.submit-confirm:disabled,
button[name="confirmOrder"]:disabled {
  background-color: var(--pm-primary) !important;
  border-color: var(--pm-primary) !important;
  color: #fff !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Hover/active oscurece como el resto */
#payment-confirmation button:not(:disabled):hover,
#payment-confirmation .btn-primary:not(:disabled):hover,
button.submit-confirm:not(:disabled):hover,
button[name="confirmOrder"]:not(:disabled):hover {
  background-color: #1F4265 !important;
  border-color: #1F4265 !important;
}

/* =============================================================
   Quitar botón "Continuar comprando" del carrito (03/05/2026)
   Álvaro: lía a clientes con poca experiencia. El logo y el menú
   ya permiten volver al inicio si quieren añadir más productos.
   ============================================================= */
.cart__continue-shopping {
  display: none !important;
}

/* =============================================================
   2026-05-04 — Slide hero: limitar tamaño en pantallas grandes
   ============================================================
   La imagen nativa del slide es 2048x768 (ratio 8:3). En
   pantallas > FullHD (4K, 5K, monitores ultrawide) el slider
   está full-bleed (100vw), lo que provoca:
   1. Upscaling de la imagen (se ve borrosa y el texto enorme)
   2. Recorte vertical por max-height: 720px + object-fit cover

   Solución: en pantallas >= 1921px limitamos la imagen al ancho
   donde la altura natural cabe en 720px (1920px). El fondo
   --pm-surface (#FBFAF5) del .ps-imageslider rellena los
   laterales manteniendo la sensación full-width.
   ============================================================= */
@media (min-width: 1921px) {
  .ps-imageslider .carousel-item img,
  .ps-imageslider__figure img {
    max-width: 1920px;
    max-height: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Badge descuento coral pill - PequeMonster v3 (05/05/2026 v2) ===== */
.product__discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.55rem;
  background-color: var(--pm-accent, #F4A259);
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  margin-left: 0.5rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
  text-transform: none;
  box-shadow: 0 1px 2px rgba(192,102,15,0.15);
  transition: background-color 0.15s ease;
}
.product__discount-badge:hover {
  background-color: #E08B41;
}
/* Listado: badge sobre miniatura aún más pequeño */
.product-miniature .product__discount-badge {
  font-size: 0.65rem;
  padding: 0.14rem 0.45rem;
  margin-left: 0.35rem;
}
/* Tachado del precio regular más sutil */
.product__regular-price {
  color: #999;
  text-decoration: line-through;
  font-weight: 400;
  font-size: 0.95em;
}

/* === PequeMonster v3 (06/05/2026): badge envío gratis ficha producto — mismas dimensions que discount-badge === */
.product__free-shipping {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.55rem;
  background-color: rgba(125, 168, 46, 0.18);
  color: #2c5e1c !important;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  margin-left: 0.5rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
  text-transform: none;
  border: 1px solid rgba(125, 168, 46, 0.45);
  font-family: 'Manrope', -apple-system, sans-serif;
}
/* Listado: aún más pequeño igual que discount-badge */
.product-miniature .product__free-shipping {
  font-size: 0.65rem;
  padding: 0.14rem 0.45rem;
  margin-left: 0.35rem;
}