/*
 * Holos Jet Table Design System
 * Deliberately limited to tables, tariff rows and practical-information lists.
 * No form styles and no full-bleed/background section styles are included.
 */
:root {
  --hj-table-sand: #efe6db;
  --hj-table-green: #546b4a;
  --hj-table-deep: #314531;
  --hj-table-paper: #f7f2ec;
  --hj-table-earth: #b79676;
  --hj-table-line: rgba(84,107,74,.45);
}

/* Standard Gutenberg tables. */
.wp-block-table.is-style-hj-table,
.wp-block-table.is-style-hj-table-rates,
.wp-block-table.hj-table,
.wp-block-table.hj-table-rates {
  width: 100%;
  margin: 0 0 1.5rem;
  color: var(--hj-table-deep);
  overflow-x: auto;
}

.wp-block-table.is-style-hj-table table,
.wp-block-table.is-style-hj-table-rates table,
.wp-block-table.hj-table table,
.wp-block-table.hj-table-rates table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  border-top: 1px solid var(--hj-table-line);
  color: var(--hj-table-deep);
  background: transparent;
  font-size: 15px;
}

.wp-block-table.is-style-hj-table th,
.wp-block-table.is-style-hj-table-rates th,
.wp-block-table.hj-table th,
.wp-block-table.hj-table-rates th,
.wp-block-table.is-style-hj-table td,
.wp-block-table.is-style-hj-table-rates td,
.wp-block-table.hj-table td,
.wp-block-table.hj-table-rates td {
  border: 0;
  border-bottom: 1px solid rgba(84,107,74,.22);
  padding: 13px 0;
  text-align: left;
  vertical-align: baseline;
}

.wp-block-table.is-style-hj-table th,
.wp-block-table.is-style-hj-table-rates th,
.wp-block-table.hj-table th,
.wp-block-table.hj-table-rates th {
  color: var(--hj-table-deep);
  font-weight: 500;
}

.wp-block-table.is-style-hj-table tbody tr:last-child td,
.wp-block-table.is-style-hj-table-rates tbody tr:last-child td,
.wp-block-table.hj-table tbody tr:last-child td,
.wp-block-table.hj-table-rates tbody tr:last-child td {
  border-bottom: 0;
}

/* Holos Jet tariffs built from nested Gutenberg groups. */
.rate-groups {
  border-top: 1px solid var(--hj-table-line);
}

.rate-group {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 24px;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--hj-table-line);
}

.rate-number {
  color: var(--hj-table-green);
  font-size: 11px;
  letter-spacing: .1em;
  padding-top: 6px;
}

.rate-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 20px;
}

.rate-heading h3 {
  margin: 0;
  color: var(--hj-table-deep);
  font: 400 24px/1.35 var(--serif, 'Libre Baskerville', Georgia, serif);
}

.rate-heading p {
  margin: 0;
  color: var(--hj-table-green);
  font-size: 13px;
  text-align: right;
}

.rate-lines {
  border-top: 1px solid rgba(84,107,74,.25);
}

.rate-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 92px;
  gap: 22px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(84,107,74,.22);
}

.rate-line:last-child {
  border-bottom: 0;
}

.rate-name,
.rate-duration {
  color: var(--hj-table-green);
}

.rate-duration {
  font-size: 13px;
  white-space: nowrap;
}

.rate-price {
  color: var(--hj-table-deep);
  font-size: 16px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

/*
 * Self-contained layouts for copied existing Gutenberg groups.
 * These selectors intentionally recognize the classes already stored in the
 * pages; no page content or theme files need to be changed.
 */
.section-grid.rates-section,
.shell.section-grid.rates-section {
  width: min(1160px, calc(100% - 120px));
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: minmax(150px, .58fr) 1.42fr;
  column-gap: clamp(48px, 9vw, 150px);
  align-items: start;
}

.section-grid.rates-section > .section-label,
.section-grid.rates-section > .rate-groups {
  min-width: 0;
}

.section-grid.rates-section > .rate-groups {
  width: 100%;
  max-width: 100%;
}

.gift-grid.gift-section,
.shell.gift-grid.gift-section {
  width: min(1160px, calc(100% - 120px));
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: minmax(0, .72fr) 1.28fr;
  column-gap: clamp(50px, 8vw, 128px);
  align-items: start;
}

.gift-grid.gift-section > .gift-image,
.gift-grid.gift-section > .gift-copy {
  min-width: 0;
  max-width: 100%;
}

.gift-practical {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.gift-practical .wp-block-list,
.gift-practical ul {
  width: 100%;
  max-width: 100%;
}

/* Practical information is an editable Gutenberg list, not a form component. */
.gift-practical ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--hj-table-green);
}

