/* =============================================================================
   BagShop - main.css
   Phase 1: Header, Footer, Navigation, Mobile Menu
   Phase 2: Homepage Sections
   ============================================================================= */

/* =============================================================================
   TOP ANNOUNCEMENT BAR
   ============================================================================= */

.topbar {
	background: var(--gray-bg);
	color: var(--text-dark);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	padding-block: 7px;
	letter-spacing: 0.2px;
	overflow: hidden;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

/* topbar__items — the actual layout used in header.php */
.topbar__items {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	flex-wrap: nowrap;
	width: 100%;
}

.topbar__items span {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 16px;
	white-space: nowrap;
	color: rgba(0,0,0,0.75);
}

.topbar__items span + span {
	border-left: 1px solid rgba(0,0,0,0.12);
}

.topbar__left {
	color: rgba(0,0,0,0.8);
}

.topbar__right a {
	color: var(--accent-cyan);
	font-weight: var(--weight-semibold);
	transition: color var(--transition-fast);
}

.topbar__right a:hover {
	color: var(--text-dark);
}

@media (max-width: 768px) {
	.topbar__items {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.topbar__items::-webkit-scrollbar { display: none; }
	.topbar__items span {
		padding: 0 12px;
		font-size: 0.7rem;
	}
}

/* =============================================================================
   SITE HEADER
   ============================================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background-color: var(--white);
	box-shadow: var(--shadow-xs);
	transition: box-shadow var(--transition-base);
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-md);
}

.header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	height: var(--header-height);
}

/* ── Logo ── */
.header__logo {
	flex-shrink: 0;
}

.header__logo img {
	height: 48px;
	width: auto;
	display: block;
}

.header__logo-text {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--primary);
	text-decoration: none;
	letter-spacing: -0.5px;
}

.header__logo-text:hover {
	color: var(--accent-gold);
}

/* ── Primary Navigation ── */
.header__nav {
	flex: 1;
	display: none; /* shown at ≥1024px */
}

.nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
}

.nav__list > li {
	position: relative;
}

.nav__list > li > a {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-dark);
	border-radius: var(--radius-md);
	transition: color var(--transition-fast), background-color var(--transition-fast);
	white-space: nowrap;
}

.nav__list > li > a:hover,
.nav__list > li.current-menu-item > a,
.nav__list > li.current-menu-ancestor > a {
	color: var(--accent-gold);
	background-color: var(--accent-gold-light);
}

/* Dropdown */
.nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 200px;
	background-color: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border-light);
	padding: var(--space-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	list-style: none;
	z-index: var(--z-dropdown);
}

.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav__list .sub-menu a {
	display: block;
	padding: 9px var(--space-4);
	font-size: var(--text-sm);
	color: var(--text-medium);
	border-radius: var(--radius-md);
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav__list .sub-menu a:hover {
	color: var(--accent-gold);
	background-color: var(--accent-gold-light);
}

/* ── Header Actions ── */
.header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin-left: auto;
}

.header__action-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	color: var(--text-dark);
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.header__action-btn:hover {
	background-color: var(--light-bg);
	color: var(--accent-gold);
}

/* Cart & Wishlist count badges — SEO/CLS: position:absolute so badge appearing
   doesn't cause layout shift in the header */
.cart-count,
.wishlist-count {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	font-size: 10px;
	font-weight: var(--weight-bold);
	line-height: 18px;
	text-align: center;
	background-color: var(--accent-gold);
	color: var(--white);
	border-radius: var(--radius-full);
	border: 2px solid var(--white);
	/* will-change only on element that animates — none here */
}

.wishlist-count {
	background-color: var(--accent-cyan);
	color: var(--primary);
}

/* Hide zero counts */
.cart-count:empty,
.wishlist-count:empty,
.cart-count[data-count="0"],
.wishlist-count[data-count="0"] {
	display: none;
}

/* ── Hamburger (mobile) ── */
.header__hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px 8px;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: var(--radius-md);
	transition: background-color var(--transition-fast);
	order: -1; /* always first on mobile */
}

.header__hamburger:hover {
	background-color: var(--light-bg);
}

.hamburger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--text-dark);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-fast);
	transform-origin: center;
}

.header__hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.header__hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.header__hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── Header Search Bar (sliding) ── */
.header__search-bar {
	border-top: 1px solid var(--border-light);
	padding-block: var(--space-4);
	background-color: var(--white);
}

.header__search-bar[hidden] {
	display: none;
}

.header__search-bar .search-form {
	max-width: 560px;
	margin-inline: auto;
}

/* =============================================================================
   MOBILE OFF-CANVAS MENU
   ============================================================================= */

.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(5, 13, 24, 0.6);
	z-index: calc(var(--z-overlay) - 1);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-slow), visibility var(--transition-slow);
	backdrop-filter: blur(2px);
}

.mobile-menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: min(320px, 85vw);
	height: 100dvh;
	background-color: var(--white);
	z-index: var(--z-overlay);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform var(--transition-slow);
	overflow: hidden;
	box-shadow: var(--shadow-xl);
}

.mobile-menu.is-open {
	transform: translateX(0);
}

.mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--border-light);
	background-color: var(--primary);
}

.mobile-menu__title {
	font-family: var(--font-heading);
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	color: var(--white);
}

.mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--white);
	background: rgba(255,255,255,0.1);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.mobile-menu__close:hover {
	background: rgba(255,255,255,0.2);
}

.mobile-menu__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-4);
	-webkit-overflow-scrolling: touch;
}

.mobile-nav__list {
	list-style: none;
}

.mobile-nav__list li a {
	display: flex;
	align-items: center;
	padding: 13px var(--space-4);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--text-dark);
	border-radius: var(--radius-md);
	transition: color var(--transition-fast), background-color var(--transition-fast);
	border-bottom: 1px solid var(--border-light);
}

.mobile-nav__list li:last-child a {
	border-bottom: none;
}

.mobile-nav__list li a:hover,
.mobile-nav__list li.current-menu-item a {
	color: var(--accent-gold);
	background-color: var(--accent-gold-light);
}

/* Sub-menus inside mobile */
.mobile-nav__list .sub-menu {
	padding-left: var(--space-4);
	list-style: none;
}

.mobile-nav__list .sub-menu a {
	font-size: var(--text-sm);
	color: var(--text-medium);
	padding-block: 10px;
}

.mobile-menu__footer {
	padding: var(--space-5);
	border-top: 1px solid var(--border-light);
}

.mobile-menu__footer .btn {
	width: 100%;
	justify-content: center;
}

/* =============================================================================
   SEARCH FORM (Global)
   ============================================================================= */

.search-form__inner {
	display: flex;
	gap: 0;
}

.search-form__input {
	flex: 1;
	border-right: none;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.search-form__input:focus {
	z-index: 1;
}

.search-form__btn {
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding-inline: var(--space-4);
	min-height: 44px;
}

/* =============================================================================
   WHATSAPP FLOATING BUTTON
   ============================================================================= */

.whatsapp-float {
	position: fixed;
	bottom: calc(var(--space-16) + var(--space-4)); /* above mobile bottom nav */
	right: var(--space-4);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background-color: #25d366;
	color: var(--white);
	padding: 12px var(--space-4);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-lg);
	z-index: calc(var(--z-sticky) + 10);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.whatsapp-float:hover {
	transform: scale(1.06);
	box-shadow: var(--shadow-xl);
	color: var(--white);
}

.whatsapp-float__icon {
	display: flex;
	align-items: center;
}

.whatsapp-float__icon svg {
	width: 22px;
	height: 22px;
}

.whatsapp-float__label {
	display: none; /* shows on desktop */
}

/* =============================================================================
   SITE FOOTER
   ============================================================================= */

.site-footer {
	background-color: var(--gray-bg);
	color: rgba(0,0,0,0.72);
	margin-top: auto;
}

/* ── Footer Top ── */
.footer__top {
	padding-block: var(--space-12) var(--space-8);
}

.footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8) var(--space-6);
}

/* ── Brand Column ── */
.footer__col--brand {
	grid-column: 1 / -1; /* full width on mobile */
}

.footer__logo img {
	height: 44px;
	width: auto;
}

.footer__logo-text {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--text-dark);
}

.footer__tagline {
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: rgba(0,0,0,0.6);
}

/* ── Social Icons ── */
.footer__social {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-5);
	flex-wrap: wrap;
}

.footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: rgba(0,0,0,0.06);
	border-radius: var(--radius-full);
	color: rgba(0,0,0,0.65);
	transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.footer__social-link:hover {
	background-color: var(--accent-gold);
	color: var(--white);
	transform: translateY(-2px);
}

.footer__social-link svg {
	width: 18px;
	height: 18px;
}

/* ── Footer Column Titles ── */
.footer__col-title {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	color: var(--accent-gold);
	margin-bottom: var(--space-4);
	letter-spacing: 0.3px;
}

/* ── Footer Nav Lists ── */
.footer__nav-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.footer__nav-list a {
	font-size: var(--text-sm);
	color: rgba(0,0,0,0.65);
	transition: color var(--transition-fast), padding-left var(--transition-fast);
	display: inline-flex;
	align-items: center;
}

.footer__nav-list a::before {
	content: '\203A';
	margin-right: var(--space-2);
	color: var(--accent-gold);
	font-size: var(--text-md);
	line-height: 1;
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.footer__nav-list a:hover {
	color: var(--accent-gold);
	padding-left: var(--space-2);
}

.footer__nav-list a:hover::before {
	opacity: 1;
}

/* ── Contact List ── */
.footer__contact-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.footer__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--text-sm);
	color: rgba(0,0,0,0.65);
}

.footer__contact-list li svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--accent-gold);
}

.footer__contact-list a {
	color: rgba(0,0,0,0.65);
	transition: color var(--transition-fast);
}

.footer__contact-list a:hover {
	color: var(--accent-gold);
}

/* ── Payment Methods ── */
.footer__payments {
	background-color: rgba(0,0,0,0.03);
	padding-block: var(--space-4);
	border-top: 1px solid rgba(0,0,0,0.08);
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

.footer__payments-inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.footer__payments-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	color: rgba(0,0,0,0.55);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.footer__payments-icons {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.payment-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	border-radius: var(--radius-sm);
	letter-spacing: 0.3px;
}

.payment-badge--cod  { background: #2e7d32; color: #fff; }
.payment-badge--jazz { background: #ff0066; color: #fff; }
.payment-badge--easy { background: #6aba2f; color: #fff; }
.payment-badge--visa { background: #1a1f71; color: #fff; }
.payment-badge--mc   { background: #eb001b; color: #fff; }

/* ── Footer Bottom Bar ── */
.footer__bottom {
	padding-block: var(--space-5);
}

.footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.footer__copyright {
	font-size: var(--text-xs);
	color: rgba(0,0,0,0.5);
	margin: 0;
}

.footer__bottom-nav {
	display: flex;
	gap: var(--space-4);
	list-style: none;
	flex-wrap: wrap;
}

.footer__bottom-nav a {
	font-size: var(--text-xs);
	color: rgba(0,0,0,0.5);
	transition: color var(--transition-fast);
}

.footer__bottom-nav a:hover {
	color: var(--accent-gold);
}

/* =============================================================================
   MOBILE BOTTOM NAVIGATION BAR
   ============================================================================= */

.mobile-nav-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background-color: var(--white);
	border-top: 1px solid var(--border);
	display: flex;
	align-items: stretch;
	z-index: var(--z-sticky);
	box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}

.mobile-nav-bottom__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	font-size: 10px;
	font-weight: var(--weight-medium);
	color: var(--text-light);
	text-decoration: none;
	transition: color var(--transition-fast);
	padding-top: var(--space-1);
}

.mobile-nav-bottom__item svg {
	width: 22px;
	height: 22px;
}

.mobile-nav-bottom__item:hover,
.mobile-nav-bottom__item.is-active {
	color: var(--accent-gold);
}

.mobile-nav-bottom__icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-nav-bottom__badge {
	position: absolute;
	top: -5px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	font-size: 9px;
	font-weight: var(--weight-bold);
	line-height: 16px;
	text-align: center;
	background-color: var(--accent-gold);
	color: var(--white);
	border-radius: var(--radius-full);
	border: 2px solid var(--white);
}

/* Prevent content hiding behind mobile bottom nav */
.site-main {
	padding-bottom: 60px;
}

/* =============================================================================
   404 PAGE
   ============================================================================= */

.error-404 {
	max-width: 520px;
	margin-inline: auto;
	padding-block: var(--space-16);
}

.error-404__code {
	font-family: var(--font-heading);
	font-size: 120px;
	font-weight: var(--weight-extrabold);
	color: var(--accent-gold);
	line-height: 1;
	opacity: 0.15;
	margin-bottom: var(--space-4);
}

.error-404__title {
	font-size: var(--text-2xl);
	color: var(--primary);
	margin-bottom: var(--space-4);
}

.error-404__message {
	color: var(--text-medium);
	margin-bottom: var(--space-8);
}

.error-404__actions {
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--space-8);
}

.error-404__search {
	margin-top: var(--space-8);
}

.error-404__search p {
	margin-bottom: var(--space-3);
	color: var(--text-light);
	font-size: var(--text-sm);
}

/* =============================================================================
   ARCHIVE / BLOG LAYOUT
   ============================================================================= */

.archive-header {
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-6);
	border-bottom: 2px solid var(--border-light);
}

.archive-title {
	font-size: var(--text-2xl);
	color: var(--primary);
}

.archive-description {
	color: var(--text-medium);
	margin-top: var(--space-2);
}

.archive-layout,
.single-layout {
	display: grid;
	gap: var(--space-8);
}

.archive-layout.has-sidebar,
.single-layout.has-sidebar {
	grid-template-columns: 1fr; /* stacked on mobile */
}

.posts-grid {
	display: grid;
	gap: var(--space-6);
}

/* Pagination */
.bagshop-pagination {
	margin-top: var(--space-10);
	display: flex;
	justify-content: center;
}

.bagshop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: center;
}

.bagshop-pagination .page-numbers a,
.bagshop-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-medium);
	border: 1.5px solid var(--border);
	transition: all var(--transition-fast);
}

.bagshop-pagination .page-numbers a:hover {
	border-color: var(--accent-gold);
	color: var(--accent-gold);
	background-color: var(--accent-gold-light);
}

.bagshop-pagination .page-numbers.current {
	background-color: var(--accent-gold);
	border-color: var(--accent-gold);
	color: var(--white);
}

/* =============================================================================
   HERO SLIDER
   ============================================================================= */

.hero-section {
	overflow: hidden;
}

.hero-slider {
	position: relative;
	width: 100%;
	min-height: 480px;
	overflow: hidden;
}

.hero-slider__track {
	display: flex;
	transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	height: 100%;
}

.hero-slide {
	position: relative;
	min-width: 100%;
	min-height: 480px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Gradient background (default) */
.hero-slide__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

/* Image background */
.hero-slide__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.hero-slide__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 100%);
}

/* Decorative cyan circle */
.hero-slide__deco {
	position: absolute;
	top: -80px;
	right: -80px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(26, 26, 26, 0.12) 0%, transparent 70%);
	pointer-events: none;
}

/* Content */
.hero-slide__content {
	position: relative;
	z-index: 1;
	max-width: 560px;
	padding-block: var(--space-12);
}

.hero-slide__badge {
	margin-bottom: var(--space-4);
	font-size: var(--text-xs);
	letter-spacing: 1px;
}

.hero-slide__heading {
	font-family: var(--font-heading);
	font-size: clamp(28px, 5vw, 52px);
	font-weight: var(--weight-extrabold);
	color: var(--white);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-4);
}

.hero-slide__heading-accent {
	display: block;
	color: var(--accent-cyan);
}

.hero-slide__sub {
	font-size: var(--text-md);
	color: rgba(255,255,255,0.82);
	margin-bottom: var(--space-8);
	line-height: var(--leading-snug);
}

.hero-slide__actions {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
}

/* Controls */
.hero-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(255,255,255,0.15);
	border: 1.5px solid rgba(255,255,255,0.3);
	border-radius: var(--radius-full);
	color: var(--white);
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.hero-slider__arrow:hover {
	background: rgba(255,255,255,0.28);
}

.hero-slider__arrow--prev { left: var(--space-4); }
.hero-slider__arrow--next { right: var(--space-4); }

/* Dots */
.hero-slider__dots {
	position: absolute;
	bottom: var(--space-5);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--space-2);
	z-index: 10;
}

.hero-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background: rgba(255,255,255,0.4);
	border: none;
	cursor: pointer;
	transition: width var(--transition-base), background-color var(--transition-base);
	padding: 0;
}

.hero-slider__dot.is-active {
	width: 28px;
	background: var(--accent-gold);
}

/* =============================================================================
   TRUST BADGES
   ============================================================================= */

.trust-section {
	background-color: var(--gray-bg);
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--border-light);
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

.trust-badge {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background-color: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	border-left: 3px solid transparent;
	/* SEO/CWV: use only GPU-accelerated properties — no box-shadow animation */
	transition: transform var(--transition-base), opacity var(--transition-base);
}

.trust-badge:hover {
	/* SEO/CWV: transform is GPU-accelerated, avoids layout/paint costs */
	transform: translateY(-2px);
	opacity: 0.92;
}

.trust-badge--cyan  { border-left-color: var(--accent-cyan); }
.trust-badge--orange{ border-left-color: var(--accent-gold); }

.trust-badge__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.trust-badge--cyan  .trust-badge__icon { color: var(--accent-cyan);   }
.trust-badge--orange .trust-badge__icon{ color: var(--accent-gold);  }

