/* ==========================================================================
   SHAHAZ.COM — Signature Luxury Product Card CSS
   ফাইল: assets/css/signature-product-card.css
   ========================================================================== */




/*************************************************************
 * COMPONENT NAME: ProductGrid
 * Purpose: রেসপনসিভ গ্রিড — Mobile (320-480px) ঠিক ২ কলাম gap 8px,
 *          Tablet ৪ কলাম, Desktop (769px+) ঠিক ৬ কলাম, সব কার্ড
 *          সমান উচ্চতা।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: কলাম সংখ্যা বদলাতে শুধু
 *          grid-template-columns-এর repeat() সংখ্যা বদলান।
 *************************************************************/
.shahaz-p-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	/* Natural-height rule: grid rows may be influenced by the tallest card,
	   but shorter cards must never be stretched to that row height. */
	align-items: start;
}

@media (min-width: 481px) and (max-width: 768px) {
	.shahaz-p-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}
}

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

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




/*************************************************************
 * COMPONENT NAME: DenseProductGrid (২০২৬-০৮-১২ — শুধু Flash/Hot Sale)
 * Purpose: ব্যবহারকারীর নির্দেশে Flash Sale ও Hot Sale সেকশন এখন
 *          .shahaz-p-grid (Mobile 2/Tablet 4/Desktop 6 কলাম, সাইট-
 *          জুড়ে Featured Collection/Suggested/Recently Viewed-এও
 *          ব্যবহৃত) থেকে সম্পূর্ণ আলাদা, নিজস্ব ঘন Grid ব্যবহার করে —
 *          Mobile ও Tablet উভয়ে ৩ কলাম × ৫ রো (মোট ১৫টা), Desktop
 *          ৫ কলাম × ৫ রো (মোট ২৫টা)। এই ক্লাস .shahaz-p-grid-কে
 *          কোথাও Override করে না — সম্পূর্ণ নতুন, স্বাধীন সিলেক্টর,
 *          তাই অন্য কোনো সেকশনের Grid প্রভাবিত হয় না।
 * Duplicate-Prevention/CLS: 08-flash-sale.php ও 09-hot-sale.php
 *          সর্বোচ্চ ২৫টা প্রোডাক্ট একবারেই Fetch/Render করে (DOM-এ
 *          সবগুলো থাকে), এই CSS-ই nth-child দিয়ে Breakpoint অনুযায়ী
 *          অতিরিক্তগুলো Hide করে — ঠিক Category Section (07-categories.php)
 *          -এ ব্যবহৃত একই কৌশল, তাই Resize/Breakpoint বদলে কোনো নতুন
 *          Network Request বা Layout Shift হয় না।
 * Compact Card Overrides: ৩-কলাম Mobile-এ কার্ড অনেক সরু (~110-120px)
 *          হওয়ায় নিচে .shahaz-p-grid-dense স্কোপড সিলেক্টর দিয়ে Font-
 *          Size/Padding সংকুচিত করা হয়েছে এবং সবচেয়ে সরু Mobile-এ
 *          Best-Seller/Premium মিনি-ব্যাজ ও Sold-Count লুকানো হয়েছে
 *          (শুধু এই Dense Grid-এর ভেতরে — Signature Card Component
 *          নিজে/অন্য কোনো ব্যবহার অপরিবর্তিত)। Title/Price/Rating/
 *          Wishlist/Cart Button সবসময় দৃশ্যমান থাকে।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: কলাম/রো সংখ্যা বদলাতে
 *          grid-template-columns + নিচের nth-child ভ্যালু দুটোই একসাথে
 *          বদলাতে হবে (কলাম×রো = মোট দৃশ্যমান আইটেম)।
 *************************************************************/
.shahaz-p-grid-dense {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	align-items: start;
}

/* Mobile+Tablet: প্রথম ১৫টা (৫ রো × ৩ কলাম) দৃশ্যমান, বাকিগুলো হাইডেন */
.shahaz-p-grid-dense > .shahaz-p-card:nth-child(n + 16) {
	display: none;
}

@media (min-width: 1200px) {
	.shahaz-p-grid-dense {
		grid-template-columns: repeat(5, 1fr);
		gap: 12px;
	}
	/* Desktop: সবগুলো (সর্বোচ্চ ২৫টা, ৫ রো × ৫ কলাম) দৃশ্যমান */
	.shahaz-p-grid-dense > .shahaz-p-card:nth-child(n + 16) {
		display: flex;
	}
}

/* Compact Card Overrides — শুধু এই Dense Grid-এর ভেতরে, সাইটের অন্য
   কোথাও .shahaz-p-card ব্যবহারে কোনো প্রভাব নেই (স্কোপড সিলেক্টর) */
.shahaz-p-grid-dense .shahaz-p-card-info {
	padding: 4px;
	gap: 2px;
}
.shahaz-p-grid-dense .shahaz-p-title {
	font-size: 10px;
}
.shahaz-p-grid-dense .shahaz-p-price-current {
	font-size: 11px;
}
.shahaz-p-grid-dense .shahaz-p-price-old {
	font-size: 9px;
}
.shahaz-p-grid-dense .shahaz-p-price-discount {
	font-size: 8px;
	padding: 1px 4px;
}
.shahaz-p-grid-dense .shahaz-p-meta-row {
	font-size: 8px;
	gap: 4px;
}
.shahaz-p-grid-dense .shahaz-p-mini-badges,
.shahaz-p-grid-dense .shahaz-p-sold {
	/* সবচেয়ে সরু ৩-কলাম কার্ডে জায়গার অভাবে সংক্ষিপ্ত রাখা হলো —
	   Title/Price/Rating/Wishlist/Cart সবসময় দৃশ্যমান থাকে */
	display: none;
}
.shahaz-p-grid-dense button.shahaz-p-cart-btn.add_to_cart_button,
.shahaz-p-grid-dense button.shahaz-p-cart-btn.ajax_add_to_cart {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	max-width: 22px !important;
	right: 4px !important;
	bottom: 4px !important;
}
.shahaz-p-grid-dense .shahaz-p-cart-btn svg {
	width: 10px;
	height: 10px;
}

