/* AEYA PDP split test, arm V2 "The Mechanism".
   Everything here is namespaced to .aeya-pdp--mechanism. Shared classes live in
   aeya-pdp.css and are reused, never redefined globally. Where this file touches a
   shared class it does so only inside the arm namespace, and only for a reason that
   is written down next to the rule.

   Dominant mechanic: reason why copy, shown rather than asserted. So the two blocks
   that carry the argument, the annotated construction row and the macro proof
   sequence, get the design attention. They should read as a technical teardown set
   with restraint, not as a feature grid.

   Brand rules held here: left aligned, uppercase headings with wide tracking, navy
   text on a warm or washed ground, one surface pairing per band. */

.aeya-pdp--mechanism {
  /* Hairline used for every rule in this arm. The teardown look is built from
     hairlines and numbers, not from cards and shadows. */
  --mech-rule: rgba(8, 22, 51, 0.18);
  --mech-rule-strong: rgba(8, 22, 51, 0.32);
  --mech-ground: rgba(8, 22, 51, 0.04);
  --mech-frame-radius: var(--aeya-radius-card, 4px);
  --mech-touch: 2.75rem; /* 44px, the minimum touch target for this arm */
  --mech-macro-ratio: 4 / 5;
}

/* Cloud on navy inversion. Only the hairline tokens change, so every rule below
   works on both surfaces without being written twice. */
.aeya-pdp--mechanism .aeya-band--inverse {
  --mech-rule: rgba(255, 251, 244, 0.26);
  --mech-rule-strong: rgba(255, 251, 244, 0.45);
  --mech-ground: rgba(255, 251, 244, 0.06);
}

.aeya-pdp--mechanism :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.aeya-mech-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Buy box ----------
   Spec first framing: the eyebrow carries the provenance line, and a hairline sits
   under the price so the buy box reads as the head of a spec sheet. */

.aeya-pdp--mechanism .aeya-pdp__buybox--sticky {
  padding-block-start: var(--aeya-space-xs, 0.5rem);
}

.aeya-pdp--mechanism .aeya-price {
  padding-block-end: var(--aeya-space-lg, 1.25rem);
  border-block-end: 1px solid var(--mech-rule);
}

/* The shared swatch is 32px. This arm is touch led, so inside the arm only it is
   raised to the 44px target. The shared rule is untouched for the other arms. */
.aeya-pdp--mechanism .aeya-swatch {
  display: inline-block;
  inline-size: var(--mech-touch);
  block-size: var(--mech-touch);
  background-color: var(--aeya-swatch-fill, transparent);
  background-image: var(--aeya-swatch-image, none);
  background-size: cover;
  background-position: center;
}

.aeya-pdp--mechanism .aeya-swatch[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.aeya-mech-nojs {
  margin-block-start: var(--aeya-space-md, 0.8rem);
}

.aeya-mech-nojs select {
  inline-size: 100%;
  min-block-size: var(--mech-touch);
  padding: var(--aeya-input-pad, 0.8rem);
  border: 1px solid var(--mech-rule-strong);
  border-radius: var(--aeya-radius-input, 4px);
  background: transparent;
  color: inherit;
  font-family: var(--aeya-font);
  font-size: var(--aeya-size-sm, 0.875rem);
}

.aeya-mech-atb-wrap {
  margin-block-start: var(--aeya-space-lg, 1rem);
}

/* ---------- Gallery ----------
   Every frame is rendered into the DOM and stacked. Swapping is an opacity change
   between two images that are already decoded, so a colour change never shows a
   white flash and never reloads. With CSS present but JS broken the frame Liquid
   marked active stays visible, because the active flag is set server side. */

.aeya-pdp--mechanism .aeya-gallery__main {
  position: relative;
}

.aeya-pdp--mechanism .aeya-mech-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--aeya-motion-fast, 0.298s) ease;
}

.aeya-pdp--mechanism .aeya-mech-frame[data-aeya-active='true'] {
  opacity: 1;
}

.aeya-pdp--mechanism .aeya-mech-frame img,
.aeya-pdp--mechanism .aeya-mech-frame svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.aeya-pdp--mechanism .aeya-gallery__thumbs button {
  min-block-size: var(--mech-touch);
}

/* ---------- Band rhythm ---------- */

.aeya-pdp--mechanism .aeya-band__inner > .aeya-eyebrow {
  margin-block-end: var(--aeya-space-xs, 0.5rem);
}

.aeya-mech-lede {
  max-width: 34em;
  opacity: 0.85;
}

/* ---------- 8. Annotated construction row ----------
   The centrepiece. One claim per column: a macro frame with a numbered marker
   dropped on the exact part of the garment being claimed, a hairline leader running
   from that marker to the note below, then the number again beside the label. The
   marker position is a merchandiser setting, so the annotation points at the thing
   rather than floating near it. */

