/* AEYA PDP split test, arm V3 "QUIET EDITORIAL".
   Arm specific rules only. Everything shared lives in aeya-pdp.css and aeya-tokens.css:
   .aeya-title, .aeya-price, .aeya-field, .aeya-sizes, .aeya-atb, .aeya-quiet-lines,
   .aeya-revcarousel, .aeya-stickybar, the image discipline backstop and the reduced
   motion guard. The two shared components this arm now renders, .aeya-cpicker and
   .aeya-proof, are painted entirely by that sheet. Nothing here recolours or resizes
   either of them: this file only places them.

   The mechanic of this arm is restraint, and the restraint has to be STRUCTURAL. It is
   bought with viewport and with whitespace, never with small type. Nothing in this file
   shrinks the body size below the shared scale, and the buy region sits on a narrow
   measure so the page reads as composed rather than as thin.

   Brand rules held here:
     - Left aligned throughout. The single exception is .aeya-ed-hero__line, which is
       centred only because it sits over large full bleed imagery.
     - Uppercase headings on the shared tracking. Never tighten it.
     - Warm ground, navy ink, one surface pairing per section. */

.aeya-pdp--editorial {
  --aeya-ed-shell: 46rem;
  --aeya-ed-gap: clamp(3rem, 8vw, 7rem);
}

/* The arm is edge to edge by design, so the shared padded layout grid is not used.
   The shell is the only thing that inserts a gutter, and it is deliberately narrow. */
.aeya-ed-shell {
  max-width: var(--aeya-ed-shell);
  margin-inline: auto;
  padding-inline: var(--aeya-pdp-gutter);
}

/* ---------- 1. Full bleed hero ----------
   One image owns the first viewport. No carousel, no thumb strip, nothing else. The
   height is fixed in viewport units rather than by aspect ratio, because the point is
   that the frame occupies the screen whatever shape the photograph is. */

.aeya-ed-hero {
  position: relative;
  display: block;
  min-block-size: 92vh;
  background: var(--aeya-stone);
  overflow: hidden;
}

/* The class selector is not the constraint. The hero renders an <img> from image_tag
   when a frame exists and an <svg> from placeholder_svg_tag when one does not, and
   image_tag can drop its class attribute, so the container scoped selectors are what
   actually hold both branches inside the frame. */
.aeya-ed-hero__img,
.aeya-ed-hero > img,
.aeya-ed-hero > svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (min-width: 750px) {
  .aeya-ed-hero {
    min-block-size: 88vh;
  }
}

/* The only centred text in the arm, and only because it sits over full bleed imagery.
   Set on the display face at heading tracking, with a soft scrim behind it so the line
   stays legible over a photograph without a slab of flat colour appearing on the page. */
.aeya-ed-hero__line {
  position: absolute;
  inset-inline: 0;
  inset-block-end: clamp(2.5rem, 8vh, 6rem);
  margin: 0;
  padding-inline: var(--aeya-pdp-gutter);
  text-align: center;
  font-family: var(--aeya-font-display);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: var(--aeya-weight-subheading, 500);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-heading, 0.25em);
  line-height: 1.3;
  color: var(--aeya-ink-inverse);
  /* Tonal, derived from --aeya-navy (#081633 = rgb(8 22 51)) at 45%. A scrim cannot
     take a custom property inside a shadow colour on every supported engine, so the
     channels are written out and named here rather than drifted to a new value. */
  text-shadow: 0 1px 24px rgb(8 22 51 / 45%);
}

/* Theme editor only. Never rendered on the storefront. */
.aeya-ed-editor-note {
  max-width: var(--aeya-ed-shell);
  margin: var(--aeya-space-lg, 1rem) auto 0;
  padding: var(--aeya-space-md, 0.8rem) var(--aeya-pdp-gutter);
  border-inline-start: var(--aeya-border-w-emphasis, 2px) solid var(--aeya-error);
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.5;
}

/* ---------- 2 to 8. The buy region ----------
   Narrow, left aligned, and given a lot of air above and below so that arriving at it
   after the hero feels like turning a page rather than hitting a control panel. */

.aeya-ed-buy {
  padding-block: var(--aeya-ed-gap);
}

.aeya-ed-eyebrow {
  margin-block-end: var(--aeya-space-lg, 1rem);
  opacity: 0.65;
}

.aeya-ed-title {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  margin-block-end: var(--aeya-space-lg, 1rem);
}

/* The lead sentence. The largest body type on the page, because it is the whole
   proposition of the arm. Set on the serif face so it reads as a statement rather than
   as a product attribute. */
.aeya-ed-lead {
  font-family: var(--aeya-font-serif);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  font-weight: 300;
  max-width: 22ch;
  margin: 0 0 var(--aeya-space-4xl, 2rem);
}

