/* AEYA PDP split test, arm C0 CONTROL.
   Concept specific rules only. Everything shared lives in aeya-pdp.css and is reused
   as is. Nothing here redefines a shared class, it only adds what the control arm
   needs on top.

   This arm is a faithful rebuild of the live product page information architecture.
   The only changes against live are the six logged defects:
     1. swatch clicks swap in place, no reload and no white flash
     2. review count hidden below the threshold, stars only
     3. review cards uniform height
     4. fit line single sourced, one variable in two places
     5. everything renders with JavaScript broken, no scroll reveal
     6. under bag block set as quiet lines rather than a wall

   Scope: .aeya-pdp--control */

/* ---------- Accessibility utilities ---------- */

.aeya-pdp--control .aeya-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible focus on every interactive control in the arm. */
.aeya-pdp--control :focus-visible {
  outline: var(--aeya-border-w-emphasis, 2px) solid var(--aeya-royal, #1d3686);
  outline-offset: 2px;
}

/* ---------- Gallery ----------
   Live layout is a stacked media column with a thumbnail strip. The hero is the swap
   target for a colour change, the stack below it fills the column on desktop so the
   sticky buy box has something to sit against. */

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

/* Defect 1. Every media item is rendered into the hero and stacked in place, so a
   colour change is an opacity cross fade between images the browser has already
   decoded. There is no fetch, no emptied box and no white flash. The active frame is
   marked server side, so the correct image is on screen before any script runs. */
.aeya-pdp--control .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--control .aeya-gallery__frame.is-active {
  opacity: 1;
}

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

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

  .aeya-pdp--control .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--control .aeya-gallery__stack img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Thumb buttons clear the 44px touch target without changing the shared sizing. */
.aeya-pdp--control .aeya-gallery__thumbs button {
  min-block-size: 2.75rem;
}

/* Fit line over the hero image. Left aligned, because the brand centres text only
   over large full bleed imagery and this is a contained crop. */
.aeya-pdp--control .aeya-gallery__fit {
  position: absolute;
  z-index: 1;
  inset-inline-start: 0;
  inset-block-end: 0;
  max-inline-size: 100%;
  margin: 0;
  padding: var(--aeya-space-sm, 0.7rem) var(--aeya-space-md, 0.8rem);
  background: color-mix(in srgb, var(--aeya-navy) 78%, transparent);
  color: var(--aeya-ink-inverse);
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  border-start-end-radius: var(--aeya-radius-card, 4px);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .aeya-pdp--control .aeya-gallery__fit {
    background: var(--aeya-navy);
  }
}

/* ---------- Rating row ---------- */

.aeya-pdp--control .aeya-rating {
  display: flex;
  align-items: center;
  gap: var(--aeya-space-xs, 0.5rem);
  margin-block-end: var(--aeya-space-md, 0.8rem);
}

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

/* ---------- Buy box ---------- */

.aeya-pdp--control .aeya-swatch {
  background-color: var(--aeya-swatch-fill, var(--aeya-stone));
  background-size: cover;
  background-position: center;
}

/* Expand the hit area to 44px without growing the 32px dot. The gap between swatches
   is wider than the overhang, so the targets never overlap. */
.aeya-pdp--control .aeya-swatch::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.aeya-pdp--control .aeya-swatch[data-available='false'] {
  opacity: 0.4;
}

.aeya-pdp--control .aeya-size[data-available='false'] {
  opacity: 0.35;
  text-decoration: line-through;
}

.aeya-pdp--control .aeya-size-guide {
  font-size: var(--aeya-size-2xs, 0.75rem);
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  text-transform: uppercase;
  color: inherit;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

.aeya-pdp--control .aeya-buy-form {
  margin: 0;
}

.aeya-pdp--control .aeya-buy-form .aeya-atb + .shopify-payment-button {
  margin-block-start: var(--aeya-space-sm, 0.7rem);
  display: block;
}

.aeya-pdp--control .aeya-form-error {
  margin: var(--aeya-space-sm, 0.7rem) 0 0;
  font-size: var(--aeya-size-sm, 0.875rem);
  color: var(--aeya-error, #8b0000);
}

/* Fit note in the buy box. Same variable as the gallery overlay, so the two can never
   state different fit information. */
.aeya-pdp--control .aeya-fit-note {
  margin: var(--aeya-space-md, 0.8rem) 0 0;
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: 1.5;
  opacity: 0.85;
}

/* No JavaScript fallback for option selection. Hidden whenever scripting is on. */
.aeya-pdp--control .aeya-nojs-options {
  margin-block-start: var(--aeya-space-sm, 0.7rem);
  font-size: var(--aeya-size-sm, 0.875rem);
}

.aeya-pdp--control .aeya-nojs-options a {
  color: inherit;
  display: inline-block;
  padding: 0.4rem 0;
  margin-inline-end: var(--aeya-space-sm, 0.7rem);
}

/* ---------- Description accordion ----------
   Native details and summary, so fabric and construction stay reachable with
   JavaScript broken. */

.aeya-pdp--control .aeya-accordion {
  border-block-start: 1px solid var(--aeya-border);
  max-width: var(--aeya-pdp-measure);
}

.aeya-pdp--control .aeya-accordion:last-of-type {
  border-block-end: 1px solid var(--aeya-border);
}

.aeya-pdp--control .aeya-accordion > summary {
  list-style: none;
  cursor: pointer;
  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);
  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);
}

.aeya-pdp--control .aeya-accordion > summary::-webkit-details-marker {
  display: none;
}

.aeya-pdp--control .aeya-accordion > summary::after {
  content: '+';
  font-size: var(--aeya-size-lg, 1.125rem);
  line-height: 1;
  flex: 0 0 auto;
}

.aeya-pdp--control .aeya-accordion[open] > summary::after {
  content: '\2212';
}

.aeya-pdp--control .aeya-accordion__body {
  padding-block-end: var(--aeya-space-lg, 1rem);
}

.aeya-pdp--control .aeya-accordion__body > :last-child {
  margin-block-end: 0;
}

/* ---------- Annotated feature imagery ---------- */

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

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

.aeya-pdp--control .aeya-feature {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-stone);
  aspect-ratio: 3 / 4;
}

