/**
 * Shop Page - Responsive Styles
 * طراحی ریسپانسیو حرفه‌ای و پیشرفته برای صفحه فروشگاه
 * محصولات در موبایل به صورت 2 ستونه با ظاهر عالی
 * 
 * Breakpoints:
 * - Desktop Large: > 1400px
 * - Desktop: 1024px - 1400px
 * - Tablet: 768px - 1024px  
 * - Mobile Large: 481px - 768px
 * - Mobile: 376px - 480px
 * - Mobile Small: < 376px
 * 
 * @package TShop
 * @since 1.0.0
 */

/* ============================================
   Tablet - 768px تا 1024px
   ============================================ */
@media (max-width: 1024px) {
	/* Container */
	.tshop-shop-page {
		padding-top: calc(90px + 1.5rem);
	}
	
	.tshop-shop-page__container {
		padding: 0 1.5rem;
	}
	
	/* Header */
	.tshop-shop-page__header {
		margin-bottom: 3rem;
	}
	
	/* Category Hero */
	.tshop-shop-page__category-hero {
		padding: 2rem;
		border-radius: 20px;
	}
	
	.tshop-shop-page__category-title {
		font-size: clamp(2rem, 4vw, 3rem);
	}
	
	.tshop-shop-page__category-description {
		font-size: 1rem;
	}
	
	/* Toolbar */
	.tshop-shop-page__toolbar {
		padding: 1rem 1.25rem;
		gap: 1.25rem;
	}
	
	/* Products Grid - 3 ستون */
	.tshop-shop-page__products .products,
	.woocommerce .tshop-shop-page__products .products,
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 1.5rem !important;
	}
	
	/* Product Card */
	.tshop-product-card {
		border-radius: 20px !important;
	}
	
	.tshop-product-card__image {
		padding-top: 75% !important;
	}
	
	.tshop-product-card__content {
		padding: 1.25rem !important;
	}
	
	.tshop-product-card__content .woocommerce-loop-product__title,
	.tshop-product-card__content h2 {
		font-size: 1rem !important;
	}
	
	.tshop-product-card__content .price {
		font-size: 1.125rem !important;
	}
	
	.tshop-product-card__overlay-icon {
		width: 50px !important;
		height: 50px !important;
	}
	
	/* Sale Badge */
	.tshop-product-card .onsale,
	.tshop-product-card__image .onsale {
		top: 7px !important;
		right: 7px !important;
		font-size: 0.5625rem !important;
		padding: 0.28rem 0.55rem !important;
	}
}

/* ============================================
   Mobile Large - 640px تا 768px - عیناً مثل صفحه اصلی
   ============================================ */
@media (max-width: 768px) {
	/* Container */
	.tshop-shop-page {
		padding-top: calc(80px + 1rem);
	}
	
	.tshop-shop-page__container {
		padding: 0 1rem;
	}
	
	/* Header */
	.tshop-shop-page__header {
		margin-bottom: 2.5rem;
	}
	
	/* Category Hero */
	.tshop-shop-page__category-hero {
		flex-direction: column;
		text-align: center;
		padding: 1.5rem;
		border-radius: 16px;
		gap: 1.25rem;
	}
	
	.tshop-shop-page__category-content {
		max-width: 100%;
	}
	
	.tshop-shop-page__category-title {
		font-size: clamp(1.75rem, 4vw, 2.25rem);
		margin-bottom: 0.75rem;
	}
	
	.tshop-shop-page__category-description {
		font-size: 0.875rem;
		line-height: 1.6;
	}
	
	/* Toolbar */
	.tshop-shop-page__toolbar {
		flex-direction: column;
		padding: 0.875rem;
		gap: 0.875rem;
		border-radius: 14px;
	}
	
	/* Products Grid - 2 ستون */
	.tshop-shop-page__products .products,
	.woocommerce .tshop-shop-page__products .products,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1.25rem !important;
	}
	
	/* Product Card - دقیقاً مثل عکس */
	.tshop-product-card {
		border-radius: 16px !important;
	}
	
	.tshop-product-card__image {
		padding-top: 100% !important;
		border-radius: 16px 16px 0 0 !important;
	}
	
	.tshop-product-card__content {
		padding: 1.125rem !important;
		gap: 0.625rem !important;
		min-height: 160px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
	}
	
	/* نام محصول - سفید */
	.tshop-product-card__content .woocommerce-loop-product__title,
	.tshop-product-card__content h2 {
		font-size: 0.9375rem !important;
		line-height: 1.3 !important;
		-webkit-line-clamp: 2 !important;
		margin: 0 0 0.5rem 0 !important;
		color: #ffffff !important;
		font-weight: 500 !important;
	}
	
	/* قیمت - چیدمان عمودی */
	.tshop-product-card__content .price {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		margin: 0.125rem 0 0.625rem 0 !important;
	}
	
	/* قیمت قدیم - خاکستری خط خورده */
	.tshop-product-card__content .price del {
		order: 1 !important;
		font-size: 0.6875rem !important;
		color: rgba(255, 255, 255, 0.45) !important;
		margin: 0 0 0.1875rem 0 !important;
	}
	
	/* قیمت جدید - طلایی */
	.tshop-product-card__content .price ins {
		order: 2 !important;
		font-size: 1.0625rem !important;
		color: #ffd700 !important;
		text-decoration: none !important;
	}
	
	/* دکمه */
	.tshop-product-card__content .button,
	.tshop-product-card__actions .button,
	.tshop-product-card__content .add_to_cart_button,
	.tshop-product-card__actions .add_to_cart_button {
		padding: 0.6875rem 1.125rem !important;
		font-size: 0.8125rem !important;
		border-radius: 8px !important;
	}
	
	/* بج تخفیف */
	.tshop-product-card .onsale,
	.tshop-product-card__image .onsale {
		top: 8px !important;
		right: 8px !important;
		font-size: 0.5625rem !important;
		padding: 0.3125rem 0.5625rem !important;
		border-radius: 4.5px !important;
	}
	
	.tshop-product-card__overlay-icon {
		width: 48px !important;
		height: 48px !important;
	}
	
	/* Pagination */
	.woocommerce-pagination {
		margin-top: 2rem;
	}
	
	.woocommerce-pagination ul {
		gap: 0.375rem;
	}
	
	.woocommerce-pagination ul li a,
	.woocommerce-pagination ul li span {
		width: 36px;
		height: 36px;
		font-size: 0.8125rem;
		border-radius: 8px;
	}
}

