@font-face {
    font-family: 'Hanken';
    src: url('webfont/eot/HankenGrotesk-Bold.eot');
    src: url('webfont/eot/HankenGrotesk-Bold.eot') format('embedded-opentype'),
         url('webfont/woff2/HankenGrotesk-Bold.woff2') format('woff2'),
         url('webfont/woff/HankenGrotesk-Bold.woff') format('woff'),
         url('webfont/ttf/HankenGrotesk-Bold.ttf') format('truetype'),
         url('webfont/svg/HankenGrotesk-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Inter';
    src: url('/webfont/eot/Inter_18pt-Regular.eot');
    src: url('/webfont/eot/Inter_18pt-Regular.eot') format('embedded-opentype'),
         url('/webfont/woff2/Inter_18pt-Regular.woff2') format('woff2'),
         url('/webfont/woff/Inter_18pt-Regular.woff') format('woff'),
         url('/webfont/ttf/Inter_18pt-Regular.ttf') format('truetype'),
         url('/webfont/svg/Inter_18pt-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'material-icons'; /* Match this name with class */
    src: url('/webfont/eot/MaterialSymbolsOutlined_36pt-Regular.eot');
    src: url('/webfont/eot/MaterialSymbolsOutlined_36pt-Regular.eot') format('embedded-opentype'),
         url('/webfont/eot/MaterialSymbolsOutlined_36pt-Regular.woff2') format('woff2'),
         url('/webfont/eot/MaterialSymbolsOutlined_36pt-Regular.woff') format('woff'),
         url('/webfont/eot/MaterialSymbolsOutlined_36pt-Regular.ttf') format('truetype'),
         url('/webfont/eot/MaterialSymbolsOutlined_36pt-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.material-icons {
  font-family: 'Material Icons' !important; /* Must match @font-face name */
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

body { 
  background-color: #F1F4E6; 
  margin: 0;
  padding: 0;
  font-size: 1em;
  min-height: 100vh;
  overflow-x: hidden; /* avoid horizontal scrollbar when sidebar collapsed */
  font-family: 'Hanken', sans-serif;
}

.loginbtn {
	background-color: transparent;
}

.bag-btn:hover {
	background-color: #fdfbf0;
	color: #fff;
}


.loginbtn:hover {
  background-color: #fdfbf0;
  color: #fff;
}

.master-header {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  justify-content: space-between;
}

.login-btn {
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  font-size: 14px;
  padding: 0.5rem 1rem;
  border-radius: 5px;
}

.login-btn:hover {
  background-color: #283106;
  color: #fff;
}

.master-header {
	height: 80px;
}


#sidebarMenuInner .nav-link {
	color: #55705A !important;
}

#sidebarMenuInner .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #fdfbf0;
}

header button.btn {
  font-weight: bold;
  font-size: 1.3em;
  color: #55705A; /* default color */
  border: none;
}

header button.btn:hover {
  background-color: rgba(223, 224, 220, 1) !important;
}

header button.btn.collapsed {
  background-color: #F1F4E6 !important; /* <-- your new hover color */

}

header button.btn:not(.collapsed) {
	background-color: #F1F4E6 !important;
}

.flex-grow-1 {
  background: white;
  overflow-y: auto;
  height: 100%;
  padding: 1rem;
}

.footer {
	background-color: #4A5759 !important;
	font-family: 'Inter', sans-serif;
	color: #fdfbf0;
	width: 100%;
}

.footer .nav-link {
	color: #fdfbf0 !important;
}

.footer .nav-link:hover {
	background-color:rgba(0, 0, 0, 0.05);
}

.newarrivalsHeading {
  color: #364E31;
  font-family: 'Hanken', sans-serif;
}

.about-us {
  background-color: #CDDECB;
}

.card .card-body {
  opacity: 0;
  transform: translateY(20px); /* slight slide effect */
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute; 
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.6); 
  color: #fff;
  text-align: center;
  padding: 10px;
}

.card:hover .card-body {
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 1;
  pointer-events: auto;
}

.card-title.card-header {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: bold;
}

.card-img-overlay h5.card-title.featured-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem !important;
  line-height: 1.2;
  font-weight: bold;
}

.card-img-overlay {
  background-color: transparent;
  opacity: 0;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  color: white; 
}

.card:hover .card-img-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 1;
  pointer-events: auto;
}

.featured-title {
  font-family: 'Hanken', sans-serif !important;
}


#our-store {
  font-family:'Inter', sans-serif;
}

#about-body {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
}


#main-product-img {
  background-color: black;
}


.product-title {
  font-family: 'Hanken', sans-serif;
  color:  #2D4B48;
  font-size: 2em;
}

.product-price {
  font-family: 'Hanken', sans-serif;
  color: #5C8966;
  justify-self: end;
  font-size: 2em;
}

.product-prices {
  font-family: 'Hanken', sans-serif;
  color: #2D4B48;
}

.selectSize {
  color: #2D4B48;
  font-family: 'Hanken',sans-serif;
  font-size: 1.1em;
}

#cart-btn {
  background-color: #98A7B8;
  border: none;
  height: 3rem;
  font-family: 'Inter', sans-serif;
  font-weight: bold;
}

#cart-btn:hover {
  background-color: #BFDEF4;
}

.prod-details {
  font-family: 'Inter', sans-serif;
  color: #2D7868;
}

.productDetails {
  font-family: 'Inter', sans-serif;
  color: #2D4B48;
}

