/* ==========================================================================
   Product landing (general_pages/products/product_landing.html)
   --------------------------------------------------------------------------
   Scoped under .cc-product and built from the brand tokens in css/styles.css
   (colors, fonts, motion). Shared components (pricing map, newest-rated shelf,
   avatar chip, score tooltip) keep their own styles; the rules here only place
   them and bring their headings into one hierarchy, so their other pages do
   not change. Layout and behaviour notes: docs/PRODUCT_LANDING.md.

   Refactoring UI principles applied:
   * One primary action. "Start Rating" is the only filled, glowing control in
     the hero; wishlist is an outline, the editor link is a ghost, sharing is
     a row of small icon buttons. A floating rate bar keeps the same action one
     tap away after the card scrolls off, and empty states ("Rate it first")
     point at it.
   * Hierarchy from weight and color before size. Overall is the one loud
     number; the six category scores are equal, quieter tiles. Classification
     (type / subtype / category) is a muted eyebrow, not a heading.
   * Emphasize by de-emphasizing. The Cult Leader take gets the only gold
     accent on the page, both as a teaser beside the scores and on the full
     leader card.
   * Separation from spacing and surfaces, not lines: cards sit on raised
     charcoal with low-contrast borders, sections are split by space.
   * One spacing scale (--p-space-*) and one section-title style.
   * Every section in view: the sticky section nav never scrolls sideways and
     shows each label at every width.
   * Motion is short, uses transforms and opacity only, and is switched off
     under prefers-reduced-motion.

   Stacking note: the hero media column holds the rating card's MDB modals and
   the verify overlay (all position: fixed). Nothing on an ancestor of that
   column may create a containing block or stacking context (transform,
   filter, opacity animation, z-index), or those overlays would be trapped
   under the sticky nav. The hero entrance animation is therefore applied to
   the identity and score columns only.
   ========================================================================== */

.cc-product {
  --p-space-1: 0.25rem;
  --p-space-2: 0.5rem;
  --p-space-3: 0.75rem;
  --p-space-4: 1rem;
  --p-space-5: 1.5rem;
  --p-space-6: 2rem;
  --p-space-7: 3rem;
  --p-space-8: 4rem;
  --p-radius: 16px;
  --p-radius-sm: 12px;
  --p-gutter: 1rem;
  --p-nav-h: 3.75rem;
  --p-surface: var(--cc-surface-1, #1a1a1a);
  --p-surface-raised: var(--cc-surface-2, #242424);
  --p-border: rgba(var(--cc-bone-rgb), 0.08);
  --p-border-strong: rgba(var(--cc-bone-rgb), 0.14);
  --p-muted: var(--cc-muted, #b3b3b3);
  --p-gold: var(--cc-rating-elite, #c6a650);
  --p-gold-rgb: 198, 166, 80;
  --p-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.28);
  color: var(--cc-bone);
  padding-bottom: var(--p-space-8);
  overflow-x: clip;
}

@media (min-width: 576px) {
  .cc-product { --p-nav-h: 3.5rem; }
}

@media (min-width: 768px) {
  .cc-product { --p-gutter: 1.5rem; }
}

@media (min-width: 1200px) {
  .cc-product { --p-gutter: 2rem; }
}

.cc-product-container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--p-gutter);
}

/* Section targets land just below the sticky nav. */
.cc-product-section,
.cc-product #mystery-voting {
  scroll-margin-top: calc(var(--p-nav-h) + var(--p-space-3));
}

.cc-product-section:focus { outline: none; }

/* Prefixed so it outranks MDB's own focus shadows, which load later. */
.cc-product .cc-product-nav__link:focus-visible,
.cc-product .cc-product-leader-teaser:focus-visible,
.cc-product .cc-product-nudge__btn:focus-visible,
.cc-product .cc-product-community-cta__btn:focus-visible,
.cc-product .cc-product-ratebar__btn:focus-visible,
.cc-product .cc-product-textlink:focus-visible,
.cc-product .cc-comments__toggle:focus-visible,
.cc-product .wishlist-toggle-btn:focus-visible,
.cc-product .strain-review-btn:focus-visible {
  outline: 3px solid var(--cc-bone);
  outline-offset: 3px;
  box-shadow: none;
}