/* ============================================
   Mobile Medium - 481px تا 640px - دقیقاً مثل عکس
   ============================================ */
@media (max-width: 640px) and (min-width: 481px) {
	/* Container */
	.tshop-shop-page {
		padding-top: calc(80px + 1rem);
	}
	
	.tshop-shop-page__container {
		padding: 0 1rem !important;
	}
	
	/* Header */
	.tshop-shop-page__header {
		margin-bottom: 2rem !important;
	}
	
	/* Toolbar */
	.tshop-shop-page__toolbar {
		padding: 0.75rem;
		gap: 0.625rem;
		border-radius: 12px;
	}
	
	/* Products Grid - 2 ستون */
	.tshop-shop-page__products .products,
	.woocommerce .tshop-shop-page__products .products,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.875rem !important;
	}
	
	/* Product Card */
	.tshop-product-card {
		border-radius: 16px !important;
	}
	
	.tshop-product-card__image {
		padding-top: 100% !important;
		border-radius: 16px 16px 0 0 !important;
	}
	
	.tshop-product-card__content {
		padding: 1.0625rem !important;
		gap: 0.625rem !important;
		min-height: 150px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
	}
	
	/* نام محصول - سفید */
	.tshop-product-card__content .woocommerce-loop-product__title,
	.tshop-product-card__content h2 {
		font-size: 0.875rem !important;
		line-height: 1.3 !important;
		-webkit-line-clamp: 2 !important;
		margin: 0 0 0.5rem 0 !important;
		color: #ffffff !important;
		font-weight: 500 !important;
	}
	
	/* قیمت قدیم - خاکستری خط خورده */
	.tshop-product-card__content .price del {
		display: block !important;
		font-size: 0.6875rem !important;
		color: rgba(255, 255, 255, 0.45) !important;
		margin: 0 0 0.1875rem 0 !important;
		text-decoration: line-through !important;
	}
	
	/* قیمت جدید - طلایی */
	.tshop-product-card__content .price {
		font-size: 1rem !important;
		margin: 0.125rem 0 0.625rem 0 !important;
		display: flex !important;
		flex-direction: column !important;
	}
	
	.tshop-product-card__content .price ins {
		font-size: 1rem !important;
		color: #ffd700 !important;
		text-decoration: none !important;
	}
	
	/* دکمه */
	.tshop-product-card__content .button,
	.tshop-product-card__actions .button,
	.tshop-product-card__content .add_to_cart_button,
	.tshop-product-card__actions .add_to_cart_button {
		padding: 0.6875rem 1rem !important;
		font-size: 0.8125rem !important;
		border-radius: 8px !important;
	}
	
	/* بج تخفیف */
	.tshop-product-card .onsale,
	.tshop-product-card__image .onsale {
		top: 7px !important;
		right: 7px !important;
		font-size: 0.5313rem !important;
		padding: 0.28125rem 0.5rem !important;
		border-radius: 4.5px !important;
	}
	
	.tshop-product-card__overlay-icon {
		width: 46px !important;
		height: 46px !important;
	}
}

