/* Wonderful T-Shirts — store */
:root { --plum:#2e2142; --deep:#241834; --copper:#d97742; --copper-dark:#b85c2c; --cream:#f0c9a8; --bg:#f7f5f2; --ink:#2a2433; --soft:#5d5468; --line:#e8e3ee; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:#fff; line-height:1.6; }
.btn { display:inline-block; font-weight:700; text-decoration:none; padding:12px 24px; border-radius:8px; font-size:.97rem; border:none; cursor:pointer; transition:transform .12s ease, background .12s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-accent { background:var(--copper); color:var(--deep); } .btn-accent:hover { background:#e68a58; }
.btn-ghost { background:transparent; color:var(--plum); border:2px solid #d3cbdc; } .btn-ghost:hover { border-color:var(--plum); }
.btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.5); } .btn-outline:hover { border-color:var(--copper); color:var(--copper); }
.top { background:var(--deep); border-bottom:4px solid var(--copper); position:sticky; top:0; z-index:40; }
.top-wrap { max-width:1180px; margin:0 auto; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.wordmark { color:#fff; font-weight:900; letter-spacing:2px; font-size:1.02rem; text-decoration:none; display:flex; align-items:center; gap:10px; }
.wordmark span { color:var(--copper); } .wordmark svg { width:36px; height:36px; }
.top nav { display:flex; gap:4px; flex-wrap:wrap; }
.top nav a { color:#cdc5da; text-decoration:none; font-weight:600; font-size:.93rem; padding:8px 12px; border-radius:6px; }
.top nav a:hover { color:#fff; background:rgba(255,255,255,.08); }
.top nav a.cta { background:var(--copper); color:var(--deep); }
.hero { background:radial-gradient(circle at 75% 20%, #3b2d58 0%, var(--deep) 60%); color:#fff; text-align:center; padding:72px 20px; }
.hero h1 { font-size:clamp(1.8rem,4.6vw,2.9rem); font-weight:900; max-width:820px; margin:0 auto 14px; line-height:1.15; }
.hero p { color:#cdc5da; max-width:640px; margin:0 auto 28px; font-size:clamp(1rem,2.3vw,1.2rem); }
.hero .tag { color:#9a8fae; letter-spacing:3px; text-transform:uppercase; font-size:.82rem; margin-top:24px; }
.btn-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.section { padding:60px 20px; } .alt { background:var(--bg); }
.wrap { max-width:1180px; margin:0 auto; }
h2.title { font-size:clamp(1.5rem,3.3vw,2rem); font-weight:800; color:var(--plum); text-align:center; }
.rule { width:72px; height:4px; background:var(--copper); border-radius:2px; margin:14px auto 34px; }
.sub { text-align:center; color:var(--soft); max-width:640px; margin:-18px auto 34px; }
.grid4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 22px; box-shadow:0 2px 10px rgba(46,33,66,.05); }
.card h3 { color:var(--plum); font-size:1.08rem; margin-bottom:8px; }
.card p { color:var(--soft); font-size:.94rem; }
.card .ico { width:46px; height:46px; border-radius:10px; background:var(--plum); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.card .ico svg { width:24px; height:24px; stroke:var(--copper); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
.step { text-align:center; }
.step .num { width:50px; height:50px; border-radius:50%; background:var(--copper); color:var(--deep); font-weight:900; font-size:1.2rem; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.step h3 { color:var(--plum); font-size:1.02rem; margin-bottom:6px; } .step p { color:var(--soft); font-size:.92rem; }
/* products */
.filters { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.chip { padding:9px 18px; border-radius:999px; border:1px solid #d3cbdc; background:#fff; color:var(--soft); font-weight:600; cursor:pointer; font-size:.9rem; }
.chip.active { background:var(--plum); color:#fff; border-color:var(--plum); }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
.pcard { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 2px 10px rgba(46,33,66,.05); transition:box-shadow .15s; }
.pcard:hover { box-shadow:0 8px 22px rgba(46,33,66,.12); }
.pimg { background:linear-gradient(160deg,#efe9f0,#e5dde7); padding:26px; display:flex; justify-content:center; }
.pimg svg { width:150px; height:168px; fill:var(--plum); stroke:var(--copper); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.pbody { padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.prow { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.prow h3 { color:var(--plum); font-size:1.08rem; }
.price { color:var(--copper-dark); font-weight:800; white-space:nowrap; font-size:.95rem; }
.pbody p { color:var(--soft); font-size:.9rem; flex:1; }
.pmeta { display:flex; justify-content:space-between; font-size:.78rem; color:var(--soft); letter-spacing:.3px; text-transform:uppercase; }
.pactions { display:flex; gap:8px; margin-top:4px; }
.pactions .btn { flex:1; text-align:center; padding:10px 12px; font-size:.88rem; }
/* quote */
.quote { max-width:760px; margin:0 auto; }
.qform { background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:0 2px 12px rgba(46,33,66,.06); }
.qgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
@media (max-width:640px) { .qgrid { grid-template-columns:1fr; } }
.qform input, .qform select, .qform textarea { width:100%; padding:12px; border:1px solid #d3cbdc; border-radius:8px; font:inherit; }
.qform textarea { margin-bottom:14px; }
.qnote { font-size:.82rem; color:var(--soft); margin-top:12px; }
.band { background:var(--plum); color:#fff; text-align:center; padding:54px 20px; }
.band h2 { font-size:clamp(1.4rem,3vw,1.9rem); font-weight:800; margin-bottom:10px; }
.band p { color:#cdc5da; margin-bottom:24px; }
footer { background:var(--deep); color:#9a8fae; padding:36px 20px 24px; font-size:.84rem; }
.fwrap { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
@media (max-width:760px) { .fwrap { grid-template-columns:1fr; } }
footer h4 { color:#fff; font-size:.82rem; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
footer a { color:#cdc5da; text-decoration:none; } footer a:hover { color:var(--copper); }
footer ul { list-style:none; } footer li { margin-bottom:6px; }
.fdisc { max-width:1180px; margin:26px auto 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); font-size:.76rem; line-height:1.6; }
.fdisc a { color:var(--copper); }

/* Touch devices: links and buttons are tapped, never dragged or long-press previewed (stops iPad opening new tabs by accident) */
a, button, .btn, .swatch, .tab, .chk { -webkit-user-drag: none; -webkit-touch-callout: none; touch-action: manipulation; }
nav a, .top nav a { user-select: none; -webkit-user-select: none; }