.gift-practical li {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: 0;
  padding: 8px 0 8px 22px;
  border-bottom: 1px solid rgba(84,107,74,.22);
}

.gift-practical li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hj-table-earth);
}

.gift-practical li span {
  min-width: 0;
  color: var(--hj-table-deep);
  font-weight: 500;
}

.gift-practical li:last-child {
  border-bottom: 0;
}

/*
 * Existing editable text-column classes.
 * These rules make copied groups keep their typography and spacing without
 * requiring page-local <style> blocks. The selectors reuse the classes that
 * already exist on Home, Werkwijze, Over Jet and Tarieven & vergoedingen.
 */
.section-label h2,
.gift-copy h2,
.hj-section h2,
.hj-section-subheading {
  color: var(--hj-table-deep);
  font: 400 clamp(30px, 3.2vw, 49px)/1.22 var(--serif, 'Libre Baskerville', Georgia, serif);
  letter-spacing: -.035em;
}

.section-label h2,
.gift-copy h2,
.hj-section h2,
.hj-section-subheading {
  margin-top: 0;
  margin-bottom: 27px;
}

.section-label .eyebrow,
.hj-eyebrow,
.gift-image-kicker,
.section-kicker {
  color: var(--hj-table-green);
  font-size: 10px;
  letter-spacing: .18em;
  line-height: 1.35;
  text-transform: uppercase;
}

.section-label .eyebrow {
  margin: 0 0 26px;
}

.rates-context {
  margin-top: 30px;
  max-width: 300px;
  color: var(--hj-table-green);
}

.rates-context p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.gift-copy {
  max-width: none;
  min-width: 0;
}

.gift-copy h3,
.gift-practical h3 {
  margin: 34px 0 12px;
  color: var(--hj-table-deep);
  font: 400 21px/1.35 var(--serif, 'Libre Baskerville', Georgia, serif);
}

.gift-copy p,
.hj-text p,
.hj-copy p {
  margin: 0 0 18px;
  color: var(--hj-table-green);
}

.gift-lead {
  max-width: 510px;
  color: var(--hj-table-deep) !important;
  font: 400 19px/1.55 var(--serif, 'Libre Baskerville', Georgia, serif);
}

.gift-form-note {
  margin-top: 30px !important;
  padding-top: 27px;
  border-top: 1px solid var(--hj-table-line);
}

.hj-shell {
  width: min(1160px, calc(100% - 120px));
  margin-left: auto;
  margin-right: auto;
}

.hj-intro,
.hj-treatments,
.hj-about,
.hj-reviews,
.hj-hero {
  display: grid;
  grid-template-columns: minmax(180px, .72fr) 1.28fr;
  gap: clamp(48px, 9vw, 150px);
  align-items: start;
}

.hj-intro {
  padding: 96px 0 120px;
}

.hj-treatments {
  padding: 112px 0 126px;
}

.hj-about {
  padding: 112px 0 128px;
}

.hj-reviews {
  padding: 100px 0 120px;
}

.hj-hero {
  padding: 76px 0 100px;
  align-items: center;
}

.hj-copy {
  max-width: 580px;
  color: var(--hj-table-green);
}

.hj-intro-media,
.hj-section,
.hj-text,
.hj-copy,
.hj-about-media,
.hj-review-carousel {
  min-width: 0;
}

.hj-inline {
  border-bottom: 1px solid var(--hj-table-line);
  padding-bottom: 7px;
  color: var(--hj-table-deep);
}

.hj-ruled {
  border-top: 1px solid var(--hj-table-line);
}

.hj-marker {
  display: flex;
  flex-direction: column;
  gap: 19px;
  color: var(--hj-table-green);
  font-size: 11px;
  letter-spacing: .08em;
}

.hj-marker::before {
  content: '';
  width: 43px;
  height: 1px;
  background: var(--hj-table-line);
}

.hj-intro-media,
.hj-about-media {
  min-width: 0;
}

.hj-intro-media img {
  max-width: 100%;
  object-fit: cover;
}

