/* Webshop — pagina-specifieke afwijkingen t.o.v. de gedeelde blok-CSS.
   Wordt alleen op /webshop/ geladen (techdog_page_slug() === 'webshop').
   Alle waarden komen uit de Divi-bron van de live pagina en zijn nagemeten
   op 1920 / 1512 / 1280 / 900 / 600px.

   Blokvolgorde in .td-main:
     1 hero  ·  2 blauwe band "Groei mee met de toekomst"
     3 Wij helpen u graag  ·  4 blauwe band "Stabiele ICT-fundering"          */

/* ------------------------------------------------------------------ *
 * Altijd geldend
 * ------------------------------------------------------------------ */

/* Het hero-icoon schaalt op hoogte (Divi: max-height 55px, width auto) en
   staat 18px boven de kop. */
.page-webshop .block-hero__icon{width:auto;height:auto;max-height:55px;margin-bottom:18px;}

/* Knoppenrij in "Wij helpen u graag!": de tweede knop staat in Divi 20px
   rechts van de eerste (button_two margin-left). */
.page-webshop .block-text-image__buttons{gap:20px;}

/* ------------------------------------------------------------------ *
 * Desktop — verticaal ritme
 * Divi rekent sectie- en rijpadding in procenten van de vensterbreedte
 * (sectie 4%, rij 2%) en bevriest die boven 1350px op 54 resp. 27px.
 * Sectiemarges: hero 50px onder, "Wij helpen u graag" 30px, blauw 0.
 * ------------------------------------------------------------------ */
@media (min-width:981px){
	.page-webshop .block-hero{padding:6% 0;margin-bottom:50px;}
	.page-webshop .block-two-col.block--blue{padding:100px 0;padding-bottom:calc(100px + 2%);margin:0;}
	/* Deze sectie heeft in Divi geen eigen onderpadding; alleen die van de rij. */
	.page-webshop .td-main>.block:nth-child(3){padding:4% 0 2%;margin:30px 0;}

	/* Divi's goot is een percentage van de rij: de hero en "Wij helpen u
	   graag" staan op de standaardgoot 3 (5,5%), de blauwe banden op goot 2
	   (3%, die staat al in de blok-CSS). */
	.page-webshop .block-hero__inner,
	.page-webshop .block-text-image__inner{gap:5.5%;}

	/* Ruimte tussen twee modules in één kolom: Divi rekent die als percentage
	   van de kolom — 5,82% bij goot 3, 3,09% bij goot 2. */
	.page-webshop .block-hero__intro:has(+ .block-hero__iconlist){margin-bottom:5.82%;}
	.page-webshop .block-text-image__body{margin-bottom:5.82%;}
	.page-webshop .block-two-col__iconlist{margin-top:3.09%;}
}

/* Boven 1350px staan de sectie- en rijpadding van Divi vast. */
@media (min-width:1350px){
	.page-webshop .block-hero{padding:81px 0;}
	.page-webshop .block-two-col.block--blue{padding:100px 0 127px;}
	.page-webshop .td-main>.block:nth-child(3){padding:54px 0 27px;}
}

/* ------------------------------------------------------------------ *
 * Tablet en telefoon — gestapeld
 * Onder 980px zet Divi vaste maten in: sectie 50px, rij 30px, en zowel
 * de kolom- als de modulemarge 30px. De sectiepadding uit de bouwer
 * (blauw 100px, telefoon 50px) komt daar bovenop.
 * ------------------------------------------------------------------ */
@media (max-width:980px){
	.page-webshop .block-hero{padding:80px 0;margin-bottom:50px;}
	.page-webshop .block-hero__inner{gap:30px;}
	.page-webshop .block-hero__intro:has(+ .block-hero__iconlist){margin-bottom:30px;}

	.page-webshop .block-two-col.block--blue{padding:100px 0 130px;margin:0;}
	.page-webshop .block-two-col__iconlist{margin-top:30px;}

	.page-webshop .td-main>.block:nth-child(3){padding:50px 0 30px;margin:0;}
	.page-webshop .block-text-image__inner{gap:30px;}
	.page-webshop .block-text-image__body{margin-bottom:30px;}
}

@media (max-width:767px){
	/* De blauwe banden houden hier een kleinere kop dan de gedeelde blok-CSS
	   (Divi: 32px met regelhoogte 1,2em). */
	.page-webshop .block-two-col.block--blue h2{font-size:32px;line-height:1.2em;}
	.page-webshop .block-two-col.block--blue{padding:50px 0 80px;}

	/* Op telefoon staan de twee knoppen tegen elkaar (Divi zet button_two's
	   marge op 0) en zit er 20px boven de knop: de twee inline-block-knoppen
	   maken daar samen een regel van 68px hoog terwijl de knop 48px is. */
	.page-webshop .block-text-image__buttons{gap:0;padding-top:20px;}
}