/* ------------------------------------------------------------ Shared parts */
.cc-product-eyebrow {
  margin: 0 0 var(--p-space-2);
  font-family: var(--cc-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-green);
}

.cc-product-section {
  padding-block: var(--p-space-7) 0;
}

@media (min-width: 992px) {
  .cc-product-section { padding-block: var(--p-space-8) 0; }
}

.cc-product-section__head { margin-bottom: var(--p-space-5); }

/* One section-title style, also applied to the shared components' own
   headings (pricing, newest-rated) further down. */
.cc-product-section__title,
.cc-product #fullPricingMapContainer h2,
.cc-product #newest-rated-container h3 {
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: clamp(1.85rem, 2.4vw + 1rem, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--cc-bone);
}

.cc-product-card {
  position: relative;
  padding: var(--p-space-5);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  background: var(--p-surface);
  box-shadow: var(--p-shadow);
}

@media (max-width: 575.98px) {
  .cc-product-card { padding: var(--p-space-4); }
}

.cc-product-card__head { margin-bottom: var(--p-space-4); }

.cc-product-card__head--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p-space-3);
}

.cc-product-card__title {
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.05;
  color: var(--cc-bone);
}

.cc-product-card__lead {
  margin: calc(var(--p-space-2) * -1) 0 var(--p-space-4);
  font-size: 0.875rem;
  color: var(--p-muted);
}

.cc-product-textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  min-height: 2.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cc-green);
  text-decoration: none;
  white-space: nowrap;
}

.cc-product-textlink i { transition: transform var(--cc-motion-fast) var(--cc-motion-ease-out); }
.cc-product-textlink:hover { color: var(--cc-green-hover); }
.cc-product-textlink:hover i { transform: translateX(3px); }

.cc-product-placeholder {
  display: grid;
  place-items: center;
  gap: var(--p-space-2);
  min-height: 10rem;
  padding: var(--p-space-5);
  border: 1px dashed var(--p-border-strong);
  border-radius: var(--p-radius-sm);
  color: var(--p-muted);
  text-align: center;
}

.cc-product-placeholder i { font-size: 1.5rem; color: rgba(var(--cc-green-rgb), 0.7); }
.cc-product-placeholder p { margin: 0; font-weight: 600; }

/* -------------------------------------------------------------------- Hero */
.cc-product-hero {
  padding-block: var(--p-space-6) var(--p-space-6);
  background:
    radial-gradient(52rem 26rem at 0% 0%, rgba(var(--cc-green-rgb), 0.1), transparent 70%),
    radial-gradient(40rem 22rem at 100% 0%, rgba(var(--cc-pink-rgb), 0.06), transparent 70%);
}

@media (min-width: 992px) {
  .cc-product-hero { padding-block: var(--p-space-7) var(--p-space-7); }
}

.cc-product-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "identity"
    "media"
    "scores"
    "badges";
  gap: var(--p-space-5);
}

.cc-product-hero__identity { grid-area: identity; min-width: 0; }
.cc-product-hero__media    { grid-area: media; min-width: 0; }
.cc-product-hero__scores   { grid-area: scores; min-width: 0; }
.cc-product-hero__badges   { grid-area: badges; min-width: 0; }

/* Tablet: the card keeps a comfortable width instead of stretching. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .cc-product-media { max-width: 40rem; margin-inline: auto; }
}

/* Desktop: card on the left, identity + scores on the right. */
@media (min-width: 992px) {
  .cc-product-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "media identity"
      "media scores"
      "badges scores";
    column-gap: var(--p-space-7);
    row-gap: var(--p-space-5);
  }
}

