/* FVWL – snel winkelen (fvwl-snelwinkelen.php). Volgt het designsysteem (fvwl-design.css): wit, antraciet, rechte hoeken;
   goud alleen als dunne lijn. Het blok ligt over het fotovak van de kaart (4:5, bovenaan de kaart). */

/* de oude knop “Quick shop” van de snippet en haar zijpaneel op de kaarten: niet meer tonen */
body.fvwl-qs-on .vwlv-inject, body.fvwl-qs-on .quick-add-wrap{ display:none !important; }

body.fvwl-qs-on li.product, body.fvwl-qs-on li.fvwl-card{ position:relative; }
.fvwl-qs{ position:absolute; left:0; right:0; top:0; aspect-ratio:4/5; pointer-events:none; z-index:3; font-family:var(--fvwl-sans, "Josefin Sans", sans-serif); }

/* ---------- desktop: de maten als knoppen onderaan de foto, bij hover of bij focus ---------- */
.fvwl-qs__hover{ position:absolute; left:10px; right:10px; bottom:10px; display:flex; flex-wrap:wrap; gap:6px; opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
li:hover > .fvwl-qs .fvwl-qs__hover, li:focus-within > .fvwl-qs .fvwl-qs__hover{ opacity:1; transform:none; pointer-events:auto; }
.fvwl-qs__note{ flex:1 0 100%; margin:0; padding:0 2px; font-size:10px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--fvwl-anthracite,#3A3A3A); text-shadow:0 0 6px #fff, 0 0 6px #fff; }
html body .fvwl-qs .fvwl-qs__opt{ flex:1 1 0; min-width:0; min-height:50px; margin:0 !important; padding:7px 4px 5px !important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:rgba(255,255,255,.95) !important; color:var(--fvwl-anthracite,#3A3A3A) !important; border:1px solid var(--fvwl-line,#E5E2DC) !important; border-radius:0 !important; box-shadow:none !important;
  font-family:inherit !important; cursor:pointer; line-height:1.15 !important; text-align:center; transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
.fvwl-qs__opt .fvwl-qs__n{ display:block; font-size:11px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.fvwl-qs__opt .fvwl-qs__p{ display:block; font-size:12px; font-weight:400; letter-spacing:.03em; white-space:nowrap; color:var(--fvwl-muted,#6B6761); }
html body .fvwl-qs .fvwl-qs__opt:hover, html body .fvwl-qs .fvwl-qs__opt:focus-visible{ background:var(--fvwl-anthracite,#3A3A3A) !important; color:#fff !important; border-color:var(--fvwl-anthracite,#3A3A3A) !important; outline:none; }
.fvwl-qs__opt:hover .fvwl-qs__p, .fvwl-qs__opt:focus-visible .fvwl-qs__p{ color:#fff; }
html body .fvwl-qs .fvwl-qs__opt.is-out, html body .fvwl-qs .fvwl-qs__opt.is-out:hover{ background:rgba(242,240,236,.95) !important; color:#A9A49C !important; border-color:var(--fvwl-line,#E5E2DC) !important; cursor:not-allowed; }
.fvwl-qs__opt.is-out .fvwl-qs__n{ text-decoration:line-through; text-decoration-thickness:1px; }
.fvwl-qs__opt.is-out .fvwl-qs__p{ color:#A9A49C; }
.fvwl-qs__opt.is-busy{ opacity:.6; cursor:progress; }
html body .fvwl-qs .fvwl-qs__opt.is-done{ background:var(--fvwl-anthracite,#3A3A3A) !important; color:#fff !important; border-color:var(--fvwl-anthracite,#3A3A3A) !important; }
.fvwl-qs__opt.is-done .fvwl-qs__p, .fvwl-qs__opt.is-fail .fvwl-qs__p{ display:none; }
html body .fvwl-qs .fvwl-qs__opt.is-fail{ border-color:#B4432F !important; color:#B4432F !important; }
.fvwl-qs__opt--one .fvwl-qs__n{ font-size:12px; letter-spacing:.18em; }

/* ---------- aanraakschermen: de knop “Snel winkelen” onderaan de foto ---------- */
html body .fvwl-qs .fvwl-qs__open{ display:none; position:absolute; left:8px; right:8px; bottom:8px; min-height:40px; margin:0 !important; padding:2px 8px 0 !important; align-items:center; justify-content:center;
  background:rgba(255,255,255,.95) !important; color:var(--fvwl-anthracite,#3A3A3A) !important; border:1px solid var(--fvwl-line,#E5E2DC) !important; border-radius:0 !important; box-shadow:none !important;
  font-family:inherit !important; font-size:10.5px !important; font-weight:400 !important; letter-spacing:.16em !important; text-transform:uppercase !important; line-height:1.2 !important; cursor:pointer; pointer-events:auto; }
@media (hover:none), (pointer:coarse){
  .fvwl-qs__hover{ display:none; }
  html body .fvwl-qs .fvwl-qs__open{ display:flex; }
}

/* ---------- het paneel van onderen ---------- */
html.fvwl-qs-open{ overflow:hidden; }
.fvwl-qs-sheet{ position:fixed; inset:0; z-index:100000; font-family:var(--fvwl-sans, "Josefin Sans", sans-serif); color:var(--fvwl-anthracite,#3A3A3A); }
.fvwl-qs-sheet[hidden]{ display:none; }
.fvwl-qs-sheet__bg{ position:absolute; inset:0; background:rgba(20,18,16,.45); opacity:0; transition:opacity .25s ease; }
.fvwl-qs-sheet__panel{ position:absolute; left:0; right:0; bottom:0; max-height:88vh; overflow:auto; background:var(--fvwl-white,#fff); padding:22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.7,.2,1); box-shadow:0 -10px 40px rgba(20,18,16,.18); }
.fvwl-qs-sheet.is-open .fvwl-qs-sheet__bg{ opacity:1; }
.fvwl-qs-sheet.is-open .fvwl-qs-sheet__panel{ transform:none; }
html body .fvwl-qs-sheet .fvwl-qs-sheet__close{ position:absolute; top:6px; right:6px; width:44px; height:44px; margin:0 !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; color:var(--fvwl-anthracite,#3A3A3A) !important; font-size:28px !important; line-height:1 !important; cursor:pointer; }
.fvwl-qs-sheet__top{ display:flex; gap:16px; align-items:center; margin:0 44px 18px 0; }
.fvwl-qs-sheet__img{ flex:0 0 88px; width:88px; aspect-ratio:4/5; background:var(--fvwl-stone,#F2F0EC); overflow:hidden; }
.fvwl-qs-sheet__img img{ display:block; width:100% !important; height:100% !important; max-width:none !important; object-fit:contain; mix-blend-mode:multiply; }
.fvwl-qs-sheet__name{ margin:0 0 6px !important; padding:0 !important; font-family:var(--fvwl-serif, "Cormorant Garamond", serif) !important; font-size:26px !important; font-weight:400 !important; line-height:1.1 !important; color:var(--fvwl-ink,#1F1F1F) !important; }
.fvwl-qs-sheet__price{ margin:0 !important; padding:0 !important; font-size:17px !important; font-weight:400 !important; letter-spacing:.03em; color:var(--fvwl-ink,#1F1F1F) !important; min-height:1.3em; }
.fvwl-qs-sheet__label{ margin:0 0 9px !important; padding:0 !important; font-size:11px !important; font-weight:400 !important; letter-spacing:.2em; text-transform:uppercase; color:var(--fvwl-muted,#6B6761) !important; }
.fvwl-qs-sheet__opts{ display:flex; gap:8px; margin:0 0 14px; }
html body .fvwl-qs-sheet .fvwl-qs-sheet__opt{ flex:1 1 0; min-width:0; min-height:58px; margin:0 !important; padding:8px 4px 6px !important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:#fff !important; color:var(--fvwl-anthracite,#3A3A3A) !important; border:1px solid var(--fvwl-field,#C8C4BC) !important; border-radius:0 !important; box-shadow:none !important; font-family:inherit !important; cursor:pointer; line-height:1.15 !important; }
.fvwl-qs-sheet__on{ font-size:12px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.fvwl-qs-sheet__op{ font-size:13px; letter-spacing:.03em; color:var(--fvwl-muted,#6B6761); white-space:nowrap; }
html body .fvwl-qs-sheet .fvwl-qs-sheet__opt.is-active{ border-color:var(--fvwl-anthracite,#3A3A3A) !important; box-shadow:inset 0 0 0 1px var(--fvwl-anthracite,#3A3A3A) !important; }
.fvwl-qs-sheet__opt.is-active .fvwl-qs-sheet__op{ color:var(--fvwl-ink,#1F1F1F); }
html body .fvwl-qs-sheet .fvwl-qs-sheet__opt.is-out{ background:var(--fvwl-stone,#F2F0EC) !important; color:#A9A49C !important; border-color:var(--fvwl-line,#E5E2DC) !important; cursor:not-allowed; }
.fvwl-qs-sheet__opt.is-out .fvwl-qs-sheet__on{ text-decoration:line-through; text-decoration-thickness:1px; }
.fvwl-qs-sheet__opt.is-out .fvwl-qs-sheet__op{ color:#A9A49C; font-size:11px; }
.fvwl-qs-sheet__note{ margin:-4px 0 12px !important; padding:0 !important; font-size:12px !important; color:var(--fvwl-muted,#6B6761) !important; }
html body .fvwl-qs-sheet .fvwl-qs-sheet__add{ display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin:0 !important; padding:2px 16px 0 !important; background:var(--fvwl-anthracite,#3A3A3A) !important; color:#fff !important; border:1px solid var(--fvwl-anthracite,#3A3A3A) !important; border-radius:0 !important; box-shadow:none !important;
  font-family:inherit !important; font-size:12px !important; font-weight:400 !important; letter-spacing:.2em !important; text-transform:uppercase !important; cursor:pointer; }
html body .fvwl-qs-sheet .fvwl-qs-sheet__add:disabled{ background:#A9A49C !important; border-color:#A9A49C !important; cursor:not-allowed; }
.fvwl-qs-sheet__add.is-busy{ opacity:.7; }
html body .fvwl-qs-sheet .fvwl-qs-sheet__add.is-fail{ background:#B4432F !important; border-color:#B4432F !important; }
.fvwl-qs-sheet__more{ display:block; margin:14px auto 0; width:max-content; max-width:100%; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fvwl-anthracite,#3A3A3A) !important; text-decoration:none !important; border-bottom:1px solid var(--fvwl-gold,#CCA569); padding:0 0 3px; }
@media (min-width:768px){
  /* op een tablet of een aanraakscherm op desktop: het paneel in het midden onderaan, niet over de volle breedte */
  .fvwl-qs-sheet__panel{ left:50%; right:auto; width:460px; max-width:calc(100vw - 32px); transform:translate(-50%,100%); }
  .fvwl-qs-sheet.is-open .fvwl-qs-sheet__panel{ transform:translate(-50%,0); }
}
@media (prefers-reduced-motion:reduce){
  .fvwl-qs__hover, .fvwl-qs-sheet__bg, .fvwl-qs-sheet__panel{ transition:none; }
}