/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/brand.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer brand {
  .lume {
    --ink: #121212;
    --navy: #2B3A52;
    --porcelain: #F7F7F7;
    --steel: #8C9199;
    --steel-light: #E5E5E5;
    --white: #FFFFFF;
    --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
    --display: var(--sans);
    --max: 1200px;
    --muted: #6B6B6B;
    --line: rgba(18, 18, 18, .10);
    --line-strong: rgba(18, 18, 18, .18);
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-pill: 999px;
    --sh-1: 0 1px 2px rgba(18, 18, 18, .06);
    --sh-2: 0 4px 12px rgba(18, 18, 18, .09);
    --sh-3: 0 14px 30px rgba(18, 18, 18, .12);
    --ring: 0 0 0 3px rgba(43, 58, 82, .22);
    --sec-y: 64px;
    --ease: cubic-bezier(.2, .6, .2, 1);
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .lume *, .lume *::before, .lume *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .lume img, .lume svg, .lume video {
    display: block;
    max-width: 100%;
  }
  .lume a {
    color: inherit;
    text-decoration: none;
  }
  .lume button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .lume ul {
    list-style: none;
  }
  .lume a:focus-visible, .lume button:focus-visible, .lume input:focus-visible, .lume select:focus-visible, .lume textarea:focus-visible {
    outline: none;
    border-radius: var(--r-sm);
    box-shadow: var(--ring);
  }
  .lume .wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 40px;
  }
  .lume h1, .lume h2, .lume h3, .lume h4 {
    font-family: var(--sans);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.15;
  }
  .lume h1 {
    font-size: clamp(32px, 3.6vw, 48px);
  }
  .lume h2 {
    font-size: clamp(24px, 2.2vw, 30px);
  }
  .lume h3 {
    font-size: 18px;
  }
  .lume section[data-home-section] {
    padding: var(--sec-y) 0;
  }
  .lume .announce {
    background: var(--ink);
    color: #fff;
    text-align: center;
    font-size: 12.5px;
    letter-spacing: .04em;
    padding: 10px 16px;
  }
  .lume header {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-1);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .lume .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 64px;
  }
  .lume .nav ul {
    display: flex;
    gap: 24px;
    font-size: 14px;
    font-weight: 400;
  }
  .lume .nav ul a {
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
  }
  .lume .nav ul a:hover {
    border-bottom-color: currentColor;
  }
  .lume .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lume .logo img {
    height: 28px;
    width: auto;
  }
  .lume .wordmark {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -.02em;
  }
  .lume .tools {
    justify-self: end;
    display: flex;
    gap: 18px;
    font-size: 14px;
    font-weight: 400;
  }
  .lume .tools button {
    position: relative;
    transition: opacity .2s;
  }
  .lume .tools button:hover {
    opacity: .6;
  }
  .lume .tools .count {
    position: absolute;
    top: -7px;
    right: -11px;
    background: var(--navy);
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    border-radius: var(--r-pill);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px var(--white);
  }
  .lume .hero {
    display: grid;
    grid-template-columns: 7fr 5fr;
    align-items: stretch;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 0;
    min-height: 560px;
  }
  .lume .hero-visual {
    position: relative;
    overflow: hidden;
    background: var(--porcelain);
  }
  .lume .hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lume .hero-visual svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .lume .hero-copy {
    padding: 72px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .lume .hero-copy h1 {
    margin-bottom: 16px;
  }
  .lume .hero-copy p {
    max-width: 42ch;
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 28px;
  }
  .lume .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .01em;
    border: 1px solid var(--ink);
    border-radius: var(--r-sm);
    background: var(--ink);
    color: #fff;
    box-shadow: var(--sh-1);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
  }
  .lume .btn:hover {
    background: var(--navy);
    border-color: var(--navy);
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
  }
  .lume .btn:active {
    transform: translateY(0);
    box-shadow: var(--sh-1);
  }
  .lume .btn.ghost {
    background: var(--white);
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: none;
  }
  .lume .btn.ghost:hover {
    background: var(--porcelain);
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: var(--sh-1);
  }
  .lume .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .lume .facts {
    display: flex;
    gap: 32px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
  }
  .lume .facts b {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 2px;
    letter-spacing: -.01em;
  }
  .lume .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
  }
  .lume .head p {
    max-width: 46ch;
    color: var(--muted);
    margin-top: 6px;
  }
  .lume .head a, .lume .head button {
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    white-space: nowrap;
    transition: opacity .2s;
  }
  .lume .head a:hover, .lume .head button:hover {
    opacity: .6;
  }
  .lume .tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .lume .tile {
    position: relative;
    aspect-ratio: 4/5;
    background: var(--porcelain);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    text-align: left;
    box-shadow: var(--sh-1);
    transition: box-shadow .25s, transform .25s, border-color .25s;
  }
  .lume .tile:hover {
    box-shadow: var(--sh-3);
    transform: translateY(-3px);
    border-color: var(--line-strong);
  }
  .lume .tile .art {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #FFFFFF 0%, #EDEFF1 60%, #D7DBE0 100%);
    transition: transform .5s var(--ease);
  }
  .lume .tile:nth-child(2) .art {
    background: linear-gradient(200deg, #F7F7F7 0%, #DCE0E5 55%, #2B3A52 150%);
  }
  .lume .tile:nth-child(3) .art {
    background: linear-gradient(140deg, #FFFFFF 0%, #E4E6E9 45%, #A8AEB6 100%);
  }
  .lume .tile img.art {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .lume .tile:hover .art {
    transform: scale(1.03);
  }
  .lume .tile svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .lume .tile h3 {
    position: relative;
    font-size: 22px;
    margin-bottom: 4px;
  }
  .lume .tile p {
    position: relative;
    font-size: 13.5px;
    color: rgba(18, 18, 18, .72);
  }
  .lume .tile span {
    position: relative;
    margin-top: 12px;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 400;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
  }
  .lume .products {
    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .lume .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 20px;
  }
  .lume .card {
    display: block;
    text-align: left;
  }
  .lume .card .img {
    position: relative;
    aspect-ratio: 1/1;
    background: var(--porcelain);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-1);
    transition: box-shadow .25s, border-color .25s;
  }
  .lume .card:hover .img {
    box-shadow: var(--sh-2);
    border-color: var(--line-strong);
  }
  .lume .card .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s var(--ease);
  }
  .lume .card:hover .img img {
    transform: scale(1.04);
  }
  .lume .card .img svg {
    width: 100%;
    height: 100%;
  }
  .lume .card .tag {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-1);
  }
  .lume .card .meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 12px;
    font-size: 14px;
  }
  .lume .card .meta > * {
    min-width: 0;
  }
  .lume .card .name {
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lume .card .sub {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px;
  }
  .lume .card .price {
    font-weight: 400;
    white-space: nowrap;
  }
  .lume .card .was {
    color: var(--muted);
    font-weight: 400;
    text-decoration: line-through;
    margin-right: 6px;
  }
  .lume .swatches {
    display: flex;
    gap: 6px;
  }
  .lume .swatches i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: block;
    transition: transform .2s, box-shadow .2s;
  }
  .lume .card:hover .swatches i {
    transform: translateY(-1px);
  }
  .lume .swatches i.silver {
    background: linear-gradient(135deg, #F2F2F2, #B4B9C0);
  }
  .lume .swatches i.gold {
    background: linear-gradient(135deg, #F3E3B8, #C9A961);
  }
  .lume .material {
    background: var(--navy);
    color: #fff;
  }
  .lume .material .inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: center;
  }
  .lume .material h2 {
    font-size: clamp(26px, 2.6vw, 34px);
    margin-bottom: 16px;
    color: #fff;
  }
  .lume .material p {
    color: rgba(255, 255, 255, .78);
    max-width: 42ch;
  }
  .lume .material dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    padding-top: 28px;
  }
  .lume .material dt {
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 4px;
  }
  .lume .material dd {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
  }
  .lume .reviews .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .lume .review {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--sh-1);
    transition: box-shadow .25s, transform .25s;
  }
  .lume .review:hover {
    box-shadow: var(--sh-2);
    transform: translateY(-2px);
  }
  .lume .review .stars {
    color: var(--navy);
    letter-spacing: 2px;
    font-size: 13px;
    margin-bottom: 10px;
  }
  .lume .review q {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .lume .review q::before, .lume .review q::after {
    content: "";
  }
  .lume .review span {
    font-size: 13px;
    color: var(--muted);
  }
  .lume .signup {
    background: var(--porcelain);
    border-top: 1px solid var(--line);
  }
  .lume .signup .inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .lume .signup h2 {
    margin-bottom: 8px;
  }
  .lume .signup p {
    color: var(--muted);
    max-width: 44ch;
  }
  .lume .signup form {
    display: block;
  }
  .lume .signup .signup-bar {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--white);
    box-shadow: var(--sh-1);
    overflow: hidden;
  }
  .lume .signup input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0 16px;
    min-height: 44px;
    font: inherit;
    font-size: 14px;
    background: transparent;
  }
  .lume .signup input:focus {
    outline: none;
  }
  .lume .signup .consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    max-width: 44ch;
    cursor: pointer;
  }
  .lume .signup .consent input[type='checkbox'] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    min-height: 0;
    padding: 0;
    accent-color: var(--navy, #1f2a44);
  }
  .lume .signup .signup-bar:focus-within {
    border-color: var(--ink);
    box-shadow: var(--ring);
  }
  .lume .signup .btn {
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    min-height: 44px;
  }
  .lume .signup .btn:hover {
    box-shadow: none;
    transform: none;
    background: var(--navy);
  }
  .lume .signup .thanks {
    font-size: 14px;
    color: var(--navy);
    font-weight: 400;
  }
  .lume footer:not([data-store-footer]) {
    padding: 0 0 28px;
    border-top: 1px solid var(--line);
    background: var(--porcelain);
    font-size: 14px;
  }
  .lume footer:not([data-store-footer]) .cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }
  .lume footer:not([data-store-footer]) h4 {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 12px;
  }
  .lume footer:not([data-store-footer]) li {
    margin-bottom: 8px;
    color: var(--muted);
  }
  .lume footer:not([data-store-footer]) li a {
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
  }
  .lume footer:not([data-store-footer]) li a:hover {
    color: var(--ink);
    border-bottom-color: currentColor;
  }
  .lume footer:not([data-store-footer]) .brand img {
    height: 26px;
    width: auto;
  }
  .lume footer:not([data-store-footer]) .brand p {
    color: var(--muted);
    max-width: 36ch;
    margin-top: 12px;
  }
  .lume footer:not([data-store-footer]) .legal {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 12.5px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
  }
  @media (max-width: 1240px) {
    .lume .grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 980px) {
    .lume {
      --sec-y: 56px;
    }
    .lume .wrap {
      padding: 0 28px;
    }
    .lume .hero {
      grid-template-columns: 1fr;
      min-height: 0;
    }
    .lume .hero-visual {
      min-height: 360px;
    }
    .lume .hero-copy {
      padding: 44px 28px;
    }
    .lume .tiles, .lume .reviews .list {
      grid-template-columns: 1fr;
    }
    .lume .tiles .tile {
      aspect-ratio: 16/10;
    }
    .lume .grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 16px;
    }
    .lume .material .inner, .lume .signup .inner {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .lume .material dl {
      grid-template-columns: 1fr;
    }
    .lume footer .cols {
      grid-template-columns: 1fr 1fr;
    }
    .lume .nav ul {
      display: none;
    }
    .lume .nav {
      grid-template-columns: auto 1fr auto;
    }
    .lume .head {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  @media (max-width: 560px) {
    .lume {
      --sec-y: 44px;
    }
    .lume .wrap {
      padding: 0 18px;
    }
    .lume .grid {
      gap: 22px 14px;
    }
    .lume .facts {
      flex-wrap: wrap;
      gap: 18px;
    }
    .lume .signup .signup-bar {
      flex-direction: column;
    }
    .lume .signup .btn {
      border-left: 0;
      border-top: 1px solid var(--line);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .lume .btn, .lume .card .img, .lume .card .img img, .lume .tile, .lume .tile .art, .lume .review, .lume .swatches i {
      transition: none;
    }
    .lume .btn:hover, .lume .tile:hover, .lume .card:hover .img img, .lume .card:hover .swatches i, .lume .review:hover {
      transform: none;
    }
  }
  .lume .card .meta > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .lume .card .price {
    flex: 0 0 auto;
  }
  .lume .swatches {
    flex-wrap: wrap;
  }
  .lume .swatches .swatches-more {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--porcelain);
    border: 1px solid var(--line-strong);
    font-size: 9px;
    line-height: 1;
    color: var(--muted);
  }
  .lume .btn, .lume .card .price, .lume .head a, .lume .head button {
    font-weight: 500;
  }
  .lj {
    --rasp: #B5416A;
    --petal: #F2B8C6;
    --blush: #FBE9EF;
    --butter: #FFD972;
    --sky: #BFD8F2;
    --mint: #BFE6D2;
    --ink: #2A1F24;
    --paper: #FFFFFF;
    --display: "Fredoka", "Arial Rounded MT Bold", sans-serif;
    --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --max: 1200px;
    --line: 2px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .lj *, .lj *::before, .lj *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .lj img {
    display: block;
    max-width: 100%;
  }
  .lj a {
    color: inherit;
    text-decoration: none;
  }
  .lj button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .lj a:focus-visible, .lj button:focus-visible {
    outline: 3px solid var(--rasp);
    outline-offset: 3px;
    border-radius: 6px;
  }
  .lj .wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
  }
  .lj h1, .lj h2, .lj h3 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.01em;
  }
  .lj section {
    padding: 80px 0;
  }
  .lj .tone-petal {
    background: var(--petal);
  }
  .lj .tone-butter {
    background: var(--butter);
  }
  .lj .tone-sky {
    background: var(--sky);
  }
  .lj .tone-mint {
    background: var(--mint);
  }
  .lj .tone-blush {
    background: var(--blush);
  }
  .lj .tone-paper {
    background: var(--paper);
  }
  .lj .marquee {
    background: var(--rasp);
    color: #fff;
    font-family: var(--display);
    font-weight: 500;
    font-size: 14px;
    padding: 9px 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .lj .marquee div {
    display: inline-block;
    animation: lj-scroll 28s linear infinite;
  }
  .lj .marquee span {
    margin: 0 28px;
  }
  @keyframes lj-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .lj .marquee div {
      animation: none;
    }
  }
  .lj header {
    background: var(--paper);
    border-bottom: var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .lj .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
  }
  .lj .logo {
    display: inline-flex;
    align-items: center;
  }
  .lj .logo img {
    height: 32px;
    width: auto;
  }
  .lj .wordmark {
    font-family: var(--display);
    font-weight: 700;
    font-size: 24px;
    color: var(--rasp);
  }
  .lj .nav ul {
    list-style: none;
    display: flex;
    gap: 26px;
    font-weight: 500;
    font-size: 15px;
  }
  .lj .nav ul a {
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
  }
  .lj .nav ul a:hover {
    border-bottom-color: var(--rasp);
  }
  .lj .tools {
    display: flex;
    gap: 10px;
  }
  .lj .pill {
    font-family: var(--display);
    font-weight: 500;
    font-size: 14px;
    padding: 8px 14px;
    border: var(--line);
    border-radius: 999px;
    background: var(--paper);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .lj .pill.fill {
    background: var(--butter);
  }
  .lj .pill .n {
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 5px;
  }
  .lj .hero {
    background: var(--blush);
    border-bottom: var(--line);
    padding: 56px 0 64px;
    position: relative;
    overflow: hidden;
  }
  .lj .hero .inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: center;
  }
  .lj .hero h1 {
    font-size: clamp(46px, 5.6vw, 76px);
    margin-bottom: 18px;
  }
  .lj .hero h1 .accent {
    display: inline-block;
    color: var(--rasp);
  }
  .lj .lead {
    font-size: 18px;
    max-width: 38ch;
    margin-bottom: 26px;
  }
  .lj .btn {
    font-family: var(--display);
    font-weight: 600;
    font-size: 16px;
    padding: 14px 24px;
    border: var(--line);
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--rasp);
    transition: transform .1s, box-shadow .1s;
    display: inline-block;
  }
  .lj .btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--rasp);
  }
  .lj .btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--rasp);
  }
  .lj .btn.light {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .lj .btn.light:hover {
    box-shadow: 2px 2px 0 var(--ink);
  }
  .lj .actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .lj .builder {
    background: var(--paper);
    border: var(--line);
    border-radius: 28px;
    padding: 26px;
    box-shadow: 8px 8px 0 var(--petal);
    position: relative;
  }
  .lj .builder .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .lj .builder h3 {
    font-size: 22px;
  }
  .lj .builder .steps {
    font-size: 13px;
    color: #6E5A62;
  }
  .lj .stage {
    position: relative;
    height: 250px;
    border: 2px dashed #E8C6D2;
    border-radius: 18px;
    overflow: hidden;
    background: repeating-linear-gradient(0deg, transparent 0 23px, #F5E3EA 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, #F5E3EA 23px 24px);
  }
  .lj .stage svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .lj .slot {
    position: absolute;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 26px;
  }
  .lj .slot.empty {
    border: 2px dashed #D9A7B8;
    color: #D9A7B8;
    font-size: 16px;
    font-family: var(--display);
  }
  .lj .slot.filled {
    background: var(--paper);
    border: var(--line);
    animation: lj-pop .3s cubic-bezier(.34, 1.56, .64, 1);
  }
  .lj .slot .letter {
    font-family: var(--display);
    font-weight: 700;
    color: var(--rasp);
    font-size: 24px;
  }
  @keyframes lj-pop {
    from {
      transform: scale(.4);
    }
    to {
      transform: scale(1);
    }
  }
  .lj .stage .hint {
    position: absolute;
    left: 14px;
    bottom: 10px;
    font-size: 12px;
    color: #8A6E78;
  }
  .lj .tray {
    margin-top: 16px;
  }
  .lj .tray .label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }
  .lj .tray .label button {
    color: var(--rasp);
    text-decoration: underline;
  }
  .lj .charms {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
  }
  .lj .charm {
    aspect-ratio: 1/1;
    border: var(--line);
    border-radius: 14px;
    background: var(--paper);
    font-size: 26px;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: relative;
    transition: transform .12s;
  }
  .lj .charm:hover {
    transform: translateY(-3px) rotate(-4deg);
  }
  .lj .charm.pick {
    background: var(--butter);
  }
  .lj .charm .letter {
    font-family: var(--display);
    font-weight: 700;
    color: var(--rasp);
  }
  .lj .charm small {
    position: absolute;
    bottom: -9px;
    right: -6px;
    font-family: var(--display);
    font-size: 11px;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: 2px 6px;
  }
  .lj .bases {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
  }
  .lj .base {
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border: var(--line);
    border-radius: 999px;
    background: var(--paper);
    cursor: pointer;
  }
  .lj .base.on {
    background: var(--ink);
    color: #fff;
  }
  .lj .total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: var(--line);
    gap: 12px;
  }
  .lj .total b {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 600;
  }
  .lj .total small {
    display: block;
    font-size: 12px;
    color: #6E5A62;
    font-weight: 400;
  }
  .lj .stick {
    position: absolute;
    font-family: var(--display);
    font-weight: 600;
    padding: 8px 14px;
    border: var(--line);
    border-radius: 999px;
    font-size: 14px;
    box-shadow: 3px 3px 0 var(--ink);
    z-index: 2;
  }
  .lj .stick.a {
    top: -16px;
    right: 36px;
    transform: rotate(6deg);
    background: var(--mint);
  }
  .lj .stick.b {
    bottom: -16px;
    left: 36px;
    transform: rotate(-5deg);
    background: var(--sky);
  }
  .lj .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 36px;
  }
  .lj .head h2 {
    font-size: 42px;
  }
  .lj .head p {
    max-width: 44ch;
    color: #5C4A52;
  }
  .lj .head a {
    font-weight: 500;
    border-bottom: 2px solid var(--ink);
    white-space: nowrap;
  }
  .lj .cats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
  }
  .lj .cat {
    border: var(--line);
    border-radius: 22px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 170px;
    transition: transform .12s;
  }
  .lj .cat:hover {
    transform: translateY(-4px);
  }
  .lj .cat .ico {
    font-size: 34px;
    line-height: 1;
  }
  .lj .cat h3 {
    font-size: 20px;
    margin-top: auto;
  }
  .lj .cat span {
    font-size: 13px;
    color: #5C4A52;
  }
  .lj .products {
    background: var(--blush);
    border-top: var(--line);
    border-bottom: var(--line);
  }
  .lj .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
  .lj .card {
    background: var(--paper);
    border: var(--line);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .12s, box-shadow .12s;
    text-align: left;
  }
  .lj .card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0 var(--ink);
  }
  .lj .card .img {
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
    font-size: 72px;
    position: relative;
    border-bottom: var(--line);
    overflow: hidden;
  }
  .lj .card .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lj .card .img .letter {
    font-family: var(--display);
    font-weight: 700;
    color: var(--rasp);
  }
  .lj .card .img.p0 {
    background: #FFF3F6;
  }
  .lj .card .img.p1 {
    background: #FFF8E1;
  }
  .lj .card .img.p2 {
    background: #EEF5FC;
  }
  .lj .card .img.p3 {
    background: #EDF8F2;
  }
  .lj .card .tag {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 600;
    background: var(--butter);
    border: var(--line);
    border-radius: 999px;
    padding: 4px 10px;
    transform: rotate(-4deg);
  }
  .lj .card .tag.pink {
    background: var(--petal);
  }
  .lj .card .body {
    padding: 14px 16px 16px;
  }
  .lj .card .name {
    font-family: var(--display);
    font-weight: 600;
    font-size: 18px;
  }
  .lj .card .sub {
    font-size: 13px;
    color: #5C4A52;
    margin: 2px 0 10px;
  }
  .lj .card .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lj .card .price {
    font-weight: 500;
  }
  .lj .card .was {
    color: #8A7680;
    text-decoration: line-through;
    margin-right: 6px;
    font-weight: 400;
  }
  .lj .card .add {
    font-family: var(--display);
    font-weight: 600;
    font-size: 13px;
    border: var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--paper);
    cursor: pointer;
  }
  .lj .card .add:hover {
    background: var(--ink);
    color: #fff;
  }
  .lj .steps3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .lj .step {
    border: var(--line);
    border-radius: 22px;
    padding: 28px;
  }
  .lj .step .num {
    font-family: var(--display);
    font-weight: 700;
    font-size: 44px;
    color: var(--rasp);
    line-height: 1;
    margin-bottom: 12px;
  }
  .lj .step h3 {
    font-size: 24px;
    margin-bottom: 8px;
  }
  .lj .step p {
    color: #5C4A52;
    font-size: 15px;
  }
  .lj .ugc {
    background: var(--ink);
    color: #fff;
    border-top: var(--line);
  }
  .lj .ugc .head h2 {
    color: #fff;
  }
  .lj .ugc .head p {
    color: #D9C7CF;
  }
  .lj .ugc .head a {
    color: #fff;
    border-color: #fff;
  }
  .lj .polas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }
  .lj .pola {
    background: #fff;
    color: var(--ink);
    padding: 10px 10px 22px;
    border-radius: 6px;
    transform: rotate(var(--r, 0deg));
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .lj .pola .ph {
    aspect-ratio: 1/1.1;
    display: grid;
    place-items: center;
    font-size: 44px;
    overflow: hidden;
  }
  .lj .pola .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lj .pola .ph .letter {
    font-family: var(--display);
    font-weight: 700;
    color: var(--rasp);
    font-size: 40px;
  }
  .lj .pola span {
    display: block;
    font-family: var(--display);
    font-weight: 500;
    font-size: 13px;
    margin-top: 10px;
    text-align: center;
  }
  .lj footer:not([data-store-footer]) {
    padding: 56px 0 28px;
    border-top: var(--line);
    font-size: 14px;
  }
  .lj footer:not([data-store-footer]) .cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 28px;
    margin-bottom: 44px;
  }
  .lj footer:not([data-store-footer]) h4 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
  }
  .lj footer:not([data-store-footer]) ul {
    list-style: none;
  }
  .lj footer:not([data-store-footer]) li {
    margin-bottom: 8px;
    color: #5C4A52;
  }
  .lj footer:not([data-store-footer]) .brand img {
    height: 28px;
    width: auto;
  }
  .lj footer:not([data-store-footer]) .brand p {
    color: #5C4A52;
    max-width: 34ch;
    margin-top: 14px;
  }
  .lj footer:not([data-store-footer]) .legal {
    display: flex;
    justify-content: space-between;
    color: #7A666E;
    font-size: 12px;
    border-top: 2px solid #EBD5DD;
    padding-top: 18px;
    flex-wrap: wrap;
    gap: 8px;
  }
  @media (max-width: 1100px) {
    .lj .cats {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 980px) {
    .lj .hero .inner {
      grid-template-columns: 1fr;
    }
    .lj .charms {
      grid-template-columns: repeat(4, 1fr);
    }
    .lj .grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .lj .steps3 {
      grid-template-columns: 1fr;
    }
    .lj .polas {
      grid-template-columns: repeat(2, 1fr);
    }
    .lj .nav ul {
      display: none;
    }
    .lj footer .cols {
      grid-template-columns: 1fr 1fr;
    }
    .lj .head {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  @media (max-width: 560px) {
    .lj .cats {
      grid-template-columns: repeat(2, 1fr);
    }
    .lj .grid {
      grid-template-columns: 1fr;
    }
    .lj .stick {
      display: none;
    }
  }
}
:root {
  --brand-danger: #b3261e;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/brand-tokens.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
   品牌令牌桥（Brand token contract）
   -----------------------------------------------------------------------------
   应用层（Tailwind `@theme`）只认 --brand-* 这一层令牌；各品牌模板自带的设计变量
   （--ink / --max / --display…）在这里被投影成统一令牌。因此：
     · 应用层组件用 text-ink / bg-surface2 / rounded-brand … 就能自动按品牌换肤
     · 模板 CSS 保持设计交付原样，不掺应用层概念

   ⚠️ 两个坑（2026-09-11 修复）：
   1) 令牌必须真的定义，否则 var(--brand-ink) 为空 → 工具类静默失效（背景透明、
      文字继承），页面看起来“样式全丢”。
      另外 tailwind.css 必须用 `@theme inline`：普通 @theme 会把令牌定义在 :root，
      而 :root 上拿不到品牌作用域里的 --brand-*，var() 在那时就解析失败并被锁为
      无效值（下面不再用 :root 兼底，而是让 inline 的工具类自带裸值兼底）。
   2) 模板 CSS 里的 `* { margin:0; padding:0 }` 属于**未分层**样式，优先级高于
      Tailwind 的 @layer utilities → 曾把 px-6/mx-auto/pt-4 全部吃掉。模板 CSS
      现在经 styles/brand.css 以 `@import … layer(brand)` 引入，层次低于 utilities。
   ============================================================================= */

/* ---------- Lumé：锐利、冷调、藏蓝强调 ---------- */
.lume {
  --brand-ink: var(--ink);
  --brand-muted: #5e6672;          /* on porcelain 5.36:1（AA） */
  --brand-line: var(--steel-light);
  --brand-surface: var(--white);
  --brand-surface-2: var(--porcelain);
  --brand-accent: var(--navy);     /* 白字 11.48:1 */
  --brand-accent-ink: var(--white);
  /* 危险/错误色（2026-10-10 补，审计 cross_danger.py 实测：「--brand-danger 在品牌层根本没定义」）。
     值取 `tailwind.css` 那行 `--color-danger: var(--brand-danger, #b3261e)` 的**兜底裸值**
     —— 所以这次补令牌**不改变任何已渲染的像素**（实测：表单红边 rgb(179,38,30) 补前补后一致），
     补的是"换肤契约"：以前改这个令牌不会全站生效（var() 取不到值就回落裸值），现在会。 */
  --brand-danger: #b3261e;         /* on 白底 6.57:1（AA）· 与 Shopify 结账红同族 */
  --brand-font-display: var(--display);
  --brand-font-sans: var(--sans);
  --brand-radius: 2px;
  --brand-radius-pill: 999px;
  --brand-radius-btn: 4px;         /* 按钮圆角（用户 2026-10-10 定 4px）；首页模板 .btn 走 --r-sm，下行同步成 4px */
  --r-sm: 4px;                     /* 覆盖模板 lume.css 的 6px（本文件未分层，压过 @layer brand）：模板按钮/订阅框与应用层一致 */
  --brand-max: var(--max);
}

/* ---------- Lilli June：圆润、草莓粉强调 ---------- */
.lj {
  --brand-ink: var(--ink);
  --brand-muted: #6b5560;          /* on blush 5.82:1（AA） */
  --brand-line: var(--petal);
  --brand-surface: var(--paper);
  --brand-surface-2: var(--blush);
  --brand-accent: var(--rasp);     /* 白字 5.34:1（AA） */
  --brand-accent-ink: #ffffff;
  /* 同 .lume：错误色必须**每个品牌作用域各自定义**（否则跨品牌时静默回落裸值）。
     品牌的粉调**不用于错误色**——错误色是语义色，跨品牌保持一致才能被用户正确解读。 */
  --brand-danger: #b3261e;         /* on 白底 6.57:1（AA） */
  --brand-font-display: var(--display);
  --brand-font-sans: var(--sans);
  --brand-radius: 14px;
  --brand-radius-pill: 999px;
  --brand-radius-btn: 999px;       /* 按钮圆角 = 模板 .btn 的胶囊 */
  --brand-max: var(--max);
}

/* ---------- Lumé Noir：黑白高对比、锐利直角（品牌 lume 的第二套主题，需求 9.7） ----------
   与 .lume 的关系：本主题的根元素**同时带 `.lume`**（见 config/brands.ts 的 rootClass =
   'lume lume-noir'）——因为非首页外壳 StoreChrome 复用 lume 模板的布局类
   （header / .wrap.nav / .logo / .tools / footer / .legal，定义在 lume.css 的 .lume 作用域）。
   所以这里只做两件事：
     ① 把 lume 模板的**局部变量**（--ink/--navy/--porcelain/--steel-light/--white）重映射为
        黑白值 → lume.css 里所有 var(--ink)… 自动整体换肤；
     ② 投影出 --brand-* 令牌 → 应用层 Tailwind 工具类（text-ink/bg-surface/rounded-brand…）跟随。
   分层：本文件未分层（unlayered），优先级高于 lume.css 的 @layer brand，
        故同元素上 `.lume-noir` 的 --ink 覆盖 `.lume` 的 --ink（这是换肤的关键）。
   ⚠️ 必须用**字面量**：--display/--max 等只在 .lume 作用域内，写成 var(--display) 在
      .lume-noir 里取不到 → 令牌静默失效（见文件顶部「两个坑」）。字体沿用品牌字体族字面量。
   对比度（on 纯白 #FFFFFF，均满足 WCAG AA）：ink 19.8:1 · muted 7.28:1 · accent 18.86:1。 */
.lume-noir {
  /* ① 重映射 lume 模板局部变量 */
  --ink: #0a0a0b;
  --navy: #111113;       /* 强调色：近黑 */
  --porcelain: #ffffff;  /* 页面底色：纯白 */
  --steel: #9a9a9e;
  --steel-light: #e4e4e7;
  --white: #ffffff;
  --r-sm: 0px;           /* 模板小圆角（.btn / 订阅框 / 输入框焦点环）也归零：Noir 全站直角 */

  /* ② 投影品牌令牌 */
  --brand-ink: var(--ink);
  --brand-muted: #52575e;          /* on #ffffff 7.28:1 */
  --brand-line: var(--steel-light);
  --brand-surface: var(--white);
  --brand-surface-2: #f4f4f5;
  --brand-accent: var(--navy);     /* 白字 18.86:1 */
  --brand-accent-ink: #ffffff;
  /* 同 .lume / .lj：错误色跨品牌一致（语义色，不跟随黑白主题变浅/变深，否则红色会失去警示语义） */
  --brand-danger: #b3261e;         /* on #ffffff 6.57:1（AA） */
  --brand-font-display: "Bodoni Moda", "Didot", serif;
  --brand-font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --brand-radius: 0px;             /* 锐利直角（区别于 .lume 的 2px / .lj 的 14px） */
  --brand-radius-pill: 999px;
  --brand-radius-btn: 0px;         /* Noir 按钮保持直角（品牌辨识度，用户 2026-10-10 确认） */
  --brand-max: 1240px;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/tailwind.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer brand, theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-semibold: 500;
    --tracking-wide: 0.025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --color-ink: var(--brand-ink, #141414);
    --color-line: var(--brand-line, #d9dce0);
    --color-danger: var(--brand-danger, #b3261e);
    --font-display: var(--brand-font-display, 'Bodoni Moda', Didot, serif);
    --radius-brand: var(--brand-radius, 2px);
    --radius-pill: var(--brand-radius-pill, 999px);
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .\!visible {
    visibility: visible !important;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0px;
  }
  .inset-2 {
    inset: calc(var(--spacing) * 2);
  }
  .inset-3 {
    inset: calc(var(--spacing) * 3);
  }
  .inset-x-0 {
    inset-inline: 0px;
  }
  .inset-y-0 {
    inset-block: 0px;
  }
  .-top-2 {
    top: calc(var(--spacing) * -2);
  }
  .top-0 {
    top: 0px;
  }
  .top-0\.5 {
    top: calc(var(--spacing) * 0.5);
  }
  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-\[14px\] {
    top: 14px;
  }
  .top-\[24px\] {
    top: 24px;
  }
  .top-\[calc\(100\%\+10px\)\] {
    top: calc(100% + 10px);
  }
  .top-full {
    top: 100%;
  }
  .-right-2 {
    right: calc(var(--spacing) * -2);
  }
  .-right-4 {
    right: calc(var(--spacing) * -4);
  }
  .right-0 {
    right: 0px;
  }
  .right-1 {
    right: var(--spacing);
  }
  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-10 {
    right: calc(var(--spacing) * 10);
  }
  .bottom-0 {
    bottom: 0px;
  }
  .bottom-1\.5 {
    bottom: calc(var(--spacing) * 1.5);
  }
  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-20 {
    bottom: calc(var(--spacing) * 20);
  }
  .bottom-\[calc\(12px\+var\(--sf-bottom-bar\,0px\)\)\] {
    bottom: calc(12px + var(--sf-bottom-bar,0px));
  }
  .bottom-\[calc\(80px\+var\(--sf-bottom-bar\,0px\)\)\] {
    bottom: calc(80px + var(--sf-bottom-bar,0px));
  }
  .-left-4 {
    left: calc(var(--spacing) * -4);
  }
  .left-0 {
    left: 0px;
  }
  .left-1 {
    left: var(--spacing);
  }
  .left-1\.5 {
    left: calc(var(--spacing) * 1.5);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .isolate {
    isolation: isolate;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[1\] {
    z-index: 1;
  }
  .z-\[5\] {
    z-index: 5;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[70\] {
    z-index: 70;
  }
  .z-\[80\] {
    z-index: 80;
  }
  .z-\[90\] {
    z-index: 90;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .z-\[120\] {
    z-index: 120;
  }
  .z-\[2147483100\] {
    z-index: 2147483100;
  }
  .order-first {
    order: -9999;
  }
  .order-last {
    order: 9999;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .-m-px {
    margin: -1px;
  }
  .m-0 {
    margin: 0px;
  }
  .m-auto {
    margin: auto;
  }
  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }
  .mx-1 {
    margin-inline: var(--spacing);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }
  .-mt-2\.5 {
    margin-top: calc(var(--spacing) * -2.5);
  }
  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }
  .mt-0 {
    margin-top: 0px;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-\[52px\] {
    margin-top: 52px;
  }
  .mt-auto {
    margin-top: auto;
  }
  .mt-px {
    margin-top: 1px;
  }
  .-mr-2 {
    margin-right: calc(var(--spacing) * -2);
  }
  .-mr-3 {
    margin-right: calc(var(--spacing) * -3);
  }
  .mr-1 {
    margin-right: var(--spacing);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .-mb-2 {
    margin-bottom: calc(var(--spacing) * -2);
  }
  .-mb-px {
    margin-bottom: -1px;
  }
  .mb-0 {
    margin-bottom: 0px;
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .-ml-2 {
    margin-left: calc(var(--spacing) * -2);
  }
  .ml-0\.5 {
    margin-left: calc(var(--spacing) * 0.5);
  }
  .ml-1 {
    margin-left: var(--spacing);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-auto {
    margin-left: auto;
  }
  .\[box-sizing\:border-box\] {
    box-sizing: border-box;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .\[display\:grid\] {
    display: grid;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .\[field-sizing\:content\] {
    field-sizing: content;
  }
  .aspect-2\/3 {
    aspect-ratio: 2/3;
  }
  .aspect-3\/4 {
    aspect-ratio: 3/4;
  }
  .aspect-\[2\/3\] {
    aspect-ratio: 2/3;
  }
  .aspect-\[3\/4\] {
    aspect-ratio: 3/4;
  }
  .aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }
  .aspect-\[4\/5\] {
    aspect-ratio: 4/5;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .\!h-8 {
    height: calc(var(--spacing) * 8) !important;
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-\[1em\] {
    height: 1em;
  }
  .h-\[3px\] {
    height: 3px;
  }
  .h-\[16px\] {
    height: 16px;
  }
  .h-\[18px\] {
    height: 18px;
  }
  .h-\[48px\] {
    height: 48px;
  }
  .h-\[52px\] {
    height: 52px;
  }
  .h-\[68px\] {
    height: 68px;
  }
  .h-\[76px\] {
    height: 76px;
  }
  .h-\[150px\] {
    height: 150px;
  }
  .h-\[clamp\(440px\,82vh\,880px\)\] {
    height: clamp(440px, 82vh, 880px);
  }
  .h-\[min\(56vh\,460px\)\] {
    height: min(56vh, 460px);
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .h-min {
    height: min-content;
  }
  .h-px {
    height: 1px;
  }
  .h-screen {
    height: 100vh;
  }
  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }
  .max-h-\[70vh\] {
    max-height: 70vh;
  }
  .max-h-\[360px\] {
    max-height: 360px;
  }
  .max-h-\[clamp\(180px\,36dvh\,360px\)\] {
    max-height: clamp(180px, 36dvh, 360px);
  }
  .max-h-\[min\(70vh\,560px\)\] {
    max-height: min(70vh, 560px);
  }
  .max-h-\[min\(70vh\,640px\)\] {
    max-height: min(70vh, 640px);
  }
  .min-h-0 {
    min-height: 0px;
  }
  .min-h-9\! {
    min-height: calc(var(--spacing) * 9) !important;
  }
  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }
  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }
  .min-h-\[22rem\] {
    min-height: 22rem;
  }
  .min-h-\[28px\] {
    min-height: 28px;
  }
  .min-h-\[32px\] {
    min-height: 32px;
  }
  .min-h-\[40px\] {
    min-height: 40px;
  }
  .min-h-\[40vh\] {
    min-height: 40vh;
  }
  .min-h-\[42px\] {
    min-height: 42px;
  }
  .min-h-\[44px\] {
    min-height: 44px;
  }
  .min-h-\[45px\] {
    min-height: 45px;
  }
  .min-h-\[48px\] {
    min-height: 48px;
  }
  .min-h-\[52px\] {
    min-height: 52px;
  }
  .min-h-\[54px\] {
    min-height: 54px;
  }
  .min-h-\[56px\] {
    min-height: 56px;
  }
  .min-h-\[100svh\] {
    min-height: 100svh;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .\!w-20 {
    width: calc(var(--spacing) * 20) !important;
  }
  .w-1\/2 {
    width: calc(1 / 2 * 100%);
  }
  .w-1\/3 {
    width: calc(1 / 3 * 100%);
  }
  .w-1\/4 {
    width: calc(1 / 4 * 100%);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\/5 {
    width: calc(2 / 5 * 100%);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-3\/4 {
    width: calc(3 / 4 * 100%);
  }
  .w-3\/5 {
    width: calc(3 / 5 * 100%);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-4\.5 {
    width: calc(var(--spacing) * 4.5);
  }
  .w-4\/5 {
    width: calc(4 / 5 * 100%);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-22 {
    width: calc(var(--spacing) * 22);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-\[1em\] {
    width: 1em;
  }
  .w-\[18px\] {
    width: 18px;
  }
  .w-\[68px\] {
    width: 68px;
  }
  .w-\[76px\] {
    width: 76px;
  }
  .w-\[240px\] {
    width: 240px;
  }
  .w-\[min\(92vw\,360px\)\] {
    width: min(92vw, 360px);
  }
  .w-\[min\(560px\,calc\(100vw-32px\)\)\] {
    width: min(560px, calc(100vw - 32px));
  }
  .w-\[min\(720px\,calc\(100vw-48px\)\)\] {
    width: min(720px, calc(100vw - 48px));
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .w-px {
    width: 1px;
  }
  .max-w-\(--ui-container\) {
    max-width: var(--ui-container);
  }
  .max-w-420 {
    max-width: calc(var(--spacing) * 420);
  }
  .max-w-\[24ch\] {
    max-width: 24ch;
  }
  .max-w-\[32ch\] {
    max-width: 32ch;
  }
  .max-w-\[38ch\] {
    max-width: 38ch;
  }
  .max-w-\[44ch\] {
    max-width: 44ch;
  }
  .max-w-\[46ch\] {
    max-width: 46ch;
  }
  .max-w-\[46vw\] {
    max-width: 46vw;
  }
  .max-w-\[60ch\] {
    max-width: 60ch;
  }
  .max-w-\[60vw\] {
    max-width: 60vw;
  }
  .max-w-\[70ch\] {
    max-width: 70ch;
  }
  .max-w-\[220px\] {
    max-width: 220px;
  }
  .max-w-\[300px\] {
    max-width: 300px;
  }
  .max-w-\[420px\] {
    max-width: 420px;
  }
  .max-w-\[520px\] {
    max-width: 520px;
  }
  .max-w-\[560px\] {
    max-width: 560px;
  }
  .max-w-\[620px\] {
    max-width: 620px;
  }
  .max-w-\[640px\] {
    max-width: 640px;
  }
  .max-w-\[680px\] {
    max-width: 680px;
  }
  .max-w-\[720px\] {
    max-width: 720px;
  }
  .max-w-\[760px\] {
    max-width: 760px;
  }
  .max-w-\[880px\] {
    max-width: 880px;
  }
  .max-w-\[1076px\] {
    max-width: 1076px;
  }
  .max-w-\[1080px\] {
    max-width: 1080px;
  }
  .max-w-\[min\(20rem\,100vw\)\] {
    max-width: min(20rem, 100vw);
  }
  .max-w-\[min\(26rem\,100vw\)\] {
    max-width: min(26rem, 100vw);
  }
  .max-w-brand {
    max-width: var(--brand-max);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-none {
    max-width: none;
  }
  .min-w-0 {
    min-width: 0px;
  }
  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }
  .min-w-\[2\.5rem\] {
    min-width: 2.5rem;
  }
  .min-w-\[18px\] {
    min-width: 18px;
  }
  .min-w-\[44px\] {
    min-width: 44px;
  }
  .min-w-\[56px\] {
    min-width: 56px;
  }
  .min-w-\[132px\] {
    min-width: 132px;
  }
  .min-w-\[240px\] {
    min-width: 240px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-none {
    flex: none;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .shrink-\[2\] {
    flex-shrink: 2;
  }
  .basis-\[200px\] {
    flex-basis: 200px;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1 {
    --tw-translate-y: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-rotate-90 {
    rotate: calc(90deg * -1);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .touch-none {
    touch-action: none;
  }
  .resize {
    resize: both;
  }
  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
  .\[scrollbar-width\:none\] {
    scrollbar-width: none;
  }
  .\[scrollbar-width\:thin\] {
    scrollbar-width: thin;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-disc {
    list-style-type: disc;
  }
  .list-none {
    list-style-type: none;
  }
  .appearance-none {
    appearance: none;
  }
  .columns-2 {
    columns: 2;
  }
  .columns-3 {
    columns: 3;
  }
  .break-inside-avoid {
    break-inside: avoid;
  }
  .\[grid-template-columns\:repeat\(1\,minmax\(0\,1fr\)\)\] {
    grid-template-columns: repeat(1,minmax(0,1fr));
  }
  .\[grid-template-columns\:repeat\(auto-fit\,minmax\(240px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-rows-\[0fr\] {
    grid-template-rows: 0fr;
  }
  .grid-rows-\[1fr\] {
    grid-template-rows: 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-center {
    place-items: center;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
  .gap-x-1 {
    column-gap: var(--spacing);
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-7 {
    column-gap: calc(var(--spacing) * 7);
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-x-10 {
    column-gap: calc(var(--spacing) * 10);
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }
  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }
  .gap-y-9 {
    row-gap: calc(var(--spacing) * 9);
  }
  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }
  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(.divide-line > :not(:last-child)) {
    border-color: var(--brand-line, #d9dce0);
  }
  .self-center {
    align-self: center;
  }
  .self-start {
    align-self: flex-start;
  }
  .justify-self-start {
    justify-self: flex-start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overscroll-contain {
    overscroll-behavior: contain;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .\[border-radius\:8px\] {
    border-radius: 8px;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-\[2px\] {
    border-radius: 2px;
  }
  .rounded-\[4px\] {
    border-radius: 4px;
  }
  .rounded-\[5px\] {
    border-radius: 5px;
  }
  .rounded-\[6px\] {
    border-radius: 6px;
  }
  .rounded-\[8px\] {
    border-radius: 8px;
  }
  .rounded-\[12px\] {
    border-radius: 12px;
  }
  .rounded-\[var\(--brand-radius-btn\,8px\)\] {
    border-radius: var(--brand-radius-btn,8px);
  }
  .rounded-brand {
    border-radius: var(--brand-radius, 2px);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-pill {
    border-radius: var(--brand-radius-pill, 999px);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-222 {
    border-style: var(--tw-border-style);
    border-width: 222px;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-\[\#d9d9d9\] {
    border-color: #d9d9d9;
  }
  .border-current {
    border-color: currentcolor;
  }
  .border-danger\/40 {
    border-color: var(--brand-danger, #b3261e);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--brand-danger, #b3261e) 40%, transparent);
    }
  }
  .border-danger\/50 {
    border-color: var(--brand-danger, #b3261e);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--brand-danger, #b3261e) 50%, transparent);
    }
  }
  .border-ink {
    border-color: var(--brand-ink, #141414);
  }
  .border-ink\/25 {
    border-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--brand-ink, #141414) 25%, transparent);
    }
  }
  .border-ink\/75 {
    border-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--brand-ink, #141414) 75%, transparent);
    }
  }
  .border-line {
    border-color: var(--brand-line, #d9dce0);
  }
  .border-line\/70 {
    border-color: var(--brand-line, #d9dce0);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--brand-line, #d9dce0) 70%, transparent);
    }
  }
  .border-surface {
    border-color: var(--brand-surface, #ffffff);
  }
  .border-surface\/25 {
    border-color: var(--brand-surface, #ffffff);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--brand-surface, #ffffff) 25%, transparent);
    }
  }
  .border-surface\/40 {
    border-color: var(--brand-surface, #ffffff);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--brand-surface, #ffffff) 40%, transparent);
    }
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white\/55 {
    border-color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .border-t-ink {
    border-top-color: var(--brand-ink, #141414);
  }
  .border-l-accent {
    border-left-color: var(--brand-accent, #2b3a52);
  }
  .border-l-danger {
    border-left-color: var(--brand-danger, #b3261e);
  }
  .border-l-ok {
    border-left-color: #1f7a4d;
  }
  .border-l-warn {
    border-left-color: #b8860b;
  }
  .bg-\[\#F9D3E6\] {
    background-color: #F9D3E6;
  }
  .bg-\[\#c4c4c4\] {
    background-color: #c4c4c4;
  }
  .bg-\[\#f6f6f6\] {
    background-color: #f6f6f6;
  }
  .bg-accent {
    background-color: var(--brand-accent, #2b3a52);
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/35 {
    background-color: color-mix(in srgb, #000 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 35%, transparent);
    }
  }
  .bg-black\/70 {
    background-color: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }
  .bg-black\/80 {
    background-color: color-mix(in srgb, #000 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }
  .bg-current {
    background-color: currentcolor;
  }
  .bg-danger {
    background-color: var(--brand-danger, #b3261e);
  }
  .bg-danger\/5 {
    background-color: var(--brand-danger, #b3261e);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-danger, #b3261e) 5%, transparent);
    }
  }
  .bg-danger\/10 {
    background-color: var(--brand-danger, #b3261e);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-danger, #b3261e) 10%, transparent);
    }
  }
  .bg-ink {
    background-color: var(--brand-ink, #141414);
  }
  .bg-ink\/35 {
    background-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-ink, #141414) 35%, transparent);
    }
  }
  .bg-ink\/40 {
    background-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-ink, #141414) 40%, transparent);
    }
  }
  .bg-ink\/50 {
    background-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-ink, #141414) 50%, transparent);
    }
  }
  .bg-ink\/75 {
    background-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-ink, #141414) 75%, transparent);
    }
  }
  .bg-ink\/85 {
    background-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-ink, #141414) 85%, transparent);
    }
  }
  .bg-ink\/95 {
    background-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-ink, #141414) 95%, transparent);
    }
  }
  .bg-ink\/\[0\.03\] {
    background-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-ink, #141414) 3%, transparent);
    }
  }
  .bg-line {
    background-color: var(--brand-line, #d9dce0);
  }
  .bg-ok {
    background-color: #1f7a4d;
  }
  .bg-ok\/10 {
    background-color: color-mix(in oklab, #1f7a4d 10%, transparent);
  }
  .bg-sky-50 {
    background-color: var(--color-sky-50);
  }
  .bg-surface {
    background-color: var(--brand-surface, #ffffff);
  }
  .bg-surface\/90 {
    background-color: var(--brand-surface, #ffffff);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-surface, #ffffff) 90%, transparent);
    }
  }
  .bg-surface\/95 {
    background-color: var(--brand-surface, #ffffff);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-surface, #ffffff) 95%, transparent);
    }
  }
  .bg-surface2 {
    background-color: var(--brand-surface-2, #f6f6f4);
  }
  .bg-surface2\! {
    background-color: var(--brand-surface-2, #f6f6f4) !important;
  }
  .bg-surface2\/40 {
    background-color: var(--brand-surface-2, #f6f6f4);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-surface-2, #f6f6f4) 40%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-warn\/10 {
    background-color: color-mix(in oklab, #b8860b 10%, transparent);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/15 {
    background-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .bg-white\/50 {
    background-color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .bg-white\/60 {
    background-color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .bg-white\/85 {
    background-color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .bg-white\/90 {
    background-color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .bg-white\/92 {
    background-color: color-mix(in srgb, #fff 92%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 92%, transparent);
    }
  }
  .bg-white\/95 {
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }
  .bg-linear-to-r {
    --tw-gradient-position: to right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-\[linear-gradient\(currentColor\,currentColor\)\] {
    background-image: linear-gradient(currentColor,currentColor);
  }
  .from-black\/65 {
    --tw-gradient-from: color-mix(in srgb, #000 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 65%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-surface {
    --tw-gradient-from: var(--brand-surface, #ffffff);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-60\% {
    --tw-gradient-from-position: 60%;
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .\[mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_104px\)\,transparent\)\] {
    mask-image: linear-gradient(to bottom,#000 calc(100% - 104px),transparent);
  }
  .bg-size-\[0\%_1px\] {
    background-size: 0% 1px;
  }
  .bg-position-\[0_100\%\] {
    background-position: 0 100%;
  }
  .bg-no-repeat {
    background-repeat: no-repeat;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-0 {
    padding: 0px;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\! {
    padding: calc(var(--spacing) * 2) !important;
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-px {
    padding: 1px;
  }
  .px-0 {
    padding-inline: 0px;
  }
  .px-1 {
    padding-inline: var(--spacing);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }
  .px-7\! {
    padding-inline: calc(var(--spacing) * 7) !important;
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }
  .py-0 {
    padding-block: 0px;
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-1\.5\! {
    padding-block: calc(var(--spacing) * 1.5) !important;
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-\[3px\] {
    padding-block: 3px;
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-6\! {
    padding-top: calc(var(--spacing) * 6) !important;
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-\[3px\] {
    padding-top: 3px;
  }
  .pt-\[20px\] {
    padding-top: 20px;
  }
  .pr-1 {
    padding-right: var(--spacing);
  }
  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }
  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pr-20 {
    padding-right: calc(var(--spacing) * 20);
  }
  .\[padding-bottom\:calc\(0\.75rem_\+_env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-3\! {
    padding-bottom: calc(var(--spacing) * 3) !important;
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }
  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
  .pb-\[78px\] {
    padding-bottom: 78px;
  }
  .pb-\[max\(1\.25rem\,env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .pb-\[max\(2\.5rem\,env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  }
  .pb-\[max\(12px\,env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .pl-0 {
    padding-left: 0px;
  }
  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-3\! {
    padding-left: calc(var(--spacing) * 3) !important;
  }
  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-4\! {
    padding-left: calc(var(--spacing) * 4) !important;
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-\[-0\.125em\] {
    vertical-align: -0.125em;
  }
  .align-middle {
    vertical-align: middle;
  }
  .align-super {
    vertical-align: super;
  }
  .font-\[inherit\] {
    font-family: inherit;
  }
  .font-display {
    font-family: var(--brand-font-display, 'Bodoni Moda', Didot, serif);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[1\.25rem\] {
    font-size: 1.25rem;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11\.5px\] {
    font-size: 11.5px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[17px\] {
    font-size: 17px;
  }
  .text-\[18px\] {
    font-size: 18px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[24px\] {
    font-size: 24px;
  }
  .text-\[26px\] {
    font-size: 26px;
  }
  .text-\[32px\] {
    font-size: 32px;
  }
  .text-\[clamp\(18px\,2vw\,22px\)\] {
    font-size: clamp(18px, 2vw, 22px);
  }
  .text-\[clamp\(20px\,2\.2vw\,24px\)\] {
    font-size: clamp(20px, 2.2vw, 24px);
  }
  .text-\[clamp\(20px\,2\.4vw\,28px\)\] {
    font-size: clamp(20px, 2.4vw, 28px);
  }
  .text-\[clamp\(24px\,3vw\,34px\)\] {
    font-size: clamp(24px, 3vw, 34px);
  }
  .text-\[clamp\(24px\,3vw\,36px\)\] {
    font-size: clamp(24px, 3vw, 36px);
  }
  .text-\[clamp\(26px\,3\.4vw\,40px\)\] {
    font-size: clamp(26px, 3.4vw, 40px);
  }
  .text-\[clamp\(30px\,3\.6vw\,58px\)\] {
    font-size: clamp(30px, 3.6vw, 58px);
  }
  .text-\[length\:inherit\] {
    font-size: inherit;
  }
  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .leading-4\.5 {
    --tw-leading: calc(var(--spacing) * 4.5);
    line-height: calc(var(--spacing) * 4.5);
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .leading-\[1\.1\] {
    --tw-leading: 1.1;
    line-height: 1.1;
  }
  .leading-\[1\.2\] {
    --tw-leading: 1.2;
    line-height: 1.2;
  }
  .leading-\[1\.3\] {
    --tw-leading: 1.3;
    line-height: 1.3;
  }
  .leading-\[1\.4\] {
    --tw-leading: 1.4;
    line-height: 1.4;
  }
  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }
  .leading-\[1\.06\] {
    --tw-leading: 1.06;
    line-height: 1.06;
  }
  .leading-\[1\.6\] {
    --tw-leading: 1.6;
    line-height: 1.6;
  }
  .leading-\[1\.15\] {
    --tw-leading: 1.15;
    line-height: 1.15;
  }
  .leading-\[1\.18\] {
    --tw-leading: 1.18;
    line-height: 1.18;
  }
  .leading-\[1\.25\] {
    --tw-leading: 1.25;
    line-height: 1.25;
  }
  .leading-\[1\.31\] {
    --tw-leading: 1.31;
    line-height: 1.31;
  }
  .leading-\[1\.55\] {
    --tw-leading: 1.55;
    line-height: 1.55;
  }
  .leading-\[1\.65\] {
    --tw-leading: 1.65;
    line-height: 1.65;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-\[400\] {
    --tw-font-weight: 400;
    font-weight: 400;
  }
  .font-\[500\] {
    --tw-font-weight: 500;
    font-weight: 500;
  }
  .font-\[600\] {
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .font-bold {
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .font-bold\! {
    --tw-font-weight: 600 !important;
    font-weight: 600 !important;
  }
  .font-medium {
    --tw-font-weight: 400;
    font-weight: 400;
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: 500;
    font-weight: 500;
  }
  .tracking-\[-\.02em\] {
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
  }
  .tracking-\[-0\.01em\] {
    --tw-tracking: -0.01em;
    letter-spacing: -0.01em;
  }
  .tracking-\[\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }
  .tracking-\[\.14em\] {
    --tw-tracking: .14em;
    letter-spacing: .14em;
  }
  .tracking-\[0\.01em\] {
    --tw-tracking: 0.01em;
    letter-spacing: 0.01em;
  }
  .tracking-\[0\.2em\] {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .tracking-\[0\.04em\] {
    --tw-tracking: 0.04em;
    letter-spacing: 0.04em;
  }
  .tracking-\[0\.5px\] {
    --tw-tracking: 0.5px;
    letter-spacing: 0.5px;
  }
  .tracking-\[0\.06em\] {
    --tw-tracking: 0.06em;
    letter-spacing: 0.06em;
  }
  .tracking-\[0\.08em\] {
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
  }
  .tracking-\[0\.09em\] {
    --tw-tracking: 0.09em;
    letter-spacing: 0.09em;
  }
  .tracking-\[0\.12em\] {
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
  }
  .tracking-\[0\.14em\] {
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
  }
  .tracking-\[0\.24em\] {
    --tw-tracking: 0.24em;
    letter-spacing: 0.24em;
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-balance {
    text-wrap: balance;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-accent {
    color: var(--brand-accent, #2b3a52);
  }
  .text-accent\! {
    color: var(--brand-accent, #2b3a52) !important;
  }
  .text-accent-ink {
    color: var(--brand-accent-ink, #ffffff);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-danger {
    color: var(--brand-danger, #b3261e);
  }
  .text-inherit {
    color: inherit;
  }
  .text-ink {
    color: var(--brand-ink, #141414);
  }
  .text-ink\! {
    color: var(--brand-ink, #141414) !important;
  }
  .text-ink\/55 {
    color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--brand-ink, #141414) 55%, transparent);
    }
  }
  .text-ink\/80 {
    color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--brand-ink, #141414) 80%, transparent);
    }
  }
  .text-muted {
    color: var(--brand-muted, #5e6672);
  }
  .text-muted\! {
    color: var(--brand-muted, #5e6672) !important;
  }
  .text-muted\/60 {
    color: var(--brand-muted, #5e6672);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--brand-muted, #5e6672) 60%, transparent);
    }
  }
  .text-ok {
    color: #1f7a4d;
  }
  .text-surface {
    color: var(--brand-surface, #ffffff);
  }
  .text-surface\/85 {
    color: var(--brand-surface, #ffffff);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--brand-surface, #ffffff) 85%, transparent);
    }
  }
  .text-warn {
    color: #b8860b;
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/85 {
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .underline {
    text-decoration-line: underline;
  }
  .underline\! {
    text-decoration-line: underline !important;
  }
  .decoration-current\/40 {
    text-decoration-color: currentcolor;
    @supports (color: color-mix(in lab, red, red)) {
      text-decoration-color: color-mix(in oklab, currentcolor 40%, transparent);
    }
  }
  .decoration-line {
    text-decoration-color: var(--brand-line, #d9dce0);
  }
  .decoration-from-font {
    text-decoration-thickness: from-font;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .underline-offset-\[3px\] {
    text-underline-offset: 3px;
  }
  .accent-\[var\(--brand-accent\)\] {
    accent-color: var(--brand-accent);
  }
  .accent-\[var\(--brand-ink\)\] {
    accent-color: var(--brand-ink);
  }
  .opacity-\(--fade\) {
    opacity: var(--fade);
  }
  .opacity-\(--v\) {
    opacity: var(--v);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-45 {
    opacity: 45%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .opacity-\[\.35\] {
    opacity: .35;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[-24px_0_60px_rgba\(0\,0\,0\,0\.18\)\] {
    --tw-shadow: -24px 0 60px var(--tw-shadow-color, rgba(0,0,0,0.18));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_-4px_24px_rgba\(0\,0\,0\,0\.12\)\] {
    --tw-shadow: 0 -4px 24px var(--tw-shadow-color, rgba(0,0,0,0.12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_24px_rgba\(0\,0\,0\,\.08\)\] {
    --tw-shadow: 0 0 24px var(--tw-shadow-color, rgba(0,0,0,.08));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_2px_12px_rgba\(0\,0\,0\,0\.05\)\] {
    --tw-shadow: 0 2px 12px var(--tw-shadow-color, rgba(0,0,0,0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_4px_16px_rgba\(0\,0\,0\,0\.16\)\] {
    --tw-shadow: 0 4px 16px var(--tw-shadow-color, rgba(0,0,0,0.16));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_6px_18px_-6px_rgba\(0\,0\,0\,0\.45\)\] {
    --tw-shadow: 0 6px 18px -6px var(--tw-shadow-color, rgba(0,0,0,0.45));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_8px_32px_rgba\(0\,0\,0\,0\.18\)\] {
    --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(0,0,0,0.18));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_10px_30px_rgb\(0_0_0\/22\%\)\] {
    --tw-shadow: 0 10px 30px var(--tw-shadow-color, rgb(0 0 0/22%));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_18px_40px_-16px_rgba\(20\,20\,20\,0\.22\)\] {
    --tw-shadow: 0 18px 40px -16px var(--tw-shadow-color, rgba(20,20,20,0.22));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[3px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-black\/25 {
    --tw-ring-color: color-mix(in srgb, #000 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
  }
  .ring-danger {
    --tw-ring-color: var(--brand-danger, #b3261e);
  }
  .ring-ink {
    --tw-ring-color: var(--brand-ink, #141414);
  }
  .ring-ink\/\[0\.08\] {
    --tw-ring-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--brand-ink, #141414) 8%, transparent);
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[background-size\] {
    transition-property: background-size;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[border-color\,box-shadow\] {
    transition-property: border-color,box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[bottom\] {
    transition-property: bottom;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[color\,transform\] {
    transition-property: color,transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[grid-template-rows\,opacity\,visibility\] {
    transition-property: grid-template-rows,opacity,visibility;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[grid-template-rows\,opacity\] {
    transition-property: grid-template-rows,opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[opacity\,transform\,visibility\] {
    transition-property: opacity,transform,visibility;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[opacity\,transform\] {
    transition-property: opacity,transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[translate\,opacity\] {
    transition-property: translate,opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-none {
    transition-property: none;
  }
  .duration-0 {
    --tw-duration: 0ms;
    transition-duration: 0ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .ease-\[cubic-bezier\(\.22\,1\,\.36\,1\)\] {
    --tw-ease: cubic-bezier(.22,1,.36,1);
    transition-timing-function: cubic-bezier(.22,1,.36,1);
  }
  .ease-\[cubic-bezier\(0\.2\,0\.8\,0\.2\,1\)\] {
    --tw-ease: cubic-bezier(0.2,0.8,0.2,1);
    transition-timing-function: cubic-bezier(0.2,0.8,0.2,1);
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .will-change-transform {
    will-change: transform;
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[-webkit-mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_104px\)\,transparent\)\] {
    -webkit-mask-image: linear-gradient(to bottom,#000 calc(100% - 104px),transparent);
  }
  .\[credit-note\:alert\] {
    credit-note: alert;
  }
  .\[de\:Elk\] {
    de: Elk;
  }
  .\[de\:Spiegelglans\] {
    de: Spiegelglans;
  }
  .\[de\:stuk\] {
    de: stuk;
  }
  .\[fr\:Spiegelglans\] {
    fr: Spiegelglans;
  }
  .\[lang\:文本\] {
    lang: 文本;
  }
  .\[mail\:outbox\] {
    mail: outbox;
  }
  .\[mail\:ses\] {
    mail: ses;
  }
  .\[mail\:smtp\] {
    mail: smtp;
  }
  .\[mail\:template\] {
    mail: template;
  }
  .\[month-lock\:allow-external\] {
    month-lock: allow-external;
  }
  .\[month-lock\:reject\] {
    month-lock: reject;
  }
  .\[month-lock\:skip\] {
    month-lock: skip;
  }
  .\[payments\:alert\] {
    payments: alert;
  }
  .\[payments\:startup\] {
    payments: startup;
  }
  .\[payments\:webhook\] {
    payments: webhook;
  }
  .\[preflight\:sweep\] {
    preflight: sweep;
  }
  .\[refund\:alert\] {
    refund: alert;
  }
  .\[shop-cred\:startup\] {
    shop-cred: startup;
  }
  .\[split\:alert\] {
    split: alert;
  }
  .ring-inset {
    --tw-ring-inset: inset;
  }
  .group-open\:rotate-45:is(:where(.group):is([open], :popover-open, :open) *) {
    rotate: 45deg;
  }
  .group-focus-within\/ff\:top-\[14px\]:is(:where(.group\/ff):focus-within *) {
    top: 14px;
  }
  .group-focus-within\/ff\:text-\[12px\]:is(:where(.group\/ff):focus-within *) {
    font-size: 12px;
  }
  .group-focus-within\/nav\:visible:is(:where(.group\/nav):focus-within *) {
    visibility: visible;
  }
  .group-focus-within\/nav\:translate-y-0:is(:where(.group\/nav):focus-within *) {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .group-focus-within\/nav\:rotate-180:is(:where(.group\/nav):focus-within *) {
    rotate: 180deg;
  }
  .group-focus-within\/nav\:opacity-100:is(:where(.group\/nav):focus-within *) {
    opacity: 100%;
  }
  @media (hover: hover) {
    .group-hover\:translate-y-0\.5:is(:where(.group):hover *) {
      --tw-translate-y: calc(var(--spacing) * 0.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .group-hover\:scale-\[1\.03\]:is(:where(.group):hover *) {
      scale: 1.03;
    }
    .group-hover\:scale-\[1\.06\]:is(:where(.group):hover *) {
      scale: 1.06;
    }
    .group-hover\:bg-ink:is(:where(.group):hover *) {
      background-color: var(--brand-ink, #141414);
    }
    .group-hover\:bg-white\/25:is(:where(.group):hover *) {
      background-color: color-mix(in srgb, #fff 25%, transparent);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-white\/25:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-white) 25%, transparent);
      }
    }
    .group-hover\:text-ink:is(:where(.group):hover *) {
      color: var(--brand-ink, #141414);
    }
    .group-hover\:underline:is(:where(.group):hover *) {
      text-decoration-line: underline;
    }
    .group-hover\:opacity-0:is(:where(.group):hover *) {
      opacity: 0%;
    }
    .group-hover\/dl\:translate-x-0:is(:where(.group\/dl):hover *) {
      --tw-translate-x: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .group-hover\/dl\:opacity-100:is(:where(.group\/dl):hover *) {
      opacity: 100%;
    }
    .group-hover\/nav\:visible:is(:where(.group\/nav):hover *) {
      visibility: visible;
    }
    .group-hover\/nav\:translate-y-0:is(:where(.group\/nav):hover *) {
      --tw-translate-y: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .group-hover\/nav\:rotate-180:is(:where(.group\/nav):hover *) {
      rotate: 180deg;
    }
    .group-hover\/nav\:opacity-100:is(:where(.group\/nav):hover *) {
      opacity: 100%;
    }
  }
  .group-focus-visible\:outline:is(:where(.group):focus-visible *) {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .group-focus-visible\:outline-2:is(:where(.group):focus-visible *) {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  .group-focus-visible\:outline-offset-2:is(:where(.group):focus-visible *) {
    outline-offset: 2px;
  }
  .group-focus-visible\:outline-accent:is(:where(.group):focus-visible *) {
    outline-color: var(--brand-accent, #2b3a52);
  }
  .group-has-\[\[data-address-autocomplete\=google\]\]\/ff\:top-\[14px\]:is(:where(.group\/ff):has(:is([data-address-autocomplete=google])) *) {
    top: 14px;
  }
  .group-has-\[\[data-address-autocomplete\=google\]\]\/ff\:text-\[12px\]:is(:where(.group\/ff):has(:is([data-address-autocomplete=google])) *) {
    font-size: 12px;
  }
  .placeholder\:text-muted::placeholder {
    color: var(--brand-muted, #5e6672);
  }
  .backdrop\:bg-ink\/40::backdrop {
    background-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-ink, #141414) 40%, transparent);
    }
  }
  .before\:absolute::before {
    content: var(--tw-content);
    position: absolute;
  }
  .before\:inset-1::before {
    content: var(--tw-content);
    inset: var(--spacing);
  }
  .before\:inset-x-0::before {
    content: var(--tw-content);
    inset-inline: 0px;
  }
  .before\:-top-\[10px\]::before {
    content: var(--tw-content);
    top: calc(10px * -1);
  }
  .before\:-z-10::before {
    content: var(--tw-content);
    z-index: calc(10 * -1);
  }
  .before\:h-\[10px\]::before {
    content: var(--tw-content);
    height: 10px;
  }
  .before\:rounded-\[inherit\]::before {
    content: var(--tw-content);
    border-radius: inherit;
  }
  .before\:bg-surface2::before {
    content: var(--tw-content);
    background-color: var(--brand-surface-2, #f6f6f4);
  }
  .before\:opacity-0::before {
    content: var(--tw-content);
    opacity: 0%;
  }
  .before\:transition-opacity::before {
    content: var(--tw-content);
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .before\:content-\[\'\'\]::before {
    --tw-content: '';
    content: var(--tw-content);
  }
  .after\:pointer-events-none::after {
    content: var(--tw-content);
    pointer-events: none;
  }
  .after\:absolute::after {
    content: var(--tw-content);
    position: absolute;
  }
  .after\:-inset-1::after {
    content: var(--tw-content);
    inset: calc(var(--spacing) * -1);
  }
  .after\:inset-x-0::after {
    content: var(--tw-content);
    inset-inline: 0px;
  }
  .after\:bottom-0\.5::after {
    content: var(--tw-content);
    bottom: calc(var(--spacing) * 0.5);
  }
  .after\:h-px::after {
    content: var(--tw-content);
    height: 1px;
  }
  .after\:origin-left::after {
    content: var(--tw-content);
    transform-origin: 0;
  }
  .after\:scale-x-0::after {
    content: var(--tw-content);
    --tw-scale-x: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .after\:bg-ink::after {
    content: var(--tw-content);
    background-color: var(--brand-ink, #141414);
  }
  .after\:transition-transform::after {
    content: var(--tw-content);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .after\:duration-300::after {
    content: var(--tw-content);
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .after\:ease-\[cubic-bezier\(0\.2\,0\.8\,0\.2\,1\)\]::after {
    content: var(--tw-content);
    --tw-ease: cubic-bezier(0.2,0.8,0.2,1);
    transition-timing-function: cubic-bezier(0.2,0.8,0.2,1);
  }
  .after\:content-\[\'\'\]::after {
    --tw-content: '';
    content: var(--tw-content);
  }
  .group-focus-within\/nav\:after\:scale-x-100:is(:where(.group\/nav):focus-within *)::after {
    content: var(--tw-content);
    --tw-scale-x: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  @media (hover: hover) {
    .group-hover\/nav\:after\:scale-x-100:is(:where(.group\/nav):hover *)::after {
      content: var(--tw-content);
      --tw-scale-x: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .first\:pt-0:first-child {
    padding-top: 0px;
  }
  .last\:mb-0:last-child {
    margin-bottom: 0px;
  }
  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .last\:pb-0:last-child {
    padding-bottom: 0px;
  }
  .focus-within\:border-ink:focus-within {
    border-color: var(--brand-ink, #141414);
  }
  .focus-within\:text-ink:focus-within {
    color: var(--brand-ink, #141414);
  }
  @media (hover: hover) {
    .hover\:translate-x-0\.5:hover {
      --tw-translate-x: calc(var(--spacing) * 0.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .hover\:scale-100:hover {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .hover\:border-\[\#b3b3b3\]:hover {
      border-color: #b3b3b3;
    }
    .hover\:border-\[\#d9d9d9\]\!:hover {
      border-color: #d9d9d9 !important;
    }
    .hover\:border-accent:hover {
      border-color: var(--brand-accent, #2b3a52);
    }
    .hover\:border-ink:hover {
      border-color: var(--brand-ink, #141414);
    }
    .hover\:border-muted:hover {
      border-color: var(--brand-muted, #5e6672);
    }
    .hover\:bg-\[\#f6f6f6\]:hover {
      background-color: #f6f6f6;
    }
    .hover\:bg-danger\/5:hover {
      background-color: var(--brand-danger, #b3261e);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-danger\/5:hover {
        background-color: color-mix(in oklab, var(--brand-danger, #b3261e) 5%, transparent);
      }
    }
    .hover\:bg-ink:hover {
      background-color: var(--brand-ink, #141414);
    }
    .hover\:bg-ink\/\[0\.02\]:hover {
      background-color: var(--brand-ink, #141414);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-ink\/\[0\.02\]:hover {
        background-color: color-mix(in oklab, var(--brand-ink, #141414) 2%, transparent);
      }
    }
    .hover\:bg-line:hover {
      background-color: var(--brand-line, #d9dce0);
    }
    .hover\:bg-muted:hover {
      background-color: var(--brand-muted, #5e6672);
    }
    .hover\:bg-surface\/10:hover {
      background-color: var(--brand-surface, #ffffff);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-surface\/10:hover {
        background-color: color-mix(in oklab, var(--brand-surface, #ffffff) 10%, transparent);
      }
    }
    .hover\:bg-surface\/15:hover {
      background-color: var(--brand-surface, #ffffff);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-surface\/15:hover {
        background-color: color-mix(in oklab, var(--brand-surface, #ffffff) 15%, transparent);
      }
    }
    .hover\:bg-surface2:hover {
      background-color: var(--brand-surface-2, #f6f6f4);
    }
    .hover\:bg-transparent:hover {
      background-color: transparent;
    }
    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }
    .hover\:bg-white\/80:hover {
      background-color: color-mix(in srgb, #fff 80%, transparent);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/80:hover {
        background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
      }
    }
    .hover\:bg-size-\[100\%_1px\]:hover {
      background-size: 100% 1px;
    }
    .hover\:text-accent:hover {
      color: var(--brand-accent, #2b3a52);
    }
    .hover\:text-danger:hover {
      color: var(--brand-danger, #b3261e);
    }
    .hover\:text-ink:hover {
      color: var(--brand-ink, #141414);
    }
    .hover\:text-muted:hover {
      color: var(--brand-muted, #5e6672);
    }
    .hover\:text-white:hover {
      color: var(--color-white);
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
    .hover\:underline\!:hover {
      text-decoration-line: underline !important;
    }
    .hover\:decoration-current:hover {
      text-decoration-color: currentcolor;
    }
    .hover\:decoration-ink:hover {
      text-decoration-color: var(--brand-ink, #141414);
    }
    .hover\:opacity-60:hover {
      opacity: 60%;
    }
    .hover\:opacity-80:hover {
      opacity: 80%;
    }
    .hover\:opacity-90:hover {
      opacity: 90%;
    }
    .hover\:opacity-100:hover {
      opacity: 100%;
    }
    .hover\:shadow-\[0_2px_12px_rgba\(0\,0\,0\,0\.05\)\]:hover {
      --tw-shadow: 0 2px 12px var(--tw-shadow-color, rgba(0,0,0,0.05));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .hover\:after\:scale-x-100:hover::after {
      content: var(--tw-content);
      --tw-scale-x: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .focus\:border-\[\#1773b0\]:focus {
    border-color: #1773b0;
  }
  .focus\:border-\[\#d9d9d9\]\!:focus {
    border-color: #d9d9d9 !important;
  }
  .focus\:bg-surface2:focus {
    background-color: var(--brand-surface-2, #f6f6f4);
  }
  .focus\:shadow-none:focus {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus\:ring-\[\#1773b0\]:focus {
    --tw-ring-color: #1773b0;
  }
  .focus\:ring-\[\#d9d9d9\]\!:focus {
    --tw-ring-color: #d9d9d9 !important;
  }
  .focus\:ring-ink\/30:focus {
    --tw-ring-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--brand-ink, #141414) 30%, transparent);
    }
  }
  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  .focus-visible\:border-ink:focus-visible {
    border-color: var(--brand-ink, #141414);
  }
  .focus-visible\:text-danger:focus-visible {
    color: var(--brand-danger, #b3261e);
  }
  .focus-visible\:underline:focus-visible {
    text-decoration-line: underline;
  }
  .focus-visible\:underline-offset-4:focus-visible {
    text-underline-offset: 4px;
  }
  .focus-visible\:shadow-none:focus-visible {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus-visible\:ring-accent:focus-visible {
    --tw-ring-color: var(--brand-accent, #2b3a52);
  }
  .focus-visible\:outline:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  .focus-visible\:outline-offset-1:focus-visible {
    outline-offset: 1px;
  }
  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }
  .focus-visible\:outline-offset-\[-2px\]:focus-visible {
    outline-offset: -2px;
  }
  .focus-visible\:outline-accent:focus-visible {
    outline-color: var(--brand-accent, #2b3a52);
  }
  .focus-visible\:outline-ink:focus-visible {
    outline-color: var(--brand-ink, #141414);
  }
  .focus-visible\:outline-surface:focus-visible {
    outline-color: var(--brand-surface, #ffffff);
  }
  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  .focus-visible\:ring-inset:focus-visible {
    --tw-ring-inset: inset;
  }
  .focus-visible\:after\:scale-x-100:focus-visible::after {
    content: var(--tw-content);
    --tw-scale-x: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .active\:scale-90:active {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .active\:bg-surface:active {
    background-color: var(--brand-surface, #ffffff);
  }
  .active\:bg-surface2:active {
    background-color: var(--brand-surface-2, #f6f6f4);
  }
  .active\:text-ink:active {
    color: var(--brand-ink, #141414);
  }
  @media (hover: hover) {
    .enabled\:hover\:before\:opacity-100:enabled:hover::before {
      content: var(--tw-content);
      opacity: 100%;
    }
  }
  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }
  .disabled\:text-muted\/50:disabled {
    color: var(--brand-muted, #5e6672);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--brand-muted, #5e6672) 50%, transparent);
    }
  }
  .disabled\:opacity-30:disabled {
    opacity: 30%;
  }
  .disabled\:opacity-40:disabled {
    opacity: 40%;
  }
  .disabled\:opacity-50:disabled {
    opacity: 50%;
  }
  .disabled\:opacity-60:disabled {
    opacity: 60%;
  }
  @media (hover: hover) {
    .disabled\:hover\:border-line:disabled:hover {
      border-color: var(--brand-line, #d9dce0);
    }
    .disabled\:hover\:bg-transparent:disabled:hover {
      background-color: transparent;
    }
  }
  .disabled\:active\:scale-100:disabled:active {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .has-\[\:checked\]\:border-accent:has(:is(:checked)) {
    border-color: var(--brand-accent, #2b3a52);
  }
  .has-\[\:checked\]\:bg-surface2:has(:is(:checked)) {
    background-color: var(--brand-surface-2, #f6f6f4);
  }
  .aria-\[current\=true\]\:bg-size-\[100\%_2px\][aria-current="true"] {
    background-size: 100% 2px;
  }
  .aria-\[invalid\=true\]\:border-danger[aria-invalid="true"] {
    border-color: var(--brand-danger, #b3261e);
  }
  .aria-\[invalid\=true\]\:border-danger\![aria-invalid="true"] {
    border-color: var(--brand-danger, #b3261e) !important;
  }
  .aria-\[invalid\=true\]\:ring-danger\![aria-invalid="true"] {
    --tw-ring-color: var(--brand-danger, #b3261e) !important;
  }
  .aria-\[invalid\=true\]\:ring-danger\/20\![aria-invalid="true"] {
    --tw-ring-color: var(--brand-danger, #b3261e) !important;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--brand-danger, #b3261e) 20%, transparent) !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:animate-none {
      animation: none;
    }
    .motion-reduce\:transition-none {
      transition-property: none;
    }
    .motion-reduce\:duration-0 {
      --tw-duration: 0ms;
      transition-duration: 0ms;
    }
    @media (hover: hover) {
      .motion-reduce\:group-hover\:scale-100:is(:where(.group):hover *) {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
    .motion-reduce\:after\:transition-none::after {
      content: var(--tw-content);
      transition-property: none;
    }
    @media (hover: hover) {
      .motion-reduce\:hover\:translate-x-0:hover {
        --tw-translate-x: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  @media (width >= 40rem) {
    .sm\:inset-4 {
      inset: calc(var(--spacing) * 4);
    }
    .sm\:inset-6 {
      inset: calc(var(--spacing) * 6);
    }
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }
    .sm\:mt-0 {
      margin-top: 0px;
    }
    .sm\:mt-4 {
      margin-top: calc(var(--spacing) * 4);
    }
    .sm\:mr-0 {
      margin-right: 0px;
    }
    .sm\:-ml-3 {
      margin-left: calc(var(--spacing) * -3);
    }
    .sm\:flex {
      display: flex;
    }
    .sm\:inline {
      display: inline;
    }
    .sm\:inline-flex {
      display: inline-flex;
    }
    .sm\:aspect-\[3\/2\] {
      aspect-ratio: 3/2;
    }
    .sm\:h-12 {
      height: calc(var(--spacing) * 12);
    }
    .sm\:w-24 {
      width: calc(var(--spacing) * 24);
    }
    .sm\:w-\[85px\] {
      width: 85px;
    }
    .sm\:w-\[104px\] {
      width: 104px;
    }
    .sm\:\[grid-template-columns\:repeat\(2\,minmax\(0\,1fr\)\)\] {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .sm\:\[grid-template-columns\:repeat\(3\,minmax\(0\,1fr\)\)\] {
      grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:flex-row {
      flex-direction: row;
    }
    .sm\:flex-wrap {
      flex-wrap: wrap;
    }
    .sm\:items-center {
      align-items: center;
    }
    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
    .sm\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
    .sm\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }
    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
    .sm\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }
    .sm\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }
    .sm\:pb-\[clamp\(28px\,5vw\,64px\)\] {
      padding-bottom: clamp(28px, 5vw, 64px);
    }
    .sm\:text-left {
      text-align: left;
    }
    .sm\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    .sm\:text-\[16px\] {
      font-size: 16px;
    }
    .sm\:text-\[30px\] {
      font-size: 30px;
    }
    .sm\:text-\[32px\] {
      font-size: 32px;
    }
    .sm\:text-\[44px\] {
      font-size: 44px;
    }
  }
  @media (width >= 48rem) {
    .md\:mt-6 {
      margin-top: calc(var(--spacing) * 6);
    }
    .md\:mb-5 {
      margin-bottom: calc(var(--spacing) * 5);
    }
    .md\:flex {
      display: flex;
    }
    .md\:hidden {
      display: none;
    }
    .md\:inline-flex {
      display: inline-flex;
    }
    .md\:h-14 {
      height: calc(var(--spacing) * 14);
    }
    .md\:h-\[360px\] {
      height: 360px;
    }
    .md\:h-\[480px\] {
      height: 480px;
    }
    .md\:h-\[640px\] {
      height: 640px;
    }
    .md\:h-\[Npx\] {
      height: Npx;
    }
    .md\:h-\[…\] {
      height: …;
    }
    .md\:w-1\/2 {
      width: calc(1 / 2 * 100%);
    }
    .md\:w-14 {
      width: calc(var(--spacing) * 14);
    }
    .md\:w-\[55\%\] {
      width: 55%;
    }
    .md\:w-\[60\%\] {
      width: 60%;
    }
    .md\:flex-1 {
      flex: 1;
    }
    .md\:shrink-0 {
      flex-shrink: 0;
    }
    .md\:flex-row {
      flex-direction: row;
    }
    .md\:flex-row-reverse {
      flex-direction: row-reverse;
    }
    .md\:flex-nowrap {
      flex-wrap: nowrap;
    }
    .md\:items-center {
      align-items: center;
    }
    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
    .md\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }
    .md\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }
    .md\:rounded-\[6px\] {
      border-radius: 6px;
    }
    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
    .md\:py-18 {
      padding-block: calc(var(--spacing) * 18);
    }
    .md\:pt-7 {
      padding-top: calc(var(--spacing) * 7);
    }
    .md\:text-\[15px\] {
      font-size: 15px;
    }
    .md\:text-\[16px\] {
      font-size: 16px;
    }
    .md\:text-\[22px\] {
      font-size: 22px;
    }
    .md\:text-\[24px\] {
      font-size: 24px;
    }
  }
  @media (width >= 64rem) {
    .lg\:visible {
      visibility: visible;
    }
    .lg\:sticky {
      position: sticky;
    }
    .lg\:top-0 {
      top: 0px;
    }
    .lg\:top-6 {
      top: calc(var(--spacing) * 6);
    }
    .lg\:top-\[calc\(var\(--sf-header-h\,89px\)\+24px\)\] {
      top: calc(var(--sf-header-h,89px) + 24px);
    }
    .lg\:order-first {
      order: -9999;
    }
    .lg\:order-last {
      order: 9999;
    }
    .lg\:mt-0 {
      margin-top: 0px;
    }
    .lg\:mt-4 {
      margin-top: calc(var(--spacing) * 4);
    }
    .lg\:mt-6 {
      margin-top: calc(var(--spacing) * 6);
    }
    .lg\:mt-7 {
      margin-top: calc(var(--spacing) * 7);
    }
    .lg\:mb-0 {
      margin-bottom: 0px;
    }
    .lg\:block {
      display: block;
    }
    .lg\:flex {
      display: flex;
    }
    .lg\:hidden {
      display: none;
    }
    .lg\:inline-flex {
      display: inline-flex;
    }
    .lg\:h-11 {
      height: calc(var(--spacing) * 11);
    }
    .lg\:h-12 {
      height: calc(var(--spacing) * 12);
    }
    .lg\:h-14 {
      height: calc(var(--spacing) * 14);
    }
    .lg\:h-22 {
      height: calc(var(--spacing) * 22);
    }
    .lg\:h-\[88px\] {
      height: 88px;
    }
    .lg\:h-auto {
      height: auto;
    }
    .lg\:max-h-\[92vh\] {
      max-height: 92vh;
    }
    .lg\:min-h-\[40px\] {
      min-height: 40px;
    }
    .lg\:min-h-\[calc\(100vh-89px\)\] {
      min-height: calc(100vh - 89px);
    }
    .lg\:w-20 {
      width: calc(var(--spacing) * 20);
    }
    .lg\:w-\[58\%\] {
      width: 58%;
    }
    .lg\:w-\[216px\] {
      width: 216px;
    }
    .lg\:w-\[300px\] {
      width: 300px;
    }
    .lg\:w-\[320px\] {
      width: 320px;
    }
    .lg\:w-\[380px\] {
      width: 380px;
    }
    .lg\:max-w-\[500px\] {
      max-width: 500px;
    }
    .lg\:max-w-\[580px\] {
      max-width: 580px;
    }
    .lg\:max-w-\[648px\] {
      max-width: 648px;
    }
    .lg\:max-w-none {
      max-width: none;
    }
    .lg\:min-w-0 {
      min-width: 0px;
    }
    .lg\:flex-1 {
      flex: 1;
    }
    .lg\:shrink-0 {
      flex-shrink: 0;
    }
    .lg\:\[grid-template-columns\:minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
    .lg\:\[grid-template-columns\:repeat\(4\,minmax\(0\,1fr\)\)\] {
      grid-template-columns: repeat(4,minmax(0,1fr));
    }
    .lg\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .lg\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
      grid-template-columns: minmax(0,1fr) auto;
    }
    .lg\:grid-rows-\[1fr\] {
      grid-template-rows: 1fr;
    }
    .lg\:flex-col {
      flex-direction: column;
    }
    .lg\:flex-row {
      flex-direction: row;
    }
    .lg\:items-start {
      align-items: flex-start;
    }
    .lg\:items-stretch {
      align-items: stretch;
    }
    .lg\:justify-between {
      justify-content: space-between;
    }
    .lg\:justify-end {
      justify-content: flex-end;
    }
    .lg\:gap-0 {
      gap: 0px;
    }
    .lg\:gap-1 {
      gap: var(--spacing);
    }
    .lg\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }
    .lg\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
    .lg\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
    .lg\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }
    .lg\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }
    .lg\:gap-20 {
      gap: calc(var(--spacing) * 20);
    }
    .lg\:overflow-visible {
      overflow: visible;
    }
    .lg\:rounded-\[8px\] {
      border-radius: 8px;
    }
    .lg\:rounded-none {
      border-radius: 0;
    }
    .lg\:border-0 {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
    .lg\:border-b-0 {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
    .lg\:border-l {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
    .lg\:bg-surface {
      background-color: var(--brand-surface, #ffffff);
    }
    .lg\:bg-transparent {
      background-color: transparent;
    }
    .lg\:p-0 {
      padding: 0px;
    }
    .lg\:px-0 {
      padding-inline: 0px;
    }
    .lg\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
    .lg\:px-14 {
      padding-inline: calc(var(--spacing) * 14);
    }
    .lg\:py-0 {
      padding-block: 0px;
    }
    .lg\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }
    .lg\:pt-3 {
      padding-top: calc(var(--spacing) * 3);
    }
    .lg\:pt-3\.5 {
      padding-top: calc(var(--spacing) * 3.5);
    }
    .lg\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }
    .lg\:pt-10 {
      padding-top: calc(var(--spacing) * 10);
    }
    .lg\:pt-14 {
      padding-top: calc(var(--spacing) * 14);
    }
    .lg\:pr-6 {
      padding-right: calc(var(--spacing) * 6);
    }
    .lg\:pr-\[38px\] {
      padding-right: 38px;
    }
    .lg\:pb-0 {
      padding-bottom: 0px;
    }
    .lg\:pb-3 {
      padding-bottom: calc(var(--spacing) * 3);
    }
    .lg\:pb-10 {
      padding-bottom: calc(var(--spacing) * 10);
    }
    .lg\:pb-12 {
      padding-bottom: calc(var(--spacing) * 12);
    }
    .lg\:pl-6 {
      padding-left: calc(var(--spacing) * 6);
    }
    .lg\:pl-\[38px\] {
      padding-left: 38px;
    }
    .lg\:text-\[1\.5rem\] {
      font-size: 1.5rem;
    }
    .lg\:text-\[2rem\] {
      font-size: 2rem;
    }
    .lg\:text-\[14px\] {
      font-size: 14px;
    }
    .lg\:text-\[30px\] {
      font-size: 30px;
    }
    .lg\:text-\[34px\] {
      font-size: 34px;
    }
    .lg\:opacity-100 {
      opacity: 100%;
    }
    .lg\:transition-none {
      transition-property: none;
    }
  }
  @media (width >= 80rem) {
    .xl\:flex {
      display: flex;
    }
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .xl\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
    .xl\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
    .xl\:gap-9 {
      gap: calc(var(--spacing) * 9);
    }
    .xl\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }
  }
  .rtl\:-scale-x-100:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  @starting-style {
    .starting\:-translate-y-1 {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .starting\:translate-y-full {
      --tw-translate-y: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .starting\:opacity-0 {
      opacity: 0%;
    }
  }
  .\[\&_\#ab-country\]\:min-h-\[48px\] #ab-country {
    min-height: 48px;
  }
  .\[\&_\#ab-country\]\:rounded-\[4px\] #ab-country {
    border-radius: 4px;
  }
  .\[\&_\#ck-country\]\:min-h-\[48px\] #ck-country {
    min-height: 48px;
  }
  .\[\&_\#ck-country\]\:rounded-\[4px\] #ck-country {
    border-radius: 4px;
  }
  .\[\&_\.adyen-checkout\\_\\_payment-method--selected\]\:border-ink\! .adyen-checkout__payment-method--selected {
    border-color: var(--brand-ink, #141414) !important;
  }
  .\[\&_\.od-link\]\:text-ink .od-link {
    color: var(--brand-ink, #141414);
  }
  .\[\&_\.od-link\]\:underline .od-link {
    text-decoration-line: underline;
  }
  .\[\&_\.od-link\]\:decoration-line .od-link {
    text-decoration-color: var(--brand-line, #d9dce0);
  }
  .\[\&_\.od-link\]\:underline-offset-4 .od-link {
    text-underline-offset: 4px;
  }
  .\[\&_\.od-link\:hover\]\:decoration-ink .od-link:hover {
    text-decoration-color: var(--brand-ink, #141414);
  }
  .\[\&_\.rounded-brand\]\:rounded-\[8px\] .rounded-brand {
    border-radius: 8px;
  }
  .\[\&_\.sf-phone\]\:flex .sf-phone {
    display: flex;
  }
  .\[\&_\.sf-phone\]\:min-h-\[48px\] .sf-phone {
    min-height: 48px;
  }
  .\[\&_\.sf-phone\]\:items-center .sf-phone {
    align-items: center;
  }
  .\[\&_\.sf-phone\]\:rounded-\[4px\] .sf-phone {
    border-radius: 4px;
  }
  .\[\&_\.sf-phone\]\:border .sf-phone {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .\[\&_\.sf-phone\]\:border-\[\#d9d9d9\] .sf-phone {
    border-color: #d9d9d9;
  }
  .\[\&_\.sf-phone\]\:bg-surface .sf-phone {
    background-color: var(--brand-surface, #ffffff);
  }
  .\[\&_\.sf-phone\]\:px-3 .sf-phone {
    padding-inline: calc(var(--spacing) * 3);
  }
  .\[\&_\.sf-phone\]\:transition-colors .sf-phone {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .\[\&_\.sf-phone_\.PhoneInput\]\:min-h-\[46px\] .sf-phone .PhoneInput {
    min-height: 46px;
  }
  .\[\&_\.sf-phone_\.PhoneInput\]\:w-full .sf-phone .PhoneInput {
    width: 100%;
  }
  .\[\&_\.sf-phone_\.PhoneInput\]\:items-center .sf-phone .PhoneInput {
    align-items: center;
  }
  .\[\&_\.sf-phone_\.PhoneInputCountrySelect\]\:min-h-0 .sf-phone .PhoneInputCountrySelect {
    min-height: 0px;
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\]\:h-\[46px\] .sf-phone .PhoneInputInput {
    height: 46px;
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\]\:min-h-0 .sf-phone .PhoneInputInput {
    min-height: 0px;
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\]\:border-0 .sf-phone .PhoneInputInput {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\]\:bg-transparent .sf-phone .PhoneInputInput {
    background-color: transparent;
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\]\:p-0 .sf-phone .PhoneInputInput {
    padding: 0px;
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\]\:text-\[14px\] .sf-phone .PhoneInputInput {
    font-size: 14px;
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\]\:text-ink .sf-phone .PhoneInputInput {
    color: var(--brand-ink, #141414);
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\]\:outline-none .sf-phone .PhoneInputInput {
    --tw-outline-style: none;
    outline-style: none;
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\:focus\]\:outline-none .sf-phone .PhoneInputInput:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\:focus-visible\]\:shadow-none\! .sf-phone .PhoneInputInput:focus-visible {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }
  .\[\&_\.sf-phone_\.PhoneInputInput\:focus-visible\]\:outline-none\! .sf-phone .PhoneInputInput:focus-visible {
    --tw-outline-style: none !important;
    outline-style: none !important;
  }
  .\[\&_\.sf-phone\:focus-within\]\:border-ink .sf-phone:focus-within {
    border-color: var(--brand-ink, #141414);
  }
  .\[\&_\.sf-phone\:focus-within\]\:ring-3 .sf-phone:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&_\.sf-phone\:focus-within\]\:ring-accent\/20 .sf-phone:focus-within {
    --tw-ring-color: var(--brand-accent, #2b3a52);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--brand-accent, #2b3a52) 20%, transparent);
    }
  }
  .\[\&_\.sf-phone\:not\(\:focus-within\)\:hover\]\:border-\[\#b3b3b3\] .sf-phone:not(:focus-within):hover {
    border-color: #b3b3b3;
  }
  .\[\&_\.sf-phone\[data-phone-invalid\=true\]\]\:border-danger\! .sf-phone[data-phone-invalid=true] {
    border-color: var(--brand-danger, #b3261e) !important;
  }
  .\[\&_\.sf-phone\[data-phone-invalid\=true\]\]\:ring-1 .sf-phone[data-phone-invalid=true] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&_\.sf-phone\[data-phone-invalid\=true\]\]\:ring-danger .sf-phone[data-phone-invalid=true] {
    --tw-ring-color: var(--brand-danger, #b3261e);
  }
  .\[\&_\.ui-btn\]\:rounded-\[4px\] .ui-btn {
    border-radius: 4px;
  }
  .\[\&_\.ui-card\]\:rounded-\[8px\] .ui-card {
    border-radius: 8px;
  }
  .\[\&_\[data-address-invalid\=true\]\]\:rounded-\[4px\] [data-address-invalid=true] {
    border-radius: 4px;
  }
  .\[\&_\[data-cancel-order-trigger\]\]\:border-danger [data-cancel-order-trigger] {
    border-color: var(--brand-danger, #b3261e);
  }
  .\[\&_\[data-cancel-order-trigger\]\]\:bg-surface [data-cancel-order-trigger] {
    background-color: var(--brand-surface, #ffffff);
  }
  .\[\&_\[data-cancel-order-trigger\]\]\:text-danger [data-cancel-order-trigger] {
    color: var(--brand-danger, #b3261e);
  }
  .\[\&_\[data-cancel-order-trigger\]\:hover\]\:bg-danger\/5 [data-cancel-order-trigger]:hover {
    background-color: var(--brand-danger, #b3261e);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--brand-danger, #b3261e) 5%, transparent);
    }
  }
  .\[\&_\[data-cart-qty\]_\[role\=group\]\:focus-within\]\:border-line [data-cart-qty] [role=group]:focus-within {
    border-color: var(--brand-line, #d9dce0);
  }
  .\[\&_\[data-cart-qty\]_button\]\:w-11 [data-cart-qty] button {
    width: calc(var(--spacing) * 11);
  }
  .\[\&_\[data-cart-qty\]_input\]\:w-12 [data-cart-qty] input {
    width: calc(var(--spacing) * 12);
  }
  .\[\&_\[data-float\]_\.sf-phone\]\:items-end [data-float] .sf-phone {
    align-items: flex-end;
  }
  .\[\&_\[data-float\]_\.sf-phone\]\:pb-\[4px\] [data-float] .sf-phone {
    padding-bottom: 4px;
  }
  .\[\&_\[data-float\]_\.sf-phone_\.PhoneInput\]\:min-h-\[26px\] [data-float] .sf-phone .PhoneInput {
    min-height: 26px;
  }
  .\[\&_\[data-float\]_\.sf-phone_\.PhoneInputInput\]\:h-\[26px\] [data-float] .sf-phone .PhoneInputInput {
    height: 26px;
  }
  .\[\&_\[data-float\]_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\]\:pt-\[20px\] [data-float] input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput) {
    padding-top: 20px;
  }
  .\[\&_\[data-float\]_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\]\:pb-\[6px\] [data-float] input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput) {
    padding-bottom: 6px;
  }
  .\[\&_\[data-od-actions\]_a\]\:h-\[48px\] [data-od-actions] a {
    height: 48px;
  }
  .\[\&_\[data-od-actions\]_a\]\:px-5 [data-od-actions] a {
    padding-inline: calc(var(--spacing) * 5);
  }
  .\[\&_\[data-od-actions\]_a\]\:py-0 [data-od-actions] a {
    padding-block: 0px;
  }
  .\[\&_\[data-od-actions\]_a\]\:text-\[14px\] [data-od-actions] a {
    font-size: 14px;
  }
  .\[\&_\[data-od-actions\]_a\]\:font-semibold [data-od-actions] a {
    --tw-font-weight: 500;
    font-weight: 500;
  }
  .\[\&_\[data-od-actions\]_button\]\:h-\[48px\] [data-od-actions] button {
    height: 48px;
  }
  .\[\&_\[data-od-actions\]_button\]\:px-5 [data-od-actions] button {
    padding-inline: calc(var(--spacing) * 5);
  }
  .\[\&_\[data-od-actions\]_button\]\:py-0 [data-od-actions] button {
    padding-block: 0px;
  }
  .\[\&_\[data-od-actions\]_button\]\:text-\[14px\] [data-od-actions] button {
    font-size: 14px;
  }
  .\[\&_\[data-od-actions\]_button\]\:font-semibold [data-od-actions] button {
    --tw-font-weight: 500;
    font-weight: 500;
  }
  .\[\&_\[data-od-aftersales\]_button\]\:h-\[48px\] [data-od-aftersales] button {
    height: 48px;
  }
  .\[\&_\[data-od-aftersales\]_button\]\:py-0 [data-od-aftersales] button {
    padding-block: 0px;
  }
  .\[\&_\[data-od-aftersales\]_button\]\:text-\[14px\] [data-od-aftersales] button {
    font-size: 14px;
  }
  .\[\&_\[data-od-aftersales\]_button\]\:font-semibold [data-od-aftersales] button {
    --tw-font-weight: 500;
    font-weight: 500;
  }
  .\[\&_\[data-sf-chip\]\]\:text-\[13px\] [data-sf-chip] {
    font-size: 13px;
  }
  .\[\&_\[data-sf-chip\]\]\:text-muted [data-sf-chip] {
    color: var(--brand-muted, #5e6672);
  }
  .\[\&_\[data-subcategory-section\]\]\:mb-0 [data-subcategory-section] {
    margin-bottom: 0px;
  }
  .\[\&_\[data-toolbar-toggle\]\]\:ml-auto [data-toolbar-toggle] {
    margin-left: auto;
  }
  .\[\&_\[data-toolbar-toggle\]\]\:self-start [data-toolbar-toggle] {
    align-self: flex-start;
  }
  .\[\&_a\]\:w-full a {
    width: 100%;
  }
  .\[\&_a\]\:text-inherit a {
    color: inherit;
  }
  .\[\&_a\]\:no-underline a {
    text-decoration-line: none;
  }
  @media (width >= 40rem) {
    .sm\:\[\&_a\]\:w-auto a {
      width: auto;
    }
  }
  .\[\&_a\:hover\]\:no-underline a:hover {
    text-decoration-line: none;
  }
  .\[\&_button\]\:w-full button {
    width: 100%;
  }
  .\[\&_button\]\:cursor-pointer button {
    cursor: pointer;
  }
  .\[\&_button\]\:rounded-\[4px\] button {
    border-radius: 4px;
  }
  @media (width >= 40rem) {
    .sm\:\[\&_button\]\:w-auto button {
      width: auto;
    }
  }
  .\[\&_button\:disabled\]\:cursor-not-allowed button:disabled {
    cursor: not-allowed;
  }
  .\[\&_button\:not\(\.ghost-icon\)\:not\(\.ui-btn\)\]\:rounded-\[var\(--brand-radius-btn\,8px\)\] button:not(.ghost-icon):not(.ui-btn) {
    border-radius: var(--brand-radius-btn,8px);
  }
  .\[\&_h1\]\:text-\[26px\] h1 {
    font-size: 26px;
  }
  .\[\&_h1\]\:leading-\[1\.25\] h1 {
    --tw-leading: 1.25;
    line-height: 1.25;
  }
  .\[\&_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\]\:min-h-\[48px\] input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput) {
    min-height: 48px;
  }
  .\[\&_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\]\:rounded-\[4px\] input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput) {
    border-radius: 4px;
  }
  .\[\&_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\:focus\]\:border-ink input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput):focus {
    border-color: var(--brand-ink, #141414);
  }
  .\[\&_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\:focus\]\:ring-3 input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput):focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\:focus\]\:ring-accent\/20 input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput):focus {
    --tw-ring-color: var(--brand-accent, #2b3a52);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--brand-accent, #2b3a52) 20%, transparent);
    }
  }
  .\[\&_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\:not\(\[inputmode\=numeric\]\)\]\:min-h-\[48px\] input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput):not([inputmode=numeric]) {
    min-height: 48px;
  }
  .\[\&_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\:not\(\[inputmode\=numeric\]\)\]\:rounded-\[var\(--brand-radius-btn\,8px\)\] input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput):not([inputmode=numeric]) {
    border-radius: var(--brand-radius-btn,8px);
  }
  .\[\&_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\:not\(\[inputmode\=numeric\]\)\:focus\]\:border-ink input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput):not([inputmode=numeric]):focus {
    border-color: var(--brand-ink, #141414);
  }
  .\[\&_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\:not\(\[inputmode\=numeric\]\)\:focus\]\:ring-1 input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput):not([inputmode=numeric]):focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&_input\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\:not\(\[inputmode\=numeric\]\)\:focus\]\:ring-ink input:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput):not([inputmode=numeric]):focus {
    --tw-ring-color: var(--brand-ink, #141414);
  }
  .\[\&_input\[readonly\]\]\:cursor-default input[readonly] {
    cursor: default;
  }
  .\[\&_input\[readonly\]\]\:bg-surface2 input[readonly] {
    background-color: var(--brand-surface-2, #f6f6f4);
  }
  .\[\&_input\[readonly\]\]\:text-muted input[readonly] {
    color: var(--brand-muted, #5e6672);
  }
  .\[\&_input\[readonly\]\:hover\]\:border-\[\#d9d9d9\] input[readonly]:hover {
    border-color: #d9d9d9;
  }
  .\[\&_input\[readonly\]\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\:focus\]\:border-\[\#d9d9d9\] input[readonly]:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput):focus {
    border-color: #d9d9d9;
  }
  .\[\&_input\[readonly\]\:not\(\[type\=radio\]\)\:not\(\[type\=checkbox\]\)\:not\(\.PhoneInputInput\)\:focus\]\:ring-0 input[readonly]:not([type=radio]):not([type=checkbox]):not(.PhoneInputInput):focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&_label\]\:text-\[14px\] label {
    font-size: 14px;
  }
  .\[\&_label\]\:leading-\[1\.4\] label {
    --tw-leading: 1.4;
    line-height: 1.4;
  }
  .\[\&_label\]\:font-semibold label {
    --tw-font-weight: 500;
    font-weight: 500;
  }
  .\[\&_label\:not\(\[data-address-dialog\]_label\)\:not\(\[data-float-label\]\)\]\:text-\[14px\] label:not([data-address-dialog] label):not([data-float-label]) {
    font-size: 14px;
  }
  .\[\&_label\:not\(\[data-address-dialog\]_label\)\:not\(\[data-float-label\]\)\]\:leading-\[1\.4\] label:not([data-address-dialog] label):not([data-float-label]) {
    --tw-leading: 1.4;
    line-height: 1.4;
  }
  .\[\&_label\:not\(\[data-address-dialog\]_label\)\:not\(\[data-float-label\]\)\]\:font-semibold label:not([data-address-dialog] label):not([data-float-label]) {
    --tw-font-weight: 500;
    font-weight: 500;
  }
  .\[\&_section\]\:rounded-\[8px\] section {
    border-radius: 8px;
  }
  .\[\&_select\]\:min-h-\[48px\] select {
    min-height: 48px;
  }
  .\[\&_select\]\:appearance-none select {
    appearance: none;
  }
  .\[\&_select\]\:rounded-\[4px\] select {
    border-radius: 4px;
  }
  .\[\&_select\]\:rounded-\[var\(--brand-radius-btn\,8px\)\] select {
    border-radius: var(--brand-radius-btn,8px);
  }
  .\[\&_select\:focus\]\:border-ink select:focus {
    border-color: var(--brand-ink, #141414);
  }
  .\[\&_select\:focus\]\:ring-1 select:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&_select\:focus\]\:ring-3 select:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&_select\:focus\]\:ring-accent\/20 select:focus {
    --tw-ring-color: var(--brand-accent, #2b3a52);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--brand-accent, #2b3a52) 20%, transparent);
    }
  }
  .\[\&_select\:focus\]\:ring-ink select:focus {
    --tw-ring-color: var(--brand-ink, #141414);
  }
  .\[\&_svg\]\:block svg {
    display: block;
  }
  .\[\&_textarea\]\:rounded-\[4px\] textarea {
    border-radius: 4px;
  }
  .\[\&_textarea\:focus\]\:border-ink textarea:focus {
    border-color: var(--brand-ink, #141414);
  }
  .\[\&_textarea\:focus\]\:ring-3 textarea:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[\&_textarea\:focus\]\:ring-accent\/20 textarea:focus {
    --tw-ring-color: var(--brand-accent, #2b3a52);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--brand-accent, #2b3a52) 20%, transparent);
    }
  }
  .\[\&_ul\]\:m-0 ul {
    margin: 0px;
  }
  .\[\&_ul\]\:list-none ul {
    list-style-type: none;
  }
  .\[\&_ul\]\:p-0 ul {
    padding: 0px;
  }
  .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
    display: none;
  }
  .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
    display: none;
  }
  .\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button {
    display: none;
  }
  .\[\&\>\*\:not\(\[data-toolbar-toggle\]\)\]\:basis-full > :not([data-toolbar-toggle]) {
    flex-basis: 100%;
  }
  @media (width >= 48rem) {
    .md\:\[\&\>\*\:not\(\[data-toolbar-toggle\]\)\]\:basis-auto > :not([data-toolbar-toggle]) {
      flex-basis: auto;
    }
  }
  .\[\&\>\[data-collection-toolbar\]\]\:mb-0 > [data-collection-toolbar] {
    margin-bottom: 0px;
  }
  .\[\&\>\[data-collection-toolbar\]\]\:border-y-0 > [data-collection-toolbar] {
    border-block-style: var(--tw-border-style);
    border-block-width: 0px;
  }
  .\[\&\>\[data-collection-toolbar\]\]\:py-0 > [data-collection-toolbar] {
    padding-block: 0px;
  }
  .\[\&\>div\]\:max-w-none > div {
    max-width: none;
  }
  .\[\&\>div\]\:px-0 > div {
    padding-inline: 0px;
  }
  .\[\&\>div\]\:pt-0 > div {
    padding-top: 0px;
  }
  .\[\&\>div\]\:pb-0 > div {
    padding-bottom: 0px;
  }
  .\[\&\>li\+li\]\:border-t > li + li {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .\[\&\>li\+li\]\:border-line > li + li {
    border-color: var(--brand-line, #d9dce0);
  }
  .\[\&\>li\:first-child\>\*\]\:rounded-t-\[7px\] > li:first-child > * {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
  }
  .\[\&\>li\:last-child\>\*\]\:rounded-b-\[7px\] > li:last-child > * {
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
  }
  .\[\&\>select\]\:h-11 > select {
    height: calc(var(--spacing) * 11);
  }
  .\[\&\>select\]\:min-h-\[44px\] > select {
    min-height: 44px;
  }
  .\[\&\>svg\]\:transition-transform > svg {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .\[\&\>svg\]\:duration-150 > svg {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .enabled\:active\:\[\&\>svg\]\:scale-75:enabled:active > svg {
    --tw-scale-x: 75%;
    --tw-scale-y: 75%;
    --tw-scale-z: 75%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  [data-nav-leaf] + .\[\[data-nav-leaf\]\+\&\]\:mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
}
@layer base {
  body {
    margin: 0;
  }
  img, svg, video {
    max-width: 100%;
  }
  :focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
  }
}
@layer components {
  .card .card-img--main, .card .card-img--hover {
    transition: opacity .3s ease;
  }
  .card .card-img--hover {
    opacity: 0;
  }
  .card:hover:has(.card-img--hover) .card-img--main,
  .card:focus-within:has(.card-img--hover) .card-img--main,
  .card-shell:hover:has(.card-img--hover) .card-img--main,
  .card-shell:focus-within:has(.card-img--hover) .card-img--main {
    opacity: 0;
  }
  .card:hover:has(.card-img--hover) .card-img--hover,
  .card:focus-within:has(.card-img--hover) .card-img--hover,
  .card-shell:hover:has(.card-img--hover) .card-img--hover,
  .card-shell:focus-within:has(.card-img--hover) .card-img--hover {
    opacity: 1;
  }
  .ui-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: var(--brand-radius);
    padding: 16px;
  }
  .ui-card--roomy {
    padding: 24px;
  }
  .ui-card--sunk {
    background: var(--brand-surface-2);
    padding: 12px 16px;
  }
  .ui-card-list > * + * {
    margin-top: 16px;
  }
  [data-home-section] {
    padding-block: 48px;
  }
  @media (min-width: 768px) {
    [data-home-section] {
      padding-block: 72px;
    }
  }
  [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .62s cubic-bezier(.22, 1, .36, 1),
      transform .62s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }
  [data-reveal] [data-reveal-item] {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity .62s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
      transform .62s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
  }
  [data-reveal][data-reveal-items] {
    transform: none;
  }
  [data-reveal][data-reveal-deep] {
    transform: translate3d(0, 14px, 0);
  }
  [data-reveal][data-reveal-state='in'] {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  [data-reveal][data-reveal-state='in'] [data-reveal-item] {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal] [data-reveal-item] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  [data-home-section] .wrap > .head,
  [data-home-section] .wrap > div > .head {
    margin-bottom: 24px;
  }
  [data-section-heading] {
    margin: 0;
    font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--brand-ink, #141414);
  }
  @media (min-width: 768px) {
    [data-section-heading] {
      font-size: 24px;
    }
  }
  [data-section-heading-link] {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--brand-ink, #141414);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  [data-section-heading-link]:hover {
    text-decoration: none;
  }
  [data-section-heading-link] svg {
    width: 16px;
    height: 16px;
    flex: none;
  }
  [data-category-entries] {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 768px) {
    [data-category-entries] {
      grid-template-columns: repeat(var(--cat-entry-cols, 3), minmax(0, 1fr));
    }
  }
  [data-category-entry] {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--brand-surface, #fff);
    color: inherit;
    text-decoration: none;
  }
  [data-category-entry-media] {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: linear-gradient(160deg, #ffffff 0%, #edeff1 60%, #d7dbe0 100%);
  }
  [data-category-entry-media] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease, cubic-bezier(.2, .6, .2, 1));
  }
  [data-category-entry-media] svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  [data-category-entry]:hover [data-category-entry-media] img {
    transform: scale(1.03);
  }
  [data-category-entry-text] {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    padding: 16px;
    color: var(--brand-ink, #141414);
  }
  [data-category-entry-tone='photo'] [data-category-entry-text] {
    width: 100%;
    color: #fff;
    background: linear-gradient(to top, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 42%) 60%, rgb(0 0 0 / 0%) 100%);
  }
  [data-category-entry-title] {
    margin: 0;
    font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: uppercase;
    color: inherit;
  }
  @media (min-width: 768px) {
    [data-category-entry-title] {
      font-size: 32px;
    }
  }
  [data-category-entry-subtitle] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: inherit;
  }
  [data-category-entry-subtitle] svg {
    width: 20px;
    height: 20px;
    flex: none;
  }
  [data-image-card-container] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
  }
  @media (min-width: 768px) {
    [data-image-card-container] {
      flex-direction: row;
      gap: 56px;
    }
  }
  [data-image-card-media] {
    display: block;
    width: 100%;
    flex: none;
    position: relative;
    aspect-ratio: 2 / 3;
    min-height: 0;
  }
  @media (min-width: 768px) {
    [data-image-card-media] {
      width: 45%;
      aspect-ratio: 4 / 5;
    }
  }
  [data-image-card-media] > img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 14px;
    overflow: hidden;
    transition: aspect-ratio .5s cubic-bezier(.22, 1, .36, 1);
  }
  @media (min-width: 768px) {
    [data-image-card-media] > img {
      aspect-ratio: 4 / 5;
    }
  }
  [data-image-card-media] > svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    [data-image-card-media]:hover > img {
      aspect-ratio: 2 / 3;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-image-card-media] > img {
      transition: none;
    }
  }
  [data-image-card-content] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
  }
  [data-image-card-content][data-image-card-align="center"] {
    align-items: center;
    text-align: center;
  }
  [data-image-card-content][data-image-card-align="right"] {
    align-items: flex-end;
    text-align: right;
  }
  [data-image-card-content][data-image-card-align="center"] [data-image-card-subheading],
  [data-image-card-content][data-image-card-align="center"] [data-image-card-description] > p {
    margin-inline: auto;
  }
  [data-image-card-container][data-image-card-width="full"] {
    max-width: none;
  }
  [data-image-card-container][data-image-card-width="full"] [data-image-card-content] {
    max-width: none;
  }
  [data-image-card-category] {
    margin: 0 0 14px;
    font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--brand-muted, #888);
  }
  @media (min-width: 768px) {
    [data-image-card-category] {
      font-size: 20px;
    }
  }
  [data-image-card-title] {
    margin: 0 0 20px;
    font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--brand-ink, #141414);
  }
  [data-image-card-description] {
    margin: 0 0 32px;
    max-width: 54ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--brand-ink, #141414);
  }
  @media (min-width: 768px) {
    [data-image-card-description] {
      font-size: 16.5px;
    }
  }
  [data-image-card-specs] {
    display: grid;
    gap: 22px 40px;
    margin: 0 0 32px;
    padding-top: 26px;
    border-top: 1px solid var(--brand-line, #d9dce0);
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  @media (min-width: 640px) {
    [data-image-card-specs] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  [data-image-card-specs] dt {
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-ink, #141414);
  }
  [data-image-card-specs] dd {
    margin: 6px 0 0;
    max-width: 32ch;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--brand-muted, #5e6672);
  }
  [data-image-card-link] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    font-size: 15.5px;
    color: var(--brand-ink, #141414);
  }
  [data-image-card-link] [data-image-card-link-text] {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  [data-image-card-link]:hover [data-image-card-link-text] {
    text-decoration: none;
  }
  [data-image-card-link] svg {
    width: 16px;
    height: 16px;
    flex: none;
  }
  [data-multicolumn-item] [data-promise-title] {
    margin: 0 0 4px;
    font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--brand-ink, #141414);
  }
  [data-multicolumn-item] [data-promise-body] {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--brand-muted, #5e6672);
  }
  @media (min-width: 768px) {
    [data-multicolumn-item] [data-promise-body] {
      font-size: 16px;
    }
  }
  [data-product-grid] {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 768px) {
    [data-product-grid] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    [data-product-grid] {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (min-width: 1280px) {
    [data-product-grid] {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  [data-product-grid] > .card,
  [data-product-grid] > .card-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
  }
  [data-product-grid] > .card-shell > .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
  }
  [data-product-grid] > .card-shell {
    position: relative;
  }
  [data-product-grid] .card .img {
    position: relative;
    aspect-ratio: 2 / 3;
    background: #f6f6f6;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }
  [data-product-grid] .card .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  [data-product-grid] .card:hover .img {
    box-shadow: none;
    border-color: transparent;
  }
  [data-product-grid] > .card-shell > .quick-add {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 2 / 3;
    z-index: 2;
  }
  [data-product-grid] > .card-shell > .quick-add > .quick-add__button {
    right: 8px;
    bottom: 8px;
  }
  [data-product-grid] .card .name {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-product-grid] .card .sub {
    display: block;
    font-size: 13px;
    color: var(--brand-muted, #5e6672);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-product-grid] .card .meta,
  [data-product-grid] .card .body {
    display: block;
    margin-top: 0;
    font-size: 13px;
  }
  [data-product-grid] .card .price {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }
  @media (min-width: 768px) {
    [data-product-grid] .card .price {
      font-size: 14.5px;
    }
  }
  [data-product-grid] .card .wish,
  [data-product-grid] .card-shell .wish {
    position: absolute;
    right: 8px;
    top: 8px;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--brand-surface, #ffffff);
    color: var(--brand-ink, #141414);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 12%);
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.18s ease, box-shadow 0.18s ease;
  }
  [data-product-grid] .card .wish svg,
  [data-product-grid] .card-shell .wish svg {
    width: 22px;
    height: 22px;
  }
  @media (hover: hover) {
    [data-product-grid] .card-shell .wish:not(:disabled):hover {
      color: var(--brand-danger, #b3261e);
      transform: scale(1.08);
      box-shadow: 0 0 0 1px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 16%);
    }
  }
  [data-product-grid] .card-shell .wish:not(:disabled):active {
    transform: scale(0.92);
  }
  [data-product-grid] .card-shell .wish[aria-pressed="true"] {
    color: var(--brand-danger, #b3261e);
  }
  [data-product-grid] .card-shell .wish[aria-pressed="true"] svg {
    animation: wish-pop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes wish-pop {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1.25);
    }
    100% {
      transform: scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-product-grid] .card-shell .wish {
      transition: none;
    }
    [data-product-grid] .card-shell .wish:hover,
    [data-product-grid] .card-shell .wish:active {
      transform: none;
    }
    [data-product-grid] .card-shell .wish[aria-pressed="true"] svg {
      animation: none;
    }
  }
  [data-product-grid] .card .wish:disabled,
  [data-product-grid] .card-shell .wish:disabled {
    opacity: 0.72;
    cursor: not-allowed;
  }
  .quick-add {
    pointer-events: none;
  }
  .quick-add__button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-surface, #ffffff);
    color: var(--brand-ink, #141414);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 12%);
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s ease,
      transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
      background-color 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
  }
  .quick-add__icon {
    width: 21px;
    height: 21px;
    flex: none;
  }
  .quick-add__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .quick-add__button:is(:hover, :focus-visible) .quick-add__label {
      right: 0;
      bottom: calc(100% + 8px);
      width: auto;
      height: auto;
      margin: 0;
      padding: 6px 10px;
      overflow: visible;
      clip-path: none;
      border-radius: 6px;
      background: var(--brand-ink, #141414);
      color: var(--brand-surface, #ffffff);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.01em;
      box-shadow: 0 4px 12px rgb(0 0 0 / 16%);
      pointer-events: none;
      animation: quick-add-tip-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
  }
  @keyframes quick-add-tip-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (hover: hover) {
    .quick-add__button:hover {
      background: var(--brand-ink, #141414);
      color: var(--brand-surface, #ffffff);
      transform: scale(1.08);
      box-shadow: 0 0 0 1px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 16%);
    }
  }
  .quick-add__button:active {
    transform: scale(0.92);
  }
  .quick-add__button:focus-visible {
    outline: 2px solid var(--brand-accent, #2b3a52);
    outline-offset: 2px;
  }
  .quick-add__button[data-added='true'] {
    background: var(--brand-ink, #141414);
    color: var(--brand-surface, #ffffff);
  }
  .quick-add__button[data-added='true'] .quick-add__icon {
    animation: wish-pop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @media (hover: hover) and (pointer: fine) {
    .quick-add__button {
      opacity: 0;
      transform: translateY(6px);
    }
    :is([data-featured-card], .card-shell):is(:hover, :focus-within) .quick-add__button {
      opacity: 1;
      transform: none;
    }
    :is([data-featured-card], .card-shell):is(:hover, :focus-within) .quick-add__button:hover {
      transform: scale(1.08);
    }
    :is([data-featured-card], .card-shell):is(:hover, :focus-within) .quick-add__button:active {
      transform: scale(0.92);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .quick-add__button {
      transition: none;
      transform: none !important;
    }
    .quick-add__button[data-added='true'] .quick-add__icon,
    .quick-add__button .quick-add__label {
      animation: none !important;
    }
  }
  .quick-add-dialog {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: min(820px, calc(100vw - 32px));
    max-height: min(92vh, 760px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    border: 1px solid var(--brand-line, #d9dce0);
    border-radius: var(--brand-radius, 2px);
    background: var(--brand-surface, #ffffff);
    color: var(--brand-ink, #141414);
    pointer-events: auto;
  }
  .quick-add-dialog::backdrop {
    background: rgb(0 0 0 / 45%);
  }
  .quick-add-dialog__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }
  @media (min-width: 768px) {
    .quick-add-dialog__grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      grid-template-rows: minmax(0, 1fr);
    }
  }
  .quick-add-dialog__media {
    display: flex;
    flex-direction: row;
    gap: 10px;
    max-height: min(62vh, 480px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    padding: 14px;
    background: var(--brand-surface-2, #f6f6f4);
    scroll-snap-type: x mandatory;
  }
  .quick-add-dialog__media img {
    flex: none;
    width: 62%;
    height: auto;
    max-height: min(56vh, 452px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--brand-radius, 2px);
    background: var(--brand-surface, #ffffff);
    scroll-snap-align: center;
  }
  @media (min-width: 768px) {
    .quick-add-dialog__media {
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      scroll-snap-type: y proximity;
    }
    .quick-add-dialog__media img {
      width: 100%;
    }
  }
  .quick-add-dialog__info {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 22px;
  }
  .quick-add-dialog__close.ghost-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    cursor: pointer;
  }
  .quick-add-dialog__close svg {
    width: 20px;
    height: 20px;
  }
  .quick-add-dialog__title {
    margin: 0 56px 4px 0;
    font-size: 24px;
  }
  .quick-add-dialog__price {
    margin: 16px 0;
  }
  .quick-add-dialog__status {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--brand-muted, #5e6672);
  }
  .quick-add-dialog__attrs {
    margin-bottom: 18px;
  }
  .quick-add-dialog__buy {
    position: sticky;
    bottom: -1px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    padding: 12px 0 2px;
    background: var(--brand-surface, #ffffff);
  }
  .quick-add-dialog__qty {
    margin-bottom: 0;
  }
  .quick-add-dialog__retry {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid var(--brand-ink, #141414);
    border-radius: var(--brand-radius-btn, 8px);
    background: transparent;
    color: var(--brand-ink, #141414);
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
  }
  .quick-add-dialog__retry:focus-visible {
    outline: 2px solid var(--brand-accent, #2b3a52);
    outline-offset: 2px;
  }
  @media (max-width: 640px) {
    .quick-add-dialog {
      width: 100%;
      max-width: none;
      max-height: 92vh;
      margin: auto 0 0 0;
      border-radius: var(--brand-radius, 2px) var(--brand-radius, 2px) 0 0;
    }
    .quick-add-dialog__media {
      padding: 12px;
      background: var(--brand-surface-2, #f6f6f4);
    }
    .quick-add-dialog__media img {
      width: 58%;
    }
    .quick-add-dialog__info {
      padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    }
  }
  @media (max-width: 720px) {
    .ui-table--stack thead {
      display: none;
    }
    .ui-table--stack tr {
      display: grid;
      gap: 4px;
      padding: 12px 0;
      border-bottom: 1px solid var(--brand-line);
    }
    .ui-table--stack td {
      border: 0;
      padding: 0;
      display: flex;
      justify-content: space-between;
      gap: 16px;
    }
    .ui-table--stack td::before {
      content: attr(data-label);
      color: var(--brand-muted);
      font-size: 13px;
    }
  }
  .ui-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--brand-ink);
    color: var(--brand-accent-ink);
    padding: 12px 16px;
    border-radius: var(--brand-radius);
  }
  .ui-skip:focus {
    left: 12px;
    top: 12px;
  }
  .ui-spinner {
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin .7s linear infinite;
  }
  @keyframes ui-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .ui-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: var(--brand-radius-btn, 8px);
    font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, transform .15s ease;
  }
  .ui-btn[data-size="sm"] {
    min-height: 40px;
    padding: 0 16px;
    font-size: 13px;
  }
  .ui-btn:focus-visible {
    outline: 2px solid var(--brand-accent, #2b3a52);
    outline-offset: 2px;
  }
  .ui-btn[data-variant="primary"] {
    background: var(--brand-ink, #141414);
    border-color: var(--brand-ink, #141414);
    color: var(--brand-accent-ink, #ffffff);
  }
  .ui-btn[data-variant="ghost"] {
    background: transparent;
    border-color: var(--brand-ink, #141414);
    color: var(--brand-ink, #141414);
  }
  .ui-btn[data-variant="quiet"] {
    background: transparent;
    border-color: var(--brand-line, #d9dce0);
    color: var(--brand-ink, #141414);
  }
  .ui-btn[data-variant="danger"] {
    background: var(--brand-danger, #b3261e);
    border-color: var(--brand-danger, #b3261e);
    color: #ffffff;
  }
  .ui-btn:not(:disabled):not([aria-disabled="true"]):not([data-loading]):active {
    transform: scale(.98);
  }
  @media (hover: hover) {
    .ui-btn:not(:disabled):not([aria-disabled="true"]):not([data-loading])[data-variant="primary"]:hover {
      background: var(--brand-ink, #141414);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--brand-ink, #141414) 82%, #ffffff);
      }
      border-color: var(--brand-ink, #141414);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--brand-ink, #141414) 82%, #ffffff);
      }
    }
    .ui-btn:not(:disabled):not([aria-disabled="true"]):not([data-loading])[data-variant="ghost"]:hover {
      background: var(--brand-ink, #141414);
      color: var(--brand-accent-ink, #ffffff);
    }
    .ui-btn:not(:disabled):not([aria-disabled="true"]):not([data-loading])[data-variant="quiet"]:hover {
      background: var(--brand-surface-2, #f6f6f4);
      border-color: var(--brand-ink, #141414);
    }
    .ui-btn:not(:disabled):not([aria-disabled="true"]):not([data-loading])[data-variant="danger"]:hover {
      filter: brightness(.94);
    }
  }
  .ui-btn:disabled, .ui-btn[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
  }
  [data-loading] {
    position: relative;
    cursor: progress;
  }
  .ui-btn__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  [data-loading] > .ui-btn__label {
    visibility: hidden;
  }
  .ui-btn__spinner {
    position: absolute;
    inset: 0;
    margin: auto;
  }
  @media (max-width: 1023px) {
    .ui-btn[data-size="sm"] {
      min-height: 44px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ui-btn {
      transition: none;
    }
    .ui-btn:active {
      transform: none !important;
    }
    .ui-btn__spinner {
      animation-duration: 1.6s;
    }
  }
}
@media (max-width: 1023px) {
  .tap-44 {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block: -8px;
  }
}
.status-badge {
  display: inline-block;
  font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--brand-radius-pill, 999px);
  border: 1px solid var(--brand-badge-neutral-line, var(--brand-line, #d9dce0));
  background: var(--brand-badge-neutral-bg, var(--brand-surface, #ffffff));
  color: var(--brand-badge-neutral-ink, var(--brand-muted, #5e6672));
}
.status-badge[data-status="neutral"] {
  border-color: var(--brand-badge-neutral-line, var(--brand-line, #d9dce0));
  background: var(--brand-badge-neutral-bg, var(--brand-surface, #ffffff));
  color: var(--brand-badge-neutral-ink, var(--brand-muted, #5e6672));
}
.status-badge[data-status="accent"] {
  border-color: var(--brand-accent, #2b3a52);
  background: var(--brand-surface, #ffffff);
  color: var(--brand-accent, #2b3a52);
}
.status-badge[data-status="paid"] {
  border-color: var(--brand-badge-paid-line, #bcdcc8);
  background: var(--brand-badge-paid-bg, #e9f4ee);
  color: var(--brand-badge-paid-ink, #14512f);
}
.status-badge[data-status="pending"] {
  border-color: var(--brand-badge-pending-line, #d9dce0);
  background: var(--brand-badge-pending-bg, #f1f2f4);
  color: var(--brand-badge-pending-ink, #4b5259);
}
.status-badge[data-status="shipped"] {
  border-color: var(--brand-badge-shipped-line, #c3d6ea);
  background: var(--brand-badge-shipped-bg, #e9f0f8);
  color: var(--brand-badge-shipped-ink, #1b4a7a);
}
.status-badge[data-status="refunded"] {
  border-color: var(--brand-badge-refunded-line, #e8d5a8);
  background: var(--brand-badge-refunded-bg, #fdf4e3);
  color: var(--brand-badge-refunded-ink, #6b4a00);
}
.status-badge[data-status="cancelled"] {
  border-color: var(--brand-badge-cancelled-line, #d9dce0);
  background: var(--brand-badge-cancelled-bg, #f1f2f4);
  color: var(--brand-badge-cancelled-ink, #5e6672);
}
.card-group-title {
  margin: 0;
  font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--brand-ink, #141414);
}
.meta-12 {
  font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
  font-size: 12px;
  line-height: 1.4;
}
.meta-13 {
  font-family: var(--brand-font-sans, 'Jost', 'Helvetica Neue', Arial, sans-serif);
  font-size: 13px;
  line-height: 1.5;
}
@layer components {
  .ghost-icon {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--brand-ink, #141414);
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
  }
  .ghost-icon::before {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transform: scale(.55);
    transition: opacity .2s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .ghost-icon svg {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  @media (hover: hover) {
    .ghost-icon:not(:disabled):hover::before {
      opacity: .07;
      transform: scale(1);
    }
    .ghost-icon--close:not(:disabled):hover svg {
      transform: rotate(90deg);
    }
  }
  .ghost-icon:not(:disabled):active {
    transform: scale(.94);
    transition-duration: .1s;
  }
  .ghost-icon:not(:disabled):active::before {
    opacity: .12;
    transform: scale(1);
  }
  .ghost-icon:focus-visible {
    outline: 2px solid var(--brand-accent, #2b3a52);
    outline-offset: 2px;
  }
  .badge-pop {
    animation: badge-pop .45s cubic-bezier(.34, 1.56, .64, 1);
  }
  @keyframes badge-pop {
    0% {
      transform: scale(.3);
      opacity: 0;
    }
    60% {
      transform: scale(1.18);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }
  .cart-drawer-scrim {
    opacity: 0;
    backdrop-filter: blur(0);
    transition: opacity .3s ease, backdrop-filter .3s ease;
  }
  .cart-drawer-panel {
    transform: translate3d(100%, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: transform .3s cubic-bezier(.4, 0, 1, 1), box-shadow .3s ease;
    will-change: transform;
  }
  .cart-drawer-stagger {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
    transition: opacity .15s ease, transform .2s ease;
  }
  [data-state="open"] .cart-drawer-scrim {
    opacity: 1;
    backdrop-filter: blur(2px);
    transition-duration: .4s;
  }
  [data-state="open"] .cart-drawer-panel {
    transform: translate3d(0, 0, 0);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .14);
    transition: transform .48s cubic-bezier(.32, .72, 0, 1), box-shadow .48s ease;
  }
  [data-state="open"] .cart-drawer-stagger {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(140ms + var(--i, 0) * 45ms);
  }
  .sf-nav-drawer-scrim {
    opacity: 0;
    backdrop-filter: blur(0);
    transition: opacity .3s ease, backdrop-filter .3s ease;
  }
  .sf-nav-drawer-panel {
    transform: translate3d(-100%, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: transform .3s cubic-bezier(.4, 0, 1, 1), box-shadow .3s ease;
    will-change: transform;
  }
  .sf-nav-drawer-stagger {
    opacity: 0;
    transform: translate3d(-16px, 0, 0);
    transition: opacity .15s ease, transform .2s ease;
  }
  [data-state="open"] .sf-nav-drawer-scrim {
    opacity: 1;
    backdrop-filter: blur(2px);
    transition-duration: .4s;
  }
  [data-state="open"] .sf-nav-drawer-panel {
    transform: translate3d(0, 0, 0);
    box-shadow: 24px 0 60px rgba(0, 0, 0, .14);
    transition: transform .48s cubic-bezier(.32, .72, 0, 1), box-shadow .48s ease;
  }
  [data-state="open"] .sf-nav-drawer-stagger {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(140ms + var(--i, 0) * 70ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .ghost-icon, .ghost-icon::before, .ghost-icon svg {
      transition: opacity .15s ease, color .15s ease;
      transform: none !important;
    }
    .badge-pop {
      animation: none;
    }
    .cart-drawer-panel, [data-state="open"] .cart-drawer-panel,
    .cart-drawer-stagger, [data-state="open"] .cart-drawer-stagger,
    .sf-nav-drawer-panel, [data-state="open"] .sf-nav-drawer-panel,
    .sf-nav-drawer-stagger, [data-state="open"] .sf-nav-drawer-stagger {
      transform: none;
      transition: opacity .2s ease;
      transition-delay: 0s;
    }
    .cart-drawer-panel, .sf-nav-drawer-panel {
      opacity: 0;
    }
    [data-state="open"] .cart-drawer-panel, [data-state="open"] .sf-nav-drawer-panel {
      opacity: 1;
    }
  }
  .ui-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235e6672' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    cursor: pointer;
  }
  .ui-select:disabled {
    cursor: not-allowed;
  }
  .lume header:not([data-sf-header]) {
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }
  [role="dialog"] footer {
    padding: 0;
    border-top: 0;
    background: transparent;
    font-size: inherit;
  }
  .cart-drawer-panel .cart-drawer-foot {
    background: var(--brand-surface, #ffffff);
    border-top: 1px solid var(--brand-line, #d9dce0);
    box-shadow: 0 -10px 24px -16px rgba(0, 0, 0, .18);
  }
  .cart-line {
    position: relative;
    display: grid;
    grid-template-rows: 1fr;
  }
  .cart-line + .cart-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    border-top: 1px solid var(--brand-line, #d9dce0);
  }
  .cart-line__inner {
    min-height: 0;
    overflow: hidden;
  }
  .cart-line__thumb img {
    mix-blend-mode: multiply;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  @media (hover: hover) {
    .cart-line__thumb:hover img {
      transform: scale(1.05);
    }
  }
  [data-state="open"] .cart-line[data-leaving],
  [data-cart-scope] .cart-line[data-leaving] {
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translate3d(32px, 0, 0);
    transition: opacity .2s ease,
      transform .26s cubic-bezier(.4, 0, 1, 1),
      grid-template-rows .28s cubic-bezier(.4, 0, .2, 1) .06s;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-state="open"] .cart-line[data-leaving],
    [data-cart-scope] .cart-line[data-leaving] {
      transform: none;
      transition: opacity .2s ease, grid-template-rows .2s ease;
    }
    .cart-line__thumb img {
      transition: none;
    }
  }
  .cart-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto 32px;
    grid-template-areas: 'thumb info info rm' 'qty qty total total';
    column-gap: 16px;
    row-gap: 14px;
    align-items: start;
  }
  .cart-row__thumb {
    grid-area: thumb;
  }
  .cart-row__info {
    grid-area: info;
  }
  .cart-row__rm {
    grid-area: rm;
    justify-self: end;
  }
  .cart-row__qty {
    grid-area: qty;
    align-self: center;
  }
  .cart-row__total {
    grid-area: total;
    align-self: center;
  }
  @media (min-width: 40rem) {
    .cart-row {
      grid-template-columns: 96px minmax(0, 1fr) auto auto auto;
      grid-template-areas: 'thumb info qty rm total';
      column-gap: 16px;
      align-items: center;
    }
    .cart-row__info {
      margin-right: 8px;
    }
  }
  .cart-rise {
    animation: cart-rise .6s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  @keyframes cart-rise {
    from {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .cart-bar {
    transform: translate3d(0, 100%, 0);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0);
    transition: transform .28s cubic-bezier(.4, 0, 1, 1), box-shadow .28s ease;
  }
  .cart-bar[data-shown] {
    transform: none;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .08);
    transition: transform .45s cubic-bezier(.32, .72, 0, 1), box-shadow .45s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-rise {
      animation: none;
    }
    .cart-bar, .cart-bar[data-shown] {
      transition: opacity .2s ease;
      transform: none;
    }
    .cart-bar {
      opacity: 0;
    }
    .cart-bar[data-shown] {
      opacity: 1;
    }
  }
  .sk {
    background-color: var(--brand-ink, #141414);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--brand-ink, #141414) 9%, transparent);
    }
    background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: sk-sweep 1.4s ease-in-out infinite;
  }
  @keyframes sk-sweep {
    from {
      background-position: 130% 0;
    }
    to {
      background-position: -30% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sk {
      animation: none;
      background-image: none;
    }
  }
}
.quick-add-dialog__media,
.quick-add-dialog__info {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.quick-add-dialog__media::-webkit-scrollbar,
.quick-add-dialog__info::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
@media (min-width: 768px) {
  .quick-add-dialog {
    height: min(86vh, 560px);
    border-radius: 16px;
  }
  .quick-add-dialog__media {
    border-radius: 16px 0 0 16px;
  }
}
@media (max-width: 767px) {
  .quick-add-dialog {
    border-radius: 0;
  }
}
.quick-add-dialog__media {
  padding: 0;
  gap: 4px;
  max-height: none;
}
.quick-add-dialog__media img {
  max-height: none;
  width: 100%;
  border-radius: 0;
}
@media (max-width: 767px) {
  .quick-add-dialog__media img {
    width: 74%;
  }
}
.quick-add-dialog__info {
  display: flex;
  flex-direction: column;
}
.quick-add-dialog__buy {
  margin-top: auto;
}
.quick-add-dialog button {
  cursor: pointer;
}
.quick-add-dialog__info {
  overflow: hidden;
}
.quick-add-dialog__title,
.quick-add-dialog__price,
.quick-add-dialog__status {
  flex: none;
}
.quick-add-dialog__attrs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.quick-add-dialog__attrs::-webkit-scrollbar {
  display: none;
}
.quick-add-dialog__buy {
  position: static;
  flex: none;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--brand-line, #d9dce0);
}
@media (min-width: 768px) {
  .quick-add-dialog {
    height: fit-content;
    min-height: min(62vh, 470px);
    max-height: min(86vh, 620px);
  }
  .quick-add-dialog__grid {
    position: relative;
    display: block;
  }
  .quick-add-dialog__media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 46%;
    border-radius: 16px 0 0 16px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }
  .quick-add-dialog__info {
    margin-left: 46%;
    height: 100%;
  }
}
.quick-add-dialog__media img {
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: var(--brand-surface, #ffffff);
}
@media (min-width: 768px) {
  .quick-add-dialog {
    min-height: min(72vh, 566px);
    max-height: min(88vh, 640px);
  }
}
.quick-add-dialog__grid {
  flex: 1 1 auto;
  min-height: 0;
}
.quick-add-dialog__close {
  z-index: 3;
}
@keyframes quick-add-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes quick-add-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.quick-add-dialog[open] {
  animation: quick-add-dialog-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.quick-add-dialog[open]::backdrop {
  animation: quick-add-backdrop-in 0.22s ease-out;
}
@media (max-width: 767px) {
  @keyframes quick-add-dialog-in {
    from {
      opacity: 0;
      transform: translateY(28px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .quick-add-dialog__info {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .quick-add-dialog__info::-webkit-scrollbar {
    display: none;
  }
  .quick-add-dialog__attrs {
    flex: none;
    overflow: visible;
  }
  .quick-add-dialog__buy {
    margin-top: 12px;
  }
  .quick-add-dialog__media {
    max-height: 40vh;
  }
  .quick-add-dialog__media img {
    width: 32%;
    max-height: 40vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quick-add-dialog[open],
  .quick-add-dialog[open]::backdrop {
    animation: none;
  }
}
@media (max-width: 767px) {
  .quick-add {
    display: none;
  }
}
.quick-add-dialog__media-wrap {
  position: relative;
  min-height: 0;
}
@media (min-width: 768px) {
  .quick-add-dialog__media-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 46%;
    border-radius: 16px 0 0 16px;
    overflow: hidden;
  }
}
.quick-add-dialog__media--more {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
}
.quick-add-dialog__more-wrap {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}
.quick-add-dialog__more {
  pointer-events: auto;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  border: 1px solid var(--brand-line, #d9dce0);
  border-radius: var(--brand-radius-pill, 999px);
  background: var(--brand-surface, #ffffff);
  color: var(--brand-ink, #141414);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgb(0 0 0 / 16%);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.quick-add-dialog__more:hover {
  background: var(--brand-surface-2, #f6f6f4);
}
.quick-add-dialog__more:focus-visible {
  outline: 2px solid var(--brand-accent, #2b3a52);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .quick-add-dialog__more {
    transition: none;
  }
}
@media (min-width: 768px) {
  .quick-add-dialog__media-wrap > .quick-add-dialog__media {
    position: static;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    overflow-y: auto;
  }
  .quick-add-dialog__grid {
    display: flex;
    align-items: stretch;
  }
  .quick-add-dialog__info {
    flex: 1 1 auto;
    height: auto;
    padding: 28px 28px 24px;
  }
  .quick-add-dialog__buy {
    margin-top: auto;
  }
}
.quick-add-dialog__media-wrap,
.quick-add-dialog__media,
.quick-add-dialog__media img {
  background: var(--brand-surface-2, #f6f6f4);
}
.quick-add-dialog__media img {
  mix-blend-mode: multiply;
}
.quick-add-dialog__price {
  margin: 12px 0 8px;
  font-weight: 400;
}
.quick-add-dialog__details {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--brand-muted, #5e6672);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.quick-add-dialog__details svg {
  width: 13px;
  height: 10px;
  transition: transform 0.2s ease;
}
.quick-add-dialog__details:hover {
  color: var(--brand-ink, #141414);
  text-decoration-color: currentColor;
}
.quick-add-dialog__details:hover svg {
  transform: translateX(3px);
}
.quick-add-dialog__details:focus-visible {
  outline: 2px solid var(--brand-accent, #2b3a52);
  outline-offset: 2px;
}
.quick-add-dialog__buy {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-top: 16px;
}
.quick-add-dialog__qty {
  flex: none;
  display: flex;
}
@media (prefers-reduced-motion: reduce) {
  .quick-add-dialog__details,
  .quick-add-dialog__details svg {
    transition: none;
  }
}
.quick-add-dialog__title {
  font-family: var(--brand-font-display, var(--brand-font-sans, inherit));
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
}
@media (max-width: 767px) {
  .quick-add-dialog__info {
    padding-bottom: 0;
  }
  .quick-add-dialog__buy {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-direction: column;
    margin: 12px -18px 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--brand-line, #d9dce0);
    background: var(--brand-surface, #ffffff);
    box-shadow: 0 -8px 20px -12px rgb(0 0 0 / 18%);
  }
}
@keyframes address-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
[data-address-dialog][open] {
  animation: address-dialog-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-address-dialog][open]::backdrop {
  animation: quick-add-backdrop-in 0.22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  [data-address-dialog][open],
  [data-address-dialog][open]::backdrop {
    animation: none;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home-lume.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
   首页版式层（2026-10-13）—— 按参照站 purity.nextsky.co 的**首页结构**重排本站首页。
   -----------------------------------------------------------------------------
   边界（用户口径，2026-10-13）：
     · **只作用于首页**。本站的模板组件（`templates/lume/LumeTemplate.tsx`）只被
       `src/app/[lang]/page.tsx`（首页）使用；商品详情/集合/购物车/结算/账户走 `StoreChrome`，
       与本文件无关 ⇒ 这里改多狠都不会动到其它页。
     · **借版式、不换皮肤**：字体与配色沿用 Lumé 品牌令牌（Jost / --ink / --navy /
       --white / --porcelain / --steel-light，见 templates/lume/lume.css + brand-tokens.css），
       不引入参照站的墨绿 #1F473E / 米白 #F2EFE6 / Fraunces。
     · 分层：本文件在 `@layer components` 里写规则 ⇒ Tailwind 工具类（utilities 层）随时能覆盖，
       与仓库既有约定一致（见 styles/brand.css 顶部说明）。
   ============================================================================= */

@layer components {
  /* ── 首页 hero（全幅轮播：参照站 section-slideshow）───────────────────────
     参照站：1425×880（≈ 视口宽 × 62%），内容左侧居中，底部居中箭头/圆点。
     本站：高度 clamp(440px, 68vh, 860px) —— 手机不塌、超宽屏不无限拉高；
     文案放**左下角**（本站真实素材有白底商品图，中间偏左压暗图会把商品糊掉）。 */
  [data-home-hero] {
    background: var(--ink);
  }

  /* 图片/视频铺满整幅（object-cover）——**只在比例未知时**生效（容器是固定高度 clamp，改造前行为） */
  [data-home-hero] [data-home-hero-media] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── 比例模式（2026-10-14 用户口径「首页 banner 要按照真实比例来做」+「比例以第一张为准」；
      2026-10-15 用户口径：「min-height 改为 340px」+「媒体 object-fit 改为 cover」）──
     容器高度由 `aspect-ratio` = **第一张有尺寸素材的真实比例**决定（取值来自迁移 125 的 width/height，
     HomeHero 内联写在 `[data-banner-carousel]` 上）⇒ 整个轮播一个比例（不逐帧变）。
     ⚠️ `[data-home-hero-fit='contain']` 里的 `contain` 只是**比例模式的模式名**（HomeHero 的可观测钩子），
     字面 object-fit 自 2026-10-15 起是 `cover`：
       · 媒体 `object-fit: cover` ⇒ 比例与基准不一致的帧（例如基准是 2:1 的视频、后面是 2:3 的图）
         **裁切铺满**，不再上下留黑边。

     ⚠️ **H5 的高度地板（用户 2026-10-14 追问：「aspect-ratio 是固定比例，H5 比例不够、内容会被压缩」）**：
       只有 `aspect-ratio` 时，窄屏上"宽度 ÷ 比例"可能比叠在图上的**文案本身还矮**（实测 16:9 素材在
       320px 宽时容器只有 180px，而标题+圆点/箭头要 ~196px ⇒ 顶部被裁）⇒ 地板保证
       **高度 = max(宽度 ÷ 素材比例, 340px)**：标题/控制条完全落在容器内。桌面高度由 aspect-ratio 主导、
       地板很少触发（原 ≥640px 的 380px 档按本次单一数值口径一并收敛为 340px）；
       比例只来自数据、不随帧变 ⇒ 不需要过渡。 */
  [data-home-hero] [data-banner-carousel][data-home-hero-fit='contain'] {
    min-height: 340px;
  }
  [data-home-hero] [data-banner-carousel][data-home-hero-fit='contain'] [data-home-hero-media] {
    object-fit: cover;
  }

  /* swiper-slide 的**默认底色 = 黑**（用户口径 2026-10-14：「swiper-slide 背景颜色默认黑色」）。
     为什么需要一条显式规则：`swiper/css` 只给 `.swiper-slide` 定位/尺寸，**不给背景** ⇒ 之前是透明的，
     淡入淡出瞬间露出的是**容器**的 `--ink`（偏灰的深色）。现在由 slide 自己给纯黑，与视频黑场/淡出
     过渡观感一致（2026-10-15 媒体改 `cover` 后"contain 留边露黑底"的场景基本消失，此条作兜底保留）。
     作用域**只限首页 hero**：Highlights/通用广告位那些 swiper 的卡片自带白底与圆角，全局刷黑会在
     圆角外露出黑角（口径也不同 —— 那边之前定过默认 `#c4c4c4`）。 */
  [data-home-hero] .swiper-slide {
    background: #000;
  }

  /* 压暗层（2026-10-14 用户口径「background 偏黑，优化下」）：
     原来两层叠加后**作用面积很大**——底部到 62%、左侧到 70%，左下角最重处合成 ≈ .85 不透明度
     ⇒ 白底商品图会被压成一大条黑带（实测 hero 平均亮度只有 0.49）。
     现在把"黑"收敛到文案与控件真正占据的**底部 26% + 极轻的左侧**，上半幅基本不动：
       ① 底部：峰值 .68（在 0% 处，只有最底下一条），12% 处 .58、26% 处 .44、42% 处 .20、58% 起全透明；
       ② 左侧：峰值 .10，26% 处即归零（原来 .45 到 70%）；
       ③ 不再加"整幅全局压暗"，靠 ① 保证白色圆点/箭头描边的可读性。
     数值不是拍的：用 5 组候选跑像素采样对比度，选出的这组在**最坏情况（纯白素材）**下
       标题大字 3.58:1（大字下限 3.0）、CTA 5.24:1（小字下限 4.5）、圆点/箭头 5.82:1（下限 3.5），
       同时 hero 平均亮度 0.49 → 0.646（同上），观感明显不再发黑。
     断言见 dsh-browser/verify-home-purity-p1.mjs 的「压暗层不过黑 + 文案对比度达标」。 */
  [data-home-hero] [data-home-hero-scrim] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(to top, rgba(15, 15, 17, .68) 0%, rgba(15, 15, 17, .58) 12%, rgba(15, 15, 17, .44) 26%, rgba(15, 15, 17, .20) 42%, rgba(15, 15, 17, 0) 58%),
      linear-gradient(to right, rgba(15, 15, 17, .10) 0%, rgba(15, 15, 17, 0) 26%);
  }

  /* 🗑 已移除（2026-10-13 用户口径「data-marquee 移除掉」）：
     这里原来有一整段滚动词条样式（`[data-marquee]` / `[data-marquee-track]` / `[data-marquee-group]`
     + `@keyframes lume-marquee-x` + `prefers-reduced-motion` 分支）。组件 `MarqueeStrip.tsx`
     与模板里的调用点已一并删除，样式也删干净 —— 不留死代码。 */

  /* ── 商品标签页区（参照站 `section-product-tabs`）──────────────────────────
     段间留白取参照站节奏（56–92px），标题居中、字号 clamp 到 46px（参照站 h2 = 46px）。
     2026-10-14：标题组变成「主标 + 副标」，字号/间距集中在这里（组件里不再带 utility，
     否则主标→副标→内容 三段间距会各自为政）。 */
  [data-featured-tabs] {
    padding-block: clamp(52px, 6vw, 88px);
  }
  [data-featured-tabs] [data-featured-heading-group] {
    margin-bottom: 24px;                        /* 标题组 → 标签行（原来是主标自带的 mt-6 等效） */
  }
  [data-featured-tabs] [data-featured-heading] {
    margin: 0;
    font-family: var(--display, var(--sans));
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.02em;
    font-size: clamp(28px, 3.2vw, 46px);
    color: var(--ink);
  }
  /* 副标：与集合区 / 小橱窗同一套口径（小一号、灰、行宽 52ch、居中） */
  [data-featured-tabs] [data-featured-subheading] {
    margin: 10px 0 0;
    max-width: 52ch;
    margin-inline: auto;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
  }
  @media (min-width: 768px) {
    [data-featured-tabs] [data-featured-subheading] { font-size: 16.5px; }
  }

  /* 收藏心形（复用共享组件 WishlistHeart 的卡片形态）——定位上下文是本文件的 [data-featured-card]。
     为什么在这里写：既有定位规则挂在 `[data-product-grid] .card-shell .wish` 上（Dawn 卡片专用），
     本区不挂 `.card`/`data-product-grid`（两套卡片版式互不干扰），所以这里补一份等价样式。 */
  [data-featured-tabs] [data-card-wishlist] {
    position: absolute;
    right: 10px;
    top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    /* 与商品网格卡同一套强化（2026-10-16「心愿单按钮不明显」）：墨色图标 + 细环 + 柔和投影；悬停变红放大 */
    color: var(--ink);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 12%);
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), color .18s ease, box-shadow .18s ease;
  }
  [data-featured-tabs] [data-card-wishlist] svg { width: 22px; height: 22px; }
  @media (hover: hover) {
    [data-featured-tabs] [data-card-wishlist]:not(:disabled):hover {
      color: var(--brand-danger, #b3261e);
      transform: scale(1.08);
      box-shadow: 0 0 0 1px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 16%);
    }
  }
  [data-featured-tabs] [data-card-wishlist]:not(:disabled):active { transform: scale(.92); }
  [data-featured-tabs] [data-card-wishlist][aria-pressed="true"] { color: var(--brand-danger, #b3261e); }
  @media (prefers-reduced-motion: reduce) {
    [data-featured-tabs] [data-card-wishlist] { transition: none; }
    [data-featured-tabs] [data-card-wishlist]:hover,
    [data-featured-tabs] [data-card-wishlist]:active { transform: none; }
  }
  [data-featured-tabs] [data-card-wishlist]:disabled { opacity: .78; cursor: not-allowed; }

  /* 快速加购（`components/QuickAdd.tsx` + 可复用弹窗 `QuickAddDialog.tsx`，2026-10-14）——
     这里只给**位置**（按钮/弹窗的外观在 `tailwind.css` 的全局 `.quick-add*` 规则里）。
     覆盖层要**贴住图块**：图块 = `[data-featured-card-media]` 的 `aspect-[4/5]` + 圆角 12px
     ⇒ 用同一个 `aspect-ratio` 的透明层对齐，按钮落在它右下角 12px（Horizon 的 quick-add 同款位置）。
     ⚠️ 图块比例若改，这里必须同步（验收脚本按**实测矩形**断言"按钮在图块内、贴右下、不盖图心"）。 */
  [data-featured-tabs] [data-featured-card] > .quick-add {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    z-index: 2;
  }
  /* 与同卡心形（右上 10px）对称：按钮落右下 10px（2026-10-16 外观改成与心形同款圆钮） */
  [data-featured-tabs] [data-featured-card] > .quick-add > .quick-add__button {
    right: 10px;
    bottom: 10px;
  }

  /* ── 集合区（参照站 `section-collection-highlights`）─────────────────────
     底色 = **porcelain 灰**（2026-10-14 用户口径：「data-collection-showcase 使用背景色」⇒ 要一条
     看得见的底色带，故选 porcelain 而非页面白）。
     2026-10-14 顺序调整：本段移到**商品标签区之后、图文带之后**（原来是品牌故事之前），
     整页底色交替变成：标签页(白) → 图文带(无底) → 集合区(**porcelain**) → 小橱窗(porcelain)
     → 卖点条(无底) → 订阅(porcelain) —— 色阶靠 白/灰 交替交代分段，标题负责"连接性"。
     ⚠️ 本段**不带** `data-home-section`（见 CollectionShowcase 注释）：旧版段落钩子
     （品牌层 `.lume section[data-home-section]` 的 64px 留白）会与本段的节奏抢样式。
     字号/颜色也一并写死在这里，不依赖外层任何 section 级钩子或 utility。 */
  [data-collection-showcase] {
    /* 幻灯片宽度（CollectionShowcase 用内联 `width: var(--collection-slide-w)` 取用）——
       用户口径 2026-10-14：「复制之前 Highlights 的样式」⇒ 沿用那版的三档固定宽度
       （78vw / 320px / 400px）+ spaceBetween 20 + speed 600 + 露边。 */
    --collection-slide-w: 78vw;
    padding-block: clamp(56px, 6vw, 88px);
    background: var(--porcelain);
    color: var(--ink);
  }
  @media (min-width: 640px) {
    [data-collection-showcase] { --collection-slide-w: 320px; }
  }
  @media (min-width: 1024px) {
    [data-collection-showcase] { --collection-slide-w: 400px; }
  }
  /* ★ 2026-10-21（Shopify Collection list 对齐）：`columns=2/4` 时**桌面**按列数等分。
     默认 3 列 ⇒ 组件**不写** `data-collection-columns` 属性 ⇒ 上面三档固定宽度照旧
     （= 改造前的字节级行为；下面两条规则不会命中老配置）。
     `100%` = Swiper 容器宽（max-w-brand 内宽 1152px），间距 20px = 组件的 `spaceBetween`。 */
  @media (min-width: 1024px) {
    [data-collection-showcase][data-collection-columns="2"] {
      --collection-slide-w: calc((100% - 20px) / 2);
    }
    [data-collection-showcase][data-collection-columns="4"] {
      --collection-slide-w: calc((100% - 60px) / 4);
    }
  }
  [data-collection-showcase] [data-collection-heading] {
    font-size: clamp(28px, 3.2vw, 46px);
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--ink);
  }
  /* 集合区副标（2026-10-14 新增）：与标签区/小橱窗同一套口径 */
  [data-collection-showcase] [data-collection-subheading] {
    margin: 10px 0 0;
    max-width: 52ch;
    margin-inline: auto;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
  }
  @media (min-width: 768px) {
    [data-collection-showcase] [data-collection-subheading] { font-size: 16.5px; }
  }
  [data-collection-showcase] [data-collection-kicker] {
    color: var(--muted);
  }
  /* ── 集合卡：标题叠在图上 + 悬停过渡（2026-10-16 用户口径「图片标题改到图片上 并有过度效果」）──
     静止：底部渐变遮罩托住白字标题，行动文案行隐藏（下沉 + 透明）；
     悬停/键盘聚焦：图片缓放大、遮罩加深、标题上移、行动文案行淡入上滑、箭头右移。
     过渡只写在这里（元素上不挂 Tailwind 过渡类，否则 utilities 层会盖掉）。
     H5 无悬停 ⇒ `(hover: none)` 下行动文案常显，避免触屏用户看不到。 */
  [data-collection-showcase] [data-collection-card] {
    isolation: isolate; /* 圆角裁切在 Safari 缩放图片时不漏角 */
  }
  [data-collection-showcase] [data-collection-card-media] {
    transform: scale(1);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
  }
  [data-collection-showcase] [data-collection-card-scrim] {
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .18) 38%, rgba(0, 0, 0, 0) 62%);
    opacity: .85;
    transition: opacity .5s ease;
  }
  /* 静止时整块下沉一行（行动文案行高 ≈ 28px，被卡片 overflow 裁掉）⇒ 标题贴底；悬停回位 ⇒ 标题上移 */
  [data-collection-showcase] [data-collection-card-body] {
    color: #fff;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  }
  [data-collection-showcase] [data-collection-card-body]:has([data-collection-card-cta]) {
    transform: translateY(28px);
  }
  [data-collection-showcase] [data-collection-card-title] {
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .18);
  }
  [data-collection-showcase] [data-collection-card-count] {
    color: rgba(255, 255, 255, .78);
  }
  [data-collection-showcase] [data-collection-card-cta] {
    color: rgba(255, 255, 255, .92);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
  }
  [data-collection-showcase] [data-collection-card-cta] svg {
    transition: transform .4s ease;
  }
  [data-collection-showcase] [data-collection-card]:hover [data-collection-card-media],
  [data-collection-showcase] [data-collection-card]:focus-visible [data-collection-card-media] {
    transform: scale(1.06);
  }
  [data-collection-showcase] [data-collection-card]:hover [data-collection-card-scrim],
  [data-collection-showcase] [data-collection-card]:focus-visible [data-collection-card-scrim] {
    opacity: 1;
  }
  [data-collection-showcase] [data-collection-card]:hover [data-collection-card-body],
  [data-collection-showcase] [data-collection-card]:focus-visible [data-collection-card-body],
  [data-collection-showcase] [data-collection-card]:hover [data-collection-card-cta],
  [data-collection-showcase] [data-collection-card]:focus-visible [data-collection-card-cta] {
    opacity: 1;
    transform: translateY(0);
  }
  [data-collection-showcase] [data-collection-card]:hover [data-collection-card-cta] svg,
  [data-collection-showcase] [data-collection-card]:focus-visible [data-collection-card-cta] svg {
    transform: translateX(4px);
  }
  @media (hover: none) {
    [data-collection-showcase] [data-collection-card-body]:has([data-collection-card-cta]),
    [data-collection-showcase] [data-collection-card-cta] {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-collection-showcase] [data-collection-card-media],
    [data-collection-showcase] [data-collection-card-scrim],
    [data-collection-showcase] [data-collection-card-body],
    [data-collection-showcase] [data-collection-card-cta],
    [data-collection-showcase] [data-collection-card-cta] svg {
      transition: none;
    }
  }

  /* ── 图标卖点条（参照站 `section__icon-box`，318px 高）─────────────────── */
  [data-home-promises] {
    padding-block: clamp(48px, 5.5vw, 84px);
  }
  /* 卖点条的文字颜色也在这里写死（不靠 utility），避免与其它 section 级规则互相覆盖 */
  [data-home-promises] [data-home-promise-title] { color: var(--ink); }
  [data-home-promises] [data-home-promise-body] { color: var(--muted); }

  /* ── Swiper 翻页箭头：**鼠标移入该区域才显形 + 滑入 + 淡入**（参照站 `show-on-hover`）────
     用户 2026-10-13 四轮反馈的收敛过程（都写在注释里，别再回退）：
       ① 「只有透明度效果」⇒ 位移/缩放原来走 `transform`，而 Tailwind v4 用的是独立属性
          `translate` / `scale`，旧类名 `transition-[…,transform]` 覆盖不到；
       ② 「移动了但没有过渡效果」⇒ 位移只有 10px，肉眼看不出来 ⇒ 加到 28px；
       ③ 「过渡不自然、很僵硬」⇒ 缩放从 0.92 收到 0.96、去掉自定义贝塞尔；
       ④ **用户口径：就写 `transition: all .3s;`** ⇒ 过度时长/曲线一律用这条，不再自己发挥。
     所以按钮上的 Tailwind 过渡类（transition-all / duration-* / ease-*）**全部去掉**，
     统一由下面这条 CSS 决定（否则 utilities 层会盖掉它）。
     位移写 Tailwind 的 `--tw-translate-x` 变量（元素上 `-translate-y-1/2` 在管垂直居中，
     且 utilities 层优先级高于本层）；缩放直接写 `scale`。 */
  [data-showcase-prev],
  [data-showcase-next] {
    transition: all .3s;
  }
  @media (hover: hover) and (pointer: fine) {
    [data-swiper-hover] [data-showcase-prev],
    [data-swiper-hover] [data-collection-prev] {
      opacity: 0;
      --tw-translate-x: -28px;
      scale: .96;
    }
    [data-swiper-hover] [data-showcase-next],
    [data-swiper-hover] [data-collection-next] {
      opacity: 0;
      --tw-translate-x: 28px;
      scale: .96;
    }
    [data-swiper-hover]:hover [data-showcase-prev],
    [data-swiper-hover]:hover [data-showcase-next],
    [data-swiper-hover]:hover [data-collection-prev],
    [data-swiper-hover]:hover [data-collection-next],
    [data-swiper-hover] [data-showcase-prev]:focus-visible,
    [data-swiper-hover] [data-showcase-next]:focus-visible,
    [data-swiper-hover] [data-collection-prev]:focus-visible,
    [data-swiper-hover] [data-collection-next]:focus-visible {
      opacity: 1;
      --tw-translate-x: 0px;
      scale: 1;
    }
    /* 到头/到尾的按钮：显形后是"半透明灰"，提示不可点 */
    [data-swiper-hover]:hover [data-showcase-prev][disabled],
    [data-swiper-hover]:hover [data-showcase-next][disabled],
    [data-swiper-hover]:hover [data-collection-prev][disabled],
    [data-swiper-hover]:hover [data-collection-next][disabled] {
      opacity: .45;
    }
  }

  /* ── 首页小橱窗（banners position=home_showcase）────────────────────────
     版式（图 4:5 + 圆角 + 居中段标题）在 `ShowcaseStrip` 的 `variant="home"` 里；
     这里给**米白带（porcelain）+ 段间节奏** —— 用户 2026-10-14 口径「data-home-showcase 使用背景色」
     ⇒ 保留这条暖色带；它现在夹在图文带（已去底）与卖点条之间，是这一段编辑区的唯一底色块。 */
  [data-home-showcase] {
    /* Highlights = 满宽多边形轮播（用户 2026-10-14：参照站 Purity On Gram）。
       `--showcase-per-view` 是**本断点档位**：手机 2 / 平板 3 / **桌面 6**。
       `--showcase-slide-w` = **按档位**铺满一行、间距 8px。
       ⚠️ 2026-10-15 用户口径：「pc 默认 6 个居中展示，并不是四个均分」
         ⇒ **不再按素材条数收窄**（上一版写过 `min(素材数, 档位)`，素材只有 4 条时 4 张被拉成 1/4 宽铺满，
            与"6 档"的尺寸不一致、也不是居中）。现在恒定按档位算宽度，**素材不足一屏时整排居中**
            （`data-showcase-center` + 下面的 justify-content 规则）⇒ 单张尺寸永远和满屏时一致。
       为什么必须内联 var()：`swiper/css` 未分层，`.swiper-slide{width:100%}` 会压掉任何 @layer 规则；
       更关键的是**首屏**——数字档位下宽度要等 Swiper JS 初始化才写，首屏会先渲染成整行宽的巨图再跳回
       （用户反馈的"第一次进来会放大、抖动"）。用 var() 让首屏第一帧就是最终宽度。 */
    --showcase-per-view: 2;
    --showcase-slide-w: calc(
      (100% - 8px * (var(--showcase-per-view) - 1)) /
      var(--showcase-per-view)
    );
    padding-block: clamp(56px, 6vw, 88px);
    background: var(--porcelain);
  }
  /* 平板（≥768）：一行 3 张（2×8px 间距）。640~767 仍按手机档 2 张 —— 那个宽度下 3 张单张只剩
     ~200px，不如 2 张看得清。 */
  @media (min-width: 768px) {
    [data-home-showcase] { --showcase-per-view: 3; }
  }
  @media (min-width: 1024px) {
    [data-home-showcase] { --showcase-per-view: 6; }   /* 一行 6 张（5×8px 间距） */
  }
  /* 标题组（2026-10-14：主标换成 "In the spotlight" + 新增副标）。
     为什么把 utility 从组件挪到这里：主标原来靠 `mb-8` 给"标题→卡片 32px"，
     加了副标后节奏变成 主标→副标→卡片，需要一处统一管，不然两个间距会各自为政。
     字号：主标 clamp(26→44px) 维持原样；副标 15/16.5px、muted 灰、行宽 52ch（参照站段的副标口径）。 */
  [data-home-showcase] [data-showcase-heading-group] {
    margin-bottom: 32px;                       /* 标题组 → 卡片 */
  }
  [data-home-showcase] [data-showcase-heading] {
    margin: 0;
    font-family: var(--display, var(--sans));
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.02em;
    font-size: clamp(26px, 3vw, 44px);
    color: var(--ink);
  }
  [data-home-showcase] [data-showcase-subheading] {
    /* 有主标时副标顶 10px；只有副标（主标被清空）时不留空档 */
    margin: 10px 0 0;
    max-width: 52ch;
    margin-inline: auto;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--muted);
  }
  [data-home-showcase] [data-showcase-heading] + [data-showcase-subheading] { margin-top: 10px; }
  [data-home-showcase] [data-showcase-heading-group] > [data-showcase-subheading]:first-child { margin-top: 0; }
  @media (min-width: 768px) {
    [data-home-showcase] [data-showcase-subheading] { font-size: 16.5px; }
  }
  /* 整排对齐（2026-10-15 用户口径：「pc 默认 6 个居中展示，并不是四个均分」）：
     用 **`justify-content: safe center`** 一处表达两种情形，不再按断点分 token：
       · 素材**放得下**（少于该断点档位）⇒ 整排**居中**，单张仍按档位宽度（不是均分铺满）；
       · 素材**放不下**（多于一屏，要翻页）⇒ `safe` 会自动退回 `flex-start` 左对齐 ——
         这正是需要的：普通 `center` 在溢出时会把前几张推出容器左侧、**滚不回来**。
     为什么用 CSS 而不是 Swiper 的 `centeredSlides`：`centeredSlides` 会把**当前帧**摆到容器中心，
     6 张/行的档位下第一帧被推到 609px、右侧溢出屏幕（实测）；这里要的是"整排居中、不平分拉伸"。
     （`justify-content` 与 `.swiper-wrapper` 的 `display:flex` 是两个属性，不冲突：未分层 CSS 只管 display。） */
  [data-showcase-strip][data-showcase-variant="home"] .swiper-wrapper {
    justify-content: safe center;
  }

  /* ── 编辑感图文带（品牌故事）──────────────────────────────────────────────
     底色（2026-10-14 用户口径「data-home-section 移除背景色」）：原来是 porcelain 米白带，
     现在**去底色**（露出页面白底）—— 顺序调整后它与小橱窗相邻，两段都有底会连成一片，
     分段交给「集合区(白底) → 图文带(无底) → 小橱窗(porcelain)」的交替来交代。
     标题字号向参照站 h2（46px）靠，正文保持组件原有行高。 */
  [data-home-section="image-text"] {
    padding-block: clamp(52px, 6vw, 92px);
  }
  [data-home-section="image-text"] [data-image-card-category] {
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  [data-home-section="image-text"] [data-image-card-title] {
    font-family: var(--display, var(--sans));
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 400;
  }
  /* 品牌故事副标（2026-10-14 新增「这里的内容」）：标题层的一行小灰字，**与 `materialLead`
     正文段落分工不同**（那边是正常行高的段落）。居中在本段是特例：本段是两栏图文，
     副标属于右侧文案列，所以左对齐、与主标同一套垂直节奏（主标→副标 10px）。 */
  [data-home-section="image-text"] [data-image-card-subheading] {
    margin: 10px 0 0;
    max-width: 52ch;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
  }
  @media (min-width: 768px) {
    [data-home-section="image-text"] [data-image-card-subheading] { font-size: 16.5px; }
  }

  /* ── 订阅段（参照站 Newsletter：居中、留白更足）──────────────────────────
     `templates/lume/lume.css` 里 `.signup .inner` 是**两栏**（左文案右表单，layer(brand)）；
     参照站的订阅是**居中一栏** ⇒ 这里在 components 层覆盖为单栏居中（层序上 utilities/components
     都高于 brand，所以不需要 `!important`），并给表单条一个舒适的最大宽度。 */
  [data-home-section="newsletter"] {
    padding-block: clamp(56px, 6vw, 96px);
  }
  [data-home-section="newsletter"] .inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    text-align: center;
    gap: 24px;
  }
  [data-home-section="newsletter"] .inner > div {
    margin-inline: auto;
    max-width: 640px;
  }
  [data-home-section="newsletter"] .inner > div > p { margin-inline: auto; max-width: 52ch; }
  [data-home-section="newsletter"] .signup-bar {
    margin-inline: auto;
    width: 100%;
    max-width: 520px;
  }
  /* 勾选说明那一行（`.consent`）与表单条**同宽同位**，否则它会在容器左边单独起一行 */
  [data-home-section="newsletter"] .consent {
    margin-inline: auto;
    max-width: 520px;
    text-align: left;
  }
  /* ── 2026-10-23（Shopify 功能对齐，本批 2/5）：Dawn Newsletter 的 `alignment=left` ──
     默认 center = 上面那套（改造前）**一行不改**；只有卖家显式选 left 时组件才在
     `<section class="signup">` 上写 `data-newsletter-align="left"`，这里把「文案 / 表单条 /
     勾选说明」全部贴容器左边（多一个属性选择器 = 比上面的居中规则多一层特异性，无需 !important）。 */
  [data-home-section="newsletter"][data-newsletter-align="left"] .inner {
    text-align: left;
    /* ⚠️ 不要改成 `justify-items: start`：`.signup-bar` 是 `width:100%` 的网格子项，
       start 会让表单条按 max-content 收缩（输入框 min-width:0）⇒ 订阅条会缩成一条。
       保持 stretch + margin-inline:0 才是"整条贴左"的正确形态。 */
  }
  [data-home-section="newsletter"][data-newsletter-align="left"] .inner > div {
    margin-inline: 0;
  }
  [data-home-section="newsletter"][data-newsletter-align="left"] .inner > div > p {
    margin-inline: 0;
  }
  [data-home-section="newsletter"][data-newsletter-align="left"] .signup-bar {
    margin-inline: 0;
  }
  [data-home-section="newsletter"][data-newsletter-align="left"] .consent {
    margin-inline: 0;
  }
}