.jcd-upc{--jcd-accent:#438D39;--jcd-text:#252525;--jcd-card:#fff;--jcd-border:#DCE4D9;--jcd-gap:16px;--jcd-cols-d:4;--jcd-cols-t:2;--jcd-cols-m:1;--jcd-radius:16px;width:100%;max-width:1400px;margin:18px auto;color:var(--jcd-text);font-family:inherit;background:transparent;box-sizing:border-box}.jcd-upc *,.jcd-upc *:before,.jcd-upc *:after{box-sizing:border-box}.jcd-upc__heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 4px 12px}.jcd-upc__heading h2{margin:0!important;padding:0!important;color:inherit;font:inherit;font-size:clamp(20px,1.8vw,27px);font-weight:800;line-height:1.1}.jcd-upc__heading>a{display:inline-flex;align-items:center;gap:5px;color:var(--jcd-accent);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}.jcd-upc__viewport{position:relative;width:100%}.jcd-upc__track{display:flex!important;align-items:stretch;gap:var(--jcd-gap);width:100%;padding:8px!important;margin:0!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}.jcd-upc__track:active{cursor:grabbing}.jcd-upc__track::-webkit-scrollbar{display:none}.jcd-upc-card{position:relative;display:flex!important;flex:0 0 calc((100% - (var(--jcd-cols-d) - 1)*var(--jcd-gap))/var(--jcd-cols-d))!important;flex-direction:column;min-width:0;margin:0!important;padding:14px!important;background:var(--jcd-card)!important;border:1px solid var(--jcd-border)!important;border-radius:var(--jcd-radius)!important;overflow:hidden;scroll-snap-align:start;color:inherit;transition:transform .2s ease,box-shadow .2s ease}.jcd-upc--shadow .jcd-upc-card{box-shadow:0 5px 18px rgba(0,0,0,.06)}.jcd-upc-card__image{position:relative;display:flex!important;align-items:center;justify-content:center;width:100%;overflow:hidden;text-decoration:none;background:transparent}.jcd-ratio-square{aspect-ratio:1}.jcd-ratio-portrait{aspect-ratio:4/5}.jcd-ratio-landscape{aspect-ratio:4/3}.jcd-ratio-auto{min-height:120px}.jcd-upc-card__image img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;margin:auto!important;padding:0!important;border:0!important;box-shadow:none!important}.jcd-fit-contain img{object-fit:contain!important}.jcd-fit-cover img{object-fit:cover!important}.jcd-upc-card__body{display:flex;flex:1;flex-direction:column;min-width:0;padding:12px 2px 4px}.jcd-upc-card h3{margin:0 0 6px!important;padding:0!important;color:inherit;font:inherit;font-size:14px!important;font-weight:650!important;line-height:1.3!important}.jcd-upc-card h3 a{display:-webkit-box;color:inherit!important;text-decoration:none!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.jcd-upc-card__category,.jcd-upc-card__stock{margin:0 0 5px;font-size:12px;opacity:.72}.jcd-upc-card__category a{color:inherit;text-decoration:none}.jcd-upc-card__body>p{margin:3px 0 8px;font-size:12px;line-height:1.4;opacity:.75}.jcd-upc-card__price{margin-top:auto;color:inherit;font-size:15px;font-weight:800;line-height:1.25}.jcd-upc-card__price del{opacity:.55;font-size:.82em;font-weight:500}.jcd-upc-card__price ins{text-decoration:none}.jcd-upc-card__rating{margin:0 0 7px}.jcd-upc-card__rating .star-rating{float:none;margin:0}.jcd-upc-card__badges{position:absolute;z-index:3;top:10px;left:10px;display:flex;flex-wrap:wrap;gap:5px}.jcd-upc-card__badges span{padding:4px 7px;border-radius:999px;background:var(--jcd-accent);color:#fff;font-size:10px;font-weight:700;line-height:1}.jcd-upc-card__button,.jcd-upc-card__button.button{display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:flex-end;width:38px!important;height:38px!important;min-width:38px!important;margin:7px 2px 0!important;padding:0!important;border:0!important;border-radius:10px!important;background:var(--jcd-accent)!important;color:#fff!important;line-height:1!important;text-decoration:none!important}.jcd-upc-card__button svg{width:18px!important;height:18px!important;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.jcd-upc__arrow{position:absolute!important;z-index:8!important;top:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;min-width:36px!important;margin:0!important;padding:0 0 3px!important;border:1px solid var(--jcd-border)!important;border-radius:999px!important;background:var(--jcd-card)!important;color:var(--jcd-accent)!important;box-shadow:0 4px 14px rgba(0,0,0,.1)!important;font:700 27px/1 Arial!important;transform:translateY(-50%)!important;cursor:pointer}.jcd-upc__arrow--prev{left:-14px}.jcd-upc__arrow--next{right:-14px}.jcd-upc__arrow:disabled{opacity:.25;cursor:default}.jcd-upc__dots{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px}.jcd-upc__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:currentColor;opacity:.25;cursor:pointer}.jcd-upc__dot.is-active{opacity:1;background:var(--jcd-accent)}.jcd-upc a.added_to_cart{display:none!important}.jcd-upc-empty{padding:12px;border:1px dashed currentColor;border-radius:8px;opacity:.75}.jcd-upc-card.is-added .jcd-upc-card__button{transform:scale(1.08)}
.jcd-layout-compact .jcd-upc-card{display:grid!important;grid-template-columns:minmax(82px,35%) minmax(0,1fr) 40px;align-items:center;min-height:150px;gap:12px}.jcd-layout-compact .jcd-upc-card__image{aspect-ratio:1!important;min-height:96px}.jcd-layout-compact .jcd-upc-card__body{align-self:center;padding:4px 0}.jcd-layout-compact .jcd-upc-card__button{align-self:center;margin:0!important}.jcd-layout-compact .jcd-upc-card__badges{top:7px;left:7px}
@media(hover:hover) and (pointer:fine){.jcd-upc-card:hover,.jcd-upc-card:focus-within{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.11)}}
@media(max-width:1100px){.jcd-upc-card{flex-basis:calc((100% - (var(--jcd-cols-t) - 1)*var(--jcd-gap))/var(--jcd-cols-t))!important}}
@media(max-width:700px){.jcd-upc{--jcd-gap:12px;margin:15px auto}.jcd-upc__heading h2{font-size:21px}.jcd-upc__heading>a{font-size:13px}.jcd-upc-card{flex-basis:calc((100% - (var(--jcd-cols-m) - 1)*var(--jcd-gap))/var(--jcd-cols-m))!important}.jcd-upc__track{padding-right:10%!important}.jcd-upc__arrow{display:none!important}}
@media(prefers-reduced-motion:reduce){.jcd-upc__track{scroll-behavior:auto}.jcd-upc-card{transition:none!important}}


