/* =============================================================================
   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. */
/* The heading sits ABOVE the card, not inside it, so the border/radius live on
   .stw-pricing-tiers-list rather than on this wrapper. The plugin renders the
   title as a sibling directly before that list, so no markup change is needed
   to get it out of the box — only moving which element is drawn as the box. */
.stw-pricing-tiers-wrapper {
  margin: 12px 0 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 0 8px !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;
  border: 1px solid var(--stw-grey-200);
  border-radius: var(--stw-radius-lg);
  overflow: hidden;
}

.stw-pricing-tier-option {
  border: 0 !important;
  border-top: 1px solid var(--stw-grey-200) !important;
  border-radius: 0 !important;
  padding: 9px 14px !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;
}

/* Tag-qualified past the plugin's own .fw-semibold (Bootstrap, 600) on the
   same element — the row labels read as bold, matching the price beside them. */
.stw-pricing-tier-option .stw-tier-quantity {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--stw-ink);
}

/* Each row is a two-track grid — price group, then a fixed-width pill column —
   so the prices end on the same x-position down the card however wide the pill
   text is ("Save 2%" vs "Save 10%"). Left as a flex row it was the pill's own
   content width that set where each price landed, which is what made the
   column look ragged. !important overrides the plugin's inline .d-flex. */
.stw-pricing-tier-option .stw-tier-pricing {
  display: grid !important;
  grid-template-columns: 1fr 92px;
  align-items: center;
  gap: 0 10px !important;
}

.stw-pricing-tier-option .stw-tier-pricing > .text-nowrap {
  justify-self: end;
}

/* stw-product.css sizes the single-product page's hero price at 2.25rem via
   `.stw-product-page .entry-summary.stw-product__summary .price` — 4 classes,
   which also matches the .price spans the plugin renders inside every tier
   row, so each row was carrying the full 36px hero treatment and the card was
   several times taller than it needed to be. Matched at 4 classes here and
   won on load order (this file declares stw-product as a dependency, so it
   always prints after it) rather than with !important. 1.375rem is the theme's
   next step down the heading scale (h4, sass/_stw-global.scss). */
.stw-pricing-tiers-wrapper .stw-pricing-tier-option .stw-tier-pricing .price,
.stw-pricing-tiers-wrapper .stw-pricing-tier-option .stw-tier-pricing .price ins {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--stw-ink);
  text-decoration: none;
}

.stw-pricing-tiers-wrapper .stw-pricing-tier-option .stw-tier-pricing .price del {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-right: 4px;
  color: var(--stw-grey-500);
}

.stw-pricing-tier-option .stw-tier-pricing small {
  font-size: 0.75rem;
  font-weight: 600;
}

.stw-pricing-tier-option .btn {
  font-size: 0.78125rem;
  font-weight: 800;
  line-height: 1.35;
  background: var(--stw-pink-100) !important;
  color: var(--stw-pink-600) !important;
  border: 0 !important;
  border-radius: var(--stw-radius-pill) !important;
  padding: 4px 6px !important;
  justify-self: stretch;
  text-align: center;
}

/* The single-item row has no saving, so the plugin renders no pill for it and
   its price sat alone in the grid's first track, out of line with every row
   below. This fills that track with a muted "Full Price" stand-in.
   Generated content rather than markup because the plugin echoes the row
   directly with no filter to hook — the proper home for this is the plugin
   itself, and this should be removed once it renders its own.
   :not(:only-child) keeps it off products that have no tiers at all, where the
   card is a single row and there is nothing for it to align with. */
.stw-pricing-tier-option:not(:only-child)[data-quantity="1"] .stw-tier-pricing::after {
  content: "Full Price";
  font-size: 0.78125rem;
  font-weight: 800;
  line-height: 1.35;
  /* A pale tint of the brand blue — mixed here rather than reusing
     --stw-cyan-100 so the strength can be dialled independently of the
     palette. Text in cyan-700 for contrast on it, mirroring how the pink Save
     pill above pairs pink-100 with pink-600. */
  background: color-mix(in srgb, var(--stw-cyan) 21%, #fff);
  color: var(--stw-cyan-700);
  border-radius: var(--stw-radius-pill);
  padding: 4px 6px;
  justify-self: stretch;
  text-align: center;
}

/* Narrowest phones: the label, price and pill are all on one line, so the pill
   column gives back a little width before anything has to wrap. */
@media (max-width: 400px) {
  .stw-pricing-tier-option .stw-tier-pricing {
    grid-template-columns: 1fr 78px;
  }

  .stw-pricing-tiers-wrapper .stw-pricing-tier-option .stw-tier-pricing .price,
  .stw-pricing-tiers-wrapper .stw-pricing-tier-option .stw-tier-pricing .price ins {
    font-size: 1.25rem;
  }
}