/* Wave 3 · shared components + footer: responsive pass for 320 to 1920.
   Slice: footer.php + inc/template-tags.php (section head, trade strip, price table,
   process steps, CTA band, footer). Loads after 10-/20- parts, so it wins ties. */

/* ---------- section head ---------- */
.section-head { min-width: 0; }
.section-head .display { overflow-wrap: break-word; text-wrap: balance; }
.section-head .lede { max-width: 62ch; text-wrap: pretty; }
@media (max-width: 560px) {
  .section-head { margin-bottom: 24px; }
  .section-head .lede { font-size: 1rem; line-height: 1.55; }
  .section-head .eyebrow::after { flex-basis: 48px; }
}

/* ---------- trade strip ---------- */
.trade-strip > div { min-width: 0; }
.trade-strip dd span { font-size: .84rem; }
/* 6 cells only once each cell has room for "EXW / FOB" at full size. */
@media (min-width: 1081px) and (max-width: 1240px) {
  .trade-strip > div { padding-inline: 12px; }
  .trade-strip dd b { font-size: 1.15rem; }
}
@media (max-width: 1080px) and (min-width: 641px) {
  .trade-strip dd span { font-size: .9rem; }
}
/* Phones: restack into a spec-sheet table, label left, value and note right. */
@media (max-width: 560px) {
  .trade-strip { grid-template-columns: 1fr; }
  .trade-strip > div {
    grid-template-columns: minmax(92px, 32%) minmax(0, 1fr); gap: 4px 14px;
    padding: 14px 14px 14px 12px; align-items: baseline;
  }
  .trade-strip dt { flex-wrap: wrap; gap: 6px; line-height: 1.3; }
  .trade-strip dd b { font-size: 1.2rem; white-space: normal; }
  .trade-strip dd span { font-size: .9375rem; line-height: 1.45; }
}

/* ---------- price tier table + calculator ---------- */
.pricing { min-width: 0; }
.pricing > * { min-width: 0; }
.tier-bar { width: min(96px, 100%); }
.pricing .calc input[type="number"] { min-height: 44px; font-size: 16px; }
.pricing .calc input[type="range"] { min-height: 32px; }
.pricing .calc .seg button { min-height: 44px; }
.pricing .calc-out b { overflow-wrap: anywhere; }
@media (min-width: 901px) and (max-width: 1100px) {
  .pricing { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}
/* Phones: fit the four columns without a sideways scroll. */
@media (max-width: 560px) {
  .pricing table.tiers { min-width: 0; table-layout: auto; }
  .pricing .tiers th, .pricing .tiers td { padding: 10px 8px; }
  .pricing .tiers th:first-child, .pricing .tiers td:first-child { padding-left: 10px; }
  .pricing .tiers th:last-child, .pricing .tiers td:last-child { padding-right: 10px; text-align: right; }
  .pricing .tiers thead th { white-space: normal; line-height: 1.3; vertical-align: bottom; font-size: .64rem; }
  .pricing .tiers td { font-size: .9rem; }
  .pricing .tiers .tier-p { min-width: 0; }
  .pricing .tier-pick { min-width: 44px; padding: 0 6px; }
  .pricing .tier-tip { font-size: .66rem; }
  .pricing .calc { padding: 16px; }
  .pricing .calc .seg { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; }
  .pricing .calc-out b { font-size: 1.3rem; }
}
@media (max-width: 380px) {
  .pricing .tiers th, .pricing .tiers td { padding-inline: 6px; }
  .pricing .tiers td { font-size: .84rem; }
  .pricing .calc-out { grid-template-columns: 1fr; }
  .pricing .qty-row input[type="number"] { width: 92px; }
}

/* ---------- process steps (6) ---------- */
/* Six columns get too narrow below about 1180px, so go to 3 and drop the line. */
@media (max-width: 1180px) and (min-width: 521px) {
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; column-gap: 20px; }
  .process-line { display: none; }
  .process li { padding-top: 14px; border-top: 1px solid var(--rule-strong); }
}
/* Phones: a vertical timeline with the step tag in a left rail. */
@media (max-width: 520px) {
  .process { gap: 0; }
  .process li {
    grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 4px;
    padding-bottom: 22px; position: relative;
  }
  .process li .dot { grid-row: 1 / span 2; align-self: start; min-width: 44px; }
  .process li > b { padding-top: 4px; }
  .process li > span:last-child { font-size: .9375rem; line-height: 1.5; }
  .process li:not(:last-child)::after {
    content: ""; position: absolute; left: 22px; top: 34px; bottom: 6px;
    border-left: 1px solid var(--rule-strong);
  }
}

