:root{
  --cream:#f7efe5;
  --paper:#fffaf4;
  --ink:#2c1a14;
  --brown:#6e402c;
  --cognac:#a9572c;
  --green:#3c7447;
  --yellow:#e4b54c;
  --line:#dfcdbf;
  --shadow:0 10px 30px rgba(72,45,31,.10);
  --radius:18px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.45;
}

img{
  width:100%;
  display:block;
}

a{
  color:inherit;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  height:66px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(247,239,229,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(110,64,44,.08);
}

.brand-wrap{
  line-height:1;
}

.brand{
  font-family:Georgia,serif;
  font-weight:700;
  font-size:1.75rem;
  color:var(--brown);
}

.brand-sub{
  margin-top:2px;
  font-size:.54rem;
  letter-spacing:.18em;
  color:var(--cognac);
}

.wa-top{
  text-decoration:none;
  color:#fff;
  background:var(--green);
  padding:9px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:.86rem;
}

main{
  max-width:1050px;
  margin:0 auto;
  padding:0 12px 45px;
}

.hero{
  display:grid;
  gap:12px;
  padding:16px 0 10px;
}

.hero-copy{
  position:relative;
}

.eyebrow{
  color:var(--cognac);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
}

h1,
h2{
  font-family:Georgia,serif;
  color:var(--brown);
}

h1{
  margin:.35rem 0 .65rem;
  font-size:clamp(2.65rem,12vw,4.3rem);
  line-height:.94;
  max-width:9ch;
}

h2{
  margin:.3rem 0 .65rem;
  font-size:1.75rem;
  line-height:1.03;
}

.hero-text{
  margin:0 0 14px;
  font-size:1rem;
  max-width:34rem;
}

.price-badge{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  background:var(--cognac);
  color:#fff;
  padding:9px 13px;
  border-radius:13px;
  box-shadow:var(--shadow);
}

.price-badge span{
  font-size:.72rem;
}

.price-badge strong{
  font-size:1.8rem;
}

.price-badge small{
  font-size:.76rem;
}

.hero-image{
  height:285px;
  object-fit:cover;
  object-position:center;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:6px 0 10px;
}

.facts div{
  background:var(--paper);
  padding:10px 7px;
  border-radius:12px;
  text-align:center;
  box-shadow:var(--shadow);
}

.facts strong{
  display:block;
  color:var(--brown);
  font-size:.86rem;
}

.facts span{
  display:block;
  margin-top:2px;
  font-size:.68rem;
  color:#75655b;
  line-height:1.2;
}

.cta-stack{
  display:grid;
  gap:8px;
  margin:10px 0 16px;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:48px;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
}

.btn-wa{
  background:var(--green);
  color:#fff;
}

.btn-secondary{
  background:var(--paper);
  color:var(--brown);
  border:1.5px solid var(--brown);
}

.btn-dark{
  background:var(--ink);
  color:#fff;
}

.visual-card{
  margin:12px 0;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--paper);
  box-shadow:var(--shadow);
}

.visual-card img{
  width:100%;
  height:auto;
}

.business-card{
  margin:12px 0;
  padding:18px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#f5d780,#eab84f);
  box-shadow:var(--shadow);
}

.business-card p{
  margin-bottom:13px;
}

.reviews-section{
  margin:12px 0;
  padding:17px;
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.review-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:85%;
  gap:9px;
  overflow-x:auto;
  padding:2px 0 8px;
  scroll-snap-type:x mandatory;
}

.review{
  scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}

.review p{
  margin:.4rem 0 .7rem;
  font-size:.9rem;
}

.review strong{
  display:block;
  font-size:.83rem;
}

.review span{
  display:block;
  margin-top:2px;
  font-size:.7rem;
  color:#8a786c;
}

.stars{
  color:var(--yellow);
  letter-spacing:.06em;
  font-size:.92rem;
}

.photo-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:12px 0;
}

.photo-strip img{
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:12px;
}

.location-card{
  margin:12px 0;
  padding:16px;
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid;
  gap:14px;
}

.address{
  font-weight:800;
}

.location-card ul{
  margin:8px 0 0;
  padding-left:19px;
}

.location-card li{
  margin:5px 0;
}

.location-card img{
  border-radius:14px;
  max-height:250px;
  object-fit:cover;
}

.gift-card{
  margin-top:12px;
}

.practical-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:12px 0;
}