/* Identity and scores settle in on first paint (see the stacking note). */
.cc-product-hero__identity,
.cc-product-hero__scores {
  animation: cc-kf-fade-in-up var(--cc-motion-slow) var(--cc-motion-ease-out) both;
}
.cc-product-hero__scores { animation-delay: calc(var(--cc-motion-stagger-step) * 2); }

/* Classification eyebrow: three quiet chips, never a heading. */
.cc-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-2);
  margin: 0 0 var(--p-space-3);
  padding: 0;
  list-style: none;
}

.cc-product-meta__item {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--p-space-3);
  border: 1px solid rgba(var(--cc-green-rgb), 0.28);
  border-radius: 999px;
  background: rgba(var(--cc-green-rgb), 0.06);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-bone);
}

.cc-product-title {
  margin: 0 0 var(--p-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--p-space-2);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.cc-product-title__strain {
  font-family: var(--cc-font-display);
  font-size: clamp(2.6rem, 5vw + 1.25rem, 4.75rem);
  line-height: 0.92;
  letter-spacing: 0.015em;
  color: var(--cc-bone);
}

.cc-product-title__by {
  font-family: var(--cc-font-display-thin);
  font-size: clamp(1.15rem, 1vw + 0.9rem, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--p-muted);
}

.cc-product-title__by-word {
  margin-right: 0.3em;
  color: var(--cc-green);
  text-transform: lowercase;
}

.cc-product-title__by u { text-decoration-color: rgba(var(--cc-bone-rgb), 0.35); }

/* -------------------------------------------- Hero actions (wishlist, edit) */
.cc-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-2);
}

.cc-product .wishlist-toggle-btn {
  --wl-accent: var(--cc-green);
  --wl-accent-rgb: var(--cc-green-rgb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--p-space-5);
  border: 1px solid rgba(var(--wl-accent-rgb), 0.6);
  border-radius: 999px;
  background: rgba(var(--wl-accent-rgb), 0.06);
  color: var(--wl-accent);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: none;
  transition:
    background-color var(--cc-motion-fast) var(--cc-motion-ease-inout),
    color var(--cc-motion-fast) var(--cc-motion-ease-inout),
    border-color var(--cc-motion-fast) var(--cc-motion-ease-inout),
    transform var(--cc-motion-fast) var(--cc-motion-ease-inout),
    box-shadow var(--cc-motion-base) var(--cc-motion-ease-out);
}

.cc-product .wishlist-toggle-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--wl-accent);
  box-shadow: 0 4px 14px rgba(var(--wl-accent-rgb), 0.24);
}

.cc-product .wishlist-toggle-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.cc-product .wishlist-toggle-btn:disabled { opacity: 0.65; cursor: default; }

/* "On Wishlist": solid, high-contrast state with dark ink. */
.cc-product .wishlist-toggle-btn.is-on-wishlist {
  border-color: var(--wl-accent);
  background-color: var(--wl-accent);
  color: var(--cc-black);
  box-shadow: 0 4px 16px rgba(var(--wl-accent-rgb), 0.3);
}

.cc-product .wishlist-toggle-btn.is-on-wishlist .wishlist-toggle-icon { color: var(--cc-black); }

/* Pop + heartbeat played once when a product is added. */
.cc-product .wishlist-toggle-btn.wl-just-added { animation: wlPop 0.45s ease; }
.cc-product .wishlist-toggle-btn.wl-just-added .wishlist-toggle-icon { animation: wlHeartbeat 0.7s ease; }
.cc-product .wishlist-toggle-btn.is-busy { pointer-events: none; opacity: 0.75; }

@keyframes wlPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

@keyframes wlHeartbeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.35); }
  50% { transform: scale(0.9); }
  75% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Authorized strain-review editor link: a quiet ghost, never a rival CTA. */
