/* ============================================================
   0. RESET & CUSTOM PROPERTIES
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	/* Prevent iOS font-size inflation */
	-webkit-text-size-adjust: 100%;
}

:root {
	--saffron: #C26A12;
	--saffron-light: #F6E9D2;
	--saffron-dark: #7A3E0B;
	--forest: #476A1E;
	--forest-light: #EEF4E4;
	--forest-mid: #5A7F2B;
	--gold: #B78518;
	--gold-light: #FAF1D2;
	--cream: #FAF6EF;
	--warm-white: #FFFDF9;
	--ink: #2A1607;
	--ink-mid: #4B2E10;
	--muted: #8A7560;
	--border: #E8DDD0;
	--radius: 14px;
	--radius-sm: 8px;
	--shadow: 0 4px 24px rgba(42, 22, 7, .08);
	--shadow-lg: 0 12px 40px rgba(42, 22, 7, .13);

	/* Fluid spacing tokens — scale with viewport */
	--space-xs: clamp(4px, 1vw, 8px);
	--space-sm: clamp(8px, 2vw, 16px);
	--space-md: clamp(16px, 3vw, 24px);
	--space-lg: clamp(24px, 4vw, 40px);
	--space-xl: clamp(32px, 5vw, 60px);

	/* Content max-width */
	--max-w: 1320px;
	/* Horizontal page padding — shrinks on small screens */
	--pad-x: clamp(14px, 4vw, 24px);
}

body {
	font-family: 'Outfit', sans-serif;
	background: var(--warm-white);
	color: var(--ink);
	line-height: 1.6;
	overflow-x: hidden;
}

/* ============================================================
   1. FLUID TYPOGRAPHY  (base = mobile, grows to desktop)
   Uses clamp(min, preferred, max) — no breakpoint needed.
   ============================================================ */

/* Announcement bar */
.ann-bar {
	font-size: clamp(11px, 2.5vw, 13px);
}

/* Hero heading */
.hero-h1 {
	font-size: clamp(26px, 6vw, 52px);
	line-height: 1.1;
}

/* Hero sub-text */
.hero-sub {
	font-size: clamp(13px, 2.5vw, 15.5px);
}

/* Section headings */
.sec-hdr h2 {
	font-size: clamp(22px, 4.5vw, 34px);
}

/* Vendor teaser heading */
.vt-content h2 {
	font-size: clamp(20px, 4vw, 30px);
}

/* Newsletter heading */
.nl-content h2 {
	font-size: clamp(20px, 4vw, 32px);
}

/* Product card name */
.pname {
	font-size: clamp(12px, 2vw, 13.5px);
}

/* Product current price */
.pcurr {
	font-size: clamp(14px, 2.5vw, 16px);
}

/* Banner heading */
.bnr-content h3 {
	font-size: clamp(16px, 3vw, 21px);
}

/* ============================================================
   2. BASE LAYOUT  (320px — single column, touch-first)
   All layout here targets the smallest viewport.
   ============================================================ */

/* ── Announcement Bar ── */
.ann-bar {
	padding: 10px var(--pad-x);
	text-align: center;
	background: var(--forest);
	color: #d4f0b4;
	font-weight: 500;
	letter-spacing: .03em;
	line-height: 1.5;
}

.ann-bar span {
	opacity: .55;
	margin: 0 6px;
}

/* ── Header ── */
header {
	background: rgba(255, 253, 249, .97);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 200;
	box-shadow: 0 2px 20px rgba(42, 22, 7, .06);
}

.hdr {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 10px var(--pad-x);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	/* Mobile: logo + actions row, search full-width below */
}

/* Logo */
.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex-shrink: 0;
}

.logo img {
	width: clamp(48px, 10vw, 80px);
	height: clamp(48px, 10vw, 80px);
	border-radius: 12px;
	object-fit: contain;
	padding: 3px;
}

/* Search — full width on mobile, sits on second row */
.search-wrap {
	order: 3;
	width: 100%;
	flex: 0 0 100%;
	height: 46px;
	display: flex;
	border: 1.5px solid var(--border);
	border-radius: 40px;
	overflow: hidden;
	background: #fff;
	transition: border-color .2s;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

.search-wrap:focus-within {
	border-color: var(--saffron);
}

.search-wrap select {
	background: var(--saffron-light);
	border: none;
	outline: none;
	padding: 0 10px;
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	color: var(--saffron-dark);
	font-weight: 600;
	cursor: pointer;
	border-right: 1px solid var(--border);
	/* min tap target */
	min-width: 44px;
}

.search-wrap input {
	flex: 1;
	border: none;
	outline: none;
	padding: 0 12px;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	color: var(--ink);
	background: transparent;
	min-width: 0;
}

.search-wrap button {
	background: linear-gradient(135deg, var(--saffron), var(--gold));
	border: none;
	padding: 0 18px;
	cursor: pointer;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	transition: opacity .2s;
}

.search-wrap button:hover {
	opacity: .85;
}

/* Header action icons */
.hdr-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

.hdr-actions a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-decoration: none;
	color: var(--ink-mid);
	font-size: 10px;
	font-weight: 500;
	/* Touch target */
	min-width: 44px;
	min-height: 44px;
	padding: 4px 8px;
	border-radius: 10px;
	transition: background .15s, color .15s;
	position: relative;
}

.hdr-actions a:hover {
	background: var(--saffron-light);
	color: var(--saffron);
}

.hdr-actions a svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Hide icon labels on smallest screens */
.hdr-actions a span:not(.cart-badge) {
	display: none;
}

.cart-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	background: var(--saffron);
	color: #fff;
	border-radius: 50%;
	font-size: 9px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

/* Sell button — icon only on mobile */
.btn-sell {
	background: var(--forest) !important;
	color: #fff !important;
	border-radius: 40px !important;
	padding: 10px 12px !important;
	font-size: 12px !important;
	font-weight: 600;
	flex-direction: row !important;
	gap: 4px !important;
	white-space: nowrap;
	min-height: 44px;
}

.btn-sell:hover {
	background: var(--forest-mid) !important;
}

.btn-sell svg {
	width: 16px;
	height: 16px;
}

/* Hide text on mobile */
.btn-sell span {
	display: none;
}

/* ── Navigation ── */
nav {
	background: linear-gradient(90deg, var(--ink), #3a1e0a);
	position: sticky;
	top: 0;
	z-index: 199;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	overflow-x: auto;
	scrollbar-width: none;
}

nav::-webkit-scrollbar {
	display: none;
}

.nav-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--pad-x);
	display: flex;
	align-items: center;
	height: 44px;
	/* touch-friendly height */
	gap: 0;
	min-width: max-content;
	/* allow horizontal scroll */
}

nav a {
	text-decoration: none;
	color: rgba(255, 255, 255, .75);
	font-size: 12.5px;
	font-weight: 500;
	padding: 0 11px;
	height: 44px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .15s, background .15s;
}

nav a:hover {
	color: #fff;
	background: rgba(255, 255, 255, .07);
}

nav a.active {
	color: #F5C97A;
	border-bottom-color: #F5C97A;
}

.nav-badge {
	background: var(--saffron);
	color: #fff;
	font-size: 9px;
	padding: 2px 5px;
	border-radius: 20px;
	margin-left: 4px;
	font-weight: 700;
}

.nav-badge.grn {
	background: var(--forest);
}

/* ── Hero ── */
.hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(320px, 60vw, 480px);
	display: flex;
	align-items: center;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #1e0d04 0%, #2A1607 45%, #1a3008 100%);
}

.hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 55%);
}

.hero-img-bg {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: .12;
	mix-blend-mode: luminosity;
}

.hero-radial {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 55%, rgba(194, 106, 18, .2) 0%, transparent 45%),
		radial-gradient(circle at 78% 25%, rgba(71, 106, 30, .25) 0%, transparent 38%);
}

.hero-mandala {
	position: absolute;
	right: -80px;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(200px, 40vw, 500px);
	height: clamp(200px, 40vw, 500px);
	opacity: .055;
	pointer-events: none;
}

.hero-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: var(--space-lg) var(--pad-x);
	/* Single column on mobile */
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	align-items: center;
	position: relative;
	z-index: 1;
	width: 100%;
}

/* Hero cards hidden on mobile */
.hero-cards {
	display: none;
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	backdrop-filter: blur(8px);
	color: #F5C97A;
	font-size: clamp(10px, 2vw, 11.5px);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 40px;
	margin-bottom: 12px;
}

.hero-h1 {
	margin-bottom: 12px;
	text-shadow: 0 8px 30px rgba(0, 0, 0, .3);
	color: #fff;
	font-weight: 700;
}

.hero-h1 em {
	color: #F5C97A;
	font-style: italic;
}

.hero-sub {
	color: rgba(255, 255, 255, .68);
	margin-bottom: 20px;
	max-width: 520px;
	line-height: 1.65;
}

.hero-ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

/* Ensure CTA buttons are tap-friendly */
.btn-primary,
.btn-outline {
	min-height: 44px;
	padding: 10px 22px;
	border-radius: 40px;
	font-family: 'Outfit', sans-serif;
	font-size: clamp(13px, 2.5vw, 14px);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-primary {
	background: linear-gradient(135deg, var(--saffron), var(--gold));
	color: #fff;
	border: none;
	box-shadow: 0 8px 24px rgba(194, 106, 18, .3);
	transition: transform .2s, opacity .2s;
}

.btn-primary:hover {
	transform: translateY(-2px);
	opacity: .9;
}

.btn-outline {
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(6px);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .3);
	font-weight: 500;
	transition: background .2s, border-color .2s;
}

.btn-outline:hover {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .6);
}

.hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 3vw, 28px);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	backdrop-filter: blur(10px);
	padding: 12px clamp(14px, 3vw, 22px);
	border-radius: 20px;
	width: fit-content;
}

.h-stat strong {
	display: block;
	font-size: clamp(18px, 4vw, 22px);
	font-weight: 700;
	color: #fff;
}

.h-stat span {
	font-size: 11px;
	color: rgba(255, 255, 255, .5);
}

/* ── Coupon strip ── */
.coupon-strip {
	background: linear-gradient(90deg, #2A1607, #3d1e09);
	color: rgba(255, 255, 255, .85);
	text-align: center;
	padding: 10px var(--pad-x);
	font-size: clamp(11px, 2.5vw, 13px);
	line-height: 1.5;
}

.coupon-strip strong {
	color: #F5C97A;
}

.coupon-code {
	display: inline-block;
	background: rgba(255, 255, 255, .1);
	border: 1px dashed rgba(255, 255, 255, .35);
	border-radius: 6px;
	padding: 2px 10px;
	margin-left: 6px;
	font-weight: 600;
	letter-spacing: .05em;
	color: #F5C97A;
}

/* ── Trust bar ── */
.trust-bar {
	background: var(--gold-light);
	border-bottom: 1px solid #e8d98a;
	overflow-x: auto;
}

.trust-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--pad-x);
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	/* Scrollable on mobile */
	overflow-x: auto;
	scrollbar-width: none;
	flex-wrap: nowrap;
}

.trust-inner::-webkit-scrollbar {
	display: none;
}

.t-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(11.5px, 2vw, 12.5px);
	color: var(--ink-mid);
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
}

.t-item svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	color: var(--gold);
}

.t-div {
	width: 1px;
	height: 26px;
	background: #d4c870;
	flex-shrink: 0;
}

/* ── Main container ── */
.main {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--pad-x);
}

.section {
	padding: var(--space-xl) 0;
}

/* ── Section header ── */
.sec-hdr {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(16px, 3vw, 28px);
	flex-wrap: wrap;
	gap: 10px;
}

.sec-hdr h2 {
	font-weight: 700;
	color: var(--ink);
}

.sec-hdr h2 em {
	color: var(--saffron);
	font-style: normal;
}

.sec-hdr p {
	color: var(--muted);
	font-size: clamp(12px, 2vw, 14px);
	margin-top: 4px;
}

.sec-hdr a {
	color: var(--saffron);
	text-decoration: none;
	font-size: clamp(12px, 2vw, 13.5px);
	font-weight: 600;
	border-bottom: 1px solid var(--saffron);
	padding-bottom: 1px;
	white-space: nowrap;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	transition: opacity .15s;
}

.sec-hdr a:hover {
	opacity: .7;
}

/* ── Experience grid ── */
.exp-grid {
	display: grid;
	/* 1 col mobile, auto-fill on larger */
	grid-template-columns: 1fr;
	gap: clamp(12px, 2vw, 18px);
	padding: var(--space-lg) 0;
}

.exp-card {
	border-radius: 18px;
	padding: clamp(16px, 2.5vw, 22px);
	border: 1px solid var(--border);
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.exp-card img {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
}

.exp-card h3 {
	font-size: clamp(13px, 2.5vw, 15px);
	font-weight: 600;
	margin-bottom: 4px;
	color: #000 !important;
}

.exp-card p {
	font-size: clamp(12px, 2vw, 13px);
	color: var(--muted);
	line-height: 1.5;
}

/* ── Category pills ── */
.cat-track {
	display: flex;
	gap: clamp(10px, 2vw, 16px);
	overflow-x: auto;
	padding-bottom: 8px;
	scrollbar-width: none;
}

.cat-track::-webkit-scrollbar {
	display: none;
}

.cat-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--ink-mid);
	font-size: clamp(11px, 2vw, 12.5px);
	font-weight: 500;
	flex-shrink: 0;
	transition: transform .2s, color .2s;
}

.cat-pill:hover {
	transform: translateY(-4px);
	color: var(--saffron);
}

.cat-icon {
	width: clamp(80px, 18vw, 180px);
	height: clamp(80px, 18vw, 180px);
	border-radius: 18px;
	overflow: hidden;
	border: 2px solid var(--border);
	background: var(--cream);
	transition: border-color .2s, box-shadow .2s;
}

.cat-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cat-pill:hover .cat-icon {
	border-color: var(--saffron);
	box-shadow: 0 8px 24px rgba(194, 106, 18, .18);
}


.category-slider {
	position: relative;
}

.cat-nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 45px;
	height: 45px;
	border: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
	cursor: pointer;
	z-index: 10;
	font-size: 20px;
	transition: .3s;
}

.cat-nav:hover {
	transform: translateY(-50%) scale(1.08);
}

.prev-btn {
	left: -20px;
}

.next-btn {
	right: -20px;
}

.cat-track {
	scroll-behavior: smooth;
}

/* ── Banner grid — stacked on mobile ── */
.banner-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(10px, 2vw, 16px);
}

.bnr {
	border-radius: 18px;
	overflow: hidden;
	position: relative;
	min-height: clamp(160px, 35vw, 240px);
	display: flex;
	align-items: flex-end;
	text-decoration: none;
	transition: transform .2s;
}

.bnr:hover {
	transform: scale(1.01);
}

.bnr img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bnr-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, .65), transparent 78%);
}

.bnr-content {
	position: relative;
	z-index: 2;
	padding: clamp(14px, 3vw, 22px);
}

.bnr-content p {
	font-size: clamp(11px, 2vw, 12.5px);
	color: rgba(255, 255, 255, .78);
	margin-bottom: 10px;
}

