/*
|--------------------------------------------------------------------------
| Bargchi Category Products V1.0
|--------------------------------------------------------------------------
*/

.bargchi-category-products {
	--bcp-navy: #102f5b;
	--bcp-orange: #ed6a20;
	--bcp-text: #283e59;
	--bcp-muted: #7d8b9b;
	--bcp-line: #e2e9f0;
	--bcp-soft: #f7f9fc;

	display: block !important;

	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: 20px 0 28px;

	background: var(--bcp-soft);
	border-top: 1px solid #edf1f5;
}

.bargchi-category-products__inner {
	width: min(100%, 1240px);
	margin: 0 auto;
	padding: 0 20px;
}

.bargchi-category-products__grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 15px;
	align-items: stretch;
}

.bargchi-cat-product {
	display: flex !important;
	flex-direction: column;

	min-width: 0;
	overflow: hidden;

	background: #fff;
	border: 1px solid var(--bcp-line);
	border-radius: 14px;

	box-shadow: 0 3px 13px rgba(16, 47, 91, .035);

	transition:
		transform 160ms ease,
		border-color 160ms ease,
		box-shadow 160ms ease;
}

.bargchi-cat-product:hover {
	transform: none;
	border-color: rgba(237, 106, 32, .32);
	box-shadow: 0 6px 18px rgba(16, 47, 91, .06);
}

.bargchi-cat-product__media {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 205px;
	padding: 16px;

	background: #fff !important;
	border-bottom: 1px solid #f0f3f6;

	text-decoration: none !important;
}

.bargchi-cat-product__image {
	display: block !important;

	width: 100% !important;
	height: 100% !important;
	max-width: 195px !important;
	max-height: 175px !important;

	margin: auto !important;

	object-fit: contain !important;
	object-position: center !important;

	background: #fff !important;
}

.bargchi-cat-product__body {
	display: flex;
	flex: 1;
	flex-direction: column;

	min-height: 152px;
	padding: 12px 12px 11px;
}

.bargchi-cat-product__title {
	display: -webkit-box;
	overflow: hidden;

	min-height: 42px;
	margin: 0 0 7px !important;
	padding: 0 !important;

	color: var(--bcp-text);
	font-size: 12.5px !important;
	font-weight: 750 !important;
	line-height: 1.7 !important;
	text-align: right;

	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.bargchi-cat-product__title a {
	color: inherit !important;
	text-decoration: none !important;
}

.bargchi-cat-product__title a:hover {
	color: var(--bcp-navy) !important;
}

.bargchi-cat-product__price {
	min-height: 30px;
	margin: 0 0 9px;

	color: var(--bcp-navy);
	font-size: 13.5px;
	font-weight: 850;
	line-height: 1.7;
	text-align: right;
}

.bargchi-cat-product__price del {
	margin-left: 5px;

	color: #a5afbb;
	font-size: 10.5px;
	font-weight: 500;
}

.bargchi-cat-product__price ins {
	color: var(--bcp-navy);
	text-decoration: none;
}

.bargchi-cat-product__price-empty {
	color: #98a5b3;
	font-size: 10.5px;
	font-weight: 600;
}

.bargchi-cat-product__action {
	margin-top: auto;
}

body.bargchi-product-category-page
.bargchi-cat-product__cart {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px;

	width: 100% !important;
	min-height: 40px !important;

	margin: 0 !important;
	padding: 5px 6px 5px 11px !important;

	color: #173d6d !important;
	background:
		linear-gradient(
			135deg,
			rgba(237, 106, 32, .09),
			rgba(237, 106, 32, .025)
		) !important;

	border: 1px solid rgba(237, 106, 32, .48) !important;
	border-radius: 11px !important;

	font-size: 11px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;

	box-shadow: none !important;

	transition:
		color 150ms ease,
		background 150ms ease,
		border-color 150ms ease,
		transform 150ms ease !important;
}

body.bargchi-product-category-page
.bargchi-cat-product__cart:hover {
	color: #fff !important;
	background: var(--bcp-orange) !important;
	border-color: var(--bcp-orange) !important;
	transform: translateY(-1px);
}

.bargchi-cat-product__cart-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 29px;

	width: 29px;
	height: 29px;

	color: #fff;
	background: var(--bcp-orange);
	border-radius: 8px;

	transition:
		color 150ms ease,
		background 150ms ease;
}

