/*
Theme Name: POWpanel Child
Theme URI: https://powpanel.be
Description: Child theme voor POW!Panel — comic display & protectie.
Author: Olivier
Template: kadence
Version: 1.9.3
Text Domain: powpanel-child
*/

/* ── Brand palette ── */
:root {
  --pow-red: #e63946;
  --pow-blue: #1d3557;
  --pow-accent-light: #eef2f6;
  --pow-ink: #1a1a1a;
  --pow-paper: #f2f1ed;
  --pow-cream: #f7f3f0;
  --pow-white: #ffffff;
  --pow-font-comic: "Acme", sans-serif;
  --pow-halftone: radial-gradient(circle, rgba(26, 26, 26, 0.14) 1px, transparent 1px);
  --pow-halftone-size: 11px 11px;
  --pow-halftone-light: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1px);

  --global-palette1: #e63946;
  --global-palette2: #1d3557;
  --global-palette3: #1a1a1a;
  --global-palette4: #333333;
  --global-palette5: #1a1a1a;
  --global-palette6: #5c6b7a;
  --global-palette7: #1d3557;
  --global-palette8: #f2f1ed;
  --global-palette9: #ffffff;
  --global-palette-highlight: #e63946;
  --global-palette-highlight-alt: #1d3557;
  --global-palette-btn-bg: #e63946;
  --global-palette-btn-bg-hover: #1d3557;
  --global-palette-btn: #ffffff;
}

/* ── Basis ── */
body,
body.content-style-unboxed .site,
.content-bg,
body.content-style-boxed .content-bg,
.site-main {
  background-color: var(--pow-paper) !important;
  color: var(--pow-ink) !important;
}

body, p, li, .entry-content {
  font-family: "Inter", sans-serif;
  color: var(--pow-ink);
}

/* Homepage: geen paginatitel, full-bleed hero */
.home .entry-hero.page-hero-section,
.home .entry-header {
  display: none !important;
}

.home .content-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Alleen pagina-content; niet productkaarten (.product-details) */
.home .entry-content-wrap:not(.product-details) {
  padding: 0 !important;
  max-width: none !important;
}

.home .entry-content {
  max-width: none !important;
}

/* Homepage: geen opaque kaders — wolken schijnen door */
.home .content-container.site-container,
.home #primary.content-area,
.home .site-main,
.home article.entry.content-bg.single-entry {
  background: transparent !important;
  box-shadow: none !important;
}

.home .entry-content-wrap:not(.product-details) {
  background: transparent !important;
}

/* ── Header (comic store) ── */
#masthead,
#masthead .site-main-header-wrap .site-header-row-container-inner,
.transparent-header #masthead,
.transparent-header .site-main-header-wrap .site-header-row-container-inner,
.mobile-transparent-header #masthead,
.mobile-transparent-header .site-main-header-wrap .site-header-row-container-inner {
  background: var(--pow-paper) !important;
}

/* Homepage: header transparant zodat wolken erachter zichtbaar zijn */
.home #masthead,
.home #masthead .site-main-header-wrap .site-header-row-container-inner,
.home #masthead .site-top-header-wrap .site-header-row-container-inner,
.home #masthead .site-bottom-header-wrap .site-header-row-container-inner {
  background: transparent !important;
}

.home #masthead {
  position: relative;
  z-index: 5;
}

/* Bij scrollen: header weer solid */
.home #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header-row-container-inner {
  background: var(--pow-paper) !important;
}

#masthead .site-main-header-wrap .site-header-row-container-inner {
  border-bottom: none;
  box-shadow: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.site-branding .site-title-wrap,
.site-branding .site-description {
  display: none !important;
}

.site-branding a.brand img {
  max-width: 160px !important;
}

