body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 400;
	color: var(--__N4QdCheV6mGo, #0f1111);
	font-size: 13px !important;
	line-height: 20px;
	width: 100%;
}
h1, h2, h3, h4, h5, h6 {
	color: #444;
}
/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults */
h1 {
	font-size: 33px;
}
h2 {
	font-size: 27px;
}
h3 {
	font-size: 21px;
}
h4 {
	font-size: 15px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10.2px;
}
a {
	color: #23a1d1;
}
a:hover {
	text-decoration: none;
}
legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 12px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 12px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 12px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
}
/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}
/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
/* top */
#top {
	background-color: #EEEEEE;
	border-bottom: 1px solid #e2e2e2;
	padding: 4px 0px 3px 0;
	margin: 0 0 20px 0;
	min-height: 40px;
}
#top .container {
	padding: 0 20px;
}
#top #form-currency .currency-select,
#top #form-language .language-select {
	text-align: left;
}
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
	text-shadow: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#top .btn-link, #top-links li, #top-links a {
	color: #888;
	text-shadow: 0 1px 0 #FFF;
	text-decoration: none;
}
#top .btn-link:hover, #top-links a:hover {
	color: #444;
}
#top-links .dropdown-menu a {
	text-shadow: none;
}
#top-links .dropdown-menu a:hover {
	color: #FFF;
}
#top .btn-link strong {
	font-size: 14px;
        line-height: 14px;
}
#top-links {
	padding-top: 6px;
}
#top-links a + a {
	margin-left: 15px;
}
/* logo */
#logo {
	margin: 0 0 10px 0;
}
/* search */
#search {
	margin-bottom: 10px;
}
#search .input-lg {
	height: 40px;
	line-height: 20px;
	padding: 0 10px;
}
#search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 10px 35px;
	text-shadow: 0 1px 0 #FFF;
}
/* cart */
#cart {
	margin-bottom: 10px;
}
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu {
	background: #eee;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 100%;
	overflow-y: auto;
	max-height: 800px;
	scrollbar-width: thin;
	overflow-x: hidden;
}
@media (max-width: 478px) {
	#cart .dropdown-menu {
		width: 100%;
	}
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
@media (max-width: 478px) {
	#cart .dropdown-menu li > div {
		min-width: 100%;
	}
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}
/* menu */
#menu {
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
	min-height: 40px;
}
#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
	background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
	padding-bottom: 0;
}
#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 3px 20px;
	clear: both;
	line-height: 20px;
	color: #333333;
	font-size: 12px;
}
#menu .dropdown-inner li a:hover {
	color: #FFFFFF;
}
#menu .see-all {
	display: block;
	margin-top: 0.5em;
	border-top: 1px solid #DDD;
	padding: 3px 20px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 3px 3px;
	font-size: 12px;
}
#menu .see-all:hover, #menu .see-all:focus {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#menu #category {
	float: left;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: #FFF;
	padding: 2px 18px;
	float: right;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
	color: #ffffff;
	background-color: #229ac8;
}
@media (min-width: 768px) {
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}
/* content */
#content {
	min-height: 600px;
}
#product-category #content, #product-product #tab-description, #information-information #content {
	font-size: 13px;
}
/* footer */
footer {
	margin-top: 30px;
	padding-top: 30px;
	background-color: #303030;
	border-top: 1px solid #ddd;
	color: #e2e2e2;
}
footer hr {
	border-top: none;
	border-bottom: 1px solid #666;
}
footer a {
	color: #ccc;
}
footer a:hover {
	color: #fff;
}
footer h5 {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
/* breadcrumb */
.breadcrumb {
	margin: 0 0 20px 0;
	padding: 8px 0;
	border: 1px solid #ddd;
}
.breadcrumb i {
	font-size: 15px;
}
.breadcrumb > li {
	text-shadow: 0 1px 0 #FFF;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
html[dir=rtl] .breadcrumb > li::after {
  top: -3px;
  left: -5px;
  width: 26px;
  height: 26px;
  border-left: 1px solid #DDD;
  border-top: 1px solid #DDD;
  right: unset;
  border-right: unset;
  border-bottom:unset;

}
.pagination {
	margin: 0;
}
/* buttons */
.buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 12px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn-xs {
	font-size: 9px;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #777;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
}
.btn-primary {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #229ac8;
	/*background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);*/
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background-color: #1f90bb;
	background-position: 0 -15px;
}
.btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x;
	border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
	background-image: none;
	background-color: #df5c39;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: #23A1D1;
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
}
.btn-inverse {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #444444, #222222);
	background-repeat: repeat-x;
	border-color: #222222 #222222 #000000;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #444444;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}
/* product list */
.product-thumb {
	border: 1px solid #ddd;
	margin-bottom: 20px;
	overflow: auto;
}
.product-thumb .image {
	text-align: center;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
}
.product-thumb .caption {
	padding: 0 20px;
	min-height: 180px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	min-height: 210px;
	padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
.product-thumb .price {
	color: #444;
}
.product-thumb .price-new {
	font-weight: 600;
}
.product-thumb .price-old {
	color: #999;
	text-decoration: line-through;
	margin-left: 10px;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	display: inline-block;
	float: left;
	background-color: #eee;
	color: #888;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
	color: #444;
	background-color: #ddd;
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout, #column-right .product-layout {
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39;
}
html[dir=rtl] .checkbox input[type="checkbox"],
html[dir=rtl] .checkbox-inline input[type="checkbox"],
html[dir=rtl] .radio input[type="radio"],
html[dir=rtl] .radio-inline input[type="radio"] {
    position: absolute;
    margin-top: 4px/9;
    margin-right: -20px;
      margin-left: unset;
}
html[dir=rtl] .input-group-btn:last-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
html[dir=rtl] .input-group .form-control:first-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}
html[dir=rtl] .container .row:first-child  .col-sm-4, html[dir=rtl] .container .row:first-child  .col-sm-5 {
  float: right;

}
html[dir=rtl] #cart .dropdown-menu {
  left: 0;
  right: auto;

}
@media (min-width: 768px) {
   
    html[dir=rtl] .navbar-nav {
        float: right;
        margin: 0;
    }
    
    html[dir=rtl] .navbar-nav > li {
        float: right;
    }
   
}

.whatsapp-icon{
	/*display: block;	
	height: 60px;*/
	width: auto; 
	background: #4dc247; 
	color: #ffffff; 
	/*text-align: center; */
	font-weight: bold; 
	font-size: 200%; 
	/*line-height: 70px; */
	font-family: Arial; 
	border-radius: 10px; 
	text-decoration: none;
}

@media (max-width: 1000px){
	.visibility{
	display: none;
	}
}

.float{
	position:fixed;
	/*width:60px;
	height:60px;*/
	bottom:40px;
	right:40px;
	background-color:#4dc247;
	/*color:#FFF;*/
	border-radius:10px;
	/*text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;*/ 
}
#product-product hr{
	background-color: transparent;
	border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-top: 1px solid #d5d9d9;
    display: block;
    height: 1px;
    line-height: 19px;
    margin-bottom: 14px;
    margin-top: 0;
}
.breadcrumb a{
	text-wrap-mode: wrap;
}
.g-nowrap{
	white-space: nowrap;
}
.g-size-base{
	font-size: 14px !important;
	line-height: 20px !important;
}
.g-size-base-plus{
	font-size: 16px !important;
	line-height: 24px !important;
}
.g-size-medium{
	font-size: 18px !important;
	line-height: 24px !important;
}
.g-size-medium-plus{
	font-size: 21px !important;
	line-height: 28px !important;
}
.g-size-large{
	font-size: 24px !important;
	line-height: 32px !important;
}
.g-text-right{
	text-align: right !important;
}
.g-text-bold{
	font-weight: 700 !important;
}
.g-color-secondary{
	color: var(--__N4QdCheV6wPa, #565959) !important;
}
.g-color-price{
	color: #b12704 !important;
}
.g-color-success{
	color: #007600 !important;
}
table.g-lineitem td{
	padding: 0 3px;
}
table.g-linetop td{
	vertical-align: top;
}
.g-box{
	border: 1px #d5d9d9 solid;
	border-radius: 8px;
	padding: 15px;
	margin-bottom:20px;
	display:block;
}
.g-button-group{
	position:relative;
	display: table;
	font-size: 0px;
	line-height: 0px;
	white-space: nowrap;
	outline: 0;
}
/* Remove empty layout padding from category summaries */
.category-description-block:empty, 
#content > p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Standardize grid text boxes to eliminate variable card whitespace */
.product-thumb .caption h4 {
    height: 40px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px !important;
}
/* Reduce row gaps between product items */
.product-layout {
    margin-bottom: 15px !important;
}
.product-thumb {
    margin-bottom: 0 !important;
    padding: 12px !important;
}
/* Gauryog Premium E-Commerce UI Facelift */

/* 1. Transform Product Cards into Floating Visual Elements */
.product-layout {
    margin-bottom: 25px !important;
    padding: 0 8px !important;
}

.product-thumb {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 0 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    position: relative;
    overflow: hidden;
}

/* Hover Effect: Card rises gracefully and grows a modern soft shadow */
.product-thumb:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 24px rgba(30, 41, 59, 0.08) !important;
    border-color: #cbd5e1 !important;
}

