/* Category overview presentation only. Existing links, images and controllers are retained. */
/* Brand selection remains available in the product filters, outside the banners. */
body.category-design .product-catalog-page.has-product-header-photo .product-brand-row { display: none; }
/* Light studio presentation for road-bike tyres, sport nutrition and bicycle accessory categories. */
body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-listing-header {
  min-height: 350px;
  padding: 32px;
  justify-content: center;
  gap: 24px;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-listing-header::before {
  background-position: right center;
  background-size: 75% auto;
  filter: none;
  transform: none;
}
body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-listing-header::after { display: none; }
body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-listing-header > div:first-child { max-width: 48%; }
body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-listing-header h1 {
  color: #102238;
  font-size: clamp(27px, 2.7vw, 40px);
  line-height: 1.15;
  text-shadow: none;
}
body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-listing-header p { color: #52677f; text-shadow: none; }
body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-brand-row {
  max-width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .95);
  gap: 6px;
}
body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-brand-row button {
  color: #102238;
  border-color: #cbdced;
  border-radius: 6px;
  background: #fff;
  backdrop-filter: none;
}
body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-brand-row button:is(:hover, :focus-visible, .active) {
  color: #fff;
  background: #006bd1;
  border-color: #006bd1;
}
@media (max-width: 820px) {
  body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-listing-header { min-height: 0; gap: 16px; }
  body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-listing-header > div:first-child { max-width: 100%; }
  body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-listing-header::before {
    position: relative;
    inset: auto;
    order: 1;
    width: 100%;
    aspect-ratio: 8 / 3;
    background-size: contain;
  }
  body.category-design .product-catalog-page:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-pedals-studio-banner, .has-saddles-studio-banner, .has-tyres-studio-banner, .has-road-tyre-studio-banner, .has-nutrition-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-brand-row { order: 2; padding: 0; }
}

.category-design .category-showcase.mantel-category-overview {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto;
  padding: 24px 28px 48px;
  color: #102238;
  text-align: left;
}
.category-design .overview-breadcrumb { gap: 8px; align-items: center; padding: 0 0 20px; border: 0; color: #66788b; font-size: 12px; line-height: 1.6; }
.category-design .overview-breadcrumb a { display: inline-flex; align-items: center; min-height: 28px; color: #52677f; }
.category-design .overview-breadcrumb a:hover { color: #006bd1; text-decoration: underline; }
.category-design .overview-breadcrumb strong { color: #102238; font-weight: 600; }
.category-design .category-overview-header { display: block; margin: 0 0 28px; padding: 28px 32px; border: 1px solid #dfe7ef; border-radius: 12px; background: #fff; }
.category-design .category-overview-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.category-design #categoryTitle { margin: 0; color: #102238; font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; }
.category-design #categoryCount { flex-shrink: 0; min-width: 32px; min-height: 28px; padding: 4px 8px; border: 1px solid #d9e8fa; border-radius: 6px; background: #edf5ff; color: #005ab3; font-size: 12px; font-weight: 700; }
.category-design .category-design-headline { display: none; }
.category-design .category-showcase:has(#categoryTiles[data-category="onderdelen"]) #categoryTitle { color: #006bd1; font-size: 13px; font-weight: 750; letter-spacing: .06em; }
.category-design .category-showcase:has(#categoryTiles[data-category="onderdelen"]) .category-design-headline { display: block; margin: 14px 0 8px; max-width: 920px; color: #102238; font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.18; }
.category-design .category-overview-intro { display: flex; align-items: start; gap: 20px; }
.category-design .category-overview-intro #categoryIntro { max-width: 950px; margin: 12px 0 0; color: #52677f; font-size: 14px; line-height: 1.75; -webkit-line-clamp: 2; }
.category-design #categoryReadMore { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 8px 0; color: #006bd1; font-size: 13px; font-weight: 650; }
.category-design #categoryReadMore:hover { text-decoration: underline; }
.category-design .category-showcase .category-section-title { margin: 0 0 18px; color: #102238; font-size: 21px; line-height: 1.35; font-weight: 750; letter-spacing: -.025em; }
.category-design #categoryTiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; justify-content: stretch; gap: 16px; }
.category-design #categoryTiles .category-image-tile { position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 0; width: 100%; min-width: 0; max-width: none; height: 100%; min-height: 0; padding: 0 !important; overflow: hidden; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; color: #102238; box-shadow: 0 2px 5px #10223803; transition: border-color .16s, box-shadow .16s, transform .16s; }
.category-design #categoryTiles .category-image-frame { position: relative; display: grid; place-items: center; width: 100%; max-width: none; height: auto; min-height: 0; aspect-ratio: 1.18; padding: 0 !important; overflow: hidden; border: 0; border-radius: 0; background: #fff; }
.category-design #categoryTiles .category-image-frame img { position: absolute; inset: 14px; display: block; width: calc(100% - 28px); height: calc(100% - 28px); min-width: 0; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; transform: none; filter: none; box-shadow: none; border: 0; border-radius: 0; }
.category-design #categoryTiles .category-image-tile strong { display: flex; align-items: center; justify-content: flex-start; min-height: 60px; padding: 12px 34px 14px 16px; border-top: 1px solid #edf1f6; background: #fff; color: #102238; font-size: 14px; font-weight: 650; line-height: 1.4; text-align: left; overflow-wrap: anywhere; hyphens: auto; }
.category-design #categoryTiles .category-image-tile::after { content: ""; position: absolute; right: 17px; bottom: 25px; width: 7px; height: 7px; border-top: 1.5px solid #006bd1; border-right: 1.5px solid #006bd1; transform: rotate(45deg); pointer-events: none; }
.category-design #categoryTiles .category-image-tile:hover { transform: translateY(-2px); border-color: #9bc5ef; box-shadow: 0 5px 14px #1022380b; }
.category-design #categoryTiles .category-image-tile:hover img { transform: none; }
.category-design .category-empty-state { margin: 18px 0; padding: 24px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; color: #52677f; font-size: 14px; }
.category-design .category-showcase .category-brand-section { margin-top: 34px; padding: 24px; border: 1px solid #dfe7ef; border-radius: 12px; background: #fff; }
.category-design .category-brand-section .category-section-title { margin-bottom: 16px; font-size: 18px; }
.category-design #categoryOverviewBrands { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
.category-design #categoryOverviewBrands a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 10px 18px; border: 1px solid #dce5ef; border-radius: 24px; background: #f7f9fc; color: #263d54; font-size: 13px; font-weight: 650; text-align: center; overflow-wrap: anywhere; box-shadow: none; }
.category-design #categoryOverviewBrands a:hover { border-color: #91bfe9; background: #edf5ff; color: #006bd1; }
.category-design .category-showcase .category-commerce-band { min-height: 230px; margin-top: 30px; padding: 32px; gap: 28px; border: 0; border-radius: 12px; box-shadow: none; }
.category-design .category-showcase .category-commerce-band h2 { max-width: 620px; margin: 10px 0; font-size: clamp(23px, 2.4vw, 32px); line-height: 1.2; font-weight: 800; letter-spacing: -.025em; }
.category-design .category-showcase .category-commerce-band p { color: #e1eaf4; font-size: 14px; line-height: 1.7; }
.category-design .category-showcase .category-commerce-eyebrow { color: #a5d7ff; font-size: 11px; letter-spacing: .12em; }
.category-design .category-showcase .category-commerce-band > a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border: 1px solid #006bd1; border-radius: 8px; background: #006bd1; color: #fff; font-size: 13px; text-align: center; }
.category-design .category-showcase .category-commerce-band > a:hover { background: #005ab3; }
.category-design .category-showcase .category-overview-banner { width: 100%; height: clamp(160px, 18vw, 260px); margin: 0 0 24px; border-radius: 12px; }
.category-design .category-showcase :is(a, button):focus-visible { outline: 3px solid #087cf0; outline-offset: 3px; }
@media (max-width: 1200px) {
  .category-design #categoryTiles { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px; }
}
@media (max-width: 1000px) {
  .category-design #categoryTiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .category-design .category-showcase .category-commerce-band { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 820px) {
  .category-design #categoryTiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .category-design .category-overview-header { padding: 24px; }
}
@media (max-width: 720px) {
  .category-design .category-showcase.mantel-category-overview { padding: 18px 14px 32px; }
  .category-design .overview-breadcrumb { padding-bottom: 14px; font-size: 11px; }
  .category-design .overview-breadcrumb a { min-height: 36px; }
  .category-design .category-overview-header { margin-bottom: 24px; padding: 22px 18px !important; }
  .category-design #categoryTitle { font-size: 27px !important; }
  .category-design .category-showcase:has(#categoryTiles[data-category="onderdelen"]) #categoryTitle { font-size: 12px !important; }
  .category-design .category-showcase:has(#categoryTiles[data-category="onderdelen"]) .category-design-headline { margin: 12px 0 6px; font-size: 29px; }
  .category-design .category-overview-intro { flex-direction: column; gap: 0; }
  .category-design .category-overview-intro #categoryIntro { margin-top: 10px; font-size: 13px; line-height: 1.7; }
  .category-design #categoryReadMore { align-self: flex-start; font-size: 13px; }
  .category-design .category-showcase .category-section-title { margin-bottom: 14px; font-size: 20px; }
  .category-design #categoryTiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .category-design #categoryTiles .category-image-frame { aspect-ratio: 1.12; }
  .category-design #categoryTiles .category-image-frame img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
  .category-design #categoryTiles .category-image-tile strong { min-height: 58px; padding: 10px 27px 12px 12px; font-size: 13px; line-height: 1.45; }
  .category-design #categoryTiles .category-image-tile::after { right: 13px; bottom: 24px; width: 6px; height: 6px; }
  .category-design .category-showcase .category-brand-section { margin-top: 26px; padding: 20px 16px; }
  .category-design #categoryOverviewBrands { gap: 8px; }
  .category-design #categoryOverviewBrands a { padding: 10px 14px; font-size: 12px; }
  .category-design .category-showcase .category-commerce-band { min-height: 265px; margin-top: 24px; padding: 24px !important; gap: 20px; }
  .category-design .category-showcase .category-commerce-band img { height: 100% !important; min-height: 0 !important; }
  .category-design .category-showcase .category-commerce-band h2 { font-size: 25px; }
  .category-design .category-showcase .category-commerce-band p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .category-design #categoryTiles .category-image-tile { transition: none; }
  .category-design #categoryTiles .category-image-tile:hover { transform: none; }
}

/* Studio introductions share the live category heading and count. */
.category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-header {
  min-height: clamp(300px, 27vw, 390px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff url("assets/hero/shimano-grx-studio.png") right center / 70% auto no-repeat;
  overflow: hidden;
}
.category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-design-headline {
  display: none;
}
.category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-intro {
  display: none;
}
.category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-heading {
  gap: 16px;
  width: fit-content;
  max-width: 48%;
}
.category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-heading::before {
  content: "";
  flex: 0 0 clamp(24px, 3vw, 52px);
  height: 3px;
  background: #168cff;
}
.category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) #categoryTitle {
  color: #102238;
  font-size: clamp(22px, 2.5vw, 36px) !important;
  font-style: italic;
  font-weight: 750;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) #categoryCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 44px;
  padding: 4px 18px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
  background: #087cf0;
  color: #fff;
  font-size: 28px;
  font-style: italic;
  line-height: 1.2;
}
@media (max-width: 820px) {
  .category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-header {
    min-height: 0;
    background-image: none;
  }
  .category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-design-headline,
  .category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-intro {
    max-width: 100%;
  }
  .category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-header::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 2060 / 763;
    margin-top: 12px;
    background: url("assets/hero/shimano-grx-studio.png") center / contain no-repeat;
  }
  .category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-heading {
    max-width: 100%;
    gap: 8px;
  }
  .category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-heading::before {
    flex-basis: 20px;
  }
  .category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) #categoryTitle {
    font-size: clamp(18px, 4.5vw, 28px) !important;
  }
  .category-design .category-showcase:has(#categoryTiles:is([data-category="onderdelen"], [data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) #categoryCount {
    min-width: 48px;
    min-height: 34px;
    padding: 4px 12px;
    font-size: 22px;
  }
}

/* Show only the photo area: the supplied image also contains a fixed title and count. */
.category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) .category-overview-header {
  --category-studio-photo: url("assets/hero/onderhoud-studio.png");
}
.category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) #categoryTitle {
  font-size: clamp(28px, 3vw, 44px) !important;
  font-style: normal;
  font-weight: 800;
}
.category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) .category-overview-intro {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 38%;
  margin-left: calc(clamp(24px, 3vw, 52px) + 16px);
}
.category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) #categoryIntro {
  display: block;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.65;
}
.category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) #categoryReadMore { display: none; }
@media (max-width: 820px) {
  .category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) #categoryTitle { font-size: clamp(22px, 4.5vw, 28px) !important; }
  .category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) .category-overview-intro {
    max-width: calc(100% - 28px);
    margin-left: 28px;
  }
}
.category-design .category-showcase:has(#categoryTiles[data-category="kleding"]) .category-overview-header {
  --category-studio-photo: url("assets/hero/fietskleding-studio.png");
}
.category-design .category-showcase:has(#categoryTiles:is([data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-header {
  position: relative;
  min-height: clamp(300px, 27vw, 390px);
  background-image: none;
}
.category-design .category-showcase:has(#categoryTiles:is([data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-heading {
  position: relative;
  z-index: 1;
}
.category-design .category-showcase:has(#categoryTiles:is([data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-header::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: min(60%, calc(clamp(300px, 27vw, 390px) * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, #fff, transparent 8%), var(--category-studio-photo, url("assets/hero/fietsaccessoires-studio.png")) right center / 150% 100% no-repeat;
}
@media (max-width: 820px) {
  .category-design .category-showcase:has(#categoryTiles:is([data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-header { min-height: 0; }
  .category-design .category-showcase:has(#categoryTiles:is([data-category="accessoires"], [data-category="kleding"], [data-category="onderhoud"], [data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-header::after {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    aspect-ratio: 2060 / 763;
    transform: none;
    background: linear-gradient(90deg, #fff 30%, transparent 35%), var(--category-studio-photo, url("assets/hero/fietsaccessoires-studio.png")) right center / auto 100% no-repeat;
  }
  .category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) .category-overview-intro {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: calc((100% - 48px) * .4);
    max-width: none;
    margin: 0;
  }
  .category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) #categoryIntro {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
  }
  .category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) .category-overview-header::after {
    background: linear-gradient(90deg, #fff 40%, transparent 45%), var(--category-studio-photo) right center / 90% auto no-repeat;
  }
}
@media (max-width: 720px) {
  .category-design .category-showcase:has(#categoryTiles[data-category="onderhoud"]) .category-overview-intro {
    left: 18px;
    bottom: 22px;
    width: calc((100% - 36px) * .4);
  }
}

/* Keep the wide studio photos at their original proportions within the shared banner size. */
.category-design .category-showcase:has(#categoryTiles[data-category="aanbiedingen"]) .category-overview-header {
  --category-studio-photo: url("assets/hero/aanbiedingen-studio.png");
}
.category-design .category-showcase:has(#categoryTiles[data-category="fietsen"]) .category-overview-header {
  --category-studio-photo: url("assets/hero/fietsen-studio.png");
}
.category-design .category-showcase:has(#categoryTiles[data-category="voeding"]) .category-overview-header {
  --category-studio-photo: url("assets/hero/sportvoeding-studio.png");
}
.category-design .category-showcase:has(#categoryTiles[data-category="elektronica"]) .category-overview-header {
  --category-studio-photo: url("assets/hero/fietselectronica-studio.png");
}
.category-design .category-showcase:has(#categoryTiles:is([data-category="elektronica"], [data-category="voeding"], [data-category="fietsen"], [data-category="aanbiedingen"])) .category-overview-header::after {
  background-size: auto, auto 100%;
}
@media (min-width: 821px) {
  .category-design .category-showcase:has(#categoryTiles[data-category="fietsen"]) .category-overview-header::after {
    background-size: auto, 160% auto;
  }
}
/* This composition fills the entire source image, so keep it uncropped and unmasked. */
.category-design .category-showcase:has(#categoryTiles[data-category="aanbiedingen"]) .category-overview-header::after {
  background: var(--category-studio-photo) center / contain no-repeat;
}

/* Keep the complete wide studio compositions visible on smaller screens. */
@media (max-width: 820px) {
  body.category-design .product-catalog-page:is(.has-nutrition-studio-banner, .has-accessories-studio-banner, .has-tools-studio-banner, .has-components-studio-banner) .product-listing-header::before { aspect-ratio: 3 / 1; }
}

/* Studio banners also appear above nested category overviews. */
body.category-design .category-showcase:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner, .has-tyres-studio-banner, .has-saddles-studio-banner) .category-overview-header {
  --category-studio-photo: url("assets/hero/fietsaccessoires-categorie-studio.png");
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: clamp(300px, 27vw, 390px);
  overflow: hidden;
  background: #fff;
}

body.category-design .category-showcase:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner, .has-tyres-studio-banner, .has-saddles-studio-banner) .category-overview-header::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 70%;
  aspect-ratio: 3 / 1;
  transform: translateY(-50%);
  pointer-events: none;
  background: var(--category-studio-photo) right center / contain no-repeat;
}
body.category-design .category-showcase:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner, .has-tyres-studio-banner, .has-saddles-studio-banner) .category-overview-heading,
body.category-design .category-showcase:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner, .has-tyres-studio-banner, .has-saddles-studio-banner) .category-overview-intro {
  position: relative;
  z-index: 1;
  max-width: 45%;
}
@media (max-width: 820px) {
  body.category-design .category-showcase:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner, .has-tyres-studio-banner, .has-saddles-studio-banner) .category-overview-header { min-height: 0; }
  body.category-design .category-showcase:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner, .has-tyres-studio-banner, .has-saddles-studio-banner) .category-overview-heading,
  body.category-design .category-showcase:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner, .has-tyres-studio-banner, .has-saddles-studio-banner) .category-overview-intro { max-width: 100%; }
  body.category-design .category-showcase:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner, .has-tyres-studio-banner, .has-saddles-studio-banner) .category-overview-header::after {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    aspect-ratio: 2060 / 763;
    transform: none;
  }
}

