@layer layouts {
  /* Contact page: move from a directory of details to an invitation to talk. */
  .public-site .contact-page {
    --contact-ink: #241b18;
    --contact-paper: #fbf8f4;
    --contact-line: #dfd3c9;
    --contact-wine: #370617;
    --contact-copper: #b5683e;
    --contact-gold: #ffba08;
  }

  .public-site .contact-page__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(12rem, 0.85fr);
    min-height: clamp(19rem, 32vw, 26rem);
    margin-bottom: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(2rem, 5vw, 4.75rem);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: var(--contact-wine);
    border-radius: 0;
  }

  .public-site .contact-page__hero::after {
    position: absolute;
    right: -0.05em;
    bottom: -0.34em;
    z-index: -1;
    content: '';
    color: rgb(255 186 8 / 0.1);
    font-family: var(--heading-font);
    font-size: clamp(15rem, 34vw, 27rem);
    font-weight: var(--weight-strong);
    letter-spacing: -0.14em;
    line-height: 0.8;
  }

  .public-site .contact-page__hero-copy,
  .public-site .contact-page__hero-mark {
    position: relative;
    z-index: 1;
  }

  .public-site .contact-page__hero-mark img {
    width: clamp(7rem, 13vw, 10rem);
    height: auto;
    object-fit: contain;
  }

  .public-site .contact-page__hero-copy {
    align-self: end;
    max-width: 38rem;
  }

  .public-site .contact-page__eyebrow,
  .public-site .contact-page__channel-label {
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--type-label-tracking);
    line-height: 1.35;
    text-transform: uppercase;
  }

  .public-site .contact-page__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    color: var(--contact-gold);
  }

  .public-site .contact-page__eyebrow::before {
    width: 0.55rem;
    height: 0.55rem;
    content: '';
    background: var(--contact-gold);
    border-radius: 0;
  }

  .public-site .contact-page__hero h1 {
    max-width: 10ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2.45rem, 6vw, 5.25rem);
    font-weight: var(--weight-heading);
    line-height: 0.98;
    letter-spacing: -0.065em;
    text-wrap: balance;
  }

  .public-site .contact-page__hero-title {
    max-width: 28ch;
    margin: 1.15rem 0 0;
    color: var(--contact-gold);
    font-family: var(--heading-font);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: var(--weight-medium);
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  .public-site .contact-page__hero-copy > p:last-child {
    max-width: 41ch;
    margin: 1.5rem 0 0;
    color: rgb(255 255 255 / 0.72);
    font-size: var(--type-lead);
    line-height: 1.55;
  }

  .public-site .contact-page__hero-mark {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1rem;
    align-self: end;
    padding-bottom: 0.15rem;
  }

  .public-site .contact-page__hero-mark span {
    color: var(--contact-gold);
    font-family: var(--heading-font);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: var(--weight-strong);
    letter-spacing: -0.12em;
    line-height: 0.8;
  }

  .public-site .contact-page__hero-mark small {
    padding-bottom: 0.15rem;
    color: rgb(255 255 255 / 0.7);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong);
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .public-site .contact-page__grid {
    display: grid;
    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(1rem, 3vw, 3rem);
    align-items: start;
  }

  .public-site .contact-page__channels {
    display: grid;
    gap: 0;
    padding: clamp(0.5rem, 2vw, 1.25rem) 0;
  }

  .public-site .contact-page__channel {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.35rem 0;
    border-top: 1px solid var(--contact-line);
  }

  .public-site .contact-page__channel:last-child {
    border-bottom: 1px solid var(--contact-line);
  }

  .public-site .contact-page__channel-icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    color: var(--contact-wine);
    background: var(--contact-gold);
    border-radius: 0;
  }

  .public-site .contact-page__channel-icon i::before {
    font-size: 1rem;
  }

  .public-site .contact-page__channel-label {
    margin: 0 0 0.4rem;
    color: var(--contact-copper);
  }

  .public-site .contact-page__channel address,
  .public-site .contact-page__channel a {
    margin: 0;
    color: var(--contact-ink);
    font-size: var(--type-small);
    line-height: 1.65;
  }

  .public-site .contact-page__channel a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .public-site .contact-page__channel a:hover {
    color: var(--primary-color);
  }

  .public-site .contact-page__form-panel {
    padding: clamp(1.25rem, 3vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--contact-line);
    border-radius: 0;
    box-shadow: 0 1.5rem 4rem rgb(55 6 23 / 0.06);
  }

  .public-site .contact-page__form-heading {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--contact-line);
  }

  .public-site .contact-page__form-heading h2 {
    max-width: 18ch;
    margin: 0;
    color: var(--contact-ink);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
    text-wrap: balance;
  }

  .public-site .contact-page__form-heading > p:last-child {
    max-width: 40ch;
    margin: 0.85rem 0 0;
    color: rgb(36 27 24 / 0.62);
    font-size: var(--type-small);
    line-height: 1.55;
  }

  .public-site .contact-page__form-panel form {
    margin: 0;
    padding-top: 1.5rem;
  }

  .public-site .contact-page__form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
  }

  .public-site .contact-page__field--full {
    grid-column: 1 / -1;
  }

  .public-site .contact-page__field label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--contact-ink);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .public-site .contact-page__field .form-control {
    min-height: 3.1rem;
    padding: 0.8rem 0.9rem;
    color: var(--contact-ink);
    background: var(--contact-paper);
    border: 1px solid var(--contact-line);
    border-radius: 0;
    box-shadow: none;
  }

  .public-site .contact-page__field textarea.form-control {
    min-height: 10rem;
    resize: vertical;
  }

  .public-site .contact-page__field .form-control:focus {
    background: #fff;
    border-color: var(--contact-copper);
    box-shadow: 0 0 0 0.2rem rgb(181 104 62 / 0.16);
  }

  .public-site .contact-page__field .form-control:focus-visible,
  .public-site .contact-page__channel a:focus-visible {
    outline: 2px solid var(--contact-copper);
    outline-offset: 3px;
  }

  .public-site .contact-page__form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--contact-line);
  }

  .public-site .contact-page__form-actions span {
    color: rgb(36 27 24 / 0.55);
    font-size: var(--type-label);
  }

  .public-site .contact-page__form-actions .btn {
    min-height: 2.9rem;
    padding-inline: 1.25rem;
    border-radius: 0;
  }

  .public-site .contact-page__form-actions .btn i {
    margin-left: 0.35rem;
  }

  @media (max-width: 767.98px) {
    .public-site .contact-page__hero {
      grid-template-columns: 1fr;
      min-height: 25rem;
      padding: clamp(1.5rem, 7vw, 2.75rem);
    }

    .public-site .contact-page__hero-mark {
      justify-content: flex-start;
    }

    .public-site .contact-page__grid {
      grid-template-columns: 1fr;
    }

    .public-site .contact-page__channels {
      padding-block: 0;
    }
  }

  @media (max-width: 575.98px) {
    .public-site .contact-page__hero {
      border-radius: 0;
    }

    .public-site .contact-page__hero h1 {
      font-size: clamp(2.25rem, 13vw, 3.6rem);
    }

    .public-site .contact-page__form-panel {
      padding: 1rem;
      border-radius: 0;
    }

    .public-site .contact-page__form-fields {
      grid-template-columns: 1fr;
    }

    .public-site .contact-page__field--full {
      grid-column: auto;
    }

    .public-site .contact-page__form-actions {
      align-items: stretch;
      flex-direction: column;
    }

    .public-site .contact-page__form-actions .btn {
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .public-site .contact-page__channel a,
    .public-site .contact-page__form-actions .btn {
      transition: none;
    }
  }
}

