/* ============================================================
   chakra.css — Chakra Balance Bracelet page (builds on product.css)
   Chakra colors come from tokens.css (--chakra-*). Balance has no
   gradient of its own yet, so the page uses brand teal for --a.
   ============================================================ */
.chakra-page #product { --a: var(--c-teal); --b: var(--c-teal); }
.chakra__main img { object-fit: contain; background: var(--c-white); }
.chakra__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 4%; }
.cdot { width: 9%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, var(--c-white)), var(--c)); }

.today { margin: 0 0 .9rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--c-white);
  border-left: 5px solid var(--c); box-shadow: var(--shadow-sm); display: grid; gap: .2rem; }
.today__name { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: color-mix(in srgb, var(--c) 75%, black); }
.today__line { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.2; color: var(--c-ink); }

.chakras { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.chakra { width: 100%; display: grid; grid-template-columns: auto 7.5rem 1fr; align-items: center; gap: .7rem; padding: .45rem .6rem;
  border: 1px solid transparent; border-radius: 12px; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--c-ink); }
.chakra:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.chakra.is-active { background: color-mix(in srgb, var(--c) 12%, var(--c-white)); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.chakra__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.chakra__name { font-family: var(--font-ui); font-size: var(--step--1); }
.chakra__line { font-size: var(--step--1); color: var(--c-ink-soft); }
@media (max-width: 480px) {
  .chakra { grid-template-columns: auto 1fr; }
  .chakra__line { grid-column: 2; }
}