/* ========================================================================== 
   Layer Order
   ========================================================================== */

@layer reset, base, layout, components, sections, utilities;

/* ========================================================================== 
   Reset: box model
   ========================================================================== */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

/* ========================================================================== 
   Reset: element defaults
   ========================================================================== */

@layer reset {
  html {
    scroll-behavior: smooth;
  }

  body,
  p,
  h1,
  h2,
  h3,
  ul,
  figure {
    margin: 0;
  }

  ul {
    padding: 0;
    list-style: none;
  }

  img {
    display: block;
    max-width: 100%;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* ========================================================================== 
   Base: design tokens
   ========================================================================== */

@layer base {
  :root {
    --color-bg: #f7f5f2;
    --color-text: #292929;
    --color-sand: #ebe9d8;
    --color-tint: rgba(247, 224, 222, 0.5);
    --color-white: #f7f5f2;
    --color-black: #000;

    --container-max: 90rem;
    --space-page: clamp(1rem, 3vw, 2.5rem);
    --space-section: clamp(4.5rem, 9vw, 7.5rem);
    --space-block: clamp(1.5rem, 3vw, 3.125rem);
    --site-header-height: 7.75rem;

    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    --font-display: "IvyOra Display", "Cormorant Garamond", Georgia, serif;
    --font-body: "Elza Text", "Source Sans 3", Arial, sans-serif;
  }

  @media (max-width: 72rem) {
    :root {
      --site-header-height: 4.5rem;
    }
  }
}

/* ========================================================================== 
   Base: document defaults
   ========================================================================== */

@layer base {
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
  }

  body.has-open-mobile-menu,
  body.has-open-filter-drawer {
    overflow: hidden;
  }
}

/* ========================================================================== 
   Layout: page shell
   ========================================================================== */

@layer layout {
  main:not(:has(> .hero)) {
    padding-top: var(--site-header-height);
  }

  .container {
    width: min(100%, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--space-page);
  }

  .section {
    padding-block: var(--space-section);
  }

  .section-tight {
    padding-top: 0.75rem;
  }

  .section-reset {
    padding-block: 0;
  }
}

/* ========================================================================== 
   Layout: shared rows and stacks
   ========================================================================== */

@layer layout {
  .button-row {
    display: flex;
    align-items: center;
    gap: 1.5rem 2.75rem;
    flex-wrap: wrap;
  }

  .button-row--single {
    gap: 0;
  }

  .section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.125rem);
    text-align: center;
  }
}

/* ========================================================================== 
   Layout: header and footer structure
   ========================================================================== */

@layer layout {
  .site-nav__slot {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .site-nav__slot--right {
    justify-content: flex-end;
  }

  .utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 1.875rem;
    padding-block: 0.5rem;
  }

  .utility-nav {
    display: flex;
    align-items: center;
    gap: 1.875rem;
    flex-wrap: wrap;
  }

  .utility-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    white-space: nowrap;
  }

  .utility-nav__icon {
    width: 0.625rem;
    height: 0.625rem;
  }

  .utility-nav__link--cart {
    gap: 0.3125rem;
  }

  .utility-nav__cart-icon {
    width: 1rem;
    height: 1rem;
  }

  .site-nav__wrap {
    position: relative;
    z-index: 3;
  }

  .site-nav__surface {
    --site-nav-transition-delay: 300ms;

    position: relative;
    z-index: 2;
    width: calc(100% + (var(--space-page) * 2));
    margin-inline: calc(var(--space-page) * -1);
    padding-inline: var(--space-page);
    color: var(--color-text);
    transition: color 300ms ease-out var(--site-nav-transition-delay);
  }

  .site-nav__surface::before {
    content: "";
    position: absolute;
    width: 100dvw;
    inset-block: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    background: var(--color-bg);
    transition: background 300ms ease-out var(--site-nav-transition-delay);
  }

  body.is-below-header-threshold:has(main > :first-child.hero--dark) .site-nav__surface {
    --site-nav-transition-delay: 0s;

    color: var(--color-white);
  }

  body.is-below-header-threshold:has(main > :first-child.hero--dark) .site-nav__surface::before {
    background: transparent;
  }

  .site-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
    min-height: 4.25rem;
    padding-block: 0.3125rem;
  }

  .site-nav__group {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem 2.5rem;
    font-size: 1rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .site-nav__item {
    display: flex;
  }

  .site-nav__group--right {
    justify-content: flex-end;
  }

  .mega-menu {
    display: grid;
    position: relative;
    z-index: 2;
    width: calc(100% + (var(--space-page) * 2));
    margin-inline: calc(var(--space-page) * -1);
    overflow: clip;
    block-size: 0;
    interpolate-size: allow-keywords;
    transition: block-size 300ms ease-out;
  }

  .mega-menu:has(.mega-menu__panel.is-open) {
    block-size: auto;
  }

  .mega-menu__panel {
    grid-row: 1;
    grid-column: 1;
    inset: 100% 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 0.75rem;
    padding: 1.6875rem 2.5rem 2.5rem;
    opacity: 0;
    pointer-events: none;
    color: var(--color-text);
    transition:
      opacity 300ms ease-out,
      display 300ms allow-discrete;
  }

  .mega-menu__panel.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .mega-menu__panel[hidden] {
    display: none;
  }

  @starting-style {
    .mega-menu__panel.is-open {
      opacity: 0;
    }
  }

  .mega-menu__branch-column {
    grid-column: 1 / span 2;
  }

  .mega-menu__leaf-stage {
    grid-column: 3 / span 3;
    display: grid;
    grid-template-columns: subgrid;
    padding-left: 2rem;
  }

  .mega-menu__preview-stage {
    grid-column: 6 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr auto;
    align-items: end;
  }

  .mega-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    border: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    background: rgba(41, 41, 41, 0.1);
    backdrop-filter: blur(5px);
    transition: opacity 300ms ease-out;
  }

  .hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hero-content-gap, clamp(2.25em, 3.68vw, 3.68vw));
    width: min(100%, var(--hero-content-width, 43.611vw));
    margin: 0 auto;
    text-align: center;
  }

  .hero__inner {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: inherit;
    padding-top: var(--hero-padding-top, clamp(6em, 9.028vw, 9.028vw));
    padding-bottom: var(--hero-padding-bottom, clamp(2.5em, 3.125vw, 3.125vw));
  }

  .site-footer__top,
  .site-footer__middle,
  .site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }

  .site-footer__newsletter {
    display: flex;
    flex-direction: column;
    gap: 2.8125rem;
    max-width: 27.875rem;
  }

  .site-footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(8rem, auto));
    gap: clamp(2rem, 6vw, 4.5rem);
  }

  .site-footer__legal-links {
    display: flex;
    gap: 1.1875rem;
  }

  .social-block {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
  }

  @media (max-width: 72rem) {
    .utility-bar {
      display: none;
    }

    .site-nav__surface {
      width: 100%;
      margin-inline: 0;
      padding-inline: 0;
    }

    .site-nav {
      grid-template-columns: 1fr auto 1fr;
      gap: 0.75rem;
      min-height: 4.5rem;
      text-align: left;
    }

    .site-nav__group,
    .site-nav__group--right,
    .mega-menu,
    .mega-menu__backdrop {
      display: none;
    }

    .site-nav__mobile-actions {
      display: flex;
      align-items: center;
      gap: 0.125rem;
    }

    .site-nav__mobile-actions--right {
      justify-content: flex-end;
    }

    .brand--home .brand__mark {
      height: 2.75rem;
    }

    .mobile-menu {
      position: absolute;
      top: 100%;
      left: 50%;
      z-index: 2;
      display: block;
      width: 100dvw;
      min-height: calc(100svh - var(--site-header-height));
      max-height: calc(100svh - var(--site-header-height));
      transform: translateX(-50%);
      background: var(--color-bg);
      color: var(--color-text);
    }

    .mobile-menu__scroll {
      display: flex;
      flex-direction: column;
      min-height: inherit;
      max-height: inherit;
      padding: 1.125rem var(--space-page) 1.5rem;
      overflow-y: auto;
    }

    .mobile-menu__view {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
    }

    .mobile-menu__root-main {
      flex: 1 1 auto;
    }

    .mobile-menu__root-footer {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
      padding-top: 3rem;
    }

    .mobile-menu__detail-preview {
      padding-top: 2.25rem;
    }
    .site-footer__top {
      display: grid;
      grid-template-columns: 1fr;
    }

    .site-footer__links {
      grid-template-columns: repeat(2, minmax(8rem, 1fr));
    }
  }

  @media (max-width: 48rem) {
    .utility-bar__inner,
    .site-footer__middle,
    .site-footer__bottom {
      flex-direction: column;
      align-items: flex-start;
    }

    .utility-nav {
      gap: 0.75rem 1rem;
    }

    .site-nav__group {
      gap: 0.75rem 1rem;
      font-size: 0.9375rem;
    }

    .utility-nav__link {
      white-space: normal;
    }

    .site-footer__links {
      grid-template-columns: 1fr;
    }
  }
}

