﻿        .welkom-main {
            max-width: 1100px;
            margin: 24px auto 0 auto;
            padding: 0 12px;
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .welkom-layout {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .welkom-primary {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .welkom-sidebar {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .welkom-block {
            background: #fff;
            border-radius: 12px;
            overflow: visible; /* allow children to extend to inner edges */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            padding: 24px 18px;
        }

            /* Make the suggestions block flush: remove rounding so the band color can reach the inner edges while keeping padding */
            .welkom-block.welkom-suggesties {
                padding: 24px 18px;
                /* rounded corners on the bottom so the suggestions block looks finished */
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                border-bottom-left-radius: 12px;
                border-bottom-right-radius: 12px;
                overflow: visible;
            }

            /* Make the about block visually connect with the suggestions band by removing bottom rounding */
            .welkom-block.welkom-about-block {
                border-top-left-radius: 12px;
                border-top-right-radius: 12px;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }

        .welkom-block h2 {
            margin-top: 0;
            color: #1f2937;
            font-size: 1.3em;
        }

        .featured-list {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .photo-grid {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .photo-grid img {
            width: 100%;
            border-radius: 8px;
            object-fit: cover;
            background: #e5e7eb;
        }

 

        @media (min-width: 700px) {
            .welkom-main {
                gap: 40px;
            }

            .photo-grid {
                flex-direction: row;
            }

            .photo-grid img {
                width: 32%;
            }

        }
            /* Nieuwe styling voor de welkom twee-koloms sectie */
            .welkom-about .about-row {
                display: flex;
                flex-direction: column;
                gap: 18px;
            }

            /* grid used in welcome template (two columns on desktop, stacked on mobile) */
            .welkom-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .welkom-grid.single-column {
                grid-template-columns: 1fr;
            }

            .welkom-cell {
                min-height: 160px;
                border: 1px dashed rgba(0,0,0,0.08);
                padding: 12px;
                background: #fff;
                position: relative;
            }

            /* Jamina image styling: mobile default (stacked). On small screens use a percentage width with a cap. */
            .jamina-image {
                display: block;
                width: 90%;
                max-width: 400px; /* as requested for <800px */
                height: auto;
                border-radius: 6px;
                box-shadow: 0 6px 18px rgba(0,0,0,0.08);
                margin: 12px auto 0 auto; /* mobile: centered under text */
                float: none;
            }

            .ijsfiets-image {
                max-width: 100%;
                height: auto;
                border-radius: 6px;
                object-fit: contain;
            }

            .welkom-about .about-text {
                font-size: 0.98rem;
                line-height: 1.5;
                color: #111827;
            }

            .welkom-about .about-image img {
                width: 100%;
                height: auto;
                border-radius: 8px;
                object-fit: cover;
                background: #e5e7eb;
            }

            @media (min-width: 800px) {
                .welkom-about .about-row {
                    flex-direction: row;
                    align-items: center;
                    gap: 32px;
                }

                .welkom-about .about-text {
                    flex: 1 1 55%;
                }

                .welkom-about .about-image {
                    flex: 0 0 40%;
                }

                /* houd grid enkel kolom voor .single-column variant; andere grids kunnen eigen layout hebben */
                .welkom-grid:not(.single-column) {
                    grid-template-columns: repeat(2, 1fr);
                }

                .welkom-grid.single-column {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }

                .welkom-grid.single-column #welkom-cell-1 {
                    grid-column: 1 / -1; /* laat introductieblok over de volledige breedte lopen */
                }

                /* Simpler float-based layout: image floats right so text wraps around it.
                   Keeps layout simple and predictable. */
                .jamina-cell {
                    display: block;
                    padding: 12px;
                }

                /* On wider screens use a viewport-relative size but cap at 290px so image never exceeds desired max */
                .jamina-image {
                    float: right;
                    margin: 0 0 8px 14px; /* top/right/bottom/left — space between image and text */
                    /* clamp(min, preferred, max) with final cap 290px */
                    width: clamp(160px, 18vw, 290px);
                    max-width: 290px;
                }

                .welkom-cell.video-cell {
                    align-items: flex-start;
                    justify-content: flex-end;
                }

                .welkom-video-block {
                    align-items: flex-end;
                    width: 100%;
                }

                .welkom-video {
                    width: clamp(160px, 18vw, 290px);
                    max-width: 290px;
                    margin: 0 0 8px auto;
                }
            }

            @media (min-width: 1024px) {
                .welkom-layout {
                    flex-direction: row;
                    align-items: flex-start;
                    gap: 32px;
                }

                .welkom-primary {
                    flex: 1 1 0;
                }

                .welkom-sidebar {
                    flex: 0 0 360px;
                }
            }
            

            /* Mobile adjustments: stack and make jamina-image flow with document */
            @media (max-width: 799px) {
                .welkom-grid {
                    grid-template-columns: 1fr;
                }

                /* .jamina-image uses the base/mobile-friendly rule defined above; no override needed here */

                .welkom-cell {
                    padding-bottom: 16px; /* ensure space when image follows */
                }
            }

            .welkom-sidebar .welkom-suggesties {
                padding: 20px;
            }

            .welkom-video-block {
                display: flex;
                flex-direction: column;
                gap: 12px;
                height: 100%;
                align-items: flex-start;
            }

            .welkom-video {
                width: 90%;
                max-width: 400px;
                height: auto;
                display: block;
                margin: 12px auto 0 auto;
                border-radius: 12px;
                background: #000;
            }

            .welkom-cell.video-cell {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Gallery binnen de about sectie */
            .about-gallery {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .about-gallery .about-main img {
                width: 100%;
                height: 260px;
                object-fit: cover;
                border-radius: 8px;
            }

            .about-gallery .about-thumbs {
                display: flex;
                gap: 8px;
            }

            .about-gallery .about-thumbs img {
                width: 23%;
                height: 72px;
                object-fit: cover;
                border-radius: 6px;
                cursor: pointer;
                background: #f3f4f6;
            }

            .about-gallery .about-thumbs img.thumb-active {
                outline: 3px solid #1f2937;
                transform: scale(1.02);
            }

            .prijslijst-link {
                display: inline-block;
                margin-top: 6px;
                color: #1f2937;
                text-decoration: underline;
            }

            .handtekening {
                margin-top: 16px;
                font-weight: 600;
            }

            /* Suggesties in sidebar */
            .welkom-block.welkom-suggesties {
                background: #faf3db;
                border: 1px solid rgba(0, 0, 0, 0.05);
                color: #1f1f1f;
            }

            .welkom-block.welkom-suggesties h3 {
                margin-top: 0;
                margin-bottom: 8px;
                color: inherit;
            }

            .welkom-block.welkom-suggesties > p {
                margin: 0 0 16px 0;
                color: rgba(31, 31, 31, 0.85);
            }

            .suggestions-list {
                display: grid;
                grid-template-columns: 1fr;
                gap: 16px 10px;
                justify-items: center;
            }

            .suggestion-card {
                padding: 12px;
                border-radius: 10px;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82));
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
                border: 1px solid rgba(0, 0, 0, 0.05);
                width: min(100%, 320px);
                justify-self: center;
            }

            .suggestion-card.placeholder {
                background: rgba(255, 255, 255, 0.5);
                box-shadow: none;
                border-style: dashed;
            }

            .suggestion-card .product-link,
            .suggestion-card .product-link:link,
            .suggestion-card .product-link:visited {
                text-decoration: none;
                color: inherit;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .suggestion-card .product-link:hover,
            .suggestion-card .product-link:focus {
                text-decoration: none;
                outline: none;
            }

            .suggestion-card .product-img-wrap {
                position: relative;
                border-radius: 8px;
                overflow: hidden;
                min-height: 140px;
                background: #e2e8f0;
            }

            .suggestion-card .suggestion-image {
                width: 100%;
                height: 100%;
                max-height: 180px;
                object-fit: cover;
                display: block;
            }

            .suggestion-card .product-overlay {
                position: absolute;
                left: 10px;
                bottom: 10px;
                background: rgba(0, 0, 0, 0.65);
                color: #fff;
                padding: 6px 10px;
                border-radius: 4px;
                font-weight: 600;
                font-size: 0.92rem;
            }

            .suggestion-card .suggestion-body {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .suggestion-card .suggestion-title {
                font-weight: 700;
                color: #1f2937;
            }

            .suggestion-card .suggestion-desc {
                color: #475569;
                font-size: 0.95rem;
            }

            @media (min-width: 640px) and (max-width: 1023px) {
                .suggestions-list {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    justify-content: center;
                }

                .suggestion-card {
                    width: min(100%, 320px);
                }
            }

            @media (max-width: 639px) {
                .suggestions-list {
                    grid-template-columns: 1fr;
                }

                .suggestion-card {
                    width: min(100%, 320px);
                }
            }

            @media (min-width: 1024px) {
                .suggestions-list {
                    grid-template-columns: 1fr;
                    justify-items: stretch;
                    justify-content: stretch;
                }

                .suggestion-card {
                    width: 100%;
                    justify-self: stretch;
                }
            }

            /* Light callout box for small highlighted sections (e.g. Ter plaatse eten) */
            .callout-box {
                background: #f8fafc; /* very light blue-gray */
                border-radius: 10px;
                padding: 14px 16px;
                margin: 10px 0 0 0;
                border: 1px solid rgba(31,41,55,0.04);
            }

            /* Takeaway variant: use same light gray background and border as the default callout */
            .callout-box.takeaway {
                background: #f8fafc; /* same as .callout-box */
                border-radius: 10px;
                padding: 14px 16px;
                margin: 10px 0 0 0;
                border: 1px solid rgba(31,41,55,0.04);
            }

            /* Important lines inside any callout — bold and green */
            .callout-box .callout-important {
                font-weight: 700;
                font-size: 1.02rem;
                color: #16a34a; /* green */
                margin: 6px 0;
            }

            /* Ensure the h4 inside callout is visually connected */
            .callout-box h4 {
                margin: 0 0 8px 0;
                font-size: 1.05rem;
                color: inherit;
            }

            /* Surrounding container for the suggestions section to visually separate it */

            /* legacy container classes no longer used but retained empty to avoid layout issues if referenced elsewhere */
            .suggestions-container,
            .suggestions-bleed {
                display: contents;
            }

        /* (Welcome hero styles removed — hero was moved to footer as decorative image) */
