/* Cypher Town – Shop Experience */
.cts{--ink:#121016;--paper:#F2EEE6;--indigo:#5A63D3;--yellow:#F5C518;--mut:rgba(242,238,230,.66);--line:rgba(242,238,230,.14);--card:#1B1820;
	--cts-skin:#B97A4F;--cts-head:#C8102E;--cts-top:#F2EEE6;--cts-bottom:#2B2733;--cts-socks:#F2EEE6;
	position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--ink);color:var(--paper);font-family:"DM Sans",system-ui,sans-serif;padding:clamp(20px,3vw,40px) clamp(16px,4vw,56px) 28px;box-sizing:border-box;overflow:hidden}
.cts *,.cts *::before,.cts *::after{box-sizing:border-box}
.cts button{font:inherit;color:inherit;cursor:pointer}
.cts-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.cts-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1280px;margin:0 auto 12px}
.cts-title{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(2.2rem,1.4rem + 3.6vw,4.6rem)!important;line-height:.95!important;letter-spacing:.01em;text-transform:uppercase;margin:0!important;padding:0!important;color:var(--paper)!important}
.cts-lead{margin:.5em 0 0!important;color:var(--mut);font-size:clamp(1rem,.95rem + .25vw,1.125rem)!important;max-width:42ch;padding:0!important}
.cts-actions{display:flex;align-items:center;gap:12px}
.cts-switch{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.cts-sw{border:0;background:none;padding:10px 18px;border-radius:999px;font-weight:600;font-size:15px;color:var(--mut);white-space:nowrap;transition:background .2s,color .2s}
.cts-sw.is-on{background:var(--yellow);color:var(--ink)}
.cts-cartbtn{position:relative;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);color:var(--paper)!important;background:rgba(255,255,255,.04)}
.cts-cartbtn svg{width:24px;height:24px}
.cts-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:700;display:grid;place-items:center}
.cts-count.bump{animation:cts-bump .5s}
@keyframes cts-bump{40%{transform:scale(1.35)}}

