/* ============================================================================
   theme.css  —  DWG storefront header theme  (codename "Varsity")

   What this is: a header restyle for the dwg.us ProductCart storefront, with a
   visual direction modeled on a major sporting-goods retailer's site nav
   (slim utility strip, big rounded search, bold mega-menu category bar).

   Scope: pure CSS overlay on the EXISTING markup. No header.asp structure
   changes — every link/cart stays exactly where it is today.
   Built and tested against Bootstrap 3 (the storefront's live default).

   Loaded by inc_theme.asp only when the active theme is "varsity"
   (preview with ?testtheme=varsity). Must load AFTER the storefront CSS so
   its overrides win the cascade.
   ============================================================================ */


@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --vty-brand:#0d3b66;        /* DWG navy — logo, active states, accents */
  --vty-brand-dark:#07294d;
  --vty-ink:#181818;          /* primary bold text                       */
  --vty-soft:#5a5f66;
  --vty-line:#e4e6e9;         /* hairlines / dividers                    */
  --vty-field:#f1f2f4;        /* search fill                             */
  --vty-field-line:#c9ced4;
  --vty-sale:#c40b0b;         /* Deals / sale red                        */
  --vty-save:#0a7d36;         /* free-shipping green                     */
  --vty-shadow:0 14px 30px rgba(13,28,48,.14);
  --vty-hsans:'Archivo','Trebuchet MS',Arial,sans-serif;
  --vty-bsans:'Inter','Segoe UI',Arial,sans-serif;
}

/* ----------------------------------------------------------------------------
   ANNOUNCEMENT STRIP  (#dabar)
---------------------------------------------------------------------------- */
#dabar{
  background:var(--vty-brand) !important;
  color:#fff !important;
  font-family:var(--vty-hsans);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:12px; text-align:center; padding:7px 12px !important;
}
.container-fluid[style*="background-color: #EEE"]{ background:#fff !important; }

/* ----------------------------------------------------------------------------
   MASTHEAD  (logo / search row)
---------------------------------------------------------------------------- */
.peLogoRowMobile{ align-items:center; }
#pcHeaderLeft,#pcHeaderCenter,#pcHeaderRight{ display:flex; align-items:center; min-height:78px; }
#pcHeaderCenter{ width:100%; }

/* The account/cart cluster moved up to the strip, leaving the masthead's old
   right column empty. On desktop, make the row flex, let the search column grow
   into that freed space, and drop the empty trailing column so the search bar
   isn't stranded with dead space that changes width across viewports. */
@media (min-width:992px){
  .peLogoRowMobile{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; }
  .peLogoRowMobile > .peLogoColMobile:first-child{ flex:0 0 auto !important; width:auto !important; }   /* logo */
  .peLogoRowMobile > .peLogoColMobile:nth-child(2){ flex:1 1 auto !important; width:auto !important; }   /* search grows */
  .peLogoRowMobile > .hidden-xs.hidden-sm.col-md-3{ display:none !important; }                            /* empty right col */
}

/* big rounded search */
#pcHSearchForm{ width:100%; margin:0; }
.search-wrapper-container,.search-container{ width:100%; }
.search-container{ position:relative; display:flex; align-items:center; max-width:900px; margin:0 auto; }
#pcHSearchForm #pcHSearch{
  flex:1; height:50px !important;
  border:1.5px solid var(--vty-field-line) !important;
  background:var(--vty-field) !important;
  border-radius:26px !important;
  padding:0 150px 0 20px !important;   /* room for advanced-search + Go */
  font-family:var(--vty-bsans) !important; font-size:14.5px !important;
  color:var(--vty-ink) !important; box-shadow:none !important;
  transition:border-color .15s, background .15s;
}
#pcHSearch::placeholder{ color:#8a9099; }
#pcHSearchForm #pcHSearch:focus{
  outline:none !important; border-color:var(--vty-brand) !important;
  background:#fff !important; box-shadow:0 0 0 3px rgba(13,59,102,.12) !important;
}
/* "ADVANCED SEARCH" → quiet inline control (legacy box stripped) */
#pcHeaderCenter a#advancedSearchLink,a#advancedSearchLink{
  position:absolute; right:54px; top:50%; transform:translateY(-50%);
  font-family:var(--vty-hsans); font-weight:800;
  font-size:9px; line-height:1.05; letter-spacing:.08em; text-align:center;
  white-space:nowrap; overflow:visible;
  color:var(--vty-soft) !important; text-decoration:none !important;
  background:transparent !important; background-image:none !important;
  border:0 !important; border-left:1px solid var(--vty-field-line) !important;
  border-radius:0 !important; box-shadow:none !important; padding-left:10px;
}
#advancedSearchLink:hover{ color:var(--vty-brand) !important; }
/* circular navy search button (magnifier on the right) — anchored on the form
   to outrank legacy pcHeaderFooter11.css #pcHSearchForm #pcHSearchSubmit rules */
#pcHSearchForm #pcHSearchSubmit{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:40px !important; height:40px !important; border-radius:50% !important;
  background:var(--vty-brand) !important; color:transparent !important;
  border:0 !important; font-size:0 !important; padding:0 !important; cursor:pointer;
  flex:none !important; transition:background .15s;
}
#pcHSearchSubmit::before{
  content:"\f002"; font-family:"FontAwesome"; font-size:16px; color:#fff;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
#pcHSearchForm #pcHSearchSubmit:hover{ background:var(--vty-brand-dark) !important; }

/* Defeat legacy pcHeaderFooter11.css fixed heights / overflow:hidden that were
   clipping the search field's bottom (made it look short and un-rounded).
   High specificity so it outranks the legacy responsive rules. */
#pcHeaderCenter,
#pcHeaderCenter #pcHSearchForm,
#pcHSearchForm .search-wrapper-container,
#pcHSearchForm .search-container{
  height:auto !important; min-height:0 !important; overflow:visible !important;
}
#pcHeaderCenter #pcHSearchForm #pcHSearch{ height:50px !important; box-sizing:border-box !important; }

/* ----------------------------------------------------------------------------
   CATEGORY BAR  (#topmenu-wrap)  + mega-menu flyouts
   Uses 2-ID selectors to outrank the legacy superfish menu CSS.
---------------------------------------------------------------------------- */
#pcNavContainer45{ background:#fff; }
#topmenu-wrap{
  background:#fff !important;
  border-top:1px solid var(--vty-line);
  border-bottom:1px solid var(--vty-line);
  padding:0 !important;
  min-height:52px !important;
}
#pcNavContainer45 #topmenu-wrap > ul{
  display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important;
  list-style:none; margin:0 auto; padding:0; max-width:1320px; min-height:52px !important;
}
#pcNavContainer45 #topmenu-wrap > ul > li{
  position:relative; float:none !important; background:none !important;
  list-style:none; flex:0 0 auto; margin:0 !important;
  display:flex !important; align-items:center !important;   /* center the anchor within the row */
}

