/*
  De homepage: TGP_website_v52.html.

  De regels uit het style-blok van dat bestand, op alles na wat al in
  tokens.css, base.css, header.css, footer.css, cart.css of search.css staat.

  Een verschil met v52: daar heette de productkaart op de homepage
  .product-card en op alle-parfums .card, terwijl het dezelfde kaart is. Wij
  hebben er een, woocommerce/content-product.php, dus de selectors hieronder
  zijn omgezet naar de .card-namen. De opmaak zelf is ongewijzigd, en omdat
  home.css alleen op de voorpagina laadt bijt het niet met archive.css.
*/

/* De box-sizing-reset uit v52 staat al in base.css. */

/* HERO */
.hero {
position: relative;
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(135deg, var(--blush) 0%, var(--mauve) 100%);
}

.hero h1 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 300;
line-height: 1.2;
margin-bottom: 2rem;
text-shadow: 0 2px 20px rgba(26, 15, 18, 0.3);
}

.btn-primary {
display: inline-block;
background: var(--gold);
color: var(--noir);
padding: 1rem 3rem;
border-radius: 8px;
text-decoration: none;
font-size: 0.875rem;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 400;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(200, 169, 126, 0.3);
}

.btn-primary:hover {
background: var(--wine);
color: var(--cream);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(122, 50, 72, 0.4);
}

/* SOCIAL PROOF */
.social-proof {
background: linear-gradient(to bottom, var(--blush), var(--cream));
padding: 1.5rem 5%;
text-align: center;
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mauve);
}

.stars {
color: var(--gold);
margin-right: 0.5rem;
}

/* SECTION */
section {
padding: 3.5rem 5%;
}

.section-header {
text-align: center;
max-width: 900px;
margin: 0 auto 4rem;
}

.section-header h2 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 300;
color: var(--noir);
margin-bottom: 1rem;
}

.section-header p {
font-size: 1rem;
color: var(--mauve);
font-style: italic;
}

/* BESTSELLERS (4 PRODUCTS) */
.product-grid {display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.2rem;
max-width: 1180px;
margin: 0 auto;
}

@media (max-width: 1000px) {
  .product-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 760px) {
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 460px) {
  .product-grid { grid-template-columns: 1fr !important; }
}

.card {
background: white;
border-radius: 0;
overflow: hidden;
transition: all 0.3s;
border: 1px solid rgba(158, 90, 110, 0.1);
}

.card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(158, 90, 110, 0.15);
}

.card-image {
position: relative;
aspect-ratio: 3/4;
background: linear-gradient(135deg, var(--cream) 0%, var(--blush) 100%);
overflow: hidden;
}

.card-main-img, .card-hover-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 0.55s ease; }

.card-hover-img { opacity: 0; }

.card:hover .card-main-img { opacity: 0; }

.card:hover .card-hover-img { opacity: 1; }

/* Het moodboard in zijn geheel tonen.

   De moodboards zijn 9:16 en de kaart is 3:4. Met object-fit: cover viel de
   boven- en onderkant van de collage weg. Nu passen we hem in zijn geheel in
   en vullen de ruimte die overblijft met creme.

   Alleen als de hover echt een moodboard is, vandaar card-hover-mood. Heeft
   een product er geen, dan is de hover de vierkante 50ml-fles en die hoort
   het kader gewoon te vullen. Die klasse wordt gezet in
   woocommerce/content-product.php, dat daar ook het onbesneden formaat large
   kiest; met de uitsnede tgp-kaart van 600 bij 600 zou contain een ingepast
   vierkant tonen en nog steeds niet de hele collage.

   Twee klassen, dus zwaarder dan .card-main-img, .card-hover-img hierboven.
   Zie ook de carouselregel verderop, die object-fit nog maar voor de
   hoofdafbeelding zet. */
.card-hover-img.card-hover-mood {
  object-fit: contain;
  background: var(--cream);
}

.card-label {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 3;
background: var(--blush-licht);
color: var(--mauve);
padding: 0.28rem 0.6rem;
border-radius: 20px;
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 400;
pointer-events: none;
}

.card-info {
padding: 1.5rem;
}

.card-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
color: var(--noir);
margin-bottom: 0.5rem;
}

.card-inspired { font-family: 'Jost', sans-serif; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--mauve); margin-bottom: 0.2rem; opacity: 0.85; font-weight: 300; }

.card-inspired em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.95rem; letter-spacing: 0; color: var(--noir); }

.card-mood {
font-style: italic;
font-size: 0.95rem;
color: var(--mauve);
margin-bottom: 1rem;
}

.card-price {
font-size: 1.25rem;
color: var(--wine);
font-weight: 400;
margin-bottom: 1rem;
}

.card-add {
width: 100%;
padding: 0.75rem;
background: transparent;
border: 1px solid var(--mauve);
color: var(--mauve);
border-radius: 8px;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.15em;
cursor: pointer;
transition: all 0.2s;
}