.bargchi-cat-product__cart-icon svg {
	display: block;

	width: 16px;
	height: 16px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bargchi-cat-product__cart:hover
.bargchi-cat-product__cart-icon {
	color: var(--bcp-orange);
	background: #fff;
}

body.bargchi-product-category-page
.bargchi-cat-product__cart.is-disabled {
	color: #929daa !important;
	background: #f4f6f8 !important;
	border-color: #e0e6eb !important;

	cursor: default !important;
	transform: none !important;
}

.bargchi-cat-product__cart.is-disabled
.bargchi-cat-product__cart-icon {
	color: #8995a1;
	background: #e7ebef;
}

body.bargchi-product-category-page
.bargchi-cat-product__cart.is-select {
	border-color: #cbd7e3 !important;
	background: #f8fbfe !important;
}

body.bargchi-product-category-page
.bargchi-cat-product__cart.is-added {
	color: #fff !important;
	background: #17845d !important;
	border-color: #17845d !important;
}

body.bargchi-product-category-page
.bargchi-cat-product__cart.is-added
.bargchi-cat-product__cart-icon {
	color: #17845d;
	background: #fff;
}

.bargchi-category-products__view {
	display: none;
}

.bargchi-category-products__empty {
	padding: 24px 18px;

	color: var(--bcp-muted);
	background: #fff;
	border: 1px solid var(--bcp-line);
	border-radius: 13px;

	font-size: 11.5px;
	font-weight: 650;
	text-align: center;
}


/* Tablet = 3 columns */
@media (max-width: 1024px) and (min-width: 768px) {

	.bargchi-category-products {
		padding: 18px 0 25px;
	}

	.bargchi-category-products__inner {
		padding: 0 18px;
	}

	.bargchi-category-products__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 13px;
	}

	.bargchi-cat-product__media {
		height: 195px;
	}

	.bargchi-cat-product__image {
		max-width: 185px !important;
		max-height: 165px !important;
	}
}