/* 2. Style the Images Safely */
.product-thumb .image {
    padding: 5px !important;
    margin-bottom: 15px !important;
    background: #fafafa !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 180px !important;
}

.product-thumb .image img {
    max-height: 160px !important;
    object-fit: contain !important;
    transition: transform 0.4s ease !important;
}

.product-thumb:hover .image img {
    transform: scale(1.05); /* Subtle image zoom on hover */
}

/* 3. Modern Typography and Price Contrast */
.product-thumb .caption h4 a {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.product-thumb .caption h4 a:hover {
    color: #2563eb !important; /* Title turns deep blue on hover */
}

.product-thumb .price {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-top: 12px !important;
}

/* Stylize the crossed-out MRP original price */
.product-thumb .price-old {
    font-size: 13px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    text-decoration: line-through !important;
    margin-left: 6px !important;
}

/* 4. Upgrade Buttons to Sleek Action Bars */
.product-thumb .button-group {
    border-top: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    margin: 15px -16px -16px -16px !important;
    display: flex !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* High-Converting Dark Primary Cart Action Button */
.product-thumb .button-group button:first-child {
    width: 100% !important;
    background: #1e293b !important; /* Elegant slate black */
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.8px;
    padding: 12px 0 !important;
    border: none !important;
    transition: background 0.2s ease !important;
}

.product-thumb .button-group button:first-child:hover {
    background: #0f172a !important; /* Darkens on mouse hover */
}

/* Hide legacy secondary wishlist/compare icons to keep the grid ultra-clean */
.product-thumb .button-group button + button {
    display: none !important;
}
/* Tighten Desktop Grid Real Estate & Strip Whitespace Gaps */
@media (min-width: 992px) {
    /* 1. Force Product Grid to Take Up 100% Width If Sidebar Is Absent */
    /*#content.col-sm-12, #content.col-md-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: -10px !important;
    }*/
    
    /* 2. Pull Product Image Up & Remove Padding */
    .product-thumb .image {
        height: 160px !important;
        margin-bottom: 8px !important;
    }
    
    /* 3. Compress Row Gaps and Margins Natively */
    .product-layout {
        margin-bottom: 12px !important;
    }
    
    /* 4. Remove Large Padding from Sorting Dropdown Bars */
    #content .row [class*="col-md-"] {
        margin-bottom: 10px !important;
    }
    
    .well {
        padding: 10px !important;
        margin-bottom: 15px !important;
    }
    
    /* 5. Minimize Top Breadcrumb Spacing Gaps */
    ul.breadcrumb {
        padding: 4px 0 !important;
        margin-bottom: 10px !important;
        background: transparent !important;
    }
    
    h2 {
        margin-top: 5px !important;
        margin-bottom: 15px !important;
    }
}
/* Premium Floating Desktop Sidebar Menu Overhaul */
@media (min-width: 992px) {
    /* 1. Format the Sidebar Group Wrapper into a Floating Card */
    .column-left .list-group, 
    #column-left .list-group {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 10px 0 !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
        margin-bottom: 25px !important;
        overflow: hidden;
    }

    /* 2. Style Individual Navigation Menu Nodes */
    .column-left .list-group a, 
    #column-left .list-group a.list-group-item {
        background: #ffffff !important;
        color: #334155 !important; /* Premium slate gray */
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 12px 20px !important;
        border: none !important;
        border-left: 3px solid transparent !important;
        margin-bottom: 2px !important;
        transition: all 0.2s ease-in-out !important;
        display: block !important;
        text-decoration: none !important;
    }

    /* 3. Interactive Mouse Hover Transformation */
    .column-left .list-group a:hover, 
    #column-left .list-group a.list-group-item:hover {
        background: #f8fafc !important; /* Soft ice-blue shift */
        color: #2563eb !important;      /* Changes text to brand blue */
        padding-left: 24px !important;   /* Dynamic sliding nudge effect */
        border-left-color: #cbd5e1 !important;
    }

    /* 4. Highlight the Active Selected Category Tier Node */
    .column-left .list-group a.active, 
    #column-left .list-group a.list-group-item.active,
    .column-left .list-group a.active:hover {
        background: #eff6ff !important; /* Soft royal blue tint backplate */
        color: #1d4ed8 !important;      /* Deep primary link blue text */
        font-weight: 700 !important;
        border-left: 3px solid #2563eb !important; /* Solid blue visual anchor stripe */
        padding-left: 24px !important;
    }
    
    /* 5. Sub-Category Indent Shifting */
    .column-left .list-group a.list-group-item + a.list-group-item[style*="padding-left"] {
        padding-left: 35px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        opacity: 0.85;
    }
    .column-left .list-group a.list-group-item + a.list-group-item[style*="padding-left"]:hover {
        padding-left: 39px !important;
        opacity: 1;
    }
}
/* Mobile-First Swipeable Sub-Category Row Upgrade */
@media (max-width: 767px) {
    /* 1. Turn the vertical stack into a smooth, horizontal scroll lane */
    .gauryog-refine-search .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Enables buttery smooth native mobile momentum scrolling */
        padding: 5px 15px 15px 15px !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    /* Remove the default scrollbar to keep the UI perfectly minimal and clean */
    .gauryog-refine-search .row::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. Lock each category bubble block into a uniform, fixed size */
    .gauryog-refine-search .row > div {
        flex: 0 0 110px !important; /* Ensures each item box stays exactly 110px wide and never squishes */
        width: 110px !important;
        float: none !important;
        display: inline-block !important;
        margin-bottom: 0 !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* 3. Re-shape the thumbnail frame into clean, premium circles */
    .gauryog-refine-search .thumbnail {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .gauryog-refine-search .category-img-wrapper {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto 8px auto !important;
        border-radius: 50% !important; /* Automatically rounds your 1:1 square uploads into trendy lifestyle circles */
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .gauryog-refine-search .category-img-wrapper img {
        max-height: 52px !important;
        max-width: 52px !important;
        object-fit: contain !important;
    }

    /* 4. Ensure typography lines wrap beautifully beneath the icons */
    .gauryog-refine-search .thumbnail span {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        text-align: center !important;
        white-space: normal !important; /* Overrides the truncation ellipsis so sub-category names read completely */
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* 5. Tighten the layout header margins */
    .gauryog-refine-search h3 {
        font-size: 13px !important;
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
}
/* Premium Split-Screen Category Header with Button Color Contrast Backplate */
@media (min-width: 992px) {
    .category-info.row, 
    #content > .row:first-of-type {
        display: flex !important;
        align-items: stretch !important;
        background: #ffffff !important; /* Kept text side clean and readable */
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        margin: 0 0 35px 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
    }

    /* Left Text Column Container Area */
    .category-info .col-sm-10, 
    #content > .row:first-of-type .col-sm-10 {
        width: 55% !important;
        padding: 35px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        float: left !important;
    }

    /* Right Product Image Container Frame - Styled to match your sleek Add to Cart button color */
    .category-info .col-sm-2, 
    #content > .row:first-of-type .col-sm-2 {
        width: 45% !important;
        padding: 20px !important; /* Gives breathing room to the white category photo inside */
        float: right !important;
        background: #1e293b !important; /* Elegant slate black matching your primary buttons */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Showroom Image Fluid Scale Properties inside the Button-Colored Card */
    .category-info .col-sm-2 img, 
    #content > .row:first-of-type .col-sm-2 img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 220px !important;
        object-fit: contain !important; /* Keeps your original photo sharp without clipping or stretching */
        border-radius: 8px !important; /* Softens the corners of your white image file inside the block */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; /* Gives the white image a premium floating depth effect */
        opacity: 1 !important;
    }

    /* Core Typography Balancing */
    #product-category h2 {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }

    .category-info .col-sm-10 p, 
    #content > .row:first-of-type .col-sm-10 p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #334155 !important;
        margin-bottom: 0 !important;
    }
}
/* Premium Product Grid Sorting Dropdown Strip Optimization */
.well, #content .row:has(.form-group) {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.01) !important;
    display: block !important;
    /*align-items: center !important;*/
    flex-wrap: wrap !important;
}

/* Ensure individual sorting container modules stack neatly */
#content .row:has(.form-group) > div {
    margin-bottom: 0 !important;
    padding: 0 8px !important;
}

/* Modern Minimalist Labels */
#content .row:has(.form-group) label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
    display: inline-block;
    vertical-align: middle;
}

/* Redesign the Form Fields with Custom Accents */
#content .row:has(.form-group) select.form-control {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    height: 36px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    padding: 0 32px 0 12px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    display: inline-block;
    vertical-align: middle;
    width: auto !important;
    min-width: 140px !important;
    
    /* Custom clean dropdown chevron override */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://w3.org' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
}

/* Active Focus Outline State */
#content .row:has(.form-group) select.form-control:focus {
    border-color: #1e293b !important; /* Locks outline color onto your primary button tone */
    outline: none !important;
}