.card-add:hover {
background: var(--mauve);
color: var(--cream);
}

/* EMOTIONAL SECTION */
.emotional-section {
  background: linear-gradient(to right, var(--cream), var(--cream-warm), var(--cream));
  padding: 2.8rem 5%;
  border-top: 1px solid rgba(200,169,126,0.15);
  border-bottom: 1px solid rgba(200,169,126,0.15);
}

.emotional-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}

.emotional-image {
aspect-ratio: 3/4;
border-radius: 20px;
background: linear-gradient(135deg, var(--blush), var(--mauve));
overflow: hidden;
max-height: 320px;
margin-left: auto;
width: 100%;
max-width: 260px;
}

.emotional-copy h3 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.7rem;
font-weight: 300;
margin-bottom: 0.7rem;
line-height: 1.25;
}

.emotional-copy p {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 0.7rem;
color: var(--mauve);
}

.emotional-copy .highlight {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.1rem;
color: var(--noir);
display: block;
margin: 0.8rem 0;
line-height: 1.4;
}

/* FENTY-STYLE PRODUCT SHOWCASE (8 PRODUCTS) */
.product-showcase {
background: white;
padding: 4rem 0;
}

.product-scroll-container {
position: relative;
padding: 0 5%;
}

.product-scroll {
display: flex;
gap: 2rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding-bottom: 1rem;
}

.product-scroll::-webkit-scrollbar {
height: 8px;
}

.product-scroll::-webkit-scrollbar-track {
background: rgba(158, 90, 110, 0.1);
border-radius: 10px;
}

.product-scroll::-webkit-scrollbar-thumb {
background: var(--mauve);
border-radius: 10px;
}

.product-item {
flex: 0 0 280px;
scroll-snap-align: start;
}

.product-video-container {
aspect-ratio: 3/4;
background: linear-gradient(135deg, var(--cream), var(--blush));
border-radius: 16px;
overflow: hidden;
margin-bottom: 1rem;
position: relative;
}

.card-name-showcase {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
color: var(--noir);
margin-bottom: 0.5rem;
}

.card-price-showcase {
font-size: 1rem;
color: var(--wine);
font-weight: 400;
}

/* OIL VS SPRAY VISUAL */
.oil-spray-visual {
background: var(--cream);
padding: 3rem 5%;
}

.comparison-visual {
display: grid;grid-template-columns: 1fr 1fr;
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
}

.comparison-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(158, 90, 110, 0.1);
}

.comparison-image {
aspect-ratio: 4/3;
background: linear-gradient(135deg, var(--blush), var(--dusty));
position: relative;
}

.comparison-label {
position: absolute;
bottom: 1.5rem;
left: 1.5rem;
background: rgba(253, 246, 240, 0.95);
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.25rem;
color: var(--noir);
}

.comparison-text {
padding: 1.5rem;
text-align: center;
}

.comparison-text h4 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.5rem;
color: var(--noir);
margin-bottom: 0.5rem;
}

.comparison-text p {
font-size: 0.875rem;
color: var(--mauve);
line-height: 1.6;
}

/* COMMUNITY COLLAGE (RARE BEAUTY STYLE) */
.community-section {
background: white;
padding: 3rem 5%;
}

.collage-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
max-width: 1400px;
margin: 0 auto;
}

.collage-item {
aspect-ratio: 1;
border-radius: 16px;
background: linear-gradient(135deg, var(--blush), var(--mauve));
overflow: hidden;
max-height: 280px;
}

.collage-item.tall {
grid-row: span 2;
}

.collage-item.wide {
grid-column: span 2;
}

/* MOOD CARDS */
.mood-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
}

.mood-card {
aspect-ratio: 4/3;
border-radius: 20px;
padding: 2.5rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}

.mood-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(26, 15, 18, 0.6), transparent 60%);
z-index: 1;
}

