/* ==========================================================================
   SHAHAZ.COM — Component-01: Hero Banner System (Part-01: UI Design)
   ফাইল: assets/css/hero-banner.css

   এই কম্পোনেন্টের নিজস্ব Design Token আছে (স্পেসিফিকেশনে প্রদত্ত
   এক্সাক্ট হেক্স ভ্যালু) — সাইট-ওয়াইড shahaz-tokens.css-এর
   --shahaz-magenta (#C2185B) থেকে এই স্পেকের Magenta (#C71585)
   সামান্য আলাদা, তাই গ্লোবাল টোকেন না বদলে এখানে লোকালি স্কোপ করা
   হয়েছে (অন্য কোনো কম্পোনেন্ট/ফিচার এতে প্রভাবিত হবে না)।
   ========================================================================== */




:root {
	--shahaz-hero-gold: #D4AF37;
	--shahaz-hero-magenta: #C71585;
	--shahaz-hero-pearl: #ECECEC;
	--shahaz-hero-dot-inactive: #D9D9D9;
	--shahaz-hero-white: #FFFFFF;

	/* ⚠️ Premium OLED TV Display রিফাইনমেন্ট — সব রং/গ্লো/শ্যাডো
	   CSS Custom Properties-এ কেন্দ্রীভূত করা হয়েছে (নির্দেশনা
	   অনুযায়ী), যাতে ভবিষ্যতে থিম-কালার বদলানো সহজ হয়। RGB-only
	   ভ্যারিয়েবল (কমা-সেপারেটেড, কোনো rgb() wrapper ছাড়া) ব্যবহার
	   করা হয়েছে যাতে rgba(var(--x), alpha) সিনট্যাক্সে যেকোনো
	   opacity দিয়ে পুনঃব্যবহার করা যায়। */
	--shahaz-hero-gold-rgb: 212, 175, 55;
	--shahaz-hero-magenta-rgb: 194, 24, 91;
	/* Piano Black — সাধারণ কালোর (0,0,0) চেয়ে সামান্য গভীর/উষ্ণ,
	   OLED প্যানেলের বাস্তব "Piano Black Surface" অনুভূতির কাছাকাছি */
	--shahaz-hero-oled-black-rgb: 8, 8, 10;
	--shahaz-hero-bezel-width: 2px;
}




/*************************************************************
 * COMPONENT NAME: HeroComponentWrapper + Spacing
 * Purpose: Header → Hero = 12px, Hero → পরের সেকশন = 16px — এই
 *          কম্পোনেন্টের বাইরের স্পেসিং এখানেই নিয়ন্ত্রিত।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: এই মার্জিন-ভ্যালু বদলাবেন না
 *          (স্পেসিফিকেশনে "Extra White Space রাখা যাবে না" স্পষ্ট
 *          বলা আছে)।
 *************************************************************/
.shahaz-hero-component {
	/* ⚠️ Prompt 04: এটাই আসল প্রধান কারণ ছিল Hero-র উপরে/নিচে বড়
	   ফাঁকা জায়গার — আগে margin-top:12px + margin-bottom:16px
	   ছিল (এর উপরে .shahaz-hero-grid-এর নিজস্ব padding আলাদাভাবে
	   যোগ হতো, দুটো মিলে দৃশ্যমান "বড় সাদা গ্যাপ" তৈরি করত)। এখন
	   সর্বোচ্চ ১-২px রাখা হয়েছে (ব্যবহারকারীর স্পষ্ট নির্দেশ)। */
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}




/*************************************************************
 * COMPONENT NAME: HeroGrid (12-Column, Desktop)
 * Purpose: 12-কলাম গ্রিড — Left Hero ৮ কলাম (৬৬.৬৬৬%), Right Hero
 *          ৪ কলাম (৩৩.৩৩৩%), gap 16px।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: grid-template-columns: repeat(12,1fr)
 *          + grid-column: span 8/4 — এই অনুপাত বদলাবেন না।
 *************************************************************/
.shahaz-hero-grid {
	display: grid;
	/* ⚠️ Prompt 03.A: grid-template-columns সব breakpoint-এই অপরিবর্তিত
	   (repeat(12,1fr), span 8/4) — Left/Right Hero-র ৬৬.৬৬%/৩৩.৩৩%
	   অনুপাত Desktop, Tablet, Mobile — সব জায়গায় সম্পূর্ণ একই। আগে
	   Mobile-এ এটা 1fr (single column) করে দেওয়া হতো এবং Right Hero
	   হাইড করা হতো — এটাই মূল সমস্যা ছিল, এখন সম্পূর্ণ সরানো হয়েছে। */
	grid-template-columns: repeat(12, 1fr);
	/* Mobile-first বেস মান — নিচের media query দুটো Tablet/Desktop-এ override করে */
	gap: 2.5px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	/* ⚠️ Prompt 04: Announcement Bar/Header-এর নিচে ও Hero Section-এর
	   নিচে সর্বোচ্চ ১-২px গ্যাপ রাখতে হবে — আগে top/bottom padding
	   8px ছিল যা একটা লক্ষণীয় সাদা ফাঁকা জায়গা তৈরি করছিল। এখন
	   top/bottom 2px, left/right আগের মতোই 8px (এটা ভেতরের গ্রিড
	   কন্টেন্টের নিজস্ব spacing, বাইরের গ্যাপ-সমস্যার সাথে সম্পর্কিত
	   না, তাই অপরিবর্তিত রাখা হয়েছে)। */
	padding: 0;
	/* ⚠️ বাগ-প্রতিরোধ (গুরুত্বপূর্ণ): box-sizing: border-box ছাড়া,
	   width:100% + padding একসাথে থাকলে মোট প্রস্থ 100% + 32px
	   হয়ে যায় (padding content-box-এ যোগ হয়), যার ফলে গ্রিড ডান
	   দিকে ওভারফ্লো করে কেটে যাচ্ছিল — এটাই আসল কারণ ছিল স্ক্রিনশটে
	   দেখা "ডান দিক থেকে কাটা" সমস্যার। */
	box-sizing: border-box;
	/* "Overflow: Hidden" — হরাইজন্টাল স্ক্রলবার প্রতিরোধ করে, কিন্তু
	   overflow-x ব্যবহার করা হয়েছে (পুরো overflow:hidden না) যাতে
	   Left/Right Hero-র box-shadow উল্লম্বভাবে ক্লিপ না হয়ে যায় —
	   দুটো স্পেসিফিকেশনই (Overflow Hidden + Shadow) সর্বোচ্চ মেনে
	   চলার একটা বাস্তবসম্মত সমাধান। */
	overflow-x: hidden;
	/* ⚠️ align-items:stretch — এটাই Right Hero-র height Left Hero-র
	   সাথে সবসময় সমান রাখার মূল মেকানিজম, সব breakpoint-এ কাজ করে
	   (নিচে আলাদা করে কোথাও override করা হয়নি) */
	align-items: stretch;
}

@media (min-width: 768px) and (max-width: 1199px) {
	.shahaz-hero-grid {
		gap: 2.5px;
		padding: 2px 12px;
	}
}

@media (min-width: 1200px) {
	.shahaz-hero-grid {
		gap: 2.5px;
		padding: 2px 16px;
	}
}