/* ============================================
   Mobile Small - 376px تا 480px - عیناً مثل صفحه اصلی
   ============================================ */
@media (max-width: 480px) and (min-width: 376px) {
	/* Container */
	.tshop-shop-page {
		padding-top: calc(75px + 0.75rem);
	}
	
	.tshop-shop-page__container {
		padding: 0 0.9375rem !important;
	}
	
	/* Header */
	.tshop-shop-page__header {
		margin-bottom: 2rem !important;
	}
	
	/* Toolbar */
	.tshop-shop-page__toolbar {
		padding: 0.75rem;
		gap: 0.625rem;
		border-radius: 12px;
	}
	
	/* Products Grid - 2 ستون */
	.tshop-shop-page__products .products,
	.woocommerce .tshop-shop-page__products .products,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.875rem !important;
	}
	
	/* Product Card */
	.tshop-product-card {
		border-radius: 16px !important;
	}
	
	.tshop-product-card__image {
		padding-top: 100% !important;
	}
	
	.tshop-product-card__content {
		padding: 1rem !important;
		gap: 0.625rem !important;
		min-height: 145px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
	}
	
	.tshop-product-card__content .woocommerce-loop-product__title,
	.tshop-product-card__content h2 {
		font-size: 0.875rem !important;
		line-height: 1.3 !important;
		-webkit-line-clamp: 2 !important;
		margin-bottom: 0.5rem !important;
	}
	
	.tshop-product-card__content .price {
		font-size: 1rem !important;
		margin-bottom: 0.625rem !important;
	}
	
	.tshop-product-card__content .button,
	.tshop-product-card__actions .button,
	.tshop-product-card__content .add_to_cart_button,
	.tshop-product-card__actions .add_to_cart_button {
		padding: 0.75rem 1rem !important;
		font-size: 0.8125rem !important;
	}
	
	.tshop-product-card__overlay-icon {
		width: 48px !important;
		height: 48px !important;
	}
	
	/* Sale Badge */
	.tshop-product-card .onsale,
	.tshop-product-card__image .onsale {
		top: 8px !important;
		right: 8px !important;
		font-size: 0.5625rem !important;
		padding: 0.3125rem 0.5rem !important;
	}
}

/* ============================================
   Mobile Extra Small - کمتر از 376px - عیناً مثل صفحه اصلی
   ============================================ */
@media (max-width: 375px) {
	/* Container */
	.tshop-shop-page__container {
		padding: 0 0.875rem !important;
	}
	
	/* Header */
	.tshop-shop-page__header {
		margin-bottom: 1.875rem !important;
	}
	
	/* Toolbar */
	.tshop-shop-page__toolbar {
		padding: 0.625rem;
		gap: 0.5rem;
		border-radius: 10px;
	}
	
	/* Products Grid */
	.tshop-shop-page__products .products,
	.woocommerce .tshop-shop-page__products .products,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.75rem !important;
	}
	
	/* Product Card */
	.tshop-product-card {
		border-radius: 14px !important;
	}
	
	.tshop-product-card__image {
		padding-top: 100% !important;
		border-radius: 14px 14px 0 0 !important;
	}
	
	.tshop-product-card__content {
		padding: 0.9375rem !important;
		gap: 0.5625rem !important;
		min-height: 140px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
	}
	
	.tshop-product-card__content .woocommerce-loop-product__title,
	.tshop-product-card__content h2 {
		font-size: 0.8125rem !important;
		line-height: 1.3 !important;
		-webkit-line-clamp: 2 !important;
		margin-bottom: 0.4rem !important;
	}
	
	.tshop-product-card__content .price {
		font-size: 0.9375rem !important;
		margin-bottom: 0.5rem !important;
	}
	
	.tshop-product-card__content .button,
	.tshop-product-card__actions .button,
	.tshop-product-card__content .add_to_cart_button,
	.tshop-product-card__actions .add_to_cart_button {
		padding: 0.6875rem 0.9375rem !important;
		font-size: 0.75rem !important;
		border-radius: 10px !important;
	}
	
	.tshop-product-card__overlay-icon {
		width: 40px !important;
		height: 40px !important;
	}
	
	.tshop-product-card__overlay-icon svg,
	.tshop-product-card__overlay-icon [data-lucide] {
		width: 18px !important;
		height: 18px !important;
	}
	
	/* Sale Badge */
	.tshop-product-card .onsale,
	.tshop-product-card__image .onsale {
		top: 5px !important;
		right: 5px !important;
		font-size: 0.4063rem !important;
		padding: 0.22rem 0.375rem !important;
		border-radius: 3.5px !important;
	}
}

