/* ==========================================================================
   /cumpara only — the bits of the shop page that /birouri does not use (price,
   the pack prices, the orange „Bonus prima pungă” badge, the 69-lei bag link, „Ce primești în Prima Cutie”,
   „Fără surprize”). Linked after /shop.css, which holds the shared layout.
   ==========================================================================

/* price under the chips */
.s-price { margin-top: 24px; }
.s-price > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.s-price > span[hidden] { display: none; }
.s-price__amount { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: .01em; }
.s-price__unit { font-size: 14px; color: var(--s-muted); font-weight: 500; }

/* pack cards: price column + the one orange badge */
.s-pack__price { flex: none; text-align: right; font-weight: 700; font-size: 18px; display: flex; flex-direction: column; line-height: 1.2; }
.s-pack__per { font-size: 12.5px; font-weight: 500; color: var(--s-muted); }
.s-pack__badge--start { background: var(--orange); color: var(--s-ink); }

/* the one-off bag (punga-simpla, no subscription): a quiet text link under the pack cards and the table */
.s-single { margin: -12px 0 14px; text-align: center; font-size: 15px; color: var(--s-muted); line-height: 1.4; }
.s-single .s-link { display: inline-block; padding: 11px 0; font-size: 15px; line-height: 1.4; text-wrap: balance; }
.s-single--center { max-width: 900px; margin: 20px auto 0; padding: 0 4px; }

/* what you get */
.s-box__hero { margin: 0; }
.s-box__hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: center 55%; border-radius: 20px; box-shadow: var(--s-shadow-lg); }
.s-box__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(16px, 2.4vw, 28px); }
.s-extra img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: var(--s-shadow); }
.s-pill {
  display: inline-block; margin-top: 16px; padding: 4px 10px; border-radius: 999px;
  background: var(--s-kraft-tint); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.s-extra__title { margin-top: 8px; font-family: var(--font-body); font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.s-extra p:last-child { margin-top: 4px; color: var(--s-muted); font-size: 15px; max-width: 46ch; }

.s-kit {
  max-width: 440px; margin: clamp(48px, 6vw, 72px) auto 0; padding: 24px;
  background: var(--s-card); border: 1px solid var(--s-line); border-radius: 18px; box-shadow: var(--s-shadow-lg);
}
.s-kit__title { font-family: var(--font-edit); font-style: italic; font-size: 22px; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.s-kit__rows { margin: 14px 0 20px; }
.s-kit__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--s-line); font-size: 15px; }
.s-kit__rows dt { color: var(--s-muted); }
.s-kit__rows dd { margin: 0; font-weight: 700; white-space: nowrap; }
.s-kit__inc { font-weight: 600 !important; }
.s-kit__note { margin-top: 10px; text-align: center; font-size: 13px; color: var(--s-soft); }

/* no surprises */
.s-calm {
  max-width: 640px; margin: 0 auto; text-align: center; padding: clamp(40px, 5vw, 56px) clamp(24px, 4vw, 48px);
  background: var(--s-ink); color: var(--s-bg); border-radius: 24px; box-shadow: var(--s-shadow-lg);
}
.s-calm .s-h2 { color: var(--s-bg); margin-top: 18px; }
.s-calm p { margin: 12px auto 0; max-width: 46ch; color: rgba(250, 245, 235, .78); font-size: 17px; }
.s-calm__roundel .s-roundel__disc--line { stroke: rgba(250, 245, 235, .4); }

@media (max-width: 719px) {
  .s-box__pair { grid-template-columns: minmax(0, 1fr); }
  .s-box__hero img { aspect-ratio: 4 / 3; }
}