/*************************************************************
 * COMPONENT NAME: LeftHero (Slider Container)
 * Purpose: ৮-কলাম, 340px উচ্চতা (min 320/max 360), 18px রেডিয়াস,
 *          0.5px পার্ল বর্ডার, সফট শ্যাডো — আসল ছবি-স্লাইডার এখানে।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: height/border-radius/shadow-এর
 *          এক্সাক্ট ভ্যালু স্পেসিফিকেশন অনুযায়ী — পরিবর্তন করবেন না।
 *************************************************************/
.shahaz-hero-left {
	position: relative;
	/* ⚠️ ২০২৬-০৮-১০ আপডেট: grid-column এখন প্যারেন্ট wrapper
	   (.shahaz-hero-left-col, উপরে সংজ্ঞায়িত)-এ সরানো হয়েছে —
	   .shahaz-hero-left এখন সরাসরি Grid Item না, wrapper-এর ভেতরে
	   একটা flex child (flex:0 0 auto, নিচে)। এটা করা হয়েছে যাতে
	   Prompt 05-এর ইচ্ছাকৃত Mobile Height Gap (108px vs Ads 138px)
	   এখন একটা প্রকৃত Quick Action Bar-এ ব্যবহার হয় (আগে এই গ্যাপ
	   অব্যবহৃত ফাঁকা জায়গা ছিল, Prompt 10-এ শেলফ সরে যাওয়ার পর থেকে)। */
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	/* ⚠️ Prompt 03.A: এখন Mobile-first বেস — ডিফল্ট (কোনো media
	   query ছাড়া) মান Mobile-এর জন্য, নিচের দুটো min-width media
	   query দিয়ে Tablet (240px) ও Desktop (340px) override হয়।
	   আগে উল্টো ছিল (বেস মান Desktop-এর জন্য ছিল, Tablet-এর জন্য
	   আলাদা কোনো override-ই ছিল না — এটাই "Tablet Layout অসম্পূর্ণ"
	   সমস্যার কারণ ছিল)। */
	/* ⚠️ Prompt 05: ব্যবহারকারীর স্পষ্ট নির্দেশে Mobile-এ Banner-এর
	   height Ads (138px)-এর চেয়ে ইচ্ছাকৃতভাবে চিকন (108px) — এই
	   height পার্থক্য বজায় আছে, কিন্তু এখন এটা কোনো "শেলফের জন্য
	   গ্যাপ" হিসেবে ব্যবহার হয় না (Prompt 10-এ Full-Width Shelf,
	   Hero Section-এর সম্পূর্ণ বাইরে, নতুনভাবে যোগ হয়েছে)। */
	height: 108px;
	min-height: 108px;
	max-height: 108px;
	box-sizing: border-box;
	border-radius: 12px;
	/* ⚠️ Prompt 03.B: Luxury Premium OLED Smart Display Frame —
	   পুরনো সরল সাদা বর্ডার (border: 0.5px solid pearl) সরিয়ে
	   একটা Layered Frame System বসানো হয়েছে (নিচে বিস্তারিত):
	   ১) Black Inner Bezel — inset box-shadow (এই rule-এই, নিচে)
	   ২) Metallic Gold Frame Ring — ::before pseudo-element
	   ৩) Glass Reflection Sheen — ::after pseudo-element
	   ৪) Soft Floating Shadow + Ambient Gold/Magenta Glow + Bottom
	      Ambient Light — সব একসাথে box-shadow-এ (একাধিক লেয়ার)
	   border-radius প্রতিটা breakpoint-এ অপরিবর্তিত (Desktop 18px/
	   Tablet 16px/Mobile 12px) — শুধু ফ্রেম/গ্লো/শ্যাডো নতুন। */
	border: none;
	/* ⚠️ Prompt 06 (OLED TV Redesign, Hero Banner-only): এই বেস
	   box-shadow শুধু .shahaz-hero-left-এর নিজস্ব সিলেক্টর — Right
	   Hero এখানে টাচ করা হয়নি (শেয়ার্ড @keyframes-ও অপরিবর্তিত
	   রাখা হয়েছে, নিচে দেখুন)। রং এখন CSS Custom Properties থেকে
	   (rgba(var(--x), alpha) সিনট্যাক্স) — Piano Black bezel সামান্য
	   গভীর করা হয়েছে বাস্তব OLED প্যানেলের অনুভূতির জন্য, এবং Bottom
	   Ambient Light সামান্য বেশি কেন্দ্রীভূত (TV Stand-এর আলোর
	   ইঙ্গিত দিতে — আসল প্রোট্রুডিং Stand শেপ যোগ করা যায়নি, কারণ
	   height min/max-height দিয়ে লক করা এবং এক্সট্রা DOM এলিমেন্ট
	   ছাড়া বাস্তবিকভাবে সম্ভব না — এটা "Pending Specification"
	   হিসেবে আলোচনা করা হয়েছে)। */
	box-shadow:
		/* Black Inner Bezel — Piano Black, স্লিম */
		inset 0 0 0 var(--shahaz-hero-bezel-width) rgba(var(--shahaz-hero-oled-black-rgb), 0.85),
		/* Soft Floating Shadow */
		0 10px 26px -10px rgba(0,0,0,0.16),
		/* Ambient Gold Glow */
		0 0 18px rgba(var(--shahaz-hero-gold-rgb), 0.11),
		/* Ambient Magenta Glow */
		0 0 14px rgba(var(--shahaz-hero-magenta-rgb), 0.09),
		/* Bottom Ambient Light — TV Stand-এর আলোর ইঙ্গিত, সামান্য বেশি কেন্দ্রীভূত/গাঢ় */
		0 20px 30px -12px rgba(var(--shahaz-hero-gold-rgb), 0.17),
		0 20px 30px -12px rgba(var(--shahaz-hero-magenta-rgb), 0.13);
	overflow: hidden;
	background: var(--shahaz-hero-white);
	/* Page Load — Frame Soft Fade In + Glow ধীরে ধীরে প্রকাশ */
	animation: shahaz-hero-frame-power-on 1.1s cubic-bezier(.2,.8,.2,1) both;
	transition: transform 0.3s ease, height 0.3s ease, border-radius 0.3s ease, box-shadow 0.4s ease;
}

/* Metallic Gold Frame Ring — Champagne Gold Gradient, mask কৌশলে
   শুধু বর্ডার-এরিয়া দেখায় (Slim, Premium — মোটা না) */
.shahaz-hero-left::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(135deg, #F4E3A1 0%, #D4AF37 22%, #B8912A 48%, #D4AF37 74%, #F4E3A1 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: 3;
	pointer-events: none;
}

/* Glass Reflection Sheen — উপরে-বামে খুব হালকা কাচের মতো ঝলক */
.shahaz-hero-left::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(160deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 18%, transparent 40%);
	z-index: 4;
	pointer-events: none;
}

