/* AEYA PDP split test, arm V4 "OUTFIT LED".

   Arm specific styles only. Everything shared lives in aeya-pdp.css and the tokens live
   in aeya-tokens.css: .aeya-pdp, .aeya-title, .aeya-price, .aeya-field, .aeya-sizes,
   .aeya-size, .aeya-atb, .aeya-atb--outlined, .aeya-quiet-lines, .aeya-revcarousel,
   .aeya-revcard, .aeya-stickybar and .aeya-visually-hidden are all inherited from there
   and are not restated here.

   The buy box proof strip (.aeya-proof) and the colour picker (.aeya-cpicker) are shared
   components living in aeya-pdp.css. This arm renders both from the shared snippets and
   restates none of their rules. The arm's own swatch styles, .aeya-outfit__swatches,
   .aeya-outfit__swatch, .aeya-outfit__swatchimg, .aeya-outfit__swatchfill and
   .aeya-outfit__swatchname, were deleted when the picker migrated: no markup emits those
   classes any more, so keeping them would leave a second, divergent definition of a
   control this programme now has exactly one of.

   Every colour below comes from a token in aeya-tokens.css. There are no literal colour
   values in this file at all, and the only non colour literals are the 3px meter track
   and its matching radius, which are geometry rather than palette.

   What this file carries:
     1. The outfit gallery, which leads with a two piece look frame and runs the rest of
        the media as a grid rather than a hero and a thumbnail strip.
     2. The two stage add states, which are driven entirely by data attributes the
        script sets, so with scripting off none of these rules apply and stage two is
        simply on the page.
     3. The threshold block, including the ProgressBar component overrides.
     4. The bands below the fold: the proof position at the bundle, the quiet lines,
        the token row and the full review set.
     5. The sticky bar states. */

/* ---------- 1. Outfit gallery ----------
   IMAGE DISCIPLINE. Every rule that constrains an image here is a container scoped
   ELEMENT selector, never a class. .aeya-outfitgallery__hero img and
   .aeya-outfitgallery__tile img each declare inline-size, block-size and object-fit
   against a frame that carries its own aspect-ratio, so an image is bounded whether or
   not image_tag emits a class, and whatever the merchandiser uploads. Neither image_tag
   call in this arm passes a class, which is now the honest state of affairs: the hero
   used to pass aeya-outfitgallery__heroimg, a class no rule in this theme ever defined.
   The shared :where(.aeya-pdp) backstop in aeya-pdp.css is a floor beneath all of this
   and is never what is actually holding these images in. */

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

.aeya-outfitgallery__hero {
  margin: 0;
  overflow: hidden;
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-sky);
  aspect-ratio: 4 / 5;
}

.aeya-outfitgallery__hero img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Product grid led. Every remaining frame is visible at once on desktop, because the
   next image is the next question a shopper has. */
.aeya-outfitgallery__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: var(--aeya-space-sm, 0.7rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.aeya-outfitgallery__tile {
  margin: 0;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-sky);
  aspect-ratio: 3 / 4;
}

.aeya-outfitgallery__tile img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* The empty state. With no product media at all the grid holds a placeholder SVG as a
   direct child, with no figure around it and no class this sheet controls. An SVG with a
   viewBox and no declared size resolves to its own intrinsic ratio against whatever
   width it is given, which in a 62% auto column is a frame nothing has bounded
   vertically. This sizes it to the same 3 / 4 box as a real tile, so the empty state
   occupies exactly the space a populated one would. */
.aeya-outfitgallery__grid > svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-sky);
}

/* The frame that matches the chosen colourway is marked rather than isolated, so a
   colour change never hides the rest of the gallery. */
.aeya-outfitgallery__tile.is-active {
  outline: var(--aeya-border-w, 1px) solid var(--aeya-navy);
  outline-offset: calc(-1 * var(--aeya-border-w, 1px));
}

@media screen and (min-width: 750px) {
  .aeya-outfitgallery__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
  }
}

/* ---------- 2. The two stage add ----------
   Every rule below keys off an attribute the script sets. With scripting off the
   attribute is absent, so the select stays visible, the confirmed line stays hidden and
   stage two is already on the page. Nothing is gated behind JavaScript. */

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