/* top-level tab labels — kill old sliding-door sprite backgrounds.
   Vertical centering via line-height (NOT flex): Superfish forces the
   anchor's display, so flex centering can't be relied on — line-height can.
   Hover underline is an inset box-shadow so it never changes the box height. */
#pcNavContainer45 #topmenu-wrap > ul > li > a,
#pcNavContainer45 #topmenu-wrap a[class^="tab-"]{
  display:flex !important; align-items:center !important; justify-content:center !important;
  height:52px !important;
  line-height:1.1 !important;
  text-align:center !important;
  padding:0 12px !important;
  background:none !important; background-image:none !important;
  border:0 !important;
  box-shadow:inset 0 -4px 0 transparent !important;
  box-sizing:border-box !important;
  margin:0 !important;
  font-family:var(--vty-hsans) !important; font-weight:800 !important;
  font-size:12.5px !important; letter-spacing:.04em; text-transform:uppercase;
  color:var(--vty-ink) !important; text-decoration:none !important; white-space:nowrap;
  transition:color .12s, box-shadow .12s;
}
#pcNavContainer45 #topmenu-wrap > ul > li > a:hover{
  color:var(--vty-brand) !important; box-shadow:inset 0 -4px 0 var(--vty-brand) !important;
}
/* Deals tab in sale-red */
#pcNavContainer45 #topmenu-wrap > ul > li > a.tab-nine{ color:var(--vty-sale) !important; }
#pcNavContainer45 #topmenu-wrap > ul > li > a.tab-nine:hover{ box-shadow:inset 0 -4px 0 var(--vty-sale) !important; }
/* on medium screens squeeze harder so all 8 tabs fit without clipping */
@media (min-width:992px) and (max-width:1199px){
  #pcNavContainer45 #topmenu-wrap > ul > li > a,
  #pcNavContainer45 #topmenu-wrap a[class^="tab-"]{
    padding:0 6px !important; font-size:10.5px !important; letter-spacing:0 !important;
  }
}
/* hide the little dropdown carets */
#topmenu-wrap .dropdown-toggle.caret,#topmenu-wrap b.caret{ display:none !important; }

/* --- mega flyout panel (.ulwrap) ---
   Default HIDDEN so a closed panel can never overlap and block clicks on the
   row below (that was the un-clickable "Click Here" bug). Shown on hover only. */
#topmenu-wrap .ulwrap{ display:none !important; }
#pcNavContainer45 #topmenu-wrap > ul > li:hover .ulwrap{ display:block !important; }
#topmenu-wrap .ulwrap{
  position:absolute !important; top:100% !important; left:0 !important; z-index:1200;
  background:#fff !important; border:1px solid var(--vty-line) !important;
  border-top:3px solid var(--vty-brand) !important; border-radius:0 0 10px 10px;
  box-shadow:var(--vty-shadow) !important; padding:22px 26px !important; min-width:520px;
}
#topmenu-wrap .ulwrap.nine{ border-top-color:var(--vty-sale) !important; min-width:300px; }
/* open the last two flyouts leftward so wide menus don't run off-screen */
#pcNavContainer45 #topmenu-wrap > ul > li:nth-last-child(-n+2) .ulwrap{
  left:auto !important; right:0 !important;
}

/* neutralize sprite-based rounded-corner wrappers */
#topmenu-wrap .outline-left,#topmenu-wrap .outline,#topmenu-wrap .corner-wrap{
  background:none !important; background-image:none !important;
  border:0 !important; padding:0 !important; margin:0 !important; display:block;
}
#topmenu-wrap .ulwrap > span.tab-eight,#topmenu-wrap .ulwrap > span.tab-nine{ display:none !important; }

/* multiple <ul> inside corner-wrap → mega-menu columns.
   nowrap = one column per <ul>, always on a single row (honors the UL count,
   matching the original menu). The panel widens to fit however many there are. */
#topmenu-wrap .corner-wrap{ display:flex !important; flex-wrap:nowrap !important; gap:6px 34px; align-items:flex-start; }
#topmenu-wrap .corner-wrap > ul{
  display:block !important; list-style:none; margin:0 !important; padding:0 !important;
  min-width:170px; column-count:1 !important;
  border:0 !important; background:none !important; box-shadow:none !important;
}
#topmenu-wrap .corner-wrap ul li{ float:none !important; background:none !important; list-style:none; margin:0; }
#topmenu-wrap .corner-wrap ul li a{
  display:block !important; padding:6px 0 !important; white-space:normal;
  background:none !important; background-image:none !important; border:0 !important;
  font-family:var(--vty-bsans) !important; font-weight:500 !important;
  font-size:13.5px !important; letter-spacing:0; text-transform:none !important;
  color:var(--vty-ink) !important; text-decoration:none !important; transition:color .12s;
}
#topmenu-wrap .corner-wrap ul li a:hover{ color:var(--vty-brand) !important; text-decoration:underline !important; }
#topmenu-wrap .corner-wrap ul li a strong{ color:var(--vty-brand) !important; }

/* sticky state (.fix → set by the storefront's scroll handler) */
#topmenu-wrap.fix{
  position:fixed !important; top:0; left:0; right:0; z-index:1100;
  background:#fff !important; border-top:0;
  box-shadow:0 4px 14px rgba(13,28,48,.12) !important;
}
#topmenu-wrap.fix > ul{ padding:0 22px; }

/* ----------------------------------------------------------------------------
   DEALER / CART STRIP  (#fullwidthCartLinksbar)  — stays where it is
---------------------------------------------------------------------------- */
#fullwidthCartLinksbar{
  border-top:0 !important;
  border-bottom:1px solid var(--vty-line) !important;
  background:#fff;
  clear:both !important; position:relative !important;   /* never overlap the bar above */
}
#pcIconBarContainer{
  max-width:1320px; margin:0 auto;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  flex-wrap:nowrap !important; gap:6px 18px;
  padding:10px 12px !important; border:0 !important;
}
#pcIconBarLeft.dealer-account{ float:none !important; width:auto !important; flex:1 1 auto; min-width:0 !important; padding:0 !important; }
#pcIconBarRight{ float:none !important; width:auto !important; flex:0 0 auto; padding:0 !important; margin:0 !important; white-space:nowrap; }
/* only wrap once we're into the narrow / mobile range */
@media (max-width:991px){
  #pcIconBarContainer{ flex-wrap:wrap !important; }
}
#pcIconBarLeft.dealer-account .dealer-message,
#pcIconBarLeft.dealer-account .dealer-text{ line-height:1.2 !important; }

/* dealer-account message + pill (left) */
#pcIconBarLeft.dealer-account .dealer-message{
  display:flex !important; align-items:center; gap:8px; flex-wrap:nowrap; line-height:1.2; margin:0;
}
/* dealer-account CTA hidden for now — utility strip is just Sign In / Checkout / Help / Cart.
   (Reversible: delete this block to bring it back. The homepage hero still shows
   "Not a dealer yet? Become a dealer.") */