/*************************************************************
 * COMPONENT NAME: Decorative Luxury Accent Icons (Prompt 06)
 * Purpose: Marble Shelf + একাধিক Decorative Product-এর মূল ভিশনের
 *          বাস্তবসম্মত, কপিরাইট-নিরাপদ সংস্করণ — সম্পূর্ণ মৌলিক
 *          (কোনো ছবি কপি করা হয়নি) SVG লাইন-আর্ট আইকন, ফ্রেমের
 *          কোণায় ছোট্ট এক্সেন্ট হিসেবে। বাড়তি height/জায়গা লাগে
 *          না ("Layout পরিবর্তন করা যাবে না" নির্দেশ মেনে) — সম্পূর্ণ
 *          Frame-এর বিদ্যমান বাউন্ডারির ভেতরেই position:absolute।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: .shahaz-hero-luxury-icon একটা
 *          বেস ক্লাস, প্রতিটা আইকনের নিজস্ব পজিশন মডিফায়ার ক্লাস
 *          (-bag/-watch) — নতুন আইকন যোগ করতে একই প্যাটার্নে নতুন
 *          মডিফায়ার ক্লাস + কর্নার পজিশন যোগ করুন।
 *************************************************************/
.shahaz-hero-luxury-icon {
	position: absolute;
	z-index: 5;
	/* ⚠️ ব্যবহারকারীর রেফারেন্স ছবি অনুযায়ী রিস্টাইল — আগের ছোট
	   (24px) গোল্ড-রিং ব্যাজ থেকে একটু বড়, প্লেইন সলিড ডার্ক
	   সেমি-ট্রান্সপারেন্ট সার্কেল (কোনো গোল্ড বর্ডার-রিং নেই) —
	   ছবিতে যেমন দেখা যাচ্ছে ঠিক তেমন। */
	width: 30px;
	height: 30px;
	padding: 7px;
	box-sizing: border-box;
	border-radius: 50%;
	background: rgba(30,26,28,0.55);
	backdrop-filter: blur(2px);
	border: none;
	color: #FFFFFF;
	opacity: 1;
	pointer-events: none;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
	/* Page Load-এ Frame-এর সাথে সামঞ্জস্যপূর্ণ Soft Fade In (একবারই) */
	animation: shahaz-hero-luxury-icon-fade-in 1.4s ease both;
	animation-delay: 0.3s;
}

.shahaz-hero-luxury-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.shahaz-hero-luxury-icon-bag {
	top: 10px;
	left: 10px;
}

.shahaz-hero-luxury-icon-watch {
	top: 10px;
	right: 10px;
}

@media (min-width: 768px) {
	.shahaz-hero-luxury-icon {
		width: 38px;
		height: 38px;
		padding: 9px;
	}
	.shahaz-hero-luxury-icon-bag {
		top: 14px;
		left: 14px;
	}
	.shahaz-hero-luxury-icon-watch {
		top: 14px;
		right: 14px;
	}
}

@keyframes shahaz-hero-luxury-icon-fade-in {
	from {
		opacity: 0;
		transform: translateY(-3px);
	}
	to {
		opacity: 0.92;
		transform: translateY(0);
	}
}

@media (min-width: 768px) {
	.shahaz-hero-luxury-icon {
		width: 30px;
		height: 30px;
		padding: 6px;
	}
	.shahaz-hero-luxury-icon-bag {
		top: 10px;
		left: 12px;
	}
	.shahaz-hero-luxury-icon-watch {
		top: 10px;
		right: 12px;
	}
}

/*************************************************************
 * COMPONENT NAME: Product Display Shelf (Prompt 07)
 * Purpose: ব্যবহারকারীর নিজের আপলোড করা ৫টা প্রোডাক্ট ছবি —
 *          Frame-এর নিচের অংশে "TV-এর সামনে সাজানো ডেকোরেটিভ
 *          জিনিস"-এর মতো, staggered (উঁচু-নিচু) বসানো। ব্যানার
 *          ছবির উপর সামান্য ওভারল্যাপ করে (ব্যবহারকারীর স্পষ্ট
 *          অনুমতি অনুযায়ী: "ব্যানারের সামনের অংশ একটু ঢেকেও যায়
 *          তাতে সমস্যা নেই")। সম্পূর্ণ Frame-এর বিদ্যমান height-এর
 *          ভেতরেই (position:absolute, বাড়তি জায়গা লাগেনি)।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: z-index dots (২)-এর চেয়ে কম (১)
 *          রাখা হয়েছে, যাতে slider dots সবসময় ক্লিকযোগ্য থাকে,
 *          পণ্যের ছবি তার নিচে থাকলেও। pointer-events:none — শুধু
 *          ডেকোরেশন, ক্লিকযোগ্য না, স্লাইডের লিংক/আর্কেও বাধা দেয় না।
 *************************************************************/

/* ⚠️ শেয়ার্ড @keyframes shahaz-hero-frame-power-on ইচ্ছাকৃতভাবে
   অপরিবর্তিত রাখা হয়েছে (নিচে) — এটা .shahaz-hero-right-ও ব্যবহার
   করে, এবং এই প্রম্পটে "Right Side Advertisement Panel-এ কোনো
   পরিবর্তন করা যাবে না" স্পষ্ট নির্দেশ থাকায় এই শেয়ার্ড অ্যানিমেশন
   টাচ করা হয়নি (পরিবর্তন করলে Ads Panel-এর load-অ্যানিমেশনও বদলে
   যেত)। */

@keyframes shahaz-hero-frame-power-on {
	0% {
		opacity: 0;
		box-shadow:
			inset 0 0 0 2px rgba(8,8,10,0.82),
			0 10px 26px -10px rgba(0,0,0,0.16),
			0 0 0px rgba(212,175,55,0),
			0 0 0px rgba(194,24,91,0),
			0 18px 34px -14px rgba(212,175,55,0),
			0 18px 34px -14px rgba(194,24,91,0);
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		box-shadow:
			inset 0 0 0 2px rgba(8,8,10,0.82),
			0 10px 26px -10px rgba(0,0,0,0.16),
			0 0 18px rgba(212,175,55,0.11),
			0 0 14px rgba(194,24,91,0.09),
			0 18px 34px -14px rgba(212,175,55,0.14),
			0 18px 34px -14px rgba(194,24,91,0.10);
	}
}

/* Hover — মাত্র ২-৩% Glow বৃদ্ধি, কোনো Jump/Scale অ্যানিমেশন না
   (Prompt 03.A-এর পুরনো hover transform:scale সরিয়ে ফেলা হয়েছে,
   শুধু Glow-ই সামান্য বাড়বে, ব্যানার লাফাবে না) */
