/*
 * Geranset - child theme overrides for StoreCommerce
 * Reconstructs client edits made to parent 1.2.2 style.css / woocommerce.css
 * so they survive the update to parent 2.1.1.
 * Must be enqueued AFTER the parent style.css and woocommerce.css.
 */

/* ==================================================================
   Brand recolor
   ================================================================== */

.spinner-container .path {
	stroke-dasharray: 1,150; /* 1%, 101% circumference */
	stroke-dashoffset: 0;
	stroke: #1a3b24;
	stroke-linecap: round;
	-webkit-animation: dash 1.5s ease-in-out infinite;
	animation: dash 1.5s ease-in-out infinite;
}

.top-header {
	padding: 10px 0px;
	background-color: #82512e;
	color: #ffffff;
}

.em-author-details ul li a,
.social-widget-menu ul li a,
.social-navigation ul li a
{background: #82512e;}

li a {
	color: #704104;
}

.horizontal ul.product-item-meta li a:hover {background: #82512e; color: #fff;}

.tagcloud a:hover {
	color: #82512e;
	border-color: #82512e;
}

/* Big brand button group from style.css (parent value was #bb1919) */
body span.trending-no,
body .tagcloud a:hover,
body .woocommerce .btn-style1 a.button,
body span.offer-time.btn-style1 a:hover,
body .content-caption .aft-add-to-wishlist.btn-style1 a:hover,
body ul.product-item-meta li:hover,
.woocommerce #respond input#submit:hover,
table.compare-list .add-to-cart td a,
.woocommerce .widget_shopping_cart_content a.button.wc-forward,
.woocommerce .widget_shopping_cart_content a.button.checkout,
.yith-woocompare-widget a.compare:hover,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce a.button.alt:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button:hover,
.yith-wcwl-wishlistaddedbrowse a,
.yith-wcwl-wishlistexistsbrowse a,
.yith-wcwl-add-button a.add_to_wishlist:hover,
.inner-suscribe input[type=submit]:hover,
.woocommerce-page .woocommerce-message a.button,
.product-wrapper ul.product-item-meta.verticle .yith-btn a:hover:before,
ul.product-item-meta li a.added_to_cart:hover,
body.single-product .entry-summary .button.compare:hover,
body.single-product .entry-summary .yith-wcwl-add-to-wishlist a:hover,
body.woocommerce button.button.alt.disabled:hover,
body.woocommerce button.button.alt.disabled,
body.woocommerce #respond input#submit.alt:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover,
body.woocommerce #respond input#submit.alt,
body.woocommerce a.button.alt,
body.woocommerce button.button,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt,
body.woocommerce #respond input#submit,
body.woocommerce a.button,
body.woocommerce input.button,
body.woocommerce .widget_shopping_cart_content a.button.wc-forward,
body.woocommerce .widget_shopping_cart_content a.button.checkout,
body #secondary .nav-tabs>li.active>a.font-family-1,
body .site-footer .nav-tabs>li.active>a.font-family-1,
body .nav-tabs>li.active>a.font-family-1,
body .nav-tabs>li.active>a,
body .comment-form .submit,
body input.search-submit
{
	background: #82512e;
	border-color: #82512e;
}

.product-wrapper ul.product-item-meta.verticle .yith-btn .yith-wcwl-wishlistexistsbrowse.show a:before{
	color: #fff;
	background: #82512e;
	border-color: #82512e;
}

body a:hover,
body a:focus,
body a:active
{
	color: #df8a55;
}

body #loader:after {
	border-left-color: #82512e;
}

.posts_latest_widget .posts-date,
span.offer-date-counter > span,
body span.menu-description,
body span.title-note,
body .badge-wrapper span.onsale:before,
body .header-right-part .aft-wooicon .aft-woo-counter,
body .header-right-part .af-cart-icon-and-count .item-count,
body span.product-count span.item-texts,
body .post-thumbnail-wrap .posts-date,
body .posts_latest_widget .posts-date,
body .main-navigation .menu > li > a:before
{
	background: #82512e;
}

span.offer-date-counter > span{
	border-color: #82512e;
}

body span.menu-description:after,
body span.title-note:after
{
	border-top: 5px solid #82512e;
}

body span.product-count span.item-texts:after{
	border-top: 10px solid #82512e;
}

/* woocommerce.css recolors (loaded after style.css in the parent, so these
   come after the style.css groups above to preserve cascade order) */

.woocommerce ul.products li.product .price {
	font-size: 17px;
	color: #c7793f;
	margin-bottom: 0;
}

.woocommerce .horizontal ul.product-item-meta li a:hover,
ul.products li.product a.button.add_to_cart_button:hover {
	color: #fff;
	background: #1a3b24;
}

/* Big brand button group from woocommerce.css (parent value was #bb1919) */
body span.trending-no,
body .tagcloud a:hover,
body .woocommerce .btn-style1 a.button,
body span.offer-time.btn-style1 a:hover,
body .content-caption .aft-add-to-wishlist.btn-style1 a:hover,
body ul.product-item-meta li:hover,
.woocommerce #respond input#submit:hover,
table.compare-list .add-to-cart td a,
.woocommerce .widget_shopping_cart_content a.button.wc-forward,
.woocommerce .widget_shopping_cart_content a.button.checkout,
.yith-woocompare-widget a.compare:hover,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce a.button.alt:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button:hover,
.yith-wcwl-wishlistaddedbrowse a,
.yith-wcwl-wishlistexistsbrowse a,
.yith-wcwl-add-button a.add_to_wishlist:hover,
.inner-suscribe input[type=submit]:hover,
.woocommerce-page .woocommerce-message a.button,
.product-wrapper ul.product-item-meta.verticle .yith-btn a:hover:before,
ul.product-item-meta li a.added_to_cart:hover,
body.single-product .entry-summary .button.compare:hover,
body.single-product .entry-summary .yith-wcwl-add-to-wishlist a:hover,
body.woocommerce button.button.alt.disabled:hover,
body.woocommerce button.button.alt.disabled,
body.woocommerce #respond input#submit.alt:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover,
body.woocommerce #respond input#submit.alt,
body.woocommerce a.button.alt,
body.woocommerce button.button,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt,
body.woocommerce #respond input#submit,
body.woocommerce a.button,
body.woocommerce input.button,
body.woocommerce .widget_shopping_cart_content a.button.wc-forward,
body.woocommerce .widget_shopping_cart_content a.button.checkout,
body #secondary .nav-tabs>li.active>a.font-family-1,
body .site-footer .nav-tabs>li.active>a.font-family-1,
body .nav-tabs>li.active>a.font-family-1,
body .nav-tabs>li.active>a,
body .comment-form .submit,
body input.search-submit
{
	background: #1a3b24;
	border-color: #1a3b24;
}

/* ==================================================================
   Header/nav
   ================================================================== */

body.home .header-style-2.aft-transparent-header.aft-sticky-navigation {
	background: #1a3b24;
}

/* Client broadened the parent selector (dropped .aft-sticky-navigation) */
.desktop-header .main-navigation  li:first-child{
	padding-left: 0;
}

.header-middle-part {
	position: absolute;
	top: 50%;
	left: 48%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 2px 0;
}

.header-right-part .cart-shop span {
	line-height: 1;
	border-radius: 0px;
	height: 40px;
	padding: 0 4px;
	text-transform: uppercase;
	text-align: center;
	max-width: 120px;
	color: #000;
}

.ham {
	width: 23px;
	height: 2px;
	top: 27px;
	display: block;
	margin-right: auto;
	background-color: #000;
	position: relative;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}
.ham:before, .ham:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 2px;
	left: 0;
	top: -8px;
	background-color: #000;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}
/* The parent theme puts the bottom bar at +8; this copy loads later and its
   shared -8 was winning, stacking both outer bars on the top line — closed,
   the burger lost a bar; open, the ✕ collapsed into a chevron. */
.ham:after {
	top: 8px;
}

/* Header style 2: client swapped .account-user a for .fa-user-lock:before
   and forced white icons/text */
body.home .header-style-2.aft-transparent-header .cart-shop,
body.home .header-style-2.aft-transparent-header .fa-user-lock:before,
body.home .header-style-2.aft-transparent-header .open-search-form,
body.home .header-style-2.aft-transparent-header .aft-wishlist-trigger,
body.home .header-style-2.aft-transparent-header .main-navigation .menu > li > a,
body.home .header-style-2.aft-transparent-header .header-left-part .logo-brand .site-title a,
body.home .header-style-2.aft-transparent-header .header-left-part .logo-brand .site-description{
	color: #fff;
}
body.home .header-style-2.aft-transparent-header.aft-sticky-navigation .cart-shop,
body.home .header-style-2.aft-transparent-header.aft-sticky-navigation .fa-user-lock:before,
body.home .header-style-2.aft-transparent-header.aft-sticky-navigation .open-search-form,
body.home .header-style-2.aft-transparent-header.aft-sticky-navigation .aft-wishlist-trigger,
body.home .header-style-2.aft-transparent-header.aft-sticky-navigation .main-navigation .menu > li > a,
body.home .header-style-2.aft-transparent-header.aft-sticky-navigation .header-left-part .logo-brand .site-title a,
body.home .header-style-2.aft-transparent-header.aft-sticky-navigation .header-left-part .logo-brand .site-description{
	color: #FFF;
}
body .header-style-2.aft-transparent-header .cart-shop,
body .header-style-2.aft-transparent-header .fa-user-lock:before,
body .header-style-2.aft-transparent-header .open-search-form,
body .header-right-part .search .open-search-form,
body .header-style-2.aft-transparent-header .aft-wishlist-trigger,
body.home .header-style-2.aft-transparent-header.aft-sticky-navigation .main-navigation .menu > li > a,
body .header-style-2.aft-transparent-header .header-left-part .logo-brand .site-description {
	color: #FFF;
}

body.home .header-style-2.aft-transparent-header {
	position: absolute;
	width: 100%;
	z-index: 9999;
	background: #1a3b24d9;
}

.express-off-canvas-panel a.offcanvas-nav i {
	background-color: transparent; /* client deleted parent's #dd3333 */
	padding: 10px 8px;
	border-radius: 10%;
	color: #fff;
	font-size: 16px;
	box-shadow: 0px -2px 0px 0px #fefced;
}
.fa-th:before {
	margin-left: 5px;
}
.express-off-canvas-panel a.offcanvas-nav i:hover{
	background-color: #18532a;
}

.main-navigation .menu > li > a {
	display: block;
	text-decoration: none;
	color: #fff;
	position: relative;
}

.header-style-2:before,
body .header-style-3-1 .navigation-section-wrapper,
body .header-style-3 .navigation-section-wrapper
{
	background-color: #1a3b24;
}

body .main-navigation .menu ul.menu-desktop > li > a,
p.woocommerce-mini-cart__empty-message,
body .af-cart-icon-and-count:after
{
	color: #ffffff;
}

body.home .header-style-2.aft-transparent-header.aft-sticky-navigation .af-cart-icon-and-count:after{
	color:#FFF;
}

body .main-navigation .menu ul.menu-desktop > li > a:visited
{
	color: #fff;
}

.fa-user-circle:before{
	color: white;
	font-size: 20px;
}

/* ==================================================================
   Slider
   ================================================================== */

.content-caption.on-right {left: 40%; text-align: right; display: none;}

.caption-heading .cap-title {
	font-size: 25px;
	font-weight: 700;
	text-transform: capitalize;
}
.caption-heading .cap-title a,
.content-caption .content-desc {
	color: #fff;
	background: #3a181869;
	border-radius: 7px;
	padding: 10px;
}

.content-caption p {
	line-height: normal;
	font-size: 18px;
}

span.offer-time.btn-style1 a:hover,
.content-caption .aft-add-to-wishlist.btn-style1 a:hover{
	color: #fff;
	background: #d21406;
	border-color: #d21406;
	font-family: 'Shabnam';
}

span.offer-time.btn-style1 a{
	border-color: #ffffff;
	background: #40475c;
}

.storecommerce_store_call_to_action_widget .section-title .header-after{
	font-size: 35px;
	line-height: 58px;
}

/* ==================================================================
   Mobile menu
   ================================================================== */

/* Parent uses this (odd but functional) breakpoint; preserved verbatim */
@media screen and (max-width: 992em) {

	.main-navigation .menu .menu-mobile {
		margin: 0;
		padding: 0;
		display: block;
		list-style: none;
		text-align: left;
		position: relative;
		z-index: 9999;
		display: none;
		background: transparent; /* client deleted parent's #fff */
	}

	.main-navigation .menu .menu-mobile li {
		display: block;
		border-top: 0; /* client deleted parent's 1px solid #f7f7f7 */
		float: none;
		padding: 0px;
		background: #4d526000;
		text-align: center;
	}

	body.home .header-style-2.aft-transparent-header .main-navigation .menu .menu-mobile li a{
		color: #fff; /* was `inherit` (client deleted parent's #000) — dark text on the
		                brown buttons was unreadable */
		background: #82512e;
		border-top: 3px solid #ebebeb;
		border-radius: 10px;
		margin-top: 13px;
	}

	/* Non-home pages get the same brown buttons from rtl.css (#6f4a33),
	   with no text color of their own — keep them readable too. */
	.main-navigation .menu .menu-mobile li a {
		color: #fff;
	}
}

/* ==================================================================
   WooCommerce shop/cart
   ================================================================== */

.woocommerce .horizontal ul.product-item-meta li a,
ul.products li.product a.button.add_to_cart_button {
	padding: 9px 40px;
	display: block;
	display: none;
	background: #fff;
}

/* Client deleted the parent's FontAwesome arrow suffix on buy buttons */
.button.add_to_cart_button:after ,
.horizontal ul.product-item-meta li a:after,
.woocommerce ul.product-item-meta li a:after,
ul.products li.product .button.add_to_cart_button:after {
	content: none;
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary{
	padding: 0 15px 0 0;
	width: 44%;
}
body.single-product .entry-summary .yith-wcwl-add-to-wishlist a:hover{
	width: 100%;
	transition-duration: 1s;
}

#yith-quick-view-modal .entry-summary .cart .button,
body.single-product .entry-summary .cart .button,
body.single-product .entry-summary button {
	margin-bottom: 15px;
	margin-top: 10px;
	padding: 9px 40px;
	border: none;
	width: 80%;
	border-radius: 0 8px 8px 0;
}

body.single-product .entry-summary .button.compare,
body.single-product .entry-summary .yith-wcwl-add-to-wishlist a{
	background: #ffd92154;
	color: #000;
	border-color: #e4e4e4;
	border-radius: 0 8px 8px 0;
	width: 80%;
	float: left;
}

.woocommerce .cart_item .product-name {
	font-weight: 700;
	border-left: 2px dashed #e0e0e0;
}

.storecommerce-product-summary-wrap.clearfix {
	background: #fff;
	border: 1px solid #efefef;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	position: relative;
	z-index: 1;
	margin-bottom: 30px;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 10%);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 10%);
	cursor: default;
}

