/* Fixes added in the static HTML version (not in the Joomla original) */

/* Orange pill buttons: brand green #00983d on orange #ebae24 was only 1.9:1 contrast.
   Darker shade of the same green gives 5.3:1 (WCAG AA). Same specificity as the global
   .sppb-btn rule in custom.css (:where adds none), so buttons with their own colour rule keep it.
   Square buttons are transparent text links, not orange pills: left as they were. */
.sppb-btn:not(:where(.sppb-btn-square)) {
    color: #004a1f !important;
    /* a little taller than the original 5px 15px */
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/* Home hero: food collage casts a soft shadow on the green so it lifts off the background.
   Two layers: a tight one for contact, a wide soft one for depth. */
.headerbig img[src*="header-element-tas-big"] {
    filter: drop-shadow(0 4px 4px rgba(0, 35, 12, .30))
            drop-shadow(0 18px 22px rgba(0, 35, 12, .35));
}

/* ---------------------------------------------------------------- Navbar
   Same layout and colours; small refinements:
   - straight underline in the site's light green (#61d397) that grows in on hover
     and marks the current page (replaces the plain text underline)
   - white text stays white on hover (light green on green was hard to read)
   - soft text shadow for legibility on the gradient
   - logo tilts slightly like a stamp, social icons lift on hover */
.sp-megamenu-parent > li > a {
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 40, 15, .28);
    transition: color .25s ease;
}
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a {
    color: #fff;
    text-decoration: none;
}
.sp-megamenu-parent > li > a::after {
    content: "";
    position: absolute;
    left: 15px;   /* matches the link padding */
    right: 15px;
    top: calc(50% + 15px);
    height: 2px;
    border-radius: 2px;
    background: #61d397;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
    pointer-events: none;
}
.sp-megamenu-parent > li:hover > a::after,
.sp-megamenu-parent > li > a:focus-visible::after,
.sp-megamenu-parent > li.active > a::after {
    transform: scaleX(1);
}
.sp-megamenu-parent > li > a:focus-visible {
    outline: none;
}
.sp-megamenu-parent > li:last-child > a::after {
    right: 0;     /* last link has no right padding */
}
/* "Keurmerk" is an invisible spacer (transparent text) that balances the menu around the logo:
   it must not get the text shadow, or it shows up as a ghost word */
.sp-megamenu-parent > li > a.verborgenmenuitem {
    text-shadow: none !important;
}
/* logo item and the hidden "Keurmerk" item get no underline */
.sp-megamenu-parent > li > a:has(img)::after,
.sp-megamenu-parent > li > a.verborgenmenuitem::after {
    display: none;
}
.sp-megamenu-parent > li > a > img {
    transition: transform .4s ease;
}
.sp-megamenu-parent > li > a:hover > img,
.sp-megamenu-parent > li > a:focus-visible > img {
    transform: rotate(-4deg) scale(1.03);
}
.socialmenu a img {
    transition: transform .25s ease, opacity .25s ease;
}
.socialmenu a:hover img,
.socialmenu a:focus-visible img {
    transform: translateY(-2px);
    opacity: .9;
}

/* ---------------------------------------------------------------- Button hover
   The template's hover added a 2px border (button jumped 2px) and its colour change never applied
   (base colours are !important). Now: same size, colour fades, small lift with soft shadow. */
.sppb-btn {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease,
                box-shadow .25s ease, transform .25s ease !important;
}
.sppb-btn:not(:where(.sppb-btn-square)):hover,
.sppb-btn:not(:where(.sppb-btn-square)):focus-visible {
    border-width: 1px !important;
    border-color: transparent !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 40, 15, .22);
}
.sppb-btn:not(:where(.sppb-btn-square)):hover {
    background-color: #f3bd3f !important;
}

@media (prefers-reduced-motion: reduce) {
    .sppb-btn,
    .sp-megamenu-parent > li > a::after,
    .sp-megamenu-parent > li > a > img,
    .socialmenu a img {
        transition: none !important;
    }
    .sppb-btn:hover,
    .sp-megamenu-parent > li > a:hover > img {
        transform: none !important;
    }
}

