/* AEYA PDP split test, arm V8 "Colourway First".

   Everything here is namespaced to .aeya-pdp--colourway. Shared classes live in
   aeya-pdp.css and aeya-tokens.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 written down next to the rule.

   Dominant mechanic: the colourway is the product. So the design spends its attention
   on two things and nothing else. First, the fold: one full bleed photograph of one
   colour, then a narrow left aligned column holding a colourway name, a title, a price
   and a single size decision. Second, the run: a long continuous gallery of that one
   colour, captioned, carrying the persuasion load that copy carries in other arms.

   The layout is deliberately NOT the shared two column .aeya-pdp__layout. A two column
   fold puts a gallery beside a buy box and makes the page read as a product with images.
   This arm needs the page to read as a colourway, so the image is the page and the buy
   box is a quiet column beneath it.

   Brand rules held here: left aligned everywhere except the single optional line over
   the full bleed hero, uppercase headings with wide tracking, navy text on a warm or
   washed ground, one surface pairing per band, no offer furniture of any kind.

   SHARED COMPONENTS. The proof strip renders from snippets/aeya-proof-strip.liquid and
   is styled entirely by aeya-pdp.css. Nothing about it is restyled here, because the
   whole point of a shared component is that it looks the same in every arm.

   There is deliberately NO colour picker in this arm's buy box, and therefore no
   .aeya-cpicker rule set here beyond one sizing line for the foot of page rail. The
   colourway is the product, so the buy box carries one decision and the colourway is
   routed at the foot of the page as navigation between presentations. That is the arm's
   whole hypothesis and it is not weakened to take a component. The one thing this arm
   does take from the picker is its fallback rule: a colourway with no photograph shows
   a named colour field, never another colourway's photograph and never a placeholder. */

.aeya-pdp--colourway {
  /* Hairline and ground used throughout this arm. The look is built from photography
     and hairlines, never from cards and shadows.

     Both are tonal rgba of --aeya-navy (#081633 = 8, 22, 51) and nothing else. They are
     written as rgba rather than as the token because a hairline at full navy is heavier
     than this arm wants and an alpha is the only honest way to say so. No colour in this
     stylesheet comes from anywhere but aeya-tokens.css or a stated tint of one. */
  --cw-rule: rgba(8, 22, 51, 0.16);
  --cw-ground: rgba(8, 22, 51, 0.04);
  /* The buy column is narrow on purpose. One decision does not need a wide field. */
  --cw-column: 34rem;
  --cw-hero-min: 62vh;
  --cw-hero-max: 88vh;
}

/* ---------- 1. Full bleed colourway hero ----------
   Edge to edge, no gutter, no swatch row, nothing else in the first viewport. The
   height is clamped rather than fixed so a portrait garment shot is not cropped to a
   letterbox on a laptop. */

.aeya-cwhero {
  position: relative;
  margin: 0;
  inline-size: 100%;
  background: var(--cw-ground);
  overflow: hidden;
}

/* IMAGE DISCIPLINE, HERO. This arm's headline defect was a hero that painted at its own
   natural size, 4672 x 7008 CSS pixels inside a 31,585 pixel tall page, because the
   constraint lived ONLY on .aeya-cwhero__img and the class was not on the element. A
   constraint that depends on a class arriving is not a constraint. The container scoped
   selector below reaches the same element through the tag, so the clamp holds whether or
   not image_tag emits its class, and it covers the placeholder svg on the same terms. */
.aeya-cwhero__img,
.aeya-cwhero__placeholder,
.aeya-cwhero > img,
.aeya-cwhero > svg {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: clamp(var(--cw-hero-min), 72vw, var(--cw-hero-max));
  object-fit: cover;
  object-position: center;
}

/* The one centred line the brand rules allow, and only because it sits over large full
   bleed imagery. It ships blank, so most of the time this rule matches nothing. */
.aeya-cwhero__line {
  position: absolute;
  inset-inline: 0;
  inset-block-end: clamp(1.5rem, 5vw, 3.5rem);
  margin: 0;
  padding-inline: var(--aeya-pdp-gutter);
  text-align: center;
  color: var(--aeya-ink-inverse);
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  /* A soft scrim rather than a box, so the photograph is not interrupted. The shadow is
     a tonal rgba of --aeya-navy (#081633 = 8, 22, 51), never a black drop shadow. */
  text-shadow: 0 1px 12px rgba(8, 22, 51, 0.55);
}

/* ---------- 2 to 7. The buy column ----------
   Left aligned, narrow, sitting directly under the hero. Everything in it is one
   colourway's business: the name, the title, the price, the size, the bag. */

.aeya-pdp--colourway .aeya-cw-column {
  max-inline-size: var(--cw-column);
  padding-inline: var(--aeya-pdp-gutter);
  padding-block: clamp(1.75rem, 5vw, 3rem);
  margin-inline: 0;
}