@media (hover: hover) {
	.shahaz-hero-left:hover {
		/* ⚠️ Prompt 06: "Glow সর্বোচ্চ ২% বৃদ্ধি পাবে" — আগের চেয়ে
		   আরও সংযত/সূক্ষ্ম করা হয়েছে (আগে ~২৩% আপেক্ষিক বৃদ্ধি ছিল,
		   এখন অনেক কম, প্রায় অদৃশ্য কিন্তু অনুভবযোগ্য) */
		box-shadow:
			inset 0 0 0 var(--shahaz-hero-bezel-width) rgba(var(--shahaz-hero-oled-black-rgb), 0.85),
			0 10px 26px -10px rgba(0,0,0,0.16),
			0 0 18px rgba(var(--shahaz-hero-gold-rgb), 0.115),
			0 0 14px rgba(var(--shahaz-hero-magenta-rgb), 0.095),
			0 20px 30px -12px rgba(var(--shahaz-hero-gold-rgb), 0.175),
			0 20px 30px -12px rgba(var(--shahaz-hero-magenta-rgb), 0.135);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.shahaz-hero-left {
		height: 326px;
		min-height: 326px;
		max-height: 326px;
		border-radius: 16px;
	}
}

@media (min-width: 1200px) {
	.shahaz-hero-left {
		height: 326px;
		min-height: 326px;
		max-height: 326px;
		border-radius: 18px;
	}
}

/* ⚠️ Prompt 03.B: আগে এখানে .shahaz-hero-left:hover {
   transform:translateY(-2px); } ছিল — একটা "jump" ধরনের হালকা
   উপরে-ওঠা অ্যানিমেশন, যা স্পেসিফিকেশনের স্পষ্ট নির্দেশ "কোনো Jump
   Animation করা যাবে না"-এর বিপরীত ছিল। সম্পূর্ণ সরিয়ে ফেলা হয়েছে —
   এখন hover-এ শুধু Glow বৃদ্ধি পায় (উপরের @media (hover: hover)
   ব্লকে), কোনো নড়াচড়া/লাফানো হয় না। */




/*************************************************************
 * COMPONENT NAME: Hero Quick Action Bar (২০২৬-০৮-১০, বাগ-ফিক্স ২০২৬-০৮-১২)
 * Purpose: Left Hero Slider-এর ঠিক নিচে (0.2rem Gap দিয়ে আলাদা),
 *          Advertisement Column (Right Hero)-এর Height-এর সাথে
 *          মিলিয়ে দেওয়া একটা Wrapper (.shahaz-hero-left-col) — এর
 *          ভেতরে Left Hero (নিজের Fixed Height, flex:0 0 auto) +
 *          এই Quick Action Bar (flex:1 1 auto, বাকি জায়গা নেয়)।
 * ⚠️ ২০২৬-০৮-১২ বাগ-ফিক্স: আগে এই কমেন্টে লেখা ছিল "Tablet/Desktop-এ
 *          Hero=Ads Height সমান হলে flex-grow 0px পায়, বার সম্পূর্ণ
 *          Invisible হয়ে যায়, কোনো সমস্যা না" — কিন্তু বাস্তবে এটা
 *          Tablet রেঞ্জে (768-1199px) সত্যিকারের বাগ ছিল: ব্যবহারকারী
 *          স্ক্রিনশট দিয়ে দেখিয়েছেন Mobile ও Desktop-এ বার ঠিকই
 *          দেখায়, কিন্তু Tablet-এ (WordPress Customizer-এর সংকুচিত
 *          প্রিভিউ-সহ) সম্পূর্ণ উধাও হয়ে "ফাঁকা যায়গা" তৈরি করে। এখন
 *          .shahaz-hero-left-col-কে প্রতিটা Breakpoint-এই Left Hero
 *          Slider-এর চেয়ে ইচ্ছাকৃতভাবে লম্বা রাখা হয় (Mobile +30px,
 *          Tablet +36px, Desktop +42px) — যাতে Bar কখনোই 0px না হয়,
 *          সবসময় দৃশ্যমান থাকে। Right Hero (Ads)-এর height:auto +
 *          Grid align-items:stretch অপরিবর্তিত — তাই Ads Column
 *          স্বয়ংক্রিয়ভাবে যেকোনো নতুন Wrapper Height-এর সাথে মিলে
 *          যায়, কোনো আলাদা কোড লাগে না।
 * CSS Dependency: এই ফাইলেই সম্পূর্ণ
 * WooCommerce Dependency: None — সব Link functions.php-র
 *          shahaz_get_quick_action_bar_items()-এ (Dynamic, Filterable)
 * Future AI Modification Notes: .shahaz-hero-left/.shahaz-hero-right-এর
 *          height কখনো বদলালে, .shahaz-hero-left-col-এর height-ও
 *          একই সাথে (একই breakpoint-এ) আপডেট করতে হবে — এবং
 *          .shahaz-hero-left-col-এর height সবসময় .shahaz-hero-left-এর
 *          height-এর চেয়ে **কমপক্ষে ২৪-৩০px বেশি** রাখতে হবে (কখনো
 *          সমান/কম না), নাহলে এই একই "Bar Invisible" বাগ আবার ফিরে
 *          আসবে।
 *************************************************************/
.shahaz-hero-left-col {
	grid-column: span 8;
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* ⚠️ ২০২৬-০৮-১২ আপডেট (ব্যবহারকারীর নির্দেশে): আগে Left Hero
	   Slider ও নিচের Quick Action Bar-এর মাঝে কোনো Gap ছিল না (দুটো
	   একদম গায়ে-গায়ে লেগে ছিল)। এখন 0.2rem (≈3.2px) Gap — সব
	   Breakpoint-এই (Mobile/Tablet/Desktop) সমানভাবে প্রযোজ্য, নিচের
	   কোনো Media Query-তে আলাদা করে Override করতে হয়নি কারণ flex gap
	   স্বয়ংক্রিয়ভাবে flex:1 1 auto চাইল্ড (Quick Action Bar)-এর
	   available height থেকে বিয়োগ হয়ে যায়। */
	gap: 0.2rem;
	height: 138px;
	min-height: 138px;
	max-height: 138px;
}

@media (min-width: 768px) and (max-width: 1199px) {
	.shahaz-hero-left-col {
		height: 386px;
		min-height: 386px;
		max-height: 386px;
	}
}

@media (min-width: 1200px) {
	.shahaz-hero-left-col {
		height: 386px;
		min-height: 386px;
		max-height: 386px;
	}
}

.shahaz-hero-quick-actions {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.shahaz-hero-qa-track {
	width: 100%;
	height: 100%;
	max-height: 30px;
	display: flex;
	align-items: center;
	gap: 3px;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	box-sizing: border-box;
	/* Hot-Magenta Luxury Capsule — compact, কিন্তু স্পষ্ট 3D depth */
	background: linear-gradient(135deg, #ff0088 0%, #f5009d 48%, #c600d8 100%);
	border: 1px solid rgba(255, 215, 70, 0.95);
	border-radius: 999px;
	box-shadow:
		0 2px 0 rgba(151, 0, 93, 0.95),
		0 4px 8px rgba(80, 0, 45, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		inset 0 -2px 0 rgba(115, 0, 105, 0.22);
	padding: 3px 7px;
}
.shahaz-hero-qa-track::-webkit-scrollbar {
	display: none;
}

.shahaz-hero-qa-item {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid rgba(255, 224, 112, 0.82);
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: start;
	color: #fff;
	background: linear-gradient(180deg, rgba(255,255,255,0.19) 0%, rgba(255,255,255,0.06) 45%, rgba(125,0,95,0.16) 100%);
	box-shadow:
		0 2px 0 rgba(120, 0, 82, 0.62),
		0 3px 6px rgba(65, 0, 45, 0.20),
		inset 0 1px 0 rgba(255,255,255,0.48),
		inset 0 -1px 0 rgba(90,0,70,0.22);
		transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
	transform-origin: center center;
	will-change: transform;
}

/* আইটেমগুলোর মাঝে সূক্ষ্ম Gold Divider — Capsule-এর ভেতরেই থাকে */
.shahaz-hero-qa-item:not(:first-child)::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 24%;
	bottom: 24%;
	width: 1px;
	background: rgba(255, 225, 112, 0.72);
}

/* Emoji/Icon-কে ছোট 3D jewel-এর মতো দেখানো */
.shahaz-hero-qa-icon {
	font-size: 12px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #fff7bf 0%, #ffd84d 35%, #ff9f00 70%, #e56a00 100%);
	border: 1px solid rgba(255,255,255,0.82);
	box-shadow:
		0 2px 0 rgba(141, 78, 0, 0.72),
		0 2px 5px rgba(65,0,35,0.25),
		inset 0 1px 1px rgba(255,255,255,0.9),
		inset 0 -1px 2px rgba(132,65,0,0.35);
		text-shadow: 0 1px 1px rgba(91, 0, 52, 0.5);
	transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.shahaz-hero-qa-label {
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1px;
	text-shadow: 0 1px 1px rgba(100, 0, 55, 0.35);
}

@media (min-width: 768px) {
	.shahaz-hero-qa-icon {
		font-size: 14px;
		min-width: 19px;
		height: 19px;
	}
	.shahaz-hero-qa-label {
		font-size: 10px;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.shahaz-hero-qa-track {
		max-height: 32px;
	}
	.shahaz-hero-qa-item {
		padding: 3px 8px;
	}
}

@media (min-width: 1200px) {
	.shahaz-hero-qa-track {
		max-height: 42px;
	}
	.shahaz-hero-qa-item {
		padding: 4px 10px;
	}
	.shahaz-hero-qa-icon {
		font-size: 16px;
		min-width: 21px;
		height: 21px;
	}
	.shahaz-hero-qa-label {
		font-size: 11px;
	}
}

/* Hover/Focus: সামান্য lift — Link-গুলোকে আলাদা করে চেনা যায় */
.shahaz-hero-qa-item:hover,
.shahaz-hero-qa-item:focus-visible,
.shahaz-hero-qa-item.shahaz-hero-qa-item-active {
	transform: translateY(-2px) scale(1.04);
	background: linear-gradient(180deg, rgba(255, 215, 80, 0.34) 0%, rgba(255, 0, 136, 0.22) 100%);
	border-color: #ffe36b;
	box-shadow:
		0 4px 0 rgba(118, 0, 82, 0.66),
		0 7px 10px rgba(75, 0, 55, 0.28),
		0 0 10px rgba(255, 215, 70, 0.34),
		inset 0 1px 0 rgba(255,255,255,0.72);
	color: #fff;
}

.shahaz-hero-qa-item:hover .shahaz-hero-qa-icon,
.shahaz-hero-qa-item:focus-visible .shahaz-hero-qa-icon,
.shahaz-hero-qa-item.shahaz-hero-qa-item-active .shahaz-hero-qa-icon {
	transform: translateY(-1px) scale(1.12);
	filter: saturate(1.12) brightness(1.05);
	box-shadow:
		0 3px 0 rgba(141, 78, 0, 0.72),
		0 4px 7px rgba(65,0,35,0.30),
		inset 0 1px 1px rgba(255,255,255,0.95),
		inset 0 -1px 2px rgba(132,65,0,0.35);
}

/* Touch/Press: বাটন সামান্য সামনে/উপরে উঠে আসে — tactile 3D feedback */
.shahaz-hero-qa-item:active {
	transform: translateY(-3px) scale(1.10);
	background: linear-gradient(180deg, #ff39a9 0%, #e50091 55%, #b900c9 100%);
	border-color: #ffe36b;
	box-shadow:
		0 6px 0 rgba(103, 0, 75, 0.82),
		0 10px 13px rgba(55, 0, 40, 0.34),
		0 0 13px rgba(255, 0, 145, 0.42),
		inset 0 1px 0 rgba(255,255,255,0.75);
	color: #fff;
}

.shahaz-hero-qa-item:active .shahaz-hero-qa-icon {
	transform: translateY(-2px) scale(1.18);
	filter: saturate(1.2) brightness(1.08);
}



/*************************************************************
 * COMPONENT NAME: HeroSliderTrack & Slides
 * Purpose: স্লাইড ট্র্যাক — JS দিয়ে transform: translateX() করে
 *          স্লাইড বদলায়, transition 500ms ease-in-out।
 * CSS Dependency: assets/js/hero-banner.js
 * WooCommerce Dependency: None
 * Future AI Modification Notes: কোনো থার্ড-পার্টি স্লাইডার লাইব্রেরি
 *          ব্যবহার করা হয়নি (বিশুদ্ধ CSS transform + vanilla JS)।
 *************************************************************/
.shahaz-hero-track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 500ms ease-in-out;
}

.shahaz-hero-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* ⚠️ ক্লিক ট্র্যাকিং (Part-02 এক্সটেনশন) সক্ষম করতে স্লাইড এখন
	   কখনো <a> ট্যাগ হতে পারে (destination_url সেট থাকলে) — এই
	   রিসেট নিশ্চিত করে <a>/<div> যেটাই হোক, ভিজ্যুয়াল একদম অভিন্ন
	   থাকে, কোনো ডিফল্ট লিংক-স্টাইল (আন্ডারলাইন/নীল রং) দেখা যায় না। */
	display: block;
	text-decoration: none;
	color: inherit;
}

.shahaz-hero-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.shahaz-hero-img {
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	box-sizing: border-box;
	transition: transform 500ms ease-in-out;
}

/* ⚠️ Prompt 03.A: Media Support — Video। .shahaz-hero-img/
   .shahaz-hero-right-img-এর object-fit:cover ইতিমধ্যেই video-তেও
   সমানভাবে কাজ করে (আলাদা সাইজিং CSS লেখার দরকার নেই) — এখানে শুধু
   ব্রাউজারের ডিফল্ট video controls/outline বন্ধ রাখা হয়েছে, যাতে
   Banner Image-এর মতোই নির্ভেজাল দেখায় */
.shahaz-hero-video {
	pointer-events: auto; /* ভিডিওতে ব্রাউজারের ডিফল্ট right-click/control আসবে না, লিংক ক্লিক ঠিকভাবে কাজ করবে */
	outline: none;
}

.shahaz-hero-left:hover .shahaz-hero-img {
	transform: scale(1.03);
}

/* কোনো ব্যানার কনফিগার করা না থাকলে — Dummy/Placeholder Text ছাড়াই
   শুধু ব্র্যান্ড-টোকেন Luxury Magenta সলিড রঙের একটা খালি বক্স */
.shahaz-hero-empty {
	width: 100%;
	height: 100%;
	background: var(--shahaz-hero-magenta);
}




/*************************************************************
 * COMPONENT NAME: SliderArrows
 * Purpose: 44px পারফেক্ট সার্কেল, সাদা bg + গোল্ড বর্ডার/আইকন,
 *          হোভারে ম্যাজেন্টা bg + সাদা আইকন। উল্লম্ব-কেন্দ্রে,
 *          বাম/ডান 16px।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: শুধু ১টার বেশি স্লাইড থাকলেই এই
 *          বাটন দেখা যায় (PHP-তে কন্ডিশনাল রেন্ডার)।
 *************************************************************/
.shahaz-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--shahaz-hero-white);
	border: 1.5px solid var(--shahaz-hero-gold);
	color: var(--shahaz-hero-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	z-index: 2;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.shahaz-hero-arrow svg {
	width: 18px;
	height: 18px;
}

.shahaz-hero-arrow:hover {
	background: var(--shahaz-hero-magenta);
	border-color: var(--shahaz-hero-magenta);
	color: var(--shahaz-hero-white);
}

.shahaz-hero-arrow:focus-visible {
	outline: 2px solid var(--shahaz-hero-magenta);
	outline-offset: 2px;
}

.shahaz-hero-arrow-prev {
	left: 16px;
}

.shahaz-hero-arrow-next {
	right: 16px;
}




/*************************************************************
 * COMPONENT NAME: DotIndicator
 * Purpose: নিচে-কেন্দ্রে, 8px সাইজ, 8px গ্যাপ, active ম্যাজেন্টা,
 *          inactive হালকা ধূসর।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: dot সংখ্যা স্লাইড সংখ্যার সমান, JS
 *          দিয়ে active ক্লাস টগল হয়।
 *************************************************************/
.shahaz-hero-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}

.shahaz-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--shahaz-hero-dot-inactive);
	border: none;
	padding: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

.shahaz-hero-dot-active {
	background: var(--shahaz-hero-magenta);
	transform: scale(1.15);
}

.shahaz-hero-dot:focus-visible {
	outline: 2px solid var(--shahaz-hero-magenta);
	outline-offset: 2px;
}




/*************************************************************
 * COMPONENT NAME: RightHero (Empty Container)
 * Purpose: ৪-কলাম, Left Hero-র সমান উচ্চতা (CSS Grid-এর
 *          align-items: stretch দিয়ে স্বয়ংক্রিয়ভাবে, হার্ডকোড করা
 *          ডুপ্লিকেট height ভ্যালু ছাড়াই), 18px রেডিয়াস, বর্ডার,
 *          শ্যাডো — সম্পূর্ণ খালি, কোনো ব্যাকগ্রাউন্ড ফিল/কনটেন্ট নেই।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: ⚠️ এটা Part-01-এ ইচ্ছাকৃতভাবে খালি —
 *          Part-02/Part-03-এ কনটেন্ট যোগ হবে, এখন যোগ করা হয়নি।
 *************************************************************/
.shahaz-hero-right {
	position: relative;
	grid-column: span 4;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	/* ⚠️ Prompt 03.A (ইতিহাস — এখন Mobile-এ আর সত্য না): এখানে
	   height সেট করা হতো না, .shahaz-hero-grid-এর align-items:stretch
	   স্বয়ংক্রিয়ভাবে Left Hero-র height অনুসরণ করত।
	   ⚠️ Prompt 05: ব্যবহারকারীর স্পষ্ট নির্দেশে Mobile-এ এখন এই
	   স্বয়ংক্রিয় মিল-করা আচরণ ইচ্ছাকৃতভাবে ভাঙা হয়েছে — Ads Column
	   এখন Mobile-এ নিজস্ব explicit height (138px, নিচে) রাখে, Left
	   Hero-র height (এখন 108px) থেকে **স্বাধীন**। Tablet/Desktop-এ
	   কোনো পরিবর্তন হয়নি — সেখানে এখনো কোনো explicit height নেই,
	   তাই align-items:stretch আগের মতোই কাজ করে (Banner=Ads height,
	   Desktop-এ যেমন width আলাদা কিন্তু height সমান — এটাই অপরিবর্তিত
	   আছে)। border-radius আলাদাভাবে প্রতিটা breakpoint-এ Left
	   Hero-র সাথে মিলিয়ে রাখা হয়েছে (Mobile 12px, Tablet 16px,
	   Desktop 18px)। */
	height: 138px;
	min-height: 132px;
	max-height: 144px;
	/* ⚠️ Prompt 03.C: Layout/Responsive Structure অপরিবর্তিত রাখা
	   হয়েছে (grid-column:span 4, breakpoint-ভিত্তিক radius) —
	   স্পেসিফিকেশনের স্পষ্ট নির্দেশ "বর্তমান Responsive Structure
	   পরিবর্তন করা যাবে না"। শুধু ফ্রেম/গ্লো/শ্যাডো — Hero Banner-এর
	   (.shahaz-hero-left, Prompt 03.B) সাথে হুবহু মিলিয়ে — নতুন যোগ
	   করা হয়েছে, যাতে "একই Luxury Display Family"-র অংশ মনে হয়। */
	border-radius: 12px;
	border: none;
	box-shadow:
		/* Black Inner Bezel — Hero Banner-এর সাথে হুবহু মিল */
		inset 0 0 0 2px rgba(8,8,10,0.82),
		/* Soft Floating Shadow */
		0 10px 26px -10px rgba(0,0,0,0.16),
		/* Ambient Gold Glow */
		0 0 18px rgba(212,175,55,0.11),
		/* Ambient Magenta Glow */
		0 0 14px rgba(194,24,91,0.09),
		/* Bottom Ambient Light */
		0 18px 34px -14px rgba(212,175,55,0.14),
		0 18px 34px -14px rgba(194,24,91,0.10);
	/* ⚠️ "বর্তমানে কোনো Dummy Banner/Placeholder Image ব্যবহার করবেন
	   না, শুধুমাত্র Premium Display Container তৈরি করবেন" — তাই
	   কোনো ছবি/আইকন যোগ না করে, খালি অবস্থায়ও যেন Display Screen-এর
	   মতো লাগে তার জন্য একটা "Standby/Off-Screen" গাঢ় গ্র্যাডিয়েন্ট
	   ব্যাকগ্রাউন্ড (আগে background:none ছিল, যা খালি অবস্থায় শুধু
	   সাদা ফাঁকা বাক্সের মতো দেখাতো)। .shahaz-hero-right-has-campaign
	   (আসল ছবি/ভিডিও থাকলে) এই ব্যাকগ্রাউন্ডের উপরেই বসে, ঢেকে দেয়। */
	background: linear-gradient(155deg, #1C1C1E 0%, #101012 55%, #0A0A0B 100%);
	overflow: hidden;
	animation: shahaz-hero-frame-power-on 1.1s cubic-bezier(.2,.8,.2,1) both;
	transition: transform 0.3s ease, border-radius 0.3s ease, box-shadow 0.4s ease;
}

/* Metallic Gold Frame Ring — Hero Banner-এর ::before-এর সাথে হুবহু মিল */
.shahaz-hero-right::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(135deg, #F4E3A1 0%, #D4AF37 22%, #B8912A 48%, #D4AF37 74%, #F4E3A1 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: 5;
	pointer-events: none;
}

/* Glass Reflection Sheen — Hero Banner-এর ::after-এর সাথে হুবহু মিল */
.shahaz-hero-right::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(160deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 18%, transparent 40%);
	z-index: 6;
	pointer-events: none;
}

/* Hover — শুধু Glow বৃদ্ধি, কোনো Scale/Bounce/Jump না */
@media (hover: hover) {
	.shahaz-hero-right:hover {
		box-shadow:
			inset 0 0 0 2px rgba(8,8,10,0.82),
			0 10px 26px -10px rgba(0,0,0,0.16),
			0 0 21px rgba(212,175,55,0.135),
			0 0 16px rgba(194,24,91,0.11),
			0 18px 34px -14px rgba(212,175,55,0.165),
			0 18px 34px -14px rgba(194,24,91,0.12);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.shahaz-hero-right {
		height: 386px;
		min-height: 386px;
		max-height: 386px;
		border-radius: 16px;
	}
}

@media (min-width: 1200px) {
	.shahaz-hero-right {
		height: 386px;
		min-height: 386px;
		max-height: 386px;
		border-radius: 18px;
	}
}

/* ⚠️ Prompt 03.C: আগে এখানে .shahaz-hero-right:hover {
   transform:translateY(-2px); } ছিল — "কোনো Scale, Bounce বা Jump
   Animation করা যাবে না" নির্দেশের বিপরীত, সম্পূর্ণ সরিয়ে ফেলা
   হয়েছে (Prompt 03.B-তে Hero Banner-এর একই সমস্যা যেভাবে ঠিক করা
   হয়েছিল, ঠিক সেভাবেই)। */




/*************************************************************
 * COMPONENT NAME: RightHeroCampaign (Part-03 — Advertisement Slot
 *                 Engine কনটেন্ট)
 * Purpose: Right Hero কন্টেইনার আগে সম্পূর্ণ খালি ছিল (Part-01/02-এ
 *          ইচ্ছাকৃতভাবে সংরক্ষিত) — এখানে কোনো Approved+Published
 *          ক্যাম্পেইন থাকলে তার ছবি/লেবেল দেখানোর জন্য নতুন রুল।
 *          .shahaz-hero-right-এর কোনো বিদ্যমান প্রোপার্টি (উপরে)
 *          বদলানো হয়নি — শুধু নতুন ক্লাস (has-campaign স্টেট,
 *          ইমেজ, ব্যাজ) যোগ করা হয়েছে।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: <a>/<div> — দুই ক্ষেত্রেই ভিজ্যুয়াল
 *          অভিন্ন রাখতে text-decoration/color reset করা হয়েছে
 *          (Left Hero-র <a>-slide-এর একই প্যাটার্ন)।
 *************************************************************/
.shahaz-hero-right-has-campaign {
	position: relative;
	overflow: hidden;
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.shahaz-hero-right-has-campaign picture {
	display: block;
	width: 100%;
	height: 100%;
}

.shahaz-hero-right-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms ease-in-out;
}

.shahaz-hero-right-has-campaign:hover .shahaz-hero-right-img {
	transform: scale(1.03);
}

.shahaz-hero-right-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--shahaz-hero-magenta);
	color: var(--shahaz-hero-white);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--shahaz-hero-gold);
}