/* ---------------------------------------------------------------- Home: "Wil jij ook zo'n leuke tas?"
   Sat ~24px above the middle of the dark green band. Its anchor box ends 50px (section padding)
   above the end of the 75px band, so the band centre is 12.5px below the anchor. */
.device-xl .headerbig .tasbutton {
    /* box is one 32px line (p margin removed): -(12.5 + 16) puts its middle on the band centre.
       No transform here: the existing side-to-side wiggle animation uses transform. */
    bottom: -28.5px;
}
.device-xl .headerbig .tasbutton p {
    margin: 0;
}

/* ---------------------------------------------------------------- Footer photo block (all pages)
   Same layout; photos get softly rounded corners and a gentle shadow, like printed photos
   lying on the page. Thumbnails are forced to equal squares. */
.uitgelichtcoltwee .sppb-addon-single-image img,
.fotocol .sppb-addon-single-image img {
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(0, 40, 15, .18);
}
.fotocol .sppb-addon-single-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow: 0 6px 14px rgba(0, 35, 12, .28);
}

/* ---------------------------------------------------------------- Home hero, 1200-1399px wide
   Both columns are sized by their content (food image is 856px). Below ~1400px they no longer fit
   side by side, so the headline column wrapped under the image and the bag text ended up on the
   wrong side of the bag. Keep one row and let the image column shrink instead (existing bug on the
   Joomla site too). */
@media (min-width: 1200px) {
    .headerbig .sppb-row:has(img[src*="header-element-tas-big"]) {
        flex-wrap: nowrap;
    }
    .headerbig .sppb-row > .sppb-row-column:has(img[src*="header-element-tas-big"]) {
        flex: 0 1 auto;
        min-width: 0;
    }
    .headerbig .sppb-row > .sppb-row-column:has(.tasbutton) {
        flex-shrink: 0;
    }
}

/* ---------------------------------------------------------------- Sticky navbar (with static-fixes.js)
   Once scrolled past the header the bar is fixed to the top: solid green, thinner stripe,
   shorter links and a smaller logo that still hangs over the edge like a stamp. */
#sp-menublok.is-stuck {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 10px;
    z-index: 1000 !important;
    border-bottom-width: 6px;
    background-image: url(../../../../images/gradient-bg-menu.jpg) !important;
    background-size: cover !important;   /* "contain" repeats the texture in bands on a short bar */
    box-shadow: 0 6px 18px rgba(0, 40, 15, .25);
    animation: etp-nav-in .35s ease both;
}
@keyframes etp-nav-in {
    from { transform: translateY(-100%); }
    to   { transform: none; }
}
@media (min-width: 992px) {
    #sp-menublok.is-stuck .sp-megamenu-parent > li > a {
        height: 64px;
        line-height: 64px;
    }
    #sp-menublok.is-stuck .sp-megamenu-parent > li > a > img {
        max-width: 76px;
        margin-bottom: -26px;
        padding-top: 4px;
    }
    #sp-menublok.is-stuck .socialmenu {
        top: -4px;   /* icons sit 16px into the module: centres them on the 64px links */
    }
}
@media (max-width: 991px) {
    #sp-menublok.is-stuck .socialmenu {
        top: -6px;   /* centred in the 60px mobile bar */
    }
}

/* ---------------------------------------------------------------- Fade-in on scroll (with static-fixes.js)
   Home: "Vol van Texelse producten" photo. */
.etp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s ease, transform .9s ease;
}
.etp-reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* Yellow "lees verder" line under the buttons: drawn from the button downwards, dot last */
.etp-line-reveal::after,
.etp-line-reveal.uitgelichtcol::before {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .55s ease-out .1s, opacity .2s ease .1s;
}
.etp-line-reveal.is-visible::after,
.etp-line-reveal.uitgelichtcol.is-visible::before {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
    #sp-menublok.is-stuck { animation: none; }
}

/* "Lees verder" buttons with the vertical line under them: the line was placed at a fixed 35px,
   the button's old inner height. Anchor it to the bottom edge so the taller buttons don't overlap it. */
.fotoblok1 .sppb-btn::after,
.blok2 .sppb-btn::after {
    top: 100%;
}

