/* Some mobile browsers treat a first tap on an element as only a hover/focus
   event (to support hover-dependent sites) and require a second tap to actually
   activate it. This opts buttons and links out of that delay. */
button, .btn, a[class*="btn"], input[type="submit"] { touch-action: manipulation; }

/* Guard against any element that's even a few px wider than the viewport (a long
   line of text, a carousel track, a flex row) forcing the whole page to shrink-to-fit
   and "zoom out" on mobile browsers. Everything on this site scrolls vertically only.
   Scoped to a wrapper around the body content (not html/body themselves) because any
   non-visible overflow on html/body breaks `position: sticky` for the nav below - see
   .wrap-menu-desktop. */
.page-overflow-guard { overflow-x: hidden; max-width: 100%; }

/* Homepage Featured Products: on mobile, show a clean 2-per-row grid that
   wraps to as many lines as needed (no horizontal swiping). */
@media (max-width: 767px) {
	.home-featured-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 12px;
		margin-left: 0;
		margin-right: 0;
	}
	.home-featured-row .home-featured-item {
		width: 100%;
		max-width: 100%;
		flex: none;
		padding-left: 0;
		padding-right: 0;
	}
}

/* Shop By Category: on mobile, one swipeable horizontal line instead of stacking */
@media (max-width: 767px) {
	.category-row {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		margin-left: 0;
		margin-right: 0;
		padding-bottom: 6px;
	}
	.category-row .category-item {
		flex: 0 0 78%;
		max-width: 78%;
		scroll-snap-align: start;
		padding-left: 6px;
		padding-right: 6px;
	}
}

