/* ============================================================
   Ontwerp "Winkel" — productgericht, bold, vrolijk.
   Groot kleurrijk beeldvlak-hero, producttegels met prijs-badges, ronde
   pil-knoppen, grotere schaduwen en een horizontale collectie-chipsstrip.
   Alles hieronder is gescoped onder [data-design="winkel"] zodat andere
   ontwerpen hier niets van meekrijgen. --brand-primary/--brand-accent/
   --font-heading/--font-body blijven bewust onaangeroerd (klant-instelbaar via
   Theme::cssVariables); dit bestand voegt alleen een levendige --wk-accent toe
   voor prijs-badges/chips, terwijl --brand-primary leidend blijft voor de
   hoofdknoppen.
   ============================================================ */

[data-design="winkel"]{
  --wk-accent:#ff6a3d;
  --wk-accent-soft:color-mix(in srgb, var(--wk-accent) 16%, #fff 84%);
  --wk-accent-deep:color-mix(in srgb, var(--wk-accent) 70%, #000 30%);
  --wk-radius:22px;
  --wk-shadow:0 26px 54px -26px rgba(20,10,30,.32);
  --wk-shadow-lg:0 34px 70px -30px rgba(20,10,30,.4);
}

/* ---- Beweging: scroll-reveal (motion.js voegt .is-in toe) ---- */
[data-design="winkel"] [data-reveal]{opacity:0;transform:translateY(20px) scale(.99);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
[data-design="winkel"] [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-design="winkel"] [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---- Header/footer: bold accent-tuning voor dit ontwerp ---- */
[data-design="winkel"] .site-header{background:rgba(255,255,255,.92)}
[data-design="winkel"] .brand-word{letter-spacing:-.01em}
[data-design="winkel"] .nav a:hover,
[data-design="winkel"] .nav a[aria-current="page"]{color:var(--wk-accent-deep)}
[data-design="winkel"] .site-footer{background:var(--wk-accent-soft)}
[data-design="winkel"] .footer-accent{color:var(--wk-accent-deep)}

/* ---- Ronde pil-knoppen ---- */
[data-design="winkel"] .btn{border-radius:999px}
[data-design="winkel"] .wk-btn--pill{padding-inline:1.6em;box-shadow:var(--wk-shadow)}
[data-design="winkel"] .wk-btn--pill:hover{box-shadow:var(--wk-shadow-lg)}

/* ============================================================
   Hero — groot bold beeldvlak
   ============================================================ */
[data-design="winkel"] .wk-hero{
  position:relative;
  min-height:clamp(460px,68vh,720px);
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  border-radius:0 0 40px 40px;
}
[data-design="winkel"] .wk-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--wk-accent-soft)}
[data-design="winkel"] .wk-hero__img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform-origin:center;
}
@media (prefers-reduced-motion:no-preference){
  [data-design="winkel"] .wk-hero__img{animation:wk-zoom 18s ease-in-out infinite alternate}
}
@keyframes wk-zoom{
  from{transform:scale(1.02)}
  to{transform:scale(1.12)}
}
[data-design="winkel"] .wk-hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(20,10,10,.12) 0%,rgba(20,10,10,.32) 60%,rgba(20,10,10,.58) 100%),
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb, var(--wk-accent) 30%, transparent),transparent 62%);
}
[data-design="winkel"] .wk-hero__inner{
  position:relative;z-index:2;
  max-width:720px;
  padding:clamp(48px,8vw,96px) clamp(20px,5vw,40px);
  color:#fff;
}
[data-design="winkel"] .wk-hero__eyebrow{
  display:inline-block;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;
  color:#fff;background:var(--wk-accent);border-radius:999px;
  padding:.45em 1.1em;margin:0 0 1.1em;box-shadow:var(--wk-shadow);
}
[data-design="winkel"] .wk-hero__title{
  font-size:clamp(2.5rem,6vw,4rem);color:#fff;text-wrap:balance;margin:0 0 .45em;line-height:1.05;
}
[data-design="winkel"] .wk-hero__intro{
  color:rgba(255,255,255,.92);font-size:1.15rem;max-width:46ch;margin:0 auto 1.9em;
}
[data-design="winkel"] .wk-hero__cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
[data-design="winkel"] .wk-hero .btn--ghost{
  background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.7);
  backdrop-filter:blur(2px);
}
[data-design="winkel"] .wk-hero .btn--ghost:hover{
  border-color:#fff;background:rgba(255,255,255,.24);
}