/* ---------------------------------------------------------------- Footer
   Menu + socials moved (HTML, etp_transforms.footer) into the left column under the e-mail address,
   as 3 rows of 2 columns. Social icons without circles. More room at the bottom. */
.footercustom .etp-footer-links {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    grid-template-rows: auto auto;
    grid-auto-flow: column;   /* Over ons/Leden | Contact/Lid worden | Socials/icons */
    column-gap: 56px;
    row-gap: 4px;
    align-items: center;
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}
.footercustom .etp-footer-links > li {
    font-family: bitter, serif !important;
    font-size: 20px;
    line-height: 32px;
    color: #fff;
}
.footercustom .etp-footer-links a {
    color: #fff;
    text-decoration: none;
}
.footercustom .etp-footer-links > li > a:hover {
    text-decoration: underline;
    text-decoration-color: #61d397;
    text-underline-offset: 5px;
}
.footercustom .etp-footer-socials .sppb-icons-group-list {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footercustom .sppb-icons-group-list li {
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
.footercustom .etp-footer-socials .sppb-icons-group-list a {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    font-size: 28px;
    line-height: 32px;
    color: #fff;
    transition: transform .25s ease;
}
.footercustom .etp-footer-socials .sppb-icons-group-list a:hover {
    transform: translateY(-2px);
}
.footercustom .etp-footer-socials .sppb-icons-group-list a i {
    font-size: 28px;
}
.sppb-section.footercustom {
    padding-bottom: 80px !important;
}
@media (max-width: 767px) {
    .footercustom .etp-footer-links {
        justify-content: center;
        text-align: center;
    }
    .footercustom .etp-footer-socials .sppb-icons-group-list {
        justify-content: center;
    }
}

/* ---------------------------------------------------------------- Home: three link cards
   The outline ran only around the text box; it now runs around the photo too (also on the left,
   next to the green bar), so each card is one outlined shape. */
.introblok .image-layout-preset-style-card .sppb-row {
    border: 3px solid #00983d;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
}
.introblok .buttoncol .sppb-column-addons .sppb-addon-wrapper:nth-child(even) .image-layout-preset-style-card .sppb-row {
    border-color: #ebae24;
}
.introblok .image-layout-preset-style-card .sppb-col-sm-8 {
    border: 0;
    border-radius: 0;
}

/* Footer photos: the image files have a 1px light edge baked in (visible as a thin white border).
   Crop it: rounded frame on the container, image scaled up slightly inside it. */
.uitgelichtcoltwee .sppb-addon-single-image-container {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 40, 15, .18);
}
.uitgelichtcoltwee .sppb-addon-single-image img {
    border-radius: 0;
    box-shadow: none;
    transform: scale(1.012);
}
.fotocol .sppb-addon-single-image-container {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0, 35, 12, .28);
}
.fotocol .sppb-addon-single-image img {
    border-radius: 0;
    box-shadow: none;
    transform: scale(1.025);
}

/* ---------------------------------------------------------------- Vind producten: intro text
   Designed as white text on a background image that does not exist (vind-rpoducten-intro-bg.svg,
   also missing on the Joomla site), so it showed as an empty white block. Show it as normal text,
   with less padding. */
.vindproductenintro {
    padding: 45px 0 95px !important;   /* bottom leaves room for the "Filter op categorie" tab */
}
.vindproductenintro p {
    color: #252525;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    line-height: 1.7;
    text-align: center;
}

/* ---------------------------------------------------------------- Inner page header photo: small parallax
   static-fixes.js moves a copy of the section background (--etp-parallax) a little slower than the page. */