.aeya-pdp--control .aeya-feature img,
.aeya-pdp--control .aeya-feature svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.aeya-pdp--control .aeya-feature__callout {
  position: absolute;
  inset-inline-start: var(--aeya-space-md, 0.8rem);
  inset-block-end: var(--aeya-space-md, 0.8rem);
  max-inline-size: calc(100% - (var(--aeya-space-md, 0.8rem) * 2));
  margin: 0;
  padding: var(--aeya-space-xs, 0.5rem) var(--aeya-space-md, 0.8rem);
  background: var(--aeya-cloud);
  color: var(--aeya-navy);
  border-radius: var(--aeya-radius-card, 4px);
  text-align: left;
}

.aeya-pdp--control .aeya-feature__label {
  display: block;
  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);
}

.aeya-pdp--control .aeya-feature__note {
  display: block;
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.45;
  opacity: 0.75;
  margin-block-start: 0.15rem;
}

/* ---------- Complete the look ---------- */

.aeya-pdp--control .aeya-ctl {
  display: grid;
  gap: var(--aeya-space-lg, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.aeya-pdp--control .aeya-ctl a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.aeya-pdp--control .aeya-ctl__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-stone);
  margin-block-end: var(--aeya-space-xs, 0.5rem);
}

.aeya-pdp--control .aeya-ctl__media img,
.aeya-pdp--control .aeya-ctl__media svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.aeya-pdp--control .aeya-ctl__title {
  font-size: var(--aeya-size-2xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  margin: 0;
}

.aeya-pdp--control .aeya-ctl__price {
  font-size: var(--aeya-size-sm, 0.875rem);
  margin: 0.15rem 0 0;
  opacity: 0.8;
}

/* ---------- Reviews ----------
   Uniform card height comes from .aeya-review in the shared sheet. This only sets the
   band rhythm and the aggregate line above the grid. */

.aeya-pdp--control .aeya-reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--aeya-space-xs, 0.5rem);
  margin-block-end: var(--aeya-space-lg, 1rem);
}

.aeya-pdp--control .aeya-review blockquote {
  margin: 0;
}

/* ---------- Motion ----------
   Nothing in this arm is revealed on scroll. Every band is painted by the browser
   before any script runs, so a broken script can never leave a section invisible. */