/* KGT look (CHG-034): the unboxed redesign layer on top of the CrocoBuilder design system and kgt-site.css.
   Rules: no outlines, no shadows at rest, no cream, no small uppercase labels, no eyebrows; surfaces are a tone
   step or a full colour field; large type; pictures carry the page. Switch off with define('KGT_LOOK', false).
   Selectors start with `html` so they win over the design-system classes without !important. */

/* ---------- Tokens ---------- */
html:root {
  --kgt-font-ui: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kgt-font-fun: 'Schibsted Grotesk', system-ui, sans-serif;
  --kgt-sand: #EEF2F8;            /* the one tone step from white (was cream #FFF8EC) */
  --kgt-line: #D5DCE7;            /* form fields only */
  --kgt-ink: #1F2A44;
  --kgt-ink-muted: #46526A;
  --kgt-field-navy: #1F2A44;
  --kgt-field-blue: #436497;
  --kgt-field-sun: #F6D575;
  --kgt-fs-display: clamp(48px, 9vw, 152px);
  --kgt-fs-h1: clamp(44px, 6.4vw, 104px);
  --kgt-fs-h2: clamp(32px, 4.2vw, 64px);
  --kgt-fs-h3: clamp(20px, 1.5vw, 24px);
  --kgt-fs-body: clamp(17px, 0.95rem + 0.25vw, 19px);
  --kgt-fs-small: 14px;
  --kgt-fs-tiny: 14px;
  --kgt-section-y: clamp(72px, 11vw, 168px);
  --kgt-container: 2400px;   /* content runs edge to edge between one pair of page margins */
  --kgt-gutter: clamp(16px, 3.4vw, 40px);
  --kgt-radius: 14px;
  --kgt-radius-sm: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}
