/*
Theme Name: BW Kledingshoppen
Theme URI: https://kledingshoppen.nl
Description: Modieus, redactioneel child block-thema voor kledingshoppen.nl — mode-inspiratie & styling-gids. Hallmark-branding (blush/aubergine + goud, Fraunces + Inter).
Author: Samautomation
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: bw-kledingshoppen
*/

/* Hallmark · custom · genre: editorial · tone: luxury-editorial-accessible
 * paper #FAF6F2 (light) · accent #E8A0A8 blush (warm) · display: Fraunces (roman/soft-serif)
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 */

:root {
	--ks-blush: #E8A0A8;
	--ks-blush-deep: #C97F8A;
	--ks-aubergine: #2B2030;
	--ks-creme: #FAF6F2;
	--ks-gold: #C9A36A;
	--ks-grey: #EBE6E2;
	--ks-tip: #6FA07E;
	--ks-soft: #6B6470;
	--ks-line: #E3DAD2;
	--ks-radius: 14px;
	--ks-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Basis / leesbaarheid ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--ks-blush); color: var(--ks-aubergine); }
.bw-kledingshoppen-content p { max-width: 68ch; }

a { transition: color .2s var(--ks-ease); }

/* ---------- Eyebrow / label ---------- */
.ks-eyebrow {
	display: inline-block;
	font-family: Inter, sans-serif;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ks-gold);
	margin: 0 0 .6rem;
}

/* ---------- Hero (pagina) ---------- */
.ks-hero {
	position: relative;
	background: linear-gradient(180deg, #fff 0%, var(--ks-creme) 100%);
	border-bottom: 1px solid var(--ks-line);
	padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.ks-hero__inner { max-width: 820px; margin: 0 auto; }
.ks-hero h1 { margin: 0 0 1rem; }
.ks-hero__lead { font-size: 1.2rem; color: var(--ks-soft); max-width: 60ch; }
.ks-hero--image { display: grid; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
@media (min-width: 880px){ .ks-hero--image { grid-template-columns: 1.1fr .9fr; } }
.ks-hero__media { border-radius: var(--ks-radius); overflow: hidden; aspect-ratio: 4/5; background: var(--ks-grey); }
.ks-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Gelegenheid/seizoen-tegels ---------- */
.ks-tiles {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.ks-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 190px;
	padding: 1.2rem;
	border-radius: var(--ks-radius);
	background: var(--ks-grey);
	color: var(--ks-aubergine);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: transform .35s var(--ks-ease), box-shadow .35s var(--ks-ease);
}
.ks-tile::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(160deg, rgba(232,160,168,.0) 35%, rgba(43,32,48,.55) 100%);
	opacity: 0; transition: opacity .35s var(--ks-ease);
}
.ks-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ks-tile__label { font-family: Fraunces, serif; font-size: 1.3rem; font-weight: 600; line-height: 1.15; }
.ks-tile__meta { font-size: .85rem; color: var(--ks-soft); margin-top: .15rem; }
.ks-tile:has(img) { color: #fff; }
.ks-tile:has(img) .ks-tile__meta { color: rgba(255,255,255,.85); }
.ks-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(43,32,48,.5); }
.ks-tile:has(img):hover::after { opacity: 1; }

/* ---------- Outfit/look-kaarten + galerij ---------- */
.ks-outfit-grid {
	display: grid;
	gap: 1.6rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.ks-outfit-card {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--ks-line);
	border-radius: var(--ks-radius);
	overflow: hidden;
	transition: transform .3s var(--ks-ease), box-shadow .3s var(--ks-ease);
}
.ks-outfit-card__media { aspect-ratio: 3/4; background: var(--ks-grey); position: relative; }
.ks-outfit-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-outfit-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.ks-outfit-card__title { font-family: Fraunces, serif; font-size: 1.18rem; font-weight: 600; line-height: 1.2; margin: 0; }
.ks-outfit-card__desc { font-size: .95rem; color: var(--ks-soft); margin: 0; }
.ks-outfit-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .5rem; }
.ks-outfit-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(43,32,48,.45); }