/*************************************************************
 * COMPONENT NAME: LuxuryDivider
 * Purpose: Hero সেকশনের নিচে 4-6px প্রিমিয়াম ডিভাইডার — Border না,
 *          Soft Shadow + Gradient Transition দিয়ে পরের সেকশনে Smooth
 *          Visual Flow তৈরি করে।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: এই ডিভাইডার কোনো border-bottom
 *          প্রোপার্টি ব্যবহার করে না (স্পষ্টভাবে "Border হবে না"
 *          বলা আছে) — শুধু gradient background + box-shadow।
 *************************************************************/
/*************************************************************
 * COMPONENT NAME: Full-Width Product Display Shelf — REMOVED (২০২৬-০৮-১০)
 * Purpose: এই ৬টা গোলাকার Dummy Decorative Circle (Hardcoded
 *          Static Image, কোনো WordPress/WooCommerce Data না)
 *          ব্যবহারকারীর স্পষ্ট নির্দেশে সম্পূর্ণ সরানো হয়েছে —
 *          প্রতিস্থাপিত হয়েছে template-parts/home/02b-category-drawer.php
 *          দিয়ে (Real Product Category Data, Dynamic, কোনো Dummy
 *          Image নেই)। পুরনো HTML template-parts/home/02-hero-banner.php
 *          থেকেও সরানো হয়েছে। assets/images/hero-decor/-এর ছবিগুলো
 *          এখন আর কোথাও ব্যবহার হয় না — নিরাপদে Delete করা যাবে
 *          (রাখা হয়েছে, কারণ Delete করলে অন্য কিছু ভাঙে না, কিন্তু
 *          এখন সম্পূর্ণ Unused)।
 *************************************************************/