/* Crop the clothing photo's printed heading/count; category labels stay live HTML. */
body.category-design .category-showcase.has-clothing-studio-banner .category-overview-header {
  --category-studio-photo: url("assets/hero/fietskleding-studio.png");
}
body.category-design .category-showcase.has-clothing-studio-banner .category-overview-header::after,
body.category-design .product-catalog-page.has-clothing-studio-banner .product-listing-header::before {
  left: auto;
  right: 0;
  top: 50%;
  bottom: auto;
  width: min(60%, 620px);
  height: auto;
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #fff, transparent 8%), url("assets/hero/fietskleding-studio.png") right center / 150% 100% no-repeat;
}
@media (max-width: 820px) {
  body.category-design .category-showcase.has-clothing-studio-banner .category-overview-header::after,
  body.category-design .product-catalog-page.has-clothing-studio-banner .product-listing-header::before {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 2060 / 763;
    transform: none;
    background: linear-gradient(90deg, #fff 30%, transparent 35%), url("assets/hero/fietskleding-studio.png") right center / auto 100% no-repeat;
  }
}

/* Lock types follow the seven-column category selection on wide screens. */
body.category-design .category-showcase.has-locks-studio-banner .category-overview-header {
  --category-studio-photo: url("assets/hero/fietssloten-studio.png");
}

@media (min-width: 1400px) {
  .category-design #categoryTiles[data-category="fietssloten"] {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
}

body.category-design .category-showcase.has-tools-studio-banner .category-overview-header {
  --category-studio-photo: url("assets/hero/gereedschap-studio.png");
}

body.category-design .category-showcase.has-components-studio-banner .category-overview-header {
  --category-studio-photo: url("assets/hero/shimano-grx-studio.png");
}
body.category-design .category-showcase.has-components-studio-banner .category-overview-header::after {
  aspect-ratio: 2060 / 763;
}

body.category-design .category-showcase.has-tyres-studio-banner .category-overview-header {
  --category-studio-photo: url("assets/hero/banden-studio.png");
}
body.category-design .category-showcase.has-tyres-studio-banner .category-overview-header::after {
  aspect-ratio: 2060 / 763;
}

/* One heading style for category overviews and category product listings. */
body.category-design .category-showcase:has(#categoryTitle) .category-overview-heading,
body.category-design #productCatalogPage .category-banner-heading.is-category-heading {
  display: grid;
  grid-template-columns: clamp(24px, 3vw, 52px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: fit-content;
  min-width: 0;
}
body.category-design .category-showcase:has(#categoryTitle) .category-overview-heading::before,
body.category-design #productCatalogPage .category-banner-heading.is-category-heading::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #168cff;
}
body.category-design .category-showcase:has(#categoryTitle) .category-overview-heading #categoryTitle,
body.category-design #productCatalogPage .category-banner-heading.is-category-heading #productListingTitle {
  min-width: 0;
  margin: 0;
  font-size: clamp(22px, 2.5vw, 36px) !important;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
  text-transform: none;
}
body.category-design .category-showcase:has(#categoryTitle) .category-overview-heading #categoryTitle {
  color: #102238;
}
body.category-design .category-showcase:has(#categoryTitle) .category-overview-heading #categoryCount,
body.category-design #productCatalogPage #productListingCategoryCount:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 72px;
  min-height: 44px;
  padding: 4px 20px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
  background: #087cf0;
  color: #fff;
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 820px) {
  body.category-design .category-showcase:has(#categoryTitle) .category-overview-heading,
  body.category-design #productCatalogPage .category-banner-heading.is-category-heading {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    max-width: 100%;
    gap: 8px;
  }
  body.category-design .category-showcase:has(#categoryTitle) .category-overview-heading #categoryTitle,
  body.category-design #productCatalogPage .category-banner-heading.is-category-heading #productListingTitle {
    font-size: clamp(18px, 4.5vw, 28px) !important;
  }
  body.category-design .category-showcase:has(#categoryTitle) .category-overview-heading #categoryCount,
  body.category-design #productCatalogPage #productListingCategoryCount:not([hidden]) {
    min-width: 48px;
    min-height: 34px;
    padding: 4px 14px;
    font-size: 22px;
  }
}

@media (max-width: 820px) {
  body.category-design .product-catalog-page.has-tyres-studio-banner .product-listing-header::before {
    aspect-ratio: 2060 / 763;
  }
}

body.category-design .category-showcase.has-saddles-studio-banner .category-overview-header {
  --category-studio-photo: url("assets/hero/zadels-studio.png");
}
body.category-design .category-showcase.has-saddles-studio-banner .category-overview-header::after {
  aspect-ratio: 2048 / 760;
}

body.category-design .category-showcase.has-saddles-studio-banner #categoryReadMore {
  display: none;
}
body.category-design .category-showcase.has-saddles-studio-banner #categoryIntro {
  -webkit-line-clamp: unset;
}
@media (max-width: 820px) {
  body.category-design .product-catalog-page.has-saddles-studio-banner .product-listing-header::before {
    aspect-ratio: 2048 / 760;
  }
}

