:root { --radius:4px; }
:root { --bg:#fff8fb; --fg:#2b2330; --muted:#7a6f82; --card:#ffffff; --accent:#d6457f; --line:#f0dce6; }
[data-theme="dark"] { --bg:#17121c; --fg:#f2e9f5; --muted:#a898b3; --card:#221a29; --accent:#f06aa0; --line:#33283c; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
a { color: inherit; }
.top { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; padding:.8rem 1.2rem; border-bottom:1px solid var(--line); }
.brand { font-weight:700; text-decoration:none; font-size:1.2rem; }
nav { display:flex; flex-wrap:wrap; gap:1rem; flex:1; }
nav a { text-decoration:none; color:var(--muted); }
nav a:hover { color:var(--accent); }
.tools { display:flex; gap:.5rem; }
select, button { font:inherit; }
select { background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:var(--radius); padding:.3rem .5rem; }
#theme-toggle { background:none; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; }
main { max-width:1000px; margin:0 auto; padding:1.5rem 1.2rem; }
footer { text-align:center; color:var(--muted); padding:2rem 1rem; }
.hero { text-align:center; padding:2.5rem 0; }
.hero h1 { font-size:2.2rem; margin:.2rem 0; }
.muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; }
.card h3 { margin:.6rem 0 .2rem; }
.swatch { height:150px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:3rem; }
.swatch.tall { height:320px; }
.row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.5rem 0; }
.btn { background:var(--accent); color:#fff; border:0; border-radius:var(--radius); padding:.5rem .9rem; cursor:pointer; text-decoration:none; display:inline-block; }
.btn.ghost { background:none; color:var(--fg); border:1px solid var(--line); }
.btn.big { padding:.8rem 1.6rem; font-size:1.1rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.tryon { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.tryon figure { margin:0; text-align:center; }
.list { list-style:none; padding:0; }
.list li { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--line); }
@media (max-width:600px) { .tryon { grid-template-columns:1fr; } }

.photo { height:300px; border-radius:var(--radius); background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.photo img { max-width:100%; max-height:100%; object-fit:contain; }
.photo.tall { height:420px; }
.price { font-size:1.2rem; font-weight:600; color:var(--accent); margin:.4rem 0 0; }
.addform { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; margin-top:.6rem; }
.addform label { display:flex; flex-direction:column; font-size:.8rem; color:var(--muted); gap:.15rem; }
input[type=number] { width:4.2rem; background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:var(--radius); padding:.3rem .4rem; font:inherit; }
table.cart { width:100%; border-collapse:collapse; margin-bottom:1rem; }
table.cart th, table.cart td { text-align:left; padding:.55rem .4rem; border-bottom:1px solid var(--line); }
fieldset.ship { border:1px solid var(--line); border-radius:var(--radius); margin:1rem 0; display:flex; flex-direction:column; gap:.4rem; }
.totals { margin-top:1.2rem; text-align:right; }
.totals p { margin:.2rem 0; }
.totals .grand { font-size:1.4rem; font-weight:700; }
.consent { display:flex; gap:.5rem; align-items:flex-start; font-size:.85rem; color:var(--muted); margin:.8rem 0; }