/* Yuly Danza 9 — child theme for PrestaShop 9.1
   Sistema de diseño trasladado del tema que construimos en PS1.5:
   paleta rosa/verde exacta + tipografías Poppins/Playfair. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  /* Nuestra paleta exacta */
  --yuly-ink: #2B2B2B;
  --yuly-ink-soft: #6B6B6B;
  --yuly-petal: #E8A0BF;
  --yuly-petal-deep: #D67FA3;
  --yuly-petal-pale: #FBEAF0;
  --yuly-sage: #8BAA63;
  --yuly-sage-deep: #6F8C4C;
  --yuly-sage-pale: #EEF3E6;
  --yuly-paper: #FAFAFA;
  --yuly-white: #FFFFFF;
  --yuly-line: rgba(43, 43, 43, .12);
  --yuly-shadow: 0 18px 36px rgba(43, 43, 43, .10);
  --yuly-radius: 18px;
  /* Nuestras tipografías */
  --yuly-display: 'Playfair Display', Georgia, serif;
  --yuly-body: 'Poppins', system-ui, sans-serif;
  /* Alias en nombres viejos para compatibilidad con el resto de nuestro CSS */
  --pink: #E8A0BF;
  --pink-dark: #D67FA3;
  --pink-light: #FBEAF0;
  --green: #8BAA63;
  --green-dark: #6F8C4C;
  --green-light: #EEF3E6;
  --black: #2B2B2B;
  --gray: #6B6B6B;
  --light-gray: #FAFAFA;
  --white: #FFFFFF;
  --t: 0.3s ease;
  /* Ancho real de la barra de scroll. Lo calcula yuly-danza.js en cada resize.
     Sirve para las secciones full-bleed: 100vw incluye la barra, así que sin
     restarla la página siempre desborda unos px y aparece scroll horizontal. */
  --sbw: 0px;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--yuly-paper);
  color: var(--yuly-ink);
  font-family: var(--yuly-body);
  font-size: 1rem;
  line-height: 1.62;
  letter-spacing: .005em;
}

a {
  color: var(--yuly-sage-deep);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
    box-shadow .2s ease, transform .2s ease;
}

a:hover,
a:focus {
  color: var(--yuly-petal-deep);
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(185, 80, 121, .34);
  outline-offset: 3px;
}

h1,
h2,
h3,
.h1,
.h2,
.h3,
.products-section-title {
  color: var(--yuly-ink);
  font-family: var(--yuly-display);
  font-weight: 500;
  letter-spacing: -.025em;
  text-transform: none;
}

#wrapper {
  background: var(--yuly-paper);
  box-shadow: none;
  padding-top: 2rem;
}

#wrapper .breadcrumb {
  background: transparent;
  color: var(--yuly-ink-soft);
  font-size: .78rem;
  letter-spacing: .06em;
  margin-bottom: 1.75rem;
  text-transform: uppercase;
}

#wrapper .breadcrumb a {
  color: var(--yuly-ink-soft);
}

.container {
  max-width: 1240px;
}

/* Header */
#header {
  background: var(--yuly-white);
  color: var(--yuly-ink);
  box-shadow: 0 1px 0 var(--yuly-line);
}

#header .header-nav {
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--yuly-line);
  color: var(--black);
  margin: 0;
  min-height: 40px;
}

#header .header-nav a,
#header .header-nav .blockcart,
#header .header-nav .blockcart a {
  color: var(--black);
}

#header .header-nav .container {
  min-height: 40px;
}

#header .header-top {
  background: rgba(255, 255, 255, .97);
  padding: 1.15rem 0;
  transition: box-shadow .25s ease, padding .25s ease;
}

.yuly-scrolled #header .header-top {
  box-shadow: 0 14px 34px rgba(32, 36, 33, .08);
}

#header .header-top .container {
  align-items: center;
}

#header .logo {
  max-height: 70px;
  width: auto;
}

#header .header-top a[data-depth="0"] {
  color: var(--yuly-ink);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .055em;
  padding: .8rem .72rem;
  text-transform: uppercase;
}

#header .header-top a[data-depth="0"]:hover {
  color: var(--yuly-petal-deep);
}

.top-menu a[data-depth="1"],
.top-menu a[data-depth="2"] {
  color: var(--yuly-ink);
}

.top-menu .sub-menu {
  border: 1px solid var(--yuly-line);
  border-radius: 0 0 var(--yuly-radius) var(--yuly-radius);
  box-shadow: var(--yuly-shadow);
  overflow: hidden;
}

#search_widget form {
  overflow: visible;
}

#search_widget form input {
  background: #f4f5f3;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--yuly-ink);
  min-height: 44px;
  padding-left: 3.05rem;
  padding-right: 1.1rem;
}

#search_widget form input:focus {
  background: var(--yuly-white);
  border-color: var(--yuly-petal);
  box-shadow: 0 0 0 4px rgba(232, 160, 191, .16);
}

#search_widget form button {
  color: var(--yuly-petal-deep);
  left: .45rem;
  right: auto;
}

/* Lupa centrada dentro del input */
#search_widget form button,
#search_widget form i.material-icons.search {
  top: 50%;
  bottom: auto;
  left: .9rem;
  right: auto;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--yuly-petal-deep);
}

#header .header-nav .cart-preview.active {
  background: var(--yuly-petal-deep);
}

#header .header-nav .user-info .account {
  font-weight: 600;
}

/* Home hero */
.yuly-home {
  overflow: visible;
}