/* The eyebrow is the single factual label slot on the page and it holds the colourway.
   It is set a little stronger than the shared eyebrow because here it is the label the
   page is organised around, not a category tag. */
.aeya-pdp--colourway .aeya-cw-eyebrow {
  opacity: 1;
  color: var(--aeya-ink);
  margin-block-end: var(--aeya-space-sm, 0.7rem);
}

/* The arm's signature move. Garment in the sans face, colourway in the serif face, one
   uppercase line. The serif half is given a touch more room so the two faces read as a
   deliberate pairing rather than a font accident. */
.aeya-pdp--colourway .aeya-cwtitle {
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  margin-block-end: var(--aeya-space-lg, 1rem);
  text-wrap: balance;
}

.aeya-pdp--colourway .aeya-cwtitle .aeya-title__serif {
  margin-inline-start: 0.28em;
  letter-spacing: 0.16em;
}

.aeya-pdp--colourway .aeya-price {
  margin-block-end: var(--aeya-space-2xl, 1.5rem);
}

/* Size is the only decision on the page, so it is given the room a sole control
   deserves rather than being squeezed under a swatch row. */
.aeya-pdp--colourway .aeya-sizes {
  gap: var(--aeya-space-sm, 0.7rem);
}

.aeya-pdp--colourway .aeya-size {
  min-inline-size: 3.5rem;
}

/* The no script variant select. Visible when scripting is broken so the form always
   posts a real variant, hidden the moment the script runs. */
.aeya-pdp--colourway .aeya-cw-fallback {
  margin-block-end: var(--aeya-space-lg, 1rem);
}

.aeya-pdp--colourway .aeya-cw-fallback.is-js-hidden {
  display: none;
}

.aeya-pdp--colourway .aeya-cw-fallback select {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: var(--aeya-input-pad, 0.8rem);
  border: var(--aeya-border-w, 1px) solid var(--aeya-border);
  border-radius: var(--aeya-radius-input, 4px);
  background: transparent;
  color: var(--aeya-ink);
  font-family: var(--aeya-font);
  font-size: var(--aeya-size-sm, 0.875rem);
}

/* ---------- 8. The colourway gallery ----------
   The whole media budget for one colour in one continuous run. Two columns on desktop,
   one on mobile, no thumbnails, no carousel, no separate detail section further down.
   The shopper reads the garment by scrolling, which is the right gesture for apparel:
   the next frame is the next question. */

.aeya-cwgallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  padding-inline: 0;
  margin: 0;
}

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

.aeya-cwgallery__frame {
  margin: 0;
  position: relative;
  background: var(--cw-ground);
}

/* IMAGE DISCIPLINE, GALLERY. Both the per colourway run and the .aeya-cwgallery--fallback
   branch emit their images inside .aeya-cwgallery__frame, and the fallback branch is the
   path that produced the unconstrained column. The second selector reaches the element
   through its container, so the 3 / 4 box holds on either branch and with or without the
   class. The aspect ratio is what stops a 7008 pixel tall source becoming a 7008 pixel
   tall column: capping the width alone would not. */
.aeya-cwgallery__img,
.aeya-cwgallery__frame > img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
}

/* Captions are where this arm's information density lives. One short line each, or
   nothing. Set quietly under the frame rather than over it, so the photograph is never
   competing with type. */
.aeya-cwgallery__cap {
  margin: var(--aeya-space-sm, 0.7rem) 0 0;
  padding-inline: var(--aeya-pdp-gutter);
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.5;
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  opacity: 0.75;
  max-inline-size: 24em;
}

@media screen and (min-width: 750px) {
  .aeya-cwgallery__cap {
    padding-inline: clamp(0.75rem, 1.5vw, 1.25rem);
  }
}

/* ---------- 9. Construction as tokens ----------
   A row of short tokens, not a paragraph and not an accordion. Hairline pills on the
   section's own ground, so the row reads as a set of facts rather than a feature grid
   asking to be admired. */

.aeya-cw-tokens-band {
  padding-inline: var(--aeya-pdp-gutter);
  padding-block: clamp(2rem, 5vw, 3.25rem);
}

.aeya-cwtokens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aeya-space-xs, 0.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.aeya-cwtoken {
  padding: 0.5rem 0.85rem;
  border: var(--aeya-border-w, 1px) solid var(--cw-rule);
  border-radius: var(--aeya-radius-pill, 40px);
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  white-space: nowrap;
}

/* ---------- 10. Also in ----------
   Foot of page colourway navigation. Every card is the actual garment in that colour,
   never a colour dot, and every card is the same height, because a ragged rail is the
   defect the reference pattern exists to fix. */

.aeya-cwalso {
  padding-inline: var(--aeya-pdp-gutter);
  padding-block: clamp(2rem, 5vw, 3.25rem);
  border-block-start: var(--aeya-border-w, 1px) solid var(--cw-rule);
}