/* ============================================
   Landscape Mode - موبایل افقی
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
	.tshop-shop-page {
		padding-top: calc(70px + 0.5rem) !important;
	}
	
	.tshop-shop-page__header {
		margin-bottom: 1.25rem !important;
	}
	
	.tshop-shop-page__category-hero {
		padding: 1rem !important;
		flex-direction: row !important;
		text-align: right !important;
	}
	
	.tshop-shop-page__toolbar {
		padding: 0.625rem !important;
	}
	
	.tshop-shop-page__products .products,
	.woocommerce .tshop-shop-page__products .products,
	.woocommerce ul.products {
		gap: 0.75rem !important;
		grid-template-columns: repeat(3, 1fr) !important;
	}
	
	.tshop-product-card {
		border-radius: 14px !important;
	}
	
	.tshop-product-card__image {
		padding-top: 75% !important;
	}
	
	.tshop-product-card__content {
		padding: 0.75rem !important;
	}
	
	.tshop-product-card__content .woocommerce-loop-product__title,
	.tshop-product-card__content h2 {
		font-size: 0.75rem !important;
		-webkit-line-clamp: 2 !important;
	}
	
	.tshop-product-card__overlay-icon {
		width: 40px !important;
		height: 40px !important;
	}
}

/* ============================================
   بهبود افکت‌ها و تعاملات موبایل
   ============================================ */
@media (max-width: 768px) {
	/* Hover Effects - کاهش برای touch */
	.tshop-product-card:hover {
		transform: translateY(-2px) scale(1.005) !important;
	}
	
	/* Active State برای لمس */
	.tshop-product-card:active {
		transform: scale(0.98) !important;
		transition: transform 0.1s ease !important;
	}
	
	.tshop-product-card__content .add_to_cart_button:active,
	.tshop-product-card__content .button:active,
	.tshop-product-card__actions .add_to_cart_button:active,
	.tshop-product-card__actions .button:active {
		transform: translateY(-1px) scale(0.98) !important;
		transition: transform 0.1s ease !important;
	}
	
	/* Loading State */
	.tshop-product-card.loading {
		pointer-events: none !important;
		opacity: 0.6 !important;
	}
	
	/* Disable hover effects on touch devices */
	@media (hover: none) {
		.tshop-product-card:hover {
			transform: none !important;
		}
		
		.tshop-product-card:hover .tshop-product-card__image img {
			transform: none !important;
		}
		
		.tshop-product-card:hover .tshop-product-card__overlay {
			opacity: 0 !important;
		}
	}
}

/* ============================================
   حذف Slider در موبایل
   ============================================ */
@media (max-width: 768px) {
	/* اطمینان از اینکه products به صورت grid هستن نه slider */
	.tshop-shop-page__products .products,
	.woocommerce .tshop-shop-page__products .products,
	.woocommerce ul.products {
		display: grid !important;
		overflow: visible !important;
		scroll-snap-type: none !important;
		-webkit-overflow-scrolling: auto !important;
	}
	
	.tshop-shop-page__products .products li,
	.woocommerce .tshop-shop-page__products .products li,
	.woocommerce ul.products li {
		scroll-snap-align: none !important;
		flex: none !important;
		min-width: auto !important;
		max-width: none !important;
	}
	
	/* حذف scroll indicator اگر وجود داره */
	.tshop-shop-page__scroll-indicator,
	.products-scroll-indicator {
		display: none !important;
	}
}

/* ============================================
   بهبود Typography در موبایل - عیناً مثل صفحه اصلی
   ============================================ */
