/* PACK09J: homepage navigation refinement and light commercial-panel surfaces. */
:root {
  --commercial-panel-light-bg: #fffdf8;
  --commercial-panel-light-border: rgba(45, 68, 54, .2);
  --commercial-panel-light-shadow: 0 1.5rem 4rem rgba(35, 55, 43, .11);
  --commercial-panel-light-muted: #596760;
}

/* Keep the approved cinematic system while tightening the handoff into the story. */
.rubber-cinema__intro {
  grid-template-columns: minmax(0, 1.08fr) minmax(19rem, .72fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.75rem, 4.5vw, 4.25rem);
}

.rubber-cinema__intro-actions {
  margin-top: 1.15rem;
}

/* The existing links remain 44px targets with full aria-labels and hash behavior. */
.rubber-cinema__toolbar {
  --chapter-rail: rgba(244, 237, 219, .24);
  --chapter-dot: #9bac9e;
  --chapter-active: var(--cinema-orange);
}

.rubber-cinema__toolbar-inner {
  gap: clamp(.7rem, 1.2vw, 1.15rem);
}

.rubber-cinema__toolbar nav {
  display: grid;
  min-width: 0;
  flex: 0 1 53rem;
  grid-template-columns: repeat(8, minmax(36px, 1fr));
  gap: clamp(.12rem, .45vw, .32rem);
}

.rubber-cinema__toolbar nav a {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 44px;
  padding: .3rem .35rem .85rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: transparent;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.rubber-cinema__toolbar nav a::before {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  left: .55rem;
  height: 2px;
  border-radius: 999px;
  background: var(--chapter-rail);
  content: '';
}

.rubber-cinema__toolbar nav a::after {
  position: absolute;
  bottom: .35rem;
  left: 50%;
  width: .48rem;
  height: .48rem;
  border: 2px solid #10231b;
  border-radius: 50%;
  background: var(--chapter-dot);
  content: '';
  transform: translateX(-50%);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rubber-cinema__toolbar nav a:hover,
.rubber-cinema__toolbar nav a:focus-visible {
  border-color: rgba(244, 237, 219, .16);
  background: rgba(244, 237, 219, .06);
  color: var(--cinema-cream);
}

.rubber-cinema__toolbar nav a[aria-current='step'] {
  border-color: rgba(239, 178, 120, .26);
  background: rgba(239, 178, 120, .09);
  color: #f6c591;
}

.rubber-cinema__toolbar nav a[aria-current='step']::before {
  background: var(--chapter-active);
}

.rubber-cinema__toolbar nav a[aria-current='step']::after {
  background: var(--chapter-active);
  box-shadow: 0 0 0 3px rgba(239, 178, 120, .14);
  transform: translateX(-50%) scale(1.08);
}

.rubber-cinema__toolbar button {
  border-radius: 999px;
  background: #1c3527;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.rubber-cinema__toolbar button[aria-pressed='true'] {
  border-color: #a6b79f;
  background: #2a4935;
}

/* Correct only light-theme commercial cards; the accepted dark surfaces remain separate. */
html[data-theme='light'] .rubber-buy-brief,
html[data-theme='light'] .rubber-seller-hero aside {
  border-color: var(--commercial-panel-light-border);
  background:
    linear-gradient(140deg, rgba(96, 123, 104, .09), transparent 48%),
    var(--commercial-panel-light-bg);
  box-shadow: var(--commercial-panel-light-shadow);
  color: var(--ink);
}

html[data-theme='light'] .rubber-buy-brief span,
html[data-theme='light'] .rubber-seller-hero aside span {
  color: var(--commercial-panel-light-muted);
}

html[data-theme='light'] .rubber-buy-brief strong,
html[data-theme='light'] .rubber-seller-hero aside strong {
  border-bottom-color: var(--commercial-panel-light-border);
  color: var(--ink);
}

html[data-theme='light'] .rubber-buy-brief strong:last-child,
html[data-theme='light'] .rubber-seller-hero aside strong:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 700px), (max-height: 699px) {
  .rubber-cinema__intro {
    padding-block: clamp(2.25rem, 8vw, 3rem);
  }

  .rubber-cinema__intro > div:last-child {
    margin-top: 1rem;
  }

  .rubber-cinema__intro-actions {
    margin-top: 1rem;
  }
}

@media (max-width: 700px) {
  .rubber-cinema__toolbar nav {
    width: 100%;
    flex-basis: 100%;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .rubber-cinema__toolbar nav a {
    padding-inline: .1rem;
  }

  .rubber-cinema__toolbar nav a::before {
    right: .35rem;
    left: .35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rubber-cinema__toolbar nav a,
  .rubber-cinema__toolbar nav a::after {
    transition: none;
  }
}