.elementor-kit-11{--e-global-color-primary:#10133f;--e-global-color-secondary:#9d8100;--e-global-color-text:#1a1a1a;--e-global-color-accent:#d7c79a;--e-global-color-895f87a:#FFFFFF;--e-global-color-249d73c:#FAF7EF;--e-global-typography-primary-font-family:"Nunito";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Nunito";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-weight:700;}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-kit-11 h1{color:var( --e-global-color-primary );}.elementor-kit-11 h2{color:var( --e-global-color-primary );}.elementor-kit-11 h4{font-size:18px;line-height:26px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
 * Horecamerk — site-wide custom CSS
 * Hero-pill overlap-effect (homepage + alle content pages) +
 * z-index stapeling zodat absolute logo binnen navy NIET door cream
 * sectie heen steekt.
 *
 * NB: padding-top/bottom van de navy container (`.hm-hero-pill`) niet
 * meer hier hard-coded — pas die per page aan in Elementor:
 *   container met hm-hero-pill class → Layout → Padding → Top/Bottom.
 * ============================================================ */

/* Navy hero container — geen eigen stacking context, overflow visible
 * zodat de pill door de onderkant kan steken. */
.hm-hero-pill {
    overflow: visible !important;
    position: relative;
    z-index: auto !important;
    isolation: auto !important;
}

/* Pill — overlap met negative margin, z-index 10 om boven cream te blijven */
.hm-hero-pill__tab {
    margin-bottom: -220px !important;
    position: relative;
    z-index: 10 !important;
}
@media (max-width: 1024px) {
    .hm-hero-pill__tab { margin-bottom: -120px !important; }
}
@media (max-width: 767px) {
    .hm-hero-pill__tab { margin-bottom: -100px !important; }
}

/* Voldoende lucht tussen pill-onderkant en eerstvolgende sectie + z-index 5
 * zodat cream boven het logo zit (logo z-index 1) maar onder de pill (10). */
.hm-hero-pill + .e-con,
.hm-hero-pill + .elementor-element.e-con,
.hm-hero-pill + section,
.hm-hero-pill + .elementor-section {
    position: relative;
    z-index: 5 !important;
    padding-top: clamp(180px, 16vw, 280px) !important;
}
@media (max-width: 1024px) {
    .hm-hero-pill + .e-con,
    .hm-hero-pill + .elementor-element.e-con,
    .hm-hero-pill + section,
    .hm-hero-pill + .elementor-section {
        padding-top: 200px !important;
    }
}
@media (max-width: 767px) {
    .hm-hero-pill + .e-con,
    .hm-hero-pill + .elementor-element.e-con,
    .hm-hero-pill + section,
    .hm-hero-pill + .elementor-section {
        padding-top: 140px !important;
    }
}

/* Absolute logo binnen navy — z-index 1 zodat cream sectie er overheen kan.
 * Pill (z-index 10) blijft sowieso boven cream (z-index 5). */
.hm-hero-pill .hm-clip-to-navy {
    z-index: 1 !important;
}

/* ============================================================
 * Homepage layout patterns — VERPLAATST UIT hm_branding.css
 * Bewerk hier (Site Settings → Custom CSS) om uiterlijk aan te passen.
 * Brand tokens (kleuren / fonts / base typography) blijven in
 * hm_branding.css; alleen homepage layout-classes leven hier.
 * ============================================================ */

/* ---------- Background utilities ---------- */
.hm-bg-navy   { background: var(--hm-color-navy);  color: #fff; }
.hm-bg-gold   { background: var(--hm-color-gold);  color: #fff; }
.hm-bg-paper  { background: var(--hm-color-paper-warm); }
.hm-text-navy { color: var(--hm-color-navy) !important; }
.hm-text-gold { color: var(--hm-color-gold) !important; }
.hm-bg-navy :where(h1, h2, h3, h4, h5, h6, p, a, .elementor-heading-title) {
    color: #fff;
}
.hm-bg-navy :where(a) { text-decoration-color: var(--hm-color-gold-soft); }
.hm-bg-navy :where(a:hover) { color: var(--hm-color-gold-soft); }

/* ---------- Side strip section (e.g. "HET MAGAZINE") ---------- */
.hm-side-strip {
    position: relative;
    overflow: hidden;
}
.hm-side-strip::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 96px;
    background: var(--hm-color-gold-soft);
    z-index: 0;
}
.hm-side-strip > .elementor-container,
.hm-side-strip > .e-con-inner,
.hm-side-strip > .elementor-column-wrap {
    position: relative;
    z-index: 1;
    padding-left: 120px;
}
.hm-side-strip__label {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    padding: 24px 0;
}
.hm-side-strip__label .elementor-heading-title,
.hm-side-strip__label.elementor-widget-heading .elementor-heading-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--hm-font-heading);
    font-weight: 800;
    color: var(--hm-color-navy);
    letter-spacing: 0.12em;
    font-size: clamp(1.25rem, 2vw, 1.85rem);
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}
.hm-side-strip--right::before { inset: 0 0 0 auto; }
.hm-side-strip--right > .elementor-container,
.hm-side-strip--right > .e-con-inner,
.hm-side-strip--right > .elementor-column-wrap { padding-left: 0; padding-right: 120px; }
.hm-side-strip--right .hm-side-strip__label { left: auto; right: 0; }
.hm-side-strip--right .hm-side-strip__label .elementor-heading-title {
    transform: rotate(0deg);
    writing-mode: vertical-rl;
}
.hm-side-strip--navy::before { background: var(--hm-color-gold); }
.hm-side-strip--navy :where(h1, h2, h3, h4, h5, h6, p, .elementor-heading-title) { color: #fff; }
.hm-side-strip--navy .hm-side-strip__label,
.hm-side-strip--navy .hm-side-strip__label .elementor-heading-title { color: var(--hm-color-gold-soft); }
@media (max-width: 768px) {
    .hm-side-strip::before { width: 48px; }
    .hm-side-strip > .elementor-container,
    .hm-side-strip > .e-con-inner,
    .hm-side-strip > .elementor-column-wrap { padding-left: 64px; }
    .hm-side-strip__label,
    .hm-side-strip__label .elementor-heading-title { left: -22px; font-size: 1.1rem; }
}

/* ---------- Action-type badges (CASHBACK / KORTING / ACTIES / SAMPLE) ---------- */
.hm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hm-font-heading);
    font-weight: 800;
    color: #fff;
    background: var(--hm-color-navy);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(16, 19, 63, 0.22);
    text-decoration: none;
    line-height: 1;
}
.hm-badge--cashback { background: var(--hm-color-gold); }
.hm-badge--korting  { background: #c0392b; }
.hm-badge--actie    { background: var(--hm-color-navy); }
.hm-badge--sample   { background: var(--hm-color-gold-soft); color: var(--hm-color-navy); }
.hm-badge-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
}