.shahaz-hero-divider {
	height: 5px;
	/* ⚠️ Prompt 04: আগে 12px ছিল — ব্যবহারকারীর "সর্বোচ্চ ১-২px গ্যাপ"
	   নির্দেশ অনুযায়ী কমানো হয়েছে। Divider নিজেই (5px উচ্চতার
	   গ্র্যাডিয়েন্ট লাইন) সরানো হয়নি — এটা Part-01-এর প্রতিষ্ঠিত
	   ডিজাইন এলিমেন্ট (খালি সাদা জায়গা না, একটা ইচ্ছাকৃত ডেকোরেটিভ
	   "সিম"), শুধু তার চারপাশের margin-ই কমানো হয়েছে। */
	margin-top: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent 0%, var(--shahaz-hero-gold) 25%, var(--shahaz-hero-magenta) 50%, var(--shahaz-hero-gold) 75%, transparent 100%);
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}




/*************************************************************
 * COMPONENT NAME: MobileLayout (< 768px)
 * Purpose: ডেস্কটপ লেআউট ব্যবহার করা যাবে না — মোবাইলে ভিন্ন height/
 *          padding/gap/border-radius, Arrow নেই (শুধু Swipe), Dot
 *          6px।
 * CSS Dependency: assets/js/hero-banner.js (swipe gesture)
 * WooCommerce Dependency: None
 * Future AI Modification Notes: ⚠️ Right Hero-র মোবাইল-নির্দিষ্ট
 *          height স্পেসিফিকেশনে দেওয়া হয়নি (Pending Specification) —
 *          তাই মোবাইলে Right Hero আপাতত hidden রাখা হয়েছে, কোনো
 *          height অনুমান করা হয়নি। স্পষ্ট নির্দেশ পেলে এখানে যোগ
 *          করা হবে।
 *************************************************************/