.headerklein.etp-parallax {
    position: relative;
    overflow: hidden;
}
.headerklein.etp-parallax::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14%;     /* travel room above only: the photo moves down while scrolling (~15% enlarged) */
    bottom: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transform: translate3d(0, var(--etp-parallax, 0px), 0);
    will-change: transform;
    z-index: 0;
}
.headerklein.etp-parallax > .sppb-row-overlay {
    z-index: 1;
}
.headerklein.etp-parallax > .sppb-row-container {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------------- Product / member grid (vind producten, leden, contact)
   Rounded photos with a soft lift on hover, the whole photo clickable (link covered only the top part),
   titles in the site's serif, a bit larger and darker for contrast. */
.da-item .da-thumb {
    border-radius: 4px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.da-item .da-thumb {
    position: relative;
}
.da-item .da-thumb > a {
    position: absolute;
    inset: 0;
}
.da-item:hover .da-thumb {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 40, 15, .18);
}
.da-item .da-item-title {
    font-family: bitter, serif !important;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.35;
    color: #7a5f24;
    margin-top: 10px;
    transition: color .2s ease;
}
.da-item:hover .da-item-title {
    color: #00983d;
}

/* "Laad meer" uses Bootstrap's .btn-primary: same look and hover as the other orange buttons */
.da-loadmore .btn.btn-primary {
    color: #004a1f !important;
    background-color: #ebae24 !important;
    border: 1px solid transparent !important;
    padding: 7px 18px !important;
    border-radius: 99px !important;
    box-shadow: none;
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.da-loadmore .btn.btn-primary:hover,
.da-loadmore .btn.btn-primary:focus-visible {
    background-color: #f3bd3f !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 40, 15, .22);
}

/* ---------------------------------------------------------------- Map legend: easier to read */
.legenda ul {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 6px;
}
.legenda ul li {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    flex: 0 0 auto !important;
    padding-left: 32px !important;
    padding-right: 22px !important;
    background-size: 24px auto !important;
}

/* ---------------------------------------------------------------- Map attribution
   OpenStreetMap's licence requires the credit to stay visible, so it is kept but made small and quiet;
   the "Leaflet" part is optional and removed. */
.leaflet-control-attribution a[href*="leafletjs.com"],
.leaflet-control-attribution a[href*="leafletjs.com"] + span {
    display: none;
}
.leaflet-container .leaflet-control-attribution {
    font-size: 9px;
    line-height: 1.4;
    background: rgba(255, 255, 255, .55);
    color: #555;
    opacity: .8;
}

/* ---------------------------------------------------------------- Footer: bigger logo, e-mail icon */
.footertekstcol .p1 > .s1 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.footertekstcol .p1 > .s1::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='18' height='14' rx='2.5'/%3E%3Cpath d='M1.8 2.2 10 8.6l8.2-6.4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------------------------------------------------------------- Photos: small hover zoom
   Home "Vol van Texelse producten" photo and the footer photos. The zoom stays inside the rounded frame. */
.fotoblok1 .sppb-addon-single-image-container {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 40, 15, .18);
}
.fotoblok1 .sppb-addon-single-image img,
.uitgelichtcoltwee .sppb-addon-single-image img,
.fotocol .sppb-addon-single-image img {
    transition: transform .6s ease;
}
.fotoblok1 .sppb-addon-single-image-container:hover img {
    transform: scale(1.04);
}
.uitgelichtcoltwee .sppb-addon-single-image-container:hover img {
    transform: scale(1.05);
}
.fotocol .sppb-addon-single-image-container:hover img {
    transform: scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
    .fotoblok1 .sppb-addon-single-image-container:hover img,
    .uitgelichtcoltwee .sppb-addon-single-image-container:hover img,
    .fotocol .sppb-addon-single-image-container:hover img {
        transform: none;
    }
}

/* The photo is pulled up 150px (template: .fotoblok1 img { margin-top: -150px }). With the rounded
   frame clipping the zoom, the offset has to move to the frame, or the top of the photo is cut off. */
.fotoblok1 .sppb-addon-single-image-container {
    margin-top: -150px;
}
.fotoblok1 .sppb-addon-single-image-container img {
    margin-top: 0;
}

/* Link cards: line between the photo and the text box too */
.introblok .image-layout-preset-style-card .sppb-col-sm-4 {
    border-right: 3px solid #00983d;
}
.introblok .buttoncol .sppb-column-addons .sppb-addon-wrapper:nth-child(even) .image-layout-preset-style-card .sppb-col-sm-4 {
    border-right-color: #ebae24;
}

/* ---------------------------------------------------------------- Navbar: same green on every page
   Inner pages used a semi-transparent dark gradient over the header photo; use the home page green.
   The header photo no longer slides up under the (now solid) bar, so all of it stays visible. */
#sp-menublok {
    background-image: url(../../../../images/gradient-bg-menu.jpg) !important;
}
.headerklein {
    margin-top: 0 !important;
}
/* Member pages: header photo was pulled 140px under the bar (and painted over it).
   Start it below the green bar; the title and buttons are positioned from the page top,
   so they move down by the same 140px to keep their place on the photo. */
