/* =========================================================
   PPC Refurbished — spec-sheet editorial
   Manrope (tekst/titels) + Fira Code (mono labels/specs)
   Inkt #14181F · Paper #F6F5F1 · Signaalgroen #00B86B
   ========================================================= */

:root {
	--ppc-ink: #14181F;
	--ppc-paper: #F6F5F1;
	--ppc-green: #00B86B;
	--ppc-green-bright: #00D17A;
	--ppc-slate: #5B6470;
	--ppc-hairline: #E4E1D8;
	--ppc-green-tint: #E7F5EE;
	--ppc-mono: var(--wp--preset--font-family--fira-code, "Fira Code", monospace);
}

/* ---------- Mono helper (eyebrow labels) ---------- */
.ppc-eyebrow {
	font-family: var(--ppc-mono);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ppc-green);
	font-weight: 600;
}

/* ---------- Staat-badge ---------- */
.ppc-staat-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--ppc-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ppc-ink);
	background: var(--ppc-green-tint);
	border: 1px solid rgba(0, 184, 107, 0.35);
	border-radius: 999px;
	padding: 0.3em 0.7em;
	line-height: 1;
}
.ppc-staat-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ppc-green);
	box-shadow: 0 0 0 3px rgba(0, 184, 107, 0.18);
}
.ppc-staat-badge--loop { margin-bottom: 0.6em; }
.ppc-staat-badge--single { margin-bottom: 1em; }

/* ---------- Shop-grid kaarten ---------- */
ul.products li.product,
.wc-block-grid__product {
	background: var(--ppc-paper);
	border: 1px solid var(--ppc-hairline);
	border-radius: 14px;
	padding: 1.1rem 1.1rem 1.4rem;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	display: flex;
	flex-direction: column;
}
ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px -18px rgba(20, 24, 31, 0.4);
	border-color: rgba(0, 184, 107, 0.5);
}
ul.products li.product img {
	border-radius: 8px;
	margin-bottom: 1rem !important;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #fff;
	padding: 0.6rem;
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.02rem !important;
	font-weight: 700;
	line-height: 1.25;
	padding: 0 0 0.4rem !important;
	color: var(--ppc-ink);
}
ul.products li.product .button {
	margin-top: auto;
}

/* ---------- Prijzen in monospace ---------- */
.price,
.woocommerce-Price-amount {
	font-family: var(--ppc-mono) !important;
	font-weight: 600;
	color: var(--ppc-ink);
}
ul.products li.product .price {
	font-size: 1.15rem;
	display: block;
	margin: 0.2rem 0 0.9rem;
}
del .woocommerce-Price-amount { color: var(--ppc-slate); font-weight: 400; }
ins { text-decoration: none; }

/* ---------- Add to cart / knoppen ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.wp-block-button__link {
	background: var(--ppc-green);
	color: var(--ppc-ink);
	font-weight: 700;
	border-radius: 8px;
	border: none;
	transition: background 0.16s ease, transform 0.16s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover {
	background: var(--ppc-green-bright);
	transform: translateY(-1px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--ppc-ink);
	color: var(--ppc-paper);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: #20262f;
}

/* ---------- Sale-badge ---------- */
.woocommerce span.onsale {
	background: var(--ppc-ink);
	color: var(--ppc-paper);
	font-family: var(--ppc-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	min-height: auto;
	min-width: auto;
	padding: 0.35em 0.8em;
	line-height: 1;
}

/* ---------- Productpagina ---------- */
.woocommerce div.product .product_title {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.7rem;
	color: var(--ppc-ink);
	margin: 0.4rem 0 1.2rem;
}
.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: 12px;
	background: #fff;
}
.woocommerce div.product form.cart .button {
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-size: 1.05rem;
}

/* Spec-tabel (Aanvullende informatie) in spec-sheet stijl */
.woocommerce table.shop_attributes {
	border: 1px solid var(--ppc-hairline);
	border-radius: 12px;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border-bottom: 1px solid var(--ppc-hairline);
	padding: 0.7rem 1rem;
}
.woocommerce table.shop_attributes th {
	font-family: var(--ppc-mono);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ppc-slate);
	background: rgba(0, 0, 0, 0.015);
	width: 42%;
}
.woocommerce table.shop_attributes td { font-style: normal; }
.woocommerce .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--ppc-green);
}

