/* PrintyStore — homepage-specifieke secties (warm premium design) */

/* Announcement bar */
.announce { background: var(--c-dark); color: #f0e7d8; font-size: .82rem; }
.announce .container { display: flex; gap: 2rem; justify-content: center; align-items: center; flex-wrap: wrap; padding: .55rem var(--gutter); }
.announce span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.announce .ico { color: var(--c-glow); }
@media (max-width: 700px){
  .announce .container { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 1.4rem; scrollbar-width: none; }
  .announce .container::-webkit-scrollbar { display: none; }
}

/* Header-extra's */
.nav-actions .icon-btn svg { width: 20px; height: 20px; }
.lang { font-size: .82rem; font-weight: 600; color: var(--c-ink-soft); border: 1px solid var(--c-line); border-radius: 999px; padding: .25rem .6rem; }

/* Full-width hero met sfeerfoto + overlay */
.hero-full { position: relative; min-height: clamp(460px, 72vh, 680px); display: flex; align-items: center; overflow: hidden; }
.hero-full .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-full .hero-overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(43,30,23,.82) 0%, rgba(43,30,23,.55) 40%, rgba(43,30,23,.08) 72%, rgba(43,30,23,0) 100%); }
.hero-full .container { position: relative; z-index: 2; }
.hero-panel { max-width: 560px; color: #fff; }
.hero-panel .eyebrow { color: var(--c-glow); }
.hero-panel h1 { color: #fff; font-size: clamp(2.3rem, 5.2vw, 3.8rem); margin-bottom: .35em; }
.hero-panel .lead { color: #efe6d8; font-size: 1.12rem; max-width: 46ch; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-full .btn-secondary { color: #fff; border-color: rgba(255,255,255,.7); }
.hero-full .btn-secondary:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
.hero-usps { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.18); }
.hero-usps div { color: #f0e7d8; font-size: .9rem; }
.hero-usps strong { display: block; color: #fff; font-family: var(--f-display); font-weight: 600; font-size: 1rem; }
@media (max-width: 680px){
  .hero-full .hero-overlay { background: linear-gradient(180deg, rgba(43,30,23,.35) 0%, rgba(43,30,23,.78) 65%); }
  .hero-panel { color: #fff; }
  .hero-usps { gap: 1rem; }
}

/* USP-balk wrapper */
.usp-band { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }

/* USP-cards onder hero */
.usp-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.usp-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.2rem 1.3rem; display: flex; gap: .9rem; align-items: flex-start; box-shadow: var(--sh-1); }
.usp-card .ico { font-size: 1.5rem; color: var(--c-accent); flex: none; line-height: 1; }
.usp-card strong { display: block; font-size: .98rem; }
.usp-card span { font-size: .84rem; color: var(--c-ink-soft); }
@media (max-width: 880px){ .usp-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .usp-cards { grid-template-columns: 1fr; } }

/* Section-head met rechter link */
.section-head { align-items: center; }
.head-link { font-weight: 600; color: var(--c-accent-ink); white-space: nowrap; }
.head-link:hover { text-decoration: underline; }

/* Collectiekaarten (5) */
.coll-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1.2rem; }
.coll-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; transition: var(--t); }
.coll-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.coll-card .cc-media { aspect-ratio: 4/5; overflow: hidden; background: var(--c-sand); }
.coll-card .cc-media img { width: 100%; height: 100%; object-fit: cover; transition: var(--t); }
.coll-card:hover .cc-media img { transform: scale(1.05); }
.coll-card .cc-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.coll-card h3 { font-size: 1.1rem; margin: 0; }
.coll-card p { font-size: .85rem; color: var(--c-ink-soft); margin: 0; }
.coll-card .cc-cta { margin-top: auto; padding-top: .7rem; color: var(--c-accent-ink); font-weight: 600; font-size: .9rem; }
@media (max-width: 980px){ .coll-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .coll-grid { grid-template-columns: 1fr; } }

/* Bestsellers (5) */
.best-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1.2rem; }
@media (max-width: 980px){ .best-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .best-grid { grid-template-columns: 1fr; } }

/* Maatwerk-sectie */
.maatwerk { background: var(--c-sand); border-radius: var(--radius-lg); overflow: hidden; }
.maatwerk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.maatwerk-copy { padding: clamp(1.8rem, 4vw, 3.2rem); }
.maatwerk-img { min-height: 320px; }
.maatwerk-img img { width: 100%; height: 100%; object-fit: cover; }
.maatwerk-benefits { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: clamp(2rem,5vw,3rem); }
.mb { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.1rem; }
.mb strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.mb span { font-size: .82rem; color: var(--c-ink-soft); }
@media (max-width: 820px){ .maatwerk-grid { grid-template-columns: 1fr; } .maatwerk-img { order: -1; aspect-ratio: 16/10; min-height: 0; } .maatwerk-benefits { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .maatwerk-benefits { grid-template-columns: 1fr; } }

/* Inspiratie-galerij (5 brede beeldkaarten) */
.insp-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; }
.insp-card { aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: var(--c-sand); position: relative; }
.insp-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.insp-card:hover img { transform: scale(1.08); }
@media (max-width: 980px){ .insp-grid { grid-template-columns: repeat(3,1fr); } .insp-card:nth-child(4),.insp-card:nth-child(5){ display:none; } }
@media (max-width: 560px){ .insp-grid { grid-template-columns: repeat(2,1fr); } .insp-card:nth-child(3){ display:none; } }

/* Testimonial / trust */
.testimonial { background: var(--c-dark); color: #f3ede2; border-radius: var(--radius-lg); text-align: center; padding: clamp(2.5rem,6vw,4rem); }
.testimonial h2 { color: #fff; }
.testimonial p { color: #e3d8c7; max-width: 60ch; margin-inline: auto; font-size: 1.1rem; }
.testimonial .quote { font-family: var(--f-display); font-size: clamp(1.3rem,2.6vw,1.7rem); color: #fff; line-height: 1.45; }
.testimonial .eyebrow { color: var(--c-glow); }
.testimonial cite { display: block; margin-top: 1rem; color: var(--c-glow); font-style: normal; font-size: .95rem; }

/* Benefit-iconen (4) */
.benefits { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; text-align: center; }
.benefit .ico { font-size: 2rem; color: var(--c-accent); }
.benefit h3 { font-size: 1.02rem; margin: .6rem 0 .3rem; }
.benefit p { font-size: .86rem; color: var(--c-ink-soft); margin: 0; }
@media (max-width: 820px){ .benefits { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px){ .benefits { grid-template-columns: 1fr; } }
