/*
 * Aanvullende styling voor 1:1 overgenomen Magento-content (.magento-content).
 *
 * De eigenlijke thema-typografie (Roboto 16/26, koppen, knoppen, kleuren, section-title, Poco-hulpklassen)
 * komt uit public/css/magento-pagebuilder.css — automatisch geëxtraheerd uit de thema-CSS en de
 * gegenereerde Poco-configuratie van de oude site, gescoped onder .magento-content.
 *
 * Dit bestand bevat alleen: neutralisatie van Bulma-resets binnen de content, de titelbalk
 * (page-title-wrap) en kleine aanvullingen zonder equivalent in de geëxtraheerde CSS.
 */

.magento-content { -webkit-font-smoothing: antialiased; }

/* Bulma's minireset zet lijsten/strong/koppen terug; herstel de browser-/Magento-defaults */
.magento-content strong, .magento-content b { color: inherit; font-weight: 700; }
.magento-content ul, .magento-content ol { margin: 0 0 25px 25px; padding: 0; }
.magento-content ul { list-style: disc; }
.magento-content ol { list-style: decimal; }
.magento-content ul ul { list-style: circle; }
.magento-content li { margin-bottom: 5px; }
.magento-content li > ul, .magento-content li > ol { margin-top: 5px; margin-bottom: 0; }
.magento-content p { margin: 0 0 10px; line-height: 22px; }
.magento-content [data-content-type='text'] p:last-child { margin-bottom: 0; }

