/**
 * jz-variant-ux.css — SHOPLINE SLine theme "3.0" product-page UX fixes
 * Companion to assets/jz-variant-ux.js. Additive only.
 *
 * 1) Unavailable option marking: greyed + strikethrough + not-allowed,
 *    while leaving the theme's :checked highlight fully intact.
 * 2) Fallback toast, shown only if the theme's inline product-form error
 *    slot is absent.
 */

/* ---------------------------------------------------------------------------
 * 1. Sold-out option values
 *    Class is applied by JS to the <label> that follows the (still enabled)
 *    radio input, so click-to-switch behaviour is preserved.
 * ------------------------------------------------------------------------- */
.product-form__input input[type="radio"] + label.jz-sold-out {
  cursor: not-allowed;
}

/* Keep the theme's selected (checked) styling: only dim UNCHECKED values.
   NOTE: :checked must be tested on the <input>, never on the <label> —
   a label can never match :checked, so `label:not(:checked)` would always
   dim the option and would also dim the selected highlight. */
.product-form__input input[type="radio"]:not(:checked) + label.jz-sold-out {
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Suppress the hover ring on a value that cannot be bought. */
.product-form__input input[type="radio"]:not(:checked) + label.jz-sold-out:hover::after,
.product-form__input input[type="radio"]:not(:checked) + label.jz-sold-out:focus::after {
  border-color: transparent;
}

/* Image swatches: the strike-through sits mid-square, so dim only + tooltip. */
.product-form__input input[type="radio"]:not(:checked) + label.jz-sold-out.variant-image__wrapper {
  text-decoration: none;
}

/* <select> picker fallback (picker_type != "flatten"). */
select option.jz-sold-out {
  color: rgba(var(--color-text), 0.4);
}

/* ---------------------------------------------------------------------------
 * 2. Fallback toast — only mounted by JS when no inline error slot exists.
 *    Uses the theme's own colour variables so it matches the storefront.
 * ------------------------------------------------------------------------- */
#jz-variant-ux-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9999;
  max-width: min(90vw, 420px);
  padding: 12px 18px;
  border-radius: var(--sku-selector-border-radius, 6px);
  background-color: rgba(var(--color-text));
  color: rgb(var(--color-page-background));
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, 12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

#jz-variant-ux-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}