/* Winkelimpressie: aanvulling op ilko.css, uit de canvas (Winkelimpressie.dc.html). */
/* ===== PAGINA: Winkelimpressie ===== */
/* hero */
.pg-wi .wi-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding-top:56px}
.pg-wi .wi-hero-t{grid-column:1 / span 5}
.pg-wi .wi-hero-v{grid-column:6 / span 7}
.pg-wi .wi-h1{margin:0;font-size:80px;line-height:.95;letter-spacing:-.045em;text-wrap:balance}
.pg-wi .wi-lead{margin-top:24px;max-width:46ch}
.pg-wi .wi-status{display:inline-flex;align-items:center;gap:10px;margin-top:28px;height:40px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,17,.12);font-size:15px;font-weight:600}
.pg-wi .wi-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:24px}
.pg-wi .wi-sh-lead{margin:0;max-width:440px}

/* foto-plekken: ontworpen placeholders, klaar voor echte foto's (img vult het vlak met object-fit) */
.pg-wi .wi-ph{position:relative;display:block;width:100%;margin:0;padding:0;border:0;border-radius:var(--r-l);overflow:hidden;cursor:zoom-in;text-align:center;color:var(--ink);background:var(--lila);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1)}
.pg-wi .wi-ph::after{content:'';position:absolute;inset:12px;border-radius:calc(var(--r-l) - 10px);border:1.5px dashed rgba(17,17,17,.2);pointer-events:none;transition:border-color .25s}
.pg-wi .wi-ph:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.pg-wi .wi-ph:hover::after{border-color:rgba(17,17,17,.45)}
.pg-wi .wi-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-wi .wi-ph-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:32px}
.pg-wi .wi-sk{display:block;width:min(44%,260px);height:auto;margin-bottom:14px;color:rgba(17,17,17,.34)}
.pg-wi .wi-ph-l{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;line-height:1.35;text-wrap:balance}
.pg-wi .wi-ph-l svg{flex:none;color:var(--red)}
.pg-wi .wi-ph-s{font-size:13px;line-height:1.4;color:var(--ink-2)}
.pg-wi .t-white{background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,17,.08)}
.pg-wi .t-white:hover{box-shadow:inset 0 0 0 1px rgba(17,17,17,.08),var(--sh-lift)}
.pg-wi .t-ink{background:var(--ink);color:var(--paper)}
.pg-wi .t-ink::after{border-color:rgba(255,255,255,.22)}
.pg-wi .t-ink:hover::after{border-color:rgba(255,255,255,.5)}
.pg-wi .t-ink .wi-sk{color:rgba(255,255,255,.4)}
.pg-wi .t-ink .wi-ph-s{color:var(--paper-2)}
.pg-wi .t-red{background:var(--red)}
.pg-wi .t-red::after{border-color:rgba(17,17,17,.28)}
.pg-wi .t-red .wi-sk{color:rgba(17,17,17,.45)}
.pg-wi .t-red .wi-ph-l svg{color:var(--ink)}
.pg-wi .t-red .wi-ph-s{color:var(--ink)}
.pg-wi .r43{aspect-ratio:4 / 3}
.pg-wi .r32{aspect-ratio:3 / 2}
.pg-wi .r45{aspect-ratio:4 / 5}
.pg-wi .r31{aspect-ratio:3 / 1}
.pg-wi .wi-ph-hero .wi-sk{width:min(40%,300px)}
.pg-wi .wi-ph-hero .wi-ph-l{font-size:17px}