#pcIconBarLeft.dealer-account{ display:none !important; }
#pcIconBarRight{ margin-left:auto !important; }

.dealer-link{
  display:inline-block !important; font-family:var(--vty-hsans) !important; font-weight:800 !important;
  font-size:11px !important; letter-spacing:.04em !important; text-transform:uppercase !important;
  color:#fff !important; background:var(--vty-brand) !important;
  padding:4px 14px !important; border-radius:4px !important; line-height:1.2 !important;
  height:auto !important; min-height:0 !important; white-space:nowrap !important;
  text-decoration:none !important; margin:0 0 0 8px !important; vertical-align:middle !important;
}
/* below 1200px the long dealer sentence crowds the strip — keep just the button */
@media (max-width:1199px){
  #pcIconBarLeft.dealer-account .dealer-text{ display:none !important; }
  .dealer-link{ margin-left:0 !important; }
}
.dealer-link:hover{ background:var(--vty-brand-dark); }
.dealer-button{ border-radius:20px !important; }

/* right-side cluster: account icon + "Hi, [name]" / "My Account", Help, and a
   cart icon with a count badge (badge only shows when the cart has items;
   empty state is just a clean cart icon — no "cart is empty" text) */
#pcIconBarRight{ display:flex !important; align-items:center; justify-content:flex-end; gap:24px; font-family:var(--vty-hsans); }
#pcIconBarRight .dwg-acct,
#pcIconBarRight .dwg-util,
#pcIconBarRight .dwg-cart{
  display:flex; align-items:center; gap:8px;
  color:var(--vty-ink) !important; text-decoration:none !important;
  font-weight:700; font-size:13px; white-space:nowrap;
}
#pcIconBarRight i.fa{ font-size:20px; color:var(--vty-ink); line-height:1; }
#pcIconBarRight .dwg-acct:hover i.fa,
#pcIconBarRight .dwg-acct:hover b,
#pcIconBarRight .dwg-util:hover,
#pcIconBarRight .dwg-util:hover i.fa,
#pcIconBarRight .dwg-cart:hover i.fa,
#pcIconBarRight .dwg-cart:hover .dwg-cart-label{ color:var(--vty-brand) !important; }
#pcIconBarRight .dwg-acct-txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
#pcIconBarRight .dwg-acct-txt b{ font-size:13px; }
#pcIconBarRight .dwg-acct-txt small{ font-size:11px; color:var(--vty-soft); font-weight:500; }
#pcIconBarRight .dwg-cart{ position:relative; }
#pcIconBarRight .dwg-cart-badge{
  position:absolute; top:-7px; left:13px;
  background:var(--vty-sale); color:#fff; font-size:10px; font-weight:800;
  min-width:17px; height:17px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
@media (max-width:991px){
  #pcIconBarRight{ gap:16px; }
  #pcIconBarRight .dwg-acct-txt small{ display:none; }   /* tighten on small screens */
}
/* Sign Out — quieter than Help, only rendered when logged in (see header.asp) */
#pcIconBarRight .dwg-signout{ font-weight:600; color:var(--vty-soft) !important; }
#pcIconBarRight .dwg-signout:hover{ color:var(--vty-sale) !important; }

/* place-order / on-behalf banner — keep loud, on-brand */
.SPbanner{ background:var(--vty-sale) !important; }

/* ----------------------------------------------------------------------------
   MOBILE  (meanmenu builds .mean-bar / .mean-nav from .pc-nav)
---------------------------------------------------------------------------- */
.mean-container .mean-bar{ background:#fff !important; padding:8px 0; min-height:46px; border-bottom:1px solid var(--vty-line); }
.mean-container a.meanmenu-reveal{
  color:var(--vty-brand) !important; font-weight:800; font-family:var(--vty-hsans);
  text-transform:uppercase; letter-spacing:.06em;
}
.mean-container a.meanmenu-reveal span{ background:var(--vty-brand) !important; }
.mean-container .mean-nav{ background:#0a3157 !important; }
.mean-container .mean-nav ul li a{
  font-family:var(--vty-bsans); font-size:14px; color:#eaf1f8 !important;
  border-top:1px solid rgba(255,255,255,.08) !important; text-transform:none;
}
.mean-container .mean-nav ul li a.mean-expand{ border:0 !important; }
.mean-container .mean-nav ul li a:hover{ background:rgba(255,255,255,.06) !important; }
.mean-container .mean-nav ul li li a{ opacity:.9; padding-left:10%; }

@media (max-width:991px){
  #pcHeaderLeft,#pcHeaderCenter{ min-height:0; }
  .search-container{ max-width:none; margin:0; }
  #dabar{ font-size:11px; letter-spacing:.04em; }

  /* meanmenu injects .mean-bar (hamburger) as the FIRST child of <body>, above
     the announcement. Flex <body> as a column and use order to put the
     announcement on top; align-self:stretch + width:100% keep every child
     full-width so the flex switch doesn't shrink/offset the top corner. */
  body.mean-container{ display:flex !important; flex-direction:column !important; align-items:stretch !important; }
  body.mean-container > *{ order:3; width:100% !important; max-width:100% !important; align-self:stretch !important; margin-left:0 !important; margin-right:0 !important; }
  body.mean-container > .container-fluid:has(#dabar){ order:1; }   /* announcement first */
  body.mean-container > .mean-bar{ order:2; }                      /* hamburger bar second */

  /* hide the legacy mobile-cart strip ("The cart is empty.") — redundant now that
     the utility row has a proper cart icon with a count badge */
  .mobile-cart{ display:none !important; }
}

/* small screens: stack the search onto its own full-width line under the logo,
   instead of cramming it next to the logo where the input shrinks to a sliver.
   NOTE: the legacy pcHeaderFooter11.css has its OWN @media (max-width:450/600px)
   rules on #pcHSearchForm #pcHSearchSubmit with !important — so every search
   rule here is anchored on #pcHSearchForm to match/beat that 2-ID specificity. */
@media (max-width:767px){
  /* flex-column forces logo + search to stack regardless of legacy float/width */
  .peLogoRowMobile{ display:flex !important; flex-direction:column !important; align-items:stretch !important; }
  .peLogoRowMobile > div{ width:100% !important; max-width:100% !important; float:none !important; flex:0 0 auto !important; padding-left:0 !important; padding-right:0 !important; }
  .container-fluid .peLogoRowMobile{ margin-left:0 !important; margin-right:0 !important; }
  #pcHeaderLeft{ justify-content:flex-start !important; padding:6px 14px 0 !important; }   /* logo to the left, tight */
  #pcHeaderCenter{ padding-top:0 !important; padding-bottom:10px !important; justify-content:flex-start !important; display:block !important; width:100% !important; }

  /* block layout: input fills full width, round button tucked at its right,
     and "Advanced Search" drops onto its own small line below the box.
     Force the WHOLE parent chain to full width — the input was filling a narrow
     wrapper, not the screen. */
  #pcHeaderCenter #pcHSearchForm,
  #pcHeaderCenter #pcHSearchForm .search-wrapper-container,
  #pcHeaderCenter #pcHSearchForm .search-container{
    width:100% !important; max-width:100% !important; min-width:0 !important;
    margin:0 !important; float:none !important;
  }
  #pcHSearchForm .search-container{ display:block !important; position:relative !important; }
  #pcHeaderCenter{ padding-left:14px !important; padding-right:14px !important; box-sizing:border-box; }   /* small edge gutter; search fills the rest, DSG-style */
  #pcHSearchForm #pcHSearch{
    width:100% !important; height:50px !important; flex:none !important;
    padding-right:56px !important; box-sizing:border-box !important;
  }
  #pcHSearchForm #pcHSearchSubmit{
    position:absolute !important; right:5px !important; top:25px !important;
    transform:translateY(-50%) !important;
    width:40px !important; height:40px !important; border-radius:50% !important;
    flex:none !important; margin:0 !important;
  }
  #pcHeaderCenter #pcHSearchForm #advancedSearchLink,
  #pcHSearchForm #advancedSearchLink{
    position:static !important; transform:none !important;
    display:block !important; width:100% !important; text-align:center !important;
    border:0 none !important; border-left:0 none !important; border-right:0 none !important;
    box-shadow:none !important; outline:0 !important;
    padding:8px 0 0 !important; margin:0 !important;
    font-size:0 !important;                            /* hide the stacked ADVANCED/SEARCH text */
  }
  #pcHSearchForm #advancedSearchLink::after{
    content:"Advanced Search";
    font-family:var(--vty-hsans); font-weight:700; font-size:11.5px;
    letter-spacing:.03em; color:var(--vty-soft);
  }
  #pcHSearchForm #advancedSearchLink:hover::after{ color:var(--vty-brand); }
}