/* ========================================================================== 
   Layout: split-copy and editorial structures
   ========================================================================== */

@layer layout {
  .split-copy__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
  }

  .split-copy__grid--intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split-copy__grid--club {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .split-copy__body {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 6vw, 5rem);
  }

  .category-grid__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .editorial-grid {
    display: grid;
    gap: 0.75rem;
  }

  .editorial-grid__top,
  .editorial-grid__bottom,
  .editorial-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .editorial-copy {
    display: flex;
    align-items: start;
  }

  .editorial-copy__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2rem, 4vw, 3.125rem);
    width: min(100%, 35rem);
    padding: clamp(2rem, 6vw, 3.75rem) clamp(1.5rem, 4vw, 2.5rem);
  }

  @media (max-width: 72rem) {
    .category-grid__inner,
    .editorial-grid__top,
    .editorial-grid__bottom,
    .editorial-row,
    .split-copy__grid--intro,
    .split-copy__grid--club {
      display: grid;
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 48rem) {
    .category-grid__inner {
      grid-template-columns: 1fr;
    }
  }
}

/* ========================================================================== 
   Sections: shared section primitives
   ========================================================================== */

@layer sections {
  .collection-rail {
    padding-top: var(--collection-padding-top, 0);
    padding-bottom: var(--collection-padding-bottom, 0);
    padding-inline: var(--collection-padding-inline, 0);
  }

  .collection-rail__viewport {
    container-type: inline-size;
    overflow-x: auto;
    overflow-y: clip;
    scrollbar-width: none;
  }

  .collection-rail__viewport::-webkit-scrollbar {
    display: none;
  }

  .collection-rail__track {
    gap: var(--collection-gap, 0.833vw);
  }

  .collection-rail--grid .collection-rail__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .collection-rail--marquee .collection-rail__track {
    display: flex;
    width: max-content;
  }

  .collection-rail--marquee .collection-rail__viewport {
    cursor: grab;
    touch-action: pan-y;
  }

  .collection-rail--marquee .collection-rail__viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  .collection-rail--marquee .product-card {
    flex: 0 0 calc((100cqi - (var(--collection-gap, 0.833vw) * 3)) / 4);
  }

  .flexible-grid {
    display: grid;
    grid-template-columns: repeat(var(--flex-grid-columns, 12), minmax(0, 1fr));
    column-gap: var(--flex-grid-column-gap, 0.833vw);
    row-gap: var(--flex-grid-row-gap, var(--flex-grid-column-gap, 0.833vw));
    padding-top: var(--flex-grid-padding-top, 0);
    padding-bottom: var(--flex-grid-padding-bottom, 0);
    padding-inline: var(--flex-grid-padding-inline, 0);
  }

  .flexible-grid__item {
    grid-column: var(--flex-item-start, auto) / span var(--flex-item-span, 12);
    grid-row: var(--flex-item-row-start, auto) / span var(--flex-item-row-span, 1);
    align-self: var(--flex-item-align, stretch);
    justify-self: var(--flex-item-justify, stretch);
    min-width: 0;
  }

  .editorial-copy-block {
    display: flex;
    flex-direction: column;
    gap: clamp(2em, 3.472vw, 3.472vw);
  }

  .editorial-copy-block__heading {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
  }

  .editorial-copy-block__heading h2,
  .editorial-copy-block__heading p {
    margin: 0;
  }

  .editorial-copy-block__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.5em, 3.471vw, 3.471vw);
    line-height: 1;
  }

  .editorial-copy-block__subtitle {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.5em, 2.083vw, 2.083vw);
    line-height: 1;
  }

  .editorial-copy-block__body {
    font-size: 1em;
    line-height: 1.52;
  }

  .editorial-copy-block__body strong {
    font-weight: 500;
  }

  .editorial-copy-block__actions,
  .fullwidth-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.25em, 3.056vw, 3.056vw);
  }

  .story-gallery,
  .story-gallery__stack {
    display: grid;
    gap: 0.833vw;
  }

  .story-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .story-gallery--mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }

  .story-gallery--mosaic .story-gallery__main {
    grid-column: 1 / -1;
    aspect-ratio: 1.4;
  }

  .story-gallery--mosaic .story-gallery__detail {
    aspect-ratio: 0.947368;
  }

  .story-gallery--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .story-gallery__stack {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .story-gallery--split .story-gallery__top {
    aspect-ratio: 1.944169;
  }

  .story-gallery--split .story-gallery__bottom {
    aspect-ratio: 1.527211;
  }

  .story-gallery--split .story-gallery__tall {
    aspect-ratio: 0.8425;
  }

  @media (max-width: 72rem) {
    .collection-rail--grid .collection-rail__track {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flexible-grid {
      grid-template-columns: repeat(var(--flex-grid-tablet-columns, 12), minmax(0, 1fr));
    }

    .flexible-grid__item {
      grid-column: var(--flex-item-tablet-start, var(--flex-item-start, auto)) / span var(--flex-item-tablet-span, var(--flex-item-span, 12));
    }
  }

  @media (max-width: 48rem) {
    .collection-rail--grid .collection-rail__track {
      grid-template-columns: 1fr;
    }

    .collection-rail--marquee .product-card {
      flex-basis: min(84vw, 22em);
    }

    .flexible-grid {
      grid-template-columns: repeat(var(--flex-grid-mobile-columns, 1), minmax(0, 1fr));
    }

    .flexible-grid__item {
      order: var(--flex-item-mobile-order, 0);
      grid-column: var(--flex-item-mobile-start, auto) / span var(--flex-item-mobile-span, 1);
      grid-row: auto / span 1;
    }

    .story-gallery,
    .story-gallery__stack,
    .story-gallery--split {
      gap: 0.75em;
    }
  }
}

/* ========================================================================== 
   Components: text link
   ========================================================================== */

@layer components {
  .icon {
    display: block;
    flex: none;
    stroke-width: 1.75;
  }

  .text-link {
    --underline-width: calc(100% + 18rem);
    --underline-shift: 0%;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 1.25rem;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.09em;
    padding-bottom: 0.125rem;
  }

  .text-link::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(100% - 1px);
    width: var(--underline-width);
    height: 1px;
    background: currentColor;
    transform: translateX(var(--underline-shift));
    transform-origin: left center;
    transition: transform 700ms ease-out;
  }

  .text-link:is(:hover, :focus-visible) {
    --underline-shift: -100%;
  }

  .text-link--light {
    color: var(--color-white);
  }

  .text-link--dark {
    color: var(--color-text);
  }

  @media (max-width: 48rem) {
    .text-link {
      white-space: normal;
    }
  }
}

