.elementor-7360 .elementor-element.elementor-element-84d2983{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-7360 .elementor-element.elementor-element-0ba4914{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-7360 .elementor-element.elementor-element-0ba4914.e-con{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-7360 .elementor-element.elementor-element-0ba4914{--width:82.941%;}}/* Start custom CSS for html, class: .elementor-element-ee56fff *//* Full-bleed binnen Elementor container */
.ot-fullbleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
}

/* Sectie exact 550px hoog met achtergrond */
.ot-band{
  position:relative;
  height:349px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  overflow:hidden;
  color:#fff;
}

/* 10px omhoog (zoals je vroeg) */
.ot-shift-up{ margin-top:-10px; }

/* subtiele bodemvignette voor leesbaarheid van namen */
.ot-band::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:40%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* Slider-overlay gecentreerd in de sectie */
.ot-slider{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:0 16px;
}

/* Horizontale scroll-track (touch & trackpad) */
.ot-track{
  display:flex; align-items:flex-end; gap:28px;
  width:min(92vw, 1280px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:8px 8px 18px; /* ruimte voor namen */
}
.ot-track:focus{ outline:none; }

/* Verberg native scrollbar (premium look) */
.ot-track{ scrollbar-width: none; }
.ot-track::-webkit-scrollbar{ display:none; }

/* Edge-gradients links/rechts als scroll-hint */
.ot-edge{
  position:absolute; top:0; bottom:0; width:80px;
  pointer-events:none; z-index:2;
}
.ot-edge--left{ left:0; background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.ot-edge--right{ right:0; background:linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }

/* Hint-pill onderin, verdwijnt na interactie */
.ot-hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  color:#fff; font-size:12px; letter-spacing:.02em; z-index:3;
  animation: otHintFloat 2s ease-in-out infinite alternate;
}
.ot-hint svg{ opacity:.9; }
@keyframes otHintFloat{
  from { transform:translate(-50%, 0); }
  to   { transform:translate(-50%, -2px); }
}
.ot-hint.hide{
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}

/* Progress bar */
.ot-progress{
  position:absolute; right:16px; bottom:12px; z-index:3;
  width:120px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.25); overflow:hidden;
}
.ot-progress__fill{
  width:0%; height:100%;
  background:#00c2a8; transition: width .15s ease;
}

/* Items */
.ot-item{
  flex:0 0 auto;
  width:min(55vw, 240px);
  text-align:center;
  scroll-snap-align:center;
}
.ot-item img{
  display:block;
  width:auto;
  height:200px; /* past in 550px band */
  object-fit:contain;
  margin-inline:auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.35));
  user-select:none;
}
.ot-name{
  margin-top:10px;
  font-weight:900;
  font-size:16px;
  letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* (optioneel) klikbare items */
.ot-item a{ color:inherit; text-decoration:none; display:block; }
/* === Lichter maken === */
/* Edge-gradients: smaller & lichter */
.ot-edge{ width:56px; } /* was 80px */
.ot-edge--left{
  background:linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 60%);
}
.ot-edge--right{
  background:linear-gradient(270deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 60%);
}

