/* AEYA complete the look, cross sell rows.
   Pairs with snippets/aeya-complete-look.liquid. Namespaced .aeya-look so it can never
   collide with the .aeya-ctl card grid in aeya-pdp-control.css.

   Brand rules honoured here, from 01 Brand/Brand Rules.md:
     - Always left align. Nothing is centred.
     - Headings uppercase with wide tracking, never tightened.
     - Warm tint surface (cloud), navy ink. No pure white, no pure black.
     - Tokens only, from aeya-tokens.css, each with a literal fallback so the block
       still reads correctly if the token sheet fails to load.
     - Touch targets are at least 44px on every control.
     - No animation and no transition anywhere, so there is no motion to opt out of.
     - Mobile first. The row stacks below 750px and only becomes a three column
       row when there is width for it.
     - One price, plainly set. No struck through price, no badge, no promotional colour.
*/

.aeya-look {
  background: var(--aeya-cloud, #fffbf4);
  color: var(--aeya-navy, #081633);
  font-family: var(--aeya-font, "Inter", -apple-system, sans-serif);
  text-align: left;
  padding-block: var(--aeya-space-4xl, 2rem);
  padding-inline: var(--aeya-pdp-gutter, clamp(1rem, 4vw, 3rem));
}

.aeya-look *,
.aeya-look *::before,
.aeya-look *::after {
  box-sizing: border-box;
}

.aeya-look__inner {
  /* Centred within its band. Left aligning a 960px block inside a wide band strands a
     large empty zone on the right, which reads as a broken layout. Text inside stays
     left aligned, per the brand rule. */
  margin-inline: auto;
  max-width: 60rem;
  margin-inline: 0;
}

.aeya-look__heading {
  font-family: var(--aeya-font-display, var(--aeya-font, "Inter", sans-serif));
  font-size: var(--aeya-size-lg, 1.125rem);
  font-weight: var(--aeya-weight-subheading, 500);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-heading, 0.25em);
  line-height: var(--aeya-leading-heading, 1.15);
  margin: 0 0 var(--aeya-space-2xl, 1.5rem);
}

.aeya-look__heading-accent {
  font-family: var(--aeya-font-serif, Georgia, "Times New Roman", serif);
  font-style: normal;
  font-weight: 300;
  font-size: 1.09em;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
}

.aeya-look__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.aeya-look__row {
  border-block-start: var(--aeya-border-w, 1px) solid var(--aeya-border, #e6e6e6);
}

.aeya-look__row:last-child {
  border-block-end: var(--aeya-border-w, 1px) solid var(--aeya-border, #e6e6e6);
}

/* ---------- Row layout, mobile first ---------- */

.aeya-look__form {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas:
    "media body"
    "sizes sizes"
    "note  note"
    "add   add";
  column-gap: var(--aeya-space-lg, 1rem);
  row-gap: var(--aeya-space-md, 0.8rem);
  align-items: start;
  padding-block: var(--aeya-space-xl, 1.25rem);
  margin: 0;
}

@media screen and (min-width: 750px) {
  .aeya-look__form {
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    grid-template-areas:
      "media body  add"
      "media sizes add"
      "media note  add";
    column-gap: var(--aeya-space-xl, 1.25rem);
    align-items: center;
  }
}

/* ---------- Media ---------- */

.aeya-look__media {
  grid-area: media;
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-stone, #d3cdc5);
}

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

/* ---------- Naming and price ---------- */

.aeya-look__body {
  grid-area: body;
  min-inline-size: 0;
}

.aeya-look__title {
  margin: 0;
  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);
  line-height: 1.3;
}

.aeya-look__title a {
  color: inherit;
  text-decoration: none;
}

.aeya-look__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.aeya-look__title a:focus-visible {
  outline: var(--aeya-border-w-emphasis, 2px) solid var(--aeya-navy, #081633);
  outline-offset: 3px;
}

.aeya-look__colour {
  margin: var(--aeya-space-2xs, 0.25rem) 0 0;
  font-size: var(--aeya-size-2xs, 0.75rem);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  opacity: 0.65;
}

.aeya-look__price {
  margin: var(--aeya-space-xs, 0.5rem) 0 0;
  font-size: var(--aeya-size-sm, 0.875rem);
  font-weight: var(--aeya-weight-subheading, 500);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
}

/* ---------- Size selector ---------- */

.aeya-look__sizes {
  grid-area: sizes;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

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

.aeya-look__size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aeya-space-xs, 0.5rem);
}

.aeya-look__size {
  position: relative;
  display: block;
}

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

.aeya-look__size-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: var(--aeya-space-sm, 0.7rem);
  border: var(--aeya-border-w, 1px) solid var(--aeya-border, #e6e6e6);
  border-radius: var(--aeya-radius-card, 4px);
  background: transparent;
  color: var(--aeya-navy, #081633);
  font-size: var(--aeya-size-xs, 0.8125rem);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  cursor: pointer;
}

.aeya-look__size-input:checked + .aeya-look__size-label {
  border-color: var(--aeya-navy, #081633);
  background: var(--aeya-navy, #081633);
  color: var(--aeya-cloud, #fffbf4);
}

.aeya-look__size-input:focus-visible + .aeya-look__size-label {
  outline: var(--aeya-border-w-emphasis, 2px) solid var(--aeya-navy, #081633);
  outline-offset: 3px;
}

.aeya-look__size-input:disabled + .aeya-look__size-label {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
  border-style: dashed;
}

/* ---------- Add control ---------- */

.aeya-look__add {
  grid-area: add;
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding-block: var(--aeya-space-sm, 0.7rem);
  padding-inline: var(--aeya-space-3xl, 1.75rem);
  border: var(--aeya-border-w, 1px) solid var(--aeya-navy, #081633);
  border-radius: var(--aeya-radius-button, 14px);
  background: var(--aeya-navy, #081633);
  color: var(--aeya-cloud, #fffbf4);
  font-family: inherit;
  font-size: var(--aeya-size-2xs, 0.75rem);
  font-weight: var(--aeya-weight-subheading, 500);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  cursor: pointer;
}

@media screen and (min-width: 750px) {
  .aeya-look__add {
    inline-size: auto;
    min-inline-size: 7.5rem;
  }
}

.aeya-look__add:hover {
  opacity: 0.88;
}

.aeya-look__add:focus-visible {
  outline: var(--aeya-border-w-emphasis, 2px) solid var(--aeya-navy, #081633);
  outline-offset: 3px;
}

.aeya-look__add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Note. Guidance first, then confirmation, then failure ---------- */

.aeya-look__note {
  grid-area: note;
  margin: 0;
  min-block-size: 1.2em;
  font-size: var(--aeya-size-2xs, 0.75rem);
  line-height: 1.5;
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  opacity: 0.75;
}

.aeya-look__note--done {
  color: var(--aeya-success, #006400);
  opacity: 1;
}

.aeya-look__note--failed {
  color: var(--aeya-error, #8b0000);
  opacity: 1;
}

.aeya-look__vh {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}