:root{
  /* Brand tokens */
  --illini-navy: #13294B;
  --illini-orange: #FF5F05;
  --gray-100: #f4f4f4;          /* pale gray */
  --gray-200: #ededed;          /* data rows / panels */
  --gray-300: #C8C6C7;          /* brand-approved gray */
  --text-supporting-blue: #1D58A7;

  /* Typography token */
  --brand-font-sans: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Bootstrap bridges (map BS variables to your tokens) */
  --bs-primary: var(--illini-navy);
  --bs-body-font-family: var(--brand-font-sans);
  --bs-font-sans-serif: var(--brand-font-sans); /* helps some BS components pick it up */
}


/* SHOP-ONLY PATCHES (small, scoped) ---------------------------------- */


/* Neutralize legacy floats/widths for DataList → Bootstrap card grid */
#product-list .SpecialItem,
#product-list .DetailLink,
#product-list .Image,
#product-list .Price,
#product-list .CallForPrice{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make listing images fluid and consistent inside cards */
#product-list .card-img-top{
  width: 100% !important;
  height: 180px !important;
  /* Set your preferred fixed height */
  display: block;
  object-fit: contain;
  background: #fff;
  padding: .25rem;
}

/* Align list-group items with card edge */
.card .list-group-item{
  border: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Ensure visible focus for brand buttons */
.btn-brand:focus-visible{
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Breadcrumbs / toolbar spacing */
.shop-toolbar,
.breadcrumbs{
  margin-bottom: 1rem;
}

/* Product list grid and columns */
#product-list,
#product-list.row{
  display: flex !important;
  flex-wrap: wrap !important;
  margin: -0.75rem;
  /* gutters */
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}

#product-list > [class^="col-"],
#product-list > [class*=" col-"]{
  float: none !important;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  width: auto !important;
}

#product-list > *{
  padding: 0.75rem;
  width: 100%;
  /* 1-up by default */
  float: none !important;
}

@media (min-width: 576px){
#product-list > *{
  width: 50%;
}

#product-list > .col-12.col-sm-6.col-lg-4{
  width: 50% !important;
}


}

@media (min-width: 992px){
#product-list > *{
  width: 33.3333%;
}

#product-list > .col-12.col-sm-6.col-lg-4{
  width: 33.3333% !important;
}

#product-list .card-text{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


}

/* Category grid specific columns */
#product-list > .col-12.col-sm-6.col-lg-4{
  padding: 0.75rem;
  flex: 0 0 auto !important;
  width: 100% !important;
}

/* Equal-height cards + bottom-pinned CTA */
#product-list .card{
  height: 100%;
}

#product-list .card-body{
  display: flex;
  flex-direction: column;
}

#product-list .card-body .btn{
  margin-top: auto;
}

/* Unlock legacy wrappers that hard-code widths */
#Container,
#ContentBand,
#Content,
#PageContent,
#MainContent,
#CenterColumn,
.content,
#FullWrapper,
#PageWrapper,
#WebStoreWrapper,
body.shop-scope #Container,
body.shop-scope #ContentBand,
body.shop-scope #PageContent,
body.shop-scope #MainContent,
body.shop-scope #CenterColumn,
body.shop-scope .content,
body.shop-scope #FullWrapper,
body.shop-scope #PageWrapper,
body.shop-scope #WebStoreWrapper{
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Make sure the outer shell can fill the viewport */
html, body, form#aspnetForm{
  width: 100% !important;
  padding: 0 !important;
}

/* Cap readable line length like Home (1320px on xl+) */
#ContentBand .content,
#PageContent,
#MainContent,
main.container-xxl,
body.shop-scope main.container-xxl{
  max-width: 1320px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-inline: 1rem !important;
}

/* Sidebar + main spacing */
#LeftSidebar{
  margin-right: 1rem;
}

@media (max-width: 991.98px){
#LeftSidebar{
  margin-right: 0;
  margin-bottom: 1rem;
}

body.shop-scope #ContentBand > .content{
  display: block;
}

body.shop-scope #LeftSidebar{
  margin-bottom: 1rem;
}

body.shop-scope #LeftColumn{
  max-width: none;
  margin-bottom: 1rem;
}


}

/* Neutralize hard-coded table widths in product list */
#product-list table[width],
#product-list td[width]{
  width: auto !important;
}

/* Remove old theme's page margin/padding */
body.Body{
  margin: 0 !important;
  padding: 0 !important;
}

form#aspnetForm,
form#aspnetForm > div:first-child{
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide legacy banner chunks */
#WebStoreBanner,
#HeaderRegion,
#Stripe,
#LegacyBannerCompat,
body.shop-scope #WebStoreBanner,
body.shop-scope #HeaderRegion,
body.shop-scope #Stripe{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Keep a sane inner gutter on the real content area */
main.container-xxl{
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1rem !important;
}

/* Only use if a stubborn wrapper keeps clipping the header width */
.bg-illini{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* Remove the old category footer slab on Shop pages and stray <br> */
body.shop-scope .footerMenu > *:not(#wsFooter),
body.shop-scope .footerMenu *,
body.shop-scope .footerMenuColumn,
body.shop-scope .footerMenuColumn *,
body.shop-scope .footerMenu ~ br[clear]{
  display: none !important;
}

body.shop-scope .footerMenu{
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  display: block !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  clear: both !important;
}

/* Modern two-column shell: keep the left sidebar, let content flex */
body.shop-scope #ContentBand > .content{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100% !important;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1rem !important;
}

/* Left column: fixed width on desktop */
body.shop-scope #ContentBand > .content #LeftColumn{
  flex: 0 0 260px;
  max-width: 260px;
}

/* Middle/Main area: fill the rest */
body.shop-scope #ContentBand > .content > :not(#LeftColumn){
  flex: 1 1 0;
  min-width: 0;
}

/* Neutralize old layout rules that force wrapping */
body.shop-scope #LeftColumn,
body.shop-scope #MiddleColumn,
body.shop-scope #CenterColumn,
body.shop-scope #MainArea,
body.shop-scope #CategorySpecificMessage,
body.shop-scope #ContentBand > .content > div{
  float: none !important;
  clear: none !important;
  width: auto !important;
}

/* Responsive grid for Bootstrap columns */
.row,
#product-list{
  display: flex !important;
  flex-wrap: wrap !important;
}

[class*="col-"]{
  flex: 1 1 auto !important;
  max-width: 100% !important;
}

/* Remove legacy float-based layout */
#LeftColumn,
#MiddleColumn{
  float: none !important;
  width: 100% !important;
  display: block !important;
}

/* Ensure images scale properly */
img{
  max-width: 100% !important;
  height: auto !important;
}

/* Override legacy container padding/margins 
.container,
.container-xxl{
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  margin: 0 auto !important;
}*/

/* Fix legacy card layout spacing */
.card{
  margin-bottom: 1rem !important;
}

/* Ensure responsive typography */
body,
h1, h2, h3, h4, h5, h6,
p{
  font-size: 1rem;
  line-height: 1.5;
}



/* Navbar collapse fixes (Bootstrap-compatible) */
@media (min-width: 576px){
.navbar-expand-sm .navbar-collapse{
  display: flex !important;
  width: auto !important;
  max-width: none !important;
  flex-basis: auto !important;
}


}

@media (max-width: 575.98px){
.navbar-expand-sm .navbar-collapse:not(.show){
  display: none !important;
}

.navbar-expand-sm .navbar-collapse.show{
  display: block !important;
}


}

/* Make sure the nav list can wrap if needed */
body.shop-scope #wsNav .navbar-nav{
  flex-wrap: wrap;
}