/* Eliminate messy layout elements like grid vs list view toggle icons if unnecessary */
#compare-total, .btn-group:has(#list-view) {
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {
    #content .row:has(.form-group) {
        justify-content: space-between !important;
        padding: 10px !important;
    }
    #content .row:has(.form-group) > div {
        /*width: auto !important; /* Perfect side-by-side 50/50 balance split on mobile screens */
        padding: 0 4px !important;
    }
    #content .row:has(.form-group) label {
        display: inline-block !important; /* Hides extra text labels on small screens to save valuable real estate */
    }
    #content .row:has(.form-group) select.form-control {
        width: 100% !important;
        min-width: 100% !important;
    }
}
/* ==========================================================================
   Gauryog Unified Brand Top Menu Overhaul (Color Match: #f172a0)
   ========================================================================== */

/* 1. Global Menu Background Rules (Desktop & Mobile) */
#menu, 
.navbar-inverse,
#menu .navbar-collapse,
.navbar-header {
    background-color: #0f172a !important; /* Premium brand theme color applied sitewide */
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(241, 114, 160, 0.15) !important;
}

#menu {
    padding: 0 0px !important;
    margin-bottom: 25px !important;
}

/* 2. Desktop-Specific Layout Polish (Monitors & Laptops) */
@media (min-width: 992px) {
    #menu .nav > li > a {
        color: #ffffff !important; /* Bright white links for excellent readability contrast */
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: transparent !important;
        padding: 16px 22px !important;
        position: relative;
        transition: transform 0.2s ease !important;
    }

    /* Elegant clean line accent trail on mouse hover */
    #menu .nav > li > a::after {
        content: '' !important;
        position: absolute !important;
        bottom: 6px !important;
        left: 22px !important;
        right: 22px !important;
        height: 3px !important;
        background-color: #ffffff !important;
        border-radius: 2px !important;
        transform: scaleX(0) !important;
        transition: transform 0.25s ease-in-out !important;
    }

    #menu .nav > li:hover > a::after {
        transform: scaleX(1) !important;
    }

    /* Sub-Category Dropdown Panels */
    #menu .dropdown-menu {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1) !important;
        padding: 15px !important;
        margin-top: 2px !important;
    }

    #menu .dropdown-inner a {
        color: #334155 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 8px 12px !important;
        transition: all 0.15s ease !important;
    }

    #menu .dropdown-inner a:hover {
        background: #fff1f6 !important; /* Soft blush backdrop matching your accent tone */
        color: #0f172a !important;      /* Text links turn theme pink on hover */
        padding-left: 16px !important;
    }
}

/* 3. Mobile-Specific Overrides (Smartphones & Tablets) */
@media (max-width: 991px) {
    /* Tighten mobile dimensions and clean outer margins */
    .navbar-header {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 15px !important;
        border-radius: 8px !important;
    }

    /* The "Categories" display text inside the mobile navigation block */
    #category {
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* The Mobile Burger Icon Button Styling */
    #menu .btn-navbar {
        background: rgba(255, 255, 255, 0.2) !important; /* Semi-transparent overlay plate */
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
    }

    #menu .btn-navbar:hover, #menu .btn-navbar:focus {
        background: rgba(255, 255, 255, 0.3) !important;
    }

    /* Force the mobile navigation menu links list stack below the cart */
    #menu .navbar-collapse {
        padding: 10px 0 !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    /* Mobile Text Link Custom List Nodes */
    #menu .nav > li > a {
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding: 14px 20px !important;
        background: transparent !important;
    }
    
    /* Child drop lists configuration settings inside phone viewports */
    #menu .dropdown-menu {
        background: rgba(255, 255, 255, 0.1) !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding-left: 15px !important;
    }
    
    #menu .dropdown-inner a {
        color: #ffffff !important;
        opacity: 0.9;
        font-size: 13px !important;
        border: none !important;
    }
}
/* ==========================================================================
   Gauryog Split-Screen Product Page Responsive Upgrade
   ========================================================================== */

/* --- 1. SMARTPHONE MOBILE STRUCTURE (0px to 991px) --- */
@media (max-width: 991px) {
    #product-product {
        width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 10px !important;
    }
    
    /* Make the image section span 100% width on mobile */
    #product-product .col-sm-8,
    #product-product .col-sm-4 {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Frame mobile images nicely with zero distortion */
    #product-product .thumbnail {
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 15px !important;
        max-width: 100% !important;
        height: auto !important;
        text-align: center !important;
    }
    
    #product-product .thumbnail img {
        max-height: 260px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    #product-product h1 {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.4 !important;
        margin: 15px 0 10px 0 !important;
    }

    /* Full-width finger-friendly Add to Cart button for smartphones */
    #product-product #button-cart {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        background-color: #1e293b !important;
        color: #ffffff !important;
        text-transform: uppercase;
        border: none !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 12px rgba(30, 41, 59, 0.12) !important;
    }

    /* Wrap spec tables cleanly so text never bleeds off the phone screen edge */
    #product-product table,
    #tab-specification table {
        width: 100% !important;
        table-layout: fixed !important;
        word-wrap: break-word !important;
    }
    
    #product-product table td {
        padding: 5px !important;
        font-size: 12px !important;
    }
}

/* --- 2. DESKTOP MONITOR STRUCTURE (992px and Above) --- */
@media (min-width: 992px) {
    /* Create a neat split layout grid frame */
    #product-product .row {
        display: block !important;
    }

    /* Left Side Column (55% Width) exclusively holds your image gallery elements */
    /*#product-product .col-sm-8 {
        width: 55% !important;
        float: left !important;
        padding-right: 30px !important;
    }*/

    /* Right Side Column (45% Width) exclusively holds your titles, prices, and options */
    /*#product-product .col-sm-4 {
        width: 45% !important;
        float: right !important;
        padding-left: 10px !important;
    }*/

    #product-product h1 {
        font-size: 26px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }

    /* Proportional premium desktop action button layout bar */
    #product-product #button-cart {
        width: auto !important;
        min-width: 260px !important;
        padding: 14px 35px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        background-color: #1e293b !important;
        color: #ffffff !important;
        text-transform: uppercase;
        border: none !important;
        border-radius: 6px !important;
        transition: all 0.2s ease-in-out !important;
    }

    #product-product #button-cart:hover {
        background-color: #0f172a !important;
        transform: translateY(-1px) !important;
    }

    /* Clean alternating gray-tinted stripes for large technical specifications sheets */
    #product-product table,
    #tab-specification table {
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
    }

    #product-product table td {
        /*padding: 12px 16px !important;*/
        font-size: 14px !important;
        color: #334155 !important;
    }

    #product-product table tr:nth-of-type(odd) {
        background-color: #f8fafc !important;
    }
}
/* ==========================================================================
   Gauryog Premium Logo, Search Bar & Cart Header Strip
   ========================================================================== */

/* 1. Global Header Flex Alignment (Desktop Viewport Default) */
header {
    background: #ffffff !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

header .container > .row {
    display: flex !important;
    align-items: center !important; /* Centers logo, search, and cart vertically on a level row */
    flex-wrap: wrap !important;
}

/* 2. Brand Logo Typography Style */
#logo {
    margin: 0 !important;
}

#logo h1 a, #logo a {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important; /* Premium deep slate black */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none !important;
}

/* 3. Search Bar Integration */
#search {
    margin: 0 !important;
    position: relative;
    max-width: 550px !important;
    width: 100% !important;
}

#search .form-control {
    background: #f8fafc !important; /* Soft light-gray backdrop */
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    font-size: 14px !important;
    padding-left: 15px !important;
    padding-right: 45px !important;
    box-shadow: none !important;
}

#search .form-control:focus {
    background: #ffffff !important;
    border-color: #f172a0 !important; /* Focus boundary glow turns brand pink */
    box-shadow: 0 4px 12px rgba(241, 114, 160, 0.08) !important;
}

#search .input-group-btn {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    z-index: 5 !important;
}

#search .btn-lg {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    height: 42px !important;
    padding: 0 16px !important;
}

/* 4. Cart Button Frame */
#cart .btn-block {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    color: #1e293b !important;
    font-weight: 600 !important;
}


/* --- 5. SMARTPHONE MOBILE OVERRIDES (Max-Width: 767px) --- */
@media (max-width: 767px) {
    header .container > .row {
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 0 10px !important;
    }

    /* Force Logo (Div 1) and Cart (Div 3) to sit perfectly side-by-side on Row 1 */
    header .container > .row > div:nth-child(1) { 
        width: auto !important;
        flex-grow: 1 !important;
    }
    
    header .container > .row > div:nth-child(3) { 
        width: auto !important;
    }

    #logo h1 a, #logo a {
        font-size: 20px !important; /* Scaled down safely to fit smaller mobile viewports */
    }

    /* Force the Search Bar (Div 2) onto a clean, full-width Row 2 right underneath */
    header .container > .row > div:nth-child(2) { 
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 12px !important;
        order: 3 !important; /* CSS order override slides search below the logo-cart line */
    }
    
    #search .form-control,
    #search .btn-lg,
    #cart .btn-block {
        height: 38px !important; /* Slightly more compact for mobile finger tapping */
    }
}
/* ==========================================================================
   Gauryog Logo Upscaling & Solid Cart Background Patch
   ========================================================================== */

