/* De USP-rij en de categorierij staan in een .section (max 1240px met 32px
   binnenmarge), dus die beginnen vanzelf op dezelfde lijn als de rest: 132px.
   De Patty-tip-banner hangt rechtstreeks onder .pb-main en stak met zijn eigen
   1240px 32px verder naar links uit dan alles eromheen. Vandaar 1176: dat is
   1240 min die twee marges. */

.pb-main .usp-row,
.pb-main .shop-cats{
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto
}

.pb-main .shop-banner{
	width: 100%;
	max-width: 1176px;
	margin-left: auto;
	margin-right: auto
}

/* ---- shop-hero ---- */

/* De crèmekleurige band liep tot 1240px en daarna stond er wit naast: de
   kleur hield midden op het scherm op. Nu loopt de band van rand tot rand en
   houdt --pb-edge de tekst erin op dezelfde lijn als de rest van de pagina
   (132px op desktop, 18px op mobiel) - dezelfde aanpak als de hero van een
   productcategorie. De streep eronder is weg: de band scheidt zelf al. */

.pb-main .shop-hero{
	max-width: none;
	background: #f7efe8;
	border-bottom: 0;
	padding-top: 32px;
	padding-right: var(--pb-edge);
	padding-bottom: 24px;
	padding-left: var(--pb-edge)
}

.pb-main .shop-hero .eyebrow{
	margin-bottom: 6px
}

.pb-main .shop-hero h1{
	font-family: Fraunces, serif;
	color: var(--brown);
	line-height: .96;
	letter-spacing: -.03em;
	margin: 0 0 10px
}

.pb-main .shop-hero p{
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.55;
	max-width: 60ch
}

.pb-main .shop-search{
	margin-top: 14px;
	display: flex;
	gap: 8px;
	max-width: 520px
}

.pb-main .shop-search input{
	flex: 1;
	min-width: 0;
	height: 42px;
	border: 1px solid var(--line);
	background: #fffaf5;
	border-radius:var(--r);
	padding: 0 11px;
	color: var(--dark);
	font: 500 13px/1 Manrope, system-ui, sans-serif
}

.pb-main .shop-search button{
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	display: grid;
	place-items: center;
	border-radius:var(--r);
	background: var(--brown);
	color: #fff
}

.pb-main .shop-search button svg{
	width: 22px;
	height: 22px;
	stroke: currentColor;
	stroke-width: 1.8;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round
}

/* ---- live productzoeker: resultaten-dropdown onder het zoekveld ----
   Absoluut gepositioneerd t.o.v. .shop-search zodat er GEEN pagina-scroll is;
   inhoud wordt client-side gevuld door het Code-element in de shop-hero. */

.pb-main .shop-search{
	position: relative
}

.pb-main .shop-search-drop{
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 50;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden auto;
	max-height: min(66vh, 430px);
	box-shadow: 0 20px 44px -20px rgba(60, 40, 25, .42)
}

.pb-main .shop-search-drop[hidden]{
	display: none
}

.pb-main .shop-search-drop .ss-item{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid #f1e7dd
}

.pb-main .shop-search-drop .ss-item:hover{
	background: #f7efe8
}

.pb-main .shop-search-drop .ss-item img{
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	object-fit: contain;
	background: #f5f0eb;
	border-radius: 10px;
	padding: 3px;
	display: block
}

.pb-main .shop-search-drop .ss-name{
	flex: 1;
	min-width: 0;
	color: #201a16;
	letter-spacing: -.01em;
	font: 850 13.5px/1.25 Manrope, system-ui, sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.pb-main .shop-search-drop .ss-price{
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--brown);
	font-family: Fraunces, serif;
	font-size: 15px;
	font-weight: 600
}

.pb-main .shop-search-drop .ss-price del{
	margin-right: 5px;
	opacity: .55;
	font-weight: 500
}

.pb-main .shop-search-drop .ss-price ins{
	text-decoration: none
}

/* ---- categorie-treffers in de dropdown ------------------------------------
   Zelfde rij-opmaak als een product (.ss-item), maar met een icoon in plaats
   van een productfoto en het aantal producten in plaats van een prijs. */
.pb-main .shop-search-drop .ss-kop{
	padding: 10px 12px 3px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	font: 800 10.5px/1 Manrope, system-ui, sans-serif
}

.pb-main .shop-search-drop .ss-ico{
	display: grid;
	place-items: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #f2e6da;
	color: var(--brown)
}

.pb-main .shop-search-drop .ss-ico svg{
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round
}

.pb-main .shop-search-drop .ss-count{
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--muted);
	font: 700 12px/1 Manrope, system-ui, sans-serif
}

.pb-main .shop-search-drop .ss-empty{
	padding: 14px;
	color: var(--muted);
	font: 600 13px/1.4 Manrope, system-ui, sans-serif
}

