/* =========================================================
SI SEO INTRO Categorie 
========================================================= */
.si-seo-cat-intro {
	text-align: center;
	margin: 2rem auto;
}

.si-seo-cat-intro p {
	font-size: 15px;
}

@media (max-width: 767px){
	.si-seo-cat-intro p {
		font-size: 14px;
	}
}

/* =========================================================
SI SEO PANELS – CORE
========================================================= */

/* Layout container */
.si-seo-panels{
	display: block;
}

.si-seo-panel{ margin: 0 0 16px; }
.si-seo-panel:last-child{ margin-bottom: 0; }

/* Panel cards (SEO-safe) */
.si-seo-panel{
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}

/* FIX: prevent open <details> content from being clipped */
details[open].si-seo-panel{
	overflow: visible;
}

/* Head + title */
.si-seo-panel-head,
.si-seo-panel-summary{
	padding: 18px;
}

.si-seo-panel-title{
	margin: 0;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 900;
}

/* Body */
.si-seo-panel-body{
	padding: 0 18px 18px;
	color: rgba(0,0,0,.82);
	line-height: 1.7;
}

/* Collapsible panels */
.si-seo-collapsible .si-seo-panel-summary{
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	cursor: pointer;
}
.si-seo-collapsible .si-seo-panel-summary::-webkit-details-marker{ display:none; }

.si-seo-panel-icon{
	width: 34px;
	height: 34px;
	border-radius: 12px;
	background: rgba(0,0,0,.06);
	position: relative;
	flex: 0 0 auto;
}
.si-seo-panel-icon:before, .si-seo-panel-icon:after{
	content:'';
	position:absolute;
	left:50%;
	top:50%;
	width:14px;
	height:2px;
	background: rgba(0,0,0,.75);
	transform: translate(-50%,-50%);
}
.si-seo-panel-icon:after{
	transform: translate(-50%,-50%) rotate(90deg);
	transition: transform .18s ease;
}
details[open].si-seo-collapsible .si-seo-panel-icon:after{
	transform: translate(-50%,-50%) rotate(0deg);
}

/* Remove body padding duplication inside combined legacy tables */
.si-seo-specs .si-seo-specs-table{ margin-top: 0; }

.si-seo-subtitle{
	margin: 14px 0 10px;
	font-size: 14px;
	font-weight: 800;
	opacity: .9;
}

.si-seo-desc p:first-child{ margin-top: 0; }


/* =========================================================
FAQ DETAILS (fix spacing + premium)
========================================================= */

.si-seo-details { border-top: 1px solid rgba(0,0,0,.08); }
.si-seo-details:first-child { border-top: 0; }

.si-seo-summary{
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 0;
	cursor: pointer;
	font-weight: 800;
}
.si-seo-summary::-webkit-details-marker { display: none; }

/* FIX: remove default margins from headings inside summary */
.si-seo-summary h1,
.si-seo-summary h2,
.si-seo-summary h3,
.si-seo-summary h4,
.si-seo-summary p{
	margin: 0 !important;
}

.si-seo-title{
	font-size: 16px;
	line-height: 1.35;
	font-weight: 900;
	flex:  1 1 auto;
	min-width: 0;
}

.si-seo-content{
	padding: 0 0 16px 0;
	color: rgba(0,0,0,.80);
	line-height: 1.75;
}

/* open state spacing */
.si-seo-details[open] .si-seo-summary{ padding-bottom: 10px; }

.si-seo-icon{
	width: 36px;
	height: 36px;
	border-radius: 14px;
	background: rgba(0,0,0,.06);
	position: relative;
	flex: 0 0 auto;
}
.si-seo-icon:before, .si-seo-icon:after{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	background: rgba(0,0,0,.75);
	transform: translate(-50%,-50%);
}
.si-seo-icon:after{
	transform: translate(-50%,-50%) rotate(90deg);
	transition: transform .18s ease;
}
details[open] > summary .si-seo-icon:after{
	transform: translate(-50%,-50%) rotate(0deg);
}