@media (min-width: 1200px) {
	/* Desktop-এ ৫ কলামেও প্রতিটা কার্ড .shahaz-p-grid (৬-কলাম)-এর
	   চেয়ে সামান্য চওড়া হয় বলে একটু বেশি জায়গা — Mini Badge/Sold
	   Count ফিরিয়ে আনা হলো, স্বাভাবিক আকারের কাছাকাছি */
	.shahaz-p-grid-dense .shahaz-p-card-info {
		padding: 8px;
		gap: 3px;
	}
	.shahaz-p-grid-dense .shahaz-p-title {
		font-size: 12px;
	}
	.shahaz-p-grid-dense .shahaz-p-price-current {
		font-size: 14px;
	}
	.shahaz-p-grid-dense .shahaz-p-mini-badges {
		display: flex;
	}
	.shahaz-p-grid-dense .shahaz-p-sold {
		display: inline;
	}
	.shahaz-p-grid-dense .shahaz-p-meta-row {
		font-size: 10px;
	}
	.shahaz-p-grid-dense button.shahaz-p-cart-btn.add_to_cart_button,
	.shahaz-p-grid-dense button.shahaz-p-cart-btn.ajax_add_to_cart {
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
		max-width: 28px !important;
		right: 6px !important;
		bottom: 6px !important;
	}
	.shahaz-p-grid-dense .shahaz-p-cart-btn svg {
		width: 13px;
		height: 13px;
	}
}




/*************************************************************
 * COMPONENT NAME: CardShell
 * Purpose: কার্ডের বাইরের শেল — 0.5px #EAEAEA প্রায়-অদৃশ্য বর্ডার,
 *          ভারী শ্যাডোর বদলে নরম লাক্সারি শ্যাডো, মডার্ন সফট কর্নার
 *          (heavy rounded না)। height 100% যাতে গ্রিডে সব কার্ড সমান।
 * CSS Dependency: shahaz-tokens.css-এর var(--shahaz-*)
 * WooCommerce Dependency: None
 * Future AI Modification Notes: বর্ডার রং/থিকনেস এখানে single-source —
 *          border শর্টহ্যান্ডে বদলালেই যথেষ্ট।
 *************************************************************/
.shahaz-p-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	min-width: 0;
	max-width: 100%;
	align-self: start;
	background: var(--shahaz-white);
	border: 0.5px solid #EAEAEA;
	border-radius: 12px;
	box-shadow: 0 4px 16px -6px rgba(107,15,85,0.14);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}

/* ---------- কর্নার-গ্লো — সবসময় হালকা উপস্থিত (dull/মরা না লাগার
   জন্য), হোভারে উজ্জ্বল হয়। ব্যবহারকারীর নির্দেশে গোল্ডের বদলে
   ম্যাজেন্টা টোন ব্যবহার করা হয়েছে (সব শ্যাডো/গ্লো ম্যাজেন্টা) ---------- */
.shahaz-p-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120px 90px at 100% 0%, rgba(194,24,91,0.22), transparent 70%);
	opacity: 0.35;
	pointer-events: none;
	transition: opacity 0.35s ease;
	z-index: 1;
}

/* ---------- গ্র্যাডিয়েন্ট বর্ডার (ম্যাজেন্টা→গোল্ড) — হোভার/টাচ
   করলে আস্তে আস্তে ভেসে ওঠে। CSS mask কৌশল দিয়ে শুধু বর্ডার-এরিয়াটুকু
   দেখায় (পুরো কার্ড ভরাট না), তাই কার্ডের ভেতরের কনটেন্ট প্রভাবিত হয়
   না। এই একই CSS ফাইলে থাকায় কার্ড যেখানেই ব্যবহার হয় (হোমপেজ, Shop
   পেজ, ক্যাটাগরি পেজ, সব সেকশন পেজ) — সবখানে স্বয়ংক্রিয়ভাবে একই
   এফেক্ট দেখাবে, আলাদা করে প্রতিটা পেজে বসাতে হবে না। ---------- */
.shahaz-p-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(135deg, var(--shahaz-magenta), var(--shahaz-gold));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	z-index: 2;
}

@media (hover: hover) {
	.shahaz-p-card:hover {
		transform: translateY(-4px);
		border-color: var(--shahaz-magenta);
		box-shadow: 0 16px 34px -10px rgba(194,24,91,0.4), 0 0 0 1.5px rgba(194,24,91,0.3), 0 0 20px -4px rgba(194,24,91,0.35);
	}
	.shahaz-p-card:hover::before {
		opacity: 0.7;
	}
	.shahaz-p-card:hover::after {
		opacity: 1;
	}
	.shahaz-p-card:hover .shahaz-p-card-img {
		transform: scale(1.05);
	}
	.shahaz-p-card:hover .shahaz-p-card-shine {
		animation: shahaz-p-card-shine-sweep 0.9s ease;
	}
}

/* মোবাইল/টাচ ডিভাইসে :hover কাজ করে না — তাই টাচ করলে (:active)
   একই গ্র্যাডিয়েন্ট বর্ডার এফেক্ট দেখানো হয়, যাতে সব ডিভাইসে
   একই অভিজ্ঞতা (ব্যবহারকারীর নির্দেশ: "সব প্রোডাক্ট কার্ডে hover ও
   border same হবে") */
.shahaz-p-card:active::after {
	opacity: 1;
}

.shahaz-p-card:active {
	transform: scale(0.98);
	box-shadow: 0 0 0 2px rgba(194,24,91,0.35), 0 4px 16px -6px rgba(194,24,91,0.14);
}

.shahaz-p-card:focus-within {
	outline: 2px solid var(--shahaz-gold);
	outline-offset: 2px;
}




/*************************************************************
 * COMPONENT NAME: CardMedia
 * Purpose: ছবি এরিয়া (~৭৫% উচ্চতা) — Skeleton Loading Animation,
 *          object-fit: cover (কোনো distortion/broken image নেই,
 *          Zero Layout Shift aspect-ratio দিয়ে)।
 * CSS Dependency: None
 * WooCommerce Dependency: WooCommerce থাম্বনেইল/placeholder ইমেজ URL
 * Future AI Modification Notes: aspect-ratio বদলালে ছবি এরিয়ার
 *          অনুপাত বদলাবে, স্কেলিটনও স্বয়ংক্রিয়ভাবে মানানসই থাকবে।
 *************************************************************/
