.hero-split {
  background-color: var(--band-color, #050404);
  background-image: linear-gradient(145deg, #00000012, transparent 50%, #00000019);
  transition: background-color .7s cubic-bezier(.22, .8, .25, 1);
}
.product-image { position: absolute; inset: 0; }
.brand { color: #000; mix-blend-mode: normal; }
.brand-desktop { position: relative; display: inline-block; }
.brand-desktop::after { content: attr(data-wordmark); position: absolute; inset: 0; color: var(--band-ink, #f7f6f6); clip-path: inset(0 0 0 calc(50% - var(--brand-offset))); transition: color .6s ease; }
.band { color: var(--band-ink, #f7f6f6); transition: color .6s ease; }
.shop-card .color-dot, .product-summary .color-dot { background: var(--band-swatch, #171717); }
.variant-controls { position: absolute; z-index: 5; right: 3.6cqw; bottom: 29cqh; width: clamp(175px, 19cqw, 300px); color: var(--band-ink, #f7f6f6); transition: color .6s ease; }
.variant-copy { margin-bottom: 18px; text-align: right; }
.variant-name { display: block; margin: 0 0 5px; font-size: clamp(12px, 1vw, 17px); line-height: 1.2; letter-spacing: -.02em; }
.variant-pattern { display: block; opacity: .62; font-size: clamp(9px, .7vw, 11px); letter-spacing: .05em; }
.variant-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.variant-pagination { white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.variant-pagination > span:last-child { opacity: .45; }
.variant-arrows { display: flex; gap: 9px; }
.variant-arrow { display: grid; place-items: center; width: 46px; height: 46px; padding: 12px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 50%; color: inherit; background: transparent; transition: color .6s, border-color .2s, background .2s, transform .2s; }
.variant-arrow svg { width: 21px; height: 21px; }
.variant-arrow:hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent); border-color: currentColor; transform: translateY(-2px); }
.variant-arrow:active:not(:disabled) { transform: scale(.93); }
.intro-pending .variant-controls { opacity: 0; }
.bag-design + .bag-design { border-top: 1px solid #d5d4d4; }
.bag-design .drawer-quantity { border-top: 0; padding-top: 0; }
.bag-design .bag-item { margin: 22px 0 12px; }
.bag-description { min-width: 0; }
.bag-description h3 { line-height: 1.15; }
@media (max-aspect-ratio: 1/1) {
  .brand-desktop { display: none; }
  .brand { color: var(--band-ink, #f7f6f6); }
  .wrist { color: var(--band-ink, #f7f6f6); transition: color .6s ease; }
  .band { color: #000; }
  .variant-controls { position: absolute; inset: 0; width: auto; pointer-events: none; }
  .variant-copy { position: absolute; top: 25.3cqh; left: 12%; right: 12%; margin: 0; text-align: center; color: var(--band-ink, #f7f6f6); transition: color .6s ease; }
  .variant-name { margin-bottom: 4px; font-size: clamp(11px, 3cqw, 17px); }
  .variant-pattern { display: none; }
  .variant-pagination { position: absolute; top: 88.7cqh; left: 0; right: 0; color: #111; text-align: center; font-size: 9px; }
  .variant-arrows { position: absolute; top: 62cqh; left: 3.5cqw; right: 3.5cqw; display: flex; justify-content: space-between; transform: translateY(-50%); color: #111; }
  .variant-arrow { width: 42px; height: 42px; padding: 11px; border-color: #1115; background: #f7f6f6c9; backdrop-filter: blur(6px); pointer-events: auto; }
  .variant-arrow:hover:not(:disabled) { background: #f7f6f6; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-pending .variant-controls { opacity: 1; }
  .hero-split, .band, .wrist, .brand-desktop::after, .variant-controls, .variant-arrow { transition: none; }
}