.aeya-ed-price {
  margin-block-end: var(--aeya-space-4xl, 2rem);
}

/* ---------- 5. Colour picker ----------
   The bespoke .aeya-ed-swatch rules that lived here are DELETED. The control is now the
   shared component in aeya-pdp.css (.aeya-cpicker), which carries the measured 58 x 88
   photographic tile, the hairline that recolours on selection without moving anything,
   and the named colour field fallback. Nothing below redefines any of it.

   All this arm adds is rhythm. The buy region is deliberately airy, and the shared
   .aeya-field bottom margin is tuned for a dense two column buy box rather than for this
   one, so the picker is given the same clearance the price above it takes. */

.aeya-pdp--editorial .aeya-cpicker {
  margin-block-end: var(--aeya-space-4xl, 2rem);
}

/* ---------- 6. Size guide ----------
   The snippet is only rendered once real figures exist, so this rule never applies to an
   empty chart. It just gives the trigger room under the size row. */

.aeya-ed-sizechart {
  margin-block-start: var(--aeya-space-lg, 1rem);
}

/* IMAGE DISCIPLINE. The shared size chart snippet passes
   class: 'aeya-sizechart__diagram-img' and no sheet in the theme declares a rule for
   that class, so the diagram would be held up only by the zero specificity backstop.
   Constrained here by its container as well, so it holds whether or not the class lands.
   This arm ships with no confirmed figures, so the snippet is not called today, but a
   class only constraint is precisely the failure that produced a 4672 x 7008 image
   elsewhere in this programme. */
.aeya-ed-sizechart .aeya-sizechart__diagram img,
.aeya-ed-sizechart .aeya-sizechart__diagram-img {
  display: block;
  inline-size: 100%;
  max-inline-size: 40rem;
  block-size: auto;
}

/* ---------- 7. Add to bag ----------
   The brandbook outlined rectangle, applied rather than held in reserve. In an arm this
   quiet a filled navy slab is the loudest object on the page, which is the wrong signal. */

.aeya-ed-atb {
  margin-block-start: var(--aeya-space-lg, 1rem);
  transition: background var(--aeya-motion-fast, 0.298s) ease, color var(--aeya-motion-fast, 0.298s) ease;
}

.aeya-ed-atb:hover:not([disabled]) {
  background: var(--aeya-navy);
  color: var(--aeya-ink-inverse);
  opacity: 1;
}

/* ---------- 8. Two quiet lines ---------- */

.aeya-ed-quiet {
  margin-block-start: var(--aeya-space-xl, 1.25rem);
}

/* The no script fallback select. Hidden once the buttons are live. */
.aeya-ed-fallback select {
  inline-size: 100%;
  min-block-size: var(--aeya-touch-target, 36px);
  padding: var(--aeya-input-pad, 0.8rem);
  border: var(--aeya-border-w) solid var(--aeya-border);
  border-radius: var(--aeya-radius-input, 4px);
  background: transparent;
  color: var(--aeya-ink);
  font-family: var(--aeya-font);
}

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

/* ---------- 9. Story run one ----------
   Full bleed frames, stacked, edge to edge, no gutters. The frames touch, which is what
   makes the run read as a sequence rather than as a gallery of tiles. */

.aeya-ed-story {
  display: block;
  margin: 0;
}

.aeya-ed-frame {
  position: relative;
  margin: 0;
  display: block;
  background: var(--aeya-stone);
}

.aeya-ed-frame__img,
.aeya-ed-frame > img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media screen and (min-width: 750px) {
  .aeya-ed-frame__img,
  .aeya-ed-frame > img {
    aspect-ratio: 16 / 10;
  }
}

/* Captions sit under the frame, left aligned on the shell measure. Never over the image,
   because the only text permitted over imagery in this arm is the hero line. */
.aeya-ed-caption {
  max-width: var(--aeya-ed-shell);
  margin-inline: auto;
  padding: var(--aeya-space-lg, 1rem) var(--aeya-pdp-gutter) var(--aeya-space-3xl, 1.75rem);
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.6;
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  opacity: 0.75;
  text-align: left;
}

/* ---------- 10. The three named blocks ----------
   The whole product argument. Three at most, one to three lines each, on a narrow
   measure with a hairline between them so the page still has structure with only one. */

.aeya-ed-named {
  padding-block: var(--aeya-ed-gap);
  display: grid;
  gap: var(--aeya-space-4xl, 2rem);
}

.aeya-ed-named__item + .aeya-ed-named__item {
  padding-block-start: var(--aeya-space-4xl, 2rem);
  border-block-start: var(--aeya-border-w) solid var(--aeya-border);
}

.aeya-ed-named__heading {
  margin-block-end: var(--aeya-space-md, 0.8rem);
}

.aeya-ed-named__body {
  font-size: var(--aeya-size-md, 1rem);
  line-height: var(--aeya-leading-body, 1.6);
  max-width: var(--aeya-measure-body-narrow, 22.75em);
}