/* Mobile = selectable 1 / 2 columns */
@media (max-width: 767px) {

	.bargchi-category-products {
		padding: 13px 0 21px;
	}

	.bargchi-category-products__inner {
		padding:
			0
			max(12px, env(safe-area-inset-right))
			0
			max(12px, env(safe-area-inset-left));
	}

	.bargchi-category-products__view {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 6px;

		margin: 0 0 10px;
	}

	.bargchi-category-products__view-btn {
		appearance: none;
		-webkit-appearance: none;

		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 33px;
		height: 33px;

		margin: 0;
		padding: 0;

		color: #708197;
		background: #fff;

		border: 1px solid #dce5ed;
		border-radius: 9px;

		box-shadow: 0 2px 6px rgba(16, 47, 91, .03);

		cursor: pointer;
	}

	.bargchi-category-products__view-btn.is-active {
		color: #fff;
		background: var(--bcp-navy);
		border-color: var(--bcp-navy);
	}

	.bargchi-category-products__view-btn svg {
		display: block;

		width: 17px;
		height: 17px;

		fill: none;
		stroke: currentColor;
		stroke-width: 1.6;
	}

	.bargchi-category-products__grid {
		gap: 9px;
	}

	.bargchi-category-products__grid[data-mobile-view="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bargchi-category-products__grid[data-mobile-view="1"] {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	/* Compact two-column mode */
	.bargchi-category-products__grid[data-mobile-view="2"]
	.bargchi-cat-product {
		border-radius: 11px;
	}

	.bargchi-category-products__grid[data-mobile-view="2"]
	.bargchi-cat-product__media {
		height: 148px;
		padding: 9px;
	}

	.bargchi-category-products__grid[data-mobile-view="2"]
	.bargchi-cat-product__image {
		max-width: 132px !important;
		max-height: 126px !important;
	}

	.bargchi-category-products__grid[data-mobile-view="2"]
	.bargchi-cat-product__body {
		min-height: 137px;
		padding: 8px;
	}

	.bargchi-category-products__grid[data-mobile-view="2"]
	.bargchi-cat-product__title {
		min-height: 36px;
		margin-bottom: 4px !important;

		font-size: 10.4px !important;
		line-height: 1.7 !important;
	}

	.bargchi-category-products__grid[data-mobile-view="2"]
	.bargchi-cat-product__price {
		min-height: 25px;
		margin-bottom: 6px;

		font-size: 11px;
	}

	.bargchi-category-products__grid[data-mobile-view="2"]
	.bargchi-cat-product__price del {
		display: block;
		margin: 0;

		font-size: 8.8px;
	}

	body.bargchi-product-category-page
	.bargchi-category-products__grid[data-mobile-view="2"]
	.bargchi-cat-product__cart {
		min-height: 36px !important;
		padding: 4px 5px 4px 6px !important;

		font-size: 9.5px !important;
		border-radius: 9px !important;
	}

	.bargchi-category-products__grid[data-mobile-view="2"]
	.bargchi-cat-product__cart-icon {
		flex-basis: 26px;
		width: 26px;
		height: 26px;
		border-radius: 7px;
	}

	/* One-column mode = compact horizontal cards */
	.bargchi-category-products__grid[data-mobile-view="1"]
	.bargchi-cat-product {
		display: grid !important;
		grid-template-columns: 38% minmax(0, 1fr);
	}

	.bargchi-category-products__grid[data-mobile-view="1"]
	.bargchi-cat-product__media {
		height: auto;
		min-height: 150px;
		padding: 10px;

		border-bottom: 0;
		border-left: 1px solid #f0f3f6;
	}

	.bargchi-category-products__grid[data-mobile-view="1"]
	.bargchi-cat-product__image {
		max-width: 135px !important;
		max-height: 135px !important;
	}

	.bargchi-category-products__grid[data-mobile-view="1"]
	.bargchi-cat-product__body {
		min-height: 150px;
		padding: 11px 10px;
	}

	.bargchi-category-products__grid[data-mobile-view="1"]
	.bargchi-cat-product__title {
		min-height: auto;
		margin-bottom: 6px !important;

		font-size: 11.7px !important;
	}

	.bargchi-category-products__grid[data-mobile-view="1"]
	.bargchi-cat-product__price {
		margin-bottom: 7px;

		font-size: 12px;
	}

	body.bargchi-product-category-page
	.bargchi-category-products__grid[data-mobile-view="1"]
	.bargchi-cat-product__cart {
		min-height: 38px !important;
		font-size: 10.3px !important;
	}
}

/* ==========================================================================
   Product card UX refinements
   ========================================================================== */

/* Keep the price number navy, but make "تومان" use Bargchi orange. */
.bargchi-cat-product__price .woocommerce-Price-currencySymbol {
	color: var(--bcp-orange) !important;
	font-size: .9em;
	font-weight: 800;
}

/* No positional movement anywhere on the card itself. */
.bargchi-cat-product,
.bargchi-cat-product:hover,
.bargchi-cat-product:focus-within {
	transform: none !important;
}

/* Slightly clearer interaction feedback without moving the card. */
.bargchi-cat-product:focus-within {
	border-color: rgba(237, 106, 32, .42);
	box-shadow: 0 0 0 3px rgba(237, 106, 32, .07);
}

/* Product image remains visually stable and clean. */
.bargchi-cat-product__media,
.bargchi-cat-product__image {
	transform: none !important;
}

/* Improve title readability and click affordance. */
.bargchi-cat-product__title a {
	transition: color 140ms ease;
}

.bargchi-cat-product__title a:hover {
	color: var(--bcp-orange) !important;
}

/* Better keyboard accessibility for image/title/cart links. */
.bargchi-cat-product__media:focus-visible,
.bargchi-cat-product__title a:focus-visible,
.bargchi-cat-product__cart:focus-visible {
	outline: 2px solid rgba(237, 106, 32, .72) !important;
	outline-offset: 2px;
}

/* Make the add-to-cart control feel a little more deliberate. */
body.bargchi-product-category-page
.bargchi-cat-product__cart {
	position: relative;
	overflow: hidden;
}

body.bargchi-product-category-page
.bargchi-cat-product__cart:active {
	transform: none !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
}

/* Keep unavailable/select variants visually calm. */
body.bargchi-product-category-page
.bargchi-cat-product__cart.is-disabled:hover,
body.bargchi-product-category-page
.bargchi-cat-product__cart.is-select:hover {
	transform: none !important;
}

/* A touch more separation between price and action on desktop/tablet. */
@media (min-width: 768px) {
	.bargchi-cat-product__price {
		margin-bottom: 10px;
	}
}

/* ==========================================================================
   Mobile product-view switch — polished segmented control
   ========================================================================== */

@media (max-width: 767px) {

	body.bargchi-product-category-page
	.bargchi-category-products__view {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 4px !important;

		width: auto !important;
		max-width: max-content !important;

		margin: 0 0 11px auto !important;
		padding: 4px !important;

		background: #fff !important;
		border: 1px solid #dfe7ef !important;
		border-radius: 12px !important;

		box-shadow: 0 3px 10px rgba(16, 47, 91, .045) !important;
	}

	body.bargchi-product-category-page
	.bargchi-category-products__view-label {
		display: inline-flex !important;
		align-items: center !important;

		height: 32px !important;
		padding: 0 7px !important;

		color: #7b8998 !important;

		font-size: 10px !important;
		font-weight: 700 !important;
		line-height: 1 !important;

		white-space: nowrap !important;
	}

	body.bargchi-product-category-page
	button.bargchi-category-products__view-btn {
		appearance: none !important;
		-webkit-appearance: none !important;

		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 34px !important;

		width: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;

		height: 32px !important;
		min-height: 32px !important;
		max-height: 32px !important;

		margin: 0 !important;
		padding: 0 !important;

		color: #64768b !important;
		background: #f8fafc !important;

		border: 1px solid transparent !important;
		border-radius: 9px !important;

		box-shadow: none !important;
		outline: none !important;

		cursor: pointer !important;

		transition:
			color 140ms ease,
			background 140ms ease,
			border-color 140ms ease !important;
	}

	body.bargchi-product-category-page
	button.bargchi-category-products__view-btn:hover {
		color: var(--bcp-navy) !important;
		background: #f2f6fa !important;
		border-color: #dce5ee !important;
	}

	body.bargchi-product-category-page
	button.bargchi-category-products__view-btn.is-active {
		color: var(--bcp-orange) !important;

		background: rgba(237, 106, 32, .10) !important;
		border-color: rgba(237, 106, 32, .34) !important;

		box-shadow:
			inset 0 0 0 1px rgba(237, 106, 32, .03) !important;
	}

	body.bargchi-product-category-page
	button.bargchi-category-products__view-btn:focus-visible {
		outline: 2px solid rgba(237, 106, 32, .50) !important;
		outline-offset: 2px !important;
	}

	body.bargchi-product-category-page
	.bargchi-category-products__view-btn svg {
		display: block !important;

		width: 17px !important;
		height: 17px !important;

		fill: none !important;
		stroke: currentColor !important;
		stroke-width: 1.7 !important;
		stroke-linecap: round !important;
		stroke-linejoin: round !important;
	}

	body.bargchi-product-category-page
	.bargchi-category-products__view-btn svg rect,
	body.bargchi-product-category-page
	.bargchi-category-products__view-btn svg path {
		fill: none !important;
		stroke: currentColor !important;
	}
}

/* ==========================================================================
   Instant AJAX cart UX
   ========================================================================== */

/* Never show WooCommerce's injected "View cart" link inside category cards. */
body.bargchi-product-category-page
.bargchi-category-products .added_to_cart.wc-forward,
body.bargchi-product-category-page
.bargchi-category-products a.added_to_cart {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* Keep the button visually stable during the very short AJAX request. */
body.bargchi-product-category-page
.bargchi-cat-product__cart.is-loading {
	opacity: 1 !important;
	transform: none !important;
	cursor: default !important;
}

/* Instant success state. */
body.bargchi-product-category-page
.bargchi-cat-product__cart.is-added {
	color: #fff !important;
	background: #17845d !important;
	border-color: #17845d !important;
}

/* Quiet error state without shifting card dimensions. */
body.bargchi-product-category-page
.bargchi-cat-product__cart.is-error {
	color: #9d332c !important;
	background: #fff4f2 !important;
	border-color: rgba(193, 65, 52, .34) !important;
}