/* ========================================================================== 
   Components: button
   ========================================================================== */

@layer components {
  .button {
    --button-bg: transparent;
    --button-fg: currentColor;
    --button-bg-hover: var(--button-bg);
    --button-fg-hover: var(--button-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8125rem;
    padding: 0.875rem 1.25rem;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.09em;
    text-align: center;
    white-space: nowrap;
    background: var(--button-bg);
    color: var(--button-fg);
    transition:
      background-color 400ms ease-out,
      color 400ms ease-out;
  }

  .button--sand {
    --button-bg: var(--color-sand);
    --button-fg: var(--color-text);
    --button-bg-hover: var(--color-text);
    --button-fg-hover: var(--color-white);
  }

  .button--dark {
    --button-bg: var(--color-text);
    --button-fg: var(--color-white);
    --button-bg-hover: var(--color-sand);
    --button-fg-hover: var(--color-text);
  }

  .button:is(:hover, :focus-visible) {
    background: var(--button-bg-hover);
    color: var(--button-fg-hover);
  }

  @media (max-width: 48rem) {
    .button {
      white-space: normal;
    }
  }
}

/* ========================================================================== 
   Components: brand mark and social icons
   ========================================================================== */

@layer components {
  .brand {
    display: inline-flex;
    justify-self: center;
    line-height: 0;
  }

  .brand__mark {
    display: block;
    width: fit-content;
  }

  .brand--home .brand__mark {
    height: 4.25rem;
  }

  .social-icons {
    display: flex;
    gap: 1.25rem;
  }

  .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
  }

  .social-icons__icon {
    width: 100%;
    height: 100%;
  }
}

/* ========================================================================== 
   Components: site navigation and megamenu
   ========================================================================== */