/* ============================================================
   Producttegels-grid
   ============================================================ */
[data-design="winkel"] .wk-product-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
[data-design="winkel"] .wk-product{
  background:var(--card,#fff);
  border-radius:var(--wk-radius);
  overflow:hidden;
  box-shadow:var(--wk-shadow);
  transition:transform .22s ease,box-shadow .22s ease;
  display:flex;flex-direction:column;
}
[data-design="winkel"] .wk-product:hover{
  transform:translateY(-6px);
  box-shadow:var(--wk-shadow-lg);
}
[data-design="winkel"] .wk-product__media{
  position:relative;
  min-height:150px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--wk-accent-soft),color-mix(in srgb, var(--brand-primary) 14%, #fff 86%));
  padding:28px;
}
[data-design="winkel"] .wk-product__icon{
  width:56px;height:56px;color:var(--wk-accent-deep);
  display:grid;place-items:center;
}
[data-design="winkel"] .wk-product__icon svg{width:100%;height:100%}
[data-design="winkel"] .wk-product__price{
  position:absolute;top:14px;right:14px;
  background:var(--wk-accent);color:#fff;
  font-weight:700;font-size:.85rem;letter-spacing:.01em;
  border-radius:999px;padding:.4em 1em;
  box-shadow:0 10px 20px -10px rgba(20,10,10,.5);
}
[data-design="winkel"] .wk-product__body{
  padding:22px 22px 26px;flex:1;display:flex;flex-direction:column;
}
[data-design="winkel"] .wk-product h3{font-size:1.2rem;margin:0 0 8px}
[data-design="winkel"] .wk-product p{color:var(--muted);font-size:.96rem;margin:0 0 18px;flex:1}
[data-design="winkel"] .wk-product__btn{
  align-self:flex-start;font-size:.92rem;padding:.7em 1.4em;
}

/* ============================================================
   Collectie-strip
   ============================================================ */
[data-design="winkel"] .wk-collections{padding-block:clamp(32px,5vw,56px)}
[data-design="winkel"] .wk-collections .eyebrow{text-align:center;display:block;margin-bottom:18px}
[data-design="winkel"] .wk-chips{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
}
[data-design="winkel"] .wk-chip{
  display:inline-flex;align-items:center;
  background:var(--wk-accent-soft);color:var(--wk-accent-deep);
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  border-radius:999px;padding:.6em 1.4em;
  box-shadow:0 12px 24px -16px rgba(20,10,10,.3);
}

/* ============================================================
   Vrolijke afsluit-CTA
   ============================================================ */
[data-design="winkel"] .wk-cta{padding-block:clamp(48px,7vw,88px)}
[data-design="winkel"] .wk-cta__box{
  border-radius:var(--wk-radius);
  background:linear-gradient(135deg,var(--wk-accent),color-mix(in srgb, var(--wk-accent) 60%, var(--brand-primary) 40%));
  padding:clamp(40px,6vw,72px) clamp(24px,6vw,56px);
  text-align:center;
  box-shadow:var(--wk-shadow-lg);
}
[data-design="winkel"] .wk-cta__box h2{
  color:#fff;font-size:clamp(1.8rem,3.6vw,2.6rem);max-width:22ch;margin-inline:auto;
}
[data-design="winkel"] .wk-cta__box p{
  color:rgba(255,255,255,.9);margin:1rem auto 0;max-width:46ch;
}
[data-design="winkel"] .wk-cta__btns{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:2rem;
}
[data-design="winkel"] .wk-cta .btn--primary{background:#fff;color:var(--wk-accent-deep)}
[data-design="winkel"] .wk-cta .btn--primary:hover{background:#fff;filter:brightness(.96)}
[data-design="winkel"] .wk-cta .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
[data-design="winkel"] .wk-cta .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.14)}

/* ============================================================
   Responsive — geen horizontale scroll op mobiel
   ============================================================ */
@media (max-width:960px){
  [data-design="winkel"] .wk-product-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  [data-design="winkel"] .wk-hero{min-height:clamp(420px,76vh,600px);border-radius:0 0 28px 28px}
  [data-design="winkel"] .wk-hero__cta{flex-direction:column;align-items:stretch}
  [data-design="winkel"] .wk-hero__cta .btn{justify-content:center}
}
@media (max-width:560px){
  [data-design="winkel"] .wk-product-grid{grid-template-columns:1fr}
  [data-design="winkel"] .wk-cta__box{border-radius:18px}
}