html, body {
	margin: 0;
	overflow-x: clip;
	scroll-behavior: smooth;
	background-color: #f4f4f4;
}

a, a:hover, a:visited, a:active {
	color: inherit;
	text-decoration: none !important;
}
 
 button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
textarea:focus, input:focus{
    outline: none;
}

 ul li { margin-bottom: 10px; }

.c {display: flex;justify-content: center;align-items: center;}

.desktop {visibility:visible;display: block;}
.mobile {display: none !important;}

.s0 {font-size: calc(100vw - 94.3vw) !important;line-height: 1 !important;}
.s1{font-size: calc(100vw - 96vw) !important;}
.s2{font-size: calc(100vw - 97vw) !important;}
.s2b{font-size: calc(100vw - 98vw) !important;}
.s2c{font-size: calc(100vw - 98.5vw) !important;}
.s3{font-size: calc(100vw - 98.8vw) !important;}
.s4{font-size: calc(100vw - 99vw) !important;}

.f1{font-family:poppinRegular !important;}
.f2{font-family:poppinLight !important;}	
.f3{font-family:poppinBold !important;}
.f4{font-family:poppinBlack !important;}
.f5{font-family:special !important;}




div#slider { width: 100%; height: 80vh; float: right; overflow: hidden;}
div#slider figure { width: 300%; height: 100vh; position: relative; margin: 0; left: 0; animation: 30s slidy infinite; }
div#slider figure img { width: 33.33%; height: 100%; float: left; object-fit: cover; object-position: 0 -10vh; }

@keyframes slidy {
0% { left: 0%; }
35% { left: 0%; }
40% { left: -100%; }
70% { left: -100%; }
75% { left: -200%; }
95% { left: -200%; }
100% { left: 0%;}
}


.cart-3{
	width:100%;
	height:15vh;
	position:relative;
	float:left;
	display:grid;
	grid-template-columns: 30% 70%;
	padding: 10px 5%;
  box-sizing: border-box;
}


.brand-box {
	background: #1a75bb;
	border-radius: 50px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	padding: 5%;
	width: 90%;
	color: #fff;
	text-align: center;
	transition: all ease 300ms;
}

.brand-box:hover{
	background: #f15a25;
}

.brand-con{
	width:100%;
	height:auto;
	position:relative;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.brands{
	width:100%;
	height:auto;
	display: block;
	margin:0 auto;
	cursor:pointer;
}
.brands img{
	width:100%;
	transition:all ease 300ms;	
}
.brands:hover img{
	transform: scale(1.1);
}

  
 .search-box {
    display: flex;
    align-items: center;
    background: #c3d3dd;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 10px 20px;
    width: 90%;
    transition: all 0.3s ease;
  }

  .search-box:hover {
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  }

  .search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 10px;
    background: transparent;
	color: #1a75bb;
  }

  .search-box button {
    background: #1a75bb;
    border: none;
    color: #fff;
    padding: 10px 30px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease, transform 0.2s ease;
  }

  .search-box button:hover {
    background: #0f4875;
  }

  .search-box svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    fill: #2563eb;
  }




/* Fullscreen overlay (initially hidden) */
.fullscreen-overlay {
	position: fixed;
	inset: 0; /* top:0; right:0; bottom:0; left:0 */
	display: grid;
	place-items: center;
	background: #1a75bb;
	transform: scale(0.9);
	opacity: 0;
	visibility: hidden;
	transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
	z-index: 1000;
}

/* The empty container inside overlay — you can put any content here */
.fullscreen-content {
	width: 90%;
	height:auto;
	/*max-height: 90vh;	*/
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 40px 80px rgba(0,0,0,0.25);
	color: #666;
	font-size: 18px;
	position: absolute;
	top: 5vh;
	left: 50%;
	transform: translateX(-50%);
	overflow-y: auto;
	padding: 3%;
	box-sizing: border-box;
}