/* Red de seguridad contra el scroll horizontal. El desborde real lo evitan las
   secciones full-bleed usando --sbw (ver .yuly-hero / .yuly-trust); esto solo
   recorta cualquier resto. `clip` no crea contenedor de scroll, así que no
   rompe el position:sticky del header como sí puede hacerlo `hidden`. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

.yuly-hero {
  align-items: center;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, .86) 0 3px, transparent 4px),
    linear-gradient(118deg, var(--yuly-petal-pale) 0%, #f9f5f4 54%, var(--yuly-sage-pale) 100%);
  border: none;
  border-radius: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  margin: .25rem 0 1.5rem;
  min-height: 520px;
  overflow: hidden;
  padding: clamp(2.25rem, 6vw, 5.7rem);
  position: relative;
}

.yuly-hero-copy {
  max-width: 660px;
  position: relative;
  z-index: 3;
}

.yuly-eyebrow {
  color: var(--yuly-sage-deep);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.yuly-hero h1 {
  font-size: clamp(3.15rem, 6.2vw, 6.4rem);
  line-height: .91;
  margin: 0 0 1.5rem;
  max-width: 760px;
}

.yuly-hero-lead {
  color: var(--yuly-ink-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.55;
  margin-bottom: 2rem;
  max-width: 610px;
}

.yuly-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.yuly-btn,
.btn-primary,
.btn-secondary,
.btn-tertiary {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-family: var(--yuly-body);
  font-size: .86rem;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .045em;
  min-height: 48px;
  padding: .8rem 1.65rem;
  text-transform: uppercase;
}

.yuly-btn-primary,
.btn-primary {
  background: var(--yuly-petal-deep);
  border-color: var(--yuly-petal-deep);
  color: var(--yuly-white);
}

.yuly-btn-primary:hover,
.yuly-btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
  background: #9d3e63;
  border-color: #9d3e63;
  color: var(--yuly-white);
  transform: translateY(-2px);
}

.yuly-btn-secondary,
.btn-secondary {
  background: transparent;
  border: 1px solid rgba(32, 36, 33, .34);
  color: var(--yuly-ink);
}

.yuly-btn-secondary:hover,
.yuly-btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--yuly-white);
  border-color: var(--yuly-ink);
  color: var(--yuly-ink);
}

.yuly-stage {
  aspect-ratio: 1 / 1.08;
  justify-self: end;
  max-width: 430px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.yuly-stage::before {
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .22));
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 52% 48% 42% 58% / 62% 42% 58% 38%;
  box-shadow: inset 0 0 70px rgba(255, 255, 255, .6), var(--yuly-shadow);
  content: "";
  inset: 4% 3%;
  position: absolute;
  transform: rotate(-7deg);
}

.yuly-stage-mark {
  align-items: center;
  display: flex;
  flex-direction: column;
  inset: 50% auto auto 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.yuly-stage-letter {
  color: var(--yuly-petal-deep);
  font-family: var(--yuly-display);
  font-size: clamp(7rem, 13vw, 11rem);
  font-style: italic;
  line-height: .72;
  text-shadow: 10px 14px 0 rgba(129, 154, 114, .16);
}

.yuly-stage-caption {
  color: var(--yuly-sage-deep);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .22em;
  margin-top: 1rem;
  text-transform: uppercase;
}

.yuly-stage-orbit {
  border: 1px solid rgba(185, 80, 121, .3);
  border-radius: 50%;
  position: absolute;
}

.yuly-stage-orbit-large {
  inset: 9% 8%;
  transform: rotate(23deg);
}

.yuly-stage-orbit-small {
  border-color: rgba(82, 104, 72, .27);
  inset: 22% 18%;
  transform: rotate(-31deg);
}

.yuly-stage-word {
  color: var(--yuly-ink-soft);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  position: absolute;
  text-transform: uppercase;
  z-index: 3;
}

.yuly-stage-word-one { left: 3%; top: 24%; transform: rotate(-72deg); }
.yuly-stage-word-two { right: 0; top: 35%; transform: rotate(68deg); }
.yuly-stage-word-three { bottom: 7%; left: 38%; }

.yuly-ribbon {
  border: clamp(18px, 3vw, 34px) solid rgba(232, 160, 191, .32);
  border-left-color: transparent;
  border-radius: 50%;
  height: 520px;
  pointer-events: none;
  position: absolute;
  width: 720px;
}

.yuly-ribbon-one {
  right: -390px;
  top: -190px;
  transform: rotate(17deg);
}

.yuly-ribbon-two {
  border-color: rgba(129, 154, 114, .22);
  border-right-color: transparent;
  bottom: -380px;
  left: 26%;
  transform: rotate(-12deg);
}

.yuly-values {
  border-bottom: 1px solid var(--yuly-line);
  border-top: 1px solid var(--yuly-line);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 3.5rem;
  padding: 1.15rem 0;
}

.yuly-value {
  align-items: center;
  display: flex;
  gap: 1rem;
  min-height: 62px;
  padding: .35rem 1.5rem;
}

.yuly-value + .yuly-value {
  border-left: 1px solid var(--yuly-line);
}

.yuly-value-index {
  color: var(--yuly-petal-deep);
  font-family: var(--yuly-display);
  font-size: 1.45rem;
}

.yuly-value strong,
.yuly-value span:last-child {
  display: block;
}

.yuly-value strong {
  font-size: .88rem;
}

.yuly-value span:last-child {
  color: var(--yuly-ink-soft);
  font-size: .78rem;
  line-height: 1.4;
}

/* Home modules and product cards */
.yuly-home-modules > section,
.yuly-home-modules > div {
  margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

.products-section-title,
.featured-products .products-section-title {
  font-size: clamp(2.2rem, 4.2vw, 3.65rem);
  margin-bottom: 2rem;
  text-align: left;
}

.products-section-title::after {
  background: var(--yuly-petal);
  content: "";
  display: block;
  height: 3px;
  margin-top: .65rem;
  width: 54px;
}

.product-miniature .thumbnail-container {
  background: var(--yuly-white);
  border: 1px solid rgba(32, 36, 33, .08);
  border-radius: var(--yuly-radius);
  box-shadow: 0 10px 30px rgba(32, 36, 33, .055);
  height: 100%;
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.product-miniature .thumbnail-container:hover {
  border-color: rgba(185, 80, 121, .24);
  box-shadow: 0 20px 45px rgba(44, 35, 39, .12);
  transform: translateY(-5px);
}

.product-miniature .thumbnail-top {
  background: #f5f4f2;
  overflow: hidden;
}

.product-miniature .product-thumbnail {
  display: block;
  position: relative;
}

.product-miniature .product-thumbnail img {
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

.product-miniature .thumbnail-container:hover .product-thumbnail img {
  transform: scale(1.035);
}

/* Segunda foto de la galeria, superpuesta y visible solo con hover */
.product-miniature .product-thumbnail-hover {
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .35s ease;
}

.product-miniature .product-thumbnail-hover img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-miniature .thumbnail-container:hover .product-thumbnail-hover,
.product-miniature .thumbnail-container:focus-within .product-thumbnail-hover {
  opacity: 1;
}

.product-miniature .product-description {
  background: var(--yuly-white);
  min-height: 124px;
  padding: 1rem 1.05rem 1.2rem;
  position: relative;
}

.product-miniature .product-title {
  font-family: var(--yuly-body);
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.35;
  margin-bottom: .7rem;
  text-align: left;
}

.product-miniature .product-title a {
  color: var(--yuly-ink);
}

.product-miniature .product-price-and-shipping {
  color: var(--yuly-petal-deep);
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
}

.product-miniature .regular-price {
  color: #7a7e7b;
}

.product-miniature .highlighted-informations {
  background: rgba(255, 255, 255, .94);
}

.product-miniature .highlighted-informations .quick-view {
  color: var(--yuly-ink);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.product-flags li.product-flag {
  background: var(--yuly-sage-deep);
  border-radius: 0 999px 999px 0;
  box-shadow: none;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage {
  background: var(--yuly-petal-deep);
}

.all-product-link {
  color: var(--yuly-sage-deep);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Slider and editorial blocks */
#carousel {
  border-radius: var(--yuly-radius);
  box-shadow: none;
  overflow: hidden;
}

#carousel .caption {
  background: rgba(32, 36, 33, .72);
  border-radius: 14px;
  bottom: 2rem;
  color: var(--yuly-white);
  left: 2rem;
  padding: 1rem 1.25rem;
}

#custom-text {
  background: var(--yuly-sage-pale);
  border: 0;
  border-radius: var(--yuly-radius);
  box-shadow: none;
  margin: 0;
  padding: clamp(2rem, 5vw, 4.5rem);
}

#custom-text h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.banner img {
  border-radius: var(--yuly-radius);
}

/* Catalog and filters */
#left-column .block-categories,
#search_filters,
.block-category {
  background: var(--yuly-white);
  border: 1px solid var(--yuly-line);
  border-radius: 18px;
  box-shadow: none;
  padding: 1.2rem;
}

#search_filters .facet .facet-title,
.block-categories .category-sub-menu li[data-depth="0"] > a {
  color: var(--yuly-ink);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Keep the filters aligned with the product grid. Long option lists scroll
   inside the sidebar instead of extending below the loaded products. */
@media (min-width: 768px) {
  #left-column #search_filters {
    max-height: var(--yuly-filter-height, none);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--yuly-petal-deep) transparent;
  }

  #left-column #search_filters::-webkit-scrollbar {
    width: 6px;
  }

  #left-column #search_filters::-webkit-scrollbar-thumb {
    background: var(--yuly-petal-deep);
    border-radius: 999px;
  }
}