.shahaz-p-card-media {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--shahaz-softpink);
	outline: none;
}

/* ⚠️ বাগ-প্রতিরোধ: ব্রাউজারের ডিফল্ট নীল ফোকাস-রিং (ছবির লিংকে ক্লিক/
   ট্যাব করলে দেখা যেত, স্ক্রিনশটে "কোণায় নীল বৃত্ত" হিসেবে ধরা পড়েছিল)
   সরিয়ে আমাদের নিজস্ব গোল্ড ফোকাস-রিং বসানো হয়েছে (Accessibility
   বজায় রেখে — কীবোর্ড ইউজাররা এখনো বুঝতে পারবেন কোন এলিমেন্ট ফোকাসড)। */
.shahaz-p-card-media:focus-visible {
	outline: 2px solid var(--shahaz-gold);
	outline-offset: -2px;
}

.shahaz-p-card-skeleton {
	width: 100%;
	height: 100%;
	background: linear-gradient(100deg, var(--shahaz-softpink) 30%, #fff 50%, var(--shahaz-softpink) 70%);
	background-size: 200% 100%;
	animation: shahaz-p-skeleton-shimmer 1.4s ease-in-out infinite;
}

.shahaz-p-card-skeleton.shahaz-p-loaded {
	animation: none;
	background: none;
}

.shahaz-p-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

/* ==========================================================================
 * PHASE 37 — SHARED LIVE PRODUCT PHOTO SLOT
 * Multiple real WooCommerce gallery photos share one visual slot. The
 * scheduler in signature-product-card.js controls all cards from one timer;
 * cards never change width/height and the entire slot remains one link.
 * ========================================================================== */
.shahaz-p-card-gallery {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
}

.shahaz-p-card-gallery .shahaz-p-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.045);
	filter: saturate(.98);
	transition: opacity .55s ease, transform .85s cubic-bezier(.2,.72,.2,1), filter .85s ease;
	will-change: opacity, transform, filter, clip-path;
}

.shahaz-p-card-gallery .shahaz-p-card-img.is-live-active {
	position: relative;
	opacity: 1;
	transform: scale(1);
	filter: none;
	z-index: 1;
}

.shahaz-p-card-gallery .shahaz-p-card-img.is-live-next {
	opacity: 1;
	z-index: 2;
}

/* Effect A — luminous focus: no left/right slide. */
.shahaz-p-card-gallery.is-effect-focus .is-live-active {
	animation: shahaz-live-exit-focus .85s ease both;
}
.shahaz-p-card-gallery.is-effect-focus .is-live-next {
	animation: shahaz-live-enter-focus .85s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes shahaz-live-exit-focus {
	0% { opacity: 1; transform: scale(1); filter: blur(0); }
	100% { opacity: 0; transform: scale(1.025); filter: blur(2px); }
}
@keyframes shahaz-live-enter-focus {
	0% { opacity: 0; transform: scale(1.075); filter: blur(4px) saturate(.8); }
	100% { opacity: 1; transform: scale(1); filter: blur(0) saturate(1); }
}

/* Effect B — iris reveal: the new image blooms from the centre. */
.shahaz-p-card-gallery.is-effect-iris .is-live-active {
	animation: shahaz-live-exit-iris .9s ease both;
}
.shahaz-p-card-gallery.is-effect-iris .is-live-next {
	clip-path: circle(0% at 50% 50%);
	animation: shahaz-live-enter-iris .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes shahaz-live-exit-iris {
	0% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(.985); }
}
@keyframes shahaz-live-enter-iris {
	0% { opacity: 1; clip-path: circle(0% at 50% 50%); transform: scale(1.035); }
	100% { opacity: 1; clip-path: circle(78% at 50% 50%); transform: scale(1); }
}

/* Effect C — soft vertical curtain, intentionally not a horizontal slide. */
.shahaz-p-card-gallery.is-effect-curtain .is-live-active {
	animation: shahaz-live-exit-curtain .8s ease both;
}
.shahaz-p-card-gallery.is-effect-curtain .is-live-next {
	clip-path: inset(100% 0 0 0);
	animation: shahaz-live-enter-curtain .9s cubic-bezier(.2,.72,.2,1) both;
}
@keyframes shahaz-live-exit-curtain {
	0% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(.99); }
}
@keyframes shahaz-live-enter-curtain {
	0% { opacity: 1; clip-path: inset(100% 0 0 0); transform: scale(1.02); }
	100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
}

