/* AEYA PDP split test, arm V7 "SIZING RESIDENT".

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

   Thesis: the fit answer is resident in the buy box column and proved by demonstration.
   Two things follow for the styling, and they are the whole brief for this file:

     1. The measurement table has to read as part of the column rather than as a widget
        dropped into it. So it is a hairline ruled block on the section's own ground, no
        card, no tint, no shadow, sitting hard under the size buttons.
     2. The model strip has to be the largest block on the page by area. So it takes the
        full band width, tall 3:4 frames of uniform height, and vertical padding a step
        above every other band.

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

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

.aeya-pdp--sizing [hidden] {
  display: none;
}

/* Touch targets. Shared controls are 32px, this arm lifts every control to 44px. */
.aeya-pdp--sizing .aeya-size {
  min-inline-size: 3.5rem;
  min-block-size: 2.75rem;
}

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

/* The select posts the variant with script off. Script hides it. */
.aeya-pdp--sizing .aeya-sizing-fallback {
  margin-block-end: var(--aeya-space-lg, 1rem);
}

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

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

/* ---------- Gallery ----------
   Standard media set: one primary frame with the others stacked behind it and toggled by
   class, so a swatch click swaps in place with no fetch, no reload and no white flash.
   No fit note is overlaid on the image in this arm. */

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

/* Geometry is reachable through the container as well as through the class, per the
   image discipline audit: a constraint that depends on a class arriving is not a
   constraint. Opacity is deliberately NOT duplicated here, because that is state rather
   than size, and a classless frame must never be sized correctly but painted invisible. */
.aeya-pdp--sizing .aeya-gallery__main > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.aeya-pdp--sizing .aeya-gallery__frame {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--aeya-motion-fast, 0.298s) ease;
}

.aeya-pdp--sizing .aeya-gallery__frame.is-active {
  opacity: 1;
}

.aeya-pdp--sizing .aeya-gallery__stack {
  display: none;
}

/* Frame and image are sized UNCONDITIONALLY, outside the breakpoint that reveals the
   stack. Only `display` belongs in the media query. A constraint that exists only above
   990px is a constraint that is absent at every width where it could still be reached,
   and the stack images are 1200 x 1600 originals. */
.aeya-pdp--sizing .aeya-gallery__stack figure {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-stone);
}

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

@media screen and (min-width: 990px) {
  .aeya-pdp--sizing .aeya-gallery__stack {
    display: grid;
    gap: var(--aeya-space-sm, 0.7rem);
  }
}

/* ---------- Colour picker ----------
   This arm's bespoke .aeya-swatch--thumb rules are DELETED, not overridden. The shared
   .aeya-cpicker component in aeya-pdp.css now carries the whole control: the measured
   58 x 88 tile, the 4px gutter, the 1px hairline that recolours rather than thickens on
   selection, the flush left label, and the named colour field fallback. Nothing about it
   is redefined here, because the arm needed nothing changed. The thumbnail argument this
   arm made first is the argument the shared component makes, at measured geometry
   instead of a guessed 3.25 x 4.25rem box.

   The old rules also carried a second bug worth recording so it is not reintroduced:
   selection thickened the border from 1px to 2px, which shifted the row by a pixel every
   time the shopper moved through it. */

/* The size field carries the table and the model line, so it closes the group rather
   than sitting flush against the next control. */
.aeya-pdp--sizing .aeya-field--sizing {
  margin-block-end: var(--aeya-space-xl, 1.25rem);
}

/* ---------- The resident measurement table ----------
   THE ARM. Inline in the buy box, directly beneath the size selector. Not a modal, not a
   drawer, not a link to a global size page. It is ruled top and bottom with a hairline so
   it reads as a resident part of the column, and it carries no card, no tint and no
   shadow, because a raised surface here would read as a widget that opened.

   Everything in this block is gated in Liquid: with no figures entered, none of these
   rules match anything, so there is no orphan heading and no double rule. */

.aeya-pdp--sizing .aeya-sizetable {
  margin-block: var(--aeya-space-lg, 1rem) 0;
  padding-block: var(--aeya-space-lg, 1rem);
  border-block: var(--aeya-border-w, 1px) solid var(--aeya-border);
}

.aeya-pdp--sizing .aeya-sizetable__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--aeya-space-sm, 0.7rem);
  flex-wrap: wrap;
}

