.juzz-vp-wrap{
  margin-top:6px; display:flex; flex-direction:column; gap:var(--juzz-vp-gap-y,6px);
  position:relative; padding:6px 0 2px;
}
.juzz-vp-row{ display:flex; align-items:center; gap:var(--juzz-vp-gap-x,6px); flex-wrap:wrap; }
.juzz-vp-label{ font-size:var(--juzz-vp-label-font,11px); opacity:.75; margin-right:2px; white-space:nowrap; }
.juzz-vp-terms{ display:flex; gap:var(--juzz-vp-gap-x,6px); flex-wrap:wrap; align-items:center; }
.juzz-vp-terms.juzz-vp-swipe{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:2px; }
/* Keep swipe-style (horizontal) pills on larger screens as well, matching mobile behavior. */
@media(min-width:768px){ .juzz-vp-terms.juzz-vp-swipe{ flex-wrap:nowrap; overflow-x:auto; } }

.juzz-vp-pill{
  border:1px solid var(--juzz-vp-pill-border,rgba(0,0,0,.12));
  background:var(--juzz-vp-pill-bg,#fff);
  color:var(--juzz-vp-pill-text,#111);
  font-size:var(--juzz-vp-pill-font,11px);
  padding:var(--juzz-vp-pill-py,3px) var(--juzz-vp-pill-px,8px);
  border-radius:var(--juzz-vp-pill-radius,999px);
  cursor:pointer; line-height:1.2; transition:all .15s ease; position:relative; white-space:nowrap;
}
.juzz-vp-pill.is-active{
  border-color:var(--juzz-vp-pill-active-border,#ff7b1a);
  color:var(--juzz-vp-pill-active-text,#ff7b1a);
  font-weight:600; box-shadow:0 0 0 1px var(--juzz-vp-pill-active-border,#ff7b1a) inset;
  background:var(--juzz-vp-pill-active-bg,#fff);
}
.juzz-vp-pill:hover{ border-color:var(--juzz-vp-pill-active-border,#ff7b1a); }

.juzz-vp-pill.is-swatch{
  width:var(--juzz-vp-swatch-size,22px); height:var(--juzz-vp-swatch-size,22px);
  padding:0; border-radius:999px; position:relative; background:var(--swatch,#ddd);
}
.juzz-vp-pill.is-swatch::after{ content:""; position:absolute; inset:4px; border-radius:999px; background:var(--swatch,#ddd); }
.juzz-vp-pill.is-swatch.is-active{
  box-shadow:0 0 0 2px var(--juzz-vp-pill-active-border,#ff7b1a);
  border-color:transparent;
}

.juzz-vp-more{
  font-size:11px; padding:2px 6px; border-radius:999px;
  background:var(--juzz-vp-more-bg,#f3f3f3);
  color:var(--juzz-vp-more-text,#111);
  border:1px solid var(--juzz-vp-more-border,rgba(0,0,0,0.06));
  text-decoration:none; white-space:nowrap; transition:all .15s ease;
}
.juzz-vp-more:hover{
  background:var(--juzz-vp-more-hover-bg,#ededed);
  color:var(--juzz-vp-more-hover-text,#111);
}

/* "More" trigger button (same look as the link version) */
.juzz-vp-open-trigger{ appearance:none; -webkit-appearance:none; }

/* Popup overlay (shown only after user interaction) */
.juzz-grid-card.juzz-vp-popup-open{ position:relative; z-index:6; overflow:visible !important; }
.juzz-vp-popup{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  /* Slightly wider than the original (by ~15px). */
  width: calc(100% - 20px + 15px);
  max-height:calc(100% - 20px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,0.18);
  /* Keep the popup above common theme overlays (e.g., full-card links) */
  z-index:2147483647;
  display:flex; flex-direction:column;
  overflow:hidden;
}

/*
  Some themes (and some grid builders) place an <a> overlay over the entire card.
  That can intercept taps/clicks and make the variation buttons appear "not clickable".
  While the popup is open, disable pointer events for underlying card links so the
  popup controls receive the interaction.
*/
.juzz-grid-card.juzz-vp-popup-open a{ pointer-events:none !important; }
.juzz-grid-card.juzz-vp-popup-open .juzz-vp-popup,
.juzz-grid-card.juzz-vp-popup-open .juzz-vp-popup *{ pointer-events:auto !important; }
.juzz-vp-popup-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.juzz-vp-popup-title{ font-size:13px; font-weight:700; }
.juzz-vp-popup-close{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  width:28px; height:28px;
  border-radius:999px;
  cursor:pointer;
  line-height:1;
  font-size:16px;
}
.juzz-vp-popup-body{ padding:10px 12px; overflow:auto; -webkit-overflow-scrolling:touch; }
.juzz-vp-popup-media{ display:flex; justify-content:center; padding:6px 0 10px; }
.juzz-vp-popup-thumb{ width:auto; max-width:100%; max-height:96px; object-fit:contain; border-radius:12px; }

.juzz-vp-popup-loading{ font-size:12px; font-weight:700; opacity:0.85; padding:10px 0; }
.juzz-vp-popup-foot{
  padding:10px 12px;
  border-top:1px solid rgba(0,0,0,0.06);
}
.juzz-vp-popup-price{
  font-weight:800;
  font-size:14px;
  line-height:1.2;
  margin:0 0 10px;
}
.juzz-vp-popup-price del{ opacity:0.65; margin-left:0; }
.juzz-vp-popup-add{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.12);
  background:var(--juzz-vp-ring,#111);
  border-color:var(--juzz-vp-ring,#111);
  color:#fff;
  cursor:pointer;
  font-weight:700;
  transition:filter .15s ease, opacity .15s ease;
}
.juzz-vp-popup-add:hover:not([disabled]){ filter:brightness(0.92); }
.juzz-vp-popup-add[disabled]{ opacity:.55; cursor:not-allowed; }

/* Compact bar */
.juzz-vp-wrap.is-compact .juzz-vp-compact-bar{
  width:100%; text-align:left; border:1px dashed rgba(0,0,0,0.15); background:#fff8f2;
  padding:6px 8px; border-radius:8px; font-size:12px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
}
.juzz-vp-wrap.is-compact{ padding-top:0; }
.juzz-vp-chevron{ opacity:.7; }

/* Outline around picker */
.juzz-vp-outline::before{
  content:""; position:absolute; inset:-2px; border-radius:10px;
  background:conic-gradient(from 0deg, transparent 0 20%, var(--juzz-vp-outline,#ff7b1a) 30%, transparent 40%);
  animation:juzz-vp-spin 2.2s linear infinite; z-index:-1; opacity:.55;
}
.juzz-vp-outline::after{ content:""; position:absolute; inset:0; border-radius:8px; background:#fff; z-index:-1; }
@keyframes juzz-vp-spin{ to { transform:rotate(360deg); } }

/* Moving ring on active pill */
.juzz-vp-pill-ring.is-active::before{
  content:""; position:absolute;
  inset:calc(-1 * var(--juzz-vp-ring-thickness,2px));
  border-radius:inherit;
  background:conic-gradient(from 0deg, var(--juzz-vp-ring,#ff7b1a), transparent 35%, var(--juzz-vp-ring,#ff7b1a) 70%, transparent);
  animation:juzz-vp-ring var(--juzz-vp-ring-speed,2.2s) linear infinite; z-index:-1; opacity:.9;
}
.juzz-vp-pill-ring.is-active::after{
  content:""; position:absolute; inset:0; border-radius:inherit; background:var(--juzz-vp-pill-active-bg,#fff); z-index:-1;
}
@keyframes juzz-vp-ring{ to { transform:rotate(360deg); } }

.juzz-vp-pill-anim.is-active{ animation:juzz-vp-pulse 1.5s ease-in-out infinite; }
@keyframes juzz-vp-pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.03);} }

/* Micro tags */
.juzz-vp-micro{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.juzz-vp-micro span{ font-size:10px; padding:2px 6px; border-radius:999px; background:#ffe9da; color:#b63e00; font-weight:600; }

/* Low stock badge */
.juzz-vp-low{
  margin-top:4px; font-size:10px; background:#fff1f1; color:#b00020; padding:2px 6px; border-radius:6px; width:max-content;
}

/* OOS */
.juzz-grid-cart .loading{ opacity:.6; pointer-events:none; }
.juzz-grid-cart a.juzz-vp-oos, .juzz-grid-cart button.juzz-vp-oos{
  opacity:var(--juzz-vp-oos-opacity,0.5); pointer-events:none;
}

/* Click-guard state */
.juzz-vp-wait{ position:relative; }
.juzz-vp-wait::after{
  content: attr(data-juzz-vp-loading);
  position:absolute; inset:0;
  background:rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:#111;
  border-radius:12px;
  z-index:10;
}
.juzz-vp-wait .juzz-vp-wait-btn{ pointer-events:none !important; opacity:.7; }

/* Added-to-cart toast */
.juzz-vp-toast{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:999999;
  background:#fff;
  border:1px solid var(--juzz-vp-ring,#ff7b1a);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 12px 30px rgba(0,0,0,0.14);
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(92vw, 380px);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.juzz-vp-toast.is-showing{ opacity:1; transform:translateY(0); pointer-events:auto; }
.juzz-vp-toast-msg{ font-size:13px; font-weight:600; color:#111; }
.juzz-vp-toast-title{ font-weight:700; }
.juzz-vp-toast-title{ font-weight:700; }
.juzz-vp-toast-link{
  font-size:13px;
  font-weight:700;
  color:var(--juzz-vp-ring,#ff7b1a);
  text-decoration:none;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
}
.juzz-vp-toast-link:hover{ background:rgba(255,123,26,0.08); }
.juzz-vp-toast-close{
  appearance:none;
  border:0;
  background:transparent;
  font-size:18px;
  line-height:1;
  padding:2px 6px;
  cursor:pointer;
  color:#555;
}
.juzz-vp-toast-close:hover{ color:#111; }

/* Price styling to match the storefront design (main price left + red; regular price right + grey). */
/* WooCommerce often wraps prices in .price; support both direct and wrapped markup. */
.juzz-grid-card .juzz-grid-price,
.juzz-grid-card .juzz-grid-price .price,
.juzz-vp-popup-price,
.juzz-vp-popup-price .price{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
}

/* Popup price: center the main price and keep the crossed price close to it (like the grid). */
.juzz-vp-popup-price,
.juzz-vp-popup-price .price{
  justify-content:center;
  gap:6px;
}

.juzz-grid-card .juzz-grid-price ins,
.juzz-vp-popup-price ins{
  order:1;
  color:#ff2d2d;
  font-weight:800;
  text-decoration:none;
  background:transparent;
}

.juzz-grid-card .juzz-grid-price del,
.juzz-vp-popup-price del{
  order:2;
  color:rgba(0,0,0,0.42);
  font-weight:600;
  font-size:0.92em;
}

/* Remove currency symbol from crossed-out price only. */
.juzz-grid-card .juzz-grid-price del .woocommerce-Price-currencySymbol,
.juzz-vp-popup-price del .woocommerce-Price-currencySymbol{ display:none; }

/* Non-sale price (and default amount color) */
.juzz-grid-card .juzz-grid-price .amount,
.juzz-vp-popup-price .amount{ color:#ff2d2d; font-weight:800; }

/* Ensure del price isn't styled like the main price */
.juzz-grid-card .juzz-grid-price del .amount,
.juzz-vp-popup-price del .amount{ color:rgba(0,0,0,0.42); font-weight:600; }