.trust-badge__icon svg {
	width: 32px;
	height: 32px;
}

.trust-badge__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.trust-badge__title {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--text-dark);
}

.trust-badge__sub {
	font-size: var(--text-xs);
	color: var(--text-light);
}

/* =============================================================================
   CATEGORIES GRID
   ============================================================================= */

.categories-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

.category-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-xl);
	text-decoration: none;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	position: relative;
	overflow: hidden;
	min-height: 100px;
}

.category-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

/* Gradient variants */
.category-card--gradient-cyan {
	background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--primary-light) 100%);
	color: var(--primary);
}

.category-card--gradient-orange {
	background: linear-gradient(135deg, var(--accent-gold) 0%, #8b1a00 100%);
	color: var(--white);
}

.category-card--light {
	background: var(--white);
	border: 1.5px solid var(--border);
	color: var(--text-dark);
	box-shadow: var(--shadow-xs);
}

.category-card__icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.2);
	border-radius: var(--radius-lg);
}

.category-card--light .category-card__icon {
	background: var(--accent-cyan-light);
	color: var(--accent-cyan-dark);
}

.category-card--gradient-cyan .category-card__icon { background: rgba(0, 0, 0, 0.15); }
.category-card--gradient-orange .category-card__icon { background: rgba(255,255,255,0.2); }

.category-card__icon svg {
	width: 28px;
	height: 28px;
}

.category-card__body {
	flex: 1;
}

.category-card__name {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	margin-bottom: 2px;
}

.category-card--gradient-cyan .category-card__name { color: var(--primary); }
.category-card--gradient-orange .category-card__name { color: var(--white); }
.category-card--light .category-card__name { color: var(--text-dark); }

.category-card__count {
	font-size: var(--text-xs);
	opacity: 0.75;
}

.category-card__arrow {
	font-size: var(--text-lg);
	opacity: 0.6;
	transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.category-card:hover .category-card__arrow {
	opacity: 1;
	transform: translateX(4px);
}

/* =============================================================================
   PRODUCTS GRID
   ============================================================================= */

.products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

.product-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	/* SEO/CWV: only GPU-accelerated transform, not box-shadow animation */
	transition: transform var(--transition-base);
	display: flex;
	flex-direction: column;
}

.product-card:hover {
	transform: translateY(-3px);
}

/* Image wrap — SEO/CLS: aspect-ratio enforced to prevent layout shift */
.product-card__image-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #f0f2f5; /* lazy-load placeholder so CLS is zero before image loads */
	contain: layout paint; /* CSS containment reduces paint area */
}

.product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.product-card:hover .product-card__image {
	transform: scale(1.05);
}

/* Badges */
.product-card__badges {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

/* Wishlist button */
.product-card__wishlist {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	border: none;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	color: var(--text-light);
	transition: color var(--transition-fast), transform var(--transition-fast);
}

.product-card__wishlist:hover,
.product-card__wishlist.is-wishlisted {
	color: var(--danger);
}

.product-card__wishlist.is-wishlisted svg {
	fill: var(--danger);
}

.product-card__wishlist:active {
	transform: scale(0.88);
}

/* Quick Add to Cart */
.product-card__add-cart {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 12px;
	background: #1a1a1a;
	color: var(--white);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	border: none;
	cursor: pointer;
	transform: translateY(100%);
	transition: transform var(--transition-base), background-color var(--transition-fast);
}

.product-card:hover .product-card__add-cart {
	transform: translateY(0);
}

.product-card__add-cart:hover {
	background: #000000;
}

.product-card__add-cart.is-loading {
	pointer-events: none;
	opacity: 0.7;
}

/* Card body */
.product-card__body {
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
}

.product-card__title {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
}

.product-card__title a {
	color: var(--text-dark);
	text-decoration: none;
}

.product-card__title a:hover {
	color: var(--accent-gold);
}

/* SEO: rating stars must be visible — structured data visual support */
.product-card__rating {
	font-size: 13px; /* increased from 12px for readability */
	display: flex;
	align-items: center;
	gap: 3px;
	line-height: 1;
	min-height: 16px; /* reserve space even before rating loads — CLS prevention */
}

.product-card__price {
	margin-top: auto;
}

/* =============================================================================
   REPAIR SERVICE SECTION
   ============================================================================= */

.repair-section {
	position: relative;
	background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-dark) 100%);
	padding-block: var(--space-12);
	overflow: hidden;
}

.repair-section__deco {
	position: absolute;
	top: -40px;
	right: -40px;
	width: 300px;
	height: 300px;
	opacity: 0.08;
	color: var(--white);
}

.repair-section__deco svg {
	width: 100%;
	height: 100%;
}

.repair-section__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-10);
}

.repair-section__badge {
	margin-bottom: var(--space-4);
	display: inline-flex;
}

.repair-section__heading {
	font-family: var(--font-heading);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: var(--weight-extrabold);
	color: var(--white);
	margin-bottom: var(--space-4);
	line-height: var(--leading-tight);
}

.repair-section__desc {
	font-size: var(--text-md);
	color: rgba(255,255,255,0.88);
	margin-bottom: var(--space-6);
	line-height: var(--leading-normal);
}

/* Services list */
.repair-section__services {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
	list-style: none;
}

.repair-service-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--white);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
}

.repair-service-item__icon {
	font-size: var(--text-lg);
}

.repair-service-item__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: rgba(255,255,255,0.2);
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

/* CTA button */
.repair-section__btn {
	background: var(--white);
	color: var(--accent-gold);
	border-color: var(--white);
	margin-bottom: var(--space-4);
}

.repair-section__btn:hover {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

/* WhatsApp link */
.repair-section__wa {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: rgba(255,255,255,0.85);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}

.repair-section__wa:hover {
	color: var(--white);
}

/* Stats column */
.repair-section__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

.repair-stat {
	background: rgba(255,255,255,0.12);
	border-radius: var(--radius-xl);
	padding: var(--space-5);
	text-align: center;
	border: 1px solid rgba(255,255,255,0.15);
	backdrop-filter: blur(4px);
}

.repair-stat__num {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-extrabold);
	color: var(--white);
	margin-bottom: var(--space-1);
}

.repair-stat__label {
	font-size: var(--text-xs);
	color: rgba(255,255,255,0.75);
	font-weight: var(--weight-medium);
}

/* =============================================================================
   SPECIAL OFFERS / COUNTDOWN
   ============================================================================= */

.offers-section {
	background-color: var(--light-bg);
}

.offer-card {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	background: var(--primary);
	border-radius: var(--radius-2xl);
	padding: var(--space-6) var(--space-8);
	flex-wrap: wrap;
	box-shadow: var(--shadow-lg);
	position: relative;
	overflow: hidden;
}

/* Decorative glow */
.offer-card::before {
	content: '';
	position: absolute;
	top: -60px;
	left: -60px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(26, 26, 26, 0.15), transparent 70%);
	pointer-events: none;
}

.offer-card__discount {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 90px;
	padding: var(--space-4);
	background: var(--accent-cyan);
	border-radius: var(--radius-xl);
	flex-shrink: 0;
}

.offer-card__pct {
	font-family: var(--font-heading);
	font-size: 36px;
	font-weight: var(--weight-extrabold);
	color: var(--primary);
	line-height: 1;
}

.offer-card__off {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	color: var(--primary);
	letter-spacing: 1px;
}

.offer-card__body {
	flex: 1;
	min-width: 200px;
}

.offer-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--white);
	margin-bottom: var(--space-2);
}

.offer-card__sub {
	font-size: var(--text-sm);
	color: rgba(255,255,255,0.65);
	margin-bottom: var(--space-4);
}

/* Countdown */
.offer-card__countdown {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.countdown-label {
	font-size: var(--text-sm);
	color: rgba(255,255,255,0.65);
}

.countdown-units {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.countdown-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.countdown-num {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--accent-cyan);
	min-width: 40px;
	text-align: center;
	background: rgba(26, 26, 26, 0.1);
	border-radius: var(--radius-md);
	padding: 4px 8px;
	line-height: 1;
}

.countdown-unit-label {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: rgba(255,255,255,0.5);
}

.countdown-sep {
	font-size: var(--text-xl);
	color: var(--accent-cyan);
	font-weight: var(--weight-bold);
	line-height: 1;
	align-self: flex-start;
	margin-top: 4px;
}

.offer-card__cta {
	margin-left: auto;
	flex-shrink: 0;
}

/* =============================================================================
   CUSTOMER SATISFACTION
   ============================================================================= */

.satisfaction-section {
	background-color: var(--gray-bg);
}

/* Stats */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin-bottom: var(--space-12);
}

.stat-card {
	text-align: center;
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-6) var(--space-4);
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-base);
}

.stat-card:hover {
	transform: translateY(-3px);
}

.stat-card__num {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: var(--weight-extrabold);
	line-height: 1;
	margin-bottom: var(--space-2);
}

.stat-card__num--orange { color: var(--accent-gold); }
.stat-card__num--cyan   { color: var(--accent-cyan-dark); }

.stat-card__label {
	font-size: var(--text-sm);
	color: var(--text-light);
	font-weight: var(--weight-medium);
}

/* Testimonials */
.testimonials {
	position: relative;
	overflow: hidden;
}

.testimonials__track {
	display: flex;
	gap: var(--space-5);
	transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonial-card {
	flex: 0 0 100%;
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	box-shadow: var(--shadow-card);
	display: none;
}

.testimonial-card.is-active {
	display: block;
}

.testimonial-card__stars {
	margin-bottom: var(--space-4);
}

.testimonial-card__text {
	font-size: var(--text-md);
	color: var(--text-medium);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-6);
	font-style: italic;
}

.testimonial-card__text p {
	margin: 0;
}

.testimonial-card__author {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.testimonial-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background: linear-gradient(135deg, var(--accent-cyan), var(--primary-light));
	color: var(--white);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.testimonial-card__name {
	display: block;
	font-size: var(--text-base);
	color: var(--text-dark);
	font-weight: var(--weight-semibold);
}

.testimonial-card__city {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-xs);
	color: var(--text-light);
	margin-top: 2px;
}

/* Testimonial dots */
.testimonials__dots {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.testimonials__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background: var(--border);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: width var(--transition-base), background-color var(--transition-base);
}

.testimonials__dot.is-active {
	width: 28px;
	background: var(--accent-gold);
}

/* =============================================================================
   NEWSLETTER SECTION
   ============================================================================= */

.newsletter-section {
	background: var(--white);
	padding-block: var(--space-12);
	border-top: 1px solid var(--border-light);
}

.newsletter-inner {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	flex-wrap: wrap;
}

.newsletter-text {
	flex: 1;
	min-width: 240px;
}

.newsletter-title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	color: var(--primary);
	margin-bottom: var(--space-2);
}

.newsletter-sub {
	color: var(--text-light);
	font-size: var(--text-base);
	margin: 0;
}

.newsletter-form {
	flex: 1;
	min-width: 280px;
}

.newsletter-form__wrap {
	display: flex;
	gap: 0;
}

.newsletter-form__input {
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	border-right: none;
	flex: 1;
}

.newsletter-form__btn {
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	white-space: nowrap;
	flex-shrink: 0;
}

.newsletter-form__note {
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin-top: var(--space-3);
	margin-bottom: 0;
}

.newsletter-form__msg {
    margin-top: 10px;
    font-size: 0.85rem;
    padding: 8px 14px;
    border-radius: 6px;
}
.newsletter-form__msg--success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}
.newsletter-form__msg--error {
    background: #fff1f2;
    color: #9f1239;
    border: 1px solid #fda4af;
}

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */

.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    background: #1a1a1a;
    color: #fff;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}
.toast--visible {
    opacity: 1;
    transform: translateY(0);
}
.toast--success { background: #1a1a1a; color: #fff; }
.toast--error   { background: #9f1239; color: #fff; }
.toast--info    { background: #1a1a1a; color: #fff; }

/* =============================================================================
   PHASE 4 — ABOUT PAGE
   ============================================================================= */

.about-hero {
	background: linear-gradient(135deg, var(--primary) 0%, #333333 100%);
	padding-block: var(--space-20) var(--space-16);
	text-align: center;
	color: var(--white);
	position: relative;
	overflow: hidden;
}
.about-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 70% 50%, rgba(26, 26, 26, .12) 0%, transparent 70%);
	pointer-events: none;
}
.about-hero__content { position: relative; max-width: 680px; margin-inline: auto; }
.about-hero__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: var(--weight-bold);
	line-height: 1.15;
	margin-bottom: var(--space-4);
}
.about-hero__title span { color: var(--accent-cyan); display: block; }
.about-hero__desc { font-size: var(--text-lg); opacity: .85; line-height: 1.7; }

/* Brand Story */
.brand-story__inner {
	display: grid;
	gap: var(--space-12);
}
.brand-story__text p {
	color: var(--gray-600);
	line-height: 1.8;
	margin-bottom: var(--space-4);
}
.brand-story__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}
.about-stat {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	text-align: center;
	box-shadow: var(--shadow-sm);
}
.about-stat__num {
	display: block;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: var(--weight-bold);
	color: var(--accent-gold);
	line-height: 1;
	margin-bottom: var(--space-1);
}
.about-stat__label { font-size: var(--text-sm); color: var(--gray-600); font-weight: var(--weight-medium); }

/* MVV Grid */
.mvv-grid { display: grid; gap: var(--space-6); }
.mvv-card {
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	box-shadow: var(--shadow-md);
}
.mvv-card--mission { border-top: 4px solid var(--accent-gold); }
.mvv-card--vision  { border-top: 4px solid var(--accent-cyan); }
.mvv-card--values  { border-top: 4px solid var(--primary); }
.mvv-card__icon { font-size: 2.5rem; margin-bottom: var(--space-4); display: block; }
.mvv-card__title {
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	color: var(--primary);
	margin-bottom: var(--space-3);
}
.mvv-card p  { color: var(--gray-600); line-height: 1.7; }
.mvv-card ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.mvv-card li { color: var(--gray-700); font-size: var(--text-sm); }

/* Why MN Bags */
.about-why__grid { display: grid; gap: var(--space-4); }
.about-why-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-100);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.about-why-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.about-why-card__icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.about-why-card__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--primary); margin-bottom: var(--space-1); }
.about-why-card__desc  { font-size: var(--text-sm); color: var(--gray-600); line-height: 1.6; }

/* About CTA */
.about-cta {
	background: linear-gradient(135deg, var(--primary) 0%, #1a1a1a 100%);
	padding-block: var(--space-16);
	text-align: center;
	color: var(--white);
}
.about-cta__inner { max-width: 600px; margin-inline: auto; }
.about-cta h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.about-cta p  { font-size: var(--text-lg); opacity: .85; margin-bottom: var(--space-8); }

/* =============================================================================
   PHASE 4 — TRACK ORDER PAGE
   ============================================================================= */

.track-hero {
	background: linear-gradient(135deg, var(--primary) 0%, #333333 100%);
	padding-block: var(--space-16) var(--space-12);
	text-align: center;
	color: var(--white);
}
.track-hero__inner { max-width: 600px; margin-inline: auto; }
.track-hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: var(--weight-bold); margin-block: var(--space-3); }
.track-hero p  { opacity: .85; font-size: var(--text-lg); }

.track-layout { display: grid; gap: var(--space-8); }

/* Form Card */
.track-form-card {
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--gray-100);
}
.track-form-card__title {
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	color: var(--primary);
	margin-bottom: var(--space-6);
}
.form-hint { display: block; font-size: var(--text-xs); color: var(--gray-500); margin-top: var(--space-1); }

.track-error {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
}

.track-help {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid var(--gray-100);
	text-align: center;
}
.track-help p { font-size: var(--text-sm); color: var(--gray-500); margin-bottom: var(--space-3); }

/* Status Card */
.track-status-card {
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	box-shadow: var(--shadow-md);
	border-left: 4px solid var(--accent-cyan);
}
.track-status-card--cancelled { border-left-color: var(--danger); }
.track-status-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.track-status-card__label { display: block; font-size: var(--text-sm); color: var(--gray-500); margin-bottom: var(--space-1); }
.track-status-card__date  { text-align: right; font-size: var(--text-sm); color: var(--gray-600); }
.track-status-card__date strong { display: block; color: var(--primary); }

.track-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	background: #dbeafe;
	color: #1e40af;
}
.track-status-badge--completed   { background: #d1fae5; color: #065f46; }
.track-status-badge--cancelled,
.track-status-badge--refunded    { background: #fee2e2; color: #991b1b; }
.track-status-badge--processing  { background: #dbeafe; color: #1e40af; }
.track-status-badge--pending,
.track-status-badge--on-hold     { background: #fef3c7; color: #92400e; }

/* Timeline */
.track-timeline {
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-100);
	display: flex;
	flex-direction: column;
	gap: 0;
}
.track-step {
	display: grid;
	grid-template-columns: 40px 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--space-4);
	position: relative;
}
.track-step__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gray-100);
	color: var(--gray-400);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	font-weight: var(--weight-bold);
	flex-shrink: 0;
	grid-row: 1;
	grid-column: 1;
	z-index: 1;
	transition: background var(--transition-base), color var(--transition-base);
}
.track-step.is-done .track-step__icon  { background: var(--success); color: var(--white); }
.track-step.is-active .track-step__icon { background: var(--accent-gold); color: var(--white); box-shadow: 0 0 0 4px rgba(0, 0, 0, .15); }

.track-step__line {
	width: 2px;
	background: var(--gray-200);
	margin-inline: auto;
	height: 32px;
	grid-row: 2;
	grid-column: 1;
}
.track-step.is-done .track-step__line { background: var(--success); }