/* 1. Force a Premium Solid Background for the Shopping Cart Element */
#cart .btn-block,
#cart button,
#cart .dropdown-toggle {
    background-color: #ffffff !important; /* Forces solid white base card */
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
}

/* 2. Upscale and Format the Brand Logo Image Dimensions on Desktop */
@media (min-width: 992px) {
    #logo img {
        width: auto !important;
        height: auto !important;
        min-width: 180px !important;  /* Enforces a highly prominent layout visibility */
        max-width: 240px !important;  /* Prevents it from crowding out your search bar area */
        object-fit: contain !important;
    }
}

/* 3. Mobile Fluid Scaling Adjustments for Cart & Logo (Max-Width: 767px) */
@media (max-width: 767px) {
    #cart .btn-block,
    #cart button,
    #cart .dropdown-toggle {
        height: 38px !important; /* Compact button height for mobile tapping */
    }
    
    /* Safely scale your logo graphic on smartphones to prevent horizontal page scrolling */
    #logo img {
        width: auto !important;
        height: auto !important;
        min-width: 130px !important;  /* Noticeably larger on phones but still safe */
        max-width: 160px !important;
        object-fit: contain !important;
    }
    #search .btn-lg {
        display: none;
    }
    
}
/* ==========================================================================
   Gauryog Premium Top Utility Nav Bar Overhaul (#top)
   ========================================================================== */

/* 1. Base Container Strip Styling */
#top, nav#top {
    background-color: #f8fafc !important; /* Premium ultra-light slate gray background */
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    min-height: 38px !important;
}

/* Force standard horizontal row block styling to prevent header grid bleeding */
#top .container, nav#top .container {
    display: block !important;
}

#top .container > .row, nav#top .container > .row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* 2. Format Individual Text Link Items */
#top .links a, 
#top .list-inline > li > a,
#top #form-currency .dropdown-toggle,
nav#top a {
    color: #475569 !important; /* Modern muted slate text font */
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s ease-in-out !important;
}

/* Hover State - Links illuminate to match your primary pink brand menu accent */
#top .links a:hover, 
#top .list-inline > li > a:hover,
#top #form-currency .dropdown-toggle:hover,
nav#top a:hover {
    color: #f172a0 !important;
}

/* Style icons inside the top bar links cleanly */
#top i.fa, nav#top i.fa {
    margin-right: 4px !important;
    color: #64748b !important; /* Soft gray color for icons */
    font-size: 13px !important;
}

/* 3. Style Currency Dropdown Menus Modals */
#top .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    padding: 6px 0 !important;
    margin-top: 5px !important;
    z-index: 9999 !important;
}

#top .dropdown-menu button, 
#top .dropdown-menu a {
    padding: 6px 16px !important;
    font-size: 12px !important;
    color: #334155 !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
}

#top .dropdown-menu button:hover {
    background: #fff1f6 !important;
    color: #f172a0 !important;
}

/* --- 4. SMARTPHONE MOBILE VIEWPORT OPTIMIZATION (Max-Width: 767px) --- */
@media (max-width: 767px) {
    #top, nav#top {
        padding: 6px 0 !important;
    }
    
    #top .container > .row, nav#top .container > .row {
        justify-content: center !important; /* Centers utility links perfectly on small mobile screens */
        flex-direction: row !important;
    }
    
    /* Pull Currency Left and Lists Right cleanly on mobile rows */
    #top #currency, nav#top #currency {
        float: left !important;
        margin-bottom: 0 !important;
    }
    
    #top .list-inline, nav#top .list-inline {
        float: right !important;
        margin-bottom: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Hide lower-priority tracking text links on small screens to save space and prevent wrapping rows */
    #top .list-inline > li:has(a[href*="wishlist"]),
    #top .list-inline > li:has(a[href*="checkout"]) {
        display: none !important;
    }
    
    #top .list-inline > li {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}
/* ==========================================================================
   Gauryog Isolated Premium E-Commerce Footer Overhaul
   ========================================================================== */

/* 1. Base Deep Slate Footer Container Wrapper */
footer, .footer-container {
    background-color: #1e293b !important; /* Elegant slate black matching your primary buttons */
    padding: 50px 0 25px 0 !important;
    margin-top: 50px !important;
    border-top: 4px solid #f172a0 !important; /* Premium brand pink accent top boundary line */
    color: #cbd5e1 !important;
}

/* 2. Format Column Title Headers */
footer h5, .footer-container h5 {
    color: #ffffff !important; /* High contrast white headers */
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    position: relative;
    padding-bottom: 8px;
}

/* Subtle brand pink accent line right beneath section headers */
footer h5::after, .footer-container h5::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 35px !important;
    height: 2px !important;
    background-color: #f172a0 !important;
}

/* 3. Re-Shape the Layout Link Rows */
footer ul, .footer-container ul {
    padding-left: 0 !important;
    list-style: none !important;
    margin-bottom: 0 !important;
}

footer ul li, .footer-container ul li {
    margin-bottom: 11px !important;
}

footer ul li a, .footer-container ul li a {
    color: #94a3b8 !important; /* Modern soft gray font layers */
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-block !important;
}

/* Interactive Hover Transformation - Links glide right and light up pink */
footer ul li a:hover, .footer-container ul li a:hover {
    color: #f172a0 !important;
    transform: translateX(4px) !important;
}

/* 4. Format Lower Bottom Copyright Bar Divider Area */
footer hr, .footer-container hr {
    border-top: 1px solid #334155 !important;
    margin: 30px 0 20px 0 !important;
}

footer p, .footer-container p {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* --- 5. SMARTPHONE MOBILE ISOLATION MATRIX (Max-Width: 767px) --- */
@media (max-width: 767px) {
    footer, .footer-container {
        padding: 40px 15px 25px 15px !important;
        text-align: left !important;
    }
    
    /* Force columns to stack cleanly down the screen on phones */
    footer .row, .footer-container .row {
        display: flex !important;
        flex-direction: column !important;
    }
    
    footer .col-sm-3, .footer-container .col-xs-12 {
        width: 100% !important;
        margin-bottom: 25px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    footer .col-sm-3:last-child, .footer-container .col-xs-12:last-child {
        margin-bottom: 0 !important; /* Cleans spacing gap on the final item */
    }
}
/* ==========================================================================
   Gauryog Premium Contact Us Page Overhaul (#information-contact)
   ========================================================================== */

/* 1. Base Container Tuning */
#information-contact h1 {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* Premium deep slate black */
    margin-bottom: 25px !important;
}

#information-contact h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* 2. Transform Location Details into an Elegant Floating Details Card */
#information-contact .panel-default {
    background: #f8fafc !important; /* Ultra-soft gray backdrop */
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
    margin-bottom: 30px !important;
}

#information-contact .panel-default .panel-body {
    padding: 0 !important;
}

#information-contact .panel-default .col-sm-3 {
    width: 100% !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
}

#information-contact .panel-default address {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #334155 !important;
    margin-bottom: 0 !important;
}

/* Style contact details text labels and icons */
#information-contact .panel-default strong {
    color: #0f172a !important;
    display: block;
    margin-bottom: 4px;
}

/* 3. Redesign the Input Form Fields with Custom Brand Accents */
#information-contact .form-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

#information-contact textarea.form-control {
    height: auto !important;
    min-height: 120px !important;
}

/* Active Focus State Glow Turns Brand Pink */
#information-contact .form-control:focus {
    border-color: #f172a0 !important;
    box-shadow: 0 4px 12px rgba(241, 114, 160, 0.08) !important;
}

/* Clean, High-Contrast Submit Action Button */
#information-contact .btn-primary {
    background-color: #1e293b !important; /* Elegant slate black matching your checkout buttons */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 12px 30px !important;
    border: none !important;
    border-radius: 6px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.12) !important;
}

#information-contact .btn-primary:hover {
    background-color: #0f172a !important;
    transform: translateY(-1px) !important;
}

/* 4. Desktop-Specific Split-Screen Symmetry Layout (992px and Above) */
@media (min-width: 992px) {
    #information-contact .row:has(.panel-default) {
        display: flex !important;
        align-items: flex-start !important;
    }
    
    /* Left column holds your address details */
    #information-contact .row:has(.panel-default) > .col-sm-3,
    #information-contact .panel-default {
        width: 40% !important;
        margin-bottom: 0 !important;
        float: left !important;
    }
    
    /* Right column holds your interactive message fields */
    #information-contact form {
        width: 55% !important;
        float: right !important;
        margin-top: 0 !important;
    }
}

/* --- 5. MOBILE SMARTPHONE ISOLATION MATRIX (Max-Width: 767px) --- */
@media (max-width: 767px) {
    #information-contact {
        padding: 0 15px !important;
    }
    #information-contact .form-control {
        height: 38px !important; /* Compact button height for mobile typing */
    }
}
/* ==========================================================================
   Gauryog Production-Safe Shopping Cart & Checkout Grid Reset
   ========================================================================== */

