/* AEYA PDP split test, shared foundation.
   Every concept arm builds on this. Concept specific rules live in the concept's own
   section file and are namespaced .aeya-pdp--<arm>.

   Brand rules enforced here, from 01 Brand/Brand Rules.md and Official Brandbook.md:
     - Always left align. Centred text only over large full bleed imagery.
     - Headings uppercase with wide tracking. Never tighten --aeya-tracking-heading.
     - Backgrounds are a warm or washed tint, never pure white.
     - Text is navy, never pure black.
     - One surface pairing per section: navy on cloud, or cloud on navy.

   Typography note: the brandbook specifies a four face system (Neue Haas Grotesk Text
   Pro, Times Now, HK Grotesk, Azeret Mono). Neue Haas and Azeret licences are
   unresolved, and Site Positioning Plan says to do the layout and copy pass without
   swapping faces. So this ships on the current stack and exposes --aeya-font-display
   as the single swap point for when licensing clears. */

:root {
  --aeya-font-display: var(--aeya-font);
  --aeya-font-serif: Georgia, "Times New Roman", serif;
  --aeya-pdp-gutter: clamp(1rem, 4vw, 3rem);
  --aeya-pdp-measure: 42rem;
}

/* ---------- Shared shell ---------- */

.aeya-pdp {
  background: var(--aeya-bg);
  color: var(--aeya-ink);
  font-family: var(--aeya-font);
  text-align: left;
}

.aeya-pdp *,
.aeya-pdp *::before,
.aeya-pdp *::after {
  box-sizing: border-box;
}

/* ---------- Image discipline ----------
   No replaced element inside a PDP arm may ever exceed the width of the box that
   holds it: not when an arm forgets to declare a size, not when a class fails to
   land, not whatever a merchandiser uploads. V8 rendered a 4672 x 7008 CSS pixel
   image and a 31,585 pixel tall page because its constraint lived only on a class,
   and the class was not on the element. A constraint that depends on a class
   arriving is not a constraint. This one matches the element itself.

   :where() gives the whole rule ZERO specificity, so it is a floor and never a
   ceiling: any arm rule that deliberately sizes an image, such as
   .aeya-cwhero__img { block-size: clamp(...) }, still wins outright. Adding this
   cannot change a single pixel of a correctly built arm.

   It is a backstop, not a licence. It does not excuse an arm from sizing its own
   images and it does not fix the V8 arm defect on its own. Both are still required. */

:where(.aeya-pdp) :where(img, picture, svg, video, canvas, iframe, model-viewer) {
  max-inline-size: 100%;
  block-size: auto;
}

/* A grid or flex item's automatic minimum size can still widen its own track past
   100%, which reintroduces the blowout one level up. Zeroing it closes that door. */
:where(.aeya-pdp) :where(img, picture, svg, video, canvas, iframe, model-viewer, figure) {
  min-inline-size: 0;
}

.aeya-pdp__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--aeya-space-xl, 2rem);
  padding-inline: var(--aeya-pdp-gutter);
  padding-block: var(--aeya-space-lg, 1.5rem);
  max-width: 90rem;
  margin-inline: auto;
}

@media screen and (min-width: 990px) {
  .aeya-pdp__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }

  .aeya-pdp__buybox--sticky {
    position: sticky;
    top: var(--aeya-space-xl, 2rem);
  }
}

/* ---------- Type ---------- */

.aeya-eyebrow {
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  font-weight: var(--aeya-weight-subheading, 500);
  color: var(--aeya-ink);
  opacity: 0.7;
  margin: 0 0 var(--aeya-space-xs, 0.5rem);
}

.aeya-title {
  font-family: var(--aeya-font-display);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-heading, 0.25em);
  font-weight: var(--aeya-weight-heading, 700);
  line-height: 1.15;
  margin: 0 0 var(--aeya-space-sm, 0.75rem);
}

/* The brand's signature move: one heading, two faces. Wrap the serif half in
   <em class="aeya-title__serif"> so it is a typographic split, not emphasis. */
.aeya-title__serif {
  font-family: var(--aeya-font-serif);
  font-style: normal;
  font-weight: 300;
  font-size: 1.09em; /* serif set larger so cap heights align, per brandbook */
}