.custom-checkbox input[type="checkbox"] + span,
.custom-radio input[type="radio"] + span {
  border-color: rgba(32, 36, 33, .35);
  border-radius: 4px;
}

.custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--yuly-petal-deep);
  border-color: var(--yuly-petal-deep);
}

.block-category h1 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
}

/* Category banner: a calm, centered introduction that matches the Yuly
   palette without competing with the product grid below. */
.block-category {
  align-items: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .6), transparent 32%),
    linear-gradient(135deg, #f7eee8 0%, #f4e4e5 54%, #eee6f0 100%);
  display: flex;
  justify-content: center;
  min-height: 148px;
  margin-bottom: 1.35rem;
  overflow: hidden;
  padding: clamp(1.35rem, 3.5vw, 2.25rem) 1.5rem;
  position: relative;
  text-align: center;
}

.block-category::after {
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  content: '';
  height: 180px;
  opacity: .6;
  position: absolute;
  right: -54px;
  top: -86px;
  width: 180px;
}

.block-category h1 {
  color: var(--yuly-ink);
  letter-spacing: .02em;
  margin: 0;
  position: relative;
  text-align: center;
  z-index: 1;
}

.block-category + #products,
.block-category + .products-selection,
.block-category ~ #products {
  margin-top: 1.35rem;
}

.block-category .category-cover,
.block-category .category-description {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.products-selection .sort-by {
  align-items: center;
  color: var(--yuly-ink-soft);
  display: flex;
  justify-content: flex-end;
  min-height: 74px;
  padding-right: .75rem;
}

.products-selection .products-sort-order {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 74px;
}

.products-sort-order .select-title {
  background: var(--yuly-white);
  border: 1px solid var(--yuly-line);
  border-radius: 999px;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  min-height: 74px;
  padding: 0 1.15rem 0 1.35rem;
  text-align: left;
  width: min(100%, 360px);
}

.pagination .page-list {
  background: transparent;
  box-shadow: none;
}

.pagination .current a {
  color: var(--yuly-petal-deep);
}

/* Active filters: a quiet status row instead of a boxed grey strip. */
#js-active-search-filters {
  align-items: center;
  background: rgba(244, 228, 229, .58);
  border: 0;
  border-radius: 14px;
  display: flex;
  gap: .85rem;
  margin: 0 0 1.25rem;
  padding: .7rem 1rem;
}

#js-active-search-filters .active-filter-title {
  color: var(--yuly-ink-soft);
  font-size: .76rem;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

#js-active-search-filters ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
}

#js-active-search-filters .filter-block {
  align-items: center;
  background: var(--yuly-white);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(91, 62, 71, .08);
  color: var(--yuly-ink);
  display: inline-flex;
  font-size: .86rem;
  gap: .3rem;
  padding: .5rem .7rem .5rem .85rem;
}

#js-active-search-filters .filter-block .js-search-link {
  color: var(--yuly-petal-deep);
  line-height: 1;
}

/* Subcategories: compact editorial cards below the product grid. */
.yuly-subcategories-after-products {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.yuly-subcategories-after-products #subcategories {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.yuly-subcategories-after-products .subcategory-heading {
  align-items: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .6), transparent 32%),
    linear-gradient(135deg, #f7eee8 0%, #f4e4e5 54%, #eee6f0 100%);
  border-radius: 16px;
  color: var(--yuly-ink);
  display: flex;
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
  font-weight: 500;
  justify-content: center;
  letter-spacing: .015em;
  margin: 0 0 1.35rem;
  min-height: 118px;
  padding: 1.25rem;
  position: relative;
  text-align: center;
}

.yuly-subcategories-after-products .subcategories-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.yuly-subcategories-after-products .subcategories-list > li {
  background: #fbf7f5;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(91, 62, 71, .06);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.yuly-subcategories-after-products .subcategories-list > li:hover {
  box-shadow: 0 12px 30px rgba(91, 62, 71, .12);
  transform: translateY(-3px);
}

.yuly-subcategories-after-products .subcategory-image {
  margin: 0;
}

.yuly-subcategories-after-products .subcategory-image img {
  display: block;
  height: 190px;
  object-fit: cover;
  width: 100%;
}

.yuly-subcategories-after-products .subcategory-name {
  color: var(--yuly-ink);
  display: block;
  font-size: .9rem;
  font-weight: 700;
  padding: .8rem .9rem 1rem;
  text-align: center;
}