.pb-main .shop-search-drop .ss-all{
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
	border: 0;
	padding: 11px 14px;
	background: #faf4ee;
	color: var(--brown);
	letter-spacing: .01em;
	font: 850 12.5px/1 Manrope, system-ui, sans-serif
}

.pb-main .shop-search-drop .ss-all:hover{
	background: #f2e6da;
	color: var(--accent)
}

/* ---- usp-row (desktop = 4-koloms balk; mobiel = horizontale scroller) ---- */

.pb-main .usp-row{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding-top: 12px;
	padding-right: 32px;
	padding-bottom: 8px;
	padding-left: 32px
}

.pb-main .usp{
	min-height: 62px;
	background: #efe6de;
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: 0 6px 12px rgba(77, 51, 34, .06);
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 8px;
	align-items: center;
	padding: 10px;
	color: var(--brown);
	text-align: left
}

.pb-main .usp svg{
	width: 24px;
	height: 24px;
	stroke: var(--accent);
	stroke-width: 1.7;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round
}

.pb-main .usp strong{
	display: block;
	font-size: 12px;
	line-height: 1.15;
	font-weight: 900
}

.pb-main .usp span{
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.2;
	font-weight: 700
}

/* ---- shop-cats (categorie-tegels; desktop grid, mobiel scroller) ---- */

.pb-main .shop-cats{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 13px;
	padding-top: 0;
	padding-right: 32px;
	padding-bottom: 14px;
	padding-left: 32px
}

.pb-main .shop-cat{
	position: relative;
	height: 140px;
	min-height: 140px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 15px;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow2);
	color: #fff;
	background: #efe6de;
	background-size: cover;
	background-position: center;
	isolation: isolate
}

.pb-main .shop-cat::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to top, rgba(38, 27, 20, .82) 0%, rgba(38, 27, 20, .34) 46%, rgba(38, 27, 20, 0) 100%)
}

.pb-main .shop-cat-title{
	position: relative;
	z-index: 2;
	font-family: Fraunces, serif;
	font-size: 21px;
	line-height: 1.1;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .28)
}

.pb-main .shop-cat-count{
	position: relative;
	z-index: 2;
	margin-top: 2px;
	color: #fff;
	opacity: .9;
	font-size: 11px;
	font-weight: 600;
	font-family: Manrope, system-ui, sans-serif;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .28)
}

/* ---- filter-pills (statisch/decoratief) ---- */

.pb-main .filter-row{
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 14px;
	padding-left: 0
}

.pb-main .filter-row::-webkit-scrollbar{
	display: none
}

.pb-main .filter-pill{
	flex: 0 0 auto;
	height: 32px;
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	background: #efe6de;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
	color: var(--brown);
	font-weight: 850;
	cursor: pointer;
	user-select: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease
}

.pb-main .filter-pill:hover{
	border-color: var(--accent);
	color: var(--accent)
}

.pb-main .filter-pill.active:hover{
	color: #fff
}

.pb-main .filter-pill.active{
	background: var(--brown);
	color: #fff;
	border-color: var(--brown)
}

/* ---- categorie-hero (beeld-kaart met overlay, in de stijl van .pb-upd-card) ----
   Grote fotokaart met de categorie-afbeelding (echte <img>, object-fit:cover),
   donkere overlay en linksonder een label-pill + de categorienaam als H1.
   Afbeelding komt uit de term-thumbnail (zie pb-productcat-hero.code.php);
   geen afbeelding = bruine merkkleur-kaart. */

.pb-main .cat-card{
	position: relative;
	/* Was een vaste hoogte van 400px. Op 1176px breed werd de kaart daarmee
	   2,94:1, terwijl de categoriefoto's 2,00:1 zijn (scheren, borstelen,
	   huisvesting), 1,78:1 (drogen, nagelverzorging) of 1,57:1 (voeding). Met
	   object-fit:cover sneed dat 32 tot 47 procent van de foto weg - bij
	   "Scheren" verdween de helft van de hond en het tekstpaneel rechts.

	   2/1 is de breedste verhouding in die set: die drie foto's passen nu
	   precies, en de smallere verliezen 11 respectievelijk 21 procent in plaats
	   van 39 en 47. Ruimer maken (16/9) zou de 2:1-foto's juist aan de zijkant
	   afsnijden, en daar zit bij deze foto's het tekstpaneel.

	   min-height is HIER ALLEEN een terugval voor als aspect-ratio ooit wegvalt
	   (een minifier heeft `2 / 1` eerder eens gestript; vandaar ook geen
	   spaties). Het is bewust GEEN ondergrens meer.

	   Waarom niet: bij een vaste aspect-ratio duwt een min-height die hoger is
	   dan de breedte toelaat de BREEDTE op in plaats van de hoogte. Met
	   min-height 230px op mobiel werd de kaart 460px breed in een venster van
	   390 - 106px buiten beeld, en op 320px zelfs 176px. Precies het
	   "afgeschreven" beeld dat op een telefoon te zien was. Nagerekend: die
	   ondergrens bond op élke telefoonbreedte, en ook nog in de band tussen 641
	   en 767px.

	   120px is zo gekozen dat hij nergens meer bindt: de smalste container die
	   voorkomt is ongeveer 284px (venster 320 min de zijmarges) en die geeft al
	   142px hoogte. Klapt aspect-ratio ooit weg, dan blijft er 120px staan -
	   zichtbaar kapot in plaats van onzichtbaar ingeklapt. */
	aspect-ratio: 2/1;
	min-height: 120px;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--brown);
	box-shadow: var(--shadow)
}

