/* Rings landing page (page-templates/rings.php; design/rings.dc.html). The birthstone picker is in picker.css. */

/* ---------- Hero ---------- */
.bhg-rings-hero{padding-top:28px}
.bhg-rings-hero .bhg-crumbs{margin:0 0 28px;padding:0;background:none;color:#cfc6b3}
.bhg-rings-hero .bhg-crumbs a{color:#cfc6b3}
.bhg-rings-hero .bhg-crumbs [aria-current]{color:var(--bhg-ground)}
.bhg-rings-hero__h1{margin:0 0 20px;font-size:clamp(36px,9.3vw,56px);line-height:1.08;color:var(--bhg-ground)}
.bhg-rings-hero__h1 em{color:var(--bhg-accent-dark)}
.bhg-rings-hero__lede{max-width:540px;line-height:1.7}
.bhg-rings-hero__fig .bhg-photo{border:0;border-radius:6px}
.bhg-rings-hero__fig .bhg-photo img{padding:4%}
.bhg-rings-hero__fig figcaption a{color:inherit}

/* ---------- Section heads ---------- */
.bhg-rings-intro{max-width:680px;margin:0 auto 40px;text-align:center}
.bhg-rings-intro .bhg-h2{margin:14px 0 16px}
.bhg-rings-intro .bhg-text{margin:0}
.bhg-rings-h2{font-size:clamp(28px,7.3vw,44px);line-height:1.12}
.bhg-rings-head{align-items:flex-end;gap:20px 32px;margin-bottom:36px}
.bhg-rings-head>div{max-width:620px}
.bhg-rings-head .bhg-h2{margin:14px 0}
.bhg-rings-head .bhg-text{margin:0}
.bhg-rings-head .bhg-link{flex:none}

/* ---------- Product cards: name and price on one row, brand · metal under them (design) ---------- */
.bhg-rings-cards .bhg-card{flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:baseline;justify-content:space-between;gap:10px 12px}
.bhg-rings-cards .bhg-photo{flex:0 0 100%}
.bhg-rings-cards .bhg-photo img{padding:6%}
.bhg-rings-cards .bhg-card__body{display:contents}
.bhg-rings-cards .bhg-card__name{order:1;margin:0}
.bhg-rings-cards .bhg-card__price{order:2}
.bhg-rings-cards .bhg-card__meta{order:3;flex:0 0 100%}
.bhg-rings-cards--tall{row-gap:36px}

/* ---------- Baby rings (green) ---------- */
.bhg-rings-baby .bhg-h2{margin:14px 0 22px;font-size:clamp(27px,7vw,42px);line-height:1.12}
.bhg-rings-baby .bhg-photo{border:0}
.bhg-rings-quote{margin:0 0 22px;padding:0 0 0 20px;border-left:2px solid var(--bhg-brass)}
.bhg-rings-quote p{margin:0 0 8px;font:italic 400 21px/1.45 var(--bhg-serif);color:var(--bhg-on-green)}
.bhg-rings-quote footer{font:700 12px var(--bhg-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bhg-brass)}
.bhg-rings-baby__text{max-width:470px;margin:0 0 28px}

/* ---------- Ring sizing (band) ---------- */
.bhg-rings-sizing .bhg-h2{margin:14px 0 20px}
.bhg-rings-steps{display:grid;gap:8px;margin:0 0 28px;padding-left:20px;font:400 16px/1.6 var(--bhg-sans);color:var(--bhg-body)}
.bhg-rings-chart{overflow-x:auto;background:#fffdf8;border:1px solid #d9c9a8;border-radius:6px}
.bhg-rings-chart table{width:100%;border-collapse:collapse;font:400 14px var(--bhg-sans);color:var(--bhg-ink);text-align:center}
.bhg-rings-chart tr+tr{border-top:1px solid var(--bhg-line)}
.bhg-rings-chart th{padding:12px 16px;text-align:left;font:700 12px var(--bhg-sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--bhg-green)}
.bhg-rings-chart td{padding:12px 8px}
.bhg-rings-chart tr:first-child td{font-weight:700}
.bhg-rings-unsure{align-self:center;padding:clamp(22px,3.5vw,32px);background:#fffdf8;border:1px solid #d9c9a8;border-radius:8px}
.bhg-rings-unsure h3{margin:0 0 12px;font:500 28px/1.2 var(--bhg-serif);color:var(--bhg-green)}
.bhg-rings-unsure .bhg-text{margin:0 0 12px}
.bhg-rings-unsure__row{justify-content:flex-start;gap:16px;margin-top:24px}

/* ---------- FAQ ---------- */
.bhg-rings-faq .bhg-h2{margin:14px 0 0}
.bhg-faq+.bhg-rings-faq-pending{margin-top:-1px}