/* Effect D — dreamy spotlight: subtle brightness pulse while changing. */
.shahaz-p-card-gallery.is-effect-spotlight .is-live-active {
	animation: shahaz-live-exit-spotlight .85s ease both;
}
.shahaz-p-card-gallery.is-effect-spotlight .is-live-next {
	animation: shahaz-live-enter-spotlight .85s cubic-bezier(.2,.72,.2,1) both;
}
@keyframes shahaz-live-exit-spotlight {
	0% { opacity: 1; transform: scale(1); filter: brightness(1); }
	100% { opacity: 0; transform: scale(1.015); filter: brightness(1.15) blur(1px); }
}
@keyframes shahaz-live-enter-spotlight {
	0% { opacity: 0; transform: scale(.965); filter: brightness(1.18) blur(1.5px); }
	100% { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
}

.shahaz-p-card-gallery.is-live-paused .shahaz-p-card-img {
	animation-play-state: paused !important;
}

@media (max-width: 560px) {
	.shahaz-p-card-gallery .shahaz-p-card-img {
		transition-duration: .48s, .72s, .72s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shahaz-p-card-gallery .shahaz-p-card-img {
		transition: none !important;
		animation: none !important;
	}
	.shahaz-p-card-gallery .shahaz-p-card-img.is-live-active {
		opacity: 1;
		clip-path: none;
	}
	.shahaz-p-card-gallery .shahaz-p-card-img:not(.is-live-active) {
		display: none;
	}
}

/* ---------- Shine Sweep — হোভারে ছবির উপর দিয়ে একটা আলোর রেখা বয়ে
   যায় (jomkalo/light-catching luxury ইফেক্ট), ডিফল্টে অদৃশ্য/স্ট্যাটিক ---------- */
.shahaz-p-card-shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
	background-size: 250% 250%;
	background-position: -100% -100%;
	/* ⚠️ বাগ-ফিক্স (২০২৬-০৮-১৩): এই একটা লাইনের অভাবেই ছবির বাম পাশে
	   নিচ থেকে উপর পর্যন্ত একটা স্থায়ী, ঝাপসা/অস্বচ্ছ সাদা পর্দা
	   (blur/haze) দেখাচ্ছিল — ডিসকাউন্ট ব্যাজ ছাড়া প্রোডাক্টেও।
	   কারণ: background-repeat-এর ডিফল্ট মান "repeat", এবং এই
	   গ্র্যাডিয়েন্ট Tile (250% আকারের) Container-এর (100%) চেয়ে বড়
	   হলেও Repeat চালু থাকায় ব্রাউজার Tile-টা চারদিকে বারবার বসিয়ে
	   দিচ্ছিল — ফলে "লুকানো" থাকার কথা ছিল এমন Resting Position
	   (-100% -100%)-এও আসলে গ্র্যাডিয়েন্টের একটা পুনরাবৃত্ত অংশ সবসময়
	   Container-এর ভেতরে (বাম পাশে) দেখা যাচ্ছিল — Hover ছাড়াই,
	   সবসময়, সব ডিভাইসে, সব প্রোডাক্টে। background-repeat: no-repeat
	   যোগ করায় এখন Resting/Default অবস্থায় Tile-টা সত্যিই সম্পূর্ণ
	   Off-Screen (আসলেই অদৃশ্য) থাকে — Hover-এ shahaz-p-card-shine-sweep
	   Keyframe Animation (-100% -100% → 200% 200%) অপরিবর্তিত থেকে
	   ঠিক আগের মতোই একবার Sweep করে যায়, শুধু এখন আর কোনো Repeat/
	   Ghost Tile অবশিষ্ট থাকে না। Layout/Size/Position/Animation-এর
	   আর কিছুই বদলানো হয়নি — শুধু এই একটা প্রোপার্টি যোগ হয়েছে। */
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 2;
}




/*************************************************************
 * COMPONENT NAME: DiscountBadge
 * Purpose: উপরে-বামে ডিসকাউন্ট ব্যাজ — Luxury Magenta Gradient +
 *          Luxury Gold Border + Gloss Shine Animation, ডিসকাউন্ট %
 *          WooCommerce সেল প্রাইস থেকে স্বয়ংক্রিয়ভাবে হিসাব করা
 *          (PHP-তে, দেখুন signature-product-card.php)।
 * CSS Dependency: var(--shahaz-gradient-magenta-gold)
 * WooCommerce Dependency: is_on_sale(), regular/sale price
 * Future AI Modification Notes: ব্যাজের ধরন (flash/hot/new/limited)
 *          অনুযায়ী আলাদা রং দিতে চাইলে .shahaz-p-badge-flash ইত্যাদি
 *          সিলেক্টরে override করুন।
 *************************************************************/
.shahaz-p-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var(--shahaz-gradient-festive);
	color: var(--shahaz-white);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 3px 7px;
	border-radius: 999px;
	border: 1px solid var(--shahaz-gold-light);
	box-shadow: 0 2px 8px rgba(194,24,91,0.4), 0 0 10px -2px rgba(255,20,147,0.5);
	overflow: hidden;
	z-index: 3;
	animation: shahaz-p-badge-pulse 2.4s ease-in-out infinite;
}

.shahaz-p-badge::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent);
	animation: shahaz-p-badge-gloss 2.6s ease-in-out infinite;
}

.shahaz-p-badge-pct {
	opacity: 0.9;
}

/* ⚠️ Component 03 (Wishlist) Part-03: Smart Product Badge রং —
   বিদ্যমান .shahaz-p-badge-এর উপরে override, কোনো নতুন structure না */
