/* ============================================================
   custom.css — "Write your own" (Custom Affirmation Bracelet)
   Builds on product.css. Energy colors arrive as --a/--b (chosen
   energy) and --ea/--eb (each energy button) from data.js.
   ============================================================ */

.custom__preview .gallery__main { background: radial-gradient(90% 90% at 50% 45%, color-mix(in srgb, var(--a) 18%, black), black); }
.custom__preview .gallery__main img { object-fit: contain; }
.custom__preview .info__hint { margin: .5rem 0 0; min-height: 0; }

.cstep {
  display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: .4em; border-radius: 50%;
  background: color-mix(in srgb, var(--a) 70%, var(--c-ink)); color: var(--c-white); font-size: .9em; letter-spacing: 0;
}

/* ---- your words ---- */
.words {
  width: 100%; box-sizing: border-box; padding: .9em 1em; border-radius: var(--radius);
  border: 1.5px solid var(--c-line); background: var(--c-white); color: var(--c-ink);
  font-family: var(--font-display); font-size: var(--step-1); font-style: italic;
  transition: border-color .2s, box-shadow .2s;
}
.words::placeholder { color: color-mix(in srgb, var(--c-ink-soft) 70%, transparent); font-size: .85em; }
.words:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 22%, transparent); }
.words__meta { display: flex; justify-content: space-between; gap: 1rem; margin: .45rem 0 0; font-size: var(--step--1); color: var(--c-ink-soft); }
.spark { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: color-mix(in srgb, var(--a) 70%, black); text-decoration: underline; text-underline-offset: 3px; text-align: left; }

/* ---- live engraving preview ---- */
.engrave { display: flex; justify-content: center; margin-top: var(--space-3); }
.engrave__plate {
  display: grid; place-items: center; text-align: center; box-sizing: border-box;
  background: linear-gradient(160deg, var(--c-silver) 0%, var(--c-white) 38%, var(--c-silver) 62%, var(--c-silver-deep) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 80%, transparent), inset 0 -2px 4px color-mix(in srgb, var(--c-silver-deep) 60%, transparent), var(--shadow-sm);
}
.engrave__plate--plate { width: min(100%, 360px); min-height: 84px; padding: .8rem 1.4rem; border-radius: 14px; }
.engrave__plate--round { width: 190px; height: 190px; padding: 1.6rem; border-radius: 50%; }
.engrave__card {
  display: grid; gap: .3rem; width: min(100%, 360px); padding: 1rem 1.25rem; box-sizing: border-box; text-align: center;
  border-radius: var(--radius); background: var(--c-white); border: 1px dashed var(--c-line);
}
.engrave__label { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--c-ink-soft); }
.engrave__text {
  font-family: var(--font-display); font-style: italic; line-height: 1.2; overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--c-ink) 80%, var(--c-silver-deep));
  text-shadow: 0 1px 0 color-mix(in srgb, var(--c-white) 70%, transparent);
}
.engrave__text--lg { font-size: var(--step-1); }
.engrave__text--md { font-size: var(--step-0); }
.engrave__text--sm { font-size: var(--step--1); }
.engrave__ph { color: color-mix(in srgb, var(--c-ink-soft) 70%, transparent); }

/* ---- energies (intention first, stone second) ---- */
.energies { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.energy {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-items: center;
  padding: .55rem .7rem; text-align: left; cursor: pointer; border-radius: 14px; font: inherit; color: var(--c-ink);
  background: var(--c-white); border: 1.5px solid var(--c-line); transition: border-color .2s, box-shadow .2s;
}
.energy:hover { border-color: var(--ea); }
.energy.is-active { border-color: var(--ea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ea) 25%, transparent); }
.energy:disabled { opacity: .45; cursor: not-allowed; }
.energy__dot { grid-row: span 2; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(145deg, var(--ea), var(--eb)); }
.energy__name { font-family: var(--font-display); font-size: var(--step-0); line-height: 1.1; }
.energy__stone { font-size: .76rem; color: var(--c-ink-soft); }

/* ---- spacer finish swatch ---- */
.finish { display: inline-block; width: .8em; height: .8em; margin-right: .45em; border-radius: 50%; vertical-align: -.05em; border: 1px solid color-mix(in srgb, var(--c-ink) 15%, transparent); }
.finish--silver { background: linear-gradient(145deg, var(--c-silver), var(--c-silver-deep)); }
.finish--gold { background: linear-gradient(145deg, var(--c-gold), var(--c-gold-deep)); }


/* ghosted "your words" for the Tree of Life charm (not engraved) */
.info__block.is-ghost .words { opacity: .5; cursor: not-allowed; background: transparent; border-style: dashed; }
.info__block.is-ghost .info__label { opacity: .5; }