.mood-card:hover {
transform: scale(1.05);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.mood-card h4 {
position: relative;
z-index: 2;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 2rem;
color: white;
margin-bottom: 0.5rem;
}

.mood-card p {
position: relative;
z-index: 2;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.1em;
text-transform: uppercase;
}

/* Kaarten zijn <a>, niet div met onclick, zodat middenklik, hover-URL en
   toetsenbordbediening gewoon werken. */
.mood-card { text-decoration: none; }

.mood-more { text-align: center; margin-top: 2.5rem; }

.mood-1 { background: linear-gradient(135deg, var(--noir), var(--wine)); }

.mood-2 { background: linear-gradient(135deg, var(--blush), var(--mauve)); }

.mood-3 { background: linear-gradient(135deg, var(--dusty), var(--gold)); }

.mood-4 { background: radial-gradient(ellipse at 30% 30%, var(--mauve), var(--noir)); }

/* UGC SLIDESHOW */
.ugc-section {background: var(--cream);
padding: 5rem 5%;
}

.ugc-grid {
position: relative;
overflow: hidden;
max-width: 1400px;
margin: 0 auto;
padding-bottom: 1rem;
-webkit-mask-image: linear-gradient(to right, transparent 0, black 3%, black 97%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 3%, black 97%, transparent 100%);
}

/* Animation continues on hover (cards not clickable) */
.ugc-track {
display: flex;
width: max-content;
animation: ugc-marquee 79s linear infinite;
animation-play-state: running;
will-change: transform;
backface-visibility: hidden;
}

/* hover handled by pause, see .ugc-grid:hover .ugc-track above */
@keyframes ugc-marquee {
from { transform: translate3d(0, 0, 0); }
to   { transform: translate3d(calc(-1 * (300px + 1.5rem) * 8), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ugc-track { animation: none; }
  .ugc-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* scrollbar styles removed — marquee no longer needs them */
.ugc-card {
cursor: default;
flex: 0 0 300px;
aspect-ratio: 3/4;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 6px 24px rgba(26, 15, 18, 0.12);
position: relative;
background: var(--cream);
margin-right: 1.5rem;
transition: box-shadow 0.5s cubic-bezier(0.22,1,0.36,1);
}

.ugc-card:hover {
box-shadow: 0 14px 36px rgba(26, 15, 18, 0.22);
}

.ugc-track > .ugc-card:last-child { margin-right: 0; }

.ugc-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.ugc-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
  to top,
  rgba(26,15,18,0.75) 0%,
  rgba(26,15,18,0.35) 35%,
  rgba(26,15,18,0) 60%
);
pointer-events: none;
}

.ugc-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1.4rem 1.3rem 1.3rem;
z-index: 2;
}

.ugc-caption p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 1.15rem;
line-height: 1.3;
color: var(--cream);
margin: 0;
text-shadow: 0 1px 12px rgba(0,0,0,0.35);
letter-spacing: 0.005em;
}

/* RESPONSIVE */
@media (max-width: 768px) {
.emotional-split,
.comparison-visual {
grid-template-columns: 1fr;
gap: 2rem;
}
.nav {
display: none;
}
.hero h1 {
font-size: 2.5rem;
}
.collage-grid {
grid-template-columns: repeat(2, 1fr);
}
.collage-item.tall,
.collage-item.wide {
grid-row: span 1;
grid-column: span 1;
}
}

/* ── CINEMATIC HERO ── */
.hero { position: relative; height: 72vh; min-height: 500px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--noir); }

.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1.5s ease; z-index: 0; }

.hero-video.loaded { opacity: 1; }

.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center top; opacity: 0; z-index: 0; transform: scale(1.08); transition: opacity 1.2s ease; }

.hero-slide.active { opacity: 1; animation: kenBurns 7s ease-out forwards; }

@keyframes kenBurns { 0% { transform: scale(1.08); } 100% { transform: scale(1.0); } }

.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(26,15,18,0.18) 0%, transparent 35%, transparent 60%, rgba(26,15,18,0.45) 100%), linear-gradient(to right, rgba(26,15,18,0.15) 0%, transparent 50%); }

.hero-letterbox-top, .hero-letterbox-bottom { position: absolute; left: 0; right: 0; height: 60px; background: var(--noir); z-index: 2; transition: height 1.4s cubic-bezier(0.7, 0, 0.3, 1); }

.hero-letterbox-top { top: 0; }

.hero-letterbox-bottom { bottom: 0; }

.hero.intro-done .hero-letterbox-top, .hero.intro-done .hero-letterbox-bottom { height: 0; }

.hero-content { position: relative; z-index: 3; text-align: center; color: var(--cream); max-width: 800px; padding: 0 5%; opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease 1s, transform 1.2s ease 1s; }

.hero.ready .hero-content { opacity: 1; transform: translateY(0); }

.hero-eyebrow { font-size: 0.62rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; display: block; opacity: 0.85; }

.hero h1 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(2.2rem, 5.5vw, 4.5rem); font-weight: 300; line-height: 1.15; margin-bottom: 2.5rem; text-shadow: 0 2px 40px rgba(26,15,18,0.4); }

.hero-sub { font-size: 0.85rem; letter-spacing: 0.1em; opacity: 0.8; margin-bottom: 2.5rem; }

.hero-counter { position: absolute; bottom: 80px; right: 5%; z-index: 3; display: flex; gap: 6px; align-items: center; opacity: 0; transition: opacity 1s ease 2s; }

.hero.ready .hero-counter { opacity: 1; }

.hero-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(253,246,240,0.3); transition: all 0.4s; cursor: pointer; }

.hero-dot.on { background: var(--gold); transform: scale(1.4); }

.hero-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.58rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(253,246,240,0.4); opacity: 0; transition: opacity 1s ease 2.5s; }

