@charset "UTF-8";
/* == theme/Agate/css/style.css == */

html, body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body {
  display: unset;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #cfa757 #f8f9fa;
}

/* Chrome, Edge, and Safari */
	*::-webkit-scrollbar {
	width: 18px;
}

	*::-webkit-scrollbar-track {
	background: #f8f9fa;
	border-radius: 9px;
}

*::-webkit-scrollbar-thumb {
	background-color: #cfa757;
	border-radius: 9px;
	border: 2px solid #f8f9fa;
	transition: all 0.3s ease;
}

*::-webkit-scrollbar-thumb:hover {
	background-color: #b8944f;
}

*::-webkit-scrollbar-corner {
	background: #f8f9fa;
}

body {
	font-weight: normal;
	font-size: 16px;
	line-height: 28px;
	color: #1e1e1e;
	font-weight: 500;
	letter-spacing: 0.5px;
	padding: 0;
	margin: 0;
	text-size-adjust: none ;
	-webkit-text-size-adjust: none;
    font-family: 'Plus Jakarta Sans', 'Nunito', sans-serif;
}
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
button {
    color: #cfa757;
    text-decoration:none;
    outline:none;
    display:inline-block;
    -webkit-transition:all 0.3s ease-in;
    -moz-transition:all 0.3s ease-in;
    -o-transition:all 0.3s ease-in;
    transition:all 0.3s ease-in;
}
button:focus { outline: none; }
a {
	color: #272727;
	text-decoration:none;
	outline:none;
	display:inline-block;
	-webkit-transition:all 0.3s ease-in;
	-moz-transition:all 0.3s ease-in;
	-o-transition:all 0.3s ease-in;
	transition:all 0.3s ease-in;
}
a:hover, a:focus {
	color: #800210;
	outline: none;
	text-decoration:none;
}
h1,h2,h3,h4,h5,h6 {
	font-family: 'Nunito', sans-serif;
	margin-top: 0px;
}
p {
	margin-bottom:30px;
}
p:last-child {
    margin-bottom:0px;
}
img {
	max-width: 100%;
	height: auto;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
::-webkit-input-placeholder { /* Edge */
  	color: #272727;
  	opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  	color: #272727;
  	opacity: 1;
}

::placeholder {
  	color: #272727;
  	opacity: 1;
}
.black-btn {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border: 2px solid #1e1e1e;
    background-color: #1e1e1e;
    border-radius: 5px; 
    display: inline-block; 
    padding: 15px 30px 15px;
    position: relative;  
    text-align: center; 
    width: auto; 
    cursor:pointer; 
    text-transform: uppercase;
    line-height: 1.42857143;
    transition: all .5s;
}
.black-btn:hover,
.black-btn:focus  { 
    color: #fff ;
    background-color: #FEAF16;
    border: 2px solid #FEAF16;
}
.white-btn {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #800210;
    border: 2px solid #fff;
    background-color: #fff;
    border-radius: 5px; 
    display: inline-block; 
    padding: 15px 30px 15px;
    position: relative;  
    text-align: center; 
    width: auto; 
    cursor:pointer; 
    text-transform: uppercase;
    line-height: 1.42857143;
    transition: all .5s;
}
.white-btn:hover,
.white-btn:focus  { 
    color: #fff ;
    background-color: #FEAF16;
    border: 2px solid #FEAF16;
}
.light-btn {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border: 2px solid #FFFFFF;
    background-color: #1e1e1e;
    border-radius: 5px; 
    display: inline-block; 
    padding: 15px 30px 15px;
    position: relative;  
    text-align: center; 
    width: auto; 
    cursor:pointer; 
    text-transform: uppercase;
    line-height: 1.42857143;
    transition: all .5s;
}
.light-btn:hover,
.light-btn:focus  { 
    color: #1e1e1e;
    background-color: #FEAF16;
    border: 2px solid #FEAF16;
}
.section-header h2.title {
	font-family: 'Nunito', sans-serif;
    font-size: 36px;
    font-weight: 900;
    text-transform: capitalize;
    padding: 0 0 20px;
    margin: 0 0 0px;
    color: #1e1e1e;
    letter-spacing: 1px;
    position: relative;
}
.section-header h2.title:before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 62px;
	height: 6px;
	background-color: #800210;
	margin-left: -31px;
}





/* Compact WhatsApp Floating Button (Left Aligned) */
.whatsapp-floating-btn {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 99999;
    text-decoration: none !important;
}

.whatsapp-btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #ffffff !important;
    height: 44px;
    border-radius: 22px;
    padding: 0 16px 0 12px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.whatsapp-btn-inner i {
    font-size: 22px;
    color: #ffffff !important;
    margin-right: 6px;
    transition: transform 0.25s ease;
}

.whatsapp-btn-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.825rem;
    color: #ffffff !important;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.whatsapp-floating-btn:hover .whatsapp-btn-inner {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.55);
    background: linear-gradient(135deg, #20ba5a 0%, #0e7368 100%);
}

.whatsapp-floating-btn:hover i {
    transform: rotate(10deg);
}

@media (max-width: 768px) {
    .whatsapp-floating-btn {
        left: 12px;
        bottom: 16px;
    }
    .whatsapp-btn-inner {
        height: 40px;
        padding: 0 12px 0 10px;
    }
    .whatsapp-btn-inner i {
        font-size: 20px;
        margin-right: 5px;
    }
    .whatsapp-btn-text {
        font-size: 0.775rem;
    }
}
.calling:hover {
    width: 250px;
    transition: 0.7s ease;
}
.calling:hover .calling-text{
    opacity: 1;
	visibility: visible;
}

/* Calling Button end */


/* Back to top button Styles
================================================================================*/
#button {
    display: inline-block;
    background-color: #e9351f;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, 
    opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
#button::after {
    content: "\f062";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
    font-size: 1.5em;
    line-height: 50px;
    color: #fff;
}
#button:hover {
    cursor: pointer;
    background-color: #333;
}
#button:active {
    background-color: #555;
}
#button.show {
    opacity: 1;
    visibility: visible;
}

/* Back to top button Styles end
================================================================================*/

header.cms-header {
	position: relative;
	min-height: 0;
}
.header-sticky.is-sticky {
  	position: fixed;
  	width: 100%;
  	z-index: 99;
  	top: 0;
}
header.cms-header .header-top {
	border-bottom: 1px solid #e1e1e1;
}
header.cms-header .topDetail {
	font-size: 13px;
	padding: 10px 0;
	font-weight: bold;
}

.header-top-settings a {
	font-weight: bold;
	font-size: 15px;
}

header.cms-header .header-top-settings .nav {
	justify-content: flex-end;
}
header.cms-header .header-top-settings ul li {
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	position: relative;
	padding: 10px 0;
	position: relative;
	margin-left: 20px;
	display: flex;
	align-items: center;
}
header.cms-header .header-top-settings ul li i {
	margin-left: 5px;
}
header.cms-header .header-top-settings ul li:first-child {
	margin-left: 0;
	padding-left: 0;
}
header.cms-header .header-top-settings ul li .dropdown-list {
	top: 100%;
	right: 0;
	position: absolute;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	-webkit-transition: 0.4s;
	transition: 0.4s;
	padding: 5px 15px 10px;
	width: 100px;
	z-index: 9;
	pointer-events: none;
	background-color: #fff;
	-webkit-box-shadow: 0 0 6.65px 0.35px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 6.65px 0.35px rgba(0, 0, 0, 0.15);
}
header.cms-header .header-top-settings ul li .dropdown-list li {
	margin-left: 0;
	padding: 0;
}
header.cms-header .header-top-settings ul li .dropdown-list li a {
	color: #252525;
	font-size: 14px;
	display: block;
	padding: 5px 0 3px;
	text-transform: capitalize;
}
header.cms-header .header-top-settings ul li:hover .dropdown-list {
	opacity: 1;
	visibility: visible;
	pointer-events: visible;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}


	/* header middle Styles
======================================================================================================*/

.contact-call-wrap-top {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center;
}
.contact-call-wrap-top .footer-call {
  	margin-left: 15px;
}
.contact-call-wrap-top .footer-call p:first-child {
	margin-bottom: 10px;
}
.contact-call-wrap-top .footer-call p {
	color: #272727;
	font-size: 14px;
	line-height: 1;
	font-weight: 500;
	margin-bottom: 5px;
}
.search-box-wrapper {
	max-width: 100%;
	padding: 0;
}
.search-box-inner {
	position: relative;
	display: flex;
	align-items: center;
}
.search-field-wrap {
  	position: relative;
  	width: 100%;
  	border-radius: 3px;
	border: solid 2px #ddd;
}
.search-box-inner .search-field {
	width: 100%;
	height: 42px;
	font-size: 14px;
	font-weight: 500;
	color: #000;
	border: none;
	background-color: #fff;
	border-radius: 0 5px 5px 0;
	padding: 0 50px 0 15px;
}
.search-field-wrap .search-btn button {
	width: 42px;
	height: 42px;
	font-size: 16px;
	line-height: 42px;
	text-align: center;
	display: block;
	position: absolute;
	top: 50%;
	right: 0px;
	border-radius: 0;
	color: #ffffff;
	background: #800210;
	border: none;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-right: 0;
	cursor: pointer;
}
.search-field-wrap .search-btn button i {
	width: 100%;
	height: 100%;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.right-blok-box {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	margin: 0 0;
}
.box-cart-wrap .shopping-cart-wrap {
	position: relative;
	padding: 8px 12px;
	border-radius: 3px;
	border: 2px solid #800210;
	background: #800210;
}
.box-cart-wrap .shopping-cart-wrap > a {
	display: flex;
	align-items: center;
	color: #fff;
}
.shopping-cart-wrap .cart-total {
	background: #f59e0b !important;
	border-radius: 50% !important;
	color: #000000 !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	height: 22px !important;
	width: 22px !important;
	line-height: 22px !important;
	position: absolute !important;
	text-align: center !important;
	top: -9px !important;
	left: -12px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.right-blok-box a .cart-total-amunt {
	font-size: 14px;
	font-weight: 500;
	padding-left: 6px;
}
.shopping-cart-wrap ul.mini-cart {
	position: absolute;
	width: 320px;
	background: #fff;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	right: 0;
	top: 180%;
	border-radius: 5px;
	padding: 30px;
	z-index: 99;
	visibility: hidden;
	opacity: 0;
	-ms-filter: 0;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.shopping-cart-wrap ul.mini-cart::before {
	content: "";
	position: absolute;
	right: 40px;
	top: -7px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 7px 6px;
	border-color: transparent transparent #ffffff transparent;
}
.shopping-cart-wrap ul.mini-cart .cart-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding-bottom: 15px;
	position: relative;
}
.shopping-cart-wrap ul.mini-cart .cart-item .cart-image {
	display: block;
	width: 100px;
	border: solid 1px #ddd;
}
.shopping-cart-wrap ul.mini-cart .cart-item .cart-title {
	padding-left: 15px;
	width: 60%;
}
.shopping-cart-wrap ul.mini-cart .cart-item .cart-title h4 {
	font-size: 14px;
	font-weight: 500;
}
.shopping-cart-wrap ul.mini-cart .cart-item .cart-title .quanti-price-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.shopping-cart-wrap ul.mini-cart .cart-item .cart-title .quantity {
	font-size: 14px;
	margin-right: 5px;
	color: #1e1e1e;
}
.shopping-cart-wrap ul.mini-cart .cart-item .cart-title .price-box {
	font-size: 14px;
	color: #1e1e1e;
	font-weight: 700;
}
.shopping-cart-wrap ul.mini-cart .cart-item .cart-title .remove_from_cart {
	background: none;
	color: #1e1e1e !important;
	display: block;
	font-size: 16px;
	height: auto;
	left: auto;
	margin: 0;
	position: absolute;
	right: -10px;
	top: 0;
	width: auto;
	z-index: 1;
}
.shopping-cart-wrap ul.mini-cart .subtotal-box {
	border-top: 1px solid #ddd;
	padding-top: 15px;
}
.shopping-cart-wrap ul.mini-cart .subtotal-box .subtotal-title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.shopping-cart-wrap ul.mini-cart .subtotal-box .subtotal-title h3 {
	font-size: 14px;
	font-weight: 600;
	color: #1e1e1e;
	line-height: 20px;
	margin: 0;
}
.shopping-cart-wrap ul.mini-cart .subtotal-box .subtotal-title span {
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #1e1e1e;
}
.mini-cart-btns .cart-btns {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-top: 15px;
	width: 100%;
}
.mini-cart-btns .cart-btns a {
	margin-bottom: 10px;
	background: #eef0f1;
	border: 1px solid #e1e1e1;
	border-radius: 5px;
	color: #1e1e1e;
	display: block;
	font-size: 12px;
	font-weight: 700;
	height: 40px;
	line-height: 36px;
	padding: 0 25px;
	text-align: center;
	text-transform: uppercase;
}
.mini-cart-btns .cart-btns a:last-child {
	background-color: #800210;
	color: #fff;
}
.shopping-cart-wrap:hover ul.mini-cart {
	visibility: visible;
	opacity: 1;
	-ms-filter: 1;
	top: 160%;
}




.curreny-wrap {
	border-radius: 3px;
	background: transparent;
	border: 2px solid #ddd;
	color: #333;
	margin-left: 20px;
	position: relative !important;
}
.curreny-wrap ul li {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	position: relative;
	display: flex;
	align-items: center;
}
.curreny-wrap ul li i {
	margin-left: 7px;
}
.curreny-wrap ul li .dropdown-list {
	top: 100% !important;
	right: -2px !important;
	position: absolute;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	-webkit-transition: 0.4s;
	transition: 0.4s;
	padding: 8px 15px 8px;
	width: 115px !important;
	max-height: 250px !important;
	overflow-y: auto !important;
	border-radius: 6px !important;
	z-index: 999;
	pointer-events: none;
	background-color: #fff;
	-webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Custom thin scrollbar for currency dropdown */
.curreny-wrap ul li .dropdown-list::-webkit-scrollbar {
	width: 5px !important;
}
.curreny-wrap ul li .dropdown-list::-webkit-scrollbar-track {
	background: #f1f5f9 !important;
	border-radius: 10px !important;
}
.curreny-wrap ul li .dropdown-list::-webkit-scrollbar-thumb {
	background: #fbbf24 !important;
	border-radius: 10px !important;
}
.curreny-wrap ul li .dropdown-list::-webkit-scrollbar-thumb:hover {
	background: #d97706 !important;
}

.curreny-wrap ul li .dropdown-list li {
	margin-left: 0;
	padding: 0;
}
.curreny-wrap ul li .dropdown-list li a {
	color: #252525;
	font-size: 13.5px;
	font-weight: 600;
	display: block;
	padding: 5px 0 3px;
	text-transform: uppercase !important;
	transition: all 0.2s ease !important;
}
.curreny-wrap ul li .dropdown-list li a:hover {
	color: #7f0517 !important;
	padding-left: 3px !important;
}
.curreny-wrap ul li:hover .dropdown-list {
	opacity: 1;
	visibility: visible;
	pointer-events: visible;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}



	/* header bottom Styles
======================================================================================================*/

.header-bottom {
	background-color: #800210;
}
.categories_menu {
  	position: relative;
}
.categories-menu-wrap_box .categories_menu_toggle {
  	display: none;
}
.categories-menu-wrap_box .categories_title {
	height: 52px;
	line-height: 52px;
	background: #FEAF16;
	padding: 0 40px 0 16px;
	font-weight: 700;
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	box-shadow: inset 4px 0 0 #3b0208;
	border-right: 1px solid rgba(0, 0, 0, 0.12);
	transition: background 0.2s ease;
}
.categories-menu-wrap_box .categories_title:hover,
.categories-menu-wrap_box .categories_title.is-open {
	background: #e59d0e;
}
.categories_title .categori_toggle {
	line-height: 52px;
	color: #3b0208;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}
.categories_title .categori_toggle::before {
	content: "\f0c9";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #3b0208;
	display: inline-block;
	position: absolute;
	font-size: 14px;
	line-height: 0px;
	right: 16px;
	top: 50%;
	-webkit-transform: translatey(-50%);
	transform: translatey(-50%);
}
.categories_menu_toggle {
	padding: 0;
	-webkit-box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
	background: #fff;
	position: absolute;
	width: 100%;
	top: 100%;
	z-index: 100050;
}
.categories_menu_toggle > ul > li {
  	position: relative;
  	border-bottom: solid 1px #ddd;
}
.categories_menu_toggle > ul > li.menu_item_children:before {
	content:'';
	position:absolute;
    top: 0;
	right: -36px;
	width:0;
	height:0;
	border: 26px solid transparent;
	border-left: 10px solid #fff;
	transition: all 0.3s ease-in;
	opacity: 0;
	visibility: hidden;
}
.categories_menu_toggle > ul > li > a {
	font-size: 16px;
	line-height: 1.8;
	text-transform: capitalize;
	font-weight: 700;
	display: block;
	cursor: pointer;
	padding: 10px 20px;
}
.categories_menu_toggle > ul > li > a i {
	float: right;
	line-height: 1.8;
}
.categories_menu_toggle > ul > li ul.categories_mega_menu {
	position: absolute;
	left: 110%;
	width: 240px;
	-webkit-box-shadow: 1px 0 6px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 1px 0 6px 0 rgba(0, 0, 0, 0.3);
	background: #fff;
	padding: 5px 15px 5px;
	max-height: 240px;
	overflow: hidden;
	overflow-y: auto;
	top: 0;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	z-index: 3;
	opacity: 0;
	visibility: hidden;
}
.categories_menu_toggle > ul > li ul.categories_mega_menu > li {
	display: block;
}
.categories_menu_toggle > ul > li ul.categories_mega_menu > li > a {
	display: block;
	padding: 5px 0;
	font-size: 14px;
	font-weight: 500;
}
.categories_menu_toggle > ul > li:hover ul.categories_mega_menu {
	opacity: 1;
	visibility: visible;
	left: 105%;
}
.categories_menu_toggle > ul > li:hover:before {
	opacity: 1;
	visibility: visible;
}
.rx-child, 
.categories_menu_toggle ul li a.rx-show {
  	display: none;
}
.categories_menu_toggle ul li.rx-parent {
  	cursor: pointer;
  	border: 0;
}
.categories_menu_toggle ul li.rx-parent a {
	color: #800210;
}
.categories_menu_toggle ul li.rx-change a.rx-default {
  	display: none;
}
.categories_menu_toggle ul li.rx-change a.rx-show {
  	display: block;
}


.main-menu ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-menu ul > li {
	display: flex;
	align-items: stretch;
	position: relative;
	margin: 0;
	flex: 1 1 0;
	min-width: 0;
}
.main-menu ul > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
	padding: 0 14px;
	height: 52px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	white-space: nowrap;
	position: relative;
}
.main-menu ul > li > a:before {
	content: "";
	background: #e8b84a;
	width: 0%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	-ms-filter: 0;
	-webkit-transition: 0.25s;
	transition: 0.25s;
}
.main-menu ul > li:hover > a:before {
	visibility: visible;
	opacity: 1;
	-ms-filter: 1;
	width: 100%;
}

	/* banner Styles
======================================================================================================*/

section.cms-banner {
	position: relative;
	padding: 22px 0 0;
}
/* Hero entrance: transform-only, no delay, so the heading and image paint at once (LCP) and never start invisible */
@keyframes agateSlideUp { from { transform: translateY(18px); } to { transform: none; } }
@keyframes agateSlideRight { from { transform: translateX(-24px); } to { transform: none; } }
section.cms-banner .owl-item.active h1,
section.cms-banner .owl-item.active h2 {
	animation: agateSlideUp 0.6s ease-out both;
}
section.cms-banner .owl-item.active p {
	animation: agateSlideUp 0.7s ease-out both;
}
section.cms-banner .owl-item.active .btn-box {
	animation: agateSlideUp 0.8s ease-out both;
}
section.cms-banner .owl-item.active .banner-img {
	animation: agateSlideRight 0.7s ease-out both;
}
section.cms-banner h1,
section.cms-banner h2 {
	font-family: 'Nunito', sans-serif;
	font-size: 51px;
	font-weight: 700;
	color: #800210;
	margin: 0 0 30px;
	word-break: normal;
	overflow-wrap: break-word;
}
/* Before owl-carousel initialises, only the first slide is laid out (no jump, no 3-column squeeze). */
.owl-carousel:not(.owl-loaded) > .item:not(:first-child) { display: none; }
/* ...and the hero is visible immediately instead of waiting for JS (no blank space, no layout jump). */
.cms-banner .owl-carousel:not(.owl-loaded) { display: block; }
.cms-banner .banner-img img { width: 100%; height: auto; }
section.cms-banner h1 span,
section.cms-banner h2 span {
	display: block;
	font-size: 40px;
	color: #fff;
	font-weight: 600;
}
section.cms-banner p {
	font-size: 22px;
	font-weight: 300;
	color: #000;
}

section.cms-banner .banner-txt {
	padding-left: 54px;
}

	/* customer support Styles
======================================================================================================*/
section.cms-support {
	position: relative;
	padding: 60px 0 60px;
}
section.cms-support .col-md-4 {
	-ms-flex: 0 0 20%;
	flex: 0 0 20%;
	max-width: 20%;
}
section.cms-support .support-box {
	background: #f4f4f4;
	border: 2px solid #e5e5e5;
	padding: 0px 10px 20px;
	transition: all 0.3s ease-in;
}
section.cms-support .support-box .icon {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;

}
section.cms-support .support-box p {
	font-size: 16px;
	line-height: 24px;
	transition: all 0.3s ease-in;
}
section.cms-support .support-box svg path,
section.cms-support .support-box svg circle {
	transition: all 0.3s ease-in;
}
section.cms-support .support-box:hover {
	background-color: #800210;
}
section.cms-support .support-box:hover svg path,
section.cms-support .support-box:hover svg circle {
	fill: #FEAF16;
}
section.cms-support .support-box:hover p {
	color: #FEAF16;
}


	/* single product Styles
======================================================================================================*/

section.cms-single-product {
	position: relative;
	padding: 80px 0 80px;
	background-color: #f4f4f4;
}
section.cms-single-product .section-header {
	padding: 0 0 30px;
}
.custom-tab .nav-tabs {
  	border-bottom: 3px solid #c7c7c7;
  	justify-content: center;
  	margin: 0 0 40px;
}
.custom-tab .nav-tabs > li {
  	margin-bottom: -4px;
}
.custom-tab .nav > li > a {
	color: #898989;
	cursor: pointer;
	font-size: 18px;
	font-weight: 900;
	margin-bottom: 0;
	padding: 18px 20px 17px;
	text-transform: uppercase;
	display: inline-block;
	border-radius: 0;
	border-bottom: solid 6px transparent;
	margin-right: 10px;
}
.custom-tab .nav > li > a:hover {
	color: #1e1e1e;
	border-bottom: solid 6px #800210;
}
.custom-tab .nav-tabs > li > a.active, 
.custom-tab .nav-tabs > li > a.active:focus, 
.custom-tab .nav-tabs > li > a.active:hover {
  	color: #1e1e1e;
  	border-bottom: solid 6px #800210;
}
.single_product {
	position: relative;
	background-color: #fff;
	border: 1px solid #353535;
	border-radius: 10px;
	padding: 15px;
	height: 100%;
	overflow: hidden;
}
.single_product .product-img-box {
	position: relative;
}
.single_product .product_thumb {
  	position: relative;
  	max-width: 250px;
	height: 250px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
  	overflow: hidden;
  	transition: all 0.3s ease-in;
}
/* Product Thumbnail Hover Fix */
.single_product .product_thumb a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.single_product .product_thumb img.primary-img {
  transition: opacity 0.35s ease, transform 0.35s ease !important;
  opacity: 1 !important;
}

.single_product .product_thumb img.secondary-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  opacity: 0 !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
  pointer-events: none;
}

/* If second image exists: smooth crossfade on hover */
.single_product:hover .product_thumb.has-second-img img.primary-img {
  opacity: 0 !important;
}

.single_product:hover .product_thumb.has-second-img img.secondary-img {
  opacity: 1 !important;
  transform: scale(1.03);
}

/* If NO second image: main image MUST NOT hide or fade away! */
.single_product:hover .product_thumb:not(.has-second-img) img.primary-img {
  opacity: 1 !important;
  transform: scale(1.04);
}
.single_product .product_discount {
  	position: absolute;
  	top: 0;
  	left: 20px;
  	width: 80px;
  	height: 30px;
  	background: #800210;
  	border-radius: 0px 0px 9px 9px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}
.single_product .product_discount span {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}
.single_product .product-name {
	height: 50px;
	overflow: hidden;
	margin: 0 0 20px;
	text-align: center;
}
.single_product .product-name a {
	color: #1a1a1a;
	line-height: 1.4;
	font-weight: 700;
}
.single_product .product-price {
	text-align: center;
}
.single_product .product-price a {
	color: #800210;
	font-size: 20px;
	font-weight: 900;
}
.single_product .product-detail-list {
	border: 0;
	padding: 0;
	margin: 10px 0 0 0 !important;
}
.single_product .product-detail-list ul li:last-child {
	border-radius: 6px !important;
	margin-bottom: 0 !important;
}
.single_product .sp-button {
	border: 0 none;
	left: 50%;
	margin-left: -65px;
	margin-top: -20px;
	position: absolute;
	top: 50%;
	width: 100%;
	overflow: hidden;
	transition: all 0.5s ease-out 0s;
}
.single_product .sp-button .s-button {
	border-right: 0 none;
	float: left;
	height: 40px;
	margin-right: 10px;
	transform: scale(0);
	transition: all 0.4s ease 0s;
	width: 40px;
}
.single_product .sp-button .s-button a {
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background-color: #800210;
	border-radius: 50%;
	width: 100%;
	height: 100%;
}
.single_product .sp-button .s-button a:hover {
	background-color: #1a1a1a;
}
.single_product:hover .sp-button {
  background: none;
}
.single_product:hover .s-button {
  	transform: scale(1);
}



.custom-carousel .owl-nav{	
	opacity: 0;
	transition: all 0.3s linear;
}
.custom-carousel .owl-nav button.owl-prev,
.custom-carousel .owl-nav button.owl-next {
	background: #1e1e1e;
	border-radius: 0px;
	color: #fff;
	display: inline-block;
	font-size: 25px;
	padding: 3px 10px;
	height: 80px;
	line-height: 70px;
	text-align: center;
	transition: all 0.3s linear;
	width: 32px;
	opacity:1;
	margin:0;
}
.custom-carousel:hover .owl-nav{
	opacity:1;
}
.custom-carousel .owl-nav button:hover {
  background: #800210;
}
.custom-carousel .owl-prev{
	position: absolute;
	top: 50%;
	margin-top: -40px !important;
	left:0;
}
.custom-carousel .owl-next{
	position: absolute;
	top: 50%;
	margin-top: -40px !important;
	right:0;
}
section.cms-single-product .btn-box {
	padding: 60px 0 0;
}


	/* static area Styles
======================================================================================================*/

section.cms-static-area {
	position: relative;
	padding: 80px 0 80px;
}
.single-static {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	background: #9F9F9F;
	border-radius: 10px;
	padding: 30px;
	padding-right: 60px;
	transition: all .5s;
}
.single-static .icon {
	width: 290px;
  	margin-right: 40px;
}
.single-static .icon img {
	border-radius: 10px;
}
.single-static .content {
	width: calc(100% - 290px);
}
.single-static h4 {
	font-size: 30px;
	line-height: 1.4;
	font-weight: 900;
	color: #fff;
	margin: 0 0 40px;
}
.single-static:hover {
	background-color: #353535;
}
.single-static:hover .btn-box a {
	color: #1e1e1e;
    background-color: #FEAF16;
    border: 2px solid #FEAF16;
}

	/* about Styles
======================================================================================================*/

section.cms-about {
	position: relative;
	padding: 80px 0 80px;
	background-color: #1e1e1e;
}
section.cms-about .about-img {
	border-radius: 10px;
	border: 3px solid #FEAF16;
}
section.cms-about .about-img img {
	border-radius: 7px;
}
section.cms-about .about-content h2 {
	font-size: 30px;
	color: #fff;
	font-weight: 900;
	margin: 0 0 20px;
	max-width: 460px;
	line-height: 1.4;
}
section.cms-about .about-content h3 {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 20px;
}
section.cms-about .about-content p {
	color: #fff;
}	

	/* stone list Styles
======================================================================================================*/

section.stone-list {
	position: relative;
	background-color: #f4f4f4;
	padding: 90px 0 90px;
}
section.stone-list .section-header {
	padding: 0 0 60px;
}
section.stone-list .btn-box {
  	padding: 60px 0 0;
}


	/* SHOP BY CATEGORY Styles
======================================================================================================*/

section.cms-category {
	position: relative;
	padding: 90px 0 90px;

}
section.cms-category .section-header {
	padding: 0 0 60px;
}
.category-box {
	position: relative;
	padding: 30px;
	border-radius: 20px;
	height: 100%;
    border:solid 1px;
}
.category-box:before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	
    background-repeat: no-repeat;
	width: 121px;
	height: 117px;
}
.category-box .category-img {
	width: 200px;
	height: 200px;
	margin: 0 auto 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.category-box .category-img img {
	width: auto;
	display: inline-block;
}
.category-box h4 {
	font-size: 18px;
	font-weight: 900;
	color: #FEAF16;
	margin: 0 0 30px;
}
.category-box h4 a {
	color: #800210;
}
.category-box .category-list {
	max-height: 240px;
	overflow: hidden;
	overflow-y: auto;
}
.category-box ul li {
	position: relative;
	padding-left: 15px;
	margin: 0 0 5px;
}
.category-box ul li:before {
	content: "\f105";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 0;
	color: #202020;
	font-size: 16px;
	transition: all 0.3s ease-in;
}
.category-box ul li a {
	color: #202020;
	font-size: 16px;
}
.category-box ul li:hover a,
.category-box ul li:hover:before {
	color: #FEAF16;
}



	/* special Styles
======================================================================================================*/

section.cms-special {
	position: relative;
	background-color: #f4f4f4;
	padding: 30px 0 30px;
}
section.cms-special .section-header h2 {
	color: #800210;
	font-size: 60px;
	font-weight: 900;
	letter-spacing: 3px;
	color: #800210;
	text-transform: uppercase;
}
section.cms-special .section-header h2 span {
	letter-spacing: 0;
	font-size: 32px;
	font-weight: 900;
	color: #272727;
	text-transform: uppercase;
	display: block;
	padding: 0 0 10px;
}
section.cms-special .section-header p {
	font-size: 24px;
}



	/* Recommended Styles
======================================================================================================*/

section.cms-recommended {
	position: relative;
	padding: 100px 0 100px;
}
section.cms-recommended .section-header {
	padding: 0 0 60px;
}
section.cms-recommended .single_product {
  	display: flex;
}
section.cms-recommended .single_product .product-detail-list {
	margin: 0;
}
section.cms-recommended .single_product .product-detail-list ul li:last-child {
  	border-radius: 0;
}
section.cms-recommended .single_product .product-info {
	margin-left: 20px;
}


	/* footer Styles
======================================================================================================*/

footer.cms-footer {
	position: relative;
	background-color: #0b0103 !important;
	border-top: 3px solid #FEAF16;
	color: #cbd5e1;
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 1. Corporate Trust Features Bar */
.footer-trust-bar {
	background: #140305;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 28px 0;
}

.footer-trust-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 15px;
}

.footer-trust-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(254, 175, 22, 0.12);
	border: 1px solid rgba(254, 175, 22, 0.3);
	color: #FEAF16;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.footer-trust-item:hover .footer-trust-icon {
	background: #FEAF16;
	color: #3b0208;
	transform: scale(1.06);
}

.footer-trust-text strong {
	display: block;
	color: #ffffff;
	font-size: 0.96rem;
	font-weight: 700;
	margin-bottom: 3px;
}

.footer-trust-text span {
	color: #94a3b8;
	font-size: 0.84rem;
	line-height: 1.35;
	display: block;
}

/* 2. Footer Main Top Section */
footer.cms-footer .footer-top {
	padding: 60px 0 45px;
	background: linear-gradient(180deg, #140305 0%, #060102 100%) !important;
}

.footer-brand-col {
	margin-bottom: 30px;
}

.footer-brand-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 10px;
	letter-spacing: -0.5px;
}

.footer-brand-desc {
	font-size: 0.9rem;
	color: #cbd5e1;
	line-height: 1.6;
	margin-bottom: 20px;
}

.footer-top-wrap {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	gap: 30px !important;
}

footer.cms-footer .footer-nav {
	flex: 1 1 210px !important;
	min-width: 190px !important;
	margin-bottom: 25px !important;
}

footer.cms-footer .footer-nav h4 {
	font-size: 1.15rem !important;
	color: #FEAF16 !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin: 0 0 22px !important;
	position: relative !important;
	padding-bottom: 12px !important;
}

footer.cms-footer .footer-nav h4:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 3px;
	background: #FEAF16;
	border-radius: 2px;
}

footer.cms-footer .footer-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

footer.cms-footer .footer-nav ul li {
	margin-bottom: 12px !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

/* Contact icons directly under LI */
footer.cms-footer .footer-nav ul li > span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	color: #FEAF16 !important;
	font-size: 1rem !important;
	flex-shrink: 0 !important;
}

footer.cms-footer .footer-nav ul li a {
	color: #e2e8f0 !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	line-height: 1.4 !important;
	width: auto !important;
}

footer.cms-footer .footer-nav ul li a span {
	width: auto !important;
	height: auto !important;
	font-size: inherit !important;
	color: inherit !important;
	display: inline !important;
	white-space: normal !important;
}

footer.cms-footer .footer-nav ul li a i {
	flex-shrink: 0 !important;
}

footer.cms-footer .footer-nav ul li a:hover {
	color: #FEAF16 !important;
	transform: translateX(4px) !important;
}

footer.cms-footer .footer-nav ul li a:before {
	display: none;
}

/* Footer Reach Us Address Block */
footer.cms-footer .footer-nav .footer-address {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin-top: 5px !important;
}

footer.cms-footer .footer-nav .footer-address span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	color: #FEAF16 !important;
	font-size: 1.1rem !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}

footer.cms-footer .footer-nav .footer-address p {
	color: #e2e8f0 !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

/* Back-to-Top Button Positioned Safely Above Live Chat Button */
#button, .scroll-to-top, #back-to-top, a#button {
	position: fixed !important;
	bottom: 95px !important;
	right: 25px !important;
	z-index: 99999 !important;
	transition: all 0.3s ease !important;
}

@media (max-width: 991px) {
	#button, .scroll-to-top, #back-to-top, a#button {
		bottom: 150px !important;
		right: 18px !important;
	}
}

/* 3. Footer Mid Social & Payments */
footer.cms-footer .footer-mid {
	background-color: #120204 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 22px 0;
}

footer.cms-footer .footer-mid-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
}

footer.cms-footer .footer-social {
	display: flex !important;
	align-items: center !important;
	gap: 15px !important;
	flex-wrap: wrap !important;
}

footer.cms-footer .footer-social h4 {
	font-size: 0.95rem !important;
	color: #FEAF16 !important;
	font-weight: 800 !important;
	letter-spacing: 1px !important;
	margin: 0 !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}

footer.cms-footer .footer-social ul {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

footer.cms-footer .footer-social ul li {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

footer.cms-footer .footer-social ul li a {
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	font-size: 1.1rem !important;
	border-radius: 50% !important;
	transition: all 0.3s ease !important;
	text-decoration: none !important;
}

footer.cms-footer .footer-social ul li a:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 6px 18px rgba(254, 175, 22, 0.35) !important;
	border-color: #FEAF16 !important;
	background-color: #FEAF16 !important;
	color: #3b0208 !important;
}

footer.cms-footer .footer-payment {
	display: flex !important;
	align-items: center !important;
	gap: 15px !important;
	flex-wrap: wrap !important;
}

footer.cms-footer .footer-payment h4 {
	font-size: 0.875rem !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	letter-spacing: 1px !important;
	margin: 0 !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}

footer.cms-footer .footer-payment ul {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

footer.cms-footer .footer-payment ul li {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

footer.cms-footer .footer-payment ul li img {
	max-height: 38px !important;
	width: auto !important;
	border-radius: 6px !important;
	background: #ffffff !important;
	padding: 4px 8px !important;
	display: block !important;
}

/* 4. Footer Bottom Tags & Copyright */
footer.cms-footer .footer-bottom {
	background-color: #000000 !important;
	padding: 10px 0 15px !important;
}

footer.cms-footer .footer-category h4 {
	font-size: 0.875rem;
	color: #ffffff;
	font-weight: 800;
	letter-spacing: 1px;
	margin-bottom: 16px;
	text-transform: uppercase;
}

footer.cms-footer .footer-category ul {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

footer.cms-footer .footer-category ul li {
	display: inline-block;
	padding: 0;
}

footer.cms-footer .footer-category ul li a {
	color: #cbd5e1;
	font-size: 0.8rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 6px 14px;
	border-radius: 20px;
	text-decoration: none;
	transition: all 0.25s ease;
	display: inline-block;
}

footer.cms-footer .footer-category ul li a:hover {
	background: #f59e0b;
	color: #000000;
	border-color: #f59e0b;
	font-weight: 700;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

footer.cms-footer .copyright {
	padding: 5px 0 0 !important;
	border-top: none !important;
	margin-top: 0 !important;
}

footer.cms-footer .copyright ul {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

footer.cms-footer .copyright ul li {
	display: inline-block;
	margin: 0 8px;
}

footer.cms-footer .copyright ul li a {
	color: #94a3b8;
	font-size: 0.8rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
	transition: color 0.2s;
	text-decoration: none;
}

footer.cms-footer .copyright ul li a:hover {
	color: #f59e0b;
}

footer.cms-footer .copyright p {
	font-size: 0.85rem;
	color: #64748b;
	margin: 4px 0;
}

/* SSL & Trust Security Widget */
.ssl-security-widget {
	background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
	border: 1px solid rgba(245, 158, 11, 0.3) !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
	border-radius: 16px !important;
	padding: 18px 22px !important;
	transition: all 0.3s ease !important;
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
}
.ssl-security-widget:hover {
	border-color: rgba(245, 158, 11, 0.6) !important;
	box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.35) !important;
	transform: translateY(-2px) !important;
}
.ssl-icon-box {
	width: 48px !important;
	height: 48px !important;
	border-radius: 12px !important;
	background: rgba(245, 158, 11, 0.15) !important;
	border: 1px solid rgba(245, 158, 11, 0.35) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	margin-right: 16px !important;
}
.ssl-text-block {
	flex: 1 !important;
}
.ssl-title {
	color: #ffffff !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
	margin: 0 0 3px 0 !important;
	line-height: 1.3 !important;
}
.ssl-desc {
	color: #cbd5e1 !important;
	font-size: 0.8rem !important;
	line-height: 1.35 !important;
	display: block !important;
}

	/*  Begin JB's Offcanvas Area  Styles
======================================================================================================*/

.mobile-navigation {
  	overflow: hidden;
}
.mobile-navigation +.mobile-navigation {
	margin-top: 10px;
	padding-top: 10px;
	border-top: solid 2px #ddd;
}

.off-canvas-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	opacity: 0;
	visibility: hidden;
	pointer-events: none !important;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	z-index: 9999;
}

.mobile-menu {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding-right: 10px;
	margin-right: -10px;
}

.mobile-navigation nav {
  	height: 100%;
}
.off-canvas-wrapper.open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto !important;
}
.off-canvas-wrapper.open .off-canvas-inner-content {
	-webkit-transform: none;
	transform: none;
}
.off-canvas-wrapper .off-canvas-overlay {
	background-color: rgba(0, 0, 0, 0.4);
	content: "";
	cursor: url("/theme/Agate/css/../images/icon/cancel.png"), auto;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
.off-canvas-wrapper .off-canvas-inner-content {
	background-color: #fff;
	width: 300px;
	padding: 20px;
	height: 100%;
	position: relative;
	-webkit-transform: translateX(calc(-100% - 50px));
	transform: translateX(calc(-100% - 50px));
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.off-canvas-wrapper .btn-close-off-canvas {
	top: 0;
	left: 100%;
	width: 40px;
	height: 40px;
	font-size: 20px;
	background-color: #800210;
	color: #fff;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	position: absolute;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.off-canvas-wrapper .btn-close-off-canvas i {
	-webkit-transform: rotate(0);
	transform: rotate(0);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.off-canvas-wrapper .btn-close-off-canvas:hover i {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.off-canvas-wrapper .off-canvas-inner {
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;
  	margin-left: auto;
  	height: 100%;
}
.offcanvas-curreny-lang-support {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin: 20px 0;
	-webkit-box-pack: center;
	  -ms-flex-pack: center;
	      justify-content: center;
	padding-top: 15px;
}
.offcanvas-curreny-lang-support.header-top-settings ul li {
	color: #333;
	font-size: 14px;
}
.offcanvas-account-container li {
	display: inline-block;
	margin-left: 10px;
	padding-left: 10px;
	margin-bottom: 2px;
}
.offcanvas-account-container li::before {
	content: "•";
	color: #777;
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

/*---------------------------
    - Mobile Menu Css
-----------------------------*/
.mobile-header .category-toggle {
  	padding: 8px 15px;
}
.mobile-menu-btn .off-canvas-btn {
  	font-size: 17px;
  	cursor: pointer;
  	padding: 8px 12px;
  	line-height: 1;
  	color: #fff;
  	border: 2px solid #FEAF16;
  	margin-left: 10px;
}
.mobile-menu-btn .off-canvas-btn a {
	color: #fff;
}
.mobile-menu li > a {
	font-size: 15px;
	color: #252525;
	text-transform: capitalize;
	line-height: 18px;
	position: relative;
	display: inline-block;
	padding: 10px 0;
}
.mobile-menu li > a:hover {
  	color: #80BB01;
}
.mobile-menu li ul li {
  	border: none;
}
.mobile-menu li ul li a {
	font-size: 14px;
	text-transform: capitalize;
	padding: 10px 15px 8px;
}
.mobile-menu .menu-item-has-children {
  	position: relative;
}
.mobile-menu .menu-item-has-children .menu-expand {
	line-height: 50;
	top: -5px;
	left: 95%;
	width: 30px;
	position: absolute;
	height: 50px;
	text-align: center;
	cursor: pointer;
}
.mobile-menu .menu-item-has-children .menu-expand i {
	display: block;
	position: relative;
	width: 10px;
	margin-top: 25px;
	border-bottom: 1px solid #252525;
	-webkit-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}
.mobile-menu .menu-item-has-children .menu-expand i:before {
	top: 0;
	width: 100%;
	content: "";
	display: block;
	position: absolute;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	border-bottom: 1px solid #252525;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.mobile-menu .menu-item-has-children.active > .menu-expand i:before {
  	-webkit-transform: rotate(0);
  	transform: rotate(0);
}
.mobile-menu .menu-item-has-children .dropdown {
	width: 100%;
	height: 280px;
	overflow-y: auto;
}

.search-box-offcanvas {
  	margin-bottom: 10px;
}
.search-box-offcanvas form {
  	position: relative;
}
.search-box-offcanvas form input {
	color: #666;
	font-size: 13px;
	width: 100%;
	height: 40px;
	border: none;
	padding: 0 40px 0 10px;
	background-color: #f2f2f2;
}
.search-box-offcanvas form .search-btn {
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	color: #fff;
	position: absolute;
	background: #800210;
	border: none;
}


	/*  product detail Styles
======================================================================================================*/

.breadcrumb-area {
	background: #f4f4f4;
	padding: 17px 0;
	border: 1px solid #ebebeb;
}
.breadcrumb-list .breadcrumb-item {
	font-size: 14px;
	text-transform: capitalize;
	line-height: 1;
	display: inline-block;
	font-weight: 600;
}
.breadcrumb-list .breadcrumb-item.active {
  	color: #800210;
}
.section-ptb {
  	padding: 60px 0 60px;
}
.product-info h4 {
	position: relative;
	font-weight: 700;
	padding-bottom: 15px;
  	border-bottom: solid 2px #ddd;
  	margin: 0 0 20px;
}
.product-info h4:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	height: 6px;
	width: 90px;
	background-color: #800210;
}
.product-rating li {
  	margin-right: 3px;
  	font-size: 15px;
  	color: #ffcc00;
}
.product-details-view-content .product-rating li a {
  	color: #FECC0A;
}
.product-details-view-content .product-rating > a {
  margin-left: 10px;
}
.product-details-view-content .price-box {
	color: #800210;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 10px;
	width: 100%;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
}
.product-details-view-content .price-box .new-price {
	background: none;
	text-decoration: none;
	color: #800210;
	font-weight: 900;
}
.product-details-view-content .price-box .old-price {
	color: #777;
	display: inline-block;
	font-weight: 600;
	margin-left: 4px;
	text-decoration: line-through;
}

.product-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 4px 0 16px;
}
.product-pager-link {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 10px 14px;
	background: #fffaf3;
	border: 1px solid #e8d5a3;
	border-radius: 8px;
	color: #7f0517 !important;
	text-decoration: none !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.product-pager-prev {
	border-left: 3px solid #d4a017;
}
.product-pager-next {
	border-right: 3px solid #d4a017;
	text-align: right;
	align-items: flex-end;
}
.product-pager-link:hover,
.product-pager-link:focus {
	background: #f3e6c4;
	border-color: #d4a017;
	color: #6a0412 !important;
	box-shadow: 0 4px 12px rgba(127, 5, 23, 0.08);
}
.product-pager-dir {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7f0517;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.product-pager-next .product-pager-dir {
	justify-content: flex-end;
}
.product-pager-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #1e293b;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-pager-link.is-placeholder {
	visibility: hidden;
	pointer-events: none;
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
}
@media (max-width: 575px) {
	/* Compact arrow-only pager on mobile: two small round buttons instead of
	   full stacked cards with product names, so it doesn't push the buy
	   button/description far down the page. */
	.product-pager {
		grid-template-columns: auto auto;
		justify-content: flex-start;
		gap: 8px;
		margin: 4px 0 12px;
	}
	.product-pager-link {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		min-width: 40px;
		padding: 0;
		border-radius: 50%;
		border-width: 1px;
	}
	.product-pager-prev {
		border-left-width: 1px;
	}
	.product-pager-next {
		border-right-width: 1px;
		text-align: center;
		align-items: center;
	}
	.product-pager-dir {
		font-size: 16px;
		gap: 0;
	}
	.product-pager-name,
	.product-pager-text {
		display: none;
	}
	.product-pager-next .product-pager-dir {
		justify-content: center;
	}
	.product-pager-link.is-placeholder {
		display: none;
	}
}
.product-detail-list {
	border-top: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
	padding: 25px 0;
	margin-top: 30px;
}
.product-detail-list ul {
	max-width: 400px;
}
.product-detail-list ul li:nth-child(2n+1) {
  	background-color: #f4f4f4;
}
.product-detail-list ul li {
	display: flex;
	padding: 8px 5px;
}
.product-detail-list .list-label {
	width: 40%;
	color: #800210;
	padding-left: 10px;
	font-size: 16px;
	font-weight: 700;
	position: relative;
}
.product-detail-list .list-label:after {
	content: ":";
	display: block;
	position: absolute;
	font-size: 14px;
	color: #333;
	right: 0;
	top: 1px;
}
.product-detail-list .list-value {
	width: 60%;
	padding-left: 30px;
	color: #212121;
	font-size: 16px;
	font-weight: 700;
}

.product_quantity {
	display: flex;
	align-items: flex-end;
	margin: 20px 0 0;
}
.cart-quantity {
  width: 120px;
  text-align: center;
}
.cart-quantity-button {
	position: relative;
	width: 100%;
	display: flex;
	border: solid 1px #ddd;
	border-radius: 0px;
	overflow: hidden;
}
.cart-quantity-button .btn {
	background-color: #f4f4f4;
	border: 0;
	border-radius: 0;
	width: 80px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cart-quantity-button .btn svg {
  	width: 20px;
  	height: 20px;
}
.cart-quantity-button .item-count {
  	border: 0;
  	padding: 5px;
}
.qty-title {
	color: #212121;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 5px;
}
.product_quantity button {
	background: #800210;
	font-size: 14px;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	border: none;
	height: 42px;
	padding-right: 15px;
	padding-left: 0;
	-webkit-transition: .3s;
	transition: .3s;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.product_quantity button i {
	width: 50px;
	background: #FEAF16;
	color: #1e1e1e;
	height: 42px;
	line-height: 42px;
	margin-right: 8px;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
}
.product_quantity button:hover i {
  	background: #800210;
  	color: #fff;
}
.product_quantity .btn-box {
	padding-left: 30px;
}
.single-add-actions {
	margin-top: 20px;
}
.single-add-actions a {
	font-weight: 700;
}


.product-description-area {
	border: 1px solid #ddd;
	margin-top: 60px;
	border-radius: 3px;
	padding: 0px 20px 20px 20px;
}
.product-details-tab {
  	border-bottom: 1px solid #ddd;
}
.product-details-tab li {
  	margin-right: 50px;
}
.product-details-tab li a {
	padding: 20px 0;
	font-size: 20px;
	font-weight: 700;
}
.product-details-tab li a.active {
  	color: #800210;
}
.pro_review {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.review_thumb {
  	min-width: 62px;
}
.review_details {
	border: 1px solid #ddd;
	margin-left: 26px;
	padding: 10px 20px;
	position: relative;
	border-radius: 3px;
}
.review_details::before {
	background: #fff;
	border-bottom: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	content: "";
	display: block;
	height: 10px;
	left: -6px;
	position: absolute;
	top: 10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 10px;
}
.review_details .review_info h5 {
	font-size: 16px;
	font-weight: 700;
}
.review_details .review_info h5 span {
  	font-weight: 400;
  	color: #999;
}
.rating_wrap h5,
.rating_wrap h6 {
	font-size: 16px;
	font-weight: 700;
}
.comments-reply-area .comment-input input, 
.comments-reply-area .comment-form-comment textarea {
  	width: 100%;
  	border: 1px solid #ddd;
  	padding: 10px;
}
.comments-reply-area .comment-form-comment textarea {
	height: 140px;
}
.comments-reply-area label {
	display: block;
	margin-bottom: 3px;
}
.comment-form-submit input {
	border: none;
	padding: 10px 30px;
	border-radius: 3px;
	background: #800210;
	color: #fff;
	cursor: pointer;
}


	/*  product page Area  Styles
======================================================================================================*/

.select-hidden {
	display: none;
	visibility: hidden;
	padding-right: 10px;
}
.select {
	cursor: pointer;
	position: relative;
	font-size: 14px;
	color: #1a1a1a;
	width: 220px;
	height: 46px;
}
.select-styled {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;
	border: 2px solid #ddd;
	border-radius: 3px;
	padding: 8px 15px;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.select-styled:after {
	content: "";
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-color: #1a1a1a transparent transparent transparent;
	position: absolute;
	top: 16px;
	right: 10px;
}
.select-styled:active:after, .select-styled.active:after {
  	top: 9px;
  	border-color: transparent transparent #1a1a1a transparent;
}
.select-options {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 999;
	background-color: #fff;
	box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
	border-radius: 5px;
	margin-top: 4px;
}
.select-options li {
	margin: 0;
	padding: 5px 0;
	text-indent: 15px;
	-moz-transition: all 0.15s ease-in;
	-o-transition: all 0.15s ease-in;
	-webkit-transition: all 0.15s ease-in;
	transition: all 0.15s ease-in;
}
.select-options li:hover, .select-options li.is-selected {
	color: #c0392b;
	background: #f4f4f4;
}
.select-options li[rel="hide"] {
  	display: none;
}
.product-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 40px;
}
.product-header .number-sorting {
	display: flex;
	align-items: center;
}
.product-header .number-sorting .select {
	width: 90px;
}
.product-mode ul li {
	width: 44px;
	height: 44px;
	margin-left: 15px;
}
.product-mode ul li a {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #777;
	border: 2px solid #ddd;
	border-radius: 3px;
}
.product-mode ul li a:hover,
.product-mode ul li a.active {
	color: #800210;
	border: 2px solid #800210;
}

.product-col {
	margin: 0 0 30px;
}
.shop-product-list-wrap .category-box {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
}
.shop-product-list-wrap .category-box .category-img {
	width: 250px;
	min-width: 250px;
	margin-right: 25px;
	height: auto;
	margin-bottom: 0;
	overflow: hidden;
}
.shop-product-list-wrap .category-box .category-content {
	width: 100%;
}


	/*  product page sub category  Styles
======================================================================================================*/

.col-20 {
    flex: 0 0 20%;
    max-width: 20%;
}
.sub-category-box {
	position: relative;
	padding: 15px;
	background-color: #fff;
	border: 2px solid #ddd;
	border-radius: 10px;
	height: 100%;
	text-align: center;
	transition: all .5s;
}
.sub-category-box .sub-category-img {
	width: 200px;
	height: 200px;
	margin: 0 auto 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.sub-category-box .sub-category-img img {
	transition: all .5s;
}
.sub-category-box h4 {
	font-size: 18px;
	font-weight: 900;
	color: #800210;
	margin: 0 0 10px;
}
.sub-category-box h4 a {
	color: #800210;
}
.sub-category-box .product-btn {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	border: 2px solid #800210;
	background-color: #800210;
	border-radius: 5px;
	display: inline-block;
	padding: 12px 22px 12px;
	position: relative;
	text-align: center;
	width: auto;
	cursor: pointer;
	text-transform: uppercase;
	line-height: 1.42857143;
	transition: all .5s;
	transform: scale(0);
}
.sub-category-box .btn-box {
	left: 0;
	position: absolute;
	top: 30%;
	width: 100%;
	overflow: hidden;
	transition: all 0.5s ease-out 0s;
}
.sub-category-box:hover {
	border: solid 2px #800210;
}
.sub-category-box:hover .product-btn {
  	transform: scale(1);
}
.sub-category-box:hover .sub-category-img img {
	opacity: 0.2;
}

	/*  product page category list  Styles
======================================================================================================*/

.shop-product-list-wrap .single_product {
	display: flex;
}
.shop-product-list-wrap .single_product .product-img-box {
	min-width: 250px;
	margin-right: 30px;
}
.shop-product-list-wrap .single_product .product-detail-list {
	margin: 15px 0 0;
}
.shop-product-list-wrap .single_product .product-detail-list ul li:last-child {
  	border-radius: 0;
}
.prodDetailMar {
	max-width: 290px;
	margin-left: 30px;
	border-left: solid 1px #353535;
	padding-left: 30px;
}
.prodDescriTitle {
	font-size: 18px;
	color: #800210;
	font-weight: 900;
	margin: 0 0 10px;
}

	/*  cart page  Styles
======================================================================================================*/

.cms-cart .cart-header {
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    border-bottom: solid 1px #eaeaea;
    letter-spacing: .05em;
    font-weight: 600;
    color: #1f1f22;
    opacity: .75;
    padding: 0 0 15px;
}
.cms-cart .header-quantity {
    margin-left: auto;
    width: 100px;
    text-align: center;
}
.cms-cart .header-total {
    width: 140px;
    text-align: right;
}
.cms-cart .cart-item {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 30px 0 30px;
}
.cms-cart .cart-image {
    width: 120px;
    border-radius: 10px;
    overflow: hidden;
    border: solid 1px #ddd;
}
.cms-cart .cart-item-main {
    width: calc(100% - 160px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 30px;
}
.cms-cart .cart-item-detail {
    line-height: 24px;
}
.cms-cart .cart-item-title {
    color: #000;
    font-weight: 700;
}
.cms-cart .cart-item-subtitle {
    color: #777;
    margin: 0;
}
.cms-cart .cart-quantity {
    width: 120px;
    flex-direction: column;
    text-align: center;
}
.cms-cart .cart-quantity-button {
    position: relative;
    width: 100%;
    display: flex;
    border: solid 1px #ddd;
    border-radius: 5px;
    overflow: hidden;
}
.cms-cart .cart-quantity-button .btn {
    background-color: #f1f4f5;
    border: 0;
    border-radius: 0;
    width: 80px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cms-cart .cart-quantity-button .btn svg {
    width: 20px;
    height: 20px;
}
.cms-cart .item-count {
    border: 0;
    padding: 5px;
}
.cms-cart .cart-item-remove {
    font-size: 14px;
    text-align: center;
}
.cms-cart .cart-item-total {
    width: 140px;
    text-align: right;
}


.cms-cart .cart-footer {
    width: 100%;
    border-top: solid 1px #eaeaea;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 30px 0 0;
}
.cms-cart .cart-footer-left {
    width: 35%;
}
.cms-cart .cart-footer textarea {
    height: 140px;
}
.cms-cart .cart-footer-right {
    width: 65%;
    text-align: right;
}
.cms-cart .cart-footer-tax-note {
    font-size: 16px;
    color: #555;
}
.cms-cart .coupons-stacker {
    width: 400px;
    max-width: 100%;
    margin-left: auto;
    text-align: left;
}
.cms-cart .coupons-stacker label {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}
.cms-cart .stack-discounts-input-block {
    display: flex;
}
.cms-cart .stack-discounts-input-block input {
    width: calc(100% - 96px);
    background-color: #f1f4f5;
    margin-right: 10px;
    height: 45px;
    border-radius: 3px;
    color: #000;
    font-weight: 500;
}
.cms-cart .stack-discounts-input-block .black-btn {
    width: 96px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: 0;
    text-transform: uppercase;
}
.stack-discounts-tag {
    position: relative;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    background-color: #f1f4f5;
    display: inline-block;
    margin: 10px 0 15px;
    font-size: 14px;
    font-weight: 600;
}
.stack-discounts-tag:before {
    background-image: url('/theme/Agate/css/../images/coupon.svg');
    width: 17px;
    height: 17px;
    content: ' ';
    display: inline-block;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 7px;
    opacity: 0.8;
    transition: all 0.2s;
}
.stack-discounts-applied-discount {
    padding: 7px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1488ff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.stack-discounts-applied-discount .discount-label {
    display: flex;
    align-items: center;
}
.stack-discounts-applied-discount i {
    margin-right: 7px;
}
.cart-footer .stack-discounts-discount-value {
    margin-left: 30px;
}


.stack-discounts-total-price {
    padding: 7px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.cart-footer #stack-discounts-subtotal {
    margin-left: 30px;
}
#stack-discounts-subtotal-value strike {
    margin-right: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: line-through;
}
.cms-cart .btn-box .black-btn {
    padding: 10px 26px;
    font-size: 16px;
}
.cms-cart .cart-table table td {
    vertical-align: middle;
}
.cms-cart .cart-table table td .black-btn {
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 4px;
    white-space: nowrap;
}
.cms-cart .cart-update .black-btn {
    padding: 8px 18px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 4px;
    margin-right: 6px;
    margin-bottom: 6px;
}
.cms-cart .cart-calculator-wrapper .table td {
    vertical-align: middle;
}
.cms-cart .cart-calculator-wrapper .table td .black-btn {
    padding: 6px 14px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 4px;
    white-space: nowrap;
}
.cms-cart .cart-calculator-wrapper > .black-btn {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    width: 100%;
    margin-top: 15px;
}


	/*  login register page  Styles
======================================================================================================*/
.cms-login .section-header h2 {
	margin: 0 0 30px;
}
.cms-login .section-header p {
	/*font-size: 20px;
	color: #999;*/
}
.cms-login .section-header a.login-txt {
	font-weight: 700;
	color: #800210;
}
.cms-login .section-header a.register-txt {
	font-weight: 700;
	color: #FEAF16;
}
.cms-login:not(.login-page-wrapper) .form-group {
	display: flex;
	flex-wrap: wrap;
}
.cms-login:not(.login-page-wrapper) .form-group label {
	margin: 0;
	font-weight: 900;
	letter-spacing: 1px;
	color: #1a1a1a;
	background-color: #fff;
	display: inline-block;
	font-size: 14px;
	margin-left: 15px;
	margin-bottom: -15px;
	position: relative;
	padding: 0 10px;
	z-index: 1;
}
.cms-login:not(.login-page-wrapper) .form-group input {
	border: 2px solid #ddd;
	border-radius: 3px;
	padding: 8px 25px 0;
	box-shadow: none;
	height: 56px;
}
.form-group .select {
	width: 100%;
	height: 56px;
	color: #777;
	font-size: 1rem;
}
.form-group textarea {
	border: 2px solid #ddd;
	border-radius: 3px;
	padding: 15px 25px 0;
	box-shadow: none;
	height: 126px;
}
.form-group .select-styled {
	padding: 15px 25px 0;
}
.form-group .select-styled::after {
	top: 22px;
}
.form-group .select-styled:active::after, 
.form-group .select-styled.active::after {
	top: 15px;
}
.form-control:focus {
  	color: #495057;
  	background-color: #fff;
  	border-color: #800210;
  	outline: 0;
  	box-shadow: none;
}
.check-box input {
	padding: 0;
	height: initial;
	width: initial;
	margin-bottom: 0;
	display: none;
	cursor: pointer;
}
.check-box label {
    font-size: 14px;
    position: relative;
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}
.check-box label:before {
    content:'';
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid #000;
    padding: 8px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 3px;
}
.check-box input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 7px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.check-box input:checked + label:before {
    background-color: #000;
}
.checkbox-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 30px;
}
.checkbox-wrap .forgot-password a {
	color: #800210;
	font-weight: 700;
	font-size: 14px;
}


	/*  checkout page  Styles
======================================================================================================*/

section.cms-checkout {
    overflow: hidden;
}

.checkout-lft {
    padding: 30px 30px 0;
    padding-left: 0;
}
.checkout-header {
    padding: 0 0 30px;
}
.dynamic-checkout {
    position: relative;
    padding: 20px;
    border-radius: 10px;
    border: solid 1px #000;
    margin: 30px 0 0;
}
.dynamic-checkout h2 {
    font-size: 16px;
    position: absolute;
    top: -10px;
    left: 0;
    text-align: center;
    width: 100%;
    margin: 0;
}
.dynamic-checkout h2 span {
    background-color: #fff;
    padding: 0 10px;
}
.dynamic-checkout ul {
    list-style: none;
    margin: 0 -5px;
    padding: 0;
    display: flex;
    justify-content: center;
}
.dynamic-checkout ul li {
    padding: 0 5px;
}
.alternative-payment-separator {
    position: relative;
    display: flex;
    align-items: center;
    margin: 30px 0 0;
}
.alternative-payment-separator span {
    display: inline-block;
    padding: 0 1em;
}
.alternative-payment-separator:after, 
.alternative-payment-separator:before {
    content: '';
    display: inline-block;
    height: 1px;
    background-color: #000;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
} 
.checkout-lft .contact-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20px;
}
.checkout-lft .contact-info h2 {
    font-size: 20px;
    font-weight: 900;
    margin: 0;
}
.checkout-lft .contact-info p {
    font-size: 14px;
}
section.cms-checkout .step {
    padding: 0 0 40px;
}
.shipping-address {
    padding: 30px 0 0;
}
.shipping-address h2 {
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 20px;
}
.checkout-lft .step-footer {
    display: flex;
    justify-content: space-between;
    padding: 30px 0 0;
}
.step-footer-previous-link {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 900;
}
.step-footer-previous-link svg {
    width: 10px;
    height: 10px;
    margin-right: 5px;
}
.step-footer .black-btn {
    font-size: 16px;
}
section.cms-checkout .sidebar {
    position: relative;
    padding: 30px 60px 0;
    padding-right: 0;
    height: 100%;
}
section.cms-checkout .sidebar:after {
    content: "";
    display: block;
    width: 300%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #f4f4f4;
    z-index: -1;
    box-shadow: 1px 0 0 #e0e1e0 inset;
    background-position: left top;
}
.order-summary-product-list {
    border-bottom: solid 1px #000;
}
section.cms-checkout .product-table td {
    border: 0;
    vertical-align: middle;
}
section.cms-checkout .product-table .product-image {
    padding-left: 0;
}
section.cms-checkout .product-thumbnail {
    width: 4.6em;
    height: 4.6em;
    border-radius: 8px;
    background: #fff;
    position: relative;
}
.product-thumbnail:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 8px;
    border: 1px rgba(0,0,0,0.1) solid;
    z-index: 2;
}
section.cms-checkout .product-thumbnail-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    z-index: 1;
}
section.cms-checkout .product-thumbnail-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: auto;
}
section.cms-checkout .product-thumbnail-quantity {
    font-size: 0.8571428571em;
    font-weight: 500;
    line-height: 1.75em;
    white-space: nowrap;
    text-align: center;
    border-radius: 1.75em;
    background-color: rgba(114,114,114,0.9);
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 1.75em;
    height: 1.75em;
    padding: 0 0.5833333333em;
    position: absolute;
    right: -0.75em;
    top: -0.75em;
    z-index: 3;
}
section.cms-checkout .product-description {
    width: 100%;
    text-align: left;
    padding-left: 1em !important;
}
section.cms-checkout .product-description span {
    font-size: 14px;
    font-weight: 900;
    display: block;
    line-height: 22px;
}
section.cms-checkout .product-description .product-description-variant {
    font-weight: 400;
}
section.cms-checkout .product-price {
    font-size: 15px;
    font-weight: 500;
}
.order-summary-discount {
    padding: 1.5em 0;
}
.order-summary-discount .stack-discounts-input-block {
    display: flex;
}
.order-summary-discount .stack-discounts-input-block input {
    width: calc(100% - 96px);
    background-color: #fff;
    margin-right: 10px;
    height: 45px;
    border-radius: 3px;
    color: #000;
    font-weight: 500;
}
.order-summary-discount .stack-discounts-input-block .black-btn {
    width: 96px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: 0;
    text-transform: uppercase;
}
.order-summary-total {
    padding: 1.5em 0;
    border-top: solid 1px #000;
    font-weight: 400;
    font-size: 14px;
}
.order-summary-total .total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.total-line-price {
    padding-left: 1.5em;
    text-align: right;
    white-space: nowrap;
}
.total {
	/* display: flex; */
	justify-content: space-between;
	/* align-items: center; */
	/* border-top: solid 1px #000; */
	/* padding: 1.5em 0 0; */
	font-weight: bold;
	font-size: x-large;
}
.total .total-name {
    font-size: 20px;
    font-weight: 900;
}
.total .payment-due-currency {
    font-size: 13px;
    font-weight: 400;
}
.total .payment-due-price {
    font-size: 20px;
    font-weight: 900;
}


/* user profile page Styles
======================================================================================================*/

.profile-nav {
    margin-bottom: 20px;
    background-color: #fff;
    border: solid 1px #eaeaea;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.profile-nav .user-heading {
    background: #f4f4f4;
    color: #000;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    padding: 30px;
    text-align: center;
}
.profile-nav .user-heading.round a {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 10px solid rgba(28,44,92,0.1);
    display: inline-block;
}
.profile-nav .user-heading a img {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
}
.profile-nav .user-heading h1 {
    font-size: 18px;
    font-weight: 700;
    margin: 20px 0 0;
}
.profile-nav .user-heading p {
    font-size: 14px;
}
.profile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.profile-nav ul > li {
    border-bottom: 1px solid #ebeae6;
    margin-top: 0;
    line-height: 30px;
    width: 100%;
}
.profile-nav ul > li > a {
    position: relative;
    font-size: 16px;
    color: #000;
    display: block;
    padding: 10px 15px;
    border-left: 5px solid transparent;
}
.profile-nav ul > li > a > i {
    padding-right: 10px;
}
.profile-nav ul > li > a:hover, 
.profile-nav ul > li > a:focus, 
.profile-nav ul li a.active {
    background: #800210;
    border-left: 5px solid #FEAF16;
    color: #fff !important;
}




.profile-info {
    margin-bottom: 20px;
    background-color: #fff;
    border: solid 2px #eaeaea;
    border-radius: 4px;
}
.profile-info .bio-graph-info {
    padding: 20px;
}
.profile-info .bio-graph-info h1 {
    font-size: 20px;
    font-weight: 600;
    background: #f4f4f4;
    padding: 15px 15px;
    margin: 0 0 40px;
}
.profile-info .bio-row {
    margin: 0 0 15px;
}
.profile-info .bio-row p {
    font-size: 16px;
}
.profile-info .bio-row p span {
    width: 120px;
    display: inline-block;
}
.profile-info .address-info {
    padding: 30px;
}
.address-info .address {
    background-color: #fff;
    border: solid 2px #eaeaea;
    border-radius: 5px;
    padding: 20px;
}
.address-info .address h2 {
    font-size: 20px;
    font-weight: 600;
}
.address-info .address p {
    margin: 0;
}



.order-info {
	border: solid 2px #eaeaea;
	padding: 30px;
}
.order-info .order-number {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 30px;
}
.order-box {
	background-color: #f4f4f4;
	padding: 30px;
	border-radius: 5px;
}
.order-box .order-detail {
	display: flex;
	justify-content: space-between;
}
.order-box .order-value p {
	margin: 0;
	font-weight: 700;
}


/* our blog page Styles
======================================================================================================*/
section.blog-pg-section {
    padding: 80px 0 80px;
}
.blog-sidebar {
    padding-left: 45px;
}


.blog-pg-section .entry-meta {
    border: 2px solid #ddd;
    padding: 15px 35px;
}
.blog-pg-section .post-box + .post-box {
    margin-top: 60px;
}
.entry-media img {
	/*width: 100%;
	height: 400px;*/
	object-fit: cover;
	object-position: center;
}
.blog-pg-section .entry-meta span {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    display: inline-block;
}
.blog-pg-section .entry-meta span i {
    padding-right: 4px;
    color: #800210;
}
.blog-pg-section .entry-meta span a {
    color: #000;
    text-transform: capitalize;
}
.blog-pg-section .entry-meta > span + span {
    margin-left: 20px;
}
.blog-pg-section .entry-details {
    border: 2px solid #ddd;
    border-top: 0;
    padding: 35px 35px 35px;
    position: relative;
    z-index: 1;
}
.blog-pg-section .post-box h3 {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2em;
    margin: 0 0 15px;
}
.blog-pg-section .post-box h3 a {
    color: #800210;
}
.blog-pg-section .post-box p {
    margin: 0 0 30px;
    color: #777;
}
.blog-pg-section .post-box .blue-btn {
    max-width: 160px;
}

/* Latest updates grid layout */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}
.blog-grid > [class*="col-"] {
    padding: 0;
    max-width: 100%;
    flex: 0 0 auto;
}
@media (max-width: 1199.98px) {
    .blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 991.98px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}


.blog-sidebar .widget h3 {
    font-size: 18px;
    font-weight: 700;
    position: relative;
    text-transform: capitalize;
    padding-bottom: 20px;
    margin: 0 0 30px;
    border-bottom: 2px solid #ddd;
}
.blog-sidebar .widget h3::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 60px;
    height: 4px;
    background: #800210;
}
.blog-sidebar .search-widget form div {
    position: relative;
}
.blog-sidebar .search-widget input {
    background-color: #fff;
    border: 2px solid #ddd;
    height: 50px;
    font-size: 16px;
    width: 100%;
    padding: 6px 50px 6px 20px;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.blog-sidebar .search-widget form button {
    background: #800210;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    border: 0;
    outline: 0;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0;
}
.blog-sidebar > .widget + .widget {
    margin-top: 60px;
}



.widget_categories ul li {
    position: relative;
    display: block;
}
.blog-sidebar .widget_categories ul li a {
    display: block;
    padding-left: 25px;
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #000;
}
.blog-sidebar .widget_categories ul a:before {
    content: "\f30b";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 12px;
}
.widget_categories > ul > li a + span {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    text-align: center;
    color: #828282;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
}



.blog-sidebar .recent-post-widget .post {
    overflow: hidden;
}
.blog-sidebar .recent-post-widget .post .img-holder {
    width: 68px;
    float: left;
}
.blog-sidebar .recent-post-widget .post .img-holder img {
    border-radius: 50%;
    border: 2px solid #efefef;
}
.blog-sidebar .recent-post-widget .post .details {
    width: calc(100% - 68px);
    float: left;
    padding-left: 20px;
}
.blog-sidebar .recent-post-widget .post h4 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3em;
    margin: 0 0 0.3em;
}
.blog-sidebar .recent-post-widget .post h4 a {
    display: inline-block;
    color: #262b3e;
}
.blog-sidebar .recent-post-widget .post .details .date {
    color: #9e9c9c;
    font-size: 13px;
}
.blog-sidebar .recent-post-widget .post .details .date i {
    display: inline-block;
    padding-right: 7px;
}
.blog-sidebar .recent-post-widget .posts > .post + .post {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f3f2f2;
}



.widget_tag_cloud .tagcloud a {
    font-size: 13px;
    color: #32373c;
    display: inline-block;
    padding: 5px 13px;
    border-radius: 0;
    margin: 0 3px 6px 0;
    border: 2px solid #efefef;
    border-radius: 60px;
}
.widget_tag_cloud .tagcloud a:hover {
    background-color: #800210;
    border-color: #800210;
    color: #fff;
}


/* our blog detail page Styles
======================================================================================================*/

section.blog-single-section {
    padding: 80px 0 80px;
}
.blog-single-section .date-entry-meta {
    position: relative;
    margin-bottom: 35px;
}
.blog-single-section .date-entry-meta .entry-meta {
    border-bottom: 2px solid #f4f4f4;
    padding: 15px 35px;
    padding-left: 0px;
}
.blog-single-section .date-entry-meta .entry-meta span {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    display: inline-block;
}
.blog-single-section .date-entry-meta .entry-meta span i {
    color: #800210;
    padding-right: 5px;
}
.blog-single-section .date-entry-meta .entry-meta span a {
    color: #000;
    text-decoration: none;
}
.blog-single-section .date-entry-meta .entry-meta > span + span {
    margin-left: 20px;
}
.blog-single-section .date-entry-meta .entry-meta span {
    font-size: 14px;
    color: #000;
    display: inline-block;
}
.blog-single-section .post h2 {
    font-size: 30px;
    line-height: 1.3em;
    margin: 20px 0 20px;
}
.blog-single-section .entry-details p {
    margin-bottom: 1.5em;
}



.blog-single-section .tag-share {
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
    margin: 30px 0 0;
    padding: 30px 0;
    color: #262b3e;
}
.blog-single-section .tag-share .tag {
    float: left;
    padding-top: 5px;
}
.blog-single-section .tag-share .tag > span {
    position: relative;
    top: -8px;
    color: #262b3e;
    font-weight: bold;
    display: inline-block;
    padding-right: 8px;
}
.blog-single-section .tag-share .tag ul {
    list-style: none;
    display: inline-block;
    position: relative;
    top: 5px;
    padding-left: 5px;
}
.blog-single-section .tag-share .tag ul li {
    position: relative;
    list-style: none;
    line-height: 20px;
    margin-bottom: 0px;
    float: left;
}
.blog-single-section .tag-share .tag ul > li + li {
    margin-left: 10px;
}
.blog-single-section .tag-share .tag a {
    background-color: #f5f5f5;
    font-size: 13px;
    color: #687693;
    padding: 6px 15px;
    border-radius: 50px;
    display: inline-block;
}
.blog-single-section .tag-share .tag a:hover {
    background-color: #800210;
    color: #fff;
}
.blog-single-section .tag-share .tag ul > li + li {
    margin-left: 10px;
}



.blog-single-section .tag-share .share {
    float: right;
    position: relative;
    top: -12px;
    margin-top: 15px;
}
.blog-single-section .tag-share .share span {
    position: relative;
    top: -7px;
    padding-right: 8px;
    color: #262b3e;
    font-weight: 600;
    display: inline-block;
}
.blog-single-section .tag-share ul {
    top: 7px;
    position: relative;
    list-style: none;
    display: inline-block;
    overflow: hidden;
}
.blog-single-section .tag-share ul li {
    float: left;
}
.blog-single-section .tag-share .share ul > li + li {
    margin-left: 10px;
}
.blog-single-section .tag-share .share a {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #eae6e6;
    border-radius: 50%;
    display: inline-block;
    font-size: 14px;
    color: #627381;
}
.blog-single-section .tag-share .share a:hover {
    background: #800210;
    border-color: #800210;
    color: #fff !important;
}
.blog-single-section .tag-share .share ul > li:first-child a {
    color: #3c5ba4;
}
.blog-single-section .tag-share .share ul > li:nth-child(2) a {
    color: #47a0d9;
}
.blog-single-section .tag-share .share ul > li:nth-child(3) a {
    color: #0073b1;
}
.blog-single-section .tag-share .share ul > li:nth-child(4) a {
    color: #933f94;
}




.blog-single-section .comment-form {
    padding: 50px 50px;
    -webkit-box-shadow: 0px 9px 57px 0px rgba(0, 0, 0, 0.11);
    box-shadow: 0px 9px 57px 0px rgba(0, 0, 0, 0.11);
    margin: 60px 0 30px;
}
.blog-single-section .comment-form .comment-reply-title {
    font-size: 22px;
    margin: 0 0 20px;
}
.blog-single-section .comment-form input.form-control {
    height: 52px;
    box-shadow: none;
    background-color: #fff;
    color: #000;
}
blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eee;
}



/* contact page Styles
======================================================================================================*/

.contact-detail {
	padding: 20px;
	border: solid 2px #ddd;
	border-radius: 10px;
}
.contact-detail .contact-map img {
	border-radius: 10px;
}
.contact-detail .contact-info {
	padding: 20px 0;
}
.contact-detail .contact-info h4 {
	font-weight: 900;
	text-transform: uppercase;
	margin: 0 0 30px;
}
.contact-detail .contact-info li {
	position: relative;
	line-height: 24px;
	margin: 0 0 20px;
	display: flex;
	align-items: center;
}
.contact-detail .contact-info li img {
	width: 30px;
	margin-right: 20px;
}
.contact-detail .footer-social ul li {
    display: inline-block;
}
.contact-detail .footer-social ul li + li {
    padding-left: 10px;
}
.contact-detail .footer-social ul li a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #FEAF16;
    font-size: 22px;
    border-radius: 50%;
}
.contact-detail .footer-social ul li a:hover {
    color: #fff;
}
.contact-detail .footer-social ul li a.whatsapp:hover {
	background-color: #25d366;
}
.contact-detail .footer-social ul li a.facebook:hover {
	background-color: #3b5998;
}
.contact-detail .footer-social ul li a.twitter:hover {
	background-color: #1da1f2;
}
.contact-detail .footer-social ul li a.instagram:hover {
	background-color: #c4008c;
}
.contact-detail .footer-social ul li a.linkedin:hover {
	background-color: #0073b0;
}


/* faq page Styles
======================================================================================================*/

.accordion {
	padding: 0 40px 0;
}
.accordion__item {
	position: relative;
	margin-bottom: 25px;
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
}
.accordion__body {
	position: relative;
  	display: none;
  	padding: 25px 25px 30px;
  	padding-left: 100px;
  	background-color: #fff;
  	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
}
.accordion__body p {
  	margin-bottom: 0;
  	font-size: 16px;
  	color: #3B435E;
  	letter-spacing: 0.01em;
}
.accordion__title {
  	font-size: 21px;
  	font-weight: 700;
  	color: #fff;
  	cursor: pointer;
  	margin-bottom: 0;
  	position: relative;
  	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	background-color: #800210;
	border-radius: 0px;
	display: flex;
	align-items: center;
	padding: 20px 27px 20px;
	padding-right: 72px;
	padding-left: 92px;
	min-height: 72px;
}
.accordion__title:after {
	content: "+";
	font-size: 32px;
	font-weight: 500;
	color: #fff;
	width: 72px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 0px;
	top: 0;
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
}
.accordion__title.active:after {
  	content: "-";
}
.accordion__title:before {
	content: "Q";
	position: absolute;
	left: 0;
	top: 0;
	width: 72px;
	height: 100%;
	background-color: #FEAF16;
	font-size: 38px;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
    transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	z-index: 1;
}
.accordion__body:before {
	content: "A";
	position: absolute;
	left: 0;
	top: 0;
	width: 72px;
	height: 100%;
	background-color: #E7E5F3;
	font-size: 38px;
	font-weight: 700;
	color: #555C6F;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.faq-info {
	margin-bottom: 25px;
	border-bottom: solid 2px #ddd;
	padding-bottom: 20px;
}
.faq-info:last-child {
	border: 0;
	margin: 0;
	padding: 0;
}
.faq-info h4 {
	font-weight: 800;
	font-size: 20px;
	margin: 0 0 5px;
}
.faq-info a {
	font-weight: 900;
	color: #FEAF16;
}
.faq-info span {
	font-weight: 900;
	color: #800210;
}

	/*  registration complete page  Styles
======================================================================================================*/

.register-pg-section .support {
	color: #353535;
	font-size: 20px;
}
.register-pg-section .support a {
	font-weight: 900;
	color: #800210;
}


.paginatoin-area ul li.active {
	color: #fff;
	background-color: #800210;
	height: 36px;
	width: 36px;
	font-size: 14px;
	display: inline-block;
	text-align: center;
	line-height: 36px;
	border-radius: 50%;
}

.paginatoin-area {
	margin-top: 30px;
	padding: 20px;
	border: 1px solid #efefef;
}

.paginatoin-area ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.paginatoin-area ul li {
	margin-right: 5px;
	display: inline-block;
}

.paginatoin-area ul li a {
	color: #222222;
	height: 36px;
	width: 36px;
	font-size: 14px;
	display: inline-block;
	text-align: center;
	line-height: 36px;
	background-color: #f5f5f5;
	border-radius: 50%;
}


.curreny-wrap ul li .dropdown-list {
	max-height: 400px;
	overflow: auto;
}

.categories_menu_toggle > ul {
	max-height: 500px;
	overflow-y: initial;
}
.category-box .category-img {
	width: 300px;
	height: 300px;
	max-width: 100%;
}


.footer-nav .fas {
	color: #fff;
}
#xzoom-fancy {
	width: 100%;
}
.xzoom-thumbs img {
	width: 100px;
}

.max-450 {
	max-height: 300px;
	overflow-x: hidden;
	padding-right: 18px;
}
.shopping-cart-wrap ul.mini-cart {
	width: 350px;
	padding: 17px;
}

.pro-nav-thumb {
	width: 100px;
}


.contact-detail .footer-social ul li a {
	background-color: #800210;
}

.entry-media img {
	max-width: 100%;
	max-height: 400px;
}


.close {
	text-align: right;
	margin-right: 15px;
}

.text1 {
	max-width: 250px;
	display: block;
	text-align: justify;
	max-height: 200px;
	overflow: auto;
}

.select-options {
	max-height: 200px;
	overflow: auto;
}

.price-regular {
	color: #800210;
	font-weight: bold;
	font-size: x-large;
}

select.form-control {
	height: 60px !important;
}

.pro-nav-thumb {
	width: 100px;
	text-align: center;
	margin: 0 auto;
}


.post-box.border-2{
	border: 2px solid #ddd;
}

.post-box.border-2 .entry-media {
	text-align: center;
}

.post-box.border-2 .entry-media img{
	max-height: 350px;
}
.blog-pg-section .entry-meta {
	border-top: 0;
}

.blog-pg-section .entry-details {
	border-bottom: 0;
}

.cms-banner {
	background: #f4f4f4;
	border: 1px solid #f2f0f0;
}


/* example: numbered steps */
#ae-steps li {
    margin: 8px 0;
}

/* example: check-style bullets for benefits */
#ae-benefits li {
    margin: 8px 0;
    list-style: disc;
}

/* or use a custom marker:
#ae-benefits li { list-style: none; position: relative; padding-left: 26px; }
#ae-benefits li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: #7F0517; font-weight: 700;
}
*/

/* ==========================================================================
   MODERN HOMEPAGE REFRESH - THEME COLORS & PREMIUM STYLING (#7F0517 MAROON)
   ========================================================================== */

/* 1. Hero Banner Refresh */
.cms-banner {
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
	border: 1px solid #e2e8f0 !important;
	padding: 40px 0 !important;
	border-radius: 20px !important;
	margin-top: 15px !important;
	margin-bottom: 25px !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
}

.cms-banner .banner-txt h2, 
.cms-banner .banner-txt h3 {
	color: #7f0517 !important;
	font-weight: 800 !important;
}

.cms-banner .light-btn,
.cms-banner .btn-box a {
	background: linear-gradient(135deg, #7f0517 0%, #9b061c 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 30px !important;
	padding: 12px 32px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	box-shadow: 0 6px 20px rgba(127, 5, 23, 0.3) !important;
	transition: all 0.3s ease !important;
}

.cms-banner .light-btn:hover,
.cms-banner .btn-box a:hover {
	background: linear-gradient(135deg, #9b061c 0%, #7f0517 100%) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 25px rgba(127, 5, 23, 0.45) !important;
}

/* 2. Support Features Section */
section.cms-support {
	padding: 50px 0 30px !important;
}

section.cms-support .col-md-4 {
	-ms-flex: 0 0 20% !important;
	flex: 0 0 20% !important;
	max-width: 20% !important;
	padding: 0 8px !important;
}

section.cms-support .support-box {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	padding: 25px 12px 20px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.03) !important;
	transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	height: 100% !important;
}

section.cms-support .support-box .icon {
	height: 70px !important;
	margin-bottom: 12px !important;
}

section.cms-support .support-box .icon svg path,
section.cms-support .support-box .icon svg circle {
	fill: #7f0517 !important;
	transition: all 0.3s ease !important;
}

section.cms-support .support-box p {
	font-size: 14.5px !important;
	line-height: 20px !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	margin: 0 !important;
	transition: all 0.3s ease !important;
}

section.cms-support .support-box:hover {
	background: linear-gradient(135deg, #7f0517 0%, #60030f 100%) !important;
	border-color: #7f0517 !important;
	transform: translateY(-7px) !important;
	box-shadow: 0 15px 35px rgba(127, 5, 23, 0.28) !important;
}

section.cms-support .support-box:hover .icon svg path,
section.cms-support .support-box:hover .icon svg circle {
	fill: #FEAF16 !important;
}

section.cms-support .support-box:hover p {
	color: #ffffff !important;
}

/* 3. Top Products Showcase Section */
section.cms-single-product {
	padding: 70px 0 70px !important;
	background: #f8fafc !important;
	border-top: 1px solid #e2e8f0 !important;
	border-bottom: 1px solid #e2e8f0 !important;
}

section.cms-single-product .section-header .title {
	font-size: 28px !important;
	font-weight: 800 !important;
	color: #7f0517 !important;
	letter-spacing: 1px !important;
	position: relative !important;
	display: inline-block !important;
	margin-bottom: 25px !important;
}

section.cms-single-product .section-header .title::after {
	content: '' !important;
	display: block !important;
	width: 60px !important;
	height: 3px !important;
	background: #FEAF16 !important;
	margin: 8px auto 0 !important;
	border-radius: 2px !important;
}

.custom-tab .nav-tabs {
	border-bottom: none !important;
	justify-content: center !important;
	margin-bottom: 35px !important;
	gap: 12px !important;
	padding-bottom: 5px !important;
}

.custom-tab .nav > li {
	margin-bottom: 0 !important;
}

.custom-tab .nav > li > a {
	color: #475569 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 10px 24px !important;
	border-radius: 30px !important;
	border: 1px solid #cbd5e1 !important;
	background: #ffffff !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
}

.custom-tab .nav > li > a:hover {
	color: #7f0517 !important;
	border-color: #7f0517 !important;
	background: #fff5f6 !important;
	box-shadow: 0 4px 12px rgba(127, 5, 23, 0.1) !important;
}

.custom-tab .nav-tabs > li > a.active,
.custom-tab .nav-tabs > li > a.active:focus,
.custom-tab .nav-tabs > li > a.active:hover {
	color: #ffffff !important;
	border-color: #7f0517 !important;
	background: linear-gradient(135deg, #7f0517 0%, #9b061c 100%) !important;
	box-shadow: 0 6px 20px rgba(127, 5, 23, 0.3) !important;
}

.single_product {
	background-color: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px !important;
	padding: 18px !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
	transition: all 0.35s ease !important;
}

.single_product:hover {
	border-color: #7f0517 !important;
	transform: translateY(-5px) !important;
	box-shadow: 0 12px 30px rgba(127, 5, 23, 0.12) !important;
}

.single_product .product-name a {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	transition: color 0.2s ease !important;
}

.single_product .product-name a:hover {
	color: #7f0517 !important;
}

.single_product .product-price .price-regular {
	color: #7f0517 !important;
	font-weight: 800 !important;
	font-size: 16px !important;
}

.single-product-tab .black-btn {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
	color: #ffffff !important;
	border-radius: 30px !important;
	padding: 12px 32px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2) !important;
	transition: all 0.3s ease !important;
	display: inline-block !important;
	margin-top: 25px !important;
}

.single-product-tab .black-btn:hover {
	background: linear-gradient(135deg, #7f0517 0%, #9b061c 100%) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(127, 5, 23, 0.35) !important;
}

/* 4. About Us Brand Showcase */
section.cms-about {
	padding: 70px 0 !important;
	background: linear-gradient(135deg, #ffffff 0%, #fdf2f4 100%) !important;
}

section.cms-about .about-img img {
	border-radius: 20px !important;
	box-shadow: 0 15px 35px rgba(127, 5, 23, 0.12) !important;
	border: 3px solid #ffffff !important;
}

section.cms-about .about-content .title {
	font-size: 26px !important;
	font-weight: 800 !important;
	color: #7f0517 !important;
	line-height: 1.35 !important;
	margin-bottom: 20px !important;
	position: relative !important;
	padding-bottom: 12px !important;
}

section.cms-about .about-content .title::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 60px !important;
	height: 3px !important;
	background: #FEAF16 !important;
	border-radius: 2px !important;
}

section.cms-about .about-content p {
	font-size: 15px !important;
	line-height: 1.8 !important;
	color: #334155 !important;
}

section.cms-about .white-btn {
	background: linear-gradient(135deg, #7f0517 0%, #9b061c 100%) !important;
	color: #ffffff !important;
	border-radius: 30px !important;
	padding: 12px 34px !important;
	font-weight: 700 !important;
	box-shadow: 0 6px 20px rgba(127, 5, 23, 0.3) !important;
	transition: all 0.3s ease !important;
	display: inline-block !important;
}

section.cms-about .white-btn:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 25px rgba(127, 5, 23, 0.45) !important;
	color: #FEAF16 !important;
}

/* 5. Special Promo Banner */
section.cms-special {
	background: linear-gradient(135deg, #ffffff 0%, #fff5f6 50%, #fdf2f4 100%) !important;
	border: 1px solid #fecdd3 !important;
	padding: 50px 40px !important;
	border-radius: 20px !important;
	margin: 50px 0 !important;
	box-shadow: 0 10px 30px rgba(127, 5, 23, 0.05) !important;
	color: #1e293b !important;
}

section.cms-special h2 {
	color: #7f0517 !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	margin-bottom: 10px !important;
}

section.cms-special h2 span {
	color: #b91c1c !important;
	background: #ffe4e6 !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	display: inline-block !important;
	padding: 4px 14px !important;
	border-radius: 20px !important;
	font-weight: 700 !important;
	margin-bottom: 12px !important;
}

section.cms-special p {
	color: #475569 !important;
	font-size: 15.5px !important;
	font-weight: 500 !important;
}

section.cms-special .black-btn {
	background: linear-gradient(135deg, #7f0517 0%, #9b061c 100%) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	border-radius: 30px !important;
	padding: 12px 34px !important;
	box-shadow: 0 6px 20px rgba(127, 5, 23, 0.3) !important;
	transition: all 0.3s ease !important;
	display: inline-block !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

section.cms-special .black-btn:hover {
	background: linear-gradient(135deg, #9b061c 0%, #7f0517 100%) !important;
	color: #ffffff !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 25px rgba(127, 5, 23, 0.45) !important;
}

/* Responsive Support Cards Grid */
@media (max-width: 991px) {
	section.cms-support .col-md-4 {
		-ms-flex: 0 0 50% !important;
		flex: 0 0 50% !important;
		max-width: 50% !important;
		margin-bottom: 15px !important;
	}
}

@media (max-width: 575px) {
	section.cms-support .col-md-4 {
		-ms-flex: 0 0 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* ==========================================================================
   FIX CAROUSEL CARD HOVER CLIPPING & OUT OF BOUNDS OVERFLOW
   ========================================================================== */
.owl-carousel.product-carousel,
.owl-carousel.custom-carousel,
.owl-carousel {
	padding-top: 15px !important;
	padding-bottom: 20px !important;
	margin-top: -15px !important;
	margin-bottom: -20px !important;
}

.owl-carousel .owl-stage-outer {
	padding-top: 15px !important;
	padding-bottom: 20px !important;
	margin-top: -15px !important;
	margin-bottom: -20px !important;
	overflow: hidden !important;
}

.owl-carousel .owl-item {
	padding: 4px 6px !important;
}

.single_product {
	transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.single_product:hover {
	border-color: #7f0517 !important;
	transform: translateY(-4px) !important;
	box-shadow: 0 10px 25px rgba(127, 5, 23, 0.15) !important;
}

/* Home About Text Box Styling */
section.cms-home-about {
	padding: 50px 0 60px !important;
	background: #f8fafc !important;
	border-top: 1px solid #e2e8f0 !important;
}

.home-about-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-left: 4px solid #7f0517 !important;
	border-radius: 16px !important;
	padding: 35px 40px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.03) !important;
	color: #334155 !important;
	font-size: 15px !important;
	line-height: 1.85 !important;
}

.home-about-card p {
	margin-bottom: 16px !important;
}

.home-about-card p:last-child {
	margin-bottom: 0 !important;
}

/* ==========================================================================
   CATEGORY & SUBCATEGORY PAGE DESIGN SYSTEM MATCHING HOME PAGE
   ========================================================================== */

/* Page Header & Section Title */
.shop-page .section-header .title {
	font-size: 30px !important;
	font-weight: 800 !important;
	color: #7f0517 !important;
	letter-spacing: 0.5px !important;
	position: relative !important;
	display: inline-block !important;
	margin-bottom: 25px !important;
}

.shop-page .section-header .title::after {
	content: '' !important;
	display: block !important;
	width: 65px !important;
	height: 3px !important;
	background: #FEAF16 !important;
	margin: 8px auto 0 !important;
	border-radius: 2px !important;
}

/* Category Card Container */
.category-box {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	padding: 20px !important;
	margin-bottom: 30px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.03) !important;
	transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	height: calc(100% - 30px) !important;
	display: flex !important;
	flex-direction: column !important;
}

.category-box:hover {
	border-color: #7f0517 !important;
	transform: translateY(-6px) !important;
	box-shadow: 0 15px 35px rgba(127, 5, 23, 0.12) !important;
}

/* Category Image */
.category-box .category-img {
	position: relative !important;
	overflow: hidden !important;
	border-radius: 12px !important;
	max-height: 220px !important;
	margin-bottom: 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #f8fafc !important;
}

.category-box .category-img img {
	width: 100% !important;
	height: 200px !important;
	object-fit: contain !important;
	transition: transform 0.4s ease !important;
}

.category-box:hover .category-img img {
	transform: scale(1.06) !important;
}

/* Category Heading */
.category-box .category-content h4 {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #1e293b !important;
	margin-bottom: 14px !important;
	line-height: 1.35 !important;
}

.category-box .category-content h4 a {
	color: #1e293b !important;
	transition: color 0.25s ease !important;
}

.category-box .category-content h4 a:hover {
	color: #7f0517 !important;
}

/* Subcategory List */
.category-box .category-list {
	border-top: 1px solid #f1f5f9 !important;
	padding-top: 12px !important;
	margin-top: auto !important;
	max-height: 220px !important;
	overflow-y: auto !important;
	scrollbar-width: thin !important;
	scrollbar-color: #800000 #f1f5f9 !important;
}

.category-box .category-list::-webkit-scrollbar {
	width: 6px !important;
}

.category-box .category-list::-webkit-scrollbar-track {
	background: #f1f5f9 !important;
	border-radius: 4px !important;
}

.category-box .category-list::-webkit-scrollbar-thumb {
	background: #800000 !important;
	border-radius: 4px !important;
}

.category-box .category-list::-webkit-scrollbar-thumb:hover {
	background: #600000 !important;
}

.category-box .category-list ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.category-box .category-list ul li {
	margin-bottom: 8px !important;
}

.category-box .category-list ul li a {
	color: #334155 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	transition: all 0.2s ease !important;
	display: inline-flex !important;
	align-items: center !important;
}

.category-box .category-list ul li a::before {
	display: none !important;
	content: none !important;
}

.category-box .category-list ul li a:hover {
	color: #800000 !important;
	transform: translateX(4px) !important;
}

/* Controls & Filters Bar */
.product-header {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 12px 20px !important;
	margin-bottom: 30px !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

.product-short select {
	border: 1px solid #cbd5e1 !important;
	border-radius: 20px !important;
	padding: 6px 16px !important;
	font-size: 14px !important;
}

/* Modern Blog Card & Detail Styles */
.blog-card-modern {
	border: 1px solid #e2e8f0 !important;
}

.blog-card-modern:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
	border-color: #f59e0b !important;
}

.blog-card-modern:hover .card-img-top-zoom {
	transform: scale(1.08) !important;
}

.blog-card-modern:hover .hover-warning-title {
	color: #800000 !important;
}

.blog-card-modern:hover .blog-card-btn {
	background-color: #f59e0b !important;
	color: #000000 !important;
	border-color: #f59e0b !important;
}

.blog-card-modern:hover .blog-card-btn i {
	color: #000000 !important;
	transform: translateX(3px) !important;
}

.blog-card-footer-divider {
	border-top: 1px solid #f1f5f9 !important;
	transition: border-color 0.3s ease !important;
}

.blog-card-modern:hover .blog-card-footer-divider {
	border-top-color: transparent !important;
}

.article-entry-body p {
	margin-bottom: 1.25rem !important;
	line-height: 1.8 !important;
}

.article-entry-body img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 8px !important;
	margin: 15px 0 !important;
}
	color: #334155 !important;
	background-color: #ffffff !important;
	outline: none !important;
	transition: border-color 0.2s ease !important;
}

.product-short select:focus {
	border-color: #7f0517 !important;
}

/* Small Homepage Advertisement Banners */
section.cms-static-area {
	padding: 50px 0 !important;
	background: #ffffff !important;
}

.single-static {
	position: relative !important;
	overflow: hidden !important;
	border-radius: 16px !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 8px 25px rgba(0,0,0,0.04) !important;
	transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	background: #f8fafc !important;
}

.single-static:hover {
	transform: translateY(-6px) !important;
	border-color: #7f0517 !important;
	box-shadow: 0 15px 35px rgba(127, 5, 23, 0.12) !important;
}

.single-static .icon {
	overflow: hidden !important;
	border-radius: 16px 16px 0 0 !important;
}

.single-static .icon img {
	width: 100% !important;
	height: auto !important;
	transition: transform 0.4s ease !important;
}

.single-static:hover .icon img {
	transform: scale(1.05) !important;
}

.single-static .content {
	padding: 22px 25px !important;
	background: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.single-static .content h4 {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #1e293b !important;
	margin: 0 !important;
}

.single-static .light-btn {
	background: linear-gradient(135deg, #7f0517 0%, #9b061c 100%) !important;
	color: #ffffff !important;
	border-radius: 30px !important;
	padding: 10px 24px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	box-shadow: 0 4px 15px rgba(127, 5, 23, 0.25) !important;
	transition: all 0.3s ease !important;
	display: inline-block !important;
	text-transform: uppercase !important;
}

.single-static .light-btn:hover {
	background: linear-gradient(135deg, #9b061c 0%, #7f0517 100%) !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(127, 5, 23, 0.4) !important;
}

/* Product NEW & OFFER Badges */
.single_product {
	position: relative !important;
}

.single_product .product_discount {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	z-index: 5 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.single_product .product_discount span {
	display: inline-block !important;
	background: #000000 !important;
	color: #f59e0b !important;
	border: 1px solid rgba(245, 158, 11, 0.6) !important;
	padding: 3px 10px !important;
	border-radius: 20px !important;
	font-size: 0.7rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.5px !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
}

/* Permanent Visible Action Buttons */
.single_product .sp-button {
	display: none !important;
}

.product-card-actions {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: 12px !important;
	padding-top: 10px !important;
	border-top: 1px solid #f1f5f9 !important;
}

.btn-card-addcart {
	flex: 1 !important;
	background: #000000 !important;
	color: #ffffff !important;
	border: 1px solid #000000 !important;
	padding: 7px 10px !important;
	border-radius: 6px !important;
	font-size: 0.775rem !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	white-space: nowrap !important;
}

.btn-card-addcart:hover {
	background: #f59e0b !important;
	color: #000000 !important;
	border-color: #f59e0b !important;
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.btn-card-quickview {
	background: #f8fafc !important;
	color: #334155 !important;
	border: 1px solid #cbd5e1 !important;
	padding: 7px 10px !important;
	border-radius: 6px !important;
	font-size: 0.775rem !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	white-space: nowrap !important;
}

.btn-card-quickview:hover {
	background: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
}

/* Tight & Clean Spacing for Shop & Product Pages */
.breadcrumb-area {
	background: #f8fafc !important;
	padding: 10px 0 !important;
	border-top: 1px solid #f1f5f9 !important;
	border-bottom: 1px solid #e2e8f0 !important;
}

.breadcrumb-list {
	margin: 0 !important;
	padding: 0 !important;
}

.breadcrumb-list .breadcrumb-item {
	font-size: 13px !important;
}

.shop-page.section-ptb,
.section-ptb {
	padding: 20px 0 35px !important;
}

.section-header {
	margin-bottom: 16px !important;
}

.section-header .title {
	font-size: 1.65rem !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	margin-bottom: 4px !important;
	position: relative !important;
	display: inline-block !important;
}

.section-header .title::after {
	content: '' !important;
	display: block !important;
	width: 40px !important;
	height: 3px !important;
	background: #f59e0b !important;
	margin: 6px auto 0 !important;
	border-radius: 2px !important;
}

.product-header {
	padding: 8px 16px !important;
	margin-bottom: 18px !important;
	border-radius: 8px !important;
}

/* Product List View Card Overrides */
.product-list-card {
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
	transition: all 0.25s ease !important;
	display: block !important;
	height: auto !important;
}

.product-list-card:hover {
	border-color: #cbd5e1 !important;
	box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important;
}

/* Override global grid card styles for List View card components */
.product-list-card .product-img-box {
	height: auto !important;
	width: auto !important;
	margin-bottom: 0 !important;
	display: block !important;
}

.product-list-card .product_thumb {
	/* Fixed height reserves the space before the image loads. With height:auto the row
	   had no dimensions until each thumbnail arrived, so the list reflowed as they came
	   in - the layout shift Core Web Vitals measures. Product thumbnails are 370px wide
	   with varying height (roughly 320-350), so width/height attributes on the img would
	   distort them; reserving the box and letting object-fit contain the image does not.
	   The grid view already does this via .single_product .product_thumb. */
	height: 120px !important;
	width: auto !important;
	max-width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.product-list-card .product_thumb img {
	max-height: 120px !important;
	height: auto !important;
	width: auto !important;
	object-fit: contain !important;
	display: inline-block !important;
}

.product-list-card .product-info {
	display: block !important;
	width: auto !important;
}

.product-list-card .product-name {
	max-height: none !important;
	min-height: 0 !important;
	margin-bottom: 8px !important;
}

@media (min-width: 768px) {
	.product-list-card .product_thumb img {
		max-height: 170px !important;
	}
}

@media (max-width: 767px) {
	.product-list-card .product-price {
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}
}

@media (min-width: 768px) {
	.border-start-md {
		border-left: 1px solid #f1f5f9 !important;
	}
}

/* Responsive Product Card & Carousel Container Hover Fixes */
.owl-carousel .owl-stage-outer {
	padding: 8px 5px !important;
	margin: -8px -5px !important;
}

.owl-carousel .owl-item {
	padding: 6px 8px !important;
}

.single_product {
	background-color: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 14px !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
}

.single_product:hover {
	border-color: #7f0517 !important;
	transform: translateY(-4px) !important;
	box-shadow: 0 10px 22px rgba(127, 5, 23, 0.14) !important;
}

.single_product .product-name {
	min-height: 42px !important;
	margin-bottom: 8px !important;
}

.single_product .product-name a {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	word-break: break-word !important;
	color: #1e293b !important;
}

.single_product .product-name a:hover {
	color: #7f0517 !important;
}

.product-card-actions {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: 10px !important;
	padding-top: 10px !important;
	border-top: 1px solid #f1f5f9 !important;
	position: relative !important;
	z-index: 2 !important;
}

.btn-card-addcart, .btn-card-quickview {
	flex: 1 !important;
	min-width: 0 !important;
	font-size: 0.75rem !important;
	padding: 6px 6px !important;
	text-align: center !important;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

@media (max-width: 1400px) {
	.product-card-actions {
		gap: 4px !important;
	}
	.btn-card-addcart, .btn-card-quickview {
		font-size: 0.725rem !important;
		padding: 6px 4px !important;
	}
}

/* Mobile Header Bar - White Background, Light Cart Box & Full Color Brand Logo */
@media (max-width: 991px) {
	.header-bottom.header-sticky {
		background-color: #ffffff !important;
		border-bottom: 1px solid #e2e8f0 !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
	}

	.header-bottom .logo img {
		max-height: 42px !important;
		width: auto !important;
		object-fit: contain !important;
	}

	.box-cart-wrap .shopping-cart-wrap {
		background: #f8fafc !important;
		border: 1px solid #cbd5e1 !important;
		border-radius: 8px !important;
		padding: 6px 10px !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
	}

	.box-cart-wrap .shopping-cart-wrap > a {
		color: #0f172a !important;
	}

	.mobile-menu-btn .off-canvas-btn {
		color: #0f172a !important;
		border: none !important;
		background: transparent !important;
		border-radius: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	.mobile-menu-btn .off-canvas-btn a {
		color: #0f172a !important;
	}

	.header-bottom .right-blok-box .shopping-cart-wrap a i {
		color: #0f172a !important;
	}
}

/* Amazon-Style Mobile Sticky Bottom Navigation Bar (Firefox & All Mobile Browsers) */
@media screen and (max-width: 991px) {
    body {
        padding-bottom: 70px !important;
    }

    .mobile-sticky-bottom-nav {
        display: block !important;
        position: -webkit-sticky !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 999999 !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        background: #0f172a !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 6px 0 !important;
    }

    .mobile-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: #94a3b8 !important;
        text-decoration: none !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        transition: all 0.2s ease !important;
        padding: 4px 0 !important;
    }

    .mobile-nav-item i {
        font-size: 1.1rem !important;
        margin-bottom: 2px !important;
        transition: transform 0.2s ease !important;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item.active {
        color: #f59e0b !important;
    }

    .mobile-nav-item.active i {
        transform: translateY(-2px) !important;
        color: #f59e0b !important;
    }

    .mobile-cart-badge {
        position: absolute !important;
        top: -2px !important;
        right: 18% !important;
        font-size: 0.6rem !important;
        padding: 2px 5px !important;
        background: #dc2626 !important;
        color: #ffffff !important;
    }
}

/* Mobile Responsive Overrides for Order Details Page */
@media (max-width: 767px) {
    .order-header-box {
        text-align: center !important;
        padding: 14px !important;
    }

    .performa-banner {
        flex-direction: column !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 10px !important;
        gap: 6px !important;
    }

    .toptable th {
        width: 40% !important;
        font-size: 0.775rem !important;
        padding: 6px 8px !important;
    }

    .toptable td {
        font-size: 0.8rem !important;
        padding: 6px 8px !important;
    }

    .InvoiceBox {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 20px !important;
    }

    .InvoiceBox table {
        min-width: 620px !important;
    }

    .calcrow td {
        font-size: 0.8rem !important;
        padding: 6px 8px !important;
    }
}

/* ==========================================================================
   HOMEPAGE LIGHT-THEMED & PREMIUM DESIGN SYSTEM REFRESH
   ========================================================================== */

/* Global Body Font & Neutral Page Accent */
body {
	font-family: 'Plus Jakarta Sans', 'Nunito', sans-serif !important;
}

.main-wrapper {
	background: #fbfbf9 !important; /* Soft luxury cream backdrop */
}

/* 1. Hero Banner - Clean Light Design */
.cms-banner {
	background: linear-gradient(135deg, #f8f7f2 0%, #f3f1ea 100%) !important;
	border-bottom: 1px solid #e9e6dd !important;
	padding: 80px 0 !important;
	position: relative !important;
}

.cms-banner .banner-txt {
	background: rgba(255, 255, 255, 0.9) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	border-radius: 20px !important;
	padding: 40px !important;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04) !important;
	transition: all 0.3s ease;
}

.cms-banner .banner-txt h2, 
.cms-banner .banner-txt h3 {
	color: #7f0517 !important;
	font-weight: 800 !important;
}

.cms-banner .light-btn,
.cms-banner .btn-box a {
	background: linear-gradient(135deg, #7f0517 0%, #9b061c 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 30px !important;
	padding: 12px 32px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	box-shadow: 0 6px 20px rgba(127, 5, 23, 0.25) !important;
	transition: all 0.3s ease !important;
}

.cms-banner .light-btn:hover,
.cms-banner .btn-box a:hover {
	background: linear-gradient(135deg, #9b061c 0%, #7f0517 100%) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 25px rgba(127, 5, 23, 0.35) !important;
	color: #ffffff !important;
}

.cms-banner .banner-img img {
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
	transition: all 0.4s ease;
}

.cms-banner:hover .banner-img img {
	transform: translateY(-5px);
}

/* 2. Customer Support - Clean White Cards (Undoing dark bento-grid gradients) */
section.cms-support {
	padding: 60px 0 40px !important;
	background: transparent !important;
}

section.cms-support .support-box {
	background: #ffffff !important;
	border: 1px solid #e9e6dd !important;
	border-radius: 20px !important;
	padding: 30px 20px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
	transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	height: 100% !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

section.cms-support .support-box:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 20px 40px rgba(127, 5, 23, 0.08) !important;
	border-color: #7f0517 !important;
}

section.cms-support .support-box .icon {
	height: 60px !important;
	margin-bottom: 15px !important;
}

section.cms-support .support-box .icon svg path,
section.cms-support .support-box .icon svg circle {
	fill: #7f0517 !important;
}

section.cms-support .support-box p {
	font-size: 15px !important;
	line-height: 22px !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	margin: 0 !important;
}

/* 3. Special Offer Section - Light Background to merge transparent images */
section.cms-special {
	position: relative !important;
	padding: 80px 0 !important;
	background: #fdfbf7 !important; /* Soft warm light color */
	border-top: 1px solid #e9e6dd !important;
	border-bottom: 1px solid #e9e6dd !important;
	margin: 40px 0 !important;
}

section.cms-special .section-header {
	background: #ffffff !important;
	border: 1px solid #e9e6dd !important;
	border-radius: 24px !important;
	padding: 40px !important;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03) !important;
	text-align: left !important;
}

section.cms-special .section-header h2 {
	color: #7f0517 !important;
	font-size: 32px !important;
	font-weight: 850 !important;
	line-height: 1.3 !important;
	margin-bottom: 10px !important;
}

section.cms-special .section-header h2 span {
	color: #c2410c !important;
	background: #ffedd5 !important;
	border: 1px solid #fed7aa !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	display: inline-block !important;
	padding: 4px 12px !important;
	border-radius: 20px !important;
	font-weight: 700 !important;
	margin-bottom: 15px !important;
}

section.cms-special .section-header p {
	color: #475569 !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	margin-bottom: 20px !important;
}

section.cms-special .black-btn {
	background: linear-gradient(135deg, #7f0517 0%, #9b061c 100%) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	border-radius: 30px !important;
	padding: 12px 34px !important;
	box-shadow: 0 6px 20px rgba(127, 5, 23, 0.25) !important;
	transition: all 0.3s ease !important;
	display: inline-block !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	border: none !important;
}

section.cms-special .black-btn:hover {
	background: linear-gradient(135deg, #9b061c 0%, #7f0517 100%) !important;
	color: #ffffff !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 25px rgba(127, 5, 23, 0.35) !important;
}

section.cms-special .special-products img {
	filter: drop-shadow(0 10px 20px rgba(0,0,0,0.04)) !important;
	transition: transform 0.4s ease !important;
}

section.cms-special:hover .special-products img {
	transform: scale(1.03) translateY(-5px) !important;
}

/* 4. Small Homepage Advertisement Banners - Light Clean Theme */
section.cms-static-area {
	padding: 40px 0 !important;
	background: transparent !important;
}

.single-static {
	background: #ffffff !important;
	border: 1px solid #e9e6dd !important;
	border-radius: 20px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
	overflow: hidden !important;
	transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.single-static:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 20px 40px rgba(127, 5, 23, 0.08) !important;
	border-color: #7f0517 !important;
}

.single-static .icon {
	overflow: hidden !important;
}

.single-static .icon img {
	width: 100% !important;
	height: auto !important;
	transition: transform 0.5s ease !important;
}

.single-static:hover .icon img {
	transform: scale(1.03) !important;
}

.single-static .content {
	padding: 24px 28px !important;
	background: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.single-static .content h4 {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: #1e293b !important;
	margin: 0 !important;
}

.single-static .light-btn {
	background: linear-gradient(135deg, #7f0517 0%, #9b061c 100%) !important;
	color: #ffffff !important;
	border-radius: 30px !important;
	padding: 10px 24px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	border: none !important;
	box-shadow: 0 5px 15px rgba(127, 5, 23, 0.2) !important;
	transition: all 0.3s ease !important;
}

.single-static .light-btn:hover {
	background: linear-gradient(135deg, #9b061c 0%, #7f0517 100%) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(127, 5, 23, 0.3) !important;
	color: #ffffff !important;
}

/* 5. About Us & Details Page Overrides */
.about-img img {
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	transition: all 0.4s ease;
}

.about-img:hover img {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(127, 5, 23, 0.1);
}

@media (max-width: 991px) {
	.cms-banner {
		padding: 20px 0 !important;
		overflow: hidden !important;
	}
	.cms-banner .banner-txt {
		padding: 20px 16px !important;
		margin-bottom: 16px;
		overflow: hidden;
		max-width: 100%;
	}
	.cms-banner .banner-txt h1,
	.cms-banner .banner-txt h2,
	.cms-banner .banner-txt h3 {
		font-size: 22px !important;
		line-height: 1.3 !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;
	}
	.cms-banner .banner-txt p {
		font-size: 14px !important;
		line-height: 1.45 !important;
	}
	section.cms-special {
		padding: 50px 0 !important;
		text-align: center !important;
	}
	section.cms-special .section-header {
		text-align: center !important;
		padding: 30px 20px !important;
		margin-bottom: 30px;
	}
}

/* 6. Login to View Price Pill Badge (Smaller yet More Prominent) */
.login-price-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #fffbeb !important;
	border: 1px solid #fde68a !important;
	color: #b45309 !important; /* Rich amber-brown for high readability */
	font-size: 13.5px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	padding: 8px 18px !important;
	border-radius: 30px !important;
	box-shadow: 0 4px 10px rgba(180, 83, 9, 0.05) !important;
	transition: all 0.25s ease !important;
	text-decoration: none !important;
	margin-top: 5px !important;
}

.login-price-link i {
	font-size: 12px !important;
	margin-right: 6px !important;
	color: #d97706 !important;
}

.login-price-link:hover {
	background: #fef3c7 !important;
	border-color: #fcd34d !important;
	color: #92400e !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 15px rgba(180, 83, 9, 0.12) !important;
	text-decoration: none !important;
}

/* Compact layout for grid cards */
.product-price .login-price-link {
	font-size: 11.5px !important;
	padding: 5px 12px !important;
	border-radius: 20px !important;
	letter-spacing: 0.2px !important;
	margin-top: 2px !important;
}

/* Fix mobile my cart checkbox overlap and alignment issues */
.cms-cart-mobile-cards .form-check-input,
.cms-cart-table .form-check-input {
	position: relative !important;
	margin: 0 !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
	vertical-align: middle !important;
	transform: none !important;
}

.cms-cart-mobile-cards label,
.cms-cart-mobile-cards span {
	margin-left: 4px !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* Breadcrumb global responsive styles */
.breadcrumb-area {
	background: #f8fafc !important;
	padding: 12px 0 !important;
	border-bottom: 1px solid #e2e8f0 !important;
	margin-bottom: 25px !important;
}

.breadcrumb-list {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.breadcrumb-item {
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: #64748b !important;
	display: flex !important;
	align-items: center !important;
}

.breadcrumb-item a {
	color: #64748b !important;
	transition: color 0.2s ease !important;
	text-decoration: none !important;
}

.breadcrumb-item a:hover {
	color: #7f0517 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
	content: "/" !important;
	padding: 0 10px !important;
	color: #cbd5e1 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
}

.breadcrumb-item.active {
	color: #7f0517 !important;
	font-weight: 600 !important;
}

@media (max-width: 767px) {
	.breadcrumb-area {
		padding: 8px 0 !important;
		margin-bottom: 15px !important;
	}
	.breadcrumb-list {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
		-webkit-overflow-scrolling: touch !important;
		padding-bottom: 3px !important;
	}
	.breadcrumb-list::-webkit-scrollbar {
		display: none !important;
	}
	.breadcrumb-list {
		-ms-overflow-style: none !important;
		scrollbar-width: none !important;
	}
	.breadcrumb-item {
		font-size: 12px !important;
		flex-shrink: 0 !important;
	}
	.breadcrumb-item + .breadcrumb-item::before {
		padding: 0 6px !important;
	}
}

/* Premium Mobile Cart Cards Layout System */
@media (max-width: 767px) {
	.cms-cart-mobile-cards {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
	}
	.cms-cart-mobile-cards .card {
		border: 1.5px solid #e2e8f0 !important;
		border-radius: 14px !important;
		box-shadow: 0 4px 12px rgba(0,0,0,0.015) !important;
		overflow: hidden !important;
		background: #ffffff !important;
	}
	.cms-cart-mobile-cards .card-header {
		background: #f8fafc !important;
		border-bottom: 1.5px solid #e2e8f0 !important;
		padding: 10px 14px !important;
	}
	.cms-cart-mobile-cards .card-body {
		padding: 14px !important;
	}
	.cms-cart-mobile-cards .cart-qty-input {
		border: 1.5px solid #cbd5e1 !important;
		border-radius: 8px !important;
		font-weight: 800 !important;
		padding: 4px 8px !important;
		text-align: center !important;
	}
	.cms-cart-mobile-cards .editbox {
		border: 1.5px solid #e2e8f0 !important;
		border-radius: 10px !important;
		padding: 10px 12px !important;
		background: #f8fafc !important;
		font-size: 0.8rem !important;
		transition: all 0.25s ease !important;
	}
	.cms-cart-mobile-cards .editbox:focus {
		background: #ffffff !important;
		border-color: #7f0517 !important;
		box-shadow: 0 0 0 3px rgba(127, 5, 23, 0.08) !important;
	}
}

/* 2-line Webkit Line Clamp utility */
.text-clamp-2 {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: normal !important;
}

/* ==========================================================================
   Desktop ALL PRODUCTS dropdown + B2B footer / button polish
   Mobile hamburger / off-canvas is unchanged (scoped to min-width: 992px)
   ========================================================================== */
@media (min-width: 992px) {
	.header-bottom,
	.header-bottom .categories-menu-wrap_box,
	.header-bottom .categories_menu {
		overflow: visible !important;
	}

	.header-bottom .header-nav-cats {
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		width: auto !important;
		max-width: max-content !important;
	}

	.header-bottom .header-nav-links {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
	}

	.header-bottom .main-menu ul {
		justify-content: space-between !important;
		width: 100% !important;
	}

	.header-bottom .main-menu ul > li {
		flex: 1 1 0 !important;
	}

	.header-bottom .main-menu ul > li > a {
		width: 100%;
	}

	.categories_menu_toggle > ul > li.menu_item_children:before {
		display: none !important;
	}

	.header-bottom .categories_menu_toggle {
		width: min(640px, 72vw) !important;
		max-width: 640px;
		padding: 12px !important;
		background: #ffffff !important;
		border: 1px solid #e2e8f0 !important;
		border-top: 3px solid #FEAF16 !important;
		border-radius: 0 0 12px 12px !important;
		box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16) !important;
		max-height: none;
		overflow: visible !important;
		z-index: 100050 !important;
	}

	.header-bottom .categories_menu_toggle > ul {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 3px 8px;
		max-height: none !important;
		overflow: visible !important;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.header-bottom .categories_menu_toggle > ul > li {
		position: relative;
		border-bottom: none !important;
		margin: 0;
		z-index: 1;
	}

	.header-bottom .categories_menu_toggle > ul > li:hover,
	.header-bottom .categories_menu_toggle > ul > li:focus-within {
		z-index: 20;
	}

	.header-bottom .categories_menu_toggle > ul > li > a {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 9px 12px !important;
		font-size: 13.5px !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
		text-transform: none !important;
		color: #1e293b !important;
		border-radius: 8px;
		text-decoration: none !important;
		transition: background 0.15s ease, color 0.15s ease;
	}

	.header-bottom .categories_menu_toggle > ul > li:hover > a,
	.header-bottom .categories_menu_toggle > ul > li:focus-within > a,
	.header-bottom .categories_menu_toggle > ul > li > a:hover {
		background: #fff8eb !important;
		color: #4a040b !important;
	}

	.header-bottom .categories_menu_toggle .cat-name {
		flex: 1 1 auto;
		min-width: 0;
		font-weight: 600;
	}

	.header-bottom .categories_menu_toggle .cat-meta {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		flex: 0 0 auto;
	}

	.header-bottom .categories_menu_toggle .cat-count {
		font-size: 11px !important;
		font-weight: 600 !important;
		color: #64748b !important;
		background: #f1f5f9 !important;
		padding: 2px 7px !important;
		border-radius: 10px !important;
		letter-spacing: 0;
	}

	.header-bottom .categories_menu_toggle > ul > li > a i {
		float: none !important;
		line-height: 1 !important;
		font-size: 11px !important;
		color: #FEAF16 !important;
	}

	.header-bottom .categories_menu_toggle > ul > li:hover > a i {
		color: #4a040b !important;
	}

	.header-bottom .categories_menu_toggle > ul > li ul.categories_mega_menu {
		position: absolute !important;
		left: 100% !important;
		top: 0 !important;
		width: 260px !important;
		max-height: min(72vh, 680px) !important;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 8px !important;
		margin: 0;
		list-style: none;
		border: 1px solid #e2e8f0 !important;
		border-left: 3px solid #FEAF16 !important;
		border-radius: 0 10px 10px 0 !important;
		box-shadow: 12px 16px 36px rgba(15, 23, 42, 0.15) !important;
		background: #ffffff !important;
		z-index: 100060 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none;
		display: block !important;
	}

	.header-bottom .categories_menu_toggle > ul > li:hover ul.categories_mega_menu,
	.header-bottom .categories_menu_toggle > ul > li:focus-within ul.categories_mega_menu {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto;
		left: 100% !important;
	}

	.header-bottom .categories_menu_toggle > ul > li ul.categories_mega_menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 7px 10px !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		color: #334155 !important;
		border-radius: 6px;
	}

	.header-bottom .categories_menu_toggle > ul > li ul.categories_mega_menu > li > a:hover {
		background: #fff8eb !important;
		color: #4a040b !important;
	}
}

.header-bottom .categories_menu_toggle::-webkit-scrollbar {
	width: 6px;
}
.header-bottom .categories_menu_toggle::-webkit-scrollbar-thumb {
	background: #d6d3d1;
	border-radius: 6px;
}

/* Footer: tighter professional B2B */
.footer-trust-bar {
	padding: 16px 0 !important;
}
.footer-trust-item {
	gap: 12px !important;
	padding: 6px 8px !important;
}
.footer-trust-icon {
	width: 36px !important;
	height: 36px !important;
	border-radius: 8px !important;
	font-size: 0.95rem !important;
}
.footer-trust-text strong {
	font-size: 0.8rem !important;
}
.footer-trust-text span {
	font-size: 0.72rem !important;
}
footer.cms-footer .footer-top {
	padding: 32px 0 24px !important;
}
.footer-top-wrap {
	gap: 20px !important;
}
footer.cms-footer .footer-nav {
	flex: 1 1 140px !important;
	min-width: 140px !important;
	margin-bottom: 12px !important;
}
footer.cms-footer .footer-nav h4 {
	font-size: 0.8rem !important;
	margin: 0 0 12px !important;
	padding-bottom: 8px !important;
	letter-spacing: 0.06em !important;
}
footer.cms-footer .footer-nav h4:after {
	width: 24px !important;
	height: 2px !important;
}
footer.cms-footer .footer-nav ul li {
	margin-bottom: 6px !important;
}
footer.cms-footer .footer-nav ul li a {
	font-size: 0.8rem !important;
}
footer.cms-footer .footer-mid {
	padding: 14px 0 !important;
}
footer.cms-footer .footer-social ul li a {
	width: 32px !important;
	height: 32px !important;
	font-size: 0.9rem !important;
}
footer.cms-footer .footer-payment ul li img {
	max-height: 28px !important;
}
.footer-legal-row {
	gap: 10px !important;
	font-size: 0.75rem !important;
}
.footer-legal-link {
	color: #94a3b8 !important;
	font-weight: 500 !important;
	font-size: 0.72rem !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
}
.footer-legal-link:hover {
	color: #f59e0b !important;
}
.footer-legal-sep {
	color: rgba(255, 255, 255, 0.22);
	font-weight: 400;
}

@media (max-width: 991px) {
	footer.cms-footer .footer-nav {
		flex: 1 1 calc(50% - 12px) !important;
		min-width: 0 !important;
		max-width: calc(50% - 8px);
	}
	.footer-trust-bar .col-12 {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
	body {
		padding-bottom: 56px !important;
	}
	.mobile-sticky-bottom-nav {
		padding: 4px 0 !important;
	}
	.mobile-nav-item i {
		font-size: 1rem !important;
	}
	.cms-banner .light-btn,
	.cms-banner .btn-box a,
	section.cms-special .black-btn {
		padding: 8px 16px !important;
		font-size: 13px !important;
		letter-spacing: 0.03em !important;
		border-radius: 6px !important;
	}
	.custom-carousel .owl-nav button.owl-prev,
	.custom-carousel .owl-nav button.owl-next {
		height: 40px !important;
		line-height: 36px !important;
		font-size: 16px !important;
		width: 28px !important;
	}
}

@media (max-width: 575px) {
	/* Trust bar on phones: 2 x 2 compact cards (icon above text, centred) */
	.footer-trust-bar {
		padding: 14px 0 6px !important;
	}
	.footer-trust-bar .row {
		margin-left: -5px;
		margin-right: -5px;
	}
	.footer-trust-bar .col-12 {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		padding: 0 5px 10px !important;
	}
	.footer-trust-item {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		text-align: center !important;
		gap: 8px !important;
		height: 100%;
		padding: 14px 8px !important;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(254, 175, 22, 0.18);
		border-radius: 12px;
	}
	.footer-trust-icon {
		width: 42px !important;
		height: 42px !important;
		border-radius: 10px !important;
		font-size: 1.05rem !important;
		margin: 0 !important;
	}
	.footer-trust-text strong {
		font-size: 0.8rem !important;
		line-height: 1.25 !important;
		margin-bottom: 2px !important;
	}
	.footer-trust-text span {
		font-size: 0.68rem !important;
		line-height: 1.3 !important;
		display: block;
	}
	.footer-top-wrap {
		gap: 8px 16px !important;
	}
	.single-static .content {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
		padding: 14px 16px !important;
	}
}
/* ==========================================================================
   BLOG POST BODY CTA BUTTONS - BRAND OVERRIDE (#7F0517 MAROON)
   Auto-generated post `description` HTML ships Bootstrap's blue
   .btn-primary (e.g. "View Product & Place Wholesale Order"). Scoped to
   .article-entry-body so the rest of the site (incl. the share-row
   .btn-outline-primary in the article footer) is untouched.
   ========================================================================== */
.article-entry-body .btn-primary,
.article-entry-body .btn-outline-primary,
.article-entry-body a[style*="background:#007bff"],
.article-entry-body a[style*="background: #007bff"],
.article-entry-body a[style*="background-color:#007bff"],
.article-entry-body a[style*="background-color: #007bff"],
.article-entry-body a[style*="background:#0d6efd"],
.article-entry-body a[style*="background: #0d6efd"],
.article-entry-body a[style*="background-color:#0d6efd"],
.article-entry-body a[style*="background-color: #0d6efd"] {
	background: linear-gradient(135deg, #7f0517 0%, #9b061c 100%) !important;
	background-color: #7f0517 !important;
	border: 1px solid #7f0517 !important;
	color: #fff !important;
	border-radius: 50rem !important;
	padding: 0.55rem 1.4rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(127, 5, 23, 0.25) !important;
	transition: all 0.25s ease !important;
}

.article-entry-body .btn-primary:hover,
.article-entry-body .btn-primary:focus,
.article-entry-body .btn-outline-primary:hover,
.article-entry-body .btn-outline-primary:focus,
.article-entry-body a[style*="background:#007bff"]:hover,
.article-entry-body a[style*="background: #007bff"]:hover,
.article-entry-body a[style*="background-color:#007bff"]:hover,
.article-entry-body a[style*="background-color: #007bff"]:hover,
.article-entry-body a[style*="background:#0d6efd"]:hover,
.article-entry-body a[style*="background: #0d6efd"]:hover,
.article-entry-body a[style*="background-color:#0d6efd"]:hover,
.article-entry-body a[style*="background-color: #0d6efd"]:hover {
	background: linear-gradient(135deg, #9b061c 0%, #60030f 100%) !important;
	background-color: #60030f !important;
	border-color: #60030f !important;
	color: #ffc107 !important;
	box-shadow: 0 4px 12px rgba(127, 5, 23, 0.35) !important;
	transform: translateY(-1px);
}

.article-entry-body .btn-primary:focus,
.article-entry-body .btn-outline-primary:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(127, 5, 23, 0.35) !important;
}

/* == theme/Agate/css/responsive.css == */
/* ==========================================================================
   Universal Equal-Height Product Slider & Grid Alignment Fix (Desktop + All Devices)
   ========================================================================== */
.product-carousel .owl-stage,
.custom-carousel .owl-stage,
#new-products-carousel .owl-stage,
#bestsell-carousel .owl-stage,
#special-products-carousel .owl-stage,
#recommended-carousel .owl-stage {
  display: flex !important;
  align-items: stretch !important;
}

.product-carousel .owl-item,
.custom-carousel .owl-item,
#new-products-carousel .owl-item,
#bestsell-carousel .owl-item,
#special-products-carousel .owl-item,
#recommended-carousel .owl-item {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}

.product-carousel .owl-item .item,
.custom-carousel .owl-item .item,
#new-products-carousel .owl-item .item,
#bestsell-carousel .owl-item .item,
#special-products-carousel .owl-item .item,
#recommended-carousel .owl-item .item {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
}

.single_product {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.single_product:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.09) !important;
  border-color: #cbd5e1 !important;
}

.single_product .product-img-box {
  height: 180px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  margin-bottom: 10px !important;
}

.single_product .product_thumb {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.single_product .product_thumb img {
  max-height: 170px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.single_product .product-info {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  width: 100% !important;
}

.single_product .product-name {
  min-height: 42px !important;
  max-height: 42px !important;
  margin-bottom: 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.single_product .product-name a {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #1e293b !important;
  transition: color 0.2s ease !important;
}

.single_product .product-name a:hover {
  color: #7f0517 !important;
}

.single_product .product-price {
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}

.single_product .product-detail-list {
  flex-grow: 1 !important;
  margin-bottom: 12px !important;
}

.single_product .product-card-actions {
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Header Cart Bounce Animation */
@keyframes cartPulseBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.35) rotate(-8deg); }
  60% { transform: scale(1.15) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.cart-pulse-bounce {
  animation: cartPulseBounce 0.6s ease-in-out !important;
}

/* Currency dropdown list hover display */
.curreny-wrap li:hover .curreny-list,
.curreny-wrap:hover .curreny-list {
  display: block !important;
}

/* Footer legal link hover */
.footer-legal-link:hover {
  color: #fbbf24 !important;
  text-decoration: underline !important;
}
/* 1440 */
@media only screen and (max-width: 1600px) and (min-width: 1440px) {
	.main-menu ul > li > a {
		font-size: 14px;
		padding: 0 10px;
	}
}
/* 1366 */
@media only screen and (max-width: 1439px) and (min-width: 1280px) {
	.main-menu ul > li > a {
		font-size: 13px;
		padding: 0 8px;
	}
}

/* 1280 */
@media only screen and (max-width: 1279px) and (min-width: 1200px) {
	.main-menu ul > li > a {
		font-size: 12px;
		padding: 0 6px;
	}
}

/* 1024 */
@media only screen and (max-width: 1199px) {
	.main-menu ul > li {
		margin: 0;
	}
	.main-menu ul > li > a {
		font-size: 11px;
		padding: 0 4px;
		letter-spacing: 0.02em;
	}
	section.cms-recommended .single_product {
  		display: block;
	}
	section.cms-recommended .single_product .product-info {
  		margin-left: 0;
	}

	.blog-sidebar {	padding: 0;	}

	/* checkout page Styles
======================================================================================================*/
	section.cms-checkout .sidebar { padding: 30px; }

	/* faq page Styles
======================================================================================================*/
	.accordion { padding: 0; }

	/* profile page Styles
======================================================================================================*/
	.order-box .order-detail { flex-direction: column; row-gap: 15px;}

	.col-20 { flex: 0 0 33.33333%; max-width: 33.33333%; }

	
	
}

/* 768 */
@media only screen and (max-width: 1023px) {
	
	
	
	
	
	.section-header h2.title { font-size: 36px; }

	header.cms-header { min-height: auto; }
	.categories-menu-wrap_box { display: none !important; }
	.header-sticky.is-sticky .categories-menu-wrap_box { display: none !important; }
	.categories-menu-wrap_box .categories_title { height: 50px; line-height: 50px; }
	.categories_title .categori_toggle { line-height: 50px; }
	.categories_menu_toggle { overflow-x: hidden; overflow-y: auto;	height: 70vh; }
	.categories_menu_toggle > ul > li.menu_item_children > a i {
  		-webkit-transform: rotate(90deg);
  		transform: rotate(90deg);
	}
	.categories_menu_toggle > ul > li.menu_item_children.open > a i {
	  	-webkit-transform: rotate(-90deg);
	  	transform: rotate(-90deg);
	}
	.categories_menu_toggle > ul > li ul.categories_mega_menu {
		display: none;
		opacity: inherit !important;
		visibility: inherit !important;
		left: inherit !important;
		width: 100%;
		top: 100%;
		max-height: 350px;
		overflow: auto;
		-webkit-transition: unset;
		transition: unset;
		-webkit-box-shadow: inherit;
		box-shadow: inherit;
		position: inherit;
		padding: 6px 20px 6px 40px;
		background: #f9f9f9;
	}
	.right-blok-box {
  		margin: 15px 0px 15px 0;
	}
	.box-cart-wrap .shopping-cart-wrap {
		border: 2px solid #FEAF16;
	}

	section.cms-banner .banner-txt {
		padding-left: 0;
	}

	section.cms-banner { padding: 24px 0 24px; overflow: hidden; }
	section.cms-banner h1,
	section.cms-banner h2 {	font-size: 22px; line-height: 1.25; margin-bottom: 12px; }
	section.cms-banner h1 span,
	section.cms-banner h2 span { font-size: 18px; }

	section.cms-support { padding: 40px 0 10px; }
	section.cms-support .col-md-4 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; margin-bottom: 30px;}

	section.cms-single-product { padding: 40px 0 40px; }

	section.cms-static-area { padding: 40px 0 40px; }
	section.cms-static-area .col-xl-6 + .col-xl-6 { margin-top: 30px; }

	section.cms-about { padding: 40px 0 40px; }
	section.cms-about .about-img { margin: 0 0 30px; }

	section.stone-list { padding: 40px 0 40px; }

	section.cms-category { padding: 40px 0 40px; }

	section.cms-special .section-header h2 { font-size: 36px; }
	section.cms-special .section-header h2 span { font-size: 24px; }
	section.cms-special .special-products { text-align: center; }

	section.cms-recommended { padding: 40px 0 20px; }

	.footer-top { padding: 40px 0 0px; }
	.footer-nav { width: 50%; margin: 0 0 30px; }
	footer.cms-footer .footer-social { margin: 0 0 20px; }

		/* blog page Styles
======================================================================================================*/
	.blog-sidebar {	padding: 40px 0 0; }
	.blog-single-section .tag-share .share { width: 100%; float: left; top: 0; }
	.blog-single-section .comment-form { margin: 30px 0 0; padding: 30px; }

		/* checkout page Styles
======================================================================================================*/
	section.cms-checkout .sidebar { padding: 10px; }

	/* faq page Styles
======================================================================================================*/
	.accordion__title { font-size: 18px; }
	.faq-info h4 { font-size: 18px; }

	/* profile page Styles
======================================================================================================*/
	.order-box .btn-box { display: inline-flex; flex-direction: column; row-gap: 15px;}

/* product page Styles
======================================================================================================*/
	.col-20 { flex: 0 0 50%; max-width: 50%; }
	.shop-product-list-wrap .single_product { flex-wrap: wrap; }
	.prodDetailMar { border: 0; padding: 0; margin: 20px 0 0; max-width: 100%; }
	.shop-product-list-wrap .single_product .product-img-box { margin: 0 auto; }
	.product-info { width: 100%; }
	.product-detail-list ul { max-width: 100%; }
	
	
	.black-btn {
		font-size: 11px;
		padding: 10px 18px 10px;
		margin-bottom: 10px;
	}
	
	.calling-btn-icon i {
		font-size: 25px;
		top: 43%;
		left: 6px;
	}
	.calling {
		height: 40px;
		width: 40px;
	}
	
	
	section.cms-banner p {
		font-size: 15px;
		line-height: 1.3;
	}
	
}

/* 736 */
@media only screen and (max-width: 767px) {
	.section-header h2.title { font-size: 30px; letter-spacing: 0; }

	.single-static { flex-wrap: wrap; padding: 20px; }
	.single-static .icon { width: 100%; margin: 0 0 20px; text-align: center; }
	.single-static .content { width: 100%; }
	.single-static h4 { font-size: 24px; margin: 0 0 30px; }

	section.cms-special .section-header h2 { font-size: 30px; letter-spacing: 0; }

	.recommended_product { height: 100%; }
	.recommended-wrap { flex-direction: column; }
	.recommended_product .product_image { margin: 0; }
	.recommended_product .product-info { width: 100%; }

	.footer-nav { width: 100%; }
	footer.cms-footer .footer-social h4 { font-size: 14px; }
	footer.cms-footer .footer-social ul { display: flex; }
	footer.cms-footer .footer-social ul li a { width: 38px; height: 38px; }
	footer.cms-footer .footer-payment h4 { font-size: 14px; }
	footer.cms-footer .footer-payment ul { display: flex; }
	footer.cms-footer .footer-bottom { padding: 15px 0 20px !important; }
	footer.cms-footer .copyright { padding: 0 !important; }

	/* cart page Styles
======================================================================================================*/
	.cms-cart .cart-header { display: none; }
	.cms-cart .cart-item-total { display: none; }
	.cms-cart .cart-item-main { width: calc(100% - 120px); }
	.cms-cart .cart-footer-left { width: 100%; }
	.cms-cart .cart-footer-right { width: 100%; padding: 30px 0 0; }

	/* checkout page Styles
======================================================================================================*/
	section.cms-checkout .sidebar { padding: 10px; }
	.checkout-lft .step-footer { flex-direction: column; }
	.step-footer-previous-link { margin: 0 0 20px; }

	/* product page Styles
======================================================================================================*/
	.col-20 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 3px !important; }
	.product-header { flex-direction: column; row-gap: 15px; }
	.products-head-left, .products-head-right { width: 100%; }

	/* Amazon-Style 2-Column Mobile Product Grid Overrides */
	.shop-product-wrap { margin-left: -3px !important; margin-right: -3px !important; }
	.single_product { padding: 6px !important; border-radius: 8px !important; }
	.single_product .product-img-box { height: 110px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
	.single_product .product_thumb img { max-height: 100px !important; max-width: 100% !important; object-fit: contain !important; }
	.single_product .product-name { min-height: 32px !important; margin-bottom: 2px !important; }
	.single_product .product-name a { font-size: 0.725rem !important; line-height: 1.2 !important; -webkit-line-clamp: 2 !important; }
	.single_product .product-price { margin-bottom: 2px !important; }
	.single_product .product-price .price-regular { font-size: 0.775rem !important; }
	.single_product .product-detail-list { margin: 2px 0 0 0 !important; }
	.single_product .product-detail-list ul li { padding: 1px 3px !important; font-size: 0.625rem !important; display: flex !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 0px !important; }
	.single_product .product-detail-list ul li .list-label { width: 40% !important; font-size: 0.625rem !important; font-weight: 700 !important; white-space: nowrap !important; padding-left: 2px !important; }
	.single_product .product-detail-list ul li .list-value { width: 60% !important; padding-left: 10px !important; font-size: 0.625rem !important; font-weight: 600 !important; white-space: normal !important; word-break: break-word !important; text-align: left !important; overflow: visible !important; text-overflow: clip !important; }
	
	/* Single line flex layout for action buttons on mobile */
	.product-card-actions { display: flex !important; flex-direction: row !important; padding-top: 4px !important; margin-top: 4px !important; gap: 3px !important; }
	.btn-card-addcart { font-size: 0.58rem !important; padding: 4px 2px !important; border-radius: 4px !important; flex: 1.3 1 0% !important; justify-content: center !important; gap: 3px !important; }
	.btn-card-addcart i { font-size: 0.7rem !important; }
	.btn-card-quickview { font-size: 0.58rem !important; padding: 4px 2px !important; border-radius: 4px !important; flex: 1 1 0% !important; justify-content: center !important; gap: 3px !important; }
	.btn-card-quickview i { font-size: 0.7rem !important; }
	.btn-card-quickview .btn-text-extra { display: none !important; }

	/* Make login-price-link badge compact on mobile cards */
	.product-price .login-price-link {
		font-size: 9px !important;
		padding: 4px 8px !important;
		letter-spacing: 0px !important;
		border-radius: 12px !important;
		margin-top: 2px !important;
	}
	.product-price .login-price-link i {
		font-size: 9px !important;
		margin-right: 3px !important;
	}

}

	

/* 667 */
@media only screen and (max-width: 735px) {
	
}

/* iPad & Tablet Footer Responsive Optimizations */
@media only screen and (max-width: 1024px) {
	.footer-mid-wrap {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: wrap !important;
		gap: 15px !important;
	}

	.footer-social, .footer-payment {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
	}

	.footer-social h4, .footer-payment h4 {
		margin-bottom: 0 !important;
		white-space: nowrap !important;
	}

	footer.cms-footer .copyright {
		padding: 6px 0 !important;
	}

	footer.cms-footer .copyright div {
		flex-wrap: wrap !important;
		row-gap: 4px !important;
	}
}

@media only screen and (max-width: 768px) {
	.footer-mid-wrap {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}

	.footer-social, .footer-payment {
		flex-direction: column !important;
		justify-content: center !important;
	}

	footer.cms-footer .copyright div a {
		font-size: 0.75rem !important;
	}
}

/* 600 */
@media only screen and (max-width: 666px) {
	

}

/* 568 */
@media only screen and (max-width: 599px) {

}

/* 480 */
@media only screen and (max-width: 567px) {

}

/* 414 */
@media only screen and (max-width: 479px) {
	
}

@media only screen and (max-width: 413px) {
	
}

/* ==========================================================================
   Product List View Overrides (Ensures correct sizing/alignment across all screens)
   ========================================================================== */
.product-list-card {
	display: block !important;
	height: auto !important;
}

.product-list-card .product-img-box {
	height: auto !important;
	width: auto !important;
	margin-bottom: 0 !important;
	display: block !important;
}

.product-list-card .product_thumb {
	height: auto !important;
	width: auto !important;
	max-width: 100% !important;
	display: block !important;
	text-align: center !important;
}

.product-list-card .product_thumb img {
	max-height: 120px !important;
	height: auto !important;
	width: auto !important;
	object-fit: contain !important;
	display: inline-block !important;
}

.product-list-card .product-info {
	display: block !important;
	width: auto !important;
}

.product-list-card .product-name {
	max-height: none !important;
	min-height: 0 !important;
	margin-bottom: 8px !important;
}

@media (min-width: 768px) {
	.product-list-card .product_thumb img {
		max-height: 170px !important;
	}
	.product-list-card .btn-card-addcart,
	.product-list-card .btn-card-quickview {
		max-width: 200px !important;
		width: 100% !important;
		margin-left: auto !important;
	}
	/* Add space between stacked buttons on desktop List View */
	.product-list-card .btn-card-addcart {
		margin-bottom: 8px !important;
	}
	/* Force right alignment for wholesale price on desktop */
	.product-list-card .product-price {
		text-align: right !important;
	}
}

.product-list-card .product-price {
	display: block !important;
	min-height: 0 !important;
	margin-bottom: 12px !important;
}

@media (max-width: 767px) {
	.product-list-card .product-price {
		margin-top: 10px !important;
		margin-bottom: 10px !important;
		text-align: center !important;
	}
	/* Add space between side-by-side buttons on mobile List View */
	.product-list-card .btn-card-addcart {
		margin-right: 6px !important;
		margin-bottom: 0 !important;
	}
	/* Hide the Grid/List layout selector on mobile devices */
	.product-mode {
		display: none !important;
	}
}

/* Desktop nav row: equal height ALL PRODUCTS + links, no wrap/collision */
@media (min-width: 992px) {
	.categories-menu-wrap_box {
		display: block !important;
	}
	.header-bottom > .container > .row {
		align-items: stretch !important;
		flex-wrap: nowrap !important;
		min-height: 52px;
	}
	.header-bottom .categories-menu-wrap_box,
	.header-bottom .categories_menu {
		height: 52px;
		overflow: visible !important;
	}
	.header-bottom .main-menu,
	.header-bottom .main-menu .main-navigation {
		height: 52px;
	}
	.header-bottom .categories_title {
		height: 52px !important;
		line-height: 52px !important;
	}
	.header-bottom .categori_toggle {
		height: 52px !important;
		line-height: 52px !important;
		font-size: 13px;
	}
	.header-bottom .main-menu ul {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
		justify-content: space-between;
		height: 52px;
		width: 100%;
		padding: 0 !important;
	}
	.header-bottom .main-menu ul > li {
		margin: 0 !important;
		flex: 1 1 0 !important;
	}
	.header-bottom .main-menu ul > li > a {
		height: 52px !important;
		line-height: 1 !important;
		white-space: nowrap;
	}
}

/* == theme/Agate/css/header-extras.css == */
/* Header, WhatsApp button and mini-cart styles (moved out of header.php so browsers cache them) */
.whatsapp-container {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: #ffffff !important;
    height: 44px;
    border-radius: 22px;
    padding: 0 12px 0 14px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: all 0.25s ease-in-out;
    box-sizing: border-box;
}
.whatsapp-container:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.55);
    background: linear-gradient(135deg, #20ba5a 0%, #0e7368 100%) !important;
}
.whatsapp-floating-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    color: #ffffff !important;
    height: 100%;
}
.whatsapp-floating-link i {
    font-size: 22px;
    color: #ffffff !important;
    margin-right: 8px;
    transition: transform 0.25s ease;
}
.whatsapp-floating-link:hover i {
    transform: rotate(10deg);
}
.whatsapp-btn-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.825rem;
    color: #ffffff !important;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.whatsapp-divider {
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 10px;
    display: inline-block;
}
.whatsapp-close-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.75) !important;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.whatsapp-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff !important;
}
@media (max-width: 991px) {
    .whatsapp-container {
        bottom: 64px;
    }
}
@media (max-width: 768px) {
    /* Icon-only on mobile: a small round button instead of the full
       "Chat on WhatsApp" pill, so it doesn't crowd the page content.
       The close (x) button stays, just smaller, so it can still be hidden. */
    /* right side, above back-to-top: on the left it covered slider buttons and the price line */
    .whatsapp-container {
        left: auto;
        right: 12px;
        bottom: 118px;
        height: 40px;
        padding: 0 8px 0 12px;
        border-radius: 20px;
    }
    .whatsapp-floating-link i {
        font-size: 18px;
        margin-right: 0;
    }
    .whatsapp-btn-text {
        display: none;
    }
    .whatsapp-divider {
        height: 16px;
        margin: 0 6px;
    }
    .whatsapp-close-btn {
        width: 18px;
        height: 18px;
    }
}

/* Mini Cart Dropdown Styles */
.shopping-cart-wrap {
    position: relative;
}

/* Styled Cart Pill Button */
.cart-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 30px;
    color: #0f172a !important;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
}
.cart-trigger:hover {
    background: #e2e8f0;
}
.cart-trigger i {
    font-size: 16px;
    color: #0f172a;
}
.cart-trigger .cart-text {
    color: #0f172a;
}
.cart-trigger .cart-total {
    background: #7f0517 !important; /* Theme Burgundy Badge */
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    min-width: 20px;
    height: 20px;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    position: static !important; /* Remove absolute positioning */
    box-shadow: none !important;
    margin-left: 4px;
}

/* Dropdown Card Container */
.mini-cart-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 350px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    padding: 20px;
    z-index: 1000;
    margin-top: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mini-cart-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Header */
.mini-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 12px;
}
.mini-cart-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.mini-cart-count-text {
    font-size: 13px;
    color: #64748b;
}

/* Dynamic Content Area styling */
.mini-cart-body {
    max-height: none !important;
    overflow-y: visible !important;
    display: flex;
    flex-direction: column;
}

/* Only the products list scrolls, keeping subtotal & buttons fixed */
.mini-cart-body ul.max-450 {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 0;
}

/* Custom Scrollbar for products list */
.mini-cart-body ul.max-450::-webkit-scrollbar {
    width: 5px;
}
.mini-cart-body ul.max-450::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 3px;
}
.mini-cart-body ul.max-450::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.mini-cart-body ul.max-450::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.mini-cart-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Cart Item Row */
.mini-cart-body .cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}
.mini-cart-body .cart-item:last-child {
    border-bottom: none;
}
.mini-cart-body .cart-item .cart-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
    overflow: hidden;
    flex-shrink: 0;
}
.mini-cart-body .cart-item .cart-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mini-cart-body .cart-item .cart-title {
    flex-grow: 1;
    padding-left: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mini-cart-body .cart-item .cart-title h4 {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
    padding-right: 24px; /* Space for delete button */
}
.mini-cart-body .cart-item .cart-title .quanti-price-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mini-cart-body .cart-item .cart-title .quantity {
    font-size: 12.5px;
    color: #64748b;
}
.mini-cart-body .cart-item .cart-title .price-box {
    font-size: 12.5px;
    color: #64748b;
    font-weight: 400;
}
.mini-cart-body .cart-item .cart-title .new-price {
    color: #64748b;
}

/* Remove button */
.mini-cart-body .cart-item .cart-title .remove_from_cart {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    color: #94a3b8 !important;
    font-size: 14px;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.mini-cart-body .cart-item .cart-title .remove_from_cart:hover {
    color: #ef4444 !important;
}

/* Subtotal box */
.mini-cart-body .subtotal-box {
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
    margin-top: 12px;
}
.mini-cart-body .subtotal-box .subtotal-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mini-cart-body .subtotal-box .subtotal-title h3 {
    font-size: 14.5px;
    font-weight: 600;
    color: #475569;
    margin: 0;
}
.mini-cart-body .subtotal-box .subtotal-title span {
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
}

/* Buttons */
.mini-cart-body .mini-cart-btns {
    padding-top: 16px;
}
.mini-cart-body .cart-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mini-cart-body .cart-btns a {
    width: 100%;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.2s;
    text-decoration: none !important;
}
/* View Cart Button - Theme Burgundy */
.mini-cart-body .cart-btns a:first-child {
    background: #7f0517 !important; 
    color: #ffffff !important;
    border: none !important;
}
.mini-cart-body .cart-btns a:first-child:hover {
    background: #5d0310 !important;
}
/* Checkout Button - Outline/Secondary */
.mini-cart-body .cart-btns a:last-child {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
.mini-cart-body .cart-btns a:last-child:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Override existing style.css box-cart-wrap style */
.box-cart-wrap .shopping-cart-wrap {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

@media (max-width: 991px) {
    .right-blok-box {
        gap: 6px !important;
        align-items: center !important;
    }
    .cart-trigger {
        padding: 8px 12px !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 50% !important; /* Circle on mobile */
        width: 40px !important;
        height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        text-decoration: none !important;
    }
    .cart-trigger .cart-text {
        display: none !important;
    }
    .cart-trigger i {
        font-size: 16px !important;
        color: #1e293b !important;
    }
    .cart-trigger .cart-total {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        left: auto !important; /* Override default left: -12px */
        margin: 0 !important;
        background: #dc2626 !important; /* Red badge */
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        width: 18px !important;
        height: 18px !important;
        border: 1.5px solid #ffffff !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
        padding: 0 !important;
        line-height: 1 !important;
        aspect-ratio: 1 / 1 !important;
    }
    .mini-cart-dropdown {
        width: 290px !important;
        right: -45px !important;
        padding: 15px !important;
        margin-top: 8px !important;
        z-index: 999999 !important;
    }
}

/* Clear box wrappers around mobile menu hamburger button */
.mobile-menu-btn,
.off-canvas-btn {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
}

/* Ensure no parent containers clip the dropdown in mobile layout */
@media (max-width: 991px) {
    .right-blok-box, 
    .box-cart-wrap, 
    .shopping-cart-wrap {
        position: relative !important;
        overflow: visible !important;
    }
}

/* Breadcrumb sizing and layout optimizations for mobile */
@media (max-width: 767px) {
    .breadcrumb-list li:nth-child(2) {
        display: none !important; /* Hide redundant "Products" root folder */
    }

}

/* Open mini-cart dropdown on hover on desktop */
@media (min-width: 992px) {
    .shopping-cart-wrap {
        position: relative !important;
    }
    .shopping-cart-wrap:hover .mini-cart-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* Desktop/laptop: full header auto-fit */
.header-mid {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 0;
}
.header-mid-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
    min-height: 54px;
}
.header-mid-logo {
    flex: 0 0 auto;
}
.header-mid-logo img {
    width: auto !important;
    max-width: 360px !important;
    max-height: 88px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}
.header-mid-phone {
    display: none;
    flex: 0 0 auto;
}
.header-mid-phone .contact-call-wrap-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-mid-phone img {
    width: 40px;
    height: 40px;
}
.header-mid-phone-label {
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
}
.header-mid-phone-num {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
    color: #0f172a;
}
.header-mid-search {
    flex: 1 1 auto;
    min-width: 280px;
}
.header-mid-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex: 0 0 auto;
    height: 54px;
}
.header-mid .search-box-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
}
.header-mid .search-field-wrap {
    height: 54px !important;
    box-sizing: border-box !important;
    border-width: 1px !important;
    border-radius: 8px !important;
    overflow: hidden;
}
.header-mid .search-box-inner .search-field {
    height: 52px !important;
    padding-right: 58px !important;
    font-size: 15.5px !important;
}
.header-mid .search-field-wrap .search-btn button {
    width: 54px !important;
    height: 52px !important;
    line-height: 52px !important;
    font-size: 18px !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
}
.header-mid .cart-trigger {
    height: 54px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    background: #7f0517 !important;
    border-color: #7f0517 !important;
    color: #ffffff !important;
}
.header-mid .cart-trigger i,
.header-mid .cart-trigger .cart-text {
    color: #ffffff !important;
}
.header-mid .cart-trigger .cart-total {
    background: #f59e0b !important;
    color: #111827 !important;
}
.header-mid .curreny-wrap {
    height: 54px !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    border-width: 1px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    background: #f8fafc;
}
.header-mid .curreny-wrap ul {
    margin: 0;
    height: 100%;
}
.header-mid .curreny-wrap ul li {
    padding: 0 14px !important;
    height: 52px;
    margin: 0;
}
.header-mid .curreny-wrap ul li i {
    margin-left: 4px;
}

/* Mobile/tablet search icon + expandable search bar */
.mobile-search-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    flex-shrink: 0;
}
.mobile-search-trigger i {
    font-size: 15px !important;
    color: #1e293b !important;
}
.mobile-search-trigger.is-open,
.mobile-search-trigger:hover {
    background: #7f0517 !important;
    border-color: #7f0517 !important;
    color: #ffffff !important;
}
.mobile-search-trigger.is-open i,
.mobile-search-trigger:hover i {
    color: #ffffff !important;
}
.mobile-header-search {
    display: none;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 0 10px;
}
.mobile-header-search.is-open {
    display: block;
}
.mobile-header-search-form {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.mobile-header-search-form input {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: none;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
}
.mobile-header-search-form button {
    width: 46px;
    height: 42px;
    border: none;
    background: #7f0517;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .header-bottom > .container > .header-nav-row {
        flex-wrap: nowrap !important;
        align-items: center !important;
        min-height: 56px;
        margin-left: 0;
        margin-right: 0;
    }
    .header-bottom .logo {
        margin-top: 0 !important;
    }
    .header-bottom .logo img {
        max-height: 40px !important;
        max-width: min(170px, 100%) !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    .header-bottom .right-blok-box {
        gap: 8px !important;
        height: 40px !important;
    }
    .header-mobile-logo,
    .header-mobile-actions {
        display: flex !important;
        align-items: center !important;
    }
    .header-mobile-actions {
        justify-content: flex-end !important;
    }
    .header-bottom .mobile-menu-btn a {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        color: #1e293b !important;
    }
    .mobile-menu-btn .off-canvas-btn {
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        width: auto !important;
        height: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .header-bottom .logo img {
        max-height: 46px !important;
        max-width: min(220px, 100%) !important;
    }
}

@media (min-width: 992px) {
    .mobile-search-trigger,
    .mobile-header-search {
        display: none !important;
    }

    header.cms-header {
        min-height: 0 !important;
    }

    .header-top {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        padding: 6px 0;
    }
    .header-top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 12px;
        min-height: 32px;
    }
    .header-top-left,
    .header-top-right,
    .header-top-right .nav {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
    }
    .header-top-left {
        flex: 1 1 auto;
    }
    .header-top-tagline {
        color: #475569;
        font-weight: 600;
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        flex-shrink: 1;
    }
    .header-top-tagline i {
        margin-right: 6px;
    }
    .header-top-right {
        flex: 0 0 auto;
    }
    .header-top-right .nav {
        gap: 10px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .header-top-right .nav li {
        margin: 0 !important;
        padding: 0 !important;
    }
    .header-top-right .nav a {
        color: #1e293b !important;
        font-size: 0.8rem;
        font-weight: 700;
        white-space: nowrap;
    }
    .header-top-right .nav a i {
        margin-right: 4px;
    }
    .header-top-sep {
        color: #cbd5e1;
        font-weight: 400;
    }

    .header-bottom > .container > .header-nav-row {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        min-height: 52px;
        margin: 0;
    }
    .header-bottom .header-nav-cats {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: auto !important;
        max-width: max-content !important;
        padding-left: 0;
        padding-right: 0;
    }
    .header-bottom .header-nav-links {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        padding-left: 4px;
        padding-right: 0;
        min-width: 0;
    }
    .header-bottom .categories-menu-wrap_box,
    .header-bottom .categories_menu {
        height: 52px;
        width: 100%;
        overflow: visible !important;
    }
    .header-bottom .main-menu,
    .header-bottom .main-menu .main-navigation {
        height: 52px;
        width: 100%;
    }
    .header-bottom .categories_title {
        height: 52px !important;
        line-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 38px 0 16px !important;
        white-space: nowrap;
        overflow: hidden;
        background: #FEAF16 !important;
        box-shadow: inset 4px 0 0 #3b0208 !important;
        border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    .header-bottom .categories_title:hover,
    .header-bottom .categories_title.is-open {
        background: #e59d0e !important;
    }
    .header-bottom .categori_toggle::before {
        right: 14px !important;
        font-size: 14px !important;
        color: #3b0208 !important;
        content: "\f0c9" !important;
    }
    .header-bottom .categori_toggle {
        height: 52px !important;
        line-height: 52px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        color: #3b0208 !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }
    .header-bottom .main-menu ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        gap: 0;
    }
    .header-bottom .main-menu ul > li {
        display: flex !important;
        align-items: stretch !important;
        margin: 0 !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    .header-bottom .main-menu ul > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        height: 52px !important;
        padding: 0 8px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        letter-spacing: 0.07em;
        white-space: nowrap !important;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.92) !important;
        position: relative;
    }
    .header-bottom .main-menu ul > li > a:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.06);
    }
    .header-bottom .main-menu ul > li > a:before {
        height: 2px !important;
        background: #e8b84a !important;
    }
}

@media (min-width: 1200px) {
    .header-mid-phone {
        display: flex;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header-top-tagline {
        font-size: 0.72rem;
    }
    .header-top-right .nav a {
        font-size: 0.75rem;
    }
    .header-mid-bar {
        gap: 14px;
    }
    .header-mid-logo img {
        max-width: 280px !important;
        max-height: 72px !important;
    }
    .header-mid-search {
        min-width: 180px;
    }
    .header-bottom .categori_toggle {
        font-size: 11.5px !important;
        letter-spacing: 0.04em !important;
    }
    .header-bottom .main-menu ul > li > a {
        font-size: 11.5px !important;
        letter-spacing: 0.04em;
        padding: 0 8px !important;
        font-weight: 600 !important;
    }
}

@media (min-width: 1200px) and (max-width: 1279px) {
    .header-bottom .main-menu ul > li > a {
        font-size: 12px !important;
        padding: 0 10px !important;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .header-bottom .main-menu ul > li > a {
        font-size: 12.5px !important;
        padding: 0 12px !important;
    }
}

@media (min-width: 1440px) {
    .header-top-tagline {
        font-size: 0.825rem;
    }
    .header-bottom .main-menu ul > li > a {
        font-size: 13px !important;
        padding: 0 16px !important;
    }
    .header-mid-logo img {
        max-width: 400px !important;
        max-height: 96px !important;
    }
}

/* ==========================================================================
   Desktop main navigation (>= 992px): wide "ALL PRODUCTS" button, links grouped
   left with even spacing, "Contact Us" pinned right as a call-to-action.
   ========================================================================== */
@media (min-width: 992px) {
    .header-bottom .header-nav-cats {
        width: 280px !important;
        max-width: 280px !important;
        flex: 0 0 280px !important;
    }
    .header-bottom .categories_title {
        width: 100%;
        padding: 0 46px 0 22px !important;
    }
    .header-bottom .categori_toggle {
        font-size: 13px !important;
        letter-spacing: 0.1em !important;
    }
    .header-bottom .categori_toggle::before {
        right: 20px !important;
        font-size: 15px !important;
    }
    /* The category panel opens on hover as well as on click */
    .header-bottom .categories_menu:hover .categories_menu_toggle {
        display: block !important;
    }
    .header-bottom .categories_menu_toggle {
        left: 0;
        width: min(720px, 78vw) !important;
        max-width: 720px !important;
    }

    .header-bottom .header-nav-links {
        padding-left: 10px !important;
    }
    .header-bottom .main-menu ul {
        justify-content: space-between !important;
        gap: 0 !important;
    }
    .header-bottom .main-menu ul > li {
        flex: 0 0 auto !important;
    }
    .header-bottom .main-menu ul > li > a {
        width: auto !important;
        padding: 0 12px !important;
        font-size: 12.5px !important;
        letter-spacing: 0.04em !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .header-bottom .header-nav-cats {
        width: 232px !important;
        max-width: 232px !important;
        flex-basis: 232px !important;
    }
    .header-bottom .categories_title {
        padding: 0 38px 0 16px !important;
    }
    .header-bottom .categori_toggle {
        font-size: 11.5px !important;
        letter-spacing: 0.06em !important;
    }
    .header-bottom .main-menu ul > li > a {
        padding: 0 7px !important;
        font-size: 11px !important;
        letter-spacing: 0.03em !important;
    }
}
@media (min-width: 1440px) {
    .header-bottom .header-nav-cats {
        width: 300px !important;
        max-width: 300px !important;
        flex-basis: 300px !important;
    }
    .header-bottom .main-menu ul > li > a {
        padding: 0 16px !important;
        font-size: 13px !important;
    }
}


/* Currency switcher entries are buttons (actions), not links: style them like the old anchors */
.currency-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: #252525;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    padding: 5px 0 3px;
    text-transform: uppercase;
}
.currency-option:hover,
.currency-option:focus {
    color: #7f0517;
    outline: none;
}
.mobile-menu li ul li .currency-option {
    font-size: 14px;
    padding: 10px 15px 8px;
    color: inherit;
}

/* Action controls are <button>s now (Add to Cart, Quick View, search, menu): inherit the link look */
button.btn-card-addcart,
button.btn-card-quickview,
button.mobile-search-trigger {
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
button.mobile-search-trigger {
    padding: 0 !important;
}
button.remove_from_cart {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

/* ==========================================================================
   Mobile off-canvas menu hierarchy: top links > main categories > sub-categories
   ========================================================================== */
.mobile-menu > li {
    border-bottom: 1px solid #eef0f3;
}
.mobile-menu > li > a {
    display: block;
    width: calc(100% - 48px);
    padding: 13px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}
.mobile-menu .menu-item-has-children .menu-expand {
    top: 0;
    left: auto;
    right: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.mobile-menu .menu-item-has-children .menu-expand i {
    width: 9px;
    height: 9px;
    margin: -4px 0 0;
    border: 0;
    border-right: 2px solid #7f0517;
    border-bottom: 2px solid #7f0517;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}
.mobile-menu .menu-item-has-children .menu-expand i:before {
    display: none;
}
.mobile-menu .menu-item-has-children.active > .menu-expand i {
    transform: rotate(-135deg);
    margin-top: 4px;
}
/* Products > main categories */
.mobile-menu .menu-item-has-children .dropdown {
    height: auto;
    max-height: none;
    overflow: visible;
    background: #faf7f0;
    border-left: 3px solid #FEAF16;
    margin: 0 0 10px;
    padding: 4px 0;
}
.mobile-menu > li > ul.dropdown > li {
    position: relative;
    border-bottom: 1px solid #f0e8d5;
}
.mobile-menu > li > ul.dropdown > li:last-child {
    border-bottom: 0;
}
.mobile-menu > li > ul.dropdown > li > a {
    display: block;
    width: calc(100% - 48px);
    padding: 11px 12px 11px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #3b0208;
    text-transform: none;
}
.mobile-menu > li > ul.dropdown > li.active > a {
    color: #7f0517;
    background: #f3e6c4;
}
.mobile-menu > li > ul.dropdown > li > .menu-expand {
    height: 42px;
    width: 42px;
    line-height: 42px;
}
/* sub-categories (filled from the desktop menu on first tap) */
.mobile-menu ul.mobile-subcats {
    background: #ffffff;
    border-left: 3px solid #e8d5a3;
    margin: 0;
    padding: 4px 0;
}
.mobile-menu ul.mobile-subcats li a {
    display: block;
    position: relative;
    padding: 9px 12px 9px 32px;
    font-size: 13.5px;
    font-weight: 400;
    color: #475569;
    text-transform: none;
}
.mobile-menu ul.mobile-subcats li a:before {
    content: "";
    position: absolute;
    left: 17px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FEAF16;
    transform: translateY(-50%);
}
.mobile-menu ul.mobile-subcats li a:hover {
    color: #7f0517;
}
/* account / currency block below the menu */
.mobile-menu li ul li .currency-option {
    padding-left: 14px;
}

/* Real min/max price range banner on category & sub-category listing pages */
.price-range-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #eaf3ee;
    border: 1px solid #cfe6d8;
    border-radius: 10px;
    padding: 12px 18px;
    margin: 0 0 18px;
}
.price-range-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3f7d5c;
}
.price-range-value {
    font-size: 19px;
    font-weight: 700;
    color: #1e293b;
}
.price-range-meta {
    font-size: 12.5px;
    color: #64748b;
}
.price-range-meta a {
    color: #7f0517;
    font-weight: 700;
    text-decoration: none;
}
.price-range-meta a:hover {
    text-decoration: underline;
}

/* Buttons, Shopify-style: solid black primary, white outlined secondary, same shape on cards and product page */
.btn-card-addcart,
button.single_add_to_cart_button {
    background: #111111 !important;
    border: 1px solid #111111 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: .2px !important;
    font-weight: 700 !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
.btn-card-addcart i,
button.single_add_to_cart_button i { color: #ffffff !important; }
.btn-card-addcart:hover,
button.single_add_to_cart_button:hover {
    background: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}
.btn-card-quickview {
    background: #ffffff !important;
    border: 1px solid #111111 !important;
    color: #111111 !important;
    border-radius: 0 !important;
    text-transform: none !important;
    letter-spacing: .2px !important;
    font-weight: 700 !important;
}
.btn-card-quickview:hover {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}
a.btn-wholesale-inquiry { border-radius: 0 !important; text-transform: none !important; box-shadow: none !important; }
a.btn-wholesale-inquiry:hover { transform: none !important; }

/* ===== Product cards: clean, simple look (square, black/white, light spec rows) ===== */
body .single_product { border-radius: 0 !important; }
body .single_product .product-name a { color: #111111 !important; font-weight: 600 !important; }

/* "Login for price": small square outline button (fills black on hover) */
body .single_product .product-price { margin: 6px 0 10px !important; min-height: 0 !important; }
body .product-price a.login-price-link,
body a.login-price-link.badge-lock,
body .price-box a.login-price-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: #ffffff !important;
    border: 1px solid #111111 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    color: #111111 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    transform: none !important;
    transition: background .2s ease, color .2s ease !important;
}
body .product-price a.login-price-link i,
body .price-box a.login-price-link i { color: inherit !important; font-size: 11px !important; margin: 0 !important; }
body .product-price a.login-price-link:hover,
body .price-box a.login-price-link:hover { background: #111111 !important; color: #ffffff !important; box-shadow: none !important; transform: none !important; }
body .price-box a.login-price-link { font-size: 13px !important; padding: 10px 22px !important; }

/* Spec rows: no grey stripes, thin dividers, grey label, dark value */
body .single_product .product-detail-list { padding: 0 !important; margin: 0 0 10px !important; }
body .single_product .product-detail-list ul { max-width: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid #eeeeee; }
body .single_product .product-detail-list ul li {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background: transparent !important;
    padding: 5px 2px !important;
    min-height: 0 !important;
    line-height: 1.35 !important;
    border-bottom: 1px solid #eeeeee;
}
body .single_product .product-detail-list ul li .list-label {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    color: #777777 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}
body .single_product .product-detail-list ul li .list-label:after { display: none !important; }
body .single_product .product-detail-list ul li .list-value {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: normal !important;
    word-break: normal !important;
}
/* Item code: one line next to its label (long codes like P-Selenite-037 fit) */
body .single_product .product-detail-list ul li.is-code .list-value { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; letter-spacing: 0 !important; font-size: 12.5px !important; }

/* Product page: square, clean boxes to match the square buttons */
body .spec-card-item,
body .spec-card-icon,
body .product-short-desc-box,
body .cart-quantity-button,
body .product-details-view-content .cart-quantity,
body .product_quantity .quantity-box { border-radius: 0 !important; }
body .spec-card-item.spec-card-full { background: #ffffff !important; border-color: #eeeeee !important; }

/* AJAX form messages inside the form (login, register, contact ...) instead of pop-up toasts */
.form-inline-alert {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 14px;
    padding: 11px 14px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}
.form-inline-alert[style*="block"] { display: flex !important; }
.form-inline-alert i { margin-top: 2px; font-size: 16px; }
.form-inline-alert.is-error { background: #fdecec; border-color: #f5c2c2; color: #9f1d1d; }
.form-inline-alert.is-success { background: #e8f7ec; border-color: #bfe6cb; color: #14632f; }
form [type="submit"].is-busy { opacity: .7; cursor: wait; }

/* Mobile breadcrumb: full category names, wrapping onto a 2nd line (no "..." cut-offs, no sideways scroll) */
@media (max-width: 767px) {
    body .breadcrumb-area .breadcrumb-list {
        flex-wrap: wrap !important;
        overflow: visible !important;
        white-space: normal !important;
        row-gap: 4px;
        line-height: 1.35;
        padding-bottom: 0 !important;
    }
    body .breadcrumb-area .breadcrumb-item {
        flex-shrink: 1 !important;
        font-size: 12.5px !important;
        white-space: normal !important;
        max-width: none !important;
    }
    body .breadcrumb-area .breadcrumb-item a,
    body .breadcrumb-area .breadcrumb-item.active {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        display: inline !important;
    }
    /* Product name (last item) on its own line, up to 2 lines */
    body .breadcrumb-area .breadcrumb-item.active {
        flex-basis: 100%;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        font-weight: 600;
        color: #111 !important;
    }
    body .breadcrumb-area .breadcrumb-item.active::before { display: none !important; }
}

/* "Login for price" everywhere (cards, cart, mini cart, quick view, product page): one small square outline button */
body a.login-price-link,
body .login-price-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 5px 12px !important;
    margin: 4px 0 0 !important;
    color: #111111 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
}
body a.login-price-link i, body .login-price-link i { color: inherit !important; font-size: 10.5px !important; margin: 0 !important; }
body a.login-price-link:hover { background: #111111 !important; color: #ffffff !important; }
body .price-box a.login-price-link { font-size: 13px !important; padding: 9px 20px !important; }

/* Cart quantity: wider box so 3-4 digit quantities fit, square buttons */
div:has(> .cart-qty-input) {
    border-radius: 0 !important;
    border-color: #111111 !important;
    height: 38px !important;
}
body .cart-qty-input {
    width: 64px !important;
    min-width: 64px !important;
    font-size: 15px !important;
}
div:has(> .cart-qty-input) .btn-qty-minus,
div:has(> .cart-qty-input) .btn-qty-plus {
    width: 36px !important;
    height: 100% !important;
    padding: 0 !important;
    font-size: 18px !important;
    color: #111111 !important;
    background: #f5f5f5 !important;
}
div:has(> .cart-qty-input) .btn-qty-minus:hover,
div:has(> .cart-qty-input) .btn-qty-plus:hover { background: #111111 !important; color: #ffffff !important; }
body div:has(> .cart-qty-input) .cart-qty-input {
    border: 0 !important;
    border-left: 1px solid #e5e5e5 !important;
    border-right: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    height: 100% !important;
}

/* ===== Cart page: clean, compact, square (mobile + desktop) ===== */
.agx-cart .rounded-3, .agx-cart .rounded-2, .agx-cart .rounded-pill, .agx-cart .card { border-radius: 0 !important; }
.agx-cart .shadow-sm { box-shadow: none !important; }
.agx-cart .card, .agx-cart .border { border-color: #e7e7e7 !important; }
/* Item cards (mobile) */
.agx-cart .cms-cart-mobile-cards .card { margin-bottom: 10px !important; }
.agx-cart .cms-cart-mobile-cards .card-header { background: #fafafa !important; padding: 8px 12px !important; }
.agx-cart .cms-cart-mobile-cards .card-body { padding: 12px !important; }
.agx-cart .cms-cart-mobile-cards .card-body img { width: 64px !important; height: 64px !important; border-radius: 0 !important; }
.agx-cart .cms-cart-mobile-cards .card-body a.fw-bold { font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; }
.agx-cart .cms-cart-mobile-cards .card-body .login-price-link { margin-top: 6px !important; }
/* Buttons: black primary, white outlined secondary, red outlined delete */
.agx-cart .btn-outline-dark { background: #fff !important; color: #111 !important; border: 1px solid #111 !important; font-size: 13.5px !important; font-weight: 700 !important; padding: 9px 16px !important; }
.agx-cart .btn-outline-dark:hover { background: #111 !important; color: #fff !important; }
.agx-cart .btn-outline-danger { font-size: 12.5px !important; padding: 5px 12px !important; }
.agx-cart .btn-dark { background: #111 !important; border-color: #111 !important; }
/* Order summary */
.agx-cart h5.fw-extrabold { font-size: 17px !important; font-weight: 700 !important; }
.agx-cart .agx-cart-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; padding: 14px 0; margin: 14px 0 16px; }
.agx-cart .agx-cart-total-label { display: block; font-size: 15px; font-weight: 700; color: #111; }
.agx-cart .agx-cart-total small { display: block; font-size: 12px; color: #888; margin-top: 2px; }
.agx-cart .agx-cart-total-value { text-align: right; }
.agx-cart .agx-cart-total-value strong { font-size: 22px; font-weight: 800; color: #111; white-space: nowrap; }
.agx-cart .agx-cart-total-value .login-price-link { margin: 0 !important; }
.agx-cart a#checkout_btn.agx-btn-primary {
    display: flex !important; align-items: center; justify-content: center; gap: 10px;
    background: #111 !important; color: #fff !important; border: 1px solid #111 !important; border-radius: 0 !important;
    padding: 13px 18px !important; font-size: 15px !important; font-weight: 700 !important; box-shadow: none !important; transform: none !important;
}
.agx-cart a#checkout_btn.agx-btn-primary:not(.disabled):hover { background: #333 !important; }
.agx-cart .badge.rounded-pill { border-radius: 0 !important; font-size: 11.5px !important; }
@media (max-width: 767px) {
    .agx-cart .p-4 { padding: 16px !important; }
    .agx-cart h5.fw-extrabold { font-size: 16px !important; }
    .agx-cart .agx-cart-total-value strong { font-size: 19px; }
}

/* "Login for price": simple small text link everywhere (no button look). Tap = login popup. */
html body a.login-price-link,
html body .login-price-link,
html body .product-price a.login-price-link,
html body .product-price .login-price-link.badge-lock,
html body .price-box a.login-price-link,
html body .agx-cart .login-price-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 100% !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 2px 0 !important;
    color: #7f0517 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
}
html body a.login-price-link i,
html body .login-price-link i { color: inherit !important; font-size: 11px !important; margin: 0 !important; }
html body a.login-price-link:hover { background: none !important; color: #111111 !important; text-decoration: underline !important; }
html body .price-box a.login-price-link { font-size: 14px !important; }

/* Phones with 2 cards per row: "Item Code" label left, code right on one line */
@media (max-width: 575px) {
    html body .single_product .product-detail-list ul li.is-code { flex-direction: row !important; justify-content: space-between !important; }
    html body .single_product .product-detail-list ul li.is-code .list-label { display: block !important; flex: 0 0 auto; }
    html body .single_product .product-detail-list ul li.is-code .list-value { width: auto !important; flex: 1 1 auto; min-width: 0; text-align: right !important; font-size: 12.5px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
}

/* ===== Buttons site-wide: square corners (no pills), black primary ===== */
html body .btn.rounded-pill, html body a.btn.rounded-pill, html body button.rounded-pill { border-radius: 0 !important; }
html body .btn-dark { background: #111111 !important; border-color: #111111 !important; box-shadow: none !important; }
html body .btn-dark:hover { background: #333333 !important; border-color: #333333 !important; }
html body .btn-outline-dark { border-color: #111111 !important; color: #111111 !important; }
html body .btn-outline-dark:hover { background: #111111 !important; color: #ffffff !important; }

/* Cart (phone): subtotal amount on one line */
html body .agx-cart [id^="line_subtotal_mob_"] { white-space: nowrap !important; display: block; font-size: 15px !important; }

/* ===== Login + Register pages: calmer sizes, square ===== */
html body .login-main-title { font-size: 1.75rem !important; }
html body .login-sub-title { font-size: 0.95rem !important; }
html body .login-badge { border-radius: 0 !important; font-size: 0.72rem !important; padding: 4px 12px !important; }
html body .login-card, html body .login-info-card { border-radius: 0 !important; box-shadow: none !important; border: 1px solid #e5e5e5 !important; }
html body .modern-login-input { border-radius: 0 !important; padding: 9px 14px !important; font-size: 0.92rem !important; }
html body .modern-submit-btn {
    background: #111111 !important; border-radius: 0 !important; box-shadow: none !important;
    font-size: 0.95rem !important; padding-top: 11px !important; padding-bottom: 11px !important; letter-spacing: .3px !important;
    transform: none !important;
}
html body .modern-submit-btn:hover { background: #333333 !important; transform: none !important; }
html body .benefit-bullet-icon { border-radius: 0 !important; }
@media (max-width: 767px) {
    html body .login-main-title { font-size: 1.4rem !important; }
    html body .login-card, html body .login-info-card { padding: 18px !important; }
}
/* Register page: same calmer, square style */
html body .reg-main-title { font-size: 1.75rem !important; }
html body .registration-card, html body .benefit-card, html body .trust-card, html body .assistance-card { border-radius: 0 !important; box-shadow: none !important; }
html body .modern-input, html body .custom-select-wrapper select { border-radius: 0 !important; height: 44px !important; background-color: #ffffff !important; border-width: 1px !important; }
html body .captcha-badge { border-radius: 0 !important; }
@media (max-width: 767px) { html body .reg-main-title { font-size: 1.4rem !important; } }
html body .reg-badge { border-radius: 0 !important; font-size: 0.72rem !important; padding: 4px 12px !important; }

/* Login popup / login page on phones: 16px fields so iPhone does not zoom in */
@media (max-width: 991.98px) {
    .admincmnform input.form-control, .admincmnform .modern-login-input, .login-code-input { font-size: 16px !important; min-height: 46px; }
}

/* Notifications (toastr): modern square white card with a colour bar and icon, never behind the phone bottom bar */
html body #toast-container { pointer-events: none; }
html body #toast-container.toast-bottom-right { right: 16px; bottom: 16px; }
html body #toast-container > div {
    width: 340px; max-width: calc(100vw - 24px); margin: 0 0 10px; padding: 14px 18px 14px 58px;
    background-color: #fff !important; background-image: none !important; color: #111; opacity: 1; filter: none;
    border: 1px solid #e5e5e5; border-left: 4px solid #111; border-radius: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.14); pointer-events: auto; font-size: 14px; line-height: 1.35;
}
html body #toast-container > div:hover { box-shadow: 0 12px 34px rgba(0,0,0,.2); opacity: 1; }
html body #toast-container > div::before {
    content: "\2713"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%;
    background: #111; color: #fff; font-size: 16px; font-weight: 700;
}
html body #toast-container > .toast-success { border-left-color: #1a7f37; }
html body #toast-container > .toast-success::before { background: #1a7f37; }
html body #toast-container > .toast-error { border-left-color: #c62828; }
html body #toast-container > .toast-error::before { content: "!"; background: #c62828; }
html body #toast-container > .toast-warning { border-left-color: #e08a00; }
html body #toast-container > .toast-warning::before { content: "!"; background: #e08a00; }
html body #toast-container > .toast-info { border-left-color: #1565c0; }
html body #toast-container > .toast-info::before { content: "i"; background: #1565c0; }
html body #toast-container .toast-title { font-weight: 700; color: #111; }
html body #toast-container .toast-message { color: #444; word-wrap: break-word; }
@media (max-width: 991.98px) {
    /* phones: top of the screen, the bottom bar stays free */
    html body #toast-container.toast-bottom-right { top: 12px; bottom: auto; right: 12px; left: 12px; }
    html body #toast-container > div { width: 100%; max-width: none; }
}

/* Home on phones/small tablets: the five trust cards (money back, fast dispatch, shipping, support, discount) in a grid,
   all visible at once (no sideways scrolling, no cut-off card). 576-767 px: 3 + 2 cards; up to 575 px: 2 per row, the
   fifth card full width, each card icon left + text right so long translations (Spanish, German) fit. */
@media (max-width: 767.98px) {
    html body section.cms-support { padding: 14px 0 6px !important; }
    html body section.cms-support .row { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0 !important; overflow: visible !important; }
    html body section.cms-support .col-md-4 { grid-column: span 2; flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    html body section.cms-support .col-md-4:nth-child(n+4) { grid-column: span 3; }
    html body section.cms-support .support-box { display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 8px !important; min-height: 0 !important; height: 100% !important; border-radius: 0 !important; box-shadow: none !important; border: 1px solid #e8e2dc !important; background: #fff !important; transform: none !important; }
    html body section.cms-support .support-box .icon { margin: 0 0 6px !important; height: auto !important; flex: 0 0 auto; }
    html body section.cms-support .support-box .icon svg { width: 30px !important; height: 27px !important; }
    html body section.cms-support .support-box p { font-size: 12px !important; line-height: 1.3 !important; margin: 0 !important; overflow-wrap: anywhere; }
}
@media (max-width: 575.98px) {
    html body section.cms-support .row { grid-template-columns: repeat(2, 1fr); }
    html body section.cms-support .col-md-4,
    html body section.cms-support .col-md-4:nth-child(n+4) { grid-column: span 1; }
    html body section.cms-support .col-md-4:nth-child(5) { grid-column: 1 / -1; }
    html body section.cms-support .support-box { flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; padding: 10px 12px !important; min-height: 58px !important; }
    html body section.cms-support .support-box .icon { margin: 0 !important; width: 32px; display: flex; justify-content: center; }
}

/* Home on phones: one banner (image with the title on it), compact tabs, smaller cards */
@media (max-width: 767.98px) {
    html body section.cms-banner { padding: 10px 0 8px !important; }
    html body section.cms-banner .item .row { position: relative; margin: 0; }
    html body section.cms-banner .item .row > div { padding: 0; }
    html body section.cms-banner .item .banner-img { margin: 0; }
    html body section.cms-banner .item .banner-img img { width: 100%; height: 340px; object-fit: contain; object-position: center top; background: #f7f3ee; display: block; }
    html body section.cms-banner .item .row > div:first-child { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
    html body section.cms-banner .banner-txt { margin: 0 !important; padding: 12px 14px 14px !important; background: rgba(255,255,255,.93) !important; border-radius: 0 !important; box-shadow: none !important; }
    html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2, html body section.cms-banner .banner-txt h3 { font-size: 17px !important; line-height: 1.25 !important; margin: 0 0 8px !important; }
    html body section.cms-banner .banner-txt h2 span { display: none; }
    html body section.cms-banner .banner-txt p { display: none !important; }
    html body section.cms-banner .banner-txt .btn-box { margin: 0 !important; }
    html body section.cms-banner .banner-txt .btn-box a { padding: 8px 20px !important; font-size: 12px !important; border-radius: 0 !important; box-shadow: none !important; }

    /* TOP PRODUCTS tabs: one small row instead of three big pills */
    html body section.cms-single-product { padding: 22px 0 10px !important; }
    html body section.cms-single-product .section-header { margin-bottom: 14px !important; }
    html body section.cms-single-product .section-header .title { font-size: 22px !important; }
    html body .single-product-tab .nav-tabs { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; border: 0; margin: 0 0 14px !important; overflow-x: auto; scrollbar-width: none; }
    html body .single-product-tab .nav-tabs li { margin: 0 !important; flex: 0 0 auto; }
    html body .single-product-tab .nav-tabs li a { display: block; padding: 7px 12px !important; font-size: 12px !important; font-weight: 700; line-height: 1.2; text-transform: uppercase; border: 1px solid #ddd !important; border-radius: 0 !important; background: #fff !important; color: #111 !important; box-shadow: none !important; margin: 0 !important; white-space: nowrap; }
    html body .single-product-tab .nav-tabs li a.active { background: #111 !important; color: #fff !important; border-color: #111 !important; }
    html body section.cms-single-product .black-btn, html body section.cms-recommended .black-btn { padding: 9px 18px !important; font-size: 12px !important; border-radius: 0 !important; }

    /* other home blocks */
    html body section.cms-static-area, html body section.cms-about, html body section.cms-category, html body section.cms-home-about, html body section.cms-recommended { padding: 22px 0 !important; }
    html body section.cms-special { padding: 28px 0 !important; }
    html body section.cms-static-area .single-static, html body .home-about-card { padding: 14px !important; border-radius: 0 !important; box-shadow: none !important; }
    html body section.cms-about .about-img img { max-height: 260px; width: auto; max-width: 100%; margin: 0 auto; display: block; }
    html body section.cms-special .section-header h2 { font-size: 20px !important; line-height: 1.25 !important; }
    html body section.cms-special .section-header p { font-size: 13px !important; }
    html body section.cms-home-about .home-about-card { font-size: 13.5px; line-height: 1.5; }
}
@media (max-width: 767.98px) {
    html body section.cms-static-area .single-static .icon img { width: 100%; height: 190px !important; max-height: 190px !important; object-fit: cover !important; }
    html body section.cms-static-area .single-static { margin-bottom: 12px; }
    html body section.cms-about .about-img img { max-height: 200px !important; }
    html body section.cms-about, html body section.cms-home-about { padding: 16px 0 !important; }
}

/* All buttons square (site-wide) */
html body .btn, html body button.btn, html body a.btn, html body input[type=submit], html body input[type=button],
html body .light-btn, html body .black-btn, html body .dark-btn, html body .btn-mobile-primary, html body .btn-mobile-dark,
html body .rounded-pill, html body .btn.rounded-pill, html body .btn-rounded { border-radius: 0 !important; }
html body .nav-tabs .nav-link, html body .single-product-tab .nav-tabs li a, html body .custom-tab .nav-tabs li a { border-radius: 0 !important; }

/* short phone screens (landscape, small phones): keep the WhatsApp button low, clear of the slider arrows and buttons */
@media (max-width: 768px) and (max-height: 700px) {
    .whatsapp-container { bottom: 64px; }
}

/* Short breadcrumbs (Home > Page, e.g. Login): one line "Home / Page", not the page name alone on a 2nd line */
@media (max-width: 767px) {
    body .breadcrumb-area .breadcrumb-list li.breadcrumb-item.active:nth-child(2) {
        display: inline !important;
        flex-basis: auto;
        -webkit-line-clamp: unset;
    }
    body .breadcrumb-area .breadcrumb-list li.breadcrumb-item.active:nth-child(2)::before {
        display: inline-block !important;
    }
}

/* Phones: card buttons with longer texts (German "In den Warenkorb", "Schnellansicht") wrap on two lines instead of being cut off */
@media (max-width: 575.98px) {
    body .product-card-actions .btn-card-addcart,
    body .product-card-actions .btn-card-quickview {
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.15 !important;
        min-height: 36px !important;
        overflow: hidden;
        text-overflow: clip !important;
        word-break: normal;
        hyphens: auto;
    }
    body .product-card-actions .btn-card-addcart i,
    body .product-card-actions .btn-card-quickview i { display: none !important; }
    body .product-card-actions .btn-card-quickview .btn-text-extra { display: inline !important; }
    body .product-card-actions .btn-text { white-space: normal !important; }
}

/* Phones: logo a little higher in the header bar */
@media (max-width: 767.98px) {
    .header-bottom .logo img { position: relative; top: -4px; }
}

/* Phones: breadcrumb - roomy bar, line height high enough that letters (g, y, p) are not clipped by the 2-line clamp */
@media (max-width: 767.98px) {
    html body .breadcrumb-area { padding: 14px 0 !important; margin-bottom: 10px !important; }
    html body .breadcrumb-area .breadcrumb-list { padding: 0 !important; margin: 0 !important; line-height: 1.7 !important; row-gap: 2px !important; align-items: center !important; }
    html body .breadcrumb-area .breadcrumb-item { font-size: 14px !important; line-height: 1.7 !important; padding: 0 !important; }
    html body .breadcrumb-area .breadcrumb-item.active { padding-bottom: 3px !important; line-height: 1.7 !important; }
    html body .breadcrumb-area .breadcrumb-item + .breadcrumb-item::before { padding: 0 8px !important; }
}

/* Phones: logo bigger (it was only 32 px high); the file is 372x105, so 48 px high (about 170 px wide) is still sharp.
   Width is limited so the search / cart / menu buttons on the right always keep their room (also on 320 px phones). */
@media (max-width: 767.98px) {
    /* the header row is two 50% columns (logo | buttons): the logo column now takes all the room the buttons leave, and the logo shrinks to it */
    html body .header-bottom .header-mobile-logo { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
    html body .header-bottom .header-mobile-actions { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
    /* no extra 15 px column padding: the logo starts at the page edge and keeps its room (it was only 92 px wide at 320 px) */
    html body .header-bottom .header-mobile-logo { padding-left: 0 !important; padding-right: 8px !important; }
    html body .header-bottom .logo { max-width: 100%; }
    html body .header-bottom .logo img { max-height: 48px !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain; top: 0; }
    html body .header-bottom > .container > .header-nav-row { min-height: 62px !important; }
}

/* Phones, 2 cards per row: show the "Item Code" label again (label left, code right on one line) */
@media (max-width: 767.98px) {
    html body .product-detail-list ul li.is-code { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; }
    html body .product-detail-list ul li.is-code .list-label { display: block !important; flex: 0 0 auto; }
    html body .product-detail-list ul li.is-code .list-value { width: auto !important; min-width: 0; flex: 1 1 auto; text-align: right !important; }
}

/* Home on phones: the three product tabs (new / special / best selling) as three equal columns with wrapping text.
   A centered, scrolling strip pushed the first tab off the left edge on 390 px phones (Spanish and German labels are long). */
@media (max-width: 575.98px) {
    html body .single-product-tab .nav-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow: visible !important; justify-content: stretch !important; }
    html body .single-product-tab .nav-tabs li { flex: none !important; min-width: 0; }
    html body .single-product-tab .nav-tabs li a { display: flex !important; align-items: center; justify-content: center; height: 100%; min-height: 40px; padding: 6px 4px !important; font-size: 11px !important; line-height: 1.2 !important; white-space: normal !important; text-align: center; overflow-wrap: anywhere; }
}

/* top bar tagline (laptops): longer keyword text is cut with "..." instead of running into the language switch */
@media (min-width: 992px) {
    html body .header-top-left { min-width: 0; overflow: hidden; }
    html body .header-top-tagline { display: block; overflow: hidden; text-overflow: ellipsis; }
}

/* Translated sites (es / de / fr ...): the main menu labels are longer than the English ones (Spanish "POLITICA DE PRIVACIDAD" etc.)
   and pushed the page sideways on laptops (menu 1455 px wide on a 1280 px screen). English keeps its own rules above.
   1200-1599 px: items size to their text, font/padding follow the screen width. 992-1199 px: the menu may wrap to two rows. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    html:not([lang="en"]) body .header-bottom .main-menu ul > li { flex: 0 1 auto !important; }
    html:not([lang="en"]) body .header-bottom .main-menu ul > li > a { font-size: clamp(10.5px, 0.86vw, 13px) !important; letter-spacing: 0 !important; padding: 0 clamp(5px, 0.5vw, 10px) !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    html:not([lang="en"]) body .header-bottom .main-menu ul { flex-wrap: wrap !important; height: auto !important; row-gap: 0; }
    html:not([lang="en"]) body .header-bottom .main-menu ul > li { flex: 1 1 auto !important; }
    html:not([lang="en"]) body .header-bottom .main-menu ul > li > a { height: 44px !important; font-size: 11px !important; letter-spacing: 0 !important; padding: 0 8px !important; }
}

/* Phones: text was too small to read comfortably (card buttons 9.3 px, bottom menu labels 10.4 px): at least 11 px */
@media (max-width: 767.98px) {
    html body .btn-card-addcart, html body .btn-card-quickview { font-size: 11px !important; padding: 7px 3px !important; line-height: 1.15 !important; }
    html body .btn-card-addcart i, html body .btn-card-quickview i { font-size: 12px !important; }
    html body .mobile-nav-item { font-size: 11px !important; }
}

/* Product cards (lists, related products): the price / "$ Login" was only 12.5 px, now bigger so it stands out */
html body .single_product .product-price a.login-price-link,
html body .product-info .product-price a.login-price-link { font-size: 17px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 4px 0 !important; }
html body .single_product .product-price .price-regular,
html body .product-info .product-price .price-regular { font-size: 20px !important; font-weight: 800 !important; line-height: 1.2 !important; color: #7f0517 !important; }
html body .single_product .product-price .price-old,
html body .product-info .product-price .price-old { font-size: 14px !important; margin-right: 6px; }
@media (max-width: 575.98px) {
    html body .single_product .product-price a.login-price-link,
    html body .product-info .product-price a.login-price-link { font-size: 16px !important; }
    html body .single_product .product-price .price-regular,
    html body .product-info .product-price .price-regular { font-size: 18px !important; }
}

/* Product list (grid view), laptops and wide screens: 4 cards per row, not 5. The page sizes 12 / 24 / 36 / 72 / 100 divide by 4
   (5 per row left single cards on the last row), and the 4 cards are wider, so names and buttons are easier to read.
   992-1199 px keeps 3 per row, up to 767 px 2 per row (rules in responsive.css). */
@media (min-width: 1200px) {
    html body .shop-product-wrap.grid-view > .product-col.col-20 { flex: 0 0 25% !important; max-width: 25% !important; }
}
/* very wide screens: the list uses 1320 px instead of 1140 px (browsers without :has() simply keep 1140 px) */
@media (min-width: 1400px) {
    html body .shop-page .container:has(.shop-product-wrap) { max-width: 1320px; }
}

/* Extra cards that complete the last row of a list (shown by the script in products/ajax/list.php when the screen needs them) */
html body .shop-product-wrap.grid-view > .product-col.agate-filler { display: none !important; }
html body .shop-product-wrap.grid-view > .product-col.agate-filler.is-on { display: block !important; }

/* Phones: tidy floating buttons (2026-10-06). One column on the right above the bottom bar, evenly spaced:
   Chat (Zendesk pill, offset set in seo_defer_live_chat) -> WhatsApp (round 40px, no x) -> back to top (36px). */
@media (max-width: 768px) {
    .whatsapp-container {
        right: 14px;
        left: auto;
        bottom: 132px;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    .whatsapp-container .whatsapp-floating-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
    .whatsapp-container .whatsapp-floating-link i { font-size: 22px; margin: 0; }
    .whatsapp-container .whatsapp-divider,
    .whatsapp-container .whatsapp-close-btn { display: none !important; }
    html body a#button,
    html body #button {
        right: 18px !important;
        bottom: 182px !important;
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
    }
    html body a#button::after { font-size: 16px !important; line-height: 36px !important; }
}

/* Phones and tablets (< 992 px, where the bottom menu bar is shown): WhatsApp and live chat are icons in the
   bottom bar, so the floating WhatsApp button and the chat launcher are hidden. Back-to-top sits above the bar. */
@media (max-width: 991px) {
    .whatsapp-container,
    iframe#launcher { display: none !important; }
    html body a#button,
    html body #button { bottom: 78px !important; right: 14px !important; }

    .mobile-sticky-bottom-nav .mobile-nav-wa i { color: #25D366; }
}


/* English top menu on small laptops / tablets in landscape: the nine menu items were wider than the screen between 992 and 1279 px
   (sideways scroll of 3 px at 1024 and 27 px at 1200). Tighter spacing in that range only; /de /es /fr have their own rules. */
@media (min-width: 992px) and (max-width: 1099px) {
    html[lang="en"] body .main-navigation > ul > li > a { padding-left: 5px !important; padding-right: 5px !important; font-size: 10.5px !important; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
    html[lang="en"] body .main-navigation > ul > li > a { padding-left: 5px !important; padding-right: 5px !important; font-size: 11px !important; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
    html[lang="en"] body .main-navigation > ul > li > a { padding-left: 8px !important; padding-right: 8px !important; font-size: 12px !important; }
}

/* Phones: the guest "$ Login" link was only 20 px tall: bigger tap area (padding grows the touch target, the look stays the same) */
@media (max-width: 991px) {
    a.login-price-link { display: inline-block; padding: 8px 10px; margin: -8px -10px; }
}

/* Phones (2026-10-27): product card buttons in one tidy row: "Add to Cart" (icon + text) fills the row, Quick View is
   a square eye icon next to it ("Quick / View" used to wrap on two lines and the two buttons had different sizes) */
@media (max-width: 575.98px) {
    html body :is(.product-card-actions, div:has(> .btn-card-quickview)) .btn-card-addcart,
    html body :is(.product-card-actions, div:has(> .btn-card-quickview)) .btn-card-quickview { min-height: 38px !important; height: 38px !important; border-radius: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
    html body :is(.product-card-actions, div:has(> .btn-card-quickview)) .btn-card-addcart { flex: 1 1 auto !important; gap: 5px !important; padding: 0 6px !important; font-size: 11.5px !important; }
    html body :is(.product-card-actions, div:has(> .btn-card-quickview)) .btn-card-addcart i { display: inline-block !important; font-size: 12px !important; }
    html body :is(.product-card-actions, div:has(> .btn-card-quickview)) .btn-card-quickview { flex: 0 0 38px !important; width: 38px !important; padding: 0 !important; }
    html body :is(.product-card-actions, div:has(> .btn-card-quickview)) .btn-card-quickview i { display: inline-block !important; font-size: 14px !important; margin: 0 !important; }
    html body :is(.product-card-actions, div:has(> .btn-card-quickview)) .btn-card-quickview .btn-text { display: none !important; }
}

/* Home (2026-10-27): "how to buy" bar for guests under the slider: register (black) + browse catalog (white outlined) */
.b2b-start-bar { background: #ffffff; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; padding: 14px 0; }
.b2b-start-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.b2b-start-inner p { margin: 0; font-size: 15px; color: #333333; }
.b2b-start-inner p strong { color: #111111; }
.b2b-start-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.b2b-start-btns a { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1px solid #111111; border-radius: 0; text-decoration: none !important; white-space: nowrap; }
.b2b-start-primary { background: #111111; color: #ffffff !important; }
.b2b-start-primary:hover { background: #333333; }
.b2b-start-secondary { background: #ffffff; color: #111111 !important; }
.b2b-start-secondary:hover { background: #111111; color: #ffffff !important; }
@media (max-width: 767.98px) {
    .b2b-start-bar { padding: 12px 0; }
    .b2b-start-inner { gap: 10px; }
    .b2b-start-inner p { font-size: 13.5px; text-align: center; width: 100%; }
    .b2b-start-btns { width: 100%; }
    .b2b-start-btns a { flex: 1 1 0; padding: 0 8px; font-size: 11.5px; height: 40px; }
}

/* Calmer colours (2026-10-27): "ALL PRODUCTS" no longer bright yellow (dark maroon with white text), slider
   headings dark instead of maroon so the maroon stays for the menu bar, prices and accents */
html body .categories_menu .categories_title { background: #5a0010 !important; color: #ffffff !important; }
html body .categories_menu .categories_title * { color: #ffffff !important; }
html body section.cms-banner h1, html body section.cms-banner h2 { color: #1a1a1a !important; }

/* Phones: sub-category tiles on category pages 2 per row and shorter (one tile per screen before) */
@media (max-width: 575.98px) {
    html body .product-col:has(> .category-box) { flex: 0 0 50% !important; max-width: 50% !important; padding-left: 6px !important; padding-right: 6px !important; }
    html body .category-box { padding: 8px !important; margin-bottom: 12px !important; }
    html body .category-box img { max-height: 120px !important; object-fit: contain; }
    html body .category-box h4, html body .category-box h4 a { font-size: 13px !important; line-height: 1.3 !important; margin: 6px 0 0 !important; }
}

/* Home B2B sections (2026-10-28, preview ?home=new): categories grid, why buy from us, how ordering works.
   Square, white cards, black text, maroon only for small accents. */
.hb-section { padding: 40px 0; background: #ffffff; border-bottom: 1px solid #eeeeee; }
.hb-why { background: #faf8f5; }
.hb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.hb-head h2 { margin: 0; font-size: 26px; font-weight: 800; color: #111111; letter-spacing: .01em; }
.hb-link { font-size: 14px; font-weight: 700; color: #111111 !important; text-decoration: none !important; border-bottom: 2px solid #840202; padding-bottom: 2px; white-space: nowrap; }
.hb-head { flex-wrap: wrap; }
.hb-cat-grid, .hb-why-grid, .hb-steps-list { min-width: 0; }
.hb-cat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.hb-cat { min-width: 0; }
.hb-cat-name { overflow-wrap: anywhere; }
.hb-cat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 10px 14px; border: 1px solid #ececec; background: #ffffff; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease; }
.hb-cat:hover { border-color: #111111; box-shadow: 0 6px 16px rgba(0,0,0,.07); }
.hb-cat-img { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #f7f7f7; margin-bottom: 10px; overflow: hidden; }
.hb-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.hb-cat-name { font-size: 14px; font-weight: 700; color: #111111; line-height: 1.3; }
.hb-cat-count { font-size: 12px; color: #6b7280; margin-top: 3px; }
.hb-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hb-why-item { background: #ffffff; border: 1px solid #ececec; padding: 20px 20px 18px; }
.hb-why-item i { font-size: 22px; color: #840202; margin-bottom: 10px; display: block; }
.hb-why-item h3 { font-size: 17px; font-weight: 800; color: #111111; margin: 0 0 6px; }
.hb-why-item p { font-size: 14.5px; line-height: 1.6; color: #4b5563; margin: 0; }
.hb-steps-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: none; }
.hb-steps-list li { border: 1px solid #ececec; padding: 18px 18px 16px; position: relative; background: #ffffff; }
.hb-step-no { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; background: #111111; color: #ffffff; font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.hb-steps-list h3 { font-size: 16px; font-weight: 800; color: #111111; margin: 0 0 5px; }
.hb-steps-list p { font-size: 14px; line-height: 1.55; color: #4b5563; margin: 0; }
.hb-steps-cta { display: flex; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.hb-steps-cta a { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1px solid #111111; text-decoration: none !important; }
@media (max-width: 1199.98px) { .hb-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px) {
    .hb-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hb-why-grid { grid-template-columns: repeat(2, 1fr); }
    .hb-steps-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .hb-section { padding: 26px 0; }
    .hb-head h2 { font-size: 20px; }
    .hb-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hb-cat { padding: 8px 8px 10px; }
    .hb-cat-name { font-size: 13px; }
    .hb-why-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hb-why-item { padding: 14px 12px; }
    .hb-why-item h3 { font-size: 14.5px; }
    .hb-why-item p { font-size: 13px; }
    .hb-steps-list { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hb-steps-list li { padding: 14px 12px; }
    .hb-steps-cta a { flex: 1 1 0; padding: 0 8px; font-size: 11.5px; }
}
@media (max-width: 575.98px) {
    .hb-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hb-cat { padding: 6px 6px 8px; }
    .hb-cat-img { margin-bottom: 6px; }
    .hb-cat-name { font-size: 12px; }
    .hb-cat-count { font-size: 11px; }
}
/* How ordering works: 5 steps (register, approved, order, shipping added, pay & ship) */
.hb-steps-list { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1199.98px) { .hb-steps-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .hb-steps-list { grid-template-columns: 1fr 1fr; } .hb-steps-list li:last-child { grid-column: 1 / -1; } }

/* /custom-packaging page (2026-10-28): square cards, black / white buttons, maroon only as accent */
.cp-hero { background: #faf8f5; padding: 36px 0; border-bottom: 1px solid #eeeeee; }
.cp-hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; }
.cp-hero h1 { font-size: 34px; font-weight: 800; color: #111111; line-height: 1.2; margin: 0 0 14px; }
.cp-hero-text > p { font-size: 16.5px; line-height: 1.7; color: #374151; margin: 0 0 14px; }
.cp-hero-points { list-style: none; padding: 0; margin: 0 0 20px; }
.cp-hero-points li { font-size: 15px; color: #111111; margin-bottom: 6px; }
.cp-hero-points i { color: #840202; margin-right: 8px; }
.cp-hero-img img { width: 100%; height: auto; border: 1px solid #eeeeee; background: #ffffff; }
.cp-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-btns-center { justify-content: center; }
.cp-btns a { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; font-size: 13.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-decoration: none !important; border: 1px solid #111111; }
.cp-btn-primary { background: #111111; color: #ffffff !important; }
.cp-btn-primary:hover { background: #333333; }
.cp-btn-secondary { background: #ffffff; color: #111111 !important; display: inline-flex; align-items: center; height: 46px; padding: 0 22px; font-size: 13.5px; font-weight: 700; text-transform: uppercase; border: 1px solid #111111; text-decoration: none !important; }
.cp-btn-secondary:hover { background: #111111; color: #ffffff !important; }
.cp-section { padding: 40px 0; background: #ffffff; }
.cp-alt { background: #faf8f5; }
.cp-h2 { font-size: 26px; font-weight: 800; color: #111111; margin: 0 0 20px; }
.cp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cp-card { border: 1px solid #ececec; background: #ffffff; padding: 12px 12px 16px; }
.cp-card-img { aspect-ratio: 1 / 1; background: #f6f6f6; margin-bottom: 12px; overflow: hidden; }
.cp-card-img img { width: 100%; height: 100%; object-fit: cover; }
.cp-card h3 { font-size: 16.5px; font-weight: 800; color: #111111; margin: 0 0 6px; }
.cp-card p { font-size: 14px; line-height: 1.6; color: #4b5563; margin: 0; }
.cp-note { font-size: 13px; color: #6b7280; margin: 14px 0 0; }
.cp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cp-steps li { background: #ffffff; border: 1px solid #ececec; padding: 18px; }
.cp-steps span { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; background: #111111; color: #ffffff; font-weight: 800; margin-bottom: 10px; }
.cp-steps h3 { font-size: 16px; font-weight: 800; color: #111111; margin: 0 0 5px; }
.cp-steps p { font-size: 14px; line-height: 1.55; color: #4b5563; margin: 0; }
.cp-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cp-options > div { border-top: 3px solid #840202; padding-top: 12px; }
.cp-options h3 { font-size: 16px; font-weight: 800; color: #111111; margin: 0 0 6px; }
.cp-options p { font-size: 14px; line-height: 1.6; color: #4b5563; margin: 0; }
.cp-designer { margin-top: 26px; padding: 18px 20px; border: 1px solid #ececec; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cp-designer p { margin: 0; font-size: 15px; color: #111111; }
.cp-cta { background: #1a1a1a; color: #ffffff; text-align: center; padding: 44px 0; }
.cp-cta h2 { color: #ffffff; font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.cp-cta p { color: #d1d5db; margin: 0 0 18px; }
.cp-btn-light { background: #ffffff; color: #111111 !important; border-color: #ffffff !important; }
.cp-btn-outline-light { background: transparent; color: #ffffff !important; border-color: #ffffff !important; }
@media (max-width: 991.98px) {
    .cp-hero-inner { grid-template-columns: 1fr; }
    .cp-hero-img { max-width: 420px; }
    .cp-grid, .cp-options { grid-template-columns: repeat(2, 1fr); }
    .cp-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .cp-hero { padding: 22px 0; }
    .cp-hero h1 { font-size: 24px; }
    .cp-hero-text > p { font-size: 15px; }
    .cp-section { padding: 26px 0; }
    .cp-h2 { font-size: 20px; }
    .cp-grid { gap: 10px; }
    .cp-card { padding: 8px 8px 12px; }
    .cp-card h3 { font-size: 14px; }
    .cp-card p { font-size: 12.5px; }
    .cp-steps, .cp-options { grid-template-columns: 1fr; }
    .cp-btns a { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: 12px; }
}
.hb-cp-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.hb-cp-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hb-cp-imgs img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #eeeeee; }
.hb-cp-text h2 { font-size: 26px; font-weight: 800; color: #111111; margin: 0 0 10px; }
.hb-cp-text p { font-size: 15.5px; line-height: 1.65; color: #4b5563; margin: 0 0 16px; }
.hb-cp-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border: 1px solid #111111; text-decoration: none !important; }
@media (max-width: 767.98px) { .hb-cp-inner { grid-template-columns: 1fr; gap: 16px; } .hb-cp-text h2 { font-size: 20px; } .hb-cp-btn { width: 100%; justify-content: center; font-size: 12px; } }
html body .categories_menu .categories_title::before, html body .categories_menu .categories_title::after,
html body .categories_menu .categories_title i, html body .categories_menu .categories_title span { color: #ffffff !important; border-color: #ffffff !important; }
html body .categories_menu .categories_title svg, html body .categories_menu .categories_title svg * { fill: #ffffff !important; stroke: #ffffff !important; }
html body .header-bottom .categori_toggle::before { color: #ffffff !important; }

/* Contact page "made and shipped from Khambhat" band (replaces the map screenshot, 2026-10-28) */
.ctu-visit { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; border: 1px solid #ececec; background: #ffffff; padding: 26px; }
.ctu-visit h2 { font-size: 24px; font-weight: 800; color: #111111; margin: 0 0 10px; }
.ctu-visit p { font-size: 15.5px; line-height: 1.65; color: #4b5563; margin: 0 0 12px; }
.ctu-visit-addr { color: #111111 !important; }
.ctu-visit-addr i { color: #7a0a16; margin-right: 6px; }
.ctu-visit-img img { width: 100%; height: auto; max-height: 360px; object-fit: cover; border: 1px solid #eeeeee; }
@media (max-width: 767.98px) { .ctu-visit { grid-template-columns: 1fr; padding: 16px; gap: 16px; } .ctu-visit h2 { font-size: 19px; } }

/* Product sliders (related products, home product rows, slider): the < > arrows sat on top of the first / last card and
   covered the product name. Give the slider 44 px room on each side and put the arrows there (laptops / tablets). */
@media (min-width: 768px) {
    html body .owl-carousel.related-carousel, html body .owl-carousel.product-carousel, html body #banner-carousel.owl-carousel { padding-left: 46px !important; padding-right: 46px !important; }
    html body .owl-carousel.related-carousel .owl-nav button.owl-prev, html body .owl-carousel.product-carousel .owl-nav button.owl-prev, html body #banner-carousel .owl-nav button.owl-prev { left: 0 !important; }
    html body .owl-carousel.related-carousel .owl-nav button.owl-next, html body .owl-carousel.product-carousel .owl-nav button.owl-next, html body #banner-carousel .owl-nav button.owl-next { right: 0 !important; }
}
/* Home preview: who we supply + quick answers */
.hb-who-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.hb-who-item { border: 1px solid #ececec; background: #ffffff; padding: 18px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hb-who-item i { font-size: 22px; color: #7a0a16; }
.hb-who-item span { font-size: 14px; font-weight: 700; color: #111111; line-height: 1.35; }
.hb-faq { background: #faf8f5; }
.hb-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.hb-faq-list details { background: #ffffff; border: 1px solid #ececec; padding: 0; }
.hb-faq-list summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; font-size: 15px; font-weight: 700; color: #111111; position: relative; }
.hb-faq-list summary::-webkit-details-marker { display: none; }
.hb-faq-list summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: #111111; }
.hb-faq-list details[open] summary::after { content: "\2212"; }
.hb-faq-list details p { margin: 0; padding: 0 16px 14px; font-size: 14.5px; line-height: 1.6; color: #4b5563; }
.hb-faq-list details p a { color: #111111; text-decoration: underline; }
@media (max-width: 1199.98px) { .hb-who-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .hb-faq-list { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .hb-who-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .hb-who-item { padding: 12px 8px; } .hb-who-item span { font-size: 12.5px; } .hb-faq-list summary { font-size: 14px; } }
/* Home preview: popular wholesale searches (keyword links to categories) + retail note in the guest bar */
.hb-popular-intro { font-size: 15px; color: #4b5563; margin: -8px 0 14px; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-chips a { display: inline-block; padding: 8px 14px; border: 1px solid #d9d9d9; background: #ffffff; color: #111111 !important; font-size: 14px; font-weight: 600; text-decoration: none !important; }
.hb-chips a:hover { border-color: #111111; background: #111111; color: #ffffff !important; }
.b2b-retail-note { color: #7a0a16; font-weight: 600; }
@media (max-width: 575.98px) { .hb-chips a { font-size: 12.5px; padding: 7px 10px; } }
/* Wholesale bar under the slider: text left, both buttons on the same line at the right (laptops); stacked on smaller screens */
@media (min-width: 992px) {
    .b2b-start-inner { flex-wrap: nowrap !important; }
    .b2b-start-inner p { flex: 1 1 auto; min-width: 0; }
    .b2b-start-btns { flex: 0 0 auto; flex-wrap: nowrap; }
}
/* Order offers under "Why shops buy" (moved from the old benefit cards) */
.hb-offers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 18px; padding: 14px 16px; background: #ffffff; border: 1px solid #ececec; }
.hb-offers span, .hb-offers a { font-size: 15px; font-weight: 700; color: #111111; }
.hb-offers i { color: #7a0a16; margin-right: 6px; }
.hb-offers a { text-decoration: underline; text-underline-offset: 3px; } .hb-offers a:hover { color: #7a0a16; }
@media (max-width: 575.98px) { .hb-offers { flex-direction: column; align-items: flex-start; gap: 8px; } .hb-offers span, .hb-offers a { font-size: 13.5px; } }
/* Wholesale bar: "A retail shop for single pieces is coming soon." on its own second line */
.b2b-retail-note { display: block; margin-top: 2px; }
/* /custom-packaging: Amazon FBA prep section */
.cp-fba-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; }
.cp-fba-text > p { font-size: 15.5px; line-height: 1.7; color: #374151; margin: 0 0 14px; }
.cp-fba-steps { margin: 0 0 14px; padding-left: 22px; }
.cp-fba-steps li { font-size: 15px; line-height: 1.6; color: #374151; margin-bottom: 8px; }
.cp-fba-steps li strong { color: #111111; }
.cp-fba-img img { width: 100%; height: auto; border: 1px solid #eeeeee; }
@media (max-width: 991.98px) { .cp-fba-inner { grid-template-columns: 1fr; } .cp-fba-img { max-width: 420px; } }

/* == theme/Agate/css/theme-v2.css == */
/* Colour preview "theme v2" (2026-10-28): loaded only with ?theme=new (1-day cookie agate_theme), see common/css.php.
   Palette from the logo: maroon = brand (menu bar, prices), warm gold = accent (ALL PRODUCTS, hover line,
   footer headings), black = every action button, ivory + white = calm background, charcoal footer. */
:root { --t2-maroon: #7a0a16; --t2-maroon-dark: #5c0711; --t2-gold: #c9962b; --t2-gold-soft: #f3e7cc; --t2-ink: #111111; --t2-ivory: #faf7f2; --t2-charcoal: #151515; }

/* Top bar: ivory, thin gold line */
html body .header-top { background: var(--t2-ivory) !important; border-bottom: 1px solid #ece4d6 !important; }

/* Menu bar: maroon with a thin gold line under it; links white, gold underline on hover */
html body .header-bottom { background: var(--t2-maroon) !important; border-bottom: 3px solid var(--t2-gold) !important; }
html body .main-navigation > ul > li > a { color: #ffffff !important; position: relative; }
html body .main-navigation > ul > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--t2-gold); transform: scaleX(0); transition: transform .2s ease; }
html body .main-navigation > ul > li > a:hover::after, html body .main-navigation > ul > li.active > a::after { transform: scaleX(1); }
html body .main-navigation > ul > li > a:hover { color: #ffffff !important; background: transparent !important; }

/* ALL PRODUCTS: warm gold with dark text (calmer than the old bright yellow) */
html body .categories_menu .categories_title { background: var(--t2-gold) !important; }
html body .categories_menu .categories_title, html body .categories_menu .categories_title * { color: var(--t2-ink) !important; }
html body .header-bottom .categori_toggle::before { color: var(--t2-ink) !important; }

/* Search and cart: black buttons */
html body .search-btn button { background: var(--t2-ink) !important; border-color: var(--t2-ink) !important; }
html body .search-btn button:hover { background: #333333 !important; }
html body .cart-trigger { background: var(--t2-ink) !important; border-color: var(--t2-ink) !important; }
html body .cart-trigger:hover { background: #333333 !important; }
html body .cart-trigger .badge, html body .cart-trigger .cart-count, html body #cartTrigger span[class*="count"] { background: var(--t2-gold) !important; color: var(--t2-ink) !important; }

/* Buttons that were navy / gradient: plain black, square */
html body .black-btn { background: var(--t2-ink) !important; background-image: none !important; border-color: var(--t2-ink) !important; border-radius: 0 !important; }
html body .black-btn:hover { background: #333333 !important; }

/* Section headings: dark text, small gold bar instead of the maroon/yellow double bar */
html body .section-header .title { color: var(--t2-ink) !important; }
html body .section-header .title::after { background: var(--t2-gold) !important; height: 3px !important; }
html body .section-header .title::before { display: none !important; }

/* Soft ivory page sections */
html body .cms-support, html body .hb-why, html body .cp-alt { background: var(--t2-ivory) !important; }

/* Footer: charcoal, gold headings */
html body .cms-footer { background: var(--t2-charcoal) !important; }
html body .footer-trust-bar { background: #1c1c1c !important; border-color: rgba(201,150,43,.25) !important; }
html body .cms-footer h4 { color: var(--t2-gold) !important; }
html body .footer-bottom { background: #0d0d0d !important; }

/* Stronger selectors: the theme styles these with .header-mid .cart-trigger and .cms-banner .banner-txt h2 */
html body .header-mid #cartTrigger.cart-trigger, html body #cartTrigger.cart-trigger { background: var(--t2-ink) !important; border-color: var(--t2-ink) !important; }
html body .header-mid #cartTrigger.cart-trigger:hover { background: #333333 !important; }
html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2, html body section.cms-banner .banner-txt h2 * { color: var(--t2-ink) !important; }

/* Owner 2026-10-28: the gold ALL PRODUCTS block looked heavy -> black with white text (same black as the buttons),
   no gold line under the menu bar, white hover underline */
html body .categories_menu .categories_title { background: var(--t2-ink) !important; }
html body .categories_menu .categories_title, html body .categories_menu .categories_title * { color: #ffffff !important; }
html body .header-bottom .categori_toggle::before { color: #ffffff !important; }
html body .header-bottom { border-bottom: 0 !important; }
html body .main-navigation > ul > li > a::after { background: #ffffff !important; }

/* Maroon only for logo / menu bar / prices: "SHOP NOW" pills and other theme buttons square black, headings dark,
   no yellow / maroon frames around pictures and cards */
html body .theme-btn, html body a.theme-btn, html body .shop-now, html body .btn-shop, html body .cms-static-area a[class*="btn"], html body .cms-static-area .btn,
html body .cms-banner a[class*="btn"], html body .cms-special a[class*="btn"] {
  background: var(--t2-ink) !important; background-image: none !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; box-shadow: none !important; color: #ffffff !important;
}
html body .theme-btn:hover, html body .cms-static-area a[class*="btn"]:hover, html body .cms-banner a[class*="btn"]:hover { background: #333333 !important; }
html body .cms-about .title, html body .cms-about h1, html body .cms-about h2, html body .cms-home-about .title, html body .cms-home-about h2,
html body .cms-static-area h2, html body .cms-static-area h3, html body .cms-special h2, html body .cms-special .title { color: var(--t2-ink) !important; }
html body .cms-about .title::after, html body .cms-about h1::after { background: var(--t2-maroon) !important; }
html body .cms-about img, html body .cms-about .about-img, html body .cms-about .about-image, html body .cms-about [class*="img"],
html body .cms-static-area [class*="box"], html body .cms-static-area [class*="card"] { border-color: #e7e2da !important; }

/* Owner 2026-10-28: menu bar black as well; maroon stays only in the logo and prices. ALL PRODUCTS a shade lighter
   so it still stands out from the bar. */
html body .header-bottom { background: var(--t2-ink) !important; }
html body .categories_menu .categories_title { background: #2a2a2a !important; }
html body section.cms-about .about-content h1.title, html body section.cms-about .about-content .title, html body section.cms-about h1 { color: var(--t2-ink) !important; }
html body section.cms-about .about-content .title::after, html body section.cms-about h1::after { background: var(--t2-maroon) !important; }

/* Slider (laptops): picture bigger (58%), text box smaller (42%) with a smaller heading and the long text shortened to
   4 lines on screen (the full text stays in the page for Google), square black button */
@media (min-width: 992px) {
  html body section.cms-banner .item > .row > .col-lg-6:has(.banner-txt) { flex: 0 0 42% !important; max-width: 42% !important; }
  html body section.cms-banner .item > .row > .col-lg-6:has(.banner-img) { flex: 0 0 58% !important; max-width: 58% !important; }
  html body section.cms-banner .banner-txt { padding: 28px 30px !important; border-radius: 0 !important; box-shadow: none !important; border: 1px solid #ece6dc !important; }
  html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2 { font-size: 30px !important; line-height: 1.2 !important; margin-bottom: 12px !important; }
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { font-size: 15px !important; line-height: 1.6 !important; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden !important; margin-bottom: 16px !important; }
  html body section.cms-banner .banner-txt p ~ p { display: none !important; }
  html body section.cms-banner .banner-img img { width: 100% !important; height: auto !important; max-height: 520px; object-fit: cover; border-radius: 0 !important; }
}
html body section.cms-banner .banner-txt a.light-btn { background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
html body section.cms-banner .banner-txt a.light-btn:hover { background: #333333 !important; }

/* Owner 2026-10-28 (liked it): black menu bar + amber ALL PRODUCTS with white text; maroon logo unchanged */
html body .categories_menu .categories_title { background: #e8a317 !important; }
html body .categories_menu .categories_title, html body .categories_menu .categories_title * { color: #ffffff !important; }
html body .header-bottom .categori_toggle::before { color: #ffffff !important; }

/* Owner 2026-10-28 try: ALL PRODUCTS white with black text on the black bar */
html body .categories_menu .categories_title { background: #ffffff !important; border: 1px solid #ffffff !important; }
html body .categories_menu .categories_title, html body .categories_menu .categories_title * { color: #111111 !important; }
html body .header-bottom .categori_toggle::before { color: #111111 !important; }

/* Final choice 2026-10-28 (owner liked it): amber ALL PRODUCTS with white text on the black bar; no maroon edge */
html body .categories_menu .categories_title { background: #e8a317 !important; border: 0 !important; }
html body .categories_menu .categories_title, html body .categories_menu .categories_title * { color: #ffffff !important; }
html body .header-bottom .categori_toggle::before { color: #ffffff !important; }
html body .header-bottom .categories_menu, html body .header-bottom .categories-menu-wrap_box, html body .header-bottom .categories_menu .categories_title::before { border-left: 0 !important; box-shadow: none !important; }

/* Slider balance: less empty space above, picture height capped so the text box does not look low */
@media (min-width: 992px) {
  html body section.cms-banner { padding-top: 28px !important; padding-bottom: 28px !important; }
  html body section.cms-banner .banner-img img { max-height: 440px !important; }
  html body section.cms-banner .item > .row { align-items: center !important; }
}
/* Slider picture: show the whole picture (no cropping), scaled to fit the 440 px height */
@media (min-width: 992px) {
  html body section.cms-banner .banner-img img { object-fit: contain !important; width: 100% !important; height: 440px !important; max-height: 440px !important; background: transparent !important; }
}
/* Slider text: show more (6 lines, 16 px) */
@media (min-width: 992px) {
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { font-size: 16px !important; -webkit-line-clamp: 6 !important; line-height: 1.65 !important; }
}

/* Home sections in the new colours (stronger selectors than the theme): dark headings with a small maroon bar,
   tabs black / white square, every "VIEW ALL" button square black (no navy pill, no maroon hover), less empty space */
html body section .section-header h2.title, html body section .section-header .title { color: var(--t2-ink) !important; }
html body section .section-header h2.title::after, html body section .section-header .title::after { background: var(--t2-maroon) !important; }
html body section.cms-single-product, html body section.stone-list, html body section.cms-recommended { padding-top: 44px !important; padding-bottom: 44px !important; }
html body section .section-header { padding-bottom: 18px !important; }
html body section.cms-single-product ul.nav > li > a, html body section.cms-single-product [role="tablist"] > li > a, html body section.cms-single-product [role="tablist"] > a {
  background: #ffffff !important; background-image: none !important; color: var(--t2-ink) !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
html body section.cms-single-product ul.nav > li > a.active, html body section.cms-single-product [role="tablist"] > li > a.active, html body section.cms-single-product [role="tablist"] > a.active {
  background: var(--t2-ink) !important; color: #ffffff !important; }
html body section .btn-box a.black-btn, html body a.black-btn.black-btn, html body section .btn-box .black-btn {
  background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
html body section .btn-box a.black-btn:hover, html body a.black-btn.black-btn:hover { background: #333333 !important; background-image: none !important; border-color: #333333 !important; color: #ffffff !important; }
html body .light-btn:hover, html body a.light-btn:hover { background: #333333 !important; background-image: none !important; border-color: #333333 !important; }
/* style.css colours headings per section (section.cms-xxx .section-header .title !important): beat it with a doubled class */
html body section .section-header .title.title, html body section .section-header h2.title.title { color: var(--t2-ink) !important; }

/* Page check 2026-10-28 (20 pages, laptop + phone): remaining maroon / yellow / round elements */
html body h1.title.title, html body .section-header h1.title.title, html body .breadcrumb-area + * h1.title { color: var(--t2-ink) !important; }
html body h1.title::after { background: var(--t2-maroon) !important; }
html body a.cms-side-btn, html body .cms-side-btn { background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; }
html body a.cms-side-btn:hover { background: #333333 !important; }
html body a.white-btn, html body .white-btn { background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
html body a.white-btn:hover { background: #333333 !important; }
html body .pagination a, html body .pagination span, html body .pagination li a, html body ul.pagination > li > a {
  border-radius: 0 !important; background: #ffffff !important; background-image: none !important; color: var(--t2-ink) !important; border: 1px solid #d6d6d6 !important; box-shadow: none !important; }
html body .pagination .active a, html body .pagination li.active a {
  background: var(--t2-ink) !important; color: #ffffff !important; border-color: var(--t2-ink) !important; }
/* 404 page buttons */
html body .error-page a, html body .not-found a.primary, html body a.primary, html body section [class*="404"] a { border-radius: 0 !important; }
html body a.primary { background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border-color: var(--t2-ink) !important; }

/* (fix) page numbers only inside real .pagination lists; active tab without a red outline */
html body section.cms-single-product ul.nav > li > a.active, html body section.cms-single-product ul.nav > li > a:focus { outline: none !important; box-shadow: none !important; border-color: var(--t2-ink) !important; }
/* Last items from the page check: language chip, mini-cart buttons, phone-menu search button */
html body .lang-switch .lang-opt.is-active { background: var(--t2-ink) !important; color: #ffffff !important; border-color: var(--t2-ink) !important; }
html body .mini-cart-btns a, html body .cart-btns a { background: var(--t2-ink) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--t2-ink) !important; border-radius: 0 !important; }
html body .mini-cart-btns a:hover, html body .cart-btns a:hover { background: #333333 !important; }
html body .search-box-offcanvas .search-btn, html body button.search-btn { background: var(--t2-ink) !important; border-color: var(--t2-ink) !important; color: #ffffff !important; }
/* "Read more about Agate Export" (white-btn): square black also on hover (the theme hover made a round pill with yellow text) */
html body section a.white-btn.white-btn, html body section a.white-btn.white-btn:hover, html body section a.white-btn.white-btn:focus {
  border-radius: 0 !important; box-shadow: none !important; background-image: none !important; border: 1px solid var(--t2-ink) !important; }
html body section a.white-btn.white-btn { background: var(--t2-ink) !important; color: #ffffff !important; }
html body section a.white-btn.white-btn:hover, html body section a.white-btn.white-btn:focus { background: #333333 !important; color: #ffffff !important; }
html body section a.white-btn.white-btn * { color: #ffffff !important; }

/* Home "Wholesale Healing Crystals Points / Metaphysical Crystals" cards: square light frame, text and SHOP NOW
   stacked next to the picture, button on one line */
html body section.cms-static-area .single-static { border: 1px solid #ececec !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; gap: 26px !important; padding: 22px !important; background: #ffffff !important; }
html body section.cms-static-area .single-static:hover { border-color: #111111 !important; }
html body section.cms-static-area .single-static img { border-radius: 0 !important; max-width: 46% !important; height: auto !important; }
html body section.cms-static-area .single-static .content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 14px !important; text-align: left !important; flex: 1 1 auto; }
html body section.cms-static-area .single-static .content h2, html body section.cms-static-area .single-static .content h3, html body section.cms-static-area .single-static .content h4 { font-size: 22px !important; line-height: 1.3 !important; color: #111111 !important; margin: 0 !important; }
html body section.cms-static-area .single-static .btn-box { padding: 0 !important; margin: 0 !important; width: auto !important; }
html body section.cms-static-area .single-static a.light-btn { white-space: nowrap !important; display: inline-flex !important; align-items: center; gap: 8px; height: 44px; padding: 0 24px !important; font-size: 13px !important; letter-spacing: .04em; }
@media (max-width: 767.98px) {
  html body section.cms-static-area .single-static { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 14px !important; }
  html body section.cms-static-area .single-static img { max-width: 100% !important; }
  html body section.cms-static-area .single-static .content h2, html body section.cms-static-area .single-static .content h3, html body section.cms-static-area .single-static .content h4 { font-size: 18px !important; }
}
/* New wide slider photos (3:2): fill the picture column, no letterbox */
@media (min-width: 992px) {
  html body section.cms-banner .banner-img img[src*="banner-v2"] { object-fit: cover !important; height: 440px !important; }
}
/* Slider arrows black (one was maroon) */
html body .owl-carousel .owl-nav button.owl-prev, html body .owl-carousel .owl-nav button.owl-next { background: var(--t2-ink) !important; color: #ffffff !important; border-radius: 0 !important; }
html body .owl-carousel .owl-nav button.owl-prev:hover, html body .owl-carousel .owl-nav button.owl-next:hover { background: #333333 !important; }

/* Product cards: Item Code / Size / MOQ as three small columns (grey label above, value below) instead of long
   label-left / value-right rows; one light frame, text centred, long codes wrap instead of "..." */
html body .product-detail-list ul { display: grid !important; grid-template-columns: 1.3fr 1fr 1fr !important; gap: 0 !important; padding: 0 !important; margin: 10px 0 12px !important; border: 1px solid #ececec !important; list-style: none !important; }
html body .product-detail-list ul li { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 7px 4px !important; border: 0 !important; border-right: 1px solid #ececec !important; margin: 0 !important; min-width: 0 !important; background: #ffffff !important; }
html body .product-detail-list ul li:last-child { border-right: 0 !important; }
html body .product-detail-list .list-label { font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #8a8f98 !important; margin: 0 0 2px !important; width: auto !important; }
html body .product-detail-list .list-value { font-size: 13px !important; font-weight: 700 !important; color: #111111 !important; text-align: center !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; line-height: 1.25 !important; width: auto !important; max-width: 100% !important; }
@media (max-width: 575.98px) {
  html body .product-detail-list ul { grid-template-columns: 1fr 1fr 1fr !important; }
  html body .product-detail-list .list-label { font-size: 9.5px !important; }
  html body .product-detail-list .list-value { font-size: 11.5px !important; }
}
/* (revised) card details: three short centred lines "LABEL value", no columns (cards are only ~190 px wide) */
html body .product-detail-list ul { display: block !important; border: 0 !important; border-top: 1px solid #efefef !important; border-bottom: 1px solid #efefef !important; padding: 6px 0 !important; margin: 8px 0 10px !important; }
html body .product-detail-list ul li { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: center !important; gap: 6px !important; border: 0 !important; padding: 2px 4px !important; }
html body .product-detail-list .list-label { font-size: 10.5px !important; margin: 0 !important; }
html body .product-detail-list .list-value, html body .product-detail-list .list-value-code { display: inline !important; font-size: 13px !important; }
@media (max-width: 575.98px) {
  html body .product-detail-list ul li { gap: 4px !important; padding: 1px 2px !important; }
  html body .product-detail-list .list-value, html body .product-detail-list .list-value-code { font-size: 11.5px !important; }
}
/* stronger than header-extras (body .single_product .product-detail-list ul li ...): centred "LABEL value" lines */
html body .single_product .product-detail-list ul li, html body .single_product .product-detail-list ul li.is-code { justify-content: center !important; flex-direction: row !important; align-items: baseline !important; gap: 6px !important; flex-wrap: wrap !important; }
html body .single_product .product-detail-list ul li .list-label, html body .single_product .product-detail-list ul li.is-code .list-label { flex: 0 0 auto !important; width: auto !important; text-align: right !important; font-size: 10.5px !important; text-transform: uppercase !important; color: #8a8f98 !important; }
html body .single_product .product-detail-list ul li .list-value, html body .single_product .product-detail-list ul li.is-code .list-value { flex: 0 1 auto !important; width: auto !important; text-align: left !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; font-weight: 700 !important; color: #111111 !important; }
/* Page numbers (theme class "paginatoin-area"): square, white with grey frame, current page black */
html body .paginatoin-area ul li, html body .paginatoin-area ul li a { border-radius: 0 !important; }
html body .paginatoin-area ul li a { background: #ffffff !important; color: var(--t2-ink) !important; border: 1px solid #d6d6d6 !important; box-shadow: none !important; }
html body .paginatoin-area ul li a:hover { border-color: var(--t2-ink) !important; }
html body .paginatoin-area ul li.active, html body .paginatoin-area ul li.active a, html body .paginatoin-area ul li.active span { background: var(--t2-ink) !important; background-color: var(--t2-ink) !important; color: #ffffff !important; border-color: var(--t2-ink) !important; border-radius: 0 !important; }

/* Trust cards under the slider (7 days money back, fast dispatch ...): square light frame, readable on hover
   (the old hover turned the text almost white and the icon yellow), icons maroon */
html body section.cms-support .support-box { border: 1px solid #ececec !important; border-radius: 0 !important; box-shadow: none !important; background: #ffffff !important; transform: none !important; }
html body section.cms-support .support-box:hover { border-color: #111111 !important; background: #ffffff !important; box-shadow: none !important; transform: none !important; }
html body section.cms-support .support-box p, html body section.cms-support .support-box:hover p, html body section.cms-support .support-box * { color: #111111 !important; }
html body section.cms-support .support-box .icon svg, html body section.cms-support .support-box .icon svg *, html body section.cms-support .support-box:hover .icon svg, html body section.cms-support .support-box:hover .icon svg * { fill: var(--t2-maroon) !important; }
html body section.cms-support { padding-top: 30px !important; padding-bottom: 30px !important; }
/* Slider text box as tall as the photo (440 px) with bigger text (owner 2026-10-28) */
@media (min-width: 992px) {
  html body section.cms-banner .banner-txt { min-height: 440px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 34px 38px !important; }
  html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2 { font-size: 34px !important; line-height: 1.18 !important; margin-bottom: 16px !important; }
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { font-size: 17px !important; line-height: 1.7 !important; -webkit-line-clamp: 7 !important; margin-bottom: 22px !important; }
  html body section.cms-banner .banner-txt a.light-btn { align-self: flex-start; font-size: 15px !important; padding: 14px 30px !important; }
}
@media (min-width: 992px) and (max-width: 1299.98px) {
  html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2 { font-size: 29px !important; }
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { font-size: 16px !important; -webkit-line-clamp: 6 !important; }
}
/* Slider text box exactly the photo height (440 px) on all laptop widths */
@media (min-width: 992px) {
  html body section.cms-banner .banner-txt { height: 440px !important; min-height: 440px !important; overflow: hidden !important; }
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { -webkit-line-clamp: 6 !important; }
}
@media (min-width: 992px) and (max-width: 1299.98px) {
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { -webkit-line-clamp: 5 !important; }
}

/* Product cards (owner 2026-10-28): item code as a small grey tag, Size and MOQ as two framed chips on one line;
   all cards the same light square frame, dark frame on hover */
html body .single_product { border: 1px solid #ececec !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
html body .single_product:hover { border-color: #111111 !important; box-shadow: none !important; }
html body .single_product .product-detail-list ul { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; border: 0 !important; padding: 0 !important; margin: 10px 0 12px !important; }
html body .single_product .product-detail-list ul li { flex: 0 0 auto !important; display: inline-flex !important; align-items: baseline !important; gap: 4px !important; padding: 4px 9px !important; margin: 0 !important; border: 1px solid #e3e3e3 !important; background: #ffffff !important; }
html body .single_product .product-detail-list ul li.is-code { flex: 0 0 100% !important; justify-content: center !important; border: 0 !important; padding: 0 0 2px !important; background: transparent !important; }
html body .single_product .product-detail-list ul li.is-code .list-label { display: none !important; }
html body .single_product .product-detail-list ul li.is-code .list-value { display: inline-block !important; background: #f2f2f2 !important; color: #444444 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .03em !important; padding: 3px 10px !important; }
html body .single_product .product-detail-list ul li:not(.is-code) .list-label { font-size: 10.5px !important; color: #8a8f98 !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
html body .single_product .product-detail-list ul li:not(.is-code) .list-value { font-size: 12.5px !important; font-weight: 700 !important; color: #111111 !important; white-space: nowrap !important; }
@media (max-width: 575.98px) {
  html body .single_product .product-detail-list ul { gap: 4px !important; }
  html body .single_product .product-detail-list ul li { padding: 3px 6px !important; }
  html body .single_product .product-detail-list ul li:not(.is-code) .list-value { font-size: 11.5px !important; }
  html body .single_product .product-detail-list ul li:not(.is-code) .list-label { font-size: 9.5px !important; }
}

/* Product cards v3 (owner 2026-10-28): details as ONE calm centred line "Arrow-050 · 1-2 Inch · MOQ 50 Pcs" (no tags / boxes),
   "$ Login" hover = underline only (the theme hover made a tight black block) */
html body .single_product .product-detail-list ul { display: block !important; text-align: center !important; border: 0 !important; border-top: 1px solid #efefef !important; padding: 8px 0 0 !important; margin: 8px 0 12px !important; line-height: 1.6 !important; }
html body .single_product .product-detail-list ul li, html body .single_product .product-detail-list ul li.is-code { display: inline !important; border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
html body .single_product .product-detail-list ul li + li::before { content: " \00B7 "; color: #b5b5b5; font-weight: 400; padding: 0 3px; }
html body .single_product .product-detail-list ul li .list-label { display: none !important; }
html body .single_product .product-detail-list ul li:last-child .list-label { display: inline !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; color: #6b7280 !important; margin-right: 3px !important; }
html body .single_product .product-detail-list ul li .list-value, html body .single_product .product-detail-list ul li.is-code .list-value { display: inline !important; background: transparent !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #333333 !important; letter-spacing: 0 !important; white-space: nowrap !important; }
html body .single_product .product-detail-list ul li.is-code .list-value { color: #6b7280 !important; font-weight: 500 !important; }
html body .single_product a.login-price-link:hover, html body .single_product a.login-price-link:focus, html body .single_product .login-price-link:hover {
  background: transparent !important; color: var(--t2-maroon) !important; text-decoration: underline !important; box-shadow: none !important; outline: none !important; }
@media (max-width: 575.98px) {
  html body .single_product .product-detail-list ul li .list-value, html body .single_product .product-detail-list ul li.is-code .list-value { font-size: 11.5px !important; }
  html body .single_product .product-detail-list ul li:last-child .list-label { font-size: 11px !important; }
}
/* Slider text: 4 lines (ends with "...") so a 3-line heading never pushes the text out of the 440 px box */
@media (min-width: 992px) {
  html body section.cms-banner .banner-txt p, html body section.cms-banner .banner-txt div > p { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 4 !important; overflow: hidden !important; max-height: 6.9em !important; flex-shrink: 0; }
  html body section.cms-banner .banner-txt p br { display: none; }
}
@media (min-width: 1300px) and (max-width: 1599.98px) {
  html body section.cms-banner .banner-txt h1, html body section.cms-banner .banner-txt h2 { font-size: 31px !important; }
}

/* Cart button is black: its bag icon and text must be white (was dark blue = invisible on phones) */
html body .cart-trigger i, html body .cart-trigger .fas, html body .cart-trigger .cart-text, html body #cartTrigger i, html body #cartTriggerMobile i { color: #ffffff !important; }

/* Category tiles (owner 2026-10-28): title bigger than the sub-category links, links smaller so most stay on one line,
   square calm card, same image box, slim scroll list. Phones: 2 per row, compact. */
html body .category-box { border-radius: 0 !important; border: 1px solid #e5e5e5 !important; padding: 14px !important; box-shadow: none !important; }
html body .category-box:hover { border-color: #111111 !important; transform: none !important; box-shadow: 0 6px 18px rgba(0,0,0,.08) !important; }
html body .category-box .category-img { border-radius: 0 !important; height: 190px !important; max-height: 190px !important; margin-bottom: 14px !important; background: #f7f7f5 !important; }
html body .category-box .category-img img { height: 100% !important; width: 100% !important; object-fit: contain !important; }
html body .category-box .category-content h4 { font-size: 17px !important; font-weight: 800 !important; line-height: 1.3 !important; margin: 0 0 10px !important; min-height: 2.6em; text-align: left; display: flex; align-items: flex-start; }
html body .category-box .category-content h4.text-center { text-align: center !important; justify-content: center; }
html body .category-box .category-content h4 a { color: #111111 !important; }
html body .category-box .category-content h4 a:hover { color: var(--t2-maroon) !important; }
html body .category-box .category-list { max-height: 200px !important; padding: 8px 6px 0 0 !important; scrollbar-color: #111111 #f1f1f1 !important; }
html body .category-box .category-list::-webkit-scrollbar-thumb { background: #111111 !important; border-radius: 0 !important; }
html body .category-box .category-list::-webkit-scrollbar-track { border-radius: 0 !important; }
html body .category-box .category-list ul li { margin: 0 !important; border-bottom: 1px solid #f0f0f0; }
html body .category-box .category-list ul li:last-child { border-bottom: 0; }
html body .category-box .category-list ul li a { display: block !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.35 !important; padding: 7px 0 !important; color: #444444 !important; }
html body .category-box .category-list ul li a:hover { color: var(--t2-maroon) !important; transform: none !important; }
@media (max-width: 575.98px) {
  html body .category-box { padding: 8px !important; }
  html body .category-box .category-img { height: 120px !important; max-height: 120px !important; margin-bottom: 8px !important; }
  html body .category-box .category-content h4, html body .category-box .category-content h4 a { font-size: 14px !important; line-height: 1.25 !important; }
  html body .category-box .category-content h4 { margin: 0 0 6px !important; min-height: 2.5em; }
  html body .category-box .category-list { max-height: 150px !important; }
  html body .category-box .category-list ul li a { font-size: 12px !important; padding: 6px 0 !important; }
}

/* Category pages polish: calm toolbar, even grid gaps, sub-link arrow, focus states */
html body .shop-page .product-header { border-radius: 0 !important; border: 1px solid #e5e5e5 !important; box-shadow: none !important; background: #ffffff !important; }
html body .shop-page .section-header .title { color: #111111 !important; letter-spacing: .2px; }
html body .shop-page .product-col:has(> .category-box) { margin-bottom: 4px; }
html body .category-box .category-list ul li a::before { content: "\203A" !important; display: inline-block !important; margin-right: 8px; color: #9a9a9a; font-weight: 700; }
html body .category-box .category-list ul li a:hover::before { color: var(--t2-maroon); }
html body .category-box .category-list ul li a:focus-visible, html body .category-box .category-content h4 a:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
html body .category-box .category-img img { transition: transform .35s ease !important; }
@media (max-width: 575.98px) { html body .category-box .category-list ul li a::before { margin-right: 5px; } }

/* Product cards v4 (owner 2026-10-28): tidy detail block. Item code on its own centred line, Size | MOQ as two equal cells
   (small label over a bold value) so nothing wraps in the middle of a line or ends with a stray dot. */
html body .single_product .product-detail-list ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; text-align: center !important; border: 0 !important; border-top: 1px solid #efefef !important; padding: 10px 0 0 !important; margin: 8px 0 12px !important; }
html body .single_product .product-detail-list ul li, html body .single_product .product-detail-list ul li.is-code { display: block !important; padding: 0 6px !important; margin: 0 !important; min-width: 0; }
html body .single_product .product-detail-list ul li + li::before { content: none !important; }
html body .single_product .product-detail-list ul li.is-code { grid-column: 1 / -1; padding: 0 0 8px !important; margin-bottom: 8px !important; border-bottom: 1px dashed #e6e6e6 !important; }
html body .single_product .product-detail-list ul li.is-code .list-label { display: inline !important; font-size: 11px !important; color: #8a8a8a !important; text-transform: uppercase !important; letter-spacing: .6px !important; margin-right: 6px !important; }
html body .single_product .product-detail-list ul li.is-code .list-label::after { content: ":"; }
html body .single_product .product-detail-list ul li.is-code .list-value { display: inline !important; font-size: 13px !important; font-weight: 700 !important; color: #111111 !important; letter-spacing: .2px !important; white-space: normal !important; word-break: break-all; }
html body .single_product .product-detail-list ul li:not(.is-code) .list-label { display: block !important; font-size: 10.5px !important; color: #8a8a8a !important; text-transform: uppercase !important; letter-spacing: .7px !important; margin: 0 0 2px !important; }
html body .single_product .product-detail-list ul li:not(.is-code) .list-value { display: block !important; font-size: 13.5px !important; font-weight: 700 !important; color: #222222 !important; white-space: normal !important; line-height: 1.3 !important; }
html body .single_product .product-detail-list ul li:nth-child(3) { border-left: 1px solid #ececec !important; }
html body .single_product .product-detail-list ul li:nth-child(2):last-child { grid-column: 1 / -1; }
@media (max-width: 575.98px) {
  html body .single_product .product-detail-list ul li.is-code .list-value { font-size: 12px !important; }
  html body .single_product .product-detail-list ul li:not(.is-code) .list-value { font-size: 12px !important; }
  html body .single_product .product-detail-list ul li:not(.is-code) .list-label, html body .single_product .product-detail-list ul li.is-code .list-label { font-size: 9.5px !important; }
}

/* Home on phones (owner 2026-10-28): "Why shops buy" and "How ordering works" as clean one-column lists (icon / number on the
   left, text on the right) instead of tall half-empty boxes; calmer section spacing and headings. */
@media (max-width: 575.98px) {
  html body .hb-section { padding: 24px 0 !important; }
  html body .hb-head { margin-bottom: 14px !important; }
  html body .hb-head h2 { font-size: 21px !important; line-height: 1.25 !important; position: relative; padding-bottom: 8px; }
  html body .hb-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; background: #111111; }
  html body .hb-why-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  html body .hb-why-item { display: grid !important; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: start; padding: 12px 14px !important; }
  html body .hb-why-item i { grid-row: 1 / span 2; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #f4f1ec; font-size: 18px !important; margin: 0 !important; color: #111111 !important; }
  html body .hb-why-item h3 { font-size: 15px !important; margin: 0 0 2px !important; }
  html body .hb-why-item p { font-size: 13px !important; line-height: 1.5 !important; }
  html body .hb-steps-list { grid-template-columns: 1fr !important; gap: 8px !important; }
  html body .hb-steps-list li, html body .hb-steps-list li:last-child { grid-column: auto !important; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: start; padding: 12px 14px !important; }
  html body .hb-step-no { grid-row: 1 / span 2; margin: 0 !important; width: 34px !important; height: 34px !important; }
  html body .hb-steps-list h3 { font-size: 15px !important; margin: 0 0 2px !important; }
  html body .hb-steps-list p { font-size: 13px !important; line-height: 1.5 !important; }
  html body .hb-cat-grid { gap: 8px !important; }
  html body .hb-cat { border-color: #eeeeee; }
  html body .hb-cat-count { font-size: 11.5px; }
}

/* Product cards on phones (cards are ~150 px wide): details as three tidy rows (label left, value right), buttons on one line */
@media (max-width: 991.98px) {
  html body .single_product .product-detail-list ul { display: block !important; padding: 6px 0 0 !important; margin: 6px 0 10px !important; }
  html body .single_product .product-detail-list ul li, html body .single_product .product-detail-list ul li.is-code { display: flex !important; justify-content: space-between; align-items: baseline; gap: 6px; padding: 5px 2px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px dashed #e9e9e9 !important; text-align: left; }
  html body .single_product .product-detail-list ul li:last-child { border-bottom: 0 !important; }
  html body .single_product .product-detail-list ul li:nth-child(3) { border-left: 0 !important; }
  html body .single_product .product-detail-list ul li .list-label, html body .single_product .product-detail-list ul li.is-code .list-label, html body .single_product .product-detail-list ul li:not(.is-code) .list-label { display: block !important; margin: 0 !important; flex: 0 0 auto; font-size: 9.5px !important; letter-spacing: .4px !important; white-space: nowrap; }
  html body .single_product .product-detail-list ul li.is-code .list-label::after { content: none; }
  html body .single_product .product-detail-list ul li .list-value, html body .single_product .product-detail-list ul li.is-code .list-value, html body .single_product .product-detail-list ul li:not(.is-code) .list-value { display: block !important; text-align: right; font-size: 12px !important; line-height: 1.25 !important; word-break: normal; overflow-wrap: anywhere; min-width: 0; }
  html body .single_product .product-card-actions .btn-card-addcart, html body .single_product .btn-card-addcart { white-space: nowrap !important; font-size: 11px !important; gap: 4px !important; padding: 0 4px !important; }
  html body .single_product .btn-card-addcart i { font-size: 11px !important; }
}

/* Home phones: the two CTA buttons (Register / Browse) equal, centred text, no tall line-height; chips tidier */
@media (max-width: 575.98px) {
  html body .hb-steps-cta, html body .b2b-start-bar .b2b-start-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  html body .hb-steps-cta a, html body .b2b-start-primary, html body .b2b-start-secondary { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-height: 46px; height: auto !important; line-height: 1.2 !important; padding: 8px 10px !important; font-size: 12px !important; letter-spacing: .3px; }
  html body .hb-popular-intro { font-size: 13.5px !important; line-height: 1.55; margin: 0 0 12px !important; }
  html body .hb-chips { gap: 6px !important; }
  html body .hb-chips a { font-size: 12px !important; padding: 7px 10px !important; line-height: 1.2; }
}

/* "$ Login" on product cards (owner 2026-10-28): quiet maroon link with a fine dashed underline, clean hover (darker, solid underline),
   never a black box / border / outline / tap flash */
html body .single_product .product-price a.login-price-link, html body .single_product a.login-price-link {
  display: inline-block !important; background: transparent !important; border: 0 !important; border-bottom: 1px dashed rgba(132, 2, 2, .55) !important; border-radius: 0 !important;
  padding: 0 0 2px !important; margin: 4px 0 !important; color: var(--t2-maroon) !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: .2px !important;
  box-shadow: none !important; outline: 0 !important; -webkit-tap-highlight-color: transparent; text-decoration: none !important; transition: color .2s ease, border-color .2s ease; }
html body .single_product a.login-price-link:hover, html body .single_product a.login-price-link:focus, html body .single_product a.login-price-link:active, html body .single_product .product-price a.login-price-link:hover {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid #111111 !important; color: #111111 !important; box-shadow: none !important; outline: 0 !important; text-decoration: none !important; }
html body .single_product a.login-price-link:focus-visible { outline: 2px solid #111111 !important; outline-offset: 3px; }
html body .single_product a.login-price-link i { display: none !important; }
@media (max-width: 575.98px) { html body .single_product .product-price a.login-price-link, html body .single_product a.login-price-link { font-size: 16px !important; } }

/* Popular searches on phones: two equal columns instead of a ragged flow of chips */
@media (max-width: 575.98px) {
  html body .hb-chips { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  html body .hb-chips a { display: flex !important; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 8px !important; font-size: 12.5px !important; line-height: 1.25 !important; font-weight: 600; border-color: #e3e3e3 !important; }
}

/* Phones: less oversized cards on the order pages (owner 2026-10-28): thank-you, checkout, cart, my orders.
   Smaller padding / radius / type, square corners like the rest of the theme, buttons side by side without wrapped labels. */
@media (max-width: 575.98px) {
  html body .oty-wrap { padding: 16px 0 28px !important; }
  html body .oty-hero { margin-bottom: 18px !important; }
  html body .oty-check { width: 58px !important; height: 58px !important; font-size: 26px !important; box-shadow: 0 0 0 8px #f3fbf5 !important; }
  html body .oty-hero h1 { font-size: 22px !important; }
  html body .oty-hero p { font-size: 14px !important; line-height: 1.5; }
  html body .oty-card { border-radius: 0 !important; padding: 14px 14px !important; box-shadow: none !important; }
  html body .oty-card h2 { font-size: 16px !important; margin-bottom: 12px !important; }
  html body .oty-gap { height: 12px !important; }
  html body .oty-steps { gap: 18px !important; }
  html body .oty-steps li { padding: 14px 12px 12px !important; border-radius: 0 !important; }
  html body .oty-steps i { display: none !important; }
  html body .oty-steps strong, html body .oty-steps span { font-size: 13px !important; }
  html body .oty-meta b { font-size: 15px !important; }
  html body .oty-addr { gap: 12px !important; }
  html body .oty-addr p, html body .oty-addr span { font-size: 13px !important; line-height: 1.45 !important; }
  html body .oty-help { border-radius: 0 !important; padding: 16px 14px !important; gap: 12px !important; }
  html body .oty-help h2 { font-size: 17px !important; }
  html body .oty-help p { font-size: 13px !important; line-height: 1.5 !important; }
  html body .oty-btns, html body .oty-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; width: 100%; }
  html body .oty-btn { justify-content: center; padding: 10px 6px !important; font-size: 12.5px !important; border-radius: 0 !important; white-space: nowrap; gap: 6px !important; }
  html body .oty-tip { padding: 10px 12px !important; font-size: 12.5px !important; }
  /* checkout + cart cards */
  html body form[name="checkout"] .bg-white.p-4, html body .agx-cart .card { padding: 14px !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 12px !important; }
  html body form[name="checkout"] h5 { font-size: 15px !important; padding-bottom: 10px !important; margin-bottom: 12px !important; }
  html body form[name="checkout"] .row.g-3 { --bs-gutter-y: .6rem; }
  html body form[name="checkout"] .form-control, html body form[name="checkout"] .form-select { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 14px !important; }
  html body form[name="checkout"] .sticky-top { position: static !important; }
  html body form[name="checkout"] .order-summary-product-list { max-height: 260px !important; }
}

/* Owner 2026-10-28: no black border on hover anywhere (cards, tiles, chips, boxes): hover = a soft shadow only; tap/focus rings only for keyboard users */
html body .single_product:hover, html body .category-box:hover, html body .hb-cat:hover, html body section.cms-static-area .single-static:hover, html body section.cms-support .support-box:hover, html body .hb-who-item:hover, html body .hb-why-item:hover, html body .hb-steps-list li:hover {
  border-color: #e3e3e3 !important; box-shadow: 0 6px 18px rgba(0,0,0,.07) !important; outline: 0 !important; transform: none !important; }
html body .hb-chips a:hover, html body .hb-chips a:focus { background: #f5f5f3 !important; border-color: #d4d4d4 !important; color: #111111 !important; outline: 0 !important; }
html body a:focus:not(:focus-visible), html body button:focus:not(:focus-visible), html body .single_product *:focus:not(:focus-visible), html body .category-box *:focus:not(:focus-visible) { outline: 0 !important; box-shadow: none !important; }
html body .single_product a, html body .category-box a, html body .hb-cat { -webkit-tap-highlight-color: transparent; }

/* Phones: bigger logo (56 px high = about 198 px wide; the buttons keep their room, below 361 px it falls back to 48 px) */
@media (max-width: 767.98px) {
  html body .header-bottom .logo img { max-height: 56px !important; }
  html body .header-bottom > .container > .header-nav-row { min-height: 70px !important; }
}
@media (max-width: 360px) { html body .header-bottom .logo img { max-height: 48px !important; } }

/* Category tiles: one arrow per link (the theme drew a second, black / yellow one on the list item) */
html body .category-box .category-list ul li::before, html body .category-box ul li:hover::before { display: none !important; content: none !important; }
html body .category-box .category-list ul li a::before { padding-left: 0; }

/* Phones (owner 2026-10-28): no sort / view bar on category and product lists (names are already A-Z), smaller FAQ / CMS / info pages */
@media (max-width: 767.98px) {
  html body .shop-page .product-header { display: none !important; }
  html body .cms-page-wrapper { padding: 14px 0 24px !important; }
  html body .cms-hero-header { margin-bottom: 12px !important; }
  html body .cms-page-badge { font-size: 11px !important; padding: 4px 10px !important; }
  html body .cms-page-title { font-size: 22px !important; line-height: 1.25 !important; margin-top: 6px !important; }
  html body .cms-content-card { padding: 16px 14px !important; border-radius: 0 !important; box-shadow: none !important; border: 1px solid #ececec !important; margin-bottom: 20px !important; }
  html body .cms-rendered-body { font-size: 14px !important; line-height: 1.65 !important; }
  html body .cms-rendered-body h1 { font-size: 20px !important; margin: 14px 0 8px !important; }
  html body .cms-rendered-body h2 { font-size: 17px !important; line-height: 1.3 !important; margin: 16px 0 6px !important; }
  html body .cms-rendered-body h3, html body .cms-rendered-body h4 { font-size: 15px !important; line-height: 1.35 !important; margin: 12px 0 4px !important; }
  html body .cms-rendered-body p, html body .cms-rendered-body li { font-size: 14px !important; line-height: 1.65 !important; margin-bottom: 8px; }
  html body .cms-rendered-body ul, html body .cms-rendered-body ol { padding-left: 20px !important; }
  html body .cms-rendered-body table { font-size: 12.5px !important; }
  /* About / blog / info pages */
  html body .main-content-wrap .section-header .title, html body .shop-page h1.title { font-size: 22px !important; line-height: 1.25 !important; }
  /* Product detail: smaller headings and tab text */
  html body .single-product-wrap .product-title, html body .product-details-view-content h1 { font-size: 19px !important; line-height: 1.3 !important; }
  html body .dtl-btm-prt { padding: 14px !important; border-radius: 0 !important; }
  html body .dtl-btm-prt h2, html body .dtl-btm-prt h3 { font-size: 16px !important; }
}

/* Phone header: no empty band above / below the logo (row = logo height + 4 px) */
@media (max-width: 767.98px) {
  html body .header-bottom > .container > .header-nav-row { min-height: 60px !important; }
  html body .header-bottom, html body .header-bottom > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
  html body .header-bottom .header-mobile-logo, html body .header-bottom .header-mobile-actions { padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; }
}

/* Card item code: always ONE line (long codes like P-Selenite-037 no longer wrap): label small on the left, code on the right, ellipsis only as a last resort (full code stays in the title tooltip) */
@media (max-width: 991.98px) {
  html body .single_product .product-detail-list ul li.is-code { flex-wrap: nowrap !important; }
  html body .single_product .product-detail-list ul li.is-code .list-label { font-size: 9px !important; letter-spacing: .2px !important; }
  html body .single_product .product-detail-list ul li.is-code .list-value { flex: 1 1 auto; min-width: 0; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis; overflow-wrap: normal !important; word-break: normal !important; font-size: 11.5px !important; letter-spacing: 0 !important; }
}
@media (max-width: 380px) { html body .single_product .product-detail-list ul li.is-code .list-value { font-size: 10.5px !important; } }

/* "$ Login" on cards: plain maroon text, NO line under it (rest or hover); hover only turns darker */
html body .single_product .product-price a.login-price-link, html body .single_product a.login-price-link,
html body .single_product a.login-price-link:hover, html body .single_product a.login-price-link:focus, html body .single_product a.login-price-link:active, html body .single_product .product-price a.login-price-link:hover {
  border: 0 !important; border-bottom: 0 !important; text-decoration: none !important; padding: 0 !important; box-shadow: none !important; background: transparent !important; }
html body .single_product a.login-price-link:hover, html body .single_product .product-price a.login-price-link:hover { color: #4a0a0a !important; }
html body .single_product a.login-price-link span { text-decoration: none !important; border: 0 !important; }

/* CMS / FAQ pages (owner 2026-10-28): the badge repeated the page title ("FAQ" above "FAQ"): removed everywhere.
   Phones: help card, SSL box and "Wholesale enquiries" box much smaller, buttons slim and side by side. */
html body .cms-page-badge { display: none !important; }
@media (max-width: 767.98px) {
  html body .cms-help-card { padding: 12px 14px !important; border-radius: 0 !important; gap: 10px !important; flex-direction: column; align-items: flex-start !important; height: auto !important; }
  html body .cms-help-card > div { gap: 10px !important; align-items: center !important; }
  html body .cms-help-icon { width: 38px !important; height: 38px !important; border-radius: 0 !important; }
  html body .cms-help-icon i { font-size: 16px !important; }
  html body .cms-help-card h5 { font-size: 15px !important; margin: 0 0 2px !important; }
  html body .cms-help-card .small, html body .cms-help-card span { font-size: 12.5px !important; line-height: 1.4 !important; }
  html body .cms-help-card a.btn { padding: 7px 14px !important; font-size: 12.5px !important; border-radius: 0 !important; }
  html body .ssl-security-widget { padding: 10px 12px !important; border-radius: 0 !important; gap: 10px !important; height: auto !important; }
  html body .ssl-icon-box { width: 36px !important; height: 36px !important; border-radius: 0 !important; flex: 0 0 36px; }
  html body .ssl-title { font-size: 14px !important; margin: 0 0 2px !important; }
  html body .ssl-desc { font-size: 12px !important; line-height: 1.4 !important; }
  html body .cms-page-wrapper .row.g-4 { --bs-gutter-y: .6rem; }
  html body .cms-side-card { padding: 14px !important; border-radius: 0 !important; margin-bottom: 10px !important; box-shadow: none !important; }
  html body .cms-side-card h3 { font-size: 16px !important; margin: 0 0 6px !important; }
  html body .cms-side-card p { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
  html body .cms-side-btn { display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 40px !important; height: auto !important; padding: 8px 12px !important; font-size: 13px !important; border-radius: 0 !important; margin-bottom: 6px !important; }
  html body .cms-side-links li a { font-size: 13px !important; padding: 6px 0 !important; }
  html body .cms-trademark-notice { font-size: 12px !important; padding: 10px 12px !important; }
}

/* Phone menu (owner 2026-10-28): Products / Currency lists scroll smoothly inside the panel and the last items are not hidden behind the bottom bar */
@media (max-width: 991.98px) {
  html body .off-canvas-wrapper .mobile-menu { max-height: calc(100vh - 230px) !important; max-height: calc(100dvh - 230px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: 80px !important; scrollbar-width: thin; }
  html body .off-canvas-wrapper .mobile-navigation { overflow: visible !important; }
  html body .off-canvas-wrapper .mobile-menu li .menu-expand { min-width: 48px; min-height: 44px; touch-action: manipulation; cursor: pointer; }
  html body .off-canvas-wrapper .mobile-menu li > a { min-height: 44px; display: flex; align-items: center; touch-action: manipulation; }
  html body .off-canvas-wrapper .mobile-menu .dropdown { overscroll-behavior: contain; }
  html body .off-canvas-wrapper .mobile-menu .currency-option { min-height: 44px; width: 100%; text-align: left; touch-action: manipulation; }
}

/* Product cards, all devices: no empty gap between MOQ and the buttons. The detail list no longer stretches; any spare height of a
   taller neighbour card goes above the price instead, so name / price / details / buttons stay tight and rows line up. */
html body .single_product .product-info > .product-detail-list { flex: 0 0 auto !important; margin-bottom: 8px !important; }
html body .single_product .product-info > .product-price { margin-top: auto !important; }
html body .single_product .product-info > .product-name { margin-bottom: 6px !important; }
html body .single_product .product-info > .product-card-actions { margin-top: 0 !important; }
html body .single_product .product-detail-list ul { margin-bottom: 0 !important; }

/* Phones: "Added to cart" and other messages appear at the BOTTOM, above the bottom menu bar, so they never cover the logo / header */
@media (max-width: 767.98px) {
  html body #toast-container, html body #toast-container.toast-top-right, html body #toast-container.toast-top-center, html body #toast-container.toast-top-full-width, html body #toast-container.toast-top-left {
    top: auto !important; bottom: 74px !important; left: 10px !important; right: 10px !important; width: auto !important; z-index: 99999 !important; }
  html body #toast-container > div { width: auto !important; max-width: none !important; margin: 0 0 8px !important; padding: 11px 14px 11px 46px !important; min-height: 0 !important; border-radius: 0 !important; font-size: 14px !important; box-shadow: 0 6px 20px rgba(0,0,0,.18) !important; }
  html body #toast-container > div::before { width: 26px !important; height: 26px !important; left: 10px !important; font-size: 14px !important; }
}

/* Login popup on phones: compact, scrolls inside itself when the keyboard is open, square, big tap targets, error link as a button */
@media (max-width: 575.98px) {
  html body #loginModal .modal-dialog { margin: 8px auto !important; max-width: calc(100% - 16px) !important; max-height: calc(100dvh - 16px); display: flex; align-items: flex-start; }
  html body #loginModal .modal-content { border-radius: 0 !important; max-height: calc(100dvh - 16px); overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  html body #loginModal .modal-header { padding: 12px 14px !important; }
  html body #loginModal .modal-title { font-size: 1.05rem !important; }
  html body #loginModal .modal-body { padding: 14px !important; }
  html body #loginModal .modal-footer, html body #loginModal .login-footer { padding: 12px 14px !important; }
  html body #loginModal .form-control, html body #loginModal .login-code-input, html body #loginModal .login-code-send { min-height: 46px; font-size: 16px !important; } /* 16 px stops iOS zooming the page when the keyboard opens */
  html body #loginModal .login-code-steps { font-size: 12px !important; line-height: 1.5 !important; }
}
html body .login-code-note a { display: inline-block; margin-top: 6px; padding: 8px 16px; background: #111111; color: #ffffff !important; text-decoration: none !important; font-weight: 700; }
html body form .login-code-input, html body form input[name="userName"], html body form input[name="password"] { font-size: 16px; }

/* Phone menu v2 (owner 2026-10-28: "can not scroll down"): ONE scroll area = the whole white panel (touch scrolling works the same on every phone,
   address bar and bottom menu bar do not hide the end of the list), page behind the menu is locked. */
@media (max-width: 991.98px) {
  html body .off-canvas-wrapper { height: 100vh !important; height: 100dvh !important; }
  html body .off-canvas-wrapper .off-canvas-inner-content { height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: 96px !important; }
  html body .off-canvas-wrapper .off-canvas-inner, html body .off-canvas-wrapper .mobile-navigation, html body .off-canvas-wrapper .mobile-navigation nav { height: auto !important; max-height: none !important; overflow: visible !important; }
  html body .off-canvas-wrapper .mobile-menu { height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: 0 !important; margin-right: 0 !important; padding-right: 0 !important; }
  html body .off-canvas-wrapper .mobile-menu .dropdown { max-height: none !important; overflow: visible !important; }
  html body:has(.off-canvas-wrapper.open) { overflow: hidden !important; }
}

/* Cart on phones: item cards tight (my card padding must not apply to the item cards inside the big box), smaller title and outer box */
@media (max-width: 767.98px) {
  html body .agx-cart .cms-cart-mobile-cards .card { padding: 0 !important; margin-bottom: 8px !important; border-radius: 0 !important; box-shadow: none !important; border: 1px solid #ececec !important; }
  html body .agx-cart .cms-cart-mobile-cards .card > * { padding-left: 10px; padding-right: 10px; }
  html body .agx-cart .cms-cart-mobile-cards .card-header { padding: 6px 10px !important; font-size: 13px !important; }
  html body .agx-cart .cms-cart-mobile-cards .card-body { padding: 8px 10px !important; }
  html body .agx-cart .bg-white.p-3 { padding: 10px !important; border-radius: 0 !important; box-shadow: none !important; }
  html body .agx-cart .cms-cart-mobile-cards { margin-bottom: 8px !important; }
  html body .agx-cart .cms-page-title, html body .main-content-wrap .cms-cart-title, html body .agx-cart h1 { font-size: 20px !important; }
  html body .agx-cart .quantity-box, html body .agx-cart .qty-box { transform: none; }
}

/* Login code messages: errors (e.g. "You are not registered ... Register now") are a clear red box, not grey fine print */
html body .login-code-note.lc-error { display: block; background: #fdecec; border: 1px solid #f3b7b7; border-left: 4px solid #c62828; color: #9f1d1d !important; font-size: 14px !important; font-weight: 600; line-height: 1.5; padding: 10px 12px; margin-top: 8px; }
html body .login-code-note.lc-error a { display: inline-block; margin-top: 8px; padding: 9px 18px; background: #111111; color: #ffffff !important; text-decoration: none !important; font-weight: 700; }

/* Product page Previous / Next on phones: two equal square cards. Photo + (small "< PREVIOUS" / "NEXT >" label over the name), the arrows are
   plain text arrows (the theme drew black squares that sat on top of the photos) */
@media (max-width: 767.98px) {
  html body .product-pager-bottom { margin: 14px 0 6px !important; }
  html body .product-pager-bottom .product-pager { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  html body .product-pager-bottom .product-pager-link { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) !important; grid-template-areas: "thumb dir" "thumb name" !important; column-gap: 10px !important; row-gap: 2px !important; align-content: center; align-items: center !important; min-height: 72px !important; padding: 8px !important; border: 1px solid #e5e5e5 !important; border-radius: 0 !important; background: #ffffff !important; text-align: left !important; box-shadow: none !important; }
  html body .product-pager-bottom .product-pager-next { grid-template-columns: minmax(0, 1fr) 52px !important; grid-template-areas: "dir thumb" "name thumb" !important; text-align: right !important; }
  html body .product-pager-bottom .product-pager-link:hover, html body .product-pager-bottom .product-pager-link:focus { border-color: #e5e5e5 !important; box-shadow: none !important; background: #fafaf8 !important; }
  html body .product-pager-bottom .product-pager-thumb { grid-area: thumb; width: 52px !important; height: 52px !important; object-fit: contain !important; border: 1px solid #eeeeee; background: #f7f7f5 !important; position: static !important; margin: 0 !important; }
  html body .product-pager-bottom .product-pager-dir { grid-area: dir; display: flex !important; align-items: center; gap: 4px !important; font-size: 10px !important; letter-spacing: .6px; text-transform: uppercase; color: #6b7280 !important; background: transparent !important; width: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; }
  html body .product-pager-bottom .product-pager-next .product-pager-dir { justify-content: flex-end; }
  html body .product-pager-bottom .product-pager-text { display: inline !important; }
  html body .product-pager-bottom .product-pager-dir i { display: inline-block !important; position: static !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; color: #111111 !important; border: 0 !important; font-size: 13px !important; line-height: 1 !important; transform: none !important; }
  html body .product-pager-bottom .product-pager-body { grid-area: name; min-width: 0; }
  html body .product-pager-bottom .product-pager-name { font-size: 12.5px !important; font-weight: 600; line-height: 1.3 !important; color: #1e293b !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden !important; }
  html body .product-pager-bottom .pg-full { display: none !important; }
  html body .product-pager-bottom .pg-short { display: inline !important; }
}

/* "Your email is not confirmed yet" notice after Send code: amber box */
html body .login-code-note.lc-warn { display: block; background: #fff8e6; border: 1px solid #ffe2a3; border-left: 4px solid #e08a00; color: #5a4300 !important; font-size: 14px !important; font-weight: 600; line-height: 1.5; padding: 10px 12px; margin-top: 8px; }

/* Category tiles: sub-category = name on the left (may wrap), product count as a small fixed badge on the right, so "(66)" never drops to a second line */
html body .category-box .category-list ul li a { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 8px; }
html body .category-box .category-list ul li a::before { flex: 0 0 auto; margin-top: 0; }
html body .category-box .category-list ul li a .cat-name { flex: 1 1 auto; min-width: 0; }
html body .category-box .category-list ul li a .cat-count { flex: 0 0 auto; min-width: 28px; text-align: center; font-size: 11.5px; font-weight: 600; line-height: 1.5; color: #6b7280; background: #f3f3f1; padding: 0 7px; margin-top: 1px; white-space: nowrap; }
html body .category-box .category-list ul li a:hover .cat-count { background: #ececea; color: #111111; }
html body .category-box .category-content h4 .cat-count-h { white-space: nowrap; font-weight: 600; color: #6b7280; margin-left: 4px; }
html body .category-box .category-content h4 a { display: inline; }
@media (max-width: 575.98px) { html body .category-box .category-list ul li a .cat-count { font-size: 10.5px; padding: 0 5px; min-width: 24px; } }

/* Phones: product lists show more cards (owner 2026-10-28): smaller gaps between rows and inside the cards */
@media (max-width: 767.98px) {
  html body .product-col:has(> .single_product), html body .product-col:has(.single_product) { margin-bottom: 10px !important; padding-left: 5px !important; padding-right: 5px !important; }
  html body .shop-product-wrapper .row { margin-left: -5px; margin-right: -5px; }
  html body .single_product { padding: 8px !important; }
  html body .single_product .product_thumb, html body .single_product .product-img-box { margin-bottom: 4px !important; }
  html body .single_product .product-info > .product-name { margin-bottom: 2px !important; min-height: 2.6em; }
  html body .single_product .product-info > .product-price { margin-top: 0 !important; margin-bottom: 0 !important; }
  html body .single_product .product-info > .product-detail-list { margin-bottom: 6px !important; }
  html body .single_product .product-detail-list ul { margin: 4px 0 0 !important; padding-top: 4px !important; }
  html body .single_product .product-detail-list ul li, html body .single_product .product-detail-list ul li.is-code { padding-top: 3px !important; padding-bottom: 3px !important; }
  html body .single_product .product-card-actions { padding-top: 6px !important; margin-top: 0 !important; }
  html body .single_product a.login-price-link { margin: 2px 0 !important; }
}
/* Bottom bar (6 items) always fits: no label is cut at the right edge */
@media (max-width: 767.98px) {
  html body .mobile-nav-item { padding-left: 1px !important; padding-right: 1px !important; min-width: 0; }
  html body .mobile-nav-item span { font-size: 9.5px !important; letter-spacing: 0 !important; white-space: nowrap; }
  html body .mobile-nav-item i { font-size: 17px !important; }
}

/* Bottom bar: the Bootstrap row had -15 px side margins (405 px wide on a 375 px phone), so the first and last items were pushed off screen */
html body .row:has(> .col > .mobile-nav-item) { margin-left: 0 !important; margin-right: 0 !important; flex-wrap: nowrap !important; width: 100% !important; }
html body .row:has(> .col > .mobile-nav-item) > .col { padding-left: 0 !important; padding-right: 0 !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; }

/* ===== CART new look (owner 2026-10-29), phones =====
   One slim title row, compact "select all" bar, item cards as clean rows (photo | name, code, price | square stepper), no "Item #" bars. */
@media (max-width: 767.98px) {
  /* title: one line "Shopping cart   4 items" */
  html body .cart-hero-header { margin-bottom: 8px !important; }
  html body .cart-hero-header > div { padding: 10px 12px !important; border-radius: 0 !important; box-shadow: none !important; flex-wrap: nowrap !important; align-items: center !important; }
  html body .cart-hero-header .badge.bg-warning { display: none !important; }
  html body .cart-hero-header h3 { font-size: 18px !important; letter-spacing: 0; text-transform: none !important; }
  html body .cart-hero-header .badge.bg-dark { font-size: 12px !important; padding: 5px 10px !important; border-radius: 0 !important; font-weight: 700; }
  /* select-all bar */
  html body .agx-cart .cms-cart-mobile-cards > .card:first-child { border: 0 !important; border-bottom: 1px solid #ececec !important; box-shadow: none !important; background: transparent !important; margin-bottom: 6px !important; }
  html body .agx-cart .cms-cart-mobile-cards > .card:first-child .card-body { padding: 4px 0 8px !important; }
  html body .agx-cart #empty_cart_button_mobile { border-radius: 0 !important; font-size: 12px !important; padding: 5px 10px !important; }
  /* item card = relative box; checkbox top-left, trash top-right, no "Item #" bar */
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] { position: relative; border: 1px solid #ececec !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 8px !important; background: #ffffff; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: transparent !important; border: 0 !important; padding: 8px 8px 0 8px !important; pointer-events: none; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header > * { pointer-events: auto; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header .font-monospace { display: none !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body { padding: 10px 10px 8px 34px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body img { width: 64px !important; height: 64px !important; border-radius: 0 !important; padding: 2px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body a.fw-bold { font-size: 14px !important; line-height: 1.3 !important; padding-right: 22px; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .btn-delete-single-cart { color: #9ca3af !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .btn-delete-single-cart:hover { color: #c62828 !important; }
  /* quantity stepper: square, compact */
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top { border-top: 1px dashed #e9e9e9 !important; padding-top: 8px !important; margin-bottom: 0 !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top > div > div[style*="border-radius"] { border-radius: 0 !important; height: 32px !important; border-color: #d4d4d4 !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .btn-qty-minus, html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .btn-qty-plus { width: 34px; min-width: 34px; height: 32px; padding: 0 !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .cart-qty-input { width: 44px !important; height: 32px !important; font-size: 14px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top .text-muted.small { font-size: 11px !important; }
  /* summary + actions */
  html body .agx-cart .agx-cart-summary, html body .agx-cart .col-lg-4 > div { border-radius: 0 !important; box-shadow: none !important; }
  html body .agx-cart #checkout_btn { border-radius: 0 !important; min-height: 46px; font-size: 14px !important; font-weight: 800; letter-spacing: .3px; background: #111111 !important; border-color: #111111 !important; color: #ffffff !important; }
  html body .agx-cart a.btn-outline-dark, html body .agx-cart .btn-continue { border-radius: 0 !important; }
}

/* Cart on phones, round 2 (owner 2026-10-29): every item shows its number (1, 2, 3 ...) and the cards are much smaller so more items fit on screen */
html body .cart-item-no { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: #111111; color: #ffffff; font-size: 12px; font-weight: 700; line-height: 1; }
@media (max-width: 767.98px) {
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header { padding: 6px 8px 0 8px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header > .d-flex { gap: 8px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header .cart-item-no { display: inline-flex !important; }
  /* number sits under the checkbox, in the left gutter */
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header .d-flex { flex-direction: column; align-items: flex-start; gap: 5px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body { padding: 8px 8px 6px 40px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body img { width: 52px !important; height: 52px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body .d-flex.gap-2\.5 { gap: 8px !important; margin-bottom: 4px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body a.fw-bold { font-size: 13px !important; margin-bottom: 0 !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body .small, html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body .font-monospace { font-size: 11px !important; line-height: 1.3 !important; margin: 0 !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top { padding-top: 6px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top > div > div[style*="border-radius"] { height: 30px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .btn-qty-minus, html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .btn-qty-plus { height: 30px; width: 32px; min-width: 32px; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .cart-qty-input { height: 30px !important; width: 46px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] strong.fs-6 { font-size: 14px !important; }
  /* notes: one slim line, grows when tapped */
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] textarea.editbox { height: 32px !important; min-height: 32px !important; max-height: 120px; padding: 5px 8px !important; font-size: 12px !important; line-height: 1.3 !important; resize: none; transition: height .15s ease; margin-top: 4px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] textarea.editbox:focus { height: 84px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] { margin-bottom: 6px !important; }
}

/* Cart phones round 3: subtotal on one line, notes block without extra height */
@media (max-width: 767.98px) {
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top > div:last-child { display: flex; align-items: baseline; gap: 6px; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top > div:last-child > span { display: inline !important; font-size: 11px !important; margin: 0 !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top > div:last-child > strong { line-height: 1.2 !important; font-size: 14px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .edit_tr { margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .edit_tr > span:empty, html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .edit_tr > .small:empty { display: none !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body { padding-bottom: 8px !important; }
}

/* Cart phones round 4: no empty strip under the notes box, subtotal amount never cut off */
@media (max-width: 767.98px) {
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .edit_tr > span { display: none !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .edit_tr { display: block !important; height: 36px !important; overflow: visible; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top > div:last-child { margin-left: auto; white-space: nowrap; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top > div:last-child > span { display: none !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .border-top > div:last-child > strong { font-size: 15px !important; }
}

/* Cart phones round 5: item number = small black tag on the photo corner, notes box shows its full hint, new Order Summary + checkout button */
@media (max-width: 767.98px) {
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header .d-flex { flex-direction: row !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header .cart-item-no { position: absolute !important; left: 38px; top: 6px; z-index: 3; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; box-shadow: 0 0 0 2px #ffffff; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header input.cart-checkbox { margin-top: 2px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] textarea.editbox { height: 46px !important; min-height: 46px !important; overflow: hidden !important; padding: 6px 8px !important; line-height: 1.3 !important; scrollbar-width: none; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] textarea.editbox:focus { height: 90px !important; overflow: auto !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .edit_tr { height: 50px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] textarea.editbox::-webkit-scrollbar { display: none; }

  /* Order summary */
  html body .agx-cart .col-12.order-1 > .bg-white { padding: 0 !important; border: 1px solid #e5e5e5 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; }
  html body .agx-cart .col-12.order-1 > .bg-white > h5 { margin: 0 !important; padding: 12px 14px !important; font-size: 15px !important; letter-spacing: .4px; text-transform: uppercase; background: #f7f7f5; border-bottom: 1px solid #e5e5e5 !important; }
  html body .agx-cart .col-12.order-1 > .bg-white > h5 i { color: #111111 !important; }
  html body .agx-cart .col-12.order-1 > .bg-white > .d-flex { padding: 10px 14px !important; margin: 0 !important; border-bottom: 1px dashed #e9e9e9; font-size: 13px !important; }
  html body .agx-cart .col-12.order-1 > .bg-white > .d-flex .badge { border-radius: 0 !important; font-size: 11px !important; }
  html body .agx-cart .agx-cart-total { display: flex !important; align-items: center; justify-content: space-between; padding: 14px !important; margin: 0 !important; border: 0 !important; background: #ffffff; }
  html body .agx-cart .agx-cart-total-label { font-size: 13px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #111111 !important; display: block; }
  html body .agx-cart .agx-cart-total small { font-size: 11px !important; color: #6b7280 !important; }
  html body .agx-cart .agx-cart-total-value, html body .agx-cart .agx-cart-total-value strong { font-size: 22px !important; font-weight: 800 !important; color: #111111 !important; letter-spacing: -.2px; }
  html body .agx-cart .col-12.order-1 > .bg-white > a, html body .agx-cart .col-12.order-1 > .bg-white > button, html body .agx-cart .col-12.order-1 > .bg-white > div:has(> #checkout_btn) { margin: 0 14px 14px !important; display: block; width: calc(100% - 28px); }
  html body .agx-cart #checkout_btn { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100% !important; min-height: 52px !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .4px; text-transform: uppercase; background: #111111 !important; border: 1px solid #111111 !important; border-radius: 0 !important; color: #ffffff !important; box-shadow: none !important; }
  html body .agx-cart #checkout_btn:hover, html body .agx-cart #checkout_btn:active { background: #333333 !important; border-color: #333333 !important; }
  html body .agx-cart #checkout_btn.disabled, html body .agx-cart #checkout_btn[disabled] { background: #b8b8b8 !important; border-color: #b8b8b8 !important; }
  /* guidelines box smaller */
  html body .agx-cart .col-12.order-2 > div, html body .agx-cart .col-lg-6.order-2 > div { padding: 12px 14px !important; border-radius: 0 !important; box-shadow: none !important; }
  html body .agx-cart .col-12.order-2 h5, html body .agx-cart .col-lg-6.order-2 h5 { font-size: 14px !important; }
  html body .agx-cart .col-12.order-2 li, html body .agx-cart .col-lg-6.order-2 li { font-size: 12px !important; line-height: 1.5 !important; margin-bottom: 6px !important; }
}

/* Cart delete (trash) buttons: hover only turns the icon red, never a filled red box (all widths) */
html body .agx-cart .btn-delete-single-cart, html body .agx-cart .btn-delete-single-cart:hover, html body .agx-cart .btn-delete-single-cart:focus, html body .agx-cart .btn-delete-single-cart:active,
html body .agx-cart button.text-danger:hover, html body .agx-cart a.text-danger:hover {
  background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; }
html body .agx-cart .btn-delete-single-cart:hover i, html body .agx-cart .btn-delete-single-cart:focus i { color: #c62828 !important; }
html body .agx-cart .btn-delete-single-cart i { color: #9ca3af; transition: color .15s ease; }
/* "Delete Selected": light red tint on hover, text stays readable */
html body .agx-cart #empty_cart_button_mobile:hover, html body .agx-cart .btn-outline-danger:hover { background: #fdecec !important; color: #c62828 !important; border-color: #c62828 !important; box-shadow: none !important; }

/* Cart item number: plain "1." in front of the product name (no tag on the photo, nothing under the checkbox) */
html body .cart-name-no { display: none; }
@media (max-width: 767.98px) {
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-header .cart-item-no { display: none !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .cart-name-no { display: inline; color: #6b7280; font-weight: 800; margin-right: 2px; }
}

/* Order Summary heading: the receipt icon is not in the icon subset (showed a black square): text only */
@media (max-width: 767.98px) { html body .agx-cart .col-12.order-1 > .bg-white > h5 > i { display: none !important; } }

/* Cart item number: small black square tag in front of the product name */
@media (max-width: 767.98px) {
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .cart-name-no { display: inline-flex !important; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-right: 6px !important; background: #111111; color: #ffffff !important; font-size: 11.5px; font-weight: 700 !important; line-height: 1; vertical-align: 1px; letter-spacing: 0; }
}

/* Cart notes box: when tapped, the box grows INSIDE the card (the card grows with it), calm black focus line instead of the red glow */
@media (max-width: 767.98px) {
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .edit_tr:focus-within { height: auto !important; min-height: 98px; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] textarea.editbox:focus { height: 90px !important; min-height: 90px !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body:focus-within { padding-bottom: 12px !important; }
}
html body .agx-cart textarea.editbox:focus, html body .agx-cart textarea.editbox:focus-visible { border-color: #111111 !important; box-shadow: none !important; outline: 0 !important; background: #ffffff !important; }

/* Cart item note (phones): closed = one slim "+ Add a note for this item" button, tap = the note box opens right under it.
   A saved note stays open, with a green "Note saved" tag. */
@media (max-width: 767.98px) {
  html body .agx-cart .cart-note-wrap { margin-top: 6px; }
  html body .agx-cart .cart-note-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: #fafaf8; border: 1px dashed #cfcfcf; border-radius: 0; color: #374151; font-size: 12.5px; font-weight: 600; text-align: left; line-height: 1.2; cursor: pointer; }
  html body .agx-cart .cart-note-toggle:hover, html body .agx-cart .cart-note-toggle:focus { background: #f3f3f0; border-color: #9ca3af; outline: 0; box-shadow: none; }
  html body .agx-cart .cart-note-toggle .cn-plus { position: relative; flex: 0 0 16px; width: 16px; height: 16px; background: #111111; }
  html body .agx-cart .cart-note-toggle .cn-plus::before, html body .agx-cart .cart-note-toggle .cn-plus::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: #ffffff; }
  html body .agx-cart .cart-note-toggle .cn-plus::after { transform: rotate(90deg); transition: transform .15s ease; }
  html body .agx-cart .cart-note-wrap.is-open .cn-plus::after { transform: rotate(0deg); }
  html body .agx-cart .cart-note-toggle .cn-open { display: none; }
  html body .agx-cart .cart-note-wrap.is-open .cn-add { display: none; }
  html body .agx-cart .cart-note-wrap.is-open .cn-open { display: inline; }
  html body .agx-cart .cart-note-wrap.is-open .cart-note-toggle { background: #ffffff; border-style: solid; border-color: #d4d4d4; border-bottom-color: transparent; }
  html body .agx-cart .cart-note-toggle .cn-saved { margin-left: auto; color: #1a7f37; font-size: 11px; font-weight: 700; white-space: nowrap; }
  html body .agx-cart .cart-note-toggle .cn-saved::before { content: "\2713 "; }
  html body .agx-cart .cart-note-wrap:not(.is-open) .edit_tr { display: none !important; }
  html body .agx-cart .cart-note-wrap.is-open .edit_tr { display: block !important; height: auto !important; min-height: 0 !important; border: 1px solid #d4d4d4; border-top: 0; padding: 0 !important; }
  html body .agx-cart .cart-note-wrap.is-open textarea.editbox { height: 76px !important; min-height: 76px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 8px 10px !important; font-size: 13px !important; line-height: 1.4 !important; overflow: auto !important; resize: none; background: #ffffff !important; box-shadow: none !important; }
  html body .agx-cart .cart-note-wrap.is-open textarea.editbox:focus { height: 76px !important; min-height: 76px !important; }
  html body .agx-cart .cart-note-wrap .edit_tr > span { display: block !important; padding: 0 10px 6px; font-size: 11px !important; color: #6b7280 !important; }
  html body .agx-cart .cart-note-wrap .edit_tr > span:empty { display: none !important; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .card-body:focus-within { padding-bottom: 8px !important; }
}

/* Cart item number: plain bold number "1." (no black box) */
@media (max-width: 767.98px) {
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .cart-name-no { display: inline !important; min-width: 0; height: auto; padding: 0; margin-right: 4px !important; background: transparent !important; color: #111111 !important; font-size: inherit; font-weight: 800 !important; vertical-align: baseline; }
  html body .agx-cart .cms-cart-mobile-cards [id^="cart_row_mob_"] .cart-name-no::after { content: "."; }
}

/* Cart note toggle: show only ONE label (closed = "Add a note...", open = "Your note...") */
@media (max-width: 767.98px) {
  html body .agx-cart .cart-note-toggle .cn-add { display: inline !important; }
  html body .agx-cart .cart-note-toggle .cn-open { display: none !important; }
  html body .agx-cart .cart-note-wrap.is-open .cart-note-toggle .cn-add { display: none !important; }
  html body .agx-cart .cart-note-wrap.is-open .cart-note-toggle .cn-open { display: inline !important; }
}

/* Product cards, desktop / laptop: Size and MOQ cells identical - label and value both centred in their half, equal padding, one divider */
@media (min-width: 992px) {
  html body .single_product .product-detail-list ul li, html body .single_product .product-detail-list ul li .list-label, html body .single_product .product-detail-list ul li .list-value { text-align: center !important; }
  html body .single_product .product-detail-list ul li:not(.is-code) { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; padding: 2px 6px !important; min-width: 0; }
  html body .single_product .product-detail-list ul li:not(.is-code) .list-label { margin: 0 0 2px !important; width: 100%; }
  html body .single_product .product-detail-list ul li:not(.is-code) .list-value { width: 100%; white-space: normal !important; }
  html body .single_product .product-detail-list ul li:nth-child(3) { border-left: 1px solid #ececec !important; }
  html body .single_product .product-detail-list ul li:nth-child(2):last-child { grid-column: 1 / -1; }
}

/* Cards, laptop / desktop: Size and MOQ always stacked and centred (the first card of a row sometimes showed "SIZE 1-2 Inch" on one line) */
@media (min-width: 992px) {
  html body .single_product .product-detail-list ul { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  html body .single_product .product-detail-list ul li:not(.is-code) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; text-align: center !important; }
  html body .single_product .product-detail-list ul li:not(.is-code) .list-label, html body .single_product .product-detail-list ul li:not(.is-code) .list-value { display: block !important; width: 100% !important; text-align: center !important; float: none !important; }
  html body .single_product .product-detail-list ul li.is-code { grid-column: 1 / -1 !important; display: block !important; text-align: center !important; }
}

/* ===== Product description: easy to read (owner 2026-10-29) =====
   comfortable line length (about 85 characters), clear heading rhythm, benefit lists with check marks, the facts list as a tidy
   two-column spec sheet, calm colours. Text itself is unchanged. */
html body .product-description-area .product_desc { max-width: 900px; margin: 0 auto 0 0; }
html body .product-description-area .product_desc > p { font-size: 16px; line-height: 1.8; color: #374151; margin: 0 0 16px; text-align: left; }
html body .product-description-area .product_desc > p:first-child { font-size: 17.5px; line-height: 1.7; color: #111827; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid #ececec; }
html body .product-description-area .product_desc h3 { margin: 30px 0 12px !important; padding: 0 0 8px !important; border: 0 !important; border-bottom: 1px solid #e5e5e5 !important; background: transparent !important; font-size: 19px !important; font-weight: 800; color: #111111; line-height: 1.3; letter-spacing: 0; position: relative; }
html body .product-description-area .product_desc h3::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px; background: #111111; }
/* benefit lists = check marks */
html body .product-description-area .product_desc ul { list-style: none !important; margin: 4px 0 18px !important; padding: 0 !important; background: transparent !important; border: 0 !important; display: block; columns: 1; }
html body .product-description-area .product_desc ul li { position: relative; padding: 7px 0 7px 28px !important; margin: 0 !important; font-size: 15.5px; line-height: 1.6; color: #374151; border: 0 !important; border-bottom: 1px dashed #ececec !important; background: transparent !important; }
html body .product-description-area .product_desc ul li:last-child { border-bottom: 0 !important; }
html body .product-description-area .product_desc ul li::before { content: "\2713"; position: absolute; left: 4px; top: 7px; color: #1a7f37; font-weight: 800; font-size: 14px; }
/* the facts list (last list: "Product Code: ..., Size: ...") = spec sheet, two columns on laptops, label in bold */
html body .product-description-area .product_desc > ul:last-of-type { background: #fafaf8 !important; border: 1px solid #ececec !important; padding: 6px 16px !important; }
html body .product-description-area .product_desc > ul:last-of-type li::before { content: ""; }
html body .product-description-area .product_desc > ul:last-of-type li { padding-left: 0 !important; }
@media (min-width: 992px) {
  html body .product-description-area .product_desc > ul:last-of-type { columns: 2; column-gap: 36px; }
  html body .product-description-area .product_desc > ul:last-of-type li { break-inside: avoid; }
}
@media (max-width: 767.98px) {
  html body .product-description-area .product_desc { max-width: none; }
  html body .product-description-area .product_desc > p { font-size: 15px; line-height: 1.75; }
  html body .product-description-area .product_desc > p:first-child { font-size: 16px; }
  html body .product-description-area .product_desc h3 { font-size: 17px !important; margin: 24px 0 10px !important; }
  html body .product-description-area .product_desc ul li { font-size: 14.5px; padding-top: 6px !important; padding-bottom: 6px !important; }
}

/* Mini cart (header dropdown): the same compact look on EVERY page. The product page styles .new-price as a huge price and it leaked into the
   dropdown right after "Add to cart" (a refresh used a different rule set). */
html body .mini-cart-dropdown .mini-cart .cart-item .quanti-price-wrap { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
html body .mini-cart-dropdown .mini-cart .cart-item .quantity { font-size: 13px !important; color: #6b7280 !important; font-weight: 500 !important; }
html body .mini-cart-dropdown .mini-cart .cart-item .price-box, html body .mini-cart-dropdown .mini-cart .cart-item .price-box .new-price, html body .mini-cart-dropdown .mini-cart .cart-item .price-box .new-price * { font-size: 13px !important; line-height: 1.3 !important; font-weight: 600 !important; color: #374151 !important; letter-spacing: 0 !important; margin: 0 !important; }
html body .mini-cart-dropdown .mini-cart .cart-item .price-box .login-price-link { font-size: 13px !important; }
html body .mini-cart-dropdown .mini-cart .cart-item .cart-title h4 { font-size: 13px !important; line-height: 1.35 !important; font-weight: 600 !important; margin: 0 !important; }
html body .mini-cart-dropdown .mini-cart .subtotal-title h3 { font-size: 14px !important; margin: 0 !important; }
html body .mini-cart-dropdown .mini-cart .subtotal-title span { font-size: 15px !important; font-weight: 800 !important; color: #111111 !important; }

/* Description on wide screens: use the whole width, two reading columns (about 70 characters each) instead of one column with empty space on the right */
@media (min-width: 1200px) {
  html body .product-description-area .product_desc { max-width: none !important; margin: 0 !important; column-count: 2; column-gap: 72px; column-rule: 1px solid #efefef; }
  html body .product-description-area .product_desc > p:first-child { column-span: all; max-width: 1180px; font-size: 18px; margin-bottom: 14px; }
  html body .product-description-area .product_desc > ul:last-of-type { column-span: all; columns: 3; column-gap: 40px; column-rule: 0; }
  html body .product-description-area .product_desc h3 { break-after: avoid; break-inside: avoid; margin-top: 8px !important; }
  html body .product-description-area .product_desc ul, html body .product-description-area .product_desc p { break-inside: avoid; }
  html body .product-description-area .product_desc > p, html body .product-description-area .product_desc > ul { orphans: 3; widows: 3; }
}

/* Mini cart with many items: slim grey scrollbar that sits OUTSIDE the content, trash button fully visible */
html body .mini-cart-dropdown .mini-cart ul.max-450 { max-height: 340px; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 0 8px 0 0 !important; scrollbar-width: thin; scrollbar-color: #c9c9c9 transparent; }
html body .mini-cart-dropdown .mini-cart ul.max-450::-webkit-scrollbar { width: 6px; }
html body .mini-cart-dropdown .mini-cart ul.max-450::-webkit-scrollbar-track { background: transparent; }
html body .mini-cart-dropdown .mini-cart ul.max-450::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 3px; }
html body .mini-cart-dropdown .mini-cart ul.max-450::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
html body .mini-cart-dropdown .mini-cart .cart-item { position: relative; padding-right: 38px !important; }
html body .mini-cart-dropdown .mini-cart .cart-item .cart-title { padding-right: 0 !important; }
html body .mini-cart-dropdown .mini-cart .cart-item .remove_from_cart { position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%); width: 28px; height: 28px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #9ca3af !important; }
html body .mini-cart-dropdown .mini-cart .cart-item .remove_from_cart:hover { color: #c62828 !important; background: transparent !important; }

/* Cart table (laptop / desktop): the note column is ONE slim row "+ Add a note for this item"; tap = the box opens under it. Rows stay short,
   a saved note stays open with a green "Note saved" tag. (Phones have the same pattern above.) */
@media (min-width: 768px) {
  html body .agx-cart table .cart-note-wrap { margin: 0; }
  html body .agx-cart table .cart-note-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: #fafaf8; border: 1px dashed #cfcfcf; border-radius: 0; color: #374151; font-size: 13px; font-weight: 600; text-align: left; line-height: 1.2; cursor: pointer; }
  html body .agx-cart table .cart-note-toggle:hover, html body .agx-cart table .cart-note-toggle:focus { background: #f3f3f0; border-color: #9ca3af; outline: 0; box-shadow: none; }
  html body .agx-cart table .cart-note-toggle .cn-plus { position: relative; flex: 0 0 16px; width: 16px; height: 16px; background: #111111; }
  html body .agx-cart table .cart-note-toggle .cn-plus::before, html body .agx-cart table .cart-note-toggle .cn-plus::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: #ffffff; }
  html body .agx-cart table .cart-note-toggle .cn-plus::after { transform: rotate(90deg); transition: transform .15s ease; }
  html body .agx-cart table .cart-note-wrap.is-open .cn-plus::after { transform: rotate(0deg); }
  html body .agx-cart table .cart-note-toggle .cn-add { display: inline !important; }
  html body .agx-cart table .cart-note-toggle .cn-open { display: none !important; }
  html body .agx-cart table .cart-note-wrap.is-open .cart-note-toggle .cn-add { display: none !important; }
  html body .agx-cart table .cart-note-wrap.is-open .cart-note-toggle .cn-open { display: inline !important; }
  html body .agx-cart table .cart-note-wrap.is-open .cart-note-toggle { background: #ffffff; border-style: solid; border-color: #d4d4d4; border-bottom-color: transparent; }
  html body .agx-cart table .cart-note-toggle .cn-saved { margin-left: auto; color: #1a7f37; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
  html body .agx-cart table .cart-note-toggle .cn-saved::before { content: "\2713 "; }
  html body .agx-cart table .cart-note-wrap:not(.is-open) .edit_tr { display: none !important; }
  html body .agx-cart table .cart-note-wrap.is-open .edit_tr { display: block !important; border: 1px solid #d4d4d4; border-top: 0; padding: 0 !important; }
  html body .agx-cart table .cart-note-wrap.is-open textarea.editbox { height: 84px !important; min-height: 84px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 8px 10px !important; font-size: 13px !important; line-height: 1.45 !important; resize: none; background: #ffffff !important; box-shadow: none !important; }
  html body .agx-cart table .cart-note-wrap .edit_tr > span { display: none !important; }
  html body .agx-cart table td { vertical-align: top !important; }
}

/* Cart page header + table head, laptop / desktop (owner 2026-10-29) */
@media (min-width: 768px) {
  html body .cart-hero-header { margin-bottom: 14px !important; }
  html body .cart-hero-header > div { padding: 18px 22px !important; border: 0 !important; border-left: 4px solid #111111 !important; border-radius: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; background: #ffffff !important; align-items: center !important; }
  html body .cart-hero-header .badge.bg-warning { display: none !important; }
  html body .cart-hero-header h3 { font-size: 26px !important; font-weight: 800 !important; letter-spacing: .3px; text-transform: uppercase; color: #111111 !important; margin: 0 !important; line-height: 1.1; }
  html body .cart-hero-header h3::after { content: "Review your items, add notes if you like, then proceed to checkout."; display: block; margin-top: 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6b7280; }
  html body .cart-hero-header .badge.bg-dark { background: #f3f3f0 !important; color: #111111 !important; border: 1px solid #e2e2de; border-radius: 0 !important; font-size: 13px !important; font-weight: 700; padding: 9px 16px !important; }
  /* table head */
  html body .agx-cart table thead th { background: #1f2937 !important; color: #ffffff !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .8px; text-transform: uppercase; padding: 13px 14px !important; border-color: #2d3748 !important; vertical-align: middle; white-space: nowrap; }
  html body .agx-cart table thead th:first-child, html body .agx-cart table thead th:nth-child(2) { text-align: center; }
  html body .agx-cart table thead th input[type="checkbox"] { width: 16px; height: 16px; accent-color: #111111; }
  html body .agx-cart table tbody td { border-color: #ececec !important; }
}

/* Cart notes: an item WITH a note is clearly marked (green tint, green left bar, "Note: first words..." and a "Note added" tag), also when the box is closed */
html body .agx-cart .cart-note-wrap.has-note .cart-note-toggle { background: #f1f8f3 !important; border: 1px solid #b7dcc1 !important; border-left: 4px solid #1a7f37 !important; color: #14532d !important; }
html body .agx-cart .cart-note-wrap.has-note .cart-note-toggle .cn-plus { background: #1a7f37 !important; }
html body .agx-cart .cart-note-wrap.has-note .cart-note-toggle .cn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
html body .agx-cart .cart-note-wrap.has-note .cart-note-toggle .cn-saved { flex: 0 0 auto; background: #1a7f37; color: #ffffff !important; padding: 2px 7px; font-size: 10.5px; letter-spacing: .3px; text-transform: uppercase; }
html body .agx-cart .cart-note-wrap.has-note .cart-note-toggle .cn-saved::before { content: "\2713\00a0"; }
html body .agx-cart .cart-note-wrap.has-note.is-open .cart-note-toggle { border-bottom-color: transparent !important; }
html body .agx-cart .cart-note-wrap.has-note.is-open .edit_tr { border-color: #b7dcc1 !important; border-left: 4px solid #1a7f37 !important; }

/* has-note marker: same rules with the table selector so they win on desktop */
html body .agx-cart table .cart-note-wrap.has-note .cart-note-toggle { background: #f1f8f3 !important; border: 1px solid #b7dcc1 !important; border-left: 4px solid #1a7f37 !important; color: #14532d !important; }
html body .agx-cart table .cart-note-wrap.has-note .cart-note-toggle .cn-plus { background: #1a7f37 !important; }
html body .agx-cart table .cart-note-wrap.has-note .cart-note-toggle .cn-saved { background: #1a7f37 !important; color: #ffffff !important; padding: 2px 7px !important; font-size: 10.5px !important; letter-spacing: .3px; text-transform: uppercase; }
html body .agx-cart table .cart-note-wrap.has-note .cart-note-toggle .cn-add { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
html body .agx-cart table .cart-note-wrap.has-note.is-open .cart-note-toggle { border-bottom-color: transparent !important; }
html body .agx-cart table .cart-note-wrap.has-note.is-open .edit_tr { border: 1px solid #b7dcc1 !important; border-top: 0 !important; border-left: 4px solid #1a7f37 !important; }

/* ===== Description v3: sections as cards ===== (JS in products/detail.php groups each heading with its text; nothing is removed)
   lead sentence on top, section cards side by side on laptops, the product facts as a full-width spec sheet, manufacturer note as a calm callout. */
html body .product-description-area .product_desc { column-count: auto !important; column-rule: 0 !important; max-width: none !important; margin: 0 !important; }
html body .product-description-area .product_desc .pd-lead { max-width: 1100px; margin: 0 0 18px; }
html body .product-description-area .product_desc .pd-lead > p { font-size: 18px; line-height: 1.7; color: #111827; margin: 0; padding: 0 0 16px; border-bottom: 1px solid #ececec; }
html body .product-description-area .product_desc .pd-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
html body .product-description-area .product_desc .pd-sec { background: #ffffff; border: 1px solid #ececec; padding: 18px 22px 8px; min-width: 0; }
html body .product-description-area .product_desc .pd-sec h3 { margin: 0 0 12px !important; padding: 0 0 10px !important; font-size: 18px !important; border-bottom: 1px solid #e5e5e5 !important; break-after: auto; }
html body .product-description-area .product_desc .pd-sec p { font-size: 15.5px; line-height: 1.75; color: #374151; margin: 0 0 14px; max-width: 68ch; }
html body .product-description-area .product_desc .pd-sec p.pd-note { max-width: none; background: #fff8e6; border: 1px solid #ffe2a3; border-left: 4px solid #e08a00; padding: 12px 16px; color: #5a4300; font-size: 15px; line-height: 1.65; }
html body .product-description-area .product_desc .pd-sec ul { margin: 4px 0 12px !important; }
html body .product-description-area .product_desc .pd-sec.pd-facts { background: #fafaf8; }
html body .product-description-area .product_desc .pd-sec.pd-facts ul { background: transparent !important; border: 0 !important; padding: 0 !important; columns: 1; }
html body .product-description-area .product_desc .pd-sec.pd-facts ul li { padding-left: 0 !important; }
html body .product-description-area .product_desc .pd-sec.pd-facts ul li::before { content: ""; }
@media (min-width: 1100px) {
  html body .product-description-area .product_desc .pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  html body .product-description-area .product_desc .pd-sec.pd-facts { grid-column: 1 / -1; }
  html body .product-description-area .product_desc .pd-sec:nth-last-child(2):nth-child(odd):not(.pd-facts) { grid-column: 1 / -1; }
  html body .product-description-area .product_desc .pd-sec.pd-facts ul { columns: 3; column-gap: 40px; }
  html body .product-description-area .product_desc .pd-sec.pd-facts ul li { break-inside: avoid; }
}
@media (max-width: 767.98px) {
  html body .product-description-area .product_desc .pd-lead > p { font-size: 16px; }
  html body .product-description-area .product_desc .pd-sec { padding: 14px 14px 4px; border-left: 0; border-right: 0; }
  html body .product-description-area .product_desc .pd-sec h3 { font-size: 16.5px !important; }
  html body .product-description-area .product_desc .pd-sec p { font-size: 14.5px; }
}

/* Cart checkboxes: black when ticked (they were orange) */
html body .agx-cart input[type="checkbox"], html body .agx-cart .form-check-input { accent-color: #111111; }
html body .agx-cart .form-check-input:checked, html body .agx-cart input[type="checkbox"].cart-checkbox:checked { background-color: #111111 !important; border-color: #111111 !important; }
html body .agx-cart .form-check-input:focus { box-shadow: 0 0 0 3px rgba(17,17,17,.15) !important; border-color: #111111 !important; }

/* Order summary + checkout button, laptop / desktop (same look as the phone cart) */
@media (min-width: 768px) {
  html body .agx-cart .col-lg-6.order-1 > .bg-white { padding: 0 !important; border: 1px solid #e5e5e5 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; }
  html body .agx-cart .col-lg-6.order-1 > .bg-white > h5 { margin: 0 !important; padding: 14px 22px !important; font-size: 15px !important; letter-spacing: .6px; text-transform: uppercase; background: #f7f7f5; border-bottom: 1px solid #e5e5e5 !important; }
  html body .agx-cart .col-lg-6.order-1 > .bg-white > h5 > i { display: none !important; }
  html body .agx-cart .col-lg-6.order-1 > .bg-white > .d-flex { padding: 14px 22px !important; margin: 0 !important; border-bottom: 1px dashed #e9e9e9; font-size: 14px !important; }
  html body .agx-cart .col-lg-6.order-1 > .bg-white > .d-flex .badge { border-radius: 0 !important; }
  html body .agx-cart .col-lg-6.order-1 .agx-cart-total { display: flex !important; align-items: center; justify-content: space-between; padding: 18px 22px !important; margin: 0 !important; border: 0 !important; }
  html body .agx-cart .col-lg-6.order-1 .agx-cart-total-label { font-size: 14px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #111111 !important; display: block; }
  html body .agx-cart .col-lg-6.order-1 .agx-cart-total small { font-size: 12px !important; color: #6b7280 !important; }
  html body .agx-cart .col-lg-6.order-1 .agx-cart-total-value, html body .agx-cart .col-lg-6.order-1 .agx-cart-total-value strong { font-size: 28px !important; font-weight: 800 !important; color: #111111 !important; letter-spacing: -.3px; }
  html body .agx-cart .col-lg-6.order-1 > .bg-white > a:has(#checkout_btn), html body .agx-cart .col-lg-6.order-1 > .bg-white > div:has(> #checkout_btn) { display: block; margin: 0 22px 22px !important; }
  html body .agx-cart #checkout_btn { display: flex !important; align-items: center; justify-content: center; gap: 12px; width: 100% !important; min-height: 56px !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .5px; text-transform: uppercase; background: #111111 !important; border: 1px solid #111111 !important; border-radius: 0 !important; color: #ffffff !important; box-shadow: none !important; transition: background .15s ease; }
  html body .agx-cart #checkout_btn:hover { background: #333333 !important; }
}

/* ===== Checkout order summary (owner 2026-10-29) =====
   numbered rows: 1 | photo | name, code, "30 x $3.30" ......... line total (right); big Subtotal and Total; no orange; no scrollbar over the numbers */
html body form[name="checkout"] .order-summary-product-list { max-height: 520px !important; padding-right: 4px !important; scrollbar-width: thin; scrollbar-color: #c9c9c9 transparent; }
html body form[name="checkout"] .order-summary-product-list::-webkit-scrollbar { width: 6px; }
html body form[name="checkout"] .order-summary-product-list::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 3px; }
html body form[name="checkout"] .co-item { background: #ffffff !important; border: 1px solid #ececec !important; border-radius: 0 !important; padding: 10px 12px !important; margin-bottom: 8px !important; gap: 10px; align-items: center !important; }
html body form[name="checkout"] .co-no { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: #111111; color: #ffffff; font-size: 12px; font-weight: 700; line-height: 1; }
html body form[name="checkout"] .co-item img { border-radius: 0 !important; }
html body form[name="checkout"] .co-item h6 { font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 0 0 4px !important; color: #111111; }
html body form[name="checkout"] .co-item .badge { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 8px 0 0 !important; font-size: 12px !important; color: #6b7280 !important; font-weight: 500; }
html body form[name="checkout"] .co-qty { display: inline-block; font-size: 13.5px; color: #374151; }
html body form[name="checkout"] .co-qty strong { color: #111111; font-weight: 800; }
html body form[name="checkout"] .co-x { color: #9ca3af; margin: 0 2px; }
html body form[name="checkout"] .co-line-total { font-size: 17px; font-weight: 800; color: #111111; letter-spacing: -.2px; }
html body form[name="checkout"] .co-subtotal { padding: 16px 0 12px; border-top: 2px solid #111111; margin-top: 6px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #111111; }
html body form[name="checkout"] .co-subtotal small { text-transform: none; letter-spacing: 0; font-weight: 500; color: #6b7280; font-size: 12.5px; margin-left: 6px; }
html body form[name="checkout"] .co-subtotal strong { font-size: 24px !important; font-weight: 800; color: #111111 !important; letter-spacing: -.3px; }
html body form[name="checkout"] .bg-light.rounded-3.border.mb-3 { background: #f7f7f5 !important; border: 1px solid #111111 !important; border-radius: 0 !important; padding: 16px 18px !important; }
html body form[name="checkout"] .bg-light.rounded-3.border.mb-3 .fs-6 { font-size: 15px !important; text-transform: uppercase; letter-spacing: .5px; }
html body form[name="checkout"] .bg-light.rounded-3.border.mb-3 .text-warning { color: #111111 !important; font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.4px; }
html body form[name="checkout"] .bg-white.p-4 h5 i.text-warning { color: #111111 !important; }
@media (max-width: 575.98px) {
  html body form[name="checkout"] .co-item { flex-wrap: nowrap; padding: 8px 10px !important; }
  html body form[name="checkout"] .co-line-total { font-size: 15px; }
  html body form[name="checkout"] .co-subtotal strong { font-size: 21px !important; }
  html body form[name="checkout"] .bg-light.rounded-3.border.mb-3 .text-warning { font-size: 26px !important; }
}

/* "Shipping Charges ... Added after your order": plain calm text instead of the yellow pill with tiny letters */
html body .ship-note { display: inline-block; font-size: 13.5px; font-weight: 600; color: #4b5563; background: transparent; border: 0; padding: 0; text-align: right; }
html body form[name="checkout"] .d-flex:has(> .ship-note), html body .agx-cart .d-flex:has(> .ship-note) { padding: 12px 0; border-bottom: 1px dashed #e5e5e5; font-size: 14px; color: #374151 !important; }
html body form[name="checkout"] .d-flex:has(> .ship-note) > span:first-child, html body .agx-cart .d-flex:has(> .ship-note) > span:first-child { font-weight: 600; color: #111111; }
@media (max-width: 575.98px) { html body .ship-note { font-size: 12.5px; } }

/* "Saved to your account" tag in the checkout address card */
html body .addr-save-status { margin-left: 12px; font-size: 12.5px; font-weight: 600; color: #6b7280; letter-spacing: 0; text-transform: none; }
html body .addr-save-status.is-ok { color: #1a7f37; }
html body .addr-save-status.is-busy { color: #9ca3af; }

/* Checkout page header: calm card with title, short sentence, 3 steps (Cart > Checkout > Order placed) and a green verified tag */
html body .checkout-hero-header .co-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; background: #ffffff; border: 0; border-left: 4px solid #111111; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 18px 22px; }
html body .checkout-hero-header .co-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .2px; color: #111111; line-height: 1.15; }
html body .checkout-hero-header .co-sub { margin: 6px 0 0; font-size: 13.5px; color: #6b7280; max-width: 560px; line-height: 1.5; }
html body .checkout-hero-header .co-steps { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
html body .checkout-hero-header .co-steps li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #9ca3af; }
html body .checkout-hero-header .co-steps li + li::before { content: ""; display: inline-block; width: 28px; height: 2px; background: #e0e0dc; margin: 0 10px; }
html body .checkout-hero-header .co-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid #d4d4d0; color: #9ca3af; font-size: 12px; font-weight: 700; line-height: 1; }
html body .checkout-hero-header .co-steps li.is-done { color: #1a7f37; }
html body .checkout-hero-header .co-steps li.is-done span { background: #1a7f37; border-color: #1a7f37; color: #ffffff; }
html body .checkout-hero-header .co-steps li.is-current { color: #111111; }
html body .checkout-hero-header .co-steps li.is-current span { background: #111111; border-color: #111111; color: #ffffff; }
html body .checkout-hero-header .co-verified { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #1a7f37; background: #f1f8f3; border: 1px solid #b7dcc1; padding: 7px 12px; }
@media (max-width: 767.98px) {
  html body .checkout-hero-header .co-hero { padding: 14px 14px; gap: 12px; }
  html body .checkout-hero-header .co-title { font-size: 20px; }
  html body .checkout-hero-header .co-sub { font-size: 12.5px; }
  html body .checkout-hero-header .co-steps li { font-size: 12px; }
  html body .checkout-hero-header .co-steps li + li::before { width: 14px; margin: 0 6px; }
  html body .checkout-hero-header .co-verified { font-size: 12px; padding: 5px 9px; }
}

/* Checkout: explicit "Save these details to my account" button under the address fields */
html body .addr-save-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 4px; padding-top: 14px; border-top: 1px dashed #e5e5e5; }
html body .addr-save-btn { background: #ffffff; color: #111111; border: 2px solid #111111; border-radius: 0; padding: 11px 20px; font-size: 14px; font-weight: 700; letter-spacing: .2px; cursor: pointer; transition: background .15s ease, color .15s ease; }
html body .addr-save-btn:hover:not(:disabled) { background: #111111; color: #ffffff; }
html body .addr-save-btn:disabled { opacity: .6; cursor: default; }
html body .addr-save-note { font-size: 13px; color: #6b7280; line-height: 1.4; flex: 1 1 260px; }
html body .addr-save-note.is-ok { color: #1a7f37; font-weight: 600; }
html body .addr-save-note.is-warn { color: #b45309; font-weight: 600; }
html body .addr-save-note.is-err { color: #c62828; font-weight: 600; }
@media (max-width: 575.98px) { html body .addr-save-btn { width: 100%; } }

/* Save-details row: hidden until the customer types something; small button */
html body .addr-save-row { display: none !important; }
html body .addr-save-row.is-visible { display: flex !important; }
html body .addr-save-btn { padding: 7px 14px !important; font-size: 13px !important; border-width: 1px !important; font-weight: 600 !important; }
html body .addr-save-note { font-size: 12.5px !important; }
html body form[name="checkout"] .addr-save-btn { min-height: 0 !important; height: 34px !important; width: auto !important; min-width: 0 !important; padding: 0 16px !important; font-size: 13px !important; line-height: 1 !important; letter-spacing: 0 !important; }

/* ===== Thank-you page (order placed), all screens: calm square cards in the theme colours (black / green), shorter steps, readable text ===== */
html body .oty-wrap { background: #fafaf8 !important; padding: 36px 0 56px !important; }
html body .oty-check { width: 76px !important; height: 76px !important; background: #1a7f37 !important; color: #ffffff !important; box-shadow: 0 0 0 10px #e6f3ea !important; font-size: 34px !important; }
html body .oty-hero { margin-bottom: 26px !important; }
html body .oty-hero h1 { font-size: 32px !important; font-weight: 800 !important; color: #111111 !important; letter-spacing: 0; }
html body .oty-hero .oty-num { border-radius: 0 !important; border: 1px solid #d9d9d6 !important; background: #ffffff !important; padding: 7px 18px !important; font-size: 15px !important; }
html body .oty-hero .oty-num strong { color: #111111 !important; font-size: 18px !important; }
html body .oty-hero p { font-size: 15.5px !important; line-height: 1.65 !important; color: #4b5563 !important; max-width: 680px; margin: 0 auto !important; }
html body .oty-hero p strong { color: #111111 !important; }
html body .oty-card { border-radius: 0 !important; border: 1px solid #e5e5e2 !important; box-shadow: none !important; background: #ffffff !important; padding: 26px 28px !important; }
html body .oty-card h2 { border-left: 0 !important; padding: 0 0 10px !important; margin: 0 0 18px !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: .6px; text-transform: uppercase; color: #111111 !important; border-bottom: 1px solid #ececec !important; position: relative; }
html body .oty-card h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px; background: #111111; }
/* steps */
html body .oty-steps { gap: 16px !important; }
html body .oty-steps li { background: #fafaf8 !important; border: 1px solid #ececec !important; border-radius: 0 !important; padding: 18px 18px 14px !important; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: start; }
html body .oty-steps .n { position: static !important; grid-row: 1 / span 3; width: 30px !important; height: 30px !important; border-radius: 0 !important; background: #111111 !important; color: #ffffff !important; font-size: 14px !important; top: auto !important; left: auto !important; }
html body .oty-steps i { display: none !important; }
html body .oty-steps strong { font-size: 15.5px !important; color: #111111 !important; margin: 0 0 4px !important; }
html body .oty-steps span:not(.n) { font-size: 14px !important; line-height: 1.6 !important; color: #4b5563 !important; }
html body .oty-tip { border-radius: 0 !important; background: #fff8e6 !important; border: 1px solid #ffe2a3 !important; border-left: 4px solid #e08a00 !important; padding: 12px 16px !important; font-size: 14px !important; line-height: 1.6 !important; }
/* summary */
html body .oty-meta b { font-size: 17px !important; color: #111111 !important; }
html body .oty-meta b.oty-code { color: #111111 !important; }
html body .oty-table th { background: #f3f3f0 !important; color: #374151 !important; font-size: 12px !important; letter-spacing: .6px; }
html body .oty-table td { font-size: 14.5px !important; padding: 13px 12px !important; }
html body .oty-item img { border-radius: 0 !important; }
html body .oty-totals { max-width: 420px !important; }
html body .oty-totals .row-t { font-size: 15px !important; padding: 6px 0 !important; }
html body .oty-due { border-radius: 0 !important; background: #f7f7f5 !important; border: 1px solid #111111 !important; padding: 14px 16px !important; margin-top: 10px !important; }
html body .oty-due strong { font-size: 15px !important; text-transform: uppercase; letter-spacing: .5px; }
html body .oty-due .amt { font-size: 26px !important; color: #111111 !important; font-weight: 800 !important; letter-spacing: -.3px; }
html body .oty-addr h6 { font-size: 14px !important; letter-spacing: .5px; text-transform: uppercase; color: #111111 !important; }
html body .oty-addr .comp { color: #111111 !important; font-weight: 700 !important; }
html body .oty-addr p, html body .oty-addr span { font-size: 14.5px !important; line-height: 1.6 !important; }
/* help box + buttons */
html body .oty-help { background: #111111 !important; border-radius: 0 !important; padding: 24px 28px !important; }
html body .oty-help h2 { color: #ffffff !important; border: 0 !important; text-transform: none; letter-spacing: 0; font-size: 20px !important; }
html body .oty-help h2::after { display: none; }
html body .oty-help p { color: #d1d5db !important; font-size: 14.5px !important; }
html body .oty-btn { border-radius: 0 !important; font-size: 14px !important; padding: 11px 20px !important; }
html body .oty-btn-gold { background: #ffffff !important; color: #111111 !important; }
html body .oty-btn-outline { border-color: #111111 !important; color: #111111 !important; }
html body .oty-btn:hover { transform: none !important; box-shadow: none !important; opacity: .9; }
@media (max-width: 767.98px) { html body .oty-steps li { grid-template-columns: 26px 1fr; padding: 14px 12px !important; } html body .oty-steps .n { width: 26px !important; height: 26px !important; } html body .oty-hero h1 { font-size: 24px !important; } html body .oty-card { padding: 16px 14px !important; } }

/* ===== Thank-you page v2 (order placed) =====
   hero with 3 facts, 3-step timeline, items + totals on the left, delivery / contact / help on the right (stacked on phones). */
html body .ty2 { background: #fafaf8; padding: 36px 0 60px; }
html body .ty2 .container { max-width: 1180px; }
html body .ty2-hero { text-align: center; max-width: 760px; margin: 0 auto 28px; }
html body .ty2-check { width: 72px; height: 72px; margin: 0 auto 14px; background: #1a7f37; color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; box-shadow: 0 0 0 10px #e6f3ea; }
html body .ty2-hero h1 { margin: 0 0 16px; font-size: 32px; font-weight: 800; color: #111111; line-height: 1.2; letter-spacing: 0; }
html body .ty2-facts { display: inline-flex; flex-wrap: wrap; justify-content: center; background: #ffffff; border: 1px solid #e5e5e2; margin: 0 0 16px; }
html body .ty2-facts > span { padding: 10px 22px; border-left: 1px solid #ececec; display: flex; flex-direction: column; align-items: center; gap: 2px; }
html body .ty2-facts > span:first-child { border-left: 0; }
html body .ty2-facts small { font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: #6b7280; }
html body .ty2-facts b { font-size: 18px; font-weight: 800; color: #111111; letter-spacing: -.2px; }
html body .ty2-hero p { margin: 0 auto; font-size: 15.5px; line-height: 1.7; color: #4b5563; }
html body .ty2-hero p strong { color: #111111; }
html body .ty2-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: #ffffff; border: 1px solid #e5e5e2; }
html body .ty2-steps li { padding: 20px 22px; border-left: 1px solid #ececec; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-content: start; }
html body .ty2-steps li:first-child { border-left: 0; }
html body .ty2-n { grid-row: 1 / span 2; width: 34px; height: 34px; border: 2px solid #d4d4d0; color: #9ca3af; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; line-height: 1; border-radius: 50%; }
html body .ty2-steps .is-done .ty2-n { background: #1a7f37; border-color: #1a7f37; color: #ffffff; }
html body .ty2-steps .is-next .ty2-n { background: #111111; border-color: #111111; color: #ffffff; }
html body .ty2-steps strong { font-size: 16px; font-weight: 800; color: #111111; line-height: 34px; }
html body .ty2-t { grid-column: 2; font-size: 13.5px; line-height: 1.65; color: #4b5563; margin-top: 2px; }
html body .ty2-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
html body .ty2-card { background: #ffffff; border: 1px solid #e5e5e2; padding: 24px 26px; }
html body .ty2-side { display: grid; gap: 22px; }
html body .ty2-card h2 { margin: 0 0 16px; padding: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #111111; border-bottom: 1px solid #ececec; position: relative; display: flex; align-items: baseline; justify-content: space-between; }
html body .ty2-card h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px; background: #111111; }
html body .ty2-card h2 small { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #6b7280; }
html body .ty2-row { display: grid; grid-template-columns: 24px 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed #e9e9e6; }
html body .ty2-no { font-size: 13px; font-weight: 800; color: #6b7280; text-align: center; }
html body .ty2-row img { width: 56px; height: 56px; object-fit: contain; border: 1px solid #eeeeee; background: #ffffff; padding: 3px; }
html body .ty2-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body .ty2-name strong { font-size: 14.5px; font-weight: 700; color: #111111; line-height: 1.35; }
html body .ty2-name small { font-size: 12px; color: #6b7280; }
html body .ty2-qty { font-size: 13.5px; color: #374151; }
html body .ty2-qty b { color: #111111; font-weight: 800; }
html body .ty2-line { font-size: 16px; font-weight: 800; color: #111111; white-space: nowrap; }
html body .ty2-totals { margin-top: 12px; }
html body .ty2-tr { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 14.5px; color: #374151; }
html body .ty2-tr b { color: #111111; font-weight: 700; }
html body .ty2-tr.is-green, html body .ty2-tr.is-green b { color: #1a7f37; }
html body .ty2-soft { color: #6b7280; font-weight: 600; font-size: 13.5px; }
html body .ty2-due { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 14px 16px; background: #f7f7f5; border: 1px solid #111111; font-size: 14px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #111111; }
html body .ty2-due b { font-size: 26px; letter-spacing: -.3px; text-transform: none; }
html body .ty2-addr { font-style: normal; display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; line-height: 1.55; color: #374151; margin: 0; }
html body .ty2-addr strong { font-size: 15.5px; color: #111111; }
html body .ty2-comp { font-weight: 700; color: #111111; }
html body .ty2-country { font-weight: 800; color: #111111; text-transform: uppercase; letter-spacing: .4px; font-size: 13px; margin-top: 2px; }
html body .ty2-h2b { margin-top: 22px !important; }
html body .ty2-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; color: #111111; word-break: break-word; }
html body .ty2-contact small { display: inline-block; min-width: 56px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; }
html body .ty2-help { background: #111111; border-color: #111111; }
html body .ty2-help h2 { color: #ffffff; border-bottom-color: #333333; text-transform: none; letter-spacing: 0; font-size: 18px; }
html body .ty2-help h2::after { background: #ffffff; }
html body .ty2-help p { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: #d1d5db; }
html body .ty2-help p a { color: #ffffff; text-decoration: underline; }
html body .ty2-help p strong { color: #ffffff; }
html body .ty2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; font-size: 14px; font-weight: 700; text-decoration: none !important; border: 1px solid transparent; border-radius: 0; transition: opacity .15s ease; }
html body .ty2-btn:hover { opacity: .88; }
html body .ty2-btn-wa { background: #25d366; color: #ffffff !important; width: 100%; }
html body .ty2-btn-dark { background: #111111; color: #ffffff !important; }
html body .ty2-btn-line { background: #ffffff; color: #111111 !important; border-color: #111111; }
html body .ty2-tip { margin: 22px 0 0; padding: 13px 18px; background: #fff8e6; border: 1px solid #ffe2a3; border-left: 4px solid #e08a00; font-size: 14px; line-height: 1.6; color: #5a4300; }
html body .ty2-tip i { color: #c98a00; margin-right: 8px; }
html body .ty2-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
@media (max-width: 991.98px) {
  html body .ty2-grid { grid-template-columns: 1fr; }
  html body .ty2-steps { grid-template-columns: 1fr; }
  html body .ty2-steps li { border-left: 0; border-top: 1px solid #ececec; padding: 16px 16px; }
  html body .ty2-steps li:first-child { border-top: 0; }
}
@media (max-width: 575.98px) {
  html body .ty2 { padding: 20px 0 36px; }
  html body .ty2-check { width: 56px; height: 56px; font-size: 25px; box-shadow: 0 0 0 7px #e6f3ea; }
  html body .ty2-hero h1 { font-size: 22px; margin-bottom: 12px; }
  html body .ty2-facts { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  html body .ty2-facts > span { padding: 9px 10px; border-left: 0; border-top: 1px solid #ececec; }
  html body .ty2-facts > span:first-child { grid-column: 1 / -1; border-top: 0; }
  html body .ty2-facts > span:nth-child(3) { border-left: 1px solid #ececec; }
  html body .ty2-facts b { font-size: 16px; }
  html body .ty2-hero p { font-size: 14px; }
  html body .ty2-card { padding: 16px 14px; }
  html body .ty2-card h2 { font-size: 14px; }
  html body .ty2-row { grid-template-columns: 20px 44px minmax(0, 1fr) auto; gap: 8px; padding: 10px 0; }
  html body .ty2-row img { width: 44px; height: 44px; }
  html body .ty2-name strong { font-size: 13.5px; }
  html body .ty2-line { font-size: 14.5px; }
  html body .ty2-due b { font-size: 22px; }
  html body .ty2-actions { flex-direction: column; }
  html body .ty2-actions .ty2-btn { width: 100%; }
}

/* Thank-you: links to the order in My Orders right under the hero text */
html body .ty2-hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
@media (max-width: 575.98px) { html body .ty2-hero-links { flex-direction: column; } html body .ty2-hero-links .ty2-btn { width: 100%; } }

/* ===== My Orders page (desktop + phones): calm square cards, slate table head, clear status tags, black View Order button ===== */
html body .orders-hero-header > div { padding: 18px 22px !important; border: 0 !important; border-left: 4px solid #111111 !important; border-radius: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; background: #ffffff !important; }
html body .orders-hero-header .badge.bg-warning { display: none !important; }
html body .orders-hero-header h3 { font-size: 26px !important; font-weight: 800 !important; letter-spacing: .3px; text-transform: uppercase; color: #111111 !important; line-height: 1.1; }
html body .orders-hero-header h3::after { content: "Track your orders, open an invoice or contact us about any order."; display: block; margin-top: 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6b7280; }
html body .orders-hero-header .badge.bg-dark { background: #f3f3f0 !important; color: #111111 !important; border: 1px solid #e2e2de; border-radius: 0 !important; font-size: 13px !important; font-weight: 700; padding: 9px 16px !important; }
html body .orders-main-card { border-radius: 0 !important; box-shadow: none !important; border: 1px solid #e5e5e2 !important; padding: 22px 24px !important; }
html body .orders-main-card > .d-flex { border-bottom: 1px solid #ececec !important; position: relative; padding-bottom: 12px !important; margin-bottom: 18px !important; }
html body .orders-main-card > .d-flex::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px; background: #111111; }
html body .orders-main-card h5 { font-size: 15px !important; font-weight: 800 !important; letter-spacing: .7px; text-transform: uppercase; color: #111111 !important; }
html body .orders-main-card h5 i { display: none !important; }
/* table */
html body .my-orders-desktop-table table { border: 1px solid #e5e5e2 !important; }
html body .my-orders-desktop-table thead, html body .my-orders-desktop-table thead th { background: #1f2937 !important; color: #ffffff !important; }
html body .my-orders-desktop-table thead th { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .8px; text-transform: uppercase; padding: 13px 14px !important; border-color: #2d3748 !important; white-space: nowrap; }
html body .my-orders-desktop-table tbody td { padding: 15px 14px !important; border-color: #ececec !important; font-size: 14.5px; color: #111111; }
html body .my-orders-desktop-table tbody tr:hover td { background: #fafaf8 !important; }
html body .my-orders-desktop-table tbody td strong { font-size: 15.5px; font-weight: 800; }
/* status / payment tags: square, readable */
html body .my-orders-desktop-table .badge, html body .my-orders-mobile-cards .badge { border-radius: 0 !important; padding: 5px 10px !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .3px; text-transform: uppercase; }
html body .my-orders-desktop-table .badge.bg-danger-subtle, html body .my-orders-mobile-cards .badge.bg-danger-subtle { background: #fdecec !important; color: #b42318 !important; border-color: #f3b7b7 !important; }
html body .my-orders-desktop-table .badge.bg-warning-subtle, html body .my-orders-mobile-cards .badge.bg-warning-subtle { background: #fff4d6 !important; color: #8a5a00 !important; border-color: #ffe2a3 !important; }
html body .my-orders-desktop-table .badge.bg-success-subtle, html body .my-orders-mobile-cards .badge.bg-success-subtle { background: #e6f3ea !important; color: #14632b !important; border-color: #b7dcc1 !important; }
/* buttons */
html body .orders-main-card .btn-dark { background: #111111 !important; border-color: #111111 !important; border-radius: 0 !important; color: #ffffff !important; font-size: 13px !important; padding: 8px 14px !important; }
html body .orders-main-card .btn-dark i { color: #ffffff !important; }
html body .orders-main-card .btn-dark:hover { background: #333333 !important; }
html body .orders-main-card .btn-outline-dark { border-radius: 0 !important; border-color: #111111 !important; color: #111111 !important; font-size: 13px !important; padding: 8px 14px !important; background: #ffffff !important; }
html body .orders-main-card .btn-outline-dark:hover { background: #111111 !important; color: #ffffff !important; }
/* empty state */
html body .orders-main-card .empty-orders-box { border-radius: 0 !important; background: #fafaf8 !important; }
html body .orders-main-card .empty-icon-circle i, html body .orders-main-card .empty-orders-box .text-warning { color: #111111 !important; }
/* phones: order cards */
@media (max-width: 767.98px) {
  html body .orders-hero-header > div { padding: 14px 14px !important; flex-wrap: nowrap !important; }
  html body .orders-hero-header h3 { font-size: 20px !important; }
  html body .orders-hero-header h3::after { font-size: 12px; }
  html body .orders-hero-header .badge.bg-dark { padding: 6px 10px !important; font-size: 12px !important; white-space: nowrap; }
  html body .orders-main-card { padding: 14px !important; }
  html body .my-orders-mobile-cards .card { border-radius: 0 !important; box-shadow: none !important; border: 1px solid #e5e5e2 !important; margin-bottom: 10px !important; }
  html body .my-orders-mobile-cards .card-header { background: #f7f7f5 !important; padding: 10px 12px !important; }
  html body .my-orders-mobile-cards .card-body { padding: 12px !important; }
  html body .my-orders-mobile-cards .card-body strong { font-size: 1.15rem !important; font-weight: 800; color: #111111; }
  html body .my-orders-mobile-cards .btn { border-radius: 0 !important; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}

/* My Orders: Shipping column ("Not updated" until the shipping cost is added) and tidy, evenly spaced action buttons */
html body .ship-pending { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; }
html body .ship-pending b { font-size: 12px; font-weight: 700; color: #8a5a00; background: #fff4d6; border: 1px solid #ffe2a3; padding: 2px 8px; align-self: flex-start; text-transform: uppercase; letter-spacing: .3px; }
html body .ship-pending small { font-size: 12px; color: #6b7280; margin-top: 3px; }
html body .my-orders-desktop-table table { table-layout: auto; width: 100%; }
html body .my-orders-desktop-table th:first-child, html body .my-orders-desktop-table td:first-child { width: 44px; text-align: center; }
html body .my-orders-desktop-table th:last-child, html body .my-orders-desktop-table td:last-child { text-align: right !important; white-space: nowrap; width: 1%; padding-right: 16px !important; }
html body .my-orders-desktop-table td:last-child > .d-inline-flex { display: inline-flex !important; gap: 8px; align-items: center; justify-content: flex-end; }
html body .my-orders-desktop-table td:last-child .btn { margin: 0 !important; min-width: 116px; height: 36px; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 0 14px !important; line-height: 1; }
html body .my-orders-desktop-table td:last-child .btn i { margin: 0 !important; }
html body .my-orders-desktop-table tbody td { vertical-align: middle !important; }
html body .my-ship-line { padding: 8px 0; border-top: 1px dashed #e9e9e6; }
html body .my-ship-line .ship-pending { flex-direction: row; align-items: center; gap: 8px; }
html body .my-ship-line .ship-pending small { margin: 0; }
@media (max-width: 991.98px) { html body .my-orders-desktop-table td:last-child .btn { min-width: 0; padding: 0 10px !important; } }

/* ===== Edit Profile form: one clean two-column grid, every field the same height and width ===== */
html body .tab-content form.admincmnform { max-width: 820px; }
html body .tab-content form.admincmnform > .row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0 0 14px !important; }
html body .tab-content form.admincmnform > .row > [class*="col-"] { width: auto !important; max-width: none !important; flex: none !important; float: none !important; margin: 0 !important; padding: 0 !important; min-width: 0; }
html body .tab-content form.admincmnform > .row:has(> [class*="col-"]:only-child) > [class*="col-"], html body .tab-content form.admincmnform > .row > .col-12, html body .tab-content form.admincmnform > .row > .col-md-10 { grid-column: 1 / -1; }
html body .tab-content form.admincmnform > .row > .clearfix:has(> label:only-child) { display: none !important; }
html body .tab-content form.admincmnform label { display: block; font-size: 13px; font-weight: 600; color: #111111; margin: 0 0 6px; line-height: 1.3; }
html body .tab-content form.admincmnform label .required { color: #c62828; margin-left: 2px; }
html body .tab-content form.admincmnform .form-control, html body .tab-content form.admincmnform select { width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 12px !important; font-size: 14.5px !important; line-height: 1.3 !important; color: #111111; background-color: #ffffff; border: 1px solid #cfcfcf !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box; }
html body .tab-content form.admincmnform select.form-control { padding-right: 34px !important; }
html body .tab-content form.admincmnform textarea.form-control { height: auto !important; min-height: 96px !important; padding: 10px 12px !important; resize: vertical; }
html body .tab-content form.admincmnform .form-control:focus { border-color: #111111 !important; box-shadow: 0 0 0 3px rgba(17,17,17,.12) !important; outline: 0; }
html body .tab-content form.admincmnform .form-control::placeholder { color: #9ca3af; }
html body .tab-content form.admincmnform #current_password { border-color: #cfcfcf !important; }
html body .tab-content form.admincmnform .form-group .small, html body .tab-content form.admincmnform .form-group .text-muted { font-weight: 500; font-size: 12.5px; color: #6b7280; }
html body .tab-content form.admincmnform button[type="submit"], html body .tab-content form.admincmnform .btn { min-height: 46px; padding: 0 28px; border-radius: 0 !important; }
@media (max-width: 575.98px) { html body .tab-content form.admincmnform > .row { grid-template-columns: 1fr; } }

/* Edit Profile: address box is two lines high (grows only if the customer drags it) */
html body .tab-content form.admincmnform textarea.form-control, html body .tab-content form.admincmnform textarea#address { height: 62px !important; min-height: 62px !important; padding: 9px 12px !important; line-height: 1.4 !important; }
html body .tab-content form.admincmnform > .row { gap: 12px 20px; margin-bottom: 12px !important; }

/* Owner 2026-10-29: home about photo stays inside its frame on hover (no lift); button a little lower. */
html body section.cms-about .about-img, html body section.cms-about .about-img img { transform: none !important; }
html body section.cms-about .about-img:hover img { transform: none !important; box-shadow: 0 15px 35px rgba(0,0,0,.08) !important; }
html body section.cms-about .about-img { overflow: hidden; border-radius: 20px; }
html body section.cms-about .about-content .btn-box { margin-top: 26px !important; }
html body section.cms-about .white-btn:hover { transform: none !important; }

/* Footer social icons: each network's own colour on hover (owner 2026-10-29) */
footer.cms-footer .footer-social ul li a.whatsapp:hover { background: #25D366 !important; border-color: #25D366 !important; color: #fff !important; }
footer.cms-footer .footer-social ul li a.facebook:hover { background: #1877F2 !important; border-color: #1877F2 !important; color: #fff !important; }
footer.cms-footer .footer-social ul li a.twitter:hover { background: #000 !important; border-color: #fff !important; color: #fff !important; }
footer.cms-footer .footer-social ul li a.instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; border-color: #d6249f !important; color: #fff !important; }
footer.cms-footer .footer-social ul li a.linkedin:hover { background: #0A66C2 !important; border-color: #0A66C2 !important; color: #fff !important; }
footer.cms-footer .footer-social ul li a:hover i { color: #fff !important; }
footer.cms-footer .footer-social ul li a:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important; }

/* ===== All products A-Z page (azindex.php), 2026-10-29 ===== */
.az-page { background: #faf8f5; }
.az-head { text-align: center; max-width: 760px; margin: 0 auto 26px; }
.az-title { font-size: 34px; font-weight: 800; color: #1a1a1a; margin: 0 0 10px; }
.az-intro { color: #5f5a55; font-size: 15px; line-height: 1.65; margin: 0; }
.az-letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; max-width: 980px; margin: 0 auto 28px; }
.az-letter { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 58px; background: #fff; border: 1px solid #ddd6cc; color: #1a1a1a !important; text-decoration: none !important; transition: border-color .15s, background .15s, transform .15s; }
.az-letter .az-l { font-size: 18px; font-weight: 800; line-height: 1; }
.az-letter .az-n { font-size: 11px; color: #8a8178; margin-top: 4px; line-height: 1; }
a.az-letter:hover { border-color: #e8a317; background: #fff8e8; transform: translateY(-2px); }
.az-letter.is-active { background: #111; border-color: #111; color: #fff !important; }
.az-letter.is-active .az-n { color: #e8a317; }
.az-letter.is-empty { background: transparent; border-style: dashed; color: #c9c2b8 !important; }
.az-letter.is-empty .az-n { color: #d8d1c7; }
.az-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid #e7e1d8; padding: 12px 16px; margin-bottom: 14px; }
.az-count { font-weight: 700; color: #1a1a1a; font-size: 15px; }
.az-filter { position: relative; flex: 1 1 260px; max-width: 380px; margin: 0; }
.az-filter i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8a8178; font-size: 13px; }
.az-filter input { width: 100%; height: 40px; padding: 0 12px 0 34px; border: 1px solid #d6cfc5; background: #fff; font-size: 14px; outline: none; border-radius: 0; }
.az-filter input:focus { border-color: #111; }
.az-list { list-style: none; margin: 0; padding: 6px 20px; background: #fff; border: 1px solid #e7e1d8; columns: 3 260px; column-gap: 36px; }
.az-list li { break-inside: avoid; border-bottom: 1px solid #f0ebe4; }
.az-list li a { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; color: #2b2622 !important; font-size: 14px; line-height: 1.4; text-decoration: none !important; }
.az-list li a::before { content: "\203A"; color: #e8a317; font-weight: 800; flex: 0 0 auto; }
.az-list li a:hover { color: #7f0517 !important; }
.az-none { text-align: center; color: #8a8178; margin: 18px 0 0; }
.az-more { text-align: center; margin: 6px 0 0; color: #5f5a55; }
.az-more a { color: #111 !important; font-weight: 700; text-decoration: underline !important; }
@media (max-width: 767px) {
  .az-title { font-size: 24px; }
  .az-intro { font-size: 14px; }
  .az-letters { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .az-letter { height: 48px; }
  .az-letter .az-l { font-size: 16px; }
  .az-toolbar { padding: 10px 12px; }
  .az-filter { max-width: none; }
  .az-list { padding: 4px 14px; columns: 1; }
}