.woocommerce div.product p.price, .woocommerce div.product span.price{
	font-size: 20px;
	margin-bottom: 10px;
	margin-top: 50px;
}

.woocommerce-product-details__short-description p {
	color: #8a8a8a;
	margin-bottom: 5px;
	font-size: 20px;
}

.woocommerce div.product p.stock {
	font-size: 15px;
	font-weight: bold;
	color: #555;
	margin-bottom: 10px;
	text-align: center;
}
.woocommerce div.product p.stock.in-stock:before {
	content: "\e015";
	font-family: "WooCommerce";
	font-weight: 900;
	padding-right: 5px;
	color: #81ca33;
	margin-left: 7px;
}
.woocommerce div.product p.stock.out-of-stock:before {
	content: "\e016";
	font-family: "WooCommerce";
	font-weight: 900;
	padding-right: 5px;
	color: #d50c0c;
	margin-left: 7px;
}

/* Client's live file had the accidental "padding: px;" - restored to the
   pristine 20px value */
body.woocommerce-js form{padding: 20px;}

.woocommerce table.wishlist_table {
	font-size: 130%;
}

body.woocommerce-js form.woocommerce,
body.woocommerce-js form.search-form,
.woocommerce div.product form.cart,
body.woocommerce-js form.woocommerce-shipping-calculator,
.woocommerce div.product form.comment-form,
body.woocommerce-js form.woocommerce-ordering{
	padding: 0;
	background: #ddd7aa00;
	border-radius: 5px;
}

.woocommerce-MyAccount-content {
	padding: 4%;
}

.woocommerce ul li {
	margin-bottom: 0; /* client deleted parent's 2px */
}

.woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img {
	float: left;
	margin-left: 0px;
	width: 70px;
	height: auto;
	box-shadow: none;
	margin-right: 10px;
	border-radius: 50px;
}
.woocommerce-mini-cart__buttons.buttons {
	margin-bottom: 0;
	display: flex;
}
.woocommerce .widget_shopping_cart_content a.button.wc-forward, .woocommerce .widget_shopping_cart_content a.button.checkout {
	border-radius: 0;
	float: right;
	color: #fff;
	padding: 12px 15px;
	text-align: center;
	position: relative;
	font-weight: 600;
	display: inline-block;
	background: #D21406;
	width: 50%;
	font-size: 12px;
	border-radius: 5px;
}
.woocommerce .widget_shopping_cart_content a.button.wc-forward:hover {
	background: #008aaf;
}
.woocommerce .widget_shopping_cart_content a.button.wc-forward, .woocommerce .widget_shopping_cart_content a.button.checkout:hover {
	background: #00993d;
}

.woocommerce table.wishlist_table thead th {
	text-align: center;
	font-size: 16px;
}

/* Client deleted color:#000 from this parent group so the brand hover color
   can show through; the deletion itself cannot be expressed as an override,
   this carries the remaining declaration */
ins,
select,
span.price,
.woocommerce .quantity .qty,
.header-right-part .cart-shop span,
.woocommerce .widget_shopping_cart .total strong,
.woocommerce.widget_shopping_cart .total strong,
.woocommerce ul.products li.product .price,
.blog-content span p,
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins,
.insta-feed-head a .instagram-username,
body .cat-links a:hover,
body .cat-links li a:hover,
body span.tagged_as a:hover,
body span.posted_in a:hover,
body.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover
{
	opacity: 1;
}

.woocommerce nav.woocommerce-pagination ul li span.current{
	color: #fff;
	background-color: #dbd4a7;
}

