/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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: 2 / 3;
    background: #fff;
    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: contain;
    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 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
  .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;
  }
  .lume .card .tag-soldout {
    top: auto;
    bottom: 10px;
    background: #121212;
    color: #fff;
    border-radius: 2px;
  }
  .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);
}

/* ---------- Lumé Classic：品牌 lume 的第三套主题 —— 全站直角（用户 2026-10-23：「这个主题圆角是0」） ----------
   根元素同时带 `.lume`（配色/字体/按钮全部沿用）与 `.lume-classic`，这里只把圆角令牌归零：
   应用层 `rounded-brand` / 按钮 `--brand-radius-btn` / 模板 lume.css 的 `--r-sm/md/lg` 一起生效。
   胶囊（`--brand-radius-pill`：数量徽标、色板圆点这类**形状**）保持不变。
   未分层且写在 `.lume` 之后 ⇒ 同一元素上本块覆盖 `.lume` 的同名令牌。 */
.lume-classic {
  /* 配色 = 设计稿 Lumé Redesign v2（2026-11）：冷瓷灰 → 暖奶油底 + 墨蓝字 + 金色强调。
     覆盖的是 lume.css 的模板变量（--ink / --navy / --porcelain …），--brand-* 经上面 `.lume` 块的 var() 自动跟随。 */
  --ink: #1C1F2A;
  --navy: #26304A;               /* 公告条 / 材质带 */
  --porcelain: #F1ECE4;          /* 次级底（订阅带 / 汇总面板），奶油底上 #5E6270 为 5.3:1 */
  --steel-light: #E6DED2;        /* 细线 */
  --muted: #5E6270;
  --line: rgba(28, 31, 42, .12);
  --line-strong: rgba(28, 31, 42, .22);
  --lc-cream: #FBF8F3;           /* 页面底 */
  --lc-gold: #8A6A35;            /* 眉题 / 链接悬停；奶油底上 4.9:1 */
  --lc-sand: #EDE5D9;            /* 图片占位渐变起点 */
  --brand-muted: #5E6270;        /* 奶油底上 5.9:1（AA） */
  --brand-surface: var(--lc-cream);
  background: var(--lc-cream);
  /* 标题字体 = 设计交付 Lumé 的 Bodoni Moda（应用层 `font-display` 全部跟随；正文仍是 Jost） */
  --brand-font-display: "Bodoni Moda", "Didot", serif;
  /* 内容区 1280px = 设计稿 `.wrap{max-width:1360px;padding:0 40px}`；内页是 max-w-brand + px-6 ⇒ 1280 + 2×24 */
  --brand-max: 1328px;
  --max: 1280px;                 /* 列表页 `.wrap px-0` 走模板变量，与 max-w-brand 内容区同宽 */
  --brand-radius: 0px;
  --brand-radius-btn: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
}
/* 购物车等不带页脚的短页：根节点不满一屏，露出的 body 也要是奶油底 */
body:has(> .lume-classic) { background: #FBF8F3; }
/* 结算页配色不跟 Redesign v2 走（用户 2026-11-03：结算保持 Shopify 风格，主题只改字体/圆角）⇒ 还原改版前的 lume 值 */
.lume-classic:has([data-checkout-scope]) {
  --ink: #121212;
  --navy: #2B3A52;
  --porcelain: #F7F7F7;
  --steel-light: #E5E5E5;
  --muted: #6B6B6B;
  --line: rgba(18, 18, 18, .10);
  --line-strong: rgba(18, 18, 18, .18);
  --brand-muted: #5e6672;
  --brand-surface: #FFFFFF;
  background: #FFFFFF;
}
body:has(> .lume-classic [data-checkout-scope]) { background: #FFFFFF; }

/* ---------- Studio Gimme：品牌 gimme 的主题（1:1 参照 studiogimme.com）----------
   根元素同时带 `.lume`（复用 lume 的重置 / 外壳 / 通用商品卡结构）与 `.gimme`；本块**未分层且在 `.lume` 之后**
   ⇒ 同一元素上覆盖 lume 的模板局部变量（--ink / --navy / --sans / --display …）与 --brand-* 令牌，整体换肤。
   取值来自参照站 `:root` 实测：文字 #29211f、主色（按钮 / 描边 / 页脚底）#5d2412（hover #b24523）、
   页头底 #fcfcf9、正文 Instrument Sans、标题 Fraunces 300、logo Work Sans 500、**全部直角**。 */
.gimme {
  --ink: #29211f;
  --navy: #5d2412;               /* lume 模板里的「强调色」槽位 = gimme 品牌棕 */
  --porcelain: #f5f5f5;
  --steel: #8a807d;
  --steel-light: #e8e8e8;
  --white: #ffffff;
  --muted: #6b625f;              /* 参照站 meta 色 rgba(41,33,31,.6) 在白底约 4.2:1 ⇒ 取实色 #6b625f（白底 5.6:1，AA） */
  --line: rgba(41, 33, 31, .12);
  --line-strong: rgba(41, 33, 31, .24);
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Fraunces", Georgia, serif;
  --max: 1440px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --ring: 0 0 0 1px var(--ink);

  --brand-ink: var(--ink);
  --brand-muted: #6b625f;
  --brand-line: #e8e8e8;
  --brand-surface: #ffffff;
  --brand-surface-2: #f5f5f5;
  --brand-accent: #5d2412;       /* 白字 11.2:1 */
  --brand-accent-ink: #ffffff;
  --brand-danger: #b3261e;
  --brand-font-display: "Fraunces", Georgia, serif;
  --brand-font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --brand-radius: 0px;
  --brand-radius-pill: 999px;
  --brand-radius-btn: 0px;
  /* 内容区宽度 1400（用户 2026-10-28）：内页 max-w-brand + px-6（左右各 24）⇒ 1448；首页 / 页头 / 页脚用 --gm-content 同一口径 */
  --gm-content: 1400px;
  --gm-gutter: 24px;
  --brand-max: calc(var(--gm-content) + 2 * var(--gm-gutter));
}

/* ---------- 90 NOTES：lume 品牌主题池里的第四套（1:1 参照 90notes.com，Shopify Vantage）----------
   根元素同时带 `.lume` 与 `.n90`（类名不能以数字开头；主题 key 仍是 `90notes`）；本块未分层且在 `.lume` 之后 ⇒ 整体换肤。
   取值来自参照站 `:root` 实测：正文 #333、导航 #000、主按钮洋红 #d8137d（hover #ed3196）、次按钮 / 公告条浅粉 #fcbbd2、
   箭头底 #f4f4f4、分隔 #dfdfdf、页脚底 #f5f5f5；正文 Karla 14px、页脚标题 Poppins 600、段标题 TT Bluescreens（商用字体，
   本仓不分发 ⇒ 回落 Google Fonts 的 Antonio，见 docs/theme-90notes.md）；**全部直角**。 */
.n90 {
  --ink: #333333;
  --navy: #fcbbd2;               /* lume 模板「强调色」槽位 = 公告条 / 次按钮浅粉（StoreHeader 的公告条读 --navy） */
  --porcelain: #f5f5f5;
  --steel: #777777;
  --steel-light: #dfdfdf;
  --white: #ffffff;
  --muted: #666666;              /* 白底 5.7:1（AA） */
  --line: #dfdfdf;
  --line-strong: rgba(0, 0, 0, .35);
  --sans: "Karla", "Helvetica Neue", Arial, sans-serif;
  --display: "TT-Bluescreens-Regular", "Antonio", "Arial Narrow", sans-serif;
  --n90-pink: #d8137d;           /* 主按钮 / 箭头 / 页脚标题 */
  --n90-pink-hover: #ed3196;
  --n90-blush: #fcbbd2;
  --n90-heading: "Poppins", "Karla", Arial, sans-serif;
  --max: 1440px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --ring: 0 0 0 1px var(--ink);

  --brand-ink: #333333;
  --brand-muted: #666666;
  --brand-line: #dfdfdf;
  --brand-surface: #ffffff;
  --brand-surface-2: #f5f5f5;
  --brand-accent: #d8137d;       /* 白字 4.9:1（AA） */
  --brand-accent-ink: #ffffff;
  --brand-danger: #960000;
  --brand-font-display: "TT-Bluescreens-Regular", "Antonio", "Arial Narrow", sans-serif;
  --brand-font-sans: "Karla", "Helvetica Neue", Arial, sans-serif;
  --brand-radius: 0px;
  --brand-radius-pill: 999px;
  --brand-radius-btn: 0px;
  /* 内容区**铺满**、不封顶（2026-11-02 用户口径，参照站 Vantage gridlock）：
     外层 `padding: 0 calc(5.04167% - 15px)`、栏位再左右各 15px ⇒ 内容边缘落在视口宽的 5.04167%（1440 下 ≈ 72.6px）。
     --n90-pad = 外层边距（照参照站原值），--n90-col = 栏位内边距；--n90-edge = 两者之和（无栏位结构的容器直接用它）。 */
  --n90-pad: calc(5.04167% - 15px);
  --n90-col: 15px;
  --n90-edge: 5.04167%;
  --brand-max: none;
}

/* ---------- 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-surface: var(--brand-surface, #ffffff);
    --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-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-\[14px\] {
    top: 14px;
  }
  .top-\[23px\] {
    top: 23px;
  }
  .top-\[24px\] {
    top: 24px;
  }
  .top-\[calc\(100\%\+6px\)\] {
    top: calc(100% + 6px);
  }
  .top-\[calc\(100\%\+10px\)\] {
    top: calc(100% + 10px);
  }
  .top-full {
    top: 100%;
  }
  .-right-2 {
    right: calc(var(--spacing) * -2);
  }
  .-right-3\.5 {
    right: calc(var(--spacing) * -3.5);
  }
  .-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);
  }
  .-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);
  }
  .left-\[-5px\] {
    left: -5px;
  }
  .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-1 {
    grid-column: 1;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .col-start-1 {
    grid-column-start: 1;
  }
  .col-start-2 {
    grid-column-start: 2;
  }
  .col-start-3 {
    grid-column-start: 3;
  }
  .row-start-1 {
    grid-row-start: 1;
  }
  .row-start-2 {
    grid-row-start: 2;
  }
  .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-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }
  .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-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .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-3 {
    margin-left: calc(var(--spacing) * -3);
  }
  .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;
  }
  .contents {
    display: contents;
  }
  .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-1 {
    height: var(--spacing);
  }
  .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-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-\[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-\[75px\] {
    height: 75px;
  }
  .h-\[76px\] {
    height: 76px;
  }
  .h-\[150px\] {
    height: 150px;
  }
  .h-\[clamp\(440px\,82vh\,880px\)\] {
    height: clamp(440px, 82vh, 880px);
  }
  .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-\[85vh\] {
    max-height: 85vh;
  }
  .max-h-\[320px\] {
    max-height: 320px;
  }
  .max-h-\[330px\] {
    max-height: 330px;
  }
  .max-h-\[360px\] {
    max-height: 360px;
  }
  .max-h-\[clamp\(180px\,36dvh\,360px\)\] {
    max-height: clamp(180px, 36dvh, 360px);
  }
  .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-10 {
    min-height: calc(var(--spacing) * 10);
  }
  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }
  .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-\[46px\] {
    min-height: 46px;
  }
  .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-auto {
    width: auto !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\/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(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-\[250px\] {
    width: 250px;
  }
  .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-\[26ch\] {
    max-width: 26ch;
  }
  .max-w-\[32ch\] {
    max-width: 32ch;
  }
  .max-w-\[38ch\] {
    max-width: 38ch;
  }
  .max-w-\[40vw\] {
    max-width: 40vw;
  }
  .max-w-\[44ch\] {
    max-width: 44ch;
  }
  .max-w-\[44vw\] {
    max-width: 44vw;
  }
  .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-\[210px\] {
    max-width: 210px;
  }
  .max-w-\[220px\] {
    max-width: 220px;
  }
  .max-w-\[300px\] {
    max-width: 300px;
  }
  .max-w-\[420px\] {
    max-width: 420px;
  }
  .max-w-\[480px\] {
    max-width: 480px;
  }
  .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-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem);
  }
  .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-4 {
    min-width: calc(var(--spacing) * 4);
  }
  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }
  .min-w-\[2\.5rem\] {
    min-width: 2.5rem;
  }
  .min-w-\[16px\] {
    min-width: 16px;
  }
  .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-\[155px\] {
    min-width: 155px;
  }
  .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;
  }
  .basis-full {
    flex-basis: 100%;
  }
  .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;
  }
  .cursor-zoom-in {
    cursor: zoom-in;
  }
  .touch-none {
    touch-action: none;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .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-cols-\[92px_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: 92px minmax(0,1fr) auto;
  }
  .grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  }
  .grid-rows-\[0fr\] {
    grid-template-rows: 0fr;
  }
  .grid-rows-\[1fr\] {
    grid-template-rows: 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .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 {
    gap: 0px;
  }
  .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-7 {
    gap: calc(var(--spacing) * 7);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: 0;
    margin-block-end: 0;
  }
  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * 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-1\.5 {
    column-gap: calc(var(--spacing) * 1.5);
  }
  .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-0 {
    row-gap: 0px;
  }
  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * 0.5);
  }
  .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-center {
    justify-self: center;
  }
  .justify-self-end {
    justify-self: flex-end;
  }
  .justify-self-start {
    justify-self: flex-start;
  }
  .justify-self-stretch {
    justify-self: stretch;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .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;
  }
  .\[border-radius\:Npx\] {
    border-radius: Npx;
  }
  .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-\[10px\] {
    border-radius: 10px;
  }
  .rounded-\[12px\] {
    border-radius: 12px;
  }
  .rounded-\[14px\] {
    border-radius: 14px;
  }
  .rounded-\[Npx\] {
    border-radius: Npx;
  }
  .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-none {
    border-radius: 0;
  }
  .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-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-\[\#008060\]\/20 {
    border-color: color-mix(in oklab, #008060 20%, transparent);
  }
  .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\/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-muted\/60 {
    border-color: var(--brand-muted, #5e6672);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--brand-muted, #5e6672) 60%, 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-\[\#008060\] {
    background-color: #008060;
  }
  .bg-\[\#F9D3E6\] {
    background-color: #F9D3E6;
  }
  .bg-\[\#c4c4c4\] {
    background-color: #c4c4c4;
  }
  .bg-\[\#f1f8f4\] {
    background-color: #f1f8f4;
  }
  .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\/25 {
    background-color: color-mix(in srgb, #000 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
  }
  .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-black\/85 {
    background-color: color-mix(in srgb, #000 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 85%, 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\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .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-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .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-12 {
    padding-right: calc(var(--spacing) * 12);
  }
  .pr-20 {
    padding-right: calc(var(--spacing) * 20);
  }
  .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-\[calc\(0\.75rem_\+_env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
  .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-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11\.3px\] {
    font-size: 11.3px;
  }
  .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-\[28px\] {
    font-size: 28px;
  }
  .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-\[-0\.02em\] {
    --tw-tracking: -0.02em;
    letter-spacing: -0.02em;
  }
  .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-line {
    white-space: pre-line;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[\#0b4f3d\] {
    color: #0b4f3d;
  }
  .text-\[\#0c5132\] {
    color: #0c5132;
  }
  .text-\[\#4f6f61\] {
    color: #4f6f61;
  }
  .text-\[\#008060\] {
    color: #008060;
  }
  .text-\[\#fcfcf9\] {
    color: #fcfcf9;
  }
  .text-\[var\(--ck-accent\,\#1773b0\)\] {
    color: var(--ck-accent,#1773b0);
  }
  .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\/50 {
    color: var(--brand-muted, #5e6672);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--brand-muted, #5e6672) 50%, transparent);
    }
  }
  .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-muted\/70 {
    color: var(--brand-muted, #5e6672);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--brand-muted, #5e6672) 70%, 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-\[\#1a1a1a\] {
    accent-color: #1a1a1a;
  }
  .accent-\[var\(--brand-accent\)\] {
    accent-color: var(--brand-accent);
  }
  .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_-8px_30px_rgba\(0\,0\,0\,0\.12\)\] {
    --tw-shadow: 0 -8px 30px 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_0_1px_var\(--color-ink\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--color-ink));
    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_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_10px_30px_rgba\(0\,0\,0\,0\.08\)\] {
    --tw-shadow: 0 10px 30px var(--tw-shadow-color, rgba(0,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_12px_32px_rgba\(0\,0\,0\,0\.14\)\] {
    --tw-shadow: 0 12px 32px var(--tw-shadow-color, rgba(0,0,0,0.14));
    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-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,);
  }
  .backdrop-filter {
    -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-\[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-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 0.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .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\: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;
  }
  .peer-focus-visible\:ring-2:is(:where(.peer):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);
  }
  .peer-focus-visible\:ring-ink\/30:is(:where(.peer):focus-visible ~ *) {
    --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);
    }
  }
  .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-\[\#008060\]\/45:hover {
      border-color: color-mix(in oklab, #008060 45%, transparent);
    }
    .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-\[\#e9f5ee\]:hover {
      background-color: #e9f5ee;
    }
    .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\/20:hover {
      background-color: color-mix(in srgb, #fff 20%, transparent);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/20:hover {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
    .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-surface:hover {
      color: var(--brand-surface, #ffffff);
    }
    .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\:border-ink:focus {
    border-color: var(--brand-ink, #141414);
  }
  .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\/40:disabled {
    color: var(--brand-muted, #5e6672);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--brand-muted, #5e6672) 40%, 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\: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 < 340px) {
    .max-\[340px\]\:hidden {
      display: none;
    }
  }
  @media (width < 64rem) {
    .max-lg\:hidden {
      display: none;
    }
    .max-lg\:min-h-\[44px\] {
      min-height: 44px;
    }
    .max-lg\:min-w-\[40px\] {
      min-width: 40px;
    }
    .max-lg\:justify-center {
      justify-content: center;
    }
  }
  @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-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-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\:justify-between {
      justify-content: space-between;
    }
    .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-4 {
      padding: calc(var(--spacing) * 4);
    }
    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
    .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-right {
      text-align: right;
    }
    .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\:mb-8 {
      margin-bottom: calc(var(--spacing) * 8);
    }
    .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\:absolute {
      position: absolute;
    }
    .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\:left-0 {
      left: 0px;
    }
    .lg\:z-10 {
      z-index: 10;
    }
    .lg\:order-first {
      order: -9999;
    }
    .lg\:order-last {
      order: 9999;
    }
    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }
    .lg\:col-start-1 {
      grid-column-start: 1;
    }
    .lg\:row-start-2 {
      grid-row-start: 2;
    }
    .lg\:mx-0 {
      margin-inline: 0px;
    }
    .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\:-mr-0\.5 {
      margin-right: calc(var(--spacing) * -0.5);
    }
    .lg\:mb-0 {
      margin-bottom: 0px;
    }
    .lg\:block {
      display: block;
    }
    .lg\:flex {
      display: flex;
    }
    .lg\:hidden {
      display: none;
    }
    .lg\:inline {
      display: inline;
    }
    .lg\:inline-flex {
      display: inline-flex;
    }
    .lg\:h-7 {
      height: calc(var(--spacing) * 7);
    }
    .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-\[34px\] {
      height: 34px;
    }
    .lg\:h-\[58px\] {
      height: 58px;
    }
    .lg\:h-\[76px\] {
      height: 76px;
    }
    .lg\:h-\[88px\] {
      height: 88px;
    }
    .lg\:h-auto {
      height: auto;
    }
    .lg\:max-h-\[92vh\] {
      max-height: 92vh;
    }
    .lg\:max-h-none {
      max-height: none;
    }
    .lg\:min-h-0 {
      min-height: 0px;
    }
    .lg\:min-h-\[40px\] {
      min-height: 40px;
    }
    .lg\:min-h-\[calc\(100vh-89px\)\] {
      min-height: calc(100vh - 89px);
    }
    .lg\:w-7 {
      width: calc(var(--spacing) * 7);
    }
    .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-\[28vw\] {
      max-width: 28vw;
    }
    .lg\:max-w-\[60vw\] {
      max-width: 60vw;
    }
    .lg\:max-w-\[460px\] {
      max-width: 460px;
    }
    .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\:-translate-x-full {
      --tw-translate-x: -100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .lg\:translate-x-0 {
      --tw-translate-x: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .lg\:translate-y-0 {
      --tw-translate-y: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .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-\[auto_minmax\(0\,1fr\)_auto\] {
      grid-template-columns: auto minmax(0,1fr) auto;
    }
    .lg\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
      grid-template-columns: minmax(0,1fr) auto;
    }
    .lg\:grid-rows-\[1fr\] {
      grid-template-rows: 1fr;
    }
    .lg\:grid-rows-\[112px_56px\] {
      grid-template-rows: 112px 56px;
    }
    .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\:gap-x-8 {
      column-gap: calc(var(--spacing) * 8);
    }
    .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-7 {
      padding-inline: calc(var(--spacing) * 7);
    }
    .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-0 {
      padding-top: 0px;
    }
    .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-7 {
      padding-top: calc(var(--spacing) * 7);
    }
    .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-7 {
      padding-right: calc(var(--spacing) * 7);
    }
    .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-\[28px\] {
      font-size: 28px;
    }
    .lg\:text-\[30px\] {
      font-size: 30px;
    }
    .lg\:text-\[34px\] {
      font-size: 34px;
    }
    .lg\:text-\[54px\] {
      font-size: 54px;
    }
    .lg\:opacity-100 {
      opacity: 100%;
    }
    .lg\:transition-none {
      transition-property: none;
    }
    .lg\:duration-500 {
      --tw-duration: 500ms;
      transition-duration: 500ms;
    }
    .lg\:ease-\[cubic-bezier\(\.33\,0\,0\,1\)\] {
      --tw-ease: cubic-bezier(.33,0,0,1);
      transition-timing-function: cubic-bezier(.33,0,0,1);
    }
  }
  @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\]_\.ui-btn\]\:h-\[48px\] [data-od-aftersales] .ui-btn {
    height: 48px;
  }
  .\[\&_\[data-od-aftersales\]_\.ui-btn\]\:py-0 [data-od-aftersales] .ui-btn {
    padding-block: 0px;
  }
  .\[\&_\[data-od-aftersales\]_\.ui-btn\]\:text-\[14px\] [data-od-aftersales] .ui-btn {
    font-size: 14px;
  }
  .\[\&_\[data-od-aftersales\]_\.ui-btn\]\:font-semibold [data-od-aftersales] .ui-btn {
    --tw-font-weight: 500;
    font-weight: 500;
  }
  .\[\&_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;
    }
  }
  .\[\&\>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: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
  [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;
  }
}
@media print {
  body {
    background: #fff !important;
  }
  body * {
    visibility: hidden !important;
  }
  [data-proforma], [data-proforma] * {
    visibility: visible !important;
  }
  [data-proforma] {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  [data-proforma-actions] {
    display: none !important;
  }
}
[data-sf-nav-dismissed] > [data-sf-nav-children="1"] {
  visibility: hidden !important;
  opacity: 0 !important;
}
@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-[2/3]` + 圆角 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: 2 / 3;
    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;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-lume-classic.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
   Lumé Classic 主题皮肤（品牌 lume 的第三套主题，templateKey `lume-classic`）
   -----------------------------------------------------------------------------
   口径（用户 2026-10-23）：版式**严格按设计交付** yehwang-storefront-templates 的 lume.css；
   按钮 / 颜色 / 圆角 / 阴影**沿用当前 lume 主题**。
     · 模板 JSX 沿用交付物类名（.hero / .tiles / .card / .material …）⇒ 当前主题的
       templates/lume/lume.css 已经给了这些类的按钮、配色、圆角、阴影 —— 本文件**不碰**这些；
     · 本文件只补交付物独有的东西：衬线标题（Bodoni Moda）、hero 渐变底 + 扫光、
       各段字号 / 留白 / 栅格节奏、hover 加购条、订阅两栏。
   作用域：首页正文限定 `.lume-classic [data-lc-home]`；页头限定 `.lume-classic [data-sf-header]`
     （首页与内页 StoreChrome 共用同一个 StoreHeader，`layout="centered"`）。
     圆角归零的令牌在 brand-tokens.css 的 `.lume-classic` 块（全站生效）。
   分层：**未分层**（同 theme-lj-pop.css），必须在 tailwind.css / home-lume.css 之后引入 ——
     订阅段的 `[data-home-section="newsletter"]` 居中规则在 @layer components，只有未分层规则压得过。
   ========================================================================== */

/* ── 页头（交付模板：公告条 13px / 主行 76px / 类目与工具 14px / 无投影） ──
   吸顶口径 = 交付模板：**只有导航行吸顶，公告条随页面滚走**。
   `.lume header` 整体 sticky（含公告条）⇒ 有公告条时把 header 的 `top` 设成 −公告条高度：
   滚动后公告条刚好藏到视口上方，导航行贴顶（StoreHeader 算 `--sf-header-h` 时会扣掉这段负 top）。 */
.lume-classic [data-sf-header] { box-shadow: none; border-bottom: 1px solid var(--steel-light); }
.lume-classic [data-sf-header]:has(> [data-sf-announce]) { top: -38px; }
.lume-classic [data-sf-header] [data-sf-announce] p { font-size: 13px; letter-spacing: .02em; opacity: 1; }
.lume-classic [data-sf-header] [data-sf-announce] > div { height: 38px; }
.lume-classic [data-sf-hdr-layout="centered"] [data-sf-hdr-nav-item],
.lume-classic [data-sf-hdr-layout="centered"] [data-sf-nav-more-trigger] { font-size: 14px; }
.lume-classic [data-sf-header] [data-sf-hdr-row="main"] { border-bottom: 0; }
/* 下拉卡 / 下拉链接在 StoreHeader 里是写死的 12px / 8px 圆角（不走令牌）⇒ 本主题直角 */
.lume-classic [data-sf-header] [data-sf-nav-children],
.lume-classic [data-sf-header] [data-sf-nav-children] a { border-radius: 0; }

/* ── Redesign v2（2026-11）页头：主行 88px、公告条奶油字、链接悬停金色、袋子数量是文字「Bag (1)」 ── */
.lume-classic [data-sf-header] [data-sf-announce] { color: #F4EFE7; }
.lume-classic [data-sf-hdr-layout="centered"] :is([data-sf-hdr-nav-item], [data-sf-nav-more-trigger]),
.lume-classic [data-sf-hdr-tools="text"] > :is(a, button) { transition: color .2s; }
.lume-classic [data-sf-hdr-layout="centered"] :is([data-sf-hdr-nav-item], [data-sf-nav-more-trigger]):hover,
.lume-classic [data-sf-hdr-tools="text"] > :is(a, button):hover { color: var(--lc-gold); }
@media (min-width: 1024px) {
  .lume-classic [data-sf-hdr-layout="centered"] { height: 88px; }
  .lume-classic [data-sf-hdr-tools="text"] { gap: 22px; }
  /* 胶囊徽标 → 跟在 Bag 后的「(n)」：保留同一节点（加购时的 badge-pop 动画照旧），只换外观 */
  .lume-classic [data-sf-hdr-tools="text"] [data-sf-hdr-bag-count] {
    position: static;
    height: auto;
    min-width: 0;
    margin-left: 4px;
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
  }
  .lume-classic [data-sf-hdr-tools="text"] [data-sf-hdr-bag-count]::before { content: "("; }
  .lume-classic [data-sf-hdr-tools="text"] [data-sf-hdr-bag-count]::after { content: ")"; }
}

.lume-classic [data-lc-home] {
  --lc-display: "Bodoni Moda", "Didot", serif;
  background: var(--lc-cream);
}

.lume-classic [data-lc-home] h1,
.lume-classic [data-lc-home] h2,
.lume-classic [data-lc-home] h3,
.lume-classic [data-lc-home] dt {
  font-family: var(--lc-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.05;
}

.lume-classic [data-lc-home] > section { padding: 0; }
/* 与内页 `max-w-brand px-6` 同一口径（--brand-max 见 brand-tokens.css 的 .lume-classic）⇒ 首页与列表页网格同宽同边距 */
.lume-classic [data-lc-home] .wrap { max-width: var(--brand-max); padding: 0 24px; }

/* =============================================================================
   首页 Redesign v2（2026-11，设计稿「Lumé Redesign v2 · Home」）
   段落：全幅 hero → 卖点条 → Shop by piece → 季节编辑区 → Most loved → 藏蓝材质带 → 评价
        → 图文区（CMS rich_text）→ 服务三卡 → 订阅（沙色底）
   类名一律 `lc-*`（避开 lume.css 的 .hero / .tile / .grid 等通用类）；商品卡仍是共用的 `.grid > .card`。
   ========================================================================== */
.lume-classic [data-lc-home] .lc-sec { padding-top: 104px; }
.lume-classic [data-lc-home] .lc-ph { display: block; width: 100%; height: 100%; background: linear-gradient(160deg, var(--lc-sand), #E2D7C7); }

/* 通用：眉题 / 段头 / 大标题 / 正文 / 按钮 / 两栏 */
.lume-classic [data-lc-home] .lc-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lc-gold);
}
.lume-classic [data-lc-home] .lc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.lume-classic [data-lc-home] .lc-head h2 { margin: 0; font-size: 44px; }
.lume-classic [data-lc-home] .lc-head p { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.lume-classic [data-lc-home] .lc-head > a {
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  transition: color .2s;
}
.lume-classic [data-lc-home] .lc-head > a:hover { color: var(--lc-gold); }
.lume-classic [data-lc-home] .lc-h2-lg { margin: 0 0 18px; font-size: 52px; line-height: 1.08; }
.lume-classic [data-lc-home] .lc-lead { max-width: 460px; margin: 0 0 32px; font-size: 17px; line-height: 1.65; color: #4A4E5A; }
.lume-classic [data-lc-home] .lc-btn {
  display: inline-block;
  padding: 15px 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--lc-cream);
  font-size: 14px;
  letter-spacing: .06em;
  transition: background-color .2s, color .2s, border-color .2s;
}
.lume-classic [data-lc-home] .lc-btn:hover { border-color: var(--navy); background: var(--navy); color: var(--lc-cream); }
.lume-classic [data-lc-home] .lc-btn-ghost { background: transparent; color: var(--ink); }
.lume-classic [data-lc-home] .lc-btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--lc-cream); }
.lume-classic [data-lc-home] .lc-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.lume-classic [data-lc-home] .lc-split-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.lume-classic [data-lc-home] .lc-media { display: block; position: relative; overflow: hidden; background: var(--lc-sand); }
.lume-classic [data-lc-home] .lc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.lume-classic [data-lc-home] a.lc-media:hover img { transform: scale(1.03); }
.lume-classic [data-lc-home] .lc-editorial-media { height: 640px; }
.lume-classic [data-lc-home] .lc-story-media { height: 560px; }

/* Hero：全幅图 + 左下叠放的奶油色文案卡 */
.lume-classic [data-lc-home] > .lc-hero {
  position: relative;
  display: flex;
  min-height: 720px;
  overflow: hidden;
  background: var(--lc-sand);
}
.lume-classic [data-lc-home] .lc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lume-classic [data-lc-home] .lc-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding-bottom: 72px;
}
.lume-classic [data-lc-home] .lc-hero-card { max-width: 560px; padding: 40px 44px; background: rgba(251, 248, 243, .92); }
.lume-classic [data-lc-home] .lc-hero-card h1 { margin: 0 0 16px; font-size: 56px; line-height: 1.05; }
.lume-classic [data-lc-home] .lc-hero-card > p:not(.lc-eyebrow) { margin: 0 0 28px; font-size: 17px; line-height: 1.6; color: #4A4E5A; }
.lume-classic [data-lc-home] .lc-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* 卖点条 */
.lume-classic [data-lc-home] > .lc-proof { border-bottom: 1px solid var(--steel-light); }
.lume-classic [data-lc-home] .lc-proof .wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-top: 28px;
  padding-bottom: 28px;
  text-align: center;
}
.lume-classic [data-lc-home] .lc-proof b { display: block; font-family: var(--lc-display); font-size: 26px; font-weight: 400; line-height: 1.2; }
.lume-classic [data-lc-home] .lc-proof span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

/* Shop by piece：整图卡 + 居中衬线标签（列数 = 集合数，最多 4） */
.lume-classic [data-lc-home] .lc-tiles { display: grid; grid-template-columns: repeat(var(--lc-cols, 4), minmax(0, 1fr)); gap: 20px; }
.lume-classic [data-lc-home] .lc-tile { position: relative; display: block; height: 440px; overflow: hidden; background: var(--lc-sand); }
.lume-classic [data-lc-home] .lc-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.lume-classic [data-lc-home] .lc-tile:hover img { transform: scale(1.04); }
.lume-classic [data-lc-home] .lc-tile-label {
  /* 左右各留 16px 的整宽定位 + fit-content 居中：`left:50%` 会把可用宽度压成一半，标签被挤成两行 */
  position: absolute;
  top: 50%;
  left: 16px;
  right: 16px;
  width: fit-content;
  margin-inline: auto;
  padding: 10px 26px;
  transform: translateY(-50%);
  background: rgba(251, 248, 243, .88);
  font-family: var(--lc-display);
  font-size: 34px;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}

/* 季节编辑区：三件小商品 */
.lume-classic [data-lc-home] .lc-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 32px; }
.lume-classic [data-lc-home] .lc-mini a { display: block; min-width: 0; }
.lume-classic [data-lc-home] .lc-mini-img { display: block; height: 180px; overflow: hidden; background: #F1F1F1; }
.lume-classic [data-lc-home] .lc-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.lume-classic [data-lc-home] .lc-mini-name {
  display: block;
  margin-top: 10px;
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lume-classic [data-lc-home] .lc-mini-price { display: block; font-size: 14px; color: var(--muted); }
.lume-classic [data-lc-home] .lc-mini a:hover .lc-mini-name { color: var(--lc-gold); }

/* Most loved：沿用 lume.css 的 .products / .grid / .card，只去掉段落上下边线 */
.lume-classic [data-lc-home] .products { border: 0; background: var(--lc-cream); }

/* 藏蓝材质带 */
.lume-classic [data-lc-home] > .lc-material { margin-top: 112px; background: var(--navy); color: #F4EFE7; }
.lume-classic [data-lc-home] .lc-material .lc-split { align-items: start; padding-top: 96px; padding-bottom: 96px; }
.lume-classic [data-lc-home] .lc-material .lc-h2-lg { margin-bottom: 20px; color: #F4EFE7; }
.lume-classic [data-lc-home] .lc-material p { max-width: 480px; font-size: 17px; line-height: 1.65; color: #D9D4CB; }
.lume-classic [data-lc-home] .lc-material dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin: 0; }
.lume-classic [data-lc-home] .lc-material dt { margin-bottom: 8px; font-size: 24px; color: #F4EFE7; }
.lume-classic [data-lc-home] .lc-material dd { margin: 0; font-size: 15px; line-height: 1.6; color: #D9D4CB; }

/* 评价 */
.lume-classic [data-lc-home] .lc-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lume-classic [data-lc-home] .lc-review {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  border: 1px solid var(--steel-light);
  background: var(--white);
}
.lume-classic [data-lc-home] .lc-review .stars { display: flex; gap: 3px; color: var(--lc-gold); }
.lume-classic [data-lc-home] .lc-review q { font-family: var(--lc-display); font-size: 22px; line-height: 1.35; quotes: "\201C" "\201D"; }
.lume-classic [data-lc-home] .lc-review > span { font-size: 13px; color: var(--muted); }

/* 图文区（CMS rich_text） */
.lume-classic [data-lc-home] [data-lc-section="story"] .lc-btn { margin-top: 4px; }

/* 服务三卡 */
.lume-classic [data-lc-home] .lc-service { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lume-classic [data-lc-home] .lc-service a { display: block; padding: 28px; border: 1px solid var(--steel-light); transition: border-color .2s; }
.lume-classic [data-lc-home] .lc-service a:hover { border-color: var(--ink); color: inherit; }
.lume-classic [data-lc-home] .lc-service b { display: block; font-size: 16px; font-weight: 500; }
.lume-classic [data-lc-home] .lc-service span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }

/* ── 商品卡：hover 出现加购条（交付物 .quick） ── */
.lume-classic [data-lc-home] .card .quick {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 12px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s, background .2s;
}
.lume-classic [data-lc-home] .card:hover .quick,
.lume-classic [data-lc-home] .card:focus-visible .quick { opacity: 1; transform: none; }
.lume-classic [data-lc-home] .card .quick:hover { background: var(--navy); }
.lume-classic [data-lc-home] .card .meta { margin-top: 14px; }
/* 角标：交付模板是直角小标（当前 lume 是胶囊，本主题圆角 0） */
.lume-classic [data-lc-home] .card .tag { border-radius: 0; box-shadow: none; }
.lume-classic [data-lc-home] .swatches { margin-top: 10px; }

/* ── 订阅：沙色底，左文案、右表单两栏（覆盖 home-lume.css 的居中单栏） ── */
.lume-classic [data-lc-home] .signup { margin-top: 104px; padding-block: 72px; background: var(--porcelain); border: 0; }
.lume-classic [data-lc-home] .signup .inner {
  /* Redesign v2：左文案 / 右表单。设计稿 1440 下 641 + 56gap + 583 = 1280 ⇒ 1.1fr : 1fr 等比缩放 */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  text-align: left;
  align-items: start;
}
.lume-classic [data-lc-home] .signup .inner > div,
.lume-classic [data-lc-home] .signup .inner > div > p,
.lume-classic [data-lc-home] .signup .signup-bar,
.lume-classic [data-lc-home] .signup .consent { margin-inline: 0; max-width: none; }
.lume-classic [data-lc-home] .signup h2 { font-size: 44px; margin-bottom: 10px; }
.lume-classic [data-lc-home] .signup .inner > div > p { max-width: 42ch; font-size: 16px; color: #4A4E5A; }
.lume-classic [data-lc-home] .signup .signup-bar { border-color: var(--ink); background: var(--white); }
/* Redesign v2 订阅表单（设计稿尺寸）：字段标签 13px + 订阅条 54 高；输入 15px；按钮 123 宽 / 54 高 / 字距 .06em */
.lume-classic [data-lc-home] .signup .signup-label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.2;
  color: #4A4E5A;
}
.lume-classic [data-lc-home] .signup .signup-bar { height: 54px; }
.lume-classic [data-lc-home] .signup .signup-bar input {
  height: 100%;
  padding: 0 16px;
  font-size: 15px;
}
.lume-classic [data-lc-home] .signup .signup-bar .btn {
  min-width: 123px;
  height: 100%;
  padding: 0 28px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .06em;
}
.lume-classic [data-lc-home] .signup .consent { margin-top: 12px; font-size: 13px; color: #4A4E5A; }

@media (max-width: 1100px) {
  .lume-classic [data-lc-home] .lc-tiles { grid-template-columns: repeat(min(var(--lc-cols, 4), 2), minmax(0, 1fr)); }
  .lume-classic [data-lc-home] .lc-tile { height: 360px; }
}
@media (max-width: 900px) {
  .lume-classic [data-lc-home] .lc-sec { padding-top: 72px; }
  .lume-classic [data-lc-home] > .lc-hero { min-height: 560px; }
  .lume-classic [data-lc-home] .lc-hero-inner { padding-bottom: 24px; }
  .lume-classic [data-lc-home] .lc-hero-card { padding: 28px 24px; }
  .lume-classic [data-lc-home] .lc-hero-card h1 { font-size: 38px; }
  .lume-classic [data-lc-home] .lc-proof .wrap { grid-template-columns: 1fr; gap: 14px; }
  .lume-classic [data-lc-home] .lc-proof b { font-size: 22px; }
  .lume-classic [data-lc-home] .lc-head h2,
  .lume-classic [data-lc-home] .signup h2 { font-size: 34px; }
  .lume-classic [data-lc-home] .lc-h2-lg { font-size: 38px; }
  .lume-classic [data-lc-home] .lc-split,
  .lume-classic [data-lc-home] .lc-split-rev { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lume-classic [data-lc-home] .lc-editorial-media { height: 420px; }
  .lume-classic [data-lc-home] .lc-story-media { height: 420px; order: -1; }
  .lume-classic [data-lc-home] .lc-tile { height: 280px; }
  .lume-classic [data-lc-home] .lc-tile-label { padding: 8px 18px; font-size: 24px; }
  .lume-classic [data-lc-home] .lc-mini-img { height: 120px; }
  .lume-classic [data-lc-home] > .lc-material { margin-top: 80px; }
  .lume-classic [data-lc-home] .lc-material .lc-split { padding-top: 64px; padding-bottom: 64px; }
  .lume-classic [data-lc-home] .lc-material dl { gap: 24px; }
  .lume-classic [data-lc-home] .lc-reviews,
  .lume-classic [data-lc-home] .lc-service { grid-template-columns: minmax(0, 1fr); }
  .lume-classic [data-lc-home] .signup { margin-top: 72px; padding-block: 56px; }
  .lume-classic [data-lc-home] .signup .inner { grid-template-columns: 1fr; gap: 28px; }
  /* 与列表页 `[data-product-grid]` 的 ≤980 间距一致（lume.css 在 560 以下另给了 22/14） */
  .lume-classic [data-lc-home] .grid { gap: 24px 16px; }
}
@media (max-width: 560px) {
  .lume-classic [data-lc-home] .lc-material dl { grid-template-columns: minmax(0, 1fr); }
  /* 两列放 3 张会单出一张、标签也挤成两行 ⇒ 手机单列矮卡 */
  .lume-classic [data-lc-home] .lc-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lume-classic [data-lc-home] .lc-tile { height: 220px; }
  /* lume.css 在 ≤560 把订阅条改成竖排（flex-direction: column）⇒ 固定 54 高会压扁按钮。
     这里恢复自然高度，输入框与按钮各占一行、各 52 高，按钮铺满宽度。 */
  .lume-classic [data-lc-home] .signup .signup-bar { height: auto; }
  .lume-classic [data-lc-home] .signup .signup-bar input { height: 52px; }
  .lume-classic [data-lc-home] .signup .signup-bar .btn { width: 100%; min-width: 0; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .lume-classic [data-lc-home] :is(.lc-tile, .lc-media) img { transition: none; }
  .lume-classic [data-lc-home] .card .quick { transition: none; }
}

/* =============================================================================
   全站（内页 / 抽屉 / 页脚）—— 与首页同一套视觉（用户 2026-10-23）
   ========================================================================== */

/* ── 标题：Bodoni Moda 常规字重（与首页标题一致，不加粗）。
   只管正文与对话框里的 h1/h2；页脚栏目标题按交付模板是 Jost 小标题，见下面页脚段 ── */
.lume-classic main :is(h1, h2),
.lume-classic [role="dialog"] :is(h1, h2) {
  font-family: "Bodoni Moda", "Didot", serif;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* ── 列表商品卡 = 首页 New this week 同款：**2:3 竖图块**（珠宝图不能被裁成正方形框）+ 细边框 ── */
.lume-classic [data-product-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.lume-classic [data-product-grid] .card .img {
  /* 2026-10-24 用户口径：商品图不要塞进正方形框（两侧留灰条/裁掉珠宝）——按商品图的 2:3 竖幅展示 */
  aspect-ratio: 2 / 3;
  background: #fff;
  border: 1px solid var(--steel-light);
  border-radius: 0;
}
/* 商品图多为白底竖图：方图块里 contain 会露出两侧浅灰条 ⇒ multiply 让白底融进图块底色（深色/实景图不受影响） */
.lume-classic [data-product-grid] .card .img img { mix-blend-mode: multiply; }
.lume-classic [data-product-grid] .card:hover .img { border-color: var(--steel-light); }
.lume-classic [data-product-grid] > .card-shell > .quick-add { aspect-ratio: 2 / 3; }
/* 图区 ↔ 文字区：首页是 `.meta{margin-top:14px}`；列表卡外壳/内层另有 8px gap ⇒ 清掉，只留 14px */
.lume-classic [data-product-grid] > .card-shell,
.lume-classic [data-product-grid] > .card-shell > .card,
.lume-classic [data-product-grid] > .card { gap: 0; }
.lume-classic [data-product-grid] .card .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  font-size: 14px;
}
.lume-classic [data-product-grid] .card .meta > div:first-child { flex: 1 1 auto; min-width: 0; }
.lume-classic [data-product-grid] .card .name { font-size: 14px; font-weight: 400; line-height: 1.4; }
.lume-classic [data-product-grid] .card .price { flex: 0 0 auto; margin-top: 0; font-size: 14px; font-weight: 400; }
.lume-classic [data-product-grid] .card .was { color: var(--muted); font-weight: 400; margin-right: 6px; }
.lume-classic [data-product-grid] .swatches { margin-top: 10px; }
@media (max-width: 1240px) { .lume-classic [data-product-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .lume-classic [data-product-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }

/* 「Filters & sorting」按钮：本主题唯一保留圆角的按钮（用户 2026-10-23），取 lume 原按钮圆角 4px */
.lume-classic [data-toolbar-toggle] { border-radius: 4px; }

/* ── 表单控件（登录抽屉 / 账户 / 购物车 / 结算共用 ui.tsx 原语）：直角 + 聚焦高亮用主题墨色。
   原语写死了 5px 圆角与 Shopify 结账蓝 #1773b0；本主题统一覆盖（复选框/单选框保持原样）。
   ⚠️ 聚焦描边**只给带框的原语输入框**（`ui.tsx` CONTROL 的 `border-[#d9d9d9]` 类）：无边框输入框
   （页头搜索浮层靠父级下划线、订阅条靠外框 focus-within）再加 1px 外环就会多出一根线（用户 2026-10-23 反馈）。 */
.lume-classic :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: 0; }
.lume-classic [class*="border-[#d9d9d9]"]:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
  outline: none;
}
.lume-classic :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ink); }

/* ── 页脚 = 交付模板版式：品牌栏 2fr + 栏目各 1fr、栏目标题 14px 常规（不大写）、链接灰字、底栏 12px ── */
.lume-classic [data-store-footer] { font-size: 14px; }
.lume-classic [data-store-footer] > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
  padding-top: 56px;
  padding-bottom: 48px;
}
.lume-classic [data-store-footer] [data-footer-columns] { display: contents; }
.lume-classic [data-store-footer] [data-footer-brand] img { height: 30px; }
.lume-classic [data-store-footer] [data-footer-brand] p { margin-top: 14px; max-width: 36ch; font-size: 14px; color: var(--muted); }
.lume-classic [data-store-footer] [data-footer-columns] h2 {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.lume-classic [data-store-footer] [data-footer-columns] ul { gap: 8px; }
.lume-classic [data-store-footer] [data-footer-columns] a { color: var(--muted); }
.lume-classic [data-store-footer] [data-footer-columns] a:hover { color: var(--ink); }
.lume-classic [data-store-footer] > div:last-child { border-top-color: var(--steel-light); }
@media (max-width: 980px) {
  .lume-classic [data-store-footer] > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lume-classic [data-store-footer] [data-footer-brand] { grid-column: 1 / -1; }
}

/* ── Redesign v2（2026-11）页脚：墨色底 + 奶油字，四栏等宽，底栏支付标识在左、语言/版权/政策在右 ──
   只在商家**没配**页脚外观时生效（`data-footer-appearance` 存在 = CMS 配了底色/字色，以商家为准）。 */
.lume-classic [data-store-footer]:not([data-footer-appearance]) {
  --lc-ft-fg: #D9D4CB;
  border-top: 0;
  background: var(--ink);
  color: var(--lc-ft-fg);
}
.lume-classic [data-store-footer]:not([data-footer-appearance]) > div:first-child {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 20px;
  padding-top: 64px;
}
.lume-classic [data-store-footer]:not([data-footer-appearance]) [data-footer-brand] > span {
  font-family: var(--brand-font-display);
  font-size: 30px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--lc-cream);
}
/* 店铺 logo 多为深色字标 ⇒ 深底上转成奶油色剪影 */
.lume-classic [data-store-footer]:not([data-footer-appearance]) [data-footer-brand] img { filter: brightness(0) invert(.96); }
.lume-classic [data-store-footer]:not([data-footer-appearance]) [data-footer-brand] p { color: var(--lc-ft-fg); line-height: 1.6; }
.lume-classic [data-store-footer]:not([data-footer-appearance]) [data-footer-columns] h2 { margin-bottom: 6px; font-weight: 500; color: var(--lc-cream); }
.lume-classic [data-store-footer]:not([data-footer-appearance]) [data-footer-columns] ul { gap: 0; line-height: 2; }
.lume-classic [data-store-footer]:not([data-footer-appearance]) :is(a, label, button):is(:hover, :focus-visible),
.lume-classic [data-store-footer]:not([data-footer-appearance]) [data-footer-columns] a:hover { color: var(--lc-cream); }
.lume-classic [data-store-footer]:not([data-footer-appearance]) [data-footer-columns] a,
.lume-classic [data-store-footer]:not([data-footer-appearance]) > div:last-child > div { color: var(--lc-ft-fg); }
.lume-classic [data-store-footer]:not([data-footer-appearance]) > div:last-child { border-top: 1px solid #3A3F4E; }
.lume-classic [data-store-footer]:not([data-footer-appearance]) > div:last-child > div {
  flex-direction: row-reverse;
  padding-top: 20px;
  padding-bottom: 28px;
  font-size: 13px;
}
.lume-classic [data-store-footer]:not([data-footer-appearance]) > div:last-child > div > div:first-child { justify-content: flex-end; }
.lume-classic [data-store-footer]:not([data-footer-appearance]) label { color: inherit; }
.lume-classic [data-store-footer]:not([data-footer-appearance]) select option { color: var(--ink); }
@media (max-width: 980px) {
  .lume-classic [data-store-footer]:not([data-footer-appearance]) > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lume-classic [data-store-footer]:not([data-footer-appearance]) > div:last-child > div { flex-direction: column-reverse; align-items: flex-start; }
  .lume-classic [data-store-footer]:not([data-footer-appearance]) > div:last-child > div > div:first-child { justify-content: flex-start; }
}

/* ── 列表卡快速加购 = 交付模板的悬停加购条（首页 New this week 的 `.quick` 同款）──
   全局 `.quick-add__button` 是右下角 44px 白色圆钮（读屏文字 + 悬停提示条）；本主题改成
   图块底部的墨色通栏「图标 + 文字」，悬停卡片时上浮淡入。组件 / 行为（单 SKU 直接加、多 SKU 开弹窗、
   加完显示 Added）一行未动，只换外观。
   ⚠️ 本文件未分层 ⇒ 会压过 tailwind.css 里 (hover) 显形链路的 opacity/transform，所以显隐状态在这里自己写全。 */
.lume-classic :is([data-product-grid], [data-lc-home]) .quick-add__button {
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: auto;
  height: 44px;
  gap: 8px;
  padding: 0 12px;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  box-shadow: none;
  font-size: 13px;
  letter-spacing: .02em;
}
.lume-classic :is([data-product-grid], [data-lc-home]) .quick-add__icon { width: 18px; height: 18px; }
.lume-classic :is([data-product-grid], [data-lc-home]) .quick-add__button .quick-add__label,
.lume-classic :is([data-product-grid], [data-lc-home]) .quick-add__button:is(:hover, :focus-visible) .quick-add__label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: none;
  text-overflow: ellipsis;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  animation: none;
}
.lume-classic :is([data-product-grid], [data-lc-home]) .quick-add__button:hover { background: var(--navy); color: #fff; transform: none; box-shadow: none; }
.lume-classic :is([data-product-grid], [data-lc-home]) .quick-add__button:active { transform: none; }
.lume-classic :is([data-product-grid], [data-lc-home]) .quick-add__button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .lume-classic :is([data-product-grid], [data-lc-home]) .quick-add__button { opacity: 0; transform: translateY(6px); }
  .lume-classic :is([data-product-grid] .card-shell, [data-lc-home] .lc-card-shell):is(:hover, :focus-within) .quick-add__button,
  .lume-classic :is([data-product-grid] .card-shell, [data-lc-home] .lc-card-shell):is(:hover, :focus-within) .quick-add__button:hover { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lume-classic :is([data-product-grid], [data-lc-home]) .quick-add__button { transition: none; transform: none; }
}

/* ── 购物车页（`CartView`）= 列表卡同一套语言：直角、细边框、方图缩略图、摘要浅瓷底 ──
   `cart-scope.ts` 把卡片 / rounded-brand 写死成 8px（不走令牌）⇒ 这里逐项归零；删除钮（ghost-icon）
   与空购物车的圆形图标是**形状**，保持圆形。宽度对齐全站内容区（1176，与页头 / 列表网格同一左缘）。 */
.lume-classic [data-cart-scope]:has([data-cart-cols]) { max-width: none; }
.lume-classic [data-cart-cols] > div:first-child { max-width: none; }
.lume-classic [data-cart-scope] :is(.ui-card, .rounded-brand, .cart-line__thumb, [class*="rounded-pill"], input, select, button:not(.ghost-icon)) {
  border-radius: 0;
}
.lume-classic [data-cart-scope] .ui-card { border-color: var(--steel-light); box-shadow: none; }
.lume-classic [data-cart-scope] header h1 { font-size: 38px; line-height: 1.05; }
.lume-classic [data-cart-summary] { background: var(--porcelain); padding: 28px; }
.lume-classic [data-cart-summary] h2 { font-size: 26px; font-weight: 400; line-height: 1.1; }
.lume-classic [data-cart-scope] .cart-line__thumb {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--steel-light);
  background: var(--porcelain);
}
.lume-classic [data-cart-scope] .cart-line__thumb img { mix-blend-mode: multiply; }
.lume-classic [data-cart-summary] input { background: var(--white); }
@media (min-width: 1024px) {
  .lume-classic [data-cart-summary] { width: 400px; }
}
/* 摘要面板是浅瓷底 ⇒ 次按钮（Continue shopping）补白底，否则与面板糊成一片 */
.lume-classic [data-cart-summary] [data-cart-continue] { background: var(--white); }
@media (max-width: 1023px) {
  .lume-classic [data-cart-summary] { padding: 20px; }
}
/* 订阅条输入框无边框（外框 `.signup-bar` 自己有 focus-within）⇒ 去掉 lume.css 给所有 input 的 3px 聚焦外环，避免框里再套一圈 */
.lume-classic .signup .signup-bar input:focus-visible { box-shadow: none; }
.lume-classic .signup .signup-bar:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

/* ── 正文（`main`，含未登录的账户门页）/ 账户区 / 购物车（页 + mini 抽屉）/ 地址弹窗 —— 圆角全部归零（用户 2026-10-23）──
   `acct-scope.ts` / `cart-scope.ts` 与各组件把圆角写死成 4 / 6 / 8px（`rounded-[Npx]`、`.ui-btn`、`section`），
   不走 `--brand-radius*` 令牌 ⇒ 令牌归零压不住，这里按「矩形类」逐一归零。
   不动：`rounded-full`（头像 / 图标圆底 / 删除钮这类**形状**）与 `.ghost-icon`。 */
.lume-classic :is(main, [data-account-scope], [data-cart-scope], .cart-drawer-panel, [data-address-dialog]) :is(
  .ui-card, .ui-btn, .rounded-brand, section, input, select, textarea, .sf-phone,
  button:not(.ghost-icon), [class*="rounded-["], [class*="[border-radius:"], [class*="rounded-sm"], [class*="rounded-md"],
  [class*="rounded-lg"], [class*="rounded-xl"], [class*="rounded-pill"]
):not(.ghost-icon):not(.rounded-full):not([data-toolbar-toggle]):not(.lc-pdp-swatch) {
  border-radius: 0;
}

.lume-classic [data-lc-home] .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
}
.lume-classic [data-lc-home] .grid > .card,
.lume-classic [data-lc-home] .grid > .lc-card-shell { min-width: 0; width: 100%; }
/* 商品卡外壳：a.card + 快速加购（兄弟节点）；快速加购覆盖层只盖住图块（3:4，见下方 Most loved 段） */
.lume-classic [data-lc-home] .lc-card-shell { position: relative; }
.lume-classic [data-lc-home] .lc-card-shell > .card { display: block; min-width: 0; width: 100%; }
.lume-classic [data-lc-home] .lc-card-shell > .quick-add {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 3 / 4;
  z-index: 2;
}
.lume-classic [data-lc-home] .card .img { width: 100%; max-width: 100%; aspect-ratio: 2 / 3; }
.lume-classic [data-lc-home] .card .img img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1239px) {
  .lume-classic [data-lc-home] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 979px) {
  .lume-classic [data-lc-home] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}

/* 2026-10-24：商品标题不换行会把卡片撑出视口（`.name` 是 inline span，shared 主题的
   overflow:hidden 对 inline 不生效）⇒ 显式 block + 省略号，meta 允许收缩。 */
.lume-classic [data-lc-home] .card .meta { min-width: 0; }
.lume-classic [data-lc-home] .card .meta > div { flex: 1 1 auto; min-width: 0; }
.lume-classic [data-lc-home] .card .name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lume-classic [data-lc-home] .card .sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 心愿单心形（2026-10-24 用户截图：「这个简单点，现在有点太凸出了」）──
   去掉白底圆钮 + 阴影 + 细环，只留一个**小号线条心**；悬停/聚焦时才加深、变红。
   热区仍 >=40px（可点），但视觉不再压过商品图。 */
.lume-classic [data-product-grid] .card .wish,
.lume-classic [data-product-grid] .card-shell .wish {
  top: 4px;
  right: 4px;
  width: 40px;
  height: 40px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  opacity: .72;
}
.lume-classic [data-product-grid] .card .wish svg,
.lume-classic [data-product-grid] .card-shell .wish svg {
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  .lume-classic [data-product-grid] .card-shell .wish:not(:disabled):hover {
    background: transparent;
    box-shadow: none;
    color: var(--danger, #b3261e);
    opacity: 1;
    transform: none;
  }
}
.lume-classic [data-product-grid] .card-shell .wish:not(:disabled):active { transform: none; }
.lume-classic [data-product-grid] .card-shell .wish[aria-pressed="true"] { opacity: 1; }

/* 售罄角标：Lumé Classic 首页/集合卡也按 Shopify 的左下黑底白字显示 */
.lume-classic [data-lc-home] .card .tag-soldout {
  top: auto;
  bottom: 10px;
  background: #121212;
  color: #fff;
  border-radius: 0;
  box-shadow: none;
}

/* ── H5 商品卡：名称与价格**上下排**（2026-10-26 用户截图：两列卡里名称与价格挤在一行，名称被截成「1 Piec…」）──
   ≤767px（与全站 H5 断点一致）首页卡与列表卡同一口径：名称独占一行、最多两行省略，
   固定两行高 ⇒ 同一排卡片的价格对齐；价格（含划线价）在名称下方左对齐。桌面仍是同行（交付模板版式）。 */
@media (max-width: 767px) {
  /* 间距（163px 宽的两列卡）：图→名称 10（桌面 14 在窄卡上偏松）、名称→价格 6、价格→下一排 24（网格行距）
     ⇒ 文字块贴紧自己的图、与下一排拉开，分组清楚 */
  .lume-classic :is([data-lc-home], [data-product-grid]) .card .meta {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 10px;
  }
  .lume-classic :is([data-lc-home], [data-product-grid]) .card .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    font-size: 13px;
    line-height: 1.4;
    min-height: 2.8em;
  }
  .lume-classic :is([data-lc-home], [data-product-grid]) .card .price {
    align-self: flex-start;
    white-space: nowrap;
    font-size: 13px;
  }
}

/* =============================================================================
   Club Spice C 端走查（2026-11-02 REPORT.md）—— 本主题范围内的修整（2026-11-03）
   ========================================================================== */

/* ── ① 导航下拉 / 搜索面板：悬停统一浅灰托底 + multiply（用户口径：background #f0f0f0; mix-blend-mode multiply）──
   multiply 让灰底与白底商品图、白色面板融在一起，不出现"白块压灰底"。 */
.lume-classic [data-sf-header] [data-sf-nav-children] a[data-sf-nav-child]:hover,
.lume-classic [data-sf-header] [data-sf-nav-children] a[data-sf-nav-child]:focus-visible {
  background: #f0f0f0;
  mix-blend-mode: multiply;
  color: var(--brand-ink, #141414);
}
/* 面板（多栏）里的链接原本无内边距 ⇒ 托底贴字；补一点水平内边距并用负外边距抵消，文字位置不变 */
.lume-classic [data-sf-header] [data-sf-nav-layout="panel"] a[data-sf-nav-child] {
  padding-inline: 8px;
  margin-inline: -8px;
}
/* 搜索联想词：悬停/键盘选中 = 灰底整行（替代原来的下划线） */
.lume-classic [data-sf-panel-left] a[data-sf-suggest-index] {
  padding-inline: 12px;
  margin-inline: -12px;
  transition: background-color .15s ease;
}
.lume-classic [data-sf-panel-left] a[data-sf-suggest-index]:hover,
.lume-classic [data-sf-panel-left] a[data-sf-suggest-index][aria-selected="true"] {
  background: #f0f0f0;
  mix-blend-mode: multiply;
  color: var(--brand-ink, #141414) !important;
  text-decoration: none !important;
}
/* 搜索商品卡：图片托底 #f0f0f0 + 图片 multiply（白底 packshot 融进灰底，与购物车缩略图同一手法）；悬停微放大 + 标题下划线 */
.lume-classic [data-sf-search-grid] li > a > span:first-child {
  overflow: hidden;
  background: #f0f0f0;
}
.lume-classic [data-sf-search-grid] li > a > span:first-child > img,
.lume-classic [data-sf-search-grid] li > a > span:first-child > span[aria-hidden] {
  background: transparent;
  mix-blend-mode: multiply;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .lume-classic [data-sf-search-grid] li > a:hover > span:first-child > img { transform: scale(1.04); }
  .lume-classic [data-sf-search-grid] li > a:hover > span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .lume-classic [data-sf-search-grid] li > a > span:first-child > img { transition: none; transform: none !important; }
}

/* ── ② 购物车页摘要：没有任何减免时 Subtotal 与 Total 是同一个数 ⇒ 只留 Total（不重复报价）── */
.lume-classic [data-cart-summary]:not(:has([data-cart-campaign-discount], [data-cart-discount-total])) [data-cart-subtotal] {
  display: none;
}
.lume-classic [data-cart-summary]:not(:has([data-cart-campaign-discount], [data-cart-discount-total])) [data-cart-total] {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

/* ── ⑤ 移动端（≤767px，与全站 H5 断点一致）── */
@media (max-width: 767px) {
  /* 公告条：窄屏允许两行（原来一行截成 `…`）；高度随之 48px，吸顶负 top 同步（StoreHeader 读计算后的 top 扣高度） */
  .lume-classic [data-sf-header]:has(> [data-sf-announce]) { top: -48px; }
  .lume-classic [data-sf-header] [data-sf-announce] > div { height: 48px; padding-inline: 16px; }
  .lume-classic [data-sf-header] [data-sf-announce] p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    font-size: 12px;
    line-height: 1.4;
  }

  /* 面包屑：当前页（长商品名）可收缩 + 省略号，不再被右缘硬切 */
  .lume-classic [data-sf-crumbs] ol { overflow: hidden; }
  .lume-classic [data-sf-crumbs] li:last-child { flex-shrink: 1; min-width: 0; }
  .lume-classic [data-sf-crumbs] li:last-child > [aria-current="page"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* 子类横滑条：右缘渐隐（提示还能往右滑；箭头按钮仍在） */
  .lume-classic [data-subcategory-bar]:has([data-subcategory-next]) [data-subcategory-nav] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent calc(100% - 32px));
    mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent calc(100% - 32px));
  }

  /* PDP 分享行：窄屏只留 WhatsApp / Pinterest / 复制链接（8 个图标在 390 宽里过密） */
  .lume-classic [data-pdp-share] li:has(> [data-share-network]:not([data-share-network="whatsapp"], [data-share-network="pinterest"])) {
    display: none;
  }

  /* 客服浮标：圆形 44px、贴右下角（原 80px 高处正好压在商品卡/主图上）；仍让出底部悬浮条（--sf-bottom-bar） */
  .lume-classic [data-support-chat-trigger] {
    bottom: calc(16px + var(--sf-bottom-bar, 0px) + env(safe-area-inset-bottom, 0px));
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  }
  .lume-classic [data-support-chat-panel] {
    bottom: calc(72px + var(--sf-bottom-bar, 0px) + env(safe-area-inset-bottom, 0px));
  }

  /* Cookie 条：从占屏 34% 压到约 20% —— 内边距收紧、正文 3 行截断（完整说明在 Preferences / 隐私政策）、三个按钮一行 */
  .lume-classic [data-cookie-banner] { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .lume-classic [data-cookie-banner] > div { gap: 10px; }
  .lume-classic [data-cookie-banner] h2 { font-size: 16px; }
  .lume-classic [data-cookie-banner] h2 + p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.5;
  }
  .lume-classic [data-cookie-banner] [data-cookie-learn-more] { font-size: 12px; }
  .lume-classic [data-cookie-banner] > div > div:last-child { flex-wrap: nowrap; gap: 6px; }
  .lume-classic [data-cookie-banner] > div > div:last-child > button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding-inline: 6px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
}

/* ── 结算页空购物袋（2026-11-03 用户：「checkout 为空时去购物按钮不好看」）──
   结算作用域里 `a` 统一染成链接强调色 ⇒ 黑底按钮上的文字变蓝、几乎看不清；标题也落到系统字体。
   本主题：白字黑底直角按钮（与全站主按钮同款）+ Bodoni 标题 + 方形图标底，与购物车页空态一致。 */
.lume-classic [data-checkout-empty] {
  padding: 56px 24px;
  border-radius: 0;
}
.lume-classic [data-checkout-empty] > span[aria-hidden] {
  border-radius: 0;
  background: #f0f0f0;
  border-color: transparent;
}
.lume-classic [data-checkout-empty] h2 {
  font-family: "Bodoni Moda", "Didot", serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.lume-classic [data-checkout-empty] [data-checkout-empty-continue] {
  min-height: 52px;
  padding-inline: 36px;
  border-radius: 0;
  background: var(--brand-ink, #141414);
  border: 1px solid var(--brand-ink, #141414);
  color: #fff !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease;
}
.lume-classic [data-checkout-empty] [data-checkout-empty-continue]:hover {
  background: #fff;
  color: var(--brand-ink, #141414) !important;
}
.lume-classic [data-checkout-empty] [data-checkout-empty-continue]:focus-visible {
  outline: 2px solid var(--brand-ink, #141414);
  outline-offset: 3px;
}
@media (max-width: 767px) {
  .lume-classic [data-checkout-empty] { padding: 44px 20px; }
  .lume-classic [data-checkout-empty] h2 { font-size: 26px; }
  .lume-classic [data-checkout-empty] [data-checkout-empty-continue] { width: 100%; max-width: 320px; }
}

/* ── H5 购物袋数量角标（2026-11-03 用户：「角标靠的有点远」）──
   <lg 时按钮是 40px 宽、图标居中（约 24px），而角标沿用桌面文字版的 `-right-3.5`（向外 14px）⇒ 悬在图标外侧。
   改为贴住图标右上角（压住袋口一角），桌面「Bag」文字版不变。 */
@media (max-width: 1023px) {
  .lume-classic [data-sf-header] [data-sf-hdr-bag] [data-sf-hdr-bag-count] {
    right: 2px;
    top: 6px;
    box-shadow: 0 0 0 2px var(--brand-surface, #fff);
  }
}

/* =============================================================================
   P0-2 结算页回到品牌设计系统（Club Spice 走查 2026-11-02；2026-11-03 用户确认要改）
   -----------------------------------------------------------------------------
   `checkout-shopify.css`（全主题共用的 Shopify 皮肤）把结算页换成系统字体 + #1773b0 蓝 + 5px 圆角，
   本主题全站是 Jost / Bodoni + 墨黑 + 直角 ⇒ 进结算像"跳到了第三方"。
   这里**只换字体与圆角**，Shopify 式的结构与交互一概不动。
   ⚠️ 颜色：2026-11-06 用户改口径「checkout 改为主题色（深蓝/近黑）」⇒ 由 `theme-lume-classic-checkout.css`
      末段设置 `--ck-accent*` 令牌统一换色；本段仍只管字体与圆角，不要在这里逐条覆盖颜色。
   ⚠️ checkout-shopify.css 在本文件**之后**引入、且大量 `!important` ⇒ 一律写成 `.lume-classic .checkout-scope …`
      （多一个类，特指度更高）+ `!important` 才压得过。
   ========================================================================== */
.lume-classic .checkout-scope {
  font-family: var(--brand-font-sans, "Jost", sans-serif) !important;
  color: var(--brand-ink, #141414);
}
/* 段落标题（Delivery / Shipping method / Payment）用 Bodoni，与全站标题同一字体 */
.lume-classic .checkout-scope :is(h1, h2, h3, h4, .font-display, [data-group-title]) {
  font-family: var(--brand-font-display, "Bodoni Moda", serif) !important;
  font-weight: 400 !important;
  letter-spacing: -.005em !important;
  color: var(--brand-ink, #141414) !important;
}
.lume-classic .checkout-scope [data-group-title] { font-size: 22px !important; line-height: 1.2 !important; }
/* 摘要合计 / 复核小标题这类 UI 字仍是无衬线（Bodoni 只给段落大标题） */
.lume-classic .checkout-scope [data-review-panel] h3,
.lume-classic .checkout-scope [data-checkout-summary-col] h2 {
  font-family: var(--brand-font-sans, "Jost", sans-serif) !important;
  font-weight: 500 !important;
}

/* 直角：本主题全站圆角为 0（胶囊/圆形的徽标、色点保持） */
.lume-classic .checkout-scope [class*="rounded-"]:not([class*="rounded-full"]):not([class*="rounded-pill"]),
.lume-classic .checkout-scope :is(input:not([type='radio']):not([type='checkbox']), select, textarea, .sf-phone, button, .ui-btn, .ui-card),
.lume-classic .checkout-scope :is([data-payment-methods] label, [data-shipping-list] label, [data-shipping-list] [data-shipping-row], [data-billing-fields] input),
/* 配送方式 / 账单地址的选中行（外框已直角，行若还带圆角 ⇒ 四角露出外框直线） */
.lume-classic .checkout-scope :is([data-shipping-methods], [data-billing-choices]) :is(ul, li, label, li > *),
.lume-classic .checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method,
.lume-classic .checkout-scope [data-checkout-payment-element] :is(.adyen-checkout__payment-method, .adyen-checkout__payment-method__header, .adyen-checkout-pm-details-wrapper) {
  border-radius: 0 !important;
}

/* Adyen 组件里的文字（方式名 / 字段标签）跟随正文字体（卡号输入在 Adyen iframe 内，CSS 够不到） */
.lume-classic .checkout-scope [data-checkout-payment-element] :is(.adyen-checkout__payment-method__name, .adyen-checkout__label__text, .adyen-checkout__helper-text, .adyen-checkout__error-text) {
  font-family: inherit !important;
}

/* 订单状态页（`.order-shopify`，同属那份 Shopify 皮肤）：同样回到品牌字体 / 直角（链接保持蓝色） */
.lume-classic .order-shopify { font-family: var(--brand-font-sans, "Jost", sans-serif); }
.lume-classic .order-shopify :is(h1, h2) {
  font-family: var(--brand-font-display, "Bodoni Moda", serif) !important;
  font-weight: 400 !important;
}

/* P1-11 未登录守卫卡：本主题直角（组件里写死 8px） */
.lume-classic [data-require-auth] > div:first-child { border-radius: 0 !important; }

/* =============================================================================
   P1 纯样式项（Club Spice 走查；2026-11-03 用户：「p1 的不牵扯到逻辑的可以调整下」）
   ========================================================================== */

/* ── P1-7 Cookie（桌面 ≥768px）：通栏白块占屏 23% ⇒ 左下角浮卡（≤400px 宽），不再盖住商品网格与 CTA。
   放左下：右下是客服浮标。偏好面板（data-cookie-prefs）同一容器，一并收成卡片、超高时内部滚动。 */
@media (min-width: 768px) {
  .lume-classic [data-cookie-consent] > [role="dialog"] {
    left: 24px;
    right: auto;
    bottom: 24px;
    width: min(400px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 20px 22px;
    border: 1px solid var(--brand-line, #e5e5e5);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .14);
  }
  .lume-classic [data-cookie-consent] > [role="dialog"] > div { max-width: none; gap: 14px; }
  .lume-classic [data-cookie-consent] > [role="dialog"] h2 { font-size: 18px; }
  .lume-classic [data-cookie-consent] > [role="dialog"] h2 + p { font-size: 12.5px; line-height: 1.55; }
  /* 三个按钮：「全部接受 / 拒绝非必要」并排等宽，「偏好设置」退为整行文字按钮 */
  .lume-classic [data-cookie-banner] > div > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .lume-classic [data-cookie-banner] > div > div:last-child > button { width: 100%; justify-content: center; }
  .lume-classic [data-cookie-banner] [data-cookie-open-prefs] {
    grid-column: 1 / -1;
    min-height: 36px;
    border: 0 !important;
    background: transparent !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ── P1-5 PDP 库存提示（Only N available）：原来与数量框同一 flex 行且允许换行 ⇒ 有提示的变体多出一行，
   切到没有提示的变体（如 White）时「加入购物袋」整体上跳约 40px。改为提示固定在数量框右侧、不换行 ⇒ 行高不变。 */
.lume-classic div:has(> [data-pdp-qty-note]) { flex-wrap: nowrap; }
.lume-classic [data-pdp-qty-note] { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── P1-9 滚动淡入（Reveal）：无 JS 时本来就默认可见（隐藏态由 JS 写）；打印时还没滚到的段落仍是隐藏态 ⇒ 强制显示 */
@media print {
  .lume-classic [data-reveal],
  .lume-classic [data-reveal] [data-reveal-item] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── 审计 P2 纯样式项（2026-11-03） ── */
/* P2-1：body 字体兜底（主题根之外的节点不再落回 Times New Roman） */
body:has(.lume-classic) {
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
}
/* P2-7：购物车单件且无划线价时，标题下的单价与右侧行小计重复 ⇒ 只留行小计 */
.lume-classic [data-cart-line]:not(:has(.cart-row__total > span + span)):not(:has([data-cart-compare-at])) .meta-12 {
  display: none;
}
/* P2-15：PDP 底部悬浮加购条出现时，页脚底部留出条高，最后一行不被盖住 */
.lume-classic:has([data-pdp-sticky-atc]) footer {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ── 售后申请表单（ReturnRequestForm，`[data-return-*]` 钩子）—— 跟订单详情「Product」卡同一套：
   外层已是细边框卡 ⇒ 商品不再一件一个框，改成分隔线列表；选中只用左侧墨色竖条标记；
   标题与卡片标题一样用 Bodoni 常规字重；数量步进器直角（与 PDP 数量框一致）。 */
.lume-classic [data-return-form] [data-return-title] {
  font-family: "Bodoni Moda", "Didot", serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -.01em;
}
.lume-classic [data-return-form] [data-return-list] { gap: 0; border-top: 1px solid var(--steel-light); }
.lume-classic [data-return-form] [data-return-card] {
  border: 0;
  border-bottom: 1px solid var(--steel-light);
  box-shadow: none;
  background: transparent;
}
.lume-classic [data-return-form] [data-return-card][data-selected] { box-shadow: inset 2px 0 0 var(--ink); }
.lume-classic [data-return-form] [data-return-card] > div:first-child { padding-block: 16px; }
.lume-classic [data-return-form] [data-return-item-reason] { border-top: 0; padding-top: 0; padding-left: 52px; }
.lume-classic [data-return-form] [data-return-stepper],
.lume-classic [data-return-form] [data-return-stepper] button { border-radius: 0; }
.lume-classic [data-return-form] [data-return-policy] { background: var(--porcelain); }
.lume-classic [data-return-form] [data-return-photo-add] { border-color: var(--steel-light); }
@media (max-width: 639px) {
  .lume-classic [data-return-form] [data-return-item-reason] { padding-left: 12px; }
}

/* =============================================================================
   登录页（`/account/login`，`LumeClassicLogin`）—— 设计稿「Account · 账户（Signed out）」
   H1 52px Bodoni + 三张白卡（登录/注册 | New to … | 游客查单），控件 50px 白底 #CFC6B8 描边。
   本主题不用登录抽屉（authLayout: page），所有登录入口都落到这里。
   ========================================================================== */
.lume-classic [data-lc-login] {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 40px 96px;
}
.lume-classic [data-lc-login] .lc-login-title {
  margin: 0 0 32px;
  font-family: var(--brand-font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 1.1;
}
.lume-classic [data-lc-login] .lc-login-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.lume-classic [data-lc-login] .lc-login-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border: 1px solid var(--steel-light);
  border-radius: 0;
  background: var(--white);
}
.lume-classic [data-lc-login] .lc-login-card h2 {
  margin: 0;
  font-family: var(--brand-font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}
/* AuthForm / GuestOrderLookup 自带的外层宽度与间距：放进卡片里占满卡宽 */
.lume-classic [data-lc-login] .lc-login-card > div { max-width: none; margin: 0; }
.lume-classic [data-lc-login] form { gap: 14px; }
.lume-classic [data-lc-login] label { font-size: 13px; font-weight: 400; color: #4A4E5A; }
.lume-classic [data-lc-login] input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 50px;
  height: 50px;
  padding: 0 14px;
  border: 1px solid #CFC6B8;
  border-radius: 0;
  background: var(--white);
  font-size: 15px;
  color: var(--ink);
}
.lume-classic [data-lc-login] input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
/* 主按钮（Sign in / Create account 提交）：墨底奶油字 52px */
.lume-classic [data-lc-login] .ui-btn {
  width: 100%;
  min-height: 52px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .04em;
}
.lume-classic [data-lc-login] [data-lc-login-auth] .ui-btn { background: var(--ink); border-color: var(--ink); color: var(--lc-cream); }
.lume-classic [data-lc-login] [data-lc-login-auth] .ui-btn:hover { background: var(--navy); border-color: var(--navy); }
/* 查单提交 = 设计稿描边按钮 */
.lume-classic [data-lc-login] [data-guest-lookup-submit] {
  align-self: stretch;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
.lume-classic [data-lc-login] [data-guest-lookup-submit]:hover { background: var(--ink); color: var(--lc-cream); }
/* 忘记密码：设计稿是 13px 下划线小链接，放在密码框下面、按钮上面的位置由 AuthForm 决定（按钮下方一行） */
.lume-classic [data-lc-login] [data-forgot-link] {
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.lume-classic [data-lc-login] [data-forgot-link]:hover { color: var(--lc-gold); }
.lume-classic [data-lc-login] .lc-login-perks {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  font-size: 15px;
  line-height: 1.9;
  color: #4A4E5A;
}
.lume-classic [data-lc-login] .lc-login-note { margin: 0; font-size: 14px; line-height: 1.6; color: #4A4E5A; }
.lume-classic [data-lc-login] .lc-login-outline {
  min-height: 52px;
  padding: 15px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.lume-classic [data-lc-login] .lc-login-outline:hover { background: var(--ink); color: var(--lc-cream); }
.lume-classic [data-lc-login] .lc-login-outline:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 900px) {
  .lume-classic [data-lc-login] { padding: 40px 16px 72px; }
  .lume-classic [data-lc-login] .lc-login-title { font-size: 38px; margin-bottom: 24px; }
  .lume-classic [data-lc-login] .lc-login-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lume-classic [data-lc-login] .lc-login-card { padding: 24px; }
}
/* 设计稿：「Forgot your password?」在提交按钮**上方** ⇒ 只调视觉顺序（AuthForm 的 DOM / 行为不动） */
.lume-classic [data-lc-login] [data-lc-login-auth] form > .ui-btn { order: 2; }
.lume-classic [data-lc-login] [data-lc-login-auth] form > :has(> [data-forgot-link]) { order: 1; }

/* ── 页头当前页标识（设计稿：所在页对应的工具文字下方 1px 墨色下划线；Account 含登录/订单等账户区，Bag = 购物车页）──
   `aria-current="page"` 由 StoreHeader 按路径写；只在桌面文字版画线（手机端是图标）。 */
@media (min-width: 1024px) {
  .lume-classic [data-sf-hdr-tools="text"] > [aria-current="page"],
  .lume-classic [data-sf-hdr-tools="text"] > [aria-current="page"] [data-sf-hdr-bag-count] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
}

/* ── 首页 Most loved 商品卡（Redesign v2）：沙色图底无边框 3:4，名称｜价格一行，第二行副标题 / 默认 SKU 规格名 ── */
.lume-classic [data-lc-home] .grid .card .img {
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: 0;
  background: var(--porcelain);
}
.lume-classic [data-lc-home] .grid .card .img img { object-fit: cover; mix-blend-mode: normal; }
.lume-classic [data-lc-home] .grid .card:hover .img { border-color: transparent; }
.lume-classic [data-lc-home] .lc-card-meta { min-width: 0; margin-top: 14px; }
.lume-classic [data-lc-home] .lc-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
}
.lume-classic [data-lc-home] .lc-card-row .name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .2s;
}
.lume-classic [data-lc-home] .lc-card-row .price { flex: 0 0 auto; margin: 0; font-size: 15px; font-weight: 400; white-space: nowrap; }
.lume-classic [data-lc-home] .lc-card-row .was { margin-right: 6px; color: var(--muted); }
.lume-classic [data-lc-home] .lc-card-meta .sub {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lume-classic [data-lc-home] .grid .card:hover .lc-card-row .name { color: var(--lc-gold); }
/* 手机两列：名称与价格上下排（窄卡里同一行会把名称截得太短） */
@media (max-width: 767px) {
  .lume-classic [data-lc-home] .lc-card-row { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; }
  /* 名称两行截断（沿用上面 H5 卡片的 line-clamp:2 + 2.8em 占位，与列表页同口径） */
  .lume-classic [data-lc-home] .lc-card-row .name { width: 100%; font-size: 14px; white-space: normal; }
  .lume-classic [data-lc-home] .lc-card-row .price { font-size: 14px; }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-lume-classic-plp.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
/**
 * lume-classic 列表页（PLP）皮肤 —— Redesign v2「Category · 分类页（Earrings）」。
 *
 * 规则**全部**限定在 `.lume-classic [data-lc-plp]` 下（与 theme-lume-classic.css 分文件，
 * 引入顺序见 src/app/layout.tsx：本文件在 theme-lume-classic.css 之后）。
 *
 * 结构锚点（由 src/templates/lume-classic/LumeClassicCollection.tsx 输出）：
 *   [data-lc-plp]                    页面根
 *   [data-lc-plp-head]               面包屑 + H1 + 描述 + 圆形子类目
 *   [data-lc-plp-filters]            筛选条（饰面 / 价格 / All filters / Sort）
 *   [data-lc-plp-grid]               商品网格（含 [data-lc-plp-promo] 广告位）
 *   [data-lc-plp-pager]              Showing x of N + 进度条 + Load more
 *   [data-lc-plp-about]              底部集合介绍
 *
 * 测量基线（设计稿 1440 视口，`.tmp/design/dom-category.txt`）：
 *   内容区 1280 @ x=80（与主题 `--brand-max:1328 + px-6` 同源）；H1 60px Bodoni（行高 normal ≈ 92px 高）；
 *   圆形子类目 96 + 标签；筛选条 74 高、chip 44 高；4 列网格列宽 305 / 列距 20 / 行距 28；
 *   卡片图 305×380（4:5）；广告位 630×520；进度条 220×2；About 左边 760 宽。
 */

/* ── 页面根 / 容器 ─────────────────────────────────────────────────────────── */
.lume-classic [data-lc-plp] {
  --lc-display: "Bodoni Moda", "Didot", serif;
  --lc-plp-line: #E6DED2;      /* 与设计稿 rgb(230,222,210) 一致 */
  --lc-plp-border: #CFC6B8;    /* 与设计稿 chip 边框一致 */
  --lc-plp-ink: #1C1F2A;
  --lc-plp-muted: #4A4E5A;     /* 设计稿正文灰 */
  background: var(--lc-cream);
  color: var(--lc-plp-ink);
}

.lume-classic [data-lc-plp] .lc-plp-wrap {
  width: 100%;
  max-width: var(--brand-max, 1328px);
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

.lume-classic [data-lc-plp] a:focus-visible,
.lume-classic [data-lc-plp] button:focus-visible,
.lume-classic [data-lc-plp] summary:focus-visible,
.lume-classic [data-lc-plp] select:focus-visible {
  outline: 2px solid var(--lc-plp-ink);
  outline-offset: 2px;
}

/* ── 面包屑：设计稿是 `Home / Earrings`（13px、muted、`/` 分隔）────────────────
 * 复用站内 `<Breadcrumbs>`（与 JSON-LD 同源、带 data-category-* 契约），只把它的箭头分隔符
 * 换成设计稿的 `/`：隐藏 svg、用 `li + li::before` 画斜杠。DOM / 读屏不变。 */
.lume-classic [data-lc-plp] [data-sf-crumbs] {
  font-size: 13px;
  line-height: 19px;
  color: var(--muted);
}
.lume-classic [data-lc-plp] [data-sf-crumbs] li > svg { display: none; }
.lume-classic [data-lc-plp] [data-sf-crumbs] li + li::before {
  content: "/";
  margin-right: 2px;
  color: var(--muted);
  opacity: 0.85;
}
.lume-classic [data-lc-plp] [data-sf-crumbs] a { color: var(--muted); text-decoration: none; }
.lume-classic [data-lc-plp] [data-sf-crumbs] a:hover { color: var(--ink); }
.lume-classic [data-lc-plp] [data-sf-crumbs] [aria-current="page"] { color: var(--ink); }

/* ── 页头：H1 60px Bodoni（行高 normal）+ 描述 16px ──────────────────────── */
.lume-classic [data-lc-plp] .lc-plp-head { padding-top: 28px; }

.lume-classic [data-lc-plp] .lc-plp-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.lume-classic [data-lc-plp] .lc-plp-title-block { max-width: 560px; }
.lume-classic [data-lc-plp] .lc-plp-title {
  margin: 0;
  font-family: var(--lc-display);
  font-size: 60px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--lc-plp-ink);
}
.lume-classic [data-lc-plp] .lc-plp-desc {
  max-width: 560px;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--lc-plp-muted);
}
.lume-classic [data-lc-plp] .lc-plp-ignored {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ── 圆形子类目（96 圆 + 10 间隙 + 标签；选中描边；横向滚动）──────────────── */
/* 注意：横向滚动容器（overflow-x: auto ⇒ overflow-y 也会变成 auto）会裁掉子项向外
   3px offset 的 1px 选中描边（顶部/左侧先被切掉）。处理：
   · row 加 6px 上下 + 4px 左右内边距，给 outline 留出空间；
   · 用负 margin 抵消左右/上下的视觉位移（父级 margin-top 36→30，净间距不变）。 */
.lume-classic [data-lc-plp] .lc-plp-subcats { margin-top: 30px; }
.lume-classic [data-lc-plp] .lc-plp-subcat-row {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: 0 -4px;
  padding: 6px 4px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.lume-classic [data-lc-plp] .lc-plp-subcat-row::-webkit-scrollbar { display: none; }
.lume-classic [data-lc-plp] .lc-plp-subcat-item { flex: 0 0 auto; width: 104px; }
.lume-classic [data-lc-plp] .lc-plp-subcat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: var(--lc-plp-ink);
  text-decoration: none;
}
.lume-classic [data-lc-plp] .lc-plp-subcat-media {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--lc-sand, #EDE5D9), #E2D7C7);
  outline: 1px solid transparent;
  outline-offset: 3px;
  transition: outline-color 0.2s ease;
}
.lume-classic [data-lc-plp] .lc-plp-subcat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lume-classic [data-lc-plp] .lc-plp-subcat-label {
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.lume-classic [data-lc-plp] .lc-plp-subcat:hover .lc-plp-subcat-media { outline-color: var(--lc-plp-border); }
.lume-classic [data-lc-plp] .lc-plp-subcat.is-active .lc-plp-subcat-media { outline-color: var(--lc-plp-ink); }
.lume-classic [data-lc-plp] .lc-plp-subcat[aria-current="true"] .lc-plp-subcat-media { outline-color: var(--lc-plp-ink); }

/* ── 筛选条：通栏浅底 + 上下 1px 线；左 chip，右计数 + Sort ───────────────── */
.lume-classic [data-lc-plp] [data-lc-plp-filters] {
  margin-top: 36px;
  border-top: 1px solid var(--lc-plp-line);
  border-bottom: 1px solid var(--lc-plp-line);
  background: var(--lc-cream);
}
.lume-classic [data-lc-plp] .lc-plp-filters-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 74px;
  padding-block: 15px;
}
.lume-classic [data-lc-plp] .lc-plp-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

/* chip（`<a>` 与 `<summary>` 共用同一外观；选中 = 墨色描边） */
.lume-classic [data-lc-plp] .lc-plp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--lc-plp-border);
  border-radius: 0;
  background: #fff;
  color: var(--lc-plp-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.lume-classic [data-lc-plp] .lc-plp-chip:hover { border-color: var(--lc-plp-ink); }
.lume-classic [data-lc-plp] .lc-plp-chip.is-active,
.lume-classic [data-lc-plp] .lc-plp-chip[aria-current="true"] { border-color: var(--lc-plp-ink); }
.lume-classic [data-lc-plp] .lc-plp-chip-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #9C9486;
  flex: 0 0 auto;
}
.lume-classic [data-lc-plp] .lc-plp-chip--menu > svg { flex: 0 0 auto; transition: transform 0.2s ease; }
.lume-classic [data-lc-plp] .lc-plp-filter-details[open] > .lc-plp-chip--menu > svg { transform: rotate(180deg); }

/* 下拉（Price / All filters）：桌面=浮层；≤980=展开成整行、静态占位（不遮内容、不横向溢出） */
.lume-classic [data-lc-plp] .lc-plp-filter-details { position: relative; }
.lume-classic [data-lc-plp] .lc-plp-filter-details > summary { list-style: none; }
.lume-classic [data-lc-plp] .lc-plp-filter-details > summary::-webkit-details-marker { display: none; }
.lume-classic [data-lc-plp] .lc-plp-menu-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 40;
  width: 300px;
  max-width: calc(100vw - 48px);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 18px 20px;
  border: 1px solid var(--lc-plp-line);
  background: #fff;
  box-shadow: 0 12px 30px rgba(28, 31, 42, 0.08);
}
.lume-classic [data-lc-plp] .lc-plp-filter-details--right .lc-plp-menu-panel { left: auto; right: 0; }
.lume-classic [data-lc-plp] .lc-plp-menu-group + .lc-plp-menu-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--lc-plp-line);
}
.lume-classic [data-lc-plp] .lc-plp-menu-title {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lume-classic [data-lc-plp] .lc-plp-menu-list { margin: 0; padding: 0; list-style: none; }
.lume-classic [data-lc-plp] .lc-plp-menu-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--lc-plp-ink);
  text-decoration: none;
}
.lume-classic [data-lc-plp] .lc-plp-menu-link:hover { color: var(--lc-gold); }
.lume-classic [data-lc-plp] .lc-plp-menu-link[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lume-classic [data-lc-plp] .lc-plp-menu-count { font-size: 12px; color: var(--muted); }

/* 右：结果计数 + Sort select（设计稿 155×44） */
.lume-classic [data-lc-plp] .lc-plp-filters-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
}
.lume-classic [data-lc-plp] .lc-plp-result { font-size: 14px; color: var(--muted); white-space: nowrap; }
.lume-classic [data-lc-plp] .lc-plp-sort {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.lume-classic [data-lc-plp] .lc-plp-sort select {
  -webkit-appearance: none;
  appearance: none;
  min-width: 155px;
  height: 44px;
  padding: 0 38px 0 16px;
  border: 1px solid var(--lc-plp-border);
  border-radius: 0;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231C1F2A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  color: var(--lc-plp-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}

/* 生效条件 chip 行（设计稿没有；筛选生效时如实回显，每个都是"去掉自己"的真链接） */
.lume-classic [data-lc-plp] .lc-plp-active {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 16px;
  font-size: 12px;
}
.lume-classic [data-lc-plp] .lc-plp-active-label { color: var(--muted); margin-right: 4px; }
.lume-classic [data-lc-plp] .lc-plp-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--lc-plp-line);
  background: #fff;
  color: var(--lc-plp-ink);
  font-size: 12px;
  text-decoration: none;
}
.lume-classic [data-lc-plp] .lc-plp-active-chip:hover { border-color: var(--lc-plp-ink); }
.lume-classic [data-lc-plp] .lc-plp-active-clear {
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lume-classic [data-lc-plp] .lc-plp-active-clear:hover { color: var(--ink); }

/* ── 商品网格：4 列 / 图 4:5 / 列距 20 行距 28 ────────────────────────────── */
.lume-classic [data-lc-plp] .lc-plp-main { padding-top: 36px; padding-bottom: 96px; }
.lume-classic [data-lc-plp] .lc-plp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
}

/* 卡片（结构：card-shell > a.lc-plp-card-link + 心形 + 快速加购） */
.lume-classic [data-lc-plp] .lc-plp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lume-classic [data-lc-plp] .lc-plp-card-link {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.lume-classic [data-lc-plp] .lc-plp-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #F1ECE4;
}
.lume-classic [data-lc-plp] .lc-plp-card-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 本店商品图多为白底 packshot：与主题既有列表卡同一处理（multiply 让白底融进浅米色图块，
     避免整片纯白方块与设计稿的奶油底不一致；深色/实景图不受影响） */
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease;
}
.lume-classic [data-lc-plp] .lc-plp-card-img--hover { opacity: 0; }
.lume-classic [data-lc-plp] .lc-plp-card-imgph {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(160deg, var(--lc-sand, #EDE5D9), #E2D7C7);
}
.lume-classic [data-lc-plp] .lc-plp-card-badge,
.lume-classic [data-lc-plp] .lc-plp-card-soldout {
  position: absolute;
  left: 10px;
  z-index: 3;
  display: inline-block;
  padding: 6px 10px;
  background: rgba(251, 248, 243, 0.92);
  color: var(--lc-plp-ink);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lume-classic [data-lc-plp] .lc-plp-card-badge { top: 10px; }
.lume-classic [data-lc-plp] .lc-plp-card-soldout { bottom: 10px; }

@media (hover: hover) {
  .lume-classic [data-lc-plp] .lc-plp-card:hover:has(.lc-plp-card-img--hover) .lc-plp-card-img--main { opacity: 0; }
  .lume-classic [data-lc-plp] .lc-plp-card:hover .lc-plp-card-img--hover { opacity: 1; }
}

/* 名称 + 价格同行；副标题 13px；色点 14px */
.lume-classic [data-lc-plp] .lc-plp-card-body { padding-top: 14px; }
.lume-classic [data-lc-plp] .lc-plp-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--lc-plp-ink);
}
.lume-classic [data-lc-plp] .lc-plp-card-name {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.lume-classic [data-lc-plp] .lc-plp-card-price { flex: 0 0 auto; white-space: nowrap; font-size: 15px; }
.lume-classic [data-lc-plp] .lc-plp-card-was {
  margin-right: 6px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: line-through;
}
.lume-classic [data-lc-plp] .lc-plp-card-sub {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lume-classic [data-lc-plp] .lc-plp-card-swatches { display: flex; gap: 6px; margin-top: 10px; }
.lume-classic [data-lc-plp] .lc-plp-card-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #9C9486;
}

/* wishlist 心形（右上角 44×44 白底方块；真实收藏接口由 `WishlistHeart` 提供） */
.lume-classic [data-lc-plp] .lc-plp-card > .wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: rgba(251, 248, 243, 0.92);
  color: var(--lc-plp-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lume-classic [data-lc-plp] .lc-plp-card > .wish svg { width: 18px; height: 18px; }
.lume-classic [data-lc-plp] .lc-plp-card > .wish:hover { background: var(--lc-cream); }
.lume-classic [data-lc-plp] .lc-plp-card > .wish[aria-pressed="true"] { color: #B3261E; }

/* 快速加购（复用 `components/QuickAdd` 的全局外观；这里只给宿主定位到图块上） */
.lume-classic [data-lc-plp] .lc-plp-card > .quick-add {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 4 / 5;
  z-index: 2;
}
.lume-classic [data-lc-plp] .lc-plp-card > .quick-add > .quick-add__button { right: 10px; bottom: 10px; }

/* ── 广告位（第 2 行左侧 2 列，630×520；内容来自后台「列表页插卡」banners.plp_tile）── */
.lume-classic [data-lc-plp] .lc-plp-promo {
  position: relative;
  grid-column: span 2;
  display: flex;
  align-items: flex-end;
  height: 520px;
  overflow: hidden;
  color: var(--lc-plp-ink);
  text-decoration: none;
  background: linear-gradient(158deg, #E9E1D5 0%, #E0D5C5 48%, #D9CCBA 100%);
}
.lume-classic [data-lc-plp] .lc-plp-promo-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(255, 255, 255, 0.5), transparent 60%),
    linear-gradient(158deg, rgba(237, 229, 217, 0) 0%, rgba(206, 193, 174, 0.55) 100%);
}
/* 后台上传的背景图：铺满裁切；hover 轻微放大（C 端动效口径） */
.lume-classic [data-lc-plp] .lc-plp-promo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lume-classic [data-lc-plp] .lc-plp-promo:hover .lc-plp-promo-img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .lume-classic [data-lc-plp] .lc-plp-promo-img { transition: none; }
  .lume-classic [data-lc-plp] .lc-plp-promo:hover .lc-plp-promo-img { transform: none; }
}
.lume-classic [data-lc-plp] .lc-plp-promo-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 36px;
  width: 100%;
  box-sizing: border-box;
}
.lume-classic [data-lc-plp] .lc-plp-promo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 380px;
  padding: 28px 32px;
  background: rgba(251, 248, 243, 0.92);
  transition: background-color 0.25s ease;
}
.lume-classic [data-lc-plp] .lc-plp-promo:hover .lc-plp-promo-card { background: rgba(251, 248, 243, 0.98); }
.lume-classic [data-lc-plp] .lc-plp-promo-eyebrow {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lc-gold);
}
.lume-classic [data-lc-plp] .lc-plp-promo-title {
  margin: 10px 0 12px;
  font-family: var(--lc-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--lc-plp-ink);
}
.lume-classic [data-lc-plp] .lc-plp-promo-lead {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lc-plp-muted);
}
.lume-classic [data-lc-plp] .lc-plp-promo-cta {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--lc-plp-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── 分页：Showing x of N + 220×2 进度条 + Load more ─────────────────────── */
.lume-classic [data-lc-plp] .lc-plp-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 56px;
  text-align: center;
}
.lume-classic [data-lc-plp] .lc-plp-showing {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}
.lume-classic [data-lc-plp] .lc-plp-progress {
  position: relative;
  width: 220px;
  height: 2px;
  background: var(--lc-plp-line);
  overflow: hidden;
}
.lume-classic [data-lc-plp] .lc-plp-progress > span {
  display: block;
  height: 2px;
  width: 0;
  background: var(--lc-plp-ink);
}
.lume-classic [data-lc-plp] .lc-plp-pager > [data-load-more] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 145px;
  min-height: 50px;
  margin-top: 0;
  padding: 14px 36px;
  border: 1px solid var(--lc-plp-ink);
  border-radius: 0;
  background: transparent;
  color: var(--lc-plp-ink);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lume-classic [data-lc-plp] .lc-plp-pager > [data-load-more]:hover {
  background: var(--lc-plp-ink);
  color: var(--lc-cream);
}

/* ── 底部 About（集合 description；没有就整段不渲染）──────────────────────── */
.lume-classic [data-lc-plp] .lc-plp-about { padding-top: 88px; padding-bottom: 0; }
.lume-classic [data-lc-plp] .lc-plp-about-inner {
  max-width: 760px;
  padding-top: 40px;
  border-top: 1px solid var(--lc-plp-line);
}
.lume-classic [data-lc-plp] .lc-plp-about h2 {
  margin: 0 0 12px;
  font-family: var(--lc-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--lc-plp-ink);
}
.lume-classic [data-lc-plp] .lc-plp-about p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lc-plp-muted);
}

/* ── 空态（无商品 / 筛选后无商品）─────────────────────────────────────────── */
.lume-classic [data-lc-plp] .lc-plp-empty {
  padding: 80px 24px 96px;
  text-align: center;
  color: var(--muted);
}
.lume-classic [data-lc-plp] .lc-plp-empty h2 {
  margin: 0 0 14px;
  font-family: var(--lc-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--lc-plp-ink);
}
.lume-classic [data-lc-plp] .lc-plp-empty p { margin: 0; }
.lume-classic [data-lc-plp] .lc-plp-empty-clear {
  color: var(--lc-plp-ink);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================================
   响应式：≥1240 四列 / 980–1239 三列 / <980 两列；390 不横向溢出。
   广告位 <1240 退化为**整行 1 列**（保留内容，不隐藏）。
   ========================================================================== */
@media (max-width: 1239px) {
  .lume-classic [data-lc-plp] .lc-plp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lume-classic [data-lc-plp] .lc-plp-promo {
    grid-column: 1 / -1;
    height: 420px;
  }
  .lume-classic [data-lc-plp] .lc-plp-promo-inner { padding: 28px; }
}

@media (max-width: 979px) {
  .lume-classic [data-lc-plp] .lc-plp-head { padding-top: 20px; }
  .lume-classic [data-lc-plp] .lc-plp-title-row { margin-top: 20px; }
  .lume-classic [data-lc-plp] .lc-plp-title { font-size: 40px; }
  .lume-classic [data-lc-plp] .lc-plp-desc { font-size: 15px; }
  .lume-classic [data-lc-plp] .lc-plp-subcats { margin-top: 24px; }
  .lume-classic [data-lc-plp] .lc-plp-subcat-row { gap: 16px; }
  .lume-classic [data-lc-plp] .lc-plp-subcat-item { width: 92px; }
  .lume-classic [data-lc-plp] .lc-plp-subcat-media { width: 84px; height: 84px; }
  .lume-classic [data-lc-plp] .lc-plp-subcat-label { font-size: 13px; }

  .lume-classic [data-lc-plp] [data-lc-plp-filters] { margin-top: 24px; }
  .lume-classic [data-lc-plp] .lc-plp-filters-inner { min-height: 0; padding-block: 12px; }
  .lume-classic [data-lc-plp] .lc-plp-chips { gap: 8px; }
  .lume-classic [data-lc-plp] .lc-plp-chip { min-height: 40px; padding: 8px 12px; font-size: 13px; }
  .lume-classic [data-lc-plp] .lc-plp-filters-right { width: 100%; justify-content: space-between; gap: 12px; }
  .lume-classic [data-lc-plp] .lc-plp-sort { gap: 12px; }
  .lume-classic [data-lc-plp] .lc-plp-sort select { min-width: 140px; height: 40px; }

  /* 下拉在窄屏展开成整行静态面板（浮层会遮内容 / 贴边溢出） */
  .lume-classic [data-lc-plp] .lc-plp-filter-details[open] { flex-basis: 100%; }
  .lume-classic [data-lc-plp] .lc-plp-menu-panel {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    margin-top: 8px;
    padding: 16px 18px;
    box-shadow: none;
  }

  .lume-classic [data-lc-plp] .lc-plp-main { padding-top: 24px; padding-bottom: 64px; }
  .lume-classic [data-lc-plp] .lc-plp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .lume-classic [data-lc-plp] .lc-plp-card-row { font-size: 14px; }
  .lume-classic [data-lc-plp] .lc-plp-card-price { font-size: 14px; }
  .lume-classic [data-lc-plp] .lc-plp-card-sub { font-size: 12px; }
  .lume-classic [data-lc-plp] .lc-plp-promo { height: 380px; }
  .lume-classic [data-lc-plp] .lc-plp-promo-inner { padding: 24px; }
  .lume-classic [data-lc-plp] .lc-plp-promo-card { padding: 22px 24px; max-width: 340px; }
  .lume-classic [data-lc-plp] .lc-plp-promo-title { font-size: 30px; }
  .lume-classic [data-lc-plp] .lc-plp-pager { padding-top: 40px; }
  .lume-classic [data-lc-plp] .lc-plp-about { padding-top: 56px; padding-bottom: 0; }
  .lume-classic [data-lc-plp] .lc-plp-about-inner { padding-top: 28px; }
  .lume-classic [data-lc-plp] .lc-plp-about h2 { font-size: 24px; }
}

@media (max-width: 560px) {
  .lume-classic [data-lc-plp] .lc-plp-wrap { padding-inline: 20px; }
  .lume-classic [data-lc-plp] .lc-plp-title { font-size: 34px; }
  .lume-classic [data-lc-plp] .lc-plp-subcat-item { width: 84px; }
  .lume-classic [data-lc-plp] .lc-plp-subcat-media { width: 76px; height: 76px; }
  .lume-classic [data-lc-plp] .lc-plp-subcat-label { font-size: 12px; }
  .lume-classic [data-lc-plp] .lc-plp-promo { height: 330px; }
  .lume-classic [data-lc-plp] .lc-plp-promo-card { max-width: none; }
  .lume-classic [data-lc-plp] .lc-plp-promo-title { font-size: 26px; }
  .lume-classic [data-lc-plp] .lc-plp-card-name { -webkit-line-clamp: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .lume-classic [data-lc-plp] .lc-plp-card-media,
  .lume-classic [data-lc-plp] .lc-plp-card-img,
  .lume-classic [data-lc-plp] .lc-plp-promo-card,
  .lume-classic [data-lc-plp] .lc-plp-subcat-media,
  .lume-classic [data-lc-plp] .lc-plp-chip {
    transition: none;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-lume-classic-pdp.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
/**
 * lume-classic 商品详情页（PDP）皮肤 —— Redesign v2「Product · 商品详情页」。
 *
 * 规则**全部**限定在 `.lume-classic [data-lc-pdp]` 下（唯一例外：折叠区/相关商品卡的
 * 后代选择器仍以 `[data-lc-pdp]` 为根）；引入顺序见 src/app/layout.tsx
 * （在本文件之前引入 theme-lume-classic.css，之后才是本文件 ⇒ 同特异性时本文件胜出）。
 *
 * 结构锚点（由 src/templates/lume-classic/LumeClassicProduct.tsx 输出）：
 *   [data-lc-pdp]                    页面根
 *   [data-lc-pdp-gallery]            2×2 图片网格
 *   [data-lc-pdp-info]               右侧信息栏
 *   [data-lc-pdp-accordion]          四个折叠项
 *   [data-lc-pdp-related]            Complete the look
 *
 * 1440 设计稿实测（`.tmp/design/spec-pdp.mjs`）：
 *   版心 1280（x=80）；左图 2×2 每张 346×520、gap 12；右栏 521、两栏 gap 56；
 *   面包屑 13px；眉题 12px 金色大写；H1 Bodoni 48px/1.1；副标 16px muted；价格 24px + 14px muted；
 *   色板 40px 圆；尺码按钮 64×48；加购 455×56；折叠行 16px / 内容 14px muted；相关商品卡 305×340。
 */

/* ── 页面骨架 ─────────────────────────────────────────────────────────────── */
.lume-classic [data-lc-pdp] {
  --lc-pdp-line: #E6DED2;      /* 设计稿细线（= 主题 --steel-light） */
  --lc-pdp-ink-muted: #4A4E5A; /* 设计稿正文 muted（比主题 --muted #5E6270 更深） */
  --lc-pdp-gray: #5E6270;      /* 设计稿辅助灰（VAT / 面包屑） */
  background: var(--lc-cream, #FBF8F3);
  color: var(--ink, #1C1F2A);
  font-family: var(--sans, "Jost", sans-serif);
  padding-top: 24px;
  padding-bottom: 104px;
}

.lume-classic [data-lc-pdp] :where(h1, h2, h3, p, ul, dl, dd) {
  margin: 0;
}

.lume-classic [data-lc-pdp] .lc-pdp-wrap {
  box-sizing: border-box;
  max-width: 1360px;   /* 1360 − 2×40 padding = 设计稿内容宽 1280 */
  margin: 0 auto;
  padding: 0 40px;
}

/* ── 面包屑 ───────────────────────────────────────────────────────────────── */
.lume-classic [data-lc-pdp] .lc-pdp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lc-pdp-gray);
}

.lume-classic [data-lc-pdp] .lc-pdp-crumbs a {
  color: var(--lc-pdp-gray);
  text-decoration: none;
  transition: color .2s;
}

.lume-classic [data-lc-pdp] .lc-pdp-crumbs a:hover {
  color: var(--lc-gold, #8A6A35);
}

.lume-classic [data-lc-pdp] .lc-pdp-crumb-item {
  display: inline-flex;
  align-items: center;
}

.lume-classic [data-lc-pdp] .lc-pdp-crumb-sep {
  padding: 0 8px;
  color: var(--lc-pdp-gray);
}

/* ── 两栏：左图 2×2 / 右信息栏 521 ───────────────────────────────────────── */
.lume-classic [data-lc-pdp] .lc-pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.lume-classic [data-lc-pdp] .lc-pdp-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.lume-classic [data-lc-pdp] .lc-pdp-shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(160deg, var(--lc-sand, #EDE5D9), #E2D7C7);
  overflow: hidden;
  cursor: zoom-in;
}

.lume-classic [data-lc-pdp] .lc-pdp-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease, ease);
}

.lume-classic [data-lc-pdp] .lc-pdp-shot:hover img {
  transform: scale(1.03);
}

.lume-classic [data-lc-pdp] .lc-pdp-shot:focus-visible {
  outline: 1px solid var(--ink, #1C1F2A);
  outline-offset: 2px;
}

/* 真实商品常只有 1–2 张图：单图时占满两列（不留半个空框），比例放成 4:5 接近设计稿画幅 */
.lume-classic [data-lc-pdp] .lc-pdp-gallery[data-count="1"] .lc-pdp-shot {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
}

.lume-classic [data-lc-pdp] .lc-pdp-ph {
  display: block;
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--lc-sand, #EDE5D9), #E2D7C7);
}

/* ── 右信息栏 ─────────────────────────────────────────────────────────────── */
.lume-classic [data-lc-pdp] .lc-pdp-info {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lume-classic [data-lc-pdp] .lc-pdp-eyebrow {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lc-gold, #8A6A35);
}

.lume-classic [data-lc-pdp] .lc-pdp-title {
  margin: 10px 0 8px;
  font-family: var(--brand-font-display, "Bodoni Moda", serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.lume-classic [data-lc-pdp] .lc-pdp-sub {
  font-size: 16px;
  line-height: 1.45;
  color: var(--lc-pdp-ink-muted);
}

.lume-classic [data-lc-pdp] .lc-pdp-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 24px;
  line-height: 1.2;
}

.lume-classic [data-lc-pdp] .lc-pdp-vat {
  font-size: 14px;
  color: var(--lc-pdp-gray);
}

/* 规格块（Colour / Size / 其它维度） */
.lume-classic [data-lc-pdp] .lc-pdp-opt-label {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.lume-classic [data-lc-pdp] .lc-pdp-opt-label b {
  font-weight: 500;
}

.lume-classic [data-lc-pdp] .lc-pdp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lume-classic [data-lc-pdp] .lc-pdp-swatch {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(28, 31, 42, .16);
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
}

.lume-classic [data-lc-pdp] .lc-pdp-swatch:hover {
  transform: scale(1.06);
}

.lume-classic [data-lc-pdp] .lc-pdp-swatch.is-selected {
  box-shadow: 0 0 0 1px var(--lc-cream, #FBF8F3), 0 0 0 2px var(--ink, #1C1F2A);
}

.lume-classic [data-lc-pdp] .lc-pdp-swatch.is-disabled {
  opacity: .4;
  cursor: not-allowed;
}

.lume-classic [data-lc-pdp] .lc-pdp-swatch:focus-visible {
  outline: 2px solid var(--ink, #1C1F2A);
  outline-offset: 3px;
}

.lume-classic [data-lc-pdp] .lc-pdp-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lume-classic [data-lc-pdp] .lc-pdp-size {
  min-width: 64px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #CFC6B8;
  border-radius: 0;
  background: #FFFFFF;
  color: var(--ink, #1C1F2A);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}

.lume-classic [data-lc-pdp] .lc-pdp-size:hover:not(:disabled) {
  border-color: var(--ink, #1C1F2A);
}

.lume-classic [data-lc-pdp] .lc-pdp-size.is-selected {
  border-color: var(--ink, #1C1F2A);
  background: var(--ink, #1C1F2A);
  color: var(--lc-cream, #FBF8F3);
}

.lume-classic [data-lc-pdp] .lc-pdp-size.is-disabled {
  color: var(--lc-pdp-gray);
  text-decoration: line-through;
  opacity: .55;
  cursor: not-allowed;
}

.lume-classic [data-lc-pdp] .lc-pdp-size-wide {
  min-width: 0;
}

.lume-classic [data-lc-pdp] .lc-pdp-size:focus-visible {
  outline: 2px solid var(--ink, #1C1F2A);
  outline-offset: 2px;
}

/* 加购行：Add to bag 455×56 + 右侧 56×56 wishlist 方钮 */
.lume-classic [data-lc-pdp] .lc-pdp-atc {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.lume-classic [data-lc-pdp] .lc-pdp-add {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--ink, #1C1F2A);
  color: var(--lc-cream, #FBF8F3);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .2s, opacity .2s;
}

.lume-classic [data-lc-pdp] .lc-pdp-add:hover:not(:disabled) {
  background: var(--navy, #26304A);
}

.lume-classic [data-lc-pdp] .lc-pdp-add:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.lume-classic [data-lc-pdp] .lc-pdp-add.is-added {
  background: var(--navy, #26304A);
}

.lume-classic [data-lc-pdp] .lc-pdp-add:focus-visible {
  outline: 2px solid var(--ink, #1C1F2A);
  outline-offset: 2px;
}

.lume-classic [data-lc-pdp] .lc-pdp-wish {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
}

/* 复用 WishlistHeart 的 `pdp` 变体（真实接口 + aria-live），外观改成设计稿的 56×56 描边方钮 */
.lume-classic [data-lc-pdp] .lc-pdp-wish [data-pdp-wishlist] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  border: 1px solid var(--ink, #1C1F2A);
  border-radius: 0;
  background: transparent;
  color: var(--ink, #1C1F2A);
}

.lume-classic [data-lc-pdp] .lc-pdp-wish [data-pdp-wishlist]:hover {
  border-color: var(--ink, #1C1F2A);
  background: rgba(28, 31, 42, .04);
}

.lume-classic [data-lc-pdp] .lc-pdp-wish [data-pdp-wishlist] > span:last-child {
  display: none;
}

.lume-classic [data-lc-pdp] .lc-pdp-wish [data-pdp-wishlist] svg {
  width: 20px;
  height: 20px;
}

/* 数量（2026-11-05 用户口径：改用购物车同一个 `QuantityStepper` 数字输入框组件，位于加购上方） */
.lume-classic [data-lc-pdp] .lc-pdp-qty {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--lc-pdp-gray);
  font-size: 14px;
}

.lume-classic [data-lc-pdp] .lc-pdp-qty-label {
  flex: 0 0 auto;
}

/* 组件是 lg 描边输入组（− [数字] +，48px 高、手输可用）；主题全站直角 ⇒ 圆角令牌为 0，
   这里只把描边/底色换成主题令牌（其它主题的 QuantityStepper 样式不变）。 */
.lume-classic [data-lc-pdp] .lc-pdp-qty [role="group"] {
  border-color: var(--lc-pdp-line);
  background: var(--lc-pdp-paper, #fff);
}

.lume-classic [data-lc-pdp] .lc-pdp-qty [role="group"]:focus-within {
  border-color: var(--ink, #1C1F2A);
}

.lume-classic [data-lc-pdp] .lc-pdp-add-error {
  font-size: 13px;
  color: #A3232B;
}

/* 4 条服务说明 */
.lume-classic [data-lc-pdp] .lc-pdp-service {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--lc-pdp-line);
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lc-pdp-ink-muted);
}

/* 折叠区 */
.lume-classic [data-lc-pdp] .lc-pdp-acc-item {
  border-top: 1px solid var(--lc-pdp-line);
}

.lume-classic [data-lc-pdp] .lc-pdp-acc-item:last-child {
  border-bottom: 1px solid var(--lc-pdp-line);
}

.lume-classic [data-lc-pdp] .lc-pdp-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 20px 0;
  border: 0;
  background: none;
  color: var(--ink, #1C1F2A);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.lume-classic [data-lc-pdp] .lc-pdp-acc-head:focus-visible {
  outline: 2px solid var(--ink, #1C1F2A);
  outline-offset: 2px;
}

.lume-classic [data-lc-pdp] .lc-pdp-acc-sign {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

.lume-classic [data-lc-pdp] .lc-pdp-acc-body {
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--lc-pdp-ink-muted);
}

.lume-classic [data-lc-pdp] .lc-pdp-acc-body p + p {
  margin-top: 12px;
}

.lume-classic [data-lc-pdp] .lc-pdp-specs {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}

.lume-classic [data-lc-pdp] .lc-pdp-specs > div {
  display: flex;
  gap: 6px;
}

.lume-classic [data-lc-pdp] .lc-pdp-specs dt {
  color: var(--ink, #1C1F2A);
  font-weight: 500;
}

.lume-classic [data-lc-pdp] .lc-pdp-specs dd {
  color: var(--lc-pdp-ink-muted);
}

/* ── Complete the look（Bodoni 40px + 4 列商品卡） ────────────────────────── */
.lume-classic [data-lc-pdp] .lc-pdp-look {
  padding-top: 104px;
}

.lume-classic [data-lc-pdp] .lc-pdp-look-title {
  margin-bottom: 28px;
  font-family: var(--brand-font-display, "Bodoni Moda", serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
}

.lume-classic [data-lc-pdp] .lc-pdp-look-grid {
  padding: 0 40px;
}

/* ProductGrid 自带 `.wrap px-0`（为集合页的 Page 容器幂等留白而设计）；
   这里把它还原成与设计稿同宽的内容区（外层 40 留白 + 内层 1280 居中）。 */
.lume-classic [data-lc-pdp] .lc-pdp-look-grid > .wrap {
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* 设计稿：相关商品卡 4 列、列距 20、图 305×340（比列表页的 4:5 略矮，按设计稿实测值） */
.lume-classic [data-lc-pdp] [data-product-grid] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.lume-classic [data-lc-pdp] [data-product-grid] .card .img,
.lume-classic [data-lc-pdp] [data-product-grid] > .card-shell > .quick-add {
  aspect-ratio: 305 / 340;
}

/* Complete the look 的 SPU 图片填充：cover（用户 2026-11-05 口径；列表页保持 contain 不变） */
.lume-classic [data-lc-pdp] [data-product-grid] .card .img img {
  object-fit: cover;
}

.lume-classic [data-lc-pdp] [data-product-grid] .card .meta {
  margin-top: 14px;
  font-size: 15px;
}

.lume-classic [data-lc-pdp] [data-product-grid] .card .sub {
  margin-top: 4px;
  font-size: 13px;
}

/* ── 响应式：<980 单栏（图在上、信息在下），按钮全宽；390 不横向溢出 ────────── */
@media (max-width: 979px) {
  .lume-classic [data-lc-pdp] {
    padding-top: 16px;
    padding-bottom: 64px;
  }

  .lume-classic [data-lc-pdp] .lc-pdp-wrap {
    padding: 0 16px;
  }

  .lume-classic [data-lc-pdp] .lc-pdp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .lume-classic [data-lc-pdp] .lc-pdp-title {
    font-size: 36px;
  }

  /* 移动端：面包屑末级（可能是很长的平台商品名）单行省略，避免挤成 3–4 行 */
  .lume-classic [data-lc-pdp] .lc-pdp-crumbs [aria-current="page"] {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lume-classic [data-lc-pdp] .lc-pdp-crumb-item:last-child {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .lume-classic [data-lc-pdp] .lc-pdp-look {
    padding-top: 64px;
  }

  .lume-classic [data-lc-pdp] .lc-pdp-look-grid {
    padding: 0 16px;
  }

  .lume-classic [data-lc-pdp] [data-product-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
}

@media (min-width: 980px) and (max-width: 1239px) {
  .lume-classic [data-lc-pdp] [data-product-grid] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .lume-classic [data-lc-pdp] .lc-pdp-title {
    font-size: 32px;
  }

  .lume-classic [data-lc-pdp] .lc-pdp-size {
    min-width: 58px;
    padding: 0 10px;
  }

  .lume-classic [data-lc-pdp] .lc-pdp-look-title {
    font-size: 32px;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-lume-classic-cart.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * lume-classic 购物车页（Bag）皮肤 —— Redesign v2「Bag · 购物袋」。
 *
 * 出处：`.tmp/design/page-04-Bag-购物袋.html` / `shot-04-Bag-购物袋.png`（1440×1469）。
 * 规则全部限定在 `.lume-classic [data-lc-bag]`（= `templates/lume-classic/LumeClassicBag.tsx` 的根，
 * 同时带 `data-cart-scope`）⇒ 其它主题、其它页面零影响。引入顺序见 `src/app/layout.tsx`
 * （在本文件之前的 `theme-lume-classic.css` 之后）。
 *
 * 设计关键值（1440 / 内容区 1280）：
 *   版心 = `Page` 的 max-w-brand(1328) + px-6 ⇒ 内容 1280、左缘 80（= 设计稿 `.wrap` 40 padding）；
 *   两栏 = 1.6fr / 1fr + 48 间距（左 ≈758 / 右 ≈474）；右卡 padding 32（内宽 ≈410 = 设计稿口径的 412）；
 *   H1 Bodoni 52；卡片标题 Bodoni 30；推荐区标题 Bodoni 34。
 */

/* ────────────────────────── 页面骨架 ────────────────────────── */

.lume-classic [data-lc-bag] {
  --lc-bag-line: #E6DED2; /* = --steel-light，设计稿行分隔线 */
  --lc-bag-control: #CFC6B8; /* 数量组 / 输入框描边（设计稿 --line-strong 档） */
  --lc-bag-track: #EDE6DC; /* 进度条底 */
  --lc-bag-input-bg: #fff;
  color: var(--ink);
  font-family: var(--brand-font-sans, "Jost", sans-serif);
}
.lume-classic [data-lc-bag] *,
.lume-classic [data-lc-bag] *::before,
.lume-classic [data-lc-bag] *::after { box-sizing: border-box; }

.lume-classic [data-lc-bag] .lc-bag-title {
  margin: 0 0 28px;
  font-family: var(--brand-font-display, "Bodoni Moda", serif);
  font-size: 52px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lume-classic [data-lc-bag] .lc-bag-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.lume-classic [data-lc-bag] .lc-bag-main { min-width: 0; }

/* ────────────────────────── 免运费进度卡 ────────────────────────── */

.lume-classic [data-lc-bag] .lc-bag-shipping {
  background: var(--white, #fff);
  border: 1px solid var(--lc-bag-line);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.lume-classic [data-lc-bag] .lc-bag-shipping-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}
.lume-classic [data-lc-bag] .lc-bag-progress {
  height: 4px;
  margin-top: 12px;
  background: var(--lc-bag-track);
  overflow: hidden;
}
.lume-classic [data-lc-bag] .lc-bag-progress-fill {
  display: block;
  height: 100%;
  background: var(--navy, #26304A);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 下架行提示条（真实能力，沿用共享组件；只压掉它的圆角/间距以贴合直角语言） */
.lume-classic [data-lc-bag] .lc-bag-notice { margin: 0 0 20px; border-radius: 0; }

/* ────────────────────────── 购物袋行 ────────────────────────── */

.lume-classic [data-lc-bag] .lc-bag-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--lc-bag-line);
}
.lume-classic [data-lc-bag] .lc-bag-line {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--lc-bag-line);
  transition: opacity 0.22s ease;
}
.lume-classic [data-lc-bag] .lc-bag-line[data-leaving] { opacity: 0; }

.lume-classic [data-lc-bag] .lc-bag-thumb {
  display: block;
  width: 120px;
  height: 150px;
  background: var(--porcelain, #F1ECE4);
  overflow: hidden;
}
.lume-classic [data-lc-bag] .lc-bag-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  /* 用户 2026-11-05 口径：购物车列表商品图用 cover 铺满（裁切铺满缩略图） */
  object-fit: cover;
  mix-blend-mode: multiply;
}

.lume-classic [data-lc-bag] .lc-bag-line-info { min-width: 0; }
.lume-classic [data-lc-bag] .lc-bag-line-title {
  display: inline-block;
  max-width: 100%;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.lume-classic [data-lc-bag] .lc-bag-line-title:hover { color: var(--lc-gold, #8A6A35); }
.lume-classic [data-lc-bag] .lc-bag-line-variant {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted, #5E6270);
}
.lume-classic [data-lc-bag] .lc-bag-line-badge { display: block; margin-top: 8px; }
/* 库存不足标识（2026-11-05）：与下架标识同一位置/同一套直角视觉，但用主题沙色底表明"还能买、只是量不够" */
.lume-classic [data-lc-bag] .lc-bag-stock-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--lc-bag-line);
  background: var(--porcelain, #F1ECE4);
  color: var(--ink, #1C1F2A);
  font-size: 12px;
  line-height: 1.5;
}

/* 数量步进器：设计稿 44×44 按钮 + 窄数字框（行为全部在原语 QuantityStepper 里，只改外观） */
.lume-classic [data-lc-bag] .lc-bag-line-qty { margin-top: 16px; }
.lume-classic [data-lc-bag] .lc-bag-line-qty > [role="group"] {
  height: 46px;
  align-items: stretch;
  border: 1px solid var(--lc-bag-control);
  border-radius: 0;
  background: transparent;
}
.lume-classic [data-lc-bag] .lc-bag-line-qty > [role="group"] > button {
  width: 44px;
  height: 100%;
  border-radius: 0;
  font-size: 18px;
  color: var(--ink);
}
.lume-classic [data-lc-bag] .lc-bag-line-qty > [role="group"] > input {
  width: 34px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
}
/* 键盘焦点可见（原语自带 focus-visible 环，这里只保证不被全局输入框规则吃掉） */
.lume-classic [data-lc-bag] .lc-bag-line-qty > [role="group"] > button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.lume-classic [data-lc-bag] .lc-bag-line-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
  font-size: 13px;
}
.lume-classic [data-lc-bag] .lc-bag-link {
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lume-classic [data-lc-bag] .lc-bag-link:hover { color: var(--lc-gold, #8A6A35); }
.lume-classic [data-lc-bag] .lc-bag-link:disabled { opacity: 0.55; cursor: progress; }
.lume-classic [data-lc-bag] .lc-bag-link--muted { color: var(--muted, #5E6270); }
.lume-classic [data-lc-bag] .lc-bag-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lume-classic [data-lc-bag] .lc-bag-line-error {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #B42318;
}

.lume-classic [data-lc-bag] .lc-bag-line-price { text-align: right; white-space: nowrap; }
.lume-classic [data-lc-bag] .lc-bag-line-was {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  color: var(--muted, #5E6270);
}
.lume-classic [data-lc-bag] .lc-bag-line-total {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.lume-classic [data-lc-bag] .lc-bag-line-unit {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #5E6270);
}

/* ────────────────────────── Order summary（右栏 474 = 设计稿 412 内宽 + 2×32 padding） ────────── */

.lume-classic [data-lc-bag] .lc-bag-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  background: var(--white, #fff);
  border: 1px solid var(--lc-bag-line);
}
.lume-classic [data-lc-bag] .lc-bag-summary-title {
  margin: 0 0 6px;
  font-family: var(--brand-font-display, "Bodoni Moda", serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lume-classic [data-lc-bag] .lc-bag-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.lume-classic [data-lc-bag] .lc-bag-summary-value { font-variant-numeric: tabular-nums; }
.lume-classic [data-lc-bag] .lc-bag-summary-muted { color: var(--muted, #5E6270); text-align: right; }
.lume-classic [data-lc-bag] .lc-bag-summary-row--discount span:last-child { color: #0c5132; }

/* 优惠码折叠（真表单；回车 = Apply，复用 CartView 的 ?code= + quote 链路） */
.lume-classic [data-lc-bag] .lc-bag-discount {
  border-top: 1px solid var(--lc-bag-line);
  padding-top: 14px;
  font-size: 14px;
}
.lume-classic [data-lc-bag] .lc-bag-discount > summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  line-height: 1.5;
  /* 去掉浏览器默认的 ▶ marker（改用行内 SVG，见组件） */
  list-style: none;
}
.lume-classic [data-lc-bag] .lc-bag-discount > summary::-webkit-details-marker { display: none; }
.lume-classic [data-lc-bag] .lc-bag-discount > summary::marker { content: ''; }
/* SVG 标记：收起 = 右向三角（▶），展开 → 旋转 90° 朝下 */
.lume-classic [data-lc-bag] .lc-bag-discount-icon {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  color: var(--ink);
  transition: transform .2s ease;
}
.lume-classic [data-lc-bag] .lc-bag-discount[open] > summary .lc-bag-discount-icon { transform: rotate(90deg); }
.lume-classic [data-lc-bag] .lc-bag-discount > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lume-classic [data-lc-bag] .lc-bag-discount-form { display: flex; gap: 8px; margin-top: 10px; }
.lume-classic [data-lc-bag] .lc-bag-discount-form input {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--lc-bag-control);
  border-radius: 0;
  background: var(--lc-bag-input-bg);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.lume-classic [data-lc-bag] .lc-bag-discount-form input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.lume-classic [data-lc-bag] .lc-bag-discount-form button {
  flex: none;
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.lume-classic [data-lc-bag] .lc-bag-discount-form button:hover { background: var(--ink); color: var(--lc-cream); }
.lume-classic [data-lc-bag] .lc-bag-discount-form button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lume-classic [data-lc-bag] .lc-bag-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lume-classic [data-lc-bag] .lc-bag-summary-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--lc-bag-line);
  padding-top: 16px;
  font-size: 18px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.lume-classic [data-lc-bag] .lc-bag-summary-vat {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #5E6270);
}

/* 墨色通栏结算按钮（设计稿 padding 18 / 15px / letter-spacing .06em） */
.lume-classic [data-lc-bag] .lc-bag-checkout {
  display: block;
  padding: 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--lc-cream, #FBF8F3);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
}
.lume-classic [data-lc-bag] .lc-bag-checkout:hover { background: var(--navy, #26304A); border-color: var(--navy, #26304A); color: var(--lc-cream, #FBF8F3); }
.lume-classic [data-lc-bag] .lc-bag-checkout:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 支付标识行（真实数据：店铺 CMS 的 paymentIcons；没配就不渲染） */
.lume-classic [data-lc-bag] .lc-bag-payments {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}
.lume-classic [data-lc-bag] .lc-bag-payments [data-footer-payments] {
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 3 条说明 */
.lume-classic [data-lc-bag] .lc-bag-trust {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--lc-bag-line);
  list-style: none;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #5E6270);
}

/* ────────────────────────── Complete your order ────────────────────────── */

/* 2026-11-05 用户口径：购物车底部与 PDP「Complete the look」**共用同一个展示组件**
   （`LumeClassicLookGrid` = 标准 Lume 商品卡网格）。这里只保留外层容器/标题的间距，
   卡片版式/快捷加购/wishlist 全部由共享组件 + 全局 `[data-product-grid]` 主题规则提供。 */
.lume-classic [data-lc-bag] .lc-bag-recs { margin-top: 88px; padding-bottom: 32px; }
.lume-classic [data-lc-bag] .lc-bag-recs-title {
  margin: 0 0 24px;
  font-family: var(--brand-font-display, "Bodoni Moda", serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* SPU 图片填充：与详情页 Complete the look 一致 —— cover（用户 2026-11-05 口径） */
.lume-classic [data-lc-bag] .lc-bag-recs [data-product-grid] .card .img img {
  object-fit: cover;
}

/* 推荐卡图片比例：4/5（用户 2026-11-05 口径；全局 `[data-product-grid]` 默认是 2/3）。
   同步 quick-add 悬停层，避免按钮覆盖层与图块高度错位。 */
.lume-classic [data-lc-bag] .lc-bag-recs [data-product-grid] .card .img,
.lume-classic [data-lc-bag] .lc-bag-recs [data-product-grid] > .card-shell > .quick-add {
  aspect-ratio: 4 / 5;
}

/* ────────────────────────── 空购物袋 ────────────────────────── */

.lume-classic [data-lc-bag] .lc-bag-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 64px 24px;
  border: 1px solid var(--lc-bag-line);
  background: var(--white, #fff);
  text-align: center;
}
.lume-classic [data-lc-bag] .lc-bag-empty .lc-bag-title { font-size: 34px; margin-bottom: 12px; }
.lume-classic [data-lc-bag] .lc-bag-empty-lead {
  margin: 0 auto 28px;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted, #5E6270);
}
.lume-classic [data-lc-bag] .lc-bag-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--lc-cream, #FBF8F3);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.lume-classic [data-lc-bag] .lc-bag-empty-cta:hover { background: var(--navy, #26304A); border-color: var(--navy, #26304A); }

/* ────────────────────────── 响应式（<980 单栏；≤700 行内价格下沉） ────────────────────────── */

@media (max-width: 980px) {
  .lume-classic [data-lc-bag] .lc-bag-title { font-size: 40px; }
  .lume-classic [data-lc-bag] .lc-bag-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lume-classic [data-lc-bag] .lc-bag-summary { padding: 24px; }
  .lume-classic [data-lc-bag] .lc-bag-recs { margin-top: 56px; }
  /* 推荐卡沿用全局 `[data-product-grid]` 的 2 列断点（theme-lume-classic.css），这里不再单独定义 */
}

@media (max-width: 700px) {
  .lume-classic [data-lc-bag] .lc-bag-line {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 0;
  }
  .lume-classic [data-lc-bag] .lc-bag-thumb { width: 88px; height: 110px; }
  .lume-classic [data-lc-bag] .lc-bag-line-price {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 4px;
    text-align: left;
  }
  .lume-classic [data-lc-bag] .lc-bag-line-was { margin-bottom: 0; }
  .lume-classic [data-lc-bag] .lc-bag-line-unit { margin-top: 0; }
}

@media (max-width: 560px) {
  .lume-classic [data-lc-bag] .lc-bag-title { font-size: 34px; margin-bottom: 20px; }
  .lume-classic [data-lc-bag] .lc-bag-shipping { padding: 16px 18px; }
  .lume-classic [data-lc-bag] .lc-bag-summary { padding: 20px; }
  .lume-classic [data-lc-bag] .lc-bag-summary-title { font-size: 26px; }
  .lume-classic [data-lc-bag] .lc-bag-recs-title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .lume-classic [data-lc-bag] .lc-bag-progress-fill { transition: none; }
  .lume-classic [data-lc-bag] .lc-bag-line { transition: none; }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-lume-classic-checkout.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * lume-classic 结算页（Checkout）皮肤 —— Redesign v2「Checkout · 结账」。
 *
 * 用户口径（任务书）：
 *   · **左侧现有支付逻辑与样式一个字都不动**（Express checkout / Contact / Delivery /
 *     Shipping method / Payment / 条款 / Pay 按钮全部沿用现有 `checkout-shopify.css` + `theme-lume-classic.css`）；
 *   · 只改**页面背景色**（奶油底 `#FBF8F3`）与**右侧 Order summary 卡片**（设计稿
 *     `.tmp/design/page-05-Checkout-结账.html`，卡片白底 1px #E6DED2 描边、28px 内边距）。
 *
 * 作用域：根类 `.lume-classic`（`CheckoutChrome` 根节点 = `lume lume-classic`）内，且
 *   只命结算页的 `[data-checkout-scope]` / `[data-checkout-summary-col]` / `[data-summary-card]`
 *   / 页头 —— 其它主题（.lume / .lj / .gimme / .n90）拿不到任何一条规则。
 *
 * ⚠️ 引入顺序（src/app/layout.tsx）：本文件在 `theme-lume-classic.css` 之后、
 *    `checkout-shopify.css` **之前**；后者是未分层 + 大量 `!important` 的全主题 Shopify 皮肤。
 *    所以要压过它必须：① 多带 `.lume-classic` 提高特指度；② 关键属性加 `!important`
 *    （与 `theme-lume-classic.css` 的 P0-2 段同一手法）。
 * ⚠️ 本文件**不写**任何会影响左列表单/支付/报价的规则：选择器一律带
 *    `[data-checkout-summary-col]` / `[data-summary-card]` / `[data-lc-*]`，页头与整页背景除外。
 */

/* =============================================================================
   1. 页面背景：奶油底（设计稿 body #FBF8F3）
   -----------------------------------------------------------------------------
   `brand-tokens.css` 里 `.lume-classic:has([data-checkout-scope])` 明确把结算页拉回
   `#FFFFFF`（2026-11-03 用户口径「结算保持 Shopify 风格」）；本次用户要求按 Redesign v2
   改回奶油底，故只在**结算页**覆盖，购物车/搜索/心愿单等同主题页面不受影响。
   ========================================================================== */
body:has(> .lume-classic [data-checkout-scope]) {
  background: #FBF8F3 !important;
}
/* 结算页根节点（CheckoutChrome 的 `min-h-screen bg-surface`）——只命中结算页外壳 */
.lume-classic.min-h-screen.bg-surface {
  background: #FBF8F3 !important;
}
/* 极简页头：设计稿是奶油底 + #E6DED2 细线（不是白底/Shopify 灰线） */
.lume-classic header[data-checkout-header] {
  background: #FBF8F3 !important;
  border-bottom-color: #E6DED2 !important;
}
/* 内容根（`checkout-shopify.css` 给的是白底） */
.lume-classic .checkout-scope {
  background: #FBF8F3 !important;
}

/* =============================================================================
   2. 右栏：去掉 Shopify 的浅灰通高板与竖分隔线（设计稿是奶油底上浮动一张白卡）
   ========================================================================== */
.lume-classic .checkout-scope [data-checkout-summary-col] {
  background: #FBF8F3 !important;
  border-left: 0 !important;
}
@media (max-width: 1023px) {
  .lume-classic .checkout-scope [data-checkout-summary-col] {
    background: #FBF8F3 !important;
    border-top: 0 !important;
  }
}

/* 摘要卡：白底 + 1px #E6DED2 描边 + 28px 内边距（设计稿 aside） */
.lume-classic .checkout-scope [data-summary-card] {
  background: #FFFFFF;
  border: 1px solid #E6DED2;
  padding: 28px;
}
/* 桌面：卡片宽度按设计稿 476px，并靠到设计稿的右边界（右外边距 = 版心 1240 的右侧留白） */
@media (min-width: 1024px) {
  .lume-classic .checkout-scope [data-checkout-summary-col] > div {
    width: 100% !important;
    max-width: 476px !important;
    margin-left: auto !important;
    margin-right: max(16px, calc(50vw - 580px)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 767px) {
  .lume-classic .checkout-scope [data-summary-card] {
    padding: 20px;
    /* 手机端摘要在最上方：与页面左右边距对齐，卡片不再额外吸收桌面 padding */
    margin-top: 16px;
  }
}

/* 卡片内部：flex column + 16px 间距（设计稿 gap:16px） */
.lume-classic .checkout-scope [data-summary-card] #ck-summary-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 1024px) {
  .lume-classic .checkout-scope [data-summary-card] #ck-summary-body { margin-top: 0; }
}

/* 视觉顺序（设计稿）：标题 → 商品行 → 合计区 → 说明 3 条 → 折扣码（设计稿没有折扣码，
   但我们**不删真实功能** ⇒ 退到卡片最下方，保持低调）。
   ⚠️ 只动视觉顺序，DOM/焦点顺序不变；折扣码仍可按 Tab 到达（读完 3 条说明之后）。 */
.lume-classic .checkout-scope [data-summary-card] #ck-summary-body > [data-summary-title] { order: 1; }
.lume-classic .checkout-scope [data-summary-card] #ck-summary-body > [data-summary-lines-scroll] { order: 2; }
.lume-classic .checkout-scope [data-summary-card] #ck-summary-body > [data-summary-totals] { order: 3; }
.lume-classic .checkout-scope [data-summary-card] #ck-summary-body > [data-lc-summary-notes] { order: 4; }
.lume-classic .checkout-scope [data-summary-card] #ck-summary-body > [data-group='discount'] { order: 5; }

/* 标题：Bodoni 28px（设计稿 h2.s；覆盖 checkout-shopify 的「无衬线 600 #1a1a1a」与
   theme-lume-classic 的 `[data-checkout-summary-col] h2` 无衬线 500 —— 后两条特指度 (0,3,1)，
   故这里多带一个 `[data-summary-card]` 到 (0,4,0)） */
.lume-classic .checkout-scope [data-summary-card] [data-summary-title] {
  margin: 0 !important;
  font-family: var(--brand-font-display, "Bodoni Moda", "Didot", serif) !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  color: #1C1F2A !important;
}

/* =============================================================================
   3. 商品行（设计稿：72×90 缩略图 + 名称 15px / 变体·数量 13px + 右侧价格 15px）
   ========================================================================== */
.lume-classic .checkout-scope [data-summary-lines] {
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.lume-classic .checkout-scope [data-summary-line] {
  gap: 14px !important;
  padding: 12px 0;
  align-items: center;
}
.lume-classic .checkout-scope [data-summary-line]:first-child { padding-top: 0; }
.lume-classic .checkout-scope [data-summary-line]:last-child { padding-bottom: 0; }
/* 行分隔线（设计稿商品行与合计区之间、以及多行之间各一条 1px 细线） */
.lume-classic .checkout-scope [data-summary-line] + [data-summary-line] {
  border-top: 1px solid #E6DED2;
}

/* 缩略图：56~72 宽的 2:3 规格 → 设计稿实测 72×90，直角、无描边 */
.lume-classic .checkout-scope [data-summary-line] > span:first-child {
  width: 72px !important;
  height: 90px !important;
  aspect-ratio: auto !important;
}
.lume-classic .checkout-scope [data-summary-line] > span:first-child > span:first-child {
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(160deg, #EDE5D9, #E2D7C7);
}
/* 设计稿没有右上角数量角标（数量写在变体行 `White · Qty 1` 里） */
.lume-classic .checkout-scope [data-summary-line] [data-summary-qty-badge] {
  display: none !important;
}
/* 数量已写进可见的变体行 ⇒ 隐藏重复的读屏专用数量，避免读屏把 `Qty 1` 读两遍 */
.lume-classic .checkout-scope [data-summary-line] .sr-only {
  display: none !important;
}
.lume-classic .checkout-scope [data-summary-line] .line-clamp-2 {
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: #1C1F2A;
}
.lume-classic .checkout-scope [data-lc-summary-line-meta] {
  margin-top: 2px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #5E6270 !important;
}
.lume-classic .checkout-scope [data-summary-line] > span:last-child {
  font-size: 15px !important;
  color: #1C1F2A;
}
/* 「Scroll for more」胶囊在 lume-classic 里跟随墨色（原样式已是 ink，不变；仅保证不被卡片背景压住） */
.lume-classic .checkout-scope [data-summary-card] [data-summary-scroll-more] span {
  border-radius: 9999px !important;
}

/* =============================================================================
   4. 合计区（设计稿：Subtotal / Shipping / Total 行 15px，Total 18px + 上方细线）
   ========================================================================== */
.lume-classic .checkout-scope [data-summary-totals] {
  margin-top: 0 !important;
  padding-top: 14px;
  border-top: 1px solid #E6DED2;
  display: flex;
  flex-direction: column;
  gap: 8px !important;
}
.lume-classic .checkout-scope [data-summary-totals] [data-summary-row] {
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.lume-classic .checkout-scope [data-summary-totals] [data-summary-row] > span:first-child {
  color: #1C1F2A !important;
}
.lume-classic .checkout-scope [data-summary-totals] [data-summary-row] > span:last-child {
  color: #1C1F2A !important;
  font-variant-numeric: tabular-nums;
}

/* Total：18px、上方一条细线；金额后（地址未确认时）跟 `+ shipping` 小字 */
.lume-classic .checkout-scope [data-summary-totals] :is([data-summary-total], [data-lc-total-unpriced]) {
  margin-top: 4px !important;
  padding-top: 12px;
  border-top: 1px solid #E6DED2;
  align-items: baseline;
}
.lume-classic .checkout-scope :is([data-summary-total], [data-lc-total-unpriced]) > span:first-child {
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #1C1F2A !important;
}
.lume-classic .checkout-scope :is([data-summary-total], [data-lc-total-unpriced]) > span:last-child > span:last-child {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #1C1F2A !important;
}
/* 设计稿 Total 只显示金额（不显示 EUR 代码） */
.lume-classic .checkout-scope [data-summary-total] [data-summary-currency] {
  display: none !important;
}
.lume-classic .checkout-scope [data-lc-plus-shipping] {
  font-size: 13px !important;
  line-height: 1 !important;
  color: #5E6270 !important;
  white-space: nowrap;
}
/* `Including VAT. Must match the total shown in the bag.` */
.lume-classic .checkout-scope [data-lc-vat-note] {
  margin: 4px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #5E6270 !important;
}
/* 地址未确认时的说明（现有 i18n 文案，保留真实口径；设计稿没有这句，但不编造运费） */
.lume-classic .checkout-scope [data-summary-pending] {
  margin: 4px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #5E6270 !important;
}

/* =============================================================================
   5. 底部 3 条说明（设计稿：细线分隔、13px、#4A4E5A；第 3 条是真链接 → /[lang]/support）
   ========================================================================== */
.lume-classic .checkout-scope [data-lc-summary-notes] {
  list-style: none !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid #E6DED2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #4A4E5A;
}
.lume-classic .checkout-scope [data-lc-summary-notes] a {
  /* 覆盖 checkout-shopify 的 `.checkout-scope a { color:#1773b0 !important }` */
  color: #1C1F2A !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  transition: color .2s ease;
}
.lume-classic .checkout-scope [data-lc-summary-notes] a:hover {
  color: #8A6A35 !important;
}
.lume-classic .checkout-scope [data-lc-summary-notes] a:focus-visible {
  outline: 2px solid #1C1F2A;
  outline-offset: 3px;
  border-bottom-color: transparent;
}

/* =============================================================================
   6. 折扣码（保留真实功能，仅视觉融入卡片：最底部 + 上方细线 + 墨色 Apply）
   ⚠️ 只作用于**摘要卡内**的折扣表单，左侧表单/主 Pay 按钮不受影响。
   ========================================================================== */
.lume-classic .checkout-scope [data-summary-card] [data-group='discount'] {
  margin-top: 0 !important;
  padding-top: 14px;
  border-top: 1px solid #E6DED2;
}
.lume-classic .checkout-scope [data-summary-card] button[data-discount-apply] {
  background: #1C1F2A !important;
  border-color: #1C1F2A !important;
  color: #FBF8F3 !important;
  border-radius: 0 !important;
  font-family: var(--brand-font-sans, "Jost", sans-serif) !important;
  font-size: 13px !important;
}
.lume-classic .checkout-scope [data-summary-card] button[data-discount-apply]:hover {
  background: #8A6A35 !important;
  border-color: #8A6A35 !important;
}

/* =============================================================================
   结算页强调色 = 主题墨色（2026-11-06 用户：「checkout 页要改为主题色，目前是浅蓝，要改为深蓝或接近黑色」）
   -----------------------------------------------------------------------------
   `checkout-shopify.css` 的按钮 / 链接 / 聚焦 / 选中态都读 `--ck-accent*` 令牌（缺省 = Shopify 蓝
   #1773b0 / #145f93 / #f0f5ff，其它主题外观不变）；这里只给 lume-classic 换值：
     · accent  #1C1F2A —— Redesign v2 的 --ink（近黑藏青）
     · hover   #26304A —— Redesign v2 的 --navy
     · soft    #FFFFFF —— 选中运输方式 / 账单地址行保持白底（用户 2026-11-06：选中后白底即可），只靠深色描边表示选中
   ========================================================================== */
.lume-classic .checkout-scope {
  --ck-accent: #1C1F2A;
  --ck-accent-hover: #26304A;
  --ck-accent-soft: #FFFFFF;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-lume-classic-search.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * lume-classic 搜索面板（Search）皮肤 —— Redesign v2「Search · 搜索」画板。
 *
 * 设计源：`.tmp/design/page-06-Search-搜索.html` + `.tmp/design/shot-06-Search-搜索.png`（1440）。
 * 实测（设计稿）：顶栏白底 103px（28 上 + 54 输入 + 20 下 + 1px 墨色底线）；
 *   内容版心 1280（`.wrap` 1360 / padding 40，等价本站 `--brand-max` 1328 + 24 padding）；
 *   两栏 1fr : 3fr、gap 48（1440 下 308 / 924）；右栏 4 卡 216×264（图 220 + 10 + 标题 34）、
 *   gap 20；小标题 12px / letter-spacing .16em / #5E6270；左栏项 16px 墨色、min-height 44；
 *   卡片标题 Bodoni Moda 22px；卡片图 = 主题沙色渐变占位（设计稿同样是占位）。
 *
 * 作用域：`.lume-classic [data-lc-search-panel]`（StoreHeader 的 `SearchOverlay` classic 分支输出）。
 * 未分层（在 tailwind.css 之后引入）⇒ 压得过工具类，但压不过工具类的 `!important`（`text-accent!` 等），
 * 故个别颜色/下划线显式 `!important`（见下方注释）。
 * 引入顺序见 src/app/layout.tsx。
 */

/* ── 面板底：奶油色整屏（设计稿不压暗页面） ── */
.lume-classic [data-lc-search-panel] {
  background: var(--lc-cream, #FBF8F3);
}

/* ── ① 顶部搜索行：白底 + 1px 墨色底线 ── */
.lume-classic [data-lc-search-panel] .lc-search-topbar {
  flex-shrink: 0;
  background: #FFFFFF;
  border-bottom: 1px solid var(--ink, #1C1F2A);
}

/* 内容版心：与设计 `.wrap{max-width:1360px;padding:0 40px}` 同一条内容线（1440 下 x=80..1360） */
.lume-classic [data-lc-search-panel] .lc-search-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--brand-max, 1328px);
  margin: 0 auto;
  padding: 0 24px;
}

.lume-classic [data-lc-search-panel] .lc-search-form {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 28px 0 20px;
}

.lume-classic [data-lc-search-panel] .lc-search-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ink, #1C1F2A);
}

.lume-classic [data-lc-search-panel] .lc-search-input {
  flex: 1 1 0%;
  min-width: 0;
  height: 54px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--brand-font-display, "Bodoni Moda", "Didot", serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink, #1C1F2A);
  appearance: none;
  outline: none;
  box-shadow: none;
}
/* 模板 `.lume input:focus-visible{box-shadow:var(--ring)}`（brand 层）会画聚焦环；设计稿只要光标 */
.lume-classic [data-lc-search-panel] .lc-search-input:focus,
.lume-classic [data-lc-search-panel] .lc-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.lume-classic [data-lc-search-panel] .lc-search-input::placeholder {
  color: #757575;
  opacity: 1;
}

.lume-classic [data-lc-search-panel] .lc-search-close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink, #1C1F2A);
  cursor: pointer;
  transition: color .2s;
}
.lume-classic [data-lc-search-panel] .lc-search-close:hover {
  color: var(--lc-gold, #8A6A35);
}
.lume-classic [data-lc-search-panel] .lc-search-close svg {
  display: block;
}

/* ── ② 内容区：奶油底、可滚动（设计稿外层 padding-bottom 80） ── */
.lume-classic [data-lc-search-panel] .lc-search-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 80px;
}
.lume-classic [data-lc-search-panel] .lc-search-body > .lc-search-wrap {
  padding-top: 36px;
}

/* ── 空输入：左 POPULAR SEARCHES（1fr） + 右 SHOP BY PIECE（3fr），gap 48 ── */
.lume-classic [data-lc-search-panel] .lc-search-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 48px;
  align-items: start;
}
.lume-classic [data-lc-search-panel] .lc-search-empty[data-sf-search-columns='single'] {
  grid-template-columns: minmax(0, 1fr);
}

/* ── 热搜首屏骨架屏（加载中占位；行高与真实条目一致 ⇒ 数据到达不跳版）──────── */
.lume-classic [data-lc-search-panel] .lc-search-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lume-classic [data-lc-search-panel] .lc-search-skeleton-list li {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
}
.lume-classic [data-lc-search-panel] .lc-search-skeleton-bar {
  display: block;
  height: 14px;
  border-radius: 0;
  background: linear-gradient(90deg, #e7ded2 25%, #f6f1e8 37%, #e7ded2 63%);
  background-size: 400% 100%;
  animation: lc-search-shimmer 1.4s ease infinite;
}
@keyframes lc-search-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .lume-classic [data-lc-search-panel] .lc-search-skeleton-bar {
    animation: none;
    background: #e7ded2;
  }
}

/* 小标题（POPULAR SEARCHES / SHOP BY PIECE / 联想与结果态的既有小标题同一口径） */
.lume-classic [data-lc-search-panel] :is(
  .lc-search-label,
  [data-sf-popular-heading],
  [data-sf-suggest-heading],
  [data-sf-panel-products-heading]
) {
  margin: 0 0 14px;
  font-family: var(--brand-font-sans, "Jost", "Helvetica Neue", Arial, sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted, #5E6270);
}

/* 左栏列表：设计稿 flex 列、gap 4、每项 44 高、16px 墨色（悬停金色） */
.lume-classic [data-lc-search-panel] :is([data-sf-popular-list], [data-sf-suggest-list]) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}
.lume-classic [data-lc-search-panel] :is([data-sf-popular-item], [data-sf-suggest-item]) {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.35;
  /* 组件里用 `text-accent!` / `hover:underline!`（Tailwind important）⇒ 这里必须 !important 才压得住 */
  color: var(--ink, #1C1F2A) !important;
  text-decoration: none !important;
  transition: color .2s;
}
.lume-classic [data-lc-search-panel] :is([data-sf-popular-item], [data-sf-suggest-item]):hover {
  color: var(--lc-gold, #8A6A35) !important;
  text-decoration: none !important;
}
/* 联想词高亮项（键盘 ↑↓）：金色 + 下划线（设计稿没有结果态，沿用主题的选中语义） */
.lume-classic [data-lc-search-panel] [data-sf-suggest-item][aria-selected='true'] {
  color: var(--lc-gold, #8A6A35) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}
/* 类目兜底项后面那个「· N」计数：设计稿左栏是干净的链接列表 ⇒ 不显示 */
.lume-classic [data-lc-search-panel] [data-sf-popular-item] > span[aria-hidden='true'] {
  display: none;
}

/* ── 右栏 SHOP BY PIECE：4 列、gap 20；卡 = 沙色占位图 220 + 衬线标题 22 ── */
.lume-classic [data-lc-search-panel] .lc-search-pieces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.lume-classic [data-lc-search-panel] .lc-search-piece {
  display: block;
  min-width: 0;
  color: var(--ink, #1C1F2A);
  text-decoration: none;
}
.lume-classic [data-lc-search-panel] .lc-search-piece-img {
  display: block;
  width: 100%;
  height: 220px;
  background: linear-gradient(160deg, var(--lc-sand, #EDE5D9), #E2D7C7);
}
.lume-classic [data-lc-search-panel] .lc-search-piece-title {
  display: block;
  margin-top: 10px;
  font-family: var(--brand-font-display, "Bodoni Moda", "Didot", serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink, #1C1F2A);
  transition: color .2s;
}
.lume-classic [data-lc-search-panel] .lc-search-piece:hover .lc-search-piece-title {
  color: var(--lc-gold, #8A6A35);
}

/* ── 结果态 / 无结果态（沿用既有组件的锚点，只补间距与标题口径） ── */
.lume-classic [data-lc-search-panel] .lc-search-results {
  margin-top: 0;
}
.lume-classic [data-lc-search-panel] .lc-search-no-results {
  margin: 4px 0 28px;
}
.lume-classic [data-lc-search-panel] .lc-search-no-results-title {
  margin: 0;
  font-family: var(--brand-font-display, "Bodoni Moda", "Didot", serif);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  color: var(--ink, #1C1F2A);
}
.lume-classic [data-lc-search-panel] .lc-search-no-results-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted, #5E6270);
}

/* ── ≤900：单栏（左栏在上、SHOP BY PIECE 2 列），与设计稿媒体查询一致 ── */
@media (max-width: 900px) {
  .lume-classic [data-lc-search-panel] .lc-search-wrap {
    padding: 0 16px;
  }
  .lume-classic [data-lc-search-panel] .lc-search-form {
    gap: 12px;
    padding: 20px 0 16px;
  }
  .lume-classic [data-lc-search-panel] .lc-search-input {
    height: 44px;
    font-size: 26px;
  }
  .lume-classic [data-lc-search-panel] .lc-search-body > .lc-search-wrap {
    padding-top: 28px;
  }
  .lume-classic [data-lc-search-panel] .lc-search-empty {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .lume-classic [data-lc-search-panel] .lc-search-pieces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 超窄（390）：输入再收一档，保证 placeholder 不被 × 挤没 */
@media (max-width: 480px) {
  .lume-classic [data-lc-search-panel] .lc-search-input {
    font-size: 22px;
  }
  .lume-classic [data-lc-search-panel] .lc-search-piece-img {
    height: 180px;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-lume-classic-wishlist.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * lume-classic 心愿单（Wishlist）皮肤 —— Redesign v2「Wishlist · 心愿单」。
 *
 * 出处：`.tmp/design/page-07-Wishlist-心愿单.html` / `shot-07-Wishlist-心愿单.png`（1440）。
 * 实测锚点（1440 视口，`dom-tree.mjs`）：
 *   · 内容区 1280 @ x=80（`.wrap` max 1360 + padding 40 ⇒ 与站内 `--brand-max 1328 + 24` 同一内容区）；
 *     section padding-top 48；H1 52px Bodoni（行高 normal ≈ 80px 高）；副标 15px / margin-top 8；
 *   · 右上按钮 46 高 / padding 0 18 / 1px 描边；提示条 53 高 / padding 0 20 / 底 #F1ECE4 / margin-top 28；
 *   · 4 列网格：列宽 305 / 列距 20 / 行距 28 / margin-top 32；图 305×360；
 *     名称+价格行 15px（margin-top 14）→ 副标 13px（margin-top 4）→ Size（13px，select 44 高）
 *     → Move to bag（46 高，margin-top 12）→ Remove（13px 下划线，min-height 44，margin-top 6）。
 *
 * 规则**全部**限定在 `.lume-classic [data-lc-wishlist]` 下；不碰其它主题/其它页面的皮肤。
 */

/* ── 页面根 / 容器 ─────────────────────────────────────────────────────────── */
.lume-classic [data-lc-wishlist] {
  --lc-wl-display: "Bodoni Moda", "Didot", serif;
  --lc-wl-ink: var(--ink, #1C1F2A);
  --lc-wl-muted: var(--muted, #5E6270);
  --lc-wl-soft: #4A4E5A;      /* 设计稿正文本灰（Size 标签 / 副标文字色） */
  --lc-wl-cream: var(--lc-cream, #FBF8F3);
  --lc-wl-sand: #F1ECE4;      /* 提示条底 / 图片占位（设计稿 rgb(241,236,228)） */
  --lc-wl-border: #CFC6B8;    /* 设计稿 select / chip 描边 */
  --lc-wl-error: var(--brand-danger, #b3261e);
  background: var(--lc-wl-cream);
  color: var(--lc-wl-ink);
  padding: 48px 0 96px;
}

.lume-classic [data-lc-wishlist] .lc-wl-wrap {
  width: 100%;
  max-width: var(--brand-max, 1328px);
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

.lume-classic [data-lc-wishlist] a:focus-visible,
.lume-classic [data-lc-wishlist] button:focus-visible,
.lume-classic [data-lc-wishlist] select:focus-visible {
  outline: 2px solid var(--lc-wl-ink);
  outline-offset: 2px;
}

/* ── 页头：H1 52px Bodoni + 副标 + 右上 Share wishlist ─────────────────────── */
.lume-classic [data-lc-wishlist] .lc-wl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lume-classic [data-lc-wishlist] .lc-wl-title {
  margin: 0;
  font-family: var(--lc-wl-display);
  font-size: 52px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--lc-wl-ink);
}
.lume-classic [data-lc-wishlist] .lc-wl-count {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lc-wl-soft);
}
.lume-classic [data-lc-wishlist] .lc-wl-head-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 1px; /* 与标题块底边视觉对齐（设计稿 align-items: flex-end） */
}
.lume-classic [data-lc-wishlist] .lc-wl-share {
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--lc-wl-ink);
  border-radius: 0;
  background: transparent;
  color: var(--lc-wl-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lume-classic [data-lc-wishlist] .lc-wl-share:hover {
  background: var(--lc-wl-ink);
  color: var(--lc-wl-cream);
}
/* 分享结果提示（成功/失败都**可见**，不静默） */
.lume-classic [data-lc-wishlist] .lc-wl-share-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
  color: var(--lc-wl-muted);
}
.lume-classic [data-lc-wishlist] .lc-wl-share-note.is-error {
  color: var(--lc-wl-error);
}

/* ── 未登录提示条（浅沙色；右侧下划线入口打开站内登录抽屉）───────────────── */
.lume-classic [data-lc-wishlist] .lc-wl-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 53px;
  margin-top: 28px;
  padding: 4px 20px;
  box-sizing: border-box;
  background: var(--lc-wl-sand);
  font-size: 14px;
  line-height: 1.45;
  color: var(--lc-wl-ink);
}
.lume-classic [data-lc-wishlist] .lc-wl-device-text {
  min-width: 0;
}
.lume-classic [data-lc-wishlist] .lc-wl-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* 触控硬线（与站内其它可点文字一致） */
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--lc-wl-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.lume-classic [data-lc-wishlist] .lc-wl-signin:hover {
  color: var(--lc-gold, #8A6A35);
}

/* ── 4 列网格 + 卡片（图 305×360、名称+价格同行、副标题）──────────────────── */
.lume-classic [data-lc-wishlist] .lc-wl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
  margin-top: 32px;
}

.lume-classic [data-lc-wishlist] .lc-wl-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lume-classic [data-lc-wishlist] .lc-wl-card-media {
  position: relative;
  display: block;
  aspect-ratio: 305 / 360; /* 1440 下 = 设计稿 305×360 */
  overflow: hidden;
  background: linear-gradient(160deg, var(--lc-sand, #EDE5D9), #E2D7C7);
  color: var(--lc-wl-ink);
  text-decoration: none;
}
.lume-classic [data-lc-wishlist] .lc-wl-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lume-classic [data-lc-wishlist] .lc-wl-card-imgph {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--lc-wl-sand);
}
.lume-classic [data-lc-wishlist] .lc-wl-card-soldout {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  padding: 5px 10px;
  background: var(--lc-wl-ink);
  color: var(--lc-wl-cream);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lume-classic [data-lc-wishlist] .lc-wl-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lc-wl-ink);
}
.lume-classic [data-lc-wishlist] .lc-wl-card-name {
  min-width: 0;
  color: var(--lc-wl-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.lume-classic [data-lc-wishlist] .lc-wl-card-name:hover {
  color: var(--lc-gold, #8A6A35);
}
.lume-classic [data-lc-wishlist] .lc-wl-card-price {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 15px;
}
.lume-classic [data-lc-wishlist] .lc-wl-card-sub {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--lc-wl-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 尺码下拉（真实 SKU；只在商品有尺码维度时渲染） */
.lume-classic [data-lc-wishlist] .lc-wl-card-size {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lc-wl-soft);
}
.lume-classic [data-lc-wishlist] .lc-wl-card-size select {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--lc-wl-border);
  border-radius: 0;
  background: #fff;
  color: var(--lc-wl-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

/* Move to bag（墨色大按钮；售罄卡片不渲染按钮，容器只占位保持行距节奏） */
.lume-classic [data-lc-wishlist] .lc-wl-card-buy {
  margin-top: 12px;
}
.lume-classic [data-lc-wishlist] .lc-wl-move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--lc-wl-ink);
  color: var(--lc-wl-cream);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lume-classic [data-lc-wishlist] .lc-wl-move:hover {
  background: var(--navy, #26304A);
}
/* Move to bag 进行中：按钮内可见 loading（转圈 + Moving…），并阻止连点（2026-11-05 用户口径） */
.lume-classic [data-lc-wishlist] .lc-wl-move:disabled {
  cursor: progress;
  opacity: 0.9;
}
.lume-classic [data-lc-wishlist] .lc-wl-move.is-moving:hover {
  background: var(--lc-wl-ink);
}
.lume-classic [data-lc-wishlist] .lc-wl-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid rgba(251, 248, 243, 0.35);
  border-top-color: var(--lc-wl-cream);
  border-radius: 50%;
  animation: lc-wl-spin 0.7s linear infinite;
}
@keyframes lc-wl-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lume-classic [data-lc-wishlist] .lc-wl-spinner { animation-duration: 1.6s; }
}

/* Remove（下划线；44 高触控区） */
.lume-classic [data-lc-wishlist] .lc-wl-remove {
  align-self: flex-start;
  min-height: 44px;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lc-wl-muted);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lume-classic [data-lc-wishlist] .lc-wl-remove:hover {
  color: var(--lc-wl-ink);
}

/* ── Load more（真实 `?show=` 增量；设计稿只有 4 件所以没画，行为与既有收藏页一致）── */
.lume-classic [data-lc-wishlist] .lc-wl-more {
  display: flex;
  justify-content: center;
  margin: 48px 0 0;
}
.lume-classic [data-lc-wishlist] .lc-wl-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 145px;
  min-height: 50px;
  padding: 14px 36px;
  border: 1px solid var(--lc-wl-ink);
  background: transparent;
  color: var(--lc-wl-ink);
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lume-classic [data-lc-wishlist] .lc-wl-more-link:hover {
  background: var(--lc-wl-ink);
  color: var(--lc-wl-cream);
}

/* ── 空态（保持既有口径：一句如实说明 + 真实去处）────────────────────────── */
.lume-classic [data-lc-wishlist] .lc-wl-empty {
  padding: 72px 0 88px;
  text-align: center;
  color: var(--lc-wl-muted);
}
.lume-classic [data-lc-wishlist] .lc-wl-empty-text {
  margin: 0 0 18px;
  font-family: var(--lc-wl-display);
  font-size: 28px;
  line-height: 1.2;
  color: var(--lc-wl-ink);
}
.lume-classic [data-lc-wishlist] .lc-wl-empty-cta {
  color: var(--lc-wl-ink);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lume-classic [data-lc-wishlist] .lc-wl-empty-cta:hover {
  color: var(--lc-gold, #8A6A35);
}

/* =============================================================================
   响应式：设计稿 `@media (max-width:900px)` → 2 列（列距 20→16）+ 页面左右 16px
   （与 StoreHeader 移动端 `px-4` 对齐）；390 视口无横向溢出。
   ========================================================================== */
@media (max-width: 900px) {
  .lume-classic [data-lc-wishlist] {
    padding: 32px 0 72px;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-wrap {
    padding-inline: 16px;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-title {
    font-size: 40px;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
    margin-top: 28px;
  }
}

@media (max-width: 560px) {
  .lume-classic [data-lc-wishlist] .lc-wl-title {
    font-size: 34px;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-count {
    font-size: 14px;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-share-note {
    text-align: left;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-device {
    font-size: 13px;
    padding: 4px 16px;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-card-row {
    font-size: 14px;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-card-price {
    font-size: 14px;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-card-sub {
    font-size: 12px;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-empty {
    padding: 56px 0 64px;
  }
  .lume-classic [data-lc-wishlist] .lc-wl-empty-text {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lume-classic [data-lc-wishlist] .lc-wl-share,
  .lume-classic [data-lc-wishlist] .lc-wl-signin,
  .lume-classic [data-lc-wishlist] .lc-wl-move,
  .lume-classic [data-lc-wishlist] .lc-wl-remove,
  .lume-classic [data-lc-wishlist] .lc-wl-more-link,
  .lume-classic [data-lc-wishlist] .lc-wl-card-name {
    transition: none;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-lume-classic-story.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * lume-classic 品牌故事页（Our story）皮肤 —— Redesign v2「Our story · 品牌故事」。
 *
 * 出处：`.tmp/design/page-10-Our-story-品牌故事-new-.html`（内联 CSS，实测 1440×3657）。
 * 规则限定在 `.lume-classic [data-lc-story]`（含页内所有后代）。
 *
 * 尺寸口径（1440，与设计稿 DOM 实测一致）：
 *   · `.lc-story-wrap` = 设计稿 `.wrap`（max-width 1360 + 左右 40 ⇒ 内容 1280，x=80）；
 *   · Hero：上 96 / 下 72，眉题 12px `.18em` 金色，标题 Bodoni 72/1.05（max-width 900），
 *     介绍 18/1.7 灰 `#4A4E5A`（max-width 640）；
 *   · 全幅图 640 高；THE MATERIAL 段上 112、左右各 608 / gap 64、图片 560 高、标题 52px；
 *   · HOW A PIECE IS MADE：上 112、4 列（列宽 302 / gap 24）、图片块 300 高、编号 40px 金色、
 *     标题 26px、说明 15/1.65；藏蓝带 margin-top 112 / 内上下 96 / 左右标题 52 / 保养标题 30；
 *   · CTA：上 104 / 下 112，标题 48px，按钮 50 高、间距 12。
 * 颜色一律走品牌令牌（`brand-tokens.css` 的 `.lume-classic` 块），不另造色值 —— 设计稿里
 * `#4A4E5A` / `#D9D4CB` / `#F4EFE7` 是文字层级色，令牌表里没有对应槽位，就地注明。
 */

/* 根：奶油底 + 直角 + 衬线标题（标题字体与首页/内页同源） */
.lume-classic [data-lc-story] {
  --lc-story-body: #4a4e5a; /* 设计稿正文灰（奶油底 7.4:1） */
  --lc-story-dark-body: #d9d4cb; /* 藏蓝带上的次级文字色（11.2:1） */
  --lc-story-dark-title: #f4efe7; /* 藏蓝带上的标题色（11.7:1） */
  --lc-story-display: "Bodoni Moda", "Didot", serif;
  background: var(--lc-cream);
  color: var(--ink);
}

.lume-classic [data-lc-story] h1,
.lume-classic [data-lc-story] h2,
.lume-classic [data-lc-story] h3 {
  margin: 0;
  font-family: var(--lc-story-display);
  font-weight: 400;
  letter-spacing: normal;
}

.lume-classic [data-lc-story] > section {
  padding: 0;
}

/* 内容版心：设计稿 `.wrap{max-width:1360px;padding:0 40px}` */
.lume-classic [data-lc-story] .lc-story-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

/* 设计稿眉题 `.kick` */
.lume-classic [data-lc-story] .lc-story-kicker {
  margin: 0;
  font-family: var(--brand-font-sans, Jost, sans-serif);
  font-size: 12px;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--lc-gold);
}

/* 主题浅色占位块（真实图缺失时用；不引用任何外部图） */
.lume-classic [data-lc-story] .lc-story-ph {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--lc-sand), #e2d7c7);
}

/* ── 1. Hero ── */
.lume-classic [data-lc-story] .lc-story-hero {
  padding-top: 96px;
  padding-bottom: 72px;
  text-align: center;
}

.lume-classic [data-lc-story] .lc-story-title {
  max-width: 900px;
  margin: 18px auto 24px;
  font-family: var(--lc-story-display);
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
}

.lume-classic [data-lc-story] .lc-story-title i {
  font-style: italic;
}

.lume-classic [data-lc-story] .lc-story-intro {
  max-width: 640px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: var(--lc-story-body);
}

/* ── 2. 全幅图 ── */
.lume-classic [data-lc-story] .lc-story-fullimg {
  position: relative;
  display: block;
  width: 100%;
  height: 640px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--lc-sand), #e2d7c7);
}

.lume-classic [data-lc-story] .lc-story-fullimg > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 3. THE MATERIAL 图文区 ── */
.lume-classic [data-lc-story] .lc-story-material {
  padding-top: 112px;
}

.lume-classic [data-lc-story] .lc-story-material-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.lume-classic [data-lc-story] .lc-story-material-media {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: var(--lc-sand);
}

.lume-classic [data-lc-story] .lc-story-material-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lume-classic [data-lc-story] .lc-story-material-body h2 {
  margin: 14px 0 20px;
  font-size: 52px;
  line-height: 1.08;
  color: var(--ink);
}

.lume-classic [data-lc-story] .lc-story-material-body p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--lc-story-body);
}

.lume-classic [data-lc-story] .lc-story-material-body p:last-child {
  margin-bottom: 0;
}

/* ── 4. HOW A PIECE IS MADE（4 列步骤卡） ── */
.lume-classic [data-lc-story] .lc-story-steps {
  padding-top: 112px;
}

.lume-classic [data-lc-story] .lc-story-steps h2 {
  margin: 14px 0 40px;
  font-size: 52px;
  line-height: normal;
  color: var(--ink);
}

.lume-classic [data-lc-story] .lc-story-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.lume-classic [data-lc-story] .lc-story-step {
  min-width: 0;
}

.lume-classic [data-lc-story] .lc-story-step-img {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: var(--lc-sand);
}

.lume-classic [data-lc-story] .lc-story-step-n {
  margin-top: 18px;
  font-family: var(--lc-story-display);
  font-size: 40px;
  line-height: normal;
  color: var(--lc-gold);
}

.lume-classic [data-lc-story] .lc-story-step h3 {
  margin: 6px 0 8px;
  font-size: 26px;
  line-height: normal;
  color: var(--ink);
}

.lume-classic [data-lc-story] .lc-story-step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--lc-story-body);
}

/* ── 5. 藏蓝深色带（保修 + 保养） ── */
.lume-classic [data-lc-story] .lc-story-dark {
  margin-top: 112px;
  background: var(--navy);
  color: var(--lc-story-dark-title);
}

.lume-classic [data-lc-story] .lc-story-dark-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding-top: 96px;
  padding-bottom: 96px;
}

.lume-classic [data-lc-story] .lc-story-dark h2 {
  margin: 0 0 20px;
  font-size: 52px;
  line-height: 1.08;
  color: var(--lc-story-dark-title);
}

.lume-classic [data-lc-story] .lc-story-dark-left > p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--lc-story-dark-body);
}

.lume-classic [data-lc-story] .lc-story-dark-right h3 {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: normal;
  color: var(--lc-story-dark-title);
}

.lume-classic [data-lc-story] .lc-story-dark-right ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  font-size: 16px;
  line-height: 2;
  color: var(--lc-story-dark-body);
}

/* ── 按钮（直角；描边 / 墨色 / 奶油描边三种，全部是真实链接） ── */
.lume-classic [data-lc-story] .lc-story-btn {
  display: inline-block;
  font-family: var(--brand-font-sans, Jost, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.lume-classic [data-lc-story] .lc-story-btn:focus-visible {
  outline: 2px solid var(--lc-gold);
  outline-offset: 3px;
}

.lume-classic [data-lc-story] .lc-story-btn-light {
  margin-top: 28px;
  padding: 14px 24px;
  border: 1px solid var(--lc-story-dark-title);
  color: var(--lc-story-dark-title);
}

.lume-classic [data-lc-story] .lc-story-btn-light:hover {
  background: var(--lc-story-dark-title);
  color: var(--navy);
}

.lume-classic [data-lc-story] .lc-story-btn-dark {
  padding: 15px 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--lc-cream);
}

.lume-classic [data-lc-story] .lc-story-btn-dark:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--lc-cream);
}

.lume-classic [data-lc-story] .lc-story-btn-outline {
  padding: 14px 26px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.lume-classic [data-lc-story] .lc-story-btn-outline:hover {
  background: var(--ink);
  color: var(--lc-cream);
}

/* ── 6. 居中 CTA ── */
.lume-classic [data-lc-story] .lc-story-cta {
  padding-top: 104px;
  padding-bottom: 112px;
  text-align: center;
}

.lume-classic [data-lc-story] .lc-story-cta h2 {
  margin: 0 0 28px;
  font-size: 48px;
  line-height: normal;
  color: var(--ink);
}

.lume-classic [data-lc-story] .lc-story-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ── 响应式：≤900 单栏（设计稿同款断点：split 单列 / g4 两列 / wrap 16px） ── */
@media (max-width: 900px) {
  .lume-classic [data-lc-story] .lc-story-wrap {
    padding: 0 16px;
  }

  .lume-classic [data-lc-story] .lc-story-hero {
    padding-top: 64px;
    padding-bottom: 48px;
  }

  .lume-classic [data-lc-story] .lc-story-intro {
    font-size: 16px;
  }

  .lume-classic [data-lc-story] .lc-story-fullimg {
    height: 320px;
  }

  .lume-classic [data-lc-story] .lc-story-material {
    padding-top: 64px;
  }

  .lume-classic [data-lc-story] .lc-story-material-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .lume-classic [data-lc-story] .lc-story-material-media {
    height: 360px;
  }

  .lume-classic [data-lc-story] .lc-story-material-body h2,
  .lume-classic [data-lc-story] .lc-story-steps h2,
  .lume-classic [data-lc-story] .lc-story-dark h2 {
    font-size: 34px;
  }

  .lume-classic [data-lc-story] .lc-story-steps {
    padding-top: 64px;
  }

  .lume-classic [data-lc-story] .lc-story-steps h2 {
    margin-bottom: 28px;
  }

  .lume-classic [data-lc-story] .lc-story-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .lume-classic [data-lc-story] .lc-story-step-img {
    height: 220px;
  }

  .lume-classic [data-lc-story] .lc-story-step-n {
    margin-top: 12px;
    font-size: 32px;
  }

  .lume-classic [data-lc-story] .lc-story-step h3 {
    font-size: 22px;
  }

  .lume-classic [data-lc-story] .lc-story-dark {
    margin-top: 64px;
  }

  .lume-classic [data-lc-story] .lc-story-dark-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .lume-classic [data-lc-story] .lc-story-dark-right h3 {
    font-size: 26px;
  }

  .lume-classic [data-lc-story] .lc-story-cta {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .lume-classic [data-lc-story] .lc-story-cta h2 {
    font-size: 36px;
  }
}

/* ≤560：步骤卡落单列（390 单栏、无横向溢出） */
@media (max-width: 560px) {
  .lume-classic [data-lc-story] .lc-story-steps-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lume-classic [data-lc-story] .lc-story-step-img {
    height: 260px;
  }

  .lume-classic [data-lc-story] .lc-story-fullimg {
    height: 240px;
  }

  .lume-classic [data-lc-story] .lc-story-material-media {
    height: 300px;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-lume-classic-help.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * lume-classic「Help & Contact」皮肤 —— Redesign v2「Help and contact · 帮助与联系」。
 * 规则限定在 `.lume-classic [data-lc-help]`（组件：templates/lume-classic/LumeClassicHelp.tsx，路由 /support）。
 *
 * 版心：与首页 / 页脚同一条内容线（`--brand-max` 1328 + 左右 24 ⇒ 内容 1280，1440 下 x=80），
 *       左右边缘与首页底部（服务区 / 订阅带 / 页脚列）对齐；设计稿自身 `.wrap` 是 1240，这里按站内统一版心。
 * 尺寸（设计稿 1440）：上 56 / 下 96；H1 Bodoni 56；搜索框 640 宽、56 高；话题卡 3 列 gap 16、
 *       内边距 24、最小高 110；主区上 64、左右 1.4fr : 1fr、gap 56；问答 16px / 行高 20 上下；
 *       联系卡白底 32 内边距；输入框 50 高；提交按钮 52 高。
 */
.lume-classic [data-lc-help] {
  --lc-help-body: #4a4e5a; /* 设计稿正文灰（奶油底 7.4:1） */
  --lc-help-field: #cfc6b8; /* 设计稿输入框描边 */
  --lc-help-display: "Bodoni Moda", "Didot", serif;
  background: var(--lc-cream);
  color: var(--ink);
  padding-bottom: 96px;
}

.lume-classic [data-lc-help] h1,
.lume-classic [data-lc-help] h2,
.lume-classic [data-lc-help] h3 {
  margin: 0;
  font-family: var(--lc-help-display);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ink);
}

.lume-classic [data-lc-help] .lc-help-wrap {
  max-width: var(--brand-max);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* ---------- 顶部：标题 + 搜索 + 话题 ---------- */
.lume-classic [data-lc-help] .lc-help-top { padding-top: 56px; }
.lume-classic [data-lc-help] .lc-help-top h1 { font-size: 56px; line-height: 1.1; }

.lume-classic [data-lc-help] .lc-help-search {
  display: flex;
  max-width: 640px;
  margin-top: 24px;
}
.lume-classic [data-lc-help] .lc-help-search input {
  flex: 1;
  min-width: 0;
  height: 56px;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: #fff;
  padding: 0 16px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline-offset: -3px;
}
.lume-classic [data-lc-help] .lc-help-search button {
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--lc-cream);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lume-classic [data-lc-help] .lc-help-search button:hover { background: var(--navy); }

.lume-classic [data-lc-help] .lc-help-topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.lume-classic [data-lc-help] .lc-help-topic {
  display: block;
  min-height: 110px;
  padding: 24px;
  border: 1px solid var(--steel-light);
  border-radius: 0;
  background: #fff;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.lume-classic [data-lc-help] .lc-help-topic:hover { border-color: var(--ink); }
.lume-classic [data-lc-help] .lc-help-topic[aria-pressed="true"] {
  background: var(--porcelain);
  border-color: var(--ink);
}
.lume-classic [data-lc-help] .lc-help-topic-title {
  display: block;
  font-family: var(--lc-help-display);
  font-size: 24px;
  line-height: 1.25;
}
.lume-classic [data-lc-help] .lc-help-topic-sub {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--lc-help-body);
}

/* ---------- 主区：问答 + 联系卡 ---------- */
.lume-classic [data-lc-help] .lc-help-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-top: 64px;
}
.lume-classic [data-lc-help] .lc-help-faq { scroll-margin-top: 120px; }
.lume-classic [data-lc-help] .lc-help-faq > h2 { font-size: 36px; line-height: 1.2; margin-bottom: 12px; }

.lume-classic [data-lc-help] .lc-help-q { border-top: 1px solid var(--steel-light); }
.lume-classic [data-lc-help] .lc-help-q > button {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.lume-classic [data-lc-help] .lc-help-q > button:hover { color: var(--lc-gold); }
.lume-classic [data-lc-help] .lc-help-sign { flex: none; font-size: 18px; line-height: 1; }
.lume-classic [data-lc-help] .lc-help-a { padding-bottom: 20px; }
.lume-classic [data-lc-help] .lc-help-a p,
.lume-classic [data-lc-help] .lc-help-a li {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lc-help-body);
}
.lume-classic [data-lc-help] .lc-help-a p + p,
.lume-classic [data-lc-help] .lc-help-a ul { margin-top: 10px; }
.lume-classic [data-lc-help] .lc-help-a ul { padding-left: 18px; list-style: disc; }
.lume-classic [data-lc-help] .lc-help-a .lc-help-link { display: inline-block; margin-top: 10px; }

.lume-classic [data-lc-help] .lc-help-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.lume-classic [data-lc-help] .lc-help-link:hover { color: var(--lc-gold); }
.lume-classic [data-lc-help] .lc-help-full { display: inline-block; margin-top: 20px; }
.lume-classic [data-lc-help] .lc-help-empty {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lc-help-body);
}

/* 联系卡 */
.lume-classic [data-lc-help] .lc-help-contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--steel-light);
}
.lume-classic [data-lc-help] .lc-help-contact h2 { font-size: 30px; line-height: 1.2; }
.lume-classic [data-lc-help] .lc-help-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--lc-help-body); }
.lume-classic [data-lc-help] .lc-help-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lume-classic [data-lc-help] .lc-help-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px 18px;
  border: 1px solid var(--lc-help-field);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lume-classic [data-lc-help] .lc-help-chip-strong { border-color: var(--ink); }
.lume-classic [data-lc-help] .lc-help-chip:hover { color: var(--lc-gold); border-color: var(--lc-gold); }

.lume-classic [data-lc-help] .lc-help-tickets { border-top: 1px solid var(--steel-light); padding-top: 16px; }
.lume-classic [data-lc-help] .lc-help-tickets h3 { font-size: 20px; margin-bottom: 8px; }
.lume-classic [data-lc-help] .lc-help-tickets ul { margin: 0; padding: 0; list-style: none; }
.lume-classic [data-lc-help] .lc-help-tickets li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
}
.lume-classic [data-lc-help] .lc-help-tickets li a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lume-classic [data-lc-help] .lc-help-tickets li span { color: var(--muted); white-space: nowrap; }

.lume-classic [data-lc-help] .lc-help-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--steel-light);
  scroll-margin-top: 120px;
}
.lume-classic [data-lc-help] .lc-help-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--lc-help-body);
}
.lume-classic [data-lc-help] .lc-help-field input,
.lume-classic [data-lc-help] .lc-help-field select,
.lume-classic [data-lc-help] .lc-help-field textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--lc-help-field);
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.lume-classic [data-lc-help] .lc-help-field input,
.lume-classic [data-lc-help] .lc-help-field select { height: 50px; padding: 0 14px; }
.lume-classic [data-lc-help] .lc-help-field textarea { padding: 12px 14px; resize: vertical; }
.lume-classic [data-lc-help] .lc-help-field input:focus,
.lume-classic [data-lc-help] .lc-help-field select:focus,
.lume-classic [data-lc-help] .lc-help-field textarea:focus { border-color: var(--ink); outline: none; }
.lume-classic [data-lc-help] .lc-help-field input[readonly] { background: var(--porcelain); color: var(--muted); }
.lume-classic [data-lc-help] .lc-help-error { margin: 0; font-size: 14px; color: #a1312a; }
.lume-classic [data-lc-help] .lc-help-submit {
  height: 52px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--lc-cream);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.lume-classic [data-lc-help] .lc-help-submit:hover { background: var(--navy); }
.lume-classic [data-lc-help] .lc-help-submit:disabled { opacity: 0.6; cursor: progress; }

.lume-classic [data-lc-help] :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- 窄屏（设计稿断点 900） ---------- */
@media (max-width: 900px) {
  .lume-classic [data-lc-help] { padding-bottom: 72px; }
  /* 窄屏也与首页 `.wrap` / 页脚同为 24 边距，左右边缘对齐 */
  .lume-classic [data-lc-help] .lc-help-wrap { padding: 0 24px; }
  .lume-classic [data-lc-help] .lc-help-top { padding-top: 40px; }
  .lume-classic [data-lc-help] .lc-help-top h1 { font-size: 40px; }
  .lume-classic [data-lc-help] .lc-help-topics { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
  .lume-classic [data-lc-help] .lc-help-topic { min-height: 0; padding: 18px 20px; }
  .lume-classic [data-lc-help] .lc-help-main { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 48px; }
  .lume-classic [data-lc-help] .lc-help-faq > h2 { font-size: 30px; }
  .lume-classic [data-lc-help] .lc-help-contact { padding: 24px 20px; }
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-gimme.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
   Studio Gimme 涓婚鐨偆锛堝搧鐗?gimme锛宼emplateKey `gimme`锛夆€斺€?1:1 鍙傜収 studiogimme.com
   -----------------------------------------------------------------------------
   浠ょ墝锛堥鑹?/ 瀛椾綋 / 鐩磋锛夊湪 brand-tokens.css 鐨?`.gimme` 鍧楋紱鏈枃浠剁鐗堝紡涓庣粍浠剁毊鑲わ細
     路 鍏ㄥ眬锛氭鏂?Instrument Sans 17px銆佹爣棰?Fraunces 300锛堝瓧璺?鈭?.025em锛夈€佷富鎸夐挳鍝佺墝妫曘€佽緭鍏ユ鐩磋 + 妫曡壊鎻忚竟锛?     路 椤靛ご锛圫toreHeader `layout="stacked"`锛夛細椤靛ご搴?#fcfcf9銆佸叕鍛婃潯澶у啓銆佹粴鍔ㄥ悗鍙暀銆屾悳绱?| 绫荤洰 | 宸ュ叿銆嶄竴琛岃创椤讹紱
     路 棣栭〉锛圙immeTemplate锛屾寕鍦?`[data-gm-home]` 涓嬶級锛氳疆鎾?/ 鍟嗗搧妯粦 / 涓夎仈鍥?/ Categories / 璁㈤槄甯?/ Shop the look锛?     路 椤佃剼妫曞簳鐧藉瓧锛堜护鐗屽湪椤佃剼浣滅敤鍩熷唴閲嶆槧灏勶級锛沵ini 璐墿杞︼紱缁撶畻椤点€?   鍒嗗眰锛?*鏈垎灞?*锛屽湪 tailwind.css / home-lume.css / theme-lume-classic.css 涔嬪悗寮曞叆 鈬?鍘嬪緱杩?@layer components /
     utilities 涓?cart-scope / checkout-scope 鐨勫啓姝诲€硷紱瑙勫垯鍏ㄩ儴闄愬畾 `.gimme`锛屽叾瀹冧富棰橀浂褰卞搷銆?   ========================================================================== */

.gimme {
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
}

/* 鈹€鈹€ 鏍囬锛欶raunces 300锛堝弬鐓х珯 h2 / h3 瀹炴祴锛夛紝姝ｆ枃涓庡璇濇閲岀殑 h1 / h2 涓€寰嬭窡闅?鈹€鈹€ */
.gimme main :is(h1, h2, h3),
.gimme [role="dialog"] :is(h1, h2) {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.025em;
}

/* 鈹€鈹€ 鎸夐挳锛氬疄蹇?= 鍝佺墝妫曪紙hover #b24523锛夛紱鎻忚竟 = 妫曟锛涘叏閮ㄧ洿瑙?鈹€鈹€ */
.gimme .ui-btn[data-variant="primary"],
.gimme .btn {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  border-radius: 0;
  box-shadow: none;
}
.gimme .ui-btn[data-variant="primary"]:not(:disabled):hover,
.gimme .btn:hover {
  background: #b24523;
  border-color: #b24523;
  transform: none;
  box-shadow: none;
}
.gimme .ui-btn[data-variant="ghost"] { border-color: var(--navy); color: var(--ink); }
.gimme .ui-btn[data-variant="ghost"]:not(:disabled):hover { background: rgba(93, 36, 18, .1); color: var(--ink); }
.gimme .ui-btn { border-radius: 0; }

/* 详情页收藏按钮：品牌棕（与收藏页卡片心形同色）—— 描边 / 文字 / 心形统一 --navy，已收藏 = 实心；直角 */
.gimme [data-pdp-wishlist] { border-color: var(--navy); border-radius: 0; color: var(--navy); }
.gimme [data-pdp-wishlist]:hover { background: rgba(93, 36, 18, .06); }
.gimme [data-pdp-wishlist]:focus-visible { outline-color: var(--navy); }
/* 详情页信息列吸顶：通用版 `lg:top-6` 只离视口 24px，gimme 页头第二行吸顶会盖住它 ⇒ 让出页头可见高度（--sf-header-h，StoreHeader 量出） */
@media (min-width: 1024px) {
  .gimme [data-pdp-info] { top: calc(var(--sf-header-h, 0px) + 24px); }
}

/* 鈹€鈹€ 杈撳叆妗嗭細鐩磋 + 妫曡壊鎻忚竟锛堝弬鐓х珯 --color-border-input锛夛紝鑱氱劍鍔犳繁涓?1px 澶栫幆 鈹€鈹€ */
.gimme :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: 0; }
.gimme [class*="border-[#d9d9d9]"] { border-color: rgba(93, 36, 18, .45); }
.gimme [class*="border-[#d9d9d9]"]:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
  outline: none;
}
.gimme :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--navy); }

/* 鈹€鈹€ 鍏ㄧ珯鐩磋锛氭鏂?/ 鎶藉眽 / 寮圭獥閲屽啓姝荤殑鍦嗚锛坮ounded-[Npx] / [border-radius:Npx] / ui-card 鈥︼級缁熶竴褰掗浂锛?   rounded-full锛堝ご鍍忋€佸浘鏍囧渾搴曘€佸垹闄ら挳銆佹暟閲忚鏍囷級涓?ghost-icon 淇濇寔褰㈢姸 鈹€鈹€ */
.gimme :is(main, .cart-drawer-panel, [data-address-dialog], [data-checkout-scope], [data-account-scope], [data-cart-scope]) :is(
  .ui-card, .ui-btn, .rounded-brand, section, input, select, textarea, .sf-phone,
  button:not(.ghost-icon), [class*="rounded-["], [class*="[border-radius:"], [class*="rounded-sm"], [class*="rounded-md"],
  [class*="rounded-lg"], [class*="rounded-xl"], [class*="rounded-pill"]
):not(.ghost-icon):not(.rounded-full) {
  border-radius: 0;
}

/* 快速加购弹窗（QuickAddDialog，portal 到 body，但外层套了主题根类 `.lume .gimme`）：
   tailwind.css 给 `.quick-add-dialog` 16px 圆角（≤640 是底部抽屉的顶部圆角），左图还有
   `16px 0 0 16px` —— 2026-10-29 用户口径「gimme 快速加购弹窗改为无圆角」⇒ 主题层全部压平。
   `.ghost-icon`（关闭 ×）与 `.rounded-full`（色板圆点等**形状**）按全站口径保留。 */
.gimme .quick-add-dialog,
.gimme .quick-add-dialog :is(
  .quick-add-dialog__grid,
  .quick-add-dialog__media,
  .quick-add-dialog__media-wrap,
  .quick-add-dialog__info,
  .quick-add-dialog__attrs,
  .quick-add-dialog__buy,
  .quick-add-dialog__qty,
  .quick-add-dialog__retry,
  .quick-add-dialog__more,
  .quick-add-dialog__details,
  button:not(.ghost-icon),
  [class*="rounded-"]
):not(.ghost-icon):not(.rounded-full) {
  border-radius: 0;
}

/* =============================================================================
   椤靛ご锛圫toreHeader layout="stacked"锛?   ========================================================================== */
.gimme [data-sf-header] { background: #fcfcf9; border-bottom: 0; box-shadow: none; }
.gimme [data-sf-header] [data-sf-hdr-row="main"] { background: #fcfcf9; border-bottom: 0; }
/* 鍏憡鏉★細妫曞簳鐧藉瓧銆?4px 澶у啓銆?4px 楂橈紙鍙傜収绔欏疄娴嬶級 */
.gimme [data-sf-header] [data-sf-announce] > div { height: 34px; }
.gimme [data-sf-header] [data-sf-announce] p {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 1;
}
/* 瀛楁爣锛堟病鏈?logo 鍥炬椂锛夛細鍙傜収绔?logo 瀛椾綋 Work Sans 500銆佸瓧璺?鈭?.02em */
.gimme [data-sf-hdr-wordmark] { font-family: "Work Sans", var(--sans); }
/* 绫荤洰锛?7px 甯歌锛堝弬鐓х珯 --font-size-navigation-base锛?*/
.gimme [data-sf-hdr-layout="stacked"] :is([data-sf-hdr-nav-item], [data-sf-nav-more-trigger]) { font-size: 17px; }

/* 鍚搁《鍙ｅ緞 = 鍙傜収绔欙細**鍙湁銆屾悳绱?| 绫荤洰 | 宸ュ叿銆嶈繖涓€琛岃创椤?*锛屽叕鍛婃潯涓?logo 琛岄殢椤甸潰婊氳蛋銆?   `.lume header` 鏁翠綋 sticky 鈬?鐢ㄨ礋 top 鎶婁笂闈袱娈佃棌鍒拌鍙ｅ锛圫toreHeader 璁＄畻 --sf-header-h 鏃朵細鎵ｆ帀璐?top锛夈€?   绉诲姩绔彧鏈変竴琛岋紙姹夊牎 | logo | 宸ュ叿锛夆噿 鍙棌鍏憡鏉°€?*/
.gimme [data-sf-header]:has(> [data-sf-announce]) { top: -34px; }
@media (min-width: 1024px) {
  .gimme [data-sf-header] { top: -112px; }
  .gimme [data-sf-header]:has(> [data-sf-announce]) { top: -146px; }
}

/* =============================================================================
   棣栭〉锛圙immeTemplate锛孾data-gm-home]锛?   ========================================================================== */
.gimme [data-gm-home] { background: var(--white); }
/* 鍐呭鍖?1400锛?-gm-content锛? 涓や晶鐣欑櫧锛?-gm-gutter锛夛紝涓庡唴椤?max-w-brand / 椤靛ご / 椤佃剼鍚屼竴鏉″乏缂?*/
.gimme [data-gm-home] .gm-wrap { max-width: calc(var(--gm-content) + 2 * var(--gm-gutter)); margin: 0 auto; padding: 0 var(--gm-gutter); }
.gimme [data-gm-home] .gm-heading {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.1328125rem, 1.883546270718232rem + 1.0635359116022098vw, 2.734375rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

/* 2026-10-30 用户口径「banner 没有最大高度」：高度 = 第一张图的真实宽高比（GimmeTemplate 在图片加载后写入 --gm-hero-ratio，
   加载前按 16:9 占位），PC / 手机都不设上下限 ⇒ 整图完整显示、不裁切（图内烙印的文案/人物不会被切掉）。 */
.gimme [data-gm-section="hero"] { position: relative; height: auto; aspect-ratio: var(--gm-hero-ratio, 16 / 9); overflow: hidden; background: var(--porcelain); }
.gimme [data-gm-section="hero"] .gm-hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
}
.gimme [data-gm-section="hero"] .gm-hero__slide.is-active { opacity: 1; visibility: visible; }
.gimme [data-gm-section="hero"] img { width: 100%; height: 100%; object-fit: cover; }
/* 2026-10-29锛堢敤鎴峰彛寰勩€宐anner 杩欎釜鏅繁鐨勫姩鐢汇€嶏紝鍙傜収绔?image--animate锛夛細
   鍥剧墖鍏ュ満 = **鏅繁鎺ㄥ紑**锛歵ransform: scale(1.3) + opacity: 0 鈫?scale(1) + opacity: 1锛?   鏃堕暱 1.2s锛堝弬鐓х珯 `--duration-slow`锛夛紝缂撳姩 cubic-bezier(.33, 0, 0, 1)锛堝弬鐓х珯 `--easing`锛夈€?   鐢?animation 鑰屼笉鏄?transition锛屾槸鍥犱负杞挱姣忔鍒囧埌鏌愬紶锛坄.is-active` 鎽樻帀鍐嶆寕鍥烇級鍔ㄧ敾浼?*閲嶆柊鎾?*锛?   鑰?transition 闇€瑕佸厛鍥炲埌 1.3 鎵嶄細鍐嶈Е鍙戯紙浼氱湅鍒板弽鍚戠缉鍥烇級銆傞潤姝㈡€?= scale 1 / opacity 1锛?   鎵€浠?slide 娣″嚭鏃跺浘鐗囦笉浼氳烦銆傚噺灏戝姩鎬佹晥鏋滄椂涓嶆挱锛堢洿鎺ラ潤姝㈡€侊級銆?*/
.gimme [data-gm-section="hero"] .gm-hero__slide.is-active img {
  animation: gm-hero-depth 1.2s cubic-bezier(.33, 0, 0, 1) both;
}
@keyframes gm-hero-depth {
  0% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gimme [data-gm-section="hero"] .gm-hero__slide.is-active img { animation: none; }
}

/* 鈹€鈹€ 2026-10-29锛堢敤鎴峰彛寰勶級锛氶椤靛悇娈?*鍏ュ満鍔ㄧ敾** 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€
   鍙傛暟鐓у弬鐓х珯瀹炴祴鐨?CSS 鍙橀噺锛?-duration-fast .3s / --duration-normal .5s / --duration-slow 1.2s /
   --delay-small 33ms / --delay-normal 67ms / --easing cubic-bezier(.33, 0, 0, 1)銆?   闅愯棌鎬佸彧鎸傚湪 JS 鍐欏叆鐨?`[data-gm-reveal]` 涓婏紙瑙?`GimmeTemplate` 鐨?`useEntrance`锛?   鈬?鏃?JS / 鐖櫕 / `prefers-reduced-motion` 鏃?*鍐呭榛樿鍙**锛屼笉浼氱櫧灞忋€?   閿欏紑锛氭瘡涓瓙椤瑰甫 `--gm-i`锛堢鍑犱釜锛夆噿 `calc(--gm-delay-* 脳 --gm-i)` 绠楀嚭鍚勮嚜寤惰繜銆?   鈿狅笍 鍒楄〃锛堝晢鍝佸崱 / 鍒嗙被鍗★級鐨勬闀垮崟鐙敤 `--gm-delay-step: 90ms`锛氬弬鐓х珯鐨?33ms 姝ラ暱鍦?      銆屽彧鐪嬪緱瑙?3 寮犲崱銆嶇殑妯粦杞ㄩ亾閲屽嚑涔庣瓑浜庡悓鏃跺嚭鐜帮紙3脳33=66ms锛岃繙灏忎簬 0.5s 鍔ㄧ敾鏃堕暱锛夛紝
      鐢ㄦ埛 2026-10-29 鏄庣‘瑕佹眰銆屾瘡椤归殧鍑犳绉掑紑濮嬭Е鍙戙€嶁噿 姝ラ暱鏀惧ぇ鍒?*鑲夌溂鍙鲸**锛堢害 90ms锛夈€?*/
.gimme [data-gm-home] {
  --gm-duration-normal: .5s;
  --gm-duration-slow: 1.2s;
  --gm-delay-small: 33ms;
  --gm-delay-normal: 67ms;
  --gm-delay-step: 90ms;
  --gm-easing: cubic-bezier(.33, 0, 0, 1);
}
/* 鈶?Get cozy 鍗＄墖 / Categories 鏍囬涓庡垎绫诲崱锛氫笂娴?40px锛屾寜 --gm-delay-step 渚濇鍑虹幇 */
.gimme [data-gm-home] [data-gm-reveal="up"] > .gm-pcard,
.gimme [data-gm-home] [data-gm-reveal="up"] .gm-rv {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    transform var(--gm-duration-normal) var(--gm-easing) calc(var(--gm-delay-step) * var(--gm-i, 0)),
    opacity var(--gm-duration-normal) var(--gm-easing) calc(var(--gm-delay-step) * var(--gm-i, 0));
}
.gimme [data-gm-home] [data-gm-reveal="up"][data-gm-in] > .gm-pcard,
.gimme [data-gm-home] [data-gm-reveal="up"][data-gm-in] .gm-rv {
  opacity: 1;
  transform: none;
}
/* 鈶?涓夎仈澶у浘锛?*鏅繁**锛堝浘鐗?scale 1.3 + 鏍煎瓙 opacity 0 鈫?褰掍綅锛?.2s slow锛屾寜 --delay-normal 閿欏紑锛?*/
.gimme [data-gm-home] [data-gm-reveal="depth"] > .gm-rv {
  opacity: 0;
  transition:
    opacity var(--gm-duration-slow) var(--gm-easing) calc(var(--gm-delay-normal) * var(--gm-i, 0)),
    transform var(--gm-duration-slow) var(--gm-easing) calc(var(--gm-delay-normal) * var(--gm-i, 0));
}
.gimme [data-gm-home] [data-gm-reveal="depth"] > .gm-rv > img {
  transform: scale(1.3);
  transition: transform var(--gm-duration-slow) var(--gm-easing) calc(var(--gm-delay-normal) * var(--gm-i, 0));
}
.gimme [data-gm-home] [data-gm-reveal="depth"][data-gm-in] > .gm-rv { opacity: 1; }
.gimme [data-gm-home] [data-gm-reveal="depth"][data-gm-in] > .gm-rv > img { transform: none; }
/* 鈶?Join the Gimme Club锛?*姣忎竴琛?*渚濇涓婃诞锛堟爣棰?鈫?璇存槑 鈫?閭鏍?鈫?鍚屾剰鍕鹃€夛級锛宼ranslateY 20px */
.gimme [data-gm-home] [data-gm-reveal="newsletter"] :is(
  .signup h2,
  .signup .inner > div > p,
  .signup .signup-bar,
  .signup form > label.consent,
  .signup .inner > p.thanks
) {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    transform var(--gm-duration-normal) var(--gm-easing) calc(var(--gm-delay-normal) * var(--gm-i, 0)),
    opacity var(--gm-duration-normal) var(--gm-easing) calc(var(--gm-delay-normal) * var(--gm-i, 0));
}
.gimme [data-gm-home] [data-gm-reveal="newsletter"][data-gm-in] :is(
  .signup h2,
  .signup .inner > div > p,
  .signup .signup-bar,
  .signup form > label.consent,
  .signup .inner > p.thanks
) {
  opacity: 1;
  transform: none;
}
.gimme [data-gm-home] [data-gm-reveal="newsletter"] .signup h2 { --gm-i: 0; }
.gimme [data-gm-home] [data-gm-reveal="newsletter"] .signup .inner > div > p { --gm-i: 1; }
.gimme [data-gm-home] [data-gm-reveal="newsletter"] .signup .signup-bar { --gm-i: 2; }
.gimme [data-gm-home] [data-gm-reveal="newsletter"] .signup form > label.consent { --gm-i: 3; }
.gimme [data-gm-home] [data-gm-reveal="newsletter"] .signup .inner > p.thanks { --gm-i: 1; }
/* 鈶?Shop the look锛氬ぇ鍥?*鏅繁**锛坰cale 1.1 + opacity 0 鈫?褰掍綅锛宒uration-normal锛涘浘鐗囩敱瀹瑰櫒瑁佸垏锛?*/
.gimme [data-gm-home] [data-gm-reveal="look"] .gm-look__media {
  opacity: 0;
  transition: opacity var(--gm-duration-normal) var(--gm-easing);
}
.gimme [data-gm-home] [data-gm-reveal="look"] .gm-look__media-link {
  transform: scale(1.1);
  transition: transform var(--gm-duration-normal) var(--gm-easing);
}
.gimme [data-gm-home] [data-gm-reveal="look"][data-gm-in] .gm-look__media { opacity: 1; }
.gimme [data-gm-home] [data-gm-reveal="look"][data-gm-in] .gm-look__media-link { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gimme [data-gm-home] [data-gm-reveal] > .gm-pcard,
  .gimme [data-gm-home] [data-gm-reveal] .gm-rv,
  .gimme [data-gm-home] [data-gm-reveal] .gm-rv > img,
  .gimme [data-gm-home] [data-gm-reveal] .signup :is(h2, p, .signup-bar, label.consent),
  .gimme [data-gm-home] [data-gm-reveal] .signup .inner > *,
  .gimme [data-gm-home] [data-gm-reveal] .gm-look__media,
  .gimme [data-gm-home] [data-gm-reveal] .gm-look__media-link {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.gimme [data-gm-section="hero"] .gm-hero__cta {
  position: absolute;
  right: 48px;
  bottom: 48px;
  padding: 14px 32px;
  background: var(--navy);
  color: #fff;
  font-size: 17px;
}
.gimme [data-gm-section="hero"] .gm-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}
.gimme [data-gm-section="hero"] .gm-hero__dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
}
.gimme [data-gm-section="hero"] .gm-hero__dots button[aria-current="true"] { background: #fff; }

/* 鈶?Get cozy, shop now! 鈥斺€?妯粦锛氭闈竴灞?3 寮?+ 闇插嚭绗?4 寮狅紙鍙傜収绔?431px 瀹?/ 2:3 鍥撅級 */
.gimme [data-gm-section="featured"] { padding: 40px 0 56px; }
.gimme [data-gm-section="featured"] .gm-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.gimme [data-gm-section="featured"] .gm-arrows { display: flex; gap: 12px; }
.gimme [data-gm-section="featured"] .gm-arrows button { display: inline-flex; padding: 6px 2px; color: var(--ink); }
.gimme [data-gm-section="featured"] .gm-arrows button:disabled { opacity: .3; cursor: default; }
.gimme [data-gm-home] .gm-track {
  display: grid;
  grid-auto-flow: column;
  /* 涓€灞?3 寮?+ 闇插嚭绗?4 寮狅紱杞ㄩ亾宸︾紭涓庡唴瀹瑰尯瀵归綈锛堣鍙ｅ浜?1400 + 鐣欑櫧鏃朵袱渚у眳涓暀鐧斤級 */
  --gm-track-inset: max(var(--gm-gutter), (100vw - var(--gm-content)) / 2);
  grid-auto-columns: calc((min(100vw - 2 * var(--gm-gutter), var(--gm-content)) - 2 * 25px) / 3.15);
  column-gap: 25px;
  padding: 0 var(--gm-track-inset);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gm-track-inset);
  scrollbar-width: none;
}
.gimme [data-gm-home] .gm-track::-webkit-scrollbar { display: none; }
/* 2026-10-29锛堢敤鎴峰彛寰勶級锛欸et cozy 鏀规垚**鐪熷疄 SPU** 鍚庡崱鐗囨槸鍒楄〃椤靛悓涓€寮?`gm-pcard`
   锛堟棫闈欐€佹ā鏉跨殑 `.gm-card` 鍙綔涓烘棤鍟嗗搧鏃剁殑鍥炶惤锛夆噿 杩欓噷鍙ˉ杞ㄩ亾閲岄渶瑕佺殑婊氬姩瀵归綈銆?*/
.gimme [data-gm-home] .gm-track[data-gm-cards] > .gm-pcard { scroll-snap-align: start; }
.gimme [data-gm-home] .gm-card { display: flex; flex-direction: column; align-items: center; scroll-snap-align: start; text-align: center; }
.gimme [data-gm-home] .gm-card__img { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; background: var(--porcelain); }
.gimme [data-gm-home] .gm-card__img img { width: 100%; height: 100%; object-fit: cover; }
.gimme [data-gm-home] .gm-card__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
@media (hover: hover) {
  .gimme [data-gm-home] .gm-card:hover .gm-card__alt { opacity: 1; }
}
.gimme [data-gm-home] .gm-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.5;
}
.gimme [data-gm-home] .gm-card__price { display: inline-flex; gap: 8px; font-size: 17px; line-height: 1.5; }
.gimme [data-gm-home] .gm-card__price s { color: var(--muted); }
.gimme [data-gm-home] .gm-card__sale { color: var(--navy); }

/* 鈶?涓夎仈澶у浘锛氭弧瀹姐€佹棤闂撮殭銆?85px 楂?*/
.gimme [data-gm-section="triptych"] { display: grid; grid-template-columns: repeat(var(--gm-cols, 3), minmax(0, 1fr)); height: clamp(320px, 40.6vw, 585px); }
.gimme [data-gm-section="triptych"] a { display: block; overflow: hidden; }
.gimme [data-gm-section="triptych"] img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.33, 0, 0, 1); }
@media (hover: hover) {
  .gimme [data-gm-section="triptych"] a:hover img { transform: scale(1.06); }
  /* 鍏ュ満鏅繁缁撴潫鍚庯紝hover 缂╂斁鍥炲埌鍘熸潵鐨?.6s锛堝惁鍒欎細琚叆鍦洪偅鏉?1.2s 鐨?transition 鎷栨參锛?*/
  .gimme [data-gm-home] [data-gm-reveal="depth"] a:hover img { transition: transform .9s cubic-bezier(.33, 0, 0, 1); }
}

/* 鈶?Categories 鈥斺€?250px 鍗?+ 妫曡壊鏍囩鏉★紙Fraunces 澶у啓 + 绠ご锛?*/
.gimme [data-gm-section="categories"] { padding: 40px 0; }
.gimme [data-gm-section="categories"] .gm-heading { margin-bottom: 28px; }
.gimme [data-gm-home] .gm-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 250px)); gap: 24px; }
.gimme [data-gm-home] .gm-cat { display: flex; flex-direction: column; }
.gimme [data-gm-home] .gm-cat__img { display: block; aspect-ratio: 250 / 375; overflow: hidden; background: var(--porcelain); }
.gimme [data-gm-home] .gm-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gimme [data-gm-home] .gm-cat:hover .gm-cat__img img { transform: scale(1.03); }
.gimme [data-gm-home] .gm-cat__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 49px;
  padding: 0 16px;
  background: var(--navy);
  color: #fff;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.gimme [data-gm-home] .gm-cat__bar svg { flex: none; transition: transform .2s ease; }
.gimme [data-gm-home] .gm-cat:hover .gm-cat__bar svg { transform: translateX(3px); }

/* ── gm-rv 悬停动效（2026-10-30 用户「gm-rv 增加点 hover 动画」）────────────────────────
   缓动统一参照站 --easing cubic-bezier(.33,0,0,1)；键盘 :focus-visible 同效；减少动态效果时全部关闭。
   ⚠️ 只动 img / 伪元素 / svg，不动 `.gm-rv` 自身的 transform —— 那条留给入场动画（带错峰延迟）。
     · 三联大图：悬停那张缓推近 1.06，其余两张压暗（视线聚焦）；
     · Categories：图缓推近 1.06 + 棕色标签条从左擦出 hover 棕 #b24523（同订阅按钮的擦除）+ 箭头前推 6px；
     · 静态卡片（无真实商品时的回落）：图缓推近 1.04。 */
.gimme [data-gm-section="triptych"] a { position: relative; }
.gimme [data-gm-section="triptych"] a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(41, 33, 31, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.33, 0, 0, 1);
}
.gimme [data-gm-home] .gm-cat__img img { transition: transform .9s cubic-bezier(.33, 0, 0, 1); }
.gimme [data-gm-home] .gm-cat__bar { position: relative; isolation: isolate; overflow: hidden; }
.gimme [data-gm-home] .gm-cat__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #b24523;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.33, 0, 0, 1);
}
.gimme [data-gm-home] .gm-cat__bar svg { transition: transform .5s cubic-bezier(.33, 0, 0, 1); }
.gimme [data-gm-home] .gm-card__img > img:first-child { transition: transform .9s cubic-bezier(.33, 0, 0, 1); }
@media (hover: hover) {
  .gimme [data-gm-section="triptych"]:hover a:not(:hover)::after { opacity: 1; }
  /* 入场景深播完后的归位规则 `[data-gm-reveal="depth"][data-gm-in] > .gm-rv > img { transform: none }` 特指度更高，
     会把上面的推近压掉（第一版的 1.03 也一直没生效）⇒ 同链路再加 :hover 提权 */
  .gimme [data-gm-home] [data-gm-reveal="depth"][data-gm-in] > .gm-rv:hover > img { transform: scale(1.06); }
  .gimme [data-gm-home] .gm-cat:hover .gm-cat__img img { transform: scale(1.06); }
  .gimme [data-gm-home] .gm-cat:hover .gm-cat__bar::before { transform: scaleX(1); }
  .gimme [data-gm-home] .gm-cat:hover .gm-cat__bar svg { transform: translateX(6px); }
  .gimme [data-gm-home] .gm-card:hover .gm-card__img > img:first-child { transform: scale(1.04); }
}
.gimme [data-gm-section="triptych"] a:focus-visible img,
.gimme [data-gm-home] [data-gm-reveal="depth"][data-gm-in] > .gm-rv:focus-visible > img { transform: scale(1.06); }
.gimme [data-gm-section="triptych"]:has(a:focus-visible) a:not(:focus-visible)::after { opacity: 1; }
.gimme [data-gm-home] .gm-cat:focus-visible .gm-cat__img img { transform: scale(1.06); }
.gimme [data-gm-home] .gm-cat:focus-visible .gm-cat__bar::before { transform: scaleX(1); }
.gimme [data-gm-home] .gm-cat:focus-visible .gm-cat__bar svg { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  /* 伪元素不能写进 :is()（整条规则会失效）⇒ 逐条列 */
  .gimme [data-gm-section="triptych"] a::after,
  .gimme [data-gm-home] .gm-cat__bar::before,
  .gimme [data-gm-home] :is(.gm-cat__img img, .gm-cat__bar svg, .gm-card__img > img:first-child) { transition: none; }
}

/* 鈶?Join the Gimme Club 鈥斺€?妫曡壊璁㈤槄甯︼紙澶嶇敤 NewsletterSignup锛岃鐩栨垚鍙傜収绔欑増寮忥級 */
.gimme [data-gm-section="newsletter"] .signup {
  padding-block: 44px 64px;
  background: var(--navy);
  border-top: 0;
  color: #fff;
}
.gimme [data-gm-section="newsletter"] .signup .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 24px;
  text-align: center;
}
.gimme [data-gm-section="newsletter"] .signup h2 {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2.4375rem, 2.152624309392265rem + 1.2154696132596685vw, 3.125rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  text-transform: none;
}
.gimme [data-gm-section="newsletter"] .signup .inner > div > p { margin: 0 auto; max-width: none; color: #fff; font-size: 15px; }
/* 琛ㄥ崟 = 鍙傜収绔欏疄娴嬶紙1440 瀹斤級锛氭暣瀹?500銆佽緭鍏ユ 391 脳 48锛?px 鍝佺墝妫曟弿杈广€佹鑹叉枃瀛椼€佸唴杈硅窛 8/12锛夈€?   闂磋窛 8銆併€孲ign up銆嶆槸甯︾偣鍑诲尯鐨勬枃瀛楁寜閽紙101 脳 48銆佸唴杈硅窛 鈮?/21銆佺櫧瀛椼€佹棤搴曟棤妗嗭級 */
.gimme [data-gm-section="newsletter"] .signup form { width: min(500px, 100%); }
.gimme [data-gm-section="newsletter"] .signup .signup-bar {
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 8px;
}
.gimme [data-gm-section="newsletter"] .signup .signup-bar:focus-within { box-shadow: none; }
.gimme [data-gm-section="newsletter"] .signup input[type="email"] {
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
  font-size: 17px;
}
.gimme [data-gm-section="newsletter"] .signup input[type="email"]::placeholder { color: rgba(93, 36, 18, .6); }
.gimme [data-gm-section="newsletter"] .signup input[type="email"]:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
/* 銆孲ign up銆嶏細**鍙傜収绔?`.btn.btn--primary` 鐨?before/after 鏂滃垏鎿﹂櫎鍔ㄧ敾**锛?026-10-29 鐢ㄦ埛鍙ｅ緞锛?   涓嶆槸涓嬪垝绾匡級銆傞潤姝㈡€侊細`::before` 搴曡壊 = 鍝佺墝妫曪紝涓庤闃呭甫鍚岃壊 鈬?鐪嬭捣鏉ユ槸銆岀櫧瀛楁棤搴曘€嶏紱
   hover/focus锛歚::before`锛?30% 瀹姐€佲垝15% 宸﹀亸銆乻kew(30deg)锛夊悜鍙冲钩绉?100% 婊戝嚭锛?   闇插嚭 `::after` 鐨?hover 妫曪紙#b24523锛夆噿 鎿﹂櫎寮忔崲搴曘€?   涓や釜浼厓绱?z-index 涓鸿礋銆佹寜閽?`isolation: isolate` 寤烘爤 鈬?搴曡壊璐村湪鏂囧瓧涓嬮潰銆佷笉浼氳窇鍒拌闃呭甫鑳屽悗銆?*/
.gimme [data-gm-section="newsletter"] .signup .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 9.25px 21.15px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: normal;
}
.gimme [data-gm-section="newsletter"] .signup .btn::before,
.gimme [data-gm-section="newsletter"] .signup .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gimme [data-gm-section="newsletter"] .signup .btn::before {
  z-index: -1;
  width: 130%;
  left: -15%;
  background: var(--navy);
  transform: skew(30deg);
  transition: transform .5s cubic-bezier(.33, 0, 0, 1);
}
.gimme [data-gm-section="newsletter"] .signup .btn::after {
  z-index: -2;
  background: #b24523;
}
.gimme [data-gm-section="newsletter"] .signup .btn:hover,
.gimme [data-gm-section="newsletter"] .signup .btn:focus-visible {
  background: transparent;
  text-decoration: none;
}
.gimme [data-gm-section="newsletter"] .signup .btn:hover::before,
.gimme [data-gm-section="newsletter"] .signup .btn:focus-visible::before {
  transform: translate3d(100%, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .gimme [data-gm-section="newsletter"] .signup .btn::before { transition: none; }
}
/* 鍕鹃€夎鏄庯細涓庤緭鍏ユ**宸︾紭瀵归綈**锛堜笉鍐嶆暣琛屽眳涓級锛屽閫夋璐寸潃杈撳叆妗嗗乏杈?*/
.gimme [data-gm-section="newsletter"] .signup .consent {
  justify-content: flex-start;
  max-width: none;
  margin-inline: 0;
  color: rgba(255, 255, 255, .85);
  text-align: left;
}
.gimme [data-gm-section="newsletter"] .signup .consent input { accent-color: #fff; }
.gimme [data-gm-section="newsletter"] .signup .thanks { color: #fff; }

/* 鈶?Shop the look 鈥斺€?宸﹀ぇ鍥撅紙瀹瑰櫒鍗婂锛? 鍙充晶鏍囬 + 鎻忚竟鍟嗗搧鍗?*/
.gimme [data-gm-section="look"] { padding: 0 0 96px; }
.gimme [data-gm-home] .gm-look { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.gimme [data-gm-home] .gm-look__media { position: relative; display: block; aspect-ratio: 672 / 940; overflow: hidden; background: var(--porcelain); }
.gimme [data-gm-home] .gm-look__media-link { display: block; width: 100%; height: 100%; }
.gimme [data-gm-home] .gm-look__media img { width: 100%; height: 100%; object-fit: cover; }
/* 2026-10-29锛堢敤鎴峰彛寰勩€屼粬鏄細鍛煎惛鐨勩€? 鍙傜収绔欏師濮?CSS锛夛細澶у浘鐑偣 鈥斺€?   鐓?`component-shoppable.css` 鐨?`.shoppable-item__hotspot` 閫愭潯鎼繃鏉ワ細
     路 30px 鍗婇€忔槑榛戝渾 + 11px 鐧界偣锛坄::before`锛夛紝鍧愭爣鐢?`--gm-hx` / `--gm-hy`锛堟ā鏉挎寜澶у浘鐧惧垎姣斿啓鍦ㄨ鍐咃紝
       宸︿笂瑙掑啀 `calc()` 鍑忓崐寰?鈬?鍦嗗績钀藉湪鍧愭爣涓婏紝涓庡弬鐓х珯鐨?`--horizontal-position` / `--vertical-position` 鍚屾瀯锛夛紱
     路 **鍛煎惛**锛歚scale` 1 鈫?1.1 鈫?1锛?200ms 鏃犻檺寰幆锛涘鐑偣鍙悇鑷粰 `--gm-hotspot-delay` 閿欏嘲锛?     路 **鑴夊啿鐜?*锛歚::after` 鐢?`inset box-shadow` 鐧界幆鍚戝鎵╂暎涓€娆★紙鍙傜収绔?`pulse-ring`锛?200ms锛夛紱
     路 hover / focus锛氭斁澶?1.15 + 2px 鐧藉湀 + 搴曡壊 `.4 鈫?.6`銆佺櫧鐐规斁澶?1.2锛堜笌鍙傜収绔欎竴鑷达紱姝ゆ椂鏆傚仠鍛煎惛锛岄伩鍏嶅拰 hover 鎬佹墦鏋讹級銆?   鈿狅笍 鍙崲鐨偆锛屼笉鏀圭粨鏋勶細鐑偣浠嶆槸鐪熼摼鎺ワ紙`aria-label` = 鍟嗗搧鍚嶏級锛岀偣鍑?= 鎵撳紑璇?look 鍟嗗搧銆?*/
.gimme [data-gm-home] .gm-look__hotspot {
  --hotspot-size: 30px;
  --hotspot-size-inner: 11px;
  position: absolute;
  top: calc(var(--gm-hy) - (var(--hotspot-size) / 2));
  left: calc(var(--gm-hx) - (var(--hotspot-size) / 2));
  display: flex;
  width: var(--hotspot-size);
  height: var(--hotspot-size);
  border-radius: 100%;
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
  transition: transform 300ms cubic-bezier(.33, 0, 0, 1), box-shadow 300ms cubic-bezier(.33, 0, 0, 1), background-color 300ms cubic-bezier(.33, 0, 0, 1);
  cursor: pointer;
  z-index: 2;
  animation: gm-hotspot-breathe 1200ms cubic-bezier(.33, 0, 0, 1) infinite;
  animation-delay: var(--gm-hotspot-delay, 0ms);
}
.gimme [data-gm-home] .gm-look__hotspot::before {
  content: "";
  display: block;
  margin: auto;
  height: var(--hotspot-size-inner);
  width: var(--hotspot-size-inner);
  border-radius: 100%;
  background-color: #fff;
  transition: transform 300ms cubic-bezier(.33, 0, 0, 1);
}
.gimme [data-gm-home] .gm-look__hotspot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--hotspot-size) * 2);
  height: calc(var(--hotspot-size) * 2);
  margin: calc(var(--hotspot-size) * -1) 0 0 calc(var(--hotspot-size) * -1);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--hotspot-size) rgba(255, 255, 255, 0);
  animation: gm-hotspot-ring 1200ms cubic-bezier(.33, 0, 0, 1) 400ms 1 both;
}
.gimme [data-gm-home] .gm-look__hotspot:hover,
.gimme [data-gm-home] .gm-look__hotspot:focus-visible,
.gimme [data-gm-home] .gm-look__hotspot.is-active {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, .6);
}
.gimme [data-gm-home] .gm-look__hotspot:hover::before,
.gimme [data-gm-home] .gm-look__hotspot:focus-visible::before,
.gimme [data-gm-home] .gm-look__hotspot.is-active::before { transform: scale(1.2); }
@keyframes gm-hotspot-breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes gm-hotspot-ring {
  0% { opacity: 1; transform: scale3d(.4, .4, 1); }
  100% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 1); opacity: 0; transform: scale3d(1.2, 1.2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .gimme [data-gm-home] .gm-look__hotspot { animation: none; }
  .gimme [data-gm-home] .gm-look__hotspot::after { animation: none; opacity: 0; }
}
.gimme [data-gm-home] .gm-look__side { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gimme [data-gm-home] .gm-link { margin-top: 12px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 17px; }
.gimme [data-gm-home] .gm-look__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(302px, 100%);
  margin-top: 32px;
  padding: 16px 16px 16px;
  border: 1px solid var(--ink);
}
.gimme [data-gm-home] .gm-look__card > a:first-child { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gimme [data-gm-home] .gm-look__card img { width: 100%; aspect-ratio: 268 / 340; object-fit: cover; background: var(--porcelain); }
.gimme [data-gm-home] .gm-look__card .gm-card__title { margin-top: 20px; }
.gimme [data-gm-home] .gm-btn-sm {
  margin-top: 12px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
  line-height: 1.6;
}
.gimme [data-gm-home] .gm-btn-sm:hover { border-color: var(--navy); }

@media (max-width: 989px) {
  .gimme { --gm-gutter: 20px; }
  .gimme [data-gm-home] .gm-track {
    grid-auto-columns: calc((100vw - 2 * var(--gm-gutter) - 16px) / 2.15);
    column-gap: 16px;
  }
  .gimme [data-gm-section="hero"] .gm-hero__cta { right: 20px; bottom: 24px; }
  .gimme [data-gm-section="triptych"] { grid-template-columns: repeat(var(--gm-cols, 3), minmax(0, 1fr)); height: 52vw; }
  .gimme [data-gm-home] .gm-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .gimme [data-gm-home] .gm-look { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gimme [data-gm-section="look"] { padding-bottom: 64px; }
}
@media (max-width: 560px) {
  .gimme [data-gm-section="featured"] .gm-arrows { display: none; }
  .gimme [data-gm-home] .gm-card__title,
  .gimme [data-gm-home] .gm-card__price { font-size: 15px; }
  .gimme [data-gm-home] .gm-cat__bar { min-height: 42px; padding: 0 12px; font-size: 15px; }
  .gimme [data-gm-section="newsletter"] .signup .signup-bar { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gimme [data-gm-section="hero"] .gm-hero__slide,
  .gimme [data-gm-home] :is(.gm-card__alt, .gm-cat__img img, .gm-cat__bar svg),
  .gimme [data-gm-section="triptych"] img { transition: none; }
}

/* =============================================================================
   椤佃剼锛圫toreFooter `data-footer-layout="gimme"`锛夆€斺€?1:1 鍙傜収 studiogimme.com 椤佃剼锛?026-10-28 瀹炴祴锛夛細
     路 妫曞簳 #5d2412锛涙鏂?17px 鐧?70%锛?-color-text-footer-subdued锛夛紝鏍囬 / 璇█ / 鍥炬爣绾櫧锛?     路 PC锛堚墺960锛夛細涓?48 / 涓?64 鐣欑櫧锛屽搧鐗?+ 鏍忕洰涓€琛屽洓缁勩€佹瘡缁?19% 瀹斤紱鏍忕洰鏍囬 13.2px 澶у啓瀛楄窛 .05em锛岄摼鎺ヨ璺?12px銆佹偓鍋滀笅鍒掔嚎锛?       搴曟鏃犲垎闅旂嚎锛氬乏 = 璇█锛?3.2px 鐧斤級鈫?鐗堟潈 / 鏀跨瓥灏忓瓧锛?3.2px锛夛紝鍙?= 鏀粯鍥炬爣 36脳22 鍨傜洿灞呬腑锛?     路 H5锛氫笂涓?32锛涙爮鐩敹鎴愭墜椋庣惔锛堢粍闂?1px 鐧?20% 缁嗙嚎锛屾爣棰樿 16px 涓婁笅鍐呰竟璺?+ chevron锛夛紝鏀粯鍥炬爣钀藉埌鏈€涓嬨€?   棰滆壊璧?--brand-ink / --brand-muted 鈬?鍗栧鍦ㄩ〉鑴氬尯鍧楅噷閰嶇殑鏂囧瓧鑹诧紙appearance.color锛夌収鏍锋暣浣撶敓鏁堛€?   ========================================================================== */
.gimme [data-store-footer] {
  --brand-ink: #ffffff;
  --brand-muted: rgba(255, 255, 255, .7);
  --brand-line: rgba(255, 255, 255, .2);
  --brand-surface-2: #5d2412;
  --brand-surface: #5d2412;
  background: #5d2412;
  border-top: 0;
  color: var(--brand-muted);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
}
.gimme [data-store-footer] :is(ul, p, h2) { margin: 0; padding: 0; list-style: none; }
.gimme [data-store-footer] a { color: inherit; text-decoration: none; }
.gimme [data-store-footer] a:hover { color: var(--brand-ink); }
.gimme [data-store-footer] [data-gf-inner] {
  max-width: calc(var(--gm-content) + 2 * var(--gm-gutter));
  margin: 0 auto;
  padding: 32px var(--gm-gutter);
}

/* 鍝佺墝缁勶細logo锛堝弬鐓х珯 190px 瀹斤級/ 搴楀悕瀛楁爣 + 绠€浠?+ 绀句氦鍥炬爣 */
.gimme [data-store-footer] [data-footer-brand] { padding-bottom: 20px; }
.gimme [data-store-footer] [data-footer-brand] > img { display: block; width: auto; max-width: 190px; max-height: 117px; margin-top: 8px; filter: brightness(0) invert(1); }
.gimme [data-store-footer] [data-footer-brand] > span { display: block; margin-top: 8px; color: var(--brand-ink); font-family: "Work Sans", var(--sans); font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.gimme [data-store-footer] [data-gf-blurb] { max-width: 32ch; margin-top: 16px; }
.gimme [data-store-footer] [data-footer-social] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 34px; }
.gimme [data-store-footer] [data-footer-social] a { display: block; color: var(--brand-ink); text-transform: capitalize; transition: opacity .2s ease; }
.gimme [data-store-footer] [data-footer-social] a:hover { opacity: .5; }
.gimme [data-store-footer] [data-gf-social-icon] a { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.gimme [data-store-footer] [data-gf-social-icon] svg { width: 20px; height: 20px; }

/* 鏍忕洰锛欻5 鎵嬮鐞?*/
.gimme [data-store-footer] [data-gf-columns] > [data-gf-group] { border-top: 1px solid var(--brand-line); }
.gimme [data-store-footer] [data-gf-heading] { display: none; }
.gimme [data-store-footer] [data-gf-toggle] {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border: 0;
  background: transparent;
  color: var(--brand-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13.2px;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
}
.gimme [data-store-footer] [data-gf-toggle] svg { flex: none; opacity: .7; transition: transform .25s ease; }
.gimme [data-store-footer] [data-open] [data-gf-toggle] svg { transform: rotate(180deg); }
.gimme [data-store-footer] [data-gf-links] { display: none; padding-bottom: 20px; }
.gimme [data-store-footer] [data-open] [data-gf-links] { display: block; }
.gimme [data-store-footer] [data-gf-links] li + li { margin-top: 12px; }
.gimme [data-store-footer] [data-gf-links] a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 搴曟锛氳瑷€ 鈫?鐗堟潈 / 鏀跨瓥锛堝皬瀛楋級锛涙敮浠樺浘鏍?*/
.gimme [data-store-footer] [data-gf-bottom] { margin-top: 32px; }
.gimme [data-store-footer] [data-gf-bottom-left] label { margin-bottom: 12px; color: var(--brand-ink); font-size: 13.2px; }
.gimme [data-store-footer] [data-gf-bottom-left] label > svg:first-of-type { display: none; }
.gimme [data-store-footer] [data-gf-bottom-left] select { color: var(--brand-ink); background: transparent; font-size: 13.2px; }
.gimme [data-store-footer] [data-gf-bottom-left] select option { color: var(--ink); }
.gimme [data-store-footer] [data-gf-credits] { font-size: 13.2px; line-height: 1.5; }
.gimme [data-store-footer] [data-gf-credits] p + p { display: flex; flex-wrap: wrap; gap: 0 16px; }
.gimme [data-store-footer] [data-gf-credits] :is(a, button):hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.gimme [data-store-footer] [data-gf-bottom-right] { margin-top: 32px; }
.gimme [data-store-footer] [data-footer-payments] { gap: 4px; }
.gimme [data-store-footer] [data-footer-payments] svg { width: 36px; height: 22px; }

@media (min-width: 960px) {
  .gimme [data-store-footer] [data-gf-inner] { padding-top: 48px; padding-bottom: 64px; }
  .gimme [data-store-footer] [data-gf-groups] { display: flex; flex-wrap: wrap; }
  .gimme [data-store-footer] [data-gf-columns] { display: contents; }
  .gimme [data-store-footer] [data-gf-group] { width: 19%; flex: none; padding-bottom: 20px; }
  .gimme [data-store-footer] [data-gf-columns] > [data-gf-group] { border-top: 0; }
  .gimme [data-store-footer] [data-gf-heading] {
    display: block;
    margin-bottom: 16px;
    color: var(--brand-ink);
    font-family: var(--sans);
    font-size: 13.2px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding-top: 5px;
  }
  .gimme [data-store-footer] [data-gf-toggle] { display: none; }
  .gimme [data-store-footer] [data-gf-links] { display: block; padding-bottom: 0; }
  .gimme [data-store-footer] [data-gf-bottom] { display: flex; justify-content: space-between; gap: 24px; margin-top: 12px; }
  .gimme [data-store-footer] [data-gf-bottom-right] { display: flex; align-items: center; margin-top: 0; }
}

/* =============================================================================
   鍒楄〃椤碉紙GimmeCollection锛宍[data-gm-plp]`锛夆€斺€?1:1 鍙傜収 studiogimme.com/collections/broeken锛?026-10-28 瀹炴祴锛夛細
     路 鏍囬 Fraunces 300 / 50px锛圚5 34px锛夊ぇ鍐欍€佸眳涓紝涓?64銆佷笅 32锛?     路 宸ュ叿鏉′笂涓?12锛氬乏銆屾粦鏉?Filter 鈱勩€?銆?n) results銆?5px 60% 澧ㄨ壊锛涘彸銆孲ort: 褰撳墠 鈱勩€嶏紱寮瑰眰 1px 澧ㄨ壊鎻忚竟銆佸崟閫夊渾鐐癸紱
       Filter 灞曞紑 鈬?涓€鎺掓弿杈逛笅鎷夛紙绫荤洰 / 楗伴潰 / 浠锋牸锛夛紱H5 = 涓ら绛夊鎻忚竟鎸夐挳銆侀殣钘忚鏁帮紱
     路 缃戞牸涓?16锛? 鍒?gap 24/25锛圚5 2 鍒?gap 24/13锛夛紱鍗＄墖 2:3 cover + 鎮仠鎹㈢浜屽紶锛屾爣棰?/ 浠锋牸 17px 灞呬腑锛?     路 搴曢儴銆孲howing 1-n of N products銆?7px 灞呬腑锛屼笂 48锛圚5 14px / 32锛夈€?   ========================================================================== */
.gimme [data-gm-plp] {
  padding-bottom: 72px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
}
.gimme [data-gm-plp] :is(ul, p, h1, h2) { margin: 0; padding: 0; list-style: none; }
/* 鍐呭鍒楋紙2026-10-29 鍚搁《鏀归€狅級锛歚[data-gm-plp]` 涓嶅啀闄愬 鈥斺€?闄愬 / 宸﹀彸鐣欑櫧鐢辫繖鏉¤鍒欓€愭鎵挎媴锛?   鏍囬 / 缃戞牸 / 鍒嗛〉 / 绌烘€?/ 宸ュ叿鏉″唴瀹癸紙`__bar-inner`锛夊叡鐢ㄥ悓涓€鍒楀锛岄潤姝㈡椂涓庢敼鐗堝墠鍍忕礌绾т竴鑷达紱
   宸ュ叿鏉¤儗鏅垯閾烘弧鏁磋瑙嗗彛锛堣嫻鏋滃紡閫氭爮姣涚幓鐠冿級锛岃涓嬫柟 `__bar` 娈点€?*/
.gimme [data-gm-plp] :is(.gm-plp__head, .gm-plp__grid, .gm-plp__pagination, .gm-plp__empty, .gm-plp__bar-inner) {
  max-width: calc(var(--gm-content) + 2 * var(--gm-gutter));
  margin-inline: auto;
  padding-inline: var(--gm-gutter);
}
/* 鏍囬锛氫笂 64 / 涓?32锛堝師鏉ャ€屾爣棰?鈫?宸ュ叿鏉°€嶇殑闂磋窛鏄伐鍏锋潯鐨?`margin-top: 32`锛屾尓鍒版爣棰樼殑涓嬪唴杈硅窛锛?   闈欐鎬佽瑙変笉鍙橈紝闂磋窛鐣欏湪鐜荤拑鏉″闈紝sticky 鐩掓湰韬彧鏈?padding銆佹病鏈?margin锛?*/
.gimme [data-gm-plp] .gm-plp__head { padding-top: 64px; padding-bottom: 32px; text-align: center; }
.gimme [data-gm-plp] .gm-plp__title {
  font-family: var(--display);
  font-size: 50px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.gimme [data-gm-plp] .gm-plp__desc { max-width: 60ch; margin: 16px auto 0; color: rgba(41, 33, 31, .7); font-size: 15px; }

/* 详情页「You may also like」（ProductDetail，`[data-gm-plp][data-gm-related]`）：复用列表网格 + 卡片；
   已在详情页 `Page` 的内容列里 ⇒ 网格去掉列表页那层限宽 / 左右留白；标题 = 主题衬线大写居中（比列表页标题小一号） */
.gimme [data-gm-related] { margin-top: 80px; padding-bottom: 0; }
/* 推荐固定 4 件 ⇒ 平板也保持 4 列（列表页 ≤989 的 3 列会剩一张孤卡），手机 2 列 */
.gimme [data-gm-plp][data-gm-related] .gm-plp__grid { max-width: none; padding-inline: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gimme [data-gm-plp][data-gm-related] .gm-related__title {
  margin-bottom: 24px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 719px) {
  .gimme [data-gm-related] { margin-top: 56px; }
  .gimme [data-gm-plp][data-gm-related] .gm-plp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gimme [data-gm-plp][data-gm-related] .gm-related__title { margin-bottom: 16px; font-size: 26px; }
}

/* 宸ュ叿鏉?*/
/* 宸ュ叿鏉?= 鍚搁《 + 鑻规灉寮忔瘺鐜荤拑锛?026-10-29 鐢ㄦ埛鍙ｅ緞锛涘悓鏃ヤ簩娆″彛寰勭粰浜嗗叿浣?CSS锛夈€?   路 鏁磋 sticky锛岃创鍦ㄧ珯鐐瑰ご鍙搴曡竟涓嬫柟锛坄--sf-header-h` 鐢?StoreHeader 閲忓嚭锛屽惈 gimme 椤靛ご鐨勮礋 top锛夛紱
   路 闈欐鎬侀€忔槑鏃犺楗帮紱`data-stuck`锛堥《杈瑰埌杈惧惛椤剁嚎鏃剁敱缁勪欢鎸備笂锛夋贰鍏?80% 鐧?+ blur(10px)锛?   路 **涓嶈涓嬭竟妗嗐€佷笉瑕侀槾褰?*锛堢敤鎴?2026-10-29锛氬師鏉ラ偅鏉?1px 鍙戜笣绾?+ 鎶曞奖鎷挎帀锛夛紱
   路 z-index 20 < 椤靛ご 30锛堟粴杩囬〉澶存椂浠庡畠涓嬮潰婊戝叆锛夛紝> 鍟嗗搧鍗★紙鍗″唴 quick-add 鏄?z-index 2锛夈€?*/
.gimme [data-gm-plp] .gm-plp__bar {
  position: sticky;
  top: var(--sf-header-h, 0px);
  z-index: 20;
  padding: 12px 0;
  background: transparent;
  transition: background-color .25s ease;
}
.gimme [data-gm-plp] .gm-plp__bar[data-stuck] {
  /* 鐢ㄦ埛缁欏畾锛歳gba(255,255,255,.8) + blur(10px)锛涙棤杈规銆佹棤闃村奖 */
  background-color: rgba(255, 255, 255, .8);
  box-shadow: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (prefers-reduced-motion: reduce) {
  .gimme [data-gm-plp] .gm-plp__bar { transition: none; }
}
.gimme [data-gm-plp] .gm-plp__bar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gimme [data-gm-plp] .gm-plp__bar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.gimme [data-gm-plp] .gm-plp__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.gimme [data-gm-plp] .gm-plp__btn:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.gimme [data-gm-plp] .gm-plp__sort-icon { display: none; }
.gimme [data-gm-plp] .gm-plp__chev { flex: none; transition: transform .2s ease; }
.gimme [data-gm-plp] .gm-plp__count { color: rgba(41, 33, 31, .6); font-size: 15px; white-space: nowrap; }

.gimme [data-gm-plp] .gm-plp__menu { position: relative; }
/* 涓嬫媺锛堝脊灞?/ 瑙﹀彂鎸夐挳锛夋弿杈?= 涓婚妫曪紱hover 鍙樺ⅷ榛戯紙鐢ㄦ埛 2026-10-29 鍙ｅ緞锛?*/
.gimme [data-gm-plp] .gm-plp__pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 260px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 8px 0;
  border: 1px solid var(--navy);
  background: var(--white, #fff);
  transition: border-color .18s ease;
}
.gimme [data-gm-plp] .gm-plp__pop:hover { border-color: var(--ink); }
.gimme [data-gm-plp] .gm-plp__menu--sort .gm-plp__pop { left: auto; right: 0; }
.gimme [data-gm-plp] .gm-plp__pop a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.gimme [data-gm-plp] .gm-plp__pop a:hover { background: rgba(93, 36, 18, .06); }
.gimme [data-gm-plp] .gm-plp__radio {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--navy);
  border-radius: 50%;
}
.gimme [data-gm-plp] .gm-plp__pop a[aria-current] .gm-plp__radio { box-shadow: inset 0 0 0 3px var(--white, #fff); background: var(--navy); }
.gimme [data-gm-plp] .gm-plp__opt-count { color: rgba(41, 33, 31, .6); font-size: 15px; }

.gimme [data-gm-plp] .gm-plp__facets { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.gimme [data-gm-plp] .gm-plp__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 4px 12px;
  border: 1px solid var(--navy);
  background: var(--white, #fff);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
/* hover 鍙樺ⅷ榛戯紙涓婚妫?鈫?榛戯級锛涢€変腑鎬佷繚鎸佹搴曠櫧瀛楋紝涓嶅弬涓?hover 鍙樿壊 */
.gimme [data-gm-plp] .gm-plp__pill:not([data-active]):hover { border-color: var(--ink); }
.gimme [data-gm-plp] .gm-plp__pill[data-active] { background: var(--navy); border-color: var(--navy); color: #fff; }

.gimme [data-gm-plp] .gm-plp__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 15px; }
.gimme [data-gm-plp] .gm-plp__chip { display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; }
.gimme [data-gm-plp] .gm-plp__chip:hover { border-color: var(--ink); }
.gimme [data-gm-plp] .gm-plp__clear { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* 缃戞牸 + 鍗＄墖 */
.gimme [data-gm-plp] .gm-plp__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 25px;
  padding-top: 16px;
}
/* 鍒楄〃**娉㈡氮鍏ュ満**锛?026-10-29 鐢ㄦ埛鍙ｅ緞锛氭悳绱?/ 闆嗗悎 / 绫荤洰鐨勫垪琛ㄨ鏈夋尝娴姩鐢伙級銆?   鍙傛暟娌跨敤棣栭〉閭ｅ锛?-duration-normal .5s / easing锛夛紝姝ラ暱 60ms锛?6 寮犲崱鏈€澶?15脳60ms=900ms 鎵畬锛?   娉㈢汗鑲夌溂鍙鲸浣嗕笉鎷栨矒銆?   鈿狅笍 2026-10-29 淇锛氱敤 CSS animation + `both`锛屼笉鐢?transition + JS 鏄鹃殣 鈥斺€?棣栧睆鍒楄〃鏈潵灏卞湪
   瑙嗗彛閲岋紝JS 鍚屽抚銆屽厛闅愯棌鍐嶆樉绀恒€嶄笉浼氳Е鍙?transition锛堢敤鎴峰弽棣堝埛鏂?璺宠浆鐪嬩笉鍒板姩鐢伙級锛?   鏈嶅姟绔?HTML 灏卞甫 `--wave` 绫?鈬?棣栧抚鍗抽殣钘忔€侊紙涓嶉棯鍐呭锛夛紝鍔ㄧ敾缁撴潫鍋滃湪鍙鎬侊紝
   鍒锋柊 / 璺宠浆 / 缈婚〉 / 鎹㈢瓫閫夐兘浼氳嚜鍔ㄩ噸鏂版挱銆俙prefers-reduced-motion` 鏃朵笉鎾紙鐩存帴鍙锛夈€?*/
@keyframes gm-list-wave {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to { opacity: 1; transform: none; }
}
.gimme [data-gm-plp] {
  --gm-list-duration: .5s;
  --gm-list-step: 60ms;
  --gm-list-easing: cubic-bezier(.33, 0, 0, 1);
}
.gimme [data-gm-plp] .gm-plp__grid--wave > li {
  animation: gm-list-wave var(--gm-list-duration) var(--gm-list-easing) calc(var(--gm-list-step) * var(--gm-i, 0)) both;
}
@media (prefers-reduced-motion: reduce) {
  .gimme [data-gm-plp] .gm-plp__grid--wave > li { animation: none; }
}
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard { position: relative; }
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__link { display: flex; flex-direction: column; align-items: center; color: var(--ink); text-align: center; text-decoration: none; }
/* 鍟嗗搧鍥?`mix-blend-mode: multiply` + 鍥惧潡搴曡壊 `#f5f5f5`锛堢敤鎴?2026-10-29锛夛細
   鐧藉簳鍟嗗搧鍥句笌鐏板簳鐩镐箻 鈬?鍥惧潡缁熶竴鎴?#f5f5f5 鐨勬祬鐏板簳锛屽晢鍝佺殑鐧借壊鑳屾櫙涓嶅啀鏄櫧妗嗭紝
   鑰屾槸鍜岀伆搴曡瀺鎴愪竴鍧楋紙涓庡弬鐓х珯鍟嗗搧鍥惧潡鍚屼竴绉嶅仛娉曪級銆?*/
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__img { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; margin-bottom: 16px; overflow: hidden; background: var(--porcelain, #f5f5f5); }
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__img img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
/* 绗簩寮犲浘锛堟偓鍋滄崲鍥撅級锛氱収鍙傜収绔?`.product-item__image--two.image` 鈥斺€?浠?1.2 鍊嶇缉灏忓埌 1 + 娣″叆锛?   0.3s cubic-bezier(.33,0,0,1)锛泎-index 2 鍘嬪湪棣栧浘涔嬩笂锛堢敤鎴?2026-10-29 缁欎簡鍏蜂綋鍔ㄧ敾鍊硷級銆?   `isolation: isolate` + 鑷韩 #f5f5f5 搴?= 閲岄潰鐨勫浘鐗?multiply 鍙窡杩欏眰鐏板簳绠楋紝涓嶄細鎶婇鍥鹃€忓嚭鏉ャ€?*/
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__alt {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  opacity: 0;
  transform: scale(1.2);
  background: var(--porcelain, #f5f5f5);
  isolation: isolate;
  transition:
    opacity .3s cubic-bezier(.33, 0, 0, 1),
    transform .3s cubic-bezier(.33, 0, 0, 1);
}
@media (hover: hover) {
  .gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard:hover .gm-pcard__alt { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__alt { transition: none; transform: none; }
}
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 2px 8px;
  background: var(--white, #fff);
  color: var(--ink);
  font-size: 13px;
}
/* 收藏心形（集合 / 类目 / 收藏页 `GmCard wishlist`）：贴图块右上角，44px 命中区；叠在快速加购覆盖层（z 2）之上。
   与参照站一样不用圆钮阴影：无底色、墨色细描边心形；已收藏 = 品牌棕实心（盖掉组件给的 text-danger）。 */
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .wish {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform .18s ease;
}
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .wish svg { width: 22px; height: 22px; }
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .wish[aria-pressed="true"] { color: var(--navy); }
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .wish:active { transform: scale(.92); }
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .wish:focus-visible { outline: 1px solid var(--ink); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  .gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .wish { transition: none; }
}
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__title { margin-bottom: 2px; font-size: 17px; line-height: 1.5; }
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__link:hover .gm-pcard__title { text-decoration: underline; text-underline-offset: 4px; }
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__price { display: inline-flex; gap: 8px; font-size: 17px; line-height: 1.5; }
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__price s { color: var(--muted); }
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard__sale { color: var(--navy); }
/* 蹇€熷姞璐紙鐢ㄦ埛 2026-10-29锛氱収鍙傜収绔欓寮犲晢鍝侊紝鍚庣画鍙ｅ緞寰皟锛夆€斺€斿浘鐗囧簳閮ㄤ竴鏉?*閫氭爮鐧芥潯 + 灞呬腑鏂囧瓧**锛?   路 瑕嗙洊灞傝创浣忓浘鍧楋紙2:3锛屾棤鍦嗚锛夛紝鎸夐挳宸﹀彸涓嬪悇鐣?8px銆侀珮 34px銆?px 澧ㄨ壊鎻忚竟锛?   路 鏂囨鍥哄畾銆孋hoose options銆嶏紙澶氳鏍?/ 鍗曡鏍煎悓涓€鍙ワ紝鐢?`QuickAdd textLabel` 缁欙級锛屽浘鏍囦笉鏄剧ず锛?   路 榛樿鐧藉簳 **90% 涓嶉€忔槑**锛坄rgba(255,255,255,.9)`锛岄€忓嚭涓€鐐瑰晢鍝佸浘锛夛紝榧犳爣绉诲埌鎸夐挳涓?鈬?**100% 涓嶉€忔槑鐧?*锛?   路 hover **涓嶆敼鏂囧瓧鑹层€佷笉浣嶇Щ**锛?   路 妗岄潰锛堢簿纭寚閽堬級浠嶆槸鍗＄墖 hover / focus-within 鎵嶆樉褰紙鍙贰鍏ャ€佷笉涓婁笅绉诲姩锛夛紱
     鎵嬫満锛?768px锛夋部鐢ㄥ叏绔欏彛寰勪笉灞曠ず蹇€熷姞璐紱鈮?68 鐨勮Е鎽歌澶囦笉渚濊禆 hover銆佸父鏄俱€?*/
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .quick-add { position: absolute; top: 0; left: 0; right: 0; z-index: 2; aspect-ratio: 2 / 3; }
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .quick-add > .quick-add__button {
  left: 8px;
  right: 8px;
  bottom: 8px;
  width: auto;
  height: 34px;
  padding: 0 12px;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  box-shadow: none;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
}
/* 鍥炬爣涓嶆樉绀猴紙鏂囧瓧鏉″舰鎬侊級 */
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .quick-add > .quick-add__button .quick-add__icon { display: none; }
/* 鏂囧瓧浠庛€岃灞忎笓鐢ㄣ€嶆仮澶嶆垚鍙锛涘悓鏃舵姷娑堝叏灞€ hover 鎻愮ず鏉★紙label 宸插父鏄撅紝涓嶅啀闇€瑕佹皵娉★級 */
.gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .quick-add > .quick-add__button .quick-add__label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip-path: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font: inherit;
  white-space: nowrap;
  animation: none;
}
/* 鏄惧舰閾撅細gimme 鍗＄墖娌℃湁 `.card-shell`锛屽叏灞€閭ｆ潯 hover 鏄惧舰閫夋嫨鍣ㄦ墦涓嶅埌 鈬?杩欓噷琛ヤ竴鏉″悓閾捐矾銆?   gimme 鐗?*鍙贰鍏ャ€佷笉浣嶇Щ**锛堢洊鎺夊叏灞€鐨?translateY(6px)锛夛紱hover 涓嶆敼鑳屾櫙/鏂囧瓧鑹层€?*/
@media (hover: hover) and (pointer: fine) {
  .gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .quick-add > .quick-add__button { opacity: 0; transform: none; }
  .gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard:is(:hover, :focus-within) > .quick-add > .quick-add__button { opacity: 1; transform: none; }
  /* 绉诲埌鎸夐挳涓婏細90% 鐧?鈫?100% 鐧斤紙涓嶆敼瀛楄壊銆佷笉浣嶇Щ锛?*/
  .gimme :is([data-gm-plp], [data-gm-cards]) .gm-pcard > .quick-add > .quick-add__button:hover { background: rgba(255, 255, 255, 1); }
}

/* 鍒嗛〉鍣紙2026-10-29 鐢ㄦ埛鍙ｅ緞銆屽垪琛ㄥ姞杞芥洿澶氭寜閽?鏇存崲涓哄垎椤靛櫒銆嶏紱鍙傜収绔欙細鏂规椤电爜 + 鐪佺暐鍙?+ 绠ご + 鍖洪棿鏂囨锛夈€?   褰撳墠椤?= 澧ㄨ壊鎻忚竟锛屽叾瀹冮〉 = 涓婚妫曟弿杈癸紙涓庣瓫閫変笅鎷夊悓涓€濂楄瑷€锛夛紱hover 鎻忚竟杞ⅷ鑹层€?*/
.gimme [data-gm-plp] .gm-plp__pagination { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 48px; text-align: center; }
.gimme [data-gm-plp] .gm-plp__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.gimme [data-gm-plp] .gm-plp__pager-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--navy);
  background: var(--white, #fff);
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: border-color .18s ease;
}
.gimme [data-gm-plp] .gm-plp__pager-page:hover { border-color: var(--ink); }
.gimme [data-gm-plp] .gm-plp__pager-page[aria-current="page"] { border-color: var(--ink); }
.gimme [data-gm-plp] .gm-plp__pager-gap { min-width: 26px; color: var(--ink); font-size: 17px; line-height: 1; }
.gimme [data-gm-plp] .gm-plp__pager-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  text-decoration: none;
  transition: opacity .18s ease;
}
.gimme [data-gm-plp] .gm-plp__pager-arrow svg { width: 12px; height: 20px; }
.gimme [data-gm-plp] .gm-plp__pager-arrow:hover { opacity: .55; }
.gimme [data-gm-plp] .gm-plp__pager-summary { color: rgba(41, 33, 31, .6); font-size: 15px; line-height: 1.4; }
/* 2026-10-29（用户口径「PC 分页器样式太小」）：页码方框 34 → 44、字号 15 → 17、箭头图标 10×18 → 12×20；
   只有一页（`data-gm-pages="1"`）时模板不渲染 `.gm-plp__pager`，只保留区间统计行 —— 见
   `src/templates/gimme/GimmeCollection.tsx#GmPagination`。 */
.gimme [data-gm-plp] .gm-plp__empty { padding-block: 64px; text-align: center; }
.gimme [data-gm-plp] .gm-plp__empty h2 { margin-bottom: 16px; font-size: 28px; }

@media (max-width: 989px) {
  .gimme [data-gm-plp] .gm-plp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .gimme [data-gm-plp] { font-size: 16px; }
  .gimme [data-gm-plp] .gm-plp__head { padding-top: 56px; padding-bottom: 24px; }
  .gimme [data-gm-plp] .gm-plp__title { font-size: 34px; }
  .gimme [data-gm-plp] .gm-plp__bar-row { gap: 13px; }
  .gimme [data-gm-plp] .gm-plp__bar-left,
  .gimme [data-gm-plp] .gm-plp__menu--sort { flex: 1 1 0; min-width: 0; }
  .gimme [data-gm-plp] .gm-plp__count,
  .gimme [data-gm-plp] .gm-plp__sort-current,
  .gimme [data-gm-plp] .gm-plp__bar-row .gm-plp__chev { display: none; }
  .gimme [data-gm-plp] .gm-plp__sort-icon { display: block; }
  .gimme [data-gm-plp] .gm-plp__bar-row .gm-plp__btn {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    border: 1px solid var(--ink);
    /* 鍚搁《鐜荤拑涓嬩篃璇绘垚瀹炲績銆岄€夋嫨妗嗐€嶏細鐧藉簳锛堢敤鎴?2026-10-29 鍙ｅ緞锛?*/
    background: var(--white, #fff);
  }
  .gimme [data-gm-plp] .gm-plp__pop { min-width: 0; width: 100%; }
  .gimme [data-gm-plp] .gm-plp__facets { position: relative; gap: 8px; }
  .gimme [data-gm-plp] .gm-plp__facets .gm-plp__menu { position: static; }
  .gimme [data-gm-plp] .gm-plp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 13px; }
  .gimme [data-gm-plp] :is(.gm-pcard__title, .gm-pcard__price) { font-size: 16px; }
  .gimme [data-gm-plp] .gm-plp__pagination { margin-top: 32px; }
  .gimme [data-gm-plp] .gm-plp__pager { gap: 6px; }
  .gimme [data-gm-plp] .gm-plp__pager-page { min-width: 30px; height: 30px; padding: 0 4px; font-size: 14px; }
  .gimme [data-gm-plp] .gm-plp__pager-gap { min-width: 16px; font-size: 14px; }
  .gimme [data-gm-plp] .gm-plp__pager-arrow { width: 30px; height: 30px; }
  .gimme [data-gm-plp] .gm-plp__pager-summary { font-size: 13px; }
}

/* =============================================================================
   鎼滅储椤碉紙`/[lang]/search`锛? 鍒楄〃椤靛悓涓€濂楅鏋讹紙鐢ㄦ埛 2026-10-29 鎴浘锛夛細
     灞呬腑琛嚎鏍囬銆寋n} results for 鈥渰q}鈥濄€嶁啋 灞呬腑鎻忚竟鎼滅储妗嗭紙1px 澧ㄧ嚎銆佹斁澶ч暅鍦ㄥ乏锛夆啋 缁嗗垎闅旂嚎
     鈫?宸ュ叿鏉?/ 4 鍒?2:3 鍗＄墖缃戞牸 / 銆孲howing 1-n of N銆? Load more锛堝叏閮ㄥ鐢?`[data-gm-plp]` 閭ｅ绫伙級銆?   鈿狅笍 鍙崲鍛堢幇锛氭悳绱㈤〉鑷繁鐨勪笢瑗匡紙鎼滅储妗?/ 鐑棬鎼滅储 / 绌烘€?/ 0 鍛戒腑鎻愮ず锛変竴涓笉灏戯紝鍙槸鎺掕繘杩欏鐗堝紡閲屻€?   ========================================================================== */
.gimme [data-gm-search] :is(.gm-search__head, .gm-search__popular, .gm-search__divider, .gm-search__hint, .gm-search__no-results, .gm-search__crumbs) {
  max-width: calc(var(--gm-content) + 2 * var(--gm-gutter));
  margin-inline: auto;
  padding-inline: var(--gm-gutter);
}
.gimme [data-gm-search] .gm-search__head { padding-top: 40px; text-align: center; }
.gimme [data-gm-search] .gm-search__title {
  margin: 0;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
}
/* 鎼滅储妗嗭細鍙傜収绔欐槸**鎻忚竟鐭╁舰**锛堜笉鏄笅鍒掔嚎锛夛細1px 绾裤€佸乏鏀惧ぇ闀溿€?7px 鏂囨湰銆佸眳涓?560 瀹姐€?   2026-10-29锛堢敤鎴峰彛寰勶級锛氶粯璁よ竟妗?= **涓婚鑹?*锛坄--navy` 鍝佺墝妫?#5d2412锛夛紱**鎮仠 / 鑱氱劍鏀圭函榛?*锛?000锛夛紱
   骞朵笖**涓嶅厑璁稿嚭鐜颁换浣?focus ring**锛堣緭鍏ユ outline銆佷互鍙婂師鏉?focus-within 閭ｅ湀 inset 鎻忚竟閮藉垹鎺夛級
   鈥斺€?鑱氱劍鐨勮瑙夊弽棣堝彧闈犮€岃竟妗嗗彉榛戙€嶈繖涓€澶勶紝涓嶅啀鍙犱竴鍦堛€?*/
.gimme [data-gm-search] .gm-search__form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, 100%);
  height: 48px;
  margin: 24px auto 0;
  padding: 0 14px;
  border: 1px solid var(--navy);
  background: var(--white, #fff);
  outline: none;
  box-shadow: none;
  transition: border-color .2s ease;
}
.gimme [data-gm-search] .gm-search__form:hover,
.gimme [data-gm-search] .gm-search__form:focus-within {
  border-color: #000;
  box-shadow: none;
}
.gimme [data-gm-search] .gm-search__form svg { flex: none; }
.gimme [data-gm-search] .gm-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  box-shadow: none;
}
.gimme [data-gm-search] .gm-search__submit:focus,
.gimme [data-gm-search] .gm-search__submit:focus-visible {
  outline: none;
  box-shadow: none;
}
.gimme [data-gm-search] .gm-search__form input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--ink);
  outline: none;
  box-shadow: none;
}
/* 杈撳叆妗嗙殑 focus ring 褰诲簳鍏虫帀锛堟祻瑙堝櫒榛樿 outline + 鍏ㄥ眬 :focus-visible 閭ｆ潯閮芥嫤锛夛紝
   骞朵笖鎶?WebKit 鐨?focus-ring 棰滆壊涔熻鎴愰€忔槑锛孲afari 涓婁篃涓嶄細鍐掑嚭涓€鍦堛€?*/
.gimme [data-gm-search] .gm-search__form input:focus,
.gimme [data-gm-search] .gm-search__form input:focus-visible {
  outline: none;
  outline-width: 0;
  box-shadow: none;
  -webkit-focus-ring-color: transparent;
}
.gimme [data-gm-search] .gm-search__form input::placeholder { color: rgba(41, 33, 31, .5); }
.gimme [data-gm-search] .gm-search__form input::-webkit-search-cancel-button { display: none; }
/* 鍒嗛殧绾匡細鎼滅储妗嗕笅鏂逛竴鏉￠€氭爮锛堝唴瀹瑰锛夌粏绾匡紝涔嬪悗鍐嶅紑濮嬪伐鍏锋潯 */
.gimme [data-gm-search] .gm-search__divider { margin-top: 28px; border-top: 1px solid rgba(41, 33, 31, .18); }
/* 鐑棬鎼滅储锛氭垜浠悳绱㈤〉鐨勫姛鑳斤紝鎺掑湪鎼滅储妗嗕笅闈紙缁撴灉椤典笉鍗犲湴鏂癸紝鍙湪绌烘煡璇?/ 0 鍛戒腑鏃跺嚭鐜帮級 */
.gimme [data-gm-search] .gm-search__popular { margin-top: 20px; }
.gimme [data-gm-search] .gm-search__popular-heading {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(41, 33, 31, .6);
}
.gimme [data-gm-search] .gm-search__popular ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gimme [data-gm-search] .gm-search__popular a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(41, 33, 31, .35);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color .2s ease;
}
.gimme [data-gm-search] .gm-search__popular a:hover { border-color: var(--ink); }
/* 绌烘煡璇㈡彁绀?/ 0 鍛戒腑锛氬眳涓€佺暀鐧斤紝涓庡弬鐓х珯鐨勭┖鎬佽鎰熶竴鑷?*/
.gimme [data-gm-search] .gm-search__hint { margin: 40px auto; text-align: center; color: rgba(41, 33, 31, .7); font-size: 15px; }
.gimme [data-gm-search] .gm-search__no-results { padding-top: 48px; padding-bottom: 8px; text-align: center; }
.gimme [data-gm-search] .gm-search__no-results-title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.gimme [data-gm-search] .gm-search__no-results p { margin: 0; color: rgba(41, 33, 31, .7); font-size: 15px; }
.gimme [data-gm-search] .gm-search__no-results a { color: var(--ink); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) {
  .gimme [data-gm-search] .gm-search__head { padding-top: 24px; }
  .gimme [data-gm-search] .gm-search__title { font-size: 26px; }
  .gimme [data-gm-search] .gm-search__form { height: 46px; margin-top: 18px; }
}

/* =============================================================================
   404 椤碉紙gimme锛夛細鐓у弬鐓х珯 `a404`锛堝疄娴嬶細鏍囬 Fraunces 300 / 43.75px / -1.09px 瀛楄窛锛?   璇存槑 17px锛涙弿杈广€屽洖棣栭〉銆嶆寜閽?48px 楂樸€?px 涓婚妫曟弿杈癸紱鏁村潡 800 瀹藉眳涓紝椤靛ご涓?24px 璧凤級銆?   鎴戜滑 404 鍘熸湁鐨勫嚭鍙ｏ紙鎼滅储 / 鍏ㄩ儴鍟嗗搧 / 鐑棬绫荤洰 / 鐑棬闆嗗悎锛変竴涓笉灏戯紝鎺掑湪涓嬮潰锛?   鎼滅储妗嗙洿鎺ュ鐢ㄦ悳绱㈤〉閭ｅ `gm-search__form` 鐨偆銆?   ========================================================================== */
.gimme [data-gm-404] { padding: 24px 0 96px; }
.gimme [data-gm-404] .gm-404__hero {
  max-width: calc(800px + 2 * var(--gm-gutter));
  margin-inline: auto;
  padding-inline: var(--gm-gutter);
  text-align: center;
}
.gimme [data-gm-404] .gm-404__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(30px, 3.1vw, 44px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.gimme [data-gm-404] .gm-404__lead { margin: 8px 0 0; font-size: 17px; color: var(--ink); }
.gimme [data-gm-404] .gm-404__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 28px;
  padding: 0 24px;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 17px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.gimme [data-gm-404] .gm-404__cta:hover { background: var(--navy); color: #fff; }
.gimme [data-gm-404] .gm-404__find { margin-top: 56px; }
/* 鎼滅储妗嗗湪 404 閲岀揣璐磋鏄庡尯涓嬫柟锛堟悳绱㈤〉閭ｆ潯鑷甫 24px 涓婅竟璺濓紝杩欓噷鍘绘帀锛夈€?   鈿狅笍 2026-10-29 鐢ㄦ埛鍙ｅ緞銆孒5 杈撳叆妗嗛兘涓€鏁磋銆嶏細404 鐨?`.gm-404__find` 鏄暣琛屽鍣紙娌℃湁鍐呭瀹藉寘瑁咃級锛?   鑰?`.gm-search__form` 鐨?`width: min(560px, 100%)` 鍦ㄦ墜鏈轰笂灏辨槸 100% 瑙嗗彛瀹?鈬?杈撳叆妗嗛《鍒板睆骞曚袱杈广€?   杩欓噷鏀规垚銆岃鍙ｅ 鈭?涓や晶 gutter銆嶏紝鎵嬫満涓婁袱渚у悇鐣?20px銆?*/
.gimme [data-gm-404] .gm-search__form {
  width: min(560px, calc(100% - 2 * var(--gm-gutter)));
  margin: 0 auto;
}
.gimme [data-gm-404] .gm-404__links { margin: 20px auto 0; text-align: center; }
.gimme [data-gm-404] .gm-404__all { color: var(--ink); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.gimme [data-gm-404] .gm-404__group { margin-top: 40px; }
/* 鍒嗙粍鏍囬锛圥OPULAIRE CATEGORIE脣N / POPULAIRE COLLECTIES锛夛細璺熺珯鍐呭叾瀹冨皬鏍囩鍚屼竴濂?   锛堥〉鑴氭爮鐩爣棰樼殑瑙勬牸锛欼nstrument Sans 13.2 / .05em / 澶у啓锛夛紝涓嶈鐢?Fraunces 鈥斺€?鐢ㄦ埛 2026-10-29 鍙ｅ緞銆屽瓧浣撲笉瀵广€嶃€?*/
.gimme [data-gm-404] .gm-404__group .gm-search__popular-heading {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--sans);
  font-size: 13.2px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(41, 33, 31, .6);
  text-align: left;
}
.gimme [data-gm-404] .gm-404__count { margin-left: 6px; color: rgba(41, 33, 31, .55); font-size: 13px; }
@media (max-width: 1023px) {
  .gimme [data-gm-404] { padding: 16px 0 72px; }
  .gimme [data-gm-404] .gm-404__find { margin-top: 40px; }
}

/* =============================================================================
   个人中心（account/layout.tsx 已登录两栏外壳 + 各子页）—— 2026-10-30 用户口径「太挤、和主题不符」：
     · 外壳与页头 / 页脚同一栅格（--brand-max = 1400 + 两侧 24），不再收成 1028 居中；
       PC 内容列放开各页的 max-w-[880px]，右缘与页头工具图标对齐（表单控件自身仍有定宽，不会被拉宽）；
     · 左栏 264px、栏间 96px；菜单 = 2px 墨线起头 + 1px 分隔的 17px 列表（参照站目录 / 抽屉口径），
       当前项品牌棕 + 左侧短横线滑入，不再是灰底圆角块；Sign out 改成下划线文字链接；
     · 页标题 Fraunces 大写（与列表页 gm-plp__title 同语言），段标题 25px + 2px 墨线（同 mini 购物车标题）；
     · 段落去掉细边框盒子（每段 = 标题线 + 行列表），段间距拉开；状态徽标直角。
   账户区原有规则（ACCT_SCOPE / account.css）在 @layer 里，本文件未分层 ⇒ 这里直接压过，其它主题零影响。
   ========================================================================== */
.gimme [data-account-scope] [data-account-shell] {
  max-width: var(--brand-max);
  padding: 56px var(--gm-gutter) 120px;
  color: var(--ink);
}
.gimme [data-account-scope] h1 {
  margin-bottom: 12px;
  font-size: 40px;
  line-height: 1.1;
  text-transform: uppercase;
}
.gimme [data-account-scope] h1 + p { margin-bottom: 28px; color: var(--muted); font-size: 17px; }

/* 段落（SectionCard）：去盒子，标题 + 2px 墨线 + 行列表 */
.gimme [data-account-scope] [data-account-card] {
  border: 0;
  background: transparent;
  padding: 0;
}
.gimme [data-account-scope] [data-account-card] + [data-account-card] { margin-top: 40px; }
.gimme [data-account-scope] [data-account-card] > header {
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.gimme [data-account-scope] [data-account-card] > header h2 { font-size: 25px; line-height: 1.2; }
.gimme [data-account-scope] [data-account-card] > header > span { font-size: 15px; }
.gimme [data-account-scope] [data-account-card] > header + :not(ul) { margin-top: 28px; }
.gimme [data-account-scope] [data-account-row] { padding-block: 22px; }
.gimme [data-account-scope] [data-account-row] a:first-child,
.gimme [data-account-scope] [data-account-row] > div > a { font-size: 17px; }
.gimme [data-account-scope] [data-account-empty] { padding-block: 40px; }
/* 优惠券页分组标题（.card-group-title，无层契约类）：与 SectionCard 段标题同一口径 */
.gimme [data-account-scope] .card-group-title {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  font-size: 25px;
  line-height: 1.2;
}
.gimme [data-account-scope] .status-badge { border-radius: 0; }
/* 输入框描边（2026-10-30 用户口径「个人中心输入框外边框保持灰色，聚焦时改为棕色」）：
   全站 gimme 规则（文件顶部 `[class*="border-[#d9d9d9]"]`）把描边常态改成了棕 45%，个人中心这里压回灰
   （常态 #d9d9d9 / hover #b3b3b3，同账户区原口径）；`:not(:focus)` ⇒ 聚焦仍走顶部那条棕色描边 + 1px 外描边。
   手机号外层 `.sf-phone` 不带该类（灰边来自父级 ACCT_SCOPE），单独写同一口径；校验红边（`data-phone-invalid=true`）不覆盖。 */
.gimme [data-account-scope] [class*="border-[#d9d9d9]"]:not(:focus),
.gimme [data-account-scope] .sf-phone:not([data-phone-invalid="true"]) { border-color: #d9d9d9; }
.gimme [data-account-scope] [class*="border-[#d9d9d9]"]:not(:focus):not([readonly]):hover,
.gimme [data-account-scope] .sf-phone:not([data-phone-invalid="true"]):not(:focus-within):hover { border-color: #b3b3b3; }
.gimme [data-account-scope] .sf-phone:not([data-phone-invalid="true"]):focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}

/* 状态徽标（2026-10-30 用户：「支付状态角标不明显」）：通用色板 neutral = 白底浅灰字细灰边，在白页上几乎隐形。
   走 tailwind.css 预留的 `--brand-badge-*` 令牌换成**实心浅底 + 深色字**（边 = 底，看起来是色块），
   neutral（如 PULLED）用品牌棕字 + 暖米底；语义色阶保持（绿=已付 / 蓝=已发 / 琥珀=退款 / 灰=取消）。
   对比度：各组深色字 vs 浅底均 > 7:1。字重加到 600、字距放开，小尺寸下也读得清。 */
.gimme {
  --brand-badge-neutral-bg: #f3e9e2;   --brand-badge-neutral-line: #f3e9e2;   --brand-badge-neutral-ink: #5d2412;
  --brand-badge-pending-bg: #f7eedb;   --brand-badge-pending-line: #f7eedb;   --brand-badge-pending-ink: #6b4a00;
  --brand-badge-paid-bg: #e3f0e7;      --brand-badge-paid-line: #e3f0e7;      --brand-badge-paid-ink: #14512f;
  --brand-badge-shipped-bg: #e4ecf5;   --brand-badge-shipped-line: #e4ecf5;   --brand-badge-shipped-ink: #1b4a7a;
  --brand-badge-refunded-bg: #fbeedd;  --brand-badge-refunded-line: #fbeedd;  --brand-badge-refunded-ink: #7a3e00;
  --brand-badge-cancelled-bg: #ececec; --brand-badge-cancelled-line: #ececec; --brand-badge-cancelled-ink: #4a4a4a;
}
.gimme .status-badge {
  padding: 4px 10px;
  border-radius: 0;
  font-weight: 600;
  letter-spacing: .06em;
}
.gimme .status-badge[data-status="accent"] { border-color: var(--navy); background: var(--navy); color: #fff; }

/* 订单详情（account/orders/[orderNo]）商品行：首行原是 pt-0 紧贴标题墨线；缩略图 56 + 圆角细边、14px 粗体标题都偏挤 */
.gimme [data-account-scope] [data-od-items] > li { gap: 20px; padding-block: 24px; }
.gimme [data-account-scope] [data-od-items] [data-item-thumb] {
  width: 88px;
  border: 0;
  border-radius: 0;
  background: var(--brand-surface-2, #f5f5f5);
}
.gimme [data-account-scope] [data-order-item] > div > p:first-child { font-size: 17px; line-height: 1.4; font-weight: 400; }
.gimme [data-account-scope] [data-order-item] > div > p:nth-child(2) { margin-top: 6px; font-size: 15px; }
.gimme [data-account-scope] [data-order-item] > span:last-child { font-size: 17px; }

/* 左栏菜单（PC）：移动端仍是可折叠开关 + 面板，只跟随直角 */
@media (min-width: 1024px) {
  .gimme [data-account-scope] [data-account-shell] > div { gap: 96px; }
  .gimme [data-account-scope] [data-account-content] { max-width: none; }
  .gimme [data-account-nav] { width: 264px; }
  .gimme [data-account-nav] ul { gap: 0; border-top: 2px solid var(--ink); }
  .gimme [data-account-nav] li { border-bottom: 1px solid var(--line); }
  .gimme [data-account-nav] li > a {
    position: relative;
    min-height: 56px;
    padding: 0;
    background: none;
    color: rgba(41, 33, 31, .7);
    font-size: 17px;
    transition: color .2s ease, padding-left .35s cubic-bezier(.33, 0, 0, 1);
  }
  .gimme [data-account-nav] li > a:hover { background: none; color: var(--ink); }
  .gimme [data-account-nav] li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 2px;
    background: var(--navy);
    transition: width .35s cubic-bezier(.33, 0, 0, 1);
  }
  .gimme [data-account-nav] li > a[aria-current="page"] { padding-left: 22px; color: var(--navy); font-weight: 500; }
  .gimme [data-account-nav] li > a[aria-current="page"]::before { width: 12px; }
  .gimme [data-account-nav] ul + div { margin-top: 20px; padding-top: 0; border-top: 0; }
  .gimme [data-account-nav] ul + div .ui-btn {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .gimme [data-account-nav] ul + div .ui-btn:hover { color: #b24523; }
}
@media (prefers-reduced-motion: reduce) {
  .gimme [data-account-nav] li > a,
  .gimme [data-account-nav] li > a::before { transition: none; }
}
/* H5 菜单（2026-10-30 用户：「h5 的导航栏切换优化下」）：通用版是「圆底图标 + 当前页名 ⌄」开关 + 下推卡片面板，
   切一次页要点两下、面板把正文整体顶下去，观感也是 Shopify 风。gimme 改成**横向标签条**：
     · 开关隐藏，面板常显（覆盖收起态的 invisible / grid-rows-0fr / opacity-0）；
     · 5 个入口一行平铺，15px，当前项墨色 + 底部 2px 品牌棕线（宽度过渡）；放不下 ⇒ 横向滑动、右缘渐隐提示，
       AccountSidebar 会把当前项滚到中间（只在横向溢出时生效）；
     · 整条贴满屏宽（抵消外壳 20px 侧留白），底部 1px 分隔线；Sign out 竖线隔开放末尾，文字链接。
   DOM 仍是同一份 [data-account-nav]（Sign out 只有一个，验收脚本口径不变）。 */
@media (max-width: 1023px) {
  .gimme [data-account-nav] { margin-bottom: 28px; }
  .gimme [data-account-menu-toggle] { display: none; }
  /* 列宽钉成 minmax(0,1fr)：grid 隐式列的最小宽是内容宽 ⇒ 不钉的话标签条会把整页撑出横向滚动 */
  .gimme [data-account-nav] #acct-menu { grid-template-rows: 1fr; grid-template-columns: minmax(0, 1fr); visibility: visible; opacity: 1; }
  /* 折叠动画用的 overflow:hidden 会裁掉下面贴满屏宽的负边距 */
  .gimme [data-account-nav] #acct-menu > div { min-width: 0; overflow: visible; }
  .gimme [data-account-nav] [data-account-menu-list] {
    display: flex;
    align-items: stretch;
    margin: 0 -20px;
    padding: 0 20px;
    overflow-x: auto;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .gimme [data-account-nav] [data-account-menu-list]::-webkit-scrollbar { display: none; }
  .gimme [data-account-nav] [data-account-menu-list] ul { flex-direction: row; flex-shrink: 0; gap: 24px; }
  .gimme [data-account-nav] [data-account-menu-list] li > a {
    position: relative;
    min-height: 48px;
    padding: 0;
    gap: 0;
    background: none;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    transition: color .2s ease;
  }
  .gimme [data-account-nav] [data-account-menu-list] li > a > span:not(.min-w-0) { display: none; }
  .gimme [data-account-nav] [data-account-menu-list] li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -1px;
    height: 2px;
    background: var(--navy);
    transition: left .35s cubic-bezier(.33, 0, 0, 1), right .35s cubic-bezier(.33, 0, 0, 1);
  }
  .gimme [data-account-nav] [data-account-menu-list] li > a[aria-current="page"] { color: var(--ink); font-weight: 500; }
  .gimme [data-account-nav] [data-account-menu-list] li > a[aria-current="page"]::after { left: 0; right: 0; }
  /* Sign out 与标签同高 48（否则条被撑高、当前项底线离开底部分隔线）；竖分隔线用伪元素画在中段 */
  .gimme [data-account-nav] [data-account-menu-list] ul + div {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0 0 0 24px;
    padding: 0 8px 0 24px;
    border: 0;
  }
  .gimme [data-account-nav] [data-account-menu-list] ul + div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: var(--line);
  }
  .gimme [data-account-nav] [data-account-menu-list] ul + div .ui-btn {
    min-height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .gimme [data-account-nav] [data-account-menu-list] li > a::after { transition: none; }
}
@media (max-width: 1023px) {
  .gimme [data-account-scope] [data-account-shell] { padding: 24px 20px 80px; }
  .gimme [data-account-scope] h1 { font-size: 30px; }
  .gimme [data-account-scope] [data-account-card] + [data-account-card] { margin-top: 32px; }
  .gimme [data-account-scope] [data-account-card] > header h2 { font-size: 22px; }
}

/* =============================================================================
   mini 璐墿杞︼紙CartDrawer锛? 鍙傜収绔?quick cart锛堢敤鎴?2026-10-29 鎴浘锛屽疄娴嬪€兼潵鑷?studiogimme.com 鐨?   `.quick-cart__*` 璁＄畻鏍峰紡锛夛細
     路 钂欏眰锛氱函榛?70%锛坄--color-overlay: rgba(0,0,0,.7)`锛夛紝鏃犳瘺鐜荤拑锛?     路 PC锛氶潰鏉?460px锛坄--flyout-width`锛夈€佸唴瀹瑰乏鍙?28px锛坄--spacing-7`锛夛紱绉诲姩绔部鐢?20px锛?     路 鏍囬锛欶raunces 25px + 浠舵暟 `<sup>`锛?3px / 宸﹁窛 8px锛屼欢鏁扮敱 CartDrawer 鐨?themeCartChrome 鍐冲畾锛夛紱
     路 琛岋細鏍囬 17 / 鍙樹綋 14锛堟棤鑳跺泭搴曪級/ 浠锋牸 15锛涜涓婁笅 28px銆佽闂?1px 鍒嗛殧绾匡紱
     路 footer锛?px 澧ㄨ壊涓婅竟绾匡紙`--color-text`锛? 涓?16 / 涓?28锛涘皬璁?21px锛坒s-body-200锛夈€?       绋庤垂璇存槑 15px銆佺粨绠楁寜閽?48px / 17px銆?   鏈富棰樹箣澶栫殑鎶藉眽锛坙ume 绛夛級瀹屽叏涓嶅彈褰卞搷銆?   ========================================================================== */
.gimme .cart-drawer-panel { color: var(--ink); font-family: var(--sans); }

/* 钂欏眰锛氶粦鑹?70%锛堝幓鎺夐€氱敤鐨偆鐨勬瘺鐜荤拑 鈥斺€?鍙傜収绔欐槸绾壊灞傦級 */
.gimme .cart-drawer-scrim {
  background: rgba(0, 0, 0, .7);
  backdrop-filter: none;
}

/* 椤堕儴宸﹀彸 20px = 鍒楄〃琛?/ 搴曢儴缁撶畻鍖虹殑 px-5锛屼笁娈靛乏鍙冲榻愶紙鍒嗛殧绾夸篃鍙湪杩?20px 涔嬪唴锛汸C 瑙佷笅闈?1024 鏂偣锛?*/
.gimme .cart-drawer-panel > header { margin: 0 20px; padding-inline: 0; border-bottom: 2px solid var(--ink); }
/* 鍏抽棴閽細44px 鐐瑰嚮鍖洪噷 脳 灞呬腑 鈬?鎸夐挳鍙崇Щ 12px锛岃 脳 鐨勫彸缂樹篃钀藉湪鍐呰竟璺濊繖鏉＄嚎涓娿€?   PC 鏂偣閲屽啀鏀舵垚鍙傜収绔欑殑 32 脳 28锛堣涓嬫柟 media 鍧楋級鈥斺€?鍚﹀垯 44px 鐨勬寜閽細鎶?header 鎾戦珮 16px銆?*/
.gimme .cart-drawer-panel > header .ghost-icon--close { margin-right: -12px; }
.gimme .cart-drawer-panel > header h2 { font-family: var(--display); font-size: 25px; line-height: 1.1; font-weight: 300; letter-spacing: -0.025em; }
/* 浠舵暟涓婃爣锛氬弬鐓х珯 `h2 sup`锛?3px銆乵argin-left 8px锛?*/
.gimme .cart-drawer-panel > header h2 sup {
  margin-left: 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  vertical-align: super;
}
.gimme .cart-drawer-panel img { background: var(--white); }

/* 琛屽唴瀛楀彿 = 鍙傜収绔欙紙鍟嗗搧鍚?17 / 鍙樹綋 14 涓斿彧鏄伆瀛椼€佷环鏍?15 甯歌浣擄級 */
.gimme .cart-drawer-panel [data-cart-line-title] { font-size: 17px; line-height: 1.5; }
.gimme .cart-drawer-panel [data-cart-line-variant] {
  margin-top: 4px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  opacity: .6;
}
.gimme .cart-drawer-panel [data-cart-line-price] { font-size: 15px; font-weight: 400; }
/* 銆屽崟浠?脳 浠舵暟銆嶉偅琛岋紙绾暟瀛楄ˉ鍏咃級璺熺潃缂╁埌 13px */
.gimme .cart-drawer-panel [data-cart-line-price] ~ span { font-size: 13px; }
/* 鏁伴噺鍔犲噺 = 鍙傜収绔?quick cart 鐨?*瀹炵嚎鐗?*锛?px 鍝佺墝妫曟弿杈规柟妗嗭紙鈮?8 脳 42锛夈€佺洿瑙掞紝鈭?/ 鏁板瓧 / + 涓夋牸锛?   鎶藉眽鐢ㄧ殑鏄?QuantityStepper 鐨?sm 娆撅紙鏃犳銆佸渾褰㈠菇鐏甸挳锛夛紝杩欓噷鍙湪 gimme 鎶藉眽閲屽姞妗嗗苟鍘绘帀鍦嗗簳 / 缂╂斁鍙嶉銆?   閿洏鐒︾偣杞粨淇濈暀銆?*/
.gimme .cart-drawer-panel [role="group"] {
  height: 42px;
  gap: 0;
  border: 1px solid var(--navy);
  border-radius: 0;
  background: #fff;
}
.gimme .cart-drawer-panel [role="group"] button {
  width: 32px;
  height: 100%;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  transform: none;
}
.gimme .cart-drawer-panel [role="group"] button:not(:disabled):hover,
.gimme .cart-drawer-panel [role="group"] button:not(:disabled):active { background: transparent; transform: none; }
.gimme .cart-drawer-panel [role="group"] input {
  width: 32px;
  height: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 17px;
}
.gimme .cart-drawer-panel [role="group"] input:hover,
.gimme .cart-drawer-panel [role="group"] input:focus { background: transparent; box-shadow: none; }
/* 鈹€鈹€ footer锛堝弬鐓х珯 `.quick-cart__footer-inner`锛夛細2px 澧ㄧ嚎 + 涓?16 / 涓?28锛涗笂鏂规煍鍜岄槾褰变繚鐣?鈹€鈹€
   鈿狅笍 绾挎槸**鍐呯缉鐨?*锛氬弬鐓х珯閭ｆ潯 2px 绾挎寕鍦?footer-inner 涓婏紝宸﹀彸鍚勮鍑?28px锛堝拰 header 閭ｆ潯瀵归綈锛夛紝
   涓嶆槸鏁存潯閫氭爮 鈥斺€?鎵€浠ョ敾鍦?footer 鐨?::before 涓婏紝footer 鑷韩杈规娓呮帀銆?   鈿狅笍 2026-10-29 鐢ㄦ埛鏂板彛寰勶紙鎴浘锛夋妸杩欐潯绾胯鍥炴潵浜?鈥斺€?鍓嶄竴澶┿€宖ooter 鏈夋牴榛戣壊鐨勭嚎锛岀Щ闄ゃ€嶄綔搴熴€?*/
/* 2026-10-29 用户口径：gimme mini 购物车 footer 的阴影去掉（上方只留 2px 墨线）。
   基础皮肤在 tailwind.css 里给了 `box-shadow: 0 -10px 24px -16px rgba(0,0,0,.18)`（通用主题保留）。 */
.gimme .cart-drawer-panel .cart-drawer-foot { position: relative; border-top: 0; box-shadow: none; }
.gimme .cart-drawer-panel .cart-drawer-foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  border-top: 2px solid var(--ink);
  pointer-events: none;
}
/* 鎶樻墸鍏ュ彛鍦?footer 椤堕儴锛氬畠鑷甫涓€鏉?1px 涓婅竟绾匡紝浼氳窡 footer 鐨?2px 澧ㄧ嚎鍙犳垚鍙岀嚎 鈬?鍘绘帀瀹冭嚜宸辩殑 */
.gimme .cart-drawer-panel [data-drawer-discount] { border-top: 0; padding-top: 0; }
.gimme .cart-drawer-panel [data-drawer-discount] > button { font-size: 15px; }
/* 灏忚琛岋細涓や晶閮?21px 甯歌浣撳ⅷ鑹诧紙鍙傜収绔?h3 / span 閮芥槸 fs-body-200锛?*/
.gimme .cart-drawer-panel [data-cart-subtotal-row] { margin-top: 12px; }
.gimme .cart-drawer-panel [data-cart-subtotal-row] > :first-child { font-size: 21px; line-height: 1.5; color: var(--ink); }
.gimme .cart-drawer-panel [data-cart-subtotal-row] > :last-child { font-size: 21px; line-height: 1.5; font-weight: 400; }
.gimme .cart-drawer-panel [data-drawer-duties] { font-size: 15px; line-height: 1.5; }
/* 缁撶畻鎸夐挳 = 鍙傜収绔?48px 楂?/ 17px锛堟湰绔欑殑灏忛攣鍥炬爣淇濈暀锛屽昂瀵歌窡鐫€璧帮級 */
.gimme .cart-drawer-panel [data-cart-checkout] { margin-top: 20px; min-height: 48px; font-size: 17px; }
.gimme .cart-drawer-panel [data-cart-view] { font-size: 13px; }

@media (min-width: 1024px) {
  /* PC锛氶潰鏉?460锛堝弬鐓х珯 --flyout-width锛? 鍐呭宸﹀彸 28锛?-spacing-7锛夛紝涓庣Щ鍔ㄧ 20 鍒嗗紑鍐?*/
  .gimme .cart-drawer-panel { max-width: 460px; }
  .gimme .cart-drawer-panel > header { margin: 0 28px; padding: 28px 0 20px; }
  /* 鍏抽棴閽敹鎴愬弬鐓х珯鐨?32 脳 28锛堝浘鏍?20 灞呬腑锛夛紝鍚﹀垯 44px 浼氭妸 header 鎾戦珮锛涘懡涓尯浠?鈮?28px */
  .gimme .cart-drawer-panel > header .ghost-icon--close { width: 32px; height: 28px; margin-right: -2px; }
  .gimme .cart-drawer-panel .cart-line__inner > div { padding: 28px; }
  .gimme .cart-drawer-panel .cart-drawer-foot { padding: 16px 28px 28px; }
  /* footer 鍒嗛殧绾胯窡 header 涓€鏍风缉杩?28px锛堜笉鏄€氭爮锛?*/
  .gimme .cart-drawer-panel .cart-drawer-foot::before { left: 28px; right: 28px; }
  /* 琛岄棿鍒嗛殧绾胯窡鐫€缂╄繘鍒?28px锛堥€氱敤鏍峰紡鏄乏鍙冲悇 20px锛?*/
  .gimme .cart-drawer-panel .cart-line + .cart-line::before { left: 28px; right: 28px; }
}

/* =============================================================================
   鎼滅储 = 鍙傜収绔?quick search锛堢敤鎴?2026-10-29 鎴浘锛夛細**宸︿晶鎶藉眽**
   瀹炴祴鍊硷紙studiogimme.com `.quick-search__*` 璁＄畻鏍峰紡锛夛細
     路 闈㈡澘璐村乏銆?60px锛?-flyout-width锛夈€佹暣灞忛珮锛涜挋灞傞粦鑹?70%锛?-color-overlay锛夛紱
     路 鍏抽棴 脳 30px 鍥炬爣锛屽湪鍐呭鍙充笂 28/28锛堝懡涓尯浠?44锛夛紱鎼滅储鏍忓乏鍙?28銆佷笅鍒掔嚎 2px 澧ㄨ壊锛?       input 17px / 44 楂橈紙padding 12锛夈€佹斁澶ч暅 20px锛?     路 缁撴灉鍖?padding 36 / 28銆佸崟鍒楀爢鍙狅細灏忔爣棰?17px 甯歌鍗婇€忔槑 + 1px 鍝佺墝妫曚笅鍒掔嚎锛?       鍟嗗搧 2 鍒楀眳涓崱锛堟爣棰?17 / 浠锋牸 15锛夛紝"鏌ョ湅鍏ㄩ儴" = 妫曡壊鏁村鎸夐挳锛?8 楂?/ 17px锛夈€?   鈿狅笍 鍙湁 鈮?024 鍙樻娊灞夛紱绉诲姩绔部鐢ㄥ師鏉ョ殑椤堕儴涓嬫粦鍏ㄥ闈㈡澘锛堝弬鐓х珯绉诲姩绔篃鏄笅婊戦潰鏉匡級銆?   ========================================================================== */
.gimme [data-sf-search-scrim] { background: rgba(0, 0, 0, .7); }

/* 搴曢儴銆屾煡鐪嬪叏閮?N 鏉＄粨鏋溿€? 鍙傜収绔?.quick-search__footer锛氱櫧搴曞惛搴曟潯 + 妫曡壊鏁村鎸夐挳锛?8 楂?/ 17px锛夈€?   鏀惧湪婊氬姩鍖轰箣澶?鈬?缁撴灉鎬庝箞婊氶兘鍚稿湪闈㈡澘搴曢儴锛涚Щ鍔ㄧ鐨?gimme 涓嬫粦闈㈡澘鍚屾牱鐢ㄥ畠锛堝叾瀹冧富棰樹笉娓叉煋杩欏潡锛夈€?*/
.gimme [data-sf-search-panel] [data-sf-search-footer] {
  flex-shrink: 0;
  padding: 16px 20px max(16px, env(safe-area-inset-bottom));
  background: var(--white);
  box-shadow: 0 -14px 14px var(--white);
}
.gimme [data-sf-search-panel] [data-sf-search-view-all] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-size: 17px;
}
.gimme [data-sf-search-panel] [data-sf-search-view-all]:hover { color: #fff; }
.gimme [data-sf-search-panel] [data-sf-search-view-all] span { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 1024px) {
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] { box-shadow: 24px 0 60px rgba(0, 0, 0, .14); }
  /* 鍏抽棴閽細鍙傜収绔?脳 鍥炬爣锛堝懡涓尯 28銆佽创鍐呭鍙充笂 28/28锛涙偓鍋滀笉缁欏簳鑹诧紝鍙傜収绔欐病鏈夛級 */
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-close] { border-radius: 0; }
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-close]:hover { background: transparent; }
  /* 鎼滅储鏍忥細2px 澧ㄨ壊涓嬪垝绾?+ 宸﹀彸 28锛堝弬鐓х珯 .quick-search__bar-inner锛?*/
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-form] > div {
    gap: 0;
    padding-bottom: 0;
    border-bottom: 2px solid var(--ink);
  }
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-form] > div > span { color: var(--ink); }
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-form] > div > span svg { width: 20px; height: 20px; }
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-input] {
    height: 44px;
    padding: 0 12px;
    font-size: 17px;
    line-height: 1.2;
  }
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-input]::placeholder { opacity: .5; }

  /* 缁撴灉鍖猴細鍗曞垪锛堝師鏉?鈮?024 鏄乏鍙充袱鏍忥級+ 鍙傜収绔欏唴杈硅窛 36 / 28 */
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-results] {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 0;
    padding: 36px 28px 0;
  }
  /* 灏忔爣棰橈細17px 甯歌銆佸崐閫忔槑銆?px 鍝佺墝妫曚笅鍒掔嚎锛堝弬鐓х珯 .quick-search__header锛?*/
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] :is([data-sf-suggest-heading], [data-sf-popular-heading], [data-sf-panel-products-heading]) {
    margin: 0 0 20px;
    padding-bottom: 4px;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    opacity: .6;
    border-bottom: 1px solid var(--navy);
  }
  /* 鑱旀兂 / 鐑悳鏉＄洰锛?7px锛堝弬鐓х珯 result 琛岋級 */
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] :is([data-sf-suggest-item], [data-sf-popular-item]) { font-size: 17px; }
  /* 鍟嗗搧缃戞牸锛? 鍒椼€佸眳涓崱锛堝弬鐓х珯 50fr 50fr + text-align:center锛?*/
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-grid] a { text-align: center; }
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-grid] a > span:first-child { margin-bottom: 16px; }
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-grid] img { border-radius: 0; }
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-grid] a > span:nth-of-type(2) { font-size: 17px; }
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-grid] a > span:nth-of-type(3) { font-size: 15px; }
  /* 搴曢儴鎸夐挳鏉★細妗岄潰宸﹀彸鍥炲埌 28锛堝弬鐓х珯 --spacing-7锛涚Щ鍔ㄧ 20 鐨勬牱寮忚涓婇潰鐨勯€氱敤鍧楋級 */
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-footer] { padding: 20px 28px 24px; }
  /* 0 鍛戒腑鎻愮ず锛氳窡缁撴灉鍖哄悓涓€鏉″乏鍙?28 */
  .gimme [data-sf-search-panel][data-sf-search-variant="drawer"] [data-sf-search-no-results] { padding: 0 28px; }
}

/* =============================================================================
   缁撶畻椤碉紙CheckoutChrome + CheckoutView锛?   鍏ㄥ眬鐨偆 styles/checkout-shopify.css 鎶婃墍鏈変富棰樼殑缁撶畻椤电粺涓€鎴?Shopify 椋庢牸锛堢郴缁熷瓧浣撱€佽摑鑹蹭富鎸夐挳 / 閾炬帴 /
   閫変腑鎬併€?px 鍦嗚锛岃鍒欏甫 !important锛夈€俫imme 鍦ㄨ繖閲?*鍚屽己搴︺€侀珮涓€绾ч€夋嫨鍣?*閫愭潯瑕嗙洊鎴愶細Instrument Sans銆?   Fraunces 灏忔爣棰樸€佸搧鐗屾锛堥摼鎺?/ 涓绘寜閽?/ 鑱氱劍 / 閫変腑鎻忚竟 + 娴呮搴曪級銆佸叏閮ㄧ洿瑙掋€傚彸鏍?#fafafa 鐏板簳涓庣増寮忎繚鎸佷笉鍙樸€?   ========================================================================== */
.gimme [data-checkout-header] { background: var(--white); border-bottom-color: #dfdfdf !important; }
.gimme .checkout-scope {
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif !important;
  color: var(--ink);
}
.gimme .checkout-scope :is(h1, h2, h3, h4, .font-display, [data-group-title]) {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
.gimme .checkout-scope a { color: var(--navy) !important; }
.gimme .checkout-scope a:hover { color: #b24523 !important; }
/* 鎸夐挳鍨嬮摼鎺ワ紙濡傜┖璐墿杞︾殑 Continue shopping锛夛細涓婁竴鏉′細鎶婂畠鏌撴垚妫曞瓧鍘嬫搴?鈬?淇濇寔鐧藉瓧 */
.gimme .checkout-scope a.ui-btn[data-variant="primary"],
.gimme .checkout-scope a.ui-btn[data-variant="primary"]:hover { color: #fff !important; }
.gimme .checkout-scope :is([data-continue-button], button[type='submit']) {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  border-radius: 0 !important;
}
.gimme .checkout-scope :is([data-continue-button], button[type='submit']):hover { background: #b24523 !important; border-color: #b24523 !important; }
.gimme .checkout-scope :is(input:not([type='radio']):not([type='checkbox']), select, textarea, .sf-phone, [data-billing-fields] input) {
  border-radius: 0 !important;
  color: var(--ink) !important;
}
.gimme .checkout-scope :is(input:not([type='radio']):not([type='checkbox']), select, textarea, [data-billing-fields] input):focus,
.gimme .checkout-scope .sf-phone:focus-within {
  border-color: var(--navy) !important;
  box-shadow: inset 0 0 0 1px var(--navy) !important;
}
.gimme .checkout-scope :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--navy); }
/* 二次确认（Review）面板每行右侧的「Change」：CheckoutView 写死 Shopify 蓝 text-[#1773b0] ⇒ 品牌棕（hover 同全站链接 #b24523） */
.gimme .checkout-scope [data-review-panel] button[class*="text-[#1773b0]"] { color: var(--navy) !important; transition: color .2s ease; }
.gimme .checkout-scope [data-review-panel] button[class*="text-[#1773b0]"]:hover { color: #b24523 !important; }
/* 閰嶉€?/ 璐﹀崟 / 鏀粯鏂瑰紡锛氱洿瑙掞紱閫変腑 = 妫曟弿杈?+ 娴呮搴曪紙Shopify 鍘熶负钃濇弿杈?+ #f0f5ff锛?*/
.gimme .checkout-scope :is([data-payment-methods] label, [data-shipping-list] label, [data-shipping-list] [data-shipping-row], [data-shipping-methods] label, [data-billing-choices] label) {
  border-radius: 0 !important;
}
.gimme .checkout-scope :is([data-payment-methods] label, [data-shipping-methods] label, [data-billing-choices] label):has(input:checked),
.gimme .checkout-scope :is([data-shipping-list] label:has(input:checked), [data-shipping-list] [data-shipping-row][data-active='true']) {
  background: #f8f1ee !important;
  border-color: var(--navy) !important;
  box-shadow: inset 0 0 0 1px var(--navy) !important;
  outline-color: var(--navy) !important;
}
.gimme .checkout-scope [data-checkout-payment-element] :is(.adyen-checkout__payment-method, .adyen-checkout__payment-method--selected) {
  border-radius: 0 !important;
}
.gimme .checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--selected {
  background: #f8f1ee !important;
  border-color: var(--navy) !important;
  box-shadow: inset 0 0 0 1px var(--navy) !important;
  outline-color: var(--navy) !important;
}

/* 璐墿杞﹂〉锛堟湁鍟嗗搧鏃讹級锛欳artView 鑷甫 1076px 涓婇檺 鈬?鏀惧紑鍒板唴瀹瑰尯 1400锛堜笌椤靛ご / 鍒楄〃鍚屼竴宸︾紭锛夛紱绌鸿喘鐗╄溅鍗＄墖浠嶅眳涓獎鍗?*/
.gimme [data-cart-scope]:has([data-cart-cols]) { max-width: none; }
.gimme [data-cart-cols] > div:first-child { max-width: none; }
@media (min-width: 1024px) {
  .gimme [data-cart-summary] { width: 400px; }
}

/* =============================================================================
   浜岀骇绫荤洰 = 鍙傜収绔欙細**椤甸潰閬僵 + 鍗曞垪鍒楄〃**锛堢敤鎴?2026-10-28 鎴浘锛?   路 鍒楄〃锛氱櫧搴曘€?px 澧ㄨ壊鎻忚竟銆佺洿瑙掋€佹棤闃村奖锛屽乏缂樺榻愪竴绾ч」锛屼笂缂樿创椤靛ご搴曪紱17px 甯歌锛屾偓鍋滀笅鍒掔嚎锛?   路 閬僵锛氫竴绾ч」鎮仠 / 閿洏鑱氱劍锛堜笅鎷夋墦寮€锛夋椂锛岄〉澶翠互涓嬫暣椤电洊涓€灞傚崐閫忔槑鏆楄壊锛堜笉鎸＄偣鍑伙細pointer-events:none锛夈€?     绾?CSS锛歨eader `::after` 鏄竴涓?*閾烘弧瑙嗗彛鐨勫浐瀹氬眰**锛堣鏈枃浠朵笅鏂广€屼簩绾ц彍鍗曡挋灞傘€嶅潡锛氫笉鑳藉啀鐢?     `position:absolute; top:100%; height:100vh`锛岄偅浼氭妸鏂囨。婊氬姩楂樺害鎾戝ぇ锛夛紱涓庝笅鎷夊悓涓€涓紑鍚堟潯浠?     锛坄:has(group 鎮仠/鑱氱劍)`锛夛紝鏈夊瓙椤圭殑涓€绾ч」鎵嶈Е鍙戯紙涓嬫媺 ul 鏄?`[data-sf-nav-node]` 鐨勭洿鎺ュ瓙鍏冪礌锛?     鈿狅笍 `:has()` 閲屼笉鑳藉啀宓?`:has()`锛屽祵浜嗘暣鏉¤鍒欎細琚涪寮冿級銆?   StoreHeader 鐨?stacked 鐗堝紡宸插浐瀹氫负鍗曞垪锛堜笉灞曞紑澶氭爮闈㈡澘 / Mega 闈㈡澘锛夛紝瑙佺粍浠跺唴 `renderSubItems`銆?   ========================================================================== */
.gimme [data-sf-hdr-layout="stacked"] [data-sf-nav-children] {
  top: calc(100% + 7px);
  left: 0;
  min-width: 250px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  transform: none;
}
.gimme [data-sf-hdr-layout="stacked"] [data-sf-nav-children]::before { top: -8px; height: 8px; }
/* 鍐呰竟璺濊惤鍦?li 涓婏細閫氱敤涓嬫媺鑷甫 `p-2!`锛圱ailwind 灞傞噷鐨?!important锛屼富棰樻湭鍒嗗眰鐨?!important 鍘嬩笉杩囷級
   鈬?ul 淇濈暀 8px锛宭i 鍐嶈ˉ 12px 妯悜 / 棣栧熬 10px 绾靛悜 = 鍙傜収绔欑害 18 / 20 鐨勭暀鐧?*/
.gimme [data-sf-hdr-layout="stacked"] [data-sf-nav-children] > li { padding-inline: 12px; }
.gimme [data-sf-hdr-layout="stacked"] [data-sf-nav-children] > li:first-child { padding-top: 10px; }
.gimme [data-sf-hdr-layout="stacked"] [data-sf-nav-children] > li:last-child { padding-bottom: 10px; }
.gimme [data-sf-hdr-layout="stacked"] [data-sf-nav-children] li + li { margin-top: 2px; }
.gimme [data-sf-hdr-layout="stacked"] [data-sf-nav-children] a,
.gimme [data-sf-hdr-layout="stacked"] [data-sf-nav-children] [data-sf-nav-child] {
  min-height: 0;
  padding: 6px 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
}
.gimme [data-sf-hdr-layout="stacked"] [data-sf-nav-children] a:hover {
  background: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 涓昏淇濇寔 `position: relative`锛氭湰涓婚鐨勮挋灞傦紙鍘熷厛鏄粷瀵瑰畾浣嶏紝鐢ㄥ畠褰撳畾浣嶅鍣級宸叉敼鎴?fixed锛屾湰鏉＄幇鍦?   鍙礋璐ｈ涓昏鑷甫鐨?`z-30`锛圱ailwind 鐨?z-index 鍙瀹氫綅鍏冪礌鐢熸晥锛夌户缁垚绔?鈥斺€?淇濈暀鍘熸牱锛屽埆椤烘墜鍒犮€?*/
.gimme [data-sf-header] [data-sf-hdr-row="main"] { position: relative; }

/* 鈹€鈹€ 浜岀骇鑿滃崟钂欏眰锛?*閾烘弧瑙嗗彛鐨勫浐瀹氬眰**锛?026-10-28 淇€岄〉闈㈣帿鍚嶈秴杩?100vh銆嶏級鈹€鈹€
   涔嬪墠鎸備富琛?`::after { position:absolute; top:100%; height:100vh }`锛屼袱涓瘺鐥咃細
     鈶?缁濆瀹氫綅鐨勭洅瀛?*浼氭妸鏂囨。婊氬姩楂樺害鎾戝ぇ** 鈥斺€?钂欏眰搴曡竟 = 涓昏搴曡竟 + 100vh锛屽唴瀹逛笉瓒充竴灞忕殑椤甸潰
        鏂囨。灏卞鍑恒€宧eader 楂樺害銆嶉偅鎴┖鐧斤紙瀹炴祴 1440脳749 瑙嗗彛 / 400px 鍐呭锛歴crollHeight 951 > 749锛?        椤甸潰鑳界户缁線涓嬫粴绾?200px 鈬?鐢ㄦ埛鐪嬪埌鐨勩€屽睆骞曡帿鍚嶅叾濡欒秴杩?100vh銆嶏級锛?     鈶?璧风偣缁戙€屼富琛屽簳杈广€嶏紝绛変簬瑕佸厛鎶?header 楂樺害绠楀噯鎵嶉摵寰楀锛堝惛椤跺墠鍚庤繕涓嶄竴鏍凤級銆?   鏀逛负 `position: fixed; inset: 0`锛氬浐瀹氬畾浣?*涓嶅弬涓庝换浣曟粴鍔ㄦ孩鍑?*銆佸昂瀵告亽绛変簬瑙嗗彛锛?   骞舵寕鍦?**header 鑷韩**涓?+ `z-index: -1` 鈬?钀藉湪 header锛坰ticky + z-20锛岃嚜鎴愬眰鍙犱笂涓嬫枃锛夌殑璐熷眰锛?   鐢诲湪 header 鑷韩搴曡壊涔嬩笂銆佹墍鏈夊湪娴佸瓙鍏冪礌锛堝叕鍛婃潯 / 涓昏 / 浜岀骇闈㈡澘锛変箣涓?鈬?椤靛ご鐓у父鐩栦綇钂欏眰锛?   瑙嗚涓婁粛鏄€屽彧鍘嬫殫椤靛ご浠ヤ笅銆嶏紝涓斾笉鐢ㄧ煡閬?header 澶氶珮銆佸惛涓嶅惛椤躲€佹粴鍒板摢銆?   锛?026-10-28 閫愬儚绱犳瘮瀵癸細鏂版棫瀹炵幇鍙湪椤靛ご搴曡竟鏈?1px 鎶楅敮榻挎帴缂濆樊寮傘€傦級 */
.gimme [data-sf-header]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(41, 33, 31, .38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s;
  z-index: -1;
}
.gimme [data-sf-header]:has([data-sf-hdr-layout="stacked"] [data-sf-nav-node]:is(:hover, :focus-within) > [data-sf-nav-children])::after {
  opacity: 1;
  visibility: visible;
}
/* 2026-10-29锛堢敤鎴峰弽棣堛€屼簩绾х被鐩?data-sf-nav-children 浼氬拰绮樻€у竷灞€鐨?filter 鍐茬獊銆嶏級锛?   鍒楄〃椤电殑绮樻€у伐鍏锋潯锛坄.gm-plp__bar`锛寊-index 20锛変細鐩栦綇浜岀骇绫荤洰涓嬫媺 鈥斺€?header 鑷韩涔熸槸 sticky + z-index 20锛?   鑰?`<main>` 鍦?`<header>` **涔嬪悗**锛堝悓灞傜骇鍚庢潵鑰呭湪涓婏級鈬?宸ュ叿鏉″帇鍦ㄤ笅鎷変笂闈紙瀹炴祴涓嬫媺鍖哄煙 elementFromPoint
   鍛戒腑鐨勬槸 `.gm-plp__bar-row`锛夈€?   淇硶锛氫簩绾х被鐩笅鎷?/ Mega 闈㈡澘 / 绉诲姩绔彍鍗曟娊灞夋墦寮€鏃讹紝鎶?header 鐨勫眰鍙犱笂涓嬫枃鎶埌 `z-index: 90`
   锛堜笌鎼滅储闈㈡澘鎵撳紑鏃跺悓涓€鍙ｅ緞锛岃 StoreHeader 鐨?`searchOpen ? 'z-[90]'`锛夛紱鍏虫帀鍗冲洖鍒版ā鏉跨殑 z-20 鈥斺€?   婊氬姩鏃跺伐鍏锋潯鐓ф棫浠庨〉澶翠笅闈㈡粦鍏ャ€?   鈿狅笍 涓嬫媺涓嶆槸 header 鐨勫厔寮熻妭鐐硅€屾槸**鍚庝唬**锛氬厜缁欎笅鎷夊姞 z-index 娌＄敤锛屽繀椤绘姮 header 杩欎釜灞傚彔涓婁笅鏂囨湰韬€?   鈿狅笍 绉诲姩绔娊灞夛紙`[data-sf-nav-drawer]`锛夊湪 `lg:hidden` 閲屼篃鏄?header 鐨勫悗浠ｏ紝鍚屾牱鍙楀奖鍝?鈬?鍗曠嫭涓€鏉°€?*/
@media (min-width: 1024px) {
  .gimme [data-sf-header]:has([data-sf-hdr-layout="stacked"] [data-sf-nav-node]:is(:hover, :focus-within) > [data-sf-nav-children]),
  .gimme [data-sf-header]:has([data-sf-mega]) {
    z-index: 90;
  }
}
.gimme [data-sf-header]:has([data-sf-nav-drawer][data-state="open"]) {
  z-index: 90;
}
@media (prefers-reduced-motion: reduce) {
  .gimme [data-sf-header]::after { transition: none; }
}

/* 鈹€鈹€ 椤靛ご鍥炬爣鎸夐挳锛?*鍘婚櫎鎵€鏈夋晥鏋?*锛堢敤鎴?2026-10-28锛夆€斺€?   鍏ㄧ珯 `.ghost-icon` 鏄€岄€忔槑搴?+ 鎮仠娣″渾搴?+ 鎸変笅缂╂斁 + 鍏抽棴閽棆杞€嶏紱gimme 椤靛ご鍙暀鍥炬爣鏈韩锛?   甯告€?/ 鎮仠 / 鎸変笅閮芥棤搴曡壊銆佹棤缂╂斁銆佹棤杩囨浮锛堝弬鐓х珯椤靛ご鍗崇函鍥炬爣锛夈€?   閿洏鐒︾偣杞粨锛?focus-visible锛変繚鐣?鈥斺€?鍙湪閿洏鎿嶄綔鏃跺嚭鐜帮紝榧犳爣鐐瑰嚮涓嶄細鏄剧ず銆?鈹€鈹€ */
.gimme [data-sf-header] .ghost-icon,
.gimme [data-sf-header] .ghost-icon svg { transition: none; }
.gimme [data-sf-header] .ghost-icon::before { display: none; }
.gimme [data-sf-header] .ghost-icon:not(:disabled):active,
.gimme [data-sf-header] .ghost-icon:not(:disabled):hover svg,
.gimme [data-sf-header] .ghost-icon:not(:disabled):active svg { transform: none; }

/* 鈹€鈹€ 椤靛ご鍥炬爣 = 鍙傜収绔欏悓涓€濂?SVG锛圫toreHeader 鐨?GmIcon*锛夛細绫荤洰涓嬫媺绠ご澧ㄨ壊銆佷笌鏂囧瓧闂磋窛 鈮?0px锛堝弬鐓х珯瀹炴祴锛?鈹€鈹€ */
.gimme [data-sf-hdr-layout="stacked"] [data-sf-nav-node] > span[aria-hidden="true"] { margin-left: 10px; color: var(--ink); }
.gimme [data-sf-hdr-layout="stacked"] [data-sf-hdr-social] { gap: 8px; }
.gimme [data-sf-hdr-layout="stacked"] [data-sf-hdr-social] .ghost-icon { width: 24px; height: 24px; }

/* =============================================================================
   璁㈠崟璇︽儏 / 浠樻鎴愬姛椤碉紙gimme锛夛細鍘绘帀 checkout-shopify.css 鐨?Shopify 鐨偆
   -----------------------------------------------------------------------------
   `src/app/[lang]/orders/[orderNo]/page.tsx` 鐨勬牴鑺傜偣鏄?`.order-shopify`锛岀毊鑲ゆ潵鑷叏涓婚鍏辩敤鐨?   `styles/checkout-shopify.css` L453-531锛氱郴缁?sans銆?202223 / #6d7175 鐏般€?1773b0 钃濋摼鎺ャ€?   #008060 鎴愬姛缁?+ #f1f8f4 缁垮簳銆?-8px 鍦嗚锛岃鍒欏叏甯?!important锛堣鏂囦欢绂佹鎸変富棰樻敼锛夈€?   鏈潡鐢ㄣ€屽涓€灞?`.gimme` + 鍚屽己搴?!important銆嶉€愭潯瑕嗙洊锛堜笌涓婃柟缁撶畻椤?`.checkout-scope` 鍚屼竴鎵嬫硶锛夛細
     路 姝ｆ枃 Instrument Sans / 澧ㄨ壊 #29211f锛沨1 / h2 = Fraunces 300銆佸瓧璺?鈭?.025em锛堜笌鍏ㄧ珯涓€鑷达級锛?     路 鏍囩 = --muted銆佸垎闅旂嚎 = --line锛涜〃澶?12px 澶у啓 muted + 1px 澧ㄧ嚎锛涢摼鎺?= 鍝佺墝妫?#5d2412
       锛坔over #b24523锛岀粏涓嬪垝绾匡級锛?     路 浠樻鎴愬姛妯箙 = 娴呯背搴?#f8f1ee + 4px 鍝佺墝妫曞乏鏉?+ 澧ㄨ壊 Fraunces 鏍囬 + 娣辩伆姝ｆ枃銆傛垚鍔熻涔変笉闈?       Shopify 缁匡細鏁撮〉鍞竴鐨勫ぇ鍙风‘璁ゅ潡 + 銆孭ayment successful銆嶅ぇ鏍囬 + 銆岀‘璁ら偖浠跺凡鍙戝線 鈥︺€嶈锛涚豢鑹?       鍙繚鐣欑粰璇箟 Alert锛堝叏灞€ --ok 鎴愬姛鑹诧紝涓嶆槸鏈〉鐨偆鐨勪竴閮ㄥ垎锛夈€?     路 缂╃暐鍥?/ 鎸夐挳 / 杈撳叆妗嗗叏鐩磋锛涘悎璁¤ = 2px 澧ㄨ壊涓婅竟绾?+ 鍝佺墝妫曢噾棰濄€?   鈿狅笍 checkout-shopify.css 鍦?layout.tsx 閲?*鏈枃浠朵箣鍚?*寮曞叆 鈬?鍚岀壒寮傛€ф椂瀹冭耽锛岃鐩栧繀椤诲涓€灞?`.gimme`銆?   ========================================================================== */
.gimme .order-shopify {
  --gm-order-body: #4b423f; /* 妯箙 / 鍦板潃姝ｆ枃锛氭瘮 --muted 娣憋紝娴呯背搴?#f8f1ee 涓?鈮?:1 */
  font-family: var(--sans) !important;
  color: var(--ink) !important;
}
/* 鏍囬锛欶raunces 300锛坈heckout 鎶?h1/h2 鏀规垚浜嗙郴缁?sans 600锛?*/
.gimme .order-shopify :is(h1, h2) {
  font-family: var(--display) !important;
  font-weight: 300 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
}
.gimme .order-shopify h2 {
  margin-top: 40px !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  line-height: 1.2 !important;
}
/* 浠樻鎴愬姛妯箙锛圫hopify: #f1f8f4 搴?+ #008060 宸︽潯 + 绯荤粺 sans 600 鏍囬锛?*/
.gimme .order-shopify [data-order-paid-banner] {
  background: #f8f1ee !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--navy) !important;
  border-radius: 0 !important;
  padding: 28px !important;
  margin-bottom: 32px !important;
}
.gimme .order-shopify [data-order-paid-banner] h1 {
  font-size: clamp(26px, 3.4vw, 38px) !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
}
.gimme .order-shopify [data-order-paid-banner] p {
  margin-top: 10px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--gm-order-body) !important;
}
.gimme .order-shopify [data-order-paid-banner] p[data-order-paid-email] { font-size: 14px !important; }
/* 鍏冧俊鎭锛堝崟鍙?/ 鐘舵€?/ 鏀粯鏂瑰紡 / 杩借釜鍙凤級 */
.gimme .order-shopify [data-order-meta] { margin-top: 28px !important; border-top: 1px solid var(--line) !important; }
.gimme .order-shopify [data-order-meta] > div {
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.gimme .order-shopify [data-order-meta] > div > span:first-child { color: var(--muted) !important; }
.gimme .order-shopify [data-order-meta] > div > span:last-child { color: var(--ink) !important; }
/* 鏄庣粏琛細琛ㄥご = 12px 澶у啓 muted + 1px 澧ㄧ嚎锛涜鍒嗛殧 = --line */
.gimme .order-shopify thead th {
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--ink) !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.gimme .order-shopify tbody td {
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 15px !important;
  vertical-align: middle !important;
}
.gimme .order-shopify tbody tr:last-child td { border-bottom: 1px solid var(--line) !important; }
.gimme .order-shopify [data-order-item] [data-item-thumb] {
  width: 64px !important;
  height: 64px !important;
  border-radius: 0 !important;
  border-color: var(--line) !important;
  background: var(--brand-surface-2) !important;
}
/* 鍚堣鍖猴細瀹夐潤鐨勮 + 2px 澧ㄨ壊涓婅竟绾垮己璋冪殑 Total锛堥噾棰濈敤鍝佺墝妫曪級 */
.gimme .order-shopify [data-order-totals] { margin-top: 28px !important; }
.gimme .order-shopify [data-order-totals] > div:not([data-order-discount-row]),
.gimme .order-shopify [data-order-discount-row] > div {
  padding: 10px 0 !important;
  border: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.gimme .order-shopify [data-order-totals] > [data-order-discount-row] { padding: 0 !important; }
.gimme .order-shopify [data-order-totals] > div > span:first-child,
.gimme .order-shopify [data-order-discount-row] > div > span:first-child { color: var(--muted) !important; }
.gimme .order-shopify [data-order-totals] > div:last-of-type {
  margin-top: 10px !important;
  padding-top: 18px !important;
  border-top: 2px solid var(--ink) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
.gimme .order-shopify [data-order-totals] > div:last-of-type > span:first-child { color: var(--ink) !important; }
.gimme .order-shopify [data-order-totals] > div:last-of-type > span:last-child { color: var(--navy) !important; }
.gimme .order-shopify [data-order-vat-included] { color: var(--muted) !important; font-size: 13px !important; }
/* 鏀惰揣鍦板潃 / 閰嶉€佹柟寮?*/
.gimme .order-shopify [data-order-shipping-address] {
  margin-top: 32px !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--line) !important;
}
.gimme .order-shopify [data-order-shipping-address] address {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--gm-order-body) !important;
}
.gimme .order-shopify [data-order-shipping-address] address span:first-child { color: var(--ink) !important; }
/* 鏂囧瓧閾炬帴锛氬搧鐗屾锛圫hopify 鏄?#1773b0锛? 缁嗕笅鍒掔嚎锛涙寜閽瀷閾炬帴涓嶅杩欐潯 */
.gimme .order-shopify a:not(.ui-btn) {
  color: var(--navy) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(93, 36, 18, .3) !important;
  text-underline-offset: 4px !important;
}
.gimme .order-shopify a:not(.ui-btn):hover {
  color: #b24523 !important;
  text-decoration-color: currentColor !important;
}
/* 鎸夐挳 / 杈撳叆妗嗭細鍏ㄧ洿瑙掞紙checkout 鐨?`.order-shopify .rounded-brand{border-radius:6px}` 涔熶竴骞跺帇鎺夛級 */
.gimme .order-shopify :is(a.ui-btn, button, input, select, textarea) { border-radius: 0 !important; }
.gimme .order-shopify a.ui-btn {
  color: var(--ink) !important;
  border-color: var(--line-strong) !important;
  text-decoration: none !important;
  font-family: var(--sans) !important;
}
.gimme .order-shopify a.ui-btn:hover {
  color: var(--navy) !important;
  border-color: var(--navy) !important;
  background: #f8f1ee !important;
  text-decoration: none !important;
}
.gimme .order-shopify .rounded-brand { border-radius: 0 !important; }

@media (max-width: 640px) {
  .gimme .order-shopify [data-order-paid-banner] { padding: 22px 20px !important; margin-bottom: 26px !important; }
  .gimme .order-shopify h2 { margin-top: 34px !important; }
  .gimme .order-shopify tbody td { padding: 14px 0 !important; }
}

/* =============================================================================
   鍗曟嵁椤碉紙Proforma 鎶ヤ环鍗?/ VAT 鍙戠エ锛夆€斺€?gimme 涓婚鐨偆锛?026-10-29 鐢ㄦ埛鍙ｅ緞
   銆岃繖鍑犱釜椤甸潰閮借璋冩暣涓?gimme 涓婚銆嶏細`/orders/<no>/proforma`銆乣/invoice`銆乣?download=1`锛?   -----------------------------------------------------------------------------
   杩欎袱椤佃蛋鍏辩敤鍘熻锛坲i.tsx 鐨?Page / Row / Table / Alert锛夛紝浠ょ墝鏈潵灏辫窡闅忓搧鐗岋紝浣?*鐗堝紡璇█**浠嶆槸
   閫氱敤搴旂敤灞傛牱寮忥細13px 鏃犲ぇ鍐欑殑琛ㄥご銆侀粦鑹蹭富鎸夐挳銆侀粍鑹插憡璀︽潯銆佹繁鐏伴噾棰?鈥斺€?涓?gimme 鐨勫晢鍝侀〉/璁㈠崟椤?   瀵逛笉涓娿€傛湰鍧楁妸瀹冧滑鏀跺彛鎴愪笌璁㈠崟璇︽儏椤碉紙涓婇潰 `璁㈠崟璇︽儏 / 浠樻鎴愬姛椤礰 閭ｆ锛夊悓涓€濂楋細
     路 鏍囬 Fraunces 300銆佹鏂?Instrument Sans 15px锛?     路 銆孲old by / Bill to銆嶈繖绫绘爮鐩爣绛?= 12px 澶у啓 + .12em 璺熻釜 + muted锛坓imme 鐨勫井鎺掔増锛夛紱
     路 琛ㄥご 12px 澶у啓 + 1px 澧ㄧ嚎涓嬭竟锛涜〃浣?18px 琛岃窛銆?-line 鍒嗛殧锛?     路 鍚堣鏈 = 2px 澧ㄧ嚎涓婅竟 + 18px锛岄噾棰濆搧鐗屾锛?     路 缂╃暐鍥?64px 鐩磋锛涗富鎸夐挳鍝佺墝妫曪紙hover #b24523锛夛紱
     路 闈?VAT 澹版槑鏉?= 娴呯背搴?+ 4px 妫曞乏鏉★紙淇濈暀"娉ㄦ剰"鐨勮涔夛紝浣嗕笉鍐嶇敤閫氱敤榛勮壊鍛婅鐨級銆?   浣滅敤鍩燂細鍏ㄩ儴 `.gimme` 鍓嶇紑锛沗:is([data-proforma], [data-invoice])` 瑕嗙洊涓ら〉锛坕nvoice 鏂板浜?   `data-invoice` 鏍归挬瀛愶級銆傝〃鏍煎崟鍏冩牸瑙勫垯鍖呭湪 `min-width: 721px` 鈥斺€?鍥犱负 鈮?20 鏃?`.ui-table--stack`
   浼氭妸琛ㄦ牸鍙樻垚鍗＄墖锛屾湭鍒嗗眰鐨勬湰鏂囦欢鑻ヤ笉鍔犲獟浣撴煡璇細鍘嬫帀瀹冪殑 `padding:0 / border:0`銆?   鎵撳嵃锛歚@media print` 鍙緭鍑?`[data-proforma]` 鏈綋锛堣 tailwind.css锛夛紱鏈潡涓嶆柊澧炲畾浣?灏哄锛?   鍙粰 `print-color-adjust: exact` 璁╂鏉?搴曠嚎涓嶈娴忚鍣ㄧ渷鎺夈€?   ========================================================================== */
.gimme :is([data-proforma], [data-invoice]) {
  font-family: var(--sans);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}
.gimme :is([data-proforma], [data-invoice]) > h1 {
  margin: 0 0 24px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ink);
}
.gimme :is([data-proforma], [data-invoice]) > h2 {
  margin: 40px 0 16px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--ink);
}
/* 鏍忕洰鏍囩锛圫old by / Bill to鈥︼級锛歡imme 鐨勫皬鏍囬 = 12px 澶у啓 + 瀹借窡韪?+ muted */
.gimme :is([data-proforma], [data-invoice]) section > h2 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.gimme :is([data-proforma], [data-invoice]) section p { font-size: 15px; line-height: 1.6; }
/* 闈?VAT 澹版槑鏉★細娴呯背搴?+ 妫曞乏鏉★紙鏇挎崲閫氱敤 warn 榛勶級 */
.gimme [data-proforma] [data-proforma-disclaimer] > p {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: 0;
  background: #f8f1ee;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}
/* 鏄庣粏琛紙>720px 鎵嶆槸鐪熻〃鏍硷紱鈮?20 鐢?.ui-table--stack 鍙樺崱鐗囷紝鍒幓鍘嬪畠锛?*/
@media (min-width: 721px) {
  .gimme :is([data-proforma], [data-invoice]) thead th {
    padding: 0 8px 12px;
    border-bottom: 1px solid var(--ink);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .gimme :is([data-proforma], [data-invoice]) tbody td {
    padding: 18px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  .gimme :is([data-proforma], [data-invoice]) tbody tr:last-child td { border-bottom: 1px solid var(--line); }
}
.gimme :is([data-proforma], [data-invoice]) [data-item-thumb] {
  width: 64px;
  height: 64px;
  border-radius: 0;
  border-color: var(--line);
  background: var(--brand-surface-2);
}
/* 鍚堣鍖猴細瀹夐潤鐨勮 + 鏈 2px 澧ㄧ嚎涓婅竟 + 鍝佺墝妫曢噾棰濓紙涓庤鍗曢〉鍚屼竴鍙ｅ緞锛?*/
.gimme :is([data-proforma-totals], [data-invoice-totals]) > div {
  padding: 10px 0;
  border: 0;
  font-size: 15px;
}
.gimme :is([data-proforma-totals], [data-invoice-totals]) > div > span:first-child { color: var(--muted); }
.gimme :is([data-invoice-discount-row], [data-invoice-shipping-row], [data-invoice-vat-row]) { padding: 0; }
.gimme :is([data-proforma-totals], [data-invoice-totals]) > div:last-of-type {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.gimme :is([data-proforma-totals], [data-invoice-totals]) > div:last-of-type > span:last-child { color: var(--navy); }
/* 涓绘寜閽紙Download proforma锛夛細鍝佺墝妫曪紝鐩磋锛宧over #b24523 */
/* 2026-11-10：文档下载按钮统一走 `.ui-btn` 后，本主题把它升级为**品牌主按钮**（棕底白字）；
   之前只写了 bg/border，文字色会继承 quiet 变体的 ink（深棕压深棕 ≈ 不可读，验收实测对比度不合格）。
   同时覆盖形式发票 / 红字发票 / 正式发票三处（新的红字发票页也复用同一模板）。 */
.gimme :is([data-proforma-actions], [data-creditnote-actions], [data-invoice-actions]) > button {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  border-radius: 0;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .02em;
}
.gimme :is([data-proforma-actions], [data-creditnote-actions], [data-invoice-actions]) > button:not(:disabled):hover {
  border-color: #b24523;
  background: #b24523;
  color: #fff;
}
@media print {
  .gimme [data-proforma],
  .gimme [data-proforma] * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .gimme [data-proforma] > h1 { margin-bottom: 18px; font-size: 26px; }
  .gimme [data-proforma] > h2 { margin: 26px 0 12px; font-size: 20px; }
}


/* ── 售后申请表单（ReturnRequestForm，`[data-return-*]` 钩子）—— 对齐订单详情「Product」段：
   无框分隔线列表、Fraunces 标题、商品名 17px；选中 / 勾选用品牌棕（--navy 槽位 = #5d2412）；全直角。 */
.gimme [data-account-scope] [data-return-form] [data-return-title] {
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
}
.gimme [data-account-scope] [data-return-form] [data-return-list] { gap: 0; border-top: 1px solid var(--steel-light); }
.gimme [data-account-scope] [data-return-form] [data-return-card] {
  border: 0;
  border-bottom: 1px solid var(--steel-light);
  box-shadow: none;
  background: transparent;
}
.gimme [data-account-scope] [data-return-form] [data-return-card][data-selected] { box-shadow: inset 2px 0 0 var(--navy); }
.gimme [data-account-scope] [data-return-form] [data-return-card] > div:first-child { padding-block: 20px; }
.gimme [data-account-scope] [data-return-form] [data-return-card] .line-clamp-2 { font-size: 16px; line-height: 1.4; }
.gimme [data-account-scope] [data-return-form] [data-return-check] { border-color: var(--line-strong); }
.gimme [data-account-scope] [data-return-form] [data-selected] [data-return-check] { border-color: var(--navy); background: var(--navy); }
.gimme [data-account-scope] [data-return-form] [data-return-item-reason] { border-top: 0; padding-top: 0; padding-left: 52px; }
.gimme [data-account-scope] [data-return-form] [data-return-stepper],
.gimme [data-account-scope] [data-return-form] [data-return-stepper] button { border-radius: 0; }
.gimme [data-account-scope] [data-return-form] [data-return-policy] { background: var(--porcelain); }
.gimme [data-account-scope] [data-return-form] [data-return-photo-add] { border-color: var(--line-strong); }
.gimme [data-account-scope] [data-return-form] [data-return-photo-add]:hover { border-color: var(--navy); color: var(--navy); }
@media (max-width: 639px) {
  .gimme [data-account-scope] [data-return-form] [data-return-item-reason] { padding-left: 12px; }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/theme-90notes.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
   90 NOTES 主题皮肤（主题 key `90notes`，根类 `.lume .n90`）—— 1:1 参照 90notes.com（Shopify Vantage）
   -----------------------------------------------------------------------------
   令牌（配色 / 字体 / 直角）在 brand-tokens.css 的 `.n90` 块；本文件管版式与组件皮肤：
     · 全局：正文 Karla 14px #333、段标题 TT Bluescreens（回落 Antonio）24px 大写、主按钮洋红 #d8137d、全站直角；
     · 页头（StoreHeader `layout="stacked"` 的同一份 DOM，CSS 重排）：浅粉公告条 → 搜索框 | logo | 账户 + 购物袋
       → 下一行居中大写类目；滚动后只留类目行贴顶（参照站 stickynav）；
     · 首页（NinetyNotesTemplate，挂在 `[data-n90-home]` 下）：圆形入口 / 轮播 / 商品横滑 / 集合大图横滑 / 满宽大图；
     · 页脚（StoreFooter `footerLayout="notes90"`，`[data-footer-layout="notes90"]`）。
   分层：**未分层**，在 tailwind.css / home-lume.css / 其它主题皮肤之后引入 ⇒ 压得过 @layer components / utilities；
   规则全部限定 `.n90`，其它主题零影响。尺寸取参照站 1440 宽实测（见 docs/theme-90notes.md）。
   ========================================================================== */

.n90 {
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

/* ── 按钮：实心 = 洋红（hover #ed3196）；全部直角 ── */
.n90 .ui-btn[data-variant="primary"],
.n90 .btn {
  background: var(--n90-pink);
  border-color: var(--n90-pink);
  color: #fff;
  border-radius: 0;
  box-shadow: none;
}
.n90 .ui-btn[data-variant="primary"]:not(:disabled):hover,
.n90 .btn:hover {
  background: var(--n90-pink-hover);
  border-color: var(--n90-pink-hover);
  transform: none;
  box-shadow: none;
}
.n90 .ui-btn { border-radius: 0; }
.n90 :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--n90-pink); }

/* ── 全站直角（同 gimme 口径）：rounded-full（头像 / 圆点 / 数量角标）与 ghost-icon 保持形状 ── */
.n90 :is(main, .cart-drawer-panel, [data-address-dialog], [data-checkout-scope], [data-account-scope], [data-cart-scope]) :is(
  .ui-card, .ui-btn, .rounded-brand, input, select, textarea, .sf-phone,
  button:not(.ghost-icon), [class*="rounded-["], [class*="[border-radius:"], [class*="rounded-sm"], [class*="rounded-md"],
  [class*="rounded-lg"], [class*="rounded-xl"], [class*="rounded-pill"]
):not(.ghost-icon):not(.rounded-full):not(.n90-arrow):not(.n90-card__add):not(.quick-add__button):not(.n90-dots button) {
  border-radius: 0;
}

/* =============================================================================
   页头（StoreHeader layout="stacked"，同一份 DOM 重排）
   ========================================================================== */
.n90 [data-sf-header] { background: #fff; border-bottom: 0; box-shadow: none; }
.n90 [data-sf-header] [data-sf-hdr-row="main"] { background: #fff; border-bottom: 0; }

/* 公告条：浅粉底、白字 Karla 700 14px、41px 高（参照站实测） */
.n90 [data-sf-header] [data-sf-announce] > div { height: 41px; }
.n90 [data-sf-header] [data-sf-announce] p {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 1;
}

/* 页头 / 内页容器同样铺满：`max-w-brand`（--brand-max: none）+ 边距换成参照站的 5.04167% 内容边 */
.n90 [data-sf-hdr-layout="stacked"],
.n90 .max-w-brand.px-6 { padding-left: var(--n90-edge); padding-right: var(--n90-edge); }

/* 页头图标按钮（账户 / 购物袋 / H5 菜单 / 搜索）：命中框高 34px（全站默认 44） */
.n90 [data-sf-hdr-layout="stacked"] .ghost-icon { height: 34px; }

/* 社交图标：参照站页头没有（心愿单入口 2026-11-02 起按用户口径加回，见下） */
.n90 [data-sf-hdr-social] { display: none !important; }
/* 心愿单入口（账户与购物袋之间）：命中框同为 34 宽；件数角标与购物袋同款，贴心形右侧 */
.n90 [data-sf-hdr-tools="stacked"] [data-sf-hdr-wishlist] { width: 34px; }
.n90 [data-sf-hdr-wishlist-count] {
  left: calc(50% + 12px);
  top: 50%;
  height: 16px;
  min-width: 16px;
  padding: 0 3px;
  transform: translateY(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.n90 [data-sf-hdr-tools="stacked"] [data-sf-hdr-wishlist]:has([data-sf-hdr-wishlist-count]) { margin-right: 12px; }

/* 购物袋数量：16px 墨色圆、白字 9px 粗体，贴在袋子右侧垂直居中 */
.n90 [data-sf-hdr-bag-count] {
  left: calc(50% + 13px);
  top: 50%;
  height: 16px;
  min-width: 16px;
  padding: 0 3px;
  transform: translateY(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

@media (min-width: 1024px) {
  /* 三列：搜索框 | logo | 工具；第二行类目通栏居中。行高：logo 行 185（含上 40 留白、200×120 logo）+ 类目行 31 */
  .n90 [data-sf-hdr-layout="stacked"] {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 185px 31px;
    column-gap: 24px;
  }
  .n90 [data-sf-hdr-layout="stacked"] > [data-sf-hdr-brand] {
    grid-column: 2 / 3;
    grid-row: 1;
    align-self: start;
    margin-top: 40px;
  }
  .n90 [data-sf-hdr-layout="stacked"] > [data-sf-hdr-brand] img { height: 120px; width: auto; }
  .n90 [data-sf-hdr-layout="stacked"] > [data-sf-hdr-brand] [data-sf-hdr-wordmark] {
    font-family: var(--display);
    font-size: 64px;
    color: var(--n90-pink);
    text-transform: uppercase;
  }

  /* 搜索：参照站是 170×50 的细框真输入框（占位「Search」+ 右侧 14px 放大镜 = 提交键），StoreHeader 90notes 分支渲染 */
  .n90 [data-sf-hdr-layout="stacked"] > span:has(> [data-n90-hdr-search]) {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 78px;
  }
  .n90 [data-n90-hdr-search] {
    display: flex;
    align-items: center;
    width: 170px;
    height: 50px;
    border: 1px solid var(--line);
    background: #fff;
    transition: border-color .2s;
  }
  .n90 [data-n90-hdr-search]:hover { border-color: #bdbdbd; }
  .n90 [data-n90-hdr-search]:focus-within { border-color: var(--ink); }
  .n90 [data-n90-hdr-search] input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 0 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 400 11px/1 var(--sans);
    outline: none;
    box-shadow: none;
    appearance: none;
  }
  .n90 [data-n90-hdr-search] input::placeholder { color: var(--ink); opacity: 1; }
  .n90 [data-n90-hdr-search] input::-webkit-search-cancel-button { display: none; }
  .n90 [data-n90-hdr-search] button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .n90 [data-n90-hdr-search] button:hover { color: var(--n90-pink); }

  .n90 [data-sf-hdr-layout="stacked"] > [data-sf-hdr-tools="stacked"] {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    margin-top: 78px;
    height: 50px;
    gap: 0;
  }
  /* 账户 ↔ 购物袋：参照站两图标中心距约 34px（图标 18px、间隙约 16px）⇒ 命中框收窄到 34，不再加 gap */
  .n90 [data-sf-hdr-tools="stacked"] :is([data-sf-hdr-account], [data-sf-hdr-bag]) { width: 34px; }
  .n90 [data-sf-hdr-tools="stacked"] [data-sf-hdr-bag] { margin-right: 14px; }

  /* 类目项悬停 / 展开时划出的下划线（共享 TOP_LINK 的 `after:h-px` / `after:bottom-0.5`）：加粗到 2px、贴底（bottom 0） */
  .n90 [data-sf-hdr-layout="stacked"] [data-sf-hdr-nav] [class*="after:h-px"]::after { bottom: 0; height: 2px; }

  /* 类目行：Karla 700 14px、字距 .075em、大写、纯黑；项内左右 15px（参照站 header__nav__link） */
  .n90 [data-sf-hdr-layout="stacked"] > [data-sf-hdr-nav] {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    gap: 3px;
  }
  .n90 [data-sf-hdr-layout="stacked"] :is([data-sf-hdr-nav-item], [data-sf-nav-more-trigger]) {
    padding: 0 15px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: #000;
  }
  .n90 [data-sf-hdr-layout="stacked"] [data-sf-nav-node] > [aria-hidden="true"] { margin-left: -12px; margin-right: 12px; color: #000; }

  /* 二级下拉 = 参照站 header__nav__submenu：直角、白底、无阴影；内边距 10/20，项距 6px、14px / 1.5；悬停下划线 */
  .n90 [data-sf-hdr-layout="stacked"] [data-sf-nav-children] {
    min-width: 200px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }
  .n90 [data-sf-hdr-layout="stacked"] [data-sf-nav-children] > li { padding-inline: 12px; }
  .n90 [data-sf-hdr-layout="stacked"] [data-sf-nav-children] > li:first-child { padding-top: 2px; }
  .n90 [data-sf-hdr-layout="stacked"] [data-sf-nav-children] > li:last-child { padding-bottom: 2px; }
  .n90 [data-sf-hdr-layout="stacked"] [data-sf-nav-children] :is(a, [data-sf-nav-child]) {
    min-height: 0;
    padding: 6px 0;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
  }
  .n90 [data-sf-hdr-layout="stacked"] [data-sf-nav-children] a:hover {
    background: none;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* 吸顶 = 参照站 stickynav：只留类目行贴顶，公告条与 logo 行随页面滚走
     （StoreHeader 计算 --sf-header-h 时会扣掉这段负 top） */
  .n90 [data-sf-header] { top: -185px; }
  .n90 [data-sf-header]:has(> [data-sf-announce]) { top: -226px; }
}
@media (max-width: 1023.98px) {
  .n90 [data-sf-header]:has(> [data-sf-announce]) { top: -41px; }
}

/* =============================================================================
   首页（NinetyNotesTemplate，[data-n90-home]）
   ========================================================================== */
.n90 [data-n90-home] { background: #fff; }
/* 内容区铺满（参照站 gridlock）：外层 calc(5.04167% - 15px) + 子项左右 15px ⇒ 内容边缘 = 5.04167% */
.n90 [data-n90-home] .n90-wrap { padding: 0 var(--n90-pad); }
.n90 [data-n90-home] .n90-wrap > * { margin-left: var(--n90-col); margin-right: var(--n90-col); }
.n90 [data-n90-home] img { display: block; max-width: 100%; }

/* 段标题：TT Bluescreens（回落 Antonio）24px、字距 1.8px、大写、居中 */
.n90 [data-n90-home] .n90-title {
  margin-top: 0;
  margin-bottom: 0;
  padding: 20px 0 10px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.n90 [data-n90-home] .n90-title a { color: inherit; text-decoration: none; }
.n90 [data-n90-home] .n90-title--left { text-align: left; }

/* ── ① 圆形入口：90×90、2px 浅粉圈、标签 Karla 700 12px 大写 ── */
.n90 [data-n90-section="circles"] { padding: 16px 0 12px; }
.n90 .n90-circles {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 0 var(--n90-edge);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.n90 .n90-circles::-webkit-scrollbar { display: none; }
.n90 .n90-circles li { flex: 0 0 90px; }
.n90 .n90-circles a { display: block; color: #000; text-decoration: none; }
.n90 .n90-circles__img {
  display: block;
  width: 90px;
  height: 90px;
  border: 2px solid var(--n90-blush);
  border-radius: 50%;
  overflow: hidden;
}
.n90 .n90-circles__img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.33, 0, 0, 1);
}
.n90 .n90-circles a:hover .n90-circles__img img { transform: scale(1.08); }
.n90 .n90-circles__label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

/* ── ② 满宽轮播：16:9 横移 + 底部圆点 ── */
.n90 [data-n90-section="hero"] { position: relative; }
.n90 .n90-hero__viewport { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--porcelain); }
/* 淡入淡出（参照站 `.slideshow__slide { opacity: 0; transition: opacity 1s ease }` + `.is-selected { opacity: 1 }`）：
   幻灯片绝对定位叠放，当前页在上层可点，其余透明且不接收指针 */
.n90 .n90-hero__track { position: relative; height: 100%; }
.n90 .n90-hero__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.n90 .n90-hero__slide.is-active { z-index: 1; opacity: 1; pointer-events: auto; }
.n90 .n90-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.n90 .n90-dots {
  /* 参照站 `.slideshow.flickity__section .flickity-page-dots { bottom: 25px }`：压在图片底部居中 */
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 25px;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.n90 .n90-dots button {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  opacity: .25;
  cursor: pointer;
  transition: opacity .3s;
}
.n90 .n90-dots button[aria-current="true"] { opacity: 1; }

/* ── 横滑轨道（商品 / 集合共用）：原生横向滚动 + scroll-snap，滚动条隐藏 ── */
.n90 .n90-rail { position: relative; }
.n90 .n90-rail__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.n90 .n90-rail__track::-webkit-scrollbar { display: none; }
.n90 .n90-rail__track > * { scroll-snap-align: start; }

/* 左右箭头：45px 浅灰圆、洋红 chevron，垂直居中在图片区（--n90-anchor-* 由 Rail 实测写入；量到之前按整条轨道居中） */
.n90 .n90-arrow {
  position: absolute;
  z-index: 2;
  top: calc(var(--n90-anchor-top, 0px) + var(--n90-anchor-h, 100%) / 2);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f4f4f4;
  color: var(--n90-pink);
  cursor: pointer;
  transition: background-color .2s;
}
.n90 .n90-arrow:hover { background: #fff; box-shadow: 0 0 0 1px #f4f4f4; }
.n90 .n90-arrow--prev { left: 12px; }
.n90 .n90-arrow--next { right: 12px; }

/* ── ③ / ⑤ 商品卡：一屏 4 张、列距 22，2:3 竖图 + 悬停换图 ── */
.n90 [data-n90-section="new-in"] { padding: 25px 0 10px; } /* 底部 10 + 下方 CTA 顶部 20 ⇒ 商品价格到「Shop all new items」30px（原 70，按钮偏下） */
.n90 [data-n90-section="new-in"] .n90-title { margin-bottom: 35px; }
.n90 [data-n90-section="featured"] { padding: 25px 0 60px; }
/* 精选集合标题（BASIC HOOPS / PIECES OF US / AMORE）：原来下方只有 10，文字贴着商品卡、看着偏下
   ⇒ 下面补到 35（与 NEW IN 标题同一口径）；上内边距 20（用户指定）：横幅 → 标题 45、标题 → 商品卡 35 */
.n90 [data-n90-section="featured"] .n90-title { padding-top: 20px; margin-bottom: 25px; }
.n90 .n90-products { gap: 22px; }
.n90 .n90-card { flex: 0 0 calc((100% - 3 * 22px) / 4); min-width: 0; }
.n90 .n90-card__media {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #f0f0f0;           /* 2026-11-02 用户口径：商品图浅灰底 + 正片叠底，白底产品图融进底色 */
}
.n90 .n90-card__img { display: block; width: 100%; height: 100%; }
.n90 .n90-card__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.n90 .n90-card__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
}
.n90 .n90-card:hover .n90-card__hover,
.n90 .n90-card:focus-within .n90-card__hover { opacity: 1; }
/* 两张图都正片叠底 ⇒ 悬停时主图要同步淡出，否则会从悬停图的白底处透出来 */
.n90 .n90-card__img img:not(.n90-card__hover) { transition: opacity .4s ease; }
.n90 .n90-card:hover .n90-card__img img:not(.n90-card__hover),
.n90 .n90-card:focus-within .n90-card__img img:not(.n90-card__hover) { opacity: 0; }
.n90 .n90-card__badge {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.n90 .n90-card__info { position: relative; padding-top: 9px; text-align: center; }
.n90 .n90-card__title {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}
.n90 .n90-card[data-variant="new"] .n90-card__title { font-weight: 700; }
.n90 .n90-card__title a { color: var(--ink); text-decoration: none; }
.n90 .n90-card__title a:hover { color: var(--n90-pink); }
.n90 .n90-card__price { margin: 9px 0 0; font-size: 14px; line-height: 21px; color: var(--ink); }
/* NEW IN 卡片快速加购「+」：图片右下角，44px 浅灰圆、洋红加号；悬停卡片浮现（触屏常显） */
.n90 .n90-card__add {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f4f4f4;
  color: var(--n90-pink);
  opacity: 0;
  translate: 0 6px;
  transition: opacity .3s, translate .3s cubic-bezier(.22, 1, .36, 1), background-color .2s, color .2s;
}
.n90 .n90-card:hover .n90-card__add,
.n90 .n90-card__add:focus-visible { opacity: 1; translate: 0 0; }
@media (hover: none) {
  .n90 .n90-card__add { opacity: 1; translate: 0 0; }
}
.n90 .n90-card__add:hover { background: var(--n90-pink); color: #fff; }

/* CTA：SHOP ALL NEW ITEMS（洋红实底、白字 Karla 700 12px、50px 高） */
.n90 [data-n90-section="cta"] { padding: 20px 0 45px; text-align: center; }
.n90 .n90-btn {
  display: inline-block;
  height: 50px;
  padding: 0 20px;
  background: var(--n90-pink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: .9px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s;
}
.n90 .n90-btn:hover { background: var(--n90-pink-hover); color: #fff; }

/* ── ④ 集合大图：三等分网格（列距 36、内容区同宽，不横滑）；图底居中浅粉按钮 ── */
.n90 [data-n90-section="collections"] { padding: 48px 0 36px; }
/* 三等分网格（不用 Tailwind 的 grid 类：`.lume .grid` 会撞车），单卡比例沿用参照站 563×600 */
.n90 .n90-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.n90 .n90-cols__slide {
  position: relative;
  display: block;
  aspect-ratio: 563 / 600;
  overflow: hidden;
  background: #ddd;
}
.n90 .n90-cols__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.33, 0, 0, 1);
}
.n90 .n90-cols__slide:hover img { transform: scale(1.04); }
.n90 .n90-cols__btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  padding: 16px 30px;
  transform: translateX(-50%);
  background: var(--n90-blush);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s;
}
.n90 .n90-cols__slide:hover .n90-cols__btn { background: var(--n90-pink); }

/* ── 满宽大图（文案烙在图里）；About us 叠一个居中浅粉按钮（图高 71% 处） ── */
.n90 [data-n90-section="banner"] { position: relative; }
.n90 [data-n90-section="banner"] img { width: 100%; height: auto; }
.n90 .n90-banner__btn {
  position: absolute;
  top: 71.2%;
  left: 50%;
  padding: 8px 14px;
  transform: translateX(-50%);
  background: var(--n90-blush);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .9px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s;
}
.n90 .n90-banner__btn:hover { background: var(--n90-pink); color: #fff; }

/* ── ⑦ Seen on Instagram（左对齐标题）/ ⑧ 图标文字条 ── */
.n90 [data-n90-section="instagram"] { padding-top: 40px; }
.n90 [data-n90-section="collaborate"] { padding: 20px 0 45px; }
.n90 .n90-collab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.n90 .n90-collab svg { flex: none; }
.n90 .n90-collab p { margin: 0; font-size: 14px; line-height: 21px; }

/* ── 左下角「10% OFF」入口：白底圆角卡 + 阴影（参照站 mailing popup 的收起态） ── */
.n90 .n90-popup-tab {
  position: fixed;
  z-index: 40;
  left: 25px;
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 66px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, .12);
}
.n90 .n90-popup-tab__open {
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  font-family: Arial, var(--sans);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.n90 .n90-popup-tab__close {
  display: inline-flex;
  padding: 4px;
  border: 0;
  background: none;
  color: #444;
  cursor: pointer;
}

/* 平板 / 手机：商品一屏 2 张、集合一屏 1.6 / 1.1 张、圆形入口横滑 */
@media (max-width: 1023.98px) {
  .n90 .n90-products { gap: 14px; }
  .n90 .n90-card { flex-basis: calc((100% - 14px) / 2); }
  .n90 .n90-cols { gap: 16px; }
  .n90 .n90-cols__btn { padding: 12px 18px; font-size: 14px; }
  .n90 .n90-circles { justify-content: flex-start; }
}
@media (max-width: 599.98px) {
  .n90 [data-n90-home] .n90-title { font-size: 20px; }
  .n90 .n90-cols { grid-template-columns: minmax(0, 1fr); }
    .n90 .n90-arrow { width: 40px; height: 40px; }
  .n90 .n90-collab { align-items: flex-start; }
  .n90 .n90-popup-tab { left: 16px; bottom: 16px; height: 52px; padding: 0 16px; }
}
/* ── 入场动画（useEntrance 写 data-n90-anim：pending = 隐藏态，in = 播放；无 JS / 减少动态时不写 ⇒ 默认可见）──
   用独立的 translate / scale 属性而不是 transform：不和元素自身的 transform（如 About us 按钮的 translateX(-50%)）打架。
   过渡只挂在 `in` 上 ⇒ 写入 pending 时瞬间进入隐藏态，不会先反向播一遍。 */
.n90 [data-n90-anim="pending"] [data-n90-rise] { opacity: 0; translate: 0 32px; }
.n90 [data-n90-anim="in"] [data-n90-rise] {
  transition: opacity .8s ease, translate 1s cubic-bezier(.22, 1, .36, 1);
}
/* 波纹：列表项依次浮起（每项 90ms，整体晚标题 150ms 起播） */
.n90 [data-n90-anim="pending"] [data-n90-item] { opacity: 0; translate: 0 48px; scale: .94; }
.n90 [data-n90-anim="in"] [data-n90-item] {
  transition: opacity .7s ease, translate 1s cubic-bezier(.22, 1, .36, 1), scale 1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 150ms);
}
/* 景深推开（参照站 slideshow 原值）：图片 1.1 → 1，2s cubic-bezier(.41, .85, .6, .97)；整块同时淡入 */
.n90 .n90-hero__slide img { scale: 1.1; transition: scale 2s cubic-bezier(.41, .85, .6, .97); }
.n90 .n90-hero__slide.is-selected img { scale: 1; }
.n90 [data-n90-section="banner"] { overflow: hidden; }
.n90 [data-n90-section="banner"][data-n90-anim="pending"] img { scale: 1.1; opacity: 0; }
.n90 [data-n90-section="banner"][data-n90-anim="in"] img {
  transition: scale 2s cubic-bezier(.41, .85, .6, .97), opacity 1s ease;
}
.n90 [data-n90-section="hero"][data-n90-anim="pending"] .n90-hero__viewport { opacity: 0; }
.n90 [data-n90-section="hero"][data-n90-anim="in"] .n90-hero__viewport { transition: opacity 1s ease; }
.n90 [data-n90-section="banner"][data-n90-anim="in"] [data-n90-rise] { transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  .n90 :is(.n90-hero__slide, .n90-card__hover, .n90-circles__img img, .n90-cols__slide img, .n90-hero__slide img) { transition: none; }
  .n90 .n90-hero__slide img { scale: 1; }
}

/* =============================================================================
   列表页（NinetyNotesCollection：集合 / 类目，[data-n90-plp]）—— 参照 90notes.com/collections/all 1440 实测
   「Filter ‹」40px 细框开关 → 左 302px 手风琴筛选栏 + 30px 间距 + 右 4 列（列距 30 / 行距 70）2:3 卡片
   → 网格下居中页码 → 集合描述（24px 大写标题 + 14px 正文）
   ========================================================================== */
.n90 [data-n90-plp] { padding: 20px var(--n90-pad) 60px; }
.n90 [data-n90-plp] > * { margin-left: var(--n90-col); margin-right: var(--n90-col); }
.n90 .n90-plp__bar { margin-bottom: 20px; }
.n90 .n90-plp__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: 400 14px/1 var(--sans);
  cursor: pointer;
  transition: border-color .2s;
}
.n90 .n90-plp__toggle:hover { border-color: var(--ink); }
.n90 .n90-plp__toggle svg { flex: none; }
/* 开关右侧 chevron：展开时朝左（‹ = 收起），收起后朝右 */
.n90 .n90-plp__toggle-chev { transform: rotate(90deg); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }

.n90 .n90-plp__main {
  display: grid;
  grid-template-columns: 302px minmax(0, 1fr);
  column-gap: 30px;
  align-items: start;
}
.n90 [data-n90-plp][data-sidebar="closed"] .n90-plp__main { grid-template-columns: minmax(0, 1fr); }
.n90 [data-n90-plp][data-sidebar="closed"] .n90-plp__sidebar { display: none; }
.n90 [data-n90-plp][data-sidebar="closed"] .n90-plp__toggle-chev { transform: rotate(-90deg); }

/* 手风琴：每组 44px 行、底部 1px #dfdfdf；标题 TT Bluescreens 14px 大写；右侧 chevron 前一道竖分隔 */
.n90 .n90-plp__facets { margin: 0; padding: 0; list-style: none; }
.n90 .n90-plp__facet { border-bottom: 1px solid var(--line); }
.n90 .n90-plp__facet > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  cursor: pointer;
  list-style: none;
}
.n90 .n90-plp__facet > summary::-webkit-details-marker { display: none; }
.n90 .n90-plp__facet-title {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--ink);
}
.n90 .n90-plp__facet-icon {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 11px 0 12px;
  border-left: 1px solid var(--line);
  color: var(--ink);
}
.n90 .n90-plp__facet-icon svg { flex: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.n90 .n90-plp__facet[open] .n90-plp__facet-icon svg { transform: rotate(180deg); }
.n90 .n90-plp__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 2px 0 16px;
  list-style: none;
}
.n90 .n90-plp__facet[open] .n90-plp__options { animation: n90-facet-in .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes n90-facet-in {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}
.n90 .n90-plp__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 21px;
  text-decoration: none;
}
.n90 .n90-plp__option:hover { color: var(--n90-pink); }
.n90 .n90-plp__option[aria-current="true"] { font-weight: 700; }
.n90 .n90-plp__count { color: var(--muted); font-weight: 400; }
/* 复选框指示器：14px 细框方块，选中 = 实心 */
.n90 .n90-plp__check {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid #bdbdbd;
  background: #fff;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.n90 .n90-plp__option:hover .n90-plp__check { border-color: var(--ink); }
.n90 .n90-plp__option[aria-current="true"] .n90-plp__check {
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: inset 0 0 0 2px #fff;
}
/* 颜色：26px 方色块（2px 白边），选中加墨色外环 */
.n90 .n90-plp__swatch {
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.n90 .n90-plp__option[aria-current="true"] .n90-plp__swatch { box-shadow: 0 0 0 1px var(--ink); }

/* 生效条件（chips）：页面上看得见、可逐个清除 */
.n90 .n90-plp__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 24px; }
.n90 .n90-plp__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  transition: border-color .2s;
}
.n90 .n90-plp__chip:hover { border-color: var(--ink); }
.n90 .n90-plp__clear { color: var(--ink); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* 网格：4 列、列距 30、行距 40 */
.n90 .n90-plp__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.n90 .n90-pcard { text-align: center; }
.n90 .n90-pcard__media {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #f0f0f0;           /* 与首页商品卡同一口径：浅灰底 + 正片叠底 */
}
.n90 .n90-pcard__img { display: block; width: 100%; height: 100%; }
.n90 .n90-pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: opacity .4s ease;
}
.n90 .n90-pcard__img .n90-pcard__hover { position: absolute; inset: 0; opacity: 0; }
.n90 .n90-pcard:is(:hover, :focus-within) .n90-pcard__img .n90-pcard__hover { opacity: 1; }
/* 两张图都正片叠底 ⇒ 悬停时主图同步淡出，否则会从悬停图的白底处透出来 */
.n90 .n90-pcard:is(:hover, :focus-within) .n90-pcard__img:has(.n90-pcard__hover) img:not(.n90-pcard__hover) { opacity: 0; }
.n90 .n90-pcard__title {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}
.n90 .n90-pcard__title a { color: var(--ink); text-decoration: none; }
.n90 .n90-pcard__title a:hover { color: var(--n90-pink); }
.n90 .n90-pcard__price { margin: 8px 0 0; font-size: 14px; line-height: 21px; color: var(--ink); }
.n90 .n90-pcard__price s { margin-right: 6px; color: var(--muted); }
.n90 .n90-pcard__sale { color: var(--brand-danger); }

/* 快速加购：外观逐项照首页 NEW IN 的 `.n90-card__add`（44 浅灰圆 / 洋红细「+」/ 悬停洋红实底白字，
   无投影、无放大、无文字提示条；卡片悬停时淡入上浮 6px，触摸设备常显）；行为仍是全站 QuickAdd（真实规格弹窗）。列表卡 `.n90-pcard` 与首页 NEW IN 卡 `.n90-card`（真实商品）共用。
   「+」用两道 1.6px 伪元素画（组件自带的是提袋图标，只在主题里换形，不动共享组件）；加购成功仍显示组件的 ✓。 */
.n90 :is(.n90-pcard, .n90-card) .quick-add__button {
  background: #f4f4f4;
  color: var(--n90-pink);
  box-shadow: none;
  opacity: 0;
  transform: none;
  translate: 0 6px;
  transition: opacity .3s, translate .3s cubic-bezier(.22, 1, .36, 1), background-color .2s, color .2s;
}
.n90 :is(.n90-pcard, .n90-card) .quick-add__button:not([data-added]) .quick-add__icon { display: none; }
.n90 :is(.n90-pcard, .n90-card) .quick-add__button:not([data-added])::before,
.n90 :is(.n90-pcard, .n90-card) .quick-add__button:not([data-added])::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.6px;
  background: currentColor;
  translate: -50% -50%;
}
.n90 :is(.n90-pcard, .n90-card) .quick-add__button:not([data-added])::after { rotate: 90deg; }
/* 首页「+」没有文字提示条：读屏文字保持视觉隐藏 */
.n90 :is(.n90-pcard, .n90-card) .quick-add__button:is(:hover, :focus-visible) .quick-add__label {
  bottom: auto;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  animation: none;
}
.n90 :is(.n90-pcard, .n90-card):is(:hover, :focus-within) .quick-add__button,
.n90 :is(.n90-pcard, .n90-card) .quick-add__button:focus-visible { opacity: 1; translate: 0 0; }
.n90 :is(.n90-pcard, .n90-card) .quick-add__button:is(:hover, :active),
.n90 :is(.n90-pcard, .n90-card):is(:hover, :focus-within) .quick-add__button:is(:hover, :active) { transform: none; box-shadow: none; }
.n90 :is(.n90-pcard, .n90-card) .quick-add__button:hover,
.n90 :is(.n90-pcard, .n90-card) .quick-add__button[data-added] { background: var(--n90-pink); color: #fff; }
@media (hover: none) {
  .n90 :is(.n90-pcard, .n90-card) .quick-add__button { opacity: 1; translate: 0 0; }
}

/* 收藏心形（WishlistHeart，图片右上角）：透明底墨色细心形，悬停洋红；已收藏 = 实心洋红；点击微缩（与快速加购同一手感） */
.n90 .n90-pcard__media > [data-card-wishlist] {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.n90 .n90-pcard__media > [data-card-wishlist] svg { width: 20px; height: 20px; }
.n90 .n90-pcard__media > [data-card-wishlist]:hover,
.n90 .n90-pcard__media > [data-card-wishlist][aria-pressed="true"] { color: var(--n90-pink); }
.n90 .n90-pcard__media > [data-card-wishlist]:active { transform: scale(.88); }
.n90 .n90-pcard__media > [data-card-wishlist]:focus-visible { outline: 1px solid var(--ink); outline-offset: -6px; }
.n90 .n90-pcard__media > [data-card-wishlist]:disabled { opacity: .6; cursor: progress; }

/* 页码：粗体 14px、内边距 4/6，当前页纯黑下划线，箭头 chevron */
.n90 .n90-plp__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 70px;
  font-size: 14px;
  font-weight: 700;
}
.n90 .n90-plp__pager-num,
.n90 .n90-plp__pager-gap { padding: 4px 6px; line-height: 1.2; color: var(--ink); text-decoration: none; }
.n90 .n90-plp__pager-num[aria-current="page"] { color: #000; box-shadow: inset 0 -1px 0 #000; }
.n90 a.n90-plp__pager-num:hover { color: var(--n90-pink); }
.n90 .n90-plp__pager-arrow { display: inline-flex; align-items: center; padding: 8px 14px; color: var(--ink); }
.n90 .n90-plp__pager-arrow:hover { color: var(--n90-pink); }
.n90 .n90-plp__pager-prev { transform: rotate(90deg); }
.n90 .n90-plp__pager-next { transform: rotate(-90deg); }

.n90 .n90-plp__empty { padding: 60px 0; text-align: center; }
.n90 .n90-plp__empty p { margin: 0 0 24px; font-size: 16px; }

/* 集合头部（参照站 initial-kettingen / charm-bar / amore）：通栏画布（后台「编辑画布」自由叠放，按屏宽等比缩放）→ 居中 TT Bluescreens 大写标题 + 介绍（Karla 14px，限宽 720）
   画布取 CMS `meta.canvas`、介绍取 `description`；都没有 ⇒ 不出，页面直接从筛选条开始 */
.n90 .n90-canvas { position: relative; width: 100%; height: 0; overflow: hidden; }
.n90 .n90-canvas__item { position: absolute; display: block; }
.n90 .n90-canvas__item > :is(img, video, iframe) { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.n90 .n90-plp__intro { max-width: 720px; margin: 0 auto; padding: 40px 0 30px; text-align: center; }
.n90 .n90-plp__intro-title {
  margin: 0 0 15px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
}
.n90 .n90-plp__intro p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink); white-space: pre-line; }

/* ≤1023：筛选栏默认收起（开关点开后叠在网格上方通栏）；网格 2 列（参照站 sm-span-6） */
@media (max-width: 1023.98px) {
  .n90 .n90-plp__main { grid-template-columns: minmax(0, 1fr); }
  .n90 [data-n90-plp]:not([data-sidebar="open"]) .n90-plp__sidebar { display: none; }
  .n90 [data-n90-plp]:not([data-sidebar="open"]) .n90-plp__toggle-chev { transform: rotate(-90deg); }
  .n90 [data-n90-plp][data-sidebar="open"] .n90-plp__sidebar { margin-bottom: 28px; }
  .n90 .n90-plp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .n90 .n90-plp__pager { margin-top: 48px; }
  .n90 .n90-plp__intro { padding: 28px 0 20px; }
  .n90 .n90-plp__intro-title { font-size: 22px; }
}
@media (max-width: 599.98px) {
  .n90 .n90-pcard__title { font-size: 13px; }
}

/* =============================================================================
   页脚（StoreFooter footerLayout="notes90"）
   ========================================================================== */
.n90 [data-footer-layout="notes90"] {
  background: #f5f5f5;
  color: #000;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 19.5px;
}
.n90 [data-footer-layout="notes90"] [data-nf-inner] { padding: 40px var(--n90-pad) 50px; }
.n90 [data-footer-layout="notes90"] [data-nf-inner] > * { margin-left: var(--n90-col); margin-right: var(--n90-col); }
.n90 [data-footer-layout="notes90"] a { color: #000; text-decoration: none; }
.n90 [data-footer-layout="notes90"] a:hover { color: var(--n90-pink); }

/* 上段：logo 245 | 栏目等分 | 订阅栏 350 */
.n90 [data-nf-top] { display: flex; align-items: flex-start; }
.n90 [data-nf-top] > [data-footer-brand] { flex: 0 0 245px; }
.n90 [data-nf-top] > [data-footer-brand] img { width: 140px; height: auto; mix-blend-mode: multiply; }  /* 白底 logo 融进灰底 */
.n90 [data-nf-top] > [data-footer-brand] span {
  font-family: var(--display);
  font-size: 40px;
  line-height: 1;
  color: var(--n90-pink);
  text-transform: uppercase;
}
.n90 [data-nf-col] { flex: 1 1 0; min-width: 0; padding-right: 24px; }
.n90 [data-nf-col][data-nf-signup] { flex: 0 0 350px; padding-right: 0; }
.n90 [data-nf-heading] {
  margin: 0 0 15px;
  font-family: var(--n90-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--n90-pink);
}
.n90 [data-nf-col] ul { display: flex; flex-direction: column; gap: 1.5px; margin: 0; padding: 0; list-style: none; }
.n90 [data-nf-col] p { margin: 0; }
.n90 [data-nf-signup] p { margin-bottom: 9px; }
.n90 [data-nf-signup-bar] { position: relative; }
.n90 [data-nf-signup-bar] input {
  width: 100%;
  height: 50px;
  padding: 8px 60px 8px 20px;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: 0;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: 13.33px;
}
.n90 [data-nf-signup-bar] input::placeholder { color: #000; opacity: 1; }
.n90 [data-nf-signup-bar] input:focus { outline: none; border-color: #000; }
.n90 [data-nf-signup-bar] button {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
}
.n90 [data-nf-signup-bar] button svg { flex: none; transition: transform .2s; }
.n90 [data-nf-signup-bar] button:hover svg { transform: translateX(3px); }

/* 下段：社交 | 语言 / 版权 | 支付图标 */
.n90 [data-nf-bottom] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "social lang" "credits pay";
  align-items: center;
  gap: 30px 24px;
  margin-top: 55px;
}
.n90 [data-nf-social] { grid-area: social; }
.n90 [data-nf-lang] { grid-area: lang; justify-self: end; }
.n90 [data-nf-credits] { grid-area: credits; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.n90 [data-nf-payments] { grid-area: pay; justify-self: end; }
.n90 [data-nf-social] ul { display: flex; gap: 14px; margin: 0; padding: 0 5px; list-style: none; }
.n90 [data-nf-social] a { display: inline-flex; align-items: center; height: 30px; }
.n90 [data-nf-social] svg { width: 14px; height: 14px; flex: none; }
.n90 [data-nf-credits] :is(a, button, span) { font-size: 13px; color: #000; }
/* 页脚语言（N90FooterLangSwitcher）：参照站 50 高黑细框直角按钮「地球 + 语言名 + chevron」；
   点开向上弹出白底细框直角菜单（14px 行、悬停浅粉底、当前语言洋红 + 勾），淡入上浮 .2s */
.n90 .n90-lang { position: relative; }
.n90 .n90-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
  height: 50px;
  padding: 0 18px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 400 14px/1 var(--sans);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.n90 .n90-lang__btn > span { flex: 1; text-align: left; }
.n90 .n90-lang__btn:hover { border-color: var(--n90-pink); color: var(--n90-pink); }
.n90 .n90-lang__btn:focus-visible { outline: 2px solid var(--n90-pink); outline-offset: 2px; }
.n90 .n90-lang__chev { flex: none; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.n90 .n90-lang[data-open] .n90-lang__chev { transform: rotate(180deg); }
.n90 .n90-lang__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  min-width: 100%;
  margin: 0;
  padding: 6px 0;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  list-style: none;
  outline: none;
  animation: n90-lang-in .2s cubic-bezier(.22, 1, .36, 1);
}
@keyframes n90-lang-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
.n90 .n90-lang__menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 18px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}
.n90 .n90-lang__menu li[data-active] { background: var(--n90-tint, #fff0f6); color: var(--n90-pink); }
.n90 .n90-lang__menu li[aria-selected="true"] { color: var(--n90-pink); font-weight: 700; }
.n90 .n90-lang__menu li svg { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .n90 .n90-lang__menu { animation: none; }
}

@media (max-width: 1023.98px) {
  .n90 [data-nf-top] { flex-direction: column; gap: 40px; }
  .n90 [data-nf-top] > [data-footer-brand],
  .n90 [data-nf-col],
  .n90 [data-nf-col][data-nf-signup] { flex: none; width: 100%; padding-right: 0; }
  .n90 [data-nf-bottom] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lang" "pay" "social" "credits";
    gap: 24px;
  }
  .n90 [data-nf-lang],
  .n90 [data-nf-payments] { justify-self: start; }
}

/* =============================================================================
   购物车 / mini 购物车 / 个人中心 / 结算页 / 订单完成页：换成 90notes 主题色（2026-11-02 用户口径）
   主色 = 洋红 --n90-pink（悬停 --n90-pink-hover）；选中 / 当前态 = 洋红描边 + 浅粉底 --n90-tint；全部直角。
   结算页与订单页的 Shopify 蓝皮肤（styles/checkout-shopify.css，全带 !important、在本文件之后引入）
   ⇒ 照 gimme 同一手法：多一层 `.n90` + 同强度 !important 逐条覆盖。只动视觉，不动结账逻辑 / Adyen 挂载点。
   ========================================================================== */
.n90 { --n90-tint: #fff0f6; }

/* ── mini 购物车（CartDrawer）：参照站 Vantage quick cart（2026-11-02 用户截图）──
   面板 440 宽、纯黑 55% 遮罩；头部 = 右上 × 单独一行 → 「CART €418,79 EUR」（Karla 700 大写）+ 右侧「23 ITEM(S)」；
   行 = 70px 缩略图 | 标题大写 13px + 规格 · 右上行合计 · 下方 100×40 细框「- 1 +」· 右下细 ×；
   底部 = Subtotal / Shipping「Calculated at checkout」→ 分隔线 → Total → 「View Cart」「Check Out」并排洋红直角按钮。
   结构差异（标题合计 / 件数 / 底部三行 / 双按钮 / × 图标）由 CartDrawer 的 90notes 分支渲染，这里只管皮肤。 */
.n90 .cart-drawer-scrim { background: rgba(0, 0, 0, .55); backdrop-filter: none; }
.n90 [data-state="open"] .cart-drawer-scrim { backdrop-filter: none; }
.n90 .cart-drawer-panel { max-width: min(440px, 100vw); font-family: var(--sans); color: var(--ink); }

.n90 .cart-drawer-panel > header[data-n90-cart-head] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "close close" "title count";
  align-items: center;
  row-gap: 18px;
  padding: 14px 24px 22px;
}
.n90 [data-n90-cart-head] > .ghost-icon--close { grid-area: close; justify-self: end; margin-right: -12px; }
.n90 [data-n90-cart-head] > h2 {
  grid-area: title;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ink);
}
.n90 [data-n90-cart-head] > [data-cart-count] {
  grid-area: count;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* 行：上下 15 / 左右 24，行间 1px 分隔 */
.n90 .cart-drawer-panel .cart-line + .cart-line { border-top: 1px solid var(--line); }
/* 全站行间分隔（tailwind.css `.cart-line + .cart-line::before`，左右缩进的细线）与上面的通栏 border 重复 ⇒ 去掉 */
.n90 .cart-drawer-panel .cart-line + .cart-line::before { content: none; }
.n90 .cart-drawer-panel .cart-line__inner > div { gap: 30px; padding: 15px 24px; }
.n90 .cart-drawer-panel .cart-line__thumb { width: 70px; aspect-ratio: 2 / 3; border-radius: 0; background: #f0f0f0; }
.n90 .cart-drawer-panel .cart-line__thumb img { mix-blend-mode: multiply; }
/* 右栏改成 2×2 网格：标题 | 行合计 / 数量 | 删除（两层原有 flex 行 display: contents 摊平） */
.n90 .cart-drawer-panel .cart-line__inner > div > div:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: 12px;
}
.n90 .cart-drawer-panel .cart-line__inner > div > div:last-child > div { display: contents; }
.n90 .cart-drawer-panel .cart-line__inner > div > div:last-child > div > div:first-child:not([role]) { grid-area: 1 / 1; }
.n90 .cart-drawer-panel .cart-line__inner > div > div:last-child > div > button { grid-area: 2 / 2; align-self: end; justify-self: end; width: 28px; height: 28px; margin: 0 -6px -4px 0; color: var(--ink); }
.n90 .cart-drawer-panel .cart-line__inner > div > div:last-child > div > button:hover { color: var(--n90-pink); }
.n90 .cart-drawer-panel .cart-line__inner > div > div:last-child > div > [role="group"] { grid-area: 2 / 1; align-self: start; justify-self: start; margin-top: 16px; }
.n90 .cart-drawer-panel .cart-line__inner > div > div:last-child > div > .text-right { grid-area: 1 / 2; align-self: start; }
.n90 .cart-drawer-panel [data-cart-line-title] { font-size: 13px; line-height: 1.35; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.n90 .cart-drawer-panel [data-cart-line-title]:hover { color: var(--n90-pink); }
.n90 .cart-drawer-panel [data-cart-line-variant] { margin-top: 8px; padding: 0; border-radius: 0; background: none; font-size: 13px; color: var(--ink); }
/* 购物车行「换规格」（CartVariantChange，主题开关 cartChrome.variantChange）：规格名后的下划线文字钮，悬停洋红（mini 购物车与 /cart 同款） */
.n90 .cart-variant-change {
  display: inline-block;
  margin: 8px 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .2s;
}
.n90 .cart-variant-change:hover,
.n90 .cart-variant-change:focus-visible { color: var(--n90-pink); }
.n90 .cart-drawer-panel [data-cart-line-price] { font-size: 13px; font-weight: 400; }
/* 数量：100×40 细框直角，减 / 数 / 加三等分 */
.n90 .cart-drawer-panel [role="group"] { display: inline-flex; align-items: stretch; width: 100px; height: 40px; gap: 0; border: 1px solid var(--line); }
.n90 .cart-drawer-panel [role="group"] button { flex: 1; width: auto; min-width: 0; height: 100%; border-radius: 0; background: transparent; }
.n90 .cart-drawer-panel [role="group"] button svg { width: 10px; height: 10px; }
.n90 .cart-drawer-panel [role="group"] button:not(:disabled):hover { background: transparent; color: var(--n90-pink); }
.n90 .cart-drawer-panel [role="group"] input { width: 32px; height: 100%; border-radius: 0; font-size: 13px; }
.n90 .cart-drawer-panel [role="group"] input:hover,
.n90 .cart-drawer-panel [role="group"] input:focus { background: transparent; box-shadow: none; }

/* 底部 */
.n90 [data-n90-cart-foot] { padding: 20px 24px max(24px, env(safe-area-inset-bottom)); border-top: 0; box-shadow: none; }
.n90 [data-n90-cart-foot] dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.4; }
.n90 [data-n90-cart-foot] dl > div + div { margin-top: 8px; }
.n90 [data-n90-cart-foot] dd { margin: 0; text-align: right; }
.n90 [data-n90-cart-foot] [data-n90-cart-total-row] { margin-top: 20px; padding-top: 30px; border-top: 1px solid var(--line); }
.n90 [data-n90-cart-actions] { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 16px; }
.n90 [data-n90-cart-actions] a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--n90-pink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .075em;
  text-decoration: none;
  transition: background-color .2s;
}
.n90 [data-n90-cart-actions] a:hover { background: var(--n90-pink-hover); color: #fff; }

/* ── 购物车页（CartView）── */
.n90 [data-cart-scope] h1 { font-family: var(--display); font-size: 30px; letter-spacing: 2px; text-transform: uppercase; }
.n90 [data-cart-scope] [data-cart-summary] h2 { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: 1.35px; text-transform: uppercase; }
.n90 [data-cart-scope] [data-cart-line-title] a:hover,
.n90 [data-cart-scope] [data-cart-remove]:hover { color: var(--n90-pink); }
/* 数量框 − / +：悬停洋红——购物车页、商品详情页（[data-pdp-info]）、快速加购弹窗同一口径 */
.n90 :is([data-cart-scope] [data-cart-qty], [data-pdp-info], .quick-add-dialog) [role="group"] button:not(:disabled):hover { color: var(--n90-pink); }
/* 点进数字框（手输数量）：整组描边洋红（购物车页原来保持浅灰、详情 / 弹窗变墨色，三处统一） */
.n90 :is([data-cart-scope] [data-cart-qty], [data-pdp-info], .quick-add-dialog) [role="group"]:focus-within { border-color: var(--n90-pink) !important; }
.n90 [data-cart-scope] [data-cart-total] > :last-child { color: var(--n90-pink); }
/* 次按钮（Apply / Support 等描边按钮）：悬停 = 洋红描边 + 洋红字 + 浅粉底 */
.n90 :is([data-cart-scope], [data-account-scope]) .ui-btn:not([data-variant="primary"]):not(:disabled):hover {
  border-color: var(--n90-pink);
  background: var(--n90-tint);
  color: var(--n90-pink);
}

/* ── 个人中心（account/layout + 各子页）── */
.n90 [data-account-scope] [data-account-nav] a[aria-current="page"] {
  background: var(--n90-tint);
  color: var(--n90-pink);
  box-shadow: inset 2px 0 0 var(--n90-pink);
}
.n90 [data-account-scope] [data-account-nav] a:not([aria-current]):hover { background: var(--n90-tint); color: var(--n90-pink); }
.n90 [data-account-scope] [data-account-nav] a[aria-current="page"] svg { color: var(--n90-pink); }
.n90 [data-account-scope] [data-account-card] > header h2 { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: 1.35px; text-transform: uppercase; }
.n90 [data-account-scope] [data-account-empty] .rounded-full { background: var(--n90-tint); color: var(--n90-pink); }
.n90 [data-account-scope] [data-account-content] a:not(.ui-btn):hover { color: var(--n90-pink); }
.n90 [data-account-scope] [data-account-nav] button:hover { border-color: var(--n90-pink); color: var(--n90-pink); }

/* ── 结算页（CheckoutChrome + CheckoutView）── */
.n90 [data-checkout-header] { background: #fff; border-bottom-color: var(--line) !important; }
/* 结算页 logo：共享 CheckoutChrome 是 h-8 / lg:h-11 ⇒ 90notes 放大到 48 / lg:64（≈ lg:h-16） */
.n90 [data-checkout-brand] img { height: 48px; }
@media (min-width: 1024px) {
  .n90 [data-checkout-brand] img { height: 64px; }
}
.n90 .checkout-scope { font-family: var(--sans) !important; color: var(--ink); }
.n90 .checkout-scope :is(h1, h2, h3, h4, .font-display, [data-group-title]) {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}
.n90 .checkout-scope a { color: var(--n90-pink) !important; }
.n90 .checkout-scope a:hover { color: var(--n90-pink-hover) !important; }
.n90 .checkout-scope a.ui-btn[data-variant="primary"],
.n90 .checkout-scope a.ui-btn[data-variant="primary"]:hover { color: #fff !important; }
.n90 .checkout-scope :is([data-continue-button], button[type='submit']) {
  background: var(--n90-pink) !important;
  border-color: var(--n90-pink) !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
}
.n90 .checkout-scope :is([data-continue-button], button[type='submit']):hover {
  background: var(--n90-pink-hover) !important;
  border-color: var(--n90-pink-hover) !important;
}
.n90 .checkout-scope :is(input:not([type='radio']):not([type='checkbox']), select, textarea, .sf-phone, [data-billing-fields] input) {
  border-radius: 0 !important;
  color: var(--ink) !important;
}
.n90 .checkout-scope :is(input:not([type='radio']):not([type='checkbox']), select, textarea, [data-billing-fields] input):focus,
.n90 .checkout-scope .sf-phone:focus-within {
  border-color: var(--n90-pink) !important;
  box-shadow: inset 0 0 0 1px var(--n90-pink) !important;
}
.n90 .checkout-scope :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--n90-pink); }
/* Review 面板每行的「Change」：CheckoutView 写死 Shopify 蓝 text-[#1773b0] */
.n90 .checkout-scope [data-review-panel] button[class*="text-[#1773b0]"] { color: var(--n90-pink) !important; transition: color .2s ease; }
.n90 .checkout-scope [data-review-panel] button[class*="text-[#1773b0]"]:hover { color: var(--n90-pink-hover) !important; }
/* 配送 / 账单 / 支付方式卡片：直角；选中 = 洋红描边 + 浅粉底 */
.n90 .checkout-scope :is([data-payment-methods] label, [data-shipping-list] label, [data-shipping-list] [data-shipping-row], [data-shipping-methods] label, [data-billing-choices] label) {
  border-radius: 0 !important;
}
.n90 .checkout-scope :is([data-payment-methods] label, [data-shipping-methods] label, [data-billing-choices] label):has(input:checked),
.n90 .checkout-scope :is([data-shipping-list] label:has(input:checked), [data-shipping-list] [data-shipping-row][data-active='true']) {
  background: var(--n90-tint) !important;
  border-color: var(--n90-pink) !important;
  box-shadow: inset 0 0 0 1px var(--n90-pink) !important;
  outline-color: var(--n90-pink) !important;
}
.n90 .checkout-scope [data-checkout-payment-element] :is(.adyen-checkout__payment-method, .adyen-checkout__payment-method--selected) { border-radius: 0 !important; }
.n90 .checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--selected {
  background: var(--n90-tint) !important;
  border-color: var(--n90-pink) !important;
  box-shadow: inset 0 0 0 1px var(--n90-pink) !important;
  outline-color: var(--n90-pink) !important;
}

/* ── 订单完成 / 订单详情（orders/[orderNo]，`.order-shopify`）── */
.n90 .order-shopify { font-family: var(--sans) !important; color: var(--ink) !important; }
.n90 .order-shopify :is(h1, h2) {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}
.n90 .order-shopify [data-order-paid-banner] {
  background: var(--n90-tint) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--n90-pink) !important;
  border-radius: 0 !important;
}
.n90 .order-shopify [data-order-paid-banner] p { color: var(--ink) !important; }
.n90 .order-shopify [data-order-totals] > div:last-of-type > span:last-child { color: var(--n90-pink) !important; }
.n90 .order-shopify a:not(.ui-btn) { color: var(--n90-pink) !important; text-underline-offset: 4px !important; }
.n90 .order-shopify a:not(.ui-btn):hover { color: var(--n90-pink-hover) !important; }
.n90 .order-shopify :is(a.ui-btn, button, input, select, textarea, .rounded-brand, [data-item-thumb]) { border-radius: 0 !important; }
.n90 .order-shopify a.ui-btn:not([data-variant="primary"]):hover {
  color: var(--n90-pink) !important;
  border-color: var(--n90-pink) !important;
  background: var(--n90-tint) !important;
}

/* =============================================================================
   详情页（ProductDetail 在 90notes 下）：左侧图库 45%；底部「You may also like」居中 + 列表页同款卡片 / 网格
   ========================================================================== */
@media (min-width: 1024px) {
  .n90 [data-pdp-gallery] { width: 45%; }
}
/* ── 详情页信息列 / 主图：融合参照站 Vantage 版式（2026-11-02 用户口径「设计稿不好看，和现在的详情融合一版」）──
   保留：缩略图 + 主图画廊、放大镜 / 全屏图集、分享、收藏、信任条（功能一项不砍）；
   吸收：TT Bluescreens 大写标题、小号价格、「Colour | 值」细标签、方形规格块、墨色细框数量、
         大写小标题 + 细分隔线的分区（Description / Specifications / 其它折叠项）、灰底「信任」框、主图右上圆形放大镜。 */
.n90 [data-pdp-info] > h1 {
  margin-top: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ink);
}
.n90 [data-pdp-info] > p:has(> [data-pdp-price]) { margin: 12px 0 24px; font-size: 18px; font-weight: 700; color: var(--ink); }
.n90 [data-pdp-info] [data-attr-heading] { font-size: 13px; color: var(--ink); }
/* 规格块：方形、1px 细边；选中 = 墨色边 + 2px 白内圈 */
.n90 [data-pdp-variants] [data-attr-group] :is(button, a, label) { border-radius: 0 !important; }
.n90 [data-pdp-variants] [data-attr-group] [class*="rounded-["] { border-radius: 0 !important; }
/* 数量：墨色细框、40 高（参照站 1px 黑框小步进器） */
.n90 [data-pdp-info] [role="group"] { height: 44px; border-color: var(--ink); border-radius: 0; }
.n90 [data-pdp-info] [role="group"] button { width: 40px; border-radius: 0; }
.n90 [data-pdp-info] [role="group"] input { width: 44px; font-size: 14px; }
/* 加购：50 高、14px 粗体加字距（与 mini 购物车 / 卡片按钮同一口径） */
/* 加购：固定 340 宽（不再整行拉满；参照站按钮约 300 宽）、50 高、14px 粗体加字距；≤599 手机仍整行 */
.n90 [data-pdp-atc-row] [data-atc] { width: 340px; max-width: 100%; min-height: 50px; font-size: 14px; font-weight: 700; letter-spacing: .075em; border-radius: 0; }
@media (max-width: 599.98px) {
  .n90 [data-pdp-atc-row] [data-atc] { width: 100%; }
}
/* 收藏：方形细框，悬停洋红 */
.n90 [data-pdp-wishlist] { border-radius: 0 !important; border-color: var(--line); font-size: 13px; }
.n90 [data-pdp-wishlist]:hover { border-color: var(--n90-pink); color: var(--n90-pink); }
/* 分享：去掉顶线（下面分区自带分隔），图标方形细框 */
.n90 [data-pdp-share] { border-top: 0; padding-top: 0; }
.n90 [data-pdp-share] :is(a, button) { border-radius: 0 !important; }
.n90 [data-pdp-share] :is(a, button):hover { border-color: var(--n90-pink); color: var(--n90-pink); }
/* 分区标题：TT Bluescreens 13px 大写 + 下细线（参照站「PRODUCT DESCRIPTION ─」） */
.n90 :is([data-pdp-description], [data-pdp-specs]) > h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ink);
}
.n90 [data-pdp-description] > div { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.n90 [data-pdp-specs] li { font-size: 14px; }
.n90 [data-pdp-specs] li > :last-child { color: var(--ink); }
.n90 [data-pdp-info] details > summary > span:first-child {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.n90 [data-pdp-info] details > summary > span[aria-hidden] { color: var(--ink); font-size: 18px; }
.n90 [data-pdp-info] details > div { color: var(--ink); }
/* 信任条 → 参照站「Safe online shopping」灰底框 */
.n90 [data-pdp-trust] { gap: 16px; padding: 20px; border-top: 0; background: #f4f4f4; }
.n90 [data-pdp-trust-item] > span:first-child { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; }
/* 主图「查看全屏」提示 → 右上角 36px 浅粉圆钮 + 洋红放大镜（文字仅读屏，可访问名不变） */
.n90 [data-pdp-gallery] [data-pdp-zoom-hint] {
  top: 14px;
  right: 14px;
  bottom: auto;
  width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: var(--n90-tint, #fff0f6);
  color: var(--n90-pink);
  transition: background-color .2s, color .2s, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.n90 [data-pdp-gallery] [data-pdp-zoom-hint]:hover { background: var(--n90-pink); color: #fff; transform: scale(1.06); }
.n90 [data-pdp-gallery] [data-pdp-zoom-hint] svg { width: 16px; height: 16px; }
.n90 [data-pdp-gallery] [data-pdp-zoom-hint] > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 1023.98px) {
  .n90 [data-pdp-info] > h1 { font-size: 24px; }
}

.n90 [data-n90-related] { margin-top: 90px; }
.n90 .n90-related__title {
  margin: 0 0 30px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.8px;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
}
/* 列表页 4 列卡宽；不足 4 个时整排居中（flex 换行而非 grid，空列不会把卡挤到左边） */
.n90 [data-n90-related] .n90-plp__grid { display: flex; flex-wrap: wrap; justify-content: center; }
.n90 [data-n90-related] .n90-plp__grid > li { width: calc((100% - 90px) / 4); }
@media (max-width: 1023.98px) {
  .n90 [data-n90-related] { margin-top: 56px; }
  .n90 .n90-related__title { margin-bottom: 20px; font-size: 20px; }
  .n90 [data-n90-related] .n90-plp__grid > li { width: calc((100% - 16px) / 2); }
}

/* =============================================================================
   About us（pages/[slug] 的 90notes 分支 `/pages/about-us`，`[data-n90-about]`）—— 参照站 image-with-text
   每段两栏各半、#f5f5f5 底，段间 25px（参照站 section-padding / 2）；文案栏 40px 内边距、行距 20px、垂直居中；
   ≤740 叠成一列、文字在上居中（参照站 .iwt__caption.m-center）
   ========================================================================== */
.n90 [data-n90-about] { padding: 0 var(--n90-pad) 60px; }
.n90 .n90-iwt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  margin-top: 25px;
  background: #f5f5f5;
  color: #000;
}
.n90 .n90-iwt:not([data-image-first]) .n90-iwt__media { order: 2; }
.n90 .n90-iwt__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.n90 .n90-iwt__caption {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  padding: 40px;
}
.n90 .n90-iwt__caption h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.n90 .n90-iwt__caption p { margin: 0; font-size: 14px; line-height: 1.6; }
@media (max-width: 740px) {
  .n90 .n90-iwt { grid-template-columns: minmax(0, 1fr); }
  .n90 .n90-iwt .n90-iwt__media { order: 2; }
  .n90 .n90-iwt__caption { align-items: center; text-align: center; padding: 32px 20px; }
  .n90 .n90-iwt__caption h2 { font-size: 20px; }
}

/* =============================================================================
   搜索页（search/page.tsx 的 90notes 分支，`[data-n90-search]`）—— 参照站 search 模板（2026-11-02 设计稿）
   居中 TT Bluescreens 大写标题 → 居中 720 宽细框输入框（放大镜在右）→ 结果说明 → 居中「PRODUCTS」
   → 4 列卡片（列表页同卡）→「Showing item(s) 1-24 of N.」→ 页码
   ========================================================================== */
.n90 [data-n90-search] { padding: 60px var(--n90-pad) 80px; }
.n90 .n90-search__head { text-align: center; }
.n90 .n90-search__title {
  margin: 0 0 30px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
}
.n90 .n90-search__form {
  display: flex;
  align-items: center;
  width: min(720px, 100%);
  height: 50px;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: #fff;
  transition: border-color .2s;
}
.n90 .n90-search__form:focus-within { border-color: var(--ink); }
.n90 .n90-search__form input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 0 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 12px/1 var(--sans);
  outline: none;
  box-shadow: none;
  appearance: none;
}
.n90 .n90-search__form input::-webkit-search-cancel-button { display: none; }
.n90 .n90-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.n90 .n90-search__submit:hover { color: var(--n90-pink); }
.n90 .n90-search__lead { margin: 24px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink); }
.n90 .n90-search__results { margin-top: 30px; }
.n90 .n90-search__heading {
  margin: 0 0 40px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
}
.n90 .n90-search__range { margin: 70px 0 0; font-size: 12px; text-align: center; color: var(--ink); }
.n90 .n90-search__range + .n90-plp__pager { margin-top: 16px; }
.n90 .n90-search__empty { margin: 40px auto 0; max-width: 560px; text-align: center; font-size: 14px; line-height: 1.6; }
.n90 .n90-search__empty p { margin: 0 0 8px; }
.n90 .n90-search__empty .n90-btn { margin-top: 16px; }
@media (max-width: 1023.98px) {
  .n90 [data-n90-search] { padding-top: 36px; }
  .n90 .n90-search__title { margin-bottom: 20px; font-size: 20px; }
  .n90 .n90-search__heading { margin-bottom: 24px; }
  .n90 .n90-search__range { margin-top: 48px; }
}

/* 快速加购弹窗（QuickAdd 的 <dialog>）：整体直角——弹窗本体 / 左侧图区 / 「Scroll for more」胶囊 / 规格色块缩略图
   （× 关闭仍是幽灵圆钮，与全站一致；列表上的「+」入口保持圆形） */
.n90 .quick-add-dialog,
.n90 .quick-add-dialog__media-wrap,
.n90 .quick-add-dialog__more,
.n90 .quick-add-dialog [class*="rounded-["] { border-radius: 0 !important; }

/* 登录 / 注册抽屉（AuthDrawer「Sign in or create an account」）：输入框直角（共享 Field 是 5px 圆角） */
.n90 [data-auth-drawer-panel] :is(input, select, textarea) { border-radius: 0 !important; }
/* 聚焦态：共享 Field 是蓝色描边 ⇒ 换洋红 */
.n90 [data-auth-drawer-panel] :is(input, select, textarea):focus,
.n90 [data-auth-drawer-panel] :is(input, select, textarea):focus-visible {
  border-color: var(--n90-pink) !important;
  box-shadow: inset 0 0 0 1px var(--n90-pink) !important;
  outline: none !important;
}

/* 个人中心两栏（account/layout `[data-account-shell]`）：90notes 内容区铺满（--brand-max: none），
   而各子页内容列收口 880 ⇒ 整组偏左、右侧大片留白。改成「左栏 216 + 间距 40 + 内容 880」整组 1136 宽居中，
   内容列在这 880 内铺满（订单页本身没收口，也统一到同一宽度）。≤1023 仍是单列堆叠，不受影响。 */
@media (min-width: 1024px) {
  .n90 [data-account-scope] [data-account-shell] > div { max-width: 1136px; margin-inline: auto; }
  .n90 [data-account-scope] [data-account-shell] [data-account-content] { max-width: none; }
}

/* 90 NOTES footer 订阅：显式同意 + 提交反馈（2026-11-04） */
.n90 [data-nf-signup] [data-n90-footer-consent] {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.45;
  color: #555;
}
.n90 [data-nf-signup] [data-n90-footer-consent] input { margin-top: 2px; accent-color: var(--n90-pink); }
.n90 [data-nf-signup] [data-n90-footer-notice] { margin-top: 8px; font-family: var(--sans); font-size: 12px; line-height: 1.45; }
.n90 [data-nf-signup] [data-n90-footer-notice="ok"] { color: #0c5132; }
.n90 [data-nf-signup] [data-n90-footer-notice="error"] { color: #8e1f0b; }
.n90 [data-nf-signup] button:disabled { opacity: .55; }

/* ── 售后申请表单（ReturnRequestForm，`[data-return-*]` 钩子）—— 对齐账户卡：
   标题 = 卡片标题同款窄体大写；商品保留细框卡（同账户卡），选中 = 洋红描边 + 浅粉底（同侧栏当前项口径）；
   勾选 / 悬停 / 上传框悬停用 --n90-pink；提示框浅粉底；步进器保留胶囊（同状态胶囊）。 */
.n90 [data-account-scope] [data-return-form] [data-return-title] {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.n90 [data-account-scope] [data-return-form] [data-return-card] { border-color: var(--line); }
.n90 [data-account-scope] [data-return-form] [data-return-card]:not([data-selected]):not([data-return-final-sale]):hover { border-color: var(--n90-blush); }
.n90 [data-account-scope] [data-return-form] [data-return-card][data-selected] {
  border-color: var(--n90-pink);
  box-shadow: 0 0 0 1px var(--n90-pink);
}
.n90 [data-account-scope] [data-return-form] [data-return-card][data-selected] > div:first-child { background: var(--n90-tint); }
.n90 [data-account-scope] [data-return-form] [data-return-item-reason] { border-top-color: var(--n90-blush); }
.n90 [data-account-scope] [data-return-form] [data-return-check] { border-color: var(--line-strong); }
.n90 [data-account-scope] [data-return-form] [data-selected] [data-return-check] { border-color: var(--n90-pink); background: var(--n90-pink); }
.n90 [data-account-scope] [data-return-form] [data-return-policy] { background: var(--n90-tint); }
.n90 [data-account-scope] [data-return-form] [data-return-policy] svg { color: var(--n90-pink); }
.n90 [data-account-scope] [data-return-form] [data-return-photo-add]:hover { border-color: var(--n90-pink); color: var(--n90-pink); }
.n90 [data-account-scope] [data-return-form] [data-return-label] { font-family: var(--display); letter-spacing: 1px; text-transform: uppercase; }

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/checkout-shopify.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
   结算页 Shopify 化皮肤（2026-10-24 用户截图：「saas-c 的结算页改成这样，一模一样」）
   -----------------------------------------------------------------------------
   · 只作用于 `.checkout-scope`（CheckoutView 根节点），不影响店铺其它页面；
   · 覆盖的是**视觉 token**（字体 / 颜色 / 圆角 / 右栏灰底 / 蓝色主按钮 / 支付卡片），
     不改任何结账逻辑、金额计算、Adyen 挂载点；
   · 未分层（在 tailwind.css 之后引入）⇒ 能压过品牌模板的 `.lume` 无层规则；
     个别属性用 `!important` 是为了压过 Tailwind 工具类 + 品牌模板双重来源。
   ============================================================================= */

.checkout-scope {
  /* Shopify Checkout 的字体栈（系统无衬线，不加载外部字体） */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important;
  color: #1a1a1a;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* 标题：无衬线 600，Shopify 的 18px 段落标题（原来是 lume 的衬线大标题） */
.checkout-scope h1,
.checkout-scope h2,
.checkout-scope h3,
.checkout-scope h4,
.checkout-scope .font-display,
.checkout-scope [data-group-title] {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #1a1a1a !important;
}
.checkout-scope [data-group-title] {
  font-size: 18px !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}
.checkout-scope [data-group] { margin-top: 26px; }

/* 右栏：整列浅灰（Shopify 的 #fafafa），与左栏用 1px 分隔线 */
.checkout-scope [data-checkout-summary-col] {
  background: #fafafa !important;
  border-left: 1px solid #e6e6e6 !important;
}
@media (max-width: 1023px) {
  .checkout-scope [data-checkout-summary-col] {
    border-left: 0 !important;
    border-top: 1px solid #e6e6e6 !important;
  }
}

/* 输入框：Shopify 的 5px 圆角 + #d9d9d9 描边；focus 蓝色 1px 内描边（不是品牌黑） */
.checkout-scope input:not([type='radio']):not([type='checkbox']),
.checkout-scope select,
.checkout-scope textarea,
.checkout-scope .sf-phone {
  border-radius: 5px !important;
  border-color: #d9d9d9 !important;
  background: #fff !important;
  color: #1a1a1a !important;
  font-size: 14px !important;
}
.checkout-scope input:not([type='radio']):not([type='checkbox']):focus,
.checkout-scope select:focus,
.checkout-scope textarea:focus,
.checkout-scope .sf-phone:focus-within {
  border-color: var(--ck-accent, #1773b0) !important;
  box-shadow: inset 0 0 0 1px var(--ck-accent, #1773b0) !important;
  outline: none !important;
}

/* 链接：Shopify 蓝（Sign in / Not now / 政策） */
.checkout-scope a { color: var(--ck-accent, #1773b0) !important; }
.checkout-scope a:hover { color: var(--ck-accent-hover, #145f93) !important; }

/* 主按钮（Pay / Review order）：Shopify 蓝、5px 圆角、白字、52px 高 */
.checkout-scope [data-continue-button],
.checkout-scope button[type='submit'] {
  background: var(--ck-accent, #1773b0) !important;
  border-color: var(--ck-accent, #1773b0) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  min-height: 52px !important;
  box-shadow: none !important;
}
.checkout-scope [data-continue-button]:hover,
.checkout-scope button[type='submit']:hover { background: var(--ck-accent-hover, #145f93) !important; border-color: var(--ck-accent-hover, #145f93) !important; }

/* 折扣码行的「Apply」：与**同一行的输入框同高**（2026-10-29 gimme 主题反馈「apply 按钮和输入框不同高」）。
   根因：这颗按钮是 `type=submit` ⇒ 被上面那条主按钮规则钉成 52px；而同行输入框是结算页的 48px 口径
   （`checkout-scope.ts` §② 的 `min-h-[48px]`，实测 48px）⇒ 一排两个控件差 4px（实测 gimme 1440/375/320 都是 52 vs 48）。
   这里**不赌具体像素**：按钮 `align-self: stretch` 直接跟随输入框的实际高度（行容器是 `items-start`，
   单条 item 覆盖即可，不用改整行的对齐方式）。gimme 主题下这颗按钮是品牌棕实心，差高最显眼。
   ⚠️ 选择器必须带 `button`（0,2,1）且写在上面主按钮规则**之后**：两条同权同 `!important`，靠「后写的胜」压过 52px。 */
.checkout-scope button[data-discount-apply] {
  align-self: stretch;
  height: auto !important;
  min-height: 0 !important;
}

/* 支付方式：桌面渲染成横向卡片（截图：Klarna / Credit card / PayPal 一排），选中蓝色描边 */
@media (min-width: 640px) {
  .checkout-scope [data-payment-methods] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch;
  }
  .checkout-scope [data-payment-methods] > li { min-width: 0; }
  .checkout-scope [data-payment-methods] label { height: 100%; }
}
.checkout-scope [data-payment-methods] label {
  border-radius: 5px !important;
  border-color: #d9d9d9 !important;
  background: #fff !important;
}
.checkout-scope [data-payment-methods] label:has(input:checked) {
  border-color: var(--ck-accent, #1773b0) !important;
  box-shadow: inset 0 0 0 1px var(--ck-accent, #1773b0) !important;
  background: #fff !important;
}

/* 运输方式卡片：同款 5px 圆角，选中蓝描边 */
.checkout-scope [data-shipping-list] label,
.checkout-scope [data-shipping-list] [data-shipping-row] {
  border-radius: 5px !important;
}
.checkout-scope [data-shipping-list] label:has(input:checked),
.checkout-scope [data-shipping-list] [data-shipping-row][data-active='true'] {
  border-color: var(--ck-accent, #1773b0) !important;
  box-shadow: inset 0 0 0 1px var(--ck-accent, #1773b0) !important;
}

/* 摘要行：Shopify 的字号/间距（小计 13px muted，Total 16px 600） */
.checkout-scope [data-checkout-summary-col] [data-summary-row] {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.checkout-scope [data-checkout-summary-col] [data-summary-row='total'] {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* 顶部 checkout header：Shopify 的细线 + 更矮（logo 仍居中） */
.checkout-scope [data-checkout-header] { border-bottom-color: #e6e6e6 !important; }

/* Adyen Drop-in：与上方自绘支付行统一成「卡片」；未选中 2 列、选中占满整行（展开卡字段/说明） */
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-methods-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method {
  margin: 0 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 5px !important;
  background: #fff !important;
  overflow: hidden;
}
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method--selected {
  grid-column: 1 / -1;
  border-color: var(--ck-accent, #1773b0) !important;
  box-shadow: inset 0 0 0 1px var(--ck-accent, #1773b0) !important;
}
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method__header {
  padding: 10px 12px !important;
}
@media (max-width: 639px) {
  .checkout-scope [data-adyen-dropin] .adyen-checkout__payment-methods-list {
    grid-template-columns: 1fr !important;
  }
}

/* 运输方式选中态：浅蓝底 + 蓝描边（截图里的 Standaard 卡片） */
.checkout-scope [data-shipping-methods] label:has(input:checked) {
  background: var(--ck-accent-soft, #f0f5ff) !important;
  border-color: var(--ck-accent, #1773b0) !important;
  box-shadow: inset 0 0 0 1px var(--ck-accent, #1773b0) !important;
}

/* 账单地址选项：选中行同样浅蓝 + 蓝描边 */
.checkout-scope [data-billing-choices] label:has(input:checked) {
  background: var(--ck-accent-soft, #f0f5ff) !important;
  border-color: var(--ck-accent, #1773b0) !important;
  box-shadow: inset 0 0 0 1px var(--ck-accent, #1773b0) !important;
}

/* Adyen 支付卡片：桌面 3 列，图标在上、名称在下；只有需要填卡信息的 scheme/bcmc 选中时占满整行 */
@media (min-width: 640px) {
  .checkout-scope [data-adyen-dropin] .adyen-checkout__payment-methods-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method--selected {
    grid-column: auto !important;
  }
  .checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method--scheme.adyen-checkout__payment-method--selected,
  .checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method--bcmc.adyen-checkout__payment-method--selected {
    grid-column: 1 / -1 !important;
  }
}
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method__header__title {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
}
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method--selected {
  background: var(--ck-accent-soft, #f0f5ff) !important;
}

/* Adyen 卡片：强制露出「图标 + 名称」两行（默认 header 高度会裁掉名称） */
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method { overflow: visible !important; }
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method__header {
  height: auto !important;
  min-height: 92px !important;
  align-items: flex-start !important;
}
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method__header__title {
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
}
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method__header__details {
  height: auto !important;
  min-height: 26px !important;
  overflow: visible !important;
}
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method__name_wrapper { height: auto !important; }
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method--selected {
  border: 1px solid var(--ck-accent, #1773b0) !important;
}

/* 选中描边统一蓝色（Adyen 自带 border 被品牌样式压成深灰 ⇒ 再用 outline 兜一层） */
.checkout-scope [data-adyen-dropin] .adyen-checkout__payment-method--selected {
  border-color: var(--ck-accent, #1773b0) !important;
  outline: 1px solid var(--ck-accent, #1773b0) !important;
  outline-offset: -1px;
}
.checkout-scope [data-billing-choices] label:has(input:checked),
.checkout-scope [data-shipping-methods] label:has(input:checked) {
  outline: 1px solid var(--ck-accent, #1773b0) !important;
  outline-offset: -1px;
}

/* 账单地址表单：与主表单同一套输入框规格（这段是后加的简单 input，避免浏览器原生描边） */
.checkout-scope [data-billing-fields] input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #d9d9d9 !important;
  border-radius: 5px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  background: #fff !important;
}
.checkout-scope [data-billing-fields] input:focus {
  border-color: var(--ck-accent, #1773b0) !important;
  box-shadow: inset 0 0 0 1px var(--ck-accent, #1773b0) !important;
  outline: none !important;
}

/* 支付方式顺序（2026-10-24 用户：「paypal 与 klarna 换个位置」）：
   把 Drop-in 容器与 PayPal 自绘行拍平成同一张 3 列网格 ⇒ 可用 order 精确排序：
   iDEAL → PayPal → Cards → Klarna（选中 Cards 仍占满整行展开卡字段）。 */
.checkout-scope [data-checkout-payment-element] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.checkout-scope [data-checkout-payment-element] > [data-adyen-dropin],
.checkout-scope [data-checkout-payment-element] .adyen-checkout__dropin,
.checkout-scope [data-checkout-payment-element] .adyen-checkout-payment-methods-container,
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-methods-list {
  display: contents !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method { margin: 0 !important; }
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--ideal { order: 1; }
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--paypal { order: 2; }
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--scheme { order: 3; }
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--klarna { order: 4; }
@media (max-width: 639px) {
  .checkout-scope [data-checkout-payment-element] { grid-template-columns: 1fr; }
}

/* 选中 Cards 时：**卡头留在第一行原位置**（不再整张卡占满一行而"消失"），
   卡号/有效期/CVC 作为一块**整行展开面板**接在第一行下面。
   实现：选中卡 div 用 display:contents 拍平 ⇒ header 回到网格第 3 格，details 单独占整行。 */
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--scheme.adyen-checkout__payment-method--selected,
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--bcmc.adyen-checkout__payment-method--selected {
  display: contents !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--scheme.adyen-checkout__payment-method--selected > .adyen-checkout__payment-method__header,
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--bcmc.adyen-checkout__payment-method--selected > .adyen-checkout__payment-method__header {
  order: 3;
  margin: 0 !important;
  border: 1px solid var(--ck-accent, #1773b0) !important;
  border-radius: 5px !important;
  background: var(--ck-accent-soft, #f0f5ff) !important;
  min-height: 92px;
  box-sizing: border-box;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--scheme.adyen-checkout__payment-method--selected > .adyen-checkout-pm-details-wrapper,
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--bcmc.adyen-checkout__payment-method--selected > .adyen-checkout-pm-details-wrapper {
  order: 4;
  grid-column: 1 / -1;
  margin: 0 !important;
  border: 1px solid var(--ck-accent, #1773b0) !important;
  border-radius: 5px !important;
  background: var(--ck-accent-soft, #f0f5ff) !important;
  padding: 4px 12px 12px !important;
}
/* 选中 Cards 时 Klarna 让到展开面板之后，避免插在卡头与卡字段之间 */
.checkout-scope [data-checkout-payment-element]:has(.adyen-checkout__payment-method--scheme.adyen-checkout__payment-method--selected) .adyen-checkout__payment-method--klarna,
.checkout-scope [data-checkout-payment-element]:has(.adyen-checkout__payment-method--bcmc.adyen-checkout__payment-method--selected) .adyen-checkout__payment-method--klarna {
  order: 5;
}

/* 支付卡片信息布局（2026-10-24 用户：「图标布局有点乱」「Klarna 是不是应该拉长」）：
   · Cards：卡图标 → 名称 → 品牌图标一行（不再挤在右侧竖排）；
   · Klarna：四张卡的最后一张占满整行（不要半行空着）。 */
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--klarna {
  grid-column: 1 / -1;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--scheme .adyen-checkout__payment-method__header__details {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--scheme .adyen-checkout__payment-method__brands {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--scheme .adyen-checkout__payment-method__brands li {
  display: block !important;
  width: 26px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--scheme .adyen-checkout__payment-method__brands img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 2026-10-24 最终口径（用户：「算了还是回到之前，全部都是长条」）：
   支付方式全部恢复为**整行长条**（不再卡片网格）；顺序保留 iDEAL → PayPal → Cards → Klarna。
   实现：根容器 flex column，拍平 Drop-in/PayPal 的包装层，让每个方式成为整行 flex 子项。 */
.checkout-scope [data-checkout-payment-element] {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.checkout-scope [data-checkout-payment-element] > [data-adyen-dropin],
.checkout-scope [data-checkout-payment-element] .adyen-checkout__dropin,
.checkout-scope [data-checkout-payment-element] .adyen-checkout-payment-methods-container,
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-methods-list {
  display: contents !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method,
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--selected,
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--scheme.adyen-checkout__payment-method--selected,
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--bcmc.adyen-checkout__payment-method--selected {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 5px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--selected {
  border-color: var(--ck-accent, #1773b0) !important;
  box-shadow: inset 0 0 0 1px var(--ck-accent, #1773b0) !important;
  background: var(--ck-accent-soft, #f0f5ff) !important;
}
/* 顺序（PayPal 与 Klarna 换位后的长条顺序） */
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--ideal { order: 1; }
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--paypal { order: 2; }
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--scheme { order: 3; }
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method--klarna { order: 4; }
/* 长条内部：图标 + 名称同一行；Cards 品牌图标靠右一行 */
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method__header {
  height: auto !important;
  min-height: 56px !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method__header__title {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method__header__details {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method__brands,
.checkout-scope [data-checkout-payment-element] .BrandIcons-module_container__FeCxK {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method__brands li {
  display: block !important;
  width: 26px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.checkout-scope [data-checkout-payment-element] .adyen-checkout__payment-method__brands img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* 选中后卡字段在同一长条内展开（无独立边框/背景，避免"卡头消失"）。
   ⚠️ 不要覆盖 `display`：Adyen 用 `.adyen-checkout-pm-details-wrapper[aria-hidden="true"]{display:none}`
   来收起未选中的方式；写成 `display:block !important` 会让 PayPal/Cards 收起后仍留一大块空白
   （2026-10-24 用户实测：「文字去哪里了」「怎么缩不回去」）。 */
.checkout-scope [data-checkout-payment-element] .adyen-checkout-pm-details-wrapper {
  border: 0 !important;
  background: transparent !important;
  padding: 0 12px 12px !important;
}

/* ── Shopify 订单成功页（2026-10-24 用户：「优化成 shopify 的样式」）────────────
   只作用于订单详情页 `.order-shopify`；字体/标题/成功横幅/明细/合计全部按 Shopify
   order status 页的克制风格：系统 sans、绿色左条横幅、灰色标签 + 细分隔线、蓝色文字链接。 */
.order-shopify {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #202223;
}
.order-shopify :is(h1, h2) {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #202223 !important;
}
.order-shopify h2 { margin-top: 34px !important; font-size: 20px !important; line-height: 1.25 !important; }
.order-shopify [data-order-paid-banner] {
  background: #f1f8f4 !important;
  border: 0 !important;
  border-left: 4px solid #008060 !important;
  border-radius: 0 !important;
  padding: 22px 24px !important;
  margin-bottom: 28px !important;
}
.order-shopify [data-order-paid-banner] h1 { font-size: 27px !important; line-height: 1.2 !important; }
.order-shopify [data-order-paid-banner] p { margin-top: 8px !important; font-size: 14px !important; line-height: 1.55 !important; color: #4a4a4a !important; }
.order-shopify [data-order-meta] { margin-top: 24px; border-top: 1px solid #e1e3e5; }
.order-shopify [data-order-meta] > div {
  padding: 15px 0 !important;
  border-bottom: 1px solid #e1e3e5 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.order-shopify [data-order-meta] > div > span:first-child { color: #6d7175; }
.order-shopify [data-order-meta] > div > span:last-child { color: #202223; text-align: right; }
.order-shopify table { border-collapse: collapse; width: 100%; }
.order-shopify thead th {
  padding: 0 0 10px !important;
  border-bottom: 1px solid #e1e3e5 !important;
  color: #6d7175 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.order-shopify tbody td {
  padding: 16px 0 !important;
  border-bottom: 1px solid #e1e3e5 !important;
  font-size: 14px !important;
  vertical-align: middle !important;
}
.order-shopify tbody tr:last-child td { border-bottom: 1px solid #e1e3e5 !important; }
.order-shopify [data-order-item] [data-item-thumb] {
  width: 64px !important;
  height: 64px !important;
  border-radius: 8px !important;
  border-color: #e1e3e5 !important;
  object-fit: cover !important;
}
.order-shopify [data-order-totals] { margin-top: 26px !important; }
.order-shopify [data-order-totals] > div {
  padding: 9px 0 !important;
  border: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.order-shopify [data-order-totals] > div > span:first-child { color: #4a4a4a; }
.order-shopify [data-order-totals] > div:last-of-type {
  margin-top: 8px;
  padding-top: 16px !important;
  border-top: 1px solid #e1e3e5 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.order-shopify [data-order-vat-included] { color: #6d7175 !important; font-size: 12px !important; }
.order-shopify a { color: var(--ck-accent, #1773b0) !important; text-decoration: none !important; }
.order-shopify a:hover { text-decoration: underline !important; }
.order-shopify [data-order-shipping-address] { margin-top: 30px !important; padding-top: 24px; border-top: 1px solid #e1e3e5; }
.order-shopify [data-order-shipping-address] address { font-size: 14px !important; line-height: 1.6 !important; color: #4a4a4a !important; }
.order-shopify [data-order-shipping-address] address span:first-child { color: #202223 !important; }
.order-shopify .rounded-brand { border-radius: 6px !important; }