.cc-product .strain-review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--p-space-4);
  border: 1px solid var(--p-border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--cc-bone);
  font-weight: 500;
  text-transform: none;
  box-shadow: none;
  transition:
    border-color var(--cc-motion-fast) var(--cc-motion-ease-inout),
    background-color var(--cc-motion-fast) var(--cc-motion-ease-inout);
}

.cc-product .strain-review-btn:hover {
  border-color: rgba(var(--cc-bone-rgb), 0.4);
  background: rgba(var(--cc-bone-rgb), 0.05);
  color: var(--cc-bone);
}

@media (max-width: 374.98px) {
  .cc-product .product-action-buttons .wishlist-toggle-btn,
  .cc-product .product-action-buttons .strain-review-btn {
    padding-inline: var(--p-space-3);
    font-size: 0.8125rem;
  }
}

/* ---------------------------------------------- Product card + rating CTA */
.cc-product .cc-product-media #mystery-voting { padding-inline: 0; }

.cc-product .cc-product-cta {
  min-height: 3rem;
  border: 0;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.cc-product .cc-product-cta--secondary { box-shadow: none; }

.cc-product .cc-product-media .carousel-inner {
  border: 1px solid var(--p-border);
  box-shadow: var(--p-shadow) !important;
}

/* The rating form takes the card's place; give it the card surface. */
.cc-product #review-interface {
  padding: var(--p-space-4);
  border: 1px solid rgba(var(--cc-green-rgb), 0.3);
  border-radius: var(--p-radius);
  background: var(--p-surface);
}

/* ------------------------------------------------------------ Score card */
.cc-product-scores { display: flex; flex-direction: column; gap: var(--p-space-5); }
.cc-product-scores .cc-product-card__head { margin-bottom: 0; }

.cc-scores {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--p-space-4);
  align-items: center;
}

/* Overall sits beside the tiles only on desktop, where there is room on its
   left for the centered weighted-rating panel it opens. */
@media (min-width: 992px) {
  .cc-scores { grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 2fr); gap: var(--p-space-5); }
}

.cc-scores__overall {
  padding: var(--p-space-4) var(--p-space-3);
  border-radius: var(--p-radius-sm);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(var(--cc-green-rgb), 0.14), transparent 70%),
    var(--p-surface-raised);
  text-align: center;
}

.cc-scores__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--p-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-score {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: var(--p-space-3) var(--p-space-1);
  border-radius: var(--p-radius-sm);
  background: rgba(var(--cc-bone-rgb), 0.03);
  border: 1px solid var(--p-border);
  text-align: center;
}

.cc-score__icon {
  margin-bottom: 0.15rem;
  font-size: 0.95rem;
  color: rgba(var(--cc-green-rgb), 0.75);
}

.cc-score__value {
  font-family: var(--cc-font-body);
  font-size: clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--cc-bone);
}

.cc-score__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p-muted);
}

/* Nudges under the scores: blind-round note, or "Rate it first". */
.cc-product-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-space-2) var(--p-space-3);
  margin: 0;
  padding: var(--p-space-3) var(--p-space-4);
  border-radius: var(--p-radius-sm);
  background: rgba(var(--cc-bone-rgb), 0.04);
  font-size: 0.9375rem;
  color: var(--p-muted);
}

.cc-product-nudge > i { color: var(--cc-green); }
.cc-product-nudge > span { flex: 1 1 14rem; }
.cc-product-nudge strong { color: var(--cc-bone); }

.cc-product-nudge--cta {
  border: 1px solid rgba(var(--cc-green-rgb), 0.35);
  background: rgba(var(--cc-green-rgb), 0.07);
}

.cc-product-nudge__btn,
.cc-product-community-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-2);
  min-height: 2.75rem;
  padding: 0 var(--p-space-4);
  border: 1px solid var(--cc-green);
  border-radius: 999px;
  background: transparent;
  color: var(--cc-green);
  font-weight: 700;
  transition:
    background-color var(--cc-motion-fast) var(--cc-motion-ease-inout),
    color var(--cc-motion-fast) var(--cc-motion-ease-inout),
    transform var(--cc-motion-fast) var(--cc-motion-ease-inout);
}