/* Toast-style flash messages (cart add/remove, form errors) */
.toast-msg-wrap {
	position: fixed; top: 18px; right: 18px; z-index: 3000;
	display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
.toast-msg-wrap .flash-msg {
	display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 13px 18px; font-size: 14px;
	transform: translateX(120%); opacity: 0; transition: transform .3s ease, opacity .3s ease;
}
.toast-msg-wrap .flash-msg.show { transform: translateX(0); opacity: 1; }
.toast-msg-wrap .flash-success { color: #2e6b2e; border-left: 4px solid #2e6b2e; }
.toast-msg-wrap .flash-error { color: #a12b2b; border-left: 4px solid #a12b2b; }
.toast-msg-wrap .flash-msg i { font-size: 18px; flex: none; }
@media (max-width: 480px) {
	.toast-msg-wrap { left: 12px; right: 12px; top: 12px; max-width: none; }
}

/* Shop page: subcategory pills - revealed under the active top-level category */
.subcategory-panel {
	display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px;
	background: #f8f6f2; border-radius: 8px; border: 1px solid #ece7de;
}
.subcategory-pill {
	font-size: 12.5px; color: #666; background: #fff; border: 1px solid #e5e0d6;
	border-radius: 20px; padding: 6px 16px; transition: all .2s;
}
.subcategory-pill:hover { border-color: #b05d5d; color: #b05d5d; text-decoration: none; }
.subcategory-pill-active { background: #b05d5d; border-color: #b05d5d; color: #fff; font-weight: 600; }
.subcategory-pill-active:hover { color: #fff; }

/* Shop page: grid / list view toggle */
.view-toggle-group { display: flex; gap: 6px; }
.view-toggle-btn {
	width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	border: 1px solid #ebebeb; border-radius: 4px; background: #fff; color: #808080; cursor: pointer; transition: all .2s;
}
.view-toggle-btn.active, .view-toggle-btn:hover { border-color: #2b2b2b; color: #2b2b2b; }
.isotope-grid.shop-list-view .isotope-item { width: 100% !important; max-width: 100% !important; }
.isotope-grid.shop-list-view .block2 { display: flex; align-items: center; gap: 20px; }
.isotope-grid.shop-list-view .block2-pic { width: 160px; flex: none; }
.isotope-grid.shop-list-view .block2-txt { flex: 1; padding-top: 0; }
.isotope-grid.shop-list-view .block2-pic .block2-btn { display: none; }
@media (max-width: 575px) {
	.isotope-grid.shop-list-view .block2-pic { width: 100px; }
}

/* Product page: SKU/category meta line under the title */
.product-meta-line { font-size: 12px; color: #999; margin: 0 0 14px; letter-spacing: .2px; }
.product-meta-sep { margin: 0 6px; }

/* Product page: trust bar + risk reversal (below product detail, above related) */
.product-trust-bar .product-trust-stat {
	display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #2b2b2b;
	background: #fff; border: 1px solid #ece7de; border-radius: 30px; padding: 11px 24px;
	box-shadow: 0 3px 10px rgba(0,0,0,.05);
}
.product-trust-bar .product-trust-stat i { color: #b05d5d; font-size: 16px; }
.product-trust-bar .row { margin-left: -8px; margin-right: -8px; }
.product-trust-bar .row > div { padding-left: 8px; padding-right: 8px; }
.product-trust-pillar {
	display: flex; align-items: flex-start; gap: 15px; height: 100%; padding: 22px;
	background: #fff; border: 1px solid #ece7de; border-radius: 12px;
	box-shadow: 0 3px 14px rgba(0,0,0,.04); text-align: left; transition: box-shadow .2s, transform .2s;
}
.product-trust-pillar:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); transform: translateY(-2px); }
.product-trust-pillar i {
	width: 46px; height: 46px; flex: none; border-radius: 50%;
	background: #f8f0ee; color: #b05d5d; font-size: 19px;
	display: flex; align-items: center; justify-content: center;
}
.product-trust-pillar strong { display: block; font-size: 14px; color: #2b2b2b; margin-bottom: 5px; }
.product-trust-pillar p { font-size: 12.5px; color: #808080; line-height: 1.5; margin: 0; }
@media (max-width: 767px) {
	.product-trust-bar .row { display: flex; flex-direction: column; gap: 12px; margin: 0; }
	.product-trust-bar .row > div { width: 100%; max-width: 100%; padding: 0; }
}

/* Homepage heritage quote (above Featured Products) */
.heritage-quote-section { padding-top: 90px; padding-bottom: 90px; }
.heritage-quote-row { display: flex; align-items: center; justify-content: center; gap: 40px; max-width: 900px; margin: 0 auto; }
.heritage-quote-img { width: 110px; height: 110px; object-fit: contain; flex: none; }
.heritage-quote-text {
	font-family: PlayfairDisplay-Regular, serif; font-style: italic; font-weight: 400;
	font-size: 17px; line-height: 1.6; color: #555; text-align: center; margin: 0; flex: 1;
}
@media (max-width: 767px) {
	.heritage-quote-section { padding-top: 55px; padding-bottom: 55px; }
	.heritage-quote-row { gap: 16px; }
	.heritage-quote-img { width: 60px; height: 60px; }
	.heritage-quote-text { font-size: 14px; }
}
@media (max-width: 480px) {
	.heritage-quote-row { flex-direction: column; gap: 14px; }
	.heritage-quote-img { width: 70px; height: 70px; }
}

/* Mini-cart sidebar: compact qty stepper + remove button so items can be edited
   without leaving the sidebar (matters most on mobile, where it's the only cart view). */
.mini-cart-num-product { width: 90px; height: 32px; }
.mini-cart-num-product .btn-num-product-up,
.mini-cart-num-product .btn-num-product-down { width: 28px; }
.mini-cart-num-product .num-product { width: calc(100% - 56px); font-size: 12px; }
.header-cart-item-txt .how-remove-cart { position: static; }

/* Hero banner (slick1) arrows are opacity:0 by default in the template, only revealed
   via `.wrap-slick1:hover` - which never fires on a touchscreen, so the carousel looks
   static/broken on mobile even though swipe already works. Make them visible outright
   below the desktop breakpoint; the swipe/autoplay mechanics are untouched. */
@media (max-width: 991px) {
	.arrow-slick1 { opacity: 1; font-size: 34px; color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.4); }
}

/* Mobile header: center the logo and make it bigger, regardless of the
   hamburger/cart icons' widths on either side (absolute-centered, not flex-centered). */
@media (max-width: 991px) {
	/* .wrap-menu-desktop moved out from inside .container-menu-desktop (see header.ejs)
	   so it can stick across the full page - it no longer inherits that div's
	   `display: none` on mobile, so hide it explicitly here instead. */
	.wrap-menu-desktop { display: none; }
	.wrap-header-mobile { position: relative; justify-content: flex-end; padding: 10px 16px; }
	.logo-mobile {
		flex-grow: 0; position: absolute; left: 50%; top: 50%;
		transform: translate(-50%, -50%); height: 130%; width: 160px; padding-right: 0;
	}
	.logo-mobile img { max-width: 100%; }

	/* Minimal circular icon buttons: cart + hamburger, grouped on the right */
	.mobile-nav-left { display: flex; align-items: center; gap: 8px; }
	.wrap-header-mobile .wrap-icon-header { flex-grow: 0; margin: 0; }
	.wrap-header-mobile .icon-header-item {
		width: 36px; height: 36px; font-size: 15px; display: flex; align-items: center; justify-content: center;
		background: #f7f4f0; border-radius: 50%; color: #2b2b2b; transition: background .2s;
	}
	.wrap-header-mobile .icon-header-item:active { background: #ece6dd; }
	.wrap-header-mobile .icon-header-noti::after {
		top: -2px; right: -2px; background: #b05d5d; font-size: 10px; min-width: 16px; height: 16px; line-height: 16px;
	}
	.wrap-header-mobile .btn-show-menu-mobile {
		width: 32px; height: 32px; justify-content: center; border-radius: 50%; background: #f7f4f0; margin: 0;
		transform: scale(0.55);
	}
}

/* Floating WhatsApp button - fixed bottom-right, shown site-wide */
.floating-whatsapp-btn {
	position: fixed; right: 20px; bottom: 20px; z-index: 1000;
	width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 28px;
	box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s ease;
}
.floating-whatsapp-btn:hover { transform: scale(1.08); color: #fff; }
@media (max-width: 576px) {
	.floating-whatsapp-btn { right: 14px; bottom: 14px; width: 50px; height: 50px; font-size: 25px; }
}

/* Desktop nav: the template's default (v1) header is transparent and fixed, with
   jQuery constantly recalculating its `top` offset against the top-bar's height as
   you scroll (to fake a "sticky below the top-bar" effect) - that JS has been removed
   (see tpl-js/main.js) in favour of plain `position: sticky`, which the browser
   handles natively with no gap/jump and no scroll-position math. Solid background
   always (no more transparent-over-hero), and it slides away on scroll-down /
   reappears on scroll-up instead of staying pinned on screen at all times. */
.wrap-menu-desktop {
	position: sticky;
	top: 0;
	left: auto;
	background-color: #fff !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
	transition: transform .3s ease;
	z-index: 1100;
}
.wrap-menu-desktop.nav-hidden { transform: translateY(-100%); }

/* Mobile menu dropdown - match the site palette instead of the template default blue */
.main-menu-m { background-color: #1f2024; }
.main-menu-m > li + li { border-top: 1px solid rgba(255,255,255,.08); }
.main-menu-m > li > a:hover { color: #d99b9b; }
.sub-menu-m a:hover { color: #b05d5d; }

/* Product page: viewer count + ethically-sourced trust note + recent-purchase toast */
.product-viewers { display: flex; align-items: center; gap: 6px; }
.product-viewers i { color: #e0a54b; }
.product-trust-note {
	display: flex; align-items: flex-start; gap: 14px; margin-top: 24px; padding: 16px 18px;
	background: #f8f6f2; border-radius: 8px; border: 1px solid #ece7dd;
}
.product-trust-note i { font-size: 22px; color: #b05d5d; flex: none; margin-top: 2px; }
.product-trust-note strong { display: block; font-size: 14px; margin-bottom: 4px; color: #222; }
.product-trust-note p { font-size: 12.5px; color: #777; margin: 0; line-height: 1.5; }

.recent-purchase-toast {
	position: fixed; left: 20px; bottom: 20px; z-index: 500;
	display: flex; align-items: center; gap: 10px;
	background: #fff; border-radius: 8px; padding: 14px 18px; max-width: 320px;
	box-shadow: 0 8px 24px rgba(0,0,0,.15);
	transform: translateY(20px); opacity: 0; transition: transform .4s ease, opacity .4s ease;
}
.recent-purchase-toast.show { transform: translateY(0); opacity: 1; }
.recent-purchase-toast i { color: #2ecc71; font-size: 20px; flex: none; }
.recent-purchase-toast span { font-size: 12.5px; color: #333; line-height: 1.4; }
@media (max-width: 576px) {
	.recent-purchase-toast { left: 12px; right: 74px; bottom: 12px; max-width: none; }
}

/* Homepage first-visit promo popup - just an image, a close button and a
   "don't show again" button, no form/newsletter signup on the static site. */
.promo-popup-overlay {
	position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
	background: rgba(20,20,20,.6); padding: 20px; opacity: 0; transition: opacity .3s ease;
}
.promo-popup-overlay[hidden] { display: none; }
.promo-popup-overlay.show { opacity: 1; }
.promo-popup-box {
	position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 10px;
	overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35);
	transform: scale(.95); transition: transform .3s ease;
}
.promo-popup-overlay.show .promo-popup-box { transform: scale(1); }
.promo-popup-box img { display: block; width: 100%; height: auto; }
.promo-popup-close {
	position: absolute; top: 10px; right: 12px; z-index: 1; background: rgba(0,0,0,.45); border: none;
	width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; color: #fff; cursor: pointer;
}
.promo-popup-close:hover { background: rgba(0,0,0,.7); }
.promo-popup-dontshow {
	display: block; width: 100%; padding: 13px; background: #1f2024; color: #fff; border: none;
	font-size: 13px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; transition: background .15s ease;
}
.promo-popup-dontshow:hover { background: #b8894f; }
@media (max-width: 600px) {
	.promo-popup-box { max-width: 92vw; max-height: 90vh; overflow-y: auto; }
}

/* Contact page map embed */
.contact-map-wrap { max-width: 900px; margin: 0 auto; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.contact-map-wrap iframe { display: block; }

/* Continuous scrolling marquee for the top announcement bar */
.marquee-wrap { flex: 1; overflow: hidden; margin-right: 20px; }
.marquee-track { display: inline-flex; white-space: nowrap; animation: nc-marquee 22s linear infinite; }
@keyframes nc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* .header-spacer no longer needed: it existed to clear the old position:fixed
   nav, which has since become position:sticky (see .wrap-menu-desktop) and
   now occupies its own space in normal flow - an extra spacer on top of that
   would just double the gap. Kept at 0 rather than removing the div/markup. */
.header-spacer { height: 0; }

/* Product cards (block2) - force every card's image to the same size regardless
   of each photo's natural aspect ratio (main.css has no sizing rule at all here,
   so real photos of different shapes made cards uneven heights) */
.block2-pic { aspect-ratio: 3 / 4; overflow: hidden; background: #f2f2f2; }
.block2-pic img { width: 100%; height: 100%; object-fit: cover; }

/* Category banner tiles - force all 4 to the same size regardless of each
   photo's natural aspect ratio (main.css has no sizing rule for these at all) */
.sec-banner .wrap-pic-w { height: 380px; overflow: hidden; }
.sec-banner .wrap-pic-w img { width: 100%; height: 100%; object-fit: cover; }

/* Category banner tiles - permanent legibility scrim covering the whole tile
   (text sits at both the top and bottom of it), regardless of how light the
   photo underneath is (main.css only darkens on hover, and only at the top) */
.block1-txt {
	background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.18) 35%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.65) 100%);
}
.block1-name, .block1-info { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.block1-txt:hover .block1-name, .block1-txt:hover .block1-info { color: #fff; }

/* Video reels strip (homepage, admin-managed via Admin > Video Reels) */
.video-reel-card { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: #000; }
.video-reel-media { width: 100%; height: 100%; object-fit: cover; }
.video-reel-caption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
	color: #fff; font-family: Poppins-SemiBold, sans-serif; font-size: 13px;
}

/* Features marquee - continuous scroll strip, black bg / white icons+text */
.feature-marquee { background: #000; overflow: hidden; padding: 16px 0; }
.feature-marquee-track { display: inline-flex; white-space: nowrap; animation: nc-feature-marquee 30s linear infinite; }
.feature-marquee-item { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: Poppins-SemiBold, sans-serif; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; padding: 0 36px; border-right: 1px solid rgba(255,255,255,.25); }
.feature-marquee-item i { color: #fff; font-size: 17px; }
@keyframes nc-feature-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Promo banner (homepage, admin-editable: text/colour/image) */
.promo-section { position: relative; padding: 72px 0; background-size: cover; background-position: center; overflow: hidden; }
.promo-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.15); }
.promo-content { position: relative; z-index: 1; text-align: center; }
.promo-eyebrow { display: block; font-family: Poppins-SemiBold, sans-serif; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 14px; }
.promo-title { font-family: PlayfairDisplay-Bold, serif; font-size: 44px; line-height: 1.15; color: #fff; margin: 0 0 16px; }
.promo-desc { font-family: Poppins-Regular, sans-serif; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 480px; margin: 0 auto 32px; }
.promo-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 15px 42px; background: #fff; color: #222;
	font-family: Poppins-SemiBold, sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
	border-radius: 30px; border: 1px solid #fff; transition: all .25s ease;
}
.promo-btn:hover { background: transparent; color: #fff; }
@media (max-width: 576px) {
	.promo-title { font-size: 32px; }
}

/* Small additions on top of the Coza template (main.css / util.css) for
   Nisha Collection specific data: sale price, stock status, size picker,
   WhatsApp buy button, flash messages, and the admin panel. */

.price-compare,
.price-compare-detail {
	text-decoration: line-through;
	color: #b2b2b2;
	font-size: 13px;
	margin-left: 8px;
}

.cl-instock { color: #2e6b2e; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
.cl-outstock { color: #d32f2f; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }

/* Size picker (replaces the template's select2 dropdown - no extra JS needed) */
.size-options { display: flex; gap: 8px; flex-wrap: wrap; }
.size-pill { border: 1px solid #ccc; border-radius: 3px; padding: 8px 16px; cursor: pointer; font-size: 13px; }
.size-pill input { display: none; }
.size-pill:has(input:checked) { background: #222; color: #fff; border-color: #222; }

.color-options { display: flex; gap: 10px; flex-wrap: wrap; }
.color-swatch { cursor: pointer; display: inline-block; padding: 3px; border: 2px solid transparent; border-radius: 50%; line-height: 0; }
.color-swatch input { display: none; }
.color-swatch span { display: block; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.color-swatch:has(input:checked) { border-color: #222; }
.color-swatch-oos { cursor: not-allowed; opacity: .35; position: relative; }

/* Product detail: qty + Add to Cart + Buy-on-WhatsApp share one row - the template's
   default 161px button min-width is too wide for three items in the narrower info column. */
.product-action-row .size-101 { min-width: 0; padding-left: 14px; padding-right: 14px; }
.product-action-row .wrap-num-product { margin-right: 12px; }

/* About page */
.about-hero { position: relative; height: 420px; background-size: cover; background-position: center; }
.about-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,20,.72) 0%, rgba(20,20,20,.35) 55%, rgba(20,20,20,.1) 100%); display: flex; align-items: center; }
.about-hero-eyebrow { display: block; color: #f2c14e; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.about-hero-title { color: #fff; font-family: PlayfairDisplay-Bold, serif; font-size: 40px; max-width: 560px; line-height: 1.25; margin: 0; }
.about-img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 10px; }
.about-heritage-row { align-items: center; }
.about-stamp-accent { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 18px; border-top: 1px solid #e5e5e5; }
.about-stamp-accent img { width: 70px; height: auto; border-radius: 4px; flex: none; }
.about-stamp-accent span { font-family: PlayfairDisplay-Bold, serif; font-style: italic; color: #555; font-size: 15px; line-height: 1.4; }
.about-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.value-item { text-align: center; padding: 0 10px; }
.value-item i { font-size: 34px; color: #b05d5d; margin-bottom: 14px; display: inline-block; }
.value-item h5 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #222; }
.value-item p { font-size: 13.5px; color: #777; line-height: 1.6; }
@media (max-width: 768px) {
	.about-hero-title { font-size: 28px; }
	.about-values-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hero slide mobile focal point (Admin > Hero Slides > Mobile Focal Point) */
@media (max-width: 768px) {
	.item-slick1 { background-position: var(--mobile-focal, center) !important; position: relative; }

	/* Push the text block to the bottom (matching the admin mobile preview) instead of
	   the template's default vertical-center, and add a white gradient behind it for legibility. */
	.item-slick1 .flex-col-l-m { justify-content: flex-end !important; padding-bottom: 50px; position: relative; z-index: 2; }
	.item-slick1::after {
		content: '';
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 55%;
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 55%, rgba(255,255,255,.92) 100%);
		pointer-events: none;
		z-index: 1;
	}

	/* The template's purple button (.bg1) has poor contrast against the light gradient. */
	.item-slick1 .flex-col-l-m .bg1 { background-color: #1f2024 !important; }
}

/* Trust badges strip (homepage, before Video Reels) */
.trust-badges-section { border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.trust-badges-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 70px; }
.trust-badges-row img { height: 170px; width: auto; max-width: 340px; object-fit: contain; }
@media (max-width: 768px) {
	.trust-badges-row { gap: 40px; }
	.trust-badges-row img { height: 120px; max-width: 260px; }
}
@media (max-width: 480px) {
	.trust-badges-row { gap: 26px; }
	.trust-badges-row img { height: 85px; max-width: 190px; }
}

/* WhatsApp buy-now button */
.bg-whatsapp { background-color: #25D366; }
.bg-whatsapp:hover { background-color: #1ea952; }

/* Quick-buy button on product cards (WhatsApp icon, next to wishlist spot) */
.btn-quickbuy-b2 {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; background: #25D366; color: #fff;
	border: none; cursor: pointer; font-size: 14px;
}
.btn-quickbuy-b2:hover { background: #1ea952; }

/* Checkout form fields (generic, full-width - the template's own inputs are fixed-width) */
.field-group { margin-bottom: 20px; }
.field-group label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; color: #333; font-family: Poppins-SemiBold, sans-serif; }
.field-group input[type=text], .field-group input[type=tel], .field-group input[type=email], .field-group textarea {
	width: 100%; padding: 12px 16px; border: 1px solid #e6e6e6; font-family: Poppins-Regular, sans-serif; font-size: 14px; color: #333;
}
.field-group input:focus, .field-group textarea:focus { outline: none; border-color: #717fe0; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row .field-group { flex: 1; min-width: 160px; }
.order-summary-item { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; color: #555; }

.success-icon { width: 64px; height: 64px; border-radius: 50%; background: #2e6b2e; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }

/* Flash messages */
.flash-msg { text-align: center; padding: 12px 15px; font-size: 14px; }
.flash-success { background: #eaf4ea; color: #2e6b2e; }
.flash-error { background: #fbeaea; color: #a12b2b; }

/* Cart page */
.table-shopping-cart .column-6 { width: 50px; text-align: center; padding-right: 20px; }
.how-remove-cart { background: none; border: none; color: #999; cursor: pointer; font-size: 15px; }
.how-remove-cart:hover { color: #d32f2f; }
.form-errors { background: #fbeaea; color: #a12b2b; padding: 14px 20px; margin-bottom: 20px; }
.form-errors ul { margin: 0; padding-left: 18px; }

/* ---------------------------------------------------------------- */
/* Admin panel - own design system (dark sidebar, warm gold accent   */
/* matching the logo, soft-elevation cards)                          */
/* ---------------------------------------------------------------- */
.admin-body {
	--adm-accent: #b8894f;
	--adm-accent-dark: #96703d;
	--adm-bg: #f4f5f8;
	--adm-ink: #1f2024;
	--adm-text: #4a4c56;
	--adm-muted: #8b8d99;
	--adm-border: #e9eaef;
	--adm-sidebar: #191a20;
	--adm-sidebar-text: #a6a8b3;
	--adm-radius: 10px;
	--adm-shadow: 0 1px 2px rgba(16,17,20,.04), 0 4px 16px rgba(16,17,20,.06);
	background: var(--adm-bg);
	font-family: Poppins-Regular, sans-serif;
	color: var(--adm-text);
}
.admin-body a { text-decoration: none; }

/* Sidebar */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
	width: 250px; background: linear-gradient(180deg, var(--adm-sidebar) 0%, #101116 100%);
	color: var(--adm-sidebar-text); padding: 28px 18px; display: flex; flex-direction: column;
	position: sticky; top: 0; height: 100vh;
}
.admin-logo-img { display: block; margin-bottom: 8px; padding: 0 6px; }
.admin-logo-img img { max-width: 100%; height: auto; display: block; }
.admin-sidebar .admin-logo-img { margin-bottom: 28px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-nav a {
	display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px;
	font-size: 13.5px; font-weight: 500; color: var(--adm-sidebar-text);
	transition: background .15s ease, color .15s ease; letter-spacing: .01em;
}
.admin-nav a i { font-size: 17px; width: 18px; text-align: center; color: inherit; opacity: .85; }
.admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav a.admin-nav-active {
	background: rgba(184,137,79,.16); color: #fff;
	box-shadow: inset 3px 0 0 var(--adm-accent);
}
.admin-nav a.admin-nav-active i { color: var(--adm-accent); opacity: 1; }
.admin-nav-divider { height: 1px; background: rgba(255,255,255,.08); margin: 16px 6px; }
.admin-nav-view-store {
	display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px;
	font-size: 13px; color: var(--adm-sidebar-text); margin-bottom: 6px;
}
.admin-nav-view-store:hover { color: #fff; }
.admin-nav-view-store i { font-size: 15px; width: 18px; text-align: center; }
.admin-logout-form { margin: 0 6px; }
.admin-logout-form button {
	display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
	background: none; border: none; cursor: pointer; padding: 11px 8px;
	color: var(--adm-sidebar-text); font-size: 13px; font-family: inherit;
	border-top: 1px solid rgba(255,255,255,.08);
}
.admin-logout-form button:hover { color: #fff; }
.admin-logout-form button i { font-size: 15px; width: 18px; text-align: center; }

/* Main content area */
.admin-main { flex: 1; padding: 36px 42px; overflow-x: auto; min-width: 0; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.admin-header h1 { font-family: PlayfairDisplay-Bold, serif; font-size: 28px; color: var(--adm-ink); margin: 0; }

/* Flash messages */
.flash-msg { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 13px 18px; margin-bottom: 22px; font-size: 13.5px; font-weight: 500; }
.flash-msg i { font-size: 17px; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 30px; }
.stat-card {
	background: #fff; border-radius: var(--adm-radius); padding: 22px 24px; border: 1px solid var(--adm-border);
	box-shadow: var(--adm-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,17,20,.08); }
.stat-icon { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 16px; }
.stat-card-1 .stat-icon { background: #eef1fd; color: #4f5fd9; }
.stat-card-2 .stat-icon { background: #fdf1dc; color: #c07a0a; }
.stat-card-3 .stat-icon { background: #e7f7ef; color: #189a56; }
.stat-card-4 .stat-icon { background: #fbe9ec; color: #c0392b; }
.stat-value { display: block; font-size: 32px; font-weight: 700; color: var(--adm-ink); font-family: Poppins-Bold, sans-serif; line-height: 1.2; }
.stat-label { font-size: 12px; color: var(--adm-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; display: block; }

/* Panels */
.admin-panel { background: #fff; border: 1px solid var(--adm-border); border-radius: var(--adm-radius); padding: 28px; margin-bottom: 24px; box-shadow: var(--adm-shadow); }
.admin-panel h2 { font-family: PlayfairDisplay-Bold, serif; font-size: 18px; color: var(--adm-ink); margin: 0 0 16px; }
.admin-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

/* Tables */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--adm-muted); padding: 10px 12px; border-bottom: 1px solid var(--adm-border); letter-spacing: .06em; font-weight: 600; }
.admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--adm-border); font-size: 13.5px; color: var(--adm-text); vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr[onclick] { cursor: pointer; transition: background .12s ease; }
.admin-table tbody tr[onclick]:hover { background: #faf8f5; }
.admin-table-actions { display: flex; gap: 14px; }
.admin-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--adm-border); }
.subcategory-cell { max-width: 320px; }
.subcategory-pill {
	display: inline-flex; align-items: center; gap: 6px; background: #f4f5f8; border: 1px solid var(--adm-border);
	border-radius: 20px; padding: 4px 6px 4px 12px; font-size: 12.5px; color: var(--adm-ink); margin: 0 6px 6px 0;
}
.subcategory-pill a { color: var(--adm-muted); font-size: 12px; }
.subcategory-pill a:hover { color: var(--adm-accent); }
.subcategory-pill form { display: contents; }
.subcategory-pill button {
	background: none; border: none; cursor: pointer; color: var(--adm-muted); font-size: 15px; line-height: 1; padding: 0 2px;
}
.subcategory-pill button:hover { color: #c0392b; }
.subcategory-add-link { display: block; margin-top: 4px; font-size: 12.5px; }
.variant-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.variant-row input[type=text] { flex: 1; }
.variant-row input[type=color] { width: 44px; height: 38px; padding: 3px; flex: none; }
.variant-row input[type=number] { width: 100px; flex: none; }

/* Links & buttons */
.btn-link { color: var(--adm-accent); font-weight: 600; font-size: 13px; background: none; border: none; cursor: pointer; padding: 0; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn-link-danger { color: #c0392b; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 24px; border-radius: 7px; font-family: Poppins-SemiBold, sans-serif; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; border: 1px solid transparent; cursor: pointer; text-align: center; text-decoration: none; transition: all .15s ease; }
.btn-primary { background: var(--adm-ink); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.btn-primary:hover { background: var(--adm-accent); color: #fff; }
.btn-secondary { background: #fff; color: var(--adm-ink); border-color: #d9dbe1; margin-left: 10px; }
.btn-secondary:hover { border-color: var(--adm-accent); color: var(--adm-accent); }
.btn-outline { background: transparent; color: var(--adm-ink); border-color: var(--adm-border); }
.btn-outline:hover { background: var(--adm-ink); color: #fff; border-color: var(--adm-ink); }
.btn-sm { padding: 7px 16px; font-size: 11px; }
.btn-full { display: flex; width: 100%; }

/* Status badges */
.status-badge { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 11px; text-transform: capitalize; font-weight: 600; letter-spacing: .02em; }
.status-pending { background: #fdf1dc; color: #a3690a; }
.status-confirmed { background: #dcecfd; color: #0a5aa3; }
.status-shipped { background: #e6dcfd; color: #5a0aa3; }
.status-delivered { background: #dcfde3; color: #0a8a2f; }
.status-cancelled { background: #fddcdc; color: #a30a0a; }

/* Forms */
.admin-form { max-width: 660px; }
.admin-filters { max-width: none; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--adm-border); }
.admin-filters .field-group { margin-bottom: 0; min-width: 160px; }
.admin-filters .field-group.grow { flex: 1; min-width: 220px; }
.admin-filters .btn { margin-right: 10px; }
.admin-form .field-group { margin-bottom: 20px; }
.admin-form label { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; color: var(--adm-ink); }
.admin-form input[type=text], .admin-form input[type=email], .admin-form input[type=number], .admin-form input[type=password], .admin-form input[type=file], .admin-form select, .admin-form textarea {
	width: 100%; padding: 12px 15px; border: 1px solid #d9dbe1; border-radius: 8px; font-family: Poppins-Regular, sans-serif; font-size: 14px; color: var(--adm-ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
	outline: none; border-color: var(--adm-accent); box-shadow: 0 0 0 3px rgba(184,137,79,.14);
}
.admin-form input[type=file] { padding: 9px 12px; }
.admin-form .field-row { display: flex; gap: 18px; }
.admin-form .field-row .field-group { flex: 1; }
.admin-form .checkbox-row { display: flex; gap: 26px; align-items: center; }
.admin-form .checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 500; text-transform: none; font-size: 14px; color: var(--adm-text); }
.current-images { display: flex; gap: 10px; margin-top: 10px; }
.current-images img { width: 70px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--adm-border); }
.field-hint { font-size: 12px; color: var(--adm-muted); margin-top: 6px; line-height: 1.5; }
.order-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.category-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.category-pills .pill,
a.pill { padding: 8px 18px; border: 1px solid var(--adm-border); border-radius: 30px; font-size: 12.5px; text-transform: capitalize; color: var(--adm-text); background: #fff; transition: all .15s ease; }
.category-pills .pill.active,
a.pill.active { background: var(--adm-ink); color: #fff; border-color: var(--adm-ink); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--adm-muted); }
.empty-state:before { content: '\f180'; font-family: 'Material-Design-Iconic-Font'; display: block; font-size: 34px; color: #d5d7de; margin-bottom: 10px; }
.rupee { font-family: inherit; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; }
.summary-total { font-weight: 700; font-size: 15px; border-top: 1px solid var(--adm-border); margin-top: 8px; padding-top: 12px; }

/* Login page */
.admin-login-page {
	min-height: 100vh; display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 50% 0%, #23242c 0%, #14151a 60%);
}
.admin-login-form {
	background: #fff; border-radius: 14px; padding: 46px 42px; width: 380px; text-align: center;
	box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.admin-login-form .admin-logo-img { margin: 0 auto 8px; max-width: 220px; }
.admin-login-form h2 { font-family: PlayfairDisplay-Bold, serif; font-size: 20px; color: var(--adm-ink, #1f2024); margin: 4px 0 26px; font-weight: 600; }
.admin-login-form .field-group { margin-bottom: 18px; text-align: left; }
.admin-login-form label { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; color: #1f2024; }
.admin-login-form input { width: 100%; padding: 12px 15px; border: 1px solid #d9dbe1; border-radius: 8px; font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.admin-login-form input:focus { outline: none; border-color: #b8894f; box-shadow: 0 0 0 3px rgba(184,137,79,.14); }
.admin-login-submit { width: 100%; padding: 13px; background: #1f2024; color: #fff; border: none; border-radius: 8px; font-family: Poppins-SemiBold, sans-serif; font-size: 13px; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; transition: background .15s ease; }
.admin-login-submit:hover { background: #b8894f; }

@media (max-width: 900px) {
	.admin-sidebar { width: 74px; padding: 20px 10px; }
	.admin-nav a span, .admin-nav-view-store span, .admin-logout-form button span { display: none; }
	.admin-nav a, .admin-nav-view-store, .admin-logout-form button { justify-content: center; }
	.admin-main { padding: 24px 16px; }
	.admin-header h1 { font-size: 22px; }
	.stat-grid { grid-template-columns: repeat(2, 1fr); }
	.order-detail-grid { grid-template-columns: 1fr; }
	.admin-form .field-row { flex-direction: column; }
	.sec-banner .wrap-pic-w { height: 280px; }
}