/* Precision Labs — the bulk & clinic quote page (page-bulk-clinic.php).

   Same rules the rest of the theme keeps to, and they are audited rather than
   asserted:

     • Every colour is a var(--pl-*) from tokens.css. There is not one hex or
       rgb() literal in this file.
     • Every corner is square. The `border-radius: 0` declarations below are
       deliberate, not leftovers — iOS rounds anchors styled as buttons on its
       own, so square has to be said out loud rather than merely omitted.
     • Nothing under 12px, and no interactive box under 44px, below 768px.
     • Every 1fr grid track that can hold text is minmax(0, 1fr). A bare 1fr is
       min-content-floored, so one long word — an email address, a SKU — blows
       the column out and scrolls the page sideways.

   The shared kit (.pl-wrap, .pl-section, .pl-card, .pl-panel, .pl-info,
   .pl-btn, .pl-badge, .pl-link, the type scale) is defined in base.css and the
   dark hero band is .pl-banner from shop.css. Both are extended here, never
   redefined — the hero is the collection banner's non-photo form, so the navy
   wash and its 40px grid come from one place for the whole site.

   Load order: enqueued from inside the template with pl-mobile as its
   dependency, so this file lands after the small-screen corrections and the
   44px floors below win their ties without !important. */

/* ══ hero ════════════════════════════════════════════════════════════════ */

/* Taller than a collection banner because it carries a call to action rather
   than only a heading. */
.pl-bulk__hero { min-height: 260px; }

.pl-bulk__heroin {
  gap: 14px;
  padding-top: 44px;
  padding-bottom: 44px;
}

.pl-bulk__stand { max-width: 620px; }

.pl-bulk__herocta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

/* An email address is one unbreakable token. In a flex row at 375px it is the
   single most likely cause of a sideways scroll on this page. */
.pl-bulk__herocta .pl-btn {
  border-radius: 0;
  overflow-wrap: anywhere;
}

/* The one place this page overrides the button's type treatment, and only for
   this reason: .pl-btn uppercases and widely letter-spaces its label, which is
   correct for "Request a quote" and wrong for an address. An email address is
   a literal string someone may retype, and INFO@PRECISIONLABSRESEARCH.CA
   misrepresents what is actually there. Case and tracking are restored; the
   button's size, colour and square corners are not touched. */
.pl-bulk__mail {
  font-size: 13px;
  text-transform: none;
  letter-spacing: .01em;
}

/* ══ shared section furniture ════════════════════════════════════════════ */

.pl-bulk__h { margin-top: 10px; }

.pl-bulk__lead {
  max-width: 660px;
  margin-top: 14px;
}

.pl-bulk__note {
  max-width: 720px;
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--pl-muted);
  text-wrap: pretty;
}

/* ══ what a quote gets you ═══════════════════════════════════════════════ */

.pl-bulk__value { padding-bottom: 0; }

.pl-bulk__intro {
  max-width: 760px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--pl-t3);
}

.pl-bulk__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

/* A hairline of navy along the top edge, the same device the section headers
   use, so four cards read as one row rather than four loose boxes. */
.pl-bulk__card { border-top: 2px solid var(--pl-navy); }

.pl-bulk__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--pl-bd-strong);
  color: var(--pl-navy);
}

.pl-bulk__cardh { margin-top: 14px; }

.pl-bulk__card .pl-body { margin-top: 10px; }

/* ══ the automatic ladder ════════════════════════════════════════════════ */

/* 1px gaps over a line-coloured backdrop draw the hairline grid without
   doubling borders where two rungs meet — the same construction .pl-statgrid
   uses on the purity page. */
/* auto-fit rather than a fixed count: the number of rungs is whatever the
   pricing engine is configured with, and a hard `repeat(3, …)` would leave a
   dead column at two tiers and a lonely orphan at four. The `min(220px, 100%)`
   floor is what keeps it from overflowing at 375px — the same construction
   .pl-lotlist uses in pages.css. */
.pl-bulk__ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1px;
  margin-top: 26px;
  padding: 0;
  border: 1px solid var(--pl-bd);
  background: var(--pl-bd);
  list-style: none;
}

.pl-bulk__rung {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  background: var(--pl-surface);
}

/* The best rate is the one rung worth pulling forward, and it is derived from
   the tier list rather than typed — see the template. */
.pl-bulk__rung.is-best { background: var(--pl-info-bg); }

.pl-bulk__rate {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--pl-navy);
}

.pl-bulk__qty {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-muted);
}

.pl-bulk__badge {
  align-self: flex-start;
  margin-top: 4px;
  border-radius: 0;
}

/* ══ why it is quoted ════════════════════════════════════════════════════ */

.pl-bulk__why { padding-top: 0; }

.pl-bulk__whypanel { max-width: 860px; }

.pl-bulk__whyh { text-wrap: balance; }

.pl-bulk__whypanel > * + * { margin-top: 14px; }

