/* ==========================================================================
   Patty Bakker — de producttegel
   ==========================================================================
   EEN definitie van de producttegel, voor de hele site. De tegel staat op:

     homepage            .shop-row     (rij "Must Haves")
     /doodles/het-ras/   .shop-row
     /must-haves/        .shop-row     (winkelarchief, Patty's favorieten)
     categoriepagina     .product-grid (alle producten in die categorie)
     productdetail       ul.products   (relevante producten, WooCommerce-opmaak)

   Hij stond in VIJF bestanden en ze waren uit elkaar gegroeid. De verschillen
   die je op het scherm zag:

     pb-index          kaart 146px breed, padding 8px, prijs als oranje badge
     pb-shop           .shop-row: grote kaart (goed) / .product-grid: compacte
                       kaart met oranje prijsbadge en een volle bruine knop
     pb-product-cat.   kopie van de goede kaart, maar met min-height 326px,
                       een hover-lift en het hartje op 22px i.p.v. 10px
     pb-product-detail WooCommerce-opmaak, eigen maten (foto 118px, titel in
                       Manrope) - een duidelijk andere tegel dan ernaast
     pb-favorites      de favorietenpagina; die heeft een eigen ontwerp en
                       blijft hier buiten

   Vanaf nu: dit bestand bepaalt hoe de tegel eruitziet, de paginabestanden
   bepalen alleen nog hoeveel kolommen er naast elkaar staan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   De veegrij (.shop-row)
   --------------------------------------------------------------------------
   Op desktop een raster, op een telefoon een rij waar je doorheen veegt.
   Hoeveel kolommen er naast elkaar staan is een keuze per pagina: de
   homepage en /doodles/het-ras/ tonen er vijf, het winkelarchief vier (daar
   staan acht producten, dus twee nette rijen). Die uitzondering hangt aan de
   body-class die WooCommerce zelf op de winkelpagina zet - dat is de enige
   manier om hier vanuit het gedeelde bestand onderscheid te maken, want dit
   bestand laadt met opzet als laatste.

   Het raster van een categoriepagina (.product-grid) staat niet hier: dat
   blijft in pb-shop.css en pb-product-categorie.css, want daar hoort de
   kolomindeling bij de pagina.
   -------------------------------------------------------------------------- */

.pb-main .shop-row{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	/* Alle kaarten in een rij even hoog. Zonder dit is elke kaart zo hoog als
	   zijn eigen inhoud en staat de onderrand overal net iets anders. */
	align-items: stretch;
	/* Bewust alleen onder. Een padding-shorthand zou de 18px zijmarge
	   wegvagen die de paginabestanden op mobiel zetten - dit bestand laadt
	   immers als laatste. */
	padding-bottom: 4px;
}

body.woocommerce-shop .pb-main .shop-row{
	grid-template-columns: repeat(4, 1fr);
}

/* --------------------------------------------------------------------------
   De kaart
   -------------------------------------------------------------------------- */

.pb-main .product,
.pb-favorites-list ul.products li.product,
.pb-main .pb-related ul.products li.product{
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	height: 100%;
	margin: 0;
	padding: 12px;
	background: #fff;
	border: 1px solid #eee2d8;
	border-radius: var(--r);
	box-shadow: var(--shadow2, 0 8px 18px rgba(77, 51, 34, .10));
	overflow: hidden;
	list-style: none;
	text-align: left;
}

/* De hele kaart is klikbaar. Bij onze eigen opmaak via een gestretchte
   <a class="card-link">; WooCommerce heeft die niet, daar rekt de link om
   foto+titel zich op met een pseudo-element. De koopknop (z-index 5) en het
   hartje (z-index 6) liggen daar bovenop en blijven dus gewoon werken. */

.pb-main .product .card-link{
	position: absolute;
	inset: 0;
	z-index: 2;
}

.pb-favorites-list ul.products li.product a.woocommerce-LoopProduct-link,
.pb-main .pb-related ul.products li.product a.woocommerce-LoopProduct-link{
	display: block;
	color: inherit;
	text-decoration: none;
}

