/* =====================================================================
   QREST — Product cards (central stylesheet)  v2
   ---------------------------------------------------------------------
   Base hook (on every layout section): .product-main-block
   Add ONE modifier class to the same container:
     qr-cards--view     → main products (Bekijken)
     qr-cards--offerte  → voorraadmodellen (ACF offerte + Gereserveerd)
     qr-cards--cart     → webshop (add to cart)
   After migrating a layout: DELETE its Custom CSS and the inline
   <style> inside the "Gereserveerd" text element.
   ===================================================================== */

/* =====================  1. FILTER SIDEBAR  =========================== */

@media screen and (min-width:1024px) {
  .filter-title { display: none; }
  .filter-content { display: block !important; }
}

@media screen and (max-width:1024px) {
  .filter-block.open .filter-icon { transform: rotate(180deg); }
  .filter-content { display: none; }

  a.filter-title {
    color: #000;
    width: 100%;
    display: flex;
    font-size: 20px;
    margin-bottom: 12px;
    text-decoration: none !important;
    justify-content: space-between;
  }

  .products-container ul li { padding: 10px 0 !important; }
}

.product-main-block .iconFilter ul.woocommerce-widget-layered-nav-list {
  display: flex;
  flex-direction: row;
  gap: 0px;
}

ul.woocommerce-widget-layered-nav-list {
  display: flex;
  flex-wrap: wrap;
}

.product-main-block .iconFilter .woocommerce-widget-layered-nav-list li a:before {
  content: " " !important;
  font-family: 'Font Awesome 5 Free';
  background: url('/wp-content/uploads/2024/12/person-qrest.svg') no-repeat;
  display: block;
  width: 16px;
  height: 16px;
  background-size: cover;
  top: 7px;
  left: 21px;
}

.product-main-block .iconFilter li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term.woocommerce-widget-layered-nav-list__item--chosen.chosen a:before {
  filter: invert(1);
}

.product-main-block li.woocommerce-widget-layered-nav-list__item a:hover { color: white !important; }
.iconFilter .woocommerce-widget-layered-nav-list li a:hover::before { filter: invert(1); }
.iconFilter li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a { margin-left: 12px; }
.product-main-block li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a { padding: 3px 16px; }

.filter-by-two-line { width: 308px; }
.filter-by-two-line ul.woocommerce-widget-layered-nav-list { display: flex; flex-wrap: wrap; }
.filter-by-two-line li.woocommerce-widget-layered-nav-list__item {
  padding: 3px 16px !important;
  font-size: 14px;
  margin-bottom: 9px !important;
  margin-right: 8px !important;
}

.product-main-block li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term {
  border: 1px solid;
  border-radius: 30px;
  padding: 0 !important;
}
li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a { text-decoration: none !important; }

.product-main-block .awb-woo-filters.awb-attribute-type-select .widget_layered_nav li.chosen a { color: white; }
.product-main-block .awb-woo-filters.awb-attribute-type-select .widget_layered_nav li:hover,
.product-main-block .awb-woo-filters.awb-attribute-type-select .widget_layered_nav li.chosen {
  background-color: rgb(242 139 12);
  color: #f28b0c;
}