/* Nav: strak sans-serif zoals referentie */
.main-navigation .primary-menu-container > ul > li.menu-item > a,
.header-navigation .header-menu-container > ul > li.menu-item > a {
  color: var(--pow-ink) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: none;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.header-navigation .header-menu-container > ul > li.menu-item > a:hover {
  color: var(--pow-red) !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
.header-navigation .header-menu-container > ul > li.menu-item.current-menu-item > a {
  color: var(--pow-red) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Header Shop-knop */
.header-button-wrap .button,
.header-button-wrap a.button {
  background: var(--pow-red) !important;
  color: #fff !important;
  border: 2px solid var(--pow-ink) !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 var(--pow-ink) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 0.55em 1.4em !important;
}

.header-button-wrap .button:hover {
  background: var(--pow-blue) !important;
  color: #fff !important;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--pow-ink) !important;
}

.header-cart-wrap .header-cart-button,
.header-cart-wrap .header-cart-total {
  color: var(--pow-ink) !important;
}

.mobile-toggle-open-container .menu-toggle-open {
  color: var(--pow-ink) !important;
  border: 2px solid var(--pow-ink) !important;
  border-radius: 8px;
}

/* Taalknop — EU-vlag + dropdown */
.pow-lang-switcher-wrap {
  list-style: none !important;
  margin-left: 0.5rem !important;
}

.pow-lang-dropdown {
  position: relative;
}

.pow-lang-details {
  position: relative;
}

.pow-lang-details > summary {
  list-style: none;
}

.pow-lang-details > summary::-webkit-details-marker {
  display: none;
}

.pow-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4em 0.65em !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--pow-ink) !important;
  border: 2px solid var(--pow-ink) !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}

.pow-lang-toggle:hover {
  background: var(--pow-accent-light) !important;
}

.pow-eu-flag {
  display: inline-flex;
  line-height: 0;
}

.pow-eu-flag-svg {
  width: 22px;
  height: auto;
  border-radius: 2px;
  display: block;
}

.pow-lang-code {
  letter-spacing: 0.04em;
  min-width: 1.4em;
  text-align: center;
}

.pow-lang-chevron {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--pow-ink);
  margin-left: 0.1rem;
  transition: transform 0.15s ease;
}

.pow-lang-details[open] .pow-lang-chevron {
  transform: rotate(180deg);
}

.pow-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  min-width: 4.5rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border: 2px solid var(--pow-ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(26, 26, 26, 0.12);
}

.pow-lang-menu li {
  margin: 0;
  list-style: none;
}

.pow-lang-menu a {
  display: block;
  padding: 0.45em 0.85em !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--pow-ink) !important;
  text-decoration: none !important;
  letter-spacing: 0.04em;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.pow-lang-menu a:hover {
  background: var(--pow-accent-light) !important;
  color: var(--pow-red) !important;
}

.pow-lang-menu .current-lang a {
  background: var(--pow-red) !important;
  color: #fff !important;
}

/* ── Koppen ── */
h1, h2, .pow-hero-title {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  color: var(--pow-ink) !important;
  letter-spacing: -0.02em;
}

/* Acme — comic accent op selecte titeltjes */
.pow-section-title,
.pow-cta h2,
.pow-hero-sub,
.entry-hero .entry-title,
.page:not(.home) .entry-content > h2.wp-block-heading,
.page:not(.home) .entry-content > h3.wp-block-heading {
  font-family: var(--pow-font-comic) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

.kb-adv-heading {
  font-family: "Bangers", cursive !important;
}

/* ── Homepage wolken (header + hero + feature cards) ── */
body.home #wrapper {
  position: relative;
}

body.home #wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(560px, 82vh, 920px);
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: var(--pow-clouds-bg);
  background-size: 100% auto;
  background-position: center bottom;
  mix-blend-mode: multiply;
  opacity: 0.58;
}

body.home #inner-wrap {
  position: relative;
  z-index: 1;
}

/* ── Comic hero (homepage) ── */
.entry-content .pow-hero-comic {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.pow-hero-comic,
.pow-hero-comic > .wp-block-group__inner-container,
.pow-hero-columns,
.pow-hero-columns > .wp-block-column {
  background: transparent !important;
}

.pow-hero-comic {
  padding: 3rem 1.5rem clamp(10rem, 18vw, 16rem);
  position: relative;
  overflow: visible;
  width: 100%;
}

.pow-hero-comic > .wp-block-group__inner-container {
  overflow: visible;
  max-width: none !important;
  width: 100%;
}

.pow-hero-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  max-width: 1140px;
  margin: 0 auto;
  align-items: center !important;
  gap: 2rem !important;
  position: relative;
  z-index: 2;
}

.pow-hero-columns > .wp-block-column {
  flex-grow: 0;
  min-width: 0;
}

.pow-hero-visual-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pow-hero-kicker {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pow-ink);
  margin-bottom: 0.25rem !important;
}