@layer components {
  .site-nav__mobile-actions,
  .mobile-menu {
    display: none;
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu__view[hidden] {
    display: none;
  }

  .mobile-menu__root-main,
  .mobile-menu__root-footer,
  .mobile-menu__detail-head,
  .mobile-menu__detail-list {
    transform: translate3d(var(--mobile-step-x, 0px), 0, 0);
    opacity: var(--mobile-step-opacity, 1);
    transition:
      transform var(--mobile-step-x-duration, 340ms) var(--ease-out-quart) var(--mobile-step-x-delay, 0ms),
      opacity var(--mobile-step-x-duration, 340ms) var(--ease-out-quart) var(--mobile-step-x-delay, 0ms);
    will-change: transform, opacity;
  }

  .mobile-menu__top-list > li,
  .mobile-menu__secondary-list > li,
  .mobile-menu__locale-list > li,
  .mobile-menu__detail-summary > *,
  .mobile-menu__detail-list > li {
    transform: translate3d(0, var(--mobile-step-y, 0px), 0);
    opacity: var(--mobile-step-item-opacity, 1);
    transition:
      transform var(--mobile-step-y-duration, 380ms) var(--ease-out-expo) calc(var(--mobile-step-y-delay, 0ms) + (var(--mobile-step-index, 0) * var(--mobile-step-stagger, 0ms))),
      opacity var(--mobile-step-y-duration, 380ms) var(--ease-out-expo) calc(var(--mobile-step-y-delay, 0ms) + (var(--mobile-step-index, 0) * var(--mobile-step-stagger, 0ms)));
    will-change: transform, opacity;
  }

  .site-nav__trigger,
  .site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    text-transform: inherit;
    letter-spacing: inherit;
    white-space: nowrap;
    transition: opacity 300ms ease-out;
  }

  .site-nav__trigger {
    cursor: pointer;
  }

  .mobile-nav-action,
  .mobile-menu__top-button,
  .mobile-menu__secondary-link,
  .mobile-menu__locale-link,
  .mobile-menu__back,
  .mobile-menu__detail-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: none;
  }

  .mobile-nav-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: inherit;
    transition:
      transform 140ms var(--ease-out-quint),
      opacity 220ms var(--ease-out-quart),
      color 220ms var(--ease-out-quart);
  }

  .mobile-nav-action__icon {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform 220ms var(--ease-out-quart);
  }

  .mobile-nav-action--menu {
    cursor: pointer;
  }

  .mobile-nav-action--menu::before,
  .mobile-nav-action--menu::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1px;
    background: currentColor;
    transition:
      transform 300ms ease-out,
      opacity 300ms ease-out;
  }

  .mobile-nav-action--menu::before {
    transform: translateY(-0.1875rem);
  }

  .mobile-nav-action--menu::after {
    transform: translateY(0.1875rem);
  }

  .mobile-menu__top-list,
  .mobile-menu__secondary-list,
  .mobile-menu__locale-list,
  .mobile-menu__detail-list {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu__top-list {
    gap: 0.625rem;
  }

  .mobile-menu__secondary-list,
  .mobile-menu__detail-list {
    gap: 0.875rem;
  }

  .mobile-menu__locale-list {
    gap: 0.75rem;
  }

  .mobile-menu__top-button,
  .mobile-menu__detail-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    color: var(--color-text);
    text-align: left;
    transition:
      transform 180ms var(--ease-out-quint),
      opacity 300ms ease-out,
      color 240ms var(--ease-out-quart);
  }

  .mobile-menu__top-button {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2rem, 8vw, 2.75rem);
    line-height: 1.02;
  }

  .mobile-menu__chevron-icon {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 300ms var(--ease-out-quart);
  }

  .mobile-menu__secondary-link,
  .mobile-menu__locale-link,
  .mobile-menu__back,
  .mobile-menu__detail-kicker {
    font-size: 0.8125rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mobile-menu__secondary-link,
  .mobile-menu__locale-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    opacity: 0.68;
    transition:
      transform 180ms var(--ease-out-quint),
      opacity 300ms ease-out;
  }

  .mobile-menu__locale-icon {
    width: 0.625rem;
    height: 0.625rem;
  }

  .mobile-menu__detail-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.75rem;
  }

  .mobile-menu__detail-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 1rem;
  }

  .mobile-menu__back {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    width: fit-content;
    cursor: pointer;
    opacity: 0.68;
    transition:
      transform 180ms var(--ease-out-quint),
      opacity 300ms ease-out,
      color 240ms var(--ease-out-quart);
  }

  .mobile-menu__back-icon {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 300ms var(--ease-out-quart);
  }

  .mobile-menu__detail-kicker {
    color: color-mix(in srgb, var(--color-text) 56%, transparent);
    opacity: 1;
  }

  .mobile-menu__detail-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.75rem;
    align-items: start;
    gap: 1rem;
  }

  .mobile-menu__detail-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .mobile-menu__detail-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2rem, 7vw, 2.5rem);
    line-height: 1.04;
  }

  .mobile-menu__detail-media {
    margin: 0;
  }

  .mobile-menu__detail-copy {
    width: min(100%, 22rem);
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
  }

  .mobile-menu__detail-button {
    padding-block: 0.125rem;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.06;
    opacity: 0.56;
    cursor: pointer;
    transition:
      transform 180ms var(--ease-out-quint),
      opacity 300ms ease-out,
      color 240ms var(--ease-out-quart);
  }

  .mobile-menu__detail-button.is-active,
  .mobile-menu__top-button:is(:hover, :focus-visible),
  .mobile-menu__secondary-link:is(:hover, :focus-visible),
  .mobile-menu__locale-link:is(:hover, :focus-visible),
  .mobile-menu__back:is(:hover, :focus-visible),
  .mobile-menu__detail-button:is(:hover, :focus-visible) {
    opacity: 1;
  }

  .mobile-nav-action:is(:hover, :focus-visible) .mobile-nav-action__icon,
  .mobile-menu__top-button:is(:hover, :focus-visible) .mobile-menu__chevron-icon,
  .mobile-menu__detail-button[data-has-children="true"]:is(:hover, :focus-visible) .mobile-menu__chevron-icon {
    transform: translateX(0.25rem);
  }

  .mobile-menu__back:is(:hover, :focus-visible) .mobile-menu__back-icon {
    transform: translateX(-0.25rem);
  }

  .mobile-nav-action:is(:active),
  .mobile-menu__top-button:is(:active),
  .mobile-menu__detail-button:is(:active),
  .mobile-menu__detail-link:is(:active),
  .mobile-menu__back:is(:active),
  .mobile-menu__secondary-link:is(:active),
  .mobile-menu__locale-link:is(:active) {
    transform: scale(0.985);
  }

  .mobile-menu__detail-list {
    gap: 1rem;
  }

  .mobile-menu__detail-list--leaf {
    gap: 1.5rem;
  }

  .mobile-menu__detail-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.75rem;
    align-items: start;
    gap: 1rem;
    width: 100%;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    opacity: 0.7;
    transition:
      transform 180ms var(--ease-out-quint),
      opacity 300ms ease-out;
  }

  .mobile-menu__detail-link:is(:hover, :focus-visible) {
    opacity: 1;
  }

  .mobile-menu__detail-link-copy {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .mobile-menu__detail-link-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.625rem, 6vw, 2rem);
    line-height: 1.04;
    transition: transform 240ms var(--ease-out-quart);
  }

  .mobile-menu__detail-link-description {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text) 76%, transparent);
  }

  .mobile-menu__detail-image,
  .mobile-menu__detail-link-image {
    width: 100%;
    aspect-ratio: 351 / 439;
    object-fit: cover;
    background: var(--color-sand);
    transform: scale(1);
    transition: transform 500ms var(--ease-out-expo);
  }

  .mobile-menu__detail-link-media,
  .mobile-menu__detail-media {
    margin: 0;
    overflow: clip;
  }

  .mobile-menu__detail-link:is(:hover, :focus-visible) .mobile-menu__detail-link-title {
    transform: translateX(0.125rem);
  }

  .mobile-menu__detail-link:is(:hover, :focus-visible) .mobile-menu__detail-link-image {
    transform: scale(1.035);
  }

  .site-nav__trigger::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(100% + 0.5rem);
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0.65);
    transform-origin: left center;
    transition:
      opacity 300ms ease-out,
      transform 300ms ease-out;
  }

  .site-nav__trigger:is(:hover, :focus-visible),
  .site-nav__link:is(:hover, :focus-visible) {
    opacity: 1;
  }

  .mega-menu__branch-list,
  .mega-menu__leaf-group {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .mega-menu__leaf-group[hidden] {
    display: none;
  }

  .mega-menu__branch-trigger,
  .mega-menu__leaf-trigger {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.3;
    text-align: left;
    opacity: 0.5;
    transition: opacity 300ms ease-out;
    cursor: pointer;
  }

  .mega-menu__branch-trigger:is(:hover, :focus-visible),
  .mega-menu__leaf-trigger:is(:hover, :focus-visible),
  .mega-menu__branch-trigger.is-active,
  .mega-menu__leaf-trigger.is-active {
    opacity: 1;
  }

  .mega-menu__preview-media {
    grid-row: 1 / span 2;
    grid-column: 1 / span 4;
    margin: 0;
    padding-inline: 3.125rem;
  }

  .mega-menu__preview-image {
    width: 100%;
    height: 20.75rem;
    object-fit: cover;
    background: #ebe9d8;
  }

  .mega-menu__preview-copy {
    grid-column: 5 / -1;
    align-self: end;
    width: min(100%, 20.6875rem);
    margin: 0 0 0 auto;
    font-size: 1rem;
    line-height: 1.25;
  }

  .mega-menu__preview-link {
    grid-column: 5 / -1;
    width: max-content;
    margin-top: 1.25em;
  }

  body.has-open-megamenu .site-nav__surface {
    color: var(--color-text);
  }

  body.has-open-megamenu .site-nav__surface::before {
    background: var(--color-bg);
  }

  body.has-open-megamenu .site-nav__trigger,
  body.has-open-megamenu .site-nav__group--right .site-nav__link {
    opacity: 0.5;
  }

  body.has-open-megamenu .site-nav__trigger.is-open,
  body.has-open-megamenu .site-nav__trigger.is-open::after {
    opacity: 1;
  }

  body.has-open-megamenu .site-nav__trigger.is-open::after {
    transform: scaleX(1);
  }

  body.has-open-megamenu .brand--home {
    color: var(--color-text);
  }

  body.has-open-mobile-menu .site-nav__surface {
    color: var(--color-text);
  }

  body.has-open-mobile-menu .site-nav__surface::before {
    background: var(--color-bg);
  }

  body.has-open-mobile-menu .brand--home {
    color: var(--color-text);
  }

  body.has-open-mobile-menu .mobile-nav-action--menu::before {
    transform: rotate(45deg);
  }

  body.has-open-mobile-menu .mobile-nav-action--menu::after {
    transform: rotate(-45deg);
  }

  body.has-open-megamenu .mega-menu__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  @media (max-width: 72rem) {
    .mobile-menu {
      display: block;
    }

    .site-nav__mobile-actions {
      display: flex;
      align-items: center;
      gap: 0.125rem;
    }

    .site-nav__mobile-actions--right {
      justify-content: flex-end;
    }

    .site-nav__trigger,
    .site-nav__link {
      white-space: normal;
      justify-content: flex-start;
    }

    .mobile-menu__secondary-list {
      gap: 1rem;
    }

    .mobile-menu__locale-list {
      padding-top: 0.25rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-menu__root-main,
    .mobile-menu__root-footer,
    .mobile-menu__detail-head,
    .mobile-menu__detail-list,
    .mobile-menu__top-list > li,
    .mobile-menu__secondary-list > li,
    .mobile-menu__locale-list > li,
    .mobile-menu__detail-summary > *,
    .mobile-menu__detail-list > li,
    .mobile-nav-action,
    .mobile-nav-action__icon,
    .mobile-nav-action--menu::before,
    .mobile-nav-action--menu::after,
    .mobile-menu__top-button,
    .mobile-menu__chevron-icon,
    .mobile-menu__secondary-link,
    .mobile-menu__locale-link,
    .mobile-menu__back,
    .mobile-menu__back-icon,
    .mobile-menu__detail-button,
    .mobile-menu__detail-link,
    .mobile-menu__detail-link-title,
    .mobile-menu__detail-image,
    .mobile-menu__detail-link-image {
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
    }
  }
}

/* ========================================================================== 
   Components: media card
   ========================================================================== */

@layer components {
  .media-card img {
    width: 100%;
    height: 100%;
    min-height: clamp(22rem, 48vw, 43.75rem);
    object-fit: cover;
  }

  @media (max-width: 48rem) {
    .media-card img {
      min-height: 22rem;
    }
  }
}

/* ========================================================================== 
   Components: visual card surface
   ========================================================================== */

@layer components {
  .visual-card {
    --media-scale: 1;
    --overlay-opacity-rest: 0.3;
    --overlay-opacity-hover: 0.7;
    --overlay-opacity-current: var(--overlay-opacity-rest);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .visual-card:is(:hover, :focus-visible) {
    --media-scale: 1.04;
    --overlay-opacity-current: var(--overlay-opacity-hover);
  }

  .visual-card__media,
  .visual-card__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .visual-card__media {
    background-image: var(--card-image);
    background-size: cover;
    background-position: center;
    transform: scale(var(--media-scale));
    transform-origin: center center;
    transition: transform 700ms ease-out;
    z-index: -2;
  }

  .visual-card__overlay {
    opacity: var(--overlay-opacity-current);
    transition: opacity 700ms ease-out;
    background: linear-gradient(180deg, #29292900 0%, #292929 100%);
    z-index: -1;
  }
}

/* ========================================================================== 
   Components: category card
   ========================================================================== */

@layer components {
  .category-card {
    --underline-shift: 0%;
    --underline-width: 22rem;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 351 / 439;
    padding: 1.25rem 2.5rem;
    overflow: hidden;
    color: var(--color-white);
  }

  .category-card:is(:hover, :focus-visible) {
    --underline-shift: -100%;
  }

  .category-card__label-wrap {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 1.25rem;
    overflow: hidden;
  }

  .category-card__label-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(100% - 1px);
    width: var(--underline-width);
    height: 1px;
    background: currentColor;
    transform: translateX(var(--underline-shift));
    transform-origin: left center;
    transition: transform 700ms ease-out;
  }

  .category-card__label {
    display: inline-flex;
    align-items: center;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.09em;
    padding-bottom: 0.125rem;
    white-space: nowrap;
  }

  @media (max-width: 48rem) {
    .category-card {
      min-height: 22rem;
    }

    .category-card__label {
      white-space: normal;
    }
  }
}

/* ========================================================================== 
   Components: product card
   ========================================================================== */

@layer components {
  .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    color: var(--color-white);
    aspect-ratio: 351 / 439;
    padding: clamp(1.5em, 2.778vw, 2.778vw);
    scroll-snap-align: start;
    overflow: hidden;
    isolation: isolate;
  }

  .product-card__media,
  .product-card__media-overlay {
    position: absolute;
    inset: 0;
  }

  .product-card__media {
    overflow: hidden;
    z-index: -1;
  }

  .product-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 700ms ease-out;
  }

  .product-card__image--cropped {
    top: var(--product-card-image-top, 0%);
    left: var(--product-card-image-left, 0%);
    width: var(--product-card-image-width, 100%);
    height: var(--product-card-image-height, 100%);
    max-width: none;
    object-fit: cover;
  }

  .product-card__media-overlay {
    background: linear-gradient(180deg, rgba(41, 41, 41, 0) 0%, rgba(41, 41, 41, 0.68) 100%);
  }

  .product-card:is(:hover, :focus-visible) .product-card__image {
    transform: scale(1.04);
  }

  .product-card__copy {
    display: flex;
    flex-direction: column;
    gap: 0.375em;
  }

  .product-card h3 {
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.09em;
  }

  .product-card p {
    font-size: 1rem;
    line-height: 1;
    color: rgba(247, 245, 242, 0.7);
  }

  @media (max-width: 48rem) {
    .product-card {
      min-height: 22em;
    }
  }
}

