/**
 * ZZB Shop — WooCommerce overrides and variant pills.
 *
 * CRITICAL: hides original WC variation selects and reset link
 * because variant-pills.js renders our own pills in their place.
 * Without this rule the user sees TWO sets of pickers.
 */

/* ---------- HIDE WC ORIGINAL VARIANT SELECTORS ----------
 * Gated on `zzb-pills-ready` (set by variant-pills.js after pills render successfully).
 * If JS fails, the original selects remain visible — customers can still buy.
 * Robust: hides EVERY direct child of .variations td.value except the .zzb-variant-pills wrapper.
 * That covers stock <select>, Select2 (.select2-container), Selectric (.selectric-wrapper),
 * and most third-party variation-swatch plugins. */
body.zzb-theme.zzb-pills-ready .variations td.value > *:not(.zzb-variant-pills) {
  display: none !important;
}
body.zzb-theme.zzb-pills-ready .variations .reset_variations,
body.zzb-theme.zzb-pills-ready .variations_form .reset_variations {
  display: none !important;
}

/* The <td class="value"> wraps the (now hidden) select + our pills */
body.zzb-theme .variations td.value {
  padding: 0;
  border: 0;
  background: transparent;
}

/* The <th class="label"> contains attribute name */
body.zzb-theme .variations th.label {
  padding: 0 0 var(--space-2);
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--zzb-ink);
  letter-spacing: var(--tracking-wide);
}
body.zzb-theme .variations th.label label {
  color: var(--zzb-ink);
  font-weight: var(--fw-medium);
}

body.zzb-theme .variations,
body.zzb-theme .variations tbody,
body.zzb-theme .variations tr {
  display: block;
}
body.zzb-theme .variations tr {
  margin-bottom: var(--space-6);
}

/* ---------- VARIANT PILLS ---------- */

.zzb-variant-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.zzb-variant-pill {
  position: relative;
  background: var(--zzb-paper);
  border: 1.5px solid var(--zzb-gold-200);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--zzb-ink);
  min-width: 64px;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  line-height: 1.2;
}

/* Color-swatch variant — gives left padding for the swatch dot */
.zzb-variant-pill[data-color="1"] {
  padding-left: 38px;
}
.zzb-variant-pill[data-color="1"]::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--swatch-color, #ddd);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: border var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.zzb-variant-pill:hover {
  background: var(--zzb-gold-50);
  border-color: var(--zzb-gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.zzb-variant-pill.is-active {
  background: var(--zzb-ink);
  border-color: var(--zzb-ink);
  color: #fff;
  box-shadow: var(--shadow-md);
  animation: zzb-pill-pop var(--dur-base) var(--ease-spring);
}
.zzb-variant-pill.is-active[data-color="1"]::before {
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--zzb-ink);
}

@keyframes zzb-pill-pop {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1);    }
}

.zzb-variant-pill.is-disabled {
  background: var(--zzb-cream-soft);
  border: 1.5px dashed var(--zzb-muted-warm);
  color: var(--zzb-muted);
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--zzb-muted-warm);
}
.zzb-variant-pill.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ---------- WC PRICE & ADD-TO-CART STYLING ---------- */

body.zzb-theme .price,
body.zzb-theme .woocommerce-Price-amount {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--zzb-ink);
  font-variant-numeric: tabular-nums;
}
body.zzb-theme del .woocommerce-Price-amount {
  color: var(--zzb-muted);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
}
body.zzb-theme ins {
  background: transparent;
  text-decoration: none;
}

/* Single product add to cart button.
 * !important kept only on background/border/box-shadow which WC and several
 * Blocksy variations set inline. Other properties win on specificity alone. */
body.zzb-theme .single_add_to_cart_button,
body.zzb-theme button.single_add_to_cart_button {
  background: var(--zzb-gradient-gold) !important;
  color: #fff;
  border: 0 !important;
  border-radius: var(--radius-pill);
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  box-shadow: var(--shadow-gold) !important;
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-spring);
}
body.zzb-theme .single_add_to_cart_button:hover {
  transform: scale(1.02) translateY(-1px);
  background: linear-gradient(180deg, #a18a4d 0%, #c9a463 50%, #d4b674 100%) !important;
}

/* Quantity stepper */
body.zzb-theme .quantity {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--zzb-gold-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--zzb-paper);
}
body.zzb-theme .quantity input.qty {
  border: 0 !important;
  background: transparent !important;
  width: 56px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  color: var(--zzb-ink);
  padding: 12px 4px;
  box-shadow: none !important;
}
body.zzb-theme .quantity input.qty:focus {
  outline: 0;
  box-shadow: 0 0 0 2px var(--zzb-gold-shadow) !important;
}

