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

   New Arrival, Trending, 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/Trending/Customer Review — সাধারণ সেকশন-পেজগুলোতে
 *          shared grid ব্যবহার হয়; New Arrival-এর নিজস্ব clean skin নিচে scoped.
 * 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;
}

.shahaz-section-page-grid > .shahaz-p-card{
	width: 100%;
	min-width: 0;
	max-width: 100%;
	align-self: start;
}

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

/* ZIP-274 QA: neutralize UA blue tap/focus rectangles on product-page cards
 * while keeping the site's own product-card interactions unchanged. */
.shahaz-section-page .shahaz-p-card a:focus,.shahaz-section-page .shahaz-p-card button:focus,.shahaz-section-page .shahaz-p-card [role="button"]:focus{
	-webkit-tap-highlight-color: transparent;
	outline: none !important;
}




/*************************************************************
 * COMPONENT NAME: FireBadge & TrendingBadge
 * Purpose: 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: none; }
	50%      { filter: none; }
}

.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: none;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.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/হোমপেজ গ্রিড/অন্য সব সেকশন-পেজেও
 *          ব্যবহৃত হয়) নিজে কোনোভাবে বদলানো হয়নি। এই রুলটা
 *          `.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: none;
	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: none;
}

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



/* ZIP-663 — New Arrival final edge-to-edge alignment + commerce controls.
 * The fixed global header already contributes its measured flow spacer.
 * New Arrival itself must add NO vertical gap before the managed banner.
 * The managed logo is flush-right without escaping the viewport.
 */
body.page-template-page-new-arrival .site-content,body.page-template-page-new-arrival .content-area,body.page-template-page-new-arrival .site-main,.shahaz-section-page--new-arrival{
	margin-top:0 !important;
	padding-top:0 !important;
}

/* The base SectionPageContainer has a 20px mobile / 32px tablet-desktop
 * top padding. That padding is the visible gap seen between the fixed header
 * and New Arrival's banner, so it is explicitly removed only on this page. */
.shahaz-section-page--new-arrival{
	padding-top:0 !important;
}

.shahaz-section-page--new-arrival .shahaz-section-page-managed-hero + .shahaz-section-logo{
	margin-left:auto !important;
	margin-right:0 !important;
	left:auto !important;
	right:0 !important;
}

/* New Arrival product cards are rendered exclusively by the canonical card renderer.
 * Card geometry, controls and responsive spacing are owned by
 * assets/css/shahaz-canonical-card.css. */