.aeya-section-heading {
  font-family: var(--aeya-font-display);
  font-size: var(--aeya-size-lg, 1.125rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  font-weight: var(--aeya-weight-subheading, 500);
  margin: 0 0 var(--aeya-space-md, 1rem);
}

.aeya-body {
  font-size: var(--aeya-size-md, 1rem);
  line-height: 1.6;
  max-width: var(--aeya-pdp-measure);
  margin: 0 0 var(--aeya-space-md, 1rem);
}

.aeya-price {
  font-size: var(--aeya-size-xl, 1.25rem);
  font-weight: var(--aeya-weight-subheading, 500);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  margin: 0 0 var(--aeya-space-lg, 1.5rem);
}

/* ---------- Buy box controls ---------- */

.aeya-field {
  margin-block-end: var(--aeya-space-lg, 1.5rem);
}

.aeya-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--aeya-space-sm, 0.75rem);
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  margin-block-end: var(--aeya-space-sm, 0.75rem);
}

.aeya-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aeya-space-sm, 0.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.aeya-swatch {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--aeya-radius-swatch, 32px);
  border: 1px solid var(--aeya-border);
  cursor: pointer;
  padding: 0;
  position: relative;
  background-clip: padding-box;
}

.aeya-swatch[aria-checked='true'] {
  outline: 1px solid var(--aeya-navy);
  outline-offset: 3px;
}

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

.aeya-size {
  min-inline-size: 3rem;
  min-block-size: 2.75rem; /* above the 36px touch target token */
  padding-inline: var(--aeya-space-md, 1rem);
  border: 1px solid var(--aeya-border);
  border-radius: var(--aeya-radius-card, 4px);
  background: transparent;
  color: var(--aeya-ink);
  font-size: var(--aeya-size-sm, 0.875rem);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  cursor: pointer;
}

.aeya-size[aria-checked='true'] {
  border-color: var(--aeya-navy);
  background: var(--aeya-navy);
  color: var(--aeya-ink-inverse);
}

.aeya-size[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.aeya-atb {
  inline-size: 100%;
  min-block-size: 3.25rem;
  border: 1px solid var(--aeya-navy);
  border-radius: var(--aeya-radius-button, 14px);
  background: var(--aeya-navy);
  color: var(--aeya-ink-inverse);
  font-family: var(--aeya-font);
  font-size: var(--aeya-size-sm, 0.875rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  font-weight: var(--aeya-weight-subheading, 500);
  cursor: pointer;
  transition: opacity var(--aeya-motion-fast, 0.298s) ease;
}

.aeya-atb:hover { opacity: 0.88; }
.aeya-atb[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Brandbook target is an outlined rectangle. Blocked with the font licences, so it is
   available behind a class rather than applied. Switch when licensing clears. */
.aeya-atb--outlined {
  background: transparent;
  color: var(--aeya-navy);
  border-radius: 0;
}

/* ---------- Under bag block ----------
   Website Review: the live under-bag block is "jam-packed and hard to scan".
   Site Positioning Plan: "delivery, exchanges, Klarna as three quiet lines, not a wall." */

.aeya-quiet-lines {
  list-style: none;
  margin: var(--aeya-space-md, 1rem) 0 0;
  padding: 0;
  display: grid;
  gap: var(--aeya-space-xs, 0.5rem);
}

.aeya-quiet-lines li {
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.5;
  padding-inline-start: 1.25rem;
  position: relative;
  opacity: 0.85;
}

.aeya-quiet-lines li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 0.4rem;
  block-size: 1px;
  background: var(--aeya-ink);
  opacity: 0.5;
}

/* ---------- Gallery ----------
   Backlog item 4: swatch clicks must swap the image in place. Never a page reload,
   never a scroll to top, never a white flash. */

.aeya-gallery { display: grid; gap: var(--aeya-space-sm, 0.75rem); }

.aeya-gallery__main {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-stone);
}

.aeya-gallery__main img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--aeya-motion-fast, 0.298s) ease;
}

.aeya-gallery__main.is-swapping img { opacity: 0; }

.aeya-gallery__thumbs {
  display: flex;
  gap: var(--aeya-space-xs, 0.5rem);
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
}

.aeya-gallery__thumbs button {
  inline-size: 4.5rem;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--aeya-radius-card, 4px);
  overflow: hidden;
  cursor: pointer;
  background: none;
  flex: 0 0 auto;
}

.aeya-gallery__thumbs button[aria-current='true'] { border-color: var(--aeya-navy); }
.aeya-gallery__thumbs img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* ---------- Sections ---------- */

.aeya-band {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  padding-inline: var(--aeya-pdp-gutter);
}

.aeya-band--inverse {
  background: var(--aeya-bg-inverse);
  color: var(--aeya-ink-inverse);
}

