/* AEYA PDP split test, arm V5 "Members First".

   PREVIEW ONLY. This arm is parked. Nothing here should be read as production styling
   for a live membership flow, because there is no live membership flow to style yet.

   Everything is namespaced to .aeya-pdp--members. Shared classes live in aeya-pdp.css
   and in 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: access first. So the design attention goes to three places, and
   only three: the access label and release fact above and below the title, the two
   state call to action pair, and the membership block mid page that carries the four
   permitted levers and the member voices. Everything else is held at the house
   standard on purpose, because an arm that moves everything measures nothing.

   Brand rules held here: left aligned throughout, uppercase headings with wide
   tracking, navy text on a warm or washed ground, one surface pairing per band, and
   no offer language of any kind. */

.aeya-pdp--members {
  /* Hairlines only. This arm argues with space and rules, not with cards.

     COLOUR PROVENANCE. Every rgb triple in this file is 8, 22, 51, which is
     --aeya-navy (#081633) from aeya-tokens.css and nothing else. They are tonal
     alphas of that one token, written long because a CSS custom property cannot be
     opened up inside rgba() without a colour function this theme does not use. No
     other colour is declared anywhere in this sheet: every remaining value is a
     var() onto a token. */
  --mem-rule: rgba(8, 22, 51, 0.18); /* --aeya-navy at 18% */
  --mem-rule-strong: rgba(8, 22, 51, 0.34); /* --aeya-navy at 34% */
  --mem-ground: rgba(8, 22, 51, 0.04); /* --aeya-navy at 4% */
  --mem-touch: 2.75rem; /* 44px, the minimum touch target for this arm */
}

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

/* ---------- Build notice ----------
   The arm is parked, and the one real risk is somebody mistaking this page for a
   runnable concept. So the notice is loud in structure and quiet in colour: a full
   width rule sandwich at the very top, before the gallery, that cannot be scrolled
   past without being read. */

.aeya-mem-preview {
  margin: 0;
  padding: var(--aeya-space-sm, 0.7rem) var(--aeya-pdp-gutter);
  border-block-end: 1px solid var(--mem-rule-strong);
  background: var(--mem-ground);
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.55;
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  max-width: none;
}

/* ---------- Gallery ----------
   House standard, stacked frames plus thumbs. Held at the control's treatment so the
   arm isolates access. */

.aeya-pdp--members .aeya-mem-main {
  position: relative;
  display: grid;
}

.aeya-mem-frame {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--aeya-motion-fast, 0.298s) ease;
}

.aeya-mem-frame[data-aeya-active='true'] {
  opacity: 1;
  visibility: visible;
}

/* IMAGE DISCIPLINE. The constraint is anchored to the CONTAINER and matches the
   ELEMENT, never a class, because image_tag is not guaranteed to emit one and the
   placeholder branch below emits an <svg> that carries no class at all. That is the
   exact shape of the V8 defect: a fallback branch whose markup the stylesheet never
   sized. .aeya-gallery__main already pins the frame to aspect-ratio 3 / 4 with
   overflow hidden, so 100% here resolves against a definite box in both branches and
   nothing in this gallery can paint above its container. */
.aeya-mem-frame > img,
.aeya-mem-frame > svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ---------- Access label ----------
   One factual label, above the product name. It reads as a classification, not as an
   announcement, so it takes the eyebrow scale and a rule beneath the word rather than
   a filled pill. A pill would look like a badge, and a badge looks like an offer. */

.aeya-mem-access {
  display: inline-block;
  opacity: 1;
  padding-block-end: var(--aeya-space-2xs, 0.25rem);
  border-block-end: 1px solid var(--mem-rule-strong);
  margin-block-end: var(--aeya-space-md, 0.8rem);
}

/* ---------- Release fact ----------
   The slot a low stock counter occupies elsewhere. The counter is deleted and only a
   stated fact sits here.

   The rule and the spacing belong to this element alone, so clearing the setting
   removes the line, its rule and its space in one move. There is no separate divider
   element and no margin left behind on a neighbour. */

.aeya-mem-release {
  margin: 0 0 var(--aeya-space-xl, 1.25rem);
  padding-block-start: var(--aeya-space-md, 0.8rem);
  border-block-start: 1px solid var(--mem-rule);
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.55;
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  max-width: var(--aeya-measure-body-narrow, 22.75em);
}

/* ---------- Colour picker ----------
   DELETED. The arm's .aeya-mem-swatch row is gone and its rules with it. The colour
   control is now snippets/aeya-colour-picker.liquid, styled entirely by .aeya-cpicker
   in aeya-pdp.css, and nothing is redefined here: an arm scoped override of a shared
   component is how nine arms stop looking like one programme.

   Three things the deleted rules were doing that the shared component does properly:
   the 3.5rem tile is now the measured 58 x 88; the selected state was a border colour
   change PLUS a 1px outline at 2px offset, which grew the row's optical footprint on
   selection, and is now a border colour change alone so the row never shifts; and the
   name under each tile now sits inside the tile box rather than below it, so a long
   colourway name cannot stretch its own column. */

/* ---------- Variant fallback ----------
   Visible with scripting off, hidden once the buttons are live. */

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

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

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

/* ---------- The two state call to action ----------
   Add To Bag is the primary state and keeps the house treatment: filled navy, full
   width, live. The membership control is the second state and is INERT. It is drawn
   as an outline that reads as unavailable rather than as a rival button, because it
   is unavailable, and because a second filled button would compete with the one
   control on this page that actually works. */

