/* Amazon secondary links (soil cards and guide pages) */
.shop-alt {
  display: block;
  margin: 0.5rem auto 0;
  text-align: center;
  font-size: 0.875rem;
  color: #4a6b2f;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.shop-alt:hover,
.shop-alt:focus-visible { color: #2f4a1c; }

.amazon-pick {
  margin: 0.75rem 0 1.25rem;
  font-size: 0.95rem;
}
.amazon-pick a {
  color: #4a6b2f;
  font-weight: 600;
  text-underline-offset: 2px;
}
.amazon-pick a:hover,
.amazon-pick a:focus-visible { color: #2f4a1c; }

/* No-price Amazon card: <li class="amazon-pick"> inside an existing .shop-grid.
   Scoped to .shop-grid > .amazon-pick so the guide-page <p class="amazon-pick">
   line above keeps its current look. Card has no price line on purpose. */
.shop-grid > .amazon-pick {
  display: flex; flex-direction: column; min-width: 0; height: 100%;
  margin: 0; padding: 0 0 1rem; font-size: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.shop-grid > .amazon-pick:hover,
.shop-grid > .amazon-pick:focus-within { transform: translateY(-4px); box-shadow: var(--lift); }
.shop-grid > .amazon-pick img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain; padding: 0.75rem; background: #fff;
  border-bottom: 1px solid var(--line);
}
.shop-grid > .amazon-pick .pick-brand {
  margin: 0.8rem 1rem 0.15rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1.3; color: var(--cedar);
}
.shop-grid > .amazon-pick h2,
.shop-grid > .amazon-pick h3 {
  margin: 0 1rem 0.3rem; padding: 0; border: 0;
  font-family: var(--sans); font-weight: 700; font-size: 1.05rem; line-height: 1.3; letter-spacing: 0;
  color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; min-height: 2.6em;
}
.shop-grid > .amazon-pick .pick-reason {
  margin: 0 1rem 0.9rem;
  font-size: 0.92rem; line-height: 1.4; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; min-height: 2.8em;
}
.shop-grid > .amazon-pick .pick-btn {
  display: block; margin: auto 1rem 0;
  padding: 0.8rem 1rem; border-radius: 6px;
  background: var(--cedar); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: 1.02rem; line-height: 1.2;
  text-align: center; text-decoration: none;
  transition: background-color 0.15s;
}
.shop-grid > .amazon-pick .pick-btn:hover,
.shop-grid > .amazon-pick .pick-btn:focus-visible { background: #8e4826; color: #fff; }

/* ---- v2: Amazon picks sections on category pages ---- */
/* Affiliate line just above an Amazon picks grid. */
.aff-line { margin: -0.35rem 0 1rem; font-size: 0.95rem; color: var(--muted); }
.aff-line a { color: var(--moss); font-weight: 600; }
.page-band + .aff-line { margin-top: 0; }
.tools-main .section-head { margin-top: 0.4rem; }

/* Small "Amazon" chip next to the brand label. */
.shop-grid > .amazon-pick .pick-chip {
  display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; vertical-align: 0.05em;
}
/* Exact names and full reason lines: allow 3 lines for names, no clamp on the reason.
   Grid rows stretch, and the pinned button keeps every button on one baseline. */
.shop-grid > .amazon-pick h2,
.shop-grid > .amazon-pick h3 { -webkit-line-clamp: 3; line-clamp: 3; min-height: 3.9em; }
.shop-grid > .amazon-pick .pick-reason { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; min-height: 0; }

/* Text-only card: no maker photo we could confirm, so a tinted panel with the
   brand name, the same square size as the photo frame. */
.shop-grid > .amazon-pick .pick-text-panel {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1;
  background: #efe7d8; border-bottom: 1px solid var(--line); padding: 1rem;
}
.shop-grid > .amazon-pick .pick-text-panel span {
  font-family: var(--serif); font-weight: 650; font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.02em; color: var(--moss); text-align: center; line-height: 1.1;
}
/* Very wide photo (rain wand): whole and centred in the square frame. */
.shop-grid > .amazon-pick img.pick-wide { object-fit: contain; object-position: center; padding: 1.25rem; }
/* Text-only panel: optional one-word product line under the brand. */
.shop-grid > .amazon-pick .pick-text-panel { flex-direction: column; gap: 0.35rem; }
.shop-grid > .amazon-pick .pick-text-panel small {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600; line-height: 1.2;
  color: var(--muted); text-align: center;
}

/* ---- v3: Quick-pick box at the top of guides ---- */
/* Up to 3 role-labelled rows: thumbnail, role + name + one-line reason, button.
   Reuses the .pick-brand / .pick-reason / .pick-btn names from the .amazon-pick cards. */
.quick-pick { margin: 0.6rem 0 1.6rem; padding: 1rem 1.1rem 0.4rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.quick-pick > h2 { margin: 0 0 0.35rem; padding: 0; border: 0; font-size: 1.3rem; }
.quick-pick > .aff-line { margin: 0 0 0.8rem; }
.qp-list { list-style: none; margin: 0; padding: 0; }
.article .qp-list { padding-left: 0; margin: 0; }
.qp-list > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 0.3rem 0.9rem; align-items: center; margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.article .qp-list > li { margin: 0; }
.qp-list > li::marker { content: none; }
.qp-thumb { width: 4.5rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.qp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 0.2rem; }
.qp-thumb.pick-text-panel { background: #efe7d8; padding: 0.2rem; }
.qp-thumb.pick-text-panel span { font-family: var(--serif); font-weight: 650; font-size: 0.74rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--moss); text-align: center; }
.qp-role { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; color: var(--cedar); }
.qp-list h3 { margin: 0.1rem 0 0.15rem; font-family: var(--sans); font-weight: 700; font-size: 1.02rem; line-height: 1.3; letter-spacing: 0; }
.qp-list .pick-chip { display: inline-block; margin-left: 0.3rem; padding: 0.02rem 0.4rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; font-weight: 600; vertical-align: 0.1em; }
.qp-list .pick-reason { margin: 0; font-size: 0.92rem; line-height: 1.4; color: var(--muted); }
.qp-list .qp-price { margin: 0.15rem 0 0; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.qp-list .qp-price span { font-weight: 400; color: var(--muted); }
.qp-act { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.qp-list .pick-btn, .qp-list .shop { display: block; padding: 0.6rem 1rem; border-radius: 6px; background: var(--cedar); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 0.95rem; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; }
.qp-list .pick-btn:hover, .qp-list .pick-btn:focus-visible, .qp-list .shop:hover { background: #8e4826; color: #fff; }
.qp-list .shop-alt { margin: 0; font-size: 0.85rem; }
@media (max-width: 640px) {
  .quick-pick { padding: 0.85rem 0.85rem 0.3rem; }
  .qp-list > li { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .qp-thumb { width: 3.6rem; height: 3.6rem; grid-row: span 2; align-self: start; }
  .qp-thumb.pick-text-panel span { font-size: 0.62rem; }
  .qp-act { grid-column: 2; align-items: flex-start; }
  .qp-list .pick-btn, .qp-list .shop { display: inline-block; }
}
/* "How much soil?" links */
.calc-link { font-weight: 700; }
.soil-band .calc-link { display: inline-block; margin-left: 1rem; }
@media (max-width: 640px) { .soil-band .calc-link { display: block; margin: 0.7rem 0 0; } }