/* Product page colour picker (product-colours.js). */
.pdp-colours { margin: var(--sp-4) 0; }
.pdp-colours-label { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-3); }
.pdp-colours-label strong { color: var(--c-ink); font-weight: 650; }

.colour-options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.colour-option {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  width: 5.25rem; padding: .35rem .35rem .4rem; border-radius: var(--r-lg);
  border: 2px 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);
}
.colour-option:hover { border-color: var(--c-border-strong); color: var(--c-ink); text-decoration: none; transform: translateY(-2px); }
.colour-option:focus-visible { outline: none; box-shadow: var(--ring); }
.colour-option.is-current { border-color: var(--c-brand); box-shadow: var(--ring); }

.colour-thumb {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: calc(var(--r-lg) - 3px);
  /* No photo: the colour itself fills the tile. */
  background: var(--swatch, var(--c-surface-2));
}
.colour-thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--c-surface); }
.colour-name {
  display: flex; align-items: center; justify-content: center; gap: .3rem; max-width: 100%;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; text-align: center;
  /* Two-word colours ("Rose Gold", "Space Grey") wrap rather than being cut off. */
  overflow-wrap: anywhere;
}
.colour-dot {
  flex: none; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--swatch, var(--c-surface-3));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* Out of stock: still choosable (it may be reserved or enquired about), but marked. */
.colour-option.is-out .colour-thumb img { opacity: .45; }
.colour-option.is-out::after {
  content: "Out"; position: absolute; top: .45rem; right: .45rem;
  padding: 0 .3rem; border-radius: var(--r-sm);
  font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-ink-3); background: var(--c-surface-2);
}

/* The swap: the product area dims while the chosen colour loads, then settles in. */
[data-pdp-root] { transition: opacity .15s ease; }
[data-pdp-root].is-switching .pdp-summary > :not(.pdp-colours),
[data-pdp-root].is-switching .pdp-lower { opacity: .55; }
[data-pdp-root].is-switched .gallery-main img { animation: colourIn .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes colourIn { from { opacity: .4; transform: scale(.985); } to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
  .colour-option { width: 4.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .colour-option, [data-pdp-root] { transition: none; }
  .colour-option:hover { transform: none; }
  [data-pdp-root].is-switched .gallery-main img { animation: none; }
}

/* Viewing a listing with no colour of its own: nothing is marked, so the label asks. */
.pdp-colours-label strong:empty::before { content: "choose one"; color: var(--c-ink-3); font-weight: 400; }

/* One listing in several colours: the same tiles as the family picker, as radio buttons. */
.pdp-options { border: 0; padding: 0; min-width: 0; }
.pdp-options legend { float: none; width: auto; padding: 0; }
.pdp-options .colour-option { cursor: pointer; }
.pdp-options .colour-option:has(input:focus-visible) { box-shadow: var(--ring); }
.colour-options-error { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-danger); }
.add-to-cart .pdp-options { flex-basis: 100%; margin-top: 0; }
.pdp-summary .add-to-cart:has(.pdp-options) { flex-wrap: wrap; }