@layer layouts {
  /* Customer account: keep the private journey in the same gallery-led visual world. */
  .public-site .login-page,
  .public-site .profile-setup-page,
  .public-site .account-page {
    --account-ink: #241b18;
    --account-paper: #fbf8f4;
    --account-line: #dfd3c9;
    --account-wine: #370617;
    --account-copper: #a85f38;
    --account-copper-soft: #ead8ca;
    --account-gold: #ffba08;
    color: var(--account-ink);
    background: #fffaf6;
  }

  .public-site .login-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
    align-items: stretch;
    max-width: 68rem;
    margin-inline: auto;
    border: 1px solid var(--account-line);
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1.25rem 4rem rgb(55 6 23 / 0.08);
  }

  .public-site .login-page__panel {
    padding: clamp(1.5rem, 5vw, 4.5rem);
  }

  .public-site .login-page__panel-heading h1 {
    max-width: 16ch;
    margin: 0;
    color: var(--account-wine);
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    line-height: 0.98;
    letter-spacing: -0.07em;
    text-wrap: balance;
  }

  .public-site .login-page__panel-heading p {
    max-width: 30rem;
    margin: 1rem 0 0;
    color: rgb(36 27 24 / 0.68);
    line-height: 1.55;
  }

  .public-site .login-page__error {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
    padding: 0.8rem 0.9rem;
    color: #8d1e1e;
    border: 1px solid rgb(141 30 30 / 0.25);
    background: rgb(141 30 30 / 0.06);
    font-size: var(--type-small);
  }

  .public-site .login-page__form {
    display: grid;
    gap: 1.25rem;
    margin-top: clamp(2rem, 4vw, 3rem);
  }

  .public-site .login-page__field {
    display: grid;
    gap: 0.5rem;
  }

  .public-site .login-page__field label,
  .public-site .login-page__field-label a {
    color: var(--account-ink);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong, 700);
  }

  .public-site .login-page__field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .public-site .login-page__field-label a {
    color: var(--account-copper);
    font-weight: var(--weight-medium, 500);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .public-site .login-page__field .form-control {
    min-height: 3.1rem;
    border: 1px solid var(--account-line);
    border-radius: 0;
    color: var(--account-ink);
    background: var(--account-paper);
    box-shadow: none;
  }

  .public-site .login-page__field .form-control:focus {
    border-color: var(--account-copper);
    box-shadow: 0 0 0 3px rgb(168 95 56 / 0.14);
  }

  .public-site .login-page__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--account-wine);
    border-radius: 0;
    color: #fff;
    background: var(--account-wine);
    font-family: var(--heading-font);
    font-weight: var(--weight-strong, 700);
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .public-site .login-page__submit:hover {
    border-color: var(--account-copper);
    background: var(--account-copper);
    transform: translateY(-0.1rem);
  }

  .public-site .login-page__register {
    margin: 1.5rem 0 0;
    color: rgb(36 27 24 / 0.65);
    font-size: var(--type-small);
  }

  .public-site .login-page__register a {
    color: var(--account-copper);
    font-weight: var(--weight-strong, 700);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .public-site .profile-setup-page__layout {
    max-width: 72rem;
  }

  .public-site__flash {
    width: min(72rem, calc(100% - 2rem));
    margin: 1rem auto 0;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid var(--account-line, #decfc4);
    color: var(--account-ink, #241b18);
    background: var(--account-paper, #fbf8f4);
    font-size: var(--type-small);
  }

  .public-site__flash i {
    color: var(--account-copper, #a85f38);
    font-size: 1.1rem;
  }

  .public-site__flash--success {
    border-color: rgb(168 95 56 / 0.35);
  }

  .public-site .profile-setup-page__form {
    gap: 1.5rem;
  }

  .public-site .profile-setup-page__details-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--account-line);
  }

  .public-site .profile-setup-page__details-heading h2 {
    margin: 0;
    color: var(--account-wine);
    font-size: 1.15rem;
    letter-spacing: -0.035em;
  }

  .public-site .profile-setup-page__details-heading p {
    margin: 0.3rem 0 0;
    color: rgb(36 27 24 / 0.62);
    font-size: var(--type-small);
  }

  .public-site .profile-setup-page__details-heading > i {
    color: var(--account-copper);
    font-size: 1.35rem;
  }

  .public-site .profile-setup-page__address-grid {
    padding: 1rem;
    border: 1px solid var(--account-line);
    background: var(--account-paper);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .public-site .profile-setup-page__address-grid .form-control {
    display: block;
    width: 100%;
    min-height: 3.35rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--account-line);
    border-radius: 0;
    color: var(--account-ink);
    background: #fff;
    box-shadow: none;
    opacity: 1;
  }

  .public-site .profile-setup-page__address-grid .form-control:focus {
    border-color: var(--account-copper);
    box-shadow: 0 0 0 3px rgb(168 95 56 / 0.14);
  }

  .public-site .profile-setup-page__form > .login-page__submit {
    width: 100%;
  }

  .public-site .profile-setup-page__field--wide {
    grid-column: 1 / -1;
  }

  .public-site .profile-setup-page__aside {
    min-height: 100%;
  }

  .public-site .login-page__otp {
    display: grid;
    gap: 1.5rem;
  }

  .public-site .login-page__otp .login-page__panel-heading {
    margin-bottom: 0;
  }

  .public-site .login-page__otp .login-page__panel-heading h1 {
    font-size: clamp(2rem, 5vw, 3.8rem);
  }

  .public-site .segmented__input {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .public-site .segmented__input input {
    width: 100%;
    min-height: 4rem;
    border: 1px solid var(--account-line);
    border-radius: 0;
    color: var(--account-wine);
    background: var(--account-paper);
    font-family: var(--heading-font);
    font-size: 1.8rem;
    font-weight: var(--weight-strong, 700);
    text-align: center;
  }

  .public-site .segmented__input input:focus {
    outline: 0;
    border-color: var(--account-copper);
    box-shadow: 0 0 0 3px rgb(168 95 56 / 0.14);
  }

  .public-site .login-page__otp-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
  }

  .public-site .login-page__otp-actions .login-page__submit {
    width: 100%;
  }

  .public-site .login-page__otp-back {
    color: var(--account-copper);
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    white-space: nowrap;
  }

  .public-site .login-page__otp-resend {
    display: flex;
    justify-content: center;
  }

  .public-site .login-page__otp-resend-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--account-copper);
    border-radius: 0;
    color: var(--account-wine);
    background: transparent;
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .public-site .login-page__otp-resend-button:hover {
    border-color: var(--account-copper);
    color: #fff;
    background: var(--account-copper);
    transform: translateY(-0.1rem);
  }

  .public-site .login-page__otp-resend-button:focus-visible {
    outline: 2px solid var(--account-copper);
    outline-offset: 3px;
  }

  .public-site .login-page__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 30rem;
    padding: clamp(1.5rem, 5vw, 4rem);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: var(--account-wine);
  }

  .public-site .login-page__aside::after {
    position: absolute;
    right: -0.1em;
    bottom: -0.2em;
    z-index: -1;
    content: '';
    color: rgb(255 186 8 / 0.1);
    font-family: var(--heading-font);
    font-size: clamp(12rem, 25vw, 22rem);
    font-weight: var(--weight-strong, 700);
    letter-spacing: -0.15em;
    line-height: 0.75;
  }

  .public-site .login-page__aside-mark img {
    display: block;
    width: clamp(5.5rem, 11vw, 8rem);
    height: auto;
    object-fit: contain;
  }

  .public-site .login-page__aside h2 {
    max-width: 16ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.065em;
  }

  .public-site .login-page__aside p {
    max-width: 22rem;
    margin: 1.25rem 0 0;
    color: rgb(255 255 255 / 0.76);
    line-height: 1.6;
  }

  .public-site .login-page__aside-rule {
    width: 4rem;
    height: 0.35rem;
    background: var(--account-gold);
  }

  .public-site .account-page__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
  }

  .public-site .account-page__header h1 {
    margin: 0;
    color: var(--account-wine);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.07em;
  }

  .public-site .account-page__header p {
    margin: 1rem 0 0;
    color: rgb(36 27 24 / 0.68);
    line-height: 1.55;
  }

  .public-site .account-page__header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--account-copper);
    color: var(--account-wine);
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
    text-decoration: none;
    transition: gap 180ms ease, color 180ms ease;
  }

  .public-site .account-page__header-link:hover {
    gap: 0.8rem;
    color: var(--account-copper);
  }

  .public-site .account-page__layout {
    display: grid;
    grid-template-columns: minmax(13rem, 0.28fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1rem, 3vw, 2rem);
  }

  .public-site .account-nav-panel,
  .public-site .account-profile {
    border: 1px solid var(--account-line);
    border-radius: 0;
    background: #fff;
    box-shadow: 0 1rem 3rem rgb(55 6 23 / 0.05);
  }

  .public-site .account-nav-panel {
    position: sticky;
    top: 6.5rem;
    overflow: hidden;
  }

  .public-site .account-nav-panel .sidebar__nav {
    padding: 0.75rem;
  }

  .public-site .account-nav-panel .sidebar__nav ul {
    gap: 0.25rem !important;
  }

  .public-site .account-nav-panel .sidebar__nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.75rem;
    border-radius: 0;
    color: rgb(36 27 24 / 0.72);
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-medium, 500);
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease;
  }

  .public-site .account-nav-panel .sidebar__nav .nav-link:hover,
  .public-site .account-nav-panel .sidebar__nav .nav-link:focus-visible {
    color: var(--account-wine);
    background: var(--account-paper);
  }

  .public-site .account-nav-panel .sidebar__nav .nav-link i {
    width: 1.1rem;
    color: var(--account-copper);
    text-align: center;
  }

  .public-site .account-nav-panel .sidebar__nav hr {
    margin: 0.75rem 0;
    border-color: var(--account-line);
    opacity: 1;
  }

  .public-site .account-profile {
    overflow: hidden;
  }

  .public-site .account-profile__notice {
    margin: 1rem 1rem 0;
    padding: 0.8rem 1rem;
    border: 1px solid var(--account-line);
    font-size: var(--type-small);
    line-height: 1.45;
  }

  .public-site .account-profile__notice--success {
    color: #246b4f;
    background: #edf7f0;
  }

  .public-site .account-profile__notice--error {
    color: var(--account-wine);
    background: #fff1ed;
  }

  .public-site .account-profile__hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    color: #fff;
    background: var(--account-wine);
  }

  .public-site .account-profile__avatar {
    display: grid;
    flex: 0 0 auto;
    width: 4.75rem;
    height: 4.75rem;
    place-items: center;
    padding: .4rem;
    border: 2px solid var(--account-gold);
    border-radius: 0;
    background: var(--account-gold);
  }

  .public-site .account-profile__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .public-site .account-profile__hero h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.06em;
  }

  .public-site .account-profile__hero p {
    margin: 0.55rem 0 0;
    color: rgb(255 255 255 / 0.75);
  }

  .public-site .account-profile__section {
    padding: clamp(1.25rem, 4vw, 2rem);
    border-bottom: 1px solid var(--account-line);
  }

  .public-site .account-profile__section:last-child {
    border-bottom: 0;
  }

  .public-site .account-profile__section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  .public-site .account-profile__section-heading h3 {
    margin: 0;
    color: var(--account-wine);
    font-size: 1.3rem;
    letter-spacing: -0.04em;
  }

  .public-site .account-profile__section-heading p {
    margin: 0.4rem 0 0;
    color: rgb(36 27 24 / 0.62);
    font-size: var(--type-small);
  }

  .public-site .account-profile__section-heading > i {
    color: var(--account-copper);
    font-size: 1.4rem;
  }

  .public-site .account-profile__edit {
    flex: 0 0 auto;
  }

  .public-site .account-profile__edit summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--account-copper);
    color: var(--account-wine);
    cursor: pointer;
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
    list-style: none;
  }

  .public-site .account-profile__edit summary::-webkit-details-marker {
    display: none;
  }

  .public-site .account-profile__edit summary::after {
    content: '+';
    color: var(--account-copper);
    font-size: 1rem;
    line-height: 1;
  }

  .public-site .account-profile__edit[open] summary::after {
    content: '−';
  }

  .public-site .account-profile__edit summary:hover,
  .public-site .account-profile__edit summary:focus-visible {
    color: var(--account-copper);
  }

  .public-site .account-profile__edit-form {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--account-line);
  }

  .public-site .account-profile__edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .public-site .account-profile__edit-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .public-site .account-profile__edit-grid label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--account-wine);
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
  }

  .public-site .account-profile__edit-grid input {
    display: block;
    width: 100%;
    min-height: 2.9rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--account-line);
    border-radius: 0;
    color: var(--account-ink);
    background: #fff;
  }

  .public-site .account-profile__edit-grid input:focus {
    border-color: var(--account-copper);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(181 90 47 / 0.14);
  }

  .public-site .account-profile__edit-grid small {
    display: block;
    margin-top: 0.4rem;
    color: rgb(36 27 24 / 0.58);
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .public-site .account-profile__edit-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
  }

  .public-site .account-profile__save {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.8rem;
    padding: 0.65rem 0.9rem;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: var(--account-wine);
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
  }

  .public-site .account-profile__save:hover,
  .public-site .account-profile__save:focus-visible {
    background: var(--account-copper);
  }

  .public-site .account-profile__edit-actions a {
    color: var(--account-wine);
    font-size: var(--type-small);
  }

  .public-site .account-profile__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 0;
  }

  .public-site .account-profile__details > div {
    min-width: 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--account-line);
  }

  .public-site .account-profile__details dt {
    color: rgb(36 27 24 / 0.55);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .public-site .account-profile__details dd {
    margin: 0.5rem 0 0;
    overflow-wrap: anywhere;
    color: var(--account-ink);
    font-size: var(--type-small);
  }

  .public-site .account-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .public-site .account-shortcut {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 5.5rem;
    padding: 0.85rem;
    border: 1px solid var(--account-line);
    color: var(--account-ink);
    background: var(--account-paper);
    text-decoration: none;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
  }

  .public-site .account-shortcut:hover {
    border-color: var(--account-copper);
    background: var(--account-copper-soft);
    transform: translateY(-0.1rem);
  }

  .public-site .account-shortcut > i:first-child {
    color: var(--account-copper);
    font-size: 1.25rem;
  }

  .public-site .account-shortcut > i:last-child {
    color: var(--account-wine);
    font-size: 0.85rem;
  }

  .public-site .account-page__content {
    min-width: 0;
    border: 1px solid var(--account-line);
    background: #fff;
    box-shadow: 0 1rem 3rem rgb(55 6 23 / 0.05);
  }

  .public-site .account-page__card {
    min-height: 100%;
  }

  .public-site .account-page__card > .card-body {
    padding: clamp(1.15rem, 3vw, 2rem);
  }

  .public-site .account-empty-state {
    display: flex;
    min-height: clamp(18rem, 30vw, 23rem);
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px dashed var(--account-line);
    background: var(--account-paper);
    text-align: center;
  }

  .public-site .account-empty-state__icon {
    display: inline-grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border: 1px solid var(--account-copper);
    color: var(--account-copper);
    background: var(--account-copper-soft);
    font-size: 1.35rem;
  }

  .public-site .account-empty-state h2 {
    margin: 1.25rem 0 0;
    color: var(--account-wine);
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.1;
  }

  .public-site .account-empty-state p {
    max-width: 32rem;
    margin: 0.7rem auto 0;
    color: rgb(36 27 24 / 0.68);
    line-height: 1.55;
  }

  .public-site .account-empty-state__action {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.5rem;
    padding: 0.8rem 1.05rem;
    border: 1px solid var(--account-wine);
    color: #fff;
    background: var(--account-wine);
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
    text-decoration: none;
    transition: gap 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }

  .public-site .account-empty-state__action:hover,
  .public-site .account-empty-state__action:focus-visible {
    gap: 0.9rem;
    border-color: var(--account-copper);
    background: var(--account-copper);
  }

  .public-site .account-order-card {
    margin-bottom: 1rem;
    overflow: hidden;
    border: 1px solid var(--account-line);
    border-top: 0.25rem solid var(--account-copper);
    background: var(--account-paper);
  }

  .public-site .account-order-card:last-child {
    margin-bottom: 0;
  }

  .public-site .account-order-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border-bottom: 1px solid var(--account-line);
    background: #fff;
  }

  .public-site .account-order-card__identity {
    min-width: 0;
  }

  .public-site .account-order-card__number {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    color: var(--account-wine);
  }

  .public-site .account-order-card__number span,
  .public-site .account-order-card__meta dt,
  .public-site .account-order-card__status span {
    color: rgb(36 27 24 / 0.55);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .public-site .account-order-card__number strong {
    overflow-wrap: anywhere;
    font-family: var(--heading-font);
    font-size: 1.1rem;
    letter-spacing: -0.025em;
  }

  .public-site .account-order-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin: 0.85rem 0 0;
  }

  .public-site .account-order-card__meta > div {
    min-width: 6rem;
  }

  .public-site .account-order-card__meta dt {
    font-size: 0.65rem;
  }

  .public-site .account-order-card__meta dd {
    margin: 0.2rem 0 0;
    color: var(--account-ink);
    font-size: var(--type-small);
  }

  .public-site .account-order-card__coupon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.8rem 0 0;
    color: var(--account-copper);
    font-size: var(--type-small);
  }

  .public-site .account-order-card__coupon i {
    font-size: 0.9rem;
  }

  .public-site .account-order-card__status {
    display: grid;
    flex: 0 0 auto;
    gap: 0.3rem;
    min-width: 7.5rem;
    padding: 0.65rem 0.75rem;
    color: #fff;
    background: var(--order-status-color);
    text-align: right;
  }

  .public-site .account-order-card__status span {
    color: rgb(255 255 255 / 0.78);
    font-size: 0.62rem;
  }

  .public-site .account-order-card__status strong {
    font-family: var(--heading-font);
    font-size: var(--type-small);
    line-height: 1.2;
  }

  .public-site .account-order-card__body {
    padding: clamp(1rem, 2.5vw, 1.35rem);
  }

  .public-site .account-order-card__section + .account-order-card__section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--account-line);
  }

  .public-site .account-order-card__section h3 {
    margin: 0 0 0.85rem;
    color: var(--account-wine);
    font-size: 1rem;
    letter-spacing: -0.02em;
  }

  .public-site .account-order-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
  }

  .public-site .account-order-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--account-line);
    background: #fff;
  }

  .public-site .account-order-item img {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
  }

  .public-site .account-order-item h4 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--account-ink);
    font-family: var(--heading-font);
    font-size: var(--type-small);
  }

  .public-site .account-order-item p {
    margin: 0.3rem 0 0;
    color: rgb(36 27 24 / 0.62);
    font-size: 0.78rem;
  }

  .public-site .account-order-item p strong {
    color: var(--account-wine);
  }

  .public-site .account-order-card__shipping address {
    max-width: 45ch;
    margin: 0;
    color: rgb(36 27 24 / 0.72);
    font-size: var(--type-small);
    font-style: normal;
    line-height: 1.6;
  }

  .public-site .account-order-card__tracking {
    display: grid;
    gap: .2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--public-line, #e5e2e2);
  }

  .public-site .account-order-card__tracking strong {
    color: var(--public-red, #8b1e2d);
  }

  .public-site .account-order-card__tracking a {
    color: var(--public-red, #8b1e2d);
    font-weight: 700;
  }

  .public-site .account-order-card__details .accordion {
    margin-top: 0.25rem;
  }

  .public-site .account-order-card__details .accordion-body {
    padding: 1rem 0 0;
  }

  .public-site .account-order-card__details .accordion-item {
    border: 0;
    background: transparent;
  }

  .public-site .account-order-card .accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: var(--account-copper-soft);
    --bs-accordion-active-color: var(--account-wine);
  }

  .public-site .account-order-card .accordion-button {
    min-height: 3.1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--account-line);
    color: var(--account-wine);
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
    background: var(--account-paper);
    box-shadow: none;
  }

  .public-site .account-order-card .accordion-button:not(.collapsed) {
    border-color: var(--account-copper);
    color: var(--account-wine);
    background: var(--account-copper-soft);
    box-shadow: none;
  }

  .public-site .account-order-card .accordion-button:focus-visible {
    border-color: var(--account-copper);
    box-shadow: 0 0 0 0.2rem rgb(181 90 47 / 0.18);
    outline: 0;
  }

  .public-site .account-commission-details {
    display: grid;
    gap: 1rem;
    color: var(--account-ink);
    font-size: var(--type-small);
  }

  .public-site .account-commission-details dl,
  .public-site .account-commission-details figure {
    margin: 0;
  }

  .public-site .account-commission-summary__item {
    display: grid;
    grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.3fr);
    gap: 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--account-line);
  }

  .public-site .account-commission-details dt,
  .public-site .account-commission-option h4 {
    color: rgb(36 27 24 / 0.62);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .public-site .account-commission-details dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .public-site .account-commission-summary__item dd {
    color: var(--account-wine);
    font-weight: var(--weight-strong, 700);
  }

  .public-site .account-commission-summary__item dd span {
    display: inline-block;
    margin: 0 0.25rem;
    color: var(--account-copper);
  }

  .public-site .account-commission-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }

  .public-site .account-commission-option {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--account-line);
  }

  .public-site .account-commission-option--size {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, auto);
  }

  .public-site .account-commission-option h4 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--account-wine);
    font-size: var(--type-label);
  }

  .public-site .account-commission-facts {
    display: grid;
    gap: 0.65rem;
  }

  .public-site .account-commission-facts > div {
    display: grid;
    grid-template-columns: minmax(5rem, 0.85fr) minmax(0, 1.15fr);
    gap: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--account-line);
  }

  .public-site .account-commission-facts > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .public-site .account-commission-facts dt {
    color: rgb(36 27 24 / 0.62);
    font-size: 0.68rem;
  }

  .public-site .account-commission-facts dd {
    color: var(--account-ink);
    font-weight: var(--weight-strong, 700);
  }

  .public-site .account-commission-media {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 0.4rem;
  }

  .public-site .account-commission-media figcaption {
    color: rgb(36 27 24 / 0.55);
    font-size: 0.68rem;
    font-weight: var(--weight-strong, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .public-site .account-commission-media img {
    display: block;
    width: min(100%, 10rem);
    height: 10rem;
    border: 1px solid var(--account-line);
    object-fit: contain;
    background: var(--account-paper);
  }

  .public-site .account-commission-empty {
    margin: 0;
    color: rgb(36 27 24 / 0.55);
    font-style: italic;
  }

  .public-site .account-commission-meta {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(9rem, 0.5fr);
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--account-line);
  }

  .public-site .account-commission-meta > div {
    display: grid;
    gap: 0.35rem;
  }

  .public-site .account-commission-meta dd {
    line-height: 1.55;
  }

  .public-site .account-address-card {
    margin-bottom: 0.85rem;
    padding: 1.15rem;
    border: 1px solid var(--account-line);
    border-top: 0.25rem solid var(--account-copper);
    background: var(--account-paper);
  }

  .public-site .account-address-card .row {
    align-items: center;
    row-gap: 1rem;
  }

  .public-site .account-address-card .small {
    color: var(--account-copper);
    font-family: var(--heading-font);
    font-weight: var(--weight-strong, 700);
  }

  .public-site .account-address-card .btn {
    border: 1px solid var(--account-line);
    border-radius: 0;
    color: var(--account-wine);
    background: #fff;
  }

  .public-site .account-address-card .btn:hover,
  .public-site .account-address-card .btn:focus-visible {
    border-color: var(--account-copper);
    color: var(--account-copper);
  }

  .public-site .account-address-card .btn.text-danger {
    color: var(--account-wine) !important;
  }

  .public-site .account-address-form .form-label,
  .public-site .account-password .form-label {
    color: var(--account-wine);
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
  }

  .public-site .account-address-form .form-control,
  .public-site .account-password .form-control {
    min-height: 3rem;
    border: 1px solid var(--account-line);
    border-radius: 0;
    color: var(--account-ink);
    background: #fff;
  }

  .public-site .account-address-form .form-control:focus,
  .public-site .account-password .form-control:focus {
    border-color: var(--account-copper);
    box-shadow: 0 0 0 0.2rem rgb(181 90 47 / 0.14);
  }

  .public-site .account-address-form .form-check-label {
    color: rgb(36 27 24 / 0.72);
  }

  .public-site .account-address-form .btn-main,
  .public-site .account-password .btn-primary {
    border: 0;
    border-radius: 0;
    color: #fff;
    background: var(--account-wine);
  }

  .public-site .account-address-form .btn-main:hover,
  .public-site .account-password .btn-primary:hover {
    color: #fff;
    background: var(--account-copper);
  }

  .public-site .account-password__card {
    max-width: 42rem;
  }

  .public-site .account-shortcut span {
    display: grid;
    gap: 0.2rem;
  }

  .public-site .account-shortcut strong {
    font-family: var(--heading-font);
    font-size: var(--type-small);
  }

  .public-site .account-shortcut small {
    color: rgb(36 27 24 / 0.6);
    font-size: 0.7rem;
    line-height: 1.3;
  }

  @media (max-width: 991.98px) {
    .public-site .login-page__layout {
      grid-template-columns: 1fr;
    }

    .public-site .login-page__aside {
      min-height: 18rem;
    }

    .public-site .account-page__layout {
      grid-template-columns: 1fr;
    }

    .public-site .account-nav-panel {
      position: static;
    }

    .public-site .account-nav-panel .sidebar__nav ul {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-site .account-nav-panel .sidebar__nav li:has(hr) {
      display: none;
    }
  }

  @media (max-width: 767.98px) {
    .public-site .account-page__header,
    .public-site .login-page__panel-heading {
      align-items: flex-start;
    }

    .public-site .profile-setup-page__address-grid {
      grid-template-columns: 1fr;
    }

    .public-site .profile-setup-page__field--wide {
      grid-column: auto;
    }

    .public-site .account-page__header {
      flex-direction: column;
      gap: 1.25rem;
    }

    .public-site .account-page__header-link {
      align-self: flex-start;
    }

    .public-site .account-profile__details,
    .public-site .account-shortcuts,
    .public-site .account-profile__edit-grid {
      grid-template-columns: 1fr;
    }

    .public-site .account-profile__edit-grid > div:last-child {
      grid-column: auto;
    }

    .public-site .account-profile__hero {
      align-items: flex-start;
    }
  }

  @media (max-width: 575.98px) {
    .public-site .login-page__layout,
    .public-site .account-nav-panel,
    .public-site .account-profile {
      border-radius: 0;
    }

    .public-site .login-page__panel,
    .public-site .login-page__aside {
      padding: 1.25rem;
    }

    .public-site .login-page__aside {
      min-height: 17rem;
    }

    .public-site .account-nav-panel .sidebar__nav ul {
      grid-template-columns: 1fr;
    }

    .public-site .account-order-card__header {
      display: grid;
      gap: 1rem;
    }

    .public-site .account-order-card__status {
      justify-self: start;
      min-width: 0;
      text-align: left;
    }

    .public-site .account-order-items {
      grid-template-columns: 1fr;
    }

    .public-site .account-commission-summary__item,
    .public-site .account-commission-option--size,
    .public-site .account-commission-meta {
      grid-template-columns: 1fr;
    }

    .public-site .account-commission-options {
      grid-template-columns: 1fr;
    }

    .public-site .account-commission-option--size {
      grid-column: auto;
    }

    .public-site .account-commission-media img {
      width: min(100%, 12rem);
      height: 12rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .public-site .login-page__submit,
    .public-site .account-page__header-link,
    .public-site .account-nav-panel .sidebar__nav .nav-link,
    .public-site .account-shortcut,
    .public-site .account-empty-state__action {
      transition: none;
    }

    .public-site .login-page__submit:hover,
    .public-site .account-shortcut:hover {
      transform: none;
    }
  }
}

@layer layouts {
  /* Wishlist and cart: an artwork-first, responsive shopping flow. */
  .public-site .commerce-page {
    --commerce-ink: #241b18;
    --commerce-paper: #fbf8f4;
    --commerce-line: #dfd3c9;
    --commerce-wine: #370617;
    --commerce-copper: #a85f38;
    --commerce-copper-soft: #ead8ca;
    --commerce-gold: #ffba08;
    --commerce-green: #2d6a4f;
    --commerce-green-dark: #1f4d39;
    color: var(--commerce-ink);
    background: #fffaf6;
  }

  .public-site .commerce-page-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(1.75rem, 4vw, 3.25rem);
  }

  .public-site .commerce-page-header h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--commerce-wine);
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
    text-wrap: balance;
  }

  .public-site .commerce-page-header p {
    max-width: 35rem;
    margin: 1rem 0 0;
    color: rgb(36 27 24 / 0.7);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.55;
  }

  .public-site .commerce-page-header__link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--commerce-copper);
    color: var(--commerce-wine);
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
    text-decoration: none;
    transition: gap 180ms ease, color 180ms ease;
  }

  .public-site .commerce-page-header__link:hover {
    gap: 0.8rem;
    color: var(--commerce-copper);
  }

  .public-site .commerce-list-shell,
  .public-site .cart-summary,
  .public-site .commerce-empty {
    border: 1px solid var(--commerce-line);
    background: #fff;
    box-shadow: 0 1rem 3rem rgb(55 6 23 / 0.05);
  }

  .public-site .commerce-list-shell {
    overflow: hidden;
    border-radius: 0;
  }

  .public-site .commerce-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem clamp(1rem, 3vw, 1.75rem);
    border-bottom: 1px solid var(--commerce-line);
  }

  .public-site .commerce-list-heading h2,
  .public-site .cart-summary h2,
  .public-site .commerce-empty h2 {
    margin: 0;
    color: var(--commerce-wine);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    letter-spacing: -0.04em;
  }

  .public-site .commerce-list-heading > span {
    color: rgb(36 27 24 / 0.55);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong, 700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .public-site .commerce-item {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 1.75rem);
    border-bottom: 1px solid var(--commerce-line);
  }

  .public-site .commerce-item:last-child {
    border-bottom: 0;
  }

  .public-site .commerce-item__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--commerce-line);
    background: var(--commerce-paper);
  }

  .public-site .commerce-item__media::after {
    position: absolute;
    inset: auto 0 0;
    padding: 0.35rem 0.45rem;
    content: 'View piece';
    color: #fff;
    background: rgb(55 6 23 / 0.88);
    font-family: var(--heading-font);
    font-size: 0.68rem;
    font-weight: var(--weight-strong, 700);
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    transform: translateY(100%);
    transition: transform 180ms ease;
  }

  .public-site .commerce-item__media:hover::after,
  .public-site .commerce-item__media:focus-visible::after {
    transform: translateY(0);
  }

  .public-site .commerce-item__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 240ms ease;
  }

  .public-site .commerce-item__media:hover img {
    transform: scale(1.04);
  }

  .public-site .commerce-item__copy h3 {
    margin: 0;
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
  }

  .public-site .commerce-item__copy h3 a {
    color: var(--commerce-ink);
    text-decoration: none;
  }

  .public-site .commerce-item__copy h3 a:hover {
    color: var(--commerce-copper);
  }

  .public-site .commerce-item__availability {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.65rem 0 0;
    color: var(--commerce-green);
    font-size: var(--type-label);
    font-weight: var(--weight-strong, 700);
  }

  .public-site .commerce-item__availability i {
    font-size: 1rem;
  }

  .public-site .commerce-item__availability--limited {
    color: var(--commerce-copper);
  }

  .public-site .commerce-item__price {
    display: grid;
    justify-items: end;
    gap: 0.18rem;
    min-width: 6.5rem;
    color: var(--commerce-copper);
    font-family: var(--heading-font);
    white-space: nowrap;
  }

  .public-site .commerce-item__price del {
    color: rgb(36 27 24 / 0.45);
    font-size: var(--type-label);
  }

  .public-site .commerce-item__price strong {
    font-size: 1.15rem;
  }

  .public-site .commerce-item__price span {
    color: rgb(36 27 24 / 0.55);
    font-family: var(--body-font);
    font-size: var(--type-label);
  }

  .public-site .commerce-item__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    min-width: max-content;
  }

  .public-site .commerce-action-primary,
  .public-site .commerce-action-secondary,
  .public-site .commerce-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong, 700);
    line-height: 1.1;
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .public-site .commerce-action-primary {
    color: #fff;
    background: var(--commerce-wine);
  }

  .public-site .commerce-action-primary:hover {
    color: #fff;
    background: var(--commerce-copper);
    transform: translateY(-0.1rem);
  }

  .public-site .commerce-action-cart {
    color: #fff;
    background: var(--commerce-green);
  }

  .public-site .commerce-action-cart:hover {
    color: #fff;
    background: var(--commerce-green-dark);
    transform: translateY(-0.1rem);
  }

  .public-site .commerce-action-secondary {
    color: var(--commerce-wine);
    border-color: var(--commerce-line);
    background: transparent;
  }

  .public-site .commerce-action-secondary:hover {
    border-color: var(--commerce-copper);
    background: var(--commerce-copper-soft);
  }

  .public-site .commerce-action-icon {
    min-width: 2.75rem;
    padding-inline: 0.65rem;
    color: var(--commerce-copper);
    border-color: transparent;
    background: transparent;
  }

  .public-site .commerce-action-icon:hover {
    color: var(--commerce-wine);
    border-color: var(--commerce-line);
    background: var(--commerce-paper);
  }

  .public-site .commerce-action-primary:focus-visible,
  .public-site .commerce-action-secondary:focus-visible,
  .public-site .commerce-action-icon:focus-visible,
  .public-site .commerce-page-header__link:focus-visible,
  .public-site .commerce-item__media:focus-visible,
  .public-site .commerce-item__copy h3 a:focus-visible {
    outline: 2px solid var(--commerce-copper);
    outline-offset: 3px;
  }

  .public-site .commerce-empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 0;
  }

  .public-site .commerce-empty__mark {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    color: var(--commerce-wine);
    border: 1px solid var(--commerce-copper);
    border-radius: 0;
    font-size: 1.5rem;
  }

  .public-site .commerce-empty p {
    margin: 0.45rem 0 0;
    color: rgb(36 27 24 / 0.68);
  }

  .public-site .cart-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.34fr);
    align-items: start;
    gap: clamp(1rem, 3vw, 2rem);
  }

  .public-site .cart-summary {
    position: sticky;
    top: 6.5rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: 0;
  }

  .public-site .cart-summary__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--commerce-line);
  }

  .public-site .cart-summary__heading > i {
    color: var(--commerce-copper);
    font-size: 1.4rem;
  }

  .public-site .cart-summary dl {
    margin: 1.25rem 0;
  }

  .public-site .cart-summary dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.65rem;
    color: rgb(36 27 24 / 0.68);
  }

  .public-site .cart-summary dt,
  .public-site .cart-summary dd {
    margin: 0;
  }

  .public-site .cart-summary dd {
    color: var(--commerce-ink);
    font-family: var(--heading-font);
    font-weight: var(--weight-strong, 700);
  }

  .public-site .cart-summary__total {
    margin-top: 0.5rem;
    padding-top: 1rem !important;
    border-top: 1px solid var(--commerce-line);
    color: var(--commerce-ink) !important;
    font-size: 1.1rem;
  }

  .public-site .cart-summary__total dd {
    color: var(--commerce-copper);
    font-size: 1.4rem;
  }

  .public-site .cart-summary__note {
    margin: 0 0 1.25rem;
    color: rgb(36 27 24 / 0.58);
    font-size: var(--type-label);
    line-height: 1.5;
  }

  .public-site .cart-summary__checkout {
    width: 100%;
  }

  @media (max-width: 991.98px) {
    .public-site .cart-page__layout {
      grid-template-columns: 1fr;
    }

    .public-site .cart-summary {
      position: static;
    }
  }

  @media (max-width: 767.98px) {
    .public-site .commerce-page-header {
      align-items: flex-start;
      flex-direction: column;
      gap: 1.25rem;
    }

    .public-site .commerce-page-header__link {
      align-self: flex-start;
    }

    .public-site .commerce-item {
      grid-template-columns: 5.25rem minmax(0, 1fr);
      align-items: start;
      gap: 0.85rem 1rem;
    }

    .public-site .commerce-item__media {
      grid-column: 1;
      grid-row: 1 / span 3;
    }

    .public-site .commerce-item__copy {
      grid-column: 2;
      grid-row: 1;
    }

    .public-site .commerce-item__price {
      grid-column: 2;
      grid-row: 2;
      justify-items: start;
      align-items: baseline;
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    .public-site .commerce-item__actions {
      grid-column: 1 / -1;
      grid-row: 4;
      justify-content: flex-start;
      min-width: 0;
      padding-top: 0.25rem;
    }

    .public-site .commerce-action-primary,
    .public-site .commerce-action-secondary {
      flex: 1 1 auto;
    }

    .public-site .commerce-empty {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .public-site .commerce-empty .commerce-action-primary {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 575.98px) {
    .public-site .commerce-page-header h1 {
      font-size: clamp(2.5rem, 14vw, 4rem);
    }

    .public-site .commerce-list-shell,
    .public-site .cart-summary,
    .public-site .commerce-empty {
      border-radius: 0;
    }

    .public-site .commerce-item {
      padding: 1rem;
    }

    .public-site .commerce-action-primary,
    .public-site .commerce-action-secondary {
      min-width: 0;
      padding-inline: 0.7rem;
    }

    .public-site .commerce-action-icon span {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .public-site .commerce-page-header__link,
    .public-site .commerce-action-primary,
    .public-site .commerce-action-secondary,
    .public-site .commerce-action-icon,
    .public-site .commerce-item__media img,
    .public-site .commerce-item__media::after {
      transition: none;
    }

    .public-site .commerce-action-primary:hover,
    .public-site .commerce-item__media:hover img {
      transform: none;
    }
  }
}

@layer layouts {
  /* Art classes: treat the schedule as a welcoming studio invitation. */
  .public-site .classes-page {
    --classes-ink: #241b18;
    --classes-paper: #fbf8f4;
    --classes-line: #dfd3c9;
    --classes-wine: #370617;
    --classes-copper: #b5683e;
    --classes-gold: #ffba08;
  }

  .public-site .classes-page__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.8fr);
    min-height: clamp(19rem, 32vw, 26rem);
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
    padding: clamp(2rem, 5vw, 4.75rem);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: var(--classes-wine);
    border-radius: 0;
  }

  .public-site .classes-page__hero::after {
    position: absolute;
    right: -0.04em;
    bottom: -0.34em;
    z-index: -1;
    content: 'MAKE';
    color: rgb(255 186 8 / 0.1);
    font-family: var(--heading-font);
    font-size: clamp(9rem, 22vw, 18rem);
    font-weight: var(--weight-strong);
    letter-spacing: -0.12em;
    line-height: 0.8;
  }

  .public-site .classes-page__hero-copy,
  .public-site .classes-page__hero-note {
    position: relative;
    z-index: 1;
  }

  .public-site .classes-page__hero-copy {
    align-self: end;
    max-width: 39rem;
  }

  .public-site .classes-page__eyebrow,
  .public-site .classes-page__fact-label {
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--type-label-tracking);
    line-height: 1.35;
    text-transform: uppercase;
  }

  .public-site .classes-page__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    color: var(--classes-gold);
  }

  .public-site .classes-page__eyebrow::before {
    width: 0.55rem;
    height: 0.55rem;
    content: '';
    background: var(--classes-gold);
    border-radius: 0;
  }

  .public-site .classes-page__hero h1 {
    max-width: 10ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    font-weight: var(--weight-heading);
    line-height: 0.96;
    letter-spacing: -0.065em;
    text-wrap: balance;
  }

  .public-site .classes-page__hero-title {
    max-width: 24ch;
    margin: 1.15rem 0 0;
    color: var(--classes-gold);
    font-family: var(--heading-font);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: var(--weight-medium);
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  .public-site .classes-page__hero-copy > p:last-child {
    max-width: 42ch;
    margin: 1.5rem 0 0;
    color: rgb(255 255 255 / 0.72);
    font-size: var(--type-lead);
    line-height: 1.55;
  }

  .public-site .classes-page__hero-note {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.9rem;
    align-self: end;
    padding-bottom: 0.15rem;
  }

  .public-site .classes-page__hero-note img {
    width: clamp(7rem, 13vw, 10rem);
    height: auto;
    object-fit: contain;
  }

  .public-site .classes-page__hero-note small {
    padding-bottom: 0.15rem;
    color: rgb(255 255 255 / 0.7);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong);
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .public-site .classes-page__facts {
    max-width: 66rem;
    margin-inline: auto;
  }

  .public-site .classes-page__section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .public-site .classes-page__section-heading h2 {
    max-width: 15ch;
    margin: 0;
    color: var(--classes-ink);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
    text-align: left;
    text-wrap: balance;
  }

  .public-site .classes-page__section-heading > p {
    max-width: 18ch;
    margin: 0;
    color: rgb(36 27 24 / 0.58);
    font-family: var(--heading-font);
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    font-weight: var(--weight-medium);
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-align: right;
  }

  .public-site .classes-page__fact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--classes-line);
  }

  .public-site .classes-page__fact {
    display: grid;
    grid-template-columns: 3.8rem minmax(0, 1fr);
    gap: 1rem;
    align-content: start;
    min-height: 14.5rem;
    padding: 1.5rem clamp(0.75rem, 2vw, 1.75rem) 1.5rem 0;
    border-bottom: 1px solid var(--classes-line);
  }

  .public-site .classes-page__fact + .classes-page__fact {
    padding-left: clamp(0.75rem, 2vw, 1.75rem);
    border-left: 1px solid var(--classes-line);
  }

  .public-site .classes-page__fact-media {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    overflow: hidden;
    background: var(--classes-gold);
    border-radius: 0;
  }

  .public-site .classes-page__fact-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .public-site .classes-page__fact-label {
    margin: 0 0 0.5rem;
    color: var(--classes-copper);
  }

  .public-site .classes-page__fact address,
  .public-site .classes-page__fact p:last-child {
    margin: 0;
    color: rgb(36 27 24 / 0.78);
    font-size: var(--type-small);
    line-height: 1.65;
  }

  .public-site .classes-page__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 66rem;
    margin: clamp(3rem, 6vw, 5.5rem) auto 0;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
    border-top: 2px solid var(--classes-ink);
  }

  .public-site .classes-page__cta h2 {
    max-width: 22ch;
    margin: 0;
    color: var(--classes-ink);
    font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
  }

  .public-site .classes-page__cta > div > p {
    max-width: 28ch;
    margin: 0.65rem 0 0;
    color: rgb(36 27 24 / 0.58);
    font-size: var(--type-small);
    line-height: 1.55;
  }

  .public-site .classes-page__cta .btn {
    flex: 0 0 auto;
    min-height: 2.9rem;
    border-radius: 0;
  }

  .public-site .classes-page__cta .btn:focus-visible {
    outline: 2px solid var(--classes-copper);
    outline-offset: 3px;
  }

  @media (max-width: 767.98px) {
    .public-site .classes-page__hero {
      grid-template-columns: 1fr;
      min-height: 25rem;
      padding: clamp(1.5rem, 7vw, 2.75rem);
    }

    .public-site .classes-page__hero-note {
      justify-content: flex-start;
    }

    .public-site .classes-page__section-heading {
      display: block;
    }

    .public-site .classes-page__section-heading h2 {
      margin-top: 0.8rem;
      text-align: left;
    }

    .public-site .classes-page__section-heading > p {
      margin-top: 0.65rem;
      text-align: left;
    }

    .public-site .classes-page__fact-grid {
      grid-template-columns: 1fr;
    }

    .public-site .classes-page__fact,
    .public-site .classes-page__fact + .classes-page__fact {
      min-height: 0;
      padding: 1.25rem 0;
      border-left: 0;
    }

    .public-site .classes-page__cta {
      align-items: stretch;
      flex-direction: column;
      gap: 1.5rem;
    }

    .public-site .classes-page__cta .btn {
      width: 100%;
    }
  }

  @media (max-width: 575.98px) {
    .public-site .classes-page__hero {
      border-radius: 0;
    }

    .public-site .classes-page__hero h1 {
      font-size: clamp(2.3rem, 13vw, 3.8rem);
    }

    .public-site .classes-page__fact {
      grid-template-columns: 3rem minmax(0, 1fr);
      gap: 0.75rem;
    }

    .public-site .classes-page__fact-media {
      width: 2.8rem;
      height: 2.8rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .public-site .classes-page__cta .btn {
      transition: none;
    }
  }
}
  /* =====================
    SECTION: HERO
    ====================== */

  .hero .carousel-inner {
    width: 100%;
  }

  /* .hero .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(229 0 0 / 25%);
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
  }

  .hero .carousel-caption {
    z-index: 2;
    text-align: start;
    bottom: 50%;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero .carousel-title {
    max-width: 21ch;
    font-size: var(--fs-large-banner);
    line-height: 1.2em;
    opacity: 0;
    transform: perspective(300px) rotateY(21deg) translateY(80px);
    transform-origin: bottom;
    margin-bottom: 1rem;
    text-shadow: 2px 2px black;
    text-shadow: 2px 2px 6px #000000;
    font-weight: 700;
  }

  .hero .carousel-item.active .carousel-title {
    animation: captionSlideIn 1000ms 500ms ease forwards;
  }

  .carousel-caption {
    left: 0;
    right: 0;
  }

  .carousel-title p {
    font-size: var(--type-lead, 1.125rem);
  }

  .hero .carousel-caption .btn-main,
  .hero .carousel-caption .btn-alt-2 {
    transform: translateY(100px);
  }

  .hero .carousel-caption .btn-main:hover {
    background: rgba(var(--primary-color-rgb), 0.8);
  }

  .hero .carousel-caption .btn-alt-2:hover {
    background: rgb(15 22 22 / 80%);
  }

  .hero .carousel-item.active .btn-main {
    animation: captionSlideIn 1500ms 1500ms ease forwards;
  }

  .hero .carousel-item.active .btn-alt-2 {
    animation: captionSlideIn 1500ms 1750ms ease forwards;
  }

  .hero .carousel-item {
    z-index: 1;
    max-height: calc(100svh - var(--header-height));
    overflow: hidden;
    min-height: 50svh;
  }

  .hero .carousel-item img {
    min-height: 50svh;
    object-fit: cover;
  } */
  .hero .hero__cp {
    display: flex;
    align-items: center;
    align-content: center;
    background: #F5C85A;
    position: relative;
    isolation: isolate;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: url('../images/hero-texture.webp');
      mix-blend-mode: soft-light;
      opacity: 0.5;
    }
  }

  .hero .carousel-fade .carousel-item {
    transition: opacity var(--motion-reveal, 480ms) var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
  }

  @media (min-width: 992px) {
    .hero .carousel-item > .row {
      height: clamp(26rem, 36vw, 34rem);
    }

    .hero .carousel-item > .row > .col-lg-6:not(.hero__cp) {
      display: flex;
    }

    .hero .carousel-item > .row > .col-lg-6:not(.hero__cp) > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .hero .hero__content {
    width: 100%;
    max-width: none;
    padding: clamp(2.5rem, 5vw, 4.75rem) clamp(2rem, 5vw, 5rem);
    padding-inline-start: max(2rem, calc((100vw - 1320px) / 2));
  }

  .hero .hero__content h2 {
    max-width: 16ch;
    margin-bottom: 1rem;
    font-size: var(--type-heading);
    line-height: 1.08;
    letter-spacing: var(--type-heading-tracking);
    text-wrap: balance;
  }

  .hero .hero__content p {
    max-width: 42ch;
    margin-bottom: 1.75rem;
    line-height: 1.55;
    text-wrap: pretty;
  }

  .hero .carousel-item .hero__content > * {
    opacity: 0;
    transform: translateY(1rem);
  }

  .hero .carousel-item.active .hero__content > * {
    animation: publicHeroIn var(--motion-reveal, 480ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
  }

  .hero .carousel-item.active .hero__content > *:nth-child(2) {
    animation-delay: var(--motion-stagger, 60ms);
  }

  .hero .carousel-item.active .hero__content > *:nth-child(3) {
    animation-delay: calc(var(--motion-stagger, 60ms) * 2);
  }

  .hero .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .hero .carousel-nav {
    display: flex;
    /* flex-direction: column; */
    column-gap: 1rem;
    position: absolute;
    top: 75%;
    right: 15%;
    z-index: 2;
    transform: translateY(-50%) translateZ(1px);
    transition: transform 500ms ease, opacity 500ms ease;
  }

  /* @media (hover: hover) {
    .hero .carousel-nav {
      transform: translateY(0%) translateZ(1px);
      opacity: 0;
    }

    .hero .carousel:hover .carousel-nav {
      opacity: 1;
      transform: translateY(-50%) translateZ(1px);
    }
  } */

  .hero .carousel-control-next,
  .hero .carousel-control-prev {
    position: relative;
    width: auto;
    padding: 0.5rem 1.5rem;
    /* border-radius: 0; */
    /* border: 2px solid #fff; */
    background: var(--primary-color);
    opacity: 0.25;
    transition: opacity 250ms ease;
  }

  .hero .carousel-control-next:hover,
  .hero .carousel-control-prev:hover {
    opacity: 1;
  }

  .hero .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8'/%3e%3c/svg%3e");
  }

  .hero .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5'/%3e%3c/svg%3e");
  }

  /* =====================
    SECTION: ABOUT
    ====================== */

  .about .image__bg1 {
    background: url(../images/bhootakola_general_acrylic.jpeg) no-repeat center right/cover;
  }

  .about .image__bg2 {
    background: url(../images/homepage-ladies.webp) no-repeat center/cover;
  }

  .about__content {
    display: flex;
    align-items: center;
    padding: 50px;
    background-image: linear-gradient(135deg,
        rgb(255, 255, 255) 40%,
        rgba(255, 255, 255, 0.5) 100%),
      url(../images/flowersinvase_general_knifework.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .about__inner {
    width: min(100%, 32rem);
  }

  .about__content h3 {
    max-width: 21ch;
    margin-bottom: 1rem;
    font-size: var(--type-heading);
    color: rgb(18, 20, 17);
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;
  }

  .about__content hr {
    margin-block: 0 1.75rem;
  }

  .about__content p {
    max-width: 42ch;
    margin-bottom: 2rem;
    line-height: 1.6;
    text-wrap: pretty;
  }

  .home-section-heading {
    text-align: left;
  }

  .home-section-heading h2 {
    max-width: 12ch;
    margin-bottom: 0;
    text-wrap: balance;
  }

  @media (max-width: 991.98px) {
    .hero .carousel-item > .row > .col-lg-6:not(.hero__cp) {
      display: flex;
      height: clamp(18rem, 62vw, 30rem);
    }

    .hero .carousel-item > .row > .col-lg-6:not(.hero__cp) > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero .hero__content {
      width: min(100%, 42rem);
      padding: clamp(2.5rem, 8vw, 4rem) clamp(1.5rem, 6vw, 3rem);
    }

    .about__content {
      min-height: 28rem;
      padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 6vw, 3rem);
    }

    .about .image__bg1,
    .about .image__bg2 {
      min-height: clamp(14rem, 68vw, 25rem);
    }
  }

  @media (min-width: 992px) and (max-width: 1199.98px) {
    .hero .hero__content {
      padding-inline-start: max(2rem, calc((100vw - 960px) / 2));
    }
  }

  @media (min-width: 1200px) and (max-width: 1399.98px) {
    .hero .hero__content {
      padding-inline-start: max(2rem, calc((100vw - 1140px) / 2));
    }
  }

  @media (max-width: 575.98px) {
    .hero .hero__cp {
      padding-bottom: 4.5rem;
    }

    .about .image__bg1,
    .about .image__bg2 {
      height: auto !important;
      min-height: 0;
    }

    .about .image__bg1 {
      aspect-ratio: 538 / 720;
    }

    .about .image__bg2 {
      aspect-ratio: 784 / 1116;
    }

    .hero .carousel-nav {
      top: auto;
      right: auto;
      left: clamp(1.5rem, 6vw, 3rem);
      bottom: 1rem;
      transform: none;
    }

    .hero .hero__actions {
      align-items: stretch;
      flex-direction: column;
    }

    .hero .hero__actions .btn {
      width: 100%;
    }
  }


  /* =====================
    SECTION: SHOP
    ====================== */
  .home-featured-section {
    background: #fffafa;
  }

  .home-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1.25rem, 2.4vw, 2rem);
  }

  .home-featured-card {
    display: block;
    position: relative;
    min-width: 0;
    color: inherit;
    transition: transform var(--motion-ui, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .home-featured-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .home-featured-card .most__popular {
    aspect-ratio: auto;
    background: #ffffff;
    border: none;
    box-shadow: 0 0.75rem 2rem rgb(37 47 57 / 0.08);
  }

  .home-featured-card .most__popular img {
    flex: 0 0 auto;
    width: 100%;
    height: clamp(15rem, 26vw, 25rem);
    padding: clamp(0.75rem, 1.8vw, 1.35rem) clamp(0.75rem, 2.2vw, 1.6rem) 0;
    background: #ffffff;
    object-fit: contain;
  }

  .home-featured-card .most__popular .info {
    max-width: none;
    margin: 0;
    min-height: 5.5rem;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    font-weight: 500;
    line-height: 1.3;
  }

  @media (hover: hover) and (pointer: fine) {
  .home-featured-card:hover {
      transform: translateY(-0.25rem);
    }
  }

  /* =====================
    SECTION: PRODUCT CATALOGUE
    ====================== */
  .products-catalog-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .products-catalog-intro h1 {
    max-width: 18ch;
    margin: 0;
    color: var(--color-prop-1);
    font-family: var(--heading-font);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .products-catalog-intro p {
    margin: 0.6rem 0 0;
    color: rgb(74 16 37 / 0.72);
    font-size: var(--type-body);
  }

  .products-catalog-count {
    flex: 0 0 auto;
    margin: 0 !important;
    color: rgb(74 16 37 / 0.68) !important;
    font-family: var(--heading-font);
    font-size: var(--type-small) !important;
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .products-toolbar {
    display: grid;
    grid-template-columns: minmax(16rem, 1.6fr) repeat(2, minmax(12rem, 1fr)) auto;
    align-items: end;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    padding: 1.15rem;
    border: 1px solid rgb(74 16 37 / 0.1);
    background: #fffafa;
    box-shadow: 0 0.75rem 2rem rgb(74 16 37 / 0.06);
  }

  .products-toolbar label {
    display: block;
    margin-bottom: 0.45rem;
    color: #4a1025;
    font-family: var(--heading-font);
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .products-search-field {
    position: relative;
  }

  .products-search-field > i {
    position: absolute;
    top: 50%;
    left: 0.95rem;
    color: #8c2f39;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .products-toolbar input,
  .products-toolbar select {
    width: 100%;
    min-height: 3rem;
    border: 1px solid rgb(74 16 37 / 0.18);
    border-radius: 0;
    background: #ffffff;
    color: #332f2f;
    font: inherit;
    outline: none;
  }

  .products-toolbar input {
    padding: 0.75rem 1rem 0.75rem 2.75rem;
  }

  .products-toolbar select {
    padding: 0.75rem 2.25rem 0.75rem 0.9rem;
  }

  .products-toolbar input:focus,
  .products-toolbar select:focus {
    border-color: #8c2f39;
    box-shadow: 0 0 0 3px rgb(140 47 57 / 0.12);
  }

  .products-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }

  .products-toolbar__actions .btn {
    min-height: 3rem;
    white-space: nowrap;
  }

  .products-clear-link {
    color: #8c2f39;
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    white-space: nowrap;
  }

  .products-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: clamp(3rem, 7vw, 6rem) 1.5rem;
    border: 1px dashed rgb(74 16 37 / 0.2);
    background: #fffafa;
    color: #4a1025;
    text-align: center;
  }

  .products-empty-state > i {
    color: #8c2f39;
    font-size: 1.8rem;
  }

  .product__img-wrapper {
    position: relative;
  }

  .product-list-wishlist {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 2;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    text-shadow: 0 1px 0.35rem rgb(0 0 0 / 0.5);
    font-size: 1.25rem;
    line-height: 1;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
  }

  .product-list-wishlist:hover {
    background: transparent;
    color: #ffffff;
  }

  .product-list-wishlist[aria-pressed="true"],
  .product-list-wishlist[aria-pressed="true"]:hover {
    background: transparent;
    color: #ff2400;
  }

  .product-list-wishlist:hover {
    transform: translateY(-0.1rem);
  }

  .product-list-wishlist:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 0.25rem;
  }

  .products-empty-state p {
    margin: 0;
    font-family: var(--heading-font);
    font-size: var(--type-subheading);
  }

  @media (max-width: 991.98px) {
    .products-toolbar {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .products-toolbar__search {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 575.98px) {
    .products-catalog-intro {
      display: block;
    }

    .products-catalog-count {
      margin-top: 1rem !important;
    }

    .products-toolbar {
      grid-template-columns: 1fr;
    }

    .products-toolbar__search {
      grid-column: auto;
    }

    .products-toolbar__actions {
      justify-content: space-between;
    }
  }

  .home-featured-card:focus-visible {
    outline: none;
  }

  .home-featured-card__link:focus-visible,
  .home-featured-wishlist:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 0.4rem;
  }

  .home-featured-wishlist {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 9;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #c9bda8;
    box-shadow: none;
    font-size: 1.35rem;
    line-height: 1;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
  }

  .home-featured-wishlist:hover,
  .home-featured-wishlist[aria-pressed="true"] {
    background: #fffafa;
    color: #8c2f39;
  }

  .home-featured-wishlist:hover {
    transform: translateY(-0.1rem);
  }

  @media (max-width: 767.98px) {
    .home-featured-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 575.98px) {
    .home-featured-grid {
      grid-template-columns: 1fr;
    }
  }

  .most__popular {
    height: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

  .most__popular::before {
    position: absolute;
    content: "";
    left: 0;
    display: none;
    height: 100%;
    background: linear-gradient(0, rgb(255 193 7 / 42%), rgb(255 193 7 / 60%));
    transition: 500ms ease-out;
    z-index: 1;
  }

  .most__popular::after {
    display: none;
  }

  .most__popular:hover::before {
    display: none;
  }

  .most__popular img {
    flex: 0 0 auto;
    width: 100%;
    height: clamp(15rem, 26vw, 25rem);
    min-height: 0;
    display: block;
    object-fit: contain;
  }

  .most__popular .info {
    position: static;
    flex: 0 0 auto;
    min-height: 5.5rem;
    padding: 1rem 1.15rem 1.2rem;
    border-top: none;
    color: #332f2f;
    background: #ffffff;
    z-index: 1;
  }





  /* =====================
    SECTION: CUSTOM ART
    ====================== */
  .custom__art {
    background: #f7f7f7;
    /* background: rgba(var(--primary-color-rgb), 0.01); */
  }

  /* =====================
    SECTION: COMPARISON
    ====================== */

  #comparison {
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    position: relative;
  }

  #comparison .original {
    position: absolute;
    background-image: url(../images/comparison-potrait-after.jpg);
    background-size: cover;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  #comparison #handle {
    position: absolute;
    height: 50px;
    width: 50px;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
  }

  #comparison #handle::after,
  #comparison #handle::before {
    content: "";
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -6px;
  }

  #comparison #handle::before {
    border-right: 6px solid white;
    left: 50%;
    margin-left: -17px;
  }

  #comparison #handle::after {
    border-left: 6px solid white;
    right: 50%;
    margin-right: -17px;
  }

  #comparison #divisor {
    background-image: url(../images/comparison-potrait-before.jpg);
    background-size: cover;
    position: absolute;
    width: 50%;
    box-shadow: 0 5px 10px -2px rgb(0 0 0 / 30%);
    bottom: 0;
    height: 100%;
  }

  #divisor::before,
  #divisor::after {
    content: "";
    position: absolute;
    right: -2px;
    width: 4px;
    height: calc(50% - 25px);
    background: white;
    z-index: 3;
  }

  #divisor::before {
    top: 0;
    box-shadow: 0 -3px 8px 1px rgb(0 0 0 / 30%);
  }

  #divisor::after {
    bottom: 0;
    box-shadow: 0 3px 8px 1px rgb(0 0 0 / 30%);
  }

  #comparison input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    top: 50%;
    left: -25px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: transparent;
    width: calc(100% + 50px);
    z-index: 2;
  }

  #comparison input[type="range"]:focus,
  #comparison input[type="range"]:active {
    border: none;
    outline: none;
  }

  #comparison input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 0;
    background: transparent;
    border: 4px solid white;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
  }

  #comparison input[type="range"]::-moz-range-track {
    -moz-appearance: none;
    height: 15px;
    width: 100%;
    background-color: transparent;
    position: relative;
    outline: none;
  }

  /* =====================
    SECTION: CUSTOM ART ICONS
    ====================== */
  .ca_content {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .ca_content i::before {
    font-size: 64px;
    color: var(--color-prop-2);
    text-align: center;
  }

  .ca_content i {
    display: inline-block;
    position: relative;
  }

  .ca_content i::after {
    position: absolute;
    content: "";
    inset: 0;
    box-shadow: 0px 0px 10px 5px rgb(232, 93, 4);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--motion-ui, 240ms) ease, transform var(--motion-ui, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .ca_content i::before {
    display: inline-block;
    transition: transform var(--motion-hover, 180ms) ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .ca_content i:hover::before {
      transform: scale(0.9);
    }

    .ca_content i:hover::after {
      opacity: 1;
      transform: scale(1.12);
    }
  }

  .ca_content h5 {
    color: var(--clr-brown);
  }

  .ca_content p {
    font-size: var(--type-small, 0.875rem);
    color: #666666;
  }

  /* =====================
    SECTION: CUSTOM
    ====================== */

  .contact__us i::before {
    padding: 0.75rem;
    font-size: 2rem;
    background: var(--primary-color);
    color: #fff;
    border-radius: 0;
    margin-bottom: 0.5rem;
  }


  /* =====================
    SECTION: PRODUCTS
    ====================== */
  .quantity__control {
    text-align: center;
    width: 6ch;
    flex-grow: 0;
  }

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


  /* =====================
  SECTION: CUSTOMERS
  ====================== */
  .register__info {
    margin-bottom: 1.25rem;
    text-align: center;

    & span {
      display: inline-block;
      padding: 0.25rem 0.5rem;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: var(--bs-secondary-bg);
      }

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -4px;
        width: 25%;
        height: 6px;
        background: var(--secondary-color);
        transform: translateX(-50%);
      }
    }
  }

  .sidebar__nav {
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0;
  }

  .sidebar__nav .nav-link {
    border-radius: 0;
    color: var(--body-color);
    background: var(--bs-tertiary-bg);
  }

  .sidebar__nav .nav-link:hover {
    background: var(--bs-secondary-bg);
  }
}



