:root {
	--onam-space-1: 4px;
	--onam-space-2: 8px;
	--onam-space-3: 12px;
	--onam-space-4: 16px;
	--onam-space-5: 20px;
	--onam-space-6: 24px;
	--onam-space-8: 32px;

	--onam-maroon: #7a1f1f;
	--onam-rust: #b8511a;
	--onam-gold: #f5d98b;
	--onam-cream: #fff8e1;
	--onam-gold-border: #f0d97a;
	--onam-border: #e5e5e5;
	--onam-text: #2b2116;
	--onam-text-muted: #666;
	--onam-danger: #d63638;

	--onam-radius: 10px;
	--onam-radius-sm: 6px;
	--onam-touch: 40px;
	--onam-app-header-height: 56px;
	--onam-app-footer-height: 62px;
}

/* ---------- App shell: sticky header + bottom tab bar ---------- */
.onam-app-header {
	position: sticky;
	top: 0;
	z-index: 9998;
	height: var(--onam-app-header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--onam-space-3);
	padding: 0 var(--onam-space-4);
	background: #fff;
	color: var(--onam-text);
	box-sizing: border-box;
	border-bottom: 1px solid var(--onam-border);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.onam-app-header-brand {
	display: flex;
	align-items: center;
	gap: var(--onam-space-2);
	color: var(--onam-maroon);
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	min-width: 0;
}

.onam-app-header-brand img {
	height: 34px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	flex-shrink: 0;
}

.onam-app-header-brand span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The logo image already carries the store name/wordmark — don't repeat it as text. */
.onam-app-header-brand img ~ span {
	display: none;
}

.onam-app-header-cart {
	position: relative;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	flex-shrink: 0;
	padding: var(--onam-space-1);
}

.onam-app-header-cart-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: var(--onam-gold);
	color: var(--onam-maroon);
	font-size: 11px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

.onam-hidden {
	display: none !important;
}

.onam-app-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9997;
	height: calc(var(--onam-app-footer-height) + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	background: #fff;
	border-top: 1px solid var(--onam-border);
	display: flex;
	box-sizing: border-box;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.onam-app-tab {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-decoration: none;
	color: var(--onam-text-muted);
	position: relative;
}

.onam-app-tab-icon {
	font-size: 20px;
	line-height: 1;
}

.onam-app-tab-label {
	font-size: 11px;
	font-weight: 600;
}

.onam-app-tab-active {
	color: var(--onam-maroon);
}

.onam-app-tab-buy-now,
.onam-app-tab-buy-now.onam-app-tab-active {
	color: var(--onam-danger);
	font-weight: 700;
}

.onam-app-tab-badge {
	position: absolute;
	top: 2px;
	right: calc(50% - 22px);
	background: var(--onam-danger);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 15px;
	height: 15px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* Reserve room above the bottom tab bar so it never covers page content */
body:has(.onam-app-footer) {
	padding-bottom: calc(var(--onam-app-footer-height) + env(safe-area-inset-bottom));
}

/* When both the tab bar and the "Order Now" summary are present, stack the
   summary directly above the tab bar instead of overlapping it. */
body:has(.onam-app-footer) .onam-floating-bar {
	bottom: calc(var(--onam-app-footer-height) + env(safe-area-inset-bottom));
}

/* On mobile, the app header/footer replace the theme's own header on Onam
   pages (it carries no functional nav at this width anyway) instead of
   stacking on top of it. Desktop keeps the theme header as-is. */
@media (max-width: 900px) {
	body.onam-app-page .ts-header,
	body.onam-app-page header.ts-header {
		display: none !important;
	}
}

/* The app header/footer are mobile-only by design — the theme's own header
   already has full nav on desktop, so showing both would duplicate it. */
@media (min-width: 901px) {
	.onam-app-header,
	.onam-app-footer,
	.onam-floating-bar {
		display: none !important;
	}

	body:has(.onam-app-footer) {
		padding-bottom: 0;
	}
}

/*
 * Desktop-only sticky order card, fixed to the bottom-right of the
 * viewport — the desktop equivalent of the mobile floating bar/footer,
 * appearing once an item is in the cart. Hidden on mobile via the base
 * `display: none` below; `.onam-hidden` (global !important utility)
 * handles hiding it at 0 items.
 */
.onam-desktop-sticky-cart {
	display: none;
}

@media (min-width: 901px) {
	.onam-desktop-sticky-cart {
		display: flex;
		flex-direction: column;
		gap: var(--onam-space-2);
		position: fixed;
		right: var(--onam-space-5);
		bottom: var(--onam-space-5);
		z-index: 9999;
		width: 220px;
		background: #fff;
		border: 1px solid var(--onam-border);
		border-radius: var(--onam-radius);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
		padding: var(--onam-space-4);
		box-sizing: border-box;
	}
}

.onam-desktop-sticky-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--onam-text-muted);
	font-weight: 700;
}

.onam-desktop-sticky-count {
	font-size: 14px;
	color: var(--onam-text);
}

.onam-desktop-sticky-count span:first-child {
	font-weight: 700;
	margin-right: 4px;
}

.onam-desktop-sticky-total {
	font-size: 20px;
	font-weight: 700;
	color: var(--onam-text);
}

.onam-desktop-sticky-btn {
	display: block;
	text-align: center;
	background: var(--onam-danger);
	color: #fff;
	font-weight: 700;
	padding: var(--onam-space-3);
	border-radius: var(--onam-radius-sm);
	text-decoration: none;
	margin-top: var(--onam-space-1);
}

.onam-desktop-sticky-btn:hover {
	opacity: 0.9;
	color: #fff;
}

/* ---------- Shared: product image & badges ---------- */
.onam-product-image {
	position: relative;
	display: block;
}

.onam-out-of-stock .onam-product-image img {
	filter: grayscale(100%);
	opacity: 0.6;
}

.onam-oos-badge,
.onam-sale-badge {
	position: absolute;
	top: var(--onam-space-2);
	left: var(--onam-space-2);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 10px;
	border-radius: 999px;
	color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.onam-oos-badge {
	background: #6b6b6b;
}

.onam-sale-badge {
	background: var(--onam-danger);
}

/*
 * A self-contained pill stepper: buttons and input as equal-height flex
 * children of one light-grey pill. Built with `all: unset` on the controls
 * because this theme's global `input`/`button` rules (line-height,
 * font-size, borders) otherwise leak in and the pieces render at mismatched
 * heights — the classic symptom is the input looking squashed or invisible
 * between two normal-looking buttons.
 */
.onam-qty-row {
	display: flex;
	align-items: stretch;
	height: 42px;
	width: 100%;
	min-width: 128px;
	border-radius: 999px;
	overflow: hidden;
	background: #f0f0f0;
	border: 1px solid #e0e0e0;
	box-sizing: border-box;
}

.onam-qty-row button {
	all: unset;
	box-sizing: border-box;
	width: 42px;
	flex: 0 0 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--onam-text);
}

.onam-qty-row button:hover {
	background: rgba(0, 0, 0, 0.05);
}

.onam-qty-row button:active {
	background: rgba(0, 0, 0, 0.1);
}

.onam-qty-input {
	all: unset;
	box-sizing: border-box;
	flex: 1 1 auto;
	width: 100%;
	min-width: 24px;
	height: 100%;
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	font-family: inherit;
	color: var(--onam-text);
	background: transparent;
	/*
	 * !important, with a confirmed specific cause: the theme's reset.css
	 * has `html input[type^="text"], html input[type^="number"], ...`
	 * (specificity 0,1,2) setting padding: 4px 15px and text-align: left —
	 * that beats this single-class selector (0,1,0) regardless of the
	 * `all: unset` above, since specificity is decided independently of
	 * source order or `all`. Verified via document.styleSheets rule
	 * matching, not a guess — on a 32px-wide stepper input, 15px of
	 * padding on each side left near-zero room for the digit, which is
	 * why it was rendering blank.
	 */
	text-align: center !important;
	padding: 0 !important;
}

.onam-syncing {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

/* ---------- Grid view ---------- */
.onam-product-grid-view {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--onam-space-4);
	margin: var(--onam-space-6) 0;
}

@media (max-width: 900px) {
	.onam-product-grid-view {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--onam-space-3);
	}
}