/* --- 1. CORE BARRIER ISOLATION --- */
/* Forces standard block rendering so header or category flex configurations never bleed here */
#checkout-cart, 
#checkout-cart .row, 
#checkout-cart .container,
.checkout-checkout,
.checkout-checkout .row {
    display: block !important;
    width: 100% !important;
}

#checkout-cart h1, .checkout-checkout h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 20px !important;
    margin-top: 10px !important;
}

/* --- 2. TABLE AND PRODUCT INFRASTRUCTURE --- */
#checkout-cart .table-responsive {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 25px !important;
    background: #ffffff !important;
    width: 100% !important;
    overflow-x: auto !important;
}

#checkout-cart .table-bordered {
    border: none !important;
    margin-bottom: 0 !important;
}

#checkout-cart .table-bordered th {
    background-color: #f8fafc !important;
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

#checkout-cart .table-bordered td {
    padding: 12px !important;
    font-size: 13px !important;
    color: #475569 !important;
    vertical-align: middle !important;
    border-top: 1px solid #e2e8f0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* --- 3. INPUT QUANTITY FIELDS AND BUTTON ACCENTS --- */
#checkout-cart .input-group .form-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px 0 0 6px !important;
    height: 36px !important;
    max-width: 70px !important;
    text-align: center !important;
    box-shadow: none !important;
}

#checkout-cart .input-group-btn .btn {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 0 6px 6px 0 !important;
}

/* Primary Slate Black Checkout Actions */
#checkout-cart .btn-primary, 
.checkout-checkout .btn-primary,
#button-confirm {
    background-color: #1e293b !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 28px !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.1) !important;
    transition: all 0.2s ease !important;
}

#checkout-cart .btn-primary:hover, 
.checkout-checkout .btn-primary:hover {
    background-color: #0f172a !important;
}

/* --- 4. SECURE INVOICE TOTALS CARD PANEL --- */
/* Formats OpenCart's default lower summary block into a crisp standalone summary card */
#checkout-cart .table-responsive + .row > div:last-child,
.checkout-checkout #accordion + .row > div:last-child {
    background: #f8fafc !important; 
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.01) !important;
    float: right !important;
    margin-top: 15px !important;
}

/* --- 5. DESKTOP SYSTEM BOUNDARIES (Min-Width: 992px) --- */
@media (min-width: 992px) {
    #checkout-cart .table-responsive + .row > div:last-child {
        width: 35% !important; /* Constrains invoice card nicely on laptop monitors */
    }
    #checkout-cart .buttons .pull-right {
        float: right !important;
        margin-top: 15px !important;
        width: 35% !important;
    }
    #checkout-cart .buttons .pull-right .btn-primary {
        width: 100% !important;
        text-align: center !important;
    }
    #checkout-cart .buttons .pull-left {
        float: left !important;
        margin-top: 15px !important;
    }
}

/* --- 6. SMARTPHONE RESPONSIVE MATRIX (Max-Width: 767px) --- */
@media (max-width: 767px) {
    #checkout-cart .table-responsive + .row > div:last-child {
        width: 100% !important; /* Spans full width layout cleanly on mobile touchscreens */
        float: none !important;
    }
    #checkout-cart .buttons .pull-right {
        width: 100% !important;
        float: none !important;
    }
    #checkout-cart .buttons .pull-right .btn-primary {
        width: 100% !important;
        text-align: center !important;
        margin-top: 10px !important;
    }
}
/* ==========================================================================
   Gauryog Global Checkout Step Button Override Patch
   ========================================================================== */

/* Target every single independent AJAX button ID inside the checkout flow container */
.checkout-checkout .btn,
.checkout-checkout .btn-primary,
.checkout-checkout input[type="button"],
#button-login,
#button-account,
#button-guest,
#button-register,
#button-payment-address,
#button-shipping-address,
#button-shipping-method,
#button-payment-method,
#button-confirm {
    background-color: #1e293b !important; /* Premium sleek slate black matching your primary template style */
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 12px 30px !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.12) !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-block !important;
    height: auto !important;
    opacity: 1 !important;
}

/* Hover State - Turn deep slate black and add interactive tactile lifting */
.checkout-checkout .btn:hover,
.checkout-checkout .btn-primary:hover,
.checkout-checkout input[type="button"]:hover,
#button-login:hover,
#button-account:hover,
#button-guest:hover,
#button-register:hover,
#button-payment-address:hover,
#button-shipping-address:hover,
#button-shipping-method:hover,
#button-payment-method:hover,
#button-confirm:hover {
    background-color: #0f172a !important; /* Deepens on mouse hover */
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18) !important;
}
/* ==========================================================================
   Gauryog Production-Safe Standalone Card Sitemap Overhaul
   ========================================================================== */

/* --- 1. CORE BARRIER ISOLATION --- */
/* Forces strict block rendering to shield this page from external header/category flex rules */
#information-sitemap, 
#information-sitemap .row, 
#information-sitemap .container,
#information-sitemap .col-sm-6 {
    display: block !important;
    /*width: auto !important;*/
    float: none !important;
    clear: both !important;
}

#information-sitemap {
    /*max-width: 1140px !important;*/
    margin: 0 auto !important;
    padding: 0 15px !important;
}

#information-sitemap h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 25px !important;
    margin-top: 15px !important;
}

/* --- 2. THE STANDALONE CARD GRID OVERRIDE --- */
/* Formats each parent section list directly into a clean, floating dashboard panel */
#information-sitemap ul:first-of-type,
#information-sitemap .row > ul,
#information-sitemap .col-sm-6 > ul {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
    list-style: none !important;
}

/* --- 3. STRIP RAW LIST FORMATTING --- */
#information-sitemap ul {
    list-style: none !important;
    padding-left: 0 !important;
}

#information-sitemap li {
    padding: 10px 0 !important;
    border-bottom: 1px dashed #f1f5f9 !important;
    font-size: 14px !important;
}

#information-sitemap li:last-child {
    border-bottom: none !important;
}

/* --- 4. FORMAT TYPOGRAPHY LINKS & BRAND ACCENTS --- */
#information-sitemap a {
    color: #334155 !important; /* Premium slate gray */
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover State - Links shift brand pink (#f172a0) and slide right slightly */
#information-sitemap a:hover {
    color: #f172a0 !important;
    transform: translateX(4px) !important;
}

/* --- 5. NESTED CHILD SUB-LEVEL INDENTATION --- */
/* Clean padding rules to display nested categories inside the master panel card */
#information-sitemap ul ul {
    padding-left: 20px !important;
    margin-top: 5px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#information-sitemap ul ul li {
    border-bottom: none !important;
    padding: 5px 0 !important;
    font-size: 13px !important;
}

#information-sitemap ul ul a {
    color: #64748b !important;
    font-weight: 500 !important;
}

/* --- 6. SMARTPHONE COMPACT SCREEN BALANCING --- */
@media (max-width: 767px) {
    #information-sitemap {
        padding: 0 10px !important;
    }
    #information-sitemap ul:first-of-type,
    #information-sitemap .row > ul,
    #information-sitemap .col-sm-6 > ul {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }
}
/* ==========================================================================
   Gauryog Premium Brand Manufacturer Page Overhaul (.product-manufacturer)
   ========================================================================== */

/* 1. Global Page Normalization Barrier */
.product-manufacturer, 
#product-manufacturer,
#product-manufacturer .row {
    display: block !important;
    /*width: 100% !important;*/
    float: none !important;
    clear: both !important;
}

#product-manufacturer {
    /*max-width: 1140px !important;*/
    margin: 0 auto !important;
    padding: 0 15px !important;
}

#product-manufacturer h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* Premium deep slate black */
    margin-bottom: 25px !important;
    margin-top: 15px !important;
}

/* 2. Format Alphabet Index Navigation Bars Cleanly */
#product-manufacturer p:has(a) {
    background: #f8fafc !important; /* Ultra-soft gray backdrop card */
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    margin-bottom: 30px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

#product-manufacturer p:has(a) a {
    color: #1e293b !important;
    padding: 2px 8px !important;
    margin: 0 2px !important;
    text-decoration: none !important;
    display: inline-block;
    transition: color 0.15s ease;
}

#product-manufacturer p:has(a) a:hover {
    color: #f172a0 !important; /* Quick link letters highlight pink */
}

/* 3. Convert Manufacturer Table Indexes into Standing Grid Blocks */
#product-manufacturer table {
    border: none !important;
    margin-bottom: 30px !important;
    display: block !important;
}

#product-manufacturer table tbody,
#product-manufacturer table tr {
    display: block !important;
    width: 100% !important;
}

#product-manufacturer table td {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    border: none !important;
}

/* 4. Target the Alphabet Group Identifier Headers (e.g., 'S', 'H') */
#product-manufacturer table td:first-child,
#product-manufacturer h2 {
    width: 100% !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 6px !important;
    flex: 0 0 100% !important;
}

/* 5. Transform the Brand Links into Interactive Lifestyle Badges */
#product-manufacturer table td a {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 14px 24px !important;
    margin: 0 12px 12px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-decoration: none !important;
    display: inline-block !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.01) !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Hover Animation: Badge rises gracefully and glows brand pink */