.hj-about-media img,
.hj-editable-frame > img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.hj-buttons {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.hj-button .wp-block-button__link {
  border-radius: 0 !important;
}

.hj-button.is-style-fill .wp-block-button__link {
  padding: 14px 18px;
  background: var(--hj-table-green);
  color: var(--hj-table-paper);
}

.hj-button.is-style-outline .wp-block-button__link {
  border: 0;
  border-bottom: 1px solid var(--hj-table-line);
  padding: 4px 0;
  color: var(--hj-table-green);
}

@media (max-width: 800px) {
  .section-grid.rates-section,
  .shell.section-grid.rates-section,
  .gift-grid.gift-section,
  .shell.gift-grid.gift-section {
    width: min(100% - 40px, 680px);
    max-width: 680px;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }

  .rate-group {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 23px 0 26px;
  }

  .rate-heading {
    display: block;
    margin-bottom: 16px;
  }

  .rate-heading h3 {
    font-size: 21px;
  }

  .rate-heading p {
    margin-top: 5px;
    text-align: left;
  }

  .rate-line {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 16px;
    padding: 12px 0;
  }

  .rate-duration {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
  }

  .rate-price {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .gift-practical li {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .hj-shell,
  .hj-intro,
  .hj-treatments,
  .hj-about,
  .hj-reviews,
  .hj-hero {
    width: min(100% - 40px, 680px);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .hj-intro {
    padding: 72px 0 85px;
  }

  .hj-treatments {
    padding: 78px 0 87px;
  }

  .hj-about {
    padding: 82px 0 90px;
  }

  .hj-reviews {
    padding: 78px 0 88px;
  }

  .hj-hero {
    padding-top: 57px;
    min-height: 0;
  }

  .gift-copy h2,
  .hj-section h2,
  .hj-section-subheading {
    margin-bottom: 22px;
  }

  .gift-copy h3,
  .gift-practical h3 {
    margin-top: 28px;
  }
}


/*
 * Copy-safe vertical rhythm.
 * Gutenberg's default block gap can vary with the destination theme or group
 * layout. Fix the spacing for these copied components inside the plugin.
 */
.section-grid.rates-section,
.shell.section-grid.rates-section,
.gift-grid.gift-section,
.shell.gift-grid.gift-section {
  padding-block: 96px 120px;
  --wp--style--block-gap: 0px;
}

.hj-section,
.hj-copy,
.gift-copy,
.section-label,
.rates-context {
  --wp--style--block-gap: 0px;
}

.hj-section > * + *,
.hj-copy > * + *,
.gift-copy > * + *,
.section-label > * + *,
.rates-context > * + * {
  margin-block-start: 0;
}

.hj-section > .hj-eyebrow,
.hj-copy > .hj-eyebrow,
.section-label > .eyebrow {
  margin-top: 0;
  margin-bottom: 26px;
}

.hj-section > :last-child,
.hj-copy > :last-child,
.gift-copy > :last-child,
.section-label > :last-child,
.rates-context > :last-child {
  margin-bottom: 0;
}

/* Existing source-page arrow spans inherit the button's original typography. */
.hj-button-arrow-up,
.hj-button-arrow-down {
  color: inherit;
}

/* Optional reusable arrows on empty spans: ↘, ↗, ↓ and ↑ respectively. */
.hj-arrow-down-right,
.hj-arrow-up-right,
.hj-arrow-down,
.hj-arrow-up {
  display: inline-block;
  color: inherit;
  font: inherit;
  vertical-align: baseline;
}

.hj-arrow-down-right::before,
.hj-arrow-up-right::before,
.hj-arrow-down::before,
.hj-arrow-up::before {
  display: inline-block;
  color: currentColor;
  font: inherit;
}

.hj-arrow-down-right::before { content: '\2198'; }
.hj-arrow-up-right::before { content: '\2197'; }
.hj-arrow-down::before { content: '\2193'; }
.hj-arrow-up::before { content: '\2191'; }

@media (max-width: 800px) {
  .section-grid.rates-section,
  .shell.section-grid.rates-section,
  .gift-grid.gift-section,
  .shell.gift-grid.gift-section {
    padding-block: 72px 85px;
  }
}

/* Hide only the automatic page-title H1 on Tarieven & vergoeding 1.0 (page ID 10000005). */
body.page-id-10000005 main > h1 {
  display: none !important;
}

/* v1.3.2: Copy-safe detail section. Scoped to Behandelingen; never global. */
.hj-behandelingen-page .hj-beh-detail,
.editor-styles-wrapper .hj-behandelingen-page .hj-beh-detail {
  box-sizing:border-box;
  width:min(1160px,calc(100% - 120px));max-width:1160px;
  margin-inline:auto;display:grid;
  grid-template-columns:minmax(180px,.72fr) minmax(0,1.28fr);
  column-gap:clamp(48px,9vw,150px);align-items:start;
  padding-block:106px 126px;position:relative;
  --wp--style--block-gap:0px;
}
.hj-behandelingen-page .hj-beh-detail > *,
.editor-styles-wrapper .hj-behandelingen-page .hj-beh-detail > *{min-width:0;max-width:100%;}
.hj-behandelingen-page .hj-beh-detail > .hj-beh-copy,
.editor-styles-wrapper .hj-behandelingen-page .hj-beh-detail > .hj-beh-copy{width:100%;}
.hj-behandelingen-page .hj-beh-detail .hj-beh-actions,
.editor-styles-wrapper .hj-behandelingen-page .hj-beh-detail .hj-beh-actions{display:flex;gap:25px;flex-wrap:wrap;align-items:center;margin-top:34px;}
.hj-behandelingen-page .hj-beh-detail .hj-beh-actions .wp-block-button__link,
.editor-styles-wrapper .hj-behandelingen-page .hj-beh-detail .hj-beh-actions .wp-block-button__link{display:inline-flex;align-items:center;gap:.5em;border-radius:0;box-shadow:none;}
@media(max-width:800px){
 .hj-behandelingen-page .hj-beh-detail,
 .editor-styles-wrapper .hj-behandelingen-page .hj-beh-detail{width:min(100% - 40px,680px);grid-template-columns:minmax(0,1fr);row-gap:38px;padding-block:72px 85px;}
}


/* v1.3.3 — repeatable treatment detail sections.
 * In Gutenberg the editor canvas does not necessarily contain the frontend
 * .hj-behandelingen-page ancestor. Apply the same section layout in the editor
 * directly to the copied block class, not only its original page wrapper.
 * Frontend rules remain scoped to the Behandelingen page wrapper.
 */
:is(.hj-behandelingen-page, .editor-styles-wrapper) .wp-block-group.hj-beh-detail {
  box-sizing: border-box;
  width: min(1160px, calc(100% - 120px));
  max-width: 1160px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  column-gap: clamp(48px, 9vw, 150px);
  align-items: start;
  padding-block: 106px 126px;
  --wp--style--block-gap: 0px;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail > :is(.hj-beh-visual, .hj-beh-copy) {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin-block: 0;
  margin-inline: 0;
  align-self: start;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-visual figure,
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-visual img {
  max-width: 100%;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-visual figure {
  margin-inline: 0;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  align-items: center;
  margin-top: 34px;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 800px) {
  :is(.hj-behandelingen-page, .editor-styles-wrapper) .wp-block-group.hj-beh-detail {
    width: min(calc(100% - 40px), 680px);
    grid-template-columns: minmax(0, 1fr);
    row-gap: 38px;
    padding-block: 72px 85px;
  }
}


/* v1.3.4: treatment detail block design contract.
 * Every .hj-beh-detail is identical, including copied/duplicated instances.
 * No :first-child / nth-child / page IDs. No changes outside this section.
 */
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail.wp-block-group {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.45fr);
  column-gap: clamp(28px, 5.2vw, 78px);
  align-items: start;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-visual,
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-copy {
  min-width: 0; max-width: none; width: 100%; padding: 0;
  margin: 0; --wp--style--block-gap: 0px;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-visual > *,
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-copy > * {
  margin-block-start: 0;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-visual .hj-beh-eyebrow {
  margin: 0 0 12px; font-size: 11px; font-family: inherit;
  font-weight: 400; line-height: 1.4; letter-spacing: .1em;
  color: var(--hj-table-green);
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-visual h2.wp-block-heading {
  margin: 0 0 26px; font-family: var(--serif, Georgia, serif);
  font-size: clamp(34px, 3.2vw, 49px); line-height: 1.12;
  letter-spacing: -.035em; font-weight: 400; overflow-wrap: normal;
  word-break: normal; hyphens: none; color: var(--hj-table-deep);
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-visual figure.wp-block-image {
  display: block; width: 100%; max-width: 100%; margin: 0;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-visual figure.wp-block-image img {
  display: block; width: 100%; max-width: 100%; height: auto;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-copy p {
  font-size: 15px; line-height: 1.65; font-weight: 400;
  letter-spacing: normal; color: var(--hj-table-green);
  margin: 0 0 18px; max-width: none;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-copy p.hj-beh-detail-lead {
  font-size: 17px; line-height: 1.5; margin-bottom: 14px;
  color: var(--hj-table-deep);
}
/* Two-column techniques list, with its own dots and fine dividers. */
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-copy ul.hj-beh-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px; row-gap: 0;
  list-style: none; padding: 0; margin: 15px 0 25px;
  width: 100%; max-width: none;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-copy ul.hj-beh-list > li {
  position: relative; display: block; min-width: 0;
  padding: 9px 0 9px 14px; margin: 0;
  border-bottom: 1px solid rgba(84,107,74,.25);
  font-size: 13px; line-height: 1.45; color: var(--hj-table-green);
  list-style: none;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-copy ul.hj-beh-list > li::before {
  content: ''; position: absolute; left: 1px; top: 1.1em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--hj-table-earth);
}
/* Homepage-like button pair, with SVG mask icons that follow currentColor.
 * CSS-generated icons do not alter the editable Gutenberg button text. */
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-actions.wp-block-buttons {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  margin: 30px 0 0; padding: 0;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-actions .wp-block-button {
  margin: 0; padding: 0;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-actions .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; white-space: nowrap; border-radius: 0;
  box-shadow: none; text-decoration: none; font-family: inherit;
  font-size: 14px; font-weight: 400; line-height: 1.4;
  letter-spacing: normal; transition: opacity .15s ease;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-actions .hj-beh-action-fill .wp-block-button__link {
  padding: 14px 19px; background: var(--hj-table-green);
  color: var(--hj-table-paper); border: 1px solid var(--hj-table-green);
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-actions .wp-block-button:not(.hj-beh-action-fill) .wp-block-button__link {
  padding: 5px 0; background: transparent; color: var(--hj-table-green);
  border: 0; border-bottom: 1px solid var(--hj-table-line);
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-actions .wp-block-button__link::after {
  content: ''; display: inline-block; flex: none; width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
:is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-actions .wp-block-button:not(.hj-beh-action-fill) .wp-block-button__link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media(max-width:800px) {
  :is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail.wp-block-group {
    grid-template-columns: minmax(0,1fr); column-gap: 0; row-gap: 34px;
  }
}
@media(max-width:480px) {
  :is(.hj-behandelingen-page, .editor-styles-wrapper) .hj-beh-detail .hj-beh-copy ul.hj-beh-list {
    grid-template-columns: minmax(0,1fr);
  }
}


/* v1.3.5 — standalone duplicated detail blocks outside page wrapper.
 * WP export confirms duplicated .hj-beh-detail is a sibling of the page wrapper.
 * Apply the same contract to it on the frontend. No broad global element selectors. */
/* v1.3.4: treatment detail block design contract.
 * Every .hj-beh-detail is identical, including copied/duplicated instances.
 * No :first-child / nth-child / page IDs. No changes outside this section.
 */
.hj-beh-detail.wp-block-group {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.45fr);
  column-gap: clamp(28px, 5.2vw, 78px);
  align-items: start;
}
.hj-beh-detail .hj-beh-visual,
.hj-beh-detail .hj-beh-copy {
  min-width: 0; max-width: none; width: 100%; padding: 0;
  margin: 0; --wp--style--block-gap: 0px;
}
.hj-beh-detail .hj-beh-visual > *,
.hj-beh-detail .hj-beh-copy > * {
  margin-block-start: 0;
}
.hj-beh-detail .hj-beh-visual .hj-beh-eyebrow {
  margin: 0 0 12px; font-size: 11px; font-family: inherit;
  font-weight: 400; line-height: 1.4; letter-spacing: .1em;
  color: var(--hj-table-green);
}
.hj-beh-detail .hj-beh-visual h2.wp-block-heading {
  margin: 0 0 26px; font-family: var(--serif, Georgia, serif);
  font-size: clamp(34px, 3.2vw, 49px); line-height: 1.12;
  letter-spacing: -.035em; font-weight: 400; overflow-wrap: normal;
  word-break: normal; hyphens: none; color: var(--hj-table-deep);
}
.hj-beh-detail .hj-beh-visual figure.wp-block-image {
  display: block; width: 100%; max-width: 100%; margin: 0;
}
.hj-beh-detail .hj-beh-visual figure.wp-block-image img {
  display: block; width: 100%; max-width: 100%; height: auto;
}
.hj-beh-detail .hj-beh-copy p {
  font-size: 15px; line-height: 1.65; font-weight: 400;
  letter-spacing: normal; color: var(--hj-table-green);
  margin: 0 0 18px; max-width: none;
}
.hj-beh-detail .hj-beh-copy p.hj-beh-detail-lead {
  font-size: 17px; line-height: 1.5; margin-bottom: 14px;
  color: var(--hj-table-deep);
}
/* Two-column techniques list, with its own dots and fine dividers. */
.hj-beh-detail .hj-beh-copy ul.hj-beh-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px; row-gap: 0;
  list-style: none; padding: 0; margin: 15px 0 25px;
  width: 100%; max-width: none;
}
.hj-beh-detail .hj-beh-copy ul.hj-beh-list > li {
  position: relative; display: block; min-width: 0;
  padding: 9px 0 9px 14px; margin: 0;
  border-bottom: 1px solid rgba(84,107,74,.25);
  font-size: 13px; line-height: 1.45; color: var(--hj-table-green);
  list-style: none;
}
.hj-beh-detail .hj-beh-copy ul.hj-beh-list > li::before {
  content: ''; position: absolute; left: 1px; top: 1.1em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--hj-table-earth);
}
/* Homepage-like button pair, with SVG mask icons that follow currentColor.
 * CSS-generated icons do not alter the editable Gutenberg button text. */
.hj-beh-detail .hj-beh-actions.wp-block-buttons {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  margin: 30px 0 0; padding: 0;
}
.hj-beh-detail .hj-beh-actions .wp-block-button {
  margin: 0; padding: 0;
}
.hj-beh-detail .hj-beh-actions .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; white-space: nowrap; border-radius: 0;
  box-shadow: none; text-decoration: none; font-family: inherit;
  font-size: 14px; font-weight: 400; line-height: 1.4;
  letter-spacing: normal; transition: opacity .15s ease;
}
.hj-beh-detail .hj-beh-actions .hj-beh-action-fill .wp-block-button__link {
  padding: 14px 19px; background: var(--hj-table-green);
  color: var(--hj-table-paper); border: 1px solid var(--hj-table-green);
}
.hj-beh-detail .hj-beh-actions .wp-block-button:not(.hj-beh-action-fill) .wp-block-button__link {
  padding: 5px 0; background: transparent; color: var(--hj-table-green);
  border: 0; border-bottom: 1px solid var(--hj-table-line);
}
.hj-beh-detail .hj-beh-actions .wp-block-button__link::after {
  content: ''; display: inline-block; flex: none; width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hj-beh-detail .hj-beh-actions .wp-block-button:not(.hj-beh-action-fill) .wp-block-button__link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media(max-width:800px) {
  .hj-beh-detail.wp-block-group {
    grid-template-columns: minmax(0,1fr); column-gap: 0; row-gap: 34px;
  }
}
@media(max-width:480px) {
  .hj-beh-detail .hj-beh-copy ul.hj-beh-list {
    grid-template-columns: minmax(0,1fr);
  }
}

/* Ensure the standalone section itself has the same centered grid as the original. */
.wp-block-group.hj-beh-detail {
  box-sizing: border-box;
  display: grid;
  width: min(1160px, calc(100% - 120px));
  max-width: 1160px;
  margin-inline: auto;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.45fr);
  column-gap: clamp(28px, 5.2vw, 78px);
  align-items: start;
  padding-block: 106px 126px;
  --wp--style--block-gap: 0px;
}
@media (max-width: 800px) {
  .wp-block-group.hj-beh-detail {
    width: min(calc(100% - 40px), 680px);
    grid-template-columns: minmax(0, 1fr);
    row-gap: 34px;
    padding-block: 72px 85px;
  }
}


/* v1.3.6 — One consistent, copy-safe bottom rule per treatment detail.
   The rule belongs to the detail section itself, not its page wrapper or a
   separate Gutenberg separator, so duplicated sections inherit it. */
.wp-block-group.hj-beh-detail,
.editor-styles-wrapper .wp-block-group.hj-beh-detail,
.hj-behandelingen-page .wp-block-group.hj-beh-detail {
  box-sizing: border-box;
  width: min(1160px, calc(100% - 120px));
  max-width: 1160px;
  margin-inline: auto;
  border-top: 0 !important;
  border-bottom: 1px solid var(--hj-table-line, rgba(84,107,74,.28));
  background-image: none;
}
/* Prevent inherited decorative top rules on the treatment group. */
.wp-block-group.hj-beh-detail::before,
.editor-styles-wrapper .wp-block-group.hj-beh-detail::before {
  content: none !important;
}
@media (max-width: 800px) {
  .wp-block-group.hj-beh-detail,
  .editor-styles-wrapper .wp-block-group.hj-beh-detail,
  .hj-behandelingen-page .wp-block-group.hj-beh-detail {
    width: min(calc(100% - 40px), 680px);
  }
}

/* v1.3.8: keep the right-column lead/title identical in original and
   duplicated sections, whether inside or outside .hj-behandelingen-page.
   Specificity matches the page-scoped rule and is deliberately scoped
   to the lead paragraph, leaving all other text untouched. */
:where(.editor-styles-wrapper, body) .wp-block-group.hj-beh-detail .wp-block-group.hj-beh-copy p.hj-beh-detail-lead,
.wp-block-group.hj-beh-detail .wp-block-group.hj-beh-copy p.hj-beh-detail-lead {
  font-family: var(--serif, Georgia, serif);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--hj-table-deep);
  margin: 0 0 14px;
  max-width: none;
}

/* v1.3.9 — bottom separator for the introductory tile section only.
   Match the 1160px centered detail rules without changing tile layout.
   Pseudo-element stays inside the intro block and is not an extra Gutenberg block. */
.hj-behandelingen-page > .hj-beh-intro::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: min(1160px, calc(100% - 120px));
  max-width: 1160px;
  height: 0;
  margin: 0 auto;
  border-bottom: 1px solid var(--hj-table-line, rgba(84,107,74,.28));
  clear: both;
}
@media (max-width: 800px) {
  .hj-behandelingen-page > .hj-beh-intro::after {
    width: min(calc(100% - 40px), 680px);
  }
}

/* v1.4.1 — narrowly scoped layout repairs. Based strictly on stable 1.3.9.
   Never target generic .hj-section, .hj-treatments, images or detail tiles. */

/* Independent green contact sections: preserve full viewport background,
   while the inner columns remain aligned with the site's 1160px shell.
   Also works when the green group is copied outside its original wrapper. */
.wp-block-group.hj-werkwijze-fullbleed:not(.hj-beh-detail) {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 100px max(20px, calc((100vw - 1160px) / 2)) 112px !important;
  display: grid !important;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
  column-gap: clamp(48px, 9vw, 150px) !important;
  row-gap: 0 !important;
  align-items: start !important;
  background-color: #314531;
  color: #efe6db;
}
.wp-block-group.hj-werkwijze-fullbleed:not(.hj-beh-detail) > .wp-block-group.hj-section {
  box-sizing: border-box;
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}
/* Only the three sections on Werkwijze: use Over Jet's 1160px shell. */
body.page-id-206 .wp-block-group.hj-intro:not(.hj-werkwijze-fullbleed),
body.page-id-206 .wp-block-group.hj-about:not(.hj-werkwijze-fullbleed) {
  box-sizing: border-box;
  width: min(1160px, calc(100% - 120px));
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}
/* Over Jet green section is the third section; its right copy follows
   the same content-column grid as the first two sections. */
body.page-id-9037 .wp-block-group.hj-werkwijze-fullbleed > .wp-block-group.hj-section:nth-child(2),
body.page-id-206 .wp-block-group.hj-werkwijze-fullbleed > .wp-block-group.hj-section:nth-child(2) {
  min-width: 0;
  max-width: none;
}
/* Tarieven: reimbursement copy aligns with the second column of the
   adjacent two-column rate/gift sections; don't alter typography or colors. */
body.page-id-10000172 .wp-block-group.hj-tarieven-aligned-grid.hj-werkwijze-fullbleed {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
}
body.page-id-10000172 .wp-block-group.hj-tarieven-aligned-grid > .wp-block-group.reimbursement-copy {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 800px) {
  .wp-block-group.hj-werkwijze-fullbleed:not(.hj-beh-detail) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 72px 20px 85px !important;
  }
  body.page-id-206 .wp-block-group.hj-intro:not(.hj-werkwijze-fullbleed),
  body.page-id-206 .wp-block-group.hj-about:not(.hj-werkwijze-fullbleed) {
    width: min(calc(100% - 40px), 680px);
  }
  body.page-id-10000172 .wp-block-group.hj-tarieven-aligned-grid.hj-werkwijze-fullbleed {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Gutenberg canvas must not overflow the editing iframe. */
.editor-styles-wrapper .wp-block-group.hj-werkwijze-fullbleed:not(.hj-beh-detail) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: clamp(20px, 5vw, 60px) !important;
}

/* v1.4.2 — uniform page content width, anchored to the unchanged
   1160px .site-main.hj-shell in HolosJetTheme 1.8.3.
   Only correct nested shells that subtract the outer 120px gutter twice.
   Never modify nested grid columns, images, typography, or buttons. */
@media (min-width: 801px) {
  /* Over Jet: nested .hj-shell should fill the existing 1160px main shell. */
  body.page-id-9037 main.site-main.hj-shell > .wp-block-group.hj-intro.hj-shell,
  body.page-id-9037 main.site-main.hj-shell > .wp-block-group.hj-ruled.hj-shell {
    width: 100%; max-width: 1160px; margin-inline: auto;
  }
  /* Werkwijze: sections are already children of the 1160px shell. */
  body.page-id-206 main.site-main.hj-shell > .wp-block-group.hj-intro,
  body.page-id-206 main.site-main.hj-shell > .wp-block-group.hj-about {
    width: 100%; max-width: 1160px; margin-inline: auto;
  }
  /* Behandelingen: remove the double inset from each detail and intro.
     Keep the existing image/text grid and all its internal proportions. */
  body.page-id-10000227 .hj-behandelingen-page > .hj-beh-detail,
  body.page-id-10000991 .hj-behandelingen-page > .hj-beh-detail,
  body.page-id-10000227 .hj-behandelingen-page > .hj-beh-intro,
  body.page-id-10000991 .hj-behandelingen-page > .hj-beh-intro {
    box-sizing: border-box; width: 100%; max-width: 1160px; margin-inline: auto;
  }
  /* Tarieven: its own .shell was subtracting another 120px inside main. */
  body.page-id-10000172 main.site-main.hj-shell .shell:not(.site-header):not(.site-footer) {
    width: 100%; max-width: 1160px; margin-inline: auto;
  }
  /* Contact: only outer content container; internal layout is untouched. */
  body.page-id-9999999 main.site-main.hj-shell > .hjcp-page {
    width: 100%; max-width: 1160px; margin-inline: auto;
  }
}
/* Subtle 1px rules follow the same content edges as the header/footer.
   Do not apply a global border to Gutenberg groups or affect inner lists. */
body.page-id-10000227 .hj-behandelingen-page > .hj-beh-intro::after,
body.page-id-10000991 .hj-behandelingen-page > .hj-beh-intro::after {
  box-sizing: border-box; width: 100%; max-width: 1160px;
  border-bottom-width: 1px;
}
body.page-id-9049 main.site-main.hj-shell > hr.wp-block-separator,
body.page-id-9053 main.site-main.hj-shell > hr.wp-block-separator {
  box-sizing: border-box; width: 100%; max-width: 1160px;
  height: 0; border: 0; border-top: 1px solid var(--line, rgba(84,107,74,.28));
  opacity: 1; margin-inline: auto;
}
/* Preserve the current mobile widths and stacking exactly as delivered. */

/* v1.4.3 — ONLY the two intro paragraphs on Tarieven & vergoeding.
   They are already inside the 1160px theme shell; the old width calc
   subtracts the outer gutter a second time. Keep all typography and spacing.
   The paragraph border is the existing subtle divider, now shell-wide. */
body.page-id-10000172 main.site-main.hj-shell > p.hjcp-eyebrow,
body.page-id-10000172 main.site-main.hj-shell > p.hjcp-intro {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.page-id-10000172 main.site-main.hj-shell > p.hjcp-intro {
  border-bottom-width: 1px !important;
}

/* v1.4.4 — Keep inline CTA links readable in copied green contact sections.
   Scoped to their existing hj-inline link class; no layout or other links affected. */
.wp-block-group.hj-werkwijze-fullbleed:not(.hj-beh-detail) a.hj-inline,
.wp-block-group.hj-werkwijze-fullbleed:not(.hj-beh-detail) a.hj-inline:link,
.wp-block-group.hj-werkwijze-fullbleed:not(.hj-beh-detail) a.hj-inline:visited,
.wp-block-group.hj-werkwijze-fullbleed:not(.hj-beh-detail) a.hj-inline:hover,
.wp-block-group.hj-werkwijze-fullbleed:not(.hj-beh-detail) a.hj-inline:focus,
.wp-block-group.hj-werkwijze-fullbleed:not(.hj-beh-detail) a.hj-inline:active {
  color: #efe6db !important;
  -webkit-text-fill-color: #efe6db;
}