/* 5 tola only: a scale placing 58.32 g among weights visitors already know.
   Everything else comes from the shared product-page.css. */
.five-tola-page { --tola-fill:#a8822a; }

/* Weight scale, 0 to 120 g. A numeric axis, so it stays left to right. */
.tola-scale { margin:30px 0 0; max-width:520px; }
.tola-scale-track { position:relative; direction:ltr; height:14px; margin:52px 0 58px; border-radius:3px; background:var(--pd-surface); box-shadow:inset 0 0 0 1px var(--pd-line); }
.tola-scale-fill { position:absolute; inset-block:0; left:0; width:calc(58.32 / 120 * 100%); display:flex; gap:2px; }
.tola-scale-fill i { flex:1; background:var(--tola-fill); }
.tola-scale-fill i:first-child { border-radius:3px 0 0 3px; }
.tola-scale-mark { position:absolute; left:calc(var(--at) / 120 * 100%); top:calc(100% + 12px); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; font-size:11px; line-height:1.35; color:var(--pd-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tola-scale-mark b { font-weight:700; color:var(--pd-ink); }
.tola-scale-mark::before { content:""; position:absolute; left:calc(50% - .5px); bottom:100%; width:1px; height:calc(12px + 14px + 5px); background:var(--pd-muted); opacity:.55; }
.tola-scale-mark.is-above { top:auto; bottom:calc(100% + 12px); }
.tola-scale-mark.is-above::before { bottom:auto; top:100%; }
.tola-scale-mark.is-current { color:var(--pd-gold); }
.tola-scale-mark.is-current b { color:var(--pd-gold); font-size:12px; }
.tola-scale-mark.is-current::before { width:2px; left:calc(50% - 1px); background:var(--pd-gold); opacity:1; }
.tola-scale-mark.is-end { transform:translateX(-100%); align-items:flex-end; }
.tola-scale-mark.is-end::before { left:auto; right:0; }
.tola-scale figcaption { font-size:12px; color:var(--pd-muted); }
.tola-scale figcaption span { display:block; margin-top:3px; }

[dir="rtl"] .tola-scale-track { direction:rtl; }
[dir="rtl"] .tola-scale-fill { left:auto; right:0; }
[dir="rtl"] .tola-scale-fill i:first-child { border-radius:0 3px 3px 0; }
[dir="rtl"] .tola-scale-mark { left:auto; right:calc(var(--at) / 120 * 100%); transform:translateX(50%); font-size:12px; }
[dir="rtl"] .tola-scale-mark.is-end { transform:translateX(100%); }
[dir="rtl"] .tola-scale-mark.is-end::before { right:auto; left:0; }
[dir="rtl"] .tola-scale figcaption { font-size:13px; }

@media(prefers-color-scheme:dark) {
 .five-tola-page { --tola-fill:#d8ba73; }
}