.aeya-band--wash-sky { background: var(--aeya-sky); }
.aeya-band--wash-mint { background: var(--aeya-sage); }
.aeya-band__inner { max-width: 90rem; margin-inline: auto; }

/* ---------- Reviews ----------
   Rating component spec: hide the count below 15 reviews, keep the stars.
   ReviewCard spec: uniform height in a grid. Both are live defects on the real site. */

.aeya-reviews {
  display: grid;
  gap: var(--aeya-space-md, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.aeya-review {
  border: 1px solid var(--aeya-border);
  border-radius: var(--aeya-radius-card, 4px);
  padding: var(--aeya-space-md, 1rem);
  display: flex;
  flex-direction: column;
  gap: var(--aeya-space-sm, 0.75rem);
  block-size: 100%; /* uniform height, fixes the 647px against 207px ragged grid */
}

.aeya-review__quote { font-size: var(--aeya-size-sm, 0.875rem); line-height: 1.55; margin: 0; flex: 1; }
.aeya-review__by { font-size: var(--aeya-size-2xs, 0.75rem); text-transform: uppercase; letter-spacing: var(--aeya-tracking-eyebrow, 0.13em); opacity: 0.7; margin: 0; }
.aeya-stars { letter-spacing: 0.14em; font-size: var(--aeya-size-sm, 0.875rem); }

/* ---------- Sticky mobile bar ---------- */

.aeya-stickybar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 3; /* deliberately below the consent sheet, never a competing overlay */
  display: flex;
  gap: var(--aeya-space-sm, 0.75rem);
  align-items: center;
  padding: var(--aeya-space-sm, 0.75rem) var(--aeya-pdp-gutter);
  background: var(--aeya-bg);
  border-block-start: 1px solid var(--aeya-border);
  transform: translateY(100%);
  transition: transform var(--aeya-motion-base, 0.382s) ease;
}

.aeya-stickybar.is-visible { transform: translateY(0); }
.aeya-stickybar__price { font-size: var(--aeya-size-sm, 0.875rem); white-space: nowrap; }
.aeya-stickybar .aeya-atb { min-block-size: 2.75rem; }

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

/* ---------- Motion ----------
   Backlog item 5: scroll reveal animations left whole sections invisible when the
   library failed. Content must render with animation broken, so reveal is opt in
   and reduced motion turns it off entirely. */

@media (prefers-reduced-motion: reduce) {
  .aeya-pdp *,
  .aeya-pdp *::before,
  .aeya-pdp *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Review carousel ----------
   Rebuilt to the discipline observed on a well built premium PDP: compact cards of
   IDENTICAL height in a horizontal carousel, body text clamped so nothing ever runs
   ragged, small star marks rather than a spelled out rating, and quiet attribution.

   Two deliberate departures from that reference, both forced by AEYA's position:

   1. No aggregate count line. The reference can print "38,504 reviews" because volume
      is its proof. AEYA has seven. The Rating component spec already says to hide the
      count below fifteen, so the count stays off and the words carry it.
   2. No filled tint on the card. Brand rule is one surface pairing per section, so the
      cards sit as hairline outlines on the section's own ground. */

.aeya-revcarousel {
  position: relative;
  margin-block-start: var(--aeya-space-md, 1rem);
}

.aeya-revcarousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: var(--aeya-space-sm, 0.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block-end: var(--aeya-space-xs, 0.5rem);
  scrollbar-width: none;
}

.aeya-revcarousel__track::-webkit-scrollbar { display: none; }

@media screen and (min-width: 750px) {
  .aeya-revcarousel__track { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; }
  .aeya-revcarousel--scroll .aeya-revcarousel__track {
    grid-auto-columns: minmax(15rem, 1fr);
    overflow-x: auto;
  }
}

/* The card. Fixed block size is the whole point: every card is the same height, so the
   row reads as one object rather than a ragged grid. */
.aeya-revcard {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--aeya-space-xs, 0.5rem);
  block-size: 11.5rem;
  padding: var(--aeya-space-md, 1rem);
  border: 1px solid var(--aeya-border);
  border-radius: var(--aeya-radius-card, 4px);
  background: transparent;
}

.aeya-revcard__eyebrow {
  font-size: var(--aeya-size-3xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  opacity: 0.55;
  margin: 0;
}

.aeya-revcard__stars {
  font-size: var(--aeya-size-2xs, 0.75rem);
  letter-spacing: 0.18em;
  line-height: 1;
  margin: 0;
  color: var(--aeya-ink);
}

/* Clamp is what guarantees equal height without truncating mid word. */
.aeya-revcard__quote {
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.5;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Clamp alone still lets a partial fifth line show inside a fixed height card.
     Pinning the box to exactly four line boxes makes the cut clean. */
  max-block-size: calc(4 * 1.5 * var(--aeya-size-sm, 0.875rem));
}

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

.aeya-revcarousel__nav {
  display: flex;
  gap: var(--aeya-space-xs, 0.5rem);
  margin-block-start: var(--aeya-space-sm, 0.75rem);
}

.aeya-revcarousel__btn {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--aeya-border);
  border-radius: var(--aeya-radius-card, 4px);
  background: transparent;
  color: var(--aeya-ink);
  cursor: pointer;
  line-height: 1;
}

.aeya-revcarousel__btn:hover { border-color: var(--aeya-navy); }
.aeya-revcarousel__btn[disabled] { opacity: 0.3; cursor: default; }

.aeya-revcarousel__note {
  font-size: var(--aeya-size-2xs, 0.75rem);
  opacity: 0.6;
  margin: var(--aeya-space-sm, 0.75rem) 0 0;
}

/* ---------- Buy box trust strip ----------
   Observed pattern: a quiet reassurance row directly under the buy button carrying the
   secure checkout line and the payment marks. Adopted because it sits exactly where
   payment doubt occurs. No badges, no colour, no invented guarantees. */

.aeya-trustrow {
  display: flex;
  align-items: center;
  gap: var(--aeya-space-sm, 0.75rem);
  flex-wrap: wrap;
  margin-block-start: var(--aeya-space-md, 1rem);
  padding: var(--aeya-space-sm, 0.75rem) var(--aeya-space-md, 1rem);
  border: 1px solid var(--aeya-border);
  border-radius: var(--aeya-radius-card, 4px);
}

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

.aeya-trustrow__marks {
  display: flex;
  gap: var(--aeya-space-2xs, 0.375rem);
  margin-inline-start: auto;
  list-style: none;
  padding: 0;
}

.aeya-trustrow__marks li {
  font-size: var(--aeya-size-3xs, 0.625rem);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--aeya-border);
  border-radius: 3px;
  opacity: 0.75;
}

