/* ==========================================================
   WillyWoef stijl – rustige, warme en kindvriendelijke look
   ========================================================== */

@font-face { font-family: "Baloo 2"; src: url("fonts/baloo2.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-italic.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }

body.ww-stijl {
  --ww-navy: #1e3a5f;
  --ww-ink: #33475b;
  --ww-muted: #5f7184;
  --ww-blue: #2e7bc4;
  --ww-sky: #eaf4fc;
  --ww-cream: #fff9f1;
  --ww-sun: #ffc83d;
  --ww-sun-dark: #f5b400;
  --ww-coral: #f0645a;
  --ww-green: #2f9e6e;
  --ww-line: #ece3d6;
  --ww-radius: 18px;
  --ww-shadow: 0 6px 24px rgba(30, 58, 95, .08);
  --ww-shadow-hover: 0 12px 32px rgba(30, 58, 95, .14);
  --ww-head: "Baloo 2", "Nunito", system-ui, sans-serif;
  --ww-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* thema-kleuren overschrijven */
  --wp--preset--color--heading: var(--ww-navy);
  --wp--preset--color--body-text: var(--ww-ink);
  --wp--preset--color--primary: var(--ww-sun);
  --wp--preset--color--base: var(--ww-cream);

  background: var(--ww-cream) !important;
  color: var(--ww-ink);
  font-family: var(--ww-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.ww-stijl :where(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-site-title) {
  font-family: var(--ww-head) !important;
  color: var(--ww-navy);
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2;
}
body.ww-stijl h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; }
body.ww-stijl h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); font-weight: 700; }
body.ww-stijl h3 { font-size: 1.3rem; font-weight: 700; }

body.ww-stijl a { color: var(--ww-blue); text-underline-offset: 3px; }
body.ww-stijl a:hover { color: var(--ww-navy); }
body.ww-stijl a:focus-visible, body.ww-stijl button:focus-visible { outline: 3px solid var(--ww-sun); outline-offset: 2px; }

/* Thema-extra's die rommelig ogen */
body.ww-stijl .scroll-top, body.ww-stijl #button,
body.ww-stijl .scroll-top-button, body.ww-stijl a.scroll-to-top { display: none !important; }
body.ww-stijl .wow { visibility: visible !important; animation: none !important; }

/* ---------- Knoppen ---------- */
body.ww-stijl .wp-element-button,
body.ww-stijl .wp-block-button__link,
body.ww-stijl .wc-block-components-button:not(.is-link),
body.ww-stijl button.single_add_to_cart_button,
body.ww-stijl .woocommerce a.button, body.ww-stijl .woocommerce button.button,
body.ww-stijl .wc-block-components-checkout-place-order-button,
body.ww-stijl .wp-block-search__button {
  background: var(--ww-sun) !important;
  color: var(--ww-navy) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--ww-head) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: .7em 1.6em !important;
  box-shadow: 0 3px 0 var(--ww-sun-dark);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none !important;
}
body.ww-stijl .wp-element-button:hover,
body.ww-stijl .wp-block-button__link:hover,
body.ww-stijl .wc-block-components-button:not(.is-link):hover,
body.ww-stijl button.single_add_to_cart_button:hover {
  background: #ffd25e !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--ww-sun-dark);
}
body.ww-stijl .is-style-outline .wp-block-button__link {
  background: transparent !important;
  box-shadow: inset 0 0 0 2px var(--ww-navy) !important;
}
body.ww-stijl .is-style-outline .wp-block-button__link:hover { background: #fff !important; }

/* ---------- Header ---------- */
body.ww-stijl header.wp-block-template-part {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ww-line);
  box-shadow: 0 2px 12px rgba(30, 58, 95, .05);
}
body.admin-bar.ww-stijl header.wp-block-template-part { top: 32px; }
body.ww-stijl .ww-header { padding: 10px 20px; margin: 0 !important; }
body.ww-stijl .ww-header-inner { gap: 16px; }
body.ww-stijl .ww-brand { gap: 12px; align-items: center; }
body.ww-stijl .ww-brand .wp-block-site-logo img { width: 64px; height: auto; border-radius: 50%; }
body.ww-stijl .ww-site-title { margin: 0; font-size: 1.6rem !important; font-weight: 800 !important; line-height: 1 !important; }
body.ww-stijl .ww-site-title a { color: var(--ww-navy) !important; text-decoration: none; }
body.ww-stijl .ww-nav-wrap { gap: 8px; align-items: center; }
body.ww-stijl .ww-nav { font-family: var(--ww-head); font-size: 1.08rem; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; }
body.ww-stijl .ww-nav .wp-block-navigation-item__content { color: var(--ww-navy) !important; padding: 6px 14px; border-radius: 999px; text-decoration: none; }
body.ww-stijl .ww-nav .wp-block-navigation-item__content:hover,
body.ww-stijl .ww-nav .current-menu-item > .wp-block-navigation-item__content { background: var(--ww-sky); }
body.ww-stijl .ww-nav-wrap .wc-block-mini-cart__button,
body.ww-stijl .ww-nav-wrap .wc-block-customer-account a { color: var(--ww-navy); padding: 8px; border-radius: 999px; }
body.ww-stijl .ww-nav-wrap .wc-block-mini-cart__button:hover,
body.ww-stijl .ww-nav-wrap .wc-block-customer-account a:hover { background: var(--ww-sky); }
body.ww-stijl .wc-block-mini-cart__badge { background: var(--ww-coral) !important; color: #fff !important; border: 0 !important; }
body.ww-stijl .wp-block-navigation__responsive-container.is-menu-open { background: #fff !important; padding: 24px; }
body.ww-stijl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.4rem; }

@media (max-width: 600px) {
  body.ww-stijl .ww-brand .wp-block-site-logo img { width: 48px; }
  body.ww-stijl .ww-site-title { font-size: 1.25rem !important; }
  body.ww-stijl .ww-header { padding: 8px 14px; }
}

/* ---------- Paginakop (blauwe balk) op binnenpagina's ---------- */
body.ww-stijl .wp-block-cover.inner-cover-img {
  min-height: 0 !important;
  padding: 40px 20px 24px !important;
  background: var(--ww-cream) !important;
}
body.ww-stijl .wp-block-cover.inner-cover-img > img,
body.ww-stijl .wp-block-cover.inner-cover-img > .wp-block-cover__background { display: none !important; }
body.ww-stijl .wp-block-cover.inner-cover-img .wp-block-cover__inner-container { max-width: 1200px; margin: 0 auto; width: 100%; }
body.ww-stijl .wp-block-cover.inner-cover-img :is(h1, h2, .wp-block-post-title, .wp-block-query-title) {
  color: var(--ww-navy) !important;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0;
}
/* Op de productpagina staat de titel al naast de foto: dubbele kop weg */
body.ww-stijl.single-product .wp-block-cover.inner-cover-img { display: none !important; }

body.ww-stijl main.wp-block-group { margin-top: 0 !important; }
body.ww-stijl .woocommerce-breadcrumb, body.ww-stijl .wc-block-breadcrumbs { font-size: .92rem; color: var(--ww-muted); margin-bottom: 18px; }

/* ---------- Voorpagina ---------- */
body.ww-stijl .ww-main { margin: 0 !important; }
body.ww-stijl .ww-hero {
  padding: clamp(40px, 6vw, 88px) 20px clamp(32px, 5vw, 72px);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 200, 61, .35) 0 90px, transparent 91px),
    radial-gradient(circle at 6% 88%, rgba(46, 123, 196, .12) 0 120px, transparent 121px),
    linear-gradient(180deg, var(--ww-sky) 0%, var(--ww-cream) 100%);
  margin: 0 !important;
  overflow: hidden;
}
body.ww-stijl .ww-hero-cols { gap: 48px; }
body.ww-stijl .ww-eyebrow {
  display: inline-block; margin: 0 0 10px; padding: 4px 14px; border-radius: 999px;
  background: #fff; color: var(--ww-coral); font-weight: 800; font-size: .9rem; box-shadow: var(--ww-shadow);
}
body.ww-stijl .ww-hero-title { margin: 0 0 16px; font-size: clamp(2.3rem, 1.6rem + 3vw, 3.6rem) !important; line-height: 1.05; }
body.ww-stijl .ww-lead { font-size: 1.15rem; color: var(--ww-ink); max-width: 36em; margin-bottom: 26px; }
body.ww-stijl .ww-hero .wp-block-buttons { gap: 12px; }
body.ww-stijl .ww-hero-art { position: relative; min-height: 360px; }
body.ww-stijl .ww-hero-book { position: absolute; margin: 0 !important; width: 62%; }
body.ww-stijl .ww-hero-book img { border-radius: 16px; box-shadow: 0 18px 40px rgba(30, 58, 95, .22); display: block; width: 100%; height: auto; }
body.ww-stijl .ww-hero-book-1 { right: 0; top: 0; transform: rotate(4deg); z-index: 2; }
body.ww-stijl .ww-hero-book-2 { left: 0; top: 70px; transform: rotate(-6deg); z-index: 1; }