.aeya-pdp--sizing .aeya-sizetable__heading {
  font-family: var(--aeya-font-display);
  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);
  margin: 0;
}

.aeya-pdp--sizing .aeya-sizetable__units {
  display: flex;
  gap: var(--aeya-space-2xs, 0.25rem);
}

.aeya-pdp--sizing .aeya-sizetable__unit {
  min-block-size: 2.25rem;
  padding-inline: var(--aeya-space-sm, 0.7rem);
  font-family: var(--aeya-font);
  font-size: var(--aeya-size-3xs, 0.625rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  color: var(--aeya-ink);
  background: transparent;
  border: var(--aeya-border-w, 1px) solid var(--aeya-border);
  border-radius: var(--aeya-radius-input, 4px);
  cursor: pointer;
  opacity: 0.6;
}

.aeya-pdp--sizing .aeya-sizetable__unit[aria-pressed='true'] {
  border-color: var(--aeya-navy);
  opacity: 1;
}

.aeya-pdp--sizing .aeya-sizetable__intro,
.aeya-pdp--sizing .aeya-sizetable__note {
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.55;
  margin: var(--aeya-space-xs, 0.5rem) 0 0;
  opacity: 0.75;
}

.aeya-pdp--sizing .aeya-sizetable__scroll {
  margin-block-start: var(--aeya-space-md, 0.8rem);
  overflow-x: auto;
  scrollbar-width: thin;
}

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

.aeya-pdp--sizing .aeya-sizetable__table th,
.aeya-pdp--sizing .aeya-sizetable__table td {
  padding: var(--aeya-space-xs, 0.5rem) var(--aeya-space-sm, 0.7rem);
  border-block-end: var(--aeya-border-w, 1px) solid var(--aeya-border);
  vertical-align: top;
  font-weight: var(--aeya-weight-body, 400);
  white-space: nowrap;
}

.aeya-pdp--sizing .aeya-sizetable__corner,
.aeya-pdp--sizing .aeya-sizetable__colhead {
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  font-size: var(--aeya-size-3xs, 0.625rem);
  font-weight: var(--aeya-weight-subheading, 500);
  opacity: 0.7;
}

.aeya-pdp--sizing .aeya-sizetable__rowhead {
  white-space: normal;
  min-inline-size: 9rem;
}

.aeya-pdp--sizing .aeya-sizetable__num {
  opacity: 0.5;
  margin-inline-end: var(--aeya-space-2xs, 0.25rem);
}

.aeya-pdp--sizing .aeya-sizetable__rownote {
  display: block;
  font-size: var(--aeya-size-3xs, 0.625rem);
  line-height: 1.5;
  opacity: 0.6;
  margin-block-start: var(--aeya-space-3xs, 0.125rem);
}

/* A gap in the data stays a gap. It is never filled with a dash, a zero or an estimate. */
.aeya-pdp--sizing .aeya-sizetable__cell--empty {
  opacity: 0.35;
}

.aeya-pdp--sizing .aeya-sizetable__table tbody tr:last-child th,
.aeya-pdp--sizing .aeya-sizetable__table tbody tr:last-child td {
  border-block-end: 0;
}

/* ---------- The model line ----------
   One sentence, single sourced, sitting between the table and Add To Bag. Quiet, because
   it is a fact rather than a claim. */

.aeya-pdp--sizing .aeya-modelline {
  margin: var(--aeya-space-md, 0.8rem) 0 0;
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  opacity: 0.8;
}

/* ---------- Short named spec blocks ----------
   Three at most, each separately headed, each one to three lines. Split by hairlines so
   the eye can take one at a time rather than reading a wall. */

.aeya-pdp--sizing .aeya-namedspecs {
  margin-block-start: var(--aeya-space-xl, 1.25rem);
  display: grid;
  gap: var(--aeya-space-lg, 1rem);
}

.aeya-pdp--sizing .aeya-namedspecs__item {
  padding-block-start: var(--aeya-space-lg, 1rem);
  border-block-start: var(--aeya-border-w, 1px) solid var(--aeya-border);
}

.aeya-pdp--sizing .aeya-namedspecs__heading {
  font-family: var(--aeya-font-display);
  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: 0 0 var(--aeya-space-xs, 0.5rem);
}

.aeya-pdp--sizing .aeya-namedspecs__body {
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.6;
  max-width: var(--aeya-measure-body-narrow, 22.75em);
}

.aeya-pdp--sizing .aeya-namedspecs__body p {
  margin: 0 0 var(--aeya-space-xs, 0.5rem);
}

.aeya-pdp--sizing .aeya-namedspecs__body p:last-child {
  margin-block-end: 0;
}

/* ---------- The model strip ----------
   The arm's spine, and the largest block on the page by area. Uniform card heights, so
   three differently proportioned bodies are compared on equal terms rather than by
   whichever frame the photographer cropped tallest.

   Headed and captioned as fit reference. There is no campaign treatment here on purpose:
   no full bleed, no overlay type, no name plate. The moment it reads as a campaign strip
   it stops being evidence. */

.aeya-pdp--sizing .aeya-modelstrip {
  padding-block: var(--aeya-space-6xl, 4rem);
}

.aeya-pdp--sizing .aeya-modelstrip__intro {
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.6;
  max-width: var(--aeya-measure-body-narrow, 22.75em);
  margin: 0 0 var(--aeya-space-4xl, 2rem);
  opacity: 0.8;
}

.aeya-pdp--sizing .aeya-modelstrip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--aeya-space-lg, 1rem);
}