@media (max-width: 767px) {
  .yuly-subcategories-after-products .subcategories-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yuly-subcategories-after-products .subcategory-image img {
    height: 155px;
  }
}

@media (min-width: 768px) {
  .yuly-subcategories-after-products #subcategories,
  .yuly-subcategories-after-products .subcategories-list {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .yuly-subcategories-after-products .subcategories-list > li {
    min-width: 0;
    width: 100%;
  }

  .yuly-subcategories-after-products .subcategory-image img {
    height: clamp(190px, 18vw, 260px);
  }
}

@media (max-width: 480px) {
  .yuly-subcategories-after-products .subcategories-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  /* Classic applies column widths and floats to listing cards; reset them so
     the mobile card uses the complete content width. */
  #category #products .products {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }

  #category #products .products > .product-miniature,
  #category #products .products > article.product-miniature {
    display: block;
    float: none;
    padding-left: 0;
    padding-right: 0;
    width: 100% !important;
  }

  #category #products .product-miniature .thumbnail-container {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .yuly-subcategories-after-products #subcategories,
  .yuly-subcategories-after-products .subcategories-list {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .yuly-subcategories-after-products .subcategories-list > li {
    display: block;
    float: none;
    margin: 0;
    width: 100% !important;
  }
}

/* Product page */
.product-container {
  align-items: flex-start;
}

.product-cover img {
  background: #f5f4f2;
  border-radius: var(--yuly-radius);
  box-shadow: none;
}

.product-images > li.thumb-container > .thumb {
  border-radius: 12px;
}

.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
  border-color: var(--yuly-petal-deep);
}

.product-container h1.h1 {
  font-size: clamp(2.3rem, 4vw, 4.25rem);
  line-height: 1.02;
  margin-bottom: 1.2rem;
}

.product-price {
  color: var(--yuly-petal-deep);
  font-size: 1.8rem;
}

.product-information {
  color: var(--yuly-ink-soft);
}

.product-variants > .product-variants-item select,
.product-quantity #quantity_wanted,
.form-control {
  background: var(--yuly-white);
  border: 1px solid rgba(32, 36, 33, .2);
  border-radius: 12px;
  min-height: 46px;
}

.product-variants > .product-variants-item select:focus,
.product-quantity #quantity_wanted:focus,
.form-control:focus {
  border-color: var(--yuly-petal-deep);
  box-shadow: 0 0 0 4px rgba(232, 160, 191, .16);
  outline: 0;
}

.product-actions .add-to-cart {
  min-height: 52px;
}

.tabs {
  background: var(--yuly-white);
  border: 1px solid var(--yuly-line);
  border-radius: 18px;
  box-shadow: none;
  margin-top: 2rem;
  padding: 1.25rem;
}

.tabs .nav-tabs {
  border-color: var(--yuly-line);
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  border-bottom-color: var(--yuly-petal-deep);
  color: var(--yuly-petal-deep);
}

/* Cart, checkout and account */
.card,
.cart-grid-body .card-block,
.cart-grid-right .card,
#checkout-personal-information-step,
#checkout-addresses-step,
#checkout-delivery-step,
#checkout-payment-step {
  border: 1px solid var(--yuly-line);
  border-radius: 18px;
  box-shadow: none;
  overflow: hidden;
}

.checkout-step .step-title {
  color: var(--yuly-ink);
  font-family: var(--yuly-body);
  font-weight: 750;
}

.checkout-step.-current .step-title {
  color: var(--yuly-petal-deep);
}

.cart-summary-line .value,
.cart-summary-line.cart-total .value {
  color: var(--yuly-ink);
}

/* Footer */
.yuly-footer-intro {
  background: var(--yuly-petal-pale);
  margin-top: clamp(3rem, 7vw, 7rem);
  padding: clamp(2.4rem, 5vw, 4.8rem) 0;
  position: relative;
  text-align: center;
}

.yuly-footer-intro::after {
  background: var(--yuly-petal-deep);
  border-radius: 999px;
  bottom: -3px;
  content: "";
  height: 6px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 86px;
}

.yuly-footer-kicker {
  color: var(--yuly-sage-deep);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.yuly-footer-statement {
  color: var(--yuly-ink);
  font-family: var(--yuly-display);
  font-size: clamp(2rem, 4vw, 3.65rem);
  line-height: 1.08;
  margin: .5rem auto 0;
}

#footer {
  background: var(--yuly-ink);
  color: rgba(255, 255, 255, .76);
  padding-top: 0;
}

#footer .footer-container {
  background: var(--yuly-ink);
  box-shadow: none;
  margin-top: 0;
  padding-top: 3.5rem;
}

#footer .h3,
#footer .h4,
#footer .block-contact-title,
#footer .links .h3 {
  color: var(--yuly-white);
  font-family: var(--yuly-body);
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#footer a {
  color: rgba(255, 255, 255, .72);
}

#footer a:hover,
#footer a:focus {
  color: var(--yuly-petal);
}

#footer .block_newsletter {
  background: transparent;
}

#footer .block_newsletter form input[type="email"] {
  border-radius: 999px 0 0 999px;
}

#footer .block_newsletter form input[type="submit"] {
  background: var(--yuly-petal-deep);
  border-radius: 0 999px 999px 0;
}

.yuly-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .76rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
}

/* Motion */
.yuly-js .yuly-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease var(--yuly-delay, 0ms),
    transform .55s ease var(--yuly-delay, 0ms);
}

.yuly-js .yuly-reveal.yuly-visible,
.yuly-no-motion .yuly-reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (min-width: 992px) {
  #header .header-top {
    position: sticky;
    top: 0;
    z-index: 1030;
  }
}

@media (max-width: 991px) {
  #wrapper {
    padding-top: 1rem;
  }

  #header .header-top {
    padding: .75rem 0;
  }

  .yuly-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 3.2rem 2rem;
  }

  .yuly-hero-copy {
    max-width: 680px;
  }

  .yuly-stage {
    display: none;
  }

  .yuly-values {
    grid-template-columns: 1fr;
  }

  .yuly-value {
    padding: .8rem .5rem;
  }

  .yuly-value + .yuly-value {
    border-left: 0;
    border-top: 1px solid var(--yuly-line);
  }

  #mobile_top_menu_wrapper {
    background: var(--yuly-white);
    border-radius: 0 0 18px 18px;
    box-shadow: var(--yuly-shadow);
    padding: 1rem;
  }
}