/* loop door de winkel */
.pg-wi .wi-tour-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:40px;align-items:stretch}
.pg-wi .wi-plan{grid-column:span 8;background:var(--lila);border-radius:var(--r-l);padding:24px 24px 18px;display:flex;flex-direction:column}
.pg-wi .wi-plan-c{position:relative;aspect-ratio:960 / 620;width:100%}
.pg-wi .wi-plan-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pg-wi .wi-plan-note{margin:14px 4px 0;font-size:13px;line-height:1.4;color:var(--ink-2)}
.pg-wi .hl,.pg-wi .rt{opacity:0;transition:opacity .45s ease}
.pg-wi .at-ingang .hl-ingang,.pg-wi .at-ingang .rt-ingang,
.pg-wi .at-telefoons .hl-telefoons,.pg-wi .at-telefoons .rt-telefoons,
.pg-wi .at-hoesjes .hl-hoesjes,.pg-wi .at-hoesjes .rt-hoesjes,
.pg-wi .at-accessoires .hl-accessoires,.pg-wi .at-accessoires .rt-accessoires,
.pg-wi .at-werkbank .hl-werkbank,.pg-wi .at-werkbank .rt-werkbank,
.pg-wi .at-balie .hl-balie,.pg-wi .at-balie .rt-balie{opacity:1}
/* "jij": een rood stipje dat naar de gekozen plek loopt (alleen transform) */
.pg-wi .wi-walk{position:absolute;inset:0;pointer-events:none;transition:transform .9s cubic-bezier(.65,0,.35,1);z-index:2}
.pg-wi .wi-me{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px #fff,0 6px 14px -4px rgba(17,17,17,.4)}
.pg-wi .wi-me::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--red);animation:wi-ping 2.6s cubic-bezier(.22,1,.36,1) infinite}
@keyframes wi-ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.4);opacity:0}}
.pg-wi .at-ingang .wi-walk{transform:translate(47.917%,74.516%)}
.pg-wi .at-telefoons .wi-walk{transform:translate(16.667%,40.323%)}
.pg-wi .at-hoesjes .wi-walk{transform:translate(54.167%,42.258%)}
.pg-wi .at-accessoires .wi-walk{transform:translate(20.833%,24.194%)}
.pg-wi .at-werkbank .wi-walk{transform:translate(70.833%,31.613%)}
.pg-wi .at-balie .wi-walk{transform:translate(58.333%,55.484%)}
/* plekken: pil met icoon en naam */
.pg-wi .wi-spot{position:absolute;z-index:3;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border:0;border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:600;line-height:1;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(17,17,17,.1),var(--sh-float);transition:background .2s,color .2s,box-shadow .2s}
.pg-wi .wi-spot svg{flex:none;color:var(--ink)}
.pg-wi .wi-spot:hover{box-shadow:inset 0 0 0 1.5px var(--ink),var(--sh-float)}
.pg-wi .wi-spot.on{background:var(--ink);color:var(--paper);box-shadow:var(--sh-float)}
.pg-wi .wi-spot.on svg{color:var(--red)}
.pg-wi .s-ingang{left:47.917%;top:86.129%}
.pg-wi .s-telefoons{left:18.75%;top:61.29%}
.pg-wi .s-hoesjes{left:38.542%;top:30%}
.pg-wi .s-accessoires{left:38.021%;top:10.806%}
.pg-wi .s-werkbank{left:84%;top:31.5%}
.pg-wi .s-balie{left:82.292%;top:55.484%}
/* uitleg per plek */
.pg-wi .wi-info{grid-column:span 4;background:var(--ink);color:var(--paper);border-radius:var(--r-l);padding:36px 32px 28px;display:flex;flex-direction:column}
.pg-wi .wi-info-ic{width:48px;height:48px;border-radius:var(--r-s);background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--red)}
.pg-wi .wi-info-t{margin:22px 0 0;font-size:40px;line-height:1;letter-spacing:-.04em;color:var(--paper)}
.pg-wi .wi-info-p{margin:14px 0 0;font-size:17px;line-height:1.55;color:var(--paper-2);text-wrap:pretty}
.pg-wi .wi-facts{margin:22px 0 0;padding:0;display:flex;flex-direction:column}
.pg-wi .wi-fact{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.14);font-size:15px;line-height:1.4}
.pg-wi .wi-fact dt{color:var(--paper-2)}
.pg-wi .wi-fact dd{margin:0;font-weight:600;text-align:right}
.pg-wi .wi-info-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:24px}
.pg-wi .wi-info-cta .btn{border:0;font-family:inherit}
.pg-wi .wi-info-nav{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:28px}
.pg-wi .wi-nb,.pg-wi .wi-next{height:44px;border:0;border-radius:999px;background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;transition:box-shadow .2s}
.pg-wi .wi-nb{width:44px;flex:none}
.pg-wi .wi-next{flex:1;padding:0 14px 0 20px;justify-content:space-between}
.pg-wi .wi-nb:hover,.pg-wi .wi-next:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}