/* =====================
  SECTION: CUSTOM
  ====================== */

.custom-radio-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0;
  background: var(--bs-tertiary-bg);
  box-shadow:
    5px 5px 10px #f8eceb,
    -5px -5px 10px #ffffff;
  font-weight: bold;
  cursor: pointer;
  transition: box-shadow var(--motion-ui, 240ms) ease, background-color var(--motion-ui, 240ms) ease, color var(--motion-ui, 240ms) ease;
}

.custom-radio-label:hover {
  box-shadow:
    inset 5px 5px 10px #f8eceb,
    inset -5px -5px 10px #ffffff;
}

.custom-radio-label:has(.form-check-input:checked) {
  background: var(--primary-color);
  color: white;
}

.custom-select-label {
  font-weight: bold;
  cursor: pointer;
  transition: color var(--motion-ui, 240ms) ease, background-color var(--motion-ui, 240ms) ease, border-color var(--motion-ui, 240ms) ease;
}

.sec-active {
  border: 1px solid #e2e2e2;
  padding: 2px;
}

.custom-select-label:has(.form-check-input:checked) .sec-active {
  padding: 0.25rem;
  border-radius: 0;
  margin-block: 0.5rem;
  border: 1px solid var(--primary-color);
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #ffffff;
}

.custom-select-label:has(.form-check-input:checked) img {
  padding: 0.25rem;
  border-radius: 0;
  margin-block: 0.5rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.casProgress .nav-pills {
  column-gap: var(--fs-large-banner);
  isolation: isolate;
}

.casProgress .nav-pills .nav-item {
  position: relative;
}

.casProgress .nav-pills .nav-item:not(:first-of-type)::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--bs-border-color);
  top: 50%;
  left: -100%;
  z-index: -1;
}