@media (max-width: 575px) {
  body {
    font-size: .96rem;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .yuly-hero {
    border-radius: 24px;
    padding: 2.7rem 1.35rem 3rem;
  }

  .yuly-hero h1 {
    font-size: clamp(2.7rem, 14vw, 4.25rem);
  }

  .yuly-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .yuly-btn {
    width: 100%;
  }

  .products-section-title,
  .featured-products .products-section-title {
    font-size: 2.3rem;
  }

  .product-miniature .thumbnail-container {
    border-radius: 16px;
  }

  #category #products .products {
    margin-left: -8px;
    margin-right: -8px;
  }

  #category #products .product-miniature {
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
  }

  #category #products .product-miniature .thumbnail-container {
    width: 100%;
  }

  .yuly-subcategories-after-products {
    margin-left: -8px;
    margin-right: -8px;
  }

  .yuly-subcategories-after-products .subcategories-list {
    gap: .75rem;
  }

  .yuly-subcategories-after-products .subcategories-list > li {
    width: 100%;
  }

  .product-container h1.h1 {
    font-size: 2.45rem;
  }

  .yuly-footer-statement {
    font-size: 2.35rem;
  }
}

/* ============================================================
   YULY DANZA — piezas propias añadidas sobre la base de Codex
   (topbar, catbar+desplegables, hero-carrusel, categorías,
   destacados aleatorios, trust). Todo con prefijo .yuly- para
   no colisionar con las clases de classic/Codex.
   ============================================================ */

/* Fuentes en toda la tienda */
body { font-family: var(--yuly-body); }
h1,h2,h3,.h1,.h2,.h3 { font-family: var(--yuly-display); }

/* ---- TOPBAR ---- */
.yuly-topbar { background: var(--green-dark); color: rgba(255,255,255,.92); font-size: .82rem; position: relative; z-index: 1; }
.yuly-topbar-inner { min-height: 34px; display: flex; align-items: center; justify-content: flex-start; padding-top: 4px; padding-bottom: 4px; }
.yuly-topbar-contact-block { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.yuly-topbar-title { font-size: .78rem; font-weight: 600; letter-spacing: .3px; color: #fff; }
/* PS9 muestra su propio "Contacte con nosotros" en el header (módulo contact-link
   dentro de displayTop). Como ya lo pusimos en nuestra topbar, ocultamos el nativo. */
#header .header-nav #contact-link,
#header .header-top #contact-link,
#header #contact-link,
#header .header-nav a[href*="contact"],
#_desktop_contact_link { display: none !important; }
/* Ocultamos el selector de idiomas (no se usa en esta tienda) */
#header .language-selector,
#header #_desktop_language_selector,
.header-top .language-selector,
#_mobile_language_selector { display: none !important; }

/* Contraste del header-nav sobre fondo blanco (ya no hay barra verde) */
#header .header-nav,
#header .header-nav a,
#header .header-nav .expand-more,
#header .header-nav .blockcart a,
#header .header-nav .user-info a,
#header .header-nav span {
  color: var(--black) !important;
  font-weight: 600 !important;
}
#header .header-nav .blockcart,
#header .header-nav .blockcart.active,
#header .header-nav .blockcart.inactive {
  background: transparent !important;
  color: var(--black) !important;
}
#header .header-nav .blockcart .header i,
#header .header-nav .user-info i,
#header .header-nav i.material-icons { color: var(--black) !important; }
#header .header-nav a:hover,
#header .header-nav a:hover span,
#header .header-nav a:hover i { color: var(--pink-dark) !important; }

/* Icono + texto alineados (login y carrito) */
#header .header-nav .user-info a,
#header .header-nav .blockcart .header,
#header .header-nav .blockcart .header a {
  display: inline-flex; align-items: center; gap: 6px;
}
#header .header-nav .user-info i,
#header .header-nav .blockcart .header i {
  vertical-align: initial; line-height: 1; font-size: 20px;
}
.yuly-topbar-socials { display: flex; align-items: center; gap: 10px; }
.yuly-topbar-socials a { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: background var(--t), transform var(--t); }
.yuly-topbar-socials a:hover { background: var(--pink); transform: translateY(-1px); }
.yuly-topbar-socials svg { width: 13px; height: 13px; fill: var(--black); stroke: var(--black); }
/* Facebook usa relleno; el resto usa trazo. Al hacer hover, todo pasa a blanco */
.yuly-topbar-socials a[aria-label="Facebook"] svg { stroke: none; fill: var(--black); }
.yuly-topbar-socials a:hover svg { fill: #fff; stroke: #fff; }
.yuly-topbar-socials a[aria-label="Facebook"]:hover svg { stroke: none; fill: #fff; }

/* ---- MARCAS integrado en el menu principal ---- */
/* Fila del menú + buscador. Va con wrap: entre 992 y ~1200px el menú y el
   buscador no entran juntos y, con nowrap, el buscador (classic le fija
   min-width: 16.5rem y float: right) se salía del container y generaba scroll
   horizontal. Al permitir wrap baja a su propia línea, alineado a la derecha. */
.yuly-topmenu-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.yuly-topmenu-row > * { flex: 0 0 auto; width: auto; min-width: 0; max-width: 100%; }
.yuly-topmenu-row .yuly-catbar-dropdown { order: 2; }
.yuly-topmenu-row .search-widgets {
  order: 3;
  margin-left: auto;
  /* puede encogerse hasta 200px; por debajo de eso pasa a la línea siguiente */
  flex: 0 1 264px;
  float: none;
  min-width: 200px;
  max-width: 100%;
}
#header .header-top #search_widget,
#header .header-top #search_widget form {
  min-width: 0;
  max-width: 100%;
}
#header .header-top #search_widget form input,
#header .header-top #search_widget form input[type="text"] {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* ---- CATBAR + DESPLEGABLES ---- */
.yuly-catbar { background: var(--white); border-bottom: 1px solid var(--yuly-line); }
.yuly-catbar-inner { display: flex; align-items: center; justify-content: flex-end; gap: 28px; min-height: 46px; }
.yuly-catbar-search-mobile { display: none; }
.yuly-catbar-links { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.yuly-catbar-links a {
  font-family: var(--yuly-body); font-size: .82rem; font-weight: 600; letter-spacing: .3px;
  color: var(--gray); text-transform: uppercase; text-decoration: none; transition: color var(--t);
}
.yuly-catbar-links a:hover { color: var(--pink-dark); }
.yuly-catbar-dropdown { position: relative; }
.yuly-catbar-toggle {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  font-family: var(--yuly-body); font-size: .82rem; font-weight: 600; letter-spacing: .3px;
  color: var(--gray); text-transform: uppercase; padding: 0; transition: color var(--t);
}
.yuly-catbar-toggle:hover, .yuly-catbar-dropdown.open .yuly-catbar-toggle { color: var(--pink-dark); }
.yuly-catbar-plus { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--pink); color: #fff; font-size: .9rem; line-height: 1; }
.yuly-catbar-caret { transition: transform var(--t); }
.yuly-catbar-dropdown.open .yuly-catbar-caret { transform: rotate(180deg); }
.yuly-catbar-panel {
  position: absolute; top: calc(100% + 12px); z-index: 1001; background: var(--white);
  border: 1px solid var(--yuly-line); border-radius: 14px; box-shadow: var(--yuly-shadow);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.yuly-catbar-dropdown.open .yuly-catbar-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.yuly-catbar-panel a { display: block; padding: 10px 14px; border-radius: 9px; font-size: .85rem; font-weight: 500; color: var(--black); text-transform: none; white-space: nowrap; transition: background var(--t), color var(--t); }
.yuly-catbar-panel a:hover { background: var(--pink-light); color: var(--pink-dark); }
.yuly-catbar-panel-list { right: 0; min-width: 210px; }
.yuly-catbar-panel-grid { right: 0; display: grid; grid-template-columns: repeat(3, minmax(150px,1fr)); gap: 2px; width: max-content; max-width: 90vw; }
.yuly-catbar-panel-grid .yuly-catbar-all { grid-column: 1/-1; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--yuly-line); font-weight: 600; color: var(--pink-dark); text-align: center; }

/* ---- Submenus del menu principal, mismo look que el panel de Marcas ---- */
@media (min-width: 992px) {
  #header .top-menu[data-depth="0"] > li.category { position: relative; }
  #header .popover.sub-menu {
    position: absolute !important; top: calc(100% + 8px) !important; left: 0; width: max-content; min-width: 220px; max-width: 320px;
    margin-left: 0; background: var(--white); border: 1px solid var(--yuly-line);
    border-radius: 14px; box-shadow: var(--yuly-shadow); padding: 10px; z-index: 1001;
  }
  #header .popover.sub-menu ul[data-depth="1"] { display: block; padding: 0; margin: 0; }
  #header .popover.sub-menu ul[data-depth="1"] > li { float: none; margin: 0; }
  #header .popover.sub-menu li > a {
    display: block; padding: 10px 14px; border-radius: 9px; font-size: .85rem; font-weight: 500;
    color: var(--black); text-transform: none; white-space: nowrap; border-bottom: none;
    transition: background var(--t), color var(--t);
  }
  #header .popover.sub-menu li > a:hover { background: var(--pink-light); color: var(--pink-dark); }
}