/* foto's */
.pg-wi .wi-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.pg-wi .wi-fig{margin:0;display:flex;flex-direction:column;min-width:0}
.pg-wi .wi-fig figcaption{margin-top:14px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.pg-wi .wi-fig figcaption strong{color:var(--ink);font-weight:600;margin-right:4px}
.pg-wi .g-balie{grid-column:span 12}
.pg-wi .g-balie .wi-ph{aspect-ratio:5 / 2}
.pg-wi .g-telefoons,.pg-wi .g-accessoires,.pg-wi .g-hoesjes{grid-column:span 4}
.pg-wi .g-straat{grid-column:span 12}

/* lightbox */
.pg-wi .lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:72px 32px 32px;animation:wi-fade .25s ease both}
.pg-wi .lb-bg{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:rgba(17,17,17,.9);cursor:zoom-out}
.pg-wi .lb-panel{position:relative;width:min(1100px,100%);display:flex;flex-direction:column;align-items:center;animation:wi-rise .4s cubic-bezier(.22,1,.36,1) both}
.pg-wi .lb-frame{position:relative;width:min(100%,calc(64vh * var(--ar)));aspect-ratio:var(--ar);border-radius:var(--r-l);overflow:hidden;background:var(--lila);color:var(--ink)}
.pg-wi .lb-frame.r43{--ar:1.3333}.pg-wi .lb-frame.r32{--ar:1.5}.pg-wi .lb-frame.r45{--ar:.8}.pg-wi .lb-frame.r31{--ar:3}
.pg-wi .lb-frame::after{content:'';position:absolute;inset:14px;border-radius:calc(var(--r-l) - 10px);border:1.5px dashed rgba(17,17,17,.22);pointer-events:none}
.pg-wi .lb-frame.t-white{background:#fff}
.pg-wi .lb-frame.t-ink{background:#1C1C1F;color:var(--paper)}
.pg-wi .lb-frame.t-ink::after{border-color:rgba(255,255,255,.24)}
.pg-wi .lb-frame.t-red{background:var(--red)}
.pg-wi .lb-frame .wi-ph-in{color:inherit}
.pg-wi .lb-frame .wi-ph-l{font-size:17px}
.pg-wi .lb-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-wi .lb-cap{width:min(100%,780px);display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:24px;color:var(--paper)}
.pg-wi .lb-t{margin:0;font-size:32px;line-height:1.05;letter-spacing:-.035em;color:var(--paper)}
.pg-wi .lb-p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--paper-2)}
.pg-wi .lb-map{margin-top:14px;background:none;border:0;padding:0;font-size:15px}
.pg-wi .lb-nav{display:flex;gap:8px;flex:none}
.pg-wi .lb-b{width:48px;height:48px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:var(--paper);display:grid;place-items:center;transition:background .2s}
.pg-wi .lb-b:hover{background:rgba(255,255,255,.22)}
.pg-wi .lb-x{position:absolute;right:0;top:-60px;background:var(--paper);color:var(--ink)}
.pg-wi .lb-x:hover{background:var(--paper);box-shadow:0 0 0 4px rgba(255,255,255,.22)}
@keyframes wi-fade{from{opacity:0}to{opacity:1}}
@keyframes wi-rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

