/* Collection page polish for static export */

html,
body {
  background: var(--color-background, #ffffff);
}

.collection-page {
  padding: 24px 0 48px;
  /* Zelfde lettertypen als de rest van het theme (theme-vars.css) */
  font-family: var(--font-body-family, Roboto), system-ui, sans-serif;
  font-size: var(--font-body-size, 16px);
  font-weight: var(--font-body-weight, 400);
  letter-spacing: var(--body-letter-spacing, 0);
}

.collection-page__inner {
  max-width: 1216px;
  margin: 0 auto;
  padding: 0 16px 0 12px;
}

@media (min-width: 990px) {
  .collection-page__inner {
    padding-left: 8px;
  }
}

.collection-page__top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 20px;
  text-align: left;
}

.collection-page__breadcrumb {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-grey, #868686);
}

.collection-page__breadcrumb a {
  color: var(--color-link, #28a745);
  text-decoration: none;
}

.collection-page__breadcrumb a:hover {
  text-decoration: underline;
}

.collection-page__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  color: var(--boostsd-general-color-primary, #222);
  font-weight: 700;
  text-transform: capitalize;
}

/* Breadcrumb: laatste segment = collectienaam (geen dubbele paginatitel meer) */
#collectionBreadcrumbTitle {
  font-weight: var(--font-heading-weight, 700);
  font-family: var(--font-heading-family, Roboto), system-ui, sans-serif;
  color: var(--color-text2, #3c3c3c);
}

/* Boost collection header: zo ver mogelijk links, volle kolombreedte */
.collection-page__boost-header-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start;
  text-align: left !important;
  width: 100%;
  max-width: none;
  padding: 0 0 8px;
  margin: 0;
  box-sizing: border-box;
}

.collection-page .boost-product-listing-column,
.collection-page .boost-sd-right.boost-product-listing-column {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.collection-page #boost-sd__collection-header,
.collection-page .boost-sd__collection-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}

.collection-page .boost-sd__header-main-3-content--middle-left {
  align-items: flex-start !important;
  text-align: left !important;
}

.collection-page .boost-sd__header-main.boost-sd__header-main-3 {
  justify-content: flex-start;
}

/* Boost CDN centreert de kop vaak; forceer links op alle header-lagen */
.collection-page #boost-sd__collection-header,
.collection-page .boost-sd__collection-header,
.collection-page .boost-sd__header-main,
.collection-page .boost-sd__header-main-3,
.collection-page .boost-sd__header-main-3-content {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.collection-page h1.boost-sd__header-title,
.collection-page .boost-sd__header-title.collection-page__boost-title,
.collection-page .boost-sd__header-title {
  display: block;
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.collection-page__boost-title {
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--font-heading-family, Roboto), system-ui, sans-serif;
  font-size: clamp(2rem, 3.5vw + 1rem, 2.875rem);
  font-weight: var(--font-heading-weight, 700);
  font-style: var(--font-heading-style, normal);
  line-height: 1.15;
  letter-spacing: var(--heading-letter-spacing, 0);
  text-align: left !important;
  text-transform: var(--heading-text-transform, none);
  color: var(--color-text2, #3c3c3c);
}

.collection-page__boost-description,
.collection-page .boost-sd__header-description {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
  max-width: 52rem;
  font-family: var(--font-body-family, Roboto), system-ui, sans-serif !important;
  font-size: 1.1875rem !important;
  font-weight: var(--font-body-weight, 400);
  line-height: 1.62 !important;
}

.collection-page__intro {
  margin: 0;
  font-family: inherit;
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--color-text, #515150);
}

@media (min-width: 750px) {
  .collection-page__intro,
  .collection-page .boost-sd__header-description {
    font-size: 1.3125rem !important;
    line-height: 1.58 !important;
  }
}

/* Toolbar onder dezelfde typografie en links uitgelijnd */
.collection-page .boost-sd__toolbar-container,
.collection-page .boost-sd__toolbar-inner,
.collection-page .boost-sd__toolbar-content {
  text-align: left !important;
  justify-content: flex-start !important;
}

.collection-page .boost-sd__toolbar {
  font-family: var(--font-body-family, Roboto), system-ui, sans-serif;
  font-size: 1rem;
}

.collection-page .boost-sd__product-count,
.collection-page .boost-sd__sorting-label,
.collection-page .boost-sd__sorting-value,
.collection-page .boost-sd__view-as-text {
  font-size: 1.0625rem !important;
}

.collection-page--no-collection .collection-page__boost-description {
  display: none;
}

/* Make Boost container match site width */
.boost-sd-container {
  width: 100%;
}

.boost-sd-layout {
  background: transparent;
}

/* Helpful when Boost CSS isn't fully loaded yet */
.boost-sd__product-list:empty::before {
  content: "Producten laden…";
  display: block;
  padding: 18px 0;
  color: var(--color-grey, #7a7a7a);
}

/* Static catalog grid */
.boost-sd__product-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1020px) {
  .boost-sd__product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .boost-sd__product-list {
    /* mobiel: altijd 2 per rij (zoals gevraagd) */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 380px) {
  .boost-sd__product-list {
    /* ook ultra-smal: 2 per rij */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cat-card {
  border: 1px solid var(--border-global, #e6e6e6);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-white, #fff);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cat-card__media {
  display: block;
  /* voorkom 'lange' foto-vakken: breder en lager */
  aspect-ratio: 4 / 3;
  background: var(--bg-white, #ffffff);
  position: relative;
  overflow: hidden;
}

.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 10px;
}

.cat-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(110deg, #f2f4f7 0%, #f8fafc 50%, #f2f4f7 100%);
}

.cat-card__body {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cat-card__title {
  display: block;
  text-decoration: none;
  color: var(--boostsd-general-color-primary, #222);
  font-weight: 600;
  line-height: 1.25;
  min-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cat-card__title:hover {
  text-decoration: underline;
}

.cat-card__price {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.cat-card__compare {
  color: var(--color-grey, #7a7a7a);
  text-decoration: line-through;
  font-size: 0.9em;
}

.cat-card__sale {
  color: var(--boostsd-product-sale-price-color, var(--color-link, #28a745));
  font-weight: 700;
}

.cat-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--sale-badge-bg, #ffd8d7);
  color: var(--sale-badge-color, #e10600);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cat-card__cta {
  margin-top: auto;
  width: 100%;
  border: 1px solid var(--btn-1-border, var(--color-link, #28a745));
  background: var(--btn-1-bg, var(--color-link, #28a745));
  color: var(--btn-1-color, #fff);
  border-radius: var(--btn-1-border-radius, 10px);
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--anchor-transition, all ease 0.3s);
}

.cat-card__cta:hover {
  border-color: var(--btn-1-border-hover, var(--color-link-hover, #f27300));
  background: var(--btn-1-bg-hover, var(--color-link-hover, #f27300));
  color: var(--btn-1-color-hover, #fff);
}

.boost-sd__pagination-ellipsis {
  display: inline-flex;
  padding: 0 6px;
  color: var(--color-grey, #7a7a7a);
  align-items: center;
}