.mod_jmg_article_img_background {
    margin-top: 0 !important;
}
.artikeltitelhead,
.customfieldsheader {
    translate: 0 140px;
}

/* ---------------------------------------------------------------- Footer layout
   Large logo on the left, e-mail + menu in the middle, the photos stay on the right.
   White bottom bar: copyright left; "Concept en design: Zilte Zaken" + Webjongens credit right. */
.footertekstcol .sppb-column-addons {
    display: grid;
    grid-template-columns: 210px 1fr;   /* fixed logo column: text stays put */
    align-items: center;
    column-gap: 40px;
}
.footercustom .logofooter img {
    max-width: 213px !important;   /* 185px + 15% */
    width: 213px;
}
.footertekstcol .sppb-column-addons > .sppb-addon-wrapper:first-child {
    justify-self: center;
    align-self: start;
    position: relative;
    z-index: 2;
    translate: 0 -136px;   /* up across the green edge: overlaps the white strip above */
}
.footertekstcol .etp-footer-mid {
    justify-self: start;
    padding-top: 40px;
}
@media (min-width: 992px) {
    .footertekstcol .sppb-column-addons {
        margin-left: -60px;   /* logo + text a bit further left */
    }
    /* Text centred between the food illustration (grows with the window) and the photos
       (centred container): on wide screens it drifts right, so pull it back proportionally. */
    .footertekstcol .etp-footer-mid {
        margin-left: calc(min(0px, (1480px - 100vw) * .125) - 45px);   /* 3-column menu: wider block */
    }
}
.footertekstcol .etp-footer-mid .sppb-addon-wrapper {
    margin-bottom: 0 !important;
}
@media (max-width: 991px) {
    .footertekstcol .sppb-column-addons {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 20px;
    }
    .footertekstcol .etp-footer-mid {
        justify-self: center;
        padding-top: 0;
    }
    .footertekstcol .sppb-column-addons > .sppb-addon-wrapper:first-child {
        translate: none;
    }
    .footercustom .logofooter img {
        width: 160px;
        max-width: 160px !important;
    }
}

/* White bottom bar */
.copy .sppb-row {
    align-items: center;
}
.copy p,
.copy .etp-bar-credits {
    font-size: 13px;
    color: #6b6b6b;
}
.copy .etp-bar-credits {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;   /* three items evenly spread over the bar */
    align-items: center;
    column-gap: 30px;
    row-gap: 4px;
    padding: 0 15px;
}
.copy .etp-bar-credits p {
    margin: 0;
}
.copy .etp-bar-credits__concept a {
    color: #3a3a3a;
    text-decoration: none;
    transition: color .2s ease;
}
.copy .etp-bar-credits__concept a:hover {
    color: #00983d;
}
@media (max-width: 767px) {
    .copy .sppb-addon-text-block,
    .copy .sppb-text-left,
    .copy .sppb-text-right {
        text-align: center !important;
    }
    .copy .etp-bar-credits {
        flex-direction: column;
        justify-content: center;
    }
}

/* Webjongens credit with typewriter (from the Webjongens footer-credit instructions; light bar) */
.copy .credit {
    --credit-heart: #ebae24;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    white-space: nowrap;
}
.copy .credit__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #3a3a3a;
    text-decoration: none;
    letter-spacing: .02em;
}
.copy .credit__link strong {
    font-weight: 700;
}
.copy .credit__link:hover span {
    text-decoration: underline;
    text-underline-offset: .2em;
}
.copy .credit__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}
.copy .credit__heart {
    width: 1rem;
    height: 1rem;
    fill: var(--credit-heart);
    transition: transform 200ms cubic-bezier(.16, 1, .3, 1);
}
.copy .credit__link:hover .credit__heart {
    transform: scale(1.2);
}
.copy .credit__typed {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 6.5em;
    color: #8a8a8a;
}
.copy .credit__cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 1px;
    background: currentColor;
    animation: credit-blink 1s step-end infinite;
}
@keyframes credit-blink {
    50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .copy .credit__cursor { animation: none; }
    .copy .credit__heart { transition: none; }
}



