/* Finsweet's CMS Slider pattern keeps a "source" collection list (fs-cmsslider-element="list"
   / "list-2") that its own script reads from and normally hides. It's fully static leftover
   content from the original export (hardcoded "Februari 2026" images, no th:each) — nothing
   reads from it now that our own JS drives the hero carousels directly from the real slides.
   Removing Finsweet's script exposed it as raw visible duplicate content sitting right above
   the real hero, which is what actually looked like "two heroes" stacked together. */
[fs-cmsslider-element="list"], [fs-cmsslider-element="list-2"] {
  display: none !important;
}

/* Force the hero background to genuinely cover its box instead of whatever sizing the source
   image's own aspect ratio would otherwise produce. This only has a box worth covering because
   of the height fix directly below it — .collection-item-hero-slide is height:auto in Webflow's
   own CSS, so without it the image (and everything under section-hero-overflow-color) stops at
   its own natural content height instead of the slide's full 560px, leaving a blank gap below
   the artwork where the dot nav (bottom-anchored to the slide, not the image) ends up sitting. */
.collection-item-hero-slide {
  height: 100% !important;
}
.section-hero-overflow-color {
  background-size: cover !important;
}

/* The secondary hero CTA (.btn-text-to-custom) is marked w-condition-invisible in Webflow's own
   export — meant to stay hidden via Webflow's conditional-visibility JS, which never runs here
   (self-hosted, no Webflow runtime). Hide it directly instead. */
.btn-text-to-custom.w-button {
  display: none;
}

/* Fixed hero height instead of the per-slide content-measured height our own slider script
   computes — !important wins over the inline height it sets, so this is a clean override.
   Only the real hero (---02): .slider-hero---03 is the "Boekenseries" carousel further down the
   page (fs-cmsslider-element="slider-2", populated from the series collection) — a completely
   different, taller component, so it keeps our JS's own natural content-measured height. */
.mask-slider-hero---02.w-slider-mask {
  height: 560px !important;
}

/* Dot nav bottom offset — our own slider script sets bottom:12px inline (see slide-nav-hero---02
   in the JS editor); !important here overrides just the offset, top:auto is left as-is. */
.slide-nav-hero---02.w-slider-nav {
  bottom: 50px !important;
}

/* .group-hero-slide-list is display:flex (Webflow's own base CSS). A fixed 565px container width
   here was less than left(560px) + right(image) combined, so flex-shrink proportionally squeezed
   BOTH columns down to ~329px, wrapping the heading into a narrow stack. Dropping the fixed
   container width lets it size to its flex children instead; flex-shrink:0 on the left column
   guarantees it holds its real 560px even if something later makes the row too wide for its
   parent. The right column is sized to its own content (auto) — Webflow's base min-width:560px
   on it is what was causing the squeeze in the first place, so that stays removed. */
.group-hero-slide-list-left {
  width: 560px;
  flex-shrink: 0;
}
.group-hero-slide-list-right {
  width: auto;
  min-width: 0;
}

/* .cardseriescta ("Bekijk deze serie" / "Bekijk andere series") now lives inside
   .cardseriesleft as its last child, stacked under the author card, instead of as a separate
   sibling row next to the book listing — so it reads as part of the series' own text column. */
.cardseriescta {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
}