.pow-hero-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  line-height: 1.05 !important;
  margin: 0 0 0.75rem !important;
}

.pow-hero-sub {
  font-size: clamp(1.35rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-bottom: 1rem !important;
}

.pow-hero-sub strong {
  color: var(--pow-red);
}

.pow-hero-desc {
  font-size: 1.05rem;
  color: #555;
  max-width: 520px;
  margin-bottom: 1.5rem !important;
}

.pow-hero-buttons {
  gap: 0.75rem;
}

/* Primaire knop (rood) */
.pow-btn-primary .wp-block-button__link,
.pow-btn-yellow .wp-block-button__link {
  background: var(--pow-red) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.75em 1.75em !important;
}

.pow-btn-primary .wp-block-button__link:hover,
.pow-btn-yellow .wp-block-button__link:hover {
  background: var(--pow-blue) !important;
  color: #fff !important;
}

/* Secundaire knop (blauw outline) */
.pow-btn-secondary .wp-block-button__link,
.pow-btn-red .wp-block-button__link {
  background: var(--pow-blue) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.75em 1.75em !important;
}

.pow-btn-secondary .wp-block-button__link:hover,
.pow-btn-red .wp-block-button__link:hover {
  background: var(--pow-red) !important;
  color: #fff !important;
}

.pow-hero-visual svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(8px 8px 0 rgba(26, 26, 26, 0.15));
}

.pow-hero-visual {
  margin: 0;
  width: 100%;
  max-width: min(460px, 100%);
}

.pow-hero-visual .pow-hero-visual-img,
.pow-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* Oude aparte wolken-strip — vervangen door ::after achtergrond */
.pow-hero-clouds {
  display: none !important;
}

/* Service cards overlappen de wolken */
.pow-service-row {
  background: transparent !important;
  padding: 0 1.5rem 3rem;
  margin-top: clamp(-6rem, -10vw, -9rem);
  position: relative;
  z-index: 3;
}

.pow-service-cards {
  max-width: 1140px;
  margin: 0 auto;
  gap: 1rem !important;
}

.pow-service-card {
  background: #fff !important;
  border: 3px solid var(--pow-ink) !important;
  box-shadow: 5px 5px 0 var(--pow-ink) !important;
  border-radius: 8px !important;
  padding: 1rem 1.1rem !important;
  height: 100%;
}

.pow-service-card p {
  margin: 0 !important;
  font-size: 0.85rem;
  line-height: 1.45;
}

.pow-service-card strong {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.pow-service-icon {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

/* ── Comic panels: Hoe werkt het (homepage + detailpagina) ── */
.entry-content .pow-comic-steps {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.pow-comic-steps {
  position: relative;
  background: var(--pow-paper);
  padding: clamp(3rem, 6vw, 4.5rem) 1.5rem 2.5rem;
  text-align: center;
}

.pow-comic-steps .pow-section-title {
  margin-bottom: 1.75rem !important;
}

.pow-comic-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto 1.75rem;
  padding: 10px;
  background: #fff;
  border: 4px solid var(--pow-ink);
  box-shadow: 8px 8px 0 var(--pow-ink);
}

.pow-comic-panel {
  position: relative;
  min-height: 240px;
  padding: 1.75rem 1.35rem 1.5rem;
  border: 3px solid var(--pow-ink);
  text-align: left;
  color: var(--pow-ink);
  overflow: hidden;
}

.pow-comic-panel-1 {
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
  background-color: #ffcc48;
  background-image:
    var(--pow-halftone),
    repeating-conic-gradient(
      from -15deg at 30% 40%,
      rgba(255, 255, 255, 0.55) 0deg 10deg,
      rgba(230, 57, 70, 0.22) 10deg 20deg
    );
}

.pow-comic-panel-2 {
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  margin-top: 0.35rem;
  background-color: #7dd3fc;
  background-image:
    var(--pow-halftone),
    radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.65) 0%, transparent 42%),
    repeating-conic-gradient(
      from 20deg at 50% 60%,
      rgba(255, 255, 255, 0.35) 0deg 12deg,
      rgba(29, 53, 87, 0.12) 12deg 24deg
    );
}

.pow-comic-panel-3 {
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
  background-color: #86efac;
  background-image:
    var(--pow-halftone),
    repeating-conic-gradient(
      from 5deg at 65% 45%,
      rgba(255, 255, 255, 0.5) 0deg 9deg,
      rgba(29, 53, 87, 0.14) 9deg 18deg
    );
}