/* Ensure the toggler icon shows */
body.shop-scope .navbar-light .navbar-toggler{
  border-color: rgba(0,0,0,.1);
}

body.shop-scope .navbar-light .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,.55)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

#LegacyBannerCompat{
  display: none !important;
}

/* Simple list breathing room */
.list-group-item .fw-semibold{
  line-height: 1.35;
}

.list-group-item .text-muted{
  line-height: 1.5;
}



/* Keep readable line length on wide screens */
@media (min-width: 992px){
#ContentBand .content .list-group{
  max-width: 58rem;
}


}


/* ---- Category landing: force a clean text list (no thumbnails) ---- */
/* catch common containers used by ZNode/legacy category outputs */
#ContentBand .CategoryList,
#ContentBand #CategoryList,
#ContentBand .category-list,
#ContentBand .categoryGrid,
#ContentBand table.categorylist{
  display: block;
  max-width: 60rem;
  margin: 1.25rem auto;
  padding: 0;
}

/* hide images/thumbnail columns anywhere in category blocks */
#ContentBand .CategoryList img,
#ContentBand .categoryGrid img,
#ContentBand .CategoryThumb,
#ContentBand .CategoryImage,
#ContentBand table.categorylist img,
#ContentBand table.categorylist td:nth-child(1) img{
  display: none !important;
}

/* normalize each row as a “list group” item */
#ContentBand .CategoryItem,
#ContentBand .category,
#ContentBand .cat,
#ContentBand table.categorylist tr,
#ContentBand .categoryGrid > div{
  list-style: none;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .5rem;
  padding: .75rem 1rem;
  margin: .5rem 0;
  display: block;
}

/* anchor + optional description */
#ContentBand .CategoryItem > a,
#ContentBand .category > a,
#ContentBand .cat > a,
#ContentBand table.categorylist a{
  font-weight: 600;
  text-decoration: none;
}

#ContentBand .CategoryItem > a:hover,
#ContentBand table.categorylist a:hover{
  text-decoration: underline;
}

#ContentBand .CategoryDesc,
#ContentBand .category .desc,
#ContentBand .cat .desc{
  color: #555;
  display: block;
  margin-top: .25rem;
}

/* nuke legacy floats that force wrapping */
#ContentBand .CategoryList [style*="float"],
#ContentBand .CategoryItem [style*="float"]{
  float: none !important;
}

/* ===== Shop Landing polish (drop at END of overrides-shop.css) ===== */

/* 1) Full-bleed header + navbar on wide screens (no boxed look) */
.ws-banner,
nav.navbar.navbar-light.bg-white{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  /* background spans full width */;
}

html, body{
  overflow-x: hidden;
}

/* prevent tiny horizontal scroll */

/* 2) White text for brand + “Shop Personal/Unit” buttons */
.ws-banner .navbar-brand{
  color: #fff !important;
}

.ws-banner .navbar-brand:hover,
.ws-banner .navbar-brand:focus{
  color: #fff !important;
  text-decoration: underline;
}

.ws-banner .btn-outline-light,
.ws-banner .btn-outline-light:visited{
  color: #fff !important;
  border-color: #fff !important;
}

.ws-banner .btn-outline-light:hover,
.ws-banner .btn-outline-light:focus{
  background: #fff !important;
  color: var(--illini-navy, #13294B) !important;
  /* Illini navy text on hover */;
}

/* 3) Left column box width + cleanup */
body.shop-scope #ContentBand > .content{
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

body.shop-scope #LeftSidebar{
  /* fix to a sane width on desktop */
  flex: 0 0 260px;
  /*max-width: 260px;*/
}

body.shop-scope #LeftSidebar .dataBlock{
  width: 100%;
  margin: 0 0 1rem 0;
  /* remove huge side margins */
  border-radius: .5rem;
  border: 1px solid rgba(19,41,75,.35);
}

body.shop-scope #LeftSidebar .dataBlock h4{
  font-size: 1rem;
  line-height: 1.25;
  padding: .5rem .75rem;
  background: var(--illini-navy, #fff);
  /* matches header */
  color: #fff;
}

@media (max-width: 991.98px){
body.shop-scope #LeftSidebar{
  flex-basis: 100%;
  max-width: none;
}


}

/* ===== Fix the sibling layout: do NOT clear the float sidebar ===== */
body.shop-scope #ContentBand,
body.shop-scope #ContentBand .content,
body.shop-scope #MiddleColumn{
  clear: none !important;
}

/* Ensure the right-side container forms its own block formatting context,
   so it won't wrap oddly around the float and margins behave predictably. */
body.shop-scope #ContentBand{
  overflow: visible !important;
  /* display: flow-root;*/
  margin-left: 0 !important;
  /* we’re centering the inner track instead */
  padding-top: 0 !important;
}

/* Keep our inner flex track centered and on one line */
body.shop-scope #ContentBand .content{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 24px !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Left rail inside .content (legacy #LeftColumn) stays hidden if present */
body.shop-scope #ContentBand .content #LeftColumn{
  display: none !important;
}

/* Main column flexes */
body.shop-scope #ContentBand .content > #MiddleColumn{
  flex: 1 1 0% !important; /* key change: basis 0 so it expands */
  min-width: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
  float: none !important;
  position: static !important;
  top: auto !important;
}

/* First child in main column must start flush */
body.shop-scope #MiddleColumn > *:first-child,
body.shop-scope #MiddleColumn > *:first-child > *:first-child{
  margin-top: 0 !important;
}

/* Nuke the dropdown slab completely (it was still in flow and 750px wide) */
body.shop-scope #ProductDropDown,
body.shop-scope #ProductDropDown .ProductList{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Hide any generic clearers that might reintroduce the gap */
body.shop-scope #ContentBand > br[clear],
body.shop-scope #ContentBand .content > br[clear],
body.shop-scope #ContentBand .content > .clear,
body.shop-scope #ContentBand .content > .clearfix,
body.shop-scope #ContentBand .content > [style*="clear"]{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}



/* Mobile stack */
@media (max-width: 991.98px){
body.shop-scope #LeftSidebar{
  float: none !important;
  width: auto !important;
}

body.shop-scope #ContentBand .content{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}


}

/* Two-column shell at the parent level (sidebar + main) */
#ShopShell{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Sidebar fixed */
#ShopShell #LeftSidebar{
  flex: 0 0 260px;
 /* width: 260px;*/
}

/* Main flexible */
#ShopShell #ContentBand{
  flex: 1 1 auto;
  min-width: 0;
}

/* Kill the legacy <br clear> and any clearers inside the shell */
#ShopShell > br[clear], 
#ShopShell .clear, 
#ShopShell .clearfix, 
#ShopShell [style*="clear"]{
  display: none !important;
}

/* Hide the dropdown slab completely so it can’t influence width */
#ProductDropDown, 
#ProductDropDown .ProductList{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}



/* Stack on mobile */
@media (max-width: 991.98px){
#ShopShell{
  display: block;
  max-width: 100%;
}

#ShopShell #LeftSidebar{
  width: auto;
}
	
}
	
/* Fix awkward 900–1200 band: stack sidebar + content */
@media (min-width: 900px) and (max-width: 1199.98px) {
  #ShopShell {
    display: block !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  #ShopShell #LeftSidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 16px 0 !important;
  }

  #ShopShell #ContentBand {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Category pages: hide the legacy hidden header block */
.CategoryDetail .HiddenHeader {
  display: none !important;
}


/* === Breathing room under navbar === */
body.shop-scope #ShopShell{
  margin-top: 1rem !important;
}

body.shop-scope main.container-xxl{
  margin-top: 1rem !important;
}

