.shopnow{
  background-color: #006532;
  justify-content: center;
  

}

/*All this is the top banner*/
#singlebanner_168935{
  padding: 0px !important;
  margin: 0px;
}
.col col-sm-12 col-md-12 col-lg-12 singlebanner_container{
  color: #006532;
 
}
header .header-full>div.headersection-3 {
  padding: 13px 0px;
  /*background-color: #006532;*/
}

/*This is for the "Shop Popular Categories & view all text*/
div.col col-xs-6 title-wrapper h1, h2, h3, h4, h5, h6, p {
  margin: 15px 0 0 10px;
}
.tabbed-boxes .header-wrapper .link-wrapper a {
  margin: 20px 0 0 10px;
}


/*GROUP SECTIONS*/
nav.menu .catalog-block ul.catalog>li>a {
  justify-content: center;
  height: 10em;
}
nav.menu .catalog-block ul.catalog>li>a{
  font-weight: bold;
  font-size: 1em;
  border: 1px;
 
}


nav.menu .catalog-block ul.catalog>li>a:hover{
  background-color: #e5e5e5;
  /*text-decoration: underline;*/
}
/*This is currently not the best. Instead of using nth-child selector, the class of the li element should be specified. Need to designate class for target child.
Actually, this code isn't even used anymore, but I'll leave it in in case I need it someday.
nav.menu .catalog-block ul.catalog>li:nth-child(12) {
  font-size: .836em;
}*/

<!--/*SUB-MENUS*/-->
/*DOUG FIR*/
nav.menu .catalog-block ul.catalog>li.dougfir .submenu .submenucontainer {
  height: 135px !important;
}

/*PRESSURE TREATED*/
nav.menu .catalog-block ul.catalog>li.ptreated .submenu .submenucontainer {
  height: 70px !important;
}
 /*panels*/
 nav.menu .catalog-block ul.catalog>li.panels .submenu .submenucontainer {
  height: 180px !important;  
}
/*MOULDING*/
nav.menu .catalog-block ul.catalog>li.moulding .submenu .submenucontainer {
  height: 135px !important;
}
/*REDWOOD*/
nav.menu .catalog-block ul.catalog>li.redwood .submenu .submenucontainer {
  height: 135px !important;
}
/*SIDING*/
nav.menu .catalog-block ul.catalog>li.siding .submenu .submenucontainer {
  height: 135px !important;
}
/*FASTENERS*/
nav.menu .catalog-block ul.catalog>li.fasteners .submenu .submenucontainer {
  height: 323px !important;
}
/*BUILDING HARDWARE*/
nav.menu .catalog-block ul.catalog>li.bhard .submenu .submenucontainer {
  height: 75px !important;
}

/*Simpson*/
nav.menu .catalog-block ul.catalog>li.simpson .submenu .submenucontainer {
  height: 800px !important;
}

/*Blades, Bits, & Tools*/
nav.menu .catalog-block ul.catalog>li.bladesbitstools .submenu .submenucontainer {
  height: 450px !important;
}

/*SUNDRIES*/
nav.menu .catalog-block ul.catalog>li.sundries .submenu .submenucontainer {
  height: 180px !important;
}
/*ENGINEERED LUMBER*/
nav.menu .catalog-block ul.catalog>li.engineered .submenu .submenucontainer {
  height: 75px !important;
}
/*CONSTRUCTION PRODUCTS*/
nav.menu .catalog-block ul.catalog>li.cproducts .submenu .submenucontainer {
  height: 650px !important;
}

/* main menu - preventing the 8th and following items from getting hidden on smaller screens */
.header-full .menu .catalog>li:nth-child(n+10) { display: inline-block; }

/* main menu - adjusting font size relative to the window width */
.menu ul.catalog > li > a { font-size: 1vw; }

/* main menu - decreasing the space between the elements in the main menu */
.menu .catalog li { padding: 0; }

/* main menu - preventing the 8th and following items from getting hidden on smaller screens */
.header-full .menu .catalog>li:nth-child(n+10) { display: inline-block; }

/*******************/
/* POPULAR CATS */
.popular-cats-widget .icon-text {
  display: block !important;
} 
/*KEEPS TEXT VISIBLE AT ALL TIMES*/
/*******************/

/* Warning, everything below this is experimental. If everything breaks, delete this.*/
/* =====================================================================
   SUNNYVALE LUMBER — Custom CSS (Evo X "Marta" theme / Spruce)
   Paste into your theme's custom CSS block.
   Safe visual polish only: no grid, layout, or pricing-logic changes.
   ---------------------------------------------------------------------
   SET ONE THING: change --svl-accent to your brand color.
   ===================================================================== */

:root {
  --svl-accent: #13b161 !important;      /* ← your primary brand color   */
  --svl-accent-dark: #006532 !important; /* ← a slightly darker shade    */
  --svl-ink: #1a1a1a !important;
  --svl-soft: #f4f6f8 !important;
}

/* ---------- 1. Accessibility: visible keyboard focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--svl-accent) !important;
  outline-offset: 2px !important;
}

/* ---------- 2. Sticky header + search ---------- */
.header-sticky { box-shadow: 0 2px 10px rgba(0,0,0,.08) !important; }