@media (max-width: 767px) {
	/* ⚠️ Prompt 03.A: grid-template-columns/grid-column/display:none
	   এখানে আর নেই — আগে এই ব্লকে Right Hero হাইড করা হতো এবং গ্রিড
	   single-column-এ পরিণত হতো, যেটাই মূল সমস্যা ছিল ("Mobile-এ
	   শুধুমাত্র Banner দেখা যায়, Ads Column অদৃশ্য হয়ে যায়")। Height/
	   Border-radius এখন উপরে mobile-first বেস রুলেই সেট করা (আলাদা
	   media query লাগে না)। এই ব্লকে এখন শুধু Part-01-এর প্রতিষ্ঠিত
	   স্লাইডার-কসমেটিক (Arrow না, Dot ছোট) রাখা হয়েছে — এগুলো এই
	   Prompt-এর স্কোপের বাইরে (কোনো নতুন Design/Decoration না, শুধু
	   বিদ্যমান আচরণ বজায় রাখা)। */
	.shahaz-hero-arrow {
		display: none;
	}

	.shahaz-hero-dots {
		bottom: 10px;
	}

	.shahaz-hero-dot {
		width: 6px;
		height: 6px;
	}
}

/* ================================================================
 * PRIMARY HERO ADVERTISEMENT ROTATOR — Marketplace-grade serial ads
 * Scoped only to the Right Hero Advertisement Column.
 * ================================================================ */
.shahaz-hero-right-ads-rotator {
	position: relative;
	isolation: isolate;
	perspective: 1100px;
	overflow: hidden;
}