.woocommerce-billing-fields h3{
	margin-top: 59px;
	margin-bottom: 40px;
	text-align: center;
	font-weight: bold;
	font-size: 28px;
	border-bottom: 3px solid #1a3b24;
	padding-bottom: 27px;
}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea{
	background: #fcfcfc;
}

@media screen and (max-width: 768px){
	.woocommerce #content div.product div.images,
	.woocommerce #content div.product div.summary,
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary,
	.woocommerce-page #content div.product div.images,
	.woocommerce-page #content div.product div.summary,
	.woocommerce-page div.product div.images,
	.woocommerce-page div.product div.summary {
		float: none;
		width: 100%;
		margin-bottom: 13px;
	}
}

@media (max-width: 640px) {
	.woocommerce nav.woocommerce-pagination ul li{
		margin: 2px;
		height: 34px;
		width: 34px;
		border-radius: 4px;
	}
	body header.entry-header h1.entry-title{
		display: block;
		margin: auto;
		width: auto;
		text-align: center;
	}
}

/* ==================================================================
   RTL fixes
   ================================================================== */

.woocommerce .cart.wishlist_table a.button.yith-wcqv-button {
	float: left;
}

.single-product.woocommerce .quantity .qty {
	width: 100%;
	border-radius: 5px;
	font-size: 16px;
	direction: ltr;
}

.woocommerce ul.woocommerce-error {
	background-color: #fff;
	margin-bottom: 20px;
	padding: 1em 3.5em 1em 1.5em;
	border-top: 3px solid #d21406;
}

@media screen and (max-width: 1024px){
	.style-3-search .search-field {
		width: 40%;
		direction: rtl;
	}
}

/* ==================================================================
   Plugin styling (Pepro Invoice, ARG Multistep, CF7)
   ================================================================== */

a.woocommerce-button.button.btn.btn-outline-primary.mr-1.ml-1.pepro-ultimate-invoice_pdf{
	background-image: linear-gradient(1deg,#da002d 0%,#c11034 100%);
	margin-right: 5px;
	box-shadow: 0px 3px 11px rgb(216 7 7);
	padding-top: 9px;
}
a.woocommerce-button.button.btn.btn-outline-primary.mr-1.ml-1.pepro-ultimate-invoice_pdf:hover{
	background: #e60e3a;
}
a.woocommerce-button.button.btn.btn-outline-primary.mr-1.ml-1.view{
	box-shadow: 0px 3px 11px rgb(0 75 156);
}
table.table.table-borderless.table-striped.table-earning{
	text-align: center;
}
.a19{
	color: #136689;
}

form.checkout.woocommerce-checkout.argmc-form{
	background-color: #f2f1ee;
}
.argmc-form-steps.argmc-form-step-2.argmc-billing-shipping-step.current{
	background: white;
	border-radius: 25px;
}
.argmc-form-steps.argmc-form-step-3.argmc-billing-shipping-step.current{
	background: white;
	border-radius: 56px;
}

@media screen and (min-width: 1024px){
	.wp-block-contact-form-7-contact-form-selector{
		padding: 0 230px;
	}
}
@media only screen and (max-width: 1024px) and (min-width: 426px)  {
	.wp-block-contact-form-7-contact-form-selector{
		padding: 0px;
	}
}
@media screen and (max-width: 426px){
	.wp-block-contact-form-7-contact-form-selector{
		padding: 0px;
	}
}

/* ==================================================================
   Misc responsive
   ================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid rgba(255,255,255,0.35);
	padding: 3px;
	padding-left: 5px;
	min-height: 37px;
	background: #ffffff9e;
	-webkit-box-shadow:  0px 0px 2px 0px rgba(0,0,0,0.35) inset;
	-moz-box-shadow:  0px 0px 2px 0px rgba(0,0,0,0.35) inset;
	box-shadow:  0px 0px 2px 0px rgba(0,0,0,0.35) inset;
}

.product-wrapper {
	background-color: #FFFFFF;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	position: relative;
	z-index: 1;
	margin-bottom: 30px;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
	cursor: default;
	border-radius: 16px;
}
.product-wrapper:hover{
	transform: scale(1.04);
	z-index: 4;
}

.page-title,
body.blog h1.page-title,
body.archive h1.page-title {
	margin: 8px 0px;
	font-size: 38px;
	color: #4c4c4c;
}

/* Client dropped body .page-title / h1.page-title from this parent group in
   favour of the broader body.blog h1 / body.archive h1, and added margins */
body h1,
body h2,
body h2 span,
body h3,
body h4,
body h5,
body h6,
body #primary .widget-title,
body .section-title,
body #sidr .widget-title,
body #secondary .widget-title,
body.blog h1,
body.archive h1,
body.woocommerce-js article .entry-title,
body.blog article h2 a,
body.archive article h2 a
{
	color: #000000;
	margin-top: 20px;
	margin-bottom: 20px;
}

footer.site-footer {
	background: #1f2125;
	font-size: inherit; /* client deleted parent's 16px */
}

body footer.site-footer .primary-footer {
	background: #1a3b24;
}

body footer.site-footer .site-info {
	background: #82512e;
}

.site-footer .widget-title,
.site-footer .section-title {
	text-align: left;
	font-size: 20px;
	line-height: normal;
	font-weight: 700;
	margin-bottom: 10px;
	text-transform: uppercase;
	position: relative;
}

body header.entry-header h1.entry-title{
	padding-top: 40px;
	padding-bottom: 10px;
	text-align: center;
	color: #1a3b24;
}

img.wp-image-1686{
	margin-left: 22px;
}

@media screen and (max-width: 768px){
	table {
		width: 40%;
	}
}

@media only screen and (max-width: 768px) and (min-width: 426px)  {
	.primary-footer-area {
		width: 100%;
		float: left;
	}
}

@media screen and (max-width: 426px){
	.wp-block-column.is-vertically-aligned-center {
		display: none;
	}
	.content-caption p {
		font-size: 16px;
	}
	.owl-nav button{
		top: 50%;
	}
	.caption-heading .cap-title {
		font-size: 22px;
	}
}

/* ==========================================================================
   Parent 2.1.1 compatibility fixes (post-update pass)
   ========================================================================== */

/* Hide add-to-cart buttons on product archives (client behavior, new markup) */
ul.products li.product a.button.add_to_cart_button {
	display: none !important;
}

/* Sticky header is the parent theme's own behavior (fixed-header-script.js adds
   .aft-sticky-navigation to #site-primary-navigation: nav hides on scroll-down,
   reappears on scroll-up). Only ensure it stacks above page content. */
#site-primary-navigation.aft-sticky-navigation {
	z-index: 1020;
}

/* Pagination: clear the product grid and give it breathing room */
.woocommerce-pagination {
	clear: both;
	margin: 30px auto 40px;
	padding: 10px 0;
	text-align: center;
}

/* Search overlay: rebrand the gray 2.1.1 overlay */
#myOverlay.overlay {
	background-color: rgba(15, 34, 21, 0.96);
}
#myOverlay .overlay-content {
	top: 38%;
	max-width: 760px;
	width: 92%;
}
span.close-serach-form {
	top: 40px;
	font-size: 28px;
	width: 48px;
	height: 48px;
	line-height: 44px;
	text-align: center;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	transition: 0.2s;
}
span.close-serach-form:hover {
	background: #82512e;
}
#myOverlay .style-3-search {
	display: flex;
	gap: 8px;
	align-items: center;
	direction: rtl;
	background: #fff;
	border-radius: 14px;
	padding: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
#myOverlay .style-3-search .search-field {
	flex: 1;
	border: none;
	background: transparent;
	direction: rtl;
	font-size: 16px;
	padding: 10px 14px;
	outline: none;
}
#myOverlay .style-3-search select.cate-dropdown {
	border: none;
	border-left: 1px solid #e0e0e0;
	background: #fff;
	padding: 10px 14px;
	font-size: 14px;
	color: #1a3b24;
	outline: none;
}
#myOverlay .style-3-search button,
#myOverlay .style-3-search input[type="submit"],
#myOverlay .style-3-search .search-submit {
	background: #1a3b24;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 10px 24px;
	cursor: pointer;
	transition: 0.2s;
}
#myOverlay .style-3-search button:hover,
#myOverlay .style-3-search .search-submit:hover {
	background: #82512e;
}

/* ==========================================================================
   Sticky header — solid background on every page
   --------------------------------------------------------------------------
   The parent theme only paints a background behind the sticky nav on the home
   page (body.home .aft-transparent-header.aft-sticky-navigation { background:#fff }).
   Everywhere else the pinned bar stayed transparent, so page content scrolled
   visibly through it — that is the "header overlapping content" problem.
   ========================================================================== */

#site-primary-navigation.aft-sticky-navigation,
.aft-sticky-navigation,
body.home .header-style-2.aft-transparent-header.aft-sticky-navigation {
	background: #1a3b24 !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
	z-index: 1020;
}

/* ==========================================================================
   The header is fixed from the start — no hand-over, nothing to clip
   --------------------------------------------------------------------------
   Previously the header lived in the flow and switched to `position: fixed`
   once the page scrolled. That produced two faults that cannot both be fixed
   while the approach stands: the page jumped by the header's full height at
   the moment it left the flow, and on the way back the floating bar had to
   hand over to the real header — for the length of that transition both were
   on screen, one sliding out while the other appeared behind it.

   Now the header is fixed for the life of the page, with a spacer holding its
   place. At the top it sits exactly over that spacer and reads as a normal
   header. Scrolling only makes it compact. It never moves, so there is no
   entrance, no exit, and no second copy of it to collide with.
   ========================================================================== */