/* ---- BOTONES ---- */
.yuly-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-size: .95rem; font-weight: 600; border-radius: 30px; cursor: pointer; transition: background var(--t), transform var(--t), color var(--t); text-decoration: none; }
.yuly-btn-primary { background: var(--pink); color: #fff !important; border: none; }
.yuly-btn-primary:hover { background: var(--pink-dark); transform: translateY(-2px); color: #fff !important; }
.yuly-btn-secondary { background: transparent; color: var(--green-dark) !important; border: 2px solid var(--green); }
.yuly-btn-secondary:hover { background: var(--green); color: #fff !important; }

/* ---- HERO ---- */
/* Full-bleed y pegado al header: mismo recurso que .yuly-trust (100vw + márgenes
   negativos), sin radius ni margen superior para que no quede aire arriba. */
.yuly-hero {
  background: linear-gradient(135deg, var(--pink-light) 0%, var(--white) 55%, var(--green-light) 100%);
  padding: 64px 0 80px;
  overflow: hidden;
  width: calc(100vw - var(--sbw));
  margin-left: calc(50% - 50vw + (var(--sbw) / 2));
  margin-right: calc(50% - 50vw + (var(--sbw) / 2));
  margin-top: 0;
  border-radius: 0;
  /* la maqueta interna la resuelve .yuly-hero-grid (flex); el grid de dos
     columnas que traía descolocaba el contenido al ir a ancho completo */
  display: block;
}
.yuly-hero > .container { width: 1140px; max-width: calc(100% - 30px); margin: 0 auto; }
/* #wrapper mete 32px de padding-top que separaban el hero del header. */
body.page-index #wrapper { padding-top: 0; }
.yuly-hero-grid { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; }
.yuly-hero-copy { flex: 1.3; min-width: 320px; }
.yuly-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pink-dark); margin-bottom: 18px; }
.yuly-hero-title { font-family: var(--yuly-display); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 600; line-height: 1.15; color: var(--black); margin: 0 0 20px; }
.yuly-hero-title em { font-style: italic; color: var(--pink-dark); }
.yuly-hero-subtitle { font-size: 1.02rem; color: var(--gray); max-width: 480px; margin-bottom: 32px; line-height: 1.75; }
.yuly-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.yuly-hero-visual { position: relative; flex: 1; min-width: 260px; max-width: 380px; }
.yuly-hero-slider { aspect-ratio: 4/5; border-radius: 28px; overflow: hidden; background: linear-gradient(160deg, var(--pink) 0%, var(--green) 100%); position: relative; }
.yuly-hero-track { position: absolute; inset: 0; }
.yuly-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; display: block; }
.yuly-hero-slide.active { opacity: 1; pointer-events: auto; }
.yuly-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.yuly-hero-slide-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 22px; background: linear-gradient(to top, rgba(0,0,0,.72), transparent); color: #fff; }
.yuly-hero-slide-name { font-family: var(--yuly-display); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.yuly-hero-slide-price { font-size: 1.05rem; font-weight: 700; margin-top: 6px; color: var(--pink-light); }
.yuly-hero-dots { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; z-index: 3; }
.yuly-hero-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .3s, transform .3s; }
.yuly-hero-dots span.active { background: #fff; transform: scale(1.3); }
.yuly-hero-badge { position: absolute; bottom: 24px; left: 24px; background: #fff; border-radius: 16px; padding: 14px 20px; box-shadow: var(--yuly-shadow); display: flex; align-items: center; gap: 10px; }
.yuly-hero-badge .num { font-family: var(--yuly-display); font-size: 1.4rem; font-weight: 700; color: var(--pink-dark); }
.yuly-hero-badge .label { font-size: .72rem; color: var(--gray); line-height: 1.2; }

/* ---- SECTION HEADS ---- */
.yuly-section-head { text-align: center; margin-bottom: 40px; }
.yuly-section-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green-dark); margin-bottom: 8px; }
.yuly-section-title { font-family: var(--yuly-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; color: var(--black); margin: 0; }
.yuly-section-title em { font-style: italic; color: var(--pink-dark); }
.yuly-section-sub { font-size: .96rem; color: var(--gray); max-width: 520px; margin: 14px auto 0; }

/* ---- CATEGORIAS ---- */
.yuly-categorias { padding: 72px 0; background: transparent; border-radius: 34px; }
/* .container trae un width fijo (1140) mayor que el de la section, así que sin
   su padding lateral las cards se salían por la derecha. */
.yuly-categorias > .container {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.yuly-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.yuly-cat-card { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3/4; display: block; transition: transform var(--t), box-shadow var(--t); }
.yuly-cat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.12); }
.yuly-cat-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.yuly-cat-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.yuly-cat-card:hover .yuly-cat-bg img { transform: scale(1.06); }
.yuly-cat-card.c1 .yuly-cat-bg { background: linear-gradient(160deg, var(--pink) 0%, var(--pink-dark) 100%); }
.yuly-cat-card.c2 .yuly-cat-bg { background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%); }
.yuly-cat-card.c3 .yuly-cat-bg { background: linear-gradient(160deg, #F0C4D6 0%, var(--pink) 100%); }
.yuly-cat-card.c4 .yuly-cat-bg { background: linear-gradient(160deg, #AFC78E 0%, var(--green) 100%); }
.yuly-cat-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 18px; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); z-index: 2; }
.yuly-cat-label span { color: #fff; font-weight: 700; font-size: 1rem; }

/* ---- PRODUCTOS DESTACADOS ---- */
.yuly-productos { padding: 72px 0; background: var(--light-gray); }
.yuly-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.yuly-prod-loading { grid-column: 1/-1; text-align: center; padding: 40px; color: #aaa; }
.yuly-prod-card { background: var(--white); border-radius: 18px; overflow: hidden; border: 1px solid rgba(0,0,0,.05); display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t); text-decoration: none; }
.yuly-prod-card:hover { transform: translateY(-6px); box-shadow: var(--yuly-shadow); }
.yuly-prod-img { aspect-ratio: 1; background: linear-gradient(160deg, var(--pink-light) 0%, var(--green-light) 100%); overflow: hidden; position: relative; }
.yuly-prod-img img { width: 100%; height: 100%; object-fit: cover; }
/* Segunda foto de la galería, superpuesta y visible solo con hover */
.yuly-prod-img .yuly-prod-img-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.yuly-prod-card:hover .yuly-prod-img .yuly-prod-img-hover { opacity: 1; }
.yuly-prod-info { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.yuly-prod-name { font-size: .95rem; font-weight: 600; color: var(--black); margin-bottom: 12px; line-height: 1.35; flex: 1; }
.yuly-prod-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.yuly-prod-price { font-family: var(--yuly-display); font-size: 1.2rem; font-weight: 700; color: var(--pink-dark); }
.yuly-prod-add { width: 38px; height: 38px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.yuly-prod-add svg { width: 17px; height: 17px; }

/* ---- TRUST ---- */
/* Full-bleed: rompe el ancho del container y queda pegada al footer */
.yuly-trust {
  padding: 52px 0;
  background: var(--green-dark);
  width: calc(100vw - var(--sbw));
  margin-left: calc(50% - 50vw + (var(--sbw) / 2));
  margin-right: calc(50% - 50vw + (var(--sbw) / 2));
  margin-bottom: 0;
  max-width: 100vw;
}
.yuly-trust > .container { padding-left: 15px; padding-right: 15px; }
.yuly-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.yuly-trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; color: #fff; }
.yuly-trust-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; }
.yuly-trust-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.8; }
.yuly-trust-item h4 { font-size: .92rem; font-weight: 700; margin: 0; font-family: var(--yuly-body); }
.yuly-trust-item p { font-size: .76rem; color: rgba(255,255,255,.75); max-width: 200px; margin: 0; }

/* ---- FORMAS DE PAGO ---- */
.yuly-payments {
  background: var(--yuly-white);
  border-bottom: 1px solid var(--yuly-line);
  margin-left: calc(50% - 50vw + (var(--sbw) / 2));
  margin-right: calc(50% - 50vw + (var(--sbw) / 2));
  padding: 2.4rem 0 2.1rem;
  width: calc(100vw - var(--sbw));
}

.yuly-payments-heading {
  margin: 0 auto 1.3rem;
  text-align: center;
}

.yuly-payments-heading span {
  color: var(--yuly-sage-deep);
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  margin-bottom: .18rem;
  text-transform: uppercase;
}

.yuly-payments-heading h2 {
  font-family: var(--yuly-display);
  font-size: clamp(1.65rem, 2.8vw, 2.15rem);
  margin: 0;
}

.yuly-payments-marquee {
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 1.25rem;
  width: 100%;
}

.yuly-payments-set {
  align-items: center;
  display: flex;
  gap: clamp(1.25rem, 5vw, 5rem);
  justify-content: space-between;
  padding: .25rem 0;
}

.yuly-payment {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap;
}

.yuly-payment img {
  display: block;
  height: clamp(2.7rem, 5vw, 4.2rem);
  max-width: min(16vw, 12rem);
  object-fit: contain;
  width: auto;
}

@media (max-width: 575px) {
  .yuly-payments-set { flex-wrap: wrap; justify-content: center; }
  .yuly-payment { flex: 0 0 calc(50% - .75rem); justify-content: center; }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .yuly-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .yuly-prod-grid { grid-template-columns: repeat(3, 1fr); }
  .yuly-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .yuly-catbar { position: relative; }
  .yuly-catbar-inner { justify-content: center; }
  /* Los paneles desplegables se salían de la pantalla en mobile:
     los reposicionamos centrados y contenidos dentro del viewport */
  .yuly-catbar-dropdown { position: static; }
  .yuly-catbar-panel {
    position: absolute;
    top: 100%;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: translateY(-8px);
    max-height: 70vh;
    overflow-y: auto;
  }
  .yuly-catbar-dropdown.open .yuly-catbar-panel { transform: translateY(0); }
  /* "+" como lista simple a lo ancho */
  .yuly-catbar-panel-list { min-width: 0; }
  /* "Marcas": de 3 columnas a 2, contenido en pantalla */
  .yuly-catbar-panel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
}
@media (max-width: 768px) {
  .yuly-hero { padding: 32px 0 40px; }
  .yuly-hero-grid { flex-direction: column; gap: 28px; }
  .yuly-hero-copy { order: 1; }
  .yuly-hero-visual { order: 2; max-width: 280px; margin: 0 auto; }
  .yuly-categorias, .yuly-productos { padding: 48px 0; }
}
@media (max-width: 480px) {
  .yuly-cat-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .yuly-prod-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .yuly-trust-grid { grid-template-columns: 1fr; }
  .yuly-topbar-socials { display: none; }
}

/* ============================================================
   FOOTER — verde claro con texto oscuro (como el original WordPress)
   ============================================================ */
#footer {
  background: var(--green-light) !important;
  color: var(--black) !important;
  padding-top: 56px;
}
#footer .footer-container {
  background: var(--green-light) !important;
}
/* .page-footer va vacío pero classic le pone margin-bottom (#main .page-footer),
   que dejaba una franja blanca entre la barra verde (.yuly-trust) y el footer. */
body.page-index #main .page-footer {
  margin-bottom: 0;
}
/* Enlaces del footer: oscuros, con hover rosa */
#footer a,
#footer .link-item a,
#footer li a,
#footer .account-list a,
#footer .footer-container a {
  color: var(--gray) !important;
}
#footer a:hover,
#footer a:focus {
  color: var(--pink-dark) !important;
}
/* Títulos de columnas: verde oscuro */
#footer .h3,
#footer .h4,
#footer h3,
#footer h4,
#footer .block-contact-title,
#footer .links .h3,
#footer .title {
  color: var(--green-dark) !important;
}
/* Texto suelto (dirección, párrafos, newsletter) */
#footer p,
#footer li,
#footer .block-contact,
#footer span,
#footer address {
  color: var(--gray) !important;
}
#footer strong,
#footer b { color: var(--black) !important; }
#footer .block_newsletter p,
#footer .block_newsletter .form-text { color: var(--gray) !important; }

