/* 213.7 - premium category tile for the custom oak plank. */
.vh-category-tiles .vh-oak-custom-tile,
.vh-product-grid .vh-oak-custom-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  min-width:0;
  overflow:hidden;
  border:1px solid #84c9ed;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,75,135,.14),0 2px 7px rgba(0,43,78,.08);
  color:#082a4a;
  text-decoration:none;
  transform:translateY(0);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.vh-category-tiles .vh-oak-custom-tile:hover,
.vh-product-grid .vh-oak-custom-tile:hover{
  border-color:#1696cf;
  box-shadow:0 16px 36px rgba(0,75,135,.19),0 3px 9px rgba(0,43,78,.09);
  transform:translateY(-3px);
}
.vh-category-tiles .vh-oak-custom-tile:focus-visible,
.vh-product-grid .vh-oak-custom-tile:focus-visible{
  outline:3px solid rgba(0,138,203,.34);
  outline-offset:3px;
}
.vh-oak-custom-tile__visual{
  position:relative;
  display:block;
  aspect-ratio:8/5;
  overflow:hidden;
  background:#e9eef1;
}
.vh-oak-custom-tile__visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 50%;
  transition:transform .35s ease;
}
.vh-oak-custom-tile:hover .vh-oak-custom-tile__visual img{transform:scale(1.025)}
.vh-oak-custom-tile__visual:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:36%;
  background:linear-gradient(180deg,rgba(0,44,79,0),rgba(0,44,79,.18));
  pointer-events:none;
}
.vh-oak-custom-tile__badge{
  position:absolute;
  z-index:2;
  top:13px;
  left:13px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:6px 13px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:#0696cf;
  box-shadow:0 4px 12px rgba(0,63,110,.2);
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
}
.vh-oak-custom-tile__badge>span{font-size:14px;line-height:1}
.vh-oak-custom-tile__titlebar{
  display:block;
  padding:15px 17px 14px;
  background:linear-gradient(135deg,#008acb 0%,#078fc8 58%,#007ab6 100%);
  color:#fff;
  font-size:20px;
  font-weight:950;
  line-height:1.08;
  letter-spacing:-.25px;
}
.vh-oak-custom-tile__body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:15px;
  padding:16px 17px 17px;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.vh-oak-custom-tile__intro{
  display:block;
  color:#36566f;
  font-size:12.5px;
  line-height:1.55;
}
.vh-oak-custom-tile__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:44px;
  margin-top:auto;
  padding:9px 13px;
  border-radius:9px;
  background:linear-gradient(180deg,#0c98d2 0%,#007fbc 100%);
  box-shadow:0 6px 15px rgba(0,126,185,.17);
  color:#fff;
  font-size:13px;
  font-weight:950;
  line-height:1.2;
  text-align:center;
}
.vh-oak-custom-tile__cta>span{
  font-size:18px;
  line-height:1;
  transition:transform .18s ease;
}
.vh-oak-custom-tile:hover .vh-oak-custom-tile__cta>span{transform:translateX(3px)}

@media (max-width:900px){
  .vh-oak-custom-tile__titlebar{padding:12px 13px;font-size:17px}
  .vh-oak-custom-tile__body{gap:10px;padding:12px 13px 13px}
  .vh-oak-custom-tile__intro{font-size:11.5px}
  .vh-oak-custom-tile__cta{min-height:40px;font-size:12px}
}
@media (max-width:560px){
  .vh-category-tiles .vh-oak-custom-tile,
  .vh-product-grid .vh-oak-custom-tile{border-radius:11px;box-shadow:0 7px 18px rgba(0,75,135,.13)}
  .vh-oak-custom-tile__visual{aspect-ratio:4/3}
  .vh-oak-custom-tile__badge{top:8px;left:8px;min-height:27px;padding:5px 9px;font-size:10px}
  .vh-oak-custom-tile__titlebar{font-size:15px;line-height:1.12}
  .vh-oak-custom-tile__intro{font-size:10.5px;line-height:1.45}
  .vh-oak-custom-tile__cta{min-height:38px;padding:8px 9px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .vh-category-tiles .vh-oak-custom-tile,
  .vh-product-grid .vh-oak-custom-tile,
  .vh-oak-custom-tile__visual img,
  .vh-oak-custom-tile__cta>span{transition:none}
  .vh-category-tiles .vh-oak-custom-tile:hover,
  .vh-product-grid .vh-oak-custom-tile:hover{transform:none}
  .vh-oak-custom-tile:hover .vh-oak-custom-tile__visual img{transform:none}
}

/* 218.7 - plank-op-maat landing en categorie-tegel. Alleen echte catalogusfoto's worden gebruikt. */
.vh-custom-plank-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vh-custom-plank-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #d9e6ef;border-radius:16px;background:#fff;color:#08395f;text-decoration:none;box-shadow:0 7px 20px rgba(6,58,96,.08)}
.vh-custom-plank-card__image{display:block;aspect-ratio:4/3;overflow:hidden;background:#eef4f7}
.vh-custom-plank-card__image img{width:100%;height:100%;object-fit:cover;display:block}
.vh-custom-plank-card__body{display:grid;gap:7px;padding:14px}
.vh-custom-plank-card__body small{font-size:10px;letter-spacing:.12em;font-weight:800;color:#0b83c8}
.vh-custom-plank-card__body strong{font-size:22px;line-height:1.1;color:#062f55}
.vh-custom-plank-card__body span,.vh-custom-plank-card__body em{font-size:13px;color:#617788;font-style:normal}
.vh-custom-plank-card__body b{margin-top:3px;color:#0673bd;font-size:13px}
.vh-custom-plank-pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px;padding:16px;border:1px solid #d9e6ef;border-radius:16px;background:#f7fbfe}
.vh-custom-plank-pricing>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:11px;background:#fff;border:1px solid #e3edf3}
.vh-custom-plank-pricing small{color:#5d7485}.vh-custom-plank-pricing strong{color:#06385f}.vh-custom-plank-pricing p{grid-column:1/-1;margin:0;color:#627888;font-size:12px}
/* 218.7.3 - plank-op-maat tegel staat als eerste kaart tussen de echte artikelen.
   Zelfde visuele component als Eiken voor Iroko, Wengé en Essen. */
.vh-product-grid .vh-custom-plank-product-tile{height:100%;min-height:0}
.vh-product-grid .vh-custom-plank-product-tile .vh-oak-custom-tile__visual{flex:0 0 auto}

@media(max-width:900px){.vh-custom-plank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.vh-custom-plank-grid{gap:10px}.vh-custom-plank-card{border-radius:13px}.vh-custom-plank-card__body{padding:11px}.vh-custom-plank-card__body strong{font-size:18px}.vh-custom-plank-pricing{grid-template-columns:1fr;padding:12px}.vh-custom-plank-pricing p{grid-column:auto}}


/* 218.7.4 - moderne maatwerktegels: zelfde component voor Eiken, Iroko, Wenge, Essen en Padouk. */
.vh-product-grid .vh-custom-plank-product-tile,
.vh-category-tiles .vh-oak-custom-tile{
  border-color:#c9dce9;
  box-shadow:0 8px 22px rgba(3,52,89,.09);
}
.vh-product-grid .vh-custom-plank-product-tile .vh-oak-custom-tile__titlebar,
.vh-category-tiles .vh-oak-custom-tile .vh-oak-custom-tile__titlebar{
  background:linear-gradient(135deg,#064d82 0%,#0879b8 100%);
  padding-top:14px;padding-bottom:14px;
}
.vh-product-grid .vh-custom-plank-product-tile .vh-oak-custom-tile__body,
.vh-category-tiles .vh-oak-custom-tile .vh-oak-custom-tile__body{
  gap:13px;
  background:#fff;
}
.vh-product-grid .vh-custom-plank-product-tile .vh-oak-custom-tile__intro,
.vh-category-tiles .vh-oak-custom-tile .vh-oak-custom-tile__intro{
  color:#36566f;font-size:13px;line-height:1.55;
}
.vh-product-grid .vh-custom-plank-product-tile .vh-oak-custom-tile__cta,
.vh-category-tiles .vh-oak-custom-tile .vh-oak-custom-tile__cta{
  justify-content:space-between;
  background:#0788c9;
  box-shadow:none;
}
.vh-product-grid .vh-custom-plank-product-tile:hover,
.vh-category-tiles .vh-oak-custom-tile:hover{box-shadow:0 14px 32px rgba(3,52,89,.14)}
@media(max-width:560px){
  .vh-product-grid .vh-custom-plank-product-tile .vh-oak-custom-tile__intro,
  .vh-category-tiles .vh-oak-custom-tile .vh-oak-custom-tile__intro{font-size:11px;line-height:1.5}
}

/* 215.13.17.8 - vuren meubelpaneel zaagservice-tegel.
   Geen hardcoded artikeldata: foto en bestemmingen komen uit de actuele catalogus. */
.vh-vuren-saw-tile__choices{display:grid;grid-template-columns:1fr;gap:8px;margin-top:auto}
.vh-vuren-saw-tile__choices .vh-oak-custom-tile__cta{margin-top:0;text-decoration:none;justify-content:space-between}
.vh-vuren-saw-tile .vh-oak-custom-tile__visual:has(> .vh-oak-custom-tile__badge:first-child){background:linear-gradient(135deg,#eef5f8,#dbe8ef)}
@media(max-width:560px){.vh-vuren-saw-tile__choices{gap:6px}.vh-vuren-saw-tile__choices .vh-oak-custom-tile__cta{min-height:36px}}

/* 215.13.17.10 - vuren zaagtooltegel compact en gelijk aan productgroeptegels. */
.vh-category-tiles--results>.vh-vuren-saw-tile{
  min-height:420px!important;
  height:100%!important;
}
.vh-category-tiles--results>.vh-vuren-saw-tile>.vh-vuren-saw-tile__image{
  position:relative!important;
}
.vh-vuren-saw-tile__badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  background:#0795cf;
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
  box-shadow:0 4px 12px rgba(0,71,119,.16);
}
.vh-category-tiles--results>.vh-vuren-saw-tile .vh-feature-tile__intro{
  -webkit-line-clamp:3!important;
  min-height:54px!important;
  margin-bottom:8px!important;
}
.vh-vuren-saw-tile__choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin:0 0 8px;
}
.vh-vuren-saw-tile__choices>a,
.vh-vuren-saw-tile__single{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  min-height:34px;
  padding:7px 6px;
  border-radius:9px;
  background:#0788c9;
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-size:10.5px;
  font-weight:900;
  line-height:1.15;
}
.vh-vuren-saw-tile__single{margin:0 0 8px;justify-content:space-between;padding-left:10px;padding-right:10px}
.vh-vuren-saw-tile__visit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:auto;
  padding-top:9px;
  border-top:1px solid #e7eef3;
  color:#0783bd;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
  line-height:1.2;
}
@media(max-width:900px){
  .vh-category-tiles--results>.vh-vuren-saw-tile{min-height:0!important}
}
@media(max-width:560px){
  .vh-vuren-saw-tile__choices{gap:5px}
  .vh-vuren-saw-tile__choices>a{min-height:32px;font-size:10px}
}