.prso-header-categories,
.prso-header-categories *,
.prso-search-trigger,
.prso-search-trigger *,
.prso-mega,
.prso-mega *,
.prso-price-filter,
.prso-price-filter *,
.prso-header-slider,
.prso-header-slider *,
.prso-mini-cart,
.prso-mini-cart *,
.prso-text-trigger,
.prso-text-trigger *,
.prso-template-modal,
.prso-template-modal * {
  box-sizing: border-box;
}

.prso-header-categories,
.prso-search-trigger,
.prso-mega,
.prso-price-filter,
.prso-header-slider,
.prso-mini-cart,
.prso-text-trigger {
  --prso-gap: 8px;
  --prso-align: flex-start;
  --prso-item-height: 38px;
  --prso-trigger-width: 42px;
  --prso-trigger-height: 42px;
  --prso-icon-size: 20px;
  --prso-input-height: 42px;
  --prso-panel-width: 520px;
  --prso-mega-max-width: 1180px;
  --prso-mega-gap: 22px;
  --prso-mega-z-index: 10000;
  --prso-mega-top: 104px;
  --prso-product-columns: 3;
  --prso-media-min-height: 180px;
  --prso-slider-height: 320px;
  --prso-slider-max-width: 1200px;
  --prso-slider-object-fit: cover;
  --prso-slider-speed: 350ms;
  --prso-slider-arrow-size: 42px;
  --prso-slider-arrow-offset: 14px;
  --prso-slider-dot-size: 8px;
  --prso-slider-dots-bottom: 14px;
  --prso-slider-dots-gap: 7px;
  --prso-cart-button-gap: 8px;
  --prso-cart-panel-gap: 12px;
  --prso-cart-panel-width: 360px;
  --prso-cart-image-size: 64px;
  color: var(--prso-text, currentColor);
  font-family: inherit;
}

.prso-text-trigger {
  display: flex;
  justify-content: var(--prso-align);
  width: 100%;
}

.prso-text-trigger__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--prso-item-height);
  padding: 0;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}

.prso-text-trigger__control:hover,
.prso-text-trigger__control:focus-visible {
  background: var(--prso-bg-hover, var(--prso-bg, transparent));
  color: var(--prso-text-hover, var(--prso-text, currentColor));
  outline: 0;
}

.prso-template-modal {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.prso-template-modal--open {
  display: flex;
}

.prso-template-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 20, 25, 0.46);
}

.prso-template-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 44px));
  overflow: auto;
  background: #fff;
  color: #181419;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(24, 20, 25, 0.22);
}

.prso-template-modal__close {
  position: sticky;
  top: 12px;
  left: calc(100% - 48px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 12px 12px 0 auto;
  padding: 0;
  background: #fff;
  color: #181419;
  border: 1px solid rgba(23, 23, 23, 0.1);
  border-radius: 999px;
  cursor: pointer;
}

.prso-template-modal__content {
  padding: 12px 24px 28px;
}

.prso-template-modal__loading,
.prso-template-modal__empty {
  margin: 0;
  color: #746a71;
  font-size: 14px;
  line-height: 1.5;
}

.prso-header-categories {
  --prso-category-depth-indent: 14px;
  width: 100%;
}

.prso-header-categories__list,
.prso-search-trigger {
  display: flex;
  align-items: center;
  justify-content: var(--prso-align);
  gap: var(--prso-gap);
}

.prso-header-categories__list {
  flex-wrap: wrap;
}

.prso-header-categories__item,
.prso-header-categories__more {
  position: relative;
  display: inline-flex;
}

.prso-header-categories__link,
.prso-header-categories__toggle,
.prso-trigger,
.prso-suggestion,
.prso-price-filter button,
.prso-price-filter input,
.prso-filter-tree button,
.prso-product-card__cart {
  font: inherit;
  letter-spacing: 0;
}

.prso-header-categories__link,
.prso-header-categories__toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--prso-item-height);
  padding: 0 12px;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
}

.prso-header-categories__toggle {
  gap: 6px;
  cursor: pointer;
  appearance: none;
}

.prso-header-categories__more > .prso-header-categories__toggle {
  padding-inline: 0;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

.prso-header-categories__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 160ms ease;
}

.prso-header-categories--open .prso-header-categories__toggle svg {
  transform: rotate(180deg);
}

.prso-header-categories__link:hover,
.prso-header-categories__link:focus-visible,
.prso-header-categories__toggle:hover,
.prso-header-categories__toggle:focus-visible,
.prso-header-categories--open .prso-header-categories__toggle {
  background: var(--prso-bg-hover, var(--prso-bg, transparent));
  color: var(--prso-text-hover, var(--prso-text, currentColor));
  outline: 0;
}

.prso-header-categories__more > .prso-header-categories__toggle:hover,
.prso-header-categories__more > .prso-header-categories__toggle:focus-visible,
.prso-header-categories--open .prso-header-categories__more > .prso-header-categories__toggle {
  background: transparent !important;
  background-image: none !important;
  color: var(--prso-text-hover, var(--prso-text, currentColor));
  box-shadow: none !important;
}

.prso-header-categories__submenu,
.prso-header-categories__panel {
  position: absolute;
  top: 100%;
  z-index: 10020;
  display: none;
  min-width: 180px;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
}

.prso-header-categories__submenu {
  left: 0;
  padding: 8px;
}

.prso-header-categories__item:hover .prso-header-categories__submenu,
.prso-header-categories__item:focus-within .prso-header-categories__submenu {
  display: grid;
  gap: 4px;
}

.prso-header-categories__panel {
  right: 0;
  width: var(--prso-panel-width);
  max-width: calc(100vw - 24px);
  max-height: min(480px, 72vh);
  overflow: auto;
  padding: 14px;
}

.prso-header-categories--open .prso-header-categories__panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: calc(var(--prso-gap) * 1.5);
}

.prso-header-categories__panel-group {
  display: grid;
  align-content: start;
  gap: 5px;
}

.prso-header-categories__branch,
.prso-header-categories__nested {
  display: grid;
  align-content: start;
  gap: 4px;
}

.prso-header-categories__nested {
  padding-left: var(--prso-category-depth-indent);
}

.prso-header-categories__link--child {
  min-height: auto;
  padding-block: 5px;
  color: var(--prso-muted, var(--prso-text, currentColor));
  font-size: 0.92em;
}

.prso-header-categories__link--single-child,
.prso-header-categories__link--panel-child {
  min-height: var(--prso-item-height);
  padding-block: 0;
  color: var(--prso-text, currentColor);
  font-size: inherit;
}

.prso-header-categories__link--panel-child {
  width: 100%;
}

.prso-search-trigger {
  width: auto;
}

.prso-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--prso-trigger-width);
  height: var(--prso-trigger-height);
  padding: 0;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
  border: 0;
  appearance: none;
  cursor: pointer;
}

.prso-trigger:hover,
.prso-trigger:focus-visible,
.prso-trigger[aria-expanded="true"] {
  background: var(--prso-bg-hover, var(--prso-bg, transparent));
  color: var(--prso-text-hover, var(--prso-text, currentColor));
  outline: 0;
}

.prso-trigger svg {
  width: var(--prso-icon-size);
  height: var(--prso-icon-size);
}

.prso-mega__search {
  width: 100%;
}

.prso-mega__input {
  width: 100%;
  min-height: var(--prso-input-height);
  padding: 0 14px;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
  border: 0;
  appearance: none;
  font: inherit;
  letter-spacing: 0;
}

.prso-mega__input:focus {
  outline: 1px solid var(--prso-bg-hover, currentColor);
  outline-offset: 2px;
}

.prso-mega-shell-marker {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.prso-mega {
  position: fixed;
  top: var(--prso-mega-top);
  left: 0;
  right: 0;
  z-index: var(--prso-mega-z-index);
  display: none;
  width: 100%;
  max-height: calc(100vh - var(--prso-mega-top));
  overflow: auto;
  background: var(--prso-bg, transparent);
}

.prso-mega.prso-mega--open {
  display: block;
}

.prso-mega-grid {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  grid-template-areas:
    "top top"
    "filters results";
  gap: var(--prso-mega-gap);
  width: min(var(--prso-mega-max-width), calc(100% - 32px));
  margin-inline: auto;
  padding: 22px 0 28px;
}

.prso-mega__top {
  grid-area: top;
  display: grid;
  gap: var(--prso-gap);
}

.prso-mega__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--prso-gap);
}

.prso-suggestion {
  display: inline-flex;
  align-items: center;
  min-height: var(--prso-item-height);
  padding: 0 12px;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
  border: 0;
  cursor: pointer;
}

.prso-suggestion:hover,
.prso-suggestion:focus-visible {
  background: var(--prso-bg-hover, var(--prso-bg, transparent));
  color: var(--prso-text-hover, var(--prso-text, currentColor));
  outline: 0;
}

.prso-mega__filters {
  grid-area: filters;
  min-width: 0;
}

