/*
Theme Name:Child Theme for Divi
Theme URI: http://wordpress-style.net
Description: Child Theme For Divi
Author: Eduard Ungureanu
Author URI: http://wordpress-style.net
Template: Divi
Version: 1.0
*/

/* Start your custom CSS bellow this comment
============================================ */

#footer-info a{
	color: #ffb400 !important;
}

/* Back to top button in footer */
.et_pb_image_1_tb_footer {
	cursor: pointer;
}

/* Order Now link revealed under the Favorites tiles on hover.
   The tile itself (.et_pb_blurb) translateY(-40px)'s on hover via Divi's
   own module settings, leaving a 40px gap at the bottom of the (static)
   column - this link fills that gap. */
.franggo-order-now-link {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	text-decoration: underline;
	color: #739B54;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease 0ms;
}
.et_pb_column:hover .franggo-order-now-link {
	opacity: 1;
	pointer-events: auto;
}

/* Houd de tegel omhoog zolang de muis ergens in de kolom is.

   Divi hangt de lift aan de tegel zelf:
       .et_pb_blurb_0:hover { transform: translateX(0px) translateY(-40px)!important }
   Die tegel schuift daardoor onder de cursor vandaan. Tussen de onderkant
   van de omhoog geschoven tegel en de ORDER NOW-link zit een dode zone van
   ~22px; zodra de muis daarin komt vervalt :hover, zakt de tegel terug,
   ligt hij weer onder de cursor, lift hij opnieuw - flikkeren, en de link
   is nauwelijks te bereiken. De kolom zelf beweegt niet en is dus een
   stabiele trigger voor het hele pad tegel -> link.

   Specificiteit 0,3,0 tegen Divi's 0,2,0, plus !important omdat Divi's
   eigen regel die ook heeft. */
.franggo-fav-col:hover .franggo-fav-tile {
	transform: translateX(0px) translateY(-40px) !important;
}

/* PICK-UP / DELIVERY labels on the existing green/pink header tab.
   The tab's own size and position are untouched - the labels are just
   overlaid on top of it, scaled with the image itself via %/em units. */
.franggo-tab-wrap {
	position: relative;
	display: block;
}
.franggo-tab-label {
	position: absolute;
	/* Original vertical position - do not change. Only the horizontal
	   position is tuned, to line up with the visual center of each shape's
	   rounded bottom edge. */
	top: 38%;
	transform: translate(-50%, -50%);
	font-family: Inter, Helvetica, Arial, Lucida, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
	font-size: 11px;
	letter-spacing: 0;
	white-space: nowrap;
	text-decoration: none;
	pointer-events: auto;
}
.franggo-tab-label--pickup {
	left: 33.7%;
}
.franggo-tab-label--delivery {
	left: 78.1%;
}

/* ===================================================================
   TIJDELIJK - mobiele verbouwing augustus 2026.
   Nieuwe mobiel-only secties dragen de class .franggo-mobile-wip en
   blijven daarmee onzichtbaar voor bezoekers zolang de bouw loopt.
   BIJ OPLEVERING: deze regel verwijderen (de class mag blijven staan,
   die is dan verder inert).
   =================================================================== */
/* De WIP-rem is verwijderd bij oplevering op 2026-08-16. De class
   .franggo-mobile-wip blijft op de secties staan als herkenningspunt voor
   build_mobile.py, maar heeft verder geen effect meer. */

/* ===================================================================
   MOBIELE OPMAAK (telefoon, max-width 767px)
   Hoort bij de mobiel-only Divi-secties (disabled_on="off|on|on").
   Die secties bestaan alleen op telefoon - Divi verbergt ze zelf op
   tablet en desktop. Alles hieronder staat bovendien in een media
   query en is gescoped op .franggo-m-* classes, zodat de desktop-
   weergave er langs geen enkele weg door geraakt kan worden.
   Maten komen uit de mockup: ontwerpbreedte 700px, schaal 390/700.
   =================================================================== */
