/**
 * MysteryBril — 15 · Shop en productcategorieën
 * ---------------------------------------------------------------------------
 * Drie weergaven, allemaal WooCommerce zelf:
 *
 *   /winkel/                    categorietegels ("Kies je categorie")
 *   /product-categorie/<naam>/  producten van één categorie, 2 kolommen
 *   /alle-brillen/              de volledige collectie, 3 kolommen
 *
 * De kop komt uit 06-blocks.css (.mb-page-hero). De logica die de kop en de
 * terugknop boven een categoriearchief zet, staat in inc/woo-shop.php.
 * ---------------------------------------------------------------------------
 */

/* --- Kop van de shoppagina --- */
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-shop-hero__lead {
  max-width: 460px;
  margin: 18px 0 0 !important;
  font-family: var(--mb-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mb-white) !important;
}
:is(.entry-content, .editor-styles-wrapper, .block-editor-block-list__layout) .mb-shop-hero__cta {
  margin: 26px 0 0 !important;
}

/* Op het categoriearchief staat dezelfde kop, maar zonder onderrand:
   die zit al onder de knop van de hero zelf. */
.mb-shop-intro .mb-page-hero {
  padding-bottom: 40px;
}

/* --- Terugknop + categorienaam boven het productoverzicht --- */
.mb-shop-catbar {
  margin: 0 auto;
  padding: 60px 0 0;
  max-width: var(--theme-block-max-width, 1200px);
}
.mb-shop-back {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--mb-line);
  background: transparent;
  font-family: var(--mb-font-body);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--mb-white) !important;
  transition: all 0.2s ease;
}
.mb-shop-back:hover {
  background: var(--mb-white);
  color: var(--mb-black) !important;
}
.mb-shop-catbar__name {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 26px 0 0 !important;
  font-family: var(--mb-font-display);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--mb-white);
}
.mb-shop-catbar__count {
  font-family: var(--mb-font-body);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mb-white);
  opacity: 0.75;
}

/* De resultatenteller en sorteerkeuze staan niet in het ontwerp. */
.woocommerce-page .woo-listing-top,
.tax-product_cat .woo-listing-top {
  display: none;
}

/* --- Categorietegels op /winkel/ --- */
.post-type-archive-product ul.products {
  display: grid !important;
  /* minmax(0, 1fr) i.p.v. 1fr: anders wordt een kolom breder gemaakt door de
     langste tagline ("Combineer & bespaar") en zijn de drie tegels ongelijk. */
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2px !important;
  margin: 60px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: var(--mb-line-soft);
  border: 1px solid var(--mb-line-soft);
}
.post-type-archive-product ul.products li.product-category {
  position: relative;
  /* WooCommerce/Blocksy zetten een eigen breedte op de li's; die moet weg,
     anders vullen ze de rasterkolom niet. */
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--mb-black) !important;
  transition: background 0.2s ease;
}
.post-type-archive-product ul.products li.product-category:hover {
  background: var(--mb-card-hover) !important;
}
.post-type-archive-product li.product-category figure {
  display: block;
  position: relative;
  margin: 0 !important;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mb-card);
}

/* Blocksy zet de categorieomschrijving onder de tegel; die gebruiken we al
   als tagline over de afbeelding. */