.shahaz-p-badge-out-of-stock {
	background: linear-gradient(135deg, #6B6B6B, #3D3D3D);
	border-color: rgba(255,255,255,0.4);
	animation: none;
}
.shahaz-p-badge-out-of-stock::after { display: none; }

.shahaz-p-badge-low-stock {
	background: linear-gradient(135deg, #FF7A45, #D9480F);
}

.shahaz-p-badge-price-drop {
	background: linear-gradient(135deg, #2E9E5B, #1E7A3E);
}

@media (min-width: 769px) {
	.shahaz-p-badge {
		font-size: 10px;
		padding: 4px 8px;
	}
}




/*************************************************************
 * COMPONENT NAME: WishlistButton
 * Purpose: উপরে-ডানে হার্ট আইকন — উইশলিস্ট প্লাগইন থাকলে সেটার
 *          মার্কআপ (filter দিয়ে), নাহলে localStorage-ভিত্তিক ডিফল্ট
 *          বাটন। Soft Scale Animation + Gold Hover।
 * CSS Dependency: None
 * WooCommerce Dependency: None সরাসরি — শুধু product_id
 * Future AI Modification Notes: কোনো wishlist প্লাগইনের নিজস্ব CSS
 *          ক্লাস থাকলে .shahaz-p-wishlist এর সাথে সহাবস্থান করাতে
 *          এই ব্লকের নিচে অতিরিক্ত override যোগ করুন।
 *************************************************************/
button.shahaz-p-wishlist {
	position: absolute !important;
	top: 5px !important;
	right: 5px !important;
	left: auto !important;
	bottom: auto !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: rgba(255,255,255,0.9) !important;
	backdrop-filter: blur(4px);
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--shahaz-magenta) !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
	z-index: 2;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
}

.shahaz-p-wishlist svg {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
}

.shahaz-p-wishlist:hover {
	color: var(--shahaz-gold-deep) !important;
	transform: scale(1.12);
}

.shahaz-p-wishlist:focus-visible {
	outline: 2px solid var(--shahaz-gold);
	outline-offset: 2px;
}

.shahaz-p-wishlist.shahaz-p-wishlist-active {
	background: var(--shahaz-gradient-magenta-gold) !important;
	color: var(--shahaz-white) !important;
	animation: shahaz-p-wishlist-pop 0.35s ease;
	box-shadow: 0 3px 12px rgba(194,24,91,0.34), 0 0 10px rgba(212,175,55,0.20);
}

.shahaz-p-wishlist.shahaz-p-wishlist-pending {
	cursor: wait !important;
	transform: scale(0.94);
	box-shadow: 0 0 0 2px rgba(212,175,55,0.18), 0 4px 14px rgba(194,24,91,0.22);
	opacity: 0.88;
}

.shahaz-p-wishlist:active {
	transform: scale(0.85);
}

@media (min-width: 769px) {
	button.shahaz-p-wishlist {
		width: 30px !important;
		height: 30px !important;
	}
	.shahaz-p-wishlist svg {
		width: 16px;
		height: 16px;
	}
}




/*************************************************************
 * COMPONENT NAME: FlashCountdown
 * Purpose: ফ্ল্যাশ সেল কার্ডে ছবির নিচের দিকে লাইভ কাউন্টডাউন।
 * CSS Dependency: None
 * WooCommerce Dependency: _sale_price_dates_to postmeta (PHP সাইডে)
 * Future AI Modification Notes: signature-product-card.js প্রতি
 *          সেকেন্ডে data-end থেকে টেক্সট আপডেট করে।
 *************************************************************/
.shahaz-p-countdown {
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 6px;
	background: rgba(13,13,13,0.72);
	backdrop-filter: blur(3px);
	color: var(--shahaz-gold-light);
	font-size: 9px;
	font-weight: 700;
	text-align: center;
	padding: 3px 6px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	z-index: 2;
}




/*************************************************************
 * COMPONENT NAME: CardInfo
 * Purpose: তথ্য এরিয়া (~২৫%) — টাইটেল (২ লাইনে ellipsis), প্রাইস,
 *          রেটিং, সোল্ড কাউন্ট, স্টক বার — সবকিছু কমপ্যাক্ট, কোনো
 *          অহেতুক ফাঁকা জায়গা নেই।
 * CSS Dependency: None
 * WooCommerce Dependency: wc_price(), get_average_rating(), total_sales
 * Future AI Modification Notes: নতুন তথ্য (যেমন Vendor Name) যোগ
 *          করতে এই ব্লকের নিচে নতুন .shahaz-p-* ক্লাস যোগ করুন।
 *************************************************************/
.shahaz-p-card-info {
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.shahaz-p-mini-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.shahaz-p-mini-badge {
	font-size: 8px;
	font-weight: 700;
	padding: 2px 5px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.shahaz-p-mini-badge-bestseller {
	background: rgba(212,175,55,0.15);
	color: var(--shahaz-gold-deep);
}

.shahaz-p-mini-badge-premium {
	background: rgba(194,24,91,0.1);
	color: var(--shahaz-magenta);
}

.shahaz-p-title {
	/* ব্যবহারকারীর নির্দেশে: Single Line (আগে ২ লাইন ছিল) */
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	line-height: 1.35;
	font-weight: 800;
	/* Product title is intentionally neutral/black so WooCommerce/theme
	   accent colors do not leak into the shared product-card title.
	   Layout, spacing and typography size remain unchanged. */
	color: var(--shahaz-black, #0D0D0D);
	text-decoration: none;
}

.shahaz-p-title:focus-visible {
	outline: 2px solid var(--shahaz-gold);
	outline-offset: 2px;
}

@media (min-width: 769px) {
	.shahaz-p-card-info {
		padding: 10px;
		gap: 4px;
	}
	.shahaz-p-title {
		font-size: 13px;
	}
}

.shahaz-p-price-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.shahaz-p-price-current {
	font-size: 13px;
	font-weight: 800;
	/* ⚠️ Phase 3B-7: magenta থেকে luxury red-এ বদলানো হলো (ব্যবহারকারীর
	   সরাসরি নির্দেশ — দাম এখন লাল, শিরোনাম ম্যাজেন্টা) */
	color: #c0392b;
}

.shahaz-p-price-old {
	font-size: 11px;
	color: var(--shahaz-price-old);
	text-decoration: line-through;
}

.shahaz-p-price-discount {
	font-size: 10px;
	font-weight: 800;
	color: var(--shahaz-gold-deep);
	background: linear-gradient(135deg, rgba(255,20,147,0.12), rgba(212,175,55,0.18));
	padding: 1px 6px;
	border-radius: 999px;
	white-space: nowrap;
}

@media (min-width: 769px) {
	.shahaz-p-price-current {
		font-size: 15px;
	}
}

.shahaz-p-meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	color: var(--shahaz-gray);
	flex-wrap: wrap;
}

.shahaz-p-rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	/* ⚠️ Phase 3B-7: --shahaz-star থেকে magenta-এ বদলানো হলো
	   (ব্যবহারকারীর সরাসরি নির্দেশ — সব প্রোডাক্ট কার্ডে রেটিং স্টার
	   এখন ম্যাজেন্টা) */
	color: #ff2d8f;
	font-weight: 700;
}

.shahaz-p-rating-count {
	color: var(--shahaz-gray);
	font-weight: 500;
}

.shahaz-p-sold {
	color: var(--shahaz-gray);
}




/*************************************************************
 * COMPONENT NAME: FlashSaleStockBar
 * Purpose: সেলে থাকা প্রোডাক্টে পাতলা প্রোগ্রেস বার — "৮০% বিক্রি"
 *          বা "মাত্র ২টা বাকি" জরুরি বার্তা, PHP-তে স্টক/সেল ডেটা
 *          থেকে ডাইনামিকভাবে হিসাব করা (দেখুন
 *          inc/shahaz-product-card.php-এর shahaz_get_stock_bar_data())।
 * CSS Dependency: None
 * WooCommerce Dependency: get_manage_stock(), get_stock_quantity(),
 *          total_sales postmeta
 * Future AI Modification Notes: বারের সর্বোচ্চ রং-থ্রেশহোল্ড
 *          (কমলা/লাল ওয়ার্নিং) দরকার হলে .shahaz-p-stock-bar-fill এ
 *          data-attribute ভিত্তিক কালার-ভ্যারিয়েন্ট যোগ করা যাবে।
 *************************************************************/
.shahaz-p-stock-bar-wrap {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 2px;
}

.shahaz-p-stock-bar-track {
	width: 100%;
	height: 3px;
	background: rgba(194,24,91,0.12);
	border-radius: 999px;
	overflow: hidden;
}

.shahaz-p-stock-bar-fill {
	height: 100%;
	background: var(--shahaz-magenta);
	border-radius: 999px;
	transition: width 0.4s ease;
}

.shahaz-p-stock-bar-label {
	font-size: 9px;
	font-weight: 700;
	color: var(--shahaz-magenta);
}




/*************************************************************
 * COMPONENT NAME: FloatingCartButton
 * Purpose: নিচে-ডানে ছোট আইকন-শুধু কার্ট বাটন (কোনো টেক্সট/বড় বাটন
 *          না) — Luxury Magenta + Gold Border + Soft Glow + Ripple
 *          Press Animation, WooCommerce AJAX Add-to-Cart কম্প্যাটিবল।
 * CSS Dependency: None
 * WooCommerce Dependency: .ajax_add_to_cart/.add_to_cart_button ক্লাস
 *          (WooCommerce কোর wc-add-to-cart.js এই ক্লাস চিনে)
 * Future AI Modification Notes: বাটনের সাইজ/পজিশন বদলাতে শুধু
 *          right/bottom/width/height ভ্যালু বদলান, JS-এ কিছু বদলানোর
 *          দরকার নেই (JS শুধু ভিজ্যুয়াল ফিডব্যাক দেয়)।
 *
 * ⚠️ গুরুত্বপূর্ণ: এই বাটনে WooCommerce-এর নিজস্ব `.add_to_cart_button`
 *          ক্লাস আছে (AJAX-এর জন্য প্রয়োজনীয়), কিন্তু Astra/WooCommerce-
 *          এর ডিফল্ট বাটন CSS (যেমন `.woocommerce a.button`) অনেক সময়
 *          বেশি স্পেসিফিসিটি/পরে-লোড হওয়ার কারণে আমাদের ছোট-গোল ডিজাইন
 *          ওভাররাইড করে বড় pill/oval বাটন বানিয়ে দেয়। তাই box-model ও
 *          পজিশনিং প্রোপার্টিতে `!important` + বাড়তি স্পেসিফিসিটি
 *          (button.shahaz-p-cart-btn.add_to_cart_button) ব্যবহার করে
 *          এই কনফ্লিক্ট স্থায়ীভাবে প্রতিরোধ করা হয়েছে।
 *************************************************************/
/*
 * WooCommerce appends a native ".added_to_cart.wc-forward" link after a
 * successful AJAX add-to-cart.  Keep WooCommerce's real cart link in the DOM
 * (the JS layer reads its href) but never expose WooCommerce's default blue
 * button/link styling inside SHAHAZ product cards.  The SHAHAZ glass toast
 * below is the only customer-facing success affordance.
 */
.shahaz-p-card .added_to_cart.wc-forward,
.shahaz-p-card a.added_to_cart {
	display: none !important;
}

/* Thin, translucent in-card success popup.  The product image/content remains
 * visible through the 50% white glass background. */
.shahaz-p-card-cart-toast {
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: calc(100% - 14px);
	min-height: 27px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
	border: 1px solid rgba(194, 24, 91, 0.20);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 5px 16px rgba(13, 13, 13, 0.10), inset 0 1px 0 rgba(255,255,255,0.38);
	color: var(--shahaz-magenta, #C2185B) !important;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 30;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	cursor: pointer;
	transform: translate(-50%, 125%) scale(0.94);
	transform-origin: center bottom;
	transition: opacity 0.22s ease, transform 0.34s cubic-bezier(.18,.88,.25,1.18), visibility 0s linear 0.34s;
	text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}

.shahaz-p-card-cart-toast.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0) scale(1);
	transition-delay: 0s;
}

.shahaz-p-card-cart-toast:focus-visible {
	outline: 2px solid var(--shahaz-gold, #D4AF37);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.shahaz-p-card-cart-toast {
		bottom: 6px;
		min-height: 26px;
		padding: 4px 8px;
		font-size: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shahaz-p-card-cart-toast {
		transition: none;
		transform: translate(-50%, 0);
	}
}

button.shahaz-p-cart-btn.add_to_cart_button,
button.shahaz-p-cart-btn.ajax_add_to_cart {
	position: absolute !important;
	right: 6px !important;
	bottom: 6px !important;
	left: auto !important;
	top: auto !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	max-width: 26px !important;
	border-radius: 50% !important;
	background: var(--shahaz-gradient-festive) !important;
	border: 1.5px solid var(--shahaz-gold-light) !important;
	color: var(--shahaz-white) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 4px 12px rgba(255,20,147,0.38), 0 0 0 0 rgba(194,24,91,0.3);
	transition: transform 0.2s ease, box-shadow 0.3s ease;
	z-index: 2;
	animation: shahaz-p-cart-btn-breathe 3s ease-in-out infinite;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-align: center;
	text-decoration: none !important;
	text-indent: 0 !important;
	white-space: nowrap;
}

.shahaz-p-cart-btn svg {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
}

.shahaz-p-cart-btn:hover {
	box-shadow: 0 6px 18px rgba(255,20,147,0.5), 0 0 16px 2px rgba(194,24,91,0.45);
	transform: translateY(-2px);
	animation-play-state: paused;
}

.shahaz-p-cart-btn:focus-visible {
	outline: 2px solid var(--shahaz-gold);
	outline-offset: 2px;
}

.shahaz-p-cart-btn:active,
.shahaz-p-cart-btn.shahaz-p-cart-btn-pressed {
	transform: scale(0.86);
}

.shahaz-p-cart-btn.shahaz-p-cart-btn-processing,
.shahaz-p-cart-btn.shahaz-p-cart-btn-added {
	background: linear-gradient(135deg, #FFF4A8 0%, #FFD84D 38%, #F4B400 72%, #D4AF37 100%) !important;
	border-color: #F4C542 !important;
	color: #4A3200 !important;
	box-shadow: 0 5px 16px rgba(212,175,55,0.45), 0 0 14px rgba(255,220,80,0.34);
}

.shahaz-p-cart-btn.shahaz-p-cart-btn-added {
	animation: shahaz-p-cart-success-glow 0.55s ease both;
}

@media (min-width: 769px) {
	button.shahaz-p-cart-btn.add_to_cart_button,
	button.shahaz-p-cart-btn.ajax_add_to_cart {
		right: 8px !important;
		bottom: 8px !important;
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		max-width: 32px !important;
	}
	.shahaz-p-cart-btn svg {
		width: 15px;
		height: 15px;
	}
}




/*************************************************************
 * COMPONENT NAME: Animations
 * Purpose: স্কেলিটন শিমার, ব্যাজ গ্লস শাইন, উইশলিস্ট পপ, কার্ট বাটন
 *          রিপল — সব কী-ফ্রেম এক জায়গায়।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: নতুন অ্যানিমেশন যোগ করলে এই ব্লকে
 *          রাখুন, কম্পোনেন্ট-নির্দিষ্ট ব্লকে না।
 *************************************************************/
@keyframes shahaz-p-skeleton-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@keyframes shahaz-p-badge-gloss {
	0%   { left: -60%; }
	100% { left: 130%; }
}

@keyframes shahaz-p-badge-pulse {
	0%, 100% { box-shadow: 0 2px 8px rgba(194,24,91,0.4), 0 0 10px -2px rgba(255,20,147,0.5); }
	50%      { box-shadow: 0 2px 10px rgba(194,24,91,0.55), 0 0 16px 1px rgba(255,20,147,0.6); }
}

@keyframes shahaz-p-cart-btn-breathe {
	0%, 100% { box-shadow: 0 4px 12px rgba(255,20,147,0.38), 0 0 0 0 rgba(194,24,91,0.3); }
	50%      { box-shadow: 0 4px 14px rgba(255,20,147,0.45), 0 0 8px 1px rgba(194,24,91,0.4); }
}

@keyframes shahaz-p-card-shine-sweep {
	0%   { background-position: -100% -100%; }
	100% { background-position: 200% 200%; }
}

@keyframes shahaz-p-cart-success-glow {
	0% { transform: scale(0.88); filter: brightness(1); }
	55% { transform: scale(1.08); filter: brightness(1.10); }
	100% { transform: scale(1); filter: brightness(1); }
}

@keyframes shahaz-p-wishlist-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.25); }
	100% { transform: scale(1); }
}

@keyframes shahaz-p-ripple {
	0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0.55); }
	100% { box-shadow: 0 0 0 14px rgba(212,175,55,0); }
}

