/* ==========================================================================
   SHAHAZ.COM — Product Section Pages CSS
   ফাইল: assets/css/section-pages.css

   New Arrival, Top Sale, Trending, Recommended, Recent View,
   Customer Review — এই ৬টা পেজের CSS।
   ========================================================================== */




/*************************************************************
 * COMPONENT NAME: SectionPageContainer
 * Purpose: সব ৬টা পেজের কমন কন্টেইনার — ব্যবহারকারীর নির্দেশ
 *          অনুযায়ী Light Pink Luxury ব্যাকগ্রাউন্ড।
 * CSS Dependency: shahaz-tokens.css
 * WooCommerce Dependency: None
 * Future AI Modification Notes: নতুন সেকশন-পেজ টেমপ্লেট তৈরি করলে
 *          এই একই ক্লাস ব্যবহার করুন, নতুন CSS লেখার দরকার নেই।
 *************************************************************/
.shahaz-section-page {
	background: var(--shahaz-softpink);
	min-height: 60vh;
	padding: 20px 12px 40px;
}

@media (min-width: 768px) {
	.shahaz-section-page {
		padding: 32px 24px 60px;
	}
}

.shahaz-section-page-header {
	text-align: center;
	max-width: 1280px;
	margin: 0 auto 18px;
}

.shahaz-section-page-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(22px, 5vw, 34px);
	font-weight: 800;
	color: var(--shahaz-ink);
	margin: 4px 0 0;
	/* ⚠️ বাগ-ফিক্স (Step 10, ২০২৬-০৮-১৮): দীর্ঘ ক্যাটাগরি-নামে যেন
	   কখনো Horizontal Overflow না হয় — আগে rootকজ ছিল
	   shop-enhancement.css-এর .shahaz-shop-header-row .shahaz-
	   section-page-title{white-space:nowrap} (এখন সম্পূর্ণ মুছে
	   ফেলা হয়েছে, দেখুন archive-product.php-এর কমেন্ট), কিন্তু
	   এখানেও defense-in-depth হিসেবে explicit wrap/overflow-safety
	   যোগ করা হলো, যাতে ভবিষ্যতে কোনো CSS এই বেসিক আচরণ আবার ভুলবশত
	   override না করে দেয়। */
	overflow-wrap: break-word;
	word-break: break-word;
	max-width: 100%;
}

.shahaz-section-page-empty {
	text-align: center;
	color: var(--shahaz-gray);
	font-size: 13px;
	padding: 40px 0;
	grid-column: 1 / -1;
}




/*************************************************************
 * COMPONENT NAME: SectionPageGrid — মোবাইলে ৩ কলাম, ডেস্কটপে ৬ কলাম
 * Purpose: New Arrival/Top Sale/Trending/Recommended/Recent View —
 *          এই ৫টা পেজেই এই একই গ্রিড ব্যবহার হয়।
 * CSS Dependency: assets/css/signature-product-card.css (কার্ড
 *          নিজেই এখান থেকে স্টাইল পায়, শুধু গ্রিড-কলাম এখানে)
 * WooCommerce Dependency: None
 * Future AI Modification Notes: কলাম সংখ্যা বদলাতে শুধু
 *          repeat()-এর সংখ্যা বদলান।
 *************************************************************/
.shahaz-section-page-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	max-width: 1280px;
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.shahaz-section-page-grid {
		grid-template-columns: repeat(6, 1fr);
		gap: 14px;
	}
}




/*************************************************************
 * COMPONENT NAME: FireBadge & TrendingBadge
 * Purpose: Top Sale পেজের Fire ব্যাজে ডাইনামিক গ্লো/পালস, Trending
 *          পেজের ব্যাজে প্রিমিয়াম ইন্ডিকেটর স্টাইল।
 * CSS Dependency: signature-product-card.css-এর .shahaz-p-badge
 * WooCommerce Dependency: None
 * Future AI Modification Notes: বেস .shahaz-p-badge থেকে ইতিমধ্যে
 *          একটা পালস অ্যানিমেশন উত্তরাধিকারসূত্রে পাওয়া যায় — এখানে
 *          শুধু অতিরিক্ত তীব্র গ্লো/রং-ভেদ যোগ করা হয়েছে।
 *************************************************************/
.shahaz-p-badge-fire {
	animation: shahaz-p-badge-pulse 2.4s ease-in-out infinite, shahaz-fire-glow 1.6s ease-in-out infinite;
}

@keyframes shahaz-fire-glow {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(255,20,147,0)); }
	50%      { filter: drop-shadow(0 0 6px rgba(255,20,147,0.7)); }
}

.shahaz-p-badge-trending {
	background: linear-gradient(135deg, var(--shahaz-gold-deep) 0%, var(--shahaz-gold) 100%);
	border-color: var(--shahaz-white);
}




