/* cc-b2b-overrides.css — CrackersCompany B2B, Tim 14.09.2026.
   Alle Owner-Korrekturen seit 13.09. (Abstaende, Hero, Videos). Wird in layout/footer.tpl als LETZTES Stylesheet geladen,
   damit die von JTL automatisch eingebundene (und proxy-gecachte) Kopie von custom.css nichts mehr ueberschreibt.
   Rollback: Link in layout/footer.tpl entfernen. */
/* CC-COMPACT-20260913 — Platzverschwendung reduzieren (Owner-Auftrag 13.09.). Rollback: diesen Block entfernen. Gleiche Spezifitaet wie die Basisregeln, gewinnt durch Reihenfolge. */
.cc-b2b-section { padding: clamp(2rem, 3.5vw, 3rem) 0; }
.cc-b2b-section--products { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cc-b2b-catalogue { padding: clamp(2rem, 3.5vw, 3rem) 0; }
.cc-b2b-section--gallery + .cc-b2b-catalogue { padding-top: clamp(2rem, 3.5vw, 3rem); }
.cc-b2b-hero__inner { padding-block: clamp(2rem, 3.5vw, 3rem); }
.cc-b2b-taste-grid { margin-top: 1.5rem; }
.cc-b2b-home-product-grid { gap: clamp(1rem, 1.6vw, 1.5rem); margin-top: 1.25rem; }
.cc-b2b-home-product-grid__more { margin-top: 1.25rem; }
.cc-b2b-facts-grid { margin-top: 1.5rem; }
.cc-b2b-section--formats .cc-b2b-actions { margin-top: 1.25rem; }
/* Kategorieseiten */
#product-list.layout-gallery { row-gap: 1rem; }
.cc-b2b-product-card__body { min-height: 0; padding-top: .45rem; }
.cc-b2b-product-card__media { overflow: hidden; }
.cc-b2b-product-card__media .cc-b2b-product-card__image { transform: scale(1.22); transform-origin: 50% 58%; }
.cc-b2b-product-card:hover .cc-b2b-product-card__media .cc-b2b-product-card__image { transform: scale(1.27); }
.cc-b2b-catalog-video { margin: .75rem 0 1.25rem; }
.cc-b2b-catalogue-masthead { margin: .35rem 0 1rem; }
.cc-b2b-category-editorial { margin-top: 2.5rem; padding: 1.25rem 0; }

/* CC-HERO-VIDEO-20260913 — Hero als Video (Owner-Auftrag 13.09.) */
.cc-b2b-hero__video { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cc-b2b-hero__ai-note { position: absolute; right: 1rem; bottom: .55rem; z-index: 1; margin: 0; color: rgba(255, 255, 255, .72); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }

/* CC-COMPACT-2-20260914 — gemessen im Owner-Chrome (1920 px): Seitenrahmen 64 px, Karten-Unterrand 64 px, Video-/Intro-Block 64 px, Listenkopf 32/40 px. Rollback: Block entfernen. */
#content-wrapper { padding-top: 1rem !important; }
.breadcrumb-wrapper { margin-bottom: .5rem !important; }
.cc-b2b-catalog-video { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: .5rem 0 1rem !important; }
.cc-b2b-catalog-video__media { width: 100% !important; }
.cc-b2b-catalog-video__cta { margin-top: .75rem !important; }
.cc-b2b-catalog-intro { padding: .25rem 0 !important; margin: .75rem auto .25rem !important; }
.cc-b2b-catalogue-masthead { margin: .35rem 0 .75rem !important; }
.cc-product-filter-hub { margin: .5rem 0 .75rem !important; }
.productlist-page-nav-header { margin: .5rem 0 .5rem !important; }
hr.productlist-page-nav-bottom { margin: .5rem 0 1rem !important; }
#product-list > .product-wrapper { margin-bottom: 1rem !important; }
#product-list.layout-gallery { row-gap: .5rem !important; }
#content { padding-bottom: 1.5rem !important; }
.cc-b2b-category-editorial { margin-top: 1.5rem !important; padding: 1rem 0 !important; }

/* CC-COMPACT-3-20260914 — Listenkopf (Klasse endet auf -header-m) */
.productlist-page-nav-header-m, .productlist-page-nav { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.productlist-page-nav .displayoptions, .productlist-page-nav .productlist-pagination { margin-top: .25rem !important; }

/* CC-COMPACT-4-20260914 — Startseite: .cc-b2b-home hatte margin-top -4rem gegen das alte 4rem-Polster; mit 1rem Polster rutscht der Block ins Header-Float (Logo) und wird nach rechts verdraengt. */
@media (min-width: 992px) { .cc-b2b-home { margin-top: -1rem !important; } }

/* CC-HERO-2-20260914 — Hero wie die Kategorieclips: Rasterbreite, flach (max. 440 px), 16:9-artig */
@media (min-width: 992px) {
  .cc-b2b-home .cc-b2b-hero { width: min(100% - 2rem, 1554px) !important; min-height: 0 !important; height: clamp(300px, 23vw, 440px) !important; margin: .75rem auto 0 !important; }
  .cc-b2b-home .cc-b2b-hero__inner { min-height: 0 !important; height: 100% !important; padding-block: 1.25rem !important; }
  .cc-b2b-home .cc-b2b-hero .cc-b2b-title { font-size: clamp(1.6rem, 2vw, 2rem) !important; margin-bottom: .5rem !important; }
  .cc-b2b-home .cc-b2b-hero .cc-b2b-lead { font-size: .8rem !important; }
  .cc-b2b-home .cc-b2b-hero .cc-b2b-actions { margin-top: .75rem !important; }
  .cc-b2b-home .cc-b2b-hero__proof { margin-top: .75rem !important; font-size: .7rem !important; }
}

/* CC-HERO-3-20260914 — Owner: volle Breite, aber flach */
@media (min-width: 992px) { .cc-b2b-home .cc-b2b-hero { width: 100% !important; max-width: none !important; margin: 0 !important; height: clamp(300px, 23vw, 440px) !important; } }

/* CC-TASTE-6-20260914 — Genusswelten ohne Käsecracker: sechs Karten */
@media (min-width: 768px) { .cc-b2b-taste-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }

/* CC-VIDEO-FULL-20260914 — Kategorie-Videos Kante zu Kante direkt unter dem Header (Owner, DonSnacks-Vorbild) */
@media (min-width: 992px) {
  body { overflow-x: clip; }
  #content-wrapper:has(.cc-b2b-catalog-video) { padding-top: 0 !important; }
  #content-wrapper:has(.cc-b2b-catalog-video) .breadcrumb-container { display: none !important; }
  .cc-b2b-catalog-video { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin: 0 0 0 calc(50% - 50vw) !important; padding: 0 !important; }
  .cc-b2b-catalog-video__media { width: 100% !important; height: clamp(300px, 23vw, 440px) !important; aspect-ratio: auto !important; }
  .cc-b2b-catalog-video__cta { display: none !important; }
  .cc-b2b-catalog-video + .cc-b2b-category-strip--catalogue, .cc-b2b-category-strip--catalogue { margin-top: 0 !important; }
}

/* CC-VIDEO-FULL-2-20260914 — leerer div.title (24 px Unterrand) kollabierte nach oben: 24 px Luecke unter dem Header */
@media (min-width: 992px) {
  #content-wrapper:has(.cc-b2b-catalog-video) #result-wrapper > .title { margin: 0 !important; padding: 0 !important; }
  #content-wrapper:has(.cc-b2b-catalog-video) #result-wrapper { padding-top: 0 !important; }
}

/* CC-NIGHTCHECK-20260914 — Gesamtcheck 03:10: (1) Kategorieleiste passt bei 1200–1600 px nicht in eine Zeile (Scrollbalken, letzter Eintrag abgeschnitten); (2) Bestseller-Slider zeigt Format-Varianten mit Strichzeichnungs-Bildern (Wawi) — Varianten ausgeblendet, echte Artikel bleiben */
@media (min-width: 992px) {
  .cc-b2b-category-strip--catalogue .cc-b2b-category-strip__inner { grid-auto-columns: minmax(0, 1fr) !important; overflow-x: hidden !important; }
  .cc-b2b-category-strip--catalogue .cc-b2b-category-strip__inner > li > a { white-space: normal !important; font-size: clamp(.52rem, .68vw, .68rem) !important; padding: .5rem .3rem !important; line-height: 1.15 !important; text-align: center !important; }
}
#slider-bestseller-products .slick-slide:has(img[src*="-gle_"]), #slider-bestseller-products .slick-slide:has(img[src*="-glr_"]), #slider-bestseller-products .slick-slide:has(img[src*="-glq_"]), #slider-bestseller-products .slick-slide:has(img[src*="-box_"]), #slider-bestseller-products .slick-slide:has(img[src*="-ccs_"]), #slider-bestseller-products .slick-slide:has(img[src*="-ccl_"]), #slider-bestseller-products .slick-slide:has(img[src*="-zip_"]), #slider-bestseller-products .slick-slide:has(img[src*="-blk_"]),
#slider-bestseller-products .product-wrapper:has(img[src*="-gle_"]), #slider-bestseller-products .product-wrapper:has(img[src*="-glr_"]), #slider-bestseller-products .product-wrapper:has(img[src*="-glq_"]), #slider-bestseller-products .product-wrapper:has(img[src*="-box_"]), #slider-bestseller-products .product-wrapper:has(img[src*="-ccs_"]), #slider-bestseller-products .product-wrapper:has(img[src*="-ccl_"]), #slider-bestseller-products .product-wrapper:has(img[src*="-zip_"]), #slider-bestseller-products .product-wrapper:has(img[src*="-blk_"]) { display: none !important; }