.shahaz-p-cart-btn.shahaz-p-ripple-effect {
	animation: shahaz-p-ripple 0.6s ease-out;
}




/*************************************************************
 * COMPONENT NAME: SectionCountdown
 * Purpose: প্রোডাক্ট-রো সেকশনের হেডারে (Flash Sale) কাউন্টডাউন চিপ —
 *          কার্ড-লেভেল কাউন্টডাউন থেকে আলাদা, পুরো সেকশনের জন্য একটা।
 * CSS Dependency: None
 * WooCommerce Dependency: None (PHP থেকে timestamp আসে)
 * Future AI Modification Notes: template-parts/home/partials/
 *          product-row.php এই ক্লাস ব্যবহার করে।
 *************************************************************/
.shahaz-sec-countdown {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--shahaz-ink);
	color: var(--shahaz-gold-light);
	font-size: 11px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 999px;
	margin-top: 8px;
}

.shahaz-sec-countdown-label {
	opacity: 0.7;
	font-weight: 500;
}

.shahaz-sec-countdown-text {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
}




/*************************************************************
 * COMPONENT NAME: Responsive Fine-tuning
 * Purpose: খুব ছোট স্ক্রিনে (360px এর নিচে) কার্ড আরও কমপ্যাক্ট করা।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 * Future AI Modification Notes: নতুন ব্রেকপয়েন্ট দরকার হলে এখানে
 *          যোগ করুন, উপরের কম্পোনেন্ট ব্লকে না।
 *************************************************************/