.aeya-ed-named__body p {
  margin: 0 0 var(--aeya-space-xs, 0.5rem);
}

.aeya-ed-named__body p:last-child {
  margin-block-end: 0;
}

/* ---------- 11. Story run two, the close ----------
   The largest block on the page. Two columns from the medium breakpoint so the run has
   rhythm, still edge to edge, still without gutters between the frames. */

.aeya-ed-close {
  padding-block-start: var(--aeya-space-5xl, 3rem);
}

.aeya-ed-close__heading {
  margin-block-end: var(--aeya-space-4xl, 2rem);
}

.aeya-ed-close__run {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

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

  /* Every third frame runs the full width, so the sequence breathes instead of
     marching. With eight frames this lands on the first and the sixth. */
  .aeya-ed-close__frame:nth-child(5n + 1) {
    grid-column: 1 / -1;
  }
}

.aeya-ed-close__frame {
  position: relative;
  margin: 0;
  background: var(--aeya-stone);
}

.aeya-ed-close__img,
.aeya-ed-close__frame > img {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media screen and (min-width: 750px) {
  .aeya-ed-close__frame:nth-child(5n + 1) .aeya-ed-close__img,
  .aeya-ed-close__frame:nth-child(5n + 1) > img {
    aspect-ratio: 16 / 9;
  }
}

.aeya-ed-caption--close {
  max-width: none;
  margin-inline: 0;
  padding: var(--aeya-space-md, 0.8rem) var(--aeya-pdp-gutter) var(--aeya-space-4xl, 2rem);
}

/* ---------- 12. Collection framing ----------
   The arm's entire adjacency surface: one line and one link. No rail, no grid, no cards,
   no prices. The tail ends on the brand rather than on an offer. */

.aeya-ed-collection {
  padding-block: var(--aeya-ed-gap);
}

.aeya-ed-collection__line {
  font-family: var(--aeya-font-serif);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 300;
  line-height: 1.5;
  max-width: 28ch;
  margin: 0 0 var(--aeya-space-xl, 1.25rem);
}

.aeya-ed-collection__link {
  display: inline-block;
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  color: var(--aeya-ink);
  text-decoration: none;
  padding-block-end: var(--aeya-space-2xs, 0.25rem);
  border-block-end: var(--aeya-border-w) solid var(--aeya-ink);
}

.aeya-ed-collection__link:hover {
  opacity: 0.7;
}

/* ---------- 13. Reviews, last ----------
   Uniform card heights and small star marks come from the shared carousel. All this arm
   adds is the space that keeps proof clearly at the foot of the page. */

.aeya-ed-reviews {
  padding-block-end: var(--aeya-ed-gap);
}

/* The proof strip, in this arm's own proof position rather than the standard's. The
   shared component paints itself and nothing here recolours or resizes it. Its own
   bottom margin is --aeya-space-2xl, which is the golden 24px clearance measured
   between the marks and the element beneath them, so it is left alone: here that gap
   falls between the marks and the review track, which is the element the line is making
   a claim about. */
.aeya-ed-reviews .aeya-proof {
  margin-block-start: var(--aeya-space-lg, 1rem);
}

/* ---------- 14. Sticky buy bar ----------
   Shared component. Two departures for this arm.

   1. It runs on desktop as well as mobile. The shared rule hides it above 750px, which
      is right for an arm whose buy box is sticky in a two column layout. This arm has a
      single column and a wordless fold, so the bar is the buy path on every width.
   2. It is armed by script only once the hero has left the viewport, so it can never
      appear in the first screen. */

.aeya-pdp--editorial .aeya-stickybar--editorial {
  justify-content: space-between;
  gap: var(--aeya-space-lg, 1rem);
  padding-block: var(--aeya-space-sm, 0.7rem);
}

.aeya-pdp--editorial .aeya-stickybar--editorial .aeya-ed-atb--sticky {
  inline-size: auto;
  min-inline-size: 12rem;
  min-block-size: 2.75rem;
  margin-block-start: 0;
}

@media screen and (min-width: 750px) {
  .aeya-pdp--editorial .aeya-stickybar--editorial {
    display: flex;
    padding-inline: var(--aeya-pdp-gutter);
  }

  .aeya-pdp--editorial .aeya-stickybar--editorial .aeya-ed-atb--sticky {
    min-inline-size: 16rem;
  }
}

/* Scripting off means the bar is never armed. Keep it out of the flow entirely rather
   than parked off screen where a screen reader can still reach a control the sighted
   page does not offer. */
.aeya-pdp--editorial .aeya-stickybar--editorial:not(.is-visible) {
  visibility: hidden;
}

.aeya-pdp--editorial .aeya-stickybar--editorial.is-visible {
  visibility: visible;
}