.hero.ready .hero-scroll-hint { opacity: 1; }

.scroll-arrow { width: 1px; height: 30px; background: linear-gradient(to bottom, rgba(200,169,126,0.6), transparent); animation: scrollDrop 1.8s ease-in-out infinite; }

@keyframes scrollDrop { 0%, 100% { transform: scaleY(0); transform-origin: top; opacity: 0; } 50% { transform: scaleY(1); opacity: 1; } }

/* ── PINTEREST MASONRY GALLERY ── */
.pin-gallery-section { padding: 3rem 0 3.5rem; background: var(--cream); overflow: hidden; }

.pin-gallery-section .section-header { padding: 0 5%; margin-bottom: 2rem; text-align: center; }

.pin-gallery-section .section-header h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 300; color: var(--noir); margin-bottom: 0.5rem; }

.pin-gallery-section .section-header p { font-size: 0.875rem; color: var(--mauve); font-style: italic; }

.pin-rows-wrap { display: flex; flex-direction: column; gap: 8px; }

.pin-row { display: flex; gap: 8px; width: max-content; will-change: transform; }

.pin-row-1 { animation: pinRight 35s linear infinite; }

.pin-row-2 { animation: pinLeft 31s linear infinite; }

.pin-row-3 { animation: pinRight 39s linear infinite; }

/* Animation continues at normal speed on hover (cards are not clickable) */
@keyframes pinRight { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@keyframes pinLeft  { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

.pin-card { border-radius: 16px; overflow: hidden; position: relative; flex-shrink: 0; cursor: default; transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s; }

.pin-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease; }

.pin-card:hover img { transform: scale(1.06); }

.pin-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,15,18,0.5) 0%, transparent 55%); opacity: 0; transition: opacity 0.3s; display: flex; align-items: flex-end; padding: 1.2rem; }

.pin-card:hover .pin-card-overlay { opacity: 1; }

.pin-card-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; color: rgba(253,246,240,0.95); letter-spacing: 0.04em; }

.pc-tall  { width: 180px; height: 260px; }

.pc-med   { width: 200px; height: 215px; }

.pc-short { width: 165px; height: 175px; }

.pc-wide  { width: 230px; height: 195px; }

.pc-sq    { width: 190px; height: 190px; }

/* Iets kleinere grid voor beide varianten */
/* === PRODUCT CARD STYLING (Minimal Editorial) === */
.card.vA { background: transparent; border: none; box-shadow: none; }

.card.vA .card-info { padding: 0.9rem 0.2rem 0; }

.card.vA .card-name { font-family:'Cormorant Garamond',serif; font-style: italic; font-weight: 300; font-size: 1.22rem; color: var(--noir); margin-bottom: 0.15rem; }

.card.vA .card-mood { font-style: normal; font-size: 0.72rem; color: var(--mauve); letter-spacing: 0.04em; margin-bottom: 0.7rem; }

.card.vA .card-bottom { display: flex; justify-content: space-between; align-items: center; }

.card.vA .card-price { font-family:'Jost',sans-serif; font-weight: 300; font-size: 0.95rem; color: var(--noir); margin: 0; }

.card.vA .card-add { width: auto; padding: 0 0 2px; background: transparent; border: none; color: var(--mauve); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; position: relative; border-radius: 0; cursor: pointer; transition: color 0.2s; }

.card.vA .card-add::after { content:''; position: absolute; left:0; bottom:0; width: 100%; height: 1px; background: var(--mauve); transition: background 0.2s; }

.card.vA .card-add:hover { color: var(--wine); }

.card.vA .card-add:hover::after { background: var(--gold); }

/* === CAROUSEL === */
.carousel-wrap { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 60px; }

.carousel-viewport { overflow: hidden; }

.carousel-track { display: flex; gap: 1.6rem; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }

.carousel-slide { flex: 0 0 calc((100% - 1.6rem * 3) / 4); min-width: 0; }

.carousel-slide .card-image { position: relative; aspect-ratio: 3/4; overflow: hidden; }

.carousel-slide .card-main-img, .carousel-slide .card-hover-img { width:100%; height:100%; object-position:center; }

/* Alleen de hoofdafbeelding vult het kader. De hover-afbeelding houdt de
   contain uit de regel bovenin dit bestand; stond object-fit hier nog voor
   allebei, dan won deze door de extra klasse. */
.carousel-slide .card-main-img { object-fit:cover; }

.carousel-arrow { position: absolute; top: 40%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(253,246,240,0.85); border: 1px solid rgba(158,90,110,0.18); color: var(--mauve); cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s; backdrop-filter: blur(6px); }

.carousel-arrow:hover { background: var(--mauve); color: var(--cream); border-color: var(--mauve); }

.carousel-arrow:active { transform: translateY(-50%) scale(0.96); }