.magento-content img { max-width: 100%; height: auto; }
.magento-content figure { margin: 0; }
.magento-content hr { border: 0; border-top: 1px solid #d1d1d1; margin: 20px 0; }
.magento-content table { border-collapse: collapse; width: 100%; }
.magento-content iframe, .magento-content video { max-width: 100%; }

/* Poco .image-height-section: beige ::before-vlak (absoluut) achter de rij. Zorg dat de inhoud
   (tekstkolommen én de foto) er vóór staat, zoals op de oude site. */
.magento-content .image-height-section > .row-full-width-inner,
.magento-content .image-height-section > [data-element='inner'],
.magento-content .image-height-section > .pagebuilder-column-group { position: relative; z-index: 1; }
.magento-content .image-height-section::before { z-index: 0; }

/* Testimonials (Magebees Testimonial-widget, zoals op de live homepage) */
.magento-content .mageTestimonials { max-width: 1440px; margin-left: auto; margin-right: auto; padding: 0 20px; text-align: center; }
.magento-content .mageTestimonials .section-title { align-items: center; }
.magento-content .magetmQuotes { position: relative; padding: 15px 57px; margin: 0 0 15px; text-align: center; font-size: 20px; line-height: 36px; color: #232323; max-width: 900px; margin-left: auto; margin-right: auto; }
.magento-content .magetmQuotes::before, .magento-content .magetmQuotes::after { content: '\201C'; position: absolute; top: 0; font-size: 60px; line-height: 1; color: #0e2050; opacity: .25; font-family: Georgia, serif; }
.magento-content .magetmQuotes::before { left: 10px; }
.magento-content .magetmQuotes::after { content: '\201D'; right: 10px; }
.magento-content .mageTmRating { color: #f5b301; font-size: 22px; letter-spacing: 3px; margin-bottom: 10px; }
.magento-content .mageTmClient { text-align: center; }
.magento-content .mageTmClient .clientname { font-size: 16px; color: #0e2050; }
.magento-content .mageTmClient .clientname b { font-weight: 700; }
.magento-content .mageTmClient .mageTmComp { color: #6f6f6f; }
.magento-content .mageTestimonials .swiper-pagination { position: static; margin-top: 20px; }
.magento-content .mageTestimonials .swiper-pagination-bullet-active { background: #0e2050; }

/* Fotoalbum (Magezon ImageGallery, merkpagina's) */
.magento-content .imagegallery-album { width: 100%; max-width: 1440px; min-width: 0; margin: 0 auto 60px; padding: 0 20px; box-sizing: border-box; }
.magento-content .imagegallery-album .swiper, .magento-content .pb-generic-swiper { width: 100%; min-width: 0; overflow: hidden; }
/* Sliders binnen een flex-kolom (Page Builder-rij) mogen nooit breder worden dan hun rij */
.magento-content .pb-block .swiper { max-width: 100%; }
.magento-content .imagegallery-album .imagegallery-album-image { display: block; overflow: hidden; }
.magento-content .imagegallery-album img { width: 100%; height: auto; display: block; transition: transform .3s ease; }
.magento-content .imagegallery-album .imagegallery-album-image:hover img { transform: scale(1.05); }
.magento-content .imagegallery-album .swiper-button-prev,
.magento-content .imagegallery-album .swiper-button-next { color: #0e2050; }

/* FAQ-accordeon (Poco .accordian-content) */
.magento-content .accordian-content .accordion { position: relative; padding-right: 30px; }
.magento-content .accordian-content .accordion::after { content: '+'; position: absolute; right: 0; top: 0; font-weight: 400; color: #0e2050; }
.magento-content .accordian-content .accordion.active::after { content: '\2212'; }
.magento-content .accordian-content .accordion-panel { padding: 10px 0 20px; }

/* Ooggezondheidsonderzoek: slottekst op leesbare breedte, knoppen gecentreerd (lokaal opgeschoond, blok is locked) */
.magento-content .ogo-detail { max-width: 960px; margin: 0 auto; padding: 60px 20px 10px; }
.magento-content .ogo-detail h2 { font-size: 28px; margin: 40px 0 15px; }
.magento-content .ogo-detail h2:first-child { margin-top: 0; }
.magento-content .ogo-detail p, .magento-content .ogo-detail li { font-size: 16px; line-height: 26px; }
.magento-content .ogo-detail ul { margin: 0 0 25px 22px; }
.magento-content .ogo-detail ~ [data-content-type='buttons'] { max-width: 960px; margin: 0 auto; padding: 0 20px; text-align: left; }
.magento-content .ogo-detail ~ [data-content-type='buttons'] [data-content-type='button-item'] { display: inline-block; margin: 0 10px 10px 0; }
.magento-content .ogo-detail ~ [data-content-type='buttons']:last-of-type { padding-bottom: 20px; }

/* Eigen blokken (Page Builder-markup): kleine aanvullingen */
.magento-content .pb-spacing-klein { margin-bottom: 40px; }
.magento-content .pb-block .pb-tekst > p:last-child { margin-bottom: 0; }
/* Koppen in tekstblokken: h3 als tussenkop (de h2 blijft de sectiekop) */
.magento-content .pb-block .pb-tekst h3 { font-size: 22px; font-weight: 700; line-height: 1.4; margin: 30px 0 12px; color: #0e2050; }
.magento-content .pb-block .pb-tekst h3:first-child { margin-top: 0; }
.magento-content .pb-block .pb-tekst ul, .magento-content .pb-block .pb-tekst ol { margin: 0 0 20px 22px; padding: 0; }
.magento-content .pb-block .pb-tekst li { margin-bottom: 6px; line-height: 1.6; }
.magento-content .pb-block .pb-tekst--klein { font-size: 14px; line-height: 22px; }
.magento-content .pb-block .pb-tekst--klein p { font-size: 14px; line-height: 22px; }
/* Ankers: niet onder de sticky navbar (80px) landen */
.magento-content .pb-block[id], .magento-content .pb-urgentie[id], .magento-content .pb-faq[id], .magento-content .pb-ankerlijst[id] { scroll-margin-top: 100px; }

/* Urgentie-/attentiekader */
.magento-content .pb-urgentie { display: flex; gap: 18px; padding: 24px 28px; border-left: 5px solid; border-radius: 4px; background: #f7f5f4; color: #232323; }
.magento-content .pb-urgentie--smal { max-width: 860px; }
.magento-content .pb-urgentie--spoed { border-color: #c0392b; background: #fdf3f2; }
.magento-content .pb-urgentie--letop { border-color: #d98c1f; background: #fdf7ec; }
.magento-content .pb-urgentie--info { border-color: #0e2050; background: #f3f5fa; }
.magento-content .pb-urgentie__icoon { flex: 0 0 auto; font-size: 28px; line-height: 1; padding-top: 2px; }
.magento-content .pb-urgentie--spoed .pb-urgentie__icoon { color: #c0392b; }
.magento-content .pb-urgentie--letop .pb-urgentie__icoon { color: #d98c1f; }
.magento-content .pb-urgentie--info .pb-urgentie__icoon { color: #0e2050; }
.magento-content .pb-urgentie__kop { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: inherit; line-height: 1.4; }
.magento-content .pb-urgentie .pb-tekst { font-size: 16px; line-height: 26px; }
.magento-content .pb-urgentie .pb-tekst p { margin: 0 0 10px; }
.magento-content .pb-urgentie .pb-tekst p:last-child { margin-bottom: 0; }
.magento-content .pb-urgentie .pb-tekst ul { margin: 6px 0 10px 20px; }
.magento-content .pb-urgentie .pb-tekst a { color: inherit; text-decoration: underline; }
@media (max-width: 599px) { .magento-content .pb-urgentie { padding: 18px 18px; gap: 12px; } .magento-content .pb-urgentie__icoon { font-size: 22px; } }

/* Ankerlijst / inhoudsopgave */
.magento-content .pb-ankerlijst__items { list-style: none; margin: 0; padding: 0; }
.magento-content .pb-ankerlijst__items li { border-top: 1px solid #e5e5e5; }
.magento-content .pb-ankerlijst__items li:last-child { border-bottom: 1px solid #e5e5e5; }
.magento-content .pb-ankerlijst__items a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 4px; color: #0e2050; text-decoration: none; transition: background .15s; }
.magento-content .pb-ankerlijst__items a:hover { background: #f7f5f4; }
.magento-content .pb-ankerlijst__tekst { font-weight: 700; font-size: 17px; }
.magento-content .pb-ankerlijst__tekst::before { content: '→ '; color: #737384; }
.magento-content .pb-ankerlijst__omschrijving { color: #737384; font-size: 15px; }
.magento-content .pb-ankerlijst__items--kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.magento-content .pb-ankerlijst__items--kaarten li, .magento-content .pb-ankerlijst__items--kaarten li:last-child { border: 1px solid #e5e5e5; border-radius: 4px; }
.magento-content .pb-ankerlijst__items--kaarten a { flex-direction: column; align-items: flex-start; padding: 18px 20px; height: 100%; }

/* Tussenkopjes in tekstblokken (uit Poco: fw-600 text-medium-18) */
.magento-content .pb-block .pb-tekst h4 { font-size: 18px; font-weight: 600; line-height: 1.5; margin: 0 0 10px; color: inherit; }
.magento-content .pb-block .pb-knoppen { margin-top: 20px; }
.magento-content .pb-block .pb-knoppen [data-content-type='button-item'] { display: inline-block; margin: 0 10px 10px 0; }
.magento-content .pb-block .section-title + .pb-tekst { margin-top: 0; }
.magento-content .pb-col-tekst { padding-right: 40px; }
.magento-content .pagebuilder-column:first-child.pb-col-tekst { padding-right: 60px; padding-left: 0; }
.magento-content .pagebuilder-column:last-child.pb-col-tekst { padding-left: 60px; padding-right: 0; }
/* Gelijke goten: alle kolommen 15px links en rechts, de rij compenseert dat aan de buitenkant */
.magento-content .pagebuilder-column-line.pb-winkels { margin-left: -15px; margin-right: -15px; width: calc(100% + 30px) !important; }
.magento-content .pb-winkels .pagebuilder-column { padding: 0 15px; box-sizing: border-box; }
.magento-content .pb-winkel figure { margin: 0 0 15px; }
.magento-content .pb-winkel .pb-winkel-uren { color: #737384; font-size: 14px; line-height: 22px; }
.magento-content .pb-winkel .pb-knoppen { margin-top: 10px; }
.magento-content .pb-merken .pb-merk { padding: 0 0 20px; }
.magento-content .pb-merken .pb-merk figure { margin: 0; }
.magento-content .pb-merk-naam-tegel { display: flex; align-items: center; justify-content: center; aspect-ratio: 600 / 513; background: #f7f5f4; color: #0e2050; font-weight: 700; font-size: 18px; text-transform: uppercase; text-align: center; padding: 20px; }
.magento-content .pb-merk-naam { text-align: center; margin: 10px 0 0; font-weight: 600; }
.magento-content .pb-merk-naam a { color: #0e2050; }
/* Fotokolom naast een tekstvlak (winkel-afspraakblok): foto vult de volledige hoogte van het vlak */
.magento-content .pb-col-foto { position: relative; min-height: 360px; }
.magento-content .pb-col-foto figure { position: absolute; inset: 0; margin: 0; }
.magento-content .pb-col-foto figure a { display: block; height: 100%; }
.magento-content .pb-col-foto img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
@media (max-width: 767px) {
    .magento-content .pb-col-foto { min-height: 0; }
    .magento-content .pb-col-foto figure { position: static; }
    .magento-content .pb-col-foto img { height: auto !important; }
}
.magento-content .pb-kolom-icoon img { width: 44px; height: auto; }
.magento-content .pb-kolom-icoon .icon { font-size: 44px; color: #0e2050; }
@media (max-width: 767px) {
    .magento-content .pb-block .pagebuilder-column-line { flex-wrap: wrap; }
    .magento-content .pb-block .pagebuilder-column { width: 100% !important; }
    .magento-content .pb-col-leeg { display: none; }
    .magento-content .pagebuilder-column.pb-col-tekst { padding: 20px 0 0 !important; }
    /* Poco verbergt <br> in icoon-tekstblokken op mobiel; adres en openingstijden hebben ze juist nodig */
    .magento-content .icon-text .details p br { display: inline !important; }
    /* Rijen over de volle schermbreedte: tekst niet tegen de schermrand */
    .magento-content .pb-block[data-appearance='full-bleed'] .pagebuilder-column [data-content-type='text'],
    .magento-content .pb-block[data-appearance='full-bleed'] .pagebuilder-column [data-content-type='buttons'] { padding-left: 20px; padding-right: 20px; }
    .magento-content .pb-block[data-appearance='full-bleed'] .pagebuilder-column .p-12 { padding: 30px 20px !important; }
}

/* Ruimte boven de footer, gemeten op de oude site: CMS-pagina's 80px, categoriepagina's 200px */
main > div.magento-content:last-of-type { margin-bottom: 80px; }
main > div.magento-content.category-view:last-of-type { margin-bottom: 200px; }

/* De Laravel-layout heeft een eigen .section-title (blauwe streep links); Poco's .section-title heeft dat niet */
.magento-content .section-title { border-left: 0 !important; padding-left: 0 !important; }

/* Knoppen die als <a> zonder .action-klasse voorkomen (banner-slider) */
.magento-content .btn_one { display: inline-block; text-decoration: none; cursor: pointer; }
.magento-content a.pagebuilder-button-primary:hover,
.magento-content a.pagebuilder-button-secondary:hover,
.magento-content .action.primary:hover { text-decoration: none; }

/* Poco contactpagina (structuur zoals greving.nl/contact) */
.magento-content .contact-info .flex-1 { padding: 0 20px; }
.magento-content .contact-info .icon { color: #0e2050; display: block; width: auto; text-align: center; margin: 0 auto 15px; }
.magento-content .contact-info h4 { font-size: 18px; margin: 0 0 10px; }
.magento-content .contact-info p, .magento-content .contact-info div.gray-color { font-size: 16px; line-height: 26px; }
.magento-content .contact-info a { color: #737384; }
/* Foto links, beige formuliervlak rechts: even hoog, foto vult de kolom (object-fit) */
.magento-content .form-image-section { display: flex; flex-direction: row; align-items: stretch; }
.magento-content .form-image-section > .flex-1 { flex: 1 1 50%; min-width: 0; align-self: stretch !important; }
.magento-content .contact-form-image { position: relative; min-height: 520px; }
.magento-content .contact-form-image .img { position: absolute; inset: 0; height: 100%; }
.magento-content .contact-form-image .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.magento-content .contact-form-default { background: #f7f5f4; display: flex; align-items: center; justify-content: center; }
.magento-content .contact-form-default > .w-100 { padding: 80px 90px !important; max-width: 760px; }
.magento-content .contact-form-default h2 { font-size: 36px; font-weight: 800; color: #0e2050; margin: 0 0 8px; }
.magento-content .contact-form-default .form-intro { color: #737384; font-size: 16px; line-height: 26px; margin: 0 0 30px; }
.magento-content .contact-form-default .field { margin-bottom: 15px; }
.magento-content .contact-form-default .input-text { width: 100%; height: 56px; padding: 0 20px; font-family: inherit; font-size: 16px; color: #232323; background: #fff; border: 1px solid #fff; border-radius: 0; box-sizing: border-box; transition: border-color .15s; }
.magento-content .contact-form-default .input-text:focus { outline: none; border-color: #0e2050; }
.magento-content .contact-form-default .input-text::placeholder { color: #8a8a96; }
.magento-content .contact-form-default textarea.input-text { height: auto; min-height: 150px; line-height: 26px; padding: 15px 20px; resize: vertical; }
.magento-content .contact-form-default .field-row { display: flex; gap: 15px; }
.magento-content .contact-form-default .field-row > .field { flex: 1 1 0; min-width: 0; }
.magento-content .contact-form-default .help.is-danger { color: #c0392b; font-size: 14px; line-height: 20px; margin-top: 6px; }
.magento-content .contact-form-default .field.has-error .input-text { border-color: #c0392b; background: #fff7f6; }
.magento-content .contact-form-default .form-error-summary { background: #fff; border-left: 4px solid #c0392b; padding: 15px 20px; margin-bottom: 25px; color: #232323; font-size: 15px; line-height: 24px; }
.magento-content .contact-form-default .form-error-summary strong { display: block; color: #c0392b; }
.magento-content .contact-form-default .form-error-summary ul { margin: 6px 0 0 18px; padding: 0; list-style: disc; }
.magento-content .contact-form-default .actions-toolbar { margin-top: 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.magento-content .contact-form-default .form-note { color: #8a8a96; font-size: 14px; margin: 0; }
.magento-content .contact-form-default .form-success { background: #fff; border-left: 4px solid #0e2050; padding: 15px 20px; margin-bottom: 25px; color: #232323; }
@media (max-width: 1199px) {
    .magento-content .contact-form-default > .w-100 { padding: 60px 50px !important; }
}
@media (max-width: 991px) {
    .magento-content .form-image-section { flex-direction: column; }
    .magento-content .form-image-section > .flex-1 { flex: 0 0 auto !important; } /* Poco zet hier 1 0 100% !important */
    .magento-content .form-image-section > .contact-form-image { min-height: 0; height: 360px; flex-basis: 360px !important; }
    .magento-content .contact-form-default > .w-100 { padding: 50px 30px !important; max-width: none; }
    .magento-content .contact-form-default .field-row { flex-direction: column; gap: 0; }
    .magento-content .contact-info { flex-wrap: wrap; }
    .magento-content .contact-info .flex-1 { flex: 1 0 50%; margin-bottom: 30px; }
}
@media (max-width: 599px) {
    .magento-content .contact-info .flex-1 { flex: 1 0 100%; }
}

/* Poco contactpagina: USP-rij en afspraak-balk */
.magento-content .contact-info-features { gap: 30px; padding: 40px 0; }
.magento-content .contact-info-features h4 { font-size: 18px; font-weight: 600; text-transform: uppercase; color: #0e2050; margin: 0 0 8px; }
.magento-content .fs-40 { font-size: 40px; line-height: 1.1; }
.magento-content .fw-700 { font-weight: 700; }
.magento-content .fw-600 { font-weight: 600; }
.magento-content .text-uppercase { text-transform: uppercase; }
.magento-content .text-center { text-align: center; }
.magento-content .d-flex { display: flex; }
.magento-content .flex-1 { flex: 1 1 0; }
.magento-content .align-item-start { align-items: flex-start; }
.magento-content .align-items-center { align-items: center; }
.magento-content .justify-space-between { justify-content: space-between; }
.magento-content .mb-0 { margin-bottom: 0; }
.magento-content .mb-1 { margin-bottom: 10px; }
.magento-content .mb-2 { margin-bottom: 20px; }
@media (max-width: 767px) {
    .magento-content .contact-info-features,
    .magento-content .d-flex.justify-space-between { flex-direction: column; gap: 20px; }
    .magento-content .fs-40 { font-size: 28px; }
}

/* Paginatitel (content_heading, zelden gebruikt) */
.magento-content .page-title-wrapper { max-width: 1440px; margin: 0 auto; padding: 30px 20px 0; }
.magento-content .page-title { font-size: 36px; font-weight: 700; color: #0e2050; margin: 0 0 20px; }

/* ── Titelbalk boven pagina's/categorieën (Poco .page-title-wrap) ─────────────
   Gemeten op de oude site: bg #f5f5f5, banner 1920x415 full-width, titel 44px/66px 800 uppercase #0e2050,
   breadcrumbs 16px/500 #64646d, tekstblok absoluut verticaal gecentreerd met 20px zijmarge, 90px marge eronder. */
.page-title-wrap {
    position: relative;
    background: #f5f5f5;
    margin: 0 0 90px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}
.page-title-wrap > img.image { display: block; width: 100%; height: auto; }
.page-title-wrap.has-banner .page-title-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 0 20px;
}
.page-title-wrap.no-banner .page-title-wrapper { padding: 60px 20px; }
.page-title-wrap .page-title {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 44px;
    line-height: 66px;
    font-weight: 800;
    text-transform: uppercase;
    color: #0e2050;
    margin: 0;
}
.page-title-wrap .breadcrumbs { margin: 10px 0 0; font-size: 16px; font-weight: 500; line-height: 26px; color: #64646d; }
.page-title-wrap .breadcrumbs ul { list-style: none; margin: 0; padding: 0; }
.page-title-wrap .breadcrumbs li { display: inline; }
.page-title-wrap .breadcrumbs li + li::before { content: '/'; margin: 0 8px; color: #64646d; }
.page-title-wrap .breadcrumbs a, .page-title-wrap .breadcrumbs strong { color: #64646d; font-weight: 500; text-decoration: none; }
.page-title-wrap .breadcrumbs a:hover { color: #0e2050; }
@media (max-width: 991px) {
    .page-title-wrap { margin-bottom: 40px; }
    .page-title-wrap .page-title { font-size: 28px; line-height: 36px; }
    .page-title-wrap .breadcrumbs { font-size: 14px; }
}
@media (max-width: 599px) {
    .page-title-wrap.has-banner .page-title-wrapper { position: static; transform: none; padding: 20px; }
    .page-title-wrap .page-title { font-size: 22px; line-height: 28px; }
}

/* Page Builder-rijen: 'contained' krijgt dezelfde zijmarge als de oude site op kleinere schermen */
.magento-content [data-content-type='row'][data-appearance='contained'] { padding-left: 20px; padding-right: 20px; }
@media (min-width: 1480px) {
    .magento-content [data-content-type='row'][data-appearance='contained'] { padding-left: 0; padding-right: 0; }
}

/* Video's en iframes (Page Builder video) */
.magento-content [data-content-type='video'] .pagebuilder-video-inner { position: relative; }
.magento-content [data-content-type='video'] iframe { display: block; }

/* Slider via Swiper: pijlen/bolletjes in themakleur */
.magento-content .pb-swiper { overflow: hidden; }
.magento-content .pb-swiper .swiper-button-prev,
.magento-content .pb-swiper .swiper-button-next { color: #0e2050; }
.magento-content .pb-swiper .swiper-pagination-bullet-active { background: #0e2050; }

/* Fallback zolang JS nog niet gedraaid heeft: verberg geen content */
.magento-content [data-content-type] { visibility: visible; }