/* LUNORA — one responsive stylesheet, with readable type and flow-based text. */
:root {
  --cream:#faf8f3;
  --paper:#fffefa;
  --ink:#35352f;
  --muted:#706e64;
  --line:#ded8ce;
  --lilac:#ece6f1;
  --gold:#9b7c50;
  --olive:#4d5849;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

*,*::before,*::after {
  box-sizing:border-box;
  min-width:0;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:32px;
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:18px/1.75 var(--sans);
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input,select,textarea {
  color:inherit;
  font:inherit;
}

button,input,select,textarea,a,summary {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
  border:0;
}

button:disabled {
  opacity:.62;
  cursor:wait;
}

img,svg {
  display:block;
  max-width:100%;
}

img {
  height:auto;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  overflow-wrap:normal;
  word-break:normal;
}

h1,h2 {
  font-family:var(--serif);
  font-weight:400;
}

h2 {
  font-size:clamp(36px,3.3vw,48px);
  line-height:1.22;
  letter-spacing:-.8px;
}

p {
  text-wrap:pretty;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #8a719f;
  outline-offset:4px;
}

::selection {
  background:#e6dcef;
}

[hidden] {
  display:none!important;
}

.section-wrap {
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:64px;
}

.section-space {
  padding-block:112px;
}

.eyebrow {
  color:var(--gold);
  font:500 12px/1.7 var(--sans);
  letter-spacing:2.2px;
  text-wrap:balance;
}

.serif-italic {
  color:#927e66;
  font-style:italic;
}

.gold-text {
  color:#9c805d;
  font-style:italic;
}

.text-link {
  display:inline-block;
  max-width:100%;
  padding-block:5px;
  border-bottom:1px solid #bcae9c;
  font-size:17px;
  line-height:1.6;
  white-space:normal;
}

.text-link span {
  margin-left:8px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:58px;
  max-width:100%;
  padding:15px 24px;
  border:1px solid transparent;
  border-radius:5px;
  font:500 17px/1.5 var(--sans);
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  transition:background .18s,border-color .18s,box-shadow .18s;
}

.button>span {
  flex:0 0 auto;
  font-size:21px;
  line-height:1;
}

.primary {
  background:var(--olive);
  color:#fff;
}

.primary:hover {
  background:#3d483a;
  box-shadow:0 5px 20px #343c3615;
}

.outline {
  border-color:#b4a28a;
  color:#796448;
  background:transparent;
}

.outline:hover {
  background:#eee6db;
}

.full {
  width:100%;
  justify-content:space-between;
}

.subtle-button {
  display:block;
  margin:20px auto 0;
  padding:8px;
  color:#796f77;
  background:none;
  font-size:16px;
  text-decoration:underline;
  text-underline-offset:5px;
}

/* Header */
.announcement {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px 24px;
  padding:12px 24px;
  background:#eae5de;
  color:#625e56;
  text-align:center;
  font-size:12px;
  line-height:1.6;
  letter-spacing:1.8px;
}

.announcement span {
  letter-spacing:.5px;
}

.site-header {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px 30px;
  width:100%;
  max-width:1536px;
  margin-inline:auto;
  padding:28px 64px;
  border-bottom:1px solid var(--line);
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  max-width:100%;
  font:30px/1.15 var(--serif);
  letter-spacing:3px;
}

.brand-mark {
  flex:0 0 auto;
  display:inline-block;
  color:var(--gold);
  font-size:48px;
  line-height:1;
  transform:rotate(-16deg);
}

.brand small {
  display:block;
  margin-top:9px;
  color:#817568;
  font:12px/1.5 var(--sans);
  letter-spacing:1.4px;
}

.site-header nav {
  display:flex;
  flex:1 1 480px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px 24px;
  font-size:16px;
  line-height:1.5;
}

.site-header nav a {
  padding-block:6px;
}

.site-header nav a:hover {
  color:var(--gold);
}

.header-cta {
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid #b5a184;
  font-size:16px;
  line-height:1.5;
}

.header-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}

.cart-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:100%;
  min-height:44px;
  padding:8px 14px;
  border:1px solid #cfc5b5;
  border-radius:30px;
  background:#fffaf3;
  font-size:16px;
  line-height:1.4;
}

.cart-link:hover {
  background:#eee6da;
}

#cart-count, .cart-badge {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  min-width:25px;
  min-height:25px;
  padding:2px 6px;
  border-radius:50%;
  background:var(--olive);
  color:#fff;
  font-size:14px;
  line-height:1.4;
}

/* Hero image, caption and note each have their own space in normal flow. */
.hero {
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;
  gap:64px;
  padding-top:64px;
  padding-bottom:72px;
}

.hero-copy {
  padding-block:20px;
}

.little-star {
  display:inline-block;
  margin-right:8px;
  color:var(--gold);
  font-size:24px;
  vertical-align:middle;
}

.hero h1 {
  margin:25px 0 26px;
  font-size:clamp(56px,5.2vw,78px);
  line-height:1.1;
  letter-spacing:-2px;
}

.hero-description {
  color:#706e64;
  font-size:18px;
  line-height:1.85;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px 28px;
  margin-top:34px;
}

.hero-actions .text-link {
  font-size:17px;
}

.hero-notes {
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  margin-top:34px;
  color:#766f62;
  font-size:14px;
  line-height:1.6;
}

.hero-art {
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}

.orbit,.art-star {
  display:none;
}

.hero-image-frame {
  width:100%;
}

.hero-image-frame>img {
  width:100%;
  aspect-ratio:1.05;
  object-fit:cover;
  object-position:58% center;
  border-radius:48% 48% 5px 5px;
  background:#e8dfd4;
}

.image-caption {
  display:grid;
  gap:8px;
  padding:23px 26px;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 5px 5px;
  color:#665748;
  background:#f1ebe2;
}

.image-caption span {
  font-size:12px;
  line-height:1.65;
  letter-spacing:1.6px;
}

.image-caption b {
  font:400 27px/1.35 var(--serif);
}

.floating-note {
  display:flex;
  align-items:center;
  gap:16px;
  padding:17px 24px;
  border:1px solid #e3dacc;
  border-radius:5px;
  background:#fffdf8;
  box-shadow:0 7px 25px #65534206;
}

.floating-note>span {
  flex:0 0 auto;
  color:#a38c68;
  font-size:38px;
  line-height:1;
}

.floating-note div {
  font:21px/1.45 var(--serif);
}

.floating-note small {
  display:block;
  margin-top:7px;
  color:#857b6e;
  font:12px/1.6 var(--sans);
  letter-spacing:1px;
}

.manifesto-strip {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px 26px;
  padding:23px 30px;
  border-block:1px solid var(--line);
  color:#7b7568;
  font-size:12px;
  line-height:1.7;
  letter-spacing:1px;
  text-align:center;
}

.manifesto-strip i {
  color:#b09b79;
  font-style:normal;
}

/* Birthday discovery */
.discover {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:80px;
}

.section-intro h2 {
  margin:22px 0;
}

.section-intro>p:not(.eyebrow):not(.quiet-note) {
  color:var(--muted);
  font-size:18px;
  line-height:1.85;
}

.discovery-seal {
  display:flex;
  align-items:center;
  gap:22px;
  padding-block:34px;
  color:#9c8764;
}

.discovery-seal>span {
  font-size:65px;
  line-height:1;
}

.discovery-seal small {
  font:14px/1.8 var(--serif);
  letter-spacing:2px;
}

.quiet-note {
  color:#7c7369;
  font-size:14px;
  line-height:1.85;
}

.birthday-card {
  padding:36px;
  border:1px solid #e1d9ce;
  border-radius:12px;
  background:var(--paper);
  box-shadow:0 16px 60px #76654307;
}

.card-heading {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:30px;
}

.card-heading>span {
  flex:0 0 auto;
  color:#a78c66;
  font-size:37px;
  line-height:1;
}

.card-heading p {
  font:29px/1.25 var(--serif);
}

.card-heading small {
  display:block;
  margin-top:10px;
  color:#8b7a65;
  font:12px/1.6 var(--sans);
  letter-spacing:1.3px;
}

