/* CHAPINO design system — navy editorial print-studio
   Palette: deep navy + sky blue + violet, amber CTA for conversion contrast */
@font-face{font-family:Vazirmatn;src:url(assets/fonts/Vazirmatn-400.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(assets/fonts/Vazirmatn-500.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(assets/fonts/Vazirmatn-700.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(assets/fonts/Vazirmatn-800.ttf) format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(assets/fonts/Vazirmatn-900.ttf) format('truetype');font-weight:900;font-display:swap}
:root{
  --primary:#0a2456; --navy:#06132e; --navy-2:#0b1e42; --blue:#2563eb; --sky:#38bdf8; --cyan:#22d3ee;
  --violet:#8b5cf6; --accent:#ffb020; --accent-2:#ff7847; --pink:#f472b6;
  --bg:#f4f7ff; --surface:#ffffff; --surface-2:#eaf1ff; --text:#101d38; --muted:#5b6b8c; --muted-2:#8494b5;
  --border:#dbe6fb; --success:#0f9d72; --warning:#d97706; --danger:#e11d48;
  --container:1220px; --radius-sm:12px; --radius-md:18px; --radius-lg:28px; --radius-xl:38px;
  --shadow-sm:0 6px 18px rgba(6,19,46,.08); --shadow-md:0 18px 45px rgba(6,19,46,.14); --shadow-lg:0 32px 80px rgba(3,10,28,.32);
  --ease:cubic-bezier(.22,.8,.28,1); --ease-pop:cubic-bezier(.2,1.4,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Vazirmatn,Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.75;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}
.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
.container.narrow{max-width:820px}
.hidden{display:none!important}
.w-full{width:100%}
.skip-link{position:fixed;top:-60px;right:16px;z-index:200;background:var(--accent);color:#231300;padding:10px 18px;border-radius:999px;font-weight:800;transition:top .25s}
.skip-link:focus{top:12px}
::selection{background:var(--sky);color:var(--navy)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 24px;font-weight:800;text-decoration:none;transition:transform .22s var(--ease),box-shadow .22s,background .22s;min-height:48px}
.btn:active{transform:scale(.97)}
.btn-amber{background:linear-gradient(135deg,#ffc233,var(--accent) 55%,#ff8a1e);color:#2a1800;box-shadow:0 12px 28px rgba(255,150,20,.35)}
.btn-amber:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(255,150,20,.42)}
.btn-primary{background:linear-gradient(135deg,var(--blue),#0ea5e9);color:#fff;box-shadow:0 12px 26px rgba(37,99,235,.28)}
.btn-primary:hover{transform:translateY(-3px)}
.btn-ghost-light{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.btn-ghost-light:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.btn-ghost-dark{background:#fff;color:var(--primary);border:1.5px solid var(--border)}
.btn-ghost-dark:hover{border-color:var(--sky);transform:translateY(-2px)}
.btn-soft{background:var(--surface-2);color:var(--primary);border:1px solid var(--border)}
.btn-soft:hover{background:#dbeafe}
.btn-sm{padding:8px 18px;min-height:40px;font-size:.92rem}
.btn-lg{padding:15px 32px;font-size:1.06rem;min-height:56px}
.icon-btn{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;font-size:1.15rem;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.icon-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.icon-btn.dark{background:var(--surface-2);color:var(--primary);border-color:var(--border)}
.badge{position:absolute;top:-6px;left:-6px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--violet);color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.badge.accent{background:var(--accent);color:#2a1800}

/* ---------- header ---------- */
.announce{background:linear-gradient(90deg,#0ea5e9,var(--blue),var(--violet));color:#fff;text-align:center;font-size:.85rem;font-weight:700;padding:7px 14px}
.announce .dot{margin:0 10px;opacity:.6}
.site-header{position:sticky;top:0;z-index:90;background:rgba(6,19,46,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(125,211,252,.18)}
.header-inner{display:flex;align-items:center;gap:22px;padding:12px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;margin-inline-end:auto}
.brand-mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(140deg,var(--blue),var(--sky));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 20px rgba(56,189,248,.35)}
.brand-mark svg{width:34px;height:34px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:1.42rem;font-weight:900}
.brand-text small{font-size:.58rem;letter-spacing:.16em;color:#9db9e8;font-weight:700}
.main-nav{display:flex;gap:6px}
.main-nav a{color:#dbeafe;text-decoration:none;font-weight:700;font-size:.95rem;padding:9px 13px;border-radius:999px;transition:.2s}
.main-nav a:hover{background:rgba(56,189,248,.16);color:#fff}
.header-actions{display:flex;align-items:center;gap:9px}
.menu-btn{display:none}
.mobile-nav{display:none;flex-direction:column;gap:4px;padding:10px 20px 18px;border-top:1px solid rgba(255,255,255,.1)}
.mobile-nav a{color:#eaf2ff;text-decoration:none;font-weight:700;padding:11px 14px;border-radius:12px}
.mobile-nav a:hover{background:rgba(56,189,248,.14)}
.mobile-nav.open{display:flex}

/* ---------- hero ---------- */
.hero{position:relative;background:radial-gradient(1100px 520px at 85% -10%,rgba(56,189,248,.28),transparent 60%),radial-gradient(800px 480px at 5% 20%,rgba(139,92,246,.25),transparent 55%),linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 58%,#0d2a63 100%);color:#eef4ff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:26px 26px;opacity:.16;pointer-events:none}
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.orb-a{width:420px;height:420px;background:#2563eb;top:-140px;left:-80px}
.orb-b{width:340px;height:340px;background:#7c3aed;bottom:6%;right:-90px}
.orb-c{width:200px;height:200px;background:#0ea5e9;top:36%;left:38%}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center;padding:72px 0 30px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(56,189,248,.12);border:1px solid rgba(125,211,252,.35);color:#bae6fd;padding:7px 16px;border-radius:999px;font-size:.86rem;font-weight:700}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:#34d399;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-size:clamp(2rem,4.6vw,3.55rem);font-weight:900;line-height:1.35;margin:20px 0 16px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--sky),var(--cyan),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{color:#c3d5f7;font-size:clamp(1rem,1.5vw,1.14rem);max-width:56ch;margin:0 0 28px}
.hero-lead strong{color:#fff}
.hero-ctas{display:flex;gap:13px;flex-wrap:wrap}
.hero-ctas.center{justify-content:center}
.hero-proof{display:flex;align-items:center;gap:14px;margin-top:30px;color:#c3d5f7;font-size:.9rem;flex-wrap:wrap}
.avatars{display:flex}
.avatars span{width:36px;height:36px;border-radius:50%;border:2.5px solid var(--navy-2);margin-inline-start:-9px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:.85rem}
.avatars span:first-child{margin:0}
.avatars span:nth-child(1){background:#f472b6}.avatars span:nth-child(2){background:#38bdf8}.avatars span:nth-child(3){background:#a78bfa}.avatars span:nth-child(4){background:#34d399}.avatars span:nth-child(5){background:#ffb020;color:#2a1800}
.stars{color:var(--accent);letter-spacing:2px}
.stars.big{font-size:1.35rem}
.proof-sep{width:1px;height:32px;background:rgba(255,255,255,.22)}
.hero-stats{display:flex;gap:0;margin:34px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.hero-stats div{flex:1}
.hero-stats dt{font-size:1.5rem;font-weight:900;color:#fff}
.hero-stats dt span{color:var(--sky)}
.hero-stats dd{margin:0;color:#8fa8d4;font-size:.83rem}
.hero-visual{position:relative}
.stage-card{position:relative;min-height:520px}
.mock{position:relative;flex:none}
.mock .print{position:absolute;overflow:hidden;border-radius:8px}
.mock .print img{width:100%;height:100%;object-fit:cover}
.mock .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 48%,transparent 62%);background-size:260% 100%;background-position:130% 0;border-radius:inherit;pointer-events:none}
.mock:hover .shine{background-position:-40% 0;transition:background-position .9s var(--ease)}
.mock.mug{aspect-ratio:1.06;background:linear-gradient(160deg,#ffffff,#dbe6f7 70%,#b9cdec);border-radius:16px 16px 42px 42px;box-shadow:inset -14px 0 24px rgba(10,36,86,.16),inset 10px 0 18px rgba(255,255,255,.8),0 26px 44px rgba(2,8,24,.4)}
.mock.mug .handle{position:absolute;top:22%;left:-24%;width:42%;height:52%;border:clamp(8px,1.4vw,15px) solid #dfe9fa;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(10,36,86,.06)}
.mock.mug .print{inset:14% 13% 15% 13%}
.mock.mug.big{width:min(290px,62vw);aspect-ratio:1.06}
.mock.mug.med{width:170px;aspect-ratio:1.06}
.mock.bag{aspect-ratio:.83;background:linear-gradient(170deg,#fffdf6,#f3e9d2);border-radius:8px 8px 20px 20px;box-shadow:inset -12px 0 22px rgba(120,90,20,.13),0 26px 44px rgba(2,8,24,.35)}
.mock.bag .handles{position:absolute;top:-17%;left:50%;transform:translateX(-50%);width:52%;height:26%;border:clamp(7px,1.2vw,12px) solid #efe3c8;border-bottom:0;border-radius:90px 90px 0 0}
.mock.bag .print{inset:20% 17% 14% 17%}
.mock.bag.big{width:min(235px,52vw);aspect-ratio:.83}
.mock.bag.med{width:145px;aspect-ratio:.83}
.hero-mug{position:absolute;top:26px;inset-inline-start:2%;z-index:3}
.hero-bag{position:absolute;bottom:8px;inset-inline-end:0;z-index:2}
.float-slow{animation:floaty 6s ease-in-out infinite}
.float-med{animation:floaty 7.5s ease-in-out infinite reverse}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1.2deg)}}
.price-chip{position:absolute;bottom:-16px;inset-inline-start:8px;background:#fff;color:var(--primary);font-weight:900;font-size:.82rem;padding:7px 14px;border-radius:999px;box-shadow:var(--shadow-md);white-space:nowrap}
.price-chip.alt{background:var(--accent);color:#2a1800}
.float-card{position:absolute;z-index:4;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);color:#fff;font-weight:800;font-size:.85rem;padding:10px 16px;border-radius:16px;box-shadow:var(--shadow-md);animation:floaty 5.4s ease-in-out infinite}
.card-a{top:6px;inset-inline-end:6%}
.card-b{top:44%;inset-inline-start:-8px;animation-delay:.8s}
.card-c{bottom:120px;inset-inline-end:14%;animation-delay:1.5s}
.rotating-badge{position:absolute;top:38%;inset-inline-end:2%;width:104px;height:104px;animation:spin 16s linear infinite;opacity:.95}
.rotating-badge svg{width:100%;height:100%}
.rotating-badge text{fill:#bae6fd;font-size:10.2px;font-weight:700;letter-spacing:.14em}
.rotating-badge .badge-star{fill:#2a1800;font-size:15px;text-anchor:middle;letter-spacing:0}
@keyframes spin{to{transform:rotate(360deg)}}
.marquee-wrap{position:relative;z-index:2;padding:8px 0 44px}
.marquee-head{display:flex;justify-content:space-between;align-items:center;color:#9db9e8;font-weight:800;font-size:.9rem;margin-bottom:12px}
.marquee-head a{color:var(--sky);text-decoration:none}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 38s linear infinite;padding:4px 0}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-item{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 18px 7px 8px;color:#eaf2ff;font-weight:700;font-size:.88rem;white-space:nowrap}
.marquee-item img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5)}

/* ---------- sections ---------- */
.section{padding:88px 0}
.section-head{max-width:720px;margin-bottom:42px}
.section-head.center{margin-inline:auto;text-align:center}
.kicker{color:var(--blue);font-weight:900;font-size:.86rem;letter-spacing:.02em;margin:0 0 8px}
.kicker.amber{color:var(--accent)}
.kicker::before{content:"✦ "}
.section-head h2{font-size:clamp(1.65rem,3.4vw,2.5rem);font-weight:900;line-height:1.4;margin:0 0 10px}
.section-head p{color:var(--muted);margin:0}
.section-head.light h2{color:#fff}
.section-head.light h2 span{color:var(--sky)}
.section-head.light p{color:#b9cdf3}

/* steps */
.how{background:var(--bg)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0;padding:0}
.steps li{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 22px 24px;transition:.3s var(--ease);overflow:hidden}
.steps li::before{content:"";position:absolute;top:0;right:0;left:0;height:4px;background:linear-gradient(90deg,var(--sky),var(--violet));transform:scaleX(0);transform-origin:right;transition:.35s}
.steps li:hover{transform:translateY(-7px);box-shadow:var(--shadow-md)}
.steps li:hover::before{transform:scaleX(1)}
.step-num{position:absolute;top:14px;inset-inline-end:18px;font-weight:900;color:var(--surface-2);font-size:1.7rem}
.step-icon{font-size:1.9rem}
.steps h3{margin:10px 0 6px;font-size:1.12rem}
.steps p{margin:0;color:var(--muted);font-size:.93rem}

/* studio */
.studio{background:radial-gradient(900px 420px at 90% 0%,rgba(56,189,248,.22),transparent 55%),linear-gradient(180deg,var(--navy),var(--navy-2) 70%,#0a2456);color:#eaf2ff;position:relative}
.studio-shell{display:grid;grid-template-columns:430px 1fr;gap:26px;align-items:start}
.studio-controls{background:rgba(255,255,255,.97);color:var(--text);border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-lg)}
.studio-controls fieldset{border:0;margin:0 0 24px;padding:0}
.studio-controls legend{font-weight:900;font-size:1.05rem;margin-bottom:13px;display:flex;align-items:center;gap:9px}
.studio-controls legend span{width:27px;height:27px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}
.product-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pick-card{border:2px solid var(--border);background:#fff;border-radius:16px;padding:11px 12px;text-align:right;display:flex;flex-direction:column;gap:1px;transition:.2s}
.pick-card small{color:var(--muted)}
.pick-card strong{font-size:.95rem}
.pick-card .pick-price{color:var(--blue);font-weight:900;font-size:.88rem}
.pick-card:hover{border-color:var(--sky);transform:translateY(-2px)}
.pick-card.active{border-color:var(--blue);background:linear-gradient(180deg,#eff6ff,#dbeafe);box-shadow:0 8px 20px rgba(37,99,235,.16)}
.dropzone{border:2.2px dashed #9db9e8;background:linear-gradient(180deg,#f0f6ff,#e3eeff);border-radius:20px;padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.2s;cursor:pointer}
.dropzone:hover,.dropzone.drag{border-color:var(--blue);background:#dbeafe;transform:scale(1.01)}
.dropzone .dz-icon{width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:900}
.dropzone small{color:var(--muted)}
.dz-file{color:var(--success);font-weight:800;font-size:.85rem}
.or-row{display:flex;align-items:center;gap:12px;color:var(--muted-2);font-size:.82rem;margin:16px 0 10px}
.or-row span{flex:1;height:1px;background:var(--border)}
.field-label{display:block;font-weight:800;font-size:.9rem;margin-bottom:7px}
.field-label small{color:var(--muted);font-weight:500}
.studio-controls input[type=text],.studio-controls select,.review-form input,.review-form select,.review-form textarea,.sort-box select{width:100%;border:1.6px solid var(--border);border-radius:13px;padding:11px 14px;background:#fff;color:var(--text);transition:.2s}
.studio-controls input[type=text]:focus,.studio-controls select:focus,.review-form input:focus,.review-form select:focus,.review-form textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 4px rgba(56,189,248,.22)}
.control-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;align-items:end}
.swatches{display:flex;gap:8px}
.swatch{width:32px;height:32px;border-radius:50%;background:var(--c);border:2.5px solid #fff;box-shadow:0 0 0 1.5px var(--border);transition:.18s}
.swatch.active{box-shadow:0 0 0 3px var(--blue);transform:scale(1.12)}
.range-field{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.88rem}
.range-field.wide{margin-top:12px}
.range-field input[type=range]{accent-color:var(--blue);width:100%}
.range-field span{color:var(--blue);font-weight:900;font-size:.82rem}
.check-row{display:flex;gap:9px;align-items:center;margin-top:14px;font-size:.9rem;font-weight:700;cursor:pointer}
.check-row input{width:19px;height:19px;accent-color:var(--blue)}
#magicBtn{margin-top:10px}
.studio-summary{background:var(--navy);color:#dbeafe;border-radius:18px;padding:16px 18px;display:grid;gap:7px;margin-bottom:14px}
.studio-summary div{display:flex;justify-content:space-between;gap:12px;font-size:.92rem}
.studio-summary span{color:#8fa8d4}
.sum-price{color:var(--accent)!important;font-size:1.05rem}
.micro-note{font-size:.8rem;color:var(--muted);margin:10px 2px 0}
.studio-controls .micro-note{color:#8296bb}

/* preview */
.studio-preview{position:sticky;top:96px}
.preview-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.preview-toolbar strong{font-size:1.08rem}
.preview-toolbar .hint{color:#9db9e8;font-size:.86rem;margin-inline-end:auto}
.preview-stage{position:relative;height:480px;border-radius:var(--radius-xl);background:radial-gradient(560px 300px at 50% 28%,rgba(125,211,252,.3),transparent 65%),linear-gradient(180deg,#10295e,#081a3f);border:1px solid rgba(125,211,252,.28);overflow:hidden;touch-action:none;cursor:grab;perspective:1100px}
.preview-stage:active{cursor:grabbing}
.preview-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:24px 24px;opacity:.14}
.stage-floor{position:absolute;bottom:58px;left:50%;transform:translateX(-50%);width:340px;height:56px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.p3d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mug3d{position:relative;width:280px;height:262px;transform-style:preserve-3d;transition:transform .18s ease-out;animation:floaty 7s ease-in-out infinite}
.mug-body3d{position:absolute;inset:18px 26px 10px 6px;border-radius:20px 20px 52px 52px;overflow:hidden;background:linear-gradient(90deg,#aebfe0 0%,#ffffff 22%,#ffffff 62%,#c3d3ee 88%,#8fa8d4 100%);box-shadow:inset 0 -22px 34px rgba(10,36,86,.14)}
.mug-body3d.tint-color{background:linear-gradient(90deg,#1d4ed8,#60a5fa 30%,#93c5fd 55%,#2563eb 85%,#1e3a8a);color:#fff}
.mug-body3d.tint-magic{background:linear-gradient(90deg,#020617,#1f2937 30%,#374151 55%,#111827 85%,#000);color:#fff}
.mug-body3d img{position:absolute;top:50%;left:50%;width:76%;aspect-ratio:1;object-fit:cover;border-radius:12px;transform:translate(-50%,-52%);transition:opacity .6s,transform .2s}
.mug-body3d.tint-magic:not(.revealed) img{opacity:0}
.overlay-text{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);font-weight:900;font-size:1.02rem;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.35);z-index:3}
.cyl-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,19,46,.34),transparent 20%,transparent 68%,rgba(6,19,46,.42));z-index:2;pointer-events:none}
.cyl-gloss{position:absolute;top:0;bottom:0;left:34%;width:15%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);filter:blur(2px);z-index:2}
.mug-handle3d{position:absolute;top:64px;right:-24px;width:88px;height:128px;border:24px solid #dbe6f7;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(10,36,86,.08);z-index:-1}
.mug-body3d.tint-color ~ .x{}
.mug-rim3d{position:absolute;top:8px;left:18px;right:48px;height:30px;border-radius:50%;background:radial-gradient(closest-side,#fff 58%,#c9d9f2);box-shadow:inset 0 4px 8px rgba(10,36,86,.18);z-index:4}
.bag3d{position:relative;width:252px;height:320px;transform-style:preserve-3d;transition:transform .18s ease-out;animation:floaty 8s ease-in-out infinite}
.bag-body3d{position:absolute;inset:52px 8px 6px;overflow:hidden;border-radius:10px 10px 26px 26px;background:linear-gradient(95deg,#ddd0ae,#fffdf4 25%,#fffdf4 68%,#e6dabd);box-shadow:inset 0 -18px 28px rgba(120,90,20,.12)}
.bag-body3d.tint-black{background:linear-gradient(95deg,#111827,#374151 30%,#4b5563 55%,#1f2937);color:#fff}
.bag-body3d img{position:absolute;top:52%;left:50%;width:64%;aspect-ratio:1;object-fit:cover;border-radius:10px;transform:translate(-50%,-52%);transition:transform .2s}
.bag-handle{position:absolute;top:0;width:86px;height:78px;border:13px solid #efe3c8;border-bottom:0;border-radius:80px 80px 0 0;z-index:2}
.bag-handle.left{left:28px}.bag-handle.right{right:28px}
.fabric-shade{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(120,90,20,.028) 0 3px,transparent 3px 6px),linear-gradient(90deg,rgba(90,65,10,.14),transparent 18%,transparent 80%,rgba(90,65,10,.18));pointer-events:none;z-index:2}
.preview-badge{position:absolute;bottom:18px;inset-inline-start:18px;background:rgba(255,176,32,.95);color:#2a1800;font-weight:900;font-size:.8rem;padding:6px 14px;border-radius:999px;z-index:5}
.preview-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.preview-actions .btn{flex:1}
.preview-notes{color:#8fa8d4;font-size:.83rem;margin:14px 4px 0;padding-inline-start:18px}

/* designs */
.designs{background:linear-gradient(180deg,var(--bg),#eaf1ff)}
.toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.search-box{flex:1;min-width:250px;display:flex;align-items:center;gap:9px;background:#fff;border:1.6px solid var(--border);border-radius:999px;padding:4px 18px;transition:.2s}
.search-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(56,189,248,.2)}
.search-box input{border:0;outline:0;flex:1;padding:10px 0;background:transparent}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.6px solid var(--border);background:#fff;color:var(--primary);border-radius:999px;padding:8px 17px;font-weight:800;font-size:.88rem;transition:.2s}
.chip:hover{border-color:var(--sky);transform:translateY(-2px)}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.sort-box{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.9rem}
.sort-box select{width:auto;padding:9px 13px}
.result-count{color:var(--muted);font-size:.9rem;margin:8px 2px 18px}
.design-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.design-card{background:#fff;border:1px solid var(--border);border-radius:24px;overflow:hidden;transition:.3s var(--ease);display:flex;flex-direction:column}
.design-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:#bcd4ff}
.mock-scene{position:relative;height:218px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mock-scene::before{content:"";position:absolute;inset:0;background:radial-gradient(220px 150px at 50% 30%,rgba(255,255,255,.75),transparent 70%)}
.mock-scene .mock.mug{width:128px}
.mock-scene .mock.bag{width:104px;margin-top:20px}
.design-card .mock{transition:transform .35s var(--ease)}
.design-card:hover .mock{transform:rotate(-3deg) scale(1.06)}
.design-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.design-body h3{margin:0;font-size:1.03rem}
.design-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.83rem}
.design-meta .stars{font-size:.8rem}
.tag-row{display:flex;gap:6px;flex-wrap:wrap}
.tag{background:var(--surface-2);color:var(--primary);font-size:.74rem;font-weight:700;border-radius:999px;padding:3px 10px}
.design-actions{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.design-actions .btn{flex:1;padding:10px 8px;font-size:.86rem;min-height:42px}
.designs .marquee-wrap{padding:0 0 8px}
.designs .marquee-head{color:var(--muted)}
.designs .marquee-item{background:linear-gradient(135deg,var(--navy-2),var(--primary));border-color:rgba(56,189,248,.35);color:#eaf2ff;box-shadow:var(--shadow-sm)}
.designs .mock-scene{height:238px}
.cat-pill{position:absolute;top:12px;inset-inline-end:12px;z-index:3;background:rgba(255,255,255,.92);color:var(--primary);font-size:.74rem;font-weight:900;padding:4px 12px;border-radius:999px;box-shadow:var(--shadow-sm)}
.design-card .mock-scene::after{content:"";position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(180deg,transparent,rgba(6,19,46,.10));pointer-events:none}
.empty-state{text-align:center;background:#fff;border:1.5px dashed #b6cdf5;border-radius:26px;padding:44px 20px}
.empty-state span{font-size:2.2rem}

/* shop */
.shop{background:#fff}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:22px}
.product-card{background:var(--bg);border:1px solid var(--border);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:.3s var(--ease);position:relative}
.product-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);background:#fff}
.p-badge{position:absolute;top:14px;inset-inline-start:14px;z-index:3;background:var(--danger);color:#fff;font-size:.75rem;font-weight:900;padding:4px 11px;border-radius:999px}
.p-badge.blue{background:var(--blue)}
.wish-btn{position:absolute;top:11px;inset-inline-end:11px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:1.05rem;transition:.2s}
.wish-btn.active{background:#ffe4ec;color:var(--danger);transform:scale(1.1)}
.product-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-body h3{margin:0;font-size:1.02rem}
.product-body p{margin:0;color:var(--muted);font-size:.88rem}
.price-row{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px}
.price{font-weight:900;color:var(--primary);font-size:1.08rem}
.old-price{color:var(--muted-2);text-decoration:line-through;font-size:.86rem}
.product-actions{display:flex;gap:8px}
.product-actions .btn{flex:1;font-size:.86rem;padding:10px 6px;min-height:42px}

/* why */
.why{background:linear-gradient(135deg,var(--navy) 0%,#0d2a63 60%,#123a7d);color:#eaf2ff;overflow:hidden}
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.why h2{font-size:clamp(1.6rem,3.2vw,2.35rem);font-weight:900;line-height:1.5;margin:0 0 14px}
.why-copy>p{color:#b9cdf3}
.why-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.why-list li{background:rgba(255,255,255,.06);border:1px solid rgba(125,211,252,.2);border-radius:18px;padding:15px 18px;display:flex;flex-direction:column}
.why-list strong{color:#fff}
.why-list span{color:#a9c0e8;font-size:.92rem}
.why-visual{position:relative;min-height:420px}
.why-card{position:absolute;background:rgba(255,255,255,.97);color:var(--text);border-radius:26px;padding:26px 22px 18px;display:flex;flex-direction:column;align-items:center;gap:5px;box-shadow:var(--shadow-lg);animation:floaty 7s ease-in-out infinite}
.why-card small{color:var(--muted)}
.why-card.main{top:12px;inset-inline-start:4%;z-index:2}
.why-card.side{bottom:0;inset-inline-end:2%;animation-delay:1.2s}
.why-badge{position:absolute;top:44%;inset-inline-start:42%;z-index:3;width:104px;height:104px;border-radius:50%;background:linear-gradient(140deg,var(--accent),#ff8a1e);color:#2a1800;font-weight:900;text-align:center;display:flex;align-items:center;justify-content:center;line-height:1.5;box-shadow:var(--shadow-md);animation:floaty 5.5s ease-in-out infinite reverse;font-size:.92rem}

/* reviews */
.reviews{background:linear-gradient(180deg,#eaf1ff,var(--bg))}
.reviews-layout{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
.review-summary{background:var(--navy);color:#eaf2ff;border-radius:26px;padding:28px;position:sticky;top:96px;text-align:center}
.big-score{font-size:3.4rem;font-weight:900;line-height:1;color:#fff}
.review-summary p{color:#a9c0e8}
.bars{display:grid;gap:7px;margin:18px 0;text-align:right}
.bar-row{display:flex;align-items:center;gap:9px;font-size:.82rem;color:#c3d5f7}
.bar-track{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--sky),var(--accent));border-radius:99px;transition:width .6s var(--ease)}
.summary-note{font-size:.8rem}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.review-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:20px;transition:.25s}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.review-card.new{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,176,32,.25)}
.review-head{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.review-head .avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}
.review-head small{color:var(--muted);display:block;line-height:1.4}
.review-card p{margin:5px 0 0;color:#34466b;font-size:.94rem}
.review-form{background:#fff;border:1px solid var(--border);border-radius:26px;padding:26px}
.review-form h3{margin-top:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.review-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.92rem;margin-bottom:12px}
.star-input{display:flex;gap:5px;margin-bottom:14px}
.star-input button{width:44px;height:44px;border-radius:13px;border:1.6px solid var(--border);background:#fff;font-size:1.3rem;color:#c6d4ee;transition:.15s}
.star-input button.on{color:var(--accent);border-color:var(--accent);background:#fff8e6;transform:scale(1.07)}
.form-msg{color:var(--success);font-weight:800;min-height:1.4em}

/* faq + cta */
.faq{background:#fff}
.accordion{display:grid;gap:11px}
.acc-item{border:1.5px solid var(--border);border-radius:18px;overflow:hidden;background:var(--bg)}
.acc-btn{width:100%;background:none;border:0;padding:18px 20px;display:flex;justify-content:space-between;gap:14px;font-weight:800;text-align:right;color:var(--primary);font-size:1rem}
.acc-btn span{color:var(--blue);font-size:1.3rem;transition:.3s;line-height:1}
.acc-item.open .acc-btn span{transform:rotate(45deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.acc-panel p{margin:0;padding:0 20px 18px;color:var(--muted)}
.final-cta{background:radial-gradient(700px 300px at 50% 0%,rgba(56,189,248,.3),transparent 65%),linear-gradient(180deg,var(--navy-2),var(--navy));color:#fff;text-align:center;padding:88px 0}
.final-cta h2{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:900;line-height:1.5;max-width:22ch;margin:0 auto 12px}
.final-cta p{color:#b9cdf3}

/* footer */
.site-footer{background:#040d21;color:#a9c0e8;padding:56px 0 110px}
.footer-grid{display:grid;grid-template-columns:1.3fr .8fr 1fr 1fr;gap:28px}
.site-footer h3{color:#fff;font-size:1rem;margin-top:0}
.site-footer nav{display:flex;flex-direction:column;gap:7px}
.site-footer nav a{color:#a9c0e8;text-decoration:none}
.site-footer nav a:hover{color:var(--sky)}
.brand.light{margin-bottom:12px}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;font-size:.84rem}
.footer-bottom a{color:var(--sky);text-decoration:none}

/* drawer / modal / toast */
.overlay{position:fixed;inset:0;background:rgba(3,9,24,.62);backdrop-filter:blur(3px);z-index:120}
.cart-drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(420px,94vw);background:#fff;z-index:130;box-shadow:var(--shadow-lg);transform:translateX(-110%);transition:transform .38s var(--ease);display:flex;flex-direction:column}
[dir=rtl] .cart-drawer{transform:translateX(-110%)}
.cart-drawer.open{transform:translateX(0)!important}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.drawer-head h2{margin:0;font-size:1.15rem}
.cart-items{flex:1;overflow:auto;padding:16px 20px;display:grid;gap:12px;align-content:start}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;border:1px solid var(--border);border-radius:16px;padding:11px;align-items:center}
.cart-item img{width:64px;height:64px;border-radius:11px;object-fit:cover}
.cart-item h4{margin:0;font-size:.9rem;line-height:1.5}
.cart-item small{color:var(--muted)}
.qty{display:flex;align-items:center;gap:7px;margin-top:5px}
.qty button{width:27px;height:27px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);font-weight:900}
.cart-item .remove{color:var(--danger);background:none;border:0;font-size:.8rem;font-weight:800;padding:0}
.cart-empty{text-align:center;padding:38px 20px}
.cart-empty span{font-size:2.4rem}
.cart-foot{border-top:1px solid var(--border);padding:18px 22px}
.cart-row{display:flex;justify-content:space-between;font-size:1.05rem;margin-bottom:8px}
.modal{position:fixed;inset:0;z-index:140;background:rgba(3,9,24,.66);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modal-card{position:relative;background:#fff;border-radius:28px;max-width:620px;width:100%;max-height:88vh;overflow:auto;padding:28px;box-shadow:var(--shadow-lg);animation:pop .3s var(--ease-pop)}
@keyframes pop{from{transform:scale(.92) translateY(14px);opacity:0}}
.modal-close{position:absolute;top:14px;inset-inline-end:14px;z-index:2}
.modal .mock-scene{height:250px;border-radius:18px;margin-bottom:16px}
.modal h3{margin:0 0 6px;font-size:1.3rem}
.modal p{color:var(--muted)}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.modal-actions .btn{flex:1}
.checkout-form{display:grid;gap:11px;margin-top:14px}
.checkout-form input,.checkout-form textarea{border:1.6px solid var(--border);border-radius:13px;padding:11px 14px;width:100%}
.success-box{text-align:center;padding:16px 0}
.success-box .ok{width:76px;height:76px;margin:0 auto 12px;border-radius:50%;background:#dcfce7;color:var(--success);font-size:2rem;display:flex;align-items:center;justify-content:center}
.toast-wrap{position:fixed;bottom:92px;inset-inline-start:18px;z-index:160;display:grid;gap:9px}
.toast{background:var(--navy);color:#fff;border-radius:15px;padding:13px 18px;font-weight:700;box-shadow:var(--shadow-lg);display:flex;gap:9px;align-items:center;animation:toastIn .32s var(--ease-pop);max-width:min(360px,86vw);font-size:.92rem}
.toast.success{border-inline-start:5px solid #34d399}
@keyframes toastIn{from{transform:translateY(16px);opacity:0}}
.mobile-cta{display:none}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .design-grid,.product-grid{grid-template-columns:repeat(3,1fr)}
  .studio-shell{grid-template-columns:380px 1fr}
  .main-nav a{padding:9px 8px;font-size:.9rem}
}
@media(max-width:920px){
  .main-nav{display:none}.menu-btn{display:inline-flex}
  .hero-grid{grid-template-columns:1fr;padding-top:48px}
  .stage-card{min-height:470px;max-width:560px;margin-inline:auto}
  .studio-shell{grid-template-columns:1fr}
  .studio-preview{position:static}
  .why-grid,.reviews-layout{grid-template-columns:1fr}
  .review-summary{position:static}
  .steps{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hide-md{display:none}
}
@media(max-width:640px){
  .section{padding:60px 0}
  .design-grid,.product-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .mock-scene{height:168px}
  .mock-scene .mock.mug{width:102px}.mock-scene .mock.bag{width:82px}
  .design-body,.product-body{padding:12px}
  .design-actions,.product-actions{flex-direction:column}
  .steps{grid-template-columns:1fr}
  .review-grid,.form-grid,.control-row{grid-template-columns:1fr}
  .preview-stage{height:410px}
  .mug3d{transform-origin:center;scale:.82}
  .bag3d{scale:.85}
  .hero-stats{flex-wrap:wrap;gap:14px}.hero-stats div{flex:1 1 40%}
  .announce .hide-sm{display:none}
  .mobile-cta{display:flex;gap:10px;position:fixed;bottom:0;right:0;left:0;z-index:110;background:rgba(6,19,46,.94);backdrop-filter:blur(12px);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .mobile-cta .btn{flex:1;white-space:nowrap;font-size:.94rem;padding-inline:10px}
  .toast-wrap{bottom:150px}
  .footer-grid{grid-template-columns:1fr}
  .card-b{inset-inline-start:0}.card-c{bottom:86px}
  .header-inner{gap:10px}
  .brand-text small{display:none}
}
@media(max-width:400px){
  .design-grid,.product-grid{grid-template-columns:1fr 1fr;gap:9px}
  .design-body h3,.product-body h3{font-size:.9rem}
  .tag-row .tag:nth-child(n+3){display:none}
}
.photo-credit{font-size:.78rem;color:#7e93bd}.photo-credit a{color:var(--sky)}
/* --- real photography in cards (same card system, photo treatment) --- */
.mock-scene.has-photo{padding:0}
.photo-frame{position:absolute;inset:0;overflow:hidden}
.photo-frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.design-card:hover .photo-frame img,.product-card:hover .photo-frame img{transform:scale(1.06)}
.photo-tag{position:absolute;bottom:12px;inset-inline-start:12px;z-index:3;background:rgba(6,19,46,.82);color:#fff;font-size:.72rem;font-weight:800;padding:4px 11px;border-radius:999px;backdrop-filter:blur(4px)}
/* --- hero apparel photo card --- */
.hero-photo-card{position:absolute;bottom:118px;inset-inline-start:34%;z-index:5;width:118px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);text-decoration:none;transform:rotate(4deg);transition:transform .3s var(--ease);animation:floaty 6.5s ease-in-out infinite}
.hero-photo-card:hover{transform:rotate(0) scale(1.06)}
.hero-photo-card img{width:100%;height:118px;object-fit:cover}
.hero-photo-card span{display:block;color:var(--primary);font-size:.72rem;font-weight:900;padding:7px 9px;line-height:1.5}
/* --- apparel options in studio --- */
.product-picker{max-height:308px;overflow:auto;padding-inline-end:4px;scrollbar-width:thin}
.apparel-options{background:linear-gradient(180deg,#f5f3ff,#eff6ff);border:1.5px solid #ddd6fe;border-radius:18px;padding:15px;margin-bottom:16px}
.size-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.size-pills button{min-width:46px;padding:8px 10px;border-radius:11px;border:1.6px solid var(--border);background:#fff;font-weight:900;color:var(--primary);transition:.18s}
.size-pills button.active{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.06)}
.apparel-options select{margin-top:6px}
/* --- apparel 3D-ish preview (same stage, garment silhouette) --- */
.garment3d{position:relative;width:272px;height:318px;transform-style:preserve-3d;transition:transform .18s ease-out;animation:floaty 8s ease-in-out infinite}
.garment-body{position:absolute;inset:58px 34px 8px;overflow:hidden;border-radius:26px 26px 20px 20px;background:#f8fafc;box-shadow:inset -16px 0 26px rgba(6,19,46,.14),inset 12px 0 20px rgba(255,255,255,.55),0 24px 40px rgba(2,8,24,.35);transition:background .3s}
.garment-body img{position:absolute;top:46%;left:50%;width:56%;aspect-ratio:1;object-fit:cover;border-radius:10px;transform:translate(-50%,-52%);transition:all .25s;z-index:2}
.garment3d.place-back .garment-body img{top:48%}
.garment3d.place-sleeve .garment-body img{top:24%;left:82%;width:19%}
.g-neck{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:74px;height:28px;border-radius:0 0 40px 40px;background:rgba(6,19,46,.16);z-index:3}
.g-sleeve{position:absolute;top:66px;width:64px;height:118px;background:inherit;border-radius:16px;z-index:0;background:#e8edf5;box-shadow:inset -8px 0 16px rgba(6,19,46,.12)}
.garment3d .g-sleeve{background:var(--garment,#f8fafc)}
.g-sleeve.left{left:2px;transform:rotate(14deg)}
.g-sleeve.right{right:2px;transform:rotate(-14deg)}
.garment3d.form-long .g-sleeve{height:215px;width:52px}
.garment3d.form-oversized .garment-body{inset-inline:18px}
.garment3d.form-oversized .g-sleeve{width:78px;height:104px}
.g-hood{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:118px;height:66px;border-radius:70px 70px 18px 18px;background:var(--garment,#f8fafc);box-shadow:inset 0 -12px 20px rgba(6,19,46,.18);display:none;z-index:1}
.garment3d.form-hoodie .g-hood{display:block}
.g-pocket{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);width:46%;height:19%;border:2px solid rgba(6,19,46,.16);border-top:0;border-radius:0 0 16px 16px;display:none;z-index:3}
.garment3d.form-hoodie .g-pocket{display:block}
.g-zip{position:absolute;top:24px;bottom:0;left:50%;width:3px;background:rgba(6,19,46,.28);display:none;z-index:3}
.garment3d.form-zip .g-zip{display:block}
.garment3d .overlay-text{z-index:4}
.g-placement-label{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.92);color:var(--primary);font-size:.74rem;font-weight:900;padding:4px 13px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow-sm)}
@media(max-width:640px){.hero-photo-card{display:none}.garment3d{scale:.84}}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto}
  .reveal{opacity:1;transform:none}
}