/*************************************************************
 * COMPONENT NAME: FloatingReviewSearchBar
 * Purpose: হেডার সার্চ বারের মতো স্লিম, কোনো ব্যাকগ্রাউন্ড কন্টেইনার
 *          ছাড়া ভাসমান (Floating) — শুধু রিভিউ সার্চের জন্য।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: এই বারের নিচে একটা ছায়া/বর্ডার-লাইন
 *          ছাড়া আর কোনো ব্যাকগ্রাউন্ড বক্স যোগ করবেন না — ব্যবহারকারীর
 *          নির্দেশ স্পষ্টভাবে "No Background Container" চেয়েছে।
 *************************************************************/
.shahaz-review-search-wrap {
	position: relative;
	max-width: 520px;
	margin: 0 auto 22px;
	display: flex;
	align-items: center;
}

.shahaz-review-search-icon {
	position: absolute;
	left: 14px;
	width: 16px;
	height: 16px;
	color: var(--shahaz-magenta);
	pointer-events: none;
}

.shahaz-review-search-input {
	width: 100%;
	border: none;
	border-bottom: 1.5px solid var(--shahaz-gold);
	background: transparent;
	padding: 10px 12px 10px 38px;
	font-size: 13px;
	color: var(--shahaz-ink);
	outline: none;
	transition: border-color 0.25s ease;
}

.shahaz-review-search-input::placeholder {
	color: var(--shahaz-gray);
}

.shahaz-review-search-input:focus {
	border-bottom-color: var(--shahaz-magenta);
}




/*************************************************************
 * COMPONENT NAME: ReviewGrid & ReviewCard
 * Purpose: মোবাইলে ২ কলাম, ডেস্কটপে বড় সাইজ (৩-৪ কলাম) — প্রতিটা
 *          কার্ডে প্রোডাক্ট ছবি + নাম + গোল্ড স্টার + রিভিউ টেক্সট।
 * CSS Dependency: shahaz-tokens.css
 * WooCommerce Dependency: None
 * Future AI Modification Notes: রিভিউ কার্ডে নতুন তথ্য (যেমন
 *          "Verified Purchase" ব্যাজ) যোগ করতে
 *          template-parts/section-page/review-card.php এডিট করুন।
 *************************************************************/
.shahaz-review-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	max-width: 1280px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.shahaz-review-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

@media (min-width: 1200px) {
	.shahaz-review-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.shahaz-review-card {
	background: var(--shahaz-white);
	border: 0.5px solid var(--shahaz-border-pearl);
	border-radius: var(--shahaz-radius-md);
	overflow: hidden;
	box-shadow: var(--shahaz-shadow-soft);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shahaz-review-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shahaz-shadow-card);
}