/* When opened */
.fullscreen-overlay.open {
	transform: scale(1);
	opacity: 1;
	visibility: visible;
	overflow: auto;
	scrollbar-width: none;
}
/* Hide scrollbar for Chrome, Safari, Edge */
.fullscreen-content::-webkit-scrollbar {
    display: none;
}

/* Close button inside overlay */
.overlay-close {
	position: absolute;
	top: 12px;
	right: 12px;
	border: none;
	background: rgba(255,255,255,.12);
	color: #999;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	backdrop-filter: blur(4px);
}
.overlay-close:focus { outline: 3px solid rgba(255,255,255,.16); outline-offset: 2px; }




  /* --- Main Slider Container --- */
  
.slider-con{
	width:100%;
	height:auto;
	float:left;
	padding:3% 5%;
	box-sizing: border-box;
}  

.slider-container {
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	padding: 10px;
	box-sizing: border-box;
}

/* Icon slider */
.icon-slider {
	width: 100%;
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.icon-slider::-webkit-scrollbar {
	display: none;
}

/* Icon items */
.icon-item {
	width:12%;
	flex: 0 0 auto;
	text-align: center;
	margin: 0 5px;
	cursor: pointer;
	transition: transform 0.2s;
	position: relative;
}
.icon-item:hover {
	transform: scale(1.1);
}
.icon-item img {
	width: 60%;
	/*height: 100px;*/
}
.icon-item p {
	margin-top: 5px;
	line-height: 1;
	color:#333;
	font-size:10pt;
}

/* Arrows */
.arrow {
	background: none;
	border: none;
	font-size: 28px;
	cursor: pointer;
	padding: 10px;
	color: #333;
	transition: color 0.2s;
}
.arrow:hover {
	color: #0078ff;
}

/* Dropdown menu */
.dropdown-menu {
	display: none;
	position: absolute;
	background: white;
	border-radius: 10px;
	padding: 10px 20px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	background-color: #1a75bb;
	color: #f4f4f4;	
	z-index: 100;
	animation: slideDown 0.25s ease forwards;
}
@keyframes slideDown {
	from {opacity: 0; transform: translateY(-10px);}
	to {opacity: 1; transform: translateY(0);}
}

.dropdown-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dropdown-menu li {
	padding: 6px 0;
	cursor: pointer;
	position: relative;
	white-space: nowrap;
}
.dropdown-menu li:hover {
	color: #fff;
}

/* 2nd level submenu */
.dropdown-menu li ul {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	background: #519bd5 ;
	border-radius: 8px;
	padding: 10px 15px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.dropdown-menu li:hover > ul {
	display: block;
}

/* 3rd level submenu */
.dropdown-menu li ul li ul {
	left: 100%;
	top: 0;
}

/* Small arrow pointer */
.dropdown-menu::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 20px;
	border-width: 8px;
	border-style: solid;
	border-color: transparent transparent #1a75bb transparent;
}




.product-con {
	width: 90%;
	height: auto;
	position: relative;
	float: left;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	border-radius: 15px;
	left: 50%;
	transform: translate(-50%);
	margin: 2% 0;
}

.product-con-title {
	width: fit-content;
	height: auto;
	position: relative;
	display: block;
	margin: 5% auto 0 auto;
	color: #1a75bb;
	border-bottom: 3px solid #1a75bb;
}
.product-con-title::after {
	content: '';
	width: 95%;
	border-bottom: 1px solid #d9d9d9;
	display: block;
	position: fixed;
	margin: 1px auto 0 auto;
	left: 50%;
	transform: translate(-50%);
	z-index: -1;
}

.product-con-inner {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 10px;
}

.product-box, .product-box2{
	width: 100%;
	height: auto;
	position: relative;
	margin: 20px auto;
}
.product-box img {
	width: 100%;
	height: 200px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	/* transition: transform 300ms ease; */
}
/*.product-box:hover img {transform: scale(1.1)}*/

.product-box p {
	width: 80%;
	height: 48px;
	position: relative;
	text-align: center;
	display: block;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.product-box-btn {
	width: 50%;
	height: auto;
	position: relative;
	background: #f15a25;
	border-radius: 20px;
	color: #fff;
	display: block;
	margin: 0 auto;
	text-align: center;
	padding: 3%;
	box-sizing: border-box;
	cursor: pointer;
	transition: all ease 300ms;
}
.product-box-btn:hover{background: orange;}

.noResult {
	height: 100%;
	position: relative;
	padding: 5%;
	box-sizing: border-box;
	left: 100%;
	transform: translate(-50%);
}


.p-product-con {
	width: 90%;
	height: auto;
	position: relative;
	float: left;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	border-radius: 15px;
	left: 50%;
	transform: translate(-50%);
	margin: 15vh 0 0 0;
}

.p-product-image {
	width: 50%;
	height: auto;
	position: relative;
	float: left;
	padding: 5%;
	box-sizing: border-box;
}
.p-product-image img {
	width:100%;
}

.p-product-info {
	width: 50%;
	height: auto;
	position: relative;
	float: left;
	padding: 5% 0;
	box-sizing: border-box;
}

.variant-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.variant-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.variant-btn {
  padding: 10px 18px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variant-btn.active {
  background-color: #ff5722;
  color: white;
  border-color: #ff5722;
}

.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}

.qty-control button {
  background: #f1f1f1;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s ease;
}

.qty-control button:hover {
  background: #ddd;
}

.qty-control input {
  width: 50px;
  text-align: center;
  border: none;
  outline: none;
}


.product-submitBtn, .product-backBtn  {
	width: fit-content;
	height: auto;
	position: relative;
	background-color: orange;
	padding: 10px 40px;
	box-sizing: border-box;
	margin: 5% 0 0 0;
	border-radius: 15px;
}

.product-backBtn{ background-color: #333; color:#f4f4f4;}
 
 
.p-checkout-con {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	left: 50%;
	transform: translate(-50%);
	margin: 15vh 0 0 0;
}

.p-checkout-A {
	width: 68%;
	height: auto;
	position: relative;
	float: left;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	border-radius: 15px;
	padding: 2%;
	box-sizing: border-box;
	margin:0 1% 0 3%;
}
 
  .p-checkout-B{
 	width:25%;
	height:auto;
	position:relative;
	float:left;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	border-radius: 15px;
	padding: 3%;
	box-sizing: border-box;
	margin: 0 0 20px 0;
 }
 
.edit-btn {
 	width:100%; 
    background-color: #4CAF50;
    color: white;
  }
.remove-btn {
	width: 100%;
	background-color: #f44336;
	color: white;
	margin: 5px auto;
	padding: 6px 0px;
	box-sizing: content-box;
}

.ordersum{
	width:100%;
	height:auto;
	position:relative;
	float:left;
	color:#666;
}

.summaryTable {
	width: 100%;
	margin: 40px auto;
	border-collapse: collapse;
	box-shadow: 0 0 8px rgba(0,0,0,0.1);
	position: relative;
	float: left;
}

.summaryTable th,
.summaryTable td {
	border: 1px solid #ccc;
	padding: 12px;
	text-align: center;
}

.summaryTable th {
	background: #f0f0f0;
}

.summaryTable select {
	padding: 6px 10px;
	font-size: 15px;
}

.summaryTable .highlight {
	font-weight: bold;
	background: #fcfcfc;
}

.summaryTable .result {
	background: #f9f9f9;
	font-weight: bold;
}


.registration-con{
	width:100%;
	height:auto;
	position:relative;
	display:grid;
	grid-template-columns: 40% 60%;
}

.registration-A, .registration-B{
	width:100%;
	height:auto;
}
.registration-A img {
	width: 100%;
	object-fit: cover;
	height: 100vh;
}

.registration-B {
	padding: 5%;
	box-sizing: border-box;
	box-shadow: 0 0px 40px #000;
}


@media screen and (max-width: 800px) { 
 
 button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
textarea:focus, input:focus{
    outline: none;
}

ul li { margin-bottom: 5px; }
ul {padding: 5% !important;}
.c {display: flex;justify-content: center;align-items: center;}

.desktop {visibility:hidden; display: none;}
.mobile {display: block !important;}

.s0 { font-size: calc(100vw - 87vw) !important; line-height: 1 !important; }
.s1 { font-size: calc(100vw - 90vw) !important; line-height: 1.2 !important; }
.s2{font-size: calc(100vw - 93vw) !important;}
.s2b { font-size: calc(100vw - 94.5vw) !important; line-height: .9 !important; }
.s2c{font-size: calc(100vw - 95vw) !important;}
.s3 { font-size: calc(100vw - 96.7vw) !important; line-height: 1.3 !important; }
.s4{font-size: calc(100vw - 96.5vw) !important;}

.f1{font-family:poppinRegular !important;}
.f2{font-family:poppinLight !important;}	
.f3{font-family:poppinBold !important;}
.f4{font-family:poppinBlack !important;}
.f5{font-family:special !important;}




div#slider { width: 100%; height: 80vh; float: right; overflow: hidden;}
div#slider figure { width: 300%; height: 100vh; position: relative; margin: 0; left: 0; animation: 30s slidy infinite; }
div#slider figure img { width: 33.33%; height: 100%; float: left; object-fit: cover; object-position: 0 -10vh; }

@keyframes slidy {
0% { left: 0%; }
35% { left: 0%; }
40% { left: -100%; }
70% { left: -100%; }
75% { left: -200%; }
95% { left: -200%; }
100% { left: 0%;}
}


.cart-3 {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: grid;
	grid-template-columns: 100%;
	padding: 10px 5%;
	box-sizing: border-box;
}

.brand-box {
	background: #1a75bb;
	border-radius: 50px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	padding: 20px;
	width: 90%;
	color: #fff;
	text-align: center;
	transition: all ease 300ms;
	margin: 10px 0;
	box-sizing: content-box;
}

.brand-box:hover{
	background: #f15a25;
}

.brand-con {
	width: 100%;
	height: auto;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin: 30px 0 0 0;
}

.brands{
	width:100%;
	height:auto;
	display: block;
	margin:0 auto;
	cursor:pointer;
}
.brands img{
	width:100%;
	transition:all ease 300ms;	
}
.brands:hover img{
	transform: scale(1.1);
}

.search-box {
	max-width: 87%;
	/*padding: 10px;
	box-sizing: content-box;*/
}
.search-box button {
	padding: 10px 15px;
	font-size: 14px;
	right: 10%;
	position: absolute;
}

.search-box svg {
    width: 30px;
    height: 30px;
    margin-right: -10px;
    fill: #2563eb;
}
  
/* Fullscreen overlay (initially hidden) */
.fullscreen-overlay {
	position: fixed;
	inset: 0; /* top:0; right:0; bottom:0; left:0 */
	display: grid;
	place-items: center;
	background: #1a75bb;
	transform: scale(0.9);
	opacity: 0;
	visibility: hidden;
	transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
	z-index: 1000;
}

/* The empty container inside overlay — you can put any content here */
.fullscreen-content {
	width: 90%;
	height: auto;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 40px 80px rgba(0,0,0,0.25);
	color: #666;
	font-size: 18px;
	position: absolute;
	top: 5vh;
	left: 50%;
	transform: translateX(-50%);
	max-height: 90vh;
	overflow-y: auto;
	padding: 3%;
	box-sizing: border-box;
}
/*.fullscreen-content {
	width: 90%;
	height: 80vh;
	border-radius: 20px;
	background: #fff;
	box-shadow: unset;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4%;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
	left: 50%;
	top: 50%;
	transform: translate(-55%, -55%);
}*/

/* When opened */
.fullscreen-overlay.open {
	transform: scale(1);
	opacity: 1;
	visibility: visible;
	overflow: hidden;
	height: 100vh;
}

/* Close button inside overlay */
.overlay-close {
	width: 40px;
	height: 40px;    
	position: absolute;
	top: 5px;
	right: 5px;
	border: none;
	background: #333;
	color: #fff;
	padding: 5px 5px;
	border-radius: 30px;
	cursor: pointer;
	font-weight: bold;
	backdrop-filter: blur(4px);
}
.overlay-close:focus { outline: 3px solid rgba(255,255,255,.16); outline-offset: 2px; }




  /* --- Main Slider Container --- */
  
.slider-con{
	width:100%;
	height:auto;
	float:left;
	padding:3% 5%;
	box-sizing: border-box;
}  

.slider-container {
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	padding: 0px;
	box-sizing: border-box;
}

/* Icon slider */
.icon-slider {
	width: 100%;
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.icon-slider::-webkit-scrollbar {
	display: none;
}

/* Icon items */
.icon-item {
	width:40%;
	flex: 0 0 auto;
	text-align: center;
	margin: 0 5px;
	cursor: pointer;
	transition: transform 0.2s;
	position: relative;
}
.icon-item:hover {
	transform: scale(1.1);
}
.icon-item img {
	width: 70%;
	/*height: 100px;*/
}
.icon-item p {
	margin-top: 0px;
	line-height: 1;
	color:#333;
	font-size:10pt;
}

/* Arrows */
.arrow {
	background: none;
	border: none;
	font-size: 28px;
	cursor: pointer;
	padding: 10px;
	color: #333;
	transition: color 0.2s;
}
.arrow:hover {
	color: #0078ff;
}

/* Dropdown menu */
.dropdown-menu {
	display: none;
	position: absolute;
	background: white;
	border-radius: 10px;
	padding: 10px 20px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	background-color: #1a75bb;
	color: #f4f4f4;	
	z-index: 100;
	animation: slideDown 0.25s ease forwards;
}
@keyframes slideDown {
	from {opacity: 0; transform: translateY(-10px);}
	to {opacity: 1; transform: translateY(0);}
}

.dropdown-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dropdown-menu li {
	padding: 6px 0;
	cursor: pointer;
	position: relative;
	white-space: nowrap;
}
.dropdown-menu li:hover {
	color: #fff;
}

/* 2nd level submenu */
.dropdown-menu li ul {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	background: #519bd5 ;
	border-radius: 8px;
	padding: 10px 15px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.dropdown-menu li:hover > ul {
	display: block;
}

/* 3rd level submenu */
.dropdown-menu li ul li ul {
	left: 100%;
	top: 0;
}

/* Small arrow pointer */
.dropdown-menu::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 20px;
	border-width: 8px;
	border-style: solid;
	border-color: transparent transparent #1a75bb transparent;
}




.product-con {
	width: 90%;
	height: auto;
	position: relative;
	float: left;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	border-radius: 15px;
	left: 50%;
	transform: translate(-50%);
	margin: 2% 0;
}

.product-con-title {
	width: fit-content;
	height: auto;
	position: relative;
	display: block;
	margin: 5% auto 0 auto;
	color: #1a75bb;
	border-bottom: 3px solid #1a75bb;
}
.product-con-title::after {
	content: '';
	width: 95%;
	border-bottom: 1px solid #d9d9d9;
	display: block;
	position: fixed;
	margin: 1px auto 0 auto;
	left: 50%;
	transform: translate(-50%);
	z-index: -1;
}

.product-con-inner {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 20px 0;
}

.product-box, .product-box2 {
	width: 100%;
	height: auto;
	position: relative;
	margin: 20px auto 0 auto;
	padding: 0 5px;
	box-sizing: border-box;
}

.product-box2 {width: 33%; float:left;}

.product-box img, .product-box2 img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	transition: transform 300ms ease;
}

.product-box p, .product-box2 p {
    width: 95%;
    margin: 0 auto;
    font-size: 12px;
    line-height: 1.3;         /* IMPORTANT: line height must match the height */
    display: -webkit-box;
    -webkit-line-clamp: 3;    /* limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(1.3em * 3);  /* force height to exactly 3 lines */
}
.product-box-btn {
	width: 80%;
	height: auto;
	position: relative;
	background: #f15a25;
	border-radius: 20px;
	color: #fff;
	display: block;
	margin: 0 auto;
	text-align: center;
	padding: 3%;
	box-sizing: border-box;
	cursor: pointer;
	transition: all ease 300ms;
}
.product-box-btn:hover{background: orange;}

.noResult {
	width: 90vw;
	height: auto;
	padding: 5%;
	box-sizing: border-box;
	left: 50%;
	transform: translate(-50%);
}

.p-product-con {
	width: 90%;
	height: auto;
	position: relative;
	float: left;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	border-radius: 15px;
	left: 50%;
	transform: translate(-50%);
	margin: 5vh 0;
}

.p-product-image {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	padding: 5%;
	box-sizing: border-box;
}
.p-product-image img {
	width:100%;
}

.p-product-info {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	padding: 5% 3%;
	box-sizing: border-box;
}

.variant-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.variant-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.variant-btn {
  padding: 10px 18px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variant-btn.active {
  background-color: #ff5722;
  color: white;
  border-color: #ff5722;
}

.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}

.qty-control button {
  background: #f1f1f1;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s ease;
}

.qty-control button:hover {
  background: #ddd;
}

.qty-control input {
  width: 50px;
  text-align: center;
  border: none;
  outline: none;
}

.product-submitBtn, .product-backBtn {
	width: 100%;
	height: auto;
	position: relative;
	background-color: orange;
	padding: 15px 40px;
	box-sizing: border-box;
	margin: 0 0 10px 0;
	border-radius: 30px;
}

.product-backBtn{ background-color: #333; color:#f4f4f4;}
 
 
.p-checkout-con {
	width: 90%;
	height: auto;
	position: relative;
	float: left;
	left: 50%;
	transform: translate(-50%);
	margin: 5vh 0 0 0;
}

.p-checkout-A {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	border-radius: 15px;
	padding: 3%;
	box-sizing: border-box;
	margin:0;
}
 
  .p-checkout-B{
 	width:100%;
	height:auto;
	position:relative;
	float:left;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	border-radius: 15px;
	padding: 3%;
	box-sizing: border-box;
	margin: 10% 0;
 }
 
.edit-btn {
 	width:100%; 
    background-color: #4CAF50;
    color: white;
  }
.remove-btn {
	width: 100%;
	background-color: #f44336;
	color: white;
	margin: 5px auto;
	padding: 6px 0px;
	box-sizing: content-box;
}

.ordersum{
	width:100%;
	height:auto;
	position:relative;
	float:left;
	color:#666;
}

.summaryTable {
	width: 100%;
	margin: 20px auto;
	border-collapse: collapse;
	box-shadow: 0 0 8px rgba(0,0,0,0.1);
	position: relative;
	float: left;
}

.summaryTable th,
.summaryTable td {
	border: 1px solid #ccc;
	padding: 12px;
	text-align: center;
}

.summaryTable th {
	background: #f0f0f0;
}

.summaryTable select {
	padding: 6px 10px;
	font-size: 15px;
}

.summaryTable .highlight {
	font-weight: bold;
	background: #fcfcfc;
}

.summaryTable .result {
	background: #f9f9f9;
	font-weight: bold;
}


.registration-con{
	width:100%;
	height:100vh;
	position:relative;
	display:grid;
	grid-template-columns: 100%;
	background: #159957;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #155799, #159957);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #155799, #159957); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.registration-A, .registration-B{
	width:100%;
	height:auto;
}
.registration-A img {
	width: 100%;
	object-fit: cover;
	height: 100vh;
}

.registration-B {
	width: 90%;
	padding: 5%;
	box-sizing: border-box;
	box-shadow: 0 0px 10px #082840;
	display: block;
	margin: 0 auto;
	background: #f4f4f4;
}

	
}