.bnr-btn {
	display: inline-block;
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .38);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 40px;
	min-height: 36px;
	transition: background .15s;
}

.bnr-btn:hover {
	background: rgba(255, 255, 255, .32);
}

/* ── Filter bar ── */
.filter-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
	flex-wrap: nowrap;
}

.filter-bar::-webkit-scrollbar {
	display: none;
}

.fchip {
	flex-shrink: 0;
	padding: 0 16px;
	height: 44px;
	/* touch target */
	border-radius: 40px;
	font-size: clamp(12px, 2vw, 13px);
	font-weight: 500;
	cursor: pointer;
	border: 1.5px solid var(--border);
	background: #fff;
	color: var(--ink-mid);
	transition: all .15s;
	font-family: 'Outfit', sans-serif;
	display: flex;
	align-items: center;
}

.fchip:hover {
	border-color: var(--saffron);
	color: var(--saffron);
}

.fchip.active {
	background: var(--saffron);
	color: #fff;
	border-color: var(--saffron);
}

.sort-sel {
	margin-left: auto;
	flex-shrink: 0;
	padding: 0 12px;
	height: 44px;
	/* touch target */
	border: 1.5px solid var(--border);
	border-radius: 10px;
	font-family: 'Outfit', sans-serif;
	font-size: clamp(12px, 2vw, 13px);
	color: var(--ink);
	background: #fff;
	cursor: pointer;
	outline: none;
}

/* ── Product grid — 2 col on mobile ── */
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(10px, 2vw, 18px);
}

.pcard {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	transition: box-shadow .2s, transform .2s;
}

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

.pbadge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 5px;
}

.pb-best {
	background: var(--gold);
	color: #fff;
}

.pb-sale {
	background: var(--saffron);
	color: #fff;
}

.pb-new {
	background: var(--forest);
	color: #fff;
}

.pb-org {
	background: #5d8a2f;
	color: #fff;
}

.pwish {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	/* Touch target */
	width: 36px;
	height: 36px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
	border: none;
	transition: background .15s;
}

.pwish:hover {
	background: var(--saffron-light);
}

.pimg {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--cream);
	display: block;
}

.pinfo {
	padding: clamp(10px, 2vw, 14px);
}

.pvendor {
	font-size: 10px;
	color: var(--muted);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.pvendor .vck {
	color: var(--forest);
}

.pname {
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 6px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.prating {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 6px;
}

.stars {
	color: #F5A623;
	font-size: 11px;
}

.rcnt {
	font-size: 11px;
	color: var(--muted);
}

.pprice {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}

.porig {
	font-size: 11.5px;
	color: var(--muted);
	text-decoration: line-through;
}

.pdisc {
	font-size: 11px;
	font-weight: 700;
	color: var(--forest-mid);
}

.pgst {
	font-size: 10px;
	color: var(--muted);
	margin-bottom: 8px;
}

/* Pincode — hide on very small cards, keep functional */
.ppin {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 8px;
	width: 100%;
}

.ppin input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 6px 8px;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	color: var(--ink);
	outline: none;
	height: 32px;
}

.ppin input:focus {
	border-color: var(--saffron);
}

.ppin button {
	background: var(--saffron-light);
	border: 1px solid rgba(194, 106, 18, .2);
	color: var(--saffron-dark);
	font-size: 10.5px;
	font-weight: 600;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	white-space: nowrap;
	height: 32px;
	flex-shrink: 0;
}

.btn-cart {
	width: 100%;
	background: linear-gradient(135deg, var(--saffron-light), #fff);
	color: var(--saffron-dark);
	border: 1px solid rgba(194, 106, 18, .22);
	padding: 10px;
	border-radius: 10px;
	font-family: 'Outfit', sans-serif;
	font-size: clamp(11.5px, 2vw, 13px);
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	/* touch target */
	transition: background .15s, color .15s;
}

.btn-cart:hover {
	background: var(--saffron);
	color: #fff;
}

/* ── Vendor onboarding teaser — single column on mobile ── */
.vendor-teaser {
	background: linear-gradient(135deg, #1a3008, var(--forest));
	border-radius: 20px;
	padding: clamp(24px, 5vw, 44px) clamp(20px, 4vw, 48px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 4vw, 36px);
	align-items: center;
	margin: 0 0 var(--space-xl);
}

.vt-right {
	display: none;
}

/* hidden on mobile */
.vt-content p {
	color: rgba(255, 255, 255, .7);
	font-size: clamp(13px, 2.5vw, 14.5px);
	line-height: 1.7;
	margin-bottom: 18px;
}

.vt-steps {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vt-step {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, .85);
	font-size: clamp(13px, 2.5vw, 14px);
}

.vt-step-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #F5C97A;
	flex-shrink: 0;
}

.btn-vt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--forest);
	padding: 12px 22px;
	border-radius: 40px;
	font-size: clamp(13px, 2.5vw, 14px);
	font-weight: 700;
	text-decoration: none;
	min-height: 44px;
	margin-top: 18px;
	transition: background .2s;
}

.btn-vt:hover {
	background: var(--saffron-light);
}

/* ── Vendor grid — 1 col on mobile ── */
.vendor-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(10px, 2vw, 16px);
}

.vcard {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: clamp(14px, 2.5vw, 18px);
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	transition: box-shadow .2s, transform .2s;
	text-decoration: none;
	color: inherit;
	min-height: 44px;
}

.vcard:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

.vcard-logo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--border);
	flex-shrink: 0;
}

.vcard-info strong {
	display: block;
	font-size: clamp(13px, 2.5vw, 14.5px);
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 2px;
}

.vcard-info span {
	font-size: 11.5px;
	color: var(--muted);
}

.vbadge {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.vbadge .stars {
	font-size: 12px;
}

.vbadge small {
	font-size: 11px;
	color: var(--muted);
}

.vverified {
	background: var(--forest-light);
	color: var(--forest);
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	margin-top: 4px;
	display: inline-block;
}

/* ── Footer — single column on mobile ── */
footer {
	background: linear-gradient(180deg, #1e0d04, #140803);
	color: rgba(255, 255, 255, .6);
	padding: clamp(36px, 6vw, 56px) 0 0;
	margin-top: var(--space-xl);
}

.footer-grid {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--pad-x) clamp(28px, 5vw, 44px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 36px);
	align-items: flex-start;
}

.f-brand .logo img {
	width: clamp(80px, 16vw, 150px);
	height: clamp(80px, 16vw, 150px);
	filter: brightness(0) invert(1);
}

.f-tagline {
	font-style: italic;
	font-size: clamp(12px, 2vw, 14px);
	color: rgba(255, 255, 255, .4);
	margin-bottom: 6px;
	line-height: 1.5;
}

.f-tagline-en {
	font-size: 11px;
	opacity: .35;
	display: block;
	margin-bottom: 12px;
}

.f-desc {
	font-size: clamp(12px, 2vw, 13px);
	line-height: 1.7;
	max-width: 280px;
	margin-bottom: 16px;
}

.f-social {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.f-social a {
	width: 38px;
	height: 38px;
	/* touch target */
	background: rgba(255, 255, 255, .07);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .55);
	font-size: 13px;
	text-decoration: none;
	font-weight: 700;
	transition: background .15s;
}

.f-social a:hover {
	background: var(--saffron);
	color: #fff;
}

.f-col h4 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .3);
	margin-bottom: 14px;
}

.f-col ul {
	list-style: none;
}

.f-col li {
	margin-bottom: 8px;
}

.f-col a {
	text-decoration: none;
	color: rgba(255, 255, 255, .58);
	font-size: clamp(12.5px, 2vw, 13.5px);
	transition: color .15s;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
}

.f-col a:hover {
	color: #fff;
}

.f-bottom {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 16px var(--pad-x);
	max-width: var(--max-w);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 11.5px;
}

.f-payments {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.pchip {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 5px;
	padding: 3px 8px;
	font-size: 10.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .65);
}

/* ── FAB ── */
.fab {
	position: fixed;
	bottom: 24px;
	right: 20px;
	z-index: 9999;
}

.fab-btn {
	width: 54px;
	height: 54px;
	background: linear-gradient(135deg, var(--forest), var(--forest-mid));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(71, 106, 30, .5);
	transition: transform .2s;
	text-decoration: none;
}

.fab-btn:hover {
	transform: scale(1.08);
}

.fab-btn svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.8;
}

.fab-label {
	background: var(--forest);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 20px;
	white-space: nowrap;
	position: absolute;
	right: 62px;
	top: 50%;
	transform: translateY(-50%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}

.fab:hover .fab-label {
	opacity: 1;
}

/* ── Newsletter (commented out in HTML but styles kept) ── */
.newsletter {
	background: radial-gradient(circle at top right, rgba(255, 255, 255, .1), transparent 20%),
		linear-gradient(135deg, #2A1607, var(--forest));
	border-radius: 24px;
	padding: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 48px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 40px);
	align-items: center;
	margin: 0 0 var(--space-xl);
}

.nl-content h2 {
	font-weight: 700;
	color: #fff;
	margin-bottom: 10px;
}

.nl-content p {
	color: rgba(255, 255, 255, .65);
	font-size: clamp(13px, 2.5vw, 14.5px);
	line-height: 1.7;
}

.nl-perks {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nl-perk {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .7);
	font-size: clamp(12.5px, 2vw, 13.5px);
}

.nl-perk svg {
	width: 16px;
	height: 16px;
	color: #6dbf40;
	flex-shrink: 0;
}

.nl-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nl-form input {
	padding: 14px 20px;
	border: 1.5px solid rgba(255, 255, 255, .18);
	border-radius: 40px;
	background: rgba(255, 255, 255, .08);
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	color: #fff;
	outline: none;
	min-height: 44px;
	transition: border-color .2s;
}

.nl-form input::placeholder {
	color: rgba(255, 255, 255, .38);
}

.nl-form input:focus {
	border-color: rgba(255, 255, 255, .45);
}

.nl-btn {
	padding: 14px 24px;
	background: linear-gradient(135deg, var(--saffron), var(--gold));
	color: #fff;
	border: none;
	border-radius: 40px;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	min-height: 44px;
	transition: opacity .2s;
}

.nl-btn:hover {
	opacity: .88;
}

/* Blog grid (kept for reference even if commented out) */
.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(14px, 2.5vw, 20px);
}

.bcard {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s, transform .2s;
}

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

.bimg {
	height: clamp(140px, 25vw, 170px);
	overflow: hidden;
}

.bimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s;
}

.bcard:hover .bimg img {
	transform: scale(1.04);
}

.bbody {
	padding: clamp(14px, 2.5vw, 18px);
}

.btag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--saffron-dark);
	background: var(--saffron-light);
	padding: 3px 10px;
	border-radius: 4px;
	margin-bottom: 8px;
}

.btitle {
	font-size: clamp(15px, 2.5vw, 17px);
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 6px;
	line-height: 1.35;
}

.bexc {
	font-size: clamp(12px, 2vw, 13px);
	color: var(--muted);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bmeta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--border);
	font-size: 11.5px;
	color: var(--muted);
}

/* ============================================================
   3.  480px — Slightly larger phones (phablets)
   Adjusts: product grid, category icons, section padding
   ============================================================ */
@media (min-width: 480px) {

	/* Product grid: still 2 columns but cards have more room */
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	/* Show action labels in header */
	.hdr-actions a span:not(.cart-badge) {
		display: block;
		font-size: 10px;
	}

	/* Show sell button text */
	.btn-sell span {
		display: inline;
	}

	.btn-sell {
		padding: 10px 16px !important;
	}

	/* Experience grid: 2 columns */
	.exp-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Blog: 2 cols */
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Vendor grid: 2 cols */
	.vendor-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Banner: first banner takes full row */
	.banner-grid {
		grid-template-columns: 1fr 1fr;
	}

	.bnr:first-child {
		grid-column: span 2;
	}
}

/* ============================================================
   4.  768px — Tablets / large phones landscape
   Adjusts: header layout (1 row), hero 2-col, nav height,
            product grid 3-col, footer 2-col, full trust bar
   ============================================================ */
@media (min-width: 768px) {

	/* ── Header: single row ── */
	.hdr {
		height: 80px;
		flex-wrap: nowrap;
		padding: 0 var(--pad-x);
	}

	.search-wrap {
		order: 0;
		flex: 1;
		max-width: 420px;
		width: auto;
	}

	.hdr-actions a span:not(.cart-badge) {
		display: block;
		font-size: 10.5px;
	}

	/* ── Logo larger ── */
	.logo img {
		width: 70px;
		height: 70px;
	}

	/* ── Hero: two-column grid ── */
	.hero-inner {
		grid-template-columns: 1.25fr .75fr;
		gap: 28px;
	}

	/* Show hero category cards */
	.hero-cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.hcard {
		background: rgba(255, 255, 255, .08);
		border: 1px solid rgba(255, 255, 255, .12);
		border-radius: 16px;
		padding: 12px;
		backdrop-filter: blur(8px);
		cursor: pointer;
		transition: transform .25s, background .2s;
		text-decoration: none;
		display: block;
		overflow: hidden;
	}

	.hcard:hover {
		transform: translateY(-5px);
		background: rgba(255, 255, 255, .13);
	}

	.hcard img {
		width: 100%;
		height: 72px;
		object-fit: cover;
		border-radius: 10px;
		margin-bottom: 8px;
	}

	.hcard h4 {
		color: #fff;
		font-size: 12px;
		font-weight: 600;
		margin-bottom: 2px;
	}

	.hcard p {
		color: rgba(255, 255, 255, .5);
		font-size: 10.5px;
	}

	.hcard-disc {
		display: inline-block;
		background: var(--saffron);
		color: #fff;
		font-size: 9px;
		font-weight: 700;
		padding: 2px 6px;
		border-radius: 4px;
		margin-top: 5px;
	}

	/* ── Trust bar: horizontal, no scroll ── */
	.trust-inner {
		flex-wrap: nowrap;
		justify-content: space-around;
		overflow: visible;
	}

	.t-div {
		display: block;
	}

	/* ── Product grid: 3 columns ── */
	.product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* ── Vendor grid: 2 cols ── */
	.vendor-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ── Banner: first full, next two split ── */
	.banner-grid {
		grid-template-columns: 2fr 1fr 1fr;
	}

	.bnr:first-child {
		grid-column: span 1;
	}

	/* ── Footer: 2-col ── */
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	/* ── Experience: 2 cols ── */
	.exp-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ── Newsletter: 2 cols ── */
	.newsletter {
		grid-template-columns: 1fr 1fr;
	}

	/* ── Blog: 2 cols ── */
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ── Vendor teaser: single col still, but show image ── */
	.vendor-teaser {
		grid-template-columns: 1fr 1fr;
	}

	.vt-right {
		display: block;
	}

	.vt-right img {
		width: 100%;
		height: clamp(180px, 22vw, 260px);
		object-fit: cover;
		border-radius: 16px;
		opacity: .85;
	}
}

/* ============================================================
   5.  1024px — Small desktops / landscape tablets
   Adjusts: product grid 4-col, full header height, footer
            grid 3-col, experience 4-col
   ============================================================ */
