/* Minimal WooCommerce styling to match theme colors */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce .woocommerce-message a.button,
.wc-block-components-button {
	background-color: var(--c-blue);
	color: #fff;
	border-radius: 8px;
	padding: 12px 24px;
	border: 0;
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.6;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover,
.wc-block-components-button:hover {
	background-color: var(--c-blue-dark);
	color: #fff;
}
.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button:disabled[disabled] {
	background-color: var(--c-blue);
	opacity: .55;
	color: #fff;
	padding: 12px 24px;
}

/* quantity box */
.woocommerce .quantity .qty {
	border: 1px solid var(--c-border);
	border-radius: 8px;
	padding: 10px 6px;
	font-family: var(--font);
	background: #fff;
}

/* breadcrumb */
.woocommerce .woocommerce-breadcrumb {
	color: var(--c-text-light);
	font-size: 13px;
	margin-bottom: 20px;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--c-blue); }

/* single product titles & meta */
.woocommerce div.product .product_title {
	color: var(--c-blue-dark);
	font-size: 26px;
}
.woocommerce div.product .product_meta { font-size: 13px; color: var(--c-text-light); }
.woocommerce div.product .product_meta a { color: var(--c-blue); }

.woocommerce span.onsale{
	background: var(--c-blue);
	border-radius: 20px;
}
.woocommerce ul.products li.product .price{ color: var(--c-blue); font-weight:700; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color: var(--c-blue); }

.woocommerce table.shop_table{ border-color: var(--c-border); }
.woocommerce-message, .woocommerce-info{
	border-top-color: var(--c-blue);
}
.woocommerce-message::before, .woocommerce-info::before{ color: var(--c-blue); }

.woocommerce nav.woocommerce-pagination ul{ border-color: var(--c-border); }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{ border-color: var(--c-border); }
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current{
	background: var(--c-blue);
	color: #fff;
}

.woocommerce-checkout #payment div.payment_box,
.select2-container .select2-selection--single{
	border-radius: 8px;
}

/* form fields across checkout, account and reviews */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce #review_form input[type=text],
.woocommerce #review_form input[type=email],
.woocommerce #review_form textarea,
.woocommerce .coupon input.input-text{
	border: 1px solid var(--c-border);
	border-radius: 8px;
	padding: 11px 14px;
	font-family: var(--font);
	font-size: 13.5px;
	color: var(--c-text);
	background: #fff;
	box-shadow: none;
	line-height: 1.6;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce #review_form textarea:focus{
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px rgba(14,90,167,.10);
	outline: none;
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label{
	font-size: 13px;
	color: var(--c-text);
	margin-bottom: 6px;
}
.woocommerce form .form-row .required{ color: #c0392b; }

/* select2 (country / state pickers) */
.select2-container--default .select2-selection--single{
	height: auto;
	border: 1px solid var(--c-border);
	border-radius: 8px;
	padding: 6px 6px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	font-family: var(--font);
	font-size: 13.5px;
	color: var(--c-text);
	line-height: 1.9;
}
.select2-dropdown{
	border-color: var(--c-border);
	font-family: var(--font);
	font-size: 13.5px;
}

/* checkout / account panels */
.woocommerce-checkout h3,
.woocommerce-account h2,
.woocommerce-order-details h2,
.woocommerce-customer-details h2{
	color: var(--c-blue-dark);
	font-size: 17px;
}
.woocommerce-checkout #payment{
	background: var(--c-blue-lighter);
	border-radius: var(--radius);
}
.woocommerce-checkout #payment ul.payment_methods{
	border-bottom-color: var(--c-border);
}
.woocommerce table.shop_table{
	border-radius: var(--radius);
	border-color: var(--c-border);
}
.woocommerce table.shop_table th{
	color: var(--c-blue-dark);
	font-size: 13.5px;
}
.woocommerce-info,
.woocommerce-message{
	border-radius: 8px;
	background: var(--c-blue-lighter);
	font-size: 13.5px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom-color: var(--c-blue); }

/* =========================================================================
 * سبد خرید و تسویه‌حساب — موبایل‌اول
 *
 * این دو صفحه پیش از این هیچ قاعده موبایلی نداشتند و با استایل پیش‌فرض
 * ووکامرس رندر می‌شدند: جدول چهارستونه روی صفحه ۳۹۰ پیکسلی.
 * ووکامرس روی هر سلول data-title می‌گذارد، پس می‌توان جدول را روی
 * موبایل به کارت تبدیل کرد بدون دست زدن به قالب‌های هسته.
 * ====================================================================== */

/* ---------- پایه = موبایل ---------- */

.woocommerce-cart-form{ margin-bottom: var(--sp-5); }

.woocommerce table.shop_table.cart{
	display: block;
	border: 0;
	background: transparent;
}
.woocommerce table.shop_table.cart thead{ display: none; }
.woocommerce table.shop_table.cart tbody{ display: block; }