.pow-comic-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.65rem;
  font-family: "Bangers", cursive;
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  background: var(--pow-red);
  border: 3px solid var(--pow-ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--pow-ink);
}

.pow-comic-panel-title {
  font-family: var(--pow-font-comic) !important;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  margin: 0 0 0.65rem !important;
  color: var(--pow-ink) !important;
  letter-spacing: 0.02em;
}

.pow-comic-panel p {
  margin: 0 !important;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(26, 26, 26, 0.88);
}

/* ── Contact form ── */
.pow-contact-form-wrap {
  max-width: 36rem;
}

.pow-contact-notice {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 3px solid var(--pow-ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

.pow-contact-notice--success {
  background: #e8f8ee;
  box-shadow: 4px 4px 0 var(--pow-ink);
}

.pow-contact-notice--error {
  background: #fff0f0;
  box-shadow: 4px 4px 0 var(--pow-red);
}

.pow-contact-form .pow-contact-field {
  margin: 0 0 1.1rem;
}

.pow-contact-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.pow-contact-form .required {
  color: var(--pow-red);
}

.pow-contact-form input[type="text"],
.pow-contact-form input[type="email"],
.pow-contact-form select,
.pow-contact-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: var(--pow-ink);
  background: #fff;
  border: 2px solid var(--pow-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--pow-ink);
}

.pow-contact-form textarea {
  resize: vertical;
  min-height: 8rem;
}

.pow-contact-form input:focus,
.pow-contact-form select:focus,
.pow-contact-form textarea:focus {
  outline: 2px solid var(--pow-blue);
  outline-offset: 2px;
}

.pow-contact-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: rgba(26, 26, 26, 0.65);
}

.pow-contact-hp {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.pow-contact-submit {
  display: inline-block;
  padding: 0.75em 1.75em;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--pow-red);
  border: 3px solid var(--pow-ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--pow-ink);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.pow-contact-submit:hover {
  background: var(--pow-blue);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--pow-ink);
}

.pow-contact-privacy {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: rgba(26, 26, 26, 0.65);
}

.pow-contact-info p {
  margin-bottom: 0.85rem;
}

.pow-contact-info p:last-child {
  margin-bottom: 0;
}

/* ── About page ── */
.entry-content .pow-about-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.65;
  max-width: 52rem;
  margin-bottom: 1.5rem;
}

.entry-content .pow-about-callout {
  margin: 2rem 0 2.25rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
  background: #fff;
  border: 3px solid var(--pow-ink);
  box-shadow: 6px 6px 0 var(--pow-ink);
}

.entry-content .pow-about-callout p {
  margin: 0 !important;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.55;
}

.entry-content .pow-about-callout strong {
  font-family: var(--pow-font-comic);
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0.02em;
}

/* ── Kadence Row Layout (how-it-works + about) ── */
.entry-content .kb-row-layout-wrap.pow-how-kb-step,
.entry-content .kb-row-layout-wrap.pow-about-kb-row,
.entry-content .kb-row-layout-wrap.pow-contact-kb-row {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.entry-content .kb-row-layout-wrap.pow-how-kb-step > .kt-row-column-wrap,
.entry-content .kb-row-layout-wrap.pow-about-kb-row > .kt-row-column-wrap,
.entry-content .kb-row-layout-wrap.pow-contact-kb-row > .kt-row-column-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.entry-content .kb-row-layout-wrap.pow-contact-kb-row > .kt-row-column-wrap {
  align-items: start;
}

@media (max-width: 767px) {
  .entry-content .kb-row-layout-wrap.pow-how-kb-step > .kt-row-column-wrap,
  .entry-content .kb-row-layout-wrap.pow-about-kb-row > .kt-row-column-wrap,
  .entry-content .kb-row-layout-wrap.pow-contact-kb-row > .kt-row-column-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.entry-content .pow-how-kb-step .kt-inside-inner-col .pow-how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  font-family: "Bangers", cursive;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  background: var(--pow-red);
  border: 3px solid var(--pow-ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--pow-ink);
}

.entry-content .pow-how-kb-step .pow-how-step-title {
  font-family: var(--pow-font-comic) !important;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  margin: 0 0 1rem !important;
  color: var(--pow-ink) !important;
}

.entry-content .pow-how-kb-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 3px solid var(--pow-ink);
  box-shadow: 8px 8px 0 var(--pow-ink);
  background: #fff;
}

