html {
  font-size: 16px;
}

body {
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem; /* 16px */
	font-weight: 400;
	/*padding-top -> given by header*/
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	/*background: #f9f9f9;*/
	margin: 0;
}

.center-text {
  text-align: center;
}

.strong-text {
  font-weight: bold;
}

.min-width-block{
  min-width: 290px; 
}

hr {
	/*color: #333;*/
    height: 1px;      /* line thickness */
    background-color: #333;
    border: none;
}

a:link {
	color: #333;
	text-decoration: none;
}

a:active {
	color: #333;
	text-decoration: none;
}

a:visited {
	color: #333;
	text-decoration: none;
}

a:hover {
	color: #0078e7;
	text-decoration: none;
	/*text-decoration: underline;*/
}



pre.normal {
  color: #000000;
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0px;
  white-space: pre-wrap; /*for responsive design*/
  word-wrap: break-word; /*for responsive design*/
}


h1 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 1.5rem 0 1rem;
}

h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.2rem 0 0.8rem;
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1rem 0 0.6rem;
}

h4 {
  font-size: 1.0rem;
  font-weight: 500;
  margin: 0.8rem 0 0.4rem;
}

h5 {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0.6rem 0 0.3rem;
}

h6 {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  margin: 0.5rem 0 0.2rem;
}


/**** header ****/
.header {
  position: sticky;   /* keeps it at the top while scrolling */
  top: 0px;             /* stick to top of viewport */ /*body has padding: 20px;*/
  z-index: 1000;      /* ensures it stays above all other content */
  background: #FAF0E6;   /* original color bussness card : #F9EAD6 - gives it a solid background so it doesn’t overlap text other option #FFF5EB */ 
  border-bottom: 1px solid #D8BFA3; /* optional subtle separation  #ddd*/
  padding-top: 0px;
  /*border: 10px solid red;*/ /* optional for debugging */
}
	

h1.slogan {
	font-family: 'Great Vibes';
	font-size: 2.0rem; 
	color: #000000; 
	padding: 0px; 
	margin: 0px; 
	text-align: center;
	padding: 2px;
	/*border: 1px solid red;*/       /* optional for debugging */
}




/****** icon btn******/
.icon-btn { 	
	position:relative; /*added for cart badge*/
	background: #ffffff;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 0.5rem;
	cursor: pointer;
}



a.icon-btn.red:link {
    color: #d9534f;
}

a.icon-btn.red:active {
	color: #d9534f;
}

a.icon-btn.red:visited {
	color: #d9534f;
}

a.icon-btn.red:hover {
    color: #c9302c;
}


a.icon-btn.green:link {
    color: #1cb841;
}

a.icon-btn.green:active {
	color: #1cb841;
}

a.icon-btn.green:visited {
	color: #1cb841;
}

a.icon-btn.green:hover {
    color: #189d37;
}




/******main content*******/
.site-content {
	padding-left: 30px;
	padding-right: 30px;
}

/******footer******/
.footer {
  display: flex;
  flex-direction: column;       /* stack icons row + text vertically */
  align-items: center;          /* center everything horizontally */
  justify-content: center;
  padding: 20px;
  background: #FAF0E6;          /* subtle background original color bussness card #F9EAD6 */
  border-top: 1px solid #D8BFA3;   /* #ddd*/
  gap: 10px;                    /* space between icons row and text */
}

/* container for social icons */
.footer .social-icons {
  display: flex;
  flex-direction: row;          /* horizontal icons */
  align-items: center;
  gap: 15px;                    /* space between each icon */
}

/* social icons styling */
.footer a {
  color: #333;
  font-size: 1.6rem;
  text-decoration: none;
  transition: color 0.3s, transform 0.2s;
}

.footer a:hover {
  color: #005bb5;
  transform: translateY(-2px);
}

/* copyright text */
.footer p {
  font-size: 1.2rem;
  color: #555;
  margin: 0;
  text-align: center;
}

a.footer-text {
  color: #333;
  font-size: 1.2rem;
  text-decoration: none;
}

a.footer-text:hover  {
  color: #005bb5;
}

.footer .asmall { 
	font-size: 1.0rem;
}





.company-legal-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* center the divs horizontally */
    gap: 20px;
    text-align: left;          /* keeps text inside divs left-aligned */
    /*border: 1px solid red;*/
}

.company-legal-wrapper h4 {
  font-size: 1.0rem;
  font-weight: 500;
  margin: 0.2rem 0 0.4rem; /*top lr bottom*/
}

.company-info,
.legal-info {
    width: 200px;              /* fixed width */
    /*border: 1px solid red;*/
}




.ablue:link {
  color: #0078e7; /*blue */
}

.ablue:hover  {
  color: #005bb5; /*blue darker */ 
}

.ablue:visited {
  color: #0078e7; /*blue */
}

.ared:link {
  color: #d9534f; /*red */
}

.ared:hover  {
  color: #c9302c; /*red darker */
}

.ared:visited  {
  color: #d9534f; /*red */
}



/* Position badge on the icon */
.cart-badge { 
    position: absolute; 
    top: 2px;
    left: 12px;     /* adjust so the badge sits on the icon */
    background: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
   
}

/* Hide badge when count is 0 */
.cart-badge:empty {
    display: none;
} 

.cart-badge.hidden { 
	display: none; 
}
.cart-badge.visible { 
	display: inline-block; 
}


/* newsletter form */ 
#newsletter {
    width: 80%;
    margin: 0 auto;     /* centers horizontally */
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.2rem;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f9f9f9;
    /*border: 1px solid red;*/ /* optional for debugging */
}