.shahaz-hero-right-track {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	perspective: 1100px;
}

.shahaz-hero-right-slide {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	text-decoration: none;
	color: inherit;
	z-index: 1;
	transform: translate3d(0, 115%, 0) rotateX(-10deg) scale(.96);
	transform-origin: 50% 100%;
	backface-visibility: hidden;
	will-change: transform, opacity;
	transition: transform 720ms cubic-bezier(.22,.75,.18,1), opacity 560ms ease, visibility 0s linear 720ms;
}

.shahaz-hero-right-slide.is-entering {
	opacity: 0;
	visibility: visible;
	z-index: 3;
	transform: translate3d(0, 115%, 0) rotateX(-10deg) scale(.96);
}

.shahaz-hero-right-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
	transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
	transition: transform 720ms cubic-bezier(.22,.75,.18,1), opacity 560ms ease;
}

.shahaz-hero-right-slide.is-exiting {
	opacity: 0;
	visibility: visible;
	pointer-events: none;
	z-index: 2;
	transform: translate3d(0, -12%, -70px) rotateX(7deg) scale(.985);
	transition: transform 650ms cubic-bezier(.55,.05,.8,.2), opacity 520ms ease;
}

.shahaz-hero-right-slide .shahaz-hero-right-img,
.shahaz-hero-right-slide .shahaz-hero-right-video-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.shahaz-hero-right-video-fallback {
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.shahaz-hero-right-slide.video-loading .shahaz-hero-video {
	z-index: 2;
	opacity: 0;
}
.shahaz-hero-right-slide:not(.video-loading):not(.video-error) .shahaz-hero-video {
	opacity: 1;
}
.shahaz-hero-right-slide.video-loading .shahaz-hero-right-video-fallback {
	opacity: 1;
	visibility: visible;
	transition: opacity 220ms ease;
}

.shahaz-hero-right-slide.video-error .shahaz-hero-video {
	opacity: 0;
	visibility: hidden;
}

.shahaz-hero-right-slide.video-error .shahaz-hero-right-video-fallback {
	opacity: 1;
	visibility: visible;
	transition: opacity 220ms ease;
}

.shahaz-hero-right-slide .shahaz-hero-right-badge {
	z-index: 4;
}

.shahaz-hero-right-ads-progress {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 10px;
	height: 2px;
	z-index: 7;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255,255,255,.24);
	pointer-events: none;
}

.shahaz-hero-right-ads-progress span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: rgba(244,227,161,.95);
	transform-origin: left center;
}

.shahaz-hero-right-ads-progress.is-running span {
	animation: shahaz-right-ad-progress linear forwards;
}

@keyframes shahaz-right-ad-progress {
	from { width: 0; }
	to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.shahaz-hero-right-slide,
	.shahaz-hero-right-slide.is-entering,
	.shahaz-hero-right-slide.is-active,
	.shahaz-hero-right-slide.is-exiting {
		transition: none;
		transform: none;
	}
	.shahaz-hero-right-ads-progress.is-running span {
		animation: none;
		width: 100%;
	}
}

/* SHAHAZ non-destructive banner crop rendering */
.shahaz-crop-controlled {
	transform: translate(var(--shahaz-crop-x, 0%), var(--shahaz-crop-y, 0%)) scale(var(--shahaz-crop-zoom, 1));
	transform-origin: center center;
}
.shahaz-hero-left:hover .shahaz-crop-controlled {
	transform: translate(var(--shahaz-crop-x, 0%), var(--shahaz-crop-y, 0%)) scale(calc(var(--shahaz-crop-zoom, 1) * 1.03));
}
.shahaz-hero-right-has-campaign:hover .shahaz-crop-controlled {
	transform: translate(var(--shahaz-crop-x, 0%), var(--shahaz-crop-y, 0%)) scale(calc(var(--shahaz-crop-zoom, 1) * 1.03));
}

/* Responsive crop values for the main left hero slider. */
.shahaz-crop-responsive {
	transform: translate(var(--shahaz-crop-desktop-x, 0%), var(--shahaz-crop-desktop-y, 0%)) scale(var(--shahaz-crop-desktop-zoom, 1));
}
.shahaz-hero-left:hover .shahaz-crop-responsive {
	transform: translate(var(--shahaz-crop-desktop-x, 0%), var(--shahaz-crop-desktop-y, 0%)) scale(calc(var(--shahaz-crop-desktop-zoom, 1) * 1.03));
}
@media (max-width: 767px) {
	.shahaz-crop-responsive {
		transform: translate(var(--shahaz-crop-mobile-x, 0%), var(--shahaz-crop-mobile-y, 0%)) scale(var(--shahaz-crop-mobile-zoom, 1));
	}
	.shahaz-hero-left:hover .shahaz-crop-responsive {
		transform: translate(var(--shahaz-crop-mobile-x, 0%), var(--shahaz-crop-mobile-y, 0%)) scale(calc(var(--shahaz-crop-mobile-zoom, 1) * 1.03));
	}
}

/* Responsive crop values for the main left hero slider. */
.shahaz-crop-responsive {
	transform: translate(var(--shahaz-crop-desktop-x, 0%), var(--shahaz-crop-desktop-y, 0%)) scale(var(--shahaz-crop-desktop-zoom, 1));
}
.shahaz-hero-left:hover .shahaz-crop-responsive {
	transform: translate(var(--shahaz-crop-desktop-x, 0%), var(--shahaz-crop-desktop-y, 0%)) scale(calc(var(--shahaz-crop-desktop-zoom, 1) * 1.03));
}
@media (max-width: 767px) {
	.shahaz-crop-responsive {
		transform: translate(var(--shahaz-crop-mobile-x, 0%), var(--shahaz-crop-mobile-y, 0%)) scale(var(--shahaz-crop-mobile-zoom, 1));
	}
	.shahaz-hero-left:hover .shahaz-crop-responsive {
		transform: translate(var(--shahaz-crop-mobile-x, 0%), var(--shahaz-crop-mobile-y, 0%)) scale(calc(var(--shahaz-crop-mobile-zoom, 1) * 1.03));
	}
}

/* SHAHAZ Homepage Video Sound Controller — non-destructive overlay control. */
.shahaz-video-sound-toggle {
	position: absolute;
	inset-inline-end: .75rem;
	inset-block-end: .75rem;
	z-index: 20;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: rgba(0,0,0,.62);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	backdrop-filter: blur(4px);
}
.shahaz-video-sound-toggle:hover,
.shahaz-video-sound-toggle:focus-visible {
	background: rgba(0,0,0,.8);
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.shahaz-video-sound-toggle.is-audible {
	background: rgba(0,0,0,.78);
}
@media (max-width: 767px) {
	.shahaz-video-sound-toggle {
		inset-inline-end: .5rem;
		inset-block-end: .5rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.shahaz-video-sound-toggle {
		transition: none;
	}
}

/* ZIP 92 — poster-aware video loading hardening.
 * Poster-backed slides may keep the poster visible until playback is ready.
 * Posterless videos are never CSS-hidden during loading, allowing the browser
 * to reveal its first decoded frame instead of leaving a permanent black card. */
.shahaz-hero-right-slide.video-loading:not(.has-video-poster) .shahaz-hero-video {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}
.shahaz-hero-right-slide.video-ready .shahaz-hero-video {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}