.prso-filter-tree {
  --prso-check-size: 14px;
  --prso-check-gap: 8px;
  --prso-check-border: currentColor;
  --prso-check-active-bg: currentColor;
  --prso-check-active-color: #fff;
  --prso-subcategory-indent: 18px;
  display: grid;
  align-content: start;
  gap: var(--prso-gap);
  margin: 0;
  padding: 0;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
}

.prso-filter-tree__title,
.prso-mega__products-title,
.prso-product-card__name {
  margin: 0;
  color: var(--prso-text, currentColor);
  font-family: inherit;
  letter-spacing: 0;
}

.prso-filter-tree__groups,
.prso-filter-tree__group,
.prso-filter-tree__children {
  display: grid;
  gap: var(--prso-gap);
}

.prso-filter-tree__group,
.prso-filter-tree__branch {
  align-content: start;
}

.prso-filter-tree__branch {
  display: grid;
  gap: var(--prso-gap);
}

.prso-filter-tree__group > .prso-filter-tree__children,
.prso-filter-tree__branch > .prso-filter-tree__children {
  padding-left: var(--prso-subcategory-indent);
}

.prso-filter-tree__category,
.prso-filter-tree__subcategory {
  display: grid;
  grid-template-columns: var(--prso-check-size) minmax(0, 1fr);
  gap: var(--prso-check-gap);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: auto;
  padding: 4px 0;
  background: transparent !important;
  background-image: none !important;
  color: var(--prso-text, currentColor);
  line-height: 1.25;
  text-align: left;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  appearance: none;
  cursor: pointer;
}

.prso-filter-tree__subcategory {
  padding-left: 0;
  color: var(--prso-muted, var(--prso-text, currentColor));
  font-size: 0.92em;
}

.prso-filter-tree__check {
  position: relative;
  display: inline-block;
  width: var(--prso-check-size);
  height: var(--prso-check-size);
  background: transparent;
  border: 1px solid var(--prso-check-border);
  border-radius: 2px;
  box-shadow: none;
}

.prso-filter-tree__label {
  min-width: 0;
}

.prso-filter-tree__category:hover,
.prso-filter-tree__category:focus-visible,
.prso-filter-tree__category--active,
.prso-filter-tree__subcategory:hover,
.prso-filter-tree__subcategory:focus-visible,
.prso-filter-tree__subcategory--active {
  background: transparent !important;
  background-image: none !important;
  color: var(--prso-text-hover, var(--prso-text, currentColor));
  box-shadow: none !important;
  outline: 0;
}

.prso-filter-tree__category:hover .prso-filter-tree__check,
.prso-filter-tree__category:focus-visible .prso-filter-tree__check,
.prso-filter-tree__subcategory:hover .prso-filter-tree__check,
.prso-filter-tree__subcategory:focus-visible .prso-filter-tree__check {
  border-color: var(--prso-text-hover, var(--prso-check-border));
}

.prso-filter-tree__category--active .prso-filter-tree__check,
.prso-filter-tree__subcategory--active .prso-filter-tree__check {
  background: var(--prso-check-active-bg);
  border-color: var(--prso-check-active-bg);
}

.prso-filter-tree__category--active .prso-filter-tree__check::after,
.prso-filter-tree__subcategory--active .prso-filter-tree__check::after {
  position: absolute;
  left: 50%;
  top: 45%;
  width: calc(var(--prso-check-size) * 0.28);
  height: calc(var(--prso-check-size) * 0.5);
  border: solid var(--prso-check-active-color);
  border-width: 0 2px 2px 0;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.prso-price-filter {
  /* Colores de Pimienta Rosa. Se leen de los globales de Elementor, con el
     valor literal como red de seguridad por si el kit cambia de nombre. */
  --prso-marca: var(--e-global-color-primary, #E40C5C);
  --prso-marca-suave: var(--e-global-color-accent, #F6818B);
  --prso-marca-palida: #F6C1D1;
  --prso-marca-fondo: #FDF1F6;

  --prso-price-accent: var(--prso-marca);
  --prso-price-track-color: var(--prso-price-accent);
  --prso-price-track-base: var(--prso-marca-palida);
  --prso-price-track-height: 5px;
  --prso-price-thumb-color: var(--prso-price-accent);
  --prso-price-thumb-size: 20px;
  --prso-price-border: var(--prso-marca-palida);
  --prso-price-header-gap: 18px;
  --prso-price-controls-gap: 28px;
  --prso-price-control-gap: 12px;
  --prso-price-divider-height: 1px;
  --prso-price-number-width: 84px;
  --prso-price-number-height: 42px;
  display: grid;
  align-content: start;
  gap: 0;
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 0;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
}

.prso-price-filter__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prso-price-header-gap);
  margin-bottom: 14px;
}

.prso-price-filter__title {
  margin: 0;
  color: var(--prso-text, currentColor);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.prso-price-filter__divider {
  width: 100%;
  height: var(--prso-price-divider-height);
  margin-bottom: 24px;
  background: var(--prso-price-border);
}

.prso-price-filter__controls {
  display: grid;
  gap: var(--prso-price-controls-gap);
}

.prso-price-filter__control {
  display: flex;
  flex-direction: column;
  gap: var(--prso-price-control-gap);
  margin: 0;
  color: var(--prso-text, currentColor);
}

.prso-price-filter__label {
  display: block;
  color: var(--prso-text, currentColor);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
}

.prso-price-filter__range {
  --prso-price-range-percent: 100%;
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  accent-color: var(--prso-price-accent);
  background: transparent;
  cursor: pointer;
}

.prso-price-filter__range::-webkit-slider-runnable-track {
  height: var(--prso-price-track-height);
  background: linear-gradient(
    90deg,
    var(--prso-price-track-color) 0%,
    var(--prso-price-track-color) var(--prso-price-range-percent),
    var(--prso-price-track-base) var(--prso-price-range-percent),
    var(--prso-price-track-base) 100%
  );
  border-radius: 999px;
}

.prso-price-filter__range::-webkit-slider-thumb {
  width: var(--prso-price-thumb-size);
  height: var(--prso-price-thumb-size);
  margin-top: calc((var(--prso-price-track-height) - var(--prso-price-thumb-size)) / 2);
  background: var(--prso-price-thumb-color);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.prso-price-filter__range::-moz-range-track {
  height: var(--prso-price-track-height);
  background: var(--prso-price-track-base);
  border-radius: 999px;
}

.prso-price-filter__range::-moz-range-progress {
  height: var(--prso-price-track-height);
  background: var(--prso-price-track-color);
  border-radius: 999px;
}

.prso-price-filter__range::-moz-range-thumb {
  width: var(--prso-price-thumb-size);
  height: var(--prso-price-thumb-size);
  background: var(--prso-price-thumb-color);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.prso-price-filter__range:focus {
  outline: none;
}

.prso-price-filter__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--prso-price-thumb-color) 18%, transparent);
}

.prso-price-filter__range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--prso-price-thumb-color) 18%, transparent);
}

/* Pildora: mismo lenguaje visual que el boton de compra y los swatches.
   El radio 999px la mantiene redonda crezca lo que crezca la altura. */
.prso-price-filter__number-wrap {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: var(--prso-price-number-height);
  background: var(--prso-marca-fondo);
  border: 1.5px solid var(--prso-price-border);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.prso-price-filter__number-wrap:hover {
  border-color: var(--prso-marca-suave);
}

.prso-price-filter__number {
  width: var(--prso-price-number-width);
  min-height: calc(var(--prso-price-number-height) - 3px);
  padding: 7px 6px 7px 16px;
  background: transparent;
  color: var(--prso-text, currentColor);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
}

.prso-price-filter__number::-webkit-outer-spin-button,
.prso-price-filter__number::-webkit-inner-spin-button {
  margin: 0;
}

.prso-price-filter__number:focus {
  outline: 0;
}

.prso-price-filter__number-wrap:focus-within {
  border-color: var(--prso-price-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--prso-marca) 15%, transparent);
}

/* El tema pinta su propio borde gris y radio de 3px en todo input[type=number]
   y gana por especificidad, dejando una caja cuadrada dentro de la pildora.
   Con el selector completo mas el tipo de elemento se le gana la partida. */
.prso-price-filter .prso-price-filter__number-wrap > input.prso-price-filter__number,
.prso-price-filter input.prso-price-filter__number {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
}

/* El simbolo del euro en color de marca: da el toque de color que faltaba
   sin invadir la caja ni restar legibilidad a la cifra. */
.prso-price-filter__suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 0 14px 0 2px;
  color: var(--prso-marca);
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
}

/* El tirador del deslizador, con anillo blanco para despegarlo de la barra. */
.prso-price-filter__range::-webkit-slider-thumb {
  border: 3px solid #fff;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--prso-marca) 35%, transparent);
}

.prso-price-filter__range::-moz-range-thumb {
  border: 3px solid #fff;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--prso-marca) 35%, transparent);
}

.prso-price-filter__reset {
  color: var(--prso-marca);
}