@media (min-width: 1024px) {

	/* ── Header: full height ── */
	.hdr {
		height: 90px;
		gap: 20px;
	}

	.logo img {
		width: 80px;
		height: 80px;
	}

	.search-wrap {
		max-width: 480px;
	}

	.search-wrap select {
		width: 60px;
	}

	/* ── Product grid: 4 columns ── */
	.product-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	/* ── Vendor grid: 3 cols ── */
	.vendor-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* ── Footer: 3 cols ── */
	.footer-grid {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
	}

	/* ── Experience: 4 cols ── */
	.exp-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* ── Blog: 3 cols ── */
	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================================
   6.  1280px — Standard desktop
   Adjusts: product grid 5-col, vendor grid 4-col,
            hero cards enlarged, footer 5-col
   ============================================================ */
@media (min-width: 1280px) {

	.product-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.vendor-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.footer-grid {
		grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	}

	.hdr {
		height: 100px;
	}

	.logo img {
		width: 92px;
		height: 92px;
	}

	.search-wrap {
		max-width: 500px;
		height: 50px;
	}
}

/* ============================================================
   7.  1440px — Wide / large desktop
   Adjusts: hero cards more prominent, nav height,
            generous section spacing
   ============================================================ */
@media (min-width: 1440px) {

	/* Hero cards: taller images */
	.hcard img {
		height: 90px;
	}

	/* Nav: slightly taller */
	.nav-inner {
		height: 48px;
	}

	nav a {
		height: 48px;
		font-size: 13.5px;
	}

	/* Product grid: keep 5 but larger gap */
	.product-grid {
		gap: 20px;
	}

	/* Vendor grid: up to 4 cols with breathing room */
	.vendor-grid {
		gap: 20px;
	}

	/* Blog grid: 4 cols on wide screens */
	.blog-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Footer: full 5-col with max width centred */
	.footer-grid {
		gap: 44px;
	}
}

/* ============================================================
   8.  UTILITY — prevent any element from causing x-overflow
   ============================================================ */
img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* Ensure tables don't burst out */
table {
	width: 100%;
	overflow-x: auto;
}

/* Prevent long URLs/strings from overflowing */
p,
li,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
	word-break: break-word;
}

h3 {
	color: #ffffff !important;
}


.vt-content h2 {
	color: rgb(255, 255, 255);
}

/* ── Shop Banner ── */
.shop-banner {
	position: relative;
	overflow: hidden;
	padding: clamp(36px, 6vw, 72px) 0;
	min-height: 260px;
	display: flex;
	align-items: center;
}

.shop-banner-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1599598425947-5202edd56fdb?w=1600&q=80&auto=format&fit=crop');
	background-size: cover;
	background-position: center 40%;
	z-index: 0;
}

.shop-banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 8, 2, 0.85) 0%, rgba(15, 8, 2, 0.60) 55%, rgba(15, 8, 2, 0.25) 100%);
	z-index: 1;
}

.shop-banner-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(14px, 4vw, 24px);
	position: relative;
	z-index: 2;
	width: 100%;
}

.shop-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .45);
	margin-bottom: 12px;
}

.shop-breadcrumb a {
	color: rgba(255, 255, 255, .55);
	text-decoration: none;
	transition: color .15s;
}

.shop-breadcrumb a:hover {
	color: #F5C97A;
}

.shop-breadcrumb span {
	color: rgba(255, 255, 255, .25);
}

.shop-breadcrumb strong {
	color: rgba(255, 255, 255, .7);
	font-weight: 500;
}

.shop-banner h1 {
	font-size: clamp(28px, 5vw, 46px);
	font-weight: 700;
	color: #fff;
	margin-bottom: 8px;
	line-height: 1.15;
}

.shop-banner h1 em {
	color: #F5C97A;
	font-style: italic;
}

.shop-banner p {
	color: rgba(255, 255, 255, .72);
	font-size: clamp(13px, 2.5vw, 15px);
	max-width: 480px;
}

.shop-banner-stats {
	display: flex;
	gap: clamp(10px, 2vw, 20px);
	margin-top: 20px;
	flex-wrap: wrap;
}

.sbs-item {
	display: flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 40px;
	padding: 6px 14px;
	font-size: 12px;
	color: rgba(255, 255, 255, .75);
	backdrop-filter: blur(6px);
}

.sbs-item strong {
	color: #F5C97A;
	font-weight: 700;
}

/* ── Shop Layout ── */
.shop-layout {
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(20px, 3vw, 36px) clamp(14px, 4vw, 24px);
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: clamp(18px, 3vw, 28px);
	align-items: flex-start;
}

/* ── Sidebar ── */
.shop-sidebar {
	position: sticky;
	top: 108px;
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--border) transparent;
}

.shop-sidebar::-webkit-scrollbar {
	width: 4px;
}

.shop-sidebar::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 4px;
}

.filter-panel {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 18px;
	overflow: hidden;
}

.filter-panel-head {
	padding: 16px 18px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--cream);
}

.filter-panel-head h3 {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink) !important;
	display: flex;
	align-items: center;
	gap: 7px;
}

.filter-panel-head h3 i {
	color: var(--saffron);
	font-size: 13px;
}

.btn-clear-filters {
	background: none;
	border: 1px solid rgba(194, 106, 18, .3);
	color: var(--saffron);
	font-size: 11.5px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 20px;
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	transition: background .15s, color .15s;
}

.btn-clear-filters:hover {
	background: var(--saffron);
	color: #fff;
}

.filter-section {
	border-bottom: 1px solid var(--border);
	padding: 16px 18px;
}

.filter-section:last-child {
	border-bottom: none;
}

.filter-section-title {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-mid);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
}

.filter-section-title i {
	font-size: 10px;
	color: var(--muted);
	transition: transform .2s;
}

.filter-section-title.collapsed i {
	transform: rotate(-90deg);
}

.filter-section-body.hidden {
	display: none;
}

.sidebar-search {
	position: relative;
}

.sidebar-search input {
	width: 100%;
	padding: 9px 36px 9px 12px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	color: var(--ink);
	outline: none;
	background: var(--cream);
	transition: border-color .2s;
	box-sizing: border-box;
}

.sidebar-search input:focus {
	border-color: var(--saffron);
	background: #fff;
}

.sidebar-search i {
	position: absolute;
	right: 11px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
	font-size: 13px;
	pointer-events: none;
}

.cat-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cat-list li label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 13px;
	color: var(--ink-mid);
	transition: background .15s, color .15s;
}

.cat-list li label:hover {
	background: var(--saffron-light);
	color: var(--saffron-dark);
}

.cat-list li input[type="checkbox"] {
	accent-color: var(--saffron);
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	cursor: pointer;
}

.cat-list li label .cat-count {
	margin-left: auto;
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: 20px;
	font-size: 10.5px;
	padding: 1px 7px;
	color: var(--muted);
	font-weight: 600;
}

.price-inputs {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	align-items: center;
}

.price-inputs input {
	flex: 1;
	padding: 8px 10px;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	font-family: 'Outfit', sans-serif;
	font-size: 12.5px;
	color: var(--ink);
	outline: none;
	min-width: 0;
	transition: border-color .2s;
}

.price-inputs input:focus {
	border-color: var(--saffron);
}

.price-inputs span {
	font-size: 12px;
	color: var(--muted);
	flex-shrink: 0;
}

.price-range-slider {
	width: 100%;
	accent-color: var(--saffron);
	cursor: pointer;
	height: 4px;
}

.price-range-display {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--muted);
}

.filter-radio-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.filter-radio-list label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 13px;
	color: var(--ink-mid);
	transition: background .15s;
}

.filter-radio-list label:hover {
	background: var(--saffron-light);
}

.filter-radio-list input[type="radio"],
.filter-radio-list input[type="checkbox"] {
	accent-color: var(--saffron);
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	cursor: pointer;
}

.filter-stars {
	color: #F5A623;
	font-size: 12px;
}

.filter-stars-label {
	font-size: 12.5px;
	color: var(--ink-mid);
}

.sidebar-sort {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	color: var(--ink);
	background: var(--cream);
	outline: none;
	cursor: pointer;
	transition: border-color .2s;
}

.sidebar-sort:focus {
	border-color: var(--saffron);
}

/* ── Shop Topbar ── */
.shop-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

.shop-topbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.product-count-label {
	font-size: 13.5px;
	color: var(--ink-mid);
	font-weight: 500;
}

.product-count-label strong {
	color: var(--ink);
	font-weight: 700;
}

.shop-topbar-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.topbar-sort {
	padding: 8px 12px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	color: var(--ink);
	background: #fff;
	outline: none;
	cursor: pointer;
	transition: border-color .2s;
}

.topbar-sort:focus {
	border-color: var(--saffron);
}

.view-toggle {
	display: flex;
	gap: 4px;
}

.view-btn {
	width: 38px;
	height: 38px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	font-size: 14px;
	transition: all .15s;
}

.view-btn:hover {
	border-color: var(--saffron);
	color: var(--saffron);
}

.view-btn.active {
	background: var(--saffron);
	border-color: var(--saffron);
	color: #fff;
}

/* ── Active Filter Tags ── */
.active-filters-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.active-filters-row:empty {
	display: none;
}

.af-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #fff;
	border: 1.5px solid var(--saffron);
	color: var(--saffron-dark);
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 20px;
	cursor: pointer;
	transition: background .15s;
}

.af-tag:hover {
	background: var(--saffron-light);
}

.af-tag i {
	font-size: 9px;
}

.af-label {
	font-size: 12px;
	color: var(--muted);
	margin-right: 2px;
}

/* ── Product Grid ── */
.shop-product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 2vw, 18px);
}

.shop-product-grid.list-view {
	grid-template-columns: 1fr;
}

.shop-product-grid.list-view .pcard {
	display: grid;
	grid-template-columns: 200px 1fr;
}

.shop-product-grid.list-view .pimg {
	height: 100%;
	aspect-ratio: auto;
}


.btn-cart:disabled {
	opacity: .5;
	cursor: not-allowed;
	background: #ccc;
}

.btn-cart.added {
	background: #476A1E;
}

/* ── Skeleton ── */
.skeleton-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 2vw, 18px);
}

.skel-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	animation: pulse 1.4s ease-in-out infinite;
}

.skel-img {
	background: #f0ece5;
	height: 180px;
}

.skel-body {
	padding: 14px;
}

.skel-line {
	background: #f0ece5;
	border-radius: 6px;
	margin-bottom: 8px;
}

.skel-line.short {
	width: 60%;
	height: 10px;
}

.skel-line.med {
	width: 85%;
	height: 13px;
}

.skel-line.full {
	width: 100%;
	height: 10px;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: .55
	}
}

/* ── Empty state ── */
.empty-state {
	grid-column: 1/-1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60px 20px;
	text-align: center;
}

.empty-state-icon {
	width: 80px;
	height: 80px;
	background: var(--cream);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	margin-bottom: 20px;
	border: 2px solid var(--border);
}

.empty-state h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 8px;
}

.empty-state p {
	font-size: 13.5px;
	color: var(--muted);
	margin-bottom: 20px;
}

.btn-reset-filters {
	background: linear-gradient(135deg, var(--saffron), var(--gold));
	color: #fff;
	border: none;
	padding: 11px 24px;
	border-radius: 40px;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .2s;
}

.btn-reset-filters:hover {
	opacity: .88;
}

/* ── Pagination ── */
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: clamp(28px, 4vw, 40px);
	flex-wrap: wrap;
}

.page-btn {
	min-width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink-mid);
	transition: all .15s;
	padding: 0 8px;
}

.page-btn:hover {
	border-color: var(--saffron);
	color: var(--saffron);
}

.page-btn.active {
	background: var(--saffron);
	border-color: var(--saffron);
	color: #fff;
	font-weight: 700;
}

.page-btn.disabled {
	opacity: .4;
	pointer-events: none;
}

.page-dots {
	font-size: 13px;
	color: var(--muted);
	padding: 0 4px;
}

/* ── Mobile filter button ── */
.mobile-filter-btn {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--ink);
	color: #fff;
	border: none;
	padding: 11px 18px;
	border-radius: 12px;
	font-family: 'Outfit', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}

.mobile-filter-btn:hover {
	background: var(--saffron);
}

.filter-count-badge {
	background: var(--saffron);
	color: #fff;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	font-size: 10px;
	font-weight: 700;
	display: none;
	align-items: center;
	justify-content: center;
}

.filter-count-badge.show {
	display: flex;
}

/* ── Mobile drawer ── */
.filter-drawer-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 800;
	backdrop-filter: blur(4px);
}

.filter-drawer-overlay.open {
	display: block;
}

.filter-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 300px;
	background: #fff;
	z-index: 900;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	box-shadow: 4px 0 30px rgba(0, 0, 0, .15);
}

.filter-drawer.open {
	transform: translateX(0);
}

.filter-drawer-head {
	padding: 18px 18px 14px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}

.filter-drawer-head h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}

.drawer-close {
	width: 36px;
	height: 36px;
	border: 1.5px solid var(--border);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--ink-mid);
	transition: background .15s;
}

.drawer-close:hover {
	background: var(--cream);
}

.filter-drawer .filter-panel {
	border: none;
	border-radius: 0;
}

.filter-drawer .filter-panel-head {
	display: none;
}

.filter-drawer-footer {
	padding: 16px 18px;
	border-top: 1px solid var(--border);
	position: sticky;
	bottom: 0;
	background: #fff;
	display: flex;
	gap: 10px;
}

.btn-apply-filters {
	flex: 1;
	background: linear-gradient(135deg, var(--saffron), var(--gold));
	color: #fff;
	border: none;
	padding: 12px;
	border-radius: 10px;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .2s;
}

.btn-apply-filters:hover {
	opacity: .88;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
	.shop-layout {
		grid-template-columns: 1fr;
	}

	.shop-sidebar {
		display: none;
	}

	.mobile-filter-btn {
		display: flex;
	}

	.shop-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.skeleton-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.shop-product-grid.list-view .pcard {
		grid-template-columns: 120px 1fr;
	}
}

@media (max-width: 479px) {
	.shop-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.topbar-sort {
		display: none;
	}
}

@media (min-width: 1280px) {
	.shop-layout {
		grid-template-columns: 290px 1fr;
	}

	.shop-product-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.skeleton-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ── Breadcrumb (reuses shop-banner breadcrumb style) ── */
.pd-breadcrumb-bar {
	background: var(--cream);
	border-bottom: 1px solid var(--border);
	padding: 12px 0;
}

.pd-breadcrumb-bar .pd-bc-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--pad-x);
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--muted);
}

.pd-breadcrumb-bar a {
	color: var(--muted);
	text-decoration: none;
	transition: color .15s;
}

.pd-breadcrumb-bar a:hover {
	color: var(--saffron);
}

.pd-breadcrumb-bar span {
	color: var(--border);
}

.pd-breadcrumb-bar strong {
	color: var(--ink-mid);
	font-weight: 500;
}