@media (max-width: 767px) {

	/* Divi stapelt kolommen onder 980px. Deze twee rijen moeten juist
	   naast elkaar blijven staan, zoals in de mockup. */
	.franggo-m-header-row,
	.franggo-m-hero-row {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.franggo-m-header-row > .et_pb_column,
	.franggo-m-hero-row > .et_pb_column {
		width: 50% !important;
		margin: 0 !important;
		float: none !important;
	}

	/* --- header --- header is 120px hoog op 700px ontwerpbreedte = 17,1vw */
	.franggo-m-header-left,
	.franggo-m-header-right {
		display: flex !important;
		align-items: center !important;
		min-height: 17.1vw;
	}
	.franggo-m-header-right {
		justify-content: flex-end !important;
	}
	.franggo-m-logo {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 6% !important;
	}
	.franggo-m-logo img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* hamburger rechts uitlijnen in het oranje vlak, zwart zoals in de mockup */
	.franggo-m-menu {
		width: 100% !important;
		margin: 0 !important;
	}
	.franggo-m-menu .et_pb_menu__wrap {
		justify-content: flex-end !important;
	}
	.franggo-m-menu .et_mobile_nav_menu {
		margin: 0 6% 0 0 !important;
		float: none !important;
	}
	.franggo-m-menu .mobile_menu_bar:before {
		color: #000000 !important;
		font-size: 34px;
	}
	.franggo-m-menu .et_pb_menu__logo-wrap {
		display: none !important;
	}

	/* --- hero: foto links, zwart tekstpaneel rechts --- */
	.franggo-m-hero-left {
		padding: 0 !important;
	}
	.franggo-m-hero-left .et_pb_module,
	.franggo-m-hero-left .et_pb_image_wrap {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		display: block;
	}
	.franggo-m-hero-left img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block;
	}
	/* Niet centreren: het ontwerp heeft vaste afstanden.
	   49/700 = 7vw boven, 54/700 = 7,7vw onder de kop, 49/700 = 7vw
	   onder de body. */
	.franggo-m-hero-right {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		padding-top: 7vw !important;
	}
	.franggo-m-hero-right .franggo-m-hero-head { margin-bottom: 7.7vw !important; }
	.franggo-m-hero-right .franggo-m-hero-body { margin-bottom: 7vw !important; }
	.franggo-m-hero-right .et_pb_module {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Foto-uitsnede. Home-Franggo.jpg is 2560x1010; in dit smalle vak is
	   maar 26% van de breedte zichtbaar, dus alleen de horizontale positie
	   telt. Het bord met de saus zit rond x=1900 van 2560 = 83%. */
	.franggo-m-hero-left img {
		object-position: 83% 50% !important;
	}

	/* ORDER NOW: mockup 289/350 van het paneel = 82,6% breed */
	.franggo-m-hero-right .franggo-m-btn {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		box-sizing: border-box;
	}
	.franggo-m-hero-right .franggo-m-btn:after {
		display: none !important;
	}

	/* hero-hoogte uit de mockup: 530 van 700 ontwerpbreedte = 75,7vw.
	   Vaste hoogte met verticaal gecentreerde tekst, zoals in het ontwerp. */
	.franggo-m-hero-row,
	.franggo-m-hero-row > .et_pb_column {
		min-height: 75.7vw;
	}

	/* Donkergrijze tussenstrip onder de header (mockup y120-150 = 30/700). */
	.et_pb_section.franggo-m-hero {
		padding-top: 4.3vw !important;
	}

	/* Lettergewichten hier, niet als *_font in de Divi-moduleopties: die
	   laten Divi sitebreed overschakelen van het variabele Inter naar losse
	   statische varianten, wat de rasterisatie op desktop verandert. */
	.franggo-m-hero-head h2 { font-weight: 700; }
	.franggo-m-btn { font-weight: 700; }
	.franggo-m-menu .et-menu li a { font-weight: 600; }

	/* --- Favorites: tegels in een 2-koloms raster ---
	   Mockup: buitenmarge 30 en goot 30 van 700 ontwerpbreedte = 4,29vw.
	   Kop en knop lopen over beide kolommen. */
	.franggo-m-fav-row {
		padding: 0 4.29vw !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.franggo-m-fav-col {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		column-gap: 4.29vw;
		row-gap: 5vw;
		align-items: start;
	}
	.franggo-m-fav-col > .et_pb_text,
	.franggo-m-fav-col > .et_pb_button_module_wrapper {
		grid-column: 1 / -1;
	}
	.franggo-m-fav-col > .et_pb_module {
		margin-bottom: 0 !important;
	}
	.franggo-m-fav-tile .et_pb_main_blurb_image {
		margin-bottom: 8px;
	}
	.franggo-m-fav-tile .et_pb_main_blurb_image img {
		/* Mockup-tegel is 305x269 ontwerp-px; de bronfoto's hebben een
		   andere verhouding, dus bijsnijden op die van het ontwerp. */
		width: 100%;
		aspect-ratio: 305 / 269;
		object-fit: cover;
		display: block;
	}

	/* VIEW MENU: mockup 334 van 700 = 47,7vw breed, 90 hoog = 12,9vw */
	.franggo-m-fav-btn {
		display: block !important;
		width: 47.7vw !important;
		margin: 5vw auto 0 !important;
		text-align: center !important;
		box-sizing: border-box;
	}
	.franggo-m-fav-btn:after { display: none !important; }

	/* --- Locations op de homepage: drie oranje adreskaarten ---
	   Mockup: kaart 639 breed van 700 = buitenmarge 4,29vw, 31 ertussen. */
	.franggo-m-loc-row {
		padding: 0 4.29vw !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.franggo-m-loc-head { margin-bottom: 4vw !important; }
	/* Hogere specificiteit dan Divi's eigen .et_pb_text_N-regel, anders
	   wint diens custom_margin met !important en plakken de kaarten aan
	   elkaar tot een enkel oranje vlak. */
	.franggo-m-loc-col .franggo-m-loc-card {
		margin-bottom: 4.43vw !important;
		padding: 4% 5% 4% 5% !important;
	}
	.franggo-m-loc-col .franggo-m-loc-card:last-of-type { margin-bottom: 0 !important; }
	/* Vet zoals in het ontwerp; niet via *_font in de moduleopties, zie boven. */
	.franggo-m-loc-card,
	.franggo-m-loc-card p { font-weight: 600; }
	.franggo-m-loc-card p { margin: 0 !important; }
	.franggo-m-loc-card h4 { margin: 3% 0 0 !important; line-height: 1.4em !important; }
	.franggo-m-loc-card h4 a { color: #000000; text-decoration: underline; }

	/* PICK-UP / DELIVERY labels schalen mee met de schermbrede afbeelding */
	.franggo-m-tabs .franggo-tab-label { font-size: 3.4vw; }

	/* VIEW LOCATIONS: mockup 324 van 700 = 46,3vw */
	.franggo-m-loc-btn {
		display: block !important;
		width: 46.3vw !important;
		margin: 4vw auto 0 !important;
		text-align: center !important;
		box-sizing: border-box;
	}
	.franggo-m-loc-btn:after { display: none !important; }

	/* --- beeld-met-knop blokken (gift card, who we are) ---
	   Beeld schermbreed zoals in de mockup; alleen de knop staat ingesprongen. */
	.franggo-m-ib-row {
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.franggo-m-ib-img { margin: 0 !important; }
	.franggo-m-ib-img img { width: 100%; display: block; }
	.franggo-m-ib-btn {
		display: block !important;
		width: 46.3vw !important;
		margin: 4vw auto 0 !important;
		text-align: center !important;
		box-sizing: border-box;
	}
	.franggo-m-ib-btn:after { display: none !important; }

	/* --- PICK-UP / DELIVERY en Lets go: schermbreed --- */
	.franggo-m-tabs-row,
	.franggo-m-letsgo-row {
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.franggo-m-tabs-img,
	.franggo-m-letsgo-img { margin: 0 !important; }
	.franggo-m-tabs-img img,
	.franggo-m-letsgo-img img { width: 100%; display: block; }

	/* --- Locations-pagina: vestigingskaarten ---
	   Mockup: oranje adresblok 639x213 en de foto eronder even breed
	   (buitenmarge 30/700 = 4,29vw). De ORDER NOW-knop valt over de
	   onderrand van de foto. */
	.franggo-m-loccards-row {
		padding: 0 4.29vw !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.franggo-m-loccards-col .franggo-m-loccard-text {
		margin: 0 !important;
		padding: 4% 5% !important;
		font-weight: 600;
	}
	.franggo-m-loccard-text p { margin: 0 !important; }
	.franggo-m-loccard-text h4 { margin: 2% 0 0 !important; line-height: 1.5em !important; }
	.franggo-m-loccard-text h4 a { color: #000000; text-decoration: underline; }
	.franggo-m-loccard-text h5 { margin: 1% 0 0 !important; line-height: 1.5em !important; }
	.franggo-m-loccards-col .franggo-m-loccard-img { margin: 0 !important; }
	.franggo-m-loccard-img img {
		width: 100%;
		aspect-ratio: 639 / 290;
		object-fit: cover;
		display: block;
	}
	/* Drie bestelknoppen per vestiging (live content), schermbreed onder
	   de foto. De eerste valt over de onderrand van de foto, zoals de
	   ORDER NOW in de mockup. */
	.franggo-m-loccards-col .et_pb_button_module_wrapper {
		position: relative;
		z-index: 2;
		margin: 0 !important;
	}
	/* De eerste knop valt over de foto, zoals de ORDER NOW in de mockup.
	   nth-of-type telde ook de tekst- en beeldmodules mee; de aangrenzende
	   combinator is hier betrouwbaar. */
	.franggo-m-loccard-img + .et_pb_button_module_wrapper {
		margin-top: -5.6vw !important;
	}
	.franggo-m-order-btn {
		display: block !important;
		width: 100% !important;
		margin: 0 0 2vw !important;
		text-align: center !important;
		font-weight: 600;
		box-sizing: border-box;
	}
	.franggo-m-order-btn:after { display: none !important; }
	.franggo-m-loccards-col .franggo-m-loccard-text { margin-top: 7vw !important; }
	.franggo-m-loccards-col > .et_pb_text:first-of-type { margin-top: 0 !important; }
	.franggo-m-loc-head { margin-bottom: 4vw !important; }

	/* --- Contactformulier (careers, faq) ---
	   De verzendknop van Divi stak 13px buiten het scherm (x 283..403 bij
	   een viewport van 390), waardoor die pagina's horizontaal konden
	   scrollen. Knop schermbreed maken lost dat op. Deze regels staan in de
	   mobiele media query en raken de desktopweergave dus niet. */
	.et_pb_contact_form_container .et_pb_contact_submit,
	.et_pb_contact_submit.et_pb_button {
		float: none !important;
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}
	.et_pb_contact_form_container .et_contact_bottom_container {
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		text-align: center !important;
	}
	.et_pb_contact_submit.et_pb_button:after { display: none !important; }

	/* --- Verticale ruimte uit het ontwerp -------------------------------
	   Gemeten in de mockup (ontwerpbreedte 700px) en omgerekend naar vw,
	   zodat het meeschaalt met de schermbreedte:
	     42/700 = 6vw    47/700 = 6,7vw    56/700 = 8vw
	     37/700 = 5,3vw  40/700 = 5,7vw    61/700 = 8,7vw   60/700 = 8,6vw
	   De selectors zijn bewust specifieker dan Divi's eigen
	   .et_pb_section_N / .et_pb_text_N: die zetten custom_margin met
	   !important, en bij gelijke specificiteit wint Divi omdat zijn CSS
	   later in het document staat. */
	.et_pb_section.franggo-m-fav {
		padding-top: 6vw !important;
		padding-bottom: 8vw !important;
	}
	.et_pb_section.franggo-m-loc,
	.et_pb_section.franggo-m-loccards {
		padding-top: 5.3vw !important;
		padding-bottom: 8.7vw !important;
	}
	.et_pb_section.franggo-m-gift,
	.et_pb_section.franggo-m-who {
		padding-bottom: 8.6vw !important;
	}
	.et_pb_section.franggo-m-letsgo {
		padding-top: 6vw !important;
		padding-bottom: 6vw !important;
	}

	.franggo-m-fav-col .franggo-m-fav-head { margin-bottom: 1.8vw !important; }
	.franggo-m-fav-col .franggo-m-fav-btn  { margin-top: 11.4vw !important; }
	.franggo-m-loc-col .franggo-m-loc-head { margin-bottom: 5.7vw !important; }
	.franggo-m-loc-col .franggo-m-loc-btn  { margin-top: 8.7vw !important; }
	.franggo-m-loccards-col .franggo-m-loc-head { margin-bottom: 5.7vw !important; }
	.franggo-m-ib-col .franggo-m-ib-btn    { margin-top: 8.6vw !important; }

	/* --- Kaartsectie op de locations-pagina (schermbreed) --- */
	.franggo-m-map-row {
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.franggo-m-map-col .franggo-m-map-head { margin-bottom: 5.7vw !important; }
	.franggo-m-map-img { margin: 0 !important; }
	.franggo-m-map-img img { width: 100%; display: block; }
	.et_pb_section.franggo-m-map {
		padding-top: 5.3vw !important;
		padding-bottom: 0 !important;
	}

	/* --- "Let's go" kleiner ---------------------------------------------
	   In beide mockups is de kop 407 van 700 ontwerp-px breed = 58,2vw,
	   gecentreerd. De site toont hem op 100%. Op src gericht zodat ook de
	   desktopsectie op who-we-are meegaat, die op telefoon zichtbaar is. */
	/* De maat hoort op de module, niet op de img: op who-we-are is de
	   module maar 87px breed en stak de afbeelding er anders rechts uit. */
	.et_pb_image:has(img[src*="Lets-Go-Footer"]),
	.franggo-m-letsgo-img {
		width: 58.2vw !important;
		max-width: 58.2vw !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.et_pb_image:has(img[src*="Lets-Go-Footer"]) .et_pb_image_wrap,
	.franggo-m-letsgo-img .et_pb_image_wrap {
		width: 100% !important;
		display: block !important;
	}
	img[src*="Lets-Go-Footer"] {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
	.franggo-m-letsgo-col { text-align: center !important; }

	/* --- Footer: back-to-top onder de copyrightregel ---------------------
	   De afbeelding heeft custom_margin="-45px" en module_alignment="left",
	   waardoor hij op telefoon over de tekst heen naar links werd getrokken.
	   Het ontwerp zet hem gecentreerd eronder, 299 van 700 = 42,8vw breed. */
	/* Divi zet .et_pb_image_1_tb_footer.et_pb_module{margin-left:0!important;
	   margin-right:auto!important} - even specifiek als een selector met
	   twee classes, en zijn inline CSS staat later. Daarom hier drie. */
	.et_pb_column_2_tb_footer .et_pb_image_1_tb_footer.et_pb_module {
		margin: 4vw auto 0 !important;
		width: 42.8vw !important;
		text-align: center !important;
		float: none !important;
	}
	.et_pb_column_2_tb_footer .et_pb_image_1_tb_footer.et_pb_module .et_pb_image_wrap,
	.et_pb_column_2_tb_footer .et_pb_image_1_tb_footer.et_pb_module img {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
	/* copyrightregel gecentreerd, zoals in het ontwerp */
	.et_pb_column_1_tb_footer .et_pb_text,
	.et_pb_column_1_tb_footer .et_pb_text p {
		text-align: center !important;
	}

	/* ===================================================================
	   MARGE-CORRECTIES RESTPAGINA'S - augustus 2026
	   Menu, Rewards, Who we are, Careers en FAQ hebben (nog) geen eigen
	   mobiel-only secties; daar staan de desktopsecties op telefoon.
	   Onderstaande regels repareren alleen waar iets buiten zijn kader
	   valt of onleesbaar smal wordt. Alles staat in de media query
	   (max-width 767px), dus desktop en tablet blijven ongemoeid.
	   =================================================================== */

	/* --- Submit-knop van het contactformulier (Careers, FAQ) ------------
	   Divi legt over het formulier een negatieve marge (margin-left:-3%)
	   en geeft elk veld padding-left:3% terug. De submit-knop krijgt die
	   padding niet, dus stond hij 9px links van de invoervelden en stak
	   hij links uit de kolom. 3% van de formulierbreedte zet hem exact
	   op de veldrand. */
	.et_pb_contact_form .et_pb_contact_submit {
		margin-left: 3% !important;
	}

	/* --- Careers: vacaturetabellen stapelen -----------------------------
	   De vacatures staan in een <table> met twee inline 50%-kolommen. Op
	   telefoon houdt de rechterkolom ~110px over, waardoor de omschrijving
	   in kolommen van twee of drie woorden valt; bij 320px steekt de tabel
	   bovendien 33px buiten haar tekstblok. Op telefoon zetten we label en
	   waarde onder elkaar over de volle breedte.
	   Gericht op page-id-733 (Careers) zodat de prijstabellen op Menu,
	   die als twee kolommen juist wel kloppen, hier buiten blijven. */
	body.page-id-733 .et_pb_text_inner table,
	body.page-id-733 .et_pb_text_inner tbody,
	body.page-id-733 .et_pb_text_inner tr,
	body.page-id-733 .et_pb_text_inner td {
		display: block !important;
		width: 100% !important;
		height: auto !important;
	}
	body.page-id-733 .et_pb_text_inner table {
		padding: 8px 0 !important;
	}
	body.page-id-733 .et_pb_text_inner td {
		padding: 0 16px 10px !important;
		border: 0 !important;
	}
	/* eerste cel van elke rij is het label; als kop boven de waarde */
	body.page-id-733 .et_pb_text_inner tr > td:first-child {
		color: #F37423 !important;
		font-weight: 700 !important;
		padding-bottom: 2px !important;
	}
	body.page-id-733 .et_pb_text_inner tr + tr {
		border-top: 1px solid #333 !important;
		padding-top: 10px !important;
	}
	/* de losse tabs uit het originele plakwerk vallen op telefoon weg */
	body.page-id-733 .et_pb_text_inner .Apple-tab-span {
		display: none !important;
	}

	/* --- Menu: naamkolom ruimte geven -----------------------------------
	   De prijstabellen hebben twee cellen van 50%, met Divi's standaard
	   celpadding van 24px links en rechts. Van de 310px tabelbreedte
	   bleef zo 110px over voor de naam, waardoor "Sumol Orange White Wine
	   (Bottle 75cl)" over vier regels brak. De prijs heeft nooit meer dan
	   ~5,5em nodig; de rest gaat naar de naam. */
	body.page-id-649 .et_pb_text_inner table {
		table-layout: fixed !important;
		width: 100% !important;
	}
	body.page-id-649 .et_pb_text_inner table td {
		padding: 0 12px !important;
	}
	body.page-id-649 .et_pb_text_inner table td:first-child {
		width: auto !important;
	}
	body.page-id-649 .et_pb_text_inner table td + td {
		width: 5.5em !important;
		padding-left: 0 !important;
	}

	/* --- Rijbreedtes gelijktrekken op telefoon ---------------------------
	   Divi's standaardrij is 80% breed; op 390px geeft dat de 39px marge
	   die vrijwel de hele site aanhoudt. Een paar rijen hebben een eigen
	   desktopbreedte (50%, 65%, 87%, 90%) die op telefoon meeliep en daar
	   marges van 98, 68, 25 en 20px opleverde.

	   Dit hoort eigenlijk in Divi zelf thuis, maar dat kan hier niet: zodra
	   je op een RIJ de responsive breedte aanzet (width_phone +
	   width_last_edited), laat Divi de desktopwaarde vallen en springt de
	   rij ook op desktop naar 80%. Getest op 2026-08-18: careers werd
	   daardoor 1152px in plaats van 936/1296px breed. Daarom hier, in de
	   telefoon-media query, waar desktop er niet bij kan.

	   De .et_pb_row_N-nummering loopt per pagina in volgorde van de rijen.
	   Wordt er in Divi een rij toegevoegd of verplaatst boven een van deze,
	   dan schuift het nummer mee en moet dit blok bij. */

	/* Careers: verhaaltekst (65%) en de twee vacaturekaarten (90%) */
	body.page-id-733 .et_pb_row_3,
	body.page-id-733 .et_pb_row_5,
	body.page-id-733 .et_pb_row_6,
	/* Who we are: verhaaltekst (65%) en de locatiekaarten (87%) */
	body.page-id-655 .et_pb_row_3,
	body.page-id-655 .et_pb_row_6,
	/* Menu: de Chicken-tegels (50%) */
	body.page-id-649 .et_pb_row_9 {
		width: 80% !important;
	}

	/* ===================================================================
	   RONDE 2 - correcties uit de mobiele nalooprondeer van 2026-08-18
	   Zelfde regel als hierboven: alles binnen (max-width:767px), niets
	   raakt desktop of tablet.
	   =================================================================== */

	/* --- Home: Favorites-tegels bleven omhoog staan --------------------
	   De tegels liften 40px bij hover. Een telefoon kent geen hover, maar
	   houdt de status na een tik vast; alle tegels schoven dan omhoog tot
	   444px, terwijl de kop "Favorites" pas op 457px eindigt - de bovenste
	   twee foto's kwamen zo over de kop heen. De lift is een desktopgebaar
	   en gaat op telefoon uit. */
	.franggo-fav-col:hover .franggo-fav-tile,
	.franggo-m-fav .et_pb_blurb:hover,
	.et_pb_blurb:hover {
		transform: none !important;
	}

	/* --- Uitklapmenu's leesbaar maken ----------------------------------
	   Divi geeft het mobiele uitklapmenu een witte achtergrond, terwijl de
	   linkkleur van deze modules op wit staat: wit op wit. Speelt bij het
	   menu in de footer en bij het menu onder de hero op de menupagina.
	   De koptekstmenu's van de mobiele header (.franggo-m-menu) hebben een
	   eigen, wel kloppende zwarte opmaak en blijven buiten schot. */
	/* body ervoor: Divi zet zijn witte achtergrond met !important en even
	   veel classes, en zijn CSS staat later in de <head>. Het extra
	   element in de selector geeft de doorslag. */
	body .et_pb_menu:not(.franggo-m-menu) .et_mobile_menu,
	body .et_pb_menu:not(.franggo-m-menu) .et_mobile_menu ul {
		background-color: rgba(255, 255, 255, 0.85) !important;
		border-top-color: #F37423 !important;
	}
	body .et_pb_menu:not(.franggo-m-menu) .et_mobile_menu a {
		color: #F37423 !important;
	}
	.et_pb_menu:not(.franggo-m-menu) .et_mobile_menu li {
		border-bottom-color: rgba(243, 116, 35, 0.35) !important;
	}

	/* --- Footer: Franggo-logo groter ------------------------------------
	   Stond op 78px breed (20vw); nu 45vw. */
	.et_pb_section_0_tb_footer .et_pb_image_0_tb_footer.et_pb_module {
		width: 45vw !important;
		max-width: 45vw !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.et_pb_section_0_tb_footer .et_pb_image_0_tb_footer.et_pb_module .et_pb_image_wrap,
	.et_pb_section_0_tb_footer .et_pb_image_0_tb_footer.et_pb_module img {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}

	/* --- Rewards: "More Franggo - More Piri Points" op twee regels -------
	   Stond op 100px en liep over drie regels. */
	body.page-id-653 .et_pb_text_0 h2 {
		font-size: 62px !important;
		line-height: 1.05em !important;
	}

	/* --- Rewards: kop "Every time you order..." meer regelafstand -------- */
	body.page-id-653 .et_pb_text_1,
	body.page-id-653 .et_pb_text_1 p,
	body.page-id-653 .et_pb_text_1 h1,
	body.page-id-653 .et_pb_text_1 h2,
	body.page-id-653 .et_pb_text_1 h3 {
		line-height: 1.45em !important;
	}

	/* --- Rewards: smiley groter -----------------------------------------
	   Stond op 37px breed, dat is nauwelijks te zien. */
	body.page-id-653 .et_pb_image_6.et_pb_module {
		width: 24vw !important;
		max-width: 24vw !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	body.page-id-653 .et_pb_image_6.et_pb_module .et_pb_image_wrap,
	body.page-id-653 .et_pb_image_6.et_pb_module img {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}

	/* --- Who we are: foto achter "This isn't just chicken" opzij ---------
	   De sectie draagt de foto als achtergrond op background-position
	   100% 50%; daardoor lag hij over de volle rechterhelft en liep de
	   tekst er doorheen. Verder naar rechts, zodat alleen nog een rand
	   zichtbaar is. */
	/* Op verzoek helemaal weg op telefoon, in plaats van opzij geschoven. */
	/* Divi zet de foto met div.et_pb_section.et_pb_section_3 en !important;
	   even specifiek en later in de <head>. Vandaar hier ook div ervoor. */
	body.page-id-655 div.et_pb_section.et_pb_section_3 {
		background-image: none !important;
	}



	/* --- Menu: "Alcohol" boven het Superbock-blok ------------------------
	   Op desktop staan de twee koppen naast elkaar in rij 20 en de drie
	   drankenlijsten naast elkaar in rij 21; "Alcohol" hoort daar boven de
	   derde kolom. Op telefoon stapelt alles, en dan belandt "Alcohol"
	   direct onder "Portuguese Drinks" - ver van de lijst waar hij bij
	   hoort. Verplaatsen in de Divi-content zou de desktop veranderen, dus
	   het gebeurt hier met de volgorde.

	   Werkwijze: de twee rijen krijgen display:contents, waardoor hun
	   kolommen rechtstreekse kinderen van de flex-sectie worden en met
	   'order' te herschikken zijn. Omdat de rijen daarmee ook hun eigen
	   breedte (80%) en padding verliezen, staan die hieronder weer op de
	   kolommen zelf. */
	body.page-id-649 .et_pb_section_6 {
		display: flex !important;
		flex-direction: column !important;
	}
	body.page-id-649 .et_pb_row_20,
	body.page-id-649 .et_pb_row_21 {
		display: contents !important;
	}
	body.page-id-649 .et_pb_column_38,
	body.page-id-649 .et_pb_column_39,
	body.page-id-649 .et_pb_column_40,
	body.page-id-649 .et_pb_column_41,
	body.page-id-649 .et_pb_column_42 {
		width: 80% !important;
		max-width: 80% !important;
		align-self: center !important;
	}
	/* Alcohol na de eerste twee lijsten, Superbock daar weer achter. */
	body.page-id-649 .et_pb_column_39 { order: 1 !important; }
	body.page-id-649 .et_pb_column_42 { order: 2 !important; }
	/* de padding die rij 20 en 21 op telefoon hadden (28 en 30px) */
	body.page-id-649 .et_pb_column_38 { margin-top: 28px !important; }
	body.page-id-649 .et_pb_column_40 { margin-top: 30px !important; }
	body.page-id-649 .et_pb_column_39 { margin-top: 30px !important; margin-bottom: 0 !important; }
	body.page-id-649 .et_pb_column_42 { margin-bottom: 30px !important; }

	/* --- Het vlammetje in de scheidingsbalk inzoomen ---------------------
	   Spacer.png is de balk met twee paarse krullen en het oranje vlammetje
	   in het midden. Op volle breedte is het vlammetje maar een paar pixels
	   groot. De afbeelding gaat op 200%, zodat het vlammetje verdubbelt en
	   de paarse krullen links en rechts buiten beeld lopen.
	   Op src gericht, zodat elke pagina met deze balk meegaat. */
	.et_pb_image:has(img[src*="Spacer"]) {
		overflow: hidden !important;
	}
	.et_pb_image:has(img[src*="Spacer"]) .et_pb_image_wrap {
		display: block !important;
		width: 200% !important;
		max-width: none !important;
		margin-left: -50% !important;
	}
	.et_pb_image:has(img[src*="Spacer"]) img {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}

	/* --- Careers: foto achter "At Franggo, great food..." weg ------------
	   Zoals op Who we are: op telefoon helemaal geen achtergrondfoto. */
	/* Divi zet de foto met div.et_pb_section.et_pb_section_3 en !important;
	   even specifiek en later in de <head>. Vandaar hier ook div ervoor. */
	body.page-id-733 div.et_pb_section.et_pb_section_3 {
		background-image: none !important;
	}

	/* --- Knopblokken onder de foto's, zoals op home ----------------------
	   Op home (.franggo-m-gift / .franggo-m-who) staat de knop in een eigen
	   balk onder de foto: 33px eronder, gecentreerd, en daarna 34px ruimte.
	   Op Who we are en Menu is de knop met margin-top:-58,5px en
	   margin-left:50,7px over de foto heen getrokken. Op telefoon halen we
	   hem eronder en zetten we hem in het midden. */
	body.page-id-655 .et_pb_section_4 .et_pb_button_module_wrapper,
	body.page-id-649 .et_pb_section_7 .et_pb_button_module_wrapper {
		margin-top: 33px !important;
		margin-bottom: 34px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: center !important;
	}
	body.page-id-655 .et_pb_section_4 .et_pb_button_module_wrapper .et_pb_button,
	body.page-id-649 .et_pb_section_7 .et_pb_button_module_wrapper .et_pb_button {
		display: inline-block !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* --- Uitklapmenu's: tekst vet voor de leesbaarheid ------------------- */
	body .et_pb_menu:not(.franggo-m-menu) .et_mobile_menu a {
		font-weight: 700 !important;
	}

	/* --- Who we are: de knopbalk donker, zoals de balken op home ---------
	   Sectie 4 is wit; met de knoppen eronder in plaats van eroverheen
	   werd dat een witte strook tussen twee foto's. Home gebruikt daar
	   #282828 (.franggo-m-gift). */
	body.page-id-655 .et_pb_section_4.et_pb_section {
		background-color: #282828 !important;
	}
}

/* =====================================================================
   FOOTER - COPYRIGHTBALK GECENTREERD (2026-08-25)
   De roze balk is een rij met een 2/3-kolom (de copyrightregel, in Divi
   rechts uitgelijnd) en een 1/3-kolom (de back-to-top). Daardoor viel de
   regel op twee plekken niet in het midden. Gemeten op franggo.nl:

     <= 767px   al goed, gecentreerd door de mobiele media query hierboven
     768-980px  tot +245px te ver rechts
     >= 981px   -31px op 981, +24px op 1440, +81px op 1920

   Twee losse oorzaken, dus twee losse blokken.
   ===================================================================== */

/* --- 768 t/m 980px: de vergeten tussenband --------------------------
   Divi stapelt de kolommen van deze rij vanaf 980px, maar de mobiele
   correcties staan in een media query die pas onder 768px begint. In die
   tussenband stond de copyrightregel dus nog rechts uitgelijnd terwijl
   zijn kolom inmiddels de volle breedte had, en werd de back-to-top naar
   links getrokken. Zelfde behandeling als op telefoon. */
@media (min-width: 768px) and (max-width: 980px) {
	.et_pb_column_1_tb_footer .et_pb_text,
	.et_pb_column_1_tb_footer .et_pb_text p {
		text-align: center !important;
	}
	/* Divi zet hier margin-left:0!important;margin-right:auto!important via
	   een selector met twee classes - vandaar ook hier drie. */
	.et_pb_column_2_tb_footer .et_pb_image_1_tb_footer.et_pb_module {
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
		text-align: center !important;
	}
}

/* --- 981px en breder: het midden van de kolom is niet het midden -----
   De regel stond rechts uitgelijnd tegen de rechterrand van de 2/3-kolom.
   Die rand schuift met de schermbreedte mee, dus de tekst liep weg van het
   midden van de balk. De tekstmodule uit de kolomstroom halen en over de
   volle rijbreedte centreren zet hem er exact in.

   De module blijft daarbij in de kolomstroom staan en wordt alleen breder
   getrokken: 154,243% van de 2/3-kolom is precies de rijbreedte
   (100 / 64,833 - Divi's 2/3-kolom bij gutter-breedte 3). Hij loopt dus
   met zijn rechterrand exact gelijk met de rij en veroorzaakt geen
   horizontale overflow.

   NIET oplossen met position:absolute. Dat werkt op 1440px, maar dan houdt
   de tekst de rij niet meer open. Onder ~1150px is de back-to-top (die de
   rijhoogte bepaalt) korter dan de tekstregel, klapt de roze balk dicht en
   valt de copyrightregel erboven op de donkere sectie - donkere tekst op
   donkere achtergrond. Gemeten en teruggedraaid op 2026-08-25. */
@media (min-width: 981px) {
	.et_pb_row_1_tb_footer .et_pb_text_1_tb_footer {
		width: 154.243%;
		text-align: center;
	}
}

/* =====================================================================
   WITTE STREEP ONDER DE MENUBALK (2026-09-08)
   Onder de zwarte menubalk stond een streep van 5px in de achtergrond-
   kleur van de sectie eronder. Op home, who-we-are en careers is die
   sectie wit, dus daar viel het op; op menu, locations, rewards en faq
   is hij zwart en zag je niets. Vandaar dat het leek alsof het maar op
   sommige formaten gebeurde - het zit op alle breedtes, maar niet op
   alle pagina's.

   Oorzaak: de headerrij heeft in Divi custom_margin "||-5px||false|false"
   (margin-bottom:-5px). Die trekt de VOLGENDE sectie 5px omhoog, maar de
   kolom binnen die sectie is een float en mag van de CSS-floatregels niet
   boven de floats van de header uitkomen. De inhoud blijft dus staan en
   alleen de sectie-achtergrond schuift eronder. Die sectie staat later in
   de DOM en heeft dezelfde z-index (auto), dus haar achtergrond wordt
   over de onderste 5px van de zwarte header heen geschilderd.

   De negatieve marge doet daardoor niets nuttigs: hij verplaatst geen
   inhoud, hij laat alleen de sectie eronder onder de balk door lekken.
   Hier op 0 zetten in plaats van in de Divi-instellingen, zodat er geen
   post_content bewerkt hoeft te worden (zie CLAUDE.md over de statische
   per-pagina-CSS die dan niet opnieuw gegenereerd wordt) en zodat het
   meteen voor alle zeven pagina's geldt.

   Gemeten 2026-09-08 met Playwright, 320-2560px, alle pagina's: streep
   weg, paginahoogtes gelijk; alleen faq wordt 5px hoger, omdat daar de
   inhoud wel met die marge meeliep.
   ===================================================================== */
/* Divi zet dit zelf met .et_pb_row_8.et_pb_row{margin-bottom:-5px!important}
   (twee classes, en zijn inline-blok staat later in de pagina), dus een
   selector met een id erin om er met zekerheid overheen te gaan. */
body #page-container .et_pb_row.et_pb_row--with-menu {
	margin-bottom: 0 !important;
}