.prso-price-filter__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  background-image: none !important;
  color: var(--prso-muted, var(--prso-text, currentColor));
  border: 0 solid transparent;
  border-radius: 0;
  box-shadow: none !important;
  appearance: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prso-price-filter__reset:hover,
.prso-price-filter__reset:focus-visible {
  background-image: none !important;
  color: var(--prso-text-hover, var(--prso-text, currentColor));
  outline: 0;
}

.prso-mega__results {
  grid-area: results;
  min-width: 0;
}

.prso-mega__results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--prso-gap);
  margin-bottom: 14px;
}

.prso-mega__view-all {
  flex: 0 0 auto;
  color: var(--prso-text, currentColor);
  line-height: 1.2;
  text-decoration: none;
}

.prso-products {
  display: grid;
  grid-template-columns: repeat(var(--prso-product-columns), minmax(0, 1fr));
  gap: var(--prso-gap);
}

.prso-products[aria-busy="true"] {
  opacity: 0.6;
}

.prso-product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
}

.prso-product-card__media {
  display: block;
  min-height: var(--prso-media-min-height);
  aspect-ratio: 1 / 1;
  background: var(--prso-soft, transparent);
  overflow: hidden;
  text-decoration: none;
}

.prso-product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prso-product-card__body {
  display: grid;
  align-content: start;
  gap: var(--prso-gap);
  padding: 13px;
}

.prso-product-card__name a {
  color: inherit;
  text-decoration: none;
}

.prso-product-card__sku {
  color: var(--prso-muted, var(--prso-text, currentColor));
}

.prso-product-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}

.prso-product-card__old-price {
  color: var(--prso-muted, var(--prso-text, currentColor));
  text-decoration: line-through;
}

.prso-product-card__current-price {
  color: var(--prso-text, currentColor);
}

.prso-product-card__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--prso-item-height);
  padding: 0 12px;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
  text-align: center;
  text-decoration: none;
}

.prso-product-card__cart:hover,
.prso-product-card__cart:focus-visible {
  background: var(--prso-bg-hover, var(--prso-bg, transparent));
  color: var(--prso-text-hover, var(--prso-text, currentColor));
  outline: 0;
}

.prso-empty {
  padding: 18px;
  background: var(--prso-bg, transparent);
  color: var(--prso-muted, var(--prso-text, currentColor));
}

.prso-header-slider {
  position: relative;
  width: min(100%, var(--prso-slider-max-width));
  height: var(--prso-slider-height);
  margin-inline: auto;
  overflow: hidden;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
}

.prso-header-slider__viewport,
.prso-header-slider__track,
.prso-header-slider__slide,
.prso-header-slider__link,
.prso-header-slider picture,
.prso-header-slider img {
  width: 100%;
  height: 100%;
}

.prso-header-slider__viewport {
  overflow: hidden;
}

.prso-header-slider__track {
  display: flex;
  transition: transform var(--prso-slider-speed) ease;
}

.prso-header-slider__slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.prso-header-slider__link,
.prso-header-slider picture {
  display: block;
}

.prso-header-slider img {
  display: block;
  object-fit: var(--prso-slider-object-fit);
}

.prso-header-slider--fade .prso-header-slider__track {
  position: relative;
  display: block;
  transform: none !important;
}

.prso-header-slider--fade .prso-header-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--prso-slider-speed) ease;
}

.prso-header-slider--fade .prso-header-slider__slide--active {
  opacity: 1;
  z-index: 1;
}

.prso-header-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--prso-slider-arrow-size);
  height: var(--prso-slider-arrow-size);
  padding: 0;
  background: var(--prso-bg, rgba(255, 255, 255, 0.86));
  color: var(--prso-text, currentColor);
  border: 0;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.prso-header-slider__arrow--prev {
  left: var(--prso-slider-arrow-offset);
}

.prso-header-slider__arrow--next {
  right: var(--prso-slider-arrow-offset);
}

.prso-header-slider__arrow:hover,
.prso-header-slider__arrow:focus-visible {
  background: var(--prso-bg-hover, var(--prso-bg, rgba(255, 255, 255, 0.86)));
  color: var(--prso-text-hover, var(--prso-text, currentColor));
  outline: 0;
}

.prso-header-slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.prso-header-slider__dots {
  position: absolute;
  left: 50%;
  bottom: var(--prso-slider-dots-bottom);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--prso-slider-dots-gap);
  transform: translateX(-50%);
}

.prso-header-slider__dot {
  width: var(--prso-slider-dot-size);
  height: var(--prso-slider-dot-size);
  padding: 0;
  background: var(--prso-bg, rgba(255, 255, 255, 0.62));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.prso-header-slider__dot--active,
.prso-header-slider__dot:hover,
.prso-header-slider__dot:focus-visible {
  background: var(--prso-bg-hover, var(--prso-text, currentColor));
  outline: 0;
}

/* -------------------------------------------------------------------------
 * MINI CARRITO
 *
 * Rediseño ago-2026. Nota importante para quien lo toque después:
 * este bloque sigue usando var(--prso-bg / --prso-text / --prso-bg-hover /
 * --prso-text-hover) en TODAS las superficies. Esas variables las escribe
 * Elementor desde add_visual_box_controls(). Si se sustituyen por colores
 * fijos, los controles de Estilo del widget dejan de hacer efecto y no hay
 * forma obvia de darse cuenta. Lo que sí se ha cambiado son los VALORES POR
 * DEFECTO del fallback, que es lo que se ve cuando nadie ha tocado nada.
 * ------------------------------------------------------------------------- */

.prso-mini-cart {
  --prso-cart-ink: #171717;
  --prso-cart-muted: #646363;
  --prso-cart-brand: #e40c5c;
  --prso-cart-brand-ink: #b00a48;
  --prso-cart-tint: #fff5f8;
  --prso-cart-hairline: rgba(23, 23, 23, 0.06);
  --prso-cart-radius: 20px;
  --prso-cart-radius-item: 16px;
  --prso-cart-radius-media: 12px;
  --prso-cart-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --prso-cart-speed: 180ms;

  position: relative;
  display: flex;
  justify-content: var(--prso-align);
  width: 100%;
  color: var(--prso-text, currentColor);
}

.prso-mini-cart__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--prso-cart-button-gap);
  min-height: var(--prso-item-height);
  padding: 8px 12px;
  background-color: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  overflow: visible;
  transition: background-color 200ms ease, transform 160ms var(--prso-cart-ease);
}

.prso-mini-cart__trigger:active {
  transform: scale(0.97);
}

.prso-mini-cart__trigger:hover,
.prso-mini-cart__trigger:focus-visible,
.prso-mini-cart--open .prso-mini-cart__trigger {
  background-color: var(--prso-bg-hover, var(--prso-cart-tint));
  color: var(--prso-text-hover, var(--prso-text, currentColor));
  outline: 0;
}

.prso-mini-cart__icon,
.prso-mini-cart__icon svg {
  display: inline-flex;
  width: var(--prso-icon-size);
  height: var(--prso-icon-size);
}

.prso-mini-cart__icon {
  --prso-bg: #e40c5c;
  --prso-text: #ffffff;
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
}