/* Legacy HTML layout (vóór Kadence-migratie) */
.pow-how-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: 1140px;
  margin: 0 auto 3rem;
  padding: 0.5rem 0 1rem;
}

.pow-how-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.pow-how-step--photo-right .pow-how-step-copy {
  order: 1;
}

.pow-how-step--photo-right .pow-how-step-photo {
  order: 2;
}

.pow-how-step--photo-left .pow-how-step-photo {
  order: 1;
}

.pow-how-step--photo-left .pow-how-step-copy {
  order: 2;
}

.pow-how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  font-family: "Bangers", cursive;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  background: var(--pow-red);
  border: 3px solid var(--pow-ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--pow-ink);
}

.pow-how-step-title {
  font-family: var(--pow-font-comic) !important;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  margin: 0 0 1rem !important;
  color: var(--pow-ink) !important;
}

.pow-how-step-copy p {
  margin: 0 0 1rem !important;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(26, 26, 26, 0.9);
}

.pow-how-step-copy p:last-child {
  margin-bottom: 0 !important;
}

.pow-how-step-photo {
  margin: 0;
}

.pow-how-step-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 3px solid var(--pow-ink);
  box-shadow: 8px 8px 0 var(--pow-ink);
  background: #fff;
}

/* ── Featured products (homepage) ── */
.home .entry-content .pow-featured-books {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.pow-featured-books {
  position: relative;
  background-color: var(--pow-cream);
  background-image: var(--pow-halftone);
  background-size: var(--pow-halftone-size);
  padding: 3.5rem 1.5rem 4rem;
  text-align: center;
  overflow: hidden;
}

.pow-featured-books > .wp-block-group__inner-container {
  position: relative;
  z-index: 1;
}

.pow-eyebrow {
  color: var(--pow-red) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.35rem !important;
}

.pow-section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  margin-bottom: 2rem !important;
}

.pow-featured-books .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

/* Zelfde Kadence-grid en productkaarten als op de shop-pagina */
.pow-featured-books .woocommerce ul.products {
  margin-bottom: 0 !important;
}

/* Zelfde hover-knop als shop: verborgen tot hover, onder de prijs */
.pow-featured-books .woocommerce ul.products.woo-archive-action-on-hover li.product {
  position: relative;
}

.pow-featured-books .woocommerce ul.products li.product .product-excerpt {
  display: none !important;
}

.pow-featured-books .woocommerce ul.products li.product .product-details.entry-content-wrap {
  padding: 1rem 1rem 1.5rem;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.17, 0.67, 0.35, 0.95);
}

.pow-featured-books .woocommerce ul.products .product-action-wrap .button {
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}

.pow-featured-books .woocommerce ul.products .product-action-wrap .button:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Verberg sorteer/result-count in featured sectie */
.pow-featured-books .woocommerce-result-count,
.pow-featured-books .woocommerce-ordering,
.pow-featured-books .kadence-shop-top-row {
  display: none !important;
}

/* ── Knoppen algemeen ── */
.wp-block-button__link,
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--pow-red) !important;
  color: #fff !important;
  box-shadow: 4px 4px 0 var(--pow-ink) !important;
  border: 2px solid var(--pow-ink) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.wp-block-button__link:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--pow-blue) !important;
  color: #fff !important;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--pow-ink) !important;
}

/* ── CTA band ── */
.home .entry-content .pow-cta {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.pow-cta {
  position: relative;
  background: linear-gradient(135deg, var(--pow-red), var(--pow-blue));
  color: #fff;
  padding: clamp(4rem, 8vw, 5rem) 2rem 3.5rem;
  overflow: hidden;
}

/* Schuine overgang producten → CTA */
.pow-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 120vw;
  height: clamp(40px, 5vw, 64px);
  transform: translateX(-50%) translateY(-50%) skewY(2deg);
  background: var(--pow-cream);
  background-image: var(--pow-halftone);
  background-size: var(--pow-halftone-size);
  border-bottom: 3px solid var(--pow-ink);
  z-index: 1;
  pointer-events: none;
}

