/* AEYA PDP split test, arm V1 "FIT CONFIDENCE".

   Concept specific rules only. Everything shared lives in aeya-pdp.css and is reused
   here, never redefined. Namespaced .aeya-pdp--fit, per the convention set at the top
   of aeya-pdp.css.

   Thesis: Baymard, 25 test rounds and 4,400 sessions, finds 84% of participants
   actively seek size guidance and guess when it is missing. So this arm moves every
   fit and risk signal to the decision point, expands it inline, and never puts it
   behind a modal that an overlay can sit on top of.

   Brand rules held here: always left align, headings uppercase, navy on cloud,
   text never pure black, background never pure white. */

/* ---------- Arm shell ---------- */

.aeya-pdp--fit [hidden],
.aeya-pdp--fit img[hidden] {
  display: none;
}

/* Touch targets. Shared .aeya-swatch is 32px, this arm lifts every control to 44px. */
.aeya-pdp--fit .aeya-swatch {
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.aeya-pdp--fit .aeya-size {
  min-inline-size: 3.5rem;
  min-block-size: 2.75rem;
}

.aeya-pdp--fit .aeya-gallery__thumbs button {
  min-block-size: 2.75rem;
}

/* ---------- Gallery ----------
   Every media item renders once and is toggled with [hidden]. Nothing is fetched on a
   swatch click, so a colour change cannot flash white, reload, or scroll the page. */

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

.aeya-fit-slide {
  block-size: 100%;
}

.aeya-fit-placeholder {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

.aeya-fit-caption {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 100%;
  margin: 0;
  padding: var(--aeya-space-xl, 1.25rem) var(--aeya-space-lg, 1rem) var(--aeya-space-lg, 1rem);
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.4;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  text-transform: uppercase;
  text-align: left;
  color: var(--aeya-ink-inverse);
  background: linear-gradient(to top, rgb(8 22 51 / 62%), rgb(8 22 51 / 0%));
}

/* ---------- Fit confidence indicator ----------
   A static, merchandiser set position on a five point scale. It is not an aggregate,
   it claims no sample size, and it does not render at all when the setting is unset. */

.aeya-fit-scale {
  margin-block: var(--aeya-space-lg, 1rem) var(--aeya-space-xl, 1.25rem);
  padding: var(--aeya-space-lg, 1rem);
  border: 1px solid var(--aeya-border);
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-sky);
}

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

.aeya-fit-scale__track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--aeya-space-2xs, 0.25rem);
  margin: 0 0 var(--aeya-space-xs, 0.5rem);
  padding: 0;
  list-style: none;
}

.aeya-fit-scale__step {
  display: block;
  block-size: 4px;
  border-radius: 2px;
  background: var(--aeya-ink);
  opacity: 0.16;
}

.aeya-fit-scale__step[data-on="true"] {
  opacity: 1;
}

.aeya-fit-scale__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--aeya-space-sm, 0.7rem);
  font-size: var(--aeya-size-3xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  opacity: 0.6;
}

.aeya-fit-scale__read {
  margin: var(--aeya-space-md, 0.8rem) 0 var(--aeya-space-2xs, 0.25rem);
  font-size: var(--aeya-size-md, 1rem);
  font-weight: var(--aeya-weight-subheading, 500);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
}

.aeya-fit-scale__note {
  margin: 0;
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.5;
  opacity: 0.7;
}

/* ---------- Inline fit guidance ----------
   A details element, so guidance expands in place directly beneath the size selector
   and stays readable with JS broken. This is the structural replacement for the
   control arm's modal size chart. */

.aeya-fit-guide {
  margin-block-end: var(--aeya-space-xl, 1.25rem);
  border-block: 1px solid var(--aeya-border);
}

.aeya-fit-guide__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aeya-space-sm, 0.7rem);
  min-block-size: 2.75rem;
  padding-block: var(--aeya-space-md, 0.8rem);
  cursor: pointer;
  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);
  list-style: none;
}

.aeya-fit-guide__summary::-webkit-details-marker {
  display: none;
}

.aeya-fit-guide__sign {
  font-size: var(--aeya-size-lg, 1.125rem);
  line-height: 1;
  opacity: 0.6;
  transition: transform var(--aeya-motion-fast, 0.298s) ease;
}

.aeya-fit-guide[open] .aeya-fit-guide__sign {
  transform: rotate(45deg);
}

.aeya-fit-guide__body {
  padding-block-end: var(--aeya-space-xl, 1.25rem);
}

.aeya-fit-guide__prose {
  margin: 0 0 var(--aeya-space-lg, 1rem);
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.6;
  max-width: var(--aeya-measure-body, 32.5em);
}

.aeya-fit-guide__prose p {
  margin: 0 0 var(--aeya-space-md, 0.8rem);
}

.aeya-fit-guide__prose p:last-child {
  margin-block-end: 0;
}

/* ---------- Size table ---------- */

.aeya-fit-table-wrap {
  overflow-x: auto;
}

.aeya-fit-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-align: left;
}