/* Bigger, cleaner search field — the contractor's main tool */
.widgetsearch .ajax-search-control {
  height: 46px !important;
  font-size: 16px !important;
  border-radius: 6px !important;
  padding-left: 14px !important;
}

/* Make the photo / image-search (camera) trigger obvious — it's a differentiator */
.ai-search-trigger {
  border-radius: 6px !important;
  background: var(--svl-soft) !important;
  color: var(--svl-accent) !important;
  padding: 6px 10px !important;
  transition: background .15s ease, color .15s ease !important;
}
.ai-search-trigger:hover { background: var(--svl-accent) !important; color: #fff !important; }
.ai-search-trigger:hover .fa { color: #fff !important; }
.ai-search-trigger .fa { font-size: 18px !important; }

.header-links a { transition: opacity .15s ease !important; }
.header-links a:hover { text-decoration: underline !important; }

/* ---------- 3. Main navigation ---------- */
.menu .catalog > li > a { transition: color .15s ease !important; }
.menu .catalog > li:hover > a { color: var(--svl-accent) !important; }
.menu .submenu {
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
  border-top: 3px solid var(--svl-accent) !important;
}

/* ---------- 4. Product cards ---------- */
.tile.item.product {
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.tile.item.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.12) !important;
}

/* Uniform image area so the grid lines up regardless of source image */
.tile.item.product .imgthumbnail {
  height: 190px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.tile.item.product .imgthumbnail img {
  max-height: 190px !important;
  width: auto !important;
  object-fit: contain !important;
  transition: transform .25s ease !important;
}
.tile.item.product:hover .imgthumbnail img { transform: scale(1.05) !important; }

/* Even card heights: clamp long product names to two lines */
.tile.item.product .product-name a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.8em !important;
  line-height: 1.4 !important;
}

/* Quick View hover */
.showquickview { transition: background .15s ease, color .15s ease !important; }
.showquickview:hover {
  background: var(--svl-accent) !important;
  color: #fff !important;
  border-color: var(--svl-accent) !important;
}

/* ---------- 5. Price + action buttons ---------- */
.price-label.has-price { font-weight: 700 !important; color: var(--svl-ink) !important; }

/* Turn "Call for price" from a dead-end into a clean, intentional badge */
.price-call {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--svl-soft) !important;
  color: var(--svl-ink) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

/* DELIVERY / PICK-UP: consistent hover + a little breathing room */
.flex-buttons .flex-left { padding-right: 4px !important; }
.flex-buttons .flex-right { padding-left: 4px !important; }
.btn.btn-primary:hover,
.btn-add-to-cart:hover,
.btn-add-to-cart-collection:hover,
.btn-list.is-master:hover { filter: brightness(.93) !important; }



/* ---------- 6. Carousel section headings ---------- */
.sidebar-content > h3 { position: relative !important; padding-bottom: 12px !important; }
.sidebar-content > h3::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important; bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 56px !important; height: 3px !important;
  background: var(--svl-accent) !important;
}

/* Remove the accent underline from Featured Items heading */
.item-merchandising .sidebar-content > h3::after,
.merchandising-carousel .sidebar-content > h3::after {
  display: none !important;
}

/* =====================================================================
   FEATURED ITEMS — align with surrounding .container sections.
   The merchandising widget sits in .container-fluid (full width);
   this caps it to .container widths so it's equidistant at every
   breakpoint instead of running edge-to-edge.
   ===================================================================== */
/* ---------- Featured Items — full width, eased off the edges ---------- */
.container-fluid:has(.merchandisingcontent_container) {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* ---------- 7. Footer ---------- */
.footer .quicklinks a, .footer .contacts a { transition: color .15s ease !important; }
.footer .quicklinks a:hover, .footer .contacts a:hover { color: var(--svl-accent) !important; }

/* =====================================================================
   POPULAR CATEGORIES (.svl-cats-forced) — force hover state always on,
   smoothly. Structure: .tabbed-box > ::before (overlay) + img + <h2>.
   ===================================================================== */

/* =====================================================================
   POPULAR CATEGORIES (.svl-cats-forced) — force hover state, smoothly.
   Overlay is a background-color layer (not opacity), so set the shade
   directly. Adjust the .45 alpha to match your real hover darkness.
   ===================================================================== */

.svl-cats-forced .tabbed-box,
.svl-cats-forced .tabbed-box::before,
.svl-cats-forced .tabbed-box h2 {
  transition: all .25s ease !important;
}

/* Overlay: set to hover shade instead of forcing full opacity */
.svl-cats-forced .tabbed-box::before {
  background: rgba(0, 0, 0, 0.45) !important;   /* ← tune this alpha */
  opacity: 1 !important;
}

/* Title stays on */
.svl-cats-forced .tabbed-box h2 {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Overlay deepens a touch on hover (base is .45 from before) */
.svl-cats-forced .tabbed-box:hover::before {
  background: rgba(0,0,0,0.60) !important;   /* ← a bit darker than resting */
}

/* Shop by brand — underline uses the dark accent instead of light */
.brandmerchandising-carousel .sidebar-content > h3::after {
  background: var(--svl-accent-dark) !important;
}