/*
Theme Name: میوکی لارا (Astra Child)
Description: پوسته فرزند آسترا برای فروشگاه میوکی لارا — تمام سفارشی‌سازی‌ها اینجا انجام می‌شود تا به‌روزرسانی پوسته مادر چیزی را خراب نکند.
Template: astra
Version: 2.4.1
Text Domain: astra-child
*/

/* ---- فونت وزیرمتن (میزبانی محلی) ---- */
@font-face {
	font-family: 'Vazirmatn';
	src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('fonts/Vazirmatn-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   پالت ایرانی — هماهنگ با لوگو: فیروزه‌ای، طلایی، کرم
   ========================================================================== */
:root {
	--mkl-teal: #1E6E68;        /* فیروزه‌ای تیره */
	--mkl-teal-dark: #17504C;   /* سرمه‌ای-فیروزه‌ای عمیق */
	--mkl-gold: #C29A3B;        /* طلایی */
	--mkl-gold-soft: #E8C979;   /* طلایی روشن */
	--mkl-cream: #FAF5EA;       /* کرم زمینه */
	--mkl-cream-2: #F3EBDA;     /* کرم تیره‌تر برای بخش‌ها */
	--mkl-border: #E6DCC3;      /* حاشیه کرم-طلایی */
	--mkl-text: #37322C;        /* متن */
	--mkl-zereshki: #8E2F3C;    /* زرشکی — برای تخفیف */
}

body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
.ast-site-identity .site-title,
.main-header-menu {
	font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
}

/* ---- زمینه کلی کرم به جای سفید بی‌روح ---- */
body,
.ast-plain-container.ast-no-sidebar #primary {
	background-color: var(--mkl-cream);
	color: var(--mkl-text);
}
h1, h2, h3, h4, h5, h6 { color: var(--mkl-teal-dark); }
a { color: var(--mkl-teal); }
a:hover { color: var(--mkl-gold); }

/* ==========================================================================
   هدر
   ========================================================================== */
.ast-above-header-wrap, .main-header-bar, .site-header {
	background-color: var(--mkl-cream) !important;
	border-bottom: 2px solid var(--mkl-gold);
}
.main-header-menu .menu-item > .menu-link {
	color: var(--mkl-teal-dark);
	font-weight: 500;
}
.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link {
	color: var(--mkl-gold);
}
.site-logo-img img { border-radius: 10px; }

/* ==========================================================================
   بنر (هیرو) — کاشی فیروزه‌ای با گره طلایی
   ========================================================================== */
.mkl-hero {
	position: relative;
	background:
		url('assets/girih.svg') repeat center / 96px 96px,
		linear-gradient(150deg, var(--mkl-teal-dark) 0%, var(--mkl-teal) 55%, #2B837B 100%);
	border-block: 4px solid var(--mkl-gold);
	padding: 84px 24px 92px;
	text-align: center;
	overflow: hidden;
}
.mkl-hero::after {
	/* قاب داخلی ظریف مثل حاشیه فرش */
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(232, 201, 121, 0.55);
	border-radius: 6px;
	pointer-events: none;
}
.mkl-hero .mkl-hero-kicker {
	color: var(--mkl-gold-soft);
	letter-spacing: 1px;
	font-size: 15px;
	margin-bottom: 6px;
}
.mkl-hero h1 {
	color: #FFF9EC;
	font-size: clamp(38px, 6vw, 60px);
	font-weight: 700;
	margin: 0 0 10px;
}
.mkl-hero .mkl-hero-sub {
	color: #DCEFEA;
	font-size: clamp(16px, 2.4vw, 21px);
	margin-bottom: 4px;
}
.mkl-hero .mkl-hero-note {
	color: rgba(220, 239, 234, 0.75);
	font-size: 14px;
	margin-bottom: 26px;
}
.mkl-hero .wp-block-button__link {
	background: var(--mkl-gold);
	color: #2B2313;
	font-weight: 700;
	font-size: 17px;
	padding: 13px 42px;
	border-radius: 40px;
	border: 1px solid var(--mkl-gold-soft);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	transition: transform .15s ease, box-shadow .15s ease;
}
.mkl-hero .wp-block-button__link:hover {
	background: var(--mkl-gold-soft);
	color: #2B2313;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   اسلایدر صفحه اصلی (MetaSlider) — قاب طلایی هماهنگ با تم
   ========================================================================== */
.metaslider {
	border-block: 4px solid var(--mkl-gold);
	background: var(--mkl-teal-dark);
}
.metaslider .flexslider {
	margin-bottom: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.metaslider .flex-control-nav.flex-control-paging li a {
	border: 1px solid var(--mkl-gold-soft);
	background: transparent;
}
.metaslider .flex-control-nav.flex-control-paging li a.flex-active {
	background: var(--mkl-gold);
}
.metaslider .flexslider .caption-wrap {
	background: linear-gradient(to top, rgba(23, 80, 76, 0.88), rgba(23, 80, 76, 0.1));
	opacity: 1;
}
.metaslider .flexslider .caption {
	font-family: 'Vazirmatn', Tahoma, sans-serif;
	direction: rtl;
	text-align: center;
	padding: 14px 20px 18px;
}
.metaslider .flexslider .caption h2 {
	color: #FFF9EC;
	font-size: clamp(18px, 2.6vw, 26px);
	margin: 0 0 4px;
}
.metaslider .flexslider .caption p {
	color: var(--mkl-gold-soft);
	font-size: clamp(13px, 1.7vw, 15px);
	margin: 0 0 10px;
}
.metaslider .flexslider .caption .mkl-slide-btn {
	display: inline-block;
	background: var(--mkl-gold);
	color: #2B2313;
	font-weight: 700;
	font-size: 14px;
	padding: 8px 26px;
	border-radius: 30px;
	border: 1px solid var(--mkl-gold-soft);
}
.metaslider .flexslider .caption .mkl-slide-btn:hover {
	background: var(--mkl-gold-soft);
	color: #2B2313;
}
/* شمارنده معکوس افتتاحیه (داخل کپشن اسلاید) */
.mkl-countdown {
	display: flex;
	justify-content: center;
	direction: rtl;
	gap: 10px;
	margin: 8px 0 10px;
}
.mkl-countdown .mkl-cd-box {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 60px;
	padding: 7px 10px 5px;
	background: rgba(255, 249, 236, 0.1);
	border: 1px solid var(--mkl-gold-soft);
	border-radius: 10px;
}
.mkl-countdown .mkl-cd-num {
	color: #FFF9EC;
	font-size: 24px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
}
.mkl-countdown .mkl-cd-lbl {
	color: var(--mkl-gold-soft);
	font-size: 11px;
	font-style: normal;
}
.mkl-countdown .mkl-cd-done {
	color: var(--mkl-gold-soft);
	font-size: 22px;
	font-weight: 700;
}

/* فلش‌های اسلایدر — استایل تم افزونه بعد از پوسته لود می‌شود، پس همه با !important:
   قبلی سمت راست (فلش رو به راست)، بعدی سمت چپ (فلش رو به چپ) */
.metaslider .flexslider .flex-direction-nav a,
.metaslider .flexslider:hover .flex-direction-nav a {
	width: 42px !important;
	height: 42px !important;
	margin: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	border-radius: 50% !important;
	border: 1px solid var(--mkl-gold-soft) !important;
	background-color: rgba(23, 80, 76, 0.55) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px 20px !important;
	font-size: 0 !important;
	color: transparent !important;
	text-indent: 0 !important;
	overflow: hidden !important;
	opacity: 1 !important;
	transition: background-color .15s ease !important;
}
.metaslider .flexslider .flex-direction-nav a::before,
.metaslider .flexslider .flex-direction-nav a::after {
	content: none !important;
}
.metaslider .flexslider .flex-direction-nav .flex-prev,
.metaslider .flexslider:hover .flex-direction-nav .flex-prev {
	right: 14px !important;
	left: auto !important;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFF9EC" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/></svg>') !important;
}
.metaslider .flexslider .flex-direction-nav .flex-next,
.metaslider .flexslider:hover .flex-direction-nav .flex-next {
	left: 14px !important;
	right: auto !important;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFF9EC" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg>') !important;
}
.metaslider .flexslider .flex-direction-nav a:hover {
	background-color: var(--mkl-gold) !important;
}

/* ==========================================================================
   عنوان بخش‌ها با نشان گره
   ========================================================================== */
.mkl-sec-title {
	text-align: center;
	color: var(--mkl-teal-dark);
	font-size: clamp(24px, 3.4vw, 32px);
	margin: 56px 0 8px;
}
.mkl-sec-ornament {
	display: block;
	width: 220px;
	height: 24px;
	margin: 0 auto 34px;
	background: url('assets/ornament.svg') no-repeat center / contain;
}

/* ==========================================================================
   کارت محصولات — یکدست، کرم و گرم
   ========================================================================== */
ul.products li.product,
.wc-block-grid__product {
	background: #FFFFFF;
	border: 1px solid var(--mkl-border);
	border-radius: 14px;
	padding: 14px 14px 20px !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(30, 110, 104, 0.16);
	border-color: var(--mkl-gold);
}
ul.products li.product img,
.wc-block-grid__product img {
	border-radius: 10px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	color: var(--mkl-teal-dark);
	font-size: 16px;
	font-weight: 500;
}
ul.products li.product .price,
.wc-block-grid__product-price {
	color: var(--mkl-teal);
	font-weight: 700;
}
ul.products li.product .onsale,
.wc-block-grid__product-onsale {
	background: var(--mkl-zereshki);
	color: #fff;
	border: none;
	border-radius: 30px;
}

/* دکمه‌های ووکامرس */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.wc-block-grid__product .wp-block-button__link,
.wc-block-components-button {
	background-color: var(--mkl-teal) !important;
	color: #FFF9EC !important;
	border-radius: 30px !important;
	font-weight: 500;
	transition: background-color .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-components-button:hover {
	background-color: var(--mkl-gold) !important;
	color: #2B2313 !important;
}

/* دسته‌بندی‌ها در صفحه اصلی */
.wc-block-product-categories-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0 0 10px;
}
.wc-block-product-categories-list li { margin: 0; }
.wc-block-product-categories-list li a {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--mkl-gold);
	color: var(--mkl-teal-dark);
	border-radius: 30px;
	padding: 9px 22px;
	font-size: 15px;
	transition: background-color .15s ease, color .15s ease;
}
.wc-block-product-categories-list li a:hover {
	background: var(--mkl-teal);
	color: #FFF9EC;
	border-color: var(--mkl-teal);
}

/* نوار اینستاگرام */
.mkl-insta {
	background: var(--mkl-cream-2);
	border-block: 1px solid var(--mkl-border);
	text-align: center;
	padding: 34px 20px;
	margin-top: 60px;
	font-size: 17px;
}
.mkl-insta a { color: var(--mkl-teal); font-weight: 700; }

/* ==========================================================================
   فوتر — فیروزه‌ای عمیق
   ========================================================================== */
.site-footer,
.site-footer .ast-builder-grid-row-container,
.site-footer .site-below-footer-wrap {
	background-color: var(--mkl-teal-dark) !important;
	color: #DCEFEA;
}
.site-footer a { color: var(--mkl-gold-soft); }
.site-footer .ast-footer-copyright { color: #BFDCD6; }

/* ---- صفحه محصول ---- */
.woocommerce div.product .product_title { color: var(--mkl-teal-dark); }
.woocommerce div.product p.price { color: var(--mkl-teal); font-weight: 700; font-size: 24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--mkl-gold);
}
.woocommerce div.product div.images img { border-radius: 14px; border: 1px solid var(--mkl-border); }

/* ==========================================================================
   اعلان افزودن به سبد خرید (toast)
   ========================================================================== */
#mkl-cart-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 20px);
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 12px;
	direction: rtl;
	background: var(--mkl-teal-dark);
	color: #FFF9EC;
	border: 1px solid var(--mkl-gold);
	border-radius: 50px;
	padding: 10px 18px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
	max-width: min(92vw, 560px);
	font-size: 15px;
}
#mkl-cart-toast.show {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
#mkl-cart-toast .mkl-toast-check {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mkl-gold);
	color: #2B2313;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
#mkl-cart-toast .mkl-toast-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#mkl-cart-toast .mkl-toast-btn {
	flex-shrink: 0;
	background: var(--mkl-gold);
	color: #2B2313;
	font-weight: 700;
	font-size: 14px;
	padding: 7px 18px;
	border-radius: 30px;
	white-space: nowrap;
}
#mkl-cart-toast .mkl-toast-btn:hover {
	background: var(--mkl-gold-soft);
	color: #2B2313;
}
#mkl-cart-toast .mkl-toast-close {
	flex-shrink: 0;
	background: none;
	border: none;
	color: rgba(255, 249, 236, 0.7);
	font-size: 20px;
	line-height: 1;
	padding: 0 2px;
	cursor: pointer;
}
#mkl-cart-toast .mkl-toast-close:hover { color: #FFF9EC; }

/* تکان‌خوردن آیکون سبد خرید هدر بعد از افزودن */
@keyframes mkl-bounce {
	0%, 100% { transform: translateY(0); }
	25% { transform: translateY(-7px) scale(1.15); }
	50% { transform: translateY(0) scale(1); }
	70% { transform: translateY(-4px) scale(1.08); }
}
.mkl-cart-bounce { animation: mkl-bounce .9s ease; }

/* لینک «مشاهده سبد خرید» داخل پیام‌های ووکامرس هم مثل دکمه دیده شود */
.woocommerce-message a.wc-forward,
.woocommerce-message a.button {
	background: var(--mkl-teal) !important;
	color: #FFF9EC !important;
	border-radius: 30px !important;
	padding: 6px 18px;
}

/* اعلان‌ها */
.woocommerce-message, .woocommerce-info {
	border-top-color: var(--mkl-teal);
	background: var(--mkl-cream-2);
	color: var(--mkl-text);
}