/* ---------------------------------------------------------------- "Uitleg van onze labels" cards
   Very light touch: same colours, layout and text; softly rounded corners, a faint shadow and a
   slightly tighter "Ik / ben" heading. */
.tekstblok .labels .col1, .tekstblok .labels .col2, .tekstblok .labels .col3, .tekstblok .labels .col4,
.onzelabels .col1, .onzelabels .col2, .onzelabels .col3, .onzelabels .col4 {
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(40, 30, 10, .10) !important;   /* page builder sets a per-column empty shadow */
}
.tekstblok .labels h2,
.onzelabels .col1 h2, .onzelabels .col2 h2, .onzelabels .col3 h2, .onzelabels .col4 h2 {
    line-height: 1.1;
}
.tekstblok .labels h3,
.onzelabels h3 {
    opacity: .95;
}

/* Over page: "Over ons" photo, very slightly rounded */
.tekstblok .sppb-addon-single-image img {
    border-radius: 4px;
}

/* Labels: a blank line between "Ik ben" and the subtitle; round bullet instead of the typed "-" */
.tekstblok .labels h2,
.onzelabels .col1 h2, .onzelabels .col2 h2, .onzelabels .col3 h2, .onzelabels .col4 h2 {
    margin-bottom: 14px !important;
}
.tekstblok .labels h3::before,
.onzelabels .col1 h3::before, .onzelabels .col2 h3::before,
.onzelabels .col3 h3::before, .onzelabels .col4 h3::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 9px 2px 1px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

/* The photo block above the footer (.footeruitgelicht, z-index 1) overlaps the top of the footer
   (z-index 0) with its empty left column, covering the footer links: let clicks through its empty
   areas, keep its own content (photos, buttons) clickable. */
.footeruitgelicht {
    pointer-events: none;
}
.footeruitgelicht .sppb-addon-wrapper {
    pointer-events: auto;
}

/* Footer: e-mail address below the menu columns */
.footertekstcol .etp-footer-mid {
    display: flex;
    flex-direction: column;
}
.footertekstcol .etp-footer-mid .etp-footer-links-wrap {
    order: -1;
}
.footercustom .etp-footer-links {
    margin: 0 0 22px;
}
@media (max-width: 767px) {
    .footertekstcol .etp-footer-mid {
        align-items: center;
    }
    .footercustom .etp-footer-links {
        column-gap: 32px;
    }
}

/* Member pages, header buttons ("Naar onze webshop", "Bekijk onze locaties"): taller, darker text
   for contrast on the yellow, like the other buttons */
.customfieldsheader .field-value {
    display: inline-block;
    padding: 7px 18px !important;
    line-height: 1.3;
    color: #004a1f !important;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.customfieldsheader .field-value a {
    color: #004a1f;
    font-weight: 500;
}
.customfieldsheader .field-value:hover {
    background-color: #f3bd3f !important;
    transform: translateY(-2px);
}
/* Member pages, white buttons further down ("Naar onze website / webshop"): taller */
.meerwetenover a {
    display: inline-block;
    padding: 7px 50px 7px 18px !important;
    line-height: 1.3;
    transition: transform .25s ease, background-color .25s ease;
}
.meerwetenover a:hover {
    transform: translateY(-2px);
}

/* Member pages, label blocks ("Ik ben / Producent van product"): round bullet instead of the typed "-" */
.ik-ben .field-suffix::before,
.ik-verkoop-ik-verkoop-producten .field-suffix::before,
.ik-werk-met-ik-verwerk-producten .field-suffix::before,
.ik-promoot-ambassadeur-van-producten .field-suffix::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 8px 2px 1px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

/* Footer text vertically centred between the light green stripe and the white bottom bar
   (56px above and below); footer height unchanged */
@media (min-width: 992px) {
    .footertekstcol .etp-footer-mid {
        padding-top: 80px;
    }
    .sppb-section.footercustom {
        padding-bottom: 40px !important;
    }
}