#product-manufacturer table td a:hover {
    transform: translateY(-3px) !important;
    border-color: #f172a0 !important;
    color: #f172a0 !important;
    box-shadow: 0 8px 16px rgba(241, 114, 160, 0.08) !important;
}

/* --- 6. SMARTPHONE COMPACT RESPONSIVENESS (Max-Width: 767px) --- */
@media (max-width: 767px) {
    #product-manufacturer {
        padding: 0 10px !important;
    }
    #product-manufacturer table td a {
        padding: 10px 18px !important;
        font-size: 13px !important;
        margin: 0 8px 8px 0 !important;
    }
}
/* ==========================================================================
   Gauryog Premium Product Search Results Grid Overhaul (#product-search)
   ========================================================================== */

/* 1. Global Page Foundation Barrier */
#product-search,
#product-search .container,
#product-search #content {
    width: 100% !important;
}

#product-search h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* Premium deep slate black */
    margin-bottom: 20px !important;
    margin-top: 10px !important;
}

#product-search h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 15px !important;
}

/* 2. Format the Sub-Search Form Criteria Box into a Clean Minimalist Panel */
#product-search .well, 
#product-search #content .row:has(.form-control) {
    background: #f8fafc !important; /* Ultra-soft gray backdrop card */
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 15px 20px !important;
    margin-bottom: 25px !important;
    box-shadow: none !important;
}

#product-search .form-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    height: 38px !important;
    font-size: 13px !important;
}

#product-search .form-control:focus {
    border-color: #f172a0 !important; /* Focus boundary glow turns brand pink */
    box-shadow: 0 4px 12px rgba(241, 114, 160, 0.06) !important;
}

/* --- 3. DESKTOP 4-COLUMN SYMMETRIC MATRIX (992px and Above) --- */
@media (min-width: 992px) {
    /* Forces search results into a clean, level 4-column grid layout across large screens */
    #product-search .product-layout {
        display: inline-block !important;
        float: left !important;
        width: 25% !important;
        min-height: 420px !important;
        padding: 0 10px !important;
        margin-bottom: 20px !important;
    }

    /* Enforce Strict Equal-Height Content Elements */
    #product-search .product-thumb {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 16px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.01) !important;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    /* Hover Effect: Card rises gracefully and grows a modern soft shadow */
    #product-search .product-thumb:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 12px 24px rgba(30, 41, 59, 0.06) !important;
        border-color: #cbd5e1 !important;
    }

    /* Center and Square Up Product Thumbnails */
    #product-search .product-thumb .image {
        width: 100% !important;
        height: 180px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fafafa !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }

    /* Fix Title and Description Heights to Prevent Offsets */
    #product-search .product-thumb .caption h4 {
        height: 38px !important;
        overflow: hidden !important;
        margin-bottom: 6px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    #product-search .product-thumb .caption p {
        height: 36px !important;
        overflow: hidden !important;
        font-size: 12px !important;
        color: #64748b !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }

    /* High-Converting Slate Black Cart Action Button Bar */
    #product-search .product-thumb .button-group {
        margin-top: auto !important;
        width: 100% !important;
    }
}

/* 4. Mask Confusing Base Tax Fields and Extras */
#product-search .product-thumb .price-tax,
#product-search .btn-group:has(#list-view) {
    display: none !important; /* Hides confusing "Excl. GST" sub-text from grid cards */
}

/* --- 5. SMARTPHONE MOBILE BOUNDARY PROTECTION (Max-Width: 767px) --- */
@media (max-width: 767px) {
    #product-search {
        padding: 0 10px !important;
    }
    #product-search .product-layout {
        width: 100% !important; /* Stacks items linearly in a clean vertical row on mobile touchscreens */
        padding: 0 !important;
        margin-bottom: 15px !important;
    }
    #product-search .product-thumb {
        border-radius: 8px !important;
        padding: 12px !important;
    }
    #product-search .product-thumb .image {
        height: 160px !important;
    }
}
/* ==========================================================================
   Gauryog Premium Customer Account Hub Overhaul
   ========================================================================== */

/* --- 1. GLOBAL ACCOUNT BARRIER ISOLATION --- */
#account-account, #account-edit, #account-password, #account-address, 
#account-order, #account-reward, #account-wishlist {
    /*max-width: 1140px !important;*/
    margin: 0 auto !important;
    padding: 0 15px !important;
    /*width: 100% !important;*/ 
}

#account-account h2, #account-edit h1, #account-password h1, 
#account-address h1, #account-order h1, #account-reward h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* Premium deep slate black */
    margin-bottom: 20px !important;
    margin-top: 15px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- 2. CONVERT EDIT FORM FIELDS INTO PREMIUM CARD ACCENTS --- */
#account-edit .form-control, #account-password .form-control, #account-address .form-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

#account-edit .form-control:focus, #account-password .form-control:focus, #account-address .form-control:focus {
    border-color: #f172a0 !important; /* Glow matches your brand pink menu accent */
    box-shadow: 0 4px 12px rgba(241, 114, 160, 0.08) !important;
}

/* --- 3. TRANSFORM MAIN ACCOUNT NAVIGATION LINKS INTO TILES --- */
#account-account .list-unstyled {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding-left: 0 !important;
    list-style: none !important;
    margin-bottom: 30px !important;
}

#account-account .list-unstyled li {
    flex: 0 0 33.333% !important;
    width: 33.333% !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important;
}

#account-account .list-unstyled li a {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-decoration: none !important;
    display: block !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.01) !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Hover State - Account tiles lift gracefully and turn brand pink */
#account-account .list-unstyled li a:hover {
    transform: translateY(-3px) !important;
    border-color: #f172a0 !important;
    color: #f172a0 !important;
    box-shadow: 0 8px 20px rgba(241, 114, 160, 0.08) !important;
}

/* --- 4. DATA TABLES POLISH (Order History, Rewards, Wishlist, Addresses) --- */
.table-responsive:has(.table-bordered) {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    /*overflow: hidden !important;*/
    background: #ffffff !important;
    margin-bottom: 25px !important;
}

#account-order .table-bordered, #account-reward .table-bordered, 
#account-wishlist .table-bordered, #account-address .table-bordered {
    border: none !important;
    margin-bottom: 0 !important;
}

#account-order .table-bordered th, #account-reward .table-bordered th, #account-wishlist .table-bordered th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#account-order .table-bordered td, #account-reward .table-bordered td, #account-wishlist .table-bordered td {
    padding: 14px !important;
    font-size: 13px !important;
    color: #334155 !important;
    vertical-align: middle !important;
    border-top: 1px solid #e2e8f0 !important;
    border-left: none !important;
    border-right: none !important;
}

#account-order .table-bordered tr:nth-of-type(odd), #account-reward .table-bordered tr:nth-of-type(odd) {
    background-color: #ffffff !important;
}

#account-order .table-bordered tr:nth-of-type(even), #account-reward .table-bordered tr:nth-of-type(even) {
    background-color: #f8fafc !important; /* Alternating clean light rows */
}

/* --- 5. HIGH-CONTRAST PRIMARY ACTION BUTTONS --- */
#account-edit .btn-primary, #account-password .btn-primary, #account-address .btn-primary,
#account-order .btn-info, #account-wishlist .btn-primary, #account-wishlist .btn-danger {
    background-color: #1e293b !important; /* Modern slate black button theme */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 24px !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(30, 41, 59, 0.1) !important;
    transition: background 0.2s ease !important;
    height: auto !important;
}

#account-edit .btn-primary:hover, #account-password .btn-primary:hover, #account-address .btn-primary:hover,
#account-order .btn-info:hover {
    background-color: #0f172a !important;
}

/* Style default gray back buttons to look clean and minimal */
#account-edit .btn-default, #account-password .btn-default, #account-address .btn-default, #account-order .btn-default {
    background: transparent !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
}

/* --- 6. SMARTPHONE MOBILE BOUNDARY SHIELD (Max-Width: 767px) --- */
@media (max-width: 767px) {
    #account-account .list-unstyled {
        flex-direction: column !important;
    }
    #account-account .list-unstyled li {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
    }
    #account-edit .form-control, #account-password .form-control {
        height: 38px !important; /* Compact inputs for phone browsing */
    }
    .buttons .pull-right, .buttons .pull-left {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        margin-bottom: 10px;
    }
    .buttons .btn {
        width: 100% !important; /* Full width button taps on smartphones */
    }
}
/* ==========================================================================
   Gauryog Header Mini-Cart Dropdown Component Overhaul (#cart)
   ========================================================================== */

/* 1. Base Button Container Real-Estate Formatting */
#cart {
    margin: 0 !important;
}

/* Force a highly prominent, solid white backdrop card for the toggle container */
#cart .btn-block,
#cart button,
#cart .dropdown-toggle {
    background-color: #ffffff !important; 
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    color: #1e293b !important; /* Premium slate black text/icon coloring */
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Clean visual space between cart icon and item text */
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* Hover State - Accent boundary highlights to your brand pink menu tone */
#cart .btn-block:hover,
#cart button:hover,
#cart .dropdown-toggle:hover {
    border-color: #f172a0 !important;
    color: #f172a0 !important;
    box-shadow: 0 4px 12px rgba(241, 114, 160, 0.06) !important;
}