/* ========================================================================== 
   Sections: utility bar
   ========================================================================== */

@layer sections {
  .site-header {
    position: fixed;
    inset-inline: 0;
    z-index: 10;
    min-block-size: var(--site-header-height);
    color: var(--color-white);
    transition:
      opacity 300ms ease-out,
      transform 300ms ease-out;
    will-change: opacity, transform;
  }

  body.has-hidden-site-header:not(.has-open-megamenu):not(.has-open-mobile-menu):not(.has-open-filter-drawer) .site-header {
    opacity: 0;
    transform: translateY(-0.75rem);
  }

  .utility-bar {
    position: relative;
    z-index: 4;
    background: var(--color-text);
    color: var(--color-white);
    font-size: 0.875rem;
    line-height: 1;
  }
}

/* ========================================================================== 
   Sections: hero
   ========================================================================== */

@layer sections {
  .hero {
    background: var(--color-black);
    color: var(--color-white);
  }

  .hero__surface {
    position: relative;
    min-height: min(51.25rem, 100svh);
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.2) 100%),
      radial-gradient(circle at 72% 28%, rgba(210, 178, 140, 0.9) 0%, rgba(160, 130, 96, 0.65) 24%, transparent 52%),
      linear-gradient(130deg, #080808 0%, #1b1510 40%, #83664a 100%);
    transition: background 300ms ease-out;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  .hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.28));
  }

  .hero__media,
  .hero__overlay,
  .hero__content {
    transition:
      opacity 300ms ease-out,
      transform 300ms ease-out;
  }

  .hero h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3.5rem, 7vw, 5.625rem);
    line-height: 1.01;
  }

  @media (max-width: 48rem) {
    .hero__surface {
      min-height: 42rem;
    }
  }
}