@media (max-width: 700px) {
	.onam-product-grid-view {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--onam-space-3);
	}

	/*
	 * Flat mobile stepper: no outer border, no per-button box/shape — just
	 * a light-grey rounded strip with the number sitting in its own white
	 * "chip". Desktop keeps the existing bordered pill untouched (this
	 * whole block is mobile-only).
	 */
	.onam-qty-row {
		border: none;
		border-radius: 12px;
		background: #f2f2f2;
		padding: 3px;
	}

	.onam-qty-row-compact {
		border-radius: 10px;
	}

	.onam-qty-row button {
		border-radius: 0;
	}

	.onam-qty-input {
		height: auto;
		align-self: stretch;
		margin: 0 2px;
		background: #fff !important;
		border-radius: 8px;
	}
}

.onam-product-card {
	position: relative;
	border-radius: 16px;
	padding: var(--onam-space-3);
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: var(--onam-space-2);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.15s ease;
}

.onam-product-card:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.onam-product-card .onam-product-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.onam-product-card-name {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--onam-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.4em;
}

.onam-product-card-price {
	font-size: 15px;
	font-weight: 700;
	color: var(--onam-maroon);
}

.onam-product-card-price del {
	color: var(--onam-text-muted);
	font-weight: 400;
	font-size: 0.8em;
	text-decoration: line-through;
	margin-right: 4px;
}