/* ----------------------------------------------------------------------------
   CUSTOMER SIGN-IN / REGISTER  (SignIn.asp)

   The login page never got a varsity pass, so it fell back to bare Bootstrap 3
   and looked orphaned next to the themed chrome. These rules restyle it from
   the --vty-* tokens: navy buttons, Archivo headings, Inter fields.

   SCOPE: every rule is anchored to #pcMain:has(form[name="LoginForm"]), which
   only matches the sign-in page. The generic #pcMain / .container-fluid /
   .pcForms / .pcErrorMessage classes used on cart, checkout and account pages
   are never touched. No header.asp or SignIn.asp changes -- pure overlay.
   Anchored on the #pcMain id (+ !important) to outrank pcStorefront.css.
---------------------------------------------------------------------------- */

/* center + constrain so the form isn't stranded top-left in a sea of white */
#pcMain:has(form[name="LoginForm"]){
  max-width:1040px !important; margin:0 auto !important;
  padding:34px 16px 56px !important; font-family:var(--vty-bsans);
}
#pcMain:has(form[name="LoginForm"]) > .row{
  display:flex !important; flex-wrap:wrap !important; gap:24px !important;
  align-items:stretch !important; margin:0 !important;
}

/* the two halves become clean, equal panels */
#pcMain:has(form[name="LoginForm"]) .leftCell,
#pcMain:has(form[name="LoginForm"]) .rightCell{
  flex:1 1 340px !important; width:auto !important; float:none !important;
  background:#fff !important; border:1px solid var(--vty-line) !important;
  border-radius:12px !important; padding:30px 30px 34px !important;
  box-sizing:border-box !important;
}
#pcMain:has(form[name="LoginForm"]) .rightCell{ background:#fafbfc !important; }
#pcMain:has(form[name="LoginForm"]) .leftCell > .container-fluid,
#pcMain:has(form[name="LoginForm"]) .rightCell > .container-fluid{ padding:0 !important; }

/* headings -- Archivo */
#pcMain:has(form[name="LoginForm"]) h1{
  font-family:var(--vty-hsans) !important; font-weight:800 !important;
  font-size:22px !important; color:var(--vty-brand) !important;
  margin:0 0 6px !important; letter-spacing:.01em;
}
#pcMain:has(form[name="LoginForm"]) .rightCell h1{ color:var(--vty-ink) !important; }

/* field rows: stack a full-width input under its label (kills the md-2/md-10 split) */
#pcMain:has(form[name="LoginForm"]) .pcForms .row{ margin:0 0 14px !important; }
#pcMain:has(form[name="LoginForm"]) .pcForms .row > [class*="col-"]{
  width:100% !important; flex:0 0 100% !important; max-width:100% !important;
  float:none !important; padding-left:0 !important; padding-right:0 !important;
}
#pcMain:has(form[name="LoginForm"]) .pcForms .row > .col-md-2{
  font-family:var(--vty-bsans) !important; font-weight:600 !important;
  font-size:13px !important; color:var(--vty-ink) !important; margin-bottom:5px !important;
}

/* the fields */
#pcMain:has(form[name="LoginForm"]) input[type="text"],
#pcMain:has(form[name="LoginForm"]) input[type="password"]{
  width:100% !important; height:44px !important; box-sizing:border-box !important;
  border:1.5px solid var(--vty-field-line) !important; border-radius:8px !important;
  background:#fff !important; padding:0 14px !important; margin:0 !important;
  font-family:var(--vty-bsans) !important; font-size:14.5px !important;
  color:var(--vty-ink) !important; box-shadow:none !important;
  transition:border-color .15s, box-shadow .15s;
}
#pcMain:has(form[name="LoginForm"]) input[type="text"]:focus,
#pcMain:has(form[name="LoginForm"]) input[type="password"]:focus{
  outline:none !important; border-color:var(--vty-brand) !important;
  box-shadow:0 0 0 3px rgba(13,59,102,.12) !important;
}

/* buttons -- on-brand navy, replacing the off-brand orange */
#pcMain:has(form[name="LoginForm"]) a.btn-store,
#pcMain:has(form[name="LoginForm"]) .btn-store,
#pcMain:has(form[name="LoginForm"]) a.btn-primary-store,
#pcMain:has(form[name="LoginForm"]) .btn-primary-store{
  display:inline-block !important; font-family:var(--vty-hsans) !important;
  font-weight:800 !important; font-size:13px !important; letter-spacing:.03em !important;
  text-transform:uppercase !important; color:#fff !important;
  background:var(--vty-brand) !important; border:0 !important; border-radius:8px !important;
  padding:12px 26px !important; cursor:pointer !important; text-decoration:none !important;
  transition:background .15s !important; margin-top:6px !important;
}
#pcMain:has(form[name="LoginForm"]) .btn-store:hover,
#pcMain:has(form[name="LoginForm"]) .btn-primary-store:hover{ background:var(--vty-brand-dark) !important; }
#pcMain:has(form[name="LoginForm"]) .btn-secondary-store{
  background:#fff !important; color:var(--vty-brand) !important;
  border:1.5px solid var(--vty-field-line) !important;
}
#pcMain:has(form[name="LoginForm"]) .btn-secondary-store:hover{ border-color:var(--vty-brand) !important; }