.cc-product-nudge__btn:hover,
.cc-product-community-cta__btn:hover {
  background: var(--cc-green);
  color: var(--cc-black);
}

.cc-product-nudge__btn:active,
.cc-product-community-cta__btn:active { transform: scale(0.97); }

.cc-product-nudge__btn:disabled,
.cc-product-community-cta__btn:disabled { opacity: 0.5; pointer-events: none; }

/* Cult Leader teaser: the page's one gold accent. */
.cc-product-leader-teaser {
  display: grid;
  gap: var(--p-space-2);
  padding: var(--p-space-4) var(--p-space-4) var(--p-space-4) var(--p-space-5);
  border: 1px solid rgba(var(--p-gold-rgb), 0.3);
  border-radius: var(--p-radius-sm);
  background:
    linear-gradient(90deg, var(--p-gold) 0 3px, transparent 3px),
    linear-gradient(135deg, rgba(var(--p-gold-rgb), 0.1), rgba(var(--p-gold-rgb), 0.02) 60%);
  color: var(--cc-bone);
  text-decoration: none;
  transition:
    border-color var(--cc-motion-fast) var(--cc-motion-ease-inout),
    transform var(--cc-motion-fast) var(--cc-motion-ease-inout),
    box-shadow var(--cc-motion-base) var(--cc-motion-ease-out);
}

.cc-product-leader-teaser:hover {
  border-color: rgba(var(--p-gold-rgb), 0.6);
  color: var(--cc-bone);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

@media (hover: hover) and (pointer: fine) {
  .cc-product-leader-teaser:hover { transform: translateY(-2px); }
}

.cc-product-leader-teaser__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-gold);
}

.cc-product-leader-teaser__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--p-space-3);
}

.cc-product-leader-teaser__name {
  font-family: var(--cc-font-display);
  font-size: 1.4rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.cc-product-leader-teaser__score {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cc-green);
}

.cc-product-leader-teaser__quote {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--p-muted);
}

.cc-product-leader-teaser__more {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--p-gold);
}

.cc-product-leader-teaser__more i { transition: transform var(--cc-motion-fast) var(--cc-motion-ease-out); }
.cc-product-leader-teaser:hover .cc-product-leader-teaser__more i { transform: translateY(2px); }

/* Share row: a quiet strip at the foot of the score card. */
.cc-product-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-2) var(--p-space-4);
  padding-top: var(--p-space-4);
  border-top: 1px solid var(--p-border);
}

.cc-product-share__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-muted);
}

.cc-product-share .cc-social-share-row {
  justify-content: start;
  gap: var(--p-space-2);
  padding: 0 !important;
}

.cc-product-share .cc-social-share {
  width: 44px;
  height: 44px;
}

.cc-product-share .cc-social-share--download {
  width: 48px;
  height: 48px;
  font-size: 1.05rem;
}

@media (max-width: 374.98px) {
  .cc-product-share .cc-social-share { width: 40px; height: 40px; }
  .cc-product-share .cc-social-share--download { width: 44px; height: 44px; }
}

/* Tournament badges (shared styles); only spacing is placed here. */
.cc-product-hero__badges .cc-tbadges { margin-top: 0; }

/* ------------------------------------------------------------ Section nav */
.cc-product-nav {
  position: sticky;
  top: 0;
  z-index: 1015; /* above content, below MDB modals (1050+) and the verify overlay */
  border-block: 1px solid var(--p-border);
  background: rgba(var(--cc-black-rgb), 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  transition: box-shadow var(--cc-motion-base) var(--cc-motion-ease-out);
}

.cc-product-nav.is-stuck { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }

/* Equal columns at every width: every section is visible, nothing scrolls. */
.cc-product-nav__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .cc-product-nav__list {
    display: flex;
    justify-content: center;
    gap: var(--p-space-2);
  }
}