.carousel-arrow.disabled { opacity: 0.3; pointer-events: none; }

.carousel-prev { left: 5px; }

.carousel-next { right: 5px; }

.carousel-progress-wrap { display: flex; justify-content: center; margin-top: 2rem; }

.carousel-progress { position: relative; width: 180px; height: 2px; background: rgba(158,90,110,0.18); border-radius: 2px; cursor: pointer; }

.carousel-progress-thumb { position: absolute; top: 0; left: 0; height: 100%; background: var(--gold); border-radius: 2px; }

@media (max-width: 1000px) {
  .carousel-slide { flex: 0 0 calc((100% - 1.6rem * 2) / 3); }
}

@media (max-width: 760px) {
  .carousel-slide { flex: 0 0 calc((100% - 1.6rem) / 2); }
  .carousel-wrap { padding: 0 44px; }
  .carousel-arrow { width: 36px; height: 36px; }
}

@media (max-width: 460px) {
  .carousel-slide { flex: 0 0 100%; }
  .carousel-track { gap: 1rem; }
}

@media (max-width: 600px) {
  .carousel-progress { width: 110px; }
  .carousel-progress-wrap { margin-top: 1.4rem; }
}

/* Titel ruimer voor 1 regel */
#bestsellers-title { white-space: nowrap; }

@media (max-width: 720px) {
  #bestsellers-title { white-space: normal; }
}

/* === HERO OPENING SLIDE === */
.hero-opening { z-index: 0; opacity: 1 !important; animation: none !important; transform: scale(1) !important; transition: opacity 1s ease; }

.hero-opening.faded { opacity: 0 !important; }

.hero.ready .hero-content { opacity: 1; transform: translateY(0); transition: opacity 1.2s ease, transform 1.2s ease; }

.hero-content.faded { opacity: 0 !important; transform: translateY(-10px) !important; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease !important; }

/* === PRODUCT RATING === */
.card-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; margin-bottom: 0.15rem; }

.card-title-row .card-name { margin-bottom: 0 !important; flex: 1 1 auto; min-width: 0; }

.card-rating { display: inline-flex; align-items: center; gap: 0.25rem; font-family: 'Jost', sans-serif; font-weight: 400; font-size: 0.85rem; color: var(--noir); white-space: nowrap; flex: 0 0 auto; }

.card-rating .rating-star { display: inline-block; vertical-align: middle; transform: translateY(-1px); }

/* Sterren onder de producttitel. Grijze rij als basis, gouden rij eroverheen
   afgeknipt op rating/5, zodat halve sterren kloppen. */
.card.vA .card-rating { display: flex; gap: 0.35rem; font-size: 0.72rem; margin-bottom: 0.3rem; }

.card-rating .sterren { position: relative; display: inline-block; white-space: nowrap;
  color: rgba(158,90,110,0.3); letter-spacing: 0.05em; }

.card-rating .sterren > span { position: absolute; top: 0; left: 0; overflow: hidden;
  white-space: nowrap; color: var(--gold); }

.card-rating .aantal { color: var(--mauve); }

/* === OIL VS SPRAY COMPARISON V2 === */
.comparison-v2 { padding: 2rem 5% 3rem; background: var(--cream); }

.comparison-v2-header { text-align: center; margin-bottom: 2.5rem; }

.comparison-v2-header h2 { font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300; font-size:clamp(1.8rem, 4vw, 2.6rem); color:var(--noir); letter-spacing:0.01em; }

.comparison-v2-subtitle { font-family:'Jost',sans-serif; font-weight:300; font-size:0.95rem; color:var(--mauve); margin-top:0.8rem; letter-spacing:0.02em; }

.comparison-v2-grid { display:grid; grid-template-columns: 1fr 1.1fr 1fr; gap:2rem; max-width:1180px; margin:0 auto; align-items:center; }

.comp-v2-side { display:flex; flex-direction:column; gap:2rem; }

.comp-v2-item { text-align:center; }

.comp-v2-icon { display:flex; justify-content:center; margin-bottom:1rem; color:var(--mauve); }

.comp-v2-item h3 { font-family:'Jost',sans-serif; font-weight:400; font-size:1.05rem; color:var(--noir); margin-bottom:0.7rem; letter-spacing:0.02em; }

.comp-v2-item p { font-family:'Jost',sans-serif; font-weight:300; font-size:0.88rem; color:var(--mauve); line-height:1.6; max-width:300px; margin:0 auto; }

/* USP-blokken: ingetogen hover en een eenmalige staggered infade.
   Zonder JS blijft alles gewoon zichtbaar, usp-init wordt pas door JS gezet. */
.comp-v2-item, .benefit-item { padding: 0.9rem 0.6rem; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; }

.comp-v2-item:hover, .benefit-item:hover { transform: translateY(-6px); box-shadow: 0 12px 34px rgba(158,90,110,0.12); }