.practical-row div{
  background:var(--paper);
  border-radius:12px;
  padding:10px 6px;
  text-align:center;
  box-shadow:var(--shadow);
}

.practical-row strong{
  display:block;
  color:var(--brown);
  font-size:.78rem;
  line-height:1.15;
}

.practical-row span{
  display:block;
  margin-top:3px;
  font-size:.65rem;
  color:#76665b;
  line-height:1.15;
}

.instagram-card{
  margin:12px 0;
  padding:17px;
  border-radius:var(--radius);
  background:#ead9d0;
  box-shadow:var(--shadow);
}

.instagram-card p{
  margin-bottom:13px;
}

.final-cta{
  margin:12px 0;
  padding:20px;
  border-radius:var(--radius);
  background:var(--ink);
  color:#fff;
  text-align:center;
}

.final-cta h2{
  color:#fff;
}

footer{
  background:var(--ink);
  color:#f6ece5;
  padding:25px 16px;
  display:grid;
  gap:4px;
  font-size:.84rem;
}

.footer-brand{
  font-family:Georgia,serif;
  font-size:1.45rem;
  font-weight:700;
}

.footer-links{
  margin-top:8px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.footer-links a{
  color:#fff;
}

@media(min-width:720px){

  .topbar{
    padding-left:max(20px,calc((100vw - 1050px)/2));
    padding-right:max(20px,calc((100vw - 1050px)/2));
  }

  .hero{
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:28px;
    padding-top:26px;
  }

  .hero-image{
    height:420px;
  }

  .facts{
    gap:10px;
  }

  .facts div{
    padding:14px;
  }

  .facts strong{
    font-size:1rem;
  }

  .facts span{
    font-size:.8rem;
  }

  .cta-stack{
    grid-template-columns:1fr 1fr;
  }

  .review-row{
    grid-auto-flow:initial;
    grid-template-columns:repeat(3,1fr);
    overflow:visible;
  }

  .location-card{
    grid-template-columns:1fr 1fr;
    align-items:center;
  }

  .location-card img{
    max-height:320px;
  }

  .photo-strip{
    gap:10px;
  }

}

/* =========================================================
   JAZZBAG V2.1 — MOBILE FINE TUNING
   ========================================================= */

/* Nog iets compacter */
.visual-card,
.business-card,
.reviews-section,
.location-card,
.instagram-card,
.final-cta{
  margin-top:10px;
  margin-bottom:10px;
}

/* Bedrijfsblok: mobiel rustiger */
.business-card h2{
  font-size:1.55rem;
  max-width:15ch;
}

.business-card p{
  font-size:.94rem;
}

/* Reviews: echte reviewvisuals, geen dubbele tekstkaarten */
.review-row,
.photo-strip{
  display:none;
}

.review-visuals{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:84%;
  gap:9px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:2px 2px 7px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.review-visuals::-webkit-scrollbar{
  display:none;
}

.review-visuals img{
  scroll-snap-align:start;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}

.review-note{
  margin:6px 2px 0;
  font-size:.68rem;
  color:#8a786c;
}

/* Locatie compacter en zonder verkeerde reviewafbeelding */
.location-card{
  display:block;
  padding:17px;
}

.location-card h2{
  font-size:1.65rem;
  max-width:18ch;
}

.location-card .address{
  margin-top:12px;
  margin-bottom:8px;
  font-size:.96rem;
}

.location-card ul{
  margin:7px 0 0;
}

.location-card li{
  margin:4px 0;
  font-size:.91rem;
}

/* Praktische rij iets netter */
.practical-row div{
  min-height:82px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Instagramkop op mobiel niet te dominant */
.instagram-card h2{
  font-size:1.55rem;
}

/* Eindblok iets compacter */
.final-cta{
  padding:18px;
}

.final-cta h2{
  font-size:1.7rem;
}

/* Desktop */
@media(min-width:720px){

  .business-card h2{
    font-size:2rem;
    max-width:none;
  }

  .review-visuals{
    grid-auto-flow:initial;
    grid-template-columns:repeat(3,1fr);
    overflow:visible;
  }

  .location-card h2{
    font-size:2rem;
    max-width:none;
  }
}


/* =========================================================
   JAZZBAG V2.1 — MOBILE FINE TUNING
   ========================================================= */

/* Nog iets compacter */
.visual-card,
.business-card,
.reviews-section,
.location-card,
.instagram-card,
.final-cta{
  margin-top:10px;
  margin-bottom:10px;
}

/* Bedrijfsblok: mobiel rustiger */
.business-card h2{
  font-size:1.55rem;
  max-width:15ch;
}

.business-card p{
  font-size:.94rem;
}

/* Reviews: echte reviewvisuals, geen dubbele tekstkaarten */
.review-row,
.photo-strip{
  display:none;
}

.review-visuals{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:84%;
  gap:9px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:2px 2px 7px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.review-visuals::-webkit-scrollbar{
  display:none;
}

.review-visuals img{
  scroll-snap-align:start;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}

.review-note{
  margin:6px 2px 0;
  font-size:.68rem;
  color:#8a786c;
}

/* Locatie compacter en zonder verkeerde reviewafbeelding */
.location-card{
  display:block;
  padding:17px;
}

.location-card h2{
  font-size:1.65rem;
  max-width:18ch;
}

.location-card .address{
  margin-top:12px;
  margin-bottom:8px;
  font-size:.96rem;
}

.location-card ul{
  margin:7px 0 0;
}

.location-card li{
  margin:4px 0;
  font-size:.91rem;
}

/* Praktische rij iets netter */
.practical-row div{
  min-height:82px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Instagramkop op mobiel niet te dominant */
.instagram-card h2{
  font-size:1.55rem;
}

/* Eindblok iets compacter */
.final-cta{
  padding:18px;
}

.final-cta h2{
  font-size:1.7rem;
}

/* Desktop */
@media(min-width:720px){

  .business-card h2{
    font-size:2rem;
    max-width:none;
  }

  .review-visuals{
    grid-auto-flow:initial;
    grid-template-columns:repeat(3,1fr);
    overflow:visible;
  }

  .location-card h2{
    font-size:2rem;
    max-width:none;
  }
}


/* Jazzbag ontdek-blok */
.discover-actions{
  display:grid;
  gap:8px;
  margin-top:12px;
}

@media(min-width:720px){
  .discover-actions{
    grid-template-columns:1fr 1fr;
  }
}

/* =========================================================
   DIGITALE CADEAUBON
   ========================================================= */

.gift-order{
  display:grid;
  gap:16px;
  padding:18px 0 10px;
}

.gift-order-image{
  width:100%;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.gift-order h1{
  max-width:none;
  font-size:2.7rem;
}

.gift-order-copy p{
  max-width:38rem;
}

.gift-highlights{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:14px;
}

.gift-highlights div{
  background:var(--paper);
  padding:10px 6px;
  border-radius:12px;
  text-align:center;
  box-shadow:var(--shadow);
}

.gift-highlights strong{
  display:block;
  color:var(--brown);
  font-size:.78rem;
}

.gift-highlights span{
  display:block;
  color:#79695f;
  font-size:.64rem;
  margin-top:3px;
  line-height:1.15;
}

.gift-form-card{
  margin:12px 0;
  padding:18px;
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.gift-form-card h2{
  font-size:1.8rem;
}

.field{
  margin-top:14px;
}

.field label,
.gift-form-card > form > label{
  display:block;
  margin-bottom:6px;
  font-size:.82rem;
  font-weight:800;
  color:var(--brown);
}

.field input,
.field select,
.field textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:11px;
  padding:13px;
  font:inherit;
  outline:none;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--cognac);
  box-shadow:0 0 0 3px rgba(169,87,44,.10);
}

.amount-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}

.amount-btn{
  border:1.5px solid var(--brown);
  background:#fff;
  color:var(--brown);
  border-radius:11px;
  min-height:48px;
  font-weight:800;
  font-size:1rem;
}

.amount-btn.active{
  background:var(--brown);
  color:#fff;
}

.money-field{
  display:flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
}

.money-field span{
  padding-left:13px;
  font-weight:800;
  color:var(--brown);
}

.money-field input{
  border:0;
}

.order-explainer{
  margin:16px 0;
  padding:14px;
  background:#f3e8dc;
  border-radius:12px;
  font-size:.85rem;
}

.order-explainer strong{
  color:var(--brown);
}

.order-explainer ol{
  margin:8px 0 0;
  padding-left:20px;
}

.order-explainer li{
  margin:4px 0;
}

.gift-submit{
  width:100%;
  border:0;
  cursor:pointer;
  font-size:1rem;
}

.form-small{
  margin:10px 0 0;
  text-align:center;
  color:#78695f;
  font-size:.72rem;
}

.gift-back{
  margin:12px 0 24px;
}

@media(min-width:720px){

  .gift-order{
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:26px;
    padding-top:30px;
  }

  .gift-form-card{
    max-width:680px;
    margin:20px auto;
    padding:26px;
  }

}

.gift-link{
  display:block;
  text-decoration:none;
}

.gift-home-action{
  padding:10px;
  background:var(--paper);
}

.gift-home-action .btn{
  width:100%;
}


/* =========================================================
   JAZZBAG FOOTER
   ========================================================= */

.site-footer{
  margin-top:28px;
  background:#2f1d18;
  color:#f7eee7;
}

.footer-inner{
  display:grid;
  gap:28px;
  padding:32px 20px 26px;
}

.footer-brand{
  max-width:340px;
}

.footer-logo{
  font-size:2.15rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.04em;
  color:#fff6ef;
}

.footer-logo-sub{
  margin-top:5px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.22em;
  color:#d6aa8f;
}

.footer-brand p{
  margin:14px 0 0;
  max-width:290px;
  color:#d8c9c0;
  font-size:.88rem;
  line-height:1.55;
}

.footer-column{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.footer-column h3{
  margin:0 0 4px;
  color:#fff6ef;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.footer-column a,
.footer-column span{
  color:#d8c9c0;
  text-decoration:none;
  font-size:.86rem;
  line-height:1.45;
}

.footer-column a:hover{
  color:#fff;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding:14px 20px 18px;
  color:#a99589;
  font-size:.7rem;
  text-align:center;
}

@media(min-width:760px){

  .footer-inner{
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    max-width:1120px;
    margin:0 auto;
    padding:42px 24px 34px;
  }

  .footer-bottom{
    padding-bottom:20px;
  }

}

/* =========================================================
   JURIDISCHE PAGINA'S
   ========================================================= */

.legal-page{
  max-width:820px;
  margin:0 auto;
  padding:26px 18px 48px;
}

.legal-back{
  display:inline-block;
  margin-bottom:24px;
  color:var(--brown);
  text-decoration:none;
  font-size:.82rem;
  font-weight:800;
}

.legal-page h1{
  max-width:none;
  margin-bottom:10px;
  font-size:2.5rem;
}

.legal-intro{
  max-width:650px;
  font-size:1rem;
  line-height:1.6;
}

.legal-meta{
  display:inline-block;
  margin:10px 0 20px;
  padding:7px 11px;
  background:#f3e8dc;
  border-radius:8px;
  color:var(--brown);
  font-size:.75rem;
}

.legal-page section{
  padding:20px 0;
  border-top:1px solid rgba(70,45,35,.12);
}

.legal-page section:first-of-type{
  margin-top:8px;
}

.legal-page h2{
  margin:0 0 10px;
  color:var(--brown);
  font-size:1.3rem;
}

.legal-page p,
.legal-page li{
  color:#574940;
  font-size:.92rem;
  line-height:1.65;
}

.legal-page p{
  margin:8px 0;
}

.legal-page ul{
  padding-left:20px;
  margin:10px 0;
}

.legal-page li{
  margin:5px 0;
}

.legal-page a{
  color:var(--brown);
}

@media(min-width:760px){
  .legal-page{
    padding:44px 24px 70px;
  }

  .legal-page h1{
    font-size:3.2rem;
  }
}


/* =========================================================
   SEO LANDING - WORKSHOP LEREN TAS MAKEN
   ========================================================= */

.workshop-seo{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

.workshop-hero{
  padding:24px 0 16px;
}

.workshop-hero h1{
  max-width:700px;
  margin-bottom:10px;
  font-size:2.7rem;
  line-height:.98;
}

.workshop-lead{
  max-width:680px;
  font-size:1.02rem;
  line-height:1.6;
}

.workshop-hero-image{
  margin-top:18px;
}

.workshop-hero-image img,
.workshop-visual img{
  display:block;
  width:100%;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.workshop-keyfacts{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:7px;
  margin:12px 0;
}

.workshop-keyfacts div{
  background:var(--paper);
  padding:11px 7px;
  text-align:center;
  border-radius:12px;
  box-shadow:var(--shadow);
}

.workshop-keyfacts strong{
  display:block;
  color:var(--brown);
  font-size:.9rem;
}

.workshop-keyfacts span{
  display:block;
  margin-top:3px;
  color:#78695f;
  font-size:.68rem;
}

.workshop-primary-cta{
  width:100%;
  margin-top:6px;
}

.workshop-section{
  padding:30px 0;
  border-top:1px solid rgba(60,40,30,.10);
}

.workshop-section h2,
.workshop-related h2{
  margin:3px 0 12px;
  max-width:760px;
  font-size:1.85rem;
  color:var(--brown);
}

.workshop-section > p{
  max-width:760px;
  line-height:1.65;
}

.workshop-steps,
.occasion-grid{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.workshop-steps article,
.occasion-grid article{
  padding:16px;
  background:var(--paper);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.workshop-steps article > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  margin-bottom:9px;
  border-radius:50%;
  background:var(--brown);
  color:white;
  font-weight:800;
  font-size:.8rem;
}

.workshop-steps h3,
.occasion-grid h3{
  margin:0 0 5px;
  color:var(--brown);
  font-size:1rem;
}

.workshop-steps p,
.occasion-grid p{
  margin:0;
  color:#68584f;
  font-size:.85rem;
  line-height:1.5;
}

.workshop-visual{
  padding:8px 0 28px;
}

.workshop-price{
  background:#fff7ef;
  margin-left:-16px;
  margin-right:-16px;
  padding-left:16px;
  padding-right:16px;
}

.workshop-section address{
  margin:14px 0;
  font-style:normal;
  line-height:1.6;
  color:#574940;
}

.review-page-link{
  margin-top:14px;
}

.faq-section details{
  background:var(--paper);
  border-radius:11px;
  margin:8px 0;
  padding:0 14px;
  box-shadow:var(--shadow);
}

.faq-section summary{
  padding:14px 0;
  cursor:pointer;
  font-weight:800;
  color:var(--brown);
  font-size:.9rem;
}

.faq-section details p{
  margin:0;
  padding:0 0 15px;
  color:#64554c;
  font-size:.85rem;
  line-height:1.55;
}

.workshop-related{
  padding:30px 0;
  border-top:1px solid rgba(60,40,30,.10);
}

.related-links{
  display:grid;
  gap:9px;
}

.related-links a{
  display:flex;
  flex-direction:column;
  padding:15px;
  background:var(--paper);
  border-radius:13px;
  box-shadow:var(--shadow);
  color:var(--brown);
  text-decoration:none;
}

.related-links span{
  margin-top:3px;
  color:#76665c;
  font-size:.75rem;
}

.workshop-final{
  margin-left:-16px;
  margin-right:-16px;
  margin-bottom:0;
}

@media(min-width:760px){

  .workshop-seo{
    padding:0 24px;
  }

  .workshop-hero{
    padding-top:42px;
  }

  .workshop-hero h1{
    font-size:4rem;
  }

  .workshop-keyfacts{
    grid-template-columns:repeat(4,1fr);
  }

  .workshop-primary-cta{
    width:auto;
  }

  .workshop-steps{
    grid-template-columns:repeat(4,1fr);
  }

  .occasion-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .related-links{
    grid-template-columns:repeat(3,1fr);
  }

  .workshop-price{
    margin-left:0;
    margin-right:0;
    padding:30px;
    border-radius:var(--radius);
  }

  .workshop-final{
    margin-left:0;
    margin-right:0;
    border-radius:var(--radius);
  }
}

.seo-more-link{
  display:block;
  margin:9px 0 4px;
  text-align:center;
  color:var(--brown);
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
}

/* =========================================================
   HOMEPAGE WORKSHOP-FIRST REWORK
   ========================================================= */

.home-section{
  padding:30px 0;
  border-top:1px solid rgba(60,40,30,.10);
}

.home-section h2{
  margin:4px 0 12px;
  color:var(--brown);
  font-size:1.85rem;
}

.home-section > p{
  max-width:720px;
  line-height:1.6;
}

.home-section > img{
  display:block;
  width:100%;
  margin:16px 0;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.workshop-home{
  padding-bottom:26px;
}

.hero-main-cta{
  width:100%;
  margin-top:12px;
}

.fact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:16px;
}

.fact-grid div{
  background:var(--paper);
  padding:13px 8px;
  text-align:center;
  border-radius:12px;
  box-shadow:var(--shadow);
}

.fact-grid strong{
  display:block;
  color:var(--brown);
  font-size:.9rem;
}

.fact-grid span{
  display:block;
  margin-top:3px;
  font-size:.68rem;
  color:#78695f;
}

.practical-note{
  margin-top:12px;
  font-size:.82rem;
  color:#705f55;
}

.html-reviews{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.html-reviews blockquote{
  margin:0;
  padding:16px;
  background:var(--paper);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.html-reviews blockquote p{
  margin:0;
  font-size:.9rem;
  line-height:1.55;
  color:#594b42;
}

.html-reviews cite{
  display:block;
  margin-top:8px;
  font-size:.75rem;
  font-style:normal;
  font-weight:800;
  color:var(--brown);
}

.collection-intro{
  background:#fff7ef;
  margin-left:-16px;
  margin-right:-16px;
  padding-left:16px;
  padding-right:16px;
}

.collection-intro .btn,
.gift-highlight .btn{
  width:100%;
}

.handmade-jazz{
  background:#f3e8dc;
  margin-left:-16px;
  margin-right:-16px;
  padding-left:16px;
  padding-right:16px;
}

.gift-highlight{
  background:#fffaf4;
}

.location-facts{
  display:grid;
  gap:6px;
  margin:12px 0 16px;
}

.location-facts span{
  background:var(--paper);
  padding:10px 12px;
  border-radius:10px;
  font-size:.8rem;
  color:var(--brown);
}

@media(min-width:760px){

  .hero-main-cta{
    width:auto;
  }

  .fact-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .html-reviews{
    grid-template-columns:repeat(3,1fr);
  }

  .collection-intro,
  .handmade-jazz{
    margin-left:0;
    margin-right:0;
    padding:30px;
    border-radius:var(--radius);
  }

  .collection-intro .btn,
  .gift-highlight .btn{
    width:auto;
  }

  .location-facts{
    grid-template-columns:repeat(3,1fr);
  }
}


/* Workshopresultaat - compacte homepage teaser */
.workshop-result-preview{
  padding:18px 0 24px;
}

.workshop-result-preview h2{
  margin:4px 0 7px;
  color:var(--brown);
  font-size:1.55rem;
  line-height:1.08;
}

.workshop-result-preview p{
  margin:0 0 12px;
  max-width:620px;
  font-size:.86rem;
  line-height:1.5;
  color:#66564d;
}

.workshop-result-preview img{
  display:block;
  width:100%;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

@media(min-width:760px){
  .workshop-result-preview h2{
    font-size:1.9rem;
  }
}

.gift-home-copy{
  padding:14px 14px 4px;
  background:var(--paper);
}

.gift-home-copy h2{
  margin:4px 0 7px;
  color:var(--brown);
  font-size:1.45rem;
  line-height:1.08;
}

.gift-home-copy p{
  margin:0;
  color:#66564d;
  font-size:.84rem;
  line-height:1.5;
}

.gift-home-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.gift-home-meta span{
  padding:6px 8px;
  border-radius:8px;
  background:#f3e8dc;
  color:var(--brown);
  font-size:.68rem;
  font-weight:800;
}

/* Collectiepagina: ruimte onder sticky header */
.collection-hero{
  padding-top:38px;
}

@media(max-width:759px){
  .collection-hero{
    padding-top:34px;
  }
}

/* Collectiepagina: rustigere mobiele typografie */
@media(max-width:759px){

  .collection-type h2{
    font-size:1.6rem;
    line-height:1.08;
  }

  .collection-type p{
    font-size:.9rem;
    line-height:1.55;
  }

  .collection-note span{
    font-size:.8rem;
    line-height:1.45;
  }

  .collection-number{
    margin-bottom:2px;
  }

  .exclusive-facts{
    margin-top:14px;
  }
}

/* Meer ruimte rond WhatsApp-knoppen */
a[href*="wa.me"],
a[href*="whatsapp"],
.btn-whatsapp,
.whatsapp-btn{
  margin-top:16px;
  margin-bottom:18px;
}

/* Extra ruimte voor blok dat direct NA een WhatsApp-knop komt */
a[href*="wa.me"] + *,
a[href*="whatsapp"] + *,
.btn-whatsapp + *,
.whatsapp-btn + *{
  margin-top:10px;
}


/* Handmade Exclusives - kenmerken als nette 2x2 kaarten */
.exclusive-facts{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin:16px 0 18px;
}

.exclusive-facts div{
  padding:12px 9px;
  background:var(--paper);
  border-radius:12px;
  text-align:center;
  box-shadow:var(--shadow);
}

.exclusive-facts strong{
  display:block;
  color:var(--brown);
  font-size:.84rem;
  line-height:1.2;
}

.exclusive-facts span{
  display:block;
  margin-top:4px;
  color:#74645a;
  font-size:.68rem;
  line-height:1.3;
}

@media(min-width:760px){
  .exclusive-facts{
    grid-template-columns:repeat(4,1fr);
  }
}

.result-more-link{
  display:inline-block;
  margin-top:10px;
  color:var(--brown);
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
}

.result-more-link:hover{
  text-decoration:underline;
}

.collection-visual-link{
  display:block;
  margin:14px 0 12px;
  text-decoration:none;
}

.collection-visual-link img{
  display:block;
  width:100%;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .18s ease;
}

.collection-visual-link:focus-visible{
  outline:3px solid var(--brown);
  outline-offset:3px;
  border-radius:var(--radius);
}

@media(hover:hover){
  .collection-visual-link:hover img{
    transform:scale(1.01);
  }
}

/* Showroomcollectie - mobiel eerst */
.showroom-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:18px 0 8px;
}

.showroom-grid img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
  box-shadow:var(--shadow);
}

@media(min-width:760px){
  .showroom-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
}

@media(min-width:1050px){
  .showroom-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Handmade Exclusives - modeloverzicht */
.exclusive-choice{
  margin-top:18px;
  font-weight:700;
}

.exclusive-choice-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:10px 0 16px;
}

.exclusive-choice-tags span{
  padding:7px 10px;
  border-radius:999px;
  background:var(--paper);
  color:var(--brown);
  font-size:.68rem;
  font-weight:800;
  box-shadow:var(--shadow);
}

.exclusive-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:14px 0 10px;
}

.exclusive-grid img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
  box-shadow:var(--shadow);
}

.exclusive-colour-note{
  margin-top:10px;
  font-size:.72rem !important;
  color:#74645a;
}

@media(min-width:760px){
  .exclusive-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }
}

/* =========================================================
   Collectiepagina - mobiele polish augustus 2026
   ========================================================= */

.showroom-stock-note{
  margin:12px 0 2px;
  color:#74645a;
  font-size:.74rem !important;
  line-height:1.45;
}

/* Duidelijk onderscheid tussen hoofdcollectie en exclusives */
.collection-exclusive{
  margin-top:34px;
  padding-top:28px;
  border-top:1px solid rgba(112,78,59,.16);
}

/* Compactere productgrids */
.showroom-grid,
.exclusive-grid{
  gap:8px;
}

/* Rustiger beeldkader */
.showroom-grid img,
.exclusive-grid img{
  border-radius:14px;
  box-shadow:0 5px 18px rgba(64,45,34,.07);
}

/* Exclusives intro compacter */
.exclusive-choice{
  margin:14px 0 0;
  font-size:.86rem !important;
  line-height:1.45;
}

.exclusive-choice-tags{
  gap:6px;
  margin:9px 0 14px;
}

.exclusive-choice-tags span{
  padding:6px 9px;
  font-size:.64rem;
  box-shadow:none;
  border:1px solid rgba(112,78,59,.12);
}

.exclusive-colour-note{
  margin:10px 2px 2px;
  line-height:1.45;
}

/* Alleen mobiel */
@media(max-width:759px){

  .collection-type{
    margin-bottom:24px;
  }

  .showroom-grid,
  .exclusive-grid{
    margin-top:14px;
    margin-bottom:12px;
  }

  .showroom-grid img,
  .exclusive-grid img{
    aspect-ratio:1 / 1;
  }

  .collection-exclusive{
    margin-top:30px;
    padding-top:26px;
  }

  /* WhatsApp CTA niet tegen het grid plakken */
  .showroom-stock-note + .btn,
  .exclusive-colour-note + .btn{
    margin-top:14px;
  }
}

/* Handmade Exclusives - compactere mobiele intro */
.exclusive-intro{
  max-width:680px;
}

@media(max-width:759px){

  .collection-exclusive h2{
    font-size:1.48rem;
    line-height:1.06;
    margin-bottom:12px;
  }

  .exclusive-intro{
    margin-bottom:12px;
    font-size:.88rem !important;
    line-height:1.5 !important;
  }

  .exclusive-facts{
    gap:7px;
    margin:12px 0 14px;
  }

  .exclusive-facts div{
    padding:9px 7px;
    min-height:68px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .exclusive-facts strong{
    font-size:.76rem;
  }

  .exclusive-facts span{
    font-size:.62rem;
    margin-top:3px;
  }

  .exclusive-choice{
    margin-top:10px;
    font-size:.80rem !important;
    line-height:1.4;
  }

  .exclusive-choice-tags{
    margin:8px 0 12px;
    gap:5px;
  }

  .exclusive-choice-tags span{
    padding:5px 8px;
    font-size:.60rem;
  }
}

/* Showroomcollectie - compactere mobiele intro */
.showroom-intro{
  max-width:680px;
}

@media(max-width:759px){

  .collection-type:first-of-type h2{
    font-size:1.48rem;
    line-height:1.06;
    margin-bottom:12px;
  }

  .showroom-intro{
    margin-bottom:12px;
    font-size:.88rem !important;
    line-height:1.5 !important;
  }

  .collection-type:first-of-type .collection-note{
    margin:10px 0 14px;
  }

  .collection-type:first-of-type .collection-note span{
    font-size:.72rem;
    line-height:1.4;
  }

  .showroom-grid{
    margin-top:12px;
  }

  .showroom-stock-note{
    margin-top:10px;
    font-size:.70rem !important;
  }
}

/* Homepage - collectie banner */
.collection-home-banner{
  display:block;
  margin-bottom:18px;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
}

.collection-home-banner img{
  display:block;
  width:100%;
  height:auto;
}

@media(max-width:759px){
  .collection-home-banner{
    margin-bottom:16px;
    border-radius:14px;
  }
}

/* Homepage - atelierfoto */
.location-image{
  margin-bottom:18px;
  border-radius:16px;
  overflow:hidden;
}

.location-image img{
  display:block;
  width:100%;
  height:auto;
}

@media(max-width:759px){
  .location-image{
    margin-bottom:16px;
    border-radius:14px;
  }
}

/* Jazzbag logo = altijd Home */
a.brand{
  color:inherit;
  text-decoration:none;
}

/* Workshop resultaat-afbeelding klikbaar */
.workshop-result-image-link{
  display:block;
  text-decoration:none;
}

.workshop-result-image-link img{
  display:block;
  width:100%;
}

/* Homepage - echte workshopresultaten swipe-gallery */
.workshop-gallery{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 8px;
  margin-top:14px;
  scrollbar-width:none;
}

.workshop-gallery::-webkit-scrollbar{
  display:none;
}

.workshop-gallery-item{
  flex:0 0 78%;
  scroll-snap-align:start;
  display:block;
  text-decoration:none;
}

.workshop-gallery-item img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:14px;
}

@media(min-width:760px){
  .workshop-gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible;
    gap:14px;
  }

  .workshop-gallery-item{
    min-width:0;
  }
}

/* Workshop gallery - harde mobiele swipe fix */
@media(max-width:759px){

  .workshop-result-preview .workshop-gallery{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    overflow-y:hidden;
    gap:10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .workshop-result-preview .workshop-gallery-item{
    display:block;
    flex:0 0 78% !important;
    width:78% !important;
    min-width:78% !important;
    max-width:78% !important;
    scroll-snap-align:start;
  }

  .workshop-result-preview .workshop-gallery-item img{
    display:block;
    width:100% !important;
    height:auto;
    aspect-ratio:4 / 3;
    object-fit:cover;
  }
}

/* Homepage - swipebare reviewgalerij */
.review-gallery{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 8px;
  margin-top:14px;
  scrollbar-width:none;
}

.review-gallery::-webkit-scrollbar{
  display:none;
}

.review-gallery-item{
  flex:0 0 82%;
  min-width:82%;
  scroll-snap-align:start;
}

.review-gallery-item img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
}

@media(min-width:760px){
  .review-gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible;
    gap:14px;
  }

  .review-gallery-item{
    min-width:0;
  }
}

/* Reviews - alle kaarten exact dezelfde visuele maat */
.review-gallery-item{
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:14px;
}

.review-gallery-item img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position:center;
}

/* Reviews - witte buitenrand visueel terugbrengen */
.review-gallery-item{
  overflow:hidden;
  border-radius:14px;
}

.review-gallery-item img{
  display:block;
  width:106% !important;
  max-width:none !important;
  height:auto !important;
  margin-left:-3%;
}

/* Reviews - witte buitenrand visueel terugbrengen */
.review-gallery-item{
  overflow:hidden;
  border-radius:14px;
}

.review-gallery-item img{
  display:block;
  width:106% !important;
  max-width:none !important;
  height:auto !important;
  margin-left:-3%;
}