@media (max-width: 820px) {
  body.category-design .product-catalog-page.has-pedals-studio-banner .product-listing-header::before {
    aspect-ratio: 2048 / 760;
  }
}

body.category-design .category-showcase.has-small-parts-studio-banner .category-overview-header {
  --category-studio-photo: url("assets/hero/klein-materiaal-studio.png");
}
body.category-design .category-showcase.has-small-parts-studio-banner .category-overview-header::after {
  aspect-ratio: 2059 / 764;
}
@media (max-width: 820px) {
  body.category-design .product-catalog-page.has-small-parts-studio-banner .product-listing-header::before {
    aspect-ratio: 2059 / 764;
  }
}

body.category-design .category-showcase.has-ebikes-studio-banner .category-overview-header {
  --category-studio-photo: url("assets/hero/e-bikes-studio.png");
}
body.category-design .category-showcase.has-ebikes-studio-banner .category-overview-header::after {
  aspect-ratio: 2059 / 764;
}
@media (max-width: 820px) {
  body.category-design .product-catalog-page.has-ebikes-studio-banner .product-listing-header::before {
    aspect-ratio: 2059 / 764;
  }
}

/* Mobiel: studiofoto onder de categorietitel niet hoger dan nodig (was ~40% van de schermbreedte). */
@media (max-width: 820px) {
  body.category-design .category-showcase:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner, .has-tyres-studio-banner, .has-saddles-studio-banner) .category-overview-header { gap: 8px; padding-top: 16px; padding-bottom: 14px; }
  body.category-design .category-showcase:is(.has-bosch-studio-banner, .has-ebikes-studio-banner, .has-small-parts-studio-banner, .has-accessories-studio-banner, .has-clothing-studio-banner, .has-tools-studio-banner, .has-components-studio-banner, .has-tyres-studio-banner, .has-saddles-studio-banner) .category-overview-header::after {
    aspect-ratio: auto;
    height: clamp(72px, 20vw, 104px);
  }
  body.category-design .category-showcase .category-overview-intro #categoryReadMore { min-height: 32px; }
}