/* هر قلم یک کارت */
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item{
	position: relative;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	grid-template-areas:
		"thumb name"
		"thumb price"
		"qty   subtotal";
	column-gap: var(--sp-3);
	row-gap: var(--sp-1);
	align-items: center;
	padding: var(--sp-3);
	margin-bottom: var(--sp-3);
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td{
	display: block;
	border: 0;
	padding: 0;
	font-size: var(--fs-sm);
}

.woocommerce table.shop_table.cart td.product-thumbnail{
	grid-area: thumb;
	align-self: start;
}
.woocommerce table.shop_table.cart td.product-thumbnail img{
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--c-border);
}
.woocommerce table.shop_table.cart td.product-name{
	grid-area: name;
	align-self: end;
	/* جا برای دکمه حذف در گوشه */
	padding-left: 30px;
}
.woocommerce table.shop_table.cart td.product-name a{
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--c-blue-dark);
	line-height: var(--lh-tight);
}
.woocommerce table.shop_table.cart td.product-price{
	grid-area: price;
	align-self: start;
	color: var(--c-text-light);
}
.woocommerce table.shop_table.cart td.product-quantity{ grid-area: qty; }
.woocommerce table.shop_table.cart td.product-subtotal{
	grid-area: subtotal;
	text-align: left;
	font-weight: 700;
	color: var(--c-blue);
	font-size: var(--fs-base);
}

/* برچسب ستون کنار مقدار، از data-title خود ووکامرس */
.woocommerce table.shop_table.cart td.product-price::before,
.woocommerce table.shop_table.cart td.product-subtotal::before{
	content: attr(data-title) ": ";
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--c-text-light);
}

/* دکمه حذف: گوشه کارت، ناحیه لمسی کامل */
.woocommerce table.shop_table.cart td.product-remove{
	position: absolute;
	top: var(--sp-2);
	left: var(--sp-2);
	margin: 0;
}
.woocommerce table.shop_table.cart td.product-remove a.remove{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 1;
	border-radius: 50%;
	color: #b4483a;
	background: #fdf3f1;
}
.woocommerce table.shop_table.cart td.product-remove a.remove:hover{
	background: #b4483a;
	color: #fff;
}

/* تعداد */
.woocommerce table.shop_table.cart td.product-quantity .quantity{ display: inline-flex; }
.woocommerce table.shop_table.cart td.product-quantity .qty{
	width: 68px;
	height: 40px;
	text-align: center;
	padding: 0;
}

/* ردیف کوپن و به‌روزرسانی */
.woocommerce table.shop_table.cart tr:not(.woocommerce-cart-form__cart-item) td.actions{
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: 0;
	border: 0;
}
.woocommerce table.shop_table.cart td.actions .coupon{
	display: flex;
	gap: var(--sp-2);
	width: 100%;
	float: none;
}
.woocommerce table.shop_table.cart td.actions .coupon label{ display: none; }
.woocommerce table.shop_table.cart td.actions .coupon input.input-text{
	flex: 1 1 auto;
	min-width: 0;
	height: var(--tap);
}
.woocommerce table.shop_table.cart td.actions .coupon .button,
.woocommerce table.shop_table.cart td.actions > .button{
	min-height: var(--tap);
	flex: 0 0 auto;
}
.woocommerce table.shop_table.cart td.actions > .button{ width: 100%; }

/* ---------- جمع سبد ---------- */
.cart-collaterals{ width: 100%; }
.cart-collaterals .cart_totals{ width: 100%; float: none; }
.cart-collaterals .cart_totals > h2{
	font-size: var(--fs-lg);
	color: var(--c-blue-dark);
	margin: 0 0 var(--sp-3);
}
.woocommerce .cart_totals table.shop_table{
	width: 100%;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: var(--sp-4);
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
	padding: var(--sp-3) var(--sp-4);
	border: 0;
	border-bottom: 1px solid var(--c-border);
	font-size: var(--fs-sm);
	vertical-align: middle;
}
.woocommerce .cart_totals table.shop_table tr:last-child th,
.woocommerce .cart_totals table.shop_table tr:last-child td{ border-bottom: 0; }
.woocommerce .cart_totals table.shop_table th{
	color: var(--c-text-light);
	font-weight: 400;
	width: 42%;
}
.woocommerce .cart_totals table.shop_table td{ text-align: left; }
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td{
	background: var(--c-blue-lighter);
	font-size: var(--fs-md);
	font-weight: 800;
	color: var(--c-blue-dark);
}

.wc-proceed-to-checkout{ padding: 0; }
.wc-proceed-to-checkout a.checkout-button{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	margin: 0;
	font-size: var(--fs-md);
	font-weight: 700;
	border-radius: var(--radius);
}