/* Style the dynamic item tally number badge inside the header button */
#cart #cart-total-badge, 
#cart .badge, 
#cart-total {
    font-weight: 700 !important;
}

/* 2. Redesign the Dynamic Dropdown Content Modal Slide Panel */
#cart .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
    padding: 16px !important;
    margin-top: 8px !important;
    min-width: 320px !important; /* Stops the list from looking cramped */
    z-index: 9999 !important;
    right: 0 !important;
    left: auto !important;
}

/* Style individual product item rows inside the shopping preview box */
#cart .dropdown-menu table {
    width: 100% !important;
    margin-bottom: 12px !important;
}

#cart .dropdown-menu table td {
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: #334155 !important;
    border: none !important;
    vertical-align: middle !important;
}

#cart .dropdown-menu table td.text-center:first-child {
    width: 60px !important; /* Clean image frame boundary sizing */
}

#cart .dropdown-menu table td img {
    border: 1px solid #f1f5f9 !important;
    border-radius: 6px !important;
    padding: 2px;
}

/* Style the checkout redirect nodes at the bottom boundary of the card modal */
#cart .dropdown-menu .btn-primary {
    background-color: #1e293b !important; /* Slate black matches primary theme choices */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    padding: 10px 16px !important;
    border: none !important;
    border-radius: 6px !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(30, 41, 59, 0.1) !important;
}

#cart .dropdown-menu .btn-primary:hover {
    background-color: #0f172a !important;
}

/* Clean up standard secondary default unstyled view cart buttons */
#cart .dropdown-menu p.text-right .btn-primary:first-child,
#cart .dropdown-menu a[href*="checkout/cart"] {
    background: transparent !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
}
#cart .dropdown-menu p.text-right .btn-primary:first-child:hover {
    color: #1e293b !important;
    border-color: #1e293b !important;
}

/* --- 3. MOBILE VIEWPOT COMPACT TUNING (Max-Width: 767px) --- */
@media (max-width: 767px) {
    #cart .btn-block,
    #cart button,
    #cart .dropdown-toggle {
        height: 38px !important; /* Finger-friendly matching compact layout line height */
        padding: 0 12px !important;
    }
    #cart .dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        left: 10px !important;
        right: 10px !important;
        width: calc(100% - 20px) !important;
        min-width: 0 !important;
    }
}
/* ==========================================================================
   Gauryog Product Page Buttons & Review Module Overhaul
   ========================================================================== */

/* --- 1. SECONDARY ACTION BUTTONS (Wishlist & Compare Grid) --- */
/* Groups the secondary interactions side-by-side directly beneath your Add to Cart bar */
#product-product .btn-group,
#product-product .form-group + .btn-group {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 280px !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}

#product-product .btn-group .btn-default {
    flex: 1 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    color: #475569 !important; /* Modern slate text */
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 15px !important;
    height: auto !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Hover State - Links illuminate smoothly to match your brand pink menu accent */
#product-product .btn-group .btn-default:hover {
    background: #fff1f6 !important; /* Soft blush tint */
    border-color: #f172a0 !important;
    color: #f172a0 !important;
}

#product-product .btn-group .btn-default i.fa {
    font-size: 14px !important;
    color: inherit !important;
}

/* --- 2. LOWER CUSTOMER REVIEW SECTION MATRIX --- */
.gauryog-review-section, #tab-review {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 30px !important;
    margin-top: 40px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.01) !important;
}

/* Custom Rating Input Stars Configuration */
#form-review .rating-radio-group,
#form-review .radio-inline {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-right: 15px !important;
    cursor: pointer;
}

#form-review .radio-inline input[type="radio"] {
    margin-top: 2px !important;
}

#form-review .fa-star {
    color: #ffb400 !important; /* Premium bright amber rating stars */
}

/* Style the dynamic output reviews container list */
#review {
    margin-bottom: 25px !important;
}

#review .table-striped {
    background: #f8fafc !important; /* Soft gray card plates for individual user reviews */
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin-bottom: 15px !important;
    display: block !important;
    width: 100% !important;
}

#review .table-striped td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
}

/* Bold user name text placement values */
#review .table-striped td:first-child strong {
    font-size: 14px !important;
    color: #1e293b !important;
}

/* Right-align or separate the timestamp display log values */
#review .table-striped td:first-child .text-right,
#review .table-striped td:first-child span {
    font-size: 12px !important;
    color: #94a3b8 !important;
    display: block;
    margin-top: 2px;
}

#review .table-striped p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

/* --- 3. SMARTPHONE COMPACT SCREEN BALANCING (Max-Width: 767px) --- */
@media (max-width: 767px) {
    #product-product .btn-group {
        max-width: 100% !important; /* Spans full width side-by-side on smartphone screens */
        padding: 0 5px !important;
    }
    .gauryog-review-section, #tab-review {
        padding: 20px 15px !important;
    }
}
/* ==========================================================================
   MOBILE ONLY NAV RESTRUCTURE (Protects Desktop Grid Layout)
   ========================================================================== */
@media (max-width: 767px) {
    /* Force the logo row to turn into an app-style flex bar on phones */
    header .header-flex-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 10px 15px !important;
        float: none !important;
    }

    /* Size allocation for the components on mobile */
    .mobile-menu-toggle-wrapper {
        width: 20% !important;
        display: block !important;
        text-align: left !important;
    }

    header #logo {
        width: 60% !important;
        display: block !important;
        text-align: center !important;
        margin: 0 !important;
    }

    header #logo img {
        max-height: 40px !important;
        width: auto !important;
        margin: 0 auto !important;
        display: inline-block !important;
    }

    .mobile-cart-wrapper {
        width: 20% !important;
        display: block !important;
        text-align: right !important;
    }

    /* Styling for the custom icons */
    .mobile-menu-toggle-wrapper .btn-navbar {
        background-color: #121c2b !important;
        color: #ffffff !important;
        border: none !important;
        padding: 8px 12px !important;
        border-radius: 4px !important;
        float: none !important;
        margin: 0 !important;
    }

    .btn-cart-mobile {
        background-color: transparent !important;
        color: #121c2b !important;
        border: none !important;
        padding: 8px 0 !important;
        font-size: 22px !important;
    }

    /* Hide the default desktop cart column on mobile phone views only */
    header .col-sm-3, 
    header #cart:not(.mobile-cart-wrapper #cart) {
        display: none !important;
    }

    /* Stretch search bar nicely under the top flex bar */
    header #search, header .col-sm-5 {
        width: 100% !important;
        max-width: 100% !important;
        /*padding: 5px 15px !important;*/
        float: none !important;
    }
	
	header .row{
		margin-top: -25px;
	}
	
	nav#menu,
	#menu {
		display: none !important;
	}
	
	.swiper-viewport {
		margin-bottom: 20px;
	}
}
/* ==========================================================================
   FULL-SIZE RESPONSIVE APP-STYLE SLIDE OUT DRAWERS
   ========================================================================== */