/* ================================================================
   Carrusel Universal V1.1 — Diseño 420 Rocks
   Se reservan columnas EXTERIORES para navegación; la pista mantiene
   su propio overflow, imprescindible para scroll, snap y arrastre.
   ================================================================ */
.jcd-upc {
  color: var(--jcd-text) !important;
  max-width: 1400px;
}
.jcd-upc__heading h2 {
  color: var(--jcd-text) !important;
  font-weight: 750 !important;
  letter-spacing: .01em;
}
.jcd-upc__heading > a {
  color: var(--jcd-accent) !important;
  text-decoration: none !important;
}
.jcd-upc__heading > a:hover { text-decoration: underline !important; }
.jcd-upc__viewport {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  column-gap: 12px;
  align-items: center;
  min-width: 0;
}
.jcd-upc__track {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  /* NO quitar overflow-x: auto; es la pista desplazable. */
}
.jcd-upc__arrow,
.jcd-upc__arrow--prev,
.jcd-upc__arrow--next {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 0 2px !important;
  color: var(--jcd-accent) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--jcd-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.08) !important;
  z-index: 3;
}
.jcd-upc__arrow--prev { grid-column: 1; }
.jcd-upc__arrow--next { grid-column: 3; }
.jcd-upc__arrow:not(:disabled):hover {
  background: var(--jcd-accent) !important;
  color: #fff !important;
}
.jcd-upc__arrow:focus-visible,
.jcd-upc__dot:focus-visible,
.jcd-upc-card a:focus-visible {
  outline: 2px solid var(--jcd-accent) !important;
  outline-offset: 3px !important;
}
.jcd-upc--no-arrows .jcd-upc__viewport { display: block; }
.jcd-upc--no-arrows .jcd-upc__track { width: 100%; }
.jcd-upc-card {
  color: var(--jcd-text) !important;
  border: 1px solid var(--jcd-border) !important;
  background: var(--jcd-card) !important;
}
.jcd-upc--shadow .jcd-upc-card { box-shadow: 0 4px 14px rgba(0,0,0,.055); }
.jcd-upc-card h3,
.jcd-upc-card h3 a {
  color: var(--jcd-text) !important;
  opacity: 1 !important;
}
.jcd-upc-card__price { color: #2E692B !important; }
.jcd-upc-card__badges span {
  background: var(--jcd-accent) !important;
  color: #fff !important;
}
.jcd-upc-card__button,
.jcd-upc-card__button.button {
  background: #2E692B !important;
  color: #fff !important;
}
.jcd-upc-card__button:hover,
.jcd-upc-card__button.button:hover {
  background: var(--jcd-accent) !important;
  color: #fff !important;
}
.jcd-upc--custom {
  padding: 12px;
  background: var(--jcd-card);
  border-radius: var(--jcd-radius);
}
/* En teléfono las flechas pasan debajo de las tarjetas para no restarles ancho. */
@media (max-width: 700px) {
  .jcd-upc__viewport {
    grid-template-columns: minmax(0,1fr) 44px 44px minmax(0,1fr);
    column-gap: 8px;
    row-gap: 8px;
  }
  .jcd-upc__track {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .jcd-upc .jcd-upc__arrow {
    display: flex !important;
    grid-row: 2;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 25px !important;
  }
  .jcd-upc .jcd-upc__arrow--prev { grid-column: 2; }
  .jcd-upc .jcd-upc__arrow--next { grid-column: 3; }
}

/* ================================================================
   Carrusel Universal V1.2 — Precio legible en tarjetas compactas
   Las cifras de WooCommerce no deben partirse dentro de los centavos.
   Diseño compacto: foto y título arriba, precio y compra en fila inferior.
   ================================================================ */
.jcd-upc .jcd-upc-card__price,
.jcd-upc .jcd-upc-card__price * {
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.jcd-upc .jcd-upc-card__price .woocommerce-Price-amount,
.jcd-upc .jcd-upc-card__price .woocommerce-Price-amount bdi {
  display: inline-block;
  white-space: nowrap !important;
}
.jcd-layout-compact .jcd-upc-card {
  grid-template-columns: minmax(72px, 41%) minmax(0, 1fr) !important;
  grid-template-rows: minmax(90px, auto) auto;
  align-content: space-between;
  align-items: center;
  column-gap: 11px;
  row-gap: 8px;
  min-height: 160px;
  padding: 12px !important;
}
.jcd-layout-compact .jcd-upc-card__image {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  min-height: 84px;
}
.jcd-layout-compact .jcd-upc-card__body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 4px 0 !important;
  align-self: center;
}
.jcd-layout-compact .jcd-upc-card h3 {
  margin-bottom: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
.jcd-layout-compact .jcd-upc-card__footer {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding-top: 5px;
}
.jcd-layout-compact .jcd-upc-card__footer .jcd-upc-card__price {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  color: #2E692B !important;
}
.jcd-layout-compact .jcd-upc-card__footer .jcd-upc-card__button,
.jcd-layout-compact .jcd-upc-card__footer .jcd-upc-card__button.button {
  flex: 0 0 38px;
  justify-self: end;
  align-self: center;
  margin: 0 !important;
}
/* Los precios siguen siendo completos incluso cuando caben dos tarjetas
   por fila en pantallas pequeñas. Sólo se rompe el rango ENTRE importes. */
@media (max-width: 700px) {
  .jcd-layout-compact .jcd-upc-card__footer .jcd-upc-card__price {
    font-size: 12.5px;
  }
}