/* ============================================================
   內頁共用元件(系列頁／內容頁／客製選單／聯絡頁)
============================================================ */

/* 麵包屑 */
.breadcrumb{
  padding:18px 0; font-size:12.5px; letter-spacing:.06em; color:var(--ink-faint);
}
.breadcrumb a{ color:var(--ink-faint); transition:color .2s; }
.breadcrumb a:hover{ color:var(--mint-deep); }
.breadcrumb .sep{ margin:0 8px; opacity:.5; }
.breadcrumb .current{ color:var(--ink); }

/* 次頁頁首橫幅 */
.page-hero{
  position:relative; width:min(1160px, 92vw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:48px;
  padding:64px 0 56px;
}
.page-hero::before{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:100vw; margin-left:-50vw; z-index:-1;
  background:linear-gradient(160deg, var(--paper-warm) 0%, var(--paper) 100%);
}
.page-hero .container{ width:100%; margin:0; }
.page-hero-media{
  order:2; position:relative; align-self:stretch; min-height:300px;
  border-radius:var(--radius-ui); overflow:hidden; box-shadow:var(--shadow-soft);
  background:linear-gradient(160deg, var(--mint-soft) 0%, var(--paper-warm) 100%);
}
.page-hero-media:empty{
  background:
    radial-gradient(circle at 28% 24%, var(--mint-line) 0%, transparent 58%),
    linear-gradient(160deg, var(--mint-soft) 0%, var(--paper-warm) 100%);
}
.page-hero-media:empty::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:34%; aspect-ratio:.8/1;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M20 30 L50 8 L80 30 L50 112 Z M20 30 L80 30 M20 30 L50 55 L80 30 M50 8 L35 30 M50 8 L65 30 M35 30 L50 55 L65 30' fill='none' stroke='%235ECFCF' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity:.55;
}
.page-hero-media picture{ position:absolute; inset:0; display:block; }
.page-hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero-scrim{ display:none; }

