/* Product page version picker: one battery's Type-A / Type-B / Type-C or long and
   short cable listings (ProductVersions), swapped in place by product-colours.js.
   Each card carries what tells the versions apart: photo, price, stock and any
   figure that differs; the one being viewed is outlined in red with a check. */
.pdp-versions { margin: var(--sp-4) 0; }
.version-options { list-style: none; margin: 0; padding: .45rem .45rem 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.version-options > li { flex: 1 1 13rem; max-width: 17rem; }
.version-option {
  position: relative; display: flex; align-items: center; gap: .7rem; height: 100%;
  padding: .4rem .9rem .4rem .4rem; border-radius: var(--r-lg);
  border: 1.5px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
  text-decoration: none; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.version-option:hover { border-color: var(--c-border-strong); color: var(--c-ink); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-1); }
.version-option:focus-visible { outline: none; box-shadow: var(--ring); }
.version-option.is-current { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }

/* The version's own photo, so the connectors can be compared at a glance. */
.version-thumb {
  flex: none; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; overflow: hidden;
  border-radius: calc(var(--r-lg) - 4px); background: var(--c-surface-2);
}
.version-thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--c-surface); transition: transform .3s ease; }
.version-option:hover .version-thumb img { transform: scale(1.06); }

.version-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.version-name { font-weight: 750; font-size: var(--fs-base); line-height: 1.15; letter-spacing: -.01em; }
.version-price { font-family: var(--font-mono); font-weight: 650; font-size: var(--fs-sm); color: var(--c-ink); }
.version-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: var(--fs-xs); color: var(--c-ink-3); }
.version-stock { display: inline-flex; align-items: center; gap: .3rem; }
.version-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 0 3px var(--c-ok-soft); }
.version-fact { padding: 0 .35rem; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-ink-2); font-weight: 600; }

.version-check {
  position: absolute; top: -.45rem; right: -.45rem; display: grid; place-items: center;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--c-brand); color: var(--c-brand-ink);
  opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.version-check svg { width: .85rem; height: .85rem; }
.version-option.is-current .version-check { opacity: 1; transform: scale(1); }

/* Out of stock: still choosable (it can be enquired about), but quieter. */
.version-option.is-out { background: var(--c-surface-2); }
.version-option.is-out .version-thumb img { opacity: .5; }
.version-option.is-out .version-dot { background: var(--c-ink-3); box-shadow: none; }

.pdp-versions-hint { display: flex; align-items: flex-start; gap: .4rem; margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-ink-3); }
.pdp-versions-hint svg { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; color: var(--c-ink-3); }
.pdp-versions-hint strong { color: var(--c-brand-dark); }

@media (max-width: 575.98px) {
  .version-options > li { flex: 1 1 calc(50% - var(--sp-2)); max-width: none; }
  .version-option { flex-direction: column; align-items: flex-start; gap: .4rem; padding: .4rem .5rem .55rem; }
  .version-thumb { width: 100%; height: 4.5rem; }
}

/* The swap dims the page, not the picker being used. */
[data-pdp-root].is-switching .pdp-summary > .pdp-versions { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .version-option, .version-thumb img, .version-check { transition: none; }
  .version-option:hover { transform: none; }
  .version-option:hover .version-thumb img { transform: none; }
}