/* register-column copy + links */
#pcMain:has(form[name="LoginForm"]) .rightCell{ font-size:14px; line-height:1.6; color:var(--vty-soft); }
/* plain links go navy -- but EXCLUDE the .btn-* anchors, or their label paints navy-on-navy */
#pcMain:has(form[name="LoginForm"]) .leftCell a:not([class*="btn"]),
#pcMain:has(form[name="LoginForm"]) .rightCell a:not([class*="btn"]){ color:var(--vty-brand) !important; font-weight:600 !important; text-decoration:none !important; }
#pcMain:has(form[name="LoginForm"]) .leftCell a:not([class*="btn"]):hover,
#pcMain:has(form[name="LoginForm"]) .rightCell a:not([class*="btn"]):hover{ text-decoration:underline !important; }

/* status / error / success / info messages (scoped to sign-in only) */
#pcMain:has(form[name="LoginForm"]) .pcErrorMessage,
#pcMain:has(form[name="LoginForm"]) .pcSuccessMessage,
#pcMain:has(form[name="LoginForm"]) .pcInfoMessage{
  font-family:var(--vty-bsans) !important; font-size:13.5px !important;
  border-radius:8px !important; padding:10px 14px !important; margin-bottom:14px !important;
}
#pcMain:has(form[name="LoginForm"]) .pcErrorMessage{ background:#fdecec !important; color:var(--vty-sale) !important; border:1px solid #f3c2c2 !important; }
#pcMain:has(form[name="LoginForm"]) .pcSuccessMessage{ background:#e9f6ee !important; color:var(--vty-save) !important; border:1px solid #bfe3cc !important; }
#pcMain:has(form[name="LoginForm"]) .pcInfoMessage{ background:#eef4fa !important; color:var(--vty-brand) !important; border:1px solid #cfe0f0 !important; }

/* rein in the legacy spacer divs so they don't add big random gaps */
#pcMain:has(form[name="LoginForm"]) .pcSpacer{ height:8px !important; }

/* one column on phones */
@media (max-width:767px){
  #pcMain:has(form[name="LoginForm"]) > .row{ flex-direction:column !important; gap:18px !important; }
  #pcMain:has(form[name="LoginForm"]) .leftCell,
  #pcMain:has(form[name="LoginForm"]) .rightCell{ flex:1 1 auto !important; padding:24px 20px !important; }
}


/* ----------------------------------------------------------------------------
   CUSTOMER ACCOUNT DASHBOARD  (CustPref.asp)

   Post-login landing. Was bare ProductCart: <font> tags, inline gray rows,
   inline-JS hover swaps, an orange status badge, flat gray tiles. This gives
   it a varsity pass from the --vty-* tokens.

   SCOPE: anchored to #pcMain:has(.peCustMenuItem) -- the tile class only
   exists on this page, so cart/checkout/other account pages are untouched.
   Pure overlay, no CustPref.asp / header.asp changes. !important + the #pcMain
   id beat both pcStorefront.css AND the page's inline style="" attributes
   (inline styles are non-!important, so an !important rule still wins).
---------------------------------------------------------------------------- */

/* page frame: center + constrain */
#pcMain:has(.peCustMenuItem){
  max-width:1180px !important; margin:0 auto !important;
  padding:28px 16px 56px !important; font-family:var(--vty-bsans); color:var(--vty-ink);
}
#pcMain:has(.peCustMenuItem) .row{ margin-left:0 !important; margin-right:0 !important; }

/* neutralize deprecated <font> sizing/colors -> inherit theme type */
#pcMain:has(.peCustMenuItem) font{ font-family:var(--vty-bsans) !important; font-size:14px !important; color:inherit !important; }

/* page title strip (customer name + "My Account") -- drop the gray bar */
#pcMain:has(.peCustMenuItem) .col-xs-12[style*="E3E8ED"]:not(.peCustMenuItem){
  background:#fff !important; padding:0 0 6px !important;
}
#pcMain:has(.peCustMenuItem) .col-xs-12[style*="E3E8ED"]:not(.peCustMenuItem) font{
  font-family:var(--vty-hsans) !important; font-weight:800 !important;
  font-size:24px !important; color:var(--vty-brand) !important;
}

/* status badge: orange -> brand navy */
#pcMain:has(.peCustMenuItem) .LoginType{
  background:var(--vty-brand) !important; font-family:var(--vty-hsans) !important;
  font-weight:700 !important; border-radius:6px !important; letter-spacing:.04em !important;
}

/* account-info strips (#ECECEC) -> clean stacked rows */
#pcMain:has(.peCustMenuItem) [style*="ECECEC"]{
  background:#fff !important; border:0 !important; border-bottom:1px solid var(--vty-line) !important;
  padding:8px 2px !important; width:100% !important; max-width:600px !important;
  float:none !important; box-sizing:border-box !important;
}
#pcMain:has(.peCustMenuItem) [style*="ECECEC"] font{ color:var(--vty-soft) !important; }

/* gift-certificate fieldset + check form */
#pcMain:has(.peCustMenuItem) fieldset{
  border:1px solid var(--vty-line) !important; border-radius:10px !important;
  padding:16px 18px !important; max-width:560px !important;
}
#pcMain:has(.peCustMenuItem) legend{
  font-family:var(--vty-hsans) !important; font-weight:800 !important; font-size:15px !important;
  color:var(--vty-ink) !important; width:auto !important; padding:0 8px !important; border:0 !important;
}
#pcMain:has(.peCustMenuItem) input[type="text"]{
  height:40px !important; border:1.5px solid var(--vty-field-line) !important; border-radius:8px !important;
  padding:0 12px !important; font-family:var(--vty-bsans) !important; font-size:14px !important;
  color:var(--vty-ink) !important; box-sizing:border-box !important; background:#fff !important;
}
#pcMain:has(.peCustMenuItem) input[type="text"]:focus{
  outline:none !important; border-color:var(--vty-brand) !important; box-shadow:0 0 0 3px rgba(13,59,102,.12) !important;
}

/* messages */
#pcMain:has(.peCustMenuItem) .pcErrorMessage,
#pcMain:has(.peCustMenuItem) .pcSuccessMessage{
  font-family:var(--vty-bsans) !important; font-size:13.5px !important;
  border-radius:8px !important; padding:10px 14px !important; margin-bottom:14px !important;
}
#pcMain:has(.peCustMenuItem) .pcErrorMessage{ background:#fdecec !important; color:var(--vty-sale) !important; border:1px solid #f3c2c2 !important; }
#pcMain:has(.peCustMenuItem) .pcSuccessMessage{ background:#e9f6ee !important; color:var(--vty-save) !important; border:1px solid #bfe3cc !important; }