/* ========================================================================== 
   Sections: shared section typography
   ========================================================================== */

@layer sections {
  :where(.section-heading h2, .split-copy h2, .editorial-copy h2, .editorial-copy-block h2, .fullwidth-cta h2, .site-footer h2) {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.5rem, 4vw, 3.125rem);
    line-height: 1.1;
  }

  :where(.split-copy__body p, .editorial-copy p, .editorial-copy-block p, .fullwidth-cta p) {
    font-size: 1rem;
    line-height: 1.5;
  }

  :where(.site-footer h3, .social-block p) {
    font-family: var(--font-display);
    font-weight: 300;
  }
}

/* ========================================================================== 
   Sections: featured products
   ========================================================================== */

@layer sections {
  .featured-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.125rem;
    padding-top: 7.5rem;
    background: var(--color-bg);
    overflow: hidden;
  }

  .featured-products__rail {
    width: 100%;
  }

  .featured-products__rail .collection-rail__viewport {
    padding-bottom: 0;
  }

  @media (max-width: 72rem) {
    .featured-products {
      gap: clamp(2rem, 4vw, 3.125rem);
      padding-top: clamp(4.5rem, 8vw, 7.5rem);
    }
  }
}

/* ========================================================================== 
   Sections: editorial variants
   ========================================================================== */

@layer sections {
  .editorial-copy--light {
    background: var(--color-bg);
  }

  .editorial-copy__inner--wide-gap {
    gap: clamp(2rem, 6vw, 4.5rem);
  }

  .editorial-copy--offset-left > .editorial-copy__inner {
    margin-left: clamp(0rem, 2vw, 0.5rem);
  }

  .editorial-copy--offset-right > .editorial-copy__inner {
    margin-left: clamp(0rem, 8vw, 7.5rem);
  }

  .editorial-copy--compact > .editorial-copy__inner {
    width: min(100%, 34rem);
  }

  .editorial-trio {
    background: var(--color-tint);
    padding-top: var(--space-section);
    padding-bottom: 0.625rem;
  }

  @media (max-width: 72rem) {
    .editorial-copy--offset-right > .editorial-copy__inner,
    .editorial-copy--offset-left > .editorial-copy__inner {
      margin-left: 0;
    }
  }

  @media (max-width: 48rem) {
    .editorial-row--reverse-mobile > :first-child {
      order: 2;
    }

    .editorial-row--reverse-mobile > :last-child {
      order: 1;
    }
  }
}

/* ========================================================================== 
   Sections: full-width CTA
   ========================================================================== */

@layer sections {
  .fullwidth-cta {
    position: relative;
    min-height: var(--fullwidth-cta-min-height, 39.931vw);
    margin-top: 0;
    overflow: hidden;
    color: var(--color-white);
  }

  .fullwidth-cta__layout {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--fullwidth-cta-columns, 12), minmax(0, 1fr));
    column-gap: var(--fullwidth-cta-column-gap, 0.833vw);
    align-content: stretch;
    min-height: inherit;
    padding-block: clamp(2rem, 2.778vw, 2.778vw);
  }

  .fullwidth-cta__image,
  .fullwidth-cta__overlay {
    position: absolute;
    inset: 0;
  }

  .fullwidth-cta__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fullwidth-cta__overlay {
    background: linear-gradient(244.857deg, rgba(41, 41, 41, 0) 22.162%, #292929 100%);
  }

  .fullwidth-cta__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    gap: clamp(2rem, 4vw, 3.125rem);
    grid-column: var(--fullwidth-cta-content-start, 1) / span var(--fullwidth-cta-content-span, 4);
    grid-row: var(--fullwidth-cta-content-row-start, auto) / span var(--fullwidth-cta-content-row-span, 1);
    align-self: stretch;
    justify-self: stretch;
    min-width: 0;
  }

  .fullwidth-cta__content p {
    max-width: 100%;
  }

  @media (max-width: 72rem) {
    .fullwidth-cta {
      min-height: 46svh;
    }

    .fullwidth-cta__layout {
      grid-template-columns: repeat(var(--fullwidth-cta-tablet-columns, var(--fullwidth-cta-columns, 12)), minmax(0, 1fr));
    }

    .fullwidth-cta__content {
      grid-column: var(--fullwidth-cta-content-tablet-start, var(--fullwidth-cta-content-start, 1)) / span
        var(--fullwidth-cta-content-tablet-span, var(--fullwidth-cta-content-span, 4));
    }
  }

  @media (max-width: 48rem) {
    .fullwidth-cta {
      min-height: 70svh;
    }

    .fullwidth-cta__layout {
      grid-template-columns: repeat(var(--fullwidth-cta-mobile-columns, 1), minmax(0, 1fr));
    }

    .fullwidth-cta__overlay {
      background: linear-gradient(180deg, rgba(41, 41, 41, 0.2) 0%, rgba(41, 41, 41, 0.88) 100%);
    }

    .fullwidth-cta__content {
      grid-column: var(--fullwidth-cta-content-mobile-start, 1) / span var(--fullwidth-cta-content-mobile-span, 1);
      grid-row: auto / span 1;
      max-width: min(100%, 28em);
    }

    .fullwidth-cta__content p {
      max-width: none;
    }
  }
}

/* ========================================================================== 
   Components: E-Shop toolbar controls
   ========================================================================== */

@layer components {
  .eshop-page__toolbar-link,
  .eshop-page__toolbar-action,
  .eshop-page__toolbar-select,
  .eshop-filters__chip,
  .eshop-filters__color-chip,
  .eshop-filters__close,
  .eshop-filters__more {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  .eshop-page__toolbar-action,
  .eshop-page__toolbar-link,
  .eshop-page__toolbar-select-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }

  .eshop-page__toolbar-select-wrap {
    position: relative;
  }

  .eshop-page__toolbar-select {
    padding: 0 2rem 0 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    appearance: none;
    cursor: pointer;
  }

  .eshop-page__toolbar-select:focus {
    outline: none;
  }

  .eshop-page__toolbar-select-wrap .eshop-page__toolbar-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .eshop-page__toolbar-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
  }

  .eshop-filters__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
  }

  .eshop-filters__close-icon {
    width: 1rem;
    height: 1rem;
  }
}

/* ========================================================================== 
   Components: E-Shop product card
   ========================================================================== */

