/*!
 * ন্যাচারস বিডি — থিমের অতিরিক্ত স্টাইল।
 *
 * theme.css ফাইলটি Tailwind থেকে কম্পাইল করা, তাই সেটি হাতে বদলানো হয় না।
 * নতুন কম্পোনেন্টের (লোগো, হিরো স্লাইডার, পণ্যের ছবি) স্টাইলগুলো এখানে।
 */

/* ============================================================
 * লোগো — লাইট ও ডার্ক থিমে আলাদা ছবি
 * ============================================================ */

.nb-logo__img--light {
	display: none;
}

:root.theme-light .nb-logo__img--dark {
	display: none;
}

:root.theme-light .nb-logo__img--light {
	display: block;
}

/*
 * আপলোড করা লোগো — সম্পূর্ণ ছবি, কোনো ক্রপ ছাড়া।
 *
 * উচ্চতা অ্যাডমিনের দেওয়া মান, চওড়া ছবির অনুপাত অনুযায়ী নিজে থেকেই ঠিক হয়।
 * max-height: 100% থাকায় হেডারের সারির চেয়ে বড় মান দিলেও লোগো উপচে পড়ে না,
 * আর max-width ছোট স্ক্রিনে লোগোকে মেনুর উপর উঠে যেতে দেয় না।
 */

.nb-logo--free {
	display: inline-flex;
	align-items: center;
	height: var(--nb-logo-h, 48px);
	max-height: 100%;
	flex-shrink: 0;
}

.nb-logo--free img {
	display: block;
	height: 100%;
	width: auto;
	max-width: min(320px, 42vw);
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 640px) {
	.nb-logo--free {
		height: min(var(--nb-logo-h, 48px), 42px);
	}

	.nb-logo--free img {
		max-width: 46vw;
	}
}

/* ফুটারে লোগো ব্লক হিসেবে বসে, তাই সেখানে বেশি জায়গা দেওয়া যায়। */

.nb-site-footer .nb-logo--free img {
	max-width: min(280px, 70vw);
}

/* ============================================================
 * হিরো স্লাইডার
 * ============================================================ */

.nb-hero__slide {
	display: none;
}

.nb-hero__slide.is-active {
	display: grid;
	animation: nb-hero-slide-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes nb-hero-slide-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.nb-hero__dot {
	min-height: 10px;
	cursor: pointer;
	border: 0;
	padding: 0;
}

.nb-hero__arrow {
	cursor: pointer;
}

/* স্লাইডার টাচ-ড্র্যাগে যেন পেজ স্ক্রল আটকে না যায়। */
.nb-hero__track {
	touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {
	.nb-hero__slide.is-active {
		animation: none;
	}
}

/* ============================================================
 * পণ্যের ছবি — কার্ড ও পণ্যের পেজে সম্পূর্ণ ফ্রেম জুড়ে
 * ============================================================ */

.nb-product-media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.nb-product-media img {
	width: 100%;
	height: 100%;
	display: block;
}

/* পণ্যের পেজে হোভার জুম। */
.nb-zoom-frame {
	overflow: hidden;
}

.nb-zoom-frame img {
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.nb-zoom-frame.is-zooming img {
	transform: scale(1.9);
}

@media (prefers-reduced-motion: reduce) {
	.nb-zoom-frame img {
		transition: none;
	}

	.nb-zoom-frame.is-zooming img {
		transform: none;
	}
}

/* ============================================================
 * চেকআউট — জেলা খোঁজার বাক্স
 * ============================================================ */

.nb-area-search::-webkit-search-cancel-button {
	filter: invert(1);
	opacity: 0.5;
}

/* ============================================================
 * অর্ডার ট্র্যাকিং ব্যাজ (অর্ডার সফল পেজ)
 * ============================================================ */

.nb-track-badge {
	letter-spacing: 0.02em;
}