/* ==========================================================================
   Product Detail Section — "Bra Collection — Support Dial"
   One entry in the extensible "product detail sections" library — see
   inc/product-detail-sections.php for how a shop owner picks which of
   these (if any) appears below a given product, and sets the support
   level (Light/Medium/Max) that drives the dial fill below.
   ========================================================================== */

.omh-pd-dial{
  padding:5rem 1.5rem; text-align:center; background:var(--color-bg);
}
.omh-pd-dial .eyebrow{
  font-size:0.64rem; letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--color-ink-soft); margin-bottom:0.7rem;
}
.omh-pd-dial h2{
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem);
  margin-bottom:0.6rem;
}
.omh-pd-dial .sub{
  color:var(--color-ink-soft); font-size:0.85rem; max-width:460px; margin:0 auto 2.6rem; line-height:1.6;
}

.omh-pd-dial-wrap{ max-width:220px; margin:0 auto 1.6rem; position:relative; }
.omh-pd-dial-svg{ width:100%; height:auto; }
.omh-pd-dial-bg{ fill:none; stroke:var(--color-line); stroke-width:6; }
.omh-pd-dial-fill{
  fill:none; stroke:var(--color-ink); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:251; stroke-dashoffset:251; transition:stroke-dashoffset 1.6s cubic-bezier(0.22,1,0.36,1);
}
.omh-pd-dial-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.omh-pd-dial-center .lvl{ font-family:var(--font-display); font-size:1.5rem; color:var(--color-ink); }
.omh-pd-dial-center .of{ font-size:0.62rem; color:var(--color-ink-soft); letter-spacing:0.05em; text-transform:uppercase; }

.omh-pd-dial-legend{ display:flex; justify-content:space-between; max-width:260px; margin:0 auto; font-size:0.64rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--color-ink-soft); }
.omh-pd-dial-legend span.active{ color:var(--color-ink); font-weight:600; }

@media (prefers-reduced-motion:reduce){
  .omh-pd-dial-fill{ transition:none; }
}