/* ============================================================
   Ocultar SOLO la imagen de banner de la cabecera de categoría
   (#js-product-list-header .category-cover). No afecta las
   tarjetas de subcategorías ni las imágenes de producto.
   ============================================================ */
#js-product-list-header .category-cover,
#category #js-product-list-header .category-cover { display: none !important; }

/* Redes sociales del footer sobre fondo verde claro */
#footer .yuly-footer-socials a,
#footer .social-sharing a,
#footer .block-social a {
  background: var(--white) !important;
  border: 1px solid var(--yuly-line) !important;
}
#footer .yuly-footer-socials a:hover,
#footer .social-sharing a:hover,
#footer .block-social a:hover { background: var(--pink) !important; }

/* ============================================================
   FOOTER EXTRA — redes (con WhatsApp) + mapa de Google Maps
   ============================================================ */
.yuly-footer-extra {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.yuly-footer-extra-title {
  font-size: .8rem; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--green-dark) !important; margin-bottom: 16px;
}
.yuly-footer-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.yuly-footer-socials a {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--yuly-line);
  color: var(--green-dark); transition: background var(--t), color var(--t), transform var(--t);
}
.yuly-footer-socials a:hover { background: var(--pink); color: #fff; transform: translateY(-2px); }
.yuly-footer-socials svg { width: 17px; height: 17px; }
.yuly-footer-socials a > svg { display: block; width: 18px; height: 18px; }
.yuly-footer-map { border-radius: 14px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.08); max-width: 480px; }
.yuly-footer-map iframe { display: block; width: 100%; }
@media (max-width: 768px) {
  .yuly-footer-map-col { margin-top: 24px; }
  .yuly-footer-map { max-width: 100%; }
}

