/* theme-navy-yellow-cat-title-20261029-r3.css
   t138: visibly smaller category page titles (beat m1match-r2 span.base 32px
         and onecol/twocol clamp on .page-title span).
   Load LAST on catalog_category_view.xml after pdp-home r2. */

:root{
  --cj-navy:#2c4482;
  --cj-yellow:#FFCC03;
}

/* Wrapper stay centered */
html body.catalog-category-view .page-title-wrapper,
html body.catalog-category-view .category-view .page-title-wrapper,
html body.catalogsearch-result-index .page-title-wrapper{
  text-align:center!important;
}

/* Title + inner span.base — MUST set font-size on span (r2 missed this;
   catalog-list-m1match-r2 sets span.base to 32px!important) */
html body.catalog-category-view .page-title-wrapper .page-title,
html body.catalog-category-view .page-title-wrapper .page-title span,
html body.catalog-category-view .page-title-wrapper .page-title span.base,
html body.catalog-category-view .page-title,
html body.catalog-category-view .page-title span,
html body.catalog-category-view .page-title span.base,
html body.catalog-category-view .page-title .base,
html body.catalog-category-view h1.page-title,
html body.catalog-category-view h1.page-title span,
html body.catalog-category-view h1.page-title span.base,
html body.catalog-category-view .category-view .page-title,
html body.catalog-category-view .category-view .page-title span.base,
html body.catalogsearch-result-index .page-title,
html body.catalogsearch-result-index .page-title span.base{
  text-align:center!important;
  font-size:22px!important;
  line-height:1.25!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:var(--cj-navy)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border-left:0!important;
  padding-left:0!important;
  max-width:100%!important;
}

html body.catalog-category-view .page-title-wrapper .page-title span.base,
html body.catalog-category-view .page-title span.base,
html body.catalog-category-view h1.page-title span.base{
  display:inline-block!important;
  position:relative!important;
  padding-bottom:8px!important;
}

/* Yellow underline under title — centered */
html body.catalog-category-view .page-title span.base:after,
html body.catalog-category-view .page-title span.base::after,
html body.catalog-category-view .page-title-wrapper .page-title span:after,
html body.catalog-category-view .page-title-wrapper .page-title span::after,
html body.catalog-category-view .page-title-wrapper .page-title span.base:after,
html body.catalog-category-view .page-title-wrapper .page-title span.base::after,
html body.catalog-category-view h1.page-title span.base:after,
html body.catalog-category-view h1.page-title span.base::after{
  content:""!important;
  display:block!important;
  position:static!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:48px!important;
  height:3px!important;
  margin:8px auto 0!important;
  background:var(--cj-yellow)!important;
  background-color:var(--cj-yellow)!important;
  border-radius:2px!important;
  border:0!important;
}

@media (max-width:767px){
  html body.catalog-category-view .page-title-wrapper .page-title,
  html body.catalog-category-view .page-title-wrapper .page-title span,
  html body.catalog-category-view .page-title-wrapper .page-title span.base,
  html body.catalog-category-view .page-title,
  html body.catalog-category-view .page-title span,
  html body.catalog-category-view .page-title span.base,
  html body.catalog-category-view .page-title .base,
  html body.catalog-category-view h1.page-title,
  html body.catalog-category-view h1.page-title span,
  html body.catalog-category-view h1.page-title span.base,
  html body.catalog-category-view .category-view .page-title,
  html body.catalog-category-view .category-view .page-title span.base,
  html body.catalogsearch-result-index .page-title,
  html body.catalogsearch-result-index .page-title span.base{
    font-size:18px!important;
    line-height:1.3!important;
    font-weight:700!important;
  }
}

@media (min-width:768px) and (max-width:1100px){
  html body.catalog-category-view .page-title-wrapper .page-title,
  html body.catalog-category-view .page-title-wrapper .page-title span.base,
  html body.catalog-category-view .page-title,
  html body.catalog-category-view .page-title span.base,
  html body.catalog-category-view h1.page-title{
    font-size:20px!important;
  }
}