/* Halftone op CTA */
.pow-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pow-halftone-light);
  background-size: 14px 14px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.pow-cta > .wp-block-group__inner-container {
  position: relative;
  z-index: 2;
}

.pow-cta h2 {
  color: #fff !important;
}

.pow-cta p {
  color: rgba(255, 255, 255, 0.9);
}

/* ── Shop pagina ── */
.woocommerce-page .content-area {
  background: var(--pow-paper) !important;
}

.entry-hero.product-archive-hero-section,
.entry-hero.product-archive-hero-section .entry-hero-container-inner {
  background: linear-gradient(135deg, var(--pow-red) 0%, var(--pow-blue) 100%) !important;
  background-image: none !important;
}

.entry-hero .entry-title {
  color: #fff !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
}

.pow-shop-notice {
  background: #fff;
  border: 3px solid var(--pow-ink);
  box-shadow: 4px 4px 0 var(--pow-blue);
  color: var(--pow-ink);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  border-radius: 8px;
}

.pow-shop-notice strong {
  color: var(--pow-red);
}

.woocommerce ul.products li.product {
  background: #fff !important;
  border: 2px solid var(--pow-ink) !important;
  box-shadow: 4px 4px 0 var(--pow-ink) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.woocommerce-loop-product__title a {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  color: var(--pow-ink) !important;
}

/* ── FAQ ── */
.pow-faq dt {
  font-weight: 700;
  margin-top: 1.25rem;
  color: var(--pow-blue);
}

.pow-faq dd {
  margin-left: 0;
}

/* ── Homepage page footer + legal block ── */
.entry-content .pow-site-footer {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem) !important;
  background: var(--pow-blue) !important;
  color: #e8ecf0;
  border-top: 4px solid var(--pow-ink);
}

.pow-site-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.pow-site-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 1.75rem;
}

.pow-site-footer-name {
  margin: 0 0 0.35rem;
  font-family: var(--pow-font-comic);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  color: #fff;
  letter-spacing: 0.02em;
}

.pow-site-footer-tagline {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.pow-site-footer-contact p,
.pow-site-footer-legal p {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.pow-site-footer-contact a,
.pow-site-footer-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pow-site-footer-contact a:hover,
.pow-site-footer-link:hover {
  color: var(--pow-red);
}

.pow-site-footer-copy {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

.pow-legal-details-wrap {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid rgba(26, 26, 26, 0.12);
}

.pow-legal-heading {
  margin: 0 0 0.75rem !important;
  font-size: 1.05rem !important;
}

.pow-legal-details {
  margin: 0 0 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
}

.pow-legal-details dt {
  margin: 0;
  font-weight: 600;
}

.pow-legal-details dd {
  margin: 0;
}

.pow-legal-vat-exempt {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(26, 26, 26, 0.72);
  font-style: italic;
}

@media (max-width: 781px) {
  .pow-site-footer-grid {
    grid-template-columns: 1fr;
  }

  .pow-legal-details {
    grid-template-columns: 1fr;
  }

  .pow-legal-details dt {
    margin-top: 0.5rem;
  }
}

/* ── Theme footer ── */
.site-footer,
.site-footer .site-middle-footer-wrap,
.site-footer .site-bottom-footer-wrap {
  background: var(--pow-blue) !important;
  color: #e8ecf0 !important;
}

.site-footer a {
  color: #fff !important;
}

.site-footer a:hover {
  color: var(--pow-red) !important;
}

/* ── Responsive ── */
@media (max-width: 781px) {
  .pow-hero-visual-col {
    display: none;
  }

  .pow-hero-comic {
    text-align: center;
    padding-top: 2rem;
  }

  .pow-hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .pow-hero-buttons {
    justify-content: center;
  }

  .pow-service-cards .wp-block-column {
    flex-basis: 100% !important;
  }

  .pow-comic-steps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pow-comic-panel,
  .pow-comic-panel-1,
  .pow-comic-panel-2,
  .pow-comic-panel-3 {
    clip-path: none;
    margin-top: 0;
    min-height: 0;
  }

  .pow-how-step {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .pow-how-step--photo-right .pow-how-step-photo,
  .pow-how-step--photo-left .pow-how-step-photo {
    order: -1;
  }

  .pow-how-step--photo-right .pow-how-step-copy,
  .pow-how-step--photo-left .pow-how-step-copy {
    order: 2;
  }
}