/* CHECKOUT STEPS */
.steps-bar {
	background: #fff;
	border-bottom: 1px solid var(--border);
	padding: 14px 0;
}

.steps-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--pad-x);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	flex-shrink: 0;
	cursor: pointer;
	transition: color .2s;
}

.step.active {
	color: var(--saffron);
}

.step.done {
	color: var(--forest);
}

.step-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	background: #fff;
	flex-shrink: 0;
	transition: all .25s;
}

.step.active .step-num {
	border-color: var(--saffron);
	background: var(--saffron);
	color: #fff;
}

.step.done .step-num {
	border-color: var(--forest);
	background: var(--forest);
	color: #fff;
}

.step-line {
	width: clamp(40px, 7vw, 90px);
	height: 2px;
	background: var(--border);
	flex-shrink: 0;
	transition: background .3s;
}

.step.done+.step-line {
	background: var(--forest);
}

/* PAGE WRAP */
.page-wrap {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: clamp(20px, 3vw, 36px) var(--pad-x) 60px;
}

/* SECTION DISPLAY */
.flow-section {
	display: none;
}

.flow-section.active {
	display: block;
}

/* TWO-COL LAYOUT */
.layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: clamp(20px, 3vw, 32px);
	align-items: flex-start;
}

.main-col {}

.side-col {
	position: sticky;
	top: 130px;
}

/* SECTION HEADER */
.sec-title {
	font-size: clamp(18px, 2.5vw, 24px);
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.sec-title em {
	color: var(--saffron);
	font-style: normal;
}

.sec-title i {
	color: var(--saffron);
}

/* CARDS */
.card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 16px;
}

.card-hdr {
	background: var(--cream);
	border-bottom: 1px solid var(--border);
	padding: 13px 20px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-mid);
	text-transform: uppercase;
	letter-spacing: .06em;
	display: flex;
	align-items: center;
	gap: 7px;
}

.card-hdr i {
	color: var(--saffron);
}

.card-body {
	padding: 20px;
}

/* ========= CART ITEMS ========= */
.seller-group {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 14px;
}

.seller-hdr {
	background: var(--cream);
	border-bottom: 1px solid var(--border);
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.seller-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--saffron-light), var(--forest-light));
	border: 1.5px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--forest);
	flex-shrink: 0;
}

.seller-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}

.seller-badge {
	font-size: 10px;
	font-weight: 700;
	color: var(--forest);
	background: var(--forest-light);
	padding: 2px 7px;
	border-radius: 4px;
}

.seller-count {
	font-size: 12px;
	color: var(--muted);
	margin-left: auto;
}

.item-row {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 14px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--border);
	transition: background .15s;
	align-items: flex-start;
}

.item-row:last-child {
	border-bottom: none;
}

.item-row:hover {
	background: #fdfaf7;
}

.item-img {
	width: 88px;
	height: 88px;
	border-radius: 12px;
	object-fit: cover;
	border: 1px solid var(--border);
	background: var(--cream);
}

.item-img-placeholder {
	width: 88px;
	height: 88px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: linear-gradient(135deg, var(--cream), var(--saffron-light));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	flex-shrink: 0;
}

.item-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.item-vendor {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	display: flex;
	align-items: center;
	gap: 4px;
}

.vck {
	color: var(--forest);
}

.item-name {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.item-variant {
	font-size: 11.5px;
	color: var(--muted);
}

.item-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.qty-ctrl {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	flex-shrink: 0;
}

.qty-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: var(--cream);
	cursor: pointer;
	font-size: 16px;
	color: var(--ink-mid);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
}

.qty-btn:hover {
	background: var(--saffron-light);
	color: var(--saffron-dark);
}

.qty-val {
	width: 34px;
	height: 32px;
	text-align: center;
	border: none;
	border-left: 1px solid var(--border);
	border-right: 1px solid var(--border);
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	background: #fff;
	outline: none;
}

.item-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-left: auto;
	flex-shrink: 0;
}

.price-curr {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}

.price-orig {
	font-size: 11.5px;
	color: var(--muted);
	text-decoration: line-through;
}

.price-disc {
	font-size: 11px;
	font-weight: 700;
	color: #476A1E;
}

.delivery-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--forest);
	font-weight: 600;
	background: var(--forest-light);
	padding: 3px 9px;
	border-radius: 5px;
}

.saving-tag {
	font-size: 11px;
	font-weight: 700;
	color: var(--saffron-dark);
	background: var(--saffron-light);
	padding: 2px 8px;
	border-radius: 4px;
}

.item-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.action-btn {
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	transition: color .15s;
	min-height: 28px;
}

.action-btn:hover {
	color: var(--saffron);
}

.action-btn.remove:hover {
	color: #e74c3c;
}

.act-divider {
	width: 1px;
	height: 12px;
	background: var(--border);
}

/* COUPON */
.coupon-box {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 16px 18px;
	margin-bottom: 16px;
}

.coupon-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.coupon-title i {
	color: var(--saffron);
}

.coupon-row {
	display: flex;
	gap: 8px;
}

.coupon-input {
	flex: 1;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	padding: 10px 14px;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink);
	outline: none;
	height: 42px;
	transition: border-color .2s;
	background: var(--cream);
}

.coupon-input:focus {
	border-color: var(--saffron);
	background: #fff;
}

.coupon-btn {
	background: var(--saffron);
	color: #fff;
	border: none;
	padding: 10px 18px;
	border-radius: 10px;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	height: 42px;
	white-space: nowrap;
	transition: opacity .2s;
}

.coupon-btn:hover {
	opacity: .88;
}

.coupon-result {
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	display: none;
}

.coupon-result.success {
	color: var(--forest);
	display: block;
}

.coupon-result.error {
	color: #c0392b;
	display: block;
}

.coupon-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.coupon-chip {
	border: 1.5px dashed rgba(194, 106, 18, .4);
	border-radius: 8px;
	padding: 5px 12px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--saffron-dark);
	cursor: pointer;
	background: var(--saffron-light);
	letter-spacing: .04em;
	transition: all .15s;
}

.coupon-chip:hover {
	background: var(--saffron);
	color: #fff;
	border-color: var(--saffron);
}

/* SUMMARY CARD */
.sum-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13.5px;
	color: var(--ink-mid);
	padding: 3px 0;
}

.sum-row.discount {
	color: var(--forest);
	font-weight: 600;
}

.sum-row.coupon {
	color: var(--saffron-dark);
	font-weight: 600;
}

.sum-row.free-del {
	color: var(--forest);
	font-weight: 700;
}

.sum-row.total {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	border-top: 2px dashed var(--border);
	padding-top: 12px;
	margin-top: 6px;
}

.savings-badge {
	background: var(--forest-light);
	border: 1px solid rgba(71, 106, 30, .18);
	border-radius: 10px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--forest);
	font-weight: 600;
	margin-top: 8px;
}

.savings-badge i {
	font-size: 15px;
	flex-shrink: 0;
}

/* CTA BUTTONS */
.cart-btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px;
	background: linear-gradient(135deg, var(--forest), var(--forest-mid));
	color: #fff;
	border: none;
	border-radius: 14px;
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	min-height: 52px;
	box-shadow: 0 6px 18px rgba(71, 106, 30, .28);
	transition: opacity .2s, transform .2s;
	margin-bottom: 10px;
	text-decoration: none;
}

.btn-primary:hover {
	opacity: .9;
	transform: translateY(-1px);
}

.btn-saffron {
	background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
}

.btn-saffron {
	box-shadow: 0 6px 18px rgba(194, 106, 18, .3);
}

/*.cart-btn-outline {*/
/*	display: flex;*/
/*	align-items: center;*/
/*	justify-content: center;*/
/*	gap: 7px;*/
/*	width: 100%;*/
/*	padding: 12px;*/
/*	border: 1.5px solid var(--border);*/
/*	background: #fff;*/
/*	color: var(--ink-mid);*/
/*	font-family: 'Outfit', sans-serif;*/
/*	font-size: 13.5px;*/
/*	font-weight: 600;*/
/*	border-radius: 12px;*/
/*	cursor: pointer;*/
/*	transition: border-color .15s, color .15s;*/
/*	margin-bottom: 8px;*/
/*}*/

/*.btn-outline:hover {*/
/*	border-color: var(--saffron);*/
/*	color: var(--saffron);*/
/*}*/

.secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 12px;
}

.secure-note i {
	color: var(--forest);
}

.pchips {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-wrap: wrap;
	padding-bottom: 4px;
}

.pchip {
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 3px 8px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--muted);
}

/* TRUST LIST */
.trust-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 20px;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--ink-mid);
}

.trust-item i {
	color: var(--saffron);
	font-size: 13px;
	flex-shrink: 0;
	width: 16px;
	text-align: center;
}

/* ========= ADDRESS SECTION ========= */
.addr-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.addr-grid.full {
	grid-template-columns: 1fr;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.form-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-mid);
}

.form-label span.req {
	color: var(--saffron);
}

.form-input {
	width: 100%;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	padding: 11px 14px;
	font-family: 'Outfit', sans-serif;
	font-size: 13.5px;
	color: var(--ink);
	outline: none;
	transition: border-color .2s, box-shadow .2s;
	background: #fff;
	height: 44px;
}

.form-input:focus {
	border-color: var(--saffron);
	box-shadow: 0 0 0 3px rgba(194, 106, 18, .1);
}

.form-input.error {
	border-color: #e74c3c;
}

.form-input::placeholder {
	color: #b0a090;
}

textarea.form-input {
	height: auto;
	resize: vertical;
	padding-top: 12px;
}

select.form-input {
	cursor: pointer;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A6650' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.form-hint {
	font-size: 11.5px;
	color: var(--muted);
	margin-top: 2px;
}

.form-error-msg {
	font-size: 11.5px;
	color: #e74c3c;
	margin-top: 2px;
	display: none;
}

.form-error-msg.show {
	display: block;
}

/* ADDRESS TYPE SELECTOR */
.addr-type-row {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

.addr-type-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	border: 2px solid var(--border);
	border-radius: 12px;
	background: #fff;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	transition: all .18s;
}

.addr-type-btn.selected {
	border-color: var(--saffron);
	background: var(--saffron-light);
	color: var(--saffron-dark);
}

.addr-type-btn i {
	font-size: 15px;
}

/* BILLING SAME AS SHIPPING */
.billing-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--forest-light);
	border-radius: 12px;
	margin-bottom: 18px;
	cursor: pointer;
	border: 1.5px solid rgba(71, 106, 30, .2);
	transition: background .15s;
}

.billing-toggle:hover {
	background: #e0eccc;
}

.billing-toggle input[type=checkbox] {
	width: 18px;
	height: 18px;
	accent-color: var(--forest);
	cursor: pointer;
	flex-shrink: 0;
}

.billing-toggle-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--forest);
	cursor: pointer;
}

.billing-toggle-label span {
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
	display: block;
	margin-top: 1px;
}

/* BILLING ADDRESS (hidden by default) */
.billing-section {
	display: none;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1.5px dashed var(--border);
}

.billing-section.show {
	display: block;
}

.billing-sec-title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink-mid);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.billing-sec-title i {
	color: var(--saffron);
}

/* SAVED ADDRESS */
.saved-addr-card {
	border: 2px solid var(--border);
	border-radius: 14px;
	padding: 14px 16px;
	cursor: pointer;
	transition: all .18s;
	margin-bottom: 10px;
	position: relative;
	background: #fff;
}

.saved-addr-card:hover {
	border-color: var(--saffron);
	background: var(--saffron-light);
}

.saved-addr-card.selected {
	border-color: var(--saffron);
	background: var(--saffron-light);
}

.saved-addr-card .addr-tag {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--forest);
	background: var(--forest-light);
	padding: 2px 8px;
	border-radius: 5px;
	display: inline-block;
	margin-bottom: 6px;
}

.saved-addr-card .addr-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 3px;
}

.saved-addr-card .addr-detail {
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.5;
}

.saved-addr-card .addr-phone {
	font-size: 12.5px;
	color: var(--ink-mid);
	font-weight: 500;
	margin-top: 5px;
}

.saved-addr-card .addr-select-radio {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 18px;
	height: 18px;
	accent-color: var(--saffron);
}

.add-addr-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 12px 16px;
	border: 2px dashed var(--border);
	border-radius: 14px;
	background: #fff;
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	transition: all .18s;
	margin-bottom: 16px;
}

.add-addr-btn:hover {
	border-color: var(--saffron);
	color: var(--saffron);
}

/* NEW ADDR FORM TOGGLE */
.new-addr-form {
	background: var(--cream);
	border-radius: 14px;
	padding: 18px;
	margin-bottom: 16px;
	border: 1.5px solid var(--border);
	display: none;
}

.new-addr-form.show {
	display: block;
}

/* ========= PAYMENT SECTION ========= */
.pay-methods {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1.5px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
}

.pay-method {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	border-bottom: 1px solid var(--border);
	background: #fff;
	transition: background .15s;
}

.pay-method:last-child {
	border-bottom: none;
}

.pay-method:hover {
	background: var(--cream);
}

.pay-method.selected {
	background: var(--saffron-light);
}

.pay-radio {
	width: 18px;
	height: 18px;
	accent-color: var(--saffron);
	flex-shrink: 0;
	cursor: pointer;
}

.pay-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--cream);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.pay-info {
	flex: 1;
}

.pay-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}

.pay-desc {
	font-size: 11.5px;
	color: var(--muted);
}

.pay-badge {
	font-size: 10px;
	font-weight: 700;
	background: var(--forest-light);
	color: var(--forest);
	padding: 2px 8px;
	border-radius: 5px;
}

/* UPI INPUT PANEL */
.pay-panel {
	background: var(--cream);
	border-top: 1px solid var(--border);
	padding: 16px 18px;
	display: none;
}

.pay-panel.show {
	display: block;
}

.upi-apps {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.upi-app {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	padding: 8px 12px;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	background: #fff;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--muted);
	transition: all .15s;
}

.upi-app:hover,
.upi-app.sel {
	border-color: var(--saffron);
	background: var(--saffron-light);
	color: var(--saffron-dark);
}

.upi-app-icon {
	width: 50px;
	height: 50px;
}

/* CARD INPUT */
.card-num-wrap {
	position: relative;
}

.card-icons {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 5px;
	align-items: center;
}

.card-brand {
	font-size: 18px;
}

.card-cvv-wrap {
	position: relative;
}

.cvv-hint {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--muted);
	font-size: 13px;
}

/* EMI BANNER */
.emi-banner {
	background: var(--saffron-light);
	border: 1px solid rgba(194, 106, 18, .25);
	border-radius: 10px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--saffron-dark);
	font-weight: 600;
	margin-top: 12px;
}