/* ---------- تسویه‌حساب ---------- */
.woocommerce-checkout .col2-set{ display: block; width: 100%; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{
	width: 100%;
	float: none;
	margin-bottom: var(--sp-5);
}
.woocommerce-checkout h3{
	font-size: var(--fs-lg);
	color: var(--c-blue-dark);
}
.woocommerce-checkout .form-row{ margin-bottom: var(--sp-3); padding: 0; }

/* جدول مرور سفارش هم روی موبایل کارتی می‌شود.
 * ظاهر کارت روی عنصر دربرگیرنده است، نه خود جدول: گذاشتن
 * overflow/border-radius روی <table> باعث می‌شد ستون‌ها به‌جای پر کردن
 * عرض، به اندازه محتوا جمع شوند و ۵۳ پیکسل فضای مرده کنار جدول بماند. */
.woocommerce-checkout .woocommerce-checkout-review-order{
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table{
	display: table;
	width: 100%;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th{
	background: var(--c-blue-lighter);
	color: var(--c-blue-dark);
	font-size: var(--fs-xs);
	padding: var(--sp-3);
	border: 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table th{
	padding: var(--sp-3);
	font-size: var(--fs-sm);
	border: 0;
	border-top: 1px solid var(--c-border);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td{
	background: var(--c-blue-lighter);
	font-size: var(--fs-md);
	font-weight: 800;
	color: var(--c-blue-dark);
}
.woocommerce-checkout #payment{ border-radius: var(--radius-md); }
.woocommerce-checkout #payment ul.payment_methods li{ padding: var(--sp-2) 0; }
.woocommerce-checkout #payment ul.payment_methods label{
	font-size: var(--fs-sm);
	min-height: 26px;
	display: inline-flex;
	align-items: center;
}
.woocommerce-checkout #payment #place_order{
	width: 100%;
	min-height: 52px;
	font-size: var(--fs-md);
	font-weight: 700;
	border-radius: var(--radius);
}

/* ---------- از اینجا به بالا: صفحه‌های بزرگ‌تر ---------- */

/* ----------------------------------------------------------------------
 * خنثی‌سازی woocommerce-smallscreen روی سبد خرید
 *
 * ووکامرس فایل smallscreen را با media="max-width:768px" بار می‌کند و
 * چون جدول سبد کلاس shop_table_responsive دارد، دو قاعده‌اش با کارت‌های
 * بالا تداخل می‌کند:
 *   ۱) text-align:left!important روی همه سلول‌ها — در RTL نام محصول
 *      فارسی را به چپ می‌چسباند.
 *   ۲) td::before با content:attr(data-title) روی همه سلول‌ها — به نام
 *      محصول و تعداد هم برچسب «محصول:» و «تعداد:» اضافه می‌کند.
 * فقط همین دو مورد را برمی‌گردانیم؛ بقیه فایل برای صفحه محصول و تسویه
 * لازم است.
 * ------------------------------------------------------------------- */
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-name,
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price,
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity{
	text-align: right !important;
}
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal{
	text-align: left !important;
}
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-name::before,
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-quantity::before,
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-thumbnail::before{
	content: none;
}
/* برچسب‌های خودمان نباید float بگیرند (smallscreen float:right می‌دهد) */
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-price::before,
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal::before{
	float: none;
}

/* جدول جمع‌کل هم shop_table_responsive است: ووکامرس th را مخفی و
 * ردیف‌ها را block می‌کند و برچسب را از data-title می‌سازد. طراحی
 * دوستونی بالا با آن اجرا نمی‌شد. اینجا صریح برش می‌گردانیم. */
.woocommerce .cart_totals table.shop_table tbody tr{ display: table-row; }
.woocommerce .cart_totals table.shop_table tbody th{
	display: table-cell;
	text-align: right;
}
.woocommerce .cart_totals table.shop_table tbody td{
	display: table-cell;
	text-align: left !important;
}
.woocommerce .cart_totals table.shop_table tbody td::before{ content: none; }
@media (min-width: 700px){

	/* جدول سبد دوباره جدول واقعی می‌شود */
	.woocommerce table.shop_table.cart{ display: table; width: 100%; }
	.woocommerce table.shop_table.cart thead{ display: table-header-group; }
	.woocommerce table.shop_table.cart tbody{ display: table-row-group; }
	.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item{
		display: table-row;
		position: static;
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
	.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td{
		display: table-cell;
		padding: var(--sp-3);
		border-top: 1px solid var(--c-border);
		vertical-align: middle;
	}
	.woocommerce table.shop_table.cart td.product-name{ padding-left: var(--sp-3); }
	.woocommerce table.shop_table.cart td.product-remove{ position: static; }
	.woocommerce table.shop_table.cart td.product-price::before,
	.woocommerce table.shop_table.cart td.product-subtotal::before{ content: none; }
	.woocommerce table.shop_table.cart td.product-subtotal{ text-align: right; }
	.woocommerce table.shop_table.cart td.product-thumbnail img{ width: 64px; height: 64px; }

	.woocommerce table.shop_table.cart td.actions{ flex-direction: row; align-items: center; justify-content: space-between; }
	.woocommerce table.shop_table.cart td.actions .coupon{ width: auto; }
	.woocommerce table.shop_table.cart td.actions > .button{ width: auto; }

	.cart-collaterals .cart_totals{ width: 48%; float: left; }
}

@media (min-width: 900px){
	/* تسویه‌حساب دوستونه */
	.woocommerce-checkout .col2-set{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2{ margin-bottom: 0; }
	.cart-collaterals .cart_totals{ width: 42%; }
}