.prso-mini-cart__count {
  position: absolute;
  top: var(--prso-cart-count-top, 0);
  right: var(--prso-cart-count-right, 0);
  transform: translate(50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--prso-cart-count-size, 18px);
  height: var(--prso-cart-count-size, 18px);
  padding: 0 4px;
  background-color: var(--prso-bg, #e40c5c);
  color: var(--prso-text, #fff);
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
 * PANEL
 *
 * Antes: display:none cerrado, display:grid abierto. Desde display:none no
 * se puede animar NADA: el navegador salta al estado final y cualquier
 * transición que escribas es decorativa en el peor sentido. Ahora el panel
 * está siempre en el flujo (position:absolute, no ocupa espacio) y se
 * oculta con opacity + visibility + pointer-events.
 *
 * visibility:hidden, además de permitir la transición, lo saca del árbol de
 * accesibilidad: un lector de pantalla no anuncia un carrito cerrado.
 *
 * El origen de la escala es la esquina donde está el icono. Un popover que
 * crece desde su disparador se lee como que sale de ahí; desde el centro,
 * como que aparece de la nada.
 * ------------------------------------------------------------------------- */

.prso-mini-cart__panel {
  position: absolute;
  top: calc(100% + var(--prso-cart-panel-gap, 12px));
  right: 0;
  z-index: 10030;
  display: flex;
  flex-direction: column;
  width: min(var(--prso-cart-panel-width), calc(100vw - 24px));
  max-height: min(560px, 78vh);
  padding: 0;
  background-color: var(--prso-bg, #fff);
  color: var(--prso-text, currentColor);
  border: 1px solid var(--prso-cart-hairline);
  border-radius: var(--prso-cart-radius);
  box-shadow:
    0 1px 2px rgba(23, 23, 23, 0.04),
    0 12px 24px -8px rgba(23, 23, 23, 0.08),
    0 32px 64px -16px rgba(228, 12, 92, 0.12);
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.97) translateY(-4px);
  transform-origin: top right;
  transition:
    opacity var(--prso-cart-speed) var(--prso-cart-ease),
    transform var(--prso-cart-speed) var(--prso-cart-ease),
    visibility 0s linear var(--prso-cart-speed);
}

.prso-mini-cart--panel-left .prso-mini-cart__panel {
  left: 0;
  right: auto;
  transform-origin: top left;
}

.prso-mini-cart--panel-right .prso-mini-cart__panel {
  left: auto;
  right: 0;
  transform-origin: top right;
}

.prso-mini-cart--open .prso-mini-cart__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(0);
  transition:
    opacity var(--prso-cart-speed) var(--prso-cart-ease),
    transform var(--prso-cart-speed) var(--prso-cart-ease),
    visibility 0s linear 0s;
}

/* -------------------------------------------------------------------------
 * LISTA
 * ------------------------------------------------------------------------- */

.prso-mini-cart__items {
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.prso-mini-cart__items::-webkit-scrollbar {
  width: 6px;
}

.prso-mini-cart__items::-webkit-scrollbar-thumb {
  background-color: var(--prso-cart-hairline);
  border-radius: 999px;
}

/* Dos columnas, no tres. El botón de eliminar es position:absolute, así que
   no ocupa columna; y el precio de línea NO es hijo directo del item, vive
   dentro de __item-body (ver Mini_Cart.php::render_items). Darle
   grid-column:3 aquí lo colocaba en la tercera columna del BODY, que es
   otro grid, y aplastaba el nombre del producto a "A…". */
.prso-mini-cart__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--prso-cart-image-size) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  background-color: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
  border-radius: var(--prso-cart-radius-item);
  transition: background-color 200ms ease;
}

/* Escalonado de entrada. 40ms entre productos: suficiente para que se lea
   como cascada, poco para que nadie espere. Por encima de 80ms empieza a
   sentirse lento. */
.prso-mini-cart--open .prso-mini-cart__item {
  animation: prso-cart-item-in 320ms var(--prso-cart-ease) both;
}

.prso-mini-cart--open .prso-mini-cart__item:nth-child(2) { animation-delay: 40ms; }
.prso-mini-cart--open .prso-mini-cart__item:nth-child(3) { animation-delay: 80ms; }
.prso-mini-cart--open .prso-mini-cart__item:nth-child(4) { animation-delay: 120ms; }
.prso-mini-cart--open .prso-mini-cart__item:nth-child(n + 5) { animation-delay: 160ms; }

@keyframes prso-cart-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* El hover va detrás de esta consulta porque en pantallas táctiles el toque
   dispara :hover y el estado se queda pegado después de levantar el dedo. */
@media (hover: hover) and (pointer: fine) {
  .prso-mini-cart .prso-mini-cart__item:hover {
    background-color: var(--prso-bg-hover, var(--prso-cart-tint));
  }
}

.prso-mini-cart__item-image {
  display: block;
  width: var(--prso-cart-image-size);
  height: var(--prso-cart-image-size);
  overflow: hidden;
  background-color: var(--prso-soft, var(--prso-cart-tint));
  border-radius: var(--prso-cart-radius-media);
  text-decoration: none;
}

.prso-mini-cart__item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--prso-cart-ease);
}

@media (hover: hover) and (pointer: fine) {
  .prso-mini-cart__item:hover .prso-mini-cart__item-image img {
    transform: scale(1.06);
  }
}

/* Nombre y meta a la izquierda, precio de línea a la derecha ocupando las
   dos filas. min-width:0 en las celdas de texto es lo que permite que el
   text-overflow:ellipsis del nombre funcione dentro de un grid. */
.prso-mini-cart__item-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name line"
    "meta line";
  gap: 4px 12px;
  align-items: center;
  min-width: 0;
}

.prso-mini-cart__item-name {
  grid-area: name;
  min-width: 0;
  color: var(--prso-text, var(--prso-cart-ink));
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .prso-mini-cart__item-name:hover {
    color: var(--prso-cart-brand);
  }
}

.prso-mini-cart__item-meta {
  grid-area: meta;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--prso-muted, var(--prso-cart-muted));
}

/* La cantidad pasa de "2x" suelto a píldora. Un número sin contenedor al
   lado de un precio se lee como parte del precio. */
.prso-mini-cart__item-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  background-color: var(--prso-cart-tint);
  color: var(--prso-cart-brand-ink);
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prso-mini-cart__item-price {
  font-variant-numeric: tabular-nums;
}

.prso-mini-cart__item-line {
  grid-area: line;
  align-self: center;
  color: var(--prso-text, var(--prso-cart-ink));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Eliminar: fantasma en escritorio, visible en táctil. En táctil no hay
   hover, así que un botón que solo aparece al pasar el ratón es un botón
   que en móvil no existe. */
.prso-mini-cart__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background-color: var(--prso-bg, transparent);
  color: var(--prso-text, var(--prso-cart-muted));
  border: 0;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, background-color 160ms ease, transform 160ms var(--prso-cart-ease);
}

.prso-mini-cart__remove:active {
  transform: scale(0.9);
}

@media (hover: hover) and (pointer: fine) {
  .prso-mini-cart__item:hover .prso-mini-cart__remove,
  .prso-mini-cart__remove:focus-visible {
    opacity: 1;
  }

  .prso-mini-cart .prso-mini-cart__remove:hover,
  .prso-mini-cart .prso-mini-cart__remove:focus-visible {
    background-color: var(--prso-bg-hover, var(--prso-cart-tint));
    color: var(--prso-text-hover, var(--prso-cart-brand));
    outline: 0;
  }
}

@media (hover: none) {
  .prso-mini-cart__remove {
    opacity: 0.45;
  }
}

.prso-mini-cart__empty {
  margin: 0;
  padding: 44px 20px;
  color: var(--prso-muted, var(--prso-cart-muted));
  text-align: center;
}

/* -------------------------------------------------------------------------
 * BARRA DE ENVÍO GRATIS
 * ------------------------------------------------------------------------- */

.prso-mini-cart__shipping {
  padding: 14px 20px;
  background-color: var(--prso-cart-tint);
  border-top: 1px solid var(--prso-cart-hairline);
  font-size: 0.9em;
  line-height: 1.4;
}

.prso-mini-cart__shipping[hidden] {
  display: none;
}

.prso-mini-cart__shipping-text {
  margin: 0;
  color: var(--prso-text, var(--prso-cart-ink));
}

.prso-mini-cart__shipping-text .woocommerce-Price-amount {
  font-weight: 700;
  color: var(--prso-cart-brand-ink);
}

.prso-mini-cart__shipping-track {
  display: block;
  height: 5px;
  margin-top: 9px;
  background: rgba(228, 12, 92, 0.14);
  border-radius: 999px;
  overflow: hidden;
}

.prso-mini-cart__shipping-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #f6c1d1, var(--prso-cart-brand));
  border-radius: 999px;
  transition: width 520ms var(--prso-cart-ease);
}

.prso-mini-cart__shipping--done {
  background-color: #edf9f3;
}

.prso-mini-cart__shipping--done .prso-mini-cart__shipping-text,
.prso-mini-cart__shipping--done .prso-mini-cart__shipping-text .woocommerce-Price-amount {
  color: #0b7c56;
  font-weight: 700;
}

.prso-mini-cart__shipping--done .prso-mini-cart__shipping-fill {
  background: #12a06b;
}

/* -------------------------------------------------------------------------
 * PIE
 * ------------------------------------------------------------------------- */

.prso-mini-cart__footer {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 18px;
  background-color: var(--prso-bg, #fff);
  border-top: 1px solid var(--prso-cart-hairline);
}

.prso-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--prso-muted, var(--prso-cart-muted));
}

.prso-mini-cart__total-value {
  color: var(--prso-text, var(--prso-cart-ink));
  font-size: 1.35em;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Una columna, no dos. Con "Ver carrito" y "Finalizar compra" al mismo peso
   y al mismo ancho, no hay acción principal: el cliente elige al azar y la
   mitad se va a una página intermedia que no necesitaba. */
.prso-mini-cart__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.prso-mini-cart__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  background-color: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--prso-cart-ease), background-color 200ms ease,
    color 200ms ease, box-shadow 200ms ease;
}

.prso-mini-cart__button:active {
  transform: scale(0.97);
}

