/*
Theme Name: PCT Truffels
Theme URI: https://www.pcttruffels.nl
Author: Tim van Lieshout
Description: Blokthema voor Pauliens Chocoladetruffels in Assendelft. Warm en ambachtelijk, gebouwd voor WooCommerce met afhalen, markten en bezorging in de buurt. Geen verzending.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Version: 4.7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pct-truffels
Tags: block-theme, e-commerce, full-site-editing
*/

/* Alle opmaak staat in theme.json. Wat hier staat is wat theme.json niet kan. */

/* Truffelbol als tijdelijke productafbeelding, en als versiering. */
.pct-truffel {
	position: relative;
	display: block;
	border-radius: 50%;
	background: radial-gradient( circle at 34% 27%, var( --pct-truffel-1, #9a6b45 ), var( --pct-truffel-2, #2e1b11 ) 70% );
	box-shadow: inset -7px -9px 20px rgba( 0, 0, 0, .34 ), 0 12px 26px rgba( 43, 26, 17, .2 );
}

.pct-truffel::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: radial-gradient( rgba( 255, 255, 255, .22 ) 1px, transparent 1px );
	background-size: 7px 7px;
	opacity: .55;
	mix-blend-mode: overlay;
}

/* --- Productkaarten in een raster --------------------------------------
 * Foto's hebben allemaal een andere verhouding, en dan lopen de rijen scheef:
 * de ene kaart eindigt hoog, de andere laag. Twee dingen lossen dat op:
 * elke foto vierkant bijsnijden, en de knop naar de onderkant duwen.
 * ---------------------------------------------------------------------- */

.wp-block-post-template.is-layout-grid > li,
.wc-block-product-template.is-layout-grid > li {
	display: flex;
}

.wp-block-post-template.is-layout-grid > li > .wp-block-group,
.wc-block-product-template.is-layout-grid > li > .wp-block-group {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Het tekstblok onder de foto vult de rest van de kaart. */
.wp-block-post-template.is-layout-grid > li > .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Prijs en knop onderaan, ongeacht hoe lang de productnaam is. */
.wp-block-post-template .wp-block-woocommerce-product-button,
.wc-block-product-template .wp-block-woocommerce-product-button {
	margin-top: auto;
}

/* Alle productfoto's vierkant en bijgesneden. */
.wc-block-product-template .wc-block-components-product-image img,
.wp-block-post-template .wc-block-components-product-image img,
.wp-block-post-template .wp-block-woocommerce-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

.wp-block-post-template .wc-block-components-product-image {
	display: block;
	margin: 0;
}

/* Productnaam op twee regels houden, zodat de kaarten niet uit de pas lopen. */
.wp-block-post-template .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* "vanaf € 8,95" bij variabele producten leesbaar houden. */
.woocommerce div.product p.price del,
.wc-block-components-product-price del {
	opacity: .6;
	font-size: .85em;
}

/* Ophaal- en bezorgkeuze bij het afrekenen wat lucht geven. */
.wc-block-checkout__shipping-method .wc-block-components-radio-control__option {
	padding-block: var( --wp--preset--spacing--30 );
}

/* Focus altijd zichtbaar — ook op knoppen die WooCommerce zelf tekent. */
:where( a, button, input, select, textarea, summary ):focus-visible {
	outline: 2px solid var( --wp--preset--color--koper );
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* Gerelateerde producten: zelfde kaartopmaak, en nooit breder dan de pagina. */
.wp-block-woocommerce-product-collection { max-width: 100%; }
.wc-block-product-template { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--wp--preset--spacing--40); list-style: none; padding: 0; margin: 0; }
.wc-block-product-template > li { display: flex; }
.wc-block-product-template > li > .wp-block-group { display: flex; flex-direction: column; width: 100%; }
.wc-block-product-template > li > .wp-block-group > .wp-block-group { display: flex; flex-direction: column; flex: 1 1 auto; }
.wc-block-product-template .wp-block-woocommerce-product-button { margin-top: auto; }
.wc-block-product-template .wc-block-components-product-image img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; display: block; }

/* De kop boven gerelateerde producten hoort een gewone H2 te zijn. */
.wp-block-woocommerce-product-collection > .wp-block-heading {
	font-family: var( --wp--preset--font-family--petrona );
	font-size: var( --wp--preset--font-size--kop-groot );
	font-weight: 600;
	line-height: 1.15;
}

/* Bovenkopjes: zien eruit als een label, maar zijn geen kop.
   Als H6 gaven ze een sprong van H2 naar H6 in de koppenstructuur. */
.pct-bovenkop {
	font-family: var( --wp--preset--font-family--karla );
	font-size: var( --wp--preset--font-size--klein );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --wp--preset--color--gedempt );
}

