* { box-sizing: border-box; }
:root {
  --pink: #c94f7c;
  --pink-dark: #96365e;
  --pink-soft: #f9dce8;
  --cream: #fffafa;
  --ink: #33262d;
  --muted: #77626c;
  --line: #f0d9e3;
  --shadow: 0 18px 45px rgba(93, 45, 65, .09);
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, #fff0f7 0, rgba(255,240,247,0) 310px),
    radial-gradient(circle at top right, #eef7ff 0, rgba(238,247,255,0) 330px),
    var(--cream);
}
a { color: inherit; }
.announcement {
  background: #fff0f6;
  color: var(--pink-dark);
  font-weight: 900;
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.site-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  font-size: 23px;
  color: var(--pink);
  text-decoration: none;
  letter-spacing: -0.5px;
}
.brand-mark {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: white;
  background: linear-gradient(135deg, #c94f7c, #ee9bbb);
  box-shadow: 0 8px 18px rgba(201,79,124,.25);
  font-size: 14px;
}
nav { display: flex; gap: 22px; align-items: center; }
nav a { text-decoration: none; font-weight: 800; font-size: 14px; color: #594651; }
.cart-link {
  background: #fff3f8;
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 999px;
}
.eyebrow {
  color: var(--pink);
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: .12em;
  font-size: 12px;
  margin: 0 0 10px;
}
h1 { font-size: clamp(34px, 5vw, 64px); line-height: 1.02; margin: 0 0 18px; letter-spacing: -2px; }
h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -1px; }
p { line-height: 1.65; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c94f7c, #e889ac);
  color: #fff;
  font-weight: 950;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow: 0 12px 25px rgba(201,79,124,.2);
}
.btn-soft { background: #fff; color: var(--pink-dark); border: 1px solid var(--line); box-shadow: none; }
.btn.full { width: 100%; border-radius: 16px; font-size: 16px; }
.home-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: 76px 28px 58px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 50px;
  align-items: center;
}
.hero-copy { font-size: 20px; color: var(--muted); max-width: 680px; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.trust-row span, .mini-promises span {
  background: white;
  border: 1px solid var(--line);
  padding: 10px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  color: var(--pink-dark);
}
.hero-collage {
  position: relative;
  min-height: 560px;
}
.mini-card {
  position: absolute;
  width: 250px;
  min-height: 310px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.mini-card b { font-size: 30px; line-height: 1; color: var(--pink); letter-spacing: -1px; }
.mini-card span { font-size: 44px; }
.mini-card small { color: var(--muted); font-weight: 800; }
.mini-card:after {
  content: "";
  display: block;
  height: 5px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
}
.c1 { left: 40px; top: 20px; transform: rotate(-6deg); background:#fff7fb; }
.c2 { right: 40px; top: 62px; transform: rotate(5deg); background:#f7fbff; }
.c3 { left: 15px; bottom: 18px; transform: rotate(4deg); background:#fffaf0; }
.c4 { right: 70px; bottom: 0; transform: rotate(-4deg); background:#f5fff8; }
.section, .page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 28px;
}
.section-head { max-width: 750px; margin-bottom: 22px; }
.occasion-grid, .steps-grid, .product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.occasion-card, .product-card, .steps-grid div {
  background: white;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 24px;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.occasion-card span { font-size: 34px; display:block; margin-bottom: 14px; }
.occasion-card strong, .steps-grid strong { display:block; font-size: 20px; margin-bottom: 8px; }
.occasion-card small, .steps-grid p, .product-card p { color: var(--muted); line-height: 1.55; }
.feature-band {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 30px;
  align-items: center;
  background: linear-gradient(135deg, #fff, #fff1f7);
  border: 1px solid var(--line);
  border-radius: 34px;
  box-shadow: var(--shadow);
}
.editor-preview-box {
  background: white;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 18px;
}
.fake-toolbar {
  display:flex;
  gap:8px;
  padding-bottom:14px;
}
.fake-toolbar span {
  width:12px;height:12px;border-radius:99px;background:#f2c9d9;
}
.fake-editor-card {
  min-height: 340px;
  border-radius: 22px;
  background:#fff7fb;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  color:var(--pink);
}
.fake-editor-card small { font-weight:950; letter-spacing:.12em; }
.fake-editor-card b { font-size:42px; line-height:1; }
.fake-editor-card em { font-style:normal; font-size:52px; }
.fake-editor-card i { width:60%; height:5px; background:white; border-radius:20px; box-shadow:0 2px 5px rgba(0,0,0,.18); }
.steps-grid b {
  display: inline-flex;
  width: 34px;
  height: 34px;
  background: var(--pink);
  color:white;
  border-radius: 99px;
  align-items:center;
  justify-content:center;
  margin-bottom: 16px;
}
.footer {
  text-align:center;
  padding: 46px 20px;
  color: var(--muted);
}
.product-img-placeholder {
  height: 180px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff0f6, #eef6ff);
  display:flex;align-items:center;justify-content:center;
  font-weight:950;color:var(--pink);
}
.product-card { display:block; }
.product-card h3 { margin: 16px 0 8px; }
.product-shell {
  max-width: 1260px;
  margin: 0 auto;
  padding: 28px;
}
.product-breadcrumbs {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 20px;
}
.real-product-layout {
  display:grid;
  grid-template-columns: minmax(360px, .95fr) minmax(380px, 1.05fr);
  gap: 30px;
  align-items:start;
}
.preview-sticky {
  position: sticky;
  top: 112px;
}
.preview-frame, .real-options-panel, .cart-summary, .admin-card, .cart-item-real, .admin-item-real {
  background:white;
  border:1px solid var(--line);
  border-radius:30px;
  padding:22px;
  box-shadow:var(--shadow);
}
.preview-label-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.preview-label-row span { font-weight:950; color:var(--pink-dark); }
.preview-label-row small { color:var(--muted); }
.mini-promises { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.product-subtitle { font-size:18px; color:var(--muted); }
.price-box {
  background:#fff7fb;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  margin:22px 0;
}
.price-box strong { display:block; font-size:24px; color:var(--pink-dark); }
.price-box span { color:var(--muted); font-weight:700; }
.designer-step {
  border-top:1px solid var(--line);
  padding:22px 0;
}
.step-title {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
  font-weight:950;
  font-size:18px;
}
.step-title b {
  width:30px;height:30px;border-radius:99px;background:var(--pink);color:white;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.design-template-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.design-template, .charm-choice, .colour-choice {
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  cursor:pointer;
  background:white;
}
.design-template.active, .charm-choice.active, .colour-choice.active {
  border-color: var(--pink);
  background:#fff3f8;
  box-shadow:0 0 0 3px rgba(201,79,124,.08);
}
.design-template input, .charm-choice input, .colour-choice input { position:absolute; opacity:0; pointer-events:none; }
.template-thumb {
  display:flex;
  height:70px;
  border-radius:14px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#fff7fb,#f2f8ff);
  font-size:34px;
  margin-bottom:10px;
}
.design-template strong { font-size:13px; }
.field-label {
  display:block;
  font-weight:950;
  margin-top:14px;
}
input[type="text"], input[type="date"], input[type="color"], select, textarea {
  width:100%;
  margin-top:8px;
  border:1px solid #e8ccd7;
  border-radius:14px;
  padding:13px 14px;
  font:inherit;
  background:#fff;
}
textarea { min-height:96px; resize:vertical; }
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.colour-grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.colour-choice {
  display:flex;
  align-items:center;
  gap:8px;
}
.colour-choice span {
  width:26px;height:26px;border-radius:99px;border:1px solid rgba(0,0,0,.18);
  flex:0 0 auto;
}
.colour-choice small { overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:800; }
.charm-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.charm-choice {
  min-height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:4px;
}
.charm-choice span {
  font-size:30px;
  color:#b98800;
}
.charm-choice strong { font-size:13px; }
.charm-choice small { color:var(--muted); }
.lower-fields { margin-top: 16px; }
.checkbox-line {
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:850;
  margin:18px 0 0;
}
.designer-submit { margin-top: 8px; }
.fine-print { font-size:13px; color:var(--muted); margin-bottom:0; text-align:center; }
.product-details-real {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.product-details-real > div {
  background:white;
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
}
.wf-card-preview {
  --card-bg: #fff7fb;
  --card-text: #d85c84;
  --string-colour: #ffffff;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1.22;
  margin: 0 auto;
  border-radius: 28px;
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid rgba(93,45,65,.16);
  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,.34),
    0 20px 45px rgba(80,35,55,.10);
  position: relative;
  overflow: hidden;
}
.wf-card-preview.tiny {
  width: 130px;
  border-radius: 16px;
  box-shadow: none;
}
.wf-card-preview.admin {
  width: 280px;
  border-radius: 22px;
}
.wf-card-inner {
  position:absolute;
  inset:0;
  padding: 9% 7%;
  text-align:center;
}
.wf-card-top {
  font-weight:950;
  letter-spacing:.09em;
  font-size: clamp(13px, 2.5vw, 27px);
  text-transform: uppercase;
}
.wf-card-main {
  margin-top:3%;
  font-weight:950;
  line-height:.95;
  letter-spacing:-.04em;
  font-size: clamp(35px, 6.4vw, 74px);
  word-break: break-word;
}
.wf-art {
  margin-top:7%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4%;
}
.wf-art span {
  font-size: clamp(34px, 6vw, 74px);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.08));
}
.wf-string-hole {
  position:absolute;
  bottom:31%;
  width:18px;
  height:18px;
  border-radius:99px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.14);
}
.wf-string-hole.left { left:18%; }
.wf-string-hole.right { right:18%; }
.wf-string {
  position:absolute;
  left:18%;
  right:18%;
  bottom:32%;
  height:7px;
  border-radius:20px;
  background: var(--string-colour);
  box-shadow:0 3px 7px rgba(0,0,0,.22);
}
.wf-charm {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:25.5%;
  width:54px;
  height:54px;
  border-radius:99px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:35px;
  font-weight:950;
  box-shadow:0 7px 13px rgba(0,0,0,.18);
}
.wf-charm.gold { background:linear-gradient(135deg,#ffd86a,#c79012); color:#7b4e00; }
.wf-charm.silver { background:linear-gradient(135deg,#ffffff,#bfc5cf); color:#5a6470; }
.wf-charm.coloured { background:linear-gradient(135deg,#f7a6c6,#7bc9ff,#ffe27a); color:white; }
.wf-card-bottom {
  position:absolute;
  left:8%;
  right:8%;
  bottom:7%;
  color:#57454e;
  font-size: clamp(12px, 2vw, 18px);
  line-height:1.38;
  font-weight:700;
}
.wf-card-preview.tiny .wf-card-inner { padding: 10% 7%; }
.wf-card-preview.tiny .wf-card-top { font-size: 5px; }
.wf-card-preview.tiny .wf-card-main { font-size: 15px; }
.wf-card-preview.tiny .wf-art span { font-size: 16px; }
.wf-card-preview.tiny .wf-string { height: 3px; bottom:32%; }
.wf-card-preview.tiny .wf-string-hole { width:5px;height:5px; bottom:31%; }
.wf-card-preview.tiny .wf-charm { width:16px;height:16px;font-size:11px; bottom:25.5%; }
.wf-card-preview.tiny .wf-card-bottom { font-size:5px; }
.wf-card-preview.admin .wf-card-top { font-size: 12px; }
.wf-card-preview.admin .wf-card-main { font-size: 32px; }
.wf-card-preview.admin .wf-art span { font-size: 30px; }
.wf-card-preview.admin .wf-charm { width: 30px; height: 30px; font-size: 20px; }
.page.narrow { max-width: 850px; }
.cart-layout {
  display:grid;
  grid-template-columns: 1fr 330px;
  gap:22px;
  align-items:start;
}
.cart-item-real {
  display:grid;
  grid-template-columns: 150px 1fr auto;
  gap:18px;
  align-items:center;
  margin-bottom:16px;
}
.cart-info h3 { margin:0 0 8px; }
.cart-info p { margin:4px 0; color:var(--muted); }
.cart-price { font-size:22px; font-weight:950; color:var(--pink-dark); }
.cart-summary {
  position:sticky;
  top:112px;
}
.cart-summary p {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
}
.cart-summary .grand {
  font-size:22px;
  border-bottom:0;
}
.cart-summary small {
  display:block;
  margin-top:12px;
  color:var(--muted);
  text-align:center;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.admin-table th, .admin-table td {
  padding: 13px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.admin-summary-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.admin-item-real {
  display:grid;
  grid-template-columns: 310px 1fr;
  gap:22px;
  margin-bottom:18px;
}
pre {
  background:#fff7fb;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  white-space:pre-wrap;
  overflow:auto;
}
@media (max-width: 960px) {
  .site-header { padding: 14px 18px; align-items:flex-start; flex-direction:column; gap:12px; }
  nav { gap:10px; overflow:auto; width:100%; padding-bottom:2px; }
  nav a { white-space:nowrap; }
  .home-hero, .feature-band, .real-product-layout, .product-details-real, .cart-layout, .admin-summary-grid, .admin-item-real {
    grid-template-columns:1fr;
  }
  .hero-collage { min-height: 470px; }
  .mini-card { width: 210px; min-height: 250px; }
  .c1 { left:0; }
  .c2 { right:0; }
  .c3 { left:0; bottom:20px; }
  .c4 { right:0; bottom:0; }
  .occasion-grid, .steps-grid, .product-grid { grid-template-columns:1fr; }
  .preview-sticky, .cart-summary { position:static; }
  .design-template-grid, .charm-grid { grid-template-columns:1fr; }
  .colour-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .two-col { grid-template-columns:1fr; }
  .cart-item-real { grid-template-columns: 120px 1fr; }
  .cart-price { grid-column: 2; }
}
@media (max-width: 520px) {
  .product-shell, .section, .page, .home-hero { padding-left:16px; padding-right:16px; }
  .cart-item-real { grid-template-columns:1fr; }
  .cart-preview-mini { max-width:160px; }
  .hero-collage { min-height:auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .mini-card { position:static; transform:none; width:auto; min-height:190px; padding:18px 12px; }
  .mini-card b { font-size:20px; }
}