.field-label {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px 16px;
  margin-bottom:11px;
  font-size:17px;
}

.field-label span {
  color:#83796b;
  font-size:14px;
}

input[type=date],input[type=text],input[type=email],input[type=tel],input:not([type]),select,textarea {
  display:block;
  width:100%;
  max-width:100%;
  min-height:56px;
  padding:13px 15px;
  border:1px solid #d8cfc1;
  border-radius:5px;
  background:#fffefa;
  font:17px/1.5 var(--sans);
}

input[type=date] {
  color:#625b50;
  color-scheme:light;
}

input::placeholder,textarea::placeholder {
  color:#91877a;
  opacity:1;
}

select {
  overflow:hidden;
  text-overflow:ellipsis;
}

.input-note {
  margin:12px 0 28px;
  color:#827668;
  font-size:14px;
  line-height:1.75;
}

fieldset {
  min-inline-size:0;
  padding:0;
  margin:0;
  border:0;
}

legend {
  width:100%;
  max-width:100%;
  margin-bottom:15px;
  padding:0;
  font-size:17px;
  line-height:1.6;
}

.intention-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}

.intention-options label,.segmented label,.stone-radio {
  position:relative;
  cursor:pointer;
}

.intention-options input,.segmented input,.stone-radio input {
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
}

.intention-options label>span {
  display:grid;
  place-items:center;
  min-height:55px;
  height:100%;
  padding:11px 9px;
  border:1px solid #e0d8cc;
  border-radius:5px;
  background:#fffefa;
  color:#776b61;
  font-size:16px;
  text-align:center;
  line-height:1.5;
}

.intention-options input:checked+span {
  border-color:#ae99bf;
  background:#f0eaf5;
  color:#6e527d;
}

.intention-options input:focus-visible+span,.segmented input:focus-visible+span,.stone-radio input:focus-visible+span {
  outline:3px solid #8a719f;
  outline-offset:3px;
}

.form-error {
  margin:14px 0;
  color:#9f4947;
  font-size:15px;
  line-height:1.7;
}

.form-error:empty {
  margin:0;
}

.birthday-card .button {
  margin-top:26px;
}

.result-top {
  display:flex;
  align-items:center;
  gap:18px;
}

.result-top>span {
  display:grid;
  place-items:center;
  flex:0 0 62px;
  width:62px;
  height:62px;
  border-radius:50%;
  background:var(--lilac);
  color:#8a6c9e;
  font-size:32px;
}

.result-top h3 {
  margin-top:7px;
  font:29px/1.3 var(--serif);
}

.match-result>p {
  margin-top:23px;
  color:#786c62;
  font-size:17px;
  line-height:1.85;
}

.match-stones {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}

.match-stones>div {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:16px;
  border-radius:6px;
  background:#f4eff7;
}

.match-stones b {
  display:block;
  font-size:16px;
  line-height:1.5;
  font-weight:500;
}

.match-stones small {
  display:block;
  margin-top:5px;
  color:#87718e;
  font-size:12px;
  line-height:1.5;
  letter-spacing:1px;
}

.stone-ball {
  flex:0 0 auto;
  display:inline-block;
  width:38px;
  height:38px;
  border-radius:50%;
  background:radial-gradient(circle at 28% 22%,#ffffffc4,#ffffff05 40%,#00000018 90%),var(--stone,#b9a5cb);
  box-shadow:inset -3px -3px 7px #0000001c,inset 2px 2px 5px #ffffff80,0 3px 7px #29203712;
}

/* The atelier */
.atelier {
  border-block:1px solid #e2dae2;
  background:#f0ecef;
}

.section-title-row {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px 48px;
  margin-bottom:48px;
}

.section-title-row h2 {
  margin-top:20px;
}

.section-title-row>p {
  max-width:390px;
  color:#796d78;
  font-size:17px;
  line-height:1.85;
}

.section-title-row>.text-link {
  max-width:360px;
  font-size:16px;
}

.design-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:56px;
}

.preview-panel {
  position:sticky;
  top:24px;
  padding:28px;
  border:1px solid #ded5e1;
  border-radius:12px;
  background:#fcf9fc;
}

.preview-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:13px 20px;
}

.live-badge {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
  color:#7b637f;
  font-size:12px;
  line-height:1.7;
  letter-spacing:1px;
}

.live-badge::before {
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#8d9d7d;
}

#preview-label {
  flex:1 1 190px;
  color:#78607f;
  font-size:16px;
  line-height:1.5;
  text-align:right;
}

.bracelet-stage {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1;
  margin-block:8px;
  background:radial-gradient(ellipse at center,#f1eaf4,transparent 72%);
}

#bracelet-preview {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
}

#bracelet-preview svg {
  width:100%;
  height:100%;
  overflow:hidden;
}

.stage-orbit,.preview-star {
  display:none;
}

.stage-center {
  position:absolute;
  z-index:2;
  top:35%;
  bottom:43%;
  left:35%;
  right:35%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  text-align:center;
  color:#aa91b2;
}

.stage-center span {
  display:block;
  font:italic 16px/1.5 var(--serif);
}

.stage-center b {
  margin-top:4px;
  font:400 30px/1.2 var(--serif);
  letter-spacing:4px;
}

.preview-bottom {
  padding-bottom:23px;
  border-bottom:1px solid #e4dae5;
  text-align:center;
}

.preview-bottom p {
  margin-bottom:11px;
  color:#746178;
  font:23px/1.5 var(--serif);
}

.preview-bottom>span {
  color:#84718a;
  font-size:14px;
  line-height:1.8;
}

.preview-create {
  margin-top:23px;
  font-size:17px;
}

.preview-tools {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px 20px;
  padding-top:18px;
}

.preview-tools button {
  min-height:44px;
  padding:7px 2px;
  color:#7e6585;
  background:none;
  font-size:16px;
  line-height:1.5;
}

.preview-tools button:hover {
  color:#51375c;
  text-decoration:underline;
  text-underline-offset:5px;
}

.design-status {
  margin-top:8px;
  color:#7d6884;
  text-align:center;
  font-size:14px;
  line-height:1.8;
}

.design-status:empty {
  margin:0;
}

.design-controls fieldset {
  margin-bottom:32px;
}

.design-controls legend {
  display:block;
  margin-bottom:17px;
  color:#554b58;
  font-size:18px;
  line-height:1.6;
}

.design-controls legend>span {
  display:inline-block;
  margin-right:10px;
  color:#a18aab;
  font:15px/1.7 var(--serif);
}

.design-controls legend>small {
  display:block;
  margin-top:5px;
  padding-left:31px;
  color:#81648b;
  font:16px/1.6 var(--sans);
}