.pb-main .cat-card img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.pb-main .cat-card::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(38, 27, 20, .08), rgba(38, 27, 20, .78))
}

.pb-main .cat-copy{
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start
}

.pb-main .cat-row{
	display: flex;
	align-items: center;
	margin-bottom: 10px
}

.pb-main .cat-copy h1{
	font-family: Fraunces, serif;
	font-size: 46px;
	line-height: .98;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
	max-width: 60%;
	margin: 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .28)
}

/* ---- product-grid (Alle producten): alleen de indeling van het raster. ---- */

.pb-main .product-grid{
	display: grid;
	align-items: stretch;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 16px;
	padding-left: 0
}

/* ---- shop-banner (Patty tip) ---- */

.pb-main .shop-banner{
	margin-top: 4px;
	margin-bottom: 18px;
	background: linear-gradient(135deg, #6c4d38, #8d644b);
	color: #fff;
	border-radius: 10px;
	padding: 20px 24px;
	box-shadow: var(--shadow)
}

.pb-main .shop-banner .label{
	background: #fff;
	color: var(--brown);
	border-color: #fff
}

.pb-main .shop-banner h3{
	font-family: Fraunces, serif;
	font-size: 26px;
	line-height: 1;
	margin: 10px 0 8px
}

.pb-main .shop-banner p{
	color: #f3e3d8;
	font-size: 13px;
	line-height: 1.45;
	margin: 0 0 12px;
	max-width: 60ch
}

.pb-main .shop-banner .cta{
	background: #fff !important;
	color: var(--brown) !important;
	box-shadow: none !important
}

/* =========================================================
   TABLET (768–1024px): productraster 3-koloms.
   ========================================================= */

@media (min-width:768px) and (max-width:1024px) {
  .pb-main .product-grid{
		grid-template-columns: repeat(3, 1fr)
	}
}

/* =========================================================
   MOBIEL (<=767px): rijen worden horizontale scrollers / smallere grids,
   secties vullen de volle breedte met 18px binnenmarge (net als pb-common).
   ========================================================= */

@media (max-width:767px) {
  .pb-main .usp-row,
	.pb-main .shop-cats{
		max-width: none;
		margin-left: 0;
		margin-right: 0
	}
  .pb-main .shop-banner{
		/* width:100% plus 18px marge = 18px te breed; auto laat de marges hun
		   werk doen. */
		width: auto;
		max-width: none;
		margin-left: 18px;
		margin-right: 18px
	}
  .pb-main .shop-hero{
		padding-top: 24px;
		padding-right: 18px;
		padding-bottom: 18px;
		padding-left: 18px
	}
  .pb-main .usp-row{
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scrollbar-width: none;
		padding-left: 18px;
		padding-right: 18px
	}
  .pb-main .usp-row::-webkit-scrollbar{
		display: none
	}
  .pb-main .usp{
		flex: 0 0 150px
	}
  .pb-main .shop-cats{
		display: flex;
		grid-template-columns: none;
		gap: 10px;
		overflow-x: auto;
		scrollbar-width: none;
		padding-left: 18px;
		padding-right: 18px
	}
  .pb-main .shop-cats::-webkit-scrollbar{
		display: none
	}
  .pb-main .shop-cat{
		flex: 0 0 188px
	}
  .pb-main .filter-row{
		padding-left: 18px;
		padding-right: 18px
	}
  .pb-main .shop-row,
	.pb-main .product-grid{
		padding-left: 18px;
		padding-right: 18px
	}
  .pb-main .product-grid{
		grid-template-columns: 1fr 1fr;
		gap: 12px
	}
  /* Hier stond een min-height van 230px als ondergrens. Die duwde de kaart
	   juist buiten beeld - zie de uitleg bij .cat-card hierboven. De verhouding
	   2/1 geeft op 354px breed 177px hoogte, en daar past de label-pil met de
	   categorienaam prima in (pil 28px, titel 27px, 16px ondermarge). */
  .pb-main .cat-copy{
		left: 16px;
		right: 16px;
		bottom: 16px
	}
  .pb-main .cat-copy h1{
		font-size: 27px;
		max-width: 88%
	}
}