/* Shop page: two price ladders side by side (Nut & Seed Mix / Seeds Only).
   Tier styling itself lives in pureh.css; these rules only handle the duo
   layout and the ladder headers. */

.ladder-duo {
  display: grid;
  gap: 22px;
  align-items: start;
}

.lhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.lhead h3 {
  margin: 0;
}

.lhead .chip {
  flex-shrink: 0;
}

/* each ladder sits in a half-width column, so two tiers per row */
.ladder-duo .ladder {
  grid-template-columns: repeat(2, 1fr);
}

.ladder .pre-note {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-2);
}

/* Nut & Seed ladder: forest green cards, cream text, gold accents */
.ladder-forest .tier {
  background: var(--band);
  border-color: var(--band-line);
}
.ladder-forest .tier[data-best] {
  border-color: var(--gold);
}
.ladder-forest .tier .qty,
.ladder-forest .tier .per,
.ladder-forest .tier .note {
  color: color-mix(in srgb, var(--band-ink) 74%, transparent);
}
.ladder-forest .tier .total {
  color: var(--band-ink);
}

@media (min-width: 980px) {
  .ladder-duo {
    grid-template-columns: 1fr 1fr;
    /* four shared rows: header, tier row 1, tier row 2, footnote */
    grid-template-rows: auto repeat(2, auto) auto;
    column-gap: 26px;
    row-gap: clamp(12px, 1.6vw, 18px);
  }
  /* Subgrid keeps both ladders' tier cards aligned horizontally */
  .ladder-duo > .rv {
    display: grid;
    row-gap: clamp(12px, 1.6vw, 18px); /* fallback when subgrid is unsupported */
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
  }
  .ladder-duo > .rv > .lhead {
    margin-bottom: 0;
  }
  .ladder-duo .ladder {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: subgrid;
    grid-row: 2 / span 2;
  }
  .ladder-duo .ladder .pre-note {
    margin-top: 0;
  }
}

@media (max-width: 520px) {
  .ladder-duo .ladder {
    grid-template-columns: 1fr;
  }
}