.palette-options {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.palette-options button {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-height:100px;
  padding:12px 5px;
  border:1px solid transparent;
  border-radius:7px;
  color:#79677e;
  background:none;
  font-size:15px;
  line-height:1.5;
}

.palette-options button i {
  display:block;
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--palette-color,#d6bfdf);
  box-shadow:inset 0 0 0 1px #48364a15;
}

.palette-options button[aria-pressed=true] {
  border-color:#b9a3c4;
  background:#ffffff80;
  color:#61436f;
}

.material-note {
  margin-top:13px;
  color:#85718c;
  font-size:14px;
  line-height:1.8;
}

.material-kinds {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:19px;
}

.material-kinds button {
  min-height:44px;
  padding:9px 13px;
  border:1px solid #d9cddf;
  border-radius:25px;
  background:#f9f6fa;
  color:#82698b;
  font-size:15px;
  line-height:1.5;
}

.material-kinds button[aria-pressed=true] {
  border-color:#b09ac0;
  color:#694c78;
  background:#e8dfed;
}

.crystal-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.stone-radio {
  display:block;
  text-align:center;
}

.stone-radio>span {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  height:100%;
  min-height:116px;
  padding:14px 7px;
  border:1px solid transparent;
  border-radius:7px;
}

.stone-radio .stone-ball {
  width:40px;
  height:40px;
}

.stone-radio small {
  display:block;
  color:#7e6686;
  font:15px/1.5 var(--sans);
  white-space:normal;
  overflow-wrap:anywhere;
}

.stone-radio input:checked+span {
  border-color:#b29abe;
  background:#ffffff90;
}

.texture-wood {
  background:repeating-linear-gradient(83deg,#6b422322 0 2px,transparent 2px 6px),radial-gradient(circle at 28% 22%,#ffffff54,#00000020),var(--stone);
}

.texture-lava {
  background:radial-gradient(circle at 30% 35%,#0b0c0f 0 6%,transparent 8%),radial-gradient(circle at 65% 60%,#17171c 0 8%,transparent 10%),radial-gradient(circle at 20% 75%,#15151a 0 6%,transparent 8%),radial-gradient(circle at 35% 20%,#66646b,var(--stone));
}

.texture-striped {
  background:repeating-linear-gradient(24deg,#f5d5978a 0 6px,#5e371f55 6px 10px,transparent 10px 15px),var(--stone);
}

.texture-pearl {
  background:radial-gradient(circle at 28% 22%,#fff 0 8%,#fff4db88 15%,#e8ddd7 65%,#bbaeb8);
}

.texture-iridescent {
  background:linear-gradient(110deg,transparent 25%,#8dd4ef44 48%,#fbe1fa66 65%,transparent),radial-gradient(circle at 28% 22%,#fff,var(--stone));
}

.control-pair {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}

.segmented {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.segmented label {
  display:block;
}

.segmented label>span {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:64px;
  height:100%;
  padding:12px 8px;
  border:1px solid #d9cddd;
  border-radius:5px;
  background:#faf7fb;
  color:#826b8d;
  font-size:17px;
  line-height:1.45;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}

.segmented input:checked+span {
  border-color:#ae94ba;
  background:#e6dcec;
  color:#674775;
}

.segmented small {
  display:block;
  color:#88718f;
  font:14px/1.4 var(--sans);
}

.charm-options label>span,.metal-options label>span {
  font-size:16px;
}

.metal-dot {
  display:block;
  flex:0 0 auto;
  width:21px;
  height:21px;
  border-radius:50%;
  border:1px solid #b4a190;
}

.gold-dot {
  background:linear-gradient(130deg,#b88e4f,#fff1c2 40%,#b88e4f 70%,#ead09d);
}

.silver-dot {
  border-color:#a3acb6;
  background:linear-gradient(130deg,#9aa5b1,#fff 40%,#a0aebc 70%,#e6ecf3);
}

.rose-dot {
  border-color:#b88377;
  background:linear-gradient(130deg,#bc8578,#ffe3d6 40%,#b77d6f 70%,#f0c4b8);
}

output {
  display:inline-block;
  margin-left:15px;
  color:#81618e;
  font-size:17px;
  line-height:1.6;
  white-space:normal;
}

input[type=range] {
  width:100%;
  height:22px;
  margin:8px 0 4px;
  accent-color:#9b7dad;
  cursor:pointer;
}

.range-labels {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:8px;
  color:#88728f;
  font-size:14px;
}

.tiny-link {
  padding:4px 0;
  border-bottom:1px solid #b8a1c1;
  color:#82618d;
  background:none;
  font-size:15px;
  line-height:1.5;
}

.design-total {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:15px 24px;
  padding-top:24px;
  border-top:1px solid #d5c7d9;
}

.design-total small {
  color:#806588;
  font-size:14px;
  line-height:1.5;
  letter-spacing:1px;
}

.design-total p {
  color:#70517b;
  font-size:25px;
  line-height:1.5;
}

.design-total strong {
  font:400 44px/1.3 var(--serif);
}

.design-total p span {
  display:inline-block;
  margin-left:10px;
  font-size:14px;
  line-height:1.5;
}

.design-total>span {
  max-width:230px;
  color:#81688b;
  font-size:15px;
  line-height:1.7;
  text-align:right;
}

.price-note {
  margin:14px 0 24px;
  color:#806a88;
  font-size:14px;
  line-height:1.8;
}

.checkout-note,.shopping-note {
  margin-top:13px;
  color:#7c6883;
  font-size:15px;
  line-height:1.8;
}

/* Shopping actions */
.commerce-actions {
  display:flex;
  flex-direction:column;
  gap:13px;
  margin-top:22px;
}

.commerce-actions .button,#add-to-cart {
  width:100%;
  min-height:59px;
  font-size:17px;
  line-height:1.5;
}

#add-to-cart {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:16px 23px;
  border:1px solid transparent;
  border-radius:5px;
  color:#fff;
  background:var(--olive);
  text-align:left;
  white-space:normal;
}

#add-to-cart:hover {
  background:#3d483a;
}

.cart-status {
  margin-top:17px;
  padding:14px 16px;
  border-left:3px solid #8d9a7d;
  border-radius:0 5px 5px 0;
  background:#e6eadd;
  color:#56634c;
  font-size:16px;
  line-height:1.7;
}

.cart-status:empty {
  display:none;
}

.cart-status a {
  text-decoration:underline;
  text-underline-offset:4px;
}

.commerce-price {
  margin-top:15px;
  color:#70517b;
  font:34px/1.4 var(--serif);
}

.commerce-price small,.commerce-price span {
  font:15px/1.6 var(--sans);
}

/* Inspiration and brand story: all copy and arrows remain in normal flow. */
.collection-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

.collection-item {
  display:flex;
  flex-direction:column;
  padding:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  text-align:left;
  overflow:hidden;
  transition:box-shadow .18s,border-color .18s;
}

.collection-item:hover {
  border-color:#c3b29c;
  box-shadow:0 9px 28px #6553420d;
}

.collection-art {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:22px 18px 8px;
  background:var(--card,#ece6f1);
}

.collection-art>span {
  align-self:flex-start;
  font-size:12px;
  line-height:1.7;
  letter-spacing:1px;
  color:#8c738f;
}

.collection-art svg {
  width:100%;
  height:auto;
  aspect-ratio:1;
}

.collection-details {
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  padding:27px;
}

.collection-details .eyebrow {
  font-size:12px;
  line-height:1.7;
  letter-spacing:1.2px;
}

.collection-details h3 {
  margin:12px 0 11px;
  font:400 31px/1.25 var(--serif);
}

.collection-details p:not(.eyebrow) {
  color:#807264;
  font-size:16px;
  line-height:1.8;
}

.collection-details>b {
  display:block;
  align-self:flex-end;
  margin-top:20px;
  color:#a08865;
  font:400 27px/1 var(--sans);
}

.about {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:85px;
  padding-block:30px;
}

.about-art {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:430px;
  padding:48px 32px;
  border-radius:48% 48% 5px 5px;
  background:#e8e8dd;
  color:#778067;
  text-align:center;
}

.about-art>span {
  margin-bottom:22px;
  color:#a19a75;
  font-size:78px;
  line-height:1;
}

.about-art p {
  font:34px/1.5 var(--serif);
}

.about-art i {
  color:#919780;
}

.about-spark {
  margin-top:26px;
  font-size:30px;
  line-height:1;
  color:#a9a17e;
}

.about-copy h2 {
  margin:22px 0;
}

.about-copy>p:not(.eyebrow) {
  margin-bottom:20px;
  color:#707165;
  font-size:18px;
  line-height:1.9;
}

.about-copy .text-link {
  margin-top:6px;
}

.process {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  align-items:start;
  gap:80px;
}

.process h2 {
  margin-top:22px;
  font-size:40px;
  line-height:1.25;
}

.process ol {
  list-style:none;
  margin:0;
  padding:0;
}

.process li {
  display:flex;
  align-items:flex-start;
  gap:25px;
  padding-block:27px;
  border-bottom:1px solid var(--line);
}

.process li:first-child {
  padding-top:0;
}

.process li>span {
  flex:0 0 auto;
  color:#ac9371;
  font:26px/1.6 var(--serif);
}

.process li h3 {
  margin-bottom:10px;
  font:400 26px/1.3 var(--serif);
}

.process li p {
  color:#797569;
  font-size:17px;
  line-height:1.8;
}

.faq {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);
  gap:80px;
  padding-top:12px;
  padding-bottom:112px;
}

.faq h2 {
  margin-top:22px;
  font-size:40px;
}

.faq details {
  border-bottom:1px solid var(--line);
  padding-block:24px;
}

.faq details:first-child {
  padding-top:0;
}

.faq summary {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  cursor:pointer;
  list-style:none;
  font-size:18px;
  line-height:1.6;
}

.faq summary::-webkit-details-marker {
  display:none;
}

.faq summary>span {
  flex:0 0 auto;
  color:#ad9471;
  font-size:25px;
  line-height:1.2;
}

.faq details[open] summary>span {
  transform:rotate(45deg);
}

.faq details p {
  margin:17px 0 0;
  padding-right:36px;
  color:#7b7162;
  font-size:17px;
  line-height:1.9;
}

.closing {
  padding:72px 24px;
  background:#eee8e0;
  text-align:center;
}

.closing>span {
  color:#ae9470;
  font-size:32px;
}

.closing>p {
  margin:20px 0 28px;
  font:37px/1.4 var(--serif);
}

footer {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:28px 48px;
  max-width:1440px;
  margin-inline:auto;
  padding:60px 64px 35px;
}

.footer-brand {
  font-size:29px;
}

footer>p {
  color:#7d7163;
  text-align:right;
  font-size:17px;
}

footer>div {
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  font-size:16px;
  line-height:1.7;
  color:#7f7060;
}

footer>small {
  font-size:14px;
  line-height:1.8;
  color:#897b6c;
  text-align:right;
}

/* Dialog close control occupies a dedicated row. */
dialog {
  width:calc(100% - 40px);
  max-width:720px;
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  margin:auto;
  padding:32px;
  overflow:auto;
  border:1px solid #ddd2c2;
  border-radius:14px;
  background:#fffdf8;
  color:var(--ink);
  box-shadow:0 25px 120px #27202438;
}

dialog::backdrop {
  background:#35303975;
  backdrop-filter:blur(5px);
}

.dialog-close {
  display:flex;
  align-items:center;
  justify-content:center;
  position:static;
  width:44px;
  height:44px;
  margin:-7px -7px 18px auto;
  padding:0;
  border:1px solid #e0d7ca;
  border-radius:50%;
  color:#8b7965;
  background:#faf5ee;
  font:34px/1 var(--serif);
}

.dialog-close:hover {
  background:#eee5d9;
}

dialog h2 {
  margin:16px 0 17px;
  font-size:36px;
  line-height:1.2;
}

.dialog-intro {
  color:#7c6e5f;
  font-size:17px;
  line-height:1.8;
}

.inquiry-summary {
  margin:25px 0;
  padding:19px 22px;
  border-radius:7px;
  background:#f0eaf1;
  color:#7a6580;
  font-size:16px;
  line-height:1.9;
  white-space:pre-line;
}

.inquiry-summary b {
  color:#674c71;
  font-weight:500;
}

.input-row {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}

#inquiry-form label {
  display:block;
  margin-bottom:22px;
  font-size:17px;
  line-height:1.6;
}

#inquiry-form input:not([type=checkbox]) {
  margin-top:9px;
}

#inquiry-form .consent {
  display:flex;
  align-items:flex-start;
  gap:13px;
  color:#796b5c;
  font-size:15px;
  line-height:1.8;
}

input[type=checkbox] {
  width:19px;
  height:19px;
  margin:4px 0 0;
  accent-color:var(--olive);
  flex:0 0 auto;
}

.honey {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
}

#inquiry-success {
  color:#7c6c5d;
  text-align:center;
  font-size:17px;
  line-height:1.8;
}

#inquiry-success h3 {
  margin:20px 0 17px;
  color:var(--ink);
  font:30px/1.3 var(--serif);
}

#inquiry-success p {
  margin-block:15px;
}

#inquiry-success .button {
  margin-top:23px;
}