/* ---------- Homepage helpers ---------- */
.ppc-feature-card {
	background: var(--ppc-paper);
	border: 1px solid var(--ppc-hairline);
	border-radius: 14px;
	padding: 1.8rem;
	height: 100%;
}
.ppc-trust-num {
	font-family: var(--ppc-mono);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ---------- Diverse ---------- */
.woocommerce-result-count,
.woocommerce-ordering select {
	font-family: var(--ppc-mono);
	font-size: 0.85rem;
}

/* Staat-badge op de block product-collection grid (post-terms) */
.wp-block-post-terms.ppc-staat-badge{display:block;text-align:center;margin:.4rem 0 .2rem}
.wp-block-post-terms.ppc-staat-badge a{display:inline-block;font-family:"Fira Code",monospace;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;background:var(--wp--preset--color--accent-6,#E7F5EE);color:var(--wp--preset--color--accent-1,#00B86B);padding:.18rem .6rem;border-radius:999px;text-decoration:none;line-height:1.6}

/* Garantie-regel op productpagina */
.ppc-warranty{font-family:"Fira Code",monospace;font-size:.8rem;letter-spacing:.02em;color:var(--wp--preset--color--accent-1,#00B86B);margin:.4rem 0 1rem}
.ppc-warranty a{color:var(--wp--preset--color--accent-3,#5B6470);font-size:.75rem;margin-left:.5rem;text-decoration:underline}

/* Weergave-schakelaar */
.ppc-view-toggle{display:inline-flex;gap:.25rem;font-family:"Fira Code",monospace;font-size:.72rem}
.ppc-view-toggle .ppc-view-btn{padding:.3rem .6rem;border:1px solid var(--wp--preset--color--accent-4,#E4E1D8);border-radius:6px;color:var(--wp--preset--color--accent-3,#5B6470);text-decoration:none;line-height:1.4}
.ppc-view-toggle .ppc-view-btn.is-active{background:var(--wp--preset--color--accent-1,#00B86B);color:#fff;border-color:var(--wp--preset--color--accent-1,#00B86B)}

/* Lijstweergave: producten onder elkaar als rijen */
body.ppc-list-view ul.wc-block-product-template{display:flex !important;flex-direction:column !important;gap:0 !important}
body.ppc-list-view li.wc-block-product{display:flex !important;flex-direction:row !important;align-items:center;flex-wrap:wrap;gap:1.25rem;width:100% !important;max-width:100% !important;flex-basis:100% !important;text-align:left !important;border-bottom:1px solid var(--wp--preset--color--accent-4,#E4E1D8);padding:1.1rem .25rem;margin:0 !important}
body.ppc-list-view li.wc-block-product .wp-block-woocommerce-product-image{flex:0 0 150px;width:150px;margin:0 !important}
body.ppc-list-view li.wc-block-product .wp-block-woocommerce-product-image img{width:100%;height:auto}
body.ppc-list-view li.wc-block-product .ppc-staat-badge{order:2;flex:0 0 auto;text-align:left !important;margin:0 !important}
body.ppc-list-view li.wc-block-product .wp-block-post-title{order:3;flex:1 1 280px;text-align:left !important;margin:0 !important;font-size:1.05rem}
body.ppc-list-view li.wc-block-product .wp-block-woocommerce-product-price{order:4;flex:0 0 auto;text-align:right !important;margin:0 !important;min-width:110px}
body.ppc-list-view li.wc-block-product .wp-block-woocommerce-product-button{order:5;flex:0 0 auto;margin:0 !important}
@media (max-width:600px){
  body.ppc-list-view li.wc-block-product .wp-block-post-title{flex-basis:60%}
  body.ppc-list-view li.wc-block-product .wp-block-woocommerce-product-button{flex-basis:100%}
}

/* Product Filters: overlay-knoppen ('Filter producten' / 'Sluiten') weg, filters altijd inline */
.wc-block-product-filters__open-overlay,
.wc-block-product-filters__close-overlay,
.wc-block-product-filters__open-overlay-label{display:none !important}
.wc-block-product-filters__overlay{position:static !important;transform:none !important;inset:auto !important;max-height:none !important;display:flex !important;padding:0 !important;background:transparent !important}
.wc-block-product-filters__overlay-wrapper{display:block !important}

/* Shop-balk (aantal · weergave · sortering): nette afbraak op smal scherm */
.ppc-view-toggle{flex:0 0 auto}
.ppc-view-toggle .ppc-view-btn{white-space:nowrap}
.wc-block-product-template ~ *,.woocommerce-result-count{min-width:0}
@media (max-width:600px){
  .ppc-shop-bar .woocommerce-result-count{flex:1 1 100%;margin:0}
  .ppc-shop-bar{row-gap:.6rem}
}

/* Extra diensten op productpagina */
.ppc-services{margin:1rem 0 1.25rem;padding:1rem 1.1rem;border:1px solid var(--wp--preset--color--accent-4,#E4E1D8);border-radius:10px;background:var(--wp--preset--color--base,#F6F5F1)}
.ppc-services .ppc-eyebrow{margin:0 0 .6rem}
.ppc-service-opt{display:block;margin:.55rem 0;cursor:pointer;line-height:1.4}
.ppc-service-opt input{margin-right:.35rem;vertical-align:middle}
.ppc-service-label{font-size:.95rem}
.ppc-service-desc{display:block;color:var(--wp--preset--color--accent-3,#5B6470);font-size:.8rem;margin:.1rem 0 0 1.55rem}

/* Contactformulier (Contact Form 7) */
.wpcf7{margin-top:1.5rem}
.wpcf7 .ppc-cf7-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.wpcf7 p{margin:0 0 1rem}
.wpcf7 label{display:block;font-weight:600;font-size:.92rem}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea{width:100%;margin-top:.4rem;padding:.7rem .85rem;border:1px solid var(--wp--preset--color--accent-4,#E4E1D8);border-radius:8px;background:#fff;font:inherit;font-weight:400;box-sizing:border-box}
.wpcf7 textarea{min-height:160px;resize:vertical}
.wpcf7 input:focus,.wpcf7 textarea:focus{outline:none;border-color:var(--wp--preset--color--accent-1,#00B86B);box-shadow:0 0 0 3px rgba(0,184,107,.15)}
.wpcf7 input[type=submit]{background:var(--wp--preset--color--accent-1,#00B86B);color:var(--wp--preset--color--contrast,#14181F);border:0;border-radius:8px;padding:.8rem 1.7rem;font-weight:700;cursor:pointer;font:inherit}
.wpcf7 input[type=submit]:hover{filter:brightness(1.06)}
.wpcf7 .wpcf7-spinner{margin-left:.6rem}
@media(max-width:600px){.wpcf7 .ppc-cf7-grid{grid-template-columns:1fr}}

/* Compacte gecombineerde contact-info kaart (/contact/) */
.ppc-contact-card{background:var(--ppc-paper,#F6F5F1);border:1px solid var(--ppc-hairline,#E4E1D8);border-radius:12px;padding:1.1rem 1.3rem}
.ppc-contact-card .wp-block-columns{margin:0;gap:1.5rem}
.ppc-contact-card .ppc-eyebrow{margin:0 0 .3rem}
.ppc-contact-card p{margin:0 0 .35rem;line-height:1.45}
.ppc-contact-card p:last-child{margin-bottom:0}
@media(max-width:600px){.ppc-contact-card .wp-block-columns{flex-wrap:wrap;gap:.9rem}}

/* Footer-links zichtbaar op donkere achtergrond (theme.json link-kleur = donkere contrast) */
footer.wp-block-template-part a{color:#F6F5F1;text-decoration:none}
footer.wp-block-template-part a:hover{color:var(--wp--preset--color--accent-1,#00B86B);text-decoration:underline}

/* ---------- PPC titel-grootte aanpassingen (block-titels) ---------- */
/* Detailpagina: producttitel een pak kleiner (was de grote default-H1) */
.single-product h1.wp-block-post-title {
	font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
/* Shoppagina (block-grid) + verwante producten: iets kleiner en minder vet */
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wp-block-post-title a {
	font-size: 1rem !important;
	font-weight: 600;
	line-height: 1.3;
}

/* ---------- PPC kadrering productfoto's (uitgelichte + grid) ---------- */
/* Bronfoto's variëren van vierkant tot 16:9; een uniform liggend kader met
   contain + omlijsting zorgt dat elke laptop in een identiek frame staat. */
ul.products li.product img,
li.wc-block-product .wp-block-woocommerce-product-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	background: #fff;
	padding: 0.9rem;
	border: 1px solid var(--ppc-hairline);
	border-radius: 10px;
}

/* ---------- PPC transparante fotoachtergrond ---------- */
/* Foto's hebben nu een transparante achtergrond (wit weggeknipt); laat de
   kaart-/paginakleur doorschijnen i.p.v. een wit vlak. */
ul.products li.product img,
li.wc-block-product .wp-block-woocommerce-product-image img,
.single-product .woocommerce-product-gallery img,
.single-product .woocommerce-product-gallery__wrapper {
	background: transparent !important;
}

/* ---------- PPC kaart centreren + omlijning foto weg ---------- */
/* Geen kader/box meer rond de (transparante) productfoto's */
ul.products li.product img,
li.wc-block-product .wp-block-woocommerce-product-image img {
	border: none !important;
	background: transparent !important;
}
/* Tekst onder de foto gecentreerd (uitgelichte grid + shop block-grid) */
ul.products li.product,
li.wc-block-product {
	text-align: center;
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wp-block-post-title a,
li.wc-block-product .wp-block-woocommerce-product-price {
	text-align: center !important;
}
/* Knoptekst gecentreerd (grid, block-grid én detailpagina) */
ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-product-button .wp-block-button__link {
	text-align: center !important;
	justify-content: center !important;
}

/* ---------- PPC fotokader past in kaart (geen overflow) ---------- */
ul.products li.product img,
li.wc-block-product .wp-block-woocommerce-product-image img {
	box-sizing: border-box !important;  /* padding telt NIET bovenop 100% breedte */
	max-width: 100% !important;
	padding: 0.4rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---------- PPC product-galerij slider (detailpagina) ---------- */
.woocommerce-product-gallery { position: relative; }
/* Vast hoofdkader: elke foto zelfde verhouding/hoogte -> geen sprongen */
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	aspect-ratio: 4 / 3 !important;
	object-fit: contain !important;
	width: 100% !important;
	background: transparent !important;
}
/* Thumbnails onderaan */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: auto; margin: 0; float: none; }
.woocommerce-product-gallery .flex-control-thumbs img {
	width: 64px; height: 48px; object-fit: contain; background: transparent !important;
	border: 1px solid var(--ppc-hairline); border-radius: 8px; padding: 3px; cursor: pointer;
	opacity: .6; aspect-ratio: auto !important; transition: opacity .15s, border-color .15s;
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1; border-color: var(--ppc-green);
}
/* Vorige/volgende-pijltjes op het hoofdbeeld */
.woocommerce-product-gallery .flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute; top: 38%; transform: translateY(-50%);
	width: 44px; height: 44px; display: flex !important; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--ppc-hairline); border-radius: 50%;
	box-shadow: 0 6px 18px -8px rgba(20,24,31,.35); opacity: 1 !important; z-index: 6;
	font-size: 0; color: var(--ppc-ink); text-decoration: none;
}
.woocommerce-product-gallery .flex-direction-nav a::before {
	font-size: 24px; line-height: 1; font-weight: 700; color: var(--ppc-ink);
	font-family: inherit; content: '';
}
.woocommerce-product-gallery .flex-prev { left: 8px; }
.woocommerce-product-gallery .flex-next { right: 8px; }
.woocommerce-product-gallery .flex-prev::before { content: '\2039'; }  /* ‹ */
.woocommerce-product-gallery .flex-next::before { content: '\203A'; }  /* › */

/* ---------- PPC galerij pijltjes fix (echte chevrons) ---------- */
.woocommerce-product-gallery .flex-direction-nav a {
	width: 40px !important; height: 40px !important;
}
.woocommerce-product-gallery .flex-direction-nav a::before {
	content: '' !important;
	display: block; width: 10px; height: 10px;
	border: 0 !important;
	border-right: 2.5px solid var(--ppc-ink) !important;
	border-bottom: 2.5px solid var(--ppc-ink) !important;
	border-radius: 1px;
	font-size: 0 !important; background: none !important;
}
.woocommerce-product-gallery .flex-prev::before { transform: rotate(135deg); margin-left: 4px; }
.woocommerce-product-gallery .flex-next::before { transform: rotate(-45deg); margin-right: 4px; }

/* ---------- PPC galerij pijltjes verfijnd (subtiel, geen lompe bollen) ---------- */
.woocommerce-product-gallery .flex-direction-nav a {
	width: 34px !important; height: 34px !important;
	top: 50% !important;
	background: rgba(255,255,255,.78) !important;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	border: 1px solid var(--ppc-hairline) !important;
	box-shadow: 0 2px 8px -4px rgba(20,24,31,.3) !important;
	opacity: .85; transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}
.woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
.woocommerce-product-gallery .flex-direction-nav a:hover {
	background: #fff !important; border-color: var(--ppc-green) !important;
}
.woocommerce-product-gallery .flex-direction-nav a::before {
	width: 8px !important; height: 8px !important;
	border-right-width: 2px !important; border-bottom-width: 2px !important;
}

/* ---------- PPC lijst knop uitlijning (altijd op één lijn) ---------- */
@media (min-width: 601px) {
	body.ppc-list-view li.wc-block-product {
		flex-wrap: nowrap !important;
	}
	body.ppc-list-view li.wc-block-product .wp-block-post-title {
		flex: 1 1 auto !important;
		min-width: 0 !important;   /* mag krimpen, geen overflow */
	}
	body.ppc-list-view li.wc-block-product .wp-block-woocommerce-product-price {
		flex: 0 0 auto !important;
		min-width: 110px;
	}
	/* knop altijd rechts, vaste kolom zodat 'Toevoegen' én 'in winkelwagen' even breed staan */
	body.ppc-list-view li.wc-block-product .wp-block-woocommerce-product-button {
		flex: 0 0 220px !important;
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center;
		margin: 0 0 0 .25rem !important;
	}
	body.ppc-list-view li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
	body.ppc-list-view li.wc-block-product .wp-block-woocommerce-product-button a {
		white-space: nowrap;
	}
}