.shippingDetails {
  font-family: 'Inter', sans-serif;
  color: #2D4B48;
}

.productMeasurements {
  font-family: 'Inter', sans-serif;
  color: #2D4B48;
}

.accordion-content {
  font-family: 'Inter', sans-serif;
  color: #2D4B48;
}

.accordion { border-top: 1px solid #9DA57E; }
.accordion-item { border-bottom: 1px solid #9DA57E; border-left: none; border-right: none; background: transparent; }

.quantityContainer {
  font-family: 'Inter', sans-serif;
  color: #2D4B48;
}

.sizequantityForm {
  font-family: 'Inter', sans-serif;
  color: #2D4B48;
}

.product-info {
  font-family: 'Hanken', sans-serif;
  color: #5C8966;
}

.relatedMaterial {
  font-family: 'Inter', sans-serif;
  color: #2D4B48;
}



.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* pushes title left and icon right */
  width: 100%;                    /* IMPORTANT: make it span the whole row */
  padding: 10px 20px;
  border: none;
  outline: none;
  background: transparent !important;
  box-shadow: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-align: left;
  font-weight: bold;
}


.accordion-icon {
  margin-left: auto;
  line-height: 1;
  font-weight: 600;
  font-size: 1.1rem;
}

.content-second {
  font-family: 'Inter', sans-serif;
}

.cartHeader {
  text-align: center !important;
}

.viewCart {
  font-size: 2.5rem;
  font-family: 'Hanken', sans-serif;
  color: #41644A;  /*hunter green */

}

.viewcartLink {
  font-size: 1.2rem;
  font-family: 'Inter', sans-serif;
  color: #41644A !important;
}

.viewcartLink:hover {
  color: #C3C88C;
}

.cartDetails,
.cartDetails th,
.cartDetails td {
  background-color: #F1F4E6 !important;
}

.cartLabels {
  font-family: 'Inter', sans-serif;
  font-weight: lighter;
  color: #d9eddf !important;
  border: #dedbd2;

}

.cartTable {
  background-color: #F1F4E6 !important;
}

.itemName {
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  font-size: 1rem;
  color: #41644A !important;
}

.cartPrice {
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  color: #41644A !important;
}

.cartTotal {
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  color: #41644A !important;
}

.reviewSubtotal {
  font-family: 'Hanken', sans-serif;
  color: #555B6E;
  font-size: 1.2rem;
}

.subtotalValue {
  font-family: 'Hanken', sans-serif;
  color: #555B6E;
  font-size: 1.2rem;
}

.checkoutBtn {
  font-family: 'Inter', sans-serif;
  background-color: #4A5759;
  border:0px;
}

.backtostoreBtn {
  font-family: 'Inter', sans-serif;
  border-color: #4A5759;
  color: #4A5759;
}

.checkoutBtn:hover {
  background-color: #B0C4B1;
}


/*

#wrapper
{
	margin: 0 auto;
	width: 1000px;
}

#header
{
	 box-sizing: border-box;
	text-align: center;
	vertical-align: top;
	background-color: #FFFFFF;
	margin: 0 auto;
	margin-bottom: 8px;
}

#toprightpanel { position: absolute; right: 150px; text-align: right; }

#nav-panel { 	list-style: none; padding: 0px; margin: 0 auto; }

#nav-panel > li { display: inline-block; padding: 15px 15px; font-size: 1em; position: relative; }
#nav-panel > li > a:hover { text-decoration: underline; }
#nav-panel > li > ul { list-style-type: none; position: absolute; float: left; display:none; padding: 0px; z-index: 2000; box-sizing: border-box; width: 200px; }
#nav-panel > li:hover > ul { display: block; top: 45px; left: 0px; }
.sub-nav-panel > li { border: 1px solid #CCCCCC; padding: 5px; background-color: #FFFFFF; box-sizing: border-box; }
.sub-nav-panel > li:hover { background-color: #EEEEEE; }
.sub-nav-panel > li > a { font-size: 0.7em; }
#nav-panel > li > #chain-panel { width: 440px; text-align: left; }
#chain-panel > li { width: 220px; display: inline-block; text-align: center; }

#mainpanel
{
	background-color: #FFFFFF;
}

#footer
{
	box-sizing: border-box;
	margin: 0 auto;
	margin-top: 8px;
	text-align: center;
	background-color: #FFFFFF;
	padding: 15px;
}

#footer > ul { list-style-type: none; margin: 0 auto; }
#footer > ul > li { display: inline-block; padding: 15px; }

#mainImage { border: 4px solid #bce8aa; }
.extraImages { display: block; }

.sitemappath { font-size: 0.8em; color: #666666; }

.frontcategoryimg { width: 150x; border: 4px solid #bce8aa; display: block;  margin-top: 5px; } 
.frontcategory {  display: inline-block; margin-top: 50px; margin-bottom: 50px; text-align: center; font-size: 11px; width: 14%; margin-left: 1%; margin-right: 1%;  }

.featured { display: inline-block; width: 11%; margin-left: 0.6%; margin-right: 0.65%; margin-top: 20px; text-align: center; position: relative; height: 80px; vertical-align: middle; }
.featured > a  { line-height: 80px; vertical-align: middle; }
.featuredInfo { height: 80px; opacity: 0.7; background-color: #555555;  position: absolute;  width: 100%; vertical-align: middle; display: none;}
.featuredPrice, .featuredPrice:hover { color: #FFFFFF;  vertical-align: middle; line-height: 40px; }