@media (max-width:1180px){
.pg-wi .wi-hero{row-gap:40px}
.pg-wi .wi-hero-t,.pg-wi .wi-hero-v{grid-column:1 / -1}
.pg-wi .wi-h1{font-size:72px}
.pg-wi .wi-plan,.pg-wi .wi-info{grid-column:1 / -1}
.pg-wi .wi-info-p{max-width:62ch}
.pg-wi .wi-info-nav{max-width:520px}
}
@media (max-width:1023px){
.pg-wi .wi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pg-wi .g-balie,.pg-wi .g-straat{grid-column:1 / -1}
.pg-wi .g-telefoons,.pg-wi .g-accessoires{grid-column:span 1}
.pg-wi .g-hoesjes{grid-column:1 / -1}
.pg-wi .g-hoesjes .wi-ph{aspect-ratio:2 / 1}
.pg-wi .g-balie .wi-ph{aspect-ratio:4 / 3}
.pg-wi .g-straat .wi-ph{aspect-ratio:2 / 1}
.pg-wi .wi-spot{height:36px;font-size:14px;padding:0 13px 0 10px;gap:6px}
.pg-wi .wi-spot svg{width:16px;height:16px}
}
@media (max-width:760px){
.pg-wi .wi-hero{padding-top:32px;row-gap:28px}
.pg-wi .wi-h1{font-size:44px;line-height:1}
.pg-wi .wi-lead{margin-top:16px}
.pg-wi .wi-status{margin-top:20px;font-size:14px}
.pg-wi .wi-cta{margin-top:20px}
.pg-wi .wi-cta .btn{width:100%;justify-content:space-between}
.pg-wi .wi-sh-lead{margin-top:4px}
.pg-wi .wi-tour-in{margin-top:28px;gap:12px}
.pg-wi .wi-plan{padding:12px 12px 10px;margin:0 -8px}
.pg-wi .wi-plan-note{margin-top:10px}
.pg-wi .wi-spot{width:36px;height:36px;padding:0;justify-content:center}
.pg-wi .wi-spot-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-wi .s-telefoons{left:8.5%;top:32%}
.pg-wi .s-werkbank{left:82%;top:30%}
.pg-wi .wi-me{left:-8px;top:-8px;width:16px;height:16px;box-shadow:0 0 0 3px #fff,0 4px 10px -3px rgba(17,17,17,.4)}
.pg-wi .wi-info{padding:28px 20px 20px;margin:0 -8px}
.pg-wi .wi-info-t{font-size:32px;margin-top:18px}
.pg-wi .wi-info-p{font-size:16px}
.pg-wi .wi-facts{margin-top:18px}
.pg-wi .wi-info-cta .btn{width:100%;justify-content:space-between}
.pg-wi .wi-grid{gap:12px}
.pg-wi .wi-ph-in{padding:20px 14px}
.pg-wi .wi-sk{width:68%;margin-bottom:10px}
.pg-wi .wi-ph-l{font-size:14px;gap:6px}
.pg-wi .wi-ph-l svg{display:none}
.pg-wi .wi-fig figcaption{font-size:14px;margin-top:10px}
.pg-wi .wi-fig figcaption strong{display:block}
.pg-wi .g-balie .wi-sk,.pg-wi .g-straat .wi-sk,.pg-wi .wi-ph-hero .wi-sk{width:44%}
.pg-wi .lb{padding:72px 12px 16px}
.pg-wi .lb-frame{width:min(100%,calc(58vh * var(--ar)))}
.pg-wi .lb-cap{flex-direction:column;gap:16px;margin-top:18px}
.pg-wi .lb-t{font-size:26px}
.pg-wi .lb-x{top:-58px}
}
.ik.calm .pg-wi .wi-walk{transition:none}
@media (prefers-reduced-motion:reduce){.pg-wi .wi-walk{transition:none}.pg-wi .wi-me::after{animation:none;opacity:0}}