/* Midnight studio: a blue environment, silver type, and soft light on the garments. */
:root {
  color-scheme: dark;
  --paper: #071426;
  --studio: #102944;
  --ink: #edf4ff;
  --muted: #a8b9d0;
  --line: #253c58;
  --navy: #a8caff;
  --cl-ink: var(--ink);
  --cl-paper: var(--paper);
  --cl-muted: var(--muted);
  --cl-border: var(--line);
  font-family: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  background: var(--paper);
}
body { background: var(--paper); }
::selection { background: #a8caff; color: #071426; }
button, a { -webkit-tap-highlight-color: #89baff20; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline-color: #b9d6ff;
}
.preview-note {
  background: #041021;
  color: #9caec6;
  border-bottom: 1px solid #203550;
  font-size: 10px;
}
.preview-dot, .studio-label span { background: #97bcf0; }
.site-header {
  height: 88px;
  background: #071426;
  border-bottom-color: var(--line);
}
.brand img { width: 50px; height: 60px; }
.brand-wordmark { font-size: 17px; font-weight: 500; letter-spacing: -.055em; }
.site-header nav { color: #c1cfe2; }
.site-header nav a {
  position: relative;
  text-decoration: none;
  transition: color .2s;
}
.site-header nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 8px;
  height: 1px;
  background: #a8caff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.site-header nav a:hover, .site-header nav a[aria-current] { color: white; text-decoration: none; }
.site-header nav a:hover::after, .site-header nav a[aria-current]::after { transform: scaleX(1); }
.bag-count { background: #233c5e; color: #cce0ff; }
.skip-link, .noscript { background: #152c49; color: white; }

.hero {
  background: #0b1e36;
  border-bottom: 1px solid var(--line);
  min-height: 748px;
}
.hero::before {
  opacity: 1;
  background: radial-gradient(ellipse at 53% 40%, #335b806b 0%, transparent 56%),
    linear-gradient(120deg, #0b1e36, var(--hero-tint, #122b46) 65%, #0b1e36);
}
.hero h1 { font-size: clamp(35px,3.35vw,52px); letter-spacing: -.065em; }
.hero-intro > p:not(.studio-label) { color: #a8bad3; }
.studio-label { color: #b6cae4; }
.hero-main-image, .category-garment img {
  filter: drop-shadow(0 22px 22px #02081475) drop-shadow(0 0 2px #9ebee647);
}
.hero-studio { height: 520px; }
.orbital-track { border-color: #9bc5ff38; }
.orbital-track::after { background: #b7d6ff; box-shadow: 0 0 16px #8ebeff8c; }
.floor-shadow { background: #010710a8; height: 20px; filter: blur(15px); }
.hero-step { background: #122b48cc; border-color: #6c90ba60; color: #d7e6ff; }
.hero-step:hover { background: #294a71; color: white; border-color: #86a9d6; }
.inspect-hint { color: #b1c5df; }
.inspect-hint span { color: #d9e9ff; background: #233f60; }
.primary-link {
  background: #aacaff;
  color: #08182d;
  border: 1px solid #c0d8ff40;
  border-radius: 4px;
  font-weight: 500;
  transition: background .2s, box-shadow .2s;
}
.primary-link:hover { background: #d0e2ff; box-shadow: 0 6px 24px #020b2730; }
.text-link { text-decoration-color: #6886af; }
.feature-info h2 { text-wrap: balance; }
.feature-price { color: #9aafcb; }
.hero-controls { border-top-color: #5d7da33b; }
.hero-collections button { color: #afc1da; border-radius: 4px 4px 0 0; }
.hero-collections button[aria-pressed=true] { border-bottom-color: #aecfff; color: #eaf2ff; background: #9fbff51a; }
.hero-collections button:hover { background: #9fbff514; }

.collection-section { background: #071426; }
.section-heading h2 { font-weight: 400; letter-spacing: -.055em; }
.collection-visual, .product-art {
  background: radial-gradient(ellipse at 50% 36%, #355579 0%, #193651 48%, #10243c 100%);
  border: 1px solid #39567566;
  border-radius: 7px;
  perspective: 900px;
}
.collection-visual {
  background: radial-gradient(ellipse at 50% 35%, #527ba142, transparent 68%), var(--card-tint, #142d49);
}
.collection-visual::before { background: #020a1675; }
.collection-visual > img, .product-art > img {
  filter: drop-shadow(0 16px 13px #02091580) drop-shadow(0 0 1px #b2cfff45);
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.collection-card:hover .collection-visual > img,
.collection-card:focus-visible .collection-visual > img {
  transform: translateY(-10px) rotateY(-12deg) rotateZ(-3deg) scale(1.035);
}
.product-card:hover .product-art > img,
.product-card:focus-visible .product-art > img {
  transform: translateY(-9px) rotateY(10deg) rotateZ(2deg) scale(1.035);
}
.card-open, .product-open {
  background: #0d203ce6;
  color: #dceaff;
  border: 1px solid #7da1cf66;
}
.collection-card-info h3 { color: #e0ebfa; }
.missing-art > span:last-child { color: #a8bad4; }
.missing-orbit, .missing-orbit::after { border-color: #a4c8ff38; }
.editorial {
  background: radial-gradient(ellipse at 30% 50%, #2a4b6f66, transparent 55%), #0e2540;
  border-block: 1px solid #29425f;
}
.editorial-copy > p:not(.section-kicker) { color: #b1c2d9; }
.editorial-visual img { filter: drop-shadow(0 22px 18px #01081475); }

.laundry-page { background: #071426; }
.laundry-intro {
  min-height: 590px;
  background: radial-gradient(ellipse at 57% 45%, #6d9bc83d, transparent 57%), var(--card-tint, #102944);
  border-block: 1px solid #34516f75;
  overflow: hidden;
}
.laundry-copy { position: relative; }
.laundry-copy h1 { text-wrap: balance; }
.laundry-page[data-theme=mona] .laundry-copy h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(46px,4.8vw,72px);
  letter-spacing: -.045em;
}
.laundry-copy > p:not(.section-kicker) { color: #b7c7db; }
.laundry-stage { height: 500px; }
.theme-environment { opacity: .28; }
.laundry-page[data-theme=mona] .theme-environment { border-color: #a4b7d6; outline-color: #a4b7d6; }
.laundry-page[data-theme=family] .theme-environment { border-color: #9bc3ed; background: #6e9ab50a; }
.laundry-page[data-theme=rick] .theme-environment { border-color: #99d2bd; }
.laundry-page[data-theme=sponge] .theme-environment { border-color: #91d7ed; }
.laundry-page[data-theme=popeye] .theme-environment { border-color: #9fb6de; }
.laundry-page[data-theme=bad] .theme-environment { border-color: #c5bbd9; }
.category-thumbnails { gap: 10px; }
.category-thumbnails button {
  background: #06172a50;
  border: 1px solid #7c9abe3d;
  border-bottom: 2px solid #7c9abe3d;
  border-radius: 5px;
  min-height: 110px;
  width: 82px;
  color: #b9c9df;
  transition: background .2s, border-color .2s;
}
.category-thumbnails button[aria-pressed=true] {
  border-color: #a8c7f0;
  background: #a9cfff20;
  color: #f1f6ff;
}
.category-thumbnails button:hover { background: #a9cfff18; }
.category-feature-info h2 { font-size: clamp(25px,2.4vw,35px); }
.laundry-shop { padding-top: 30px; }
.product-art { background-color: #18344f; }
.product-meta h2 { color: #e5eefc; }
.product-meta p { color: #93aac7; }
.other-laundries a:hover { color: #c5ddff; }
.other-laundries .arrow-icon { opacity: .55; }

.shop-search input, .sort-field select { color: #ecf3ff; background: #10243d; border-color: #37516e; }
.shop-search input::placeholder { color: #8ca3c1; }
.collection-filter-links button { background: #152b46; color: #bacce5; }
.collection-filter-links button[aria-pressed=true] { background: #afceff; color: #0a1b32; }
.empty-results { background: #102641; }
.empty-results button { background: #203e62; }
.about-art { background: radial-gradient(ellipse, #284e73, #10243c); border-radius: 8px; }
.site-footer { background: #041020; border-top: 1px solid #243852; }
.footer-brand img { width: 65px; height: 72px; }
.footer-bottom { border-top-color: #253a54; }
.footer-bottom button:hover, .footer-bottom a:hover { color: #cce0ff; }
.info-dialog { background: #112641; border: 1px solid #3a5575; }
.info-dialog::backdrop { background: #020918b3; }

/* Product inspection, preference controls and preview bag share the studio palette. */
.cl-dialog {
  --cl-ink: #edf4ff;
  --cl-muted: #aebfd6;
  --cl-border: #3a5270;
  --cl-paper: #0c1d34;
  --cl-stage: #183451;
  --cl-accent: #b4d2ff;
  border: 1px solid #3c5677;
  box-shadow: 0 24px 100px #0009;
}
.cl-dialog::backdrop { background: #020918ba; }
.cl-product-stage { background: radial-gradient(ellipse at 50% 35%, #385c7e, #183451 58%, #10243e); }
.cl-product-picture { filter: drop-shadow(0 15px 18px #01081680); }
.cl-icon-button:hover { background: #b6d0f01a; }
.cl-product-close { background: #10243ce6; }
.cl-view-controls { background: #0b1b33a6; border-color: #7898bd55; }
.cl-view-controls button[aria-pressed=true] { color: #0b1b32; background: #bbd4fa; }
.cl-zoom-label { background: #0d203ae8; color: #dceaff; border-color: #88a8cf50; }
.cl-image-status { background: #112a47f2; }
.cl-image-status button { background: #254568; }
.cl-color-option input:checked + span, .cl-size-option input:checked + span { color: #0b1b32; background: #bbd4fa; border-color: #bbd4fa; }
.cl-button-primary { background: #b1ceff; color: #081a31; }
.cl-button-primary:hover { background: #d4e5ff; }
.cl-button-secondary { background: #183250; color: #e5efff; }
.cl-button-secondary:hover { background: #29496e; }
.cl-button-unavailable { background: #152b46; }
.cl-form-error { color: #ffb3ad; }
.cl-stepper button:disabled { color: #647e9f; }
.cl-product-close:focus-visible { outline-color: #cce0ff; }

@media(max-width:1150px) {
  .hero { min-height: 720px; }
  .hero-studio { height: 470px; }
  .laundry-stage { height: 440px; }
  .laundry-intro { min-height: 560px; }
}
@media(max-width:850px) {
  .hero { min-height: 660px; }
  .hero-studio { height: 400px; }
  .laundry-stage { height: 420px; }
  .category-feature-info h2 { font-size: 24px; }
}
@media(max-width:650px) {
  .site-header { height: 78px; }
  .brand { gap: 7px; }
  .brand img { width: 38px; height: 47px; }
  .brand-wordmark { display: block; font-size: 12px; }
  .site-header nav { gap: 16px; font-size: 11px; }
  .bag-button { min-width: 50px; gap: 5px; }
  .bag-button > span:first-child { display: none; }
  .hero { min-height: 0; padding-top: 0; }
  .hero-intro { flex-wrap: wrap; gap: 12px; }
  .hero-intro .studio-label { font-size: 10px; }
  .hero-studio { height: 390px; margin-top: 10px; }
  .hero-step { background: #102844cc; }
  .hero-controls { margin-top: 22px; }
  .hero-collections { scrollbar-color: #6685ae transparent; }
  .hero-collections button { font-size: 11px; }
  .feature-info { padding-top: 20px; }
  .laundry-intro { min-height: 0; padding-top: 28px; padding-bottom: 30px; }
  .laundry-page[data-theme=mona] .laundry-copy h1 { font-size: 48px; max-width: 330px; }
  .laundry-copy > p:not(.section-kicker) { font-size: 13px; }
  .laundry-stage { height: 385px; margin-top: 12px; }
  .category-feature-info { margin-top: 20px; }
  .category-thumbnails button { width: 78px; min-height: 103px; font-size: 11px; }
  .category-feature-info h2 { font-size: 26px; }
  .laundry-shop { padding-top: 8px; }
  .collection-visual, .product-art { border-radius: 5px; }
  .footer-brand img { width: 50px; height: 60px; }
  .footer-brand .brand-wordmark { font-size: 15px; }
  .footer-top p { font-size: 19px; }
  .footer-bottom { flex-wrap: wrap; gap: 6px 16px; }
  .footer-bottom nav { order: 3; width: 100%; }
}
@media(max-width:370px) {
  .site-header nav { gap: 12px; }
  .brand-wordmark { font-size: 11px; }
  .brand img { width: 32px; }
  .hero-studio { height: 350px; }
  .laundry-stage { height: 345px; }
}
@media(prefers-reduced-motion:reduce) {
  .collection-card:hover .collection-visual > img,
  .collection-card:focus-visible .collection-visual > img,
  .product-card:hover .product-art > img,
  .product-card:focus-visible .product-art > img { transform: none; }
}
[data-motion-paused] .collection-visual > img,
[data-motion-paused] .product-art > img { transform: none !important; }

/* Keep the 360 viewer and original photo inspection in the same product dialog. */
.cl-product-stage { display: flex; flex-direction: column; justify-content: center; padding: 28px 22px 22px; }
.product-showroom-stage { position: relative; isolation: isolate; width: 100%; height: 460px; flex: 0 0 auto; margin-bottom: 66px; }
.product-showroom-garment { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: none; }
.product-showroom-garment [data-depth-layer], .product-showroom-garment img { width: 100%; height: 100%; object-fit: contain; }
.cl-photo-panel { position: relative; width: 100%; min-height: 490px; }
.cl-photo-panel .cl-product-zoom { height: 420px; }
.cl-inspection-modes { flex: 0 0 auto; margin-top: 10px; }
.cl-model-note { color: var(--cl-muted); text-align: center; font-size: 11px; line-height: 1.6; max-width: 33ch; padding-top: 12px; }
.product-3d-label { position: absolute; left: 18px; bottom: 18px; color: #bed1e8; font-size: 10px; letter-spacing: .06em; }
@media(max-width:800px) {
  .cl-product-stage { height: auto; min-height: 440px; padding: 18px 20px 20px; }
  .product-showroom-stage { height: 300px; margin-bottom: 63px; }
  .cl-photo-panel { min-height: 365px; }
  .cl-photo-panel .cl-product-zoom { height: 285px; }
}