/* ---- the dashboard tiles: flat gray blocks -> real cards ----
   Layout rides on Bootstrap's own col widths (col-lg-3/md-4/sm-6/xs-12 =
   4/3/2/1 across), so it needs NOTHING from the parent container. Equal fixed
   height kills float-drop; an 8px transparent border (inside the border-box)
   creates the gap between cards WITHOUT changing the column width. ---- */
#pcMain:has(.peCustMenuItem) :has(> .peCustMenuItem){ margin:18px 0 0 !important; }
#pcMain:has(.peCustMenuItem) :has(> .peCustMenuItem)::after{ content:"" !important; display:block !important; clear:both !important; }

#pcMain:has(.peCustMenuItem) .peCustMenuItem{
  box-sizing:border-box !important; float:left !important; margin:0 !important;
  height:210px !important; overflow:hidden !important;
  border:8px solid transparent !important; background:#fff !important; background-clip:padding-box !important;
  box-shadow:inset 0 0 0 1px var(--vty-line) !important; border-radius:12px !important;
  padding:18px 16px !important; cursor:pointer !important; text-align:center !important;
  display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:center !important;
  transition:box-shadow .15s, transform .15s !important;
}
#pcMain:has(.peCustMenuItem) .peCustMenuItem:hover{
  box-shadow:inset 0 0 0 1px var(--vty-brand), var(--vty-shadow) !important; transform:translateY(-2px) !important;
}
#pcMain:has(.peCustMenuItem) .peCustMenuItem img{ height:46px !important; width:auto !important; display:inline-block !important; margin:0 auto 6px !important; }
#pcMain:has(.peCustMenuItem) .peCustMenuItem p{ margin:0 0 6px !important; }
#pcMain:has(.peCustMenuItem) .peCustMenuItem a{ text-decoration:none !important; }
#pcMain:has(.peCustMenuItem) .peCustMenuItem font[size="3"],
#pcMain:has(.peCustMenuItem) .peCustMenuItem font[color="#3C4E5E"]{
  font-family:var(--vty-hsans) !important; font-weight:800 !important; font-size:15px !important;
  color:var(--vty-brand) !important; text-transform:none !important;
}
#pcMain:has(.peCustMenuItem) .peCustMenuItem font[color="#000000"]{
  font-family:var(--vty-bsans) !important; font-weight:400 !important; font-size:12.5px !important;
  color:var(--vty-soft) !important; line-height:1.5 !important;
}

