:root {
  /* Font Sizes */
  --font-xs: 0.75rem;
  --font-s: 0.875rem;
  --font-m: 1rem;
  --font-l: 1.25rem;
  --font-xl: 1.5rem;
  --font-xxl: 2rem;

  /* Colors */
  --primary: #005500;
  --primary-ultra-dark: #003300;
  --secondary: #ffb400;
  --tertiary: #f4f1e9;
  --white: #ffffff;
  --black: #000000;
  
  /* Primary Transparents - #005500 */
  --primary-trans-90: rgba(0, 85, 0, 0.9);
  --primary-trans-80: rgba(0, 85, 0, 0.8);
  --primary-trans-70: rgba(0, 85, 0, 0.7);
  --primary-trans-60: rgba(0, 85, 0, 0.6);
  --primary-trans-50: rgba(0, 85, 0, 0.5);
  --primary-trans-40: rgba(0, 85, 0, 0.4);
  --primary-trans-30: rgba(0, 85, 0, 0.3);
  --primary-trans-20: rgba(0, 85, 0, 0.2);
  --primary-trans-10: rgba(0, 85, 0, 0.1);

  /* Primary Ultra Dark Transparents - #003300 */
  --primary-ultra-dark-trans-90: rgba(0, 51, 0, 0.9);
  --primary-ultra-dark-trans-80: rgba(0, 51, 0, 0.8);
  --primary-ultra-dark-trans-70: rgba(0, 51, 0, 0.7);
  --primary-ultra-dark-trans-60: rgba(0, 51, 0, 0.6);
  --primary-ultra-dark-trans-50: rgba(0, 51, 0, 0.5);
  --primary-ultra-dark-trans-40: rgba(0, 51, 0, 0.4);
  --primary-ultra-dark-trans-30: rgba(0, 51, 0, 0.3);
  --primary-ultra-dark-trans-20: rgba(0, 51, 0, 0.2);
  --primary-ultra-dark-trans-10: rgba(0, 51, 0, 0.1);

  /* Secondary Transparents - #ffb400 */
  --secondary-trans-90: rgba(255, 180, 0, 0.9);
  --secondary-trans-80: rgba(255, 180, 0, 0.8);
  --secondary-trans-70: rgba(255, 180, 0, 0.7);
  --secondary-trans-60: rgba(255, 180, 0, 0.6);
  --secondary-trans-50: rgba(255, 180, 0, 0.5);
  --secondary-trans-40: rgba(255, 180, 0, 0.4);
  --secondary-trans-30: rgba(255, 180, 0, 0.3);
  --secondary-trans-20: rgba(255, 180, 0, 0.2);
  --secondary-trans-10: rgba(255, 180, 0, 0.1);

  /* Tertiary Transparents - #f4f1e9 */
  --tertiary-trans-90: rgba(244, 241, 233, 0.9);
  --tertiary-trans-80: rgba(244, 241, 233, 0.8);
  --tertiary-trans-70: rgba(244, 241, 233, 0.7);
  --tertiary-trans-60: rgba(244, 241, 233, 0.6);
  --tertiary-trans-50: rgba(244, 241, 233, 0.5);
  --tertiary-trans-40: rgba(244, 241, 233, 0.4);
  --tertiary-trans-30: rgba(244, 241, 233, 0.3);
  --tertiary-trans-20: rgba(244, 241, 233, 0.2);
  --tertiary-trans-10: rgba(244, 241, 233, 0.1);

  /* Black Transparents - #000000 */
  --black-trans-90: rgba(0, 0, 0, 0.9);
  --black-trans-80: rgba(0, 0, 0, 0.8);
  --black-trans-70: rgba(0, 0, 0, 0.7);
  --black-trans-60: rgba(0, 0, 0, 0.6);
  --black-trans-50: rgba(0, 0, 0, 0.5);
  --black-trans-40: rgba(0, 0, 0, 0.4);
  --black-trans-30: rgba(0, 0, 0, 0.3);
  --black-trans-20: rgba(0, 0, 0, 0.2);
  --black-trans-10: rgba(0, 0, 0, 0.1);

  /* White Transparents - #ffffff */
  --white-trans-90: rgba(255, 255, 255, 0.9);
  --white-trans-80: rgba(255, 255, 255, 0.8);
  --white-trans-70: rgba(255, 255, 255, 0.7);
  --white-trans-60: rgba(255, 255, 255, 0.6);
  --white-trans-50: rgba(255, 255, 255, 0.5);
  --white-trans-40: rgba(255, 255, 255, 0.4);
  --white-trans-30: rgba(255, 255, 255, 0.3);
  --white-trans-20: rgba(255, 255, 255, 0.2);
  --white-trans-10: rgba(255, 255, 255, 0.1);


  /* Border Radius */
  --radius-xs: 2.5px;
  --radius-s: 5px;
  --radius-m: 10px;
  --radius-circle: 100px;

  /* Box Shadow */
  --shadow-light: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
  --shadow-dark: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);

  /* Padding */
  --padding-xs: 0.25rem;
  --padding-s: 0.5rem;
  --padding-m: 1rem;
  --padding-l: 1.5rem;
  --padding-xl: 2rem;
  --padding-xxl: 3rem;

  /* Spacing (Margins / Gaps) */
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;
}