/* count in filter pills — readable in every state */
.product-main-block .awb-woo-attr-count {
  color: rgba(0, 0, 0, 0.5) !important;
  margin-left: 2px;
}
.product-main-block li:hover .awb-woo-attr-count,
.product-main-block li.chosen .awb-woo-attr-count { color: #fff !important; }

/* =====================  2. GRID RESPONSIVE  ========================== */

@media screen and (min-width:585px) and (max-width:1024px) {
  .fusion-layout-column.fusion_builder_column.fusion-builder-column-2.fusion_builder_column_3_4.\33 _4.fusion-flex-column.products-container { width: 100%; }
  ul.fusion-grid.fusion-grid-2.fusion-flex-align-items-stretch.fusion-grid-posts-cards.fusion-grid-container-infinite { gap: 2%; }
  ul.fusion-grid.fusion-grid-2.fusion-flex-align-items-stretch.fusion-grid-posts-cards.fusion-grid-container-infinite li { width: 49% !important; }
  .fusion-layout-column.fusion_builder_column.fusion-builder-column-1.fusion_builder_column_1_4.\31 _4.fusion-flex-column { width: 100%; }
  .fusion-layout-column.fusion_builder_column.fusion-builder-column-1.fusion_builder_column_1_4.\31 _4.fusion-flex-column .fusion-content-layout-column { margin: 0 25px; }
}

.products-container ul.fusion-grid.fusion-grid-2.fusion-flex-align-items-stretch.fusion-grid-posts-cards.fusion-grid-container-infinite li {
  padding-left: 20px;
  padding-bottom: 20px;
}
.product-main-block ul.fusion-grid.fusion-grid-2.fusion-flex-align-items-flex-start.fusion-grid-posts-cards.fusion-grid-container-infinite { gap: 25px; }

/* =====================  3. CARD CONTAINER  =========================== */

.product-main-block .fusion-column-wrapper.fusion-column-has-shadow.fusion-flex-justify-content-flex-start.fusion-content-layout-block {
  background: white;
  border-radius: 25px;
  padding: 12px !important;           /* Figma: 12px on every side, every breakpoint */
  box-shadow: 0px 6px 20px 0px #00000014;
  transition: box-shadow, .3s;
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
/* button wrapper must contain its 35px inline-flex button */
.product-main-block .fusion-grid .fusion-button-wrapper {
  display: flex;
  line-height: 1;
}
/* stretched-card surplus goes after the description, never below the button;
   bottom edge is always exactly the 12px card padding */
.product-main-block .fusion-column-wrapper.fusion-column-has-shadow.fusion-flex-justify-content-flex-start.fusion-content-layout-block > :last-child {
  margin-bottom: 0 !important;
}
.product-main-block .fusion-column-wrapper.fusion-column-has-shadow.fusion-flex-justify-content-flex-start.fusion-content-layout-block:hover {
  box-shadow: 0px 6px 20px 20px #00000014;
  transition: box-shadow, .3s;
}

/* image — always 1:1, no distortion */
.product-main-block .woocommerce-product-gallery__image.fusion-image-wrapper {
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 16px !important;
  overflow: hidden;
}
.product-main-block .woocommerce-product-gallery__image.fusion-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* title — max 2 lines with … */
.product-main-block .fusion-grid .fusion-title-heading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

/* description excerpt — fixed height */
.product-main-block .fusion-content-tb {
  height: 113px;
  overflow: hidden;
}

/* =====================  4. BUTTONS (uniform)  ======================== */

/* identical on every breakpoint: h35, 16px, single-line label;
   stretched variants only add width:100% */
.product-main-block .fusion-grid a.fusion-button {
  height: 35px !important;
  padding: 0 20px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.product-main-block .button-large { font-size: 16px !important; }
.product-main-block .fusion-grid a.add-to-cart { margin-bottom: 0 !important; }

/* =====================  5. PRICE + BADGE/BUTTON ROW  ================= */

.fusion-woo-stock-tb:before {
  content: 'Op voorraad';
  background: #DFFFE1;
  color: #25932c;
  font-size: 16px;
  line-height: 1.6;
  display: inline-block;
  white-space: nowrap;
  padding: 2px 14px;
  border-radius: 12px;
}
.fusion-woo-stock-tb { display: flex; justify-content: flex-end; }

html .product-main-block .fusion-grid .fusion-builder-row.fusion-builder-row-inner {
  margin-top: auto !important;      /* absorbs grid-stretch surplus above the price row */
  margin-left: 0 !important;        /* Avada gutter system: negative margins,        */
  margin-right: 0 !important;       /* width:calc(100% + gutter), side paddings —    */
  width: 100% !important;           /* all three zeroed so the row sits exactly      */
  max-width: 100% !important;       /* inside the card's 12px padding box            */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 10px;
  align-items: center !important;
}
.product-main-block .fusion-grid .fusion-builder-row.fusion-builder-row-inner ~ .fusion-builder-row.fusion-builder-row-inner {
  margin-top: 10px !important;      /* second row (offerte buttons) stays fixed */
  padding-top: 0;
}
.product-main-block .fusion-grid .fusion-builder-row.fusion-builder-row-inner > .fusion_builder_column_inner {
  align-self: center !important;      /* Avada re-sets flex-end per breakpoint */
  padding-left: 0 !important;         /* column spacing broke the 12px inset */
  padding-right: 0 !important;
}

.product-main-block .fusion-woo-price-tb p.price { margin: 0; }
.product-main-block .fusion-woo-price-tb { margin-bottom: 5px !important; }
.product-main-block .fusion-layout-column.fusion_builder_column_inner { margin-bottom: 7px; }

/* ≤1024: Avada stacks the inner columns (100% width) on tablet & phone —
   force the price + badge/button row to stay on ONE line */
@media screen and (max-width:1024px) {
  .product-main-block .fusion-woo-price-tb { margin-bottom: 0 !important; }
  .product-main-block .fusion-grid .fusion-builder-row.fusion-builder-row-inner {
    flex-wrap: nowrap !important;
  }
  .product-main-block .fusion-grid .fusion-builder-row.fusion-builder-row-inner > .fusion_builder_column_inner {
    width: auto !important;
    flex: 1 1 50% !important;
    margin-bottom: 0 !important;
  }
}

/* "Vanaf" prefix (renders only inside .price-text wrapper) */
.product-main-block .price-text span.woocommerce-Price-amount.amount:before {
  content: 'Vanaf';
  margin-right: 6px;
  color: #000;
  font-weight: 600;
}
.product-main-block span.woocommerce-Price-amount.amount bdi { font-weight: 600; }

/* =====================  6. TAGS + META  ============================== */

.product-main-block span.fusion-tb-tags {
  font-size: 0;
  margin-top: 16px !important;
}
.product-main-block .fusion-tb-tags a {
  font-size: 14px;
  color: #000 !important;
  line-height: 2.43;
  background: #f4f4f4;
  padding: 4px 12px;
  white-space: pre;
  margin-right: 8px;
  border-radius: 8px;
  text-decoration: none !important;
}
.product-main-block .fusion-meta-tb {
  border: none !important;
  border-bottom: none !important;
  padding: 0px !important;
  margin-bottom: 14px !important;
}

/* ================================================================
   7. MODIFIER: qr-cards--view
   ================================================================ */

.qr-cards--view span.fusion-tb-tags { height: 70px; overflow: hidden; }
.qr-cards--view span.woocommerce-Price-amount.amount bdi { color: #000; }

/* ================================================================
   8. MODIFIER: qr-cards--offerte
   ================================================================ */

.qr-cards--offerte .offerButtons { width: 100%; }

.qr-cards--offerte .gereserveerd { position: relative; z-index: 1; }
.qr-cards--offerte .gereserveerd p {
  position: absolute;
  top: -55px;
  left: 12px;
  background: #1FF265;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}

/* ================================================================
   9. MODIFIER: qr-cards--cart
   ================================================================ */

.qr-cards--cart a.add-to-cart {
  width: 100%;
  margin-top: 16px;
  margin-bottom: 0;
}
.qr-cards--cart span.woocommerce-Price-amount.amount bdi { color: #000; }