/* `!important` and the doubled class: the theme styles this element as
   `header.site-header`, which outranks a single class selector. */
header.site-header.geranset-fixed-header,
.geranset-fixed-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1020;
	/* The compact change is a size change on a fixed element, so it costs a
	   reflow of the header's own subtree and nothing else on the page. */
	transition: box-shadow .25s ease;
}

.geranset-fixed-header.is-compact {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

body.admin-bar .geranset-fixed-header {
	top: 32px;
}

.geranset-header-spacer {
	/* Height is set inline by the script and kept in step with a
	   ResizeObserver, so webfonts settling later cannot leave it short. */
	pointer-events: none;
}

/* The contact strip folds away rather than vanishing. */
.geranset-fixed-header .top-header {
	overflow: hidden;
	max-height: 120px;
	opacity: 1;
	transition: max-height .28s cubic-bezier(.4, 0, .2, 1),
	            opacity .18s ease;
}

.geranset-fixed-header.is-compact .top-header {
	max-height: 0;
	opacity: 0;
	/* Kill the strip's own vertical padding too, or it keeps ~12px of height. */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* The nav no longer positions itself: its wrapper is already fixed. Leaving
   the parent theme's `position: fixed` on it would take it out of the header
   and stack a second bar on top of the first. */
#site-primary-navigation.aft-sticky-navigation,
.header-style-2.aft-sticky-navigation {
	position: static !important;
	top: auto !important;
	transition: none !important;
}

/* The logo collapses on the same curve as the contact strip.
   `display: none` cannot be transitioned: the logo vanished in one frame and
   the flex row instantly reallocated its 250px, snapping the menu links about
   305px sideways. Collapsing its box instead lets the row interpolate, so the
   links glide across. max-width does the work in the desktop row, max-height
   in the stacked mobile column. */
.geranset-fixed-header .header-left-part {
	overflow: hidden;
	/* Set from the logo's measured size by the script, so the collapse spends
	   its whole duration on real movement. */
	max-width: var( --geranset-logo-w, 400px );
	max-height: var( --geranset-logo-h, 300px );
	opacity: 1;
	transition: max-width .30s cubic-bezier(.4, 0, .2, 1),
	            max-height .30s cubic-bezier(.4, 0, .2, 1),
	            opacity .18s ease;
}

.geranset-fixed-header.is-compact .header-left-part {
	max-width: 0;
	max-height: 0;
	opacity: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.geranset-fixed-header,
	.geranset-fixed-header .top-header {
		transition: none;
	}
}

/* Keep every element inside the pinned bar legible on the dark background. */
.aft-sticky-navigation .main-navigation .menu > li > a,
.aft-sticky-navigation .header-left-part a,
.aft-sticky-navigation .header-middle-part a,
.aft-sticky-navigation .header-right-part a,
.aft-sticky-navigation .site-title a,
.aft-sticky-navigation i,
.aft-sticky-navigation .fa {
	color: #fff !important;
}

/* Pinned bar is compact — trim the vertical padding so it eats less screen. */
.aft-sticky-navigation .header-middle-part {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* No logo in the pinned bar. Once the visitor has scrolled they know which
   site they are on, and dropping it keeps the pinned strip genuinely slim
   rather than a shrunken copy of the full header. */
/* Superseded by the animated collapse above — kept out of the way so it does
   not re-introduce the un-animatable `display: none`. */

/* Never let the pinned bar cover the WordPress admin bar. */
body.admin-bar .aft-sticky-navigation {
	top: 32px !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .aft-sticky-navigation {
		top: 46px !important;
	}
}

/* ==========================================================================
   Live search suggestions + add-to-cart toast (geranset-custom plugin)
   ========================================================================== */

.geranset-suggest {
	display: none;
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	top: calc(100% + 6px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
	overflow: hidden;
	z-index: 1000000;
	max-height: 60vh;
	overflow-y: auto;
	text-align: right;
	direction: rtl;
}
.geranset-suggest.is-open { display: block; }

.geranset-suggest__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid #f0f0f0;
	color: #23331f;
	text-decoration: none;
	transition: background .15s ease;
}
.geranset-suggest__item:last-of-type { border-bottom: 0; }
.geranset-suggest__item:hover,
.geranset-suggest__item.is-active { background: #f4f1e8; }

.geranset-suggest__thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 48px;
	background: #eee;
}
.geranset-suggest__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.geranset-suggest__title {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.geranset-suggest__sku { font-size: 11px; color: #8a8a8a; }
.geranset-suggest__price { font-size: 13px; color: #c7793f; font-weight: 700; white-space: nowrap; }
.geranset-suggest__price em { color: #999; font-style: normal; font-weight: 400; }

.geranset-suggest__empty { padding: 16px; text-align: center; color: #777; font-size: 13px; }
.geranset-suggest__all {
	display: block;
	padding: 11px;
	text-align: center;
	background: #1a3b24;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.geranset-suggest__all:hover { background: #82512e; }

/* The search field needs a positioning context for the dropdown — and the
   theme sets overflow:hidden on .style-3-search, which would clip it. */
.style-3-search,
.woocommerce-product-search,
form[role="search"] {
	position: relative;
	overflow: visible !important;
}
#myOverlay .overlay-content,
#myOverlay form,
#myOverlay .form-group { overflow: visible !important; }

/* Add-to-cart toast */
.geranset-toast {
	position: fixed;
	inset-inline-start: 24px;
	bottom: 24px;
	z-index: 1000001;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #1a3b24;
	color: #fff;
	padding: 14px 20px;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
	font-size: 14px;
	direction: rtl;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease;
	max-width: min(92vw, 420px);
}
.geranset-toast.is-visible { opacity: 1; transform: translateY(0); }
.geranset-toast.is-error { background: #8e2f2f; }
.geranset-toast__link {
	color: #e6c9a8 !important;
	text-decoration: underline;
	white-space: nowrap;
	font-weight: 700;
}
.geranset-toast__link:hover { color: #fff !important; }

/* Unit note under the price on single product pages */
.geranset-unit-note {
	font-size: 13px;
	color: #6b6b6b;
	margin: 4px 0 12px;
}
.geranset-unit { color: #6b6b6b; font-size: .9em; }

/* ==========================================================================
   Wishlist table redesign
   ==========================================================================
   YITH WooCommerce Wishlist Premium 3.0.18, "images" layout.
   Real markup (read from the rendered /wishlist/ page, not guessed):

     form#yith-wcwl-form.woocommerce.yith-wcwl-form
       ul.wishlist_table.wishlist_view.shop_table.cart.images_grid
         .responsive.products.columns-4.enhanced
         li#yith-wcwl-row-<id>.product[.instock|.outofstock]
           .item-wrapper
             .product-thumbnail > a > img
             .item-details > .item-details-wrapper
               a.close
               h3.product-name
               table.item-details-table
                 tr.product-price        > td.label + td.value
                 tr.product-stock-status > td.label + td.value
                                           > span.wishlist-in-stock
                                           | span.wishlist-out-of-stock
               .product-add-to-cart > a.button.add_to_cart_button
               .product-remove     > a.remove_from_wishlist > i.fa-trash
         li.wishlist-empty                (when the list has no items)
       .yith_wcwl_wishlist_footer
         .yith-wcwl-share > h4.yith-wcwl-share-title + ul > li.share-button > a
         .yith_wcwl_footer_additional_action
           > input[name="add_all_to_cart"], a.ask-an-estimate-button

   Stock YITH behaviour for this layout hides .item-details and only reveals it
   as an absolutely-positioned popover on hover, so the page renders as a bare
   wall of images with no name, price, stock or buy button. This section turns
   each row into a self-contained product card with everything always visible.

   Specificity notes: this file loads at position 32, the plugin stylesheet at
   24, but the parent theme's woocommerce.css loads at 37 - AFTER us. So rules
   that fight the plugin only need to tie it, while rules that fight
   woocommerce.css (.woocommerce ul.products.columns-4 li.product = 0,4,2 and
   .wishlist_table .add_to_cart.button = 0,3,0) need to outrank it. !important
   appears in exactly two places, both undoing someone else's !important:
   the archive "hide add to cart" rule earlier in this file, and the plugin's
   own .wishlist_table .product-add-to-cart a.button padding.
   ========================================================================== */

/* --- Form shell ---------------------------------------------------------- */

.woocommerce form#yith-wcwl-form {
	padding: 0;
	margin: 0 0 40px;
	background: transparent;
}

/* --- The list becomes a responsive card grid ----------------------------- */

/* Beats .woocommerce ul[class*="columns-"] { margin: 0 -15px } (0,2,1). */
.wishlist_table.images_grid.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	max-width: 100%;
	list-style: none;
}

/* WooCommerce's float clearfix on ul.products injects ::before/::after boxes.
   Harmless in a float layout, but in a grid container they become real grid
   items and push every card one cell along. */
.wishlist_table.images_grid.products::before,
.wishlist_table.images_grid.products::after {
	display: none;
}

/* --- Product card -------------------------------------------------------- */

/* 5 classes beats .woocommerce ul.products.columns-4 li.product (0,4,2),
   which would otherwise force width:25% onto the grid items. float/clear from
   the same stylesheet are inert on grid items, so they need no override. */
.woocommerce .wishlist_table.images_grid.products li.product {
	display: flex;
	width: auto;
	margin: 0;
	padding: 0;
	background: #ffffff;
	border: 1px solid #ede4d8;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(26, 59, 36, 0.05);
	transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.woocommerce .wishlist_table.images_grid.products li.product:hover {
	border-color: #e6c9a8;
	box-shadow: 0 10px 26px rgba(26, 59, 36, 0.13);
	transform: translateY(-3px);
}

/* Out-of-stock rows read as muted rather than broken. */
.woocommerce .wishlist_table.images_grid.products li.product.outofstock {
	background: #fbf8f4;
}

.wishlist_table.images_grid li.product .item-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* --- Thumbnail ----------------------------------------------------------- */

.wishlist_table.images_grid li .product-thumbnail {
	position: relative;
	padding: 10px 10px 0;
}

.wishlist_table.images_grid li .product-thumbnail > a {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	background: #f3ece3;
}

.wishlist_table.images_grid li .product-thumbnail > a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	transition: transform 0.35s ease;
}

/* Replace the plugin's brightness(1.1) flash with a calmer zoom. */
.wishlist_table.images_grid li.show .product-thumbnail > a img,
.wishlist_table.images_grid li:hover .product-thumbnail > a img {
	filter: none;
	transform: scale(1.05);
}

.woocommerce .wishlist_table.images_grid.products li.product.outofstock .product-thumbnail > a img {
	filter: grayscale(0.55);
	opacity: 0.75;
}

/* --- Details: pull the hover popover back into the card flow ------------- */

/* Ties the plugin selector (0,3,1); we load later, so we win. */
.wishlist_table.images_grid li .item-details {
	display: block;
	position: static;
	width: auto;
	left: auto;
	right: auto;
	bottom: auto;
	flex: 1 1 auto;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.wishlist_table.images_grid li .item-details .item-details-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 14px 16px 16px;
	line-height: 1.6;
}

/* The popover close affordance is meaningless once details are always shown. */
.wishlist_table.images_grid li .item-details a.close {
	display: none;
}

.wishlist_table.images_grid li .item-details h3.product-name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: #1a3b24;
	text-align: start;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}

/* --- Price / stock meta table becomes a stacked block -------------------- */

.wishlist_table.images_grid li .item-details table.item-details-table,
.wishlist_table.images_grid li .item-details table.item-details-table tbody {
	display: block;
	width: 100%;
	margin: 0;
	border: none;
	background: transparent;
}

.wishlist_table.images_grid li .item-details table.item-details-table tr {
	display: block;
}

.wishlist_table.images_grid li .item-details table.item-details-table td {
	display: block;
	padding: 0;
	border: none;
	font-size: 1em;
	text-align: start;
	vertical-align: baseline;
}

/* "Price:" / "Stock:" row labels add nothing next to a currency amount and a
   stock pill, and they are the first thing to break when the plugin's
   translation loads late, so drop them from the card. */
.wishlist_table.images_grid li .item-details table.item-details-table td.label {
	display: none;
}

.wishlist_table.images_grid li .item-details tr.product-price td.value {
	font-size: 1.15rem;
	font-weight: 700;
	color: #c7793f;
	letter-spacing: 0;
}

.wishlist_table.images_grid li .item-details tr.product-price td.value del {
	font-size: 0.85rem;
	font-weight: 400;
	color: #9a9088;
	margin-inline-start: 6px;
}

.wishlist_table.images_grid li .item-details tr.product-price td.value ins {
	text-decoration: none;
	background: transparent;
	color: #c7793f;
}

.wishlist_table.images_grid li .item-details tr.product-stock-status td.value {
	margin-top: 4px;
}

/* --- Stock pills --------------------------------------------------------- */

.wishlist_table .wishlist-in-stock,
.wishlist_table .wishlist-out-of-stock {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.8;
	white-space: nowrap;
}

.wishlist_table .wishlist-in-stock {
	background: #e7efe8;
	color: #1a3b24;
}

.wishlist_table .wishlist-out-of-stock {
	background: #f4e5d8;
	color: #82512e;
}

/* --- Add to cart --------------------------------------------------------- */

/* The archive rule earlier in this file (ul.products li.product
   a.button.add_to_cart_button { display: none !important }) also matches the
   wishlist grid, so this is the one place an !important is unavoidable. */
.wishlist_table.images_grid li .item-details .product-add-to-cart {
	margin: auto 0 0;
	padding-top: 4px;
	text-align: center;
}

.wishlist_table.images_grid li .item-details .product-add-to-cart a.button.add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	/* Plugin ships .wishlist_table .product-add-to-cart a.button as !important. */
	padding: 11px 14px !important;
	border: none;
	border-radius: 10px;
	background: #1a3b24;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.7;
	text-align: center;
	text-transform: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.wishlist_table.images_grid li .item-details .product-add-to-cart a.button.add_to_cart_button:hover,
.wishlist_table.images_grid li .item-details .product-add-to-cart a.button.add_to_cart_button:focus {
	background: #82512e;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(130, 81, 46, 0.32);
}

/* The parent theme glues a FontAwesome arrow (:after) and plus sign (:before)
   onto every add-to-cart link. In a centred card button they read as stray
   glyphs, and on phones they steal the width the label needs to stay on one
   line, so both go. */
.wishlist_table.images_grid li .item-details .product-add-to-cart a.button.add_to_cart_button:before,
.wishlist_table.images_grid li .item-details .product-add-to-cart a.button.add_to_cart_button:after {
	display: none;
}

/* "View cart" link WooCommerce injects after an AJAX add. */
.wishlist_table.images_grid li .item-details .product-add-to-cart a.added_to_cart {
	display: block;
	margin-top: 8px;
	font-size: 0.82rem;
	font-weight: 600;
	color: #82512e;
	text-decoration: underline;
}

/* --- Remove ------------------------------------------------------------- */

/* Floats over the thumbnail, top-left (the far corner in RTL), the way a
   dismiss control is expected to sit. li.product is already position:relative. */
.wishlist_table.images_grid li .item-details .product-remove {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 3;
	width: 34px;
	height: 34px;
	margin: 0;
	text-align: center;
	/* Hidden until the card is hovered — a delete control sitting permanently
	   over every product is easy to hit by accident and adds clutter to a page
	   that is meant to be a shortlist. Kept in the layout rather than display:
	   none so it can fade, and so it stays reachable by keyboard. */
	opacity: 0;
	visibility: hidden;
	transform: scale( 0.9 );
	transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.wishlist_table.images_grid li:hover .item-details .product-remove,
.wishlist_table.images_grid li:focus-within .item-details .product-remove {
	opacity: 1;
	visibility: visible;
	transform: scale( 1 );
}

/* Touch screens have no hover, so leave it visible there. */
@media ( hover: none ) {
	.wishlist_table.images_grid li .item-details .product-remove {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* The plugin pins a.remove_from_wishlist itself (position:absolute; right:22px);
   the wrapper is what we position, so the link goes back into flow. */
.wishlist_table.images_grid li .item-details .product-remove a.remove_from_wishlist {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #82512e;
	font-size: 0.85rem;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(26, 59, 36, 0.18);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wishlist_table.images_grid li .item-details .product-remove a.remove_from_wishlist:hover,
.wishlist_table.images_grid li .item-details .product-remove a.remove_from_wishlist:focus {
	background: #82512e;
	color: #ffffff;
	transform: scale(1.08);
}

.wishlist_table.images_grid li .item-details .product-remove a.remove_from_wishlist i {
	margin: 0;
}

/* --- Empty state --------------------------------------------------------- */

.wishlist_table.images_grid li.wishlist-empty {
	grid-column: 1 / -1;
	width: auto;
	margin: 0;
	padding: 54px 24px;
	border: 1px dashed #e6c9a8;
	border-radius: 16px;
	background: #fbf7f2;
	color: #6d6259;
	font-size: 1.02rem;
	text-align: center;
}

/* --- Title (rendered only when the list has a name) ---------------------- */

.yith-wcwl-form .wishlist-title-container {
	margin-bottom: 22px;
}

.yith-wcwl-form .wishlist-title h2 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: #1a3b24;
}

.yith-wcwl-form .wishlist-title a.btn.button.show-title-form {
	margin-inline-start: 12px;
	padding: 6px 14px;
	border-radius: 8px;
	background: #e6c9a8;
	color: #1a3b24;
	font-size: 0.82rem;
	font-weight: 600;
}

.yith-wcwl-form .wishlist-title a.btn.button.show-title-form:hover {
	background: #82512e;
	color: #ffffff;
}

/* --- Footer: share + bulk actions --------------------------------------- */

.yith-wcwl-form .yith_wcwl_wishlist_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
	padding: 18px 20px;
	border: 1px solid #ede4d8;
	border-radius: 14px;
	background: #fbf7f2;
}

.yith-wcwl-form .yith-wcwl-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.yith-wcwl-form .yith-wcwl-share h4.yith-wcwl-share-title {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 700;
	color: #1a3b24;
}

.yith-wcwl-form .yith-wcwl-share ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yith-wcwl-form .yith-wcwl-share ul li.share-button {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yith-wcwl-form .yith-wcwl-share ul li.share-button a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #1a3b24;
	color: #ffffff;
	font-size: 1rem;
	line-height: 1;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.yith-wcwl-form .yith-wcwl-share ul li.share-button a:hover {
	background: #82512e;
	color: #ffffff;
	transform: translateY(-2px);
}

.yith-wcwl-form .yith_wcwl_footer_additional_action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.yith-wcwl-form .yith_wcwl_footer_additional_action input[name="add_all_to_cart"],
.yith-wcwl-form .yith_wcwl_footer_additional_action a.ask-an-estimate-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 11px 22px;
	border: none;
	border-radius: 10px;
	background: #1a3b24;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.7;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.yith-wcwl-form .yith_wcwl_footer_additional_action a.ask-an-estimate-button {
	background: #e6c9a8;
	color: #1a3b24;
}

.yith-wcwl-form .yith_wcwl_footer_additional_action input[name="add_all_to_cart"]:hover,
.yith-wcwl-form .yith_wcwl_footer_additional_action a.ask-an-estimate-button:hover {
	background: #82512e;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(130, 81, 46, 0.32);
}

.yith-wcwl-form .wishlist-pagination {
	margin-top: 24px;
	text-align: center;
}

/* --- Responsive ---------------------------------------------------------- */

@media only screen and (max-width: 991px) {
	.wishlist_table.images_grid.products {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 18px;
	}
}

/* Phones: two narrow cards per row, never a horizontal scrollbar. The grid is
   already block-level, so the "table" cannot overflow the viewport. */
@media only screen and (max-width: 600px) {
	.wishlist_table.images_grid.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.wishlist_table.images_grid li .item-details .item-details-wrapper {
		gap: 6px;
		padding: 12px 12px 14px;
	}

	.wishlist_table.images_grid li .item-details h3.product-name {
		font-size: 0.9rem;
		min-height: 2.9em;
	}

	.wishlist_table.images_grid li .item-details tr.product-price td.value {
		font-size: 1rem;
	}

	.wishlist_table.images_grid li .item-details .product-add-to-cart a.button.add_to_cart_button {
		padding: 9px 6px !important;
		font-size: 0.78rem;
	}

	.wishlist_table.images_grid li .item-details .product-remove {
		top: 14px;
		left: 14px;
		width: 30px;
		height: 30px;
	}

	.wishlist_table.images_grid li .item-details .product-remove a.remove_from_wishlist {
		width: 30px;
		height: 30px;
		font-size: 0.78rem;
	}

	.yith-wcwl-form .yith_wcwl_wishlist_footer {
		flex-direction: column;
		align-items: stretch;
		padding: 16px;
	}

	.yith-wcwl-form .yith_wcwl_footer_additional_action input[name="add_all_to_cart"],
	.yith-wcwl-form .yith_wcwl_footer_additional_action a.ask-an-estimate-button {
		width: 100%;
	}
}

/* Very narrow phones: one card per row keeps the buy button readable. */
@media only screen and (max-width: 359px) {
	.wishlist_table.images_grid.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Sticky header — RTL correction and parity with the normal header
   --------------------------------------------------------------------------
   The parent theme builds the pinned bar with an absolutely-positioned
   .header-middle-part anchored with a hardcoded `left: 0`, and hides the logo.
   That is written for an LTR site: here it mirrored the bar (the «محصولات»
   button and icons jumped to the wrong side) and dropped the logo. Rather than
   fight the absolute positioning, the pinned bar is laid out as a plain RTL
   flex row: logo right, menu centre, icons left — the same order as the
   unpinned header.
   ========================================================================== */

.aft-sticky-navigation {
	background: #1a3b24 !important;
}

/* No horizontal padding and no gap: the icon cluster has to start at exactly
   the same x as it does in the main header, so the bar does not visibly shift
   sideways the moment it pins. An 18px inset here was moving it.
   No vertical padding either — the live pinned bar is 60-66px tall and every
   extra pixel here stacks on top of the 60px toggle/nav row. */
.aft-sticky-navigation .header-middle-right-part {
	position: relative !important;
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	direction: rtl;
	padding: 0;
	box-sizing: border-box;
}

/* All three parts become normal flex children — no absolute positioning.
   The logo is deliberately excluded from `max-width`/`width`: it is the
   element the compact state collapses, and an `!important` here overrode the
   transition target so it never animated. */
.aft-sticky-navigation .header-left-part,
.aft-sticky-navigation .header-middle-part,
.aft-sticky-navigation .header-right-part {
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	transform: none !important;
	float: none !important;
	direction: rtl;
}

.aft-sticky-navigation .header-middle-part,
.aft-sticky-navigation .header-right-part {
	width: auto !important;
	max-width: none !important;
}

/* Pinned-bar orientation: «محصولات» + icons on the LEFT, menu links on the
   RIGHT — same way round as the main header. (The bar was briefly mirrored to
   copy the 8081 reference's own sticky layout; client reversed that on
   2026-07-28 — icons left in the mini bar, full header untouched.) DOM order
   plus the inherited rtl direction produce this on their own, so there is
   nothing to add here — this comment exists because a `direction: ltr` flip
   used to live at this spot, and where it must sit if it ever returns: AFTER
   the parts' `direction: rtl` rules above, since at equal specificity file
   order decides. */

/* No logo in the pinned bar — see the note further up. An earlier version of
   this file put the logo back (the theme hides it) and forced an explicit
   order; both are gone, so the pinned strip is just the menu and the icons and
   the natural flow decides the sides, exactly as on the live site. */
.aft-sticky-navigation .desktop-header {
	display: flex !important;
	align-items: center;
	direction: rtl;
}
/* The logo is collapsed by the animated rule further up, not hidden outright. */

/* No `order` on either of these.
   The pinned bar must read the same way round as the main header: the icon
   cluster and «محصولات» on the LEFT, the four menu links on the RIGHT. That is
   what DOM order plus the inherited rtl direction already produce — the menu is
   the first child, and in an rtl flex row the first child sits right-most.
   Explicit order values here used to reverse exactly that, which is why the
   pinned bar came out mirrored against the header it replaces. */
.aft-sticky-navigation .header-middle-part {
	flex: 1 1 auto;
	display: flex !important;
	align-items: center;
}

/* rtl flex-start is the RIGHT edge. Without the logo the menu box stretches
   across the space the logo used to fill, so centring inside it leaves the
   links stranded mid-bar. Anchoring right gives the pinned strip the same
   balance as the main header: icons hard left, links hard right.
   The `!important` is needed because the desktop block further down sets
   `justify-content: center` on the same element at equal specificity, and
   being later in the file it would otherwise win.
   Scoped to desktop on purpose: the extra `>` in that selector raises its
   specificity above the max-width:1024px rule that hides this element on a
   phone, so leaving it unscoped put the menu back into the pinned mobile bar
   and made it taller pinned (210px) than unpinned (194px). */
@media screen and (min-width: 1025px) {
	.aft-sticky-navigation .header-middle-part,
	.aft-sticky-navigation .header-middle-right-part > .header-middle-part {
		justify-content: flex-start !important;
	}
}

.aft-sticky-navigation .header-right-part {
	flex: 0 0 auto;
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
}

/* Menu itself flows right-to-left with room to breathe. */
.aft-sticky-navigation .main-navigation ul.menu {
	direction: rtl;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;
	margin: 0;
}
.aft-sticky-navigation .main-navigation ul.menu > li {
	float: none !important;
	white-space: nowrap;
}

/* Below desktop the pinned bar matches the live reference: the icon cluster
   on the left and the hamburger on the right, 60px tall. The hamburger lives
   inside .header-middle-part, so that part stays visible — only the inline
   menu list (which the flex rule above would otherwise resurrect) and the
   «محصولات» button are hidden; on the reference the button has no place in
   the pinned bar (there it overflows below the bar, which is the known
   overlap bug, not a design). */
@media screen and (max-width: 1024px) {
	.aft-sticky-navigation .main-navigation ul.menu {
		display: none !important;
	}
	.aft-sticky-navigation .express-off-canvas-panel {
		display: none !important;
	}
	.aft-sticky-navigation .header-right-part {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* The desktop pinned rules give this part flex:1 and 6px of vertical
	   padding; on a phone that padding is what pushed the bar to 72px. */
	.aft-sticky-navigation .header-middle-part {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}


/* ==========================================================================
   Panel close buttons removed (click-outside / Escape replace them)
   ========================================================================== */

span.close-serach-form,
#myOverlay .close-serach-form,
.sidr-class-sidr-button-close,
#offcanvasCollapse .offcanvas-close,
#offcanvasCollapse .close {
	display: none !important;
}

/* ==========================================================================
   Wishlist — brand buttons, no stray arrow, and a usable phone layout
   ========================================================================== */

/* The theme paints WooCommerce buttons red and appends a FontAwesome arrow.
   Wishlist buy buttons follow the brand palette instead. */
.wishlist_table .product-add-to-cart a.button,
.wishlist_table a.add_to_cart_button,
.wishlist-items-wrapper .product-add-to-cart a.button {
	background: #1a3b24 !important;
	border-color: #1a3b24 !important;
	color: #fff !important;
	border-radius: 10px !important;
	width: 100%;
	text-align: center;
	padding: 12px 14px !important;
	font-weight: 700;
}
.wishlist_table .product-add-to-cart a.button:hover,
.wishlist_table a.add_to_cart_button:hover {
	background: #82512e !important;
	border-color: #82512e !important;
}
/* Kill the theme's decorative arrow glyph after cart buttons inside the list. */
.wishlist_table .product-add-to-cart a.button:after,
.wishlist_table a.add_to_cart_button:after,
.wishlist_table a.button:before {
	content: none !important;
	display: none !important;
}

@media screen and (max-width: 767px) {
	/* One clean card per row; no side-scrolling table. */
	ul.wishlist_table.images_grid,
	.wishlist_table.images_grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 14px !important;
		padding: 0 12px !important;
		margin: 0 !important;
	}
	ul.wishlist_table.images_grid li.product {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}
	.wishlist_table .item-wrapper {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start;
		gap: 12px;
		text-align: right;
	}
	.wishlist_table .product-thumbnail {
		flex: 0 0 92px !important;
		max-width: 92px !important;
	}
	.wishlist_table .product-thumbnail img {
		width: 92px !important;
		height: 92px !important;
		object-fit: cover;
		border-radius: 10px;
	}
	.wishlist_table .item-details,
	.wishlist_table .item-details-wrapper {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
	}
	.wishlist_table .product-name,
	.wishlist_table h3.product-name {
		font-size: 15px !important;
		margin: 0 0 6px !important;
		white-space: normal !important;
		word-break: break-word;
	}
	.wishlist_table .item-details-table {
		width: 100% !important;
		font-size: 13px;
	}
	/* Share box should not be a tall narrow column on phones. */
	.yith_wcwl_wishlist_footer,
	.yith-wcwl-share {
		width: 100% !important;
		box-sizing: border-box;
		text-align: center;
	}
	.yith-wcwl-share ul {
		display: flex !important;
		justify-content: center;
		gap: 10px;
		padding: 0;
		margin: 8px 0 0;
	}
}

/* ==========================================================================
   Mobile header — stop the drawer, icons and «محصولات» button colliding
   ========================================================================== */

@media screen and (max-width: 1024px) {
	.desktop-header {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	.header-middle-right-part {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	/* The products button was overlapping the menu and the icon row. */
	.header-right-part .product-menu-wrapper,
	a.offcanvas-nav,
	.express-off-canvas-panel {
		position: static !important;
		float: none !important;
		margin: 0 !important;
	}
	.express-off-canvas-panel .offcanvas {
		display: inline-flex !important;
		align-items: center;
	}

	/* One row under the logo, exactly like the live reference: «محصولات» +
	   icons on the left, the hamburger on the right — 60px tall (the height
	   of the theme's toggle-menu span). The theme absolutely-positions BOTH
	   .header-right-part and .header-middle-part inside the same relative
	   wrapper, so on the reference they self-overlap; here both are normal
	   flex children of one rtl row. The hamburger's .header-middle-part is
	   DOM-first, so rtl places it right-most — no `order:` needed (explicit
	   orders are what mirrored this bar twice before). */
	.header-middle-right-part {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		direction: rtl;
		/* The wrap rule further up is for the logo row; here it split the
		   hamburger and the icons onto two rows the moment their content
		   width passed 350px. */
		flex-wrap: nowrap !important;
	}
	.header-middle-part {
		position: static !important;
		top: auto !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		float: none !important;
		width: auto !important;
		flex: 0 0 auto;
	}
	.header-middle-part .main-navigation,
	.header-middle-part .navigation-container {
		float: none !important;
		width: auto !important;
		/* The nav is the theme's positioning context; if it stays `relative`
		   the opened menu below anchors to the 40px toggle instead of the
		   header row. */
		position: static !important;
	}

	/* The hamburger's drop-down. On the reference the open menu spans the
	   full header width and sits on the green band; here the header is fixed,
	   so the list is absolutely positioned under the icon row (anchored to
	   .header-middle-right-part, the nearest positioned ancestor) and brings
	   its own green background instead of stretching the band. Left in the
	   row's flow it shrank to a 139px column and crushed the icon cluster. */
	.header-middle-part .main-navigation ul.menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto !important;
		margin: 0;
		z-index: 60;
		background: #1a3b24;
		padding: 4px 0 14px;
		box-shadow: 0 14px 24px rgba(0, 0, 0, .25);
	}

	/* The cart and the «محصولات» pill must never flex-shrink: the hidden
	   search form gives its wrapper a huge max-content basis, which makes the
	   row "overflow" and squeeze every sibling — the cart lost 8px and its
	   dropdown caret wrapped UNDER the icon, and the pill broke into an
	   icon line over a text line. Frozen at natural size both stay one line;
	   the search wrapper keeps flex-shrink:1 and absorbs the difference
	   (its visible icon is only 15px wide, so nothing observable moves). */
	.header-right-part .cart-shop,
	.header-right-part .express-off-canvas-panel {
		flex: 0 0 auto;
	}

	/* Icon cluster: single line, in normal flow (the theme lifts it out with
	   absolute positioning, which is what landed it on top of the page
	   title). rtl flex-end anchors it to the LEFT edge, hamburger side free. */
	.header-right-part {
		position: static !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		/* No gap: the theme already spaces the icons with their own 7+10px
		   margins. gap on top of that overflowed the 310px row and pushed
		   the search icon under the hamburger. */
		gap: 0;
		flex-wrap: nowrap;
		width: auto !important;
		flex: 1 1 auto;
		min-width: 0;
		padding: 6px 12px;
		box-sizing: border-box;
	}
	.desktop-header,
	.header-middle-right-part {
		position: relative !important;
	}
	/* No extra gap above/below the stacked mobile header, and a compact
	   header overall — it was 234px tall on a 390px screen, pushing all the
	   actual content below the fold. */
	.site-content,
	#content {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
	.header-left-part {
		padding: 6px 0 !important;
	}
	/* Logo and contact strip sized to the live reference: 65px logo art in a
	   95px row, 14px contact text — the header still lands at ~222px total
	   because the hamburger no longer costs its own 64px row. */
	.site-branding img,
	.custom-logo-link img {
		max-height: 65px !important;
		width: auto !important;
	}
	.top-header {
		padding: 10px 0 !important;
		font-size: 14px;
	}
	.desktop-header {
		padding: 0 !important;
	}
	.header-right-part {
		padding: 4px 12px !important;
	}
	#masthead.site-header,
	.desktop-header,
	#moble-header {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
	.top-header {
		margin-bottom: 0 !important;
	}

	/* The slide-out drawer must sit above the header, not under it. */
	.sidr {
		z-index: 1000002 !important;
	}
	.sidr .sidr-inner > ul > li > a {
		padding: 12px 16px;
	}
}


/* ==========================================================================
   «محصولات» products button — brand brown, not the theme's red
   ========================================================================== */

.express-off-canvas-panel a.offcanvas-nav i,
body .express-off-canvas-panel a.offcanvas-nav i,
.aft-sticky-navigation .express-off-canvas-panel a.offcanvas-nav i {
	background-color: #82512e !important;
}
.express-off-canvas-panel a.offcanvas-nav i:hover,
body .express-off-canvas-panel a.offcanvas-nav i:hover {
	background-color: #1a3b24 !important;
}

/* The wrapper renders as a filled pill in this theme build — same brown. */
.express-off-canvas-panel,
.express-off-canvas-panel .offcanvas,
.header-right-part .product-menu-wrapper {
	background-color: #82512e !important;
	border-color: #82512e !important;
	border-radius: 8px;
}
.express-off-canvas-panel:hover,
.express-off-canvas-panel .offcanvas:hover {
	background-color: #1a3b24 !important;
	border-color: #1a3b24 !important;
}
.express-off-canvas-panel a.offcanvas-nav,
.express-off-canvas-panel a.offcanvas-nav:hover {
	color: #fff !important;
}

/* ==========================================================================
   Main (unpinned) header — layout matches the live site
   --------------------------------------------------------------------------
   Live order, left to right:  [icons + محصولات] ... [menu] ... [logo]
   The logo sits on the RIGHT. This block previously forced the opposite,
   because it was written while the client's Additional CSS was missing from
   this environment — that CSS sets `html { direction: ltr }` and re-applies
   rtl only to specific containers, which is what produces the live order.
   With that CSS restored the theme's own flow is already correct, so the
   ordering is left alone here; only the flex plumbing the theme gets wrong
   is repaired.
   ========================================================================== */

@media screen and (min-width: 1025px) {
	.desktop-header {
		display: flex !important;
		align-items: center;
		direction: rtl;
	}

	/* No explicit order — DOM order plus the inherited direction already
	   place the logo on the right, as on the live site. */
	.desktop-header > .header-middle-right-part {
		flex: 1 1 auto;
	}
	.desktop-header > .header-left-part {
		flex: 0 0 auto;
	}

	/* Inside the cluster: icons to the right, menu taking the centre. */
	.header-middle-right-part {
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		justify-content: space-between;
		direction: rtl;
		position: relative !important;
		width: 100% !important;
	}
	.header-middle-right-part > .header-right-part {
		position: static !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		display: flex !important;
		align-items: center;
		gap: 12px;
		width: auto !important;
		flex: 0 0 auto;
	}
	.header-middle-right-part > .header-middle-part {
		position: static !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		flex: 1 1 auto;
		display: flex !important;
		justify-content: center;
		align-items: center;
		width: auto !important;
	}

	.header-middle-part .main-navigation ul.menu {
		direction: rtl;
		display: flex;
		align-items: center;
		gap: 16px;
		margin: 0;
	}
	.header-middle-part .main-navigation ul.menu > li {
		float: none !important;
		white-space: nowrap;
	}
}

/* ==========================================================================
   Products off-canvas panel — scrolls on its own, and stops hiding the header
   --------------------------------------------------------------------------
   The sidr plugin opens the panel in "displace" mode: it sets the body to
   position:absolute with a fixed pixel width and slides the whole page sideways
   to make room. On a phone that pushes the layout wider than the screen, and
   the browser reacts the only way it can — it zooms out to fit. Two things
   break at once as a result:

     * the layout viewport grows (measured: 844px -> 1537px), so the panel's
       `height: 100%` resolves to 1537px. It is then taller than the screen and
       has nothing left to scroll internally, so dragging it scrolls the page
       behind it instead. That is the "panel scroll is tied to the main scroll"
       report.

     * the pinned header is fixed to that same enlarged viewport, so it sits
       above the visible area. That is the "header disappears on mobile" report.

   Stopping the displacement fixes both. The panel simply overlays the page,
   which is how an off-canvas drawer is normally expected to behave.
   ========================================================================== */

/* sidr writes these as inline styles, so !important is required to win.
   
   Both classes matter, and `sidr-animating` is the important one. sidr adds
   `sidr-open` in its open-completed callback — after the 200ms animation has
   already finished. It displaces the body at the *start* of that animation, so
   keying only on `sidr-open` left the page free to slide sideways for the whole
   200ms and then snap back the instant the class landed. That is the "pushes
   the website left, then clips into place" effect. `sidr-animating` is added
   before the displacement, so it covers the window that was unguarded, on the
   way out as well as in. */
body.sidr-open,
body.sidr-animating {
	position: static !important;
	width: auto !important;
	right: 0 !important;
	left: 0 !important;
	/* sidr also sets a transition on the body so its displacement eases.
	   Nothing should be easing: the page is not moving. */
	transition: none !important;
	transform: none !important;
}

/* Hold the page still while the panel is open, so a drag inside the panel
   cannot spill over into scrolling the page underneath. Only while actually
   open — locking during the closing animation causes a visible reflow as the
   scrollbar returns. */
body.sidr-open {
	overflow: hidden !important;
}

/* Full-height overlay, the way an off-canvas drawer normally behaves. It was
   briefly offset to sit below the header, which left it visibly detached and
   clipped at the bottom on a desktop screen. The header going missing was the
   displacement bug above, not a stacking problem, so the offset was solving
   nothing and is gone. */
#sidr,
body.sidr-open #sidr {
	top: 0 !important;
	height: 100% !important;
	max-height: 100% !important;
	overflow-y: auto !important;
	/* Once the panel hits its own top or bottom, stop there — do not hand the
	   remaining scroll to the page behind it. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Keep the panel clear of the phone's home indicator / browser chrome. */
#sidr .sidr-inner {
	padding-bottom: calc( 24px + env( safe-area-inset-bottom, 0px ) );
}

/* ==========================================================================
   Contact Form 7 — file attachment field
   --------------------------------------------------------------------------
   The native control renders as the browser's own "Choose File / No file
   chosen" widget: English, left-to-right and unstyled in the middle of an
   RTL Persian form. The input is kept in place (so CF7 validation and the
   POST are untouched) but stretched transparently over a styled box, which
   also means click-to-open and drag-and-drop keep working without script.
   ========================================================================== */
.gs-file {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1.5px dashed #ddd3c4;
	border-radius: 12px;
	background: #fdfaf5;
	direction: rtl;
	text-align: right;
	transition: border-color .2s ease, background .2s ease;
}

.gs-file.is-dragover,
.gs-file.is-filled {
	border-style: solid;
	border-color: #d4a373;
	background: #fffaf2;
}

.gs-file-icon {
	width: 42px;
	height: 42px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, .05 );
}

.gs-file-icon svg {
	width: 21px;
	height: 21px;
	stroke: #d2b17c;
}

.gs-file.is-filled .gs-file-icon svg {
	stroke: #4a4238;
}

.gs-file-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.gs-file-title {
	font-size: 15px;
	font-weight: 600;
	color: #4a4238;
	/* A long file name must not push the layout wider than the form. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gs-file-hint {
	font-size: 12.5px;
	color: #9a9084;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gs-file-hint.is-error {
	color: #b3261e;
}

/* Sits above the transparent input so the × is clickable. */
.gs-file-clear {
	position: relative;
	z-index: 2;
	flex: none;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #efe6d8;
	color: #4a4238;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.gs-file-clear:hover {
	background: #d4a373;
	color: #fff;
}

.gs-file-clear[hidden] {
	display: none;
}

/* CF7 wraps the input in .wpcf7-form-control-wrap; stretch that over the box. */
.gs-file .wpcf7-form-control-wrap {
	position: absolute;
	inset: 0;
	margin: 0;
	display: block;
}

/* The form's own `input:not([type="submit"])` rules are !important, so the
   overrides that hide this input have to be too. */
.gs-file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: transparent !important;
	opacity: 0;
	cursor: pointer;
}

/* Keyboard users get the same focus ring the text inputs have. */
.gs-file:focus-within {
	border-color: #d4a373;
	box-shadow: 0 0 10px rgba( 212, 163, 115, .18 );
}

/* The validation tip is inside the stretched wrapper, so pull it below the box
   instead of letting it paint underneath the label text. Being absolute it
   takes no space of its own, so the box has to open a gap for it — but only
   while there is a tip to show, or every form carries the empty space. */
.gs-file:has( .wpcf7-not-valid-tip ) {
	margin-bottom: 30px;
}

.gs-file .wpcf7-not-valid-tip {
	position: absolute;
	top: calc( 100% + 4px );
	right: 0;
	left: 0;
	font-size: 12.5px;
}

@media (max-width: 480px) {
	.gs-file {
		padding: 14px;
		gap: 11px;
	}

	/* .geraset-container is a wrapping column flex on phones, so its width comes
	   from its widest content — a long file name kept on one line drags the whole
	   form wider than the screen. Let it wrap here instead of ellipsising. */
	.gs-file-title,
	.gs-file-hint {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* ==========================================================================
   لیست علاقه‌مندی‌ها — wishlist cards
   --------------------------------------------------------------------------
   YITH's grid view lays each card out with its own padding on some elements
   and none on others, so the add-to-cart button hung past the card's left
   edge while stopping short on the right, and the stock badge sat on a
   different margin again. Everything is put on one set of edges here, and the
   cards in a row are made equal height so their contents line up across the
   row instead of floating at whatever height their text ends at.
   ========================================================================== */
.wishlist_table.images_grid li.product {
	display: flex;
	height: 100%;
	padding: 0;
}

.wishlist_table.images_grid li.product .item-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.wishlist_table.images_grid li.product .item-details,
.wishlist_table.images_grid li.product .item-details-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
}

/* One inset for every row of the card — image, name, price, stock. */
.wishlist_table.images_grid li.product .item-details-wrapper {
	box-sizing: border-box;
	padding: 16px 18px 18px;
	gap: 10px;
}

.wishlist_table.images_grid li.product .item-details-wrapper > * {
	margin-left: 0;
	margin-right: 0;
}

.wishlist_table.images_grid li.product .product-name {
	margin: 0;
	text-align: right;
}

.wishlist_table.images_grid li.product .item-details-table {
	width: 100%;
	margin: 0;
}

/*
 * Price and stock live in a two-cell table whose padding pushed them 20px in
 * from the product name above, so the three lines each ended on a different
 * edge. !important because the client's Additional CSS carries
 * `.wishlist_table td { padding: 20px !important }` for the list view, and
 * that stylesheet is printed after this one.
 */
.wishlist_table.images_grid li.product .item-details-table td {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* The thumbnail sat on a narrower inset than the text below it. */
.wishlist_table.images_grid li.product .product-thumbnail {
	padding-left: 18px;
	padding-right: 18px;
}

.wishlist_table.images_grid li.product .product-thumbnail img {
	width: 100%;
	height: auto;
}

/* The stock badge is the last thing in the card; pinning it to the bottom is
   what makes the row line up when one product's name wraps and another's
   does not. */
.wishlist_table.images_grid li.product .additional-info-wrapper {
	margin-top: auto;
	padding: 0;
	width: 100%;
}

/*
 * The stock badge inherits `text-align: start`, and the client's Additional
 * CSS sets html{direction:ltr} with right-to-left re-applied per container —
 * so "start" resolves to the left here while the name and price above it are
 * right-aligned, and the badge sat on its own edge.
 */
.wishlist_table.images_grid li.product .additional-info-wrapper,
.wishlist_table.images_grid li.product .item-details-wrapper div:has( > [class*="stock"] ) {
	text-align: right;
}

.wishlist_table.images_grid li.product .additional-info-wrapper .wishlist-in-stock,
.wishlist_table.images_grid li.product .additional-info-wrapper .wishlist-out-of-stock,
.wishlist_table.images_grid li.product [class*="wishlist-in-stock"],
.wishlist_table.images_grid li.product [class*="wishlist-out-of-stock"] {
	display: inline-block;
	margin: 0;
}

/* The card is one big link target now, so say so. */
.wishlist_table.images_grid li.product {
	cursor: pointer;
}

.wishlist_table.images_grid li.product a.close,
.wishlist_table.images_grid li.product .remove_from_wishlist {
	cursor: pointer;
}