/* Footer e-mail address: mailto link (static-fixes.js), same look as the menu links */
.footercustom a.etp-footer-mail {
    color: #fff;
    text-decoration: none;
}
.footercustom a.etp-footer-mail:hover {
    text-decoration: underline;
    text-decoration-color: #61d397;
    text-underline-offset: 5px;
}

/* Footer title "Echt Texels Product" back, above the menu */
.footertekstcol .etp-footer-mid .etp-footer-title {
    order: -2;
    margin: 0 0 16px !important;
}
.footertekstcol .etp-footer-title .sppb-addon-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff;
}

/* Footer photos fade in one after another */
.fotocol .sppb-col-md-4:nth-child(2) .etp-reveal { transition-delay: .12s; }
.fotocol .sppb-col-md-4:nth-child(3) .etp-reveal { transition-delay: .24s; }

/* Phone/tablet: the home photo is not pulled up over the text */
@media (max-width: 991px) {
    .fotoblok1 .sppb-addon-single-image-container {
        margin-top: 0;
    }
}

/* ================================================================ Tablet & phone (< 992px)
   The template's phone/tablet styles hang on .device-xs/.device-md body classes that nothing sets
   (also not on the Joomla site), so these screens got the desktop styles. Fixed here by width. */
@media (max-width: 991px) {
    /* Menu bar: only the hamburger; the desktop menu and the social icons go (icons are in the menu) */
    nav .sp-megamenu-parent,
    #sp-menublok .socialmenu {
        display: none !important;
    }
    /* The bar's gradient image was tiled ("layers"); stretch it over the bar once */
    #sp-menublok,
    .itemid-101 #sp-menublok {
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }
    #sp-menublok .sp-megamenu-wrapper {
        justify-content: flex-end;
        min-height: 56px;
        align-items: center;
    }
    .burger-icon > span {
        background-color: #fff;
        height: 3px;
    }
    .burger-icon {
        width: 32px;
    }
    /* Slide-out menu */
    .offcanvas-menu .offcanvas-inner ul.menu > li > a {
        font-family: bitter, serif !important;
        font-weight: 400;
        color: #00983d;
        font-size: 24px;
    }
    .offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
        color: #004a1f;
    }
    .offcanvas-menu .item-111,
    .offcanvas-menu .offcanvas-inner a.verborgenmenuitem {
        display: none !important;
    }
    .close-offcanvas .burger-icon > span {
        background-color: #00983d;
        height: 2px;
    }
    .etp-offcanvas-socials {
        display: flex;
        gap: 12px;
        padding: 18px 0 0;
        margin-top: 12px;
        border-top: 2px solid #61d397;
    }
    .etp-offcanvas-socials img {
        width: 40px;
        height: 40px;
        margin: 0 0 0 -8px;
    }
}
@media (min-width: 992px) {
    .etp-offcanvas-socials {
        display: none;
    }
}

/* Footer thumbnails a little lower */
.footeruitgelicht .fotocol {
    margin-top: 15px !important;
}