/* Reset variations link (we hide it; if it shows in legacy view, style it) */
body.zzb-theme .reset_variations {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--zzb-gold-deep);
  margin-top: var(--space-2);
  display: inline-block;
}

/* Stock + meta */
body.zzb-theme .stock,
body.zzb-theme .product_meta {
  font-size: var(--fs-sm);
  color: var(--zzb-muted);
}
body.zzb-theme .stock.in-stock {
  color: var(--zzb-success);
}
body.zzb-theme .stock.out-of-stock {
  color: var(--zzb-danger);
}

/* WC archive product cards (basic — full redesign in Etap 6) */
body.zzb-theme ul.products li.product .price {
  color: var(--zzb-ink);
}
body.zzb-theme ul.products li.product img {
  border-radius: var(--radius-md);
}
body.zzb-theme ul.products li.product .button {
  background: var(--zzb-paper) !important;
  color: var(--zzb-ink);
  border: 1.5px solid var(--zzb-gold-200) !important;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
body.zzb-theme ul.products li.product .button:hover {
  background: var(--zzb-gold-50) !important;
  border-color: var(--zzb-gold) !important;
}

/* ---------- WOOCOMMERCE VARIATION SWATCHES PLUGIN INTEGRATION ----------
 * The plugin renders <ul class="variable-items-wrapper"> with <li class="variable-item">
 * for each option. We restyle the plugin's output to match our pill design system
 * (round, gold border, navy active state) instead of injecting our own pills.
 * Our variant-pills.js detects the plugin via body class and skips injection. */

/* Wrapper layout: flex pills (defensive — plugin/theme often forces grid) */
body.zzb-theme .variable-items-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: var(--space-2) !important;
  padding: 0 !important;
  margin: var(--space-2) 0 0 !important;
  list-style: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Each pill */
body.zzb-theme .variable-items-wrapper .variable-item,
body.zzb-theme .variable-items-wrapper .button-variable-item {
  position: relative;
  background: var(--zzb-paper) !important;
  border: 1.5px solid var(--zzb-gold-200) !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 22px !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--zzb-ink) !important;
  min-width: 64px;
  min-height: auto !important;
  width: auto !important;
  height: auto !important;
  text-align: center;
  cursor: pointer;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* Reset plugin's inner contents wrapper */
body.zzb-theme .variable-items-wrapper .variable-item-contents {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block;
}
body.zzb-theme .variable-items-wrapper .variable-item-span,
body.zzb-theme .variable-items-wrapper .variable-item-span-button {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: inherit !important;
  background: transparent !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hover state */
body.zzb-theme .variable-items-wrapper .variable-item:not(.disabled):not([disabled]):hover,
body.zzb-theme .variable-items-wrapper .variable-item:not(.disabled):not([disabled]).wvs-hover {
  background: var(--zzb-gold-50) !important;
  border-color: var(--zzb-gold) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm) !important;
}

/* Active (selected) state — aria-checked="true" or .selected.
   Use a gold pill so it matches the rest of the brand palette and lets
   the per-color dot (rendered via ::before) stay visible. */
body.zzb-theme .variable-items-wrapper .variable-item[aria-checked="true"],
body.zzb-theme .variable-items-wrapper .variable-item.selected {
  background: var(--zzb-gold-light) !important;
  border-color: var(--zzb-gold-dark) !important;
  border-width: 2px !important;
  color: var(--zzb-ink) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 3px var(--zzb-gold-shadow, rgba(212,175,55,0.18)), var(--shadow-md) !important;
  transform: translateY(-1px);
  animation: zzb-pill-pop var(--dur-base) var(--ease-spring);
}
/* Make sure the color-dot pseudo stays on top of the gold background. */
body.zzb-theme .variable-items-wrapper .variable-item[aria-checked="true"]::before,
body.zzb-theme .variable-items-wrapper .variable-item.selected::before {
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,0.25) !important;
  z-index: 1;
}

/* Disabled state — when variation combination is unavailable */
body.zzb-theme .variable-items-wrapper .variable-item.disabled,
body.zzb-theme .variable-items-wrapper .variable-item[disabled] {
  background: var(--zzb-cream-soft) !important;
  border: 1.5px dashed var(--zzb-muted-warm) !important;
  color: var(--zzb-muted) !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  text-decoration: line-through;
  text-decoration-color: var(--zzb-muted-warm);
}
body.zzb-theme .variable-items-wrapper .variable-item.disabled:hover {
  transform: none;
  box-shadow: none !important;
}