.cc-product-nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: var(--p-nav-h);
  padding: 0 var(--p-space-1);
  color: var(--p-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--cc-motion-fast) var(--cc-motion-ease-inout);
}

@media (min-width: 576px) {
  .cc-product-nav__link {
    flex-direction: row;
    gap: var(--p-space-2);
    padding: 0 var(--p-space-4);
    font-size: 0.875rem;
  }
}

.cc-product-nav__icon {
  font-size: 0.95rem;
  transition: color var(--cc-motion-fast) var(--cc-motion-ease-inout), transform var(--cc-motion-fast) var(--cc-motion-ease-out);
}

/* Active: bone text, green icon and a green bar that grows from the center. */
.cc-product-nav__link::after {
  content: "";
  position: absolute;
  left: var(--p-space-3);
  right: var(--p-space-3);
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--cc-green);
  transform: scaleX(0);
  transition: transform var(--cc-motion-base) var(--cc-motion-ease-out);
}

.cc-product-nav__link:hover { color: var(--cc-bone); }
.cc-product-nav__link:hover .cc-product-nav__icon { transform: translateY(-1px); }

.cc-product-nav__link[aria-current="true"] { color: var(--cc-bone); }
.cc-product-nav__link[aria-current="true"] .cc-product-nav__icon { color: var(--cc-green); }
.cc-product-nav__link[aria-current="true"]::after { transform: scaleX(1); }

/* ---------------------------------------------------------- Cult Leaders */
.cc-leader__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "picker"
    "description"
    "rating";
  gap: var(--p-space-4);
}

@media (min-width: 992px) {
  .cc-leader__body {
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
    grid-template-areas:
      "picker description"
      "rating rating";
    gap: var(--p-space-5);
  }
}

.cc-leader__picker {
  grid-area: picker;
  align-self: start;
  padding: var(--p-space-4);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  background: var(--p-surface);
}

.cc-leader__picker-label {
  margin-bottom: var(--p-space-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-muted);
}

.cc-leader__description {
  grid-area: description;
  display: flex;
  align-items: flex-start;
  gap: var(--p-space-4);
  padding: var(--p-space-5);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  background: var(--p-surface);
  box-shadow: var(--p-shadow);
}

.cc-leader__description-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: rgba(var(--cc-green-rgb), 0.12);
  color: var(--cc-green);
}

.cc-leader__description-copy { min-width: 0; }

.cc-leader__description-title {
  margin: 0 0 var(--p-space-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-muted);
}

/* Long descriptions scroll inside a calm box instead of a forced scrollbar. */
.cc-leader__description-text {
  max-width: 68ch;
  max-height: 22rem;
  overflow-y: auto;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(var(--cc-bone-rgb), 0.9);
}

.cc-leader .leader-rating-display {
  grid-area: rating;
  margin: 0 !important;
}

/* The leader rating card carries the page's gold accent. */
.cc-product .leader-rating-card-shell {
  border: 1px solid rgba(var(--p-gold-rgb), 0.35) !important;
  background:
    linear-gradient(180deg, rgba(var(--p-gold-rgb), 0.08), transparent 9rem),
    var(--p-surface) !important;
  box-shadow: var(--p-shadow) !important;
}

.cc-product .leader-rating-card__toggle { padding-block: var(--p-space-4) !important; }

.cc-product .leader-rating-card__heading {
  font-family: var(--cc-font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.cc-product .leader-rating-card__heading::before {
  content: "\f521"; /* fa-crown */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--p-gold);
}

.cc-product .leader-rating-card__summary { font-size: 1.25rem; }

.cc-product .leader-rating-card__row { border-color: var(--p-border) !important; }

/* --------------------------------------------------------------- Profile */
.cc-product-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--p-space-4);
}