.track-step__content {
	grid-row: 1 / 3;
	grid-column: 2;
	padding-bottom: var(--space-4);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 40px;
}
.track-step__label { font-weight: var(--weight-semibold); color: var(--gray-400); font-size: var(--text-sm); }
.track-step.is-done .track-step__label,
.track-step.is-active .track-step__label { color: var(--primary); }
.track-step__desc { font-size: var(--text-xs); color: var(--gray-500); margin-top: 2px; }

/* Cancelled notice */
.track-cancelled-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	font-size: var(--text-sm);
	color: #991b1b;
}
.track-cancelled-notice strong { display: block; margin-bottom: 4px; }
.track-cancelled-notice p { margin: 0; }

/* Order Items */
.track-items {
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-100);
}
.track-items__title {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--primary);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--gray-100);
}
.track-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--gray-50);
}
.track-item:last-of-type { border-bottom: none; }
.track-item__img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--radius-md);
	border: 1px solid var(--gray-100);
	flex-shrink: 0;
}
.track-item__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gray-50);
	font-size: 1.5rem;
}
.track-item__info { flex: 1; }
.track-item__name { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--primary); }
.track-item__qty  { display: block; font-size: var(--text-xs); color: var(--gray-500); margin-top: 2px; }
.track-item__total { font-weight: var(--weight-semibold); color: var(--accent-gold); white-space: nowrap; }

.track-order-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-4);
	margin-top: var(--space-2);
	border-top: 2px solid var(--gray-100);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--primary);
}

/* Delivery address */
.track-address {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	border: 1px solid var(--gray-100);
}
.track-address__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-2); }
.track-address address { font-style: normal; font-size: var(--text-sm); color: var(--gray-700); line-height: 1.7; }

/* Actions */
.track-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Info cards (before search) */
.track-info-cards { display: grid; gap: var(--space-4); }
.track-info-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	text-align: center;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-100);
}
.track-info-card__icon { font-size: 2.5rem; display: block; margin-bottom: var(--space-3); }
.track-info-card h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--primary); margin-bottom: var(--space-2); }
.track-info-card p  { font-size: var(--text-sm); color: var(--gray-600); line-height: 1.6; }

/* =============================================================================
   PHASE 4 — CONTACT PAGE
   ============================================================================= */

.contact-hero {
	background: linear-gradient(135deg, var(--primary) 0%, #333333 100%);
	padding-block: var(--space-16) var(--space-12);
	text-align: center;
	color: var(--white);
}
.contact-hero__inner { max-width: 600px; margin-inline: auto; }
.contact-hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: var(--weight-bold); margin-block: var(--space-3); }
.contact-hero p  { opacity: .85; font-size: var(--text-lg); }

/* Channel Cards */
.contact-channels__grid { display: grid; gap: var(--space-4); }
.contact-channel-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-5) var(--space-6);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-100);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.contact-channel-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; color: inherit; }
.contact-channel-card__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--white);
}
.contact-channel-card--whatsapp .contact-channel-card__icon { background: #25d366; }
.contact-channel-card--phone    .contact-channel-card__icon { background: var(--accent-cyan); }
.contact-channel-card--email    .contact-channel-card__icon { background: var(--accent-gold); }
.contact-channel-card--location .contact-channel-card__icon { background: var(--primary); }
.contact-channel-card h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--primary); margin-bottom: 2px; }
.contact-channel-card p  { font-size: var(--text-xs); color: var(--gray-500); margin: 0; }
.contact-channel-card__value { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--gray-700); margin-top: 4px; }

/* Contact Grid */
.contact-grid { display: grid; gap: var(--space-10); }
.contact-form-wrap .section-title { margin-bottom: var(--space-6); }
.contact-form__row { display: grid; gap: var(--space-4); }
.contact-form__footer { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }

.contact-success {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	background: #d1fae5;
	border: 1px solid #6ee7b7;
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	color: #065f46;
	margin-bottom: var(--space-6);
}
.contact-success strong { display: block; margin-bottom: 4px; }

.contact-errors {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-4);
	color: #991b1b;
	font-size: var(--text-sm);
}
.contact-errors ul { list-style: disc; padding-left: var(--space-5); margin: 0; }
.contact-errors li { margin-bottom: 4px; }

/* Sidebar */
.contact-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-sidebar-card {
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-100);
}
.contact-sidebar-card h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--primary); margin-bottom: var(--space-4); }

.contact-hours { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.contact-hours li { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--gray-600); }
.contact-hours strong { color: var(--primary); }

.contact-socials { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-social-btn {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	border: 1px solid var(--gray-200);
	color: var(--gray-700);
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	transition: background var(--transition-base), color var(--transition-base);
}
.contact-social-btn:hover { background: var(--gray-50); color: var(--primary); }

.contact-faq-links { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.contact-faq-links a {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--gray-700);
	text-decoration: none;
	transition: background var(--transition-base), color var(--transition-base);
}
.contact-faq-links a:hover { background: var(--gray-50); color: var(--accent-gold); }

/* WhatsApp btn variant */
.btn-whatsapp {
	background: #25d366;
	color: var(--white);
	border: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.btn-whatsapp:hover { background: #20b858; color: var(--white); }

/* =============================================================================
   PHASE 4 — RESPONSIVE (768px+)
   ============================================================================= */

@media (min-width: 768px) {
	/* About */
	.brand-story__inner     { grid-template-columns: 1fr 1fr; }
	.brand-story__stats     { grid-template-columns: repeat(2, 1fr); }
	.mvv-grid               { grid-template-columns: repeat(3, 1fr); }
	.about-why__grid        { grid-template-columns: repeat(2, 1fr); }

	/* Track Order */
	.track-layout           { grid-template-columns: 380px 1fr; }
	.track-info-cards       { grid-template-columns: repeat(3, 1fr); }
	.track-form-wrap        { position: sticky; top: calc(var(--header-h, 72px) + var(--space-6)); align-self: start; }

	/* Contact */
	.contact-channels__grid { grid-template-columns: repeat(2, 1fr); }
	.contact-grid           { grid-template-columns: 1fr 340px; }
	.contact-form__row      { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	/* About */
	.about-why__grid        { grid-template-columns: repeat(3, 1fr); }
	.brand-story__stats     { grid-template-columns: repeat(4, 1fr); }

	/* Contact */
	.contact-channels__grid { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================================
   TOPI & TRENDING PRODUCT SECTIONS
   ============================================================================= */

/* Trending tabs */
.trending-tabs {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
	flex-wrap: wrap;
}

.trending-tab {
	padding: 8px 20px;
	border-radius: 999px;
	border: 2px solid var(--gray-200);
	background: var(--white);
	color: var(--gray-600);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	cursor: pointer;
	transition: all var(--transition-base);
	font-family: inherit;
}

.trending-tab:hover {
	border-color: var(--accent-cyan);
	color: var(--primary);
}

.trending-tab.is-active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

/* Smooth grid fade on tab switch */
.trending-grid {
	transition: opacity 200ms ease;
}

/* =============================================================================
   INNER PAGE HERO (shared across all inner pages)
   ============================================================================= */

.inner-page-hero {
	background: linear-gradient(135deg, var(--primary) 0%, #333333 100%);
	padding-block: var(--space-16) var(--space-12);
	text-align: center;
	color: var(--white);
}
.inner-page-hero--sm { padding-block: var(--space-10) var(--space-8); }
.inner-page-hero__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: var(--weight-bold);
	margin-block: var(--space-3);
	color: var(--white);
}
.inner-page-hero__title span { color: var(--accent-cyan); }
.inner-page-hero__sub { opacity: .85; font-size: var(--text-lg); margin: 0; }

/* =============================================================================
   WISHLIST PAGE
   ============================================================================= */

.wishlist-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-6);
	padding: var(--space-3) var(--space-4);
	background: var(--gray-50);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
}
.wishlist-toolbar__count { font-size: var(--text-sm); color: var(--gray-600); font-weight: var(--weight-medium); }
.wishlist-empty { text-align: center; padding: var(--space-16) var(--space-4); }
.wishlist-empty__icon { font-size: 5rem; display: block; margin-bottom: var(--space-4); }
.wishlist-empty h2 { font-size: var(--text-2xl); color: var(--primary); margin-bottom: var(--space-3); }
.wishlist-empty p  { color: var(--gray-600); margin-bottom: var(--space-6); }
.wishlist-loading  { grid-column: 1 / -1; text-align: center; padding: var(--space-12); color: var(--gray-500); }
.wishlist-product-wrap { position: relative; }
.wishlist-remove-btn {
	display: block; width: 100%; margin-top: var(--space-2);
	padding: var(--space-2); background: none;
	border: 1px solid var(--gray-200); border-radius: var(--radius-md);
	color: var(--danger); font-size: var(--text-xs); font-weight: var(--weight-medium);
	cursor: pointer; transition: background var(--transition-base); font-family: inherit;
}
.wishlist-remove-btn:hover { background: #fef2f2; }

/* =============================================================================
   FAQ PAGE
   ============================================================================= */

.faq-search-bar { background: var(--gray-50); padding-block: var(--space-6); border-bottom: 1px solid var(--gray-200); }
.faq-search-wrap { position: relative; max-width: 560px; margin-inline: auto; display: flex; align-items: center; }
.faq-search-wrap svg { position: absolute; left: var(--space-4); color: var(--gray-400); pointer-events: none; }
.faq-search-input {
	width: 100%; padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 28px);
	border: 2px solid var(--gray-200); border-radius: var(--radius-xl);
	font-size: var(--text-base); font-family: inherit; outline: none;
	transition: border-color var(--transition-base); background: var(--white);
}
.faq-search-input:focus { border-color: var(--accent-cyan); }
.faq-layout { display: grid; gap: var(--space-8); }
.faq-nav { display: flex; flex-direction: column; gap: 4px; }
.faq-nav__link {
	display: flex; align-items: center; gap: var(--space-2);
	padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
	color: var(--gray-700); text-decoration: none; font-size: var(--text-sm);
	font-weight: var(--weight-medium); transition: all var(--transition-base);
}
.faq-nav__link:hover, .faq-nav__link.is-active { background: var(--primary); color: var(--white); }
.faq-nav__cta { margin-top: var(--space-4); padding: var(--space-4); background: var(--gray-50); border-radius: var(--radius-lg); border: 1px solid var(--gray-200); text-align: center; }
.faq-nav__cta p { font-size: var(--text-sm); color: var(--gray-600); margin-bottom: var(--space-3); }
.faq-group { margin-bottom: var(--space-10); }
.faq-group__title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--primary); margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-3); }
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.faq-btn {
	width: 100%; display: flex; justify-content: space-between; align-items: center;
	padding: var(--space-4) var(--space-5); background: none; border: none;
	text-align: left; font-size: var(--text-base); font-weight: var(--weight-medium);
	color: var(--primary); cursor: pointer; gap: var(--space-4); font-family: inherit;
	transition: background var(--transition-base);
}
.faq-btn:hover, .faq-btn[aria-expanded="true"] { background: var(--gray-50); }
.faq-btn[aria-expanded="true"] .faq-btn__icon { transform: rotate(180deg); }
.faq-btn__icon { flex-shrink: 0; transition: transform var(--transition-base); color: var(--gray-400); }
.faq-answer { padding: 0 var(--space-5) var(--space-4); }
.faq-answer p { color: var(--gray-700); line-height: 1.7; margin: 0; font-size: var(--text-sm); }
.faq-no-results { text-align: center; padding: var(--space-12); color: var(--gray-500); }
.faq-no-results span { font-size: 3rem; display: block; margin-bottom: var(--space-3); }
.faq-cta {
	background: linear-gradient(135deg, var(--accent-gold) 0%, #000000 100%);
	padding-block: var(--space-14); text-align: center; color: var(--white);
}
.faq-cta__inner { max-width: 500px; margin-inline: auto; }
.faq-cta h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.faq-cta p  { opacity: .9; margin-bottom: var(--space-6); }
.faq-cta__btns { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.btn-outline-white {
	border: 2px solid rgba(255,255,255,.6); color: var(--white); background: transparent;
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
	font-weight: var(--weight-semibold); font-size: var(--text-base);
	cursor: pointer; transition: background var(--transition-base); text-decoration: none; font-family: inherit;
}
.btn-outline-white:hover { background: rgba(255,255,255,.15); color: var(--white); }

/* =============================================================================
   SHIPPING & RETURNS PAGE
   ============================================================================= */

.policy-layout { display: grid; gap: var(--space-8); }
.policy-nav { display: flex; flex-direction: column; gap: 4px; align-self: start; }
.policy-nav__link {
	display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
	color: var(--gray-700); text-decoration: none; font-size: var(--text-sm);
	font-weight: var(--weight-medium); border-left: 3px solid transparent; transition: all var(--transition-base);
}
.policy-nav__link:hover { background: var(--gray-50); border-left-color: var(--accent-gold); color: var(--primary); }
.policy-block { padding-bottom: var(--space-10); border-bottom: 1px solid var(--gray-100); margin-bottom: var(--space-2); }
.policy-block:last-child { border-bottom: none; }
.policy-block__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--primary); margin-bottom: var(--space-5); }
.policy-highlight-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.policy-highlight { display: flex; align-items: center; gap: var(--space-3); background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--space-4); border: 1px solid var(--gray-200); }
.policy-highlight__icon { font-size: 1.75rem; flex-shrink: 0; }
.policy-highlight strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--primary); }
.policy-highlight span  { font-size: var(--text-xs); color: var(--gray-600); }
.policy-text p  { color: var(--gray-700); line-height: 1.8; margin-bottom: var(--space-4); }
.policy-text h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--primary); margin: var(--space-5) 0 var(--space-3); }
.policy-text ul, .policy-text ol { padding-left: var(--space-5); display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.policy-text li { color: var(--gray-700); font-size: var(--text-sm); line-height: 1.6; }
.policy-table-wrap { overflow-x: auto; margin-block: var(--space-4); }
.policy-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.policy-table th { background: var(--primary); color: var(--white); padding: var(--space-3) var(--space-4); text-align: left; font-weight: var(--weight-semibold); }
.policy-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--gray-100); color: var(--gray-700); }
.policy-table tr:hover td { background: var(--gray-50); }
.policy-table__highlight td { background: #f0fdf4 !important; font-weight: var(--weight-medium); }
.policy-cities-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.policy-city { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 4px 12px; font-size: var(--text-sm); color: var(--gray-700); }
.policy-city--more { background: var(--primary); color: var(--white); border-color: var(--primary); }
.policy-badge-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.policy-badge { padding: 4px 14px; border-radius: 999px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.policy-badge--green { background: #d1fae5; color: #065f46; }
.policy-badge--blue  { background: #dbeafe; color: #1e40af; }
.policy-cta { margin-top: var(--space-6); padding: var(--space-5); background: var(--gray-50); border-radius: var(--radius-lg); text-align: center; }
.policy-cta p { font-size: var(--text-sm); color: var(--gray-600); margin-bottom: var(--space-3); }

/* =============================================================================
   THANK YOU PAGE
   ============================================================================= */

.thankyou-section { padding-block: var(--space-12) var(--space-16); background: var(--gray-bg); min-height: 70vh; }
.thankyou-card { max-width: 720px; margin-inline: auto; background: var(--white); border-radius: var(--radius-2xl); padding: var(--space-10); box-shadow: var(--shadow-xl); text-align: center; }
.thankyou-icon { margin-bottom: var(--space-6); }
.thankyou-icon__circle { animation: thankyou-circle .6s ease-out forwards; }
.thankyou-icon__check { stroke-dasharray: 50; stroke-dashoffset: 50; animation: thankyou-check .4s .5s ease-out forwards; }
@keyframes thankyou-circle { to { stroke-dashoffset: 0; } }
@keyframes thankyou-check  { to { stroke-dashoffset: 0; } }
.thankyou-title { font-size: clamp(1.5rem,3vw,2rem); font-weight: var(--weight-bold); color: var(--primary); margin-bottom: var(--space-3); }
.thankyou-sub   { color: var(--gray-600); line-height: 1.7; margin-bottom: var(--space-8); }
.thankyou-steps { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8); padding: var(--space-5); background: var(--gray-50); border-radius: var(--radius-xl); }
.thankyou-step { text-align: center; }
.thankyou-step__num { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-gold); color: var(--white); font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: var(--space-2); }
.thankyou-step strong { display: block; font-size: var(--text-sm); color: var(--primary); }
.thankyou-step span   { font-size: var(--text-xs); color: var(--gray-500); }
.thankyou-step__arrow { font-size: 1.5rem; color: var(--gray-300); }
.thankyou-cod-notice { display: flex; align-items: flex-start; gap: var(--space-3); background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--radius-lg); padding: var(--space-4); text-align: left; margin-bottom: var(--space-6); font-size: 1.5rem; }
.thankyou-cod-notice strong { display: block; color: #92400e; margin-bottom: 4px; }
.thankyou-cod-notice p { color: #78350f; font-size: var(--text-sm); margin: 0; }
.thankyou-order-summary { text-align: left; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: var(--space-5); margin-bottom: var(--space-6); }
.thankyou-order-summary h2 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--primary); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--gray-100); }
.thankyou-item { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--gray-50); }
.thankyou-item:last-of-type { border-bottom: none; }
.thankyou-item__img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--gray-100); flex-shrink: 0; }
.thankyou-item__info { flex: 1; text-align: left; }
.thankyou-item__info span { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--primary); }
.thankyou-item__info small { font-size: var(--text-xs); color: var(--gray-500); }
.thankyou-item__price { font-weight: var(--weight-semibold); color: var(--accent-gold); white-space: nowrap; }
.thankyou-total { display: flex; justify-content: space-between; padding-top: var(--space-3); margin-top: var(--space-2); border-top: 2px solid var(--gray-100); font-size: var(--text-base); color: var(--primary); }
.thankyou-address { text-align: left; margin-bottom: var(--space-6); padding: var(--space-4); background: var(--gray-50); border-radius: var(--radius-lg); }
.thankyou-address h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--gray-500); text-transform: uppercase; letter-spacing:.05em; margin-bottom: var(--space-2); }
.thankyou-address address { font-style: normal; font-size: var(--text-sm); color: var(--gray-700); line-height: 1.7; }
.thankyou-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-6); }