@layer components {
  .eshop-product-card {
    --eshop-image-opacity: 1;
    --eshop-hover-image-opacity: 0;
    --eshop-hover-overlay-opacity: 0;
    --eshop-copy-color: var(--color-text);
    --eshop-copy-muted: rgba(41, 41, 41, 0.5);
    position: relative;
    display: block;
    min-height: 34.375rem;
    background: #fff;
    color: var(--color-text);
    overflow: hidden;
    isolation: isolate;
  }

  .eshop-product-card:is(:hover, :focus-visible) {
    --eshop-image-opacity: 0;
    --eshop-hover-image-opacity: 1;
    --eshop-hover-overlay-opacity: 1;
    --eshop-copy-color: var(--color-white);
    --eshop-copy-muted: rgba(247, 245, 242, 0.5);
  }

  .eshop-product-card__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .eshop-product-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(41, 41, 41, 0) 63.909%, rgba(41, 41, 41, 0.5) 100%);
    opacity: var(--eshop-hover-overlay-opacity);
    pointer-events: none;
    transition: opacity 700ms ease-out;
  }

  .eshop-product-card__image,
  .eshop-product-card__hover-image {
    position: absolute;
    transition: opacity 700ms ease-out;
  }

  .eshop-product-card__image {
    top: var(--eshop-media-top);
    left: var(--eshop-media-left);
    width: var(--eshop-media-width);
    height: var(--eshop-media-height);
    max-width: none;
    opacity: var(--eshop-image-opacity);
    object-fit: contain;
  }

  .eshop-product-card__hover-image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--eshop-hover-image-opacity);
  }

  .eshop-product-card__hover-image--custom {
    top: var(--eshop-hover-media-top);
    right: auto;
    bottom: auto;
    left: var(--eshop-hover-media-left);
    width: var(--eshop-hover-media-width);
    height: var(--eshop-hover-media-height);
    max-width: none;
    object-fit: cover;
  }

  .eshop-product-card__copy {
    position: absolute;
    left: 1.875rem;
    right: 1.875rem;
    bottom: 1.46875rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    line-height: 1;
    z-index: 2;
    color: var(--eshop-copy-color);
  }

  .eshop-product-card__title,
  .eshop-product-card__subtitle,
  .eshop-product-card__meta,
  .eshop-product-card__price {
    transition: color 700ms ease-out;
  }

  .eshop-product-card__title,
  .eshop-product-card__subtitle {
    color: inherit;
  }

  .eshop-product-card__copy-main {
    display: flex;
    flex-direction: column;
    gap: 1.5625rem;
    min-width: 0;
  }

  .eshop-product-card__heading {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
  }

  .eshop-product-card__title {
    margin: 0;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1;
  }

  .eshop-product-card__subtitle,
  .eshop-product-card__meta {
    margin: 0;
    font-weight: 300;
    line-height: 1;
  }

  .eshop-product-card__subtitle {
    font-size: 1rem;
  }

  .eshop-product-card__subtitle--hidden {
    opacity: 0;
  }

  .eshop-product-card__meta,
  .eshop-product-card__price {
    font-size: 1.125rem;
    color: var(--eshop-copy-muted);
  }

  .eshop-product-card__price {
    margin: 0;
    flex: none;
    font-weight: 300;
    white-space: nowrap;
  }

  .eshop-product-card__badge {
    position: absolute;
    top: 1.875rem;
    left: 1.875rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9375rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid rgba(41, 41, 41, 0.5);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.1em;
    opacity: 0;
  }

  @media (max-width: 48rem) {
    .eshop-product-card {
      min-height: 31rem;
    }

    .eshop-product-card__copy {
      left: 1.25rem;
      right: 1.25rem;
      bottom: 1.25rem;
    }

    .eshop-product-card__copy {
      gap: 0.75rem;
    }

    .eshop-product-card__title {
      font-size: 1.125rem;
    }

    .eshop-product-card__subtitle {
      font-size: 0.9375rem;
    }

    .eshop-product-card__meta,
    .eshop-product-card__price {
      font-size: 1rem;
    }
  }
}

/* ========================================================================== 
   Sections: E-Shop page
   ========================================================================== */