/* === Make explainer text smaller/cleaner === */
#shop-which{
  font-size: 1.05rem;
  margin-bottom: .25rem;
}

[aria-labelledby="shop-which"] p{
  font-size: .95rem;
  color: #333;
}

/* Category landing: tighten "Which Shop" block on small screens */
@media (max-width: 575.98px){
  #MiddleColumn section[aria-labelledby="shop-which"]{
    margin-bottom: .75rem !important;
  }

  #MiddleColumn #shop-which{
    font-size: 1.05rem !important; /* smaller than Bootstrap h5 */
    margin-bottom: .5rem !important;
  }

  #MiddleColumn section[aria-labelledby="shop-which"] p{
    font-size: .875rem;   /* slightly smaller than body */
    line-height: 1.35;
    margin-bottom: .35rem !important;
  }
}


/* === Match Home header sizing (blue band + buttons) === */
.ws-banner{
  padding-block: .6rem !important;
}

/*.ws-banner .navbar-brand{
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}*/

.ws-banner .btn,
.ws-banner .btn-sm{
  padding: .38rem .65rem;
  font-size: .9rem;
  line-height: 1.2;
}

/* Footer: robust full-bleed (no left spill, no horizontal scroll) */
body.shop-scope #Footer,
body.shop-scope .footerMenu > #Footer{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  clear: both !important;
  /* don’t sit under floats */;
}

/* If a wrapper before/around #Footer is capping width, uncap it */
body.shop-scope .footerMenu,
body.shop-scope .footerMenu > div:first-child{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Keep the *inner* content centered like the Home page */
body.shop-scope #Footer .container,
body.shop-scope #wsFooter .container,
body.shop-scope #Footer .row{
  max-width: 1320px !important;
  margin-inline: auto !important;
  padding-inline: 1rem !important;
}

/* Defensive: kill any stray clears that can add phantom gaps */
body.shop-scope #Footer > br[clear],
body.shop-scope #Footer .clear,
body.shop-scope #Footer .clearfix{
  display: none !important;
}

/* === Desktop: neat two-column track centered === */
#ShopShell{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 1200px;
  margin-inline: auto;
}

#ShopShell > #LeftSidebar{
  flex: 0 0 260px;
  width: 260px;
}

#ShopShell > #ContentBand{
  flex: 1 1 auto;
  min-width: 0;
}

/* Hide stray clears that create gaps */
#ShopShell > br[clear], #ContentBand .content > br[clear]{
  display: none !important;
}



/* === Mobile: put the MAIN FIRST, sidebar SECOND === */
@media (max-width: 991.98px){
#ShopShell{
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
}

#ShopShell > #ContentBand{
  order: 0;
  width: 100% !important;
}

#ShopShell > #LeftSidebar{
  order: 1;
  width: 100% !important;
}


}

/* (keeps your earlier fixes intact) */


/* Support link tiles */
.support-links .support-tile{
  background: #f8f9fa;
  border: 1px solid rgba(0,0,0,.08);
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.support-links .support-tile:hover,
.support-links .support-tile:focus{
  text-decoration: none;
  background: #fff;
  border-color: rgba(0,0,0,.15);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.support-links .fw-semibold{
  line-height: 1.25;
}

.support-links .text-muted{
  line-height: 1.4;
}

/* Bootstrap should use Source Sans Pro everywhere by default */
:root{
  --ws-font-sans: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-font-sans-serif: var(--ws-font-sans) !important;
}

/* past/* ---- Readability tier: larger body text on big desktops ---- */
:root { --ws-body-scale: 1; }                 /* base = 16px */
body { font-size: calc(1rem * var(--ws-body-scale)); line-height: 1.6; }

body{
  font-family: var(--ws-font-sans) !important;
}

/* Brand wordmark (“WebStore”) uses Montserrat */
.ws-banner .navbar-brand,
.ws-logo{
  font-family: "Montserrat", var(--ws-font-sans) !important;
 /*font-weight: 600 !important;
  letter-spacing: .2px;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  white-space: nowrap;*/
}

/* match Home sizing and color */
.ws-banner .campus-links .nav-link{
  color: #fff !important;
  font-size: 1.1rem !important;
  line-height: 1.35;
  padding: 0 .5rem !important;
  opacity: .9;
}

.ws-banner .campus-links .nav-link:hover,
.ws-banner .campus-links .nav-link:focus{
  opacity: 1;
  text-decoration: underline;
}

/* (Optional) ensure buttons/menus inherit body font */
.navbar, .btn, .dropdown-menu{
  font-family: var(--ws-font-sans) !important;
}

/* Landing-only card layout (root category zcid=107) */
body.shop-scope.shop-root #product-list .card{
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 1rem;
  align-items: start;
}

body.shop-scope.shop-root #product-list .card-img-top{
  grid-column: 1;
  grid-row: 1;
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
  margin: .75rem 0 .75rem .75rem !important;
  background: transparent;
  padding: 0 !important;
}

body.shop-scope.shop-root #product-list .card-body{
  grid-column: 2;
  grid-row: 1;
  padding: .75rem .75rem .75rem 0 !important;
}

/* White CTA instead of orange */
body.shop-scope.shop-root #product-list .btn-brand{
  background: #fff !important;
  color: var(--illini-navy, #13294B) !important;
  border: 1px solid rgba(0,0,0,.15) !important;
}

body.shop-scope.shop-root #product-list .btn-brand:hover,
body.shop-scope.shop-root #product-list .btn-brand:focus{
  background: #f8f9fa !important;
  border-color: rgba(0,0,0,.25) !important;
  color: var(--illini-navy, #13294B) !important;
}

/* kill both top/bottom margins so nothing collapses ahead of the banner */
body.shop-scope main#content{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* if anything still adds a spacer line, nuke stray clears just above content */
#ShopShell > br[clear], #ContentBand > br[clear]{
  display: none !important;
}

/* Header CTAs: bolder, a hair larger, tighter padding */
.ws-banner .btn-outline-light{
  font-weight: 700 !important;
  font-size: .95rem !important;
  /* bump if you want: 1rem */
  line-height: 1.2 !important;
  padding: .42rem .70rem !important;
  border-width: 1.5px !important;
}

/* Left-align the nav list even if classes center it */
.ws-banner .navbar-nav{
  margin-left: 0 !important;
  margin-right: auto !important;
  /* push search to the right */
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Size like Home */
.ws-banner .navbar-nav .nav-link{
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  /* ~18px */
  padding: .25rem .75rem !important;
}

/* Wider search bar on large screens, still responsive */
.ws-banner [role="search"] .form-control{
  width: clamp(280px, 32vw, 750px) !important;
}

/* Sidebar title styling */
#LeftSidebar .dataBlock h4{
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  /* try 1.2rem if you want more pop */
  letter-spacing: .2px;
  padding: .6rem .75rem !important;
}

body.shop-scope main#content{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ws-banner + br[clear]{
  display: none !important;
}




/* ——— NAV: make search wider and stop centering by mx-auto ——— */

/* On lg+ screens, park the search to the right of the nav (not centered)
   and give it a healthy width like Home */
@media (min-width: 992px){
.ws-banner [role="search"]{
  margin-left: 1rem !important;
  /* was ms-sm-3;
  keep a little gap */
    margin-right: 0 !important;
  /* kill mx-auto centering */
    flex: 0 0 auto !important;
  /* stop flex from squishing it */;
}

/* Actual input width 
  #ws-search-q{
  width: 750px !important;
}*/

  /* match Home; tweak if needed */

}



/* On smaller screens, make the search reasonable but fluid 
@media (max-width: 991.98px){
#ws-search-q{
  width: clamp(240px, 50vw, 360px) !important;
}*/


}

