/* Weekly Styles · STUDIO skin for build.html — LIGHT, mobile-first (ws-studio.css v2) */
html.ws-studio {
  --glass: linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  --glass-edge: rgba(255,255,255,.9);
  --glass-line: rgba(10,10,10,.06);
  --lift: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 40px -18px rgba(40,36,24,.28), 0 2px 6px rgba(40,36,24,.06);
  --ease: cubic-bezier(.22,1,.36,1);
  background: #EEEDE7;
}
html.ws-studio body {
  background:
    radial-gradient(120% 70% at 50% 28%, #FFFFFF 0%, #F6F5F0 42%, #ECEAE3 100%);
  background-attachment: fixed;
}
html.ws-studio body::after {
  content: ""; position: fixed; inset: 0; z-index: 400; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html.ws-studio .app, html.ws-studio #main-app { background: transparent !important; }
html.ws-studio .topbar { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; }
html.ws-studio .icon-btn, html.ws-studio .menu-btn {
  background: var(--glass) !important; border: 1px solid var(--glass-edge) !important; box-shadow: var(--lift) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink) !important;
}
html.ws-studio .icon-btn:active, html.ws-studio .menu-btn:active { transform: scale(.9); }
html.ws-studio .live-dot { background: #1DB954 !important; animation: wsPulse 2s infinite; }
@keyframes wsPulse { 0%{box-shadow:0 0 0 0 rgba(29,185,84,.45)} 70%{box-shadow:0 0 0 8px rgba(29,185,84,0)} 100%{box-shadow:0 0 0 0 rgba(29,185,84,0)} }
html.ws-studio .stage { position: relative; isolation: isolate; }
html.ws-studio .stage::before {
  content: ""; position: absolute; left: 50%; top: 45%; width: min(86vw, 560px); aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #F7F6F1 48%, #EBE9E1 100%);
  box-shadow: inset 0 -18px 40px rgba(40,36,24,.06), inset 0 10px 30px rgba(255,255,255,.9), 0 30px 60px -30px rgba(40,36,24,.25);
}
html.ws-studio .stage::after {
  content: ""; position: absolute; left: 50%; bottom: 11%; width: min(56vw, 380px); height: 28px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(40,36,24,.32), transparent); filter: blur(5px);
  z-index: -1; pointer-events: none; animation: wsShadow 6s var(--ease) infinite;
}
.ws-ghost {
  position: absolute; left: 50%; top: 42%; transform: translate(calc(-50% + var(--px,0px)), calc(-50% + var(--py,0px)));
  z-index: -2; pointer-events: none; white-space: nowrap; user-select: none;
  font-family: 'Instrument Serif', serif; font-style: italic; line-height: .8; letter-spacing: -.03em;
  font-size: clamp(120px, 34vw, 300px); color: transparent;
  -webkit-text-stroke: 1px rgba(10,10,10,.09);
  transition: opacity .5s var(--ease);
}
.ws-ghost.ws-swap { opacity: 0; }
html.ws-studio #stage { animation: wsFloat 6s var(--ease) infinite; }
@keyframes wsFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes wsShadow { 0%,100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(.85); opacity: .65; } }
html.ws-studio .garment-wrap.tilt3d svg { filter: drop-shadow(0 22px 26px rgba(40,36,24,.22)) drop-shadow(0 4px 6px rgba(40,36,24,.10)) brightness(calc(1 + var(--sheen,0))); }
html.ws-studio .stage { cursor: grab; touch-action: pan-y; }
html.ws-studio .stage.ws-dragging { cursor: grabbing; }
html.ws-studio .zoom-hint { background: var(--glass) !important; border: 1px solid var(--glass-edge) !important; box-shadow: var(--lift) !important; backdrop-filter: blur(14px); }
.ws-tag {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 7px 11px 7px 7px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--lift);
  font: 700 9.5px/1.2 'Albert Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  transform: translate(var(--px,0px), var(--py,0px)); animation: wsBob 7s var(--ease) infinite; animation-delay: var(--dl,0s);
  pointer-events: none;
}
.ws-tag b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--ink); color: var(--paper); font: italic 400 13px/1 'Instrument Serif', serif; letter-spacing: 0; }
.ws-tag small { display: block; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink-mid); font-size: 10px; margin-top: 1px; }
.ws-tag.t3 { display: none; }
@keyframes wsBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (min-width: 900px) {
  .ws-tag { padding: 10px 14px 10px 10px; font-size: 11px; gap: 10px; border-radius: 16px; }
  .ws-tag b { width: 30px; height: 30px; border-radius: 10px; font-size: 16px; }
  .ws-tag small { font-size: 11px; }
  .ws-tag.t3 { display: flex; }
}
html.ws-studio #dots button .pill { background: rgba(10,10,10,.14) !important; transition: background .3s, width .4s var(--ease), transform .3s var(--ease); }
html.ws-studio #dots button.active .pill { background: var(--ink) !important; }
html.ws-studio #dots button .label { color: var(--ink-mid) !important; }
html.ws-studio #dots button.active .label { color: var(--ink) !important; }
@media (max-width: 899px) {
  html.ws-studio #dots { gap: 5px !important; }
  html.ws-studio #dots button .pill { height: 4px !important; border-radius: 4px !important; }
  html.ws-studio #dots button.done .pill { background: rgba(10,10,10,.45) !important; }
}
@media (min-width: 900px) {
  html.ws-studio #stage { margin-left: 150px; max-width: 560px; }
  html.ws-studio #dots.ws-orbit { position: absolute; inset: 0; pointer-events: none; display: block; margin: 0; padding: 0; transform: none; width: auto; height: auto; }
  html.ws-studio #dots.ws-orbit button {
    position: absolute; left: var(--ox); top: var(--oy); transform: translate(-11px, -50%); pointer-events: auto;
    display: flex; align-items: center; gap: 12px; flex-direction: row; background: none; border: 0; padding: 6px; cursor: pointer;
  }
  html.ws-studio #dots.ws-orbit button .pill { width: 10px !important; height: 10px !important; border-radius: 50% !important; }
  html.ws-studio #dots.ws-orbit button.active .pill { transform: scale(1.5); box-shadow: 0 0 0 4px rgba(10,10,10,.08); }
  html.ws-studio #dots.ws-orbit button .label {
    position: static !important; opacity: 1 !important; display: block !important; transform: none !important;
    font: 700 10px/1 'Albert Sans', sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase; white-space: nowrap;
  }
  .ws-ring { position: absolute; z-index: 1; pointer-events: none; border-radius: 50%; border: 1px solid rgba(10,10,10,.09);
    -webkit-mask-image: linear-gradient(90deg, #000 0 14%, transparent 34%); mask-image: linear-gradient(90deg, #000 0 14%, transparent 34%); }
}
@media (max-width: 899px) { .ws-ring { display: none; } }
html.ws-studio .control-sheet {
  background: var(--glass) !important; border: 1px solid var(--glass-edge);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 -10px 40px -16px rgba(40,36,24,.22) !important;
}
@media (min-width: 900px) { html.ws-studio .control-sheet { border-radius: 28px !important; box-shadow: var(--lift) !important; } }
@media (max-width: 899px) {
  html.ws-studio .control-sheet { border-radius: 30px 30px 0 0 !important; border-bottom: 0; margin: 0 6px; }
  html.ws-studio #options {
    scroll-snap-type: x mandatory; scroll-padding: 0 18px; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  html.ws-studio #options .chip { scroll-snap-align: start; }
}
html.ws-studio .control-sheet::before { background: rgba(10,10,10,.14) !important; }
html.ws-studio .nav-btn { background: #fff !important; border: 1px solid var(--glass-line) !important; box-shadow: 0 4px 12px -4px rgba(40,36,24,.18) !important; }
html.ws-studio .nav-btn:not(:disabled):active { transform: scale(.9); }
html.ws-studio #options.ws-anim { animation: wsOpts .45s var(--ease); }
html.ws-studio #selection-meta { transition: opacity .25s; }
@keyframes wsOpts { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
html.ws-studio .chip .swatch { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
html.ws-studio .chip:active .swatch { transform: scale(.9); }
html.ws-studio .chip .swatch { box-shadow: 0 0 0 1px rgba(10,10,10,.08), 0 8px 18px -8px rgba(40,36,24,.35) !important; }
html.ws-studio .chip.logo .swatch { background: #fff !important; }
html.ws-studio .chip.active .swatch { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--ink), 0 12px 24px -10px rgba(40,36,24,.45) !important; transform: translateY(-2px); }
html.ws-studio .chip.active .chip-label { color: var(--ink); font-weight: 700; }
html.ws-studio .cta-section { background: transparent !important; }
html.ws-studio .order-cta {
  position: relative; overflow: hidden;
  box-shadow: 0 18px 40px -14px rgba(10,10,10,.55), 0 2px 6px rgba(10,10,10,.2) !important;
  transition: transform .2s var(--ease), box-shadow .3s var(--ease);
}
html.ws-studio .order-cta:active { transform: scale(.97); }
html.ws-studio .order-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  animation: wsShine 4.5s var(--ease) infinite 1.5s;
}
@keyframes wsShine { 0% { left: -60%; } 30%,100% { left: 130%; } }
html.ws-studio .order-cta .arrow-btn { transition: transform .3s var(--ease); }
html.ws-studio .order-cta:hover .arrow-btn { transform: translateX(3px); }
html.ws-studio .price-bump { animation: wsBump .45s var(--ease); display: inline-block; }
@keyframes wsBump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
html.ws-studio .product-head { animation: wsIn .8s var(--ease) both .05s; }
html.ws-studio .stage-in { animation: wsRiseG 1s var(--ease) both .1s; }
html.ws-studio .control-sheet { animation: wsUp .9s var(--ease) both .3s; }
html.ws-studio .cta-section { animation: wsIn .9s var(--ease) both .5s; }
@keyframes wsIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wsRiseG { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes wsUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.ws-studio #stage, html.ws-studio .stage::after, .ws-tag, html.ws-studio .order-cta::after { animation: none !important; }
}
.ws-tag.t1 { top: 3%; left: 14px; }
.ws-tag.t2 { bottom: 17%; right: 14px; }
@media (min-width: 900px) {
  .ws-tag.t1 { top: 12%; left: auto; right: 5%; }
  .ws-tag.t2 { top: 44%; bottom: auto; right: 1%; }
  .ws-tag.t3 { bottom: 17%; right: 9%; }
}
@media (max-width: 899px) {
  html.ws-studio #options { padding-top: 8px !important; padding-bottom: 6px !important; }
}
@media (max-width: 899px) and (max-height: 760px) { .ws-tag { display: none !important; } }
/* v3: remove disc + ghost + floating tags; trust strip; mobile options wrap (no cut-offs) */
html.ws-studio .stage::before, .ws-ghost, .ws-tag { display: none !important; }
html.ws-studio .ws-trust { display: flex !important; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; padding: 0 4px;
  font: 700 9.5px/1.3 'Albert Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
html.ws-studio .ws-trust span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
html.ws-studio .ws-trust svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--ink); }
@media (max-width: 380px) {
  html.ws-studio .ws-trust { gap: 5px 10px; font-size: 8.5px; letter-spacing: .08em; }
  html.ws-studio .ws-trust svg { width: 12px; height: 12px; flex-basis: 12px; }
}
/* v4: one-row fit-to-width options on phones */
@media (max-width: 899px) {
  html.ws-studio #options { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px !important; overflow: visible !important;
    -webkit-mask-image: none !important; mask-image: none !important; scroll-snap-type: none !important; padding: 8px 2px 4px !important; justify-items: center; }
  html.ws-studio #options .chip { min-width: 0; width: 100%; align-items: center; }
  html.ws-studio #options .chip .swatch { width: min(100% - 6px, 58px) !important; height: auto !important; aspect-ratio: 1; }
  html.ws-studio #options .chip.logo .swatch { padding: 12% !important; }
  html.ws-studio #options .chip.size .swatch { font-size: clamp(11px, 3.4vw, 15px) !important; }
  html.ws-studio .chip-label { font-size: clamp(7.5px, 2.35vw, 10px) !important; letter-spacing: .03em !important; max-width: 100% !important; white-space: normal !important; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
  html.ws-studio .order-cta .label-text .main { white-space: nowrap; }
  html.ws-studio .ws-trust { flex-wrap: nowrap; gap: 10px; font-size: clamp(7.5px, 2.2vw, 9.5px); letter-spacing: .06em; }
  html.ws-studio .ws-trust svg { width: 12px; height: 12px; flex-basis: 12px; }
}
@media (max-width: 380px) { html.ws-studio .order-cta .label-text .main { font-size: 14px !important; } html.ws-studio .order-cta { padding-left: 14px !important; padding-right: 14px !important; } }
/* v5: fit exactly in one screen */
@media (max-width: 899px) {
  html.ws-studio .cta-section { padding-top: 8px !important; }
  html.ws-studio .ws-trust { margin-top: 8px !important; }
}
@media (max-width: 899px) and (max-height: 700px) {
  html.ws-studio #selection-meta .desc { display: none !important; }
}
/* v6: labels never break mid-word; preview buttons on one line */
@media (max-width: 899px) {
  html.ws-studio .chip-label { white-space: nowrap !important; overflow-wrap: normal !important; overflow: visible !important; }
  html.ws-studio .preview-btn { white-space: nowrap !important; padding-left: 14px !important; padding-right: 14px !important; font-size: clamp(10.5px, 3.1vw, 13px) !important; letter-spacing: .06em !important; min-width: 0; flex: 1 1 0; justify-content: center; }
}
@media (max-width: 899px) { html.ws-studio #options { grid-template-columns: none !important; grid-template-rows: none !important; width: 100% !important; max-width: 420px; margin: 0 auto !important; } }
@media (max-width: 899px) { html.ws-studio #options::before, html.ws-studio #options::after { display: none !important; content: none !important; } }
/* v7: 360° spin viewer */
#stage svg .ws-f { display: none; }
html.ws-spin-on #stage svg .ws-f { display: inline; }
html.ws-spin-on #stage svg > image:not(.ws-f) { opacity: 0; }
#zoom-stage .ws-f { display: none !important; }
html.ws-spin-on .stage { cursor: grab; }
html.ws-spin-on .stage.ws-dragging { cursor: grabbing; }
html.ws-spin-on .stage.ws-dragging #stage { animation-play-state: paused; }
.ws-spin-hint {
  position: absolute; left: 50%; bottom: 58px; z-index: 5; transform: translate(-50%, 6px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(10,10,10,.82); color: #FAFAF7; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 700 10px/1 'Albert Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .4s var(--ease), transform .4s var(--ease); box-shadow: 0 10px 24px -10px rgba(10,10,10,.5);
}
.ws-spin-hint svg { width: 16px; height: 16px; animation: wsNudge 1.6s var(--ease) infinite; }
.ws-spin-hint.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes wsNudge { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
@media (min-width: 900px) { .ws-spin-hint { bottom: 12%; left: calc(50% + 75px); } }
@media (max-width: 899px) and (max-height: 760px) { .ws-spin-hint { bottom: 44px; } }
.stage:focus-visible { outline: none; }
.stage:focus-visible #stage { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 20px; }
/* v8: headwear photo frames replace the drawn cap */
html.ws-spin-on #stage svg .garment-color-shape, html.ws-spin-on #stage svg .garment-stroke { opacity: 0; }
html.ws-spin-on #stage svg.ws-vec > :not(.ws-f):not(.ws-pw) { opacity: 0 !important; }
/* v9: hat print sits in the fabric */
html.ws-spin-on #stage svg.ws-vec.ws-ink-multiply .ws-pw { mix-blend-mode: multiply; }
html.ws-spin-on #stage svg.ws-vec.ws-ink-screen .ws-pw { mix-blend-mode: screen; }