/*
 * V607 — SITE-WIDE SPACING / UNIFORMITY CONTRACT
 * Loaded after legacy page CSS on every rendered website page.
 * Scope: layout spacing only. It deliberately does NOT redefine button colours,
 * typography themes, borders, shadows or semantic colour rules.
 */

:root {
  --ths-space: 20px;
}

/* 1) One page-edge inset. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main {
  box-sizing: border-box !important;
  padding: var(--ths-space) !important;
}

/* Immediate wrappers may not add a second page-edge inset. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main > .wrap,
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main > section > .wrap,
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main > article > .wrap {
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Major page blocks: one 20px block-to-block interval. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main > :is(
  section, article, .section, [class*="-section"], [class*="_section"]
) {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: var(--ths-space) !important;
}
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main > :last-child {
  margin-bottom: 0 !important;
}

/* 3) All grid/column/card collections use one 20px box-to-box gap. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .grid, [class*="-grid"], [class*="_grid"],
  .columns, [class*="-columns"], [class*="_columns"],
  .cards, [class*="-cards"], [class*="_cards"],
  .boxes, [class*="-boxes"], [class*="_boxes"],
  .items, [class*="-items"], [class*="_items"]
) {
  column-gap: var(--ths-space) !important;
  row-gap: var(--ths-space) !important;
}

/* 4) Visual content boxes have one 20px text-to-edge inset. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .card, [class*="-card"], [class*="_card"],
  .box, [class*="-box"], [class*="_box"],
  .panel, [class*="-panel"], [class*="_panel"],
  .feature, .division, .step, .check, .notice, .note,
  .cta, .fact, .facts, .buyer-step, .about-value, .vet-benefit,
  .rfq-list, .quality-main
) {
  box-sizing: border-box !important;
  padding: var(--ths-space) !important;
}

/* Full-bleed/media-led cards keep media edge-to-edge; their text body owns 20px. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .surg-page-card, .dental-page-card, .full-vet-page,
  .surg-cat-card, .dental-cat-card, .vet-product-card,
  .product-card, .real-product-card, .matched-product-card,
  .ths-facility-card,
  .card:has(> img), .card:has(> picture), .card:has(> [class*="image"])
) {
  padding: 0 !important;
}
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .surg-page-body, .dental-page-body, .full-vet-body,
  .surg-cat-body, .dental-cat-body, .vet-product-body,
  .product-card-body, .card-body,
  .card:has(> img) > :is(div,section,article),
  .card:has(> picture) > :is(div,section,article)
) {
  box-sizing: border-box !important;
  padding: var(--ths-space) !important;
}


/* Ordinary content boxes must not add their own vertical gap on top of
   heading/copy margins. Grid-labelled boxes are exempt because their children
   are true peer boxes and need the 20px grid gap. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .card, [class*="-card"], [class*="_card"],
  .box, [class*="-box"], [class*="_box"],
  .panel, [class*="-panel"], [class*="_panel"],
  .feature, .division, .step, .check, .notice, .note,
  .cta, .fact, .facts, .buyer-step, .about-value, .vet-benefit,
  .rfq-list, .quality-main
):not(.grid):not([class*="-grid"]):not([class*="_grid"]):not(.columns):not([class*="-columns"]):not([class*="_columns"]) {
  row-gap: 0 !important;
}

/* Direct copy blocks inside visual boxes use the same one-sided 20px rhythm. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .card, [class*="-card"], [class*="_card"],
  .box, [class*="-box"], [class*="_box"],
  .panel, [class*="-panel"], [class*="_panel"],
  .feature, .division, .step, .check, .notice, .note,
  .cta, .fact, .facts, .buyer-step, .about-value, .vet-benefit,
  .rfq-list, .quality-main
) > :is(p,ul,ol,dl,blockquote,table,form,fieldset,figure) {
  margin-top: 0 !important;
  margin-bottom: var(--ths-space) !important;
}
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .card, [class*="-card"], [class*="_card"],
  .box, [class*="-box"], [class*="_box"],
  .panel, [class*="-panel"], [class*="_panel"],
  .feature, .division, .step, .check, .notice, .note,
  .cta, .fact, .facts, .buyer-step, .about-value, .vet-benefit,
  .rfq-list, .quality-main
) > :last-child {
  margin-bottom: 0 !important;
}

/* 5) The first/last content inside a box cannot create phantom edge space. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .card, [class*="-card"], [class*="_card"],
  .box, [class*="-box"], [class*="_box"],
  .panel, [class*="-panel"], [class*="_panel"],
  .feature, .division, .step, .check, .notice, .note,
  .cta, .fact, .facts, .buyer-step, .about-value, .vet-benefit,
  .rfq-list, .quality-main
) > :first-child {
  margin-top: 0 !important;
}
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .card, [class*="-card"], [class*="_card"],
  .box, [class*="-box"], [class*="_box"],
  .panel, [class*="-panel"], [class*="_panel"],
  .feature, .division, .step, .check, .notice, .note,
  .cta, .fact, .facts, .buyer-step, .about-value, .vet-benefit,
  .rfq-list, .quality-main
) > :last-child {
  margin-bottom: 0 !important;
}

/* 6) One and only one 20px heading-to-following-content interval. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(h1,h2,h3,h4,h5,h6) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  margin-bottom: var(--ths-space) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(h1,h2,h3,h4,h5,h6) + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(h1,h2,h3,h4,h5,h6) + :is(div,section,article,aside) > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Body-copy blocks never add a top margin immediately after a heading. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  p, ul, ol, dl, blockquote, table, form, fieldset, figure
) {
  margin-top: 0 !important;
}

/* 7) Prevent old min-height/flex distribution from manufacturing empty space. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .card, [class*="-card"], [class*="_card"],
  .box, [class*="-box"], [class*="_box"],
  .panel, [class*="-panel"], [class*="_panel"]
) :is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl) {
  min-height: 0 !important;
  max-height: none !important;
}
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .grid, [class*="-grid"], [class*="_grid"],
  .cards, [class*="-cards"], [class*="_cards"],
  .boxes, [class*="-boxes"], [class*="_boxes"]
) {
  align-content: start !important;
}

/* 8) Forms and RFQ/control groups use the same 20px rhythm without altering buttons. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main :is(
  .form-row, .form-grid, .field-row, .field-grid,
  .actions, .button-row, .button-group,
  .rfq-actions, .rfq-ready-actions, .rfq-grid
) {
  column-gap: var(--ths-space) !important;
  row-gap: var(--ths-space) !important;
}

/* 9) Sequential top-level visual boxes outside a grid have exactly 20px between them. */
html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main > :is(
  .card, [class*="-card"], [class*="_card"],
  .box, [class*="-box"], [class*="_box"],
  .panel, [class*="-panel"], [class*="_panel"]
) + :is(
  .card, [class*="-card"], [class*="_card"],
  .box, [class*="-box"], [class*="_box"],
  .panel, [class*="-panel"], [class*="_panel"]
) {
  margin-top: var(--ths-space) !important;
}

/* 10) Mobile retains the same 20px contract; no hidden compact/expanded variant. */
@media (max-width: 760px) {
  html body.v64-medtech-layout.v64-medtech-layout.v64-medtech-layout main {
    padding: var(--ths-space) !important;
  }
}