/* Product colour + shoe size pickers (single product page)
   State styling is built on adjacent/child sibling selectors so a selected
   option always renders correctly; :has() only adds the chip outline.

   Layout note: the theme renders the buy area as `form.cart` -- a
   non-wrapping flex row with `align-items: stretch`. As an ordinary flex
   item the picker would share that single line with the quantity field and
   the button, and would stretch both of them to its own height (a very tall
   button). Letting the row wrap, and giving the picker a full-width basis,
   puts the options on their own line: options -> quantity -> button. */
.gandi-product-page form.cart {
  flex-wrap: wrap;
}

.gandi-product-page form.cart > .gandi-product-options {
  flex: 1 0 100%;
  margin-block: 0;
}

.gandi-shiraz-theme .gandi-product-options {
  display: grid;
  gap: 1.1rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--gandi-surface-soft);
  border: 1px solid var(--gandi-border);
  border-radius: var(--gandi-radius-md);
}

.gandi-shiraz-theme .gandi-option-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.gandi-shiraz-theme .gandi-option-group__legend {
  display: inline-flex;
  gap: 0.3rem;
  align-items: baseline;
  margin: 0 0 0.7rem;
  padding: 0;
  color: var(--gandi-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
}

.gandi-shiraz-theme .gandi-option-group__required {
  color: var(--gandi-danger);
  font-size: 0.9rem;
}

/* Visually hidden native inputs (still focusable and required-checked) */
.gandi-shiraz-theme .gandi-swatch__input,
.gandi-shiraz-theme .gandi-size__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Colours */
.gandi-shiraz-theme .gandi-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gandi-shiraz-theme .gandi-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  background: var(--gandi-surface);
  border: 1px solid var(--gandi-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gandi-shiraz-theme .gandi-swatch:hover {
  border-color: var(--gandi-border-strong);
}

.gandi-shiraz-theme .gandi-swatch__dot {
  width: 1.15rem;
  height: 1.15rem;
  background: var(--gandi-swatch, var(--gandi-camel-soft));
  border: 1px solid var(--gandi-border-strong);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--gandi-surface);
}

.gandi-shiraz-theme .gandi-swatch__label {
  color: var(--gandi-text);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Selected colour: wine label + ring around the swatch (no :has() needed) */
.gandi-shiraz-theme .gandi-swatch__input:checked ~ .gandi-swatch__label {
  color: var(--gandi-wine);
  font-weight: 700;
}

.gandi-shiraz-theme .gandi-swatch__input:checked ~ .gandi-swatch__dot {
  border-color: var(--gandi-wine);
  box-shadow: inset 0 0 0 2px var(--gandi-surface), 0 0 0 2px var(--gandi-wine);
}

.gandi-shiraz-theme .gandi-swatch__input:focus-visible ~ .gandi-swatch__dot {
  outline: 2px solid var(--gandi-focus);
  outline-offset: 3px;
}

/* Shoe sizes — the pill lives on the sibling span so its state is
   independent of :has() support */
.gandi-shiraz-theme .gandi-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gandi-shiraz-theme .gandi-size {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.gandi-shiraz-theme .gandi-size__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.45rem 0.7rem;
  color: var(--gandi-text);
  background: var(--gandi-surface);
  border: 1px solid var(--gandi-border);
  border-radius: var(--gandi-radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.gandi-shiraz-theme .gandi-size:hover .gandi-size__label {
  border-color: var(--gandi-border-strong);
}

.gandi-shiraz-theme .gandi-size__input:checked ~ .gandi-size__label {
  color: var(--gandi-white);
  background: var(--gandi-wine);
  border-color: var(--gandi-wine);
}

.gandi-shiraz-theme .gandi-size__input:focus-visible ~ .gandi-size__label {
  outline: 2px solid var(--gandi-focus);
  outline-offset: 2px;
}

.gandi-shiraz-theme .gandi-size__input:disabled ~ .gandi-size__label {
  color: var(--gandi-muted);
  text-decoration: line-through;
}

/* Progressive enhancement: outline the whole chip when supported */
@supports selector(:has(*)) {
  .gandi-shiraz-theme .gandi-swatch:has(.gandi-swatch__input:checked) {
    border-color: var(--gandi-wine);
    box-shadow: 0 0 0 1px var(--gandi-wine);
  }
}

@media screen and (max-width: 600px) {
  .gandi-shiraz-theme .gandi-product-options {
    gap: 0.9rem;
    padding: 0.85rem 0.9rem;
  }

  .gandi-shiraz-theme .gandi-size__label {
    min-width: 2.7rem;
  }
}