/* ---- account trigger (login/signup popup or dashboard link), site-wide via ChromeService ---- */
.right-menu---03 {
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
}
.cover-right-menu---03 {
  text-align: center;
  background-color: #3f8f98;
  border-radius: 20px;
  width: 35px;
  min-width: 35px;
  height: 35px;
  margin-left: 0;
  padding-top: 6px;
  transition: background-color .15s ease;
}
.icon-wishlist---03 {
  width: 15px;
  max-width: none;
  /* the source SVG is a solid dark icon and this is an <img>, not inline markup, so `color`/
     `fill` can't touch it — brightness(0) flattens it to black, invert(1) flips that to white. */
  filter: brightness(0) invert(1);
}
/* logged-out vs logged-in trigger color */
.cover-right-menu---03.ob-guest { background-color: #e39e17; }
.cover-right-menu---03.ob-loggedin { background-color: #3f8f98; }

/* .right-menu---03 (this new account trigger) reused the search form's original class name,
   colliding with it — the search form's own wrapper is renamed to .right-menu---04 (was
   .right-menu---03) to free it up. Its only rule in Webflow's own CSS was this flex-layout
   nudge; re-declared here since a renamed class no longer picks it up automatically. */
.right-menu---04 {
  align-self: auto;
  margin-top: 0;
}

/* ---- login/signup popup ---- */
.ob-auth-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.ob-auth-modal.ob-open { display: flex; }
.ob-auth-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 26, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .18s ease;
}
.ob-auth-modal.ob-open .ob-auth-overlay { opacity: 1; }
.ob-auth-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 20px;
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  transform: translateY(14px) scale(.97);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.ob-auth-modal.ob-open .ob-auth-box { transform: translateY(0) scale(1); opacity: 1; }
.ob-auth-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #8a8f8c;
  cursor: pointer;
  padding: 4px;
}
.ob-auth-close:hover { color: #14181a; }
.ob-auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  border-bottom: 1px solid #e5e3dd;
}
.ob-auth-tab {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #8a8f8c;
  padding: 10px 4px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.ob-auth-tab.active { color: #3f8f98; border-bottom-color: #3f8f98; }
.ob-auth-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
}
.ob-auth-panel.active { display: flex; }
.ob-auth-panel input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid #dedcd4;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  color: #14181a;
}
.ob-auth-panel input:focus { outline: none; border-color: #3f8f98; }
.ob-auth-submit {
  margin-top: 4px;
  padding: 12px;
  border: 0;
  border-radius: 9px;
  background: #3f8f98;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease;
}
.ob-auth-submit:hover { filter: brightness(1.06); }



/* Codex fix: consistent navigation logo */
.mainnav .btn---07,
.mainnav .btn---07.w--current {
  background-image: url("https://cdn.prod.website-files.com/6278c363d3ca4e573780118a/6541f5a513408f3486344fe3_Asset%2020%40300x.png");
}


/* Codex fix: blog content layout */
.groupblogcontent {
  width: 100%;
  max-width: 100%;
  grid-column-gap: 0;
  grid-row-gap: 0;
  flex-wrap: nowrap;
  align-items: flex-start;
  display: flex;
}

.group-products-promotion {
  display: none;
}


/* Codex fix: compact cart cover */
.cart-cover {
  display: block;
  width: 40px !important;
  height: 50px !important;
  min-width: 40px;
  min-height: 50px;
  max-width: 40px;
  object-fit: cover;
  border-radius: 4px;
  background: #f4f3ef;
  flex-shrink: 0;
}

/* ---- magic-link status (check inbox / verified) ---- */
.ob-auth-spinner {
  width: 34px; height: 34px;
  margin: 4px auto 2px;
  border: 3px solid #e5e3dd;
  border-top-color: #3f8f98;
  border-radius: 50%;
  animation: ob-spin .8s linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-auth-status { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.ob-auth-status-title { font-size: 16px; font-weight: 700; color: #14181a; margin: 0; }
.ob-auth-status-sub { font-size: 13.5px; color: #6b706c; margin: 0; line-height: 1.5; }
.ob-auth-status-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ob-auth-submit-ghost { background: transparent; color: #3f8f98; border: 1.5px solid #3f8f98; }
.ob-auth-submit-ghost:hover { background: rgba(63,143,152,.08); filter: none; }

/* ---- account modal (dashboard in iframe) ---- */
.ob-account-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ob-account-modal.ob-open { display: flex; }
.ob-account-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20,24,26,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ob-account-box {
  position: relative;
  width: 99vw;
  height: 99vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ob-account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  font-weight: 700;
  color: #14181a;
  flex-shrink: 0;
}
.ob-account-close {
  border: 0;
  background: #e53935;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s ease;
}
.ob-account-close:hover { background: #c62828; color: #fff; }
.ob-account-iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}
@media (max-width: 640px) {
  .ob-account-modal { padding: 0; }
  .ob-account-box { width: 100vw; height: 100vh; border-radius: 0; }
}

/* ---- post-logout popup ---- */
.ob-logout-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10002;
  align-items: center;
  justify-content: center;
}
.ob-logout-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20,24,26,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ob-logout-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 36px 44px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.ob-logout-check { font-size: 38px; line-height: 1; color: #008F97; }
.ob-logout-title { font-size: 18px; font-weight: 700; color: #14181a; margin: 14px 0 6px; }
.ob-logout-sub { font-size: 13.5px; color: #6b706c; margin: 0; }

/* ---- account hover card: dropdown under the header account dot icon (guest gets a
      login CTA, logged-in gets the account sidebar menu) — markup is injected by the
      hover-card IIFE in custom.js; the wrapper is .ob-account-wrap around the icon ---- */
.ob-account-wrap {
  position: relative;
  display: inline-block;
}
.ob-account-card {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #ecebe6;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(20, 22, 18, .08), 0 22px 44px -20px rgba(20, 22, 18, .3);
  padding: 8px;
  z-index: 9999;
  cursor: default;
}
/* invisible bridge: keeps :hover alive while the pointer crosses the 8px gap */
.ob-account-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.ob-account-wrap:hover .ob-account-card,
.ob-account-wrap.ob-show .ob-account-card { display: block; }

/* Hard anchor (scoped + !important): the hover card must always sit top-right,
   directly below the account dot icon — immune to any global .ob-account-card
   rule (e.g. stale injected bottom-left nudge styles) repositioning or un-hiding it. */
.ob-account-wrap .ob-account-card {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  display: none !important;
}
.ob-account-wrap:hover .ob-account-card,
.ob-account-wrap.ob-show .ob-account-card { display: block !important; }
.ob-account-card a,
.ob-account-card .ob-account-logout {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: #54574f;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
}
.ob-account-card a:hover,
.ob-account-card .ob-account-logout:hover { background: #f4f3ef; color: #1c1d1f; }
.ob-account-sep { height: 1px; background: #ecebe6; margin: 6px 4px; }
.ob-account-card form { margin: 0; }
.ob-account-note {
  padding: 6px 12px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #33352f;
}
.ob-account-login-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 2px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: #3f8f98;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease;
}
.ob-account-login-btn:hover { filter: brightness(1.06); }

/* ---- account hover card: inline feather menu icons (match the account sidebar) ---- */
.ob-account-card a,
.ob-account-card .ob-account-logout { gap: 10px; }
.ob-account-card .ob-menu-icon { width: 16px; height: 16px; flex: 0 0 auto; }