@media (min-width: 992px) {
  .cc-product-profile {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--p-space-5);
  }
  .cc-product-profile__family { grid-column: 1 / -1; }
}

.cc-terpenes__chart { color: var(--p-muted); }
.cc-terpenes__chart canvas { max-height: 26rem !important; }

/* The graph itself (toolbar, pan/zoom viewport) is styled by
   css/components/lineage_graph.css.

   No lineage on record: the renderer leaves #lineageChart empty. Hold the
   graph's height briefly (most lineages arrive well inside it), then settle
   into a short, labelled placeholder instead of a blank box. */
.cc-product #lineageContainerSection #lineageChart:empty {
  border-radius: var(--p-radius-sm);
  background: rgba(var(--cc-bone-rgb), 0.02);
  display: grid;
  place-items: center;
  animation: ccLineageEmpty 1ms linear 3s both;
}

.cc-product #lineageContainerSection #lineageChart:empty::before {
  content: "No lineage mapped yet";
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--p-muted);
  opacity: 0;
  animation: cc-kf-fade-in var(--cc-motion-base) var(--cc-motion-ease-out) 3s both;
}

@keyframes ccLineageEmpty {
  from { min-height: 320px; }
  to   { min-height: 8rem; }
}

.cc-brand-family__graph {
  position: relative;
  width: 100%;
  height: clamp(300px, 48vw, 440px);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  background-color: var(--cc-black);
  overflow: hidden;
}

.cc-brand-family__detail {
  min-height: 1.5rem;
  margin-top: var(--p-space-3);
  font-size: 0.875rem;
  color: var(--p-muted);
}

.cc-brand-family__detail strong { color: var(--cc-bone); }

/* Mystery: the profile is withheld until the reveal. */
.cc-product-empty {
  display: flex;
  align-items: center;
  gap: var(--p-space-4);
}

.cc-product-empty__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--p-radius-sm);
  background: rgba(var(--cc-green-rgb), 0.12);
  color: var(--cc-green);
}

.cc-product-empty__title { margin: 0; font-weight: 700; }

/* ------------------------------------------------------------- Community */
.cc-comments__head {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  margin-bottom: var(--p-space-4);
}

.cc-comments__toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--p-space-3);
  min-height: 3rem;
  padding: var(--p-space-2) var(--p-space-3) var(--p-space-2) var(--p-space-2);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  background: var(--p-surface);
  color: var(--cc-bone);
  text-align: left;
  transition: border-color var(--cc-motion-fast) var(--cc-motion-ease-inout), background-color var(--cc-motion-fast) var(--cc-motion-ease-inout);
}

.cc-comments__toggle:hover {
  border-color: rgba(var(--cc-green-rgb), 0.45);
  background: rgba(var(--cc-green-rgb), 0.05);
}

.cc-comments__toggle-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: rgba(var(--cc-green-rgb), 0.12);
  color: var(--cc-green);
}

.cc-comments__count {
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--cc-bone);
}

.cc-comments__chevron {
  color: var(--p-muted);
  transition: transform var(--cc-motion-base) var(--cc-motion-ease-out);
}

.cc-comments__toggle[aria-expanded="false"] .cc-comments__chevron { transform: rotate(-90deg); }

.cc-product #ratingCommentRows {
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-radius) !important;
  background: var(--p-surface);
  box-shadow: var(--p-shadow) !important;
}

.cc-product #rating-comments-section article {
  border-color: var(--p-border) !important;
  background: rgba(var(--cc-bone-rgb), 0.03) !important;
  transition: border-color var(--cc-motion-fast) var(--cc-motion-ease-inout);
}

.cc-product #rating-comments-section article:hover { border-color: var(--p-border-strong) !important; }