.casProgress .nav-link {
  background: var(--bs-body-bg);
  width: 5rem;
  height: 5rem;
  color: var(--bs-nav-link-disabled-color);
  border-radius: 0;
  outline: 1px dashed var(--bs-border-color);
  outline-offset: -3px;
  /* cursor: help; */
}

.casProgress .nav-link.active {
  color: var(--primary-color);
  outline-color: var(--primary-color);
}

.casProgress .nav-pills .nav-item:has(~ .nav-item .nav-link.active) .nav-link {
  background: var(--bs-success);
  color: var(--bs-body-bg);
}

.casProgress .nav-pills .nav-item:has(~ .nav-item .nav-link.active) .nav-link::before {
  display: inline-block;
  font-family: var(--font-icon, bootstrap-icons) !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f270";
}

.casProgress .nav-pills .nav-item:has(~ .nav-item .nav-link.active)+.nav-item::before {
  background-color: var(--bs-success);
}

@media (prefers-reduced-motion: reduce) {
  .hero .carousel-fade .carousel-item {
    transition: none;
  }

  .hero .carousel-item .hero__content > * {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .home-featured-card:hover,
  .ca_content i:hover::before,
  .ca_content i:hover::after {
    transform: none;
  }

  .product-list-wishlist {
    transition: none;
  }

  .product-list-wishlist:hover {
    transform: none;
  }

  .ca_content i:hover::after {
    opacity: 0;
  }
}

@layer layouts {
  /* Product detail: a quiet gallery frame with a material-led reading column. */
  .public-site .product-detail-page {
    --product-ink: #241b18;
    --product-paper: #fbf8f4;
    --product-line: #dfd3c9;
    --product-copper: #a85f38;
    --product-copper-soft: #ead8ca;
    --product-wine: #370617;
    --product-green: #2d6a4f;
    --product-green-dark: #24563f;
  }

  .public-site .product-detail {
    overflow: clip;
    padding: clamp(1rem, 2.4vw, 2rem);
    color: var(--product-ink);
    background: var(--product-paper);
    border: 1px solid var(--product-line);
    border-radius: 0;
    box-shadow: 0 1.5rem 4rem rgb(55 6 23 / 0.06);
  }

  .public-site .product-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: start;
  }

  .public-site .product-detail__gallery {
    position: sticky;
    top: 6rem;
  }

  .public-site .product-detail__gallery-topline,
  .public-site .product-detail__gallery-note,
  .public-site .product-detail__eyebrow,
  .public-site .product-detail__price-label,
  .public-site .product-detail__component dt {
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--type-label-tracking);
    line-height: 1.35;
    text-transform: uppercase;
  }

  .public-site .product-detail__gallery-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.1rem 0.8rem;
    color: rgb(36 27 24 / 0.62);
  }

  .public-site .product-detail__gallery-topline span:last-child {
    color: var(--product-copper);
  }

  .public-site .product-detail__image-stage {
    position: relative;
    padding: clamp(0.75rem, 1.8vw, 1.5rem);
    background: var(--product-wine);
    isolation: isolate;
  }

  .public-site .product-detail__image-stage::before,
  .public-site .product-detail__image-stage::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border: 1px solid rgb(234 216 202 / 0.35);
  }

  .public-site .product-detail__image-stage::before {
    inset: 0.55rem;
    border-inline-width: 0;
  }

  .public-site .product-detail__image-stage::after {
    inset: 1rem 0.55rem;
    border-block-width: 0;
  }

  .public-site .product__images {
    position: relative;
    z-index: 1;
  }

  .public-site .product-detail__image-frame {
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    background: #fff;
  }

  .public-site .product-detail__image-frame img,
  .public-site .product-detail__image-frame video,
  .public-site .product-detail__main-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--motion-ui) var(--ease-out);
  }

  .public-site .product-detail__main-media {
    cursor: zoom-in;
  }

  @media (hover: hover) and (pointer: fine) {
    .public-site .product-detail__image-frame:hover img {
      transform: scale(1.025);
    }
  }

  .public-site .product-detail__image-empty {
    display: grid;
    min-height: 20rem;
    place-items: center;
    color: #fff;
    font-family: var(--heading-font);
    font-size: var(--type-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .public-site .product-detail__thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.65rem;
  }

  .public-site .product-detail__thumbnail {
    width: 4.5rem;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--product-line);
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    transition: border-color var(--motion-hover) ease, box-shadow var(--motion-hover) ease, transform var(--motion-hover) var(--ease-out);
  }

  .public-site .product-detail__thumbnail.is-active {
    border-color: var(--product-copper);
    box-shadow: 0 0 0 2px var(--product-copper-soft);
  }

  .public-site .product-detail__thumbnail:focus-visible {
    outline: 2px solid var(--product-copper);
    outline-offset: 3px;
  }

  .public-site .product-detail__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-ui) var(--ease-out);
  }

  .public-site .product-detail__thumbnail-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .public-site .product-detail__thumbnail-video {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--product-copper);
    background: linear-gradient(180deg, transparent 42%, rgb(36 27 24 / 0.62));
    font-size: 1.4rem;
    pointer-events: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .public-site .product-detail__thumbnail:hover img {
      transform: scale(1.05);
    }

    .public-site .product-detail__thumbnail:hover {
      transform: translateY(-0.1rem);
    }
  }

  .public-site .product-detail__gallery-note {
    margin: 0;
    padding: 0.8rem 0.1rem 0;
    color: rgb(36 27 24 / 0.62);
    text-transform: none;
    letter-spacing: 0;
  }

  .public-site .product-detail__intro {
    padding-block: clamp(0.25rem, 1.2vw, 1rem) clamp(1.75rem, 3vw, 3rem);
    border-bottom: 1px solid var(--product-line);
  }

  .public-site .product-detail__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.05rem;
    color: var(--product-copper);
  }

  .public-site .product-detail__eyebrow::before {
    width: 0.55rem;
    height: 0.55rem;
    content: '';
    background: var(--product-copper);
    border-radius: 0;
  }

  .public-site .product-detail__intro h1 {
    margin: 0;
    color: var(--product-ink);
    font-size: clamp(2.15rem, 4vw, 3.8rem);
    font-weight: var(--weight-heading);
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-wrap: balance;
  }

  .public-site .product-detail__section {
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--product-line);
  }

  .public-site .product-detail__section-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
  }

  .public-site .product-detail__section-heading h2 {
    margin: 0;
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong);
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .public-site .product-detail__section-mark {
    width: 1.25rem;
    height: 0.18rem;
    background: var(--product-copper);
  }

  .public-site .product-detail__section-note {
    margin-left: auto;
    color: rgb(36 27 24 / 0.48);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .public-site .product-detail__description {
    width: 100%;
    color: rgb(36 27 24 / 0.82);
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    line-height: 1.55;
    overflow: visible;
    white-space: normal;
  }

  .public-site .product-detail__description > * {
    max-width: none;
    margin: 0 0 1rem;
  }

  .public-site .product-detail__description > :last-child {
    margin-bottom: 0;
  }

  .public-site .product-detail__component-list {
    display: grid;
  }

  .public-site .product-detail__component {
    padding-block: 0.15rem 1.35rem;
  }

  .public-site .product-detail__component + .product-detail__component {
    padding-block: 1.35rem;
    border-top: 1px solid rgb(223 211 201 / 0.8);
  }

  .public-site .product-detail__component:last-child {
    padding-bottom: 0;
  }

  .public-site .product-detail__component-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
  }

  .public-site .product-detail__component-meta div {
    min-width: 0;
  }

  .public-site .product-detail__component dt {
    margin-bottom: 0.35rem;
    color: var(--product-copper);
  }

  .public-site .product-detail__component dd {
    margin: 0;
    color: var(--product-ink);
    font-size: var(--type-body);
    line-height: 1.45;
  }

  .public-site .product-detail__component p {
    max-width: 48ch;
    margin: 0.95rem 0 0;
    color: rgb(36 27 24 / 0.68);
    font-size: var(--type-small);
    line-height: 1.6;
  }

  .public-site .product-detail__purchase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.35rem 2rem;
    align-items: end;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
  }

  .public-site .product-detail__price-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--product-copper);
  }

  .public-site .product-detail__price-block del {
    margin-right: 0.55rem;
    color: rgb(36 27 24 / 0.45);
    font-size: var(--type-small);
  }

  .public-site .product-detail__price-block strong {
    color: var(--product-ink);
    font-family: var(--heading-font);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: var(--weight-heading);
    letter-spacing: -0.04em;
  }

  .public-site .product-detail__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.65rem;
  }

  .public-site .product-detail__actions .btn {
    min-height: 2.8rem;
    border-radius: 0;
  }

  .public-site .product-detail__actions .btn-alt {
    background: var(--product-green);
    border-color: var(--product-green);
    color: #fff;
  }

  .public-site .product-detail__actions .btn-alt:hover {
    background: var(--product-green-dark);
    border-color: var(--product-green-dark);
  }

  .public-site .product-detail__actions .btn-dark {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
  }

  .public-site .product-detail__actions .btn-dark:hover {
    background: #b80000;
    border-color: #b80000;
  }

  .public-site .product-detail__actions .btn-wishlist,
  .public-site .product-detail__actions .btn-main-outline {
    border-color: var(--product-wine);
    color: var(--product-wine);
  }

  .public-site .product-detail__actions .btn-wishlist:hover,
  .public-site .product-detail__actions .btn-main-outline:hover {
    background: var(--product-copper-soft);
  }

  .public-site .product-detail__actions .btn:focus-visible {
    outline: 2px solid var(--product-copper);
    outline-offset: 3px;
  }

  @media (max-width: 991.98px) {
    .public-site .product-detail__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 2.5rem;
    }

    .public-site .product-detail__gallery {
      position: static;
    }

    .public-site .product-detail__image-stage {
      max-width: 42rem;
    }
  }

  @media (max-width: 575.98px) {
    .public-site .product-detail {
      padding: 0.85rem;
      border-radius: 0;
    }

    .public-site .product-detail__grid {
      gap: 1.75rem;
    }

    .public-site .product-detail__intro h1 {
      font-size: clamp(2.15rem, 12vw, 3.5rem);
    }

    .public-site .product-detail__component-meta,
    .public-site .product-detail__purchase {
      grid-template-columns: 1fr;
    }

    .public-site .product-detail__section-note {
      display: none;
    }

    .public-site .product-detail__actions {
      justify-content: stretch;
    }

    .public-site .product-detail__actions > div,
    .public-site .product-detail__actions .btn {
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .public-site .product-detail__image-frame img,
    .public-site .product-detail__image-frame video,
    .public-site .product-detail__main-media,
    .public-site .product-detail__thumbnail img {
      transition: none;
    }

    .public-site .product-detail__thumbnail {
      transition: none;
    }

    .public-site .product-detail__image-frame:hover img,
  .public-site .product-detail__thumbnail:hover img {
      transform: none;
    }
  }
}