@media (max-width: 767px) {
    /* Dimmed background background cover layer */
    .drawer-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }
    .drawer-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Core drawer setup layout */
    .app-drawer {
        position: fixed;
        top: 0;
        width: 85vw; /* Takes up 85% of full screen layout */
        max-width: 320px;
        height: 100vh;
        background: #ffffff;
        z-index: 999999;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
    }

    /* Direction coordinates */
    .drawer-left { left: 0; transform: translateX(-100%); }
    .drawer-right { right: 0; transform: translateX(100%); }

    /* Activate slider transition */
    .app-drawer.active { transform: translateX(0); }

    /* Header component inside the drawers */
    .drawer-header {
        background: #121c2b; /* Custom branding dark blue */
        color: #ffffff;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .drawer-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #fff; }
    .close-drawer { background: none; border: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }

    /* Inner scroll containers */
    .drawer-content { flex: 1; overflow-y: auto; padding: 10px 0; }

    /* Premium Category Link Formatting inside the panel */
    .mobile-category-list { list-style: none; padding: 0; margin: 0; }
    .mobile-category-list li a {
        display: block;
        padding: 14px 20px;
        color: #333333;
        font-size: 15px;
        border-bottom: 1px solid #eeeeee;
        text-decoration: none;
        font-weight: 500;
    }
    .mobile-category-list li a:active { background: #f5f5f5; }
    
    /* Make pulled internal shopping cart nodes render properly inside the drawer container */
    #mobileCartContent ul, #mobileCartContent table { width: 100% !important; margin: 0; }
    #mobileCartContent .text-right { padding: 10px 15px; }
}
/* Format the pulled OpenCart menu inside the left drawer panel */
@media (max-width: 767px) {
    #leftDrawer #menu {
        display: block !important;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #leftDrawer .navbar-collapse {
        display: block !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    #leftDrawer .nav {
        float: none !important;
        margin: 0 !important;
    }
    
    #leftDrawer .nav > li {
        float: none !important;
        display: block !important;
    }
    
    #leftDrawer .nav > li > a {
        color: #333333 !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border-bottom: 1px solid #eeeeee !important;
        background: none !important;
    }
    
    /* Handle open sub-categories dropdowns nicely if they exist */
    #leftDrawer .dropdown-menu {
        position: static !important;
        float: none !important;
        display: block !important;
        background: #fcfcfc !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 0 0 15px !important;
        margin: 0 !important;
    }
}
/* ==========================================================================
   APP DRAWER CATEGORY CLEANUP OVERRIDES
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Hide the redundant internal "CATEGORIES" header row bar inside the drawer */
    #leftDrawer nav#menu .navbar-header,
    #leftDrawer #menu .navbar-header,
    #leftDrawer .btn-navbar {
        display: none !important;
    }

    /* 2. Uncollapse the menu items inside the drawer so they lay flat automatically */
    #leftDrawer #menu .navbar-collapse {
        display: block !important;
        visibility: visible !important;
        clear: none !important;
        float: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. Strip the blocky dark background containers from the individual items */
    #leftDrawer .nav > li,
    #leftDrawer #menu ul.nav > li {
        float: none !important;
        display: block !important;
        background: transparent !important; /* Removes the dark box shape */
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Format the links into clean, highly readable vertical text list rows */
    #leftDrawer .nav > li > a,
    #leftDrawer #menu ul.nav > li > a {
        color: #ffffff !important;        /* Clear dark grey text color */
        background: transparent !important; /* Clears dark blue background block */
        padding: 16px 20px !important;    /* Spacious app-like spacing */
        font-size: 15px !important;
        font-weight: 500 !important;
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #eeeeee !important; /* Clean underline separator */
        text-shadow: none !important;
    }

    /* 5. Add a subtle visual effect when tapping a category item link */
    #leftDrawer .nav > li > a:hover,
    #leftDrawer .nav > li > a:active {
        background-color: #f9f9f9 !important;
        color: #121c2b !important; /* Highlights using your brand color */
    }

    /* 6. Clean up sub-category layouts if they drop down inside the drawer */
    #leftDrawer .dropdown-menu {
        position: static !important;
        float: none !important;
        display: block !important; /* Keeps sub-items visible */
        background: #fafafa !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 0 0 20px !important;
        margin: 0 !important;
    }
	
	#leftDrawer #menu .dropdown-inner a {
		Color: #000000 !important;
	}
}
/* ==========================================================================
   APP DRAWER SHOPPING CART ULTIMATE OPTIMIZATION
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Force the right drawer to be a full vertical flex container */
    #rightDrawer {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        padding-bottom: 0 !important;
    }

    /* 2. Isolate the scrolling content zone away from the pinned footer buttons */
    #rightDrawer #mobileCartContent {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 15px !important;
        background: #ffffff !important;
        margin-bottom: 85px !important; /* Leave room so content doesn't hide behind buttons */
    }

    /* 3. Convert table layout rows into completely isolated item grid panels */
    #rightDrawer #mobileCartContent table.table-striped tr {
        background: #fdfdfd !important;
        border: 1px solid #eaeaea !important;
        border-radius: 6px !important;
        padding: 12px 10px !important;
        margin-bottom: 12px !important;
        position: relative !important;
        display: block !important;
        min-height: 90px !important; /* Prevents text collapsing */
    }

    /* Thumbnail block sizing */
    #rightDrawer #mobileCartContent table.table-striped td.text-center:first-child {
        position: absolute !important;
        top: 12px !important;
        left: 10px !important;
        width: 50px !important;
        padding: 0 !important;
    }
    #rightDrawer #mobileCartContent table.table-striped td.text-center img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Product Title text link layout block */
    #rightDrawer #mobileCartContent table.table-striped td.text-left:nth-child(2) {
        margin-left: 65px !important;
        margin-right: 35px !important; /* Leaves clear space for the red X button */
        width: auto !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        padding: 0 !important;
        display: block !important;
        text-align: left !important;
    }

    /* Multiplier indicator layout (x 1) */
    #rightDrawer #mobileCartContent table.table-striped td.text-right:nth-child(3) {
        position: absolute !important;
        bottom: 12px !important;
        left: 75px !important;
        width: auto !important;
        font-size: 13px !important;
        color: #777777 !important;
        padding: 0 !important;
    }

    /* Row balance calculation total price (Fixes the text overlaps) */
    #rightDrawer #mobileCartContent table.table-striped td.text-right:nth-child(4) {
        position: absolute !important;
        bottom: 12px !important;
        right: 15px !important;
        width: auto !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        color: #121c2b !important;
        padding: 0 !important;
    }

    /* Clean tracking positioning for the red remove item button */
    #rightDrawer #mobileCartContent table.table-striped td.text-center:last-child {
        position: absolute !important;
        top: 12px !important;
        right: 10px !important;
        width: auto !important;
        padding: 0 !important;
    }
    #rightDrawer #mobileCartContent .btn-danger {
        padding: 3px 6px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
    }

    /* 4. Pricing Calculation Summary (Sub-Total, GST, Total) */
    #rightDrawer #mobileCartContent table:last-of-type {
        margin-top: 15px !important;
        border-top: 1px dashed #cccccc !important;
        padding-top: 12px !important;
        width: 100% !important;
    }
    #rightDrawer #mobileCartContent table:last-of-type tr {
        display: flex !important;
        justify-content: space-between !important;
        padding: 6px 0 !important;
        width: 100% !important;
    }
    #rightDrawer #mobileCartContent table:last-of-type td {
        font-size: 13px !important;
        padding: 0 !important;
    }
    #rightDrawer #mobileCartContent table:last-of-type tr:last-child td {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #121c2b !important;
    }

    /* 5. FORCE BUTTON FOOTER TO LOCK AT THE ABSOLUTE BOTTOM OF THE SCREEN */
    #rightDrawer #mobileCartContent p.text-right {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 80px !important;
        background: #ffffff !important;
        border-top: 1px solid #eaeaea !important;
        padding: 15px !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        z-index: 99999 !important;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.05) !important;
    }

    /* Button shape format settings */
    #rightDrawer #mobileCartContent p.text-right a {
        flex: 0 0 48% !important;
        width: 48% !important;
        height: 48px !important;
        line-height: 48px !important; /* Centers text vertically */
        padding: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        text-transform: uppercase !important;
        display: block !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
    }

    /* Left Button: View Cart */
    #rightDrawer #mobileCartContent p.text-right a:first-child {
        background: #f4f5f7 !important;
        color: #333333 !important;
        border: 1px solid #dcdfe6 !important;
    }

    /* Right Button: Checkout */
    #rightDrawer #mobileCartContent p.text-right a:last-child {
        background: #121c2b !important; /* Your brand dark color */
        color: #ffffff !important;
        border: none !important;
    }
}
@media (max-width: 767px) {
    .visible-xs.mobile-cart-wrapper {
        width: 20% !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }
    .btn-cart-mobile {
        background: transparent !important;
        border: none !important;
        padding: 5px !important;
        display: block !important;
        line-height: 1 !important;
    }
}
/* ==========================================================================
   MOBILE CART BUBBLE - PERFECTLY CENTERED ON TOP OF CART LINE
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Set the button container framework frame to an exact target box size */
    .visible-xs.mobile-cart-wrapper button.btn-cart-mobile {
        position: relative !important;
        display: inline-block !important;
        width: 44px !important;  /* Creates an easy mobile touch footprint */
        height: 44px !important;
        padding: 10px 0 0 0 !important; /* Drops the SVG down slightly to make room for bubble */
        background: transparent !important;
        border: none !important;
        text-align: center !important;
    }

    /* 2. Style the SVG icon frame container block */
    .visible-xs.mobile-cart-wrapper button.btn-cart-mobile svg {
        display: inline-block !important;
        margin: 0 auto !important;
        vertical-align: top !important;
    }

    /* 3. Sit the number bubble mathematically on the exact top horizontal line */
    .cart-count-bubble {
        position: absolute !important;
        top: 2px !important;        /* Adjust this to move it higher or lower onto the line */
        left: 60% !important;
        transform: translateX(-50%) !important; /* Perfectly balances horizontal alignment to the absolute centre */
        z-index: 10 !important;
        
        /* Typography and size dynamics */
        color: #121c2b !important;   /* High-contrast crisp white text */
        font-size: 15px !important;   /* Clean compact font sizing */
        font-weight: 700 !important; /* Ultra-bold typography weight */
        min-width: 15px !important;  /* Symmetrical circular geometry base */
        height: 15px !important;
        line-height: 15px !important; /* Perfect vertical layout centering inside bubble */
        text-align: center !important;
        border-radius: 50% !important; /* Perfect circle scaling */
        padding: 0 3px !important;    /* Micro horizontal padding spaces */
        box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
        pointer-events: none !important; /* Taps fall straight through to the button */
        display: none;
    }
}
/* Sync mobile menu trigger alignment with cart icon */
@media (max-width: 767px) {
    .visible-xs.mobile-menu-toggle-wrapper {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    .visible-xs.mobile-menu-toggle-wrapper button.btn-navbar {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
}