/* Treat Yourself – extra regels voor gsm en tablet (bovenop de stijl uit het design). */

/* overflow-x: hidden op html/body brak de sticky header; clip doet hetzelfde zonder dat probleem */
html, body { overflow-x: clip !important; }
/* Achter de pagina zit bordeaux: zo is er nooit een witte rand onder de footer (ook niet bij doorscrollen op iPhone/Mac) */
html { background: #800000 !important; }
body { background: transparent !important; }
#ty-root > div:first-child { background: #ffffff; }
#ty-root footer { margin-bottom: 0 !important; }
#ty-root .ty-m-only { display: none !important; }
/* Hoofdmenu op één lijn houden, ook met meer items */
#ty-root nav[aria-label="Hoofdmenu"], #ty-root nav[aria-label="Hoofdmenu rechts"] { flex-wrap: nowrap !important; gap: 12px clamp(18px, 2.6vw, 60px) !important; white-space: nowrap; }
#ty-root header { transition: transform .28s ease; will-change: transform; }
body.ty-hdr-hidden #ty-root header { transform: translateY(-100%); }

/* "Nu actief" (orgaanklok) */

/* Vanaf 1200px of smaller: compacte header met menuknop (anders botst het menu met het logo) */
@media (max-width: 1200px) { #ty-root .hd-full { display: none !important; } #ty-root .hd-mob { display: flex !important; } }

@media (max-width: 760px) {
  /* Titels schalen mee met de schermbreedte */
  h1 { font-size: clamp(30px, 9vw, 40px) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.25 !important; }
  h3, [style*="Harriet"][style*="font-size: 30px"] { font-size: clamp(21px, 5.9vw, 24px) !important; line-height: 1.3 !important; }
  [style*="Harriet"][style*="font-size: 24px"] { font-size: clamp(18px, 5vw, 21px) !important; }
  [style*="font-size: 48px"], [style*="font-size: 60px"] { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.25 !important; }
  /* Grote hero-woorden (bv. "Energy as the foundation") */
  [style*="clamp(80px, 11.9vw, 180px)"] { font-size: 17vw !important; }
  [style*="clamp(40px, 5.95vw, 90px)"] { font-size: 8.6vw !important; }
  [style*="aspect-ratio: 1312 / 782"] { min-height: 0 !important; aspect-ratio: 4 / 3 !important; }

  /* Minder lucht tussen secties */
  [style*="padding-top: 100px"] { padding-top: 56px !important; }
  [style*="padding-bottom: 100px"] { padding-bottom: 56px !important; }
  [style*="padding-top: 90px"] { padding-top: 56px !important; }
  [style*="padding-top: 60px"] { padding-top: 40px !important; }
  [style*="padding-bottom: 60px"] { padding-bottom: 40px !important; }
  [style*="gap: 60px"] { gap: 36px !important; }
  [style*="gap: 50px 30px"] { gap: 32px 16px !important; }
  [style*="gap: 60px 40px"] { gap: 36px 24px !important; }
  [style*="margin-bottom: 140px"] { margin-bottom: 60px !important; }
  [style*="padding: 40px"] { padding: 24px !important; }

  /* Foto's minder hoog, zodat je minder moet scrollen */
  #ty-root section img:not([src$=".svg"]):not([style*="width: 64px"]):not([style*="width: 80px"]) { max-height: 44vh; object-fit: cover; }
  #ty-root section img[style*="aspect-ratio: 4 / 5"], #ty-root section img[style*="aspect-ratio: 3 / 4"] { aspect-ratio: 4 / 3 !important; }
  #ty-root [style*="aspect-ratio: 4 / 5"]:not(img), #ty-root [style*="aspect-ratio: 3 / 4"]:not(img) { aspect-ratio: 1 / 1 !important; }
  #ty-root section img[style*="min-height: 600px"] { min-height: 0 !important; aspect-ratio: 4 / 3; width: 100%; flex: none !important; }

  [style*="gap: 40px"] { gap: 24px !important; }
  [style*="gap: 30px"] { gap: 20px !important; }
  [style*="min-height: 360px"] { min-height: 0 !important; }
  [style*="align-items: center; gap: 20px"] { flex-wrap: wrap; }

  /* Home: liggende hero, tekst er dicht onder */
  img[alt="Astrid leunend tegen een boom aan het water"] { aspect-ratio: 4 / 3 !important; min-height: 0 !important; object-position: 52% 74% !important; }
  section:has(> img[alt="Astrid leunend tegen een boom aan het water"]) + section { padding-top: 28px !important; padding-bottom: 44px !important; }
  section:has(> img[alt="Astrid leunend tegen een boom aan het water"]) + section > div { gap: 20px !important; }
  [style*="height: 580px"] { height: auto !important; aspect-ratio: 4 / 3; max-height: none !important; }

  /* Podcastknoppen (Spotify, YouTube, Apple) naast elkaar */
  div:has(> a[aria-label="Luister op Spotify"]) { flex-wrap: nowrap !important; gap: 8px !important; }
  a[aria-label="Luister op Spotify"], a[aria-label="Bekijk op YouTube"], a[aria-label="Luister op Apple Podcasts"] { padding: 6px 9px 4px !important; font-size: 10px !important; letter-spacing: 0.8px !important; gap: 5px !important; }
  a[aria-label="Luister op Spotify"] svg, a[aria-label="Bekijk op YouTube"] svg, a[aria-label="Luister op Apple Podcasts"] svg { width: 13px; height: 13px; }
  section:has(a[style*="flex: 1.4 1 520px"]) a[href^="/podcast/"][style*="white-space: nowrap"][style*="transparent"]:not([href="/podcast/"]) { display: none !important; }

  #ty-root .ty-m-only { display: inline-flex !important; }
  #ty-root .ty-d-only { display: none !important; }

  /* Ebooks op de home: twee naast elkaar, compact */
  div:has(> a[style*="flex: 1 1 520px"]) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px !important; }
  a[style*="flex: 1 1 520px"] { flex-direction: column !important; flex-wrap: nowrap !important; gap: 10px !important; }
  a[style*="flex: 1 1 520px"] [style*="perspective"] { padding: 0 !important; }
  a[style*="flex: 1 1 520px"] [style*="width: 180px"] { width: 100% !important; transform: none !important; }
  a[style*="flex: 1 1 520px"] img { max-height: none !important; aspect-ratio: 3 / 4 !important; }
  a[style*="flex: 1 1 520px"] [style*="flex: 1 1 260px"] { flex: none !important; padding: 0 !important; gap: 10px !important; }
  a[style*="flex: 1 1 520px"] p[style*="max-width: 520px"] { display: none; }
  a[style*="flex: 1 1 520px"] p[style*="Harriet"] { font-size: 18px !important; line-height: 1.3 !important; }
  a[style*="flex: 1 1 520px"] [style*="align-items: center; gap: 20px"] { gap: 8px !important; }
  a[style*="flex: 1 1 520px"] span[style*="Harriet"] { font-size: 17px !important; }
  a[style*="flex: 1 1 520px"] span[style*="text-transform: uppercase"] { padding: 6px 10px 4px !important; font-size: 10px !important; letter-spacing: 0.8px !important; }

  /* Afleveringen op de podcastpagina: 2 per rij */
  [style*="minmax(min(300px, 100%), 1fr)); gap: 50px 30px"] { grid-template-columns: 1fr 1fr !important; gap: 24px 14px !important; }
  [style*="gap: 50px 30px"] a [style*="justify-content: space-between"] span:last-child { display: none; }
  [style*="gap: 50px 30px"] a [style*="Harriet"][style*="font-size: 24px"] { font-size: 16px !important; line-height: 1.35 !important; }
  [style*="gap: 50px 30px"] a { gap: 8px !important; }
  [style*="gap: 50px 30px"] a [style*="letter-spacing: 1.2px"] { font-size: 10px !important; letter-spacing: 1px !important; }



  /* ---------- Swipers (horizontaal schuiven) ---------- */
  .wf-grid.wf-grid, [style*="minmax(min(420px, 100%), 1fr)); gap: 40px"],
  #ty-root [style*="position: relative; display: flex; flex-wrap: wrap; gap: 40px"],
  #ty-root [style*="position: relative; width: 100%"] > [style*="display: flex; flex-wrap: wrap; gap: 40px"] {
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-right: -20px !important; padding-right: 20px !important;
  }
  .wf-grid.wf-grid::-webkit-scrollbar, [style*="minmax(min(420px, 100%), 1fr)); gap: 40px"]::-webkit-scrollbar,
  #ty-root [style*="position: relative; display: flex; flex-wrap: wrap; gap: 40px"]::-webkit-scrollbar,
  #ty-root [style*="position: relative; width: 100%"] > [style*="display: flex; flex-wrap: wrap; gap: 40px"]::-webkit-scrollbar { display: none; }

  /* 1-op-1: twee thema's als kaarten die je kunt swipen */
  .wf-grid.wf-grid { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 82%; gap: 16px !important; }
  .wf-grid.wf-grid > * { scroll-snap-align: start; padding: 20px !important; gap: 12px !important; }
  .wf-grid.wf-grid [style*="font-size: 36px"] { font-size: 28px !important; }
  .wf-grid.wf-grid [style*="font-size: 22px"] { font-size: 18px !important; }

  /* 1-op-1: "Goed om te weten" */
  [style*="min-height: 594px"] { min-height: 0 !important; }
  [style*="minmax(min(420px, 100%), 1fr)); gap: 40px"] { grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 82%; gap: 16px !important; }
  [style*="minmax(min(420px, 100%), 1fr)); gap: 40px"] > * { scroll-snap-align: start; gap: 12px !important; background: rgba(255,255,255,0.55); border-radius: 5px; padding: 20px; }

  /* 1-op-1: tijdlijn "Waar loopt het vast" */
  #ty-root [style*="position: relative; padding-top: 30px"] > [aria-hidden="true"][style*="linear-gradient"] { display: none; }
  #ty-root [style*="position: relative; padding-top: 30px"] { padding-top: 0 !important; }
  #ty-root [style*="position: relative; display: flex; flex-wrap: wrap; gap: 40px"] {
    flex-wrap: nowrap !important; gap: 16px !important; padding-top: 30px !important;
    background: linear-gradient(90deg, #2E3E57 0%, #B5585A 33.333%, #E8A87C 66.667%, #FFF2B8 100%) 0 0 / 100% 90px no-repeat local;
  }
  #ty-root [style*="position: relative; display: flex; flex-wrap: wrap; gap: 40px"] > div { flex: 0 0 80% !important; scroll-snap-align: start; padding-left: 16px; }
  #ty-root [style*="position: relative; display: flex; flex-wrap: wrap; gap: 40px"] [style*="margin: 0 0 39.9px"] { margin-bottom: 10px !important; }
  #ty-root [style*="position: relative; display: flex; flex-wrap: wrap; gap: 40px"] [style*="height: 60px"] { height: 30px !important; }

  /* 1-op-1: "Zo werkt het" */
  #ty-root [style*="position: relative; width: 100%"] > [aria-hidden="true"] { display: none; }
  #ty-root [style*="position: relative; width: 100%"] > [style*="display: flex; flex-wrap: wrap; gap: 40px"] {
    flex-wrap: nowrap !important; gap: 16px !important;
    background: linear-gradient(rgba(128,0,0,0.5), rgba(128,0,0,0.5)) 0 15px / 100% 1px no-repeat local;
  }
  #ty-root [style*="position: relative; width: 100%"] > [style*="display: flex; flex-wrap: wrap; gap: 40px"] > div { flex: 0 0 74% !important; scroll-snap-align: start; gap: 14px !important; }

  /* ---------- Samenwerken ---------- */
  #talks [style*="flex: 1 1 640px"] img { min-height: 0 !important; aspect-ratio: 4 / 3 !important; max-height: none !important; touch-action: pan-y; }
  #talks > div { position: relative; }
  #talks [style*="flex: 1 1 360px"] { padding: 0 !important; flex: 0 0 0 !important; }
  #talks [style*="flex: 1 1 360px"] > div:first-child { display: none !important; }
  #talks [style*="justify-content: space-between; gap: 20px"] { position: absolute; left: 0; right: 0; bottom: 14px; justify-content: center !important; pointer-events: none; }
  #talks [style*="justify-content: space-between; gap: 20px"] > div:last-child { display: none !important; }
  #talks [style*="justify-content: space-between; gap: 20px"] button { pointer-events: auto; }
  #talks button[aria-label^="Toon"][style*="rgba(50,45,40,0.25)"] { background: rgba(255,255,255,0.75) !important; }
  #talks button[aria-label^="Toon"] { box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
  /* "Waarvoor mag je me bellen": 2 per rij */
  #content [style*="background: #f4e3a6; F22px"], #content span[style*="background: #f4e3a6"] { font-size: 15px !important; padding: 10px 12px 8px !important; justify-content: center; text-align: center; }
  #content div:has(> span[style*="background: #f4e3a6"]) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  #content [style*="padding: clamp(30px, 5vw, 60px)"] { padding: 20px !important; gap: 28px !important; }
  #content [style*="gap: 16px 48px"] { gap: 6px 22px !important; }
  #content [style*="gap: 16px 48px"] span { font-size: 21px !important; }
  /* Credentials, "volmondig ja" en manieren van samenwerken: 2 per rij, kleiner */
  #ty-root div:has(> [style*="flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px"]),
  #ty-root div:has(> [style*="flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px"]) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px 16px !important; }
  #content div:has(> [style*="flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px"]) { gap: 16px !important; }
  [style*="flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px"] p[style*="Harriet"],
  [style*="flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px"] p[style*="Harriet"],
  [style*="flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px"] p[style*="Harriet"] { font-size: 19px !important; line-height: 1.25 !important; }
  [style*="flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px"] p[style*="Specter"],
  [style*="flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px"] p[style*="Specter"] { font-size: 14px !important; line-height: 1.5 !important; }
  [style*="flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px"] { gap: 4px !important; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.35); }
  /* Formulier: drie keuzes naast elkaar */
  fieldset div:has(> sc-for > button[aria-pressed]) { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px !important; }
  fieldset div:has(> sc-for > button[aria-pressed]) > sc-for { display: contents; }
  fieldset button[aria-pressed] { justify-content: center; padding: 9px 4px 7px !important; font-size: 10px !important; letter-spacing: 0.6px !important; }

  /* ---------- TCM basics ---------- */
  .tcm-cards { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 80%; gap: 12px !important;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .tcm-cards::-webkit-scrollbar { display: none; }
  .tcm-cards > * { scroll-snap-align: start; }
  .tcm-mer svg { max-width: 340px !important; }
  .tcm-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .tcm-chips::-webkit-scrollbar { display: none; }
  .tcm-chips button { flex: none; }

  /* ---------- Wat ik gebruik: 2 producten naast elkaar ---------- */
  [style*="minmax(min(220px, 100%), 1fr)); gap: 20px"], [style*="minmax(min(260px, 100%), 1fr)); gap: 50px 30px"] { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  [style*="minmax(min(220px, 100%), 1fr)); gap: 20px"] > sc-for > a, [style*="minmax(min(260px, 100%), 1fr)); gap: 50px 30px"] > sc-for > a { padding: 10px !important; gap: 6px !important; }
  [style*="minmax(min(220px, 100%), 1fr)); gap: 20px"] a p[style*="font-size: 14px"], [style*="minmax(min(260px, 100%), 1fr)); gap: 50px 30px"] a p[style*="font-size: 14px"] { font-size: 12px !important; line-height: 1.4 !important; }
  [style*="minmax(min(220px, 100%), 1fr)); gap: 20px"] a p[style*="Harriet"], [style*="minmax(min(260px, 100%), 1fr)); gap: 50px 30px"] a p[style*="Harriet"] { font-size: 16px !important; line-height: 1.3 !important; }
  [style*="minmax(min(220px, 100%), 1fr)); gap: 20px"] a p[style*="text-transform: uppercase"], [style*="minmax(min(260px, 100%), 1fr)); gap: 50px 30px"] a p[style*="text-transform: uppercase"] { font-size: 10px !important; letter-spacing: 1px !important; }

  /* Filters op Aanraders: één rij om door te swipen */
  [aria-label="Kies een thema"], [aria-label="Filter op categorie"] { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  [aria-label="Kies een thema"]::-webkit-scrollbar, [aria-label="Filter op categorie"]::-webkit-scrollbar { display: none; }
  [aria-label="Kies een thema"] button, [aria-label="Filter op categorie"] button { flex: 0 0 auto !important; }

  /* Aflevering: eerst de shownotes, dan de info over de gast */
  .ty-ep-notes { order: 1; }
  .ty-ep-aside { order: 2; flex-basis: 100% !important; }
  .ty-ep-aside > div { position: static !important; }

  /* Luister ook: horizontale slider */
  .ty-slider {
    display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px !important;
    margin-right: -20px; padding-right: 20px; scrollbar-width: none;
  }
  .ty-slider::-webkit-scrollbar { display: none; }
  .ty-slider > a { flex: 0 0 72%; scroll-snap-align: start; }
}

/* Footer altijd duidelijk apart van de sectie erboven, ook als die ook bordeaux is */
#ty-root footer { box-shadow: inset 0 1px 0 rgba(255, 248, 227, 0.32); }

.ty-now { display: flex; align-items: center; gap: 18px; width: 100%; box-sizing: border-box; padding: 16px 20px; border: 1px solid rgba(50, 45, 40, 0.15); border-radius: 5px; background: #ffffff; text-decoration: none; color: #322d28; text-align: left; }
.ty-now:hover { opacity: 1 !important; border-color: rgba(50, 45, 40, 0.4); }
.ty-now-zh { flex: 0 0 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif; font-size: 28px; line-height: 1; color: #fff8e3; }
.ty-now-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ty-now-label { font-family: 'Specter', system-ui, sans-serif; font-weight: 400; font-size: 11px; line-height: 1.33; letter-spacing: 1.2px; text-transform: uppercase; color: #800000; }
.ty-now-name { font-family: 'Harriet Display', serif; font-weight: 100; font-size: 28px; line-height: 1.15; }
.ty-now-tip { font-family: 'Specter', system-ui, sans-serif; font-weight: 300; font-size: 15px; line-height: 1.5; letter-spacing: 0.4px; opacity: 0.85; }

/* Homepage "Hi, ik ben Astrid": op mobiel met normale marge en afgeronde hoeken, zonder lege ruimte eronder */
@media (max-width: 700px) {
  #ty-root .ty-hi-img { flex: 0 0 auto !important; width: 100% !important; margin: 32px 0 0 !important; min-height: 0 !important; height: auto !important; aspect-ratio: auto !important; border-radius: 5px; }
  #ty-root .ty-hi-img img { border-radius: 5px !important; transform: none !important; position: static !important; height: auto !important; aspect-ratio: 4 / 5; width: 100% !important; object-position: 45% 40% !important; }
}
@media (max-width: 700px) { #ty-root .ty-hi-text { padding-top: 28px !important; padding-bottom: 36px !important; } }

@media (max-width: 700px) { #ty-root h1, #ty-root h2, #ty-root h3, #ty-root p { overflow-wrap: break-word; } }

/* TCM Basics in de header altijd rood */
#ty-root header a[href="/tcm-basics/"] { color: #800000 !important; }
#ty-root footer a[href="/tcm-basics/"] { color: #ffffff !important; }

/* Homepage-band in huisstijlrood: Nu-actief-kader als schone outline */
.ty-band-red .ty-now { background: transparent; border-color: rgba(255, 248, 227, 0.45); color: #fff8e3; }
.ty-band-red .ty-now-label { color: #f4e3a6; }

@media (max-width: 700px) { #ty-root .ty-hero-op1 { width: 100% !important; min-height: 0 !important; aspect-ratio: 1312 / 700 !important; }
  #ty-root .ty-hero-op1 h1 span:first-child { font-size: calc((100vw - 52px) * 0.119) !important; letter-spacing: 1px !important; }
  #ty-root .ty-hero-op1 h1 span:last-child { font-size: calc((100vw - 52px) * 0.0595) !important; letter-spacing: 0.6px !important; } }
@media (max-width: 700px) { #ty-root section .ty-hero-op1 img { max-height: none !important; height: 100% !important; width: 100% !important; object-position: 50% 30% !important; } }

/* Intake in twee stappen */
body.ik-step1 .ik-form > section:nth-of-type(n+3), body.ik-step1 .ik-send { display: none !important; }
body:not(.ik-step1) .ik-next { display: none !important; }

.ik-d2 { display: none; }
body.ik-deel2 .ik-d2 { display: flex !important; }
body.ik-deel2 .ik-form > section:nth-of-type(-n+2) { display: none !important; }
body.ik-deel2 form[data-form=interesse] { display: none !important; }