.onam-product-card-price ins {
	text-decoration: none;
}

/*
 * Floating cart summary — a compact, light-grey, info-only strip (no
 * button; the footer's Buy Now tab is the actual call to action) that
 * stays visible from initial load, sitting directly above the bottom tab
 * bar.
 */
.onam-floating-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: #f2f2f2;
	color: var(--onam-text-muted);
	border-top: 1px solid var(--onam-border);
	padding: 6px var(--onam-space-4);
	padding-bottom: calc(6px + env(safe-area-inset-bottom));
	box-sizing: border-box;
}

.onam-floating-bar-inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.onam-floating-summary {
	font-size: 12px;
	color: var(--onam-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.onam-floating-count,
.onam-floating-total {
	font-weight: 700;
	color: var(--onam-text);
}

/* ---------- Checkout / Order Now page ---------- */
.onam-checkout {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--onam-space-4);
	box-sizing: border-box;
}

.onam-checkout-step h2 {
	margin: 0 0 var(--onam-space-4);
}

.onam-order-summary {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--onam-space-6);
	font-size: 14px;
}

.onam-order-summary td {
	padding: var(--onam-space-2) 0;
}

.onam-align-right {
	text-align: right;
}

.onam-order-item-row td {
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}

.onam-order-item-name {
	padding-right: var(--onam-space-2);
}

.onam-order-item-qty {
	width: 1%;
	white-space: nowrap;
}

.onam-qty-row-compact {
	height: 32px;
	min-width: 88px;
}

.onam-qty-row-compact button {
	width: 32px;
	flex: 0 0 32px;
	font-size: 15px;
}

.onam-qty-row-compact .onam-qty-input {
	font-size: 13px;
}

.onam-order-item-remove {
	width: 1%;
}

.onam-remove-item {
	all: unset;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--onam-text-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}

.onam-remove-item:hover {
	background: #f2f2f2;
	color: var(--onam-danger);
}

.onam-summary-subtotal td,
.onam-summary-handling td {
	color: var(--onam-text-muted);
	border-top: 1px solid #eee;
}

.onam-summary-total td {
	border-top: 2px solid var(--onam-maroon);
	padding-top: var(--onam-space-3);
	font-size: 16px;
}

.onam-field {
	margin-bottom: var(--onam-space-4);
}

.onam-field label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--onam-space-2);
}

.onam-field input[type="text"],
.onam-field input[type="email"],
.onam-field input[type="tel"],
.onam-field textarea {
	width: 100%;
	min-height: var(--onam-touch);
	padding: var(--onam-space-3);
	border: 1px solid #ccc;
	border-radius: var(--onam-radius-sm);
	font-size: 16px;
	box-sizing: border-box;
	font-family: inherit;
}

.onam-radio-group {
	display: flex;
	gap: var(--onam-space-3);
}

.onam-radio-group label {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--onam-space-2);
	font-weight: 500;
	min-height: var(--onam-touch);
	padding: var(--onam-space-2) var(--onam-space-3);
	border: 1px solid #ccc;
	border-radius: var(--onam-radius-sm);
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
}