/* Bodem-vignette: lager en lichter */
.ot-band::after{
  height:28%; /* was 40% */
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%); /* was .45 */
}
.ot-title {
  position:absolute;
  top:1px; /* afstand vanaf bovenkant sectie */
  left:50%;
  transform:translateX(-50%);
  font-size:21px !important;
  font-weight:400;
  color:#f5f5f5 !important;
  text-shadow:0 2px 6px rgba(0,0,0,0.45);
  z-index:3; /* boven de slider */
  margin:0;
  pointer-events:none; /* zodat het geen scroll-blokker is */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-95d0682 */:root{
  --card-bg:#fff;
  --card-radius:14px;
  --card-shadow: 0 6px 18px rgba(0,0,0,.08);
  --card-shadow-hover: 0 10px 28px rgba(0,0,0,.12);
  --text:#0b0b0b;
  --muted:#666;
  --brand:#0a84ff;
  --sale:#d81e5b;
  --border:#eee;
}

/* GRID */
.product-grid{
  display:grid;
  gap:1.2rem;
  /* Tablet/desktop: meerdere naast elkaar */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items:stretch;
}

/* Mobiel: 1 per rij */
@media (max-width: 640px){
  .product-grid{ grid-template-columns: 1fr; }
}

/* CARD */
.product-card{
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}

.product-card:hover{
  transform: translateY(-2px);
  box-shadow:var(--card-shadow-hover);
}

/* Vierkant beeldvlak (bovenste deel) */
.product-card__media{
  display:block;
  aspect-ratio:1/1;            /* maakt de card vierkant */
  background:#f6f6f6;
  overflow:hidden;
}

.product-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Body */
.product-card__body{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:1rem .9rem 1rem;
}

.product-card__title{
  font-size: clamp(1rem, 0.9rem + .3vw, 1.1rem);
  line-height:1.2;
  margin:0;
}

.product-card__title a{
  color:var(--text);
  text-decoration:none;
}

.product-card__title a:hover{
  text-decoration:underline;
  text-underline-offset:2px;
}

.product-card__desc{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.35;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;   /* trim na 2 regels */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Kleuren */
.product-card__colors{
  display:flex;
  gap:.4rem;
  margin:.1rem 0 0;
  padding:0;
  list-style:none;
}

.color-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--dot, #ccc);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
}
.color-dot:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Prijs + Actieprijs */
.product-card__price{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:.2rem;
}

.price{
  font-weight:600;
  font-variant-numeric: tabular-nums;
}

.price--old{
  color:var(--muted);
  text-decoration: line-through;
}

.price--new{
  color:var(--sale);
  background: color-mix(in oklab, var(--sale) 10%, white);
  padding:.15rem .4rem;
  border-radius:.4rem;
}

/* Accessibility helper (visually hidden) */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Optioneel: nette focus states voor links */
a:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:6px;
}
.price--new{font-size:1.2em;font-weight:600;line-height:1}
.price--new .decimals{font-size:.6em;vertical-align:super} /* or 'baseline' */
/* Features — bestond al bij jou */
.product-card__features{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem;
  margin:.1rem 0 .2rem; padding:0; list-style:none;
}
.feat{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .55rem; border:1px solid var(--border); border-radius:.6rem;
  font-size:.82rem; line-height:1; color:var(--muted); background:#fafafa;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
/* Zorgt dat zowel <svg> als <img> exact even groot zijn */
.feat svg.feat__icon,
.feat img.feat__icon{ width:16px; height:16px; display:block; }

.feat:hover{
  background:#f3f7ff; border-color:color-mix(in oklab, var(--brand) 25%, #ddd); color:#333;
}
.feat--highlight{
  color:#0a0a0a;
  border-color: color-mix(in oklab, var(--brand) 30%, #ddd);
  background: color-mix(in oklab, var(--brand) 8%, #fff);
}
@media (max-width:480px){
  .feat{ font-size:.78rem; padding:.24rem .5rem; }
  .feat svg.feat__icon, .feat img.feat__icon{ width:15px; height:15px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2a4c7aa */:root{
  --card-bg:#fff;
  --card-radius:14px;
  --card-shadow: 0 6px 18px rgba(0,0,0,.08);
  --card-shadow-hover: 0 10px 28px rgba(0,0,0,.12);
  --text:#0b0b0b;
  --muted:#666;
  --brand:#0a84ff;
  --sale:#d81e5b;
  --border:#eee;
}

/* GRID */
.product-grid{
  display:grid;
  gap:1.2rem;
  /* Tablet/desktop: meerdere naast elkaar */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items:stretch;
}

/* Mobiel: 1 per rij */
@media (max-width: 640px){
  .product-grid{ grid-template-columns: 1fr; }
}

/* CARD */
.product-card{
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}

.product-card:hover{
  transform: translateY(-2px);
  box-shadow:var(--card-shadow-hover);
}

/* Vierkant beeldvlak (bovenste deel) */
.product-card__media{
  display:block;
  aspect-ratio:1/1;            /* maakt de card vierkant */
  background:#f6f6f6;
  overflow:hidden;
}

.product-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Body */
.product-card__body{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:1rem .9rem 1rem;
}

.product-card__title{
  font-size: clamp(1rem, 0.9rem + .3vw, 1.1rem);
  line-height:1.2;
  margin:0;
}

.product-card__title a{
  color:var(--text);
  text-decoration:none;
}

.product-card__title a:hover{
  text-decoration:underline;
  text-underline-offset:2px;
}

.product-card__desc{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.35;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;   /* trim na 2 regels */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Kleuren */
.product-card__colors{
  display:flex;
  gap:.4rem;
  margin:.1rem 0 0;
  padding:0;
  list-style:none;
}

.color-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--dot, #ccc);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
}
.color-dot:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Prijs + Actieprijs */
.product-card__price{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:.2rem;
}

.price{
  font-weight:600;
  font-variant-numeric: tabular-nums;
}

.price--old{
  color:var(--muted);
  text-decoration: line-through;
}

.price--new{
  color:var(--sale);
  background: color-mix(in oklab, var(--sale) 10%, white);
  padding:.15rem .4rem;
  border-radius:.4rem;
}

/* Accessibility helper (visually hidden) */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Optioneel: nette focus states voor links */
a:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:6px;
}
.price--new{font-size:1.2em;font-weight:600;line-height:1}
.price--new .decimals{font-size:.6em;vertical-align:super} /* or 'baseline' */
/* Features — bestond al bij jou */
.product-card__features{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem;
  margin:.1rem 0 .2rem; padding:0; list-style:none;
}
.feat{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .55rem; border:1px solid var(--border); border-radius:.6rem;
  font-size:.82rem; line-height:1; color:var(--muted); background:#fafafa;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
/* Zorgt dat zowel <svg> als <img> exact even groot zijn */
.feat svg.feat__icon,
.feat img.feat__icon{ width:16px; height:16px; display:block; }

.feat:hover{
  background:#f3f7ff; border-color:color-mix(in oklab, var(--brand) 25%, #ddd); color:#333;
}
.feat--highlight{
  color:#0a0a0a;
  border-color: color-mix(in oklab, var(--brand) 30%, #ddd);
  background: color-mix(in oklab, var(--brand) 8%, #fff);
}
@media (max-width:480px){
  .feat{ font-size:.78rem; padding:.24rem .5rem; }
  .feat svg.feat__icon, .feat img.feat__icon{ width:15px; height:15px; }
}/* End custom CSS */