.pb-favorites-list ul.products li.product a.woocommerce-LoopProduct-link::before,
.pb-main .pb-related ul.products li.product a.woocommerce-LoopProduct-link::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* De <a> om de foto (homepage, /het-ras/) moet de volle breedte pakken,
   anders krimpt hij om de foto heen en staat die niet meer strak in de kaart. */

.pb-main .product > a:not(.buy):not(.card-link){
	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Foto
   -------------------------------------------------------------------------- */

/* Op de homepage en /doodles/het-ras/ zit de foto in een <a> om hem klikbaar
   te maken, op /must-haves/ en een categoriepagina staat hij los in de kaart.
   Vandaar een afstammelingsselector in plaats van een direct-kindteken - met
   `> img` viel de foto op de homepage buiten de opmaak en bleef hij op zijn
   eigen afmetingen staan. */

.pb-main .product img,
.pb-favorites-list ul.products li.product img,
.pb-main .pb-related ul.products li.product img{
	display: block;
	width: 100%;
	height: 200px;
	margin: 0 0 11px;
	padding: 0;
	background: #f5f0eb;
	border-radius: var(--r);
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Titel — altijd Fraunces, net als alle andere kaarttitels op de site
   -------------------------------------------------------------------------- */

.pb-main .product h3,
.pb-favorites-list ul.products li.product .woocommerce-loop-product__title,
.pb-main .pb-related ul.products li.product .woocommerce-loop-product__title{
	margin: 0 2px 10px;
	padding: 0;
	min-height: 0;
	color: var(--brown);
	font-family: Fraunces, Georgia, serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.02em;
}

/* De sterretjes staan wel in de opmaak maar zijn nergens ingevuld; zolang dat
   zo is tonen we ze niet. */

.pb-main .product .rating{
	display: none;
}

/* --------------------------------------------------------------------------
   Prijs
   --------------------------------------------------------------------------
   margin-top:auto duwt de prijs naar de onderrand, zodat de prijzen van alle
   kaarten in een rij op dezelfde hoogte staan - ook als de ene titel twee en
   de andere drie regels heeft. Werkt alleen omdat de kaart hierboven een
   flex-kolom is; op een display:block doet die marge niets.

   padding-right houdt de plek van de winkelmandknop vrij: die staat absoluut
   rechtsonder en zou anders over de prijs heen vallen.
   -------------------------------------------------------------------------- */

.pb-main .product .price,
.pb-favorites-list ul.products li.product .price,
.pb-main .pb-related ul.products li.product .price{
	position: static;
	display: flex;
	align-items: center;
	width: auto;
	max-width: none;
	min-height: 40px;
	margin: auto 0 0;
	padding: 0 50px 0 2px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--brown);
	font-family: Fraunces, Georgia, serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
}

.pb-main .product .price del,
.pb-favorites-list ul.products li.product .price del,
.pb-main .pb-related ul.products li.product .price del{
	opacity: .55;
	margin-right: 6px;
	font-size: .72em;
	font-weight: 400;
}

.pb-main .product .price ins,
.pb-favorites-list ul.products li.product .price ins,
.pb-main .pb-related ul.products li.product .price ins{
	background: none;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Winkelmandknop — icoonknop rechtsonder
   --------------------------------------------------------------------------
   font-size:0 is geen slordigheid: de knoptekst is "In winkelmand" en die
   past niet in 40x40. Zet je hem terug, dan duwt de tekst het wagentje eruit.
   Om diezelfde reden ook geen padding: 40px met 12px rondom laat 16px over
   voor een icoon van 19px en dan wordt het wagentje platgeknepen.

   Onze eigen opmaak heeft een <svg> in de knop; WooCommerce niet, daar staat
   hetzelfde wagentje als achtergrondafbeelding.
   -------------------------------------------------------------------------- */

.pb-main .product .buy,
.pb-favorites-list ul.products li.product .button,
.pb-main .pb-related ul.products li.product .button,
.pb-favorites-list ul.products li.product a.button,
.pb-main .pb-related ul.products li.product a.button{
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--r);
	background: var(--accent);
	color: #fff;
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(111, 72, 49, .22);
}

.pb-main .product .buy:hover,
.pb-favorites-list ul.products li.product .button:hover,
.pb-main .pb-related ul.products li.product .button:hover{
	background-color: #b96a47;
}

.pb-main .product .buy svg,
.pb-main .product .buy .icon{
	width: 19px;
	height: 19px;
	stroke-width: 1.7;
}

.pb-main .product .buy::after,
.pb-favorites-list ul.products li.product a.button::after,
.pb-main .pb-related ul.products li.product a.button::after{
	content: none;
}

/* WooCommerce zet geen icoon in de knop, dus die komt uit de achtergrond. */

.pb-favorites-list ul.products li.product .button,
.pb-main .pb-related ul.products li.product .button,
.pb-favorites-list ul.products li.product a.button,
.pb-main .pb-related ul.products li.product a.button{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h15l-2 9H8L6 6Z'/%3E%3Cpath d='M6 6 5 3H2'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E");
	background-position: center;
	background-size: 19px 19px;
	background-repeat: no-repeat;
	color: transparent;
}

/* WooCommerce hangt na "toevoegen" een tekstlink "Bekijk winkelmand" onder de
   knop. Die hoort in dit ontwerp niet op de kaart. */

.pb-main .product .added_to_cart,
.pb-main .shop-row .added_to_cart,
.pb-main .product-grid .added_to_cart,
.pb-favorites-list ul.products li.product .added_to_cart,
.pb-main .pb-related ul.products li.product .added_to_cart{
	display: none !important;
}

/* Het hartje (.pb-fav.pb-fav-card) wordt door pb-favorites.js in de kaart
   gezet en staat in pb-common.css: 31x31 op 10px van de hoek. Hier dus niets
   over - dat was juist waar de categoriepagina van afweek. */

/* ==========================================================================
   TABLET (768-1024px)
   ========================================================================== */

@media (min-width:768px) and (max-width:1024px) {
	.pb-main .shop-row,
	body.woocommerce-shop .pb-main .shop-row{
		grid-template-columns: repeat(3, 1fr);
	}
	.pb-main .shop-row .product{
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   MOBIEL (<=767px)
   --------------------------------------------------------------------------
   Twee soorten containers, twee indelingen:

   .shop-row      een veegrij. De kaart is 200px breed - smal genoeg dat de
                  volgende kaart half in beeld staat en je ziet dat er meer
                  is, breed genoeg dat de titel niet over drie regels breekt.
                  Prijs en knop delen de onderste regel; de knop gaat daarvoor
                  uit `absolute` terug in de stroom, anders blijft er onderin
                  een gat staan van de ruimte die hij niet inneemt.

   .product-grid  twee kaarten naast elkaar. Daar is 200px foto te hoog voor,
                  dus die blijft compacter. De knop blijft wel absoluut - er
                  is naast de prijs genoeg ruimte.
   ========================================================================== */

@media (max-width:767px) {

	/* -- veegrij -- */

	.pb-main .shop-row,
	body.woocommerce-shop .pb-main .shop-row{
		display: flex;
		grid-template-columns: none;
		gap: 14px;
		align-items: stretch;
		overflow-x: auto;
		scrollbar-width: none;
		/* Op een telefoon loopt de rij door tot de schermrand - dat hoort bij
		   een veegrij - maar de eerste kaart begint wel op dezelfde 18px als
		   de rest van de pagina. */
		padding-left: 18px;
		padding-right: 18px;
	}
	.pb-main .shop-row::-webkit-scrollbar{ display: none }

	.pb-main .shop-row .product{
		flex: 0 0 200px;
		width: 200px;
		/* Terug naar auto. De kaart heeft op desktop `height:100%` om in een
		   raster mee te rekken, maar in deze flexrij zet een expliciete hoogte
		   juist `align-items:stretch` buitenspel - en dan werd elke kaart weer
		   zo hoog als zijn eigen titel. */
		height: auto;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			"foto  foto"
			"titel titel"
			"prijs knop";
		align-items: center;
		row-gap: 6px;
		column-gap: 8px;
	}
	.pb-main .shop-row .product > img,
	.pb-main .shop-row .product > a:not(.buy):not(.card-link){ grid-area: foto }
	.pb-main .shop-row .product h3{ grid-area: titel; margin-bottom: 0 }
	.pb-main .shop-row .product .price{
		grid-area: prijs;
		margin: 0;
		padding: 0 0 0 2px;
		justify-self: start;
	}
	.pb-main .shop-row .product .buy{
		grid-area: knop;
		position: static;
		right: auto;
		bottom: auto;
		justify-self: end;
	}

	/* -- raster van twee -- */

	.pb-main .product-grid .product{
		padding: 8px 8px 10px;
	}
	.pb-main .product-grid .product > img{
		height: 124px;
		margin-bottom: 8px;
	}
	.pb-main .product-grid .product h3{
		margin-bottom: 4px;
		font-size: 13px;
		line-height: 1.2;
	}
	.pb-main .product-grid .product .price{
		min-height: 34px;
		padding-right: 44px;
		font-size: 16px;
	}
	.pb-main .product-grid .product .buy{
		right: 8px;
		bottom: 8px;
		width: 34px;
		height: 34px;
		min-width: 34px;
		min-height: 34px;
	}
	.pb-main .product-grid .product .buy svg{
		width: 17px;
		height: 17px;
	}

	/* -- relevante producten op de productpagina: ook een veegrij -- */

	.pb-favorites-list ul.products li.product,
	.pb-main .pb-related ul.products li.product{
		flex: 0 0 200px;
	}
	.pb-favorites-list ul.products li.product img,
	.pb-main .pb-related ul.products li.product img{
		height: 150px;
	}
}

/* ==========================================================================
   Zoekresultaten — [pb_zoek_producten] (inc/pb-zoek-producten.php)
   ==========================================================================
   De tegels zelf staan hierboven; dit is alleen de kop en de leegmelding.
   Ze staan in dit bestand en niet in een eigen bestand omdat ze nergens
   zonder de tegels voorkomen.
   ========================================================================== */
/* De zoekpagina gebruikt bewust GEEN eigen kolommaat: de tegels moeten er
   precies zo uitzien als op /must-haves/ en de homepage. De basisregels
   hierboven regelen dat al (5 kolommen op desktop, 3 op tablet) en een raster
   loopt vanzelf door naar de volgende regel. Een eigen minmax() maakte de
   tegels hier smaller dan elders — dat was juist het verschil dat opviel.

   Alleen onder 768px moet er iets bij. Daar wordt .shop-row met opzet een
   VEEGRIJ (horizontaal scrollen, zoals op /must-haves/). Voor een winkelrij is
   dat goed, voor zoekresultaten niet: op "borstel" komen er 19 terug en dan
   staan er twee in beeld en zeventien buiten het scherm, zonder dat je ziet
   dat ze er zijn.

   Twee klassen op één element (.pb-main.pb-zoek) geeft een hogere
   specificiteit dan `.pb-main .shop-row`, zodat dit binnen die media-query
   wint zonder !important. */
@media (max-width: 767px) {
	.pb-main.pb-zoek .shop-row{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
		overflow: visible;
		padding-left: 0;
		padding-right: 0;
	}
	.pb-main.pb-zoek .shop-row .product{
		flex: initial;
		width: auto;
		scroll-snap-align: none;
	}
}

.pb-zoek-kop { margin: 0 0 18px; color: var(--muted);
  font: 600 16px/1.6 Manrope, system-ui, sans-serif; }
.pb-zoek-kop b, .pb-zoek-kop strong { color: var(--brown); }
.pb-zoek-leeg { margin: 0; max-width: 60ch; color: var(--muted);
  font: 600 16px/1.6 Manrope, system-ui, sans-serif; }
.pb-zoek-leeg a { color: var(--accent); font-weight: 800; }