@media (max-width: 360px) {
	.shahaz-p-grid {
		gap: 6px;
	}
	.shahaz-p-card-info {
		padding: 5px;
		gap: 2px;
	}
	.shahaz-p-title {
		font-size: 10.5px;
	}
	.shahaz-p-price-current {
		font-size: 12px;
	}
	.shahaz-p-meta-row {
		font-size: 9px;
		gap: 6px;
	}
}


/*************************************************************
 * COMPONENT NAME: Site-wide Wishlist Toast (Component 03 Part-04)
 * Purpose: হার্ট বাটনে ক্লিক করলে (যেকোনো পেজে — Homepage/Shop/
 *          Wishlist সব জায়গায়) Wishlist Item Limit-এর মতো
 *          Error বার্তা দেখানোর জন্য — আগে শুধু Rollback হতো,
 *          কোনো ব্যাখ্যা দেখাতো না।
 * CSS Dependency: None
 * WooCommerce Dependency: None
 *************************************************************/
.shahaz-wl-site-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(20px);
	background: rgba(43, 21, 32, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	border: 1px solid rgba(212,175,55,0.38);
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 9999;
	max-width: 90vw;
	text-align: center;
}
.shahaz-wl-site-toast-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
 * PHASE 60A — NATURAL CARD HEIGHT + OVERFLOW SAFETY
 * A shared product grid may calculate its row from the tallest product,
 * but each card keeps only its own natural content height. This prevents a
 * short product from becoming an artificially tall blank column. Long titles,
 * prices and media are also constrained to the card's own width.
 * ========================================================================== */