/* COD INFO */
.cod-info {
	background: var(--forest-light);
	border: 1px solid rgba(71, 106, 30, .2);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13px;
	color: var(--forest);
	font-weight: 500;
	margin-top: 12px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.cod-info i {
	flex-shrink: 0;
	margin-top: 2px;
}

/* ========= ORDER SUMMARY PANEL (SIDE) ========= */
.mini-item-row {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}

.mini-item-row:last-child {
	border-bottom: none;
}

.mini-img {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid var(--border);
	background: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.mini-name {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mini-qty {
	font-size: 11.5px;
	color: var(--muted);
}

.mini-price {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	margin-left: auto;
	flex-shrink: 0;
}

/* ========= CONFIRM SECTION ========= */
.confirm-hero {
	text-align: center;
	padding: 36px 24px 28px;
}

.confirm-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--forest-light);
	border: 3px solid var(--forest);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	margin-bottom: 18px;
	animation: pop .4s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes pop {
	from {
		transform: scale(0);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

.confirm-hero h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 6px;
}

.confirm-hero h2 em {
	color: var(--forest);
	font-style: normal;
}

.confirm-hero p {
	font-size: 13.5px;
	color: var(--muted);
}

.order-id-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-mid);
	margin-top: 12px;
}

.confirm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	padding: 0 20px 20px;
}

.confirm-block {
	background: var(--cream);
	border-radius: 14px;
	padding: 14px 16px;
}

.confirm-block-title {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.confirm-block-title i {
	color: var(--saffron);
}

.confirm-block p {
	font-size: 13px;
	color: var(--ink-mid);
	line-height: 1.6;
}

.confirm-block strong {
	color: var(--ink);
	font-weight: 600;
}

.confirm-items {
	padding: 0 20px 20px;
}

.confirm-item-row {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}

.confirm-item-row:last-child {
	border-bottom: none;
}

.conf-img {
	width: 60px;
	height: 60px;
	border-radius: 12px;
	object-fit: cover;
	border: 1px solid var(--border);
	background: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}

.conf-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.4;
}

.conf-variant {
	font-size: 11.5px;
	color: var(--muted);
}

.conf-qty {
	font-size: 12px;
	color: var(--muted);
}

.conf-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	margin-left: auto;
	flex-shrink: 0;
}

.delivery-timeline {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 20px 20px;
	overflow-x: auto;
}

.dt-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 90px;
}

.dt-dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--forest);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	flex-shrink: 0;
}

.dt-dot.future {
	background: var(--cream);
	border: 2px solid var(--border);
	color: var(--muted);
}

.dt-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--ink-mid);
	text-align: center;
}

.dt-sub {
	font-size: 10.5px;
	color: var(--muted);
	text-align: center;
}

.dt-line {
	flex: 1;
	height: 2px;
	background: var(--border);
	min-width: 20px;
	margin-top: -20px;
}

.dt-line.done {
	background: var(--forest);
}

/* TOAST */
.toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(16px);
	background: var(--ink);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 40px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s, transform .25s;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 8px;
}

.toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.toast i {
	color: #6dbf40;
	font-size: 15px;
}

/* PRODUCT GRID (Suggested) */
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

.pcard {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	transition: box-shadow .2s, transform .2s;
}

.pcard:hover {
	box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
}

.pbadge {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 10.5px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 5px;
	z-index: 2;
}

.pb-best {
	background: #FEF3E2;
	color: #9B5210;
}

.pb-sale {
	background: #FFEBE8;
	color: #c0392b;
}

.pb-org {
	background: var(--forest-light);
	color: var(--forest);
}

.pwish {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: all .15s;
}

.pwish:hover {
	border-color: var(--saffron);
	color: var(--saffron);
}

.pimg {
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.pinfo {
	padding: 12px;
}

.pvendor {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 4px;
}

.pname {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.4;
	height: 36px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 6px;
}

.prating {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 7px;
}

.stars {
	color: #E6AB00;
	font-size: 11px;
}

.rcnt {
	font-size: 11px;
	color: var(--muted);
}

.pprice {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 3px;
}

.pcurr {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}

.porig {
	font-size: 12px;
	color: var(--muted);
	text-decoration: line-through;
}

.pdisc {
	font-size: 11px;
	font-weight: 700;
	color: var(--forest);
}


/* SUGGESTED SECTION */
.suggested-sec {
	margin-top: 40px;
}

/* EMPTY CART */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 24px;
	text-align: center;
	background: #fff;
	border-radius: 18px;
	border: 1px solid var(--border);
}

.empty-icon {
	width: 90px;
	height: 90px;
	background: var(--cream);
	border: 2px solid var(--border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	margin-bottom: 20px;
	color: var(--saffron);
}

.empty-state h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 8px;
}

.empty-state p {
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 24px;
	max-width: 320px;
}

/* ITEM ENTER ANIM */
.item-row {
	animation: fadein .3s ease both;
}

@keyframes fadein {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* COUNT PILL */
.count-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--saffron-light);
	border: 1px solid rgba(194, 106, 18, .2);
	color: var(--saffron-dark);
	font-size: 12px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 20px;
	margin-left: 8px;
}

/* PAGE HEADER */
.page-hdr {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.page-hdr h1 {
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 700;
	color: var(--ink);
}

.page-hdr h1 em {
	color: var(--saffron);
	font-style: normal;
}

.page-hdr p {
	font-size: 13px;
	color: var(--muted);
}

.back-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1.5px solid var(--border);
	background: #fff;
	color: var(--ink-mid);
	font-family: 'Outfit', sans-serif;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s, color .15s;
	text-decoration: none;
}

.back-btn:hover {
	border-color: var(--saffron);
	color: var(--saffron);
}

/* CONFIRM ACTIONS */
.confirm-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 20px 24px;
}

.btn-conf-track {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px;
	background: var(--saffron);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	border-radius: 12px;
	transition: opacity .2s;
}

.btn-conf-track:hover {
	opacity: .88;
}

.btn-conf-shop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px;
	background: #fff;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	font-family: 'Outfit', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-mid);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}

.btn-conf-shop:hover {
	border-color: var(--saffron);
	color: var(--saffron);
}

/* Responsive */
@media(max-width:1023px) {
	.layout {
		grid-template-columns: 1fr;
	}

	.side-col {
		position: static;
	}
}

@media(max-width:767px) {
	.item-row {
		grid-template-columns: 72px 1fr;
	}

	.addr-grid {
		grid-template-columns: 1fr;
	}

	.confirm-grid {
		grid-template-columns: 1fr;
	}

	.step span:not(.step-num) {
		display: none;
	}

	.step-line {
		width: clamp(20px, 5vw, 50px);
	}

	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media(max-width:479px) {

	.page-hdr {
		flex-direction: column;
		align-items: flex-start;
	}
}

.seller-hero{
    position:relative;
    overflow:hidden;
    margin-bottom:35px;
    padding: 40px;
    background:linear-gradient(135deg, #371d0a, #4c2000, #371d0a);
    color:#fff;
    text-align:center;
}

.seller-hero::before{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
    top:-120px;
    left:-100px;
}

.seller-hero::after{
    content:'';
    position:absolute;
    width:280px;
    height:280px;
    background:rgba(245,201,122,.08);
    border-radius:50%;
    bottom:-120px;
    right:-80px;
}

.seller-hero-content{
    position:relative;
    z-index:2;
}

.seller-badge{
    display:inline-block;
    padding:8px 18px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
    /* margin-bottom:18px; */
}

.seller-hero h1{
    margin:0;
    font-size:30px;
    font-weight:700;
    letter-spacing:1px;
}

.seller-hero p{
    max-width:700px;
    margin:18px auto 0;
    color:rgba(255,255,255,.8);
    font-size:16px;
    line-height:1.8;
}

@media(max-width:768px){
    .seller-hero{
        padding:50px 25px;
    }

    .seller-hero h1{
        font-size:36px;
    }
}


/* ── Hamburger Button ── */
.hamburger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  padding: 0 14px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s;
  flex-shrink: 0;
  margin-right: 6px;
}
.hamburger-btn:hover { background: rgba(255,255,255,.22); }
.hb-lines { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.hb-lines span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
.hamburger-btn.open .hb-lines span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.hamburger-btn.open .hb-lines span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.hamburger-btn.open .hb-lines span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
.hb-all-text { font-size: 13px; font-weight: 600; }

/* ── Nav Links wrap (scrollable) ── */
.nav-links-wrap {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.nav-links-wrap::-webkit-scrollbar { display: none; }
.nav-links-wrap a {
  text-decoration: none;
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  font-weight: 500;
  padding: 0 11px;
  height: 48px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, background .15s;
}
.nav-links-wrap a:hover { color: #fff; background: rgba(255,255,255,.07); }

/* ── Drawer Overlay ── */

/* Overlay */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }
 
/* Drawer shell */
.mega-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 320px;
  max-width: 88vw;
  background: #fff;
  z-index: 9001;
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 4px 0 32px rgba(0,0,0,.18);
}
.mega-drawer.open { transform: translateX(0); }
 
/* Head */
.md-head {
  background: linear-gradient(135deg, #2A1607, #3a1e0a);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  min-height: 62px;
}
.md-head-user {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.md-head-user svg { flex-shrink: 0; }
.md-hello {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  line-height: 1;
  margin-bottom: 3px;
}
.md-signin {
  font-size: 15px;
  font-weight: 700;
  color: #F5C97A;
  text-decoration: none;
  line-height: 1;
}
.md-signin:hover { text-decoration: underline; }
 
.md-close-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.md-close-btn:hover { background: rgba(255,255,255,.2); }
 
/* Scrollable body */
.md-scroll-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #E8DDD0 transparent;
}
.md-scroll-body::-webkit-scrollbar { width: 3px; }
.md-scroll-body::-webkit-scrollbar-thumb { background: #E8DDD0; border-radius: 3px; }
 
/* Section */
.md-section {
  border-bottom: 6px solid #F4F0EA;
}
 
/* Section heading */
.md-sec-head {
  padding: 16px 16px 8px;
  font-size: 15px;
  font-weight: 700;
  color: #2A1607;
  letter-spacing: .01em;
}
 
/* Row item */
.md-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13.5px;
  color: #2A1607;
  text-decoration: none;
  border-top: 1px solid #F4F0EA;
  transition: background .12s;
  cursor: pointer;
}
.md-row:hover { background: #FAF6EF; }
 
/* Arrow icon pushed to right */
.md-row-arrow { justify-content: flex-start; }
.md-arr {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  color: #B0A090;
}
 
/* Category image in row */
.md-row-img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #E8DDD0;
  flex-shrink: 0;
}
 
/* Brand dot avatar */
.md-brand-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
 
/* Sell banner at bottom */
.md-sell-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: #EEF4E4;
  border-top: 1px solid #C8DFA8;
  margin-top: 2px;
}
.md-sell-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #2A1607;
  margin-bottom: 2px;
}
.md-sell-text span {
  font-size: 11.5px;
  color: #5A7F2B;
}
.md-sell-btn {
  flex-shrink: 0;
  background: #476A1E;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s;
  font-family: 'Outfit', sans-serif;
}
.md-sell-btn:hover { opacity: .88; }
 
/* Hamburger button in nav */
.hamburger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  padding: 0 14px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s;
  flex-shrink: 0;
  margin-right: 6px;
}
.hamburger-btn:hover { background: rgba(255,255,255,.22); }
.hb-lines { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.hb-lines span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
.hamburger-btn.open .hb-lines span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.hamburger-btn.open .hb-lines span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.hamburger-btn.open .hb-lines span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }
.hb-all-text { font-size: 13px; font-weight: 600; }
 
/* Nav links wrap */
.nav-links-wrap {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.nav-links-wrap::-webkit-scrollbar { display: none; }
.nav-links-wrap a {
  text-decoration: none;
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  font-weight: 500;
  padding: 0 11px;
  height: 48px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, background .15s;
}
.nav-links-wrap a:hover { color: #fff; background: rgba(255,255,255,.07); }
 
@media (max-width: 480px) {
  .mega-drawer { width: 100%; max-width: 100vw; }
  .hb-all-text { display: none; }
  .hamburger-btn { padding: 0 10px; }
}

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */

/* ── Breadcrumb ── */
.ac-breadcrumb-bar { background:var(--cream); border-bottom:1px solid var(--border); padding:12px 0; }
.ac-bc-inner { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-x); display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); }
.ac-bc-inner a { color:var(--muted); text-decoration:none; transition:color .15s; }
.ac-bc-inner a:hover { color:var(--saffron); }
.ac-bc-inner span { color:var(--border); }
.ac-bc-inner strong { color:var(--ink-mid); font-weight:500; }

/* ── Page wrap ── */
.ac-wrap { max-width:var(--max-w); margin:0 auto; padding:clamp(24px,4vw,40px) var(--pad-x) var(--space-xl); }

/* ── Two-column layout ── */
.ac-layout { display:grid; grid-template-columns:260px 1fr; gap:clamp(18px,3vw,28px); align-items:flex-start; }

/* ── LEFT SIDEBAR ── */
.ac-sidebar { position:sticky; top:116px; }

/* Profile card */
.ac-profile-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px 18px;
  text-align:center;
  margin-bottom:12px;
}
.ac-avatar-wrap { position:relative; display:inline-block; margin-bottom:14px; }
.ac-avatar {
  width:80px; height:80px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--saffron-light);
  display:block;
  background:var(--cream);
}
.ac-avatar-placeholder {
  width:80px; height:80px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--saffron-light),var(--gold-light));
  border:3px solid var(--saffron-light);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:700; color:var(--saffron-dark);
  margin:0 auto 14px;
}
.ac-avatar-edit {
  position:absolute; bottom:2px; right:2px;
  width:26px; height:26px;
  background:var(--saffron); color:#fff;
  border-radius:50%; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; cursor:pointer;
  transition:background .15s;
}
.ac-avatar-edit:hover { background:var(--forest); }
.ac-profile-name { font-size:15px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.ac-profile-email { font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.ac-profile-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--gold-light); border:1px solid rgba(183,133,24,.25);
  color:var(--gold); font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:20px;
}
.ac-profile-stats {
  display:flex; justify-content:space-around;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--border);
}
.ac-pstat { text-align:center; }
.ac-pstat strong { display:block; font-size:16px; font-weight:700; color:var(--ink); }
.ac-pstat span { font-size:11px; color:var(--muted); }