/* Color swatches via Polish color name → hex CSS map.
 * The plugin renders a class .button-variable-item-{slug} on each item.
 * We add a left-side color dot using ::before pseudo. */
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-czarny"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-bialy"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-czerwony"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-azalia"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-krolewski"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-jasny-zolty"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-szary-melanz"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-szarosc-sportowa"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-granatowy"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-jasny-niebieski"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-niebieski"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-grafitowy"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-zielen-irlandzka"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-irlandzka-zielen"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-lesna-zielen"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-rozowy"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-bordowy"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-lawendowy"],
/* Kamienie / minerały — substring rdzenia łapie różne formy odmiany w slugu */
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="kwarc"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="krysztal"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="tygrys"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="agat"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="ametyst"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="jadeit"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="opal"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="turkus"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="koral"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="bursztyn"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="perla"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="lapis"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="onyks"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="malachit"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="rubin"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="szafir"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="szmaragd"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="awenturyn"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="cytryn"],
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="hematyt"] {
  padding-left: 38px !important;
}

body.zzb-theme .variable-items-wrapper [class*="button-variable-item-czarny"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-bialy"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-czerwony"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-azalia"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-krolewski"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-jasny-zolty"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-szary-melanz"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-szarosc-sportowa"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-granatowy"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-jasny-niebieski"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-niebieski"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-grafitowy"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-zielen-irlandzka"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-irlandzka-zielen"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-lesna-zielen"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-rozowy"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-bordowy"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-lawendowy"]::before,
/* Kamienie / minerały — kropki z kolorami */
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="kwarc"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="krysztal"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="tygrys"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="agat"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="ametyst"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="jadeit"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="opal"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="turkus"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="koral"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="bursztyn"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="perla"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="lapis"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="onyks"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="malachit"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="rubin"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="szafir"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="szmaragd"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="awenturyn"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="cytryn"]::before,
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="hematyt"]::before {
  content: '' !important;
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  display: block !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: var(--swatch-color, #ddd) !important;
  background-image: none !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* The WVS plugin (or its tooltip JS) hides the ::before swatch by
     default — force it visible. */
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

/* Per-color swatch values */
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-czarny"]::before          { --swatch-color: #1a1a1a; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-bialy"]::before           { --swatch-color: #fafafa; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-czerwony"]::before        { --swatch-color: #c0392b; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-azalia"]::before          { --swatch-color: #d63384; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-krolewski"]::before       { --swatch-color: #2c5aa8; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-jasny-zolty"]::before     { --swatch-color: #f4d03f; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-szary-melanz"]::before    { --swatch-color: #95a5a6; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-szarosc-sportowa"]::before{ --swatch-color: #7f8c8d; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-granatowy"]::before       { --swatch-color: #1e3a8a; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-jasny-niebieski"]::before { --swatch-color: #85b4d6; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-niebieski"]::before       { --swatch-color: #3b82f6; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-grafitowy"]::before       { --swatch-color: #36454f; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-zielen-irlandzka"]::before{ --swatch-color: #1c6e3a; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-irlandzka-zielen"]::before{ --swatch-color: #1c6e3a; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-lesna-zielen"]::before    { --swatch-color: #2d5016; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-rozowy"]::before          { --swatch-color: #ffb3c1; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-bordowy"]::before         { --swatch-color: #722f37; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-lawendowy"]::before       { --swatch-color: #967bb6; }

/* Per-stone swatch values (kamienie / minerały) */
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="kwarc"]::before     { --swatch-color: #f4c2d2; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="krysztal"]::before  { --swatch-color: #e6f0f3; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="tygrys"]::before    { --swatch-color: #b87333; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="agat"]::before      { --swatch-color: #1a1a1a; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="ametyst"]::before   { --swatch-color: #9966cc; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="jadeit"]::before    { --swatch-color: #00a86b; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="opal"]::before      { --swatch-color: #e6e6fa; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="turkus"]::before    { --swatch-color: #40e0d0; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="koral"]::before     { --swatch-color: #ff7f50; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="bursztyn"]::before  { --swatch-color: #ffbf00; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="perla"]::before     { --swatch-color: #f5f5dd; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="lapis"]::before     { --swatch-color: #26619c; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="onyks"]::before     { --swatch-color: #353935; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="malachit"]::before  { --swatch-color: #0bda51; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="rubin"]::before     { --swatch-color: #e0115f; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="szafir"]::before    { --swatch-color: #0f52ba; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="szmaragd"]::before  { --swatch-color: #50c878; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="awenturyn"]::before { --swatch-color: #a4d65e; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="cytryn"]::before    { --swatch-color: #e4d00a; }
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][class*="hematyt"]::before   { --swatch-color: #454f56; }

/* Active swatch — white border ring inside */
body.zzb-theme .variable-items-wrapper [class*="button-variable-item-"][aria-checked="true"]::before {
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--zzb-ink);
}