/* Ensure the nav items stay left and the search pushes to the right */
.ws-banner .navbar-nav{
  margin-right: auto !important;
  /* nav left */
  justify-content: flex-start !important;
}




/* At desktop-wide sizes, let header content span the viewport */
@media (min-width: 1600px){
.ws-banner .container-xxl{
  max-width: 1320;
  padding-left: 4rem !important;
  /* nice gutter */
  padding-right: 4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-right: auto;
  margin-left: auto;
  /* logo far left, cluster far right */;
}


}

/* Keep the campus links + CTAs grouped on the right */
.ws-banner .campus-links{
  margin-left: auto !important;
}

.ws-banner .campus-links + div{
  margin-left: .75rem !important;
}

.bg-illini{
  background: 13294B !important;
  background-image: none !important;
  /* kill any subtle gradients */;
}

body.shop-scope #Footer,
body.shop-scope .ws-footer,
body.shop-scope #wsFooter{
  background: 13294B !important;
}

/* Flag the order page (script below adds 'page-order') */
body.shop-scope.page-order #ContentBand .content{
  gap: 24px !important;
}

/* Hide the legacy big title printed inside the ASCX (we use the H1 above) */
body.shop-scope.page-order #MiddleColumn #head{
  display: none !important;
}

/* Top info section: two columns on desktop */
body.shop-scope.page-order #MiddleColumn #top-section{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 767.98px){
body.shop-scope.page-order #MiddleColumn #top-section{
  grid-template-columns: 1fr;
}


}

/* Tables readable and full-width */
body.shop-scope.page-order #MiddleColumn table{
  width: 100% !important;
  border-collapse: collapse !important;
}

body.shop-scope.page-order #MiddleColumn th,
body.shop-scope.page-order #MiddleColumn td{
  padding: .6rem .75rem !important;
  vertical-align: top;
}

body.shop-scope.page-order #MiddleColumn th{
  background: var(--illini-navy, #13294B) !important;
  color: #fff !important;
  font-weight: 700;
}

/* Kill stray clears/spacers that add phantom gaps */
body.shop-scope.page-order #MiddleColumn > br[clear],
body.shop-scope.page-order #ContentBand .content > br[clear]{
  display: none !important;
}

/* Optional: buttons for downloads inside receipt look nicer */
body.shop-scope.page-order #MiddleColumn a.DownloadButton{
  display: inline-block;
  padding: .35rem .6rem;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .375rem;
  text-decoration: none;
}

/* Hide legacy mini-account strips in the main area */
body.shop-scope #MiddleColumn .myAccountHeader,
body.shop-scope #MiddleColumn .accountHeader,
body.shop-scope #MiddleColumn [id*="AccountHeader"],
body.shop-scope #MiddleColumn [id*="ShopBy"],
body.shop-scope #MiddleColumn [id*="AccountLinks"]{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  border: 0 !important;
}


/* ===== Ghost AccountMenu cleanup (descendant-aware, scoped to inner content) ===== */
/* Hide any server-injected AccountMenu that appears inside the page content track. */
body.shop-scope #ContentBand .content [id*="_MainContent_"][id*="AccountMenu"][id*="pnlAccountMenu"],
body.shop-scope #ContentBand .content [id*="_MainContent_"][id*="AccountMenu1"][id*="pnlAccountMenu"],
body.shop-scope #ContentBand .content [id*="_MainContent_"][id*="pn1AccountMenu"],
body.shop-scope #ContentBand .content #AccountMenu,
body.shop-scope #ContentBand .content .account-menu,
body.shop-scope #ContentBand .content [class*="AccountMenu"]{
  display: none !important;
  width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;
  overflow: hidden !important; position: absolute !important; visibility: hidden !important; opacity: 0 !important;
  clip: rect(0 0 0 0) !important; pointer-events: none !important;
}

/* Hide the inner/ghost LeftSidebar that appears inside the content track */
body.shop-scope #ContentBand .content #LeftSidebar{
  display: none !important;
}

/* Safety: kill empty stray panels anywhere inside the content track */
body.shop-scope #ContentBand .content div:empty{
  display: none !important;
}


/* Lock the intended two-column layout */
body.shop-scope #AccountMenu{
  flex: 0 0 260px !important;
  max-width: 260px !important;
  float: none !important;
  width: auto !important;
}

body.shop-scope #ContentContainer{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
}

/* Contain wide tables in the right column */
body.shop-scope #ContentContainer table[class*="AspNet-GridView"],
body.shop-scope #ContentContainer .AspNet-GridView,
body.shop-scope #ContentContainer table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
  box-sizing: border-box;
}

body.shop-scope #ContentContainer td,
body.shop-scope #ContentContainer th{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.shop-scope #ContentContainer .grid,
body.shop-scope #ContentContainer [id*="Grid"],
body.shop-scope #ContentContainer [class*="Grid"]{
  overflow-x: auto;
}

/* ===== Hide the in-content mini AccountMenu (keep the real left sidebar) ===== */
body.shop-scope #ContentBand .content > #AccountMenu{
  display: none !important;
}

/* (keep these from earlier if not present) */
body.shop-scope #AccountMenu{
  flex: 0 0 260px !important;
  max-width: 260px !important;
  float: none !important;
  width: auto !important;
}

/* ===== Order Grid – centering + header color + Download column fix ===== */