/* badges */
.ks-badge {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
	padding: .28rem .6rem; border-radius: 999px;
}
.ks-badge--look { background: var(--ks-aubergine); color: var(--ks-creme); }
.ks-badge--gold { background: rgba(201,163,106,.16); color: #9c7836; }
.ks-badge--voor-wie { background: var(--ks-grey); color: var(--ks-soft); }
.ks-outfit-card__media .ks-badge { position: absolute; top: .8rem; left: .8rem; }

/* ---------- Curated product-rij ---------- */
.ks-products { display: flex; flex-direction: column; gap: .9rem; }
.ks-product {
	display: grid; grid-template-columns: 84px 1fr auto; gap: 1.1rem; align-items: center;
	padding: 1rem 1.1rem;
	background: #fff; border: 1px solid var(--ks-line); border-radius: var(--ks-radius);
	transition: border-color .25s var(--ks-ease);
}
.ks-product:hover { border-color: var(--ks-blush); }
.ks-product__thumb { width: 84px; height: 100px; border-radius: 10px; object-fit: cover; background: var(--ks-grey); }
.ks-product__info h4 { margin: 0 0 .2rem; font-family: Fraunces, serif; font-size: 1.05rem; }
.ks-product__info p { margin: 0; font-size: .9rem; color: var(--ks-soft); }
.ks-product__cta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.ks-price { font-family: Inter, sans-serif; font-weight: 600; font-size: .95rem; color: var(--ks-aubergine); white-space: nowrap; }
.ks-price small { display: block; font-weight: 400; font-size: .72rem; color: var(--ks-soft); }
@media (max-width: 540px){
	.ks-product { grid-template-columns: 64px 1fr; }
	.ks-product__thumb { width: 64px; height: 78px; }
	.ks-product__cta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* shop-knop (affiliate) */
.ks-shop-btn {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: Inter, sans-serif; font-weight: 600; font-size: .9rem;
	padding: .6rem 1.1rem; border-radius: 999px;
	background: var(--ks-aubergine); color: var(--ks-creme) !important;
	text-decoration: none; white-space: nowrap;
	transition: background .25s var(--ks-ease), transform .25s var(--ks-ease);
}
.ks-shop-btn::after { content: "→"; transition: transform .25s var(--ks-ease); }
.ks-shop-btn:hover { background: var(--ks-blush-deep); transform: translateY(-1px); }
.ks-shop-btn:hover::after { transform: translateX(3px); }
.ks-shop-btn:focus-visible { outline: 2px solid var(--ks-gold); outline-offset: 3px; }

/* ---------- Dresscode-uitlegblok ---------- */
.ks-dresscode {
	background: #fff; border: 1px solid var(--ks-line); border-left: 4px solid var(--ks-blush);
	border-radius: 0 var(--ks-radius) var(--ks-radius) 0;
	padding: 1.4rem 1.6rem; margin: 1.4rem 0;
}
.ks-dresscode h3 { margin: 0 0 .3rem; font-size: 1.3rem; }
.ks-dresscode__level { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-gold); }
.ks-dresscode ul { margin: .7rem 0 0; padding-left: 0; list-style: none; }
.ks-dresscode li { position: relative; padding-left: 1.4rem; margin: .35rem 0; }
.ks-dresscode li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--ks-blush); }
.ks-dresscode li strong { color: var(--ks-aubergine); }

/* ---------- Wat-wel / wat-niet ---------- */
.ks-dodont { display: grid; gap: 1.2rem; margin: 1.6rem 0; }
@media (min-width: 720px){ .ks-dodont { grid-template-columns: 1fr 1fr; } }
.ks-do, .ks-dont { border-radius: var(--ks-radius); padding: 1.3rem 1.5rem; }
.ks-do { background: rgba(111,160,126,.10); border: 1px solid rgba(111,160,126,.35); }
.ks-dont { background: rgba(201,127,138,.09); border: 1px solid rgba(201,127,138,.3); }
.ks-do h4, .ks-dont h4 { margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.ks-do h4::before { content: "✓"; color: var(--ks-tip); font-weight: 700; }
.ks-dont h4::before { content: "✕"; color: var(--ks-blush-deep); font-weight: 700; }
.ks-do ul, .ks-dont ul { margin: 0; padding-left: 1.1rem; }
.ks-do li, .ks-dont li { margin: .3rem 0; }

/* ---------- Styling-tip ---------- */
.ks-tip-box {
	display: flex; gap: .8rem; align-items: flex-start;
	background: rgba(111,160,126,.10); border-radius: var(--ks-radius);
	padding: 1rem 1.2rem; margin: 1.2rem 0; font-size: .98rem;
}
.ks-tip-box::before { content: "✦"; color: var(--ks-tip); font-weight: 700; font-size: 1.1rem; line-height: 1.4; }

/* ---------- FAQ-accordeon ---------- */
.ks-faq { border-top: 1px solid var(--ks-line); margin: 1.5rem 0; }
.ks-faq details { border-bottom: 1px solid var(--ks-line); }
.ks-faq summary {
	list-style: none; cursor: pointer; padding: 1.1rem .2rem;
	font-family: Fraunces, serif; font-size: 1.12rem; font-weight: 600; color: var(--ks-aubergine);
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.ks-faq summary::-webkit-details-marker { display: none; }
.ks-faq summary::after { content: "+"; font-family: Inter, sans-serif; font-size: 1.5rem; color: var(--ks-blush-deep); transition: transform .25s var(--ks-ease); }
.ks-faq details[open] summary::after { transform: rotate(45deg); }
.ks-faq__a { padding: 0 .2rem 1.2rem; color: var(--ks-soft); }
.ks-faq__a p { margin: 0; max-width: 70ch; }

/* ---------- Disclosure-box ---------- */
.ks-disclosure {
	display: flex; gap: .7rem; align-items: flex-start;
	background: var(--ks-grey); border-radius: var(--ks-radius);
	padding: .95rem 1.2rem; margin: 1.3rem 0;
	font-size: .9rem; color: var(--ks-soft); line-height: 1.55;
}
.ks-disclosure::before { content: "ⓘ"; color: var(--ks-gold); font-size: 1.05rem; line-height: 1.4; flex: none; }
.ks-disclosure strong { color: var(--ks-aubergine); }

/* ---------- Section helpers ---------- */
.ks-section-alt { background: var(--ks-grey); }
.ks-rule { height: 1px; background: var(--ks-line); border: 0; margin: 2.5rem 0; }
.ks-meta-updated { font-size: .85rem; color: var(--ks-soft); font-style: italic; }

/* ---------- Motion-respect ---------- */
@media (prefers-reduced-motion: reduce){
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.ks-tile:hover, .ks-outfit-card:hover, .ks-shop-btn:hover { transform: none; }
}