/* Wearing window, ring sizer and the refinement layer. */
/* ============ responsive ============ */
/* ============ wearing window (muhurat) ============ */
.muhurat { padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%), var(--surface); }
.muhurat-when { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline; }
.muhurat-when .eyebrow { grid-column: 1 / -1; }
.muhurat-when b { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.15; }
.muhurat-time { font-weight: 700; font-size: 15px; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.muhurat p { font-size: 13px; color: var(--muted); margin: 8px 0 12px; }
.muhurat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; font-size: 12.5px; }
.wear-plan { max-width: 720px; margin: 26px auto 0; display: grid; gap: 12px; }
.wear-plan:empty { display: none; }
.wear-plan h2 { font-size: 26px; }

/* ============ ring sizer ============ */
.sizer { max-width: 520px; margin-inline: auto; }
.sizer h2 { margin-bottom: 4px; }
.sizer-step { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.sizer-step > b { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.sizer-step .n { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.sizer-step p { font-size: 13.5px; margin: 6px 0 12px; }
.sizer-step input[type=range] { width: 100%; accent-color: var(--gold); margin-top: 12px; }
.sizer-stage { display: grid; place-items: center; min-height: 64px; padding: 14px; border-radius: 14px; background: var(--bg-2); overflow: hidden; }
.sizer-stage-ring { min-height: 150px; }
.sizer-bar { height: 22px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 10px), color-mix(in srgb, var(--gold) 22%, transparent); border-inline: 2px solid var(--gold); max-width: none; }
.sizer-ring { border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold)); box-shadow: 0 0 0 1px var(--bg-2), 0 0 0 2px color-mix(in srgb, var(--gold) 50%, transparent); flex: none; }
.sizer-out { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.sizer-out b { color: var(--gold); font-size: 20px; font-family: var(--font-display); }
.sizer .btn-block { margin-top: 18px; }


/* ============ refinement layer ============ */
/* A one-pixel top highlight gives every card a milled edge. */
.p-card, .graha-card, .intent-card, .tool, .review, .article, .co-section, .summary, .order-card, .purpose, .toggle-row, .assure div, .wear-guide div, .finder-card, .cert-card { box-shadow: inset 0 1px 0 var(--sheen); }
.finder-card { box-shadow: inset 0 1px 0 var(--sheen), var(--shadow); }
.graha-card, .intent-card, .purpose, .article { transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.intent-card:hover, .purpose:hover, .article:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line-2)); }

/* Grid and flex children may shrink below their content, so one long word or a
   scrolling row can never push a column past the viewport. */
.hero-grid > *, .pdp > *, .checkout > *, .shop-layout > *, .cosmos-grid > *, .reviews-wrap > *, .qv > *, .footer-grid > *, .form-grid > *, .finder-form > * { min-width: 0; }

/* Line icons replace emoji: same stroke weight as the rest of the interface. */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--gold); }
.chip[aria-pressed="true"] .ico, .chip.active .ico { color: inherit; }
.purpose .emoji { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.purpose .emoji .ico { width: 21px; height: 21px; }
.intent-card b { display: inline-flex; align-items: center; gap: 8px; }

.grid-products.grid-shop { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.finder-form.finder-form-stone { grid-template-columns: 1fr 1fr 1fr auto; }

.p-name { font-size: 18.5px; line-height: 1.2; letter-spacing: 0; }
.pdp-price b { font-size: 38px; line-height: 1; }
.totals .grand span:last-child, .line-right b, .pal-item .price { font-variant-numeric: tabular-nums; }
.stage { box-shadow: inset 0 1px 0 var(--sheen), inset 0 0 80px color-mix(in srgb, var(--c) 10%, transparent); }
.thumb { transition: border-color .2s, transform .2s var(--ease); }
.thumb:hover { transform: translateY(-2px); }
.spec-grid span, .wear-guide span { font-size: 10.5px; letter-spacing: .14em; margin-bottom: 3px; }
/* The ct/ratti switch sits beside its label instead of stretching under it. */
.spec-grid span:has(> .unit-toggle) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spec-grid .unit-toggle { display: inline-flex; margin: 0; flex: none; }
.input::placeholder { color: var(--faint); }
.faq summary { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.review p { font-family: var(--font-display); font-size: 19px; line-height: 1.4; font-weight: 500; }
.rating-big { font-weight: 500; }
.drawer-head .logo-word { font-size: 18px; }
.muhurat { box-shadow: inset 0 1px 0 var(--sheen); }