/* 商品詳情頁主圖：主圖(可滑鼠移入放大) + 下方 4 張小縮圖可點選切換 */
.pd-media-col{ position:relative; }
.pd-gallery{ position:relative; }
.pd-main{
  position:relative; overflow:hidden; border-radius:6px; aspect-ratio:4/3.1;
  box-shadow:var(--shadow-soft); cursor:zoom-in;
  background:linear-gradient(160deg,#F4FBFB,#E1F4EC);
}
.pd-main-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pd-main-fallback svg{ width:46%; max-width:200px; }
.pd-main img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s var(--ease); transform-origin:center;
}
.pd-main.is-zoomed img{ transform:scale(1.9); }
.pd-thumbs{ display:flex; gap:10px; margin-top:12px; }
.pd-thumb{
  flex:1; position:relative; aspect-ratio:1/1; border-radius:6px; overflow:hidden;
  border:2px solid transparent; padding:0; cursor:pointer; background:linear-gradient(160deg,#F4FBFB,#E1F4EC);
  transition:border-color .2s;
}
.pd-thumb-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pd-thumb-fallback svg{ width:52%; }
.pd-thumb picture{ position:absolute; inset:0; display:block; }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb:hover{ border-color:var(--mint-line); }
.pd-thumb.is-active{ border-color:var(--mint-deep); }
.page-hero-inner{ order:1; }
.page-hero .breadcrumb{ padding:0 0 18px; }
.page-hero .eyebrow{ color:var(--mint-deep); }
.page-hero h1{
  font-family:var(--serif); font-weight:600; color:var(--ink);
  font-size:clamp(28px, 3.4vw, 42px); letter-spacing:.06em; line-height:1.45; margin:16px 0 18px;
}
.page-hero p{ font-size:15px; color:var(--ink-soft); line-height:2; max-width:480px; }

/* 內文長文排版(品牌故事／DNA鑽石知識頁) */
.prose-section{ padding:90px 0; }
.prose{ max-width:760px; margin:0 auto; }
.prose h2{
  font-family:var(--serif); font-size:26px; font-weight:600; letter-spacing:.08em;
  line-height:1.6; margin:56px 0 20px;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:17px; font-weight:600; letter-spacing:.08em; margin:32px 0 12px; }
.prose p{ font-size:15px; color:var(--ink-soft); line-height:2.15; margin-bottom:18px; }
.prose ul{ margin:0 0 20px; }
.prose li{
  font-size:15px; color:var(--ink-soft); line-height:2.1; padding-left:22px; position:relative; margin-bottom:8px;
}
.prose li::before{
  content:""; position:absolute; left:4px; top:12px; width:5px; height:5px;
  background:var(--mint-deep); border-radius:50%;
}
.prose .callout{
  background:var(--mint-soft); border:1px solid var(--mint-line); border-radius:6px;
  padding:22px 26px; font-size:14px; color:#3A7A7A; line-height:1.95; margin:28px 0;
}
.prose figure{ margin:32px 0; }
.prose figure img{ border-radius:6px; width:100%; }
.prose figcaption{ font-size:12px; color:var(--ink-faint); text-align:center; margin-top:10px; letter-spacing:.06em; }

/* 系列頁：故事區 + 客製選單並排 */
.series-page-intro{ padding:80px 0 0; }
.series-page-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:44px 0 90px;
}
.series-page-media{
  border-radius:6px; overflow:hidden; box-shadow:var(--shadow-soft); aspect-ratio:4/3.1;
  position:relative;
}
.series-page-media img{ width:100%; height:100%; object-fit:cover; }
.series-page-media picture{ position:absolute; inset:0; display:block; }
.series-page-media picture img{ width:100%; height:100%; object-fit:cover; }
.series-page-copy p{ font-size:15px; color:var(--ink-soft); line-height:2.15; margin-bottom:16px; }
.series-related{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.series-related a{
  font-size:12.5px; letter-spacing:.1em; padding:9px 18px; border:1px solid var(--mint-line);
  border-radius:20px; color:var(--ink-soft); transition:all .2s;
}
.series-related a:hover{ background:var(--mint-soft); color:var(--ink); border-color:var(--mint-deep); }

/* LINE soft-CTA — series / jewelry / product pages (scoped; was homepage-only in home.css) */
.capture{ background:var(--ink); padding:96px 24px; text-align:center; }
.capture .rule{ width:40px; height:1px; background:var(--mint); margin:0 auto 30px; }
.capture h2{
  font-family:var(--serif); font-size:clamp(24px,3vw,30px); font-weight:500;
  color:#F7F4F1; letter-spacing:.13em; line-height:1.8; margin:0 0 22px;
}
.capture > p{
  font-size:14.5px; color:#B8AFA8; line-height:1.75; margin:0 0 40px;
}
.capture .hint{
  font-size:12px; color:#7A716B; line-height:1.6; margin:26px 0 0;
}

/* 客製選單(configurator) */
.configurator{ background:var(--paper-warm); padding:90px 0 100px; }
.configurator-inner{ display:grid; grid-template-columns:1fr 380px; gap:50px; align-items:flex-start; }
.cfg-group{ margin-bottom:38px; }
.cfg-group:last-child{ margin-bottom:0; }
.cfg-group-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.cfg-group-head h3{ font-size:15px; font-weight:600; letter-spacing:.12em; }
.cfg-group-head .cfg-note{ font-size:11.5px; color:var(--ink-faint); }
.cfg-options{ display:grid; grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:10px; }
.cfg-options--select{ display:block; }
.cfg-options--select .cfg-select-label{ display:block; font-size:13px; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:8px; }
.cfg-options--select select{
  width:100%; max-width:220px; padding:12px 14px; font-size:14px;
  border:1px solid var(--mint-line); border-radius:var(--radius-ui); background:#fff;
}
.cfg-opt{
  position:relative; height:100%;
}
.cfg-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.cfg-opt label{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:100%; height:100%; min-height:66px; box-sizing:border-box;
  padding:12px 14px; border:1px solid #E4DCD2; border-radius:6px;
  background:#fff; cursor:pointer; transition:all .2s; text-align:center;
}
.cfg-opt label .t{ font-size:13.5px; font-weight:500; letter-spacing:.05em; color:var(--ink); }
.cfg-opt label .s{ font-size:11px; color:var(--ink-faint); letter-spacing:.04em; }
.cfg-opt input:checked + label{
  border-color:var(--mint-deep); background:var(--mint-soft);
  box-shadow:0 0 0 1px var(--mint-deep) inset;
}
.cfg-opt input:focus-visible + label{ outline:2px solid var(--mint-deep); outline-offset:2px; }
.cfg-opt.is-disabled label{ opacity:.4; cursor:not-allowed; }
.cfg-swatch{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.12); }
.cfg-opt .dcut-group{ display:flex; align-items:center; gap:3px; }
.cfg-qty{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cfg-qty input[type="number"]{
  width:78px; font-family:inherit; font-size:15px; text-align:center; padding:10px 8px;
  border:1px solid #E4DCD2; border-radius:6px; background:#fff; color:var(--ink);
}
.cfg-qty input[type="number"]:focus{ outline:none; border-color:var(--mint-deep); }
.cfg-qty-hint{ font-size:11.5px; color:var(--ink-faint); line-height:1.7; max-width:420px; }
.cfg-engrave{ display:flex; flex-direction:column; gap:8px; max-width:420px; }
.cfg-engrave input[type="text"]{
  font-family:inherit; font-size:14px; letter-spacing:.06em; padding:12px 16px;
  border:1px solid #E4DCD2; border-radius:6px; background:#fff; color:var(--ink);
}
.cfg-engrave input[type="text"]:focus{ outline:none; border-color:var(--mint-deep); }
.cfg-engrave .cfg-count{ font-size:11.5px; color:var(--ink-faint); text-align:right; flex:none; }

.cfg-engrave-input-wrap{ display:flex; flex-direction:column; gap:6px; }
.cfg-engrave-input-meta{
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.cfg-engrave-input-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.cfg-engrave-action{
  font-family:inherit; font-size:11.5px; letter-spacing:.04em; padding:4px 10px;
  border:1px solid #E4DCD2; border-radius:999px; background:#fff; color:var(--ink-soft);
  cursor:pointer; transition:all .2s;
}
.cfg-engrave-action:hover:not(:disabled){ border-color:var(--mint-deep); color:var(--ink); background:var(--mint-soft); }
.cfg-engrave-action:disabled{ opacity:.45; cursor:not-allowed; }
.cfg-engrave-action--clear{ color:#9a4a4a; }
.cfg-engrave-action--clear:hover:not(:disabled){ border-color:#d8a0a0; background:#fff5f5; color:#7a3030; }

/* 刻字輸入框(可插入圖騰的 contenteditable 欄位) */
.cfg-engrave-input{
  min-height:46px; font-family:inherit; font-size:14px; letter-spacing:.08em; line-height:1.6;
  padding:12px 16px; border:1px solid #E4DCD2; border-radius:6px; background:#fff; color:var(--ink);
  outline:none; display:flex; align-items:center; flex-wrap:wrap; gap:2px;
}
.cfg-engrave-input:focus{ border-color:var(--mint-deep); }
.cfg-engrave-input:empty:before{ content:attr(data-placeholder); color:var(--ink-faint); }
.cfg-emblem-token{ display:inline-flex; vertical-align:middle; width:16px; height:16px; flex:none; color:inherit; }
.cfg-emblem-token svg{ width:100%; height:100%; }
/* Display surfaces (summary / chips / order specs) — same icons as typing */
.config-chip .cfg-emblem-token,
.cfg-summary-row .cfg-emblem-token,
.order-detail-value .cfg-emblem-token,
.girdle-engrave-display .cfg-emblem-token{
  width:1.05em; height:1.05em; margin:0 1px; vertical-align:-0.12em;
}
.config-chip--engrave{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px; }
.cfg-engrave-label{ font-size:11.5px; color:var(--ink-faint); margin:14px 0 8px; letter-spacing:.06em; }
.cfg-engrave-hint{ font-size:11px; color:var(--ink-faint); margin:6px 0 0; }
.cfg-emblems{ display:flex; flex-wrap:wrap; gap:8px; }
.cfg-emblem{
  width:36px; height:36px; border-radius:50%; border:1px solid #E4DCD2; background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; color:var(--ink-soft); padding:0;
}
.cfg-emblem svg{ width:18px; height:18px; }
.cfg-emblem:hover{ border-color:var(--mint-deep); color:var(--ink); background:var(--mint-soft); }
.cfg-engrave-preview{ position:relative; margin-top:18px; max-width:360px; }
.cfg-engrave-gem-picture{ display:block; width:100%; }
.cfg-engrave-gem{ width:100%; height:auto; display:block; }
.cfg-engrave-preview-text{
  position:absolute; left:8%; right:8%; top:49%; transform:translateY(-50%);
  text-align:center; font-size:14px; letter-spacing:.14em; color:#243038; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:3px; flex-wrap:wrap; pointer-events:none;
  text-shadow:0 0 4px rgba(255,255,255,.9), 0 1px 2px rgba(255,255,255,.6);
}
.cfg-engrave-preview-text .cfg-emblem-token{ width:16px; height:16px; }
.cfg-engrave-preview-empty{ font-size:11.5px; color:var(--ink-faint); letter-spacing:.06em; margin-top:8px; }

/* 客製選單：右側摘要卡 */
.cfg-summary{
  position:sticky; top:100px; background:#fff; border:1px solid #EFE9E3; border-radius:8px;
  padding:32px 28px; box-shadow:var(--shadow-soft);
}
.cfg-summary h3{ font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.1em; margin-bottom:20px; }
.cfg-summary-row{
  display:flex; justify-content:space-between; gap:12px; padding:10px 0;
  border-bottom:1px solid #F3EEE8; font-size:13px;
}
.cfg-summary-row .k{ color:var(--ink-faint); letter-spacing:.05em; flex:none; }
.cfg-summary-row .v{ color:var(--ink); text-align:right; font-weight:500; }
.cfg-summary-total{
  display:flex; justify-content:space-between; align-items:baseline; margin:20px 0 6px; padding-top:16px;
}
.cfg-summary-total .k{ font-size:13px; color:var(--ink-faint); letter-spacing:.08em; }
.cfg-summary-total .v{ font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:.04em; }
.cfg-disclaimer{ font-size:11.5px; color:var(--ink-faint); line-height:1.9; margin-bottom:22px; }
.cfg-breakdown{
  background:var(--paper-warm); border:1px solid #F0EBE5; border-radius:6px; padding:4px 14px;
}
.cfg-breakdown .cfg-summary-row{ font-size:12px; padding:9px 0; }
.cfg-breakdown .cfg-summary-row:last-child{ border-bottom:none; }
.cfg-breakdown .cfg-summary-row .v{ font-weight:400; }
.cfg-actions{ display:flex; flex-direction:column; gap:10px; }
.cfg-actions .btn{ text-align:center; }
.cfg-copy-hint{ font-size:11px; color:var(--mint-deep); text-align:center; min-height:16px; }

/* 珠寶頁：分區導覽 */
.jewelry-jump{ display:flex; flex-wrap:wrap; gap:10px; padding:36px 0 0; }
.jewelry-jump a{
  font-size:12.5px; letter-spacing:.1em; padding:10px 20px; border:1px solid var(--mint-line);
  border-radius:20px; color:var(--ink-soft); transition:all .2s;
}
.jewelry-jump a:hover{ background:var(--mint-soft); color:var(--ink); border-color:var(--mint-deep); }
.jewelry-block{ padding:70px 0; border-top:1px solid #F0EBE5; }
.jewelry-block:first-of-type{ border-top:none; }
.jewelry-block-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.jewelry-block-grid.is-rev{ direction:rtl; }
.jewelry-block-grid.is-rev > *{ direction:ltr; }
.jewelry-block-media{
  aspect-ratio:4/3.2; border-radius:6px; overflow:hidden;
  background:linear-gradient(160deg,#F6ECDD,#E9D8BC); display:flex; align-items:center; justify-content:center;
}
.jewelry-block-media svg{ width:38%; }

/* 聯絡頁 */
.contact-section{ padding:90px 0 100px; }
.contact-section--intro{
  padding:48px 0 24px;
}
.contact-section--intro .contact-grid{
  gap:28px;
  align-items:start;
}
.contact-section--intro .contact-card{
  padding:22px 20px;
}
.contact-section--intro .contact-card h3{
  margin-bottom:14px;
}
.contact-section--intro .contact-list li{
  padding:9px 0;
  font-size:13px;
}
.contact-section--intro .text-faint-lead{
  margin-top:12px;
  line-height:1.65;
}
.contact-section--intro .mt-lg{
  margin-top:14px;
}
.contact-section--intro .contact-map iframe{
  min-height:0;
  height:200px;
}
@media (min-width:901px){
  .contact-section--intro .contact-map iframe{ height:240px; }
}
.contact-scroll-hint{
  margin:18px 0 0;
  text-align:center;
}
.contact-scroll-hint a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border:1px solid #EFE9E3;
  border-radius:999px;
  background:#fff;
  color:var(--ink-soft);
  font-size:13px;
  letter-spacing:.06em;
  text-decoration:none;
  box-shadow:var(--shadow-soft);
  transition:color .2s, border-color .2s;
}
.contact-scroll-hint a:hover{
  color:var(--mint-deep);
  border-color:color-mix(in srgb, var(--mint-deep) 45%, #EFE9E3);
}
#view-contact-form{
  scroll-margin-top:96px;
}
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact-card{ background:#fff; border:1px solid #EFE9E3; border-radius:8px; padding:36px 32px; box-shadow:var(--shadow-soft); }
.contact-card h3{ font-size:15px; font-weight:600; letter-spacing:.12em; margin-bottom:22px; }
.contact-list li{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid #F3EEE8; font-size:14px; }
.contact-list li:last-child{ border-bottom:none; }
.contact-list .k{ flex:none; width:64px; color:var(--ink-faint); letter-spacing:.06em; }
.contact-list .v a{ color:var(--ink); transition:color .2s; }
.contact-list .v a:hover{ color:var(--mint-deep); }
.contact-map{ border-radius:8px; overflow:hidden; border:1px solid #EFE9E3; box-shadow:var(--shadow-soft); }
.contact-map iframe{ width:100%; height:100%; min-height:360px; border:0; display:block; }

.contact-form-card{ margin-top:56px; }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:13px; color:var(--ink-soft); letter-spacing:.04em; margin-bottom:8px; }
.form-field .req{ color:#C0574A; }
.form-field input, .form-field textarea{
  width:100%; font-family:inherit; font-size:14px; padding:11px 14px;
  border:1px solid #E3DCD3; border-radius:8px; background:#FBFAF8; color:var(--ink);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.form-field input:focus, .form-field textarea:focus{
  outline:none; border-color:var(--mint-deep); background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mint-deep) 22%, transparent);
}
.form-field textarea{ resize:vertical; min-height:96px; }

/* Contact form panel — ContactSection-inspired card, DNA mint */
.contact-form-panel{
  max-width:640px; margin:0 auto 24px;
  padding:28px 24px 32px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--mint-line, #DCF2F2);
  border-radius:12px;
  box-shadow:var(--shadow-soft, 0 8px 28px rgba(43,35,32,.06));
}
@media (min-width:768px){
  .contact-form-panel{ padding:36px 40px 40px; }
}
.contact-form-panel__title{
  font-family:var(--serif); font-size:clamp(22px, 2.4vw, 28px);
  font-weight:600; letter-spacing:.04em; color:var(--ink); margin:0 0 10px; line-height:1.3;
}
.contact-form-panel__lead{
  margin:0 0 22px; font-size:14px; line-height:1.7; color:var(--ink-soft);
}
.contact-form-panel__reach{ margin-bottom:8px; }
.contact-form-panel__muted{
  margin:0 0 8px; font-size:13px; color:var(--ink-faint); letter-spacing:.04em;
}
.contact-form-panel__email{
  display:inline-block; font-size:16px; font-weight:600; color:var(--mint-deep);
  text-decoration:none; letter-spacing:.04em;
}
.contact-form-panel__email:hover{ color:var(--ink); text-decoration:underline; }
.contact-form-panel__socials{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px;
}
.contact-form-panel__or{ font-size:12px; color:var(--ink-faint); letter-spacing:.08em; }
.contact-form-panel__social{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  border:none; border-radius:50%;
  color:#fff; text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.contact-form-panel__social svg{
  width:22px; height:22px; display:block;
}
.contact-form-panel__social--line{ background:#06c755; }
.contact-form-panel__social--fb{ background:#1877f2; }
.contact-form-panel__social:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  filter:brightness(1.05);
}
.contact-form-panel__social:active{ transform:scale(.96); }
.contact-form-panel__social:focus-visible{
  outline:2px solid var(--mint-deep, #5ecfcf);
  outline-offset:3px;
}
.contact-form-panel__rule{
  margin:22px 0; border:0; border-top:1px solid #EFE9E3;
}
.contact-form-panel__form .contact-form-panel__muted{ margin-bottom:14px; }
.contact-form-panel__grid{
  display:grid; grid-template-columns:1fr; gap:0 16px;
}
@media (min-width:640px){
  .contact-form-panel__grid{ grid-template-columns:1fr 1fr; }
}
.contact-form-panel__submit{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:44px; margin-top:6px;
  border:none; border-radius:8px; cursor:pointer;
  background:var(--mint-deep); color:var(--ink);
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.06em;
  box-shadow:0 1px 2px rgba(43,35,32,.08);
  transition:background .15s, transform .15s, box-shadow .15s;
}
.contact-form-panel__submit:hover{
  background:var(--mint); transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(94,207,207,.28);
}
.contact-form-panel__submit:disabled{
  opacity:.65; cursor:not-allowed; transform:none;
}
.contact-form-panel .form-msg{ margin-top:14px; font-size:13px; }
.contact-form-panel .form-msg.is-ok{ color:#2f7a4a; }
.contact-form-panel .form-msg.is-err{ color:#C0574A; }

.email-split{
  display:flex; align-items:stretch;
  border:1px solid #E3DCD3; border-radius:6px; background:#FBFAF8;
  transition:border-color .2s, background .2s;
}
.email-split:focus-within{ border-color:var(--mint-deep); background:#fff; }
.email-split input[type="text"]{
  flex:1; min-width:0; border:none; border-radius:0; background:transparent;
}
.email-split input[type="text"]:focus{ background:transparent; }
.email-at{
  display:flex; align-items:center; padding:0 4px;
  font-size:14px; color:var(--ink-soft); user-select:none;
}
.email-split select{
  flex:0 1 auto; max-width:52%; min-width:108px;
  border:none; border-left:1px solid #E3DCD3; border-radius:0 6px 6px 0;
  background:transparent; padding:11px 28px 11px 10px;
  font-family:inherit; font-size:13px; color:var(--ink); cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a524e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.email-split select:focus{ outline:none; }
.email-domain-custom{ margin-top:8px; }
.form-msg{ margin-top:14px; font-size:13px; letter-spacing:.04em; min-height:1.4em; }
.form-msg.is-ok{ color:#3E8F63; }
.form-msg.is-err{ color:#C0574A; }
#contactSubmitBtn[disabled]{ opacity:.6; cursor:not-allowed; }

/* 線上估價需求彈窗（客製試算頁共用） */
.qr-modal-overlay{
  position:fixed; inset:0; background:rgba(20,16,13,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:200; opacity:0; pointer-events:none; transition:opacity .2s;
}
.qr-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.qr-modal{
  background:#fff; border-radius:10px; max-width:440px; width:100%;
  max-height:90vh; overflow-y:auto; padding:32px 30px; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.qr-modal h3{ font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.08em; margin-bottom:8px; }
.qr-modal-sub{ font-size:13px; color:var(--ink-faint); line-height:1.8; margin-bottom:18px; }
.qr-modal-close{
  position:absolute; top:16px; right:16px; font-size:22px; line-height:1; color:var(--ink-faint);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.qr-modal-close:hover{ background:#F3EEE8; color:var(--ink); }
.qr-modal-summary{ background:var(--mint-soft); border:1px solid var(--mint-line); border-radius:8px; padding:14px 16px; margin-bottom:22px; }
.qr-summary-row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:5px 0; }
.qr-summary-row .k{ color:var(--ink-faint); flex:none; }
.qr-summary-row .v{ text-align:right; font-weight:500; }

/* 會員登入／註冊／查詢進度頁 */
.auth-section{ padding:90px 0 100px; display:flex; justify-content:center; }
.auth-card{ background:#fff; border:1px solid #EFE9E3; border-radius:8px; padding:40px 36px; box-shadow:var(--shadow-soft); width:100%; max-width:440px; }
.auth-card h1{ font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:.1em; margin-bottom:10px; }
.auth-card .sub{ font-size:13px; color:var(--ink-faint); line-height:1.8; margin-bottom:26px; }
.auth-card .switch-link{ margin-top:20px; font-size:13px; text-align:center; color:var(--ink-soft); }
.auth-card .switch-link a{ color:var(--mint-deep); font-weight:600; }
.auth-card .btn{ width:100%; text-align:center; padding:12px; }
.auth-card .btn-text{ background:none; border:none; padding:0; font-size:12.5px; color:var(--ink-faint); text-decoration:underline; cursor:pointer; }

.order-result{ margin-top:26px; }
.order-result-card{ background:var(--mint-soft); border:1px solid var(--mint-line); border-radius:8px; padding:22px 24px; }
.order-result-card .status-badge{ display:inline-block; background:var(--mint); color:var(--ink); font-size:12px; letter-spacing:.08em; padding:5px 14px; border-radius:20px; margin-bottom:12px; }
.order-result-card .row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:6px 0; border-bottom:1px solid var(--mint-line); }
.order-result-card .row:last-child{ border-bottom:none; }
.order-result-card .row .k{ color:#3A7A7A; flex:none; }

.orders-list{ margin-top:10px; }
.order-row{ border:1px solid #EFE9E3; border-radius:8px; padding:16px 18px; margin-bottom:12px; }
.order-row .num{ font-weight:600; letter-spacing:.04em; }
.order-row .status{ font-size:12px; color:var(--mint-deep); margin-top:4px; }
.account-section{
  padding:72px 0 100px;
  background: linear-gradient(180deg, #f4f5f7 0%, #eef0f3 100%);
}
.account-grid{
  display:grid;
  grid-template-columns:minmax(280px,min(100%,64rem));
  gap:48px;
  justify-content:center;
}
.account-react-root{ width:100%; }

.account-profile-card .account-profile-form{
  display:flex; flex-direction:column; gap:12px; margin-bottom:18px;
}
.account-field{
  display:flex; flex-direction:column; gap:6px;
  font-size:12px; color:var(--ink-faint); letter-spacing:.04em;
}
.account-field-row{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
@media (max-width:420px){
  .account-field-row{ grid-template-columns:1fr; }
}
.account-field input,
.account-field select{
  width:100%; font-family:inherit; font-size:14px; color:var(--ink);
  padding:10px 12px; border:1px solid #DDD5CC; border-radius:6px; background:#fff;
}
.account-field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232B2320' d='M1.2 1.2L6 6l4.8-4.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px;
  padding-right:36px; cursor:pointer;
}
.account-field select:disabled{
  opacity:.65; cursor:not-allowed; background-color:#f7f5f2;
}
.account-field input:focus,
.account-field select:focus{
  outline:none; border-color:var(--mint-deep, #5ecfcf);
}
.account-field--readonly .v{
  font-size:14px; font-weight:500; color:var(--ink); word-break:break-all;
}
.account-address-heading{
  margin:8px 0 0; font-size:13px; font-weight:600; color:var(--ink); letter-spacing:.06em;
}
.account-address-hint{
  margin:0; font-size:11px; color:var(--ink-faint); line-height:1.5;
}
.account-save-btn{ width:100%; margin-top:4px; }
.account-profile-msg{
  margin:0; font-size:13px; line-height:1.5;
}
.account-profile-msg.is-ok{ color:#3e8e62; }
.account-profile-msg.is-err{ color:#c0392b; }
.account-profile-msg.is-info{ color:var(--ink-soft); }
.account-complete-banner{
  margin:0 0 16px; padding:14px 16px; border-radius:8px;
  border:1px solid #d8ece8; background:#f3fbf9;
}
.account-complete-banner__text{
  margin:0 0 10px; font-size:13px; line-height:1.55; color:var(--ink-soft);
}
.account-complete-banner__btn{ width:100%; }
.account-profile-card .cfg-actions{
  display:flex; flex-wrap:wrap; gap:8px;
}
.account-profile-card .cfg-actions .btn{ flex:1 1 auto; text-align:center; }

/* 客戶見證頁：圖片主導 masonry（取代已退役 React stories island） */
.stories-page{
  background:#f7f4f1;
  padding-top:32px;
  padding-bottom:0;
}
.stories-page__empty{
  margin:24px 0 40px;
  font-size:14px;
  color:var(--ink-faint);
}
.stories-page-masonry{
  column-count:1;
  column-gap:1rem;
  padding:8px 0 48px;
}
.stories-page-card{
  break-inside:avoid;
  position:relative;
  overflow:hidden;
  margin:0 0 1rem;
  border-radius:1rem;
  background:#2a2438;
  transition:transform .3s ease;
}
.stories-page-card:hover{ transform:scale(1.02); }
.stories-page-card__media{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  aspect-ratio:4/5;
}
.stories-page-card__media--fallback{
  background:linear-gradient(145deg, rgba(142,237,240,.4), #2a1845);
}
.stories-page-card[data-aspect="0"] .stories-page-card__media{ aspect-ratio:4/5; }
.stories-page-card[data-aspect="1"] .stories-page-card__media{ aspect-ratio:3/4; }
.stories-page-card[data-aspect="2"] .stories-page-card__media{ aspect-ratio:1/1; }
.stories-page-card[data-aspect="3"] .stories-page-card__media{ aspect-ratio:2/3; }
.stories-page-card[data-aspect="4"] .stories-page-card__media{ aspect-ratio:5/6; }
.stories-page-card[data-aspect="5"] .stories-page-card__media{ aspect-ratio:3/5; }
.stories-page-card__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 45%, transparent 100%);
  pointer-events:none;
}
.stories-page-card__copy{
  position:absolute; top:0; left:0; right:0;
  padding:1rem;
  color:#fff;
}
.stories-page-card__name{
  display:block;
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stories-page-card__role{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:rgba(255,255,255,.75);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stories-page-card__quote{
  margin:.55rem 0 0;
  font-size:12px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}
.stories-page-cta{
  border-top:1px solid #E3DCD3;
  background:#fdfcfa;
  margin:0 -16px;
  padding:48px 16px;
  text-align:center;
}
.stories-page-cta__title{
  margin:0;
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  letter-spacing:.08em;
  color:#2a2438;
}
.stories-page-cta__lead{
  margin:12px auto 0;
  max-width:28em;
  font-size:13.5px;
  line-height:1.7;
  color:#8a817b;
}
.stories-page-cta__btn{
  display:inline-block;
  margin-top:22px;
  padding:12px 28px;
  border-radius:999px;
  background:#5ecfcf;
  color:#2b2320;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.1em;
  text-decoration:none;
  transition:background .2s;
}
.stories-page-cta__btn:hover{ background:#7edede; }
@media (min-width:640px){
  .stories-page-masonry{ column-count:2; column-gap:1rem; }
  .stories-page-cta{ margin:0; border-radius:0; }
}
@media (min-width:1024px){
  .stories-page-masonry{ column-count:3; }
}
@media (min-width:1280px){
  .stories-page-masonry{ column-count:4; }
}
.stories-note{
  background:var(--mint-soft); border:1px solid var(--mint-line); border-radius:8px;
  padding:20px 26px; font-size:13px; color:#3A7A7A; line-height:1.9; margin-bottom:10px;
}

/* diamonds.html 系列總覽頁的價格快覽表 */
.diamond-hub-cta{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  background:var(--ink); border-radius:8px; padding:40px 44px; margin-top:20px;
}
.diamond-hub-cta p{ color:#E5DFD8; font-size:14px; max-width:480px; }
.diamond-hub-cta h3{ font-family:var(--serif); color:#fff; font-size:19px; letter-spacing:.08em; margin-bottom:10px; }

/* price.html — Cta4-style planning strip (compact) */
.price-page-top{ padding-top:4px; }
.price-page__h1{ margin:0 0 20px; font-size:clamp(28px,4vw,40px); }
.price-page-body{ padding-bottom:80px; }
.price-cta{ margin-bottom:20px; }
.price-cta__card{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:16px;
  background:var(--paper-warm); border:1px solid var(--mint-line); border-radius:var(--radius-ui);
  padding:18px 20px;
}
@media (min-width:768px){
  .price-cta__card{ flex-direction:row; align-items:center; gap:24px; padding:20px 28px; }
  .price-cta__main{ flex:1 1 55%; max-width:55%; }
  .price-cta__list{ flex:0 1 38%; max-width:38%; }
}
.price-cta__title{
  font-family:var(--serif); font-weight:600; font-size:clamp(17px, 1.8vw, 20px);
  letter-spacing:.05em; color:var(--ink); line-height:1.35; margin:0 0 4px;
}
.price-cta__desc{ font-size:13px; line-height:1.65; color:var(--ink-soft); margin:0; max-width:32em; }
.price-cta__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px;
}
.price-cta__btn-wrap{
  position:relative; display:inline-block; isolation:isolate;
  border-radius:var(--radius-ui); overflow:hidden;
}
.price-cta__glow{
  position:absolute; inset:-3px; border-radius:var(--radius-ui); pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%, #FF5733, #33FF57, #3357FF, #F1C40F, #FF5733);
  filter:blur(10px); opacity:.75; transform:scale(.9);
  animation:price-cta-glow 3s linear infinite;
}
@keyframes price-cta-glow{
  0%{ transform:scale(.9) rotate(0deg); filter:blur(10px) hue-rotate(0deg); }
  100%{ transform:scale(.9) rotate(360deg); filter:blur(10px) hue-rotate(30deg); }
}
.price-cta__btn{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--radius-ui);
  background:#B7F4F4; color:var(--ink);
  font-size:13px; font-weight:500; letter-spacing:.06em; text-decoration:none;
  outline:1px solid var(--mint-line);
  transition:background .2s, transform .2s;
  border:none;
}
.price-cta__btn:hover{
  background:var(--mint); color:var(--ink); transform:translateY(-1px);
}
.price-cta__arrow{ width:14px; height:14px; flex-shrink:0; }
.price-cta__link{
  display:inline-block; font-size:12px; line-height:1;
  color:var(--ink-faint); text-decoration:underline;
}
.price-cta__link:hover{ color:var(--ink); }
.price-cta__list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;
  font-size:12.5px; font-weight:500; color:var(--ink);
}
.price-cta__list li{ display:flex; align-items:center; gap:10px; line-height:1.4; }
.price-cta__list svg{
  width:13px; height:13px; flex-shrink:0; color:var(--mint-deep); stroke:var(--mint-deep);
}

/* price.html layout — was in home.css; home.css only loads on page-home */
.price-page .pricing{ padding:120px 0; }
.price-page .pricing--solo{ padding-top:80px; }
.price-page .price-block--shapes{ margin-bottom:0; }
.price-page .pricing-inner{
  display:grid; grid-template-columns:1fr 1.1fr; gap:70px; align-items:center;
}
.price-page .price-table{
  border:1px solid #EFE9E3; border-radius:var(--radius-ui); overflow:hidden;
  box-shadow:var(--shadow-soft); background:#fff;
}
.price-page .price-row{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:24px 34px; border-bottom:1px solid #F3EEE8;
}
.price-page .price-row:last-child{ border-bottom:none; }
.price-page .price-row.hl{ background:var(--mint-soft); }
.price-page .price-row .ct{ font-family:var(--serif); font-size:17px; letter-spacing:.1em; }
.price-page .price-row .ct small{
  font-size:11.5px; color:var(--ink-faint); display:block; letter-spacing:.14em;
}
.price-page .price-row .amt{ font-family:var(--serif); font-size:19px; letter-spacing:.05em; }
.price-page .price-row .amt small{
  font-size:11.5px; color:var(--ink-faint); margin-left:4px;
}
.price-page .price-notes{
  margin-top:22px; font-size:12.5px; color:var(--ink-faint); line-height:2.1;
}
.price-page .price-detail{ padding:0 0 100px; }
.price-page .price-block{ margin-bottom:76px; }
.price-page .price-block:last-child{ margin-bottom:0; }
.price-page .price-block-head{ max-width:640px; margin-bottom:32px; }
.price-page .price-block-head h2{
  font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:.08em; margin-bottom:12px;
}
.price-page .price-block-head p{ font-size:14px; color:var(--ink-soft); line-height:2; }
.price-page .price-tabset{ position:relative; }
.price-page .price-tab-radio{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}
.price-page .price-tab-labels{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.price-page .price-tab{
  display:flex; align-items:center; gap:10px; padding:12px 20px 12px 14px;
  border:1px solid #E4DCD2; border-radius:30px; background:#fff; cursor:pointer;
  font-size:13.5px; letter-spacing:.06em; color:var(--ink-soft); transition:all .2s;
}
.price-page .price-tab .swatch{
  width:24px; height:24px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.1);
}
.price-page .sw-white{ background:radial-gradient(circle at 35% 30%, #fff, #E9F7F7 60%, #CFEFEF); }
.price-page .sw-fancy{ background:conic-gradient(from 200deg, #8FB6E6, #E4C95C, #E39BB0, #8FB6E6); }
.price-page .price-panel{ display:none; }
.price-page .dcut{ width:22px; height:22px; flex:none; display:block; }
.price-page .price-tab .dcut-group{ display:flex; align-items:center; }
.price-page .price-tab .dcut-group .dcut{ margin-left:-9px; }
.price-page .price-tab .dcut-group .dcut:first-child{ margin-left:0; }
.price-page #ptWhite:checked ~ .price-tab-labels label[for="ptWhite"],
.price-page #ptFancy:checked ~ .price-tab-labels label[for="ptFancy"],
.price-page #ptmWhite:checked ~ .price-tab-labels label[for="ptmWhite"],
.price-page #ptmFancy:checked ~ .price-tab-labels label[for="ptmFancy"]{
  border-color:var(--mint-deep); background:var(--mint-soft); color:var(--ink);
}
.price-page #ptWhite:checked ~ .panel-white,
.price-page #ptFancy:checked ~ .panel-fancy,
.price-page #ptmWhite:checked ~ .panel-white,
.price-page #ptmFancy:checked ~ .panel-fancy{ display:block; }
.price-page .price-scroll{
  overflow-x:auto; border:1px solid #EFE9E3; border-radius:6px; box-shadow:var(--shadow-soft);
}
.price-page table.price-full-table{
  width:100%; border-collapse:collapse; min-width:480px; background:#fff;
}
.price-page table.price-full-table th{
  text-align:left; font-size:11px; letter-spacing:.12em; color:var(--ink-faint); font-weight:500;
  padding:8px 12px; background:#FBF7F2; border-bottom:1px solid #EFE9E3; white-space:nowrap;
}
.price-page table.price-full-table td{
  padding:8px 12px; font-size:13px; border-bottom:1px solid #F3EEE8; white-space:nowrap;
}
.price-page table.price-full-table tr:last-child td{ border-bottom:none; }
.price-page table.price-full-table tr:hover td{ background:var(--mint-soft); }
.price-page table.price-full-table td.amt{
  font-family:var(--serif); font-size:14px; letter-spacing:.03em;
}
.price-page table.price-full-table td.na{ color:var(--ink-faint); }
.price-page table.price-full-table td.na--mark{
  text-align:center; font-size:15px; letter-spacing:0; color:#C4BAB2;
}
.price-page table.price-full-table tr.is-note td{
  background:#FBF7F2; font-size:12.5px; color:var(--ink-faint);
}
.price-page .price-col-label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.05em; font-weight:500; white-space:nowrap;
}
.price-page .price-col-label .dcut-group{ display:inline-flex; align-items:center; }
.price-page .price-col-label .dcut-group .dcut{ margin-left:-6px; }
.price-page .price-col-label .dcut-group .dcut:first-child{ margin-left:0; }
.price-page table.price-full-table th.price-col-head{ text-align:left; vertical-align:bottom; }
.price-page table.price-full-table--dual th:nth-child(n+3),
.price-page table.price-full-table--dual td:nth-child(n+3){ text-align:right; }
.price-page table.price-full-table--multi-xpose th,
.price-page table.price-full-table--multi-xpose td{ text-align:center; }
.price-page table.price-full-table--multi-xpose th.ct-range,
.price-page table.price-full-table--multi-xpose .ct-range{
  display:block; font-size:10.5px; font-weight:400; letter-spacing:.06em;
  color:var(--ink-faint); margin-top:2px;
}
.price-page table.price-full-table--multi-xpose th.price-row-head,
.price-page table.price-full-table--multi-xpose th.price-row-count{ padding:6px 8px; }
.price-page table.price-full-table--multi-xpose th.price-row-head{
  vertical-align:middle;
  background:#FBF7F2; width:1%; min-width:max-content;
  padding-top:8px; padding-right:6px;
}
.price-page table.price-full-table--multi-xpose th.price-row-head .price-col-label{
  white-space:nowrap; line-height:1.25; gap:4px; font-size:10.5px;
}
.price-page table.price-full-table--multi-xpose th.price-row-head .dcut{ width:18px; height:18px; }
.price-page table.price-full-table--multi-xpose th.price-row-head .dcut-group .dcut{ margin-left:-5px; }
.price-page table.price-full-table--multi-xpose th.price-row-count{
  font-weight:500; letter-spacing:.05em; white-space:nowrap;
  background:#FBF7F2; font-size:11.5px; width:1%; min-width:2.4em;
  padding-left:6px; padding-right:8px;
}
.price-page table.price-full-table--multi-xpose thead th[colspan="2"]{
  width:1%; padding:6px 4px;
}
.price-page table.price-full-table--multi-xpose td.rule{
  font-size:11.5px; color:var(--ink-faint); white-space:nowrap;
}
.price-page table.price-full-table--multi-xpose tbody tr:nth-child(3) td,
.price-page table.price-full-table--multi-xpose tbody tr:nth-child(3) th{
  border-bottom:2px solid #EFE9E3;
}
.price-page .shape-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; }
.price-page .shape-card{
  background:#fff; border:1px solid #EFE9E3; border-radius:8px; padding:20px 12px 16px;
  text-align:center; transition:all .2s;
}
.price-page .shape-card:hover{ border-color:var(--mint-deep); box-shadow:var(--shadow-soft); }
.price-page .shape-card .icon{
  width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:var(--mint-soft);
  display:flex; align-items:center; justify-content:center;
}
.price-page .shape-card .icon svg{ width:28px; height:28px; }
.price-page .shape-card .name{
  font-size:13px; font-weight:500; letter-spacing:.05em; margin-bottom:0;
}
.price-page .shape-card .name small{
  display:block; font-size:10.5px; color:var(--ink-faint); font-weight:400; letter-spacing:.06em;
}
.price-page .shape-card .tag{
  display:block; font-size:11px; letter-spacing:.12em; color:var(--ink-faint);
  margin-top:10px; padding-top:10px; border-top:1px solid #EDE6DE;
}
.price-page .shape-card .tag.is-base{
  color:var(--mint-deep); font-weight:600; letter-spacing:.14em;
  border-top-color:color-mix(in srgb, var(--mint-deep) 45%, #EDE6DE);
}
.price-page .shape-card--base{
  border-color:var(--mint-deep);
  background:color-mix(in srgb, var(--mint-soft) 38%, #fff);
}
.price-page .shape-card .tag.is-up{
  font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:.05em;
  color:#B85C42; line-height:1.2;
}
.price-page .shape-marquee-wrap{
  margin:0 -20px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.price-page .shape-marquee{
  overflow:hidden; cursor:grab; user-select:none; touch-action:pan-y;
  padding:8px 0 12px;
}
.price-page .shape-marquee.is-dragging{ cursor:grabbing; }
.price-page .shape-marquee-inner{ display:flex; width:max-content; will-change:transform; }
.price-page .shape-marquee-row{ display:flex; gap:14px; padding:0 20px; }
.price-page .shape-marquee .shape-card{
  flex:0 0 128px; min-height:152px; padding:18px 10px 14px;
}
.price-page .shape-marquee .shape-card .icon{ width:52px; height:52px; }
.price-page .shape-marquee .shape-card .icon svg{ width:26px; height:26px; }
.price-page .diamond-shapes{ padding:56px 0 72px; }
.price-page .diamond-shapes--solo{ padding:80px 0 96px; min-height:calc(100vh - 120px); }
.price-page .diamond-shapes-head{ margin-bottom:28px; }
.price-page .diamond-shapes-head h1,
.price-page .diamond-shapes-head h2{
  font-family:var(--serif); font-size:clamp(20px, 2.8vw, 26px); font-weight:600;
  letter-spacing:.08em; margin:8px 0 12px;
}
.price-page .diamond-shapes-head p{
  font-size:14px; color:var(--ink-soft); line-height:1.95; max-width:640px;
}
.price-page .shape-pricing-legend{
  margin-top:22px; font-size:12.5px; color:var(--ink-faint); text-align:center; line-height:1.8;
}
.price-page .shape-pricing-legend a{
  color:var(--mint-deep); text-decoration:underline; text-underline-offset:2px;
}

@media (max-width:768px){
  .price-page .pricing-inner{ grid-template-columns:1fr; gap:46px; }
  .price-page .pricing{ padding:80px 0; }
  .price-page .shape-grid{ grid-template-columns:repeat(3, 1fr); }
  .price-page .price-tab-labels{ flex-direction:column; align-items:flex-start; }
}

/* Quote CTAs — ButtonColorful + glow spin (DNA mint first) */
.price-quote-actions{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:1.25rem;
}
.dna-btn-colorful{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 16px; overflow:hidden; isolation:isolate;
  border-radius:8px; border:none; text-decoration:none;
  background:var(--mint-deep); color:var(--ink);
  font-size:14px; font-weight:500; line-height:1; white-space:nowrap;
  transition:transform .2s, box-shadow .2s;
  outline-offset:2px;
}
.dna-btn-colorful:focus-visible{
  outline:2px solid color-mix(in srgb, var(--mint-deep) 70%, transparent);
}
.dna-btn-colorful:hover{
  transform:translateY(-1px);
}
.dna-btn-colorful__glow{
  position:absolute; inset:-4px; border-radius:10px; pointer-events:none; z-index:0;
  background:conic-gradient(from 0deg at 50% 50%,
    var(--mint-deep), var(--mint), #7ed4e8, #b7f4f4, var(--mint-deep));
  filter:blur(10px); opacity:.75; transform:scale(.92);
  animation:dna-btn-colorful-glow 3s linear infinite;
  transition:opacity .5s;
}
.dna-btn-colorful:hover .dna-btn-colorful__glow{
  opacity:1;
}
@keyframes dna-btn-colorful-glow{
  0%{ transform:scale(.92) rotate(0deg); filter:blur(10px) hue-rotate(0deg); }
  100%{ transform:scale(.92) rotate(360deg); filter:blur(10px) hue-rotate(25deg); }
}
.dna-btn-colorful__content{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--ink);
}
.dna-btn-colorful__icon{
  width:14px; height:14px; flex-shrink:0; opacity:.75; color:var(--ink);
  transition:transform .2s, opacity .2s;
}
.dna-btn-colorful:hover .dna-btn-colorful__icon{
  transform:translate(2px, -2px); opacity:1;
}

.price-reference {
  margin-top: 0;
  margin-bottom: 16px;
  padding: 28px 24px 32px;
  background: var(--paper-warm);
  border: 1px solid var(--mint-line);
  border-radius: 16px;
}

/* React /price.html — no legacy card frame (Tailwind layout owns chrome) */
.price-detail [data-price-root] .price-reference {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.price-reference-head {
  text-align: center;
  margin-bottom: 24px;
}

.price-reference-title {
  font-family: var(--serif);
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 8px 0 10px;
}

.price-reference-lead {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.95;
  max-width: 480px;
  margin: 0 auto;
}

.price-ref-snapshot {
  max-width: 480px;
  margin: 0 auto 24px;
  border: 1px solid #efe9e3;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.price-ref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #f0ebe4;
}

.price-ref-row:last-child { border-bottom: none; }
.price-ref-row--hl { background: var(--mint-soft); }

.price-ref-row__ct {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.06em;
}

.price-ref-row__ct small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.price-ref-row__amt {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.price-ref-panel {
  max-width: 720px;
  margin: 0 auto 12px;
  border: 1px solid #efe9e3;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.price-ref-panel summary {
  padding: 16px 20px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;
}

.price-ref-panel summary::-webkit-details-marker { display: none; }

.price-ref-panel[open] summary {
  border-bottom: 1px solid #efe9e3;
  background: var(--paper-warm);
}

.price-ref-tabs { padding: 16px 16px 20px; }

.price-ref-note,
.price-ref-faq-link {
  padding: 0 16px 16px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.9;
}

.price-ref-rules {
  margin: 0;
  padding: 0 16px 8px 32px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.95;
}

.price-reference-foot { text-align: center; margin-top: 24px; }

.price-ref-scroll { overflow-x: auto; }

#prSingleWhite:checked ~ .price-tab-labels label[for="prSingleWhite"],
#prSingleFancy:checked ~ .price-tab-labels label[for="prSingleFancy"],
#prMultiWhite:checked ~ .price-tab-labels label[for="prMultiWhite"],
#prMultiFancy:checked ~ .price-tab-labels label[for="prMultiFancy"] {
  border-color: var(--mint-deep);
  background: var(--mint-soft);
  color: var(--ink);
}

#prSingleWhite:checked ~ .panel-white,
#prSingleFancy:checked ~ .panel-fancy,
#prMultiWhite:checked ~ .panel-white,
#prMultiFancy:checked ~ .panel-fancy {
  display: block;
}

.hidden { display: none !important; }

/* Jewelry fragment utilities (shared across app/views/fragments) */
.section-title--mb-lg { margin-bottom: 20px; }
.section-title--mb-sm { margin-bottom: 10px; }
.section-lead--mb-sm { margin-bottom: 10px; }
.cfg-note--warning { color: #B5654C; margin-top: 10px; }
.cfg-swatch--yellow { background: #E4C77A; }
.cfg-swatch--white { background: #E5E7EA; }
.cfg-swatch--rose { background: #E6B8AC; }
.sum-diamond-price {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 14px;
}
.sum-mounting-note { margin: 12px 0 16px; }
.series-page-media--mint {
  background: linear-gradient(160deg, #F4FBFB, #E1F4EC);
}
.series-page-media__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.series-page-media__icon svg { width: 46%; max-width: 220px; }
.series--compact { padding: 20px 0 110px; }
.series-lead-narrow { max-width: 360px; font-size: 13px; color: var(--ink-soft); line-height: 1.9; }
.price-detail--offset { padding-top: 70px; }
.page-hero--short { min-height: 260px; }
.about--flush-top { padding-top: 0; }
.faq--offset {
  padding: 70px 0 110px;
  background: var(--paper-warm);
}

/* FAQ page only — scoped so home teaser keeps its own styles */
.faq-page {
  max-width: 720px;
}
.faq-page .faq-shell {
  width: 100%;
}
.faq-page .faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 4px;
  margin: 0 0 28px;
  padding: 4px 0 10px;
  border-bottom: 1px solid #E8E1DA;
}
.faq-page .faq-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.4;
  padding: 10px 12px 12px;
  position: relative;
  transition: color .2s var(--ease);
}
.faq-page .faq-tab:hover,
.faq-page .faq-tab:focus-visible {
  color: var(--ink);
  outline: none;
}
.faq-page .faq-tab.is-active {
  color: var(--ink);
}
.faq-page .faq-tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--mint-deep);
  border-radius: 2px;
}
.faq-page .faq-panel[hidden] {
  display: none;
}
.faq-page .faq-list--card {
  background: #fff;
  border: 1px solid var(--mint-line);
  border-radius: 16px;
  box-shadow: 0 0 0 4px rgba(142, 237, 240, .18), var(--shadow-soft);
  padding: 6px 28px;
}
.faq-page .faq-item {
  border-bottom: 1px dashed #E8E1DA;
}
.faq-page .faq-item:last-child {
  border-bottom: 0;
}
.faq-page .faq-q {
  list-style: none;
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  cursor: pointer;
  transition: color .25s;
}
.faq-page .faq-q::-webkit-details-marker { display: none; }
.faq-page .faq-q::marker { content: ""; }
.faq-page .faq-q::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq-page .faq-item details[open] > .faq-q::after {
  transform: rotate(-135deg);
  margin-top: 6px;
}
.faq-page .faq-q:hover { color: var(--mint-deep); }
.faq-page .faq-a-inner {
  padding: 0 28px 24px 4px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 2.15;
}
.faq-page .faq-a-inner a {
  color: var(--mint-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-page .faq-a-inner a:hover { color: #0485f7; }
.faq-page .faq-more {
  margin-top: 44px;
  text-align: center;
}
.faq-page .faq-empty {
  padding: 28px 8px;
  color: var(--ink-faint);
  font-size: 14px;
}
.series--offset-top { padding-top: 80px; }
.series--hero-padding { padding: 80px 0 110px; }
.flex-wrap-gap { display: flex; gap: 12px; flex-wrap: wrap; }
.auth-card--narrow { max-width: 480px; }
.contact-section--flush { padding-top: 0; padding-bottom: 80px; }
.container--narrow-md { max-width: 840px; }
.section-title--mb-xl { margin-bottom: 26px; }
.prose-soft { font-size: 15px; color: var(--ink-soft); line-height: 2.15; }
.prose-soft--mb { margin-bottom: 16px; }
.text-faint-sm { font-size: 13px; color: var(--ink-faint); line-height: 1.8; margin-bottom: 22px; }
.text-faint-lead { font-size: 13px; color: var(--ink-faint); line-height: 2; margin-top: 20px; }
.mt-lg { margin-top: 24px; }
.mt-xl { margin-top: 40px; }
.member-link-sm { margin-top: 12px; font-size: 13px; }
.member-text-soft { font-size: 13px; color: var(--ink-soft); }
.link-mint { color: var(--mint-deep); }
.link-underline { text-decoration: underline; }
.cfg-actions--spaced { margin-top: 20px; }
.account-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: 20px;
}
.text-loading { color: var(--ink-faint); font-size: 13px; }

.cart-loading, .history-loading, .favorites-loading, .notifications-loading, .quote-sheet-loading {
  text-align: center;
  color: var(--ink-faint);
  padding: 24px;
}

/* what-is-dna-diamond.html — SSR styles (was /static/react/dna-diamond.css) */
.dna-page,
[data-dna-diamond-root] {
  --dna-ink: #2b2320;
  --dna-soft: #5c534e;
  --dna-faint: #8a817b;
  --dna-line: #e3dcd3;
  --dna-mint: #5ecfcf;
  --dna-paper: #fdfcfa;
  background: var(--dna-paper);
  color: var(--dna-ink);
  letter-spacing: .05em;
}
.dna-page .page-hero::before {
  background: linear-gradient(160deg, #f7f4f1 0%, var(--dna-paper) 100%);
}
.dna-page .page-hero .eyebrow {
  color: var(--dna-mint);
  font-size: 11px;
  letter-spacing: .22em;
}
.dna-page__body {
  padding-top: 64px;
  padding-bottom: 96px;
}
.dna-prose {
  max-width: 760px;
}
.dna-prose .dna-section + .dna-section {
  margin-top: 56px;
  padding-top: 8px;
}
.dna-prose h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.55;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dna-line);
  color: var(--dna-ink);
}
.dna-prose > .dna-section > p,
.dna-prose .dna-process__copy p,
.dna-prose .dna-promise__item p {
  font-size: 15px;
  color: var(--dna-soft);
  line-height: 2;
  margin: 0 0 18px;
}
.dna-prose .callout {
  background: #f4fbfb;
  border: 1px solid #dcf2f2;
  border-radius: 6px;
  padding: 22px 26px;
  font-size: 14px;
  color: #3a7a7a;
  line-height: 1.95;
  margin: 28px 0 0;
  box-shadow: 0 8px 28px rgba(94, 207, 207, .08);
}

/* Process timeline — beat generic .prose li / ::before */
.dna-prose ol.dna-process {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.dna-prose ol.dna-process > li.dna-process__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  margin: 0;
  padding: 0 0 28px;
  color: inherit;
}
.dna-prose ol.dna-process > li.dna-process__step:last-child {
  padding-bottom: 0;
}
.dna-prose ol.dna-process > li.dna-process__step::before {
  content: none;
  display: none;
}
.dna-prose ol.dna-process > li.dna-process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 0;
  width: 1px;
  background: var(--dna-line);
}
.dna-process__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--dna-mint);
  background: var(--dna-paper);
  box-shadow: 0 0 0 4px rgba(94, 207, 207, .12);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--dna-mint);
  letter-spacing: .04em;
}
.dna-process__copy h3 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--dna-ink);
  margin: 4px 0 10px;
}
.dna-process__copy p {
  margin-bottom: 0;
}
.dna-process__copy a {
  color: var(--dna-mint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dna-process__body {
  display: grid;
  gap: 14px;
}
.dna-split {
  display: grid;
  gap: 18px;
  align-items: start;
}
.dna-split__copy { min-width: 0; }
.dna-figure {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--dna-line);
  background: #f7f4f1;
}
.dna-figure picture,
.dna-figure img {
  display: block;
  width: 100%;
}
.dna-figure img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.dna-promise__item .dna-figure {
  margin: 0 0 14px;
}
@media (min-width: 768px) {
  .dna-process__body,
  .dna-split {
    grid-template-columns: 1fr minmax(140px, 42%);
  }
}

.dna-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.dna-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: .1em;
  text-decoration: none;
  transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
}
.dna-cta--primary {
  background: #9cefef;
  color: var(--dna-ink);
}
.dna-cta--primary:hover {
  background: #b7f4f4;
  box-shadow: 0 8px 24px rgba(94, 207, 207, .25);
}
.dna-cta--ghost {
  border: 1px solid var(--dna-ink);
  color: var(--dna-ink);
  background: transparent;
}
.dna-cta--ghost:hover {
  background: var(--dna-ink);
  color: #fff;
}

.dna-prose ul.dna-promise {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.dna-prose ul.dna-promise > li.dna-promise__item {
  margin: 0;
  padding: 22px 22px 20px;
  border: 1px solid var(--dna-line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.dna-prose ul.dna-promise > li.dna-promise__item::before {
  content: none;
  display: none;
}
.dna-prose ul.dna-promise > li.dna-promise__item:hover {
  border-color: rgba(94, 207, 207, .45);
  box-shadow: 0 12px 36px rgba(94, 207, 207, .12);
}
.dna-promise__item h3 {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--dna-ink);
  margin: 0 0 8px;
}
.dna-promise__item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--dna-soft);
}
.dna-page__footnote {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--dna-line);
  font-size: 12.5px;
  color: var(--dna-faint);
  line-height: 1.8;
}
.dna-page__footnote b {
  color: var(--dna-mint);
  font-weight: 600;
}
.dna-page__footnote a {
  color: var(--dna-mint);
  margin: 0 .2em;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 640px) {
  .dna-prose ul.dna-promise {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .dna-page__body {
    padding-top: 48px;
    padding-bottom: 72px;
  }
  .dna-prose ol.dna-process > li.dna-process__step {
    gap: 14px;
    padding-bottom: 24px;
  }
}

/* DNA page scroll reveal — quieter than global .reveal; hooks main.js IO */
.dna-page .reveal {
  transform: translate3d(0, 14px, 0);
  transition-duration: .7s;
}
.dna-page .reveal-media img {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(1.02);
  transition: opacity .75s var(--ease, ease), transform .85s var(--ease, ease);
}
.dna-page .reveal-media.is-in img {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .dna-page .reveal,
  .dna-page .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .dna-page .reveal-media img,
  .dna-page .reveal-media.is-in img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}