/* Sidebar nav */
.ac-nav-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}
.ac-nav-section-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted);
  padding:12px 16px 6px; display:block;
}
.ac-nav-item {
  display:flex; align-items:center; gap:11px;
  padding:11px 16px;
  font-size:13.5px; font-weight:500; color:var(--ink-mid);
  cursor:pointer; border:none; background:none;
  font-family:'Outfit',sans-serif; width:100%;
  text-align:left; text-decoration:none;
  transition:background .15s, color .15s;
  position:relative;
}
.ac-nav-item:hover { background:var(--saffron-light); color:var(--saffron-dark); }
.ac-nav-item.active { background:var(--saffron-light); color:var(--saffron-dark); font-weight:700; }
.ac-nav-item.active::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--saffron); border-radius:0 3px 3px 0;
}
.ac-nav-item i { width:18px; text-align:center; font-size:14px; flex-shrink:0; }
.ac-nav-item.active i { color:var(--saffron); }
.ac-nav-badge {
  margin-left:auto; background:var(--saffron); color:#fff;
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px;
}
.ac-nav-badge.grn { background:var(--forest); }
.ac-nav-divider { height:1px; background:var(--border); margin:4px 0; }
.ac-nav-item.danger:hover { background:#fff0f0; color:#e74c3c; }
.ac-nav-item.danger i { color:#e74c3c; }

/* ── RIGHT CONTENT ── */
.ac-content {}

/* Panel */
.ac-panel {
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  margin-bottom:16px;
  display:none;
}
.ac-panel.active { display:block; }
.ac-panel-hdr {
  background:var(--cream);
  border-bottom:1px solid var(--border);
  padding:16px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.ac-panel-hdr-left { display:flex; align-items:center; gap:10px; }
.ac-panel-hdr-left i { color:var(--saffron); font-size:16px; }
.ac-panel-hdr h2 { font-size:15px; font-weight:700; color:var(--ink) !important; margin:0; }
.ac-panel-hdr p { font-size:12.5px; color:var(--muted); margin:0; }
.ac-panel-body { padding:clamp(16px,3vw,24px) clamp(16px,3vw,22px); }

/* Edit button */
.ac-edit-btn {
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--border); background:#fff;
  color:var(--ink-mid); font-family:'Outfit',sans-serif;
  font-size:12.5px; font-weight:600;
  padding:8px 14px; border-radius:10px; cursor:pointer;
  min-height:36px; transition:all .15s;
}
.ac-edit-btn:hover { border-color:var(--saffron); color:var(--saffron); }
.ac-save-btn {
  display:inline-flex; align-items:center; gap:6px;
  border:none; background:linear-gradient(135deg,var(--saffron),var(--gold));
  color:#fff; font-family:'Outfit',sans-serif;
  font-size:13px; font-weight:700;
  padding:10px 20px; border-radius:10px; cursor:pointer;
  min-height:40px; transition:opacity .2s;
}
.ac-save-btn:hover { opacity:.88; }
.ac-cancel-btn {
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--border); background:#fff;
  color:var(--muted); font-family:'Outfit',sans-serif;
  font-size:13px; font-weight:600;
  padding:10px 16px; border-radius:10px; cursor:pointer;
  min-height:40px; transition:all .15s;
}
.ac-cancel-btn:hover { border-color:var(--border); color:var(--ink-mid); }

/* ── FORM FIELDS ── */
.ac-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ac-form-grid.single { grid-template-columns:1fr; }
.ac-form-group { display:flex; flex-direction:column; gap:6px; }
.ac-form-group.full { grid-column:span 2; }
.ac-form-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mid); }
.ac-form-input {
  padding:10px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-family:'Outfit',sans-serif; font-size:13.5px; color:var(--ink);
  background:#fff; outline:none; height:44px;
  transition:border-color .2s;
}
.ac-form-input:focus { border-color:var(--saffron); }
.ac-form-input:disabled { background:var(--cream); color:var(--muted); cursor:not-allowed; }
.ac-form-select {
  padding:10px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-family:'Outfit',sans-serif; font-size:13.5px; color:var(--ink);
  background:#fff; outline:none; height:44px; cursor:pointer;
  transition:border-color .2s;
}
.ac-form-select:focus { border-color:var(--saffron); }
.ac-form-textarea {
  padding:10px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-family:'Outfit',sans-serif; font-size:13.5px; color:var(--ink);
  background:#fff; outline:none; resize:vertical; min-height:80px;
  transition:border-color .2s;
}
.ac-form-textarea:focus { border-color:var(--saffron); }
.ac-form-actions { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.ac-field-hint { font-size:11.5px; color:var(--muted); margin-top:2px; }

/* ── Info display (read-only) ── */
.ac-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.ac-info-row {
  display:flex; flex-direction:column; gap:4px;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.ac-info-row:nth-child(odd)  { padding-right:24px; }
.ac-info-row:nth-child(even) { padding-left:24px; border-left:1px solid var(--border); }
.ac-info-row.full { grid-column:span 2; padding-right:0; border-left:none; }
.ac-info-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.ac-info-val { font-size:14px; font-weight:500; color:var(--ink); }
.ac-verified-tag {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--forest-light); color:var(--forest);
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px;
}

/* ── ORDERS ── */
.ac-order-card {
  border:1px solid var(--border); border-radius:14px;
  overflow:hidden; margin-bottom:12px;
  transition:box-shadow .2s;
}
.ac-order-card:hover { box-shadow:var(--shadow); }
.ac-order-hdr {
  background:var(--cream); padding:12px 18px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.ac-order-id { font-size:12.5px; font-weight:700; color:var(--ink); }
.ac-order-date { font-size:12px; color:var(--muted); }
.ac-order-total { font-size:13px; font-weight:700; color:var(--ink); margin-left:auto; }
.ac-order-status {
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;
  flex-shrink:0;
}
.ac-status-delivered { background:#eef4e4; color:var(--forest); }
.ac-status-shipped   { background:#fff7ea; color:var(--saffron-dark); }
.ac-status-processing{ background:#f0f4ff; color:#3552b8; }
.ac-status-cancelled { background:#fff0f0; color:#c0392b; }
.ac-status-returned  { background:#f5f5f5; color:var(--muted); }

.ac-order-items { padding:14px 18px; display:flex; flex-direction:column; gap:10px; }
.ac-order-item { display:flex; align-items:center; gap:12px; }
.ac-order-item-img { width:52px; height:52px; border-radius:10px; object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
.ac-order-item-name { font-size:13px; font-weight:500; color:var(--ink); line-height:1.4; flex:1; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ac-order-item-qty { font-size:12px; color:var(--muted); flex-shrink:0; }
.ac-order-item-price { font-size:13px; font-weight:700; color:var(--ink); flex-shrink:0; }

.ac-order-footer {
  border-top:1px solid var(--border);
  padding:12px 18px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.ac-order-action {
  font-size:12.5px; font-weight:600; color:var(--saffron);
  background:none; border:1.5px solid rgba(194,106,18,.25);
  padding:7px 14px; border-radius:8px; cursor:pointer;
  font-family:'Outfit',sans-serif; min-height:34px;
  transition:background .15s, color .15s;
  text-decoration:none; display:inline-flex; align-items:center; gap:5px;
}
.ac-order-action:hover { background:var(--saffron); color:#fff; border-color:var(--saffron); }
.ac-order-action.secondary { color:var(--muted); border-color:var(--border); }
.ac-order-action.secondary:hover { color:var(--ink); border-color:var(--ink-mid); background:#f5f5f5; }
.ac-order-track {
  margin-left:auto; font-size:12px; color:var(--muted);
  display:flex; align-items:center; gap:5px;
}
.ac-order-track i { color:var(--forest); }

/* Filter tabs for orders */
.ac-filter-tabs {
  display:flex; gap:6px; margin-bottom:16px;
  overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap;
  padding-bottom:2px;
}
.ac-filter-tabs::-webkit-scrollbar { display:none; }
.ac-tab-chip {
  padding:7px 16px; border-radius:40px; font-family:'Outfit',sans-serif;
  font-size:12.5px; font-weight:500; cursor:pointer;
  border:1.5px solid var(--border); background:#fff; color:var(--ink-mid);
  transition:all .15s; min-height:36px; white-space:nowrap;
  display:flex; align-items:center; gap:5px;
}
.ac-tab-chip:hover { border-color:var(--saffron); color:var(--saffron); }
.ac-tab-chip.active { background:var(--saffron); color:#fff; border-color:var(--saffron); }

/* ── ADDRESSES ── */
.ac-address-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.ac-address-card {
  border:1.5px solid var(--border); border-radius:14px;
  padding:16px; position:relative; cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
.ac-address-card:hover { border-color:var(--saffron); box-shadow:0 4px 16px rgba(194,106,18,.1); }
.ac-address-card.default { border-color:var(--forest); }
.ac-address-default-tag {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--forest-light); color:var(--forest);
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:4px; margin-bottom:8px;
}
.ac-address-type {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
  margin-bottom:4px; display:flex; align-items:center; gap:5px;
}
.ac-address-name { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.ac-address-line { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:6px; }
.ac-address-phone { font-size:12.5px; color:var(--ink-mid); font-weight:500; }
.ac-address-actions { display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.ac-addr-btn {
  font-size:12px; font-weight:600; color:var(--muted);
  background:none; border:1px solid var(--border);
  padding:5px 12px; border-radius:7px; cursor:pointer;
  font-family:'Outfit',sans-serif; min-height:30px;
  display:flex; align-items:center; gap:4px;
  transition:all .15s;
}
.ac-addr-btn:hover { border-color:var(--saffron); color:var(--saffron); }
.ac-addr-btn.delete:hover { border-color:#e74c3c; color:#e74c3c; }
.ac-add-address-btn {
  border:2px dashed var(--border); border-radius:14px;
  padding:24px 16px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  cursor:pointer; transition:border-color .2s, background .2s;
  background:none; font-family:'Outfit',sans-serif; width:100%;
  min-height:120px;
}
.ac-add-address-btn:hover { border-color:var(--saffron); background:var(--saffron-light); }
.ac-add-address-btn i { font-size:22px; color:var(--muted); }
.ac-add-address-btn span { font-size:13px; font-weight:600; color:var(--muted); }

/* ── WISHLIST MINI ── */
.ac-wish-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ac-wish-mini {
  border:1px solid var(--border); border-radius:14px;
  overflow:hidden; transition:box-shadow .2s;
  text-decoration:none; color:inherit; display:block;
}
.ac-wish-mini:hover { box-shadow:var(--shadow); }
.ac-wish-mini img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.ac-wish-mini-body { padding:10px 12px; }
.ac-wish-mini-name { font-size:12.5px; font-weight:500; color:var(--ink); margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ac-wish-mini-price { font-size:14px; font-weight:700; color:var(--ink); }
.ac-wish-mini-orig { font-size:11px; color:var(--muted); text-decoration:line-through; margin-left:4px; }

/* ── SECURITY ── */
.ac-security-item {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:16px 0; border-bottom:1px solid var(--border); gap:16px; flex-wrap:wrap;
}
.ac-security-item:last-child { border-bottom:none; }
.ac-security-info { display:flex; align-items:center; gap:12px; }
.ac-security-icon {
  width:40px; height:40px; border-radius:12px;
  background:var(--saffron-light); color:var(--saffron);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.ac-security-icon.green { background:var(--forest-light); color:var(--forest); }
.ac-security-icon.blue  { background:#f0f4ff; color:#3552b8; }
.ac-security-title { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.ac-security-sub { font-size:12.5px; color:var(--muted); }
.ac-security-status {
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; flex-shrink:0;
}
.ac-status-on  { background:var(--forest-light); color:var(--forest); }
.ac-status-off { background:#f5f5f5; color:var(--muted); }
.ac-toggle {
  width:44px; height:24px; border-radius:12px;
  background:var(--border); border:none; cursor:pointer;
  position:relative; flex-shrink:0; transition:background .2s;
}
.ac-toggle.on { background:var(--forest); }
.ac-toggle::after {
  content:''; position:absolute;
  top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .2s;
}
.ac-toggle.on::after { transform:translateX(20px); }

/* ── NOTIFICATIONS ── */
.ac-notif-item {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid var(--border); gap:14px;
}
.ac-notif-item:last-child { border-bottom:none; }
.ac-notif-info h4 { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.ac-notif-info p { font-size:12.5px; color:var(--muted); line-height:1.5; }

/* ── WALLET / COINS ── */
.ac-wallet-banner {
  background:linear-gradient(135deg,var(--forest),var(--forest-mid));
  border-radius:16px; padding:20px 22px;
  display:flex; align-items:center; gap:18px;
  margin-bottom:16px; flex-wrap:wrap;
}
.ac-wallet-icon { font-size:36px; flex-shrink:0; }
.ac-wallet-info h3 { font-size:18px; font-weight:700; color:#fff; margin-bottom:3px; }
.ac-wallet-info p { font-size:13px; color:rgba(255,255,255,.7); }
.ac-wallet-bal { margin-left:auto; text-align:right; }
.ac-wallet-bal strong { display:block; font-size:28px; font-weight:700; color:#fff; line-height:1; }
.ac-wallet-bal span { font-size:12px; color:rgba(255,255,255,.6); }

.ac-coins-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin-bottom:16px;
}
.ac-coin-card {
  background:var(--cream); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; text-align:center;
}
.ac-coin-card strong { display:block; font-size:20px; font-weight:700; color:var(--ink); }
.ac-coin-card span { font-size:12px; color:var(--muted); }

.ac-txn-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.ac-txn-table th {
  text-align:left; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); padding:8px 12px;
  background:var(--cream); border-bottom:1px solid var(--border);
}
.ac-txn-table td { padding:12px 12px; border-bottom:1px solid var(--border); color:var(--ink-mid); vertical-align:middle; }
.ac-txn-table tr:last-child td { border-bottom:none; }
.ac-txn-credit { color:var(--forest); font-weight:700; }
.ac-txn-debit  { color:#c0392b; font-weight:700; }
.ac-txn-badge {
  font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:4px;
}
.ac-txn-badge.cr { background:var(--forest-light); color:var(--forest); }
.ac-txn-badge.dr { background:#fff0f0; color:#c0392b; }

/* ── REVIEWS ── */
.ac-review-card {
  border:1px solid var(--border); border-radius:14px; padding:16px 18px;
  margin-bottom:12px; display:flex; gap:14px; align-items:flex-start;
}
.ac-review-img { width:56px; height:56px; border-radius:10px; object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
.ac-review-body { flex:1; min-width:0; }
.ac-review-product { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.ac-review-stars { color:#F5A623; font-size:13px; margin-bottom:4px; }
.ac-review-text { font-size:13px; color:var(--muted); line-height:1.6; }
.ac-review-date { font-size:11.5px; color:var(--muted); margin-top:6px; }
.ac-review-helpful { font-size:12px; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:8px; }
.ac-helpful-btn { background:none; border:1px solid var(--border); border-radius:6px; padding:3px 10px; font-family:'Outfit',sans-serif; font-size:12px; cursor:pointer; transition:all .15s; }
.ac-helpful-btn:hover { border-color:var(--saffron); color:var(--saffron); }

/* ── Overview stats ── */
.ac-overview-grid { display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;}
.ac-ov-card {
  background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:16px;
  display:flex; align-items:center; gap:12px;
  cursor:pointer; transition:box-shadow .2s, border-color .2s;
}
.ac-ov-card:hover { box-shadow:var(--shadow); border-color:var(--saffron); }
.ac-ov-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.ac-ov-icon.saffron { background:var(--saffron-light); color:var(--saffron); }
.ac-ov-icon.forest  { background:var(--forest-light);  color:var(--forest); }
.ac-ov-icon.gold    { background:var(--gold-light);    color:var(--gold); }
.ac-ov-icon.blue    { background:#f0f4ff; color:#3552b8; }
.ac-ov-num { font-size:22px; font-weight:700; color:var(--ink); line-height:1; }
.ac-ov-label { font-size:12px; color:var(--muted); margin-top:2px; }

/* Recent activity */
.ac-activity-list { display:flex; flex-direction:column; gap:0; }
.ac-activity-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.ac-activity-item:last-child { border-bottom:none; }
.ac-activity-dot {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  margin-top:1px;
}
.ac-activity-dot.order   { background:var(--saffron-light); color:var(--saffron); }
.ac-activity-dot.wish    { background:#fff0f0; color:#e74c3c; }
.ac-activity-dot.review  { background:var(--gold-light); color:var(--gold); }
.ac-activity-dot.address { background:var(--forest-light); color:var(--forest); }
.ac-activity-dot.coin    { background:#f0f4ff; color:#3552b8; }
.ac-activity-body h4 { font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:2px; line-height:1.4; }
.ac-activity-body p  { font-size:12px; color:var(--muted); }

/* ── Mobile bottom nav ── */
.ac-mobile-nav {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:#fff; border-top:1px solid var(--border);
  z-index:500; padding:6px 0 8px;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
.ac-mobile-nav-inner {
  display:flex; align-items:center; justify-content:space-around;
  max-width:480px; margin:0 auto;
}
.ac-mnav-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:9px; font-weight:600; color:var(--muted);
  background:none; border:none; cursor:pointer;
  font-family:'Outfit',sans-serif; padding:4px 10px; min-height:44px;
  justify-content:center; transition:color .15s;
}
.ac-mnav-btn i { font-size:18px; }
.ac-mnav-btn.active { color:var(--saffron); }

/* ── Toast ── */
.ac-toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#ffeee0; color:#2A1607;
  font-size:13.5px; font-weight:600;
  padding:12px 22px; border-radius:40px;
  box-shadow:0 8px 28px rgba(0,0,0,.2);
  z-index:9999; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  white-space:nowrap; display:flex; align-items:center; gap:8px;
}
.ac-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.ac-toast i { color:#6dbf40; font-size:15px; }

/* ── Responsive ── */
@media (max-width:1023px) {
  .ac-layout { grid-template-columns:1fr; }
  .ac-sidebar { position:static; display:none; }
  .ac-mobile-nav { display:flex; }
  main { padding-bottom:80px; }
  .ac-overview-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px) {
  .ac-address-grid { grid-template-columns:1fr; }
  .ac-wish-grid { grid-template-columns:repeat(2,1fr); }
  .ac-coins-row { grid-template-columns:repeat(3,1fr); }
  .ac-form-grid { grid-template-columns:1fr; }
  .ac-form-group.full { grid-column:span 1; }
  .ac-info-grid { grid-template-columns:1fr; }
  .ac-info-row:nth-child(even) { padding-left:0; border-left:none; }
}
@media (max-width:479px) {
  .ac-overview-grid { grid-template-columns:1fr 1fr; }
  .ac-wish-grid { grid-template-columns:repeat(2,1fr); }
  .ac-panel-hdr { flex-direction:column; align-items:flex-start; }
}

/* ── Breadcrumb bar ── */
.wl-breadcrumb-bar {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.wl-bc-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}
.wl-bc-inner a { color: var(--muted); text-decoration: none; transition: color .15s; }
.wl-bc-inner a:hover { color: var(--saffron); }
.wl-bc-inner span { color: var(--border); }
.wl-bc-inner strong { color: var(--ink-mid); font-weight: 500; }

/* ── Page wrapper ── */
.wl-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) var(--pad-x) var(--space-xl);
}

/* ── Page header ── */
.wl-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 32px);
  flex-wrap: wrap;
}
.wl-page-header-left h1 {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.wl-page-header-left h1 em { color: var(--saffron); font-style: normal; }
.wl-page-header-left p { font-size: 13.5px; color: var(--muted); }
.wl-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--saffron-light);
  border: 1px solid rgba(194,106,18,.2);
  color: var(--saffron-dark);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  margin-left: 10px;
}

.wl-page-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wl-btn-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink-mid);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 40px;
  transition: border-color .15s, color .15s;
}
.wl-btn-share:hover { border-color: var(--saffron); color: var(--saffron); }
.wl-btn-clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid rgba(194,106,18,.3);
  background: var(--saffron-light);
  color: var(--saffron-dark);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 40px;
  transition: background .15s, color .15s;
}
.wl-btn-clear:hover { background: var(--saffron); color: #fff; }
.wl-btn-cart-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: linear-gradient(135deg, var(--forest), var(--forest-mid));
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 40px;
  box-shadow: 0 4px 14px rgba(71,106,30,.22);
  transition: opacity .2s, transform .2s;
}
.wl-btn-cart-all:hover { opacity: .88; transform: translateY(-1px); }

/* ── Filter / sort bar ── */
.wl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.wl-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wl-filter-chip {
  padding: 7px 16px;
  border-radius: 40px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink-mid);
  transition: all .15s;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wl-filter-chip:hover { border-color: var(--saffron); color: var(--saffron); }
.wl-filter-chip.active { background: var(--saffron); color: #fff; border-color: var(--saffron); }
.wl-toolbar-right .sort-sel { height: 38px; font-size: 13px; }

/* ── Grid ── */
/* Reuses .product-grid but we override for wishlist card extras */
.wl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 2vw, 18px);
}

/* ── Wishlist card — extends .pcard ── */
.wl-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.wl-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

/* Remove button (top-right) */
.wl-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  transition: background .15s, color .15s, border-color .15s;
}
.wl-remove-btn:hover { background: #fff0f0; color: #e74c3c; border-color: #e74c3c; }

/* Product image */
.wl-card .pimg {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--cream);
  display: block;
}

/* Out of stock overlay */
.wl-oos-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  aspect-ratio: 1;
  background: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.wl-oos-tag {
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: .05em;
}

/* Price drop indicator */
.wl-price-drop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff3cd;
  border: 1px solid #ffe08a;
  color: #7a5c00;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 5px;
}
.wl-price-drop i { font-size: 9px; }

/* Added date */
.wl-added-date {
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wl-added-date i { font-size: 9px; }

/* ── Empty state ── */
.wl-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 8vw, 80px) 20px;
  text-align: center;
}
.wl-empty-icon {
  width: 90px;
  height: 90px;
  background: var(--cream);
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin-bottom: 20px;
  color: var(--saffron);
  animation: wl-pulse 2.4s ease-in-out infinite;
}
@keyframes wl-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.wl-empty h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.wl-empty p { font-size: 14px; color: var(--muted); margin-bottom: 24px; max-width: 340px; }
.wl-empty .btn-primary { font-size: 14px; }

/* ── Summary bar at bottom ── */
.wl-summary-bar {
  margin-top: clamp(28px, 4vw, 40px);
  background: linear-gradient(135deg, #fff8f0, #fff);
  border: 1px solid rgba(194,106,18,.18);
  border-radius: 18px;
  padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.wl-summary-stats {
  display: flex;
  gap: clamp(20px, 4vw, 40px);
  flex-wrap: wrap;
}
.wl-stat { text-align: center; }
.wl-stat strong {
  display: block;
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  color: var(--ink);
}
.wl-stat span { font-size: 12px; color: var(--muted); }
.wl-summary-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Suggested (reuses sec-hdr + product-grid) ── */
.wl-suggested { margin-top: var(--space-xl); }

/* ── Card animation on load ── */
.wl-card {
  opacity: 0;
  transform: translateY(18px);
  animation: wl-fadein .38s ease forwards;
}
@keyframes wl-fadein {
  to { opacity: 1; transform: translateY(0); }
}
.wl-card:nth-child(1)  { animation-delay: .04s; }
.wl-card:nth-child(2)  { animation-delay: .08s; }
.wl-card:nth-child(3)  { animation-delay: .12s; }
.wl-card:nth-child(4)  { animation-delay: .16s; }
.wl-card:nth-child(5)  { animation-delay: .20s; }
.wl-card:nth-child(6)  { animation-delay: .24s; }
.wl-card:nth-child(7)  { animation-delay: .28s; }
.wl-card:nth-child(8)  { animation-delay: .32s; }

/* ── Toast notification ── */
.wl-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 40px;
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wl-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.wl-toast i { color: #6dbf40; font-size: 15px; }

/* ── Responsive ── */
@media (max-width: 1279px) { .wl-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1023px) { .wl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .wl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  {
  .wl-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wl-page-header { flex-direction: column; align-items: flex-start; }
  .wl-page-header-right { width: 100%; justify-content: flex-start; }
  .wl-btn-cart-all span { display: none; }
  .wl-summary-bar { flex-direction: column; align-items: flex-start; }
}

/* ── Page wrapper ── */
.pd-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px) var(--pad-x);
}

/* ── Product layout: gallery | info ── */
.pd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: flex-start;
  margin-bottom: var(--space-xl);
}

/* ── Gallery ── */
.pd-gallery {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  position: sticky;
  top: 116px;
}
.pd-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  flex-shrink: 0;
  background: var(--cream);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb.active,
.pd-thumb:hover { border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(194,106,18,.15); }

.pd-main-img {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--cream);
  border: 1px solid var(--border);
  cursor: zoom-in;
}
.pd-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.pd-main-img:hover img { transform: scale(1.06); }

.pd-img-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

/* ── Product Info ── */
.pd-info { display: flex; flex-direction: column; gap: 0; }

.pd-vendor-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.pd-vendor-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--forest);
  text-decoration: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .15s;
}
.pd-vendor-link:hover { color: var(--saffron); }
.pd-verified-badge {
  background: var(--forest-light);
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .03em;
}

.pd-title {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 12px;
}

/* Rating */
.pd-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pd-stars { color: #F5A623; font-size: 15px; letter-spacing: 1px; }
.pd-rating-num { font-size: 14px; font-weight: 700; color: var(--ink); }
.pd-rating-cnt { font-size: 13px; color: var(--muted); }
.pd-rating-cnt a { color: var(--saffron); text-decoration: underline; font-weight: 600; }

/* Short desc */
.pd-short-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Variants */
.pd-variants { margin-bottom: 16px; }
.pd-variant-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-mid);
  margin-bottom: 8px;
}
.pd-variant-label span { color: var(--saffron); font-weight: 600; text-transform: none; font-size: 12.5px; letter-spacing: 0; }
.pd-variant-options { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-variant-btn {
  padding: 7px 16px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--ink-mid);
  cursor: pointer;
  transition: all .15s;
  font-weight: 500;
  min-height: 36px;
}
.pd-variant-btn:hover { border-color: var(--saffron); color: var(--saffron-dark); }
.pd-variant-btn.active { background: var(--saffron-light); border-color: var(--saffron); color: var(--saffron-dark); font-weight: 600; }

/* Pricing */
.pd-price-box {
  background: linear-gradient(135deg, #fff8f0, #fff);
  border: 1px solid rgba(194,106,18,.18);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pd-price-curr {
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 700;
  color: var(--ink);
}
.pd-price-mrp {
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
}
.pd-price-mrp-label {
  font-size: 11px;
  color: var(--muted);
}
.pd-price-disc {
  background: var(--forest);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.pd-tax-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  width: 100%;
}

/* Stock */
.pd-stock-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 13px;
}
.pd-in-stock { color: var(--forest); font-weight: 600; }
.pd-in-stock::before { content: '●'; margin-right: 5px; font-size: 10px; }
.pd-sku { color: var(--muted); font-size: 12px; }

/* Quantity */
.pd-qty-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pd-qty-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-mid);
  flex-shrink: 0;
}
.pd-qty-ctrl {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.pd-qty-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: var(--cream);
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  font-weight: 400;
}
.pd-qty-btn:hover { background: var(--saffron-light); color: var(--saffron-dark); }
.pd-qty-val {
  width: 44px;
  height: 38px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  outline: none;
}

/* Action Buttons */
.pd-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.pd-btn-cart {
  padding: 13px 18px;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--saffron);
  background: var(--saffron-light);
  color: var(--saffron-dark);
}
.pd-btn-cart:hover { background: var(--saffron); color: #fff; }
.pd-btn-buynow {
  padding: 13px 18px;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  background: linear-gradient(135deg, var(--forest), var(--forest-mid));
  color: #fff;
  box-shadow: 0 6px 20px rgba(71,106,30,.25);
}
.pd-btn-buynow:hover { opacity: .88; transform: translateY(-1px); }
.pd-btn-wish {
  grid-column: span 2;
  padding: 10px;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s;
}
.pd-btn-wish:hover,
.pd-btn-wish.wished { background: #fff0f0; border-color: #e74c3c; color: #e74c3c; }

/* Delivery Checker */
.pd-delivery {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #fff;
}
.pd-delivery-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pd-delivery-title i { color: var(--saffron); }
.pd-pin-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pd-pin-row input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
  height: 40px;
}
.pd-pin-row input:focus { border-color: var(--saffron); }
.pd-pin-check {
  background: var(--saffron-light);
  border: 1px solid rgba(194,106,18,.25);
  color: var(--saffron-dark);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  height: 40px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.pd-pin-check:hover { background: var(--saffron); color: #fff; }
.pd-delivery-result {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--forest);
  font-weight: 500;
  display: none;
}
.pd-delivery-result.show { display: block; }

/* Highlights */
.pd-highlights { margin-bottom: 16px; }
.pd-highlights-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-mid);
  margin-bottom: 8px;
}
.pd-highlights-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pd-highlight-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-mid);
  background: var(--forest-light);
  padding: 7px 10px;
  border-radius: 8px;
  font-weight: 500;
}
.pd-highlight-item i { color: var(--forest); font-size: 11px; flex-shrink: 0; }

/* Meta info */
.pd-meta-list {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.pd-meta-key { color: var(--muted); width: 80px; flex-shrink: 0; }
.pd-meta-val { color: var(--ink-mid); font-weight: 500; }
.pd-meta-tag {
  display: inline-block;
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 4px;
}

/* Share row */
.pd-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.pd-share-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.pd-share-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--muted);
  transition: all .15s;
  text-decoration: none;
}
.pd-share-btn:hover { background: var(--saffron); color: #fff; border-color: var(--saffron); }

/* Secure checkout strip */
.pd-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 12px;
  flex-wrap: wrap;
}
.pd-secure i { color: var(--forest); }
.pd-secure .pchip { font-size: 10px; }

/* ── Return policy banner ── */
.pd-return-policy {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--forest-light);
  border: 1px solid rgba(71,106,30,.18);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--forest);
  font-weight: 500;
}
.pd-return-policy i { font-size: 15px; flex-shrink: 0; }
.pd-return-policy a { color: var(--forest); font-weight: 700; text-decoration: underline; }

/* ── Tabs ── */
.pd-tabs-wrap {
  margin-bottom: var(--space-xl);
}
.pd-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pd-tabs-nav::-webkit-scrollbar { display: none; }
.pd-tab-btn {
  padding: 12px 24px;
  border: none;
  background: none;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  min-height: 44px;
}
.pd-tab-btn:hover { color: var(--saffron); }
.pd-tab-btn.active { color: var(--saffron); border-bottom-color: var(--saffron); }

.pd-tab-panel { display: none; padding: 28px 0; }
.pd-tab-panel.active { display: block; }

/* Description */
.pd-desc-body {
  max-width: 740px;
}
.pd-desc-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  margin-top: 20px;
}
.pd-desc-body h4:first-child { margin-top: 0; }
.pd-desc-body p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 12px;
}
.pd-desc-body ul {
  padding-left: 18px;
  margin-bottom: 12px;
}
.pd-desc-body ul li {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 4px;
}

/* Specs table */
.pd-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  max-width: 640px;
}
.pd-specs-table tr { border-bottom: 1px solid var(--border); }
.pd-specs-table tr:last-child { border-bottom: none; }
.pd-specs-table td {
  padding: 12px 16px;
  vertical-align: top;
  line-height: 1.5;
}
.pd-specs-table td:first-child {
  width: 180px;
  font-weight: 600;
  color: var(--ink-mid);
  background: var(--cream);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pd-specs-table td:last-child { color: var(--muted); }
.pd-specs-table tr:first-child td:first-child { border-top-left-radius: 10px; }
.pd-specs-table tr:first-child td:last-child { border-top-right-radius: 10px; }
.pd-specs-table tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.pd-specs-table tr:last-child td:last-child { border-bottom-right-radius: 10px; }

/* Reviews */
.pd-reviews-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: flex-start;
}
.pd-rating-summary {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 20px;
  text-align: center;
  position: sticky;
  top: 116px;
}
.pd-big-rating {
  font-size: 52px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.pd-big-stars { color: #F5A623; font-size: 20px; letter-spacing: 2px; margin-bottom: 4px; }
.pd-rating-total { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.pd-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.pd-bar-label { width: 32px; text-align: right; flex-shrink: 0; color: var(--muted); font-weight: 600; }
.pd-bar-outer {
  flex: 1;
  height: 7px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.pd-bar-inner { height: 100%; border-radius: 10px; background: #F5A623; transition: width .6s ease; }
.pd-bar-cnt { width: 26px; text-align: left; color: var(--muted); font-size: 11px; }

.pd-reviews-list { display: flex; flex-direction: column; gap: 16px; }
.pd-review-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
}
.pd-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pd-reviewer-info { display: flex; flex-direction: column; gap: 3px; }
.pd-reviewer-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.pd-review-date { font-size: 11.5px; color: var(--muted); }
.pd-review-stars { color: #F5A623; font-size: 13px; }
.pd-review-text { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.pd-verified-purchase {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--forest-light);
  color: var(--forest);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 8px;
}

/* Write Review Form */
.pd-write-review {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 32px);
  margin-top: 28px;
}
.pd-write-review h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink) !important;
  margin-bottom: 20px;
}
.pd-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pd-form-group { display: flex; flex-direction: column; gap: 6px; }
.pd-form-group.full { grid-column: span 2; }
.pd-form-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-mid);
}
.pd-form-input {
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .2s;
  height: 44px;
}
.pd-form-input:focus { border-color: var(--saffron); }
.pd-form-textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .2s;
  resize: vertical;
  min-height: 90px;
}
.pd-form-textarea:focus { border-color: var(--saffron); }

/* Star picker */
.pd-star-picker { display: flex; gap: 4px; }
.pd-star-pick {
  font-size: 22px;
  color: var(--border);
  cursor: pointer;
  transition: color .1s;
  background: none;
  border: none;
  padding: 0 2px;
  line-height: 1;
}
.pd-star-pick.lit,
.pd-star-pick:hover,
.pd-star-pick:hover ~ .pd-star-pick { color: #F5A623; }

.pd-form-submit {
  margin-top: 16px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--saffron), var(--gold));
  color: #fff;
  border: none;
  border-radius: 40px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: opacity .2s;
}
.pd-form-submit:hover { opacity: .88; }

/* Related Products */
.pd-related { padding-bottom: var(--space-xl); }

/* Sticky mobile bottom bar */
.pd-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 10px var(--pad-x);
  gap: 10px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}
.pd-mobile-bar .pd-btn-cart,
.pd-mobile-bar .pd-btn-buynow { flex: 1; }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .pd-reviews-wrap { grid-template-columns: 1fr; }
  .pd-rating-summary { position: static; }
}

@media (max-width: 767px) {
  .pd-layout {
    grid-template-columns: 1fr;
  }
  .pd-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    position: static;
  }
  .pd-thumbs {
    flex-direction: row;
    order: 2;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-thumb { flex-shrink: 0; }
  .pd-main-img { order: 1; }
  .pd-actions { grid-template-columns: 1fr 1fr; }
  .pd-btn-wish { display: none; }
  .pd-mobile-bar { display: flex; }
  .pd-highlights-list { grid-template-columns: 1fr; }
  .pd-form-grid { grid-template-columns: 1fr; }
  .pd-form-group.full { grid-column: span 1; }
  main { padding-bottom: 80px; }
}

@media (max-width: 479px) {
  .pd-actions { grid-template-columns: 1fr; }
  .pd-specs-table td:first-child { width: 130px; }
  .pd-reviews-wrap { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* Banner */
.ct-banner {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1e0d04 0%, #2A1607 50%, #1a3008 100%);
}
.ct-banner-radial {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 60%, rgba(194,106,18,.22) 0%, transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(71,106,30,.28) 0%, transparent 36%);
  pointer-events: none;
}
.ct-banner-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(40px,6vw,72px) var(--pad-x);
  position: relative;
  z-index: 1;
  width: 100%;
}
.ct-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,.42);
  margin-bottom: 14px;
}
.ct-breadcrumb a { color: rgba(255,255,255,.52); text-decoration: none; transition: color .15s; }
.ct-breadcrumb a:hover { color: #F5C97A; }
.ct-breadcrumb span { color: rgba(255,255,255,.22); }
.ct-banner h1 {
  font-size: clamp(28px,5vw,44px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.15;
}
.ct-banner h1 em { color: #F5C97A; font-style: normal; }
.ct-banner p {
  font-size: clamp(13px,2.5vw,15px);
  color: rgba(255,255,255,.68);
  max-width: 480px;
}

/* Page wrap */
.ct-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(28px,4vw,48px) var(--pad-x) var(--space-xl);
}

/* ── Contact layout: form | info ── */
.ct-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(20px,3vw,36px);
  align-items: flex-start;
  margin-bottom: var(--space-xl);
}

/* ── Contact Form Card ── */
.ct-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.ct-form-head {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 18px 26px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ct-form-head i { color: var(--saffron); font-size: 17px; }
.ct-form-head h2 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.ct-form-head p { font-size: 12.5px; color: var(--muted); margin: 0; }
.ct-form-body { padding: clamp(20px,3vw,28px) clamp(20px,3vw,26px); }

/* Topic tabs */
.ct-topic-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ct-topic-btn {
  padding: 7px 16px;
  border-radius: 40px;
  border: 1.5px solid var(--border);
  background: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ct-topic-btn:hover { border-color: var(--saffron); color: var(--saffron); }
.ct-topic-btn.active { background: var(--saffron); color: #fff; border-color: var(--saffron); font-weight: 600; }
.ct-topic-btn i { font-size: 11px; }

/* Form grid */
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-grid.full { grid-template-columns: 1fr; }
.ct-fgroup { display: flex; flex-direction: column; gap: 5px; }
.ct-fgroup.span2 { grid-column: span 2; }
.ct-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-mid);
}
.ct-label .req { color: var(--saffron); }
.ct-input, .ct-select, .ct-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ct-input:focus, .ct-select:focus, .ct-textarea:focus {
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px rgba(194,106,18,.1);
}
.ct-input::placeholder, .ct-textarea::placeholder { color: #b0a090; }
.ct-select {
  cursor: pointer;
  height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A7560' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  -webkit-appearance: none;
}
.ct-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.ct-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* File attach */
.ct-attach-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  background: #FAFAF8;
}
.ct-attach-zone:hover { border-color: var(--saffron); background: var(--saffron-light); }
.ct-attach-zone i { font-size: 22px; color: var(--muted); margin-bottom: 8px; display: block; }
.ct-attach-zone p { font-size: 12.5px; color: var(--muted); margin: 0; }
.ct-attach-zone small { font-size: 11px; color: var(--muted); opacity: .7; }
.ct-attach-zone input { display: none; }

/* Submit row */
.ct-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.ct-submit-note {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ct-submit-note i { color: var(--forest); font-size: 13px; }
.ct-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--saffron), var(--gold));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  min-height: 50px;
  box-shadow: 0 6px 20px rgba(194,106,18,.3);
  transition: opacity .2s, transform .2s;
}
.ct-submit-btn:hover { opacity: .9; transform: translateY(-2px); }