.aeya-fit-table caption {
  text-align: left;
  padding-block-end: var(--aeya-space-xs, 0.5rem);
  font-size: var(--aeya-size-2xs, 0.75rem);
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  text-transform: uppercase;
  opacity: 0.7;
}

.aeya-fit-table th,
.aeya-fit-table td {
  padding: var(--aeya-space-sm, 0.7rem) var(--aeya-space-md, 0.8rem);
  border-block-end: 1px solid var(--aeya-border);
  text-align: left;
  white-space: nowrap;
}

.aeya-fit-table thead th {
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  font-weight: var(--aeya-weight-subheading, 500);
  opacity: 0.7;
}

.aeya-fit-table tbody th {
  font-weight: var(--aeya-weight-subheading, 500);
}

/* ---------- Model line ----------
   Renders from the same Liquid variable as the gallery caption, so the two can
   never contradict each other. */

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

/* ---------- No JS variant fallback ----------
   The select is the single control the form posts. With JS the swatches and size
   buttons drive it and the script hides it. With JS broken nothing hides it, so it
   stays visible and the product is still buyable. Hiding is script driven rather than
   a .no-js class because this layout hardcodes class="js" on the html element. */

.aeya-fit-fallback {
  margin-block-end: var(--aeya-space-lg, 1rem);
}

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

.aeya-fit-fallback.is-js-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Proof, adjacent to the buy box ----------
   Deferred proof is the control arm's behaviour. Here the two reviews that speak to
   fit and feel lead, directly under the bag, and the rest follow. */

.aeya-fit-proof {
  margin-block-start: var(--aeya-space-4xl, 2rem);
  padding-block-start: var(--aeya-space-xl, 1.25rem);
  border-block-start: 1px solid var(--aeya-border);
}

.aeya-fit-proof__lead {
  grid-template-columns: 1fr;
  margin-block-end: var(--aeya-space-md, 0.8rem);
}

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

.aeya-review--fit {
  border-color: var(--aeya-navy);
  background: var(--aeya-sage);
}

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

/* ---------- Construction and fabric ---------- */

.aeya-specs {
  display: grid;
  gap: var(--aeya-space-xl, 1.25rem);
  grid-template-columns: 1fr;
  margin: 0;
  max-width: 60rem;
}

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

.aeya-specs dt {
  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);
  margin-block-end: var(--aeya-space-xs, 0.5rem);
  opacity: 0.75;
}

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

/* The Complete the look styles that lived here have been removed. That markup is
   now the shared aeya-complete-look snippet, which carries its own stylesheet in
   the same .aeya-look namespace. Leaving these behind meant this file loaded after
   the snippet and silently overrode its row layout, which is what broke it. */

/* ---------- Gallery, reference standard ----------
   Desktop: a two column grid showing every frame at once. For apparel the next image is
   the next question a buyer has, so making them hunt through thumbnails costs answers.
   Mobile: a scroll snapped rail, one large frame per view, with a length indicator.
   Scroll snap carries the behaviour, so it works with no JS at all. */

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

.aeya-fitgallery__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: var(--aeya-space-xs, 0.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0;
}

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

.aeya-fitgallery__tile {
  position: relative;
  scroll-snap-align: center;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--aeya-stone);
  border-radius: var(--aeya-radius-card, 4px);
}

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

/* The fit note sits on the frame, not below the fold. Scrim so it stays legible over
   any image, per the brand rule about white text on busy imagery. */
.aeya-fitgallery__note {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  max-inline-size: 100%;
  margin: 0;
  padding: var(--aeya-space-sm, 0.75rem) var(--aeya-space-md, 1rem);
  font-size: var(--aeya-size-2xs, 0.75rem);
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  text-transform: uppercase;
  color: var(--aeya-cloud);
  background: linear-gradient(to top, rgb(8 22 51 / 78%), rgb(8 22 51 / 0%));
  padding-block-start: 2.5rem;
  inline-size: 100%;
}

.aeya-fitgallery__length {
  block-size: 2px;
  background: var(--aeya-border);
  border-radius: 2px;
  overflow: hidden;
}

.aeya-fitgallery__lengthbar {
  display: block;
  block-size: 100%;
  background: var(--aeya-navy);
  transform: scaleX(0.12);
  transform-origin: left center;
  transition: transform var(--aeya-motion-fast, 0.298s) ease;
}

@media screen and (min-width: 990px) {
  .aeya-fitgallery__rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    gap: var(--aeya-space-xs, 0.5rem);
  }

  /* Nothing scrolls on desktop, so there is no length to indicate. */
  .aeya-fitgallery__length { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aeya-fitgallery__rail { scroll-behavior: auto; }
  .aeya-fitgallery__lengthbar { transition: none; }
}

/* The frame belonging to the selected colourway. Marked server side as well as by the
   script, so first paint and later paints agree. Deliberately quiet: on desktop every
   frame is visible and this is orientation, not selection. */
.aeya-fitgallery__tile.is-active {
  outline: 1px solid var(--aeya-navy);
  outline-offset: -1px;
}