/* =============================================================================
   SEARCH RESULTS PAGE
   ============================================================================= */

.search-results-form { max-width: 560px; margin-inline: auto; margin-bottom: var(--space-10); }
.search-results-group { margin-bottom: var(--space-12); }
.search-results-group__title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--primary); margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-3); }
.search-results-more { display: inline-block; margin-top: var(--space-4); color: var(--accent-gold); font-weight: var(--weight-medium); font-size: var(--text-sm); text-decoration: none; }
.search-results-more:hover { text-decoration: underline; }
.search-results-list { display: grid; gap: var(--space-4); }
.search-result-item { display: flex; gap: var(--space-4); background: var(--white); border-radius: var(--radius-xl); padding: var(--space-4); border: 1px solid var(--gray-100); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base); }
.search-result-item:hover { box-shadow: var(--shadow-md); }
.search-result-item__thumb img { width: 100px; height: 80px; object-fit: cover; border-radius: var(--radius-md); }
.search-result-item__content { flex: 1; }
.search-result-item__type { font-size: var(--text-xs); color: var(--accent-cyan); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 4px; }
.search-result-item__title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.search-result-item__title a { color: var(--primary); text-decoration: none; }
.search-result-item__title a:hover { color: var(--accent-gold); }
.search-result-item__excerpt { font-size: var(--text-sm); color: var(--gray-600); margin-bottom: var(--space-2); line-height: 1.6; }
.search-result-item__link { font-size: var(--text-sm); color: var(--accent-gold); font-weight: var(--weight-medium); text-decoration: none; }
.search-no-results { text-align: center; padding: var(--space-16) var(--space-4); }
.search-no-results span { font-size: 4rem; display: block; margin-bottom: var(--space-4); }
.search-no-results h2 { font-size: var(--text-2xl); color: var(--primary); margin-bottom: var(--space-3); }
.search-no-results p  { color: var(--gray-600); margin-bottom: var(--space-4); }
.search-no-results__suggestions { text-align: left; display: inline-block; background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-4); }

/* =============================================================================
   RESPONSIVE — All New Pages
   ============================================================================= */

@media (min-width: 768px) {
	.faq-layout            { grid-template-columns: 220px 1fr; }
	.faq-nav               { position: sticky; top: calc(var(--header-h, 72px) + var(--space-6)); }
	.policy-layout         { grid-template-columns: 200px 1fr; }
	.policy-nav            { position: sticky; top: calc(var(--header-h, 72px) + var(--space-6)); }
	.policy-highlight-grid { grid-template-columns: repeat(4, 1fr); }
	.thankyou-steps        { flex-wrap: nowrap; }
}

/* =============================================================================
   CATEGORY MEGA MENU BAR — All Pages
   ============================================================================= */