/* One complete product in the existing heading, on the supplied house style. */
body.category-design :is(.category-overview-header, .product-listing-header).has-house-style-products {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 310px;
  padding: 36px 44% 36px 36px;
  overflow: hidden;
  border: 1px solid #dce7f4;
  border-radius: 14px;
  background: #f5faff url('/assets/hero/cyclestore-house-style-empty.png') center / cover no-repeat;
  color: #102238;
}
body.category-design .has-house-style-products::before,
body.category-design .has-house-style-products::after { content: none; }
body.category-design .has-house-style-products .category-overview-heading { max-width: 100%; }
body.category-design .has-house-style-products :is(h1, p) { color: #102238; }
body.category-design .has-house-style-products .category-design-headline { display: none; }
body.category-design .has-house-style-products .category-overview-intro { display: block; }
body.category-design .has-house-style-products #categoryReadMore { margin-top: 10px; }
body.category-design .has-house-style-products .category-house-products {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 22px 5% 22px 59%;
  pointer-events: none;
}
body.category-design .category-house-products > span { display: block; width: 100%; height: 100%; min-width: 0; }
body.category-design .category-house-products img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: none;
  mix-blend-mode: normal;
}
@media (max-width: 720px) {
  body.category-design :is(.category-overview-header, .product-listing-header).has-house-style-products { display: block; min-height: 350px; padding: 22px 20px 170px !important; }
  body.category-design .has-house-style-products #categoryTitle { font-size: 24px !important; }
  body.category-design .has-house-style-products .category-house-products { inset: auto 20% 14px; height: 145px; }
}

