/* Labeling Productos 2.0 — etiquetas sobre la foto del producto (WooCommerce / WoodMart / bloques) */

/* Contenedores que hacen de «marco» para las etiquetas superpuestas */
.woocommerce-loop-product__link,
.product-image-link,
.wc-block-components-product-image,
.jjjl-host,
.jjjl-media { position: relative; }
.jjjl-media { display: block; }
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.wd-product-grid-item .product-image-wrapper { overflow: visible; }

.jjjl-set { display: block; }
.jjjl-bars { display: flex; flex-direction: column; width: 100%; position: relative; z-index: 6; }
.jjjl-over { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.jjjl-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }

/* ---------- Base ---------- */
.jjjl-l {
  --l-bg: #e74c3c; --l-fg: #fff; --l-fs: 12px;
  position: relative; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  background: var(--l-bg); color: var(--l-fg);
  font-size: var(--l-fs); font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  overflow: hidden; pointer-events: none;
  -webkit-font-smoothing: antialiased;
}
.jjjl-ico { font-style: normal; letter-spacing: 0; line-height: 1; }
.jjjl-t { overflow: hidden; text-overflow: ellipsis; }

/* ---------- 6 looks ---------- */

/* 1. Barra superior (la de la versión 1.x) */
.jjjl-sh-top-full { display: block; width: 100%; padding: .42em .7em; }
.jjjl-sh-top-full.jjjl-b-rounded { border-radius: .5em .5em 0 0; }
.jjjl-sh-top-full + .jjjl-sh-top-full { border-radius: 0; }
.jjjl-sh-top-full .jjjl-ico { margin-right: .35em; }

/* 2. Barra inferior, sobre la foto */
.jjjl-sh-bottom-full {
  display: block; width: 100%; padding: .5em .8em;
  background: color-mix(in srgb, var(--l-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.jjjl-sh-bottom-full.jjjl-b-rounded { border-radius: .6em .6em 0 0; }
.jjjl-sh-bottom-full .jjjl-ico { margin-right: .35em; }

/* 3. Chapa en la esquina */
.jjjl-sh-corner { position: absolute; top: .75em; padding: .42em .8em; border-radius: .25em; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.jjjl-sh-corner.jjjl-b-rounded { border-radius: 999px; }
.jjjl-sh-corner.jjjl-left  { left: .75em; }
.jjjl-sh-corner.jjjl-right { right: .75em; }

/* Dos etiquetas arriba: la de la derecha baja un poco */
.jjjl-sh-corner.jjjl-low { top: 3.1em; }
.jjjl-sh-flag.jjjl-low { top: 3.5em; }
.jjjl-sh-corner, .jjjl-sh-flag { max-width: calc(100% - 1.5em); }
.jjjl-sh-flag { max-width: calc(100% - .75em); }
.jjjl-l .jjjl-t { min-width: 0; }

/* 4. Banda diagonal */
.jjjl-sh-ribbon {
  position: absolute; top: 2.9em; width: 14em; padding: .42em 1.8em;
  text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,.2);
}
.jjjl-sh-ribbon.jjjl-left  { left: -3.4em; transform: rotate(-45deg); }
.jjjl-sh-ribbon.jjjl-right { right: -3.4em; transform: rotate(45deg); }

/* 5. Sello (redondo; con esquinas rectas, estrella) */
.jjjl-sh-circle {
  position: absolute; top: .55em; width: 5em; height: 5em; padding: .5em;
  flex-direction: column; gap: .1em; text-align: center; white-space: normal;
  line-height: 1.05; border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  outline: 2px dashed color-mix(in srgb, var(--l-fg) 55%, transparent); outline-offset: -.38em;
}
.jjjl-sh-circle .jjjl-t { overflow: visible; }
.jjjl-sh-circle.jjjl-left  { left: .55em; transform: rotate(-12deg); }
.jjjl-sh-circle.jjjl-right { right: .55em; transform: rotate(12deg); }
.jjjl-sh-circle.jjjl-b-straight {
  width: 5.6em; height: 5.6em; outline: 0; box-shadow: none; border-radius: 0;
  clip-path: polygon(50% 0%,61% 12%,75% 6%,79% 21%,94% 25%,88% 39%,100% 50%,88% 61%,94% 75%,79% 79%,75% 94%,61% 88%,50% 100%,39% 88%,25% 94%,21% 79%,6% 75%,12% 61%,0% 50%,12% 39%,6% 25%,21% 21%,25% 6%,39% 12%);
}

/* 6. Banderín lateral con la punta cortada */
.jjjl-sh-flag { position: absolute; top: 1em; padding: .48em 1.5em .48em .9em; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.jjjl-sh-flag.jjjl-left  { left: 0; clip-path: polygon(0 0,100% 0,calc(100% - .65em) 50%,100% 100%,0 100%); }
.jjjl-sh-flag.jjjl-right { right: 0; padding: .48em .9em .48em 1.5em; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,.65em 50%); }
.jjjl-sh-flag.jjjl-b-rounded.jjjl-left  { border-radius: 0 .4em .4em 0; }
.jjjl-sh-flag.jjjl-b-rounded.jjjl-right { border-radius: .4em 0 0 .4em; }

/* ---------- 7 acabados ---------- */
.jjjl-st-classic   { font-family: Arial, Helvetica, sans-serif; }
.jjjl-st-modern    { font-weight: 800; letter-spacing: .13em; }
.jjjl-st-bold      { font-family: Impact, 'Arial Narrow', 'Arial Black', sans-serif; font-weight: 900; font-style: italic; letter-spacing: .03em; box-shadow: inset 0 -.25em 0 rgba(0,0,0,.15); }
.jjjl-st-minimalist{ font-family: Georgia, 'Times New Roman', serif; font-weight: 400; text-transform: none; letter-spacing: .1em; }
.jjjl-st-minimalist.jjjl-sh-top-full, .jjjl-st-minimalist.jjjl-sh-bottom-full { border-bottom: 2px solid rgba(255,255,255,.5); }
.jjjl-st-ribbon    { border-top: 2px solid rgba(255,255,255,.35); border-bottom: 2px solid rgba(0,0,0,.18); }
.jjjl-st-gradient  { background: linear-gradient(135deg, color-mix(in srgb, var(--l-bg) 62%, #fff) 0%, var(--l-bg) 52%, color-mix(in srgb, var(--l-bg) 72%, #000) 100%); }
.jjjl-st-outline   { background: rgba(255,255,255,.94); color: var(--l-bg); box-shadow: inset 0 0 0 2px var(--l-bg); }
.jjjl-st-outline.jjjl-sh-circle { outline-color: color-mix(in srgb, var(--l-bg) 50%, transparent); }

/* ---------- Efectos ---------- */
.jjjl-fx-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: jjjl-shine 3.2s ease-in-out infinite;
}
@keyframes jjjl-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.jjjl-fx-pulse { animation: jjjl-pulse 1.8s ease-in-out infinite; }
@keyframes jjjl-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@media (prefers-reduced-motion: reduce) {
  .jjjl-fx-shine::after, .jjjl-fx-pulse { animation: none; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
  .jjjl-l { font-size: calc(var(--l-fs) * var(--jjjl-m, .85)); }
}

/* Ficha del producto */
.jjjl-ctx-single { position: static; }
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery .flex-viewport { position: relative; }
.jjjl-has-right .woocommerce-product-gallery__trigger { top: auto !important; bottom: .875em; }