/* AEYA PDP split test, arm V6 SPEC SHEET.

   Arm specific rules only. Everything shared lives in aeya-tokens.css and aeya-pdp.css
   and is reused rather than restated here: .aeya-pdp, .aeya-pdp__layout, .aeya-eyebrow,
   .aeya-title, .aeya-title__serif, .aeya-section-heading, .aeya-price, .aeya-field,
   .aeya-sizes, .aeya-size, .aeya-atb, .aeya-atb--outlined, .aeya-quiet-lines,
   .aeya-band, .aeya-reviews, .aeya-review, .aeya-stickybar, .aeya-visually-hidden.

   The arm's visual argument is a table, so the rules below do three things and stop:
   they hold the imagery back, they give the row schema enough structure to be scanned
   rather than read, and they keep the two buy boxes typographically identical.

   COMPONENTS. The colour control is the shared picker; its rules live in aeya-pdp.css
   and are not restated here. The shared proof strip is not adopted by this arm, so
   .aeya-proof has no arm rule either. See the note above the title in the section.

   COLOUR AUDIT. Every colour below is a token: --aeya-border, --aeya-navy, --aeya-bg,
   --aeya-stone. The single exception is the scale track, which is a tonal rgba derived
   from --aeya-navy and carries a comment saying so. There is no hex, no named colour and
   no borrowed brand colour in this sheet.

   IMAGE AUDIT. Four image sites: the gallery frame, the gallery placeholder, the gallery
   thumb and the mechanism card. None passes a class to image_tag, so every one of them
   is constrained by a container scoped element selector and none depends on a class
   arriving. Nothing here relies on the shared backstop in aeya-pdp.css. */

/* ---------- Layout ----------
   Copy and data dominant. The gallery column is deliberately the narrower of the two,
   which is the inverse of every other arm in the programme. */

@media screen and (min-width: 990px) {
  .aeya-spec__layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.aeya-spec__column {
  display: grid;
  gap: var(--aeya-space-4xl, 2rem);
  align-content: start;
}

/* The eyebrow, title and price sit tight to each other, so the schema starts high. */
.aeya-pdp--spec .aeya-eyebrow {
  margin-block-end: var(--aeya-space-xs, 0.5rem);
}

.aeya-pdp--spec .aeya-title {
  margin-block-end: var(--aeya-space-sm, 0.7rem);
}

.aeya-pdp--spec .aeya-price {
  margin-block-end: 0;
}

/* ---------- Gallery, compact ----------
   One primary frame and a small thumbnail strip. Every frame is already in the DOM and
   stacked, so a swatch change is an opacity swap between decoded images: no reload, no
   scroll to top, no white flash. */

.aeya-specgallery {
  display: grid;
  gap: var(--aeya-space-xs, 0.5rem);
  align-content: start;
}

.aeya-specgallery__main {
  position: relative;
  aspect-ratio: 3 / 4;
}

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

.aeya-specgallery__frame.is-active {
  opacity: 1;
}

/* With scripting off nothing sets is-active beyond the server rendered frame, and the
   first frame is the safe fallback if a variant carries no media of its own. */
.aeya-specgallery__frame:first-child {
  opacity: 1;
}

.aeya-specgallery__frame.is-active {
  z-index: 1;
}

/* IMAGE DISCIPLINE. Container scoped, not class scoped. The section passes no class to
   image_tag here, so there is no class for a constraint to hang off and none is wanted:
   the rule matches the element inside its frame, which is the pattern that survives
   image_tag dropping attributes. The frame is absolutely positioned inside a 3/4 box, so
   the largest an upload can paint is the gallery column, whatever its natural size. */
.aeya-specgallery__frame img,
.aeya-specgallery__frame picture,
.aeya-specgallery__frame svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* The no media branch emits placeholder_svg_tag straight into the main frame. Its class
   had no rule anywhere in the theme, so the SVG sat unconstrained inside a position:
   relative box and was held up only by the shared backstop. It is sized by its container
   now, the same way every other image in this arm is. */
.aeya-specgallery__main > svg,
.aeya-specgallery__placeholder {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  background: var(--aeya-stone);
}

.aeya-specgallery__thumbs button {
  inline-size: 3.25rem; /* smaller than the shared default: this arm is not image led */
}

/* The shared sheet sizes .aeya-gallery__thumbs img by container already. Restated here
   only as the audit's condition (c) check: the thumb image_tag call passes no class, so
   the constraint must be reachable without one, and it is. */

/* ---------- Colour picker ----------
   The arm's own .aeya-specswatches / .aeya-specswatch / .aeya-specswatch--flat /
   .aeya-specswatch__img rules are DELETED, not overridden. The markup they styled is
   gone: the colour control is now snippets/aeya-colour-picker.liquid, whose 58 x 88
   photograph tiles, hairline selected state and left aligned label all live in the
   shared sheet. Nothing arm specific is needed, and restating a shared measurement here
   would be the first step to the two drifting apart.

   One arm specific rule only, and it is spacing rather than geometry. The picker is one
   of two fields in a buy box that is emitted twice, and .aeya-cpicker carries
   .aeya-field, so it already has the shared field rhythm. This keeps the tile row
   clearing the size row by the same step the rest of this column uses. */

.aeya-specbuy .aeya-cpicker {
  margin-block-end: var(--aeya-space-xl, 1.25rem);
}

/* ---------- Buy box, both instances ----------
   These rules are written once and apply to both emissions of the shared capture, so
   the repeat cannot pick up an emphasis the first instance does not have. */

.aeya-specbuy {
  display: block;
}

.aeya-specbuy__row {
  display: flex;
  align-items: center;
  gap: var(--aeya-space-lg, 1rem);
  flex-wrap: wrap;
  margin-block-start: var(--aeya-space-xl, 1.25rem);
}

.aeya-specbuy__row .aeya-atb {
  flex: 1 1 16rem;
  inline-size: auto;
}

/* The size guide is docked here, adjacent to the button, rather than hung off the size
   selector above. It is suppressed entirely by the section when no chart row carries
   figures, so this only ever styles a control that has something behind it. */
.aeya-specbuy__guide {
  flex: 0 0 auto;
}

.aeya-specbuy__guide .aeya-sizechart {
  display: block;
}

.aeya-specbuy__guide .aeya-sizechart__trigger {
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.aeya-specbuy__fallback.is-js-hidden {
  display: none;
}

/* ---------- The spec grid ----------
   The arm's spine. Directly beneath the buy box, always open, no accordion, no tabs, no
   disclosure toggle. Two columns on a fixed key width, so the keys form a straight edge
   the eye can run down and the values are what changes between products. */

.aeya-specgrid__list {
  margin: 0;
  padding: 0;
  border-block-start: var(--aeya-border-w, 1px) solid var(--aeya-border);
}

.aeya-specgrid__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
  gap: var(--aeya-space-lg, 1rem);
  padding-block: var(--aeya-space-sm, 0.7rem);
  border-block-end: var(--aeya-border-w, 1px) solid var(--aeya-border);
  align-items: baseline;
}

.aeya-specgrid__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-specgrid__value {
  margin: 0;
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.5;
}

@media screen and (max-width: 479px) {
  .aeya-specgrid__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--aeya-space-2xs, 0.25rem);
  }
}