@layer layouts {
  /* Checkout: quiet, step-led presentation for the final purchase decision. */
  .public-site .checkout-page {
    --checkout-ink: #241b18;
    --checkout-paper: #fbf8f4;
    --checkout-line: #dfd3c9;
    --checkout-wine: #370617;
    --checkout-copper: #a85f38;
    --checkout-copper-soft: #ead8ca;
    --checkout-gold: #ffba08;
    color: var(--checkout-ink);
    background: #fffaf6;
  }

  .public-site .checkout-page__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
  }

  .public-site .checkout-page__header h1 {
    margin: 0;
    color: var(--checkout-wine);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.07em;
  }

  .public-site .checkout-page__header p {
    margin: 1rem 0 0;
    color: rgb(36 27 24 / 0.68);
    line-height: 1.55;
  }

  .public-site .checkout-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgb(36 27 24 / 0.45);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .public-site .checkout-progress span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
  }

  .public-site .checkout-progress span + span::before {
    width: 1.5rem;
    height: 1px;
    content: '';
    background: var(--checkout-line);
  }

  .public-site .checkout-progress b {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 0;
    font-size: 0.65rem;
  }

  .public-site .checkout-progress .is-current,
  .public-site .checkout-progress .is-complete {
    color: var(--checkout-copper);
  }

  .public-site .checkout-progress .is-current b {
    color: #fff;
    border-color: var(--checkout-copper);
    background: var(--checkout-copper);
  }

  .public-site .checkout-page__layout,
  .public-site .checkout-payment__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.38fr);
    align-items: start;
    gap: clamp(1rem, 3vw, 2rem);
  }

  .public-site .checkout-card,
  .public-site .checkout-summary,
  .public-site .checkout-side-note {
    border: 1px solid var(--checkout-line);
    border-radius: 0;
    background: #fff;
    box-shadow: 0 1rem 3rem rgb(55 6 23 / 0.05);
  }

  .public-site .checkout-card {
    overflow: hidden;
  }

  .public-site .checkout-card__heading,
  .public-site .checkout-summary__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-bottom: 1px solid var(--checkout-line);
  }

  .public-site .checkout-card__heading h2,
  .public-site .checkout-summary__heading h2,
  .public-site .checkout-side-note h2 {
    margin: 0;
    color: var(--checkout-wine);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    letter-spacing: -0.045em;
  }

  .public-site .checkout-card__heading p {
    margin: 0.45rem 0 0;
    color: rgb(36 27 24 / 0.62);
    font-size: var(--type-small);
  }

  .public-site .checkout-card__heading > i,
  .public-site .checkout-summary__heading > i {
    color: var(--checkout-copper);
    font-size: 1.4rem;
  }

  .public-site .checkout-address-form {
    display: grid;
    gap: 0.75rem;
    padding: clamp(1rem, 3vw, 1.75rem);
  }

  .public-site .checkout-address-option {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--checkout-line);
    border-radius: 0;
    color: var(--checkout-ink);
    background: var(--checkout-paper);
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
  }

  .public-site .checkout-address-option:hover,
  .public-site .checkout-address-option:has(.checkout-address-option__input:checked) {
    border-color: var(--checkout-copper);
    background: var(--checkout-copper-soft);
  }

  .public-site .checkout-address-option:has(.checkout-address-option__input:checked) {
    transform: translateY(-0.1rem);
  }

  .public-site .checkout-address-option__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .public-site .checkout-address-option__radio {
    display: grid;
    width: 1.3rem;
    height: 1.3rem;
    place-items: center;
    border: 1px solid var(--checkout-copper);
    border-radius: 0;
    color: #fff;
    font-size: 0.8rem;
  }

  .public-site .checkout-address-option__input:checked + .checkout-address-option__radio {
    background: var(--checkout-copper);
  }

  .public-site .checkout-address-option__radio i {
    opacity: 0;
  }

  .public-site .checkout-address-option__input:checked + .checkout-address-option__radio i {
    opacity: 1;
  }

  .public-site .checkout-address-option__copy {
    display: grid;
    gap: 0.25rem;
    line-height: 1.45;
  }

  .public-site .checkout-address-option__copy strong {
    color: var(--checkout-copper);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .public-site .checkout-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3rem;
    margin-top: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--checkout-wine);
    border-radius: 0;
    color: #fff;
    background: var(--checkout-wine);
    font-family: var(--heading-font);
    font-weight: var(--weight-strong, 700);
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .public-site .checkout-primary-button:hover {
    border-color: var(--checkout-copper);
    background: var(--checkout-copper);
    transform: translateY(-0.1rem);
  }

  .public-site .checkout-side-note {
    padding: clamp(1.25rem, 3vw, 2rem);
    color: #fff;
    background: var(--checkout-wine);
  }

  .public-site .checkout-side-note > i {
    color: var(--checkout-gold);
    font-size: 1.8rem;
  }

  .public-site .checkout-side-note h2 {
    margin-top: 2rem;
    color: #fff;
  }

  .public-site .checkout-side-note p {
    margin: 1rem 0 2rem;
    color: rgb(255 255 255 / 0.75);
    line-height: 1.6;
  }

  .public-site .checkout-side-note a,
  .public-site .checkout-card__edit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--checkout-copper);
    font-family: var(--heading-font);
    font-size: var(--type-small);
    font-weight: var(--weight-strong, 700);
    text-decoration: none;
  }

  .public-site .checkout-side-note a {
    color: var(--checkout-gold);
  }

  .public-site .checkout-card__edit:hover,
  .public-site .checkout-side-note a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .public-site .checkout-address-add {
    margin-top: 0.75rem;
  }

  .public-site .checkout-payment__layout {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  }

  .public-site .checkout-items-list {
    padding: 0 clamp(1rem, 3vw, 1.75rem);
  }

  .public-site .checkout-item {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--checkout-line);
  }

  .public-site .checkout-item:last-child {
    border-bottom: 0;
  }

  .public-site .checkout-item__media {
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--checkout-line);
    background: var(--checkout-paper);
  }

  .public-site .checkout-item__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .public-site .checkout-item__copy h3 {
    margin: 0;
    color: var(--checkout-ink);
    font-size: 1rem;
    line-height: 1.2;
  }

  .public-site .checkout-item__copy p {
    margin: 0.45rem 0 0;
    color: rgb(36 27 24 / 0.55);
    font-size: var(--type-label);
  }

  .public-site .checkout-item__price {
    color: var(--checkout-copper);
    font-family: var(--heading-font);
    white-space: nowrap;
  }

  .public-site .checkout-summary {
    position: sticky;
    top: 6.5rem;
    overflow: hidden;
  }

  .public-site .checkout-summary__delivery,
  .public-site .checkout-coupon,
  .public-site .checkout-totals,
  .public-site .checkout-paypal,
  .public-site .checkout-payment-unavailable {
    margin-inline: clamp(1rem, 3vw, 1.75rem);
  }

  .public-site .checkout-summary__delivery {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--checkout-line);
  }

  .public-site .checkout-summary__delivery > span,
  .public-site .checkout-coupon label {
    display: block;
    margin-bottom: 0.4rem;
    color: rgb(36 27 24 / 0.55);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong, 700);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .public-site .checkout-summary__delivery strong {
    color: var(--checkout-wine);
  }

  .public-site .checkout-summary__delivery p {
    margin: 0.35rem 0 0;
    color: rgb(36 27 24 / 0.7);
    font-size: var(--type-small);
    line-height: 1.5;
  }

  .public-site .checkout-coupon {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--checkout-line);
  }

  .public-site .checkout-coupon__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
  }

  .public-site .checkout-coupon .form-control {
    min-height: 2.7rem;
    border-color: var(--checkout-line);
    border-radius: 0;
    background: var(--checkout-paper);
  }

  .public-site .checkout-small-button {
    min-height: 2.7rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--checkout-wine);
    border-radius: 0;
    color: #fff;
    background: var(--checkout-wine);
    font-family: var(--heading-font);
    font-size: var(--type-label);
    font-weight: var(--weight-strong, 700);
  }

  .public-site .checkout-coupon__remove {
    margin-top: 0.45rem;
    padding: 0;
    border: 0;
    color: var(--checkout-copper);
    background: transparent;
    font-size: var(--type-label);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .public-site .checkout-coupon small {
    display: block;
    min-height: 1rem;
    margin-top: 0.45rem;
    font-size: var(--type-label);
  }

  .public-site .checkout-coupon small.is-success {
    color: var(--checkout-green, #2d6a4f);
  }

  .public-site .checkout-coupon small.is-error {
    color: #8d1e1e;
  }

  .public-site .checkout-totals {
    display: grid;
    gap: 0.7rem;
    margin-block: 1.25rem;
  }

  .public-site .checkout-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: rgb(36 27 24 / 0.68);
    font-size: var(--type-small);
  }

  .public-site .checkout-totals dt,
  .public-site .checkout-totals dd {
    margin: 0;
  }

  .public-site .checkout-totals dd {
    color: var(--checkout-ink);
    font-family: var(--heading-font);
    font-weight: var(--weight-strong, 700);
    text-align: right;
  }

  .public-site .checkout-totals__total {
    margin-top: 0.45rem;
    padding-top: 1rem;
    border-top: 1px solid var(--checkout-line);
    color: var(--checkout-ink) !important;
    font-size: 1.1rem !important;
  }

  .public-site .checkout-totals__total dd {
    color: var(--checkout-copper);
    font-size: 1.35rem;
  }

  .public-site .checkout-paypal {
    padding-bottom: 1.5rem;
  }

  .public-site .checkout-payment-unavailable {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    padding: 0.85rem;
    color: #7d5312;
    border: 1px solid rgb(255 186 8 / 0.5);
    background: rgb(255 186 8 / 0.13);
    font-size: var(--type-label);
    line-height: 1.45;
  }

  .public-site .checkout-payment-unavailable i {
    flex: 0 0 auto;
  }

  @media (max-width: 991.98px) {
    .public-site .checkout-page__layout,
    .public-site .checkout-payment__layout {
      grid-template-columns: 1fr;
    }

    .public-site .checkout-side-note,
    .public-site .checkout-summary {
      position: static;
    }
  }

  @media (max-width: 767.98px) {
    .public-site .checkout-page__header {
      align-items: flex-start;
      flex-direction: column;
      gap: 1.25rem;
    }

    .public-site .checkout-progress {
      width: 100%;
      justify-content: space-between;
    }

    .public-site .checkout-progress span + span::before {
      width: clamp(2rem, 16vw, 5rem);
    }
  }

  @media (max-width: 575.98px) {
    .public-site .checkout-card,
    .public-site .checkout-summary,
    .public-site .checkout-side-note {
      border-radius: 0;
    }

    .public-site .checkout-progress {
      gap: 0.45rem;
      font-size: 0.65rem;
    }

    .public-site .checkout-progress span + span::before {
      width: 1.15rem;
    }

    .public-site .checkout-item {
      grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .public-site .checkout-item__price {
      grid-column: 2;
      grid-row: 2;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .public-site .checkout-address-option,
    .public-site .checkout-primary-button {
      transition: none;
    }

    .public-site .checkout-address-option:has(.checkout-address-option__input:checked),
    .public-site .checkout-primary-button:hover {
      transform: none;
    }
  }
}