/* --- Marktagenda: kaartje naast de lijst --------------------------- */
.pct-agenda { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var( --wp--preset--spacing--50 ); align-items: start; }
.pct-agenda--zonder-kaart { grid-template-columns: 1fr; }
.pct-kaart { width: 100%; height: auto; display: block; }
.pct-agenda__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pct-agenda__item { display: flex; gap: var( --wp--preset--spacing--30 ); align-items: baseline; padding: var( --wp--preset--spacing--30 ) 0; border-bottom: 1px solid var( --wp--preset--color--lijn ); }
.pct-agenda__item:last-child { border-bottom: 0; }
.pct-agenda__nr { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var( --wp--preset--color--koper ); color: var( --wp--preset--color--papier ); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.pct-agenda__tekst { display: flex; flex-direction: column; gap: 2px; }
.pct-agenda__dag { font-size: var( --wp--preset--font-size--klein ); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var( --wp--preset--color--gedempt ); }
.pct-agenda__naam { font-family: var( --wp--preset--font-family--petrona ); font-size: var( --wp--preset--font-size--kop-klein ); font-weight: 600; text-decoration: none; color: var( --wp--preset--color--chocolade ); }
.pct-agenda__naam:hover { color: var( --wp--preset--color--koper ); }
.pct-agenda__waar { font-size: var( --wp--preset--font-size--kleiner ); color: var( --wp--preset--color--zacht ); }
@media (max-width: 780px) { .pct-agenda { grid-template-columns: 1fr; } .pct-agenda__kaart { max-width: 320px; margin-inline: auto; } }

.pct-kaart-legenda { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: var( --wp--preset--font-size--klein ); color: var( --wp--preset--color--gedempt ); line-height: 1.4; }
.pct-kaart-legenda__thuis { flex: 0 0 11px; height: 11px; border-radius: 50%; background: var( --wp--preset--color--chocolade ); box-shadow: 0 0 0 3px var( --wp--preset--color--papier ); }

.pct-formulier { margin-block-start: var( --wp--preset--spacing--40 ); }
.pct-formulier__raster { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 0 var( --wp--preset--spacing--40 ); align-items: end; }
@media (max-width: 600px) { .pct-formulier__raster { grid-template-columns: 1fr; } }
.pct-formulier__veld { margin: 0 0 var( --wp--preset--spacing--30 ); }
.pct-formulier__veld label { display: block; margin-bottom: 6px; font-size: var( --wp--preset--font-size--kleiner ); font-weight: 600; color: var( --wp--preset--color--chocolade ); }
.pct-formulier__optioneel { font-weight: 400; color: var( --wp--preset--color--zacht ); }
.pct-formulier input, .pct-formulier select, .pct-formulier textarea { width: 100%; padding: 11px 13px; border: 1px solid var( --wp--preset--color--lijn ); border-radius: 3px; background: var( --wp--preset--color--papier ); color: var( --wp--preset--color--chocolade ); font: inherit; font-size: var( --wp--preset--font-size--kleiner ); }
.pct-formulier input:focus, .pct-formulier select:focus, .pct-formulier textarea:focus { outline: 2px solid var( --wp--preset--color--koper ); outline-offset: 1px; border-color: var( --wp--preset--color--koper ); }
.pct-formulier textarea { resize: vertical; }
.pct-formulier__vangnet { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pct-formulier__knop { margin: var( --wp--preset--spacing--40 ) 0 var( --wp--preset--spacing--20 ); }
.pct-formulier__knop button { border: 0; cursor: pointer; }
.pct-formulier__klein { margin: 0; font-size: var( --wp--preset--font-size--klein ); color: var( --wp--preset--color--zacht ); }
.pct-formulier__fout { padding: 12px 14px; border-left: 3px solid var( --wp--preset--color--koper ); background: var( --wp--preset--color--zand ); font-size: var( --wp--preset--font-size--kleiner ); }
.pct-formulier__gelukt { padding: var( --wp--preset--spacing--40 ); border: 1px solid var( --wp--preset--color--lijn ); background: var( --wp--preset--color--creme ); }
.pct-formulier__gelukt p { margin: 0; }

/* Vinkjes bij afrekenen: gelijke tussenruimte en leesbaarder label. pct-afrekenen-vinkjes */
.wp-block-woocommerce-checkout .wc-block-components-checkbox { margin-block: 0; padding-block: 8px; }
.wp-block-woocommerce-checkout .wc-block-checkout__add-note { margin-top: 0; }
.wp-block-woocommerce-checkout .wc-block-checkout__order-fields { margin-bottom: 0; }

.wp-block-woocommerce-checkout .wc-block-components-checkbox__label { font-size: var( --wp--preset--font-size--kleiner ); line-height: 1.4; }
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input[type='checkbox'] { border-color: var( --wp--preset--color--lijn ); }

.pct-portret { flex: 0 0 88px; margin: 0; }
.pct-portret img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; display: block; }
@media (max-width: 600px) { .pct-portret { flex-basis: 68px; } .pct-portret img { width: 68px; height: 68px; } }

.pct-doos__beeld { margin: 0 0 var( --wp--preset--spacing--30 ); }
.pct-doos__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
.pct-doos h3 { margin: 0 0 var( --wp--preset--spacing--20 ); }
.pct-doos p { margin: 0 0 var( --wp--preset--spacing--30 ); }

.pct-social { display: flex; gap: var( --wp--preset--spacing--30 ); margin: var( --wp--preset--spacing--30 ) 0 0; flex-wrap: wrap; }
.pct-social__link { display: inline-flex; align-items: center; gap: 7px; font-size: var( --wp--preset--font-size--kleiner ); text-decoration: none; color: inherit; }
.pct-social__link svg { flex: 0 0 20px; }
.pct-social__link span { text-decoration: underline; text-underline-offset: 3px; }
.pct-social__link:hover span { text-decoration: none; }

.pct-social--kop { display: inline-flex; gap: 14px; margin: 0; align-items: center; }
.pct-social--kop .pct-social__link { color: var( --wp--preset--color--gedempt ); }
.pct-social--kop .pct-social__link:hover { color: var( --wp--preset--color--koper ); }
@media (max-width: 780px) { .pct-social--kop { display: none; } }

/* De twee doosblokken: knoppen op gelijke hoogte, ook als de ene tekst langer is. */
.pct-doos { display: flex; flex-direction: column; }
.pct-doos > .wp-block-buttons { margin-top: auto; padding-top: var( --wp--preset--spacing--20 ); }

/* Omlijnde knoppen even hoog als gevulde: de rand telt mee, dus haal hem
   van de binnenruimte af. Geldt overal, ook in de kop en op de zakelijke pagina. */
.wp-block-button.is-style-outline > .wp-block-button__link { padding-block: calc( 0.96em - 2px ); }

/* Sfeerbeeld uit de keuken op Over ons. */
.pct-keukenstrook { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: var( --wp--preset--spacing--30 ); }
.pct-keukenstrook__item { margin: 0; }
.pct-keukenstrook__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; display: block; }
.pct-keukenstrook__item figcaption { margin-top: 7px; font-size: var( --wp--preset--font-size--klein ); letter-spacing: .1em; text-transform: uppercase; color: var( --wp--preset--color--gedempt ); }
@media (max-width: 700px) { .pct-keukenstrook { grid-template-columns: 1fr 1fr; } .pct-keukenstrook__item:last-child { display: none; } }

/* Voorbeelden van verpakkingen op de zakelijke pagina. */
.pct-verpakkingen { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: var( --wp--preset--spacing--30 ); margin-top: var( --wp--preset--spacing--40 ); }
.pct-verpakkingen__item { margin: 0; }
.pct-verpakkingen__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; display: block; }
.pct-verpakkingen__item figcaption { margin-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.pct-verpakkingen__item strong { font-family: var( --wp--preset--font-family--petrona ); font-size: var( --wp--preset--font-size--kleiner ); font-weight: 600; }
.pct-verpakkingen__item span { font-size: var( --wp--preset--font-size--klein ); color: var( --wp--preset--color--gedempt ); line-height: 1.35; }
@media (max-width: 780px) { .pct-verpakkingen { grid-template-columns: 1fr 1fr; } }