.post-type-archive-product li.product-category .entry-excerpt {
  display: none;
}
/* Blocksy zet een <a> tussen figure en img; die moet meeschalen. */
.post-type-archive-product li.product-category figure > a,
.tax-product_cat ul.products li.product > figure > a,
.page ul.products li.product > figure > a {
  display: block;
  width: 100%;
  height: 100%;
}
.post-type-archive-product li.product-category figure img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  filter: blur(11px);
  transform: scale(1.14);
  transition: transform 0.3s ease;
}
.post-type-archive-product li.product-category:hover figure img {
  transform: scale(1.2);
}
.post-type-archive-product li.product-category figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Mag geen klikken opvangen; de hele tegel is een link. */
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
}
/* De tagline over de afbeelding komt uit de omschrijving van de categorie. */
.post-type-archive-product li.product-category figure::after {
  overflow-wrap: anywhere;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 22px;
  font-family: var(--mb-font-display);
  font-size: clamp(21px, 2.8vw, 32px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--mb-white);
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.6);
}
.post-type-archive-product li.product-category:has(a[href$="/mysterybril/"]) figure::after {
  content: "De klassieke lijn";
}
.post-type-archive-product li.product-category:has(a[href$="/mysteryravebril/"]) figure::after {
  content: "Voor festival & rave";
}
.post-type-archive-product li.product-category:has(a[href$="/boxen/"]) figure::after {
  content: "Combineer & bespaar";
}
/* Volgorde uit het ontwerp; WooCommerce sorteert op naam. */
.post-type-archive-product li.product-category:has(a[href$="/mysterybril/"]) {
  order: 1;
}
.post-type-archive-product li.product-category:has(a[href$="/mysteryravebril/"]) {
  order: 2;
}
.post-type-archive-product li.product-category:has(a[href$="/boxen/"]) {
  order: 3;
}
.post-type-archive-product li.product-category .woocommerce-loop-category__title {
  margin: 0 !important;
  padding: 18px 18px 18px;
  font-family: var(--mb-font-display);
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--mb-white) !important;
}
.post-type-archive-product li.product-category .woocommerce-loop-category__title a {
  color: var(--mb-white) !important;
  text-decoration: none;
}
.post-type-archive-product li.product-category .mb-cat-count {
  display: block;
  margin-top: 4px;
  font-family: var(--mb-font-body);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  color: var(--mb-white);
}
/* Hele tegel klikbaar: de link uit de titel wordt over de hele tegel gelegd,
   dus ook over de afbeelding, de naam en het aantal. */
.post-type-archive-product li.product-category .woocommerce-loop-category__title a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* --- Productkaarten (categoriearchief en /alle-brillen/) --- */
.tax-product_cat ul.products,
.page ul.products {
  gap: 2px !important;
}
.tax-product_cat ul.products {
  grid-template-columns: repeat(2, 1fr) !important;
  margin-top: 26px !important;
}

.tax-product_cat ul.products li.product,
.page ul.products li.product {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr auto;
  /* afbeelding · titel · omschrijving (rekt op) · prijs met knop.
     Daardoor staan de prijzen van alle kaarten op dezelfde hoogte, ook als de
     ene kaart een Populair-label of een langere omschrijving heeft. */
  grid-template-rows: auto auto 1fr auto;
  padding: 0 !important;
}

/* Afbeelding over de volle breedte van de kaart */
.tax-product_cat ul.products li.product > figure,
.page ul.products li.product > figure {
  grid-column: 1 / -1;
  position: relative;
  margin: 0 0 20px !important;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mb-card);
}
.tax-product_cat ul.products li.product > figure img,
.page ul.products li.product > figure img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.tax-product_cat ul.products li.product:hover > figure img,
.page ul.products li.product:hover > figure img {
  transform: scale(1.04);
}

/* De "mystery-tag" linksboven op de afbeelding.
   De klasse mb-tag-<slug> wordt gezet in inc/woo-shop.php op basis van de
   producttag. Nieuwe tag? Voeg hieronder een regel toe. */
.tax-product_cat ul.products li.product > figure::after,
.page ul.products li.product > figure::after {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 8px;
  border: 1px solid var(--mb-line);
  background: rgba(0, 0, 0, 0.55);
  font-family: var(--mb-font-body);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mb-white);
}
li.product.mb-tag-single > figure::after {
  content: "Single";
}
li.product.mb-tag-duo > figure::after {
  content: "Duo";
}
li.product.mb-tag-combi > figure::after {
  content: "Combi";
}
li.product.mb-tag-3-10-stuks > figure::after {
  content: "3-10 stuks";
}