.comp-v2-item.usp-init, .benefit-item.usp-init { opacity: 0; transform: translateY(18px); }

.comp-v2-item.usp-in, .benefit-item.usp-in { opacity: 1; transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,0.61,0.36,1); }

/* Center split image - SWIPEABLE (full images) */
.comp-v2-center { display:flex; justify-content:center; align-items:center; }

.comp-v2-split { position:relative; width:100%; max-width: 360px; aspect-ratio: 3/4; overflow:hidden; border-radius:6px; box-shadow: 0 20px 60px rgba(158,90,110,0.15); user-select:none; touch-action:none; cursor:ew-resize; }

/* Beide images: 100% volledig zichtbaar (geen crop) */
.comp-v2-bg { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; pointer-events:none; }

/* Overlay met spray image — clipt alleen visueel */
.comp-v2-overlay { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; pointer-events:none; clip-path: inset(0 0 0 50%); }

/* Handle */
.comp-v2-handle { position:absolute; top:0; bottom:0; left:50%; width:2px; background:rgba(253,246,240,0.9); transform:translateX(-50%); z-index:5; box-shadow: 0 0 12px rgba(26,15,18,0.2); pointer-events:none; }

.comp-v2-handle-line { display:none; }

.comp-v2-handle-circle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:rgba(253,246,240,0.95); backdrop-filter:blur(4px); border:1px solid rgba(158,90,110,0.2); display:flex; align-items:center; justify-content:center; gap:0; color:var(--mauve); box-shadow: 0 4px 14px rgba(26,15,18,0.18); transition: transform 0.2s ease; }

.comp-v2-split:hover .comp-v2-handle-circle, .comp-v2-split.dragging .comp-v2-handle-circle { transform:translate(-50%,-50%) scale(1.08); }

.comp-v2-handle-circle svg { flex-shrink:0; margin:0 -2px; }

.comp-v2-labels { position:absolute; bottom:5%; left:50%; transform:translateX(-50%); display:flex; gap:2px; z-index:4; width:80%; max-width:340px; pointer-events:none; }

.comp-v2-label { flex:1; background:rgba(253,246,240,0.95); backdrop-filter:blur(4px); padding:0.7rem 0.5rem; text-align:center; font-family:'Jost',sans-serif; font-weight:400; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--noir); }

/* Responsive */
@media (max-width: 1000px) {
  .comparison-v2-grid { display:grid; grid-template-columns: 1fr 1.1fr 1fr; gap:2rem; max-width:1180px; margin:0 auto; align-items:center; }
  .comp-v2-side { gap:2rem; }
  .comp-v2-center { order:-1; }
  .comp-v2-split { max-width:360px; margin:0 auto; }
}

@media (max-width: 560px) {
  .comparison-v2 { padding:4.5rem 5% 3.5rem; }
  .comparison-v2-header { margin-bottom:2.5rem; }
  .comp-v2-split { max-width:320px; }
  .comp-v2-label { font-size:0.6rem; padding:0.55rem 0.3rem; letter-spacing:0.15em; }
}

.emotional-video { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }

/* === BENEFITS BANNER === */
.benefits-banner { padding: 3.5rem 5%; background: linear-gradient(to right, var(--cream), var(--cream-warm), var(--cream)); border-top: 1px solid rgba(200,169,126,0.15); border-bottom: 1px solid rgba(200,169,126,0.15); }

/* De kopie bovenaan grenst aan een even lichte sectie, daar valt 15% dekking weg.
   Zelfde kleur, breedte en stijl, alleen sterker zodat de scheiding leesbaar is. */
/* Variant B: losse blush vlakken op creme, met de serif-kop en 30px iconen uit D1.
   Alleen de kopie bovenaan; het banner onderaan houdt zijn eigen opmaak. */
#benefitsTop { padding: 1.3rem 5%; background: var(--cream);
  border-top-color: rgba(200,169,126,0.25); border-bottom-color: rgba(200,169,126,0.4); }

#benefitsTop .benefits-inner { gap: 0.7rem; }

#benefitsTop .benefit-item { background: var(--blush-licht); border-radius: 14px; padding: 1rem 0.8rem; }

#benefitsTop .benefit-icon { margin-bottom: 0.5rem; color: var(--mauve); }

#benefitsTop .benefit-item h3 { font-weight: 400; font-size: 1.18rem;
  margin-bottom: 0.2rem; letter-spacing: 0.02em; color: var(--noir); }

#benefitsTop .benefit-item p { font-size: 0.74rem; color: var(--noir); opacity: 0.62;
  line-height: 1.4; max-width: 200px; }

.benefits-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; max-width: 1180px; margin: 0 auto; }

#riskBanner .benefits-inner { grid-template-columns: repeat(3, 1fr); max-width: 980px; }

.benefit-item { text-align: center; }