@media (max-width: 768px) {
	/* عنوان محصول */
	.tshop-product-card__content .woocommerce-loop-product__title,
	.tshop-product-card__content h2 {
		word-break: break-word !important;
		hyphens: auto !important;
		-webkit-hyphens: auto !important;
		-ms-hyphens: auto !important;
		overflow-wrap: break-word !important;
		display: -webkit-box !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
	
	.tshop-product-card__content .woocommerce-loop-product__title a,
	.tshop-product-card__content h2 a {
		display: block !important;
	}
	
	/* قیمت */
	.tshop-product-card__content .price {
		display: block !important;
		direction: rtl !important;
	}
	
	.tshop-product-card__content .price ins {
		display: inline !important;
	}
	
	.tshop-product-card__content .price del {
		display: inline !important;
	}
}

/* ============================================
   بهبود دکمه Add to Cart در موبایل - عیناً مثل صفحه اصلی
   ============================================ */
@media (max-width: 768px) {
	.tshop-product-card__content .add_to_cart_button,
	.tshop-product-card__content .button,
	.tshop-product-card__content a.button,
	.tshop-product-card__actions .add_to_cart_button,
	.tshop-product-card__actions .button,
	.tshop-product-card__actions a.button {
		width: 100% !important;
		display: block !important;
		text-align: center !important;
		transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		position: relative !important;
		overflow: hidden !important;
	}
	
	/* Loading State */
	.tshop-product-card__content .add_to_cart_button.loading,
	.tshop-product-card__actions .add_to_cart_button.loading {
		pointer-events: none !important;
		opacity: 0.6 !important;
		cursor: wait !important;
	}
	
	/* Added State */
	.tshop-product-card__content .add_to_cart_button.added,
	.tshop-product-card__actions .add_to_cart_button.added {
		background: rgba(34, 197, 94, 0.15) !important;
		border-color: rgba(34, 197, 94, 0.4) !important;
		color: rgba(134, 239, 172, 0.95) !important;
	}
}

/* ============================================
   بهبود فیلترها و Toolbar - عیناً مثل صفحه اصلی
   ============================================ */
@media (max-width: 768px) {
	.tshop-shop-page__toolbar {
		position: sticky !important;
		top: calc(75px + 0.75rem) !important;
		z-index: 10 !important;
		background: linear-gradient(135deg, 
			rgba(255, 255, 255, 0.05) 0%, 
			rgba(255, 255, 255, 0.02) 100%) !important;
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
	}
	
	.tshop-shop-page__result-count,
	.woocommerce-result-count {
		color: rgba(255, 255, 255, 0.7) !important;
		font-weight: 400 !important;
	}
	
	.woocommerce-ordering select {
		background: rgba(255, 255, 255, 0.05) !important;
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
		padding: 0.625rem 2.25rem 0.625rem 0.875rem !important;
		border-radius: 12px !important;
		color: rgba(255, 255, 255, 0.9) !important;
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		appearance: none !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.7)' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: left 0.875rem center !important;
		cursor: pointer !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
	}
	
	.woocommerce-ordering select:focus {
		outline: none !important;
		border-color: rgba(255, 215, 0, 0.4) !important;
		background: rgba(255, 255, 255, 0.08) !important;
	}
}

/* ============================================
   Print Styles - برای چاپ
   ============================================ */
@media print {
	.tshop-shop-page__toolbar,
	.woocommerce-pagination,
	.tshop-shop-page__category-link,
	.tshop-product-card .onsale,
	.tshop-product-card__actions,
	.tshop-product-card__overlay {
		display: none !important;
	}
	
	.tshop-shop-page {
		padding-top: 0 !important;
	}
	
	.tshop-shop-page__products .products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1rem !important;
	}
	
	.tshop-product-card {
		break-inside: avoid !important;
		page-break-inside: avoid !important;
		box-shadow: none !important;
		border: 1px solid #ccc !important;
	}
	
	.tshop-product-card::before,
	.tshop-product-card::after {
		display: none !important;
	}
}

/* ============================================
   بهبودهای نهایی برای موبایل
   ============================================ */
@media (max-width: 768px) {
	/* اطمینان از نمایش صحیح Grid */
	.woocommerce ul.products {
		display: grid !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	.woocommerce ul.products li.product {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		list-style: none !important;
	}
	
	/* بهبود Performance */
	.tshop-product-card {
		will-change: transform !important;
	}
	
	.tshop-product-card__image img {
		will-change: transform !important;
	}
	
	/* Smooth Scrolling */
	.tshop-shop-page__products {
		-webkit-overflow-scrolling: touch !important;
	}
	
	/* Fix برای Safari Mobile */
	@supports (-webkit-touch-callout: none) {
		.tshop-product-card {
			-webkit-transform: translateZ(0) !important;
			transform: translateZ(0) !important;
		}
	}
	
	/* Overlay Icon در موبایل */
	.tshop-product-card__overlay {
		backdrop-filter: blur(2px) !important;
		-webkit-backdrop-filter: blur(2px) !important;
	}
}

/* ============================================
   تنظیمات خاص برای دستگاه‌های Retina
   ============================================ */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
       (max-width: 768px) and (min-resolution: 192dpi) {
	.tshop-product-card__image img {
		image-rendering: -webkit-optimize-contrast !important;
		image-rendering: crisp-edges !important;
	}
}