/* ── Right column ── */
.ct-right { display: flex; flex-direction: column; gap: 16px; }

/* Info card */
.ct-info-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.ct-info-head {
  background: var(--forest);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.ct-info-head i { font-size: 16px; opacity: .85; }
.ct-info-head h3 { font-size: 14px; font-weight: 700; margin: 0; }
.ct-info-head p { font-size: 12px; opacity: .7; margin: 0; }

.ct-contact-list { padding: 6px 0; }
.ct-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid #F4EFE7;
  transition: background .15s;
  text-decoration: none;
  color: inherit;
}
.ct-contact-item:last-child { border-bottom: none; }
.ct-contact-item:hover { background: var(--cream); }
.ct-contact-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.ct-contact-icon.saffron { background: var(--saffron-light); color: var(--saffron); }
.ct-contact-icon.forest  { background: var(--forest-light); color: var(--forest); }
.ct-contact-icon.gold    { background: var(--gold-light); color: var(--gold); }
.ct-contact-icon.blue    { background: #EBF4FF; color: #2B6CB0; }
.ct-contact-meta strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.ct-contact-meta span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ct-contact-meta a { color: var(--saffron); text-decoration: none; font-weight: 600; }
.ct-contact-meta a:hover { text-decoration: underline; }

/* Hours card */
.ct-hours-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
}
.ct-hours-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ct-hours-title i { color: var(--saffron); }
.ct-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.ct-hours-row:last-child { border-bottom: none; }
.ct-hours-row span { color: var(--muted); }
.ct-hours-row strong { color: var(--ink); font-weight: 600; }
.ct-hours-row .closed { color: #c0392b; font-size: 12px; }
.ct-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--forest-light);
  border: 1px solid rgba(71,106,30,.2);
  color: var(--forest);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 12px;
}
.ct-live-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--forest);
  animation: ct-pulse 1.6s ease-in-out infinite;
}
@keyframes ct-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* Social quick-links */
.ct-social-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
}
.ct-social-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ct-social-title i { color: var(--saffron); }
.ct-social-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ct-social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-mid);
  text-decoration: none;
  transition: all .15s;
}
.ct-social-link i { font-size: 14px; flex-shrink: 0; }
.ct-social-link:hover { border-color: var(--saffron); color: var(--saffron); background: var(--saffron-light); }
.ct-social-link.fb:hover  { border-color: #1877f2; color: #1877f2; background: #EBF4FF; }
.ct-social-link.ig:hover  { border-color: #e1306c; color: #e1306c; background: #fff0f5; }
.ct-social-link.yt:hover  { border-color: #ff0000; color: #ff0000; background: #fff5f5; }
.ct-social-link.tw:hover  { border-color: #1da1f2; color: #1da1f2; background: #EBF4FF; }

/* ── Info cards row (3-col strip) ── */
.ct-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px,2vw,20px);
  margin-bottom: var(--space-xl);
}
.ct-strip-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(18px,3vw,26px) clamp(16px,2.5vw,22px);
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.ct-strip-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.ct-strip-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.ct-strip-icon.saffron { background: var(--saffron-light); color: var(--saffron); }
.ct-strip-icon.forest  { background: var(--forest-light); color: var(--forest); }
.ct-strip-icon.gold    { background: var(--gold-light); color: var(--gold); }
.ct-strip-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.ct-strip-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.ct-strip-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--saffron);
  text-decoration: none;
  border-bottom: 1px solid var(--saffron);
  padding-bottom: 1px;
  transition: opacity .15s;
}
.ct-strip-card a:hover { opacity: .7; }