/* Header color + readable contrast */
body.shop-scope .AspNet-GridView > table.Grid thead tr.HeaderStyle{
  background: var(--illini-navy, #13294B) !important;
  /* Illini Blue */
  color: #fff !important;
}

/* Body background */
body.shop-scope .AspNet-GridView > table.Grid tbody td{
  background: #ededed;
}

/* ===== Restrict order-detail grid styles to order.aspx only ===== */

/* 0) Safety reset: undo our fixed layout on other pages just in case */
body.shop-scope .AspNet-GridView > table.Grid{
  table-layout: auto;
  /* the old behavior */;
}

/* 1) Order detail only (form action contains "order.aspx") */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid{
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
  box-sizing: border-box;
}

/* 2) Column widths — order.aspx only */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th:nth-child(1),
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(1){
  width: 12% !important;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th:nth-child(2),
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(2){
  width: 20% !important;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th:nth-child(3),
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(3){
  width: 12% !important;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th:nth-child(4),
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(4){
  width: 16% !important;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th:nth-child(5),
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5){
  width: 40% !important;
}

/* 3) Header/body alignment — order.aspx only */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid thead tr.HeaderStyle{
  background: var(--illini-navy, #13294B) !important;
  color: #fff !important;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th,
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td{
  padding: 12px 16px;
  box-sizing: border-box;
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid thead th{
  text-align: center !important;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid tbody td{
  vertical-align: top !important;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th:nth-child(1),
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(1){
  text-align: center !important;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th:nth-child(3),
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(3){
  text-align: right !important;
}

/* 4) Download column layout + buttons — order.aspx only */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5){
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5) > div{
  width: 100%;
  display: flex;
  align-items: center;
  gap: .4rem;
  justify-content: flex-start;
  padding: .35rem .5rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .375rem;
  background: #fff;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5) input.OrderHistoryDownload{
  background: none !important;
  text-indent: 0 !important;
  border: 0;
  padding: .375rem .5rem;
  border-radius: .375rem;
  background-color: var(--illini-navy, #13294B) !important;
  color: #fff !important;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5) input.OrderHistoryDownload:hover{
  filter: brightness(.95);
}

body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5) input.OrderHistoryDownload:focus{
  outline: 2px solid rgba(19,41,75,.35);
  outline-offset: 2px;
}

/* 5) Body background + instructions card — keep (already page-agnostic and harmless) */



/* 3) Ensure long text never breaks the layout */
body.shop-scope .AspNet-GridView > table.Grid th,
body.shop-scope .AspNet-GridView > table.Grid td{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Hover/focus states to feel Bootstrap-y */
body.shop-scope .AspNet-GridView > table.Grid td:nth-child(5) input.OrderHistoryDownload:hover{
  filter: brightness(0.95);
}

body.shop-scope .AspNet-GridView > table.Grid td:nth-child(5) input.OrderHistoryDownload:focus{
  outline: 2px solid rgba(13,110,253,.4);
  outline-offset: 2px;
}

/* ===== Order Grid – header/body alignment polish ===== */

/* Normalized padding so headers and cells line up */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th,
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td{
  padding: 12px 16px;
  /* adjust to taste */
  box-sizing: border-box;
}

/* 1) Header: center labels */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid thead th{
  text-align: center !important;
  vertical-align: middle !important;
  /* keeps tall rows looking tidy */;
}

/* 2) Body cells: top-align by default for readability */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid tbody td{
  vertical-align: top !important;
}

/* 3) Price column alignment (col 3) */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th:nth-child(3),
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(3){
  text-align: right !important;
  /* header + body aligned */;
}

/* 4) Download column layout (col 5): stack neatly, no odd wrapping */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5){
  display: flex;
  /* keep multiple links tidy */
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  text-align: left !important;
  /* prevent inherited centering/justification */;
}

/* Each download row gets a subtle card/divider */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5) > div{
  width: 100%;
  display: flex;
  align-items: center;
  gap: .4rem;
  justify-content: flex-start;
  padding: .35rem .5rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .375rem;
  background: #fff;
}

/* Tighten the caption text next to the button */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5) > div > span{
  line-height: 1.25;
}

/* Keep the column from collapsing into a toothpick */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th:nth-child(5),
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5){
  min-width: 180px;
  /* tweak if you want wider */;
}
 


/* Small-screen behavior (≈ 608px and below) */
@media (max-width: 608px){
/* Let content drive widths a bit more; gives Download column breathing room */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid{
  table-layout: auto !important;
}

/* Bias a little more width to Download if the table still obeys column widths */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid th:nth-child(5),
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5){
  width: 40% !important;
}

/* Make each download row occupy the whole cell width cleanly */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid td:nth-child(5) > div{
  width: 100%;
}


}

/* (kept from earlier) Header color */
body.shop-scope .AspNet-GridView > table.Grid thead tr.HeaderStyle{
  background: var(--illini-navy, #13294B) !important;
  /* Illini Blue */
  color: #fff !important;
}


/* ===== Additional Instructions panel styling ===== */

/* Whole container gets a subtle shadow and spacing from the table above */
body.shop-scope form[action*="order.aspx"] .additionalInstructions{
  margin-top: 1.5rem;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  border: 1px solid rgba(0,0,0,.1);
}

/* Title bar – Illini Blue background, white text */
body.shop-scope form[action*="order.aspx"] .additionalInstructions .additionalInstructions_title{
  background: var(--illini-navy, #13294B);
  color: #fff;
  font-weight: 700;
  padding: 12px 16px;
  font-size: 1.05rem;
  line-height: 1.3;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* Body – soft gray, roomy padding */
body.shop-scope form[action*="order.aspx"] .additionalInstructions .additionalInstructions_body{
  background: #ededed;
  /* new color */
  padding: 16px 20px;
  color: #000;
  line-height: 1.5;
}

/* Optional: style links to match brand and stand out */
body.shop-scope form[action*="order.aspx"] .additionalInstructions .additionalInstructions_body a{
  color: var(--illini-navy, #13294B);
  font-weight: 600;
  text-decoration: underline;
}

/* Optional: bold the “Quick Start” lead and give list items breathing room */
body.shop-scope form[action*="order.aspx"] .additionalInstructions .additionalInstructions_text > strong,
body.shop-scope .additionalInstructions .additionalInstructions_text > b{
  font-weight: 700;
}

body.shop-scope form[action*="order.aspx"] .additionalInstructions .additionalInstructions_text li{
  margin-bottom: .5rem;
}

/* ===== Account → Order History (account.aspx?mode=software) ===== */

/* Use fixed layout so percentage widths are respected */
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid{
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse;
  box-sizing: border-box;
}

/* Column widths (tune as needed) */
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th:nth-child(1),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(1){
  width: 15% !important;
}

/* Order# */

body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th:nth-child(2),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(2){
  width: 15% !important;
}

/* Order Date */

body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th:nth-child(3),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(3){
  width: 15% !important;
}

/* Status */

body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th:nth-child(4),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(4){
  width: 20% !important;
}

/* Purchaser */

body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th:nth-child(5),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(5){
  width: 12% !important;
}

/* Total Cost */

body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th:nth-child(6),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(6){
  width: 23% !important;
}

/* Product Name */

/* Header styling to match the detail grid */
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid thead tr.HeaderStyle{
  background: var(--illini-navy, #13294B) !important;
  color: #fff !important;
}

body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th,
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td{
  padding: 12px 16px;
  box-sizing: border-box;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

/* Alignments per column */
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th:nth-child(1),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(1),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th:nth-child(2),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(2),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th:nth-child(3),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(3){
  text-align: center;
}

body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid th:nth-child(5),
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(5){
  text-align: right;
  /* money column */;
}

/* Fix the input box in Total Cost cells so it doesn’t look wild */
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(5) input,
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(5) .textbox,
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td:nth-child(5) .TextBox{
  max-width: 120px;
  /* or 100% if you prefer full cell width */
  width: 100%;
  text-align: right;
  padding: .375rem .5rem;
  border-radius: .375rem;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
}

/* Make sure none of the order.aspx-only rules leak here */
body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid td{
  display: table-cell;
  /* undo any flex set for the download column elsewhere */;
}

/* ===== order.aspx — force RowStyle background ===== */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid tbody tr.RowStyle > td{
  background: #ededed !important;
  /* override any shorthand from base_style.css */
  background-image: none !important;
  /* in case a sprite is applied */
  background-color: #ededed !important;
  /* belt + suspenders for older shorthands */
  background-clip: padding-box;
}

/* If alternating rows exist, keep a subtle alt tone */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid tbody tr.AltRowStyle > td{
  background: #f6f6f6 !important;
  background-image: none !important;
  background-color: #f6f6f6 !important;
}

/* Safety: ensure table cells behave like cells on this page */
body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid tbody td{
  display: table-cell !important;
  /* neutralize any accidental flex that could “lift” content */
  vertical-align: top !important;
  /* keep content pinned at the top, consistently */;
}

/* ===== Order History cards: override desktop table rules on mobile UPDATE 2026-01-05 ===== */
@media (max-width: 767.98px) {

  /* Disable fixed table layout/width rules when in card mode */
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards {
    table-layout: auto !important;   /* cancels fixed */
    width: 100% !important;
  }

  /* Force the "card" display model, even if old rules try to keep table layout */
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards,
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards thead,
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards tbody,
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards tr,
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards th,
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards td {
    display: block !important;       /* cancels any table-cell/table-row/table */
    width: 100% !important;          /* cancels nth-child widths */
  }

  /* Hide the header row */
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards thead {
    display: none !important;
  }

  /* Each row becomes a card */
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards tr {
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .5rem;
    padding: .75rem;
    margin-bottom: .75rem;
    background: #fff;
  }

  /* Card lines */
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards td {
    border: 0 !important;
    padding: .35rem 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
  }

  /* Label from JS */
  body.shop-scope form[action*="account.aspx"] .AspNet-GridView > table.Grid.orderGrid.ws-table-to-cards td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: .875rem;
    opacity: .8;
    margin-bottom: .1rem;
  }
}


/* ===== order.aspx (Order Details) — mobile card layout UPDATE 2026-01-06===== */
@media (max-width: 767.98px) {

  /* When in card mode, override any table-cell enforcement */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards,
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards thead,
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards tbody,
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards tr,
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards th,
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards td {
    display: block !important;
    width: 100% !important;
  }

  /* Hide the header row */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards thead {
    display: none !important;
  }

  /* Each product line becomes a card */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards tr {
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .5rem;
    padding: .75rem;
    margin-bottom: .75rem;
    background: #fff;
  }

  /* Card lines */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards td {
    border: 0 !important;
    padding: .35rem 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
  }

  /* Label from JS */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: .875rem;
    opacity: .8;
    margin-bottom: .1rem;
  }

  /* Downloads area: keep each download line readable */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards td:last-child > div {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .35rem;
  }

  /* Ensure the download "button" doesn't collapse strangely */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards input.OrderHistoryDownload {
    flex: 0 0 auto;
  }

  /* Let the filename wrap nicely */
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView > table.Grid.ws-table-to-cards td:last-child span {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 767.98px) {
  body.shop-scope form[action*="order.aspx"] .AspNet-GridView {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
  }
}


/* ===== shoppingcart.aspx — emphasize main heading ===== */
body.shop-scope form[action*="shoppingcart.aspx"] .ContentContainer .ShoppingCart h1{
  font-size: 1.75rem !important;
  /* ≈28 px on default 16 px root */
  font-weight: 700 !important;
  /* bold but not grotesque */
  line-height: 1.2 !important;
  margin-bottom: 1rem;
  color: var(--illini-navy, #13294B);
  /* Illini Blue for continuity */;
}

/* Optional subtle divider under the heading */
body.shop-scope form[action*="shoppingcart.aspx"] .ContentContainer .ShoppingCart h1::after{
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--illini-navy, #13294B);
  margin-top: .4rem;
  border-radius: 2px;
}
/* Context chip styles (Personal vs Unit) */
#ws-shop-chip { display:inline-block; font-weight:600; }
#ws-shop-chip.ws-personal { background: var(--illini-navy); color:#fff; }
#ws-shop-chip.ws-unit     { background: var(--illini-orange); color:#000; }


/* Sidebar context card */
#ws-shop-context .badge { letter-spacing:.2px; }
#ws-shop-badge.ws-personal { background: var(--illini-navy); color:#fff; }
#ws-shop-badge.ws-unit     { background: var(--illini-orange); color:#000; }


/* --- Remove underline from navbar brand link --- */
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none !important;
}
#HeaderBand .ws-banner .navbar-brand:hover,
#HeaderBand .ws-banner .navbar-brand:focus {
  color: inherit !important;
}

/* Breadcrumbs (Shop support pages) */
.ws-breadcrumbs .breadcrumb {
  --ws-bc-color: #6c757d; /* muted */
  padding: 0;
  background: transparent;
  font-size: .95rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;              /* allow wrapping on small screens */
}

.ws-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  /* Bootstrap provides the divider, this ensures color/contrast */
  color: var(--ws-bc-color);
}

.ws-breadcrumbs .breadcrumb a {
  color: var(--ws-bc-color);
  text-decoration: none;
}
.ws-breadcrumbs .breadcrumb a:hover,
.ws-breadcrumbs .breadcrumb a:focus {
  text-decoration: underline;
  color: #13294B;               /* brand navy on hover */
}

.ws-breadcrumbs .breadcrumb-item.active {
  color: #212529;               /* readable for current page */
}

/* Strategic Comms — scope Bootstrap's "white" to gray for the menubar */
nav.navbar.bg-white.border-bottom{
  background-color:#e8e9eb !important;
  background-image:none !important;
}


/* ===== Shop navbar: make search behave ===== */

/* Allow the inner track to wrap to multiple rows when space is tight */
#MenubarRegion .navbar > .container-xxl { flex-wrap: wrap; }

/* Desktop: search parks on the right, sensible width */
@media (min-width: 992px) {
  #MenubarRegion .navbar [role="search"] {
    margin-left: auto;           /* push search to the right */
    flex: 0 0 auto;              /* don't let it squash */
  }
  #MenubarRegion .navbar .form-control {
    width: clamp(280px, 32vw, 750px);   /* fluid but capped */
    max-width: 100%;
  }
}

/* ===== Responsive trim: hide Recently Viewed on small screens ===== */

/* Tablet/phone: put search on its own row, full width */
@media (max-width: 991.98px) {
  #MenubarRegion .navbar .navbar-nav { order: 0; }
  #MenubarRegion .navbar [role="search"] {
    order: 1;                    /* search below links */
    flex: 1 1 100%;
    width: 100%;
    margin: .5rem 0 0;
  }
  #MenubarRegion .navbar .form-control {
    width: 100% !important;      /* fill the row */
    max-width: none !important;
  }
}


@media (min-width: 1200px) {
  #LeftSidebar {
    display: block;   /* no grid */
  }
}

  /* Normalize sidebar blocks */
  #LeftSidebar > .dataBlock { margin: 0 !important; }

/* Temporarily retire Recently Viewed everywhere (all viewports) */
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts,
.rv-in-main,
#LeftSidebar [id*="RecentlyViewed"],
#LeftSidebar [class*="recently-viewed"] {
  display: none !important;
}


/* ===== Wide screens: put LeftSidebar BELOW main as a full-width band ===== */
@media (min-width: 1200px) {
  /* Reorder the two columns inside the shop shell */
  #ShopShell {
    display: flex;
    align-items: stretch;
    gap: 24px;
    flex-direction: column;                /* stack: main first, sidebar second */
  }
  #ShopShell > #ContentBand { order: 0; }  /* main/content first */
  #ShopShell > #LeftSidebar {
    order: 1;                               /* sidebar becomes a band under main */
    flex: 0 0 100%;
    max-width: 100% !important;
    width: 100% !important;
  }



/* ===== Neutralize legacy layout.css widths/margins on shop pages ===== */

/* kill the old left gutter and fixed content width */
body.shop-scope #ContentBand {
  margin-left: 0 !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* let the sidebar participate in modern flex/grid instead of a fixed 235px rail */
body.shop-scope #LeftSidebar {
  width: auto !important;
  max-width: none !important;
  float: none !important;   /* flex/grid can handle positioning now */
}