.shahaz-review-product {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.shahaz-review-product img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.shahaz-review-body {
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.shahaz-review-product-name {
	font-size: 11px;
	font-weight: 700;
	color: var(--shahaz-magenta);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shahaz-review-stars {
	display: flex;
	gap: 2px;
	color: var(--shahaz-star);
}

.shahaz-review-text {
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--shahaz-ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.shahaz-review-author {
	font-size: 10px;
	font-weight: 700;
	color: var(--shahaz-gray);
}

@media (min-width: 768px) {
	.shahaz-review-body {
		padding: 14px;
	}
	.shahaz-review-product-name {
		font-size: 13px;
	}
	.shahaz-review-text {
		font-size: 13px;
	}
}




/*************************************************************
 * COMPONENT NAME: Shop Page — Card Border Emphasis (২০২৬-০৮-১৮)
 * Purpose: ব্যবহারকারীর নির্দেশ: "প্রায় 0.5px Hot Magenta border"
 *          — ডিফল্ট (hover ছাড়াই) অবস্থায়ই কার্ডের বর্ডার একটু
 *          ম্যাজেন্টা-টিন্টেড থাকবে, শুধু hover-এ না।
 * ⚠️ Isolation: .shahaz-p-card (সাইট-জোড়া শেয়ার্ড কার্ড কম্পোনেন্ট
 *          — Flash Sale/Hot Sale/হোমপেজ গ্রিড/অন্য সব সেকশন-পেজেও
 *          ব্যবহৃত হয়) নিজে কোনোভাবে বদলানো হয়নি। এই রুলটা
 *          `.shahaz-shop-page .shahaz-p-card`-এ scoped — শুধু Shop
 *          পেজের কনটেক্সটেই প্রযোজ্য, তাই Flash Sale-সহ অন্য কোনো
 *          পেজের কার্ডের ডিফল্ট বর্ডার/ডিজাইন প্রভাবিত হয় না।
 *************************************************************/
.shahaz-shop-page .shahaz-p-card {
	border-color: rgba(194,24,91,0.35);
}


/*************************************************************
 * COMPONENT NAME: ShopGrid — WooCommerce Shop/Category Archive
 * Purpose: মোবাইলে ২ কলাম, ট্যাবলেটে ৪ কলাম, ডেস্কটপে ৬ কলাম —
 *          কার্ড নিজেই ৭৫/২৫ ইমেজ/ইনফো অনুপাত মেনে চলে
 *          (signature-product-card.css), এখানে শুধু গ্রিড-কলাম
 *          সংজ্ঞায়িত।
 * CSS Dependency: assets/css/signature-product-card.css
 * WooCommerce Dependency: woocommerce/archive-product.php
 * ⚠️ বাগ-ফিক্স (২০২৬-০৮-১৮, "Luxury Shop Page" নির্দেশ): আগে এখানে
 *          কোনো ট্যাবলেট ব্রেকপয়েন্ট ছিল না — সরাসরি Mobile(২)
 *          থেকে ১০২৪px-এ Desktop(৬)-এ লাফ দিত, ট্যাবলেট প্রস্থে
 *          (৬৮০-১০২৩px) ২ কলাম দেখাত (অনেক বেশি ফাঁকা জায়গা)। এখন
 *          ৭৬৮px-এ একটা ৪-কলাম ট্যাবলেট ব্রেকপয়েন্ট যোগ করা হলো।
 * Future AI Modification Notes: কলাম সংখ্যা বদলাতে শুধু repeat()-এর
 *          সংখ্যা বদলান।
 *************************************************************/
.shahaz-shop-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	align-items: start;
	max-width: 1280px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.shahaz-shop-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}
}

@media (min-width: 1024px) {
	.shahaz-shop-grid {
		grid-template-columns: repeat(6, 1fr);
		gap: 14px;
	}
}

.shahaz-shop-pagination {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

/* ⚠️ নতুন (২০২৬-০৮-১৮, "Luxury Shop Page" নির্দেশ): Premium 3D
   পেজিনেশন বাটন — Hot Magenta/Gold, subtle depth/shadow, hover/touch
   feedback। .shahaz-shop-pagination শুধু Shop পেজেই ব্যবহৃত হয়
   (archive-product.php), তাই এই স্টাইল অন্য কোনো পেজকে প্রভাবিত করে না। */
.shahaz-shop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	margin: 0 3px;
	padding: 0 10px;
	border-radius: 10px;
	background: linear-gradient(180deg, var(--shahaz-white), #FCEEF3);
	border: 1.5px solid rgba(194,24,91,0.25);
	color: var(--shahaz-magenta-deep, #6B0F55);
	font-size: 12.5px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 3px 0 rgba(194,24,91,0.15), 0 5px 10px rgba(194,24,91,0.12);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
	-webkit-tap-highlight-color: transparent;
}

.shahaz-shop-pagination .page-numbers:hover,
.shahaz-shop-pagination .page-numbers:active {
	border-color: var(--shahaz-gold, #D4AF37);
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(194,24,91,0.15), 0 3px 6px rgba(194,24,91,0.12);
}

.shahaz-shop-pagination .page-numbers.current {
	background: var(--shahaz-magenta);
	border-color: var(--shahaz-gold);
	color: var(--shahaz-white);
}

/* ZIP 180 — product-specific seller question surface. Only appears when
 * /chat/ is opened with a valid product_id from the Global Single Product. */
.shahaz-product-question{margin:0 0 16px;padding:16px;background:#fff;border:1px solid #f0d7e5;border-radius:14px;box-shadow:0 8px 22px rgba(92,0,56,.06)}
.shahaz-product-question__eyebrow{font-size:11px;font-weight:900;letter-spacing:.08em;color:#a06d82;margin-bottom:4px}
.shahaz-product-question h2{margin:0 0 10px;font-size:20px;line-height:1.2;color:#211923}
.shahaz-product-question__product{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:8px;background:#fff7fb;border-radius:10px}
.shahaz-product-question__product img{width:58px;height:58px;object-fit:cover;border-radius:8px;display:block}
.shahaz-product-question__product div{min-width:0;display:grid;gap:3px}
.shahaz-product-question__product strong{font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.shahaz-product-question__product span{font-size:12px;color:#777}
.shahaz-product-question__notice{margin:0 0 10px;padding:9px 11px;border-radius:9px;font-weight:700;font-size:13px}
.shahaz-product-question__notice.success{background:#e9fff5;color:#087a57}
.shahaz-product-question__notice.error{background:#fff0f3;color:#b00038}
.shahaz-product-question__form{display:grid;gap:8px}
.shahaz-product-question__form input,.shahaz-product-question__form textarea{width:100%;box-sizing:border-box;border:1px solid #e7cad9;background:#fff;padding:10px 11px;border-radius:9px;outline:none}
.shahaz-product-question__form textarea{resize:vertical;min-height:76px}
.shahaz-product-question__form button{border:0;background:#ed007b;color:#fff;font-weight:900;padding:11px 14px;border-radius:9px;cursor:pointer}
@media(max-width:600px){.shahaz-product-question{padding:13px;border-radius:12px}.shahaz-product-question h2{font-size:18px}.shahaz-product-question__product img{width:52px;height:52px}}