.aeya-cwalso__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 750px) {
  .aeya-cwalso__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.aeya-cwalso__card {
  margin: 0;
}

.aeya-cwalso__link {
  display: flex;
  flex-direction: column;
  gap: var(--aeya-space-sm, 0.7rem);
  block-size: 100%;
  color: inherit;
  text-decoration: none;
}

/* Fixed aspect on the frame is what makes the heights uniform, whatever the shot. */
.aeya-cwalso__frame {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cw-ground);
  border: var(--aeya-border-w, 1px) solid transparent;
  transition: border-color var(--aeya-motion-fast, 0.298s) ease;
}

.aeya-cwalso__link:hover .aeya-cwalso__frame {
  border-color: var(--aeya-navy);
}

/* A card whose variant id has not been entered yet is a thumbnail, not a link. It is
   held back rather than pointed somewhere wrong. */
.aeya-cwalso__link.is-unlinked {
  cursor: default;
  opacity: 0.7;
}

/* IMAGE DISCIPLINE, ALSO IN. Same treatment: reachable through the container as well as
   through the class. The placeholder graphic this rule used to also cover is gone, so
   its dead class name went with it. */
.aeya-cwalso__img,
.aeya-cwalso__frame > img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* The honest fallback for a colourway card with no photograph. It reuses the shared
   .aeya-cpicker__fill from aeya-pdp.css, which already paints the colour field and its
   hairline, and adds only what this arm's larger 3 / 4 frame needs: fill the box. The
   colourway name is already printed by .aeya-cwalso__name directly below, so the card
   states the two things that are true and borrows no other colourway's photograph. */
.aeya-pdp--colourway .aeya-cwalso__frame > .aeya-cwalso__fill {
  block-size: 100%;
  /* Bounded on all four sides rather than only underneath, which is what keeps Cloud
     Dancer (--aeya-cloud) legible against the page's own cloud ground. In the picker the
     tile's own hairline does this job; here the name sits outside the frame, so the
     field carries the hairline itself. */
  border: var(--aeya-border-w, 1px) solid var(--aeya-border);
}

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

/* ---------- 11. Reviews, foot of page ----------
   Shared carousel, unchanged from the control's treatment because the review treatment
   is deliberately held constant across this test. Only the band around it is local. */

.aeya-cw-reviews {
  padding-inline: var(--aeya-pdp-gutter);
  padding-block: clamp(2rem, 5vw, 3.25rem);
  border-block-start: var(--aeya-border-w, 1px) solid var(--cw-rule);
}

/* ---------- 12. Brand close ----------
   One image, one short line, and nothing else. No offer, no capture, no second buy box.
   The line sits under the image and stays left aligned, because it is not over full
   bleed imagery. */

.aeya-cwclose {
  margin-block-start: clamp(1rem, 3vw, 2rem);
}

/* IMAGE DISCIPLINE, BRAND CLOSE. Container scoped companion, same reason as the hero:
   a full bleed image whose only constraint is a class is one dropped attribute away from
   painting at its natural size. */
.aeya-cwclose__img,
.aeya-cwclose > img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: clamp(18rem, 46vw, 34rem);
  object-fit: cover;
  object-position: center;
}

.aeya-cwclose__line {
  margin: 0;
  padding-inline: var(--aeya-pdp-gutter);
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  max-inline-size: var(--cw-column);
  font-size: var(--aeya-size-lg, 1.125rem);
  line-height: 1.5;
}

/* ---------- 13. Sticky buy bar ----------
   The shared .aeya-stickybar is a mobile pattern and is hidden from 750px up. This arm
   deliberately keeps it on desktop as well, because the whole page below the fold is
   photography of one colour and the colourway name is the only thing telling the
   shopper which page they are on. That is a reason specific to this arm, so the
   override is scoped to the arm and nowhere else. */

@media screen and (min-width: 750px) {
  .aeya-pdp--colourway .aeya-stickybar {
    display: flex;
  }
}

.aeya-pdp--colourway .aeya-cwbar {
  gap: var(--aeya-space-lg, 1rem);
}

.aeya-cwbar__id {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-inline-size: 0;
}

.aeya-cwbar__garment {
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The colourway half of the sticky bar is set in the serif face, so the bar carries the
   same two face signature as the title it is standing in for. */
.aeya-cwbar__colour {
  font-family: var(--aeya-font-serif);
  font-size: var(--aeya-size-sm, 0.875rem);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aeya-pdp--colourway .aeya-stickybar .aeya-atb {
  inline-size: auto;
  margin-inline-start: auto;
  padding-inline: var(--aeya-space-2xl, 1.5rem);
}

.aeya-pdp--colourway .aeya-stickybar__price {
  margin-inline-start: auto;
}

/* The bar occupies real estate at the foot of the viewport, so the tail of the page
   gets clearance to sit above it rather than under it. */
.aeya-pdp--colourway {
  padding-block-end: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  .aeya-pdp--colourway .aeya-stickybar {
    transition: none;
  }
}