@layer sections {
  .eshop-page {
    background: var(--color-bg);
  }

  .eshop-debug {
    padding: 0 2.5rem 2rem;
  }

  .eshop-debug__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-sand);
  }

  .eshop-debug__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    font-weight: 400;
  }

  .eshop-debug__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .eshop-debug__item {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-bg);
    font-size: 0.9375rem;
    line-height: 1;
  }

  .eshop-debug__item-name {
    font-weight: 400;
  }

  .eshop-debug__item-value {
    font-weight: 300;
  }

  .eshop-page__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.6875rem 2.5rem 5rem;
  }

  .eshop-page__toolbar-categories {
    display: flex;
    align-items: center;
    gap: 3.125rem;
    min-width: 0;
  }

  .eshop-page__toolbar-link,
  .eshop-page__toolbar-action,
  .eshop-page__toolbar-select {
    font-size: 1.125rem;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 300ms ease-out;
  }

  .eshop-page__toolbar-link {
    opacity: 0.5;
    font-weight: 300;
  }

  .eshop-page__toolbar-link.is-active,
  .eshop-page__toolbar-link:is(:hover, :focus-visible),
  .eshop-page__toolbar-action:is(:hover, :focus-visible),
  .eshop-page__toolbar-select-wrap:is(:hover, :focus-within) {
    opacity: 1;
  }

  .eshop-page__toolbar-link.is-active {
    font-weight: 400;
  }

  .eshop-page__toolbar-actions {
    display: flex;
    align-items: center;
    gap: 1.9375rem;
    flex: none;
  }

  .eshop-page__toolbar-action {
    gap: 0.875rem;
    font-weight: 300;
  }

  .eshop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding-bottom: 8.3125rem;
  }

  @media (max-width: 72rem) {
    .eshop-page__toolbar {
      flex-direction: column;
      align-items: stretch;
      padding-top: 4.5rem;
      padding-bottom: 3rem;
    }

    .eshop-page__toolbar-categories {
      overflow-x: auto;
      padding-bottom: 0.25rem;
      scrollbar-width: none;
    }

    .eshop-page__toolbar-categories::-webkit-scrollbar {
      display: none;
    }

    .eshop-page__toolbar-actions {
      justify-content: flex-end;
    }

    .eshop-debug {
      padding: 0 2.5rem 1.5rem;
    }

    .eshop-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 48rem) {
    .eshop-page__toolbar {
      padding-inline: 1rem;
      padding-top: 2.5rem;
      padding-bottom: 2rem;
    }

    .eshop-page__toolbar-categories {
      gap: 1.5rem;
    }

    .eshop-page__toolbar-link,
    .eshop-page__toolbar-action,
    .eshop-page__toolbar-select {
      font-size: 1rem;
    }

    .eshop-page__toolbar-actions {
      justify-content: space-between;
      gap: 1rem;
    }

    .eshop-debug {
      padding: 0 1rem 1.25rem;
    }

    .eshop-debug__inner {
      flex-direction: column;
      align-items: center;
    }

    .eshop-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* ========================================================================== 
   Sections: E-Shop filters drawer
   ========================================================================== */

@layer sections {
  .eshop-filters {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40rem;
  }

  .eshop-filters[hidden] {
    display: none;
  }

  .eshop-filters__backdrop {
    border: 0;
    padding: 0;
    background: rgba(41, 41, 41, 0.1);
    backdrop-filter: blur(7px);
  }

  .eshop-filters__panel {
    display: flex;
    flex-direction: column;
    gap: 7.3125rem;
    padding: 3.8125rem 2.5rem 3rem;
    background: var(--color-bg);
    color: var(--color-text);
    overflow-y: auto;
  }

  .eshop-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1rem;
    line-height: 1;
  }

  .eshop-filters__head p {
    margin: 0;
    font-weight: 300;
  }

  .eshop-filters__body {
    display: flex;
    flex-direction: column;
    gap: 3.75rem;
  }

  .eshop-filters__group {
    display: flex;
    flex-direction: column;
    gap: 1.8125rem;
  }

  .eshop-filters__group--colors {
    gap: 1.8125rem;
  }

  .eshop-filters__group h2 {
    margin: 0;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1;
  }

  .eshop-filters__chip-grid,
  .eshop-filters__color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .eshop-filters__color-chip.eshop-filters__color-chip--extra {
    display: none;
  }

  .eshop-filters__group--colors.is-expanded .eshop-filters__color-chip.eshop-filters__color-chip--extra {
    display: flex;
  }

  .eshop-filters__chip,
  .eshop-filters__color-chip {
    --eshop-filter-chip-bg: var(--color-sand);
    --eshop-filter-chip-fg: var(--color-text);
    min-height: 3.5625rem;
    padding: 1.375rem 1.25rem;
    background: var(--eshop-filter-chip-bg);
    color: var(--eshop-filter-chip-fg);
    font-size: 1rem;
    line-height: 1;
    font-weight: 300;
    text-align: center;
    cursor: pointer;
    transition: background-color 300ms ease-out, color 300ms ease-out;
  }

  .eshop-filters__chip:is(:hover, :focus-visible),
  .eshop-filters__chip.is-active,
  .eshop-filters__chip[aria-pressed="true"],
  .eshop-filters__color-chip:is(:hover, :focus-visible),
  .eshop-filters__color-chip.is-active,
  .eshop-filters__color-chip[aria-pressed="true"] {
    --eshop-filter-chip-bg: var(--color-text);
    --eshop-filter-chip-fg: var(--color-white);
  }

  .eshop-filters__chip.is-active:hover,
  .eshop-filters__chip[aria-pressed="true"]:hover,
  .eshop-filters__color-chip.is-active:hover,
  .eshop-filters__color-chip[aria-pressed="true"]:hover {
    --eshop-filter-chip-bg: var(--color-sand);
    --eshop-filter-chip-fg: var(--color-text);
  }

  .eshop-filters__color-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.625rem;
    text-align: left;
  }

  .eshop-filters__swatch {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    background: var(--eshop-swatch);
  }

  .eshop-filters__more {
    align-self: flex-end;
  }

  .eshop-filters__group--colors.is-expanded .eshop-filters__more {
    display: none;
  }

  @media (max-width: 72rem) {
    .eshop-filters {
      grid-template-columns: minmax(0, 1fr);
    }

    .eshop-filters__backdrop {
      position: absolute;
      inset: 0;
    }

    .eshop-filters__panel {
      position: relative;
      margin-left: auto;
      width: min(100%, 40rem);
    }
  }

  @media (max-width: 48rem) {
    .eshop-filters__panel {
      gap: 3rem;
      width: 100%;
      padding: 1.5rem 1rem 2rem;
    }

    .eshop-filters__body {
      gap: 2.5rem;
    }

    .eshop-filters__chip-grid,
    .eshop-filters__color-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* ========================================================================== 
   Sections: Borse page
   ========================================================================== */

@layer sections {
  .hero--borse .hero__surface {
    min-height: min(56.944vw, 100svh);
  }

  .borse-page__stories,
  .borse-page__club {
    background: var(--color-bg);
  }

  .borse-page__stories {
    display: flex;
    flex-direction: column;
    gap: 8.333vw;
    padding-top: 8.333vw;
    padding-bottom: 10.417vw;
  }

  .borse-page__intro-media,
  .borse-page__intro-media img {
    width: 100%;
  }

  .borse-page__intro-media {
    margin: 0;
    aspect-ratio: 1.028571;
    overflow: hidden;
  }

  .borse-page__intro-media img {
    height: 100%;
    object-fit: cover;
  }

  .borse-page__intro-copy {
    width: min(100%, 38.889vw);
    padding-inline: 8.333vw 2.778vw;
  }

  .borse-story-copy--left,
  .borse-page__row-copy {
    padding-inline-start: 2.778vw;
  }

  .borse-story-copy--right,
  .borse-page__row-actions {
    padding-inline-end: 2.778vw;
  }

  .borse-page__row-actions {
    justify-content: flex-end;
    min-height: 100%;
  }

  .borse-page__club .editorial-copy-block__actions {
    gap: 0;
  }

  .fullwidth-cta--borse .fullwidth-cta__actions {
    gap: clamp(1.5em, 3.056vw, 3.056vw);
  }

  @media (max-width: 72rem) {
    .borse-page__intro-copy,
    .borse-story-copy--left,
    .borse-story-copy--right,
    .borse-page__row-copy,
    .borse-page__row-actions {
      width: 100%;
      padding-inline: clamp(1.25em, 4.444vw, 4.444vw);
      padding-block: 2em;
    }

    .borse-page__row-actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 48rem) {
    .hero--borse .hero__surface {
      min-height: 70svh;
    }

    .fullwidth-cta--borse .fullwidth-cta__actions {
      align-items: stretch;
    }
  }
}

/* ========================================================================== 
   Sections: footer
   ========================================================================== */

@layer sections {
  .site-footer {
    background: var(--color-text);
    color: var(--color-white);
    padding-top: 2.25rem;
    padding-bottom: 1rem;
  }

  .site-footer h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  }

  .site-footer__top {
    align-items: flex-start;
  }

  .site-footer__links nav {
    display: flex;
    flex-direction: column;
    gap: 2.1875rem;
  }

  .site-footer__links ul {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1rem;
    line-height: 1.2;
  }

  .site-footer h3 {
    font-size: 1.25rem;
    line-height: 1;
  }

  .site-footer__middle {
    align-items: end;
    padding-top: 5rem;
  }

  .social-block p {
    font-size: 1.125rem;
    line-height: 1;
  }

  .site-footer__bottom {
    align-items: center;
    font-size: 0.75rem;
    line-height: 1.2;
    padding-top: 3.75rem;
  }
}

/* ========================================================================== 
   Utilities
   Reserved for high-order single-purpose helpers such as .w-full or .sr-only.
   ========================================================================== */

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}