@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#070707;--panel:#101010;--line:#242424;--text:#f5f2eb;--muted:#96938d;--accent:#fff;--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:10px 4vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(7,7,7,.92);backdrop-filter:blur(12px);z-index:20}
.brand img{width:86px;height:48px;object-fit:contain;filter:invert(1) grayscale(1)}nav{display:flex;gap:28px;font-size:13px;text-transform:uppercase;letter-spacing:.12em}nav a{color:#bdbab4}nav a:hover{color:#fff}.cart-btn{border:1px solid #3a3a3a;background:#fff;color:#050505;border-radius:999px;padding:10px 16px;font-weight:700}.cart-btn span{margin-left:5px}
.hero{min-height:680px;padding:8vw 8vw 7vw;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:5vw;border-bottom:1px solid var(--line);background:radial-gradient(circle at 78% 45%,#171717 0,#070707 38%,#070707 100%)}
.eyebrow{font-size:11px;letter-spacing:.24em;font-weight:700;color:#aaa69f;margin:0 0 18px}.hero h1{font-size:clamp(58px,9vw,126px);line-height:.82;margin:0 0 28px;letter-spacing:-.075em}.hero h1 span{color:#77736c}.hero-copy>p:not(.eyebrow){max-width:590px;color:#aaa69f;line-height:1.7;font-size:15px}.hero-actions{display:flex;gap:12px;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #444;padding:13px 20px;border-radius:999px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.btn.primary{background:#f5f2eb;color:#080808;border-color:#f5f2eb}.btn.ghost{background:transparent}.hero-logo{display:flex;justify-content:center}.hero-logo img{width:min(100%,560px);filter:invert(1) grayscale(1);opacity:.96}
.section{padding:86px 7vw;border-bottom:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px}.section h2{font-size:clamp(32px,5vw,62px);letter-spacing:-.055em;margin:0}.muted{color:#8e8b85;font-size:13px;max-width:350px;line-height:1.6}
.collection-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;overflow:auto}.collection{min-width:150px;aspect-ratio:1/1.15;background:#111;border:1px solid #292929;border-radius:16px;padding:16px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;cursor:pointer}.collection:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#252525,#0d0d0d);opacity:.7}.collection:nth-child(2):before{background:linear-gradient(135deg,#333,#111)}.collection:nth-child(3):before{background:linear-gradient(135deg,#292929,#0c0c0c)}.collection:nth-child(4):before{background:linear-gradient(135deg,#242424,#111)}.collection:nth-child(5):before{background:linear-gradient(135deg,#303030,#0e0e0e)}.collection:nth-child(6):before{background:linear-gradient(135deg,#222,#0c0c0c)}.collection:nth-child(7):before{background:linear-gradient(135deg,#2d2d2d,#0c0c0c)}.collection>*{position:relative}.collection .icon{font-size:35px;margin-bottom:auto}.collection strong{font-size:15px}.collection small{color:#8f8f8f;margin-top:5px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.product{background:#101010;border:1px solid #252525;border-radius:18px;padding:12px;cursor:pointer;transition:.2s}.product:hover,.product.selected{border-color:#777;transform:translateY(-2px)}.product-art{height:310px;background:#171717;border-radius:13px;display:grid;place-items:center;overflow:hidden}.mini-shirt{width:145px;height:190px;background:#e9e7e0;clip-path:polygon(25% 0,39% 0,50% 7%,61% 0,75% 0,100% 19%,83% 37%,74% 28%,74% 100%,26% 100%,26% 28%,17% 37%,0 19%);position:relative}.mini-shirt:after{content:'FITTS';position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-5deg);font-weight:900;color:#111;font-size:18px}.product-info{display:flex;justify-content:space-between;padding:14px 5px 5px;font-size:13px}.product-info small{display:block;color:#888;margin-top:5px}
.designer-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.graphics-panel,.preview-panel{background:#0f0f0f;border:1px solid #252525;border-radius:20px;padding:22px}.selected-summary{border-bottom:1px solid #252525;padding-bottom:17px;margin-bottom:20px;color:#aaa;font-size:12px}.graphics-panel h3{margin:0 0 14px}.graphic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.graphic{min-height:110px;border:1px solid #292929;border-radius:14px;background:#151515;padding:14px;display:flex;align-items:end;cursor:pointer;position:relative;overflow:hidden}.graphic.selected{border-color:#eee}.graphic .mark{font-size:28px;font-weight:900;letter-spacing:-.08em}.graphic small{position:absolute;right:12px;top:12px;color:#777;text-transform:uppercase;font-size:8px;letter-spacing:.16em}.upload{margin-top:10px;border:1px dashed #4a4a4a;border-radius:14px;padding:18px;text-align:center;display:block;cursor:pointer;color:#ddd}.upload input{display:none}.upload small{display:block;color:#777;margin-top:5px}
.preview-stage{height:510px;background:radial-gradient(circle,#242424,#0b0b0b 65%);border-radius:16px;display:grid;place-items:center;overflow:hidden}.shirt{width:290px;height:360px;position:relative;filter:drop-shadow(0 22px 30px rgba(0,0,0,.5))}.shirt-body{position:absolute;inset:35px 38px 0;background:#e8e6df;clip-path:polygon(19% 0,34% 0,50% 8%,66% 0,81% 0,100% 17%,83% 30%,75% 23%,75% 100%,25% 100%,25% 23%,17% 30%,0 17%)}.shirt-sleeve{position:absolute;top:52px;width:100px;height:125px;background:#e8e6df}.shirt-sleeve.left{left:0;clip-path:polygon(35% 0,100% 23%,75% 100%,0 63%)}.shirt-sleeve.right{right:0;clip-path:polygon(0 23%,65% 0,100% 63%,25% 100%)}.collar{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:35px;background:#111;clip-path:ellipse(50% 45% at 50% 0%)}.print-area{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:155px;height:180px;border:1px dashed rgba(0,0,0,.13);display:grid;place-items:center}.print-area img{max-width:92%;max-height:92%;object-fit:contain;display:none}.print-area span{font-size:10px;letter-spacing:.18em;color:#8b8881}.preview-controls{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:18px}.preview-controls label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#999}.preview-controls input,.preview-controls select{width:100%;margin-top:8px}.preview-controls select{background:#171717;color:#eee;border:1px solid #333;padding:10px;border-radius:9px}.price-line{display:flex;justify-content:space-between;border-top:1px solid #292929;margin-top:20px;padding:18px 0}.price-line strong{font-size:24px}.full{width:100%}
.empty{border:1px dashed #333;border-radius:14px;padding:30px;text-align:center;color:#777}.bag-list{display:grid;gap:10px}.bag-item{display:flex;justify-content:space-between;align-items:center;background:#101010;border:1px solid #252525;padding:16px;border-radius:14px}.bag-item button{background:none;border:0;color:#aaa;cursor:pointer}.checkout{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:18px;border-top:1px solid #292929}.checkout strong{font-size:26px}
footer{padding:45px 7vw;display:flex;justify-content:space-between;align-items:center;color:#777;font-size:10px;letter-spacing:.2em}footer img{width:75px;filter:invert(1) grayscale(1)}
.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#f5f2eb;color:#080808;padding:12px 18px;border-radius:999px;font-weight:700;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){nav{display:none}.hero{grid-template-columns:1fr;min-height:auto}.hero-logo{order:-1}.collection-row{grid-template-columns:repeat(7,150px)}.product-grid{grid-template-columns:repeat(2,1fr)}.designer-grid{grid-template-columns:1fr}}
@media(max-width:520px){.section{padding:60px 5vw}.product-grid{grid-template-columns:1fr}.preview-stage{height:400px}.hero{padding:60px 5vw}.hero h1{font-size:62px}}
