:root {
  --cream:#faf7f2; --lilac:#c4a8e0; --lilac-mid:#9b7bca; --lilac-deep:#6b4fa0;
  --blush:#e8c4d4; --text:#2a1f35; --muted:#8a7a9a; --border:rgba(196,168,224,0.3);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--cream); color:var(--text); font-family:'Lato',sans-serif; font-weight:300; }
.hero { --hero-image-h:clamp(120px,24vw,220px); position:relative; overflow:hidden; background:linear-gradient(160deg,#f8f0ff 0%,#fff5fb 50%,#f0f0ff 100%); padding:calc(var(--hero-image-h) + 1rem) 2rem 1.6rem; text-align:center; }
.hero::before { content:''; position:absolute; top:0; left:0; right:0; height:var(--hero-image-h); background:url('../Hero_Photo.jpeg') center/cover no-repeat; opacity:.5; z-index:0; }
.hero > * { position:relative; z-index:1; }
.hero-logo-wrap { display:none; width:min(460px,84vw); margin:0 auto .6rem; padding:.55rem; }
.hero-logo { width:min(420px,78vw); height:auto; display:block; margin:0 auto; }
.hero-tag { font-size:.65rem; letter-spacing:.35em; text-transform:uppercase; color:var(--lilac-mid); margin-bottom:.75rem; }
.hero-brand { font-family:'Cookie',cursive; font-size:clamp(5.1rem,9vw,5rem); line-height:1; color:var(--lilac); margin:0 0 .35rem; }
.hero h1 { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,4.8vw,2.8rem); font-weight:400; line-height:1.15; margin-bottom:.45rem; }
.hero h1 em { font-style:italic; color:var(--lilac-deep); }
.hero .strapline { font-size:1.05rem; color:var(--muted); margin-bottom:0; letter-spacing:.04em; }
.order { max-width:680px; margin:0 auto; padding:2.5rem 1.5rem 5rem; }
.section-label { font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--lilac-mid); margin-bottom:1.8rem; display:flex; align-items:center; gap:.8rem; }
.section-label::after { content:''; flex:1; height:1px; background:var(--border); }
.card { background:white; border:1px solid var(--border); border-radius:16px; padding:2.2rem; box-shadow:0 6px 32px rgba(155,123,202,.07); }
.preview { background:transparent; border-radius:12px; margin-bottom:2rem; overflow:hidden; height:260px; position:relative; }
.preview canvas { display:block; width:100% !important; height:100% !important; }
.preview-hint { position:absolute; bottom:.6rem; right:.8rem; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(196,168,224,.35); pointer-events:none; }
.field { margin-bottom:1.2rem; }
.field-row { display:grid; grid-template-columns:2fr 1fr; gap:.8rem; }
label { display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
input[type=text], input[type=email] { width:100%; border:1.5px solid var(--border); border-radius:8px; padding:.75rem .9rem; font-family:'Lato',sans-serif; font-size:1rem; color:var(--text); background:#fdfbff; outline:none; transition:border-color .2s,box-shadow .2s; }
input:focus { border-color:var(--lilac-mid); box-shadow:0 0 0 3px rgba(155,123,202,.1); }
.size-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.size-radio { display:none; }
.size-radio + label { display:block; text-align:center; padding:.8rem .4rem; border:1.5px solid var(--border); border-radius:10px; cursor:pointer; transition:all .15s; background:white; text-transform:none; letter-spacing:0; }
.size-radio + label .sz { display:block; font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--text); font-weight:400; margin-bottom:.2rem; }
.size-radio + label .sz-mm { display:block; font-size:.72rem; color:var(--muted); margin-bottom:.3rem; }
.size-radio + label .sz-price { display:block; font-size:.9rem; font-weight:700; color:var(--lilac-deep); }
.size-radio:checked + label { border-color:var(--lilac-mid); background:#f8f0ff; box-shadow:0 0 0 3px rgba(155,123,202,.1); }
.font-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.font-radio { display:none; }
.font-radio + label { display:block; text-align:center; padding:.65rem .4rem; border:1.5px solid var(--border); border-radius:10px; cursor:pointer; transition:all .15s; background:white; text-transform:none; letter-spacing:0; font-size:.82rem; color:var(--muted); }
.font-radio:checked + label { border-color:var(--lilac-mid); background:#f8f0ff; box-shadow:0 0 0 3px rgba(155,123,202,.1); color:var(--text); }
.colour-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; }
.colour-radio { display:none; }
.colour-radio + label { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.5rem .2rem; border:1.5px solid var(--border); border-radius:8px; cursor:pointer; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:all .15s; background:white; }
.colour-radio:checked + label { border-color:var(--lilac-mid); background:#f8f0ff; }
.swatch { width:24px; height:24px; border-radius:50%; border:2px solid rgba(0,0,0,.07); }
.divider { border:none; border-top:1px solid var(--border); margin:1.4rem 0; }
.cart-box { border:1.5px solid var(--border); border-radius:10px; padding:.9rem; background:#fff; margin-bottom:1.2rem; }
.cart-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.55rem; }
.cart-title { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.cart-items { display:grid; gap:.45rem; margin-bottom:.6rem; }
.cart-empty { font-size:.78rem; color:var(--muted); }
.cart-item { display:flex; align-items:center; justify-content:space-between; gap:.6rem; border:1px solid var(--border); border-radius:8px; padding:.45rem .55rem; background:#fcfbff; }
.cart-item-main { min-width:0; }
.cart-item-name { font-size:.86rem; color:var(--text); line-height:1.25; }
.cart-item-meta { font-size:.7rem; color:var(--muted); margin-top:.12rem; }
.cart-remove { border:1px solid var(--border); background:#fff; color:var(--muted); border-radius:6px; padding:.3rem .55rem; font-size:.68rem; cursor:pointer; }
.cart-remove:hover { border-color:#d48c9f; color:#b85f75; }
.cart-add-btn { width:100%; padding:.75rem; border:1.5px dashed rgba(107,79,160,.45); border-radius:10px; background:#fff; color:var(--lilac-deep); font-family:'Lato',sans-serif; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.cart-add-btn:hover { background:#f8f0ff; border-color:var(--lilac-mid); }
.cart-add-btn:disabled { opacity:.55; cursor:not-allowed; }
.price-row { margin-bottom:1.2rem; text-align:right; }
.price-main { font-family:'Playfair Display',serif; font-size:2rem; color:var(--text); }
.price-main span { font-size:1rem; color:var(--muted); }
.price-note { font-size:.72rem; color:var(--muted); margin-top:.2rem; }
.discount-hint { font-size:.72rem; color:var(--muted); margin-top:.35rem; min-height:1.1em; }
.discount-hint.ok { color:#2f7b4e; }
.discount-hint.err { color:#a34343; }
.buy-btn { width:100%; padding:1.1rem; border:none; border-radius:10px; background:linear-gradient(135deg,var(--lilac-mid),var(--lilac-deep)); color:white; font-family:'Lato',sans-serif; font-size:.9rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; transition:all .2s; box-shadow:0 4px 20px rgba(107,79,160,.28); }
.buy-btn:hover { transform:translateY(-1px); box-shadow:0 6px 28px rgba(107,79,160,.38); }
.buy-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.secure-note { text-align:center; font-size:.7rem; color:var(--muted); margin-top:.8rem; }
.err { background:#fff5f5; border:1px solid #fca5a5; border-radius:8px; padding:.8rem 1rem; font-size:.82rem; color:#991b1b; margin-top:1rem; display:none; }
.how { background:white; padding:3.5rem 2rem; border-top:1px solid var(--border); }
.how-inner { max-width:720px; margin:0 auto; }
.how h2 { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:400; text-align:center; margin-bottom:2.5rem; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.step { text-align:center; }
.step-n { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--lilac),var(--blush)); color:white; font-family:'Playfair Display',serif; font-size:1rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.step h3 { font-size:.85rem; font-weight:400; margin-bottom:.4rem; }
.step p { font-size:.8rem; color:var(--muted); line-height:1.6; }
@media(max-width:560px) {
  .steps { grid-template-columns:1fr; }
  .colour-grid { grid-template-columns:repeat(4,1fr); }
  .card { padding:1.5rem; text-align:center; }
  .field-row { grid-template-columns:1fr; }
  .field, .field-row > div, label { text-align:center; }
  input[type=text], input[type=email] { text-align:center; }
  .price-row { text-align:center; }
  .cart-head { justify-content:center; }
  .cart-item { flex-direction:column; align-items:center; text-align:center; }
  .cart-item-main { text-align:center; }
}