.shahaz-p-grid > .shahaz-p-card,
.shahaz-p-grid-dense > .shahaz-p-card,
.shahaz-shop-grid > .shahaz-p-card,
.shahaz-category-product-grid > .shahaz-p-card {
	align-self: start !important;
	height: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.shahaz-p-card > *,
.shahaz-p-card-media,
.shahaz-p-card-skeleton,
.shahaz-p-card-gallery,
.shahaz-p-card-info,
.shahaz-p-price-row,
.shahaz-p-meta-row {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* The shared card must not reserve artificial footer height. Page-specific
 * skins may add their own intentional minimums, but the base card stays
 * content-driven. */
.shahaz-p-card-info {
	min-height: 0;
}

/* ==========================================================================
 * PHASE 60 — REAL SHOP ARCHIVE CARD TREATMENT
 * Only .shahaz-shop-page is affected; homepage/other product rails retain
 * their existing Signature Card appearance.
 * ========================================================================== */
@media (max-width: 767px) {
\t.shahaz-shop-page .shahaz-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
\t.shahaz-shop-page .shahaz-p-card { border-radius: 10px; box-shadow: 0 4px 13px -7px rgba(107,15,85,.20); }
\t.shahaz-shop-page .shahaz-p-card-media { aspect-ratio: 1.35 / 1; }
\t.shahaz-shop-page .shahaz-p-card-info { position: relative; padding: 5px 5px 29px; gap: 2px; min-height: 78px; }
\t.shahaz-shop-page .shahaz-p-mini-badges { gap: 2px; min-height: 0; }
\t.shahaz-shop-page .shahaz-p-mini-badge { font-size: 6.5px; padding: 1px 4px; }
\t.shahaz-shop-page .shahaz-p-title { font-size: 10.5px; line-height: 1.2; font-weight: 750; }
\t.shahaz-shop-page .shahaz-p-price-row { align-items: center; gap: 4px; min-width: 0; flex-wrap: nowrap; }
\t.shahaz-shop-page .shahaz-p-price-current { font-size: 12px; line-height: 1; color: #ed155d; white-space: nowrap; }
\t.shahaz-shop-page .shahaz-p-price-old { font-size: 8.5px; white-space: nowrap; }
\t.shahaz-shop-page .shahaz-p-price-discount { position: relative; flex: 0 0 auto; min-width: 36px; height: 23px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px 5px; border-radius: 0; background: linear-gradient(160deg, #ffb20c 0%, #ff8a00 72%, #ff6d00 100%); color: #fff; font-size: 7.5px; font-weight: 900; line-height: 1; clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); box-shadow: 0 3px 6px rgba(255,122,0,.22); animation: shahaz-shop-discount-float 2.8s ease-in-out infinite; }
\t.shahaz-shop-page .shahaz-p-meta-row { gap: 5px; font-size: 8px; line-height: 1.1; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
\t.shahaz-shop-page .shahaz-p-rating svg { width: 9px; height: 9px; }
\t.shahaz-shop-page .shahaz-p-stock-bar-wrap { display: none; }
\t.shahaz-shop-page button.shahaz-p-cart-btn,
\t.shahaz-shop-page a.shahaz-p-cart-btn-link { position: absolute !important; left: 5px !important; right: 5px !important; bottom: 5px !important; top: auto !important; width: auto !important; max-width: none !important; height: 22px !important; min-height: 22px !important; min-width: 0 !important; border-radius: 5px !important; border: 1px solid rgba(255,255,255,.72) !important; background: linear-gradient(105deg, #ed155d 0%, #f80088 48%, #ff315d 100%) !important; color: #fff !important; box-shadow: 0 4px 9px rgba(238,0,108,.28), inset 0 1px 0 rgba(255,255,255,.35) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 0 8px !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; text-decoration: none !important; transform: translateZ(0); animation: shahaz-shop-buy-pulse 3.2s ease-in-out infinite; }
\t.shahaz-shop-page .shahaz-p-cart-btn svg { width: 10px !important; height: 10px !important; flex: 0 0 auto; }
\t.shahaz-shop-page .shahaz-p-cart-label { display: inline-block; }
\t.shahaz-shop-page .shahaz-p-cart-btn:active { transform: translateY(2px) scale(.985) !important; box-shadow: 0 2px 5px rgba(238,0,108,.24), inset 0 2px 3px rgba(0,0,0,.10) !important; }
}

@keyframes shahaz-shop-discount-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1px) rotate(-1deg); } }
@keyframes shahaz-shop-buy-pulse { 0%, 100% { box-shadow: 0 4px 9px rgba(238,0,108,.25), inset 0 1px 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 6px 13px rgba(238,0,108,.36), 0 0 10px rgba(255,20,147,.13), inset 0 1px 0 rgba(255,255,255,.45); } }@media (max-width: 520px) {}

/* ==========================================================================
 * SHAHAZ Homepage Product Card Video
 * Additive only: image/gallery cards keep their existing rules.
 * ========================================================================== */
.shahaz-p-card-media--video { position: relative; }
.shahaz-p-card-media--video .shahaz-p-card-media-link { display: block; width: 100%; height: 100%; text-decoration: none; }
.shahaz-p-card-gallery--video { background: #000; }
.shahaz-p-card-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.shahaz-p-card-media--video .shahaz-video-sound-toggle { z-index: 8; }

/* ============================================================================
 * ZIP 91 — Mixed Product Media Stream
 * A configured Homepage product-card video and the real WooCommerce gallery
 * share one visual slot. Only the active media item is painted, which prevents
 * the inactive video element from becoming a black layer over the images.
 * ========================================================================== */
.shahaz-p-card-media--mixed .shahaz-p-card-gallery--media-stream {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--shahaz-softpink);
}
.shahaz-p-card-media--mixed .shahaz-p-card-media-item {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	display: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
}
.shahaz-p-card-media--mixed .shahaz-p-card-media-item.is-media-active {
	display: block;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}
.shahaz-p-card-media--mixed .shahaz-p-card-video {
	background: var(--shahaz-softpink);
}
.shahaz-p-card-media--mixed .shahaz-p-card-video.is-media-active {
	position: absolute;
}
.shahaz-p-card-media--mixed .shahaz-video-sound-toggle {
	z-index: 8;
}


/* ZIP 148 — media resilience: a JS delay must never turn the first real product image into a white slot. */
.shahaz-p-card-gallery.has-live-gallery .shahaz-p-card-img:first-child:not(.is-live-active){opacity:1;transform:scale(1);z-index:1}