.aeya-mem-cta-wrap {
  margin-block-start: var(--aeya-space-md, 0.8rem);
  padding-block-start: var(--aeya-space-md, 0.8rem);
  border-block-start: 1px solid var(--mem-rule);
}

.aeya-mem-cta {
  inline-size: 100%;
  min-block-size: 3.25rem;
  border: 1px solid var(--mem-rule-strong);
  border-radius: var(--aeya-radius-button, 14px);
  background: transparent;
  color: var(--aeya-ink);
  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);
}

/* Inert, and drawn as inert. No hover, no pointer, no affordance it cannot honour. */
.aeya-mem-cta[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.aeya-mem-cta-note {
  margin: var(--aeya-space-xs, 0.5rem) 0 0;
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.5;
  opacity: 0.7;
  max-width: var(--aeya-measure-body-narrow, 22.75em);
}

/* ---------- Membership block ----------
   Mid page, immediately after the buy box. This is the tail a discount led store
   fills with an offer stack, and here it carries the four permitted levers and then
   the member voices. Proof position is the axis this arm moves, so the block gets
   the space that would otherwise go to the offer. */

.aeya-mem-band .aeya-section-heading {
  margin-block-end: var(--aeya-space-2xl, 1.5rem);
}

.aeya-mem-values {
  display: grid;
  gap: 0;
  margin: 0 0 var(--aeya-space-5xl, 3rem);
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--mem-rule);
}

.aeya-mem-value {
  padding-block: var(--aeya-space-xl, 1.25rem);
  border-block-end: 1px solid var(--mem-rule);
}

@media screen and (min-width: 750px) {
  .aeya-mem-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}

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

.aeya-mem-value__head {
  margin: 0 0 var(--aeya-space-xs, 0.5rem);
  font-family: var(--aeya-font-display);
  font-size: var(--aeya-size-sm, 0.875rem);
  font-weight: var(--aeya-weight-subheading, 500);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
}

.aeya-mem-value__line {
  margin: 0;
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.6;
  opacity: 0.82;
  max-width: var(--aeya-measure-body-narrow, 22.75em);
}

/* Member voices. The shared review card, laid out as a quiet row. No count line, no
   aggregate, no rating summary: AEYA has seven reviews and the Rating spec hides the
   count below fifteen, so the words carry this. */

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

.aeya-mem-voices {
  display: grid;
  gap: var(--aeya-space-md, 0.8rem);
  grid-template-columns: 1fr;
}

@media screen and (min-width: 750px) {
  .aeya-mem-voices {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

/* On the washed ground the shared card's hairline needs the arm's rule token to hold
   the same weight it has on the page ground. */
.aeya-pdp--members .aeya-mem-voices .aeya-revcard {
  border-color: var(--mem-rule);
}

.aeya-mem-quiet {
  margin-block-start: var(--aeya-space-4xl, 2rem);
  padding-block-start: var(--aeya-space-lg, 1rem);
  border-block-start: 1px solid var(--mem-rule);
}

/* ---------- Construction tokens ----------
   Compressed from prose to tokens. Information density is medium in this arm by
   design: construction is present and quiet, because the argument here is access. */

.aeya-mem-tokens-band {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

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

.aeya-mem-token {
  padding: var(--aeya-space-xs, 0.5rem) var(--aeya-space-md, 0.8rem);
  border: 1px solid var(--mem-rule);
  border-radius: var(--aeya-radius-pill, 40px);
  font-size: var(--aeya-size-2xs, 0.75rem);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  line-height: 1.4;
}

/* ---------- Brand close ----------
   One image, one line. The tail ends on brand, not on offers. The line is centred
   only because it sits over large full bleed imagery, which is the single case the
   brand rules allow; on a narrow viewport where the image is short it stays left. */

.aeya-mem-close {
  position: relative;
  margin-block-start: clamp(2rem, 5vw, 4rem);
  background: var(--aeya-navy);
  color: var(--aeya-ink-inverse);
}

.aeya-mem-close__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  opacity: 0.72;
}

@media screen and (min-width: 750px) {
  .aeya-mem-close__media img {
    aspect-ratio: 21 / 9;
  }
}

.aeya-mem-close__line {
  margin: 0;
  padding: var(--aeya-space-4xl, 2rem) var(--aeya-pdp-gutter);
  font-family: var(--aeya-font-display);
  font-size: var(--aeya-size-lg, 1.125rem);
  line-height: 1.5;
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  max-width: var(--aeya-measure-body, 32.5em);
}

/* Over the image, and only then, the line is centred and overlaid. */
.aeya-mem-close__media + .aeya-mem-close__line {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  text-align: center;
  max-width: none;
  /* --aeya-navy at 72% falling to 0. Same token, see the provenance note at the top. */
  background: linear-gradient(to top, rgba(8, 22, 51, 0.72), rgba(8, 22, 51, 0));
}

/* ---------- Sticky buy bar ----------
   Shared component. It carries Add To Bag and nothing else in this arm: an inert
   membership control that followed the shopper down the page would read as a promise,
   and there is no promise to make yet.

   Hidden until script can tell whether the real Add To Bag has left the viewport, so
   it can never sit over the control it duplicates. */

.aeya-mem-stickybar[hidden] {
  display: none;
}

.aeya-mem-stickybar .aeya-atb {
  inline-size: 100%;
}