/* Reuse the existing brand-page artwork and official logos for brand product lists. */
body.category-design .product-catalog-page .product-listing-header.has-brand-catalogue-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 310px;
  padding: 36px;
  gap: 32px;
  border: 1px solid #dfe7ef;
  border-radius: 14px;
  background: #fff url('/assets/hero/brand-cyclestore-background.png') center / cover no-repeat;
  overflow: hidden;
}
body.category-design .product-listing-header.has-brand-catalogue-banner::before,
body.category-design .product-listing-header.has-brand-catalogue-banner::after { content: none; }
body.category-design .product-listing-header.has-brand-catalogue-banner > div:first-child { flex: 1 1 55%; width: auto; min-width: 0; }
body.category-design .product-listing-header.has-brand-catalogue-banner h1 { color: #102238; font-size: clamp(26px, 3vw, 42px); overflow-wrap: anywhere; }
body.category-design .product-listing-header.has-brand-catalogue-banner p { color: #52677f; }
body.category-design .has-brand-catalogue-banner .brand-catalogue-logos { position: relative; display: flex; flex: 1 1 40%; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; min-width: 0; max-height: 280px; overflow-y: auto; }
body.category-design .brand-catalogue-logo { display: grid; place-items: center; width: 100%; max-width: 320px; min-width: 0; min-height: 130px; padding: 20px; }
body.category-design .brand-catalogue-logo img { display: block; width: 100%; height: 100px; object-fit: contain; filter: url('#catalogue-brand-white-background'); }
body.category-design .brand-catalogue-logo span { font-size: 30px; font-weight: 800; color: #102238; overflow-wrap: anywhere; }
body.category-design .brand-catalogue-logo [hidden] { display: none; }
@media (max-width: 720px) {
  body.category-design .product-catalog-page .product-listing-header.has-brand-catalogue-banner { min-height: 270px; padding: 24px 20px; flex-direction: column; align-items: stretch; gap: 16px; }
  body.category-design .has-brand-catalogue-banner .brand-catalogue-logos { flex: none; max-height: 210px; }
  body.category-design .brand-catalogue-logo { min-height: 95px; padding: 10px 24px; max-width: 260px; }
  body.category-design .brand-catalogue-logo img { height: 75px; }
}