/* stage */
.cts-body{max-width:1280px;margin:0 auto}
.cts-stage{position:relative;display:grid;grid-template-columns:1fr;justify-items:center;padding:8px 0 0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cts-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cts-sun{position:absolute;left:50%;top:6%;width:min(62vh,520px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(90,99,211,.55),rgba(90,99,211,.12) 55%,transparent 70%)}
.cts-word{position:absolute;left:50%;top:18%;transform:translateX(-50%);font-family:Anton,Impact,sans-serif;font-size:clamp(5rem,16vw,15rem);line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.5px rgba(242,238,230,.10);white-space:nowrap}
.cts-floor{position:absolute;left:0;right:0;bottom:13%;height:1px;background:linear-gradient(90deg,transparent,rgba(245,197,24,.45),transparent)}
.cts-fig{position:relative;height:min(66vh,680px);aspect-ratio:1/2;transform-origin:var(--zx,50%) var(--zy,40%);}
.cts-char{display:block;width:100%;height:100%;overflow:visible}
.cts-print{font:400 27px Anton,Impact,sans-serif;letter-spacing:1px}
.cts-print-s{font-size:19px}
.cts-print-xs{font-size:12px}
.cts-g{display:none}
.cts-fig[data-head=cap] .cts-g-cap,.cts-fig[data-head=beanie] .cts-g-beanie,
.cts-fig[data-top=tee] .cts-g-tee,.cts-fig[data-top=hoodie] .cts-g-hoodie,.cts-fig[data-top=sweater] .cts-g-sweater,
.cts-fig[data-top=hoodie] .cts-g-long,.cts-fig[data-top=sweater] .cts-g-long{display:inline}
.cts-part{transition:filter .25s}
.cts-part path,.cts-part circle,.cts-part rect,.cts-part ellipse{transition:fill .45s}
.cts-fig.hl-head .cts-part[data-part=head],.cts-fig.hl-top .cts-part[data-part=top],.cts-fig.hl-bottom .cts-part[data-part=shorts],.cts-fig.hl-pins .cts-part[data-part=pins],.cts-fig.hl-socks .cts-part[data-part=socks]{filter:drop-shadow(0 0 0 #F5C518) drop-shadow(0 0 2px #F5C518) drop-shadow(0 0 10px rgba(245,197,24,.6)) brightness(1.08)}
.cts-fig.swap .cts-char{animation:cts-swap .45s}
@keyframes cts-swap{40%{transform:scale(1.03) rotate(-1deg)}}

/* hotspots */
.cts-hot{position:absolute;left:calc(var(--x) - var(--w)/2);top:calc(var(--y) - var(--h)/2);width:var(--w);height:var(--h);border:0;background:none;padding:0;border-radius:18px;-webkit-tap-highlight-color:transparent}
.cts-hot:focus-visible{outline:2px dashed var(--yellow);outline-offset:4px}
.cts-dot{position:absolute;right:-6px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(245,197,24,.7);animation:cts-pulse 2s infinite}
.cts-hot-s .cts-dot{right:-14px;width:12px;height:12px;margin-top:-6px}
@keyframes cts-pulse{70%{box-shadow:0 0 0 14px rgba(245,197,24,0)}100%{box-shadow:0 0 0 0 rgba(245,197,24,0)}}
.cts-tip{position:absolute;left:calc(100% + 18px);top:50%;transform:translate(-6px,-50%);opacity:0;white-space:nowrap;background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;padding:6px 12px;border-radius:999px;pointer-events:none;transition:opacity .2s,transform .2s}
.cts-hot:hover .cts-tip,.cts-hot:focus-visible .cts-tip{opacity:1;transform:translate(0,-50%)}
.cts-hint{position:relative;margin:4px 0 0!important;font-size:14px!important;color:var(--mut);letter-spacing:.08em;text-transform:uppercase;padding:0!important}

/* look bar */
.cts-look{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px;min-height:52px}
.cts-look-list{display:flex;gap:8px;list-style:none!important;margin:0!important;padding:0!important}
.cts-look-list li{width:44px;height:44px;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);padding:0!important}
.cts-look-list img{width:100%;height:100%;object-fit:cover}
.cts-btn{border:0;border-radius:999px;padding:14px 22px;font-weight:700;font-size:16px;background:var(--yellow);color:var(--ink);white-space:nowrap;transition:transform .15s,opacity .2s}
.cts-btn:hover{transform:translateY(-1px)}
.cts-btn[disabled]{opacity:.35;cursor:not-allowed;transform:none}
.cts-btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}
.cts-ship{max-width:1280px;margin:18px auto 0!important;text-align:center;font-size:13px!important;color:var(--mut);padding:0!important}

/* drawer */
.cts-drawer{position:fixed;z-index:100001;top:0;right:0;height:100dvh;width:min(560px,92vw);background:#18151D;border-left:1px solid var(--line);box-shadow:-30px 0 60px rgba(0,0,0,.45);transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;color:var(--paper)}
.admin-bar .cts-drawer{top:32px;height:calc(100dvh - 32px)}
.cts.is-open .cts-drawer{transform:none}
.cts-scrim{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.45)}
.cts-dhead{display:flex;align-items:center;gap:8px;padding:16px 16px 8px}
.cts-dtitle{flex:1;margin:0!important;padding:0!important;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(1.5rem,1.3rem + .8vw,2rem)!important;line-height:1.1!important;text-transform:uppercase;color:var(--paper)!important}
.cts-iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;font-size:22px;line-height:1;display:grid;place-items:center;flex:none}
.cts-tabs{display:flex;gap:8px;padding:4px 16px 12px;overflow-x:auto;scrollbar-width:none}
.cts-tabs:empty{display:none}
.cts-tab,.cts-chip{border:1px solid var(--line);background:none;border-radius:999px;padding:9px 16px;font-size:15px;font-weight:600;white-space:nowrap;color:var(--mut)}
.cts-tab.is-on,.cts-chip.is-on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cts-dbody{flex:1;overflow-y:auto;padding:4px 16px 24px;overscroll-behavior:contain}
.cts-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cts-card{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:16px;overflow:hidden;padding:0;transition:transform .2s,border-color .2s;animation:cts-in .45s both}
.cts-card:hover{transform:translateY(-3px);border-color:rgba(245,197,24,.6)}
@keyframes cts-in{from{opacity:0;transform:translateY(14px)}}
.cts-card-img{aspect-ratio:1;background:#221E28;display:grid;place-items:center;overflow:hidden}
.cts-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cts-card:hover .cts-card-img img{transform:scale(1.06)}
.cts-card-b{padding:10px 12px 12px}
.cts-card-n{display:block;font-weight:700;font-size:15px;line-height:1.3;margin:0 0 4px}
.cts-card-b .cts-price{display:block}
.cts-price{font-weight:700;color:var(--yellow);font-size:15px}
.cts-price del{color:var(--mut);font-weight:400;margin-right:6px;font-size:.9em}
.cts-sws{display:flex;gap:4px;margin-top:8px}
.cts-sws i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.35)}
.cts-soon{border:1px dashed var(--line);border-radius:18px;padding:28px 20px;text-align:center}
.cts-soon b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.6rem;text-transform:uppercase;color:var(--yellow);margin-bottom:6px}
.cts-soon p{color:var(--mut);margin:0!important;font-size:15px!important;padding:0!important}
.cts-sk{aspect-ratio:3/4;border-radius:16px;background:linear-gradient(90deg,#1E1A23 25%,#2A2530 50%,#1E1A23 75%);background-size:200% 100%;animation:cts-sk 1.2s infinite}
@keyframes cts-sk{to{background-position:-200% 0}}

/* product detail */
.cts-pd{animation:cts-in .35s both}
.cts-pd-img{position:relative;aspect-ratio:4/3;max-height:44vh;width:100%;border-radius:18px;overflow:hidden;background:#221E28;cursor:zoom-in}
.cts-pd-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s;transform-origin:var(--ox,50%) var(--oy,50%)}
.cts-pd-img.zoom{cursor:zoom-out}
.cts-pd-img.zoom img{transform:scale(2)}
.cts-thumbs{display:flex;gap:8px;margin-top:8px}
.cts-thumbs button{width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid var(--line);padding:0;background:none}
.cts-thumbs button.is-on{border-color:var(--yellow)}
.cts-thumbs img{width:100%;height:100%;object-fit:cover}
.cts-pd h3{font-size:1.3rem!important;line-height:1.25!important;margin:14px 0 4px!important;padding:0!important;color:var(--paper)!important}
.cts-pd .cts-price{font-size:1.2rem}
.cts-desc{color:var(--mut);font-size:15px;line-height:1.55;margin-top:10px}
.cts-desc p{margin:0 0 .6em!important;padding:0!important}
.cts-opt{margin-top:16px}
.cts-opt-l{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.cts-opt-l b{color:var(--paper);letter-spacing:0;text-transform:none;font-size:14px;margin-left:6px}
.cts-swatches,.cts-sizes{display:flex;flex-wrap:wrap;gap:8px}
.cts-swatch{width:40px;height:40px;border-radius:50%;border:2px solid transparent;padding:3px;background-clip:content-box!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.cts-swatch.is-on{border-color:var(--yellow)}
.cts-size{min-width:52px;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:none;font-weight:700}
.cts-size.is-on{background:var(--paper);color:var(--ink)}
.cts-size[disabled]{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.cts-buy{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;position:sticky;bottom:-24px;z-index:2;padding:14px 0 26px;background:linear-gradient(transparent,#18151D 30%)}
.cts-buy .cts-btn{padding:15px 12px}
.cts-full{display:inline-block;margin-top:14px;color:var(--mut)!important;font-size:14px;text-decoration:underline}
.cts-tryon{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--yellow)}
.cts-tryon::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow)}

/* grid view */
.cts[data-view=grid] .cts-stage{display:none}
.cts-chips{display:flex;gap:8px;overflow-x:auto;padding:8px 0 16px;scrollbar-width:none}
.cts-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}

/* workshops */
.cts[data-view=ws] .cts-stage{display:none}
.cts-ws-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:14px;padding-top:12px}
.cts-wcard{display:grid;grid-template-columns:72px 120px 1fr;gap:16px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:12px;transition:transform .2s,border-color .2s;animation:cts-in .45s both}
.cts-wcard:hover{transform:translateY(-3px);border-color:rgba(245,197,24,.6)}
.cts-wdate{display:grid;place-items:center;align-self:stretch;border-radius:12px;background:var(--yellow);color:var(--ink);line-height:1;padding:8px 0}
.cts-wdate b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:2rem}
.cts-wdate i{font-style:normal;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.06em}
.cts-wimg{aspect-ratio:1;border-radius:12px;overflow:hidden;background:#221E28}
.cts-wimg img{width:100%;height:100%;object-fit:cover}
.cts-wbody{display:flex;flex-direction:column;gap:3px;min-width:0}
.cts-wmeta{color:var(--mut);font-size:14px}
.cts-wfoot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.cts-ws-left{font-size:13px;font-weight:700;color:var(--paper);background:rgba(90,99,211,.35);padding:3px 10px;border-radius:999px}
.cts-ws-full{font-size:13px;font-weight:700;color:var(--ink);background:var(--mut);padding:3px 10px;border-radius:999px}
.cts-wdl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:14px 0 0;font-size:15px}
.cts-wdl dt{color:var(--mut)}
.cts-wdl dd{margin:0;font-weight:600}
.cts-wspots{margin:12px 0 0!important;padding:0!important}
.cts-wnote{font-size:13px!important;color:var(--mut);margin:12px 0 0!important;padding:0!important}
@media (max-width:640px){.cts-wcard{grid-template-columns:60px 1fr;}.cts-wimg{display:none}.cts-switch .cts-sw{font-size:14px;padding:10px 6px}}

/* toast */
.cts-toast{position:fixed;z-index:100002;left:50%;bottom:24px;transform:translate(-50%,calc(100% + 48px));visibility:hidden;display:flex;align-items:center;gap:14px;background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 8px 8px 20px;font-weight:700;box-shadow:0 16px 40px rgba(0,0,0,.45);transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s;max-width:calc(100vw - 32px)}
.cts-toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cts-toast a{background:var(--ink);color:var(--paper)!important;padding:10px 16px;border-radius:999px;text-decoration:none;white-space:nowrap}

/* desktop: drawer pushes the stage instead of covering it */
@media (min-width:1025px){
	.cts.is-open .cts-scrim{display:none}
}
/* phones + tablets: bottom sheet */
@media (max-width:1024px){
	.cts-drawer{top:auto!important;bottom:0;left:0;right:0;width:100%;height:min(78dvh,720px)!important;border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;transform:translateY(105%)}
	.cts-drawer::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:10px auto 0}
	.cts-tip{display:none}
	.cts-pd-img{aspect-ratio:4/3}
}
@media (max-width:640px){
	.cts{padding:16px 16px 20px}
	.cts-bar{align-items:stretch;flex-direction:column;gap:14px}
	.cts-actions{justify-content:space-between}
	.cts-switch{flex:1}
	.cts-sw{flex:1;padding:10px 8px}
	.cts-fig{height:min(64dvh,560px)}
	.cts-dot{right:auto;left:50%;margin-left:-8px}
	.cts-hot-s .cts-dot{left:auto;right:-10px;margin-left:0}
	.cts-cards{grid-template-columns:1fr 1fr;gap:10px}
	.cts-look{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
	.cts *{animation:none!important;transition:none!important}
}

/* hide the default WooCommerce loop once the experience is running */
body.cts-ready.cts-page .woocommerce-breadcrumb,body.cts-ready.cts-page .woocommerce-products-header,body.cts-ready.cts-page .woocommerce-result-count,body.cts-ready.cts-page .woocommerce-ordering,body.cts-ready.cts-page ul.products,body.cts-ready.cts-page .woocommerce-pagination,body.cts-ready.cts-page #left-area > h1,body.cts-ready.cts-page .woocommerce-notices-wrapper:empty{display:none!important}
body.cts-page #main-content .container{width:100%;max-width:none;padding-top:0}
body.cts-page #main-content .container::before{display:none}
body.cts-page #left-area{width:100%!important;padding:0!important;float:none}
body.cts-page #sidebar{display:none}
body.cts-lock{overflow:hidden}
body.cts-open #cta-root,body.cts-open #ctc-root .ctc-fab{display:none!important}
