:root {
  color-scheme: light;
  color: #202630;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  display: flex;
  min-block-size: 100svh;
  min-inline-size: 0;
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 1;
  align-items: stretch;
  justify-content: space-between;
  background:
    radial-gradient(ellipse at top left, rgb(213 228 244 / 80%), transparent 65%),
    radial-gradient(ellipse at bottom right, rgb(239 222 233 / 70%), transparent 65%),
    #eef1f5;

  & :where(a, button, dialog, input, textarea, [popover]) {
    color: inherit;
    font: inherit;

    &:where(a) {
      text-decoration: none;

      &:hover,
      &[aria-current="page"] {
        text-decoration: underline;
      }
    }
  }

  & :where(section > form) {
    padding: 0.75em;
    gap: 0.5em;
  }

  & :where(button, form[aria-label="Product filters"] > fieldset > div > div > a) {
    padding: 0.25em 0.75em;
  }

  & shop-cart-sync {
    position: absolute;
  }

  & :is(body > main, body > div > header, body > div > footer) {
    inline-size: 100%;
    max-inline-size: 80rem;
    align-self: center;
  }

  & :is(article, button:not(header button, article > figure > button, [aria-label="Product images"] > button, [aria-label="Quantity selection"] button), dialog, form[aria-label="Product filters"] > fieldset > div > div > a, header, footer, header nav a[aria-current="page"], :where(section[aria-label="Product details"] [aria-label="Purchase options"], section[aria-label="Product details"] label:has(> input[name="id"]) > span, [aria-label="Quantity selection"] > div, section[aria-label="Shopping cart"] :is([aria-label="Empty cart"], :is([aria-label="Empty cart"], [aria-label="Cart actions"]) > a), header form[role="search"]:has(> button[aria-expanded="true"]), section > form, section[aria-label="Brand counters"] > nav, section[aria-label="Brand counters"] > div, section[aria-label="Brand counters"] > div > div, section[aria-label="Brand counters"] > section, section[aria-label] :is(input:not([type="hidden"], [aria-label="Quantity selection"] input), textarea), [popover], :is(fieldset[popover], form[aria-label^="Discovery "]) :is(label:is(:hover, :has(> input:checked)), a:is(:hover, [aria-current="true"])) > span), article > figure > :is(a, button) > dl, article > figure > :is(a, button) > dl > div:last-child > dd) {
    isolation: isolate;
    background: transparent;
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 1.5rem;
    box-shadow:
      0 8px 24px rgb(25 40 60 / 8%),
      inset 0 1px 1px rgb(255 255 255 / 75%),
      inset 0 -2px 4px rgb(25 40 60 / 8%),
      inset 1px 0 1px rgb(255 255 255 / 40%),
      inset -1px 0 1px rgb(255 255 255 / 20%);

    &:where(:not(input, textarea))::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background: white;
      opacity: 0.12;
      pointer-events: none;
    }

    &:where(input, textarea) {
      background: rgb(255 255 255 / 12%);
    }

    &:where(section[aria-label="Brand counters"] > div > div)::before {
      opacity: 0.72;
    }
  }

  & :where(article, button, form[aria-label="Product filters"] > fieldset > div > div > a, header, footer, header nav a[aria-current="page"], section[aria-label="Product details"] :is([aria-label="Purchase options"], label:has(> input[name="id"]) > span), [aria-label="Quantity selection"] > div, section[aria-label="Shopping cart"] :is([aria-label="Empty cart"], :is([aria-label="Empty cart"], [aria-label="Cart actions"]) > a), section > form, section[aria-label="Brand counters"] > nav, section[aria-label="Brand counters"] > div, section[aria-label="Brand counters"] > div > div, section[aria-label="Brand counters"] > section, :is(fieldset[popover], form[aria-label^="Discovery "]) :is(label, a) > span, article > figure > :is(a, button) > dl > div:last-child > dd) {
    position: relative;
  }

  & :is(dialog, [popover], article > figure > :is(a, button) > dl, section[aria-label="Brand counters"] > div > div, form[aria-label="Discovery selection"], header form[role="search"]:has(> button[aria-expanded="true"])) {
    backdrop-filter: blur(24px);
  }

  & :is(button:not(header button, article > figure > button, [aria-label="Product images"] > button, [aria-label="Quantity selection"] button):enabled:hover, section[aria-label="Shopping cart"] :is([aria-label="Empty cart"], [aria-label="Cart actions"]) > a:hover, :is(fieldset[popover], form[aria-label^="Discovery "]) :is(label, a):hover > span)::before {
    opacity: 0.18;
  }

  & :is(:focus-visible:not(header input[type="search"], [aria-label="Quantity selection"] input), :is(article > dialog, form[aria-label="Add product to cart"]) label:has(> input:focus-visible) > span, :is(fieldset[popover], form[aria-label^="Discovery "]) label:has(> input:focus-visible) > span) {
    outline: 2px solid #245b89;
    outline-offset: 3px;
  }

  & :where(form, fieldset, form > p) {
    margin: inherit;
  }

  & :where(form:not([hidden])) {
    display: grid;
    grid-template-columns: inherit;
  }

  & :where(form[aria-label="Discovery selection"])[hidden] {
    display: grid;
    visibility: hidden;
  }

  & :where(fieldset:not([popover])) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding: 0;
    border: 0;
  }

  & :where(form > fieldset, form > div, form > p) {
    grid-column: 1 / -1;
  }

  & :where(button[popovertarget]) {
    inline-size: min(100cqi, max(7.5rem, calc((100cqi - 4em) / 9)));
    flex: none;
    block-size: 2.25em;
    display: flex;
    padding-inline: 0.5em;
    gap: 0.25em;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &::after {
      content: "▾";
      flex: none;
    }

    & > span {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:has(+ fieldset[popover] :is(input:checked, input[type="hidden"]):not([value=""])) {
      background: CanvasText;
      color: Canvas;

      &::before {
        content: none;
      }
    }
  }

  & :where(fieldset[popover] > div, article > dialog, form[aria-label="Discovery selection"] [popover] > ul) {
    scrollbar-width: thin;
    scrollbar-color: rgb(from currentColor r g b / 35%) transparent;
    overscroll-behavior: contain;
  }

  & :where(fieldset[popover], form[aria-label^="Discovery "] [popover]) {
    position: fixed;
    inset: auto;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline;
    margin: 0.25em 0;
    padding: 0.75em 0.5em;
    min-inline-size: anchor-size(self-inline);
    max-inline-size: min(24rem, calc(100vw - 2rem));
    overflow: hidden;

    &:popover-open {
      display: grid;
      grid-template-rows: minmax(0, 1fr);
    }

    & > :is(div, ul) {
      display: grid;
      grid-auto-rows: max-content;
      align-content: start;
      min-block-size: 0;
      max-block-size: calc(min(50svh, 20rem) - 1.5em - 2px);
      padding: 0.375em;
      border-radius: inherit;
      overflow: auto;
      gap: 0.25em;
    }

  }

  & :where(fieldset[popover], form[aria-label^="Discovery "]) :is(label, a) {
      position: relative;
      display: block;
      border-radius: inherit;
      cursor: pointer;

      & > input {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        margin: 0;
        opacity: 0;
        cursor: inherit;
      }

      & > span {
        display: flex;
        align-items: center;
        min-block-size: 2.25em;
        padding: 0.25em 0.5em;
        border: 1px solid transparent;
        border-radius: inherit;
        white-space: normal;
        overflow-wrap: anywhere;
      }
  }

  & :where(form > div, fieldset:not([popover]) > div, fieldset:not([popover]) > div > div, form > p:not([hidden])) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  & :where(fieldset:not([popover]) > div) {
    flex: 1 0 auto;
    max-inline-size: 100%;
  }

  & :where(fieldset:not([popover]) > div > div) {
    flex: none;
    margin-inline-start: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  & :is(article > a, article > figure > :is(a, button)) {
    padding: 1em;
  }

  & footer {
    & nav > ul {
      justify-content: start;
      align-items: baseline;
    }

    & > p {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 0.5em;

      & > small {
        grid-column: 3;
        justify-self: start;
        white-space: nowrap;
      }

      & > a {
        grid-column: 2;
        display: block;
        line-height: 0;

        & > img {
          inline-size: 94px;
          block-size: auto;
          object-fit: contain;

          @media (max-width: 600px) {
            inline-size: 72px;
          }
        }
      }
    }
  }

  & header {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding-block: 8px;
    row-gap: 4px;

    & > a {
      grid-row: 1;
      grid-column: 1 / -1;
      justify-self: center;
      line-height: 0;

      & > img {
        inline-size: 11rem;
        max-inline-size: 100%;
        block-size: 2.75rem;
        object-fit: contain;
      }
    }

    & > nav {
      grid-row: 2;
      grid-column: 2;

      &:last-child {
        grid-column: 3;
        justify-self: end;
      }
    }

    & nav > ul {
      align-items: center;
      justify-content: start;
      flex-wrap: nowrap;
      gap: clamp(6px, 1.5vw, 20px);
      white-space: nowrap;
    }

    & > nav:first-of-type {
      font-weight: 700;

      & > ul {
        gap: clamp(2px, 1vw, 12px);
      }

      & li > a {
        display: inline-flex;
        align-items: center;
        min-block-size: 32px;
        padding-block: 4px;
        padding-inline: clamp(2px, 0.6vw, 8px);
        text-decoration: none;
      }
    }

    & > nav:first-of-type a[aria-current="page"] {
      border-radius: 999px;
    }

    & a:has(> svg) {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 0.375rem;
      min-block-size: 32px;
    }

    & svg {
      display: block;
      flex: none;
      inline-size: 24px;
      block-size: 24px;
    }

    & li:has(> form[role="search"]) {
      position: relative;
      inline-size: 24px;
      block-size: 32px;

      &:has(button:not([aria-expanded])) {
        inline-size: auto;
        block-size: auto;
      }
    }

    & form[role="search"] {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 50%;
      transform: translateY(-50%);
      z-index: 2;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0;
      inline-size: 24px;
      block-size: 36px;
      overflow: hidden;
      transition: inline-size 200ms ease;

      &:has(> button[aria-expanded="true"], > button:not([aria-expanded])) {
        inline-size: min(20rem, calc(100vw - 9rem));
      }

      &:has(> button:not([aria-expanded])) {
        position: static;
        transform: none;
      }

      & > input[type="search"] {
        flex: 1;
        min-inline-size: 0;
        inline-size: 0;
        block-size: 100%;
        padding: 0 8px 0 12px;
        border: 0;
        outline: none;
        background: transparent;

        &:disabled {
          visibility: hidden;
          padding: 0;
        }
      }

      & > button {
        display: grid;
        place-items: center;
        flex: 0 0 24px;
        block-size: 32px;
        padding: 0;
        border: 0;
        background: transparent;
        outline-offset: -3px;
      }

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }

    &:has(form[role="search"] > button:not([aria-expanded])) > nav:last-child {
      grid-column: 1 / -1;
      grid-row: auto;
    }

    @media (max-width: 70rem) {
      &:has(form[role="search"] > button[aria-expanded="true"]) > nav:first-of-type {
        visibility: hidden;
      }
    }

    @media (max-width: 40rem) {
      column-gap: 8px;
      font-size: 12px;

      & > a {
        grid-column: 2;

        & > img {
          inline-size: 7.5rem;
          block-size: 2rem;
        }
      }

      & > nav {
        grid-column: 1 / -1;

        &:last-child {
          grid-row: 1;
          grid-column: 3;
        }
      }

      & > nav:first-of-type > ul {
        justify-content: safe center;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;

        & > li {
          flex: none;
        }
      }

      &:has(form[role="search"] > button[aria-expanded="true"]) > a {
        visibility: hidden;
      }
    }
  }

  & :is(article > button[aria-controls], article > button[name="remove"], dialog > button[command="close"]) {
    display: grid;
    place-content: center;
    inline-size: 34px;
    block-size: 34px;
    padding: 0;

    & > svg {
      display: block;
      inline-size: 20px;
      block-size: 20px;
      pointer-events: none;
    }
  }

  & article > dialog {
    position: absolute;
    inset-block-start: auto;
    inset-block-end: 8px;
    inset-inline: 8px;
    inline-size: auto;
    max-inline-size: none;
    max-block-size: calc(100% - 16px);
    z-index: 1;
    margin: 0;
    padding: 10px;
    overflow: auto;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;

    &[open] {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    & > button {
      position: absolute;
      inset-block-start: 6px;
      inset-inline-end: 6px;
    }

    & p {
      margin: 0;
    }

    & output {
      display: block;
      min-block-size: 30px;
      padding-inline-end: 34px;
      font-size: 16px;
      font-weight: 700;
      align-content: center;
    }

    & fieldset {
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
    }

    & form > button {
      padding: 8px;

      &:disabled {
        opacity: 0.5;
      }
    }
  }

  & :is(article > dialog, form[aria-label="Discovery selection"]) [role="status"]:empty {
    display: none;
  }

  & :is(article > dialog, form[aria-label="Add product to cart"]) {
    & label {
      position: relative;
      display: inline-flex;
      cursor: pointer;

      & > span {
        padding: 3px 10px;
        border: 1px solid rgb(32 38 48 / 25%);
        border-radius: 999px;
        text-align: center;
      }

      &:has(> input:checked) > span {
        border-color: currentColor;
        font-weight: 600;
      }

      &:has(> input:disabled) {
        opacity: 0.5;
        cursor: default;
      }

      &:has(> input[disabled])::after {
        content: "";
        position: absolute;
        inset-inline: 6px;
        inset-block-start: 50%;
        border-block-start: 1px solid currentColor;
        transform: rotate(-20deg);
        pointer-events: none;
      }
    }

    & input[type="radio"] {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: 0;
      clip-path: inset(50%);
      overflow: hidden;
      white-space: nowrap;
    }

  }

  & nav[aria-label="Pagination"] {
    margin-block: 1.5rem;

    & > ul {
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      gap: clamp(2px, 0.75vw, 8px);
      font-size: 13px;
    }

    & li > :is(a, span) {
      display: grid;
      place-items: center;
      min-inline-size: 1.75rem;
      block-size: 1.75rem;
      padding-inline: 4px;
      white-space: nowrap;
    }

    & [aria-current="page"] {
      inline-size: max-content;
      block-size: auto;
      min-block-size: 1.75rem;
      aspect-ratio: 1;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-weight: 700;
    }

    & [aria-disabled="true"] {
      opacity: 0.4;
    }
  }

  & form[aria-label="Product filters"] {
    grid-template-columns: minmax(0, 1fr);
    container-type: inline-size;

    & button[name="toggle"] {
      display: grid;
      place-content: center;
      inline-size: 2.25em;
      block-size: 2.25em;
      padding: 0;

      & > svg {
        display: block;
        inline-size: 1.125em;
        block-size: 1.125em;
        pointer-events: none;
      }

      &[aria-expanded="true"] > svg {
        rotate: 180deg;
      }

      @media (prefers-reduced-motion: no-preference) {
        & > svg {
          transition: rotate 0.2s;
        }
      }

      @media (scripting: none) {
        display: none;
      }
    }

    & > fieldset:has(> button[data-advanced] + fieldset[popover] input:checked) button[name="toggle"][aria-expanded="false"] {
      background: CanvasText;
      color: Canvas;

      &::before {
        content: none;
      }
    }

    & > fieldset {
      /* Ordered after the sort controls, this empty item starts the advanced filters on a new row. */
      &::after {
        content: "";
        flex-basis: 100%;
        grid-column: 1 / -1;
      }

      & > button[data-advanced] {
        order: 1;
      }

      @media (max-width: 40rem) {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 12px;

        & > button[popovertarget],
        & > div > button[popovertarget] {
          inline-size: auto;
          padding-inline: 0.875em 0.75em;
        }
      }

      @media (width > 40rem) {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));

        & button[popovertarget] {
          inline-size: auto;
        }

        & > div {
          display: contents;

          & > div {
            grid-column: span 2 / -1;
          }
        }
      }
    }

    @container (min-width: 72rem) {
      & > fieldset {
        grid-template-columns: repeat(10, minmax(0, 1fr));
      }
    }

    @media (scripting: enabled) {
      & > fieldset:has(button[name="toggle"][aria-expanded="false"]) {
        &::after,
        & > button[data-advanced] {
          display: none;
        }
      }
    }
  }

  & form[aria-label="Discovery selection"] {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    position: sticky;
    inset-block-start: 0;
    align-self: start;
    align-items: center;
    column-gap: 1em;
    z-index: 3;

    & > h2 {
      grid-column: 1 / -1;
      grid-row: 1;
      margin: 0;
      font: inherit;
      font-size: calc(1em + 2px);
      font-weight: 700;
      line-height: 1lh;
      text-align: center;
    }

    & > :is(fieldset, div) {
      grid-column: auto;
    }

    & > fieldset {
      gap: 0.25em;
      justify-content: start;
    }

    & > div {
      display: grid;
      gap: 0.5em;
      align-items: center;

      &:first-of-type {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      &:last-of-type {
        grid-template-columns: repeat(2, max-content);
      }
    }

    & button[popovertarget] {
      inline-size: max-content;
    }

    & progress {
      inline-size: 100%;
    }

    & [popover] {
      inline-size: max-content;
      min-inline-size: 0;
      max-inline-size: calc(100vw - 2rem);
      justify-content: stretch;

      & > ul {
        margin: 0;
        gap: 0.5em;
        list-style: none;
      }
    }

    & :is(progress, input) {
      accent-color: currentColor;
    }

    & li {
      display: grid;
      grid-template-columns: 1em minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.5em;

      & > img {
        inline-size: 1em;
        block-size: 1em;
        object-fit: contain;
      }

      & > span {
        grid-column: 2;
      }

      & > div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.25em;

        & > button {
          padding-inline: 0.5em;
        }

        & > output {
          min-inline-size: 2ch;
          text-align: center;
        }
      }
    }

    @media (max-width: 48rem) {
      grid-template-columns: minmax(0, 1fr) max-content;

      & > div:first-of-type {
        grid-column: 1 / -1;
        grid-row: 2;
      }

      & > div:last-of-type {
        grid-column: 2;
        grid-row: 3;
      }

      & > fieldset {
        grid-row: 3;
      }
    }

    @media (max-width: 32rem) {
      & > :is(fieldset, div:last-of-type) {
        grid-column: 1 / -1;
      }

      & > div:last-of-type {
        grid-row: 4;
        justify-self: end;
      }
    }
  }

  & article > button[name="remove"] {
    text-align: center;
    font-weight: 700;

    & > :is(output, span) {
      grid-area: 1 / 1;
    }

    & > span {
      visibility: hidden;
    }

    &:enabled:is(:hover, :focus-visible) {
      & > output { visibility: hidden; }
      & > span { visibility: visible; }
    }

    &:disabled {
      cursor: default;
    }
  }

  & :is(section:has(> article, > figure, > form[aria-label="Product filters"]) > h1, section[aria-label="Product details"] > hgroup > p > a) {
    display: grid;
    justify-content: center;
    justify-items: center;
    gap: 8px;
    text-align: center;

    & > img {
      inline-size: 9rem;
      block-size: 4rem;
      object-fit: contain;
    }
  }

  & section:has(> article, > figure, > form[aria-label="Product filters"]) {
    display: grid;
    container-type: inline-size;
    grid-template-columns: repeat(auto-fill, minmax(0, 14rem));
    justify-content: center;
    gap: 1.25rem;

    & > :is(article, figure) {
      inline-size: min(100%, 14rem);
      justify-self: center;
    }

    &:has(> article) {
      grid-template-rows: auto;
      grid-auto-rows: 1fr;
    }

    &:has(> form[aria-label="Product filters"]) {
      grid-template-rows: auto auto;

      &:has(> form[aria-label="Discovery selection"]) {
        grid-template-rows: auto auto auto;
      }

      &:has(> form[aria-busy="true"]) > article {
        opacity: 0.55;
        transition: opacity 0.2s 0.12s;
      }
    }

    & > :is(h1, h2, form, p) {
      grid-column: 1 / -1;
      inline-size: 100cqi;
      justify-self: center;
    }

    & > :is(h1, h2) {
      margin: 0;
    }

    @media (max-width: 40rem) {
      grid-template-columns: repeat(2, minmax(0, 14rem));
    }
  }

  & :is(section[aria-label="Product details"] :is([aria-label="Fragrance profile"], [aria-label="Description"], [aria-label="Ingredients"]) h2, section[id^="similar-"] > h2) {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
  }

  & section[aria-label] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-block: 1.5rem;

    & h1 {
      margin: 0;
      line-height: 1.2;
    }

    & form {
      grid-template-columns: minmax(0, 1fr);

      & > button {
        justify-self: start;
      }
    }

    & :is(input:not([type="hidden"]), textarea) {
      inline-size: 100%;
      padding: 0.5em 0.75em;
    }

    & label {
      font-weight: 600;
    }

    & :is(img, video, iframe) {
      max-inline-size: 100%;
    }
  }

  & section[aria-label="Page content"] {
    max-inline-size: 50rem;
    margin-inline: auto;
  }

  & main:has(section[aria-label="Password"]) {
    flex-grow: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  & section[aria-label="Password"] {
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    inline-size: min(100%, 24rem);
    block-size: 100%;
    margin: 0 auto;
    text-align: center;

    & h1 {
      align-self: start;
      line-height: 0;

      & > img {
        inline-size: 12rem;
        block-size: auto;
      }
    }

    & form {
      inline-size: 100%;
      text-align: start;

      & > button {
        justify-self: center;
      }
    }
  }

  & section[aria-label="Product details"] {
    gap: 1rem;
    margin-block: 0 2rem;

    & > hgroup {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      gap: 0.5rem;
      margin: 0;
      padding-block: 0.25rem 0.75rem;
      text-align: center;

      & > p {
        margin: 0;
        line-height: 0;
      }
    }

    & h1 {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.025em;
      text-wrap: balance;
    }

    & > div:first-of-type {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
      grid-template-areas: "images purchase" "information purchase";
      grid-template-rows: auto 1fr;
      align-items: start;
      gap: 1rem clamp(1rem, 2vw, 2rem);
    }

    & [aria-label="Product information"] {
      grid-area: information;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;

      & > div {
        font-size: 0.75rem;
        line-height: 1.7;
        letter-spacing: 0.02em;
        text-wrap: pretty;

        & p {
          margin-block: 0 0.75em;

          &:last-child { margin-block-end: 0; }
        }
      }

      & > div > h2 + * {
        margin-block-start: 0.5rem;
      }

      & [aria-label="Ingredients"] > p {
        font-size: 0.6875rem;
        opacity: 0.7;
      }
    }

    & [aria-label="Purchase options"] {
      grid-area: purchase;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;
      padding: clamp(1rem, 2vw, 1.5rem);
      align-content: start;
    }

    & [aria-label="Product images"] {
      grid-area: images;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      justify-items: center;
      gap: 1rem;

      &:has(> button) {
        grid-template-columns: minmax(2.75rem, 1fr) auto minmax(2.75rem, 1fr);
      }

      & > :is(nav, p) {
        grid-column: 1 / -1;
      }

      & > button {
        grid-row: 1;
        align-self: center;
        display: grid;
        place-items: center;
        inline-size: 2.75rem;
        padding: 0;
        border: 0;
        background: none;

        &[name="previous"] {
          grid-column: 1;
          justify-self: end;
          justify-content: end;
        }

        &[name="next"] {
          grid-column: 3;
          justify-self: start;
          justify-content: start;
        }

        & > svg {
          inline-size: 0.875rem;
          block-size: 2.75rem;
        }
      }

      & > img {
        grid-row: 1;
        grid-column: 2;
        display: block;
        inline-size: auto;
        block-size: clamp(20rem, 30vw, 25rem);
        object-fit: contain;
        object-position: center;
      }
    }

    & [aria-label="Product image gallery"] {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.75rem;
      inline-size: min(100%, 22.25rem);
      padding: 0.25rem;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;

      &::before,
      &::after {
        content: "";
        flex: none;
        inline-size: calc(50% - 2.625rem);
      }

      & > button {
        flex: none;
        scroll-snap-align: center;
        display: grid;
        grid-template: minmax(0, 1fr) / minmax(0, 1fr);
        place-items: center;
        padding: 0.5rem;
        inline-size: 3.75rem;
        block-size: 4.25rem;
        border-radius: 0.75rem;

        &[aria-pressed="true"] {
          outline: 1px solid currentColor;
          outline-offset: 3px;
        }
      }
    }

    & form {
      margin: 0;
      padding: 1rem 0 0;
      gap: 1rem;
      border-block-start: 1px solid rgb(from currentColor r g b / 12%);

      & > p:first-of-type {
        justify-content: start;
        align-items: baseline;
        gap: 0.75rem;
        font-size: clamp(1.75rem, 2.5vw, 2.25rem);
        line-height: 1.3;
        font-variant-numeric: tabular-nums;

        & strong { font-weight: 600; letter-spacing: -0.04em; }
        & s { font-size: 0.875rem; }
      }

      & > p[role="status"] {
        margin-block-start: -0.5rem;
        font-size: 0.75rem;
        line-height: 1.5;
        opacity: 0.7;
      }

      & fieldset {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.625rem;

        & legend {
          margin-block-end: 0.5rem;
          font-size: 0.75rem;
          font-weight: 600;
          letter-spacing: 0.025em;
        }

        & label:has(> input[name="id"]) > span {
          display: grid;
          place-items: center;
          min-inline-size: 4.5rem;
          min-block-size: 2.5rem;
          padding: 0 1rem;
        }
      }

      & [aria-label="Purchase actions"] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        inline-size: min(100%, 22rem);
        align-items: start;
        gap: 0.5rem;

        & > button,
        & shopify-buy-it-now-button > button {
          inline-size: 100%;
          min-block-size: 2.5rem;
          padding: 0.5rem 0.625rem;
        }
      }
    }

    & [aria-label="Fragrance profile"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      gap: 1rem;

      & > div {
        min-inline-size: 0;

        & + div {
          padding-block-start: 1rem;
          border-block-start: 1px solid rgb(from currentColor r g b / 12%);
        }
      }

      & dl {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
        margin: 0.75rem 0 0;
        font-size: 0.875rem;

        & > div {
          display: grid;
          grid-template-columns: 7.5rem minmax(0, 1fr);
          align-items: baseline;
          gap: 0.5rem;
        }

        & dt {
          color: #000;
          font-size: 0.8125rem;
          font-weight: 700;
          text-align: end;
          white-space: nowrap;

          &::after { content: ":"; }
        }

        & dd {
          margin: 0;
          line-height: 1.65;
        }

        & dd:empty::after { content: "—"; }
        & dd > span:not(:last-child)::after { content: ", "; }
      }
    }

    @media (max-width: 55rem) {
      & > div:first-of-type {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "images" "purchase" "information";
        grid-template-rows: auto;
        gap: 1.25rem;
      }

      & [aria-label="Purchase options"] {
        inline-size: min(100%, 32rem);
      }

      & [aria-label="Product images"] {
        & > img {
          block-size: clamp(15rem, 62vw, 24rem);
        }
      }

      & [aria-label="Product image gallery"] {
        gap: 0.625rem;
        inline-size: min(100%, 19.25rem);

        &::before,
        &::after {
          inline-size: calc(50% - 2.25rem);
        }

        & > button {
          inline-size: 3.25rem;
          block-size: 3.75rem;
        }
      }

      & form {
        & fieldset {
          & label:has(> input[name="id"]) > span {
            padding-inline: 0.75rem;
          }
        }
      }
    }
  }

  & section[aria-label="Product details"] form [aria-label="Purchase actions"] shopify-accelerated-checkout,
  & section[aria-label="Shopping cart"] [aria-label="Order summary"] > div:not([aria-label]) {
    --shopify-accelerated-checkout-button-block-size: 40px;
    --shopify-accelerated-checkout-button-border-radius: 20px;
  }

  & :is(section[aria-label="Product details"], section[aria-label="Shopping cart"]) form {
    & :is(label:has(> input[name="id"]) > span, [aria-label="Quantity selection"] > div, [aria-label="Purchase actions"] > button, [aria-label="Purchase actions"] shopify-buy-it-now-button > button, button[name="checkout"]) {
      color: inherit;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.025em;
    }

    & :is(label:has(> input:checked) > span, [aria-label="Purchase actions"] > button[name="add"], button[name="checkout"]) {
      background: CanvasText;
      color: Canvas;
      border-color: CanvasText;
    }

    & :is(label:has(> input[name="id"]:disabled) > span, [aria-label="Quantity selection"] :disabled, [aria-label="Purchase actions"] button:disabled) {
      opacity: 0.4;
    }

    & [aria-label="Quantity selection"] {
      flex-direction: column;
      align-items: start;
      gap: 0.5rem;

      & > span {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.025em;
      }

      & > div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-self: center;
        align-items: stretch;
        gap: 0;
        block-size: 2.5rem;
      }

      & :is(button, input) {
        inline-size: 2.5rem;
        padding: 0;
        border: 0;
        background: none;
        text-align: center;
        letter-spacing: inherit;
      }

      & input {
        inline-size: 3rem;
        outline: none;
        appearance: textfield;

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button { appearance: none; margin: 0; }
      }
    }
  }

  & section[aria-label="Shopping cart"] {
    gap: 1.25rem;

    & > h1 {
      text-align: center;
    }

    & > form {
      justify-content: normal;
      align-items: start;
      gap: 1.5rem;
      padding: 1.5rem;
    }

    & [aria-label="Cart items"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-content: normal;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;

      & > li {
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr) auto 6rem;
        justify-content: normal;
        align-items: center;
        gap: 1.25rem;
        padding-block: 1.25rem;

        & + li {
          border-block-start: 1px solid rgb(from currentColor r g b / 12%);
        }

        & > a > img {
          inline-size: 6rem;
          block-size: 6rem;
          object-fit: contain;
        }

        & > div:first-of-type {
          display: grid;
          justify-items: start;
          gap: 0.25rem;
          font-size: 0.875rem;

          & > p:first-child {
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.075em;
            text-transform: uppercase;
            opacity: 0.7;
          }
        }

        & h2 {
          margin: 0;
          font-size: 1rem;
          font-weight: 700;

          & > a {
            text-decoration: none;
          }
        }

        & :is(p, dl, dd) {
          margin: 0;
        }

        & dl > div {
          display: flex;
          flex-direction: row;
          gap: 0.25rem;
        }

        & s {
          opacity: 0.6;
        }

        & > p {
          min-inline-size: 5rem;
          font-weight: 600;
          text-align: end;
        }
      }

      & [aria-label="Quantity selection"] {
        display: flex;
        align-items: center;

        & > a {
          font-size: 0.8125rem;
        }
      }
    }

    & [aria-label="Order summary"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-content: normal;
      gap: 1rem;
      padding-block-start: 1.5rem;
      border-block-start: 1px solid rgb(from currentColor r g b / 12%);

      & > dl {
        display: grid;
        gap: 0.5rem;
        margin: 0;
        padding-block-end: 1rem;
        border-block-end: 1px solid rgb(from currentColor r g b / 12%);

        & > div {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: baseline;
          gap: 1rem;
          font-size: 0.875rem;

          &:has(strong) {
            font-size: 1rem;
          }
        }

        & dd {
          margin: 0;
          text-align: end;
        }
      }

      & > label {
        font-size: 0.875rem;
      }

      & > p {
        margin: 0;
        font-size: 0.75rem;

        &:empty {
          display: none;
        }
      }
    }

    & [aria-label="Cart actions"] {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: end;
      gap: 0.75rem;

      & > * {
        flex: 1 1 8rem;
        max-inline-size: 16rem;
        min-block-size: 2.5rem;
        white-space: nowrap;
      }
    }

    & :is([aria-label="Empty cart"], [aria-label="Cart actions"]) > a {
      display: flex;
      align-items: center;
      justify-content: center;
      min-block-size: 2.5rem;
      padding: 0.25em 1.25em;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.025em;
      text-decoration: none;
    }

    & [aria-label="Empty cart"] {
      display: grid;
      justify-content: center;
      justify-items: center;
      gap: 1rem;
      padding: 2.5rem 1rem;
      text-align: center;
    }

    @media (max-width: 40rem) {
      & [aria-label="Cart items"] > li {
        grid-template-columns: 5rem minmax(0, 1fr);

        & > a > img {
          inline-size: 5rem;
          block-size: 5rem;
        }

        & > :is([aria-label="Quantity selection"], p) {
          grid-column: 2;
          justify-self: start;
          text-align: start;
        }
      }
    }
  }

  & section[aria-label="Brand counters"] {
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin-block: 0.75rem 3rem;

    & > nav {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: start;
      align-items: center;
      overflow: hidden;
      padding-block: 1.125rem;
      mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);

      & > ul {
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 3.5rem;
        margin: 0;
        padding: 0 1.75rem;
        animation: brand-ribbon 70s linear infinite;
      }

      &:is(:hover, :focus-within) > ul {
        animation-play-state: paused;
      }

      & a {
        display: grid;
        place-items: center;
        min-block-size: 2rem;
        font-weight: 600;
        white-space: nowrap;
        text-decoration: none;

        & > img {
          inline-size: auto;
          max-inline-size: 7rem;
          block-size: 1.25rem;
          object-fit: contain;
        }
      }
    }

    & > section > ul {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: safe center;
      align-items: end;
      gap: 0;
      min-inline-size: 0;
      margin: 0;
      padding: 0.75rem 0.25rem;
      list-style: none;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: x proximity;
      scrollbar-width: thin;
      scrollbar-color: rgb(32 38 48 / 18%) transparent;

      & > li {
        position: relative;
        flex: none;
        inline-size: auto;
        padding-inline: 0.5rem;
        scroll-snap-align: start;

        &::after {
          content: "";
          position: absolute;
          inset-inline: 0;
          inset-block-end: 4.5rem;
          block-size: 0.5rem;
          background: linear-gradient(180deg, rgb(255 255 255 / 85%), rgb(255 255 255 / 22%));
          box-shadow: inset 0 1px 0 white, 0 5px 10px -5px rgb(25 40 60 / 22%);
          pointer-events: none;
        }

        &:first-child::after {
          border-start-start-radius: 0.25rem;
          border-end-start-radius: 0.25rem;
        }

        &:last-child::after {
          border-start-end-radius: 0.25rem;
          border-end-end-radius: 0.25rem;
        }

        & > a {
          position: relative;
          z-index: 1;
          display: grid;
          grid-template-columns: minmax(6rem, max-content);
          justify-items: center;
          text-align: center;
          text-decoration: none;

          &::before {
            content: "";
            position: absolute;
            inset-inline: 12%;
            inset-block-end: 4.875rem;
            block-size: 0.625rem;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgb(25 40 60 / 24%), transparent 70%);
            pointer-events: none;
          }

          & > img {
            position: relative;
            display: block;
            inline-size: auto;
            max-inline-size: none;
            block-size: 9rem;
            object-fit: contain;
            object-position: bottom;
            filter: drop-shadow(0 4px 4px rgb(25 40 60 / 12%));
            -webkit-box-reflect: below -0.25rem linear-gradient(transparent 78%, rgb(255 255 255 / 18%));
            transition: translate 220ms ease;
          }

          &:is(:hover, :focus-visible) > img {
            translate: 0 -0.375rem;
          }

          & > span {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            inline-size: 0;
            min-inline-size: 100%;
            block-size: 4.5rem;
            margin-block-start: 0.5rem;
            padding-block-start: 0.875rem;
            overflow: hidden;
            font-size: 0.8125rem;
            line-height: 1.4;
            font-weight: 500;
            text-wrap: balance;
          }
        }

        &:is(:nth-child(2), :nth-child(4)) > a > img {
          block-size: 10.5rem;
        }

        &:nth-child(3) > a > img {
          block-size: 12rem;
        }
      }
    }

    & > div {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      padding: 0;
      overflow: hidden;

      & > img {
        grid-area: 1 / 1;
        display: block;
        inline-size: 100%;
        block-size: 100%;
        min-block-size: 34rem;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: right center;
      }

      & > div {
        grid-area: 1 / 1;
        justify-self: start;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        align-content: center;
        inline-size: 39%;
        gap: 1.125rem;
        margin: clamp(1.5rem, 3vw, 2.5rem);
        padding: clamp(1.25rem, 2.5vw, 2rem);

        & > :is(h1, p) {
          margin: 0;
          text-wrap: balance;
        }

        & > h1 {
          font-family: Georgia, "Times New Roman", serif;
          font-size: clamp(2.75rem, 4.2vw, 4rem);
          font-weight: 400;
          line-height: 1.08;
          letter-spacing: -0.035em;
        }

        & > p {
          letter-spacing: 0.12em;
          text-transform: uppercase;
          max-inline-size: 30ch;
          font-size: 0.9375rem;
          font-weight: 700;
          line-height: 1.6;
        }
      }

      &:not(:has(> img)) > div {
        inline-size: min(32rem, 100%);
        justify-self: center;
      }

      & form {
        justify-self: stretch;
        justify-items: center;
        gap: 1.5rem;
        margin: 0.25rem 0 0;

        & > fieldset {
          flex-wrap: wrap;
          justify-content: center;
          gap: 0.25rem;
          margin: 0;
          border-radius: 1.5rem;
          font-size: 0.8125rem;
        }

        & > button {
          justify-self: center;
          min-block-size: 2.75rem;
          padding-inline: 1.5rem;
          font-size: 0.875rem;
          font-weight: 600;
        }
      }
    }

    & > section {
      display: grid;
      grid-template-columns: 12rem minmax(0, 1fr);
      align-items: center;
      gap: 2rem;
      padding: 2rem 2rem 1rem;

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: radial-gradient(ellipse at 60% 0%, rgb(255 255 255 / 32%), transparent 65%);
        pointer-events: none;
      }

      & > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        align-content: center;
        gap: 0.625rem;
        padding: 0.5rem 1.75rem 0.5rem 0;
        margin-block-end: 2rem;
        border-inline-end: 1px solid rgb(32 38 48 / 12%);

        & > h2 {
          justify-self: stretch;
          margin: 0 0 0.625rem;
          font-size: 1.5rem;
          line-height: 1.2;

          & > a {
            display: grid;
            justify-items: center;
            justify-content: center;
            text-decoration: none;

            & > img {
              inline-size: 9rem;
              block-size: 2.25rem;
              object-fit: contain;
              object-position: center;
            }
          }
        }

        & > p {
          margin: 0;
          font-family: Georgia, "Times New Roman", serif;
          font-size: 1rem;
          line-height: 1.5;

          & + p {
            font-family: inherit;
            font-size: 0.8125rem;
            line-height: 1.65;
            color: rgb(32 38 48 / 78%);
          }
        }

        & > a {
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: start;
          align-items: center;
          gap: 0.75rem;
          min-block-size: 2.5rem;
          margin-block-start: 0.375rem;
          font-size: 0.8125rem;
          font-weight: 600;
          text-decoration: none;

          &::after {
            content: "";
            inline-size: 0.375rem;
            block-size: 0.375rem;
            border-block-start: 1px solid;
            border-inline-end: 1px solid;
            rotate: 45deg;
            transition: translate 180ms ease;
          }

          &:is(:hover, :focus-visible)::after {
            translate: 0.25rem;
          }
        }
      }
    }

    @media (max-width: 55rem) {
      & > div {
        align-items: start;

        & > img {
          grid-area: auto;
          block-size: auto;
          min-block-size: 0;
          aspect-ratio: 4 / 3;
        }

        & > div {
          grid-area: auto;
          inline-size: auto;
          justify-self: stretch;
          justify-items: center;
          margin: -1.5rem 0.875rem 0.875rem;
          padding: 1.75rem 1rem;
          text-align: center;
        }

      }

      & > section {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding: 1.5rem 1.25rem 1rem;

        & > div {
          margin: 0;
          padding: 0 0 1rem;
          border-inline-end: 0;
          border-block-end: 1px solid rgb(32 38 48 / 12%);
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 0.375rem 1rem;

          & > h2 {
            grid-column: 1 / -1;
            margin-block-end: 0.5rem;
          }

          & > p {
            grid-column: 1;

            & + p {
              grid-column: 1 / -1;
            }
          }

          & > a {
            grid-column: 2;
            grid-row: 2;
            align-self: center;
            margin: 0;
          }
        }

        & > ul > li {
          & > a > img {
            block-size: 7.5rem;
          }

          &:is(:nth-child(2), :nth-child(4)) > a > img {
            block-size: 8.75rem;
          }

          &:nth-child(3) > a > img {
            block-size: 10rem;
          }
        }
      }
    }

    @media (prefers-reduced-motion: reduce) {
      & > nav {
        overflow-x: auto;
        mask-image: none;

        & > ul {
          animation: none;

          &[aria-hidden="true"] {
            display: none;
          }
        }
      }

      & img,
      & a::after {
        transition: none;
      }
    }
  }

  & figure:has(> article) {
    flex-wrap: nowrap;
    justify-content: start;
    text-align: center;
  }

  & article > figure {
    display: grid;
    grid-template:
      auto
      calc((100cqi - 2rem) * 5 / 4 + 2rem)
      minmax(3.5rem, 1fr)
      / minmax(0, 1fr);
    min-block-size: 0;
    gap: 0;
    margin: 0;
    text-align: center;

    & > p:first-child {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      align-content: start;
      gap: 0.375rem;
      margin: 0;
      padding: 0.75rem 0.75rem 0;
      font-size: 0.9375rem;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;

      & > img {
        display: block;
        inline-size: 6rem;
        max-inline-size: calc(100cqi - 5.75rem);
        block-size: 1.5rem;
        object-fit: contain;
      }

      & > span {
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    & > :is(a, button) {
      position: relative;

      & > dl {
        position: absolute;
        inset: 11px;
        inset-block-end: auto;
        min-block-size: calc(100% - 22px);
        z-index: 1;
        display: flex;
        justify-content: safe center;
        flex-wrap: nowrap;
        gap: 6px;
        margin: 0;
        padding: 8px;
        font-size: 11px;
        line-height: 1.35;
        visibility: hidden;

        & dt {
          font-size: 8px;
          font-weight: 600;
          letter-spacing: 0.19em;
          opacity: 0.72;
        }

        & dd {
          margin: 0;
        }

        & > div:last-child > dd {
          display: inline-block;
          padding: 2px 8px;
          font-size: 9px;
        }

        &:has(> div > dd > img) {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
          align-content: center;

          & > div {
            grid-column: 2;

            &:first-child {
              grid-column: 1;
              grid-row: 1 / span 3;
              align-self: stretch;
              align-content: center;
            }
          }

          & img {
            display: block;
            inline-size: 100%;
            block-size: 7.5rem;
            object-fit: contain;
          }
        }
      }
    }

    & > figcaption {
      display: flex;
      align-items: center;
      justify-content: safe center;
      flex-wrap: nowrap;
      gap: 2px;
      padding: 0 12px 8px;
      font-size: 0.9375rem;
      font-weight: 700;
      line-height: 1.2;

      & > p {
        margin: 0;
      }

      & > h2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin: 0;
        font-size: inherit;
        overflow: hidden;
      }
    }
  }

  & article {
    min-block-size: 0;
    aspect-ratio: 3 / 4;

    &:has(> figure) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      aspect-ratio: auto;
      container-type: inline-size;

      & > :is(button[aria-controls], button[name="remove"]) {
        position: absolute;
        inset-block-start: 8px;
        inset-inline-end: 8px;
        z-index: 2;
      }

      &:has(> button[name="remove"]) {
        cursor: pointer;
      }

      @media (hover: hover) {
        &:hover:has(> figure > :is(a, button) > dl) {
          z-index: 1;
        }

        &:hover:not(:has(> dialog[open])) > figure > :is(a, button) > dl {
          visibility: visible;
        }
      }
    }

    & > a,
    & > figure > :is(a, button) {
      align-items: center;
      justify-content: center;
      min-block-size: 0;
      block-size: 100%;
      border-radius: inherit;
    }

    & > figure > button {
      display: flex;
      border: 0;
      background: transparent;
    }
  }

  & section[aria-label="Product details"] [aria-label="Product image gallery"] > button > img,
  & :is(article > a, article > figure > :is(a, button)) > img {
    min-block-size: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  :where(&, & *),
  :where(&, & *)::before,
  :where(&, & *)::after {
    box-sizing: inherit;
  }

  :where(&) :where(body, body *) {
    min-inline-size: inherit;
    gap: inherit;
    flex-direction: inherit;
    flex-wrap: inherit;
    align-items: inherit;
    justify-content: inherit;
  }

  :where(&) footer,
  :where(&) nav > ul,
  :where(&) figure:has(> article),
  :where(&) article > a,
  :where(&) article > figure > a {
    display: flex;
  }

  :where(&) body,
  :where(&) body > main {
    flex-grow: inherit;
  }

  :where(&) header,
  :where(&) nav > ul,
  :where(&) footer > p {
    flex-direction: initial;
  }

  :where(&) :where(body, body > div:has(> header, > footer), header, footer, nav ul, footer > p, figure:has(> article), figcaption > h2) {
    margin: inherit;

    &:where(body, div, header, footer) {
      padding: inherit;

      &:where(body, div) {
        display: contents;
      }
    }

    &:where(ul) {
      padding: initial;
      list-style: none;
    }
  }

  :where(&) button:enabled {
    cursor: pointer;
  }
}

@keyframes brand-ribbon {
  to {
    translate: -100% 0;
  }
}