/* Screen reader only. Named with the aeya prefix so it never depends on Dawn's
   utility surviving a theme change. */
.aeya-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buy box proof strip ----------
   Renders from snippets/aeya-proof-strip.liquid. Sits at the very top of the buy box,
   above .aeya-title.

   Geometry measured from icon-amsterdam-buybox-GOLDEN.png at 1440px by pixel scan:
     marks      16 x 16 px, five of them, x=728..815, y=201..216
     mark gap   2px  (mark left edges at 728, 746, 764, 782, 800 = 18px pitch, 16px body)
     text       starts x=826, so 10px clear of the last mark; ink rows y=204..212,
                which is a 12px face, above regular weight, sentence case
     to title   marks bottom y=216, title cap top y=240, so 24px
     half mark  the fifth square is filled 800..807 of 800..815, exactly 50%
   Three of those four land on the AEYA scale exactly: 2px is --aeya-space-3xs, 12px is
   --aeya-size-2xs, 24px is --aeya-space-2xl. Only the 16px mark body has no token, so
   it becomes one. The 10px text gap takes --aeya-space-sm (0.7rem), the nearest step.

   The marks carry none of the reference's borrowed identity: no Trustpilot green, no
   wordmark, no rating service branding. AEYA holds no such rating and may not imply one.
   The palette is AEYA's own throughout. */

:root {
  /* Declared here beside --aeya-pdp-gutter, the way this sheet already extends the
     token set for PDP components. 16px has no token on the AEYA scale. */
  --aeya-proof-mark: 16px;
}

.aeya-proof {
  display: flex;
  align-items: center;
  gap: var(--aeya-space-sm, 0.7rem);
  margin: 0 0 var(--aeya-space-2xl, 1.5rem);
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.3;
  color: var(--aeya-ink);
}

.aeya-proof__marks {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--aeya-space-3xs, 0.125rem);
}

/* The square is the mark and the star is knocked out of it, which is the reference's
   construction. The fill is a hard stop gradient, so a fractional rating paints a part
   filled square with no extra element, no image and no JavaScript. */
.aeya-proof__mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  inline-size: var(--aeya-proof-mark);
  block-size: var(--aeya-proof-mark);
  border-radius: var(--aeya-radius-none, 0);
  background: linear-gradient(
    to right,
    var(--aeya-navy) 0 var(--aeya-mark-fill, 0%),
    var(--aeya-stone) var(--aeya-mark-fill, 0%) 100%
  );
}