body.ww-stijl .ww-usps { padding: 0 20px; margin: 0 !important; }
body.ww-stijl .ww-usp-list {
  list-style: none; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px 28px;
  background: #fff; border-radius: var(--ww-radius); box-shadow: var(--ww-shadow); font-weight: 700; color: var(--ww-navy);
}
body.ww-stijl .ww-usp-list li { padding-left: 30px; position: relative; }
body.ww-stijl .ww-usp-list li::before {
  content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--ww-green); color: #fff; font-size: .8rem; display: grid; place-items: center;
}

body.ww-stijl .ww-products { padding: clamp(48px, 6vw, 80px) 20px 24px; margin: 0 !important; }
body.ww-stijl .ww-section-title { margin: 0 0 32px; }
body.ww-stijl .ww-about { padding: 40px 20px 80px; margin: 0 !important; text-align: center; color: var(--ww-ink); }
body.ww-stijl .ww-about p { font-size: 1.05rem; }

@media (max-width: 781px) {
  body.ww-stijl .ww-hero-art { min-height: 300px; order: -1; max-width: 420px; margin: 0 auto; width: 100%; }
  body.ww-stijl .ww-hero-title { text-align: left; }
  body.ww-stijl .ww-usp-list { flex-direction: column; align-items: flex-start; }
}

