/* Nieuwe homepage (gescoped) — automatisch samengesteld */
.bbb-home{
  /* Palette — warm espresso / camel / cream, lifted from the boutique's own
     lookbook photography rather than a generic template palette. */
  --color-espresso:      #68594C; /* primary text, buttons, logo */
  --color-espresso-70:   #857060;
  --color-camel:         #857060; /* topbar, links hover, price accents */
  --color-camel-light:   #D7C9B8;
  --color-blush:         #E7A7B4; /* soft accent used sparingly (tags, swatches) */
  --color-cream:         #F5F1EA; /* page background */
  --color-cream-deep:    #D7C9B8; /* section background */
  --color-white:         #FFFFFF;
  --color-border:        #D7C9B8;
  --color-ink-muted:     #857060;
  --color-success:       #4C7A5B;

  /* Surfaces sampled directly from the supplied design mock-up */
  --color-topbar-bg:     #857060; /* mocha brown thin top bar */
  --color-header-bg:     #F5F1EA; /* off-white header row */
  --color-footer-bg:     #D7C9B8; /* light beige — newsletter + columns */
  --color-footer-bg-soft:#F5F1EA; /* slightly lighter — bottom copyright bar */
  --color-footer-border: #D7C9B8;

  /* Typography */
  --font-script: 'Playball', cursive;               /* logo mark */
  --font-heading: 'The Seasons', 'Cormorant Garamond', Georgia, serif; /* koppen uit het brandbook */
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif; /* UI + body */

  --fs-h1: clamp(2.4rem, 4vw, 3.6rem);
  --fs-h2: clamp(1.6rem, 2.4vw, 2.2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.85rem;
  --fs-eyebrow: 0.78rem;

  /* Layout */
  --container: 1280px;
  --radius-pill: 999px;
  --radius-soft: 4px;
  --gap: 1.75rem;
  --section-pad: clamp(3rem, 6vw, 5.5rem);

  --shadow-card: 0 6px 24px rgba(60,46,36,0.07);
  --transition: 220ms ease;
}

.bbb-home .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; padding: .9em 1.8em; border-radius: var(--radius-soft);
  background: var(--color-espresso); color: var(--color-white);
  font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--color-espresso); cursor:pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.bbb-home .btn:hover{ background: transparent; color: var(--color-espresso); transform: translateY(-1px); }

.bbb-home .btn-outline{ background: transparent; color: var(--color-espresso); }

.bbb-home .btn-outline:hover{ background: var(--color-espresso); color: var(--color-white); }

.bbb-home .eyebrow{
  display:block; font-size: var(--fs-eyebrow); letter-spacing:.18em; text-transform:uppercase;
  color: var(--color-camel); margin-bottom:.6em; font-weight:500;
}

.bbb-home .section{ padding: var(--section-pad) 0; }

.bbb-home .section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 2rem; flex-wrap:wrap; gap:1rem; }

.bbb-home .section-head .view-all{ font-size: var(--fs-small); letter-spacing:.08em; text-transform:uppercase; color:var(--color-camel); white-space:nowrap; }

/* == HERO == */
.bbb-home .hero{ position:relative; min-height: 78vh; display:flex; align-items:center; background-size:cover; background-position:center; overflow:hidden; }
/* De twee wisselende beelden liggen als lagen onderin; het verloop erboven,
   de tekst daar weer boven. Zonder die volgorde valt het verloop weg zodra
   er een laag overheen schuift. */