.prso-mini-cart__button--checkout {
  order: -1;
  background-color: var(--prso-bg, var(--prso-cart-brand));
  color: var(--prso-text, #fff);
  box-shadow: 0 6px 18px -6px rgba(228, 12, 92, 0.55);
}

.prso-mini-cart__button--cart {
  min-height: 40px;
  background-color: var(--prso-bg, transparent);
  color: var(--prso-text, var(--prso-cart-muted));
  font-size: 0.93em;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  /* El boton generico ya NO toca el fondo: solo color y outline. Antes ponia
     `background-color: var(--prso-bg-hover, ...)` y competia con la regla de la
     variante, dejando el boton principal transparente (texto blanco sobre
     panel blanco = boton invisible). */
  .prso-mini-cart .prso-mini-cart__button:hover,
  .prso-mini-cart .prso-mini-cart__button:focus-visible {
    color: var(--prso-text-hover, var(--prso-text, currentColor));
    outline: 0;
  }

  .prso-mini-cart .prso-mini-cart__button--checkout:hover,
  .prso-mini-cart .prso-mini-cart__button--checkout:focus-visible {
    background-color: var(--prso-bg-hover, var(--prso-cart-brand-ink));
    color: var(--prso-text-hover, #fff);
    box-shadow: 0 10px 26px -8px rgba(228, 12, 92, 0.6);
  }

  .prso-mini-cart .prso-mini-cart__button--cart:hover,
  .prso-mini-cart .prso-mini-cart__button--cart:focus-visible {
    background-color: var(--prso-bg-hover, var(--prso-cart-tint));
    color: var(--prso-text-hover, var(--prso-cart-ink));
  }
}

/* -------------------------------------------------------------------------
 * BADGE DE FINANCIACIÓN
 * ------------------------------------------------------------------------- */

.prso-mini-cart__installment {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  background-color: #fdeef3;
  border-radius: 13px;
  font-size: 0.88em;
  line-height: 1.35;
  color: #5a5566;
}

.prso-mini-cart__installment[hidden] {
  display: none;
}

/* Reafirmacion defensiva: en la web en vivo el badge perdia el fondo al
   pasar el raton por encima. No se localizo la regla responsable pese a
   recorrer las 55 hojas de estilo de la pagina, asi que se vuelve a
   declarar explicitamente en los estados interactivos. */
.prso-mini-cart .prso-mini-cart__installment,
.prso-mini-cart .prso-mini-cart__installment:hover,
.prso-mini-cart .prso-mini-cart__installment:focus-within,
.prso-mini-cart__panel:hover .prso-mini-cart__installment {
  background-color: #fdeef3;
}

.prso-mini-cart .prso-mini-cart__shipping,
.prso-mini-cart__panel:hover .prso-mini-cart__shipping {
  background-color: var(--prso-cart-tint);
}

.prso-mini-cart .prso-mini-cart__shipping--done,
.prso-mini-cart__panel:hover .prso-mini-cart__shipping--done {
  background-color: #edf9f3;
}

/* El logo salia a 24x24 en la web en vivo. Culpable: una regla del CSS
   personalizado del sitio, `.elementor-element-6f7a72fe svg { width:24px
   !important; height:24px !important }`, pensada para los iconos de la
   cabecera; el mini-carrito vive dentro de ese contenedor, asi que se la
   comia tambien el logo de Klarna. Se contrarresta con mas especificidad
   (0,2,0 frente a 0,1,1) y el mismo !important. */
.prso-mini-cart .prso-mini-cart__installment-logo,
.prso-mini-cart svg.prso-mini-cart__installment-logo {
  flex: 0 0 auto;
  display: block;
  width: 62px !important;
  height: 28px !important;
  min-width: 62px;
}

.prso-mini-cart__installment-text .woocommerce-Price-amount {
  color: var(--prso-cart-ink);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
 * ESTADOS Y ACCESIBILIDAD
 * ------------------------------------------------------------------------- */

.prso-mini-cart--busy {
  opacity: 0.72;
  pointer-events: none;
}

.prso-mini-cart a:focus-visible,
.prso-mini-cart button:focus-visible {
  outline: 2px solid var(--prso-cart-brand);
  outline-offset: 2px;
}

/* Movimiento reducido no es "cero animación": es conservar lo que ayuda a
   entender (opacidad, color) y quitar lo que desplaza. */
@media (prefers-reduced-motion: reduce) {
  .prso-mini-cart__panel,
  .prso-mini-cart__item,
  .prso-mini-cart__item-image img,
  .prso-mini-cart__shipping-fill,
  .prso-mini-cart__button,
  .prso-mini-cart__trigger {
    animation: none !important;
    transform: none !important;
    transition-duration: 150ms !important;
    transition-property: opacity, background-color, color, visibility !important;
  }
}

@media (max-width: 720px) {
  body.prso-mega-is-open {
    overflow: hidden;
  }

  .prso-header-categories__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .prso-header-categories__panel {
    right: auto;
    left: 0;
    width: min(var(--prso-panel-width), calc(100vw - 24px));
  }

  .prso-mega {
    top: 0;
    bottom: 0;
    max-height: none;
  }

  .prso-mega-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "filters"
      "results";
    width: min(100% - 24px, 560px);
    min-height: 100%;
    padding: 18px 0 28px;
  }

  .prso-mega__results-head {
    flex-direction: column;
  }

  .prso-mini-cart__panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    max-height: min(620px, calc(100vh - 24px));
  }

  .prso-mini-cart__actions {
    grid-template-columns: 1fr;
  }
}


/* PRSO Header Categorias - Mega menu configurable */
.prso-header-categories {
  --prso-menu-columns: 3;
  --prso-menu-columns-active: var(--prso-menu-columns);
  --prso-menu-panel-gap: 16px;
  --prso-menu-featured-image-height: 118px;
  --prso-menu-card-radius: 8px;
  --prso-menu-accent: #e40c5c;
  --prso-menu-muted: #7b6d75;
  --prso-menu-border: rgba(228, 12, 92, 0.16);
  --prso-menu-panel-bg: var(--prso-bg, #fff);
}

.prso-header-categories--mode-mega .prso-header-categories__more {
  position: relative;
}

.prso-header-categories__mega-panel {
  position: absolute;
  top: 100%;
  z-index: 10025;
  display: none;
  width: var(--prso-panel-width);
  max-width: calc(100vw - 24px);
  max-height: min(620px, 76vh);
  overflow: auto;
  padding: 16px;
  background: var(--prso-menu-panel-bg);
  color: var(--prso-text, currentColor);
  border: 1px solid var(--prso-menu-border);
  border-radius: var(--prso-menu-card-radius);
  box-shadow: 0 22px 60px rgba(24, 20, 25, 0.14);
}

.prso-header-categories--panel-left .prso-header-categories__mega-panel {
  left: 0;
  right: auto;
}

.prso-header-categories--panel-right .prso-header-categories__mega-panel {
  left: auto;
  right: 0;
}

.prso-header-categories--panel-center .prso-header-categories__mega-panel {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.prso-header-categories--panel-full .prso-header-categories__mega-panel {
  position: fixed;
  left: 16px;
  right: 16px;
  width: auto;
  max-width: none;
  transform: none;
}

.prso-header-categories--mode-mega .prso-header-categories__item:hover > .prso-header-categories__mega-panel,
.prso-header-categories--mode-mega .prso-header-categories__item:focus-within > .prso-header-categories__mega-panel,
.prso-header-categories--open .prso-header-categories__more > .prso-header-categories__mega-panel {
  display: block;
}

.prso-header-categories__mega-grid {
  display: grid;
  grid-template-columns: repeat(var(--prso-menu-columns-active, 3), minmax(0, 1fr));
  gap: var(--prso-menu-panel-gap);
  align-items: start;
}

.prso-header-categories__mega-group,
.prso-header-categories__mega-children {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.prso-header-categories__mega-children {
  padding-left: var(--prso-category-depth-indent);
}

.prso-header-categories__mega-link,
.prso-header-categories__mega-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: var(--prso-item-height);
  padding: 9px 10px;
  background: var(--prso-bg, transparent);
  color: var(--prso-text, currentColor);
  border-radius: var(--prso-menu-card-radius);
  text-decoration: none;
  line-height: 1.2;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.prso-header-categories__mega-link:hover,
.prso-header-categories__mega-link:focus-visible,
.prso-header-categories__mega-card:hover,
.prso-header-categories__mega-card:focus-visible {
  background: var(--prso-bg-hover, rgba(228, 12, 92, 0.07));
  color: var(--prso-text-hover, var(--prso-menu-accent));
  outline: 0;
}

.prso-header-categories__mega-card--plain {
  justify-content: flex-start;
}

.prso-header-categories__mega-card--icon {
  justify-content: flex-start;
}

.prso-header-categories__mega-card--featured {
  display: grid;
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--prso-menu-border);
  background: var(--prso-bg, #fff);
}

.prso-header-categories__mega-card--featured:hover,
.prso-header-categories__mega-card--featured:focus-visible {
  border-color: rgba(228, 12, 92, 0.32);
  transform: translateY(-1px);
}

.prso-header-categories__mega-media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--prso-menu-accent);
  overflow: hidden;
}

.prso-header-categories__mega-media svg,
.prso-header-categories__mega-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prso-header-categories__mega-card--featured .prso-header-categories__mega-media {
  width: 100%;
  height: var(--prso-menu-featured-image-height);
  border-radius: var(--prso-menu-card-radius);
  background: rgba(228, 12, 92, 0.045);
}

.prso-header-categories__mega-card--featured .prso-header-categories__mega-media img {
  object-fit: cover;
}

.prso-header-categories__mega-title {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.prso-header-categories__link--icon,
.prso-header-categories__link--featured {
  gap: 8px;
}

.prso-header-categories__link--icon .prso-header-categories__mega-media,
.prso-header-categories__link--featured .prso-header-categories__mega-media {
  width: 24px;
  height: 24px;
}

.prso-header-categories__link--category .prso-header-categories__mega-media {
  display: none;
}

@media (max-width: 1099px) {
  .prso-header-categories__mega-panel {
    width: min(var(--prso-panel-width), calc(100vw - 24px));
  }
}

@media (max-width: 719px) {
  .prso-header-categories__list {
    justify-content: var(--prso-align);
  }

  .prso-header-categories__mega-panel,
  .prso-header-categories--panel-left .prso-header-categories__mega-panel,
  .prso-header-categories--panel-right .prso-header-categories__mega-panel,
  .prso-header-categories--panel-center .prso-header-categories__mega-panel,
  .prso-header-categories--panel-full .prso-header-categories__mega-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    width: auto;
    max-width: none;
    transform: none;
  }

  .prso-header-categories__mega-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .prso-header-categories__mega-children {
    padding-left: 10px;
  }
}


/* PRSO Header Mega Categorias estatico-dinamico */
.prso-mega-static-nav,
.prso-mega-static-nav * {
  box-sizing: border-box;
}

.prso-mega-static-nav {
  --prso-static-pink: #E40C5C;
  --prso-static-pink-dark: #BA0B4B;
  --prso-static-pink-soft: #FDF4F7;
  --prso-static-pink-border: #F1D8E2;
  --prso-static-ink: #242124;
  --prso-static-ink-soft: #5F5A60;
  --prso-static-ink-mute: #969096;
  --prso-static-line: #E8E4E6;
  --prso-static-hair: #F1EEF0;
  --prso-static-surface: #FBFAFA;
  --prso-static-surface-soft: #F7F5F6;
  --prso-static-white: #fff;
  --prso-static-radius: 8px;
  --prso-static-shadow-panel: 0 20px 44px -30px rgba(36, 33, 36, 0.36), 0 8px 20px -18px rgba(36, 33, 36, 0.18);
  --prso-static-shadow-card: 0 14px 32px -24px rgba(36, 33, 36, 0.28);
  --prso-static-nav-gap: 2px;
  --prso-static-max-width: 1160px;
  --prso-static-panel-gap: 0px;
  position: relative;
  width: 100%;
  max-width: var(--prso-static-max-width);
  margin-inline: auto;
  color: var(--prso-static-ink);
  font-family: inherit;
}

.prso-mega-static-list {
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: var(--prso-align, center);
  gap: var(--prso-static-nav-gap);
  margin: 0;
  padding: 0;
}

.prso-mega-static-item {
  position: relative;
  margin: 0;
  padding: 0;
}

.prso-mega-static-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 18px 17px;
  color: var(--prso-static-ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1.2;
  white-space: nowrap;
  position: relative;
  transition: color 0.2s ease;
}

.prso-mega-static-link::after {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 12px;
  height: 2px;
  background: var(--prso-static-pink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.prso-mega-static-item:hover .prso-mega-static-link::after,
.prso-mega-static-item:focus-within .prso-mega-static-link::after,
.prso-mega-static-item.is-open .prso-mega-static-link::after {
  transform: scaleX(1);
}

.prso-mega-static-caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.45;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.prso-mega-static-item:hover .prso-mega-static-caret,
.prso-mega-static-item:focus-within .prso-mega-static-caret,
.prso-mega-static-item.is-open .prso-mega-static-caret {
  transform: rotate(-135deg) translateY(0);
  opacity: 1;
}

.prso-mega-static-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(940px, calc(100vw - 48px));
  background: var(--prso-static-white);
  color: var(--prso-static-ink);
  border: 1px solid var(--prso-static-line);
  border-top-color: var(--prso-static-hair);
  border-radius: 0 0 var(--prso-static-radius) var(--prso-static-radius);
  box-shadow: var(--prso-static-shadow-panel);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
  z-index: 10030;
}

.prso-mega-static-panel--feature { width: min(900px, calc(100vw - 48px)); }
.prso-mega-static-panel--wide { width: min(780px, calc(100vw - 48px)); }
.prso-mega-static-panel--medium { width: min(760px, calc(100vw - 48px)); }
.prso-mega-static-panel--compact { width: min(420px, calc(100vw - 48px)); }

.prso-mega-static-item:hover > .prso-mega-static-panel,
.prso-mega-static-item:focus-within > .prso-mega-static-panel,
.prso-mega-static-item.is-open > .prso-mega-static-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.prso-mega-static-item:first-child > .prso-mega-static-panel {
  left: 0;
  transform: translateY(-6px);
}

.prso-mega-static-item:first-child:hover > .prso-mega-static-panel,
.prso-mega-static-item:first-child:focus-within > .prso-mega-static-panel,
.prso-mega-static-item:first-child.is-open > .prso-mega-static-panel {
  transform: translateY(0);
}

.prso-mega-static-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 28px 30px;
}

.prso-mega-static-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--prso-static-panel-gap);
}