/* Titel, met daarboven het label Populair voor aanbevolen producten. */
.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
.page ul.products li.product .woocommerce-loop-product__title {
  grid-column: 1 / -1;
  margin: 0 0 10px !important;
  padding: 0 20px;
  font-family: var(--mb-font-display) !important;
  font-size: 19px !important;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--mb-white) !important;
}
li.product.mb-product--featured .woocommerce-loop-product__title::before {
  content: "Populair";
  display: block;
  width: fit-content;
  margin-bottom: 10px;
  padding: 3px 7px;
  background: var(--mb-orange-dim);
  font-family: var(--mb-font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mb-orange-bright);
}
.tax-product_cat ul.products li.product .woocommerce-loop-product__title a,
.page ul.products li.product .woocommerce-loop-product__title a {
  color: var(--mb-white) !important;
  text-decoration: none;
}

/* Korte omschrijving */
.tax-product_cat ul.products li.product .entry-excerpt,
.page ul.products li.product .entry-excerpt {
  grid-column: 1 / -1;
  margin: 0 0 18px !important;
  padding: 0 20px;
}
.tax-product_cat ul.products li.product .entry-excerpt p,
.page ul.products li.product .entry-excerpt p {
  margin: 0 !important;
  font-family: var(--mb-font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mb-white);
}

/* Prijs links, knop rechts, op één regel */
.tax-product_cat ul.products li.product .price,
.page ul.products li.product .price {
  grid-column: 1;
  align-self: center;
  margin: 0 !important;
  padding: 0 0 20px 20px;
  font-family: var(--mb-font-body) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--mb-orange) !important;
}
.tax-product_cat ul.products li.product .ct-woo-card-actions,
.page ul.products li.product .ct-woo-card-actions {
  grid-column: 2;
  align-self: center;
  margin: 0 !important;
  padding: 0 20px 20px 0;
}
.tax-product_cat ul.products li.product .ct-woo-card-actions .button,
.page ul.products li.product .ct-woo-card-actions .button {
  padding: 8px 13px !important;
  border: 1px solid var(--mb-white) !important;
  background: transparent !important;
  color: var(--mb-white) !important;
  font-family: var(--mb-font-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
.tax-product_cat ul.products li.product .ct-woo-card-actions .button:hover,
.page ul.products li.product .ct-woo-card-actions .button:hover {
  background: var(--mb-white) !important;
  color: var(--mb-black) !important;
}

/* --- Tablet / mobiel --- */
@media (max-width: 880px) {
  .mb-shop-catbar {
    padding-top: 38px;
  }
  .mb-shop-catbar__name {
    font-size: 17px;
    margin-top: 20px !important;
  }
  .post-type-archive-product ul.products {
    margin-top: 38px !important;
  }
  .post-type-archive-product li.product-category figure {
    aspect-ratio: 4 / 5;
  }
  .post-type-archive-product li.product-category figure::after {
    font-size: clamp(13px, 3.8vw, 17px);
    padding: 0 8px;
  }
  .post-type-archive-product li.product-category .woocommerce-loop-category__title {
    font-size: clamp(12.5px, 3.3vw, 16px);
    padding: 10px 8px;
  }
  .post-type-archive-product li.product-category .mb-cat-count {
    font-size: 11px;
  }
  .tax-product_cat ul.products,
  .page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tax-product_cat ul.products li.product .woocommerce-loop-product__title,
  .page ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 0 14px;
  }
  .tax-product_cat ul.products li.product .entry-excerpt,
  .page ul.products li.product .entry-excerpt {
    padding: 0 14px;
    margin-bottom: 14px !important;
  }
  .tax-product_cat ul.products li.product .entry-excerpt p,
  .page ul.products li.product .entry-excerpt p {
    font-size: 11px;
  }
  .tax-product_cat ul.products li.product .price,
  .page ul.products li.product .price {
    font-size: 14px !important;
    padding: 0 0 14px 14px;
  }
  .tax-product_cat ul.products li.product .ct-woo-card-actions,
  .page ul.products li.product .ct-woo-card-actions {
    padding: 0 14px 14px 0;
  }
  .tax-product_cat ul.products li.product .ct-woo-card-actions .button,
  .page ul.products li.product .ct-woo-card-actions .button {
    padding: 6px 10px !important;
    font-size: 9.5px !important;
  }
}