@media (max-width: 991px) {
    /* Home "Lees verder": no 450px pull-up and no line running through the text */
    .fotoblok1 .sppb-btn {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }
    .fotoblok1 .sppb-btn::after {
        display: none !important;
    }
    /* Footer logo centred */
    .footercustom .logofooter {
        padding-left: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
    }
    .footertekstcol .sppb-column-addons > .sppb-addon-wrapper:first-child {
        justify-self: center;
        width: 100%;
    }
    .footercustom .logofooter img {
        display: block;
        margin: 0 auto;
    }
    /* Member pages "Meer weten over ...": smaller heading, buttons wrap instead of running off */
    .meerwetenover h2 {
        font-size: 24px !important;
        line-height: 1.25;
        padding: 0 20px 16px !important;
    }
    .meerwetenover ul {
        width: auto !important;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 12px 0;
        padding: 0 10px;
    }
    /* Map legend: one item per row */
    .legenda ul {
        display: block !important;
    }
    .legenda ul li {
        float: none !important;
        display: block !important;
        width: auto !important;
        margin: 0 0 6px !important;
    }
}
@media (max-width: 991px) {
    /* Footer photos: smaller block, centred, sitting on the footer */
    .uitgelichtcoltwee .sppb-column-addons {
        max-width: 440px;
        margin: 0 auto;
        padding: 0 15px;
    }
    .footercustom::before {
        display: none !important;   /* food illustration: only room for it on desktop */
    }
}
@media (max-width: 575px) {
    .uitgelichtcoltwee .sppb-column-addons {
        max-width: 320px;
    }
}
@media (max-width: 991px) {
    .footeruitgelicht .sppb-row .fotocol,
    .footeruitgelicht .fotocol {
        max-width: 440px;
        margin: 15px auto 0 !important;
        padding: 0 10px !important;
    }
}
@media (max-width: 575px) {
    .footeruitgelicht .sppb-row .fotocol,
    .footeruitgelicht .fotocol {
        max-width: 320px;
    }
}
/* Map title ("Onze leden" / "Onze locatie", CSS text above the map): smaller on tablet and phone */
@media (max-width: 991px) {
    .mymaplocation::before {
        font-size: 40px;
    }
}
@media (max-width: 575px) {
    .mymaplocation::before {
        font-size: 32px;
    }
}
@media (max-width: 991px) {
    /* "Meer weten over ...": buttons stay inside the yellow block */
    body .sppb-section.meerwetenover,
    body .meerwetenover {
        padding: 20px 0 45px !important;
    }
    .meerwetenover ul li {
        margin: 0 6px !important;
    }
    /* Yellow line above the footer photo block: shorter, so it stays clear of the block above */
    .uitgelichtcol::before {
        top: -40px;
        height: 70px;
        background-position: bottom center;
        background-size: 20px 150px;
    }
}

/* Desktop: footer photo block (large photo + thumbnails) 15px lower */
@media (min-width: 992px) {
    .uitgelichtcoltwee,
    .footeruitgelicht .fotocol {
        translate: 0 15px;
    }
}

/* Mobile menu: opening/closing moves focus to a button that is still sliding in from off-screen;
   the browser then scrolled the page wrapper sideways to show it (and it stayed shifted).
   "clip" cuts off overflow like "hidden" but cannot be scrolled at all. */
@supports (overflow: clip) {
    .body-innerwrapper {
        overflow: clip !important;   /* was "hidden" (custom.css) */
    }
}

@media (max-width: 991px) {
    /* Footer logo centred: an old rule capped its box at 110px while the logo is 160px wide */
    .footercustom .logofooter {
        max-width: 160px !important;
        width: 160px;
    }
    /* Home "Lees verder": in the white space above the yellow block, short line down to it */
    .fotoblok1 .sppb-btn {
        translate: 0 -180px;
        margin-bottom: -43px !important;
    }
    .fotoblok1 .sppb-btn::after {
        display: block !important;
        height: 66px;
        background-position: bottom center;
        background-size: 20px 150px;
    }
    /* Home photo 12px lower */
    .fotoblok1 .sppb-addon-single-image-container {
        margin-top: 12px;
    }
}
@media (max-width: 991px) {
    /* Footer thumbnails 6px lower (into the green) */
    .footeruitgelicht .fotocol {
        translate: 0 6px;
    }
}
@media (max-width: 991px) {
    /* Footer thumbnails: always one row of three (some tablet widths stacked them) */
    .footeruitgelicht .fotocol .sppb-row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    .footeruitgelicht .fotocol .sppb-row > [class*="sppb-col-"] {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }
}
@media (max-width: 991px) {
    /* Member page header buttons: space between them (template sets margin-right 0 here) */
    body .customfieldsheader ul li {
        margin-right: 14px !important;
        margin-bottom: 12px !important;
    }
}
@media (max-width: 991px) {
    /* Photo frame (rounded + shadow) as wide as the photo; it was wider on tablet, showing an empty shape */
    .fotoblok1 .sppb-addon-single-image-container,
    .uitgelichtcoltwee .sppb-addon-single-image-container {
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 991px) {
    /* Member pages: the photo in the yellow block is pulled up 150px (desktop: over the section edge);
       with the columns stacked it covered the text. */
    .blok2 img {
        margin-top: 24px !important;
    }
}