/* =========================================================
SPECS TABLES
========================================================= */

.si-seo-specs-table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 14px;
	overflow: hidden;
}
.si-seo-specs-table th,
.si-seo-specs-table td{
	padding: 12px 14px;
	vertical-align: top;
	border-top: 1px solid rgba(0,0,0,.06);
}
.si-seo-specs-table tr:first-child th,
.si-seo-specs-table tr:first-child td{ border-top: 0; }
.si-seo-specs-table th{
	width: 38%;
	font-weight: 700;
	background: rgba(0,0,0,.02);
}


/* =========================================================
LISTS
========================================================= */

.si-seo-box-list ul{ margin: 0; padding-left: 18px; }
.si-seo-box-list li{ margin: 6px 0; }


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px){
	.si-seo-panel-head,
	.si-seo-panel-summary{ padding: 14px; }
	.si-seo-panel-body{ padding: 0 14px 14px; }
	.si-seo-panel-title{ font-size: 17px; }
}


/* =========================================================
CATEGORY SEO BLOCK – COMPACT E-COMMERCE STYLE
========================================================= */

.si-seo-category{
	margin: 70px auto 40px;
	padding: 44px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 20px;
	box-shadow: 0 14px 40px rgba(0,0,0,.04);
}

/* Main title */
.si-seo-category h2{
	font-size: 24px;     /* was 32 */
	margin: 0 0 12px;
	font-weight: 800;    /* iets minder zwaar */
	line-height: 1.25;
	letter-spacing: 0;
}

/* Section titles */
.si-seo-category h3{
	font-size: 16px;     /* was 19 */
	margin: 26px 0 8px;
	font-weight: 800;
	line-height: 1.3;
}

/* Body text */
.si-seo-category p{
	font-size: 14.5px;   /* iets kleiner */
	line-height: 1.75;
	margin: 0 0 14px;
	color: rgba(0,0,0,.82);
}

/* Subtle separators */
.si-seo-category h3{
	padding-top: 14px;
	border-top: 1px solid rgba(0,0,0,.05);
}
.si-seo-category h3:first-of-type{
	border-top: 0;
	padding-top: 0;
}

/* Premium compact bullets */
.si-seo-category ul{
	margin: 10px 0 18px;
	padding-left: 0;
	list-style: none;
}

.si-seo-category li{
	margin: 8px 0;
	padding-left: 18px;
	position: relative;
	font-size: 14.5px;
}

.si-seo-category li:before{
	content:'';
	width:5px;
	height:5px;
	border-radius:999px;
	background: rgba(0,0,0,.35);
	position:absolute;
	left:0;
	top:9px;
}

/* Links */
.si-seo-category a{
	text-decoration: none;
	font-weight: 700;
}

.si-seo-category a:hover{
	text-decoration: underline;
}

/* Tip paragraph */
.si-seo-category p:last-child{
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(0,0,0,.05);
	font-size: 13.5px;
	color: rgba(0,0,0,.7);
}




/* =========================================================
CATEGORY FAQ – make it a matching card (same width)
Use on the Divi module that contains the FAQ shortcode:
add class: si-seo-faq-wrap
========================================================= */

.si-seo-faq-wrap{
	margin: 0 auto 120px;
	padding: 40px 54px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 22px;
	box-shadow: 0 18px 60px rgba(0,0,0,.04);
}

/* Title inside FAQ wrap (if your shortcode outputs h2) */
.si-seo-faq-wrap h2{
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 900;
}

/* Make FAQ rows inside this wrap feel tighter */
.si-seo-faq-wrap .si-seo-summary{
	padding: 16px 0;
}
.si-seo-faq-wrap .si-seo-title{
	font-weight: 900;
}

/* Mobile FAQ card */
@media (max-width: 767px){
	.si-seo-faq-wrap{
		margin: 0 18px 90px;
		padding: 24px 26px;
		border-radius: 18px;
	}
}