@media screen and (min-width: 750px) {
  .aeya-pdp--sizing .aeya-modelstrip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aeya-space-2xl, 1.5rem);
  }

  .aeya-pdp--sizing .aeya-modelstrip__grid[data-cards='3'] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.aeya-pdp--sizing .aeya-modelstrip__card {
  margin: 0;
}

/* Uniform frames. Every card is the same aspect ratio and the image fills it, so no
   card can dominate the comparison by accident of crop. */
.aeya-pdp--sizing .aeya-modelstrip__frame {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-stone);
}

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

.aeya-pdp--sizing .aeya-modelstrip__caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aeya-space-2xs, 0.25rem) var(--aeya-space-md, 0.8rem);
  margin-block-start: 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);
}

.aeya-pdp--sizing .aeya-modelstrip__height {
  font-weight: var(--aeya-weight-subheading, 500);
}

.aeya-pdp--sizing .aeya-modelstrip__size {
  opacity: 0.7;
}

/* ---------- Fit scale ----------
   Three points, worded, with no numeric endpoints and no midpoint marked by default. The
   scale ships unset and renders nothing until a merchandiser sets it, so these rules
   match nothing until then. */

.aeya-pdp--sizing .aeya-fitpos__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 12rem));
  gap: var(--aeya-space-xs, 0.5rem);
}

.aeya-pdp--sizing .aeya-fitpos__step {
  display: grid;
  gap: var(--aeya-space-xs, 0.5rem);
}

.aeya-pdp--sizing .aeya-fitpos__mark {
  display: block;
  block-size: 2px;
  background: var(--aeya-ink);
  opacity: 0.18;
}

.aeya-pdp--sizing .aeya-fitpos__step[data-on='true'] .aeya-fitpos__mark {
  opacity: 1;
}

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

.aeya-pdp--sizing .aeya-fitpos__step[data-on='true'] .aeya-fitpos__word {
  opacity: 1;
  font-weight: var(--aeya-weight-subheading, 500);
}

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

.aeya-pdp--sizing .aeya-fitpos__note {
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.55;
  max-width: var(--aeya-measure-body-narrow, 22.75em);
  margin: var(--aeya-space-xs, 0.5rem) 0 0;
  opacity: 0.65;
}

/* ---------- Reviews, foot of page ----------
   The carousel itself is shared. All this arm changes is where it sits: below the full
   product argument, so nothing about customer opinion appears above the demonstration. */

.aeya-pdp--sizing .aeya-revcarousel {
  margin-block-start: var(--aeya-space-lg, 1rem);
}

/* ---------- Proof strip, at the foot ----------
   The component is the shared .aeya-proof from aeya-pdp.css and not one declaration of
   it is redefined here: same marks, same square geometry, same navy on stone fill, same
   sentence case line, same screen reader only rating value. Only the margins change,
   because in this arm the strip heads the proof block rather than the buy box.

   The shared rule closes the strip with --aeya-space-2xl, sized for the 24px measured
   between the golden's marks and its product title. Under a section heading, with the
   carousel already opening on --aeya-space-lg of its own, that stacks into a gap twice
   the size of anything else in the band, so it is zeroed and the carousel's own margin
   sets the distance. No negative margin, and nothing about the component itself moves. */

.aeya-pdp--sizing .aeya-band .aeya-proof {
  margin-block-end: 0;
}