.pl-bulk__depends {
  display: grid;
  gap: 10px;
  padding-left: 20px;
  list-style: disc;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pl-t2);
}

.pl-bulk__depends li { text-wrap: pretty; }

/* ══ what to send ════════════════════════════════════════════════════════ */

.pl-bulk__send { padding-top: 0; }

/* The numbers are a CSS counter, not typed markup: an item added or removed in
   the template cannot leave the list mis-numbered. */
.pl-bulk__steps {
  counter-reset: pl-bulk-step;
  margin-top: 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pl-bd);
}

.pl-bulk__step {
  position: relative;
  padding: 18px 0 18px 52px;
  border-bottom: 1px solid var(--pl-bd);
}

.pl-bulk__step::before {
  counter-increment: pl-bulk-step;
  content: counter(pl-bulk-step, decimal-leading-zero);
  position: absolute;
  top: 18px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--pl-navy);
  color: var(--pl-on-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.pl-bulk__steph {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--pl-ink);
  text-wrap: pretty;
}

.pl-bulk__stepp {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pl-muted);
  text-wrap: pretty;
}

.pl-bulk__form { margin-top: 24px; }

.pl-bulk__formcta { margin-top: 16px; }

.pl-bulk__formcta .pl-btn { border-radius: 0; }

/* ── the aside ──────────────────────────────────── */

.pl-bulk__aside { position: sticky; top: 24px; }

.pl-bulk__asidep { margin-top: 10px; }

.pl-bulk__asklist {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.pl-bulk__asklist li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pl-t2);
  text-wrap: pretty;
}

.pl-bulk__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  color: var(--pl-ok-fg);
}

/* ══ lead times ══════════════════════════════════════════════════════════ */

.pl-bulk__times { padding-top: 0; }

.pl-bulk__leadgrid { margin-top: 24px; }

.pl-bulk__leadgrid .pl-body { margin-top: 10px; }

/* ══ the conditions ══════════════════════════════════════════════════════ */

.pl-bulk__terms { padding-top: 0; }

.pl-bulk__termspanel > * + * { margin-top: 14px; }

.pl-bulk__termslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--pl-info-bd);
}

/* ══ start a quote ═══════════════════════════════════════════════════════ */

.pl-bulk__close { padding-top: 0; }

.pl-bulk__closepanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px;
  align-items: center;
}

.pl-bulk__closeh {
  margin-top: 10px;
  text-wrap: balance;
}

.pl-bulk__closecopy .pl-body {
  max-width: 620px;
  margin-top: 14px;
}

.pl-bulk__closecta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.pl-bulk__closecta .pl-btn { border-radius: 0; }

/* An email address cannot be hyphenated, so it is allowed to break anywhere
   rather than pushing this column past its track. */
.pl-bulk__closelink { overflow-wrap: anywhere; }

/* ══ responsive ══════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  .pl-bulk__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The aside drops below the checklist at this width (base.css collapses
     .pl-cols--narrow), so sticking it to the viewport would strand it. */
  .pl-bulk__aside { position: static; }

  .pl-bulk__closepanel { grid-template-columns: minmax(0, 1fr); }

  .pl-bulk__closecta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
  }
}

@media (max-width: 767px) {
  .pl-bulk__hero { min-height: 0; }

  .pl-bulk__heroin {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  /* Both hero buttons take the full row so neither target can be clipped by
     the other wrapping onto its line. */
  .pl-bulk__herocta { flex-direction: column; }
  .pl-bulk__herocta .pl-btn { width: 100%; }

  .pl-bulk__intro { font-size: 16.5px; }

  .pl-bulk__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  /* No ladder override is needed here: the auto-fit floor above already
     collapses it to one column below ~460px of content width. */
  .pl-bulk__rung { padding: 20px 18px; }
  .pl-bulk__rate { font-size: 30px; }

  .pl-bulk__step { padding-left: 44px; }
  .pl-bulk__step::before {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .pl-bulk__closecta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .pl-bulk__closecta .pl-btn { width: 100%; }

  /* ── floors ─────────────────────────────────────
     Type floor. Everything on this page is at or above 12px at desktop; these
     are the values that sit closest to the line once the scale steps down. */
  .pl-bulk__note { font-size: 12.5px; }
  .pl-bulk__qty { font-size: 12px; }
  .pl-bulk__asklist li { font-size: 13px; }
  .pl-bulk__stepp { font-size: 13.5px; }

  /* No tap-target floor is repeated here on purpose. Every interactive element
     this page introduces is a .pl-btn or a .pl-link, and mobile.css already
     floors both at 44px — and it does so up to 1199px, not 767px, because
     touch rather than width is what makes a target too small. Restating the
     floor inside THIS 767px block would have documented a narrower rule than
     the one actually in force, which is how a later edit ends up "fixing" a
     tablet regression that was never broken. Measured: 0 targets under 44px at
     375, 390, 412 and 768. */
}