#newsletterWrapper {
  display: flex;
  flex-direction: column;      /* stack rows */
  align-items: center;         /* center horizontally */
  width: 80%;                  /* wrapper width */
  margin: 0 auto;
}

.newsletterRow {
  display: flex;
  width: 100%;
  justify-content: center;     /* center contents horizontally */
  margin-bottom: 10px;
}

.labelInput {
  display: flex;
  flex-wrap: nowrap;           /* force label + input to stay on one line */
  width: 100%;
  max-width: 500px;            /* optional max width */
  gap: 10px;
}

.labelInput label {
  flex: 0 0 auto;              /* label natural width */
  line-height: 2;
}

.labelInput input[type="text"] {
  flex: 1 1 auto;              /* input takes remaining space */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
  min-width: 0;                /* allows shrinking on small screens */
  transition: border 0.2s ease-in-out
}

.newsletterRow button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: #0078e7; /*blue*/
  color: white;
  cursor: pointer;
}

.newsletterRow button:hover {
  background: #005bb5; /*blue darker*/
}

#IdNewsletterEmail:focus {
  border: 1px solid #999;
  outline: none;            /* remove default focus outline */
  box-shadow: none;         /* optional: remove any shadow/glow */
}


/* horizontal line with OR */

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin-top: 15px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.divider::before {
  margin-right: .75em;
}

.divider::after {
  margin-left: .75em;
}


/* Whatsapp */
.whatsapp-float {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #25D366;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 999;
  transition: transform 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}


/* Contact form - Send mail */
.mail-box-container {
    width: 80%;
    margin: 0 auto;          /* center horizontally */
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.2rem;
    padding: 15px 10px;
    background: #f9f9f9;
    border-radius: 6px;
}

.mail-box-container h3 {
    margin-bottom: 15px;
}

.mail-box-container label {
    display: flex;
    flex-direction: column;   /* stack label + input/textarea vertically */
    align-items: flex-start;  /* align label text to left */
    width: 100%;
   /* max-width: 500px;*/         /* optional max width */
    margin-bottom: 10px;
}

.mail-box-container label span {
    margin-bottom: 5px;
}

.mail-box-container input[type="text"],
.mail-box-container input[type="email"],
.mail-box-container textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border 0.2s ease-in-out;
    resize: vertical;          /* allow vertical resizing for textarea */
}

.mail-box-container input:focus,
.mail-box-container textarea:focus {
    border: 1px solid #999;
    outline: none;
    box-shadow: none;
}

.mail-box-container button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: #0078e7;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s ease-in-out;
}

.mail-box-container button:hover {
    background: #005bb5;
}

#result-mail {
    margin-top: 10px;
    font-size: 1rem;
    /*color: green;*/
}

.mail-required-note {
	margin-top: 10px;
	/*font-size: 14px;*/
	font-size: 1.0rem;
	color: #555;
}

.contact-box-container {
    width: 80%;
    margin: 0 auto;          /* center horizontally */
    margin-bottom: 20px;
    /*text-align: center;*/
    font-size: 1.2rem;
    padding: 5px 5px; /* top-bottom / left-right*/
}



/* pwa button */
#pwa-install-button {
  display: block;            /* center the button */
  margin: 20px auto;         /* top/bottom margin + auto left/right */
  padding: 16px 40px;        /* bigger button */
  font-size: 1.6rem;           /* larger text */
  font-weight: 600;
  border: none;
  border-radius: 6px;        /* slightly bigger radius */
  background: #0078e7;       /* blue */
  color: white;
  cursor: pointer;
  transition: background 0.3s ease; /* smooth hover effect */
}

#pwa-install-button:hover {
  background: #005bb5; /*blue darker*/
}


/*********payments ******************/
.payment-methods-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	padding: 8px;
	/*background-color: #fcfcfc;*/
	/*border: 1px solid #e5e5e5;*/
}

.payment-badge {
	height: 16px;
	width: auto;
	opacity: 0.9;
	transition: all 0.2s ease;
}

.payment-badge:hover {
	opacity: 1;
	transform: scale(1.05);
}

.payment-badge img {
	height: 100%;
	display: block;
}


/*********** responsive 1076px **************/
@media (max-width: 1076px) {
	
	h1.slogan {
		display: none;           /* hide slogan */
	}
	
}

/*********** responsive 768px **************/
@media (max-width: 768px) {
	
	body {
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
	}

	.header {
	  padding-top: 0px;  
	}
		
	.site-content {
		padding-left: 10px;
		padding-right: 10px;
	}	 
  


	.icon-btn i {
		margin-right: 0;         /* remove space for hidden text */
	}

	.icon-btn span {
		display: none;           /* hide the caption */
	}

}

/*********** responsive 480px **************/
@media (max-width: 480px) {

	body {
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
	}

	.header {
	  padding-top: 0px;  
	}

	.site-content {
		padding-left: 10px;
		padding-right: 10px;
	}	
  
	
	.dropdown{
		margin-right: 0px;
	}

    .dropdownCaption,
	.icon-btn,  
	.ri-user-line,
	.ri-shopping-cart-2-line {
	  font-size: 1.0rem;
	}
		

	.footer {
		padding: 10px;
	}

	/*social images*/
	.footer a {
		font-size: 1.2rem;
		gap: 8px;
	}

	.footer p {
		font-size: 1.0rem;
	}

	a.footer-text {
		font-size: 1.0rem;
	}
  	
			
}