.cc-product-community-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-3);
  margin-top: var(--p-space-4);
  padding: var(--p-space-4) var(--p-space-5);
  border-radius: var(--p-radius);
  background:
    radial-gradient(60% 140% at 0% 50%, rgba(var(--cc-green-rgb), 0.12), transparent 70%),
    var(--p-surface);
  border: 1px solid rgba(var(--cc-green-rgb), 0.22);
  color: rgba(var(--cc-bone-rgb), 0.9);
}

.cc-product-community-cta__btn span {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------- Pricing */
.cc-product .cc-product-pricing #fullPricingMapContainer {
  max-width: none;
  padding: 0 !important;
}

/* ----------------------------------------------------------- More strains */
.cc-product #newest-rated-container { padding-top: 0 !important; }
.cc-product #newest-rated-container > .container-fluid { padding-inline: 0; }
/* The shared heading ships `.text-muted` (an !important utility). */
.cc-product #newest-rated-container h3 { color: var(--cc-bone) !important; }
.cc-product #newest-rated-container h3 i { font-size: 0.7em; vertical-align: 0.15em; color: var(--cc-green); }

/* -------------------------------------------------------- Floating rate bar */
.cc-product-ratebar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--p-space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 1030; /* above the sticky nav, below MDB modals and the verify overlay */
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
  width: min(calc(100% - 2 * var(--p-space-4)), 26rem);
  padding: var(--p-space-2) var(--p-space-2) var(--p-space-2) var(--p-space-4);
  border: 1px solid rgba(var(--cc-green-rgb), 0.35);
  border-radius: 999px;
  background: rgba(var(--cc-charcoal-rgb), 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-50%, 140%);
  transition:
    transform var(--cc-motion-base) var(--cc-motion-ease-out),
    opacity var(--cc-motion-base) var(--cc-motion-ease-out);
}

.cc-product-ratebar[hidden] { display: none; }

.cc-product-ratebar.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

.cc-product-ratebar__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: var(--cc-font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cc-bone);
}

.cc-product-ratebar__btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--p-space-2);
  min-height: 2.75rem;
  padding: 0 var(--p-space-5);
  border: 0;
  border-radius: 999px;
  background: var(--cc-green);
  color: var(--cc-black);
  font-weight: 700;
  box-shadow: 0 0 0.85rem rgba(var(--cc-green-rgb), 0.35);
  transition:
    background-color var(--cc-motion-fast) var(--cc-motion-ease-inout),
    transform var(--cc-motion-fast) var(--cc-motion-ease-inout);
}

.cc-product-ratebar__btn:hover { background: var(--cc-green-hover); }
.cc-product-ratebar__btn:active { transform: scale(0.97); }

/* ------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cc-product-hero__identity,
  .cc-product-hero__scores,
  .cc-product .wishlist-toggle-btn.wl-just-added,
  .cc-product .wishlist-toggle-btn.wl-just-added .wishlist-toggle-icon {
    animation: none;
  }
  .cc-product .wishlist-toggle-btn,
  .cc-product .strain-review-btn,
  .cc-product-textlink i,
  .cc-product-nudge__btn,
  .cc-product-community-cta__btn,
  .cc-product-leader-teaser,
  .cc-product-leader-teaser__more i,
  .cc-product-nav,
  .cc-product-nav__link,
  .cc-product-nav__link::after,
  .cc-product-nav__icon,
  .cc-comments__toggle,
  .cc-comments__chevron,
  .cc-product #rating-comments-section article,
  .cc-product-ratebar,
  .cc-product-ratebar__btn {
    transition: none;
  }
  .cc-product .wishlist-toggle-btn:hover:not(:disabled),
  .cc-product-leader-teaser:hover,
  .cc-product-nav__link:hover .cc-product-nav__icon,
  .cc-product-textlink:hover i,
  .cc-product-leader-teaser:hover .cc-product-leader-teaser__more i {
    transform: none;
  }
  /* The empty-lineage placeholder is a state change, not motion: keep it,
     just without the fade. */
  .cc-product #lineageContainerSection #lineageChart:empty::before {
    animation-duration: 1ms;
  }
}