.cat-bar { background: var(--gray-bg); border-bottom: 1px solid var(--border); position: relative; z-index: 900; }
.cat-bar__inner { max-width: 1320px; margin: 0 auto; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.cat-bar__inner::-webkit-scrollbar { display: none; }
.cat-bar__list { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.cat-bar__item { position: relative; flex-shrink: 0; }
.cat-bar__link { display: flex; align-items: center; gap: 4px; padding: 13px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: rgba(0,0,0,0.8); text-decoration: none; text-transform: uppercase; transition: background 0.18s, color 0.18s; border-bottom: 2px solid transparent; }
.cat-bar__link:hover, .cat-bar__item.is-open > .cat-bar__link { background: rgba(0,0,0,0.05); color: #000; border-bottom-color: #000000; }
.cat-bar__chevron { transition: transform 0.2s; margin-top: 1px; opacity: 0.7; }
.cat-bar__item.is-open .cat-bar__chevron { transform: rotate(180deg); opacity: 1; }
.cat-drop { position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid #e0e0e0; border-top: 3px solid #1a1a1a; box-shadow: 0 8px 32px rgba(0,0,0,0.14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 999; }
.cat-bar__item.is-open .cat-drop, .cat-bar__item:hover .cat-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.cat-drop__list { list-style: none; margin: 0; padding: 8px 0; }
.cat-drop__link { display: block; padding: 9px 20px; font-size: 13.5px; color: #1a1a1a; text-decoration: none; transition: background 0.15s, color 0.15s, padding-left 0.15s; }
.cat-drop__link:hover { background: #f0f4ff; color: #1a1a1a; padding-left: 26px; }
.cat-bar__item:last-child .cat-drop, .cat-bar__item:nth-last-child(2) .cat-drop { left: auto; right: 0; }

/* Mobile accordion */
.mob-cats { padding: 0 0 20px; }
.mob-cats__label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #888; padding: 14px 20px 6px; margin: 0; }
.mob-cat { border-bottom: 1px solid #f0f0f0; }
.mob-cat__row { display: flex; align-items: center; }
.mob-cat__name { flex: 1; display: block; padding: 13px 20px; font-size: 14.5px; font-weight: 600; color: #1a1a1a; text-decoration: none; }
.mob-cat__name:hover { color: #1a1a1a; }
.mob-cat__toggle { background: none; border: none; padding: 13px 16px; cursor: pointer; color: #555; display: flex; align-items: center; }
.mob-cat__toggle svg { transition: transform 0.25s; }
.mob-cat__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mob-cat__toggle[aria-expanded="true"] { color: #1a1a1a; }
.mob-cat__sub { list-style: none; margin: 0; padding: 0 0 6px; background: #fafafa; }
.mob-cat__sub li a { display: block; padding: 10px 20px 10px 36px; font-size: 13.5px; color: #555; text-decoration: none; border-bottom: 1px solid #f2f2f2; position: relative; }
.mob-cat__sub li a::before { content: '\2013'; position: absolute; left: 20px; color: #ccc; font-size: 11px; }
.mob-cat__sub li a:hover { color: #1a1a1a; background: #f0f4ff; }

@media (max-width: 768px) {
    .cat-bar { display: none; }
}

/* =============================================================================
   SAMSONITE-EXACT HEADER  (.snite-*)
   ============================================================================= */

/* Shell */
.snite-header {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow .22s;
}
.snite-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.10); }

/* Inner row */
.snite-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    height: 64px;
    display: flex;
    align-items: center;
}

/* Logo */
.snite-logo {
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 40px;
    display: flex;
    align-items: center;
}
.snite-logo img,
.snite-logo__img { height: 46px; width: auto; display: block; max-width: 200px; }
.snite-logo__text {
    font-size: 23px;
    font-weight: 900;
    color: #111;
    letter-spacing: -0.6px;
    font-style: italic;
    line-height: 1;
}

/* Nav — centered */
.snite-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 100%;
}
.snite-nav__list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0; padding: 0;
    height: 100%;
}
.snite-nav__item {
    position: relative;
    display: flex;
    align-items: stretch;
}
.snite-nav__link {
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .16s, border-color .16s;
    white-space: nowrap;
    cursor: pointer;
}
.snite-nav__link:hover,
.snite-nav__item:hover > .snite-nav__link {
    color: #000;
    border-bottom-color: #1a1a1a;
}
/* Sale link — orange */
.snite-nav__link--sale { color: #000000; }
.snite-nav__link--sale:hover { color: #1a1a1a; border-bottom-color: #000000; }

/* Dropdown */
.snite-nav__item .snite-drop__list {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: #fff;
    border-top: 2px solid #1a1a1a;
    box-shadow: 0 8px 28px rgba(0,0,0,.13);
    list-style: none;
    margin: 0; padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s, visibility .18s, transform .18s;
    transform: translateX(-50%) translateY(6px);
    z-index: 9999;
}
.snite-nav__item:hover .snite-drop__list,
.snite-nav__item:focus-within .snite-drop__list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Right-edge fix */
.snite-nav__item:nth-last-child(-n+2) .snite-drop__list {
    left: auto; right: 0;
    transform: none;
}
.snite-nav__item:nth-last-child(-n+2):hover .snite-drop__list {
    transform: none;
}
.snite-drop__link {
    display: block;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: background .13s, color .13s;
}
.snite-drop__link:hover { background: #f5f5f5; color: #000; }

/* Right action icons */
.snite-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 32px;
    flex-shrink: 0;
}
.snite-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    color: #1a1a1a;
    text-decoration: none;
    transition: background .15s;
}
.snite-btn:hover { background: #f2f2f2; }

/* Cart count badge */
.snite-cart-count {
    position: absolute;
    top: 3px; right: 2px;
    min-width: 17px; height: 17px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* Hamburger — mobile only */
.snite-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
}
.snite-hamburger span {
    display: block;
    width: 20px; height: 2px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.snite-hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.snite-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.snite-hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Search bar slide-down */
.snite-search-bar {
    border-top: 1px solid #eee;
    background: #fff;
    padding: 14px 28px;
}
.snite-search-bar__inner { max-width: 640px; margin: 0 auto; }
.snite-search-bar .search-form { display: flex; gap: 0; }
.snite-search-bar .search-field {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #ccc;
    border-right: none;
    font-size: 14px;
    outline: none;
    border-radius: 3px 0 0 3px;
}
.snite-search-bar .search-field:focus { border-color: #1a1a1a; }
.snite-search-bar .search-submit {
    padding: 10px 20px;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #1a1a1a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0 3px 3px 0;
    transition: background .15s;
}
.snite-search-bar .search-submit:hover { background: #333; }

/* Hide legacy .cat-bar */
.cat-bar { display: none !important; }
/* Hide legacy .header__inner if still in DOM */
.site-header .header__inner { display: none !important; }

/* ── Responsive ── */
@media (max-width: 1080px) {
    .snite-nav__link { padding: 0 13px; font-size: 11.5px; letter-spacing: .7px; }
}
@media (max-width: 900px) {
    .snite-nav__link { padding: 0 10px; font-size: 11px; }
    .snite-btn--desktop { display: none; }
}
@media (max-width: 768px) {
    .snite-nav         { display: none; }
    .snite-hamburger   { display: flex; }
    .snite-inner       { padding: 0 16px; height: 58px; }
    .snite-logo        { margin-right: auto; }
    .snite-logo__text  { font-size: 20px; }
    .snite-actions     { margin-left: 8px; gap: 0; }
    .snite-btn--desktop { display: none; }
}

/* Mobile accordion */
.mob-cats { padding: 0 0 20px; }
.mob-cats__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #999;
    padding: 14px 20px 6px;
    margin: 0;
}
.mob-cat { border-bottom: 1px solid #f0f0f0; }
.mob-cat__row { display: flex; align-items: center; }
.mob-cat__name {
    flex: 1;
    display: block;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
}
.mob-cat__toggle {
    background: none; border: none;
    padding: 12px 16px; cursor: pointer;
    color: #666; display: flex; align-items: center;
}
.mob-cat__toggle svg { transition: transform .22s; }
.mob-cat__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mob-cat__sub { list-style: none; margin: 0; padding: 4px 0 8px; background: #fafafa; }
.mob-cat__sub li a {
    display: block;
    padding: 9px 20px 9px 34px;
    font-size: 13.5px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #f2f2f2;
}
.mob-cat__sub li a:hover { color: #000; background: #f0f0f0; }

/* 3-item mega nav tweaks */
.snite-nav__list { gap: 8px; }
.snite-nav__link { padding: 0 28px; font-size: 13px; letter-spacing: 1.2px; }
.snite-nav__item .snite-drop__list { min-width: 210px; column-count: 1; }

@media (max-width: 900px) {
    .snite-nav__link { padding: 0 20px; }
}

/* =============================================================================
   MEGA MENU  — Professional Full-Width Dropdown
   ============================================================================= */

/* ── Trigger link ── */
.snite-nav__item.has-mega > .snite-nav__link {
    position: relative;
}

/* ── Full-width panel ── */
.mega-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    border-top: 3px solid #1a1a1a;
    box-shadow: 0 16px 48px rgba(0,0,0,0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 998;
}
/* position below header — calculated via JS */
.mega-panel { top: var(--mega-top, 112px); }

.snite-nav__item.has-mega:hover > .mega-panel,
.snite-nav__item.has-mega.is-open > .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-panel__inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 36px 28px 32px;
    display: flex;
    align-items: flex-start;
    gap: 0;
}

/* ── Category columns ── */
.mega-cols {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-right: 1px solid #eee;
    padding-right: 32px;
    margin-right: 32px;
}
.mega-col {
    padding: 0 20px;
    border-right: 1px solid #f0f0f0;
}
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child  { border-right: none; }

.mega-col__head {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.mega-col__list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.mega-col__link {
    display: block;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 500;
    color: #2a2a2a;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .14s, padding-left .14s;
    line-height: 1.4;
}
.mega-col__link:hover {
    color: #000;
    padding-left: 6px;
}
.mega-col__all {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #1a1a1a;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity .14s;
}
.mega-col__all:hover { opacity: .7; }

/* ── Promo panel (right side) ── */
.mega-promo {
    width: 220px;
    flex-shrink: 0;
    border-radius: 6px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
    justify-content: center;
}
.mega-promo__tag {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
}
.mega-promo__text {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin: 0;
}
.mega-promo__btn {
    display: inline-block;
    background: #fff;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: 3px;
    text-decoration: none;
    width: fit-content;
    transition: opacity .15s;
}
.mega-promo__btn:hover { opacity: .85; }

/* ── Backdrop overlay ── */
.mega-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 997;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s, visibility .22s;
}
.mega-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Chevron rotate ── */
.snite-nav__item.has-mega:hover .snite-chevron,
.snite-nav__item.has-mega.is-open .snite-chevron {
    transform: rotate(180deg);
}

/* ── Mobile: hide mega panel (uses accordion instead) ── */
@media (max-width: 768px) {
    .mega-panel   { display: none; }
    .mega-backdrop{ display: none; }
}

/* =============================================================================
   MEGA MENU EFFECT — Smooth professional fix
   ============================================================================= */

/* Smoother panel animation */
.mega-panel {
    transform: translateY(-4px);
    transition: opacity .28s cubic-bezier(.4,0,.2,1),
                transform .28s cubic-bezier(.4,0,.2,1),
                visibility .28s;
}
.snite-nav__item.has-mega:hover > .mega-panel,
.snite-nav__item.has-mega.is-open > .mega-panel {
    transform: translateY(0);
}

/* Backdrop smoother */
.mega-backdrop {
    transition: opacity .28s cubic-bezier(.4,0,.2,1), visibility .28s;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Nav link underline animation on hover */
.snite-nav__link {
    position: relative;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
.snite-nav__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    right: 50%;
    height: 2px;
    background: #1a1a1a;
    transition: left .22s cubic-bezier(.4,0,.2,1), right .22s cubic-bezier(.4,0,.2,1);
}
.snite-nav__link:hover::after,
.snite-nav__item:hover > .snite-nav__link::after {
    left: 0; right: 0;
}
.snite-nav__link--sale::after { background: #000000; }

/* Chevron smooth */
.snite-chevron {
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    opacity: .55;
}
.snite-nav__item.has-mega:hover .snite-chevron { transform: rotate(180deg); opacity: 1; }

/* Mega link hover — slide right */
.mega-col__link {
    transition: color .16s, padding-left .18s cubic-bezier(.4,0,.2,1);
}
.mega-col__link:hover { padding-left: 8px; color: #000; }

/* Promo btn hover */
.mega-promo__btn {
    transition: transform .16s, box-shadow .16s;
}
.mega-promo__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Mouse-leave delay — prevents flicker */
.snite-nav__item.has-mega { transition: none; }

/* ════════════════════════════════════════
   HOMEPAGE CATEGORIES SECTION
════════════════════════════════════════ */
.hp-cats-section { padding: 56px 0; background: #fff; }
.hp-cats-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; }
.hp-cats-title { font-size: 22px; font-weight: 800; color: #1a1a1a; margin: 0 0 4px; letter-spacing: -.3px; }
.hp-cats-sub { font-size: 14px; color: #888; margin: 0; }
.hp-cats-all { font-size: 13px; font-weight: 700; color: #1a1a1a; text-decoration: none; white-space: nowrap; }
.hp-cats-all:hover { color: #000000; }

.hp-cats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.hp-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px 16px;
    background: var(--cat-bg, #f8f9fc);
    border: 1.5px solid var(--cat-border, #e8ecf4);
    border-radius: 12px;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
    gap: 10px;
}
.hp-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    border-color: var(--cat-icon, #1a1a1a);
}

.hp-cat-card__icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    color: var(--cat-icon, #1a1a1a);
}
.hp-cat-card__icon svg { width: 32px; height: 32px; }

.hp-cat-card__img {
    width: 64px; height: 64px;
    border-radius: 8px; overflow: hidden;
}
.hp-cat-card__img img { width: 100%; height: 100%; object-fit: cover; }

.hp-cat-card__body { flex: 1; }
.hp-cat-card__name {
    display: block;
    font-size: 13px; font-weight: 700;
    color: #1a1a1a !important; margin-bottom: 3px;
    line-height: 1.3;
}
.hp-cat-card__count { display: block; font-size: 11px; color: #888; }
.hp-cat-card__arrow {
    position: absolute; top: 10px; right: 12px;
    font-size: 14px; color: var(--cat-icon, #1a1a1a);
    opacity: 0; transition: opacity .2s;
}
.hp-cat-card:hover .hp-cat-card__arrow { opacity: 1; }

@media (max-width: 1024px) { .hp-cats-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .hp-cats-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .hp-cats-title { font-size: 18px; } }
@media (max-width: 480px)  { .hp-cats-grid { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================================
   REPAIR SERVICE PAGE
   ============================================================================= */

/* Hero */
.repair-hero {
	background: var(--gray-bg);
	color: var(--text-dark);
	padding: 80px 0 60px;
	position: relative;
	overflow: hidden;
}
.repair-hero__deco {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse at 70% 50%, rgba(26, 26, 26, .06) 0%, transparent 60%);
}
.repair-hero__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 48px; flex-wrap: wrap;
}
.repair-hero__content { flex: 1; min-width: 280px; }
.repair-hero__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800; line-height: 1.15;
	margin-bottom: 16px;
}
.repair-hero__title span { display: block; color: #1a1a1a; }
.repair-hero__desc {
	color: rgba(0,0,0,.7);
	font-size: 1rem; line-height: 1.7;
	margin-bottom: 32px; max-width: 520px;
}
.repair-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.repair-hero__stats {
	display: grid; grid-template-columns: repeat(2,1fr);
	gap: 16px; min-width: 220px;
}
.repair-stat {
	background: rgba(0,0,0,.03);
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 12px;
	padding: 18px 16px;
	text-align: center;
}
.repair-stat__num {
	display: block; font-size: 1.6rem;
	font-weight: 800; color: #1a1a1a;
	line-height: 1;
}
.repair-stat__label {
	display: block; font-size: .75rem;
	color: rgba(0,0,0,.6);
	margin-top: 4px; font-weight: 500;
}

/* Why Us */
.why-us__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}
.why-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 28px 24px;
	text-align: center;
	transition: box-shadow .2s, transform .2s;
}
.why-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, .1); transform: translateY(-3px); }
.why-card__icon { font-size: 2.4rem; display: block; margin-bottom: 12px; line-height: 1; }
.why-card__title { font-size: 1rem; font-weight: 700; color: #000000; margin-bottom: 8px; }
.why-card__desc  { font-size: .875rem; color: #64748b; line-height: 1.6; margin: 0; }

/* Pricing Grid */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}
.pricing-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 20px;
	display: flex; align-items: center; gap: 16px;
	transition: box-shadow .2s;
}
.pricing-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, .08); }
.pricing-card__icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.pricing-card__body { flex: 1; }
.pricing-card__name { font-size: .95rem; font-weight: 700; color: #000000; margin-bottom: 4px; }
.pricing-card__desc { font-size: .8rem; color: #64748b; margin: 0; line-height: 1.5; }
.pricing-card__price { text-align: right; flex-shrink: 0; }
.pricing-card__range { display: block; font-size: .85rem; font-weight: 700; color: #000000; white-space: nowrap; margin-bottom: 8px; }
.repair-pricing__note {
	text-align: center; margin-top: 24px;
	font-size: .8rem; color: #94a3b8;
}

/* How It Works */
.steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px; position: relative;
}
.step-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 28px 20px 24px;
	text-align: center;
	position: relative;
	transition: box-shadow .2s;
}
.step-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, .09); }
.step-card__icon {
	width: 56px; height: 56px;
	background: linear-gradient(135deg, #e0f7ff, #b3efff);
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 12px;
	color: #0078a8;
}
.step-card__num {
	position: absolute; top: 14px; right: 16px;
	font-size: .7rem; font-weight: 800;
	color: #cbd5e1; letter-spacing: .05em;
}
.step-card__title { font-size: 1rem; font-weight: 700; color: #000000; margin-bottom: 8px; }
.step-card__desc  { font-size: .83rem; color: #64748b; line-height: 1.6; margin: 0; }
.step-card__arrow {
	display: none;
}

/* Booking Section */
.repair-booking__inner {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 40px;
	align-items: start;
}
.repair-booking__form-wrap { min-width: 0; }

/* Form Styles */
.repair-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
	font-size: .875rem; font-weight: 600;
	color: #000000;
}
.form-label .required { color: #ef4444; margin-left: 2px; }
.form-control {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid #d1d5db;
	border-radius: 8px;
	font-size: .9rem;
	color: #000000;
	font-family: inherit;
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
	outline: none;
}
.form-control:focus {
	border-color: #1a1a1a;
	box-shadow: 0 0 0 3px rgba(26, 26, 26, .12);
}
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 110px; }

/* File Upload */
.file-upload-area {
	border: 2px dashed #d1d5db;
	border-radius: 10px;
	transition: border-color .2s, background .2s;
}
.file-upload-area:hover { border-color: #1a1a1a; background: #f0fdff; }
.file-upload__input {
	position: absolute; width: 1px; height: 1px;
	opacity: 0; overflow: hidden;
}
.file-upload__label {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 8px; padding: 28px 20px;
	cursor: pointer; color: #64748b;
	font-size: .875rem; text-align: center;
}
.file-upload__label svg { color: #94a3b8; }
.file-upload__hint { font-size: .75rem; color: #94a3b8; }
.file-upload__preview {
	display: flex; flex-wrap: wrap; gap: 10px;
	padding: 0 16px 16px;
}

/* Submit Row */
.repair-form__submit {
	display: flex; align-items: center; gap: 20px;
	flex-wrap: wrap; margin-top: 24px;
}
.repair-form__wa-alt {
	font-size: .85rem; color: #1a1a1a;
	text-decoration: none; font-weight: 500;
}
.repair-form__wa-alt:hover { text-decoration: underline; }

/* Message box */
.repair-form__msg {
	margin-top: 16px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: .9rem;
	line-height: 1.5;
}
.repair-form__msg--success {
	background: #d1fae5;
	border: 1px solid #6ee7b7;
	color: #065f46;
}
.repair-form__msg--error {
	background: #fee2e2;
	border: 1px solid #fca5a5;
	color: #991b1b;
}

/* Contact Sidebar */
.repair-contact-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 20px;
}
.repair-contact-card__title {
	font-size: 1.05rem; font-weight: 700;
	color: #000000; margin-bottom: 16px;
}
.repair-contact-btn {
	display: flex; align-items: center; gap: 10px;
	width: 100%; padding: 12px 16px;
	border-radius: 10px; text-decoration: none;
	font-size: .9rem; font-weight: 600;
	margin-bottom: 10px;
	transition: opacity .2s;
}
.repair-contact-btn:hover { opacity: .88; }
.repair-contact-btn--wa    { background: #25d366; color: #fff; }
.repair-contact-btn--phone { background: #000000; color: #fff; }
.repair-contact-hours h4 { font-size: .8rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 8px; }
.repair-contact-hours ul  { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.repair-contact-hours li  { font-size: .875rem; color: #475569; }

/* Service Areas */
.service-areas {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 20px 24px;
}
.service-areas__title { font-size: 1rem; font-weight: 700; color: #000000; margin-bottom: 12px; }
.service-areas__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.service-areas__list li {
	display: flex; align-items: center; gap: 8px;
	font-size: .85rem; color: #475569;
}
.service-areas__list svg { color: #1a1a1a; flex-shrink: 0; }

/* FAQ on repair page — .faq-item__question (same accordion, different class) */
.faq-item__question {
	width: 100%; display: flex; justify-content: space-between; align-items: center;
	padding: 16px 20px; background: none; border: none;
	text-align: left; font-size: .95rem; font-weight: 600;
	color: #000000; cursor: pointer; gap: 16px; font-family: inherit;
	transition: background .18s;
}
.faq-item__question:hover,
.faq-item__question[aria-expanded="true"] { background: #f8fafc; }
.faq-item__question[aria-expanded="true"] .faq-item__icon { transform: rotate(180deg); }
.faq-item__icon { flex-shrink: 0; transition: transform .22s; color: #94a3b8; }
.faq-item__answer { padding: 0 20px 16px; }
.faq-item__answer p { color: #475569; line-height: 1.7; margin: 0; font-size: .875rem; }

/* Repair page responsive */
@media (max-width: 900px) {
	.repair-booking__inner { grid-template-columns: 1fr; }
	.repair-hero__stats    { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 640px) {
	.repair-form__grid    { grid-template-columns: 1fr; }
	.repair-hero__stats   { grid-template-columns: repeat(2,1fr); }
	.repair-hero          { padding: 48px 0 40px; }
	.repair-form__submit  { flex-direction: column; align-items: flex-start; }
	.pricing-card         { flex-direction: column; text-align: center; }
	.pricing-card__price  { text-align: center; }
}

/* =============================================================================
   MN BAGS — DESKTOP HEADER + MOBILE HEADER (bilkul alag)
   Desktop: #desktop-header  — sirf 992px+ par
   Mobile:  #mobile-header   — sirf 991px- par
   ========================================================================== */

/* ====================================================
   DESKTOP HEADER — 992px aur upar
   ==================================================== */

.desktop-header {
	display: block;
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	border-bottom: 1px solid #e8ecf0;
	transition: box-shadow .25s ease;
}
.desktop-header.is-scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, .1); }

.desktop-header__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px;
	height: 68px;
	display: flex;
	align-items: center;
	gap: 32px;
}

.dh-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.dh-logo img { height: 44px; width: auto; display: block; }

.dh-nav { flex: 1; }
.dh-nav__list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }

/* Nav links */
.dh-nav__list > .dh-nav__item > .dh-nav__link,
.dh-nav__list > li > a {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 8px 14px;
	font-size: 13px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: #000000;
	text-decoration: none; position: relative;
	transition: color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
	white-space: nowrap;
}
.dh-nav__list > .dh-nav__item > .dh-nav__link::after,
.dh-nav__list > li > a::after {
	content: ""; position: absolute;
	left: 14px; right: 14px; bottom: 2px;
	height: 2px; background: linear-gradient(90deg, #b08d57, #1a1a1a);
	transform: scaleX(0); transform-origin: left;
	transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.dh-nav__list > .dh-nav__item > .dh-nav__link:hover,
.dh-nav__list > li > a:hover { color: #b08d57; transform: translateY(-2px); }
.dh-nav__list > .dh-nav__item > .dh-nav__link:hover::after,
.dh-nav__list > li > a:hover::after { transform: scaleX(1); }

/* Chevron icon */
.dh-chevron { transition: transform .2s; flex-shrink: 0; }
.dh-has-drop:hover .dh-chevron { transform: rotate(180deg); }

/* Sale */
.dh-nav__sale > .dh-nav__link,
.dh-nav__sale > a { color: #000000 !important; }
.dh-nav__sale > .dh-nav__link::after,
.dh-nav__sale > a::after { background: #000000 !important; }

/* Featured (School & College) */
.dh-nav__featured > .dh-nav__link { color: #1e40af !important; }
.dh-nav__featured > .dh-nav__link::after { background: #1e40af !important; }

/* ── DROPDOWN ─────────────────────────────────────── */
.dh-has-drop { position: relative; }

.dh-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 480px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,.12);
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* opacity/transform fade out immediately, but visibility & pointer-events stay
	   "on" for an extra 300ms after the cursor leaves the trigger — this bridges the
	   gap between the nav link and the panel below it so the menu doesn't vanish
	   mid-move while the mouse is crossing that space. */
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .3s, pointer-events 0s linear .3s;
	transform: translateX(-50%) translateY(6px);
	z-index: 999;
}
.dh-dropdown--mega { min-width: 560px; }

.dh-has-drop:hover .dh-dropdown,
.dh-has-drop:focus-within .dh-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s, 0s, 0s, 0s;
}

/* Arrow pointer */
.dh-dropdown::before {
	content: '';
	position: absolute;
	top: -6px; left: 50%;
	transform: translateX(-50%);
	width: 12px; height: 12px;
	background: #fff;
	border-left: 1px solid #e5e7eb;
	border-top: 1px solid #e5e7eb;
	rotate: 45deg;
}

.dh-drop__inner { display: flex; gap: 0; }

.dh-drop__col {
	flex: 1;
	padding: 4px 16px;
	border-right: 1px solid #f3f4f6;
	display: flex; flex-direction: column; gap: 2px;
}
.dh-drop__col:first-child { padding-left: 4px; }
.dh-drop__col:last-child { border-right: none; }

.dh-drop__head {
	font-size: 11px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; color: #6b7280;
	margin-bottom: 8px; padding-bottom: 6px;
	border-bottom: 1px solid #f3f4f6;
	display: block;
}

/* Highlighted column (School & College featured) */
.dh-drop__col--highlight .dh-drop__head { color: #1e40af; }

.dh-drop__link {
	font-size: 13px; color: #374151; text-decoration: none;
	padding: 5px 6px; border-radius: 6px;
	transition: background .15s, color .15s;
	font-weight: 500;
}
.dh-drop__link:hover { background: #eff6ff; color: #1e40af; }
.dh-drop__col--highlight .dh-drop__link:hover { background: #dbeafe; }

.dh-drop__all-link { margin-top: 10px; }
.dh-drop__all-link a {
	font-size: 12px; font-weight: 700; color: #1e40af;
	text-decoration: none; letter-spacing: .03em;
}
.dh-drop__all-link a:hover { text-decoration: underline; }

/* =========================================================
   LUGGAGE MEGA MENU — Tumi-Style
   ========================================================= */

/* Override base dropdown positioning for mega menu.
   .desktop-header has position:sticky so absolute children
   inside a relative ancestor in the nav will clip — we use
   position:fixed so it escapes the stacking context. */
.dh-has-mega .dh-mega-menu {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	/* JS (initMegaMenuTop) overrides this at runtime */
	top: 68px !important;
	transform: translateY(6px) !important;
	width: 100% !important;
	min-width: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	border: none !important;
}
/* When topbar is visible (page not scrolled) push down by topbar height */
body.topbar-visible .dh-has-mega .dh-mega-menu { top: 102px !important; }

.dh-has-mega:hover .dh-mega-menu,
.dh-has-mega:focus-within .dh-mega-menu {
	transform: translateY(0) !important;
}
/* Remove arrow for mega menu */
.dh-mega-menu::before { display: none !important; }

.dh-mega-menu {
	background: #fff;
	border-top: 3px solid var(--primary, #1a1a1a);
	box-shadow: 0 12px 40px rgba(0,0,0,.14);
	z-index: 1000;
}

.dh-mega__inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 220px;
	gap: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px 28px;
}

/* Backpacks mega menu: only has 2 category columns + featured (no color-filter column — no color attribute exists yet) */
.dh-mega__inner--backpacks {
	grid-template-columns: 1fr 1fr 260px;
	max-width: 900px;
}

/* Luggage mega menu: 2 real category columns + featured, sized like Backpacks */
.dh-mega__inner--luggage {
	grid-template-columns: 1fr 1fr 260px;
	max-width: 900px;
}

/* Menus scaled down to only what has real inventory today: 1 category column + featured
   (Ladies Bags, School & College, Laptop Bags, Travel Bags) */
.dh-mega__inner--schoolcollege {
	grid-template-columns: 1fr 260px;
	max-width: 640px;
}

/* Column heading */
.dh-mega__head {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	color: #94a3b8;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f1f5f9;
	text-transform: uppercase;
}

/* Each link row */
.dh-mega__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: #262626;
	transition: background .15s, transform .15s;
	margin-bottom: 2px;
}
.dh-mega__item:hover {
	background: #fff7ed;
	transform: translateX(3px);
	color: var(--primary, #1a1a1a);
}
.dh-mega__item:hover strong { color: var(--primary, #1a1a1a); }

/* SVG icon wrapper */
.dh-mega__icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: #f8fafc;
	border-radius: 8px;
	color: #475569;
	transition: background .15s, color .15s;
}
.dh-mega__item:hover .dh-mega__icon {
	background: #ffedd5;
	color: var(--primary, #1a1a1a);
}

/* Text block */
.dh-mega__text {
	display: flex; flex-direction: column; gap: 2px;
}
.dh-mega__text strong {
	font-size: 13.5px;
	font-weight: 600;
	color: #262626;
	line-height: 1.2;
	transition: color .15s;
}
.dh-mega__text span {
	font-size: 11.5px;
	color: #94a3b8;
	line-height: 1.2;
}

/* Material swatches (col 3) */
.dh-mega__swatch {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 8px;
	border: 2px solid #e2e8f0;
	transition: border-color .15s;
}
.dh-mega__item:hover .dh-mega__swatch { border-color: var(--primary, #1a1a1a); }
.dh-mega__swatch--fiber { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); }
.dh-mega__swatch--abs   { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.dh-mega__swatch--fabric{ background: linear-gradient(135deg, #34d399 0%, #000000 100%); }
.dh-mega__swatch--light { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); }

/* Col 4: Featured promo cards */
.dh-mega__col--featured {
	padding-left: 20px;
	border-left: 1px solid #f1f5f9;
	border-right: none; /* always the last column, regardless of how many category columns precede it */
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dh-mega__col--featured .dh-mega__head { margin-bottom: 10px; }

.dh-mega__promo {
	display: flex; flex-direction: column; gap: 4px;
	background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
	border: 1px solid #fed7aa;
	border-radius: 10px;
	padding: 14px 16px;
	text-decoration: none;
	transition: box-shadow .18s, transform .18s;
}
.dh-mega__promo:hover {
	box-shadow: 0 4px 16px rgba(26, 26, 26, .18);
	transform: translateY(-2px);
}
.dh-mega__promo--sale {
	background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
	border-color: #fca5a5;
}

.dh-mega__promo-tag {
	font-size: 9px; font-weight: 800; letter-spacing: .1em;
	color: var(--primary, #1a1a1a);
	text-transform: uppercase;
}
.dh-mega__promo--sale .dh-mega__promo-tag { color: #dc2626; }

.dh-mega__promo-title {
	font-size: 14px; font-weight: 700;
	color: #262626; line-height: 1.25;
}
.dh-mega__promo-sub {
	font-size: 11.5px; color: #64748b;
}
.dh-mega__promo-cta {
	font-size: 12px; font-weight: 700;
	color: var(--primary, #1a1a1a);
	margin-top: 4px;
}
.dh-mega__promo--sale .dh-mega__promo-cta { color: #dc2626; }

/* Footer bar inside mega menu */
.dh-mega__footer {
	border-top: 1px solid #f1f5f9;
	background: #fafafa;
	display: flex; gap: 0;
	padding: 0;
}
.dh-mega__footer a {
	flex: 1; text-align: center;
	padding: 11px 8px;
	font-size: 12.5px; font-weight: 600;
	color: #475569; text-decoration: none;
	border-right: 1px solid #f1f5f9;
	transition: background .15s, color .15s;
}
.dh-mega__footer a:last-child { border-right: none; }
.dh-mega__footer a:hover { background: #fff7ed; color: var(--primary, #1a1a1a); }

/* Column borders */
.dh-mega__col { padding: 0 20px; border-right: 1px solid #f1f5f9; }
.dh-mega__col:first-child { padding-left: 0; }
.dh-mega__col:nth-child(3) { border-right: none; }
/* Col 4 featured already has border-left from .dh-mega__col--featured */

/* =========================================================
   SERVICES MEGA MENU — Tumi Services Style (3 col)
   ========================================================= */
.dh-mega-menu--services .dh-mega__inner--services {
	grid-template-columns: 1fr 1fr 280px;
}

/* Service item row — bigger icon, left aligned */
.dh-svc__col { padding: 0 24px; border-right: 1px solid #f1f5f9; }
.dh-svc__col:first-child { padding-left: 0; }
.dh-svc__col:last-child { border-right: none; }

.dh-svc__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 10px 8px;
	border-radius: 8px;
	text-decoration: none;
	color: #262626;
	transition: background .15s, transform .15s;
	margin-bottom: 4px;
}
.dh-svc__item:hover {
	background: #fff7ed;
	transform: translateX(3px);
}
.dh-svc__item:hover strong { color: var(--primary, #1a1a1a); }
.dh-svc__item:hover .dh-svc__icon { color: var(--primary, #1a1a1a); }

.dh-svc__icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	color: #64748b;
	transition: color .15s;
}

.dh-svc__text {
	display: flex; flex-direction: column; gap: 2px;
	padding-top: 4px;
}
.dh-svc__text strong {
	font-size: 13.5px; font-weight: 600;
	color: #262626; line-height: 1.2;
}
.dh-svc__text span {
	font-size: 11.5px; color: #94a3b8; line-height: 1.3;
}

/* Store card — col 3 */
.dh-svc__col--store { padding-left: 24px; }

.dh-svc__store-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 2px;
}
.dh-svc__store-img { overflow: hidden; }
.dh-svc__store-img svg { display: block; }

.dh-svc__store-desc {
	font-size: 12px; color: #475569; line-height: 1.5;
	padding: 10px 14px 6px; margin: 0;
}
.dh-svc__store-info {
	display: flex; flex-direction: column; gap: 3px;
	padding: 0 14px 10px;
	font-size: 11.5px; color: #64748b;
}
.dh-svc__store-btn {
	display: block;
	background: #262626;
	color: #fff;
	text-align: center;
	padding: 10px 14px;
	font-size: 13px; font-weight: 700;
	text-decoration: none;
	letter-spacing: .02em;
	transition: background .15s;
}
.dh-svc__store-btn:hover { background: var(--primary, #1a1a1a); color: #fff; }

/* ---- Mobile: hide mega, show nothing (mega only for desktop) ---- */
@media (max-width: 991px) {
	.dh-mega-menu { display: none !important; }
}

.dh-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.dh-icon {
	width: 44px; height: 44px; /* raised from 40px — meets 44px tap target */
	display: flex; align-items: center; justify-content: center;
	color: #000000; background: none; border: none; cursor: pointer;
	border-radius: 8px; text-decoration: none;
	transition: background .18s, color .18s; position: relative;
}
.dh-icon:hover { background: #f0f4f8; color: #1a1a1a; }
.dh-cart__count {
	position: absolute; top: 4px; right: 4px;
	min-width: 16px; height: 16px;
	background: #000000; color: #fff;
	font-size: 10px; font-weight: 700;
	border-radius: 999px;
	display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.mn-search-bar { background: #f6f8fa; border-top: 1px solid #e2e8f0; }
.mn-search-bar__inner { max-width: 680px; margin: 0 auto; padding: 14px 32px; }
.mn-search-bar .search-field,
.mn-search-bar input[type="search"] {
	width: 100%; padding: 12px 16px; font-size: 15px; font-family: inherit;
	border: 2px solid #d1d5db; border-radius: 8px;
	background: #fff; outline: none; transition: border-color .2s;
}
.mn-search-bar .search-field:focus,
.mn-search-bar input[type="search"]:focus { border-color: #1a1a1a; }

/* Mobile elements hidden on desktop */
.mobile-header  { display: none; }
.mobile-drawer  { display: none; }
.mobile-overlay { display: none; }


/* ====================================================
   MOBILE HEADER — 991px aur neeche
   ==================================================== */

@media (max-width: 991px) {

	.desktop-header { display: none !important; }

	.mobile-header {
		display: block;
		position: sticky; top: 0; z-index: 1000;
		background: #fff;
		border-bottom: 1px solid #e8ecf0;
		box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
	}
	.mobile-header__inner {
		display: flex; align-items: center;
		justify-content: space-between;
		height: 60px; padding: 0 16px; /* raised to 60px to accommodate 44px items with 8px margin each side */
		position: relative;
	}

	.mh-burger {
		width: 44px; height: 44px; /* raised from 40px — meets 44px tap target */
		background: none; border: none; cursor: pointer;
		display: flex; flex-direction: column;
		justify-content: center; gap: 5px;
		padding: 8px; border-radius: 8px; z-index: 1;
	}
	.mh-burger span {
		display: block; height: 2px; width: 22px;
		background: #000000; border-radius: 2px;
		transition: transform .25s, opacity .2s;
	}
	.mh-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.mh-burger.is-open span:nth-child(2) { opacity: 0; }
	.mh-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.mh-logo { position: absolute; left: 50%; transform: translateX(-50%); line-height: 0; }
	.mh-logo img { height: 36px; width: auto; }

	.mh-cart {
		position: relative; z-index: 1;
		width: 44px; height: 44px; /* raised from 40px — meets 44px tap target */
		display: flex; align-items: center; justify-content: center;
		color: #000000; text-decoration: none;
	}
	.mh-cart__count {
		position: absolute; top: 4px; right: 4px;
		min-width: 16px; height: 16px;
		background: #000000; color: #fff;
		font-size: 10px; font-weight: 700;
		border-radius: 999px;
		display: flex; align-items: center; justify-content: center;
	}

	.mobile-overlay {
		display: none; position: fixed; inset: 0;
		background: rgba(0, 0, 0, .5); z-index: 1100;
	}
	.mobile-overlay.is-open { display: block; }

	.mobile-drawer {
		display: flex; flex-direction: column;
		position: fixed; top: 0; left: 0; bottom: 0;
		width: min(85vw, 320px);
		background: #fff; z-index: 1101;
		transform: translateX(-100%);
		transition: transform .32s ease;
		overflow-y: auto;
	}
	.mobile-drawer.is-open { transform: translateX(0); }

	.mobile-drawer__head {
		display: flex; align-items: center;
		justify-content: space-between;
		padding: 16px 20px; border-bottom: 1px solid #e8ecf0;
		flex-shrink: 0;
	}
	.mobile-drawer__close {
		width: 36px; height: 36px;
		background: #f3f5f7; border: none; cursor: pointer;
		border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #000000;
	}
	.mobile-drawer__close:hover { background: #fee2e2; color: #000000; }

	.mobile-drawer__nav { flex: 1; padding: 8px 0; overflow-y: auto; }
	.mobile-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
	.mobile-drawer__nav ul li { border-bottom: 1px solid #f0f4f8; }
	.mobile-drawer__nav ul li a {
		display: flex; align-items: center; padding: 14px 22px;
		min-height: 48px; /* tap target */
		font-size: 15px; font-weight: 600;
		color: #000000; text-decoration: none;
		transition: background .15s, color .15s;
	}
	.mobile-drawer__nav ul li a:hover { background: #f6f8fa; color: #1a1a1a; }
	.mobile-drawer__nav ul .drawer-sale a { color: #000000; }

	/* Mobile accordion */
	.mob-accordion { border-bottom: 1px solid #f0f4f8; }
	.mob-acc__btn {
		width: 100%; display: flex; align-items: center; gap: 8px;
		padding: 14px 22px; min-height: 48px; /* tap target */
		background: none; border: none; cursor: pointer;
		font-size: 15px; font-weight: 600; color: #000000;
		text-align: left;
	}
	.mob-acc__btn strong { color: #1e40af; }
	.mob-acc__arrow { margin-left: auto; transition: transform .25s; flex-shrink: 0; }
	.mob-accordion.is-open .mob-acc__arrow { transform: rotate(180deg); }

	.mob-acc__sub {
		list-style: none; margin: 0; padding: 0 0 6px 0;
		background: #f8faff;
		display: none;
	}
	.mob-accordion.is-open .mob-acc__sub { display: block; }
	.mob-acc__sub li { border-bottom: none !important; }
	.mob-acc__sub li a {
		display: flex; align-items: center;
		padding: 10px 22px 10px 40px;
		min-height: 44px; /* tap target */
		font-size: 13px; font-weight: 500; color: #374151;
		text-decoration: none;
	}
	.mob-acc__sub li a:hover { color: #1e40af; background: #eff6ff; }

	.mobile-drawer__footer {
		padding: 16px 20px; border-top: 1px solid #e8ecf0;
		display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
	}
	.mobile-drawer__wa {
		display: flex; align-items: center; justify-content: center; gap: 8px;
		background: #25d366; color: #fff;
		padding: 14px 20px; min-height: 52px; /* tap target */
		border-radius: 10px;
		font-size: 15px; font-weight: 700; text-decoration: none;
	}
	.mobile-drawer__account {
		text-align: center; font-size: 14px; font-weight: 600;
		color: #000000; text-decoration: none; padding: 6px;
	}
	.mobile-drawer__account:hover { color: #1a1a1a; }
}

/* ---- Shell ------------------------------------------------------------- */
.mn-header{
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	transition: background .3s var(--mn-ease), box-shadow .3s var(--mn-ease),
	            border-color .3s var(--mn-ease);
}
.mn-header__inner{
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--mn-header-h);
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px;
	transition: height .25s var(--mn-ease);
}

/* Scrolled: shrink + shadow */
.mn-header.is-scrolled{ box-shadow: var(--mn-shadow); border-bottom-color: transparent; }
.mn-header.is-scrolled .mn-header__inner{ height: var(--mn-header-h-sm); }

/* Dark / transparent mode (add .mn-header--dark on hero pages) */
.mn-header--dark:not(.is-scrolled){
	background: transparent;
	border-bottom-color: rgba(255,255,255,.14);
}

/* ---- Logo (swap to white in dark/transparent state) -------------------- */
.mn-logo{ display:flex; align-items:center; flex:0 0 auto; line-height:0; position:relative; }
.mn-logo__img{ height: 42px; width: auto; display:block; transition: opacity .25s var(--mn-ease), height .25s var(--mn-ease); }
.mn-logo__img--white{ position:absolute; top:0; left:0; opacity:0; pointer-events:none; }
.mn-header--dark:not(.is-scrolled) .mn-logo__img--dark{ opacity:0; }
.mn-header--dark:not(.is-scrolled) .mn-logo__img--white{ opacity:1; }
.mn-header.is-scrolled .mn-logo__img{ height: 36px; }

/* ---- Primary nav ------------------------------------------------------- */
.mn-nav{ flex: 1 1 auto; display: block; }
.mn-nav__list{
	display:flex; align-items:center; gap: 6px;
	list-style:none; margin:0; padding:0;
}
.mn-nav__list > li{ position: static; }       /* full-width mega anchor */
.mn-nav__list > li > a{
	display:inline-flex; align-items:center; gap:6px;
	padding: 10px 16px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--primary);
	text-decoration: none;
	border-radius: 6px;
	position: relative;
	transition: color .2s var(--mn-ease);
}
.mn-header--dark:not(.is-scrolled) .mn-nav__list > li > a{ color:#fff; }

/* Animated cyan underline */
.mn-nav__list > li > a::after{
	content:"";
	position:absolute; left:16px; right:16px; bottom:4px;
	height:2px; background: var(--accent-cyan);
	transform: scaleX(0); transform-origin: left;
	transition: transform .26s var(--mn-ease);
}
.mn-nav__list > li:hover > a::after,
.mn-nav__list > li.focus-within > a::after,
.mn-nav__list > li.current-menu-item > a::after,
.mn-nav__list > li > a:focus-visible::after{ transform: scaleX(1); }

/* Sale item = orange accent */
.mn-nav__list > li.menu-item--sale > a,
.mn-nav__list > li.menu-item-sale > a{ color: var(--accent-gold); }
.mn-nav__list > li.menu-item--sale > a::after,
.mn-nav__list > li.menu-item-sale > a::after{ background: var(--accent-gold); }

/* Dropdown chevron on parent items */
.mn-nav__list > li.menu-item-has-children > a::before{
	content:""; width:7px; height:7px; margin-left:2px; order:2;
	border-right:2px solid currentColor; border-bottom:2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .25s var(--mn-ease);
}
.mn-nav__list > li.menu-item-has-children:hover > a::before{ transform: rotate(225deg) translateY(2px); }

/* ---- Mega / dropdown panel -------------------------------------------- */
.mn-nav__list > li .sub-menu,
.mn-nav__list > li .mega-panel{
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	margin: 0;
	list-style: none;
	background: #fff;
	border-top: 1px solid rgba(0, 0, 0, .08);
	box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .35);
	opacity: 0; visibility: hidden;
	transform: translateY(-10px);
	transition: opacity .24s var(--mn-ease), transform .24s var(--mn-ease), visibility 0s linear .24s;
	z-index: 1001;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 8px 36px;
	padding: 32px;
}
.mn-nav__list > li:hover > .sub-menu,
.mn-nav__list > li:hover > .mega-panel,
.mn-nav__list > li:focus-within > .sub-menu,
.mn-nav__list > li:focus-within > .mega-panel{
	opacity:1; visibility:visible; transform: translateY(0);
	transition-delay: 0s;
}
.sub-menu li{ list-style:none; }
.sub-menu a, .mega-panel a{
	display:block;
	padding: 8px 0;
	font-size: 14px;
	font-weight: 500;
	color: #38495a;
	text-decoration:none;
	transition: color .18s var(--mn-ease), padding-left .18s var(--mn-ease);
}
.sub-menu a:hover, .mega-panel a:hover{ color: var(--accent-gold); padding-left: 6px; }
/* second-level headings (column titles) */
.sub-menu > li > a{
	font-size: 11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
	color: var(--primary); padding-bottom: 12px;
}
.sub-menu > li > a:hover{ color: var(--primary); padding-left:0; }

/* Mega backdrop dim */
.mn-backdrop{
	position: fixed; inset: var(--mn-header-h) 0 0 0;
	background: rgba(0, 0, 0, .4);
	opacity:0; visibility:hidden; pointer-events:none;
	transition: opacity .26s var(--mn-ease), visibility 0s linear .26s;
	z-index: 999;
}
.mn-header.mega-open .mn-backdrop{ opacity:1; visibility:visible; }

/* ---- Right-side actions ------------------------------------------------ */
.mn-actions{ display:flex; align-items:center; gap:4px; flex:0 0 auto; margin-left:auto; }
.mn-icon{
	display:inline-flex; align-items:center; justify-content:center;
	width:42px; height:42px; border:0; background:transparent;
	color: var(--primary); cursor:pointer; border-radius:8px;
	text-decoration:none; position:relative;
	transition: background .18s var(--mn-ease), color .18s var(--mn-ease);
}
.mn-icon:hover{ background: rgba(26, 26, 26, .12); }
.mn-icon:focus-visible{ outline:2px solid var(--accent-cyan); outline-offset:2px; }
.mn-header--dark:not(.is-scrolled) .mn-icon{ color:#fff; }
.mn-header--dark:not(.is-scrolled) .mn-icon:hover{ background: rgba(255,255,255,.14); }

/* Cart count badge */
.mn-cart-count{
	position:absolute; top:4px; right:2px;
	min-width:18px; height:18px; padding:0 5px;
	display:flex; align-items:center; justify-content:center;
	font-size:11px; font-weight:700; line-height:1; color:#fff;
	background: var(--accent-gold); border-radius:999px;
	border:2px solid #fff;
}
.mn-header--dark:not(.is-scrolled) .mn-cart-count{ border-color: var(--primary); }
.mn-cart-count[hidden]{ display:none; }

/* ---- Slide-down search bar -------------------------------------------- */
.mn-search-bar{
	background:#fff; border-top:1px solid rgba(0, 0, 0, .08);
	box-shadow: var(--mn-shadow);
	overflow:hidden;
}
.mn-search-bar:not([hidden]){ animation: mnSearchDrop .3s var(--mn-ease); }
.mn-search-bar__inner{ max-width:760px; margin:0 auto; padding:18px 32px; }
.mn-search-bar input[type="search"], .mn-search-bar .search-field{
	width:100%; padding:14px 18px; font-size:16px;
	border:2px solid rgba(0, 0, 0, .12); border-radius:10px;
	background:#f6f8fa; transition:border-color .2s var(--mn-ease);
}
.mn-search-bar input[type="search"]:focus, .mn-search-bar .search-field:focus{
	border-color: var(--accent-cyan); outline:none; background:#fff;
}
@keyframes mnSearchDrop{ from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:none;} }

/* ---- Hamburger --------------------------------------------------------- */
.mn-burger{
	display:none; width:42px; height:42px; border:0; background:transparent;
	cursor:pointer; border-radius:8px; padding:11px 10px;
	flex-direction:column; justify-content:space-between;
}
.mn-burger span{
	display:block; height:2px; width:100%; background: var(--primary);
	border-radius:2px; transition: transform .3s var(--mn-ease), opacity .2s var(--mn-ease);
}
.mn-header--dark:not(.is-scrolled) .mn-burger span{ background:#fff; }
.mn-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.mn-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.mn-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ---- Mobile off-canvas drawer ----------------------------------------- */
.mobile-menu-overlay{
	position:fixed; inset:0; background:rgba(0, 0, 0, .5);
	opacity:0; visibility:hidden; z-index:1100;
	transition:opacity .3s var(--mn-ease), visibility 0s linear .3s;
}
.mobile-menu-overlay.is-active{ opacity:1; visibility:visible; transition-delay:0s; }

.mobile-menu{
	position:fixed; top:0; right:0; bottom:0;
	width: min(86vw, 360px);
	background:#fff; z-index:1101;
	display:flex; flex-direction:column;
	transform: translateX(100%);
	transition: transform .34s var(--mn-ease);
	box-shadow: -12px 0 40px -10px rgba(0, 0, 0, .4);
}
.mobile-menu.is-active{ transform: translateX(0); }
.mobile-menu__header{
	display:flex; align-items:center; justify-content:space-between;
	padding:18px 20px; border-bottom:1px solid rgba(0, 0, 0, .08);
}
.mobile-menu__logo img{ height:34px; width:auto; display:block; }
.mobile-menu__close{
	width:40px; height:40px; border:0; background:#f3f5f7; color:var(--primary);
	border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.mobile-menu__close:hover{ background: rgba(0, 0, 0, .1); color: var(--accent-gold); }
.mobile-menu__body{ flex:1 1 auto; overflow-y:auto; padding:10px 0; }
.mobile-menu__footer{
	padding:18px 20px; border-top:1px solid rgba(0, 0, 0, .08);
	display:flex; flex-direction:column; gap:12px;
}

/* Mobile nav links + accordion sub-menus */
.mobile-nav__list, .mobile-nav__list .sub-menu{ list-style:none; margin:0; padding:0; }
.mobile-nav__list li{ border-bottom:1px solid rgba(0, 0, 0, .06); }
.mobile-nav__list a{
	display:block; padding:15px 22px;
	font-size:15px; font-weight:600; letter-spacing:.02em;
	color:var(--primary); text-decoration:none;
}
.mobile-nav__list a:hover{ background:#f6f8fa; color:var(--accent-gold); }
.mobile-nav__list .menu-item--sale > a,
.mobile-nav__list .menu-item-sale > a{ color: var(--accent-gold); }
.mobile-nav__list .sub-menu a{
	padding:12px 22px 12px 38px; font-size:14px; font-weight:500; color:#475868;
	border-bottom:none;
}
.mobile-nav__list .sub-menu{ background:#f6f8fa; }

.mn-wa-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.mn-mob-account{
	text-align:center; font-size:13px; font-weight:600; color:var(--primary);
	text-decoration:none; padding:6px;
}
.mn-mob-account:hover{ color: var(--accent-cyan); }

/* ---- Responsive -------------------------------------------------------- */

/* Desktop: burger hidden, nav visible */
@media (min-width:769px){
	.mn-burger{ display:none !important; }
	.mn-nav{ display:block !important; }
	.mobile-menu{ display:none !important; }
	.mobile-menu-overlay{ display:none !important; }
}

/* Mobile only */
@media (max-width:768px){
	.mn-header__inner{ padding:0 16px; gap:12px; }
	.mn-nav{ display:none !important; }
	.mn-icon--account{ display:none; }
	.mn-burger{ display:flex !important; }
	.mn-backdrop{ display:none; }
}
@media (max-width:480px){
	.mn-header__inner{ padding:0 14px; }
	.mn-logo__img{ height:34px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
	.mn-header, .mn-header__inner, .mn-logo__img, .mn-nav__list > li > a::after,
	.sub-menu, .mega-panel, .mobile-menu, .mobile-menu-overlay, .mn-icon, .mn-burger span{
		transition:none !important; animation:none !important;
	}
}

/* =============================================================================
   CATEGORY QUICK BAR
   ============================================================================= */
.cat-quick-bar {
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	box-shadow: 0 1px 4px rgba(0,0,0,.05);
	display: none; /* desktop par hidden — sirf mobile par show hoga */
}
@media (max-width: 991px) {
	.cat-quick-bar { display: block; }
}
.cat-quick-bar__list {
	display: flex;
	align-items: center;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0 4px;
}
.cat-quick-bar__list::-webkit-scrollbar { display: none; }

.cat-quick-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 8px 14px;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: border-color .2s, background .2s;
	border-radius: 0;
	flex-shrink: 0;
}
.cat-quick-bar__item:hover { background: #f0f9ff; border-bottom-color: #1a1a1a; }

.cqb-icon { font-size: 18px; line-height: 1; }
.cqb-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #374151; }

.cqb--school .cqb-label { color: #1e40af; }
.cqb--school:hover { border-bottom-color: #1e40af; background: #eff6ff; }
.cqb--college .cqb-label { color: #7c3aed; }
.cqb--college:hover { border-bottom-color: #7c3aed; background: #f5f3ff; }
.cqb--sale .cqb-label { color: #000000; }
.cqb--sale:hover { border-bottom-color: #000000; background: #fff5f0; }
.cqb--laptop .cqb-label { color: #0369a1; }
.cqb--laptop:hover { border-bottom-color: #0369a1; background: #f0f9ff; }
.cqb--travel .cqb-label { color: #065f46; }
.cqb--travel:hover { border-bottom-color: #065f46; background: #f0fdf4; }

/* Drop link "View All" style */
.dh-drop__link--all {
	font-weight: 700 !important;
	color: #000000 !important;
	border-bottom: 1px solid #f3f4f6;
	margin-bottom: 6px !important;
	padding-bottom: 8px !important;
}
.dh-drop__link--all:hover { background: #f0f9ff !important; color: #1e40af !important; }

/* =============================================================================
   GLOBAL UTILITIES
   ============================================================================= */

/* Screen-reader only (accessibility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Skip-to-content link (keyboard accessibility) */
.skip-link {
    position: absolute;
    top: -999px;
    left: 0;
    background: #fff;
    color: #000;
    padding: 8px 16px;
    z-index: 9999;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

/* Scroll-reveal — prevents FOUC on JS-animated sections */
.js-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================================
   RESPONSIVE FIXES — small mobile (≤380px / ≤320px)
   ============================================================================= */
@media (max-width: 380px) {
    /* Countdown numbers — prevent overflow */
    .countdown-num {
        font-size: 18px;
        min-width: 32px;
        padding: 3px 6px;
    }
    .countdown-sep { font-size: 18px; }
    .countdown-unit-label { font-size: 8px; }

    /* Testimonial author — wrap on narrow screens */
    .testimonial-card__author { flex-wrap: wrap; gap: 8px; }
    .testimonial-card__avatar { width: 38px; height: 38px; font-size: 14px; }
}

@media (max-width: 320px) {
    /* Mobile bottom nav — tighten label */
    .mobile-nav-bottom__item { font-size: 9px; gap: 2px; }
    .mobile-nav-bottom__item svg { width: 20px; height: 20px; }

    /* Countdown even tighter */
    .countdown-num { font-size: 16px; min-width: 28px; }
}

/* =============================================================================
   DESIGN AUDIT FIXES — June 2026
   Mobile responsiveness, tap targets, hover states, overflow, spacing
   ============================================================================= */

/* ── Fix 1: Topbar horizontal scroll on 320px — add safe min font size ── */
@media (max-width: 380px) {
    .topbar__items span {
        font-size: 0.65rem;
        padding: 0 8px;
    }
}

/* ── Fix 2: Hero section — min-height too tall on small phones, text overflow ── */
@media (max-width: 480px) {
    .hero-slider,
    .hero-slide {
        min-height: 360px;
    }
    .hero-slide__content {
        padding-block: var(--space-8);
    }
    /* Prevent heading text from overflowing on 320px */
    .hero-slide__heading {
        font-size: clamp(24px, 7vw, 36px);
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .hero-slide__sub {
        font-size: var(--text-sm);
    }
}

/* ── Fix 3: Hero actions — stack vertically and go full-width on tiny screens ── */
@media (max-width: 400px) {
    .hero-slide__actions {
        flex-direction: column;
        gap: var(--space-3);
    }
    .hero-slide__actions .btn,
    .hero-slide__actions a {
        width: 100%;
        justify-content: center;
        min-height: 48px; /* minimum 44px tap target */
    }
}

/* ── Fix 4: Trust badges — ensure proper wrapping on 320px ── */
@media (max-width: 360px) {
    .trust-grid {
        grid-template-columns: 1fr;
    }
    .trust-badge {
        padding: var(--space-3);
        gap: var(--space-3);
    }
}

/* ── Fix 5: Category cards — min-height to keep tap target usable ── */
.category-card {
    min-height: 88px; /* raised from 100px after audit — keep 100px from base */
}

/* Ensure category card text never clips on 320px */
@media (max-width: 360px) {
    .categories-grid {
        grid-template-columns: 1fr;
    }
    .category-card {
        min-height: 72px;
    }
}

/* ── Fix 6: Product cards — wishlist button tap target too small (36px) ── */
.product-card__wishlist {
    width: 40px;  /* was 36px — raised to meet 44px guideline minus border */
    height: 40px;
    top: var(--space-2);
    right: var(--space-2);
}

/* ── Fix 7: Product card quick-add — always ensure 44px tap target ── */
.product-card__add-cart {
    min-height: 44px;
    padding: 13px 12px;
}

/* ── Fix 8: Mobile bottom nav items — ensure 44px min tap target height ── */
.mobile-nav-bottom__item {
    min-height: 44px;
}

/* ── Fix 9: Footer on 320px — columns were 1fr 1fr (too cramped) ── */
@media (max-width: 360px) {
    .footer__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Fix 10: Offer card — on narrow mobile the countdown can overflow ── */
@media (max-width: 480px) {
    .offer-card {
        padding: var(--space-5) var(--space-4);
        flex-direction: column;
        align-items: flex-start;
    }
    .offer-card__cta {
        margin-left: 0;
        width: 100%;
    }
    .offer-card__cta .btn {
        width: 100%;
        justify-content: center;
    }
    .countdown-units {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Fix 11: Repair section services — 1x2 grid on 360px avoids too-thin cols ── */
@media (max-width: 400px) {
    .repair-section__services {
        grid-template-columns: 1fr;
    }
}

/* ── Fix 12: Newsletter form — input + button must not overflow ── */
@media (max-width: 480px) {
    .newsletter-form__wrap {
        flex-direction: column;
    }
    .newsletter-form__input {
        border-radius: var(--radius-md);
        border-right: 1.5px solid var(--border) !important;
    }
    .newsletter-form__btn {
        border-radius: var(--radius-md);
        min-height: 48px;
    }
}

/* ── Fix 13: Stats grid — text overflow on 320px ── */
@media (max-width: 360px) {
    .stat-card__num {
        font-size: 24px;
    }
    .stat-card__label {
        font-size: 11px;
    }
}

/* ── Fix 14: Testimonial card — ensure min readable body ── */
@media (max-width: 400px) {
    .testimonial-card {
        padding: var(--space-5);
    }
    .testimonial-card__text {
        font-size: var(--text-sm);
    }
}

/* ── Fix 15: Pagination buttons — must be at least 44px tap target ── */
.bagshop-pagination .page-numbers a,
.bagshop-pagination .page-numbers span {
    min-width: 44px;
    min-height: 44px;
}

/* ── Fix 16: Trending tabs — ensure tap targets ── */
.trending-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ── Fix 17: Body overflow prevention — global guard ── */
body {
    overflow-x: hidden;
}

/* ── Fix 18: Container must not cause overflow ── */
.container {
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Fix 19: Images — global object-fit safety ── */
img {
    max-width: 100%;
    height: auto;
}

/* ── Fix 20: Product card image — enforce cover when inside grid ── */
.products-grid .product-card__image {
    object-fit: cover;
}

/* ── Fix 21: hp-cats-grid — prevent overflow on very small screens ── */
@media (max-width: 320px) {
    .hp-cats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Fix 22: Section titles — prevent overflow on mobile ── */
@media (max-width: 480px) {
    .section-title,
    .prem-head__title,
    .mn-section-head__title {
        font-size: clamp(18px, 5vw, 28px);
        word-break: break-word;
    }
}

/* ── Fix 23: Mobile menu body links — increase tap target ── */
.mobile-nav__list li a {
    min-height: 48px;
}

/* ── Fix 24: Search form button — min tap target ── */
.search-form__btn {
    min-height: 48px;
    min-width: 48px;
}

/* ── Fix 25: Whatsapp float — ensure it clears mobile bottom nav ── */
@media (max-width: 1023px) {
    .whatsapp-float {
        bottom: calc(60px + var(--space-4)); /* 60px = mobile-nav-bottom height */
    }
}

/* ── Fix 26: Inner page hero text wrap safety ── */
.inner-page-hero__title,
.inner-page-hero__sub {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── Fix 27: Repair stat cards — grid collapse at 320px ── */
@media (max-width: 360px) {
    .repair-section__stats {
        grid-template-columns: 1fr;
    }
}

/* ── Fix 28: Footer social links — ensure 44px tap target ── */
.footer__social-link {
    width: 44px;
    height: 44px;
}

/* ── Fix 29: Nav list links — ensure desktop links have a min-height ── */
.nav__list > li > a {
    min-height: 44px;
}

/* ── Fix 30: Header action buttons — already 44px but verify padding ── */
.header__action-btn {
    flex-shrink: 0;
}

/* =============================================================================
   PREMIUM DESIGN PASS — July 2026
   Typography, spacing, micro-interactions, visual polish
   ============================================================================= */

/* ────────────────────────────────────────────────────────────────────────────
   P1. GLOBAL TYPOGRAPHY
   ────────────────────────────────────────────────────────────────────────── */

.hero-slide__heading {
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1.05;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.section-title,
.prem-head__title,
.mn-section-head__title,
.hp-cats-title {
    letter-spacing: -0.3px;
    line-height: 1.15;
    -webkit-font-smoothing: antialiased;
}

p,
.product-description,
.footer__tagline,
.hero-slide__sub,
.testimonial-card__text {
    line-height: 1.75;
}

.product-card__title,
.mn-card__name,
.mn-card__title {
    font-size: clamp(13px, 1.1vw + 10px, 15px);
    line-height: 1.45;
}

.product-card__price .price-current,
.mn-card__price ins,
.mn-card__price {
    font-size: clamp(15px, 1.2vw + 11px, 17px);
    font-weight: 800;
    letter-spacing: -0.3px;
}

.product-card__price .price-original,
.mn-card__was,
.mn-card__price del {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.6;
}

/* ────────────────────────────────────────────────────────────────────────────
   P2. PRODUCT CARD POLISH
   ────────────────────────────────────────────────────────────────────────── */

.product-card {
    border-radius: 10px;
    border: 1px solid #ebebeb;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.product-card:hover {
    box-shadow: 0 10px 32px rgba(0,0,0,0.12);
    transform: translateY(-4px);
    border-color: #d0d0d0;
}

.product-card__image-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f7f5;
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.product-card:hover .product-card__image {
    transform: scale(1.04);
}

.product-card__body {
    padding: 14px 16px 16px;
}

@media (max-width: 768px) {
    .product-card__body { padding: 10px 12px 12px; }
}

.products-grid { gap: 20px; }

@media (max-width: 768px) {
    .products-grid { gap: 12px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   P3. BUTTON POLISH
   ────────────────────────────────────────────────────────────────────────── */

.btn {
    transition: background-color 0.2s ease, color 0.2s ease,
                box-shadow 0.2s ease, transform 0.15s ease,
                border-color 0.2s ease;
    -webkit-font-smoothing: antialiased;
}

.btn:active { transform: scale(0.97); }

.btn--primary,
.btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #e08e00 100%);
    box-shadow: 0 2px 8px rgba(245,158,11,0.35);
    border: none;
}

.btn--primary:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #f59e0b 20%, #cc7a00 100%);
    box-shadow: 0 4px 16px rgba(245,158,11,0.5);
    transform: translateY(-1px);
}

.btn--dark:active,
.sp-atc-btn:active,
.mn-card__atc:active { transform: scale(0.97) !important; }

.whatsapp-float {
    background-color: #18c35c;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
    background-color: #14a84e;
    color: #fff;
}

/* ────────────────────────────────────────────────────────────────────────────
   P4. SECTION SPACING
   ────────────────────────────────────────────────────────────────────────── */

.trust-section,
.offers-section,
.satisfaction-section,
.newsletter-section,
.hp-cats-section,
.mn-product-section,
.prem-section {
    padding-block: 64px;
}

@media (max-width: 768px) {
    .trust-section,
    .offers-section,
    .satisfaction-section,
    .newsletter-section,
    .hp-cats-section,
    .mn-product-section,
    .prem-section {
        padding-block: 44px;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   P5. TRUST BADGES
   ────────────────────────────────────────────────────────────────────────── */

.trust-badge {
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.trust-badge:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

/* ────────────────────────────────────────────────────────────────────────────
   P6. CATEGORY CARDS
   ────────────────────────────────────────────────────────────────────────── */

.category-card {
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.13);
}

/* ────────────────────────────────────────────────────────────────────────────
   P7. TESTIMONIAL CARDS
   ────────────────────────────────────────────────────────────────────────── */

.testimonial-card {
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: box-shadow 0.25s ease;
}

.testimonial-card.is-active:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}

/* ────────────────────────────────────────────────────────────────────────────
   P8. FOOTER TOP BORDER
   ────────────────────────────────────────────────────────────────────────── */

.site-footer {
    border-top: 3px solid #000;
}

/* ────────────────────────────────────────────────────────────────────────────
   P9. SECTION DIVIDERS
   ────────────────────────────────────────────────────────────────────────── */

.trust-section,
.newsletter-section {
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* ────────────────────────────────────────────────────────────────────────────
   P10. IMAGE HOVER — universal consistent scale
   ────────────────────────────────────────────────────────────────────────── */

.hp-cat-card,
.product-card,
.mn-card,
.cg-card { overflow: hidden; }

.hp-cat-card__img,
.product-card__image,
.mn-card__img,
.cg-card__img {
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-cat-card:hover .hp-cat-card__img,
.product-card:hover .product-card__image,
.mn-card:hover .mn-card__img,
.cg-card:hover .cg-card__img {
    transform: scale(1.04);
}

/* ────────────────────────────────────────────────────────────────────────────
   P11. TOPBAR — subtle gradient
   ────────────────────────────────────────────────────────────────────────── */

.topbar {
    background: var(--gray-bg);
}

/* ────────────────────────────────────────────────────────────────────────────
   P12. MOBILE BOTTOM NAV — refined active state
   ────────────────────────────────────────────────────────────────────────── */

.mobile-nav-bottom__item.is-active {
    color: var(--accent-gold);
    position: relative;
}

.mobile-nav-bottom__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--accent-gold);
    border-radius: 0 0 2px 2px;
}

/* ────────────────────────────────────────────────────────────────────────────
   P13. SECTION BACKGROUNDS
   ────────────────────────────────────────────────────────────────────────── */

.satisfaction-section {
    background: linear-gradient(180deg, #f7f7f5 0%, #ffffff 100%);
}

.newsletter-section {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(245,158,11,0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   P14. WISHLIST BUTTON
   ────────────────────────────────────────────────────────────────────────── */

.product-card__wishlist {
    transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.product-card__wishlist:hover {
    color: #000000;
    transform: scale(1.1);
    background-color: #fff0f0;
}

/* ────────────────────────────────────────────────────────────────────────────
   P15. STAT CARDS
   ────────────────────────────────────────────────────────────────────────── */

.stat-card__num { transition: color 0.3s ease; }
.stat-card:hover .stat-card__num { filter: brightness(1.1); }

/* ────────────────────────────────────────────────────────────────────────────
   P16. MOBILE 375px
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 375px) {
    .hero-slide__heading {
        font-size: 26px;
        letter-spacing: -0.5px;
        line-height: 1.1;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .product-card__body { padding: 8px 10px 10px; }
    .product-card__title { font-size: 12px; }
    .product-card__price .price-current { font-size: 14px; }
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .section-title,
    .prem-head__title { font-size: 20px; }
    .hero-slide__actions .btn,
    .hero-slide__actions a {
        width: 100%;
        justify-content: center;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   P17. MOBILE 320px
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 320px) {
    body { font-size: 14px; }
    .hero-slide__heading { font-size: 22px; letter-spacing: 0; }
    .hero-slide__sub { font-size: 13px; }
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .product-card__title { font-size: 11px; }
    .product-card__price .price-current { font-size: 13px; }
    .topbar__items span { font-size: 10px; padding: 0 6px; }
    .section-title { font-size: 18px; }
    .footer__grid { grid-template-columns: 1fr !important; }
    .footer__col--brand { grid-column: auto; }
}

/* ────────────────────────────────────────────────────────────────────────────
   P18. TABLET 480px–768px
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 480px) and (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .section-title,
    .prem-head__title { font-size: 24px; }
}


/* =============================================================================
   COMPREHENSIVE DESIGN PASS — main.css  (July 2026)
   ============================================================================= */

/* ── 1. PRIMARY BUTTON — orange gradient, consistent lift ── */
.btn-primary {
    background: linear-gradient(135deg,#1a1a1a,#000000);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
    filter: brightness(1.06);
    color: #fff;
    border-color: transparent;
}
.btn-primary:active { transform: scale(0.97); }

/* ── 2. SECONDARY / OUTLINE buttons ── */
.btn-outline {
    border: 2px solid var(--accent-gold);
    color: var(--accent-gold);
    background: transparent;
    font-weight: 700;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
.btn-outline:hover {
    background: var(--accent-gold);
    color: #fff;
    transform: translateY(-2px);
}

/* ── 3. WHATSAPP FLOAT — visible on desktop too ── */
@media (min-width: 1024px) {
    .whatsapp-float {
        bottom: var(--space-6);
        right: var(--space-6);
    }
    .whatsapp-float__label {
        display: inline;
        font-size: var(--text-sm);
        font-weight: 700;
    }
}
/* Pulse animation on WhatsApp button */
.whatsapp-float {
    animation: wa-pulse-shadow 3s ease-in-out infinite;
}
@keyframes wa-pulse-shadow {
    0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,0.4); }
    50%       { box-shadow: 0 4px 28px rgba(37,211,102,0.65); }
}
.whatsapp-float:hover { animation: none; }

/* ── 4. MOBILE BOTTOM NAV — active state pill ── */
.mobile-nav-bottom__item.is-active {
    color: var(--accent-gold);
    position: relative;
}
.mobile-nav-bottom__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--accent-gold);
    border-radius: 0 0 3px 3px;
}

/* ── 5. HERO — add subtle text-shadow for readability ── */
.hero-slide__heading {
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.hero-slide__sub {
    text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

/* ── 6. PRODUCT CARDS — consistent shadow system ── */
.product-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.product-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    transform: translateY(-3px);
}

/* ── 7. CATEGORY CARDS — uniform hover ── */
.category-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.category-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}

/* ── 8. TRUST BADGES — polish ── */
.trust-badge {
    border-left-width: 4px;
    border-radius: var(--radius-lg);
}

/* ── 9. SECTION HEADINGS — consistent weight/spacing ── */
.section-title,
.prem-head__title,
.mn-section-head__title {
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* ── 10. FOOTER — social link hover improvement ── */
.footer__social-link {
    width: 44px;
    height: 44px;
}

/* ── 11. HEADER SEARCH BAR — better focus ── */
.search-form__input:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.15);
    outline: none;
}

/* ── 12. FORM INPUTS (global) — consistent focus ring ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    padding: 11px 14px;
    min-height: 48px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-dark);
    background: #fff;
    box-sizing: border-box;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12);
}

/* ── 13. PAGINATION — orange active ── */
.bagshop-pagination .page-numbers.current {
    background: linear-gradient(135deg,#1a1a1a,#000000);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ── 14. MOBILE — no horizontal scroll guard ── */
@media (max-width: 768px) {
    .hero-slide__content {
        padding-right: 16px;
    }
    .site-footer .container {
        overflow-x: hidden;
    }
    /* Topbar marquee effect on very small screens */
    .topbar__items span {
        font-size: 0.68rem;
    }
}

/* ── 15. LOADING STATE for buttons ── */
.btn.is-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ── 16. SECTION SPACING — 64px desktop, 44px mobile ── */
@media (max-width: 768px) {
    .section-gap { padding-block: 44px; }
}
@media (min-width: 769px) {
    .section-gap { padding-block: 64px; }
}

/* =============================================================================
   SEO-DRIVEN DESIGN FIXES — main.css  (July 2026)
   ============================================================================= */

/* ── HEADING HIERARCHY: Desktop scaling ─────────────────────────────────────
   SEO: On desktop, H1 must be visually dominant (48px+). H2 must be clearly
   below H1. H3 card titles must be clearly below H2 section headings.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    h1 { font-size: clamp(36px, 4vw, 56px); }
    h2 { font-size: clamp(24px, 2.5vw, 36px); }
    h3 { font-size: 20px; }
}

/* ── BODY TEXT: maximum readability ────────────────────────────────────────
   SEO: Comfortable body text increases time on page, reducing bounce rate.
   max-width: 70ch prevents lines from being too wide (harder to read).
   ─────────────────────────────────────────────────────────────────────────── */
.entry-content p,
.product-description p,
.brand-story__text p,
.about-why-card__desc,
.mvv-card p {
    font-size: 16px;
    line-height: 1.75;
    max-width: 70ch;  /* optimal line length for readability */
    color: #374151;
}

/* ── FOOTER CATEGORY LINKS: SEO-critical internal links ─────────────────────
   SEO: Footer category links pass PageRank to category pages. Must be
   clearly visible (not too light) and meet contrast requirements.
   ─────────────────────────────────────────────────────────────────────────── */
.footer__nav-list a {
    color: rgba(0,0,0,0.72) !important;  /* increased from 0.65 for contrast */
    font-size: 14px !important;
}
.footer__nav-list a:hover {
    color: var(--accent-gold) !important;
}

/* ── PHONE NUMBER IN FOOTER/HEADER: trust signal, local SEO ─────────────────
   SEO: Phone number visibility is a local SEO trust signal. Must be legible.
   ─────────────────────────────────────────────────────────────────────────── */
.footer__contact-list li {
    font-size: 14px;
    color: rgba(0,0,0,.72);  /* increased contrast from .65 */
}
.footer__contact-list a {
    color: rgba(0,0,0,.72);
    font-weight: 500;
}
.footer__contact-list a:hover {
    color: var(--accent-cyan) !important;
}

/* ── WHATSAPP FLOAT BUTTON: tap target and visibility ───────────────────────
   SEO: WhatsApp contact reduces bounce rate. Must be clearly visible.
   Minimum tap target 44px maintained.
   ─────────────────────────────────────────────────────────────────────────── */
.whatsapp-float {
    min-height: 48px;
    min-width: 48px;
}

/* ── SECTION HEADER "SEE ALL" LINKS: visible internal links ─────────────────
   SEO: "See All" links in homepage sections pass equity to archive/category
   pages. They must not be light-colored or hidden.
   ─────────────────────────────────────────────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
}
.section-header .section-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold) !important;
    text-decoration: none;
    letter-spacing: .5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    min-height: 44px;
    border-bottom: 1.5px solid currentColor;
}
.section-header .section-link:hover {
    color: var(--primary) !important;
}

/* ── PAGINATION: readable, tappable ─────────────────────────────────────────
   SEO: Pagination links must meet tap target requirements (44px minimum).
   Google crawls paginated pages — they must be accessible.
   ─────────────────────────────────────────────────────────────────────────── */
.bagshop-pagination .page-numbers a,
.bagshop-pagination .page-numbers span {
    min-width: 44px;
    min-height: 44px;
    font-size: 14px;
}

/* ── HERO SLIDE: LCP element — no animation that delays paint ───────────────
   SEO/LCP: Hero content must paint immediately. Any opacity/transform
   animation must have delay: 0s so LCP is not delayed.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-slide__heading,
.hero-slide__content {
    animation-delay: 0s !important;
    transition-delay: 0s !important;
}

/* ── MN-CARD TRANSITION: GPU-accelerated only ───────────────────────────────
   SEO/CWV: box-shadow transitions are CPU-bound. Replaced with transform.
   ─────────────────────────────────────────────────────────────────────────── */
.category-card {
    transition: transform var(--transition-base) !important;
    /* no box-shadow animation */
}
.category-card:hover {
    transform: translateY(-4px) !important;
}

/* ── GLOBAL BREADCRUMB — 1 line sitewide ── */
nav.bagshop-breadcrumb { display: block; line-height: 1; }
ol.breadcrumb-list,
.woocommerce-breadcrumb {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    list-style: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
li.breadcrumb-item,
li.breadcrumb-sep {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: 13px !important;
}
li.breadcrumb-item a { color: #1a1a1a !important; text-decoration: none !important; font-weight: 500 !important; }
li.breadcrumb-item a:hover { color: #000000 !important; }
li.breadcrumb-item:last-child a,
li.breadcrumb-item:last-child { color: #475569 !important; }
li.breadcrumb-sep { color: #cbd5e1 !important; font-size: 12px !important; }

/* ── FOOTER: black background, light text ── */
.site-footer { background: #1a1a1a !important; color: rgba(255,255,255,.72) !important; }
.footer__grid {
    display: grid !important;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr !important;
    gap: 40px 32px !important;
    align-items: start !important;
}
.footer__col--brand { grid-column: auto !important; }
.site-footer *,
.site-footer p,
.site-footer span,
.site-footer li,
.site-footer address { color: rgba(255,255,255,.72) !important; }
.site-footer h2, .site-footer h3, .site-footer h4,
.footer__col-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    margin: 0 0 14px !important;
}
.footer__col-title + .footer__col-title,
h3.footer__col-title + h3.footer__col-title { margin-top: 20px !important; }
.footer__nav-list { list-style: none !important; padding: 0 !important; margin: 0 0 4px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.footer__nav-list li { display: block !important; }
.footer__nav-list a,
.footer__nav-list li a,
.site-footer a {
    color: rgba(255,255,255,.72) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: color .15s, padding-left .15s !important;
    line-height: 1.5 !important;
}
.footer__nav-list a:hover,
.footer__nav-list li a:hover,
.site-footer a:hover { color: #fff !important; padding-left: 4px !important; }
.footer__tagline { color: rgba(255,255,255,.6) !important; font-size: 14px !important; margin: 10px 0 16px !important; line-height: 1.6 !important; }
.footer__contact-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.footer__contact-list li,
.footer__contact-list span { display: flex !important; align-items: flex-start !important; gap: 10px !important; color: rgba(255,255,255,.72) !important; font-size: 14px !important; line-height: 1.5 !important; }
.footer__contact-list li svg,
.site-footer .footer__contact-list li svg { color: #fff !important; flex-shrink: 0 !important; margin-top: 2px !important; }
.footer__contact-list a { color: rgba(255,255,255,.72) !important; text-decoration: none !important; }
.footer__contact-list a:hover,
.site-footer .footer__contact-list a:hover { color: #fff !important; }
.footer__social-link { background: rgba(255,255,255,.16) !important; color: #fff !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all .18s !important; }
.footer__social-link svg { color: #fff !important; }
.footer__social-link:hover { background: #fff !important; color: #1a1a1a !important; transform: translateY(-2px) !important; }
.footer__social-link:hover svg { color: #1a1a1a !important; }
.footer__payments { background: rgba(255,255,255,.04) !important; border-top: 1px solid rgba(255,255,255,.12) !important; padding: 14px 0 !important; }
.footer__payments-label { color: rgba(255,255,255,.55) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; }
.footer__bottom { background: rgba(255,255,255,.04) !important; border-top: 1px solid rgba(255,255,255,.12) !important; padding: 14px 0 !important; }
.footer__bottom-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap !important; }
.footer__copyright,
.footer__bottom p,
.footer__bottom span,
.footer__bottom * { font-size: 13px !important; color: rgba(255,255,255,.5) !important; }
.footer__bottom-links { display: flex !important; gap: 16px !important; }
.footer__bottom-links a { font-size: 13px !important; color: rgba(255,255,255,.5) !important; text-decoration: none !important; }
.footer__bottom-links a:hover { color: #fff !important; }
.site-footer svg { color: rgba(255,255,255,.65) !important; }
.site-footer .footer__col-title svg { color: #fff !important; }

/* Footer Responsive */
@media (max-width: 1024px) {
    .footer__grid { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; }
    .footer__col--brand { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
    .footer__grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .footer__col--brand { grid-column: auto !important; }
}

/* ── FOOTER TRUST BADGES ── */
.footer__trust {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 16px 0 20px !important;
}
.footer__trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: rgba(255,255,255,.72) !important;
}
.footer__trust-item svg {
    color: #fff !important;
    flex-shrink: 0 !important;
}

/* ── FOOTER WHATSAPP CTA ── */
.footer__wa-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 18px !important;
    padding: 10px 18px !important;
    background: #25d366 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: background .18s, transform .18s !important;
}
.footer__wa-cta:hover {
    background: #1ebe5d !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}
.footer__wa-cta svg { color: #fff !important; }

/* ── Product card colour swatches (real colours, click-to-preview) ── */
.product-card__swatches {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.swatch-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    padding: 0;
    border: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    transition: outline-color .15s, transform .15s;
    flex-shrink: 0;
}
.swatch-dot:hover { transform: scale(1.12); }
.swatch-dot.is-active { outline-color: #1a1a1a; }

/* ── Product card: cleaner, borderless look ── */
.product-card {
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}