/*
 * Bulk ladder section stylesheet.
 *
 * Keep these globally required .pp-bulk-* / .awdr-bulk-* rules out of
 * css/overrides.css: tools/scripts/split-overrides-css.js routes source by
 * selector, so section delivery must not depend on that classification.
 * Never place them directly in css/overrides-base.css either: that file is
 * generated, and regeneration deletes rules that have no canonical source.
 */

/* ============================================================================
   Bulk discount ladder v1 — compact progress rail (gate pp_bulk_ladder_v1).
   Reskins the SAME WDR bulk table the cards skin, into a slim rail:
   folded message line · thin track+dots+gold fill · merged "N+ · P%" labels.
   Qty-driven bits (fill width, .pp-hit dots, clean labels, message) are set by
   assets/js/pp-bulk-tier-upsell.js. Added 2026-07-02.
   ========================================================================== */
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-upsell{display:none !important} /* message folds onto the rail */

html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table{
  display:block !important;width:100% !important;box-sizing:border-box !important;
  border:1px solid #e7e1d4 !important;background:#fff !important;border-radius:12px !important;
  box-shadow:none !important;overflow:visible !important;margin:1.2em 0 !important;
  padding:.7rem .95rem .9rem !important;--pp-bulk-fill:0%}
/* nested inner .awdr div (WDR wraps twice): strip its box so we don't get a
   double card, but keep it full width so the viz/labels fill the row. */
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table .awdr-bulk-customizable-table{
  border:0 !important;background:none !important;border-radius:0 !important;padding:0 !important;margin:0 !important;width:100% !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table::before{content:none !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table thead{display:none !important}

/* folded message line (a button — click bumps qty). Force-beat the theme's
   navy button styling so it reads as a subtle text line, not a filled bar. */
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg{
  display:flex !important;align-items:center;gap:.4rem;width:100% !important;text-align:left !important;
  background:none !important;background-color:transparent !important;border:0 !important;box-shadow:none !important;
  padding:0 0 .6rem !important;margin:0 !important;cursor:pointer;font:inherit;color:#33405c !important;
  font-size:.86rem !important;font-weight:600 !important;text-transform:none !important;letter-spacing:normal !important;
  min-height:1.9rem !important;height:auto !important;line-height:1.4 !important;flex-wrap:nowrap !important;
  white-space:nowrap !important;-webkit-appearance:none;appearance:none}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg .txt{white-space:nowrap}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg:hover{background:none !important;color:#16233f !important}
/* On narrow screens drop the decorative label so the dynamic state stays ONE
   line (reserved min-height above → no layout shift between states, CLS=0). */
@media (max-width:430px){
  html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg .lbl{display:none !important}
  html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg{font-size:.82rem !important}
}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg .lbl{color:#6f6a5f;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-right:auto}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg b{color:#b0853a;font-weight:800}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg.is-max,
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg.is-max b{color:#1f7a4d}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg:focus-visible{outline:2px solid #b0853a;outline-offset:2px}

/* WDR's own table is hidden — the viz owns the entire rail (dots+legs+labels)
   so alignment never depends on WDR's async nested grid. parseTiers() still
   reads the hidden cells for the tier data. */
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table table{display:none !important}

/* self-contained rail viz: a track (2 navy legs + 3 gold dots) over a 3-column
   label row — dots and labels share the same 16.66/50/83.33% columns. */
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz{position:relative;margin:.15rem 0 0;width:100% !important;display:block !important;box-sizing:border-box}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-track{position:relative !important;display:block !important;height:20px !important;width:100% !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-labels{display:grid !important;grid-template-columns:repeat(3,1fr) !important;width:100% !important;margin-top:.5rem}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-lb{text-align:center !important;display:block !important;font-size:.8rem;color:#6f6a5f;font-variant-numeric:tabular-nums;line-height:1.3}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-lb b{color:#16233f;font-weight:800}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-lb.on,
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-lb.on b{color:#b0853a}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-seg{position:absolute !important;top:50%;transform:translateY(-50%);height:8px;background:#e7e1d4;border-radius:6px;overflow:hidden}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-seg0{left:16.66% !important;right:50% !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-seg1{left:50% !important;right:16.66% !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-fill{position:absolute !important;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#16233f,#274069);border-radius:6px;transition:width .4s cubic-bezier(.4,0,.2,1)}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-dot{position:absolute !important;top:50% !important;width:20px !important;height:20px !important;border-radius:50%;background:#fff;border:2px solid #efe4cb;transform:translate(-50%,-50%);transition:border-color .3s,background .3s;box-shadow:0 1px 3px rgba(22,35,63,.12);z-index:2}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-dot.d0{left:16.66% !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-dot.d1{left:50% !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-dot.d2{left:83.34% !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-dot.on{background:#b0853a;border-color:#b0853a;box-shadow:0 2px 6px rgba(176,133,58,.4)}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid #b0853a;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-dot.pop{animation:ppBulkPop .5s cubic-bezier(.34,1.56,.64,1)}
  html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__viz .pp-dot.pop .pp-ring{animation:ppBulkRing .6s ease-out}
}
@keyframes ppBulkPop{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.45)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes ppBulkRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.5)}}
/* SR-only unlock announcement (aria-live) */
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* message active-savings + unlock states */
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg .pp-save{color:#1f7a4d !important;font-weight:800}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg.is-unlocked .txt{color:#b0853a !important;font-weight:700}
html body.pp-theme-v2.pp-bulk-ladder-v1 .pp-bulk-ladder__msg .pp-check{display:inline-flex;width:15px;height:15px;border-radius:50%;background:#b0853a;color:#fff;align-items:center;justify-content:center;font-size:.62rem;font-weight:900;margin-right:.25rem;vertical-align:middle}
/* labels: JS rewrites the range cell to "N+" and the discount cell to "P%".
   Hide WDR's title cell ("Bulk Discount" / ">11 Bulk Discount") in CSS — the JS
   inline display:none can't win against the td rule below, so hide it here. */
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table tbody td.wdr_bulk_title{display:none !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table tbody td{
  display:inline !important;padding:0 !important;border:0 !important;background:transparent !important;
  font-size:.8rem !important;color:#6f6a5f !important;text-align:center !important;
  font-variant-numeric:tabular-nums;line-height:1.3 !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table tbody td.wdr_bulk_range,
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table tbody td#customize-bulk-table-range{
  color:#16233f !important;font-weight:800 !important}
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table tbody td.wdr_bulk_range::after,
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table tbody td#customize-bulk-table-range::after{
  content:" · " !important;color:#b0853a !important;font-weight:700}
html body.pp-theme-v2.pp-bulk-ladder-v1 .awdr-bulk-customizable-table tbody tr.pp-active td{color:#b0853a !important}