.benefit-icon { display: flex; justify-content: center; margin-bottom: 1rem; color: var(--mauve); }

.benefit-item h3 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 1.25rem; color: var(--noir); margin-bottom: 0.5rem; letter-spacing: 0.01em; }

.benefit-item p { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.82rem; color: var(--mauve); line-height: 1.5; max-width: 240px; margin: 0 auto; }

@media (max-width: 900px) {
  .benefits-inner { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
}

@media (max-width: 480px) {
  .benefits-banner { padding: 2.5rem 5%; }
  .benefits-inner { gap: 1.8rem 1rem; }
  .benefit-item h3 { font-size: 1.1rem; }
  .benefit-item p { font-size: 0.78rem; }
}

@media (max-width: 900px) {
  .emotional-image { margin-left: 0; max-width: 100%; }
}

/* === PRODUCT SHOWCASE FENTY STYLE === */
.product-showcase-fb { padding: 5rem 5% 1.5rem; background: var(--cream); }

.fb-header { text-align: center; max-width: 700px; margin: 0 auto 1.2rem; }

.fb-header h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(2rem, 4.5vw, 2.8rem); color: var(--noir); margin-bottom: 0.35rem; letter-spacing: 0.01em; }

.fb-header p { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.9rem; color: var(--mauve); letter-spacing: 0.03em; }

.fb-scroll-wrap { max-width: 1280px; margin: 0 auto; }

.fb-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }

.fb-tile { position: relative; display: flex; flex-direction: column; gap: 0.85rem; cursor: pointer; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }

/* .fb-tile:hover translateY — vervangen door .active scale */

.fb-video-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 8px; background: var(--cream); }

.fb-video-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-family: 'Jost', sans-serif; font-style: italic; font-size: 0.78rem; letter-spacing: 0.02em; line-height: 1.6; }

.fb-video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--cream); }

.fb-video[data-loaded="false"] { opacity: 0; }

.fb-video[data-loaded="true"] { opacity: 1; transition: opacity 0.5s ease; }

.fb-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Responsive */
@media (max-width: 1100px) { .fb-grid { grid-template-columns: repeat(3, 1fr); } .fb-tile:nth-child(4), .fb-tile:nth-child(5) { grid-column: auto; } }

@media (max-width: 760px) {
  .product-showcase-fb { padding: 3.5rem 0 3rem; }
  .fb-header { padding: 0 5%; margin-bottom: 2rem; }
  .fb-scroll-wrap { overflow-x: auto; overflow-y: hidden; padding: 0 5% 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .fb-scroll-wrap::-webkit-scrollbar { display: none; }
  .fb-grid { display: flex; gap: 0.75rem; grid-template-columns: none; width: max-content; }
  .fb-tile { width: 240px; flex-shrink: 0; }
}

@media (max-width: 440px) {
  .fb-tile { width: 200px; }
}

/* === Fenty-style info card === */
.fb-tile { display: flex; flex-direction: column; gap: 0; }

.fb-video-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 10px; background: var(--cream); transition: box-shadow 0.7s cubic-bezier(0.22,1,0.36,1); }

.fb-mute-icon { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(26,15,18,0.55); color: rgba(253,246,240,0.95); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; padding: 0; z-index: 3; transition: background 0.2s ease, transform 0.2s ease; }

.fb-mute-icon:hover { background: rgba(26,15,18,0.85); transform: scale(1.08); }

.fb-mute-icon:active { transform: scale(0.95); }

.fb-mute-icon[data-muted="false"] { background: rgba(200,169,126,0.85); color: var(--noir); }

/* Info card under video */
.fb-card { background: var(--wit); border-radius: 10px; margin-top: 0.6rem; box-shadow: 0 2px 10px rgba(26,15,18,0.04); overflow: hidden; transition: all 0.7s cubic-bezier(0.22,1,0.36,1); }

.fb-card-compact { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; }

.fb-thumb { width: 44px; height: 44px; object-fit: cover; background: var(--cream); border-radius: 4px; }

.fb-card-info { min-width: 0; }

.fb-card-name { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 0.85rem; color: var(--noir); margin: 0 0 0.15rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fb-card-price { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.82rem; color: var(--noir); margin: 0; }

.fb-add-btn { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--noir); color: var(--cream); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.15s ease; padding: 0; }

.fb-add-btn:hover { background: var(--mauve); }

.fb-add-btn:active { transform: scale(0.94); }

.fb-chevron { flex-shrink: 0; width: 22px; height: 22px; background: transparent; color: var(--mauve); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; padding: 0; }

.fb-chevron:hover { color: var(--noir); }

/* Expanded panel — hidden by default */
.fb-card-expanded { max-height: 0; overflow: hidden; transition: max-height 0.65s cubic-bezier(0.22,1,0.36,1), padding 0.5s cubic-bezier(0.22,1,0.36,1); padding: 0 0.85rem; }