/* stop dataBlock from pretending it knows the column width */
body.shop-scope #LeftSidebar .dataBlock {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 1rem 0 !important;
  float: none !important;
}
	
body.shop-scope #LeftSidebar .dataBlock > * {
  width: auto !important;
  max-width: none !important;
}
	
/* =============================
   Wide-screen horizontal Account menu
   ============================= */
@media (min-width: 1200px) {

  /* Turn the block into a horizontal panel */
  #LeftSidebar .dataBlock {
    display: flex;
    flex-direction: column;   /* header stays on its own row */
    padding: 0;
  }

  /* Header style stays full-width across the top */
  #LeftSidebar .dataBlock h4 {
    margin: 0;
    padding: .6rem .75rem;
    font-size: 1rem;
    font-weight: 700;
    background: #13294B;
    color: #fff;
    border-radius: .5rem .5rem 0 0;
  }

  /* Turn the UL into a horizontal, wrapping row */
  #LeftSidebar .dataBlock ul,
  #LeftSidebar .dataBlock ol {
    list-style: none;
    margin: 0;
    padding: .5rem .75rem .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;   /* vertical + horizontal space between items */
  }

  /* Style each link as a lightweight pill */
  #LeftSidebar .dataBlock li {
    margin: 0;
  }

  #LeftSidebar .dataBlock a {
    display: block;
    padding: .35rem .7rem;
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .375rem;
    text-decoration: none;
    font-size: .95rem;
    white-space: nowrap;  /* optional: prevent wrapping in the middle of a link */
  }

  #LeftSidebar .dataBlock a:hover,
  #LeftSidebar .dataBlock a:focus {
    background: #fff;
    border-color: rgba(0,0,0,.2);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }

  /* Add a bit of padding around the whole card */
  #LeftSidebar .dataBlock {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
  }
}

	/* ===== Shop context card + account alignment on wide screens ===== */