/* ---------- Scale rows ----------
   The same visual language as the grid above: a key on the left edge, the reading on
   the right. A marked position on a track, with the ends set in words. There are no
   numeric endpoints, because a numbered scale reads as a measurement AEYA has not
   taken. Nothing in this block renders at all until a merchandiser places a marker. */

.aeya-specscale {
  padding-block: var(--aeya-space-md, 0.8rem);
  border-block-end: var(--aeya-border-w, 1px) solid var(--aeya-border);
}

.aeya-specscale:first-of-type {
  border-block-start: var(--aeya-border-w, 1px) solid var(--aeya-border);
}

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

/* The track was `background: var(--aeya-ink); opacity: 0.25`, which is wrong twice.
   Element opacity applies to the whole subtree, so it dimmed the marker sitting inside
   it to a quarter as well, and the marker's own `opacity: 1` cannot undo an ancestor's.
   The reading is the marker, so a faint marker is the one thing this component may not
   have. The tone moves onto the colour instead: rgba(8, 22, 51, 0.25) is --aeya-navy,
   which is --aeya-ink, at a quarter. It is a tonal derivation of a token, not a drifted
   value, and it leaves the marker at full navy. */
.aeya-specscale__track {
  position: relative;
  block-size: var(--aeya-border-w, 1px);
  background: rgba(8, 22, 51, 0.25); /* --aeya-navy at 25% */
  margin-block-end: var(--aeya-space-sm, 0.7rem);
}

.aeya-specscale__marker {
  position: absolute;
  inset-block-start: 50%;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--aeya-navy);
  transform: translate(-50%, -50%);
}

.aeya-specscale__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--aeya-space-lg, 1rem);
  margin: 0;
  font-size: var(--aeya-size-2xs, 0.75rem);
  opacity: 0.7;
}

/* ---------- Mechanism cards ----------
   Uniform height, enforced here rather than left to content length, so two cards and
   three cards both read as one row of equal statements. */

.aeya-mechrow {
  display: grid;
  gap: var(--aeya-space-lg, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.aeya-mechcard {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: var(--aeya-bg);
  border: var(--aeya-border-w, 1px) solid var(--aeya-border);
  border-radius: var(--aeya-radius-card, 4px);
  overflow: hidden;
}

.aeya-mechcard__media {
  aspect-ratio: 4 / 3;
  background: var(--aeya-stone);
}

/* IMAGE DISCIPLINE. Container scoped. The card's image_tag call passes no class, so the
   constraint must be reachable without one, and the 4/3 media box caps it either way. */
.aeya-mechcard__media img,
.aeya-mechcard__media picture,
.aeya-mechcard__media svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.aeya-mechcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--aeya-space-xs, 0.5rem);
  padding: var(--aeya-space-lg, 1rem);
  flex: 1;
}

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

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

/* ---------- The repeated buy box ----------
   Held to the same measure as the first instance so it reads as the same control in a
   second place, not as a bigger, louder offer. */

.aeya-specrepeat__inner {
  max-width: 34rem;
  margin-inline: 0;
}

.aeya-specrepeat .aeya-quiet-lines {
  margin-block-start: var(--aeya-space-xl, 1.25rem);
}

/* ---------- Proof, only when the hypothesis switch is deliberately turned on ---------- */

.aeya-specproof .aeya-review {
  background: var(--aeya-bg);
}