/* =====================================================================
   Van Hameren 96.8.1 - eenduidige tegels in categorie- en productniveau
   Doel: dezelfde visuele taal op menugroep, subgroep en productoverzicht.
   Nieuwe tegels die via de bestaande card-classes worden aangemaakt nemen
   deze stijl automatisch over.
   ===================================================================== */

:root{
  --vh-tile-radius:16px;
  --vh-tile-border:#bfd5e1;
  --vh-tile-shadow:0 7px 18px rgba(18,55,78,.11),0 2px 5px rgba(18,55,78,.07);
  --vh-tile-shadow-hover:0 13px 28px rgba(18,55,78,.16),0 3px 7px rgba(18,55,78,.08);
  --vh-tile-blue-top:#1aa0dc;
  --vh-tile-blue:#088cc7;
  --vh-tile-blue-bottom:#0878ae;
  --vh-tile-edge:#73858f;
}

/* Eén kaartshell voor menugroepen, productsoorten en producten. */
.catalog-shell .product-section-card,
.catalog-shell .product-card,
.catalog-shell .hardhout-type-card,
.catalog-shell .furniture-choice-card,
.catalog-shell .category-card{
  border:1px solid var(--vh-tile-border)!important;
  border-radius:var(--vh-tile-radius)!important;
  background:#fff!important;
  box-shadow:var(--vh-tile-shadow)!important;
  overflow:hidden!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}

.catalog-shell .product-section-card:hover,
.catalog-shell .product-card:hover,
.catalog-shell .hardhout-type-card:hover,
.catalog-shell .furniture-choice-card:hover,
.catalog-shell .category-card:hover{
  transform:translateY(-3px)!important;
  border-color:#8dbed3!important;
  box-shadow:var(--vh-tile-shadow-hover)!important;
}

/* Foto's: overal dezelfde rustige, volle beeldbehandeling. */
.catalog-shell .product-section-card__image,
.catalog-shell .product-card__image,
.catalog-shell .hardhout-type-card__image{
  background:#eaf1f4!important;
}
.catalog-shell .product-section-card__image img,
.catalog-shell .product-card__image img,
.catalog-shell .hardhout-type-card__image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  image-rendering:auto!important;
  filter:none!important;
  backface-visibility:visible!important;
}

/* De blauwe onderbalk van de menugroep wordt het stijlicoon voor alle CTA's. */
.catalog-shell .product-section-card__overlay{
  padding:12px 14px 13px!important;
  border-top:1px solid rgba(255,255,255,.72)!important;
  border-bottom:2px solid var(--vh-tile-edge)!important;
  background:linear-gradient(180deg,var(--vh-tile-blue-top) 0%,var(--vh-tile-blue) 52%,var(--vh-tile-blue-bottom) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 7px rgba(17,69,96,.15)!important;
}
.catalog-shell .product-section-card__overlay-title{
  min-height:24px;
  text-shadow:0 1px 0 rgba(0,0,0,.10);
}

/* Producttegels houden hun nuttige productinformatie, maar krijgen exact
   dezelfde rand, zweefwerking en blauwe 3D-actie als de menugroeptegels. */
.catalog-shell .product-card--calm{
  display:flex!important;
  flex-direction:column!important;
}
.catalog-shell .product-card--calm .product-card__image{
  border-bottom:1px solid #d8e4ea!important;
}
.catalog-shell .product-card--calm .product-card__body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  padding:13px 13px 12px!important;
}
.catalog-shell .product-card--calm .product-card__category{
  color:#057cae!important;
  letter-spacing:.045em!important;
}
.catalog-shell .product-card--calm .product-card__availability-summary{
  color:#607885!important;
}
.catalog-shell .product-card--calm .product-card__price-panel{
  border:1px solid #d5e2e8!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#f9fbfc 0%,#edf4f7 100%)!important;
  box-shadow:inset 0 1px 0 #fff!important;
}
.catalog-shell .product-card--calm .product-card__stock-summary{
  margin:8px 1px 10px!important;
}
.catalog-shell .product-card--calm .product-card__bottom{
  margin-top:auto!important;
}
.catalog-shell .product-card__choose--calm,
.catalog-shell .product-card__choose--3d{
  min-height:43px!important;
  border:1px solid #0877aa!important;
  border-bottom:3px solid var(--vh-tile-edge)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,var(--vh-tile-blue-top) 0%,var(--vh-tile-blue) 52%,var(--vh-tile-blue-bottom) 100%)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 3px 6px rgba(20,72,101,.16)!important;
  text-shadow:0 1px 0 rgba(0,0,0,.10)!important;
}
.catalog-shell .product-card__choose--calm:hover,
.catalog-shell .product-card__choose--calm:focus-visible,
.catalog-shell .product-card__choose--3d:hover,
.catalog-shell .product-card__choose--3d:focus-visible{
  transform:translateY(-1px)!important;
  filter:brightness(1.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 5px 10px rgba(20,72,101,.20)!important;
}
.catalog-shell .product-card__choose--calm:active,
.catalog-shell .product-card__choose--3d:active{
  transform:translateY(2px)!important;
  border-bottom-width:1px!important;
  box-shadow:inset 0 2px 4px rgba(0,44,70,.16),0 1px 3px rgba(20,72,101,.12)!important;
}

/* Ook oudere/speciale productsoorttegels volgen dezelfde look. */
.catalog-shell .hardhout-type-card__body em,
.catalog-shell .furniture-choice-card em{
  color:#087eaf!important;
  font-weight:900!important;
}

/* Desktop: nette gelijke rijen en voldoende lucht. */
@media(min-width:901px){
  .catalog-shell .catalog-product-grid{
    align-items:stretch;
  }
  .catalog-shell .catalog-product-grid>.product-card{
    height:100%;
  }
}

/* Mobiel: zwevend effect subtieler, zodat kaarten niet te zwaar ogen. */
@media(max-width:620px){
  .catalog-shell .product-section-card,
  .catalog-shell .product-card,
  .catalog-shell .hardhout-type-card,
  .catalog-shell .furniture-choice-card,
  .catalog-shell .category-card{
    border-radius:14px!important;
    box-shadow:0 5px 14px rgba(18,55,78,.10),0 1px 3px rgba(18,55,78,.06)!important;
  }
  .catalog-shell .product-section-card:hover,
  .catalog-shell .product-card:hover,
  .catalog-shell .hardhout-type-card:hover,
  .catalog-shell .furniture-choice-card:hover,
  .catalog-shell .category-card:hover{
    transform:none!important;
  }
}