@media (min-width: 1200px) {

  /* Center the contents of the Personal/Unit context card */
  .ws-context .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
  }

  /* Add "· My Account" inline to the context card */
  .ws-context .card-body::after {
    content: " · My Account";
    font-weight: 600;
  }

  /* If the badge is a button-like thing, prevent it from stretching weirdly */
  .ws-context .badge,
  .ws-context .btn,
  .ws-context [class*="badge"] {
    flex: 0 0 auto;
  }
}
	
/* Left-align the Shop badge + remove injected "My Account" */
@media (min-width: 1200px){
  .ws-context .card-body{
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .ws-context .card-body::after{
    content: none !important;
  }
}


@media (min-width: 1200px) {
  /* Visually hide the My Account heading but keep it for accessibility */
  #LeftSidebar .dataBlock h4 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Optional: remove the dark bar's background if it's still visible somehow */
  #LeftSidebar .dataBlock h4 {
    background: transparent !important;
    color: transparent !important;
  }
}

@media (min-width: 1200px) {
  #LeftSidebar .dataBlock ul,
  #LeftSidebar .dataBlock ol {
    justify-content: center;   /* center the pills across the width */
  }
}
	
#LeftSidebar .dataBlock {
  border: 0 !important;
  background: transparent;
  padding: 0;
}

/* ============================================
   Recently Viewed – modernize inner dataBlock
   ============================================ */

/* Outer wrapper: already a card; just make sure it looks right */
.rv-in-main,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts,
#RecentlyViewedMainCard {
  border: 0 !important;
  background: transparent;
  padding: 0;
}

/* Kill the legacy box chrome INSIDE the card */
.rv-in-main .dataBlock,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .dataBlock {
  border: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Header bar: match the rest of the site (compact, dark blue strip) */
.rv-in-main .dataBlock .titlebar,
.rv-in-main .dataBlock h4,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .dataBlock .titlebar,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .dataBlock h4 {
  margin: 0 !important;
  padding: .6rem .9rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  background: #fff !important;
  color: #13294B !important;
  text-align: center;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

/* Content area inside the card */
.rv-in-main .dataBlock > *:not(.titlebar):not(h4),
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .dataBlock > *:not(.titlebar):not(h4) {
  padding: 1rem 1.25rem !important;
}

/* Layout the recently viewed products in a centered row */
.rv-in-main .RecentlyViewedProduct,
.rv-in-main .RecentlyViewProduct,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .RecentlyViewedProduct,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .RecentlyViewProduct {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 1.5rem !important;
}

/* Individual product tile */
.rv-in-main .RecentlyViewedProduct > div,
.rv-in-main .RecentlyViewProduct > div,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .RecentlyViewedProduct > div,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .RecentlyViewProduct > div {
  text-align: center;
}

/* Product image */
.rv-in-main .RecentlyViewedProduct img,
.rv-in-main .RecentlyViewProduct img,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .RecentlyViewedProduct img,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .RecentlyViewProduct img {
  max-width: 110px;
  height: auto;
  display: block;
  margin: 0 auto .5rem;
}

/* Product title/link */
.rv-in-main .RecentlyViewedProduct a,
.rv-in-main .RecentlyViewProduct a,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .RecentlyViewedProduct a,
#ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts .RecentlyViewProduct a {
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  color: #13294B;
}

.rv-in-main .RecentlyViewedProduct a:hover,
.rv-in-main .RecentlyViewProduct a:hover {
  text-decoration: underline;
}

/* Keep the whole block hidden on phones, as before */
@media (max-width: 767.98px) {
  .rv-in-main,
  #ctl00_ctl00_uxRecentlyViewedProducts_pnlRecentlyViewedProducts {
    display: none !important;
  }
}
	
#WebStoreBannernew .ws-banner2-container {
  /* Tiny horizontal nudge if needed */
  padding-left: 1.75rem;  /* was px-3 ≈ 1rem */
  padding-right: 1.75rem;
}

@media (min-width: 930px) {
  #WebStoreBannernew .ws-banner2-container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.ws-banner-title-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;  /* keeps text lined up nicely */
  gap: 0.75rem;            /* spacing between “WebStore” and tagline */
  flex-wrap: wrap;        /* allows wrapping on small screens */
  flex: 1 1 auto;
}

.ws-banner-tagline {
  font-size: 1rem;
  opacity: 0.85; /* optional—softens it slightly */
  white-space: normal; /* ensure normal wrapping */
}

.ws-banner-title {
  font-size: 1.75rem;        /* or use your existing WebStore heading size */
  font-weight: 700;
}

.ws-banner-tagline {
  font-size: 0.95rem;
  font-weight: 400;
}

.ws-banner-title a {
  color: inherit;
  text-decoration: none;
}
.ws-banner-title a:hover {
  text-decoration: underline;
}

.ws-nav {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.5rem 0;
}

.ws-nav {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

@media (min-width: 930px) {
  .navbar-nav {
    padding-left: 4rem; /* same nudge used on ws-banner-container */
  }
}

/* adjust nav menu under WebStore */
  }
@media (min-width: 930px) {
  .ws-main-nav {
    padding-left: 4rem;  /* adjust until it lines up with WebStore */
  }
}

/* Make sure the link looks like the title, not a default navbar brand */
.ws-banner-title .navbar-brand {
  font-size: 1.75rem;
  font-weight: 700;
  padding: 0;
  margin: 0;
}

.ws-banner-title a {
  color: inherit;
  text-decoration: none;
}
.ws-banner-title a:hover {
  text-decoration: underline;
}

.ws-banner,
.ws-banner-title-group,
.ws-banner-title,
.ws-banner-tagline {
  text-align: left !important;
}

/* Default (mobile-first): stack title + tagline vertically */
.ws-banner .ws-banner-title-group {
  display: flex;
  flex-direction: column;    /* title on top, tagline below */
  align-items: flex-start;
  gap: 0.25rem;
  flex: 1 1 auto;
  text-align: left;          /* in case base_style is centering things */
}

/* At wider screens, put them on the same line */
@media (min-width: 930px) {
  .ws-banner .ws-banner-title-group {
    flex-direction: row;     /* title and tagline side-by-side */
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
}

/* Keep banner content nicely spaced on mobile */
.ws-banner2-container {
  row-gap: 0.5rem;
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}

/* Buttons block: prevent it from collapsing too narrow */
.ws-banner-actions .btn {
  min-width: 9rem;    /* tweak to taste */
}

/* Hide auto-inserted About Cookies button from ilw-footer */
ilw-footer [slot="cookies-button"] {
    display: none !important;
}

/* Hide WebStore grey navbar on mobile; use Stratcom header menu instead */
@media (max-width: 991.98px) {
   body.shop-scope nav.navbar.navbar-expand-sm.navbar-light.bg-white.border-bottom {
    display: none !important;
  }
}

/* Shop-only header links: hide by default, show when in Shop */
.shop-only {
    display: none;
}

body.shop-scope .shop-only {
    display: list-item;
}

/* Hide the Shop grey navbar (we use header menu instead) */
    body.shop-scope nav.navbar.navbar-expand-sm.navbar-light.bg-white.border-bottom {
        display: none !important;
    }
}