.aeya-outfit__confirmed {
  display: none;
  gap: var(--aeya-space-xs, 0.5rem);
  align-items: baseline;
  flex-wrap: wrap;
  padding-block: var(--aeya-space-md, 0.8rem);
  border-block: var(--aeya-border-w, 1px) solid var(--aeya-border);
}

.aeya-pdp--outfit[data-atb='confirmed'] .aeya-outfit__confirmed {
  display: flex;
}

.aeya-pdp--outfit[data-atb='confirmed'] .aeya-outfit__stage-one {
  display: none;
}

.aeya-outfit__error {
  margin: var(--aeya-space-xs, 0.5rem) 0 0;
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.5;
  color: var(--aeya-error);
}

.aeya-outfit__error:empty {
  display: none;
}

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

.aeya-outfit__edit {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--aeya-font);
  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;
  opacity: 0.7;
}

.aeya-outfit__edit:hover {
  opacity: 1;
}

.aeya-outfit__stage-two {
  outline: none;
}

.aeya-pdp--outfit[data-stage-two='hidden'] .aeya-outfit__stage-two {
  display: none;
}

/* ---------- 3. Threshold state ----------
   The ProgressBar component ships as a Dawn loading indicator: hidden, indeterminate
   and animated. Here it is a static meter of one fact, so the animation is removed and
   the fill is driven by a custom property the section sets server side and the script
   keeps in step. The display override needs !important only because the component's own
   markup carries Dawn's .hidden utility. */

.aeya-threshold {
  display: grid;
  gap: var(--aeya-space-xs, 0.5rem);
  margin-block-start: var(--aeya-space-lg, 1rem);
}

.aeya-threshold__meter .progress-bar-container {
  display: block !important;
  inline-size: 100%;
  margin: 0;
}

.aeya-threshold__meter .progress-bar {
  block-size: 3px;
  inline-size: 100%;
  background: var(--aeya-stone);
  border-radius: 3px;
  overflow: hidden;
}

.aeya-threshold__meter .progress-bar-value {
  display: block;
  block-size: 100%;
  inline-size: var(--aeya-threshold-fill, 0%);
  background: var(--aeya-navy);
  animation: none;
  transform: none;
  transition: inline-size var(--aeya-motion-base, 0.382s) ease;
}

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

/* ---------- 4. Bands below the fold ---------- */

.aeya-outfit__inner {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--aeya-pdp-gutter);
}

.aeya-outfit__bundleproof {
  padding-block-start: var(--aeya-space-lg, 1rem);
  padding-block-end: clamp(1.5rem, 4vw, 3rem);
}

/* Proof at the bundle. One or two cards, sized so a single card does not stretch the
   full width of the page and read as a banner. */
.aeya-outfit__proofgrid {
  display: grid;
  gap: var(--aeya-space-sm, 0.7rem);
  grid-template-columns: 1fr;
}

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

.aeya-outfit__quiet {
  padding-block-end: clamp(1.5rem, 4vw, 3rem);
}

.aeya-outfit__quiet .aeya-quiet-lines {
  margin-block-start: 0;
}

/* Construction compressed to tokens. One row, wrapping, no prose. */
.aeya-outfit__tokens {
  padding-block: clamp(1.5rem, 4vw, 3rem);
  background: var(--aeya-sky);
}

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

.aeya-outfit__token {
  padding: var(--aeya-space-2xs, 0.25rem) var(--aeya-space-md, 0.8rem);
  border: var(--aeya-border-w, 1px) solid var(--aeya-navy);
  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);
  line-height: 1.8;
  white-space: nowrap;
}

.aeya-outfit__reviews {
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* ---------- 5. Sticky bar states ----------
   Before anything is added the bar carries the selected item's price under a plain
   label. After an add it carries the running outfit total and the control becomes a way
   into the bag rather than a second add for the same item. */

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

.aeya-stickybar .aeya-outfit__stickyadd,
.aeya-stickybar .aeya-outfit__stickybag {
  margin-inline-start: auto;
  inline-size: auto;
  padding-inline: var(--aeya-space-4xl, 2rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.aeya-outfit__stickybag {
  display: none;
}

.aeya-pdp--outfit[data-atb='confirmed'] .aeya-outfit__stickyadd {
  display: none;
}

.aeya-pdp--outfit[data-atb='confirmed'] .aeya-outfit__stickybag {
  display: inline-flex;
}