/* ============================================================
   FOOTER — columnas fijas escritas en el template
   ============================================================ */
.yuly-footer-cols { padding: 10px 0 20px; }
.yuly-footer-brand .yuly-footer-logo { max-width: 160px; height: auto; margin-bottom: 16px; }
.yuly-footer-brand p { font-size: .88rem; color: var(--gray); line-height: 1.8; max-width: 280px; }
.yuly-footer-col-title {
  font-size: .8rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--green-dark) !important; margin-bottom: 18px;
}
.yuly-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.yuly-footer-col ul a { font-size: .88rem; color: var(--gray); transition: color var(--t); }
.yuly-footer-col ul a:hover { color: var(--pink-dark); }
.yuly-footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; }
.yuly-footer-contact-list svg { width: 16px; height: 16px; stroke: var(--pink-dark); flex-shrink: 0; margin-top: 3px; }
.yuly-footer-contact-list .yuly-footer-icon { display: inline-flex; flex: 0 0 16px; margin-top: 3px; }
.yuly-footer-contact-list .yuly-footer-icon svg { margin-top: 0; }
.yuly-footer-contact-list li svg[fill="currentColor"] { fill: var(--pink-dark); stroke: none; }
.yuly-footer-contact-list span,
.yuly-footer-contact-list a { font-size: .86rem; color: var(--gray); line-height: 1.5; }
.yuly-footer-contact-list a:hover { color: var(--pink-dark); }
@media (max-width: 767px) {
  .yuly-footer-cols > div { margin-bottom: 28px; }
}

/* ============================================================
   BUSCADOR EN MOBILE — que no se salga del contenedor
   .yuly-topmenu-row es flex nowrap con hijos `flex: 0 0 auto`, así que el
   buscador tomaba su ancho intrínseco (classic le pone min-width:15.63rem al
   .search-widget) y, con `margin-left:auto`, el sobrante se iba por la derecha.
   Debajo de 576px además .header-top-right se queda sin clase col-*, por lo que
   tampoco lo limitaba la grilla. En mobile lo pasamos a fila propia al 100%.
   ============================================================ */
@media (max-width: 991px) {
  #header .header-top .header-top-right,
  #header .header-top .yuly-topmenu-row {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .yuly-topmenu-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .yuly-topmenu-row > * {
    min-width: 0;
    max-width: 100%;
  }

  .yuly-topmenu-row .search-widgets {
    order: 1;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    float: none;
  }

  .yuly-topmenu-row .yuly-catbar-dropdown {
    order: 2;
    flex: 0 0 auto;
  }

  #header .header-top #search_widget,
  #header .header-top .search-widget,
  #header .header-top #search_widget form {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    float: none;
  }

  #header .header-top #search_widget form input,
  #header .header-top #search_widget form input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   Sin Pinterest: se oculta el botón de Pinterest de los módulos
   ps_sharebuttons ("Compartir" en la ficha de producto) y
   ps_socialfollow ("Síguenos"). El resto de redes no se toca.
   ============================================================ */
.social-sharing li.pinterest,
.block-social li.pinterest {
  display: none !important;
}