/* CUSTOM TOOLS SECTION */
div.customertools .customertools-container {
  background: #f2f2f2 !important;
}

/* PRODUCT PAGE */
.delivery_pickup {
  text-align: left;
  margin-top: 17px;
}

.va-product-box-row a {
  min-height: 250px;
  color: var(--black);
}

.productsummary_container .productdetails .prod-code span {
  background-color: var(--white);
  color: var(--black);
}

.productspecs_container .tech-specs .item:nth-child(odd) {
  background-color: #efefef;
}

/* HEADER */

/* Level 2 Category Menu Headers */
header .header-full .menu .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a {
  font-weight: 700;
}

/* Header Menu Text */
nav.menu .cd-dropdown-wrapper,
nav.menu .cd-dropdown-wrapper .cd-dropdown-trigger {
  color: var(--white);
}

/* Header Dropdown Arrow */
nav.menu .cd-dropdown-wrapper .cd-dropdown-trigger:after,
nav.menu .cd-dropdown-wrapper .cd-dropdown-trigger:before {
  background: var(--white);
}

/* Header Menu Hover */
.header-full .cd-dropdown-wrapper:hover,
.menu .container div.menuitem:hover {
  border-radius: var(--radius-s);
}

/* Header Menu */
/* Add Dropdown Arrow*/
.has-submenu > a::after {
  content: '▼';
  font-size: 0.6rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  display: inline-block;
  transition: transform 0.2s ease;
  color: currentColor; /* inherits the link's color */
}

nav.menu .catalog-block ul.catalog>li .submenu .submenucontainer>li {
 margin-bottom: var(--space-xs); 
}

.headermenu_container {
  display: flex;
  justify-content: center;
  width: 100%;
}

nav.menu .catalog-block ul.catalog > li > a {
  color: var(--white);
  font-size: var(--font-m);
  font-weight: 500;
}

nav.menu .catalog-block ul.catalog > li .submenu .submenucontainer > li > a {
  font-family: 'Roboto';
  color: var(--black);
  padding: var(--padding-m);
  border-radius: var(--radius-s);
}

nav.menu .catalog-block ul.catalog > li .submenu .submenucontainer > li > a:focus-visible,
nav.menu .catalog-block ul.catalog > li .submenu .submenucontainer > li > a:hover {
  background-color: var(--primary);
  text-decoration: none;
  color: var(--white);
}

header .header-full > div:last-of-type {
  border-bottom: none;
  background-color: var(--primary-ultra-dark);
}

nav.menu .catalog-block ul.catalog>li>a:focus-visible, nav.menu .catalog-block ul.catalog>li>a:hover {
 color: var(--white);
 border-color: var(--secondary);  
}


/* HEADER MOBILE */
header .header-mobile {
  background: var(--white);
  box-shadow: var(--shadow-medium);
}

header .header-mobile .header-account .cd-dropdown-trigger-mobile i,
header .header-mobile .header-account > a,
header .header-mobile .header-account > a > i,
header .header-mobile .header-cart .cd-dropdown-trigger-mobile i,
header .header-mobile .header-cart > a,
header .header-mobile .header-cart > a > i,
header .header-mobile .header-menu .cd-dropdown-trigger-mobile i,
header .header-mobile .header-menu > a,
header .header-mobile .header-menu > a > i {
  color: var(--black);
}

/* HOME */

/* Home Hero */
.promo-grid {
  max-width: 1450px;
  margin: 0 auto;
  padding: var(--padding-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  font-family: sans-serif;
}

.promo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.promo-box {
  flex: 1 1 300px;
  padding: var(--padding-m);
  background-color: var(--tertiary);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-dark);
}

.promo-heading {
  font-size: var(--font-xl);
  font-weight: 700;
  text-transform: uppercase;
}

.promo-heading span {
  font-size: var(--font-xxl);
  font-weight: 900;
  display: inline-block;
}

.promo-text p,
.promo-box p {
  margin: 0.5rem 0;
}

.promo-btn {
  display: inline-block;
  margin-top: var(--padding-m);
  background-color: #f96300; /* Consider tokenizing this */
  color: var(--white);
  text-decoration: none;
  padding: var(--padding-s) var(--padding-m);
  font-weight: bold;
  border-radius: var(--radius-s);
}

.promo-lg {
  flex-wrap: wrap;
}

.promo-lg-offer {
  flex: 1 1 300px;
}

.promo-lg-save {
  background-color: var(--primary-ultra-dark);
  color: var(--white);
  flex: 1 1 300px;
  padding: var(--padding-l);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.promo-lg-save .highlight {
  font-size: var(--font-xxl);
  font-weight: 900;
}

.promo-lg-save h3 {
  color: var(--white);
}

.promo-lg-save ul {
  margin-top: var(--padding-m);
  padding-left: var(--padding-m);
}

.promo-lg-save li {
  margin-bottom: 0.75rem;
}

.promo-patio {
  flex: 1 1 300px;
}

/* Image Styling */
.promo-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin-bottom: var(--padding-m);
  border-radius: var(--radius-s);
}

/* Responsive */
@media (max-width: 768px) {
  .promo-row {
    flex-direction: column;
  }
}