.prso-mega-static-grid--1 { grid-template-columns: 1fr; }
.prso-mega-static-grid--2 { grid-template-columns: 1.15fr 0.95fr; }
.prso-mega-static-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prso-mega-static-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.prso-mega-static-col {
  min-width: 0;
  padding: 0 24px;
}

.prso-mega-static-col:first-child {
  padding-left: 0;
}

.prso-mega-static-col + .prso-mega-static-col {
  border-left: 1px solid var(--prso-static-hair);
}

.prso-mega-static-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: var(--prso-static-ink-soft);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--prso-static-hair);
}

.prso-mega-static-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.prso-mega-static-link-list li {
  margin: 0;
  padding: 0;
}

.prso-mega-static-link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  color: var(--prso-static-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--prso-static-hair);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: color 0.2s ease, padding 0.2s ease, border-color 0.2s ease;
}

.prso-mega-static-link-list li:last-child a {
  border-bottom: 0;
}

.prso-mega-static-link-list a:hover,
.prso-mega-static-link-list a:focus-visible {
  color: var(--prso-static-pink);
  padding-left: 6px;
  border-color: var(--prso-static-line);
  outline: 0;
}

.prso-mega-static-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--prso-static-pink);
}

.prso-mega-static-icon svg,
.prso-mega-static-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.prso-mega-static-item-label {
  flex: 1 1 auto;
  min-width: 0;
}

.prso-mega-static-arr {
  opacity: 0;
  transform: translateX(-8px);
  color: var(--prso-static-pink);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.prso-mega-static-link-list a:hover .prso-mega-static-arr,
.prso-mega-static-link-list a:focus-visible .prso-mega-static-arr {
  opacity: 1;
  transform: translateX(0);
}

.prso-mega-static-see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--prso-static-pink);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: gap 0.2s ease;
}

.prso-mega-static-see-all:hover,
.prso-mega-static-see-all:focus-visible {
  gap: 10px;
  outline: 0;
}

.prso-mega-static-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px;
}

.prso-mega-static-img-card {
  display: block;
  overflow: hidden;
  color: var(--prso-static-ink);
  text-decoration: none;
  background: var(--prso-static-white);
  border: 1px solid var(--prso-static-line);
  border-radius: var(--prso-static-radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.prso-mega-static-img-card:hover,
.prso-mega-static-img-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--prso-static-shadow-card);
  border-color: #DCD7DA;
  outline: 0;
}

.prso-mega-static-img-ph {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--prso-static-surface-soft);
}

.prso-mega-static-img-ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.prso-mega-static-img-card:hover .prso-mega-static-img-ph img,
.prso-mega-static-img-card:focus-visible .prso-mega-static-img-ph img {
  transform: scale(1.05);
}

.prso-mega-static-img-label {
  display: block;
  padding: 12px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.prso-mega-static-promo-col {
  display: flex;
  align-items: stretch;
}

.prso-mega-static-promo-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: 190px;
  padding: 24px 22px;
  color: var(--prso-static-ink);
  text-decoration: none;
  background: linear-gradient(135deg, var(--prso-static-white) 0%, var(--prso-static-surface) 70%, var(--prso-static-pink-soft) 100%);
  border: 1px solid var(--prso-static-line);
  border-radius: var(--prso-static-radius);
  box-shadow: var(--prso-static-shadow-card);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.prso-mega-static-promo-card:hover,
.prso-mega-static-promo-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--prso-static-pink-border);
  outline: 0;
}

.prso-mega-static-promo-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--prso-static-pink), var(--prso-static-pink-dark));
  z-index: -1;
}

.prso-mega-static-promo-bg {
  position: absolute;
  inset: 0;
  opacity: 1;
  z-index: -2;
}