/* ---------- Magazine frame met soft halo ---------- */
.hm-magazine-frame {
    position: relative;
    padding: 28px;
    isolation: isolate;
}
.hm-magazine-frame::before {
    content: "";
    position: absolute;
    inset: 8% 6% 8% 6%;
    background: radial-gradient(ellipse at center,
        var(--hm-color-gold-soft) 0%,
        rgba(215, 199, 154, 0.55) 35%,
        rgba(215, 199, 154, 0) 70%);
    filter: blur(24px);
    z-index: -1;
    border-radius: 50%;
}
.hm-magazine-frame > * {
    box-shadow: 0 30px 70px rgba(16, 19, 63, 0.28),
                0 8px 20px rgba(16, 19, 63, 0.18);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.hm-magazine-frame--tilt > * { transition: transform 0.35s ease; }
.hm-magazine-frame--tilt:hover > * { transform: scale(1.01); }
.hm-magazine-frame .hm-flipbook,
.hm-magazine-frame .awcf-hm-flipbook { box-shadow: none; border-radius: 0; }

/* ---------- Phone mockup ---------- */
.hm-phone-mockup {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
    padding: 14px 14px 18px;
    background: var(--hm-color-navy);
    border-radius: 38px;
    box-shadow: 0 24px 60px rgba(16, 19, 63, 0.35),
                inset 0 0 0 2px rgba(255,255,255,0.06);
}
.hm-phone-mockup::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    width: 60px; height: 6px;
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    transform: translateX(-50%);
}
.hm-phone-mockup > * { border-radius: 24px; overflow: hidden; background: #fff; display: block; }

/* ---------- QR decoratie ---------- */
.hm-qr-mark {
    width: 88px; height: 88px;
    display: inline-block;
    background-color: var(--hm-color-navy);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h7v7H3V3zm2 2v3h3V5H5zm9-2h7v7h-7V3zm2 2v3h3V5h-3zM3 14h7v7H3v-7zm2 2v3h3v-3H5zm9 0h2v2h-2v-2zm4 0h3v2h-3v-2zm-2 4h2v3h-2v-3zm4 0h3v3h-3v-3zM12 12h2v2h-2v-2zm6-2h3v2h-3v-2z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h7v7H3V3zm2 2v3h3V5H5zm9-2h7v7h-7V3zm2 2v3h3V5h-3zM3 14h7v7H3v-7zm2 2v3h3v-3H5zm9 0h2v2h-2v-2zm4 0h3v2h-3v-2zm-2 4h2v3h-2v-3zm4 0h3v3h-3v-3zM12 12h2v2h-2v-2zm6-2h3v2h-3v-2z'/></svg>") center / contain no-repeat;
}
.hm-qr-mark--gold { background-color: var(--hm-color-gold); }
.hm-qr-mark--white { background-color: #fff; }

/* ---------- Scan arrow ---------- */
.hm-scan-arrow {
    position: relative;
    font-family: var(--hm-font-script);
    color: var(--hm-color-gold);
    font-size: 1.6rem;
    padding-right: 64px;
    display: inline-block;
}
.hm-scan-arrow::after {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    width: 56px; height: 28px;
    background-color: var(--hm-color-gold);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28'><path d='M2 14 C 12 0, 30 0, 44 12' fill='none' stroke='black' stroke-width='3' stroke-dasharray='4 4'/><polygon points='40,4 50,12 38,18'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28'><path d='M2 14 C 12 0, 30 0, 44 12' fill='none' stroke='black' stroke-width='3' stroke-dasharray='4 4'/><polygon points='40,4 50,12 38,18'/></svg>") center / contain no-repeat;
    transform: translateY(-50%);
}

/* ---------- Eyebrow label (small uppercase boven titel) ---------- */
.hm-eyebrow,
.hm-eyebrow .elementor-heading-title {
    font-family: var(--hm-font-heading);
    font-weight: 800;
    color: var(--hm-color-gold);
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.4em;
}

/* ---------- Stat / KPI ---------- */
.hm-stat,
.hm-stat .elementor-heading-title {
    font-family: var(--hm-font-heading);
    font-weight: 800;
    color: var(--hm-color-gold);
    font-size: clamp(2.5rem, 5vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.hm-stat--navy,
.hm-stat--navy .elementor-heading-title { color: var(--hm-color-navy); }

/* ---------- Tafel-feel achtergrond ---------- */
.hm-bg-tafel {
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(16,19,63,0.05) 100%),
        var(--hm-color-paper-warm);
}

/* ---------- Hero pill structuur (rounded corners + shadow) ----------
 * Layout (padding, breedte, bg, border-radius) → bewerk in Elementor
 * container settings. Hier alleen structurele rules. */
.hm-hero-pill__tab {
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.hm-hero-pill__tab .elementor-heading-title,
.hm-hero-pill__tab h1 {
    color: var(--hm-color-navy);
    margin: 0 0 0.4em;
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
}
.hm-hero-pill__tab .hm-text-gold,
.hm-hero-pill__tab .hm-script {
    color: var(--hm-color-gold) !important;
}
.hm-hero-pill__photo {
    position: absolute;
    inset: auto 0 -64px 0;
    height: 320px;
    background-size: cover;
    background-position: center;
    z-index: 0;
    border-radius: 0 0 28px 28px;
    margin: 0 auto;
    max-width: 1140px;
}

/* Pill visual structure — herstellen na migratie */
.hm-hero-pill__tab {
    max-width: 920px;
    background: #fff;
    border-radius: 28px;
    padding: 32px 44px 36px;
    box-shadow: 0 18px 48px rgba(16, 19, 63, 0.28);
}/* End custom CSS */