/* ── Map section ── */
.ct-map-section {
  margin-bottom: var(--space-xl);
}
.ct-map-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.ct-map-hdr h2 {
  font-size: clamp(20px,3.5vw,26px);
  font-weight: 700;
  color: var(--ink);
}
.ct-map-hdr h2 em { color: var(--saffron); font-style: normal; }
.ct-map-hdr p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ct-map-frame {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  height: clamp(260px,40vw,400px);
  background: linear-gradient(135deg, #f0ece5, #e8e2d8);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Decorative map placeholder */
.ct-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}
.ct-map-placeholder i { font-size: 48px; color: var(--saffron); opacity: .5; }
.ct-map-placeholder p { font-size: 14px; color: var(--muted); }
.ct-map-placeholder a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: var(--saffron);
  color: #fff;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}
.ct-map-placeholder a:hover { opacity: .88; }
/* Address chip overlay */
.ct-map-addr {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
  max-width: 280px;
}
.ct-map-addr strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.ct-map-addr span { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ── FAQ strip ── */
.ct-faq-section { margin-bottom: var(--space-xl); }
.ct-faq-hdr { margin-bottom: 20px; }
.ct-faq-hdr h2 { font-size: clamp(20px,3.5vw,26px); font-weight: 700; color: var(--ink); }
.ct-faq-hdr h2 em { color: var(--saffron); font-style: normal; }
.ct-faq-hdr p { font-size: 13px; color: var(--muted); margin-top: 4px; }

.ct-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-faq-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.ct-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  gap: 10px;
  transition: background .15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: 'Outfit', sans-serif;
}
.ct-faq-q:hover { background: var(--cream); }
.ct-faq-q.open { color: var(--saffron); background: var(--saffron-light); }
.ct-faq-q i { color: var(--muted); font-size: 12px; flex-shrink: 0; transition: transform .2s; }
.ct-faq-q.open i { color: var(--saffron); transform: rotate(45deg); }
.ct-faq-a {
  display: none;
  padding: 0 18px 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  border-top: 1px solid var(--border);
}
.ct-faq-a.open { display: block; }

/* ── Success state ── */
.ct-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
}
.ct-success.show { display: flex; }
.ct-success-icon {
  width: 80px; height: 80px;
  background: var(--forest-light);
  border: 3px solid var(--forest);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--forest);
  margin-bottom: 20px;
  animation: ct-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ct-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.ct-success h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.ct-success p { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; max-width: 320px; }
.ct-success-ref {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-mid);
}

/* ── Toast ── */
.ct-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 40px;
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ct-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ct-toast i { color: #6dbf40; font-size: 15px; }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .ct-layout { grid-template-columns: 1fr; }
  .ct-right { order: -1; }
  .ct-strip { grid-template-columns: 1fr; }
  .ct-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-fgroup.span2 { grid-column: span 1; }
  .ct-strip { grid-template-columns: 1fr 1fr; }
  .ct-social-links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
  .ct-strip { grid-template-columns: 1fr; }
  .ct-submit-row { flex-direction: column; align-items: flex-start; }
  .ct-submit-btn { width: 100%; justify-content: center; }
}

@media (max-width: 1024px) {
    .search-wrap select {
        width: 55px;
    }
}

@media (max-width: 768px) {
    .search-wrap select {
        width: 30px;
    }
}