.fb-inspired { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 0.85rem; color: var(--mauve); margin: 0.6rem 0 0.4rem; line-height: 1.35; }

.fb-scent-notes { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.5rem; }

.fb-description { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.78rem; color: var(--mauve); line-height: 1.55; margin: 0 0 0.8rem; }

/* Expanded state */
.fb-tile.expanded .fb-card-expanded { max-height: 280px; padding: 0 0.85rem 0.4rem; }

.fb-tile.expanded .fb-chevron { transform: rotate(180deg); }

/* ═══ ACTIVE TILE STATE — hover desktop / tap mobile ═══ */
.fb-tile { transform-origin: center bottom; will-change: transform; }

.fb-tile.active { transform: scale(1.2); z-index: 10; }

.fb-tile.active .fb-video-wrap { box-shadow: 0 20px 50px rgba(26,15,18,0.25); }

.fb-tile.active .fb-card { box-shadow: 0 8px 24px rgba(26,15,18,0.12); }

.fb-tile.active .fb-card-expanded { max-height: 280px; padding: 0 0.85rem 0.4rem; }

.fb-tile.active .fb-chevron { transform: rotate(180deg); }

/* Non-active tiles when one is active: fade slightly to pull focus */
/* v41: no opacity fade on non-active tiles */

/* Row moet ruimte geven voor scale omhoog */
.fb-scroll-wrap { padding-top: 1.8rem; padding-bottom: 2.5rem; }

@media (max-width: 760px) {
  .fb-scroll-wrap { padding-top: 2rem; padding-bottom: 2rem; }
  .fb-tile.active { transform: scale(1.12); }
}

@media (max-width: 600px) {
  .fb-header { margin-bottom: 1rem; }
  .fb-header h2 { margin-bottom: 0.3rem; }
  .fb-scroll-wrap { padding-top: 1.4rem; }
}

@media (max-width: 600px) {
  .comp-v2-item, .benefit-item { padding: 0.7rem 0.4rem; }
  .comp-v2-item:hover, .benefit-item:hover { transform: none; box-shadow: none; }
  .comp-v2-item.usp-init, .benefit-item.usp-init { transform: translateY(12px); }
}

@media (max-width: 600px) {
  #riskBanner .benefits-inner { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (max-width: 600px) {
  #benefitsTop { padding: 1rem 4%; }
  #benefitsTop .benefits-inner { gap: 0.6rem; }
  #benefitsTop .benefit-item { padding: 0.8rem 0.6rem; border-radius: 12px; }
  #benefitsTop .benefit-item h3 { font-size: 1.05rem; }
}

/* ══ MOBIELE CORRECTIES (audit) ══════════════════════════════════════
   Tikdoelen naar 44x44, nowrap terugzetten en de meerkolomsgrids een
   terugval geven. Zelfde patroon als #bestsellers-title hierboven al
   gebruikt: nowrap op desktop, normal binnen deze media query. */
@media (max-width: 600px) {
  .fb-chevron,
  .fb-mute-icon,
  .fb-add-btn,
  .search-close { width: 44px; height: 44px; }

  /* productnamen mogen afbreken, anders duwen ze de kaart breder */
  .fb-card-name { white-space: normal; }

  /* drie kolommen naast elkaar wordt op 375px zo'n 115px per kolom */
  .comparison-v2-grid { grid-template-columns: 1fr; }

  /* thumb en naam blijven naast elkaar, de knoppen worden 44px breed */
  .fb-card-compact { grid-template-columns: 44px 1fr auto auto; gap: 0.5rem; }
  .search-result { grid-template-columns: 44px 1fr auto; gap: 0.6rem; }
}

/* ── Erbij ten opzichte van v52 ──────────────────────────────────────
   In v52 was de kaart zelf de slide: <div class="product-card vA
   carousel-slide">. De track is display:flex, dus alle slides werden even
   hoog en de kaart dus ook.

   Bij ons zit de kaart in de slide, omdat de kaart uit een gedeelde template
   komt: .carousel-slide > .card. De slide rekt nog steeds mee, de kaart niet.
   Daarom hier height:100%.

   Verder niets. De inhoud loopt gewoon van boven af, precies als in v52: op
   een kaart zonder sterrenregel staat de prijsregel een regel hoger dan bij
   de buurman. Dat valt niet op, want de vA-kaart is doorzichtig en randloos.

   Bewust geen flexopbouw op de kaart of op .card-info. Die had ik hier eerst
   staan om de onderste regel met margin-top:auto uit te lijnen, en dat is
   netter maar het is niet wat v52 doet. In een flexcontainer klappen marges
   bovendien niet samen, dus het verandert stilletjes ook de tussenruimtes. */

.carousel-slide { display: flex; }

.carousel-slide > .card {
  width: 100%;
  height: 100%;
}