/* ---------- 4-step lists ---------- */
@media (max-width: 1024px) and (min-width: 861px) {
  .steps4 { gap: 20px; }
}
@media (max-width: 480px) {
  .steps4 span { font-size: .9375rem; }
}

/* ---------- CTA band ---------- */
.cta-band .cta-copy { min-width: 0; }
.cta-band .display { overflow-wrap: break-word; text-wrap: balance; }
@media (max-width: 1024px) {
  .cta-band .cta-inner { align-items: flex-start; }
  .cta-band .cta-copy { max-width: none; flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .cta-band .lede { font-size: 1rem; }
  .cta-band .cta-actions { width: 100%; }
  .cta-band .cta-actions .btn { flex: 1 1 200px; justify-content: center; }
}
@media (max-width: 480px) {
  .cta-band .cta-actions .btn { flex-basis: 100%; }
  .cta-meta li { font-size: .9375rem; }
  .cta-meta li span { margin-bottom: 4px; }
  .cta-meta a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- footer ---------- */
.foot { overflow-wrap: break-word; }
.foot-grid > * { min-width: 0; }
.foot-contact a { max-width: 100%; }

/* Small desktop and tablet: the one-line identity stacks over the spec block,
   and the brand block takes its own row (logo left, copy right). */
@media (max-width: 1080px) {
  .foot-id { grid-template-columns: 1fr; }
  .foot-id-line { max-width: 40ch; }
}
@media (max-width: 1080px) and (min-width: 600px) {
  .foot-grid > .foot-brand {
    grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 28px; align-items: start;
    padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .foot-grid > .foot-brand .mark { grid-row: 1 / span 2; }
  .foot-grid > .foot-brand p { margin: 0; max-width: 52ch; }
}
/* 901-1080: four columns under the brand row, contact the widest. */
@media (max-width: 1080px) and (min-width: 901px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 32px 28px; }
}
/* Tablet: three link lists, contact as a strip. */
@media (max-width: 900px) and (min-width: 600px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
  .foot-grid > div:last-child {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
    padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  }
  .foot-grid > div:last-child .foot-h { flex: 1 1 100%; margin-bottom: 0; }
  .foot-grid > div:last-child .foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 0 !important; }
  .foot-grid > div:last-child .social { margin: 0; }
}
/* Small tablets and large phones before the accordion kicks in. */
@media (max-width: 599px) and (min-width: 521px) {
  .foot-grid > .foot-brand, .foot-grid > div:last-child { grid-column: 1 / -1; }
}

/* Phones */
@media (max-width: 520px) {
  .foot { font-size: 1rem; }
  .foot-id-line { font-size: 1.2rem; line-height: 1.3; }
  /* Mono spec values: keep "12 pcs per style · 0 on reorders" on one line down to 320. */
  .foot-spec dd { font-size: .8rem; letter-spacing: -.01em; }
  .foot-brand p, .foot-brand address { font-size: .9375rem; }
  .foot-col.has-toggle ul a { font-size: 1rem; }
  .foot-contact li { font-size: 1rem; }
  .foot-contact .muted { font-size: .875rem; }
  .foot-grid > div:last-child .btn { width: 100%; justify-content: center; min-height: 48px; margin-top: 8px; }
  .foot .mark-logo { height: 72px; width: auto; }
}

/* Certification badges: even grid on small screens instead of a ragged wrap. */
@media (max-width: 760px) {
  .foot-certs .cert-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
  .foot-certs .cert-badges a { min-width: 0; min-height: 64px; align-content: center; }
  .foot-certs .cert-text { white-space: normal; text-align: center; }
}

/* Base row: keep the last links clear of the floating WhatsApp button. Product pages
   already add 88px under .foot for the buy bar (30-product.css), so no extra here. */
@media (max-width: 760px) {
  .foot-base { flex-direction: column; gap: 6px; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .foot-legal { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
}
@media (min-width: 761px) {
  .foot-base { padding-right: 84px; }
}

/* Wide desktop: give the footer columns a little more air. */
@media (min-width: 1600px) {
  .foot-grid { column-gap: 48px; }
}