/*
 * Variation swatches. This styles markup rendered client-side by YITH Color
 * and Label Variations (see class.yith-wccl-frontend.php), not markup the
 * theme generates — confirmed live via browser (task-5-report.md).
 *
 * Two selectors below deviate from the handoff brief after checking the
 * real DOM rather than trusting the brief's snippet (see report):
 *
 * 1. The 2x2 grid targets `.select_box_label.attribute_pa_tamanho`, not
 *    `.st-variations__options--label`. YITH replaces the native <select>
 *    in place and wraps its swatch buttons in a div carrying exactly those
 *    two classes (`select_box_label` for the "label" swatch type, plus
 *    `attribute_{attribute_name}` scoping it to one attribute) — verified
 *    live, `outerHTML` captured. Task 8's own add-to-cart template (not
 *    built yet) wraps the dropdown in `.st-variations__options` with no
 *    `--label` modifier, so that class would never exist regardless of
 *    which task lands first; the real YITH-generated wrapper is stable
 *    across whatever markup Task 8 ends up wrapping it in.
 *
 * 2. Out-of-stock / unavailable options carry the class `inactive` (and,
 *    only when the store's "Attribute style" setting is "Blur + Cross",
 *    `inactive_cross`) — never `disabled` or `out-of-stock`, which this
 *    plugin's JS does not add anywhere. Confirmed by marking a real
 *    variation out of stock and reading the swatch's className live. The
 *    strike-through below is keyed off `inactive` alone (not
 *    `inactive_cross`) so it renders regardless of that admin setting —
 *    this site's is unset (default "grey"), so `inactive_cross` never
 *    fires here today.
 */

.st-variations__row {
  display: grid;
  gap: 10px;
}

.st-variations__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--st-size-label);
  font-weight: var(--st-weight-bold);
}

/* --- Size: a 2x2 grid of rectangular buttons -------------------------- */

.select_box_label.attribute_pa_tamanho {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

[data-attr_name="attribute_pa_tamanho"].select_option_label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: var(--st-h-touch);
  min-height: 56px;
  padding: 12px 14px;
  background: var(--st-surface);
  border: var(--st-border-width) solid var(--st-ink);
  cursor: pointer;
  transition:
    background-color var(--st-transition),
    border-color var(--st-transition);
}

[data-attr_name="attribute_pa_tamanho"] .yith_wccl_value {
  font-size: var(--st-size-label);
  font-weight: var(--st-weight-bold);
  line-height: 1.2;
}

/* Task 6: each button's second line — that variation's own price, joined
   client-side from data-product_variations (see product.js). Plain text
   appended to .select_option_label, so it is picked up by the button's own
   accessible name along with the size label (see product.js's docblock on
   bindVariationPrices for why that is deliberate, not an oversight). */
.st-variations__price {
  color: var(--st-muted);
  font-size: var(--st-size-caption);
  font-weight: var(--st-weight-semibold);
}

[data-attr_name="attribute_pa_tamanho"].select_option_label.selected .st-variations__price {
  color: var(--st-accent-ink);
}

[data-attr_name="attribute_pa_tamanho"].select_option_label:hover,
[data-attr_name="attribute_pa_tamanho"].select_option_label:active {
  background: var(--st-accent-tint);
}

[data-attr_name="attribute_pa_tamanho"].select_option_label.selected {
  background: var(--st-accent-tint);
  border-color: var(--st-accent);
}

/* Unavailable stays visible and struck through — the handoff is explicit
   that unavailable variations are disabled, never hidden. Keyed off
   `.inactive` alone (see docblock above) so it shows regardless of the
   store's "Attribute style" setting. */
.select_option.inactive {
  position: relative;
  opacity: 0.45;
  cursor: not-allowed;
}

.select_option.inactive::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    var(--st-ink) calc(50% - 1px),
    var(--st-ink) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

@media (max-width: 599px) {
  [data-attr_name="attribute_pa_tamanho"].select_option_label {
    min-height: var(--st-h-touch);
  }
}