/* ---------- Productkaarten (voorpagina, winkel, gerelateerd) ---------- */
body.ww-stijl :is(.wc-block-product-template, .products-block-post-template, .wp-block-post-template) { gap: 24px !important; }
body.ww-stijl :is(.wc-block-product-template, .products-block-post-template, .wp-block-post-template) > li {
  background: #fff;
  border-radius: var(--ww-radius);
  box-shadow: var(--ww-shadow);
  padding: 14px 14px 20px;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
body.ww-stijl :is(.wc-block-product-template, .products-block-post-template, .wp-block-post-template) > li:hover { transform: translateY(-4px); box-shadow: var(--ww-shadow-hover); }
body.ww-stijl :is(.wc-block-product-template, .products-block-post-template, .wp-block-post-template) > li img { border-radius: 12px; aspect-ratio: 1 / 1; object-fit: cover; }
body.ww-stijl :is(.wc-block-product-template, .products-block-post-template, .wp-block-post-template) .wp-block-post-title { font-size: 1.2rem !important; margin: 14px 0 4px !important; }
body.ww-stijl :is(.wc-block-product-template, .products-block-post-template, .wp-block-post-template) .wp-block-post-title a { color: var(--ww-navy); text-decoration: none; }
body.ww-stijl :is(.wc-block-product-template, .products-block-post-template, .wp-block-post-template) .wc-block-components-product-price,
body.ww-stijl .wp-block-woocommerce-product-price { color: var(--ww-coral); font-weight: 800; font-size: 1.15rem !important; }
body.ww-stijl :is(.wc-block-product-template, .products-block-post-template, .wp-block-post-template) .wp-block-woocommerce-product-button { margin-top: auto; padding-top: 10px; }
body.ww-stijl .wc-block-components-product-sale-badge { background: var(--ww-coral); color: #fff; border: 0; border-radius: 999px; }

/* ---------- Productpagina ---------- */
body.ww-stijl.single-product main.wp-block-group { max-width: 1200px; margin: 0 auto !important; padding: 28px 20px 60px !important; }
body.ww-stijl.single-product main > * { max-width: none !important; }
body.ww-stijl.single-product main > .wp-block-columns > .wp-block-column:first-child { flex-basis: 46% !important; }
body.ww-stijl.single-product main > .wp-block-columns {
  background: #fff; border-radius: 24px; box-shadow: var(--ww-shadow); padding: clamp(18px, 3vw, 40px); gap: clamp(20px, 4vw, 56px);
}
body.ww-stijl.single-product .woocommerce-product-gallery img { border-radius: 16px; }
body.ww-stijl.single-product main .wp-block-post-title { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem) !important; margin-bottom: 8px; }
body.ww-stijl.single-product .wp-block-woocommerce-product-price { font-size: 1.8rem !important; margin: 6px 0 14px; }
body.ww-stijl.single-product .wp-block-post-excerpt { font-size: 1.1rem; color: var(--ww-ink); }
body.ww-stijl.single-product form.cart { display: flex; gap: 12px; align-items: center; margin: 22px 0; flex-wrap: wrap; }
body.ww-stijl.single-product form.cart .quantity input {
  width: 72px; height: 48px; border: 2px solid var(--ww-line); border-radius: 12px; text-align: center; font-size: 1.05rem; background: var(--ww-cream);
}
body.ww-stijl.single-product .wp-block-woocommerce-product-meta { font-size: .9rem; color: var(--ww-muted); border-top: 1px solid var(--ww-line); padding-top: 14px; }
body.ww-stijl .woocommerce-tabs { margin-top: 40px; }
body.ww-stijl .woocommerce-tabs ul.tabs { border: 0 !important; padding: 0 !important; display: flex; gap: 8px; }
body.ww-stijl .woocommerce-tabs ul.tabs::before, body.ww-stijl .woocommerce-tabs ul.tabs li::before, body.ww-stijl .woocommerce-tabs ul.tabs li::after { display: none !important; }
body.ww-stijl .woocommerce-tabs ul.tabs li { border: 0 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; }
body.ww-stijl .woocommerce-tabs ul.tabs li a { display: block; padding: 8px 18px !important; border-radius: 999px; font-family: var(--ww-head); font-weight: 700; color: var(--ww-navy) !important; text-decoration: none; }
body.ww-stijl .woocommerce-tabs ul.tabs li.active a { background: var(--ww-navy); color: #fff !important; }
body.ww-stijl .woocommerce-tabs .panel {
  background: #fff !important; border: 0 !important; border-radius: 24px; box-shadow: var(--ww-shadow);
  padding: clamp(20px, 4vw, 48px) !important; margin-top: 12px !important; max-width: none;
}
body.ww-stijl .woocommerce-tabs .panel > h2:first-child { display: none; }
body.ww-stijl .woocommerce-tabs .panel :is(p, li) { max-width: 46em; font-size: 1.05rem; }
body.ww-stijl .woocommerce-tabs .panel h1 { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); }
body.ww-stijl .woocommerce-tabs .panel :is(h2, h3, h4, strong) { color: var(--ww-navy); }
body.ww-stijl .wp-block-woocommerce-related-products { margin-top: 56px; }

/* ---------- Winkelwagen & afrekenen ---------- */
body.ww-stijl :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) { max-width: 1200px; margin: 0 auto; }
body.ww-stijl .wc-block-checkout__form,
body.ww-stijl .wc-block-cart-items,
body.ww-stijl .wp-block-woocommerce-checkout-order-summary-block,
body.ww-stijl .wp-block-woocommerce-cart-order-summary-block {
  background: #fff; border-radius: 24px; box-shadow: var(--ww-shadow); border: 0 !important;
}
body.ww-stijl .wc-block-checkout__form { padding: clamp(18px, 3vw, 36px) !important; }
body.ww-stijl .wp-block-woocommerce-checkout-order-summary-block,
body.ww-stijl .wp-block-woocommerce-cart-order-summary-block { padding: 12px 8px !important; }
body.ww-stijl .wc-block-cart-items { padding: 12px 20px; border-collapse: separate; }
body.ww-stijl .wc-block-components-sidebar .wc-block-components-panel,
body.ww-stijl .wc-block-components-sidebar .wc-block-components-totals-wrapper { border-color: var(--ww-line) !important; }
body.ww-stijl .wp-block-woocommerce-checkout-order-summary-block,
body.ww-stijl .wc-block-components-sidebar .wc-block-components-totals-wrapper { border: 0 !important; }
body.ww-stijl .wc-block-components-title,
body.ww-stijl .wc-block-components-checkout-step__title,
body.ww-stijl .wc-block-components-checkout-order-summary__title-text { font-family: var(--ww-head) !important; color: var(--ww-navy) !important; font-weight: 700 !important; font-size: 1.3rem !important; }
body.ww-stijl :is(.wc-block-components-text-input input, .wc-block-components-combobox-control input, .wc-blocks-components-select__select, .wc-block-components-textarea, .wc-block-components-address-form input) {
  border: 2px solid var(--ww-line) !important; border-radius: 12px !important; background: var(--ww-cream) !important; box-shadow: none !important;
}
body.ww-stijl :is(.wc-block-components-text-input input, .wc-blocks-components-select__select):focus { border-color: var(--ww-blue) !important; background: #fff !important; }
body.ww-stijl .wc-block-components-radio-control-accordion-option,
body.ww-stijl .wc-block-components-radio-control__option { border-radius: 12px; }
body.ww-stijl .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.ww-stijl .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted { box-shadow: inset 0 0 0 2px var(--ww-blue) !important; }
body.ww-stijl .wc-block-components-totals-footer-item { font-family: var(--ww-head); color: var(--ww-navy); font-size: 1.25rem; }
body.ww-stijl .wc-block-components-checkout-place-order-button { width: 100%; font-size: 1.2rem !important; padding: .9em 1.6em !important; }
body.ww-stijl .wc-block-components-order-summary-item__quantity { background: var(--ww-navy) !important; color: #fff !important; border: 0 !important; }
body.ww-stijl .wc-block-components-product-metadata__description { display: none; }

/* ---------- Gewone pagina's (voorwaarden, account) ---------- */
body.ww-stijl:not(.home):not(.single-product):not(.woocommerce-checkout):not(.woocommerce-cart) main .entry-content,
body.ww-stijl .woocommerce-MyAccount-content { font-size: 1.05rem; }
body.ww-stijl .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
body.ww-stijl .woocommerce-MyAccount-navigation li a { display: block; padding: 8px 14px; border-radius: 10px; text-decoration: none; color: var(--ww-navy); font-weight: 700; }
body.ww-stijl .woocommerce-MyAccount-navigation li.is-active a { background: var(--ww-sky); }

/* ---------- Footer ---------- */
body.ww-stijl footer.wp-block-template-part { background: var(--ww-navy); color: #dbe6f2; margin-top: 0; }
body.ww-stijl .ww-footer { padding: 56px 20px 24px; margin: 0 !important; position: relative; }
body.ww-stijl .ww-footer :is(h2, h3) { color: #fff !important; font-size: 1.2rem; margin: 0 0 14px; }
body.ww-stijl .ww-footer a { color: #fff; text-decoration: none; }
body.ww-stijl .ww-footer a:hover { color: var(--ww-sun); text-decoration: underline; }
body.ww-stijl .ww-footer .ww-site-title a { color: #fff !important; }
body.ww-stijl .ww-footer .ww-brand { margin-bottom: 12px; }
body.ww-stijl .ww-footer .ww-brand .wp-block-site-logo img { width: 56px; background: #fff; }
body.ww-stijl .ww-footer-links { list-style: none; padding: 0; margin: 0; line-height: 2.1; }
body.ww-stijl .ww-footer .ww-pay { margin-top: 14px; display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .92rem; }
body.ww-stijl .ww-copy { border-top: 1px solid rgba(255,255,255,.15); margin-top: 36px !important; padding-top: 18px; text-align: center; font-size: .9rem; color: #a9bbd0; }

@media (max-width: 600px) {
  body.ww-stijl :is(.wc-block-product-template, .wp-block-post-template) > li { padding: 10px 10px 14px; }
  body.ww-stijl :is(.wc-block-product-template, .wp-block-post-template) .wp-block-post-title { font-size: 1.02rem !important; }
  body.ww-stijl :is(.wc-block-product-template, .wp-block-post-template) .wp-block-button__link,
  body.ww-stijl :is(.wc-block-product-template, .wp-block-post-template) .wc-block-components-product-button__button {
    font-size: .9rem !important; padding: .55em 1em !important; white-space: nowrap;
  }
}