.success-mark {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:20px auto;
  border:1px solid #a4b198;
  border-radius:50%;
  color:#7e8a74;
  font-size:27px;
}

#preview-dialog {
  max-width:940px;
}

.picture-frame {
  display:grid;
  place-items:center;
  min-height:120px;
  margin:24px 0;
  padding:12px;
  border:1px solid #dfd4e1;
  border-radius:8px;
  background:#f7f3f7;
}

.picture-frame img {
  width:100%;
  height:auto;
  max-height:60vh;
  max-height:60dvh;
  object-fit:contain;
}

#picture-status {
  padding:24px;
  color:#82718b;
  font-size:17px;
  line-height:1.8;
  text-align:center;
}

.picture-background {
  margin-bottom:24px;
}

.picture-background legend {
  font-size:18px;
}

.picture-background .segmented label>span {
  min-height:55px;
  font-size:16px;
}

.picture-note {
  margin-top:15px;
  color:#827269;
  font-size:14px;
  line-height:1.8;
}

#download-design[aria-disabled=true] {
  pointer-events:none;
  opacity:.55;
}

.wrist-illustration {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:24px 0;
  color:#ae9573;
  font:90px/1.2 var(--serif);
}

.wrist-illustration>span {
  font:21px/1.5 var(--serif);
}

#size-dialog ol {
  padding-left:24px;
  color:#7d6f5c;
  font-size:17px;
  line-height:1.9;
}

#size-dialog li+li {
  margin-top:13px;
}

#size-dialog>p:not(.eyebrow) {
  margin-block:23px;
  color:#80705e;
  font-size:16px;
  line-height:1.8;
}

#toast {
  position:fixed;
  z-index:1000;
  left:50%;
  bottom:24px;
  width:max-content;
  max-width:calc(100% - 40px);
  padding:16px 24px;
  transform:translateX(-50%);
  border-radius:7px;
  background:#4c5847;
  box-shadow:0 8px 35px #292b2333;
  color:#fff;
  font-size:16px;
  line-height:1.65;
  text-align:center;
}

.skip {
  position:absolute;
  z-index:1001;
  left:20px;
  top:-120px;
  padding:12px 20px;
  background:#fff;
  color:var(--ink);
}