.onam-radio-group label:has(input:checked) {
	border-color: var(--onam-maroon);
	background: var(--onam-cream);
	color: var(--onam-maroon);
	font-weight: 600;
}

.onam-place-order-btn,
.onam-confirm-payment-btn {
	width: 100%;
	min-height: 48px;
	padding: var(--onam-space-3) var(--onam-space-4);
	font-size: 16px;
	border-radius: var(--onam-radius-sm);
	cursor: pointer;
	box-sizing: border-box;
}

.onam-place-order-btn:disabled,
.onam-confirm-payment-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.onam-form-error {
	color: var(--onam-danger);
	font-weight: 600;
	min-height: 1.4em;
	margin-top: var(--onam-space-2);
}

.onam-checkout-qr {
	display: block;
	max-width: 220px;
	width: 100%;
	height: auto;
	margin: var(--onam-space-4) auto;
	border: 1px solid #eee;
	border-radius: var(--onam-radius);
}

.onam-pay-amount {
	background: var(--onam-cream);
	border: 1px solid var(--onam-gold-border);
	border-radius: var(--onam-radius);
	padding: var(--onam-space-4);
	text-align: center;
	font-size: 16px;
	margin: var(--onam-space-3) 0;
}

.onam-order-number,
.onam-fulfilment-note,
.onam-account-note {
	text-align: center;
	color: var(--onam-text-muted);
	margin: 0 0 var(--onam-space-3);
}

.onam-checkout-empty {
	text-align: center;
	padding: var(--onam-space-8) var(--onam-space-4);
}

@media (min-width: 600px) {
	.onam-checkout {
		padding-left: 0;
		padding-right: 0;
	}

	.onam-details-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--onam-space-4);
	}

	.onam-details-grid .onam-field-full {
		grid-column: 1 / -1;
	}
}

/* ---------- Shared: Onam banners ---------- */
.onam-thankyou-banner {
	background: var(--onam-cream);
	border: 1px solid var(--onam-gold-border);
	border-radius: var(--onam-radius);
	padding: var(--onam-space-5) var(--onam-space-6);
	margin: var(--onam-space-5) 0;
}

.onam-thankyou-banner h2 {
	margin-top: 0;
}

.onam-upi-payment-box {
	margin-top: var(--onam-space-2);
}

/* ---------- My Orders ---------- */
.onam-my-orders {
	max-width: 640px;
	margin: var(--onam-space-4) auto var(--onam-space-6);
	padding: 0 var(--onam-space-4);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--onam-space-4);
}

.onam-order-card {
	border: 1px solid var(--onam-border);
	border-radius: var(--onam-radius);
	padding: var(--onam-space-4);
	background: #fff;
}

.onam-order-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--onam-space-3);
	margin-bottom: var(--onam-space-1);
}

.onam-order-card-id {
	font-weight: 700;
}

.onam-order-status-badge {
	font-size: 12px;
	font-weight: 600;
	padding: 4px var(--onam-space-3);
	border-radius: 999px;
	white-space: nowrap;
	background: #eee;
	color: var(--onam-text);
}

.onam-status-pending,
.onam-status-on-hold { background: #fff3cd; color: #8a6d3b; }
.onam-status-processing { background: #d9edf7; color: #31708f; }
.onam-status-ready { background: #dff0d8; color: #3c763d; }
.onam-status-completed { background: var(--onam-cream); color: var(--onam-maroon); }
.onam-status-cancelled { background: #f2dede; color: #a94442; }

.onam-order-card-date {
	color: var(--onam-text-muted);
	font-size: 13px;
	margin-bottom: var(--onam-space-3);
}

.onam-order-card-items {
	list-style: none;
	margin: 0 0 var(--onam-space-3);
	padding: 0;
	font-size: 14px;
	color: var(--onam-text);
}

.onam-order-card-items li {
	padding: var(--onam-space-1) 0;
	border-bottom: 1px dashed #eee;
}

.onam-order-card-items li:last-child {
	border-bottom: none;
}

.onam-order-card-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--onam-space-2);
	border-top: 1px solid var(--onam-border);
	font-size: 15px;
}