/* Optional: hide left sidebar / account blocks on Shop mobile */
@media (max-width: 991.98px) {
    body.shop-scope #LeftSidebar,
    body.shop-scope #AccountMenu,
    body.shop-scope .dataBlock,
    body.shop-scope .accountHeader,
    body.shop-scope [id*="AccountLinks"] {
        display: none !important;
    }
}

ilw-header nav[slot="links"] li {
    list-style: none;
}

.pageTitle {
  display: none;
}

.card-body.py-2::after {
  content: none !important;
}

/* ============================================
   Landing Page Styling for Category Index
   ============================================ */

/* Space the whole index away from the block above */
.category-index{
  margin-top: 1.5rem;
}

/* Title spacing */
.catalog-title{
  font-size: 1.6rem;
  font-weight: 800;
  color: #13294B;
  margin: 0 0 1rem 0;
}

/* Group spacing */
.category-group{
  margin-top: 1.25rem;
}

.category-group__title{
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.75rem 0 .75rem 0;
  margin-bottom: .5rem; 
}

/* List base */
.category-list{
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;

}


/* Flow items into columns on wider screens WITHOUT changing reading order */
@media (min-width: 768px){
  .category-list{
    column-count: 2;
    column-gap: 3rem;
  }
}
@media (min-width: 1200px){
  .category-list{
    column-count: 3;
  }
}

/* Keep each item from splitting across columns */
.category-item{
  break-inside: avoid;
  padding: .35rem 0;
 text-align: left;
}

/* Link styling: primary clickable element */
.category-item__link{
  display: block;           /* <-- key: removes “floating” feel */
  padding: .15rem .25rem;
  border-radius: .4rem;
  text-decoration: none;
  line-height: 1.25;
}

.category-item__link:hover,
.category-item__link:focus{
  text-decoration: underline;
  background: rgba(0,0,0,.04);
}

/* Description styling (hidden on mobile via Bootstrap class) */
.category-item__desc{
  font-size: .9rem;
  font-weight: 400;
  color: var(--bs-secondary-color); /* Bootstrap handles accessible-ish contrast */
  margin-top: .15rem;
  padding: .15rem .25rem;
  border-radius: .4rem;
}

/* Hide legacy search box on search results (keep header search) */
body.shop-scope form[action*="search.aspx"] .SearchForm {
  display: none !important;
}

body.shop-scope .ws-breadcrumbs-wrap{
  display: block !important;
  visibility: visible !important;
}

/* --- WebStore brand title sizing (Home + Shop) --- */
:root {
  /* Mobile-first size */
  --ws-brand-size: clamp(1.9rem, 6vw, 2.4rem);
}

@media (min-width: 992px) {
  /* Desktop bump */
  :root {
    --ws-brand-size: clamp(2.2rem, 2.2vw, 3.0rem);
  }
}

/* Apply to BOTH possible brand elements */
.ws-banner-title,
.ws-logo,
.ws-banner .navbar-brand {
  font-size: var(--ws-brand-size) !important;
  line-height: 1.05;     /* reduces the “air” under WebStore */
  margin-bottom: 0;      /* kill default heading spacing if any */
}

/* Optional: tighten the brand row padding if it’s contributing */
.ws-banner .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

/* Keep banner full-bleed, but align its CONTENT to the site container */
#WebStoreBannernew .ws-banner2-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  width: 100% !important;
}


/* Collapse legacy 3-column layout before it starts squeezing content */
@media (max-width: 1199.98px) {

  /* Side columns: remove from layout so they can't steal width */
  [id*="LeftColumn"], [class*="LeftColumn"],
  [id*="RightColumn"], [class*="RightColumn"],
  #LeftColumn, #RightColumn {
    display: none !important;
    width: 0 !important;
    float: none !important;
  }

  /* Main content column: take the full container width */
  [id*="MiddleColumn"], [class*="MiddleColumn"],
  #MiddleColumn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  /* Safety: any legacy column containers that float */
  [id*="LeftContainer"], [class*="LeftContainer"],
  [id*="RightContainer"], [class*="RightContainer"] {
    float: none !important;
    width: 100% !important;
  }
}

/* DEBUG: visualize layout boxes 
#Container { outline: 3px solid red !important; }
#ContentBand { outline: 3px solid blue !important; }
#ContentBand .content { outline: 3px solid green !important; }
#MiddleColumn { outline: 3px solid orange !important; }
*/

/* Fix the squeezed MiddleColumn band (~tablet landscape / small laptop) */
@media (min-width: 900px) and (max-width: 1199.98px) {

  body.shop-scope #ContentBand .content > #MiddleColumn {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}


@media (min-width: 900px) and (max-width: 1199.98px) {
  body.shop-scope #MiddleColumn > table,
  body.shop-scope #MiddleColumn > tbody,
  body.shop-scope #MiddleColumn > tr,
  body.shop-scope #MiddleColumn > td,
  body.shop-scope #MiddleColumn > div {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Context badge spacing (above breadcrumbs) */
.ws-context-wrap {
  margin: .25rem 0 .5rem;
}

/* Optional: section colors (if you want them distinct) */
#ws-shop-badge.ws-account { background: #6c757d; color: #fff; }  /* Bootstrap secondary-ish */
#ws-shop-badge.ws-support { background: #1D58A7; color: #fff; }  /* your supporting blue token */


/* Mobile: hide product & search thumbnails entirely */
@media (max-width: 575.98px){
  .ProductDetailTable .imageCell{
    display: none !important;
  }
}

@media (max-width: 575.98px){
  .ProductDetail .Title h1{
    font-size: 1.4rem;   /* adjust to taste */
    line-height: 1.2;
    margin: 0 0 .5rem;
  }
}

@media (max-width: 575.98px){
  .productListing .cellThumbnail{
    display: none !important;
  }
}

@media (max-width: 575.98px){

  /* Scope: only category product listing table */
  .productListing tr{
    display: block;                /* row becomes a block container */
    width: 100%;
    position: relative;
  }

  /* hide the thumbnail column (you already have this) */
  .productListing .cellThumbnail{
    display: none !important;
  }

  /* Make both remaining cells full-width stacked blocks */
  .productListing td.cellDetail,
  .productListing td.cellPrice{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    vertical-align: top;
  }

  /* Detail content uses full width */
  .productListing td.cellDetail .text{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Put price below details, aligned nicely */
  .productListing td.cellPrice{
    margin-top: .35rem;
    text-align: left !important;
  }

  .productListing td.cellPrice .price{
    display: inline-block;
    white-space: nowrap;
  }

  /* Prevent long eligibility strings from forcing sideways overflow */
  .productListing td,
  .productListing .text,
  .productListing .title,
  .productListing .eligibility{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Optional: reduce title size a bit on mobile */
  .productListing .title{
    font-size: 1.05rem;
    line-height: 1.25;
  }
}

@media (max-width: 575.98px){

  /* Fix the "centered/narrow column" behavior of the detail block */
  .productListing td.cellDetail .text{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;          /* kills margin:auto centering */
    padding-left: 0 !important;    /* if legacy padding is pushing it */
    padding-right: 0 !important;

    float: none !important;        /* just in case */
    text-align: left !important;   /* some themes center this */
    position: static !important;   /* nukes absolute/relative offsets */
    left: auto !important;
    right: auto !important;
  }

  /* If the inner title/eligibility blocks have widths/margins, flatten them too */
  .productListing td.cellDetail .text > div{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}