.prso-mega-static-promo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cuando la promo lleva imagen de fondo, se muestra a foto completa con un
   velo rosa degradado y texto blanco (mismo tratamiento visual que la
   tarjeta "Empieza con calma" ya publicada en Por experiencia). Sin imagen,
   la tarjeta conserva el fondo claro/degradado de arriba. */
.prso-mega-static-promo-card:has(.prso-mega-static-promo-bg) {
  min-height: 220px;
  padding: 28px 26px;
  color: var(--prso-static-white);
  border-color: transparent;
}
.prso-mega-static-promo-card:has(.prso-mega-static-promo-bg)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(184, 0, 74, 0.82) 0%, rgba(228, 12, 92, 0.7) 55%, rgba(255, 107, 157, 0.55) 100%);
  z-index: -1;
}
.prso-mega-static-promo-card:has(.prso-mega-static-promo-bg) .prso-mega-static-promo-title,
.prso-mega-static-promo-card:has(.prso-mega-static-promo-bg) .prso-mega-static-promo-sub {
  color: var(--prso-static-white);
}
.prso-mega-static-promo-card:has(.prso-mega-static-promo-bg) .prso-mega-static-promo-cta {
  color: var(--prso-static-pink-dark);
  background: var(--prso-static-white);
}

.prso-mega-static-promo-tag {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 10px;
  color: var(--prso-static-pink);
  background: var(--prso-static-white);
  border: 1px solid var(--prso-static-pink-border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.prso-mega-static-promo-title {
  margin-bottom: 8px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.prso-mega-static-promo-sub {
  max-width: 90%;
  margin-bottom: 16px;
  color: var(--prso-static-ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.prso-mega-static-promo-cta {
  align-self: flex-start;
  padding: 9px 18px;
  color: var(--prso-static-white);
  background: var(--prso-static-ink);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.prso-mega-static-empty {
  margin: 0;
  color: var(--prso-static-ink-soft);
}

@media (max-width: 1024px) {
  .prso-mega-static-grid--3,
  .prso-mega-static-grid--4 {
    grid-template-columns: 1fr 1fr;
  }

  .prso-mega-static-promo-col {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}

@media (max-width: 768px) {
  .prso-mega-static-item {
    position: static;
  }

  .prso-mega-static-list {
    justify-content: flex-start;
    overflow-x: auto;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .prso-mega-static-list::-webkit-scrollbar {
    display: none;
  }

  .prso-mega-static-link {
    padding: 16px 14px;
    font-size: 14px;
  }

  .prso-mega-static-link::after {
    display: none;
  }

  .prso-mega-static-panel,
  .prso-mega-static-panel--feature,
  .prso-mega-static-panel--wide,
  .prso-mega-static-panel--medium,
  .prso-mega-static-panel--compact {
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    transform: translateY(-6px);
  }

  .prso-mega-static-item:hover > .prso-mega-static-panel,
  .prso-mega-static-item:focus-within > .prso-mega-static-panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .prso-mega-static-item.is-open > .prso-mega-static-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .prso-mega-static-grid,
  .prso-mega-static-grid--1,
  .prso-mega-static-grid--2,
  .prso-mega-static-grid--3,
  .prso-mega-static-grid--4 {
    grid-template-columns: 1fr;
  }

  .prso-mega-static-col {
    padding: 20px 0;
  }

  .prso-mega-static-col + .prso-mega-static-col {
    border-left: 0;
    border-top: 1px solid var(--prso-static-hair);
  }

  .prso-mega-static-inner {
    padding: 24px 16px 28px;
  }
}


/* =========================================================================
   PIMIENTA ROSA · ajustes del buscador
   A. Colores de marca disponibles en todo el mega
   B. Arbol de filtros plegable (escritorio)
   C. Movil: solo buscador y rango de precio
   ========================================================================= */


/* -------------------------------------------------------------------------
   A. COLORES DE MARCA
   Se declaran en el contenedor del mega para que los hereden todos los
   widgets, no solo el filtro de precio.
   ---------------------------------------------------------------------- */

[data-prso-mega],
.prso-filter-tree,
.prso-price-filter {
  --prso-marca: var(--e-global-color-primary, #E40C5C);
  --prso-marca-suave: var(--e-global-color-accent, #F6818B);
  --prso-marca-palida: #F6C1D1;
  --prso-marca-fondo: #FDF1F6;
}


/* -------------------------------------------------------------------------
   B. ARBOL DE FILTROS PLEGABLE

   Con 34 categorias el arbol desplegado supera los 1400px de alto. Los
   grupos nacen plegados y se abre solo el que interese. La flecha es un
   objetivo tactil de 34px, por encima del minimo de 24px de Google para
   controles secundarios.
   ---------------------------------------------------------------------- */

.prso-filter-tree__group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.prso-filter-tree__group-header > .prso-filter-tree__category {
  flex: 1 1 auto;
  min-width: 0;
}

.prso-filter-tree__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  background-image: none !important;
  border: 0;
  border-radius: 50%;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: var(--prso-marca);
}

/* La punta de flecha se dibuja con dos bordes girados 45 grados: sin
   iconos externos, sin fuentes de iconos y escala con el color. */
.prso-filter-tree__toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.18s ease;
}

.prso-filter-tree__toggle:hover {
  background: var(--prso-marca-fondo);
}

.prso-filter-tree__toggle:focus-visible {
  outline: 2px solid var(--prso-marca);
  outline-offset: 2px;
}

.prso-filter-tree__group--open > .prso-filter-tree__group-header > .prso-filter-tree__toggle::before {
  transform: rotate(225deg) translate(-1px, -1px);
}

/* Plegado por defecto: solo se ven los hijos del grupo abierto. */
.prso-filter-tree__group--collapsible > .prso-filter-tree__children {
  display: none;
}

.prso-filter-tree__group--open > .prso-filter-tree__children {
  display: grid;
}


/* -------------------------------------------------------------------------
   C. MOVIL · SOLO BUSCADOR Y RANGO DE PRECIO

   En una pantalla de 390px, un arbol de 34 categorias es una pared. El
   cliente que abre la lupa en el movil viene a escribir, no a navegar: se
   deja el campo de texto, el rango de precio y los resultados.

   Se oculta con display:none en el envoltorio del widget de Elementor, que
   es estable aunque se reordene el contenido de la plantilla.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   B bis. CHIPS DE SUGERENCIAS · OCULTOS EN TODAS LAS PANTALLAS

   Los chips que salian bajo la caja de busqueda repetian, palabra por
   palabra, el menu superior de la cabecera y el arbol de la izquierda. Tres
   veces la misma navegacion en la misma pantalla.

   PARA RECUPERARLOS: borra este bloque entero. La forma limpia de quitarlos
   del todo es eliminar el widget "PRSO Header Sugerencias" en el editor de
   Elementor de la cabecera; esto es solo el equivalente en CSS.
   ---------------------------------------------------------------------- */

[data-prso-mega] .elementor-widget-prso-hsw-mega-suggestions,
[data-prso-mega] [data-prso-suggestions] {
  display: none !important;
}


@media (max-width: 767px) {

  /* Fuera el arbol de categorias. */
  [data-prso-mega] .elementor-widget-prso-hsw-search-filters,
  [data-prso-mega] [data-prso-search-filters],
  [data-prso-mega] .prso-filter-tree {
    display: none !important;
  }

  /* El precio, arriba del todo y a lo ancho. */
  [data-prso-mega] .elementor-widget-prso-hsw-price-filter {
    order: -1;
    width: 100%;
  }

  [data-prso-mega] .prso-price-filter {
    max-width: 100%;
    margin-bottom: 4px;
  }

  /* Los dos controles, minimo y maximo, en una sola fila. */
  [data-prso-mega] .prso-price-filter__controls {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  [data-prso-mega] .prso-price-filter__number-wrap {
    width: 100%;
  }

  [data-prso-mega] .prso-price-filter__number {
    width: 100%;
    /* 16px o mas: por debajo, iOS hace zoom al enfocar el campo. */
    font-size: 16px;
  }

  /* Tirador mas grande: en tactil no hay puntero fino. */
  [data-prso-mega] .prso-price-filter {
    --prso-price-thumb-size: 26px;
    --prso-price-track-height: 6px;
  }
}


/* =========================================================================
   D. ACABADO VISUAL DEL BUSCADOR

   El CSS base del plugin deja casi todo transparente y con esquinas rectas
   para que se pinte desde los controles de Elementor. El resultado es una
   ventana plana, muy blanca y con el borde gris que el tema pone por
   defecto en cada input. Esta capa le da el lenguaje visual del resto de
   la tienda: pildoras, rosa de marca y aire.

   Se usa !important solo donde el CSS que genera Elementor o el tema tiene
   mas especificidad y no hay forma de ganarle con selectores.
   ========================================================================= */

[data-prso-mega] {
  --prso-radio: 18px;
  --prso-sombra: 0 10px 34px rgba(23, 23, 23, 0.10);
  --prso-hairline: rgba(23, 23, 23, 0.08);
}


/* --- D1. La ventana -------------------------------------------------- */

.prso-mega {
  background: #fff;
  border-top: 1px solid var(--prso-hairline);
  box-shadow: var(--prso-sombra);
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.prso-mega-grid {
  padding: 26px 0 34px;
  gap: 30px;
}

/* Separador entre la columna de filtros y la de resultados. */
.prso-mega__filters {
  padding-right: 26px;
  border-right: 1px solid var(--prso-hairline);
}


/* --- D2. La caja de busqueda, en forma de pildora --------------------- */

.prso-mega__search {
  position: relative;
}

.prso-mega__input,
input.prso-mega__input {
  min-height: 54px;
  padding: 0 22px 0 52px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23E40C5C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 20px center;
  border: 1.5px solid var(--prso-marca-palida, #F6C1D1) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.prso-mega__input::placeholder {
  color: #9a9098;
}

.prso-mega__input:hover {
  border-color: var(--prso-marca-suave, #F6818B) !important;
}

.prso-mega__input:focus,
.prso-mega__input:focus-visible {
  border-color: var(--prso-marca, #E40C5C) !important;
  box-shadow: 0 0 0 3px rgba(228, 12, 92, 0.14) !important;
  outline: 0 !important;
  outline-offset: 0;
}


/* --- D3. Titulos y enlace de "ver todo" ------------------------------- */

.prso-filter-tree__title,
.prso-price-filter__title,
.prso-mega__products-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.prso-mega__results-head {
  align-items: center;
  margin-bottom: 18px;
}

.prso-mega__view-all {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  color: var(--prso-marca, #E40C5C);
  background: var(--prso-marca-fondo, #FDF1F6);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.prso-mega__view-all:hover {
  background: var(--prso-marca-palida, #F6C1D1);
}


/* --- D4. Tarjetas de producto ---------------------------------------- */

.prso-products {
  gap: 18px;
}

.prso-product-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--prso-hairline);
  border-radius: var(--prso-radio);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.prso-product-card:hover {
  transform: translateY(-3px);
  border-color: var(--prso-marca-palida, #F6C1D1);
  box-shadow: 0 12px 26px rgba(228, 12, 92, 0.12);
}

.prso-product-card__media {
  background: #FAF7F8;
}

.prso-product-card__media img {
  transition: transform 0.35s ease;
}

.prso-product-card:hover .prso-product-card__media img {
  transform: scale(1.04);
}

.prso-product-card__body {
  gap: 8px;
  padding: 14px 15px 16px;
}

.prso-product-card__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.prso-product-card__current-price {
  font-size: 17px;
  font-weight: 700;
}

.prso-product-card__old-price {
  font-size: 13px;
  order: -1;
}

/* Boton en pildora, igual que el de la ficha de producto. */
.prso-product-card__cart,
a.prso-product-card__cart {
  min-height: 42px;
  margin-top: 2px;
  background: var(--prso-marca, #E40C5C) !important;
  color: #fff !important;
  border: 0;
  border-radius: 999px !important;
  font-size: 14px;
  font-weight: 600;
  transition: filter 0.18s ease;
}

.prso-product-card__cart:hover,
a.prso-product-card__cart:hover {
  filter: brightness(0.92);
  color: #fff !important;
}


/* --- D5. Estado vacio ------------------------------------------------- */

.prso-empty {
  padding: 28px 22px;
  background: var(--prso-marca-fondo, #FDF1F6);
  border-radius: var(--prso-radio);
  text-align: center;
  font-size: 14px;
}


/* --- D6. Movil -------------------------------------------------------- */

@media (max-width: 767px) {

  .prso-mega {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .prso-mega-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "filters"
      "results";
    gap: 20px;
    width: calc(100% - 28px);
    padding: 18px 0 26px;
  }

  /* Sin columna izquierda, el separador vertical sobra. */
  .prso-mega__filters {
    padding-right: 0;
    border-right: 0;
  }

  .prso-mega__input,
  input.prso-mega__input {
    min-height: 50px;
    padding: 0 18px 0 48px;
    background-position: 17px center;
  }

  /* Dos columnas: en 390px, tres tarjetas dejan la foto ilegible. */
  .prso-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .prso-product-card__body {
    padding: 11px 11px 13px;
  }

  .prso-product-card__name {
    font-size: 14px;
  }

  .prso-product-card__current-price {
    font-size: 15px;
  }

  .prso-product-card__cart,
  a.prso-product-card__cart {
    min-height: 44px;
    font-size: 13px;
  }
}


/* =========================================================================
   E. DESBORDAMIENTO LATERAL Y RELLENO DE LA VENTANA

   La ventana venia con `width: 1440px` (100%) y a la vez `margin: 10px 144px`.
   Con un ancho fijo, el margen izquierdo la empuja 144px a la derecha y el
   derecho no puede recogerla: el panel se sale de la pantalla por la derecha
   y se comia el enlace de "Ver todo" y parte de la tercera tarjeta.

   La solucion es dejar que sea `left/right` quien calcule el ancho
   (width:auto), anular el margen lateral y meter el aire por dentro con
   padding, que si respeta la caja.
   ========================================================================= */

.prso-mega {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(16px, 2.6vw, 40px);
  padding-right: clamp(16px, 2.6vw, 40px);
  overflow-x: clip;
}

/* Ningun hijo puede empujar mas alla del ancho disponible. */
.prso-mega > *,
.prso-mega .e-con,
.prso-mega .e-con-full {
  max-width: 100%;
  min-width: 0;
}


/* -------------------------------------------------------------------------
   E1. FUERA EL ENLACE "VER TODO"

   Quedaba cortado contra el borde derecho y no aportaba: el cliente ya tiene
   el menu de la cabecera y el arbol de filtros para ver el catalogo entero.

   PARA RECUPERARLO: borra esta regla.
   ---------------------------------------------------------------------- */

.prso-mega__view-all {
  display: none !important;
}


/* -------------------------------------------------------------------------
   E2. FLECHAS NATIVAS DE LOS CAMPOS DE PRECIO

   Chrome y Safari pintan su propio par de flechitas dentro de todo
   input[type=number]. Dentro de una pildora quedan como un parche. Se quitan
   y se deja el ajuste al deslizador, que es mas comodo.
   ---------------------------------------------------------------------- */

.prso-price-filter__number,
input.prso-price-filter__number {
  -moz-appearance: textfield;
  appearance: textfield;
}

.prso-price-filter__number::-webkit-outer-spin-button,
.prso-price-filter__number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}


/* -------------------------------------------------------------------------
   E3. MOVIL · RELLENO MINIMO

   En 390px cada pixel de ancho cuenta: 14px bastan para que el contenido no
   toque el cristal sin robar sitio a las fotos.
   ---------------------------------------------------------------------- */

@media (max-width: 767px) {
  .prso-mega {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* =========================================================================
   BLINDAJE DEL BANNER SUPERIOR FRENTE AL TEMA

   El tema pinta cualquier <button type="button"> al pasar el raton Y AL
   RECIBIR EL FOCO:

     [type="button"]:focus, [type="button"]:hover { background-color:#CC3366 }

   El banner del 10% es un boton, asi que cambiaba de color al pasar por
   encima y, por culpa del :focus, se quedaba asi despues de hacer clic
   aunque el raton ya estuviera lejos.

   Se fijan aqui los colores que vienen de los ajustes de Elementor
   (--prso-bg y --prso-text) en todos los estados. El !important es una
   defensa contra CSS de terceros que no podemos editar.
   ========================================================================= */

button.prso-text-trigger__control,
button.prso-text-trigger__control:hover,
button.prso-text-trigger__control:focus,
button.prso-text-trigger__control:focus-visible,
button.prso-text-trigger__control:active {
	background: var(--prso-bg, transparent) !important;
	background-color: var(--prso-bg, transparent) !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

/* El color de texto de reposo y el de hover siguen respetando lo que se haya
   configurado en el widget. */
button.prso-text-trigger__control {
	color: var(--prso-text, currentColor) !important;
}

button.prso-text-trigger__control:hover,
button.prso-text-trigger__control:focus-visible {
	color: var(--prso-text-hover, var(--prso-text, currentColor)) !important;
}

/* Si se configuro un fondo de hover en el widget, se respeta; si no, el
   banner se queda como esta en reposo. */
button.prso-text-trigger__control:hover {
	background: var(--prso-bg-hover, var(--prso-bg, transparent)) !important;
	background-color: var(--prso-bg-hover, var(--prso-bg, transparent)) !important;
}

/* El foco solo se marca con un contorno accesible, nunca repintando el
   fondo: eso es lo que dejaba el banner cambiado tras el clic. */
button.prso-text-trigger__control:focus,
button.prso-text-trigger__control:focus-visible {
	outline: 2px solid var(--prso-text, currentColor);
	outline-offset: -3px;
}

button.prso-text-trigger__control:focus:not(:focus-visible) {
	outline: 0;
}