/* =============================================================================
   stw2026 — pricing-tiers table shared styling
   "Buy More, Save More" card (stw-pricing-tiers plugin), styled to the STW
   design system's oatmeal-card treatment.

   Extracted from stw-product.css (v2.28.10) so it can be enqueued on shop /
   category / tag archives too, for stw-quick-view's modal — which renders the
   same plugin markup but never loads is_product()-gated stw-product.css. The
   single-product page's other rules (gallery, buy-box, sticky mobile bar) stay
   in stw-product.css; only this self-contained block moved here.

   Standalone rather than a sass/ partial so a tweak doesn't need a full bundle
   recompile plus a cache-buster bump — same reasoning as stw-product.css and
   stw-basket.css. Colours come from the --stw-* custom properties that
   _stw-global.scss publishes from _theme_variables.scss, except the two
   oklch(...) literals below, which are deliberately duplicated (see their own
   comments) rather than promoted into SASS variables, since this file lives
   outside the SASS pipeline.
   ========================================================================== */

/* ---------- pricing tiers (stw-pricing-tiers plugin) ------------------------ */

/* Plugin-rendered markup (STW_Pricing_Tiers_Frontend::display_pricing_tiers(),
   wp-content/plugins/stw-pricing-tiers/includes/class-frontend.php) — no
   theme template involved, restyled in place to the "Buy More, Save More"
   card treatment. */
.stw-pricing-tiers-wrapper {
  border: 1px solid var(--stw-grey-200);
  border-radius: var(--stw-radius-lg);
  overflow: hidden;
  margin-bottom: 4px !important;
}

/* The tinted background belongs on the whole header block, not just the
   title line — .stw-pricing-tiers-header wraps both
   .stw-pricing-tiers-title and .stw-pricing-tiers-subtitle (see
   class-frontend.php's display_pricing_tiers()), so previously the
   subtitle rendered on plain white below the tinted box instead of inside
   it. */
/* Deeper "band" tone, matching --stw-cat-band in sass/category/_category.scss
   (same hue as the page's oatmeal base, dropped in lightness/bumped in
   chroma just far enough to read as a distinct band) — duplicated as a
   literal rather than a shared SASS variable since this file lives outside
   the SASS pipeline. Deliberately darker than .stw-pricing-tier-option below,
   which stays on the base oatmeal tone (the same tone stw-product.css's own
   .stw-product-page wrapper rule uses on the single-product page): the
   header needs to read as a distinct strip, not blend into the page. */
.stw-pricing-tiers-header {
  background: oklch(0.93 0.016 70);
  padding: 12px 16px;
}

.stw-pricing-tiers-title {
  margin: 0 !important;
  font-size: 1rem;
  font-weight: 800;
  color: var(--stw-ink);
}

.stw-pricing-tiers-subtitle {
  margin: 2px 0 0 !important;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--stw-ink);
}

.stw-pricing-tiers-list {
  gap: 0 !important;
}

.stw-pricing-tier-option {
  border: 0 !important;
  border-top: 1px solid var(--stw-grey-200) !important;
  border-radius: 0 !important;
  padding: 13px 16px !important;
  /* Same oatmeal tone as .stw-pricing-tiers-header above, so the whole card
     reads as one surface instead of grey-header-plus-white-rows. */
  background: oklch(0.972 0.008 70) !important;
}

.stw-pricing-tier-option:first-child {
  border-top: 0 !important;
}

.stw-tier-quantity {
  font-size: 0.9375rem;
  color: var(--stw-ink);
}

.stw-tier-pricing .price,
.stw-tier-pricing .price ins {
  font-weight: 700;
  color: var(--stw-ink);
  text-decoration: none;
}

.stw-pricing-tier-option .btn {
  font-size: 0.78125rem;
  font-weight: 800;
  background: var(--stw-pink-100) !important;
  color: var(--stw-pink-600) !important;
  border: 0 !important;
  border-radius: var(--stw-radius-pill) !important;
  padding: 4px 11px !important;
}