.skip:focus {
  top:12px;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.noscript {
  padding:24px;
  background:#efddca;
  font-size:17px;
  line-height:1.8;
  text-align:center;
}

/* Responsive rules are defined once, in descending order. */
@media(max-width:1280px) {
  .section-wrap {
    padding-inline:48px;
  }
  .site-header {
    padding-inline:48px;
  }
  .site-header nav {
    order:5;
    flex-basis:100%;
    justify-content:flex-start;
    padding-top:18px;
    border-top:1px solid var(--line);
  }
  .hero {
    gap:44px;
  }
  .hero h1 {
    font-size:62px;
  }
  .discover {
    gap:48px;
  }
  .design-grid {
    gap:36px;
  }
  .preview-panel {
    padding:23px;
  }
  .collection-grid {
    gap:21px;
  }
  .collection-details {
    padding:24px;
  }
  .about {
    gap:55px;
  }
  .process,.faq {
    gap:55px;
  }
}

@media(max-width:1050px) {
  .hero {
    grid-template-columns:minmax(0,1fr);
    gap:34px;
    padding-top:44px;
  }
  .hero-copy {
    max-width:750px;
  }
  .hero h1 {
    font-size:72px;
  }
  .hero-art {
    max-width:760px;
    margin-inline:auto;
  }
  .hero-image-frame>img {
    aspect-ratio:1.45;
    border-radius:35% 35% 5px 5px;
  }
  .image-caption {
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px 22px;
  }
  .image-caption b {
    grid-row:2;
    grid-column:1/-1;
  }
  .floating-note {
    justify-content:center;
  }
  .collection-grid {
    grid-template-columns:minmax(0,1fr);
    gap:25px;
  }
  .collection-item {
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
    align-items:stretch;
  }
  .collection-art {
    justify-content:space-between;
  }
  .collection-details {
    justify-content:center;
    padding:32px;
  }
  .collection-details>b {
    align-self:flex-end;
  }
}

@media(max-width:1000px) {
  .section-space {
    padding-block:82px;
  }
  .discover {
    grid-template-columns:minmax(0,1fr);
    gap:36px;
  }
  .section-intro {
    max-width:760px;
  }
  .discovery-seal {
    display:none;
  }
  .quiet-note {
    margin-top:23px;
  }
  .birthday-card {
    max-width:760px;
    width:100%;
    margin-inline:auto;
  }
  .design-grid {
    grid-template-columns:minmax(0,1fr);
    gap:48px;
  }
  .preview-panel {
    position:static;
    max-width:660px;
    width:100%;
    margin-inline:auto;
    padding:30px;
  }
  .palette-options {
    grid-template-columns:repeat(7,minmax(0,1fr));
  }
  .crystal-options {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .control-pair {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
  }
  .design-total>span {
    max-width:50%;
  }
  .about,.process,.faq {
    grid-template-columns:minmax(0,1fr);
    gap:38px;
  }
  .about-art {
    max-width:600px;
    width:100%;
    min-height:370px;
    margin-inline:auto;
  }
  .about-copy {
    max-width:800px;
  }
  .process h2,.faq h2 {
    font-size:42px;
  }
  .faq {
    padding-bottom:82px;
  }
  footer {
    padding-inline:48px;
  }
}

@media(max-width:700px) {
  .section-wrap {
    padding-inline:26px;
  }
  .section-space {
    padding-block:65px;
  }
  h2 {
    font-size:38px;
  }
  .site-header {
    gap:20px;
    padding:23px 26px;
  }
  .brand {
    font-size:28px;
    letter-spacing:2px;
  }
  .brand-mark {
    font-size:43px;
  }
  .brand small {
    font-size:12px;
    letter-spacing:1px;
  }
  .site-header nav {
    gap:9px 22px;
    font-size:16px;
  }
  .site-header .brand {
    flex:1 1 210px;
  }
  .header-cta {
    font-size:16px;
  }
  .hero {
    gap:30px;
    padding-block:34px 52px;
  }
  .hero-copy {
    padding-block:5px;
  }
  .hero h1 {
    font-size:62px;
    letter-spacing:-1.8px;
  }
  .hero-description {
    font-size:18px;
  }
  .hero-actions {
    align-items:flex-start;
    gap:20px 24px;
  }
  .hero-actions .button {
    width:100%;
  }
  .hero-notes {
    margin-top:26px;
    gap:10px 20px;
    font-size:14px;
  }
  .hero-image-frame>img {
    aspect-ratio:1.1;
    border-radius:44% 44% 5px 5px;
  }
  .image-caption {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:21px 23px;
  }
  .image-caption b {
    font-size:28px;
  }
  .floating-note {
    justify-content:flex-start;
    padding:18px 22px;
  }
  .floating-note div {
    font-size:21px;
  }
  .manifesto-strip {
    padding-inline:24px;
    gap:10px 18px;
  }
  .manifesto-strip i {
    display:none;
  }
  .manifesto-strip span {
    flex:1 1 250px;
  }
  .birthday-card {
    padding:29px;
  }
  .card-heading {
    align-items:flex-start;
  }
  .card-heading p {
    font-size:29px;
  }
  .section-title-row {
    margin-bottom:34px;
    gap:23px;
  }
  .section-title-row>p,.section-title-row>.text-link {
    max-width:none;
  }
  .preview-panel {
    padding:24px;
  }
  .preview-top {
    gap:10px;
  }
  #preview-label {
    flex-basis:170px;
  }
  .preview-bottom p {
    font-size:22px;
  }
  .palette-options {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .crystal-options {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px 9px;
  }
  .stone-radio>span {
    min-height:114px;
    padding:12px 6px;
  }
  .stone-radio small {
    font-size:15px;
    line-height:1.5;
  }
  .control-pair {
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  .design-controls legend>small {
    padding-left:0;
  }
  .segmented {
    gap:9px;
  }
  .segmented label>span {
    padding:12px 7px;
  }
  .charm-options label>span,.metal-options label>span {
    font-size:16px;
  }
  .design-total {
    align-items:flex-start;
  }
  .design-total>span {
    max-width:190px;
    text-align:left;
  }
  .collection-item {
    display:flex;
  }
  .collection-art {
    padding:23px 24px 8px;
  }
  .collection-art svg {
    max-width:420px;
  }
  .collection-details {
    padding:28px;
  }
  .collection-details h3 {
    font-size:33px;
  }
  .collection-details>b {
    margin-top:18px;
  }
  .about-art {
    min-height:340px;
    padding-inline:26px;
  }
  .about-art p {
    font-size:32px;
  }
  .process h2,.faq h2 {
    font-size:38px;
  }
  .process li {
    gap:20px;
  }
  .process li h3 {
    font-size:26px;
  }
  .process li p,.faq details p {
    font-size:17px;
  }
  .faq {
    padding-bottom:65px;
  }
  .faq details p {
    padding-right:0;
  }
  .closing {
    padding-block:58px;
  }
  .closing>p {
    font-size:34px;
  }
  footer {
    grid-template-columns:minmax(0,1fr);
    padding:45px 26px 30px;
    gap:24px;
  }
  footer>p,footer>small {
    text-align:left;
  }
  footer>div {
    gap:12px 24px;
  }
  dialog,#preview-dialog {
    width:calc(100% - 28px);
    max-height:calc(100vh - 28px);
    max-height:calc(100dvh - 28px);
    padding:25px;
  }
  .dialog-close {
    margin-bottom:18px;
  }
  dialog h2 {
    font-size:34px;
  }
  .picture-frame {
    padding:7px;
  }
  .picture-background .segmented label>span {
    font-size:15px;
  }
  #toast {
    bottom:18px;
    max-width:calc(100% - 32px);
    padding:15px 19px;
  }
}

@media(max-width:390px) {
  .section-wrap {
    padding-inline:20px;
  }
  .site-header {
    padding-inline:20px;
  }
  .hero h1 {
    font-size:54px;
  }
  h2,.process h2,.faq h2 {
    font-size:35px;
  }
  .birthday-card {
    padding:24px 21px;
  }
  .card-heading {
    gap:12px;
  }
  .card-heading p {
    font-size:27px;
  }
  .match-stones {
    grid-template-columns:minmax(0,1fr);
  }
  .match-stones>div {
    flex-wrap:nowrap;
  }
  .preview-panel {
    padding:20px 17px;
  }
  #preview-label {
    flex-basis:100%;
    text-align:left;
  }
  .stage-center span {
    font-size:14px;
  }
  .stage-center b {
    font-size:26px;
  }
  .palette-options {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .stone-radio small {
    font-size:14px;
  }
  .segmented label>span {
    padding-inline:5px;
  }
  .metal-options label>span,.charm-options label>span {
    font-size:15px;
  }
  .button {
    padding-inline:19px;
  }
  .collection-details {
    padding:25px;
  }
  .design-total>span {
    max-width:none;
  }
  .picture-background .segmented {
    grid-template-columns:minmax(0,1fr);
  }
  dialog,#preview-dialog {
    padding:23px 20px;
  }
  footer {
    padding-inline:20px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}

/* Bead-by-bead atelier. Every tool and label stays in normal flow. */
.preview-panel{position:relative;top:auto}
.date-selects{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr);gap:12px}.date-selects label{display:grid;gap:7px;font-size:14px;color:#73667a}.date-selects select{font-size:17px;padding:12px 8px;min-width:0}

#bracelet-preview [data-bead-index]{cursor:pointer}
.bead-editor{margin:7px 0 27px;padding-top:20px;border-top:1px solid #e3dbe6}.selected-bead-status{font-size:17px;line-height:1.7;color:#6e527a;margin:10px 0 16px}
.bead-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}.bead-strip button{display:grid;justify-items:center;align-items:center;gap:5px;min-width:0;min-height:68px;padding:8px 2px;background:#f6f0f7;border:1px solid #e5dce7;border-radius:6px;color:#78677f;font-size:13px;line-height:1.2}.bead-strip button .stone-ball{width:29px;height:29px}.bead-strip button[aria-pressed=true]{border:2px solid #9675a8;background:#eee1f2;padding:7px 1px;box-shadow:0 0 0 2px #fff inset;color:#5f3f6f}
.bead-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}.bead-actions button,.fit-line button{background:#f5eef7;color:#6d5279;border:1px solid #cdbbd5;padding:10px 12px;font-size:14px;line-height:1.5;border-radius:4px;min-height:44px}.bead-actions button:disabled{opacity:.4;cursor:default}.fit-line{margin-top:18px;padding:15px;background:#eee8f0;border:1px solid #dfd4e4;border-radius:5px;display:grid;gap:11px}.fit-line p{font-size:14px;line-height:1.8;color:#7b657e;margin:0}.fit-line button{justify-self:start;background:#fcf9fd}
.element-balance{padding:22px 0 25px;border-top:1px solid #e5dce8;border-bottom:1px solid #e5dce8;margin-bottom:23px}.balance-title{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:7px 18px;margin-bottom:17px}.balance-title h3{font:24px/1.4 var(--serif);color:#6c5774;margin:0}.balance-title p{font-size:15px;color:#8b7894;margin:0}.element-counts{display:grid;gap:11px}.element-counts>div{display:grid;grid-template-columns:minmax(90px,1fr) auto;gap:6px 10px;align-items:center}.element-counts>div>span{display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.5;color:#716078}.element-counts i{width:11px;height:11px;display:inline-block;border-radius:50%;flex-shrink:0}.element-counts b{font-size:15px;font-weight:500;color:#75647d;line-height:1.5}.element-counts b small{font-size:13px;font-weight:400}.element-track{grid-column:1/-1;height:6px;border-radius:4px;background:#e9e1eb;overflow:hidden}.element-track>span{display:block;height:100%;border-radius:4px}.element-balance>p{font-size:14px;line-height:1.75;color:#8a798e;margin:17px 0 0}
.element-filter{margin:0 0 20px;padding:17px;border:1px solid #dfd3e5;border-radius:6px;background:#faf6fc}.element-filter>p{font-size:16px;color:#6c5375;margin:0 0 12px}.element-options,.polarity-options{display:flex;flex-wrap:wrap;gap:8px}.element-options button,.polarity-options button{min-height:43px;border:1px solid #d9cce0;border-radius:4px;background:#fffbff;color:#786180;font-size:14px;line-height:1.4;padding:9px 11px}.element-options button[aria-pressed=true],.polarity-options button[aria-pressed=true]{background:#e7daed;border-color:#ae92bc;color:#5d3f6e}.polarity-options{margin-top:12px}.polarity-options button{font-size:14px}
.stone-radio em{font-size:12px;font-style:normal;color:#99849f;line-height:1.4;display:block}.empty-materials{grid-column:1/-1;font-size:16px;line-height:1.8;color:#8c7497;padding:16px 0}.insert-bead-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.insert-bead-row .button{font-size:15px;min-height:54px;padding:12px 17px}.insert-bead-row select{min-width:0}.bead-sequence-details{font-size:14px;line-height:1.8}.bead-sequence-details summary{cursor:pointer;color:#785a87}.bead-sequence-details p{margin:10px 0}
@media(max-width:600px){.date-selects{gap:8px;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr)}.date-selects select{font-size:16px;padding:12px 6px}.bead-strip{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}.bead-actions{gap:8px}.bead-actions button{font-size:14px;flex:1 1 80px}.insert-bead-row{grid-template-columns:minmax(0,1fr)}.insert-bead-row .button{width:100%;justify-content:center;font-size:16px}.element-filter{padding:15px}.element-options button,.polarity-options button{font-size:14px}.balance-title h3{font-size:24px}.selected-bead-status{font-size:17px}}

/* Meaning-led material selection. */
.meaning-filter{padding:19px;border:1px solid #dfd2e3;background:#faf5fb;border-radius:7px;margin-bottom:23px}.meaning-filter>p:first-child{font:25px/1.4 var(--serif);color:#786080;margin:0 0 15px}.meaning-intentions{display:flex;flex-wrap:wrap;gap:9px}.meaning-intentions button{min-height:43px;padding:10px 13px;border:1px solid #dbc9e1;background:#fffafc;border-radius:25px;font-size:15px;line-height:1.4;color:#7e6287}.meaning-intentions button[aria-pressed=true]{background:#e5d5eb;border-color:#aa8db7;color:#5d3d6b}.material-tile{min-width:0;display:flex;flex-direction:column;gap:5px}.material-tile .stone-radio{flex:1}.material-tile .stone-radio>span{height:100%;justify-content:flex-start}.material-tile .stone-radio em{font-size:13px;line-height:1.5;color:#8c7396}.material-meaning-button{font-size:13px;line-height:1.5;color:#8b659a;background:transparent;padding:6px 0 10px;min-height:37px;text-align:center;text-decoration:underline;text-underline-offset:3px}.meaning-material-heading{display:flex;align-items:flex-start;gap:19px;margin:18px 0 25px}.meaning-material-heading>.stone-ball{width:64px;height:64px;flex-shrink:0;margin-top:7px}.meaning-material-heading>div{min-width:0}.meaning-material-heading p{font-size:17px;color:#8b7294;margin:0}.meaning-material-heading h2{font-size:33px;line-height:1.25;margin:9px 0 0}.meaning-description{font-size:18px;line-height:1.9;color:#6e6175}.meaning-tags{display:flex;flex-wrap:wrap;gap:10px;margin:23px 0}.meaning-tags span{font-size:15px;color:#795a88;background:#eee1f3;border:1px solid #dbc8e4;padding:7px 13px;border-radius:20px}.meaning-element{font-size:16px;line-height:1.8;color:#85728f;margin:15px 0}.meaning-material-heading+ p{margin-top:20px}#use-meaning-material{margin-top:25px}.preview-bottom p{font-size:17px;line-height:1.8}
@media(max-width:600px){.meaning-filter{padding:16px}.meaning-intentions button{font-size:15px;padding:10px 13px}.meaning-material-heading{gap:15px}.meaning-material-heading h2{font-size:28px}.meaning-material-heading>.stone-ball{width:52px;height:52px}.meaning-description{font-size:18px}.material-meaning-button{font-size:13px}.preview-bottom p{font-size:17px;line-height:1.85}}

.material-tile .stone-radio em,.material-meaning-button,.bead-strip button,.element-counts b small{font-size:14px}

/* A neutral jewelry identity, with an open, unmarked bracelet center. */
.brand-mark.brand-monogram{display:grid;place-items:center;transform:none;width:45px;height:45px;flex:0 0 45px;border:1px solid #b8a487;border-radius:50%;font:27px/1 Georgia,serif;letter-spacing:0;color:#a48b67}
.card-heading>.card-number{font:21px/1.3 Georgia,serif;letter-spacing:1px;color:#ac9473}.quiet-note{margin-top:22px}
.result-top>.palette-mark{display:flex;align-items:center;justify-content:center;background:#f1edf3;width:58px;height:58px;flex-shrink:0;gap:0;border-radius:50%}.palette-mark i{display:block;width:19px;height:19px;border-radius:50%;border:1px solid #fff9;background:var(--palette-main,#b29bc8);box-shadow:inset -2px -2px 4px #0001}.palette-mark i+i{margin-left:-5px}.palette-mark i:nth-child(2){background:var(--palette-accent,#e7c3cd)}
.about-art::before,.about-art::after{display:none}
@media(max-width:600px){.brand-mark.brand-monogram{width:38px;height:38px;flex-basis:38px;font-size:24px}.card-heading>.card-number{font-size:20px}}

/* The material library: readable cards, open layouts and five color-led edits. */
.element-edit-intro{max-width:760px;margin:42px 0 24px}.element-edit-intro h3{font:34px/1.3 var(--serif);color:#65516f;margin:10px 0 14px}.element-edit-intro>p:last-child{font-size:18px;line-height:1.8;color:#786b7d;margin:0}
.element-edit{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:48px}.element-edit>button{display:flex;flex-direction:column;align-items:flex-start;gap:13px;min-width:0;padding:25px 20px;background:#faf7f9;border:1px solid #ddd4df;border-top:3px solid var(--element-color);border-radius:7px;color:#6d5977;text-align:left;transition:background .2s,border-color .2s}.element-edit>button:hover{background:#fff;border-color:var(--element-color)}.element-edit>button:focus-visible{outline:3px solid #9776ac;outline-offset:4px}.element-edit strong{font:29px/1.3 var(--serif)}.element-edit>button>span:not(.element-edit-beads){font-size:16px;line-height:1.65;flex:1}.element-edit small{font-size:15px;line-height:1.6;color:#7d6d83}.element-edit-beads{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:7px 0}.element-edit-beads .stone-ball{width:37px;height:37px}
.material-library-heading{padding:21px;background:#f9f5fa;border-left:3px solid #b197bb;margin:0 0 24px;border-radius:0 5px 5px 0}.material-library-heading>p:first-child{font:27px/1.4 var(--serif);color:#6f527d;margin:0 0 10px}.material-library-heading>p+p{font-size:17px;line-height:1.8;color:#7b6c83;margin:0}
.material-search-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(145px,1fr);gap:15px;margin-bottom:25px}.material-search-row label{display:grid;gap:10px;font-size:16px;line-height:1.5;color:#71567c}.material-search-row input,.material-search-row select{width:100%;min-width:0;min-height:53px;font-size:16px;padding:13px 12px;border:1px solid #d3c5da;border-radius:5px;background:#fffafc;color:#624d6c}.material-search-row input::placeholder{color:#9989a0;opacity:1}.material-search-row input:focus,.material-search-row select:focus{outline:2px solid #a385b2;outline-offset:2px}
.material-results-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 15px;margin:8px 0 18px}.material-results-row p{font-size:16px;line-height:1.6;color:#735e7e;margin:0}.material-results-row .tiny-link{font-size:15px;line-height:1.6;padding:9px 0;margin:0}.material-library-more{margin-top:24px;min-height:54px;font-size:17px}
.material-tile{background:#fcf9fc;border:1px solid #e8dfea;border-radius:7px;padding:5px}.material-tile .stone-radio small{font-size:16px;line-height:1.5;color:#6d5478;overflow-wrap:normal;word-break:normal}.material-tile .stone-radio>span{gap:8px;padding:16px 8px;min-height:180px}.material-tile .stone-radio .stone-ball{width:46px;height:46px;margin-bottom:6px}.material-tile .stone-radio .material-element{font-size:14px;color:#9a778f}.material-tile .material-meaning-button{font-size:14px;min-height:44px;padding:8px 3px;color:#79518a}.material-tile .stone-radio input:checked+span{border-color:#a187b0;background:#f0e7f4}
.texture-rutilated{background:radial-gradient(circle at 25% 20%,#fff9,transparent 46%),repeating-linear-gradient(65deg,transparent 0 6px,#a97c3399 6px 7px,transparent 7px 12px),repeating-linear-gradient(118deg,transparent 0 11px,#d2aa5ca8 11px 12px,transparent 12px 18px),var(--stone)}.texture-rutilated[data-material=copper-rutilated-quartz]{background:radial-gradient(circle at 25% 20%,#fff8,transparent 46%),repeating-linear-gradient(65deg,transparent 0 6px,#a1543aab 6px 7px,transparent 7px 12px),repeating-linear-gradient(118deg,transparent 0 11px,#ba7255a8 11px 12px,transparent 12px 18px),var(--stone)}
.texture-tourmalinated{background:radial-gradient(circle at 25% 20%,#fff9,transparent 46%),repeating-linear-gradient(57deg,transparent 0 8px,#272e34bb 8px 9px,transparent 9px 14px),repeating-linear-gradient(123deg,transparent 0 13px,#27312e9c 13px 14px,transparent 14px 21px),var(--stone)}
.texture-phantom{background:radial-gradient(circle at 27% 18%,#fff9,transparent 48%),repeating-conic-gradient(from 220deg at 50% 70%,#426a5a55 0deg 22deg,transparent 22deg 44deg),linear-gradient(25deg,#668e6844,transparent 72%),var(--stone)}
.texture-bicolor{background:radial-gradient(circle at 25% 20%,#fff9,transparent 52%),linear-gradient(130deg,#ae8dbd 0 44%,#c8a0aa 51%,#e0bd79 64% 100%)}
.texture-banded{background:radial-gradient(circle at 25% 20%,#fff8,transparent 46%),repeating-linear-gradient(153deg,#fff5 0 3px,transparent 4px 10px,#584d6a2b 11px 13px,transparent 14px 17px),var(--stone)}
.texture-marbled{background:radial-gradient(circle at 27% 20%,#fff9,transparent 45%),repeating-linear-gradient(33deg,transparent 0 9px,#fcf5e559 10px 12px,transparent 13px 20px),repeating-linear-gradient(123deg,transparent 0 16px,#34313f52 17px 18px,transparent 19px 26px),var(--stone)}
.texture-moss{background:radial-gradient(ellipse at 60% 66%,#4e7458a8 0 14%,transparent 23%),radial-gradient(ellipse at 32% 44%,#517552b3 0 12%,transparent 24%),radial-gradient(circle at 25% 20%,#fffc,transparent 43%),repeating-conic-gradient(from 7deg,#46664344 0deg 11deg,transparent 12deg 66deg),var(--stone)}
.texture-metallic{background:radial-gradient(ellipse at 30% 24%,#f9faff 0 5%,#9ba2ad 15%,#38414c 35%,#69717c 48%,#252c36 70%,#a3a9b3 84%,#20252d);box-shadow:inset -3px -3px 7px #0005,0 3px 7px #29203712}
#material-library{scroll-margin-top:30px}
.size-feedback{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:15px;margin-top:20px;padding:17px 14px;background:#fbf7fc;border:1px solid #e0d3e7;border-radius:6px;min-height:114px}.size-sample{width:76px;height:76px;display:grid;place-items:center}.size-sample>.stone-ball{width:var(--sample-size,56px);height:var(--sample-size,56px);transition:width .2s,height .2s}.size-feedback strong{font-size:18px;font-weight:500;line-height:1.5;color:#6e4e7c}.size-feedback p{font-size:16px;line-height:1.7;margin:7px 0 0;color:#806b8a}.preview-top>span:last-child{white-space:normal;text-align:right;line-height:1.6}
.preview-scale-note{font-size:15px;line-height:1.7;color:#887390;text-align:center;margin:0 0 21px;padding:0 12px}
.stone-ball.material-photo{background-color:transparent;box-shadow:0 2px 4px #33283b13;border:none}
@media(max-width:1050px){.element-edit{grid-template-columns:repeat(3,minmax(0,1fr))}.element-edit>button{padding:23px 18px}}
@media(max-width:650px){.element-edit{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:32px}.element-edit>button{padding:19px 14px;gap:10px}.element-edit-beads{gap:3px}.element-edit-beads .stone-ball{width:30px;height:30px}.element-edit strong{font-size:27px}.element-edit>button>span:not(.element-edit-beads){font-size:16px}.element-edit small{font-size:14px}.element-edit-intro h3{font-size:29px}.material-search-row{grid-template-columns:minmax(0,1fr)}.material-library-heading{padding:19px}.material-library-heading>p:first-child{font-size:25px}.crystal-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.material-tile .stone-radio small{font-size:16px}.material-tile .stone-radio>span{min-height:180px}.material-library-more{font-size:16px;padding-inline:15px}}


/* ==========================================================================
   LUNORA ENHANCEMENTS — Lifestyle Gallery, On-Wrist Shots, Gifting & Tools
   ========================================================================== */

/* 1. On-Wrist & Lifestyle Wearing Gallery */
.wearing-gallery {
  padding-block: 48px;
  border-bottom: 1px solid var(--line);
}
.lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}
.lifestyle-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid #e5dde7;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.lifestyle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px #543d5f15;
}
.lifestyle-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4eff5;
}
.lifestyle-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.lifestyle-card:hover .lifestyle-img-wrap img {
  transform: scale(1.03);
}
.lifestyle-caption {
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lifestyle-caption .eyebrow {
  color: #92759c;
  font-size: 12px;
  letter-spacing: 1px;
}
.lifestyle-caption h3 {
  font: 22px/1.3 var(--serif);
  color: #5d4665;
  margin: 0;
}
.lifestyle-caption p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.65;
  color: #7b6d80;
  margin: 0;
}

/* 2. Birthday Match Tag & Actions */
.match-element-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  margin-top: 8px;
  letter-spacing: 0.5px;
}
.match-actions-group {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.stone-match-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fdf5e7;
  color: #9b722d;
  border: 1px solid #ebd4ab;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  letter-spacing: 0.3px;
}
.matched-tile {
  border-color: #d6bce1 !important;
  background: #fdfafd !important;
}
.highlight-matched-btn {
  background: #f7eef9 !important;
  color: #774c86 !important;
  font-weight: 500;
  padding: 6px 12px !important;
  border-radius: 16px;
  border: 1px solid #dcbfe6 !important;
}
.highlight-matched-btn[aria-pressed=true] {
  background: #8b5f9c !important;
  color: #fff !important;
}

/* 3. Gifting & Keepsake Options */
.gifting-options-field {
  margin-top: 28px;
  padding: 22px;
  background: #fcf8fd;
  border: 1px solid #e2d7e5;
  border-radius: 8px;
}
.gift-options-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.gift-option-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid #ded5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s;
}
.gift-option-card:hover {
  border-color: #b093bd;
}
.gift-option-card input[type=checkbox] {
  width: 19px;
  height: 19px;
  margin-top: 3px;
  accent-color: #7d548b;
  cursor: pointer;
}
.gift-option-content {
  flex: 1;
}
.gift-option-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #5c4463;
}
.gift-option-title small {
  color: #92759c;
  font-weight: 600;
  font-size: 14px;
}
.gift-option-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #7d7083;
  margin: 4px 0 0;
}
.engraving-input-wrap {
  margin-top: 10px;
}
.engraving-input-wrap input {
  padding: 8px 12px;
  border: 1px solid #c9b9ce;
  border-radius: 4px;
  font-size: 14px;
  max-width: 180px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 4. Price Breakdown Accordion */
.price-breakdown-toggle {
  background: none;
  border: none;
  color: #876295;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 0;
  margin-top: 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.price-breakdown-panel {
  margin-top: 10px;
  margin-bottom: 18px;
  padding: 16px 18px;
  background: #faf4fb;
  border: 1px dashed #d6c6dc;
  border-radius: 6px;
  display: grid;
  gap: 9px;
}
.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #76657c;
}
.breakdown-row.breakdown-total {
  border-top: 1px solid #ded0e2;
  padding-top: 8px;
  margin-top: 4px;
  color: #553b5e;
  font-size: 15px;
}

/* 5. Mobile Responsive for Lifestyle Grid */
@media (max-width: 900px) {
  .lifestyle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 600px) {
  .lifestyle-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Integrated Accio gallery: readable type and badges in the card's normal flow. */
.lifestyle-caption h3{font-size:27px;line-height:1.4}.lifestyle-caption .eyebrow{font-size:14px;line-height:1.65}.lifestyle-caption p:not(.eyebrow){font-size:18px;line-height:1.85}.lifestyle-note{font-size:16px;line-height:1.8;color:#85728e;margin:23px 0 0}
.stone-match-pill{position:static;top:auto;right:auto;display:block;font-size:14px;line-height:1.5;letter-spacing:0;padding:5px 9px;margin:0 auto 4px;max-width:100%;white-space:normal;overflow-wrap:anywhere}.match-element-tag{font-size:15px;line-height:1.6}.gift-option-content{min-width:0}.gift-option-title{flex-wrap:wrap;font-size:18px;line-height:1.6}.gift-option-title small{font-size:15px}.gift-option-desc{font-size:16px;line-height:1.8}.engraving-input-wrap input{font-size:17px;max-width:100%;width:100%}.price-breakdown-toggle{font-size:16px;min-height:44px}.breakdown-row{font-size:16px;line-height:1.7;gap:18px;align-items:flex-start}.breakdown-row>span:last-child{flex:0 0 auto}.breakdown-row.breakdown-total{font-size:18px}
.wrist-size-feedback{display:grid;grid-template-columns:132px minmax(0,1fr);gap:15px;align-items:center;background:#fbf7fc;border:1px solid #e0d3e7;border-radius:6px;padding:13px;margin-top:20px}.wrist-mini-preview{width:132px;min-width:0;aspect-ratio:1;display:grid;place-items:center}.wrist-mini-preview svg{width:100%;height:auto;display:block}.wrist-size-feedback strong{font-size:18px;line-height:1.6;font-weight:500;color:#6e4e7c}.wrist-size-feedback p{font-size:16px;line-height:1.75;color:#806b8a;margin:8px 0 0}
@media(max-width:600px){.lifestyle-caption{padding:24px 21px}.lifestyle-caption h3{font-size:26px}.gift-option-card{padding:15px 12px;gap:11px}.wrist-size-feedback{grid-template-columns:108px minmax(0,1fr);gap:11px;padding:12px}.wrist-mini-preview{width:108px}.wrist-size-feedback strong{font-size:17px}.wrist-size-feedback p{font-size:16px}.breakdown-row{font-size:16px}}

/* LUNORA identity: outlined lettering and a faceted champagne/sage gemstone. */
.brand.brand-signature{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;width:232px;max-width:100%;min-height:44px;flex-shrink:0;letter-spacing:normal;line-height:1.3;color:#513a4a;text-decoration:none}.brand-signature .brand-logo{display:block;width:232px;max-width:100%;height:auto;aspect-ratio:720/148;object-fit:contain}.brand-signature .brand-tagline{display:block;margin:0 0 0 41px;font:13px/1.5 var(--sans);letter-spacing:2px;color:#74616b;white-space:normal}.brand-signature .brand-name-fallback{font:32px/1.25 var(--serif);letter-spacing:3px;overflow-wrap:anywhere;max-width:100%}.brand-signature:focus-visible{outline:2px solid #92749e;outline-offset:7px;border-radius:2px}.footer-brand.brand-signature{width:264px}.footer-brand.brand-signature .brand-logo{width:264px}.footer-brand.brand-signature .brand-tagline{margin-left:46px}
@media(max-width:700px){.site-header{gap:16px 12px;padding:20px 26px}.site-header .brand.brand-signature{width:clamp(172px,calc(100vw - 142px),204px);flex:0 1 auto;min-height:44px}.site-header .brand-signature .brand-logo{width:100%}.site-header .brand-signature .brand-tagline{display:none}.site-header .header-actions{flex:0 0 auto;gap:0}.site-header .header-cta{display:none}.site-header nav{flex:1 1 100%;order:5;gap:9px 20px}.site-header>.cart-link{margin-left:auto}.footer-brand.brand-signature{width:232px}.footer-brand.brand-signature .brand-logo{width:232px}.footer-brand.brand-signature .brand-tagline{margin-left:41px}}

/* Approved green bead-atelier identity. */
.brand.brand-signature{width:248px;color:#285b45}.brand-signature .brand-logo{width:248px;aspect-ratio:2076/390}.brand-signature .brand-tagline{margin:0;align-self:center;text-align:center;color:#46634f}.footer-brand.brand-signature{width:264px}.footer-brand.brand-signature .brand-tagline{margin:0}.brand-signature:focus-visible{outline-color:#578266}
@media(max-width:700px){.site-header{padding-inline:20px}.site-header .brand.brand-signature{width:clamp(176px,calc(100vw - 144px),204px)}.site-header .brand-signature .brand-logo{width:100%}.footer-brand.brand-signature{width:232px}.footer-brand.brand-signature .brand-tagline{margin:0}}