.aeya-proof__star {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 62%;
  block-size: 62%;
  fill: var(--aeya-cloud);
}

/* Sentence case, not the uppercase eyebrow. This is a statement about the page, not a
   label for a field, and the eyebrow treatment would make it read as furniture. */
.aeya-proof__line {
  font-weight: var(--aeya-weight-subheading, 500);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  color: var(--aeya-ink);
}

/* No inverse variant exists on purpose. The proof strip only ever sits in the buy box,
   which is always navy on cloud, and the brand rule is one surface pairing per section. */

/* ---------- Colour picker, garment photograph tiles ----------
   Renders from snippets/aeya-colour-picker.liquid. Sits in the buy box between the price
   and the size row.

   .aeya-swatch and .aeya-swatches above stay in place for any arm not yet migrated;
   nothing here redefines them.

   Every number below is measured from icon-amsterdam-colourpicker-GOLDEN.png at 1440px:
     tile      58 x 88   (border runs x=728..785, content rows y=59..147)
     gutter    4px       (x=786..789 clear between tile 1 and tile 2)
     pitch     62px      (border runs at 728, 790, 852, 914, 976, 1038, 1100, 1162)
     hairline  1px
     selected  the same box with the hairline recoloured, and nothing else
     label     16px above the row, flush left with the first tile
   4px is --aeya-space-2xs and 16px is --aeya-space-lg on the AEYA scale, exactly, and
   1px is --aeya-border-w. The reference's rgb(224,224,224) hairline is one step from
   AEYA's own --aeya-border, which is used instead. Only 58 and 88 have no token, so they
   become two. */

:root {
  --aeya-tile-w: 58px;
  --aeya-tile-h: 88px;
}

/* The label is one phrase sitting with its tiles. It is NOT .aeya-field__label: that
   rule is display:flex with justify-content:space-between, which is what pushed
   "AEYA NAVY" to the far right of the buy column, a whole column width away from the
   swatches it was naming. */
.aeya-cpicker__label {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--aeya-space-2xs, 0.25rem);
  margin: 0 0 var(--aeya-space-lg, 1rem);
  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);
  color: var(--aeya-ink);
}

.aeya-cpicker__label-key { opacity: 0.6; }
.aeya-cpicker__label-value { opacity: 1; }

.aeya-cpicker__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aeya-space-2xs, 0.25rem);
  margin: 0;
  padding: 0;
}

/* Fixed box. The tile does not stretch, does not grow on select and does not change
   radius on select, so the row is optically identical whichever tile is chosen. */
.aeya-cpicker__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  inline-size: var(--aeya-tile-w);
  block-size: var(--aeya-tile-h);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--aeya-bg);
  color: var(--aeya-ink);
  font-family: var(--aeya-font);
  border: var(--aeya-border-w, 1px) solid var(--aeya-border);
  border-radius: var(--aeya-radius-card, 4px);
}

/* The whole selected state. One property, matching the measured reference. Navy rather
   than the reference's pure black, because AEYA rules are navy and never pure black. */
.aeya-cpicker__tile[aria-checked='true'] {
  border-color: var(--aeya-navy);
}

.aeya-cpicker__tile:focus-visible {
  outline: var(--aeya-border-w-emphasis, 2px) solid var(--aeya-navy);
  outline-offset: var(--aeya-space-3xs, 0.125rem);
}

/* A colour is never disabled, only dimmed: disabling one strands a shopper who arrived
   on a sold out size. */
.aeya-cpicker__tile[data-unavailable='true'] { opacity: 0.4; }

.aeya-cpicker__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* Reachable without the class, so the tile stays constrained even if image_tag drops
   its class attribute, which is exactly the defect that produced the 4672 x 7008 image. */
.aeya-cpicker__tile > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- The fallback ----
   No photograph of this colourway exists. The tile keeps its box and states the two
   things that ARE true: the colour, and its name. It never borrows a photograph.
   The colour field is bounded on all four sides by a hairline, which is what makes
   Cloud Dancer (--aeya-cloud) readable against the page's own cloud ground. */
.aeya-cpicker__fill {
  display: block;
  flex: 1 1 auto;
  inline-size: 100%;
  background: var(--aeya-stone);
  border-block-end: var(--aeya-border-w, 1px) solid var(--aeya-border);
}

.aeya-cpicker__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 0 auto;
  padding: var(--aeya-space-2xs, 0.25rem);
  background: var(--aeya-bg);
  color: var(--aeya-ink);
  font-size: var(--aeya-size-3xs, 0.625rem);
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
}