.aeya-mech-claims {
  list-style: none;
  margin: var(--aeya-space-4xl, 2rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  grid-template-columns: 1fr;
}

@media screen and (min-width: 600px) {
  .aeya-mech-claims {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 990px) {
  .aeya-mech-claims {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.aeya-mech-claim {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.aeya-mech-claim__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--mech-frame-radius);
  background: var(--mech-ground);
}

.aeya-mech-claim__frame img,
.aeya-mech-claim__frame svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.aeya-mech-claim__leader {
  position: absolute;
  inset-inline-start: var(--mech-x, 50%);
  inset-block-start: var(--mech-y, 50%);
  inset-block-end: 0;
  inline-size: 1px;
  background: var(--aeya-cloud, #fffbf4);
  box-shadow: 0 0 0 0.5px rgba(8, 22, 51, 0.28);
  opacity: 0.8;
}

.aeya-mech-claim__marker {
  position: absolute;
  inset-inline-start: var(--mech-x, 50%);
  inset-block-start: var(--mech-y, 50%);
  transform: translate(-50%, -50%);
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--aeya-cloud, #fffbf4);
  color: var(--aeya-navy, #081633);
  font-size: var(--aeya-size-3xs, 0.625rem);
  font-weight: var(--aeya-weight-subheading, 500);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  box-shadow: 0 0 0 1px rgba(8, 22, 51, 0.3);
}

.aeya-mech-claim__note {
  margin-block-start: var(--aeya-space-md, 0.8rem);
  padding-block-start: var(--aeya-space-sm, 0.7rem);
  border-block-start: 1px solid var(--mech-rule);
  display: grid;
  gap: var(--aeya-space-2xs, 0.25rem);
}

.aeya-mech-claim__meta {
  display: flex;
  align-items: center;
  gap: var(--aeya-space-xs, 0.5rem);
  min-block-size: 1.25rem;
}

.aeya-mech-claim__index {
  font-size: var(--aeya-size-3xs, 0.625rem);
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  opacity: 0.6;
}

.aeya-mech-claim__icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  display: block;
  opacity: 0.75;
}

.aeya-mech-claim__label {
  margin: 0;
  font-size: var(--aeya-size-2xs, 0.75rem);
  font-weight: var(--aeya-weight-subheading, 500);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
}

.aeya-mech-claim__copy {
  margin: 0;
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.5;
  opacity: 0.85;
  max-width: 26em;
}

/* ---------- 9. Macro proof sequence ----------
   Large close range frames on navy, read as a numbered sequence rather than a
   gallery. Rail, frame, caption. The caption names the subject first, because the
   point of the sequence is that the claim and the photograph are the same object. */

.aeya-mech-macro__seq {
  list-style: none;
  margin: var(--aeya-space-4xl, 2rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}

.aeya-mech-macro__frame {
  display: grid;
  gap: var(--aeya-space-lg, 1rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media screen and (min-width: 990px) {
  .aeya-mech-macro__frame {
    grid-template-columns: 4.5rem minmax(0, 1.75fr) minmax(13rem, 0.7fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

.aeya-mech-macro__rail {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--aeya-space-xs, 0.5rem);
  font-size: var(--aeya-size-3xs, 0.625rem);
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  text-transform: uppercase;
  opacity: 0.65;
}

@media screen and (min-width: 990px) {
  .aeya-mech-macro__rail {
    flex-direction: column;
    gap: var(--aeya-space-3xs, 0.125rem);
    padding-block-start: var(--aeya-space-xs, 0.5rem);
    border-block-start: 1px solid var(--mech-rule-strong);
  }
}

.aeya-mech-macro__num {
  font-size: var(--aeya-size-sm, 0.875rem);
  opacity: 1;
}

.aeya-mech-macro__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--mech-frame-radius);
  background: var(--mech-ground);
  aspect-ratio: var(--mech-macro-ratio, 4 / 5);
}

.aeya-mech-macro__media img,
.aeya-mech-macro__media svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.aeya-mech-macro__caption {
  margin: 0;
  padding-block-start: var(--aeya-space-sm, 0.7rem);
  border-block-start: 1px solid var(--mech-rule);
  display: grid;
  gap: var(--aeya-space-xs, 0.5rem);
  text-align: left;
}

.aeya-mech-macro__subject {
  font-size: var(--aeya-size-2xs, 0.75rem);
  font-weight: var(--aeya-weight-subheading, 500);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
}

.aeya-mech-macro__text {
  margin: 0;
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.55;
  opacity: 0.85;
}

/* ---------- 10 and 11. Composition and fit ----------
   A spec list, not a paragraph. Every row is a section setting and an empty setting
   removes its row, so a placeholder can never be mistaken for a measured figure. */

.aeya-mech-spec {
  margin: var(--aeya-space-2xl, 1.5rem) 0 0;
  max-width: 46rem;
}

.aeya-mech-spec__row {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: var(--aeya-space-lg, 1rem);
  padding-block: var(--aeya-space-sm, 0.7rem);
  border-block-end: 1px solid var(--mech-rule);
}

.aeya-mech-spec__row:first-child {
  border-block-start: 1px solid var(--mech-rule);
}

.aeya-mech-spec__key {
  margin: 0;
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  opacity: 0.65;
}

.aeya-mech-spec__value {
  margin: 0;
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.5;
}

/* ---------- 12. Reviews, demoted to last ----------
   Proof in this arm is provenance and construction. Reviews still carry weight, so
   they are set quietly at the foot rather than removed. */

.aeya-mech-rating {
  display: flex;
  align-items: baseline;
  gap: var(--aeya-space-sm, 0.7rem);
  margin: 0 0 var(--aeya-space-2xl, 1.5rem);
}

.aeya-mech-rating__count {
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  opacity: 0.65;
}

.aeya-pdp--mechanism .aeya-review {
  border-color: var(--mech-rule);
  background: var(--mech-ground);
}

.aeya-mech-verified {
  font-size: var(--aeya-size-3xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  opacity: 0.6;
}