/* ================================================================
   LB-CAT1. CATEGORY HEADING BAND — port of dev's .mw-category-hero
   (MinimumWorld/retail Magento_Catalog/templates/category/hero.phtml +
   mwhyva-category-overrides.css "MW 2026-09-04 (Tom): category HEADER as
   a full-width BLUE band with white text"). Batch 3, 2026-10.
   CSS-only on live's existing markup:
     main.page-main > .main-heading > .page-title-wrapper > h1#page-title-heading > span.base
   Dev values: band #35599f, min-height clamp(200px,30vw,300px), content
   centred (flex column), padding 16/4 (<1280) and 48 (>=1280), margin-bottom
   18px; h1 Plus Jakarta Sans 800, clamp(32px,3.6vw,46px)/1.02, -0.025em,
   white. Description stays hidden (dev hides toggle + body).
   Specificity: mw-cms.css (loaded later, in the footer) pins h1.page-title
   + .base colour/font with 10 forged ids + !important, so every rule here
   carries 12 forged ids (:not(#mwch) matches every element; no backslashes).
   Full-bleed via box-shadow spread + clip-path (same technique as live's CMS
   .mw-page-hero band) — no 100vw, so no horizontal scroll.
   Trade stores do not load skin.css, so they keep today's heading.
   ================================================================ */

/* band butts against the header like dev (live main has 10px margin-top,
   plus 10px padding-top at >=1024) */
body.catalog-category-view:not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch) .page-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* the band (products.phtml prints an inline .main-heading{display:none} on
   parent categories; the merged theme CSS already forces display:block —
   this keeps it visible as a flex box) */
body.catalog-category-view:not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch) .main-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 200px !important;
  min-height: clamp(200px, 30vw, 300px) !important;
  margin: 0 0 18px !important;
  padding: 16px 0 4px !important;
  background: #35599f !important;
  box-shadow: 0 0 0 100vmax #35599f !important;
  -webkit-clip-path: inset(0 -100vmax) !important;
  clip-path: inset(0 -100vmax) !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
}
body.catalog-category-view:not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch) .main-heading .page-title-wrapper {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  background: transparent !important;
  border: 0 !important;
}
body.catalog-category-view:not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch) .main-heading h1.page-title {
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  font-size: clamp(32px, 3.6vw, 46px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
  text-align: center !important;
  text-transform: none !important;
  cursor: default !important;
  background: transparent !important;
  border: 0 !important;
}
body.catalog-category-view:not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch) .main-heading h1.page-title .base {
  font: inherit !important;
  letter-spacing: inherit !important;
  color: #fff !important;
  cursor: default !important;
}
/* legacy description-toggle arrow on the title */
body.catalog-category-view:not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch) .main-heading h1.page-title .base:after {
  display: none !important;
}
/* description: dev hides it (Tom 2026-09-04). Live hides .category-view by
   default but a click on the title slideToggles it open — lock the
   description/image section shut (!important beats jQuery's inline display;
   only the legacy section is targeted so the .category-view container stays
   usable for other content). Text stays in the HTML. */
body.catalog-category-view:not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch) .category-view .dollshouse-section {
  display: none !important;
}
@media (min-width: 1280px) {
  body.catalog-category-view:not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch) .main-heading {
    padding: 48px 0 !important;
  }
  body.catalog-category-view:not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch):not(#mwch) .main-heading h1.page-title {
    margin-bottom: 8px !important;
  }
}

/* MW 2026-10-15 (Tom): mobile/tablet toolbar - the Filter button matches the Sort By select
   (font, size, colour, border, radius, height). */
@media (max-width:1023px){
html body:not(#mwtb):not(#mwtb):not(#mwtb):not(#mwtb):not(#mwtb):not(#mwtb) .toolbar-products .filter-new{display:flex!important;align-items:center!important;justify-content:center!important;height:44px!important;min-height:44px!important;padding:0 15px!important;box-sizing:border-box!important;background:#fff!important;border:1px solid #cfd9eb!important;border-radius:12px!important;box-shadow:none!important;cursor:pointer!important}
html body:not(#mwtb):not(#mwtb):not(#mwtb):not(#mwtb):not(#mwtb):not(#mwtb) .toolbar-products .filter-new strong{display:block!important;padding:0!important;margin:0!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;font-size:16px!important;font-weight:400!important;line-height:1.2!important;letter-spacing:normal!important;text-transform:none!important;color:#1d1d1f!important}
}