html body { font-family: var(--kgt-font-ui); color: var(--kgt-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html body, html .kgt-body, html .kgt-prose { font-size: var(--kgt-fs-body); }
html .kgt-body, html .kgt-prose { line-height: 1.55; }
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: clip; }

/* ---------- Type ---------- */
html .kgt-h1 { font-size: var(--kgt-fs-h1); font-weight: 800; line-height: 0.92; letter-spacing: -0.045em; }
html .kgt-h2 { font-size: var(--kgt-fs-h2); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; }
html .kgt-h3, html .kgt-card-title { font-size: var(--kgt-fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
html .kgt-lead { font-size: var(--kgt-fs-h3); line-height: 1.4; color: var(--kgt-ink); }
html .kgt-meta { font-size: var(--kgt-fs-small); color: var(--kgt-ink-muted); }
html .kgt-eyebrow, html .kgt-location__label { display: none; }
html .kgt-prose h2 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
html .kgt-prose h3 { font-size: var(--kgt-fs-h3); font-weight: 600; letter-spacing: -0.015em; }
html .kgt-page-title { font-size: var(--kgt-fs-h1); line-height: 0.92; letter-spacing: -0.045em; margin-top: clamp(40px, 7vw, 96px); margin-bottom: clamp(24px, 3vw, 48px); }

/* Badges: sentence case at a readable size, filled, no tracking. */
html .kgt-badge { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 5px 11px; }
html .kgt-chip { font-size: 14px; font-weight: 600; }

/* ---------- Surfaces: no boxes ---------- */
html .kgt-section-sand { background-color: var(--kgt-sand); }
html .kgt-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
html .kgt-card-body { padding: 14px 0 0; gap: 6px; }
html .kgt-card .kgt-card__media, html .kgt-card > img, html .kgt-card .cb-el-image { border-radius: var(--kgt-radius); overflow: clip; }
html .kgt-card-pad { background: var(--kgt-sand); border-radius: var(--kgt-radius); padding: clamp(24px, 3vw, 44px); }
html .kgt-spot-card, html .cb-hb_card { box-shadow: none; transform: none; }
html .kgt-spot-card:hover, html .cb-hb_card:hover { box-shadow: none; transform: none; }
html .kgt-fact, html .kgt-facts--grid .kgt-fact:last-child { border: 0; padding-top: 10px; padding-bottom: 10px; }
html .kgt-map, html .kgt-map-view__canvas { border: 0; }
html .kgt-side-card, html .kgt-dayplan { border: 0; background: var(--kgt-sand); }
html .kgt-toc a { border-top: 0; }
html .kgt-prose details, html .kgt-divi-details, html .kgt-faq details { border: 0; background: var(--kgt-sand); box-shadow: none; }
html .kgt-faq details[open] { box-shadow: none; }
html .kgt-divi-hr { border-top: 0; height: clamp(24px, 4vw, 48px); }
html .kgt-more > summary { border: 0; background: var(--kgt-sand); }
html .kgt-stats li { border: 0; background: var(--kgt-sand); }
html .kgt-cat { border: 0; background: var(--kgt-sand); box-shadow: none; }
html .kgt-cat:hover { box-shadow: none; background: var(--kgt-primary-soft); }
html .kgt-ebook { background: transparent; padding: 0; }
html .kgt-ebook__img { box-shadow: none; }
html .kgt-social__link { border: 0; background: rgba(255, 255, 255, .12); }
html .kgt-lang { border: 0; background: var(--kgt-sand); }
html .kgt-filterbar { border: 0; box-shadow: none; background: var(--kgt-sand); }
html .kgt-filter-toggles .jet-checkboxes-list__button { border: 0; background: var(--kgt-sand); }
html .kgt-gyg__nav button { border: 0; background: var(--kgt-sand); }
html .jet-form-builder__heading { border-top: 0; padding-top: 0; }
html .kgt-header-search .jet-ajax-search__results-area { box-shadow: 0 18px 40px rgba(31, 42, 68, .16); } /* floats: allowed */

/* Header: a plain bar, no line. */
html .cb-hdr_root { border-bottom: 0; background: #fff; }
/* Footer: no rule; the name returns large at the end (look.js adds nothing here). */
html .cb-ftr_bottom { border-top: 0; }

/* Hero over a photograph: a flat scrim instead of a text shadow; no glass. */
html .kgt-hero .kgt-h1 { text-shadow: none; font-size: var(--kgt-fs-h1); line-height: 0.92; max-width: 14ch; }
html .kgt-hero .kgt-stats li, html .kgt-hero .kgt-chip { backdrop-filter: none; -webkit-backdrop-filter: none; }
html .kgt-hero .kgt-stats li { background: rgba(31, 42, 68, .55); }
html .kgt-hero .kgt-chip { background: rgba(31, 42, 68, .55); }
html .kgt-hero .kgt-search input[type="search"] { box-shadow: none; }
html .kgt-hero figcaption { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Buttons: one fill each, pill, feedback under the hand. */
html .kgt-btn { border: 0; font-weight: 600; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
html .kgt-btn:active { transform: scale(0.97); }
html .kgt-btn-outline { background: var(--kgt-primary-soft); color: var(--kgt-primary-dark); }
html .kgt-btn-outline:hover { background: var(--kgt-primary); color: #fff; }
html .kgt-link { text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease; }

/* Cards answer the pointer with the picture, not the box. */
html .kgt-card img { transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  html .kgt-card:hover img { transform: scale(1.04); }
  html .kgt-card:hover .kgt-card-title { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
}

/* ---------- Motion layer (look.js sets the starting states, never under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .kgt-r { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out) var(--d, 0ms), transform 600ms var(--ease-out) var(--d, 0ms); }
  .js .kgt-r.is-in { opacity: 1; transform: none; }
  .js .kgt-r.kgt-card img, .js .kgt-r.cb-el-image img, .js figure.kgt-r img { transform: scale(1.08); transition: transform 1400ms var(--ease-soft) var(--d, 0ms); }
  .js .kgt-r.is-in.kgt-card img, .js .kgt-r.is-in.cb-el-image img, .js figure.kgt-r.is-in img { transform: none; }
  .kgt-split .kgt-line { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .kgt-split .kgt-line > span { display: block; transform: translateY(110%); }
  .kgt-split.is-in .kgt-line > span { transform: none; transition: transform 900ms var(--ease-expo) calc(var(--i) * 60ms); }

  /* Page heroes recede as they leave: the picture sinks a little, the words lift away. */
  @supports (animation-timeline: view()) {
    html .kgt-hero { view-timeline-name: --kgt-hero; }
    html .kgt-hero .kgt-hero-media img, html .kgt-hero > img { animation: kgt-sink linear both; animation-timeline: --kgt-hero; animation-range: exit 0% exit 100%; }
    html .kgt-hero .kgt-hero-content { animation: kgt-lift linear both; animation-timeline: --kgt-hero; animation-range: exit 0% exit 80%; }
  }
  /* Page to page: the browser's own cross-document transition. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: kgt-vt-leave 120ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: kgt-vt-arrive 180ms var(--ease-out) both; }
}
@keyframes kgt-sink { to { transform: translateY(8%) scale(1.06); } }
@keyframes kgt-lift { to { transform: translateY(-8%); opacity: 0; } }
@keyframes kgt-vt-leave { to { opacity: 0; } }
@keyframes kgt-vt-arrive { from { opacity: 0; } }

/* ---------- Round-2 fixes from the inspector ---------- */
/* Photo credits sit inside the page margin, small but readable. */
/* Reading measure: running text never wider than a comfortable line, now that sections run edge to edge. */
html p.kgt-lead, html .kgt-lead p { max-width: 52ch; }
html p.kgt-body, html .kgt-term-intro p, html .kgt-section-head p { max-width: 68ch; }
html .kgt-term-intro, html .kgt-term-intro p { font-size: var(--kgt-fs-body); color: var(--kgt-ink); }
/* Article titles are sentences written by the editor: a smaller display step so they stay near two lines. */
html .single-post-blog .kgt-h1, html .single-post-blog h1.kgt-h1 { font-size: clamp(32px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.035em; max-width: 26ch; }
html .single-post-blog .kgt-prose h2 { font-size: clamp(24px, 2.2vw, 34px); }
/* Leaflet's zoom buttons in the site face (its default is Lucida Console). */
html .leaflet-control-zoom-in, html .leaflet-control-zoom-out { font-family: var(--kgt-font-ui); }
/* Small text never below 13px. */
html .kgt-meta, html .kgt-card__rating, html .kgt-badge { font-size: max(13px, 1em); }

/* ---------- Templates: hubs ---------- */
/* Spot cards in grids: picture and words on the page, no surface behind the words. */
html .kgt-card .kgt-card-pad { background: transparent; padding: 14px 0 0; border-radius: 0; }
/* Breadcrumb on a photograph: sentence case at a readable size. */
html .kgt-hero .kgt-breadcrumb ol { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* The long city/country text reads at a comfortable measure. */
html .cb-hb_about { max-width: 72ch; }

/* ---------- Templates: blog sidebars and the footer ---------- */
/* Reading time, contents, author and "read on" sit on the page instead of in boxes. */
html .kgt-side-card { background: transparent; border: 0; padding: 0; border-radius: 0; }
html .kgt-side-card + .kgt-side-card { margin-top: 28px; }
/* The footer closes with the name at full width, as the home page opens with it. */
html .kgt-footer-name { margin: clamp(56px, 8vw, 120px) 0 0; padding: 0 var(--kgt-gutter); font: 800 clamp(48px, 12.4vw, 260px)/0.78 var(--kgt-font-ui); letter-spacing: -0.06em; color: var(--kgt-field-sun); white-space: nowrap; overflow: clip; }

/* ---------- Owner feedback round 1 (2026-10-25) ---------- */
/* Category tiles: an icon beside each name. */
html .kgt-cat { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; }
html .kgt-cat__icon { width: 44px; height: 44px; padding: 10px; box-sizing: border-box; border-radius: 50%; background: #fff; color: var(--kgt-primary); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
html .kgt-cat:hover .kgt-cat__icon { background: var(--kgt-primary); color: #fff; }
/* Card grids: more room between rows, so every title clearly belongs to the picture above it. */
html body .cb-el-query-loop .cb-collection__items--columns { row-gap: clamp(44px, 4.4vw, 72px); column-gap: clamp(20px, 2vw, 32px); }
html .kgt-card .kgt-card-pad, html .kgt-card-body { padding-top: 16px; }
html .kgt-card .kgt-h3, html .kgt-card .kgt-card-title { margin-bottom: 4px; }
/* Blog article: the sidebars sit right beside the text, the three columns centred together. */
@media (min-width: 1025px) {
  html .cb-bl_layout { grid-template-columns: 240px minmax(0, 700px) 300px; justify-content: center; column-gap: clamp(40px, 4vw, 72px); }
}

/* ---------- Shop: the single product (FluentCart block inside template 8) ---------- */
html .kgt-product { padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 7vw, 112px); }
html .kgt-product__back { margin: 0 0 clamp(20px, 3vw, 40px); font-size: 16px; }
html body .kgt-product .fct-single-product-page .fct-single-product-page-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
html body .kgt-product .fct-single-product-page .fct-product-gallery-wrapper img { border-radius: var(--kgt-radius); box-shadow: none; }
html body .kgt-product .fct-single-product-page .fct-product-summary { display: flex; flex-direction: column; gap: 18px; font-family: var(--kgt-font-ui); }
html body .kgt-product #fct-product-summary-title, html body .kgt-product .fct-single-product-page .fct-product-title { margin: 0; font-size: clamp(30px, 3vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--kgt-ink); }
html body .kgt-product .fct-single-product-page .fct-product-sku { display: none; }
html body .kgt-product .fct-single-product-page .fct-product-excerpt { font-size: var(--kgt-fs-body); line-height: 1.55; color: var(--kgt-ink); max-width: 52ch; }
html body .kgt-product .fct-single-product-page .fct-item-price, html body .kgt-product .fct-single-product-page .fct-price-range { font-size: clamp(28px, 2.4vw, 40px); font-weight: 800; letter-spacing: -0.02em; color: var(--kgt-ink); }
html body .kgt-product .fct-single-product-page .fct-product-buttons-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
html body .kgt-product .fct-single-product-page .fluent-cart-direct-checkout-button, html body .kgt-product .fct-single-product-page .fluent-cart-add-to-cart-button { min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background-image: none; box-shadow: none; font: 600 17px/1 var(--kgt-font-ui); text-transform: none; letter-spacing: 0; cursor: pointer; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
html body .kgt-product .fct-single-product-page .fluent-cart-direct-checkout-button { background-color: var(--kgt-cta); color: var(--kgt-ink); }
html body .kgt-product .fct-single-product-page .fluent-cart-direct-checkout-button:hover { background-color: var(--kgt-cta-dark); }
html body .kgt-product .fct-single-product-page .fluent-cart-add-to-cart-button { background-color: var(--kgt-primary-soft); color: var(--kgt-primary-dark); }
html body .kgt-product .fct-single-product-page .fluent-cart-add-to-cart-button:hover { background-color: var(--kgt-primary); color: #fff; }
html body .kgt-product .fct-single-product-page .fluent-cart-direct-checkout-button:active, html body .kgt-product .fct-single-product-page .fluent-cart-add-to-cart-button:active { transform: scale(0.97); }
html .kgt-product__about .kgt-prose { max-width: 68ch; }
@media (max-width: 900px) { html body .kgt-product .fct-single-product-page .fct-single-product-page-row { grid-template-columns: 1fr; } }

/* ---------- Inner templates (2026-10-25) ---------- */
/* Page heroes: taller, and they arrive: the photo settles, the title rises line by line (look.js), the rest follows.
   Pure CSS animations with a finished end state, so nothing stays hidden if the script does not run. */
html .kgt-hero { min-height: clamp(480px, 70svh, 820px); padding-bottom: clamp(40px, 6vh, 72px); }
@media (prefers-reduced-motion: no-preference) {
  html .kgt-hero .kgt-hero-media { animation: kgt-hero-settle 1400ms var(--ease-expo) both; }
  .js .kgt-hero .kgt-hero-content > :not(.kgt-h1):not(h1) { animation: kgt-hero-rise 700ms var(--ease-out) 420ms both; }
  .js .kgt-hero .kgt-h1:not(.kgt-split-load) { animation: kgt-hero-show 1ms 1400ms both; opacity: 0; }
  .kgt-split-load .kgt-line { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .kgt-split-load .kgt-line > span { display: block; transform: translateY(110%); animation: kgt-line-up 900ms var(--ease-expo) calc(120ms + var(--i) * 60ms) forwards; }
}
@keyframes kgt-hero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes kgt-hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes kgt-hero-show { to { opacity: 1; } }
@keyframes kgt-line-up { to { transform: none; } }

/* Text columns beside a form or a list: on the page, no box. */
html .kgt-aside-text { padding-top: 8px; }

/* Winkel: the ebook as a split, cover and words, no card. */
html .kgt-ebook { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; }
html .kgt-ebook__img { width: 100%; height: auto; border-radius: var(--kgt-radius); box-shadow: none; }
html .kgt-ebook__body { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
html .kgt-ebook__body .kgt-h2 { font-size: clamp(32px, 3.4vw, 54px); max-width: 18ch; }
html .kgt-ebook__body .kgt-body { max-width: 56ch; margin: 0; }
html .kgt-ebook__price { margin: 0; font-size: 18px; }
html .kgt-ebook__price strong { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
@media (max-width: 800px) { html .kgt-ebook { grid-template-columns: 1fr; } html .kgt-ebook__img { max-width: 360px; margin: 0 auto; } }

/* Day plans on city hubs: body size in the full ink. */
html .kgt-dayplan, html .kgt-dayplan p, html .kgt-dayplan li { font-size: 16px; color: var(--kgt-ink); }

/* ---------- Owner feedback round 3 ---------- */
/* Pages without a CrocoBuilder document (account, checkout, legal pages): their content sits in the centred page
   column instead of against the left edge. */
html main.crocoblocks-theme-builder-location--body-location > :not(.crocoblocks-document):not(script):not(style) { width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: var(--kgt-gutter); padding-right: var(--kgt-gutter); box-sizing: border-box; }
html main.crocoblocks-theme-builder-location--body-location > .kgt-page-title { max-width: 1240px; }
html main.crocoblocks-theme-builder-location--body-location > :last-child:not(.crocoblocks-document) { margin-bottom: clamp(56px, 8vw, 120px); }
/* Category tiles: wider tiles, the name on one line where it fits, the count under it. */
html .kgt-cats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
html .kgt-cat { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; min-height: 96px; padding: 20px 24px; border-radius: 20px; }
html .kgt-cat__icon { grid-row: 1 / span 2; align-self: center; width: 48px; height: 48px; }
html .kgt-cat strong { grid-column: 2; align-self: end; font-size: 18px; line-height: 1.25; }
html .kgt-cat span { grid-column: 2; align-self: start; justify-self: start; padding: 0; background: none; border-radius: 0; font-size: 14px; font-weight: 500; color: var(--kgt-ink-muted); }

/* ---------- Footer social feed (social.php, CHG-038) ---------- */
/* The latest pins and posts run past as a row of cards: picture on top, the caption below on a darker panel, the
   handle and network at the foot. Hover or focus holds the row; with reduced motion it is a row you scroll. */
html .kgt-sfeed { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); color: #fff; }
html .kgt-sfeed__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 4vw, 44px); }
html .kgt-sfeed__title { margin: 0; font: 800 clamp(34px, 4.4vw, 64px)/0.95 var(--kgt-font-ui); letter-spacing: -0.04em; color: #fff; }
html .kgt-sfeed__lead { margin: 12px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
html .kgt-sfeed__nets { display: flex; flex-wrap: wrap; gap: 10px; }
html .kgt-sfeed__net { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--kgt-field-sun); color: var(--kgt-ink); font-weight: 700; font-size: 16px; text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
html .kgt-sfeed__net:hover { background: #fff; color: var(--kgt-ink); }
html .kgt-sfeed__row { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
html .kgt-sfeed__track { display: flex; flex: none; gap: 16px; margin: 0; padding: 0 8px; list-style: none; animation: kgt-sfeed-run 90s linear infinite; }
html .kgt-sfeed__row:hover .kgt-sfeed__track, html .kgt-sfeed__row:focus-within .kgt-sfeed__track { animation-play-state: paused; }
@keyframes kgt-sfeed-run { to { transform: translateX(calc(-100% - 16px)); } }
html .kgt-sfeed__track li { flex: none; width: clamp(220px, 21vw, 280px); }
html .kgt-sfeed__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 18px; background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
html .kgt-sfeed__card img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { html .kgt-sfeed__card:hover img { transform: scale(1.04); } }
html .kgt-sfeed__body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
html .kgt-sfeed__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .9); }
html .kgt-sfeed__meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: 14px; font-weight: 700; color: var(--kgt-field-sun); }
html .kgt-sfeed__meta .kgt-ico { color: #fff; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  html .kgt-sfeed__row { overflow-x: auto; scroll-snap-type: x mandatory; mask-image: none; -webkit-mask-image: none; }
  html .kgt-sfeed__track { animation: none; }
  html .kgt-sfeed__track[aria-hidden="true"] { display: none; }
  html .kgt-sfeed__track li { scroll-snap-align: start; }
}
@media (max-width: 700px) {
  html .kgt-sfeed__track li { width: 64vw; }
  html .kgt-sfeed__track { animation-duration: 70s; }
}

/* Account page while signed out (FluentCart's login message): one centred card under a centred title. */
html main:has(> .fct_auth_wrap, > .kgt-auth) { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 128px); }
html main:has(> .fct_auth_wrap, > .kgt-auth) > .kgt-page-title { text-align: center; max-width: none; }
html body main > div.fct_auth_wrap.fct_auth_wrap { max-width: 520px; margin-top: 28px; padding: clamp(28px, 4vw, 44px); border-radius: 24px; background: var(--kgt-sand); text-align: center; }
html .fct_auth_message h2 { margin: 0 0 10px; font: 800 28px/1.1 var(--kgt-font-ui); letter-spacing: -0.03em; color: var(--kgt-ink); }
html .fct_auth_message p { margin: 0 0 22px; font-size: 17px; color: var(--kgt-ink); }
html .fct_auth_message .fct-customer-login-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--kgt-field-sun); color: var(--kgt-ink); font-weight: 700; font-size: 16px; text-decoration: none; }
html .fct_auth_message .fct-customer-login-btn:hover { background: var(--kgt-ink); color: #fff; }
/* Our own sign-in on the Account page (account.php, CHG-063): one sand card, labels above full-width fields. */
html body main > div.kgt-auth.kgt-auth { box-sizing: border-box; width: min(480px, calc(100% - 2 * var(--kgt-gutter))); max-width: none; margin: 28px auto 0; padding: clamp(28px, 4vw, 44px); border-radius: 24px; background: var(--kgt-sand); color: var(--kgt-ink); }
html .kgt-auth__title { margin: 0 0 8px; font: 800 28px/1.1 var(--kgt-font-ui); letter-spacing: -0.03em; color: var(--kgt-ink); }
html .kgt-auth__lead { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: var(--kgt-ink-muted); }
html .kgt-auth__msg { margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; background: #E6F0E9; color: #1E4D2B; font-size: 15px; line-height: 1.45; }
html .kgt-auth__msg--error { background: #FBE7E4; color: #8A1F12; }
html .kgt-auth__form { display: flex; flex-direction: column; gap: 16px; }
html .kgt-auth__field { display: flex; flex-direction: column; gap: 6px; }
html .kgt-auth__field label { font-size: 15px; font-weight: 600; color: var(--kgt-ink); }
html .kgt-auth__field input { box-sizing: border-box; width: 100%; height: 52px; padding: 0 18px; border: 1px solid #D5DBE5; border-radius: 14px; background: #fff; font: 400 16px var(--kgt-font-ui); color: var(--kgt-ink); transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
html .kgt-auth__field input:focus { outline: 0; border-color: var(--kgt-field-blue); box-shadow: 0 0 0 3px rgba(67, 100, 151, .25); }
html .kgt-auth__field input[aria-describedby] { border-color: #C2412E; }
html .kgt-auth__pass { position: relative; display: block; }
html .kgt-auth__pass input { padding-right: 92px; }
html .kgt-auth__show { position: absolute; top: 6px; right: 6px; min-width: 72px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--kgt-field-blue); font: 600 15px var(--kgt-font-ui); cursor: pointer; }
html .kgt-auth__show:hover { background: #EEF2F8; }
html .kgt-auth__show:focus-visible { outline: 3px solid var(--kgt-field-blue); outline-offset: 0; }
html .kgt-auth__check { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: 15px; color: var(--kgt-ink); cursor: pointer; }
html .kgt-auth__check input { width: 20px; height: 20px; margin: 0; accent-color: var(--kgt-field-navy); }
html .kgt-auth__submit { width: 100%; min-height: 52px; justify-content: center; margin-top: 4px; font-size: 16px; }
html .kgt-auth__alt { margin: 20px 0 0; text-align: center; font-size: 15px; }
html .kgt-auth__alt a, html .kgt-auth__note a { color: var(--kgt-field-blue); text-decoration: underline; text-underline-offset: 0.18em; }
html .kgt-auth__note { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(31, 42, 68, .12); text-align: center; font-size: 14px; line-height: 1.5; color: var(--kgt-ink-muted); }
/* FluentCart's "Bevestig je e-mailadres" screen on the Account page (CHG-064): the same card as the sign-in. */
html main:has(.fct-email-claim) > .kgt-page-title { text-align: center; max-width: none; }
html body main.crocoblocks-theme-builder-location > section.fct-email-claim.fct-email-claim { box-sizing: border-box; width: min(520px, calc(100% - 2 * var(--kgt-gutter))); max-width: none; margin: 28px auto clamp(64px, 9vw, 128px); padding: clamp(28px, 4vw, 44px); border: 0; border-radius: 24px; background: var(--kgt-sand); color: var(--kgt-ink); box-shadow: none; text-align: left; }
html .fct-email-claim h2 { margin: 0 0 12px; font: 800 28px/1.1 var(--kgt-font-ui); letter-spacing: -0.03em; color: var(--kgt-ink); }
html .fct-email-claim p { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--kgt-ink); overflow-wrap: anywhere; }
html .fct-email-claim p[role] { padding: 12px 16px; border-radius: 12px; background: #E6F0E9; color: #1E4D2B; font-size: 15px; }
html .fct-email-claim p[role="alert"] { background: #FBE7E4; color: #8A1F12; }
html .fct-email-claim form { margin: 0 0 18px; }
html .fct-email-claim .fct-email-claim-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--kgt-field-sun); color: var(--kgt-ink); font: 700 16px var(--kgt-font-ui); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
html .fct-email-claim .fct-email-claim-button:hover { background: var(--kgt-ink); color: #fff; }
html .fct-email-claim .fct-email-claim-button:active { transform: scale(0.98); }
html .fct-email-claim .fct-email-claim-button:disabled { opacity: .7; cursor: progress; }
html .fct-email-claim .fct-email-claim-button:focus-visible { outline: 3px solid var(--kgt-field-blue); outline-offset: 3px; }
html .fct-email-claim > p:last-of-type { margin: 0; padding-top: 16px; border-top: 1px solid rgba(31, 42, 68, .12); text-align: center; font-size: 15px; }
html .fct-email-claim > p:last-of-type a { color: var(--kgt-field-blue); text-decoration: underline; text-underline-offset: 0.18em; }

/* ---------- Reisblog finder (blogfinder.php, CHG-040) ---------- */
/* Heading and search field on one line, the two chip rows under it, then the card grid. */
html .kgt-bfind__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
html .kgt-bfind__title { margin: 0; }
html .kgt-bfind__form { position: relative; display: flex; align-items: center; gap: 10px; width: min(100%, 460px); height: 58px; padding: 0 20px; border: 1px solid #D5DCE7; border-radius: 999px; background: #fff; color: var(--kgt-ink-muted); }
html .kgt-bfind__form:focus-within { border-color: var(--kgt-primary); box-shadow: 0 0 0 3px var(--kgt-primary-soft); }
html .kgt-bfind__form .kgt-ico { flex: none; width: 20px; height: 20px; }
html .kgt-bfind__form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 17px var(--kgt-font-ui); color: var(--kgt-ink); }
html .kgt-bfind__filters { display: grid; gap: 12px; margin-top: 28px; }
html .kgt-bfind__group { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; }
html .kgt-bfind__label { margin: 0; font-size: 15px; font-weight: 700; color: var(--kgt-ink-muted); }
html .kgt-bfind__chips { display: flex; flex-wrap: wrap; gap: 8px; }
html .kgt-bfind .kgt-chipbtn { height: 42px; }
html .kgt-bfind__n { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--kgt-sand); font-size: 13px; font-weight: 700; color: var(--kgt-ink-muted); text-align: center; }
html .kgt-bfind .kgt-chipbtn[aria-pressed="true"] .kgt-bfind__n { background: rgba(255, 255, 255, .18); color: #fff; }
html .kgt-bfind__count { margin: 32px 0 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kgt-ink-muted); }
html .kgt-bfind__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) 24px; margin: 0; padding: 0; list-style: none; }
html .kgt-bfind__item[hidden] { display: none; }
html .kgt-bfind__card, html .kgt-bfind__link { display: block; height: 100%; color: inherit; text-decoration: none; }
html .kgt-bfind__link .kgt-card__media { display: block; overflow: clip; border-radius: var(--kgt-radius); }
html .kgt-bfind__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--kgt-sand); }
html .kgt-bfind .kgt-card-body { display: flex; flex-direction: column; gap: 6px; }
html .kgt-bfind .kgt-card-title { margin: 0; }
html .kgt-bfind__tags { font-size: 14px; font-weight: 600; color: var(--kgt-primary); }
html .kgt-bfind__link:focus-visible { outline: 3px solid var(--kgt-primary); outline-offset: 4px; border-radius: var(--kgt-radius); }
html .kgt-bfind__none { padding: 40px 24px; border-radius: var(--kgt-radius); background: var(--kgt-sand); text-align: center; }
html .kgt-bfind__none p { margin: 0 0 16px; font-size: 18px; }
html .kgt-bfind__more { margin: 40px 0 0; text-align: center; }
html .kgt-bfind__morebtn { background: var(--kgt-ink); color: #fff; }
html .kgt-bfind__morebtn:hover { background: var(--kgt-primary); color: #fff; }
@media (max-width: 1024px) { html .kgt-bfind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: chip rows scroll sideways under a small label; one card per row. */
@media (max-width: 700px) {
  html .kgt-bfind__form { width: 100%; height: 54px; }
  html .kgt-bfind__group { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html .kgt-bfind__label { font-size: 13px; }
  html .kgt-bfind__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--kgt-gutter) * -1); padding: 0 var(--kgt-gutter); scrollbar-width: none; }
  html .kgt-bfind__chips::-webkit-scrollbar { display: none; }
  html .kgt-bfind .kgt-chipbtn { flex: none; height: 44px; }
  html .kgt-bfind__grid { grid-template-columns: minmax(0, 1fr); }
}
html .kgt-term-about__title { margin: 0 0 20px; max-width: 72ch; }

/* Later pages of a visit (html.kgt-calm, set in look.php): the hero is there at once, no settle or rise. */
html.kgt-calm .kgt-hero .kgt-hero-media, html.kgt-calm.js .kgt-hero .kgt-hero-content > *, html.kgt-calm.js .kgt-hero .kgt-h1.kgt-h1 { animation: none; opacity: 1; }

/* ---------- Audit fixes (CHG-046) ---------- */
/* Spot articles: lines of about 75-80 characters (were ~90 at 1280px; ch is the width of a 0, so 60ch here). */
html .single-post .cb-el-post-content > :is(p, ul, ol, blockquote, h2, h3, h4) { max-width: 60ch; }
/* Small card titles that run to three lines on phones get a little more air. */
@media (max-width: 800px) {
  html :is(.kgt-tipcard__title, .kgt-prow__title, .kgt-alist__name, .kgt-scard__title) { line-height: 1.3; }
}
html .kgt-prow__title { line-height: 1.3; }
/* The map credit (Leaflet) gets a little inset. */
html .leaflet-control-attribution { padding: 2px 6px; }
/* Hero scrim inside the photo layer: the photo layer is its own stacking context, so a scrim on the hero itself
   was drawn over the photo credit too. Inside the layer it sits between the photo and the credit. */
html .kgt-hero:has(> .kgt-hero-media)::after { content: none; }
html .kgt-hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(15, 20, 33, .78) 0%, rgba(15, 20, 33, .45) 45%, rgba(15, 20, 33, .08) 100%), linear-gradient(0deg, rgba(15, 20, 33, .55) 0%, rgba(15, 20, 33, 0) 45%); }
@media (max-width: 767px) { html .kgt-hero-media::after { background: linear-gradient(0deg, rgba(15, 20, 33, .85) 0%, rgba(15, 20, 33, .35) 60%, rgba(15, 20, 33, .15) 100%); } }
/* The hero intro stays on the dark side of the scrim (it ran into the bright middle of wide photos). */
html .kgt-hero .kgt-lead { max-width: 46ch; }

/* ---------- Accessibility pass (CHG-048) ---------- */
/* Reflow at 320px (WCAG 1.4.10): Cloudflare Turnstile is a fixed 300px box; on the narrowest phones it is zoomed
   to fit instead of widening the page. FluentCart's product wrapper keeps its padding inside its width. */
html .jet-form-builder-row.captcha-token-container { width: auto; max-width: 100%; }
@media (max-width: 400px) { html .captcha-token-container > :not(input) { zoom: 0.78; } }
html body .fct-single-product-page { box-sizing: border-box; max-width: 100%; }
@media (max-width: 600px) { html body .kgt-product .fct-single-product-page { padding-inline: 0; } }
html .kgt-partner-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Blog sidebar cards (CHG-054) ---------- */
/* "Geschreven door" and "Lees verder" as white cards with a soft shadow: small mono label, photo with name and job
   title, the author's own words; then the articles about the same destination. */
html .kgt-author.kgt-side-card, html .kgt-related.kgt-side-card { background: #fff; border-radius: 20px; padding: 20px 18px 22px; box-shadow: 0 1px 2px rgba(31, 42, 68, .05), 0 10px 28px rgba(31, 42, 68, .09); }
html .kgt-author.kgt-side-card + .kgt-related.kgt-side-card, html .cb-el:has(> .kgt-author) + .cb-el:has(> .kgt-related) { margin-top: 16px; }
html .kgt-author__label { margin: 0 0 14px; font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--kgt-ink-muted); }
html .kgt-author .kgt-byline { gap: 12px; }
html .kgt-author .kgt-byline__name { font-size: 16px; font-weight: 600; line-height: 1.3; }
html .kgt-author .kgt-byline__name a { color: var(--kgt-field-blue); text-decoration: none; }
html .kgt-author .kgt-byline__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
html .kgt-author__title { margin: 4px 0 0; font-size: 15px; line-height: 1.35; color: var(--kgt-ink-muted); }
html .kgt-author__bio { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--kgt-ink-muted); }
html .kgt-author__bio p { margin: 0; }
html .kgt-author__bio p + p { margin-top: 1em; }
html .kgt-related .kgt-side-card__title { margin: 0 0 18px; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
html .kgt-related ul { gap: 18px; }
html .kgt-related .kgt-mini { gap: 14px; }
html .kgt-related .kgt-mini__img { width: 72px; height: 52px; border-radius: 10px; }
html .kgt-related .kgt-mini__title { font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; }
html .kgt-related .kgt-mini > span { gap: 6px; }

/* ---------- Own hero photos (CHG-055) ---------- */
/* Pages without a builder document (privacy, terms, disclaimer, cookies) put their content straight in <main>, where
   every child is held to the 1240px text column; their hero runs the full width like the designed pages. */
html main.crocoblocks-theme-builder-location--body-location > .kgt-hero.kgt-hero--page.kgt-hero--page { max-width: none; margin: 0 0 clamp(32px, 5vw, 64px); padding-left: 0; padding-right: 0; }
html .kgt-hero--page .kgt-page-title { margin: 0; }

/* ---------- End of a blog article (CHG-055) ---------- */
/* "Ontdek meer over" as outline chips, Google's preferred-source link as a pill, then the editorial disclosure; each
   part opens with a thin rule, like the reference. Inside .kgt-prose, so the article's heading and list styles are reset. */
html .kgt-endnote { margin-top: clamp(40px, 6vw, 64px); }
html .kgt-endnote__part { border-top: 1px solid var(--kgt-line); padding: 28px 0 8px; }
html .kgt-prose h2.kgt-endnote__title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 800 20px/1.25 var(--kgt-font-ui); letter-spacing: -0.015em; color: var(--kgt-ink); }
html .kgt-endnote__title .kgt-ico { width: 20px; height: 20px; flex: none; color: #C24E21; }
html .kgt-prose .kgt-endnote__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
html .kgt-prose .kgt-endnote__chips li { margin: 0; padding: 0; }
html .kgt-prose .kgt-endnote__chips li::before { content: none; }
html .kgt-prose .kgt-endchip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--kgt-line); border-radius: 999px; font: 600 15px/1.2 var(--kgt-font-ui); color: var(--kgt-ink); text-decoration: none; background: #fff; transition: border-color var(--t-hover, 160ms) ease, background-color var(--t-hover, 160ms) ease; }
html .kgt-prose .kgt-gsource { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px; border: 1px solid var(--kgt-line); border-radius: 999px; font: 500 15px/1.3 var(--kgt-font-ui); color: var(--kgt-ink-muted); text-decoration: none; background: #fff; transition: border-color var(--t-hover, 160ms) ease, background-color var(--t-hover, 160ms) ease; }
html .kgt-gsource strong { font-weight: 700; color: var(--kgt-field-blue); }
html .kgt-gsource__g { width: 20px; height: 20px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  html .kgt-prose .kgt-endchip:hover, html .kgt-prose .kgt-gsource:hover { border-color: var(--kgt-field-blue); background: var(--kgt-sand); }
}
html .kgt-prose .kgt-endnote__text { margin: 0 0 8px; font-size: 16px; line-height: 1.65; color: var(--kgt-ink-muted); }
html .kgt-prose .kgt-endnote__text a { color: var(--kgt-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Newsletter in the page (CHG-055) ---------- */
/* Band above the footer's social feed: big title with one coral word on the left, the form on the right as a soft
   pill field and a pill button; stacks on phones. The side card in the blog's left column follows the sidebar cards. */
html .kgt-nlbox[hidden] { display: none; }
html .kgt-nlbox--band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 80px); align-items: center; max-width: var(--kgt-container); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--kgt-gutter); box-sizing: border-box; }
/* It sits on white above the navy footer: the footer's top spacing moves below the band (when the band is there). */
html footer.cb-ftr_root:has(> .cb-ftr_newsletter) { padding-top: 0; }
html .cb-ftr_newsletter { margin-bottom: var(--kgt-section-y); background: #fff; }
html .kgt-nlbox__title { margin: 0; font: 800 clamp(28px, 3vw, 40px)/1.08 var(--kgt-font-ui); letter-spacing: -0.03em; color: var(--kgt-ink); }
html .kgt-nlbox__title em { font-style: italic; color: #C24E21; }
html .kgt-nlbox__lead { margin: 12px 0 0; max-width: 52ch; font-size: 16px; line-height: 1.55; color: var(--kgt-ink-muted); }
html .kgt-nlbox .kgt-nl__form { display: flex; gap: 10px; }
html .kgt-nlbox .kgt-nl__form input[type=email] { flex: 1; min-width: 0; height: 56px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; background: #F1F3F7; font: 400 16px var(--kgt-font-ui); color: var(--kgt-ink); }
html .kgt-nlbox .kgt-nl__form input[type=email]:focus { outline: 0; border-color: var(--kgt-field-blue); box-shadow: 0 0 0 3px rgba(67, 100, 151, .2); background: #fff; }
html .kgt-nlbox .kgt-nl__form .kgt-btn { flex: none; min-height: 56px; padding: 0 26px; border-radius: 999px; }
html .kgt-nlbox .kgt-nl__small { margin: 10px 0 0 22px; }
html .kgt-nlbox .kgt-nl__msg { margin-left: 22px; }
html .kgt-nlbox [data-nl-step="done"] .kgt-nl__title { margin: 0 0 6px; font: 800 22px/1.2 var(--kgt-font-ui); color: var(--kgt-ink); }
html .kgt-nlbox [data-nl-step="done"] .kgt-nl__lead { margin: 0; font-size: 16px; color: var(--kgt-ink-muted); }
@media (min-width: 1100px) { html .kgt-nlbox--band .kgt-nlbox__title { white-space: nowrap; } }
@media (max-width: 860px) {
  html .kgt-nlbox--band { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  html .kgt-nlbox--band .kgt-nl__form { flex-direction: column; }
  html .kgt-nlbox--band .kgt-nl__form input[type=email] { flex: none; }
  html .kgt-nlbox .kgt-nl__small, html .kgt-nlbox .kgt-nl__msg { margin-left: 0; }
}
html .kgt-nlbox--side { padding: 20px 18px 22px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(31, 42, 68, .05), 0 10px 28px rgba(31, 42, 68, .09); }
html .kgt-nlbox--side .kgt-nlbox__title { font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; }
html .kgt-nlbox--side .kgt-nlbox__lead { margin: 8px 0 14px; font-size: 14px; }
html .kgt-nlbox--side .kgt-nl__form { flex-direction: column; gap: 8px; }
html .kgt-nlbox--side .kgt-nl__form input[type=email] { flex: none; height: 48px; padding: 0 16px; font-size: 16px; }
html .kgt-nlbox--side .kgt-nl__form .kgt-btn { min-height: 48px; width: 100%; justify-content: center; }
html .kgt-nlbox--side .kgt-nl__small, html .kgt-nlbox--side .kgt-nl__msg { margin-left: 0; font-size: 13px; }
/* Below 1024px the left column stacks above the article: the side card would push the text down, so it stays out
   there (the footer band is on every page). */
@media (max-width: 1024px) { html .kgt-nlbox--side { display: none; } }

/* ---------- Ads (CHG-056, ads.php) ---------- */
/* A small label above each hand-placed unit; its height stays reserved until the ad arrives (no jump), and the box
   folds away when AdSense has no ad for it. The right-column unit stays in view while reading. */
html .kgt-ad { margin: clamp(28px, 4vw, 40px) 0; text-align: center; }
html .kgt-ad__label { margin: 0 0 6px; font: 600 11px/1.2 var(--kgt-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--kgt-ink-muted); }
html .kgt-ad--article, html .kgt-ad--end { min-height: 300px; }
html .kgt-ad--rail { min-height: 620px; margin: 8px 0 0; } /* in the sticky left column of blog articles */
html .kgt-ad:has(ins[data-ad-status="unfilled"]) { display: none; }
html .kgt-ad__preview { display: grid; place-items: center; min-height: 250px; border: 2px dashed var(--kgt-line); border-radius: 14px; font: 600 14px var(--kgt-font-ui); color: var(--kgt-ink-muted); background: var(--kgt-sand); }
html .kgt-ad--rail .kgt-ad__preview { min-height: 600px; }
@media (max-width: 1024px) { html .kgt-ad--rail { display: none; } }

/* ---------- Instant search suggestions (CHG-057, suggest.js) ---------- */
/* A white panel under the field: a small photo or a pin per suggestion, the typed letters in bold, the kind and place
   underneath; the last row searches everything. The row under the pointer or the arrow keys is tinted. */
html .kgt-suggest-host { position: relative; }
html .kgt-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: min(62vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(31, 42, 68, .06), 0 16px 40px rgba(31, 42, 68, .16); text-align: left; }
html .kgt-suggest[hidden] { display: none; }
html .kgt-suggest__opt { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--kgt-ink); text-decoration: none; }
html .kgt-suggest__opt.is-active { background: var(--kgt-sand); }
html .kgt-suggest__media { display: grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 10px; background: var(--kgt-sand); }
html .kgt-suggest__media img { width: 100%; height: 100%; object-fit: cover; }
html .kgt-suggest svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--kgt-field-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html .kgt-suggest__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html .kgt-suggest__title { overflow: hidden; font: 600 15px/1.3 var(--kgt-font-ui); white-space: nowrap; text-overflow: ellipsis; }
html .kgt-suggest__title mark { background: none; color: inherit; font-weight: 800; }
html .kgt-suggest__sub { overflow: hidden; font: 400 13px/1.3 var(--kgt-font-ui); color: var(--kgt-ink-muted); white-space: nowrap; text-overflow: ellipsis; }
html .kgt-suggest__all { margin-top: 4px; padding: 12px 10px; border-top: 1px solid var(--kgt-line); border-radius: 0 0 10px 10px; font: 600 14px/1.3 var(--kgt-font-ui); color: var(--kgt-field-blue); }
html .kgt-suggest__all svg { margin: 0 10px; }
/* Next to a button (the filter's "Zoeken") the field is narrow on phones: the panel takes the screen's width instead. */
html .kgt-suggest { width: max(100%, min(480px, calc(100vw - 48px))); right: auto; }

/* ---------- SEO blocks (CHG-070) ---------- */
/* "In het kort" above a spot's text: one tinted paragraph, as wide as the text. */
html .kgt-spot-summary { max-width: 60ch; margin: 0 0 clamp(20px, 3vw, 28px); padding: 16px 20px; border-radius: var(--kgt-radius-sm); background: var(--kgt-sand); }
html .kgt-spot-summary p { margin: 0; color: var(--kgt-ink); }
/* The disclosure line before the first affiliate link: small and quiet, but in full contrast. */
html .kgt-aff-note { max-width: 60ch; margin: 0 0 16px; font: 400 var(--kgt-fs-small)/1.5 var(--kgt-font-ui); color: var(--kgt-ink-muted); }
html .kgt-aff-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* A hub's overview sentences open its "in het kort" / "meer over" section. */
html .kgt-hub-overview { max-width: 72ch; }

/* ---------- Text links (CHG-072) ---------- */
/* Links inside text get their own blue (owner's choice), brighter than the brand blue (#436497) that also colours
   buttons and blue fields, so a link reads as a link. 5.5:1 on white, 4.9:1 on sand (WCAG AA). Buttons, cards,
   chips, menus and links on navy or photo fields keep their own colours. */
:root { --kgt-link: #0167cb; --kgt-link-hover: #014f9c; }
html :is(.kgt-prose, .kgt-divi-text, .kgt-hub-overview, .kgt-auth__alt, .kgt-auth__note, .kgt-aff-note) a:not(.kgt-btn, .kgt-endchip, .kgt-gsource),
html .kgt-prose .kgt-endnote__text a, html .fct-email-claim > p:last-of-type a,
html .kgt-link, html .kgt-spot-meta a, html .kgt-dayplan__title a, html .kgt-author .kgt-byline__name a { color: var(--kgt-link); }
html :is(.kgt-prose, .kgt-divi-text, .kgt-hub-overview, .kgt-auth__alt, .kgt-auth__note, .kgt-aff-note) a:not(.kgt-btn, .kgt-endchip, .kgt-gsource):hover,
html .kgt-prose .kgt-endnote__text a:hover, html .fct-email-claim > p:last-of-type a:hover,
html .kgt-link:hover, html .kgt-spot-meta a:hover, html .kgt-dayplan__title a:hover, html .kgt-author .kgt-byline__name a:hover { color: var(--kgt-link-hover); }