.bbb-home .hero-lagen{ position:absolute; inset:0; z-index:0; }
.bbb-home .hero-laag{ position:absolute; inset:0; background-image: var(--beeld-breed); background-size:cover; background-position:center right; opacity:0; transition: opacity 1.2s ease-in-out; }
.bbb-home .hero-laag.is-zicht{ opacity:1; }
.bbb-home .hero::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(20,15,10,.55) 0%, rgba(20,15,10,.15) 55%, rgba(20,15,10,0) 80%); }
@media (prefers-reduced-motion: reduce){
  .bbb-home .hero-laag{ transition:none; }
}
.bbb-home .hero-content{ position:relative; z-index:2; max-width:560px; padding: 0 1.5rem; margin-left: max(1.5rem, calc((100% - var(--container)) / 2 + 1.5rem)); color:#fff; }
.bbb-home .hero-content .eyebrow{ color: var(--color-camel-light); }
.bbb-home .hero-content h1{ color:#fff; font-style:italic; }
.bbb-home .hero-content h1 em{ font-style:normal; font-weight:400; }
.bbb-home .hero-content .btn{ margin-top:1.3rem; background:#fff; color:var(--color-espresso); border-color:#fff; }
.bbb-home .hero-content .btn:hover{ background:transparent; color:#fff; }
@media (max-width: 780px){
  .bbb-home .hero{ min-height:60vh; }
  /* Op de telefoon het staande beeld, en de tekst onderaan in plaats van
     midden op de foto. Zo blijft het onderwerp vrij en blijft de kop goed
     leesbaar. */
  .bbb-home .hero-laag{ background-image: var(--beeld-smal); background-position:center center; }
  .bbb-home .hero{ align-items:flex-end; }
  .bbb-home .hero-content{ margin-left:0; max-width:100%; }
  /* Het ronde pijltje-omlaag stond onderaan de hero en botste met de
     bestelknop zodra de tekst naar beneden verhuisde. Op een telefoon wijst
     niets erop dat je moet scrollen; dat weet iedereen. Dus daar weg. */
  .bbb-home .hero .bbb-hero-omlaag{ display:none !important; }
  .bbb-home .hero::before{ background: linear-gradient(0deg, rgba(24,18,13,.88) 0%, rgba(24,18,13,.62) 30%, rgba(24,18,13,.18) 58%, rgba(24,18,13,0) 82%) !important; }
  /* Het vakje met de dames: op smal scherm de rechterkant vasthouden,
     anders vallen ze buiten beeld. */
  .bbb-home .split-feature .promo-panel{ background-position:right center; }
}



/* == USP STRIP == */
.bbb-home .usp-strip{ background: var(--color-cream-deep); border-bottom:1px solid var(--color-border); }
.bbb-home .usp-strip ul{ display:flex; justify-content:space-between; padding: 1.6rem 0; flex-wrap:wrap; gap:1.5rem; }
.bbb-home .usp-strip li{ display:flex; align-items:center; gap:.75em; flex:1 1 200px; font-size:.82rem; }
.bbb-home .usp-strip svg{ width:26px; height:26px; color: var(--color-camel); flex:none; }



/* == CATEGORY CIRCLES == */
.bbb-home .category-circles{ padding: var(--section-pad) 0 calc(var(--section-pad) - 1rem); }
.bbb-home .category-circles ul{ display:flex; justify-content:center; gap:2.75rem; flex-wrap:wrap; }
.bbb-home .category-circles li{ text-align:center; width:130px; }
.bbb-home .category-circles .circle-thumb{
  width:130px; height:130px; border-radius:50%; overflow:hidden; margin:0 auto .9rem;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-card);
}
.bbb-home .category-circles .circle-thumb img{ width:100%; height:100%; object-fit:cover; }
.bbb-home .category-circles h3{ font-family: var(--font-body); font-weight:600; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.15em; }
.bbb-home .category-circles span{ font-size:.75rem; color: var(--color-camel); }



/* == PRODUCT GRIDS == */
.bbb-home .product-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:1.6rem; }
.bbb-home .product-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 1100px){  .bbb-home .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 680px){  .bbb-home .product-grid{ grid-template-columns:repeat(2,1fr); gap:1rem; } }

.bbb-home .product-card{ position:relative; }
.bbb-home .product-card .thumb{ position:relative; overflow:hidden; background: var(--color-cream-deep); border-radius: var(--radius-soft); aspect-ratio: 3/4; }
.bbb-home .product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.bbb-home .product-card:hover .thumb img{ transform: scale(1.05); }
.bbb-home .product-card .wishlist{
  position:absolute; top:.75rem; right:.75rem; width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
}
.bbb-home .product-card .wishlist svg{ width:16px; height:16px; }
.bbb-home .product-card .info{ padding-top:.85rem; }
/* Zelfde letter als de productnaam op de categoriepagina's (15f):
   The Seasons 15px, gewicht 500, espresso. */
.bbb-home .product-card .title{
	/* !important: de sitebrede tekstregel zet losse spans op Jost. */
	font-family:'The Seasons','Cormorant Garamond',Georgia,serif !important;
	font-size:15px; font-weight:500; line-height:1.35;
	color:var(--bbb-espresso,#68594C);
	margin-bottom:.25em;
}
.bbb-home .product-card .price{ color: var(--color-camel); font-weight:600; font-size:.92rem; }
.bbb-home .product-card .price del{ color: var(--color-ink-muted); font-weight:400; margin-right:.4em; }
.bbb-home .product-card .swatch{ display:inline-block; width:14px; height:14px; border-radius:50%; margin-top:.5em; border:1px solid var(--color-border); }



/* == BESTSELLERS SPLIT == */
.bbb-home .split-feature{ display:grid; grid-template-columns: 1fr 1.4fr; gap: var(--gap); align-items:stretch; }
.bbb-home .split-feature .promo-panel{
  position:relative; border-radius: var(--radius-soft); overflow:hidden; min-height:420px;
  background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:2rem;
}
.bbb-home .split-feature .promo-panel::before{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(20,15,10,.6), transparent 55%); }
.bbb-home .split-feature .promo-panel .panel-text{ position:relative; z-index:2; color:#fff; }
.bbb-home .split-feature .promo-panel h3{ color:#fff; font-size:1.7rem; font-style:italic; }
.bbb-home .split-feature .bestsellers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media (max-width: 980px){  .bbb-home .split-feature{ grid-template-columns:1fr; }  .bbb-home .split-feature .bestsellers-grid{ grid-template-columns:repeat(2,1fr); } }



/* == SHOP THE LOOK == */
.bbb-home .look-card .info{ text-align:center; }



/* == TRUST STRIP == */
.bbb-home .trust-strip{ background: var(--color-cream-deep); padding: 2.2rem 0; }
.bbb-home .trust-strip ul{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; text-align:center; }
.bbb-home .trust-strip li{ flex:1 1 200px; }
.bbb-home .trust-strip svg{ width:26px; height:26px; color:var(--color-camel); margin-bottom:.5rem; }
.bbb-home .trust-strip strong{ display:block; font-size:.85rem; letter-spacing:.03em; }
.bbb-home .trust-strip span{ font-size:.75rem; color:var(--color-ink-muted); }



/* == INSTAGRAM == */
.bbb-home .instagram-section .section-head{ justify-content:center; text-align:center; flex-direction:column; align-items:center; }
.bbb-home .instagram-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; }
.bbb-home .instagram-grid a{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; }
.bbb-home .instagram-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.bbb-home .instagram-grid a:hover img{ transform: scale(1.08); }
@media (max-width: 900px){  .bbb-home .instagram-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width: 560px){  .bbb-home .instagram-grid{ grid-template-columns:repeat(3,1fr); } }




/* == CORRECTIES (eindstand) == */
.bbb-home .btn svg{ width:.75em; height:.75em; flex:none; }
.bbb-home h1, .bbb-home h2, .bbb-home h3, .bbb-home h4{ font-family:var(--font-heading); color:var(--color-espresso); font-weight:400; }
.bbb-home .section-head h2{ font-family:var(--font-body); font-size:1.02rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin:0; }
.bbb-home .hero{ min-height:0; height:clamp(420px,58vh,640px); background-position:center right; background-size:cover; }
/* De tekst staat links op het beeld. Het verloop was daar te licht, waardoor
   de kop wegviel tegen een drukke foto. Nu duidelijk donkerder aan de
   linkerkant, en pas voorbij de helft doorzichtig, zodat het onderwerp van
   de foto rechts vrij blijft. */
.bbb-home .hero::before{ background:linear-gradient(90deg, rgba(24,18,13,.80) 0%, rgba(24,18,13,.64) 28%, rgba(24,18,13,.30) 52%, rgba(24,18,13,.06) 72%, rgba(24,18,13,0) 88%); }
.bbb-home .hero-content h1{ font-style:normal; font-family:var(--font-heading); color:#fff; }
.bbb-home .hero-content h1 em{ font-style:italic; font-weight:600; }
.bbb-home .hero-content .btn, .bbb-home .split-feature .promo-panel .btn{ background:rgba(24,18,13,.16); border:1px solid var(--color-camel-light); color:#fff; letter-spacing:.16em; padding:.95em 1.9em; border-radius:2px; transform:none; }
.bbb-home .hero-content .btn:hover, .bbb-home .split-feature .promo-panel .btn:hover{ background:var(--color-camel); border-color:var(--color-camel); color:#fff; transform:none; }
.bbb-home .category-circles ul{ gap:2rem; flex-wrap:nowrap; list-style:none; margin:0; padding:0; }
.bbb-home .category-circles li{ width:170px; }
.bbb-home .category-circles .circle-thumb{ display:block; width:170px; height:170px; border-radius:50%; overflow:hidden; }
.bbb-home .category-circles .circle-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
/* De badges staan in een kolom in de hoek van de foto. Stond de positie op
   de badge zelf, dan kregen Nieuw en Uitverkocht dezelfde plek en vielen ze
   over elkaar heen; nu bepaalt het omhulsel de hoek en zet de kolom ze
   netjes onder elkaar, ongeacht hoeveel het er zijn. */
.bbb-home .product-card .badges{ position:absolute; top:.75rem; left:.75rem; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; }
.bbb-home .product-card .badge{ font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; padding:.35em .8em; border-radius:var(--radius-soft); background:var(--color-espresso); color:#fff; }
.bbb-home .product-card .badge-sale{ background:var(--color-blush); color:var(--color-espresso); }
.bbb-home .product-card .badge-new{ background:var(--color-espresso); color:var(--color-white); border:none; font-size:.58rem; padding:.28em .6em; letter-spacing:.08em; }
/* Uitverkocht: smalle balk onderaan de foto in plaats van een label in de
   hoek, zodat het gezicht van het model vrij blijft (klant, 9 september 2026). */
.bbb-home .product-card .badge-out-balk{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:block; padding:.55em .8em; text-align:center; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; background:rgba(60,46,36,.72); color:#fff; pointer-events:none; }
.bbb-home .product-card .thumb{ position:relative; display:block; }
.bbb-home .product-card .thumb.has-hover-img .thumb-hover{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; object-fit:cover; width:100%; height:100%; }
.bbb-home .product-card:hover .thumb.has-hover-img .thumb-hover{ opacity:1; }
.bbb-home .product-card .price{ color:var(--color-espresso); font-weight:600; }
.bbb-home .product-card .price del{ color:var(--color-ink-muted); margin-right:.4em; }
.bbb-home .product-card .price ins{ text-decoration:none; }
.bbb-home .product-card .swatches{ display:flex; gap:.35rem; margin-top:.5em; }
.bbb-home .product-card .swatch{ display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid var(--color-border); }
.bbb-home .product-card .wishlist-ti{ position:absolute; top:.75rem; right:.75rem; z-index:2; background:none; width:auto; height:auto; }
.bbb-home .product-card .wishlist-ti .tinv-wishlist{ margin:0; }
.bbb-home .product-card .wishlist-ti .tinvwl_add_to_wishlist_button{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:var(--color-espresso); font-size:0; box-shadow:var(--shadow-card); margin:0; }
.bbb-home .product-card .wishlist-ti .tinvwl_add_to_wishlist_button::before{ font-size:15px; margin:0; }
.bbb-home .product-card .wishlist-ti .tinvwl_add_to_wishlist_button.tinvwl-product-in-list{ color:var(--color-blush); }
.bbb-home .split-feature .promo-panel{ align-items:center; }
.bbb-home .split-feature .promo-panel::before{ background:linear-gradient(90deg, rgba(88,76,66,.60) 0%, rgba(88,76,66,.30) 45%, rgba(88,76,66,0) 72%); }
.bbb-home .split-feature .promo-panel .panel-text{ max-width:60%; }
.bbb-home .split-feature .promo-panel .promo-line{ display:block; font-family:var(--font-heading); font-size:1.7rem; line-height:1.15; color:#fff; }
.bbb-home .split-feature .promo-panel h3{ font-size:1.7rem; margin-top:0; color:#fff; }
.bbb-home .instagram-section .section-head{ flex-direction:row; justify-content:flex-start; align-items:baseline; gap:1rem; text-align:left; }
.bbb-home .instagram-section .section-head h2{ font-family:var(--font-heading); text-transform:none; letter-spacing:.01em; font-size:1.55rem; font-weight:600; }
.bbb-home .instagram-section .section-head .view-all{ text-transform:none; letter-spacing:.02em; color:var(--color-ink-muted); }
.bbb-home .insta-follow{ text-align:center; margin-top:1.5rem; }
.bbb-home .insta-follow .btn{ background:var(--color-white); border:1px solid var(--color-border); color:var(--color-espresso); }
.bbb-home .insta-follow .btn:hover{ background:var(--color-espresso); border-color:var(--color-espresso); color:#fff; }
.bbb-home .insta-follow .btn:hover svg{ color:#fff; }
.bbb-home ul{ list-style:none; }
.bbb-home img{ max-width:100%; height:auto; }

/* == MOBIELE CORRECTIES == */
.bbb-home{ font-family:var(--font-body); color:var(--color-espresso); }
.bbb-home p, .bbb-home span, .bbb-home a{ color:inherit; }
@media (max-width:1250px){
	.bbb-home .category-circles ul{ flex-wrap:wrap; }
	.bbb-home .category-circles li{ width:150px; }
	.bbb-home .category-circles .circle-thumb{ width:150px; height:150px; }
}
@media (max-width:900px){
	.bbb-home .category-circles li{ width:126px; }
	.bbb-home .category-circles .circle-thumb{ width:126px; height:126px; }
}
@media (max-width:560px){
	.bbb-home .category-circles ul{ gap:1.1rem 1.3rem; }
	.bbb-home .category-circles li{ width:100px; }
	.bbb-home .category-circles .circle-thumb{ width:100px; height:100px; }
	.bbb-home .category-circles h3{ font-size:.7rem; }
	.bbb-home .category-circles li > a > span:last-child{ font-size:.68rem; }
}
@media (max-width:780px){
	.bbb-home .section{ padding:2.6rem 0; }
	.bbb-home .hero{ height:440px; background-position:70% center; }
	/* De onderruimte hoort hier bij de zijruimte in dezelfde regel te staan.
	   Werd die apart hierboven gezet, dan wiste deze verkorte notatie hem
	   weer en plakte de bestelknop tegen de volgende sectie aan. */
	.bbb-home .hero-content{ margin-left:0; padding:0 1.25rem 2.4rem; }
	.bbb-home .hero-content .btn{ letter-spacing:.1em; padding:.85em 1.4em; }
	.bbb-home .usp-strip ul{ padding:.8rem 0; gap:.5rem .8rem; }
	.bbb-home .usp-strip li{ flex:1 1 45%; font-size:.67rem; line-height:1.35; gap:.5em; }
	.bbb-home .usp-strip svg{ width:15px; height:15px; }
	.bbb-home .trust-strip ul{ gap:1rem; }
	.bbb-home .trust-strip li{ flex:1 1 42%; }
	.bbb-home .split-feature .promo-panel{ min-height:300px; }
	.bbb-home .split-feature .promo-panel .panel-text{ max-width:85%; }
	.bbb-home .split-feature .promo-panel .promo-line, .bbb-home .split-feature .promo-panel h3{ font-size:1.35rem; }
	.bbb-home .section-head{ margin-bottom:1.2rem; }
	.bbb-home .product-grid{ gap:1rem; }
	.bbb-home .instagram-grid{ padding-right:0; }
}

/* Wishlist-knop: alleen het hartje, geen tekst */
.bbb-home .product-card .wishlist-ti .tinvwl_add_to_wishlist_button *{ font-size:0 !important; line-height:0 !important; }
.bbb-home .product-card .wishlist-ti .tinvwl_add_to_wishlist_button::before{ font-size:15px !important; line-height:1 !important; margin:0 !important; }
.bbb-home .product-card .wishlist-ti .tinv-wishlist-clear{ display:none; }

/* == DESIGN-TOPBAR (drie verzendteksten over de volle breedte) == */
.bbb-topbar{ background:var(--color-camel); color:var(--color-cream); font-size:.85rem; }
.bbb-topbar-inner{ max-width:1280px; margin:0 auto; padding:.55em 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.bbb-topbar-inner span{ display:flex; align-items:center; gap:.45em; opacity:.95; white-space:nowrap; }
.bbb-topbar-inner svg{ width:14px; height:14px; flex:none; }
body.home .usp_slider{ display:none !important; }
@media (max-width:780px){
	.bbb-topbar{ font-size:11px; }
	.bbb-topbar-inner{ padding:.5em 1rem; }
}
@media (max-width:560px){
	.bbb-topbar-inner span:nth-child(2){ display:none; }
}
@media (max-width:420px){
	.bbb-topbar{ font-size:10px; }
}