/* --- Fabric: a row of square colour swatches --------------------------
 *
 * `.select_box_colorpicker.attribute_pa_tecido` is the real flex-row
 * wrapper YITH renders for a colorpicker attribute — verified live
 * (task-7-report.md), the same way Task 5 found
 * `.select_box_label.attribute_pa_tamanho` for size. The brief's proposed
 * `.st-variations__options--colorpicker` never exists in the rendered DOM:
 * `.st-variations__options` (Task 8's own wrapper) carries no such
 * modifier — only YITH's own `yith_wccl_layout_inline` / `yith_wccl_is_custom`
 * classes sit alongside it.
 *
 * The swatch element itself carries both `select_option` (generic, shared
 * with size) and `select_option_colorpicker` (type-specific); the rules
 * below key off the type-specific class, mirroring the size section's own
 * `.select_option_label` scoping, so a future third swatch type cannot
 * collide with either.
 */

.select_box_colorpicker.attribute_pa_tecido {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

[data-attr_name="attribute_pa_tecido"].select_option_colorpicker {
  width: 54px;
  height: 54px;
  padding: 0;
  border: var(--st-border-width) solid var(--st-ink);
  cursor: pointer;
  transition:
    border-color var(--st-transition),
    outline-color var(--st-transition);
}

/*
 * The swatch colour lives two DOM levels down: YITH wraps the coloured
 * `<span class="yith_wccl_value">` (the seeded hex arrives as an inline
 * `background` style — see `_yith_wccl_value` term meta) inside its own
 * `<div class="yith_wccl_value_wrapper">`. Verified live: giving only
 * `.yith_wccl_value` width/height 100% renders it at 0 height, because a
 * percentage height only resolves against a containing block with an
 * explicit (non-auto) height, and `.yith_wccl_value_wrapper` has none of
 * its own by default — so the wrapper needs the same 100%/100% first, for
 * the span's own 100%/100% to have anything real to resolve against.
 */
[data-attr_name="attribute_pa_tecido"] .yith_wccl_value_wrapper {
  display: block;
  width: 100%;
  height: 100%;
}

[data-attr_name="attribute_pa_tecido"] .yith_wccl_value {
  display: block;
  width: 100%;
  height: 100%;
}

[data-attr_name="attribute_pa_tecido"].select_option_colorpicker:hover,
[data-attr_name="attribute_pa_tecido"].select_option_colorpicker:active {
  border-color: var(--st-accent);
}

/*
 * Selected: a 3px accent border plus a white ring drawn INSIDE the swatch.
 * The negative outline-offset is what pulls the ring inward — a positive
 * value would draw it outside and collide with the neighbouring swatch.
 */
[data-attr_name="attribute_pa_tecido"].select_option_colorpicker.selected {
  border: 3px solid var(--st-accent);
  outline: 2px solid var(--st-surface);
  outline-offset: -6px;
}

.st-variations__caption {
  color: var(--st-muted);
  font-size: var(--st-size-caption);
}

@media (max-width: 599px) {
  [data-attr_name="attribute_pa_tecido"].select_option_colorpicker {
    width: 48px;
    height: 48px;
  }
}

/* --- Quantity + add to cart (Task 8) ----------------------------------- */

.st-product__actions {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
}

.st-stepper {
  display: grid;
  grid-template-columns: var(--st-h-touch) 1fr var(--st-h-touch);
  align-items: stretch;
  height: 58px;
  border: var(--st-border-width) solid var(--st-ink);
}

.st-stepper__minus,
.st-stepper__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--st-h-touch);
  min-height: var(--st-h-touch);
  background: none;
  border: 0;
  color: var(--st-accent);
  cursor: pointer;
  transition: background-color var(--st-transition);
}

.st-stepper__minus { border-inline-end: var(--st-rule); }
.st-stepper__plus { border-inline-start: var(--st-rule); }

.st-stepper__minus:hover,
.st-stepper__minus:active,
.st-stepper__plus:hover,
.st-stepper__plus:active {
  background: var(--st-accent-tint);
}

.st-stepper input.qty {
  width: 100%;
  height: 100%;
  padding: 0;
  background: var(--st-surface);
  border: 0;
  font-weight: var(--st-weight-extrabold);
  text-align: center;
  appearance: textfield;
}

.st-product__actions .single_add_to_cart_button {
  min-height: 58px;
}

@media (max-width: 599px) {
  /* The fixed buy bar (Task 12) takes over; this row is hidden there. */
  .st-product__actions {
    display: none;
  }
}