/* responsive HEIGHT only -- Bootstrap handles the 4/3/2/1 column widths */
@media (max-width:1199px){ #pcMain:has(.peCustMenuItem) .peCustMenuItem{ height:232px !important; } }
@media (max-width:991px){  #pcMain:has(.peCustMenuItem) .peCustMenuItem{ height:200px !important; } }
@media (max-width:600px){  #pcMain:has(.peCustMenuItem) .peCustMenuItem{ height:auto !important; overflow:visible !important; } }

/* =========================================================================
   DWG effective-price display — paste at the END of
   /ecommerce/pc/themes/varsity/theme.css
   Hooks: viewPrdCode.asp, pcShowProductP/L/M/H.asp, cs_img.asp
   ========================================================================= */

/* ===== Product DETAIL page: effective-price hero (scoped to .pcShowPrices) ===== */
.pcShowPrices{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:10px;row-gap:2px;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding:10px 0;margin:8px 0 14px;}
.pcShowPrices .pcEffectivePrice{display:inline-block;font-size:40px;line-height:1;font-weight:800;letter-spacing:-0.5px;color:#111;}
.pcShowPrices .strikethru .pcEffectivePrice{font-size:1em;font-weight:400;letter-spacing:0;color:inherit;}
.pcShowPrices .pcShowProductPrice,.pcShowPrices .pcShowProductPriceW{order:1;margin:0;font-size:14px;}
.pcShowPrices .strikethru{font-size:14px !important;font-weight:400;color:#999;}
.pcShowPrices .pcShowProductListPrice{font-size:14px !important;font-weight:400;color:#999;text-decoration:line-through;}
.pcShowPrices :is(.pcShowProductPrice,.pcShowProductPriceW):has(.strikethru),
.pcShowPrices :is(.pcShowProductPrice,.pcShowProductPriceW):has(.pcShowProductListPrice){order:2;margin:0 0 6px;}
.pcShowPrices .pcShowProductMSRPPrice{order:3;margin:0 0 6px;font-size:14px;font-weight:400;font-style:normal;color:#888;}
.pcShowPrices .pcShowProductSavings{order:4;flex-basis:100%;margin:0;font-size:14px;font-weight:600;color:#1a7f37;}
.pcShowPrices .pcSmallText{flex-basis:100%;order:5;}
.pcShowPrices .pcPriceLabel{display:block;font-size:12px;font-weight:600;color:#6b7280;margin:0 0 1px;letter-spacing:.01em;}
.pcShowPrices .pcPriceLabelGeneric{display:none;}
@media (max-width:600px){.pcShowPrices .pcEffectivePrice{font-size:32px;}}

/* ===== Category CARDS — H / grid (the active view) ===== */
/* keep MSRP + price together, directly under the name and ABOVE the buttons */
.pcShowProductsH .peShowProductInfoH{display:flex;flex-direction:column;}
.pcShowProductsH .peShowProductInfoH > *{order:5;}
.pcShowProductsH .peShowProductInfoH > .pcShowProductName{order:1;}
.pcShowProductsH .peShowProductInfoH > .pcShowProductMSRPPriceCat{order:2;}
.pcShowProductsH .peShowProductInfoH > span.pcShowProductPrice,
.pcShowProductsH .peShowProductInfoH > .pcShowProductPriceWCat{order:3;}
.pcShowProductsH .peShowProductInfoH > .pcShowProductLink{order:9;}
.pcShowProductsH span.pcShowProductPrice,
.pcShowProductsH .pcShowProductPriceWCat{font-size:20px;font-weight:800;color:#111;line-height:1.1;margin:2px 0;}
.pcShowProductsH .pcShowProductMSRPPriceCat{font-size:12px;font-weight:400;color:#888;margin:0;}
.pcShowProductsH .pcShowProductSavings{font-size:12px;font-weight:600;color:#1a7f37;margin:0;}
.pcShowProductsH .pcPriceLabel{display:block;font-size:11px;font-weight:600;color:#6b7280;margin:0;letter-spacing:.01em;}
.pcShowProductsH .pcPriceLabelGeneric{display:none;}

/* ===== Category CARDS — P / L / M view modes ===== */
.pcShowProductsP .pcShowProductPrice,.pcShowProductsP .pcShowProductPriceW,
.pcShowProductsL .pcShowProductPrice,.pcShowProductsL .pcShowProductPriceW,
.pcShowProductsM .pcShowProductPrice,.pcShowProductsM .pcShowProductPriceW{font-size:20px;font-weight:800;color:#111;line-height:1.1;margin:2px 0;}
.pcShowProductsP .pcPriceLabel,.pcShowProductsL .pcPriceLabel,.pcShowProductsM .pcPriceLabel{display:block;font-size:11px;font-weight:600;color:#6b7280;margin:0;letter-spacing:.01em;}
.pcShowProductsP .pcPriceLabelGeneric,.pcShowProductsL .pcPriceLabelGeneric,.pcShowProductsM .pcPriceLabelGeneric{display:none;}
.pcShowProductsP .pcShowProductListPrice,.pcShowProductsL .pcShowProductListPrice,.pcShowProductsM .pcShowProductListPrice{font-size:12px;font-weight:400;color:#888;margin:0;}
.pcShowProductsP .pcShowProductSavings,.pcShowProductsL .pcShowProductSavings,.pcShowProductsM .pcShowProductSavings{font-size:12px;font-weight:600;color:#1a7f37;margin:0;}
.pcShowProductsP:has(.pcShowProductPriceW) .pcShowProductPrice,.pcShowProductsL:has(.pcShowProductPriceW) .pcShowProductPrice,.pcShowProductsM:has(.pcShowProductPriceW) .pcShowProductPrice,
.pcShowProductsP:has(.pcShowProductPriceW) .pcShowProductSavings,.pcShowProductsL:has(.pcShowProductPriceW) .pcShowProductSavings,.pcShowProductsM:has(.pcShowProductPriceW) .pcShowProductSavings{display:none;}

/* ===== Cross-sell tiles: MSRP small + one bold effective price (matches product page) ===== */
.pcCrossSellInfoH .pcCSMsrp{font-size:11px;font-weight:400;color:#888;margin:0;}
.pcCrossSellInfoH .pcCSPriceMain .pcCrossSellShowProductMSRPPriceH,
.pcCrossSellInfoH .pcCSPriceEff{font-size:20px;font-weight:800;color:#111;line-height:1.1;margin:2px 0;}
.pcCrossSellInfoH .pcPriceLabel{display:block;font-size:11px;font-weight:600;color:#6b7280;margin:0;letter-spacing:.01em;}
.pcCrossSellInfoH .pcPriceLabelGeneric{display:none;}
.pcCrossSellInfoH .pcShowProductSavings{font-size:11px;font-weight:600;color:#1a7f37;margin:0;}
/* a real (>0) dealer/category price is now guarded in cs_img.asp; hide the redundant base only then */
.pcCrossSellInfoH:has(.pcCSPriceEff) .pcCSPriceMain{display:none;}

/* Cart action buttons: keep them auto-width on desktop so Continue Shopping
   isn't pushed off the right edge. Mobile full-width stacking stays as-is. */
@media (min-width: 768px) {
  #pcMain a.btn.btn-store.btn-secondary-store {
    display: inline-block !important;
    width: auto !important;
    float: none !important;
    vertical-align: middle;
    margin-left: 8px;
  }
}
/* =====================================================================
   DWG - Shop By Category  (v7 - matches the REAL table markup pcShowCategoryP.asp)
   Replaces the previous DWG block. .asp unchanged. Scoped to .dwg-cat-card.
   These cards are a <table class="pcShowCategoryP"> with an image <td> + text <td>;
   the empty image cell was holding the row tall (the void). Collapse the table.
   ===================================================================== */

#pcMain.viewcategories .dwg-cat-card{ font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
#pcMain.viewcategories .dwg-cat-card.peCatColMargin{ margin-bottom:18px !important; }

/* card; do not stretch to equal-height (that floated the content) */
#pcMain.viewcategories .dwg-cat-card{ align-self:flex-start !important; }
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryBg.cath2{
  background:#fff !important; border:1px solid #e4e8ec !important; border-radius:12px !important;
  padding:24px 20px !important; height:auto !important; min-height:0 !important;
  display:block !important;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryBg.cath2:hover,
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryBgHover{ border-color:#0e2a47 !important; transform:translateY(-3px); box-shadow:0 10px 28px rgba(14,42,71,.10); }

/* flatten the wrapper + the category TABLE into normal block flow */
#pcMain.viewcategories .dwg-cat-card .peShowProductInfoH,
#pcMain.viewcategories .dwg-cat-card .peShowCatInfo,
#pcMain.viewcategories .dwg-cat-card .pcShowCategory,
#pcMain.viewcategories .dwg-cat-card .peShowProductsH,
#pcMain.viewcategories .dwg-cat-card table.pcShowCategoryP,
#pcMain.viewcategories .dwg-cat-card table.pcShowCategoryP tbody,
#pcMain.viewcategories .dwg-cat-card table.pcShowCategoryP tr,
#pcMain.viewcategories .dwg-cat-card table.pcShowCategoryP td{
  display:block !important; width:100% !important; height:auto !important; min-height:0 !important;
  margin:0 !important; padding:0 !important; border:0 !important; max-width:none !important;
  overflow:visible !important; vertical-align:top !important; text-align:center !important;
}

/* kill the empty image cell entirely (both div and td variants) */
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryImage{ display:none !important; }

/* ICON drawn at the top of the text cell (covers H .pcShowCategoryInfo and P .pcShowCategoryInfoP) */
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfo,
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfoP{ text-align:center !important; }
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfo::before,
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfoP::before{
  content:"" !important; display:block !important; width:64px !important; height:64px !important;
  margin:0 auto 12px !important; background-repeat:no-repeat !important; background-position:center !important;
  background-size:contain !important; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2732%27%20fill%3D%27%230e2a47%27%2F%3E%3Crect%20x%3D%2718%27%20y%3D%2718%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20x%3D%2734%27%20y%3D%2718%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20x%3D%2718%27%20y%3D%2734%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20x%3D%2734%27%20y%3D%2734%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
}

/* TITLE (link inside .pcShowCategoryInfo[P] / its h3) */
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfo p,
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfoP h3{ margin:0 0 10px !important; font-weight:600 !important; }
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfo a,
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfoP h3 a{
  font-size:15px !important; font-weight:600 !important; line-height:1.3 !important;
  color:#0e2a47 !important; text-decoration:none !important;
}
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfo a:hover,
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfoP h3 a:hover{ color:#143456 !important; }
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryInfoP p{ font-size:13px !important; color:#5a6675 !important; margin:0 0 8px !important; }

/* SUBCATEGORY LINKS */
#pcMain.viewcategories .dwg-cat-card .peShowCatInfo ul{ list-style:none !important; margin:0 0 8px !important; padding:0 !important; width:100% !important; }
#pcMain.viewcategories .dwg-cat-card .peShowCatInfo li{ margin:0 0 6px !important; }
#pcMain.viewcategories .dwg-cat-card .peShowCatInfo li a{ font-size:13.5px !important; line-height:1.6 !important; color:#0e2a47 !important; text-decoration:none !important; }
#pcMain.viewcategories .dwg-cat-card .peShowCatInfo li a:hover{ color:#143456 !important; text-decoration:underline !important; }

/* SHOW ALL */
#pcMain.viewcategories .dwg-cat-card .peCatShowAll{ margin-top:6px !important; }
#pcMain.viewcategories .dwg-cat-card .peCatShowAll a{ font-size:13px !important; font-weight:600 !important; color:#0e2a47 !important; text-decoration:none !important; }
#pcMain.viewcategories .dwg-cat-card .peCatShowAll a:hover{ text-decoration:underline !important; }

/* PER-CATEGORY COLOR (icon + Show All), covering both info-cell class names */
#pcMain.viewcategories .dwg-cat-card.cat-surveillance .pcShowCategoryInfo::before, #pcMain.viewcategories .dwg-cat-card.cat-surveillance .pcShowCategoryInfoP::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2732%27%20fill%3D%27%233a6ea5%27%2F%3E%3Crect%20x%3D%2715%27%20y%3D%2726%27%20width%3D%2723%27%20height%3D%2713%27%20rx%3D%272.5%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M38%2029%20L49%2024%20V41%20L38%2036%20Z%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20x%3D%2720%27%20y%3D%2739%27%20width%3D%273%27%20height%3D%278%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20x%3D%2715%27%20y%3D%2746%27%20width%3D%2713%27%20height%3D%273%27%20rx%3D%271.5%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") !important; }
#pcMain.viewcategories .dwg-cat-card.cat-surveillance .peCatShowAll a{ color:#3a6ea5 !important; }
#pcMain.viewcategories .dwg-cat-card.cat-access .pcShowCategoryInfo::before, #pcMain.viewcategories .dwg-cat-card.cat-access .pcShowCategoryInfoP::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2732%27%20fill%3D%27%232e9e5b%27%2F%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2730%27%20r%3D%278%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%2F%3E%3Crect%20x%3D%2729%27%20y%3D%2728%27%20width%3D%2721%27%20height%3D%274%27%20rx%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20x%3D%2742%27%20y%3D%2732%27%20width%3D%273.5%27%20height%3D%276%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20x%3D%2747%27%20y%3D%2732%27%20width%3D%273.5%27%20height%3D%276%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") !important; }
#pcMain.viewcategories .dwg-cat-card.cat-access .peCatShowAll a{ color:#1b6238 !important; }
#pcMain.viewcategories .dwg-cat-card.cat-intrusion .pcShowCategoryInfo::before, #pcMain.viewcategories .dwg-cat-card.cat-intrusion .pcShowCategoryInfoP::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2732%27%20fill%3D%27%23d97534%27%2F%3E%3Cpath%20d%3D%27M32%2013%20L48%2019%20V33%20C48%2043%2041%2049%2032%2052%20C23%2049%2016%2043%2016%2033%20V19%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") !important; }
#pcMain.viewcategories .dwg-cat-card.cat-intrusion .peCatShowAll a{ color:#ae5c27 !important; }
#pcMain.viewcategories .dwg-cat-card.cat-network .pcShowCategoryInfo::before, #pcMain.viewcategories .dwg-cat-card.cat-network .pcShowCategoryInfoP::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2732%27%20fill%3D%27%230e2a47%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2717%27%20r%3D%275%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%2745%27%20r%3D%275%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2745%27%20cy%3D%2745%27%20r%3D%275%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M32%2017%20L19%2045%20M32%2017%20L45%2045%20M19%2045%20L45%2045%27%20stroke%3D%27%23fff%27%20stroke-width%3D%273%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E") !important; }
#pcMain.viewcategories .dwg-cat-card.cat-network .peCatShowAll a{ color:#0e2a47 !important; }
#pcMain.viewcategories .dwg-cat-card.cat-fire .pcShowCategoryInfo::before, #pcMain.viewcategories .dwg-cat-card.cat-fire .pcShowCategoryInfoP::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2732%27%20fill%3D%27%23c1272d%27%2F%3E%3Cpath%20d%3D%27M32%2012%20C42%2024%2044%2031%2039%2039%20C45%2037%2045%2029%2045%2029%20C49%2036%2048%2046%2039%2051%20C35%2053%2027%2053%2023%2050%20C15%2045%2017%2034%2023%2031%20C23%2035%2026%2037%2027%2036%20C24%2027%2028%2019%2032%2012%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") !important; }
#pcMain.viewcategories .dwg-cat-card.cat-fire .peCatShowAll a{ color:#c1272d !important; }
#pcMain.viewcategories .dwg-cat-card.cat-av .pcShowCategoryInfo::before, #pcMain.viewcategories .dwg-cat-card.cat-av .pcShowCategoryInfoP::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2732%27%20fill%3D%27%237a5bb0%27%2F%3E%3Crect%20x%3D%2716%27%20y%3D%2727%27%20width%3D%278%27%20height%3D%2710%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M24%2027%20L35%2018%20V46%20L24%2037%20Z%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M40%2024%20C45%2029%2045%2035%2040%2040%27%20stroke%3D%27%23fff%27%20stroke-width%3D%273%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M44%2020%20C52%2028%2052%2036%2044%2044%27%20stroke%3D%27%23fff%27%20stroke-width%3D%273%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") !important; }
#pcMain.viewcategories .dwg-cat-card.cat-av .peCatShowAll a{ color:#4a3a73 !important; }


/* ---------------------------------------------------------------------
   v7.1 - kill the card's legacy top spacing (pcStorefront.css:1153 .cath2)
   The empty band above the icon was padding/margin on .pcShowCategoryBg.cath2.
   These selectors carry id + 4 classes, so they outrank the legacy .cath2 rule
   no matter the load order.
   --------------------------------------------------------------------- */
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryBg.cath2,
#pcMain.viewcategories .dwg-cat-card.peCatColMargin .pcShowCategoryBg.cath2{
  margin:0 !important;
  padding:22px 20px !important;
  min-height:0 !important;
  height:auto !important;
  width:auto !important;
}
/* first child inside the card must sit flush at the top (no inherited top gap) */
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryBg.cath2 > *:first-child,
#pcMain.viewcategories .dwg-cat-card .peShowCatInfo > *:first-child,
#pcMain.viewcategories .dwg-cat-card .peShowProductInfoH > *:first-child{
  margin-top:0 !important; padding-top:0 !important;
}

/* ---------------------------------------------------------------------
   v7.2 - stop equal-height stretch. The row .pePrdsRow is display:flex,
   so the column divs stretch to the tallest card and the icon floats in
   the middle of short cards. Pin the columns (and the card) to the top
   and to their natural height. Scoped via .dwg-cat-card -> drill-down safe.
   --------------------------------------------------------------------- */
#pcMain.viewcategories .row.pePrdsRow{ align-items:flex-start !important; }
#pcMain.viewcategories .peCatColMargin.dwg-cat-card{
  align-self:flex-start !important; height:auto !important;
}
#pcMain.viewcategories .dwg-cat-card .pcShowCategoryBg.cath2{
  height:auto !important; align-self:flex-start !important;
}